.bonbon-regular {
  font-family: "Bonbon", cursive;
  font-weight: 400;
  font-style: normal;
}

html, body {
  background-color: rgb(255, 253, 255);
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

/* 네비게이션 바 */
.navbar {
  font-family: "Bonbon", cursive;
  font-weight: 400;
  font-size: 2rem;
  width: 100%;
  border-bottom: 1px solid #aaa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 48px;
  box-sizing: border-box;
}

.navbar-item {
  font-size: 22px;
  cursor: pointer;
  user-select: none;
  padding: 10px 0;
  color: #222;
  transition: color 0.2s;
}
.navbar-item.left {
  flex: 1;
  text-align: left;
  padding-left: 24px;
}
.navbar-item.right {
  flex: 1;
  text-align: right;
  padding-right: 24px;
}
.navbar-item.center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.navbar-item:hover {
  color: #888;
}

.center-content {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.envelope-img {
  width: 250px;
  height: auto;
  cursor: pointer;
}

.floating-img {
  position: absolute;
  width: 160px;
  height: auto;
  z-index: 10;
  border-radius: 12px;
  box-shadow: 0 4px 20px 0 rgba(0,199,255,0.15);
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.2s;
}
.floating-img:active {
  cursor: grabbing;
  box-shadow: 0 8px 32px 0 rgba(0,199,255,0.15);
}

/* Work 페이지 레이아웃 */
.work-container {
  font-family: "Inter", "Noto Sans KR", sans-serif;
  display: flex;
  flex-direction: row;
  padding-top: 48px; /* 네비게이션바 높이에 맞춤 */
  height: calc(100vh - 48px);
  box-sizing: border-box;
  align-items: flex-start;
}

/* 사이드바 */
.sidebar {
  font-family: "Bonbon", cursive;
  width: 30%;
  min-width: 160px;
  max-width: 320px;
  flex-shrink: 0;
  padding: 32px 24px 0 32px;
  box-sizing: border-box;
}

/* 카테고리 버튼 및 아코디언 */
.category {
  font-family: "Bonbon", cursive;
  font-size: 1.4rem;
  font-weight: 400;
  margin: 28px 0 8px 0;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  padding: 0;
  text-align: left;
  border-bottom: 1px solid #aaa;
  width: 80%;
  transition: color 0.2s;
}
.category:first-child {
  margin-top: 0;
}
.category.active {
  color: #888;
}
.submenu {
  font-family: "Inter", "Noto Sans KR", sans-serif;
  font-weight: 300;
  margin: 8px 0 0 0;
  padding-left: 10px;
  display: none;
  flex-direction: column;
  gap: 6px;
  font-size: 1rem;
}
.submenu.show {
  display: flex;
}
.submenu a {
  color: #444;
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
  margin-bottom: 2px;
}
.submenu a:hover {
  text-decoration: underline;
  color: #222;
}

/* 메인 컨텐츠 공통 부모 */
.main-content {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 32px;
  padding-left: 2%;
  box-sizing: border-box;
  height: 100%;
}

/* ★ [핵심] 기본적으로 모든 작업 콘텐츠는 완전히 숨깁니다 (반응형 밖으로 탈출) */
.work-content {
  display: none; 
  width: 100%;
  flex-direction: row;
  align-items: flex-start;
  gap: 50px;
  height: 100%;
}

/* ★ [핵심] active 클래스가 붙은 단 하나의 콘텐츠만 Flex로 활성화됩니다 */
.work-content.active {
  display: flex; 
}

.image-scroll-area {
  flex: 1;
  min-width: 200px;
  max-height: calc(100vh - 120px);
  background: #eef0f3;
  overflow-y: auto;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
}
/* 1. 이미지: 기존 좌클릭/우클릭 차단 및 너비 100% 유지 */
.image-scroll-area img {
  width: 100%;
  margin: 0;
  display: block;
  border-radius: 0;
  background: #fff;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* 2. 로컬 영상 (video): 구역 너비 안에 딱 맞추고, 고유 비율을 유지 */
.image-scroll-area video {
  width: 100%;             /* 회색 스크롤 구역 가로폭에 맞춤 */
  height: auto;            /* 가로 길이에 맞춰 영상 고유 비율대로 세로가 조절됨 */
  margin: 0;
  display: block;
  background: #000;        /* 영상 비율에 따라 혹시 남는 여백은 검은색 처리 */
  pointer-events: auto;     /* 재생/일시정지 클릭 가능 */
}

/* 3. 유튜브 영상 (iframe): 어떤 화면에서든 가로세로 16:9 황금 비율로 꽉 차게 설정 */
.image-scroll-area iframe {
  width: 100%;             /* 가로 비율 꽉 차게 */
  aspect-ratio: 16 / 9;    /* ★ 브라우저가 자동으로 16:9 세로 비율을 계산해서 꽉 채워줌 */
  height: auto;            /* aspect-ratio와 연동되어 작동 */
  margin: 0;
  display: block;
  border: none;            /* 기본 테두리 제거 */
  background: #000;
  pointer-events: auto;     /* 유튜브 재생 버튼 클릭 가능 */
}
.desc-area {
  width: 300px;
  flex-shrink: 0;
  margin-top: 40px;
  padding-right: 1%;
  color: #444;
  font-size: 1.1rem;
  line-height: 1.7;
}
.desc-area h2 {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 16px;
  margin-top: 0;
}
.desc-area .info {
  font-family: "Inter", "Noto Sans KR", sans-serif;
  font-weight: 500;
  color: #888;
  font-size: 1rem;
  margin-bottom: 10px;
}
.desc-area .summary {
  font-family: "Inter", "Noto Sans KR", sans-serif;
  font-weight: 400;
  margin-top: 14px;
  color: #555;
  font-size: 0.8rem;
}

a:link, a:visited, a:hover, a:active {
  color: #000000;
  text-decoration: none;
}
/* 유튜브 쇼츠 전용 스타일 */
.image-scroll-area iframe.youtube-shorts {
  width: 45%;              /* ★ 가로폭을 줄여서 세로 길이가 한눈에 보이도록 조절 (원하는 크기로 %나 px 조절 가능) */
  max-width: 360px;        /* 너무 커지는 것을 방지하는 최대 가로폭 */
  aspect-ratio: 9 / 16;    /* 9:16 쇼츠 비율은 그대로 유지 */
  height: auto;
  
  margin: 24px auto;       /* ★ 위아래로 약간의 여백(24px)을 주고, 좌우를 가운데 정렬(auto) */
  display: block;
  border: none;
  background: #000;
  border-radius: 8px;      /* 영상 모서리를 살짝 부드럽게 깎아주면 더 예쁩니다 */
  pointer-events: auto;
}


/* 저작권 고정 */
.copyright-fixed {
  position: fixed;
  right: 24px;
  bottom: 16px;
  font-family: "Bonbon", cursive;
  font-weight: 400;
  font-size: 0.8rem;
  color: #888;
  background: rgba(255,255,255,0.85);
  padding: 4px 12px;
  border-radius: 6px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  max-width: 90vw;
  word-break