/* ===== 폰트 임포트 ===== */
@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: rgb(229, 229, 229);
  margin: 20px 20px 20px 20px;
  letter-spacing: 0.3pt;
  font-family: 'GeneralSans-Medium';
  line-height: 1.1;
}


/* ===== header ===== */
/* ===== header ===== */
/* ===== header ===== */

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

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

.categorytext a { color: black; 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: black;
  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: black;
  white-space: nowrap;
  display: inline-block;
  transition: all 0.2s ease;
  text-shadow: none;
}


/* ===== effects ===== */
/* ===== effects ===== */
/* ===== effects ===== */

.movable { 
    padding-top: 100px;
    transition: transform 0.3s ease; 
    pointer-events: auto; /* hover 가능 */
}

.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;
    max-width: 100%;  
}

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

.image-container .wide-img {
  width: 500px !important; /* 부모 .image-container 기준 */
  height: auto !important; /* 비율 유지 */
  max-width: 100%;  
}

/* ===== hover ===== */
.hover-trigger {
  position: relative;
  display: inline-block;
  text-decoration: underline;
  pointer-events: auto;
}

/* hover 이미지 숨기기 */
.hover-trigger > .hover-image {
  display: none;
  position: absolute;
  top: 1.2em;
  left: 0;
  max-width: 300px;
  z-index: 999999;
  background: 'transparent';
  border: 1px solid 'transparent';
  pointer-events: none;
}

/* hover 시 표시 */
.hover-trigger:hover > .hover-image {
  display: block;
}

.hover-image {
  display: none !important;  /* 원래 DOM 이미지 숨김 */
}

.hover-image2 {
  transition: opacity 0.3s ease; /* hover할 때 부드럽게 전환 */
}

.movable .hover-image2 {
  pointer-events: auto; /* hover 이벤트 허용 */
}


/* ===== contents ===== */
/* ===== contents ===== */
/* ===== contents ===== */


/* === 화면이 커지면 column2 내용이 2칸으로 흘러감 === */
/* 작은 화면: 2칼럼 */
.dropdown-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  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; 
  column-gap: 40px;
}

@media (min-width: 2000px) {
  .dropdown-text .column:nth-child(2) {
    column-count: 2;
  }
}



/* === column1, 2 위치 유지 === */
/* 작은 화면: 2칼럼 */
.dropdown-text2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  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;
  }

  /* 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;     /* 불필요한 여백 제거 */
}

/* === 2col img === */
.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;
}

/* === 4col img === */
.image-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

.image-grid4 .image-column {
  width: 100%;
}

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

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

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

/* === quater-sized left side img === */
.center-left-img {
  width: 26.5%;         
  height: auto;    
  display: block;
  margin-left: 50%;   
  margin-bottom: 20px;
  transform: translateX(0);
}

/* === quater-sized right side img === */
.center-right-img {
  width: 26.5%;    
  height: auto;
  display: block;
  margin-left: 50%;
  margin-bottom: 20px;
  transform: translateX(-100%); /* 자기 크기만큼 왼쪽으로 당겨서 오른쪽 끝이 중앙에 맞게 */
}





/* ===== non ===== */
/* ===== non ===== */
/* ===== non ===== */

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

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