/* --- 기존 PC 스타일 유지 --- */
html {
  scrollbar-gutter: stable;
}

h1, h2, h3, h4, h5, h6, strong, b {
  font-weight: normal;
}

@font-face {
  font-family: 'TlabModernLife-M';
  src: url('TlabModernLifeM.otf') format('opentype');
}
@font-face {
  font-family: 'TlabModernLife-B';
  src: url('TlabModernLifeB.otf') format('opentype');
}
@font-face {
  font-family: 'TlabModernLife-L';
  src: url('TlabModernLifeL.otf') format('opentype');
}

#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* 무조건 뒤로 보내기! */
}



#main-logo {
  position: fixed;
  top: 52%;
  left: 49.5%;
  transform: translate(-50%, -50%);
  height: 52vh;
  z-index: 10;
  pointer-events: none;
}

#click-button {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  font-family: 'TlabModernLife-B', sans-serif;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease;
}

#click-button:hover {
  background: #25f49b;
}

#intro-section {
  display: none;
  min-height: 100vh;
  padding: 100px;
  background: #fff;
  color: #000;
  font-size: 1.2rem;
  z-index: 10;
  position: relative;
  box-sizing: border-box;
}

#top-logo {
  position: fixed;
  top: 36px;
  left: 30px;
  z-index: 10;
}
#top-logo img {
  height: 80px;
}

#main-nav {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 10;
}
#main-nav ul {
  list-style: none;
  display: flex;
  gap: 25px;
}
#main-nav a {
  font-family: 'TlabModernLife-B', sans-serif;
  font-weight: normal;
  text-decoration: none;
  color: #000;
  font-size: 22px;
}
#main-nav a.active {
  font-weight: normal;
  color: #25f49b;
  border-bottom: 2px solid #25f49b;
}









/* 인트로 콘텐츠 */

body {
  font-family: 'TlabModernLife-M', sans-serif;
}

.intro-page {
  overflow: hidden;
  height: 100vh;
}

.intro-fullscreen {
  height: 100vh;
  width: 100vw;
  color: #000;
  font-family: 'TlabModernLife-M', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  box-sizing: border-box;
}

.intro-desc {
  font-family: 'TlabModernLife-M', sans-serif;
  font-size: 1.35rem;
  line-height: 2.0;
  color: #000;
  max-width: 700px;
}

.intro-logo {
  width: 500px;
  max-width: 60vw;
  height: auto;
  margin-top: 40px;       /* 👈 로고 아래로 조금 내림 */
  margin-bottom: 10px;    /* 👈 로고와 타이틀 사이 좁힘 */
}

.bold-line {
  font-family: 'TlabModernLife-B', sans-serif;
  font-size: 3.2rem;
  margin-bottom: 1rem;    /* 👈 타이틀과 본문 사이 충분히 띄움 */
  display: block;           /* 👈 타이틀이 본문과 다른 줄에 나타남 */
}









/* Playground */
#game-ui {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
}

#nickname {
  padding: 14.4px;
  font-size: 21.6px;
  width: 312px;
  font-family: 'TlabModernLife-M', sans-serif;

  /* ✅ 테두리 스타일 추가 */
  border: 2px solid #000;
  border-radius: 0;
  background: white;
  outline: none;
}

#start-button {
  padding: 16.8px 28.8px;
  font-size: 21.6px;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: 'TlabModernLife-B', sans-serif;
}

#start-button:hover {
  background: #25f49b;   /* 메인컬러로 변경 */
  color: #ffffff;
  transition: background 0.3s ease, color 0.3s ease;
}

#score-display {
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-size: 22px;
  font-weight: bold;
  z-index: 10;
}

#timer-display {
  position: absolute;
  bottom: 30px;
  left: 30px;
  font-size: 22px;
  font-weight: bold;
  z-index: 10;
}


#ranking {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.95);
  padding: 20px;
  border: 2px solid #000;
  font-family: sans-serif;
  font-size: 14px;
  z-index: 20;
  display: none;
}

#smash-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
}

#ready-countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4.4rem;
  font-weight: bold;
  background: #fff;
  padding: 22px 44px;
  border: 3px solid #000;
  z-index: 30;
  display: none;
}


#shape-select {
  display: flex;
  justify-content: center;
  gap: 28.8px;
  margin-top: 36px;
  margin-bottom: 24px;
}

.shape-option {
  width: 96px;
  height: 96px;
  background: white;
  border: 2px solid #000;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
  outline: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.shape-option img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  pointer-events: none;
}

.shape-option.active {
  background: #25f49b;
  transform: scale(1.05);
}




/* 토마토 이모지 통통 bounce 애니메이션 */
@keyframes tomato-bounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-8px) scale(1.1); }
  50%  { transform: translateY(0) scale(1); }
  70%  { transform: translateY(-4px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

.emoji-bounce {
  display: inline-block;
  animation: tomato-bounce 1s ease-in-out infinite;
  transform-origin: bottom;
}

.bounce-1 { animation-delay: 0s; }
.bounce-2 { animation-delay: 0.1s; }
.bounce-3 { animation-delay: 0.2s; }


.ranking-list div {
  margin-bottom: 6px;
}


/* 랭킹 스타일 */
.ranking-list {
  font-family: 'TLabModernLife-M', sans-serif;
  position: relative;
  padding-bottom: 2.5em; /* 버튼이 겹치지 않도록 공간 확보 */
  
}
.ranking-list div {
  margin-bottom: 6px;
}
.ranking-list strong {
  font-family: 'TLabModernLife-B', sans-serif;
  font-weight: normal;
}

#ranking h3 {
  font-family: 'TLabModernLife-B', sans-serif;
}

/* 내 랭킹 강조 전용 */
.bold-rank {
  font-family: 'TLabModernLife-B', sans-serif;
  font-weight: normal;
}

.play-again-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 0.5em;
}

.play-again-btn {
  background: black;
  color: white;
  border: none;
  border-radius: 50%;
  width: 58px;
  height: 58px;
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;    /* 👈 더 위로 정렬 */
  justify-content: center;
  line-height: 1;
  padding-top: 12.5px;           /* 👈 위로 확실히 밀어올림 */
}

.play-again-btn:hover {
  background: #25f49b;
}








/* === RANKING BOX: 기본은 숨김 === */
#ranking { 
  display: none !important; 
}

/* === 게임 끝나서 보여줄 때만(.show) 가변 폭 + 가운데 정렬 === */
#ranking.show {
  display: inline-block !important;   /* 내용 너비만큼 */
  width: auto !important;
  max-width: 96vw !important;         /* 화면 넘지 않게 상한 */
  box-sizing: border-box;
  padding: 24px 28px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;  /* 가운데 기준 좌우 동일 확장 */
}







/* 랭킹 각 줄: 절대 줄바꿈 금지 + 축소 금지 (iOS 한글 대응) */
#ranking .ranking-list > div{
  display:flex !important;
  align-items:center;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  word-break:keep-all !important;   /* 한글도 단어 단위로만 */
  overflow:visible !important;
  gap:8px;
}
#ranking .ranking-list > div > .rank-no,
#ranking .ranking-list > div > .name,
#ranking .ranking-list > div > .colon,
#ranking .ranking-list > div > .score,
#ranking .ranking-list > div > .badges{
  flex:0 0 auto !important;        /* flex 수축 방지 */
}

/* 콜론/스코어/배지 간격 */
#ranking .colon{ margin:0 6px !important; }
#ranking .score{ font-variant-numeric: tabular-nums; }
#ranking .badges{ display:inline-flex; gap:4px; margin-left:6px; }










/* 워크스 */
body.works-page {
  font-family: 'TLabModernLife-M', sans-serif;
  margin: 0;
  background: #fff;
  color: #000;
}

.works-content {
  padding: 160px 60px;
  max-width: 1600px;
  margin: 0 auto;
  text-align: center;
}

.works-content h1 {
  font-family: 'TLabModernLife-B', sans-serif;
  font-size: 4rem;
  margin-bottom: 0.3em;
}

.works-desc {
  font-size: 1.2rem;
  margin-bottom: 3em;
  color: #000000;
}

/* 필터 버튼 */
.filter-buttons {
  margin-top: 45px;
  margin-bottom: 10px;
}
.filter-buttons button {
  background: transparent;
  border: 2px solid #000;
  border-radius: 0;
  padding: 8px 18px;
  margin: 0 8px 24px;
  cursor: pointer;
  font-family: 'TLabModernLife-M', sans-serif;
  font-size: 1.1rem;
  transition: all 0.2s ease;
  color: #000;
}

/* 필터 선택 시 색상 */
.filter-buttons button.active[data-filter="all"] {
  background-color: #25f49b;
  color: #000;
}
.filter-buttons button.active[data-filter="Branding"] {
  background-color: #ff45e9;
  color: #fff;
}
.filter-buttons button.active[data-filter="Typography"] {
  background-color: #1410ff;
  color: #fff;
}
.filter-buttons button.active[data-filter="Poster"] {
  background-color: #ff5b0f;
  color: #fff;
}
.filter-buttons button.active[data-filter="Motion"] {
  background-color: #ffcd17;
  color: #fff;
}
.filter-buttons button.active[data-filter="Special"] {
  background-color: #00352b;
  color: #fff;
}

/* Masonry */
.works-grid {
  column-count: 5;
  column-gap: 32px;
  max-width: 1800px;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 1600px) {
  .works-grid { column-count: 5; }
}
@media (max-width: 1400px) {
  .works-grid { column-count: 4; }
}
@media (max-width: 1100px) {
  .works-grid { column-count: 3; }
}
@media (max-width: 800px) {
  .works-grid { column-count: 2; }
}
@media (max-width: 500px) {
  .works-grid { column-count: 1; }
}

/* 카드 */
.work-card {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 2px solid #000;
  border-radius: 0;
  margin-bottom: 32px;
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-family: 'TLabModernLife-M', sans-serif;
}

.work-card:hover {
  transform: translateY(-8px);
  box-shadow: 4px 4px 0 #000;
}

/* 🔥 a 태그로 쓴 경우 디자인 유지 */
a.work-card {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}


/* 이미지 */
.work-card img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 2px solid #000;
}

/* 텍스트 */
.work-card p {
  font-size: 1rem;
  padding: 12px;
  margin: 0;
  text-align: left;
  line-height: 1.5;
  opacity: 0.85;
  transition: all 0.3s ease;
}
.work-card:hover p {
  opacity: 1;
  transform: translateY(-4px);
}
.work-card p strong {
  font-family: 'TLabModernLife-B', sans-serif;
  display: block;
  margin-bottom: 6px;
  font-size: 1.1rem;
}

/* 뱃지 */
.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-family: 'TLabModernLife-M', sans-serif;
  color: #fff;
  border-radius: 0;
  z-index: 2;
  pointer-events: none;
}
.badge.branding    { background-color: #ff45e9; }
.badge.typography  { background-color: #1410ff; }
.badge.poster      { background-color: #ff5b0f; }
.badge.motion      { background-color: #ffcd17; }
.badge.special     { background-color: #00352b; }

/* Lazy Load */
.lazy {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}
.lazy.visible {
  opacity: 1;
  transform: translateY(0);
}








/* === WORKS 120% 업스케일 - Masonry 안전 버전 === */
/* 공통(웹+모바일): 텍스트/패딩만 1.2x */
body.works-page .works-desc { font-size: 1.44rem; margin-bottom: 3.6em; }

body.works-page .filter-buttons { margin-top: 54px; margin-bottom: 12px; }
body.works-page .filter-buttons button {
  padding: 10px 22px;  /* 1.2x */
  font-size: 1.32rem;  /* 1.2x */
}

/* 카드 타이포 1.2x */
body.works-page .work-card p {
  font-size: 1.2rem;   /* 1.2x */
  padding: 14px;       /* 1.2x */
  line-height: 1.6;
}
body.works-page .work-card p strong {
  font-size: 1.32rem;  /* 1.2x */
  margin-bottom: 8px;
}

/* 뱃지 1.2x */
body.works-page .badge {
  padding: 7px 15px;
  font-size: 1rem;
  top: 14px; left: 14px;
}

/* ✅ 핵심: 카드 최대폭만 키움 (그리드 열 수/계산은 그대로) */
body.works-page .work-card {
  max-width: 360px;    /* 기존 300px → 360px (1.2x) */
}

/* === WORKS: 데스크톱 3열 Masonry 꽉 채우기 === */
@media (min-width: 769px) {
  /* CSS columns 비활성화 (Masonry와 충돌 방지) */
  body.works-page .works-grid {
    column-count: initial !important;
    column-gap: 0 !important;
    position: relative;
    max-width: 1800px;
    margin: 0 auto;
  }

  /* 3열: gutter 20px → 줄당 총 40px */
  body.works-page .works-grid .grid-sizer,
  body.works-page .works-grid .work-card {
    width: calc((100% - 40px) / 3) !important;
    max-width: none !important;
    box-sizing: border-box;
    display: block !important;
  }
}

/* ✅ 필터 숨김 전용 — 어떤 규칙보다 강하게 (맨 아래 위치 필수) */
body.works-page .works-grid .work-card.is-hidden {
  display: none !important;
}

















/* 돌아가기 링크 */
.project-back {
  display: block;
  margin: 120px 0 40px 30px; /* ← 로고보다 아래로 */
  font-size: 0.95rem;
  color: #000;
  text-decoration: none;
  font-family: 'TLabModernLife-M', sans-serif;
}








 /* news */
.news-content {
  padding: 160px 60px;
  max-width: 1600px;
  margin: 0 auto;
  text-align: center;
}

.news-content h1 {
  font-family: 'TLabModernLife-B', sans-serif;
  font-size: 4rem;
  margin-bottom: 0.5em;
}

@media screen and (max-width: 768px) {
  .news-content {
    padding: 70px 20px 40px; /* WORKS와 동일하게 */
  }

  .news-content h1 {
    font-size: 3rem; /* WORKS 모바일 타이틀과 동일하게 */
    margin-bottom: 0.3em;
  }
  
}










/* contact */
.contact-content {
  height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  text-align: center;
  font-family: 'TLabModernLife-M', sans-serif;
  transform: translateY(-10px)
}

.contact-content h1 {
  font-family: 'TLabModernLife-B', sans-serif;
  font-size: 4rem;
  margin-bottom: 1.2rem;
}

.contact-desc {
  font-size: 1.44rem;
  margin-bottom: 2.8rem;
  line-height: 1.7;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 3rem;
  font-size: 3rem;
  margin-top: 0;
}

.social-icons a,
.icon-button {
  color: black;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  vertical-align: middle;
}

.social-icons a:hover,
.icon-button:hover {
  color: #25f49b;
  transform: scale(1.15);
}


/* ✅ 웹 전용 - 아이콘만 */
@media screen and (min-width: 769px) {
  .social-icons {
    font-size: 3.9rem;
    gap: 4rem;
  }

  .social-icons a,
  .icon-button {
    font-size: 3.9rem;
  }
}














.page-title {
  font-family: 'TLabModernLife-B', sans-serif;
  font-size: 4rem;
  text-align: center;
  text-transform: uppercase;  /* ✅ 대문자 적용 */
  margin-bottom: 1rem;
}










/* ✅ 기본: 모바일 전용 요소는 숨김 */
.mobile-only {
  display: none;
}




/* Home 모바일 대응 (768px 이하) */
@media screen and (max-width: 768px) {
  #main-logo {
    height: 22vh !important;
    top: 49% !important;
  }
  
  #click-button {
    display: flex;              /* ✅ flex로 중앙정렬 */
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    font-size: 22px !important; /* ✅ 강제 적용 */
    line-height: 1.2;
    padding-top: 2.2px;
    text-align: center;

    bottom: 30px;
  }
  
/* ✅ 홈(index.html) 모바일 전용 GR 버튼 텍스트 컬러 */
  body#home-page #click-button {
    color: #25f49b !important;
  }


  #top-logo {
    position: fixed;
    top: 24px;
    left: 20px;
    transform: none;
    z-index: 1000;
  }

  /* ✅ 모바일 전용 로고 크기 */
  #top-logo img {
    height: 50px !important;
    width: auto;
  }

  #main-nav {
    top: 18px;
    right: 20px;
  }

  #main-nav ul {
    gap: 16px;
  }

  #main-nav a {
    font-size: 16px;
  }

  #intro-section {
    padding: 60px 20px;
    font-size: 1rem;
  }
}







/* ✅ 모바일 전용 touch me! 스타일 */
@media screen and (max-width: 768px) {
  .touch-hint {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-family: 'TlabModernLife-B', sans-serif;
    animation: float 2.5s ease-in-out infinite;
    z-index: 9999;
    pointer-events: none;
    display: block;
  }

  /* 인트로에서만 메인색 */
  body.intro-page .touch-hint {
    color: #25f49b !important;
  }

  /* 홈(index.html)에서만 흰색 */
  body#home-page .touch-hint {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important; /* iOS 대비 */
  }

  @keyframes float {
    0% { transform: translate(-50%, -50%) translateY(0); opacity: 1; }
    50% { transform: translate(-50%, -50%) translateY(-12px); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) translateY(0); opacity: 1; }
  }
}







/* ===== tttap 모바일 통합 패치 (공통) ===== */
@media (max-width: 768px) {
  /* 베이스: iOS 자동확대 차단 + 기본 크기 살짝 더 축소 */
  html, body {
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
    font-size: 12.5px !important;   /* 이전보다 한 단계 더 작게 */
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;    /* 콘텐츠 있는 페이지는 스크롤 가능 */
    background: #fff;
  }

  /* 풀스크린 섹션/캔버스 높이 안정화 (iOS 주소창 대응) */
  #bg-canvas { width: 100vw !important; height: 100svh !important; }
  .intro-fullscreen,
  .shop-page,
  .news-page,
  .works-page,
  .contact-page,
  .playground-page {
    min-height: 100svh !important;
    box-sizing: border-box;
  }

  /* 상단 로고 / 햄버거 위치 공통 */
  #top-logo { position: fixed !important; top: 20px !important; left: 16px !important; z-index: 1000; }
  #top-logo img { height: 40px !important; width: auto !important; }
  #hamburger-box { position: fixed !important; top: 20px !important; right: 16px !important; z-index: 10000 !important; transform: none !important; }

  /* 모바일 메뉴: 오버레이 단일 규칙 */
  #mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    background: #000 !important;
    display: none !important;
    opacity: 0 !important;
    transform: none !important;
    z-index: 999998 !important; /* 버튼 바로 아래 */
    box-sizing: border-box;
    padding: max(80px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)) !important;
  }
  #mobile-menu.show {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: 1 !important;
  }
  #mobile-menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
  #mobile-menu li { margin: 12px 0; }
  #mobile-menu a {
    color: #fff !important;
    font-family: 'TlabModernLife-B', sans-serif;
    font-size: clamp(12px, 3.0vw, 14px) !important; /* 메뉴 글자도 한 단계 축소 */
    text-decoration: none;
  }

  /* PC 네비는 모바일에서 숨김 */
  #main-nav { display: none !important; }
  .mobile-only { display: block !important; }

  /* 타이포(전체 더 작게 + 상한 고정) */
  h1 { font-size: clamp(17px, 4.6vw, 26px) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(15px, 4.2vw, 22px) !important; line-height: 1.3 !important; }
  h3 { font-size: clamp(14px, 4.0vw, 20px) !important; line-height: 1.3 !important; }

  .intro-desc,
  .works-desc,
  .contact-desc,
  .news-content p {
    font-size: clamp(12.5px, 3.2vw, 15px) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-align: center;
  }

  /* 버튼/필터/네비 텍스트 */
  button, .filter-buttons button, #main-nav a {
    font-size: clamp(12px, 3.0vw, 14px) !important;
  }

  /* Masonry 아래 여백 안전영역 보정 */
  .works-grid { margin-bottom: env(safe-area-inset-bottom, 0); }

  /* 고정형 UI(게임 등) 안전영역 보정 */
  #timer-display, #score-display, #ranking {
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  /* 메인 로고(홈) */
  #main-logo { height: 19vh !important; }
}






/* === 모바일 인트로 세로쏠림 보정: 1:1 간격 (16px) === */
@media (max-width: 768px) {
  body.intro-page {
    height: 100svh;
    overflow: hidden;
  }
  .intro-fullscreen {
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48.5%) !important; /* 세로 위치 살짝 조정 */
    min-height: auto !important;
    height: auto !important;
    width: 100vw !important;
    padding: 0 20px !important;
    display: block !important;
  }
  /* 로고 */
  .intro-logo {
    max-width: 60vw !important;
    margin: 6px auto 16px !important; /* 로고 아래 16px */
    display: block;
  }
  /* 볼드 타이틀 */
  .bold-line {
    font-size: calc(1.4 * clamp(18px, 4.8vw, 22px)) !important;
    line-height: 1.25 !important;
    display: block;
    margin: 0 0 10px !important; /* 설명과의 간격 */
  }
  /* 설명 텍스트 */
  .intro-desc {
    font-size: clamp(12.5px, 3.1vw, 15px) !important;
    line-height: 1.9 !important; /* 행간 조금 더 줌 */
    text-align: center;
    margin: 0 !important;
  }
}

@media (max-width: 768px) {
  /* 메뉴 열렸을 때 바디 스크롤 잠금 */
  body.menu-open { overflow: hidden !important; }

  /* 클릭 우선순위: 햄버거 > 메뉴 > 인트로 */
  #hamburger-box { z-index: 100001 !important; pointer-events: auto !important; }
  #hamburger-box * { pointer-events: none; } /* 내부 자식이 클릭 가로채지 않게 */
  #mobile-menu      { z-index: 100000 !important; pointer-events: none; }
  #mobile-menu.show { pointer-events: auto; }

  .intro-fullscreen { z-index: 1 !important; }
}


/* === 모바일 햄버거/메뉴 '디자인만' 복구 === */
@media (max-width: 768px) {
  /* 네모 박스 햄버거: 크기/색/호버만 */
  #hamburger-box {
    width: 25px;
    height: 24px;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 999999 !important; /* 배경보다 무조건 위 */
    pointer-events: auto !important;
    position: fixed;
  }
  #hamburger-box:hover { transform: rotate(5deg) scale(1.03); }
  #hamburger-box.show { background-color: #fff !important; }

  /* 메뉴 비주얼(배경/패딩/타이포/호버 언더라인) */
  #mobile-menu {
    background: #000;            /* 오버레이 배경 */
    padding-top: 80px;           /* 항목 살짝 아래로 */
    box-sizing: border-box;
  }
  #mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center;
  }
  #mobile-menu li { margin: 12px 0; }

  /* 링크 컬러/호버 (기존 clamp 폰트 사이즈는 그대로 유지) */
  #mobile-menu a {
    color: #fff !important;      /* 기본 흰색 */
    text-decoration: none;
    font-family: 'TlabModernLife-B';
    position: relative;
    transition: color 0.2s ease;
  }
  #mobile-menu a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #25f49b;
    transition: width 0.3s ease;
  }
  #mobile-menu a:hover {
    color: #25f49b !important;   /* 호버 색 */
  }
  #mobile-menu a:hover::after { width: 100%; }
}


/* === 모바일 메뉴 텍스트 크게 + 살짝 위로 + 호버 컬러 복구 === */
@media (max-width: 768px) {
  /* 중앙 정렬을 더 정확하게 하고 약간 위로 보정 */
  #mobile-menu.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(40px, env(safe-area-inset-top)) 16px
             max(28px, env(safe-area-inset-bottom)) !important;
    transform: translateY(-2.5vh) !important; /* ← 아래로 쏠림 보정(원하면 -1~ -4vh로 조절) */
  }

  /* 리스트 간격 */
  #mobile-menu ul { margin: 0; padding: 0; text-align: center; }
  #mobile-menu li { margin: 10px 0; } /* 필요하면 12~16px로 */


  
/* 메뉴 텍스트 크게 */
#mobile-menu a {
  font-family: 'TlabModernLife-B', sans-serif;
  font-size: clamp(32px, 12vw, 80px) !important; /* 🔥 화면 폭 기준으로 크게 */
  line-height: 1.5; /* 줄 간격 */
  color: #fff !important;
  text-decoration: none;
  position: relative;
}

/* 현재 페이지(active) 강조 */
#mobile-menu a.active {
  color: #25f49b !important;
}

#mobile-menu a.active::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 2px;
  background: #25f49b;
}
}






/* 모바일: 인트로 전용 touch 텍스트 레이어 */
@media (max-width: 768px) {
  #intro-touch-layer {
    position: fixed;
    inset: 0;
    z-index: 9998;           /* 햄버거/메뉴보다 아래, 본문보다 위 */
    pointer-events: none;    /* 터치 통과 */
  }
}



/* === Mobile canvas fix — put this at the VERY END === */
@media (max-width: 768px) {
  #bg-canvas {
    z-index: 0 !important;
    pointer-events: auto !important;
  }
}



/* --- HAMBUGER SAFETY OVERRIDE (모바일 최상단/클릭 보장) --- */
@media (max-width: 768px) {
  #hamburger-box {
    position: fixed !important;
    z-index: 2147483647 !important; /* 최상단 */
    pointer-events: auto !important;
  }
  /* 자식들도 클릭 가능하게 (아이콘 눌러도 됨) */
  #hamburger-box * {
    pointer-events: auto !important;
  }

  /* 메뉴는 닫혀있을 땐 클릭 막고, 열리면 허용 */
  #mobile-menu { pointer-events: none !important; }
  #mobile-menu.show { pointer-events: auto !important; }
}





/* === HAMBURGER CLICK FIX (design untouched) — paste at very end === */
@media (max-width: 768px) {
  /* 버튼 자체만 클릭 가능 (자식은 클릭 끔) */
  #hamburger-box {
    pointer-events: auto !important;
  }
  #hamburger-box * {
    pointer-events: none !important;  /* 자식이 영역/이벤트 확장 못하게 */
  }

  /* 메뉴는 열렸을 때만 클릭 허용 */
  #mobile-menu { pointer-events: none !important; }
  #mobile-menu.show { pointer-events: auto !important; }
}



/* === MOBILE MENU CLICK OVERRIDE (anchors must be clickable) === */
@media (max-width: 768px) {
  #mobile-menu.show,
  #mobile-menu.show * {
    pointer-events: auto !important; /* 어떤 earlier 규칙이 none이어도 눌리게 */
  }
}









/* PLAYGROUND 모바일 */
@media (max-width: 768px) {
  html { height: 100%; }

  body.playground-page {
    margin: 0 !important;
    padding: 0 !important;
    height: 100dvh !important;     /* iOS 시각적 뷰포트 기준 */
    overflow: hidden !important;   /* 스크롤 제거 */
    background: #fff;
  }

  /* 캔버스와 UI를 뷰포트에 고정 */
  .playground-content {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform-origin: center;
    padding: 0 !important;
  }
}


@media screen and (min-width: 769px) {
  #game-ui {
    transform: translate(-50%, -50%) scale(1.2); /* 🔥 핵심 */
    transform-origin: center;
  }
}

@media screen and (min-width: 769px) {
  #timer-display,
  #score-display {
    font-size: 24px; /* 기존 20px → 120% */
  }
}

@media screen and (min-width: 769px) {
  #ready-countdown {
    transform: translate(-50%, -50%) scale(1.2);  /* ✅ 위치 + 확대 */
    transform-origin: center;
  }
}

@media (max-width: 768px) {
  #start-button {
    font-size: 18px !important; /* 기존 18px → 22px */
  }
}



/* ✅ 모바일 대응: 카운트다운 숫자, Time/Score 폰트 */
@media screen and (max-width: 768px) {
  #ready-countdown {
    font-size: 2.2rem;
    padding: 12px 28px;
    font-family: 'TlabModernLife-B', sans-serif;
    font-weight: normal; /* ✅ 억지 볼드 제거 */
  }

  #timer-display,
  #score-display {
    font-size: 16px;
    font-family: 'TlabModernLife-M', sans-serif;
    font-weight: normal; /* ✅ 중복 볼드 제거 */
  }

  #score-display,
  #timer-display {
    bottom: 20px;
  }
}

@media screen and (max-width: 768px) {
  .play-again-btn {
    font-size: 27px !important;
    font-family: 'TlabModernLife-M', sans-serif !important;
    font-weight: normal !important;
    padding-bottom: 16.5px !important;
    padding-left: -3px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform: scale(0.8);
  }

  #ready-countdown {
    font-size: 2.7rem !important;
    padding: 10px 24px !important;
    font-family: 'TlabModernLife-B', sans-serif;
    font-weight: normal !important;

    /* ✅ 기본은 줄바꿈 없음 */
    white-space: nowrap !important;
    text-align: center;
    line-height: 1.3;
  }

  /* ✅ circle 도형 + 모바일일 때만 줄바꿈 허용용 */
  .multi-line {
    white-space: normal !important;
  }
}

/* === PLAYGROUND: 모바일 전용 캔버스 높이 고정 === */
@media (max-width: 768px) {
  #smash-canvas {
    height: 100svh !important; /* ← 100vh 대신 시각적 뷰포트 */
  }
}

























/* === SHOP 모바일: 스크롤 제거 + 중앙정렬 + 살짝 위로 올리기 === */
@media (max-width: 768px) {
  html { height: 100%; }

  body.shop-page {
    margin: 0 !important;
    padding: 0 !important;
    height: 100dvh !important;     /* iOS 시각적 뷰포트 기준 */
    overflow: hidden !important;   /* 스크롤 제거 */
    background: #fff;
  }

  /* 콘텐츠를 뷰포트에 고정해서 정확히 가운데 배치 */
  .shop-content {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transform: translateY(-1vh) !important; /* ← 여기로 '위로' 올림 (원하면 -5~-10vh로 조절) */
    transform-origin: center;
    padding: 0 !important;
  }

  /* 모바일 사이즈 */
  .emoji { font-size: 3rem !important; margin-bottom: 14px !important; }
  .shop-message {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    padding: 0 20px !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* 상단 로고/햄버거 유지 */
  body.shop-page #main-nav { display: none !important; }
  body.shop-page #top-logo {
    position: fixed !important; top: 20px !important; left: 16px !important; z-index: 1000 !important;
  }
  body.shop-page #top-logo img { height: 40px !important; width: auto !important; }
  body.shop-page #hamburger-box {
    position: fixed !important; top: 20px !important; right: 16px !important; z-index: 2147483647 !important;
  }
}






/* === PAGE TITLE (모바일) 최종 오버라이드 — Works 제외 === */
@media (max-width: 768px) {
  body:not(.works-page) .page-title {
    font-size: clamp(3.2rem, 9.5vw, 5rem) !important;
    line-height: 1.05;
    margin-top: 15px;
    text-align: center;
  }
}


/* NEWS */
@media (max-width: 768px) {
  body:not(.works-page) h1.page-title,
  body:not(.works-page) .page-title {
    font-size: clamp(3.2rem, 9.5vw, 5rem) !important;
    line-height: 1.05;
    margin-top: 15px;
    text-align: center;
  }
}








/* CONTACT */
@media (max-width: 768px) {
  .contact-page .contact-content {
    transform: translateY(14px) !important; /* ← 여기 숫자만 조절 (예: 16~32px) */
  }


  /* 1) 메시지 텍스트 */
  .contact-page .contact-desc {
    font-size: clamp(1.15rem, 4.2vw, 1.6rem) !important;
    line-height: 1.6 !important;
    margin-top: 0px !important; /* 타이틀 → 본문 간격 줄임 */
    margin-bottom: 8px !important; /* 본문 → 아이콘 간격은 그대로 */
    text-align: center !important;
    font-family: 'TlabModernLife-M', sans-serif;
  }

  /* 2) 아이콘 컨테이너 */
  .social-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* 3) 터치 박스 */
  .social-icons a,
  .icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    border: 2px solid transparent !important;
    border-radius: 50% !important;
    background: none !important;
    color: #000 !important;
  }

  /* 4) 아이콘 크기 통일 + 확대 */
  .icon-button i.fa-envelope {
    font-size: 42px !important; /* 기존 36px → 42px */
    line-height: 1 !important;
    transform: translateY(1px);
  }
  .social-icons a i.fa-instagram {
    font-size: 42px !important;
    line-height: 1 !important;
  }
  .social-icons a i.fa-behance {
    font-size: 42px !important;
    line-height: 1 !important;
  }
}








@media screen and (max-width: 768px) {
  /* 공통 요소 */
  body {
    font-size: 14px;
    padding: 10px;
  }

  #main-nav ul li a {
    font-size: 14px;
    padding: 8px;
  }

  .page-title {
    font-size: 3rem;
  }

  .contact-content,
  .shop-message {
    padding: 0 20px;
  }

  #top-logo img {
    height: 36px !important;
    width: auto !important;
  }
}







/* ✅ 모바일 홈에서만 touch me! 흰색으로 */
@media (max-width: 768px) {
  body#home-page .touch-hint {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important; /* iOS 대비 */
  }
}







/* === MOBILE | WORKS 전용 레이아웃 패치 (붙여넣기: style.css 맨 아래) === */
@media (max-width: 768px) {
  /* 페이지 여백/타이틀/설명 */
  body.works-page .works-content {
    padding: 90px 16px 40px !important; /* 상단 로고/햄버거 여유 */
    max-width: none !important;
  }
  body.works-page .works-content h1.page-title {
    font-size: 2.6rem !important;
    margin-bottom: 0.2em !important;
  }
  body.works-page .works-desc {
    font-size: 1rem !important;
    margin-bottom: 1.8em !important;
  }

  /* 필터 버튼: 2열 그리드 + 전체폭 */
  body.works-page .filter-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 14px !important;
    margin: 22px 0 10px !important;
  }
  body.works-page .filter-buttons button {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    font-size: 1rem !important;
  }

  /* Masonry: CSS columns로 2열, 가운데정렬 해제 */
  body.works-page .works-grid {
    column-count: 2 !important;
    column-gap: 14px !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: initial !important; /* ← 가운데 정렬 해제 */
  }
  /* grid-sizer는 모바일에선 불필요 */
  body.works-page .works-grid .grid-sizer { display: none !important; }

  /* 카드: 열 너비 100% 사용 (가운데 좁아짐 방지) */
  body.works-page .work-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    box-sizing: border-box !important;
  }

  /* 카드 내 타이포/뱃지 약간 축소 */
  body.works-page .work-card p {
    font-size: 0.95rem !important;
    padding: 10px !important;
    line-height: 1.55 !important;
  }
  body.works-page .work-card p strong {
    font-size: 1.05rem !important;
    margin-bottom: 6px !important;
  }
  body.works-page .badge {
    top: 10px !important; left: 10px !important;
    padding: 4px 10px !important;
    font-size: 0.8rem !important;
  }
}





/* === MOBILE | NEWS 기준으로 WORKS 타이틀을 사이즈·위치 '완전 동일' === */
@media (max-width: 768px) {
  /* NEWS에서 쓰이는 값 그대로 변수화 */
  :root {
    --m-title-size: clamp(3.2rem, 9.5vw, 5rem);
    --m-title-lh: 1.05;
    --m-title-mt: 15px;
    --m-title-mb: 0.3em;
    --m-content-pad: 70px 20px 40px; /* top / side / bottom */
  }

  /* 컨테이너 패딩 동일 (NEWS와 같게) */
  body.works-page .works-content {
    padding: var(--m-content-pad) !important;
    box-sizing: border-box !important;
  }

  /* 타이틀 사이즈·라인·여백 '완전 동일' */
  body.works-page h1.page-title,
  body.works-page .works-content h1.page-title {
    font-size: var(--m-title-size) !important;
    line-height: var(--m-title-lh) !important;
    margin-top: var(--m-title-mt) !important;
    margin-bottom: var(--m-title-mb) !important;
    text-align: center !important;
    letter-spacing: 0 !important;
  }

  /* 타이틀 위치에 영향 주지 않도록: 설명문은 타이틀 이후 간격만 */
  body.works-page .works-desc {
    margin-top: 0.6em !important;   /* 타이틀과 적당한 간격 */
    margin-bottom: 2em !important;  /* 필터와 간격 */
  }
}

/* === MOBILE | WORKS 설명문 확실히 키우기 (타이틀은 그대로) === */
@media (max-width: 768px) {
  body.works-page .works-desc {
    font-size: 1.1rem !important;   /* 확실히 크게 */
    line-height: 1.45 !important;   /* 읽기 편하게 줄간격도 살짝 늘림 */
    margin-top: 0.6em !important;   /* 타이틀과 간격 유지 */
    margin-bottom: 2em !important;  /* 버튼과 간격 유지 */
    text-align: center !important;
  }
}


/* === MOBILE | 카테고리 필터 폰트 키우고 세로폭 살짝 늘림 === */
@media (max-width: 768px) {
  body.works-page .works-content .filter-buttons button,
  body.works-page .works-content .filter-buttons a {
    font-size: 100% !important;    /* 글자 기본 크기 (살짝 키움) */
    line-height: 1 !important;     
    height: 36px !important;       /* 박스 세로폭 조금만 늘림 */
    padding: 0 !important;         
    display: flex;
    align-items: center;           
    justify-content: center;       
  }
}


/* === MOBILE | 카테고리 박스와 카드 사이 간격 동일화 === */
@media (max-width: 768px) {
  body.works-page .works-content .filter-buttons {
    margin-bottom: 12px !important;  /* 버튼들 사이 여백값과 동일하게 */
  }
}


/* Works 카드 텍스트 폰트 분리 */
.work-card p {
  margin: 0;
  font-family: 'TlabModernLife-M', sans-serif;  /* 기본은 Medium */
  font-weight: normal;                          /* 강제 bold 방지 */
}

.work-card p .card-title {
  font-family: 'TlabModernLife-B', sans-serif;  /* 제목은 Bold 폰트 파일 */
  font-weight: normal;                          /* 굵기는 폰트가 담당 */
}

.work-card p .card-date {
  font-family: 'TlabModernLife-M', sans-serif;  /* 날짜는 Medium 유지 */
  font-weight: normal;
}


.work-card p .card-title {
  display: block;  /* 제목을 블록으로 => 줄바꿈 자동 */
  margin-bottom: 10px;  /* ← 여백은 여기서 통제 (원하는 값으로 조절) */
  font-family: 'TlabModernLife-B';
  font-weight: normal;
}

.work-card p .card-date {
  display: block;
  font-family: 'TlabModernLife-M', sans-serif;
  font-weight: normal;
  font-size: 0.98rem;   /* ← 날짜 크기만 작게 (원하면 0.8rem, 0.75rem 등 조절 가능) */
  margin-top: 6px;
}












/* === PLAYGROUND | Desktop 카운트다운 중앙 보정 === */
@media (min-width: 769px) {
  #ready-countdown {
    top: 48% !important;  /* 50% → 살짝 올려서 시각적 중앙 맞춤 */
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1.2) !important;
    transform-origin: center !important;
  }
}