/* style.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Pretendard, sans-serif;
  background: #f8f6f2;
  color: #1c1c1c;
  line-height: 1.6;
}



/* common */
img {
  width: 100%;
  height: auto;
  /* 높이가 자동 조절되도록 수정 */
  object-fit: cover;
  /* 그리드 박스 안에서 이미지가 예쁘게 채워지도록 처리 */
  display: block;
}

section {
  padding: 100px 80px;
}

.section-title {
  text-align: center;
  margin-bottom: 80px;
}

.section-title span {
  font-size: 13px;
  letter-spacing: 3px;
  color: #999;
}

.section-title h2 {
  font-size: 48px;
  margin-top: 14px;
  font-weight: 700;
}



/* header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 80px;

  /* 🌫️ Frosted-glass separation */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Crisp boundary from sections below */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  z-index: 1000;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  max-height: 55px; /* slightly increased from 50px for balance, adjust if needed */
  width: auto;
  object-fit: contain;
  transform: scale(1.8);
  transform-origin: left center;
  position: relative;
  z-index: 100;
}

.nav {
  display: flex;
  gap: 48px;
}

.nav a {
  text-decoration: none;
  color: #111;
  font-size: 17px;
  font-weight: 600;
  position: relative;          /* underline pseudo-element anchor */
  padding-bottom: 6px;         /* space for the underline bar */
  transition: color 0.3s ease;
}

/* Animated underline — expands from left on hover */
.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3C2A21;
  transition: width 0.3s ease;
}

.nav a:hover {
  color: #3C2A21;
}

.nav a:hover::after {
  width: 100%;
}



/* hero */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;

  padding-top: 120px;
}

.hero-text {
  flex: 1;
}

.hero-label {
  font-size: 13px;
  letter-spacing: 3px;
  color: #999;
}

.hero-text h1 {
  font-size: 42px;
  line-height: 1.4;
  margin: 20px 0;
  word-break: keep-all;
  white-space: nowrap; /* <br>은 유지하면서 자동 줄바꿈만 차단 → 마침표 분리 방지 */
}

.hero-text p {
  font-size: 16px;
  color: #666;
  margin-bottom: 36px;
  line-height: 1.75;
  word-break: keep-all;
}



.hero-buttons {
  display: flex;
  gap: 16px;
}

.btn-dark,
.btn-light {
  padding: 18px 32px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.3s ease-in-out;
}

.btn-dark {
  background: #ffffff;
  color: #000000;
  border: 1px solid #e0e0e0;
}

.btn-light {
  background: #ffffff;
  border: 1px solid #ddd;
  color: #000000;
}

.hero-image {
  flex: 1;
  position: relative; /* stacking context for crossfade layers */
  transform: translateX(-120px);
}

/* ── Shared image layer styles ── */
.hero-image .hero-img-default,
.hero-image .hero-img-hover {
  max-width: 460px;
  margin: 0 auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  display: block;
}

/* Default layer: floats gently, fully visible */
.hero-image .hero-img-default {
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  animation: softFloat 4s ease-in-out infinite;
}

/* Hover layer: stacked on top, invisible until hover */
.hero-image .hero-img-hover {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  animation: softFloat 4s ease-in-out infinite;
  pointer-events: none; /* let hover events pass through to the container */
}

/* Crossfade on hover or touch (active state) */
.hero-image:hover .hero-img-default,
.hero-image:focus-within .hero-img-default {
  opacity: 0;
}

.hero-image:hover .hero-img-hover,
.hero-image:focus-within .hero-img-hover {
  opacity: 1;
}



/* story */
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.story-card {
  background: white;
  padding: 42px;
  border-radius: 30px;
}

.story-card h3 {
  font-size: 28px;
  margin-bottom: 20px;
}



/* process */
.process {
  background: white;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.timeline-item {
  display: flex;
  gap: 40px;
}

.timeline-number {
  min-width: 100px;
  height: 100px;

  border-radius: 50%;
  background: #111;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 30px;
  font-weight: 700;
}

.timeline-content {
  flex: 1;
}

.timeline-content h3 {
  font-size: 36px;
  margin-bottom: 18px;
}

.prompt-box {
  margin-top: 24px;
  background: #f5f5f5;
  padding: 24px;
  border-radius: 20px;
  color: #555;
}



/* portfolio */
.portfolio-heading {
  margin-bottom: 36px;
}

.portfolio-heading h3 {
  font-size: 34px;
}

.portfolio-heading p {
  color: #777;
}

.portfolio-top {
  margin-bottom: 90px;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 40px auto 0;
  width: 100%;
}

.emoji-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  padding: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.emoji-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.pose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 40px auto 0;
  width: 100%;
}

.pose-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes floatCute {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(3deg);
  }
}

.pose-card img {
  width: 100%;
  height: auto;
  max-width: 220px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  animation: floatCute 2.2s ease-in-out infinite;
}

.pose-card:nth-child(1) img { animation-delay: 0s; }
.pose-card:nth-child(2) img { animation-delay: 0.4s; }
.pose-card:nth-child(3) img { animation-delay: 0.8s; }
.pose-card:nth-child(4) img { animation-delay: 1.2s; }
.pose-card:nth-child(5) img { animation-delay: 1.6s; }
.pose-card:nth-child(6) img { animation-delay: 2.0s; }
.pose-card:nth-child(7) img { animation-delay: 2.4s; }
.pose-card:nth-child(8) img { animation-delay: 2.8s; }



/* goods */
.goods {
  background: white;
}

.goods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.goods-card {
  background: #f8f6f2;
  padding: 16px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.goods-card h3 {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  padding-left: 4px;
}



/* copyright */
.copyright-box {
  background: #111;
  color: white;

  padding: 60px;
  border-radius: 40px;
  text-align: center;
}

.copyright-box h3 {
  font-size: 42px;
  margin-bottom: 24px;
}

.copyright-box p {
  color: #ccc;
  margin-bottom: 20px;
}

.copyright-box span {
  color: #ffbebe;
}



/* footer */
.footer {
  padding: 40px;
  text-align: center;
  border-top: 1px solid #ddd;
}

.footer p {
  color: #777;
}



/* hamburger navigation base styles */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

.hamburger-btn span {
  width: 100%;
  height: 2px;
  background-color: #111;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.hamburger-btn.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* =================================*********
   포카 캐릭터들을 위한 귀여운 인터랙션 효과 
============================================ */

/* 1. 메인 히어로 캐릭터: 마우스를 올리면 위로 슬며시 부드럽게 떠오름 */
.hero-image img {
  transition: transform 0.4s ease-in-out;
  /* 부드러운 움직임 시간 설정 */
}

.hero-image img:hover {
  transform: translateY(-15px);
  /* 위로 15픽셀 둥실 떠오름 */
}


/* 2. 이모티콘 & 포즈 카드: 마우스를 올리면 뿅! 하고 통통 튀는 효과 */
.emoji-card,
.pose-card {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.emoji-card:hover,
.pose-card:hover {
  transform: translateY(-10px) scale(1.05);
  /* 위로 가면서 살짝 커짐 (통통 튀는 느낌) */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  /* 밑에 부드러운 그림자 생성 */
  cursor: pointer;
}


/* 3. 굿즈 목업 카드: 슬며시 다가오는 듯한 고급스러운 확대 효과 */
.goods-card {
  overflow: hidden;
  /* 이미지가 박스 바깥으로 삐져나가지 않도록 커팅 */
}

.goods-card img {
  width: 100%;
  aspect-ratio: 1 / 1.1; /* Standard vertical rectangle ratio */
  object-fit: cover;
  object-position: center;
  border-radius: 12px; /* Inner rounding to match card */
  transition: transform 0.5s ease;
  display: block;
}

.goods-card:hover img {
  transform: scale(1.08);
  /* 마우스를 올리면 박스 안의 굿즈 사진만 확대됨 */
}

.goods-card {
  transition: box-shadow 0.3s ease;
}

.goods-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

/* Consolidated emoji and pose layouts */


/* =================================*********
     🧸 POKA Official Profile Section (CSS 분리 버전)
============================================ --> */

/* 전체 섹션 배경 및 레이아웃 */
.poka-profile-section {
  background-color: #f8f6f2;
  width: 100%;
  box-sizing: border-box;
}

.poka-profile-section .poka-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* 상단 타이틀 구역 */
.poka-profile-section .poka-title-area {
  text-align: center;
  margin-bottom: 80px;
}

.poka-profile-section .poka-subtitle {
  font-size: 13px;
  letter-spacing: 3px;
  color: #999;
}

.poka-profile-section .poka-main-title {
  font-size: 48px;
  margin-top: 14px;
  font-weight: 700;
}

/* 메인 콘텐츠 2단 레이아웃 (3단에서 2단 배열로 최적화) */
.poka-profile-section .profile-flex-container {
  display: flex;
  gap: 35px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

/* 🎨 [기본 정보 카드 내부] 상단 포카 이미지 구역 설정 */
.poka-profile-section .poka-top-char-visual {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 25px;
  /* 기본 정보 타이틀과의 간격 */
  margin-bottom: 15px;
  border-bottom: 1px dashed #f0eae4;
  /* 이미지와 텍스트 구분을 위한 은은한 점선 */
}

.poka-profile-section .poka-top-char-visual img {
  width: 100%;
  height: auto;
  max-width: 200px;
  /* 기본 정보 카드 크기에 맞춰 알맞게 조정 */
  object-fit: contain;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.04));
  image-rendering: -webkit-optimize-contrast;
}

/* 📝 [왼쪽] 1. 기본 정보 카드 (포카 포함) */
.poka-profile-section .poka-info-card {
  flex: 1.2;
  min-width: 340px;
  background: #ffffff;
  padding: 45px 40px;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(139, 94, 60, 0.03);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 공통 카드 타이틀 숫자 배지 스타일 */
.poka-profile-section .badge-num {
  font-size: 15px;
  width: 24px;
  height: 24px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

/* 📝 [가운데] 1. 기본 정보 카드 */
.poka-profile-section .poka-info-card {
  flex: 1.3;
  min-width: 340px;
  background: #ffffff;
  padding: 45px 40px;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(139, 94, 60, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.poka-profile-section .poka-info-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 30px;
  color: #222;
  display: flex;
  align-items: center;
  gap: 10px;
}

.poka-profile-section .poka-info-card h3 .badge-num {
  color: #8b5e3c;
  background: #f0eae4;
  font-size: 16px;
  width: 26px;
  height: 26px;
}

.poka-profile-section .poka-info-table {
  width: 100%;
  border-collapse: collapse;
}

.poka-profile-section .poka-info-table tr {
  border-bottom: 1px solid #f5efe9;
}

.poka-profile-section .poka-info-table tr:last-child {
  border-bottom: none;
}

.poka-profile-section .poka-info-table th {
  padding: 20px 10px;
  text-align: left;
  width: 28%;
  font-weight: 700;
  color: #8b5e3c;
  font-size: 15px;
}

.poka-profile-section .poka-info-table td {
  padding: 20px 10px;
  color: #333;
  font-size: 14.5px;
  line-height: 1.6;
}

.poka-profile-section .poka-info-table td .birth-sub {
  font-size: 12.5px;
  color: #999;
  margin-left: 4px;
}

/* 📜 [오른쪽] 2. 세계관 & 3. 취향 노트 그룹 컨테이너 */
.poka-profile-section .poka-right-group {
  flex: 1.3;
  min-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-sizing: border-box;
}

/* 2. 정체성 & 세계관 상자 (크림색 배경) */
.poka-profile-section .poka-story-card {
  background: #fff9ee;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid #f5eacf;
  box-shadow: 0 6px 20px rgba(245, 234, 207, 0.15);
  box-sizing: border-box;
}

.poka-profile-section .poka-story-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 18px;
  color: #8b5e3c;
  display: flex;
  align-items: center;
  gap: 10px;
}

.poka-profile-section .poka-story-card h3 .badge-num {
  color: #fff;
  background: #8b5e3c;
}

.poka-profile-section .poka-story-quote {
  margin: 0 0 16px 0;
  font-size: 15px;
  font-weight: 700;
  color: #c47d4b;
  line-height: 1.5;
}

.poka-profile-section .poka-story-card p {
  margin: 0;
  font-size: 14px;
  color: #555;
  line-height: 1.65;
  text-align: justify;
}

/* 3. 취향 노트 상자 */
.poka-profile-section .poka-taste-card {
  background: #ffffff;
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(139, 94, 60, 0.03);
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.poka-profile-section .poka-taste-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 24px;
  color: #222;
  display: flex;
  align-items: center;
  gap: 10px;
}

.poka-profile-section .poka-taste-card h3 .badge-num {
  color: #333;
  background: #e8e3dc;
}

/* instagram cta */
.instagram-cta {
  text-align: center;
  background-color: #FAF9F6;
  margin: 0;
}

.instagram-cta h2 {
  font-size: 32px;
  margin-bottom: 16px;
  color: #1c1c1c;
  font-weight: 700;
}

.instagram-cta p {
  font-size: 16px;
  color: #555;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  word-break: keep-all;
}

.instagram-cta .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #F8F4EE; /* bright warm beige */
  color: #4A3525; /* deep chocolate brown */
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.instagram-cta .cta-btn i {
  background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.4rem;
}

.instagram-cta .cta-btn:hover {
  background-color: #f1ebd8;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .instagram-cta h2 {
    font-size: 24px;
  }
  .instagram-cta p {
    font-size: 14px;
  }
  .instagram-cta .cta-btn {
    font-size: 15px;
    padding: 14px 28px;
  }
}

.poka-profile-section .taste-flex-wrap {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.poka-profile-section .taste-sub-box {
  flex: 1;
  min-width: 220px;
  background: #faf8f5;
  padding: 22px;
  border-radius: 18px;
  box-sizing: border-box;
}

.poka-profile-section .taste-sub-box h4 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.poka-profile-section .taste-sub-box h4.like-title {
  color: #d9534f;
}

.poka-profile-section .taste-sub-box h4.hate-title {
  color: #5bc0de;
}

.poka-profile-section .taste-sub-box ul {
  padding-left: 16px;
  margin: 0;
  font-size: 13.5px;
  color: #555;
  line-height: 1.65;
}

.poka-profile-section .taste-sub-box ul li {
  margin-bottom: 10px;
}

.poka-profile-section .taste-sub-box ul li:last-child {
  margin-bottom: 0;
}

.poka-profile-section .taste-sub-box ul li span {
  font-size: 11.5px;
  color: #999;
  display: block;
  margin-top: 2px;
}

/* =================================*********
   📱 RESPONSIVE MEDIA QUERIES (Systematic block)
============================================ */

/* 1. Tablet View (768px - 1023px) */
@media (max-width: 1024px) {
  section {
    padding: 100px 32px;
  }

  .header {
    padding: 0 32px;
  }

  .hero {
    padding-top: 140px;
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 56px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-image {
    order: -1;
  }

  .story-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .emoji-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pose-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .goods-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .profile-flex-container {
    flex-direction: column;
    align-items: center;
  }

  .poka-profile-section .poka-info-card, 
  .poka-profile-section .poka-right-group {
    width: 100%;
    min-width: 100% !important;
  }
}

/* 2. Mobile View (767px and below) */
@media (max-width: 767px) {
  section {
    padding: 60px 20px;
  }

  .header {
    padding: 14px 20px;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .logo {
    font-size: 20px;
    margin-bottom: 4px;
  }

  /* Hamburger Menu Toggle */
  .hamburger-btn {
    display: flex;
  }

  .nav {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: rgba(248, 246, 242, 0.96);
    backdrop-filter: blur(15px);
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  }

  .nav.active {
    display: flex;
    max-height: 300px;
    opacity: 1;
    pointer-events: auto;
  }

  .nav a {
    width: 100%;
    text-align: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 15px;
    font-weight: 600;
  }

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

  /* Hero Section */
  .hero {
    padding-top: 100px;
    min-height: auto;
    gap: 30px;
  }

  .hero-text h1 {
    font-size: 38px;
    line-height: 1.25;
    margin: 16px 0;
  }

  .hero-text p {
    font-size: 15px;
    margin-bottom: 24px;
    word-break: keep-all;
  }

  .hero-buttons {
    flex-direction: row;
    gap: 12px;
  }

  .btn-dark, .btn-light {
    flex: 1;
    padding: 0 16px;
    height: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
  }

  .hero-image img {
    max-width: 280px;
  }

  /* Brand Story */
  .section-title {
    margin-bottom: 40px;
  }

  .section-title h2 {
    font-size: 26px;
    margin-top: 8px;
    line-height: 1.3;
    word-break: keep-all;
  }

  .story-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .story-card {
    padding: 24px;
    border-radius: 20px;
  }

  .story-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .story-card p {
    font-size: 14px;
  }

  /* Profile Section */
  .poka-profile-section {
  }

  .poka-profile-section .poka-title-area {
    margin-bottom: 40px;
  }

  .poka-profile-section .poka-main-title {
    font-size: 24px;
  }

  .poka-profile-section .poka-info-card {
    padding: 30px 20px !important;
    border-radius: 20px;
  }

  .poka-profile-section .poka-info-card h3 {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .poka-profile-section .poka-info-table th,
  .poka-profile-section .poka-info-table td {
    padding: 12px 4px;
    font-size: 13.5px;
  }

  .poka-profile-section .poka-info-table th {
    width: 25%;
    font-size: 13.5px;
  }

  .poka-profile-section .poka-story-card {
    padding: 30px 20px !important;
    border-radius: 20px;
  }

  .poka-profile-section .poka-story-card h3 {
    font-size: 18px;
    margin-bottom: 14px;
  }

  .poka-profile-section .poka-story-quote {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .poka-profile-section .poka-story-card p {
    font-size: 13px;
  }

  .poka-profile-section .poka-taste-card {
    padding: 30px 20px !important;
    border-radius: 20px;
  }

  .poka-profile-section .poka-taste-card h3 {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .poka-profile-section .taste-flex-wrap {
    flex-direction: column;
    gap: 12px;
  }

  .poka-profile-section .taste-sub-box {
    padding: 16px;
    border-radius: 14px;
  }

  .poka-profile-section .taste-sub-box h4 {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .poka-profile-section .taste-sub-box ul {
    font-size: 12.5px;
  }

  /* Process Timeline */
  .timeline {
    gap: 30px;
  }

  .timeline-item {
    gap: 16px;
  }

  .timeline-number {
    width: 60px;
    height: 60px;
    min-width: 60px;
    max-width: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 18px;
  }

  .timeline-content h3 {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .timeline-content p {
    font-size: 14px;
  }

  .prompt-box {
    padding: 16px;
    margin-top: 12px;
    font-size: 13px;
    border-radius: 14px;
    word-break: keep-all;
  }

  /* Showcase (Emoticons & Poses) - Reconfigured to 2 Columns */
  .portfolio-top {
    margin-bottom: 50px;
  }

  .portfolio-heading h3 {
    font-size: 22px;
  }

  .portfolio-heading p {
    font-size: 13px;
  }

  .emoji-grid, .pose-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 20px;
  }

  .emoji-card, .pose-card {
    padding: 12px !important;
    border-radius: 16px;
  }

  .pose-card img {
    max-width: 100%;
  }

  /* Goods Mockup - Reconfigured to 1 Column Stacked */
  .goods-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .goods-card {
    padding: 16px !important;
    border-radius: 20px;
  }

  .goods-card h3 {
    font-size: 18px;
    margin-top: 12px;
  }

  /* Copyright & Footer */
  .copyright-box {
    padding: 36px 20px;
    border-radius: 24px;
  }

  .copyright-box h3 {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .copyright-box p {
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .copyright-box span {
    font-size: 12.5px;
  }

  .footer {
    padding: 24px 16px;
  }

  .footer p {
    font-size: 12px;
  }
}

/* ==========================================
   Mobile Responsive Styles (767px and below)
   ========================================== */
@media (max-width: 767px) {
  /* 1. Header & Navigation Emergency Fix */
  .header {
    flex-direction: column !important;
    padding: 15px 20px !important;
    text-align: center;
  }
  .logo {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }
  .nav {
    display: flex;
    justify-content: center;
    gap: 15px !important;
  }
  .nav a {
    font-size: 14px !important;
  }

  /* 2. Hero Section Mobile Layout */
  .hero {
    flex-direction: column !important;
    padding: 40px 20px !important;
    text-align: center;
  }
  .hero-text h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }

  /* 3. Timeline Circle Fix (No Distortion) */
  .timeline-number,
  .history-circle,
  [class*="circle"] {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 4. Global Container Padding */
  section, .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* --- POKA Emotional Floating Animation --- */
@keyframes softFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}

.hero {
  background: radial-gradient(circle at right, rgba(245,239,230,0.6) 0%, rgba(249,248,246,1) 60%) !important;
}

.btn-dark:hover,
.btn-light:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* =============================================
   🔤 Hero Title: Letter-by-Letter Pop Animation
   ============================================= */

@keyframes fadeInUpPop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.1); }
  80%  { transform: translateY(1px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-title-animated span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  animation: fadeInUpPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* — 1행: 17 spans — */
.hero-title-animated span:nth-child(1)  { animation-delay: 0.08s; }
.hero-title-animated span:nth-child(2)  { animation-delay: 0.16s; }
.hero-title-animated span:nth-child(3)  { animation-delay: 0.24s; }
.hero-title-animated span:nth-child(4)  { animation-delay: 0.32s; }
.hero-title-animated span:nth-child(5)  { animation-delay: 0.40s; }
.hero-title-animated span:nth-child(6)  { animation-delay: 0.48s; }
.hero-title-animated span:nth-child(7)  { animation-delay: 0.56s; }
.hero-title-animated span:nth-child(8)  { animation-delay: 0.64s; }
.hero-title-animated span:nth-child(9)  { animation-delay: 0.72s; }
.hero-title-animated span:nth-child(10) { animation-delay: 0.80s; }
.hero-title-animated span:nth-child(11) { animation-delay: 0.88s; }
.hero-title-animated span:nth-child(12) { animation-delay: 0.96s; }
.hero-title-animated span:nth-child(13) { animation-delay: 1.04s; }
.hero-title-animated span:nth-child(14) { animation-delay: 1.12s; }
.hero-title-animated span:nth-child(15) { animation-delay: 1.20s; }
.hero-title-animated span:nth-child(16) { animation-delay: 1.28s; }
.hero-title-animated span:nth-child(17) { animation-delay: 1.36s; }
/* — 2행: 20 spans (br 이후, nth-child는 전체 기준 연속) — */
.hero-title-animated span:nth-child(18) { animation-delay: 1.44s; }
.hero-title-animated span:nth-child(19) { animation-delay: 1.52s; }
.hero-title-animated span:nth-child(20) { animation-delay: 1.60s; }
.hero-title-animated span:nth-child(21) { animation-delay: 1.68s; }
.hero-title-animated span:nth-child(22) { animation-delay: 1.76s; }
.hero-title-animated span:nth-child(23) { animation-delay: 1.84s; }
.hero-title-animated span:nth-child(24) { animation-delay: 1.92s; }
.hero-title-animated span:nth-child(25) { animation-delay: 2.00s; }
.hero-title-animated span:nth-child(26) { animation-delay: 2.08s; }
.hero-title-animated span:nth-child(27) { animation-delay: 2.16s; }
.hero-title-animated span:nth-child(28) { animation-delay: 2.24s; }
.hero-title-animated span:nth-child(29) { animation-delay: 2.32s; }
.hero-title-animated span:nth-child(30) { animation-delay: 2.40s; }
.hero-title-animated span:nth-child(31) { animation-delay: 2.48s; }
.hero-title-animated span:nth-child(32) { animation-delay: 2.56s; }
.hero-title-animated span:nth-child(33) { animation-delay: 2.64s; }
.hero-title-animated span:nth-child(34) { animation-delay: 2.72s; }
.hero-title-animated span:nth-child(35) { animation-delay: 2.80s; }
.hero-title-animated span:nth-child(36) { animation-delay: 2.88s; }
.hero-title-animated span:nth-child(37) { animation-delay: 2.96s; }

/* Set smooth transition baseline for the persona cards */
.target-persona .card,
.persona-container .card-item,
.persona-card,
.story-card {
    position: relative;
    border: 1px solid #F5EAE7;
    background-color: var(--card-bg, #ffffff);
    border-radius: 24px;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                border-color 0.4s ease, 
                box-shadow 0.4s ease !important;
    will-change: transform, border-color, box-shadow;
}

/* Hover State: Combine micro-scale lifting with signature brand color borders */
.target-persona .card:hover,
.persona-container .card-item:hover,
.persona-card:hover,
.story-card:hover {
    transform: translateY(-4px) scale(1.03) !important;
    border-color: #7A5C58 !important;
    box-shadow: 0 20px 40px rgba(122, 92, 88, 0.08) !important;
}

/* CSS styling to drive the infinite winking animation loop */
.poka-wink-char {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    transform-origin: bottom center; 
    animation: pokaInfiniteWink 3.5s ease-in-out infinite;
    will-change: transform;
}

/* Keyframes simulating eye squeezing/blinking and gentle body shifts */
@keyframes pokaInfiniteWink {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    20% {
        transform: scale(0.98, 1.02) rotate(-1deg);
    }
    /* 25% to 28% creates the fast visual illusion of squeezing one eye/side dynamically */
    25% {
        transform: scale(1.03, 0.95) rotate(2deg);
    }
    28% {
        transform: scale(0.97, 1.01) rotate(1deg);
    }
    35% {
        transform: scale(1) rotate(0deg);
    }
}

/* Base style for the Poka profile card with organic transition easing */
.profile-card,
.basic-info-section .card,
.poka-info-card {
    position: relative;
    background: #ffffff !important;
    transition: background 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Hover State 1: Smooth warm ambient glow effect */
.profile-card:hover,
.basic-info-section .card:hover,
.poka-info-card:hover {
    background: linear-gradient(135deg, #ffffff 0%, #fff8f0 100%) !important;
    box-shadow: 0 20px 40px rgba(122, 92, 88, 0.05) !important;
}

/* Speech bubble initial hidden state */
.poka-bubble {
    opacity: 0;
    transform: translateY(10px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.5s ease !important;
}

/* Hover State 2: Reveal the speech bubble with a playful bounce */
.profile-card:hover .poka-bubble,
.basic-info-section .card:hover .poka-bubble,
.poka-info-card:hover .poka-bubble {
    opacity: 1;
    transform: translateY(0);
}

/* Set up the 3D space stage on the wrapper grid container */
.about-poka .profile-container,
.about-poka .grid-layout,
.poka-profile-section .profile-flex-container {
    perspective: 1000px !important;
}

/* Base structural setup for the profile cards */
.about-poka .card,
.about-poka .profile-card,
.poka-info-card,
.poka-story-card,
.poka-taste-card {
    position: relative;
    transform-style: preserve-3d !important;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.5s ease, 
                border-color 0.3s ease !important;
    will-change: transform, box-shadow;
    cursor: pointer;
    z-index: 1;
}

/* Active Click State: Explode the card forward through the screen */
.about-poka .card:active,
.about-poka .profile-card:active,
.poka-info-card:active,
.poka-story-card:active,
.poka-taste-card:active {
    z-index: 999 !important; 
    border-color: #7A5C58 !important;
    transform: translateZ(80px) scale(1.15) !important; /* Propel forward on Z-axis */
    box-shadow: 0 40px 80px rgba(122, 92, 88, 0.25), 
                0 20px 40px rgba(0, 0, 0, 0.12) !important; /* Heavy extreme depth shadow */
}

/* Layer the character image to launch even further along the Z-axis */
.about-poka .card:active img,
.about-poka .profile-card:active img,
.poka-info-card:active img,
.poka-story-card:active img,
.poka-taste-card:active img {
    transform: translateZ(30px) scale(1.05) !important;
    transition: transform 0.5s ease;
}


/* =============================================
   AI PROMPT SIMULATOR & CHARACTER BUILD SECTION
   ============================================= */

/* Simulator Section — two-column split layout */
.ai-process-section {
    background: white;
}

.ai-simulator-container {
    display: grid;
    grid-template-columns: 1fr 1.16fr;
    gap: 35px;
    margin-top: 40px;
    align-items: center;
}

/* ── Terminal (Left Panel) ── */
.simulator-terminal {
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}
.terminal-nav {
    background: #2a2a2a;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-dot { width: 10px; height: 10px; border-radius: 50%; }
.nav-dot.red    { background: #ff5f56; }
.nav-dot.yellow { background: #ffbd2e; }
.nav-dot.green  { background: #27c93f; }
.nav-text {
    color: #777;
    font-size: 0.75rem;
    margin-left: 10px;
    font-family: monospace;
}
.terminal-content {
    padding: 24px;
    min-height: 160px;
}
.user-label {
    color: #27c93f;
    font-family: monospace;
    font-weight: bold;
}

/* Pure CSS Typing Effect — activated when section gets .active via IntersectionObserver */
.typing-target {
    color: #f1f1f1;
    font-family: monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    display: inline-block;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #27c93f;
}
.ai-process-section.active .typing-target {
    animation: typingEffect 3.2s steps(50, end) forwards,
               blinkCursor  0.8s step-end infinite;
}

/* ── Construction Stage (Right Panel) ── */
.construction-stage {
    position: relative;
    height: 380px;
    background: #fdfaf7;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #e2dad5;
}
.stage-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(#e2dad5 1px, transparent 1px),
        linear-gradient(90deg, #e2dad5 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Shared layer base */
.poka-build-base {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    opacity: 0;
}

/* Phase 1 — wireframe circle outline */
.build-layer-1 {
    height: 220px;
    border: 2px dashed #7a5c58;
    border-radius: 50%;
}

/* Phase 2 — blurred, grayscale ghost portrait */
.ai-process-section.active .build-layer-2 {
    background-image: url('img/poka12_re.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 220px;
    filter: blur(8px) grayscale(100%);
    opacity: 0; /* still hidden until animation fires */
}

/* Phase 3 — final crisp character image */
.final-poka-asset {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

.status-indicator {
    position: absolute;
    bottom: 18px;
    left: 20px;
    font-size: 0.75rem;
    font-family: monospace;
    color: #7a5c58;
    opacity: 0.5;
    letter-spacing: 0.04em;
}

/* ── Synchronized Reveal Timing ── */
.ai-process-section.active .build-layer-1 {
    animation: buildReveal 0.6s ease forwards 3.3s;
}
.ai-process-section.active .build-layer-2 {
    animation: buildRevealGhost 0.6s ease forwards 4.3s;
}
.ai-process-section.active .build-layer-3 {
    animation: finalPopOut 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 5.3s;
}

/* ── Keyframes ── */
@keyframes typingEffect {
    from { width: 0; }
    to   { width: 100%; }
}
@keyframes blinkCursor {
    from, to { border-color: transparent; }
    50%      { border-color: #27c93f; }
}
@keyframes buildReveal {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to   { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
}
@keyframes buildRevealGhost {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes finalPopOut {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); filter: blur(8px); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1);   filter: blur(0);   }
}

/* ── Responsive: stack on tablet / mobile ── */
@media (max-width: 900px) {
    .ai-simulator-container {
        grid-template-columns: 1fr;
    }
    .construction-stage {
        height: 320px;
    }
}


/* =====================================================
   AI VIBE CODING — CHAT MESSENGER UI  (Light Theme)
   Overrides the previous dark-terminal styles fully.
   ===================================================== */

/* Two-column split: chat left, blueprint stage right */
.ai-simulator-container {
    display: grid !important;
    grid-template-columns: 1fr 1.16fr !important;
    gap: 35px !important;
    margin-top: 40px !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ── Left Panel: AI Chat Window ── */
.ai-chat-window {
    background: #FAF7F4;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #EAE3DC;
    box-shadow: 0 10px 25px rgba(122, 92, 88, 0.06);
}

.chat-header {
    background: #FFFFFF;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #EAE3DC;
}

.ai-status-dot {
    width: 8px;
    height: 8px;
    background: #7A5C58;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(122, 92, 88, 0.15);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(122, 92, 88, 0.15); }
    50%       { box-shadow: 0 0 0 6px rgba(122, 92, 88, 0.05); }
}

.chat-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #555555;
    font-family: sans-serif;
    letter-spacing: 0.02em;
}

.chat-body {
    padding: 24px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Prompt Chat Bubble ── */
.chat-bubble.user-prompt {
    background: #7A5C58;
    padding: 16px 20px;
    border-radius: 16px 16px 4px 16px;
    align-self: flex-end;
    width: 100%;
    box-shadow: 0 4px 14px rgba(122, 92, 88, 0.18);
}

.bubble-tag {
    display: block;
    font-size: 0.68rem;
    color: rgba(234, 227, 220, 0.85);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
    font-weight: 700;
}

/* ── Typing Animation — fires immediately on page load, no .active needed ── */
.typing-target {
    color: #FFFFFF !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    width: 0;
    overflow: hidden !important;
    white-space: nowrap !important;
    border-right: 2px solid #FFFFFF !important;
    animation: typingEffect 3.2s steps(50, end) forwards !important,
               blinkCursor  0.8s step-end infinite !important;
}

/* ── Right Panel: Blueprint Construction Stage ── */
.construction-stage {
    position: relative !important;
    height: 380px !important;
    background: #fdfaf7 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px solid #e2dad5 !important;
}

.stage-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(#e2dad5 1px, transparent 1px),
        linear-gradient(90deg, #e2dad5 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Shared base for all build layers */
.poka-build-base {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    opacity: 0;
}

/* Phase 1 — wireframe circle, fires after typing finishes */
.build-layer-1 {
    height: 220px !important;
    border: 2px dashed #7a5c58 !important;
    border-radius: 50% !important;
    animation: buildReveal 0.6s ease forwards 3.3s !important;
}

/* Phase 2 — blurred grayscale ghost, fires at 4.3s */
.build-layer-2 {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 220px !important;
    height: 220px !important;
    background-image: url('img/poka12_re.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: blur(8px) grayscale(100%) !important;
    animation: buildReveal 0.6s ease forwards 4.3s !important;
}

/* Phase 3 — final crisp pop-in, fires at 5.3s */
.build-layer-3 {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 220px !important;
    animation: finalPopOut 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 5.3s !important;
}

.final-poka-asset {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

.status-indicator {
    position: absolute;
    bottom: 18px;
    left: 20px;
    font-size: 0.72rem;
    font-family: monospace;
    color: #7a5c58;
    opacity: 0.5;
    letter-spacing: 0.06em;
}

/* ── Keyframes ── */
@keyframes typingEffect {
    from { width: 0; }
    to   { width: 100%; }
}
@keyframes blinkCursor {
    from, to { border-color: transparent; }
    50%      { border-color: #FFFFFF; }
}
@keyframes buildReveal {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to   { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
}
@keyframes finalPopOut {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); filter: blur(8px); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1);   filter: blur(0); }
}

/* ── Responsive stacking ── */
@media (max-width: 900px) {
    .ai-simulator-container {
        grid-template-columns: 1fr !important;
    }
    .construction-stage {
        height: 320px !important;
    }
    .chat-bubble.user-prompt {
        border-radius: 16px;
    }
}


/* =====================================================
   AI PROMPT CONSOLE — Left Panel Redesign
   Generative AI prompt input interface (no code editor)
   ===================================================== */

.ai-prompt-console {
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #E8E1DA;
    box-shadow: 0 10px 32px rgba(122, 92, 88, 0.09),
                0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ── Console Header Bar ── */
.prompt-console-header {
    background: #FAFAF9;
    padding: 11px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #EAE3DC;
}

.console-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #3D3D3D;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    flex: 1;
    letter-spacing: 0.01em;
}

.console-model-tag {
    font-size: 0.66rem;
    background: linear-gradient(135deg, #7A5C58, #a07068);
    color: #fff;
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ── Console Body / Prompt Area ── */
.prompt-console-body {
    padding: 18px 18px 20px;
    background: #FAF8F6;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 240px;
}

/* Field label row */
.prompt-field-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #7A5C58;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.prompt-field-icon {
    font-size: 0.78rem;
    color: #a07068;
    line-height: 1;
}

/* White textarea-like field */
.prompt-field-area {
    background: #FFFFFF;
    border: 1.5px solid #E0D8D2;
    border-radius: 14px;
    padding: 16px 18px;
    flex: 1;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.025),
                0 1px 3px rgba(122, 92, 88, 0.04);
    position: relative;
    transition: border-color 0.2s ease;
}

.prompt-field-area:hover {
    border-color: #C4AFA9;
}

/* Multi-line prompt text — no monospace, no code styling */
.prompt-field-text {
    font-family: 'Georgia', 'Times New Roman', Georgia, serif;
    font-size: 0.88rem;
    line-height: 1.78;
    color: #2A2A2A;
    margin: 0;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Blinking cursor at end of text */
.blinking-cursor {
    display: inline;
    color: #7A5C58;
    font-weight: 900;
    font-size: 1rem;
    animation: cursorBlink 1.05s step-end infinite;
    margin-left: 1px;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
    .prompt-console-body {
        min-height: 180px;
    }
    .prompt-field-text {
        font-size: 0.82rem;
        line-height: 1.65;
    }
}


/* =======================================================
   FOUR-PANEL AI CREATION PROGRESSION
   ======================================================= */

.ai-process-section {
    background: #ffffff;
}

/* Outer four-column grid */
.four-panel-progression {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 40px;
}

/* Each individual panel card */
.progression-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Step badge at the top of each panel */
.panel-step-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #7A5C58;
    letter-spacing: 0.03em;
    text-align: center;
    background: rgba(122, 92, 88, 0.07);
    border: 1px solid rgba(122, 92, 88, 0.12);
    border-radius: 10px;
    padding: 7px 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Inner split: prompt console (left) + stage board (right) — vertical stack */
.panel-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* ── Mini Prompt Console ── */
.mini-prompt-console {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E8E1DA;
    box-shadow: 0 4px 14px rgba(122, 92, 88, 0.07);
    display: flex;
    flex-direction: column;
}

.mini-console-header {
    background: #FAFAF9;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #EAE3DC;
    flex-shrink: 0;
}

.mini-console-title {
    font-size: 0.6rem;
    font-weight: 700;
    color: #3D3D3D;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.mini-console-body {
    padding: 8px 10px 10px;
    background: #FAF8F6;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mini-field-label {
    font-size: 0.56rem;
    font-weight: 800;
    color: #7A5C58;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.mini-field-area {
    background: #FFFFFF;
    border: 1px solid #E0D8D2;
    border-radius: 8px;
    padding: 8px 10px;
    min-height: 70px;
}

.mini-field-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.64rem;
    line-height: 1.65;
    color: #2A2A2A;
    margin: 0;
    word-break: break-word;
}

/* Blinking text cursor */
.blinking-cursor {
    display: inline;
    color: #7A5C58;
    font-weight: 900;
    font-size: 0.75rem;
    animation: cursorBlink 1.05s step-end infinite;
    margin-left: 1px;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Mini Stage Board (right side of each panel) ── */
.mini-stage {
    position: relative;
    background: #fdfaf7;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2dad5;
    min-height: 140px;
    flex: 1;
}

/* Blueprint grid background — shared by all stages */
.mini-stage .stage-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(#e2dad5 1px, transparent 1px),
        linear-gradient(90deg, #e2dad5 1px, transparent 1px);
    background-size: 16px 16px;
}

/* Shared image positioning for all stage states */
.poka-stage-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72%;
    height: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    display: block;
}

/* Stage 1 — empty board (no image) */
.stage-1 { /* nothing extra needed */ }

/* Stage 2 — faint ghost outline */
.poka-ghost {
    opacity: 0.13;
    filter: blur(2.5px) grayscale(100%);
}

/* Stage 3 — emerging with warm glow */
.poka-emerging {
    opacity: 0.58;
    filter: blur(0.5px) brightness(1.05);
}

/* Warm pulsing glow ring behind emerging character */
.poka-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 200, 150, 0.55) 0%,
        rgba(255, 170, 100, 0.25) 45%,
        transparent 70%
    );
    animation: glowPulse 1.9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.65; }
    50%       { transform: translate(-50%, -50%) scale(1.45); opacity: 1;    }
}

/* Concentric pulsing ring overlay for Stage 3 */
.stage-3::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1.5px solid rgba(200, 140, 100, 0.4);
    transform: translate(-50%, -50%) scale(1);
    animation: ringExpand 2s ease-out infinite;
    pointer-events: none;
}

@keyframes ringExpand {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0;   }
}

/* Stage 4 — full color, complete */
.poka-complete {
    opacity: 1;
    filter: none;
}

/* Completed status text in Stage 4 */
.mini-status-indicator {
    position: absolute;
    bottom: 7px;
    left: 9px;
    right: 9px;
    font-size: 0.52rem;
    font-family: monospace;
    color: #7a5c58;
    opacity: 0.6;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .four-panel-progression {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .four-panel-progression {
        grid-template-columns: 1fr;
    }
    .mini-stage {
        min-height: 160px;
    }
}

/* =======================================================
   FOUR-PANEL PROGRESSION - ADDITIONAL STYLES
   (Dashed Circle, Final Panel Layout Shift, Pop-Out Animation)
   ======================================================= */

/* Dashed Circle Guide (for Stages 2, 3, 4) */
.stage-dashed-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68%;
    aspect-ratio: 1 / 1;
    border: 1.5px dashed rgba(122, 92, 88, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1; /* Below the image */
}

.stage-dashed-circle--faded {
    opacity: 0.15; /* Less prominent in the final stage */
}

/* Ensure images sit above the dashed circle */
.poka-ghost,
.poka-emerging {
    z-index: 2;
}


/* ── Step 4 Final Panel (Dynamic Pop-Out Layout) ── */

/* Shift panel layout slightly: make the stage area more prominent */
.panel-body--final {
    display: flex;
    flex-direction: column;
    /* You can adjust flex basis here if needed, but flex-direction column 
       keeps it consistent. Let's make the stage flex-grow more. */
}

.mini-prompt-console--final {
    flex: 0 0 auto; /* Keep it compact */
    /* Shrink the text slightly to save space for the image */
}
.mini-prompt-console--final .mini-field-text {
    font-size: 0.55rem;
    line-height: 1.5;
}

.mini-stage--final {
    flex: 1 0 auto; /* Take up remaining space */
    min-height: 200px; /* Force it to be taller */
    overflow: visible; /* CRITICAL: allow pop-out to break boundaries */
    background: #fdfaf7; /* Ensure background is set */
    border: 1px solid #e2dad5;
    /* Because overflow is visible, the border-radius on the stage won't clip the image */
}
.mini-stage--final .stage-grid {
    border-radius: 12px; /* Keep grid contained */
    overflow: hidden;
}


/* ── Dynamic Pop-Out Animation ── */
.poka-pop-out {
    /* Initial state: Hidden and scaled down */
    opacity: 0;
    transform-origin: bottom center; 
    transform: translate(-50%, -50%) scale(0);
    z-index: 10; /* Bring to front */
}

/* Added dynamically via JS */
.poka-pop-out.animate {
    animation: finalPopOutDynamic 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
}

@keyframes finalPopOutDynamic {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    30% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: none;
    }
    100% {
        /* Scale up by 1.4x and pop forward */
        transform: translate(-50%, -65%) scale(1.4); 
        opacity: 1;
        filter: drop-shadow(0 15px 25px rgba(122, 92, 88, 0.25));
    }
}

/* Adjust the status indicator for the final panel since overflow is visible */
.mini-stage--final .mini-status-indicator {
    z-index: 11;
    background: rgba(253, 250, 247, 0.85); /* Readability backdrop */
    padding: 2px 6px;
    border-radius: 4px;
    bottom: -8px; /* Push it down slightly */
}

/* Highlight the final step badge */
.panel-step-label--final {
    background: rgba(122, 92, 88, 0.15);
    border-color: rgba(122, 92, 88, 0.3);
    color: #5c433f;
}

/* ── Step 4 Typing Interaction Sequence ── */
.typing-sentence {
    display: inline; /* Keep inline so it wraps naturally */
}

/* Light up the status indicator at the exact moment the pop-out happens */
.status-light-up {
    opacity: 0;
    transform: translateY(5px);
    color: #7a5c58;
}

/* Added dynamically via JS */
.status-light-up.animate {
    animation: statusLightUp 0.4s ease-out forwards; 
}

@keyframes statusLightUp {
    0% {
        opacity: 0;
        transform: translateY(5px);
        color: #7a5c58;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        color: #27c93f; /* Success green to match the "COMPLETED" state */
        text-shadow: 0 0 8px rgba(39, 201, 63, 0.4);
    }
}

/* Goods Shop CTA Button */
.goods-shop-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    padding: 0;
}

.goods-shop-btn {
    display: inline-block;
    padding: 14px 28px;
    background-color: #F8F4EE; /* match theme warm beige */
    color: #4A3525; /* dark brown */
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(74, 53, 37, 0.1);
    transition: all 0.3s ease;
}

.goods-shop-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(74, 53, 37, 0.15);
}

/* Scroll to Top Button (POKA Shop Custom Theme) */
.poka-shop-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #F8F4EE; /* warm bright beige to match E-commerce site */
  padding: 0;
  border: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(74, 53, 37, 0.15); /* matching brown subtle shadow */
  z-index: 1000;
  
  /* Initial hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.poka-shop-top-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.poka-shop-top-btn.show-btn {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.poka-shop-top-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(74, 53, 37, 0.2);
}

.poka-shop-top-btn .top-label {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  color: #4A3525;
  background-color: rgba(248, 244, 238, 0.9); /* matches the button's beige */
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(74, 53, 37, 0.1);
}

/* Responsive Mobile Hero Layout */
@media (max-width: 768px) {
  /* Mobile Header Layout */
  .header {
    position: relative; /* Changed to relative so the dropdown menu can be absolutely positioned */
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    gap: 20px; /* Horizontal spacing between logo and hamburger */
  }

  .hamburger-btn {
    display: flex; /* Ensure hamburger is visible */
    order: 0; /* Keep natural HTML order (logo then hamburger) */
  }

  .nav {
    display: none; /* Hide horizontal nav by default */
  }

  .nav.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; /* Drop down directly below the header */
    left: 0;
    width: 100%;
    background-color: #F8F4EE; /* Solid background matching the site theme */
    z-index: 9999; /* Higher z-index to cover the POKA character */
    padding: 20px;
    gap: 15px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05); /* Slight shadow for separation */
    text-align: left; /* Ensure menu items align nicely */
  }

  .hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px; /* Reduce the massive gap between image and text */
    padding-top: 40px; /* Adjusted since header is no longer fixed taking up space */
  }

  .hero-image {
    transform: none; /* Remove horizontal shift */
    order: -1; /* Place image above the text */
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .hero-image .hero-img-default,
  .hero-image .hero-img-hover {
    max-width: 80%; /* Scale down properly */
    height: auto;
  }

  .hero-text {
    width: 100%;
  }

  .hero-text h1 {
    white-space: normal; /* Allow text to wrap on mobile to prevent overflow */
  }

  .hero-buttons {
    justify-content: center;
  }

  /* Fix AI Prompt Studio Animation Visibility for Mobile */
  .ai-process-section,
  .four-panel-progression,
  .progression-panel,
  .progression-panel--final,
  .panel-body--final,
  .mini-stage--final {
    overflow: visible !important;
  }

  .poka-pop-out {
    max-width: 100%; /* Prevent the scaled image from causing horizontal scroll */
  }

  /* Instagram CTA Mobile Title */
  .instagram-cta h2 {
    font-size: 4.5vw; /* Fluid typography to fit screen width */
    white-space: nowrap; /* Force the sentence to stay on a single line */
  }
}