
html {
    scroll-snap-type: y mandatory; /* 세로 방향 스냅 강제 */
    scroll-behavior: smooth;
}


/* 버튼 */
.main-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:48px;   /* w-12 */
    height:48px;  /* h-12 */

    background:rgba(255,255,255,0.8);          /* bg-white/80 */
    backdrop-filter:blur(12px);                 /* backdrop-blur-md */
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.6);     /* border-white/60 */
    border-radius:9999px;                       /* rounded-full */

    box-shadow:0 4px 10px rgba(255,143,163,0.2); /* shadow-[...] */

    color:#2D2D2D;           /* text-brand-text (fallback 포함) */
    cursor:pointer;

    transition:transform .3s ease-out, box-shadow .3s ease-out, color .3s ease-out; /* transition-all duration-300 ease-out */
}

/* hover */
.main-menu-btn:hover{
    box-shadow:0 10px 25px rgba(255,143,163,0.4); /* hover:shadow-[...] */
    transform:translateY(-4px);                   /* hover:-translate-y-1 */
    color:#FF8FA3;         /* hover:text-brand-pink-dark */
}

/* active */
.main-menu-btn:active{
    transform:translateY(0) scale(0.95);           /* active:translate-y-0 active:scale-95 */
}

/* 아이콘 */
.main-menu-btn__icon{
    font-size:20px;                                /* text-xl */
    transition:color .3s;                          /* transition-colors duration-300 */
}








/* =========================
   Dropdown Wrapper
========================= */

.main-menu-dropdown{
    display:none; /* hidden */

    position:absolute;
    top:64px;  /* top-16 */
    left:0;
    width:192px; /* w-48 */

    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border-radius:1.5rem;
    border:1px solid rgba(255,255,255,0.4);
    box-shadow:0 15px 35px rgba(0,0,0,0.1);

    overflow:hidden;
    transform-origin:top left;

    transition:all .3s;
    z-index:50;
}

/* 열릴 때 */
.main-menu-dropdown.is-open{
    display:block;
}


/* =========================
   Inner Padding
========================= */

.main-menu-dropdown__inner{
    padding:8px 0;
}


/* =========================
   Menu Item
========================= */

.main-menu-item{
    display:flex;
    align-items:center;
    gap:12px;

    padding:14px 20px;

    text-decoration:none;
    transition:background .3s;
}

.main-menu-item:hover{
    background:rgba(255,255,255,0.6);
}


/* =========================
   Icon
========================= */

.main-menu-item__icon{
    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:12px;
    transition:all .3s;
}

/* Pink Variant */
.main-menu-item__icon--pink{
    background:rgba(255,143,163,0.1);
    color:#e94b6d;
}

.main-menu-item:hover .main-menu-item__icon--pink{
    background:#e94b6d;
    color:#fff;
}

/* Yellow Variant */
.main-menu-item__icon--yellow{
    background:rgba(255,193,7,0.1);
    color:#f4b400;
}

.main-menu-item:hover .main-menu-item__icon--yellow{
    background:#f4b400;
    color:#fff;
}


/* =========================
   Text
========================= */

/* 메뉴 텍스트: 한글 폴백 안정화 (궁서체 방지) */
.main-menu-text{
    font-family: "Jua", sans-serif;
    font-style: normal;
    font-size: 0.875rem;   /* text-sm */
    font-weight: 700;      /* font-bold */
    color: #6b7280;        /* text-gray-500 */
    transition: color .3s; /* transition-colors */
}

/* 메뉴 hover 색상도 tailwind config의 brand-pink-dark 느낌으로 */
.main-menu-item:hover .main-menu-text{
    color: #FF8FA3; /* brand-pink-dark */
}


/* =========================
   Divider
========================= */

.main-menu-divider{
    height:1px;
    margin:0 8px;
    background:linear-gradient(to right, transparent, #e5e7eb, transparent);
}



#loginhello { margin: 0 20px 0 0; font-weight: 700; font-size: 1.2em; color: red; }


/* 위치 고정 */
.together-fixed{
	display: flex;
	align-items: center;
	position: fixed;
    top: 24px;
    right: 24px;
    z-index: 50;
    animation: float 3s ease-in-out infinite;
}

/* 버튼 */
.together-btn{
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 3px solid #FF8FA3;
    border-radius: 999px;
    padding: 10px 20px 10px 10px;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 3px 3px 0 rgba(45,45,45,.1);
}

.together-btn:hover{
    box-shadow: 1px 1px 0 rgba(45,45,45,.1);
    transform: translate(2px,2px);
}

/* 아이콘 원 */
.together-icon{
    width: 40px;
    height: 40px;
    background: #FF8FA3;
    color: #ffffff;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 18px;
    box-shadow: inset 0 0 5px rgba(0,0,0,.1);
    transition: transform .3s ease;
}

.together-btn:hover .together-icon{
    transform: rotate(12deg);
}

/* 텍스트 영역 */
.together-text{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

/* 상단 영문 */
.together-title{
    font-family: "Chewy", "Jua", sans-serif;
    font-size: 18px;
    color: #2D2D2D;
    line-height: 1;
    transition: color .3s;
}

.together-btn:hover .together-title{
    color: #ef4444;
}

/* 하단 한글 */
.together-sub{
    font-size: 11px;
    font-weight: bold;
    color: #9ca3af;
}

.highlight{
    color: #ef4444;
}

/* float 애니메이션 */
@keyframes float{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
}





.mission-grid {
    display: grid;
    gap: 24px;
}

.mission-card {
    position: relative;
    cursor: pointer;
    background: #fff;
    border-radius: 24px;
    border: 1px solid #eee;
    padding: 24px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mission-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.mission-bg {
    width: 100%;
    height: 140px;
    border-radius: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-icon {
    font-size: 48px;
    opacity: .7;
}

.mission-card.theme-emotion .mission-bg { background: rgba(254, 226, 226, 0.5); }
.mission-card.theme-emotion .mission-icon {
    color: rgba(248, 113, 113, 0.5);
    font-size: 4rem;
}


.mission-card.theme-move .mission-bg { background: rgba(219, 234, 254, 0.5); }
.mission-card.theme-move .mission-icon { color: rgba(96, 165, 250, 0.5); }

.mission-card.theme-action .mission-bg { background: rgba(220, 252, 231, 0.5); }
.mission-card.theme-action .mission-icon { color: rgba(74, 222, 128, 0.5); }

.mission-card.theme-default .mission-bg { background: rgba(254, 249, 195, 0.5); }
.mission-card.theme-default .mission-icon { color: rgba(250, 204, 21, 0.5); }

.stamp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
}

.hidden { display: none; }


.mission-verb {
    font-family: "Chewy", system-ui;
    font-size: 2rem;
}
.mission-desc {
    color: #A6ADB7;
    font-size: 0.9rem;
    font-weight: bold;
}
















































/* Breakpoints: md=768px, lg=1024px */
@media (min-width: 768px) {}
@media (min-width: 1024px) {}

/* =========================
   Root wrappers / layout
========================= */
.app-shell{
    width:100%;
    position:relative;
    z-index:10;
    flex-grow:1;
    display:flex;
    flex-direction:column;
}
.main-col{
    flex-grow:1;
    display:flex;
    flex-direction:column;
}

/* =========================
   Logo fixed layer
========================= */
.logo-layer{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh; /* h-100vh */
    pointer-events:none;
    z-index:50;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:4rem; /* pt-16 */
    transform-origin:top;
    will-change:transform;
}
@media (min-width:768px){
    .logo-layer{ padding-top:7rem; } /* md:pt-28 */
}

.main-logo{
    user-select:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    pointer-events:auto;
    transition-property:transform;
    transition-duration:100ms;
    transition-timing-function:linear;
    font-family: "Jua", sans-serif;
}

.logo-stage{
    /* font-display (font-family는 프로젝트 기존 설정을 존중) */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:1.25; /* leading-tight */
    position:relative;
    width:100%;
    height:12vw; /* h-[12vw] */
}
@media (min-width:768px){
    .logo-stage{ height:8vw; } /* md:h-[8vw] */
}

.logo-original{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.5rem; /* gap-2 */
    width:100%;
    opacity:1;
    transition-property:opacity;
    transition-duration:300ms;
}
@media (min-width:768px){
    .logo-original{ gap:0.75rem; } /* md:gap-3 */
}

.logo-scrolled{
    position:absolute;
    top:200px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    opacity:0;
    pointer-events:none;
    transition-property:opacity;
    transition-duration:300ms;
}

.logo-line{
    white-space:nowrap;
    display:flex;
    align-items:center;
    justify-content:center;
}
.logo-line--primary{
    font-size:5.5vw; /* text-[5.5vw] */
}
@media (min-width:768px){
    .logo-line--primary{ font-size:4vw; } /* md:text-[4vw] */
}
.logo-line--secondary{
    font-size:3.5vw; /* text-[3.5vw] */
    margin-top:0.25rem; /* mt-1 */
    font-family: "Chewy", "Jua", sans-serif;
}
@media (min-width:768px){
    .logo-line--secondary{ font-size:2.5vw; } /* md:text-[2.5vw] */
}
.logo-line--scrolled{
    font-size:5.5vw; /* text-[4.5vw] */
    align-items:baseline; /* items-baseline */
}


.logo-accent{
    position:relative;
    /* text-red-500 */
    color: var(--tw-red-500, #ef4444);
}
.logo-accent--mr{
    margin-right:0.5rem; /* mr-2 */
    font-family: "Chewy", "Jua", sans-serif;
}

.logo-scrolled .logo-accent--mr {
    color: #2d2d2d;
}
@media (min-width:768px){
    .logo-accent--mr{ margin-right:0.75rem; } /* md:mr-3 */
}
.logo-accent-shadow{
    position:absolute;
    top:0.25rem; /* top-1 */
    left:0.25rem; /* left-1 */
    /* text-red-300 */
    color: var(--tw-red-300, #fca5a5);
    z-index:-10;
    filter: blur(1px); /* blur-[1px] */
}

.logo-brand-text{
    /* text-brand-text */
    color: #2d2d2d;
}
.logo-kids-mom{
    /* text-brand-pink-dark font-bold text-[3vw] md:text-[2vw] */
    color: #ff8fa3;
    font-weight:700;
    font-size: 5.5vw;
    font-family: "Chewy", "Jua", sans-serif;
}


/* =========================
   Hero stacked area under logo
========================= */
.hero-stack{
    margin-top:1rem; /* mt-4 */
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem; /* gap-4 */
    position:relative;
}
@media (min-width: 768px) {
    .hero-stack {
        margin-top: 3rem; /* 기존 6rem에서 절반으로 줄여 전체 콘텐츠 상향 */
        top: 0;
    }
}

.hero-center{
    position:relative;
    margin-top:1rem; /* mt-4 */
    margin-left:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    visibility:visible;
    z-index:30;
}
@media (min-width:768px){
    .hero-center{ margin-top:0; } /* md:mt-0 */
}


/* 1. 이미지(hero-exc) 위치 상향 조정 */
.hero-exc {
    position: relative;

    /* 크기를 조금 줄였습니다 (기존 width: 18rem; height: 14rem;) */
    width: 16rem;
    height: 12.5rem;

    z-index: 20;

    /* 탑에서 조금 내렸습니다 (기존 margin-top: -2rem;) */
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;

    animation: hero-exc ease-in-out 2s infinite;
}
@keyframes hero-exc {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}
@media (min-width: 768px) {
    .hero-exc {
        width: 26rem;
        height: 20rem;
        margin-top: 0rem; /* PC에서는 더 위로 배치 */
        margin-bottom: 1rem;
    }
}

.hero-exc-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 그림자를 더 깊게 주어 입체감 강화 */
    filter: drop-shadow(0 25px 35px rgba(0,0,0,0.2));
}

/* Wizard badge */
.wizard-badge{
    cursor:pointer;
    border-radius:9999px;
    padding:0.5rem 1.5rem; /* px-6 py-2 */
    display:inline-flex;
    align-items:center;
    justify-content:center;
    pointer-events:auto;
    transition-property:all;
    transition-duration:300ms;
    margin-bottom:1.5rem; /* mb-6 */
}
.fa-arrow-pointer:before, .fa-mouse-pointer:before {
    color: #ff8fa3;
}
.wizard-badge:hover{
    background: color-mix(in srgb, var(--brand-pink) 20%, transparent);
}
.wizard-badge:active{
    transform:scale(0.95);
}
.wizard-badge__text{
    /* font-display */
    font-size:4vw; /* text-[4vw] */
    color:#2D2D2D;
    letter-spacing:0.025em; /* tracking-wide */
    transition: color 300ms;
}
@media (min-width:768px){
    .wizard-badge__text{ font-size:1.5vw; }
}
.wizard-badge:hover .wizard-badge__text{
    color:#FF5C77;
}
.wizard-badge__sub{
    /* font-body font-bold text-[3.5vw] md:text-[1.2vw] ml-2 text-brand-text/80 */
    font-weight:700;
    font-size:3.5vw;
    margin-left:0.5rem;
    color: rgba(45, 45, 45, 0.8);
}
@media (min-width:768px){
    .wizard-badge__sub{ font-size:1.2vw; }
}
.wizard-badge__cursor{
    position:absolute;
    z-index:50;
    pointer-events:none;
    color:#FF8FA3;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
    font-size:1.5rem; /* text-2xl */
    opacity:0;
    /* animate-fake-cursor는 기존 클래스 사용 */
}
@media (min-width:768px){
    .wizard-badge__cursor{ font-size:1.875rem; } /* md:text-3xl */
}
.wizard-badge__cursor-icon{
    transform:rotate(-12deg);
}

/* 1) absolute 기준점 복구: (이게 없어서 커서 레이어가 화면 밖/다른 기준으로 붙으며 “없어진 것처럼” 보일 수 있음) */
.wizard-badge{
    position: relative;
}

/* 2) 원래 tailwind 블록 속성 유지 + 애니메이션 클래스는 HTML에서 유지 */
.wizard-badge__cursor{
    position: absolute;
    z-index: 50;
    pointer-events: none;
    color: #FF8FA3;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); /* drop-shadow-md */
    font-size: 1.5rem; /* text-2xl */
    opacity: 0;
}

/* md:text-3xl */
@media (min-width: 768px){
    .wizard-badge__cursor{ font-size: 1.875rem; }
}

.wizard-badge__cursor-icon{
    transform: rotate(-12deg); /* -rotate-12 */
}

.guide-bubble {
    position: relative;
    width: 95vw;
    max-width: 550px;
    height: 10.5rem;
    background: #fff;
    border-radius: 2rem;
    border: 3px solid #2d2d2d;
    box-shadow: 0 8px 0 rgba(45,45,45,0.15);
    padding: 0.25rem;
    z-index: 30;
    opacity: 0;
    transform: translateY(0); /* 기존 1rem(아래)에서 0으로 조정 */
    transition: all 500ms;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -1rem; /* 추가로 위로 밀어올림 */
}
@media (min-width:768px){
    .guide-bubble{
        width:92vw;
        height:auto;
    }
}
.guide-bubble__caret{
    position:absolute;
    top:-0.75rem; /* -top-3 */
    left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:1.5rem;
    height:1.5rem;
    background:#fff;
    border-top:3px solid #2d2d2d;
    border-left:3px solid #2d2d2d;
    z-index:40;
}
.guide-bubble__inner{
    width:100%;
    height:100%;
    background: color-mix(in srgb, var(--brand-cream) 30%, transparent);
    border-radius:1.8rem;
    border:1px solid #f3f4f6; /* border-gray-100 */
    padding:0.75rem 0.875rem; /* px-3.5 py-3 */
    display:flex;
    align-items:stretch;
    gap:0.75rem; /* gap-3 */
    position:relative;
    overflow:hidden;
}
@media (min-width:768px){
    .guide-bubble__inner{
        padding:0.75rem 1.25rem; /* md:px-5 md:py-3 */
        gap:1rem; /* md:gap-4 */
    }
}
.guide-bubble__glow{
    position:absolute;
    top:0;
    right:0;
    width:5rem;
    height:5rem;
    background: color-mix(in srgb, var(--brand-pink) 10%, transparent);
    border-radius:9999px;
    filter: blur(24px);
    z-index:-10;
}

/* Icon block */
.guide-icon-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:auto;
    align-self:center;
}
.guide-icon-wrap__inner{ position:relative; }

.guide-icon-bg{
    width:3rem;
    height:3rem;
    border-radius:1rem;
    background:#fff;
    border:2px solid #2D2D2D;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem; /* text-xl */
    transition: color 300ms, background-color 300ms, border-color 300ms;
}
@media (min-width:768px){
    .guide-icon-bg{ width:3.5rem; height:3.5rem; font-size:1.5rem; }
}
.guide-icon{ color:#2D2D2D; }

.guide-step-badge{
    position:absolute;
    top:-0.5rem;
    left:-0.5rem;
    background: #f5a623;
    border:2px solid #2d2d2d;
    color: #2d2d2d;
    /* font-display */
    font-size:10px;
    padding:0.125rem 0.375rem;
    border-radius:9999px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transform:rotate(-10deg);
    font-family: "Chewy", "Jua", sans-serif;
}
@media (min-width:768px){
    .guide-step-badge{
        font-size:0.75rem;
        padding:0.125rem 0.5rem;
    }
}

/* Guide content */
.guide-content{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:0.125rem 0; /* py-0.5 */
}
.guide-text{
    transition:opacity 200ms;
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex-grow:1;
}
.guide-title{
    /* font-display text-lg md:text-2xl text-brand-text leading-tight mb-1 break-keep whitespace-normal */
    font-family: "Chewy", "Jua", sans-serif;
    font-size:1.125rem;
    color: #2d2d2d;
    line-height:1.25;
    margin-bottom:0.25rem;
    word-break:keep-all;
    white-space:normal;
}
@media (min-width:768px){
    .guide-title{ font-size:1.5rem; }
}
.guide-desc{
    /* font-body text-xs md:text-base text-gray-500 font-bold leading-relaxed break-keep whitespace-normal */
    font-size:0.75rem;
    font-weight:700;
    line-height:1.625;
    color:#6b7280;
    word-break:keep-all;
    white-space:normal;
    font-family: 'Gowun Dodum';
}
@media (min-width:768px){
    .guide-desc{ font-size:1rem; }
}

.guide-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    padding-top:0.5rem; /* pt-2 */
    border-top:1px solid color-mix(in srgb, #e5e7eb 60%, transparent); /* border-gray-200/60 */
    margin-top:auto;
}
.guide-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.guide-controls{ display:flex; gap:0.5rem; }
.guide-btn{
    width:1.75rem; height:1.75rem;
    border-radius:9999px;
    background:#fff;
    border:1px solid #e5e7eb;
    display:flex;
    align-items:center;
    justify-content:center;
    transition-property:all;
    transition-duration:200ms;
}
.guide-btn:active{ transform:scale(0.9); }
.guide-btn__icon{ font-size:10px; }
@media (min-width:768px){
    .guide-btn__icon{ font-size:0.75rem; }
}
.guide-btn--prev{
    color:#9ca3af;
}
.guide-btn--prev:hover{
    color:#2d2d2d;
    border-color:#2d2d2d;
    background:#f9fafb;
}
.guide-btn--next{
    background:#ffd1da;
    color:#fff;
    border-color: #ff91a4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.guide-btn--next:hover{
    background: #ff91a4;
}

/* =========================
   Hero background blobs layer
========================= */
.hero-bg-stage{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-20;
    overflow:hidden;
}
.hero-blob{
    /* blob 기본 형태는 기존 .blob 스타일이 있다면 우선 적용되도록 최소만 설정 */
}
.hero-blob--1{ background: color-mix(in srgb, var(--brand-pink) 40%, transparent); }
.hero-blob--3{ background: color-mix(in srgb, var(--brand-pink) 30%, transparent); }

/* =========================
   HERO section
========================= */
.hero-section{
    min-height:100vh;
    width:100%;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    flex-shrink:0;
    padding-top:5rem; /* pt-20 */
}

.hero-game{
    position:relative;
    margin-top:2.5rem; /* mt-10 */
    opacity:0;
    animation: fadeIn 1s ease-out 1s forwards; /* animate-[fadeIn_1s_ease-out_1s_forwards] */
}
@media (min-width:768px){
    .hero-game{ margin-top:0; }
}

/* game-board sizing wrapper (tailwind arbitrary) */
.game-board--size{
    width:320px;
    height:280px;
}
@media (min-width:768px){
    .game-board--size{ width:500px; height:400px; }
}

.hero-game-caption{
    position:absolute;
    bottom:-4rem; /* -bottom-16 */
    left:0;
    right:0;
    text-align:center;
    /* font-display */
    font-size:1.5rem; /* text-2xl */
    color: rgba(45, 45, 45, 0.5); /* text-brand-text/50 */
    transform:rotate(-2deg);
}

.scroll-hint{
    position:absolute;
    bottom:2.5rem; /* bottom-10 */
    margin-bottom:2.5rem; /* mb-10 */
    text-align:center;
    color: rgba(45, 45, 45, 0.4);
    font-size:0.75rem; /* text-xs */
    font-weight:700;
    letter-spacing:0.1em; /* tracking-widest */
    z-index:10;
    /* scroll-bounce 기존 클래스 사용 */
}
.scroll-hint__icon{ margin-top:0.5rem; }

/* icons colors from tailwind theme names */
.icon-pink-dark{ color:#FF8FA3; }
.icon-retro-yellow{ color:var(--retro-yellow); }
.icon-retro-blue{ color:var(--retro-blue); }
.icon-retro-green{ color:var(--retro-green); }
.icon-brand-text{ color:#2D2D2D; }
.icon-brand-pink{ color:var(--brand-pink); }
.icon-xl{ font-size:1.25rem; } /* text-xl */

/* Dice base */
.dice--base{
    background:#fff;
}
/* =========================
   청킹 한글 + 영어 Marquee
========================= */

.marquee-bar {
    position: relative;
    z-index: 20;
    width: 100%;
    padding: 0;
    overflow: hidden;
    flex-shrink: 0;

    background: #ffffff;
    border-top: 2px solid #2d2d2d;
    border-bottom: 2px solid #2d2d2d;

    box-shadow: 0 4px 12px rgba(45, 45, 45, 0.1);
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: flex;
    width: max-content;
    align-items: stretch;

    animation: marquee 120s linear infinite;
    will-change: transform;
}

.marquee-group {
    display: flex;
    flex-shrink: 0;
    align-items: stretch;
}

/* 청킹 한 칸 */
.marquee-chunk {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 170px;
    min-height: 72px;
    padding: 9px 18px 8px;

    border-right: 1px solid rgba(45, 45, 45, 0.55);

    text-align: center;
    white-space: nowrap;
}

/* 홀수 칸 */
.marquee-chunk:nth-child(odd) {
    background: #fff8e8;
    color: #493a22;
}

/* 짝수 칸 */
.marquee-chunk:nth-child(even) {
    background: #ffd8df;
    color: #703547;
}

/* 윗줄: 청킹한글 */
.marquee-chunk__kor {
    display: block;

    margin-bottom: 5px;

    font-family: "Jua", "Noto Sans KR", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* 아래줄: 청킹영어 */
.marquee-chunk__eng {
    display: block;

    font-family: "Quicksand", "Noto Sans KR", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

/* 칸마다 글자 색상도 교차 */
.marquee-chunk:nth-child(odd) .marquee-chunk__kor {
    color: #614b25;
}

.marquee-chunk:nth-child(odd) .marquee-chunk__eng {
    color: #2d2d2d;
}

.marquee-chunk:nth-child(even) .marquee-chunk__kor {
    color: #8b4058;
}

.marquee-chunk:nth-child(even) .marquee-chunk__eng {
    color: #4c2431;
}

/* 기존과 동일한 무한 이동 */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 767px) {
    .marquee-chunk {
        min-width: 145px;
        min-height: 64px;
        padding: 8px 14px 7px;
    }

    .marquee-chunk__kor {
        margin-bottom: 4px;
        font-size: 14px;
    }

    .marquee-chunk__eng {
        font-size: 12px;
    }

    .marquee-content {
        animation-duration: 100s;
    }
}
/* =========================
   Map section base
========================= */
.map-section{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

/* top banner wrapper */
.map-top-banner{
    position:absolute;
    top:0; left:0;
    width:100%;
    z-index:100;
    display:flex;
    justify-content:center;
    pointer-events:none;
}

/* swaying wrapper (animate-sway, origin-top preserved) */
.map-swing{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:absolute;
    top:0; left:0;
    width:100%;
    z-index:30;
    pointer-events:none;
    transform-origin:top;
    /* animate-sway 기존 클래스 사용 */
}

.map-hangers{
    width:60vw;
    max-width:450px;
    height:8vh;
    display:flex;
    justify-content:space-between;
    padding:0 1.5rem; /* px-6 */
    transition: all 300ms;
}
@media (min-width:768px){
    .map-hangers{ width:40vw; height:10vh; }
}
@media (min-width:1024px){
    .map-hangers{ width:25vw; height:12vh; }
}
.map-hanger{
    width:0.125rem; /* w-0.5 */
    height:100%;
    background: rgba(255, 143, 163, 0.5);
    position:relative;
}
@media (min-width:768px){
    .map-hanger{ width:0.25rem; } /* md:w-1 */
}

/* hanging sign */
.map-sign{
    position:relative;
    background:#fff0f5;
    border:3px solid #FF8FA3;
    border-radius:1rem; /* rounded-2xl */
    width:65vw;
    max-width:600px;
    padding:1.5vh 1.5vw; /* py-[1.5vh] px-[1.5vw] */
    box-shadow: 3px 4px 0 #FF8FA3;
    margin-top:-0.25rem; /* -mt-1 */
    transform:rotate(1deg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.25rem; /* gap-1 */
    transition: all 300ms;
}
@media (min-width:768px){
    .map-sign{
        border-width:4px;
        border-radius:1.5rem; /* md:rounded-3xl */
        width:55vw;
        padding:2vh 1.5vw; /* md:py-[2vh] */
        box-shadow: 6px 8px 0 #FF8FA3;
        gap:0.5rem; /* md:gap-2 */
    }
}
@media (min-width:1024px){
    .map-sign{ width:32vw; }
}

.map-sign__dot{
    position:absolute;
    width:0.375rem; height:0.375rem; /* w-1.5 h-1.5 */
    border-radius:9999px;
    background:#ffd1da;
    border:1px solid #FF8FA3;
}
@media (min-width:768px){
    .map-sign__dot{ width:0.625rem; height:0.625rem; border-width:2px; }
}
.map-sign__dot--tl{ top:0.5rem; left:0.5rem; }
.map-sign__dot--tr{ top:0.5rem; right:0.5rem; }
.map-sign__dot--bl{ bottom:0.5rem; left:0.5rem; }
.map-sign__dot--br{ bottom:0.5rem; right:0.5rem; }

.map-sign__title-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.8vw;
    white-space: nowrap;
    z-index: 10;
    font-family: "Jua", sans-serif;
}
.map-sign__title-text{
    /* font-display text-[3vw] md:text-[2.5vw] lg:text-[1.5vw] text-brand-text text-distinct tracking-tight */
    font-size:3vw;
    color:#2D2D2D;
    letter-spacing:-0.01em;
    transition: all 300ms;
}
@media (min-width:768px){
    .map-sign__title-text{ font-size:2.5vw; }
}
@media (min-width:1024px){
    .map-sign__title-text{ font-size:1.5vw; }
}

.map-sign__highlight{
    position:relative;
    display:inline-block;
    margin:0 0.125rem; /* mx-0.5 */
    transform:rotate(-2deg);
}
.map-sign__highlight-text{
    position:relative;
    z-index:10;
    /* font-display text-[4.5vw] md:text-[4vw] lg:text-[2.4vw] text-red-500 px-1 block */
    font-size:4.5vw;
    color: var(--tw-red-500, #ef4444);
    padding:0 0.25rem;
    display:block;
    transition:all 300ms;
    text-shadow: 2px 2px 0px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
@media (min-width:768px){
    .map-sign__highlight-text{ font-size:4vw; }
}
@media (min-width:1024px){
    .map-sign__highlight-text{ font-size:2.4vw; }
}

.map-sign__underline{
    position:absolute;
    bottom:15%;
    left:0;
    height:15%;
    width:100%;
    background: #FFACBB;
    border-radius:2px;
    z-index:0;
    mix-blend-mode:multiply;
    /* animate-draw-line 기존 클래스 사용 */
}

.map-sign__star{
    position:absolute;
    top:-15%;
    right:-15%;
    font-size:1.5vw;
    color:#fde047; /* text-yellow-300 */
    z-index:20;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
    /* animate-twinkle 기존 클래스 사용 */
}
@media (min-width:1024px){
    .map-sign__star{ font-size:0.8vw; }
}

.map-sign__subtitle-row{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem; /* gap-2 */
    opacity:0.8;
    margin-top:0.5vh;
}
.map-sign__line{
    height:1px;
    width:8%;
    background: #FFACBB;
    border-radius:9999px;
}
@media (min-width:768px){
    .map-sign__line{ height:1.5px; }
}
.map-sign__subtitle{
    /* font-body font-bold text-[2.2vw] md:text-[13px] text-brand-pink-dark tracking-widest uppercase */
    font-weight:700;
    font-size:2.2vw;
    color: #FFACBB;
    letter-spacing:0.1em;
    text-transform:uppercase;
    white-space:nowrap;
}
@media (min-width:768px){
    .map-sign__subtitle{ font-size:13px; }
}

/* Sky effects layer */
.sky-effects{
    position:absolute;
    top:0; right:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:10;
    overflow:hidden;
}
.celestial-body{
    position:absolute;
    top:-2.5rem; right:-2.5rem;
    width:300px; height:300px;
    background: radial-gradient(circle, rgba(255,253,150,0.8) 0%, rgba(255,230,100,0) 70%);
    filter: blur(16px);
    /* animate-sun-glow 기존 클래스 사용 */
    transition: all 1000ms;
}
.sky-glow-corner{
    position:absolute;
    top:0; right:0;
    width:800px; height:800px;
    background: radial-gradient(circle at top right, rgba(255,250,220,0.2) 0%, transparent 60%);
}
.stars-container{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    transition: opacity 1000ms;
}

.alphabet-container{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:10;
    overflow:hidden;
}

/* drag hint */
.drag-hint{
    position:absolute;
    inset:0;
    z-index:40;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: opacity 500ms;
    opacity:0;
}
.drag-hint__pill{
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    color:#fff;
    padding:1rem 2rem; /* px-8 py-4 */
    border-radius:9999px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
    /* animate-pulse-slow 기존 클래스 사용 */
}
.drag-hint__hand{
    font-size:2.25rem; /* text-4xl */
    /* animate-hand-swipe(-vertical), md:animate-hand-swipe 는 기존 클래스 사용 */
}
.drag-hint__text{
    font-weight:700;
    /* font-display */
    font-size:1.25rem; /* text-xl */
    letter-spacing:0.025em;
}

/* ground layer wrapper */
.ground-layer{
    position:absolute;
    bottom:0; left:0;
    width:100%;
    pointer-events:none;
    z-index:10;
    transition: all 1000ms;
}
.ground-svg{ width:100%; height:auto; }
.ground-svg--base{ opacity:0.4; }
.ground-svg--overlay{
    position:absolute;
    bottom:0; left:0;
    opacity:0.6;
}

/* =========================
   Map game container & view
========================= */
.map-game-container{
    height:100%;
    width:100%;
    overflow:hidden;
    position:relative;
    z-index:20;
}
.map-view{
    width:100%;
    height:100%;
    position:relative;
    cursor:grab;
    transition: all 500ms;
}
.map-view:active{ cursor:grabbing; }

.map-scroll-container{
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
}
.map-nodes-container{
    position:relative;
    display:flex;
    align-items:center;
}
.track-svg{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:0;
}

/* Park train */
.park-train{
    display:none; /* hidden */
    align-items:center;
    justify-content:center;
    pointer-events:none;
    transform-origin:center;
}
.train-body{ position:relative; }
.train-img{ width:6rem; height:auto; } /* w-24 */

/* Steam puffs size helpers (tailwind w/h on steam-puff only) */
.steam-puff--sm{ width:0.75rem; height:0.75rem; }
.steam-puff--md{ width:1rem; height:1rem; }

/* =========================
   Overlays/views
========================= */
/* md=768px */
@media (min-width: 768px) {}

/* 상태 토글(기존 JS 호환): Tailwind 없이도 작동하도록 반드시 필요 */
.hidden{ display:none !important; }

/* ===== day intro ===== */
.ui-day-intro-view{
    position:absolute; inset:0;
    z-index:200;
    overflow-y:auto;
    background: color-mix(in srgb, #fff 60%, transparent);
    backdrop-filter: blur(24px); /* backdrop-blur-xl */
    /* animate-fade는 기존 클래스 사용 */
}
.ui-day-intro-inner{
    max-width:64rem; /* 5xl */
    margin:0 auto;
    padding-top:6rem; /* pt-24 */
    padding-left:1rem; padding-right:1rem; /* px-4 */
    display:flex; flex-direction:column; align-items:center;
}

.ui-back-btn{
    align-self:flex-start;
    margin-top:0.5rem; margin-bottom:1rem;
    background:#fff;
    border:2px solid #ff96a8;
    padding:0.5rem 1.25rem;
    border-radius:9999px;
    font-weight:700;
    font-size:0.875rem;
    color:#2D2D2D;
    transition: all 200ms;
    box-shadow: 4px 4px 0 rgba(45,45,45,0.1);
}
.ui-back-btn:hover{ background:#ff96a8; color:#fff; }
.ui-back-btn:active{ box-shadow:none; transform:translateY(0.25rem); }
.ui-back-btn__icon{ margin-right:0.5rem; }

.ui-intro-head{
    position:relative;
    width:100%;
    max-width:56rem; /* 4xl */
    margin:0 auto;
    margin-bottom:1.5rem;
    padding-left:1rem; padding-right:1rem;
    display:flex; flex-direction:column; align-items:center;
}

/* subtitle */
.ui-intro-subtitle-wrap{ position:relative; display:inline-block; margin-bottom:0.75rem; }
.ui-intro-subtitle{
    position:relative;
    z-index:10;
    font-weight:700;
    color:#6b7280;
    font-size:0.875rem;
    padding:0 0.25rem;
}
@media (min-width:768px){
    .ui-intro-subtitle{ font-size:1rem; }
}
.ui-intro-subtitle-underline{
    position:absolute;
    bottom:0.125rem; left:0;
    height:0.625rem;
    width:100%;
    background: #FEB3BF;
    border-radius:2px;
    mix-blend-mode:multiply;
    transform:rotate(-1deg);
    z-index:0;
}

/* title */
.ui-intro-title-wrap {
    position: relative;
    display: inline-block;
    text-align: center;
    z-index: 10;
    margin-bottom: 0;
}

.ui-intro-title{
    position:relative; z-index:10;
    font-size:2.25rem;
    color:#2D2D2D;
    line-height:1.25;
    letter-spacing:-0.01em;
    padding:0 1rem;
    font-family: "Chewy", "Jua", sans-serif;
    text-shadow: 2px 2px 0px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
@media (min-width:768px){
    .ui-intro-title{ font-size:3.75rem; }
}
.ui-intro-title-underline{
    position:absolute;
    bottom:0.5rem; left:0;
    height:0.75rem;
    width:100%;
    background: #FF99AB;
    border-radius:2px;
    mix-blend-mode:multiply;
    transform:rotate(-1deg);
    z-index:0;
}
@media (min-width:768px){
    .ui-intro-title-underline{ height:1.25rem; }
}

/* big day */
/*.ui-intro-day{ margin-top:0.5rem; }*/
.ui-intro-day-text{
    font-size:4.5rem;
    color:var(--retro-yellow);
    transform:rotate(-3deg);
    transition: transform 200ms;
    font-family: "Chewy", "Jua", sans-serif;
    display:flex;
    align-items:baseline;
    justify-content:center;
    text-shadow: 3px 3px 0 #2D2D2D, 6px 6px 0 rgba(0,0,0,0.15);
    -webkit-text-stroke:3px #2D2D2D;
}
@media (min-width:768px){
    .ui-intro-day-text{ font-size:8rem; }
}
.group:hover .ui-intro-day-text{ transform:rotate(0deg); }

.ui-intro-day-label{
    font-size:1.875rem;
    margin-right:0.75rem;
    color:#FF8FA3;
    -webkit-text-stroke:1.5px #2D2D2D;
    text-shadow: 2px 2px 0 #2D2D2D;
}
@media (min-width:768px){
    .ui-intro-day-label{ font-size:3rem; }
}
#intro-day-number {
    color: #F5A623;
}

/* mission grid (grid 유틸을 대체) */
.ui-mission-grid {
    width:100%;
    margin-top:0.5rem;
    padding-bottom:2.5rem;
    display:grid;
    grid-template-columns: 1fr;
    gap:1rem;
}
@media (min-width:768px){
    .ui-mission-grid{
        grid-template-columns: repeat(3, 1fr);
        gap:1.5rem;
    }
}

#mission-grid {
    width: 100%;
    padding-bottom: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
/* 동사 카드 3개 + Together 카드 1개 */
#mission-grid > * {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}
/* Day 화면 우측 Together 카드 */
.together-day-card {
    font-family: inherit;
    text-align: center;
}

.together-day-card__icon {
    background: linear-gradient(
            135deg,
            rgba(255, 143, 163, 0.18),
            rgba(228, 210, 255, 0.45)
    );
    color: #c42e62;
}

.together-day-card:hover {
    border-color: #ff8fa3;
}

.together-day-card:active {
    transform: scale(0.97);
}
/* ===== summary ===== */
.ui-summary-view{
    position:absolute; inset:0;
    z-index:200;
    overflow-y:auto;
    background: linear-gradient(to bottom right, #eef2ff, color-mix(in srgb, var(--map-pink) 10%, transparent));
    backdrop-filter: blur(12px);
}
.ui-summary-inner{
    min-height:100%;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:1.5rem;
}
.ui-summary-head{ text-align:center; margin-bottom:2rem; }
.ui-summary-badge{
    display:inline-block;
    background:#8AC9A6;
    color:#fff;
    padding:0.25rem 1rem;
    border-radius:9999px;
    font-weight:700;
    font-size:0.875rem;
    margin-bottom:0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.ui-summary-title{
    font-size:3rem;
    color:#2D2D2D;
    margin-bottom:0.5rem;
}
.ui-summary-subtitle{
    color:#6b7280;
    font-weight:700;
    font-size:1.125rem;
}

/* summary grid */
.ui-summary-grid{
    width:100%;
    max-width:64rem;
    margin-bottom:3rem;
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
}
@media (min-width:768px){
    .ui-summary-grid{ grid-template-columns:repeat(3,1fr); }
}

/* CTA */
.ui-summary-cta{
    position:relative;
    background:#FF5C77;
    color:#fff;
    font-size:1.5rem;
    padding:1rem 2.5rem;
    border-radius:9999px;
    box-shadow: 0 20px 25px rgba(0,0,0,0.15);
    transition: all 300ms;
}
.ui-summary-cta:hover{ background:var(--map-pink); transform:scale(1.05); }
.ui-summary-cta__content{ position:relative; z-index:10; display:flex; align-items:center; gap:0.75rem; }
.ui-summary-cta__shine{
    position:absolute; inset:0;
    background: color-mix(in srgb, #fff 20%, transparent);
    border-radius:9999px;
    transform:scale(0);
    opacity:0;
    transition: transform 500ms, opacity 500ms;
}
.group:hover .ui-summary-cta__shine{ transform:scale(1.10); opacity:1; }

/* ===== drill ===== */
.ui-drill-view{
    position:absolute; inset:0;
    z-index:200;
    overflow-y:auto;
    padding-bottom:5rem;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-cream) 95%, transparent), color-mix(in srgb, var(--map-pink) 20%, transparent));
    backdrop-filter: blur(12px);
}
.ui-drill-inner{
    max-width:64rem;
    margin:0 auto;
    padding-top:1rem;
    padding-left:1rem; padding-right:1rem;
    height:100%;
    display:flex; flex-direction:column;
}
.ui-drill-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1.5rem;
    padding-top:5rem;
}
.ui-drill-close{
    background:#fff;
    border:1px solid #e5e7eb;
    width:2.5rem; height:2.5rem;
    border-radius:9999px;
    display:flex; align-items:center; justify-content:center;
    color:#9ca3af;
    transition: color 200ms, background-color 200ms;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.ui-drill-close:hover{ background:#fef2f2; color:#ef4444; }

.ui-drill-pill{
    background:#fff;
    padding:0.5rem 1.5rem;
    border-radius:9999px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    display:flex; align-items:center;
    font-family: "Chewy", "Jua", sans-serif;
}
.ui-drill-verb {
    font-size: 1.25rem;
    margin-right: 0.5rem;
    color: #2D2D2D;
}

.ui-drill-found{
    font-size:0.75rem;
    font-weight:700;
    background:#8AC9A6;
    color:#fff;
    padding:0.25rem 0.5rem;
    border-radius:9999px;
    font-family: "Quicksand", sans-serif;
}
.ui-drill-spacer{ width:2.5rem; }
.ui-drill-title .fa-magic-wand-sparkles:before, .ui-drill-title  .fa-wand-magic-sparkles:before {
    color: #FF5C77;
}
.ui-drill-body{
    padding:1rem;
    flex:1;
    position:relative;
    display:flex; flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    min-height:60vh;
}
@media (min-width:768px){
    .ui-drill-body{ padding:2rem; }
}
.ui-drill-title{
    font-size:1.5rem;
    margin-bottom:2rem;
    text-align:center;
    color:#2D2D2D;
    background: color-mix(in srgb, #fff 60%, transparent);
    padding:0.5rem 1.5rem;
    border-radius:9999px;
    display:inline-block;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-family: "Chewy", "Jua", sans-serif;
}
.ui-drill-title__icon{ margin-left:0.5rem; color:#FF5C77; }

.ui-card-grid{
    width:100%;
    max-width:64rem;
    margin:0 auto;
    margin-bottom:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
}
.ui-card-grid > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.ui-mini-card {
    width: 138px;
    height: 184px;
    max-width: 28rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 200ms;
}
.ui-mini-img{ width:8rem; height:8rem; object-fit:contain; margin-bottom:0.75rem; }
.ui-mini-eng{ font-size:1.25rem; color:#2D2D2D; }
.ui-mini-kor{ color:#9ca3af; font-weight:700; font-size:0.875rem; }

.ui-seed-pocket-wrap{
    width:100%;
    max-width:48rem;
    margin-top:3rem;
    padding:1.5rem;
    z-index:20;
}
.ui-seed-pocket-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.ui-seed-pocket-title {
    font-size: 1.25rem;
    color: #FF5C77;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
    font-family: "Chewy", system-ui;
}

.ui-seed-pocket-hint{ font-size:0.75rem; color:#2D2D2D; font-weight:700; opacity:0.7; }
.ui-seed-pocket{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:0.5rem;
    background: color-mix(in srgb, #fff 80%, transparent);
    padding:1rem;
    border-radius:0.75rem;
    border:1px solid color-mix(in srgb, #fff 50%, transparent);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.08);
    backdrop-filter: blur(6px);
}

/* ===== focus overlay ===== */
.ui-focus-overlay{
    position:absolute; inset:0;
    z-index:210;
    background: color-mix(in srgb, #fff 60%, transparent);
    backdrop-filter: blur(12px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0.75rem;
}
@media (min-width:768px){
    .ui-focus-overlay{ padding:1rem; }
}

.ui-focus-card{
    position:relative;
    background:#fff;
    border-radius:1rem;
    border:1px solid var(--map-pink);
    padding:0.75rem;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    display:flex;
    flex-direction:column;
    gap:0.75rem;
    width:100%;
    max-width:56rem;
    height:85vh;
    overflow:hidden;
}
@media (min-width:768px){
    .ui-focus-card{
        border-radius:1.5rem;
        padding:2rem;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:2.5rem;
        height:auto;
        max-height:90vh;
    }
}

.ui-focus-close{
    position:absolute;
    top:0.75rem; right:0.75rem;
    z-index:50;
    width:2rem; height:2rem;
    border-radius:9999px;
    background:#fff;
    color:#FF8FA3;
    border:2px solid #FF8FA3;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
    display:flex; align-items:center; justify-content:center;
    transition: all 200ms;
}
@media (min-width:768px){
    .ui-focus-close{ width:3rem; height:3rem; border-width:3px; }
}
.ui-focus-close:hover{
    background:#FF8FA3;
    color:#fff;
    border-color:#fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}
.ui-focus-close:active{ transform:scale(0.9); }
.ui-focus-close__icon{ font-size:1.125rem; font-weight:900; }
@media (min-width:768px){
    .ui-focus-close__icon{ font-size:1.5rem; }
}

.ui-focus-left{ display:flex; flex-direction:column; align-items:center; padding-top:1.5rem; flex-shrink:0; }
@media (min-width:768px){
    .ui-focus-left{ padding-top:0; }
}

.ui-focus-display{
    width:100%;
    border-radius:0.75rem;
    border:1px solid color-mix(in srgb, var(--map-pink) 30%, transparent);
    padding:0.5rem;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    background: linear-gradient(to bottom right, #fff, var(--brand-cream));
}
@media (min-width:768px){
    .ui-focus-display{ padding:1.5rem; }
}

.ui-focus-img-container{
    width:50%;
    height:7rem;
    margin-bottom:0.5rem;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    flex-shrink:0;
    margin-left:auto; margin-right:auto;
}
@media (min-width:768px){
    .ui-focus-img-container{ width:100%; height:16rem; flex:1; margin-bottom:1.5rem; }
}
.ui-focus-img{
    width:100%; height:100%;
    object-fit:contain;
    padding:0.25rem;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12));
}
@media (min-width:768px){
    .ui-focus-img{ padding:0.5rem; }
}

.ui-focus-text{ text-align:center; }
.ui-focus-eng {
    font-size: 1.5rem;
    color: #2D2D2D;
    line-height: 1;
    margin-bottom: 0.125rem;
    font-family: "Chewy", system-ui;
}

@media (min-width:768px){
    .ui-focus-eng{ font-size:2.25rem; margin-bottom:0.75rem; }
}
.ui-focus-kor{ font-weight:700; font-size:0.75rem; color:#9ca3af; }
@media (min-width:768px){
    .ui-focus-kor{ font-size:1.25rem; }
}

.ui-action-buttons-row{
    width:100%;
    display:flex;
    gap:0.5rem;
    margin-top:0.5rem;
    height:2.5rem;
    flex-shrink:0;
}
@media (min-width:768px){
    .ui-action-buttons-row{ margin-top:1.5rem; height:3rem; }
}

.ui-focus-right{
    display:flex;
    flex-direction:column;
    border:1px solid color-mix(in srgb, var(--map-pink) 30%, transparent);
    border-radius:0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    overflow:hidden;
    background: color-mix(in srgb, var(--brand-cream) 30%, transparent);
    flex:1;
    min-height:0;
}

.ui-focus-tabs{
    display:flex;
    border-bottom:1px solid color-mix(in srgb, var(--map-pink) 20%, transparent);
    background:#fff;
    flex-shrink:0;
    z-index:10;
}
.ui-tab-half{
    width:50%;
    padding:0.5rem;
    font-weight:700;
    font-size:0.875rem;
    transition: all 200ms;
}
@media (min-width:768px){
    .ui-tab-half{ padding:1rem; font-size:1.125rem; }
}

/* 기존 ui-tab-half 아래에 추가 */
.ui-tab-full {
    width: 100%;
    padding: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 200ms;
}
@media (min-width: 768px) {
    .ui-tab-full { padding: 1rem; font-size: 1.125rem; }
}

.ui-focus-panels{
    flex:1;
    position:relative;
    overflow:hidden;
    background: color-mix(in srgb, #fff 50%, transparent);
}
.ui-tab-panel{
    height:100%;
    display:flex;
    flex-direction:column;
    position:absolute;
    inset:0;
    width:100%;
}
.ui-tab-scroll{
    flex:1;
    overflow-y:auto;
    padding:0.5rem;
    scroll-behavior:smooth;
}
@media (min-width:768px){
    .ui-tab-scroll{ padding:1rem; }
}
.ui-tab-table{ padding-bottom:0.5rem; }
.ui-tab-buttons{
    flex-shrink:0;
    padding:0.5rem;
    padding-top:0;
    margin-top:auto;
    background: linear-gradient(to top, #fff, #fff, transparent);
}
@media (min-width:768px){
    .ui-tab-buttons{ padding-top:0; }
}

div#keep-btn-container {
    padding: 0.5rem;
    padding-top: 0;
}








/* ===== JS 필수 유틸 ===== */
.hidden { display: none !important; }

.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

.opacity-0 { opacity: 0 !important; }

.scale-90  { --tw-scale: .9; }
.scale-100 { --tw-scale: 1; }

/* ===== Modal Base ===== */
/* ===== Mobile Card Preview Modal (High Quality - Final Clean Image) ===== */
.ui-mobile-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ui-mobile-preview-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: #ffffff;
    border-radius: 2rem;
    border: 4px solid #FF8FA3;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

/* 닫기 버튼 (가림 방지) */
.ui-mobile-preview-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 44px;
    height: 44px;
    background: #ffffff;
    color: #FF8FA3;
    border: 3px solid #FF8FA3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10;
    transition: background 0.2s, color 0.2s;
}
.ui-mobile-preview-close:hover {
    background: #FF8FA3;
    color: #ffffff;
}
.ui-mobile-preview-close:active {
    transform: scale(0.9);
}

/* 이미지 영역: 배경, 테두리, 그림자 모두 제거 (순수 이미지 컨테이너) */
.ui-mobile-preview-img-wrap {
    width: 100%;
    max-width: 240px; /* 이미지 최대 크기 제한 */
    aspect-ratio: 1 / 1;
    background: transparent; /* 배경 없음 */
    border: none; /* 테두리 없음 */
    margin: 0 auto 1.5rem auto; /* 가운데 정렬 */
    padding: 0; /* 내부 여백 없음 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none; /* 그림자 없음 */
    overflow: hidden; /* 이미지 모서리 깎기용 */
}

/* ❗ 이미지 자체에 약간 둥근 모서리 적용 */
.ui-mobile-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 학습 자료 가리지 않게 비율 유지 */

    /* [핵심] 이미지 자체의 모서리를 약간 둥글게 */
    border-radius: 1rem; /* 원하는 만큼 조절하세요 (예: 16px) */

    /* 피사체가 부각되도록 은은한 피사체 그림자만 적용 (선택사항) */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

/* 텍스트 영역 */
.ui-mobile-preview-text-wrap {
    text-align: center;
    margin-bottom: 1.5rem;
}
.ui-mobile-preview-eng {
    font-family: "Chewy", "Jua", sans-serif;
    font-size: 2.25rem;
    color: #2D2D2D;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.05);
}
.ui-mobile-preview-kor {
    font-family: "Gowun Dodum", sans-serif;
    font-weight: 700;
    color: #9ca3af;
    font-size: 1.125rem;
    margin: 0;
}

/* 버튼 연핑크 그라데이션 애니메이션 정의 */
@keyframes btnPinkGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 학습 시작 버튼 */
.ui-mobile-preview-btn {
    width: 100%;
    background: linear-gradient(270deg, #FFB6C1, #FF8FA3, #FFD1DA, #FF8FA3);
    background-size: 300% 300%;
    animation: btnPinkGradient 3s ease infinite;

    color: #ffffff;
    border-radius: 1rem;
    padding: 1rem;
    font-family: "Chewy", "Jua", sans-serif;
    font-size: 1.25rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 6px 0 #FF7A93, 0 10px 20px rgba(255, 143, 163, 0.4);
    transition: transform 0.1s, box-shadow 0.1s;
}

.ui-mobile-preview-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0px 0 #FF7A93, 0 4px 10px rgba(255, 143, 163, 0.4);
}

/* 7번 듣기 버튼 (심플 & 클릭 유도 디자인) */
.ui-mobile-preview-listen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    color: #FF8FA3;
    border: 2px solid #FFD1DA;
    border-radius: 9999px;
    padding: 12px 24px; /* 여백을 여유있게 (위아래 12px, 양옆 24px) */
    font-family: "Quicksand", "Jua", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 24px; /* 위쪽 텍스트와의 간격을 시원하게 띄움 */
    box-shadow: 0 4px 10px rgba(255, 143, 163, 0.15); /* 부드러운 입체 그림자 */
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 마우스 올렸을 때 살짝 떠오르는 효과 */
.ui-mobile-preview-listen-btn:hover {
    background: #FFF5F7;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(255, 143, 163, 0.25);
}

/* 클릭 시 꾹 눌리는 효과 */
.ui-mobile-preview-listen-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 6px rgba(255, 143, 163, 0.15);
}

/* 재생 중일 때 상태 (핑크색으로 채워지고 발광함) */
.ui-mobile-preview-listen-btn.is-playing {
    background: #FF8FA3;
    color: #ffffff;
    border-color: #FF8FA3;
    animation: pulse-pink-btn 1.5s infinite;
}

/* 카운트 숫자 배지 */
.preview-badge {
    background: #FF8FA3;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.8rem;
    margin-left: 4px;
    transition: all 0.2s;
}

/* 재생 중일 땐 배지 색상이 반전됨 */
.ui-mobile-preview-listen-btn.is-playing .preview-badge {
    background: #ffffff;
    color: #FF8FA3;
}

/* 재생 중 발광 애니메이션 */
@keyframes pulse-pink-btn {
    0% { box-shadow: 0 0 0 0 rgba(255, 143, 163, 0.5); }
    70% { box-shadow: 0 0 0 12px rgba(255, 143, 163, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 143, 163, 0); }
}


.ui-together-modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    transition: opacity .5s ease-out;
}

/* ===== Backdrop ===== */
.ui-together-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ===== Center Wrapper ===== */
.ui-together-center{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

@media (min-width:768px){
    .ui-together-center{
        padding: 1.5rem;
    }
}

/* ===== Modal Card ===== */
.ui-together-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,.5);
    box-shadow: 0 25px 50px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;

    transform: translateZ(0) scale(var(--tw-scale,.9));
    transition: transform .5s ease-out;
}

@media (min-width:768px){
    .ui-together-wrapper{
        width: 88vw;
        height: 92vh;
        border-radius: 2.5rem;
    }
}

/* ===== iframe ===== */
.ui-together-iframe{
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--brand-cream);
}

/* ===== Close Buttons ===== */
.ui-together-close-mobile{
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.ui-together-close-mobile:active{
    transform: scale(.9);
}

@media (min-width:768px){
    .ui-together-close-mobile{
        display: none;
    }
}

.ui-together-close-desktop{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
    border: 1px solid #e5e7eb;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
    display: none;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease;
    cursor: pointer;
}

.ui-together-close-desktop:hover{
    background: #fff;
    transform: scale(1.1);
}

.ui-together-close-desktop:active{
    transform: scale(.95);
}

@media (min-width:768px){
    .ui-together-close-desktop{
        display: flex;
    }
}















/* ===== Modal Base ===== */
.ui-drill-guide-modal{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    padding: 1rem;
}

/* ===== Card ===== */
.ui-drill-guide-card{
    position: relative;
    background: #fff;
    border-radius: 2.5rem;
    padding: 1.5rem;
    max-width: 28rem;
    width: 100%;
    box-shadow: 0 25px 50px rgba(0,0,0,.3);
    border: 4px solid #8AC9A6;
    text-align: center;
    overflow: hidden;
}

@media (min-width:768px){
    .ui-drill-guide-card{
        padding: 2rem;
    }
}

/* ===== Background Blobs ===== */
.ui-drill-bg-blob{
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
}

.ui-drill-bg-blob--green{
    top: -3rem;
    left: -3rem;
    width: 10rem;
    height: 10rem;
    background: rgba(138,201,166,.15);
}

.ui-drill-bg-blob--pink{
    bottom: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: rgba(255,143,163,.15);
}

/* ===== Close Button ===== */
.ui-drill-close-btn{
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #f9fafb;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, background .2s ease;
    cursor: pointer;
}

.ui-drill-close-btn:hover{
    background: #fee2e2;
    color: #ef4444;
}

/* ===== Header ===== */
.ui-drill-header{
    position: relative;
    z-index: 10;
    margin-bottom: 1.5rem;
}

.ui-drill-title{
    font-size: 1.5rem;
    color: #2D2D2D;
    margin-bottom: 30px;
}



.ui-drill-title-accent{
    color: #8AC9A6;
}

.ui-drill-subtitle{
    font-size: .875rem;
    font-weight: 700;
    background: #f9fafb;
    display: inline-block;
    padding: .25rem 1rem;
    border-radius: 9999px;
    border: 1px solid #f3f4f6;
    color: #9ca3af;
}

/* ===== Steps ===== */
.ui-drill-steps{
    margin-bottom: 2rem;
    text-align: left;
}

.ui-drill-step{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: #fff;
    border: 2px solid #f3f4f6;
    padding: 1rem;
    border-radius: 1.5rem;
    margin-bottom: 1rem;
    transition: transform .3s ease, border-color .3s ease;
}

.ui-drill-step:hover{
    transform: translateY(-4px);
    border-color: var(--brand-pink);
}

.ui-drill-step-icon{
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 5px 10px rgba(0,0,0,.15);
}

.ui-step-pink{ background: var(--brand-pink); }
.ui-step-blue{ background: var(--retro-blue); }
.ui-step-green{ background: #8AC9A6; }

.ui-drill-step-title{
    font-size: 1.125rem;
    color: #2D2D2D;
    margin-bottom: .25rem;
}

.ui-drill-step-desc{
    font-size: .75rem;
    color: #6b7280;
    line-height: 1.6;
}

.ui-bold{
    font-weight: 700;
    color: #2D2D2D;
}

/* ===== CTA ===== */
.ui-drill-start-btn{
    position: relative;
    width: 100%;
    background: #8AC9A6;
    color: #fff;
    font-size: 1.25rem;
    padding: 1rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
}

.ui-drill-start-btn:active{
    transform: translateY(2px);
    box-shadow: none;
}

.ui-drill-start-content{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.ui-drill-start-sub{
    font-size: .875rem;
    opacity: .9;
}

.ui-drill-shimmer{
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transform: translateX(-100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer{
    100%{ transform: translateX(100%); }
}






/* ========== Clear Modal ========== */
.clear-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clear-modal.is-hidden {
    display: none;
}

.clear-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(6px);
}

.clear-modal__panel {
    position: relative;
    width: min(520px, 90%);
    margin: 0 auto;
    background: #fff;
    border-radius: 3rem;
    padding: 32px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    border: 8px solid var(--seed-green, #8AC9A6);
    transform: scale(1);
}

@media (min-width: 768px) {
    .clear-modal__panel {
        padding: 48px;
    }
}

/* Bird */
.clear-modal__bird-wrap {
    position: absolute;
    top: -64px;
    right: -64px;
    width: 128px;
    height: 128px;
    z-index: 20;
}

@media (min-width: 768px) {
    .clear-modal__bird-wrap {
        width: 160px;
        height: 160px;
    }
}

.clear-modal__bird {
    font-size: 60px;
    color: #fff;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.25));
}

@media (min-width: 768px) {
    .clear-modal__bird {
        font-size: 72px;
    }
}

/* Hero */
.clear-modal__hero {
    position: relative;
    margin-bottom: 24px;
}

.clear-modal__tree {
    font-size: 96px;
    color: var(--seed-green, #8AC9A6);
    transform-origin: bottom;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.15));
}

/* Stars */
.clear-modal__star {
    position: absolute;
    color: #FCD34D; /* yellow-300 느낌 */
}

.clear-modal__star--a {
    top: 0;
    left: 40px;
    font-size: 32px;
}

.clear-modal__star--b {
    top: 40px;
    right: 40px;
    font-size: 20px;
}

/* Text */
.clear-modal__title {
    margin: 0 0 8px;
    font-family: "Chewy", "Jua", sans-serif;
    font-size: 40px;
    line-height: 1.1;
    color: var(--brand-text, #2D2D2D);
}

@media (min-width: 768px) {
    .clear-modal__title {
        font-size: 52px;
    }
}

.clear-modal__desc {
    margin: 0 0 32px;
    font-family: var(--font-body, inherit);
    font-weight: 700;
    font-size: 18px;
    color: #6B7280; /* gray-500 느낌 */
}

/* CTA */
.clear-modal__cta {
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: var(--brand-text, #2D2D2D);
    color: #fff;
    font-family: "Chewy", "Jua", sans-serif;
    font-size: 24px;
    padding: 16px 18px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.20);
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.clear-modal__cta:hover {
    background: #1f2937; /* gray-800 느낌 */
    transform: scale(1.05);
}

.clear-modal__cta:active {
    transform: scale(0.95);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.clear-modal__cta-icon {
    color: #FCD34D; /* yellow-300 느낌 */
}

/* (옵션) 접근성: 모달 열렸을 때 뒤 스크롤 막고 싶으면 JS로 body에 클래스 추가해서 처리 */









/* 공통: hidden 대체 */
.is-hidden { display: none !important; }

/* ===== Intro Reading Modal ===== */
.intro-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.intro-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.5s ease forwards;
}

.intro-modal__rain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* SKIP 버튼 */
.intro-modal__skip {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 18px;
    border-radius: 999px;
    border: 2px solid transparent;

    background: #fff;
    color: #9ca3af;
    font-family: inherit;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.intro-modal__skip:hover {
    background: #fff5f5;
    color: #f87171;
    border-color: #fecaca;
}
.intro-modal__skip:active { transform: scale(0.98); }

/* 패널 */
.intro-modal__panel {
    position: relative;
    width: min(90vw, 460px);
    background: #fff;
    border-radius: 40px;
    overflow: hidden;
    z-index: 10;

    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    border: 4px solid rgba(255,255,255,0.95);

    animation: popIn 0.6s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
    transform: scale(0.98);
}

.intro-modal__panel-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(to bottom, #FFF0F5 0%, #ffffff 100%);
    z-index: 0;
}

/* 상단 콘텐츠 */
.intro-modal__content {
    position: relative;
    z-index: 1;
    padding: 24px 24px 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.intro-modal__img-row {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* 이미지 프레임 */
.intro-shape-frame {
    width: 224px;
    height: 224px;
    padding: 8px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 16px 30px rgba(0,0,0,0.16);
    border: 4px solid rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px){
    .intro-shape-frame { width: 256px; height: 256px; }
}

.intro-modal__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

/* 노트(종이) */
.intro-modal__note-wrap {
    position: relative;
    margin-top: 16px;
}

.notebook-paper {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    overflow: hidden;
    min-height: 180px;
    display: flex;
}

.notebook-paper__holes {
    position: absolute;
    top: 0;
    left: 12px;
    width: 100%;
    height: 16px;
    opacity: 0.3;
}

.notebook-paper__body {
    width: 100%;
    padding: 16px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.intro-modal__eng {
    font-size: 32px;
    line-height: 1.15;
    margin: 0 0 12px;
    color: #2D2D2D;
    font-family: "Chewy", system-ui;
    text-shadow: 0 1px 0 rgba(0,0,0,0.06);
    word-break: keep-all;
}
@media (min-width: 768px){
    .intro-modal__eng { font-size: 40px; }
}

.intro-modal__kor {
    font-size: 16px;
    line-height: 1.35;
    margin: 0;
    color: #9ca3af;
    font-weight: 800;
    word-break: keep-all;
}
@media (min-width: 768px){
    .intro-modal__kor { font-size: 18px; }
}

/* 테이프 */
.intro-modal__tape {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(1deg);
    width: 64px;
    height: 24px;
    background: rgba(250, 204, 21, 0.6);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    backdrop-filter: blur(4px);
    border-left: 1px solid rgba(255,255,255,0.4);
    border-right: 1px solid rgba(255,255,255,0.4);
}

/* 하단 고정 바 */
.intro-modal__footer {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    padding: 16px 24px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid #f3f4f6;
    z-index: 2;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.intro-modal__footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 4px;
}

.intro-modal__listen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
}

.intro-modal__listen-icon {
    color: #FF8FA3; /* brand-pink-dark */
    animation: bounce 1s infinite;
}
.intro-modal__listen-text {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.intro-modal__count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.intro-modal__count-now {
    font-size: 36px;
    line-height: 1;
    font-weight: 800;
    color: #FF8FA3;
    text-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.intro-modal__count-total {
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
    color: #d1d5db;
}

/* 프로그레스 */
.intro-modal__progress-track {
    width: 100%;
    height: 12px;
    background: #f3f4f6;
    border-radius: 999px;
    position: relative;
    overflow: visible;
    margin-top: 4px;
}

.intro-modal__progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    position: relative;
    transition: width 0.5s ease-out;
    background: linear-gradient(90deg, #FFD1DA 0%, #FF8FA3 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* 캔디 스트라이프 느낌(선택) */
.intro-modal__progress-bar::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:999px;
    background-image: repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0.18) 0,
            rgba(255,255,255,0.18) 10px,
            rgba(255,255,255,0) 10px,
            rgba(255,255,255,0) 20px
    );
    pointer-events:none;
    opacity:0.9;
}

/* 기차 아이콘 */
.intro-modal__train{
    position: absolute;
    right: -20px;
    top: -20px;
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18));
    pointer-events: none;
    transition: transform 0.5s ease;
}

.intro-modal__train-img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: trainChug 0.6s ease-in-out infinite alternate;
}

/* ===== Animations (Tailwind animate-* 대체) ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.9) translateY(16px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes trainChug {
    0% { transform: translateY(0); }
    100% { transform: translateY(-2px); }
}










/* 공통 */
.is-hidden { display: none !important; }
.is-faded { opacity: 0; pointer-events: none; }
.is-visible { opacity: 1; pointer-events: auto; }

.tree-modal{
    position: fixed;
    inset: 0;
    z-index: 300;
    transition: opacity 0.5s ease-out;
}

.tree-modal__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(6px);
}

.tree-modal__layout{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
@media (min-width: 768px){
    .tree-modal__layout{ padding: 32px; }
}

.tree-modal__wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
    background: #FFF5F7;          /* bg-brand-cream 대체 */
    border: 4px solid #8D6E63;     /* border-wood-light 대체 */
    border-radius: 40px;          /* rounded-[2.5rem] */
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    transform: scale(0.9);
    transition: transform 0.5s ease-out;
    display: flex;
    flex-direction: column;
}

.tree-modal.is-visible .tree-modal__wrapper{
    transform: scale(1);
}

.tree-modal__close{
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 50;
    width: 48px;
    height: 48px;
    border-radius: 999px;

    background: rgba(255,255,255,0.8);
    border: 1px solid #8D6E63;
    color: #5D4037;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    backdrop-filter: blur(10px);
    transition: transform .15s ease, background .2s ease, color .2s ease;
}
.tree-modal__close i{ font-size: 24px; }
.tree-modal__close:hover{
    background: #fff;
    color: #ef4444;
    transform: scale(1.1);
}
.tree-modal__close:active{ transform: scale(0.95); }

.tree-modal__frame{
    width: 100%;
    height: 100%;
    border: 0;
}








/* =========================
   Color tokens (Tailwind 대체)
========================= */
:root{
    --brand-cream:#FFF5F7;
    --brand-text:#2D2D2D;
    --wood-dark:#5D4037;
    --retro-yellow:#F5A623;
}

/* =========================
   Wrap/Button (absolute positioning은 inline 유지)
========================= */

.map-nodes--grid{
    display:flex;
    gap: 50px;
    flex-wrap:wrap;
    position:relative; /* 안전 */
    left: 50px;
}


.map-nodes--grid .station-wrap {
    position: relative; /* absolute 해제 */
    left: auto !important;
    top: auto !important;
    width: 160px;
    height: 240px;
}


.station-wrap{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .3s ease;
}

.station-btn{
    position:relative;
    width:100%;
    height:100%;
    z-index:20;
    background:transparent;
    border:0;
    padding:0;
    outline:0;
    transition:transform .3s ease;
}
.station-btn:hover{
    transform:translateY(-8px); /* hover:-translate-y-2 */
}

/* =========================
   Card frame (bg-brand-cream border-brand-text rounded-xl shadow-md)
========================= */
.station-box-frame{
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    background:var(--brand-cream);
    border:2px solid var(--brand-text);
    border-radius:12px; /* rounded-xl */
    overflow:hidden;
    box-shadow:0 4px 10px rgba(0,0,0,.14); /* shadow-md 느낌 */
    transition:box-shadow .3s ease;
    z-index:10;
}
.station-btn:hover .station-box-frame{
    box-shadow:0 10px 25px rgba(0,0,0,.22); /* group-hover:shadow-xl 느낌 */
}

/* awning: h-2 / md:h-4 + border 동일 */
.station-awning{
    height:8px; /* h-2 */
    border-bottom:2px solid var(--brand-text);
    border-top:2px solid var(--brand-text);
}

/* =========================
   Video section (h-12/h-16/h-28 + border)
========================= */
.station-video{
    position:relative;
    height:48px; /* default h-12 */
    border-top:2px solid var(--brand-text);
    border-bottom:2px solid var(--brand-text);
    background:#1f2937; /* bg-gray-800 느낌 */
    overflow:hidden;
}
.station-video .lazy-video{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:1;
    transition:opacity .3s ease;
}
.station-video-glass{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(to bottom left, rgba(255,255,255,.10), transparent); /* bg-gradient-to-bl from-white/10 */
}

/* play layer: opacity-0 -> hover 시 1 */
.station-play-layer{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    opacity:0;
    transition:opacity .3s ease;
}
.station-play-layer i{
    color:#fff;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)); /* drop-shadow-md */
}
.station-btn:hover .station-play-layer{
    opacity:1;
}

/* =========================
   Body (flex-1 p-1 flex-col center justify-between bg-[#fffdf9])
========================= */
.station-body{
    flex:1;
    padding:4px; /* p-1 */
    background:#fffdf9;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
}
.station-text-wrap{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
}

/* ride/title typography (text-lg / text-xs / etc는 미디어쿼리로 동일화) */
.station-ride{
    width:100%;
    padding:0 2px; /* px-0.5 */
    color:var(--brand-text);
    line-height:1.15;
    font-family: "Chewy", system-ui;
    letter-spacing:-.01em;
    word-break:break-word;
    white-space:normal;
    font-weight:normal; /* font-display 느낌 */
    font-size:13px; /* 기본: text-[13px] */
}
.station-title{
    width:100%;
    padding:0 2px;
    margin-top:2px; /* mt-0.5 */
    font-weight:700;
    color:#9ca3af; /* text-gray-400 */
    font-size:10px; /* text-[10px] */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis; /* truncate */
}

/* stars wrapper (flex gap-1 bg-white border px-2 py-0.5 rounded-full shadow-inner mb-0.5) */
.station-stars{
    display:flex;
    gap:4px;
    background:#fff;
    border:1px solid #e5e7eb; /* border-gray-200 */
    padding:2px 8px; /* px-2 py-0.5 */
    border-radius:999px;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.08); /* shadow-inner */
    margin-bottom:2px; /* mb-0.5 */
}
.station-stars i{
    font-size:10px; /* text-[10px] */
    color:#d1d5db;  /* text-gray-300 */
}

/* =========================
   Legs (absolute -bottom-1 left-2 w-1.5 h-2 ... -z-10)
========================= */
.station-leg{
    position:absolute;
    bottom:-4px;
    width:6px;  /* w-1.5 */
    height:8px; /* h-2 */
    background:var(--wood-dark);
    border:1px solid var(--brand-text);
    border-radius:0 0 6px 6px;
    z-index:-10;
}
.station-leg-left{ left:8px; }
.station-leg-right{ right:8px; }

/* =========================
   Label (absolute -top-8 md:-top-5 ... group-hover:scale-110)
========================= */
.station-label{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:-32px; /* -top-8 */
    background:var(--brand-text);
    color:#fff;
    border:2px solid #fff;
    border-radius:999px;
    box-shadow:0 6px 14px rgba(0,0,0,.25);
    z-index:50;
    white-space:nowrap;
    font-weight:normal;
    font-size:14px; /* text-sm */
    padding:4px 12px; /* px-3 py-1 */
    transition:transform .3s ease;
    font-family: "Chewy", system-ui;
}
.station-btn:hover .station-label{
    transform:translateX(-50%) scale(1.10); /* group-hover:scale-110 */
}

/* =========================
   Badge (absolute -top-2 -right-2 text-sm w-8 h-8 ... rotate)
========================= */
.station-badge{
    position:absolute;
    top:-8px;
    right:-8px;
    width:32px;  /* w-8 */
    height:32px; /* h-8 */
    background:var(--retro-yellow);
    border:2px solid var(--brand-text);
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 14px rgba(0,0,0,.22);
    z-index:50;
    transition:transform .3s ease;
    font-size:14px; /* text-sm */
}
.station-badge i{
    color:var(--brand-text);
}
.station-btn:hover .station-badge{
    transform:rotate(12deg); /* group-hover:rotate-12 */
}

/* =========================
   Responsive: md (tailwind md:border-[3px], md:h-28, md:-top-5)
   너 기존 코드 기준으로 md는 보통 768px로 잡음
========================= */
@media (min-width:768px){
    .station-box-frame{
        border-width:3px;
    }
    .station-awning{
        height:16px; /* h-4 */
        border-top-width:3px;
        border-bottom-width:3px;
    }
    .station-video{
        height:112px; /* h-28 */
        border-top-width:3px;
        border-bottom-width:3px;
    }
    .station-label{
        top:-20px; /* md:-top-5 */
    }
}

/* =========================
   너 renderMap()에서 쓰던 3단 크기(>=1500, >=1000, else) 반영
   - 폰트/아이콘/라벨/스타 사이즈만 맞춤
========================= */
@media (min-width:1000px){
    .station-ride{ font-size:12px; }
    .station-title{ font-size:10px; }
    .station-stars i{ font-size:8px; }
    .station-label{ font-size:12px; padding:2px 8px; }
    .station-badge{ font-size:12px; }
}
@media (min-width:1500px){
    .station-ride{ font-size:18px; } /* text-lg */
    .station-title{ font-size:12px; } /* text-xs */
    .station-stars i{ font-size:10px; }
    .station-label{ font-size:14px; padding:4px 12px; } /* text-sm px-3 py-1 */
    .station-badge{ font-size:14px; }
}


/* ===== Station Locked (Tailwind → CSS) ===== */
.station--locked .station-btn{
    filter: grayscale(1);
    opacity: .7;
    transform: none;
}

.station--locked .station-btn:hover{
    transform: none; /* hover lift 방지 */
}

.station--locked .station-badge{
    width: 32px;
    height: 32px;
    top: -8px;
    right: -8px;
    font-size: 14px;
    background: #d1d5db;   /* gray-300 */
    border: 2px solid #9ca3af; /* gray-400 */
}

.station--locked .station-badge i{
    color: #6b7280; /* gray-500 */
}




/* =========================
   Map Layout (absolute 제거)
========================= */
.map-nodes{
    display:flex;
    gap:40px;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
}

/* station 묶음 */
.map-station{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* anchor는 트랙용이므로 시각적으로 숨김 */
.map-station-point{
    width:0;
    height:0;
}

/* =========================
   카드 사이즈 (기존 160x240)
========================= */
.station-wrap{
    width:160px;
    height:240px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================
   나머지 station CSS는
   이전에 준 CSS 그대로 사용
========================= */

/* Locked 상태 */
.station--locked .station-btn{
    filter: grayscale(1);
    opacity:.7;
    pointer-events:none;
}





















































































#hero {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100vh;
}
/* 중간 띠 (Marquee) - 선택사항 */
/* 이 부분이 스냅되지 않고 자연스럽게 지나가길 원하면 이 부분은 작성하지 않아도 됩니다. */
#marquee-bar {
    /* 필요시: scroll-snap-align: start; */
}

#map-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100vh;
}

/* 버튼 클릭 유도 효과 (크기 변화 삭제, 파란색 빛 번짐만 유지) */
@keyframes attention-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.btn-guide-effect {
    animation: attention-pulse 1.5s infinite !important;
    border: 3px solid #3B82F6 !important;
    z-index: 50;
    position: relative;
}

/* [통합 수정] 구름 컨테이너 + 이미지 애니메이션 전체 코드 */

/* [신규] 말풍선 애니메이션 스타일 */

/* 말풍선 등장 애니메이션 */
.bubble-pop-in {
    animation: bubblePopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1s; /* 로고가 자리 잡은 후 등장 */
}

@keyframes bubblePopIn {
    0% { opacity: 0; transform: scale(0.5) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 컨텐츠 슬라이드 효과 */
.slide-fade-out-left {
    opacity: 0;
    transform: translateX(-20px);
}
.slide-fade-out-right {
    opacity: 0;
    transform: translateX(20px);
}
.slide-fade-in {
    opacity: 1;
    transform: translateX(0);
}

/* 말풍선 등장 (아래에서 위로 부드럽게) */
.bubble-slide-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 텍스트 교체 시 페이드 효과 */
.text-fade-out {
    opacity: 0;
    transform: translateX(5px);
}
.text-fade-in {
    opacity: 1;
    transform: translateX(0);
}

/* 인디케이터 스타일 */
.guide-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ddd;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.guide-dot.active {
    background-color: #FF5C77;
    width: 16px;
    border-radius: 10px;
}





/* [모바일 전용 최적화] 구름 컨테이너 스타일 */
.cloud-blob-container {
    /* 1. 몽글몽글한 구름 모양 (비정형 원형) */
    border-radius: 56% 44% 71% 29% / 50% 59% 41% 50%;

    /* 2. 구름 배경색 및 테두리 */
    background-color: #ffffff;
    border: 4px solid #ffffff; /* 테두리도 흰색으로 하여 더 부드럽게 */

    /* 3. 내부 이미지 넘침 방지 */
    overflow: hidden;

    /* 4. 입체감 있는 그림자 */
    box-shadow:
            inset 0 0 20px rgba(255, 158, 170, 0.2), /* 안쪽 핑크빛 */
            0 8px 20px rgba(157, 180, 192, 0.3);     /* 바깥 그림자 */

    /* 5. 둥실둥실 애니메이션 */
    animation: cloud-wiggle 6s ease-in-out infinite;
    transition: all 0.5s ease-in-out;
}

/* 구름이 모양을 바꾸며 움직이는 애니메이션 */
@keyframes cloud-wiggle {
    0%, 100% {
        border-radius: 56% 44% 71% 29% / 50% 59% 41% 50%;
        transform: translateY(0);
    }
    50% {
        border-radius: 40% 60% 50% 50% / 55% 45% 55% 45%;
        transform: translateY(-5px); /* 위로 살짝 떠오름 */
    }
}


/* [신규] 인트로 모달 전용 추가 스타일 */

/* 1. 배경용 캔디 스트라이프 패턴 애니메이션 */
@keyframes moveStripe {
    0% { background-position: 0 0; }
    100% { background-position: 30px 30px; }
}

.bg-candy-stripe {
    background-image: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent
    );
    background-size: 30px 30px;
    animation: moveStripe 1s linear infinite;
}

/* 2. 이미지 모양틀 (가로 폭 줄임 + 입체감 강화) */
/* 수정된 쉐이프 프레임 (더 부드럽고 깔끔하게) */
.intro-shape-frame {
    border-radius: 58% 42% 72% 28% / 50% 58% 42% 50%;
    border: 6px solid #ffffff; /* 테두리 두께 살짝 줄임 */
    box-shadow:
            inset 0 0 20px rgba(255, 230, 235, 0.5), /* 아주 연한 핑크 내부광 */
            0 8px 20px rgba(0, 0, 0, 0.05); /* 연한 그림자 */
    background: #fff;
    overflow: hidden;
    animation: float 4s ease-in-out infinite;
    transform-origin: center;
}
.intro-shape-frame img {
    animation: img-breathing 4s ease-in-out infinite alternate;
}

/* 3. 귀여운 도트 패턴 배경 */
.bg-dot-pattern {
    background-image: radial-gradient(#FF8FA3 2px, transparent 2px);
    background-size: 20px 20px;
    opacity: 0.15;
}

/* [신규] 영어 공책 스타일 (Notebook Paper) */
.notebook-paper {
    background-color: #ffffff;
    /* 1. 빨간색 세로 마진 선, 2. 파란색 가로 줄 */
    background-image:
            linear-gradient(90deg, transparent 24px, #FFD1DA 24px, #FFD1DA 26px, transparent 26px),
            repeating-linear-gradient(transparent, transparent 39px, #A3D8F4 40px);
    background-size: 100% 40px; /* 줄 간격 40px */
    background-attachment: local; /* 스크롤 시 배경 고정 */
    line-height: 40px; /* 줄 간격과 텍스트 높이 일치시키기 */
}

/* [신규] 모달 내부 알파벳 낙하 애니메이션 */
@keyframes modalRain {
    0% { transform: translateY(-50px) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

.modal-rain-particle {
    position: absolute;
    top: -50px;
    font-family: 'Chewy', cursive;
    pointer-events: none;
    z-index: 1; /* 카드보다 뒤에 위치 */
    animation: modalRain linear infinite;
}


/* 2. 이미지 스타일 (항상 확대된 상태 + 숨쉬기) */
.cloud-img-effect {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;

    /* [핵심 2] 이미지가 커졌다 작아졌다 하는 애니메이션 */
    animation: img-breathing 3s ease-in-out infinite alternate;
}


/* 4. 이미지 숨쉬기 정의 */
@keyframes img-breathing {
    0% {
        transform: scale(1.1); /* 기본 확대 */
    }
    100% {
        transform: scale(1.2); /* 살짝 더 확대 */
    }
}

/* 프로그래스 바 트랜지션 */
.progress-bar-fill {
    transition: width 0.3s ease-in-out;
}

@keyframes progress-indeterminate {
    0% { width: 0%; margin-left: 0%; }
    50% { width: 70%; margin-left: 30%; }
    100% { width: 0%; margin-left: 100%; }
}
.animate-progress-indeterminate {
    animation: progress-indeterminate 1.5s infinite ease-in-out;
}
/* [신규] 기차 도착 시 발광(Glow) 애니메이션 */
@keyframes train-arrival-glow {
    0% {
        filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
    }
    50% {
        /* 기차 주변으로 황금빛이 강하게 퍼짐 */
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) brightness(1.1);
    }
    100% {
        filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
    }
}

/* 자바스크립트에서 붙였다 뗄 클래스 */
.train-glowing {
    animation: train-arrival-glow 2s ease-in-out infinite;
}
/* [신규] 덜컹거리는 기차 애니메이션 (쿠궁쿠궁 느낌) */
@keyframes train-hard-shake {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-1.5px); } /* 위로 살짝 */
    50% { transform: translateY(0.5px); }  /* 아래로 미세하게 */
    75% { transform: translateY(-1px); }   /* 다시 위로 */
}

/* 기차 이미지 컨테이너에 적용할 클래스 */
.train-hard-shake {
    /* 0.3초 간격으로 빠르고 반복적인 덜컹거림 */
    animation: train-hard-shake 0.3s linear infinite;
}

/* [신규] 도착 역 강조(색상/발광) 애니메이션 */
@keyframes destination-glow {
    0% {
        /* 황금색 테두리와 빛 */
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.6);
        border-color: #FFD700 !important; /* 테두리 색상 강제 적용 */
        transform: scale(1);
    }
    50% {
        /* 빛이 퍼지고 살짝 커짐 */
        box-shadow: 0 0 20px 8px rgba(255, 215, 0, 0.8);
        border-color: #FFFACD !important; /* 더 밝은 레몬색 */
        transform: scale(1.08);
    }
    100% {
        /* 원래 상태로 복귀 */
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.6);
        border-color: #FFD700 !important;
        transform: scale(1);
    }
}

/* 도착한 역의 박스에 적용할 클래스 */
.active-destination-box {
    /* 2초 간격으로 부드럽게 반복 */
    animation: destination-glow 2s ease-in-out infinite !important;
    z-index: 50 !important; /* 다른 역보다 위에 표시 */
}
/* [신규] 기차 연기(증기) 애니메이션 정의 */
@keyframes puffRising {
    0% {
        transform: translate(0, 0) scale(0.4);
        opacity: 0.9;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-10px, -40px) scale(2.2); /* 위로 올라가며 커짐 */
        opacity: 0;
    }
}

/* 연기 입자 공통 스타일 */
.steam-puff {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9); /* 진한 흰색 연기 */
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
    pointer-events: none;
    animation: puffRising 1.5s ease-out infinite;
    opacity: 0; /* 시작 전엔 안 보이게 */
}
/* [최적화] 모달 애니메이션 성능 향상 */
#together-wrapper {
    /* 브라우저에게 변형이 일어날 것임을 미리 알림 (GPU 레이어 분리) */
    will-change: transform, opacity;
    /* 3D 가속 강제 활성화 */
    transform: translateZ(0) scale(0.9);
}

/* [중요] 애니메이션 중에는 렉 유발 필터 제거 (필요하다면 배경의 backdrop-blur-sm 삭제 권장) */
.modal-backdrop-optimized {
    background-color: rgba(0, 0, 0, 0.8); /* 블러 대신 진한 배경색 사용 */
    backdrop-filter: none !important;      /* 블러 강제 제거 */
    -webkit-backdrop-filter: none !important;
}
/* [신규] 기찻길 위 동그라미(Point) 발광 효과 */
.active-point-glow {
    background-color: #FFD700 !important; /* 노란색 불빛 */
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.9) !important; /* 강한 발광 */
    border-color: #ffffff !important;
    transform: translate(-50%, -50%) scale(1.3) !important; /* 크기 확대 */
    z-index: 29 !important; /* 기차보다는 아래, 선보다는 위 */
    transition: all 0.5s ease-in-out;
}
/* [신규] 형광펜 밑줄 긋기 애니메이션 */
@keyframes drawUnderline {
    0% { width: 0%; opacity: 0; }
    10% { opacity: 1; }
    100% { width: 100%; opacity: 1; }
}

.animate-draw-line {
    animation: drawUnderline 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; /* 쓱- 그어지는 느낌의 가감속 */
    animation-delay: 0.3s; /* 타이틀이 뜬 뒤에 그려지도록 딜레이 */
    width: 0%; /* 시작 너비 0 */
}
/* 폰트가 로드되는 중에는 텍스트를 숨기고, 완료되면 보여줌 */
.wf-loading body {
    visibility: hidden;
}
.wf-active body, .wf-inactive body {
    visibility: visible;
}
/* [수정] 폰트 변경(고운돋움) 및 가독성 최적화 */
/* [수정] 폰트 변경(Jua) - 둥글고 귀여운 레트로 느낌 */
.text-neon-overlay {
    font-family: 'Jua', sans-serif; /* 전체 폰트 통일 */
    color: #ffffff;
    font-weight: 400; /* Jua는 기본 두께가 있어서 400으로 충분 */

    /* 빛 번짐을 살짝 더 부드럽게 퍼뜨림 */
    text-shadow:
            0 0 10px rgba(255, 143, 163, 0.8), /* 안쪽 핑크 */
            0 0 20px rgba(255, 92, 119, 0.5),  /* 바깥쪽 진한 핑크 */
            1px 2px 3px rgba(0, 0, 0, 0.1);    /* 입체감 */

    opacity: 1;
    letter-spacing: 0.02em; /* 자간을 살짝 넓혀서 시원하게 */
}

/* 강조 포인트는 색상만 다르게 유지 */
.text-neon-accent {
    font-family: 'Jua', sans-serif;
    color: #FFF5F7 !important;
    text-shadow:
            0 0 10px rgba(255, 215, 0, 0.8),
            0 0 25px rgba(255, 215, 0, 0.5),
            1px 2px 3px rgba(0, 0, 0, 0.1) !important;
}

/* "쉽게" 강조 부분도 동일한 네온 효과 적용 */
.text-neon-accent {
    color: #ffffff !important;
    -webkit-text-stroke: 2px #FFD700 !important; /* 노란색/금색 테두리 */
    text-stroke: 2px #FFD700 !important;
    text-shadow:
            0 0 5px #fff,
            0 0 15px #FFD700,
            0 0 30px #FFD700 !important;
}

/* 밤 모드 등 배경이 어두울 때 잘 보이도록 보정 (선택 사항) */
#map-section.dark-mode .text-neon-overlay {
    mix-blend-mode: hard-light;
    color: rgba(255, 255, 255, 0.7);
}

/* [신규] 인트로 대형 카드 전용 스타일 */

/* 1. 이미지 모양틀 (쿠키커터 느낌) */
.intro-shape-frame {
    /* 찌그러진 원형(Blob) 모양 만들기 */
    border-radius: 58% 42% 72% 28% / 50% 58% 42% 50%;
    /* 두꺼운 흰색 테두리로 스티커/쿠키틀 느낌 */
    border: 8px solid #ffffff;
    /* 입체감을 위한 안쪽 그림자와 바깥쪽 부드러운 그림자 */
    box-shadow:
            inset 0 0 40px rgba(255, 143, 163, 0.4), /* 안쪽 핑크빛 */
            0 15px 35px rgba(45, 45, 45, 0.15);      /* 바깥 그림자 */
    background: linear-gradient(to bottom right, #FFF5F7, #ffe4e8); /* 부드러운 그라데이션 배경 */
    overflow: hidden;
    /* 둥실둥실 떠다니는 애니메이션 */
    animation: float 5s ease-in-out infinite;
    transform-origin: center;
}

/* 2. 모양틀 내부 이미지 애니메이션 */
.intro-shape-frame img {
    /* 이미지가 안에서 살짝 숨쉬듯 움직임 */
    animation: img-breathing 4s ease-in-out infinite alternate;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1)); /* 이미지 자체 그림자 */
}

/* 3. 카드 배경 장식 패턴 */
.intro-card-bg-pattern {
    background-image: radial-gradient(#FFD1DA 2px, transparent 2px);
    background-size: 25px 25px;
    opacity: 0.3;
}


     /* --- Tree Zone & Seasons Styles --- */
 .zone-selector {
     position: absolute;
     bottom: 2rem;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 0.5rem;
     z-index: 60;
     background: rgba(255, 255, 255, 0.2);
     padding: 0.5rem;
     border-radius: 1rem;
     backdrop-filter: blur(4px);
 }

.zone-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid white;
    font-family: 'Chewy', cursive;
    font-size: 0.9rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

.zone-btn:hover, .zone-btn.active {
    transform: scale(1.2) translateY(-5px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.3);
}

/* Zone Colors */
.zone-btn[data-zone="1"] { background: #81c784; } /* Spring */
.zone-btn[data-zone="2"] { background: #29b6f6; } /* Summer */
.zone-btn[data-zone="3"] { background: #ff7043; } /* Autumn */
.zone-btn[data-zone="4"] { background: #90a4ae; } /* Winter */
.zone-btn[data-zone="5"] { background: #ab47bc; } /* Magic */

/* Zone Indicators (Locked state) */
.zone-btn.locked {
    filter: grayscale(100%);
    opacity: 0.5;
    cursor: not-allowed;
}

#tree-bg-layer {
    transition: background 1.5s ease;
}
body { overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; color: #2D2D2D; scroll-behavior: smooth; }

/* Hero Styles */
#logo-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 50; display: flex; align-items: center; justify-content: center; transform-origin: center top; will-change: transform; }
#main-logo { transition: transform 0.1s linear; text-align: center; white-space: nowrap; text-shadow: 2px 2px 0px #fff, 4px 4px 0px rgba(0,0,0,0.1); }
/* [수정할 부분] 전체 코드를 아래로 교체하세요 */
.hero-bg {
    background-image:
        /* 1. 도트 무늬 색상을 연하게 변경 (#FFDEE5 -> #FFE4E8) */
            radial-gradient(#FFE4E8 2px, transparent 2px),
                /* 2. 그라데이션 색상을 더 부드럽게 변경 */
            linear-gradient(to bottom, #FFF5F7 0%, #FFE4E8 50%, #FFF0F5 100%);

    background-size: 30px 30px, 100% 100%;
    background-attachment: fixed;
}
.scroll-bounce { animation: scrollBounce 2s ease-in-out infinite; }
@keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.blob { position: absolute; filter: blur(60px); z-index: -1; opacity: 0.6; animation: blob-bounce 10s infinite ease-in-out; border-radius: 50%; }
.blob-1 { top: 10%; left: 10%; width: 300px; height: 300px; animation-delay: 0s; }
.blob-2 { top: 50%; right: 10%; width: 400px; height: 400px; animation-delay: 2s; background-color: #ffe4e1; }
.blob-3 { bottom: 10%; left: 20%; width: 250px; height: 250px; animation-delay: 4s; }
@keyframes blob-bounce { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } }

/* [신규] 기차역 천막(Awning) 스트라이프 패턴 */
.station-awning {
    background: repeating-linear-gradient(
            45deg,
            #FF8FA3,
            #FF8FA3 10px,
            #FFD1DA 10px,
            #FFD1DA 20px
    );
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* [수정] 발광 효과 타겟 변경 (디자인이 바뀌어서) */
.active-station-glow .station-box-frame {
    animation: gentlePulse 2s ease-in-out infinite !important;
    border-color: #FFD700 !important;
}

/* [수정] 부드러운 호흡 효과 + 노란 불빛 */
@keyframes gentlePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
    }
    50% {
        transform: scale(1.05); /* 살짝 커짐 */
        box-shadow: 0 0 25px 5px rgba(255, 215, 0, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* 활성화된 버튼 자체에 애니메이션 적용 */
.active-station-glow {
    animation: gentlePulse 2s ease-in-out infinite !important;
    z-index: 100 !important; /* 다른 요소보다 앞으로 나오게 고정 */
}

/* 내부 박스의 테두리 색상만 변경 (두께 변경 X -> 밀림 현상 방지) */
.active-station-glow .relative.bg-white {
    border-color: #FFD700 !important;
    transition: border-color 0.3s ease;
}

/* [신규] 현재 스테이션 발광 효과 */
@keyframes yellowPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
        border-color: #FFD700;
    }
    70% {
        box-shadow: 0 0 20px 15px rgba(255, 215, 0, 0);
        border-color: #FFD700;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
        border-color: #FFD700;
    }
}

.active-station-glow .relative.bg-white {
    animation: yellowPulse 2s infinite !important;
    border-color: #FFD700 !important; /* 테두리 강제 노란색 */
    border-width: 4px !important;
    z-index: 50;
}

/* Hero Game */
#game-section { perspective: 1000px; }
.game-board { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); gap: 8px; padding: 16px; background: #FFF5F7; border: 8px solid #FF8FA3; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.1), inset 0 0 40px rgba(255, 209, 218, 0.5); position: relative; transform: rotateX(20deg) scale(0.9); transform-style: preserve-3d; transition: transform 0.3s ease; }
.game-board::after { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%); background-size: 100% 4px; z-index: 10; pointer-events: none; border-radius: 12px; }
.tile { background-color: white; border: 2px dashed #FFD1DA; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: 'Jua', sans-serif; font-size: 0.8rem; color: #FF8FA3; position: relative; }
.tile.special { border-style: solid; }
.tile.start { background-color: #FFD1DA; color: white; border: 2px solid #FF8FA3; }
.tile.goal { background-color: #FF8FA3; color: white; border: 2px solid #FFD1DA; }
.tile-number { position: absolute; top: 2px; left: 4px; font-size: 0.6rem; opacity: 0.5; }
#player-token { position: absolute; width: 40px; height: 40px; background: white; border: 3px solid #2D2D2D; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 20; top: 0; left: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.player-hop { animation: hop 0.4s ease-in-out; }
@keyframes hop { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.1); } 100% { transform: translateY(0) scale(1); } }
#dice-container { position: absolute; bottom: -30px; right: -30px; z-index: 30; transform: translateZ(20px); }
.dice { width: 60px; height: 60px; background: white; border: 4px solid #2D2D2D; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: 'Press Start 2P', cursive; font-size: 1.5rem; color: #2D2D2D; box-shadow: 6px 6px 0px rgba(0,0,0,0.1); }
.shake-dice { animation: shake 0.5s infinite; }
@keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(5deg); } 100% { transform: rotate(0deg); } }
.confetti { position: absolute; width: 10px; height: 10px; background-color: #f00; animation: confetti-fall 3s linear forwards; z-index: 100; }
@keyframes confetti-fall { 0% { transform: translateY(-50px) rotate(0deg); opacity: 1; } 100% { transform: translateY(300px) rotate(720deg); opacity: 0; } }



/* [수정됨] 커서 애니메이션: 한 번에 이동 후 클릭 */
@keyframes cursorMoveAndClick {
    0% {
        opacity: 0;
        transform: translate(50px, 50px); /* 오른쪽 아래에서 시작 */
    }
    15% {
        opacity: 1;
    }
    40% {
        transform: translate(0, 0); /* 글자 위로 곧바로 도착 (멈칫 없음) */
    }
    50% {
        transform: scale(0.8); /* 클릭 (작아짐) */
    }
    60% {
        transform: scale(1); /* 뗌 */
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(0, 0); /* 사라짐 */
    }
}

/* 버튼 반응 애니메이션 (타이밍 동기화) */
@keyframes buttonClickFeedback {
    0%, 45% {
        background-color: transparent;
        transform: scale(1);
    }
    50% {
        /* 커서가 클릭하는 50% 시점에 맞춰 반응 */
        background-color: #FFD1DA;
        transform: scale(0.95);
    }
    60% {
        background-color: transparent;
        transform: scale(1);
    }
    100% {
        background-color: transparent;
    }
}

.animate-fake-cursor {
    animation: cursorMoveAndClick 3s ease-in-out infinite; /* 3초 간격 무한 반복 */
    animation-delay: 0.5s;
}

.animate-button-feedback {
    animation: buttonClickFeedback 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

/* 클릭 시 멈춤 처리 */
.user-clicked {
    animation: none !important;
    background-color: transparent !important;
    transform: scale(1) !important;
}
.user-clicked .animate-fake-cursor {
    display: none !important;
}

/* Map Section Styles */
#map-section { background-color: #64B5F6; position: relative; user-select: none; }
.bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.5s ease-out; pointer-events: none; }
/* [수정] 섹션 1과 동일한 톤앤매너 (도트 패턴 + 따뜻한 핑크 그라데이션) */
/* [수정할 부분] 전체 코드를 아래로 교체하세요 */
#bg-layer-day {
    z-index: 0;
    /* Hero 섹션과 동일하게 아주 연한 핑크 톤으로 변경 */
    background-image:
            radial-gradient(#FFE4E8 2px, transparent 2px),
            linear-gradient(to bottom, #FFF5F7 0%, #FFE4E8 50%, #FFF5F7 100%);

    background-size: 30px 30px, 100% 100%;
    opacity: 1;
}
#bg-layer-sunset { z-index: 1; background: linear-gradient(180deg, #FF9EAA 0%, #FFCC80 40%, #D1C4E9 80%, #9575CD 100%); opacity: 0; }
#bg-layer-night { z-index: 2; background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 40%, #312e81 80%, #1e3a8a 100%); opacity: 0; }
.hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.cursor-grab { cursor: grab; } .cursor-grabbing { cursor: grabbing; }
.text-distinct { text-shadow: 2px 2px 0px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
.text-distinct-night { text-shadow: 2px 2px 0px #1e1b4b, -1px -1px 0 #1e1b4b, 1px -1px 0 #1e1b4b, -1px 1px 0 #1e1b4b, 1px 1px 0 #1e1b4b; }
.ride-card { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ride-card.unlocked:hover { cursor: pointer; filter: brightness(1.02); transform: translateY(-5px); }
#park-train { z-index: 30; pointer-events: none; position: absolute; will-change: transform; transition: opacity 0.3s; }
.card-perspective { perspective: 1000px; }
.mini-card { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transform-style: preserve-3d; cursor: pointer; }
.mini-card:hover { transform: translateY(-8px) rotate(1deg); }
.mini-card.collected .mini-card-inner { border-color: #8AC9A6; background-color: #FFF; box-shadow: 0 4px 6px -1px rgba(138, 201, 166, 0.4); }
.mini-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; border-radius: 1rem; background-color: white; transition: all 0.3s ease; }
.card-back { background: linear-gradient(135deg, #fff 0%, #FF9EAA 100%); display: flex; align-items: center; justify-content: center; border-radius: 1rem; border: 2px solid #FF9EAA; }
.focus-overlay { perspective: 1500px; }
.usage-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 0.9rem; color: #4a4a4a; }
.usage-table th, .usage-table td { padding: 0.5rem; vertical-align: middle; }
.usage-table th { font-weight: bold; width: 25%; color: #FF5C77; background-color: #fff0f3; border-radius: 6px; font-size: 0.8rem; }
.usage-table td { background-color: #fff; border-radius: 6px; padding-left: 12px; }
.stamp-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg) scale(0); color: #FF5C77; font-family: 'Chewy', cursive; font-size: 2.2rem; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.95); border: 5px solid #FF5C77; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; pointer-events: none; text-align: center; opacity: 0; transition: none; box-shadow: 0 4px 10px rgba(255, 92, 119, 0.3); }
.stamp-completed { opacity: 1 !important; transform: translate(-50%, -50%) rotate(-15deg) scale(1) !important; }
.stamp-visible { animation: stampBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.seed-slot { transition: all 0.3s ease; }
.flying-seed { position: fixed; z-index: 100; pointer-events: none; transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.map-station-point {
    width: 30px;
    height: 30px;
    background-color: #8D6E63;
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 50%;
    top: calc(50% + 250px);
    transform: translate(-50%, -50%);
    z-index: 25;
}

.alphabet-particle { position: absolute; top: -150px; pointer-events: none; z-index: 0; font-family: 'Chewy', cursive; font-weight: bold; opacity: 0.8; text-shadow: 2px 2px 0px rgba(255,255,255,0.8); }
@keyframes fallRotate { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 0.9; } 100% { transform: translateY(110vh) rotate(360deg); opacity: 0; } }
.star-particle { position: absolute; background: white; border-radius: 50%; animation: twinkle 2s infinite alternate; opacity: 0; }
.tab-button.active { background-color: #FF9EAA; color: white; border-bottom: 3px solid #FF5C77; }
.tab-button { border-bottom: 3px solid transparent; color: #9ca3af; background-color: #f9fafb; }

/* Marquee 전용 애니메이션 */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
}
.marquee-content {
    display: inline-flex;
    align-items: center;
    /*animation: marquee 120s linear infinite;*/
	animation: marquee 50000s linear infinite;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 탑 버튼 기본 스타일 */
#scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;

    /* [모바일 최적화] 크기 및 위치 */
    width: 2.8rem;
    height: 2.8rem;
    font-size: 0.9rem;

    background-color: #FF8FA3;
    color: white;
    border: 2px solid white; /* 흰색 테두리 추가로 시인성 확보 */
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 15px rgba(255, 143, 163, 0.6);
    cursor: pointer;

    /* [중요] 레이어 최상위로 올림 (기존 50 -> 200) */
    z-index: 200;

    /* 초기 상태: 숨김 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* [중요] 스크롤 시 JS가 붙여줄 클래스 (.show) 스타일 정의 */
#scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scroll-to-top:hover {
    background-color: #FF5C77;
    transform: scale(1.1);
}

/* PC 화면에서는 조금 더 크게 */
@media (min-width: 768px) {
    #scroll-to-top {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.2rem;
        bottom: 3rem;
        right: 3rem;
    }
}

/* =========================================
   3. 모바일 기찻길 동그라미 숨김
   ========================================= */
@media (max-width: 1200px) {
    .map-station-point {
        display: none !important;
    }
}
#scroll-to-top:hover {
    background-color: #FF5C77;
    transform: scale(1.1);
}

/* [추가] Tree Modal Styles */
.tree-apple {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #ef4444; /* Red-500 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-family: 'Jua', sans-serif;
    box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}
.tree-apple:hover {
    transform: scale(1.2) rotate(10deg);
    background-color: #dc2626; /* Red-600 */
    z-index: 20;
}
.tree-apple::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 2px;
    height: 8px;
    background-color: #3e2723;
    transform: translateX(-50%);
}
.tree-apple::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    width: 12px;
    height: 6px;
    background-color: #81c784;
    border-radius: 10px 0 10px 0;
    transform: translateX(-20%) rotate(-30deg);
}
.apple-pop {
    animation: applePop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes applePop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.animate-spin-slow {
    animation: spinSlow 10s linear infinite;
}
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 2. [수정] 모달 래퍼 스타일 (밤하늘 배경 애니메이션 적용) */
#tree-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* 제공해주신 밤하늘 그라데이션 */
    background: linear-gradient(180deg, #0f0518 0%, #1a0b2e 25%, #431345 50%, #ff9a9e 100%);
    background-size: 100% 300%;
    animation: gradientShift 20s ease-in-out infinite alternate;
}

@keyframes gradientShift {
    0% { background-position: 0% 10%; }
    100% { background-position: 0% 90%; }
}

/* 3. [수정] 타이틀 스타일 (Chewy 폰트 적용) */
#tree-ui-layer {
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none;
    z-index: 20;
}

.title-letter {
    display: inline-block;
    font-family: 'Chewy', cursive; /* 폰트 변경 */
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 2px 2px 0px #ff9a9e, 0 0 20px rgba(255, 255, 255, 0.4);
    opacity: 0;
    transform: translateY(-100px);
    animation: dropIn 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes dropIn {
    0% { opacity: 0; transform: translateY(-120px) rotate(-5deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@media (max-width: 600px) {
    .title-letter { font-size: 3rem; }
    #tree-ui-layer { top: 10%; }
}

@keyframes gradientShift {
    0% { background-position: 0% 10%; }
    100% { background-position: 0% 90%; }
}

/* 타이틀 스타일 */
#tree-ui-layer {
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none;
    z-index: 10;
}

.title-letter {
    display: inline-block;
    font-family: 'Chewy', cursive;
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 2px 2px 0px #ff9a9e, 0 0 20px rgba(255, 255, 255, 0.4);
    opacity: 0;
    transform: translateY(-100px);
    animation: dropIn 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes dropIn {
    0% { opacity: 0; transform: translateY(-120px) rotate(-5deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}



/* Together Modal Grid Styles */
.together-day-btn {
    aspect-ratio: 1;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 내용을 위, 중간, 아래로 분배 */
    padding: 10px; /* 내부 여백 추가 */
    font-family: 'Jua', sans-serif;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    background-color: white;
    border: 2px solid #f3f4f6;
    color: #9ca3af;
}

.together-day-btn.unlocked {
    background-color: #fff;
    border-color: #FF9EAA;
    color: #2D2D2D;
    cursor: pointer;
    box-shadow: 0 4px 0px #FFD1DA;
}

.together-day-btn.unlocked:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 0px #FF9EAA;
    border-color: #FF5C77;
}

.together-day-btn.unlocked:active {
    transform: translateY(0px);
    box-shadow: 0 2px 0px #FF9EAA;
}

.together-day-btn.completed {
    background: linear-gradient(135deg, #fff 0%, #FFF0F5 100%);
    border-color: #8AC9A6;
    box-shadow: 0 4px 0px #A5D6A7;
}

.together-day-btn .day-num {
    font-size: 1.8rem;
    font-weight: bold;
    color: #2D2D2D;
    line-height: 1;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 완료 아이콘 스타일 수정 */
.together-day-btn .status-icon {
    font-size: 0.9rem;
    /*align-self: flex-end; !* 오른쪽 아래로 배치 *!*/
    height: 1rem;
}

.together-day-btn.locked {
    background-color: #f9fafb;
    opacity: 0.7;
    cursor: not-allowed;
}

.together-sentence-card {
    background-color: white;
    border: 2px solid #f3f4f6;
    border-radius: 1.5rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.together-sentence-card:hover {
    border-color: #FF9EAA;
    box-shadow: 0 10px 25px -5px rgba(255, 158, 170, 0.3);
    transform: scale(1.01);
}


/* [추가] CTA 버튼 테두리 발광 애니메이션 */
@keyframes border-glow {
    0%, 100% {
        /* 기본 상태: 입체 그림자만 있음 */
        box-shadow: 0 4px 0 #6eb78e, 0 0 0 0 rgba(138, 201, 166, 0);
    }
    50% {
        /* 중간 상태: 초록색 빛(Glow)이 밖으로 퍼짐 */
        box-shadow: 0 4px 0 #6eb78e, 0 0 15px 4px rgba(138, 201, 166, 0.6);
    }
}

.btn-glow-border {
    animation: border-glow 2s ease-in-out infinite;
}

/* 기본은 숨김 */
#menu-dropdown,
.ui-menu-dropdown,
.dropdown-menu {
    display: none;
}

/* 열렸을 때 */
#menu-dropdown.is-open,
.ui-menu-dropdown.is-open,
.dropdown-menu.is-open {
    display: block;
}


@media screen and (max-width: 1000px) {
    .map-nodes--grid {
        top: 250px;
        left: 50%;
        transform: translateX(-50%);
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;
        gap: 250px;
    }
    .map-nodes--grid .station-wrap {
        width: 96px;
        height: 145px;
    }
    /*.together-fixed {*/
    /*    scale: 0.75;*/
    /*    top: 10px;*/
    /*    right: 0px;*/
    /*}*/
    .ui-mini-card {
        width: 66px;
        height: 88px;
    }
    #mission-grid {
        flex-direction: column;
        gap: 1.5rem;
    }
    #mission-grid > * {
        width: 100%;
        flex: none;
    }
}

@media (max-width: 600px) {
    .title-letter { font-size: 3rem; }
    #tree-ui-layer { top: 10%; }
}

/* Responsive Fix for Dropdown on small screens */
@media (max-width: 640px) {
    .level-dropdown-container {
        left: 1rem !important;
        right: 1rem !important;
        width: calc(100% - 2rem) !important;
        max-width: none !important;
    }
    .level-dropdown-container select {
        font-size: 0.75rem !important;
        padding-right: 2.5rem !important;
        padding-left: 1rem !important;
        white-space: normal;
        line-height: 1.2;
    }
}

/* =========================================
   모바일 본 학습 이미지
   PC와 동일한 구름 모양 및 확대·축소 애니메이션 유지
========================================= */
@media (max-width: 767px) {
    .cloud-blob-container.ui-focus-img-container {
        width: min(58vw, 220px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        margin: 0 auto 1rem !important;
        padding: 0 !important;
        flex-shrink: 0;
    }

    .cloud-img-effect.ui-focus-img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        padding: 0.5rem !important;
        transform-origin: center;
        will-change: transform;
    }
}


/* PC, 모바일 공통: 파란색 테두리 버튼 스타일 */
.btn-blue-outline {
    background-color: #ffffff !important;
    color: #3B82F6 !important;
    border: 2px solid #3B82F6 !important;
    transition: all 0.2s ease-in-out !important;
}
.btn-blue-outline:hover {
    background-color: #3B82F6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}
.btn-blue-outline:active {
    transform: scale(0.95) !important;
}

/* =========================================
   청킹투게더 플로팅 버튼 (위치 좌측 이동 및 크기 확대)
   ========================================= */
.together-fixed {
    position: fixed;
    top: 24px;   /* 상단으로 복귀 */
    right: 24px; /* 우측으로 복귀 */
    left: auto;  /* 좌측 강제 속성 해제 */
    z-index: 50;
    animation: float 3s ease-in-out infinite;
}

.together-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 4px solid #FF8FA3; /* 테두리 두께 증가 */
    border-radius: 999px;
    padding: 12px 24px 12px 14px; /* 여백을 늘려 전체 크기 확대 */
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 4px 4px 0 rgba(45,45,45,.1);
}

.together-icon {
    width: 48px; /* 크기 확대 */
    height: 48px; /* 크기 확대 */
    background: #FF8FA3;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px; /* 아이콘 크기 확대 */
    box-shadow: inset 0 0 5px rgba(0,0,0,.1);
    transition: transform .3s ease;
}

.together-title {
    font-family: "Chewy", "Jua", sans-serif;
    font-size: 20px; /* 텍스트 크기 확대 */
    color: #2D2D2D;
    line-height: 1;
    transition: color .3s;
}

.together-sub {
    font-size: 14px; /* 서브 텍스트 크기 확대 */
    font-weight: bold;
    color: #9ca3af;
}

/* =========================================
   게시판 플로팅 고정 버튼 스타일
   ========================================= */
#floating-board-btn {
    position: fixed;
    bottom: 5.5rem; /* 맨 위로 가기 버튼 위쪽에 배치 */
    right: 2rem;
    width: 2.8rem;
    height: 2.8rem;

    /* 레트로한 민트그린 색상 (테마 컬러와 매칭) */
    background-color: #8AC9A6;
    color: white;
    border: 2px solid white; /* 위로가기 버튼과 통일감 부여 */
    border-radius: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* 부드러운 입체 그림자 */
    box-shadow: 0 4px 15px rgba(138, 201, 166, 0.6);
    cursor: pointer;
    z-index: 200;
    text-decoration: none;

    /* 초기 상태: 숨김 (스크롤 시 등장) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 스크롤 시 등장 애니메이션 */
#floating-board-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 호버 시 통통 튀는 애니메이션 효과 */
#floating-board-btn:hover {
    background-color: #6eb78e; /* 살짝 진해지는 민트 */
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 201, 166, 0.8);
}

#floating-board-btn i {
    font-size: 1.1rem;
    margin-bottom: 2px;
}

#floating-board-btn span {
    font-size: 0.65rem;
    font-family: 'Jua', sans-serif;
    line-height: 1;
}

/* 데스크탑(PC) 환경 크기 조정 */
@media (min-width: 768px) {
    #floating-board-btn {
        bottom: 7.5rem;
        right: 3rem;
        width: 3.5rem;
        height: 3.5rem;
    }
    #floating-board-btn i {
        font-size: 1.3rem;
    }
    #floating-board-btn span {
        font-size: 0.75rem;
    }
}
/* =========================================
   게시판(섹션 3) 스크롤 스냅 및 화면 맞춤 설정
   ========================================= */
#board-section {
    width: 100%;
    height: 100vh; /* 화면 높이에 꽉 차게 설정 */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    z-index: 20;
    background-color: #FFF5F7; /* 자연스러운 배경색 연결 */

    box-sizing: border-box !important;
    /* [수정] 좌우 여백을 180px로 동일하게 맞춰서 가운데 정렬 (상 100, 우 180, 하 100, 좌 180) */
    padding: 100px 180px 100px 180px !important;
}

/* 둥근 액자 프레임 디자인 유지 */
#board-section iframe {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 24px;
    border: 4px solid #FFD1DA;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
}

/* =========================================
   섹션 3 진입 시 플로팅 버튼 가시성 제어
   ========================================= */
/* 1. (모든 환경) 게시판 화면에 들어오면 '게시판 플로팅 버튼'은 무조건 숨김 */
body.is-in-board #floating-board-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================================
   반응형 해상도 세부 조정
   ========================================= */

/* 테블릿 (1200px 이하) */
@media screen and (max-width: 1200px) {
    #board-section {
        /* [수정] 테블릿에서도 좌우 여백을 130px로 동일하게 맞춤 */
        padding: 90px 130px 100px 130px !important;
    }
}

/* 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    #board-section {
        /* 모바일은 화면을 넓게 쓰기 위해 좌우 15px로 얇고 동일하게 맞춤 */
        padding: 80px 15px 20px 15px !important;
    }

    /* 모바일에서는 여백이 좁아 글쓰기 버튼을 가릴 수 있으므로 투게더/탑 버튼 숨김 */
    body.is-in-board #scroll-to-top,
    body.is-in-board .together-fixed {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(20px) scale(0.9) !important;
        transition: all 0.3s ease-out !important;
    }
}

/* =========================================
   반응형 모바일 환경 세부 조정 덮어쓰기
   ========================================= */
@media screen and (max-width: 1000px) {
    .together-fixed {
        scale: 0.9 !important; /* 기존 0.75보다 크게 유지 */
        top: 20px !important;
        right: 10px !important;
        left: auto !important;
    }
}


/* =========================================
   모바일 전용: 게시판 섹션 진입 시 플로팅 요소 숨김
   ========================================= */
@media (max-width: 767px) {
    /* body에 is-in-board 클래스가 붙었을 때 3개의 플로팅 버튼 제어 */
    body.is-in-board #scroll-to-top,
    body.is-in-board .together-fixed,
    body.is-in-board #floating-board-btn {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important; /* 클릭 방지 */
        transform: translateY(20px) scale(0.9) !important; /* 아래로 살짝 작아지며 사라짐 */
        transition: all 0.3s ease-out !important;
    }
}

/* 모바일에서 스크롤 시 나타나는 상단 고정 로고만 숨김 */
@media (max-width: 767px) {
    #logo-scrolled,
    .logo-scrolled {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* =========================================
   1. 섹션 2 (기찻길) 테블릿 화면 최적화
   - 세로 배열 강제 유지
   - 팻말과 겹치지 않도록 스테이션1 위치 하단으로 이동
   - 기차 아이콘 숨김 처리
   ========================================= */
@media screen and (max-width: 1200px) {
    /* 기찻길 박스 컨테이너를 기존(250px)보다 더 아래로(380px) 내림 */
    .map-nodes--grid {
        top: 380px !important;
        left: 50%;
        transform: translateX(-50%);
        justify-content: center;
        align-items: center;
        flex-direction: column; /* 세로 정렬 보장 */
        position: absolute;
        gap: 250px;
    }

    /* 스테이션이 내려간 만큼 배경의 기찻길(선)도 동일하게 내려서 위치를 맞춤 */
    #track-svg {
        top: 130px !important;
    }

    .map-nodes--grid .station-wrap {
        width: 96px;
        height: 145px;
    }

    /* 청킹투게더 플로팅 버튼 테블릿 크기 및 위치 조정 */
    .together-fixed {
        scale: 0.9 !important;
        top: 20px !important;
        right: 10px !important;
        left: auto !important;
    }

    /* 💡 테블릿 이하 화면에서는 기차 아이콘 완전 숨김 */
    #park-train {
        display: none !important;
    }
}

/* =========================================
   테블릿 전용 (768px ~ 1200px): 메인 로고 크기 대폭 확대 및 상단 바짝 이동
   ========================================= */
@media screen and (min-width: 768px) and (max-width: 1200px) {
    /* 1. 상단 위치로 더 바짝 올리기 (기존 4.5rem -> 2.5rem으로 대폭 축소) */
    .logo-layer {
        padding-top: 2.5rem !important;
    }

    /* 2. 메인 로고 글자 크기 더 키우기 (기존 5.5vw -> 7vw) */
    .logo-line--primary {
        font-size: 7vw !important;
    }

    /* 3. 서브 로고(Chunking-Based Easy Speaking) 글자 크기 더 키우기 (기존 3.5vw -> 4.5vw) */
    .logo-line--secondary {
        font-size: 4.5vw !important;
    }

    /* 4. 스크롤 시 나타나는 Kids & Mom 크기 동기화 (기존 4.5vw -> 6vw) */
    .logo-kids-mom {
        font-size: 6vw !important;
    }

    /* 5. 텍스트가 겹치지 않도록 로고 컨테이너 높이도 더 넓게 확보 (기존 12vw -> 16vw) */
    .logo-stage {
        height: 16vw !important;
    }
}

/* =========================================
   모바일 전용 (767px 이하): 마법사 청킹 투게더 플로팅 크기 축소
   ========================================= */
@media screen and (max-width: 767px) {
    /* 1. 컨테이너를 우측 상단에 딱 붙이기 */
    .together-fixed {
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        scale: 1 !important; /* 강제 scale 축소 대신 실제 픽셀을 줄입니다 */
    }

    /* 2. 버튼 전체 여백과 테두리, 간격 대폭 축소 */
    .together-btn {
        padding: 6px 12px 6px 8px !important;
        border-width: 2px !important;
        gap: 6px !important;
        box-shadow: 2px 2px 0 rgba(45,45,45,.1) !important; /* 그림자도 얇게 */
    }

    /* 3. 마법봉 아이콘 동그라미 크기 확 줄이기 */
    .together-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }

    /* 4. 텍스트 크기 최소화 */
    .together-title {
        font-size: 15px !important;
    }

    .together-sub {
        font-size: 10px !important;
        letter-spacing: -0.5px !important; /* 자간을 줄여서 더 슬림하게 */
    }
}

/* =========================================
   모바일 전용: 게시판(board-section) 반응형 최적화
========================================= */
@media screen and (max-width: 768px) {
    #board-section {
        /* 상단 네비게이션 공간만 남기고 좌우/하단 여백 최소화 */
        padding: 70px 10px 15px 10px !important;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* 2. 숨겨지던 탑 버튼을 다시 나타나게 덮어쓰기 */
    body.is-in-board #scroll-to-top {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important; /* 클릭 가능하게 복구 */
        transform: translateY(0) scale(1) !important;
    }

    #board-section iframe {
        width: 100%;
        flex: 1; /* 남은 화면 공간을 꽉 채우도록 설정 */

        /* 좁은 화면에 맞춰 테두리 두께와 둥글기를 부드럽게 축소 */
        border-radius: 16px !important;
        border: 2px solid #FFD1DA !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;

        /* 모바일(특히 iOS)에서 iframe 내부 스크롤이 부드럽게 동작하도록 처리 */
        -webkit-overflow-scrolling: touch;
    }
}

/* 480px 이하의 아주 작은 모바일 화면 추가 대응 */
@media screen and (max-width: 480px) {
    .together-fixed {
        top: 8px !important;
        right: 8px !important;
    }

    #board-section {
        padding: 60px 0px 60px 0px !important; /* 좌우 여백을 완전히 없애서 공간 확보 */
    }

    #board-section iframe {
        border-radius: 0px !important; /* 화면에 딱 붙게 직각 처리 */
        border-width: 1px 0 0 0 !important; /* 상단 선만 살짝 남김 */
    }
}

/* =========================================
   PC 전용 (1201px 이상): 게시판 섹션 화면 꽉 차게 + 배경 연핑크 통일
========================================= */
@media screen and (min-width: 1201px) {
    #board-section {
        padding: 0 !important;
        height: 100vh !important;
        background-color: #FFF5F7 !important; /* 다른 섹션과 동일한 연핑크 배경 */
    }

    #board-section iframe {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background-color: #FFF5F7 !important; /* 아이프레임 내부 배경도 연핑크로 통일 */
    }
}

/* =========================================
   플로팅 버튼 3개 크기 완전 고정 (화면 창을 줄여도 절대 작아지지 않음)
   ========================================= */

/* 1. 마법사 청킹(Together) 버튼 */
.together-fixed {
    scale: 1 !important;
    transform: none !important;
    top: 32px !important;
    right: 32px !important;
    left: auto !important;
}

.together-btn {
    padding: 16px 32px 16px 18px !important;
    border-width: 5px !important;
}

.together-icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 26px !important;
}

.together-title {
    font-size: 24px !important;
}

.together-sub {
    font-size: 15px !important;
}

/* 2. 공통: 동그란 버튼(탑, 게시판) 크기 고정 */
#scroll-to-top,
#floating-board-btn {
    width: 4.5rem !important;
    height: 4.5rem !important;
    border-width: 3px !important;
}

/* 3. 탑(위로 가기) 버튼 위치 및 아이콘 크기 고정 */
#scroll-to-top {
    bottom: 3.5rem !important;
    right: 3.5rem !important;
    font-size: 1.6rem !important;
}

/* 4. 게시판 버튼 위치, 아이콘, 텍스트 크기 고정 */
#floating-board-btn {
    bottom: 9rem !important;
    right: 3.5rem !important;
}

#floating-board-btn i {
    font-size: 1.6rem !important;
    margin-bottom: 4px !important;
}

#floating-board-btn span {
    font-size: 0.85rem !important;
    font-weight: bold !important;
}

/* =========================================
   플로팅 버튼 3개 크기 완전 고정 (PC/테블릿 전용: 768px 이상)
   ========================================= */
@media screen and (min-width: 768px) {
    /* 1. 마법사 청킹(Together) 버튼 */
    .together-fixed {
        scale: 1 !important;
        transform: none !important;
        top: 32px !important;
        right: 32px !important;
        left: auto !important;
    }

    .together-btn {
        padding: 16px 32px 16px 18px !important;
        border-width: 5px !important;
    }

    .together-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 26px !important;
    }

    .together-title {
        font-size: 24px !important;
    }

    .together-sub {
        font-size: 15px !important;
    }

    /* 2. 공통: 동그란 버튼(탑, 게시판) 크기 고정 */
    #scroll-to-top,
    #floating-board-btn {
        width: 4.5rem !important;
        height: 4.5rem !important;
        border-width: 3px !important;
    }

    /* 3. 탑(위로 가기) 버튼 위치 및 아이콘 크기 고정 */
    #scroll-to-top {
        bottom: 3.5rem !important;
        right: 3.5rem !important;
        font-size: 1.6rem !important;
    }

    /* 4. 게시판 버튼 위치, 아이콘, 텍스트 크기 고정 */
    #floating-board-btn {
        bottom: 9rem !important;
        right: 3.5rem !important;
    }

    #floating-board-btn i {
        font-size: 1.6rem !important;
        margin-bottom: 4px !important;
    }

    #floating-board-btn span {
        font-size: 0.85rem !important;
        font-weight: bold !important;
    }
}

/* =========================================
   [모바일 전용] 마법사 청킹 투게더 플로팅 버튼 초소형화 및 우측 상단 고정 (767px 이하)
   ========================================= */
@media screen and (max-width: 767px) {
    /* 1. 컨테이너를 우측 상단에 딱 붙이기 */
    .together-fixed {
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        scale: 1 !important; /* 강제 scale 축소 대신 실제 픽셀을 줄입니다 */
        transform-origin: top right !important;
    }

    /* 2. 버튼 전체 여백과 테두리, 간격 대폭 축소 */
    .together-btn {
        padding: 6px 12px 6px 8px !important;
        border-width: 2px !important;
        gap: 6px !important;
        box-shadow: 2px 2px 0 rgba(45,45,45,.1) !important;
    }

    /* 3. 마법봉 아이콘 동그라미 크기 확 줄이기 */
    .together-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }

    /* 4. 텍스트 크기 최소화 */
    .together-title {
        font-size: 15px !important;
    }

    .together-sub {
        font-size: 10px !important;
        letter-spacing: -0.5px !important;
    }
}
/* =========================================
   플로팅 버튼 3개 크기 완전 고정 (PC/테블릿 전용: 768px 이상)
   ========================================= */
@media screen and (min-width: 768px) {
    /* 1. 마법사 청킹(Together) 버튼 */
    .together-fixed {
        scale: 1 !important;
        transform: none !important;
        top: 32px !important;
        right: 32px !important;
        left: auto !important;
    }

    .together-btn {
        padding: 16px 32px 16px 18px !important;
        border-width: 5px !important;
    }

    .together-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 26px !important;
    }

    .together-title {
        font-size: 24px !important;
    }

    .together-sub {
        font-size: 15px !important;
    }

    /* 2. 공통: 동그란 버튼(탑, 게시판) 크기 고정 */
    #scroll-to-top,
    #floating-board-btn {
        width: 4.5rem !important;
        height: 4.5rem !important;
        border-width: 3px !important;
    }

    /* 3. 탑(위로 가기) 버튼 위치 및 아이콘 크기 고정 */
    #scroll-to-top {
        bottom: 3.5rem !important;
        right: 3.5rem !important;
        font-size: 1.6rem !important;
    }

    /* 4. 게시판 버튼 위치, 아이콘, 텍스트 크기 고정 */
    #floating-board-btn {
        bottom: 9rem !important;
        right: 3.5rem !important;
    }

    #floating-board-btn i {
        font-size: 1.6rem !important;
        margin-bottom: 4px !important;
    }

    #floating-board-btn span {
        font-size: 0.85rem !important;
        font-weight: bold !important;
    }
}

/* =========================================
   [모바일 전용] 플로팅 버튼 3총사 초소형화 및 우측 딱붙임 (767px 이하)
   ========================================= */
@media screen and (max-width: 767px) {
    /* 1. 마법사 청킹 투게더 버튼 */
    .together-fixed {
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        scale: 1 !important;
        transform-origin: top right !important;
    }
    .together-btn {
        padding: 6px 12px 6px 8px !important;
        border-width: 2px !important;
        gap: 6px !important;
        box-shadow: 2px 2px 0 rgba(45,45,45,.1) !important;
    }
    .together-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }
    .together-title { font-size: 15px !important; }
    .together-sub { font-size: 10px !important; letter-spacing: -0.5px !important; }

    /* 2. 탑(TOP) 버튼 & 게시판 버튼 공통 축소 및 우측 밀착 */
    #scroll-to-top,
    #floating-board-btn {
        width: 2.4rem !important;
        height: 2.4rem !important;
        right: 12px !important;
        border-width: 2px !important;
    }

    /* 공통 아이콘 크기 축소 */
    #scroll-to-top i,
    #floating-board-btn i {
        font-size: 1rem !important;
    }

    /* 3. 탑(TOP) 버튼 높이 위치 */
    #scroll-to-top {
        bottom: 16px !important;
    }

    /* 4. 게시판 버튼 높이 위치 및 텍스트 축소 */
    #floating-board-btn {
        bottom: 64px !important;
    }
    #floating-board-btn span {
        font-size: 0.55rem !important;
        margin-top: -2px !important;
    }
}

/* 아주 작은 화면(예: 아이폰 SE 등 480px 이하)에서는 모서리에 더 바짝 붙이기 */
@media screen and (max-width: 480px) {
    .together-fixed { top: 8px !important; right: 20px !important; }
    #scroll-to-top, #floating-board-btn { right: 20px !important; }
}
/* =========================================
   [모바일 전용] 마법사 청킹 투게더 플로팅 버튼 초소형화 및 우측 상단 고정 (767px 이하)
   ========================================= */
@media screen and (max-width: 767px) {
    /* 1. 컨테이너를 우측 상단에 딱 붙이기 */
    .together-fixed {
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        scale: 1 !important; /* 강제 scale 축소 대신 실제 픽셀을 줄입니다 */
        transform-origin: top right !important;
    }

    /* 2. 버튼 전체 여백과 테두리, 간격 대폭 축소 */
    .together-btn {
        padding: 6px 12px 6px 8px !important;
        border-width: 2px !important;
        gap: 6px !important;
        box-shadow: 2px 2px 0 rgba(45,45,45,.1) !important;
    }

    /* 3. 마법봉 아이콘 동그라미 크기 확 줄이기 */
    .together-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }

    /* 4. 텍스트 크기 최소화 */
    .together-title {
        font-size: 15px !important;
    }

    .together-sub {
        font-size: 10px !important;
        letter-spacing: -0.5px !important;
    }
}

/* 아주 작은 화면(예: 아이폰 SE 등 480px 이하)에서는 모서리에 더 바짝 붙이기 */
@media screen and (max-width: 480px) {
    .together-fixed {
        top: 8px !important;
        right: 8px !important;
    }
}



.ui-intro-day-views::before {
    display: none !important;
    content: none !important;
}

/* Day 화면 우측 Together 복습 카드 */
.together-day-card {
    position: relative;

    background: #f7f1ff !important;
    border: 2px dashed #cdb5e8 !important;
    border-radius: 1.5rem;

    font-family: inherit;
    text-align: center;

    box-shadow:
            0 8px 18px rgba(112, 76, 145, 0.1),
            4px 4px 0 rgba(205, 181, 232, 0.4);

    overflow: hidden;
}

/* 오른쪽 위 작은 복습 라벨 */
.together-day-card::before {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;

    content: "REVIEW";

    padding: 4px 9px;

    background: #ffffff;
    border: 1px solid #d8c1ef;
    border-radius: 9999px;

    color: #7652a0;
    font-family: "Quicksand", "Jua", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* 아이콘 영역 */
.together-day-card__icon {
    position: relative;

    background: rgba(228, 210, 255, 0.58) !important;
    color: #7652a0;

    border: 1px solid rgba(205, 181, 232, 0.8);
}

/* 아이콘 뒤 은은한 원 */
.together-day-card__icon::before {
    position: absolute;

    width: 72px;
    height: 72px;

    content: "";

    background: rgba(255, 255, 255, 0.65);
    border-radius: 50%;
}

.together-day-card__icon i {
    position: relative;
    z-index: 1;
}

/* Together 제목 */
.together-day-card h3 {
    color: #563575 !important;
}

/* Day N */
.together-day-card p {
    color: #9a64bd !important;
}

/* 마우스를 올렸을 때 */
.together-day-card:hover {
    background: #f2e9ff !important;
    border-color: #ad86d0 !important;

    box-shadow:
            0 14px 26px rgba(112, 76, 145, 0.15),
            4px 4px 0 rgba(173, 134, 208, 0.38);

    transform: translateY(-6px);
}

/* 클릭할 때 */
.together-day-card:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 5px 10px rgba(112, 76, 145, 0.12);
}