@import "https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Gowun+Batang:wght@400;700&family=Great+Vibes&display=swap";
*{margin:0;padding:0;box-sizing:border-box;font-family:"Gowun Dodum",sans-serif;word-break:keep-all}
html{-webkit-text-size-adjust:100%;height:auto}
body{margin:0;font-family:"Gowun Dodum",serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;display:block;min-height:auto;overflow-x:hidden;overflow-y:auto}
#root{width:100%;max-width:480px;margin:0 auto;background-color:#fff;box-shadow:0 0 20px #0000000d;min-height:100dvh;position:relative;overflow-x:hidden}
img{max-width:100%;height:auto;display:block;-webkit-user-select:none;user-select:none}
button,a{white-space:normal;word-break:keep-all;min-height:44px}
.script-font{font-family:"Great Vibes",cursive}
/* 인트로 질감: 원본 이미지 상단의 글자 없는 배경 영역(1080x150)을 잘라 좌우·상하 반전으로 이어 붙인 이음매 없는 타일(images/paper.jpg, 2160x300). 원본 표시 배율(375/1080)에 맞춰 750x104로 반복 */
.fullscreen-container{position:relative;width:100%;height:auto;min-height:0;overflow:hidden;background-color:#fff;background-image:url("images/paper.jpg");background-size:750px 104px}
.fullscreen-image{width:100%;height:auto;display:block}
.main-title-white{position:absolute;top:12%;width:100%;text-align:center;z-index:2;font-size:2.2rem;font-weight:300;letter-spacing:8px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3);margin:0}
.english-title{font-family:"Gowun Batang",serif!important;font-size:1.2rem!important;font-weight:700!important;letter-spacing:2px!important;text-transform:uppercase;text-align:center}
.fade-up{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.fade-up.show{opacity:1;transform:translateY(0)}
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.rv.show{opacity:1;transform:none}
.music-bar{width:3px;height:14px;background:#aaa;animation:musicBounce 1s infinite ease-in-out}
.music-bar.delay1{animation-delay:.2s}.music-bar.delay2{animation-delay:.4s}
@keyframes musicBounce{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.hide-scrollbar::-webkit-scrollbar{display:none}
.thumbnail-arrow{border:none;background:transparent;color:#777;font-size:30px;font-weight:300;cursor:pointer;padding:0 8px;opacity:.35;transition:opacity .2s;display:block;outline:none;line-height:1;flex-shrink:0;-webkit-tap-highlight-color:transparent;min-height:0}
.thumbnail-arrow:hover,.thumbnail-arrow:active{opacity:.8}

/* 사진이 없을 때 보이는 인트로 대체 화면 */
.intro-fallback{aspect-ratio:9/16;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:70px 0 30px;text-align:center;position:relative}
.intro-fallback .script{font-family:"Great Vibes",cursive;font-size:3.2rem;color:#444;line-height:1.1}
.intro-fallback .oval{width:68%;aspect-ratio:3/4;background:#e4e1dc;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 78%,transparent 100%)}
.intro-fallback .oval img{width:100%;height:100%;object-fit:cover;display:block}
.intro-fallback .foot{width:100%;display:flex;justify-content:space-between;padding:0 20px;font-size:12px;color:#555;letter-spacing:.5px;text-align:left}
.intro-fallback .foot div:last-child{text-align:right}

/* 모달 / 토스트 */
.modal[hidden]{display:none!important}
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:#333e;color:#fff;padding:10px 18px;border-radius:20px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:60;white-space:pre-line;text-align:center;max-width:90%}
.toast.show{opacity:1}
.sel{background-color:#333!important;border-color:#333!important;color:#fff!important}