@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Melodrame';
  src: url('../fonts/Melodrame.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Quentin';
  src: url('../fonts/Quentin.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@media (hover: none) and (pointer: coarse), (max-width: 480px) {
  .title{
    transform: translateY(12px); /* 필요하면 10~16px 사이로 조정 */
  }
}

/* ====== ① 비율 변수: 아이폰 SE (375/667) ====== */
:root{
  --se-aspect: 0.5625; /* width / height */
}

/* ====== ② 전체 화면: 가운데 정렬 + 바깥 레터박스(검정) ====== */

html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;
  background: #000;          /* 바깥 여백 색은 유지 */
  font-family: 'Pretendard', sans-serif;
  display: flex;
  justify-content: center;   /* 가로만 가운데 */
  align-items: flex-start;   /* 세로는 위에서 시작 */
  overflow-y: auto;          /* 세로 스크롤 허용 */
  overflow-x: hidden;        /* 가로 스크롤 방지 */
}

/* ====== ③ 모바일 캔버스: 너비·높이 자동 계산으로 SE 비율 유지 ====== */
/* 기존 .container 룰을 아래로 갈아끼우면 됩니다 */
.container {
  position: relative;
  background-color: #E4DFE3;

  /* 핵심: 뷰포트 비율에 따라 캔버스가 커지되, SE 비율 고정 */
  width: min(100vw, calc(100dvh * var(--se-aspect)));
  min-height: 100dvh;        /* 최소 화면 높이만큼은 채움 */
  height: auto;              /* 내용만큼 더 길어질 수 있게 */
  overflow: hidden;
}

/* ====== ④ 노치/안전영역(옵션) ====== */
.container {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.profile-image-wrapper { position: absolute; bottom: 0; width: 100%; z-index: 10; }
.profile-img { width: 100%; height: auto; object-fit: cover; display: block; }


/* 제목 상단 */
.edition {
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: #000;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #000;
  z-index: 20;
  font-weight: 200;
}

.title {
  position: absolute;
  top: -55px;
  left: 30px;
  font-size: 8rem;
  font-family: 'Melodrame';
  z-index: 20;
  line-height: 1;                 /* 폰트 메트릭으로 생기는 위로 튐 최소화 */
  -webkit-text-size-adjust: 100%; /* iOS 확대 보정 방지 */
  text-rendering: optimizeLegibility;
}

.subtitle {
  position: absolute;
  top: 110px;
  left: 40px;
  font-size: 2rem;
  font-family: 'Melodrame';
  font-style: italic;
  z-index: 20;
}

/* 사이드 텍스트 */
.side-text {
  position: absolute;
  top: 6.5rem;
  right: -2rem;
  transform: rotate(90deg);
  font-size: 1.5rem;
  color: #000;
  z-index: 20;
  letter-spacing: 0.05em;
}

/* 공통 탭 설정 */
.tab-item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.8rem;
  color: #000000;
  font-weight: normal;
  z-index: 20;
}

.tab-item .arrow {
  font-size: 0.75rem;
  margin-top: 0.15rem;
  color: #000000;
}

.tab-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

.tab-label {
  font-family: 'Melodrame';
  font-size: 1.8rem;
  color: inherit;
  text-decoration: none; /* 밑줄 제거 */
}

.tab-label.white-outline {
  color: white;
  text-shadow:
    -0.5px -0.5px 0 #000,
     0.5px -0.5px 0 #000,
    -0.5px  0.5px 0 #000,
     0.5px  0.5px 0 #000;
}


.tab-desc {
  position: absolute;
  font-family: 'Pretendard', sans-serif;
  font-size: 0.70rem;
  color: #000000;
  font-weight: 200;
  z-index: 20;
  line-height: 1.3;
}

.tab-sub {
  font-family: 'Pretendard', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #000000;
  margin-top: 0.2rem;
  line-height: 1.3;
}


/* 좌측 고정 탭들 */
.tab-profile        { bottom: 405px; left: 24px; }
.tab-profile-desc   { bottom: 390px; left: 42px; }

.tab-schedule       { bottom: 293px; left: 24px; }
.tab-schedule-desc  { bottom: 250px; left: 42px; }

.tab-filmography       { bottom: 180px; left: 24px; }
.tab-filmography-desc  { bottom: 150px; left: 42px; }

/* 우측 하단 */
.tab-interview { bottom: 170px; right: 24px; }
.tab-videos    { bottom: 120px; right: 24px; }
.tab-game      { bottom: 70px; right: 24px; }

/* 좌측 하단 */
.tab-info {
  bottom: 20px;
  left: 75px;
  font-size: 1.8rem;
  font-family: 'Melodrame';
}

/* 바코드 */
.barcode {
  position: absolute;
  bottom: 16px;
  left: 0;
  z-index: 20;
}

.barcode img {
  height: 80px;
  object-fit: contain;
  padding-left: 15px;
}

/* 프로필 하단 이미지 */
.profile-image-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 10;
}

.profile-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 영어 텍스트 스타일 */
.english {
  font-family: 'Melodrame' !important;
  font-weight: normal !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 퀜틴 스타일 */
.quentin {
  font-family: 'Quentin' !important;
  font-weight: normal !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}