/* ===== 기존 화면: 값 유지 ===== */



@font-face {
  font-family: '휴먼매직체';
  src: url('./fonts/HMKMMAG.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DOSPilgi';
  src: url('./fonts/DOSPilgi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}



html,body{width:100%;height:100%;margin:0}



body{display:grid;place-items:center;background:#25202b;font-family:Arial,'Malgun Gothic',sans-serif}



.stage{position:relative;width:min(100vw,calc(100vh * 720 / 528));aspect-ratio:720 / 528;overflow:hidden;container-type:inline-size;background:#b19adf url('assets/background.svg') center / 100% 100% no-repeat}



.screen{position:absolute;inset:0}.hidden{display:none!important}



.logo{position:absolute;z-index:10;top:.5%;left:1.2%;width:18%}



.loading-message{position:absolute;top:41.2%;width:100%;color:white;font-family:'휴먼매직체','Malgun Gothic',sans-serif;font-size:4.5cqw;text-align:center;transform:rotate(-1deg);text-shadow:1px 2px #a68ccc}



.loading-label{position:absolute;top:54.5%;width:100%;color:white;font-family:'휴먼매직체',sans-serif;font-size:3.2cqw;text-align:center;letter-spacing:-.06em}



.bar{position:absolute;top:64.2%;left:32.1%;width:36.3%;height:4.3%;overflow:hidden;border:2px solid #b3dfdc;border-radius:4px;background:#d2fff0;box-shadow:0 0 0 1px #d2add5}



.fill{width:0;height:100%;background:#f8d65c}.pct{position:absolute;inset:0;display:grid;place-items:center;color:#5b471d;font:.9cqw Arial,sans-serif}



.intro-screen{isolation:isolate;overflow:hidden}



.intro-content{position:absolute;inset:0;z-index:1;transform:translateX(0);opacity:1;transition:transform .55s ease-in-out,opacity .55s ease-in-out}



.intro-content.slide-out{transform:translateX(-100%);opacity:0}



.intro-content.slide-ready{transform:translateX(100%);opacity:0}



.intro-content.slide-in{transform:translateX(0);opacity:1}



.intro-oval{position:absolute;z-index:1;top:26%;left:31%;width:38%;aspect-ratio:1 / 1;height:auto;border-radius:50%;background:rgba(255,250,255,.44)}



.intro-ddb{position:absolute;z-index:6;left:35%;bottom:27%;width:5%;height:auto;transform:rotate(-10deg);pointer-events:none}



.character{position:absolute;z-index:3;bottom:4%;object-fit:contain;object-position:bottom center;pointer-events:none}



.wonbin{position:absolute;z-index:3;left:0%;bottom:5%;width:34%;height:81%;object-fit:contain;object-position:bottom center;opacity:.5;transform:rotate(11deg);transform-origin:center bottom}



.character.wonbin2{position:absolute;z-index:3;left:auto;right:-10%;top:auto;bottom:-10%;width:53%;height:auto;max-height:none;object-fit:contain;object-position:bottom right;opacity:.9;-webkit-mask-image:linear-gradient(to bottom,black 0%,black 75%,transparent 100%);mask-image:linear-gradient(to bottom,black 0%,black 75%,transparent 100%);transform:none;pointer-events:none}



.intro-title{position:absolute;z-index:5;top:18%;left:28%;width:65%;margin:0;color:#fff9eb;font-family:'휴먼매직체','Malgun Gothic',sans-serif;font-size:5.5cqw;font-weight:900;white-space:nowrap;transform:rotate(-2deg);text-shadow:1px 2px #765778,2px 3px #765778}



.intro-title small{font-size:.42em;vertical-align:.15em}



.intro-text{position:absolute;z-index:4;top:51.9%;left:50%;width:33%;transform:translate(-50%,-50%);color:#201725;font-family:'DOSPilgi','휴먼매직체','Malgun Gothic',sans-serif;font-size:1.8cqw;font-weight:normal;line-height:1.45;letter-spacing:.13em;text-align:center;word-break:keep-all}



.intro-text p{margin:0 0 1.05em}



.next{position:absolute;z-index:11;top:7%;right:3.8%;padding:0;border:0;background:transparent;color:#fff;font-family:'휴먼매직체','Malgun Gothic',sans-serif;font-size:3.5cqw;font-weight:bold;text-shadow:1px 2px #866aa8;cursor:pointer}



.next:hover{color:#fff}.next span{display:inline-block;margin-left:.08em;color:#fff;animation:nextBlink .3s steps(1,end) infinite}



@keyframes nextBlink{0%,49%{opacity:1}50%,100%{opacity:0}}



.character.sohee-left{position:absolute;z-index:3;left:10%;bottom:5%;width:auto;height:80%;object-fit:contain;object-position:bottom center;opacity:.5;transform:none;pointer-events:none}



.character.sohee-right{position:absolute;z-index:3;left:auto;right:-10%;top:auto;bottom:-10%;width:45%;height:auto;max-height:none;object-fit:contain;object-position:bottom right;opacity:1;-webkit-mask-image:linear-gradient(to bottom,black 0%,black 75%,transparent 100%);mask-image:linear-gradient(to bottom,black 0%,black 75%,transparent 100%);transform:none;pointer-events:none}



.sohee-screen .intro-title{top:18%;left:28%;font-size:5.5cqw}



.sohee-screen .intro-text{top:51.9%;left:50%;width:35%;font-size:1.9cqw;line-height:1.45;letter-spacing:.06em}.sohee-screen .intro-text p{margin:0 0 .65em}



.diary-screen{isolation:isolate;overflow:hidden}



.diary-content{position:absolute;inset:0;z-index:1;opacity:1;transform:translateX(0);transition:transform .55s ease-in-out,opacity .55s ease-in-out}



.diary-content.slide-ready{transform:translateX(100%);opacity:0}.diary-content.slide-in{transform:translateX(0);opacity:1}



.diary-oval{position:absolute;z-index:1;top:21%;left:15%;width:70%;height:67%;border-radius:50%;background:rgba(255,255,255,.96)}



.diary-group{position:absolute;z-index:3;left:50%;bottom:20%;width:30%;height:auto;max-width:none;object-fit:contain;object-position:bottom center;opacity:1;transform:translateX(-50%);pointer-events:none}



.diary-delayed{position:absolute;inset:0;z-index:8;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility .5s ease}



.diary-delayed.is-visible{opacity:1;visibility:visible;pointer-events:auto}



.diary-heading{position:absolute;z-index:8;top:8%;left:48%;width:49%;text-align:left}



.diary-heading h1{margin:0;color:#fff9eb;font-family:'휴먼매직체','Malgun Gothic',sans-serif;font-size:3.1cqw;font-weight:900;white-space:nowrap;text-shadow:1px 2px #765778,2px 3px #765778}



.diary-heading p{margin:.2em 0 0;color:#fff;font-family:Arial,sans-serif;font-size:1.8cqw;letter-spacing:-.03em}



.diary-main-logo{position:absolute;z-index:9;left:50%;bottom:18%;width:23%;height:auto;transform:translateX(-50%);pointer-events:none}



.diary-start{position:absolute;z-index:11;top:12%;right:8%;display:flex;align-items:center;gap:.1em;padding:0;border:0;background:transparent;color:#fff;font-family:'휴먼매직체','Malgun Gothic',sans-serif;font-size:2.8cqw;font-weight:bold;text-shadow:1px 2px #866aa8;cursor:pointer}



.diary-start span{display:inline-block;margin-left:0;color:#fff;animation:nextBlink .3s steps(1,end) infinite}.diary-start:hover{color:#fff}.diary-start:disabled{cursor:default}



.replay{position:fixed;right:12px;bottom:12px;z-index:20;padding:8px 12px;border:0;border-radius:6px;background:#fff;cursor:pointer}



/* ==========================================================



   EP.01 본편 — 중복 제거한 최종 스타일



   필요한 이미지: assets/wb-r.jpg, game-frame.svg,



                dialogue-bubble.svg, logo.svg



   ========================================================== */



.game-screen {



  position: absolute;



  inset: 0;



  isolation: isolate;



  overflow: hidden;



  background: #f9d8ec;



}



/* 본편 장면 배경 */



.game-background {



  position: absolute;



  inset: 0;



  z-index: 0;



  background: #f9d8ec url('assets/wb-r.jpg') center / cover no-repeat;



  transition: opacity .25s;



}



/* 소희와 만나는 장면 배경 */



.game-background.meeting {



  background: url('assets/bg-2.jpg') center / cover no-repeat;



}



.game-background.cafe {



  background: url('assets/bg-c.jpg') center / cover no-repeat;



}



.game-background.walking {



  background: url('assets/bg-n.jpg') center / cover no-repeat;



}



/* 투명 프레임은 배경과 별도 레이어 */



.game-screen::after {



  content: '';



  position: absolute;



  inset: 0;



  z-index: 20;



  pointer-events: none;



  background: url('assets/game-frame.svg') center / 100% 100% no-repeat;



}



/* 프레임보다 반드시 위에 오는 로고 */



.game-screen .game-logo,



.game-screen > .logo {



  position: absolute;



  z-index: 50;



  top: 1%;



  left: 1.4%;



  width: 18%;



  height: auto;



  filter: drop-shadow(1px 2px 2px #8a457d);



}



.game-scene-label {



  position: absolute;



  z-index: 40;



  top: 3%;



  right: 3%;



  padding: .55cqw 1.3cqw;



  border: 2px solid #e59ac8;



  border-radius: 2cqw;



  background: rgba(255,255,255,.9);



  color: #a04c81;



  font-family: '휴먼매직체', sans-serif;



  font-size: 1.7cqw;



}



/* 캐릭터 이미지: 사진이 없을 때는 빈 영역 */



.game-character {



  position: absolute;



  z-index: 3;



  bottom: 5%;



  width: 28%;



  height: 65%;



  display: flex;



  align-items: center;



  justify-content: center;



  border: 0;



  border-radius: 0;



  background: transparent;



  transition: transform .25s;



}



.game-wonbin {



  left: 10%;



  width: 45%;



  height: 78%;



}



.game-sohee { right: 9%; }



.game-character img {



  position: relative;



  z-index: 2;



  width: 100%;



  height: 100%;



  object-fit: contain;



  object-position: bottom;



}



.game-character img[hidden] { display: none !important; }



.character-placeholder { display: none !important; }



.blush, .game-wonbin.is-blushing .blush { display: none !important; }



/* 나레이션 */



.narration-box {



  position: absolute;



  z-index: 40;



  bottom: 5%;



  left: 8%;



  width: 84%;



  min-height: 23%;



  display: grid;



  place-items: center;



  padding: 2% 6%;



  border: .55cqw solid #b9b9b9;



  border-radius: 1.3cqw;



  background: rgba(255, 255, 255, 0.65);



  backdrop-filter: blur(3px);



  -webkit-backdrop-filter: blur(3px);



    box-shadow: 0 3px 7px #2227;



  }



.narration-box p {



  margin: 0;



  color: #171717;



  font-family: 'DOSPilgi', 'Malgun Gothic', sans-serif;



  font-size: 2.05cqw;



  line-height: 1.5;



  text-align: center;



  white-space: pre-line;



}



.narration-next {



  right: 2%;



  bottom: 9%;



  font-size: 1.55cqw;



  line-height: 1;



}



/* 선택지 */



.choice-title {



  margin: 0 0 3%;



  color: #9d3c84;



  font-family: '휴먼매직체', sans-serif;



  font-size: 3.1cqw;



  text-align: center;



}



.choice-button {



  display: block;



  width: 100%;



  margin: 2% 0;



  padding: 2.2%;



  border: .35cqw solid #e69bc8;



  border-radius: 1.5cqw;



  background: white;



  color: #3b2440;



  font-family: 'DOSPilgi', 'Malgun Gothic', sans-serif;



  font-size: 2.2cqw;



  text-align: left;



  cursor: pointer;



}



.choice-button:hover,



.choice-button:focus-visible {



  background: #ffe0f2;



  outline-color: #c34492;



}



/* 엔딩 / 다음 화 예고 */



.end-panel,



.preview-panel {



  position: absolute;



  z-index: 40;



  inset: 10%;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  gap: 3%;



  border: .8cqw solid #e67db8;



  border-radius: 4cqw;



  background: rgba(255,245,252,.97);



  color: #a13782;



  font-family: '휴먼매직체', 'Malgun Gothic', sans-serif;



  text-align: center;



}



.end-panel h2,



.preview-panel h2 { margin: 0; font-size: 4.3cqw; }



.end-panel p,



.preview-panel p { margin: 0; font-size: 2.7cqw; }



.end-heart { font-size: 10cqw; animation: heartBeat .7s infinite alternate; }



@keyframes heartBeat { to { transform: scale(1.16); } }



.end-panel button,



.preview-panel button {



  padding: 1.5% 4%;



  border: 0;



  border-radius: 2cqw;



  background: #d65ba3;



  color: #fff;



  font-family: inherit;



  font-size: 2.7cqw;



  cursor: pointer;



}



@media (max-width: 520px) {



  .replay { right: 5px; bottom: 5px; padding: 5px 7px; font-size: 11px; }



}



/* ===== EP01 사진으로 고르는 옷 선택창 ===== */



.game-screen .choice-panel {



  position:absolute; z-index:40; left:21%; top:17%; width:58%;



  padding:2.5% 3.2% 3.2%; border:.55cqw solid #d85ca7;



  border-radius:4cqw; background:rgba(255,245,252,.58);



  box-shadow:0 .9cqw 0 #a75b91, inset 0 0 0 .5cqw #ffe1f2;



}



.outfit-heading {display:flex;justify-content:center;align-items:center;gap:1.3cqw}



.game-screen .choice-title {margin:0;text-align:center;font-family:'휴먼매직체','Malgun Gothic',sans-serif;font-size:2.8cqw;color:#ac438b;text-shadow:1px 1px #fff}



.outfit-deco {font-size:2.1cqw;color:#ed8abd}



.outfit-subtitle {margin:1% 0 3.5%;text-align:center;font-family:'DOSPilgi','Malgun Gothic',sans-serif;font-size:1.6cqw;color:#9b6a8c}



.outfit-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3.5%}



.game-screen .outfit-card {display:flex;flex-direction:column;align-items:center;gap:1.2cqw;min-width:0;width:100%;margin:0;padding:1.3cqw 1.3cqw 1.5cqw;border:.35cqw solid #e7a0c8;border-radius:2.2cqw;background:#fff;box-shadow:0 .4cqw 0 #f5c8e1;color:#873c70;text-align:center;cursor:pointer;transition:transform .12s,background .12s,border-color .12s}



.game-screen .outfit-card:hover,.game-screen .outfit-card:focus-visible {transform:translateY(-.5cqw);background:#fff0f8;border-color:#d45a9e;outline:none}



.outfit-photo {position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1.18/1;border:.25cqw dashed #e7accd;border-radius:1.4cqw;background:repeating-linear-gradient(45deg,#fff8fc 0,#fff8fc 1.5cqw,#ffeff8 1.5cqw,#ffeff8 3cqw);overflow:hidden}



.outfit-photo img {display:block;position:relative;z-index:2;width:100%;height:100%;object-fit:contain}



.outfit-photo img[hidden] {display:none}



.outfit-placeholder {display:none;color:#c08aaa;font-family:'DOSPilgi','Malgun Gothic',sans-serif;font-size:2.2cqw;line-height:1.5;text-align:center}



.outfit-photo.no-photo .outfit-placeholder {display:block}



.outfit-name {font-family:'휴먼매직체','Malgun Gothic',sans-serif;font-size:2.25cqw;font-weight:bold;line-height:1.2}



.outfit-pick {display:block;width:85%;padding:.75cqw .5cqw;border-radius:3cqw;background:#f5c2df;color:#8e3c77;font-family:'DOSPilgi','Malgun Gothic',sans-serif;font-size:1.8cqw;font-weight:bold;line-height:1.2}



.game-screen .outfit-card:hover .outfit-pick {background:#e98bbf;color:#fff}



/* ===== EP01 말풍선: 원빈 왼쪽 / 소희 오른쪽 ===== */



.game-screen .dialogue-bubble {



  position: absolute;



  z-index: 40;



  top: 5%;



  left: 42%;



  width: 20%;



  height: 31%;



  min-height: 0;



  padding: 0;



  display: block;



  border: 0;



  border-radius: 0;



  background: transparent url('assets/dialogue-bubble-wonbin.svg') center / 100% 100% no-repeat;



  box-shadow: none;



  overflow: visible;



}



.game-screen .dialogue-bubble.speaker-sohee {



  left: auto;



  right: 17%;



  background-image: url('assets/dialogue-bubble-sohee.svg');



}



.game-screen .dialogue-bubble::before,



.game-screen .dialogue-bubble::after { content: none !important; display: none !important; }



.game-screen .dialogue-bubble .bubble-star { display: none !important; }



/* 말풍선 흰 원의 중심에 대사를 놓음 (꼬리 방향별 위치 보정) */



.game-screen .dialogue-bubble .dialogue-text {



  position: absolute;



  top: 25%;



  left: 14%;



  width: 74%;



  height: 48%;



  margin: 0;



  padding: 0;



  display: flex;



  align-items: center;



  justify-content: center;



  text-align: center;



  color: #171417;



  font-family: 'DOSPilgi','Malgun Gothic',sans-serif;



  font-size: 1.55cqw;



  font-weight: 600;



  line-height: 1.27;



  letter-spacing: 0;



  white-space: pre-line;



  word-break: keep-all;



  overflow-wrap: anywhere;



}



.game-screen .dialogue-bubble.speaker-sohee .dialogue-text {



  left: 12%;



}



.game-screen .dialogue-bubble.long-dialogue .dialogue-text { font-size: 1.22cqw; }



.game-screen .dialogue-bubble.very-long-dialogue .dialogue-text { font-size: 1cqw; line-height: 1.18; }



@keyframes triangleBlink { 0%,54% {opacity:1;} 55%,100% {opacity:0;} }



.dialogue-next, .narration-next {



  position: absolute;



  appearance: none;



  -webkit-appearance: none;



  padding: 0;



  margin: 0;



  border: 0;



  border-radius: 0;



  outline: none;



  background: transparent;



  box-shadow: none;



  color: #161616;



  font-family: Arial,sans-serif;



  cursor: pointer;



  animation: triangleBlink .65s steps(1,end) infinite;



}



.game-screen .dialogue-bubble .dialogue-next {



  z-index: 3;



  left: 50%;



  bottom: 10%;



  width: 14%;



  height: 13%;



  display: grid;



  place-items: center;



  font-size: 1.4cqw;



  line-height: 1;



  transform: translateX(-50%);



}



.game-screen .dialogue-bubble.speaker-sohee .dialogue-next { left: 48%; }



/* 원빈 말풍선 */



.game-screen .dialogue-bubble:not(.speaker-sohee) {



  width: 25%;



  height: 31%;



  margin-left: -5%;



}



/* 소희 말풍선 */



.game-screen .dialogue-bubble.speaker-sohee {



  width: 25%;



  height: 31%;



  left: auto;



  right: 23%;



  margin-left: 0;



}



/* 민소매 원빈 */



.game-wonbin.outfit-basic {



  left: 5%;



  width: 45%;



  height: 78%;



}



/* 체크셔츠 원빈 */



.game-wonbin.outfit-check {



  left: -5%;



  width: 60%;



  height: 98%;



}



/* 오른쪽 상단 장소 이름 숨기기 */



.game-scene-label {



  display: none !important;



}



/* 다른 옷 카드 사진 크기 및 위치 */



.outfit-card[data-choice="other"] .outfit-photo {



  position: relative;



  overflow: hidden;



}



.outfit-card[data-choice="other"] .outfit-photo img {
  position: absolute;
  width: 102%;
  height: auto;
  max-width: none;
  top: -3;
  left: 50%;
  transform: translateX(-50%);
}


/* 가죽자켓 원빈 - 본편 사진 크기 및 위치 */



.game-wonbin.outfit-other {



  left: 5%;



  width: 45%;



  height: 100%;



}



/* 소희 사진 크기 및 위치 */



.game-sohee {



  right: 0%;



  bottom: 5%;



  width: 38%;



  height: 75%;



}



/* 대사 화자 변경 시 숨김 상태를 확실히 적용 */



.game-screen .game-character.hidden { display: none !important; }



/* 소희 말풍선 글자 위치 */



.game-screen .dialogue-bubble.speaker-sohee .dialogue-text {



  transform: translateX(-6%);



}







/* 기존 치크 숨기기 */



.game-screen .game-wonbin .blush {



  display: none !important;



}







/* 양쪽 볼 치크 공통 */



.game-screen .game-wonbin.is-blushing::before,



.game-screen .game-wonbin.is-blushing::after {



  content: '';



  position: absolute;



  z-index: 4;



  pointer-events: none;







  width: 9%;



  height: 5%;



  border-radius: 50%;







  background: radial-gradient(



  ellipse,



  rgba(255, 125, 160, .42) 0%,



  rgba(255, 145, 175, .22) 45%,



  transparent 75%



);







  filter: blur(2px);



  animation: cheekAppear .25s ease-out both;



}







/* 체크셔츠 - 왼쪽 볼 */



.game-screen .game-wonbin.outfit-check.is-blushing::before {



  left: 30%;



  top: 45%;



}







/* 체크셔츠 - 오른쪽 볼 */



.game-screen .game-wonbin.outfit-check.is-blushing::after {



  left: 55%;



  top: 47%;



}







/* 레더 - 왼쪽 볼 */



.game-screen .game-wonbin.outfit-other.is-blushing::before {



  left: 34%;



  top: 49.8%;



}







/* 레더 - 오른쪽 볼 */



.game-screen .game-wonbin.outfit-other.is-blushing::after {



  left: 54.8%;



  top: 50%;



}







@keyframes cheekAppear {



  from {



    opacity: 0;



    transform: scale(.7);



  }



  to {



    opacity: 1;



    transform: scale(1);



  }



}



/* 체크셔츠 - 화면 왼쪽 볼 */



.game-screen .game-wonbin.outfit-check.is-blushing::before {



  left: 38% !important;



  top: 46.5%;



}







/* 체크셔츠 - 화면 오른쪽 볼 */



.game-screen .game-wonbin.outfit-check.is-blushing::after {



  left: 54% !important;



  top: 47%;



}
/* 놀란 원빈 사진: 기존 선택 의상 클래스와 독립 */
.game-wonbin.outfit-surprised { left: 3%; width: 58%; height: 90%; }

/* 원빈이 놀라는 사진만 아래로 이동 */
.game-screen .game-wonbin.outfit-surprised {
  transform: translateY(8%);
}

/* EP.02 예고 화면 반투명 배경 */
.game-screen .preview-panel {
  background: rgba(255, 245, 252, 0.82);
}

@media screen and (max-width: 768px) and (orientation: portrait) {
  body::after {
    content: "♡ 가로로 돌려주세요 ♡\A\A비니또리는 가로 화면에서 즐길 수 있어요!";
    white-space: pre-wrap;
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #b19adf;
    color: white;
    font-family: 'DOSPilgi', sans-serif;
    font-size: 16px;
    text-align: center;
    line-height: 1.8;
  }
}