@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}

@font-face{
  font-family: "darker-grotesque", sans-serif;
  font-weight: 500;
  font-style: normal;
}

*{
  font-family: 'darker-grotesque', 'Pretendard'; 
}


html, body, section, h1,h2,h3,h4, p,a{
  margin:0;
}

:root{
  --BETA-PINK: #ffe6f3;
  --BETA-BROWN: #bda17e;
  --BETA-LIGHTBROWN: #e1c59e;
  --BETA-GRAY: #353636;
}

::-webkit-scrollbar {
  display: none;
}
html{
  scroll-behavior: smooth;
}
html,body {
      position: relative;
      height: 100%;
    }

    body {
      background-color: white;
      transition: background-color 0.5s ease;

      font-family: 'Pretendard', 'darker-grotesque';
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }
    body::selection{
      background-color: var(--BETA-LIGHTBROWN);
    }

    /* 배경 이미지용*/
    body.main {
      background-image: url("../img/bg.gif");
      background-size: cover;
      background-position: center;
    }

    body.message {
      background-color: var(--BETA-LIGHTBROWN);
      transition: background-color 0.8s ease;
    }

    section{padding: 50px 0px;}

    h1{font-size:3rem; margin: 0; 
      word-break: keep-all; font-weight: normal;}    
    h2{font-size:1.5rem; font-weight: normal; word-break: keep-all;
      line-height: 2.3rem;}
    .enh2{font-size:1.7rem; line-height: 2.0rem;}
    h3{font-size:1rem; font-weight: normal; word-break: keep-all;}
    p{font-size: 1.2rem; line-height: 2.2rem; word-break: keep-all;}


    .ko{
      font-family: 'Pretendard';
      font-size: 1.2rem;
      line-height: 1.8rem;
    }
    .komini{
      font-family: 'Pretendard';
      font-size: 0.9em;
      line-height: 1.5em;
    }
    .kobig{
      font-family: 'Pretendard';
      font-size: 3rem;
      line-height: 2.2rem;
    }
    .en{
      font-family: 'darker-grotesque';
      font-size: 1.5rem;
      line-height: 2.0rem;
      margin-bottom: 1rem;
    }
    .enmini{
      font-family: 'darker-grotesque';
      font-size: 1rem;
      line-height: 1.4rem;
      margin-bottom: 20px;
    }
    .enbig{
      font-family: 'darker-grotesque';
      font-size: 1.8rem;
      line-height: 2.2rem;
    }

    .ABAP{
      font-size: 10vw;
      line-height: 10vw;
    }

    .bold{
      font-weight: bold;
    }

    a{text-decoration: none; color: black;}


    .bottomM{
      margin-bottom: 30px;
    }
    .tum{
      height:100px;
    }
    .tum-50{
      height:50px;
    }

    .tum-20{
      height:20px;
    }

    .wrap{
      width:70%; 
      margin: 0 auto;
    }
    .flex{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .flex_designer{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      gap: 5%;
    }


    .flexitem-3{
      width: 25%;
    }
    .flexitem-6{
      width: 58%;
    }
    .flexitem-half{
      width:48%;
    }
    .grid_credit{
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 8px;
      row-gap:  30px;
    }

    .grid_text{
      display: grid;
      grid-template-columns: 40% 60%;
      column-gap: 20px;
      row-gap:50px;
    }

    .grid_container{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      column-gap: 10px;
      row-gap: 25px;
    }

    .grid_item{
      color: var(--BETA-PINK);
    }

    .grid_img{
      width:100%;
    }

    

    .t-center{
      text-align: center;
    }
    .t-left{
      text-align: left;
    }
    .t-right{
      text-align: right;
    }

    .t-white{
      color:white;
    }
    .t-pink{
      color: var(--BETA-PINK);
    }
    .t-gray{
      color: var(--BETA-GRAY);
    }
    .t-brown{
      color: var(--BETA-BROWN);
    }
    .t-pinkback{
      background-color: var(--BETA-PINK); display: inline;
      color: var(--BETA-GRAY);
    }
    .t-brownback{
      background-color: var(--BETA-BROWN); display: inline;
      color: var(--BETA-PINK);
    }
    .b-pink{
      background-color: var(--BETA-PINK);
    }

    .blur{
      backdrop-filter:blur(10px);
    }

    .bg-pink{
      background-color: var(--BETA-PINK);
    }
    .bg-gray{
      background-color: var(--BETA-GRAY);
    }


    .crossA{
      top: -50px;
      left: -180px;
    }
    .crossB{
      top: -50px;
      right: -180px;
    }

    .crossC{
      bottom: -50px;
      left: -180px;
    }
    .crossD{
      bottom: -50px;
      right: -180px;
    }


    .cross {
      position: absolute;
      width: 40px;   /* 전체 크기 */
      height: 40px;
    }

    .bar {
      position: absolute;
      background-color: var(--BETA-PINK); /* 막대 색상 */
    }

    .bar.horizontal {
      top: 50%;
      left: 0;
      width: 100%;
      height: 3px;   /* 선 굵기 */
      transform: translateY(-50%);
    }

    .bar.vertical {
      top: 0;
      left: 50%;
      width: 3px;    /* 선 굵기 */
      height: 100%;
      transform: translateX(-50%);
    }




    #cover_motion_poster{
      display: inline-block;
      width:100vw; height: auto;
    }

    video{
      width:100%; height: auto;
    }

    #text_explain_z{
      position: absolute;
      width:70vw;
      top: 160%; left: 50%;            /* 가로 중앙 */
      transform: translate(-50%, 0%);
    }


    #nav{
      position: sticky; top:20; left:0; z-index: 5; 
      width: 100%; text-align: right;
      padding-bottom: 15px;
      }


    .hiddenobj{display: none;}
    .menu{
      font-size:2rem; padding:30px; cursor:pointer;
      position: relative;}
    .menu::after{
      content: "";
      position: absolute;
      left: 30px; /* 텍스트 패딩에 맞춰 조정 */
      bottom: 15px; /* 텍스트 아래로 밑줄 */
      width: calc(100% - 60px); /* 전체 너비에서 padding 제외 */
      height: 3px;
      background-color: var(--BETA-PINK);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }
    .menu:hover::after{
      transform: scaleX(1);
    }
    .menu.selected::after {
      transform: scaleX(1); /* 항상 보이도록 */
    }


    .nav_img{height:3rem;}

    #scrollTopBT{
      width:40px;
      position: fixed; bottom:50px; right:50px; z-index: 50;
      cursor:pointer;
    }


    #prevBT{
      position:fixed; top:50px; left:50px; z-index:5;
      cursor:pointer;
    }
    #prevBTimg{
      height:40px;
    }


    .paper-chapter{
      width:100vw;  
      position:absolute; top: 13vh;
      display: flex; align-content: center;}

    

    #mainlogo_box{
      position:relative;
    }
    .logo{width:90%; display: inline-block;}
    #maintext{position: absolute; top: 15vh; left:15vw;
      z-index:5;
      }

    .logoimg{width: 100%;}
    .imglink{
      height:6rem; padding: 1rem;
    }

    #dot_bt{
      width:50px; height:auto;
      padding: 25px 0px;
      cursor: pointer;
      animation: bounce 2s infinite ease-in-out;
    }
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
          transform: translateY(0);   /* 원위치 */
        }
        40% {
          transform: translateY(-12px); /* 위로 튀어오름 */
        }
        60% {
          transform: translateY(-6px);  /* 반동 */
        }
      }

      .hidden-section {
        max-height: 0;             /* 처음에는 닫힘 */
        overflow: hidden;           /* 내용 잘림 */
        transition: max-height 0.5s ease;
        padding: 0 1rem;            /* 패딩은 넣되, 열릴 때만 보이도록 */
      }

      .hidden-section.open {
        max-height: 100vh;          /* 충분히 크게 설정 (내용에 맞춰 늘어남) */
        padding: 1rem;              /* 열릴 때 패딩 보이도록 */
      }
      #motion_poster{
        height:90vh;
      }
      #main-section-c-1{
        position: relative;
      }
      #main-section-c-2{
        position: relative;
      }
      #program-section-a{
        position: relative;
      }

      #comingsoon-section-b {
        position: relative;
        padding: 1rem;  
      }

      #down{
        width:5em; height:auto;
        position: fixed;
        bottom: 5%; left: 50%;
        animation: bounce 2s infinite ease-in-out;
      }
      @keyframes bounce {
          0%, 20%, 50%, 80%, 100% {
            transform: translate(-50%, 0);   /* 가로 중앙 유지 */
          }
          40% {
            transform: translate(-50%, -12px); /* 가로 중앙 + 위로 튀어오름 */
          }
          60% {
            transform: translate(-50%, -6px);  /* 가로 중앙 + 반동 */
          }
        }





    .thumb_work{width:95%; height:auto; transition: opacity 0.4s ease;}
    .thumb_work_link{position: relative;}
    .thumb_work_link:hover .thumb_work{opacity: 0.4;}
    .thumb_title {
      position: absolute;
      top: 50%;                /* 세로 중앙 */
      left: 50%;               /* 가로 중앙 */
      transform: translate(-50%, -50%); /* 중앙 정렬 */
      padding: 8px 12px;
      font-size: 2rem;
      white-space: nowrap;
      opacity: 0;             
      transition: opacity 0.4s ease;
    }
    .thumb_work_link:hover .thumb_title{
      opacity: 1;
    }
    .thumb_designer{width:30%; height:auto;}
    .flex_info{width: 65%; margin: 0;}
    

    .img_interview{width:100%; height:auto;}
    .fullimg{
      width: 100%;
    }

    .workBT{
      font-size: 2rem; background-color:pink; padding:10px; 
      position: relative; top: 0px; left:0px; z-index: 3;
      cursor:pointer;
      } 
    .work_thumb{
      width:25px; position: absolute; z-index: 3;
      display: block;
    }

    .bg_work{
      width:100%; z-index: 1; position: sticky;
      left:0;}

    .work_dot{
      --size: 10px;          /* 지름 */
      --dot-color: currentColor;
      display:inline-block;
      width:var(--size);
      height:var(--size);
      background:var(--dot-color);
      border-radius:50%;
      vertical-align:middle;
    }

    .popup{
      position:fixed;
      display:none;
      pointer-events:none;
      max-width:200px;
      z-index:1000;
    }

    #popup-img{
      width: 350px; height:350px;
    }

    #work_thumb1  { top: 31.8%; left: 36.68%; }
#work_thumb2  { top: 31.8%; left: 39.36%; }
#work_thumb3  { top: 31.8%; left: 41.96%; }
#work_thumb4  { top: 31.8%; left: 44.64%; }
#work_thumb5  { top: 36.45%; left: 36.68%; }
#work_thumb6  { top: 36.45%; left: 39.36%; }
#work_thumb7  { top: 36.45%; left: 41.96%; }
#work_thumb8  { top: 36.45%; left: 44.64%; }

#work_thumb9  { top: 46.65%; left: 34.15%; }
#work_thumb10 { top: 46.65%; left: 36.76%; }
#work_thumb11 { top: 46.65%; left: 39.36%; }
#work_thumb12 { top: 46.65%; left: 41.96%; }
#work_thumb13 { top: 46.65%; left: 44.64%; }
#work_thumb14 { top: 51.67%; left: 34.15%; }
#work_thumb15 { top: 51.67%; left: 36.76%; }
#work_thumb16 { top: 51.67%; left: 39.36%; }
#work_thumb17 { top: 51.67%; left: 41.96%; }
#work_thumb18 { top: 51.67%; left: 44.64%; }

#work_thumb19 { top: 60.7%; left: 36.68%; }
#work_thumb20 { top: 60.7%; left: 39.36%; }
#work_thumb21 { top: 60.7%; left: 41.96%; }
#work_thumb22 { top: 60.7%; left: 44.64%; }
#work_thumb23 { top: 66.01%; left: 36.68%; }
#work_thumb24 { top: 66.01%; left: 39.36%; }
#work_thumb25 { top: 66.01%; left: 41.96%; }
#work_thumb26 { top: 66.01%; left: 44.64%; }

#work_thumb27 { top: 31.8%; left: 55.8%; }
#work_thumb28 { top: 35.76%; left: 55.8%; }
#work_thumb29 { top: 39.75%; left: 55.8%; }
#work_thumb30 { top: 43.74%; left: 55.8%; }
#work_thumb31 { top: 47.73%; left: 55.8%; }
#work_thumb32 { top: 54.33%; left: 55.8%; }
#work_thumb33 { top: 58.32%; left: 55.8%; }
#work_thumb34 { top: 62.3%; left: 55.8%; }
#work_thumb35 { top: 66.29%; left: 55.8%; }
#work_thumb36 { top: 70.28%; left: 55.8%; }

#work_thumb37 { top: 31.8%; left: 58.78%; }
#work_thumb38 { top: 35.76%; left: 58.78%; }
#work_thumb39 { top: 39.75%; left: 58.78%; }
#work_thumb40 { top: 43.74%; left: 58.78%; }
#work_thumb41 { top: 47.73%; left: 58.78%; }
#work_thumb42 { top: 54.33%; left: 58.78%; }
#work_thumb43 { top: 58.32%; left: 58.78%; }
#work_thumb44 { top: 62.3%; left: 58.78%; }
#work_thumb45 { top: 66.29%; left: 58.78%; }
#work_thumb46 { top: 70.28%; left: 58.78%; }


    .box{
      width:100%; height:100%; margin:0; padding:0;
    }
    #booth_layout_3{
      margin: 0; padding:0; display: block;
      position: relative;
      height: 80vh;
    }
    #booth_layout_2{
      margin: 0; padding:0; display: none;
    }
    #booth_layout_1{
      margin: 0; padding:0; display: none;
    }
      #booth001{
      top:180px; left:120px;
    }

    #guestbook-form {
      display: flex;
      flex-direction: row;
      gap: 12px;
      padding: 20px;
      max-width: 100%;
      margin: 0 auto;
    }

    #guestbook-form input,
    #guestbook-form textarea {
      font-size: 1rem;
      padding: 10px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background-color: #fafafa;
      font-family: sans-serif;
      transition: border 0.2s ease, background-color 0.2s ease;
    }

    #guestbook-form input:focus,
    #guestbook-form textarea:focus {
      border-color: #888;
      background-color: #fff;
      outline: none;
    }

    #nickname {
      width: 10%;
    }

    #message {
      width: 80%;
      min-height: 20px;
      max-height: 100px;
      overflow-y: auto;
      line-height: 1.4;
    }

    #guestbook-form button {
      align-self: flex-start;
      width: 10%;
      padding: 10px 18px;
      font-size: 0.8rem;
      background-color: var(--BETA-GRAY, #333);
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    #guestbook-form button:hover {
      background-color: #555;
    }



      #messages-list {
      list-style: none;
      padding: 0;
      gap: 30px;
      margin-top: 20px;
      column-count: 5;
      column-gap: 15px;
    }

    #messages-list li {
      display: inline-block;
      break-inside: avoid;
      background: var(--BETA-PINK); 
      width: 160px;
      height: 100%;
      padding: 12px 16px;
      margin-bottom: 30px;
      box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
      border: 1px solid var(--BETA-PINK);
      position: relative;
      color: #333;
      transition: transform 0.3s ease;
    }

    #messages-list li:hover {
      transform: rotate(0deg) scale(1.05);
      box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
      cursor: pointer;
    }

    /* 닉네임과 메시지 구분 */
    .message-nickname {
      font-weight: bold;
      margin-bottom: 6px;
      font-size: 1.1rem;
    }

    .message-text {
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 1rem;
      line-height: 1.3rem;
    }

    @media(max-width: 600px){
  .flex{
    flex-direction: column;
  }
  .flexitem-half{
    width:100%;
  }
}