/* =========================================================
LETSRUN PLAY · HOME (데스크탑 1440 기준 · 반응형)
정본: Figma 「05 · 최종 기본 2」 Home-데스크탑 / Home-모바일
치트시트 규격: 컨테이너 1280 / 마진 80 / 섹션 72 / 카드 갭 32
카드 문법: 미디어(r18) → 하단 텍스트 → 태그 (딤·오버레이 없음)
========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* scrollbar-gutter:stable — 모달이 body overflow:hidden으로 스크롤을 잠글 때 스크롤바가 사라지며
페이지 전체가 옆으로 밀리던 현상(공유·코스·캘린더·검색 모달 공통) 방지: 스크롤바 자리를 항상 예약.
260812 버그 수정: 이 규칙이 @media (min-width:998px) 안에만 있어서, 클래식 스크롤바를 쓰는
데스크톱 브라우저 창을 998px 아래로 줄이면 방어가 빠져 그대로 밀렸다 — 실제로 900px에서 공유 모달을
열면 상세 Hero가 406.5→414px(+7.5px)로 순간 커졌다("이미지가 확대되는" 증상의 정체).
미디어쿼리를 걷어내 전 구간에 적용한다. 모바일 우려(우측 빈 줄)는 발생하지 않는다 — 오버레이
스크롤바 환경에서는 scrollbar-gutter가 사양상 무효이며, 375px에서 clientWidth 변화 0으로 실측 확인했다.
반대로 클래식 스크롤바를 쓰는 환경이라면 폭과 무관하게 예약하는 것이 맞다. */
html{scrollbar-gutter:stable}
body{font-family:var(--font-sans);color:var(--ink);background:var(--white);line-height:var(--lh-base)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important} /* 필터로 숨긴 카드가 .card{display:flex}에 덮이지 않도록 */
.container{max-width:calc(var(--container) + var(--pad-page)*2);margin-inline:auto;padding-inline:var(--pad-page)}
/* 시각적으로는 숨기되 스크린리더에는 읽히는 접근성 전용 텍스트 — HOME처럼 히어로가 이미지 완성형이라
화면에 노출할 첫 제목 텍스트가 없는 페이지에 h1 하나를 반드시 두기 위해 사용한다. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* =========================================================
상호작용 상태 — Focus · Pressed (260806 신설)
---------------------------------------------------------
이전에는 저자 CSS에 :focus-visible이 detail.css 1건뿐이고 :active(Pressed)는 전 파일 0건이었다.
포커스 링은 브라우저 기본값이 살아 있어 "안 보이는" 상태는 아니었지만, 브랜드 기준이 없어
요소마다 링 모양이 제각각이었고 눌림 피드백은 아예 없었다.
⚠ :where()로 감싸 특이도를 0으로 만든다 — 컴포넌트별 규칙이 항상 이겨서, 이 블록 때문에
기존 스타일이 덮이는 일이 없다. detail.css의 .detail-gallery__item:focus-visible과 값이 같아
화면 결과도 동일하다(그 규칙은 개별 선언으로 남겨 둔다).
포커스 링 색은 --focus-ring 변수로 받는다. 기본은 ink이고, 아래 "어두운 표면" 블록에서만
흰색으로 바꾼다 — 어두운 배경 위에서 ink 링은 보이지 않기 때문이다.
outline-offset:2px 덕분에 .btn--dark처럼 배경이 진한 버튼도 링이 요소 바깥(밝은 지면)에 그려져
대비가 확보된다.
========================================================= */
:root{--focus-ring:var(--ink)}
:where(a[href],button,input,select,textarea,[tabindex]):focus-visible{
outline:2px solid var(--focus-ring);
outline-offset:2px;
}
/* 어두운 표면 위의 컨트롤 — 히어로 배너(재생·정지), 라이트박스(닫기·이전·다음), 영상 재생 아이콘 */
.hero__banner,.lightbox-modal,.card__play{--focus-ring:var(--white)}
/* Pressed — 배경이 있는 컨트롤은 밝기를, 배경이 없는 아이콘 버튼은 불투명도를 낮춘다.
(배경이 투명한 버튼에 brightness를 걸면 아이콘 색만 미세하게 변해 눌림이 잘 안 보인다.) */
:where(.btn,.chip,.chip-dd__opt,.rail__arrow,.nav-hero__arrow,.courses__pause,.modal__close,.cal-day,.share-options__item):not([disabled]):active{
filter:brightness(.93);
}
:where(.gnb__icon,.hero__pause,.section__more,.playnow__more,.gnb-dd__trigger):active{opacity:.55}
/* Hover — 이미 hover가 있는 컴포넌트(칩·카드·목록 등)는 건드리지 않고, 없던 조작 요소에만 더한다. */
:where(.rail__arrow,.nav-hero__arrow,.courses__pause,.modal__close):hover{filter:brightness(.95)}
:where(.gnb__icon,.section__more,.playnow__more):hover{opacity:.7}
@media (hover:none){ /* 터치 기기에서는 hover 잔상이 남지 않도록 */
:where(.rail__arrow,.nav-hero__arrow,.courses__pause,.modal__close):hover{filter:none}
:where(.gnb__icon,.section__more,.playnow__more):hover{opacity:1}
}
/* 반응형 표시 토글 */
.only-mob,.only-mob-block,.only-mob-flex{display:none}
.only-desk{display:inline}
.only-desk-block{display:block}
.only-desk-flex{display:flex}
/* ---------- GNB ---------- */
/* GNB 전용 디스플레이 폰트 (260819 클라이언트 요청 — 현대카드 DIVE 레퍼런스 → 같은 날
에이투지체로 교체 확정, freesentation.blog/a2z). A2Z ExtraBold(SIL OFL, 무료 상용,
라틴 베이스 Outfit) 단일 웨이트만 셀프호스팅(assets/fonts, 146KB) — 사이트가 안내하는
임베딩 대신 셀프호스팅을 쓴다: 외부 CDN 요청 없음(오프라인 데모·납품 환경 유지).
적용 범위는 GNB 텍스트(메뉴·방문정보 트리거·로그인)뿐이며 본문 타이포는 기존 --font-sans
그대로다. 로드 실패 시 폴백도 --font-sans. 웨이트는 8 ExtraBold → 7 Bold를 거쳐
"너무 두껍다"는 클라이언트 피드백 2회로 6 SemiBold(600)로 확정. */
@font-face{
font-family:"A2Z";
font-weight:600;
font-style:normal;
/* 260820: swap → block. swap은 "폴백으로 먼저 그리고 나중에 교체"라 페이지를 넘길 때마다
GNB 메뉴가 시스템 폰트로 한 번 그려졌다가 A2Z(라틴 베이스 Outfit, 폭이 더 넓다)로 바뀌며
글자 크기가 튀어 보였다(클라이언트 리포트 — preload만으로는 첫 페인트 타이밍을 못 막는다).
block은 폰트가 준비될 때까지 그 글자만 그리지 않고 기다렸다가 A2Z로 한 번에 그린다 —
적용 범위가 GNB 텍스트 3곳뿐이고 폰트는 preload + 캐시라 실제 대기 시간은 사실상 0이며,
최악의 경우(첫 방문·느린 네트워크)에도 3초 후 폴백으로 자동 표시된다(스펙 기본 동작). */
font-display:block;
src:url("../assets/fonts/A2Z-SemiBold.woff2") format("woff2");
}
.gnb{position:sticky;top:0;z-index:50;background:var(--gnb-bg,var(--white));border-bottom:1px solid var(--gnb-line,var(--line));transition:background .4s ease,border-color .4s ease}
.gnb__inner{max-width:1440px;margin-inline:auto;height:80px;padding-inline:var(--pad-page);display:flex;align-items:center;justify-content:space-between;gap:28px}
/* display는 지정하지 않는다 — .only-mob-block/.only-desk-block(0,1,0) 토글을 이기지 않도록(기본 display:block은 위 img 규칙에서 이미 적용) */
.gnb__logo img{height:38px;width:auto} /* 260819: 32→38 — 로고 애니메이션 도입과 함께 소폭 확대(클라이언트 요청) */
/* 로고 자산 2종 — 지오메트리(264x96)가 완전히 동일해 형태·비율·위치가 항상 같고 색만 다르다.
height:32px(모바일 24px) + width:auto로 표시하므로 원본 비율이 그대로 유지된다.
· logo_color.svg : 컬러. 흰/밝은 헤더(전 페이지 + HOME 데스크톱)
· logo_white.svg : 화이트 단색 녹아웃. HOME 모바일 다크 헤더 전용
(CSS 반전 필터는 쓰지 않는다 — 별도 파일을 직접 사용). */
/* HOME 모바일 전용: 화이트/컬러 로고를 같은 자리에 겹쳐두고 opacity만 크로스페이드(레이아웃 이동 없음).
html.is-header-dark는 home.js의 syncHeaderTheme가 이미 계산해 두는 스크롤 상태 클래스를 그대로 재사용한다
(새 스크롤 판정 로직 추가 안 함). 기본값(클래스 없음)은 화이트가 보이는 상태 — 최초 페인트 전에도
히어로 최상단(다크 배경)과 시각적으로 어긋나지 않도록 하기 위함. */
/* display는 지정하지 않는다 — .only-mob-block의 (0,1,0) 토글을 이기지 않도록(위 .gnb__logo img 규칙과 동일한 이유) */
.gnb__logo-mob{position:relative}
.gnb__logo-mob .gnb__logo-img--white{position:relative;transition:opacity .15s linear} /* 정상 flow — span 크기를 이 이미지가 정함 */
.gnb__logo-mob .gnb__logo-img--color{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .15s linear}
html:not(.is-header-dark) .gnb__logo-mob .gnb__logo-img--white{opacity:0}
html:not(.is-header-dark) .gnb__logo-mob .gnb__logo-img--color{opacity:1}
/* ---------- GNB 로고 애니메이션 (260819) ----------
PLAY 4글자(P·L·A·Y)가 순서대로 한 바퀴 돌아가는 3D 플립. 디자이너 원본
(`렛츠런파크 로고/animation/index.html`)의 기하·타이밍·컬러를 그대로 옮긴 것이며,
깊이감을 만드는 슬랩(단면) 156장은 home.js가 공식으로 생성한다(마크업 하드코딩 없음).
⚠ 정지 상태(0%)는 기존 logo_color.svg와 같은 그림이다 — 애니메이션이 꺼져도(reduced-motion)
로고가 평소와 다르게 보이지 않는다.
⚠ HOME 모바일 다크 헤더의 화이트 로고(logo_white.svg)도 같은 애니메이션의 화이트 변형으로
교체된다(260819 클라이언트 요청). 화이트 변형은 컬러 변형과 구조가 완전히 동일하고 카드 색만
흰색(글자는 동일한 불투명 검정)이다 — 녹아웃(mask 구멍) 방식은 회전 중 글자가 사라지고 카드가
깨져 보여 폐기(home.js IIFE 주석 참고). 타이밍·크기·위치가 동일해 크로스페이드가 그대로 통한다.
⚠ 클래스는 전부 `logo-anim` 접두사를 쓴다 — 원본의 .face/.core/.slab/.card-slot은
이름이 너무 일반적이라 프로젝트 CSS와 충돌할 수 있다. */
.logo-anim{
--logo-anim-cycle:4000ms; /* 한 바퀴(캐스케이드 + 쉬는 구간) */
--logo-anim-stagger:200ms; /* 글자 간 시작 간격 */
--logo-anim-persp:1600px; /* 클수록 납작 — 슬랩 scale 값과 짝이라 임의 변경 금지 */
--logo-anim-scale:calc(38 / 125); /* 위 .gnb__logo img height(38px, 모바일 28px)와 동일 크기 */
width:calc(345px * var(--logo-anim-scale));
height:calc(125px * var(--logo-anim-scale));
overflow:visible}
/* display는 특이도 0(:where)으로 준다 — 교체 전 ![]()
가 갖고 있던 .only-mob-block/.only-desk-block
토글(0,1,0)을 절대 이기지 않아야 한다(위 .gnb__logo img 규칙과 같은 이유). */
:where(.logo-anim){display:block}
.logo-anim__canvas{position:relative;display:block;width:345px;height:125px;
transform:scale(var(--logo-anim-scale));transform-origin:0 0}
.logo-anim__wordmark{position:absolute;left:0;top:0;width:172.2px;height:26.84px;display:block} /* LETSRUN — 항상 정지 */
.logo-anim__slot{position:absolute;top:38.4912px;width:86.0069px;height:86.0069px}
.logo-anim__scene{display:block;width:100%;height:100%;
perspective:var(--logo-anim-persp);perspective-origin:50% 50%}
/* 구(L·A)는 원으로 클리핑한다 — 구가 돌아도 실루엣은 항상 완전한 원이어야 한다 */
.logo-anim__scene--round{clip-path:circle(49.85% at 50% 50%);-webkit-clip-path:circle(49.85% at 50% 50%)}
.logo-anim__card{position:relative;display:block;width:100%;height:100%;
transform-style:preserve-3d;animation:logo-anim-spin var(--logo-anim-cycle) infinite}
.logo-anim__card--p{animation-delay:0ms}
.logo-anim__card--l{animation-delay:calc(var(--logo-anim-stagger) * 1)}
.logo-anim__card--a{animation-delay:calc(var(--logo-anim-stagger) * 2)}
.logo-anim__card--y{animation-delay:calc(var(--logo-anim-stagger) * 3)}
.logo-anim__face,.logo-anim__slab,.logo-anim__core{position:absolute;inset:0;width:100%;height:100%;display:block}
.logo-anim__face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* 글자면은 각 입체의 바깥 표면에 놓인다. scale은 (perspective − depth/2) / perspective로
원근 확대를 상쇄해 정지 프레임이 원본 로고와 픽셀 단위로 같아지게 한다. */
.logo-anim__card--p .logo-anim__face--front,.logo-anim__card--y .logo-anim__face--front{transform:translateZ(35px) scale(0.978125)}
.logo-anim__card--p .logo-anim__face--back, .logo-anim__card--y .logo-anim__face--back {transform:rotateY(180deg) translateZ(35px) scale(0.978125)}
.logo-anim__card--l .logo-anim__face--front,.logo-anim__card--a .logo-anim__face--front{transform:translateZ(43.0035px) scale(0.973123)}
.logo-anim__card--l .logo-anim__face--back, .logo-anim__card--a .logo-anim__face--back {transform:rotateY(180deg) translateZ(43.0035px) scale(0.973123)}
/* 코어면 = 입체의 측면 실루엣. 옆으로 완전히 돌아간 순간의 빈틈을 메우고,
쉬는 동안에는 사라져 정지 로고에 실선으로 비치지 않게 한다.
슬랩(단면)도 같은 페이드를 탄다(260819 경계 찌글거림 수정) — 슬랩 70~86장은 원근 보정 때문에
정지 상태에서 앞면과 픽셀 단위로 같은 크기가 되는데, 같은 자리에 안티앨리어싱된 가장자리가
수십 장 겹쳐 쌓이면 벡터의 깔끔한 테두리가 지저분한 픽셀 프린지로 보인다. 슬랩은 회전 중
옆면 깊이를 보여줄 때만 필요하므로 코어와 동일한 구간(플립 동안)에만 나타나게 한다 —
정지 로고는 앞면 SVG 한 장의 가장자리만 그려져 원본 벡터와 동일하게 선명하다. */
.logo-anim__core{transform:rotateY(90deg)}
.logo-anim__core,.logo-anim__slab{opacity:0;
animation:logo-anim-core var(--logo-anim-cycle) linear infinite}
.logo-anim__card--p :is(.logo-anim__core,.logo-anim__slab){animation-delay:0ms}
.logo-anim__card--l :is(.logo-anim__core,.logo-anim__slab){animation-delay:calc(var(--logo-anim-stagger) * 1)}
.logo-anim__card--a :is(.logo-anim__core,.logo-anim__slab){animation-delay:calc(var(--logo-anim-stagger) * 2)}
.logo-anim__card--y :is(.logo-anim__core,.logo-anim__slab){animation-delay:calc(var(--logo-anim-stagger) * 3)}
@keyframes logo-anim-spin{
0%{transform:rotateY(0deg);animation-timing-function:cubic-bezier(0.6,0,0.3,1)}
45%{transform:rotateY(180deg)}
100%{transform:rotateY(180deg)}
}
@keyframes logo-anim-core{
0%{opacity:0} 2.5%{opacity:1} 40%{opacity:1} 44.5%{opacity:0} 100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
.logo-anim__card{animation:none}
.logo-anim__core,.logo-anim__slab{animation:none;opacity:0}
}
.gnb__menu{display:flex;gap:28px;flex:1;justify-content:flex-start;min-width:0;overflow-x:auto;scrollbar-width:none}
.gnb__menu::-webkit-scrollbar{display:none}
.gnb__inner{position:relative}
/* 메뉴 타이포 (260819 확대 — DIVE 레퍼런스): --fs-body-sm(14px)/400 → --fs-card(17px, 모바일 14px)/A2Z 600(18px/800→700→600·17px로 클라이언트 피드백 따라 단계 조정).
기존 hover(굵기 400→700 전환)는 base가 이미 최고 굵기가 되어 무의미해졌으므로
사이트 공통 hover 언어(opacity .7 — .gnb__icon 등과 동일)로 교체. is-active는 노란 밑줄 유지. */
.gnb__menu a{font-family:"A2Z",var(--font-sans);font-size:var(--fs-card);font-weight:600;padding:4px 0 8px;position:relative;color:var(--gnb-fg,var(--ink));white-space:nowrap;flex:none}
.gnb__menu a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--yellow-500)}
.gnb__menu a:hover{opacity:.7}
.gnb__right{display:flex;align-items:center;gap:12px}
/* 260819: 메뉴·유틸을 로고의 PLAY 블록 행 중심에 광학 정렬 — 로고는 상단에 LETSRUN 워드마크가
얹혀 있어 그래픽의 무게중심(PLAY 행)이 박스 중심보다 아래에 있다(38px 기준 약 +5.8px).
flex 중앙정렬을 그대로 두고 transform으로만 내려 레이아웃·히트영역 계산에 영향을 주지 않는다.
드롭다운 패널은 JS가 트리거 실측 좌표(getBoundingClientRect)로 띄우므로 함께 따라온다.
모바일(≤997)은 로고가 작고 1행 구조라 대상 아님. */
@media (min-width:998px){
.gnb__menu,.gnb__right{transform:translateY(6px)}
}
.gnb__icon{position:relative;display:flex;align-items:center;justify-content:center;color:var(--gnb-fg,#212121)}
.gnb__icon svg{height:20px;width:auto} /* viewBox 비율 유지(calendar 20:22 · search 20:20) — width 동시 고정 금지 */
/* 히트 영역 확장(260806) — 버튼 자체가 아이콘 크기(데스크톱 20 / 모바일 22)라 누를 수 있는 면적이
그만큼밖에 되지 않았다. 레이아웃 박스를 키우면 GNB 우측 정렬과 아이콘 간격이 함께 움직이므로
가상 요소로만 넓힌다 — 화면에 보이는 결과는 이전과 완전히 동일하다.
32px: 두 아이콘의 중심 간격(데스크톱 32 / 모바일 34)과 같아 서로 겹치지 않는 최대값.
40px: 위로 GNB 상단, 아래로 모바일 메뉴 줄(17px)과 겹치지 않는 최대값.
⚠ Apple HIG 권장치 44×44까지 키우려면 .gnb__right의 gap(12px)을 22px 이상으로 넓혀야 하는데
그건 GNB의 실제 시각 변경이라 별도 승인 대상이다(§36). 현재 값으로 WCAG 2.5.8 AA(24×24)는 충족한다. */
.gnb__icon::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:40px}
/* 로그인 — GNB 우측 유틸(260819). 실제 로그인 URL·세션 판정은 서버 영역이라 여기서는
[data-login-trigger] 훅만 두고 href를 만들지 않는다(§9 — 가짜 URL·disabled 잔존 금지).
서버가 로 교체해도 스타일은 그대로 적용된다.
색은 .gnb__icon과 같은 --gnb-fg를 참조 — HOME 모바일 다크 히어로 위에서 함께 흰색이 된다. */
.gnb__login{font-family:"A2Z",var(--font-sans);font-size:var(--fs-body);font-weight:600;color:var(--gnb-fg,var(--ink));background:none;border:0;padding:4px 2px;line-height:1;white-space:nowrap;cursor:pointer} /* 260819: 메뉴와 같은 GNB 폰트, 크기만 한 단계 작게(15px) — 유틸리티 위계 유지 */
.gnb__login:hover{text-decoration:underline;text-underline-offset:3px}
.gnb__login:active{opacity:.55}
/* 기업 홈페이지 복귀 링크(260830) — 로그인과 같은 유틸 슬롯이지만 한 단계 낮은 위계(grey + 한 단계 작은 글자).
⚠ 모바일은 GNB 가로 여유가 0이라 라벨을 숨기고 아이콘만 남긴다(아래 모바일 블록) — 접근성 이름은 aria-label. */
.gnb__corp{display:inline-flex;align-items:center;gap:5px;font-family:"A2Z",var(--font-sans);
font-size:var(--fs-body-sm);font-weight:600;color:var(--gnb-fg,var(--grey));padding:4px 2px;line-height:1;white-space:nowrap;opacity:.8}
.gnb__corp .ico-svg{width:15px;height:15px;flex:none}
/* 마사회 파비콘(assets/logo/kra-favicon.png — kra.co.kr 공식 파비콘 16px 반입, 260830 총괄 지정)
— 좁은 폰(≤423px)에서 텍스트 라벨 대신 이것 하나만 남는다(아래 분기). 그 외 폭에서는 숨김. */
.gnb__corp__favicon{display:none;width:16px;height:16px;flex:none;border-radius:3px}
.gnb__corp:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.gnb__corp:active{opacity:.55}
/* ---------- 긴급 공지 ---------- */
/* position+z-index 필요 — 모바일 히어로 블러 배경(.hero__bg)이 GNB 뒤로 200px 확장되며 공지 바 영역까지
덮는데, .hero가 이후 DOM 순서라 기본 스택에서는 공지 위로 그려진다. 공지를 명시적으로 위 레이어에 둔다. */
.notice{position:relative;z-index:2;display:flex;align-items:center;gap:10px;background:var(--coral-100);border-left:4px solid var(--coral-500);padding:14px var(--pad-page);min-height:52px}
.notice__badge{font-size:var(--fs-badge);font-weight:700;background:var(--coral-500);color:var(--white);border-radius:4px;padding:3px 8px;flex:none;line-height:16px}
.notice__text{font-size:var(--fs-label);font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notice__close{font-size:var(--fs-body-sm);color:var(--grey);padding:4px;flex:none}
/* ---------- 히어로 ---------- */
/* Hero Group 높이 정렬(데스크톱 전용, 997px 이하는 별도 .hero 규칙이 완전히 덮어써서 영향 없음):
.hero는 stretch로 두되, 히어로 배너 자신은 align-self:start로 stretch에서 빠져
항상 자기 aspect-ratio 그대로의 높이를 유지한다(예전에 stretch를 금지했던 이유 — 아래 참고).
그 결과 grid row 높이 = 히어로의 자연 높이가 되고, PLAY NOW(.playnow)만 기본 stretch로
그 행 높이를 그대로 따라간다 — "히어로가 기준, PLAY NOW가 따라간다"는 방향을 명확히 한 것.
(과거엔 사이드바가 히어로보다 커지는 998~1200px 구간에서 반대로 히어로가 사이드바 높이까지
늘어나 버리는 문제가 있었다 — 히어로에 align-self:start를 줘서 그 경로 자체를 막는다.) */
/* 260802: 히어로 그룹에 별도의 좁은 max-width를 주는 방식은 폐기 — .container(다른 섹션과 동일)
기준을 벗어나 독립적으로 가운데 정렬되면서 "취향대로 둘러보기" 등 아래 섹션과 좌우 정렬선이
어긋나 보였다(피드백). 대신 사이드바(PLAY NOW) 컬럼 자체를 넓혀 히어로 비율은 그대로 유지하되
폭을 좁은 만큼만 확보 — 정렬은 다른 섹션과 100% 동일한 .container를 그대로 쓰고, 사이드바가
넓어진 만큼 히어로(1fr)가 자연히 조금 작아진다(1280 기준 907px → 856px, 높이 704 → 664px).
사이드바를 280px→360px(26%→30%)로 넓힌 건 "코리아컵 국제대회"처럼 긴 제목이 잘리던 문제(피드백)도
같이 해결하기 위함 — 아래 clamp() 값은 원래(개별 max-width 적용 전) 수치로 되돌렸다. */
/* 260821: 배너↔사이드바 간격 40 → 24px. 항목 자체의 좌측 패딩(16)이 더해져 배너에서 썸네일까지
56px이 비어 "허전해 보인다"는 클라이언트 피드백 — 시각 간격 40px로 맞춘다(모바일은 gap:0 별도). */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,30%);gap:24px;padding-top:32px;align-items:stretch}
.hero__bg{display:none} /* 모바일 전용 블러 배경 — 데스크톱은 흰 배경 유지(아래 ≤997 블록에서 활성) */
.hero__banner{position:relative;border-radius:var(--r-hero);overflow:hidden;align-self:start}
/* 실제 가로 스크롤 트랙(무한 순환 클론 포함) — 데스크톱은 피크 없이 1장씩, 모바일은 --hero-peek로 양옆 노출 */
.hero__track{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
.hero__track::-webkit-scrollbar{display:none}
/* 히어로 카드 — 높이는 항상 '비율'에서 도출한다(고정 height 금지: 폭이 변하면 프레임 모양이 달라져 사진이 크게 잘림).
데스크톱 ≥998 → --hero-ratio-desk(876:680) · 모바일 ≤997 → --hero-ratio(7/8) */
.hero__slide{--hero-ratio:var(--hero-ratio-desk);position:relative;display:block;flex:0 0 100%;aspect-ratio:var(--hero-ratio);scroll-snap-align:center;overflow:hidden;border-radius:inherit}
/* 배너는 제목·날짜·설명·가독성 그라데이션이 전부 포함된 완성형 이미지(운영 가이드 참고) —
PC/모바일 전환은 의 가 담당하고, CSS는 비율에 맞춰 꽉 채우기만 한다.
딤·그라디언트·텍스트를 여기서 다시 얹지 않는다(이미지에 이미 포함되어 있어 중복 노출 금지). */
.hero__media{position:absolute;inset:0;display:block}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.hero__counter{position:absolute;right:20px;bottom:20px;background:rgba(0,0,0,.45);color:var(--white);font-size:var(--fs-body-sm);font-weight:700;border-radius:var(--r-full);padding:4px 14px;display:flex;align-items:center;gap:8px;z-index:1}
.hero__pause{position:relative;width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;font-size:var(--fs-badge);line-height:1;color:var(--white)}
/* 히트 영역 확장(260806) — .gnb__icon과 같은 방식·같은 값. 자동재생 정지는 접근성상 반드시 누를 수
있어야 하는 컨트롤인데 버튼이 18×18뿐이었다. 카운터 알약(93×29)의 레이아웃을 건드리지 않도록
가상 요소로만 넓힌다 — 화면에 보이는 결과는 이전과 동일하다.
32px: 오른쪽 카운터 텍스트가 +17px 지점에서 시작하므로 겹치지 않는 최대값.
40px: 알약 밖 배너 영역으로 넘어가지만 그 자리에 다른 조작 요소가 없어 안전하다. */
.hero__pause::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:40px}
/* PLAY NOW 리스트 — 데스크톱에서 위 .hero의 stretch를 그대로 받아 히어로와 같은 높이를 채운다.
min-height:0은 grid/flex 중첩 시 내부 콘텐츠가 stretch된 높이를 무시하고 넘치는 걸 방지. */
.playnow{display:flex;flex-direction:column;gap:30px;min-height:0}
.playnow__head{display:flex;align-items:baseline;justify-content:space-between}
.playnow__title{font-size:var(--fs-h2);font-weight:700}
/* .section__more와 같은 역할("더 보기")이므로 히트 영역 규칙도 같은 값을 쓴다(260811 정정 —
이전에는 .section__more만 44px로 넓히고 이쪽은 21px 텍스트 높이 그대로였다).
가상 요소로만 확장해 글자 크기·위치는 그대로다. */
.playnow__more{position:relative;font-size:var(--fs-body-sm);font-weight:700;color:var(--ink)}
.playnow__more::after{content:"";position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);height:44px}
.playnow__list{position:relative;list-style:none;display:flex;flex-direction:column;gap:10px}
/* 260820: 선택 테두리 3px → 1px. 두꺼운 라인이 투박해 보인다는 피드백 — 선택 표시는 연한
옐로우 필이 맡고 라인은 윤곽만 잡는다. 모든 항목이 같은 1px 투명 테두리를 가져 선택 시
높이·정렬이 흔들리지 않는다. */
.playnow__item{display:flex;align-items:center;gap:14px;height:79px;padding:16px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s}
.playnow__item:hover{background:var(--bg)}
/* 260821: 선택 상태 = 키컬러 옐로우(500) 완전 채움 — 데스크톱·모바일 공통(클라이언트: "모바일 노란색
셀렉 컬러를 웹에도 동일하게"). 이전 데스크톱은 연한 200이라 두 화면의 선택 표현이 달랐다. */
/* 260829: 항목 클릭 = 상세 이동 — 앵커는 display:contents라 기존 flex 레이아웃 무변경 */
.playnow__link{display:contents;color:inherit;text-decoration:none}
.playnow__item.is-active{background:var(--yellow-500);border-color:var(--yellow-500)}
.playnow__item.is-active .playnow__meta{color:var(--ink);opacity:.75}
/* 목록 아래 "+ 더보기" — 데스크톱 전용(상단 헤드를 대체). 폭을 꽉 채우는 아웃라인 버튼. */
.playnow__more-btn{align-items:center;justify-content:center;height:48px;border:1px solid var(--line);
border-radius:var(--r-md);background:var(--white);font-size:var(--fs-body-sm);font-weight:700;
color:var(--ink);transition:background .2s,border-color .2s}
.playnow__more-btn:hover{background:var(--bg);border-color:var(--grey-line,var(--line))}
/* 썸네일 비율 고정(84:47) — 데스크톱/모바일 모두 동일 비율, width만 다르고 height는 자동 도출 */
/* 260821: 썸네일 가로형(84:47) → 정방형. 식별용 보조 이미지일 뿐이라 가로로 넓게 자리를 차지할
이유가 없다(클라이언트). 폭 = 항목 안쪽 높이에 맞춘 값 — 가로 여백이 제목·날짜 쪽으로 돌아간다. */
.playnow__thumb{width:52px;aspect-ratio:1/1;border-radius:6px;flex:none;background:var(--img, var(--neut-thumb));background-size:cover;background-position:center}
/* min-width:0이 없으면 플렉스 자식(제목)이 줄어들지 못해 썸네일·배지를 밀어내거나 억지로 줄바꿈된다 */
.playnow__info{flex:1;min-width:0}
.playnow__name{font-size:var(--fs-body-sm);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playnow__meta{font-size:var(--fs-caption);color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playnow__item .badge{margin-left:auto}
/* 처음방문 CTA (말마 배너) — 260803: 데스크톱·모바일 두 변형 모두 완성형 이미지 배너로 통일했다.
문구·마스코트는 이미지 안에 포함되고 HTML 텍스트는 두지 않는다(히어로 배너와 동일 원칙, 접근성은 aria-label).
고정 padding+텍스트 조합은 폭이 좁아져도 높이가 거의 줄지 않아 히어로와의 하단 라인 정렬을 방해했는데,
aspect-ratio 기반 이미지는 폭에 비례해 함께 낮아진다.
배경 폴백은 --neut-thumb(중립 회색)이 아니라 브랜드 CTA 그린 — 이미지 로드 전/실패 시에도 CTA로 읽히게. */
/* 260819 재구성: 완성형 이미지(playnow-firstvisit-banner.png) → HTML/CSS + 말마 캐릭터 PNG.
클라이언트가 말마프렌즈 디자인 소스(Drive)를 제공하며 캐릭터 그래픽으로 개편 요청 —
텍스트가 라이브 텍스트로 돌아와 수정·번역·접근성이 쉬워지고, 캐릭터는 투명 PNG
(assets/img/malma/, 스티커 원본에서 추출)를 우하단에 얹는다. 기존 이미지 자산은 삭제하지
않고 남겨 둔다(문서 데모·백업). */
/* 260821 8차 — ⭐ 문구와 말마 사이 간격을 "우연"이 아니라 구조로 보장한다.
그동안은 말마 크기와 문구 폭이 서로 모르는 채 각자 정해져, 폭이 조금만 달라져도 다시 붙었다
(클라이언트 리포트 3회). 이제 배너 높이(--fv-h) 하나에서 말마 크기가 파생되고, 그 말마가
차지할 폭(--fv-mascot-w)에 최소 간격(--fv-gap)을 더한 만큼을 배너의 padding-right로
**미리 예약**한다 → 문구는 그 안쪽에만 그려지므로 어떤 화면 폭에서도 --fv-gap이 지켜진다.
⚠ 값을 바꿀 때 손대는 것은 --fv-* 변수뿐이다. height·padding-right·말마 위치는 전부 파생값. */
.firstvisit{
/* 배너 높이 — 모든 파생값의 기준. 데스크톱 사이드바는 998px에서 320px까지 좁아지므로
고정값(92px)이면 그 구간에서 말마 예약 폭이 문구 자리를 먹어 문구가 2줄로 접힌다.
폭에 비례해 흐르게 두고 1440에서 92px가 되도록 잡았다(998에서 78px). */
/* 260831(총괄): 데스크톱 사이드바 배너를 낮춘다 — 위 PLAY NOW 미니 리스트가 더 잘 보이게.
92 → 72px(1440), 78 → 60px(998). 말마도 함께 한 단계 작게(scale 1.8→1.6). */
--fv-h:clamp(60px, 5vw, 72px);
--fv-scale:1.6; /* 말마 요소 높이 = --fv-h × 이 값 */
--fv-crop:0.27; /* 아래에서 잘라내는 비율(상체 구도 유지) */
--fv-aspect:0.778; /* 말마 PNG 가로÷세로(1256÷1615) — 폭 계산용 */
--fv-gap:24px; /* ⭐ 문구↔말마 최소 간격(보장값) */
--fv-right:8px; /* 말마 오른쪽 오프셋(음수면 배너 밖으로 걸친다) */
--fv-mascot-w:calc(var(--fv-h) * var(--fv-scale) * var(--fv-aspect));
position:relative;margin-top:auto;display:flex;align-items:center;border-radius:var(--r-card);
height:var(--fv-h);padding-left:28px;
padding-right:calc(var(--fv-right) + var(--fv-mascot-w) + var(--fv-gap));
background:var(--cta-green);color:var(--ink)}
/* 260821: 998~1200 구간에서는 사이드바가 320px대로 좁아 22px 고정이면 문구가 2줄로 접힌다
(말마 예약 폭을 뺀 나머지가 그만큼 줄기 때문) — 폭에 따라 18~22px로 흐르게 한다. */
/* 260831: 문구↔화살표 중앙 정렬(총괄 리포트). 화살표가 18px **고정**이라 제목이 커질수록
크기 차가 벌어지고, 인라인 베이스라인 정렬이라 한글 글자 중심과 화살표 중심이 어긋나 있었다.
→ inline-flex + align-items:center로 두 글자 상자의 세로 중심을 맞추고, 화살표 크기는
em(제목 비례)으로 바꾼다. 간격은 margin 대신 gap. */
.firstvisit__title{display:inline-flex;align-items:center;gap:8px;line-height:1;
font-size:clamp(18px, 1.5vw, 22px);font-weight:700}
.firstvisit__arrow{font-size:.86em;font-weight:700;line-height:1;margin-left:0}
/* 말마 — 배너 우측. 위 --fv-* 변수에서 크기·위치가 전부 파생된다(직접 px를 쓰지 않는다).
· 위로는 배너를 넘어가고(모자·머리 노출), 아래는 상체 하단에서 잘린다(허리 아래 다리 미노출).
· overflow:hidden으로 자르면 위쪽 돌출까지 함께 잘리므로 요소 자체를 clip-path로 자른다.
· bottom의 음수값이 clip으로 잘려나간 높이와 정확히 상쇄돼 "보이는 아래끝 = 배너 바닥선"이 된다.
⚠ 260826: 이 "위 돌출 + 하단 크롭" 구조를 클라이언트가 마음에 들어해 Collection 더보기 밴드
마스코트(collection.css)에도 같은 구조를 이식했다 — 이 블록은 그 원본이니 되돌리지 말 것. */
.firstvisit__mascot{position:absolute;right:var(--fv-right);
height:calc(var(--fv-h) * var(--fv-scale));
bottom:calc(-1 * var(--fv-h) * var(--fv-scale) * var(--fv-crop));
width:auto;object-fit:contain;object-position:bottom;pointer-events:none;
clip-path:inset(0 0 calc(var(--fv-crop) * 100%) 0)}
/* ---------- 공통 섹션 ---------- */
.section{padding-top:var(--gap-section)}
/* 260811: GNB 바로 아래 "첫" 섹션만 HOME 히어로와 같은 리듬(.hero{padding-top:32px})으로 맞춘다.
허브 4종(PLAY NOW·체험·공원 탐색·PARK LIVE)이 첫 섹션에도 --gap-section(72px)을 그대로 써서
HOME보다 40px 더 벌어져 있었다 — 섹션 사이 간격(72px)은 그대로 두고 첫 섹션 진입부만 조정한다.
HOME은 첫 자식이 .hero(+sr-only h1)라 이 선택자에 걸리지 않는다(영향 없음). */
main > .section:first-child{padding-top:32px}
.section__head{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
/* h1/h2 시각 스타일은 항상 동일 — Page Intro 제거 이후 각 허브 페이지의 첫 Featured 3 섹션 제목만
h1(문서 구조상 그 페이지의 진짜 첫 제목)이고 그 아래 "전체 일정" 등은 h2이지만, 같은 Section
Level(대표 영역 ↔ 전체 목록)의 제목이므로 크기·굵기·행간이 달라 보이면 안 된다. HTML Heading
레벨(h1/h2)은 문서 구조용으로만 쓰고, 시각적 크기는 이 규칙 하나로 통일한다. */
.section__head h1,.section__head h2{font-size:var(--fs-h1);font-weight:700;line-height:1.18}
.section__head p{font-size:var(--fs-body-sm);color:var(--grey)}
/* 섹션 제목 오른쪽 끝 "전체 보기" — PLAY NOW(.playnow__more)와 같은 자리 규칙을 모든 HOME 섹션에 공용 적용 */
.section__head__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.section__more{position:relative;font-size:var(--fs-body-sm);font-weight:700;color:var(--ink);white-space:nowrap;flex:none}
/* 히트 영역 확장(260806) — 글자 높이(21px)가 곧 누를 수 있는 높이였다. 줄 높이를 키우면 섹션 제목과의
정렬이 틀어지므로 가상 요소로만 세로 44px를 확보한다(가로는 글자 폭 그대로 — 좌우에 다른 조작 요소가 없다). */
.section__more::after{content:"";position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);height:44px}
/* ---------- 태그 · 배지 · 칩 ---------- */
.tag{display:inline-flex;align-items:center;font-size:var(--fs-label);font-weight:700;border-radius:var(--r-sm);padding:5px 10px}
.tag--pill{border-radius:var(--r-full);background:var(--ink);color:var(--white);font-size:var(--fs-body-lg);padding:7px 16px}
/* 지역 배지 — 미디어 좌상단에 딱 붙는 형태라 '바깥쪽(좌상단) 라운드는 담기는 컨테이너와 같은 값'이어야 모서리가 맞는다.
260819 재설계(클라이언트 요청): 좌상단 모서리에 융합되는 큰 박스(17px·비대칭 radius)가
"무식하게 크고 못생겼다"는 피드백 — 커머스 앱 배지처럼 모서리에서 띄운 작은 필로 교체.
반투명 다크 + 블러(유리 효과)라 어떤 사진 위에서도 읽히고, 모서리 곡률과 무관해져
컨테이너별 --region-badge-r 주입 훅도 필요 없어졌다(관련 setter 제거). */
.card-region-badge{position:absolute;top:10px;left:10px;margin:0;background:rgba(0,0,0,.55);color:var(--white);font-weight:600;font-size:var(--fs-caption);line-height:1;padding:6px 10px;white-space:nowrap;width:max-content;border-radius:var(--r-full);pointer-events:none;z-index:1;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* 큰 히어로 배너 위에서는 살짝만 키우고 여백도 비례해 띄운다 */
/* 260821: 히어로 배너는 이미지가 워낙 커서 캡션(12px) 다음 단계(13px)로는 여전히 눈에 잘 안
띈다는 피드백 — 배너 전용으로 올렸다가(14px) "더 커야 한다"는 재피드백으로 16px까지 올린다.
패딩·오프셋도 같이 키워 배지가 커진 만큼 배너 모서리에서 더 떨어지게 한다.
카드 위 배지(기본 12px)는 그대로 — 히어로에서만 커진다. */
.hero__slide .card-region-badge,.nav-hero__slide .card-region-badge{font-size:var(--fs-body-lg);font-weight:700;padding:10px 18px;top:20px;left:20px}
/* 카테고리 태그 · 상태 배지 — 브랜드 문서 Badge 규격(M: height26 · fs13)에 맞춰 두 컴포넌트를 동일한 박스 모델로 통일.
height+inline-flex로 높이를 고정해서, 한 줄에 나란히 놓여도(캘린더 일정 카드·상세 히어로·검색 결과) 자동으로 정렬·크기가 맞는다.
margin-top:10px는 태그/배지 자체가 아니라 '.card 맨 아래 요소일 때만' 필요한 간격이므로 .card > 로 범위를 좁혔다
(그 전엔 .tag--cat에 무조건 붙어 있어서, 가로 줄에서 배지 옆에 놓일 때 배지보다 아래로 처지는 정렬 버그가 있었다). */
.tag--cat{border-radius:var(--r-full);font-size:var(--fs-label);padding:0 12px;height:26px;display:inline-flex;align-items:center;width:fit-content}
.card > .tag--cat{margin-top:10px}
.tag--fac{background:var(--green-500);color:var(--ink)}
.tag--exp{background:var(--ground-500);color:var(--ink)}
.tag--event{background:var(--yellow-500);color:var(--ink)}
.tag--season{background:var(--coral-500);color:var(--ink)}
/* Type Badge(시설 유형: 공간/F&B/전시/액티비티) — 카테고리가 "시설"인 콘텐츠에만 붙는
조건부 값이다(행사·시즌·체험은 이 필드 자체가 없음 — 운영 가이드 "카테고리 vs 유형 구분" 참고).
그래서 같은 카드에 다른 Category Badge(행사/시즌/체험)와 나란히 놓일 일이 없고, 항상 "시설"
Category와만 짝을 이룬다 — 이미 사람들이 "시설=초록"으로 인지하고 있는 .tag--fac과 똑같은
색을 그대로 쓴다(새 배지 디자인을 따로 만들지 않음, 텍스트만 "시설"에서 실제 유형값으로 바뀜). */
.tag--type{border-radius:var(--r-full);font-size:var(--fs-label);padding:0 12px;height:26px;display:inline-flex;align-items:center;width:fit-content;background:var(--c-fac);color:var(--ink)}
.card > .tag--type{margin-top:10px}
.card__badges .tag--type{margin-top:0}
.badge{font-size:var(--fs-label);font-weight:500;border-radius:var(--r-full);padding:0 12px;height:26px;display:inline-flex;align-items:center;flex:none;width:fit-content;align-self:flex-start}
.card > .badge{margin-top:10px}
/* Status Chip(일정 상태) — Category Badge와 같은 컬러 계열을 쓰면 안 된다(예: 진행중이 행사 배지와 같은
노란색이면 같은 카드에 나란히 놓였을 때 구분이 안 된다). 카테고리 컬러를 상속하지 않는 별도 톤 사용. */
.badge--on{background:var(--ink);color:var(--white)}
.badge--muted{background:#EDEDEF;color:var(--ink)}
.badge--ended{background:transparent;border:1px solid var(--line);color:var(--soft)}
/* Category Badge + Status Chip을 같은 카드에 나란히 표시할 때(예: PLAY NOW)의 공용 가로 래퍼 —
.card는 flex-column이라 두 요소를 그냥 나열하면 세로로 쌓인다. */
/* 260821: 이미지 위 배지 묶음 — 지역 배지 + 유형/카테고리 배지를 좌상단 한 줄에 나란히 둔다
("언제 와도" 카드: 유형 배지를 카드 하단에서 여기로 이동). 래퍼가 위치를 잡으므로 안의
지역 배지는 static으로 풀고, 유형 배지는 지역 배지와 같은 박스 치수(글자 12px·패딩 6×10)로
맞춰 두 알약의 높이가 정확히 같게 한다 — 색만 다르다(지역=반투명 검정, 유형=브랜드 그린). */
.card__media-badges{position:absolute;top:10px;left:10px;z-index:1;display:flex;align-items:center;gap:6px;pointer-events:none}
.card__media-badges .card-region-badge{position:static}
.card__media-badges .tag--type,.card__media-badges .tag--cat{height:auto;font-size:var(--fs-caption);font-weight:600;line-height:1;padding:6px 10px;margin:0;white-space:nowrap}
.card__badges{display:flex;align-items:center;gap:6px}
.card > .card__badges{margin-top:10px}
.card__badges .tag--cat,.card__badges .badge{margin-top:0}
/* 더 작은 버전(브랜드 문서 Badge S: height19 · fs11) — 목록형 밀집 UI(캘린더·검색 결과)에 사용 */
.badge--sm{height:19px;padding:0 10px;font-size:var(--fs-badge)}
/* ---------- 요일 표시(Day Pills) — 요일 반복 운영 콘텐츠 공용 (260829 신설) ----------
월~일 7칸 중 운영 요일만 옐로우 키컬러로 켜진다(표시 전용 — 누를 수 없다, Badge 계열).
PLAY NOW "상설 프로그램" 그룹 헤더가 사용. 켜짐/꺼짐은 .is-on 클래스 하나로만 제어.
260829 후속(총괄): 데스크톱 26px는 큰 그룹 제목 옆에서 너무 작았다 — 데스크톱 38px로
확대(레퍼런스 주간 스트립 스케일), 모바일은 원래 보기 좋았던 26px 유지. */
.day-pills{display:inline-flex;gap:6px}
.day-pill{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
font-size:var(--fs-body-sm);font-weight:700;color:var(--grey);background:var(--bg)}
.day-pill.is-on{background:var(--yellow-500);color:var(--ink)}
@media (max-width:997px){
.day-pills{gap:4px}
.day-pill{width:26px;height:26px;font-size:var(--fs-badge)}
}
/* touch-action:pan-x — 넘치는 칩 행을 손가락으로 끌 때 브라우저가 텍스트 선택 제스처로 오인하지
않고(iOS Safari에서 실제로 재현되는 문제) 가로 스크롤로만 해석하게 한다. user-select:none은
칩 라벨이 애초에 선택할 필요가 없는 조작 UI라 드래그 시작점이 텍스트여도 선택이 걸리지 않는다.
.rail__track 등 카드 레일이 이미 드래그 중에만 쓰는 것(.is-dragging{user-select:none})과 같은
목적이지만, 칩은 라벨이 항상 텍스트라 상시 적용이 맞다. */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;touch-action:pan-x;-webkit-user-select:none;user-select:none}
/* 260813 2차 Visual Pass: Chip은 전부 "사용자가 누르는 조작 UI"(지역·카테고리·진행상태·채널
선택, 드롭다운 트리거, 모바일 통합 필터 버튼)다 — 표시 전용 Badge(.badge/.tag--cat 등, 계속 pill)와
시각적으로 구분하기 위해 pill(--r-full)에서 rounded rectangle(--r-md)로 바꾼다.
.chip--slots(드롭다운 트리거)·.chip.is-selected 전부 이 한 규칙만 상속하므로 여기 하나만 고치면
HOME 취향대로·PLAY NOW 지역/카테고리/진행상태·PLAY NOW B·공원탐색·PARK LIVE 채널 필터가 함께 바뀐다. */
.chip{height:36px;min-width:48px;padding-inline:14px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line);color:var(--grey);font-size:var(--fs-label);font-weight:500;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none}
.chip:hover{background:var(--bg)}
/* 260819: 클릭/탭 직후 일부 브라우저가 그리는 기본 포커스 링(선택 칩 위의 검정 라인)을 모든
칩·드롭다운 옵션에서 차단한다 — plain :focus에만 적용하며, 키보드 :focus-visible 링(전역
규칙)은 그대로 살아 있어 a11y를 해치지 않는다. */
.chip,.chip-dd__opt{-webkit-tap-highlight-color:transparent}
.chip:focus:not(:focus-visible),.chip-dd__opt:focus:not(:focus-visible){outline:none}
/* 260820: 일부 브라우저는 마우스로 칩을 누른 뒤에도 :focus-visible을 적용해 선택된 칩에 검정
포커스 링(--focus-ring = ink 2px)이 남는다(클라이언트 리포트). 링 자체를 없애면 키보드
접근성이 깨지므로, home.js가 "마지막 입력이 포인터였는지"만 html[data-input]에 표시하고
그때만 링을 감춘다 — Tab·화살표로 이동하면 data-input이 key로 바뀌어 링이 정상 노출된다. */
html[data-input="pointer"] :where(.chip,.chip-dd__opt,.chip-dd__trigger):focus-visible{outline:none}
/* 260819: 선택 상태를 검정 Filled → 브랜드 키컬러 옐로우 Filled로 교체(클라이언트 요청).
텍스트는 밝은 옐로우 위에서 대비가 나오는 --ink로 바꾼다(흰색은 거의 안 보임).
PLAY NOW 카테고리/지역/진행상태·공원탐색·PARK LIVE 채널 필터 등 .chip.is-selected를 쓰는
모든 화면이 이 한 규칙으로 함께 바뀐다(위 260813 주석 참고) — 페이지별 재정의 없음.
.chip--slots(드롭다운 트리거)는 원래도 이 규칙을 상속하지 않고 항상 Outline이라 무관. */
.chip.is-selected{background:var(--yellow-500);border-color:var(--yellow-500);color:var(--ink)}
/* 취향 칩 등에 붙는 이모지 아이콘(THEME_ICONS, common/theme-data.js) — 기존 .ico-svg(18px)와
시각 크기를 맞추되 emoji 글리프 자체 여백 때문에 폰트 크기는 살짝 낮춘다. color emoji는
currentColor를 따르지 않으므로(항상 고유 색) 선택 상태에서도 텍스트 색과 무관하게 원래 색 유지 —
의도된 동작(옐로우 배경 위에서도 이모지 컬러가 그대로 보여야 더 "귀엽고 재미있는" 인상). */
.chip__emoji{font-size:16px;line-height:1;flex:none}
/* 드롭다운 트리거(.chip--slots)는 카테고리 탭(.chip)과 조작 방식이 달라 선택 Filled(옐로우)를
쓰지 않는다 — 선택값은 배경색이 아니라 버튼 텍스트로만 표시한다. 260819 재조정(클라이언트
피드백): ink 테두리가 "선택된 박스"처럼 보인다는 지적으로, 옆의 일반 필터 칩과 같은 연회색
라인(--line) + 연회색 필(--bg)로 톤을 낮췄다. 텍스트·아이콘은 ink 유지(현재 값 가독성).
is-selected 클래스 유무와 무관하게 항상 이 톤이다.
탭/클릭 시 일부 브라우저가 그리는 기본 포커스 링·하이라이트는 끄되(:focus-visible이 아닌
plain :focus만), 키보드 포커스 링(:focus-visible, 전역 규칙)은 그대로 살아 있다 — a11y 유지. */
.chip--slots,.chip--slots.is-selected{background:var(--white);border-color:var(--line);color:var(--ink)} /* 260819 3차: 필 색도 옆 칩과 완전히 동일(흰색)로 — 연회색 필은 혼자 눌린 상태처럼 보인다는 피드백 */
.chip--slots:hover{background:var(--bg)}
.chip__pre,.chip__suf{font-size:var(--fs-caption);opacity:.85}
/* 드롭다운 칩 캐럿 — 인라인