/* =========================================================
   kissmissbass — 02 / info
   palette : #ffffff · #001F3F · grays
   ========================================================= */

/* ---------------------------------------------------------
   폰트
   · 로고·영문: 맥/아이폰은 시스템 Helvetica,
                윈도우 등은 fonts/ 의 TeX Gyre Heros (Helvetica 대체)
   · 한글: Pretendard (index.html 에서 CDN으로 불러옴)
   · 세리프 이탤릭 포인트(캡션·CLICK to kiss! 등): fonts/kmb-serif-italic
   --------------------------------------------------------- */
@font-face {
  font-family: "KMB Heros";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/tex-gyre-heros-regular.woff") format("woff");
}
@font-face {
  font-family: "KMB Heros";
  font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/tex-gyre-heros-bold.woff") format("woff");
}
@font-face {
  font-family: "KMB Heros";
  font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/tex-gyre-heros-italic.woff") format("woff");
}
@font-face {
  font-family: "KMB Serif";
  font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/kmb-serif-italic.woff") format("woff");
}

:root {
  --navy: #001F3F;
  --white: #ffffff;
  --g50:  #f4f4f5;
  --g100: #e9e9eb;
  --g200: #dcdee1;
  --g300: #c6c9ce;
  --g400: #a6aab1;
  --g500: #80858d;
  --g600: #5b6069;

  --sans: "Helvetica Neue", Helvetica, "KMB Heros", "Pretendard Variable", Pretendard, sans-serif;
  --kr: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --serif: "KMB Serif", "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --r: 180px;                      /* JS가 화면 크기에 맞춰 덮어씀 */
  --shade-k: .12;                    /* 명암 세기: 1 = 기본, 0.7 / 0.45 / 0.25 = 점점 약하게 */
  --h: calc(var(--r) * .32);         /* 밴드 폭 (script.js 와 같은 비율) */

  --zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 7.5 L4 2.5 L8 7.5 L12 2.5 L16 7.5' fill='none' stroke='%23a6aab1' stroke-width='1'/%3E%3C/svg%3E");
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='22'%3E%3Cpath d='M0 0 L36 22 M36 0 L0 22' stroke='%23c6c9ce' stroke-width='1.2'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@property --litL { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --litR { syntax: '<number>'; inherits: false; initial-value: 0; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--white);
  color: var(--navy);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: var(--noise) 0 0 / 180px 180px;
  opacity: .05;
}

/* ---------- 코너 텍스트 ---------- */
.meta {
  position: fixed; left: var(--gutter); right: var(--gutter); z-index: 10;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px;
  font-size: clamp(12px, 1.15vw, 15px);
  pointer-events: none;
}
.meta > * { pointer-events: auto; }
.meta b { font-weight: 700; }
.meta--top { top: clamp(16px, 3vw, 32px); }
.meta--bottom { bottom: max(clamp(16px, 3vw, 32px), env(safe-area-inset-bottom)); }

.hint { color: var(--navy); pointer-events: none; }
.hint:not(:empty)::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-radius: 50%; background: var(--navy); vertical-align: middle;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .15; } }

.index {
  position: fixed; z-index: 12;
  top: clamp(16px, 2.8vw, 30px); left: var(--gutter);
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.index button {
  font-family: var(--kr); font-size: 13px; font-weight: 500; letter-spacing: -0.03em; color: var(--g500);
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em;
  transition: color .2s, text-decoration-color .2s;
}
.index button:hover, .index button:focus-visible { color: var(--navy); text-decoration-color: currentColor; outline: none; }

/* =========================================================
   STAGE / 3D 티켓
   ========================================================= */
.stage {
  position: fixed; inset: 0;
  overflow: hidden;
  perspective: 1100px;
  touch-action: none;                  /* 손가락으로 밀 때 화면이 스크롤되지 않게 */
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.stage .ticket { cursor: pointer; }
.stage.is-grabbing, .stage.is-grabbing .ticket { cursor: grabbing; }

.world {
  position: absolute; left: 50%; top: 50%;
  transform-style: preserve-3d;
}

.ticket {
  --rad: var(--r);
  --sh: var(--h);
  --th: max(2px, calc(var(--sh) * .045));   /* 종이 두께 */
  --arc: calc(var(--rad) * 6.28318 / var(--n, 24));
  position: absolute; left: 0; top: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.t-white { --bg: var(--white); --bg-in: var(--g200); --ink: var(--navy); --edge: #d9dce0; }
.t-navy  { --bg: var(--navy);  --bg-in: var(--g200);     --ink: var(--g200); --edge: #0f3256; }
.t-light { --bg: var(--g200);  --bg-in: var(--g300); --ink: var(--navy); --edge: #b7bbc1; }

.seg {
  position: absolute;
  left: calc(var(--arc) / -2 - 1px);
  top: calc(var(--sh) / -2);
  width: calc(var(--arc) + 2px);        /* 이웃 조각과 살짝 겹쳐 이음매 틈 방지 */
  height: var(--sh);
  transform-style: preserve-3d;
}
.face {
  position: absolute; inset: 0;
  overflow: hidden;
  background: transparent;              /* 색은 strip이 칠함 → 조각 이음매에 다른 색이 비치지 않음 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: box-shadow .8s;
}
.face--in { transform: translateZ(-1px) rotateY(180deg); background: var(--bg-in); }

/* ---------------------------------------------------------
   입체감 (세로 줄 없이)
   · 바깥면: 띠 전체에 이어진 명암 무늬 한 장을 깔고, 회전 각도만큼 밀어줌
             → 조각마다 같은 무늬의 같은 자리가 보여서 이음매가 안 생김
   · 안쪽면: 불투명한 색으로 명암을 칠해서 겹친 자리가 진해지지 않음
   --------------------------------------------------------- */
.strip::after {                         /* 위아래 은은한 하이라이트 (고정) */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .16), transparent 35%, transparent 70%, rgba(0, 20, 45, .07));
  opacity: var(--shade-k);
}
.shade {                                /* 돌아가는 쪽 명암 (위치·투명도는 script.js 가 직접 씀) */
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 18, 40, .34)   0%,    rgba(0, 18, 40, .317)  8.33%, rgba(0, 18, 40, .255) 16.67%,
    rgba(0, 18, 40, .17)  25%,    rgba(0, 18, 40, .085) 33.33%, rgba(0, 18, 40, .023) 41.67%,
    rgba(0, 18, 40, 0)    50%,
    rgba(0, 18, 40, .023) 58.33%, rgba(0, 18, 40, .085) 66.67%, rgba(0, 18, 40, .17)  75%,
    rgba(0, 18, 40, .255) 83.33%, rgba(0, 18, 40, .317) 91.67%, rgba(0, 18, 40, .34) 100%);
  background-repeat: repeat-x;
  opacity: 0;
}
.ticket.is-dim .shade { visibility: hidden; }
.face--in {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg-in), #00122a calc((10% + (1 - var(--litR, 0)) * 20%) * var(--shade-k))),
    color-mix(in srgb, var(--bg-in), #00122a calc((10% + (1 - var(--litL, 0)) * 20%) * var(--shade-k))));
}

/* 종이 두께: 별도 면 대신 위·아래 가장자리 선으로 표현 (훨씬 가벼움) */



.strip {
  position: absolute; top: 0; height: 100%;
  left: calc(var(--i, 0) * var(--arc) * -1 + 1px);
  width: calc(var(--arc) * var(--n, 24));
  display: flex; align-items: center; justify-content: space-between;
  white-space: nowrap;
  color: var(--ink);
  background: var(--bg);
  line-height: 1;
}

/* 스텁: 흰 종이 + 엠보 지그재그 + 일련번호 + 구멍 (찢어지는 부분 = 앞 2조각) */
.stub {
  position: relative; flex: none; align-self: stretch;
  width: calc(var(--arc) * 2);
  background: var(--g50);
  color: var(--g500);
  font-family: var(--mono);
  font-size: calc(var(--sh) * .13);
}
.stub::before {                         /* 구멍 */
  content: ""; position: absolute;
  left: calc(var(--sh) * .14); top: 50%;
  width: calc(var(--sh) * .12); aspect-ratio: 1;
  border-radius: 50%; translate: 0 -50%;
  background: var(--g500);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
}
.stub::after {                          /* 엠보 지그재그 */
  content: ""; position: absolute;
  left: calc(var(--sh) * .4); right: calc(var(--sh) * .42); top: 8%; bottom: 8%;
  background: var(--zig) 0 0 / calc(var(--sh) * .22) calc(var(--sh) * .14) repeat;
  opacity: .9;
}
.stub b {
  position: absolute; right: calc(var(--sh) * .12); top: 50%;
  translate: 0 -50%;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 400; letter-spacing: .08em;
}
/* 반대쪽 끝: 스냅 구멍 두 개 */
.tail {
  flex: none; align-self: stretch;
  width: var(--arc);
  background:
    radial-gradient(circle at 50% 30%, var(--g500) 0 calc(var(--sh) * .055), transparent calc(var(--sh) * .06)),
    radial-gradient(circle at 50% 70%, var(--g500) 0 calc(var(--sh) * .055), transparent calc(var(--sh) * .06));
}

/* 밴드 인쇄: 로고 + 날짜 + 번호 + 기하학 도형 */
.mk {
  font-size: calc(var(--sh) * .4);
  font-weight: 700; letter-spacing: -.02em;
  transform: scaleY(1.15);
}
.mk--sm { font-size: calc(var(--sh) * .24); letter-spacing: .02em; }

/* 날짜: 위아래 두 줄 + 모서리 꺾쇠 */
.dt {
  position: relative;
  font-family: var(--mono);
  font-size: calc(var(--sh) * .17);
  line-height: 1.05; text-align: center;
  padding: calc(var(--sh) * .07) calc(var(--sh) * .09);
}
.dt::before, .dt::after {
  content: ""; position: absolute;
  width: calc(var(--sh) * .08); height: calc(var(--sh) * .08);
  border: 0 solid currentColor;
}
.dt::before { left: 0; top: 0; border-top-width: max(1px, calc(var(--sh) * .02)); border-left-width: max(1px, calc(var(--sh) * .02)); }
.dt::after  { right: 0; bottom: 0; border-bottom-width: max(1px, calc(var(--sh) * .02)); border-right-width: max(1px, calc(var(--sh) * .02)); }

/* 동그라미 번호 */
.no {
  flex: none;
  display: grid; place-items: center;
  width: calc(var(--sh) * .38); aspect-ratio: 1;
  border: max(1.5px, calc(var(--sh) * .03)) solid currentColor;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: calc(var(--sh) * .14);
}

/* 작은 동그라미 (KISSMISSBASS 한 글자씩) */
.no--sm { width: calc(var(--sh) * .29); font-size: calc(var(--sh) * .11); border-width: max(1px, calc(var(--sh) * .022)); }
.z--tight { gap: calc(var(--sh) * .05); justify-content: center; padding: 0 calc(var(--sh) * .2); }

/* 기하학 도형 (clip-path) */
.g { flex: none; background: currentColor; }
.g--arrow {                       /* 양쪽 화살촉 + 가운데 막대 */
  width: calc(var(--sh) * 1.05); height: calc(var(--sh) * .56);
  clip-path: polygon(0 50%, 18% 0, 38% 0, 28% 32%, 72% 32%, 62% 0, 82% 0, 100% 50%, 82% 100%, 62% 100%, 72% 68%, 28% 68%, 38% 100%, 18% 100%);
}
.g--bow {                         /* 리본/모래시계 */
  width: calc(var(--sh) * .66); height: calc(var(--sh) * .46);
  clip-path: polygon(0 0, 40% 38%, 60% 38%, 100% 0, 100% 100%, 60% 62%, 40% 62%, 0 100%);
}
.g--dia {                         /* 다이아 */
  width: calc(var(--sh) * .26); height: calc(var(--sh) * .26);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ---------- 밴드 안의 구역(zone): 색을 번갈아 쓰는 블록 ---------- */
.strip { justify-content: flex-start; }
.z {
  position: relative; flex: none; align-self: stretch;
  width: calc(var(--sh) * var(--w, 4));
  display: flex; align-items: center; justify-content: space-around;
  gap: calc(var(--sh) * .12);
  padding: 0 calc(var(--sh) * .28);
  overflow: hidden;
}
.z--fill  { flex: 1 1 0; width: auto; min-width: 0; }
.z--navy  { background: var(--navy);  color: var(--g200); }
.z--gray  { background: var(--g200);  color: var(--navy); }
.z--white { background: var(--white); color: var(--navy); }

/* 로고 변주 */
.lg { font-size: calc(var(--sh) * .4); font-weight: 700; letter-spacing: -.03em; }
.lg--line { color: transparent; -webkit-text-stroke: max(1px, calc(var(--sh) * .016)) currentColor; }
.lg--dot {
  color: transparent; font-weight: 700;
  background-image: radial-gradient(circle, var(--ink) 40%, transparent 46%);
  background-size: calc(var(--sh) * .055) calc(var(--sh) * .055);
  -webkit-background-clip: text; background-clip: text;
}
.scr {
  font-family: var(--serif); font-style: italic;
  font-size: calc(var(--sh) * .5); letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: max(1px, calc(var(--sh) * .012)) currentColor;
}
.scr--xl { font-size: calc(var(--sh) * .62); color: transparent; -webkit-text-stroke-color: var(--g500); }
.tiny { font-family: var(--mono); font-size: calc(var(--sh) * .11); letter-spacing: .08em; color: var(--g500); }

/* 정보 블록 (작은 모노 글자 여러 줄) */
.info {
  display: flex; gap: calc(var(--sh) * .4);
  font-family: var(--mono); font-size: calc(var(--sh) * .108);
  line-height: 1.6; letter-spacing: .06em; text-transform: uppercase;
}
.info b { font-weight: 400; }
.info--rot { transform: rotate(180deg); }

/* 날짜 열: 기념일만 크게 */
.seq {
  flex: 1; display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--mono); font-size: calc(var(--sh) * .13); color: var(--g500);
}
.seq b {
  font-family: var(--sans); font-weight: 700; color: var(--navy);
  font-size: calc(var(--sh) * .36); letter-spacing: -.04em;
}

/* 세로 글줄 */
.vcol {
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: calc(var(--sh) * .085); line-height: 1.35;
  opacity: .9;
}
.vcol b { font-family: var(--sans); font-weight: 700; font-size: calc(var(--sh) * .13); }

/* 기하 기호 */
.gl { flex: none; background: currentColor; }
.gl--lt, .gl--gt { width: calc(var(--sh) * .5); height: calc(var(--sh) * .6); }
.gl--lt { clip-path: polygon(100% 0, 100% 20%, 30% 50%, 100% 80%, 100% 100%, 0 57%, 0 43%); }
.gl--gt { clip-path: polygon(0 0, 0 20%, 70% 50%, 0 80%, 0 100%, 100% 57%, 100% 43%); }
.gl--bars {
  width: calc(var(--sh) * 1.05); height: calc(var(--sh) * .6);
  background: linear-gradient(currentColor 0 22%, transparent 22% 39%, currentColor 39% 61%, transparent 61% 78%, currentColor 78%);
}

/* 캡션 (세리프 이탤릭) */
.cap {
  font-family: var(--serif); font-style: italic;
  font-size: calc(var(--sh) * .2); line-height: 1.1; text-align: center;
  color: var(--g500);
}

/* 사진 자리 */
.photo {
  padding: 0;
  background: repeating-linear-gradient(135deg, var(--g200) 0 6px, var(--g300) 6px 7px);
}
.photo__ph {
  font-family: var(--mono); font-size: calc(var(--sh) * .12); letter-spacing: .1em; color: var(--g500);
}
.photo__img {
  position: absolute; inset: 0;
  background: url("photo.jpg") center / cover no-repeat;
  filter: grayscale(1) contrast(.85) brightness(1.18);   /* 레퍼런스처럼 연한 흑백 */
}

/* =========================================================
   MODAL — 흰 바탕 + 라이트그레이 테두리 (디자인 a / b / c / d)
   ========================================================= */
.modal {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: 16px;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s .4s;
}
.modal.is-open { visibility: visible; pointer-events: auto; transition: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s;
}
.modal.is-open .modal__backdrop { opacity: 1; }

.panel-wrap {
  position: relative;
  width: min(640px, 100%);
  opacity: 0; transform: translateY(18px);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
.modal.is-open .panel-wrap, .panel-wrap.is-static { opacity: 1; transform: none; }

/* ---------- 창 등장 모션별 설정 (script.js 의 MOTION 과 연결) ---------- */
/* 다른 밴드 흐리게 (불투명한 흰 막 → 이음매 안 비침) */
.strip::before {
  content: ""; position: absolute; inset: -1px; z-index: 4; pointer-events: none;
  background: #f3f4f6; opacity: 0; transition: opacity .5s;
}
.ticket.is-dim .strip::before { opacity: 1; }
.ticket.is-dim .seg { --bg: #f3f4f6; }               /* 겹친 이음매에 원래 색이 안 비치게 */
.ticket.is-dim .strip { background: #f3f4f6; transition: background .5s; }
.strip { transition: background .5s; }
.face--in::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #e9ebee; opacity: 0; transition: opacity .5s;
}
.ticket.is-dim .face--in::before { opacity: 1; }

/* unroll · peel · stack : 펼쳐진 띠 한 줄에서 위아래로 열림 */
[data-reveal="h"] .panel-wrap {
  opacity: 1; transform: none;
  clip-path: inset(48% 0 48% 0);
  transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), opacity .2s .55s;
}
[data-reveal="h"]:not(.is-open) .panel-wrap { opacity: 0; transition: clip-path .45s cubic-bezier(.7, 0, .2, 1), opacity .15s .4s; }
[data-reveal="h"].is-open .panel-wrap { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); }

/* turn : 세로로 선 띠 한 줄에서 좌우로 열림 */
[data-reveal="v"] .panel-wrap {
  opacity: 1; transform: none;
  clip-path: inset(0 49% 0 49%);
  transition: clip-path .45s cubic-bezier(.7, 0, .2, 1), opacity .15s .4s;
}
[data-reveal="v"]:not(.is-open) .panel-wrap { opacity: 0; }
[data-reveal="v"].is-open .panel-wrap { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path .65s cubic-bezier(.7, 0, .2, 1); }

/* pull : 왼쪽에서 오른쪽으로 쭉 뽑혀 나옴 */
[data-motion="pull"] .panel-wrap {
  opacity: 1; transform: translateX(-36px);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s cubic-bezier(.6, 0, .4, 1), transform .5s cubic-bezier(.6, 0, .4, 1);
}
[data-motion="pull"].is-open .panel-wrap {
  clip-path: inset(0 0 0 0); transform: none;
  transition: clip-path .75s cubic-bezier(.2, .8, .2, 1), transform .75s cubic-bezier(.2, .8, .2, 1);
}

/* print : 영수증처럼 위에서부터 한 칸씩 출력 */
[data-motion="print"] .panel-wrap {
  opacity: 0; transform: none;
  clip-path: inset(0 0 100% 0);
  transition: opacity .25s, clip-path 0s .25s;
}
[data-motion="print"].is-open .panel-wrap {
  opacity: 1; clip-path: inset(0 0 0 0);
  transition: clip-path .9s steps(9, end), opacity 0s;
}
[data-motion="print"].is-open .panel { animation: feed .9s steps(9, end); }
@keyframes feed { from { transform: translateY(-14px); } to { transform: none; } }

/* whirl : 위에서 툭 떨어져 살짝 튕기며 자리잡음 */
[data-motion="whirl"] .panel-wrap {
  opacity: 0; transform: translateY(-48px) rotate(-4deg) scale(1.05);
  transition: transform .3s ease-in, opacity .2s;
}
[data-motion="whirl"].is-open .panel-wrap {
  opacity: 1; transform: rotate(-.6deg);
  transition: transform .65s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
}

/* tear(이전 버전) : 기본 등장 */

.panel {
  --ink: var(--navy); --sub: var(--g500); --line: var(--g200); --perf: var(--g300);
  position: relative;
  display: flex; flex-direction: column;
  max-height: calc(100svh - 32px);
  background: var(--white); color: var(--ink);
  border: 1px solid var(--g300);
}
.panel__body {
  position: relative; min-width: 0; flex: 1;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(24px, 4vw, 44px);
}
.panel__close {
  width: 32px; height: 32px; display: grid; place-items: center; flex: none;
  color: var(--ink); border-radius: 50%;
  transition: background .2s;
}
.panel__close:hover, .panel__close:focus-visible { background: var(--g100); outline: none; }

/* 머리 바 / 꼬리 바 */
.panel__head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--g300);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
}
.panel__no { color: var(--ink); }
.panel__name { color: var(--sub); text-transform: uppercase; }
.panel__brand { margin-left: auto; color: var(--sub); }
.panel__foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-top: 1px solid var(--g300);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--sub);
}
.sheet > .label { display: none; }

.label {
  margin: 0 0 1em;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  color: var(--sub); text-transform: uppercase;
}
.tag-sm { font-size: .7em; font-weight: 400; color: var(--sub); }

/* 01 PROFILE */
.title {
  margin: 0;
  font-size: clamp(36px, 7.4vw, 76px);
  font-weight: 700; letter-spacing: -.045em; line-height: .95;
}
.handles {
  margin: .8em 0 .35em;
  font-size: clamp(16px, 2vw, 22px); font-weight: 700;
  display: flex; flex-wrap: wrap; gap: .35em; align-items: center;
}
.handles a { text-decoration: none; }
.handles a:hover { text-decoration: underline; text-underline-offset: .15em; }
.since {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .3em .6em;
  font-size: clamp(15px, 1.8vw, 20px);
}
.since b { font-weight: 700; }
.chip { background: var(--g200); font-weight: 700; padding: .05em .4em; }

/* 02 CHARACTERS */
.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
}
.pair__heart { align-self: center; font-size: clamp(22px, 3vw, 30px); }
.card__tag { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--sub); }
.card h3 { margin: .2em 0 .6em; font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; letter-spacing: -.03em; }
.card dl { margin: 0; }
.card dl > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: .6em 0; border-top: 1px solid var(--line); font-size: 14px;
}
.card dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--sub); }
.card dd { margin: 0; text-align: right; }

/* 03 ARCHIVE */
.links {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.links li { border-bottom: 1px dashed var(--perf); }
.links li:nth-child(odd) { border-right: 1px dashed var(--perf); }
.links li:last-child { grid-column: 1 / -1; border-right: 0; }
.links a {
  height: 100%;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .3em .8em;
  padding: 16px 14px;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.links .no { font-family: var(--mono); font-size: 12px; color: var(--sub); }
.links .name { font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.links .go {
  margin-left: auto;
  font-family: var(--serif); font-style: italic; font-size: 18px; white-space: nowrap;
  text-decoration: underline; text-underline-offset: .14em;
}
.links a:not(.is-soon):hover,
.links a:not(.is-soon):focus-visible { background: var(--navy); color: var(--white); outline: none; }
.links a:not(.is-soon):hover .no { color: var(--g400); }
.links .is-soon { color: var(--g500); cursor: default; }
.links .is-soon .go { text-decoration: none; font-style: italic; }
.follow {
  margin: 22px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px;
  font-size: 11px; letter-spacing: .2em; color: var(--sub);
}
.follow a {
  font-family: var(--serif); font-style: italic; letter-spacing: 0;
  font-size: clamp(30px, 5vw, 54px); line-height: 1.1;
  text-decoration: none; color: transparent;
  -webkit-text-stroke: 1px var(--navy);
  transition: color .3s;
}
.follow a:hover { color: var(--navy); }

/* 프로필 안의 NOTICE */
.notice-wrap { margin-top: clamp(26px, 4vw, 40px); }
.sub-label {
  margin: 0 0 .6em;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--sub);
}

/* 한글 위주 블록은 Pretendard 우선 */
.notice li, .card h3, .card dd { font-family: var(--kr); }

/* 04 NOTICE */
.notice { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.notice li {
  display: grid; grid-template-columns: 3em 1fr;
  padding: .85em 0; border-top: 1px solid var(--line);
  font-size: clamp(14px, 1.6vw, 16px); line-height: 1.6;
  word-break: keep-all; overflow-wrap: anywhere;
}
.notice li::before {
  counter-increment: n; content: counter(n, decimal-leading-zero);
  font-family: var(--mono); font-size: 12px; color: var(--sub); padding-top: .2em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 640px) {
  .index button { font-size: 12px; }

    .pair { grid-template-columns: 1fr; }
  .pair__heart { justify-self: center; }
  .links { grid-template-columns: 1fr; }
  .links li:nth-child(odd) { border-right: 0; }
  .follow { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .hint::after { animation: none; }
  .modal .panel-wrap, .modal.is-open .panel-wrap { clip-path: none !important; transform: none !important; transition: opacity .2s !important; }
  .modal.is-open .panel { animation: none !important; }
  .panel-wrap { transition: opacity .2s; transform: none; }
}


/* =========================================================
   창 안 글꼴: 전부 Pretendard + 자간 좁게
   ========================================================= */
.modal .panel, .modal .panel *, .modal .panel *::before, .modal .panel *::after {
  font-family: var(--kr);
  letter-spacing: -0.02em;
}
.modal .panel .title   { font-weight: 800; letter-spacing: -0.055em; }
.modal .panel .handles { letter-spacing: -0.03em; }
.modal .panel .card h3 { letter-spacing: -0.045em; }
.modal .panel .panel__head,
.modal .panel .panel__foot,
.modal .panel .label,
.modal .panel .sub-label,
.modal .panel .card__tag,
.modal .panel .card dt,
.modal .panel .links .no,
.modal .panel .notice li::before { letter-spacing: 0; }
.modal .panel .panel__head { font-size: 13px; }
.modal .panel .links .name { letter-spacing: -0.01em; }
.modal .panel .links .go,
.modal .panel .follow a { font-style: normal; font-weight: 600; letter-spacing: -0.03em; }
.modal .panel .links .is-soon .go { font-weight: 400; }
.modal .panel .follow a { font-weight: 700; letter-spacing: -0.05em; }
.modal .panel .follow span { letter-spacing: .04em; }
.modal .panel .follow { flex-wrap: nowrap; }
.modal .panel .follow a { font-size: clamp(24px, 4vw, 42px); white-space: nowrap; }
@media (max-width: 640px) { .modal .panel .follow { flex-wrap: wrap; } }


/* =========================================================
   ENTRY — 입장 티켓 + 도장
   ========================================================= */
.entry {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--navy);
  cursor: pointer;
  transition: opacity .8s ease .15s, visibility 0s 1s;
  -webkit-tap-highlight-color: transparent;
}
.entry.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
body:not(.is-entry) .entry { display: none; }

.eticket {
  --notch: 10px;
  --rad: 6px;                           /* 모서리 둥글기 */
  --tgray: #eceef1;                     /* 아래쪽 연한 회색 */
  position: relative;
  width: min(340px, 100%);
  border-radius: var(--rad);
  font-family: var(--kr);
  color: var(--navy);
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .28)) drop-shadow(0 2px 6px rgba(0, 0, 0, .12));
  transition: transform .9s cubic-bezier(.6, 0, .2, 1), opacity .6s ease .2s;
}
.entry.is-leaving .eticket { transform: translateY(-40px) scale(.96); opacity: 0; }
.entry.is-stamped .eticket { animation: thud .34s cubic-bezier(.3, 0, .3, 1) .28s; }
@keyframes thud { 25% { transform: scale(.988) translateY(2px); } 60% { transform: scale(1.002); } }

.eticket__top, .eticket__bot { position: relative; }
.eticket__top {
  background: var(--white);
  border-radius: var(--rad) var(--rad) 0 0;
  padding: 28px 24px 24px 20px;
  min-height: 380px;
  display: flex; flex-direction: row; gap: 16px;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.ecol { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.eno { margin: 0; font: 500 12px var(--kr); letter-spacing: -0.02em; color: var(--g500); }
.erows.erows--stack { gap: 14px; }
.erows.erows--stack > div { grid-template-columns: 1fr; gap: 2px; }
.erows.erows--stack dt::after { content: none; }
.eticket__bot {
  background: var(--tgray);
  border-radius: 0 0 var(--rad) var(--rad);
  padding: 22px 24px 26px 20px;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
}
.eticket__perf {                       /* 절취선 */
  position: relative; height: 0;
  margin: 0 calc(var(--notch) + 6px);
  border-top: 1.2px dashed var(--g300);
  z-index: 1;
}

.elogo {                               /* 세로로 세운 로고 */
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.05em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-left: 1px solid var(--g300);
  padding-left: 12px;
  white-space: nowrap;
}

.erows { margin: 0; display: grid; gap: 10px; }
.erows > div { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: baseline; gap: 8px; }
.erows dt {
  font-size: 10.5px; letter-spacing: .01em; color: var(--g500);
  display: flex; justify-content: space-between;
}
.erows dt::after { content: "|"; color: var(--g300); }
.erows dd {
  margin: 0; min-width: 0;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.02em;
  word-break: keep-all;
}
.js-now { font-variant-numeric: tabular-nums; }


.entry__hint {
  margin: 0;
  font-family: var(--kr); font-size: 13px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--g400);
  transition: opacity .3s;
}
.entry__hint::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-radius: 50%; background: var(--g400); vertical-align: middle;
  animation: blink 1.4s ease-in-out infinite;
}
.entry.is-stamped .entry__hint { opacity: 0; }

/* 도장 (2종 중 랜덤 · 진한 회색) */
.stamp {
  position: absolute; left: 66%; top: 27%;
  width: 150px; height: auto;
  color: #3b3e44;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -50%) rotate(var(--rot, -10deg)) scale(1.9);
}
.stamp.is-pick { visibility: visible; }
.stamp .sm { font-family: var(--mono); }
.stamp .sh { font-family: var(--sans); }
.entry.is-stamped .stamp.is-pick { animation: press .62s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes press {
  /* 도장이 위에서 다가옴(흐린 그림자) → 종이에 닿는 순간 잉크가 또렷하게 → 살짝 눌렸다 제자리 → 잉크가 스며들며 약간 옅어짐 */
  0%   { opacity: 0;   filter: blur(4px); transform: translate(-50%, -58%) rotate(calc(var(--rot) - 6deg)) scale(1.35); }
  42%  { opacity: .16; filter: blur(2.5px); transform: translate(-50%, -52%) rotate(calc(var(--rot) - 2deg)) scale(1.08); }
  50%  { opacity: 1;   filter: blur(0);   transform: translate(-50%, -50%) rotate(var(--rot)) scale(.975); }
  62%  {                                  transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.012); }
  74%  {                                  transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); }
  100% { opacity: .9;  filter: blur(0);   transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); }
}


@media (prefers-reduced-motion: reduce) {
  .entry.is-stamped .stamp.is-pick { animation: none; opacity: .93; transform: translate(-50%, -50%) rotate(var(--rot)); }
  .entry.is-stamped .eticket { animation: none; }
  .eticket { transition: opacity .3s; }
  .entry.is-leaving .eticket { transform: none; }
}

/* 모바일: 티켓을 작게 → 남색 배경이 더 보이게 */
@media (max-width: 640px) {
  .entry { padding-left: 40px; padding-right: 40px; gap: 18px; }
  .eticket { --notch: 8px; width: min(256px, 100%); }
  .eticket__top { min-height: 296px; padding: 20px 16px 18px 12px; gap: 10px; }
  .eticket__bot { padding: 15px 16px 17px 12px; }
  .elogo { font-size: 35px; padding-left: 9px; }
  .eno { font-size: 11px; }
  .erows.erows--stack { gap: 11px; }
  .erows dt { font-size: 10px; }
  .erows dd { font-size: 12px; }
  .erows > div { grid-template-columns: 40px minmax(0, 1fr); }
  .js-now { letter-spacing: -0.035em; white-space: nowrap; }
  .stamp { width: 112px; }
  .entry__hint { font-size: 12px; }
}


/* =========================================================
   우측 상단: 발바닥 BGM 버튼 + 메뉴
   ========================================================= */
.corner {
  position: fixed; z-index: 12;
  top: clamp(14px, 2.6vw, 28px); right: var(--gutter);
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.paw {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  color: var(--navy);
  -webkit-tap-highlight-color: transparent;
}
.paw:focus { outline: none; }
.paw:focus-visible .paw__label { text-decoration: underline; text-underline-offset: .2em; }
.paw__label {
  font-family: var(--kr); font-size: 12px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--g500);
}
.paw svg { width: 26px; height: 26px; overflow: visible; }
.paw path, .paw ellipse {                 /* 꺼짐: 테두리만 */
  fill: transparent; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round;
  transition: fill .25s;
}
.paw[aria-pressed="true"] path,
.paw[aria-pressed="true"] ellipse { fill: currentColor; }   /* 켜짐: 채워짐 */

/* 밴드 아래 은은한 그림자 */
.bshadow {
  position: absolute; left: 0; top: 0; pointer-events: none;
  width: calc(var(--r) * 2.3); height: calc(var(--r) * 2.3);
  margin: calc(var(--r) * -1.15) 0 0 calc(var(--r) * -1.15);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 31, 63, .16), rgba(0, 31, 63, .07) 62%, transparent);
}


/* =========================================================
   화면 가장자리 글씨 통일 (메뉴 · bgm · 하단 안내 · ADMIT TWO)
   ========================================================= */
:root { --ui: 11px; }
@media (max-width: 640px) { :root { --ui: 10px; } }

.index button, .paw__label, .meta--bottom, .hint {
  font-family: var(--sans);
  font-size: var(--ui);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--navy);
}
.index { gap: 0; }
.index button { line-height: 1.32; padding: 0; text-align: left; }
.index button:hover, .index button:focus-visible { color: var(--navy); }

/* 발바닥: 작게 (모바일은 더 작게, 그래도 글씨보다는 크게) */
.paw { gap: 6px; padding: 0; }
.paw svg { width: 18px; height: 18px; }
.paw path, .paw ellipse { stroke-width: 1.8; }
@media (max-width: 640px) { .paw svg { width: 13px; height: 13px; } .paw { gap: 5px; } }
.corner { top: clamp(16px, 2.8vw, 30px); }

/* 하단: 안내 문구는 화면 정중앙, ADMIT TWO 는 오른쪽 */
.meta--bottom { justify-content: flex-end; }
.meta--bottom .hint {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* 입장 티켓 아래쪽(Name · Seat) 값 글씨: 진한 회색 */
.eticket__bot .erows dd { color: #3b3e44; }

/* 가장자리 글씨: 진한 회색 · 메뉴는 누르거나 올리면 남색 */
.index button, .paw__label, .meta--bottom, .hint { color: #3b3e44; }
.index button:hover, .index button:focus-visible, .index button:active { color: var(--navy); }

/* bgm on/off 글씨: 평소엔 숨김 → PC는 마우스 올리면, 모바일은 입장 직후·누를 때 잠깐 보임 */
.paw__label { opacity: 0; transform: translateX(4px); transition: opacity .3s, transform .3s; pointer-events: none; }
.paw.show-label .paw__label { opacity: 1; transform: none; }
@media (hover: hover) {
  .paw:hover .paw__label, .paw:focus-visible .paw__label { opacity: 1; transform: none; }
}


/* 좌측 상단 로고 글씨 */
.brand {
  position: fixed; z-index: 12; margin: 0;
  top: clamp(16px, 2.8vw, 30px); left: var(--gutter);
  font-family: var(--sans); font-size: var(--ui); letter-spacing: .01em;
  color: var(--navy);
}
.index { display: none; }

/* =========================================================
   남색 픽셀 태그 — 계단 모양 사각형 + 안쪽에 비치는 글씨
   ========================================================= */
.tags { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; }
.tag {
  --s: 10px;
  position: absolute; left: 0; top: 0;
  width: calc(var(--s) * 3); height: calc(var(--s) * 3);
  pointer-events: auto; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .4s;
}
.tag:focus { outline: none; }
.tag__cell {
  position: absolute; width: calc(var(--s) + 1px); height: calc(var(--s) + 1px);   /* 1px 겹쳐서 이음선 없게 */
  background: var(--navy); overflow: hidden;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.tag__txt { position: absolute; width: calc(var(--s) * 4); height: calc(var(--s) * 4); }
.tag__w {
  position: absolute; white-space: nowrap;
  font-family: var(--kr); font-weight: 500;
  font-size: calc(var(--s) * .76); line-height: 1; letter-spacing: -0.03em;
  color: #fff;
}
.tag__label {                           /* 기본: 도형 오른쪽 */
  position: absolute; top: 50%; left: 100%; margin-left: 4px;
  transform: translate(-2px, -50%);
  font-family: var(--sans); font-size: var(--ui); letter-spacing: .01em;
  color: var(--navy); white-space: nowrap;
  opacity: 0; transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.tag--left .tag__label { left: auto; right: 100%; margin: 0 4px 0 0; transform: translate(2px, -50%); }
.tag.show-label .tag__label { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) {
  .tag:hover .tag__label, .tag:focus-visible .tag__label { opacity: 1; transform: translate(0, -50%); }
}
.tags.is-off .tag { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .tag { --s: 8.5px; } }

/* 모바일 입장 티켓: 로고 빼고 글씨 확 작게 */
@media (max-width: 640px) {
  .eno { font-size: 9px; }
  .erows dt { font-size: 8.5px; }
  .erows dd { font-size: 10px; line-height: 1.35; }
  .erows.erows--stack { gap: 8px; }
  .erows > div { grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
  .eticket__bot .erows { gap: 6px; }
  .js-now { letter-spacing: -0.02em; }
}


/* =========================================================
   창 다듬기 — 심플한 등장 · 작은 글씨 · 작은 X
   ========================================================= */
.panel-wrap { transform: translateY(8px); transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
.modal.is-open .panel-wrap { transform: none; }

.modal .panel { --fs: 13px; }
@media (max-width: 640px) { .modal .panel { --fs: 12px; } }
.modal .panel .panel__head { font-size: 11px; padding: 9px 12px 9px 18px; }
.modal .panel .panel__foot { font-size: 10px; padding: 10px 18px; }
.panel__close { width: 20px; height: 20px; }
.panel__close:hover, .panel__close:focus-visible { background: none; color: var(--g500); }
.modal .panel .panel__name { text-transform: none; }

.modal .panel .title { font-size: clamp(30px, 5.6vw, 52px); letter-spacing: -0.06em; }
.modal .panel .card h3 { font-size: clamp(20px, 3vw, 28px); }
.modal .panel .card dl > div, .modal .panel .links .name, .modal .panel .notice li { font-size: var(--fs); }
.modal .panel .links .go { font-size: calc(var(--fs) + 1px); }
.modal .panel .follow a { font-size: clamp(20px, 3.2vw, 32px); }
.modal .panel .handles, .modal .panel .since { font-size: var(--fs); }

/* 01 about */
.about__rule { margin: 14px 0 18px; border: 0; border-top: 1px solid var(--g300); }
.about { display: grid; gap: 4px; font-size: var(--fs); line-height: 1.55; letter-spacing: -0.035em; color: var(--navy); word-break: keep-all; }
.about p { margin: 0; }
.about a { text-decoration: none; }
.about a:hover { text-decoration: underline; text-underline-offset: .2em; }
.about b { font-weight: 700; }
.about .mute { color: var(--g500); }
.about small { font-size: .82em; }
.about sup { font-size: .7em; font-weight: 700; }
/* (오타 정리) */ .about mark { background: rgba(128, 133, 141, .22); color: inherit; padding: 0 .2em; }
.about--ng { margin-top: 22px; }
.about__h { font-weight: 700; margin-bottom: 2px !important; }

.list-toggle {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs); font-weight: 700; letter-spacing: -0.02em; color: var(--navy);
}
.list-toggle i { font-style: normal; font-weight: 400; color: var(--g500); transition: transform .25s; display: inline-block; }
.list-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.list { margin-top: 10px; animation: listIn .3s ease; }
@keyframes listIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.list__note { margin: 0 0 8px; font-size: calc(var(--fs) - 2px); color: var(--g400); letter-spacing: -0.02em; }
.list__rows { margin: 0; display: grid; gap: 3px; }
.list__rows > div { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: 12px; align-items: baseline; }
.list__rows dt { font-size: var(--fs); color: var(--g500); letter-spacing: -0.03em; }
.list__rows dd { margin: 0; font-size: var(--fs); color: var(--navy); letter-spacing: -0.035em; line-height: 1.5; word-break: keep-all; }
@media (max-width: 640px) { .list__rows > div { grid-template-columns: 88px 1fr; gap: 8px; } }

mark {
  background: rgba(128, 133, 141, .22) !important;
  color: inherit !important;
  padding: 0 .2em;
}

/* 창 폭 = 가장 긴 줄 길이 (줄바꿈 없이 고정) */
.panel-wrap { width: max-content !important; }
.sheet--about .about p,
.sheet--about .about__h { white-space: nowrap; }
.list { contain: inline-size; }   /* 리스트가 길어도 창 폭은 안 늘어나게 */

/* =========================================================
   01 about — 페이지 넘김 (기본 ↔ LIST) + 계정 칩
   ========================================================= */
.pages { display: grid; overflow: hidden; }
.page {
  grid-area: 1 / 1;
  transition: transform .45s cubic-bezier(.65, 0, .25, 1), opacity .35s, visibility 0s .45s;
}
.page--main { transform: translateX(-24px); opacity: 0; visibility: hidden; }
.page--list { transform: translateX(24px); opacity: 0; visibility: hidden; contain: inline-size; }   /* 창 폭은 기본 페이지 기준 */
.page.is-on { transform: none; opacity: 1; visibility: visible; transition: transform .45s cubic-bezier(.65, 0, .25, 1), opacity .35s .05s, visibility 0s; }

.list-toggle i { transition: transform .25s; }
.list-toggle:hover i { transform: translateX(3px); }

.list__title { margin: 0; font-size: calc(var(--fs) + 9px); font-weight: 800; letter-spacing: -0.05em; color: var(--navy); }
.page--list .list__note { margin: 6px 0 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 3px 10px; border: 1px solid var(--g300); border-radius: 999px;
  font-size: calc(var(--fs) - 1px); font-weight: 400; letter-spacing: -0.02em; color: var(--g600);
  background: var(--white);
  transition: background .2s, color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .chip:hover { border-color: var(--navy); color: var(--navy); } }
.chip.is-on { background: var(--navy); border-color: var(--navy); color: var(--white); }
.chip:focus { outline: none; }

.chip-pop {
  margin: 14px 0 0; padding: 0 12px;
  max-height: 0; overflow: hidden; opacity: 0;
  background: rgba(128, 133, 141, .12);
  font-size: var(--fs); line-height: 1.55; letter-spacing: -0.035em; color: var(--navy);
  word-break: keep-all;
  transition: max-height .3s ease, opacity .25s, padding .3s;
}
.chip-pop.is-on { max-height: 120px; opacity: 1; padding: 9px 12px; }
.chip-pop__h { color: var(--g500); margin-right: 10px; }
.chip-pop__h::after { content: "→"; margin-left: 10px; }
.chip-pop__n { font-weight: 700; }

.back {
  display: block; margin: 20px 0 0 auto;
  font-size: var(--fs); color: var(--navy); letter-spacing: -0.02em;
  text-decoration: underline; text-underline-offset: .25em;
}
@media (prefers-reduced-motion: reduce) { .page { transition: none !important; } }


/* ---------- 창 안 글씨 촘촘하게 · LIST 칩/이름칸/back 다듬기 ---------- */
.about { gap: 1px; line-height: 1.38; letter-spacing: -0.05em; }
.about--ng { margin-top: 18px; }
.list-toggle { gap: 3px; margin-top: 18px; letter-spacing: -0.04em; }
.list__title { letter-spacing: -0.06em; line-height: 1.1; }
.page--list .list__note { margin: 4px 0 12px; letter-spacing: -0.04em; line-height: 1.3; }

.chips { gap: 4px; }
.chip { border-radius: 0; padding: 1px 6px; letter-spacing: -0.04em; line-height: 1.4; }

.chip-pop {
  display: grid; grid-template-columns: auto auto 1fr; column-gap: 6px; align-items: start;
  line-height: 1.38; letter-spacing: -0.05em;
}
.chip-pop.is-on { padding: 7px 10px; }
.chip-pop__h { color: var(--navy); margin: 0; }
.chip-pop__h::after { content: none; }
.chip-pop::before { content: "→"; grid-column: 2; grid-row: 1; color: var(--g400); }
.chip-pop__h { grid-column: 1; grid-row: 1; }
.chip-pop__n { grid-column: 3; grid-row: 1; color: var(--g500); font-weight: 400; }

.back { font-size: 10px; margin-top: 16px; text-underline-offset: .2em; letter-spacing: -0.02em; }

/* 뒷페이지 LIST 제목 = 앞페이지 LIST 버튼과 같은 크기 · 이름 칸 회색 박스 없앰 */
.list__title { font-size: var(--fs); font-weight: 700; letter-spacing: -0.04em; line-height: 1.38; }
.chip-pop { background: none; }
.chip-pop.is-on { padding: 0; }
.chip-pop { margin-top: 12px; }


/* 앞페이지 list → : back 과 같은 스타일, 왼쪽 아래 */
.back.list-go { margin: 18px 0 0 auto; }

/* 칩 아래 이름 칸: 작게 · 화살표 없음 · 위 여백 넓게 */
.chip-pop { grid-template-columns: auto 1fr; column-gap: 8px; margin-top: 18px; font-size: calc(var(--fs) - 2px); }
.chip-pop::before { content: none; }
.chip-pop__n { grid-column: 2; }

/* 앞페이지 글씨 = 뒷페이지 이름 칸 크기 (창 폭은 자동으로 같이 줄어듦) */
.sheet--about .about { font-size: calc(var(--fs) - 2px); }
.modal .panel .sheet--about .title { font-size: clamp(26px, 4.2vw, 40px); }
.sheet--about .about__rule { margin: 12px 0 14px; }
/* 이름이 길면 첫 줄 시작점(이름 칸 왼쪽)에 맞춰서 줄바꿈 */
.chip-pop__n { min-width: 0; white-space: normal; word-break: keep-all; }

/* 시작 티켓(PC): 글씨 작게 · 티켓 크기도 맞춰 줄임 */
@media (min-width: 641px) {
  .eticket { width: min(300px, 100%); }
  .eticket__top { min-height: 340px; padding: 24px 20px 20px 16px; gap: 13px; }
  .eticket__bot { padding: 17px 20px 19px 16px; }
  .elogo { font-size: 42px; padding-left: 11px; }
  .eno { font-size: 10px; }
  .erows dt { font-size: 9.5px; }
  .erows dd { font-size: 11px; line-height: 1.35; }
  .erows.erows--stack { gap: 9px; }
  .erows > div { grid-template-columns: 40px minmax(0, 1fr); gap: 6px; }
  .eticket__bot .erows { gap: 7px; }
  .stamp { width: 132px; }
}

/* 모바일: 시작 티켓·창 둘 다 좌우 여백 더 넉넉하게 */
@media (max-width: 640px) {
  .entry { padding-left: 56px; padding-right: 56px; }
  .eticket { width: min(232px, 100%); }
  .eticket__top { min-height: 270px; }
  .elogo { font-size: 32px; }
  .stamp { width: 100px; }
}

/* 도장: 더 크게 · 오른쪽 빈 칸 가운데쯤으로 */
.stamp { width: 172px; }
@media (max-width: 640px) { .stamp { width: 132px; } }


/* about / pair / contact 라벨: 더 작게 · 회색 */
.tag__label { font-size: 9.5px; color: var(--g500); }
@media (max-width: 640px) { .tag__label { font-size: 8.5px; } }

/* =========================================================
   02 pair — PC: 두 장 나란히 / 모바일: 위아래
   ========================================================= */
.sheet--pair { width: 760px; }
.pcs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pc { min-width: 0; }
.pc__img {
  position: relative; aspect-ratio: 5 / 6;
  background: var(--g100) center top / cover no-repeat;
  overflow: hidden;
}
.pc__img::after {                         /* 아래쪽 흰 그라데이션 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(255,255,255,.75) 82%, #fff);
}
.pc__name {
  position: absolute; left: 14px; bottom: 10px; z-index: 1; margin: 0;
  color: var(--navy); line-height: 1; letter-spacing: -0.05em;
}
.pc__name b { font-size: 30px; font-weight: 800; }
.pc__name span { font-size: 10.5px; font-weight: 500; letter-spacing: -0.02em; margin-left: 2px; }
.pc__rows { margin: 14px 0 0; display: grid; gap: 7px; }
.pc__rows > div { display: grid; grid-template-columns: 32px 1fr; gap: 9px; align-items: start; }
.pc__rows dt {
  background: var(--navy); color: #fff; text-align: center;
  font-size: 9.5px; font-weight: 600; line-height: 1; padding: 3px 0 4px; margin-top: 1px;
}
.pc__rows dd {
  margin: 0; font-size: calc(var(--fs) - 2px); line-height: 1.45; letter-spacing: -0.05em;
  color: var(--navy); word-break: keep-all;
}
.pc__rows dd b { font-weight: 700; }

@media (max-width: 640px) {
  .sheet--pair { width: 300px; }
  .pcs { grid-template-columns: 1fr; gap: 30px; }
  .pc__name b { font-size: 26px; }
}
@media (min-width: 641px) { .sheet--pair { width: 720px; } .pc__img { aspect-ratio: 10 / 10.5; } }


/* =========================================================
   03 contact — 픽셀 아이콘 링크 (PC 2열 · 모바일 1열)
   ========================================================= */
.sheet--contact { width: 460px; }
.cts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.ct {
  display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto;
  column-gap: 8px; align-items: center;
  text-decoration: none; color: var(--navy);
}
.ct__ic { --px: 7px; grid-row: 1 / 3; position: relative; width: calc(var(--px) * 3); height: calc(var(--px) * 3); }
.ct__ic i { position: absolute; width: calc(var(--px) + .5px); height: calc(var(--px) + .5px); background: var(--navy); transition: background .2s; }
.ct b { font-size: calc(var(--fs) - 1px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.3; }
.ct small { font-size: calc(var(--fs) - 3px); color: var(--g500); letter-spacing: -0.03em; line-height: 1.3; transition: color .2s; }
@media (hover: hover) {
  .ct:hover small { color: var(--navy); }
  .ct:hover .ct__ic i { background: var(--g500); }
}
@media (max-width: 640px) {
  .sheet--contact { width: 240px; }
  .cts { grid-template-columns: 1fr; gap: 14px; }
}


/* 03 contact — B: 이름 ······ 픽셀 아이콘 (주소 숨김) */
.sheet--contact { width: 300px; }
.cts { display: grid; grid-template-columns: 1fr; gap: 9px; }
.ct { display: flex; align-items: center; gap: 8px; grid-template-columns: none; }
.ct__t { font-size: calc(var(--fs) - 2px); font-weight: 400; letter-spacing: -0.05em; line-height: 1.38; white-space: nowrap; }
.ct__t sup { font-size: .68em; color: var(--g500); margin-left: 2px; line-height: 0; }
.ct__dots { flex: 1; border-bottom: 1px dotted var(--g400); transform: translateY(2px); }
.ct__ic { --px: 3.5px; grid-row: auto; flex: none; }
@media (hover: hover) {
  .ct:hover .ct__dots { border-bottom-color: var(--navy); }
  .ct:hover .ct__ic i { background: var(--g500); }
}
@media (max-width: 640px) { .sheet--contact { width: 240px; } .cts { gap: 9px; } }

/* 창 하단 디데이: 남색 */
.modal .panel .panel__foot .panel__dday { color: var(--navy); }


/* 03 contact — B안: 이름 ······ 픽셀 아이콘 (주소 숨김) */
.sheet--contact { width: 300px; }
.cts { display: grid; grid-template-columns: 1fr; gap: 9px; }
.ct { display: flex; align-items: center; gap: 7px; grid-template-columns: none; }
.ct__t { font-size: calc(var(--fs) - 2px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.3; color: var(--navy); }
.ct__t sup { font-size: .62em; color: var(--g500); margin-left: 2px; line-height: 0; }
.ct__dots { flex: 1; border-bottom: 1px dotted var(--g400); transform: translateY(1px); }
.ct__ic { --px: 4px; grid-row: auto; }
@media (hover: hover) { .ct:hover .ct__t { color: var(--g500); } }
@media (max-width: 640px) { .sheet--contact { width: 240px; } .cts { gap: 9px; } }

/* 창 하단 D+ 남색 */
.panel__foot .js-dday { color: var(--navy); }
.panel__close { margin-left: auto; }

/* contact 제목 (NG 와 같은 스타일) · 마우스 올리면 픽셀만 회색 */
.ct__h { margin: 0 0 8px; font-size: calc(var(--fs) - 2px); font-weight: 700; letter-spacing: -0.05em; line-height: 1.38; color: var(--navy); }
@media (hover: hover) {
  .ct:hover .ct__t { color: var(--navy); }
  .ct:hover .ct__ic i { background: var(--g400); }
}
.ct, .ct:hover { text-decoration: none; }
.ct:hover .ct__dots { border-bottom-color: var(--g400); }

/* 드래그(텍스트 선택) 색: 남색 하이라이트 + 흰 글씨 — 사이트 전체 */
::selection      { background: var(--navy); color: #fff; }
::-moz-selection { background: var(--navy); color: #fff; }


/* =========================================================
   손목밴드 디자인 (v4) — kiss / miss / bass
   · 가운데(b-c)가 밴드를 누르면 정면에 멈추는 자리
   · 크기는 전부 밴드 폭(--sh) 기준이라 화면 크기에 맞춰 같이 커지고 작아짐
   ========================================================= */
.t-white { --sub: #a6aab1; --rule: #dcdee1; }
.t-navy  { --ink: #ffffff; --sub: #5d7391; --rule: #1f3a5a; }
.t-light { --sub: #80858d; --rule: #c6c9ce; }

.strip { justify-content: flex-start; }
.b-l, .b-r {
  flex: 1 1 0; min-width: 0; align-self: stretch;
  display: flex; align-items: center; justify-content: space-evenly;
  gap: calc(var(--sh) * .18);
}
.b-c {
  flex: none; width: calc(var(--sh) * 7); align-self: stretch;
  display: flex; align-items: baseline; justify-content: center; gap: calc(var(--sh) * .16);
  padding-top: calc(var(--sh) * .2);
}
.b-pad { flex: none; width: var(--arc); }          /* 왼쪽 스텁이 오른쪽 끝보다 넓은 만큼 맞춰서 가운데 정렬 */

/* 가운데 문구: 진한 글자(b) + 옅은 글자(i) */
.b-ph { white-space: pre; line-height: 1; font-size: calc(var(--sh) * .6); font-weight: 700; letter-spacing: -.06em; }
.b-ph b { font-weight: 700; color: var(--ink); }
.t-white .b-ph b, .t-light .b-ph b { color: var(--navy); }
.b-ph i { font-style: normal; color: var(--sub); }
.b-ipa { font-size: calc(var(--sh) * .15); color: var(--sub); letter-spacing: 0; }

/* 작은 단어: 보통 / 외곽선 / 점 */
.b-w { font-weight: 700; font-size: calc(var(--sh) * .34); letter-spacing: -.05em; color: var(--navy); }
.t-navy .b-w { color: #a6b3c4; }
.b-line { color: transparent !important; -webkit-text-stroke: max(1px, calc(var(--sh) * .014)) var(--navy); }
.t-navy .b-line { -webkit-text-stroke-color: #a6b3c4; }
.b-dot {
  color: transparent !important;
  background-image: radial-gradient(circle, var(--navy) 42%, transparent 48%);
  background-size: calc(var(--sh) * .045) calc(var(--sh) * .045);
  -webkit-background-clip: text; background-clip: text;
}
.t-navy .b-dot { background-image: radial-gradient(circle, #a6b3c4 42%, transparent 48%); }

/* 1번: 남색 정보 블록 */
.b-info {
  align-self: stretch; display: flex; align-items: center; gap: calc(var(--sh) * .36);
  padding: 0 calc(var(--sh) * .3);
  background: var(--navy); color: var(--g200);
  font-family: var(--mono); font-size: calc(var(--sh) * .1); line-height: 1.6; letter-spacing: .06em;
  white-space: nowrap;
}

/* 양쪽 정렬 작은 문구 */
.b-tight {
  font-weight: 700; font-size: calc(var(--sh) * .15); line-height: .98; letter-spacing: -.04em;
  color: var(--sub); text-align: justify; text-align-last: justify; white-space: nowrap;
}
.t-navy .b-tight { color: #5d7391; }

/* 2번: 꺾쇠 날짜 · 세로 글자 · 동그라미 글자 */
.b-tk { display: flex; align-items: center; gap: calc(var(--sh) * .12); color: #c9d2de; font-family: var(--mono); font-size: calc(var(--sh) * .14); line-height: 1.05; }
.b-vert { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--sans); font-weight: 700; font-size: calc(var(--sh) * .14); letter-spacing: .08em; }
.b-brk { position: relative; padding: calc(var(--sh) * .04) calc(var(--sh) * .09); }
.b-brk::before, .b-brk::after { content: ""; position: absolute; width: calc(var(--sh) * .07); height: calc(var(--sh) * .07); border: 0 solid currentColor; }
.b-brk::before { left: 0; top: 0; border-top-width: 1px; border-left-width: 1px; }
.b-brk::after { right: 0; bottom: 0; border-bottom-width: 1px; border-right-width: 1px; }
.b-circ {
  width: calc(var(--sh) * .3); height: calc(var(--sh) * .3); border: max(1px, calc(var(--sh) * .02)) solid currentColor; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--sans); font-weight: 700; font-size: calc(var(--sh) * .16);
  margin-left: calc(var(--sh) * -.08);
}
.b-circ:first-of-type { margin-left: 0; }
.b-date {
  align-self: stretch; display: flex; align-items: center; gap: calc(var(--sh) * .12);
  padding: 0 calc(var(--sh) * .18); background: var(--g200); color: var(--g500);
  font-family: var(--mono); font-size: calc(var(--sh) * .11);
}
.b-date b { font-family: var(--sans); font-weight: 700; font-size: calc(var(--sh) * .28); letter-spacing: -.04em; color: var(--navy); }

/* 3번: 세리프 이탤릭 캡션 · Love ya! */
.b-cap { font-family: var(--serif); font-style: italic; font-size: calc(var(--sh) * .2); line-height: 1.12; color: var(--sub); text-align: center; white-space: nowrap; }
.b-love { font-weight: 700; font-size: calc(var(--sh) * .22); letter-spacing: -.04em; color: var(--navy); white-space: nowrap; }


/* ---------- 배경 #ebebeb ---------- */
body { background: #ebebeb; }
.ticket.is-dim .strip::before, .ticket.is-dim .strip, .ticket.is-dim .seg { background: #f1f1f1; --bg: #f1f1f1; }
.face--in::before { background: #e4e4e4; }

/* about / pair / contact 라벨: 더 진하게 */
.tag__label { color: #3b3e44; }

/* 점 글씨 → 밴드 방향을 따라가는 가로줄 무늬 (기울어져도 깨지지 않게) */
.b-dot {
  background-image: repeating-linear-gradient(to bottom, var(--navy) 0 calc(var(--sh) * .022), transparent calc(var(--sh) * .022) calc(var(--sh) * .048)) !important;
  background-size: auto !important;
}
.t-navy .b-dot {
  background-image: repeating-linear-gradient(to bottom, #c6c9ce 0 calc(var(--sh) * .022), transparent calc(var(--sh) * .022) calc(var(--sh) * .048)) !important;
}

/* 2번 밴드: 하늘색 계열 → 회색 계열로 */
.t-navy { --sub: #80858d; }
.t-navy .b-w { color: #c6c9ce; }
.t-navy .b-line { -webkit-text-stroke-color: #c6c9ce; }
.t-navy .b-tight { color: #80858d; }
.b-tk { color: #dcdee1; }
.t-navy .b-ph i { color: #5b6069; }

/* 2번 밴드 가운데 옅은 글자(alwa · s · u): 회색 대신 흰 외곽선
   ↓ 반투명 흰색이 더 좋으면 아래 줄을 지우고 이 줄로:  .t-navy .b-ph i { color: rgba(255,255,255,.32) !important; } */
.t-navy .b-ph i { color: transparent !important; -webkit-text-stroke: max(1px, calc(var(--sh) * .016)) #fff; }


/* 배경 더 옅게 */
body { background: #f3f3f3; }
/* 점 글씨: 예전처럼 촘촘한 도트 */
.b-dot {
  background-image: radial-gradient(circle, var(--navy) 40%, transparent 46%) !important;
  background-size: calc(var(--sh) * .06) calc(var(--sh) * .06) !important;
}
.t-navy .b-dot { background-image: radial-gradient(circle, #c6c9ce 40%, transparent 46%) !important; }
/* 2번 밴드 오른쪽 작은 문구: 밝은 회색으로 */
.t-navy .b-tight { color: #c6c9ce; }
/* 도트 글씨: 점을 조금 더 크고 촘촘하게 (예전 사이트 느낌) */
.b-dot {
  background-image: radial-gradient(circle, var(--navy) 48%, transparent 55%) !important;
  background-size: calc(var(--sh) * .052) calc(var(--sh) * .052) !important;
  font-weight: 800;
}
.t-navy .b-dot { background-image: radial-gradient(circle, #c6c9ce 48%, transparent 55%) !important; }
.b-dot { background-size: max(2.4px, calc(var(--sh) * .034)) max(2.4px, calc(var(--sh) * .034)) !important;
         background-image: radial-gradient(circle, var(--navy) 50%, transparent 58%) !important; }
.t-navy .b-dot { background-image: radial-gradient(circle, #c6c9ce 50%, transparent 58%) !important; }


/* 3번 밴드 — 포스터 타이포 */
.t-light .b-ph i { color: #fff; }
.x-bold { font-weight: 700; font-size: calc(var(--sh) * .34); letter-spacing: -.05em; color: var(--navy); white-space: nowrap; }
.x-wt { color: #fff !important; }
.x-heart { font-size: calc(var(--sh) * .3); color: var(--navy); }
/* 가운데 큰 문구를 살짝 위로 → y·g 꼬리가 밴드 아래에 닿지 않게 */
.b-c { padding-top: 0; align-items: center; }
.b-ph { transform: translateY(calc(var(--sh) * -.06)); }


/* 02 pair — 모바일: 한 장씩 좌우로 넘기기 */
.pc-go { display: none; }
@media (max-width: 640px) {
  .pcs {
    display: flex; gap: 0;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .pcs::-webkit-scrollbar { display: none; }
  .pc { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .pc-go { display: block; }
  .pc-go--l { margin: 16px auto 0 0; }
}
.pc-go { font-size: 9px; }

/* pair card : 정보 줄을 이름 시작선(14px)에 맞춤 */
.pc__rows { padding-left: 14px; }

/* 밴드 안쪽면: 세 개 모두 진한 회색(#c6c9ce)으로 통일
   바깥 밝은 회색(2번 날짜칸 · 3번 전체)은 #dcdee1 */
.t-white, .t-navy, .t-light { --bg-in: var(--g300); }
.t-light { --bg: var(--g200); }
.b-date { background: var(--g200); }

/* 페어 이동 버튼(@moonsi0 / @letsgoyubin)도 list · back 처럼 밑줄 */
.pc-go { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .2em; }

/* 2번 날짜칸 · 3번 바깥 → 더 밝은 회색 */
.t-light { --bg: var(--g100); }
.b-date { background: var(--g100); }

/* 밴드 두께: 안쪽면을 두께만큼 뒤로 빼고, 위·아래 가장자리에 흰 테두리 면 */
.ticket { --th: max(2.5px, calc(var(--sh) * .065)); }
.face--in { transform: translateZ(calc(var(--th) * -1)) rotateY(180deg); }
.rim {
  position: absolute; left: 0; width: 100%; height: var(--th);
  background: #fff; pointer-events: none;
  transition: background .5s;
}
.rim--t { top: 0;    transform-origin: 50% 0;    transform: rotateX(-90deg); }
.rim--b { bottom: 0; transform-origin: 50% 100%; transform: rotateX(90deg); }
.ticket.is-dim .rim { background: #f6f7f8; }

/* 바깥면 위·아래 가장자리 연회색 선 (세 밴드 모두 · 흰 두께 테두리 안쪽) */
.ticket { --ew: max(1px, calc(var(--sh) * .014)); --ec: #c6c9ce; }
.face--out::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-style: solid; border-width: var(--ew) 0; border-color: var(--ec);
  transition: border-color .5s;
}
.ticket.is-dim .face--out::after { border-color: transparent; }

/* 두께 테두리 색: 1·3번 = 안쪽면 회색, 2번 = 아주 밝은 회색 */
.t-white .rim, .t-light .rim { background: #c6c9ce; }
.t-navy .rim { background: #e9e9eb; }
.ticket.is-dim .rim { background: #f6f7f8; }

/* 입장 화면 click to check-in : 좌측 상단 kissmissbass 와 같은 글씨 (PC 11px · 모바일 10px) */
.entry__hint {
  font-family: var(--sans); font-size: var(--ui); font-weight: 400; letter-spacing: .01em;
}
@media (max-width: 640px) { .entry__hint { font-size: var(--ui); } }

/* =========================================================
   모바일 가벼운 모드 (script.js 가 폰에서 <html class="lite"> 를 붙임)
   · 안쪽면: 조각마다 같은 회색 한 장 + 원래 자리(1px 뒤) → 이음 세로줄 없음
   · 두께는 위쪽 테두리 면이 그대로 보여줌
   ========================================================= */
.lite .face--in { transform: translateZ(-1px) rotateY(180deg); background: var(--bg-in); }

/* =========================================================
   모바일 화면 아래 흰 선 없애기
   · 앱 안 브라우저 등에서 화면 높이가 살짝 어긋나면 바탕(body)이 비쳐 흰 선이 생김
   · 입장 화면 동안은 바탕 전체를 남색으로, 입장 화면 자체도 바깥까지 남색으로 칠함
   ========================================================= */
html { background: #f3f3f3; }
html.on-entry, html.on-entry body { background: var(--navy); }
.entry { box-shadow: 0 0 0 100vmax var(--navy); }

/* =========================================================
   모바일 창: 스크롤바 없이 한 화면에 (script.js fitPanel 이 높이까지 맞춰 축소)
   ========================================================= */
@media (max-width: 640px) {
  .panel { max-height: none; }
  .panel__body { overflow: visible; }
  .pc__img { aspect-ratio: 5 / 4.4; }      /* 사진을 조금 낮게 → 덜 축소돼서 글씨가 덜 작아짐 */
}

/* 모바일 pair 사진 (고유빈 · 문시영 동일): 머리 위쪽을 자르고 얼굴이 가운데 오게
   숫자를 키우면(예: 65%) 사진이 더 위로 올라가고, 줄이면(예: 45%) 내려와요 · 0% = 맨 위 기준 */
@media (max-width: 640px) {
  .pc__img { background-position: center 25%; }                     /* 고유빈 · 문시영 동일 */
}

/* 모바일 pair: 문시영 카드 왼쪽에 고유빈 사진 끝(머리카락)이 1px 정도 비치던 것 수정
   → 화면 축소(zoom) 때문에 넘김 위치가 소수점으로 어긋나 옆 카드가 살짝 보였음 · 두 카드 사이에 빈 간격을 둠 */
@media (max-width: 640px) {
  .pcs { gap: 40px; }
}


/* =========================================================
   모바일: 2번(남색) 밴드에 흰 사선이 비치던 문제 수정
   · 사파리가 세워둔 두께 면(rim)의 앞뒤 순서를 가끔 잘못 그려서, 뒤쪽 밝은 테두리가 앞 남색 면 위로 비쳤음
   · 모바일에서는 두께 면을 아예 만들지 않고, 바깥면·안쪽면 위쪽 가장자리에 같은 색 띠를 칠해서 두께처럼 보이게 함
   ========================================================= */
.t-white, .t-light { --rimc: #c6c9ce; }
.t-navy { --rimc: #e9e9eb; }
.lite .face--out::after { border-top: var(--th) solid var(--rimc); }
.lite .face--in::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--th);
  background: var(--rimc); pointer-events: none; transition: opacity .5s;
}
.lite .ticket.is-dim .face--out::after { border-top-color: transparent; }
.lite .ticket.is-dim .face--in::after { opacity: 0; }

/* =========================================================
   창 하단 backstage (원래 kissmissbass 자리)
   · 평소 회색 → 마우스 올리거나 누르면 남색 · 누르면 BACKSTAGE PASS
   ========================================================= */
.bs-go {
  font: inherit; letter-spacing: inherit; color: var(--g500);
  background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color .2s;
}
.bs-go:hover, .bs-go:focus-visible, .bs-go:active { color: var(--navy); outline: none; }

/* =========================================================
   BACKSTAGE PASS (시안 C · 남색 카드)
   ========================================================= */
.pass {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s .35s;
}
.pass.is-open { visibility: visible; pointer-events: auto; transition: none; }
.pass__backdrop {
  position: absolute; inset: 0;
  background: rgba(233, 234, 236, .6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .3s;
}
.pass.is-open .pass__backdrop { opacity: 1; }
.pass__fit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.pass__card {
  position: relative; width: 460px;
  padding: 58px 24px 0;                       /* 위 여백 넉넉히 → 제목이 조금 아래로 */
  background: var(--navy); color: #fff;
  border-radius: 6px; overflow: hidden;
  font-family: var(--kr);
  /* 그림자: filter 대신 box-shadow → 아이폰 사파리에서 모서리 회색 생기던 것 해결 */
  box-shadow: 0 14px 30px rgba(0, 18, 40, .22), 0 2px 6px rgba(0, 18, 40, .10);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.pass.is-open .pass__card { opacity: 1; transform: none; }
.pass__card::before {                        /* 목걸이 구멍 */
  content: ""; position: absolute; top: 14px; left: 50%;
  width: 44px; height: 8px; margin-left: -22px; border-radius: 4px;
  background: #e9eaec;
}
.pass__x {
  position: absolute; top: 9px; right: 9px; width: 26px; height: 26px;
  display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: 50%; color: var(--g400); cursor: pointer;
  transition: color .2s;
}
.pass__x:hover, .pass__x:focus-visible { color: #fff; outline: none; }
.pass__h {
  margin: 0 0 18px;
  font-family: var(--sans); font-weight: 700;
  font-size: 74px; line-height: .88; letter-spacing: -0.065em; color: #fff;   /* BACKSTAGE 가 칸 폭에 꽉 차게 */
}
.pass__lab {
  margin: 0 0 5px; display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; letter-spacing: -0.02em; color: #fff;          /* 창 하단 backstage 와 같은 글씨 */
}
.pass__lab--g { margin-top: 14px; }
.pass__clear {
  font: inherit; font-size: 10px; letter-spacing: -0.02em; color: var(--g400);
  background: none; border: 0; padding: 0; cursor: pointer; transition: color .2s;
}
.pass__clear:hover, .pass__clear:focus-visible { color: #fff; outline: none; }
.pass__rule { border-top: 1px solid rgba(255, 255, 255, .5); margin: 0 0 7px; }

/* 이름 쓰는 칸 */
.pass__sign {
  position: relative; aspect-ratio: 7 / 1;          /* 이름 칸: 낮게 */
  background: #f7f8f9; cursor: crosshair;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.pass__sign canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.pass__ph {                                 /* sign here : 칸 정중앙 · 쓰기 시작하면 사라짐 */
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none;
  font-size: 10px; letter-spacing: -0.02em; color: var(--g400);
  transition: opacity .2s;
}
.pass__sign.has-ink .pass__ph { opacity: 0; }

/* special guest 배너 칸 */
.pass__slots { display: grid; gap: 6px; }
.pass__slot { position: relative; aspect-ratio: 5 / 1; background: #f7f8f9; overflow: hidden; }
.pass__slot::before {                       /* 빈 칸일 때: 가운데 coming soon... (배너가 들어오면 그 아래로 가려짐) */
  content: "coming soon..."; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 10px; letter-spacing: -0.02em; color: var(--g400);
}
.pass__slot:has(img)::before { content: none; }
.pass__slot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

.pass__foot {
  margin: 20px -24px 0; padding: 10px 24px;
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; color: var(--navy);
  font-size: 11px; letter-spacing: .02em;
}
.pass__foot .pass__brand { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: -0.03em; }
@media (prefers-reduced-motion: reduce) { .pass__card { transition: opacity .2s; transform: none; } }

/* 모바일 패스: 다른 창과 같은 폭(좌우 44px 여백)으로 · 제목은 폭에 맞춰 같이 줄어듦 */
@media (max-width: 640px) {
  .pass__card { width: min(260px, calc(100vw - 130px)); padding: 36px 16px 0; border-radius: 5px; }
  .pass__card::before { top: 10px; width: 30px; height: 6px; margin-left: -15px; border-radius: 3px; }
  .pass__x { top: 5px; right: 5px; }
  .pass__h { font-size: calc(min(260px, 100vw - 130px) * .1796 - 32px * .1796); margin-bottom: 12px; }
  .pass__lab { margin-bottom: 2px; font-size: 7.5px; }      /* name · clear · special guest ↔ 구분선 간격 좁게 */
  .pass .pass__clear, .pass .pass__ph, .pass .pass__slot::before { font-size: 7.5px; }   /* 작은 글씨 전부 7.5px */
  .pass__rule { margin-bottom: 5px; }
  .pass__lab--g { margin-top: 10px; }
  .pass__slots { gap: 5px; }
  .pass__foot { margin: 14px -16px 0; padding: 7px 16px; font-size: 9px; }
  .pass__foot .pass__brand { font-size: 12px; }
}

/* 배너 빈 칸: 가운데에 회색 coming soon... (사진이 들어오면 사진이 덮어서 안 보임) */
.pass__slot { position: relative; display: grid; place-items: center; }
.pass__slot::before {
  content: "coming soon...";
  font-size: 10px; letter-spacing: -0.02em; color: var(--g400);
}
.pass__slot img { position: absolute; inset: 0; }