/* ===== 폰트 임포트 ===== */
@font-face {
  font-family: 'GeneralSans-Medium';
  src: url('fonts/GeneralSans-Medium.woff2') format('woff2'),
       url('fonts/GeneralSans-Medium.woff') format('woff'),
       url('fonts/GeneralSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: block;
  font-style: normal;
}

@font-face {
  font-family: 'GeneralSans-Bold';
  src: url('fonts/GeneralSans-Bold.woff2') format('woff2'),
       url('fonts/GeneralSans-Bold.woff') format('woff'),
       url('fonts/GeneralSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: block;
  font-style: normal;
}

/* ===== basic set ===== */
body {
  background-color: black;
  color: white;
  margin: 20px 20px 20px 20px;
  letter-spacing: 0.3pt;
  font-family: 'GeneralSans-Medium';
  line-height: 1.1;
}

.header { position: relative; margin-bottom: 20px; }

.categorytext {
  position: absolute;
  font-size: 20pt;
  color: white;
  cursor: pointer;
}

.categorytext a { color: white; text-decoration: none; }

/* 위치 지정 */
.about { top: 0px; left: 0px; }
.works { top: 0px; left: 25%; transform: translateX(-50%); position: absolute; }
.sea { top: 0px; right: 0px; }

/* 드롭다운 전체 */
.works .dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 200%;
  left: 420%;
  transform: translateX(-50%);
  margin-top: 5px;
}

/* 대분류 항목 */
.dropdown-item { display: flex; align-items: flex-start; margin-bottom: 1px; }
.dropdown-item > a {
  display: inline-block;
  padding: 0;
  text-decoration: none;
  color: white;
  white-space: nowrap;
  width: 200px;
}

/* 소분류 */
.sub-dropdown { display: flex; flex-direction: column; margin-left: 0px; width: auto; }
.sub-dropdown a {
  padding: 0;
  text-decoration: none;
  color: white;
  white-space: nowrap;
  display: inline-block;
  transition: all 0.2s ease;
  text-shadow: none;
}


.dropdown-text {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 항상 column1, column2 유지 */
  gap: 20px;
  width: 100%;
}

.dropdown-text .column p {
  margin: 0 0 50px;
  font-size: 20pt;
  line-height: 1.1;
}

/* column2 내부만 멀티컬럼 적용 */
.dropdown-text .column:nth-child(2) {
  column-count: 1;    /* 기본 1개 (즉 단일 텍스트 흐름) */
  column-gap: 40px;
}

/* 화면이 커지면 column2 내용이 2칸으로 흘러감 → 총 4칼럼 느낌 */
@media (min-width: 2000px) {
  .dropdown-text .column:nth-child(2) {
    column-count: 2;
  }
}




.dropdown-text2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 작은 화면: 2칼럼 */
  gap: 20px;
  width: 100%;
}

.dropdown-text2 .column p {
  margin: 0 0 30px;
  font-size: 20pt;
  line-height: 1.1;
}

/* 큰 화면: 4칼럼 */
@media (min-width: 2000px) {
  .dropdown-text2 {
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 4칼럼 */
  }

  /* col1 → 첫 번째 칼럼 (칼럼2는 비움) */
  .dropdown-text2 .col1 {
    grid-column: 1;
  }

  /* col2 → 세 번째 칼럼 (칼럼4는 비움) */
  .dropdown-text2 .col2 {
    grid-column: 3;
  }
}




/* 부모 요소가 화면 전체 폭 */
.full-width-image {
    width: 100%;       /* 화면 가로 폭 전체 */
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
}

/* 이미지가 부모 폭에 맞게 꽉 차도록 */
.full-width-image img {
    width: 100%;        /* 부모 폭에 맞춤 */
    height: auto;       /* 세로 비율 유지 */
    display: block;     /* 불필요한 여백 제거 */
}

/* 이미지 두 칼럼 레이아웃 */
.image-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 두 개의 칼럼 */
  gap: 20px;
  width: 100%;
}

.image-grid2.image-column {
  width: 100%; /* 칼럼이 그리드에 꽉 차게 */
}

.image-grid2 .image-column img {
  width: 100%;   /* 칼럼 폭에 맞게 조정 */
  height: auto;  /* 비율 유지 */
  display: block;
  object-fit: cover; /* 필요시 채우기 */
  margin-bottom: 20px;
}

/* 이미지 네 칼럼 레이아웃 */
.image-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 네 칼럼 */
  gap: 20px;
  width: 100%;
}

.image-grid4 .image-column {
  width: 100%; /* 칼럼이 grid 셀 크기와 맞도록 */
}

.image-grid4 .image-column img {
  width: 100%;   /* 칼럼 폭에 맞게 조정 */
  height: auto;  /* 비율 유지 */
  display: block;
  object-fit: cover; /* 필요시 채우기 */
  margin-bottom: 20px;
}


.center-img img {
  display: block;
  width: 53%;      /* 화면 폭의 절반 */
  height: auto;    /* 비율 유지 */
  margin: 0 auto 20px auto; /* 가운데 정렬 + 아래 간격 */
}

.center-left-img {
  width: 26.5%;             /* 화면 폭의 1/4 */
  height: auto;            /* 비율 유지 */
  display: block;
  margin-left: 50%;        /* 왼쪽 기준점을 화면 중앙으로 이동 */
  margin-bottom: 20px;
  transform: translateX(0); /* 그대로 두기 */
}

.center-right-img {
  width: 26.5%;             /* 화면 폭의 1/4 */
  height: auto;
  display: block;
  margin-left: 50%;         /* 시작점을 화면 중앙에 */
  margin-bottom: 20px;
  transform: translateX(-100%); /* 자기 크기만큼 왼쪽으로 당겨서 오른쪽 끝이 중앙에 맞게 */
}





/* 전체 폭 이미지 */
.image-container { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 0px; justify-content: center; }
.image-container img { 
    display: inline-block; 
    transition: transform 0.3s ease; 
    width: 10%; /* 원래 크기의 10% */
    height: auto;
    visibility: hidden;
}

/* 이미지 링크는 항상 클릭 가능 */
.image-container a {
  pointer-events: auto;
}



/* 전체 묶음 이동 대상 */
.movable { 
    padding-top: 100px;
    transition: transform 0.3s ease; 
}

/* 드롭다운 hover 효과 */
.sub-dropdown a[data-gradient="linear-gradient(90deg, #ffffff)"]:hover {
  filter: invert(1);
  text-shadow: 0 0 4px white;
  opacity: 1;
}

.dropdown-item > a:has(+ .sub-dropdown a[data-gradient="linear-gradient(90deg, #ffffff)"]:hover) {
  filter: invert(1);
  text-shadow: 0 0 4px white;
  opacity: 1;
}

.sub-dropdown a:hover:not([data-gradient="linear-gradient(90deg, #ffffff)"]) {
  background: linear-gradient(90deg, currentColor, currentColor);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  text-shadow: none;
}