/* 0. Layout Optimization */
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column; 
            justify-content: center; 
            align-items: center;     
            min-height: 100vh;       
            background-color: white;
            overflow-x: hidden; /* Background color for testing */
        }
        footer {
            position: fixed;
            bottom: 20px; /* 20px offset from bottom */
            left: 50%;
            transform: translateX(-50%); /* Horizontal center alignment */
            
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 12px;     /* Small text */
            color: #888888;      /* Gray color */
            letter-spacing: 1px;
            z-index: 100;        /* Keep above images */
        }

        /* Wrapper box for both Header and Menu */
        .main-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;  
            width: 100%;
            gap: 0px; /* Gap between header and menu below */
        }
 
        /* 1. Header Styles */
        .site-header {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 50px; /* Set smaller than menu */
            color: black;
            letter-spacing: 2px;
        }

        .header-link {
          text-decoration: none !important; /* 밑줄 제거 */
          color: inherit;
          display: block;       /* 클릭 영역을 넓히기 위해 블록 요소로 변경 */
        }
        .header-link:hover .site-header {
            text-decoration: underline; 
        }

        body .site-header.all-white {
            color: white !important;
        }

        .menu-container {
            display: flex;
            flex-direction: row; /* Change alignment: column or row */
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 0px; /* Fine-tune text spacing */
            max-width: 600px;      /* Wrap to next line if width exceeded */
            margin: 0 auto;
        }

        /* 2. Unified Text(Link) Styles and Reset */
        .hover-text {
            position: relative;
            white-space: nowrap;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 30px;
            letter-spacing: 1px;
            font-weight: light;
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* Prevent color change on visited links */
        .hover-text:link, .hover-text:visited {
            color: black;
            text-decoration: none;
        }

        /* 3. Center Fixed Image Settings */
        .popup-img {
            display: none; /* Optimization: use display instead of visibility */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70%;
            z-index: -999; /* Place behind all text */
            pointer-events: none;
        }

        /* 4. Interaction Optimization */

        /* On area entry: All text turns white (no underline) */
        
        .site-header.active {
            color: white !important;; 
            text-decoration: none;
        }

        .site-header.all-white,
        .menu-container .hover-text.all-white,
        .menu-container .hover-text.all-white:link,
        .menu-container .hover-text.all-white:visited {
            color: white !important;
        }
        
        
        /* On specific item hover: Underline + Show image for that item only */
        .hover-text:hover {
            color: white !important;
            text-decoration: underline !important; /* Explicit override */
        }

        .hover-text:hover .popup-img {
            display: block; /* Show immediately */
        }

        .break {
            flex-basis: 100%; /* Occupy 100% width to push next items down */
            height: 0;        /* Takes no vertical space */
        }

        /* Mobile Screen (Max 768px) Settings */
        @media (max-width: 768px) {
          
          body {
              background: white;
              /* transition 속성을 아예 삭제하거나 none으로 설정 */
              transition: none !important; 
              margin: 0;
              min-height: 100vh;
          }
      
          body.bg-black {
              background: black !important;
              /* 클래스가 붙었을 때도 즉시 적용되도록 설정 */
              transition: none !important;
          }
      
          .site-header {
            width: 100%;
            text-align: center;      /* Horizontal text alignment */
            margin-bottom: 10px;    /* Adjust gap with menu */
            font-size: 30px
          }
          
          .menu-container {
              display: flex;          /* flexbox 활성화 확인 */
              flex-direction: column; /* 세로 나열 */
              
              /* [중요] 중앙 정렬을 위한 핵심 코드 */
              align-items: center;    /* 내부 아이템들(글자)을 수평 중앙으로 */
              justify-content: center;
              margin: 0 auto;         /* 컨테이너 박스 자체를 화면 중앙으로 */
              width: 100%;            /* 40% 대신 100%를 쓰고 내부 여백으로 조절하는 게 안전함 */       
          }
          
          .hover-text {
              /* [중요] 부모 너비를 다 채우지 않고 글자 길이만큼만 영역을 잡음 */
              width: fit-content; 
              display: inline-block; 
              font-size: 20px;
              /* 터치 영역이 너무 좁다면 상하 여백만 약간 줌 */
              padding: 2px 0; 
              text-align: center;
              line-height: 1.2;
          }


      
          /* Mobile specific: Styles applied on first tap */
          .hover-text.is-tapped {
              color: white !important;
              text-decoration: underline !important;
          }
  
          .hover-text.is-tapped .popup-img {
              display: block !important;
              opacity: 1;
          }
      
          footer {
              /* 5. Adjust footer if text is too small */
              width: 100%;
              left: 0;                /* Set anchor to left edge */
              bottom: 10px;           /* Bottom margin */
              text-align: center;      /* Center align internal text */
              transform: none;         /* Reset existing translateX(-50%) */
              font-size: 10px;  
            }
            
            /* 4. Image size optimization */
          .popup-img {
              width: 100% !important;   /* Fit to mobile screen width */
              height: auto;
          }      
}