@font-face {
    font-family: "NeoDunggeunmo";
    src: url("fonts/NeoDunggeunmoPro-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    font-family: "NeoDunggeunmo", sans-serif;
}

#game {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#background {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}


/* =========================
   시작 버튼
========================= */

#startBtn {
    position: absolute;

    left: 50%;
    bottom: 70px;

    transform: translateX(-50%);

    padding: 18px 55px;

    font-family: "NeoDunggeunmo", sans-serif;
    font-size: 24px;

    color: #fff;

    background: #5b3d26;

    border: 4px solid #b98a55;

    cursor: pointer;

    z-index: 10;

    opacity: 0;

    transition:
        transform 0.2s ease,
        opacity 1s ease;
}

#startBtn:hover {
    transform: translateX(-50%) scale(1.05);
}

#startBtn:active {
    transform: translateX(-50%) scale(0.96);
}


/* =========================
   화면 암전
========================= */

#fade {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background: #000;

    opacity: 1;

    pointer-events: none;

    transition: opacity 0.8s ease;

    z-index: 50;
}


/* =========================
   RPG 대화창
========================= */

#dialogBox {
    position: absolute;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    width: 90%;
    max-width: 1200px;

    height: 160px;

    background: #4d3425;

    border: 6px solid #9b6d3c;

    box-shadow:
        inset 0 0 0 3px #6b4b32;

    padding: 38px 30px 20px;

    display: none;

    z-index: 40;

    cursor: pointer;
}


/* 캐릭터 이름 */

#characterName {
    position: absolute;

    left: 24px;
    top: -22px;

    padding: 6px 18px;

    background: #5b3d26;

    border: 4px solid #9b6d3c;

    color: #fff;

    font-family: "NeoDunggeunmo", sans-serif;
    font-size: 22px;

    line-height: 1;
}


/* 대사 */

#dialogText {
    color: #f8f2dd;

    font-family: "NeoDunggeunmo", sans-serif;

    font-size: 28px;

    line-height: 1.7;

    white-space: pre-wrap;
}


/* 다음 표시 */

#nextArrow {
    position: absolute;

    right: 22px;
    bottom: 14px;

    color: #fff7dd;

    font-family: "NeoDunggeunmo", sans-serif;

    font-size: 24px;

    display: none;

    animation: blink 0.8s infinite;
}

@keyframes blink {

    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* =========================
   화면 흔들림
========================= */

.shake {
    animation: screenShake 0.28s ease-in-out;
}

@keyframes screenShake {

    0% {
        transform: translate(0, 0);
    }

    15% {
        transform: translate(-9px, 4px);
    }

    30% {
        transform: translate(9px, -4px);
    }

    45% {
        transform: translate(-8px, -3px);
    }

    60% {
        transform: translate(7px, 3px);
    }

    75% {
        transform: translate(-5px, -2px);
    }

    90% {
        transform: translate(4px, 1px);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* =========================
   퍼스널컬처 종이 씬
========================= */

#paperScene {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    display: none;

    align-items: center;
    justify-content: center;

    z-index: 45;

    pointer-events: none;
}


/* 종이 */

/* =========================
   퍼스널컬처 종이
========================= */

#paperScene {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    display: none;

    z-index: 45;

    pointer-events: none;

}


/* 처음에는 대화창 위에 작게 */

/* =========================
   퍼스널컬처 종이
========================= */

#paperScene {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    display: none;

    z-index: 45;

    pointer-events: none;

}


/* =========================
   종이 기본 상태
========================= */

#introPaper {

    position: absolute;

    left: 50%;
    top: 43%;

    width: min(30vw, 400px);

    transform:
        translate(-50%, -50%)
        scale(0.8);

    opacity: 0;

    filter:
        drop-shadow(
            0 12px 12px
            rgba(0, 0, 0, 0.4)
        );

}


/* =========================
   ① 위에서 떨어짐
========================= */

.paperDrop {

    animation:
        paperDrop
        0.8s
        cubic-bezier(.22, .8, .35, 1)
        forwards;

}


@keyframes paperDrop {

    0% {

        transform:
            translate(-50%, -120vh)
            rotate(-5deg)
            scale(0.7);

        opacity: 0;

    }

    70% {

        transform:
            translate(-50%, -45%)
            rotate(2deg)
            scale(0.82);

        opacity: 1;

    }

    100% {

        transform:
            translate(-50%, -50%)
            rotate(0deg)
            scale(0.8);

        opacity: 1;

    }

}


/* =========================
   ② 처음에는 작게 둥둥
========================= */

.paperFloatSmall {

    animation:
        paperFloatSmall
        2.2s
        ease-in-out
        infinite;

}


@keyframes paperFloatSmall {

    0% {

        transform:
            translate(-50%, -50%)
            scale(0.8)
            rotate(-1deg);

    }

    50% {

        transform:
            translate(-50%, -58%)
            scale(0.8)
            rotate(1deg);

    }

    100% {

        transform:
            translate(-50%, -50%)
            scale(0.8)
            rotate(-1deg);

    }

}


/* =========================
   ③ "......안 할래"
   좌우 마구 흔들림
   이후 계속 유지
========================= */

.paperMagicShake {

    animation:
        paperMagicShake
        0.7s
        ease-in-out
        infinite;

}


@keyframes paperMagicShake {

    0% {

        transform:
            translate(-50%, -50%)
            scale(0.8)
            rotate(0deg);

    }

    10% {

        transform:
            translate(-58%, -50%)
            scale(0.81)
            rotate(-6deg);

    }

    20% {

        transform:
            translate(-42%, -50%)
            scale(0.8)
            rotate(7deg);

    }

    30% {

        transform:
            translate(-60%, -50%)
            scale(0.82)
            rotate(-8deg);

    }

    40% {

        transform:
            translate(-40%, -50%)
            scale(0.8)
            rotate(8deg);

    }

    50% {

        transform:
            translate(-57%, -50%)
            scale(0.81)
            rotate(-7deg);

    }

    60% {

        transform:
            translate(-43%, -50%)
            scale(0.8)
            rotate(6deg);

    }

    70% {

        transform:
            translate(-55%, -50%)
            scale(0.81)
            rotate(-4deg);

    }

    80% {

        transform:
            translate(-45%, -50%)
            scale(0.8)
            rotate(3deg);

    }

    100% {

        transform:
            translate(-50%, -50%)
            scale(0.8)
            rotate(0deg);

    }

}


/* =========================
   ④ "어...! 이거"
   흔들림 유지 + 확대
========================= */

.paperApproach {

    animation:
        paperApproach
        0.7s
        ease-out
        forwards;

}


@keyframes paperApproach {

    from {

        transform:
            translate(-50%, -50%)
            scale(0.8);

    }

    to {

        transform:
            translate(-50%, -50%)
            scale(1.05);

    }

}


/* =========================
   ⑤ "이거 왜 이래....!"
   흔들림 유지 + 추가 확대
========================= */

.paperApproachClose {

    animation:
        paperApproachClose
        0.7s
        ease-out
        forwards;

}


@keyframes paperApproachClose {

    from {

        transform:
            translate(-50%, -50%)
            scale(1.05);

    }

    to {

        transform:
            translate(-50%, -50%)
            scale(1.3);

    }

}


/* =========================
   ⑥ 대화창 사라진 뒤
   화면 앞으로 확 확대
========================= */

.paperFinalApproach {

    animation:
        paperFinalApproach
        1.1s
        ease-in-out
        forwards;

}


@keyframes paperFinalApproach {

    from {

        transform:
            translate(-50%, -50%)
            scale(1.3);

    }

    to {

        transform:
            translate(-50%, -50%)
            scale(1.8);

    }

}


/* =========================
   ⑦ 최종 상태
   좌우 흔들림 없음
   큰 폭으로 둥둥
========================= */

.paperFinalFloat {

    animation:
        paperFinalFloat
        2s
        ease-in-out
        infinite;

}


@keyframes paperFinalFloat {

    0% {

        transform:
            translate(-50%, -35%)
            scale(1.8)
            rotate(-1deg);

    }

    50% {

        transform:
            translate(-50%, -57%)
            scale(1.8)
            rotate(1deg);

    }

    100% {

        transform:
            translate(-50%, -35%)
            scale(1.8)
            rotate(-1deg);

    }

}

/* =========================
   질문선택창
========================= */

#questionSelectScene{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.35);

    z-index:80;
}

#questionBox{

    width:min(900px,90vw);

    background:#f8ecd2;

    border:8px solid #6b4b32;

    border-radius:18px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

}

#questionTitle{

    font-size:38px;

    text-align:center;

    margin-bottom:18px;

    color:#5b3d26;

}

#questionNumber{

    font-size:24px;

    margin-bottom:22px;

    color:#7b5a3b;

}

#questionText{

    white-space:pre-line;

    font-size:30px;

    line-height:1.6;

    margin-bottom:35px;

    color:#3b2b20;

}

#choiceList{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.choice{

    padding:18px 22px;

    background:#fff8ea;

    border:4px solid #8b6744;

    border-radius:12px;

    font-size:26px;

    cursor:pointer;

    transition:.15s;

}

.choice:hover{

    transform:translateX(10px);

    background:#ffe7b2;

}

@keyframes paperPop{

0%{
transform:translate(-50%,-50%) scale(1);
}

35%{
transform:translate(-50%,-50%) scale(1.35);
}

100%{
transform:translate(-50%,-50%) scale(0);
opacity:0;
}

}

.paperPop{

animation:paperPop .55s forwards;

}

@keyframes uiPop{

0%{
transform:scale(.7);
opacity:0;
}

70%{
transform:scale(1.08);
}

100%{
transform:scale(1);
opacity:1;
}

}

.uiPop{

animation:uiPop .35s;

}

.paperFlyAway{

    animation:paperFlyAway .55s ease forwards;

}

@keyframes paperFlyAway{

    0%{

        transform:
        translate(-50%,-50%)
        scale(2.8);

        opacity:1;

    }

    100%{

        transform:
        translate(-50%,-50%)
        scale(0.3);

        opacity:0;

    }

}

.choice{

    transition:.2s;

    cursor:pointer;

}

.choice.selected{

    transform:scale(1.06);

    filter:brightness(1.4);

}

/* =========================
   결과창
========================= */

#resultScene{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.55);

    z-index:100;

}

#resultImage{

    width:min(720px,90vw);

    max-height:92vh;

    display:block;

    object-fit:contain;

    image-rendering:pixelated;

    opacity:0;

    transform:scale(.7);

}

#dialogRow{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

#dialogText{

    flex:1;

}

#analysisBar{

    width:220px;

    text-align:right;

    color:#fff7dd;

    font-size:22px;

    white-space:nowrap;

}

@keyframes resultDrop {

    0%{
        opacity:0;
        transform:translateY(-250px) scale(.4) rotate(-8deg);
    }

    70%{
        opacity:1;
        transform:translateY(20px) scale(1.08) rotate(2deg);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1) rotate(0);
    }

}

@keyframes resultFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes resultFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes resultDrop {

    0%{
        transform:translateY(-180px) scale(.7);
        opacity:0;
    }

    70%{
        transform:translateY(20px) scale(1.05);
        opacity:1;
    }

    100%{
        transform:translateY(0) scale(1);
        opacity:1;
    }

}

@keyframes resultFloat{

    0%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
    100%{transform:translateY(0);}

}

.resultDrop{

    animation:
        resultDrop .8s ease-out,
        resultFloat 2.6s ease-in-out .8s infinite;

}

.floatingPaper{
    animation: floatPaper 2.5s ease-in-out infinite;
}

@keyframes floatPaper{

    0%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-12px);
    }

    100%{
        transform: translateY(0);
    }

}

/* =========================
   결과 버튼
========================= */

#homeBtn,
#printBtn{

    position:absolute;

    display:none;

    padding:16px 34px;

    font-family:"NeoDunggeunmo", sans-serif;
    font-size:26px;

    color:#fff;

    background:#5b3d26;

    border:4px solid #b98a55;

    cursor:pointer;

    z-index:120;

    transition:transform .25s;

}

#homeBtn{

    top:40px;
    left:40px;

}

#printBtn{

    right:40px;
    bottom:40px;

}

#homeBtn:hover,
#printBtn:hover{

    transform:scale(1.08);

}


/* 버튼 등장 */

.showButton{

    display:block;

    animation:buttonAppear .45s ease forwards;

}

@keyframes buttonAppear{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


/* =========================
   출력 화살표
========================= */

#printArrow{

    position:absolute;

    right:120px;
    bottom:115px;

    width:80px;

    display:none;

    opacity:0;

    z-index:130;

    pointer-events:none;

}

.arrowFloat{

    display:block !important;

    opacity:1 !important;

    animation:
        arrowAppear .4s forwards,
        arrowFloat 1.4s ease-in-out .4s infinite;

}

@keyframes arrowAppear{

    from{

        opacity:0;
        transform:translateY(12px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes arrowFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


/* =========================
   출력 전용
========================= */

@media print{

    @page{

        size:A4 portrait;
        margin:10mm;

    }

    body{

        margin:0 !important;
        background:#fff !important;

    }

    #background,
    #fade,
    #dialogBox,
    #paperScene,
    #questionSelectScene,
    #startBtn,
    #homeBtn,
    #printBtn,
    #printArrow{

        display:none !important;

    }

    #resultScene{

        position:fixed !important;

        left:0;
        top:0;

        width:100% !important;
        height:100% !important;

        display:flex !important;

        justify-content:center;
        align-items:center;

        background:#fff !important;

    }

    #resultImage{

        display:block;

        width:auto !important;
        height:auto !important;

        max-width:185mm !important;
        max-height:265mm !important;

        object-fit:contain;

        opacity:1 !important;
        transform:none !important;
        animation:none !important;

    }

}