/* ---------- work.html ---------- */
body.work {
  display: flex;
  flex-direction: column;
  padding: 40px;
}

.back {
  display: inline-block;
  font-size: 20px;
  color: #000;                /* 기본 텍스트 검정 */
  text-decoration: none;
  background: #929393;        /* 기본 박스 회색 */
  border: none;               /* 기본 테두리 없음 */
  padding: 4px 12px;          /* 텍스트 크기에 딱 맞게 */
  margin-bottom: 30px;
  width: fit-content;         /* 텍스트 길이만큼 박스 크기 */
  transition: all 0.25s ease; /* 부드러운 전환 */
}

/* 마우스 올렸을 때 (hover) */
.back:hover {
  background: #fff;                /* 흰 배경 */
  color: #929393;                  /* 글자 회색 */
  border: 1px solid #929393;       /* 얇은 회색 테두리 */
}

/* 전체를 좌우 2단 구조로 */
.work-container {
  display: flex;
  gap: 30px; /* 오른쪽 이미지 영역과의 간격 */
  
}

/* 왼쪽 텍스트 영역 */
.work-detail {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  position: relative; /* 내부에서 absolute 위치 지정 가능 */
  min-height: 80vh;   /* 왼쪽 영역 높이 확보 */
}

/* 서브타이틀 */
.work-detail .subtitle {
  font-size: 25px;
  font-weight: 300; /* 얇게 */
 margin-top: 83px;   
  margin-bottom: 3px;
}

/* 장식 사각형 */
.work-detail .line {
  width: 550px;
  height: 7px;
  background: transparent;
    margin-top: 0px;   
  margin-bottom: 0px;
}


/* 메인 타이틀 */
.work-detail .title {
  font-size: 100px;
  font-weight: 900;
  margin-top: 0px;   
  margin-bottom: 10px;
}

/* 설명 */
.work-detail .description {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: calc(100% - 250px);  /* ← 오른쪽에 150px 여백 확보 */
  /* 필요 시 줄바꿈 보정 */
  word-break: keep-all;
}

/* tools 설명 (왼쪽 하단 고정) */
.work-detail .tools {
  position: fixed;         /* 🔥 페이지 전체 기준 고정 */
  bottom: 10px;            /* 화면 하단에서 10px 위 */
  left: 40px;              /* 왼쪽 여백 (디자인에 맞게 조정 가능) */
  font-size: 15px;
  line-height: 0.8 !important;
  color: #939393;          /* 기존 색상 유지 */
  margin-bottom: 30px !important;
  z-index: 5;              /* 이미지/장식선 위에 표시 */
  pointer-events: none;    /* 클릭 방해 방지 */
  white-space: pre-line;   /* 줄바꿈 유지 (줄 나누어 쓰인 경우) */
}

/* 오른쪽 이미지 영역 */
.work-gallery {
margin-top: 0 !important;
  padding-top: 0 !important;
  height: 100vh;               /* 이미지만 스크롤 영역 유지 */
  overflow-y: scroll;          /* 이미지만 스크롤 */
  overflow-x: hidden;
}

.work-gallery img {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center; /* 위를 기준으로 붙이기 */
}

.work-gallery video {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  object-fit: cover;
}

/* ===== CATEGORY: 오른쪽 작품영역 상단 100px 고정 (강제 덮어쓰기) ===== */
body.category{
  display: flex !important;
  align-items: flex-start !important;  /* 세로 기준 위쪽 정렬 */
  padding-top: 0 !important;
}

body.category .works{
  align-self: flex-start !important;   /* 개별 아이템도 위쪽 정렬 */
  margin-top: 100px !important;        /* ← 원하는 간격 */
  padding-top: 0 !important;           /* 내부 패딩 제거 */
}

body.category .works > .line:first-child{
  margin-top: 0 !important;            /* 장식선 기본 55px 제거 */
}

/* 카테고리 페이지에서 back만 예외 처리 */
body.category .sidebar .back {
  color: #000 !important;            /* 기본: 검정 텍스트 */
  background: #929393 !important;    /* 기본: 회색 박스 */
  border: none !important;
}

body.category .sidebar .back:hover {
  background: #fff !important;       /* hover: 흰 배경 */
  color: #929393 !important;         /* hover: 회색 텍스트 */
  border: 1px solid #929393 !important; /* hover: 얇은 회색 테두리 */
}

/* 모든 장식 사각형을 얇게 통일 */
.line {
  border: none;                /* 기존 border 제거 */
  position: relative;
}

.line::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0.4px #000; /* 🔥 0.25px 얇은 테두리 효과 */
  background: transparent;
}

/* 2) 설명문: 중심 기준 오른쪽 150px 여백 확보 */
.work-container {
  display: flex;
  gap: 30px;               /* 좌우 칼럼 간격 */
}

/* 텍스트/이미지 1:1로 나눠야 중심 기준이 명확해져요 */
.work-detail { flex: 0 0 50%; }
.work-gallery { flex: 0 0 50%; }

/* --- 페이지 세로 중심선 기준 장식선 --- */
.center-vertical-line {
  position: fixed;                /* 페이지 전체 기준 */
  top: 0;
  bottom: 0;
  left: 50%;                      /* 페이지 가로 중심선 기준 */
  transform: translateX(-150px);    /* 중심선에서 오른쪽으로 50px 이동 */
  width: 2px;                   /* 선 두께 */
  background-color: #929393;      /* 선 색상 */
  z-index: 0;                     /* 맨 뒤로 (이미지 뒤로 깔림) */
  pointer-events: none;           /* 클릭 방해 X */
}
/* 공통 가로선 스타일 */
.horizontal-line {
  position: fixed;
  left: calc(50% - 150px);     /* 세로선 시작점 */
  width: 150px;                /* 🔥 세로선 → 중앙까지 (이미지 시작 전 멈춤) */
  height: 2px;
  background-color: #929393;
  z-index: 0;                  /* 이미지보다 뒤로 */
  pointer-events: none;
}

/* 첫 번째 가로선: 페이지 위에서 183px */
.horizontal-line.line-1 {
  top: 183px;
}

/* 두 번째 가로선: 첫 번째 선에서 204px 아래 */
.horizontal-line.line-2 {
  top: calc(183px + 204px);
}

/* ✅ 이미지 영역만 세로 스크롤되게 */
.work-gallery {
  position: relative;
  flex: 1;
  height: 100vh;         /* 화면 높이 기준 고정 */
  overflow-y: scroll;    /* 🔥 이미지 부분만 스크롤 */
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  scrollbar-width: none; /* (선택) 스크롤바 숨기기 (Firefox) */
}
.work-gallery::-webkit-scrollbar {
  display: none;         /* (선택) 스크롤바 숨기기 (Chrome) */
}

/* 이미지 설정 그대로 */
.work-gallery img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
}

/* 페이지 자체는 스크롤 금지: 오른쪽 이미지만 스크롤 */
html, body {
  overflow: auto !important;
  height: auto !important;
}

/* 전체 높이를 기준으로 좌/우 2분할 */
body.work { height: 100vh; 
  --tools-bottom: 10px;   /* tools는 화면 하단에서 10px 위 */
  --tools-gap: 20px;      /* tools 위 20px 지점에 장식 가로선 */
}

body.work .work-detail .tools {
  position: fixed;
  left: 40px;
  bottom: var(--tools-bottom);
  font-size: 20px;
  line-height: 1.1;
  color: #939393;
  margin: 0;
  white-space: pre-line;
  z-index: 5;             /* 이미지보다 위 */
  pointer-events: none;
}

/* 왼쪽 텍스트 영역: 화면에 고정(스크롤 안 함) */
.work-detail {
  position: fixed;
  left: 0; top: 0;
  width: 50%;                 /* 중앙 분할선 기준 */
  height: 100vh;
  box-sizing: border-box;
  padding: 40px;              /* 너가 쓰던 여백 그대로 */
  background: #fff;           /* 필요 시 흰 배경 */
  z-index: 3;
  overflow: hidden;           /* 텍스트는 고정 */
}

/* 오른쪽 이미지 영역: 세로 스크롤만 */
.work-gallery {
  position: fixed;
  right: 0; top: 0;
  width: 50%;
  height: 100vh;              /* 화면 높이 꽉 */
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto;           /* 이미지만 스크롤 */
  overflow-x: hidden;
  z-index: 0;
  scrollbar-width: none;
}
.work-gallery::-webkit-scrollbar { display: none; }

/* 이미지: 위에 딱 붙고 가로 50% 영역을 꽉 채움 */
.work-gallery img {
  display: block;
  width: 100%;
  height: auto;               /* 원본비율 유지 */
  object-fit: cover;          /* 영역을 채우되 */
  object-position: top center;/* 위를 기준으로 붙이기 */
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  z-index: 0;                /* 🔥 선보다 앞 */
  position: relative;
}

/* tools: 왼쪽 하단 고정 (이미지 스크롤과 무관) */
.work-detail .tools {
  position: fixed;
  left: 40px;
  bottom: 10px;
  font-size: 15px;
  line-height: 1.1;
  color: #939393;
  margin: 0;
  white-space: pre-line;
  z-index: 5;
}

body.work .back {
  position: fixed;
  top: 20px;
  left: 40px;
  z-index: 10000;

  display: inline-block;
  padding: 6px 14px;
  width: fit-content;
  text-decoration: none;

  background: #929393 !important; /* 기본: 회색 박스 */
  color: #000 !important;         /* 기본: 검정 텍스트 */
  border: none;
}

/* hover 효과 (요청했던 스타일) */
body.work .back:hover {
  background: #fff !important;
  color: #929393 !important;
  border: 1px solid #929393 !important;
}

/* 🔸 tools 위 가로선 — 화면 왼쪽 끝 → 이미지 시작점(중앙)까지 */
.decor-tools-line {
  position: fixed;
  left: 0;                    /* 화면 맨 왼쪽에서 시작 */
  width: 50%;                 /* 화면 절반(= 이미지 영역 시작점까지) */
  bottom: calc(10px + 20px);  /* tools 기준 20px 위 */
  height: 2px;
  background: #929393;
  z-index: 1;                 /* 이미지 뒤로 */
  pointer-events: none;
}

/* tools 설명 */
body.work .work-detail .tools {
  position: fixed;
  left: 40px;
  bottom: 10px;              /* 🔹 그대로 유지 */
  font-size: 18px;
  line-height: 1.1;
  color: #939393;
  margin: 0;
  white-space: pre-line;
  z-index: 5;                /* 선보다 위 */
  pointer-events: none;
}

/* ✅ 카테고리 페이지는 스크롤 가능 */
body.category {
  overflow-y: auto !important;
  height: auto !important;
}

.works {
  overflow-y: auto;
  height: auto;
}