:root{
  --blue:#a3dce5;
  --black:#000;
  --white:#fff;
  --maxWidth:100%;
  --marginTop:30px;
  --marginLeft:34px;
}
*{
  box-sizing:border-box;
  word-break:keep-all;
  word-wrap:break-word;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}
html{ font-size:13px; }
body{
  font-size:1rem;
  color:var(--black);
  font-weight:400;
  font-family:utopia-std-caption, 'utopia-std-caption', Pretendard, 'Pretendard', sans-serif;
  line-height:1.32;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  overflow:hidden;
}
h1, h2, h3, h4, h5{
  font-family:utopia-std-caption, 'utopia-std-caption', Pretendard, 'Pretendard', sans-serif;
  font-weight:700;
  line-height:1.1;
}
h1{ font-size:2rem; }
h2,h3{ font-size:1.1538rem; }

.device-desktop{  }
.device-mobile{ display:none !important; }

/* input */
textarea{
  font-family:chancery, 'chancery', Pretendard, 'Pretendard', sans-serif;
  font-size:1.3rem;
}
textarea::placeholder{ color:rgba(0,0,0,0.3); }

/* button */
[class^="btn"]{ padding:10px 42px; cursor:pointer;
  font-family:itc-american-typewriter, 'itc-american-typewriter', serif;
  font-weight:400;
  color:#fff;
  line-height:1.2;
  background:linear-gradient(to top, #d12d9c 0%, #5ea2ef 100%);
  border:2px solid rgba(255,255,255,0.55);
  border-radius:999px;
  box-shadow:0 -8px 0px rgba(255,255,255,0.2) inset;
  filter:drop-shadow(2px 4px 0.5px rgba(0,0,0,0.3));
  -webkit-filter:drop-shadow(2px 4px 0.5px rgba(0,0,0,0.3));
  white-space:nowrap;
}
.closeBtn{ cursor:pointer; }
.closeBtn:not(.noImage){ position:absolute; display:block; width:36px; padding-top:42px; z-index:200;
  /* background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url('/img/room/closeBtn.svg'); */
}
.closeBtn:not(.noImage):after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; z-index:10;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url('/img/room/closeBtn.svg');
}
.closeBtn:not(.noImage):before{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; background-color:#000;
  filter:blur(8px);
  -webkit-filter:blur(8px);
  z-index:-1;
  opacity:0.3;
}

/* transition */
body:after,
#backImage:after,
#backImage .logoArea,
#backImage .mail-back img,
#elements > div,
#elements > div:after,
#camera .videoWrap .video iframe,
#note > ul.diary-btn > li img,
#room > .pages > div{ transition:300ms; }

#footer{ position:fixed; bottom:5%; left:50%; transform:translateX(-50%); z-index:200;
  filter:drop-shadow(2px 4px 0.5px rgba(0,0,0,0.3));
  -webkit-filter:drop-shadow(2px 4px 0.5px rgba(0,0,0,0.3));
}
  #footer .link-list{ display:flex; align-items:center; gap:36px; list-style:none; margin:0; padding:10px 42px; border-radius:999px;
    background:linear-gradient(to top, #d12d9c 0%, #5ea2ef 100%);
    border:2px solid rgba(255,255,255,0.55);
    box-shadow:0 -8px 0px rgba(255,255,255,0.2) inset;
  }
    #footer .link-list li{  }
      #footer .link-list li a{ display:flex; align-items:center; justify-content:center; width:26px; }
        #footer .link-list li a img{ }

#backImage{ position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; pointer-events:none; z-index:-1; background-image:url('/img/room/background.webp'); background-size:cover; }
  #backImage > div{ position:absolute; }
  #backImage .logoArea{ top:50%; left:50%; transform:translate(-50%,-50%); width:45%; min-width:420px; white-space:nowrap; }
    #backImage .logoArea img{ display:block; max-width:unset; width:100%; }
    #backImage .logoArea:after{ content:'2026.5.28 HEART OF WOMAN';
      display:block; position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:25px;
      font-family:'itc-american-typewriter', itc-american-typewriter, serif;
      font-size:16px;
      color:#fff;
    }
  #backImage .air-balloon{ top:5%; left:15%; width:10%; }
    #backImage .air-balloon img{ display:block; width:100%; max-width:unset;
      animation:updown 4800ms infinite ease-in-out;
    }
  #backImage .shining{
    mix-blend-mode:color-dodge;
    -webkit-mix-blend-mode:color-dodge;
  }
    #backImage .shining img{ position:fixed; width:55%; }
    #backImage .shining img.effect1{ top:-10%; left:-10%; }
    #backImage .shining img.effect2{ top:-10%; right:-10%; }
    #backImage .shining img.effect3{ bottom:-20%; left:-10%; }
  #backImage .birds{ right:0; bottom:5%; width:50%; }
    #backImage .birds img{ display:block; width:100%; max-width:unset;
      animation:leftright 4800ms infinite ease-in-out;
    }
  #backImage .mail-back{  }
    #backImage .mail-back img{ position:fixed; }
    #backImage .mail-back img.under{ bottom:0; left:50%; transform:translate(-50%, 100%); width:100%; }
    #backImage .mail-back img.cloud-left{ width:30%; top:55%; left:-20%; }
    #backImage .mail-back img.cloud-right{ width:25%; top:60%; right:-20%; }


#elements > div{ position:fixed; cursor:pointer; }
#elements > div:after{ content:''; position:absolute; display:block; z-index:20; pointer-events:none;
  /* display:none; */
  font-size:1.8vw;
  font-family:p22-toybox-blocks, 'p22-toybox-blocks', sans-serif;
  color:#fff;
  line-height:1;
  white-space:pre;
  text-align:center;
}
/* hover */
@media screen and (min-width:1024px){
  body:not([class*="On"]) #elements > div:hover:after{
    animation:tilt_name 1200ms infinite steps(1);
  }
}
  #elements > div > .closeBtn{ top:0; right:-8%; display:none; }
  #elements > div > .deco{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; }
    #elements > div > .deco img{ position:absolute; pointer-events:none; }
  /* #elements > div .effect{  }
  #elements > div .effect.multiply{ mix-blend-mode:multiply; -webkit-mix-blend-mode:multiply; }
  #elements > div .effect.soft-light{ mix-blend-mode:soft-light; -webkit-mix-blend-mode:soft-light; } */

/* specific */
/* keyring */
#keyring{ top:-10%; left:50%; width:16%; transform:translateX(-50%); transform-origin:top center;
  animation:keyring 4800ms infinite ease-in-out;
}
  #keyring img{ position:relative; display:block; width:100%; pointer-events:none; }
  #keyring img.keyring{ display:block;
    filter:drop-shadow(20px 12px 7px rgba(107,128,210,0.55));
    -webkit-filter:drop-shadow(20px 12px 7px rgba(107,128,210,0.55));
  }
  #keyring img.keyring.open{ display:none; }
  #keyring img.keyring.close{  }
  @media screen and (min-width:1024px){
    #keyring:hover img.keyring.open{ display:block; }
    #keyring:hover img.keyring.close{ display:none; }
  }
  #keyring img.shadow{ position:absolute; z-index:-1; top:5%; left:5%; opacity:0.3; display:none; }
/* on */
body.keyringOn{
  --keyringTrans:1500ms;
}
body.keyringOn:after{ opacity:0 !important; }
  body.keyringOn #keyring{ animation:keyringUp var(--keyringTrans) forwards ease-in-out; }
  body.keyringOn #diary{ animation:diaryUp var(--keyringTrans) forwards ease-in-out; }
  body.keyringOn #mail{ animation:mailUp var(--keyringTrans) forwards ease-in-out; }
  body.keyringOn #camera{ animation:cameraUp var(--keyringTrans) forwards ease-in-out; }
  body.keyringOn #backImage .logoArea{ animation:logoUp var(--keyringTrans) forwards ease-in-out; }
  body.keyringOn #footer{ animation:footerUp var(--keyringTrans) forwards ease-in-out; }
  body.keyringOn:before{ opacity:1; transition-delay:calc(var(--keyringTrans)*0.3); transition-duration:var(--keyringTrans); }
  @keyframes keyringUp {
    0%{ top:-10%; }
    30%{ top:-7%; }
    100%{ top:-41%; }
  }
  @keyframes diaryUp {
    0%{ bottom:15%%; }
    30%{ bottom:22%; }
    100%{ bottom:-57%; }
  }
  @keyframes mailUp {
    0%{ top:7%; }
    30%{ top:16%; }
    100%{ top:-43%; }
  }
  @keyframes cameraUp {
    0%{ bottom:28%; transform:translate(-50%,50%) rotate(15deg); }
    30%{ bottom:42%; 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%); }
  }


/* note */
#note{ top:105%; left:50%; width:75%; transform:translateX(-50%); }
  #note > img{ width:100%; }
  #note > .deco{  }
    #note > .deco img{ opacity:0; width:100%; }
  #note > ul.diary-btn{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%;
    opacity:0;
  }
    #note > ul.diary-btn > li{ position:absolute; cursor:pointer; width:11%; padding-top:16%; }
      #note > ul.diary-btn > li .button{ position:absolute; width:40%; padding-top:32%; }
        #note > ul.diary-btn > li .button img{  }
      #note > ul.diary-btn > li img{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; opacity:0; pointer-events:none; }
      #note > ul.diary-btn > li img.stroke{ opacity:1; z-index:2; }
      #note > ul.diary-btn > li img.fill{ opacity:0; z-index:1; }
    /* hover */
    @media screen and (min-width:1024px){
      #note > ul.diary-btn > li:hover img.fill{ opacity:1; }
    }
  #note > .member-room{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; pointer-events:none; z-index:10; }
    #note > .member-room > img{ position:absolute; opacity:0; transition:1500ms; width:100%; }
  /* specific */
  #chaeiBtn{ left:52%; top:17%; }
    #chaeiBtn .button{ top:20%; left:163%; }
  #ayneBtn{ left:78%; top:16%; }
    #ayneBtn .button{ top:84%; left:17%; }
  #jihyunBtn{ left:67%; top:37%; }
    #jihyunBtn .button{ top:36%; left:-54%; }
  #liriBtn{ left:55%; top:60%; }
    #liriBtn .button{ top:31%; left:128%; }
  #liuyinBtn{ left:78%; top:60%; }
    #liuyinBtn .button{ top:103%; left:-73%; }
  /* member on */
  /* #note[data-member="chaei"]{  }
    #note[data-member="chaei"] > .member-room > img.chaei,
    #note[data-member="ayne"] > .member-room > img.ayne,
    #note[data-member="jihyun"] > .member-room > img.jihyun,
    #note[data-member="liri"] > .member-room > img.liri,
    #note[data-member="liuyin"] > .member-room > img.liuyin{ opacity:1; pointer-events:all; } */

/* diary */
#diary{ left:9%; bottom:15%; width:22%; transform:rotate(-14deg);
  animation:diary 5200ms infinite ease-in-out;
}
#diary:after{ content:'open\Ahow\Astory' !important; left:-10%; top:-9%; transform:rotate(14deg); }
  #diary img{  }
  #diary img.cloud{ position:absolute; transform:translate(-50%, 50%) rotate(4deg); left:0; bottom:-20%; width:230%; max-width:unset;
    animation:diary_cloud 4800ms infinite ease-in-out;
  }
  #diary img.diary{ display:block;
    filter:drop-shadow(-32px -10px 16px rgba(107,128,210,0.8));
    -webkit-filter:drop-shadow(-32px -10px 16px rgba(107,128,210,0.8));
  }
  #diary img.diary.lock{  }
  #diary img.diary.unlock{ display:none; }
  @media screen and (min-width:1024px){
    #diary:hover img.diary.lock{ display:none; }
    #diary:hover img.diary.unlock{ display:block; }
  }
  #diary img.deco1{ left:9%; bottom:53%; width:14%; transform:rotate(-30deg); }
  #diary img.deco2{ top:5%; right:16%; width:24%; transform:rotate(25deg); }
  #diary img.key{ right:20%; bottom:12%; width:19%; transform:rotate(15deg);
    animation:diary_key 5200ms infinite ease-in-out;
  }
  #diary img.ribbon{ left:17%; bottom:11%; width:21%; transform:rotate(2deg);
    animation:diary_ribbon 4200ms infinite ease-in-out;
  }
  #diary .diary_text{ position:absolute; top:40%; left:40%; transform:translate(-50%,-50%);
    font-family:'plunct', plunct, sans-serif;
    font-size:5.5vw;
    text-align:center;
    line-height:0.8;
  }
  /* bubble */
  #diary .effect-bubble{ position:absolute; width:100%; height:100%; z-index:-1; }
  #diary img.bubble1{ left:-35%; width:20%; top:33%; }
  #diary img.bubble2{ left:-24%; top:47%; width:50%; }
  #diary img.bubble3{ left:93%; width:10%; top:107%; }
  #diary img.bubble4{ left:105%; top:76%; width:23%; }
/* on */
body.diaryOn{  }
  body.diaryOn #note{ top:50%; left:50%; transform:translate(-50%,-50%) rotate(-2.7deg); z-index:105; cursor:default; }
    body.diaryOn #note > .deco img,
    body.diaryOn #note > ul.diary-btn{ opacity:1; transition:1500ms; transition-delay:300ms; }
  body.diaryOn :is(#keyring,#diary,#camera,#mail){ pointer-events:none; }
  body.diaryOn #keyring{ top:-25%; }
  body.diaryOn #diary{ left:-10%; bottom:-7%; }
  body.diaryOn #mail{ top:-5%; right:0%; }
  body.diaryOn #camera{ bottom:0%; left:105%; }

#room{ top:0; left:0; right:0; bottom:0; width:100%; height:100%; opacity:0; pointer-events:none;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
#room:after{ content:''; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; opacity:0; pointer-events:none;
  background-color:rgba(0,0,0,0.8);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
  #room > .closeBtn{ top:3% !important; right:3% !important; }
  #room > .elements{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:100vw;
    height:56.25vw;
    min-height:100vh;
    min-width:177.78vh;
  }
  /* @media (min-aspect-ratio: 16/9) {
    #room > .elements{ height:100vh; width: }
  }
  @media (max-aspect-ratio: 16/9) {
    #room > .elements{  }
  } */
    #room > .elements > span{ position:absolute; cursor:pointer; }
      #room > .elements > span img{ display:block; width:100%; max-width:unset; pointer-events:none; }
    @media screen and (min-width:1024px){
      #room > .elements > span:hover{  }
        #room > .elements > span:hover img{ animation:elemHover infinite 800ms steps(1); }
    }
    @keyframes elemHover{
      0%{ transform:rotate(3deg); }
      50%{ transform:rotate(0deg); }
      100%{ transform:rotate(3deg); }
    }
  #room > .pages{  }
    #room > .pages > div{ position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); pointer-events:none; opacity:0; }
    #room > .pages > div::-webkit-scrollbar{ display:none; }
    #room > .pages .intro{ max-width:600px; color:#fff; overflow:unset; }
      #room > .pages .intro img.profile{ position:absolute; top:12%; left:50%; transform:translate(-50%,-100%); width:10%; }
      #room > .pages .intro p{ display:block; position:absolute; top:50%; left:50%; width:80%; transform:translate(-50%,-50%);
        /* font-family:education,'education',sans-serif; */
        font-family:kkubulim,'kkubulim',sans-serif;
        font-size:1.3rem;
        text-align:center;
      }
      #room > .pages .intro .closeBtn{ position:absolute; bottom:-10%; left:50%; transform:translateX(-50%);
        font-family:kkubulim,'kkubulim',sans-serif;
        font-size:1.3rem;
        text-align:center;
      }
        #room > .pages .intro .closeBtn img{ display:inline-block; width:20px; vertical-align:middle; margin-right:8px; }
    #room > .pages > .phone{ max-width:360px; overflow:unset; }
    #room > .pages > .phone:after{ content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:150%; padding-top:150%;
      filter:blur(100px);
      -webkit-filter:blur(100px);
      border-radius:50%;
      z-index:-1;
    }
      #room > .pages > .phone > .closeBtn{ left:110%; }
      #room > .pages > .phone img:not(.phone){ position:absolute; }
      #room > .pages > .phone img.phone{  }
      #room > .pages > .phone img.acc{ width:30%; top:-5%; right:6%; animation:phoneAcc 1200ms infinite steps(1); animation-delay:-800ms; }
      #room > .pages > .phone img.text{ width:50%; right:100%; top:50%; animation:phoneText 1600ms infinite steps(1); }
      @keyframes phoneText{
        0%{ transform:rotate(0); }
        50%{ transform:rotate(-4deg); }
        100%{ transform:rotate(0); }
      }
      @keyframes phoneAcc{
        0%{ transform:rotate(0); }
        50%{ transform:rotate(2deg); }
        100%{ transform:rotate(0); }
      }
    #room > .pages > .diary{ max-width:80%; overflow:unset; }
      #room > .pages > .diary > .closeBtn{ left:105%; }
      #room > .pages > .diary img{ width:100%; max-width:unset; display:block; }
      #room > .pages > .diary img:not(.diary){ position:absolute; left:0; top:0; }
      #room > .pages > .diary img.diary{  }
      #room > .pages > .diary img.deco{ animation:diaryDeco 3800ms infinite ease-in-out; }
      #room > .pages > .diary img.text{ animation:diaryText 8000ms infinite ease-in-out; }
      #room > .pages > .diary img.photo{ animation:diaryPhoto 4200ms infinite ease-in-out; }
      @keyframes diaryDeco {
        0%{ transform:rotate(0deg); }
        25%{ transform:rotate(1deg); }
        50%{ transform:rotate(0); }
        75%{ transform:rotate(-1deg); }
        100%{ transform:rotate(0deg); }
      }
      @keyframes diaryText {
        0%{ transform:translateX(0); }
        50%{ transform:translateX(2px); }
        100%{ transform:translateX(0); }
      }
      @keyframes diaryPhoto {
        0%{ margin-top:0;}
        50%{ margin-top:-6px; }
        100%{ margin-top:0; }
      }
    #room > .pages > .specific{
      max-width:80%; max-height:100%;
      overflow:hidden;
      overflow-y:scroll;
    }
    #room > .pages > .specific > .closeBtn{ top:3%; right:3%; }
      #room > .pages > .specific img{  }
      #room > .pages > .specific img:not(.specific){ position:absolute; }
      #room > .pages > .specific img.specific{ width:100%; }
  #room > .member-list{ position:absolute; top:50%; right:5%; transform:translateY(-50%);
    display:flex; align-items:end; gap:8px; flex-direction:column;
  }
    #room > .member-list > li{ position:relative; width:6vw; height:8vw; cursor:pointer; }
      #room > .member-list > li img{ position:absolute; display:block; bottom:0; left:50%; width:162%; max-width:unset; transform:translateX(-50%); pointer-events:none;
        transform-origin:left center;
      }
    @media screen and (min-width:1024px){
      #room > .member-list > li:hover{  }
        #room > .member-list > li:hover img{ animation:memberHover infinite 800ms steps(1); }
    }
    @keyframes memberHover{
      0%{ transform:rotate(3deg) translateX(-50%); }
      50%{ transform:rotate(0deg) translateX(-50%); }
      100%{ transform:rotate(3deg) translateX(-50%); }
    }
/* room on */
body.roomOn,
body.roomOn::after{ pointer-events:none !important; }
  body.roomOn #note{ transform:translate(-50%,-50%) rotate(0) scale(1.6); transition:1500ms; transition-delay:1500ms; }
  /* member on */
  body.roomOn[data-member="chaei"] #note > .member-room > img.chaei,
  body.roomOn[data-member="ayne"] #note > .member-room > img.ayne,
  body.roomOn[data-member="jihyun"] #note > .member-room > img.jihyun,
  body.roomOn[data-member="liri"] #note > .member-room > img.liri,
  body.roomOn[data-member="liuyin"] #note > .member-room > img.liuyin{ opacity:1; pointer-events:all; }

  body.roomOn[data-member="chaei"] #room > .member-list > li.chaei,
  body.roomOn[data-member="ayne"] #room > .member-list > li.ayne,
  body.roomOn[data-member="jihyun"] #room > .member-list > li.jihyun,
  body.roomOn[data-member="liri"] #room > .member-list > li.liri,
  body.roomOn[data-member="liuyin"] #room > .member-list > li.liuyin{ display:none; }

  body.roomOn[data-member="chaei"] #room{ 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:40%; top:80%; width:9%; }
    body.roomOn[data-member="chaei"] #room > .elements > span.diary{ left:22%; top:78%; width:13%; }
    body.roomOn[data-member="chaei"] #room > .elements > span.specific{ width:13%; left:31%; top:33%; }
    body.roomOn[data-member="chaei"] #room > .pages > .phone:after{ background-color:#ff9b64; }

  body.roomOn[data-member="ayne"] #room{ 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:30%; top:86%; width:11%; }
    body.roomOn[data-member="ayne"] #room > .elements > span.diary{ left:16%; top:83%; width:13%; }
    body.roomOn[data-member="ayne"] #room > .elements > span.specific{ width:14%; left:40%; top:33%; }
    body.roomOn[data-member="ayne"] #room > .pages > .phone:after{ background-color:#73f5ff; }
    body.roomOn[data-member="ayne"] #room > .pages > .specific{ max-width:50%; }
      body.roomOn[data-member="ayne"] #room > .pages > .specific > .closeBtn{ opacity:0; }
      body.roomOn[data-member="ayne"] #room > .pages > .specific img.text{  }
      body.roomOn[data-member="ayne"] #room > .pages > .specific .gameWrap{ position:absolute; left:50%; top:48.5%; transform:translate(-50%,-50%); width:90%; }
        body.roomOn[data-member="ayne"] #room > .pages > .specific .gameWrap .game{ position:relative; padding-top:75%; }
          body.roomOn[data-member="ayne"] #room > .pages > .specific .gameWrap .game iframe{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; border:none; }

  body.roomOn[data-member="jihyun"] #room{ 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 > .phone:after{ background-color:#bdff9f; }
    body.roomOn[data-member="jihyun"] #room > .pages > .specific{ max-width:60%; }

  body.roomOn[data-member="liri"] #room{ 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:56%; top:57%; width:7%; }
    body.roomOn[data-member="liri"] #room > .elements > span.diary{ left:37%; top:54%; width:13%; }
    body.roomOn[data-member="liri"] #room > .elements > span.specific{ width:7%; left:76%; top:23%; }
    body.roomOn[data-member="liri"] #room > .pages > .phone{  }
    body.roomOn[data-member="liri"] #room > .pages > .phone:after{ background-color:#d48fe5; }
      body.roomOn[data-member="liri"] #room > .pages > .phone img.acc{ left:50%; right:unset; transform:translateX(-50%); width:50%; }
      body.roomOn[data-member="liri"] #room > .pages > .phone img.acc2{ left:50%; bottom:-3%; transform:translateX(-50%); width:40%; }
    body.roomOn[data-member="liri"] #room > .pages > .specific{ max-width:45%; }

  body.roomOn[data-member="liuyin"] #room{ 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:63%; top:84%; width:12%; }
    body.roomOn[data-member="liuyin"] #room > .elements > span.diary{ left:23%; top:77%; width:19%; }
    body.roomOn[data-member="liuyin"] #room > .elements > span.specific{ width:39%; left:19%; top:14%; }
    body.roomOn[data-member="liuyin"] #room > .pages > .phone:after{ background-color:#fd534d; }
    body.roomOn[data-member="liuyin"] #room > .pages > .specific{ max-width:70%; }
      body.roomOn[data-member="liuyin"] #room > .pages > .specific .videoWrap{ position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); width:76%; }
        body.roomOn[data-member="liuyin"] #room > .pages > .specific .videoWrap .video{ position:relative; padding-top:56.25%; }
          body.roomOn[data-member="liuyin"] #room > .pages > .specific .videoWrap .video iframe{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; border:none; }

  /* room */
  body.roomOn #room{ opacity:1; z-index:300; transition:0ms; pointer-events:all; cursor:default; }
  body.roomOn.withDelay #room{ transition:1500ms; transition-delay:2000ms; }
  /* on and on */
  body.roomOn #room[class*="On"]{  }
  body.roomOn #room[class*="On"]:after{ opacity:1; pointer-events:all; }
    body.roomOn #room[class*="On"] > .closeBtn{ display:none; }
  body.roomOn #room.introOn{  }
    body.roomOn #room.introOn > .pages .intro,
    body.roomOn #room.phoneOn > .pages .phone,
    body.roomOn #room.diaryOn > .pages .diary,
    body.roomOn #room.specificOn > .pages .specific{ z-index:100; opacity:1; pointer-events:all; }

/* mailing */
#mailing{ top:105%; left:50%; width:75%; height:100%; transform:translateX(-50%); pointer-events:none;
  overflow:hidden; overflow-y:scroll;
  text-align:center;
}
#mailing::-webkit-scrollbar{ display:none; }
  #mailing > .closeBtn{ position:fixed; top:2% !important; right:2% !important; }
  #mailing #messageForm{ position:relative; width:60%; padding-top:45%; display:block; margin:80px auto; text-align:center; font-size:0; pointer-events:all; }
    #mailing #messageForm > img{ position:absolute; display:block; }
    #mailing #messageForm > .postcard{ position:absolute; z-index:10; width:47%; top:14%; left:54%; transform:rotate(8deg); overflow:hidden; box-shadow:2px 2px 8px rgba(0, 0, 0, 0.3); }
      #mailing #messageForm > .postcard textarea#message{ position:absolute; bottom:5%; left:50%; transform:translateX(-50%); width:80%; height:52%; }
    #mailing #messageForm > img.envelope{ z-index:1; width:80%; top:0; left:50%; transform:rotate(-6.5deg) translateX(-50%); }
    #mailing #messageForm > img.photo{ z-index:5; top:22%; width:50%; }
  #mailing .messageArea{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; pointer-events:all; margin-bottom:20px; }
    #mailing .messageArea > div{ position:relative; border:1px solid #f78dd7; background-color:#fff; padding:28px 52px; }
      #mailing .messageArea > div p{
        font-family:chancery, 'chancery', Pretendard, 'Pretendard', sans-serif;
        font-size:1.3rem;
        text-align:left;
      }
  #mailing #loadMore{ pointer-events:all; margin-bottom:120px; }
/* mail */
#mail{ top:7%; right:10%; width:22%; transform:rotate(-8deg);
  animation:mail 5200ms infinite ease-in-out;
}
#mail:after{ content:'letter\Ato how' !important; left:35%; top:102%; transform:rotate(8deg); }
  #mail img{  }
  #mail img.mail{
    filter:drop-shadow(36px -6px 16px rgba(107,128,210,0.8));
    -webkit-filter:drop-shadow(36px -6px 16px rgba(107,128,210,0.8));
  }
  #mail img.cloud{ position:absolute; transform:translate(50%, 50%) rotate(8deg); right:0; bottom:6%; width:120%; max-width:unset;
    animation:mail_cloud 4800ms infinite ease-in-out;
  }
/* on */
body.mailOn{  }
body.mailOn:after{ opacity:0 !important; }
  body.mailOn #mailing{ top:50%; left:50%; transform:translate(-50%,-50%); z-index:105; cursor:default; }
  body.mailOn :is(#keyring,#diary,#camera,#mail){ pointer-events:none; }
  body.mailOn #keyring{ top:-57%; }
  body.mailOn #diary{ left:-30%; bottom:-27%; }
  body.mailOn #mail{ top:-25%; right:-30%; }
  body.mailOn #camera{ bottom:-10%; left:120%; }
  body.mailOn #backImage .logoArea{ opacity:0; }
    body.mailOn #backImage .mail-back img.under{ transform:translate(-50%, 33%); }
    body.mailOn #backImage .mail-back img.cloud-left{ left:3%; }
    body.mailOn #backImage .mail-back img.cloud-right{ right:-8%; }

#camera{ bottom:28%; left:79%; width:28%; transform:rotate(15deg);
  animation:camera 6200ms infinite ease-in-out;
}
#camera:after{ content:'watch\Ahow film' !important; left:45%; top:93%; transform:rotate(-15deg); }
  #camera img{  }
  #camera img.camera{
    filter:drop-shadow(45px 15px 16px rgba(107,128,210,0.8));
    -webkit-filter:drop-shadow(45px 15px 16px rgba(107,128,210,0.8));
  }
  #camera img.butterfly{ right:7%; bottom:23%; width:15%; transform:rotate(-16deg); }
  #camera img.star{ top:8%; right:28%; width:13%; transform:rotate(-15deg); }
  #camera .videoWrap{ position:absolute; top:56%; left:40%; transform:translate(-50%, -50%); width:64%; pointer-events:none; }
    #camera .videoWrap .video{ position:relative; padding-top:56.25%; }
      #camera .videoWrap .video iframe{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%;
        opacity:0;
      }
      #camera .videoWrap .video iframe.vimeo{ opacity:1; }
      #camera .videoWrap .video iframe.youtube{ opacity:0; }
/* on */
body.cameraOn{  }
  body.cameraOn #camera{ bottom:50%; left:50%; transform:translate(-50%,50%) rotate(0deg) !important; width:60vw; z-index:105; }
    body.cameraOn #camera div.video{  }
      body.cameraOn #camera .videoWrap .video iframe.vimeo{ opacity:0; }
      body.cameraOn #camera .videoWrap .video iframe.youtube{ opacity:1; pointer-events:all; }
    body.cameraOn #camera img{  }
    body.cameraOn #camera a.share_btn{ display:block; }
  body.cameraOn :is(#keyring,#diary,#mail,#note){ pointer-events:none; }
  body.cameraOn #keyring{ top:-25%; }
  body.cameraOn #diary{ bottom:-10%; }
  body.cameraOn #mail{ top:-5%; right:0%; }

/* body */
body{  }
body:before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; pointer-events:none;
  z-index:205; background-color:#000; opacity:0;
}
body:after{ content:''; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; opacity:0; pointer-events:none;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
body[class*="On"]:after{ opacity:1; pointer-events:all; }
body[class*="On"] #elements > div:after{ opacity:0; }
  body[class*="On"] #elements > div > .closeBtn{ display:block; }

body.loading,
body.loading:after,
body.loading *{ pointer-events:none !important; }

/* effect */
.effect{  }
.effect.multiply{ mix-blend-mode:multiply; -webkit-mix-blend-mode:multiply; }
.effect.soft-light{ mix-blend-mode:soft-light; -webkit-mix-blend-mode:soft-light; }
.effect.darken{ mix-blend-mode:darken; -webkit-mix-blend-mode:darken; }

/* keyframe */
@keyframes keyring{
  0%{ transform:translateX(-50%) rotate(0deg); }
  33%{ transform:translateX(-50%) rotate(-1deg); }
  66%{ transform:translateX(-50%) rotate(1deg); }
  100%{ transform:translateX(-50%) rotate(0deg); }
}
@keyframes updown {
  0%{ margin-top:0; }
  50%{ margin-top:-6px; }
  100%{ margin-top:0; }
}
@keyframes leftright {
  0%{ margin-left:0; }
  50%{ margin-left:-6px; }
  100%{ margin-left:0; }
}
@keyframes diary {
  0%{ margin-top:0; transform:rotate(-14deg); }
  50%{ margin-top:-6px; transform:rotate(-13deg); }
  100%{ margin-top:0; transform:rotate(-14deg); }
}
@keyframes diary_key {
  0%{ margin-top:0; transform:rotate(15deg); }
  50%{ margin-top:-6px; transform:rotate(12deg); }
  100%{ margin-top:0; transform:rotate(15deg); }
}
@keyframes diary_ribbon {
  0%{ transform:rotate(2deg); }
  50%{ transform:rotate(0deg); }
  100%{ transform:rotate(2deg); }
}
@keyframes diary_cloud {
  0%{ transform:translate(-50%,50%) rotate(4deg); margin-top:0; }
  50%{ transform:translate(-50%,50%) rotate(2deg); margin-top:-4px; }
  100%{ transform:translate(-50%,50%) rotate(4deg); margin-top:0; }
}
@keyframes mail {
  0%{ margin-top:0; transform:rotate(-8deg); }
  50%{ margin-top:-6px; transform:rotate(-10deg); }
  100%{ margin-top:0; transform:rotate(-8deg); }
}
@keyframes mail_cloud {
  0%{ transform:translate(50%,50%) rotate(8deg); margin-top:0; }
  50%{ transform:translate(50%,50%) rotate(10deg); margin-top:4px; }
  100%{ transform:translate(50%,50%) rotate(8deg); margin-top:0; }
}
@keyframes camera {
  0%{ margin-top:0; transform:translate(-50%,50%) rotate(15deg); }
  50%{ margin-top:-4px; transform:translate(-50%,50%) rotate(14deg); }
  100%{ margin-top:0; transform:translate(-50%,50%) rotate(15deg); }
}