/* ============================================================
   mobile.css — 폰 화면 마무리 (맨 마지막에 로드되므로 여기서 덮어씁니다)

   데스크탑은 공들여 잡았는데 폰은 자동으로 접히게만 둔 탓에
   가로 넘침, 겹침, 자간/행간, 터치 반응이 부실했던 것을 바로잡습니다.
   ============================================================ */

/* ---------- 0. 가로 스크롤 원천 차단 ----------
   clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않아,
   iOS 에서 body:overflow-x:hidden 이 새는 문제까지 막습니다. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* 건너뛰기 링크: 음수 좌표 대신 표준 방식으로 숨깁니다. */
.skip {
  position: absolute; left: 8px; top: 8px;
  width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  width: auto; height: auto; padding: 8px 14px;
  clip-path: none; white-space: normal; z-index: 100;
}

/* 무대 시간 칩의 무대 이름 (데스크탑에서는 그냥 한 줄로 보이게) */
.ticket__stages span b { font-weight: 400; margin-right: .5em; }

/* ============================================================
   아래는 화면 크기와 상관없이 적용되는 마무리 보정입니다.
   ============================================================ */

/* ---------- 위쪽 흐르는 띠 ----------
   아래쪽 띠와 반대 방향으로 흘러서 첫 화면을 위아래로 감쌉니다. */
.ticker--top {
  position: relative;
  z-index: 4;
  height: 42px;
  background: var(--ink);
  border-bottom: 1px solid rgba(241,234,226,.16);
}
.ticker--top .ticker__track {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  color: var(--pink);
  opacity: .9;
}
.ticker--top .ticker__track span { padding-right: 32px; }
.ticker__track--r { animation: tickr 34s linear infinite; }

/* ---------- 카운트다운이 1초마다 밀리던 문제 ----------
   Anton 은 숫자마다 폭이 달라서 값이 바뀔 때 줄 전체가 흔들렸습니다.
   숫자 칸을 "00" 너비(2ch)로 붙들어 둡니다. 글자 크기에 따라 같이 줄어들어
   화면 크기와 무관하게 안전합니다. 고정 px 로 잡으면 데스크탑에서 칸이
   넓어져 포스터를 덮습니다. */
.cv {
  display: block;
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cc { flex: 0 0 auto; }
.badge__d { display: block; text-align: center; }
.countdown__label { min-height: 1.2em; }

/* 포스터가 스크롤 중에 떨리지 않도록 */
.hero__poster-frame { backface-visibility: hidden; transform: translateZ(0); }

/* ============================================================
   글꼴 배치 — 섹션마다 성격을 조금씩 다르게
     Anton          : 영문 대제목 (포스터의 목소리)
     Black Han Sans : 강조 한 방 (히어로 장소, 도장, 티켓 혜택)  ← 첫 시안의 그 글씨
     Do Hyeon       : 한글 제목, 버튼, 곡 제목, 후원사 스티커
     Pretendard     : 읽는 글 (유의사항 본문, 안내 문구)
     Share Tech Mono: 금액과 전화번호
   ============================================================ */

/* 히어로 — 장소 이름은 가장 세게 */
.hero__venue { font-family: var(--font-impact); letter-spacing: -.01em; }

/* 공연 안내 — 티켓 혜택 한 줄만 강조, 나머지는 제목 글꼴 */
.ticket__perk { font-family: var(--font-impact); letter-spacing: -.01em; }

/* 셋리스트 — 곡 제목은 제목 글꼴, 가수는 본문 글꼴로 살짝 눌러서 */
.song__title { font-family: var(--font-ko); }
.song__artist { font-family: var(--font-body); font-weight: 600; }

/* ---------- 종이 위 글씨 대비 (모든 화면 공통) ----------
   분홍 #D65C8E 과 민트 #4DBE8C 는 크림색 종이 위에서 대비가 2~3:1 밖에 안 나옵니다.
   글씨로 쓸 때만 한 단 진한 색으로 바꿉니다. 면으로 쓸 때는 그대로 둡니다. */
.ticket__main .c-pink,
.ticket__grid dt,
.ncard .c-pink,
.notice__contact .c-pink,
.tkcard--form .c-pink,
.tkcard--price .c-pink,
.price__when { color: var(--pink-on-paper); }
.ncard__en { color: var(--pink-on-paper) !important; }
.ncard--mint .ncard__en { color: var(--mint-on-paper) !important; }

/* 작은 영문 라벨은 자간을 줄여야 읽힙니다 */
.t-label { letter-spacing: .1em; }

/* 읽어야 하는 글은 모두 같은 옷을 입힙니다.
   글꼴·굵기·줄간격·자간을 한 벌로 묶어 두면 페이지마다 들쭉날쭉하지 않습니다. */
.ncard__body p,
.notice__intro,
.ticket__how,
.setlist__note,
.sponsor__note,
.info__hint,
.tkcard__lead,
.sphead__sub,
.shop__tag {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.78;
  letter-spacing: -.005em;
}
.stamp__text { font-family: var(--font-impact); }

/* 후원사 — 스티커는 제목 글꼴 */
.chip { font-family: var(--font-ko); }

/* 히어로 하단 안내는 두 줄로 나눠 읽기 좋게 */
.hero__caption { display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.hero__caption-line { display: block; }

/* ---------- 요금표: 사전 예매 / 현장 구매 ---------- */
.price { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px; }
.price__row { display: flex; align-items: baseline; gap: 10px; }
/* 현장 구매가는 "할인 전 가격"이 아니라 더 비싼 가격이라 취소선을 긋지 않습니다.
   크기와 진하기만으로 사전 예매가를 주인공으로 세웁니다. */
.price__amount {
  font-family: var(--font-mono);
  font-size: calc(var(--fs-num) * .6);
  line-height: 1.1;
  color: var(--ink);
  opacity: .6;
}
.price__when {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--ink);
  opacity: .6;
}
/* 사전 예매가가 주인공 */
.price__row--best .price__amount {
  font-size: var(--fs-num);
  color: var(--paper);
  opacity: 1;
  text-shadow: 3px 3px 0 var(--ink);
}
.price__row--best .price__when {
  color: var(--ink);
  opacity: 1;
  background: var(--paper);
  padding: 3px 9px;
}
.price__note {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  color: var(--ink);
  opacity: .75;
}

/* ---------- 티켓·영수증의 숫자 ---------- */
.ticket__price,
.barcode + .ticket__admit,
.contact__phone {
  font-family: var(--font-mono);
}
.ticket__addr, .ticket__addr .addr__link { font-family: var(--font-ko); font-weight: 400; letter-spacing: -.01em; }

/* ---------- 버튼 안쪽 여유 (글자가 테두리에 붙던 것) ---------- */
.btn { padding-inline: 22px; }

/* ---------- 1. 한글 가독성 (모든 화면 공통) ---------- */
p, .ncard__body p, .notice__intro, .ticket__how, .setlist__note, .sponsor__note {
  text-wrap: pretty;
}

@media (max-width: 640px) {

  /* ---------- 2. 상단바 균형 ----------
     티켓 버튼이 너무 커서 로고를 눌러버리던 것을 정리합니다. */
  .nav__logo img { height: 42px; }
  .nav__ticket {
    font-size: var(--fs-label);
    letter-spacing: .06em;
    padding: 9px 13px;
    box-shadow: 3px 3px 0 var(--paper);
  }
  .nav__right { gap: 8px; }

  /* ---------- 3. 히어로 ---------- */

  /* 소개 문구: 자간을 줄이고 두 줄이 고르게 떨어지도록 */
  .hero__eyebrow {
    letter-spacing: .12em;
    line-height: 1.6;
    max-width: 19em;
    margin-inline: auto;
    text-wrap: balance;
    opacity: .7;
  }

  /* TONIGHT 네온: 포스터 오른쪽 위 모서리에 걸치되 화면 밖으로 안 나가게 */
  .hero__tonight {
    right: -10px;
    top: -20px;
    font-size: var(--fs-label);
    letter-spacing: .12em;
    padding: 6px 12px;
    border-width: 2px;
    border-radius: 10px;
  }

  /* 포스터: 마우스가 없으니 천천히 숨 쉬게 하고, 손가락으로 문지르면 기울어집니다. */
  .hero__poster { width: 252px; touch-action: pan-y; }
  .hero__poster-frame { animation: posterFloat 7s ease-in-out infinite; }
  /* 문지르는 동안에는 떠 있는 애니메이션을 멈춰 두 움직임이 겹치지 않게 */
  .hero__poster.is-touched .hero__poster-frame { animation: none; }
  @keyframes posterFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-9px) rotate(.5deg); }
  }

  /* 제목 줄간격 */
  .hero__headline { gap: 12px; }
  .hero__headline h1 { line-height: .92; }

  /* D-day 배지: 돌아가는 테두리 글자를 되살립니다. 이게 이 사이트의 얼굴입니다.
     배지가 너무 크면 옆의 HOURS 라벨을 그림자로 덮어버려서 조금 줄였습니다. */
  .badge { width: 112px; height: 112px; }
  .badge__disc { box-shadow: 0 0 0 4px var(--paper), 6px 6px 0 4px var(--ink); }
  .badge__rim { display: block; }
  .badge__rim text { font-size: 13px; }
  .badge__l { display: block; font-size: 9px; letter-spacing: .16em; }
  .badge__d { line-height: .88; }

  .countdown { gap: 16px; align-items: center; }
  .countdown__nums { gap: 6px; }
  .countdown__row { gap: 10px; }
  .cl { letter-spacing: .08em; opacity: .85; }
  .cc { padding-bottom: 18px; opacity: .3; }

  /* 날짜 블록 */
  .hero__date { gap: 2px; }
  .hero__weekday { letter-spacing: .18em; opacity: .85; }
  .hero__right { gap: 14px; }
  .hero__caption { opacity: .6; letter-spacing: .1em; }

  /* 버튼 글씨가 테두리에 닿을 듯 말 듯 하던 것 */
  .hero__cta { gap: 10px; }
  .hero__cta .btn { padding: 15px 12px; letter-spacing: -.02em; }
  .info__actions { gap: 10px; }
  .info__actions .btn { padding: 14px 10px; gap: 7px; }

  /* ---------- 4. 공연 안내 ---------- */

  /* 무대 시간: 2+1 로 어긋나던 것을 세 줄로 가지런히 */
  .ticket__stages { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .ticket__stages span {
    display: flex; align-items: baseline; gap: 10px;
    font-size: var(--fs-label); letter-spacing: .08em;
    padding: 9px 14px;
  }
  .ticket__stages span b { font-weight: 400; color: var(--pink); min-width: 3em; }

  /* 두 칸으로 나누면 "2026.11.05 (THU)" 와 "19:00 ~ 02:00" 이 두 줄로 쪼개집니다.
     한 줄에 항목 하나씩, 이름은 왼쪽 값은 오른쪽으로 세웁니다. */
  .ticket__grid { grid-template-columns: 1fr; gap: 13px; }
  .ticket__grid > div,
  .ticket__grid > div:nth-child(n+3) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }
  .ticket__grid dt { flex: 0 0 auto; padding-top: 2px; }
  .ticket__grid dd { text-align: right; line-height: 1.2; }
  .ticket__grid dd small { display: block; margin-top: 2px; }
  /* 주소는 길어서 오른쪽 정렬하면 "41" 만 떨어집니다. 한 칸을 통째로 씁니다. */
  .ticket__grid > div:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .ticket__grid > div:last-child dd { text-align: left; }
  .ticket__addr { line-height: 1.45; }

  /* 섹션 부제가 "JECHEON" 만 다음 줄로 떨어지던 것 */
  .sec-head__right {
    letter-spacing: .1em;
    line-height: 1.7;
    text-wrap: balance;
    opacity: .85;
  }

  /* ---------- 5. 셋리스트 ---------- */
  .song { gap: 10px; }
  .song__num { width: 32px; opacity: .85; }
  .song__meta { gap: 3px; }
  .song__artist { letter-spacing: 0; opacity: .9; }
  .song__title { letter-spacing: -.01em; }

  /* COMING SOON 이 너무 흐려서 눌러도 되는지 몰랐던 것을 또렷하게 */
  .song.is-soon .song__action {
    opacity: 1;
    color: var(--paper);
    font-size: var(--fs-label);
    letter-spacing: .1em;
    border: 1px solid rgba(241,234,226,.35);
    border-radius: 999px;
    padding: 3px 9px;
  }
  .song.is-soon .song__action span { opacity: .55; }

  /* ---------- 6. 유의사항 ---------- */
  /* ---- 안내 및 유의사항: 폰에서 읽기 편하게 ----
     번호 도장은 작게, 한글 제목은 크게, 본문은 넉넉한 줄간격으로. */
  .ncard { padding: 18px 16px; gap: 13px; align-items: flex-start; }
  .ncard svg { width: 44px; height: 44px; margin-top: 2px; }
  .ncard__body { gap: 3px; }
  .ncard__title { font-size: 21px; line-height: 1.25; }
  .ncard__en { font-size: 11px; letter-spacing: .14em; }
  .ncard__body p {
    margin-top: 7px; font-size: 16px; line-height: 1.78;
    letter-spacing: -.005em; color: rgba(14,11,12,.88);
  }

  .notice__banner-wrap { padding-inline: 4px; }
  /* 붉은 글씨가 분홍 바탕에 묻혀 잘 안 보였습니다. 종이 위에 찍은 도장으로 바꿉니다 */
  /* 폰에서는 잉크 번짐을 아예 끕니다.
     글자가 작아 노이즈 마스크가 획을 먹어 아무도 못 읽었습니다. */
  .stamp {
    width: 100%; padding: 14px 16px 12px; gap: 3px;
    border-width: 4px; box-shadow: 5px 5px 0 rgba(14,11,12,.5);
    -webkit-mask-image: none; mask-image: none;
  }
  .stamp::after { display: none; }
  .stamp__text, .stamp__sub { text-shadow: none; -webkit-text-stroke: 0; }
  .stamp__text { font-family: var(--font-impact); font-size: 23px; letter-spacing: -.01em; white-space: nowrap; }
  .stamp__sub { font-size: 11px; letter-spacing: .2em; opacity: .85; }

  .notice__contact { padding: 20px 18px; gap: 16px; }
  .notice__intro { font-size: 16px; line-height: 1.75; }
  .contact__phone { letter-spacing: .02em; }

  /* ---------- 7. 후원사 ---------- */
  .chip { letter-spacing: -.01em; }

  /* ---------- 8. 푸터 ---------- */
  .footer__insta { font-size: var(--fs-body); }
  .footer__bottom { letter-spacing: .1em; line-height: 1.6; }
}

/* ---------- 9. 터치 기기 반응 ----------
   마우스가 없으니 눌렀을 때 반응이 있어야 살아있는 느낌이 납니다. */
@media (hover: none) {
  .btn, .chip, .sbtn, .share, .nav__ticket, .tab, .totop, .addr__copy {
    transition: transform .12s ease-out;
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active, .chip:active, .sbtn:active, .share:active,
  .nav__ticket:active, .tab:active, .totop:active, .addr__copy:active {
    transform: scale(.96);
  }
  .song { -webkit-tap-highlight-color: transparent; }
  .song:active { background: rgba(241,234,226,.07); }
  .song.is-now:active { background: var(--pink); }
  /* 호버 전용 효과가 터치에서 끈적하게 남는 것을 막습니다. */
  .chip:hover { transform: none !important; }
  .btn:hover { transform: none; }
}

/* ---------- 10. 모션 감소 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__poster-frame { animation: none !important; }
  .btn, .chip, .sbtn, .share, .nav__ticket, .tab, .totop, .addr__copy { transition: none !important; }
}