@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600&family=Noto+Serif+KR:wght@400;500&display=swap');
:root{color-scheme:dark;--cream:#fff9ed;--muted:#ccc8bd;--accent:#ee7a1b}*{box-sizing:border-box}body{margin:0;background:#191c19;color:var(--cream);font-family:'Noto Serif KR',serif}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit;background:none;border:0}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid #fff;outline-offset:5px}button{min-height:32px}.poster{position:relative;width:100%;height:100svh;min-height:550px;overflow:hidden;isolation:isolate}.photos,.veil{position:absolute;inset:0;z-index:-2}.photos{background:#54574d}.slide{position:absolute;inset:0;display:grid;gap:3px;opacity:0;z-index:0;transition:opacity 3.4s cubic-bezier(.33,0,.15,1);will-change:opacity,transform;transform:translateZ(0)}.slide.back{opacity:1;transition:none}.cell{position:relative;margin:0;overflow:hidden;min-height:0;min-width:0;background:#2a2d28;contain:paint}.cell .bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(22px) brightness(.72) saturate(1.05);transform:translateZ(0)}.cell .pic{position:relative;display:block;width:100%;height:100%;object-fit:contain;object-position:center center;will-change:transform;backface-visibility:hidden}.slide.cols-2 .bg,.slide.cols-3 .bg{display:none}.slide.cols-2 .pic,.slide.cols-3 .pic{object-fit:cover;object-position:center 30%}.slide.active{opacity:1;z-index:1}.slide.kb-a:is(.active,.back) .cell .pic{animation:kbA 26s linear both}.slide.kb-b:is(.active,.back) .cell .pic{animation:kbB 26s linear both}.slide.kb-c:is(.active,.back) .cell .pic{animation:kbC 26s linear both}.slide.kb-d:is(.active,.back) .cell .pic{animation:kbD 26s linear both}.slide.active .cell{animation:cellIn 3.2s cubic-bezier(.25,.1,.2,1) both}.slide.active .cell:nth-child(2){animation-delay:.4s}.slide.active .cell:nth-child(3){animation-delay:.8s}.slide.back .cell{animation:none}.slide.cols-2{grid-template-columns:1fr 1fr}.slide.cols-3{grid-template-columns:1fr 1fr 1fr}.veil{z-index:-1;background:linear-gradient(180deg,#080f1380 0%,#11160f20 34%,#10170f24 49%,#080e15a6 100%),#12170e24;pointer-events:none}.top-controls{position:absolute;top:25px;left:4.3%;right:3.5%;display:flex;justify-content:space-between;align-items:center;font:11px sans-serif;letter-spacing:3px;opacity:.75}.top-controls>div{display:flex;align-items:center;gap:18px}.top-controls .brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.top-controls .since{font:italic 500 14px 'Cormorant Garamond',serif;letter-spacing:2px;opacity:.95}.top-controls button{font:11px sans-serif;letter-spacing:.5px;text-shadow:0 1px 8px #0009}#fullscreen{font-size:24px}.lyrics{position:absolute;top:12%;left:13%;right:13%;text-align:center;text-shadow:0 2px 18px #0009}.lyric-label{font:500 13px 'Cormorant Garamond',serif;letter-spacing:4px;color:var(--accent);opacity:.95}.lyrics p{will-change:opacity;margin:18px auto 0;font-size:clamp(18px,1.7vw,32px);font-weight:400;line-height:1.75;white-space:pre-line;max-width:1400px;word-break:keep-all;text-wrap:balance;transition:opacity 1.2s ease}.center-title{position:absolute;left:3%;right:3%;top:46%;transform:translateY(-35%);text-align:center;text-shadow:0 3px 30px #0c140f66;pointer-events:none;isolation:isolate}.center-title:before{content:'';position:absolute;left:8%;right:8%;top:-22%;bottom:-22%;z-index:-1;background:radial-gradient(ellipse at center,#0d120e73 0%,#0d120e40 42%,transparent 70%);filter:blur(10px)}.date{font:italic clamp(20px,2vw,30px) 'Cormorant Garamond',serif}.center-title h1{font:400 clamp(64px,7vw,124px)/1.05 'Allura','Cormorant Garamond',cursive;margin:12px 0 12px;letter-spacing:-1px}.center-title p{font-size:16px;letter-spacing:6px;margin:0;opacity:.95}.bottom-copy{position:absolute;left:5%;bottom:18%;font:italic 21px/1.45 'Cormorant Garamond',serif;text-shadow:0 2px 9px #0008}.bottom-copy strong{font-size:22px;font-weight:600}.bottom-copy p{margin:0;opacity:.9;max-width:min(38vw,560px);white-space:pre-line;word-break:keep-all;transition:opacity .9s ease;will-change:opacity}.now-playing{position:absolute;bottom:11.5%;left:24%;right:24%;text-align:center;display:flex;flex-direction:column;gap:4px;text-shadow:0 1px 10px #0007}.mini-label{font:italic 500 14px 'Cormorant Garamond',serif;letter-spacing:2px;color:var(--accent);opacity:.95}.now-playing strong{font:600 italic clamp(22px,1.7vw,30px) 'Cormorant Garamond','Noto Serif KR',serif}.now-playing>span:last-of-type{font:14px 'Cormorant Garamond',serif;letter-spacing:.8px;opacity:.9}#wave{height:17px;display:flex;justify-content:center;align-items:center;gap:3px;margin-top:5px}#wave i{width:2px;height:2px;background:#ee7a1bcc}body.playing #wave i{animation:wave .7s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.09s)}.transport{position:absolute;bottom:3.5%;left:24%;right:24%;display:flex;gap:14px;align-items:center}.controls{display:flex;align-items:center;gap:7px}.controls>button{font:15px sans-serif;min-width:24px;opacity:.85}.controls .play{border:1px solid #ffffff99;width:39px;height:39px;border-radius:50%;font-size:15px;color:white}.transport>span{font:12px sans-serif;font-variant-numeric:tabular-nums;opacity:.85}input[type=range]{height:2px;accent-color:var(--accent);cursor:pointer;margin:0;min-width:20px}#seek{flex:1;width:100%}#repeat{font-size:22px;opacity:.45}#repeat[aria-pressed=true]{opacity:1}.volume{display:none}.start-hint{position:absolute;bottom:1%;left:0;right:0;text-align:center;font:9px sans-serif;letter-spacing:.5px;opacity:.65}body.started .start-hint{display:none}.settings-panel{position:fixed;z-index:20;right:18px;top:18px;bottom:18px;width:min(460px,calc(100% - 36px));overflow-y:auto;background:#20251ff5;border:1px solid #ffffff30;padding:25px;color:#fff8ed;box-shadow:0 20px 90px #0007;backdrop-filter:blur(20px);font:12px/1.7 sans-serif}.settings-panel[hidden]{display:none}.panel-header{display:flex;align-items:center;justify-content:space-between}.panel-header h2{font:23px 'Noto Serif KR',serif;margin:0}.panel-header button{font-size:20px}.intro{color:#bfc3b7;font-size:11px}.mode-switch{display:flex;gap:5px;margin:20px 0}.mode-switch button{padding:7px 12px;border:1px solid #ffffff30;font-size:11px}.mode-switch .selected{background:#f5f0e6;color:#222}.player-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;margin:15px 0 8px;color:#b8c1b0}#youtube-container{width:100%;height:225px;background:#111}#youtube,#youtube-container iframe{width:100%;height:100%;border:0}#status{font-size:11px;color:#e0c7a7;min-height:35px}#external{display:block;font-size:10px;margin:12px 0 15px}ol{list-style:none;padding:0;margin:0 0 20px}li button{width:100%;text-align:left;display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #ffffff20}.track-num{width:22px;color:#b1b9a8}.track-copy{flex:1;font-size:12px}.track-copy small{display:block;font-size:10px;color:#afb8a6}.track-indicator{font-size:10px}li.active{color:#e7c49a}fieldset{border:1px solid #ffffff20;padding:15px;margin:18px 0}fieldset p,.settings-body p{font-size:10px;color:#b9c1b0}textarea{width:100%;background:#161b15;color:#fff;border:1px solid #ffffff25;padding:10px;font:12px/1.7 sans-serif;resize:vertical}.lyric-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.lyric-actions button,.file-label{display:inline-block;border:1px solid #ffffff30;padding:6px 10px;font:11px/20px sans-serif;cursor:pointer;position:relative}.file-label input{position:absolute;opacity:0;width:1px;height:1px}.file-label:focus-within{outline:2px solid white}small{font-size:10px;color:#aab5a2}.photo-settings{margin:20px 0}.photo-settings label{display:flex;align-items:center;justify-content:space-between}select{background:#20251f;border:1px solid #ffffff30;padding:7px;color:#fff;font-size:11px}summary{padding:14px 0;cursor:pointer;border-top:1px solid #ffffff25}.edit-row{display:grid;grid-template-columns:25px 1fr 1fr;gap:8px;margin:18px 0}.edit-row>input{grid-column:2/-1;background:#161b15;border:1px solid #ffffff25;color:white;padding:9px;min-width:0;font:11px sans-serif}.edit-row>button{grid-column:2;border:1px solid #ffffff25;font-size:11px}.edit-row>small{grid-column:2/-1}.text-button{text-decoration:underline;font-size:11px}.photos.contain .cell .pic{object-fit:contain}.photos.contain{background:#282c26}@keyframes kbA{from{transform:scale(1)}to{transform:scale(1.07)}}@keyframes kbB{from{transform:scale(1.07)}to{transform:scale(1)}}@keyframes kbC{from{transform:scale(1.05) translateX(-1.4%)}to{transform:scale(1.05) translateX(1.4%)}}@keyframes kbD{from{transform:scale(1.05) translateY(1.2%)}to{transform:scale(1.05) translateY(-1.2%)}}@keyframes cellIn{from{opacity:0;transform:translateY(12px) scale(1.015)}to{opacity:1;transform:none}}@keyframes wave{to{height:17px}}@media(max-width:800px){.slide.cols-2{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.slide.cols-3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.slide.cols-3 img:last-child{grid-column:1/-1}.transport{left:10%;right:10%}.now-playing{left:15%;right:15%;bottom:13%}.bottom-copy{bottom:26%;font-size:15px}.bottom-copy strong{font-size:17px}.center-title{top:44%}.lyrics{top:14%;left:8%;right:8%}.center-title h1{font-size:clamp(65px,10vw,100px)}}@media(max-width:520px){.poster{min-height:600px}.top-controls{top:18px;left:6%;right:6%}.top-controls>span{font-size:7px;letter-spacing:1.5px}.top-controls>div{gap:7px}.top-controls button{font-size:9px}.lyrics{top:13%}.lyrics p{font-size:14px}.lyric-label{font-size:8px}.center-title{top:43%;left:7%;right:7%}.center-title h1{font-size:73px;line-height:.95;margin:20px 0}.center-title p{font-size:9px;letter-spacing:3px}.bottom-copy{left:7%;bottom:27%;font-size:14px}.bottom-copy strong{font-size:16px}.bottom-copy p{max-width:220px}.now-playing{bottom:13.5%;left:5%;right:5%}.transport{left:7%;right:7%;gap:9px;bottom:5%}.controls{gap:3px}.controls>button{font-size:12px;min-width:20px}.controls .play{height:34px;width:34px}.start-hint{bottom:2%}.settings-panel{padding:20px}}@media(prefers-reduced-motion:reduce){.slide{transition:none}.slide.active.moving,.slide.active .cell,body.playing #wave i{animation:none}}

/* 인트로 화면 */
#intro{position:fixed;inset:0;z-index:30;background:#edeae3;overflow:hidden;cursor:pointer;will-change:transform;transition:transform 1.7s cubic-bezier(.76,0,.2,1),visibility 0s linear 1.7s}#intro.leave{transform:translateY(-102%);visibility:hidden}#intro .intro-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(40px) brightness(1.03);animation:bgIn 2.4s ease-out both}#intro .intro-pic{position:absolute;left:50%;top:50%;width:min(100%,calc(100vh * 1.679));height:auto;max-height:100%;aspect-ratio:2000/1191;translate:-50% -50%;animation:introIn 2.4s ease-out both,introDrift 22s 2.4s linear both}#intro .intro-cue{position:absolute;left:0;right:0;bottom:3.5%;text-align:center;color:#3a3732;font:italic 15px 'Cormorant Garamond',serif;letter-spacing:3px;opacity:0;animation:cueIn 1.4s 2s ease both}#intro .intro-cue strong{display:block;margin-top:7px;font:600 11px 'Noto Serif KR',serif;letter-spacing:5px;color:#ee7a1b}#intro .intro-cue i{display:block;width:1px;height:34px;margin:12px auto 0;background:linear-gradient(#ee7a1b,transparent);animation:cuePulse 1.8s ease-in-out infinite}#intro:focus-visible{outline:none}@keyframes bgIn{from{opacity:0}to{opacity:1}}@keyframes introIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes introDrift{to{transform:scale(1.035)}}@keyframes cueIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes cuePulse{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}@media(prefers-reduced-motion:reduce){#intro .intro-bg,#intro .intro-pic,#intro .intro-cue,#intro .intro-cue i{animation:none;opacity:1}}

/* 전시용 모드: 버튼, 재생 바, 안내 문구를 숨기고 영상처럼 흘러가게 */
#settingsToggle,.start-hint,#intro .intro-cue{display:none}#intro{cursor:default}body.idle,body.idle *{cursor:none!important}

/* 전환 모션 종류. app.js의 showSlide가 슬라이드마다 fx-* 클래스를 번갈아 붙입니다. */
.slide.active.fx-zoom{animation:fxZoom 3.4s cubic-bezier(.33,0,.15,1) both}.slide.active.fx-rise{animation:fxRise 3.4s cubic-bezier(.33,0,.15,1) both}.slide.active.fx-blur{animation:fxBlur 3.4s cubic-bezier(.4,0,.2,1) both}.slide.active.fx-wipe-up{animation:fxWipeUp 3.4s cubic-bezier(.45,0,.15,1) both}.slide.active.fx-wipe-side{animation:fxWipeSide 3.4s cubic-bezier(.45,0,.15,1) both}.slide.active.fx-iris{animation:fxIris 3.6s cubic-bezier(.4,0,.15,1) both}.slide.active.fx-split .cell{animation:cellIn 3s cubic-bezier(.22,.61,.36,1) both}.slide.active.fx-split .cell:nth-child(odd){animation-name:cellFromLeft}.slide.active.fx-split .cell:nth-child(even){animation-name:cellFromRight}.slide.active.fx-split .cell:nth-child(2){animation-delay:.25s}.slide.active.fx-split .cell:nth-child(3){animation-delay:.5s}@keyframes fxZoom{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes fxRise{from{opacity:0;transform:translateY(3.5%)}to{opacity:1;transform:none}}@keyframes fxBlur{from{opacity:0;filter:blur(18px)}60%{filter:blur(4px)}to{opacity:1;filter:blur(0)}}@keyframes fxWipeUp{from{opacity:1;clip-path:inset(100% 0 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}@keyframes fxWipeSide{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}@keyframes fxIris{from{opacity:1;clip-path:circle(0% at 50% 50%)}to{opacity:1;clip-path:circle(80% at 50% 50%)}}@keyframes cellFromLeft{from{opacity:0;transform:translateX(-7%)}to{opacity:1;transform:none}}@keyframes cellFromRight{from{opacity:0;transform:translateX(7%)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.slide.active[class*=fx-],.slide .cell img{animation:none!important}}