/* SUIT Font Self-Hosting */
@font-face {
    font-family: 'SUIT';
    font-weight: 100;
    src: url('/font/SUIT/SUIT-Thin.woff2') format('woff2'),
         url('/font/SUIT/SUIT-Thin.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    font-weight: 200;
    src: url('/font/SUIT/SUIT-ExtraLight.woff2') format('woff2'),
         url('/font/SUIT/SUIT-ExtraLight.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    font-weight: 300;
    src: url('/font/SUIT/SUIT-Light.woff2') format('woff2'),
         url('/font/SUIT/SUIT-Light.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    font-weight: 400;
    src: url('/font/SUIT/SUIT-Regular.woff2') format('woff2'),
         url('/font/SUIT/SUIT-Regular.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    font-weight: 500;
    src: url('/font/SUIT/SUIT-Medium.woff2') format('woff2'),
         url('/font/SUIT/SUIT-Medium.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    font-weight: 600;
    src: url('/font/SUIT/SUIT-SemiBold.woff2') format('woff2'),
         url('/font/SUIT/SUIT-SemiBold.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    font-weight: 700;
    src: url('/font/SUIT/SUIT-Bold.woff2') format('woff2'),
         url('/font/SUIT/SUIT-Bold.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    font-weight: 800;
    src: url('/font/SUIT/SUIT-ExtraBold.woff2') format('woff2'),
         url('/font/SUIT/SUIT-ExtraBold.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    font-weight: 900;
    src: url('/font/SUIT/SUIT-Black.woff2') format('woff2'),
         url('/font/SUIT/SUIT-Black.woff') format('woff');
    font-display: swap;
}

/* 1. Google Fonts are now loaded in the HTML files for better compatibility. */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

:root {
  --bg: #87CEEB; /* Reverted background color */
  --text: #000;
  --muted: #000;
  --border: #000; /* Changed to black */
  --header-height: 64px;
  --footer-height: 72px;
}

body {
  margin: 0;
  background: var(--bg); /* Use the original background color */
  color: var(--text);
  font-family: 'SUIT', Inter, 'Noto Sans KR', sans-serif;
  font-weight: 400; /* Explicitly set a default font-weight */
  overflow-y: auto; /* Allow vertical scrolling */
  width: 100vw; /* Added to explicitly set width */
  overflow-x: hidden; /* Added to ensure horizontal overflow is hidden */
  display: flex; /* Make body a flex container */
  flex-direction: column; /* Stack children vertically */
  min-height: 100vh; /* Ensure body takes at least full viewport height */
}

main {
  flex-grow: 1; /* Allow main content to grow and push footer down */
}

p {
  margin-bottom: 0;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =================================================================== */
/*                     HEADER / NAVIGATION (완성된 최종본)                  */
/* 기존의 .nav, .nav-inner, .logo, .nav-links, .hamburger-icon 관련   */
/* CSS를 ★★★모두 삭제★★★하고 아래 코드로 교체해주세요.                */
/* =================================================================== */

/* --- 1. 네비게이션 바 전체 --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  border-bottom: none;
  /* 핵심: 컨테이너에 좌우 패딩 추가 */
  padding: 0 20px;
}

/* --- 2. 네비게이션 내부 레이아웃 (가장 중요한 부분) --- */
.nav-inner {
  /* Flexbox를 활성화해서 자식 요소들을 가로로 배치합니다. */
  display: flex;
  /* 자식 요소들을 세로 중앙에 완벽하게 정렬합니다. (모든 세로 정렬 문제 해결) */
  align-items: center;
  /* 네비게이션 바의 높이를 64px로 고정합니다. */
  height: 64px;
  /* 최대 너비와 중앙 정렬 (선택사항) */
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* --- 3. 로고 --- */
.logo {
  /* 로고는 항상 왼쪽에 고정됩니다. */
  /* margin-right: auto;는 로고를 제외한 나머지 모든 요소를 오른쪽 끝으로 밀어냅니다. */
  /* 이것이 레이아웃의 핵심입니다. */
  margin-right: auto;
  /* flex 아이템이 찌그러지는 것을 방지합니다. */
  flex-shrink: 0;
  /* 기존 스타일 유지 */
  font-family: 'Lexend Giga', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: #1F2937;
}

/* --- 4. 데스크탑용 링크 메뉴 --- */
.nav-links {
  /* 내부 a 태그들을 가로로 배치합니다. */
  display: flex;
  /* 리스트 스타일 제거 (ul인 경우) */
  list-style: none;
}

.nav-links a {
  /* 각 링크의 왼쪽에만 여백을 줘서 간격을 만듭니다. */
  margin-left: 24px;
  /* 기존 스타일 유지 */
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  opacity: .9;
  /* 세로 정렬을 위한 추가 설정 */
  display: inline-flex;
  align-items: center;
  font-family: 'SUIT', sans-serif; /* Explicitly apply SUIT font */
}

.nav-links a:hover,
.nav-links a.active {
  opacity: 1;
  color: #000;
}

/* --- 5. 모바일용 햄버거 아이콘 --- */
.hamburger-icon {
  /* 평소에는 완전히 숨겨둡니다. */
  display: none;
  
  /* 기존 스타일 유지 + 크기 조정 */
  cursor: pointer;
  width: 24px;  /* 10px에서 24px로 증가 - 터치하기 쉽게 */
  height: 24px;
  border-radius: 50%; /* Always circular */
  /* 햄버거 라인 스타일 */
  position: relative;
  flex-direction: column;
  justify-content: space-around;
}

/* 햄버거 아이콘의 라인들 */
.hamburger-icon::before,
.hamburger-icon::after,
.hamburger-icon {
  background-color: var(--text);
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  transition: 0.3s;
  opacity: 0; /* Always hidden */
}

.hamburger-icon::before {
  top: 0;
}

.hamburger-icon::after {
  bottom: 0;
}

/* 또는 간단한 원형 버전을 원한다면 이 클래스 추가 */
.hamburger-icon.simple {
  border-radius: 50%;
  background-color: var(--text);
  width: 10px;
  height: 10px;
}

/* --- 6. 모바일 메뉴 --- */

.mobile-menu a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid rgba(31, 41, 55, 0.1);
}

.mobile-menu a:last-child {
  border-bottom: none;
}

/* --- 7. 반응형 처리 (화면 너비 768px 이하) --- */
@media (max-width: 768px) {
  /* 네비게이션 패딩 조정 */
  .nav {
    padding: 0 15px;
  }
  
  /* 데스크탑 링크 메뉴를 숨깁니다. */
  .nav-links {
    display: none;
  }
  
  /* 햄버거 아이콘을 보여줍니다. */
  .hamburger-icon {
    display: flex; /* Show on mobile */
    /* 로고의 margin-right: auto 규칙 때문에 자동으로 오른쪽 끝에 붙습니다. */
    z-index: 100; /* Ensure it's above other elements */
  }
  .hamburger-icon.open {
    /* No background-color change, keep it solid */
  }
  .hamburger-icon.open::before,
  .hamburger-icon.open::after {
    opacity: 0; /* Hide the top and bottom lines */
  }
  
  /* 간단한 원형 버전 사용시 */
  .hamburger-icon.simple {
    display: block;
  }
}

.footer {
  position: relative; /* Add this to enable z-index */
  padding: 10px 0;
  border-top: none;
  color: var(--muted);
  font-size: 14px;
  z-index: 30; /* Ensure footer is above stickers */
}

.footer-white {
  background-color: #FFFFFF;
}



.mobile-menu.active a {
    opacity: 1; /* Fade in when active */
}

.asset-tooltip {
    position: fixed;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    width: max-content; /* Adjust width to content */
    min-width: 150px; /* Minimum width to prevent it from being too small */
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #1F2937; /* Changed border color to match asset frame */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(255,255,255,0.6) inset; /* Added inset shadow */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
    z-index: 10000;
}

.asset-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

.asset-tooltip h3 {
    margin: 0 0 8px;
    font-size: 24px; /* 더 크게 */
    font-weight: 700; /* 더 두껍게 */
    color: var(--text);
}

.asset-tooltip p {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.6;
    white-space: pre-wrap; /* 
 문자를 줄 바꿈으로 렌더링 */
}

.tooltip-year {
    font-size: 0.8em; /* 제목보다 작은 폰트 크기 */
    font-weight: 500; /* 일반 굵기 */
    color: var(--muted); /* 옅은 색상 */
    margin-left: 8px; /* 제목과의 간격 */
    vertical-align: middle; /* 세로 정렬 */
}

/* --- Hero & Work Section Styles --- */
.hero-name-section {
  /* display: flex; and justify-content: center; removed for stability */
  background-color: var(--bg);
  padding-top: 0px; /* Nav height */
  min-height: 30vh;
  text-align: center; /* Center content within hero section */
}

#interactive-name {
  font-family: 'Lexend Giga', sans-serif;
  font-size: clamp(32px, 10vw, 180px); /* Use clamp for responsive font size */
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0px 0; /* Adjusted to move text higher */
  line-height: 1;
  font-weight: 100; /* Start with thin */
  animation: pulseFontWeight 5s ease-in-out infinite;
  z-index: 10;
  color: #1F2937;
}

.work-section {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding-top: 0; /* Adjusted for new hero */
}

/* Grid container for asset frames */
.float-stage {
  column-width: 280px; /* Set a base column width to create responsive columns */
  column-gap: 40px;
  padding: 5vh 20px 0 20px;
  max-width: 1600px;
  margin: 0 auto;
}

/* Adjust for mobile */
@media (max-width: 768px) {
  .float-stage {
    column-width: auto; /* Let column-count take precedence */
    column-count: 2; /* Force 2 columns on mobile */
    column-gap: 20px; /* Adjust gap for mobile */
  }
}

.content-area-wrapper {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px; /* Changed to fixed pixel padding */
}

/* Sorting Wrapper (the main rounded white container) */
.sorting-wrapper {
  background-color: white;
  border: none;
  border-radius: 16px; /* Rounded corners */
  margin: 15px 0; /* Vertical margin only, horizontal handled by parent */
  max-width: 1600px; /* Match float-stage max-width */
  text-align: left; /* Left-align content within the wrapper */
  transition: max-height 0.5s ease-out, padding 0.5s ease-out, border-width 0.5s ease-out; /* Animation for collapse/expand */
  overflow: hidden; /* Hide overflowing content during transition */
  display: flex;
  flex-direction: column; /* Stack filter groups vertically */
  align-items: flex-start; /* Align groups to the start */
  padding: 10px 0; /* Vertical padding */
}

.filter-group {
  width: 100%;
  padding: 10px 20px;
}

.filter-title {
  font-family: 'Lexend Giga', sans-serif;
  font-weight: 500;
  font-size: 12px;
  margin: 0 0 12px 0;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.category-filters,
.year-filters {
  display: flex; /* Ensure chips are in a row */
  flex-wrap: wrap; /* Allow chips to wrap to next line */
  justify-content: flex-start; /* Left-align chips */
  gap: 10px; /* Space between chips */
}

.category-filters .chip,
.year-filters .chip {
  background-color: var(--chip-bg-color, #f0f0f0); /* Use CSS variable for background */
  border: none; /* No border */
  border-radius: 20px;
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 0.9em;
  font-weight: 500;
  color: white; /* White text */
}

.category-filters .chip:hover,
.year-filters .chip:hover {
    background-color: #4da2ff; /* Lighter blue */
}

.category-filters .chip.active,
.year-filters .chip.active {
    background-color: #1F2937; /* Black background for active */
    color: white; /* Keep white text */
}

.sorting-wrapper.collapsed {
  max-height: 0 !important; /* Collapse height */
  padding-top: 0 !important; /* Remove padding */
  padding-bottom: 0 !important; /* Remove padding */
  border-width: 0; /* Remove border */
  margin-top: 0; /* Remove margin when collapsed */
  margin-bottom: 0; /* Remove margin when collapsed */
}

/* Sorting Container (now just for the toggle button) */
.sorting-container {
  text-align: left; /* Left-align the toggle button */
  /* Ensure it's not collapsed by the button */
  display: inline-block; /* Or block, depending on desired layout */
  /* No background, border, padding, margin here, as it's handled by sorting-wrapper or sorting-toggle */
}

.sorting-toggle {
  background-color: #1F2937;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px; /* Reduced padding */
  font-size: 0.9em; /* Slightly smaller font */
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 15px 0; /* Vertical margin only, horizontal handled by parent */
  display: inline-block; /* Ensure it takes up space */
}

.sorting-toggle:hover {
  background-color: #333;
}

.asset-frame {
    position: relative;
    border: none; /* 테두리 제거 */
    border-radius: 8px;
    background-color: white; /* 흰 배경 추가 */
    overflow: hidden;
    cursor: pointer;
    break-inside: avoid-column; /* Ensures items don't break across columns */
    margin-bottom: 20px; /* Space between items in masonry layout */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.asset-frame:hover,
.asset-frame.is-active {
    transform: scale(1.05);
}

.asset-frame.no-margin-bottom {
  margin-bottom: 0 !important;
}

/* Asset inside frame */
.asset-frame a {
  display: block;
  width: 100%;
  height: 100%;
}

.asset-frame img,
.asset-frame canvas {
  display: block; /* 이 한 줄을 추가해주세요 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 컨테이너를 채우도록 */
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
  border-radius: 0; /* 내부 에셋의 둥근 모서리 삭제 */
  transform: translateZ(0); /* Force hardware acceleration in Safari */
}

/* Sticker Grid Styles */
.sticker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr)); /* 각 행이 최소 높이 0을 가지면서 사용 가능한 공간을 균등하게 채우도록 */
    gap: 10px; /* 4개의 스티커 아이템 간 여백 추가 */
    width: 100%;
    height: auto; /* 높이를 자동으로 설정 */
    aspect-ratio: 1 / 1; /* 스티커 그룹 컨테이너 자체를 정사각형으로 유지 */
    background: transparent; /* 배경 투명 유지 */
    box-shadow: none !important; /* 그림자 제거 */
    border: none !important; /* Remove border from the grid container */
    border-radius: 0; /* Remove border-radius from the grid container */
    overflow: visible !important; /* Allow content to overflow if needed, to prevent border cut-off */
}

.sticker-grid .sticker-item {
    width: 100%;
    height: 0; /* padding-bottom 트릭을 위해 높이를 0으로 설정 */
    padding-bottom: 100%; /* 너비에 대한 100% 패딩으로 정사각형 비율 강제 */
    position: relative; /* 내부 요소를 absolute로 배치하기 위해 필요 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white; /* 흰 배경 추가 */
    border: none; /* 테두리 제거 */
    border-radius: 8px; /* 둥근 모서리 축소 */
    box-shadow: none; /* Remove shadow from individual sticker items */
    box-sizing: border-box; /* 패딩과 보더가 너비/높이에 포함되도록 */
}

.sticker-grid .sticker-item img,
.sticker-grid .sticker-item canvas {
    position: absolute; /* 부모 컨테이너에 맞춰 절대 위치 */
    top: 0;
    left: 0;
    width: 100%; /* 컨테이너를 채우도록 */
    height: 100%; /* 컨테이너를 채우도록 */
    object-fit: cover; /* Rive 에셋이 컨테이너를 채우도록 */
}

.typing-text {
  min-height: 1.5em; /* A single line of text with a bit of buffer */
  min-width: 15ch;   /* Enough characters for "Illustrator" and some buffer */
  display: inline-block; /* Essential to allow min-width to work */
  white-space: nowrap; /* Prevents text from wrapping */
  font-size: 1.2em; /* Default desktop font size, can be adjusted */
}

/* --- Responsive & Other Pages --- */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Hide desktop nav links on mobile */
  }

  .hamburger-icon {
    display: flex; /* Show on mobile */
  }

  .float-stage {
    column-width: auto; /* Let column-count take precedence */
    column-count: 2; /* Force 2 columns on mobile */
    column-gap: 20px; /* Adjust gap for mobile */
  }
  .about-content {
    flex-direction: column;
    gap: 40px;
  }
  .asset-viewer {
    flex-direction: column !important;
    gap: 20px; /* Reduced gap between image and text group */
  }
  .about-image {
    width: 100%; /* Allow it to shrink */
    max-width: 150px; /* But not exceed 150px */
    /* Removed height: auto; */
    align-self: center;
    aspect-ratio: 1 / 1; /* Maintain circular shape */
  }
  .name-and-title {
    flex: 1; /* Allow it to take available space */
    min-width: 0; /* Allow it to shrink below its content size */
  }
  .profile-header h1 {
    font-size: clamp(32px, 6vw, 56px) !important; /* Responsive font size for name */
  }
  .profile-header .lead {
    font-size: clamp(14px, 3vw, 24px); /* Responsive font size for title */
    line-height: 1.2;
    margin-top: 5px;
  }
  .asset-display {
    position: static;
    order: -1; /* Force image to appear above text group */
    margin-bottom: 0; /* Remove space below image on mobile */
  }
  .rive-sticker {
    width: 40px; /* Smaller */
    height: 40px; /* Smaller */
  }
  .image-sticker {
    width: 40px; /* Smaller */
    height: 40px; /* Smaller */
  }
  .image-sticker.rectangular {
    height: 40px; /* Smaller */
    width: auto;
  }
  .asset-sticker[href="/projects/foodillust.html"] {
    width: 70px; /* Smaller */
    height: 70px; /* Smaller */
  }

  /* foodillust 페이지 스티커를 위한 반응형 조정 */
  .floating-stickers-container {
    row-gap: -10px; /* 줄 간의 겹침을 줄이거나 조정 */
  }

  .floating-sticker {
    width: calc(25% - 10px); /* 4열 유지, 간격 조정 */
  }

  .floating-sticker:nth-child(n+2) {
    margin-left: -20px; /* 겹침 정도 줄이기 */
  }

  /* About Page Skills Mobile */
  /* Removed old skills section CSS */

  .box-inner-item {
    flex-basis: calc(50% - 20px); /* Two per row on mobile */
  }

  .typing-text {
    font-size: 1.5em; /* Smaller font size for mobile */
  }

  .skills-container {
    /* width: 80vw; removed to inherit parent's responsive padding */
  }

  /* Kalguksu Page Responsive Font Sizes */
  .project-content h1 { /* Kalguksu title */
    font-size: 48px !important;
  }

  .project-intro-text,
  .development-background-section p,
  .food-description-section p,
  .kalguksu-description { /* General paragraphs and intro text */
    font-size: 1em !important;
  }

  .development-background-section h4,
  .food-description-section h4,
  .kalguksu-poster-section h2,
  .kalguksu-photo-section h2,
  .kalguksu-goods-section h2 { /* Section titles */
    font-size: 18px !important;
  }

  .character-name { /* Character names */
    font-size: 1.2em !important;
  }

  .character-motive,
  .character-description { /* Character motives and descriptions */
    font-size: 0.8em !important;
  }
}

.about-section, .asset-viewer {
  padding: 40px 0;
  background: var(--bg);
}

.asset-viewer {
  display: flex;
  flex-direction: row; /* Retain row for asset-viewer */
  gap: 40px; /* Added gap between asset and info */
}

.about-content {
  display: flex;
  flex-direction: column; /* Stack vertically for about page */
  gap: 20px; /* Keep gap */
}

.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pushes items to opposite ends */
  gap: 20px; /* Space between image and name */
  margin-bottom: 0; /* Reduced margin to bring .lead closer */
}

#asset-display {
  flex: 1; /* Take up half the space */
  display: flex; /* Make it a flex container to center its content */
  justify-content: center; /* Center image/canvas horizontally */
  align-items: center; /* Center image/canvas vertically */
  min-height: 300px; /* Ensure it has some height even if image is small */
}

#asset-display img,
#asset-display canvas {
  max-width: 100%; /* Ensure it doesn't overflow its parent */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove extra space below image */
  object-fit: contain; /* Ensure the entire image is visible within the space */
}

.about-image {
  flex: 0 0 200px;
}

.about-image img {
  width: 100%;
  border-radius: 50%;
  border: 1px solid #1F2937;
}

.profile-flipper {
  perspective: 1000px; /* Establishes a 3D context */
  width: 100%; /* Take full width of parent .about-image */
  height: 0;
  padding-bottom: 100%; /* Maintain 1:1 aspect ratio for circular image */
  position: relative;
}

.profile-front,
.profile-back {
  backface-visibility: hidden; /* Hide the back of the element when facing away */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.6s; /* Smooth transition for the flip */
  border-radius: 50%; /* Maintain circular shape */
  overflow: hidden; /* Hide content outside the circle */
  border: 1px solid #1F2937; /* Add black border */
}

.profile-back {
  transform: rotateY(180deg); /* Initially rotated to be hidden */
}

.profile-flipper:hover .profile-front {
  transform: rotateY(180deg); /* Flip front to back on hover */
}

.profile-flipper:hover .profile-back {
  transform: rotateY(360deg); /* Flip back to front on hover */
}

.about-description {
  font-weight: 500; /* Bolder */
  font-size: 1.1em; /* Larger */
  line-height: 1.8; /* Increased line height */
}

.project-history-content {
  font-weight: 500;
  font-size: 1.1em;
  line-height: 1.8;
  color: var(--text); /* Ensure it uses the default text color */
}

.about-text, .asset-info {
  flex: 1;
  text-align: left; /* Left-align text */
}

.profile-header h1 {
  font-family: 'Lexend Giga', sans-serif;
  font-weight: 700;
  /* font-variation-settings: 'wdth' 125; Removed to prevent potential fallback */
  color: #1F2937;
  font-size: 72px; /* Keep original size for now, user can adjust */
  margin-top: 0;
  margin-bottom: 0; /* Remove bottom margin */
  line-height: 1;
}

.about-text h3 {
  font-size: 28px;
  margin-top: 40px; /* Add some space above the title */
  margin-bottom: 20px; /* 여백 추가 */
  border-bottom: 1px solid #1F2937;
  padding-bottom: 8px;
}

.about-text h4 {
  font-family: 'Lexend Giga', sans-serif;
  font-weight: 700;
  color: #000; /* Changed to black */
  margin-top: 16px; /* Reduced from 32px */
  margin-bottom: 12px;
  border-bottom: 1px solid #1F2937; /* Changed to black */
  padding-bottom: 8px;
}



/* 완전 끊김 없는 티커 애니메이션 */
.work-section .horizontal-bar-container {
    background: white;
    border: none;
    height: 80px;
    display: flex;
    align-items: center;
    overflow: hidden !important;
    margin: 20px 0;
    position: relative;
    width: 100%;
}

.work-section .horizontal-bar-text {
    font-family: 'Lexend Giga', sans-serif;
    font-weight: 300;
    color: black;
    text-transform: uppercase;
    font-size: 3rem;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    will-change: transform;
    display: flex;
}

/* 각 텍스트 아이템 */
.ticker-item {
    animation: seamlessScroll 15s linear infinite;
    margin-right: 3em; /* 텍스트 간 간격 */
}

/* 끊김 없는 스크롤 */
@keyframes seamlessScroll {
    0% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(-100vw);
    }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .work-section .horizontal-bar-text {
        font-size: 2rem;
    }
    
    .ticker-item {
        animation: seamlessScroll 12s linear infinite;
        margin-right: 2em;
    }
    
    .work-section .horizontal-bar-container {
        height: 60px;
    }
}

.fridge-banner {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.full-width-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.project-detail-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.project-description {
    margin-bottom: 40px;
}

.project-description > div {
    margin-bottom: 15px;
}

.project-description > div:last-child {
    margin-bottom: 0;
}

.project-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Styling for sections within project content */
.project-content section {
    margin-top: 40px; /* Add space above each section */
}

.project-content .section-content-wrapper {
    padding: 20px; /* Add padding to the content wrapper */
    background-color: #fff; /* White background for the content area */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
}

.project-content section {
    padding: 20px; /* Add padding to sections within project content */
    margin-bottom: 40px; /* Add some space between sections */
    background-color: #fff; /* Optional: Add a background to make padding visible */
    border-radius: 10px; /* Optional: Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Subtle shadow */
}

.image-gallery-container {
    display: flex;
    flex-wrap: nowrap; /* 줄 바꿈 방지 */
    justify-content: space-between; /* 요소들 사이에 균등한 공간 */
    gap: 10px; /* 요소들 사이의 간격 */
    margin-top: 40px;
    margin-bottom: 80px;
    align-items: flex-start;
    overflow-x: auto; /* 필요시 가로 스크롤 */
}

.character-container {
    width: 600px; /* 너비를 600px로 고정 */
    text-align: center;
}
.character-container img {
    width: 100%;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.character-container img:hover {
    transform: scale(1.05);
}
.character-details {
    margin-top: 15px;
    text-align: left;
}
.character-name {
    font-size: 1.5em;
    font-weight: bold;
    margin: 10px 0 5px;
}
.character-motive, .character-description {
    font-size: 0.9em;
    color: var(--muted);
    margin: 5px 0;
}

/* Acryilc Section Styles (similar to GIF section) */
.acryilc-section-container {
    display: flex;
    align-items: flex-start; /* Top-align items */
    gap: 20px;
    margin-top: 50px; /* Adjust as needed */
    margin-bottom: 50px; /* Adjust as needed */
}

.acryilc-text-content {
    flex: 1;
}

.acryilc-text-content h3 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

.acryilc-text-content p {
    color: var(--muted);
}

.acryilc-image-wrapper {
    flex-shrink: 0;
    width: 70%; /* gif-image-wrapper와 동일한 너비 */
    display: flex;
    justify-content: space-around; /* 이미지들 사이에 공간 배분 */
    align-items: flex-end; /* 하단 정렬 */
    /* height는 내부 이미지에 따라 자동으로 조절되도록 제거 */
    position: relative; /* 내부 이미지의 absolute positioning을 위해 유지 */
}

.acryilc-asset {
    /* position: absolute; 제거 */ /* 나란히 배치되므로 absolute 필요 없음 */
    width: 30%; /* 3개의 이미지가 나란히 배치되도록 너비 조정 (gap 고려) */
    height: auto;
    display: block;
    border-radius: 10px;
    /* top, left, z-index는 absolute positioning에만 필요하므로 제거 */
}


.floating-stickers-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    align-items: center;
    margin-bottom: 40px;
    row-gap: -20px; /* 줄 간의 간격 겹치게 */
}

.floating-sticker {
    object-fit: cover; /* 이미지가 원형 안에 꽉 차도록 */
    pointer-events: auto; /* 호버링 가능하도록 변경 */
    cursor: default; /* 클릭 불가능 시 마우스 커서 변경 */
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    border: 1px solid #1F2937;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 0 0 10px rgba(255,255,255,0.6) inset;
    width: calc(25% - 7.5px); /* (100% / 4) - (겹치는 부분 / 4) */
    height: auto; /* 높이는 너비에 비례하여 자동 조절 */
    aspect-ratio: 1 / 1; /* 원형 유지를 위해 추가 */
    position: relative; /* z-index를 위해 추가 */
    z-index: 100; /* 호버링 문제 해결을 위해 z-index 높임 */
    transition: transform 0.3s ease; /* 부드러운 전환 효과 추가 */
}

.floating-sticker:hover {
    transform: scale(1.1); /* 호버 시 1.1배 확대 */
}

/* 두 번째 스티커부터 왼쪽으로 겹치게 */
.floating-sticker:nth-child(n+2) {
    margin-left: -30px;
}

/* Business Card Widget - 이미지 원본 비율 자동 조정 */
#business-card-widget-container {
    display: flex;
    justify-content: center;
    perspective: 1000px;
    margin: 0;
}

.business-card-flipper-container {
    width: 300px; /* Standard business card width */
    height: 180px; /* Standard business card height (ratio 5:3) */
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
    transform: rotateZ(-5deg); /* Rotate slightly */
}

.business-card-flipper-container:hover .business-card-flipper {
    transform: rotateY(180deg);
}

.business-card-flipper {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.business-card-front,
.business-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Hide the back of the element when facing away */
    border-radius: 20px; /* Reduced border-radius */
    overflow: hidden;
    border: 1px solid #1F2937;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 0 0 10px rgba(255,255,255,0.6) inset;
    background: white;
}

.business-card-front img,
.business-card-back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.business-card-back {
    transform: rotateY(180deg);
}

/* A5 Flip Card Widget */
#a5-card-widget-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
    perspective: 1000px;
}

.a5-card-flipper-container {
    width: 280px; /* A5 비율 기준 너비 */
    height: 400px; /* A5 비율 기준 높이 (7:10 비율) */
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.a5-card-flipper-container:hover .a5-card-flipper {
    transform: rotateY(180deg);
}

.a5-card-flipper {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.a5-card-front,
.a5-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px; /* Reduced border-radius */
    overflow: hidden;
    border: 1px solid #1F2937;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 0 0 10px rgba(255,255,255,0.6) inset;
    background: white;
    top: 0;
    left: 0;
}

.a5-card-front img,
.a5-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* A5 비율에 맞춰서 이미지 크롭 */
    display: block;
}

.a5-card-back {
    transform: rotateY(180deg);
}

/* 반응형 - 모바일에서 크기 조정 */
 @media (max-width: 768px) {
    .a5-card-flipper-container {
        width: 210px; /* 모바일에서 작게 */
        height: 300px; /* A5 비율 유지 */
    }

    /* foodillust 페이지 스티커를 위한 반응형 조정 */
    .floating-stickers-container {
    row-gap: -10px; /* 줄 간의 겹침을 줄이거나 조정 */
  }

  .floating-sticker {
    width: calc(25% - 10px); /* 4열 유지, 간격 조정 */
  }

  .floating-sticker:nth-child(n+2) {
    margin-left: -20px; /* 겹침 정도 줄이기 */
  }
}

 @media (max-width: 480px) {
    .a5-card-flipper-container {
        width: 168px; /* 더 작은 화면에서 */
        height: 240px; /* A5 비율 유지 */
    }

    /* foodillust 페이지 스티커를 위한 더 작은 화면 반응형 조정 */
    .floating-sticker {
        width: calc(25% - 8px); /* 더 작은 화면에서 4열 유지 */
    }
    .floating-sticker:nth-child(n+2) {
        margin-left: -15px; /* 더 작은 화면에서 겹침 정도 줄이기 */
    }
}

/* Keung 페이지 포스터 및 카드 섹션 반응형 조정 */
@media (max-width: 768px) {
  #poster-and-reflet-container {
    flex-direction: column; /* 세로로 쌓이도록 변경 */
    align-items: center; /* 중앙 정렬 */
    gap: 40px; /* 세로 간격 추가 */
  }

  #keung-poster-container {
    flex: none; /* flex 속성 제거하여 크기 고정 방지 */
    width: 80%; /* 모바일에서 너비 조정 */
    max-width: 400px; /* 최대 너비 설정 */
  }

  .a5-and-business-card-wrapper {
    width: 80%; /* 모바일에서 너비 조정 */
    max-width: 400px; /* 최대 너비 설정 */
  }
}

/* VPD Card Widget */
#vpd-card-widget-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto; /* Center the container */
    perspective: 1000px; /* Reduced for more pronounced 3D effect */
    max-width: 500px; /* Set a maximum width */
}



.vpd-card-flipper-container {
    width: 100%; /* 부모 컨테이너에 맞게 너비 조정 */
    aspect-ratio: 1 / 1; /* 1:1 비율로 변경 */
    position: relative;
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
    transform-style: preserve-3d; /* Added for 3D context */
}

.vpd-asset-inner-display {
    border: 1px solid #1F2937;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    background-color: #f0f0f0;
    position: relative;
    aspect-ratio: 1518 / 830; /* 원본 애셋 비율 유지 */
}

.vpd-asset-inner-display img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 컨테이너를 채우도록 cover로 변경 */
    display: block;
}

.vpd-card-flipper {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.6s; /* 뒤집히는 애니메이션 */
    cursor: pointer;
    transform-origin: center center;
}

.vpd-card-front,
.vpd-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #1F2937;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.vpd-card-front {
    z-index: 2; /* Ensure front is on top initially */
}

.vpd-card-back {
    z-index: 1; /* Ensure back is behind initially */
}

.vpd-card-flipper-container:hover .vpd-card-flipper .vpd-card-front {
    z-index: 1; /* When flipped, front goes behind */
}

.vpd-card-flipper-container:hover .vpd-card-flipper .vpd-card-back {
    z-index: 2; /* When flipped, back comes to front */
}



.vpd-card-front img,
.vpd-card-back img,
.vpd-card-inner-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* 호버 시 뒤집히는 애니메이션 */
.vpd-card-flipper-container:hover .vpd-card-flipper {
    transform: rotateY(180deg);
}

.vpd-card-flipper-container:hover .vpd-card-front {
    z-index: 1; /* When flipped, front goes behind */
}

.vpd-card-flipper-container:hover .vpd-card-back {
    z-index: 2; /* When flipped, back comes to front */
}





.vpd-card-widget-container.expanded .vpd-card-inner-content {
    display: block; /* Show when expanded */
    opacity: 1;
}

.vpd-card-widget-container.expanded .vpd-card-inner-content {
    display: block; /* 펼쳐지면 보임 */
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .vpd-card-flipper-container {
        /* width: 80vw; removed, now controlled by parent max-width */
    }
    .vpd-card-widget-container.expanded .vpd-card-flipper-container {
        /* width: 90vw; removed, now controlled by parent max-width */
    }
}

.a5-and-business-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.labeled-asset {
    margin-bottom: 20px; /* Add some space below the labeled assets */
}

.top-row-container .labeled-asset:nth-child(1) {
    width: 30%; /* 가로폭 축소 */
}

.top-row-container .labeled-asset:nth-child(2) {
    width: 55%;
}

/* Top Row Container for VPD Page */
.top-row-container {
    display: flex;
    justify-content: space-between; /* 요소들 사이에 균등한 공간 */
    align-items: flex-start;
    gap: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
    flex-wrap: nowrap; /* 줄 바꿈 방지 */
}

/* Keung Drafts Section */
.keung-drafts-section {
    margin-top: 50px; /* Add some space below the business card */
    margin-bottom: 50px;
    text-align: center; /* Center the description */
}

  /* Kalguksu Page Responsive Font Sizes */
  .project-content h1 { /* Kalguksu title */
    font-size: 48px !important;
  }

/* Poster and Reflet Card Container */
#poster-and-reflet-container {
    display: flex;
    justify-content: center; /* Center the items */
    align-items: flex-start; /* Align items to the top */
    gap: 0px; /* Space between poster and card */
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: white; /* Added white fill */
    padding: 20px; /* Add some padding */
    border-radius: 10px; /* Optional: add some rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: add a subtle shadow */
}

#keung-poster-container {
    flex: 1; /* Allow poster to take available space */
    max-width: 500px; /* Example max width for poster */
}

#keung-poster-container img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #1F2937; /* Example border */
    border-radius: 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 0 0 10px rgba(255,255,255,0.6) inset;
}

.projects-section {
  padding: 40px 0; /* Add some top and bottom padding */
  margin-bottom: 80px; /* Add bottom margin */
}

.projects-section h1 {
  text-align: center;
  margin-bottom: 20px;
}

.projects-section p {
  text-align: center;
  margin-bottom: 40px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
  gap: 30px; /* Space between grid items */
}

.project-item {
  display: block;
  text-decoration: none;
  color: inherit;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.project-item:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.project-thumbnail {
  width: 100%;
  padding-bottom: 75%; /* 4:3 Aspect Ratio (adjust as needed) */
  background-size: cover;
  background-position: center;
}

.project-name {
  padding: 15px;
  font-weight: bold;
  text-align: center;
  background-color: #fff; /* White background for text */
}

/* Flipbook Styles for fridge.html */
#flipbook-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

#book {
    height: 50vw; /* 뷰포트 너비의 50%를 높이로 설정 */
    max-height: 500px; /* 큰 화면에서의 최대 높이 */
    width: 50vw; /* 닫혔을 때 1:1 비율 유지 */
    max-width: 500px; /* 닫혔을 때 최대 너비 */
    position: relative;
    transition: transform 0.8s ease-in-out, width 0.8s ease-in-out;
}

#book.book-open {
    width: 100vw; /* 열렸을 때 2:1 비율 (높이의 2배) */
    max-width: 1000px; /* 열렸을 때 최대 너비 */
}

.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Default to full width for covers */
    height: 100%;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    backface-visibility: hidden;
    transition: transform 0.8s ease-in-out;
    cursor: pointer;
}

.page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* New style for internal pages when book is open */
.internal-page-display {
    width: 50%; /* Each internal page takes half the width of the book */
    aspect-ratio: 1 / 1; /* Ensure each internal page is 1:1 */
}

#pages .left-page {
    left: 0; /* Left page is at the left edge */
}

#pages .right-page {
    left: 50%; /* Right page is at the right half */
}

/* 페이지가 접히는 축(경첩)의 위치 설정 */
#cover-front,
#pages .right-page { /* 앞표지와 오른쪽 페이지는 왼쪽을 축으로 회전 */
    transform-origin: left center;
}

#cover-back,
#pages .left-page { /* 뒷표지와 왼쪽 페이지는 오른쪽을 축으로 회전 */
    transform-origin: right center;
}

/* 컨트롤 버튼 스타일 */
#controls {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}

#controls button {
    font-family: 'Helvetica', 'Arial', sans-serif;
    background-color: #2c2c2c;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s, opacity 0.3s;
}

#controls button:hover:not(:disabled) {
    background-color: #555;
}

#controls button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 반응형 디자인: 작은 화면에서 책 크기 조정 */
@media (max-width: 768px) {
    #book {
        width: 80vw; /* 모바일에서는 더 넓게 표시 */
        max-width: none;
    }

    #controls button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* Shopping Bag Styles */
.asset-title {
    text-align: left;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 1.2em;
}
.shopping-bag-wrapper {
    display: flex;
    justify-content: center;
    perspective: 1000px;
    margin: 0;
}

/* === 수정된 부분 시작 === */
.shopping-bag {
    position: absolute; /* 부모(wrapper) 기준으로 위치를 잡도록 변경 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* wrapper가 만들어준 공간을 100% 채움 */
    transition: transform 0.5s ease-in-out;
    transform: rotateY(0deg) rotateX(0deg);
    overflow: visible; /* 손잡이가 보이도록 visible로 변경 */
    /* aspect-ratio, height: 0, padding-bottom은 wrapper가 담당하므로 모두 제거 */
}
/* === 수정된 부분 끝 === */

.shopping-bag:hover {
    transform: rotateY(-15deg) rotateX(3deg) scale(1.02); /* Hover state: tilted */
}
.bag-handles {
    position: absolute;
    top: -50%; /* Adjusted position for single handle */
    left: 45%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center; /* Center single handle */
    width: 25%; /* Relative to shopping bag's width */
    height: 100%; /* Relative to shopping bag's height */
    border: 10px solid #000000; /* Black border */
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom: none;
}
.bag-body {
    width: 90%;
    background: #faf6f1;
    border: 1px solid #000000; /* Black border */
    border-radius: 5px;
    box-shadow: none; /* Removed shadow */
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.stamp-on-bag {
    max-width: 80%; /* Bigger stamp */
    opacity: 0.9;
    height: auto; /* Added */
    display: block; /* Added */
}

/* Shopping Bag Section Styles */
.shopping-bag-and-stickers-row {
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: flex-start; /* Align items to the top */
    gap: 20px;
    margin-bottom: 0; /* Added to remove potential extra space */
}

.shopping-bag-and-stickers-row .shopping-bag-wrapper {
    width: 48.5%; /* Adjusted for centering */
    flex-shrink: 0;
    align-self: stretch; /* Added */
    aspect-ratio: 1329 / 1181; /* Added for 1329:1181 aspect ratio */
    position: relative; /* Added for absolute positioning of children */
    height: 0; /* Added to ensure aspect-ratio dictates height */
}

.sticker-column {
    width: 10.3%; /* Changed back to width */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute stickers vertically */
    align-self: stretch; /* Added */
    height: 100%; /* Force height to match parent */
}

.sticker-item {
    width: 100%;
    flex-grow: 1; /* Added */
    display: flex; /* Added */
    align-items: center; /* Added */
    justify-content: center; /* Added */
    border: 1px solid #1F2937; /* Make border more visible */
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out; /* Add transition for hover */
    position: relative; /* Added for aspect ratio */
    height: 0; /* Added for aspect ratio */
    padding-bottom: 100%; /* Added for 1:1 aspect ratio */
}

@media (max-width: 768px) {
  /* ... existing mobile styles ... */
  .sticker-item {
    border-radius: 5px; /* Adjust border-radius for visual consistency on mobile */
  }
}

.sticker-item:hover {
    transform: scale(1.05); /* Add hover effect */
}

.sticker-item.is-active {
    border-color: transparent;
}

/* Box Container Styles */
.box-container-wrapper {
    width: 41%; /* Adjusted for centering */
    display: flex;
    align-items: center; /* Added */
    justify-content: center; /* Added */
    align-self: stretch; /* Added */
    height: 100%; /* Force height to match parent */
}

.box-container {
    position: relative;
    width: 100%;
    cursor: pointer;
    border: 1px solid #1F2937; /* Added black border */
    aspect-ratio: 1161 / 951; /* Set aspect ratio for the container */
    overflow: hidden; /* Add this to hide content outside the box */
}

.box-closed-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ensure it fills the container */
    object-fit: cover; /* To make sure the image covers the area */
    transition: transform 0.5s ease-in-out; /* Animate transform */
    border: 1px solid #1F2937; /* Added black border for closed state */
}

.box-open-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ensure it fills the container */
    display: flex;
    flex-direction: row;
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    background-color: #fff; /* Or some other background */
    border: 1px solid #1F2937;
    padding: 10px 0; /* Add vertical padding */
    gap: 10px; /* Added gap between items */
    aspect-ratio: 1161 / 951; /* Maintain aspect ratio from closed box */
    box-sizing: border-box;
    overflow: hidden; /* Added to hide overflowing content */
    transform: translateY(100%); /* Start below the container */
    transition: transform 0.5s ease-in-out; /* Animate transform */
}

.box-container.is-open .box-closed-img {
    transform: translateY(-100%); /* Move up and out of view */
}

.box-container.is-open .box-open-content {
    transform: translateY(0); /* Move into view */
}

.box-inner-item {
    flex-basis: calc(33.33% - 6.66px); /* Adjusted for gap */
    display: flex;
    align-items: center; /* Added */
    justify-content: center; /* Added */
    border-radius: 5px;
    overflow: hidden;
    position: relative; /* Added for aspect ratio */
    height: 0; /* Added for aspect ratio */
    padding-bottom: 100%; /* Added for 1:1 aspect ratio */
    border: 1px solid #1F2937; /* Added black border */
}

.box-inner-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.sticker-item:not(:last-child) {
    margin-bottom: 10px; /* Add space between stickers */
}

.sticker-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* GIF Section Styles */
.gif-section-container {
    display: flex;
    align-items: flex-start; /* Top-align items */
    gap: 20px;
    margin-top: 50px;
}

.gif-text-content {
    flex: 1;
}

.gif-text-content h3 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

.gif-text-content p {
    color: var(--muted);
}

.gif-image-wrapper {
    flex-shrink: 0;
    width: 70%; /* Increase GIF width */
}

.gif-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}
/* New CSS for character-intro-text */
.character-intro-text {
    text-align: center;
    margin: 40px auto 40px auto; /* Top, Right, Bottom, Left margins */
    max-width: 800px; /* Limit width for better readability */
    padding: 0 20px;
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text);
}

.character-intro-text p {
    margin-bottom: 1em;
}
.acryilc-description {
    text-align: center;
    margin: 40px auto 20px auto; /* 상단 40px, 하단 20px 여백 */
    max-width: 800px;
    padding: 0 20px;
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text);
}
.image-with-overlay {
    position: relative;
    width: 100%; /* Ensure it takes full width */
    margin-top: 200px;
    margin-bottom: 40px;
}

.image-with-overlay img {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(132, 132, 132); /* Or a color that contrasts well with the image */
    text-align: center;
    width: 80%; /* Adjust as needed */
    font-size: 1.3em; /* Adjust as needed */
    font-weight: bold;
}

.overlay-text p {
    margin: 0; /* Remove default paragraph margin */
}

.lead {
  font-family: 'SUIT', sans-serif;
  font-weight: 700;
  color: #1F2937;
  margin-top: 0;
  font-size: 1.5em; /* Increased size */
  line-height: 1.6; /* Increased line height */
}

.about-text p {
  margin-bottom: 0.5em; /* Reduced margin between paragraphs */
  font-size: 1.1em; /* Increased size */
  font-weight: 500; /* Made bolder */
  line-height: 1.8; /* Increased line height */
}

.project-principle-content {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800; /* extrabold */
    font-family: 'SUIT', sans-serif; /* Assuming SUIT font supports extrabold */
    color: var(--text); /* Use the default text color, which is black */
    line-height: 1.2; /* Adjust line height for better readability with large font */
}

.skills-container {
  margin-top: 40px; /* Add top margin */
  margin-bottom: 20px; /* 여백 추가 */
}

.skills-container h3 {
  font-size: 28px;
  margin-bottom: 0px;
  border-bottom: 1px solid #1F2937;
  padding-bottom: 8px;
}

.contact-section {
  margin-top: 0px;
  margin-bottom: 100px; /* Increased bottom margin */
}

.contact-section h3 {
  font-size: 28px;
  margin-bottom: 20px;
  border-bottom: 1px solid #1F2937;
  padding-bottom: 8px;
}

.social-links {
  display: flex;
  gap: 20px;
  align-items: center; /* Vertically center items */
}

.social-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transition: transform 0.2s ease-in-out;
}

.social-icon:hover {
  transform: scale(1.1);
}

.frame {
    display: grid;
    justify-items: center;
    align-items: start;
    width: 100%; /* Make frame take full width of its container */
}

.frame .overlap-group-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 50%; /* Increased to make inner content appear larger */
    position: relative;
}

.frame .overlap-group {
    position: static; /* Remove absolute positioning */
    display: grid; /* Make it a grid container */
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 0px; /* 그리드 아이템 간 간격 최소화 */
    width: 100%; /* Ensure it takes full width */
    height: auto; /* Height determined by content */
    top: auto;
    left: auto;
    transform-origin: unset;
    transform: unset;
}



.frame .element {
    position: static; /* Remove absolute positioning */
    width: 100%; /* Fill grid cell */
    height: 100%; /* Fill grid cell */
    top: auto;
    left: auto;
    aspect-ratio: unset; /* Let image aspect ratio determine */
}

.frame .img {
    position: static; /* Remove absolute positioning */
    width: 100%; /* Fill grid cell */
    height: 100%; /* Fill grid cell */
    top: auto;
    left: auto;
}

.frame .element-2 {
    position: static; /* Remove absolute positioning */
    width: 100%; /* Fill grid cell */
    height: 100%; /* Fill grid cell */
    top: auto;
    left: auto;
}

.frame .element-3 {
    position: static; /* Remove absolute positioning */
    width: 100%; /* Fill grid cell */
    height: 100%; /* Fill grid cell */
    top: auto;
    left: auto;
}

.frame .element-4 {
    position: static; /* Remove absolute positioning */
    width: 100%; /* Fill grid cell */
    height: 100%; /* Fill grid cell */
    top: auto;
    left: auto;
}

.frame .element-5 {
    position: static; /* Remove absolute positioning */
    width: 100%; /* Fill grid cell */
    height: 100%; /* Fill grid cell */
    top: auto;
    left: auto;
}

.message-box.initial-height {
    height: 30px; /* Example height for just the name */
    overflow: hidden; /* Hide any overflow */
    transition: height 0.3s ease; /* Smooth transition for height change */
}

.message-box-text {
  font-size: 0.9em;
  line-height: 1.4;
  height: 2.5em; /* This height will effectively be 0 due to visibility: hidden, but kept for consistency */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Show only one line initially */
  -webkit-box-orient: vertical;
  word-break: break-all; /* Ensure long words break */
  white-space: normal; /* Allow normal wrapping within the clamped lines */
  padding: 0 5px; /* Add some padding */
  margin-top: 5px;
  visibility: hidden; /* Hide text by default */
  opacity: 0; /* Fade out by default */
  transition: visibility 0s 0.3s, opacity 0.3s ease; /* Transition for fade in/out */
}

.message-box-text.expanded {
  height: auto;
  -webkit-line-clamp: unset; /* Remove line clamping */
  white-space: pre-wrap; /* Allow full text wrapping */
  overflow: visible;
  text-overflow: unset;
  visibility: visible; /* Show text when expanded */
  opacity: 1; /* Fade in when expanded */
  transition: visibility 0s, opacity 0.3s ease; /* Transition for fade in/out */
}

.ai-generated-label {
    display: block; /* New line */
    font-size: 0.7em; /* Smaller font size */
    color: #6b7280; /* Muted grey color */
    margin-top: 5px; /* Small margin above it */
    text-align: right; /* Align to the right */
}

.tooltip-project-name {
    display: block;
    font-size: 0.8em;
    color: #4b5563; /* A slightly darker grey */
    margin-top: 5px;
    font-weight: 600;
}
/* Moodseum Artwork Grid Styles */
.moodseum-artwork-grid {
    display: grid !important; /* display: grid를 최우선으로 적용 */
    grid-template-columns: repeat(3, 1fr); /* 3개의 열을 가진 그리드 */
    gap: 10px; /* 아이템 간 간격 */
    background: transparent !important; /* asset-frame의 배경 오버라이드 */
    border: none !important; /* asset-frame의 테두리 오버라이드 */
    box-shadow: none !important; /* asset-frame의 그림자 오버라이드 */
    border-radius: 0 !important; /* asset-frame의 둥근 모서리 오버라이드 */
    padding: 0 !important; /* asset-frame의 패딩 오버라이드 */
}

.moodseum-artwork-grid .moodseum-artwork-frame {
    background-color: white; /* 흰 배경 추가 */
    border: none; /* 각 아이템에 테두리 제거 */
    border-radius: 8px; /* 둥근 모서리 축소 */
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3 / 4; /* 세로로 긴 직사각형 비율 유지 */
}

.moodseum-artwork-grid .moodseum-artwork-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* About page skills section alignment fix */
.skills-container .frame {
    justify-items: start; /* Override the center alignment */
}

/* Project Page Responsive Images */
.yida-main img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 20px auto; /* Center images and add space between them */
}

/* Styles for paired images on asset-detail.html */
.paired-images-wrapper {
    display: flex;
    flex-direction: column; /* Stack by default */
    gap: 20px; /* Space between images */
    width: 100%;
    justify-content: center;
    align-items: center;
}

.paired-asset-image {
    max-width: 100%;
    height: auto;
    display: block;
    border: none;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .paired-images-wrapper {
        flex-direction: row; /* Side-by-side on larger screens */
    }
    .paired-asset-image {
        width: 48%; /* Adjust for gap */
    }
}

/* Guestbook Form and Physics Container Styles */
.message-input-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#message-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 600px; /* Optional: constrain form width */
    position: relative;
    z-index: 2;
}

#message-form input {
    padding: 10px;
    border: none; /* Stroke removed as requested */
    background-color: #f0f0f0; /* Added for visibility */
    border-radius: 5px;
    font-size: 1em;
    flex-grow: 1; /* Allow inputs to grow */
}

#message-form button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #1F2937;
    color: white;
    cursor: pointer;
    font-size: 1em;
}

#physics-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the items on each line */
    gap: 10px;
    padding: 10px;
    margin-top: 20px; /* Add margin above physics container */
    z-index: 1;
    /* Height will now be determined by content */
}

.message-box {
    padding: 8px 12px;
    border-radius: 8px;
    color: white; /* Default, will be changed by JS */
    box-shadow: none;
    display: flex; /* Use flex to center content within the box */
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box; /* Add this */
    /* Random rotation will be applied via transform */
}

/* Message Archive Page Styles */
.messages-section {
    padding: 40px 20px;
}

#message-archive-container {
    margin-top: 40px;
    display: grid;
    gap: 20px;
}

.message-item {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.message-name {
    font-weight: bold;
    color: #1F2937;
}

.message-timestamp {
    font-size: 0.8em;
    color: #6b7280;
}

.message-text {
    color: #374151;
    line-height: 1.6;
}
/* Message Box Content Styles */
.message-box-name {
    font-size: 0.75em;
    font-weight: bold;
    opacity: 0.8;
    margin-bottom: 5px;
}

.message-box-text {
    font-size: 0.9em;
    word-wrap: break-word; /* Break long words */
    /* Multi-line truncation */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    overflow: hidden;
}

#message-form #name-input {
    flex-grow: 0.3;
}

/* Message Box Shape Variations */

/* 2. Ellipse Shape */
.shape-ellipse {
    border-radius: 999px;
    padding: 15px 15px;
}

.shape-ellipse:hover,
.shape-ellipse.is-expanded { /* Added for mobile tap */
    border-radius: 15px; /* Reduce rounding when expanded */
}

/* 3. Ticket Shape */
.shape-ticket {
    position: relative;
}
.shape-ticket::before,
.shape-ticket::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--bg, #f0f2f5); /* Use page background to 'cut out' */
    border-radius: 50%;
}
.shape-ticket::before {
    left: -10px;
}
.shape-ticket::after {
    right: -10px;
}

/* 4. Quote Shape */
.shape-quote {
    position: relative;
    padding-top: 25px;
}
.shape-quote::before {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 3em;
    font-family: Georgia, serif;
    opacity: 0.2;
    line-height: 1;
}
@keyframes pulseFontWeight {
    0% { font-weight: 100; }
    50% { font-weight: 900; }
    100% { font-weight: 100; }
}

.message-input-section .container > p {
    position: relative;
    z-index: 2;
}


/* 5. Pinking Shears Shape */
.shape-pinking {
    clip-path: polygon(
        0% 10%, 5% 0%, 10% 10%, 15% 0%, 20% 10%, 25% 0%, 30% 10%, 35% 0%, 40% 10%, 45% 0%, 50% 10%, 55% 0%, 60% 10%, 65% 0%, 70% 10%, 75% 0%, 80% 10%, 85% 0%, 90% 10%, 95% 0%, 100% 10%,
        100% 90%, 95% 100%, 90% 90%, 85% 100%, 80% 90%, 75% 100%, 70% 90%, 65% 100%, 60% 90%, 55% 100%, 50% 90%, 45% 100%, 40% 90%, 35% 100%, 30% 90%, 25% 100%, 20% 90%, 15% 100%, 10% 90%, 5% 100%, 0% 90%
    );
    padding: 20px 15px; /* Add more padding to avoid text getting clipped */
}

/* 6. Corner Punched Ticket Shape */
.shape-punched-ticket {
    clip-path: polygon(
        0% 20px, 5px 10px, 10px 5px, 20px 0%, /* Top-Left Punch Approximation */
        calc(100% - 20px) 0%, calc(100% - 10px) 5px, calc(100% - 5px) 10px, 100% 20px, /* Top-Right Punch Approximation */
        100% calc(100% - 20px), calc(100% - 5px) calc(100% - 10px), calc(100% - 10px) calc(100% - 5px), calc(100% - 20px) 100%, /* Bottom-Right Punch Approximation */
        20px 100%, 10px calc(100% - 5px), 5px calc(100% - 10px), 0% calc(100% - 20px) /* Bottom-Left Punch Approximation */
    );
    padding: 20px 25px; /* Adjust padding for the shape */
}


#message-input-section {
    margin-bottom: 150px; /* Increased space before the footer */
}


@media (max-width: 768px) {
    #hero-name-section {
        min-height: 10vh; /* Pull everything further up */
    }



    .message-box {
        padding: 6px 10px; /* Reduce padding */
    }

    .message-box-name {
        font-size: 0.7em;
    }

    .message-box-text {
        font-size: 0.85em;
    }
    
    /* Adjust padding for special shapes on mobile */
    .shape-quote {
        padding-top: 20px;
    }
    .shape-pinking {
        padding: 15px 12px;
    }
    .shape-ellipse {
        padding: 12px 20px;
    }

    #message-input-section {
        margin-top: -100px; /* Pull the section up on mobile */
        margin-bottom: 80px; /* Increased space before footer on mobile */
    }

    #message-form {
        flex-direction: column;
        width: 100%; /* Ensure it takes full width */
    }

    .input-group {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .input-group input[type="text"] {
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
        flex-shrink: 0;        /* Prevent inputs from shrinking below their content size */
        max-width: 100%;       /* Ensure inputs don't exceed their parent's width */
    }

    #name-input {
        width: 30%; /* Take 30% of available space within input-group */
        flex-grow: 1; /* Allow to grow if needed */
        flex-shrink: 1; /* Allow to shrink if needed */
        flex-basis: auto; /* Let content or width dictate initial size */
        box-sizing: border-box;
    }

    #message-input {
        width: 70%; /* Take 70% of available space within input-group */
        flex-grow: 1; /* Allow to grow if needed */
        flex-shrink: 1; /* Allow to shrink if needed */
        flex-basis: auto; /* Let content or width dictate initial size */
        box-sizing: border-box;
    }

    #message-form button {
        margin-top: 10px;
        width: 100%;
        max-width: 200px; /* Limit button width */
    }

    /* Info Tooltip adjustments for mobile */
    .info-tooltip {
      width: auto; /* Allow width to be determined by content and max-width */
      max-width: calc(100vw - 40px); /* Adjust based on viewport width, leaving 20px on each side */
      left: 0;
      right: 0;
      transform: none; /* Reset translateX(-50%) as left/right/margin:auto will handle centering */
      margin-left: auto;
      margin-right: auto; /* This centers the block-level element with a max-width */
      text-align: left; /* Optional: left align text for better readability if it\'s multiline */
    }

    /* Adjust tooltip arrow for mobile */
    .info-tooltip::after {
      left: 50%; /* Center the arrow under the tooltip */
      margin-left: -5px; /* Adjust for half the arrow width */
    }
}

/* Footer Modifications */
.footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    z-index: 100;
}

.main-with-fixed-footer {
    margin-bottom: 72px; /* Adjust based on footer height */
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ai-generated-label-detail {
    display: block;
    font-size: 0.8em;
    color: #888;
    text-align: right;
    margin-top: 15px;
}

/* Info Icon and Tooltip Styles */
.message-prompt {
  position: relative; /* For positioning the info-icon relative to the text */
  display: inline-flex; /* To keep text and icon on the same line and allow vertical alignment */
  align-items: center; /* Vertically align items */
  gap: 5px; /* Space between text and icon */
  text-align: center; /* Center the entire block */
}

.info-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #6b7280; /* Muted grey */
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute; /* Changed from relative */
  top: -30px; /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
}

.info-tooltip {
  visibility: hidden;
  opacity: 0;
  width: 200px; /* Adjust width as needed */
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position above the icon */
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s, visibility 0.3s;
  font-size: 0.8em;
  white-space: normal; /* Allow text to wrap */
}

.info-icon:hover .info-tooltip {
  visibility: visible;
  opacity: 1;
}




/* Message Box Expansion Styles */
.message-box {
    max-height: 50px; /* Default max-height for single line + name */
    overflow: hidden; /* Hide overflow */
    transition: max-height 0.3s ease-out; /* Smooth transition for expansion */
}

.message-box:hover, /* For desktop hover */
.message-box.is-expanded { /* For mobile tap */
    max-height: 200px; /* Or a larger value that accommodates most full messages */
    overflow: auto; /* Show scrollbar if content exceeds max-height */
    white-space: normal; /* Allow text to wrap */
}

.message-box:hover .message-box-text,
.message-box.is-expanded .message-box-text {
    white-space: normal; /* Allow the text to wrap within the expanded container */
    text-overflow: clip; /* Remove ellipsis when expanded */
}