/* 냥이 옛날이야기
   원화가 화면을 꽉 채우고, 아래에 대사 상자. 밤 이야기라 늘 어두운 화면을 쓴다. */
:root {
  --bg: #0f1222;
  --ink: #f4f1ea;
  --sub: #b9b6c9;
  --line: #2a2d45;
  --panel: rgba(14, 16, 32, 0.78);
  --dosa: #ff9b45;
  --sul: #b58cff;
  --gold: #ffcf6b;
  --display: "Gowun Batang", "AppleMyungjo", "Batang", serif;
  --game: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --body: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color-scheme: dark;
}
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.stage { max-width: 520px; margin: 0 auto; background: #05060c; }
.view { position: absolute; inset: 0; }
.noscript { padding: 24px; }

/* ---- 원화 층 */
.art { position: absolute; inset: 0; overflow: hidden; background: #05060c; }
.art .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.art .layer.on { opacity: 1; }
.art .layer.slow { transition-duration: 1.4s; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; -webkit-user-drag: none; }
.art .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #8a87a6; font-family: var(--game); font-size: 22px;
  background: radial-gradient(circle at 50% 35%, #2a2f55, #0b0d1a 70%); }
.art .ph.now { background: radial-gradient(circle at 50% 35%, #5a3d22, #160e08 70%); }
.layer.m-in img { animation: m-in 16s ease-out forwards; }
.layer.m-out img { animation: m-out 16s ease-out forwards; }
.layer.m-left img { animation: m-left 18s ease-in-out forwards; }
.layer.m-right img { animation: m-right 18s ease-in-out forwards; }
.layer.m-up img { animation: m-up 18s ease-out forwards; }
.layer.m-shake img { animation: m-shake .5s ease-out, m-in 16s .5s ease-out forwards; }
@keyframes m-in { from { transform: scale(1.03); } to { transform: scale(1.13); } }
@keyframes m-out { from { transform: scale(1.16); } to { transform: scale(1.04); } }
@keyframes m-left { from { transform: scale(1.12) translateX(2.5%); } to { transform: scale(1.12) translateX(-2.5%); } }
@keyframes m-right { from { transform: scale(1.12) translateX(-2.5%); } to { transform: scale(1.12) translateX(2.5%); } }
@keyframes m-up { from { transform: scale(1.12) translateY(3%); } to { transform: scale(1.12) translateY(-2%); } }
@keyframes m-shake { 0%, 100% { transform: scale(1.06); } 20% { transform: scale(1.06) translate(-1.5%, 1%); } 40% { transform: scale(1.06) translate(1.5%, -1%); } 60% { transform: scale(1.06) translate(-1%, .5%); } 80% { transform: scale(1.06) translate(.8%, 0); } }
/* 과거 장면으로 넘어갈 때 물결처럼 흐려졌다 맑아진다 */
.art .layer.dream { transition: opacity 1.6s ease, filter 1.6s ease; filter: blur(14px) brightness(1.6); }
.art .layer.dream.on { filter: none; }

.vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(0,0,0,.45) 100%), linear-gradient(to bottom, rgba(0,0,0,.35), transparent 16%, transparent 58%, rgba(5,6,14,.82) 100%); }
.candle { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity 1s;
  background: radial-gradient(circle at 50% 55%, rgba(255,170,80,.75), transparent 60%); }
.candle.on { opacity: 1; animation: flicker 2.6s infinite; }
@keyframes flicker { 0%, 100% { opacity: .85; } 30% { opacity: 1; } 45% { opacity: .7; } 60% { opacity: .95; } 80% { opacity: .78; } }
.flash { position: absolute; inset: 0; background: #e8f0ff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { opacity: 0; } 6% { opacity: .9; } 14% { opacity: .1; } 22% { opacity: .7; } 100% { opacity: 0; } }
.blackout { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s; }
.blackout.on { opacity: 1; }
canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
canvas.fog { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; transition: opacity 1s; }

/* ---- 위쪽 막대 */
.bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 8px; z-index: 5; transition: opacity .3s; }
.bar .grow { flex: 1; }
.ibtn { height: 38px; min-width: 38px; padding: 0 10px; border-radius: 12px; border: 0; background: rgba(10,12,26,.55); color: #fff; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ibtn svg { width: 18px; height: 18px; }
.ibtn[aria-pressed="true"] { background: rgba(255,207,107,.9); color: #1a1426; }
.scene-tag { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 58px); left: 16px; z-index: 4; font-family: var(--display); font-size: 14px; color: #fff; opacity: 0; letter-spacing: .08em; text-shadow: 0 1px 6px rgba(0,0,0,.6); transition: opacity .8s; }
.scene-tag.on { opacity: .9; }
.progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.08); z-index: 6; }
.progress i { display: block; height: 100%; background: var(--gold); width: 0; transition: width .4s; }

/* ---- 대사 상자 */
.talk { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 5; min-height: 118px; padding: 16px 18px 20px; border-radius: 20px;
  background: var(--panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: opacity .3s, transform .3s; }
.talk .who { position: absolute; top: -14px; left: 16px; padding: 3px 12px; border-radius: 99px; font-family: var(--game); font-size: 15px; color: #1a1426; }
.talk .who.dosa { background: var(--dosa); }
.talk .who.sul { background: var(--sul); }
.talk .who.jang { background: #d9c8a4; }
.talk .who.kkebi, .talk .who.boss { background: #5fd6c8; }
.talk .who.mul { background: #8fb7e8; }
.talk .txt { font-family: var(--display); font-size: 19px; line-height: 1.6; word-break: keep-all; min-height: 3.2em; }
.talk.narr .txt { color: #e9e4d6; font-weight: 400; font-style: normal; text-align: center; padding-top: 6px; }
.talk .more { position: absolute; right: 16px; bottom: 8px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--gold); opacity: 0; }
.talk .more.on { opacity: 1; animation: bob 1s infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
.talk.hide, .hideui .talk, .hideui .bar, .hideui .scene-tag { opacity: 0; pointer-events: none; }

/* ---- 손으로 하는 순간, 선택 */
.hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; text-align: center; color: #fff; font-family: var(--game); font-size: 20px; text-shadow: 0 2px 10px rgba(0,0,0,.7); display: grid; gap: 10px; justify-items: center; }
.hint .ico { width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 0 20px rgba(255,255,255,.4); }
.hint.rub .ico { animation: rub 1.2s ease-in-out infinite; }
.hint.shake .ico { animation: down 1s ease-in infinite; }
.hint.swipe .ico { animation: side .8s ease-in-out infinite; }
.hint.ring .ico { animation: down 1s ease-in infinite; border-color: #ffcf6b; }
.hint.trace { top: 92%; font-size: 17px; }
.hint.trace .ico { display: none; }
.hint.flip { top: 80%; }
.hint.flip .ico { display: none; }
@keyframes rub { 0%, 100% { transform: translate(-30px, -8px); } 50% { transform: translate(30px, 8px); } }
@keyframes down { from { transform: translateY(-30px); opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
@keyframes side { 0%, 100% { transform: translateX(-40px); } 50% { transform: translateX(40px); } }
@keyframes pulse { 50% { transform: scale(.85); } }
.skip { position: absolute; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); z-index: 7; }
.tarot { position: absolute; left: 50%; top: 44%; width: 46%; aspect-ratio: 100 / 172; transform: translate(-50%, -50%); z-index: 6; perspective: 900px; border: 0; padding: 0; background: none; animation: float 2.4s ease-in-out infinite; }
.tarot .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,1.4,.5,1); }
.tarot.flipped .in { transform: rotateY(180deg); }
.tarot .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; overflow: hidden; box-shadow: 0 0 40px rgba(255,207,107,.55); }
.tarot .face img, .tarot .face svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarot .front { transform: rotateY(180deg); }
@keyframes float { 50% { transform: translate(-50%, -53%); } }
.choices { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); z-index: 7; display: grid; gap: 10px; }
.choices button { min-height: 56px; border-radius: 16px; border: 1px solid rgba(255,207,107,.5); background: rgba(16,14,34,.86); color: #fff; font-family: var(--display); font-size: 18px; font-weight: 700; padding: 10px 16px; animation: rise .35s ease-out backwards; }
.choices button:nth-child(2) { animation-delay: .12s; }
.choices button:active { transform: scale(.97); background: rgba(255,207,107,.25); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---- 시작, 끝, 앨범 화면 */
.panel { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px calc(env(safe-area-inset-bottom, 0px) + 18px); gap: 12px; }
.panel.scrollable { overflow-y: auto; }
/* 시작 화면: 밝은 원화 위에서도 제목과 소개 글이 읽히게 아래쪽을 어둡게 */
.panel.start { background: linear-gradient(rgba(5,6,14,.25), transparent 22%, transparent 40%, rgba(5,6,14,.82) 72%, rgba(5,6,14,.92)); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.logo { font-family: var(--game); font-size: 18px; color: #fff; text-decoration: none; letter-spacing: .04em; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.logo b { color: #ff4867; font-weight: 400; }
.spacer { flex: 1; min-height: 0; }
.title { text-align: center; display: grid; gap: 8px; text-shadow: 0 2px 14px rgba(0,0,0,.75); }
.title .series { font-family: var(--game); color: var(--gold); font-size: 17px; letter-spacing: .1em; }
.title h1 { font-size: 38px; line-height: 1.15; color: #fff; word-break: keep-all; }
.title p { color: #e7e2f4; font-size: 15px; max-width: 30ch; margin: 0 auto; word-break: keep-all; }
.title.ink h1 { animation: ink 2.2s ease-out both; }
.title.ink .series { animation: ink 1.6s .3s ease-out both; }
.title.ink p { animation: ink 1.6s .9s ease-out both; }
@keyframes ink { from { opacity: 0; filter: blur(10px); letter-spacing: .3em; } to { opacity: 1; filter: none; } }
.actions { display: grid; gap: 10px; }
.btn { min-height: 54px; border-radius: 16px; border: 0; padding: 10px 16px; font-size: 16px; font-weight: 700; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; display: grid; place-items: center; text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--gold); color: #24180a; font-family: var(--game); font-weight: 400; font-size: 21px; }
.btn small { display: block; font-family: var(--body); font-size: 12px; font-weight: 400; opacity: .8; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.chip { padding: 6px 12px; border-radius: 99px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 13px; font-weight: 700; }
.chip[aria-pressed="false"] { opacity: .6; }
.next-ep { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,.35); font-size: 13px; color: var(--sub); }
.next-ep b { color: #fff; font-family: var(--display); }

.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.album button { position: relative; aspect-ratio: 2 / 3; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: #1b1d33; }
.album img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album .lock { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; font-size: 11px; color: var(--sub); line-height: 1.35; word-break: keep-all; text-align: center; }
.album .lock::before { content: '?'; display: block; font-family: var(--game); font-size: 28px; color: #4b4e72; }
.album .hid { position: absolute; top: 4px; right: 4px; padding: 1px 6px; border-radius: 99px; background: var(--sul); color: #1a1426; font-size: 10px; font-weight: 700; }
.album .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.viewer { position: absolute; inset: 0; z-index: 9; background: #000; display: grid; place-items: center; }
.viewer img { max-width: 100%; max-height: 100%; }
.viewer .cap { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); text-align: center; font-family: var(--display); font-size: 16px; color: #fff; text-shadow: 0 1px 8px #000; }

.end-card { width: 72%; max-width: 300px; margin: 0 auto; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.6); display: block; }
.unlock { text-align: center; font-family: var(--display); color: #fff; display: grid; gap: 8px; }
.unlock .badge { justify-self: center; padding: 4px 12px; border-radius: 99px; background: var(--sul); color: #1a1426; font-family: var(--game); font-size: 14px; }
.next-games { display: grid; gap: 8px; }
.next-games a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; font-size: 15px; }
.next-games small { color: var(--sub); }
.toast { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); z-index: 20; padding: 10px 16px; border-radius: 12px; background: rgba(0,0,0,.8); color: #fff; font-size: 14px; animation: rise .25s; }

/* ---- 아래 설명 글 */
.guide { max-width: 520px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 28px; }
.guide section { display: flex; flex-direction: column; gap: 10px; }
.guide h2 { font-size: 24px; }
.guide p, .guide li { font-size: 15px; color: var(--ink); max-width: 65ch; }
.guide ul, .guide ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.guide a { color: var(--gold); }
.log { font-size: 14px; }
.site-foot { border-top: 1px solid var(--line); padding-top: 16px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.site-foot a { color: var(--sub); }

/* 화 고르기 */
.eps { display: flex; gap: 8px; margin-bottom: 10px; }
.eps button { min-height: 36px; padding: 4px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35); color: #fff; font-family: var(--game); font-size: 15px; display: inline-flex; align-items: center; gap: 5px; }
.eps button[aria-selected="true"] { background: #ffcf6b; border-color: #ffcf6b; color: #1a1426; }
.eps i { font-style: normal; font-size: 11px; opacity: .8; }
.eps i.new { padding: 0 5px; border-radius: 99px; background: #ff5c7a; color: #fff; opacity: 1; }
button.next-ep { width: 100%; border: 1px solid rgba(255,207,107,.45); color: var(--sub); text-align: left; cursor: pointer; }
button.next-ep i { margin-left: auto; font-style: normal; color: #ffcf6b; font-size: 20px; }
/* 이야기와 이어지는 게임 */
.game-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(95,214,200,.28), rgba(40,30,90,.6)); border: 1px solid rgba(95,214,200,.55); color: #fff; text-decoration: none; }
.game-link span { display: grid; gap: 2px; }
.game-link small { font-size: 12px; color: #9ff0e4; }
.game-link b { font-family: var(--display); font-size: 18px; }
.game-link em { font-style: normal; font-size: 13px; color: var(--sub); word-break: keep-all; }
.game-link i { margin-left: auto; font-style: normal; font-size: 22px; color: #9ff0e4; }