/* v12 web fonts ---------------------------------------------------------
   - a고딕 -> Pretendard Variable
   - 경기천년제목 / 개미똥꾸멍 -> licensed webfont CDN
   - 210 처음처럼 -> Adobe Fonts kit dml0ldy (index.html)
------------------------------------------------------------------------ */
@font-face {
  font-family: "Gyeonggi Millennium Title Web";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gyeonggi Millennium Title Web";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gyeonggi Millennium Title Web";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gyeonggi Millennium Title Web";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/TitleV.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangSangAnt Web";
  src: url("https://cdn.jsdelivr.net/gh/sweetherofonts/fontshero_pack3/sangsangant/sangsangant-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #fff1d6;
  --ink: #131a52;
  --card: #f3e5e8;
  --gold: #f4c845;
  --deep: #171b55;
  --deep2: #2f2870;
  --line: rgba(255,255,255,.24);
  --screen-w: 390px;
  --font-ui: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", system-ui, sans-serif;
  --font-title: "Gyeonggi Millennium Title Web", "경기천년제목OTF", "Baekmuk Headline", "Noto Serif KR", "Noto Serif CJK KR", "AppleMyungjo", "Batang", serif;
  --font-quote: "SangSangAnt Web", "상상토끼 개미똥꾸멍", "UnPen", "NanumMyeongjo", serif;
  --font-cheoeum-adobe: "210 Cheoeumcheoreom";
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:#0d113a; }
body {
  font-family: var(--font-ui);
  color:#fff;
  display:flex;
  justify-content:center;
  min-height:100dvh;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible {
  outline:3px solid #fff4c8;
  outline-offset:3px;
}
body.modal-open { overflow:hidden; }
.app-shell {
  position:relative;
  width:min(100vw, var(--screen-w));
  min-height:100dvh;
  overflow-x:hidden;
  background:#161b54;
  box-shadow:0 0 44px rgba(0,0,0,.35);
}
.screen {
  display:none;
  position:relative;
  width:100%;
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% auto;
  animation:screenIn .34s ease both;
}
.screen.is-active { display:block; }
@keyframes screenIn { from {opacity:0; transform:translateY(5px)} to {opacity:1; transform:none} }

.screen-intro {
  min-height:844px;
  background-image:-webkit-image-set(url('assets/bg/intro@1x.webp') 1x, url('assets/bg/intro@2x.webp') 2x, url('assets/bg/intro@3x.webp') 3x);
  background-image:image-set(url('assets/bg/intro@1x.webp') 1x, url('assets/bg/intro@2x.webp') 2x, url('assets/bg/intro@3x.webp') 3x);
  text-align:center;
}
.intro-copy { padding-top:260px; }
.intro-copy h1,
.song-heading h2,
.mood-heading h2,
.result-heading {
  margin:0;
  font-family:var(--font-title);
  font-weight:800;
  color:#fff0c8;
  letter-spacing:-.035em;
  text-shadow:0 3px 1px rgba(69,35,30,.7), 0 7px 12px rgba(0,0,0,.25);
}
.intro-copy h1 { font-size:59px; line-height:1.08; }
.intro-copy p {
  margin:22px 0 0;
  font-family:var(--font-ui);
  font-size:19px;
  line-height:1.45;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.35);
}
.primary-btn {
  border:1.5px solid rgba(246,192,41,.85);
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
}
.intro-btn {
  position:absolute;
  top:587px;
  left:40px;
  width:312px;
  height:61px;
  border:none;
  background:linear-gradient(100deg,#ffe39c 0%,#ffdf8a 100%);
  color:#101849;
  font-family:var(--font-cheoeum-adobe), "210 Cheoeumcheoreom", "210 처음처럼", var(--font-ui);
  font-size:32px;
  box-shadow:0 5px 14px rgba(19,12,50,.25);
}
.intro-btn:active { transform:scale(.985); }

.screen-song, .screen-mood { min-height:844px; }
.screen-song {
  background-image:-webkit-image-set(url('assets/bg/song@1x.webp') 1x, url('assets/bg/song@2x.webp') 2x, url('assets/bg/song@3x.webp') 3x);
  background-image:image-set(url('assets/bg/song@1x.webp') 1x, url('assets/bg/song@2x.webp') 2x, url('assets/bg/song@3x.webp') 3x);
}
.screen-mood {
  background-image:-webkit-image-set(url('assets/bg/mood@1x.webp') 1x, url('assets/bg/mood@2x.webp') 2x, url('assets/bg/mood@3x.webp') 3x);
  background-image:image-set(url('assets/bg/mood@1x.webp') 1x, url('assets/bg/mood@2x.webp') 2x, url('assets/bg/mood@3x.webp') 3x);
}

/* 844px 원본 구도는 유지하되, 세로가 긴 기기에서는 cover로 자연스럽게 화면을 채운다.
   image-set으로 DPR 1/2/3에 맞는 배경을 선택해 고밀도 모바일에서의 흐림을 줄인다. */
.screen-intro,
.screen-song,
.screen-mood {
  min-height:max(844px, 100dvh);
  background-size:cover;
  background-position:top center;
}
.step-header {
  height:112px;
  display:flex;
  align-items:flex-start;
  padding:60px 28px 0;
  gap:13px;
  position:relative;
}
.back-btn {
  position:absolute;
  left:22px;
  top:49px;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font-size:40px;
  line-height:35px;
  cursor:pointer;
  z-index:3;
}
.progress {
  height:10px;
  border-radius:999px;
  background:rgba(214,217,236,.44);
  margin-left:48px;
  width:238px;
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
}
.progress-fill { display:block; height:100%; background:#f7f2df; border-radius:inherit; }
.progress-fill.step1 { width:38%; }
.progress-fill.step2 { width:63%; }
.step-count { font-size:14px; margin-top:-4px; white-space:nowrap; }
.song-heading { text-align:center; margin-top:29px; }
.song-heading h2 { font-size:41px; line-height:1.02; }
.song-heading p { margin:6px 0 0; font-size:15px; color:#fff; }
.song-grid {
  margin:25px auto 0;
  width:324px;
  display:grid;
  grid-template-columns:repeat(2, 150px);
  gap:24px 24px;
}
.song-card {
  width:150px;
  height:150px;
  border:2px solid transparent;
  border-radius:14px;
  background:#f4e6e9;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.09);
  transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease, border-color .22s ease;
}
.song-card img { width:138px; height:94px; object-fit:contain; transition:transform .22s ease; }
.song-card:hover { transform:translateY(-2px); }
.song-card.is-selected {
  border-color:#ffd35b;
  box-shadow:0 0 0 3px rgba(255,211,91,.22), 0 0 24px rgba(255,210,74,.72);
  transform:scale(1.025);
}
.song-card.is-selected img { transform:scale(1.055); }
.song-grid.has-selection .song-card:not(.is-selected) { opacity:.58; transform:scale(.98); }
.song-note { margin:18px 0 0; text-align:center; font-size:14px; color:#f4e8f0; }

.mood-heading { text-align:center; margin-top:17px; }
.mood-heading h2 { font-size:42px; line-height:1.01; }
.mood-list {
  width:338px;
  margin:25px auto 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mood-card {
  width:100%;
  height:76px;
  padding:0 12px;
  border:2px solid transparent;
  border-radius:12px;
  background:#f3e5e8;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  color:#101854;
  cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
}
.mood-card:hover { transform:translateY(-1px); }
.mood-card img { width:48px; height:48px; object-fit:contain; flex:0 0 48px; }
.mood-card span { font-family:var(--font-ui); font-size:17px; line-height:1.38; font-weight:800; letter-spacing:-.04em; }
.mood-card.is-selected {
  border-color:#ffd45a;
  box-shadow:0 0 0 3px rgba(255,212,90,.2), 0 0 20px rgba(255,208,70,.55);
  transform:scale(1.015);
}
.mood-list.has-selection .mood-card:not(.is-selected) { opacity:.58; }

.screen-result {
  min-height:max(1300px, 100dvh);
  /* 화면이 길어져도 별도의 경계가 보이지 않도록, 결과 배경 아래에는
     원본 밤하늘 색을 이어받은 연속 그라데이션을 깐다. */
  background:linear-gradient(180deg,#29266d 0%,#403070 55%,#36296c 76%,#282363 100%);
  overflow:hidden;
}
.screen-result::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  aspect-ratio:390 / 1300;
  z-index:0;
  pointer-events:none;
  background-image:-webkit-image-set(url('assets/bg/result@1x.webp') 1x, url('assets/bg/result@2x.webp') 2x, url('assets/bg/result@3x.webp') 3x);
  background-image:image-set(url('assets/bg/result@1x.webp') 1x, url('assets/bg/result@2x.webp') 2x, url('assets/bg/result@3x.webp') 3x);
  background-size:100% 100%;
  background-position:top center;
  background-repeat:no-repeat;
  /* 원본 하단의 분홍빛 곡선/억새가 갑자기 끊겨 보이지 않도록
     약 900px 이후부터 천천히 투명해져 아래 그라데이션과 섞인다. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.96) 73%,rgba(0,0,0,.72) 82%,rgba(0,0,0,.28) 91%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.96) 73%,rgba(0,0,0,.72) 82%,rgba(0,0,0,.28) 91%,transparent 100%);
}
.result-wrap {
  position:relative;
  z-index:1;
  min-height:max(1300px, 100dvh);
  padding-top:75px;
  padding-bottom:max(96px, calc(72px + env(safe-area-inset-bottom)));
}
.result-heading { text-align:center; font-size:43px; line-height:1.06; }
.main-result { text-align:center; margin-top:24px; }
.cover-frame {
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#2c2b6d,#734e90 55%,#d79ab1);
}
.main-cover-frame {
  width:350px;
  height:500px;
  margin:0 auto;
  border-radius:18px;
  box-shadow:0 0 16px rgba(255,248,221,.62), 0 10px 28px rgba(0,0,0,.34);
}
.cover-image { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:2; }
.cover-image.is-missing { display:none; }
.cover-fallback {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
  text-align:center;
  color:#fff5dd;
  font-size:27px;
  font-weight:900;
  line-height:1.25;
  z-index:1;
  background:
    radial-gradient(circle at 70% 20%,rgba(255,232,151,.35) 0 9%,transparent 10%),
    linear-gradient(155deg,#10184e 0%,#2d2a72 45%,#9f628d 100%);
}
.cover-fallback::before { content:'🌕'; position:absolute; top:44px; right:34px; font-size:58px; opacity:.65; }
.adult-badge {
  position:absolute;
  right:10px;
  top:10px;
  z-index:4;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#df5e67;
  border:2px solid #fff;
  color:#fff;
  font-weight:900;
  line-height:32px;
  font-size:16px;
}
.result-work-title { margin:15px 20px 4px; color:#fff9e8; font-size:17px; font-weight:800; line-height:1.35; }
.result-work-title, .similar-card p, .mood-card span { word-break:keep-all; overflow-wrap:break-word; }
.result-quote {
  margin:7px auto 14px;
  width:330px;
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff1d6;
  font-family:var(--font-quote);
  font-size:24px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.025em;
  text-shadow:0 2px 4px rgba(0,0,0,.35);
  word-break:keep-all;
  overflow-wrap:break-word;
  text-wrap:pretty;
  flex-direction:column;
}
.result-quote .quote-sentence { display:block; width:100%; text-align:center; }
.result-link-btn {
  width:350px;
  height:56px;
  color:#fff;
  font-family:var(--font-ui);
  font-size:24px;
  background:linear-gradient(100deg,#3d4c99,#39458f 65%,#2e397f);
  box-shadow:0 7px 14px rgba(13,15,60,.24);
}
.result-link-btn span { font-size:34px; vertical-align:-2px; margin-left:5px; }
.result-actions { width:350px; margin:22px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.secondary-btn {
  height:49px;
  border-radius:999px;
  border:1.4px solid #f3bf35;
  background:#3a4389;
  color:#fff;
  font-size:17px;
  font-weight:800;
  cursor:pointer;
}
.secondary-btn:first-child { background:#363b77; }
.secondary-btn:active,.result-link-btn:active { transform:scale(.985); }
.similar-section { width:350px; margin:45px auto 0; }
.similar-section h3 { margin:0 0 16px; font-size:21px; color:#fff; font-weight:900; }
.similar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.similar-card { color:#fff; text-decoration:none; cursor:pointer; min-width:0; text-align:center; }
.similar-card { border:0; padding:0; background:transparent; }
.similar-cover {
  width:100%;
  aspect-ratio:96 / 140;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  position:relative;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.similar-cover .cover-fallback { font-size:13px; padding:9px; }
.similar-cover .cover-fallback::before { font-size:22px; top:12px; right:9px; }
.similar-card p { margin:8px -5px 0; font-size:14px; line-height:1.25; min-height:35px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.similar-card .adult-badge { width:27px; height:27px; line-height:23px; font-size:11px; right:5px; top:5px; }

.quote-reveal {
  position:absolute;
  inset:0;
  z-index:30;
  min-height:100%;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,232,155,.25),transparent 23%),
    linear-gradient(rgba(11,14,57,.88),rgba(44,30,86,.94));
  backdrop-filter:blur(5px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
}
.quote-reveal[hidden] { display:none; }
.quote-reveal-inner { width:330px; text-align:center; color:#fff1d6; animation:quoteIn .55s ease both; }
.quote-reveal-inner p { margin:2px 0; font-family:var(--font-quote); font-size:28px; line-height:1.52; font-weight:700; word-break:keep-all; overflow-wrap:break-word; text-wrap:pretty; }
.quote-reveal-inner .quote-sentence { display:block; width:100%; text-align:center; }
.quote-mark { font-family:serif; font-size:44px; opacity:.85; display:block; height:35px; }
.quote-mark.end { margin-top:8px; }
@keyframes quoteIn { from {opacity:0; transform:scale(.97) translateY(10px)} to {opacity:1; transform:none} }

.modal-backdrop {
  position:fixed;
  z-index:80;
  inset:0;
  background:rgba(4,6,28,.68);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal-backdrop[hidden] { display:none; }
.modal { width:min(342px,100%); background:#fff8f1; color:#171d53; border-radius:22px; padding:26px 22px 20px; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.modal-badge { width:48px; height:48px; border-radius:50%; margin:0 auto 12px; background:#e46b70; color:#fff; display:grid; place-items:center; font-weight:900; font-size:20px; border:3px solid #ffd8d5; }
.modal h2 { margin:0; font-size:19px; line-height:1.35; }
.modal p { margin:9px 0 20px; color:#55597d; font-size:14px; }
.modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modal-btn { height:44px; border-radius:12px; border:0; font-weight:800; cursor:pointer; }
.modal-btn.cancel { background:#ecebf2; color:#333858; }
.modal-btn.confirm { background:#313a83; color:#fff; }

.debug-panel {
  position:fixed;
  z-index:100;
  right:10px;
  bottom:10px;
  width:min(420px,calc(100vw - 20px));
  max-height:44vh;
  overflow:auto;
  padding:12px;
  border-radius:12px;
  background:rgba(0,0,0,.84);
  color:#dfffe0;
  font:12px/1.45 monospace;
  white-space:pre-wrap;
}

@media (max-width:389px) {
  .intro-copy h1 { font-size:54px; }
  .intro-btn { left:10%; width:80%; }
  .song-grid { width:calc(100% - 60px); grid-template-columns:1fr 1fr; gap:20px; }
  .song-card { width:100%; }
  .mood-list,.result-actions,.similar-section { width:calc(100% - 40px); }
  .main-cover-frame,.result-link-btn { width:calc(100% - 40px); }
  .main-cover-frame { height:auto; aspect-ratio:7 / 10; }
  .mood-card span { font-size:16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}