@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.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; gap: 10px;
font-size: 13px; color: var(--mute);
}
.masthead .authnav a { color: var(--brass); }
.masthead .navdivider { 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;
}
/* ---------- 페이지네이션 ---------- */
.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; }
/* ---------- 좌석 배치도 (시그니처) ---------- */
/*
인원수 선택과 확대 버튼은 상단 헤더(.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; }
.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).
*/
#housecontent { transform-origin: 0 0; }
.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; }
/* 무대 뒤 밴드와 무대 사이는 좁게 — 무대 뒤 좌석은 무대에 붙어 있다. */
.zoneline + .stage { margin-top: 14px; }
/*
층 머릿글.
종전에는 층 경계를 알려주는 게 구역 이름뿐이었는데, 층 사이 간격과 같은 열 안 구역 사이
간격이 **둘 다 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 {
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(--ink-soft);
}
.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); margin-inline: auto; }
.row .rowlabel {
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)보다는 아래에 둔다. */
position: sticky;
left: 0;
z-index: 2;
background: var(--ink);
}
/*
무대를 감싸는 홀(정면에 좌·우 구역이 있는 홀)에서는 행 라벨과 구역 이름을 고정하지 않는다.
sticky 는 스크롤 컨테이너 왼쪽을 기준으로 잡히므로 열이 여러 개면 오른쪽 구역의 라벨까지
전부 왼쪽 끝으로 몰려 다른 구역 좌석 위에 겹쳐 뜬다. 열이 하나인 홀에서는 종전대로 붙어 있다.
*/
.housescroll.has-sides .rowlabel { position: static; }
/*
구역 이름도 같은 이유로 고정을 풀고, 그 구역의 좌석 폭 가운데로 옮긴다.
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; }
.housescroll.has-sides .floorname {
position: absolute;
top: 0;
left: 50%;
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 가 걸렸다(핀치가 사실상 멈춤).
*/
.house { --arc-strength: -0.24%; }
/* 무대 뒤 구역은 무대가 아래쪽에 있으니 반대로 휜다. */
.zoneline-rear .house { --arc-strength: 0.24%; }
.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::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;
}
@media (max-width: 720px) {
/* 좁은 화면에서는 지도 자체가 좁으니 미니맵도 자리를 덜 차지하게 줄인다. */
.minimap { right: 12px; bottom: calc(var(--footer-h, 150px) + 10px); }
}
/* 가격표. 예매 바 안에 고정으로 들어간다. 바깥 여백은 바가 갖고 있다. */
.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;
}
.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; }
.chartbox { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.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); }
.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; }
.resno { font-size: 12px; color: var(--mute); margin: 0; }
/* ---- 예매 요약 팝업 ----
공유 시트(공연 상세)와 같은 배경+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; }
.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; }
.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; }
body.page-list .authbtns, body.page-detail .authbtns { display: flex; align-items: center; gap: 8px; }
body.page-list .authbtns a, body.page-detail .authbtns a {
display: inline-flex; align-items: center;
padding: 7px 16px;
border-radius: 999px;
border: 1px solid var(--line-strong);
font-size: 13px; font-weight: 600; color: var(--paper) !important;
transition: border-color .12s, background .12s;
}
body.page-list .authbtns a:hover, body.page-detail .authbtns a:hover {
border-color: var(--brass);
background: rgba(255, 201, 64, 0.08);
}
/* ---- 모바일 필터 토글 버튼 (기본 숨김, 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; }
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); }
/* 선택값 텍스트 길이에 따라 각 드롭다운 폭이 들쭉날쭉해지지 않도록 고정폭을 준다. */
/* 드롭다운이 5개(지역·공연장·월·요일·시간대)라 920px 컨테이너에 한 줄로 들어가려면
합이 빠듯하다. 요일을 추가하면서 공연장 240→200, 그룹 라벨 여백 32→20 으로 줄여
맞췄다 — 안 줄이면 시간대만 다음 줄로 밀려 "월 · 요일 · 시간대" 라벨과 떨어진다.
(더 좁은 화면에서는 flex-wrap 이 자연스럽게 접는다.) */
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-grouplabel { font-size: 13px; font-weight: 600; color: var(--mute); margin-left: 20px; }
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);
}
/*
제목이 포스터 바로 아래에 오므로 같은 행의 제목은 자동으로 같은 높이에서 시작한다.
(종전에는 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;
gap: 2px;
color: var(--mute);
line-height: 1.5;
}
/* 아주 긴 공연장명("대학로 자유극장 (자유문화발전소)")은 말줄임 — 줄바꿈시키면
다시 카드 높이가 갈린다. */
body.page-list .card .m-venue {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 기간은 공연장보다 한 단계 뒤로 — 색을 새로 만들지 않고 같은 --mute 를 흐리게 쓴다. */
body.page-list .card .m-date { font-size: 12px; opacity: .75; }
/*
공연장·기간 앞에 작은 아이콘. 카드 수가 많아