@font-face { font-family:'Uiyeon'; src:url('assets/font.ttf') format('truetype'); font-weight:normal; font-style:normal; font-display:swap; }
:root {
    --pink-pale:#FFF0F7; --pink-light:#FFD6EB; --pink-mid:#FFB0D0; --pink-main:#FF6B9D; --pink-dark:#D94F7E;
    --purple-pale:#F5EEFF; --purple-light:#DDB8FF; --purple-mid:#C084FC; --purple-main:#A855F7;
    --text:#1C0A2E; --text-sub:#7A5C8A; --text-light:#B09EC0; --white:#FFFFFF;
    --shadow-pink:rgba(255,107,157,0.20); --shadow-purple:rgba(168,85,247,0.14);
    --r-sm:12px; --r-md:18px; --r-lg:24px; --r-full:999px;
    --font-title:'Noto Serif KR',serif;
    --font-hand:'Nanum Pen Script',cursive;
    --font-body:'Pretendard',-apple-system,sans-serif;
    --font-talk:'Uiyeon','Pretendard',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;font-family:var(--font-body);-webkit-tap-highlight-color:transparent;}
body{margin:0;padding:0;min-height:100vh;background:linear-gradient(150deg,#FFF0F7 0%,#F5EEFF 50%,#FFF7FB 100%);display:flex;justify-content:center;}
#app{width:100%;max-width:500px;min-height:100vh;background:rgba(255,255,255,0.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:relative;overflow-x:hidden;}
.screen{display:none;padding:0 20px 56px;}
.screen.active{display:block;animation:fadeUp 0.45s cubic-bezier(0.22,1,0.36,1) both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

/* ── 빛 살 (인트로 전용) ── */
.light-beam{position:absolute;top:-20%;height:160%;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,220,0.07) 30%,rgba(255,255,255,0.10) 50%,rgba(255,255,220,0.07) 70%,transparent 100%);transform:rotate(-18deg);pointer-events:none;animation:lightDrift 9s ease-in-out infinite;}
.lb1{left:14%;width:16px;animation-delay:0s;} .lb2{left:33%;width:11px;animation-delay:3s;opacity:0.75;} .lb3{left:55%;width:20px;animation-delay:6s;}
@keyframes lightDrift{0%{opacity:0;transform:rotate(-18deg) translateX(-6px);}20%{opacity:1;}55%{opacity:0.6;transform:rotate(-18deg) translateX(5px);}80%{opacity:0.2;}100%{opacity:0;transform:rotate(-18deg) translateX(-6px);}}

/* ── 메인 화면 (원복) ── */
.deco-bg{position:absolute;top:0;left:0;width:100%;height:300px;pointer-events:none;overflow:hidden;}
.deco{position:absolute;color:var(--pink-mid);animation:twinkle 3s ease-in-out infinite;}
.d1{top:22px;left:12%;font-size:12px;animation-delay:0s;}
.d2{top:55px;right:9%;font-size:22px;animation-delay:0.5s;color:var(--purple-light);}
.d3{top:110px;left:5%;font-size:10px;animation-delay:1.1s;}
.d4{top:35px;right:28%;font-size:18px;animation-delay:1.7s;color:var(--purple-mid);}
.d5{top:88px;left:40%;font-size:12px;animation-delay:0.8s;}
.d6{top:140px;right:16%;font-size:10px;animation-delay:2.1s;color:var(--pink-main);}
@keyframes twinkle{0%,100%{opacity:0.22;transform:scale(0.88);}50%{opacity:1;transform:scale(1.35);}}

.main-eyebrow{text-align:center;padding-top:50px;margin-bottom:18px;}
.eyebrow-tag{display:inline-block;background:linear-gradient(135deg,var(--pink-light),var(--purple-pale));border:1.5px solid var(--purple-light);color:var(--purple-main);font-size:12px;font-weight:700;padding:7px 18px;border-radius:var(--r-full);letter-spacing:0.2px;}
.main-titles{text-align:center;margin-bottom:30px;padding:0 4px;}
.main-headline{font-family:var(--font-title);font-size:36px;font-weight:900;line-height:1.2;letter-spacing:-0.5px;margin:0 0 14px;background:linear-gradient(135deg,var(--pink-main) 30%,var(--purple-mid) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.main-sub{font-size:14px;color:var(--text-sub);line-height:1.75;word-break:keep-all;margin:0;}

/* 슬라이더 */
.slider-hint{text-align:center;font-size:12px;color:var(--pink-main);font-weight:700;margin-bottom:12px;animation:pulse 2.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:0.45;}50%{opacity:1;}}
.character-slider-wrap{width:100%;overflow:hidden;margin-bottom:30px;}
.character-slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:12px calc(50% - 120px) 16px;scrollbar-width:none;scroll-behavior:smooth;cursor:grab;user-select:none;-webkit-user-select:none;}
.character-slider:active{cursor:grabbing;} .character-slider::-webkit-scrollbar{display:none;}
.char-card{flex:0 0 auto;width:240px;height:340px;border-radius:20px;scroll-snap-align:center;background-size:cover;background-position:center top;background-color:var(--purple-pale);box-shadow:0 10px 30px var(--shadow-pink),0 2px 8px rgba(0,0,0,0.07);cursor:pointer;overflow:hidden;transition:transform 0.25s ease;}
.char-card:active{transform:scale(0.96);}

/* 시작 버튼 */
.main-cta{padding:0 4px;}
.btn-start{width:100%;padding:18px 24px;border:none;border-radius:var(--r-full);background:linear-gradient(135deg,var(--pink-main) 0%,var(--purple-mid) 100%);color:white;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 6px 24px var(--shadow-pink),0 2px 8px var(--shadow-purple);display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:0.2px;transition:transform 0.15s,box-shadow 0.15s;}
.btn-start:active{transform:scale(0.975);box-shadow:0 2px 10px var(--shadow-pink);}
.btn-emoji{font-size:18px;} .cta-sub{text-align:center;font-size:12px;color:var(--text-light);margin:10px 0 0;}

/* ── 인트로 화면 ── */
#intro-screen{padding:0;min-height:100vh;position:relative;overflow:hidden;}
#intro-screen.active{animation:none;}
.intro-bg{position:absolute;inset:0;}
.intro-bg-img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.intro-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.35) 100%);}

.intro-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px 12vh;text-align:center;z-index:5;}

/* 글래스 카드로 텍스트 가독성 확보 */
.intro-box{background:rgba(255,255,255,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:20px;padding:28px 24px;width:100%;margin-bottom:4px;}

.intro-line{font-family:var(--font-title);font-size:16px;font-weight:700;color:var(--text);line-height:1.75;margin:0 0 16px;word-break:keep-all;opacity:0;animation:introFade 0.9s ease both;}
/* 훅 라인: 크고 핑크 */
.line1{animation-delay:0.3s;font-size:20px;color:var(--pink-main);margin-bottom:20px;}
.line2{animation-delay:0.9s;}
.line3{animation-delay:1.4s;}
.line4{animation-delay:1.9s;margin-bottom:0;}

.btn-intro{margin-top:24px;padding:16px 36px;border:none;border-radius:var(--r-full);background:linear-gradient(135deg,var(--pink-main),var(--purple-mid));color:white;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 6px 24px var(--shadow-pink);letter-spacing:0.3px;opacity:0;animation:introFade 0.9s ease both;animation-delay:2.5s;transition:transform 0.15s;}
.btn-intro:active{transform:scale(0.975);}
@keyframes introFade{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* ── 캐릭터 모달 ── */
.char-modal-overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(28,10,46,0.65);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);align-items:center;justify-content:center;padding:24px 20px;}
.char-modal-overlay.active{display:flex;animation:overlayIn 0.3s ease both;}
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
.char-modal-card{width:100%;max-width:340px;border-radius:24px;overflow:hidden;background:var(--white);box-shadow:0 24px 60px rgba(0,0,0,0.35);animation:cardIn 0.4s cubic-bezier(0.22,1,0.36,1) both;}
@keyframes cardIn{from{transform:scale(0.82) translateY(24px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.char-modal-img{width:100%;height:380px;background-size:cover;background-position:center top;background-color:var(--purple-pale);position:relative;transition:opacity 0.2s ease;}
.char-modal-img.fading{opacity:0;}
.char-modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;padding:0;border-radius:50%;background:rgba(255,255,255,0.88);border:none;color:var(--text);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.18);z-index:10;}
.modal-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border-radius:50%;background:rgba(255,255,255,0.85);border:none;font-size:24px;line-height:1;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.15);z-index:10;}
.modal-prev{left:10px;} .modal-next{right:10px;}
.modal-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10;}
.modal-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.45);transition:background 0.2s,transform 0.2s;cursor:pointer;}
.modal-dot.active{background:white;transform:scale(1.35);}
.char-modal-body{padding:20px 22px 24px;background:linear-gradient(135deg,var(--pink-pale),var(--purple-pale));}
.char-modal-name{font-family:var(--font-title);font-size:22px;font-weight:900;color:var(--text);margin:0 0 10px;}
.char-modal-desc{white-space:pre-line;font-size:14px;line-height:1.75;color:var(--text-sub);margin:0;word-break:keep-all;}

/* ── 테스트 화면 ── */
#test-screen{padding-top:22px;}
.test-header{margin-bottom:14px;}
.test-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.btn-back{width:auto;padding:4px 0;background:transparent;border:none;color:var(--text-light);font-size:13px;font-weight:600;cursor:pointer;transition:color 0.15s;}
.btn-back:hover,.btn-back:active{color:var(--pink-main);}
.q-num{font-size:13px;font-weight:700;color:var(--purple-main);letter-spacing:0.5px;}
.progress-wrap{width:100%;}
.progress-bar{width:100%;height:8px;background:var(--pink-pale);border-radius:var(--r-full);overflow:hidden;border:1px solid var(--pink-light);}
.progress{height:100%;background:linear-gradient(90deg,var(--pink-main),var(--purple-mid));width:0%;border-radius:var(--r-full);transition:width 0.5s cubic-bezier(0.22,1,0.36,1);}
#test-content{transition:opacity 0.25s ease,transform 0.25s ease;opacity:1;transform:translateY(0);}
#test-content.fade-out{opacity:0;transform:translateY(-8px);pointer-events:none;}
.image-container{position:relative;width:100%;margin-bottom:16px;cursor:pointer;border-radius:20px;overflow:hidden;box-shadow:0 6px 24px var(--shadow-purple);background:#1A0A2E;}
#q-img1{display:block;width:100%;height:auto;transition:opacity 0.75s ease;}
#q-img2{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.75s ease;}
.image-container.show-scene2 #q-img1{opacity:0;} .image-container.show-scene2 #q-img2{opacity:1;}
.scene-badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,0.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:white;padding:5px 13px;border-radius:var(--r-full);font-size:11px;font-weight:700;z-index:10;border:1px solid rgba(255,255,255,0.35);}
.skip-hint{position:absolute;bottom:12px;right:12px;background:linear-gradient(135deg,rgba(255,107,157,0.9),rgba(192,132,252,0.88));color:white;padding:6px 14px;border-radius:var(--r-full);font-size:11px;font-weight:700;z-index:10;animation:bounce 2.5s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* 메모 박스 */
.question-memo{background:linear-gradient(160deg,#FFF8F2 0%,#FFF0F7 100%);border:1.5px solid var(--pink-light);border-left:3.5px solid var(--pink-main);border-radius:14px;padding:16px 20px 18px;margin:0 0 18px;box-shadow:0 2px 10px var(--shadow-pink);}
.memo-label{display:block;font-family:var(--font-talk);font-size:18px;color:var(--pink-dark);margin-bottom:10px;line-height:1.4;}

/* 문항 텍스트 — 크기 업 */
#q-text{white-space:pre-line;font-family:var(--font-title);font-size:18px;line-height:1.8;font-weight:500;color:var(--text);margin:0;word-break:keep-all;}

/* 선택지 — 크기 업 */
.choices{display:flex;flex-direction:column;gap:10px;}
.choice-btn{white-space:pre-line;width:100%;padding:17px 20px;border:2px solid var(--pink-light);border-radius:var(--r-md);background:var(--white);color:var(--text);font-family:var(--font-talk);font-size:21px;font-weight:400;line-height:1.5;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:border-color 0.18s,background 0.18s,transform 0.12s;}
.choice-btn:active{border-color:var(--pink-main);background:var(--pink-pale);transform:scale(0.985);}
.choice-btn .ripple{position:absolute;border-radius:50%;background:rgba(255,107,157,0.25);transform:scale(0);animation:rippleAnim 0.5s linear;pointer-events:none;}
@keyframes rippleAnim{to{transform:scale(4);opacity:0;}}

/* ── 로딩 화면 ── */
#loading-screen{display:none;min-height:100vh;align-items:center;justify-content:center;flex-direction:column;padding-top:0;padding-bottom:0;}
#loading-screen.active{display:flex;}
.loading-inner{text-align:center;}
.loading-hearts{display:flex;gap:14px;justify-content:center;margin-bottom:28px;}
.lh{font-size:34px;display:inline-block;animation:heartBeat 1.4s ease-in-out infinite;}
.lh1{animation-delay:0s;} .lh2{animation-delay:0.22s;} .lh3{animation-delay:0.44s;}
@keyframes heartBeat{0%,100%{transform:scale(1);}28%{transform:scale(1.38);}55%{transform:scale(0.88);}}
.loading-title{font-family:var(--font-title);font-size:20px;font-weight:700;color:var(--text);margin:0 0 8px;}
.loading-sub{font-size:14px;color:var(--text-sub);margin:0;}

/* ── 결과 화면 ── */
#result-screen{padding-top:24px;}
#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:200;}
.result-header{text-align:center;padding-bottom:20px;}
.result-eyebrow{font-size:13px;font-weight:700;color:var(--purple-main);margin:0 0 8px;letter-spacing:0.4px;}
.result-title{font-family:var(--font-title);font-size:24px;font-weight:900;line-height:1.4;margin:0;word-break:keep-all;background:linear-gradient(135deg,var(--pink-main),var(--purple-main));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.result-image{width:70%;max-width:280px;border-radius:20px;margin:0 auto 20px;box-shadow:0 8px 30px var(--shadow-pink);display:block;}

/* 유형 설명 — 크기 업 + 줄간격 타이트 */
.result-desc{font-family:var(--font-talk);font-size:23px;line-height:1.6;color:var(--text);background:linear-gradient(135deg,var(--pink-pale),var(--purple-pale));border:1.5px solid var(--pink-light);padding:22px 20px;border-radius:var(--r-md);margin-bottom:20px;word-break:keep-all;}

/* 액션 버튼 */
.result-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.btn-share{width:100%;padding:16px;border:none;border-radius:var(--r-full);background:linear-gradient(135deg,var(--pink-main),var(--purple-mid));color:white;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 4px 16px var(--shadow-pink);display:flex;align-items:center;justify-content:center;gap:8px;transition:transform 0.15s;}
.btn-share:active{transform:scale(0.98);}
.result-btns-row{display:flex;gap:10px;}
.btn-other-types{flex:1;padding:14px;background:var(--white);border:2px solid var(--purple-light);border-radius:var(--r-full);color:var(--purple-main);font-size:14px;font-weight:700;cursor:pointer;transition:background 0.15s;}
.btn-other-types:active{background:var(--purple-pale);}
.btn-retry-sm{flex:1;padding:14px;background:var(--pink-pale);border:2px solid var(--pink-light);border-radius:var(--r-full);color:var(--pink-dark);font-size:14px;font-weight:700;cursor:pointer;transition:background 0.15s;}
.btn-retry-sm:active{background:var(--pink-light);}

/* 도서 섹션 */
.book-section{background:var(--white);border:2px solid var(--purple-light);border-radius:var(--r-lg);padding:24px 20px;text-align:center;}
.book-label{font-size:13px;font-weight:700;color:var(--purple-main);margin:0 0 12px;display:block;}
.book-desc{font-size:14px;color:var(--text-sub);line-height:1.75;word-break:keep-all;margin:0 0 16px;}

/* 도서 이미지 — 입체표지 PNG 최적화 */
.book-image{
    width:200px;
    border-radius:0;         /* 입체 표지에 라운드 불필요 */
    box-shadow:none;         /* 흰 여백에 그림자 안 씌움 */
    mix-blend-mode:multiply; /* 흰 배경 영역 투명하게 처리 */
    display:block;
    margin:0 auto 16px;
}

.book-stores{border-top:1px solid var(--pink-light);padding-top:20px;margin-top:4px;}
.store-label{font-size:13px;color:var(--text-sub);margin:0 0 12px;}
.store-row{display:flex;gap:10px;}
.store-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 8px;background:var(--white);border:1.5px solid var(--purple-light);border-radius:var(--r-md);text-decoration:none;transition:border-color 0.15s,box-shadow 0.15s;}
.store-btn:active{border-color:var(--purple-mid);box-shadow:0 2px 8px var(--shadow-purple);}
.store-btn img{height:22px;width:auto;object-fit:contain;}

/* ── 다른 유형 팝업 ── */
.types-modal-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(28,10,46,0.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);align-items:center;justify-content:center;padding:20px;}
.types-modal-overlay.active{display:flex;animation:overlayIn 0.3s ease both;}
.types-modal-card{width:100%;max-width:460px;background:rgba(255,255,255,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.95);border-radius:24px;padding:24px 20px 28px;box-shadow:0 20px 60px rgba(168,85,247,0.18),0 4px 20px var(--shadow-pink);position:relative;max-height:82vh;overflow-y:auto;animation:cardIn 0.4s cubic-bezier(0.22,1,0.36,1) both;}
.types-modal-close{position:absolute;top:14px;right:14px;width:28px;height:28px;padding:0;border-radius:50%;background:var(--pink-pale);border:1.5px solid var(--pink-light);color:var(--text-sub);font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.types-modal-title{font-family:var(--font-title);font-size:18px;font-weight:700;color:var(--text);margin:0 0 16px;text-align:center;}
.types-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.type-card-btn:last-child:nth-child(odd){grid-column:1/span 2;max-width:calc(50% - 6px);margin:0 auto;}
.type-card-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;cursor:pointer;border:2px solid transparent;border-radius:14px;background:transparent;transition:border-color 0.15s,background 0.15s;}
.type-card-btn:active{border-color:var(--pink-light);background:var(--pink-pale);}
.type-card-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,0.08);}
.type-card-name{font-size:11px;color:var(--text-sub);line-height:1.35;text-align:center;word-break:keep-all;}

/* ── 토스트 ── */
.toast-msg{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(8px);background:rgba(28,10,46,0.88);color:white;padding:12px 22px;border-radius:var(--r-full);font-size:14px;font-weight:600;z-index:9999;opacity:0;transition:opacity 0.25s,transform 0.25s;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,0.2);pointer-events:none;}
.toast-msg.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}}