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

:root {
  --bg: #87CEEB;
  --text: #515867;
  --muted: #6b7280;
  --border: #e5e7eb;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'SUIT', Inter, 'Noto Sans KR', sans-serif;
  overflow-y: auto; /* Allow vertical scrolling */
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--text);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  font-family: 'Lexend Giga', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: #1F2937;
}

.nav-links a {
  margin-left: 24px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  opacity: .9;
}

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

.footer {
  padding: 28px 0 44px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}

.asset-tooltip {
    position: fixed;
    top: 50%;
    right: 30px;
    transform: translate(10px, -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;
}

#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-variation-settings: 'wght' 100; /* Start with thin */
  transition: font-variation-settings 0.1s ease-out, font-size 0.1s ease-out, transform 0.1s ease-out;
  will-change: transform, font-size, font-variation-settings;
  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-count: 5;
  column-gap: 40px;
  padding: 5vh 5vw;
  max-width: 1600px;
  margin: 0 auto;
}

/* Asset Frame Unified Style */
.asset-frame {
  position: relative;
  display: inline-block; /* Allow items to flow in columns */
  width: 100%; /* Fill the column width */
  margin-bottom: 40px; /* Vertical gap between items */
  break-inside: avoid; /* Prevent items from breaking across columns */
  background: white;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 0 0 10px rgba(255,255,255,0.6) inset;
  border: 1px solid #1F2937;
  overflow: hidden;
  border-radius: 16px; /* 둥근 모서리 통일 */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

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

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

.asset-frame img,
.asset-frame canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Sticker Base Style (positioned by JS) */
.asset-sticker {
    position: absolute;
    z-index: 20; /* 액자들 위에 확실히 뜨도록 z-index 높임 */
    transition: transform 0.3s ease;
    transform: rotate(var(--random-rotation, 0deg)); /* 초기 랜덤 회전 적용 */
    background: none; /* PNG 스티커 투명화 */
    box-shadow: none; /* PNG 스티커 그림자 제거 */
}

.asset-sticker img,
.asset-sticker canvas {
    width: 100%;
    height: 100%;
}

.asset-sticker:hover {
    transform: rotate(var(--random-rotation, 0deg)) scale(1.1); /* 호버 시 크기 확대 */
}

/* Rive Sticker Specific Style */
.rive-sticker {
    width: 100px; /* 크기 훨씬 줄임 */
    height: 100px; /* 크기 훨씬 줄임 */
    border-radius: 50%; /* 원형 */
    overflow: hidden;
    background-color: white; /* 흰색 배경 */
    border: 1px solid #1F2937; /* Copied from .asset-frame */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 0 0 10px rgba(255,255,255,0.6) inset; /* Copied from .asset-frame */
    display: flex; /* 가운데 정렬 */
    justify-content: center; /* 가운데 정렬 */
    align-items: center; /* 가운데 정렬 */
}

.rive-sticker canvas {
    object-fit: cover; /* Rive 왜곡 방지 */
}

/* Image Sticker Specific Style */
.image-sticker {
    width: 100px; /* Adjusted size for consistency */
    height: 100px; /* Adjusted size for consistency */
    border-radius: 50%; /* Make it a circle */
    overflow: hidden;
    background-color: white;
    border: 1px solid #1F2937; /* Add border */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 0 0 10px rgba(255,255,255,0.6) inset; /* Add shadow */
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-sticker img {
    object-fit: contain; /* Keep image contained within the circle */
    width: 80%; /* Add some padding around the image inside the circle */
    height: 80%;
}

.image-sticker.rectangular {
    height: 100px; /* Set fixed height */
    width: auto; /* Maintain aspect ratio */
    border-radius: 0; /* No rounded corners */
    /* Override circular styles */
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.image-sticker.rectangular img {
    width: 100%;
    height: 100%;
    /* Override padding from .image-sticker img */
}

/* --- Sparkle Effect --- */
.sparkle {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: sparkle-anim 0.8s ease-out forwards;
}

@keyframes sparkle-anim {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx, 0), var(--ty, 0)) scale(0); opacity: 0; }
}

/* --- Responsive & Other Pages --- */
@media (max-width: 768px) {
  .float-stage {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px; /* Adjust gap for 3 columns on mobile */
  }
  .about-content, .asset-viewer {
    flex-direction: column;
    gap: 40px;
  }
  .about-image {
    flex: 0 0 150px;
    align-self: center;
  }
  .asset-display {
    position: static;
  }
  .rive-sticker {
    width: 60px;
    height: 60px;
  }
  .image-sticker {
    width: 60px;
    height: 60px;
  }
  .image-sticker.rectangular {
    height: 60px;
    width: auto;
  }
  .asset-sticker[href="/projects/foodillust.html"] {
    width: 70px;
    height: 70px;
  }

  /* 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 */
  #skills-section .skills-list li {
    font-size: 0.9rem;
    padding: 10px 20px;
    border-radius: 20px;
  }

  /* About Page Skills Mobile */
  #skills-section .skills-list li {
    font-size: 0.9rem;
    padding: 10px 20px;
    border-radius: 20px; /* Also reduce border-radius on mobile */
  }

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

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

.about-content, .asset-viewer {
  display: flex; /* Keep flex for now, but change direction */
  flex-direction: column; /* Stack profile-header and about-text */
  gap: 20px; /* Adjust gap between stacked sections */
  /* align-items will be handled by profile-header */
}

.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;
}

.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, .asset-info h1 {
  margin-top: 0;
  font-size: 28px;
}

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

.skills-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skills-list li {
  background: var(--bg);
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
}

/* --- Dark Skills Section (About Page) --- */
#skills-section {
  /* Reduced top padding to narrow the gap */
  padding: 20px 0 100px;
}

#skills-section h4 {
  font-family: 'Lexend Giga', sans-serif;
  font-weight: 700;
  color: #1F2937;
  text-align: left; /* Aligned to the left */
  font-size: 2rem;
  margin-bottom: 20px; /* Reduced margin */
}

#skills-section .skills-list {
  justify-content: flex-start; /* Align items to the left */
}

#skills-section .skills-list li {
  background: #111; /* Black background for skill tags */
  border-color: #111; /* Match border to background */
  color: #ffffff;
  font-family: 'Lexend Giga', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 15px 30px;
  border-radius: 30px; /* Increased border-radius */
}

/* --- Yida Asset Blur --- */
img[src="/assets/yida_asset_3.png"],
img[src="/assets/yida_asset_4.png"],
img[src="/assets/yida_asset_5.png"] {
  filter: blur(8px);
}

.horizontal-bar-container {
    background: white;
    border: 1px solid #1F2937;
    height: 30px; /* Reduced thickness */
    display: flex;
    align-items: center;
    overflow: hidden;
    margin: 20px 0;
    position: relative;
}

.horizontal-bar-text {
    font-family: 'Lexend Giga', sans-serif;
    font-weight: 100;
    color: black;
    text-transform: uppercase; /* Uppercase text */
    font-size: 2rem;
    white-space: nowrap;
    position: absolute;
    animation: scrollText 30s linear infinite;
    padding-left: 100%;
}

@keyframes scrollText {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

.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;
}

.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;
    align-items: center;
    margin-top: -50px; /* Adjusted for overlap */
    margin-bottom: 50px;
    perspective: 1000px;
}

.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 */
}

.keung-drafts-images {
    display: flex;
    justify-content: center; /* Center images horizontally */
    gap: 20px; /* Space between images */
    margin-bottom: 20px; /* Space between images and description */
}

.keung-drafts-images > div {
    flex: 1; /* Allow images to take equal space */
    max-width: 400px; /* Limit max width for larger screens */
}

.keung-drafts-images img {
    width: 100%;
    height: auto;
    display: block;
    /* Re-use project-detail-image styling for border/shadow if desired, or define new */
    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;
}

.keung-drafts-description {
    font-size: 1.2em;
    color: var(--text);
    line-height: 1.5;
}

/* 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;
}

#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;
}

/* 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; /* Added */
    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; /* Added */
    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: 'Lexend Giga', 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 */
}

/* Keung For Section */
.keung-for-section {
    display: flex;
    justify-content: center;
    gap: 40px; /* Space between character items */
    margin-top: 80px;
    margin-bottom: 80px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    perspective: 1000px; /* Add perspective for 3D transforms */
}

.keung-character-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center image and text horizontally */
    text-align: center; /* Center text */
    width: 45%; /* Adjust as needed, or use max-width */
    max-width: 300px; /* Example max width for each character item */
}

.keung-character-item.is-rotated {
    /* Rotation handled by .keung-for-image.is-rotated */
}

.keung-for-image.is-rotated {
    transform: rotateY(360deg);
    transition: transform 1s ease-out; /* Smooth rotation */
}

.keung-character-item .keung-for-image {
    width: 100%; /* Make image fill its container */
    height: auto;
    margin-bottom: 15px; /* Space between image and text */
    transition: transform 0.3s ease; /* Add transition here */
}

.keung-character-item .keung-for-image:hover {
    transform: scale(1.05);
}

.keung-character-item .character-details {
    text-align: center; /* Center the text within details */
}

.keung-character-item .character-name {
    font-size: 1.5em;
    font-weight: bold;
    margin: 10px 0 5px;
}

.keung-character-item .character-motive,
.keung-character-item .character-description {
    font-size: 0.9em;
    color: var(--muted);
    margin: 5px 0;
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
    .keung-for-section {
        flex-direction: column;
        gap: 40px;
    }
    .keung-character-item {
        width: 80%;
        max-width: none; /* Remove max-width on mobile */
    }
}

@media screen and (max-width: 480px) {
    .keung-character-item {
        width: 95%;
    }
}

.magnifier {
  position: absolute;
  border: 2px solid black; /* 검은 테두리 */
  border-radius: 50%; /* 원형 돋보기 */
  cursor: none; /* 마우스 커서 숨기기 */
  width: 150px; /* 돋보기 크기 */
  height: 150px; /* 돋보기 크기 */
  transform: translate(-50%, -50%); /* 마우스 중앙에 위치 */
  pointer-events: none; /* 돋보기 아래 요소 클릭 가능하게 */
  overflow: hidden; /* 확대된 내용이 돋보기 밖으로 나가지 않도록 */
  display: none; /* 초기에는 숨김 */
  background-color: white; /* 돋보기 배경색을 흰색으로 설정하여 뒤가 비치지 않도록 */
}

.magnifier .magnified-content {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0; /* 확대 기준점을 좌상단으로 설정 */
}




/* Moodseum Page Styles */
.moodseum-banner {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.moodseum-description {
    text-align: center;
    margin: 40px auto;
    max-width: 800px;
    padding: 0 20px;
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text);
}

.moodseum-prototype-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.moodseum-prototype-image {
    width: 30%;
    max-width: 300px;
    height: auto;
    border: 1px solid #1F2937;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.moodseum-character-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.moodseum-character-card {
    width: 200px;
    text-align: center;
}

.moodseum-character-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid #1F2937;
}

.moodseum-character-card h3 {
    margin-top: 10px;
    font-size: 1.2em;
}

.moodseum-goods-section {
    text-align: center;
    margin-bottom: 40px;
}

.moodseum-goods-section h2 {
    margin-bottom: 20px;
}

.moodseum-goods-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.moodseum-goods-image {
    width: 45%;
    max-width: 400px;
    height: auto;
    border: 1px solid #1F2937;
    border-radius: 10px;
}

/* Kalguksu Page Styles */
.kalguksu-banner {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.kalguksu-description {
    text-align: center;
    margin: 40px auto;
    max-width: 800px;
    padding: 0 20px;
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text);
}

.kalguksu-menu-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.kalguksu-menu-item {
    width: 30%;
    max-width: 300px;
    text-align: center;
}

.kalguksu-menu-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid #1F2937;
}

.kalguksu-menu-item h3 {
    margin-top: 10px;
    font-size: 1.2em;
}

.kalguksu-poster-section {
    text-align: center;
    margin-bottom: 40px;
}

.kalguksu-poster-section h2 {
    margin-bottom: 20px;
}

.kalguksu-poster-image {
    width: 80%;
    max-width: 600px;
    height: auto;
    border: 1px solid #1F2937;
    border-radius: 10px;
}

.kalguksu-photo-section {
    text-align: center;
    margin-bottom: 40px;
}

.kalguksu-photo-section h2 {
    margin-bottom: 20px;
}

.kalguksu-photo-image {
    width: 80%;
    max-width: 800px;
    height: auto;
    border: 1px solid #1F2937;
    border-radius: 10px;
}

/* Yida Page Styles */
.yida-banner {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.yida-description {
    text-align: center;
    margin: 40px auto;
    max-width: 800px;
    padding: 0 20px;
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text);
}

.yida-chakgado-section {
    text-align: center;
    margin-bottom: 40px;
}

.yida-chakgado-image {
    width: 80%;
    max-width: 800px;
    height: auto;
    border: 1px solid #1F2937;
    border-radius: 10px;
}

.yida-chakgeori-section {
    text-align: center;
    margin-bottom: 40px;
}

.yida-chakgeori-image {
    width: 80%;
    max-width: 800px;
    height: auto;
    border: 1px solid #1F2937;
    border-radius: 10px;
}

.yida-goods-section {
    text-align: center;
    margin-bottom: 40px;
}

.yida-goods-section h2 {
    margin-bottom: 20px;
}

.yida-goods-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.yida-goods-image {
    width: 30%;
    max-width: 300px;
    height: auto;
    border: 1px solid #1F2937;
    border-radius: 10px;
}
.lead {
  font-family: 'Lexend Giga', sans-serif;
  font-weight: 700;
  color: #1F2937;
  margin-top: 0;
  font-size: 1.5em; /* Increased size */
  line-height: 1.6; /* Increased line height */
}
/* --- Profile Image Flip Card --- */
.about-image {
  flex: 0 0 200px;
  height: 200px; /* Set fixed height */
  perspective: 1000px; /* Add perspective for 3D */
}

.profile-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.about-image:hover .profile-flipper {
  transform: rotateY(180deg);
}

.profile-front,
.profile-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #1F2937;
}

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

.profile-front img,
.profile-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Remove border from the old img rule to avoid conflicts */
.about-image img {
  border: none;
}

.about-description {
  color: #000000;
  font-size: 1.2em;
  line-height: 1.8;
  font-weight: 700;
}