/* =========================================================
 * 겨울 노래 자판기 (vending.html의 body class="theme-vending")
 * 위치 값(px)은 시안(iPhone 17, 폭 402)을 로고 바 아래부터 잰 값이에요.
 * ========================================================= */
@font-face { font-family: 'DearFromsol'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/2607161334@griun-fromsol-rg/griun-fromsol-rg/Griun_Fromsol-Rg.woff2') format('woff2'); font-weight: 400; font-display: swap; }

.theme-vending {
  --vm-blue: #799ad3;          /* 버튼 */
  --vm-line: #799ad3;          /* 검색칸·입력 밑줄 */
  --vm-bg: linear-gradient(180deg, #b7c6e1 0%, #b0c2df 38%, #bcc8e2 70%, #c6cee5 100%);   /* 결과 배경 */
  --ff-fromsol: 'DearFromsol', var(--ff);
  --c-footer-line: #ececec;
}
.theme-vending #app { overflow-x: hidden; }
.theme-vending .main-footer { margin-top: auto; }
.theme-vending .screen-main { background: #ffffff; }
.vm-top { position: relative; z-index: 5; }   /* 자판기가 올라갈 때 로고 바 뒤로 숨어요 */

/* ---------- 무대 (자판기·MP3가 움직이는 곳) ---------- */
.vm-stage { position: relative; flex: 1; min-height: 796px; overflow: hidden; }   /* 맨 아래 버튼과 푸터 사이 44px */
.vm-bg { position: absolute; inset: 0; background: var(--vm-bg); opacity: 0; }

.vm-rig { position: absolute; top: 53px; left: calc(50% - 191px); width: 382px; height: 575px; }
.vm-machine { width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
/* 꺼내는 칸 윗선부터 아래만 보여요 (MP3가 칸 안으로 떨어지는 모습) */
.vm-slot { position: absolute; left: 0; top: 444px; width: 100%; height: 1200px; overflow: hidden; pointer-events: none; }

/* ---------- MP3 (결과 크기 336×494 기준) ---------- */
.vm-mp3 {
  position: absolute; left: 23px; top: 21px; width: 336px; height: 494px;
  transform-origin: 50% 0; opacity: 0; pointer-events: none;
}
.vm-mp3.is-on { pointer-events: auto; }
.vm-mp3-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vm-screen { position: absolute; left: 41px; top: 41px; width: 250px; height: 192px; }
.vm-video {
  position: absolute; left: 16.5px; top: 14.5px; width: 214px; height: 120.4px;
  padding: 0; border: 0; overflow: hidden; background: #e9e4e4; cursor: pointer;
}
.vm-video.is-playing { cursor: default; }
.vm-video img, .vm-video iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vm-video img[hidden] { display: none; }   /* 영상이 켜지면 썸네일을 완전히 치워요 */
.vm-line { position: absolute; left: 10px; right: 10px; margin: 0; height: 22px; font-size: 18px; line-height: 22px; color: #151515; text-align: center; white-space: nowrap; }
.vm-title { top: 143px; }
.vm-artist { top: 166px; font-size: 13.5px; line-height: 20px; }   /* 제목 18 : 가수 13.5 (4:3) */

/* 흐르는 글자 */
.mq { display: block; overflow: hidden; width: 100%; }
.mq-in { display: inline-block; white-space: nowrap; }
.mq.is-run { text-align: left; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%); }
.mq.is-run .mq-in { animation: vm-marquee var(--mq-dur, 8s) linear var(--mq-delay, 0s) infinite; }
.mq-gap { display: inline-block; width: 48px; }
@keyframes vm-marquee { from { transform: translateX(var(--mq-from, 0px)); } to { transform: translateX(var(--mq-shift, -50%)); } }

/* 휠 버튼 (그림 위에 투명하게 올려요) */
.vm-key { position: absolute; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vm-key:active { background: rgba(160, 120, 90, .08); }
.vm-prev { left: 66px; top: 326px; width: 48px; height: 48px; }
.vm-next { left: 208px; top: 326px; width: 48px; height: 48px; }
.vm-center { left: 126px; top: 314px; width: 72px; height: 72px; }
.vm-play { left: 138px; top: 400px; width: 48px; height: 42px; }

/* ---------- 버튼 ---------- */
.vm-draw {
  position: absolute; top: 657px; left: calc(50% - 168px); width: 336px; height: 60px;
  border: 0; border-radius: 30px; background: var(--vm-blue); color: #fff;
  font-family: var(--ff); font-size: 19px; font-weight: 700;
  transition: transform .12s ease;
}
.vm-draw:active { transform: scale(.98); }
.vm-result { position: absolute; inset: 0; pointer-events: none; }
.vm-result[hidden] { display: none; }
.vm-result > * { pointer-events: auto; }
.vm-btn {
  display: flex; align-items: center; justify-content: center;
  width: 331px; height: 52px; border: 0; border-radius: 26px;
  background: var(--vm-blue); color: #fff;
  font-family: var(--ff-fromsol); font-size: 18px; font-weight: 400;
  transition: transform .12s ease, background .2s ease;
}
.vm-btn:active { transform: scale(.98); }
.vm-again, .vm-recommend { position: absolute; left: calc(50% - 165.5px); }
.vm-again { top: 639px; }   /* 링크 아래 24px */
.vm-recommend { top: 699.5px; }
.vm-links {
  position: absolute; top: 569px;   /* MP3 아래 24px */ left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.vm-link {
  padding: 4px 8px; line-height: 17px; border: 0; background: none; white-space: nowrap;
  font-family: var(--ff); font-size: 12px; color: #5f739c; cursor: pointer;
}
.vm-link u { text-underline-offset: 2px; }
.vm-link:disabled { cursor: default; }

/* ---------- 노래 추천 ---------- */
.screen-recommend { background: #ffffff; }
.vr-body { flex: 1; display: flex; flex-direction: column; padding: 0 0 44px; }
.vr-intro { margin: 43px 0 0; font-size: 16px; line-height: 25px; text-align: center; color: #151515; }
.vr-search { position: relative; margin: 28px auto 0; width: 331px; max-width: calc(100% - 40px); }
.vr-search-input {
  width: 100%; height: 42.5px; padding: 0 48px 0 19px;
  border: 1.5px solid var(--vm-line); border-radius: 22px; background: #fff;
  font-size: 16px; color: #151515; outline: none; -webkit-appearance: none; appearance: none;
}
.vr-search-input::placeholder { color: #a8a8a8; }
.vr-search-input::-webkit-search-cancel-button { display: none; }
.vr-search-icon { position: absolute; right: 17px; top: 9px; width: 25px; height: 25px; color: var(--vm-line); pointer-events: none; }
.vr-found { margin: 10px auto 0; width: 320px; max-width: calc(100% - 50px); padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.vr-found[hidden] { display: none; }
.vr-found li { display: flex; gap: 8px; align-items: baseline; padding: 7px 2px; border-bottom: 1px solid #eef1f7; }
.vr-found li:last-child { border-bottom: 0; }
.vr-found .tag { flex-shrink: 0; font-size: 11px; color: var(--vm-blue); font-weight: 700; }
.vr-found .song { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-found .none { color: #757575; }
.vr-label { display: block; margin: 79px auto 0; width: 320px; max-width: calc(100% - 50px); font-size: 19px; font-weight: 600; color: #151515; }
.vr-label ~ .vr-label { margin-top: 31px; }
.vr-field {
  display: block; margin: 10px auto 0; width: 320px; max-width: calc(100% - 50px); height: 34px; padding: 0 0 4px;
  border: 0; border-bottom: 1px solid var(--vm-line); border-radius: 0; background: none;
  font-size: 17px; color: #151515; outline: none; -webkit-appearance: none; appearance: none;
}
.vr-field::placeholder { color: #c4c4c4; }
.vr-field:focus { border-bottom-width: 2px; padding-bottom: 3px; }
.vr-error { margin: 8px auto 0; width: 320px; max-width: calc(100% - 50px); font-size: 13px; color: #e5486e; }
.vr-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.vr-space { flex: 1 0 56px; }
.vr-submit { margin: 0 auto; width: 331px; max-width: calc(100% - 40px); }
.vr-submit:disabled { background: #c9d5ec; cursor: default; transform: none; }
.screen-recommend .main-footer { margin-top: 0; }

/* ---------- 플레이리스트 전체보기 (틀은 img/vending_list.webp, 목록만 안에서 스크롤돼요) ---------- */
.screen-list { background: #ffffff; }
.vl-body { flex: 1; display: flex; flex-direction: column; padding: 33px 0 44px; }
.vl-frame {
  position: relative; margin: 0 auto; width: 328px; max-width: calc(100% - 40px); height: 583px;
  background: url('../img/vending_list.webp') center / 100% 100% no-repeat;
}
.vl-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }   /* 글자는 그림에 들어 있어요 */
.vl-list {
  position: absolute; left: 1px; right: 1px; top: 38px; bottom: 1px;
  margin: 0; padding: 0; list-style: none;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.vl-list li { display: flex; align-items: center; gap: 10px; padding: 10px 10px 11px 12px; border-bottom: 1px solid #8f8f8f; }
.vl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* 오른쪽 재생 버튼: 누르면 유튜브로 넘어가요 */
.vl-play {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--vm-blue); color: #fff;
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease;
}
.vl-play svg { width: 22px; height: 22px; margin-left: 2px; }
.vl-play:active { transform: scale(.92); }
.vl-title { font-size: 17px; line-height: 22px; color: #151515; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-artist { font-size: 13px; line-height: 17px; color: #151515; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-list .vl-empty { border-bottom: 0; color: #757575; font-size: 14px; }
.vl-close { margin: 0 auto; width: 331px; max-width: calc(100% - 40px); }
.screen-list .main-footer { margin-top: 0; }
.screen-list .vr-space { flex: 1 0 38px; }