@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Jua&display=swap');
:root{--green:#347b35;--cream:#fff8cf;--line:#6da443}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;min-height:100%;background:#fff19a;color:#29261e}
body{font-family:"NanumGothic","Apple SD Gothic Neo","Malgun Gothic",sans-serif;overflow-x:hidden}
button,a{font:inherit}button{cursor:pointer}
.image-screen{width:100%;min-height:100vh;background:#fff08a;display:flex;flex-direction:column;align-items:center}
.screen-frame{
  position:relative;
  width:min(100%,1024px);
  aspect-ratio:2/3;
  line-height:0;
  flex:0 0 auto;
}
.screen-image{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;border:0;background:transparent;padding:0;z-index:30;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hotspot:focus-visible{outline:4px dashed #246a2c;outline-offset:3px}

.start-hotspot{left:25.5%;top:60.1%;width:49%;height:8.1%}
/* Each question is now a complete, fixed image. No live text is painted over it. */
.question-hotspots{position:absolute;inset:0;z-index:25}
.answer-hit{left:8.1%;width:83.8%;height:6.65%}
.answer-0{top:42.5%}.answer-1{top:50.6%}.answer-2{top:58.7%}.answer-3{top:66.7%}.answer-4{top:74.8%}
.previous-hit{left:38.5%;top:82.5%;width:24%;height:6%}
.test-progress{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Result image hotspots match the buttons already present in the supplied artwork. */
.result-hotspots{position:absolute;inset:0;z-index:25}
.result-share{left:4.0%;top:70.7%;width:40.5%;height:5.8%}
.result-instagram{left:47.0%;top:70.3%;width:10.7%;height:5.8%}
.result-kakao{left:58.5%;top:70.3%;width:10.7%;height:5.8%}
.result-x{left:70.0%;top:70.3%;width:10.7%;height:5.8%}
.result-copy{left:81.3%;top:70.3%;width:11.2%;height:5.8%}
.result-melon{left:31.6%;top:92.8%;width:13.0%;height:4.6%}
.result-youtube{left:45.5%;top:92.8%;width:15.3%;height:4.6%}
.result-spotify{left:61.9%;top:92.8%;width:14.8%;height:4.6%}
.result-genie{left:77.4%;top:92.8%;width:13.1%;height:4.6%}
.result-actions{width:min(94%,1024px);display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:14px 12px 28px}
.pixel-btn{border:3px solid var(--green);background:#fff8cf;color:#2e7132;border-radius:14px;padding:12px 20px;font-weight:900;box-shadow:0 3px 0 #b3c65a;transition:.15s transform,.15s box-shadow}
.pixel-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 #9fb34d}
/* ABOUT PLEMOON */
.about-page{min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(circle at 10% 15%,rgba(255,255,255,.75) 0 5px,transparent 6px),radial-gradient(circle at 80% 12%,rgba(255,255,255,.65) 0 4px,transparent 5px),linear-gradient(#fff082 0%,#fff5ae 38%,#d9ec83 100%)}
.about-page:before{content:"";position:absolute;left:0;right:0;bottom:0;height:25%;background:repeating-linear-gradient(165deg,transparent 0 20px,rgba(70,130,55,.11) 21px 24px);pointer-events:none}
.about-header,.about-hero,.about-section,.album-detail-section,.about-footer{width:min(94%,1000px);margin-left:auto;margin-right:auto;position:relative;z-index:2}
.about-header{display:flex;justify-content:space-between;align-items:center;padding:24px 0 12px}
.logo-btn{background:none;border:0;color:#267331;font-size:34px;font-weight:1000;text-shadow:2px 2px 0 #fff;font-family:Arial Black,sans-serif}
.logo-btn sup,.footer-logo sup{font-size:.55em;color:#55a343}
.about-top-back{border:2px solid #4d8738;background:#fff8cf;border-radius:12px;padding:10px 18px;color:#2d6230;font-weight:900}
.pixel-card{background:rgba(255,250,216,.92);border:5px solid #6da443;border-radius:28px;box-shadow:0 8px 0 rgba(86,122,47,.25),inset 0 0 0 3px #f5db65}
.about-hero{padding:36px;margin-top:18px}.pixel-label{display:inline-block;background:#367c38;color:#fff9ce;border:3px solid #f6df70;border-radius:15px;padding:10px 18px;font-weight:1000;letter-spacing:1px}
.profile-wrap{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:center;margin-top:30px}.profile-frame{background:#fff9d5;border:4px solid #75a847;border-radius:24px;padding:12px;box-shadow:0 5px 0 #c5d775}.profile-frame img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.artist-name{font-size:48px;color:#2b7433;font-weight:1000;font-family:Arial Black,sans-serif}.artist-role{color:#8a8b58;font-weight:900;letter-spacing:2px;margin:8px 0 20px}.profile-copy p{font-size:18px;line-height:1.8;margin:0}
.about-section{padding-top:70px}.about-section>h2{display:inline-block;background:#367c38;color:#fff8c7;border:4px solid #f2d76a;border-radius:17px;padding:10px 22px;font-family:Arial Black,sans-serif;letter-spacing:1px}
.timeline{position:relative;margin:20px 0 0 30px;padding-left:35px;border-left:5px dashed #6da443}.timeline-item{position:relative;margin:0 0 24px;padding:18px 24px;background:rgba(255,249,211,.9);border:3px solid #83aa4e;border-radius:18px}.timeline-item:before{content:"🐾";position:absolute;left:-56px;top:14px;font-size:26px}.year{font-family:monospace;font-size:28px;font-weight:1000;color:#3d7c36}.timeline-text{margin-top:8px;font-size:17px}
.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}.album-card{background:#fff8d4;border:4px solid #75a647;border-radius:22px;overflow:hidden;cursor:pointer;box-shadow:0 5px 0 #bfd16c;transition:.15s transform}.album-card:hover{transform:translateY(-5px)}.album-card img{width:100%;display:block;aspect-ratio:1;object-fit:cover}.album-meta{padding:16px}.album-meta h3{margin:0;color:#2f7434;font-size:21px}.album-meta p{font-size:14px;line-height:1.5;margin:8px 0 0}
.album-detail-section{padding-top:24px}.album-detail{display:grid;grid-template-columns:320px 1fr;gap:30px;padding:28px}.detail-cover img{width:100%;border:4px solid #75a647;border-radius:18px}.detail-copy h2{font-size:34px;margin:18px 0 4px;color:#2d7133}.muted{color:#7b8059}.tracklist{margin-top:24px}.tracklist h3{color:#3b7a35}.track{display:flex;gap:15px;padding:12px 0;border-top:2px dashed #a8bd6b}.track>span{font:900 18px monospace;color:#5b8f43}.track strong{display:block}.track small{display:block;margin-top:4px;color:#65644e}.album-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.mini-link{display:inline-block;padding:9px 12px;border:2px solid #5e9140;border-radius:10px;color:#2f7434;background:#fff8d4;text-decoration:none;font-weight:900}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}.video-card{display:block;width:100%;padding:0;background:#fff8d4;border:4px solid #75a647;border-radius:22px;overflow:hidden;text-decoration:none;color:#27251f;box-shadow:0 5px 0 #bfd16c;cursor:pointer;text-align:left;font:inherit}.video-card:active{transform:translateY(2px)}.video-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:fill;
}.video-card div{padding:14px}.video-card h3{margin:0;color:#2f7434;font-size:18px;
  line-height:1.35;
  min-height:49px;}.video-card p{font-size:14px;line-height:1.5;
  min-height:42px;
  margin:8px 0 0;}.about-footer{padding:60px 0 40px;text-align:center}.footer-logo{margin-top:26px;font-size:30px;font-weight:1000;color:#2c7334}.about-footer small{display:block;margin-top:8px;color:#52653d}
@media(max-width:720px){.result-actions{padding-bottom:24px}.result-actions .pixel-btn{min-height:46px;font-size:14px}.profile-wrap{grid-template-columns:1fr;gap:24px}.profile-frame{max-width:260px;margin:auto}.artist-name{font-size:38px}.album-grid{grid-template-columns:repeat(2,1fr)}.video-grid{grid-template-columns:1fr}.album-detail{grid-template-columns:1fr}.detail-cover{max-width:330px}.about-section{padding-top:48px}}
@media(max-width:430px){.about-header{padding-top:16px}.logo-btn{font-size:27px}.about-top-back{padding:8px 12px;font-size:12px}.about-hero{padding:20px}.album-grid{gap:12px}.album-meta{padding:10px}.album-meta h3{font-size:15px}.album-meta p{font-size:12px}.timeline{margin-left:16px;padding-left:28px}.timeline-item:before{left:-48px}}

.youtube-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}.youtube-modal.is-open{display:flex}.youtube-modal-backdrop{position:absolute;inset:0;background:rgba(30,35,24,.78);backdrop-filter:blur(5px)}.youtube-modal-dialog{position:relative;z-index:1;width:min(920px,96vw);background:#fff8d4;border:5px solid #75a647;border-radius:24px;padding:14px;box-shadow:0 8px 0 #bfd16c}.youtube-embed{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#000}.youtube-embed iframe{width:100%;height:100%;border:0}.youtube-modal-close{position:absolute;right:-12px;top:-18px;width:42px;height:42px;border:4px solid #75a647;border-radius:50%;background:#fff8d4;color:#2f7434;font-size:28px;font-weight:900;line-height:1;cursor:pointer;z-index:2}.youtube-modal-open{overflow:hidden}@media(max-width:720px){.youtube-modal{padding:14px}.youtube-modal-dialog{width:100%;padding:10px;border-width:4px}.youtube-modal-close{right:-7px;top:-16px;width:38px;height:38px;font-size:24px}}.music-toggle{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:100;
  border:3px solid #347b35;
  background:#fff8cf;
  color:#2e7132;
  border-radius:999px;
  padding:10px 16px;
  font-size:14px;
  font-weight:900;
  box-shadow:0 4px 0 #b3c65a;
  cursor:pointer;
  transition:.15s;
}

.music-toggle:hover{
  transform:translateY(-2px);
}

.music-toggle:active{
  transform:translateY(1px);
  box-shadow:0 2px 0 #b3c65a;
}

.music-toggle.is-off{
  background:#e5e5c7;
  color:#777;
  border-color:#888;
  box-shadow:0 4px 0 #aaa;
}

@media(max-width:430px){
  .music-toggle{
    right:12px;
    bottom:12px;
    padding:8px 13px;
    font-size:13px;
  }
}
.result-overlay-image{
  position:absolute;
  z-index:10;

  Left:6.8%;
  Top:29.3%;
  width:85%;
  height:auto;

  display:block;
  pointer-events:none;
}/* =========================================
   PLEMOON FINAL PASTEL POLISH
   ========================================= */

/* ---------- COLOR SYSTEM ---------- */

:root{
  --green:#5d964f;
  --green-dark:#3f7439;
  --green-soft:#9fbd76;

  --cream:#fffbe3;
  --cream-soft:#fffdf0;
  --yellow:#f8e9a5;
  --yellow-soft:#fff4bd;

  --line:#9fbd76;
  --pink:#f3aaa8;
  --brown:#514936;

  --shadow:rgba(91,119,60,.18);
}


/* ---------- GLOBAL SOFTENING ---------- */

body{
  color:var(--brown);
}

.image-screen{
  background:#fff4b8;
}


/* =========================================
   ABOUT PLEMOON
   ========================================= */

.about-page{
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(255,255,255,.8) 0 4px,
      transparent 5px
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(255,255,255,.7) 0 5px,
      transparent 6px
    ),
    linear-gradient(
      180deg,
      #fff5c8 0%,
      #fff9d9 42%,
      #e5efb5 100%
    );
}


/* ---------- HEADER ---------- */

.about-header{
  padding:28px 0 16px;
}


/* logo */

.logo-btn{
  color:#4c8b4a;
  text-shadow:
    2px 2px 0 #fff,
    3px 3px 0 rgba(112,146,76,.15);
}


/* ---------- ABOUT TOP BUTTON ---------- */

.about-top-back{
  border:3px solid #7ca45d;
  background:#fffbe1;
  color:#47743d;
  border-radius:18px;
  padding:12px 22px;

  font-family:"Jua","NanumGothic",sans-serif;
  font-size:17px;
  font-weight:700;

  box-shadow:
    0 4px 0 #c9d995,
    0 7px 14px rgba(82,111,57,.12);

  transition:.18s ease;
}

.about-top-back:hover{
  transform:translateY(-2px);
}


/* ---------- MAIN ABOUT CARD ---------- */

.pixel-card{
  background:rgba(255,253,232,.94);

  border:4px solid #91b56b;
  border-radius:28px;

  box-shadow:
    0 7px 0 rgba(112,143,71,.18),
    inset 0 0 0 3px #f7e7a3;
}


/* ---------- SECTION LABELS ---------- */

.pixel-label,
.about-section>h2{
  background:#669d50;
  color:#fffbe0;

  border-color:#f4df91;

  font-family:"Jua","NanumGothic",sans-serif;

  box-shadow:
    0 3px 0 rgba(69,112,53,.15);
}


/* ---------- ABOUT TYPOGRAPHY ---------- */

.about-page{
  font-family:
    "Gowun Dodum",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    sans-serif;
}

.about-page h1,
.about-page h2,
.about-page h3,
.artist-name,
.artist-role,
.year,
.pixel-label,
.logo-btn,
.footer-logo{
  font-family:
    "Jua",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    sans-serif;
}


/* artist */

.artist-name{
  color:#518b48;
  letter-spacing:-1px;
}

.artist-role{
  color:#a28f62;
  letter-spacing:1px;
}

.profile-copy p{
  color:#595444;
  line-height:1.9;
}


/* ---------- HISTORY ---------- */

.timeline{
  border-left-color:#9fbd76;
}

.timeline-item{
  background:rgba(255,252,226,.92);
  border-color:#a4bd7b;

  box-shadow:
    0 4px 0 rgba(106,139,68,.12);
}

.timeline-item:before{
  color:#6da354;
}

.year{
  color:#679a51;
}

.timeline-text{
  color:#5d5848;
}


/* ---------- ALBUM CARDS ---------- */

.album-card,
.video-card{
  background:#fffbe4;
  border-color:#a0bd78;

  box-shadow:
    0 5px 0 rgba(103,137,67,.15);
}

.album-card:hover{
  transform:translateY(-4px);
}

.album-meta h3,
.video-card h3{
  color:#5b934b;
}

.album-meta p,
.video-card p{
  color:#68634f;
}


/* ---------- ALBUM DETAIL ---------- */

.album-detail{
  background:rgba(255,252,229,.94);
}

.detail-copy h2{
  color:#5b934b;
}

.muted{
  color:#9b8e66;
}

.track{
  border-top-color:#c5d494;
}

.track>span{
  color:#729d57;
}

.track small{
  color:#77705b;
}


/* ---------- MINI LINKS ---------- */

.mini-link{
  border-color:#9fbd76;
  background:#fffbe4;
  color:#578b49;

  transition:.15s ease;
}

.mini-link:hover{
  background:#fff4bc;
  transform:translateY(-1px);
}


/* =========================================
   DECORATIVE MOTIFS
   ========================================= */

/*
  메인 이미지에서 사용한
  음표 / 반짝이 / 고양이 / 발바닥 느낌을
  About 페이지 전체에 반복해서 사용
*/

.about-page:after{
  content:"♪  ✦  ♡  🐾  ✧  ♪";
  position:absolute;

  left:0;
  right:0;
  bottom:12px;

  text-align:center;

  color:#78a85b;
  font-family:"Jua",sans-serif;
  font-size:24px;
  letter-spacing:18px;

  opacity:.55;

  pointer-events:none;
}


/* 카드 주변에 작은 반짝이 느낌 */

.about-hero,
.about-section,
.album-detail-section{
  position:relative;
}

.about-hero:before{
  content:"✦";
  position:absolute;

  left:-18px;
  top:22px;

  color:#e3b95f;
  font-size:26px;

  opacity:.7;
}

.about-hero:after{
  content:"♪";
  position:absolute;

  right:-12px;
  bottom:18px;

  color:#65a45b;
  font-size:28px;

  opacity:.65;
}


/* section마다 은은한 장식 */

.about-section:nth-of-type(2):after{
  content:"🐾";
  position:absolute;

  right:8px;
  top:42px;

  font-size:30px;
  opacity:.35;
}

.about-section:nth-of-type(3):after{
  content:"✦";
  position:absolute;

  left:4px;
  top:45px;

  color:#e1bd63;
  font-size:25px;
  opacity:.55;
}


/* =========================================
   FOOTER
   ========================================= */

.about-footer{
  padding:70px 0 45px;
}

.footer-logo{
  color:#5a944d;
  text-shadow:2px 2px 0 #fff;
}

.about-footer small{
  color:#8b896c;
  font-family:"Gowun Dodum",sans-serif;
}


/* =========================================
   MOBILE
   ========================================= */

@media(max-width:720px){

  .about-top-back{
    padding:11px 17px;
    font-size:15px;
  }

  .artist-name{
    font-size:38px;
  }

  .profile-copy p{
    font-size:16px;
  }

  .about-page:after{
    font-size:19px;
    letter-spacing:10px;
  }
}/* =========================================
   ABOUT PLEMOON - VISUAL ATTENTION
   ========================================= */

.global-about{
  transition:transform .15s ease, filter .15s ease;
}

/* PC에서 마우스를 올렸을 때 */
.global-about:hover{
  transform:scale(1.04);
  filter:brightness(1.06);
}

/* 모바일에서 터치했을 때 */
.global-about:active{
  transform:scale(.96);
  filter:brightness(.98);
}/* ABOUT PLEMOON 버튼 */
.global-about{
  position:absolute;
  right:1.3%;
  top:1.3%;

  width:27%;
  height:6.5%;

  border:0;
  padding:0;
  margin:0;

  background-image:url("assets/about-plemoon.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  background-color:transparent;

  z-index:40;
  cursor:pointer;

  font-size:0;

  transition:transform .15s ease, filter .15s ease;
}

.global-about:hover{
  transform:scale(1.04);
  filter:brightness(1.06);
}

.global-about:active{
  transform:scale(.96);
  filter:brightness(.98);
}/* =========================================
   ABOUT PLEMOON GUIDE
   ========================================= */

.about-guide-text{
  position:absolute;

  /*
    ABOUT 버튼 아래쪽에 배치
    현재 버튼이 right:1.3%, width:27%이므로
    같은 영역을 기준으로 가운데 정렬
  */
  right:0.5%;
  top:8.0%;
  width:27%;

  text-align:center;
  white-space:nowrap;

  color:#5d7548;
  font-family:"Jua","Gowun Dodum","Apple SD Gothic Neo",sans-serif;
  font-size:clamp(18px,1.15vw,14px);
  font-weight:700;
  line-height:1.2;

  text-shadow:
    1px 1px 0 rgba(255,255,230,.9);

  z-index:41;
  pointer-events:none;
}


/* 작은 반짝이 공통 */
.about-guide-sparkle{
  position:absolute;
  z-index:41;

  color:#e2bc61;
  font-family:Arial,sans-serif;
  line-height:1;

  pointer-events:none;

  text-shadow:
    1px 1px 0 rgba(255,255,230,.7);
}


/* 왼쪽 위 */
.about-sparkle-1{
  right:25%;
  top:8%;
  font-size:clamp(15px,1vw,12px);
}


/* 오른쪽 위 */
.about-sparkle-2{
  right:2%;
  top:8%;
  font-size:clamp(20px,.9vw,11px);
}


/* 아래쪽 작은 반짝이 */
.about-sparkle-3{
  right:14%;
  top:9.5%;
  font-size:clamp(20px,.75vw,9px);
}


/* plemoon의 달 */
.about-guide-moon{
  position:absolute;
  right:7%;
  top:12%;

  z-index:41;

  color:#e4c565;
  font-family:Arial,sans-serif;
  font-size:clamp(30px,1.8vw,21px);
  line-height:1;

  transform:rotate(-12deg);

  pointer-events:none;

  text-shadow:
    1px 1px 0 rgba(255,255,230,.8);
}


/* 모바일 */
@media(max-width:600px){

  .about-guide-text{
    right:1.3%;
    top:8.0%;
    width:27%;

    font-size:clamp(8px,2.1vw,12px);
  }

  .about-sparkle-1{
    right:28%;
    top:7.5%;
    font-size:clamp(6px,1.8vw,10px);
  }

  .about-sparkle-2{
    right:0.5%;
    top:8.5%;
    font-size:clamp(5px,1.6vw,9px);
  }

  .about-sparkle-3{
    right:8%;
    top:10.5%;
    font-size:clamp(5px,1.4vw,8px);
  }

  .about-guide-moon{
    right:-1%;
    top:9.5%;
    font-size:clamp(12px,3.5vw,19px);
  }
}/* =========================================
   ABOUT PLEMOON - 2.5초 시선 유도
   버튼 + 문구 + 반짝이 + 달
   ========================================= */

/* ABOUT 버튼 */
.global-about{
  animation:aboutButtonAttention 2.5s ease-in-out infinite;
}

@keyframes aboutButtonAttention{
  0%,70%,100%{
    transform:scale(1);
  }

  75%{
    transform:scale(1.035);
  }

  80%{
    transform:scale(1);
  }
}


/* plemoon의 음악 이야기 + 반짝이 */
.about-guide-text,
.about-guide-sparkle{
  animation:aboutGuideAttention 2.5s ease-in-out infinite;
}

@keyframes aboutGuideAttention{
  0%,70%,100%{
    transform:scale(1);
  }

  75%{
    transform:scale(1.06);
  }

  80%{
    transform:scale(1);
  }
}


/* 달
   기존 rotate(-12deg)를 유지하면서 살짝 커짐 */
.about-guide-moon{
  animation:aboutMoonAttention 2.5s ease-in-out infinite;
}

@keyframes aboutMoonAttention{
  0%,70%,100%{
    transform:rotate(-12deg) scale(1);
  }

  75%{
    transform:rotate(-12deg) scale(1.12);
  }

  80%{
    transform:rotate(-12deg) scale(1);
  }
}