@charset "UTF-8";
/*
Pretendard 자체 호스팅. 이 줄이 없으면 아래 --body/--display 의 첫 후보가
아무 데서도 안 잡혀서 Windows 는 맑은 고딕으로 떨어진다 — 실제로 그 상태였다.
가변 폰트(font-weight: 45 920) 한 벌이라 이 파일이 쓰는 400/500/600/700/800 이
전부 정확한 굵기로 나온다. 정적 5벌(3.8MB)을 받는 것보다 작다.
동적 서브셋이라 @font-face 가 92 개고 각자 unicode-range 를 갖는다. 브라우저는
그 페이지에 실제로 쓰인 글자가 든 조각만 받는다(한글 폰트는 통짜로 받으면 700KB 대).
조각이 92 개라 규칙도 92 개 — app.css 에 인라인하면 900 줄이 늘어나므로 파일을 나눴다.
가 아니라 @import 인 이유: 템플릿 13 개가 전부 app.css 만 링크하고 있어서,
여기 한 줄이면 전 화면에 붙는다. 대신 app.css 를 받은 뒤에야 이 파일을 받으러 가는
왕복 한 번이 더 든다 — 동일 출처 정적 파일이고 font-display: swap 이라 그동안에도
글자는 폴백으로 보이므로 화면이 비지 않는다.
*/
@import url("/css/pretendard-a2aecb8b109c1eda50cd1ab81fcada9e.css");
/* ------------------------------------------------------------------
공연 예매 - 공통 스타일
컨셉: 어두운 객석 + 조명 받는 무대.
배경을 보라 섞인 남색이 아니라 "중성 근검정"으로 둔 이유:
이 서비스의 주인공은 포스터 이미지다. 배경에 색기가 있으면 포스터 색과
싸워서 탁해 보인다. 배경에서 색을 빼야 콘텐츠가 유일한 색이 된다.
변수명은 예전 그대로 두고 값만 교체했다. 기존 규칙들이 전부 자동으로
새 값을 따라오므로 화면별 수정이 필요 없다.
------------------------------------------------------------------ */
:root {
/* "로고개선: UI 디자인 및 색감 개선" 커밋이 이 값들을 아래(옛 --radius 뒤)에
새 :root 블록으로 다시 선언해서, 여기 있던 원래 값(#0B0B0C/#FFC940 등)은
화면에 전혀 안 쓰이는 죽은 선언이었다 — CSS 커스텀 프로퍼티는 나중 선언이
그냥 덮어쓰므로 문법 오류 없이 조용히 무효화된다. 두 블록을 하나로 합쳤다. */
--ink: #111214; /* 객석 어둠 (중성, 살짝 웜톤) */
--ink-soft: #1A1B1E; /* 카드/표면 */
--ink-raised: #232428; /* 한 단계 더 뜬 표면 (입력창 등) */
--paper: #F8F4EC; /* 본문 (아이보리) */
--brass: #E9B44C; /* 무대 조명 (웜 골드) */
--brass-dim: #B58A38;
/*
라이트 배경(--paper) 위에서 글자로 쓰는 브라스.
--brass 와 --brass-dim 은 둘 다 어두운 배경 위에 놓일 것을 전제로 고른 값이라
아이보리 위에서는 각각 대비 1.73 / 2.88 이다. 본문 텍스트 기준(WCAG 1.4.3 의 4.5)에
한참 못 미쳐서, 라이트 화면에서 강조하려고 브라스를 쓰면 오히려 안 읽힌다.
같은 색상(hue)을 유지하면서 명도만 내려 4.5 를 넘긴 값이다(측정 4.51).
채움색으로 쓸 때(브라스 버튼, 어두운 면 위 글자)는 계속 --brass 를 쓴다 —
그쪽은 배경이 어둡거나 자기가 배경이라 이 문제가 없다.
*/
--brass-ink: #8F6A15;
--rose: #F26D6D; /* 매진 */
--teal: #63B7AF;
--plum: #8D7AAE;
--mute: #B6B0A7; /* 보조 텍스트 */
--line: rgba(248, 244, 236, 0.09);
--line-strong: rgba(248, 244, 236, 0.18);
/* 명조체를 버리고 Pretendard 하나로 통일. 한글은 자간을 벌리면 즉시 올드해진다.
첫 후보가 위에서 @import 로 실어온 자체 호스팅 가변 폰트다. 그 다음 'Pretendard' 는
방문자 PC 에 이미 깔려 있는 경우로, 웹폰트를 한 조각도 안 받고 끝난다. */
--display: 'Pretendard Variable', 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
--body: 'Pretendard Variable', 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
/*
좌석 등급 색. 이 화면에는 포스터가 없어서 "배경에서 색을 빼 포스터를 유일한 색으로
둔다"는 위 원칙이 적용되지 않는다 — 여기서는 등급이 곧 콘텐츠다.
종전에는 등급을 앰버 한 색의 투명도 + 테두리 굵기로만 구분했는데 둘 다 무너져 있었다.
측정값: 좌석 대비 명암비가 VIP 11.88 / R 6.03 / S 2.28 / A 1.23 로 S·A 가 WCAG
1.4.11(비텍스트 3.0) 미달이었고, 굵기도 맞춤 배율에서 R·S·A 가 전부 0.67px,
확대해도 R 과 S 가 똑같이 1.33px 라 4단계가 실제로는 3단계로 접혀 있었다.
콘서트홀 기준 2,481석 중 1,619석(65%)이 서로 구별되지 않는 상태였다.
그래서 색상(hue)으로 가르되 **명도도 같이 단조 감소**시킨다. 색상만으로 가르면
색각 이상이나 흑백 출력에서 등급 순서가 사라진다. 네 색 모두 배경 대비 3.0 을 넘는다
(VIP 9.08 / R 5.33 / S 4.06 / A 3.37). 더 선명한 팔레트도 검토했지만
(#FFC940/#F0835A/#4E8FBF/#5F5F69) 무대 조명 연출과 부딪혀 이쪽으로 낮췄다.
*/
--grade-vip: #D9A93F;
--grade-r: #BF7150;
--grade-s: #4A7791;
--grade-a: #646470;
/* 예매 불가 좌석은 무채색으로 뒤로 물린다. 종전엔 판매 완료가 --rose 였는데,
살 수 없는 좌석이 가장 눈에 띄는 색을 갖는 건 시선 유도가 거꾸로 된 것이다. */
--seat-held: #3A3A42;
--seat-sold: #212125;
/*
모서리 반경 스케일. 종전엔 값이 10종류로 흩어져 있었고, 더 문제는 화면별로 갈렸다는
것이다 — 목록·상세·로그인·결제는 둥근데 관리자 대시보드·마이페이지·예매 CTA·배지는
각진 채로 남아 같은 앱 안에 세대가 둘 섞여 보였다. 아래 넷 안에서만 고른다.
--radius 카드·패널 (통계 카드, 차트 상자, 예매 내역 줄, 필터 패널)
--radius-sm 버튼·입력 (결제 버튼, 관리자 필터, 취소 버튼)
--radius-xs 작은 컨트롤 (비밀번호 표시 토글, 인라인 코드, 지도)
999px 알약 — 칩·필터·배지처럼 "고르는 것"
예외는 셋뿐이고 이유가 분명하다. ① 좌석·범례 견본(3px)과 미니맵 블록(1~2px)은 요소
자체가 10~13px 이라 위 값을 쓰면 모서리가 면적을 다 먹는다(견본은 좌석과 같아야 하므로
같은 값을 쓴다). ② 카카오 로그인 버튼(12px)은 공식 디자인 가이드 수치라 우리 스케일에
맞추면 안 된다. ③ 무대는 반원 곡선이라 반경이 아니라 형태다.
*/
--radius: 14px;
--radius-sm: 10px;
--radius-xs: 6px;
/* 극장 예매 UI 톤앤무드 리디자인(2026-08-06) 전용 — 라이트 배경 화면(홈 등)의 포스터는
기존 카드보다 더 각지게(6px), 다크 패널(요약 카드 등)은 더 크게(16px) 간다.
화면을 하나씩 이 톤으로 옮기는 동안에만 쓰이므로 전환이 끝나면 --radius 계열로
정리할 수 있다. */
--radius-poster: 6px;
--radius-panel: 16px;
}
* { box-sizing: border-box; }
body {
margin: 0;
background:
linear-gradient(180deg, #171619 0%, var(--ink) 420px),
var(--ink);
color: var(--paper);
font-family: var(--body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 40px 24px 96px; }
/* 좌석 배치도 전용. 1,080px 은 목록·상세의 읽기 폭 기준인데, 한 줄 41석짜리 홀에는
좁아서 좌석이 필요 이상으로 작아진다. 격자에는 폭을 더 준다. */
.wrap-wide { max-width: 1440px; }
/* 스크롤해도 따라오는 반투명 헤더. 배경을 반투명 + blur 로 깔아
아래 콘텐츠가 비쳐 지나가게 한다. */
.masthead {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 36px;
background: rgba(17, 18, 20, 0.78);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
}
.masthead h1 {
font-family: var(--display);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0;
}
.masthead .brandlink { display: inline-flex; align-items: center; }
.masthead .logo-mark {
width: 28px;
height: 18px;
margin-right: 10px;
color: var(--brass);
flex-shrink: 0;
}
.masthead .tag {
font-size: 13px;
letter-spacing: -0.01em;
color: var(--mute);
}
.masthead .authnav {
margin-left: auto;
display: flex; align-items: center; flex-wrap: wrap; gap: 10px; row-gap: 6px;
font-size: 13px; color: var(--mute);
}
.masthead .authnav a { color: var(--brass); }
/* 이전엔 navdivider 가 authnav 의 독립 flex 아이템이었는데, 좁은 화면에서 authnav 가
줄바꿈되면 구분선만 첫 줄 끝에 홀로 남고 로그인/닉네임 묶음은 다음 줄로 떨어졌다.
navactions(로그인/닉네임+로그아웃 묶음)의 ::before 로 옮기면 묶음과 항상 같이 움직인다. */
.masthead .navactions { display: inline-flex; align-items: center; gap: 10px; }
.masthead .navactions::before { content: ''; flex: none; width: 1px; height: 16px; background: var(--line-strong); }
.masthead .authnav form { margin: 0; }
.masthead .authnav .linklike {
background: none; border: 0; padding: 0;
font: inherit; color: var(--brass); cursor: pointer;
}
/* 좁은 화면에서 pill 이 내용 폭보다 더 눌리면 "로그인" 같은 두세 글자 텍스트가
공백 없이 한 글자씩 줄바꿈된다(CJK 기본 줄바꿈 규칙). flex 아이템은 기본
min-width:auto 라 내용보다 눌릴 수 있으므로, 줄바꿈 대신 pill 전체가
다음 줄로 넘어가게 막는다. */
.masthead .authnav .navlink,
.masthead .authnav .who,
.masthead .authnav .linklike,
.masthead .authnav .btn-login,
.masthead .authnav .btn-signup {
white-space: nowrap;
}
/* ---- 내비 링크(공연 찾기 · 마이페이지) ----
화면 스코프에 두지 않는다. 헤더가 공용 조각이라 여기 스타일도 공용이어야 한다 —
알약 호버가 body.page-home 에만 걸려 있어서 홈에서만 눌리는 범위가 보였다.
호버에 배경을 깔면 어디까지가 누르는 영역인지 보인다. 글자색만 바뀌면 그 범위를
글자 폭으로 짐작해야 한다. */
.masthead .authnav .navlink {
padding: 8px 14px;
border-radius: 999px;
transition: background .18s, color .18s;
}
/* 지금 보고 있는 구역. 색만으로 알리지 않도록 마크업에서 aria-current="page" 를 같이 준다. */
.masthead .authnav .navlink.active { font-weight: 700; }
/* 마이페이지 링크의 안 읽은 알림 수. 마이페이지 탭 배지(.mypagetabs .tabbadge)와
같은 생김새(로즈 배경 + 흰 글자 — "확인할 게 남았다"를 브라스와 구분)를 쓰지만,
여기 있는 이유가 다르다 — 예전엔 이 배지가 마이페이지 탭 안에만 있어서 마이페이지를
직접 열어보기 전엔 새 알림이 왔는지 알 방법이 없었다. 헤더는 화면마다 톤(다크/라이트)이
갈리지만 로즈+흰 글자는 둘 다에서 그대로 읽혀서 톤별 오버라이드가 필요 없다. */
.masthead .authnav .navbadge {
display: inline-block;
min-width: 16px;
margin-left: 5px;
padding: 0 5px;
border-radius: 999px;
background: #B23A3A;
color: #fff;
font-size: 11px; font-weight: 700; line-height: 16px;
text-align: center;
vertical-align: 2px;
}
/* 닉네임 앞 이니셜 원. */
.masthead .authnav .who { display: inline-flex; align-items: center; gap: 7px; }
.masthead .authnav .who-avatar {
flex: none;
width: 24px; height: 24px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
line-height: 1;
}
/* ---- 전환 대기 표시 (진행 막대 · 눌린 버튼) ----
전체 페이지 로드라 링크를 누른 순간부터 다음 화면까지 화면에 아무 변화가 없다.
막대는 그 사이를 메운다. 자세한 사정은 fragment/navprogress.html 주석 참고.
z-index 는 이 파일에서 가장 높다(모달 오버레이 70, 토스트 60). 이동은 그 위에
뜬 것들까지 전부 걷어내고 벌어지는 일이라 무엇에도 가리면 안 된다. */
.navprogress {
position: fixed;
top: 0; left: 0;
z-index: 90;
height: 3px;
width: 0;
background: var(--brass);
opacity: 0;
pointer-events: none;
}
.navprogress.show {
opacity: 1;
/*
끝을 모르는 진행이라 92% 에서 멈춰 세운다 — 100% 까지 갔다가 화면이 안 바뀌면
"다 됐는데 안 나온다"로 읽힌다. 실제 완료는 새 문서가 그려지는 것이다.
width 를 클래스에도 적어 두는 이유: 모션 최소화 설정에서는 전역 규칙이
animation 을 끄는데, 그러면 막대가 0 폭으로 남아 아무것도 안 보인다. 이건 장식이
아니라 "지금 이동 중"을 알리는 표시라 모션을 껐다고 사라지면 안 된다. 애니메이션이
도는 환경에서는 아래 keyframes 가 이 값을 덮어 0 에서부터 자라난다.
*/
width: 92%;
animation: navprogress-grow 8s cubic-bezier(.12, .78, .2, 1) forwards;
}
@keyframes navprogress-grow {
from { width: 0; }
to { width: 92%; }
}
/* 눌린 폼 버튼. disabled 를 안 쓰는 이유는 navprogress.html 주석 참고 —
두 번째 제출은 스크립트가 막고, 여기서는 "받았다"만 보인다.
cursor: progress 는 안 쓴다. pointer-events 를 끈 요소는 히트 테스트에서 빠져
자기 커서가 안 뜨고(부모 것이 뜬다), 애초에 각 버튼의 cursor: pointer 규칙이
명시도로 이 클래스를 이긴다 — 적어 두면 안 먹는 선언만 남는다. */
.is-pending {
opacity: .7;
pointer-events: none;
}
/* ---- 화면 전환 (View Transitions) ----
같은 출처끼리의 문서 이동을 브라우저가 이어 그리게 한다. 위 진행 막대가 "기다리는
동안"을 메운다면, 이건 새 화면이 들어오는 순간의 뚝 끊김을 없앤다 — 카드를 눌렀는데
화면이 통째로 깜빡이고 다른 페이지가 나타나는 것과, 누른 포스터가 그대로 커지면서
상세가 되는 것은 같은 이동이라도 다르게 읽힌다.
지원하지 않는 브라우저(파이어폭스 등)는 이 규칙을 무시하고 종전대로 즉시 이동한다.
기능이 아니라 마감이라 폴백을 따로 만들 게 없다.
포스터를 잇는 이름(view-transition-name)은 스크립트가 누른 순간에 붙인다 — 이유는
fragment/navprogress.html 의 해당 블록 주석 참고(한 문서에 같은 이름이 둘이면
전환이 통째로 무효가 된다). */
@view-transition { navigation: auto; }
/* 기본값(.25s)보다 조금 짧게. 이동은 이미 기다린 뒤에 벌어지는 일이라, 페이드가 길면
그만큼 화면이 늦게 도착하는 것으로 느껴진다. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .22s; }
/* 모션 최소화 설정. 전역 `* { animation: none }` 규칙은 ::view-transition-* 의사요소에
닿지 않으므로(문서 트리 밖에 있다) 여기서 따로 끈다 — 안 끄면 모션을 껐다고 한
사용자에게 화면 전체가 움직이는 전환만 남는다. */
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* ---- 헤더 검색 (아이콘 → 헤더 안 둘째 줄) ----
접힌 상태는 아이콘 하나뿐이라 종전 헤더의 무게를 바꾸지 않고, 누르면 헤더 안에서
한 줄이 더 열린다.
왜 헤더 "안"인가: .masthead 는 sticky 반투명 바다. 검색 줄을 바 아래에 겹쳐 띄우면
그 뒤로 본문이 비쳐 지나가면서 입력한 글자와 본문 글자가 겹쳐 읽힌다. 헤더의 한
줄로 넣으면 배경 blur 를 그대로 물려받는다.
flex-wrap 은 .searchopen 일 때만 켠다. 헤더는 좁은 화면에서 authnav 가 "내부적으로"
줄바꿈되도록 오래 다듬어 온 자리라(.navactions ::before 주석 참고), 상시로 켜 두면
닫혀 있을 때도 내비 묶음이 통째로 다음 줄로 떨어지는 경우가 생긴다. 닫혀 있는
동안에는 규칙이 아예 안 걸리게 두는 편이 안전하다. */
.masthead.searchopen { flex-wrap: wrap; }
.masthead .navsearch-toggle {
flex: none;
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
padding: 0;
background: none; border: 0; border-radius: 999px;
color: var(--mute); cursor: pointer;
transition: background .18s, color .18s;
}
/* [hidden] 이 display:inline-flex 에 지므로 되받는다. 스크립트가 없는 브라우저에서
아이콘이 그대로 보이면 눌러도 아무 일 없는 죽은 버튼이 된다. */
.masthead .navsearch-toggle[hidden] { display: none; }
.masthead .navsearch-toggle:hover { background: rgba(248, 244, 236, .08); color: var(--paper); }
/* 열려 있는 동안은 내비의 "지금 여기"(.navlink.active)와 같은 방식으로 눌린 표시를 한다. */
.masthead.searchopen .navsearch-toggle { background: rgba(248, 244, 236, .10); color: var(--paper); }
/* 홈 히어로 검색과 같은 밑줄형. 흰 알약을 하나 더 만들면 헤더에 없던 면이 생겨서
로고·내비와 층이 어긋난다. 밑줄은 헤더의 아래 테두리와 같은 언어라 덜 튄다. */
.masthead .navsearch {
flex: 0 0 100%;
display: flex; align-items: center; gap: 12px;
margin-top: 14px;
padding-bottom: 12px;
border-bottom: 2px solid var(--line-strong);
transition: border-color .25s;
animation: navsearch-in .22s ease;
}
.masthead .navsearch[hidden] { display: none; }
.masthead .navsearch:focus-within { border-color: var(--brass); }
.masthead .navsearch svg { flex: none; color: var(--mute); }
.masthead .navsearch input[type="text"] {
flex: 1; min-width: 0;
background: none; border: 0; outline: none;
font: inherit;
/* 16px 아래로 내리지 말 것 — iOS 사파리는 그보다 작은 입력칸에 초점이 가면
화면을 확대해 버리고, 확대된 상태로 헤더만 남는다. */
font-size: 16px;
color: var(--paper);
}
.masthead .navsearch input::placeholder { color: rgba(248, 244, 236, .45); }
.masthead .navsearch button {
flex: none;
padding: 9px 20px;
background: var(--brass); color: var(--ink);
border: 0; border-radius: 999px;
font: inherit; font-size: 14px; font-weight: 700;
white-space: nowrap; cursor: pointer;
transition: transform .2s, background .2s;
}
.masthead .navsearch button:hover { background: #f2c874; }
.masthead .navsearch button:active { transform: scale(.94); }
/* 열릴 때만 도는 한 번짜리. hidden 이 걷히면서 display 가 none → flex 로 바뀌므로
매번 처음부터 다시 재생된다. 모션 최소화 설정에서는 전역 규칙이 꺼 준다. */
@keyframes navsearch-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* ---------- 페이지네이션 ---------- */
.pager {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 40px;
}
/* ---------- 공연 목록 ---------- */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 28px;
}
.card { display: block; }
/* 카드 진입 리빌. JS(IntersectionObserver)가 지원되고 모션을 끄지 않았을 때만
.grid 에 .reveal 을 붙이므로, JS 가 없거나 실패해도 카드는 기본값(불투명)으로
항상 보인다 — 애니메이션이 "안 보이면 정상, 보이면 보너스"가 아니라 거꾸로
"JS 없으면 카드가 영영 안 보임"이 되면 안 된다. */
.grid.reveal .card {
opacity: 0;
transform: translateY(14px);
transition: opacity .45s ease, transform .45s ease;
}
.grid.reveal .card.is-visible { opacity: 1; transform: none; }
.card .poster {
aspect-ratio: 3 / 4;
background: var(--ink-soft);
border: 1px solid var(--line);
overflow: hidden;
margin-bottom: 12px;
}
.card .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card h3 { font-size: 15px; margin: 0 0 4px; font-weight: 600; }
.card .meta { font-size: 13px; color: var(--mute); }
/* ---------- 상세 ---------- */
.detail { display: grid; grid-template-columns: 280px 1fr; gap: 40px; }
/* 이 h2(공연명)의 실제 타이포는 아래 body.page-detail h2 가 정한다 — 타입 선택자가
하나 더 붙어(body.page-detail h2) 명시도가 이 규칙보다 높아서 항상 이겼다.
같은 값(30px)을 겹쳐 써서 문제가 안 드러났을 뿐, 죽은 규칙이라 지웠다. */
.spec { border-top: 1px solid var(--line); margin-top: 24px; }
.spec div { display: flex; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec dt { width: 84px; color: var(--mute); flex: none; margin: 0; }
/* 관람료 "VIP 180,000원 · R 144,000원 · …". 등급+금액은 붙여 두고 구분점에서만 줄을 바꾼다 —
그냥 두면 숫자와 '원' 사이가 끊겨 "144,000" 다음 줄에 "원" 만 남는다(실측 360px). */
.spec .fee { white-space: nowrap; }
.spec .feesep { white-space: normal; }
/* ---------- 좌석 배치도 (시그니처) ---------- */
/*
인원수 선택과 확대 버튼은 상단 헤더(.masthead) 바로 아래에 고정한다. 63줄짜리 콘서트홀에서
좌석을 고르다가 인원수를 바꾸거나 확대로 전환하려면 매번 맨 위로 스크롤해야 했다.
top 은 헤더 실제 높이를 써야 한다 — 고정폭이 아니다. .masthead 도 sticky(top:0)라서, 이 값이
비어 있으면(0) 스크롤 중 두 sticky 요소가 같은 위치를 다투며 겹친다. 헤더 높이는 부제(공연명+
일시)가 좁은 화면에서 줄바꿈되면 달라지므로 JS 가 실측해 --header-h 로 넘긴다.
*/
.partysize {
display: flex; align-items: center; gap: 10px;
justify-content: center;
margin-bottom: 12px;
font-size: 13px; color: var(--mute);
position: sticky;
top: var(--header-h, 65px);
z-index: 15;
padding: 10px 0;
background: rgba(11, 11, 12, 0.72);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid var(--line);
}
.partysize label { color: var(--paper); font-weight: 600; }
/* 헤더 내비와 같은 문제·같은 해법. flex 아이템 기본 min-width:auto 라 좁은 화면에서
내용보다 눌리는데, 공백 없는 CJK 라벨("인원수", "전체 보기")은 그때 글자 단위로
쪼개진다 — 실측 375px 에서 라벨이 16px 폭 / 62px 높이(세 줄)까지 갔다. 줄바꿈 대신
요소 통째로 다음 줄로 넘어가게 막는다(아래 media query 의 flex-wrap 과 한 쌍). */
.partysize label, .partysize .zoomtoggle { white-space: nowrap; }
.partysize select {
background: var(--ink-soft); color: var(--paper);
border: 1px solid var(--line); border-radius: 999px;
padding: 5px 10px; font: inherit;
}
.partysize .hint { color: var(--mute); font-size: 12px; }
/* 좌석 크기 전환. 기본은 폭 맞춤(가로 스크롤 없음)이고, 누르면 눌러서 고르기 좋은 크기로 키운다. */
.zoomtoggle {
background: var(--ink-soft); color: var(--paper);
border: 1px solid var(--line); border-radius: 999px;
padding: 5px 13px; font: inherit; font-size: 12px;
cursor: pointer;
}
.zoomtoggle:hover { border-color: var(--brass-dim); }
.zoomtoggle[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }
/*
맞춤 모드에서 좌석이 누르기엔 작을 때만(2,505석 홀은 11px 까지 내려간다) 이 버튼을
주요 액션으로 올린다. 그 순간 할 수 있는 의미 있는 행동이 확대뿐이라서다 —
좌석을 아직 못 골랐으니 예매 버튼도 비활성이고, 강조가 겹치지 않는다.
좌석이 충분히 큰 홀에서는 이 클래스가 안 붙어 조용한 보조 버튼으로 남는다.
*/
.zoomtoggle--suggest {
background: var(--brass); border-color: var(--brass);
color: var(--ink); font-weight: 700;
padding: 7px 18px; font-size: 13px;
box-shadow: 0 0 0 3px rgba(233, 180, 76, .18), 0 4px 14px rgba(233, 180, 76, .35);
}
.zoomtoggle--suggest:hover { border-color: var(--brass); filter: brightness(1.08); }
.stage {
position: relative;
margin: 8px auto 44px;
max-width: 640px;
height: 70px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border-top: 2px solid var(--brass);
box-shadow: 0 0 24px 1px rgba(255,201,64,.35), inset 0 18px 30px -14px rgba(255,201,64,.5);
background: linear-gradient(to bottom, rgba(255,201,64,.22), transparent 80%);
display: grid;
place-items: center;
font-family: var(--display);
letter-spacing: 0.5em;
font-size: 14px;
color: var(--brass);
padding-left: 0.5em;
}
.stage::after {
content: '';
position: absolute;
top: 100%; left: 50%;
width: 92%; height: 130px;
transform: translateX(-50%);
background: linear-gradient(to bottom, rgba(255,201,64,.14), transparent);
clip-path: polygon(38% 0, 62% 0, 100% 100%, 0% 100%);
pointer-events: none;
}
/*
좌석 격자 크기는 --seat-size 하나로 결정된다. 간격/통로 폭이 여기서 파생되므로
좌석 맵 스크립트는 이 변수 하나만 바꿔서 가장 긴 줄을 컨테이너 폭에 맞춘다.
JS 가 없거나 실패해도 clamp() 기본값으로 종전과 같은 크기가 나온다.
*/
.housescroll {
--seat-size: clamp(20px, 4vw, 26px);
--seat-gap: calc(var(--seat-size) * 0.28);
--aisle-gap: calc(var(--seat-size) * 1.25);
/* 구역(열) 사이. 통로보다 넓어야 "다른 구역"으로 읽힌다. 열이 여덟 개인 홀(콘서트홀 3층,
세종 3층)에서는 이 값이 곧 좌석에 쓸 폭을 깎으므로 통로(1.25)보다 조금만 넓게 잡는다. */
--zone-gap: calc(var(--seat-size) * 1.4);
/* 열마다 하나씩 붙는 고정 폭이라 열이 많은 홀에서 그대로 누적된다. 두 자리 열 번호가
들어가는 최소 폭으로 줄였다. */
--rowlabel-w: 16px;
/* 툴팁 여유. 등급·가격 툴팁은 좌석 중앙 기준으로 펼쳐지므로 줄 양끝 좌석에서는
격자 폭을 넘어간다. 안 보이는 상태(opacity:0)에서도 레이아웃에는 잡혀서, 여유를
두지 않으면 좌석이 전부 보이는데도 가로 스크롤바가 생긴다.
좌석 크기 계산도 이 값을 뺀 폭으로 하므로 여기만 고치면 양쪽이 같이 따라온다.
여유는 구역이 아니라 zoneline(가로로 나란히 놓이는 열들의 묶음) 양끝에만 준다.
구역마다 주면 세 열짜리 홀에서 좌석에 쓸 폭이 여유로만 380px 넘게 빠진다. 열 사이
툴팁은 --zone-gap 이 받아내고, 넘치는 만큼은 이웃 구역 위로 겹쳐 뜬다(z-index:5). */
--tooltip-bleed: 64px;
/* 맞춤 모드에서는 가로로 넘칠 일이 없지만(폭에 맞춰 좌석을 줄인다), 확대 모드와 아주 좁은
화면을 위해 남겨둔다. 넘치더라도 페이지 본문이 통째로 옆으로 밀리지 않아야 한다. */
overflow-x: auto;
overscroll-behavior-x: contain;
padding-bottom: 4px;
/*
스크롤 막대는 숨긴다(기능은 그대로). 좌석도는 지도처럼 끌거나 밀어서 보는 화면이고,
막대가 격자 옆에 붙으면 좌석 격자의 경계처럼 읽혀서 방해가 된다.
모바일은 원래 겹침(overlay) 막대라 잠깐 보였다 사라지지만, 여기서 같이 눌러둔다.
*/
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* 구형 Edge */
/*
한 손가락 스크롤은 브라우저 기본 동작에 맡기고(관성이 살아 있다), 두 손가락은 우리가
받아 좌석 크기를 바꾼다. pan-x pan-y 는 pinch-zoom 을 빼서, 격자 안에서의 두 손가락
제스처가 페이지 확대로 가로채이지 않게 한다. 격자 밖에서는 페이지 확대가 그대로 된다.
*/
touch-action: pan-x pan-y;
}
/* Chrome·Safari 는 위 두 속성으로 안 되고 이 의사요소를 없애야 한다. */
.housescroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/*
확대 모드에서는 격자가 지도처럼 동작한다 — 높이를 고정해 컨테이너 안에서 상하좌우로
스크롤되게 하고, 마우스로 끌어 움직인다(pan). 높이를 안 주면 세로는 페이지 스크롤이라
끌어 움직일 대상이 없다.
overscroll-behavior: contain — 지도 안에서 휠을 굴리다 끝에 닿았다고 페이지가 따라
움직이면, 좌석을 보다가 화면이 통째로 튀어 나간다.
*/
.housescroll.zoomed {
overflow: auto;
height: min(72vh, 860px);
overscroll-behavior: contain;
cursor: grab;
/*
지도 모드에서는 텍스트 선택을 아예 끈다. 끌기 시작(.dragging) 뒤에만 끄면 늦다 —
문턱(4px)을 넘기 전에 이미 선택이 시작되고, 브라우저가 선택을 따라가려고 컨테이너를
자동 스크롤해서 세로가 엉뚱한 곳으로 튄다(실측: 9 로 가야 할 scrollTop 이 866).
좌석도에서 글자를 선택할 일도 없다.
*/
user-select: none;
/*
스크롤이 잦은 요소라고 미리 알려서 별도 합성 레이어를 앞서 만들어둔다. 이게 없으면
처음 끌 때 브라우저가 그제서야 레이어를 만드느라 첫 프레임이 끊긴다. 지도 모드에서만
켠다 — 상시로 켜두면 페이지 전체가 이 레이어 하나를 위한 메모리를 계속 들고 있는다.
*/
will-change: scroll-position;
}
.housescroll.zoomed.dragging { cursor: grabbing; }
/*
핀치 중 미리보기용 래퍼. 손가락을 움직이는 동안은 좌석 크기를 건드리지 않고 이 요소만
scale 한다 — 합성(compositing)만 하므로 레이아웃이 없다. 좌석 크기를 직접 바꾸면 2,481개가
전부 다시 배치돼서 한 단계에 300ms 가 걸렸고, 핀치가 끊겨 보였다.
origin 을 0 0 으로 고정해야 스크롤 보정 계산이 간단해진다(콘텐츠 좌표 X -> k*X).
*/
/*
좌석 격자 전체를 감싸는 상자. 폭을 내용에 맞춘다(max-content).
기본값(block, 폭 = 스크롤러 폭)이면 좁은 밴드가 "화면 폭" 안에서 가운데를 잡고, 넓은
밴드만 그 밖으로 넘쳐 흐른다. 그래서 확대해서 가로로 넓어지는 순간 밴드마다 중심이
달라진다 — 실측(2,015석 홀, 확대): 전체 폭 2,492 인데 1층은 중앙 1,269 인 반면
무대 뒤 1층 P 와 2층은 707 이라 539px 씩 왼쪽으로 붙었다. 무대는 무대 뒤 밴드를
따라가므로 같이 밀린다.
내용 폭으로 두면 모든 밴드가 같은 좌표계를 공유해 중심이 하나로 모인다.
min-width: 100% 는 반대 경우를 위한 것이다 — 좌석이 화면보다 좁은 홀에서 상자가
쪼그라들면 밴드들이 왼쪽으로 몰린다.
*/
#housecontent { transform-origin: 0 0; width: max-content; min-width: 100%; }
.housescroll.pinching #housecontent { will-change: transform; }
/*
끌기·핀치 중에는 좌석의 :hover 를 완전히 죽인다.
setPointerCapture 는 pointermove 이벤트만 scroller 로 돌릴 뿐, :hover 는 여전히 커서
바로 아래 있는 좌석에 그대로 걸린다(스펙상 포인터 캡처가 :hover 를 대신 가져가지
않는다). 그래서 빠르게 끌면 지나가는 좌석마다 transform·border-color 전환(.1s)이
연달아 걸려 버벅였다. pointer-events: none 이면 히트테스트 자체에서 빠져서 :hover 가
아예 안 걸린다 — transition: none 만으로는(전환 없이 즉시 바뀌긴 해도) 좌석마다 스타일을
다시 계산하는 비용 자체는 남는다.
*/
.housescroll.dragging .seat,
.housescroll.pinching .seat {
transition: none;
pointer-events: none;
}
/*
무대 기준 배치. 무대 뒤 구역(합창석 등)은 무대 위쪽에, 정면 구역은 무대 아래에 놓는다.
zoneline 하나가 한 층(밴드)이고, 그 안의 열(zone)들이 가로로 나란히 놓인다 — 실제 좌석도가
한 층을 A~E 같은 좌우 구역으로 나누기 때문이다. 열 하나에 구역이 여럿이면 위에서 아래로 쌓인다.
좌석도에 층을 적지 않은 홀은 열이 하나뿐인 밴드가 되어 종전과 똑같이 쌓인다.
*/
.zoneline { display: flex; gap: var(--zone-gap); padding: 0 var(--tooltip-bleed); }
/* 층 이름을 못 얻어 머릿글이 없는 홀에서만 쓰인다(머릿글이 있으면 .bandname 이 간격을 낸다). */
.zoneline + .zoneline { margin-top: 44px; }
/*
무대 뒤 밴드와 무대 사이. 실제로 붙어 있는 자리라 좁게 두지만, 종전 값(14px, 게다가
.stage 자신의 8px 이 이기는 경우가 있었다)은 너무 좁았다 — 실측으로 가장 아래 좌석과
무대 사이가 6px, 좌석 한 칸의 절반이었다. 아래쪽 여백이 40px 인 것과 견주면 무대가
위쪽 좌석에만 달라붙은 것처럼 보인다.
좌석 크기에 비례시킨다. 고정값으로 두면 확대했을 때(좌석 12px → 24px) 좌석만 커지고
틈은 그대로라 다시 붙어 보인다. 호(arc) 때문에 줄 양끝이 아래로 처지는 것도 이 값이
흡수한다.
*/
.zoneline + .stage { margin-top: calc(var(--seat-size) * 2); }
/*
층 머릿글.
종전에는 층 경계를 알려주는 게 구역 이름뿐이었는데, 층 사이 간격과 같은 열 안 구역 사이
간격이 **둘 다 44px** 이라 "층이 바뀌었다"가 "옆 구역으로 넘어갔다"와 같은 무게로 읽혔다.
실측으로 확인한 값이고, 2층→3층 경계가 그나마 보였던 건 마침 등급색이 달라서였다.
그래서 층은 이름을 크게 한 번(구역마다 되풀이하지 않고) + 전체 폭 구분선으로 세우고,
층 사이 간격을 구역 사이(44px)보다 확실히 벌린다(72px).
position: sticky; left: 0 은 .floorname 과 같은 이유다 — 가로 스크롤로 오른쪽 구역을
보고 있어도 지금 몇 층인지가 왼쪽에 붙어 있어야 한다.
*/
.bandname {
position: sticky;
left: 0;
width: fit-content;
display: flex;
align-items: baseline;
gap: 10px;
margin: 72px var(--tooltip-bleed) 18px;
font-family: var(--display);
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--paper);
/* 층 바로가기가 여기로 점프한다. 두 sticky 바(헤더+인원수 줄)에 가리지 않게 —
실제 합산 높이는 JS 가 --sticky-h 로 채운다(.floor 와 같은 값을 쓴다). */
scroll-margin-top: var(--sticky-h, 130px);
}
/* 무대 바로 앞뒤 밴드는 무대와의 간격을 좁게 — 무대 뒤 좌석은 무대에 붙어 있고,
1층 머릿글이 무대에서 멀어지면 무대와 객석이 따로 노는 것처럼 보인다. */
#housecontent > .bandname:first-child { margin-top: 0; }
.stage + .bandname { margin-top: 26px; }
.bandname em {
font-style: normal;
font-size: 12px;
font-weight: 500;
color: var(--mute);
}
.bandname em b { color: var(--brass); font-weight: 700; }
.zone { display: flex; flex-direction: column; }
/*
열 묶음을 가운데로. justify-content: center 는 쓰면 안 된다 — 내용이 컨테이너보다 넓어지는
순간 양쪽으로 똑같이 넘쳐서 앞쪽 좌석이 음수 좌표로 나가고, 가로 스크롤은 0 아래로 못 가서
그 좌석들을 누를 수가 없다. auto 마진은 남는 공간이 없으면 0 으로 떨어지므로 왼쪽이 잘리지
않는다 (.house 의 align-items 와 같은 이유다).
*/
.zoneline > .zone:first-child { margin-left: auto; }
.zoneline > .zone:last-child { margin-right: auto; }
/* 층 블록. 층 이름은 가로 스크롤을 해도 왼쪽에 붙어 있어야 지금 몇 층인지 안 놓친다. */
.floor + .floor { margin-top: 44px; }
/* 층 바로가기(#floor-N)로 점프했을 때 목적지가 헤더+인원수 줄(둘 다 sticky) 밑에 깔리지
않도록 여백을 둔다. 두 sticky 바의 실제 합산 높이는 JS 가 --sticky-h 로 채운다. */
.floor { scroll-margin-top: var(--sticky-h, 130px); }
/* 구역 이름. 층을 뗀 나머지라 대개 알파벳 한 글자("A")다 — 층 머릿글(.bandname, 20px/800,
본문색)보다 확실히 아래 단계로 보이게 작고 흐리게 둔다. 종전에는 여기가 "1층 A" 를
통째로 들고 있어서 층 이름이 가장 작은 글씨로 다섯 번 반복됐다. */
.floorname {
position: sticky;
left: 0;
width: fit-content;
margin: 0 0 14px;
font-family: var(--display);
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
color: var(--brass-dim);
}
/*
층 바로가기. 층별 잔여석을 같이 보여줘서 어느 층을 볼지 먼저 정할 수 있게 한다.
항목이 구역(20개)에서 층(넷)으로 줄면서 낱개 칩을 늘어놓는 대신 한 덩어리(세그먼트
컨트롤)로 묶었다 — 개수가 적고 서로 배타적인 선택지라 하나의 컨트롤로 읽히는 게 맞다.
테두리와 배경을 바깥 컨테이너가 한 번만 갖고 안쪽 항목은 배경만 바뀐다.
width: fit-content + margin-inline auto 로 가운데 정렬한다. justify-content 로는
안 된다 — 컨테이너가 블록이라 폭이 100% 여서 테두리가 화면 전체로 늘어난다.
*/
.floornav-slot { display: flex; justify-content: center; }
/* 알약 배경색을 슬롯에 변수로 둔다 — 좁은 화면에서 넘친 칩을 가리는 그라데이션
(.floornav-slot::before/::after)이 알약과 같은 색이어야 하는데, 그 그라데이션은
슬롯에 얹히므로 색을 알약에서 위로 물려받을 수 없다(커스텀 속성은 아래로만 흐른다).
한 곳에서 정하고 양쪽이 같이 읽는다. */
.floornav-slot { --floornav-bg: var(--ink-soft); }
.floornav {
display: flex; flex-wrap: wrap; gap: 4px;
width: fit-content;
max-width: 100%;
margin: 0 auto 24px;
padding: 4px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--floornav-bg, var(--ink-soft));
}
/*
원래 자리를 지나 스크롤하면 화면 왼쪽에 세로로 붙는다.
위쪽에 고정(sticky)하지 않은 이유: 헤더와 인원수 줄이 이미 고정돼 있어서 층 줄까지
얹으면 좌석이 보이는 높이가 그만큼 줄어든다. 좌석을 고르는 화면에서 세로 공간은
가장 아까운 자원이다. 옆으로 빼면 세로를 한 픽셀도 안 먹는다.
오른쪽이 아니라 왼쪽인 것은 미니맵(.minimap)이 오른쪽 아래에 고정돼 있어서다.
z-index 는 미니맵(11)보다 낮게 둬서, 둘이 만나는 일이 생겨도 지도가 위로 온다.
좁은 화면에서는 감춘다 — 좌석 격자가 화면 폭을 다 쓰므로 옆에 띄우면 좌석을 덮는다.
그 경우엔 원래처럼 맨 위 줄을 쓰면 된다.
*/
.floornav.is-docked {
position: fixed;
left: 12px;
top: 50%;
transform: translateY(-50%);
flex-direction: column;
flex-wrap: nowrap;
/* 콘서트홀은 칩이 20개까지 나온다. 화면을 넘기지 않게 잘라 스크롤한다. */
max-height: 72vh;
overflow-y: auto;
margin: 0;
border-radius: var(--radius-sm);
background: rgba(11, 11, 12, .86);
backdrop-filter: blur(8px);
border-color: var(--line-strong);
z-index: 10;
}
.floornav.is-docked .floorchip { justify-content: space-between; }
.floorchip {
display: inline-flex; align-items: baseline; gap: 5px;
padding: 7px 16px;
border-radius: 999px;
font-size: 13px;
color: var(--paper);
transition: background .12s, color .12s, transform .12s;
}
.floorchip:hover { background: rgba(255, 255, 255, .07); }
.floorchip.active,
.floorchip[aria-current="true"] {
background: rgba(233, 180, 76, .13);
color: var(--brass);
transform: translateY(-1px);
}
.floorchip b { color: var(--brass); font-weight: 700; }
.floorchip i { color: var(--mute); font-style: normal; }
.house {
display: flex; flex-direction: column; gap: var(--seat-gap);
/* 호로 올라간 첫 줄 양끝이 구역 이름을 덮지 않도록. 가장 넓은 줄(44석)의 상승분만큼 준다.
--i/--n 이 없는 경우(조각을 거치지 않고 렌더된 좌석)의 안전한 기본값도 여기 둔다 — 호가 0 이 된다. */
padding-top: calc(var(--seat-size) * 1.2);
--i: 0;
--n: 1;
/*
align-items: center 를 쓰면 안 된다. 줄이 컨테이너보다 넓어지는 순간(좌석을 최소
크기까지 줄여도 안 들어가는 대형 홀 + 좁은 화면) 양쪽으로 똑같이 넘쳐서 줄의 앞부분이
음수 좌표로 나간다. 가로 스크롤은 0 아래로는 못 가므로 그 좌석들은 눌러볼 수가 없다.
auto 마진은 남는 공간이 없으면 0 으로 떨어지기 때문에 왼쪽이 잘리지 않는다.
*/
align-items: flex-start;
}
.row { display: flex; align-items: center; gap: var(--seat-gap); }
/*
부채꼴 구역(줄마다 좌석 수가 다름, 예: 1층 P)의 짧은 줄을 긴 줄과 같은 중심에 맞춘다.
미는 대상은 라벨이다 — 라벨이 밀리면 그 뒤 좌석도 같이 밀리므로 중앙정렬은 그대로 되고,
번호는 자기 줄에 붙어 있게 된다.
여기까지 오는 데 두 번 갈아탔다.
① 처음엔 .row 전체를 margin-inline:auto 로 중앙정렬했다. 줄 상자를 통째로 미는 것이라
라벨이 겹치거나 잘렸다(부채꼴 P 구역에서 윗줄 좌석 위에 라벨이 올라탔다).
② 그래서 라벨을 x=0 에 고정하고 첫 좌석만 밀었다. 겹침은 사라졌지만 짧은 줄일수록
번호가 자기 줄에서 멀어져, 1층 P 실측으로 34~49px(좌석 네 칸)까지 떨어졌다 —
번호가 어느 줄 것인지 알아볼 수 없는 상태가 됐다.
③ 지금은 라벨에 여백을 준다. 번호는 부채꼴을 따라 계단식으로 들어가지만 항상 자기 줄에
붙어 있고, ①의 겹침도 안 난다 — 줄 상자를 미는 게 아니라 줄 안에서 라벨 앞에만
여백이 생기는 것이라 라벨이 다른 줄 영역으로 넘어갈 일이 없다.
좌석 크기 1px 당 슬롯 폭은 seat-size + seat-gap 이다(줄 안 간격이 이 비율이므로).
통로(aisle)가 있는 줄은 이 계산이 근사치가 된다 — 통로 좌석 사이 간격이 더 넓어서 실제
폭과 살짝 어긋날 수 있지만, 부채꼴 구역은 대개 규모가 작아 통로가 없다.
가장 긴 줄(n = max-n)은 결과가 0 이라 기존 홀(모든 줄이 같은 길이)은 전혀 안 바뀐다.
*/
.row .rowlabel {
margin-left: calc((var(--max-n, var(--n)) - var(--n)) / 2 * (var(--seat-size) + var(--seat-gap)));
/*
라벨은 줄의 왼쪽 끝에 붙어 있으므로 그 자리 좌석과 같은 높이여야 한다. 기본 정렬
(align-items:center)은 줄 상자의 수직 중앙에 두는데, 좌석은 호를 그리느라 양끝이
들리거나 처져서 끝자리는 중앙과 다르다 — 40석 줄에서 실측 21.9px(확대 기준),
번호가 자기 옆 좌석에서 떠 보였다.
첫 좌석의 u 는 -(n-1)/2 이고 오프셋은 u² 에 비례하므로, 여기서도 같은 식을 쓰되
길이로 계산한다. transform 은 레이아웃을 안 건드리므로 좌석 위치는 그대로다.
*/
transform: translateY(calc(
((var(--n) - 1) / 2) * ((var(--n) - 1) / 2) * var(--seat-size) * var(--arc-unit, 0)));
font-family: var(--display);
width: var(--rowlabel-w);
text-align: right;
font-size: clamp(11px, 2.6vw, 15px);
color: var(--brass-dim);
flex: none;
/* 가로로 스크롤해도 행 문자는 왼쪽에 붙어 있어야 몇 번째 줄을 고르는지 알 수 있다.
좌석이 뒤로 지나가므로 배경을 깔아 가린다. 툴팁(z-index:5)보다는 아래에 둔다.
스크롤이 없는 구역(부채꼴 P 처럼 화면에 다 들어오는 경우)에서는 sticky 가 아무 일도
하지 않으므로 위 margin 자리에 그대로 놓인다 — 번호가 자기 줄에 붙어 보이는 건 그래서다. */
position: sticky;
left: 0;
z-index: 2;
background: var(--ink);
}
/*
무대를 감싸는 홀(정면에 좌·우 구역이 있는 홀)에서는 행 라벨과 구역 이름을 고정하지 않는다.
sticky 는 스크롤 컨테이너 왼쪽을 기준으로 잡히므로 열이 여러 개면 오른쪽 구역의 라벨까지
전부 왼쪽 끝으로 몰려 다른 구역 좌석 위에 겹쳐 뜬다. 열이 하나인 홀에서는 종전대로 붙어 있다.
*/
.housescroll.has-sides .rowlabel {
position: static;
/*
고정을 풀면 라벨이 줄과 함께 흐르므로, 좌석 위를 지나갈 수 있다. 부채꼴 구역에서
실제로 겹친다 — 좌석은 호(--arc-y)를 그리느라 줄 양끝이 좌석 높이의 90% 가까이
들리는데(확대 시 22px, 줄 간격은 30px) 그만큼 옆 줄 라벨 높이까지 파고든다.
실측: 24px 확대에서 「4」가 5열 2번을, 「2」가 3열 1번을 16x13px 가렸다.
배경을 깔아둔 채로 두면 그 좌석이 지워져 보이고, 라벨이 위에 있으니 그 부분은
클릭도 안 먹는다 — 고를 수 있는 좌석이 화면에서 사라지는 셈이라 그냥 미관 문제가
아니다. 배경을 없애 좌석이 그대로 보이게 하고, 클릭은 통과시킨다. 숫자는 좌석
위에 겹쳐 그려지므로 어두운 좌석에서도 읽히도록 외곽선을 얇게 깐다.
sticky 인 홀(열이 하나)에서는 이 규칙이 적용되지 않는다 — 거기서는 라벨이 화면
왼쪽에 고정된 채 좌석이 뒤로 지나가므로 불투명 배경이 있어야 읽힌다.
*/
background: none;
pointer-events: none;
text-shadow:
0 0 3px var(--ink), 0 0 3px var(--ink),
1px 0 0 var(--ink), -1px 0 0 var(--ink),
0 1px 0 var(--ink), 0 -1px 0 var(--ink);
}
body.page-seatmap.tone-light .housescroll.has-sides .rowlabel {
/* 라이트 톤에서는 종이색으로 테두리를 깐다 — 어두운 잉크로 깔면 글자가 뭉개진다. */
text-shadow:
0 0 3px var(--paper), 0 0 3px var(--paper),
1px 0 0 var(--paper), -1px 0 0 var(--paper),
0 1px 0 var(--paper), 0 -1px 0 var(--paper);
}
/*
구역 이름도 같은 이유로 고정을 풀고, 그 구역의 좌석 폭 가운데로 옮긴다.
position: absolute 로 완전히 빼는 게 핵심이다. static 인 채로 width: 100% 나
overflow-wrap: anywhere 를 줘도 안 됐다 — 시도해봤지만 .zone 자체가 폭이 정해지지 않은
(shrink-to-fit) 컨테이너라서, 그 안에서는 % 도, "줄바꿈 가능하니 최소 폭을 줄여도 된다"는
힌트도 전부 콘텐츠 기준으로 되돌아갔다(리사이틀홀 왼쪽사이드처럼 좌석이 2칸뿐인 구역에서
"1층 왼쪽사이드" 라는 긴 이름이 좌석 폭 83px 보다 넓어(134px) 구역 전체를 그 이름 폭만큼
넓혀버리는 걸 실측으로 세 번 확인했다). 정상 흐름(normal flow) 안에 있는 한, 이 이름이
조상의 자동 크기 계산에 계속 끼어드는 구조 자체가 문제였다.
position: absolute 는 요소를 정상 흐름에서 완전히 빼므로, 사양상 조상의 shrink-to-fit
계산에 전혀 기여하지 않는다 — 그래서 .zone 의 폭이 순수하게 좌석(.house) 쪽으로만
결정되고, 이름은 그 확정된 폭 가운데에 얹힌 뒤 넘치면 알아서 줄바꿈된다.
흐름에서 빠지며 비는 자리는 .floor 의 padding-top 으로 미리 확보해야 한다. 좁은 구역에서
두 줄로 감쌀 수 있어(예: "1층" / "왼쪽사이드") 두 줄 분량으로 넉넉히 잡는다 — line-height
를 여기서 같이 고정해 두는 이유도 이 계산을 예측 가능하게 하려는 것이다. 구역 이름
font-size 를 바꾸면 이 값도 같이 맞춰야 한다.
*/
.housescroll.has-sides .floor { position: relative; padding-top: 57px; }
/*
구역 이름이 없는 구역에서는 그 자리를 비워두지 않는다.
이름(.floorname)은 구역이 여럿일 때만 그린다 — 구역이 하나뿐이면 밴드 머릿글과 같은
글자가 되므로 템플릿이 아예 안 그린다(seatzone.html 의 shortName 검사). 그런데 위
padding 은 그대로 남아서, 없는 글자 자리로 57px 을 버리고 있었다. 실측: 2,015석 홀의
「1층 P」 밴드에서 제목과 첫 좌석 사이가 89px 이고 그중 57px 이 이것이었다(좌석 띠
자체가 161px 인데 그 절반이 넘는 빈칸이다).
:has() 를 못 쓰는 브라우저에서는 종전대로 여백이 남는다 — 화면이 조금 성길 뿐
깨지지는 않는다.
*/
.housescroll.has-sides .floor:not(:has(> .floorname)) { padding-top: 0; }
/*
구역 블록을 열 가운데에 놓는다.
종전에는 블록이 열 폭에 맞춰 늘어나 있었다. 그래서 ① 좌석은 블록 왼쪽에 붙어
좁은 구역일수록 왼쪽으로 치우쳐 보였고, ② 이름은 "그 구역"이 아니라 "그 열에서 가장
넓은 구역" 기준으로 가운데 잡혔다. 실측(2,015석 홀)으로 A 구역이 열 중앙에서 82px,
B 52px, C 21px 벗어나 있었고 가장 넓은 구역만 맞았다.
블록이 자기 내용 폭만 갖게 하고(align-self 가 stretch 를 끈다) 가운데로 모으면 둘 다
해결된다 — 전 구역이 열 중앙 기준 같은 값이 된다.
여기서 align-self: center 는 써도 된다. .zone 의 폭은 그 안에서 가장 넓은 구역이
정하므로 어떤 구역도 열보다 넓어질 수 없다 — 내용이 컨테이너보다 넓어질 때 양쪽으로
넘쳐 앞쪽 좌석이 음수 좌표로 나가는 문제(.house 의 align-items 주석 참고)는 안 생긴다.
*/
.housescroll.has-sides .floor { align-self: center; }
.housescroll.has-sides .floorname {
position: absolute;
top: 0;
/*
줄번호 칸(라벨 + 그 뒤 간격)의 절반만큼 오른쪽으로 민다. 블록 폭에는 번호 칸이
들어 있어서 그냥 50% 로 두면 이름이 "번호+좌석" 기준으로 가운데가 되고, 눈에는
좌석 덩어리보다 왼쪽으로 치우쳐 보인다(실측 10px). 구역 이름은 좌석 위에 있어야
한다.
*/
left: calc(50% + (var(--rowlabel-w) + var(--seat-gap)) / 2);
transform: translateX(-50%);
width: 100%;
margin: 0;
line-height: 1.25;
text-align: center;
}
/*
부채꼴 호(arc). 실제 극장 줄은 무대를 중심으로 휘어 있어서 양끝이 무대에 더 가깝다.
좌석마다 줄 중앙에서 몇 칸 떨어졌는지(--u)의 제곱만큼 무대 쪽으로 당긴다.
translateY 만 쓰는 게 핵심이다 — transform 은 레이아웃에 영향을 주지 않으므로 줄 너비가
그대로고, 좌석 크기 자동 맞춤 계산(가장 넓은 줄 기준)을 건드리지 않는다.
--u 를 줄 길이로 정규화하지 않는다. 정규화하면 5석짜리 좌우 블록도 40석짜리 중앙 블록과
같은 깊이로 휘어서 짧은 줄만 급하게 꺾인다. 절대 칸 수로 재면 짧은 줄은 거의 평평하다.
계수(좌석 크기의 0.24%/칸²)는 줄 간격(좌석 크기의 1.28배)보다 줄별 휘는 정도의 차이가 작게
유지되는 값으로 잡았다. 부채꼴 구역은 줄마다 길이가 달라서, 이 차이가 줄 간격을 넘으면 뒷줄
양끝이 앞줄을 파고든다. 44석 줄이 좌석 크기의 1.2배쯤 올라간다.
깊이를 var(--seat-size) 가 아니라 %로 적는 게 중요하다. translateY 의 %는 그 요소 자신의
높이 기준이고 좌석 높이가 곧 --seat-size 이므로 결과는 같은데, 좌석 2,481개의 커스텀 속성이
--seat-size 에 의존하지 않게 된다. 의존하게 두면 확대·축소로 --seat-size 를 바꿀 때마다
모든 좌석의 --u/--arc-y 가 무효화돼서 한 단계에 700ms 가 걸렸다(핀치가 사실상 멈춤).
*/
/*
--arc-unit 은 --arc-strength 와 같은 값을 %가 아닌 순수 숫자로 둔 것이다(0.24% = 0.0024).
좌석은 %를 쓴다(자기 높이 기준이라 --seat-size 에 안 매여서 확대가 빠르다). 하지만 줄번호
라벨은 높이가 좌석과 달라서(글자 크기 기준) 같은 %를 주면 다른 거리만큼 움직인다.
라벨은 홀당 수십 개뿐이라 --seat-size 에 의존해도 확대 성능에 영향이 없다.
*/
.house { --arc-strength: -0.24%; --arc-unit: -0.0024; }
/* 무대 뒤 구역은 무대가 아래쪽에 있으니 반대로 휜다. */
.zoneline-rear .house { --arc-strength: 0.24%; --arc-unit: 0.0024; }
.seat {
--u: calc(var(--i) - (var(--n) - 1) / 2);
--arc-y: calc(var(--u) * var(--u) * var(--arc-strength));
transform: translateY(var(--arc-y));
width: var(--seat-size);
height: var(--seat-size);
aspect-ratio: 1 / 1;
/*
테두리를 아예 쓰지 않고 채움으로만 등급을 나타낸다. 좌석 사이는 --seat-gap 이
이미 벌려주므로 칸 경계를 그릴 테두리가 필요 없고, 10px 좌석에서 1px 테두리는
면적의 36% 를 먹어 채움색을 못 알아보게 만든다.
*/
border: 0;
background: var(--seat-fill, var(--ink-soft));
border-radius: 3px;
cursor: pointer;
padding: 0;
position: relative;
touch-action: manipulation;
transition: transform .1s, background .1s, box-shadow .1s;
}
/* 호 오프셋을 유지한 채로 살짝 더 들어올린다. --arc-y 를 빼먹으면 hover 때 좌석이 평평한
자리로 튀어 내려간다. 테두리를 없앴으므로 강조는 바깥 링(box-shadow)으로 준다 —
링은 레이아웃을 차지하지 않아서 좌석 크기 자동 맞춤 계산에 영향을 주지 않는다. */
.seat:hover:not(:disabled):not([aria-disabled="true"]) {
transform: translateY(calc(var(--arc-y) - 2px));
box-shadow: 0 0 0 max(2px, calc(var(--seat-size) * 0.12)) var(--paper);
}
.seat:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
/* .seat 는 부채꼴 배치 때문에 hover 여부와 무관하게 항상 transform 이 걸려 있어서
스스로 스태킹 컨텍스트를 만든다. 그 안의 툴팁(::after, z-index:5)은 이 컨텍스트
밖의 형제 요소와 비교될 때는 .seat 자신이 z-index:auto 인 채로(사실상 0) 취급된다.
줄 번호 라벨(.rowlabel, z-index:2, position:sticky)은 이보다 높아서, 줄 첫 좌석의
툴팁이 라벨 배경에 가려 잘려 보였다. 툴팁이 보이는 동안만 좌석 자체를 라벨보다
위로 올려 스태킹 컨텍스트째로 끌어올린다. */
.seat:hover, .seat:focus-visible { z-index: 6; }
/* 등급·가격 툴팁 */
.seat::before, .seat::after { opacity: 0; transition: opacity .12s, transform .12s; pointer-events: none; z-index: 5; }
.seat::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 9px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--ink);
color: var(--paper);
border: 1px solid var(--brass-dim);
padding: 6px 10px;
font-size: 12px;
white-space: nowrap;
}
.seat::before {
content: '';
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--brass-dim);
}
.seat:hover::after, .seat:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.seat:hover::before, .seat:focus-visible::before { opacity: 1; }
/* 등급은 채움 색으로 구분한다. 근거와 측정값은 :root 의 --grade-* 주석 참고. */
.seat.grade-VIP { --seat-fill: var(--grade-vip); }
.seat.grade-R { --seat-fill: var(--grade-r); }
.seat.grade-S { --seat-fill: var(--grade-s); }
.seat.grade-A { --seat-fill: var(--grade-a); }
/*
예매 불가 좌석. 등급색을 무채색으로 덮어 화면 뒤로 물린다 — 어느 등급이었는지는
살 수 없는 이상 결정에 쓰이지 않는 정보다. 둘은 서로 다른 명도로 구분한다
(결제 대기는 풀릴 수 있고, 판매 완료는 끝난 좌석이라 가장 어둡다).
*/
.seat[data-status="HELD"] { --seat-fill: var(--seat-held); cursor: not-allowed; }
.seat[data-status="SOLD"] { --seat-fill: var(--seat-sold); cursor: not-allowed; }
/*
고른 좌석. 등급색 넷 중 무엇과도 겹치지 않아야 해서 흰 채움 + 브라스 링으로 둔다.
종전처럼 브라스로 칠하면 VIP 등급색과 같아져 "고른 좌석"과 "VIP 좌석"이 구별되지 않는다
— 링 두께를 좌석 크기에 비례시켜 10px 맞춤 배율에서도 링이 보인다.
*/
.seat.selected {
--seat-fill: var(--paper);
box-shadow: 0 0 0 max(2px, calc(var(--seat-size) * 0.14)) var(--brass);
}
/*
통로. 실제 극장처럼 블록 사이에 여백을 준다. 어느 좌석 뒤에 통로가 오는지는
좌석 생성 시점에 seat.aisle_after 로 기록되므로 화면은 그 값만 따른다.
여기에 점선 구분선을 ::after 로 그리고 있었는데, ::after 는 위에서 등급·가격 툴팁으로
이미 쓰는 자리다. .seat.aisle::after 가 .seat::after 보다 구체적이어서 통로 좌석마다
툴팁이 점선으로 덮여 사라지고 있었다(5석마다 한 석씩 가격이 안 보였다).
여백만으로도 통로는 충분히 읽히므로 점선을 뺐다.
*/
.seat.aisle { margin-right: var(--aisle-gap); }
/* ---------- 확대 모드 미니맵 ----------
예매 바 위에 떠 있어야 하므로 --footer-h(바 실측 높이)를 기준으로 띄운다. 고정값을 쓰면
범례가 여러 줄로 접히거나 고른 좌석 칩이 늘어날 때 바에 가린다 — 좌석 격자와 같은 이유다.
z-index 는 예매 바(10)보다 위, 그래야 지도를 보면서 바를 넘겨다볼 수 있다. */
/*
position: fixed 라 화면 우하단 그 자리에 늘 있고, 그 아래 좌석은 완전히 가려져
클릭이 안 된다(elementsFromPoint 로 실측 — 클릭이 항상 .minimap 으로 간다).
패널 크기(위 MINI_MAX_W/H)를 줄이고 opacity 로 옅게 만들어 겹치는 영향을 줄인다.
opacity 를 .minimap-zone 에 개별로 걸지 않고 패널 전체에 거는 이유: 등급 블록의
배경·글자색은 서로 대비 4.6 이상으로 맞춘 값인데(아래 .minimap-zone 주석 참고),
전체에 한 번에 걸면 둘 다 같은 배경 쪽으로 같이 옅어져서 그 상대 대비가 거의
유지된다 — 블록 하나에만 걸면 그 계산이 깨진다.
*/
.minimap {
position: fixed;
right: 20px;
bottom: calc(var(--footer-h, 150px) + 16px);
z-index: 11;
padding: 6px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: rgba(11, 11, 12, .86);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
opacity: .82;
cursor: pointer;
/* 미니맵 위 끌기는 브라우저 스크롤이 아니라 우리가 처리한다. */
touch-action: none;
}
.minimap:hover, .minimap:focus-within { opacity: 1; }
.minimap-inner { position: relative; }
/*
구역 블록. 그 구역에서 가장 많은 등급의 색을 깔아 확대 중에도 어디가 어느 등급인지 보이고,
블록 안에는 구역을 가르는 글자("1층 C" 의 C)를 넣어 어느 구역인지도 알 수 있게 한다.
전체 이름은 블록이 16~29px 라 안 들어가므로 title 로 넘긴다(마우스를 올리면 보인다).
글자색을 등급마다 나누는 이유: 등급 팔레트가 명도 단조 감소라 밝은 두 등급(VIP·R)에는
어두운 글자가, 어두운 두 등급(S·A)에는 밝은 글자가 맞는다. 그렇게 하면 네 등급 모두
글자 대비가 4.6 이상이 된다 — 한 색으로 통일하면 반대쪽 두 등급에서 4.5 미만으로 떨어진다.
(블록에 opacity 를 걸면 안 된다. 자식인 글자까지 같이 흐려져서 이 계산이 무너진다.)
*/
.minimap-zone {
position: absolute;
border-radius: 1px;
display: grid;
place-items: center;
font-family: var(--display);
font-size: 9px;
font-weight: 700;
line-height: 1;
overflow: hidden;
}
.minimap-zone.grade-VIP { background: var(--grade-vip); color: var(--ink); }
.minimap-zone.grade-R { background: var(--grade-r); color: var(--ink); }
.minimap-zone.grade-S { background: var(--grade-s); color: var(--paper); }
.minimap-zone.grade-A { background: var(--grade-a); color: var(--paper); }
/* 무대. 방향을 잡아주는 기준점이라 등급색보다 또렷하게 둔다. */
.minimap-stage { position: absolute; border-radius: 1px; background: var(--brass); opacity: .9; }
/*
지금 화면에 보이는 범위. 흰 테두리 1.5px + 옅은 채움이었는데, 패널 전체가 opacity .82로
가라앉아 있고 등급 블록도 밝은 색(VIP·R)이 섞여 있어 흰 테두리가 묻혀 보였다 — 정작
미니맵에서 가장 중요한 정보(지금 보고 있는 곳)가 가장 안 보이는 역설이었다.
이 화면에서 "지금 활성" 을 나타내는 유일한 색(브라스)로 바꾸고 글로우를 얹어
패널의 다른 어떤 블록보다 위에 뜨게 했다.
*/
.minimap-view {
position: absolute;
border: 2px solid var(--brass);
border-radius: 2px;
background: rgba(233, 180, 76, .16);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 8px rgba(233, 180, 76, .6);
/* 포인터를 안 받는다 — 위치 판정은 미니맵 전체에서 하고(상자 안/밖), 상자가 이벤트를
가로채면 상자 위에서 시작한 끌기가 미니맵까지 안 온다. */
pointer-events: none;
}
/* 끌 수 있다는 걸 커서로 알린다. 상자가 pointer-events 를 안 받으므로 미니맵에 건다. */
.minimap { cursor: grab; }
.minimap.is-dragging { cursor: grabbing; }
@media (max-width: 720px) {
/* 좁은 화면에서는 지도 자체가 좁으니 미니맵도 자리를 덜 차지하게 줄인다. */
.minimap { right: 12px; bottom: calc(var(--footer-h, 150px) + 10px); }
/*
크기(JS 의 MINI_MAX_W/H)를 줄여도 겹침 자체는 없앨 수 없다 — position:fixed 로
좌석 스크롤 영역 안쪽에 얹히는 구조라(위 미니맵 크기 계산 주석 참고), 화면에
남는 세로 공간을 최대로 쓰는 이 화면에서 미니맵이 좌석과 안 겹치는 "빈 자리"는
애초에 없다. 그래서 완전히 안 겹치게 만드는 대신, 평소 불투명도를 낮춰 겹친
자리의 좌석 색이 비쳐 보이게 한다 — 적어도 "여기 좌석이 있다"는 건 알 수 있고,
조금만 스크롤하면 그대로 눌린다. hover/focus 시 원래 불투명도(.82)로 돌아온다
(터치 기기는 hover 가 없지만, 드래그 시작 시 focus-within 이 걸려 잡는 동안은 또렷해진다).
*/
.minimap { opacity: .5; }
}
/* 가격표. 예매 바 안에 고정으로 들어간다. 바깥 여백은 바가 갖고 있다. */
.legend {
display: flex; flex-direction: column; align-items: center;
max-width: 1080px; margin: 0 auto 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
/* 좌석 상태 표시. 한 번 익히면 되는 정보라 고정하지 않고 본문 맨 아래에 둔다. */
.seatstatus { margin-top: 36px; }
.legend-row {
display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
font-size: 12px; color: var(--mute);
}
.legend-row span { display: flex; align-items: center; gap: 7px; }
.legend-row i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.legend-price { color: var(--brass); font-weight: 700; margin-left: 2px; }
/* ---------- 등급 필터 (가격표가 곧 필터) ----------
가격표 항목이 버튼이다. 예산을 먼저 정하고 그 안에서 자리를 고르는 게 실제 구매 순서라,
등급을 누르면 그 등급만 남기고 나머지 좌석을 뒤로 물린다. .legend-row 의 gap 이 22px 라
버튼 자체 padding 과 겹쳐 넓어 보이므로 이 줄만 간격을 좁힌다. */
/* "범례일 뿐" 이라는 첫인상을 깨는 안내. 다른 sticky 힌트(.partysize .hint)와 같은 톤. */
.legend-hint { margin: 0 0 6px; font-size: 11px; color: var(--mute); }
.legend-grades { gap: 6px; }
.legend-grades button {
display: flex; align-items: center; gap: 7px;
font: inherit; font-size: 12px; color: var(--paper);
background: none; border: 1px solid transparent; border-radius: 999px;
padding: 5px 11px; cursor: pointer;
transition: background .12s, border-color .12s, opacity .12s;
}
.legend-grades button:hover:not(:disabled) { border-color: var(--line-strong); }
/* 눌린 상태는 이 화면의 다른 활성 표시(층 바로가기 칩·확대 버튼)와 같은 브라스 언어를 쓴다 —
종전엔 옅은 흰색 배경뿐이라 "필터가 걸렸다"는 신호가 다른 활성 상태보다 약했다. */
.legend-grades button[aria-pressed="true"] {
background: rgba(233, 180, 76, .14);
border-color: var(--brass);
color: var(--brass);
}
/* 이번 회차에 그 등급 좌석이 아예 없으면 누를 게 없다. */
.legend-grades button:disabled { opacity: .35; cursor: default; }
/*
필터가 걸리면 고르지 않은 등급을 물린다.
좌석마다 클래스를 붙이지 않고 컨테이너 속성 하나로 제어한다 — 3,022석 홀에서 토글할
때마다 좌석 전부를 순회하며 classList 를 건드리면 그만큼 스타일을 다시 계산한다.
`~=` 는 공백으로 구분된 낱말 매칭이라 data-grade-filter="R S" 같은 값이 그대로 먹는다.
속성이 아예 없으면(= 아무것도 안 고른 상태) 어떤 규칙도 안 걸려 전체가 보인다.
pointer-events 까지 끄는 이유: 물린 좌석을 실수로 고르면 필터를 건 의미가 없다.
이미 고른 좌석은 예외여야 한다 — 안 그러면 필터를 건 뒤 그 좌석을 해제할 방법이 없어진다.
그 예외를 별도 규칙(`... .seat.selected { opacity: 1 }`)으로 덧씌우려다 실패했다.
무력화 쪽은 `:not([data-grade-filter~="…"])` 때문에 클래스 3 + 속성 2 = (0,5,0)인데
예외 쪽은 (0,4,0)이라 명시도에서 진다. **그래서 예외를 덧씌우지 않고 무력화 대상에서
아예 빼는 방식으로 적는다** — 규칙이 하나뿐이라 명시도를 따질 일이 없어진다.
(JS 의 .click() 은 pointer-events 를 무시하고 발생하므로 이 결함은 스크립트 조작으로는
드러나지 않는다. 계산된 스타일을 직접 읽어야 잡힌다.)
*/
.housescroll[data-grade-filter]:not([data-grade-filter~="VIP"]) .seat.grade-VIP:not(.selected),
.housescroll[data-grade-filter]:not([data-grade-filter~="R"]) .seat.grade-R:not(.selected),
.housescroll[data-grade-filter]:not([data-grade-filter~="S"]) .seat.grade-S:not(.selected),
.housescroll[data-grade-filter]:not([data-grade-filter~="A"]) .seat.grade-A:not(.selected) {
opacity: .16;
pointer-events: none;
}
/* 미니맵도 같이 물린다. 필터를 걸었을 때 "그 등급이 홀 어디에 있나"가 바로 보이는 게
이 기능의 실제 값어치라, 지도만 바뀌고 미니맵이 그대로면 절반만 동작하는 셈이다. */
.minimap[data-grade-filter]:not([data-grade-filter~="VIP"]) .minimap-zone.grade-VIP,
.minimap[data-grade-filter]:not([data-grade-filter~="R"]) .minimap-zone.grade-R,
.minimap[data-grade-filter]:not([data-grade-filter~="S"]) .minimap-zone.grade-S,
.minimap[data-grade-filter]:not([data-grade-filter~="A"]) .minimap-zone.grade-A {
opacity: .22;
}
/* 범례 견본은 좌석과 같은 방식(채움)이어야 한다 — 견본과 좌석이 다른 규칙으로 그려지면
범례를 보고 지도를 못 읽는다. 그래서 .seat 과 같은 --grade-* 토큰을 쓴다. */
.legend-grade {
width: 13px; height: 13px; border-radius: 3px; display: inline-block;
border: 0;
}
/* 좌석 상태 견본(선택함 · 결제 대기 · 판매 완료). 등급 견본(.legend-grade)과 같은 크기·모양을
쓰되, 고른 좌석의 표시 방식은 .seat.selected 와 반드시 같아야 해서 규칙을 따로 둔다. */
.legend-sample { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.legend-sample--selected { background: var(--paper); box-shadow: 0 0 0 2px var(--brass); }
.legend-sample--held { background: var(--seat-held); }
.legend-sample--sold { background: var(--seat-sold); }
/* 라이트에서는 고른 좌석이 안쪽 잉크 링으로 바뀐다(.seat.selected 참고). 견본도 같이 뒤집는다. */
body.tone-light .legend-sample--selected { box-shadow: inset 0 0 0 2px var(--ink); }
/* 예매 불가 견본은 라이트 배경과 명도가 가까워서(그러라고 물린 색이다) 견본만 덩그러니
두면 빈 칸으로 보인다. 좌석은 격자 안에 있어 자리로 읽히지만 견본은 혼자 떠 있다. */
body.tone-light .legend-sample--held,
body.tone-light .legend-sample--sold { box-shadow: 0 0 0 1px rgba(17, 18, 20, .18); }
.legend-grade.grade-VIP { background: var(--grade-vip); }
.legend-grade.grade-R { background: var(--grade-r); }
.legend-grade.grade-S { background: var(--grade-s); }
.legend-grade.grade-A { background: var(--grade-a); }
/* ---------- 예매 바 (좌석 표시·가격표 + 고른 좌석 + 예매 버튼) ---------- */
.bookbar {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: 10; /* 좌석 툴팁(z-index:5)보다 위에 와야 가격표가 가려지지 않는다 */
background: rgba(17, 18, 20, .90);
backdrop-filter: blur(8px);
border-top: 1px solid var(--line);
padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
}
.bookbar.is-ready {
border-top-color: rgba(233, 180, 76, .36);
box-shadow: 0 -18px 46px rgba(0, 0, 0, .28);
}
/*
고정 바에 가려지는 만큼 본문 아래에 여백을 준다. 바 높이는 내용에 따라 달라지므로
JS 가 실측해 --footer-h 로 넘긴다(없으면 대략값으로 버틴다).
*/
body.page-seatmap { padding-bottom: calc(var(--footer-h, 150px) + 20px); }
.bookbar .inner {
max-width: 1080px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bookbar .picked {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "list summary" "hint summary";
align-items: center;
gap: 4px 20px;
font-size: 14px; color: var(--mute); flex: 1; min-width: 0;
}
.bookbar .picked strong { color: var(--paper); font-weight: 600; }
.bookbar .pickedlist {
grid-area: list;
margin: 0;
display: flex; flex-wrap: wrap; gap: 6px;
}
.bookbar .pickedlist:not(:has(.pickchip)) { margin: 0; }
.bookbar .pickchip {
display: inline-flex; align-items: center;
background: var(--ink-soft); border: 1px solid var(--brass-dim);
color: var(--paper); font-size: 12px; font-weight: 600;
padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.bookbar .pickedhint {
grid-area: hint;
margin: 0;
font-size: 12px;
color: var(--mute);
}
.bookbar .pickedsummary {
grid-area: summary;
min-width: 170px;
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: rgba(248, 244, 236, .045);
text-align: right;
}
.bookbar .pickedcount {
display: block;
font-size: 12px;
color: var(--mute);
}
.bookbar .pickedtotal {
display: block;
margin-top: 2px;
font-family: var(--display);
font-size: 20px;
line-height: 1.1;
font-weight: 800;
color: var(--brass);
font-variant-numeric: tabular-nums;
}
.bookbar .pickedtotal strong { color: inherit; font: inherit; }
/*
예매 CTA. `.bookbar button` 으로 두면 안 된다 — 바 안에 버튼이 하나뿐이라는 전제가 깔린
선택자인데, 가격표가 등급 필터 버튼이 되면서 그것들까지 브라스로 칠해버렸다. 게다가
가격 글자색도 브라스(--legend-price)라 같은 색끼리 겹쳐 가격이 아예 안 보였다.
이 규칙이 노리는 건 언제나 .inner 안의 「예매하기」 하나다.
*/
.bookbar .inner button {
font-family: var(--body); font-size: 15px; font-weight: 600;
background: var(--brass); color: var(--ink);
border: 0; border-radius: var(--radius-sm); padding: 13px 30px; cursor: pointer;
flex: none;
}
.bookbar .inner button:disabled { background: var(--ink-soft); color: var(--mute); cursor: not-allowed; }
.empty-state {
text-align: center; padding: 80px 20px; color: var(--mute);
}
.empty-state p { margin: 0 0 6px; }
/* ---------- 로그인 / 회원가입 ----------
폼만 왼쪽 위에 덩그러니 떠 있으면 미완성처럼 보인다.
화면 중앙에 카드 하나로 띄우고(폼 + 소셜 로그인이 한 덩어리로 읽히게),
입력창 경계를 또렷하게 해서 누를 수 있는 요소로 읽히게 한다. */
.authwrap {
max-width: 400px;
margin: 0 auto;
min-height: calc(100vh - 200px);
display: flex; flex-direction: column; justify-content: center;
}
/* ---- 에러 페이지(403/404/5xx) ----
종전에는 .authwrap 을 그대로 썼는데, 그건 로그인 폼 한 장을 담는 400px 칸이라
**헤더까지 그 폭에 갇혔다** — 로고 "객석"이 두 줄로 접히고 내비가 줄바꿈되면서
로그인·회원가입이 서로 붙어버렸다. 폭은 .wrap(1080px) 을 그대로 쓰고 본문만 좁힌다.
색은 전부 라이트 톤 기준이다. 종전에는 body 에 클래스가 없어 다크로 남아 있었고,
본문 색이 인라인 style 로 박혀 있어서 톤 전환에서 통째로 빠져 있었다 —
아이보리 배경이 됐을 때 --brass 링크는 대비 1.72, 큰 상태코드(--brass-dim)는 2.88 로
사실상 안 보인다. 아래 값은 전부 #F8F4EC 위에서 실측해 고른 것이다. */
body.page-error { background: var(--paper); color: var(--ink); }
.errorbody { max-width: 520px; padding: 48px 0 0; }
/* 상태코드. 큰 글씨(3.0 기준)지만 --brass-dim(2.88)은 그마저도 못 넘어서 --brass-ink(4.51)를 쓴다. */
.errorcode {
font-family: var(--display);
font-size: 56px; line-height: 1;
color: var(--brass-ink);
margin: 0 0 16px;
}
.errorheading {
font-size: 17px; font-weight: 700; color: var(--ink);
margin: 0 0 8px;
}
/* 다음에 뭘 할 수 있는지 알려주는 줄이라 흐리게 두면 안 된다.
앱의 보조 텍스트 관행(.55 → 4.04)보다 한 단계 진하게 잡아 본문 기준(4.5)을 넘긴다. */
.errordetail { font-size: 15px; color: rgba(17, 18, 20, .6); margin: 0; }
/* 사유도 읽으라고 띄우는 줄이라 같은 기준을 적용한다 — .55 는 4.04 로 못 미친다. */
.errorreason { font-size: 13px; color: rgba(17, 18, 20, .6); margin: 10px 0 0; }
.errorlinks { margin: 28px 0 0; font-size: 15px; font-weight: 700; }
.errorlinks a { color: var(--brass-ink); }
.errorlinks a:hover { color: var(--ink); }
/* 링크 사이 가운뎃점. 읽을 내용이 아니라 구분 기호라 스크린리더에서 뺀다(aria-hidden). */
.errorlinks .errorsep { color: rgba(17, 18, 20, .3); margin: 0 8px; font-weight: 400; }
.authcard {
background: var(--ink-soft);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 32px 28px;
/* 카드를 배경에서 확실히 띄운다. 어두운 배경에서는 테두리만으로는 경계가 약하다. */
box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}
.authhead { text-align: center; margin-bottom: 24px; }
.authhead h2 {
font-family: var(--display);
font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
margin: 0 0 6px;
}
.authhead p { margin: 0; font-size: 13px; color: var(--mute); }
/* 좌석 선택 중 넘어왔을 때만 뜨는 안내. 경고가 아니라 안심시키는 톤이라 브라스색을 쓴다. */
.authnotice {
background: rgba(255, 201, 64, .08);
border: 1px solid rgba(255, 201, 64, .24);
border-radius: var(--radius-sm);
padding: 10px 12px;
margin: 0 0 16px;
font-size: 13px; color: var(--brass);
}
.autherror {
background: rgba(255, 92, 122, .08);
border: 1px solid rgba(255, 92, 122, .28);
border-radius: var(--radius-sm);
padding: 10px 12px;
margin: 0 0 16px;
font-size: 13px; color: var(--rose);
}
.authform {
display: flex; flex-direction: column; gap: 16px;
}
.authform label {
display: flex; flex-direction: column; gap: 8px;
font-size: 13px; color: var(--mute);
}
/* 라벨 텍스트("이메일")와 같은 크기·색이면 안내문이 필드명처럼 읽혀 구분이 안 된다. */
.authform .hint { font-size: 12px; }
.authform input {
font-family: var(--body); font-size: 15px;
background: var(--ink-raised); color: var(--paper);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 12px 14px;
width: 100%;
transition: border-color .12s, box-shadow .12s;
}
.authform input:hover { border-color: var(--mute); }
.authform input:focus-visible {
outline: none;
border-color: var(--brass);
box-shadow: 0 0 0 3px rgba(255, 201, 64, .16);
}
/*
제출 버튼만 브라스로 채운다 — 비밀번호 표시 토글도 button 이라 타입으로 구분해야 한다.
크기를 소셜 버튼보다 키우는 게 핵심이다. 브라스(43°)와 카카오 노랑(54°)은 색상차가
11도뿐이고 명암비도 1.2 라 색으로는 절대 안 갈린다. 게다가 종전엔 소셜 버튼이 아이콘
때문에 더 커서(52 vs 45px) **주요 액션이 보조 액션보다 작고 어두운** 상태였다 —
위계가 뒤집혀 있었다. 브랜드 색은 가이드가 정한 값이라 못 건드리므로, 우리 쪽이 가진
유일한 지렛대인 크기·굵기로 되잡는다.
*/
.authform button[type="submit"] {
font-family: var(--body); font-size: 16px; font-weight: 700;
background: var(--brass); color: #0B0B0C;
border: 0; border-radius: var(--radius-sm);
padding: 16px; cursor: pointer;
margin-top: 4px;
transition: filter .12s;
}
.authform button[type="submit"]:hover { filter: brightness(1.08); }
/* 비밀번호 입력창 안에 겹쳐 놓는 표시/숨김 토글. */
.pwfield { position: relative; display: block; }
.pwfield input { padding-right: 62px; }
.pwtoggle {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
background: none; border: 0; border-radius: var(--radius-xs);
color: var(--mute); font-family: var(--body); font-size: 12px;
padding: 6px 8px; cursor: pointer;
transition: color .12s;
}
.pwtoggle:hover { color: var(--paper); }
.authlink {
font-size: 13px; color: var(--mute); text-align: center;
margin: 20px 0 0;
}
.authlink a { color: var(--brass); font-weight: 700; }
/* 로그인 버튼 바로 아래에 붙는 "비밀번호를 잊으셨나요?" 처럼, 카드 하단이 아니라
폼 안에서 다음 요소와 이어질 때는 위 여백을 좁힌다. */
.authlink--tight { margin: 12px 0 0; }
/* 결제 화면의 단일 주요 액션. 예전엔 .authform 의 카드 스타일을 빌려 쓰고 있었는데,
.authform 이 폼 레이아웃 전용으로 정리되면서 전용 클래스로 분리했다. */
.paybtn {
display: block; width: 100%;
font-family: var(--body); font-size: 15px; font-weight: 700;
background: var(--brass); color: #0B0B0C;
border: 0; border-radius: var(--radius-sm);
padding: 16px; cursor: pointer;
text-align: center;
transition: filter .12s;
}
.paybtn:hover { filter: brightness(1.08); }
.paybtn:disabled {
background: var(--ink-raised); color: var(--mute);
cursor: not-allowed; filter: none;
}
/* 결제할 수 없는 상태에서 대신 놓는 이동 링크. 주요 액션이 아니므로 테두리만 쓴다. */
.paybtn--ghost {
background: none; color: var(--paper);
border: 1px solid var(--line-strong);
}
.paybtn--ghost:hover { border-color: var(--brass); color: var(--brass); filter: none; }
.oauthdivider {
display: flex; align-items: center; gap: 12px;
margin: 24px 0 16px;
color: var(--mute); font-size: 12px;
}
.oauthdivider::before, .oauthdivider::after {
content: ""; flex: 1; height: 1px; background: var(--line);
}
/*
소셜 로그인은 보조 경로인데, 실측하면 여전히 주요 액션(로그인 버튼)을 이긴다 —
상대휘도가 로그인 브라스(rgb(233,180,76)) 0.505 인데 카카오 옐로(#FEE500) 는 0.771 로
1.53배 밝다. 브랜드 색은 가이드가 정한 값이라 못 바꾸고, 종전엔 폭을 똑같이 100% 로
맞춰서 두 버튼의 면적도 같았다 — 밝기와 면적이 둘 다 같으면 더 밝은 색이 이긴다.
가로로 나란히 놓아 버튼 하나당 폭을 절반으로 줄이면 면적×밝기 값이 로그인 버튼보다
작아져서(0.505×전체폭 > 0.771×반폭) 위계가 실측으로도 뒤집힌다.
*/
.oauthbuttons { display: flex; flex-direction: row; gap: 10px; }
/*
line-height 를 고정하는 이유: 아이콘(15px)이 글자 줄 높이보다 커서 버튼 높이를 밀어올려,
종전에는 소셜 버튼이 로그인 버튼보다 7px 더 컸다. 줄 높이를 아이콘 이상으로 못박으면
아이콘이 높이에 관여하지 않아 padding 만으로 크기가 결정된다.
*/
.oauthbtn {
flex: 1 1 0; min-width: 0;
display: flex; align-items: center; justify-content: center; gap: 6px;
font-family: var(--body); font-size: 13px; font-weight: 600;
line-height: 17px;
border: 0; border-radius: var(--radius-sm);
padding: 11px 8px; cursor: pointer; text-align: center;
white-space: nowrap;
transition: filter .12s;
}
.oauthbtn:hover { filter: brightness(1.06); }
/* 카카오 로그인 버튼은 공식 디자인 가이드 스펙(배경 #FEE500, 심볼/텍스트 #000000, 모서리 12px)을 그대로 따른다.
https://developers.kakao.com/docs/ko/kakaologin/design-guide */
.oauthbtn-kakao { background: #FEE500; color: rgba(0, 0, 0, 0.85); border-radius: 12px; }
.oauthbtn-naver { background: #03C75A; color: #FAFAFA; }
.oauthicon { width: 15px; height: 15px; flex-shrink: 0; }
/* ---------- 관리자 대시보드 ---------- */
.dashfilter { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 32px; }
.dashfilter label {
display: flex; flex-direction: column; gap: 6px;
font-size: 12px; color: var(--mute);
}
.dashfilter input {
font-family: var(--body); font-size: 14px;
background: var(--ink-soft); color: var(--paper);
border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px;
}
.dashfilter input:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.dashfilter button {
font-family: var(--body); font-size: 14px; font-weight: 600;
background: var(--brass); color: var(--ink);
border: 0; border-radius: var(--radius-sm); padding: 9px 20px; cursor: pointer;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 40px;
}
.card-stat {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--ink-soft);
padding: 20px;
display: flex; flex-direction: column; gap: 8px;
}
.card-stat .label {
font-size: 12px; letter-spacing: 0.08em;
color: var(--mute); text-transform: uppercase;
}
.card-stat strong {
font-family: var(--display); font-size: 26px;
color: var(--brass); font-weight: 700;
}
.chartgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/*
min-width:0 이 없으면 좁은 화면에서 칸이 캔버스보다 작아지지 못한다. 그리드 아이템은
기본 min-width:auto(=min-content)인데, Chart.js 는 아직 리사이즈 전이면 캔버스를 기본
300px 로 들고 있어서 칸의 min-content 가 300+패딩·테두리=342px 로 굳는다. 그러면 칸이
못 줄고 → 캔버스도 줄 이유가 없어 그대로 멈춘다(서로가 서로를 붙잡는 상태).
실측: 360px 폭에서 쓸 수 있는 자리는 327px 인데 칸이 342px 라 6px 가 넘쳐 페이지
전체에 가로 스크롤이 생겼다. 375px 에서는 우연히 들어가서 안 드러났는데, 안드로이드
상당수가 360px 다. max-width 는 Chart.js 리사이즈 전에도 캔버스가 칸을 밀지 않게 하는 보험.
*/
.chartbox { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-width: 0; }
.chartbox canvas { max-width: 100%; }
.chartbox h3 {
font-family: var(--display); font-size: 15px; font-weight: 600;
margin: 0 0 16px; color: var(--paper);
}
.chartbox-wide { grid-column: 1 / -1; }
/* ---------- 마이페이지 예매 내역 ---------- */
.reslist { display: flex; flex-direction: column; gap: 16px; }
.resrow {
display: flex; justify-content: space-between; align-items: center;
gap: 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--ink-soft);
padding: 20px 24px;
}
/* 클릭하면 포스터+정보+좌석 팝업(.resmodal)이 뜬다. cursor/hover/focus-visible 로 눌리는
영역이라는 걸 알려준다 — 옆 .resaction(취소·결제하기 버튼)은 그대로 각자 동작한다. */
.resinfo { flex: 1; min-width: 0; cursor: pointer; border-radius: var(--radius-xs); display: flex; gap: 16px; align-items: center; }
/* 글자 칸. min-width:0 이 있어야 긴 공연명이 flex 칸을 밀어내지 않고 제자리에서 줄바꿈된다. */
.restext { min-width: 0; flex: 1; }
/* 포스터 썸네일. 실제 포스터가 3:4 라 그 비율을 그대로 쓴다 — cover 로 잘라 넣으면
제목이 큼직하게 박힌 포스터가 많아 위아래가 날아간다. */
.resthumb {
flex: none;
position: relative;
width: 54px; aspect-ratio: 3 / 4;
border-radius: var(--radius-poster);
overflow: hidden;
background: var(--ink);
}
.resthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 포스터가 없을 때만 보인다. 목록 카드(.posterfallback)와 같은 발상이되 54px 이라
첫 글자만 남긴다. */
.resthumb-fallback { display: none; }
.resthumb.no-img { background: linear-gradient(140deg, #2a2b2f, #17181b); }
.resthumb.no-img .resthumb-fallback {
display: flex; align-items: center; justify-content: center;
position: absolute; inset: 0;
font-family: var(--display); font-size: 20px; font-weight: 700;
color: rgba(248, 244, 236, .5);
}
.resinfo:hover .restitle { color: var(--brass); }
.resinfo:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.restitle { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 0 0 6px; transition: color .12s; }
.resmeta { font-size: 13px; color: var(--paper); margin: 0 0 4px; }
/* 숫자와 '원' 사이가 끊기면 두 줄이 된다 — 공연 정보 표의 .fee(422행), 결제 화면의
.mb-price strong 과 같은 문제. */
.resmeta .resamount { white-space: nowrap; }
.resno { font-size: 12px; color: var(--mute); margin: 0; }
/* 공연 상세·길찾기. resno 와 같은 톤(작고 흐림)이 기본이고, 실제로 다른 화면으로
보낸다는 걸 알리는 밑줄만 얹는다 — 위 두 줄(제목·메타)과 같은 강조를 주면 이
행이 예매 정보의 일부처럼 읽혀서 "눌러서 어딘가로 간다"는 게 묻힌다. */
.reslinks { margin: 6px 0 0; }
.reslink {
font-size: 12px; color: var(--mute);
border-bottom: 1px solid var(--line);
margin-right: 12px;
}
.reslink:hover { color: var(--brass); border-color: var(--brass-dim); }
/* ---- 예매 요약 팝업 ----
공유 시트(공연 상세)와 같은 배경+dialog 구조 — 그때 정한 opacity/pointer-events 전환,
Esc·배경·닫기 버튼 세 가지로 닫는 규칙을 그대로 따른다. 예매 건마다 모달을 복제하지
않고 하나만 두고 클릭한 행의 data-* 값으로 내용을 갈아끼운다. */
.resmodal-backdrop {
position: fixed; inset: 0; z-index: 70;
background: rgba(0, 0, 0, .55);
opacity: 0; pointer-events: none;
transition: opacity .18s ease;
}
.resmodal-backdrop.open { opacity: 1; pointer-events: auto; }
.resmodal {
position: fixed; top: 50%; left: 50%; z-index: 71;
width: min(340px, calc(100vw - 40px));
transform: translate(-50%, -50%) scale(.96);
background: var(--ink-soft);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 20px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
opacity: 0; pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.resmodal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.resmodal-close {
position: absolute; top: 14px; right: 14px; z-index: 1;
display: flex; padding: 4px;
background: none; border: none; color: var(--mute);
cursor: pointer; transition: color .12s;
}
.resmodal-close:hover { color: var(--paper); }
.resmodal-poster {
position: relative; width: 100%; aspect-ratio: 3 / 4;
border-radius: var(--radius-sm); overflow: hidden;
border: 1px solid var(--line); background: var(--ink-raised);
margin-bottom: 16px;
}
.resmodal-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.resmodal-posterfallback {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--display); font-size: 48px; font-weight: 800;
color: var(--brass-dim); opacity: .55;
background: linear-gradient(160deg, #1B1B20 0%, #131316 100%);
}
.resmodal-body h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--paper); padding-right: 24px; }
.resmodal-spec { margin: 0; }
.resmodal-spec div { display: flex; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.resmodal-spec div:first-child { border-top: none; padding-top: 0; }
.resmodal-spec dt { width: 56px; flex: none; color: var(--mute); margin: 0; }
.resmodal-spec dd { margin: 0; color: var(--paper); }
.resaction { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.badge {
font-size: 12px; letter-spacing: 0.05em;
padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
color: var(--mute); white-space: nowrap;
}
.badge-CONFIRMED { color: var(--brass); border-color: var(--brass-dim); }
.badge-CANCELED, .badge-EXPIRED { color: var(--rose); opacity: .75; }
.refundhint { font-size: 12px; color: var(--mute); margin: 0; text-align: right; }
.btn-pay, .btn-cancel, .btn-delete {
font-family: var(--body); font-size: 13px; font-weight: 600;
border: 0; border-radius: var(--radius-sm); padding: 8px 16px; cursor: pointer; white-space: nowrap;
}
.btn-pay { background: var(--brass); color: var(--ink); }
.btn-cancel, .btn-delete { background: transparent; border: 1px solid var(--line); color: var(--mute); }
.btn-cancel:hover { border-color: var(--rose); color: var(--rose); }
.btn-delete:hover { border-color: var(--line-strong); color: var(--paper); }
.btn-cancel:disabled, .btn-delete:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 720px) {
.masthead .logo-mark { width: 22px; height: 14px; margin-right: 6px; }
.detail { grid-template-columns: 1fr; }
.chartgrid { grid-template-columns: 1fr; }
.dashfilter { flex-wrap: wrap; }
.resrow { flex-direction: column; align-items: flex-start; }
.resaction { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
/*
좁은 화면의 세로 예산 되찾기.
실측(375×812): 위쪽 고정물 332px + 아래 예매 바 235px 를 빼면 좌석 지도에 남는 건
233px — 화면의 29% 뿐이었다. 게다가 지도 높이 하한이 280px 라 아래 47px 가 예매 바
뒤로 들어갔다. 좌석을 고르는 화면에서 세로가 가장 아까운 자원이라는 건 이미
`.floornav.is-docked` 주석에서 세운 원칙인데, 넓은 화면에서만 지키고 있었다.
(옆에 붙이는 방식은 DOCK_MIN_WIDTH 미만에서 꺼지므로 좁은 화면엔 적용되지 않는다.)
범인은 줄바꿈으로 두 줄이 된 띠 두 개였다 — 층 바로가기 84px, 등급 가격표 68px.
둘 다 "가로로 늘어선 짧은 목록"이라 모바일에서는 접는 대신 가로로 스크롤시킨다.
칩을 지우거나 글자를 줄이지 않으므로 정보는 그대로다.
*/
.floornav:not(.is-docked) {
flex-wrap: nowrap;
width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* 구형 Edge */
}
.floornav:not(.is-docked)::-webkit-scrollbar { width: 0; height: 0; display: none; }
.floornav:not(.is-docked) .floorchip { flex: none; }
.bookbar .legend-grades {
flex-wrap: nowrap;
width: 100%;
justify-content: flex-start;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.bookbar .legend-grades::-webkit-scrollbar { width: 0; height: 0; display: none; }
.bookbar .legend-grades button { flex: none; }
/* 띠가 한 줄이 된 만큼 위아래 여백도 같이 조인다. */
.bookbar .legend { margin-bottom: 6px; padding-bottom: 6px; }
/*
---- 가로 스크롤 띠의 "옆에 더 있다" 표시 ----
위에서 두 띠를 가로 스크롤로 바꾸면서 스크롤바까지 같이 껐는데(디자인상 맞다 —
모바일 오버레이 스크롤바는 어차피 스크롤 중에만 잠깐 보인다), 그 결과 넘친 항목이
있다는 신호가 화면에서 완전히 사라졌다.
실측(390px): 등급 가격표는 327px 칸에 527px 이 들어 있어 A석 버튼이 통째로 화면
밖이었고, 층 바로가기는 325px 칸에 495px 이라 4층짜리 홀의 3층 칩이 안 보였다.
둘 다 잘린 자리가 딱 떨어져서 "여기서 끝"처럼 보인다 — 등급 필터에 A석이 아예
없는 줄 알고, 3층 좌석은 찾지 못한다.
그래서 넘치는 쪽 가장자리에서 내용을 흐린다. 잘린 글자가 사라져 가는 모양 자체가
"계속된다"는 신호다. 띠를 덮는 별도 요소를 얹지 않고 mask 로 처리하는 이유는,
스크롤 컨테이너 안에 넣은 오버레이는 내용과 같이 흘러가 버리고 밖에 두려면
감싸는 요소가 하나 더 필요하기 때문이다.
양쪽 폭은 JS 가 스크롤 위치를 보고 --fade-l/--fade-r 로 넘긴다(seat-map.html).
기본값 0 이면 gradient 가 곧바로 불투명해져 아무것도 안 흐려지므로, JS 가 없거나
넘치지 않을 때는 지금까지와 똑같이 보인다.
두 띠의 방식이 다른 이유는 띠 자신이 그려지는 물건인지가 다르기 때문이다.
등급 가격표(.legend-grades)는 배경도 테두리도 없는 맨 줄이라 mask 를 걸면 딱
버튼만 흐려진다. 층 바로가기(.floornav)는 테두리 있는 알약이라 같은 방법을 쓰면
알약 자체가 가장자리에서 녹아 "내용이 이어진다"가 아니라 "덜 그려졌다"로 보인다
(실제로 걸어보고 확인했다). 그래서 그쪽은 알약 배경색 그라데이션을 위에 얹어
칩만 덮는다.
*/
.bookbar .legend-grades {
--fade-l: 0px;
--fade-r: 0px;
-webkit-mask-image: linear-gradient(to right,
transparent 0, #000 var(--fade-l),
#000 calc(100% - var(--fade-r)), transparent 100%);
mask-image: linear-gradient(to right,
transparent 0, #000 var(--fade-l),
#000 calc(100% - var(--fade-r)), transparent 100%);
}
/*
알약 안쪽에만 얹는다 — 위아래 1px 은 테두리, 아래 24px 은 .floornav 의 margin-bottom
이라 슬롯 높이에 포함돼 있다. 오른쪽 끝을 둥글리는 건 알약과 같은 색을 칠하기
때문이다: 각진 채로 두면 둥근 마구리 바깥으로 색이 삐져나와 모서리가 각져 보인다.
슬롯에 얹는 이유: 스크롤 컨테이너(.floornav) 안에 넣은 것은 내용과 같이 흘러가
가장자리에 머물지 못한다. 절대 위치라 flex 인 슬롯의 배치에는 끼어들지 않는다.
*/
.floornav-slot { position: relative; }
.floornav-slot::before,
.floornav-slot::after {
content: '';
position: absolute; top: 1px; bottom: 25px;
z-index: 1; pointer-events: none;
}
.floornav-slot::before {
left: 1px; width: var(--fade-l, 0px);
border-radius: 999px 0 0 999px;
background: linear-gradient(to right, var(--floornav-bg), transparent);
}
.floornav-slot::after {
right: 1px; width: var(--fade-r, 0px);
border-radius: 0 999px 999px 0;
background: linear-gradient(to left, var(--floornav-bg), transparent);
}
.bookbar { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.bookbar .inner { flex-direction: column; align-items: stretch; }
.bookbar .picked {
grid-template-columns: 1fr;
grid-template-areas: "list" "hint" "summary";
gap: 8px;
}
.bookbar .pickedsummary {
min-width: 0;
text-align: left;
}
/* 예매 CTA 만 전폭으로. 등급 필터 버튼까지 잡으면 가격표가 세로로 네 줄이 된다. */
.bookbar .inner button { width: 100%; }
}
/* 모션 최소화 설정에서는 전환뿐 아니라 애니메이션도 멈춘다.
transition 만 껐을 때 포스터 shimmer(무한 반복)가 계속 돌아가는 문제가 있었다. */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* ==================================================================
공연 목록(page-list) / 공연 상세(page-detail).
레이아웃은 bluesquare.kr 을 참고한 그대로(필터 pill, 카드 그리드, 라벨-값 행)
두고, 색·타이포만 공통 다크 토큰으로 맞췄다. 좌석 배치도의 무대 조명 연출이
어두운 배경에 기대고 있어서, 화면마다 테마가 갈리면 같은 서비스로 안 읽힌다.
================================================================== */
body.page-list .wrap, body.page-detail .wrap { max-width: 1120px; }
/* ---- 로그인 · 회원가입 알약 (헤더 공통) ----
**화면 스코프에 두지 않는다.** 헤더 자체가 공용 조각(fragment/header)이라 그 안의
버튼 스타일도 공용이어야 한다 — 종전에는 body.page-list/.page-detail 로 묶여 있어서,
그 클래스가 없는 에러 페이지(403/404/5xx)에서는 알약이 아예 안 그려지고 브라스 글자
두 개가 붙어 나왔다. 공유 시트를 조각으로 뺄 때 겪은 것과 같은 함정이다.
로그인은 텍스트 링크, 회원가입은 채움 CTA로 역할을 분리한다. 둘 다 버튼처럼 두면
헤더에서 "계정 만들기"보다 "로그인"이 같은 무게로 읽혀 처음 온 사람의 다음 행동이
흐려진다. 높이와 글자 크기는 맞추되, 로그인에는 테두리와 배경을 두지 않는다. */
.authbtns { display: flex; align-items: center; gap: 8px; }
.authbtns a {
display: inline-flex; align-items: center;
min-height: 38px;
border-radius: 999px;
font-size: 13px; font-weight: 600;
transition: color .12s, background .12s, transform .2s, box-shadow .12s;
}
.authbtns .btn-login {
padding: 9px 8px;
color: var(--brass) !important;
}
.authbtns .btn-login:hover { color: var(--paper) !important; }
.authbtns .btn-signup {
padding: 9px 16px;
border: 1px solid var(--brass);
background: var(--brass);
color: var(--ink) !important;
box-shadow: 0 4px 14px rgba(233, 180, 76, .18);
}
.authbtns .btn-signup:hover {
background: #f2c874;
box-shadow: 0 6px 18px rgba(233, 180, 76, .28);
}
/* ---- 모바일 필터 토글 버튼 (기본 숨김, 860px 이하에서만 노출) ---- */
body.page-list .mobile-filter-btn {
display: none;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding: 10px 18px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: var(--ink-soft);
color: var(--paper);
font: inherit;
font-weight: 600;
cursor: pointer;
}
body.page-list .mobile-filter-btn em { font-style: normal; color: var(--mute); }
/* ---- 필터 패널 ---- */
body.page-list .filterpanel {
background: var(--ink-soft);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 24px 28px;
margin-bottom: 32px;
}
body.page-list .fp-head { display: none; }
body.page-list .fp-close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--mute); cursor: pointer; }
body.page-list .fp-keyword {
display: flex; align-items: center; gap: 10px;
background: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px;
padding: 12px 20px; margin-bottom: 20px;
transition: border-color .12s;
}
body.page-list .fp-keyword:focus-within { border-color: var(--brass); }
body.page-list .fp-keyword svg { flex: none; }
body.page-list .fp-keyword input {
border: 0; outline: 0; flex: 1; min-width: 0;
font: inherit; font-size: 14px; background: none; color: var(--paper);
}
body.page-list .fp-keyword input::placeholder { color: var(--mute); }
body.page-list .fp-grid { display: flex; flex-direction: column; gap: 14px; }
body.page-list .fp-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.page-list .fp-label { flex: none; width: 76px; font-size: 13px; font-weight: 600; color: var(--mute); }
body.page-list .fp-col-wide .fp-row { align-items: flex-start; }
/* fp-row 는 flex-start 라 라벨이 맨 위에 붙는데, 드롭다운(select)은 라벨보다 키가 커서
그대로 두면 라벨이 위로 치우쳐 보인다. 드롭다운 한 줄 높이 기준으로 세로 중앙에 오도록 내려준다. */
body.page-list .fp-col-wide .fp-label { margin-top: 9px; }
/* 드물게 쓰는 조건은 native details로 접는다. 스크립트 없이도 열고 닫히며, 적용 중인
조건이 있을 때는 서버가 open 속성을 내려줘 현재 결과의 근거를 숨기지 않는다.
왼쪽 들여쓰기를 없앴다 — 94px 는 위 지역·날짜 드롭다운 시작 위치에 맞춘 값인데,
그러면 장르·진행 현황·지역·날짜 라벨이 전부 왼쪽 0에서 시작하는 것과 이 줄만
어긋나서 필터 패널의 한 항목이 아니라 어쩌다 붙은 링크처럼 보였다. 좁은 화면
레이아웃(아래 미디어쿼리)은 이미 margin-left: 0 이라 이 정렬이 원래도 맞는
기본값이었다 — 데스크톱만 예외로 들여져 있었을 뿐이다. */
body.page-list .fp-advanced {
border-top: 1px solid var(--line);
}
body.page-list .fp-advanced summary {
display: flex; align-items: center; gap: 8px;
min-height: 42px;
color: var(--mute); font-size: 13px; font-weight: 700;
cursor: pointer; list-style: none;
}
body.page-list .fp-advanced summary::-webkit-details-marker { display: none; }
/* 화살표(::after)는 항상 "상세 조건" 글자 바로 옆에 붙어야 한다 — 소스 순서로는
span → em(적용됨 배지, 조건이 있을 때만) → ::after 라서, 그대로 두면 배지가 있을 때
화살표가 배지 뒤로 밀려나 글자와 멀어진다. flex order 로 화살표를 배지보다
앞에 오게 한다(열림·닫힘 상태와 무관하게 항상 이 순서). */
body.page-list .fp-advanced summary::after {
content: "⌄";
order: 1;
font-size: 16px; line-height: 1;
transition: transform .16s ease;
}
body.page-list .fp-advanced[open] summary::after { transform: rotate(180deg); }
body.page-list .fp-advanced summary em {
order: 2;
padding: 2px 7px;
border-radius: 999px;
background: rgba(233, 180, 76, .16);
color: var(--brass);
font-size: 11px; font-style: normal;
}
body.page-list .fp-advanced-body {
display: grid;
gap: 12px;
padding: 2px 0 16px;
}
body.page-list .fp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
body.page-list .cattab {
position: relative;
display: inline-flex; align-items: center; gap: 4px;
padding: 8px 16px;
border: 1px solid var(--line-strong);
border-radius: 999px;
font-size: 13px; color: var(--mute);
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
body.page-list .cattab input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
body.page-list .cattab:hover { border-color: var(--paper); color: var(--paper); }
/* 선택된 필터는 강조색으로 채운다. 어두운 배경에서 앰버 위 검정 글씨가 대비가 가장 크다. */
body.page-list .cattab.active {
background: var(--brass); border-color: var(--brass);
color: #0B0B0C; font-weight: 700;
}
/* flex: 1 1 0%; min-width: 0 이 필요한 이유: 안의 fp-hint 가 flex-basis:100% 라서
이 컨테이너의 "내용 기준 너비"를 브라우저가 이상하게 크게 잡아버려, 실제로는
한 줄에 다 들어가는데도 fp-row 가 불필요하게 줄바꿈되는 버그가 있었다. */
body.page-list .fp-dropdowns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 0%; min-width: 0; }
body.page-list .fp-dropdowns select {
appearance: none;
-webkit-appearance: none;
font: inherit; font-size: 13px; color: var(--paper);
border: 1px solid var(--line-strong); border-radius: 999px;
padding: 8px 34px 8px 16px;
background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23A1A1AA'/%3E%3C/svg%3E") no-repeat right 14px center;
cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
transition: border-color .12s;
}
body.page-list .fp-dropdowns select:hover { border-color: var(--paper); }
/* 드롭다운을 펼쳤을 때의 목록은 OS 가 그리므로 배경/글자색을 따로 지정해야 한다. */
body.page-list .fp-dropdowns select option { background: var(--ink-soft); color: var(--paper); }
/* 선택값 텍스트 길이에 따라 각 드롭다운 폭이 들쭉날쭉해지지 않도록 고정폭을 준다. */
/* 선택값 길이가 바뀌어도 필터 줄의 폭이 흔들리지 않게 각 드롭다운 폭을 고정한다. */
body.page-list .fp-dropdowns select[name="area"] { width: 140px; }
body.page-list .fp-dropdowns select[name="venue"] { width: 200px; }
body.page-list .fp-dropdowns select[name="month"] { width: 120px; }
body.page-list .fp-dropdowns select[name="dayOfWeek"] { width: 120px; }
body.page-list .fp-dropdowns select[name="timeSlot"] { width: 140px; }
/* 지역·장소 그룹과 분명히 구분되도록 간격을 주되, 행 맨 끝까지는 밀지 않는다.
고정값이라 지역/공연장 값 길이와 상관없이 위치가 항상 동일하다. */
body.page-list .fp-hint { font-size: 12px; color: var(--mute); opacity: .7; flex-basis: 100%; }
/* 지역을 고르면 힌트 문구가 사라지면서 줄바꿈 위치가 바뀌어 패널 전체 높이가 들쭉날쭉했다.
엘리먼트 자체(= flex-basis:100% 의 줄바꿈 효과)는 항상 유지하고 텍스트만 숨긴다. */
body.page-list .fp-hint--hidden { visibility: hidden; }
body.page-list .fp-apply {
display: none;
width: 100%; margin-top: 20px;
background: var(--brass); color: #0B0B0C; border: 0; border-radius: 999px;
padding: 14px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
body.page-list .fp-backdrop { display: none; }
/* ---- 카드 그리드 ---- */
body.page-list .grid { gap: 32px 24px; }
/*
카드를 세로 플렉스로 두고 meta 를 바닥에 붙인다(.meta { margin-top: auto }).
그리드 항목은 기본이 stretch 라 한 행의 카드 높이가 이미 같으므로, 이렇게 하면
제목 줄 수가 달라도 메타 줄이 행 안에서 가지런히 놓인다. 제목에 2줄 높이를
못박는 방법과 결과는 같은데, 제목이 한 줄인 카드에 빈 줄이 생기지 않는다.
포스터는 flex: none 으로 고정한다 — 플렉스 항목은 기본적으로 줄어들 수 있어서
그냥 두면 aspect-ratio 로 잡은 높이가 눌린다.
*/
body.page-list .card { display: flex; flex-direction: column; }
body.page-list .card .poster {
position: relative;
flex: none;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
background: var(--ink-soft);
}
/*
로딩 중 shimmer.
주의: 이 애니메이션을 .poster 자체에 걸면 안 된다. 무한 애니메이션이 걸린
요소는 별도 합성 레이어로 올라가는데, 그러면 자식 가 배경 뒤로 묻혀
포스터가 통째로 안 보인다(실제로 그렇게 만들었다가 잡음).
그래서 shimmer 는 뒤에 깔리는 ::before 로 분리하고, 이미지에 z-index 를 줘서
항상 위에 오게 한다. 이미지가 도착하면 자연히 덮인다.
*/
body.page-list .card .poster::before {
content: '';
position: absolute; inset: 0; z-index: 0;
background: linear-gradient(100deg, #1A1B1E 30%, #28292E 50%, #1A1B1E 70%);
background-size: 220% 100%;
animation: poster-shimmer 1.4s ease-in-out infinite;
}
@keyframes poster-shimmer {
from { background-position: 180% 0; }
to { background-position: -80% 0; }
}
body.page-list .card .poster img { position: relative; z-index: 1; }
/*
포스터에 살짝 깊이를 준다 — "배경에서 색을 빼 포스터를 유일한 색으로 둔다"는
원칙은 그대로 두고(듀오톤·블러로 포스터 자체를 죽이지 않는다), 가장자리만
은은하게 눌러 액자 같은 인상을 준다. 이미지(z-index:1)보다 위에 와야 해서
z-index:2 를 준다 — inset box-shadow 를 .poster 자체에 걸면 자식 요소가
그 위에 그려져(포스터 shimmer 와 같은 함정) 안 보인다.
*/
body.page-list .card .poster::after {
content: '';
position: absolute; inset: 0; z-index: 2;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 -48px 48px -24px rgba(0, 0, 0, .28);
pointer-events: none;
}
body.page-list .card .poster.no-img {
display: grid; place-items: center;
background: var(--ink-soft);
}
body.page-list .card .poster.no-img::before { animation: none; background: none; }
body.page-list .card .posterfallback {
display: none;
position: relative; z-index: 1;
font-family: var(--body); font-size: 34px; font-weight: 700; color: var(--mute);
}
body.page-list .card .poster.no-img .posterfallback { display: block; }
/* 클릭 가능한 카드라는 신호. 포스터만 살짝 확대되고 카드가 떠오른다. */
body.page-list .card .poster img { transition: transform .25s ease; }
body.page-list .card { transition: transform .18s ease; }
body.page-list .card:hover { transform: translateY(-4px); }
body.page-list .card:hover .poster img { transform: scale(1.04); }
body.page-list .card:hover h3 { color: var(--brass); }
/*
z-index 는 반드시 포스터 이미지(z-index:1)보다 위여야 한다.
종전엔 배지도 1 이었는데, 같은 값이면 DOM 에서 뒤에 오는 쪽이 위에 그려진다 —
마크업이 배지 → img 순이라 **포스터가 실제로 있는 카드에서는 배지가 통째로
이미지 뒤에 깔려 안 보였다.** 포스터가 없는 카드(폴백)만 배지가 보였고, 로컬
시드가 대부분 폴백이라 화면으로는 오래 안 드러났다. 실데이터가 붙은 홈·목록·찜
세 화면 모두 같은 증상이었다.
2 가 아니라 3 인 이유는 .poster::after(가장자리 inset 그림자)가 이미 2 를 쓰기
때문이다 — 2 로 두면 이번엔 그 그림자가 배지 위에 얹힌다.
*/
body.page-list .card-badge {
position: absolute; top: 10px; left: 10px; z-index: 3;
background: rgba(17, 18, 20, .72); color: var(--paper);
backdrop-filter: blur(4px);
font-size: 12px; font-weight: 500;
border-radius: 999px; padding: 5px 12px;
border: 1px solid rgba(248, 244, 236, .16);
}
/* 예매 가능 여부 배지. 장르 배지 반대쪽 모서리 — 마감 임박 배지(홈 전용)와 같은 자리
규칙이다. body.page-list 스코프라 목록·홈(둘 다 page-list 클래스를 겹쳐 쓴다) 양쪽에
그대로 적용된다. 예매 가능(배지 없음)이 기본값이고, 그 외 네 상태만 색으로 가른다 —
색은 "지금 알아야 할 것"에만 쓴다는 관례를 따라 매진(로즈)·매진임박(브라스)만 눈에
띄고, 오픈예정·정보없음은 장르 배지와 같은 중립 톤이다(급한 소식이 아니라서). */
body.page-list .card-avail {
position: absolute; top: 10px; right: 10px; z-index: 3;
padding: 4px 9px;
border-radius: 999px;
font-size: 11px; font-weight: 700;
}
body.page-list .card-avail.avail-soldout { background: var(--rose); color: #fff; }
body.page-list .card-avail.avail-low { background: var(--brass); color: var(--ink); }
body.page-list .card-avail.avail-pending,
body.page-list .card-avail.avail-unknown {
background: rgba(17, 18, 20, .72); color: var(--paper);
backdrop-filter: blur(4px);
font-weight: 500;
border: 1px solid rgba(248, 244, 236, .16);
}
/*
제목이 포스터 바로 아래에 오므로 같은 행의 제목은 자동으로 같은 높이에서 시작한다.
(종전에는 meta 가 위에 있어서 공연장명이 긴 카드만 제목이 한 줄 내려앉았고, 그걸
meta 에 min-height: 3em 을 박아 막고 있었다 — 순서를 바로잡으니 그 보정이 필요 없어졌다.)
제목 줄 수가 카드마다 달라 아래 meta 가 어긋나는 건 높이를 못박아 맞추지 않는다.
그 방법은 대다수 카드에 빈 줄을 남긴다(실측 12개 중 10개가 한 줄). 대신 위 .card 의
세로 플렉스 + meta 의 margin-top: auto 로 meta 를 바닥에 붙여 정렬한다.
*/
body.page-list .card h3 {
font-size: 16px; font-weight: 700; color: var(--paper);
line-height: 1.4;
margin: 0 0 8px;
/* 아주 긴 제목만 두 줄에서 자른다. 높이를 2줄로 못박지는 않는다 —
실측 12개 중 10개가 한 줄이라, 못박으면 대다수 카드가 빈 줄을 떠안는다. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .12s;
}
/* 공연장과 기간은 각각 한 줄씩. 한 줄에 이어 붙이면 공연장명이 긴 카드만 접혀서
높이가 어긋난다 — 줄을 나누면 어떤 이름이 와도 정확히 두 줄이다. */
body.page-list .card .meta {
/*
의 브라우저 기본 상하 여백(13px)이 그대로 남아 제목과 떨어져 보였다.
카드 안에서 간격은 이 규칙이 정하는 값이어야 하므로 명시적으로 0 으로 두고
제목과의 간격은 h3 의 margin-bottom 하나로만 만든다. */
margin: auto 0 0; /* 위쪽 auto = 카드 바닥에 붙인다 (위 .card 플렉스 주석 참고) */
display: grid;
/* 2px 은 글자 세 줄만 있을 때의 값이었다. 가운데가 알약이 되면서 줄끼리 붙어 보여
6px 로 넓혔다 — 알약은 자기 padding 만큼 이미 시각적 부피가 있어서, 글자끼리
붙여 두던 간격을 그대로 쓰면 답답하다. */
gap: 6px;
color: var(--mute);
line-height: 1.5;
}
/* 아주 긴 공연장명("대학로 자유극장 (자유문화발전소)")은 말줄임 — 줄바꿈시키면
다시 카드 높이가 갈린다. */
body.page-list .card .m-venue {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/*
날짜 줄. 종전에는 "기간은 공연장보다 한 단계 뒤로" 라며 12px + opacity .75 를 걸었는데,
그 밑에 이미 color 가 rgba(...,.55) 라 흐리기가 두 번 겹쳤다. 라이트 톤에서 실측하면
대비가 2.67 로, 카드에서 가장 안 읽히는 글자였다(제목 17.08 · 공연장 4.04). 12px 본문에
요구되는 4.5 는커녕 큰 글씨 기준 3.0 에도 못 미친다.
게다가 지금은 이 줄이 「오늘 19:30」·「다음 공연 8/27(수) 19:30」을 말한다 —
카드에서 가장 행동에 가까운 정보라 공연장보다 뒤에 둘 이유가 없어졌다.
opacity 를 걷고 크기도 공연장과 같은 13px 로 맞춘다(대비는 tone-light 쪽에서 5.08).
*/
/*
회차 알약. 메타의 나머지가 전부 맨 글자라, 여기 하나만 "면"을 주면 색이나 굵기를
올리는 것보다 훨씬 먼저 눈에 걸린다 — 제목과 크기 경쟁을 하지 않고도 띈다.
grid 안에서 폭이 늘어나지 않게 justify-self 를 준다. 안 주면 알약이 카드 폭 전체로
늘어나 "면"이 아니라 띠가 된다.
*/
body.page-list .card .m-date {
justify-self: start;
display: inline-flex; align-items: center;
/*
알약 상자를 포스터 왼쪽 선에 맞춘다. 예전에는 글자 열을 맞추려고 10px 당겼지만,
진하게 채운 알약이 많아진 뒤로는 글자보다 상자가 먼저 보여 카드 밖으로 튀어나와 보였다.
*/
padding: 4px 10px;
border-radius: 999px;
font-size: 12.5px; font-weight: 700;
letter-spacing: -.01em;
white-space: nowrap;
}
/*
공연 기간. 회차 줄(.m-date) 뒤에 한 단계 물러서 놓는다 — 「언제 가지」가 먼저고
「언제까지 하지」가 다음이다. 종전 .m-date 가 쓰던 12px 자리를 그대로 물려받되,
흐리기를 두 번 걸던 opacity 는 안 가져온다(그게 대비 2.67 의 원인이었다).
색은 .meta 가 주는 값을 그대로 쓴다 — 라이트 톤에서 4.04 다.
*/
body.page-list .card .m-date { background: rgba(233, 180, 76, .16); color: var(--brass); }
body.page-list .card .m-date--soon { background: var(--brass); color: var(--ink); }
body.page-list .card .m-run { font-size: 12px; }
/* 주변 공연 찾기 전용. 거리를 공연장과 한 줄에 묶는다 — 별도 줄로 빼면 이 화면
카드만 한 줄 더 길어져 다른 화면의 카드 높이와 어긋난다. */
body.page-list .card .m-venuerow { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
body.page-list .card .m-venuerow .m-venue { flex: 1 1 auto; min-width: 0; }
body.page-list .card .m-distance {
flex: none; font-size: 12px; font-weight: 700; color: var(--brass); white-space: nowrap;
}
/*
공연장·기간 앞에 작은 아이콘. 카드 수가 많아