/* Navbar container */
  .navbar {
    overflow: hidden;
    background-color: transparent;
    font-family: Arial;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(13, 40, 99);
    font-weight: 500;
  }

  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 15.5px;
    color: rgb(22, 22, 22);
    text-align: center;
    padding: 14px 23px;
    text-decoration: none;
  }

    .text-move-up {
      transform: translateY(-130px) !important; 
      position: relative !important;
      z-index: 2 !important; /* 무조건 상단 Navbar 메뉴판 레이어보다 아래로 완전히 눕힘 */
      transform-style: flat !important; 
      will-change: transform !important; /* 브라우저에게 글자 레이어를 밑으로 박아두라고 선언 */
      display: block; 
    }

  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }

  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 15px;
    border: none;
    outline: none;
    color: rgb(22, 22, 22);
    padding: 14px 20px;
    background-color: inherit;
    font: inherit; 
    margin: 0; 
  }

  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: rgba(31, 122, 207, 0.185);
  }

  /* 
    [1. 전체 투명화 구역]
    바깥 큰 박스(width: 100%)에 걸려있던 테두리 그림자(box-shadow)를 지우고 완전 투명하게 바꿉니다.
    이 조치 덕분에 오른쪽으로 삐져나오던 흉한 큰 투명 박스가 화면에서 완전히 증발합니다.
  */
  .dropdown-content {
    display: none;
    position: absolute;
    width: 100% !important; 
    left: 35%; /* 원래 맞춰두신 좌우 정렬 위치 보존 */
    z-index: 99999 !important; /* 성공하신 최상위 서열 락 */
    background-color: transparent !important; 
    box-shadow: none !important; /* [핵심] 기존의 흉한 큰 투명 테두리 완전 삭제 */
  }

  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

  /* 
    [2. 진짜 정답: 테두리 및 회색 박스 가두기]
    컬럼 3개가 모여있는 .row 박스에 테두리 그림자(box-shadow)와 배경색을 직접 입힙니다.
    너비를 딱 3개 칸의 크기(13% x 3 = 39%)로 묶어두었기 때문에, 
    테두리와 회색 배경이 '생활잡화' 글자 끝나는 곳에서 칼로 자른 듯 동시에 정갈하게 끝납니다.
  */
  .row {
    background-color: rgb(241, 241, 241) !important; /* 전체 회색 배경을 여기에 이식 */
    width: 39% !important; /* [치트키] 13%짜리 칸 3개 크기만큼만 딱 박스를 마감 처리 */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important; /* 큰 네모 테두리 그림자를 여기로 이동 */
    box-sizing: border-box;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  /* 
    [3. 알맹이 가로 3단 나열 구조 완벽 보존]
    원래 비율(13%)과 높이(260px)를 그대로 유지하여 내부 정렬과 메뉴 글자들이 절대 깨지지 않습니다.
  */
  .column {
    float: left;
    width: 33.33% !important; /* [교정] 39%로 줄어든 부모(.row) 안에서 3칸이 완벽하게 3등분(1:1:1) 되도록 33.33%로 보정 */
    padding: 10px;
    height: 280px; /* 원래 세로 높이 완벽 복구 */
    box-sizing: border-box;
    background-color: transparent !important; /* 배경색은 부모가 가지고 있으므로 투명화 */
  }

  /* Style links inside the columns */
  .column a {
    float: none;
    color: black;
    padding: 10px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 14px;
  }

  /* Add a background color on hover */
  .column a:hover {
    background-color: rgba(216, 102, 102, 0.555);
  }