/* =========================================================
   kissmissbass — style.css
   색: #001f3f(네이비) / #dadbdd(그레이) / #ffffff(화이트)
   ========================================================= */

/* 윈도우용 Helvetica 대체 폰트: TeX Gyre Heros (무료, 웹 사용 가능 — 라이선스: fonts/tex-gyre-heros-LICENSE.txt) */
@font-face { font-family: "TeX Gyre Heros Web"; src: url("fonts/tex-gyre-heros-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TeX Gyre Heros Web"; src: url("fonts/tex-gyre-heros-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "TeX Gyre Heros Web"; src: url("fonts/tex-gyre-heros-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --navy: #001f3f;
  --gray: #dadbdd;
  --white: #ffffff;
  --bg: #ececec;      /* 배경 회색 (화면 바탕) */

  /* 영어는 TeX Gyre Heros(fonts 폴더의 무료 Helvetica 대체), 한국어는 Pretendard로 자동으로 나뉘어 표시돼요.
     폰트 파일을 사이트에 같이 올려서 맥·윈도우·휴대폰 어디서나 똑같이 보여요. */
  --font-main: "TeX Gyre Heros Web", "Helvetica Neue", Helvetica, Arial, "Pretendard", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  transition: background 0.35s;
  color: var(--navy);
  font-family: var(--font-main);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 티켓 화면이 열려 있을 때는 바깥 여백도 네이비로 */
body.is-ticket { background: var(--navy); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* =========================================================
   무대(stage): 가로로 긴 16:9 화면.
   창 크기에 맞춰 통째로 커지고 작아져서 잘리지 않아요.
   ========================================================= */
.viewport {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
}

.stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  background: var(--bg);
}

/* 종이 질감: 화면 전체에 깔아서 여백까지 자연스럽게 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.07;      /* 종이 질감 진하기 (높일수록 화면이 어두워져요) */
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.52 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== 오른쪽 위 피크 ===== */
.pick {
  position: absolute;
  top: 5cqh;
  right: 4cqw;
  width: 7cqw;
  min-width: 70px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 6;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.2s;
}

.pick svg { display: block; width: 100%; fill: var(--navy); overflow: visible; }
.pick:hover, .pick:focus-visible, .pick[aria-expanded="true"] { transform: scale(1.06); outline: none; }

/* 원형 문구: 천천히 회전, 마우스를 올리면 조금 빨라져요 */
/* 글자만 돌고, 가운데 발바닥은 가만히 있어요 */
.stamp-text { transform-origin: 60px 60px; transform-box: view-box; animation: spin 22s linear infinite; }
.pick:hover .stamp-text, .pick:focus-visible .stamp-text { animation-duration: 8s; }
.stamp-text {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 피크를 누르면 나오는 작은 창 */
.pick-pop {
  position: absolute;
  top: calc(5cqh + 8.4cqw);
  right: 4cqw;
  width: 19cqw;
  min-width: 180px;
  padding: 0.7cqw;
  background: var(--white);
  border: 1px solid var(--navy);
  z-index: 6;
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  transition: opacity 0.25s, transform 0.3s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0.3s;
}

.pick-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.25s, transform 0.3s cubic-bezier(.2,.8,.2,1);
}

.pick-pop-img {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--gray);
  overflow: hidden;
}

.pick-pop-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pick-pop-img:empty::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(10px, 0.8cqw, 13px);
  letter-spacing: 0.04em;
  opacity: 0.55;
}

.pick-pop-cap {
  margin-top: 0.6em;
  font-size: clamp(11px, 0.9cqw, 14px);
  line-height: 1.5;
}

.pick-pop-close {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 1;
  width: 2em;
  height: 2em;
  font-size: clamp(11px, 0.9cqw, 14px);
  background: var(--navy);
  color: var(--white);
  border: 0;
  cursor: pointer;
}

/* ===== 베이스 기타 =====
   헤드는 왼쪽 위, 바디는 오른쪽 아래. 화면 가득 크게.
   --rot(기울기), left/top(위치), width(크기)로 조정해요. */
.bass {
  --rot: 17deg;
  position: absolute;
  left: 51%;
  top: 45%;
  width: 98cqw;
  aspect-ratio: 1400 / 380;
  transform: translate(-50%, -50%) rotate(var(--rot));
  z-index: 2;
}

.bass svg { display: block; width: 100%; height: 100%; overflow: visible; }

.bass .body-shape { fill: var(--white); stroke: var(--navy); stroke-width: 1.4; stroke-linejoin: round; }
.bass .part      { fill: var(--white); stroke: var(--navy); stroke-width: 1.1; }
.bass .fret      { stroke: var(--gray); stroke-width: 1.4; }
.bass .inlay     { fill: var(--gray); }
.bass .string    { stroke: var(--navy); stroke-width: 0.7; fill: none; }
.bass .anchor    { fill: var(--white); stroke: var(--navy); stroke-width: 1.1; }
.bass * { vector-effect: non-scaling-stroke; }

/* ===== 누를 수 있는 지점 ===== */
.hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(28px, 3.4cqmin, 52px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 3;
}

/* 평소엔 가만히 있는 남색 네모, 마우스를 올리면 강아지 발바닥으로 바뀌어요 */
.hotspot-mark {
  position: relative;
  display: block;
  width: clamp(16px, 2.1cqmin, 26px);
  aspect-ratio: 1;
  transform: rotate(calc(var(--rot) * -1));   /* 베이스가 기울어도 똑바로 */
}
.hs-square {
  position: absolute;
  inset: 22%;
  background: var(--navy);
  transition: transform 0.35s cubic-bezier(.2,.9,.2,1), opacity 0.25s;
}
.hs-paw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--navy);
  opacity: 0;
  transform: scale(0.4) rotate(20deg);
  transition: transform 0.45s cubic-bezier(.2,.9,.2,1), opacity 0.25s;
}

.hotspot-label {
  position: absolute;
  left: 95%;
  top: 50%;
  margin-top: -0.85em;
  padding: 0.35em 0.6em;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(9px, 1.45cqmin, 15px);
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--navy);
  transform-origin: 0 50%;
  transform: rotate(calc(var(--rot) * -1));
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.hotspot:hover .hs-square,
.hotspot:focus-visible .hs-square { opacity: 0; transform: scale(0.3) rotate(45deg); }
.hotspot:hover .hs-paw,
.hotspot:focus-visible .hs-paw { opacity: 1; transform: scale(1.25) rotate(-14deg); }
.hotspot:hover .hotspot-label,
.hotspot:focus-visible .hotspot-label { opacity: 1; }
.hotspot:focus-visible { outline: none; }


/* 터치 화면: PC처럼 평소엔 네모만, 누르는 순간 발바닥과 이름이 나온 뒤 화면이 열려요 (script.js) */
.hotspot.is-tap .hs-square { opacity: 0; transform: scale(0.3) rotate(45deg); }
.hotspot.is-tap .hs-paw { opacity: 1; transform: scale(1.25) rotate(-14deg); }
.hotspot.is-tap .hotspot-label { opacity: 1; }

/* ===== 왼쪽 아래 글자 ===== */
.intro {
  position: absolute;
  left: 4cqw;
  bottom: 7cqh;
  z-index: 4;
}

.intro-kicker {
  font-size: 1.15cqw;
  margin-bottom: 1.2cqh;
}

.logo {
  font-size: 7cqw;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.92;
}

/* 발음 표기 */
.intro-sub {
  font-size: 1.5cqw;
  letter-spacing: -0.02em;
  margin-top: 2cqh;
}

.intro-sub .pos { font-style: italic; }

/* 정의 문장 */
.intro-caption {
  max-width: none;
  white-space: nowrap;
  font-size: 1.2cqw;
  letter-spacing: -0.02em;
  line-height: 1.5;
  margin-top: 2.6cqh;
}

/* =========================================================
   티켓 화면 (지점을 눌렀을 때)
   ========================================================= */
.ticket-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0s linear 0.35s;
}

.ticket-screen.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s;
}

.ticket-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4cqh 4cqw 0;
  font-size: clamp(10px, 1.6cqmin, 15px);
  letter-spacing: 0.01em;
}

.close {
  background: none;
  border: 1px solid var(--white);
  padding: 0.25em 0.6em;
  font-size: 0.85em;
  letter-spacing: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.close:hover, .close:focus-visible { background: var(--white); color: var(--navy); outline: none; }

.band-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.4cqh;
  padding-bottom: 4cqh;
}

/* ----- 띠(팔찌 티켓) 한 줄 ----- */
.band {
  --ticket-size: 1.55cqmin;
  --shift: var(--x, 0%);
  display: flex;
  width: 62cqw;
  height: 8.2cqh;
  background: var(--white);
  color: var(--navy);
  font-size: var(--ticket-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(var(--shift), 2cqh) rotate(var(--r, 0deg));
  transition: opacity 0.4s, transform 0.5s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i, 0) * 50ms);
}

.is-open .band {
  opacity: 1;
  transform: translate(var(--shift), 0) rotate(var(--r, 0deg));
}

.band--flip { flex-direction: row-reverse; }

/* 띠 끝의 지그재그 탭 */
.band-tab {
  position: relative;
  flex: 0 0 9%;
  border-right: 1px dashed var(--gray);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='20'%3E%3Cpath d='M0 0L14 10L0 20M14 0L0 10L14 20' fill='none' stroke='%23dadbdd' stroke-width='1'/%3E%3C/svg%3E");
  background-size: auto 50%;
  background-repeat: repeat-x;
  background-position: 0 50%;
}

.band--flip .band-tab { border-right: 0; border-left: 1px dashed var(--gray); }

.band-tab i {
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 62%;
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--navy) 0 3px, transparent 3px 6px);
}

.band-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3%;
  padding: 0 2.5%;
  overflow: hidden;
}

/* 네이비/그레이 블록 */
.block {
  flex: 1;
  height: 76%;
  display: flex;
  align-items: center;
  gap: 6%;
  padding: 0 3%;
  background: var(--navy);
  color: var(--white);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
}

.block--gray { background: var(--gray); color: var(--navy); }

.block .text { text-transform: none; letter-spacing: 0.01em; white-space: normal; }

.cols {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  column-gap: 2.6em;
  row-gap: 0.15em;
  font-size: 0.85em;
}

/* 큰 글자 */
.big {
  font-size: 4.4cqmin;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: none;
  color: var(--gray);
  white-space: nowrap;
}

.big.outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--gray);
}

/* 번호 줄 */
.seq {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: var(--gray);
  font-size: 1.4em;
}

.seq .on { color: var(--navy); font-weight: 700; font-size: 1.5em; }

/* 사진 자리 */
.band-photo {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--gray);
}

.band-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band-photo:empty::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.8em;
  color: var(--navy);
  opacity: 0.55;
}

/* =========================================================
   세로 화면(휴대폰 세로 등): 무대를 세로형으로 바꿔요
   ========================================================= */
@media (max-aspect-ratio: 4 / 5) {
  .stage {
    width: min(100vw, calc(100vh * 9 / 16));
    width: min(100vw, calc(100dvh * 9 / 16));
    aspect-ratio: 9 / 16;
  }

  .pick { top: 3.5cqh; right: 6cqw; width: 15cqw; }
  .pick-pop { top: calc(3.5cqh + 18cqw); right: 6cqw; width: 58cqw; padding: 2cqw; }

  /* 세로 화면에서도 같은 대각선 방향, 조금 더 가파르게 */
  .bass {
    --rot: 66deg;
    left: 52%;
    top: 39.5%;
    width: 72cqh;
  }

  .intro { left: 6cqw; bottom: 4.5cqh; }
  .intro-kicker { font-size: 2.8cqw; margin-bottom: 0.8cqh; }
  .logo { font-size: 14.5cqw; }
  .intro-sub { font-size: 3.6cqw; margin-top: 1.2cqh; }
  .intro-caption { font-size: 2.9cqw; margin-top: 0.8cqh; max-width: 88cqw; }

  .ticket-top { padding: 3cqh 6cqw 0; }
  .band-stack { gap: 0.8cqh; }
  .band { width: 88cqw; height: 7.4cqh; --ticket-size: 2.6cqw; --shift: calc(var(--x, 0%) * 0.4); }
  .big { font-size: 7.5cqw; }
}

/* 움직임 줄이기 설정을 켠 사람에게는 애니메이션을 끄기 */

/* 이미지 저장 막기: 드래그, 휴대폰 꾹 누르기 메뉴, 선택 막기 */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}


/* =========================================================
   새 화면 01~03 (흰 화면 / 뮤직박스 / 클립)
   ========================================================= */

/* ----- 흰 배경 화면 공통 ----- */
.ticket-screen.screen--light { background: var(--white); color: var(--navy); }
.screen--light .close { border-color: var(--navy); }
.screen--light .close:hover, .screen--light .close:focus-visible { background: var(--navy); color: var(--white); }
body.is-ticket.is-light { background: var(--white); }
body.is-ticket.is-gray { background: var(--bg); }

/* ----- 01 PROFILE: 글자 + 뚱뚱한 글자 덩어리 ----- */
.ticket-screen.screen--profile { background: var(--bg); color: var(--navy); }
.screen--profile .close { border-color: var(--navy); }
.screen--profile .close:hover, .screen--profile .close:focus-visible { background: var(--navy); color: var(--white); }

.pf { flex: 1; position: relative; min-height: 0; margin: 2cqh 4cqw 4cqh; }

/* 튀어나오는 이름: 평소엔 덩어리 뒤에 숨어 있다가 밖으로 미끄러져 나와요 (위치는 script.js) */
.pf-out {
  position: absolute;
  z-index: 1;
  font-family: var(--font-main);
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  padding: 0.1em 0 0.25em;          /* y, p 꼬리 여유 */
  pointer-events: none;
  opacity: 0;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1), opacity 0.5s;
}
.pf-out[data-dir="left"]  { transform: translateX(105%); }
.pf-out[data-dir="right"] { transform: translateX(-105%); }
.pf-out[data-dir="up"]    { transform: translateY(105%); }
.pf-out[data-dir="down"]  { transform: translateY(-105%); }
.pf-out.is-on { opacity: 1; transform: none; }

/* 마우스를 올리는 투명한 자리 */
.pf-hot {
  position: absolute;
  z-index: 4;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.pf-hot:focus-visible { outline: 1px dashed var(--navy); outline-offset: -4px; }

.pf-hint {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: clamp(11px, 0.9cqw, 14px);
  letter-spacing: -0.035em;
  opacity: 0.6;
}
@media (hover: none) { .pf-hint { font-size: 0; } .pf-hint::after { content: "( tap the letters )"; font-size: 11px; } }

/* ----- 누르면 뜨는 창 ----- */
.pf-win {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  width: min(52cqw, 720px);
  background: var(--white);
  border: 1px solid var(--gray);
  color: var(--navy);
  font-family: "Pretendard", sans-serif;   /* 창 안 글씨는 전부 Pretendard */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%) scale(0.97);
  transition: opacity 0.45s, transform 0.7s cubic-bezier(.22,1,.36,1), visibility 0s linear 0.7s;
}
.pf-win.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.45s, transform 0.7s cubic-bezier(.22,1,.36,1);
}
.pf-win-close {
  position: absolute;
  top: 0.9em;
  right: 0.9em;
  z-index: 1;
  width: 2em;
  height: 2em;
  background: none;
  border: 0;
  color: var(--navy);
  font-size: clamp(12px, 1cqw, 15px);
  cursor: pointer;
  opacity: 0.55;
}
.pf-win-close:hover, .pf-win-close:focus-visible { opacity: 1; outline: none; }
.pf-win-body { display: flex; gap: 2.2cqw; padding: 2.6cqw 2.8cqw 2.4cqw; }
.pf-win-photo {
  position: relative;
  flex: 0 0 36%;
  aspect-ratio: 4 / 5;
  align-self: flex-start;
  background: var(--gray);
  overflow: hidden;
}
.pf-win-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-win-photo:empty::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.5;
}
.pf-win-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: clamp(12px, 1.05cqw, 15px); line-height: 1.6; letter-spacing: -0.035em; }

/* 큰 제목 */
.pf-title {
  font-size: 2.6em;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

/* 이름/파트 줄 */
.pf-meta { padding: 0.9em 0 1.1em; border-bottom: 1px solid var(--gray); }
.pf-meta b { font-weight: 700; }
.pf-meta mark {
  background: var(--gray);
  color: var(--navy);
  font-weight: 700;
  padding: 0.05em 0.3em;
}
.pf-meta sup { font-size: 0.65em; font-weight: 700; margin-left: 0.2em; }

/* 소개 문장 */
.pf-desc { padding-top: 1.1em; }
.pf-desc b { font-weight: 700; }
/* 소속·출생·정보·성격·TMI 칸 */
.pf-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.75em 0.9em; padding-top: 1.1em; margin: 0; }
.pf-facts dt {
  align-self: start;
  min-width: 3.4em;
  margin-top: 0.15em;
  padding: 0.2em 0.5em;
  background: var(--navy);
  color: var(--white);
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.pf-facts dd { margin: 0; word-break: keep-all; }
.pf-facts b { font-weight: 700; }
.pf-facts .nw { white-space: nowrap; }   /* 이 부분은 줄바꿈 안 되게 */
.pf-link { margin-top: 1.2em; align-self: flex-start; font-size: 0.9em; text-decoration: underline; text-underline-offset: 0.2em; }

/* 가운데 덩어리 */
.pf-blob { position: absolute; z-index: 2; overflow: visible; pointer-events: none; }
.pf-fill { fill: var(--white); }
.pf-dots { fill: url(#pfDots); }
#pfDots circle { fill: var(--gray); }   /* 망점 색: 바꾸고 싶으면 여기 */
.pf-line {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.pf-fill, .pf-dots { opacity: 0; transition: opacity 1.2s 1.4s; }

/* 화면이 열리면: 테두리가 그려지고 → 점이 채워져요 */
.is-open .pf-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.8s cubic-bezier(.6,0,.3,1) 0.2s; }
.is-open .pf-fill, .is-open .pf-dots { opacity: 1; }

/* ----- 02 MUSIC: 태엽 오르골 ----- */
.musicbox { flex: 1; position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; -webkit-user-select: none; user-select: none; }

/* 보석함 */
.mb-jewel { position: relative; width: 12cqw; aspect-ratio: 240 / 230; margin-top: 8cqh; flex: none; }
.mb-jewel > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mb-lid { transform-box: view-box; transform-origin: 120px 150px; transition: transform 1s cubic-bezier(.3,1.25,.4,1); }
.musicbox.is-open .mb-lid { transform: translateY(-92px) scale(1, 3.35); }
.mb-lid-face { fill: var(--gray); }
.mb-lid-ring { fill: #c9cacd; }
.mb-lid-in { fill: var(--white); opacity: 0; transition: opacity .4s .35s; }
.mb-lid-pearl { fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 7; vector-effect: non-scaling-stroke; opacity: .9; }
.musicbox.is-open .mb-lid-in { opacity: 1; }
.mb-lid-rim, .mb-box-line { fill: none; stroke: var(--navy); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mb-box { fill: var(--gray); stroke: var(--navy); stroke-width: 1.2; }
.mb-box-shade { fill: var(--white); opacity: .35; }
.mb-foot { fill: #c9cacd; }
.mb-foot-side { fill: #b9bbbf; stroke: var(--navy); stroke-width: 1; }
.mb-band { fill: none; stroke: var(--navy); stroke-width: 1; opacity: .55; }
.mb-pearls circle { fill: var(--white); }
.mb-plaque { fill: var(--white); stroke: var(--navy); stroke-width: 1; }
.mb-heart { fill: var(--navy); }
.mb-box-top { fill: #c9cacd; }
.mb-box-inner { fill: none; stroke: var(--white); stroke-width: 1.4; opacity: .8; }
.mb-dancer-wrap { position: absolute; left: 50%; bottom: 36%; width: 44%; height: 64%; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
.mb-dancer { position: absolute; inset: 0; transform: translateY(102%); transition: transform 1s cubic-bezier(.3,1.1,.4,1) .3s; }
.musicbox.is-open .mb-dancer { transform: translateY(0); }
.mb-dancer img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; }

/* 태엽 열쇠: 정면을 보고 있는 나비 모양 열쇠, 시계 방향으로 돌려요 */
.mb-key { position: absolute; right: -26%; top: 70%; width: 46%; aspect-ratio: 1; transform: translateY(-50%); padding: 0; background: none; border: 0; cursor: grab; touch-action: none; }
.mb-key:active { cursor: grabbing; }
.mb-key svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mb-key-bow { fill: var(--white); stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.mb-key-hole { fill: var(--navy); }
.mb-key-collar { fill: var(--gray); stroke: var(--navy); stroke-width: 2; }
.mb-key-pin { fill: var(--navy); }
.mb-key:hover .mb-key-bow { fill: #f3f4f6; }
.mb-key:focus-visible { outline: 1px dashed var(--white); outline-offset: 4px; }
.mb-key-hint { fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 7; opacity: .75; transform-origin: 0 0; animation: hint 3s linear infinite; transition: opacity .4s; }
.mb-key-hint .tip { stroke-dasharray: none; }
@keyframes hint { to { transform: rotate(360deg); } }
.musicbox.wound .mb-key-hint { opacity: 0; animation: none; }
.musicbox.low #mbLabel { color: var(--white); animation: mbNudge 1.4s ease-in-out infinite; }
@keyframes mbNudge { 50% { opacity: .35; } }

.mb-meter { display: flex; align-items: center; gap: 0.8em; margin-top: 1.4cqh; font-size: clamp(10px, 0.9cqw, 13px); letter-spacing: -0.01em; color: rgba(255,255,255,.7); flex: none; }
.mb-bar { width: 8cqw; height: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.mb-bar i { display: block; height: 100%; width: 0; background: var(--white); }

/* 오르골 기계 + 악보 */
.mb-machine { position: relative; z-index: 2; display: block; width: 26cqw; margin-top: 2.4cqh; flex: none; overflow: visible; }
.mb-base  { fill: var(--gray); }
.mb-white { fill: var(--white); stroke: var(--navy); stroke-width: 1; }
.mb-screw { fill: var(--bg); stroke: var(--navy); stroke-width: .8; }
.mb-pins  { fill: url(#mbPins); }
#mbPins circle { fill: var(--navy); }
.mb-tooth { fill: var(--white); stroke: var(--navy); stroke-width: .8; transition: fill .5s; }
.mb-tooth.hit { fill: var(--navy); transition: none; }
.mb-strip { position: relative; z-index: 1; flex: 1; width: 17.5cqw; margin-top: -0.9cqw; background-color: var(--white); background-repeat: repeat-y; background-size: 100% auto; box-shadow: inset 0 14px 14px -10px rgba(0,31,63,.3); }

.mb-caption { position: absolute; left: 4cqw; bottom: 4cqh; display: flex; flex-direction: column; align-items: flex-start; gap: .8em; color: var(--gray); font-size: clamp(10px, 0.85cqw, 13px); letter-spacing: -0.02em; }
.mb-caption span { color: var(--white); }
/* close 버튼과 같은 크기 */
.mb-sound { background: none; border: 1px solid rgba(255,255,255,.5); color: var(--white); padding: .25em .6em; font-size: calc(clamp(10px, 1.6cqmin, 15px) * .85); letter-spacing: .04em; cursor: pointer; }
.mb-sound[aria-pressed="true"] { background: var(--white); color: var(--navy); }
.mb-btns { display: flex; gap: .5em; }
.mb-sound[aria-expanded="true"] { background: var(--white); color: var(--navy); }

/* 악보 직접 만들기 패널 */
.mb-custom {
  position: absolute;
  right: 4cqw;
  top: 2cqh;
  bottom: 4cqh;
  z-index: 5;
  width: 24cqw;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--navy);
  padding: 1.4cqw;
  font-size: clamp(10px, .85cqw, 13px);
  letter-spacing: -0.01em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5cqh);
  transition: opacity .3s, transform .4s cubic-bezier(.22,1,.36,1), visibility 0s linear .4s;
}
.mb-custom.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s cubic-bezier(.22,1,.36,1); }
.mb-custom-top { display: flex; flex-direction: column; gap: .3em; margin-bottom: .9em; }
.mb-custom-top span { font-size: 1.15em; }
.mb-notes, .mb-grid { display: grid; grid-template-columns: 1.6em repeat(15, 1fr); }
.mb-notes::before { content: ""; }
.mb-notes i { font-style: normal; text-align: center; font-size: .78em; opacity: .55; padding-bottom: .3em; }
.mb-grid { flex: 1; min-height: 0; overflow-y: auto; align-content: start; border-top: 1px solid var(--gray); }
.mb-grid .bar { grid-column: 1; font-size: .75em; opacity: .5; display: flex; align-items: center; }
.mb-grid button {
  aspect-ratio: 1 / .95;
  border: 0;
  border-right: 1px solid var(--gray);
  border-bottom: 1px solid #eef0f2;
  background: var(--white);
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.mb-grid button { touch-action: none; }   /* 휴대폰에서 손가락으로 그릴 수 있게 (스크롤은 왼쪽 숫자 줄을 잡고) */
.mb-grid button.bar-start { border-top: 1px solid rgba(0,31,63,.35); }
.mb-grid button::after { content: ""; width: 46%; height: 62%; border-radius: 99px; background: var(--navy); transform: scale(0); transition: transform .15s; }
.mb-grid button.on::after { transform: scale(1); }
@media (hover: hover) { .mb-grid button:hover { background: #f3f4f6; } }
.mb-custom-btns { display: flex; gap: .5em; margin-top: .9em; }
.mb-custom-btns button { flex: 1; background: none; border: 1px solid var(--navy); color: var(--navy); padding: .45em 0; font: inherit; cursor: pointer; }
.mb-custom-btns button.on { background: var(--navy); color: var(--white); }

/* ----- 03 WHAT WE LOVE: 서사틀 + 클립 ----- */
.love {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5cqw;
  margin: 3cqh 7cqw 4cqh 8cqw;
  padding-left: 4cqw;
  border-left: 1px solid var(--navy);
  font-family: var(--font-main), "Pretendard", sans-serif;
}
.love-col { display: flex; flex-direction: column; }
.love-col:last-child { padding-top: 0; }
.love-item {
  position: relative;
  padding: 2.4cqh 0 3cqh;
  border-bottom: 1.5px solid var(--navy);
}
.love-col:first-child .love-item:last-child { margin-top: 4cqh; }
.love-head { display: flex; flex-direction: column; margin-bottom: 2cqh; }
.love-head b { font-size: 2.6cqw; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.love-head span { font-size: 1.05cqw; font-weight: 700; margin-top: 0.4em; letter-spacing: -0.035em; }
.love-body { max-width: 26em; font-size: 1cqw; line-height: 1.65; letter-spacing: -0.035em; }
.love-body p + p { margin-top: 0.8em; }
.love-body b { font-weight: 700; }

/* 클립: 종이 모서리를 집고 있는 것처럼 */
.clip {
  position: absolute;
  right: -1cqw;
  top: -2.2cqh;
  width: 11cqw;
  overflow: visible;
  transform: rotate(var(--tilt, 0deg)) translateY(-1.5cqh);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1), opacity 0.5s;
  transition-delay: calc(var(--i, 0) * 120ms + 0.15s);
  pointer-events: none;
}
.love-col:last-child .clip { right: 1cqw; }
.is-open .clip { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
.clip path { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.clip--navy path { stroke: var(--navy); }
.clip--gray path { stroke: var(--gray); }

/* ----- 세로 화면 ----- */
@media (max-aspect-ratio: 4 / 5) {
  .pf { margin: 2cqh 5cqw 3cqh; }
  .pf-win { width: 90cqw; }
  /* 휴대폰: 사진 옆에 이름, 그 아래 칸들 */
  .pf-win-body { display: grid; grid-template-columns: 34% 1fr; grid-template-areas: "photo title" "photo meta" "facts facts"; column-gap: 4.5cqw; padding: 7cqw 6cqw 6cqw; font-size: 12.5px; line-height: 1.6; letter-spacing: -0.035em; }
  .pf-win-photo { grid-area: photo; width: 100%; }
  .pf-win-info { display: contents; }
  .pf-title { grid-area: title; align-self: end; font-size: 2.2em; }
  .pf-meta { grid-area: meta; align-self: start; padding: 0.5em 0 0; border-bottom: 0; }
  .pf-facts { grid-area: facts; margin-top: 4.5cqw; padding-top: 4.5cqw; border-top: 1px solid var(--gray); }
  .pf-win { max-height: 86cqh; overflow-y: auto; }   /* 내용이 길면 창 안에서 스크롤 */
  .mb-jewel { width: 34cqw; margin-top: 8cqh; }
  .mb-meter { font-size: 2.8cqw; margin-top: 1cqh; }
  .mb-bar { width: 22cqw; }
  .mb-custom { left: 5cqw; right: 5cqw; width: auto; top: 1cqh; bottom: 8cqh; padding: 4cqw; font-size: 3cqw; }
  .mb-machine { width: 82cqw; margin-top: 2.5cqh; }
  .mb-strip { width: 55cqw; margin-top: -2.8cqw; margin-bottom: 7cqh; }
  .mb-caption { left: 6cqw; bottom: 2.5cqh; flex-direction: row; align-items: center; gap: 0.8em; font-size: 2.5cqw; }
  .love { display: flex; flex-direction: column; overflow-y: auto; margin: 2cqh 6cqw 3cqh 8cqw; padding-left: 5cqw; -webkit-overflow-scrolling: touch; }
  .love-col { display: contents; }
  .love-item { flex: none; padding: 3cqh 0 3.5cqh; margin-top: 0 !important; }
  .love-head b { font-size: 9cqw; }
  .love-head span { font-size: 3.6cqw; }
  .love-body { font-size: 3.4cqw; }
  .clip { width: 24cqw; right: -2cqw; top: -1cqh; }
  .love-head { padding-right: 26cqw; }
}


.pf-title .pf-sub { font-size: 0.34em; font-weight: 500; letter-spacing: -0.02em; margin-left: 0.35em; }

/* 프로필 창 사진: 회색 테두리 + 오른쪽 글 끝줄에 맞춰 세로로 늘어나요 (컴퓨터 화면) */
.pf-win-photo { border: 1px solid var(--gray); }
@media (min-aspect-ratio: 4 / 5) {
  .pf-win-photo { flex-basis: 44%; aspect-ratio: auto; align-self: stretch; }
  .pf-facts { margin-bottom: -0.3em; }   /* 마지막 줄 글자 아래 여백만큼 당겨서 사진 끝선과 딱 맞게 */
}

/* ===== 1번 프로필 창 + 안내 문구: 화면 크기가 바뀌어도 배치 고정 =====
   글자를 화면 크기 비율로만 정해서, 창을 줄이면 통째로 작아지기만 하고 줄바꿈은 그대로예요.
   (이 블록은 style.css 맨 아래에 있어야 해요) */
@media (min-aspect-ratio: 4 / 5) {
  .pf-hint { font-size: 0.9cqw; }
  .pf-win { width: 52cqw; }
  .pf-win-close { font-size: 1cqw; }
  .pf-win-photo:empty::after { font-size: 0.8cqw; }
  .pf-win-info { font-size: 1.05cqw; }
}
@media (max-aspect-ratio: 4 / 5) {
  .pf-win-body { font-size: 3.2cqw; }
  .pf-win-close { font-size: 3cqw; }
  .pf-hint, .pf-hint::after { font-size: 2.8cqw; }
}
@media (max-aspect-ratio: 4 / 5) and (hover: none) { .pf-hint { font-size: 0; } }

/* ===== 1번 프로필 창 + 안내 문구: 어떤 화면에서도 배치 고정 =====
   컴퓨터 창을 줄여도, 휴대폰으로 봐도 "사진 왼쪽 · 글 오른쪽" 배치 그대로 크기만 작아져요.
   (이 블록은 style.css 맨 아래에 있어야 해요) */
@media (min-aspect-ratio: 4 / 5) {
  .pf-hint { font-size: 0.9cqw; }
  .pf-win { width: 52cqw; }
  .pf-win-close { font-size: 1cqw; }
  .pf-win-photo:empty::after { font-size: 0.8cqw; }
  .pf-win-info { font-size: 1.05cqw; }
}
/* 세로 화면(휴대폰 등): 휴대폰용 배치를 끄고 컴퓨터 배치를 그대로 축소 */
@media (max-aspect-ratio: 4 / 5) {
  .pf-win { width: 94cqw; max-height: none; overflow: visible; }
  .pf-win-body { display: flex; grid-template-columns: none; grid-template-areas: none; gap: 4cqw; padding: 4.7cqw 5cqw 4.3cqw; font-size: 1.9cqw; }
  .pf-win-photo { grid-area: auto; width: auto; flex: 0 0 40%; aspect-ratio: auto; align-self: stretch; }
  .pf-win-info { display: flex; font-size: 1.9cqw; }
  .pf-title { grid-area: auto; align-self: auto; font-size: 2.6em; }
  .pf-meta { grid-area: auto; align-self: auto; padding: 0.9em 0 1.1em; border-bottom: 1px solid var(--gray); }
  .pf-facts { grid-area: auto; margin-top: 0; padding-top: 1.1em; border-top: 0; margin-bottom: -0.3em; }
  .pf-win-close { font-size: 1.8cqw; }
  .pf-win-photo:empty::after { font-size: 1.45cqw; }
  .pf-hint, .pf-hint::after { font-size: 2.8cqw; }
}
@media (max-aspect-ratio: 4 / 5) and (hover: none) { .pf-hint { font-size: 0; } }

/* ===== 1번: 누르는 자리 * 표시 ===== */
.pf-star { position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; transition: opacity .8s; }
.is-open .pf-star { opacity: 1; transition-delay: 2.4s; }           /* 테두리가 다 그려진 뒤 나타나요 */
.pf-star svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--navy); stroke-width: 2.8; stroke-linecap: round; transition: transform .7s cubic-bezier(.3,1.6,.5,1); }
.pf-star::before, .pf-star::after {                                    /* 반짝일 때 옆에 튀는 작은 별빛 */
  content: ""; position: absolute; width: 45%; height: 45%; background: var(--navy);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  transform: scale(0); pointer-events: none;
}
.pf-star::before { right: -38%; top: -38%; width: 58%; height: 58%; }
.pf-star::after  { left: -30%; bottom: -26%; width: 40%; height: 40%; }
.pf-star.is-lit svg { transform: rotate(90deg) scale(1.3); }
.pf-star.is-lit::before { animation: pfGlint 1.4s ease-in-out infinite; }
.pf-star.is-lit::after  { animation: pfGlint 1.4s ease-in-out .5s infinite; }
@keyframes pfGlint { 0%, 100% { transform: scale(0) rotate(0); } 40% { transform: scale(1) rotate(45deg); } 70% { transform: scale(0) rotate(90deg); } }

/* ===== 3번: 클립 이미지 + 줄 맞춤 ===== */
/* 01·02 / 03·04가 같은 높이에서 시작하도록 2줄짜리 격자로 */
@media (min-aspect-ratio: 4 / 5) {
  .love { grid-template-rows: auto auto; align-content: start; row-gap: 4cqh; }   /* 순서는 script.js가 번호대로 정해줘요 */
  .love-col { display: contents; }
  .love-col:first-child .love-item:last-child { margin-top: 0; }
}
/* 클립: 글 끝(오른쪽)에 맞추고 항목 세로 가운데, 글 뒤에 연하게 */
.love-item > :not(.clip) { position: relative; z-index: 1; }
.clip.clip-img {
  left: 26cqw; right: auto; top: 50%;
  width: auto; height: 82%;
  transform: translate(-100%, -50%) scale(.96);
}
.is-open .clip.clip-img { opacity: .2; transform: translate(-100%, -50%); }   /* 진하기: opacity 숫자 */
@media (max-aspect-ratio: 4 / 5) {
  .clip.clip-img { left: auto; right: 0; width: auto; height: 78%; transform: translate(0, -50%) scale(.96); }
  .is-open .clip.clip-img { transform: translate(0, -50%); }
  .love-head { padding-right: 0; }
}

/* ===== 글자를 드래그(선택)했을 때 색 ===== */
::selection { background: #001f3f; color: #ffffff; }
/* 남색 배경 화면에서는 반대로 (안 보이니까) */
.ticket-screen:not(.screen--light):not(.screen--profile) ::selection { background: #ffffff; color: #001f3f; }

/* ===== 1번 창 여백 줄이기 ===== */
.pf-win-body { padding: 1.6cqw 1.9cqw 1.6cqw; gap: 1.9cqw; }
@media (max-aspect-ratio: 4 / 5) { .pf-win-body { padding: 3cqw 3.4cqw 3cqw; gap: 3.4cqw; } }
.pf-win-close { top: 0.4em; right: 0.4em; }

/* ===== 3번: 구분선 길이 = 글 너비, 선 굵기 통일(1px) ===== */
.love-item { border-bottom-width: 1px; }
@media (min-aspect-ratio: 4 / 5) { .love-item { max-width: 26cqw; } }

/* ===== 3번: 기본 크기 키우기 + 01·02 / 03·04 사이 간격 좁히기 =====
   --k : 전체 배율 (1 = 원래 크기)  /  column-gap : 왼쪽·오른쪽 열 사이 간격 */
@media (min-aspect-ratio: 4 / 5) {
  .love { --k: 1.3; grid-template-columns: auto auto; justify-content: start; column-gap: 7cqw; }
  .love-item { width: calc(26cqw * var(--k)); max-width: none; padding: calc(2.4cqh * var(--k)) 0 calc(3cqh * var(--k)); }
  .love-head { margin-bottom: calc(2cqh * var(--k)); }
  .love-head b { font-size: calc(2.6cqw * var(--k)); }
  .love-head span { font-size: calc(1.05cqw * var(--k)); }
  .love-body { font-size: calc(1cqw * var(--k)); }
  .clip.clip-img { left: calc(26cqw * var(--k)); }
}

/* ===== 3번: 지그재그 배치 (오른쪽 열 02·04를 반 칸 아래로) =====
   --zig : 내려가는 정도 (50% = 항목 높이의 절반) */
@media (min-aspect-ratio: 4 / 5) {
  .love { --k: 1.12; --zig: 50%; row-gap: 7cqh; }
  .love-col:last-child .love-item { transform: translateY(var(--zig)); }
}
/* ===== 4번 CONTACT ===== */
/* 큰 글자 세 번째: 망점(점무늬)으로 채운 글자 */
.big.dotted {
  color: transparent;
  background-image: radial-gradient(circle, var(--gray) 46%, transparent 50%);
  background-size: 0.07em 0.07em;
  -webkit-background-clip: text;
          background-clip: text;
}
/* 이미지 띠 빈칸 글씨 */
.band-photo:empty::after { text-transform: none; letter-spacing: 0.08em; }
/* 배너(누르면 링크로 이동): 마우스를 올리면 살짝 밝아져요 */
.band-link { display: block; cursor: pointer; transition: opacity .25s; }
.band-link:hover, .band-link:focus-visible { opacity: .8; outline: none; }

/* ===== 4번: 전광판처럼 흐르는 글자 ===== */
.marquee { overflow: hidden; }
.marquee.band-body, .marquee.block { gap: 0; padding-left: 0; padding-right: 0; }
.mq-track { display: flex; flex: none; width: max-content; animation: mqLeft var(--dur, 30s) linear infinite; }
.marquee[data-marquee="right"] .mq-track { animation-name: mqRight; }
.mq-group { display: flex; flex: none; align-items: center; gap: var(--mq-gap); padding-right: var(--mq-gap); }
.band-body.marquee { --mq-gap: 2.4cqw; }
.block.marquee { --mq-gap: 3.2cqw; }
@keyframes mqLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes mqRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-aspect-ratio: 4 / 5) { .band-body.marquee { --mq-gap: 4cqw; } .block.marquee { --mq-gap: 5cqw; } }
/* 윈도우에서 "애니메이션 효과"를 꺼 둔 사람에게도 글자가 흐르도록, 움직임 줄이기 설정을 따르지 않아요 */

/* ===== 4번: backup 띠는 남색으로 꽉 채우기 (흰 여백 없이) ===== */
.band-body:has(> .block) { padding: 0; }
.band-body > .block { height: 100%; }

/* ===== 4번: 띠가 겹치는 부분 그림자 =====
   아래 띠가 위 띠 위에 살짝 얹힌 것처럼 위쪽으로 부드러운 그림자 */
.band { box-shadow: 0 -0.35cqh 0.9cqh rgba(0, 10, 25, .28), 0 0.25cqh 0.6cqh rgba(0, 10, 25, .18); }

/* 5번 띠(backup): 회색 배경 + 흰 글씨 */
.block--gray[data-marquee] { color: var(--white); }

.block--gray[data-marquee] { color: var(--white); background: #b9bbbf; }
/* ===== 4번: 마지막 띠 — X 링크 (테두리 필기체) ===== */
@font-face { font-family: "KMB Serif Italic"; src: url("fonts/kmb-serif-italic.woff") format("woff"); font-style: italic; font-weight: 400; font-display: swap; }
.band-x { justify-content: space-between; color: #b9bbbf; font-size: 0.82em; letter-spacing: 0.14em; cursor: pointer; transition: color .25s; }
.band-x > span { white-space: nowrap; }
.band-x-sc {
  font-family: "KMB Serif Italic", serif;     /* fonts 폴더의 글씨체 — 맥·윈도우·휴대폰 어디서나 똑같이 보여요 */
  font-style: italic;
  font-size: 4.6em;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: transparent;
  -webkit-text-stroke: 1px #b9bbbf;
  transition: -webkit-text-stroke-color .25s;
}
.band-x:hover, .band-x:focus-visible { color: var(--navy); outline: none; }
.band-x:hover .band-x-sc, .band-x:focus-visible .band-x-sc { -webkit-text-stroke-color: var(--navy); }
@media (max-aspect-ratio: 4 / 5) {
  .band-x { font-size: 0.62em; letter-spacing: 0.1em; padding: 0 3.5%; }
  .band-x-sc { font-size: 4.4em; }
}

/* 5번 띠(backup): 안내 문구만 흰 박스 + 남색 굵은 글씨 */
.bk-label { background: var(--white); color: #cacbce; font-weight: 700; padding: 0.5em 0.7em; line-height: 1.3; }

.big, .big.outline { color: #011f3ccc; -webkit-text-stroke-color: #011f3ccc; }
.big.outline { color: transparent; }
.big.dotted { background-image: radial-gradient(circle, #011f3ccc 46%, transparent 50%); }

/* ===== 4번: 왼쪽 아래 작은 문구 (2번 페이지 캡션과 같은 자리·크기) ===== */
.ct-caption { position: absolute; left: 4cqw; bottom: 4cqh; color: #ffffff; font-size: clamp(10px, 0.85cqw, 13px); letter-spacing: -0.02em; }
@media (max-aspect-ratio: 4 / 5) { .ct-caption { left: 6cqw; bottom: 2.5cqh; font-size: 2.5cqw; } }
/* ===== 2번: 발레리나 들어가는 모션 =====
   연주가 끝나면 정면을 볼 때까지 천천히 돌다가 멈추고 → 살짝 떠올랐다가 상자 안으로 쏙 → 그다음 뚜껑이 닫혀요 */
.musicbox.closing .mb-dancer { animation: mbSink 1s cubic-bezier(.5,0,.7,.4) forwards; }
@keyframes mbSink { 0% { transform: translateY(0); } 22% { transform: translateY(-5%); } 100% { transform: translateY(102%); } }
.mb-lid { transition: transform .9s cubic-bezier(.5,0,.25,1); }                          /* 닫힐 때: 부드럽게 */
.musicbox.is-open .mb-lid { transition: transform 1s cubic-bezier(.3,1.25,.4,1); }      /* 열릴 때: 통통 */

/* ===== 2번: 사각 보석함 (거울 뚜껑 + 퀼팅 안감 + 원형 무대) ===== */
.mb-l-panel { fill: var(--white); stroke: var(--navy); stroke-width: 1.6; }
.mb-l-mirror { fill: var(--gray); stroke: var(--navy); stroke-width: 1; }
.mb-l-shine { fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; }
.mb-b-rim, .mb-b-front { fill: var(--white); stroke: var(--navy); stroke-width: 1.6; }
.mb-b-tray { fill: var(--gray); stroke: var(--navy); stroke-width: 1; }
.mb-b-quilt path { stroke: var(--navy); stroke-width: .5; opacity: .35; }
.mb-b-dots circle { fill: var(--navy); opacity: .45; }
.mb-b-stage { fill: var(--white); stroke: var(--navy); stroke-width: 1; }
.mb-b-inset { fill: none; stroke: var(--navy); stroke-width: .8; }
.mb-b-pull { fill: var(--navy); }
.mb-b-feet { fill: var(--white); stroke: var(--navy); stroke-width: 1.4; }
.mb-lid-flat path, .mb-lid-flat rect { fill: var(--white); stroke: var(--navy); stroke-width: 1.6; }

/* 뚜껑 여닫기: 닫힌 뚜껑이 사라지면서 거울 뚜껑이 뒤쪽 경첩에서 세워져요 */
.mb-lid-up { transform-box: view-box; transform-origin: 120px 128px; transform: scaleY(.06); opacity: 0;
  transition: transform .75s cubic-bezier(.5,0,.25,1), opacity .2s .55s; }
.musicbox.is-open .mb-lid-up { transform: scaleY(1); opacity: 1; transition: transform .9s cubic-bezier(.3,1.3,.45,1) .12s, opacity .12s .1s; }
.mb-lid-flat { transition: opacity .15s .7s; }
.musicbox.is-open .mb-lid-flat { opacity: 0; transition: opacity .12s; }
.mb-lid-svg { z-index: 2; }

/* 발레리나: 원형 무대 위에 서요 (무대 높이 = 상자 아래에서 41%) */
.mb-dancer-wrap { bottom: 40.9%; height: 47.8%; width: 44%; }


/* ===== 1번 스탬프 크기 · 안내 글씨 크기 통일 ===== */
.pick { width: 5.2cqw; min-width: 52px; }
.pick-pop { top: calc(5cqh + 6.4cqw); }
@media (max-aspect-ratio: 4 / 5) { .pick { width: 11cqw; } .pick-pop { top: calc(3.5cqh + 13.5cqw); } }
.pf-hint, .ct-caption { font-size: clamp(10px, 0.85cqw, 13px); letter-spacing: -0.02em; }
.pf-hint::after { content: none !important; }
@media (max-aspect-ratio: 4 / 5) { .pf-hint, .ct-caption { font-size: 2.5cqw; } }
.pf-hint { opacity: 1; }

/* ===== 2번: 오르골 판 + 크랭크 손잡이 + 악보 (상자–글씨–판–악보 한 줄 가운데 정렬) ===== */
.mb-jewel { width: 18.3cqw; }                                   /* 판 폭 = 상자 폭에 맞춰 상자를 키웠어요 */
.mb-mech { position: relative; z-index: 1; flex: 1; min-height: 0; width: 44.08cqw; margin-top: 2.4cqh; display: flex; flex-direction: column; align-items: center; }
.mb-plate { position: relative; z-index: 2; width: 100%; flex: none; }
.mb-plate svg { display: block; width: 100%; height: auto; overflow: visible; }
.mb-mech .mb-strip { flex: 1; width: 50.94%; margin-top: -0.943%; }  /* 악보 종이 폭 = 판 폭 (빗살 15개 + 양옆 여백, 조절하지 마세요) */
.mb-rod-out { fill: none; stroke: var(--navy); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mb-rod-in  { fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mb-washer { fill: var(--white); stroke: var(--navy); stroke-width: 1; }
.mb-grip { fill: var(--white); stroke: var(--navy); stroke-width: 1.2; }
.mb-grip-end { fill: none; stroke: var(--navy); stroke-width: .8; opacity: .45; }
.mb-grip-shine { stroke: var(--white); stroke-width: 1.4; stroke-linecap: round; }
.mb-crank { position: absolute; left: 81.1%; top: -10%; width: 18.9%; height: 120%; padding: 0; background: none; border: 0; cursor: grab; touch-action: none; }
.mb-crank:active { cursor: grabbing; }
.mb-crank:focus-visible { outline: none; }
.mb-plate:has(.mb-crank:hover) .mb-grip, .mb-plate:has(.mb-crank:focus-visible) .mb-grip { fill: #f3f4f6; }
@media (max-aspect-ratio: 4 / 5) {
  .mb-jewel { width: 34cqw; }                                   /* 휴대폰 상자 크기는 그대로 */
  .mb-mech { width: 86.06cqw; margin-top: 2.5cqh; }
  .mb-mech .mb-strip { margin-bottom: 7cqh; }
}

/* 2번: 발레리나 크기 (height 숫자만 바꾸면 커지고 작아져요. 원래 47.8%) */
.mb-dancer-wrap { height: 38%; }

/* ===== 2번: 글자 판 (칸이 뚫린 판 + kissmissbass 글자 + 음 이름 줄) ===== */
.mb-plate text { font-family: var(--font-main); font-size: 7px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.mb-tooth { fill: var(--white); stroke: var(--navy); stroke-width: .6; transition: fill .5s; }
.mb-tooth.hit { fill: var(--navy); transition: none; }
.mb-rule { stroke: var(--navy); stroke-width: .5; opacity: .3; }
.mb-paw { fill: var(--navy); }
.mb-letter { transform-box: fill-box; transform-origin: center; transform: scale(.4); opacity: 0; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .15s; }
.mb-letter rect { fill: var(--white); stroke: var(--navy); stroke-width: .6; }
.mb-letter text { fill: var(--navy); }
.mb-letter.on { transform: none; opacity: 1; }
.mb-letter.on.out { opacity: 0; transition: opacity .9s ease; }   /* 사라질 때: 스르르 */

/* ===== 3번: 타임라인 =====
   PC: 가운데 가로줄 + 위(01·03)·아래(02·04)로 번갈아 놓인 항목
   휴대폰: 왼쪽 세로줄 + 오른쪽으로만 뻗는 선, 한 줄로 정렬
   --u : 기준 단위 (PC는 1440 폭, 휴대폰은 390 폭 기준 1px) */
.screen--light .ticket-top { position: relative; z-index: 3; }   /* close 버튼이 항상 눌리게 */
.screen--light .love {
  --u: calc(100cqw / 1440);
  --top: calc(96 * var(--u));                                  /* 위 제목줄 아래부터 */
  --line: calc(357 * var(--u));                                /* 가로줄 높이 (타임라인 영역 안에서) */
  --gap: 520;                                                  /* 항목 사이 간격 */
  --end: calc((150 + 3 * var(--gap) + 500) * var(--u));        /* 오른쪽 끝 (가로 스크롤 길이) */
  position: absolute; left: 0; right: 0; top: var(--top); bottom: 0;
  margin: 0; padding: 0; border: 0; display: block;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none;                                       /* 스크롤바는 숨겨요 (휠·드래그로 넘겨요) */
}
.screen--light .love::-webkit-scrollbar { display: none; }
.screen--light .love::before {                                 /* 가로 큰 줄 (스크롤 끝까지) */
  content: ""; position: absolute; left: 4cqw; width: calc(var(--end) - 4cqw); top: var(--line); height: 1.5px; background: var(--navy);
}
.screen--light .love::after {                                  /* 오른쪽 끝 여백 */
  content: ""; position: absolute; left: var(--end); top: 0; width: 4cqw; height: 1px;
}
.screen--light .love-col { display: contents; }
.screen--light .love-item {
  --x: calc((150 + (var(--n) - 1) * var(--gap)) * var(--u));  /* 점·선의 가로 위치 */
  position: absolute; left: calc(var(--x) + 22 * var(--u)); width: calc(420 * var(--u));   /* 글 폭 */
  display: flex; flex-direction: column; padding: 0; margin: 0; border: 0; max-width: none; transform: none !important;
  color: var(--navy);
}
.screen--light .love-item.up   { bottom: calc(100% - var(--line) + 22 * var(--u)); justify-content: flex-end; }
.screen--light .love-item.down { top: calc(var(--line) + 22 * var(--u)); }

/* 이어지는 선 + 줄 위의 점 */
.screen--light .love-item::after {
  content: ""; position: absolute; z-index: 0; left: calc(-27 * var(--u)); width: calc(10 * var(--u)); height: calc(310 * var(--u));   /* 동그라미 가운데까지 */
  background:
    radial-gradient(circle, var(--navy) 0 calc(3.6 * var(--u)), transparent calc(4.2 * var(--u))) no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 1.5px 100% no-repeat;
  background-size: calc(10 * var(--u)) calc(10 * var(--u)), 1.5px 100%;
}
.screen--light .love-item.up::after   { bottom: calc(-22 * var(--u)); background-position: 50% 100%, center; }
.screen--light .love-item.down::after { top: calc(-22 * var(--u));    background-position: 50% 0, center; }

/* 남색 동그라미 + 안의 그림(하얗게) */
.screen--light .love-head { display: contents; }
.screen--light .love-head::before {
  content: ""; position: absolute; left: calc(-62 * var(--u)); width: calc(80 * var(--u)); height: calc(80 * var(--u));
  border-radius: 50%; background: var(--navy); z-index: 1;   /* 선 위에 겹쳐요 */
}
.screen--light .love .clip.clip-img {
  position: absolute; left: calc(-67 * var(--u)); right: auto; width: calc(90 * var(--u)); height: calc(75 * var(--u)); max-width: none;
  filter: brightness(0) invert(1); z-index: 2; opacity: 1; transform: none; transition: none;
}
.screen--light .love-item.up .love-head::before   { bottom: calc(248 * var(--u)); }
.screen--light .love-item.up .clip.clip-img       { bottom: calc(250.5 * var(--u)); top: auto; }
.screen--light .love-item.down .love-head::before { top: calc(248 * var(--u)); }
.screen--light .love-item.down .clip.clip-img     { top: calc(250.5 * var(--u)); }

/* 글: 제목 · 본문 (번호는 숨겨요 — 순서 정하는 데만 써요) */
.screen--light .love-head b {
  order: 0; display: none; width: auto; margin: 0 0 calc(10 * var(--u));
  font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: 0.24em; line-height: 1; color: var(--navy);
}
.screen--light .love-head span {
  order: 1; display: block; margin: 0 0 calc(12 * var(--u));
  font-size: calc(30 * var(--u)); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--navy);
}
.screen--light .love-body {
  order: 2; position: static; width: auto; max-width: none;
  font-size: calc(13 * var(--u)); line-height: 1.6; letter-spacing: -0.035em; color: var(--navy);
}
.screen--light .love-body p + p { margin-top: .6em; }

/* ----- 휴대폰: 왼쪽 세로줄, 오른쪽으로만 뻗는 선, 한 줄 ----- */
@media (max-aspect-ratio: 4 / 5) {
  .screen--light .love {
    --u: calc(100cqw / 390);
    top: calc(80 * var(--u)); display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: calc(44 * var(--u)) 0 calc(60 * var(--u));
    background: linear-gradient(var(--navy), var(--navy)) calc(36 * var(--u)) 0 / 1.5px 100% no-repeat; background-attachment: local;
  }
  .screen--light .love::before, .screen--light .love::after { content: none; }
  .screen--light .love-item.up, .screen--light .love-item.down {
    position: relative; left: auto; top: auto; bottom: auto; flex: none; order: var(--n);
    width: calc(290 * var(--u)); margin: 0 0 calc(52 * var(--u)) calc(60 * var(--u)); padding-top: calc(48 * var(--u));
    justify-content: flex-start; text-align: left;
  }
  /* 가로 선: 세로줄의 점 → 오른쪽 끝 동그라미 */
  .screen--light .love-item.up::after, .screen--light .love-item.down::after {
    top: calc(-5 * var(--u)); bottom: auto; left: calc(-29 * var(--u)); width: calc(299 * var(--u)); height: calc(10 * var(--u));
    background:
      radial-gradient(circle, var(--navy) 0 calc(3.6 * var(--u)), transparent calc(4.2 * var(--u))) no-repeat,
      linear-gradient(var(--navy), var(--navy)) center / 100% 1.5px no-repeat;
    background-size: calc(10 * var(--u)) calc(10 * var(--u)), 100% 1.5px;
    background-position: 0 50%, center;
  }
  .screen--light .love-item.up .love-head::before, .screen--light .love-item.down .love-head::before {
    left: calc(242 * var(--u)); top: calc(-28 * var(--u)); bottom: auto; width: calc(56 * var(--u)); height: calc(56 * var(--u));
  }
  .screen--light .love-item.up .clip.clip-img, .screen--light .love-item.down .clip.clip-img {
    left: calc(238 * var(--u)); top: calc(-26.5 * var(--u)); bottom: auto; width: calc(64 * var(--u)); height: calc(53 * var(--u));
  }
  .screen--light .love-head b { font-size: calc(11 * var(--u)); }
  .screen--light .love-head span { font-size: calc(21 * var(--u)); }      /* 휴대폰 제목 크기 */
  .screen--light .love-body { font-size: calc(9 * var(--u)); }           /* 휴대폰 본문 크기 */
  .screen--light .love-item.up, .screen--light .love-item.down { margin-bottom: calc(44 * var(--u)); padding-top: calc(42 * var(--u)); }
}

/* ===== 2번: 무한 버전 (data-mode="infinite") — 보석함·게이지 숨기고 오르골만 ===== */
.musicbox[data-mode="infinite"] .mb-jewel,
.musicbox[data-mode="infinite"] .mb-meter { display: none; }
.musicbox[data-mode="infinite"] .mb-mech { margin-top: 12cqh; }
@media (max-aspect-ratio: 4 / 5) { .musicbox[data-mode="infinite"] .mb-mech { margin-top: 8cqh; } }

/* ===== 1번 about us 창: 오른쪽 빈 여백 줄이기 (창 폭만 좁혀요) ===== */
@media (min-aspect-ratio: 4 / 5) { #win-about { width: 46.5cqw; } #win-about .pf-win-photo { flex-basis: 49.6%; } }   /* 사진 크기는 그대로, 글 쪽만 좁혀요 */
@media (max-aspect-ratio: 4 / 5) { #win-about { width: 84cqw; } #win-about .pf-win-photo { flex-basis: 45.4%; } }

/* ===== 1번 koyub1n · moonsi0 창: 이름(고유빈 24y · Bassist)이 위로 떠 보이지 않게 아래로 =====
   이름 위 여백을 늘리고, 이름 아래 빈 칸 여백은 줄여서 구분선 위치는 그대로예요. */
#win-koyub1n .pf-title, #win-moonsi0 .pf-title { padding-top: 0.35em; }
#win-koyub1n .pf-meta, #win-moonsi0 .pf-meta { padding-top: 0; }

/* 1번 about us: D+N 표시 */
.pf-dday { font-weight: 700; margin-left: 0.3em; }

/* 2번 휴대폰: sound / custom 버튼이 악보 영역에 가려져 안 눌리던 것 고침 */
.mb-caption { z-index: 5; }

/* 커스텀 악보: 쓸어 그리는 동안은 점이 바로 나타나게 (지연 없이) */
.mb-grid.painting button::after { transition: none; }

/* 첫 화면 휴대폰: 남색 네모를 조금 작게 */
@media (hover: none) { .hs-square { inset: 29%; } }