/* 기본 리셋 & 폰트 */
html, body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
}

/* 컨테이너: 가로 레이아웃 */
.container {
  display: flex;
}

/* 사이드바 */
.sidebar {
  flex: 0 0 120px;
  padding: 20px;
}
.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 이미지들 사이 간격 줄이기 */
.responsive-img {
  margin-bottom: 15px;    /* 기존 30px → 15px */
}
.sidebar a {
  text-decoration: none;
  color: #000;
  font-size: 12px;
}

/* 갤러리 */
.gallery {
  flex: 1;
  padding: 20px;
}

/* 반응형 이미지 */
.responsive-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin-bottom: 30px;
}

/* 모바일 (800px 이하) */
@media screen and (max-width: 800px) {
  .container {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    padding: 10px;
  }
  .gallery {
    width: 100%;
    padding: 10px;
  }
}

/* 사이드바 옆 이미지 영역 간격 좁히기 */
.container {
  gap: 10px !important;
}

/* 사이드바 너비를 유연하게 조정 */
.sidebar {
  flex: 0 0 auto !important;
  padding: 20px 10px !important;
}

/* 갤러리 패딩도 좌우만 줄이기 */
.gallery {
  padding: 20px 10px !important;
  margin-left: 0 !important;
}

/* 메뉴 텍스트 간격을 4px로 */
.sidebar {
  line-height: 1;          /* 텍스트 줄간격도 살짝 좁힙니다 */
}
.sidebar li {
  margin-bottom: 1px !important;  
}

/* 이미지들 사이 간격을 8px로 */
.responsive-img {
  margin-bottom: 2px !important;
}

/* worklist 영역을 gallery처럼 flex:1로 잡아주고, 패딩도 동일하게 */
.worklist {
  flex: 1;
  padding: 20px 10px;        /* gallery 에 주신 값과 동일 */
}

/* ul 기본 불릿·들여쓰기 제거 */
.worklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* li 간격 촘촘히 */
.worklist li {
  margin-bottom: 4px;        /* 메뉴 li 와 동일한 간격 */
  font-size: 12px;           /* 사이드바 폰트 사이즈와 통일 */
  line-height: 0.9;
}

/* 첫 번째 항목(타이틀)을 볼드하고 마진 약간 더 */
.worklist li:first-child {
  font-weight: bold;
  margin-bottom: 4px;
}

/* 링크 스타일 (텍스트 컬러, 호버 등) */
.worklist a {
  text-decoration: none;
  color: #000;
}
.worklist a:hover {
  color: #76ff03;
}

/* 3단 레이아웃: 사이드바 + worklist + main */
.container {
  display: flex;
  align-items: flex-start; /* 위쪽부터 딱 붙이기 */
  gap: 0;                 /* 컬럼 간 간격은 전부 패딩으로 처리 */
}

/* 사이드바 고정 너비 */
.sidebar {
  flex: 0 0 120px;
}

/* worklist 고정 너비 */
.worklist {
  flex: 0 0 200px;  /* 필요에 따라 180px~220px로 조정 가능 */
  padding: 20px 10px;
}

.main {
  /* worklist와 같은 20px 상단 여백을 줍니다 */
  padding: 20px 10px 20px !important;
  /* 글자 크기를 worklist(12px)보다 살짝 키워줍니다 */
  font-size: 13px !important;
  line-height: 1.1 !important;
}

/* 본문 텍스트 맨 위가 딱 worklist 시작선과 일치하도록, 첫 단락 마진 없앰 */
.main > *:first-child {
  margin-top: 0 !important;
}

/* 문단마다 적당한 여백 유지 */
.main p {
  margin: 0 0 1rem !important;
}

/* main 안의 이미지와 비디오 iframe을 반응형으로 */
.main img,
.main iframe {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 15px;
}

/* 모바일 전환 */
@media screen and (max-width: 800px) {
  .container {
    flex-direction: column;
  }
  .worklist, .sidebar, .main {
    flex: none;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* 이미지와 같은 너비로 반응형 비디오 */
.responsive-media {
  display: block;
  width: 100%;
  /* 16:9 비율 고정 후 너비에 맞춰 높이 계산 */
  aspect-ratio: 16 / 9;
  margin-bottom: 15px;
}

@media screen and (max-width: 800px) {
  /* 사이드바와 워크리스트를 너비 100%로 늘려 세로로 나란히 */
  .sidebar,
  .sidebar .has-worklist,
  .sidebar .has-worklist .worklist {
    width: 100%;
    padding: 10px 5px;
  }

  /* 워크리스트 항목을 블록으로, 줄간격 1.5로 */
  .sidebar .has-worklist .worklist li {
    display: block;
    margin-bottom: 8px;
  }
  .sidebar .has-worklist .worklist a {
    font-size: 12px;
    line-height: 1.5 !important;     /* 모바일 전용으로 넉넉히 */
    white-space: normal;             /* 한 줄 고정 해제 */
    word-break: keep-all;            /* 단어 단위로 끊기 */
  }

  /* 메인 컨텐츠와 겹치지 않도록 */
  .container {
    flex-direction: column;
    gap: 0;
  }
}

@media screen and (max-width: 800px) {
  /* …기존 모바일 설정… */

  /* ■ worklist 들여쓰기 완전 제거 ■ */
  .sidebar .has-worklist > a,
  .sidebar .has-worklist .worklist {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .sidebar .has-worklist .worklist {
    list-style: none !important;
  }
  .sidebar .has-worklist .worklist li {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* ────────────────────────────────────── */
/* 모바일(800px 이하)에서 worklist 완전 좌측 정렬 */
/* ────────────────────────────────────── */
@media screen and (max-width: 800px) {
  /* 모든 사이드바 UL / 중첩 UL(서브메뉴) */
  .sidebar ul,
  .sidebar ul ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* 각 LI도 들여쓰기 제거 */
  .sidebar li,
  .sidebar ul li,
  .sidebar ul ul li {
    margin: 1px 0 0px 0 !important; /* 아래 여백만 유지 */
    padding: 0 !important;
  }

  /* “작업: Selected Works” 링크 텍스트 들여쓰기 제거 */
  .sidebar .has-worklist > a {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* worklist 링크는 줄간격 넉넉히 */
  .sidebar .has-worklist .worklist a {
    line-height: 1.2 !important;
  }
}