/* 메인 콘텐츠 중앙 정렬 시켜야됨 */
 main {
     width:100%;
     /* 1100 -> 1200 */
     margin: 0 auto;
     /*padding: 100px 20px;*/
     /*padding-bottom: 120px;*/
 }

 section {
     margin-bottom: 0;
     height:
 }

 section:last-child {
     margin-bottom: 0;
 }

 .tab .close-btn {
     margin-left: 10px;
     font-size: 12px;
     color: #999;
     cursor: pointer;
     padding: 2px;
 }

 .tab .close-btn:hover {
     color: #333;
 }

 /* 섹션 1 */
 .section-1 {
     text-align: center;
     height: 4500px;
     margin: 250px auto 500px;
     position:relative;
 }

 .section-1 .anim-container {
    position: -webkit-sticky; /*<<< 사파리 브라우저에서 호환된다고 함*/
    position: sticky;

    top:50%;
    transform: translateY(-50%);

     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .section-1 .anim-text {
     font-size: 48px;
     font-weight: 700;
     color: black;
     margin: 8px 0;
     opacity: 0;
     transition: opacity 1.2s ease-in-out;
 }

 .section-1 .anim-text.tagline {
     font-size: 36px;
     letter-spacing: 2px;
 }

 .section-1 .anim-text.tagline span {
     margin: 0 15px;
 }

 .section-1 .anim-text.visible {
     opacity: 1;
 }

 /* 섹션 2 */
 .section-2 {
     position: relative; /* 자식 요소(버튼)의 기준점 */
     width: 100%; /* 너비를 꽉 채우도록 설정 */
     /* 높이는 슬라이드 이미지에 따라 자동 조절되거나 고정값을 주세요 */
     /* height: 600px; */
     overflow: hidden;
     margin: 0 auto;
     background-color: gainsboro;
 }

 /* 슬라이더 스타일 (기존 유지) */
 .slider-container {
     display: flex;
     width: 300%;
     height: 100%;
     transition: transform 0.8s ease-in-out;
 }
 .slide {
     width: 33.3333%;
     height: auto;
     flex-shrink: 0;
     position: relative;
 }
 .slide-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* ========================================================= */
 /* [핵심] 중앙 버튼 그룹 배치 (test.html 스타일 이식) */
 /* ========================================================= */

 .button-container {
     position: absolute;
     top: 55%;
     left: 51.5%;
     transform: translate(-50%, -50%);
     z-index: 10;

     display: flex;
     gap: 40px; /* 버튼 사이 간격 */
     align-items: center;
     justify-content: center;
     width: 100%;
 }

 /* 폰트 적용 */
 .paw-button, .bone-button {
     font-family: 'Jua', sans-serif, system-ui;
 }

 /* ========================================================= */
 /* 1. 시작하기 버튼 (말랑 발바닥) - 위치/크기 재조정 */
 /* ========================================================= */
 .paw-button {
     position: relative;
     appearance: none;      /* 기본 스타일 제거 */
     background: none;      /* 배경 제거 */
     border: none;          /* 테두리 제거 */
     box-shadow: none;      /* 그림자 제거 */
     padding: 0;

     width: 130px;          /* 전체 크기 고정 */
     height: 120px;
     cursor: pointer;
     transition: transform 0.1s ease-in-out;
 }

 /* 발바닥 메인 패드 (글씨 배경) */
 .paw-button .pad {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);

     width: 110px;
     height: 85px;

     background-color: #FFAB91; /* 핑크색 */
     border-radius: 45% 45% 50% 50% / 35% 35% 60% 60%;

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

     color: white;
     font-size: 20px;
     font-weight: 800;

     /* 입체감 */
     box-shadow: 0 5px 0 #E64A19, 0 8px 10px rgba(0,0,0,0.3);
     text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
     z-index: 2;
     white-space: nowrap;
 }

 /* 발가락 공통 */
 .paw-button .toe {
     position: absolute;
     width: 32px;
     height: 38px;
     background-color: #FFAB91;
     border-radius: 50%;
     box-shadow: 0 4px 0 #E64A19;
     z-index: 1;
 }

 /* 발가락 위치 정교화 */
 .paw-button .toe-1 { top: 0; left: 5px; transform: rotate(-25deg); }
 .paw-button .toe-2 { top: -8px; left: 42px; }
 .paw-button .toe-3 { top: -8px; right: 42px; }
 .paw-button .toe-4 { top: 0; right: 5px; transform: rotate(25deg); }

 /* 호버 효과 */
 .paw-button:hover { transform: scale(1.05); }
 .paw-button:hover .pad,
 .paw-button:hover .toe { background-color: #FF8A65; }

 /* 클릭 효과 */
 .paw-button:active { transform: scale(0.95) translateY(4px); }
 .paw-button:active .pad { box-shadow: 0 2px 0 #E64A19; }
 .paw-button:active .toe { box-shadow: 0 2px 0 #E64A19; }


 /* ========================================================= */
 /* 2. 커뮤니티 버튼 (뼈다귀) - 위치/크기 재조정 */
 /* ========================================================= */
 .bone-button {
     position: relative;
     appearance: none;
     border: none;

     /* 몸통 스타일 */
     background-color: #FFF3E0; /* 크림색 */
     color: #5D4037;            /* 갈색 글씨 */

     width: 200px;
     height: 60px;
     border-radius: 15px;       /* 약간 둥근 네모 */

     font-size: 20px;
     font-weight: 800;
     cursor: pointer;

     /* 뼈다귀 모양 잡기 위해 마진 확보 */
     margin: 0 25px;

     box-shadow: 0 5px 0 #FFD54F, 0 7px 10px rgba(0,0,0,0.2);
     transition: all 0.2s ease;

     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* 뼈다귀 양쪽 관절 (동그라미) */
 .bone-button::before,
 .bone-button::after {
     content: '';
     position: absolute;
     width: 50px;
     height: 50px;
     background-color: #FFF3E0;
     border-radius: 50%;
     top: 50%;
     transform: translateY(-50%); /* 수직 중앙 정렬 */
     box-shadow: 0 5px 0 #FFD54F;
     z-index: -1; /* 몸통 뒤로 */
     transition: background-color 0.2s ease;
 }

 .bone-button::before { left: -18px; } /* 왼쪽 관절 위치 */
 .bone-button::after  { right: -18px; } /* 오른쪽 관절 위치 */

 /* 호버 효과 (흔들기) */
 @keyframes shake {
     0%, 100% { transform: rotate(0deg); }
     25% { transform: rotate(-3deg); }
     75% { transform: rotate(3deg); }
 }

 .bone-button:hover {
     background-color: #FFE0B2;
     animation: shake 0.4s ease-in-out infinite;
 }
 .bone-button:hover::before,
 .bone-button:hover::after {
     background-color: #FFE0B2;
 }

 /* 클릭 효과 */
 .bone-button:active {
     transform: translateY(4px);
     box-shadow: 0 2px 0 #FFD54F;
 }
 .bone-button:active::before,
 .bone-button:active::after {
     box-shadow: 0 2px 0 #FFD54F;
 }

 /* ========================================================= */
 /* 슬라이드 네비게이션 (점) 위치 조정 */
 /* ========================================================= */
 .slider-nav {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 10px;
     z-index: 20; /* 버튼보다 위에 오거나 같게 */
 }

 .slider-nav-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.5);
     border: 1px solid rgba(0, 0, 0, 0.2);
     cursor: pointer;
     transition: background-color 0.3s;
 }

 .slider-nav-dot.active {
     background-color: white;
 }

 /* 공통 박스 스타일 */
/* .content-box-style {
     padding: 40px;
     background-color: whitesmoke;
     border: 1px solid gainsboro;
     border-radius: 12px;
     text-align: left;
     height: 100%;
 }*/

 /* 섹션 3 */
 .section-3{
    margin-bottom:50px;
 }

 #top_image_section {
    width:100%;
     height: auto;
     display: flex;
     justify-content: start;
     align-items: center;
     overflow: hidden;
     /*border: 1px solid;*/
     margin:0 auto;
     background-color:#fff;
     padding:0 150px;

 }

   #top_image_section .emote-wrap {
       margin:20px 0;
       width: 80%;
       height: 100%;
       display: flex;
       justify-content: start;
       align-items: center;
       background-color: #fff;

       opacity: 0; /*최초 투명*/
       transform: translateX( -100vw); /*화면 밖으로 밀어내기*/
       transition: all 0.5s ease-out; /*1.5초 부드러움 효과*/
   }

   #top_image_section .emote-image {
    border:1px solid #e6e6e6;
    object-fit: cover;
    /* 이미지 비율 유지 */
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    max-width: 1328px;
   }

 #bottom_image_section {
    width:100%;
     height: auto;
     display: flex;
     justify-content: end;
     align-items: center;
     overflow: hidden;
     /*border: 1px solid;*/
     margin:0 auto;
     background-color:#fff;
     padding:0 150px;

 }

   #bottom_image_section .emote-wrap {
       margin:20px 0;
       width: 80%;
       height: 100%;
       display: flex;
       justify-content: end;
       align-items: center;
       background-color: #fff;

       opacity: 0;
       transform: translateX(100vw); /*오른쪽 바깥으로 밀기*/
       transition: all 0.5s ease-out;
   }

   #bottom_image_section .emote-image {
    /*border:2px solid blue;*/
    border:1px solid #e6e6e6;
    object-fit: cover;
    /* 이미지 비율 유지 */
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    max-width: 1328px;
   }

    .emote-wrap.slide-active {
        opacity: 1 !important;
        transform : translateX(0) !important;
    }


 /* 섹션 4 */
 .section-4 {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     align-items: stretch;
     height: 500px;
     /* 1200 x 500 */
 }

 .section-4 .content-box-style {
     width: calc(50% - 15px);
 }

 .section-4 h3 {
     margin-bottom: 20px;
 }

 .section-4 p {
     margin-bottom: 20px;
 }

 .favorit-contents {
     width: 100%;
     height: 100%;
 }

 .favorit-contents>button {
     margin-right: 65px;
     width: 35%;
     margin-bottom: 20px;
     font-size: 25px;
     align-items: center;
     gap: 10px;
 }

 .favorit-contents>button:hover {
     transform: scale(1.05);
 }

 .sport:active {
    background-color: black; color: white;
 }
 .talent:active {
    background-color: pink; color: white;
 }
 .politics:active {
    background-color: rgb(172, 172, 172); color: white;
 }
 .any:active {
    background-color: greenyellow; color: white;
 }
 .movie:active {
    background-color: red; color: white;
 }
 .drama:active {
    background-color: purple; color: white;
 }
 .car:active {
    background-color: orange; color: white;
 }
 .house:active {
    background-color: blue; color: white;
 }




 /* 섹션 4 */
 .video-wrap {
     position: relative;
     width: 100%;
     height: 100%;
     border-radius: 12px;
     overflow: hidden;
     background-color: black;
     /* 로딩 전 */
 }

 .video-wrap video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* 영역 꽉 채우기 */
     display: block;
     pointer-events: none;
     /* 사용자 조작 불가 */
 }

    /*5_6_wrap*/
.sec5_6_wrap{
    width:1600px;
    height:auto;
    /*border:1px solid;*/
    margin:0 auto;
    padding-top:100px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.sec5_6_wrap > h1{
    margin:0 auto;
}

 /* 섹션 5 */
.section-5 {
    width:1600px;
    padding: 16px;
    height:280px;
    margin: 40px auto;
    border-radius:12px;

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

}

 .sec5_title{
    width:300px;
    height:230px;
    padding-left:15px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
 }

 .sec5_title_item1{
    display:flex;
    align-items:center;
    justify-content:center;

    width:230px;
    height:110px;

    padding:4px 10px;
    border:2px solid #e6e6e6;
    border-radius:25px;
    border-bottom-right-radius:0px;
    background-color:#fff;
    font-weight:800;
 }

  .sec5_title_item2{
    display:flex;
    align-items:center;
    justify-content:center;

    width:230px;
    height:110px;

    padding:4px 10px;
    border:2px solid #e6e6e6;
    border-radius:25px;
    border-top-right-radius:0px;
    background-color:#fff;
    font-weight:700;
 }

.icon-grid {
    width:100%;
    height:100%;

    display: flex;
    align-items:center;
    justify-content:center;
    gap: 20px;
    font-size:1.2rem;
}

 .icon-block {

     width:300px;
     height:230px;
     background:#fff;
     border:2px solid #e6e6e6;
     border-radius:12px;

     text-decoration: none;
     text-align: center;
     padding: 20px;
     transition: transform 0.2s ease-in-out;

     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
     cursor:default;
 }

 .icon-block:hover {
     transform: translateY(-5px);
 }

 .icon-placeholder {
     font-size: 40px;
     margin-bottom: 20px;
     display: inline-flex;
     width: 70px;
     height: 70px;
     align-items: center;
     justify-content: center;
     border: 2px solid gainsboro;
     border-radius: 50%;
     color: gray;
 }

 .icon-block h3 {
     font-size: 18px;
     font-weight: 600;
     color: black;
     margin-bottom: 8px;
 }

 .icon-block p {
     font-size: 14px;
     color: gray;
     line-height: 1.5;
     height: 42px;
     overflow: hidden;
 }


 .last_btn{
    width:100%;
    height:150px;

    display:flex;
    align-items:center;
    justify-content:center;
 }
 .tab-bar{
    height: 0 !important;
 }

 .last_btn>button{
    width:250px;
    height:50px;
    border:2px solid #e6e6e6;
    border-radius:20px;
    background:#fff;
    font-size:15px;
    font-weight:500;

    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

    transition: 0.2s ease;

 }

.last_btn>button:hover{
    position:relative;
    transform: translateY(-5px);
    font-weight:600;
    background-color:#3EE9B9;
    border:1px solid white;

}
.liast_btn>button:active{
    bottom:0;
}


/*미디어쿼리*/

 @media (max-width: 1280px) {
     main {
         max-width: 100%;
         padding: 80px 0;
     }

     .section-2 {
         width: 100%;
         max-width: 1200px;
     }

     /* 기본 1200 유지하되 줄면 100% */
     .section-1 .anim-text {
         font-size: 42px;
     }

     .section-1 .anim-text.tagline {
         font-size: 32px;
     }
 }

 @media (max-width: 1024px) {

     .section-1 {
         height: 260px;
     }

     .section-2 {
         height: 420px;
     }

     .section-3 {
         height: 420px;
     }

     .section-4 {
         height: auto;
         flex-direction: column;
     }

     .section-4 .content-box-style {
         width: 100%;
     }

     /* 오른쪽 비디오 박스 높이 지정 */
     .section-4 .content-box-style .video-wrap {
         height: 360px;
     }

     .section-1 .anim-text {
         font-size: 36px;
     }

     .section-1 .anim-text.tagline {
         font-size: 28px;
     }

     .start-btn {
         padding: 12px 22px;
         font-size: 15px;

     }

     .section-5 {
         min-height: 0;
         height: auto;
     }
 }

 @media (max-width: 768px) {

     main {
         padding: 64px 16px;
     }

     .section-1 {
         height: 220px;
         margin-bottom: 100px;
     }

     .section-2 {
         height: 360px;
         margin-bottom: 100px;
     }

     .section-3 {
         height: 360px;
     }

     .section-4 {
         gap: 20px;
     }

     .section-4 .content-box-style .video-wrap {
         height: 300px;
     }

     .section-1 .anim-text {
         font-size: 32px;
     }

     .section-1 .anim-text.tagline {
         font-size: 22px;
         letter-spacing: 1px;
     }

     .start-btn {
         padding: 10px 20px;
         font-size: 14px;
     }

     .slider-nav {
         bottom: 16px;
     }

     .icon-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
     }

     .icon-block p {
         height: auto;
     }
 }

 @media (max-width: 480px) {
     main {
         padding: 56px 14px;
     }

     .section-1 {
         height: 200px;
     }

     .section-2 {
         height: 300px;
     }

     .section-3 {
         height: 300px;
     }

     .section-5 {
         padding-top: 24px;
     }

     .section-1 .anim-text {
         font-size: 26px;
     }

     .section-1 .anim-text.tagline {
         font-size: 18px;
         letter-spacing: 0.5px;
     }

     .start-btn {
         padding: 9px 18px;
         font-size: 13px;
         border-width: 1.5px;
     }

     .slider-nav-dot {
         width: 10px;
         height: 10px;
     }
 }