body {
   margin: 0;
   font-family: "Times New Roman", serif;
   background: #f9f8f7;
   color: #333;
 }

 .header {
   height: 45px;
   background-color: #f3f2ef;
   text-align: center;
   line-height: 50px;
   font-size: 35px;
 }

 .container {
   display: grid;
   grid-template-columns: 1fr 3fr 1fr;
 }

 /* .sidebar {
   background-color: #444;
   margin: 45px;
   margin-right: 55px;
   margin-bottom: 70px;

 } */

 .main-content {
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .titulo {
   font-size: 2.5rem;
   font-weight: 500;
   margin-bottom: 10px;
   margin-top: 45px;
 }

 .subtitulo {
   font-size: 1.2rem;
   color: #666;

 }

 .main-logo {
   margin: 80px;
   width: 200px;
   height: 200px;
   object-fit: cover;
 }

 .image-row {
   display: flex;
   /* 가로 정렬 */
   justify-content: center;
   /* 전체를 가운데 정렬 */
   align-items: center;
   /* 세로 가운데 맞춤 (필요 시) */
   gap: 16px;
   /* 이미지 사이 간격 */
   margin: 20px auto;
   /* 상하 여백 + 가운데 정렬 */


 }

 .example img {
   width: 50px;
   height: auto;
   border-radius: 8px;
   object-fit: cover;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

 }

 /* === React 영역 === */
 #root {
   text-align: center;
   padding: 0px 0;
 }

 .start-btn {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 5px;
   background-color: #e1ded8;
   /* 버튼의 파란색 */
   padding: 10px 25px;
   border-radius: 40px;
   /* 둥근 캡슐 형태 */
   border: none;
   cursor: pointer;
   color: black;
   font-size: 16px;
   font-weight: 600;
 }

 .restart-btn {
   align-items: center;

   gap: 10px;
   margin-bottom: 5px;
   background-color: #e1ded8;
   padding: 10px 25px;
   border-radius: 40px;
   /* 둥근 캡슐 형태 */
   border: none;
   cursor: pointer;
   color: black;
   font-size: 16px;
   font-weight: 600;
 }


 .image-preview {
   width: 200px;
   margin-top: 20px;
   border-radius: 10px;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
 }

 .slider-wrapper {
   width: 100vw;
   overflow: hidden;
   position: relative;
   background: #f9f8f7;
   /* 여백이 생길 때 검정 배경(원하면 바꿔도 됨) */
 }

 .container2 {
   display: flex;
   transition: transform 0.5s ease-in-out;
 }

 .slider {
   min-width: 100vw;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 60vh;
   /* ← 슬라이드 크기는 여기서 조절 */
 }

 .slider img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* ★ 절대 이미지가 잘리지 않음 */
 }

 /* ---------- 기기별 슬라이더 표시 규칙 ---------- */

 /* 데스크탑(기본) */
 .desktop-slider {
   display: block;
 }

 .tablet-slider {
   display: none;
 }

 .mobile-slider {
   display: none;
 }



 /* 버튼 */
 .buttons {
   position: absolute;
   bottom: 15px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 10px;
 }

 .btn {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #aaa;
   cursor: pointer;
   transition: 0.3s;
 }

 .btn.active {
   background: #fff;
   transform: scale(1.25);
 }

 .center-content {
   width: 60%;
   text-align: center;
   position: relative;
 }

 .upload-container {
   position: relative;
   width: 300px;
   height: 350px;
   margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .preview2 {
   margin-top: 40px;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.2;
   /* 투명도 */
   border-radius: 8px;
 }

 .upload-btn {
   position: absolute;
   padding: 12px 30px;
   background: rgba(181, 168, 168, 0.9);
   color: black;
   font-size: 18px;
   cursor: pointer;
   border-radius: 40px;
   text-align: center;
   backdrop-filter: blur(4px);
   font-weight: 300;


 }

 .upload-btn input {
   display: none;
 }

 .image-row2 {
   display: flex;
   /* 가로 정렬 */
   justify-content: center;
   /* 전체를 가운데 정렬 */
   align-items: center;
   /* 세로 가운데 맞춤 (필요 시) */
   gap: 16px;
   /* 이미지 사이 간격 */
   margin: 20px auto;
 }

 .preview-img {
   width: 360px;
   opacity: 0.2;
   /* 흐릿하게 */
   display: block;
   margin: 0 auto;
 }

 .test-btn {
   background: #e1ded8;
   margin: 10px;
   gap: 10px;
   padding: 10px 25px;
   border: none;
   font-size: 1.2rem;
   border-radius: 40px;
   border: none;
   cursor: pointer;
   border-radius: 6px;
   transition: 0.3s;
   font-weight: 600;


 }

 /* 상단 큰 박스 */
 .top-section {
   width: 100%;
   background: #e5dfe0;
   padding: 60px 0;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 80px;
 }

 .headerResult {
   position: fixed;
   /* 페이지 최상단에 고정 */
   top: 10px;
   /* 원하는 만큼 아래로 */
   left: 50%;
   /* 가로 중앙 위치 */
   transform: translateX(-50%);
   /* 정확한 중앙 alignment */
   font-size: 35px;
   z-index: 9999;
   /* 다른 요소 위에 표시되게 */
   color: white;

 }

 .result-text {
   text-align: left;
   font-size: 24px;
   line-height: 1.5;
 }

 .type {
   font-size: 36px;
   font-weight: bold;
 }

 .caracter {
   color: #8a2121;
   font-size: 15px;
   margin-left: 150px;
 }

 .teg {
   font-size: 14px;
   color: white;
   margin-top: 4px;
   margin-bottom: 12px;
   letter-spacing: 0.5px;
 }

 /* 프로필 원형 이미지 */
 .profile-circle {
   width: 180px;
   height: 180px;
   border-radius: 50%;
   overflow: hidden;
   border: 6px solid white;
 }

 .profile-circle img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .palteImage1 {
   width: 45%;
   margin: 40px auto;
   background: #e9e6e5;
   display: flex;
   justify-content: center;
   gap: 25px;
   border-radius: 5px;
 }


 /* 상단 회색 박스 */
 .big-gray-box {
   width: 90%;
   height: 120px;
   margin: 40px auto;
   background: #707070;
   border-radius: 4px;
 }

 /* 카테고리 버튼 그룹 */
 .category-box {
   width: 100%;
   display: flex;
   justify-content: center;
   gap: 120px;
   margin-top: 40px;
 }

 .category {
   background: #e5dfe0;
   width: 160px;
   padding: 12px;
   text-align: center;
   font-size: 24px;
   border-radius: 4px;
 }

 .category-text {
   width: 250px;
   text-align: center;
   margin-top: 10px;
   font-size: 15px;
 }

 /* 설명 섹션 */
 .description {
   width: 45%;
   margin: 60px auto;
   font-size: 17px;
   line-height: 1.6;
   text-align: left;
 }

 .palteImage2 {
   width: 70%;
   margin: 40px auto;
   background: #e9e6e5;
   display: flex;
   justify-content: center;
   gap: 25px;
   border-radius: 5px;
 }

 .description h3 {
   font-size: 28px;
   color: #8a2121;
   margin-bottom: 10px;
   text-align: left;
 }

 .description h5 {
   font-size: 28px;
   color: #8a2121;
   margin-bottom: 10px;
   text-align: left;
 }

 /* 하단 회색 박스 */
 .bottom-gray-box {
   width: 95%;
   height: 160px;
   margin: 40px auto 80px;
   background: #707070;
   border-radius: 4px;
 }





 /* ---------------------- 메인 전체 레이아웃 ---------------------- */
 .wrapper {
   width: 100%;
   max-width: 1400px;
   display: flex;
   justify-content: center;
   gap: 60px;
   padding: 60px 0;
   position: relative;
 }





 /* ---------------------- 프로필 영역 ---------------------- */
 .profile-section {
   width: 260px;
   text-align: center;
   margin-top: 40px;
 }

 .profile-img {
   width: 180px;
   height: 180px;
   border-radius: 50%;
   overflow: hidden;
   border: 6px solid #c7bdb7;
   margin: 0 auto;
 }

 .profile-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .season-title {
   margin-top: 18px;
   font-size: 34px;
   font-weight: 700;
   color: #5f4b40;
   letter-spacing: 0.5px;
 }

 .insta-column {
   display: flex;
   flex-direction: column;
   gap: 60px;
   align-items: center;

 }

 .post-list {
   display: flex;
   flex-direction: column;
   gap: 60px;
   align-items: center;
 }

 .insta-post {
   width: 420px;
   background: #111;
   border-radius: 12px;
   border: 1px solid #333;
   overflow: hidden;
   box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
 }

 .insta-image {
   width: 450px;
 }

 .post-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   color: #eee;
   font-size: 16px;
 }

 .user-info {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .user-photo {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: #4a4a4a;
 }

 .username {
   font-weight: 700;
 }

 /* 옵션 아이콘 */
 .options {
   font-size: 26px;
   cursor: pointer;
   color: #ccc;
 }

 /* 인스타 게시물 이미지 */
 .post-image {
   width: 100%;
   aspect-ratio: 1 / 1;
   background: #555;
 }

 .post-credit {
   font-size: 12px;
   color: #888;
   margin-top: 5px;
 }

 /* 하단 아이콘 */
 .post-actions {
   display: flex;
   justify-content: space-between;
   padding: 12px 16px;
   font-size: 23px;
   color: #f1f1f1;
 }

 .icon {
   margin-right: 12px;
   cursor: pointer;
 }

 .insta-text {
   text-align: left;
 }

 .likes {
   padding: 0 16px;
   margin: 6px 0;
   font-size: 16px;
   color: #f1f1f1;
   font-weight: 700;

 }

 .caption {
   padding: 0 16px;
   margin-bottom: 10px;
   color: #e8e8e8;
   font-size: 15px;
   line-height: 1.45;
 }

 .caption .username {
   color: white;
   font-weight: 700;
 }

 .date {
   padding: 0 16px 16px;
   font-size: 12px;
   color: #a8a8a8;
 }














 .footer {
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 40px 0;
   background-color: #f9f8f7;
   border-top: 1px solid #eee;
   font-family: 'Noto Sans KR', sans-serif;
   color: #444;
 }

 .footer-section {
   flex: 1;
   text-align: center;
 }

 .footer-section.center {
   flex: 0.5;
 }

 .footer-icon {
   width: 80px;
   margin-bottom: 10px;
 }

 .footer-logo {
   width: 120px;
 }

 .footer-title {
   font-weight: 600;
   margin-bottom: 8px;
   font-size: 1.1rem;
 }

 .social {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
 }

 .social-icon {
   width: 24px;
   height: 24px;
 }

 .divider {
   width: 1px;
   height: 60px;
   background-color: #ccc;
   opacity: 0.6;
 }

  /* 태블릿 */
 @media (max-width: 1023px) {
   .desktop-slider {
     display: none;
   }

   .tablet-slider {
     display: block;
   }
   .palteImage1 {
   width: 70%;
 }
    .description {
       width: 65%;
     
   }
   .palteImage2 {
   width: 100%;
 }
   
 }

 /* 모바일 */
 @media (max-width: 767px) {
   .tablet-slider {
     display: none;
   }

   .mobile-slider {
     display: block;
   }

   .main-logo {
     margin: auto;
   }
   .headerResult {
   font-size: 15px;
 }
   .top-section {
    gap: 10px;
   }
   /* 프로필 원형 이미지 */
 .profile-circle {
   width: 140px;
   height: 140px;
 }
   .palteImage1 {
   width: 90%;
 }
   .category-box {
    gap: 15px;
   }

   .description {
       width: 100%;
    margin-left: 10px;
     
   }
   .palteImage2 {
   width: 100%;
 }
   .category {
   text-align: center;
   font-size: 24px;
 }

 .category-text {
   width: 200px;
   margin-top: 10px;
   text-align: center;
   font-size: 13px;
 }
.wrapper {
    flex-direction: column;
    align-items: center;
  }

  /* season 프로필 영역은 모바일에서 숨기거나 아래로 배치 가능 — 필요하면 ON */
  .profile-section {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
  }

  /* 인스타 포스트는 전체 화면의 폭을 채우게 */
  .insta-column {
    width: 100%;
    max-width: 460px;
  }

  .insta-post {
     width: 90%;   /* 100% → 95% */
  margin: 0 auto;
    border-radius: 16px;
  }

  .post-header,
  .post-actions,
  .insta-text {
    padding-left: 12px;
    padding-right: 12px;
  }
  
 }