/* brand.smaxh.com/lessons — 레슨 탭(목록 · 상세). Brand tokens from styles.css; purple only on the app buttons.
   Phone first; 960px and up is the desktop layout (list grid, detail with a sticky side card).
   이 파일은 코트 탭 모든 쪽(목록 · 전체 · 도시 · 상세 — src/_data/courts.js)과 매치 코트 상세(src/_data/matches.js)도 불러 쓴다.
   레슨에만 바꿀 규칙은 .p-lessons · .p-lesson 아래에 — 아니면 그 쪽들도 같이 바뀐다. */

.ls-h2{font-weight:800;font-size:22px;line-height:1.35;letter-spacing:-.03em}
.ls-h3{font-weight:700;font-size:18px;line-height:1.4;letter-spacing:-.02em;margin-bottom:14px}
.ls-note{font-size:14px;line-height:20px;color:var(--mute);margin-top:14px}
.ls-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--ink);text-underline-offset:3px}
.ls-link:active{opacity:.6} /* 폰 눌림이 보이게(검토 2026-11-09 — 기본과 거의 같았음) */
.ls-d [hidden],.ls-side [hidden]{display:none!important}
.ls-more{display:inline-flex;align-items:center;min-height:40px;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- clay tone (the lesson launch KV, 2026-11-07): hero, section tints and the closing block.
   Purple stays on the app buttons only. White on --clay is 5.5:1. */
.p-lessons,.p-lesson{--clay:#B4461A;--clay-deep:#3A190C;--clay-tint:#F8EEE8}

/* ---------- list: hero — search landing: H1 + hook numbers over the lesson launch KV source photo (no baked text),
   edge to edge. Never fill the space beside a photo with flat colour, gradient or noise (2026-11-07).
   Phone: the photo fills the block and the copy sits on its shaded foot; the first lesson card peeks in 390x664.
   Desktop: basket on the right, copy on the open clay at left; shorter so the list starts in the first screen. */
.ls-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(340px,92vw,440px);overflow:hidden;color:#fff;background:var(--clay-deep);isolation:isolate}
.ls-hero__kv{position:absolute;inset:0}
.ls-hero__kv img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.ls-hero__kv::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(40,15,6,0) 30%,rgba(40,15,6,.55) 60%,rgba(40,15,6,.84) 100%)}
.ls-hero__in{position:relative;width:100%;padding-top:120px;padding-bottom:24px}
.ls-hero__copy{position:relative;text-shadow:0 1px 18px rgba(40,15,6,.4)}
.ls-hero__h1{font-weight:800;font-size:30px;line-height:1.3;letter-spacing:-.035em}
.ls-hero__sub{font-size:16px;line-height:1.6;color:rgba(255,255,255,.92);margin-top:8px}
.ls-hero__stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 16px;margin-top:14px;list-style:none}
.ls-hero__stats li{display:flex;flex-direction:column;gap:2px;min-width:0}
.ls-hero__stats li+li{padding-left:16px;border-left:1px solid rgba(255,255,255,.28)}
.ls-hero__stats b{font-size:20px;line-height:26px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.ls-hero__stats span{font-size:14px;line-height:19px;color:rgba(255,255,255,.86);white-space:nowrap}
/* The rating number (★ 4.96 · 4,96) is a plain span inside the bold: the bold's font, size and colour, not the label span's. */
.ls-hero__stats b span{font:inherit;letter-spacing:inherit;color:inherit}
@media (max-width:359px){.ls-hero__stats{grid-template-columns:repeat(3,minmax(0,auto));gap:0 12px}.ls-hero__stats li+li{padding-left:12px}.ls-hero__stats span{white-space:normal}}

/* ---------- list: cards */
.ls-list{padding:24px 0 56px}
.ls-list__hd{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.ls-list__hd .ls-h2{font-size:18px}
.ls-list__sort{font-size:14px;line-height:20px;color:var(--mute)}
/* 폰: 레슨 10개는 브랜드 카드 줄(.row · data-row 점) — 세로로 10장 쌓으면 너무 길다(대표 2026-11-07). 데스크톱은 그리드 */
.ls-grid>li{min-width:0}
.ls-card{display:block;color:inherit;text-decoration:none}
.ls-card__ph{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--tile);aspect-ratio:13/12}
.ls-card__ph img{width:100%;height:100%;object-fit:cover}
.ls-badge{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:14px;line-height:20px;font-weight:700;color:var(--ink)}
.ls-card__body{display:flex;flex-direction:column;gap:2px;padding-top:12px}
.ls-card__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ls-card__where{min-width:0;font-size:16px;line-height:24px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-card__rate{flex:none;font-size:15px;line-height:24px;color:var(--ink)}
.ls-card__rate i{font-style:normal;color:var(--mute)}
.ls-card__t{font-size:15px;line-height:22px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-card__price{font-size:15px;line-height:22px;color:var(--sub);margin-top:4px}
.ls-card__price b{font-size:16px;font-weight:700;color:var(--ink)}

/* ---------- list: story (lesson KV 2·3, uncropped 3:4) */
.ls-story__list{margin-top:20px}
.ls-story__list li{display:flex;flex-direction:column;gap:4px}
.ls-story__list img{width:100%;aspect-ratio:13/12;object-fit:cover;border-radius:16px;margin-bottom:10px;background:var(--tile)}
.ls-story__list b{font-size:18px;line-height:1.4}
.ls-story__list span{font-size:15px;line-height:1.6;color:var(--sub)}

/* ---------- reviews: the newcoach review block, code reused (src/_includes/lesson1/macros.njk reviews + these rules from lesson1/styles.css) */
.rv__score{display:flex;align-items:center;gap:14px;margin-top:20px}
.rv__score strong{font-size:56px;line-height:60px;font-weight:900;letter-spacing:-.04em}
.rv__score div{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:20px;color:var(--mute)}
.rv__stars{color:var(--ink);letter-spacing:1px;font-size:14px}
.rv__kt{margin-top:28px;font-size:16px;line-height:24px;font-weight:700}
.rv__kw{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.rv__kw li{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:6px 10px;font-size:15px;line-height:22px;color:var(--ink)}
.rv__kw i{display:block;grid-column:1/-1;grid-row:2;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.rv__kw b{display:block;height:100%;border-radius:2px;background:var(--ink)}
.rv__kw em{grid-row:1;grid-column:2;font-style:normal;text-align:right;color:var(--mute)}
.rv__main{margin-top:32px}
.rv__list{display:flex;gap:12px;margin:0 calc(var(--g) * -1);padding:0 var(--g) 4px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 var(--g);scrollbar-width:none}
.rv__list::-webkit-scrollbar{display:none}
.rv__card{flex:0 0 82%;scroll-snap-align:center;display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:16px}
.rv__who{display:flex;align-items:center;gap:10px}
.rv__av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#c4c4c8}
.rv__who div{display:flex;flex-direction:column}
.rv__who strong{font-size:15px;line-height:22px;font-weight:700}
.rv__who span,.rv__meta{font-size:14px;line-height:20px;color:var(--mute)}
.rv__text{font-size:15px;line-height:24px}
.js-anim .rv__kw b{transform:scaleX(0);transform-origin:left;transition:transform 1.1s .3s var(--ease)}
.js-anim .rv__sum.in b{transform:none}
.rv__kw li:nth-child(2) b{transition-delay:.38s}
.rv__kw li:nth-child(3) b{transition-delay:.46s}
@media (prefers-reduced-motion:reduce){.js-anim .rv__kw b{transform:none;transition:none}}

/* ---------- list: how · faq */
.ls-faq__list{margin-top:12px;border-top:1px solid var(--line)}
.ls-q{border-bottom:1px solid var(--line)}
.ls-q summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:16px 0;font-size:16px;line-height:1.5;font-weight:600;cursor:pointer;list-style:none}
.ls-q summary::-webkit-details-marker{display:none}
.ls-q summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.ls-q[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.ls-q p{padding:0 0 18px;font-size:15px;line-height:1.65;color:var(--sub)}
.ls-end{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--clay-deep)}
.ls-end__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.ls-end::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(40,15,6,.8) 0%,rgba(40,15,6,.66) 100%)}
.ls-end .lead,.ls-end .trust{color:rgba(255,255,255,.78)}
.ls-end .hero__cta{margin-top:24px}

/* ---------- detail */
.ls-d__top{padding-top:16px}
.ls-back{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--sub);text-decoration:none}
.ls-gal-wrap{position:relative;margin-top:4px}
.ls-gal{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:16px}
.ls-gal::-webkit-scrollbar{display:none}
.ls-gal img{flex:0 0 100%;width:100%;aspect-ratio:13/12;object-fit:cover;border-radius:16px;background:var(--tile);scroll-snap-align:center}
.ls-gal__n{position:absolute;right:calc(var(--g) + 12px);bottom:12px;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:700 14px/22px var(--num)}
.ls-d__grid{padding-bottom:56px}
.ls-d__area{font-size:15px;line-height:22px;color:var(--sub);margin-top:20px}
.ls-d__t{font-weight:800;font-size:24px;line-height:1.4;letter-spacing:-.03em;margin-top:6px}
.ls-d__rate{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:15px;color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.ls-d__rate b{color:var(--ink)}
/* 한눈에: 큰 글자 세 칸(방식 · 시간 · 실력) — 목록 첫 화면 숫자 줄과 같은 모양 */
/* 선 대신 면: 회색 판 하나에 세 칸, 칸 사이 선 없음 (대표 2026-11-07 '선이 너무 많아') */
.ls-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px;padding:18px 4px;border-radius:16px;background:var(--tile)}
.ls-facts li{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:0 6px;text-align:center}
.ls-facts b{font-size:18px;line-height:26px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.ls-facts span{font-size:14px;line-height:20px;color:var(--mute)}
.ls-gear{margin-top:20px}
.ls-gear__t{font-size:14px;line-height:20px;color:var(--mute)}
.ls-gear ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.ls-gear li{display:inline-flex;align-items:center;gap:10px;font-size:16px;line-height:26px;font-weight:600}
.ls-gear li::before{content:"";flex:none;width:12px;height:6px;margin-top:-4px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
/* 섹션은 선으로 자르지 않고 여백으로 나눈다(에어비앤비 체험 호스트 페이지 정도) */
.ls-sec{margin-top:48px}
.ls-coach{display:flex;align-items:center;gap:14px}
.ls-av{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--tile)}
.ls-av--txt{display:grid;place-items:center;font:800 22px/1 var(--num);color:var(--sub)}
.ls-coach__n{font-size:17px;font-weight:700;line-height:1.4}
.ls-coach__l{font-size:15px;line-height:1.5;color:var(--sub);margin-top:2px}
.ls-days{display:grid;gap:2px}
.ls-days li{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px}
.ls-days b{flex:none;min-width:92px;font-weight:700}
.ls-days span{color:var(--sub)}
.ls-days em{margin-left:auto;font-style:normal;font-size:14px;color:var(--mute)}
.ls-days__more{font-size:14px;line-height:20px;color:var(--mute);margin-top:12px}
.ls-desc{font-size:15px;line-height:1.7;color:var(--ink);white-space:pre-line}
[data-clamp].is-clamped{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.ls-rv__t[data-clamp].is-clamped{-webkit-line-clamp:5}
.ls-tags{display:flex;flex-wrap:wrap;gap:8px}
.ls-tags li{padding:6px 12px;border-radius:999px;background:var(--tile);font-size:14px;line-height:20px}
/* 후기: 목록과 같은 리뷰 카드. 폰은 브랜드 카드 줄(.row · 점), 데스크톱 두 칸 */
.ls-rv{align-items:flex-start}
.ls-rv>li:only-child{flex-basis:100%}
.ls-rv .ls-more{align-self:flex-start;min-height:32px;margin-top:-6px}
.ls-rv__t{white-space:pre-line}

/* 위치: 가까운 역에서 코트까지 길을 그린 지도(OSM). 글자는 HTML이라 폰에서도 14px+ */
.ls-loc__also{font-size:15px;line-height:22px;color:var(--sub);margin-top:-8px}
.ls-mapbox{margin:16px 0 0}
.ls-map{position:relative;margin:0;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:#f7f7f9;isolation:isolate;container-type:inline-size}
.ls-map__bg,.ls-map__fg{position:absolute;inset:0;width:100%;height:100%}
.ls-map__line{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;opacity:.4}
.ls-map__dot{fill:var(--ink);stroke:#fff;stroke-width:4}
.ls-map__chip,.ls-map__pin b{position:absolute;padding:3px 9px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.12);font-size:14px;line-height:20px;font-weight:700;white-space:nowrap;color:var(--ink)}
/* 칩과 점 사이: 점은 지도와 같이 커지므로(지름 = 지도 폭 × 22/600) 간격도 같이 — 데스크톱에서 칩이 점에 붙던 것(대표 2026-11-08 '목동역 글씨에 점이 가려짐') */
.ls-map__chip{--off:max(12px,calc(100cqw * 11 / 600 + 6px));--tx:-50%;--ty:calc(-100% - var(--off));transform:translate(var(--tx),var(--ty))}
.ls-map__chip.is-b{--ty:var(--off)}
.ls-map__chip.is-l{--tx:-18px}
.ls-map__chip.is-r{--tx:calc(-100% + 18px)}
.ls-map__pin{position:absolute;width:0;height:0}
.ls-map__pin i{position:absolute;left:-16px;top:-44px;width:32px;height:32px;border-radius:50% 50% 50% 0;background:var(--ink);transform:rotate(-45deg);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.ls-map__pin i::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}
.ls-map__pin b{--tx:-50%;top:8px;left:0;transform:translateX(var(--tx))}
.ls-map__pin.is-l b{--tx:-18px}
.ls-map__pin.is-r b{--tx:calc(-100% + 18px)}
.ls-map__pin.is-a b{top:auto;bottom:52px}
.ls-mapbox figcaption{margin-top:6px;text-align:right;font-size:14px;line-height:20px;color:#77777a}
.ls-loc__n{font-size:16px;font-weight:700;margin-top:16px}
.ls-loc__a{font-size:15px;line-height:1.6;color:var(--sub);margin-top:2px}
.ls-link--arrow::after{content:"\2192";margin-left:6px;transition:transform .2s var(--ease)}

/* phone: the apply bar sits at the bottom from the first screen (the only sticky bar on the brand site) */
.ls-dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--g) calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.ls-dock__price{display:flex;flex-direction:column;line-height:1.3}
.ls-dock__price b{font-size:18px}
.ls-dock__price span{font-size:14px;color:var(--sub)}
.ls-dock__btn{flex:none;min-width:148px}
@media (max-width:359px){.ls-dock{gap:12px}.ls-dock__price b{font-size:16px}.ls-dock__btn{min-width:0;padding:0 20px}} /* 320: 버튼 오른쪽 여백 24px 그대로(검토 2026-11-09 — 6px까지 밀림) */

/* ---------- 웹·앱 효과 (대표 2026-11-07 '웹과 앱 효과를 넣어줘 · 잘 읽히게') ----------
   1) 목록 카드 사진 → 상세 첫 사진으로 이어짐(앱 화면 전환처럼, View Transitions · 안 되는 브라우저는 그냥 이동).
      0.3초 안 — 길면 '뻑뻑'(대표 2026-11-08): 화면 전환은 새 페이지를 다 받은 뒤 시작하므로 받는 시간 + 애니메이션이 한 번에 느껴진다
   2) 첫 화면 글자는 아래에서 올라오고 사진은 천천히 자리 잡음(브랜드 사이트 첫 화면과 같음) · 숫자는 처음부터 최종값(0부터 올라가던 효과는 뺌, QA 2026-11-08)
   3) 카드·섹션은 화면에 들어오면 나타남(data-r) · 누르면 살짝 눌림 · 데스크톱은 사진 확대
   4) 상세: 하단 바가 아래에서 올라오고, 지도는 역에서 코트까지 길이 그려진 뒤 핀이 떨어짐
   움직임 줄이기 설정이면 전부 끔(js-anim 없음 · 화면 전환 없음). */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.3s;animation-timing-function:cubic-bezier(.16,.84,.3,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.15s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.ls-card{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ls-card__ph{transition:transform .15s var(--ease)}
.ls-card__ph img{border-radius:16px;transition:transform .7s var(--ease)}
.ls-card:active .ls-card__ph,.ls-card.is-going .ls-card__ph{transform:scale(.97)}
/* 누른 카드는 다음 페이지가 뜰 때까지 눌린 채(app.js is-going, 대표 2026-11-08 '누르면 뻑뻑') */
.ls-card.is-going{opacity:.72;transition:opacity .12s}
.js-anim .ls-hero__h1,.js-anim .ls-hero__sub{animation:rise .8s var(--ease) both}
.js-anim .ls-hero__sub{animation-delay:.08s}
.js-anim .ls-hero__stats{transition-delay:.16s}
.js-anim .ls-hero__kv img{animation:settle 1.8s var(--ease) both}
.js-anim .ls-dock{animation:ls-dock .35s var(--ease) both}
@keyframes ls-dock{from{transform:translateY(100%)}to{transform:none}}
.js-anim .ls-map__line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease);transition-delay:calc(var(--i,0) * 120ms + .5s)}
.js-anim .ls-loc.in .ls-map__line{stroke-dashoffset:0}
.js-anim .ls-map__dot,.js-anim .ls-map__chip,.js-anim .ls-map__pin b{opacity:.001;transition:opacity .45s var(--ease);transition-delay:calc(var(--i,0) * 120ms + .2s)}
.js-anim .ls-map__pin i{opacity:.001;transform:translateY(-16px) rotate(-45deg);transition:opacity .4s var(--ease) .1s,transform .6s cubic-bezier(.34,1.56,.64,1) .1s}
.js-anim .ls-map__pin b{transition-delay:.3s}
.js-anim .ls-loc.in .ls-map__dot,.js-anim .ls-loc.in .ls-map__chip,.js-anim .ls-loc.in .ls-map__pin b{opacity:1}
.js-anim .ls-loc.in .ls-map__pin i{opacity:1;transform:rotate(-45deg)}
.p-lesson .ft{padding-bottom:calc(32px + 76px + env(safe-area-inset-bottom))}
.qr__note{font-size:15px;line-height:1.6;color:var(--ink);font-weight:600;margin-top:14px}

@media (min-width:600px){
 .row.ls-grid>*,.row.ls-story__list>*{flex-basis:46%}
}
@media (min-width:960px){
 .ls-h2{font-size:28px}
 /* 웹 첫 화면 사진 높이 = 매치 탭과 같게(대표 2026-11-10 '매치 사이즈에 다 맞춰줘 · 레슨이랑 코트 사진 높이 비율 다 달라서') — matches.css .mt-hero와 같은 식 */
 .ls-hero{align-items:center;min-height:clamp(440px,calc(100vh - 300px),560px)}
 .ls-hero__kv{position:absolute;inset:0}
 .ls-hero__kv img{object-position:30% 50%}
 .ls-hero__kv::after{background:linear-gradient(90deg,rgba(40,15,6,.72) 0%,rgba(40,15,6,.55) 34%,rgba(40,15,6,.2) 54%,rgba(40,15,6,0) 68%)}
 .ls-hero__in{margin:0 auto;padding-top:56px;padding-bottom:56px}
 .ls-hero__copy{max-width:560px;text-shadow:0 1px 16px rgba(40,15,6,.5)}
 .ls-end::before{background:linear-gradient(90deg,rgba(40,15,6,.84) 0%,rgba(40,15,6,.6) 45%,rgba(40,15,6,.3) 100%)}
  .ls-hero__h1{font-size:50px}
 .ls-hero__sub{font-size:19px;margin-top:16px}
 .ls-hero__stats{gap:0 28px;margin-top:24px}
 .ls-hero__stats li+li{padding-left:28px}
 .ls-hero__stats b{font-size:30px;line-height:38px}
 .ls-hero__stats span{font-size:15px;line-height:22px}
  .ls-story__list{grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
 .rv__in{display:grid;grid-template-columns:340px minmax(0,1fr);gap:80px;align-items:start}
 .rv__score{margin-top:28px}.rv__score strong{font-size:72px;line-height:76px}.rv__score div{font-size:15px}
 .rv__main{margin-top:0}
 .rv__list{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px;margin:0;padding:0;overflow:visible}
 .rv__card{padding:0;border:0;border-radius:0}
 .rv__text{font-size:16px;line-height:26px}
 .ls-list{padding:32px 0 80px}
 .ls-list__hd{flex-direction:row;align-items:baseline;justify-content:space-between;margin-bottom:24px}
 .ls-list__hd .ls-h2{font-size:22px}
 .ls-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 24px}
 .ls-faq__list{max-width:800px;margin-top:20px}
 /* detail: photos on top (one large + two small), copy left, sticky apply card right */
 .ls-d__top{padding-top:24px}
 /* every photo box is 13:12 like the app's photo asset (대표 2026-11-08 '사진은 항상 13:12'): one large + two small, each 13:12;
    the big photo keeps the list card's crop, so the photo tapped is the photo shown */
 .ls-gal{--gal-h:min(460px,46vw);display:grid;grid-template-columns:calc(var(--gal-h) * 13 / 12) calc((var(--gal-h) - 8px) / 2 * 13 / 12);grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;width:fit-content;height:var(--gal-h);overflow:hidden;border-radius:20px}
 .ls-gal:has(img:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;width:min(100%,calc(var(--gal-h) * 13 / 6 + 8px));height:auto} /* 두 장: 칸 폭 안에서 13:12 둘 (960–1052px에서 옆으로 밀리던 것, QA 2026-11-08) */
 .ls-gal img{width:100%;height:100%;min-height:0;aspect-ratio:auto;border-radius:0}
 .ls-gal img:first-child{grid-row:span 2}
 .ls-gal img:nth-child(n+4){display:none}
 .ls-gal:has(img:nth-child(2):last-child) img{grid-row:auto;height:auto;aspect-ratio:13/12}
 .ls-gal--one{grid-template-columns:calc(var(--gal-h) * 13 / 12)}
 .ls-d__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:start;padding-bottom:88px}
 .ls-d__area{margin-top:32px}
 .ls-d__t{font-size:30px}
 .ls-facts{justify-items:start}
 .ls-facts{padding:20px 8px}
 .ls-facts li{align-items:flex-start;text-align:left;padding:0 24px}
 .ls-facts b{font-size:20px;line-height:28px}
 .ls-rv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px;margin:0;padding:0;overflow:visible}
 .ls-gal img:first-child{border-radius:20px 0 0 20px}
 .ls-gal--one img:first-child{border-radius:20px}
 .ls-side{position:sticky;top:calc(var(--hd2) + 24px);margin-top:32px}
 .ls-side__box{padding:28px;border:1px solid var(--line);border-radius:20px;box-shadow:0 6px 24px rgba(0,0,0,.06)}
 .ls-side__price{font-size:16px;color:var(--sub)}
 .ls-side__price b{font-size:24px;color:var(--ink)}
 .ls-days--side{margin-top:16px}
 .ls-days--side li{min-height:40px}
 .ls-side__btn{width:100%;margin-top:20px}
 .ls-side__note{font-size:14px;line-height:20px;color:var(--mute);text-align:center;margin-top:12px}
 .p-lesson .ft{padding-bottom:32px}
}
@media (min-width:1200px){
 .ls-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 20px}
}
@media (hover:hover){
 .ls-card:hover .ls-card__where{text-decoration:underline;text-underline-offset:3px}
 .ls-card:hover .ls-card__ph img{transform:scale(1.04)}
 .ls-link--arrow:hover::after{transform:translateX(4px)}
  .ls-back:hover,.ls-link:hover{color:var(--ink)}
}
/* Other languages (2026-11-07 '13개 언어'): longer words than Korean. The level range ('Beginner - Advanced') may take
   two lines in its third of the box; a long single word breaks with a hyphen instead of pushing the page wider. */
html:not(:lang(ko)) .ls-facts b{white-space:normal;text-wrap:balance;font-size:16px;line-height:22px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
html:not(:lang(ko)) .ls-facts span{text-wrap:balance}
/* District names on the map in other languages: drawn like the names inside the Korean map picture (Pretendard 600, #9a9aa2). */
.ls-map__gu{font-family:var(--body);font-size:22px;font-weight:600;fill:#9a9aa2;text-anchor:middle}
html:not(:lang(ko)):not(:lang(ja)):not(:lang(zh-Hant)):not(:lang(zh-Hans)) .ls-map__gu{font-size:19px}
/* Phone bar: a longer button name ('Записаться в smaxh', 'In der App buchen') may take two lines rather than run off the screen. */
html:not(:lang(ko)) .ls-dock__price{min-width:0}
html:not(:lang(ko)) .ls-dock__btn{flex:0 1 auto;min-width:0;white-space:normal;text-align:center;line-height:20px}
/* Photo chip in longer languages ('Открытый корт · Прокат ракеток'): stays inside the photo and may take two lines. */
html:not(:lang(ko)) .ls-badge{max-width:calc(100% - 24px);border-radius:12px;text-wrap:balance}
/* At a glance in longer languages: the level range ('Новичок - Продвинутый') gets the widest third so words don't split. */
html:not(:lang(ko)) .ls-facts{grid-template-columns:minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.3fr)}
/* Korean app names inside another language ('신청은 앱에서 이렇게'): break between words, as in Korean. */
[lang="ko"]{word-break:keep-all}

/* '○○은 앱에서 이렇게' (코트·레슨 상세): 카드 틀은 styles.css .mt-step(매치와 같은 카드), 제목 바로 아래 카드 */
.ls-appsteps .ls-h3{margin-bottom:0}
/* 길찾기 두 개(구글 · 네이버, 대표 2026-11-08 '외국인은 네이버 지도 안 쓸 수 있으니'): 한 줄에 안 들어가면 아래로 */
.ls-maps{display:flex;flex-wrap:wrap;column-gap:24px}