@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}      

/* 1. 통통 튀는 애니메이션 (뱃지, 특정 아이콘용) */
    @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
/* 2. 쫀득한 젤리 애니메이션 (메인 텍스트용 추가) */
    @keyframes jellyText {
        0%, 100% { transform: scale3d(1, 1, 1); }
        30% { transform: scale3d(1.05, 0.95, 1); }
        40% { transform: scale3d(0.98, 1.00, 1); }
        50% { transform: scale3d(1.05, 0.95, 1); }
        65% { transform: scale3d(1.0, 1.00, 1); }
        75% { transform: scale3d(1.02, 0.98, 1); }
        }
/* 3. 부드럽게 둥둥 떠다니는 애니메이션 (데코 아이콘용) */
    @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(5deg); }
            100% { transform: translateY(0px) rotate(0deg); }

        }
    /* 기본 초기화 및 폰트 설정 */
    ::selection {  color:#da4b38;  background-color: #f3cfb2;}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Paperozi', sans-serif;
            word-break: keep-all;
            text-decoration: none;
            color: inherit;
        }
        
        body {
            background-color: #ce4b38;
            overflow-x: hidden;
        }


    .home{
      z-index: 999;
      width: 100%;
      height: 60px;
      background-color: #f3cfb2;
      position: fixed;
      top: 0;
      text-align: center;
      align-content: center;
      font-family: 'Paperozi'; font-weight: 600; color: #da5145;  font-size: 26px;
    }


    footer{
      background-color: #351f1d;
      margin-top: 50px;
      padding: 10px;
    }
    .fbox{
      margin: 0 auto;
      width: 600px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .ft{
      font-size: 10px;
      color: #c5bbb6;
      text-align: left;
    }
    .fi{
      width: 120px;
      overflow: hidden;
    }
    .fi img{
      width: 100%;
      object-fit: cover;

    }



        /* 반응형 컨테이너 설정 */
        .landing-wrap {
            width: 100%;
            padding: 40px 20px 80px;
            margin: 0 auto;
            position: relative;
        }

        /* 1920px 화면에서 전체 폭 1280px 중앙 정렬 */
        @media (min-width: 1920px) {
            .landing-wrap {
                width: 1280px;
                padding: 60px 0 100px;
            }
        }

        /* 3840px 화면에서 전체 폭 1920px 중앙 정렬 */
        @media (min-width: 3840px) {
            .landing-wrap {
                width: 1920px;
                padding: 100px 0 160px;
            }
        }

        /* 떠다니는 배경 데코 아이콘들 */
        .deco-icon {
            position: absolute;
            z-index: 1;
        }
   
        .deco-x-1 { top: 5%; left: 10%; width: 20px; opacity: 0.8; }
        .deco-x-2 { top: 20%; right: 5%; width: 20px; opacity: 0.8; }
        .deco-x-3 { top: 40%; left: 15%; width: 20px; opacity: 0.8; }
        .deco-x-4 { top: 70%; left: 5%; width: 20px; opacity: 0.8; }
        .deco-x-5 { bottom: 10%; right: 5%; width: 20px; opacity: 0.8; }
        .deco-x-6 { bottom: 5%; left: 5%; width: 20px; opacity: 0.8; }
        
        .deco-pencil { top: 25%; left: 2%; width: 100px; animation: float 1.5s infinite ease-in;}
        .deco-phone { top: 40%; right: 5%; width: 120px; animation: float 6s infinite ease-in-out;}
        .deco-megaphone { top: 48%; left: 8%; width: 90px; animation: float 4s infinite ease-in-out;}
        .deco-pc { bottom: 0%; right: 10%; width: 150px; animation: float 2s infinite ease-in-out;}

        /* 컨텐츠 래퍼 (아이콘보다 위에 오도록 z-index 설정) */
        .content-inner {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 우측 상단 활동비 배지 */
        .budget-badge {
            position: absolute;
            top: -20px;
            right: 10%;
            width: 120px;
            z-index: 20;

            
        }

        /* 메인 타이틀 영역 */
        .header-section {
            text-align: center;
            color: #ffffff;
            margin: 120px 0;
            width: 100%;
            display: block;
            
        }
        .header-section h3 {
            font-size: 1.5rem;
            font-weight: 400;
            margin-bottom: 10px;
        }
        .header-section h1 {
            font-size: 4.5rem;
            font-weight: 900;
            line-height: 1.2;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            display: inline-block;
            transform-origin: center;
            /* animation: jellyText 3s infinite; */
        }
        .date-box {
            margin: 0 auto;
            width: 30%;
            display: block;
            background-color: #ffffff;
            color: #ce4b38;
            font-size: 1.2rem;
            font-weight: 700;
            padding: 10px 30px;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        /* 일러스트 영역 */
        .store-illustration {
            width: 100%;
            max-width: 800px;
            margin: 0 auto 40px;
        }
        .store-illustration img {
            width: 100%;
            height: auto;
            display: block;
            animation: jellyText 5s infinite;
            filter: drop-shadow(10px 20px 10px rgba(0,0,0,0.2));
        }

        /* 하단 정보 박스 공통 */
        .info-box {
            background-color: #ffffff;
            width: 100%;
            max-width: 800px;
            border-radius: 30px;
            padding: 40px;
            margin-bottom: 30px;
            box-shadow: 0 5px 5px rgba(090, 7, 7, 0.05);
            transition: all 0.1s ease-in-out
        }

        .info-box:hover {
            transform: translateY(-10px); /* 위로 10px 이동 */
            box-shadow: 5px 5px 5px rgba(90, 7, 7, 0.3); /* 그림자 진하게 */
        }

        .box-title {
            text-align: center;
            color: #bd3f2e;
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: 30px;
        }

        /* 정보 리스트 (dl, dt, dd 구조) */
        .info-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .info-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        .info-label {
            background-color: #c95d4d;
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: 700;
            padding: 5px 15px;
            border-radius: 20px;
            white-space: nowrap;
            min-width: 100px;
            text-align: center;
        }
        .info-desc {
            color: #333333;
            font-size: 1.1rem;
            font-weight: 500;
            line-height: 1.6;
            margin-top: 3px;
        }

        /* 지원하기 버튼 디자인 추가 */
        .bt {
            margin-top: 20px;
            width: 100%;
            max-width: 300px;
        }
        .bt a {
            display: block;
            background-color: #f3cfb2; /* 눈에 띄는 짙은 색상 */
            color: #da4b38;
            text-align: center;
            font-size: 1.5rem;
            font-weight: 800;
            padding: 15px 0;
            border-radius: 50px;
            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        .bt a:hover {
            background-color: #f88d2a;
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.3);
        }
        @media (max-width: 768px) {
            .deco-x-1 { top: 5%; left: 10%; width: 20px; opacity: 0.8; }
            .deco-x-2 { top: 20%; right: 5%; width: 20px; opacity: 0.8; }
            .deco-x-3 { top: 40%; left: 15%; width: 20px; opacity: 0.8; }
            .deco-x-4 { top: 68.5%; left: 67%; width: 20px; opacity: 0.8; }
            .deco-x-5 { bottom: 10%; right: 5%; width: 20px; opacity: 0.8; }
            .deco-x-6 { bottom: 5%; left: 5%; width: 20px; opacity: 0.8; }

            .landing-wrap { padding: 40px 20px 10px; margin: 0 auto; position: relative; }
            .budget-badge { right: 0; width: 90px; top: -10px;}
            .info-box { padding: 30px 20px; border-radius: 20px; }

            .header-section{ margin-bottom: 60px;}    
            .header-section h1 { font-size: 4em; }
            .omchicken{ font-size: 3rem;}
            .header-section h3 { font-size: 1.5rem; padding-top: 30px; margin-bottom: 0px;}
            .date-box { width: 86%; font-size: 1rem; padding: 10px 10px; }

            .store-illustration { margin-bottom: 80px; }

            .box-title { font-size: 1.6rem; margin-bottom: 20px; }
            .info-item { flex-direction: column; gap: 8px; }
            .info-label { font-size: 1rem; padding: 4px 12px; min-width: auto; }
            .info-desc { font-size: 0.95rem; }
            .bt a { font-size: 2rem; padding: 10px 0; width: 100%; }
            
            footer{padding: 20px 0; }
            .fbox { flex-direction: column; gap: 20px; width: 100%;}
            .ft { text-align: center; font-size: 11px; }

            .deco-pencil {top: 29%; left: 2%; width: 80px; z-index: 99; }
            .deco-phone {top: 41%; right: 5%; width: 80px; z-index: 99; }
            .deco-megaphone {top: 45%; left: 8%; width: 80px; z-index: 99; }
            .deco-pc {bottom: 4%; right: 3%; width: 100px; z-index: 99; }
        }