body {background:var(--point);}

/* ================= HEADER ================= */
.header-test {
    width:100%;
    height:13rem;
    position:fixed;
    z-index:100;
    top:0;
}
.header-test.scrolled::after {
    content:"";
    position:absolute;
    z-index:-1;
    left:0;
    top:0;
    width:100%;
    height:18rem;
    background:linear-gradient(to bottom,
        rgba(0, 0, 0, .3) 0%,
        rgba(0, 0, 0, .1) 60%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events:none;
}
.test-inner {
    max-width:180rem;
    margin:0 auto;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.test-inner a.logo {
    display:block;
    width:178px; 
    height:47px;
    background:url("/images/test_logo-eda8cef1b9ae215c1ff5cd453d92c7c0.webp") no-repeat center center/cover;
}
.test-inner a.header_close {
    display:block;
    width:40px; 
    height:40px;
    background:url("/images/test_close-64f17f59d96681a739e7530ebe8fec53.webp") no-repeat center center/cover;
}

.test-nav {
    position:absolute;
    left:4rem;
    top:50%;
    transform:translateY(-50%);
    z-index:5;
}
.test-nav ul {display:flex;flex-direction:column;gap:0rem;}
.test-nav li {display:flex;align-items:center;gap:1rem;}
.test-nav .bullet {
    width:1rem;
    height:1rem;
    border-radius:50%;
    background:#fff;opacity:.2;
    transition:opacity .3s;
    flex-shrink:0;
}
.test-nav .label {
    color:#fff;
    font-size:2rem;
    font-family: 'YeogiOttaeJalnan';
    opacity:0;
    max-width:0;
    overflow:hidden;
    white-space:nowrap;
    transition:opacity .3s;
    line-height:4rem;
    letter-spacing:0;
}
.test-nav li.active .bullet {opacity:1;}
.test-nav li.active .label {opacity:1; max-width:22rem;}

.test-scroll {
    position:absolute;
    top:50%;
    -webkit-transform:translateY(-50%); -ms-transformY:translate(-50%); transform:translateY(-50%);
    right:4rem;
    z-index:10;
    display:flex; 
    justify-content: center; 
    align-items: center;
    gap:10px;
}
.test-scroll p {
   font-size:2rem;
    color:#fff;
    font-family: 'YeogiOttaeJalnan';
    text-align:right;
}
.test-scroll span {
    font-size:2rem;
    color:#FFE7B3;
}
.test-scroll img {
    animation:bounce3 1.6s ease-in-out infinite;
    display:inline-block;
    vertical-align:middle;
    margin:0 0 .4rem;
}

@media all and (max-width:1840px) {
    .test-inner {padding:0 2rem;}
}

@media all and (max-width:1280px) {
    .test-scroll {display:none;}
}

@media all and (max-width:780px) {
    .header-test {
        height:12rem;
    }
    .test-inner {
        margin:0 auto;
        padding:0 4rem;
    }

    .test-inner a.logo {
        display:block;
        width:23rem; 
        height:6.1rem;
        background:url("/images/test_logo-eda8cef1b9ae215c1ff5cd453d92c7c0.webp") no-repeat center center/cover;
    }
    
    .test-inner a.header_close {
        width:6rem; 
        height:6rem;
        background:url("/images/test_close_m-36f06769dbbb4ca6d3b9ec94d18bc888.webp") no-repeat center center/cover;
    }

    .test-scroll {
       display:none;
   }

    .test-nav {
        position:absolute;
        width:56rem;
        margin-left:-28rem;
        left:50%; 
        top:auto;
        transform:translateY(0);
        bottom:20rem;
    }

    .test-nav ul {
        width:100%;
        flex-direction:row;
        align-items:center;
        gap:7rem;
    }
    .test-nav li {
        position:relative;
        display:flex;
        align-items:flex-start;
    }
    .test-nav .bullet {
        width:2rem;
        height:2rem;
        opacity:.5;
    }
    .test-nav .label {
        position:absolute;
        left:4.2rem;
        right:auto;
        bottom:1.5rem;
        font-size:2.4rem;
        max-width:none;
        overflow:visible;
        white-space:nowrap;
        transform:rotate(-45deg);
        transform-origin:left bottom;
    }
    .test-nav li.active .label {max-width:auto;}

}

/* ================= TEST ================= */
.test {
    width:100%;
    height:100vh;
    position:relative;
    background:var(--point);
    display:flex; 
    justify-content: center; 
    align-items: center; 
}
.test.result {
    align-items:flex-start;
    height:100%;
    padding:12rem 0 20rem;
}
.test-bg-left, .test-bg-right {
    position:fixed;
    pointer-events:none;
}
.test-bg-left {
    left:0;
    bottom:0;
    max-height: 90%;
}
.test-bg-right {
    right:0;
    bottom:2%;
}

.test .inner {
    width:70rem;
    margin:0 auto;
    position:relative;
    z-index:6;
    text-align:center;
}
.test-title {
    font-family: 'MoveSans';
    color:#FBFAF1;
    font-size:9rem;
    font-weight:700;
    line-height:1.2;
    margin-bottom:6rem;
}
.test-title.s {
    font-size:7rem;
    margin-top:2.5rem;
    margin-bottom:5rem;
}
.test-title span {
    color:#FFE7B3;
     font-family: 'YeogiOttaeJalnan';
     font-size:4rem;
     line-height:1.4;
     display:block;
}
.test-title b {
    color:#fff;
     font-size:4rem;
}
.test-box {
    background:#fff;
    width:100%;
    padding:6rem;
    border-radius:6rem;
    box-shadow:0rem .5rem 1rem rgba(67, 49, 44, 0.5), 0rem 6rem 6rem rgba(67, 49, 44, 0.2);
}
.test-box h3 {
    font-family: 'YeogiOttaeJalnan';
    font-size:4rem;
    line-height:6rem;
    margin-bottom:5rem;
    color:var(--text);
    }
.test-box h3 div {
    display:inline-block; 
    vertical-align:middle;
    width:30rem;
    height:8rem;
    line-height:7.6rem;
    border-radius:4rem;
    border:.4rem solid var(--point);
    font-family: 'YeogiOttaeJalnan';
    font-size:4rem;
    color:var(--point);
    margin:0 .5rem;
}
.test-box h3 span {
    font-size:4rem;
}
.test-box p {
    font-size:2rem;
    color:var(--text);
    line-height:1.3;
}

.test-submit {
    position:relative;
    display:flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
    background:var(--point);
    color:#FFE7B3;
    font-size:3.5rem;
    border-radius:5rem;
    width:58rem;
    height:10rem;
    padding:.4rem;
    font-family: 'YeogiOttaeJalnan';
    box-shadow:0rem 1rem 2rem rgba(250, 122, 27, 0.2);
    margin:6rem auto 0;
}
.test-submit div {
    display:flex; 
    justify-content: center; 
    align-items: center; 
    border:.3rem solid #FFE7B3;
    width:100%;
    height:100%;
    border-radius:5rem;
    font-size:3.5rem;
}
.test-submit span {
    font-family: 'MoveSans';
    font-weight:700;
    font-size:4rem;
    color:#fff;
    margin:.4rem 0 0 1rem;
}

.test-submit:before {
    content:'';
    position:absolute;
    bottom:-5rem;
    right:5%;
    width:13.7rem;
    height:13.7rem;
    background:url("/images/btn_test_hand-fac47d474463174c791aedcc4b71daa5.webp") no-repeat center center/cover;
    transition: .3s;
}
.test-submit:hover {
    top:.2rem;
}
.test-submit:hover:before {
    bottom:-4.5rem;
    right:6%;
}

.meal-box {
    position:relative;
    top:-2.4rem;
}

@media all and (max-width:780px) {

    .test {
        align-items: flex-start; 
        height: 100vh;
        height: 100dvh;
    }
    .test.result {
        padding:0 0 25rem;
    }
    .test .inner {
        height:100dvh;
        padding:6rem 0 0;
    }
    .test-bg-right {
        bottom:0;
    }
    .test-box h3 {
        margin-bottom:4rem;
    }
    .meal-box {
        position:relative;
    }
    .test-title {
        margin-top:7rem;
        margin-bottom:8rem;
    }
    
    .test-submit:hover {
        top:0rem;
    }
    .test-submit:hover:before {
        bottom:-5rem;
        right:5%;
    }
    .test-bg-left, .test-bg-right {
        max-width:50%;
    }
    
    .test-title.s {
        margin-top:8rem;
        margin-bottom:8rem;
    }
}

@media all and (min-width:781px) and (max-width:1780px) {
    .test-bg-left, .test-bg-right {
        max-width:30%;
    }
}

@media (hover: hover) and (pointer: fine) and (max-width: 780px) {

}



/* ================= TEST MAIN ================= */
.info-form p{
    font-size:3rem;
    line-height:2.5;
    text-align:center;
    color:var(--text);
    margin:0;
    font-family: 'YeogiOttaeJalnan';
}
.info-form input[type="text"]{
    background:#fff;
    border:.4rem solid var(--point);
    color:var(--point);
    border-radius:4rem;
    height:6rem;
    padding:0 1.8rem;
    font-size:3rem;
    width:32rem;
    outline:none;
    vertical-align:middle;
    cursor:pointer;
    text-align:center;
    font-family: 'YeogiOttaeJalnan';
    margin: 0 0 .6rem .8rem;
}
.info-form input[type="text"]#nameInput{ cursor:text; }
.info-form input::placeholder{ color:rgba(255,85,21,.4); }

.name-field{
    position:relative;
    display:inline-block;
    margin: 0 .4rem .2rem;
    vertical-align:middle;
}
.name-field input[type="text"]{width:30.3rem;}
.name-field:after {
    content:'* 실명이 아닌 닉네임을 입력하세요.';
    position:absolute;
    left:50%;
    bottom:-2rem;
    margin-left:-10rem;
    color:var(--text);
    font-size:1.4rem;
    line-height:3rem;
    font-family:'Pretendard', sans-serif;
    width:20rem;
    text-align:center;
}
.nickname-bubble{
    position:absolute;
    left:50%;
    top:100%;
    transform:translate(-50%,-.5rem);
    min-width:27rem;
    height:4rem;
    box-sizing:border-box;
    background:#FF262A;
    color:#fff;
    font-size:1.6rem;
    border-radius:4rem;
    display:inline-flex;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 2rem;
    z-index:5;
    line-height:1;
    opacity:0;
    white-space:nowrap;
    pointer-events:none;
    transition:opacity .2s ease;
    filter: drop-shadow(0rem .5rem 1rem rgba(255, 102, 139, 0.3));
  }
.nickname-bubble.is-visible{ opacity:1; }
.nickname-bubble::before{
    content: "";
    position: absolute;
    top:-1.5rem;
    left:1rem;
    width: 4.9rem;
    height: 3.5rem;
    background:url("/images/nickname-bubble_tail-c3aa2eecaab0f7e293f551345549179c.webp") no-repeat center center/cover;
    z-index:0;
}
.nickname-bubble img {width:2rem; height:2rem; margin-right:.5rem;}
.nickname-bubble img,
.nickname-bubble .bubble-text {
    position:relative;
    z-index:1;
}

@media all and (max-width:780px) {
    .info-form p{
        line-height:3.3;
    }

    .info-form input[type="text"]{
        height:8rem;
        margin: 0 0 .6rem .8rem;
    }
    .name-field:after {
        bottom:-2.5rem;
        font-size:2rem;
        width:40rem;
        margin-left:-20rem;
    }
}




/* ================= TEST STEP ================= */
.meal-tray {
    position:relative;
    width:40rem;
    height:32rem;
    aspect-ratio:1/1;
    margin:0 auto 3rem;
    border-radius:6rem;
}
.meal-tray:after {
    content:'';
    position:absolute; 
    left:-1.2rem; 
    top:-.3rem;
    width:42.4rem;
    height:38.4rem;
    background:url(/images/meal_shadow-e37557878bb1c356a0b8ded11daf7413.webp) no-repeat center center/cover;
    z-index:1;
}
.meal-tray.result {
    width:50rem; 
    height:40rem; 
    margin:0 auto 2.8rem;
}
.meal-tray.result:after {
    left:-3.7rem; 
    top:-.4rem;
    width:57.5rem;
    height:48rem;
}
.meal-tray.share {
    width:650px; height:520px;
}
.meal-tray.share:after {
    left:-4.7rem; 
    top:-.4rem;
    width:74.6rem;
    height:62.4rem;
}
.meal-tray .meal-base {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.meal-tray .meal-img, .meal-tray .meal-selected {
    position: absolute;
    top: 0px;
    z-index: 3;
    display: none;
    text-align:center;
    width:40rem;
    left:50%;
    transform:translateX(-50%);
}
.meal-tray .meal-selected {
    display: block;
}
.meal-tray.result .meal-selected {
    width:50rem;
}
.meal-tray.share .meal-selected {
    width:65rem;
    top:0px;
}
.meal-tray.show-1 .meal-img-1,
.meal-tray.show-2 .meal-img-2,
.meal-tray.show-3 .meal-img-3 {
    display: block;
    width:40rem;
}

.meal-options{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    position:relative;
    z-index:3;
}
.meal-options.vertical {
    flex-direction:column;
    margin-top:6rem;
    gap:1.5rem;
    margin-bottom:4.5rem;
}
.meal-option{
    display:flex;
    text-decoration:none;
    flex-direction:column;
    align-items:center;
    width:33%;
    gap:.8rem;
    position:relative;
    cursor:pointer;
    letter-spacing:-1%;
}
.meal-options.vertical .meal-option{
    flex-direction:row;
    width:100%;
    gap:2rem;
}
.meal-option:nth-of-type(2) {width:35%;}
/* 라디오 입력을 a 태그 + span으로 바꿨다(GA 클릭 수집).
   체크 상태는 :checked가 아니라 .is-active가 잡는다. */
.meal-option .pick-mark {
    display: block;
    flex-shrink: 0;   /* input과 달리 빈 span은 0까지 줄어든다 — vertical 배치에서 눈금이 깨지지 않게 */
    width: 6rem;
    height: 6rem;
    margin: 0;
    padding: 0;
    background: url("/images/pick_off-8470ca5f2f02b70b081c1b203466f231.webp") center / contain no-repeat;
    cursor: pointer;
    opacity:.6;
}
.meal-option.is-active .pick-mark {
    background-image: url("/images/pick_on-3161208076eb6cd4c58cc8257830cb5e.webp");
    opacity:1;
}
.meal-option .label {
    font-size:4rem;
    color:var(--text);
    opacity:.6;
    text-align:center;
    color:#fff;
    font-family: 'YeogiOttaeJalnan';
    transition:opacity .2s ease;
    line-height:1.2;
}
.meal-option .label.b {
    font-size:3.5rem;
    margin:0 0 .6rem;
}
.meal-option .label.long {font-size:2rem;}
.meal-option .label small {
    display:block; 
    font-size:2rem;
    font-family:'Pretendard', sans-serif;
    font-weight:600;
    margin:1.5rem 0 0;
    letter-spacing:-0.04em;
}
.meal-option.is-active .label {
    opacity:1; 
    font-weight:700; 
}

.point-bubble{
    position:absolute;
    top:-10rem;
    left:50%;
    transform:translateX(-50%) translateY(50%) scale(.85);
    display:flex; 
    justify-content: center; 
    align-items: center;
    background:var(--green);
    color:#fff;
    border-radius:6rem;
    padding:.2rem;
    width:16rem;
    height:8rem;
    font-size:3rem;
    opacity:0;
    letter-spacing:0;
    font-family: 'YeogiOttaeJalnan';
    transition:opacity .15s ease, transform .15s ease;
    pointer-events:none;
}
.point-bubble::before{
    content: "";
    position: absolute;
    bottom: -5.2rem;
    left: 52%;
    width: 5.2rem;
    height: 5.8rem;
    background:var(--green);
    clip-path: path('M 33.2 0 L 35.9 9.9 Q 42.2 24.5 29.1 16.2 L 0 0 Z');
    transform: translateX(-50%) scaleX(-1);
}
.meal-option.show-bubble .point-bubble{
    opacity:1;
    transform:translateX(-50%) scale(1);
}


@media all and (max-width:780px) {

    .meal-tray {
        width:60rem;
        height:48rem;
        margin:0 auto 6rem;
    }
    .meal-tray:after {
        left:-4rem; 
        top:-.5rem;
        width:68rem;
        height:56.5rem;
        background:url(/images/meal_shadow_m-723aa44288a3e010170ce45ec2eaa7fa.webp) no-repeat center center/cover;
    }
    .meal-tray.result {
        width:60rem; 
        height:48rem; 
        margin:0 auto 2.8rem;
    }
    .meal-tray.result:after {
        left:-4rem; 
        top:-.5rem;
        width:68rem;
        height:56.5rem;
    }
    .meal-tray.share {
        width:65rem; height:52rem;
    }
    .meal-tray.share:after {
        left:-47px; 
        top:-4px;
        width:746px;
        height:624px;
        background:url(/images/meal_shadow-e37557878bb1c356a0b8ded11daf7413.webp) no-repeat center center/cover;
    }

    .meal-tray .meal-img, .meal-tray .meal-selected {
        width:60rem;
    }
    .meal-tray.result .meal-selected {
        width:60rem;
    }
    .meal-tray.share .meal-selected {
        width:65rem;
        top:0px;
    }
    .meal-tray.show-1 .meal-img-1,
    .meal-tray.show-2 .meal-img-2,
    .meal-tray.show-3 .meal-img-3 {
        width:60rem;
    }
    
    .meal-options.vertical {
        margin-top:15.5rem;
        gap:3.5rem;
    }

    .meal-option .label.long {font-size:2.5rem;}
}



/* ================= TEST RESULT ================= */

.result-box {
    position:relative;
    display:flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction:column;
    gap:4rem;
    background:#fff;
    width:100%;
    padding:6rem;
    border-radius:6rem;
    box-shadow:0rem .5rem 1rem rgba(67, 49, 44, 0.5), 0rem 6rem 6rem rgba(67, 49, 44, 0.2);
    z-index:2;
}
.result-box h3 {
    font-family: 'YeogiOttaeJalnan';
    font-size:3rem;
    line-height:5rem;
    color:var(--text);
    }
.result-box h3 span {
    font-size:3rem;
}

.result-title {
    display:flex; 
    justify-content: center; 
    align-items: center; 
    width:40rem;
    height:8rem;
    background:var(--purple);
    color:#fff;
    border-radius:6rem;
    font-size:4rem;
    text-align:center;
    font-family: 'YeogiOttaeJalnan';
    letter-spacing:0;
}
.result-txt {font-size:2.5rem;font-family: 'YeogiOttaeJalnan'; letter-spacing:0;}
.result-txt span {font-size:2.5rem; color:var(--green);}

.result-friend {
    display:flex; 
    justify-content: center; 
    align-items: center; 
    width:100%;
    border:.6rem solid #FFE7B3;
    padding:3rem;
    border-radius:4rem;
    gap:30px;
}
.result-friend li {
    text-align:center;
    width:100%;
}
.result-friend li img {
    max-width:17.8rem;
    margin:0 auto 1.5rem;
}
.result-friend li label {
    display:flex; 
    justify-content: center; 
    align-items: center; 
    width:100%;
    height:5rem;
    background:var(--pink);
    color:#fff;
    font-size:2.5rem;
    border-radius:5rem;
    font-family: 'YeogiOttaeJalnan';
}
.result-friend li + li label {
    background:var(--blue);
}
.result-friend li h4 {
    font-family: 'YeogiOttaeJalnan';
    font-size:3rem;
    margin:0 0 1.5rem;
}
.result-friend li p {
    font-size:2rem;
    font-weight:700;
    line-height:1.5;
}

.result-submit {
    display:flex; 
    justify-content: center; 
    flex-direction:column;
    gap:2rem;
}
.result-submit a {
    position:relative;
    display:flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
    background:var(--green);
    color:#fff;
    font-size:3.5rem;
    border-radius:5rem;
    width:58rem;
    height:10rem;
    padding:.4rem;
    box-shadow:0rem 1rem 2rem rgba(250, 122, 27, 0.2);
}
.result-submit a + a {
    background:var(--point);
}
.result-submit a div {
    font-family: 'YeogiOttaeJalnan';
    display:flex; 
    justify-content: center; 
    align-items: center; 
    border:.3rem solid #FFE7B3;
    width:100%;
    height:100%;
    border-radius:5rem;
    font-size:3.5rem;
}
.result-submit a span {
    font-family: 'YeogiOttaeJalnan';
    font-size:3.5rem;
    color:#FFE7B3;
    margin:0;
    display:inline-block;
    vertical-align:middle;
}
.result-submit a + a span {margin:0 1rem;}
.result-submit a img {
    display:inline-block;
    margin:0 1rem 0 0;
    vertical-align:middle;
}



/* ================= TEST SHARE ================= */
.share_inner {
    display:flex; 
    justify-content: center; 
    flex-direction:row;
    flex-wrap: wrap;
    max-width:1600px;
    margin:0 auto;
    padding:12rem 0 0;
}

.share_logo {
    width:100%; 
    margin:0 auto 100px; 
    display:flex; 
    justify-content: center; 
}
.share_left {
    width:800px;
}
.share_left .test-title {
    text-align:center;
    font-size:90px;
    margin:0 0 120px;
}
.share_left .test-title span, .share_left .test-title b {
    font-size:80px;
}

.share-box {
    display:flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction:column;
    background:#fff;
    width:70rem;
    padding:70px 45px;
    border-radius:60px;
    box-shadow:0 5px 10px rgba(67, 49, 44, 0.5), 0 60px 60px rgba(67, 49, 44, 0.2);
}
.share-box h3 {
    font-family: 'YeogiOttaeJalnan';
    font-size:36px;
    line-height:50px;
    color:var(--text);
    text-align:center;
    margin:0 0 50px;
}
.share-box h3 span {
    font-size:36px;
}

.share-title {
    display:flex; 
    justify-content: center; 
    align-items: center; 
    width:500px;
    height:120px;
    background:var(--purple);
    color:#fff;
    border-radius:70px;
    font-size:60px;
    text-align:center;
    font-family: 'YeogiOttaeJalnan';
    letter-spacing:0;
    margin:0 0 20px;
}

.share-row {
    margin-top:44px;
}


/* =========================================================
   modal overlay (school search / loading)
   ========================================================= */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(67,49,44,.85);
    backdrop-filter:blur(.8rem);
    -webkit-backdrop-filter:blur(.8rem);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    padding:2rem;
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }

.modal-box{
    position:relative;
    background:#fff;
    width:60rem;
    max-width:100%;
    border-radius:6rem;
    padding:6rem;
    max-height:90vh;
    overflow-y:auto;
}
.modal-box.modal-loading{
    width:60rem;
    height:46rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.modal-close{
    position:absolute;
    top:3rem; right:3rem;
    width:4rem; height:4rem;
    border:none;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    background:url("/images/modal_close-575efa49331cab5358297c4add0e0856.webp") no-repeat center center;
}
.modal-close svg{ width:2rem; height:2rem; stroke:var(--text); stroke-width:2.4; }

.modal-title{
    font-family:'YeogiOttaeJalnan';
    font-size:4rem;
    text-align:center;
    margin:0 0 3rem;
    color:var(--text);
}
.modal-title span {
    font-size:4rem;
    color:var(--point);
}
.modal-box p {font-size:1.4rem; text-align:center;}
.modal-box p u {font-weight:700; font-size:1.4rem;}

/* school search */
.school-type{
    display:flex;
    justify-content:space-between;
    margin:0 0 2rem;
}

.school-type-btn{
    display:flex;
    align-items:center;
    gap:.7rem;
    font-size:3rem;
    cursor:pointer;
    width:23.5rem;
    height:6rem;
    color:#fff;
    border-radius:3rem;
    justify-content:center;
    background:var(--text);
}
.school-type-btn .label-text {font-size:3rem;font-family: 'YeogiOttaeJalnan';}
.school-type-btn input[type="checkbox"]{
    display:none;
}
.school-type-btn .checkbox-icon{
    width:3.2rem;   /* 32px */
    height:3.2rem;  /* 32px */
    background:url("/images/checkbox-2aec2e15619573b0df732df31931f182.webp") no-repeat center/contain;
    flex-shrink:0;
}
.school-type-btn input[type="checkbox"]:checked + .checkbox-icon{
    background-image:url("/images/checkbox_selected-0e801431e8f8ca9795c2abee941ff93f.webp");
}

.school-type-btn:has(input[type="checkbox"]:checked){
    background:var(--point);
}

.school-search-row{
    display:flex;
    gap:1rem;
    margin:0 0 2rem;
}
.school-search-row input[type="text"]{
    flex:1;
    width:41rem;
    height:6rem;
    border:.4rem solid var(--point);
    border-radius:4rem;
    padding:0 1.8rem;
    font-size:3rem;
    border-radius:3rem;
    outline:none;
    text-align:center;
    font-family: 'YeogiOttaeJalnan';
    color:var(--point)
}

.school-search-btn{
    flex-shrink:0;
    display:block;
    width:6rem;
    height:6rem;
    border:none;
    background:none;
    outline:0;
    cursor:pointer;
    background:url("/images/modal_search-b1467c7b48290c6b36d692dcda1837ec.webp") no-repeat center center/cover;
}
.school-search-row input::placeholder{ color:rgba(255,85,21,.4); }

.school-result{
    width:48rem;
    max-width:100%;
    height:29rem;
    margin:0 auto;
    border:.4rem solid #FFE7B3;
    border-radius:3rem;
    padding:2rem 1.2rem 2rem 2rem;
    margin:0 0 1.4rem;
}
.school-result.is-visible{ display:block; }
.school-result-title{
    font-size:1.5rem;
    margin:0 auto 1.4rem;
    text-align:center;
    color:var(--text);
    background:#FFE7B3;
    width:42.2rem;
    height:3rem;
    line-height:3rem;
    border-radius:2rem;
    font-family: 'YeogiOttaeJalnan';
    letter-spacing:0;
}

.scrollable-container {
    display:flex;
    height: 20rem;
    overflow-y: auto;
    padding-right:1rem;
}

.school-list {
    display:flex;
    flex-direction:column;
    gap:.8rem;
}

.school-list-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding-right:1rem;
}
.school-list-item span {
    font-size:2rem;
    color:var(--text);
}
.school-list-item .info{
    display:flex;
    flex-direction:column;
    gap:.3rem;
    min-width:0;
}
.school-list-item .name{
    font-family: 'YeogiOttaeJalnan';
}
.school-list-item .address{
    font-size:1.4rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.school-list-item .pick-btn{
    border:none;
    background:var(--text);
    width:10rem;
    height:4rem;
    text-align:center;
    color:#fff;
    font-size:2rem;
    border-radius:4rem;
    flex-shrink:0;
    font-family: 'YeogiOttaeJalnan';
    cursor:pointer;
}
.school-empty{
    text-align:center;
    color:#B7A48F;
    font-size:1.4rem;
    padding:2rem 0;
}


@media all and (max-width:780px) {
    .modal-box{
        padding:4rem;
    }
    .modal-close{
        top:3rem; right:3rem;
        width:6rem; height:6rem;
        background:url("/images/modal_close_m-427f3c85ddc370e2eab79e5ec9c581e6.webp") no-repeat center center/cover;
    }
    .school-search-row input[type="text"]{
        width:43rem;
        height:8rem;
        padding:0 1.8rem;
        border-radius:4rem;
    }
    .school-search-btn{
       width:8rem;
        height:8rem;
        background:url("/images/modal_search_m-eeac57478c61b79182e9d50a4328223b.webp") no-repeat center center/cover;
    }
    
    .school-result{
        width:100%;
        max-width:100%;
        border-radius:3rem;
        height:73rem;
        padding:2rem 1rem 2rem 2rem;
        margin:0 0 1.4rem;
    }
    .school-result-title{
        font-size:2.8rem !important;
        width:100%;
        height:6rem;
        line-height:6rem;
        border-radius:3rem;
    }

    .school-list {
        margin:2rem 0 0;
        gap:1.6rem;
    }

    .scrollable-container {
        height: 60rem;
        padding-right:1.5rem;
    }
    .school-list-item{
        gap:1rem;
        padding-right:1rem;
    }
    .school-list-item span {
        font-size:2.8rem;
        line-height:1.2;
        color:var(--text);
    }
    .school-list-item .info{
        display:flex;
        flex-direction:column;
        gap:.8rem;
    }
    .school-list-item .address{
        font-size:2.4rem;
    }
    .school-list-item .pick-btn{
        width:12rem;
        height:6rem;
        font-size:3rem;
    }
    .school-empty{
        color:var(--text);
        font-size:2.4rem !important;
        padding:2rem 0;
    }
}


/* loading modal */
.loading-text{
    font-size:4rem !important;
    line-height:1.4;
    color:var(--text);
    margin:0 0 3rem;
    font-family:'YeogiOttaeJalnan';
}
.loading-text span{
    font-size:4rem;
}
.loading-spinner{
    width:8rem;
    height:8rem;
    display:block;
    animation:spin 1.1s linear infinite;
    transform-origin:50% 50%;
}
@keyframes spin{
    to{ transform:rotate(360deg); }
}
.loading-caption{
    margin-top:1rem;
    font-size:2rem !important;
    font-family:'YeogiOttaeJalnan';
    color:var(--point);
    animation:blink 1s ease-in-out infinite;
}
@keyframes blink{
    0%,100%{ opacity:1; }
    50%{ opacity:.25; }
}



/* =========================================================
   point bar + prev/next
   ========================================================= */
.nav-row{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.6rem;
    width:70rem;
    height:10rem;
    margin:4rem auto 0;
    border-radius:6rem;
    background:#fff;
    padding:1rem;
    box-shadow:0px 5px 10px rgba(67, 49, 44, 0.5), 0px 60px 60px rgba(67, 49, 44, 0.2);
    z-index:4;
}
.nav-arrow{
    position:absolute;
    top:50%;
    -webkit-transform:translateY(-50%); -ms-transformY:translate(-50%); transform:translateY(-50%);
    transition:opacity .2s ease,transform .2s ease;
}
.nav-arrow img {width:8rem;}
.nav-arrow.next {right:10px;}
.nav-arrow.prev {left:10px;}
.nav-arrow.is-disabled{
    pointer-events:none;
    cursor:default;
}
.nav-arrow.is-disabled *{
    pointer-events:none;
    cursor:default;
}
.nav-tooltip{
    position:absolute;
    top:-10rem;
    left:50%;
    transform:translateX(-50%) translateY(.4rem);
    background:var(--purple);
    color:#fff;
    font-size:3rem;
    border-radius:6rem;
    width:17rem;
    height:8rem;
    font-family: 'YeogiOttaeJalnan';
    opacity:0;
    display:flex; 
    justify-content: center; 
    align-items: center;
    z-index:6;
    pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
    filter: drop-shadow(0rem .5rem .5rem rgba(67, 49, 44, 0.4));
}
.nav-tooltip.result {
    width:25.2rem;
    left:-10%;
    transform:translateX(-50%) translateY(.4rem);
}
.nav-tooltip b {
    font-size:3rem;
    font-weight:normal; 
    color:#FFE7B3;
    display:inline-block;
    margin:0 10px 0 0;
}
.nav-tooltip::before{
    content: "";
    position: absolute;
    bottom:-1.5rem;
    left:8.8rem;
    width: 4.9rem;
    height: 3.5rem;
    background:url("/images/nav-tooltip_tail-977c2c9629f7808c47e43320e69b85fa.webp") no-repeat center center/cover;
    z-index:0;
}
.nav-tooltip.result::before {
    left: 70%;
}
.nav-arrow:hover .nav-tooltip{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

.nav-arrow.next.show-tooltip .nav-tooltip {
    opacity: 1;
    transform:translateX(-50%) translateY(0);
}

.nav-arrow:hover .nav-tooltip.result {
    opacity:1;
    transform:translateX(-50%)  translateY(0);
}

.point-panel{
    flex:1;
    height:8rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:48rem;
    margin:0 auto;
}
.point-panel .point-label{
    font-family: 'YeogiOttaeJalnan';
    font-size:3rem;
    color:var(--text);
}
.point-panel .point-label b {
    font-family: 'MoveSans';
    font-size:3rem;
    color:var(--point);
}
.point-track{
    position:relative;
    width:48rem;
    height:3rem;
    background:#ECE5DD;
    border-radius:2rem;
    overflow:hidden;
}
.point-fill{
    position:absolute;
    top:0; right:0;
    height:100%;
    width:100%;
    background:var(--point);
    border-radius:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:width .4s ease;
}
.point-fill.bonus {background:var(--blue);}
.point-fill span{
    font-size:2rem;
    color:#fff;
    font-family:'YeogiOttaeJalnan';
    white-space:nowrap;
}


@media all and (max-width:780px) {
    .nav-row{
        position:absolute !important;
        left:50%; -webkit-transform:translateX(-50%); -ms-transformX:translate(-50%); transform:translateX(-50%);
        bottom:4rem;
        height:12rem;
    }
    .nav-arrow img {width:10rem;}

    .nav-tooltip{
        left:50%;
        transform:translateX(-58%) translateY(.4rem);
        background:var(--purple);
        color:#fff;
        font-size:3rem;
        border-radius:6rem;
        width:17rem;
        height:8rem;
        font-family: 'YeogiOttaeJalnan';
        opacity:0;
        display:flex; 
        justify-content: center; 
        align-items: center;
        z-index:6;
        pointer-events:none;
        transition:opacity .18s ease,transform .18s ease;
        filter: drop-shadow(0rem .5rem .5rem rgba(67, 49, 44, 0.4));
    }
    .nav-tooltip.result {
        left:20%;
        transform:translateX(-50%) translateY(.4rem);
    }
    
    .nav-arrow:hover .nav-tooltip{
        transform:translateX(-50%) translateY(0);
    }

    .nav-arrow.next.show-tooltip .nav-tooltip {
        transform:translateX(-58%) translateY(0);
    }

    .point-panel{
        height:10rem;
        gap:.6rem;
    }
    .point-track{
        width:44rem;
        height:4rem;
    }
    .point-fill span{
        font-size:2.4rem;
    }
}

/* =========================================================
   퍼블리싱 원본에 없는 규칙 — 서버 렌더링 때문에 우리가 추가한 것들.
   CSS를 새로 받을 때마다 사라지므로 파일 끝에 모아 둔다.
   (260827 퍼블리싱 반영 시 복원 — 2026-08-27)
   ========================================================= */

/* 링크 복사 안내 토스트. 공유 버튼(share.js)이 띄운다. */
.share-toast{
    position:fixed;
    left:50%;
    bottom:6rem;
    transform:translateX(-50%);
    z-index:9999;
    padding:1.6rem 2.8rem;
    border-radius:3rem;
    background:rgba(0,0,0,.8);
    color:#fff;
    font-size:2.4rem;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease;
}
.share-toast.is-visible{
    opacity:1;
    visibility:visible;
}

/* 결과 유형 블록 — 6종을 마크업에 다 두고 판정된 하나만 켠다(test9.html 주석 참조).
   .result-box가 flex column이라, 켜진 블록이 그 레이아웃을 그대로 이어받아야
   기존 간격·정렬이 유지된다. */
.result-type {
    display:none;
}
.result-type.is-active {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:4rem;
    width:100%;
}