/* ============================================
   wavSMiTH Portfolio - 멀티 테마(Theme) 스킨 시스템
   ============================================ */

/* [공통 뼈대 변수] 스킨과 상관없이 고정되는 뼈대 수치 */
:root {
  --radius-panel: 28px;
  --panel-width:  450px; 
  --orbit-size:   420px;
  --ease-swing: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.5s var(--ease-swing);
  --bg-cloud: none; /* 기본값: 배경 구름 레이어 끄기 */
  --bg-pattern: none; /* 기본값: 배경 패턴 레이어 끄기 */
}

/* 1안: 민트 & 옐로우 (현재 메인 스킨) */
:root[data-theme="mint-yellow"] {
  --bg:           #00C5A1;
  --bg-dark:      #009A7E;
  --accent:       #FFE135;
  --accent-hover: #FFF176;
  --text-primary: #FFFFFF;
  --text-muted:   rgba(255,255,255,0.65);
  --orbit-line:   rgba(255,255,255,0.45);
  --orbit-inner-line: rgba(255,255,255,0.18);
  --orbit-glow:   rgba(255,225,53,0.45);
  --panel-bg:     rgba(0, 120, 96, 0.55);
  --panel-border: rgba(255,255,255,0.22);
  --node-bg:      rgba(255, 255, 255, 0.25);
  --node-border:  rgba(255, 255, 255, 0.70);
}

/* 2안: 딥 다크 & 골드 (차분하고 성숙한 분위기 예시) */
:root[data-theme="dark-gold"] {
  --bg:           #121418;
  --bg-dark:      #080a0c;
  --accent:       #D4AF37;
  --accent-hover: #F3E5AB;
  --text-primary: #F0F0F0;
  --text-muted:   rgba(255,255,255,0.45);
  --orbit-line:   rgba(255,255,255,0.35);
  --orbit-inner-line: #D4AF37; /* 노란색 실선 포인트 */
  --orbit-glow:   rgba(212, 175, 55, 0.35);
  --panel-bg:     rgba(18, 20, 24, 0.75);
  --panel-border: rgba(255,255,255,0.12);
  --node-bg:      rgba(255, 255, 255, 0.1);
  --node-border:  rgba(255, 255, 255, 0.45);
}

/* 3안: 노마딕 트라이브 (파스텔 크림 & 딥 세룰리안 포인트 - 밝은 테마) */
:root[data-theme="nomadic-tribe"] {
  --bg:           #F5F2EB;       
  --bg-dark:      #E6DFD3;       
  --accent:       #165296;       /* 사용자 지정 정확한 색상 (HEX: #165296) */
  --accent-hover: #1b63b5;       
  --text-primary: #1A1E26;       
  --text-muted:   #535A6B;       
  --orbit-line:   rgba(22, 82, 150, 0.30); 
  --orbit-inner-line: rgba(22, 82, 150, 0.20);
  --orbit-glow:   rgba(22, 82, 150, 0.15);
  --panel-bg:     rgba(215, 224, 235, 0.95); 
  --panel-border: rgba(22, 82, 150, 0.15);
  --node-bg:      rgba(255, 255, 255, 0.6);
  --node-border:  #1A1E26; 
  
  --lang-active:  #165296;       
  --lang-inactive: #8BA1B6;      
}

/* 4안: 퍼플 클라우드 (강렬한 네온 퍼플 오로라 & 코스믹 웨이브) - 성능 최적화 버전 */
:root[data-theme="purple-cloud"] {
  --bg:           #080212;
  --bg-dark:      #040008;
  --accent:       #F3C15D;       /* 골드 옐로우 유지 (가독성 최적) */
  --accent-hover: #FFE2A6;
  --text-primary: #FFFFFF;
  --text-muted:   rgba(255, 255, 255, 0.70);
  --orbit-line:   rgba(255, 255, 255, 0.30);
  --orbit-inner-line: rgba(243, 193, 93, 0.25);
  --orbit-glow:   rgba(142, 68, 173, 0.45);
  --panel-bg:     rgba(8, 2, 18, 0.75);
  --panel-border: rgba(255, 255, 255, 0.12);
  --node-bg:      rgba(255, 255, 255, 0.12);
  --node-border:  #A260C6;

  /* 1차 레이어: 멈춰있는 광활한 은하수 색상역 */
  --bg-cloud: 
    radial-gradient(circle at 10% 90%, rgba(224, 36, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(0, 212, 255, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 80%);
}

/* 2차 레이어: 부드럽게 회전하는 오로라 덩어리 (GPU 가속 blur) */
[data-theme="purple-cloud"] body::before {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: -2;
  background: 
    radial-gradient(ellipse at 50% 20%, rgba(224, 36, 255, 0.25), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 212, 255, 0.20), transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(138, 43, 226, 0.20), transparent 60%);
  filter: blur(80px);
  animation: auroraSpin 35s linear infinite;
  pointer-events: none;
}

/* 3차 레이어: 굽이치는 도트/선형 웨이브 패턴 (초경량 CSS SVG) */
[data-theme="purple-cloud"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v120H9V0zm100 0h2v120h-2V0zM40 0h2v120h-2V0zm40 0h2v120h-2V0z' fill='rgba(224, 36, 255, 0.05)' fill-rule='evenodd'/%3E%3Cpath d='M0 9h120v2H0V9zm0 100h120v2H0v-2zM0 40h120v2H0V40zm0 40h120v2H0V80z' fill='rgba(0, 212, 255, 0.04)' fill-rule='evenodd'/%3E%3C/svg%3E"),
    radial-gradient(1.5px 1.5px at 10% 10%, #E024FF, transparent),
    radial-gradient(1.2px 1.2px at 30% 60%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 80% 20%, #00d4ff, transparent),
    radial-gradient(1px 1px at 70% 80%, #fff, transparent);
  background-size: 120px 120px, 300px 300px, 200px 200px, 400px 400px, 150px 150px;
  opacity: 0.6;
  mix-blend-mode: screen;
  animation: waveShift 50s linear infinite;
  pointer-events: none;
}

@keyframes auroraSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes waveShift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 240px 240px, -300px -300px, 200px 200px, -400px -400px, 150px 150px; }
}

/* 5안: 사이버 트렁크 (네온 핑크 & 사이언 블루 - 일러스트 감성) */
:root[data-theme="cyber-trunk"] {
  --bg:           #FFFFFF;       /* 기본 바탕은 깨끗한 화이트 */
  --bg-dark:      #F0F8FF;       
  --accent:       #FF2D55;       /* 식물 잎사귀의 강렬한 마젠타 핑크 */
  --accent-hover: #FF66B2;       
  --text-primary: #1A1A1A;       /* 진한 블랙 (사이버펑크 로고 느낌) */
  --text-muted:   #666666;       
  --orbit-line:   rgba(0, 0, 0, 0.25); 
  --orbit-inner-line: rgba(0, 229, 255, 0.5); /* 기계 부위의 일렉트릭 블루 포인트 */
  --orbit-glow:   rgba(255, 45, 85, 0.25);
  --panel-bg:     rgba(255, 255, 255, 0.82); /* 맑은 화이트 유리 느낌 */
  --panel-border: rgba(0, 0, 0, 0.08);
  --node-bg:      rgba(255, 45, 85, 0.1);
  --node-border:  #FF2D55;
  
  /* [원복] 처음의 깨끗한 3단 그라데이션 상태로 복구 (상단 핑크 - 중앙 화이트 - 하단 블루) */
  --bg-cloud: linear-gradient(180deg, rgba(255, 45, 85, 0.15) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 229, 255, 0.12) 100%);

  /* 나뭇잎 패턴 제거 */
  --bg-pattern: none;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
  /* 테마(스킨) 스위칭 시 배경과 텍스트가 부드럽게 스며드는 전환 효과 */
  transition: background-color 0.5s ease-out, background-image 0.5s ease-out, color 0.4s;
}

body {
  background: var(--bg-pattern), var(--bg-cloud), linear-gradient(135deg, var(--bg) 0%, var(--bg-dark) 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 배경 노이즈 텍스처 (프리미엄 질감) ---- */
.bg-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ---- App Wrapper ---- */
#app {
  position: relative;
  width: 100%;
  height: 100%; /* 모바일 툴바 잘림 방지 기본값 */
  height: 100dvh; /* 최신 브라우저 동적 툴바 완벽 대응 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
}

/* ============================================
   ORBIT SECTION
   ============================================ */
#orbit-section {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1); /* 시작점을 scale(1)로 명시하여 팝 현상 제거 */
  will-change: transform;
  transition: left var(--transition), top var(--transition), transform var(--transition);
  z-index: 10;
}

/* 패널 열릴 때 오빗 이동 및 크기 조절 (원복된 쫀쫀한 박자감) */
#app.panel-open #orbit-section {
  left: 30%;
  transform: translate(-50%, -50%) scale(0.75);
}

/* ---- Orbit Container ---- */
#orbit-container {
  position: relative;
  width: var(--orbit-size);
  height: var(--orbit-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- SVG Ring ---- */
#orbit-ring {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 18px var(--orbit-glow));
}

.orbit-path {
  fill: none;
  stroke: var(--orbit-line);
  stroke-width: 1.2px;
  stroke-dasharray: 6 10;
  animation: orbit-spin 60s linear infinite;
  transform-origin: 250px 250px;
}

.orbit-inner {
  fill: none;
  stroke: var(--orbit-inner-line);
  stroke-width: 1px;
  r: 185;
}

@keyframes orbit-spin {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1000; }
}

/* ---- Center Typography ---- */
#orbit-center-text {
  position: absolute;
  top: 50%; left: 50%;
  /* 쏠림 방지를 위해 정렬 로직을 script.js (GSAP)로 이관합니다. 초기 위치는 JS에서 잡습니다. */
  text-align: center;
  user-select: none;
  pointer-events: auto;
  z-index: 50;
  /* 제목과 부제목을 감싸는 가상의 사각형 히트박스 (오빗 내부) */
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}

.title-main {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  letter-spacing: 0.08em;
  color: var(--text-primary);
  /* text-shadow 제거: 더 깔끔하고 현대적인 디자인을 위함 */
  line-height: 1;
}

.title-sub {
  margin-top: 0.55rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  font-size: clamp(0.65rem, 1.5vw, 0.82rem);
  letter-spacing: 0.20em;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1.7;
}

/* ---- Orbit Node Buttons ---- */
#orbit-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orbit-node {
  position: absolute;
  width: 14px;         /* 완전한 원형 축소 */
  height: 14px;
  border-radius: 50%;
  background: var(--node-bg);
  border: 1.5px solid var(--node-border);
  cursor: pointer;
  pointer-events: all;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform: translate(-50%, -50%);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.orbit-node:hover {
  background: rgba(255, 225, 53, 0.35);
  border-color: rgba(255, 225, 53, 0.85);
  transform: translate(-50%, -50%) scale(1.4);
}

.orbit-node.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.3);
}

/* ---- 궤도 바깥 카테고리 텍스트 레이블 ---- */
#orbit-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orbit-label {
  position: absolute;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-primary);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
  transition: color 0.25s;
}

.orbit-sub-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  margin-top: -2px;
}

.orbit-label.active {
  color: var(--accent);
}

/* ============================================
   CONTENT PANEL (우측 슬라이드)
   ============================================ */
#content-panel {
  position: fixed;
  top: 0; right: 0;
  width: var(--panel-width);
  height: 100vh;
  background: var(--panel-bg);
  border-left: 1px solid var(--panel-border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 0;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition);
  z-index: 100;
  border-radius: var(--radius-panel) 0 0 var(--radius-panel);
  overflow: hidden;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* 터치 스크롤 시 배경이 같이 스크롤되는 꿀렁임 현상 완벽 차단 */
  scrollbar-gutter: stable; /* 스크롤바가 생기거나 말거나 레이아웃 뼈대 고정 */
  padding: 30px 40px 20px;
}

/* 커스텀 투명-블랙 스크롤바 */
.panel-content::-webkit-scrollbar {
  width: 8px;
}
.panel-content::-webkit-scrollbar-track {
  background: transparent;
}
.panel-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.panel-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

#app.panel-open #content-panel {
  transform: translateX(0);
}

/* 닫기 버튼 */
#panel-close {
  position: absolute;
  top: 22px; right: 26px;
  background: rgba(255,255,255,0.12);
  border: 1px solid var(--panel-border);
  border-radius: 50%;
  z-index: 999;
  width: 38px; height: 38px;
  font-size: 1rem;
  color: var(--text-primary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

#panel-close:hover {
  background: rgba(255,225,53,0.25);
  transform: rotate(90deg);
}

/* 패널 내 타이틀 */
.panel-title {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
  /* text-shadow 제거: 패널 내 가독성 극대화 */
}

.panel-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
  line-height: 1.6;
}



/* ---- Career List ---- */
.career-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.career-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--panel-border);
}

.career-year {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: var(--accent);
  white-space: nowrap;
  padding-top: 3px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  width: 135px; /* 날짜 길이에 상관없이 회사명이 일직선으로 시작되도록 고정 */
}

.career-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.career-detail strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent); /* 강조색(Deep Navy) 적용 */
  line-height: 1.4;
}



.career-detail span {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* ---- Career Game Grid (인스타그램 갤러리) ---- */
.career-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PC에서도 모바일처럼 시원한 2열 세팅 */
  gap: 12px;
  padding-top: 5px;
}

.career-grid-item {
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 215; /* 스팀 캡슐 이미지 표준 비율(가로형) */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.05); /* 로딩 중 배경색 */
  border: 1px solid var(--panel-border);
  transition: transform 0.25s ease-out, box-shadow 0.25s;
}

.career-grid-item:hover {
  transform: translateY(-4px) scale(1.02); /* 호버 시 살짝 떠오르는 고급스러운 액션 */
  box-shadow: 0 8px 16px var(--orbit-glow);
  z-index: 2;
}

.career-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}




/* ---- YouTube 부드러운 접이식(Fluid Accordion) 폴더 스타일 ---- */
.yt-folder {
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.yt-folder-title {
  font-family: 'Outfit', 'Pretendard', sans-serif;
  margin-bottom: 16px;
  padding-left: 5px;
  cursor: pointer;
  position: relative;
  user-select: none;
  line-height: 1.3;
}

/* 2줄로 쪼개진 BGM 카테고리 (회사명 / 게임명) */
.yt-folder-company {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.yt-folder-game {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.yt-folder-title:hover .yt-folder-company {
  color: var(--accent); /* 하얀색 고정 대신 테마 포인트 컬러로 변경하여 가독성 확보 */
}

/* cyber-trunk 테마에서는 호버 시 너무 밝아지지 않도록 별도 조절 */
[data-theme="cyber-trunk"] .yt-folder-title:hover .yt-folder-company {
  color: #1A1A1A; /* 기본 텍스트색 정도로만 유지 */
}

.yt-folder-title:hover .yt-folder-game,
.yt-folder-title:hover {
  color: var(--accent-hover); /* SFX 폴더를 포함하여 전체적으로 호버 효과 적용 */
}

/* 모던한 + / × 아이콘 애니메이션 */
.yt-folder-title::after {
  content: '+';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-muted);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
}

/* cyber-trunk 테마 전용: 아이콘 가시성 확보 (차분한 파스텔 블루) */
[data-theme="cyber-trunk"] .yt-folder-title::after {
  color: #A5BFD1;
  opacity: 1;
}

.yt-folder.open .yt-folder-title::after {
  transform: translateY(-50%) rotate(45deg); /* +가 45도 회전해 ×가 됨 */
  opacity: 0.5;
}

/* CSS Grid 0fr -> 1fr 트릭으로 완벽하게 부드러운 열고 닫힘 */
.folder-content-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.yt-folder.open .folder-content-wrapper {
  grid-template-rows: 1fr;
}

.folder-content {
  overflow: hidden; /* 영역 밖 콘텐츠 가리기 필수 */
}

.yt-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 16px 14px;
  margin-bottom: 20px;
  text-align: left;
}

.yt-song-title {
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-left: 4px;
  letter-spacing: 0.02em;
}

.yt-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 비율 */
  height: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.yt-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ============================================
   PANEL CONTENT FADE-IN
   ============================================ */
.panel-content {
  animation: panelFadeIn 0.5s ease forwards;
}

/* ===== 외부 떠있는 위젯: 언어 전환 ===== */
#language-switcher {
  position: absolute;
  bottom: 26px;
  right: 26px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  padding: 6px 12px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  transform: translateX(0);
  transition: transform var(--transition);
}

#app.panel-open #language-switcher {
  transform: translateX(calc(var(--panel-width) * -1));
}

.lang-btn {
  background: none;
  border: none;
  color: var(--lang-inactive, var(--text-muted));
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.lang-btn.active, .lang-btn:hover {
  color: var(--lang-active, var(--accent));
}

.lang-sep {
  color: var(--panel-border);
  font-size: 0.8rem;
  padding-bottom: 2px;
}

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  /* [핵심] 유저가 아래로 스와이프하여 모바일 주소창을 숨길 수 있도록 강제 스크롤 허용 */
  html, body {
    overflow-y: auto; 
    height: auto;
    min-height: 140vh; /* 여유 스크롤 공간 창출 (주소창 밀어내기 용도) */
  }
  body {
    background-attachment: fixed; /* 스크롤해도 배경색 그라데이션은 끌려올라가지 않게 단단히 고정 */
  }
  #app {
    height: 140vh; /* 뼈대도 같이 길게 늘림 */
  }

  :root {
    --orbit-size: 240px; /* 오빗 중심축을 확 줄여 글씨 잘림 방지 */
    --panel-width: 100vw;
  }
  
  /* 모바일용 오빗 레이블 글씨 밸런스 축소 */
  .title-main { font-size: 1.6rem; }
  .title-sub { 
    font-size: 0.68rem; /* 모바일에서 더 크고 시원하게 */
    margin-top: 0.3rem; 
    letter-spacing: -0.02em; /* 커진 폰트에 맞춰 자간 밀착 */
    white-space: nowrap;     /* 어떤 해상도에서도 3줄 방지 */
    display: block;
  }
  .title-sub br { display: block; content: ""; margin-top: 2px; } /* BR 태그만 줄바꿈 허용 */
  .orbit-label { font-size: 0.75rem; letter-spacing: 0.1em; text-shadow: none; }
  .orbit-sub-label { font-size: 0.55rem; }
  .orbit-node { width: 12px; height: 12px; } /* 버튼 크기도 아주 살짝 축소 */

  #content-panel {
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    top: auto; bottom: 0; right: 0;
    width: 100%; height: 72vh;
    transform: translateY(100%);
  }
  #app.panel-open #content-panel {
    transform: translateY(0);
  }
  #app.panel-open #orbit-section {
    left: 50%;
    top: 17%; /* 패널이 올라올 때 오빗이 화면 약간 더 위쪽으로 올라감 */
    transform: translate(-50%, -50%) scale(0.68);
  }

  /* 언어전환 버튼 모바일 (화면 빈 공간 중앙 이동) */
  #language-switcher {
    position: fixed; 
    bottom: auto; right: auto;
    top: 20px; left: 20px; 
    background: var(--panel-bg); /* PC 버전과 색상 통일 (스킨 호환) */
    transform: none; 
    z-index: 9999;
  }
  #app.panel-open #language-switcher {
    transform: none; 
  }

  /* 모바일(화면 좁을 때)에서는 인스타그램 갤러리를 3칸에서 2칸으로 자동 재배치 */
  .career-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}