/* OBLIQUE — landing, full redesign (docs/design-direction.md + the user's mockup, 2026-10-24).
   A contemporary fashion / beauty campaign tone: quiet, editorial, neutral. Thin high-contrast serif for display
   (Cormorant Garamond 300, OFL), Noto Serif KR for Korean headlines, Pretendard for text and spaced small caps.
   Images are placeholders (user decision): neutral photo-toned blocks with soft light, sized like the photographs.
   Mobile first; one breakpoint (768px). The DevTeam demo bar / footer notice keep the shared demo design. */

/* Only for the shared demo bar / notice (same as the other DevTeam demos). */
@font-face {
  font-family: "Archivo"; src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F;
}

:root {
  --bg: #efebe5;           /* warm greige paper */
  --panel: #f5f2ed;        /* copy panels */
  --deep: #e6e0d7;         /* footer */
  --ink: #25221f;
  --text: #4c4741;
  --muted: #8b857d;
  --line: #d5cfc6;
  --display: "Cormorant Garamond", "Noto Serif KR", "AppleMyungjo", serif;
  --serif-ko: "Noto Serif KR", "AppleMyungjo", serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --g: 20px;               /* page gutter (fluid from 768px) */
  --r: 14px;              /* corner radius of inset images (cards, bands, tiles) */
  --hh: 64px;              /* header height (92 from 768px) */
  --pad: var(--g);         /* shared demo bar / notice */
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.7 var(--sans); letter-spacing: -0.005em; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.hide-sm { display: none; }

/* ---------- DevTeam demo bar (shared demo design) ---------- */
.demo-bar { background: #131416; color: #c8ccd1; font-size: 12px; letter-spacing: 0; }
.demo-bar .wrap, .admin-demo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; width: 100%; margin-inline: auto; padding-inline: var(--pad); }
.demo-text { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding: 3px 0; line-height: 1.5; color: inherit; text-decoration: none; }
a.demo-text:hover { color: #ffffff; }
.demo-tag { display: inline-block; margin-right: 8px; padding: 0 7px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; font: 500 10px/16px "Archivo", var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; }
.demo-links { flex: none; display: flex; align-items: center; gap: 16px; margin: 0; }
.demo-links a, .demo-links button { position: relative; padding: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.35); background: none; font: inherit; color: #ffffff; text-decoration: none; white-space: nowrap; cursor: pointer; }
.demo-links a::before, .demo-links button::before { content: ""; position: absolute; inset: -8px; }
.demo-links a:hover, .demo-links button:hover { border-bottom-color: #ffffff; }
.demo-links [aria-current] { border-bottom-color: transparent; font-weight: 600; }
.demo-bar.is-live { background: #2b2e32; }
.demo-bar.is-live .demo-tag { background: #ffffff; border-color: #ffffff; color: #131416; letter-spacing: 0.04em; font-family: var(--sans); text-transform: none; }
/* ---------- DevTeam footer notice (shared demo design) ---------- */
.demo-notice { position: relative; padding: 32px 0 44px; border-top: 1px solid #dcdfe2; background: #f4f5f6; font-size: 12.5px; line-height: 1.7; color: #656a71; letter-spacing: -0.006em; }
.demo-notice .wrap { width: 100%; margin-inline: auto; padding-inline: var(--pad); }
.demo-notice .label { margin-bottom: 14px; font: 500 11px/1.4 "Archivo", var(--sans); font-stretch: 108%; letter-spacing: 0.22em; text-transform: uppercase; color: #131416; }
.demo-statement { max-width: 62em; margin-bottom: 20px; color: #2b2e32; font-size: 13px; }
.demo-actions { margin: -6px 0 22px; }
.demo-notice .btn-text { display: inline-flex; align-items: center; gap: 12px; font: 500 13.5px/1.2 var(--sans); color: #131416; text-decoration: none; padding: 6px 0; }
.demo-notice .btn-text::after { content: ""; width: 28px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M0 6h26M21 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M0 6h26M21 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.3s; }
.demo-notice .btn-text:hover::after { transform: translateX(5px); }
.maker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 24px; margin-bottom: 18px; }
.maker div { display: grid; gap: 2px; }
.maker .wide { grid-column: 1 / -1; }
.maker dt { font: 500 10px/1.4 "Archivo", var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #9ea3a9; }
.maker dd { margin: 0; color: #2b2e32; }
.contact-img { display: inline-block; height: 15px; width: auto; vertical-align: middle; }
.copyright { font-size: 12px; }

/* ---------- Shared bits ---------- */
.link-button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.nav-account form { display: inline; margin: 0; }
.lx-label { font: 500 11px/1.5 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.lx-body { font-size: 14.5px; line-height: 1.85; color: var(--text); }
.lx-ko-title { font: 400 28px/1.42 var(--serif-ko); letter-spacing: -0.03em; color: var(--ink); }
/* "자세히 보기 ›" — small caps over a hairline, the page's one link style */
.lx-more { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 150px; padding-bottom: 9px; border-bottom: 1px solid currentColor;
  font: 500 11.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.lx-more span { font-size: 15px; line-height: 0.6; transition: transform 0.3s var(--ease); }
.lx-more:hover span { transform: translateX(4px); }

/* Flash (reset / all spaces in use) and the expiry overlay */
.flash { margin: 0; padding: 12px var(--g); font-size: 14px; background: #e9e6dd; }
.flash .wrap { padding: 0; }
.flash strong { color: var(--ink); }
.flash-warn { background: #efe3d2; }
.reset-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(37, 34, 31, 0.5); }
.reset-overlay > div { max-width: 420px; padding: 28px; background: var(--panel); }
.reset-overlay .caption { font: 500 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.reset-overlay .h-ko { margin-top: 6px; font: 400 20px/1.4 var(--serif-ko); color: var(--ink); }
.reset-overlay p { margin-top: 10px; font-size: 14px; }
.reset-overlay .btn { display: inline-flex; margin-top: 18px; padding: 11px 22px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- Placeholders: neutral photo tones with soft light, sized like the photographs ---------- */
.lx-ph { position: relative; overflow: hidden; isolation: isolate; background-color: #b9aea2; }
/* a fine grain over the tones so they read as photographs, not gradients */
.lx-ph::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.32; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .46 0 0 0 0 .42 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lx-ph-label { position: absolute; z-index: 2; right: 14px; bottom: 12px; left: 14px; text-align: right; font: 500 9px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); pointer-events: none; }
.lx-ph-hero {
  background:
    radial-gradient(34% 60% at 68% 58%, rgba(66, 54, 46, 0.5), rgba(66, 54, 46, 0) 72%),
    radial-gradient(18% 30% at 62% 30%, rgba(222, 204, 188, 0.5), rgba(222, 204, 188, 0) 70%),
    radial-gradient(70% 90% at 6% 0%, rgba(238, 230, 220, 0.5), rgba(238, 230, 220, 0) 62%),
    linear-gradient(180deg, #a69a8c 0%, #918578 55%, #7b7066 100%);
}
.lx-ph-room {
  background:
    radial-gradient(55% 75% at 16% 26%, rgba(255, 251, 244, 0.85), rgba(255, 251, 244, 0) 70%),
    radial-gradient(42% 20% at 54% 78%, rgba(120, 104, 90, 0.3), rgba(120, 104, 90, 0) 72%),
    radial-gradient(30% 50% at 88% 40%, rgba(176, 162, 146, 0.35), rgba(176, 162, 146, 0) 70%),
    linear-gradient(180deg, #e6dfd5 0%, #d9d0c4 58%, #c9bdaf 66%, #d2c8bb 100%);
}
.lx-ph-skin {
  background:
    radial-gradient(44% 62% at 60% 42%, rgba(205, 172, 146, 0.9), rgba(160, 128, 104, 0) 72%),
    radial-gradient(28% 40% at 24% 72%, rgba(74, 58, 48, 0.42), rgba(74, 58, 48, 0) 70%),
    radial-gradient(60% 50% at 90% 10%, rgba(232, 220, 206, 0.35), rgba(232, 220, 206, 0) 70%),
    linear-gradient(140deg, #b49c88 0%, #937a68 58%, #75604f 100%);
}
.lx-ph-obj1 { background: radial-gradient(27% 24% at 50% 44%, #ddd6cc 0, #c2b8ab 64%, rgba(194, 184, 171, 0) 66%), linear-gradient(180deg, #cec6bb 0%, #c1b8ac 70%, #ada295 70.4%, #b9afa3 100%); }
.lx-ph-obj2 { background: radial-gradient(50% 40% at 72% 20%, rgba(250, 247, 242, 0.7), rgba(250, 247, 242, 0) 70%), radial-gradient(60% 22% at 46% 70%, rgba(150, 138, 124, 0.45), rgba(150, 138, 124, 0) 72%), linear-gradient(180deg, #d7cfc4 0%, #c0b6aa 100%); }
.lx-ph-obj3 { background: radial-gradient(28% 56% at 56% 56%, rgba(112, 94, 80, 0.55), rgba(112, 94, 80, 0) 72%), radial-gradient(50% 40% at 20% 10%, rgba(240, 232, 222, 0.5), rgba(240, 232, 222, 0) 70%), linear-gradient(180deg, #c4b8aa 0%, #a19486 100%); }
.lx-ph-detail { background: radial-gradient(40% 50% at 46% 42%, rgba(222, 196, 172, 0.85), rgba(222, 196, 172, 0) 70%), radial-gradient(50% 30% at 60% 88%, rgba(70, 58, 50, 0.4), rgba(70, 58, 50, 0) 70%), linear-gradient(170deg, #c4b2a2 0%, #9a8473 100%); }
.lx-ph-m1 { background: radial-gradient(50% 60% at 30% 25%, rgba(250, 244, 236, 0.65), rgba(250, 244, 236, 0) 70%), linear-gradient(180deg, #d3cabe 0%, #b4a798 100%); }
.lx-ph-m2 { background: radial-gradient(30% 50% at 60% 60%, rgba(72, 60, 52, 0.45), rgba(72, 60, 52, 0) 72%), linear-gradient(180deg, #a99c8e 0%, #857869 100%); }
.lx-ph-m3 { background: radial-gradient(60% 40% at 50% 90%, rgba(120, 104, 90, 0.35), rgba(120, 104, 90, 0) 70%), linear-gradient(180deg, #e1dad0 0%, #c8bdb0 100%); }
.lx-ph-m4 { background: radial-gradient(40% 50% at 40% 40%, rgba(214, 184, 160, 0.7), rgba(214, 184, 160, 0) 70%), linear-gradient(160deg, #b09888 0%, #8a7465 100%); }
.lx-ph-m5 { background: radial-gradient(50% 60% at 70% 20%, rgba(255, 252, 247, 0.7), rgba(255, 252, 247, 0) 70%), linear-gradient(180deg, #dcd5cb 0%, #beb4a7 100%); }
.lx-ph-room .lx-ph-label, .lx-ph-obj1 .lx-ph-label, .lx-ph-obj2 .lx-ph-label, .lx-ph-m1 .lx-ph-label, .lx-ph-m3 .lx-ph-label, .lx-ph-m5 .lx-ph-label { color: rgba(37, 34, 31, 0.38); }
.lx-ph-loft { background: radial-gradient(40% 60% at 74% 20%, rgba(250, 246, 240, 0.65), rgba(250, 246, 240, 0) 70%), radial-gradient(50% 20% at 40% 80%, rgba(96, 86, 76, 0.32), rgba(96, 86, 76, 0) 72%), linear-gradient(180deg, #cfc7bc 0%, #bdb3a6 60%, #aea394 64%, #b8aea1 100%); }
.lx-ph-e1 { background: radial-gradient(60% 18% at 50% 70%, rgba(110, 98, 86, 0.38), rgba(110, 98, 86, 0) 72%), linear-gradient(180deg, #e2dbd1 0%, #d3cabe 100%); }
.lx-ph-e2 { background: linear-gradient(90deg, rgba(120, 108, 96, 0) 0 30%, rgba(120, 108, 96, 0.22) 30% 31%, rgba(120, 108, 96, 0) 31% 69%, rgba(120, 108, 96, 0.22) 69% 70%, rgba(120, 108, 96, 0) 70%), linear-gradient(180deg, #dcd5cb 0%, #cbc1b4 100%); }
.lx-ph-e3 { background: radial-gradient(26% 20% at 50% 62%, rgba(92, 82, 72, 0.4), rgba(92, 82, 72, 0) 72%), linear-gradient(180deg, #e6e0d7 0%, #d6cdc1 100%); }
.lx-ph-e4 { background: radial-gradient(16% 13% at 40% 60%, rgba(238, 232, 224, 0.95), rgba(238, 232, 224, 0) 72%), radial-gradient(22% 8% at 62% 72%, rgba(110, 98, 86, 0.32), rgba(110, 98, 86, 0) 72%), linear-gradient(180deg, #d9d1c6 0%, #c8bdaf 100%); }
/* people: one calm family of tones so the feed does not read as coloured cards */
.lx-ph-n1 { background: radial-gradient(50% 60% at 32% 26%, rgba(250, 246, 240, 0.6), rgba(250, 246, 240, 0) 70%), linear-gradient(180deg, #d9d2c8 0%, #c6bcaf 100%); }
.lx-ph-n2 { background: radial-gradient(30% 50% at 58% 58%, rgba(110, 100, 90, 0.3), rgba(110, 100, 90, 0) 72%), linear-gradient(180deg, #cec6bb 0%, #bbb1a4 100%); }
.lx-ph-n3 { background: radial-gradient(60% 40% at 50% 90%, rgba(130, 118, 104, 0.28), rgba(130, 118, 104, 0) 70%), linear-gradient(180deg, #e0d9cf 0%, #cdc4b8 100%); }
.lx-ph-n4 { background: radial-gradient(36% 46% at 42% 42%, rgba(196, 184, 170, 0.6), rgba(196, 184, 170, 0) 70%), linear-gradient(170deg, #cbc2b6 0%, #b5aa9c 100%); }
.lx-ph-n5 { background: radial-gradient(50% 60% at 70% 20%, rgba(252, 249, 244, 0.65), rgba(252, 249, 244, 0) 70%), linear-gradient(180deg, #dbd4ca 0%, #c4bbae 100%); }
.lx-ph-n1 .lx-ph-label, .lx-ph-n3 .lx-ph-label, .lx-ph-n5 .lx-ph-label, .lx-ph-e1 .lx-ph-label, .lx-ph-e2 .lx-ph-label, .lx-ph-e3 .lx-ph-label, .lx-ph-e4 .lx-ph-label, .lx-ph-loft .lx-ph-label { color: rgba(37, 34, 31, 0.38); }

/* Home: the header sits over the campaign photograph */
.lx-home .lx-header { margin-bottom: calc(-1 * var(--hh)); color: #fff; }
.lx-home .lx-book:hover { background: #fff; border-color: #fff; color: var(--ink) !important; }

/* ---------- Hero: full-bleed campaign, OBLIQUE PILATES in a thin serif ---------- */
.lx-hero { display: grid; grid-template-rows: auto 1fr auto auto; gap: 28px; height: max(600px, calc(100svh - var(--demo-h, 34px))); padding: calc(var(--hh) + 32px) var(--g) 36px; color: #fff; isolation: isolate; }
.lx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(32, 27, 23, 0.42), rgba(32, 27, 23, 0) 46%), linear-gradient(to bottom, rgba(32, 27, 23, 0.26), rgba(32, 27, 23, 0) 26%); }
.lx-hero > .lx-ph-label { top: auto; bottom: 12px; }
.lx-hero-kicker { font: 500 11px/1.95 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; }
.lx-hero-title { grid-row: 3; margin-left: -0.04em; font: 300 clamp(58px, 11.6vw, 176px)/0.86 var(--display); letter-spacing: -0.012em; text-transform: uppercase; }
.lx-hero-aside { grid-row: 4; display: grid; justify-items: start; gap: 6px; }
.lx-hero-line { font: 500 11.5px/1.8 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; }
.lx-hero-ko { font: 400 14px/1.6 var(--serif-ko); opacity: 0.88; }
.lx-hero .lx-more { margin-top: 16px; color: #fff; }

/* ---------- Studio: the place — two studio cards (Forma-like: rounded image, name and a CTA on it), the room ---------- */
.lx-st { padding: 72px var(--g) 0; }
.lx-st-head { display: grid; justify-items: start; gap: 22px; margin-bottom: 28px; }
.lx-st-head .lx-label { margin-bottom: 16px; }
.lx-st-head .lx-ko-title { margin-bottom: 14px; }
.lx-st-head .lx-body { max-width: 34em; }
.lx-places { display: grid; gap: 12px; }
.lx-place { display: flex; align-items: flex-end; aspect-ratio: 4 / 3; border-radius: var(--r); color: #fff; }
.lx-place::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(32, 28, 24, 0.55), rgba(32, 28, 24, 0) 58%); }
.lx-place > .lx-ph-label, .lx-room-card > .lx-ph-label { top: 14px; bottom: auto; }
.lx-place-body { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; width: 100%; padding: 20px; }
.lx-place-name { display: flex; align-items: baseline; gap: 10px; margin: 0; font: italic 300 40px/1 var(--display); letter-spacing: 0; }
.lx-place-name span { font: 400 12px/1 var(--serif-ko); font-style: normal; opacity: 0.8; }
.lx-place-meta { margin: 8px 0 0; font-size: 12.5px; opacity: 0.85; }
.lx-place-cta { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 999px; font: 500 12px/1 var(--sans); letter-spacing: 0.06em; color: #fff; text-decoration: none; white-space: nowrap; transition: background 0.25s, color 0.25s; }
.lx-place-cta:hover { background: #fff; color: var(--ink); }
.lx-room { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--ink); }
.lx-room > .lx-label { margin-bottom: 20px; color: var(--ink); }
.lx-room-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.lx-room-list li { display: grid; align-content: start; gap: 6px; }
.lx-room-card { display: flex; align-items: flex-end; aspect-ratio: 4 / 3; margin-bottom: 8px; padding: 14px; border-radius: var(--r); color: #fff; }
.lx-room-card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(32, 28, 24, 0.45), rgba(32, 28, 24, 0) 55%); }
.lx-room-card strong { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: italic 300 22px/1 var(--display); white-space: nowrap; }
.lx-room-card strong small { font: 400 11px/1 var(--serif-ko); font-style: normal; opacity: 0.85; }
.lx-room-line { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text); }
.lx-room-where { font: 500 10px/1.6 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lx-before { display: grid; gap: 14px; margin-top: 40px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lx-before ul { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13.5px; color: var(--ink); }


/* ---------- Online: full-bleed band with large type, then the day's rhythm ---------- */
.lx-online { margin-top: 96px; }
.lx-online-band, .lx-band { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; height: 440px; padding: 0 var(--g) 36px; color: #fff; }
.lx-online-band::after, .lx-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(32, 27, 23, 0.4), rgba(32, 27, 23, 0) 55%); }
.lx-online-band .lx-label, .lx-band .lx-label { color: rgba(255, 255, 255, 0.8); }
.lx-online-band > .lx-ph-label, .lx-band > .lx-ph-label { bottom: 12px; }
.lx-online-title, .lx-band-title { margin: 0; font: 300 64px/0.9 var(--display); letter-spacing: -0.01em; }
.lx-online-info, .lx-info { display: grid; gap: 40px; padding: 48px var(--g) 0; }
.lx-online-lead, .lx-info-lead { display: grid; justify-items: start; gap: 28px; }
.lx-ko-lead { font: 400 20px/1.6 var(--serif-ko); letter-spacing: -0.02em; color: var(--ink); }
.lx-rhythm { display: grid; border-top: 1px solid var(--line); }
.lx-rhythm li { border-bottom: 1px solid var(--line); }
.lx-rhythm a, .lx-rhythm-i { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "n t" "n f"; align-items: baseline; column-gap: 16px; padding: 18px 0; color: var(--ink); text-decoration: none; }
.lx-rhythm-n { grid-area: n; font: 300 46px/1 var(--display); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.lx-rhythm-n small { margin-left: 4px; font: 500 10px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lx-rhythm-t { grid-area: t; font-size: 14.5px; }
.lx-rhythm-f { grid-area: f; font: 500 10.5px/1.6 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ---------- Shop: a campaign image beside the objects ---------- */
.lx-objs { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 12px; padding-inline: var(--g); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--g); scrollbar-width: none; }
.lx-objs::-webkit-scrollbar { display: none; }
.lx-obj { display: grid; align-content: start; justify-items: start; gap: 10px; scroll-snap-align: start; }
.lx-obj-img { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; }
.lx-obj-name { margin: 4px 0 0; font-size: 14px; color: var(--ink); }
.lx-obj-go { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; font: 500 11.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: background 0.25s, color 0.25s; }
.lx-obj-go:hover { background: var(--ink); color: var(--bg); }

/* ---------- In practice: people and moments, staggered ---------- */
.lx-practice { margin-top: 112px; padding-bottom: 96px; }
.lx-practice-head { display: grid; justify-items: start; gap: 14px; padding-inline: var(--g); margin-bottom: 28px; }
.lx-practice-head .lx-label { margin-bottom: 12px; }
.lx-practice-title { font: 300 34px/1 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.lx-practice-row { display: flex; gap: 10px; margin: 0; padding: 0 var(--g); list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-width: none; }
.lx-practice-row::-webkit-scrollbar { display: none; }
.lx-practice-row li { flex: none; scroll-snap-align: start; }
.lx-practice-row figure { display: grid; gap: 10px; margin: 0; }
.lx-practice-row .lx-ph { display: block; height: 300px; aspect-ratio: 3 / 4; }
.lx-practice-row .is-11 .lx-ph { aspect-ratio: 1; }
.lx-practice-row .is-45 .lx-ph { aspect-ratio: 4 / 5; }
.lx-practice-row .is-54 .lx-ph { aspect-ratio: 5 / 4; }
.lx-practice-row figcaption { font-size: 12.5px; color: var(--muted); }
.lx-practice-row figcaption strong { margin-right: 6px; font-weight: 500; color: var(--ink); }

/* ---------- Closing line ---------- */
.lx-closing { display: grid; gap: 22px; margin: 0 var(--g); padding: 32px 0 72px; border-top: 1px solid var(--line); }
.lx-closing-line { font: 400 15px/1.6 var(--serif-ko); color: var(--text); }
.lx-closing-line em { display: block; margin-bottom: 4px; font: italic 300 26px/1.2 var(--display); color: var(--ink); }
.lx-closing-links { display: flex; flex-wrap: wrap; gap: 20px 36px; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  /* one centred column: the gutter grows so text and most images stay within 1280px (user: aesthetics first) */
  :root { --g: max(clamp(32px, 4.4vw, 80px), calc((100vw - 1280px) / 2)); --hh: 92px; }
  .hide-sm { display: inline; }


  .lx-hero { grid-template-rows: auto 1fr auto; padding: calc(var(--hh) + 56px) var(--g) 48px; }
  .lx-hero-aside { grid-row: auto; position: absolute; top: 46%; right: var(--g); width: min(300px, 24vw); }
  .lx-hero-line { font-size: 12px; }
  .lx-hero-ko { font-size: 15px; }

  .lx-ko-title { font-size: clamp(30px, 2.6vw, 48px); }
  .lx-body { font-size: 15.5px; }

  .lx-st { padding-top: clamp(88px, 7vw, 128px); }
  .lx-st-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; margin-bottom: 36px; }
  .lx-st-head .lx-label { margin-bottom: 22px; }
  .lx-places { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .lx-place { aspect-ratio: 3 / 2; }
  .lx-place-body { padding: 28px 32px; }
  .lx-place-name { font-size: clamp(42px, 3.4vw, 56px); }
  .lx-room { margin-top: clamp(64px, 5.4vw, 96px); padding-top: 24px; }
  .lx-room-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .lx-room-card strong { font-size: 24px; }
  .lx-before { grid-template-columns: 180px minmax(0, 1fr); align-items: center; margin-top: clamp(40px, 3.4vw, 56px); }

  /* the person rises over the space's top-left corner */

  .lx-online { margin-top: clamp(100px, 8vw, 160px); }
  .lx-online-band, .lx-band { height: clamp(400px, 34vw, 640px); padding: 0 var(--g) clamp(44px, 4vw, 76px); gap: 20px; }
  .lx-online-title, .lx-band-title { font-size: clamp(72px, 7.4vw, 140px); }
  .lx-online-info, .lx-info { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; padding-top: clamp(56px, 5vw, 96px); }
  .lx-online-lead, .lx-info-lead { grid-column: 1 / span 4; gap: 36px; }
  .lx-ko-lead { font-size: clamp(20px, 1.6vw, 28px); }
  .lx-rhythm { grid-column: 6 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .lx-rhythm li { border-bottom: 0; border-top: 1px solid var(--ink); }
  .lx-rhythm li + li { margin-left: 24px; }
  .lx-rhythm a, .lx-rhythm-i { grid-template-columns: 1fr; grid-template-areas: "n" "t" "f"; row-gap: 10px; padding: 22px 0 0; }
  .lx-rhythm-n { font-size: clamp(56px, 5vw, 92px); margin-bottom: 14px; }

  .lx-shop-cap { grid-template-columns: 1fr auto; font-size: 13px; }

  .lx-practice { margin-top: clamp(100px, 8vw, 160px); padding-bottom: clamp(96px, 8vw, 150px); }
  .lx-practice-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-bottom: 48px; }
  .lx-practice-head .lx-body { grid-column: 1; grid-row: 2; }
  .lx-practice-head .lx-more { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .lx-practice-title { font-size: clamp(36px, 2.9vw, 52px); }
  .lx-practice-row { gap: clamp(14px, 1.4vw, 24px); }
  .lx-practice-row .lx-ph { height: clamp(340px, 30vw, 480px); }
  .lx-practice-head .lx-rail-ctl { grid-column: 2; grid-row: 1 / 3; align-self: end; }

  .lx-closing { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: 40px 0 clamp(88px, 7vw, 130px); }
  .lx-closing-line em { display: inline; margin: 0 18px 0 0; font-size: clamp(26px, 2vw, 34px); }

}

/* ---------- Shop: a shelf that opens with a campaign tile, then the edit (a program and the objects it uses) ---------- */
.lx-sa { margin-top: 96px; }
.lx-sa-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; padding-inline: var(--g); margin-bottom: 28px; }
.lx-sa-head .lx-label { margin-bottom: 18px; }
.lx-program { display: grid; margin-top: 72px; }
.lx-program-img { aspect-ratio: 16 / 10; }
.lx-program-panel { display: grid; justify-items: start; align-content: center; padding: 36px var(--g) 40px; background: var(--panel); }
.lx-program-panel .lx-label { margin-bottom: 14px; color: var(--ink); }
.lx-program-title { margin: 0 0 14px; font: italic 300 36px/1 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.lx-program-meta { margin: 10px 0 22px; font: 500 10.5px/1.6 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

@media (min-width: 768px) {
  .lx-sa { margin-top: clamp(100px, 8vw, 160px); }
  .lx-sa-head { margin-bottom: 32px; }
  .lx-sa-head .lx-ko-title { font-size: clamp(26px, 2vw, 36px); }
  .lx-sa-head .lx-label { margin-bottom: 20px; }
  .lx-objs { grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-columns: auto; gap: 16px; overflow: visible; }
  .lx-program { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: clamp(80px, 7vw, 130px) var(--g) 0; }
  .lx-program-img { aspect-ratio: auto; min-height: clamp(300px, 22vw, 400px); }
  .lx-program-panel { padding: clamp(40px, 3.4vw, 60px) clamp(40px, 4.6vw, 80px); }
  .lx-program-title { font-size: clamp(40px, 3.2vw, 56px); }
  .lx-program-panel .lx-body { max-width: 34em; }

}

/* Inset images share one corner radius (full-bleed hero and Online band stay square). */
@media (min-width: 768px) {
  .lx-program { border-radius: var(--r); overflow: hidden; }
}

/* Facts (label over value), shared by the landing and the sub-pages */
.lx-facts { display: grid; gap: 12px; width: 100%; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.lx-facts div { display: grid; gap: 4px; }
.lx-facts dt { font: 500 10px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lx-facts dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }

/* ---------- Brand sub-pages (/studio, /studio/passes): same column, type and cards as the landing ---------- */
.lx-page { padding: 56px var(--g) 0; }
.lx-page-narrow { padding-top: 24px; }
.lx-page-sec { margin-bottom: 26px; }
.lx-page-sec .lx-label { margin-bottom: 14px; }
.lx-page-sec .lx-body { max-width: 36em; margin-top: 12px; }
.lx-page-sec-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.lx-page-sub { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.lx-page-note { margin-top: 18px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.lx-crumbs { display: flex; gap: 8px; margin-bottom: 26px; font-size: 12.5px; color: var(--muted); }
.lx-crumbs a { color: var(--muted); text-decoration: none; }
.lx-crumbs a:hover { color: var(--ink); }
.lx-page-head { display: grid; gap: 32px; padding-top: 32px; }
.lx-page-copy { display: grid; justify-items: start; align-content: center; }
.lx-page-copy .lx-label { margin-bottom: 18px; }
.lx-page-title { margin: 0 0 18px; font: 400 32px/1.35 var(--serif-ko); letter-spacing: -0.03em; color: var(--ink); }
.lx-page-copy .lx-body { max-width: 30em; }
.lx-page-img { aspect-ratio: 4 / 3; border-radius: var(--r); }
.lx-steps { display: grid; gap: 0; width: 100%; max-width: 30em; margin: 26px 0 28px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lx-steps li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.lx-steps b { font: 500 10.5px/1 var(--sans); letter-spacing: 0.12em; color: var(--muted); }
.lx-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 48px; padding: 0 24px; white-space: nowrap; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); font: 500 12.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg); text-decoration: none; cursor: pointer; transition: background 0.25s, color 0.25s; }
.lx-btn:hover { background: #3c3834; }
.lx-btn.is-line { background: transparent; color: var(--ink); }
.lx-btn.is-line:hover { background: var(--ink); color: var(--bg); }
/* session cards */
.lx-kinds { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lx-kind { display: grid; align-content: start; gap: 12px; padding: 26px 24px 22px; border-radius: var(--r); background: var(--panel); box-shadow: 0 1px 0 rgba(37, 34, 31, 0.04), 0 18px 40px -32px rgba(37, 34, 31, 0.35); }
.lx-kind-name { display: flex; align-items: baseline; gap: 10px; margin: 0; font: italic 300 34px/1 var(--display); color: var(--ink); }
.lx-kind-name span { font: 400 12px/1 var(--serif-ko); font-style: normal; color: var(--muted); }
.lx-kind .lx-facts { margin-top: 6px; }
.lx-kind-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.lx-kind-foot a { display: inline-flex; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.lx-kind-foot a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
/* studios with details */
.lx-places-detail { margin: 0; padding: 0; list-style: none; }
.lx-places-detail > li { display: grid; align-content: start; gap: 14px; }
.lx-place-mood { margin-top: 4px; max-width: 34em; }
/* instructors */
.lx-team { display: grid; grid-auto-flow: column; grid-auto-columns: 58%; gap: 12px; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.lx-team::-webkit-scrollbar { display: none; }
.lx-team li { display: grid; align-content: start; gap: 6px; scroll-snap-align: start; }
.lx-team .lx-ph { display: block; aspect-ratio: 3 / 4; margin-bottom: 8px; border-radius: 10px; }
.lx-team h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 400 17px/1.3 var(--serif-ko); color: var(--ink); }
.lx-team h3 small { font: italic 300 15px/1 var(--display); color: var(--muted); }
.lx-team-meta { font: 500 10px/1.6 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.lx-team-bio { font-size: 13px; line-height: 1.7; color: var(--text); }
/* FAQ */
.lx-faq { padding-bottom: 96px; }
.lx-faq-list { border-top: 1px solid var(--ink); }
.lx-faq-list details { border-bottom: 1px solid var(--line); }
.lx-faq-list summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; list-style: none; font-size: 15px; color: var(--ink); cursor: pointer; }
.lx-faq-list summary::-webkit-details-marker { display: none; }
.lx-faq-list summary::after { content: "+"; font: 300 18px/1 var(--sans); }
.lx-faq-list details[open] summary::after { content: "−"; }
.lx-faq-list p { margin: 0 0 18px; max-width: 46em; font-size: 14px; line-height: 1.8; color: var(--text); }
/* action screens: the state bar (who is looking → first thing to do) */
.lx-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin: 0 0 28px; padding: 18px 20px; border-radius: 12px; background: var(--panel); }
.lx-state strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 500; color: var(--ink); }
.lx-state > div > span { font-size: 13px; color: var(--text); }
.lx-state.is-ready { background: transparent; padding: 14px 0; border-radius: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lx-state.is-ready strong { display: inline; margin: 0 14px 0 0; font: 500 10.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lx-state-passes { display: inline-flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13.5px; color: var(--text); }
.lx-state-passes b { font-weight: 500; color: var(--ink); }
.lx-state-passes .is-low { color: #7d6447; }
.lx-state .lx-actions { margin: 0; }
/* schedule */
.lx-sch-date { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font: 400 20px/1.3 var(--serif-ko); color: var(--ink); }
.lx-sch-date small { font: 400 12.5px/1 var(--sans); color: var(--muted); }
.lx-sch-note { margin-bottom: 96px; }

/* pricing (/studio/passes) */
.lx-notice { margin: 0 0 22px; padding: 14px 16px; border-radius: 10px; background: var(--panel); font-size: 13.5px; color: var(--ink); }
.lx-notice.is-ok { background: #e7e1d6; }
.lx-notice a { margin-left: 6px; color: var(--ink); }
.lx-kind-note { margin: -8px 0 24px; font-size: 13px; color: var(--text); }
.lx-kind-note b { margin-right: 8px; font-weight: 500; color: var(--ink); }
.lx-kind-note a { color: var(--ink); text-underline-offset: 0.3em; }
.lx-own { margin: 0 0 32px; }
.lx-own > .lx-label { margin: 0 0 14px; }
.lx-own-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lx-own-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: stretch; padding: 12px; border-radius: 14px; background: var(--panel); color: inherit; text-decoration: none; box-shadow: 0 14px 34px -30px rgba(37, 34, 31, 0.4); transition: box-shadow 0.25s, transform 0.25s; }
.lx-own-card:hover { box-shadow: 0 18px 40px -26px rgba(37, 34, 31, 0.45); transform: translateY(-1px); }
.lx-own-card.is-off { opacity: 0.6; }
.lx-own-img { display: block; min-height: 92px; border-radius: 10px; }
.lx-own-body { display: grid; align-content: center; gap: 5px; min-width: 0; padding: 2px 4px 2px 0; }
.lx-own-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lx-own-top strong { font-size: 14px; font-weight: 500; color: var(--ink); }
.lx-own-top em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #e9dccb; color: #6b5640; }
.lx-own-n { font: 300 32px/1 var(--display); color: var(--ink); font-variant-numeric: lining-nums; }
.lx-own-n small { margin-left: 6px; font: 400 12px/1 var(--sans); color: var(--muted); }
.lx-own-bar { position: relative; display: block; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.lx-own-bar span { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.lx-own-card.is-low .lx-own-bar span { background: #9a7d5c; }
.lx-own-bar span[data-w="0"] { width: 0%; } .lx-own-bar span[data-w="5"] { width: 5%; } .lx-own-bar span[data-w="10"] { width: 10%; } .lx-own-bar span[data-w="15"] { width: 15%; } .lx-own-bar span[data-w="20"] { width: 20%; } .lx-own-bar span[data-w="25"] { width: 25%; } .lx-own-bar span[data-w="30"] { width: 30%; } .lx-own-bar span[data-w="35"] { width: 35%; } .lx-own-bar span[data-w="40"] { width: 40%; } .lx-own-bar span[data-w="45"] { width: 45%; } .lx-own-bar span[data-w="50"] { width: 50%; } .lx-own-bar span[data-w="55"] { width: 55%; } .lx-own-bar span[data-w="60"] { width: 60%; } .lx-own-bar span[data-w="65"] { width: 65%; } .lx-own-bar span[data-w="70"] { width: 70%; } .lx-own-bar span[data-w="75"] { width: 75%; } .lx-own-bar span[data-w="80"] { width: 80%; } .lx-own-bar span[data-w="85"] { width: 85%; } .lx-own-bar span[data-w="90"] { width: 90%; } .lx-own-bar span[data-w="95"] { width: 95%; } .lx-own-bar span[data-w="100"] { width: 100%; }
.lx-own-meta { font-size: 12px; color: var(--muted); }
.lx-own-go { display: inline-flex; gap: 8px; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.lx-own-card:hover .lx-own-go { text-decoration: underline; text-underline-offset: 0.3em; }
.lx-own-empty { margin: 0 0 28px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text); }
.lx-price-agree { margin-bottom: 18px; }
.lx-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.6; color: var(--text); cursor: pointer; }
.lx-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.lx-price-cols { display: grid; gap: 14px; }
.lx-price-col { display: grid; align-content: start; padding: 26px 22px 10px; border-radius: var(--r); background: var(--panel); box-shadow: 0 18px 40px -34px rgba(37, 34, 31, 0.35); }
.lx-price-col.is-focus { box-shadow: inset 0 0 0 1px var(--ink); }
.lx-price-head { padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.lx-price-head .lx-label { margin-bottom: 10px; }
.lx-price-name { margin: 0; font: italic 300 32px/1.05 var(--display); color: var(--ink); }
.lx-price-sub { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.lx-price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.lx-price-row:last-child { border-bottom: 0; }
.lx-price-pass { grid-column: 1; margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.lx-price-pass small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--text); }
.lx-price-amount { grid-column: 1; margin: 6px 0 0; font: 300 30px/1 var(--display); color: var(--ink); font-variant-numeric: lining-nums; }
.lx-price-meta { grid-column: 1; margin: 0; font-size: 12px; color: var(--muted); }
.lx-price-btn { grid-column: 2; grid-row: 1 / span 3; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; font: 500 12px/1 var(--sans); letter-spacing: 0.06em; color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.25s, color 0.25s; }
.lx-price-btn:hover { background: var(--ink); color: var(--bg); }
.lx-price-note { margin-bottom: 96px; }

@media (min-width: 768px) {
  .lx-page { padding-top: clamp(80px, 6.4vw, 120px); }
  .lx-page-narrow { padding-top: 40px; }
  .lx-page-sec { margin-bottom: 36px; }
  .lx-page-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(40px, 5vw, 96px); padding-top: 48px; }
  .lx-page-title { font-size: clamp(36px, 3.2vw, 54px); margin-bottom: 22px; }
  .lx-page-img { aspect-ratio: 5 / 4; }
  .lx-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .lx-kind { padding: 32px 30px 26px; }
  .lx-facts { column-gap: clamp(20px, 2vw, 36px); }
  .lx-kind .lx-facts { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; }
  .lx-places-detail .lx-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .lx-team { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; gap: 16px; overflow: visible; }
  .lx-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; padding-bottom: clamp(110px, 9vw, 160px); }
  .lx-sch-note { margin-bottom: clamp(110px, 9vw, 160px); }
  .lx-own-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .lx-own-card { grid-template-columns: 104px minmax(0, 1fr); }
  .lx-price-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .lx-price-col { padding: 32px 28px 12px; }
  .lx-price-name { font-size: 38px; }
  .lx-price-note { margin-bottom: clamp(110px, 9vw, 160px); }
}

/* ---------- My Account (one account: Studio passes · Online membership · Shop orders) ---------- */
.lx-acct { padding-bottom: 96px; }
.lx-acct-head { margin-bottom: 22px; }
.lx-acct-head .lx-label { margin-bottom: 14px; }
.lx-acct-mail { margin-top: 10px; font-size: 13px; color: var(--muted); }
.lx-acct-tabs { display: flex; gap: 6px; margin: 0 0 28px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.lx-acct-tabs::-webkit-scrollbar { display: none; }
.lx-acct-tabs a { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--text); text-decoration: none; }
.lx-acct-tabs a:hover { border-color: var(--muted); }
.lx-acct-tabs a[aria-current] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.lx-svcs { display: grid; gap: 14px; }
.lx-svc { display: grid; align-content: start; gap: 10px; padding: 24px 22px; border-radius: var(--r); background: var(--panel); box-shadow: 0 18px 40px -34px rgba(37, 34, 31, 0.35); }
.lx-svc-title { margin: 2px 0 0; font: 400 22px/1.4 var(--serif-ko); letter-spacing: -0.02em; color: var(--ink); }
.lx-svc-title a { color: inherit; }
.lx-svc-sub { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text); }
.lx-svc-sub a { color: var(--ink); }
.lx-svc-line { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text); }
.lx-svc-line b { font-weight: 500; color: var(--ink); }
.lx-svc-line .is-low { color: #7d6447; }
.lx-svc .lx-actions { align-items: center; margin-top: 10px; }
.lx-svc .lx-btn { height: 42px; padding: 0 20px; }
/* ── Account overview cards ── (user 2026-10-25) equal-height cards, one row of pills pinned to the bottom edge;
   Online = a continue-watching video card, Shop = a familiar order row (thumbnail · item 외 n건 · date · total). */
.lx-svc { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.lx-svc > .lx-svc-act { margin-top: auto; padding-top: 22px; }
.lx-svc-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.lx-svc-note a { color: var(--text); }
.lx-cont { display: grid; gap: 12px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.lx-cont-img { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; }
.lx-cont-play { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; padding-left: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.88); color: var(--ink); box-shadow: 0 6px 18px -8px rgba(37, 34, 31, 0.5); transition: transform 0.2s; }
.lx-cont:hover .lx-cont-play { transform: scale(1.06); }
.lx-cont-dur { position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(29, 27, 25, 0.62); font: 500 11px/1.4 var(--sans); color: #fff; }
.lx-cont-body { display: grid; gap: 6px; }
.lx-cont-tag { font: 500 10px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lx-cont-title { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.lx-cont:hover .lx-cont-title { text-decoration: underline; text-underline-offset: 0.3em; }
.lx-cont .progress { margin-top: 6px; }
.lx-cont-meta { font-size: 12.5px; color: var(--muted); }
.lx-cont-meta b { font-weight: 500; color: var(--ink); }
.lx-ord { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 6px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.lx-ord-img { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; }
.lx-ord-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }   /* uploaded product image (admin, R2) */
.lx-ord-img b { position: absolute; z-index: 1; right: 6px; bottom: 6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--ink); font: 500 11px/24px var(--sans); color: var(--bg); text-align: center; }
.lx-ord-body { display: grid; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.lx-ord-body strong { overflow: hidden; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.lx-ord-body b { margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.lx-ord-go { font-size: 20px; color: var(--muted); }
.lx-ord:hover strong { text-decoration: underline; text-underline-offset: 0.3em; }
@media (max-width: 767px) {
  .lx-svc > .lx-svc-act { flex-wrap: nowrap; }
  .lx-svc > .lx-svc-act .lx-btn { flex: 1 1 0; min-width: 0; padding: 0 10px; }
}
/* account kit: the tab pages' rows, badges, buttons and notes in the brand style */
.lx-acct .subhead { margin: 34px 0 12px; font: 500 10.5px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lx-acct .rows { display: grid; border-top: 1px solid var(--ink); }
.lx-acct .row-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); }
.lx-acct .row-item > strong { font-weight: 500; color: var(--ink); }
.lx-acct .row-item > strong a { color: inherit; text-decoration: none; }
.lx-acct .row-item > strong a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.lx-acct .row-side { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 10px; }
.lx-acct .row-meta { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.lx-acct .row-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.lx-acct .row-act form { margin: 0; }
.lx-acct .empty { padding: 22px 0; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--line); }
.lx-acct .empty strong { display: block; margin-bottom: 4px; color: var(--ink); }
.lx-acct .panel { display: grid; gap: 12px; margin-bottom: 18px; padding: 22px; border-radius: var(--r); background: var(--panel); }
.lx-acct .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lx-acct .panel h2 { margin: 0; font: italic 300 28px/1 var(--display); color: var(--ink); }
.lx-acct .panel h3 { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.lx-acct .panel p { margin: 0; font-size: 14px; }
.lx-acct .caption { font: 500 10.5px/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lx-acct .small { font-size: 12.5px; } .lx-acct .muted { color: var(--muted); }
.lx-acct .price { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.lx-acct .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 0; }
.lx-acct .btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; font: 500 12px/1 var(--sans); letter-spacing: 0.04em; color: var(--ink); text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s; }
.lx-acct .btn:hover { background: var(--ink); color: var(--bg); }
.lx-acct .btn-ink { background: var(--ink); color: var(--bg); }
.lx-acct .btn-ink:hover { background: #3c3834; }
.lx-acct .btn-sm { height: 36px; padding: 0 14px; }
.lx-acct .btn[disabled] { border-color: var(--line); color: var(--muted); background: transparent; cursor: not-allowed; }
.lx-acct .link { color: var(--ink); font-size: 13px; text-underline-offset: 0.3em; }
.lx-acct .link-button { color: var(--text); font-size: 13px; text-decoration: underline; text-underline-offset: 0.3em; }
.lx-acct .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); }
.lx-acct .badge::before { font-size: 9px; }
.lx-acct .badge-ok::before { content: "●"; color: #5e7a5b; } .lx-acct .badge-wait::before { content: "◐"; color: #8a6d3f; }
.lx-acct .badge-off { color: var(--muted); } .lx-acct .badge-off::before { content: "○"; }
.lx-acct .badge-done::before { content: "✓"; } .lx-acct .badge-bad { color: #8a3b23; } .lx-acct .badge-bad::before { content: "×"; }
.lx-acct .alert { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; background: var(--panel); font-size: 13.5px; color: var(--ink); }
.lx-acct .alert-ok { background: #e7e1d6; }
.lx-acct .mock-note { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.lx-acct .dl-grid { display: grid; grid-template-columns: 96px 1fr; gap: 10px 14px; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); font-size: 14px; }
.lx-acct .dl-grid dt { font: 500 10.5px/2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.lx-acct .dl-grid dd { margin: 0; color: var(--ink); }
.lx-acct .progress { position: relative; height: 3px; margin-top: 4px; border-radius: 3px; background: var(--line); overflow: hidden; }
.lx-acct .progress span { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.lx-acct .progress span[data-w="0"] { width: 0%; }
.lx-acct .progress span[data-w="5"] { width: 5%; }
.lx-acct .progress span[data-w="10"] { width: 10%; }
.lx-acct .progress span[data-w="15"] { width: 15%; }
.lx-acct .progress span[data-w="20"] { width: 20%; }
.lx-acct .progress span[data-w="25"] { width: 25%; }
.lx-acct .progress span[data-w="30"] { width: 30%; }
.lx-acct .progress span[data-w="35"] { width: 35%; }
.lx-acct .progress span[data-w="40"] { width: 40%; }
.lx-acct .progress span[data-w="45"] { width: 45%; }
.lx-acct .progress span[data-w="50"] { width: 50%; }
.lx-acct .progress span[data-w="55"] { width: 55%; }
.lx-acct .progress span[data-w="60"] { width: 60%; }
.lx-acct .progress span[data-w="65"] { width: 65%; }
.lx-acct .progress span[data-w="70"] { width: 70%; }
.lx-acct .progress span[data-w="75"] { width: 75%; }
.lx-acct .progress span[data-w="80"] { width: 80%; }
.lx-acct .progress span[data-w="85"] { width: 85%; }
.lx-acct .progress span[data-w="90"] { width: 90%; }
.lx-acct .progress span[data-w="95"] { width: 95%; }
.lx-acct .progress span[data-w="100"] { width: 100%; }
.lx-acct .class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.lx-acct .class-card { display: grid; gap: 8px; align-content: start; color: inherit; text-decoration: none; }
.lx-acct .class-card h3 { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.lx-acct .class-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 500 10px/1.5 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lx-acct .class-eq { font-size: 12.5px; color: var(--muted); }
.lx-acct .access { width: fit-content; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--text); }
.lx-acct .access-open { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.lx-acct .ph { position: relative; display: block; margin: 0; overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #ddd5ca, #c9bfb2); }
.lx-acct .r-16x9 { aspect-ratio: 16 / 9; } .lx-acct .r-4x5 { aspect-ratio: 4 / 5; } .lx-acct .r-1x1 { aspect-ratio: 1; }
.lx-acct .ph-label { position: absolute; left: 10px; right: 10px; bottom: 8px; font: 500 8.5px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(37, 34, 31, 0.38); }
.lx-acct .ph-ratio { display: none; }
@media (min-width: 768px) {
  .lx-svcs { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .lx-svc { padding: 30px 28px; }
  .lx-acct .class-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
  .lx-acct { padding-bottom: clamp(110px, 9vw, 160px); }
}

/* ---------- Members' doors: the schedule card and the online class modal (signed-out visitors) ---------- */
.lx-gate { display: flex; align-items: flex-end; min-height: clamp(440px, 40vw, 640px); margin-bottom: 4px; border-radius: var(--r); color: #fff; }
.lx-gate::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(30, 26, 22, 0.55), rgba(30, 26, 22, 0.1) 62%), linear-gradient(to top, rgba(30, 26, 22, 0.35), rgba(30, 26, 22, 0) 50%); }
.lx-gate > .lx-ph-label { top: 14px; bottom: auto; color: rgba(255, 255, 255, 0.6); }
.lx-gate-body { position: relative; z-index: 1; display: grid; justify-items: start; gap: 12px; padding: 28px 24px; }
.lx-gate-title { margin: 0; font: italic 300 clamp(44px, 4.4vw, 72px)/1 var(--display); letter-spacing: -0.01em; }
.lx-gate-body > p { font-size: 14px; opacity: 0.9; }
.lx-gate-body .lx-actions { margin-top: 10px; }
.lx-gate-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 999px; font: 500 12.5px/1 var(--sans); letter-spacing: 0.06em; color: #fff; text-decoration: none; transition: background 0.25s, color 0.25s; }
.lx-gate-btn:hover, .lx-gate-btn.is-solid { background: #fff; color: var(--ink); }
.lx-gate-btn.is-solid:hover { background: rgba(255, 255, 255, 0.85); }
.lx-modal-page { position: relative; display: grid; place-items: center; min-height: max(620px, calc(100svh - var(--demo-h, 34px) - var(--hh))); padding: 40px var(--g); overflow: hidden; }
.lx-modal-back { position: absolute; inset: 0; z-index: 0; filter: blur(18px); transform: scale(1.06); }
.lx-modal-back::after { content: ""; position: absolute; inset: 0; background: rgba(60, 54, 48, 0.28); }
.lx-modal { position: relative; z-index: 1; display: grid; gap: 12px; width: min(500px, 100%); padding: 32px 30px 26px; border-radius: 16px; background: #fbfaf7; box-shadow: 0 30px 80px -30px rgba(30, 26, 22, 0.55); }
.lx-modal-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink); }
.lx-modal-close:hover { background: var(--panel); }
.lx-modal-chip { justify-self: start; padding: 4px 10px; border: 1px solid var(--ink); border-radius: 999px; font: 500 10.5px/1.2 var(--sans); letter-spacing: 0.08em; color: var(--ink); }
.lx-modal-title { margin: 4px 0 0; font: italic 300 40px/1.05 var(--display); color: var(--ink); }
.lx-modal-sub { font-size: 14px; color: var(--text); }
.lx-modal-class { display: grid; gap: 3px; margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: var(--panel); }
.lx-modal-class strong { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.lx-modal-class small { font-size: 12.5px; color: var(--muted); }
.lx-modal-list { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text); }
.lx-modal-list li::before { content: "✓"; margin-right: 8px; color: var(--ink); }
.lx-modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 16px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.lx-modal-foot .lx-btn { height: 44px; }
@media (min-width: 768px) {
  .lx-gate-body { padding: 48px 56px; }
  .lx-modal { padding: 40px 40px 30px; }
  .lx-modal-title { font-size: 46px; }
}

/* Session-type marks (same dot on pass cards, filters, schedule rows, pricing columns) */
.lx-mark { display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; vertical-align: 0.05em; }
.lx-mark.k-private { background: #c2a98a; } .lx-mark.k-semi { background: #93a094; } .lx-mark.k-group { background: #6f6358; }
.lx-own-top strong small { margin-left: 6px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.lx-own-card[aria-current] { box-shadow: inset 0 0 0 1px var(--ink); }
.lx-own-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.lx-own-head .lx-label { margin: 0; }
.lx-own-sch { margin-bottom: 28px; }
.lx-own-mini { display: grid; gap: 14px; margin: 4px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--line); }
.lx-own-mini li { display: grid; gap: 4px; }
.lx-own-mini .lx-own-n { font-size: 26px; }
.lx-own-mini li.is-low .lx-own-bar span { background: #9a7d5c; }
.lx-own-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.lx-own-head + .lx-own-mini { margin-top: 0; padding-top: 2px; border-top: 0; }
.lx-own-head a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--ink); text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.lx-own-head a b { font: 300 16px/1 var(--sans); }
.lx-own-head a:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.lx-own-expired { margin-top: 16px; }
.lx-price-name .lx-mark { width: 11px; height: 11px; vertical-align: 0.2em; }

/* schedule filters: one row of dropdowns */
.lx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; }
.lx-drop { position: relative; }
.lx-drop summary { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 16px; border: 1px solid var(--line); border-radius: 999px; list-style: none; font-size: 13px; color: var(--text); cursor: pointer; transition: border-color 0.2s; }
.lx-drop summary::-webkit-details-marker { display: none; }
.lx-drop summary::after { content: ""; width: 5px; height: 5px; margin: -3px 0 0 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: 0.6; }
.lx-drop[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.lx-drop summary:hover { border-color: var(--muted); }
.lx-drop summary span { color: var(--muted); }
.lx-drop summary b { display: inline-flex; align-items: center; font-weight: 500; color: var(--ink); }
.lx-drop.is-set summary { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lx-drop-list { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; display: grid; min-width: 240px; padding: 8px 0; border-radius: 12px; background: #fbfaf7; box-shadow: 0 20px 50px -24px rgba(30, 26, 22, 0.4), 0 0 0 1px var(--line); }
.lx-drop-list a { display: flex; align-items: center; gap: 4px; padding: 10px 16px; font-size: 13.5px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.lx-drop-list a small { margin-left: 8px; font-size: 11.5px; color: var(--muted); }
.lx-drop-list a:hover, .lx-drop-list a[aria-current] { background: var(--panel); }
.lx-drop-list a[aria-current]::after { content: "✓"; margin-left: auto; padding-left: 16px; font-size: 12px; }
.lx-drop-group { margin: 6px 16px 2px; font: 500 10px/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lx-filters-reset { margin-left: 4px; font-size: 12.5px; color: var(--text); text-underline-offset: 0.3em; }

/* checkout (studio pass) */
.lx-co { display: grid; gap: 24px; margin-bottom: 96px; }
.lx-co-main { display: grid; gap: 0; }
.lx-co-sec { padding: 22px 0; border-top: 1px solid var(--line); }
.lx-co-sec:first-child { border-top-color: var(--ink); }
.lx-co-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; font: 400 18px/1.4 var(--serif-ko); color: var(--ink); }
.lx-co-h small { font: 400 12px/1 var(--sans); color: var(--muted); }
.lx-co-list { display: grid; gap: 8px; margin: 0; padding: 0 0 0 18px; font-size: 13.5px; line-height: 1.7; color: var(--text); }
.lx-co-list b { font-weight: 500; color: var(--ink); }
.lx-co-list a { color: var(--ink); }
.lx-co-example { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--panel); font-size: 12.5px; color: var(--text); }
.lx-co-example b { color: var(--ink); }
.lx-co-pay { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-co-pay label { position: relative; }
.lx-co-pay input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lx-co-pay span { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink); }
.lx-co-pay input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lx-co-pay input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.lx-co-note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.lx-co-agree .lx-check { padding: 10px 0; }
.lx-agree-all { padding-bottom: 14px !important; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink) !important; }
.lx-agree span b { margin-right: 8px; font-size: 11px; font-weight: 500; color: #7d6447; }
.lx-agree span small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.lx-co-sum { display: grid; align-content: start; gap: 10px; padding: 18px; border-radius: var(--r); background: var(--panel); box-shadow: 0 18px 40px -34px rgba(37, 34, 31, 0.35); }
.lx-co-sum .lx-own-img { aspect-ratio: 16 / 9; min-height: 0; margin-bottom: 6px; }
.lx-co-pass { display: flex; align-items: center; margin: 0; font: 500 20px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.lx-sum-list { display: grid; gap: 8px; margin: 6px 0 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lx-sum-list div { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.lx-sum-list dt { color: var(--muted); }
.lx-sum-list dd { display: inline-flex; align-items: center; margin: 0; color: var(--ink); text-align: right; }
.lx-co-total { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 4px; font-size: 13.5px; color: var(--ink); }
.lx-co-total strong { font: 300 30px/1 var(--display); font-variant-numeric: lining-nums; }
.lx-co-pay-btn { width: 100%; }
@media (min-width: 768px) {
  .lx-co { grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(40px, 5vw, 80px); align-items: start; margin-bottom: clamp(110px, 9vw, 160px); }
  .lx-co-sum { position: sticky; top: 24px; padding: 22px; }
}
/* /studio: the two studios open the page */
.lx-studios { padding-top: 32px; }
.lx-studios .lx-page-sec-row { align-items: end; }
.lx-studios .lx-page-sec-row > .lx-body { max-width: 30em; }
.lx-studios .lx-page-title { margin-bottom: 0; }
.lx-kind-name .lx-mark { align-self: center; }
@media (min-width: 768px) {
  .lx-studios { padding-top: 48px; }
  .lx-studios .lx-place { aspect-ratio: 4 / 3; }
}
/* /studio/<branch>: one room — wide image, facts, its sessions, room, instructors, the other rooms */
.lx-branch { padding-top: 24px; }
.lx-branch .lx-page-sec-row { align-items: end; }
.lx-branch .lx-page-sec-row > .lx-body { max-width: 30em; }
.lx-branch .lx-page-title { margin-bottom: 0; }
.lx-branch-img { aspect-ratio: 4 / 3; border-radius: var(--r); }
.lx-branch-facts { margin-top: 18px; }
.lx-room-list + .lx-before { margin-top: 32px; }
.lx-kind-foot.is-end { justify-content: flex-end; }
.lx-branch-other { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lx-other { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 180px; padding: 22px; border-radius: var(--r); color: #fff; text-decoration: none; }
.lx-other::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(to top, rgba(32, 28, 24, 0.55), rgba(32, 28, 24, 0) 70%); }
.lx-other > .lx-ph-label { top: 14px; bottom: auto; }
.lx-other-body, .lx-other-go { position: relative; z-index: 1; }
.lx-other-body { display: grid; gap: 8px; }
.lx-other-body .lx-label { color: rgba(255, 255, 255, 0.8); }
.lx-other-body strong { display: flex; align-items: baseline; gap: 10px; font: italic 300 40px/1 var(--display); }
.lx-other-body strong small { font: 400 13px/1 var(--serif-ko); font-style: normal; }
.lx-other-body > span:last-child { font-size: 12.5px; opacity: 0.85; }
.lx-other-go { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 999px; font-size: 16px; transition: background 0.2s, color 0.2s; }
.lx-other:hover .lx-other-go { background: #fff; color: var(--ink); }
/* Pricing, brief (the bottom of /studio and every branch page): name + price per row, one buy link per kind */
/* Hierarchy: kind name (display) > price (display, light) > pass name (sans, medium) > sessions · days (muted). */
.lx-price-cols.is-brief .lx-price-col { display: flex; flex-direction: column; padding: 30px 24px 24px; }
.lx-price-cols.is-brief .lx-price-head { padding-bottom: 22px; }
.lx-price-cols.is-brief .lx-price-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding: 20px 0; }
.lx-price-cols.is-brief .lx-price-row:has(+ .lx-price-go) { border-bottom: 0; }
.lx-price-cols.is-brief .lx-price-pass { font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; }
.lx-price-cols.is-brief .lx-price-pass small { margin-top: 6px; font-size: 12px; color: var(--muted); }
.lx-price-cols.is-brief .lx-price-amount { grid-column: 2; grid-row: 1; margin: 0; font-size: 30px; letter-spacing: -0.01em; }
.lx-price-name .lx-mark { margin-right: 10px; }
.lx-price-go { align-self: flex-end; display: inline-flex; align-items: center; gap: 10px; height: 40px; margin-top: auto; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; transition: background 0.2s, color 0.2s; }
.lx-price-go:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 767px) { .lx-price-go { margin-top: 6px; } .lx-go-full { display: none; } }
@media (min-width: 768px) {
  .lx-price-cols.is-brief .lx-price-col { min-height: 500px; padding: 38px 34px 32px; }
}
/* /studio: band hero + "The practice" as a minutes row (the landing Online section's elements) */
.lx-band::after { background: linear-gradient(to top, rgba(32, 27, 23, 0.55), rgba(32, 27, 23, 0.06) 75%); }
.lx-studios-title { margin: 0; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.45; }
.lx-how { padding-top: 72px; }
.lx-how .lx-ko-lead { margin: 0; }
.lx-rhythm.is-flow .lx-rhythm-f { font: 400 13px/1.7 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
.lx-rhythm.is-flow .lx-rhythm-t { font-weight: 500; }
/* /online (after formapilates.co/browse): band + numbers row, Signature Series posters, membership, needs, free preview,
   Need equipment? (the landing's product tiles) */
.lx-online-top .lx-actions { margin: 4px 0 0; }
.lx-online-sub { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.lx-sa-title { margin: 0; font: italic 300 34px/1.1 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.lx-sa-sub { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.lx-btn.is-sm { height: 40px; padding: 0 18px; font-size: 12px; }
.lx-posters { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: 12px; margin: 0; padding: 0 var(--g); list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); }
.lx-posters::-webkit-scrollbar { display: none; }
.lx-poster-item { display: grid; align-content: start; gap: 8px; scroll-snap-align: start; }
.lx-poster { display: flex; flex-direction: column; aspect-ratio: 3 / 4; padding: 18px; border-radius: var(--r); color: #fff; text-decoration: none; }
.lx-poster::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(32, 27, 23, 0.62), rgba(32, 27, 23, 0) 58%), linear-gradient(to bottom, rgba(32, 27, 23, 0.22), rgba(32, 27, 23, 0) 26%); }
.lx-poster > :not(.lx-ph-label) { position: relative; z-index: 1; }
.lx-poster > .lx-ph-label { top: 40px; right: auto; bottom: auto; left: 18px; max-width: 62%; text-align: left; z-index: 1; opacity: 0.75; }
.lx-poster-no { font: 500 10.5px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); }
.lx-poster .lx-poster-state { position: absolute; top: 14px; right: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font: 500 11px/1 var(--sans); color: var(--ink); }
.lx-poster-body { display: grid; gap: 12px; margin-top: auto; padding-bottom: 14px; }
.lx-poster-title { font: 300 36px/0.95 var(--display); letter-spacing: -0.01em; }
.lx-poster-meta { font: 500 10.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.lx-poster-bar { display: block; height: 3px; margin-bottom: 14px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.lx-poster-bar i { display: block; width: 0; height: 100%; background: #fff; }
.lx-poster-bar i[data-w="0"] { width: 0%; } .lx-poster-bar i[data-w="5"] { width: 5%; } .lx-poster-bar i[data-w="10"] { width: 10%; } .lx-poster-bar i[data-w="15"] { width: 15%; } .lx-poster-bar i[data-w="20"] { width: 20%; } .lx-poster-bar i[data-w="25"] { width: 25%; } .lx-poster-bar i[data-w="30"] { width: 30%; } .lx-poster-bar i[data-w="35"] { width: 35%; } .lx-poster-bar i[data-w="40"] { width: 40%; } .lx-poster-bar i[data-w="45"] { width: 45%; } .lx-poster-bar i[data-w="50"] { width: 50%; } .lx-poster-bar i[data-w="55"] { width: 55%; } .lx-poster-bar i[data-w="60"] { width: 60%; } .lx-poster-bar i[data-w="65"] { width: 65%; } .lx-poster-bar i[data-w="70"] { width: 70%; } .lx-poster-bar i[data-w="75"] { width: 75%; } .lx-poster-bar i[data-w="80"] { width: 80%; } .lx-poster-bar i[data-w="85"] { width: 85%; } .lx-poster-bar i[data-w="90"] { width: 90%; } .lx-poster-bar i[data-w="95"] { width: 95%; } .lx-poster-bar i[data-w="100"] { width: 100%; }
.lx-poster-sum { margin: 6px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--text); }
.lx-poster-tags { margin: 0; font: 500 10.5px/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* rail controls (app.js data-rail): hidden without JS, where the list simply scrolls */
.lx-rail-ctl { display: flex; align-items: center; gap: 8px; }
.lx-rail-btn { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: transparent; font: 400 15px/1 var(--sans); color: var(--ink); cursor: pointer; transition: background 0.2s, color 0.2s, opacity 0.2s; }
.js .lx-rail-btn { display: none; }
.lx-rail-btn:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.lx-rail-btn:disabled { opacity: 0.3; cursor: default; }
/* ── /online, from Membership to Free preview (user 2026-10-25: the Candor / Yoga Muse references were for this span) ──
   Membership: a muted, low-contrast photo band with the plans as thin-bordered translucent cards on it (light type, each
   card's one action at its foot). The newest theme: a full-bleed diptych, two images touching, a small label centred on
   the seam (light after the dark band). Explore: one tall photo beside an accordion of what the library holds and one
   way in. Free preview: a text block beside three tall tiles (a swipe row on phones). */
.lx-ph-dusk { background: radial-gradient(38% 60% at 72% 34%, rgba(214, 200, 186, 0.36), rgba(214, 200, 186, 0) 70%), radial-gradient(46% 70% at 22% 80%, rgba(36, 30, 26, 0.55), rgba(36, 30, 26, 0) 72%), linear-gradient(170deg, #8a7f74 0%, #6a6058 55%, #4f4740 100%); }
.lx-plan-band { margin-top: 96px; padding: 64px var(--g) 48px; color: #fff; }
.lx-plan-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(28, 24, 21, 0.26); pointer-events: none; }
.lx-plan-band > .lx-ph-label { top: 14px; bottom: auto; }
.lx-plan-head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.lx-plan-head .lx-label { color: rgba(255, 255, 255, 0.75); }
.lx-plan-title { font: 400 26px/1.45 var(--serif-ko); letter-spacing: -0.03em; color: #fff; }
.lx-plan-cards { display: grid; gap: 12px; margin-top: 30px; }
.lx-plan { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 22px 24px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--r); background: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-align: center; }
.lx-plan-name { font: 500 13px/1.4 var(--sans); letter-spacing: 0.04em; color: #fff; }
.lx-plan-price { font: italic 300 36px/1.1 var(--display); color: #fff; font-variant-numeric: lining-nums; }
.lx-plan-price small { margin-left: 2px; font: 400 12px/1 var(--sans); color: rgba(255, 255, 255, 0.7); }
.lx-plan-line { max-width: 22em; font-size: 12.5px; line-height: 1.75; color: rgba(255, 255, 255, 0.84); }
.lx-plan-go { margin-top: auto; padding-top: 12px; }
.lx-plan-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: #fff; text-decoration: none; transition: background 0.2s, color 0.2s; }
.lx-plan-btn:hover { background: #fff; color: var(--ink); }
.lx-plan-state { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 12px; color: rgba(255, 255, 255, 0.88); }
.lx-plan-note { margin-top: 26px; font-size: 12px; line-height: 1.8; text-align: center; color: rgba(255, 255, 255, 0.74); }
.lx-plan-note a { margin-left: 10px; color: #fff; text-underline-offset: 0.3em; white-space: nowrap; }
.lx-plan-note a span { margin-left: 4px; }
.lx-diptych { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 340px; }
.lx-diptych-img { height: 100%; }
.lx-diptych-mark { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; justify-items: center; gap: 8px; width: max-content; max-width: calc(100% - 2 * var(--g)); text-align: center; color: var(--ink); text-decoration: none; transform: translate(-50%, -50%); }
.lx-diptych-mark .lx-label { color: var(--ink); }
.lx-diptych-mark strong { font: italic 300 40px/1 var(--display); letter-spacing: -0.01em; }
.lx-diptych-meta { font: 500 10px/1.6 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); }
.lx-diptych-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 12.5px; font-weight: 500; }
.lx-diptych-go span { display: inline-block; transition: transform 0.3s var(--ease); }
.lx-diptych-mark:hover .lx-diptych-go span { transform: translateX(4px); }
.lx-explore { display: grid; gap: 28px; }
.lx-explore-img { aspect-ratio: 4 / 3; border-radius: var(--r); }
.lx-explore-body { display: grid; justify-items: start; }
.lx-explore-body .lx-label { margin-bottom: 14px; }
.lx-explore-body .lx-body { margin-top: 12px; }
.lx-acc { width: 100%; margin-top: 26px; border-top: 1px solid var(--ink); }
.lx-acc details { border-bottom: 1px solid var(--line); }
.lx-acc summary { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; font-size: 15px; color: var(--ink); list-style: none; cursor: pointer; }
.lx-acc summary::-webkit-details-marker { display: none; }
.lx-acc summary::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--ease); }
.lx-acc details[open]:not(.is-closing) > summary::after { transform: translateY(2px) rotate(-135deg); }
.lx-acc-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0; padding: 0 0 20px; }
.lx-acc-body strong { font: 300 28px/1 var(--display); color: var(--ink); font-variant-numeric: lining-nums; }
.lx-acc-body strong small { margin-left: 4px; font: 400 12.5px/1 var(--sans); color: var(--muted); }
.lx-acc-body span { font-size: 13px; color: var(--text); }
.lx-explore-go { margin-top: 28px; }
.lx-explore-go .lx-btn { text-transform: none; letter-spacing: 0.02em; }
.lx-free { display: grid; gap: 26px; }
.lx-free-head { display: grid; justify-items: start; }
.lx-free-head .lx-label { margin-bottom: 14px; }
.lx-free-head .lx-body { max-width: 22em; margin: 12px 0 22px; }
.lx-free-row { display: flex; gap: 12px; margin: 0 calc(var(--g) * -1); padding: 0 var(--g); list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-width: none; }
.lx-free-row::-webkit-scrollbar { display: none; }
.lx-free-row li { flex: 0 0 64%; scroll-snap-align: start; }
.lx-free-tile { display: grid; gap: 8px; color: var(--ink); text-decoration: none; }
.lx-free-img { display: block; aspect-ratio: 3 / 4; border-radius: var(--r); }
.lx-free-img > .lx-ph-label { top: 12px; bottom: auto; }
.lx-free-img > .lx-vid-poster { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.lx-free-tile:hover .lx-vid-play { transform: scale(1.06); }
.lx-free-cap { margin-top: 4px; font: 500 10px/1.6 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lx-free-title { font-size: 14.5px; line-height: 1.4; }
.lx-vids { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.lx-vid { display: grid; gap: 8px; color: var(--ink); text-decoration: none; }
.lx-vid-img { display: block; aspect-ratio: 16 / 9; border-radius: var(--r); }
.lx-vid-img > .lx-ph-label { top: 12px; bottom: auto; }
.lx-vid-play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); transition: transform 0.2s; }
.lx-vid-play::after { content: ""; position: absolute; left: 21px; top: 17px; border-left: 13px solid var(--ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.lx-vid:hover .lx-vid-play { transform: scale(1.06); }
.lx-vid-time { position: absolute; right: 12px; bottom: 12px; z-index: 1; padding: 5px 9px; border-radius: 999px; background: rgba(32, 27, 23, 0.7); font: 500 11px/1 var(--sans); color: #fff; }
.lx-vid-meta { margin-top: 6px; font: 500 10.5px/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lx-vid-title { font-size: 16px; line-height: 1.4; }
.lx-vid-tag { justify-self: start; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; color: var(--text); }
.lx-gear { padding-bottom: 96px; }
@media (max-width: 767px) { .lx-online-top .lx-rhythm a { grid-template-columns: 132px minmax(0, 1fr); } }
@media (min-width: 768px) {
  .lx-branch { padding-top: 36px; }
  .lx-branch-img { aspect-ratio: 21 / 9; }
  .lx-branch-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr); }
  .lx-kinds.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-room-list.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-branch-other { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .lx-other { min-height: 240px; padding: 28px 32px; }
  .lx-how { padding-top: clamp(96px, 7.4vw, 140px); }
  .lx-rhythm.is-flow { grid-column: 6 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
  .lx-rhythm.is-flow li + li { margin-left: 0; }
  .lx-rhythm.is-flow .lx-rhythm-n { font-size: clamp(52px, 4.4vw, 84px); }
  .lx-sa-title { font-size: clamp(36px, 3vw, 48px); }
  .lx-posters { grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; }
  .lx-poster { padding: 22px; }
  .lx-poster-title { font-size: clamp(34px, 2.6vw, 46px); }
  .lx-price-cols.is-plans .lx-price-col { min-height: 340px; }
  .js .lx-rail-btn { display: inline-grid; }
  .lx-plan-band { margin-top: clamp(100px, 8vw, 160px); padding: clamp(80px, 8vw, 140px) var(--g) clamp(52px, 5vw, 84px); }
  .lx-plan-title { font-size: clamp(30px, 2.6vw, 44px); }
  .lx-plan-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 44px auto 0; }
  .lx-plan { min-height: 300px; padding: 38px 28px 30px; }
  .lx-plan-price { font-size: 42px; }
  .lx-diptych { height: clamp(380px, 34vw, 560px); }
  .lx-diptych-mark strong { font-size: clamp(48px, 4.2vw, 72px); }
  .lx-explore { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: center; padding-top: clamp(96px, 8vw, 150px); }
  .lx-explore-img { aspect-ratio: 3 / 4; }
  .lx-explore-body .lx-ko-title { font-size: clamp(30px, 2.4vw, 40px); }
  .lx-free { grid-template-columns: minmax(0, 0.85fr) minmax(0, 3fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding-top: clamp(96px, 8vw, 150px); }
  .lx-free-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; overflow: visible; }
  .lx-vids { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .lx-gear { padding-bottom: clamp(110px, 9vw, 160px); }
  .lx-branch-team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
  .lx-branch-team .lx-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-other-body strong { font-size: 52px; }
}
/* ── Online library ── (user 2026-10-25: match /online and the timetable) one left edge on every tab, an underline tab row
   that lands on itself (#lib), the timetable's dropdowns as the filter bar, /online's video cards and theme posters */
.lx-lib-head { padding-top: 28px; }
.lx-lib-head .lx-page-sec { margin-bottom: 0; }
.lx-lib-title { margin: 0; font: 300 56px/0.95 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.lx-lib-sub { max-width: 34em; margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text); }
.lx-lib-sub a { display: inline-flex; gap: 6px; color: var(--ink); white-space: nowrap; text-underline-offset: 0.3em; }
.lx-lib { padding-top: 28px; padding-bottom: 96px; }
.lx-tabs { display: flex; gap: 6px; margin: 0 0 24px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--ink); scroll-margin-top: 12px; }
.lx-tabs::-webkit-scrollbar { display: none; }
.lx-tabs a { flex: none; display: inline-flex; align-items: baseline; gap: 5px; padding: 14px 12px 13px; border-bottom: 2px solid transparent; font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.lx-tabs a:first-child { padding-left: 0; }
.lx-tabs a:hover { color: var(--ink); }
.lx-tabs a[aria-current] { border-bottom-color: var(--ink); color: var(--ink); }
.lx-tabs small { font-size: 10.5px; letter-spacing: 0; color: var(--muted); }
.lx-lib-filters { margin-bottom: 22px; }
.lx-toggle { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--text); text-decoration: none; }
.lx-toggle::before { content: ""; width: 13px; height: 13px; border: 1px solid var(--muted); border-radius: 4px; }
.lx-toggle:hover { border-color: var(--muted); }
.lx-toggle.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.lx-toggle.is-on::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 2px #fbfaf7; }
.lx-lib-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.lx-lib-bar strong { font-size: 15px; font-weight: 500; color: var(--ink); }
.lx-lib-vids, .lx-lib-posters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin: 0; padding: 0; list-style: none; }
.lx-lib-vids .lx-vid-title { font-size: 14.5px; }
.lx-lib-vids .lx-vid-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.lx-lib-vids .lx-vid-play::after { left: 16px; top: 13px; border-left-width: 10px; border-top-width: 7px; border-bottom-width: 7px; }
.lx-vid-sub { font-size: 12px; line-height: 1.5; color: var(--muted); }
.lx-vid-tag.is-lock { border-style: dashed; color: var(--muted); }
.lx-vid-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 3px; background: rgba(255, 255, 255, 0.35); }
.lx-vid-bar i { display: block; width: 0; height: 100%; background: #fff; }
.lx-vid-bar i[data-w="0"] { width: 0%; } .lx-vid-bar i[data-w="5"] { width: 5%; } .lx-vid-bar i[data-w="10"] { width: 10%; } .lx-vid-bar i[data-w="15"] { width: 15%; } .lx-vid-bar i[data-w="20"] { width: 20%; } .lx-vid-bar i[data-w="25"] { width: 25%; } .lx-vid-bar i[data-w="30"] { width: 30%; } .lx-vid-bar i[data-w="35"] { width: 35%; } .lx-vid-bar i[data-w="40"] { width: 40%; } .lx-vid-bar i[data-w="45"] { width: 45%; } .lx-vid-bar i[data-w="50"] { width: 50%; } .lx-vid-bar i[data-w="55"] { width: 55%; } .lx-vid-bar i[data-w="60"] { width: 60%; } .lx-vid-bar i[data-w="65"] { width: 65%; } .lx-vid-bar i[data-w="70"] { width: 70%; } .lx-vid-bar i[data-w="75"] { width: 75%; } .lx-vid-bar i[data-w="80"] { width: 80%; } .lx-vid-bar i[data-w="85"] { width: 85%; } .lx-vid-bar i[data-w="90"] { width: 90%; } .lx-vid-bar i[data-w="95"] { width: 95%; } .lx-vid-bar i[data-w="100"] { width: 100%; }
.lx-lib-posters .lx-poster { padding: 14px; }
.lx-lib-posters .lx-poster-title { font-size: 26px; }
.lx-lib-posters .lx-poster-sum { font-size: 12.5px; }
.lx-lib-empty { display: grid; justify-items: start; gap: 8px; padding: 30px 26px; border-radius: var(--r); background: var(--panel); }
.lx-lib-empty strong { font-size: 16px; font-weight: 500; color: var(--ink); }
.lx-lib-empty p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text); }
.lx-lib-empty .lx-lib-empty-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.lx-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fbfaf7; font-size: 13px; color: var(--ink); text-decoration: none; }
.lx-chip:hover { border-color: var(--ink); }
@media (max-width: 767px) {
  /* many pills wrap on a phone: a list opens under the whole bar, full width, so it never runs off the screen */
  .lx-lib-filters { position: relative; }
  .lx-lib-filters .lx-drop { position: static; }
  .lx-lib-filters .lx-drop-list { right: 0; min-width: 0; }
}
@media (min-width: 768px) {
  .lx-lib-head { padding-top: 40px; }
  .lx-lib-title { font-size: clamp(64px, 6vw, 104px); }
  .lx-lib { padding-top: 40px; padding-bottom: clamp(110px, 9vw, 160px); }
  .lx-lib-sort { margin-left: auto; }
  .lx-lib-vids { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 16px; }
  .lx-lib-posters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 16px; }
  .lx-lib-posters .lx-poster { padding: 20px; }
  .lx-lib-posters .lx-poster-title { font-size: clamp(30px, 2.4vw, 40px); }
  .lx-lib-posters .lx-poster-sum { font-size: 13.5px; }
}
@media (min-width: 1200px) {
  .lx-lib-vids { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ── Account profile ── */
/* /account/profile: locked account fields + the phone verification box, the optional info form in small sections,
   what is in progress and the change log aside */
.lx-prof { display: grid; gap: 14px; margin-bottom: 8px; }
.lx-prof-main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.lx-prof-card { padding: 24px 20px 26px; border-radius: var(--r); background: var(--panel); }
.lx-prof-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.lx-prof-head span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lx-prof-h { margin: 0; font: 400 22px/1.4 var(--serif-ko); letter-spacing: -0.02em; color: var(--ink); }
.lx-prof-h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font: 500 14px/1.4 var(--sans); color: var(--ink); }
.lx-prof-h3 small, .lx-field-label small { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.lx-acct .lx-prof-error { background: #f3e3dd; color: #7e2f1d; }
.lx-prof-fields { display: grid; gap: 16px; }
.lx-prof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.lx-prof-grid .lx-span { grid-column: 1 / -1; }
.lx-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.lx-field-label { font-size: 12px; font-weight: 500; color: var(--text); }
.lx-field small, .lx-prof-note { font-size: 12px; line-height: 1.6; color: var(--muted); }
.lx-prof-note { display: block; margin-top: 10px; }
.lx-nowrap { white-space: nowrap; }
.lx-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf8; font: 400 15px/1 var(--sans); color: var(--ink); }
.lx-input:focus-visible { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 1px; }
.lx-textarea { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
/* Locked = clearly not a text box: dashed outline, no fill, a lock mark */
.lx-locked { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 46px; margin: 0; padding: 0 14px; border: 1px dashed var(--line); border-radius: 10px; font-size: 15px; color: var(--text); }
.lx-locked span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-locked svg { flex: none; color: var(--muted); }
.lx-prof-sub { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.lx-phone-now { margin: 0 0 12px; font-size: 13.5px; color: var(--text); }
.lx-phone-now strong { margin-left: 6px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.lx-phone { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf8; }
.lx-phone-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.lx-phone-row .lx-field { flex: 1 1 200px; }
.lx-phone .lx-input { background: #fff; }
.lx-acct .lx-phone-row .btn { height: 46px; padding: 0 20px; }
.lx-phone-mock { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--bg); font-size: 12.5px; line-height: 1.6; color: var(--text); }
.lx-phone-mock b { margin-left: 4px; font: 600 16px/1 var(--sans); letter-spacing: 0.18em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lx-phone-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.lx-phone-links { display: inline-flex; gap: 14px; }
.lx-phone-links form { margin: 0; }
.lx-phone-err { margin: 0 0 10px; font-size: 12.5px; color: #8a2a1b; }
.lx-prof-sec + .lx-prof-sec { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.lx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-chips label { position: relative; cursor: pointer; }
.lx-chips input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lx-chips span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fbfaf8; font-size: 13px; color: var(--text); }
.lx-chips label:hover span { border-color: var(--muted); }
.lx-chips input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.lx-chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.lx-prof .lx-check { margin-top: 12px; }
.lx-prof .lx-check small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.lx-prof-consent b { margin-right: 6px; font-weight: 600; color: var(--ink); }
.lx-prof-stamp { display: block; margin: 8px 0 0 28px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lx-prof-keep { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.lx-acct .lx-prof-form .actions { margin-top: 16px; }
.lx-acct .lx-prof-form .btn { min-width: 128px; }
.lx-prof-side { display: grid; gap: 14px; align-content: start; }
.lx-prof-box { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); }
.lx-prof-live, .lx-prof-log { display: grid; margin: 0; padding: 0; list-style: none; }
.lx-prof-live li { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.lx-prof-live p { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: 13.5px; color: var(--ink); }
.lx-prof-live strong { font-weight: 500; }
.lx-prof-live small { font-size: 12px; line-height: 1.6; color: var(--muted); }
.lx-prof-log li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.lx-prof-log time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-prof-none { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
@media (min-width: 768px) {
  .lx-prof { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .lx-prof-card { padding: 30px 32px; }
  .lx-prof-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  .lx-prof-grid { gap: 18px 16px; }
  .lx-prof-side { position: sticky; top: 24px; }
}
/* ── Studio schedule v2 ── (user 2026-10-25: the boxed days and the board-like list were unfriendly)
   A calm calendar row (weekday, numeral, a dot when a class matches the filters; the chosen day filled; weeks split by a
   thin rule) and one soft card per class, grouped 오전 / 오후 / 저녁: time + length · title, kind chip, instructor ·
   seat dots + words and the pass it uses beside one clear action. */
.lx-cal { scroll-margin-top: 16px; display: flex; gap: 2px; margin: 0 calc(var(--g) * -1) 18px; padding: 22px var(--g) 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--g); scrollbar-width: none; }
.lx-cal::-webkit-scrollbar { display: none; }
.lx-cal-day { position: relative; flex: none; display: grid; justify-items: center; gap: 6px; width: 52px; padding: 4px 0 8px; scroll-snap-align: start; color: var(--ink); text-decoration: none; }
.lx-cal-day.is-week { margin-left: 13px; }
.lx-cal-day.is-week::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 10px; width: 1px; background: var(--line); }
.lx-cal-month { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); font: 500 10px/1 var(--sans); letter-spacing: 0.12em; color: var(--ink); white-space: nowrap; }
.lx-cal-day small { font-size: 11px; line-height: 1; color: var(--muted); }
.lx-cal-day strong { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 300 21px/1 var(--display); font-variant-numeric: lining-nums; transition: background 0.2s; }
a.lx-cal-day:hover strong { background: var(--panel); }
.lx-cal-day.is-today small { font-weight: 600; color: var(--ink); }
.lx-cal-day[aria-current] strong { background: var(--ink); color: var(--bg); }
.lx-cal-dot { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.lx-cal-dot.is-on { background: var(--ink); }
.lx-cal-day[aria-current] .lx-cal-dot.is-on { background: #8a7a68; }
.lx-cal-day.is-closed { color: #b9b2a8; cursor: default; }
.lx-cal-day.is-closed small { color: #c2bbb1; }
.lx-sch-part { margin-top: 22px; }
.lx-sch-part-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font: 500 11px/1 var(--sans); letter-spacing: 0.14em; color: var(--muted); }
.lx-sch-part-h small { font-size: 11px; letter-spacing: 0; color: #b0a99f; }
.lx-slots { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lx-slot { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "time main" "side side" "act act"; gap: 10px 14px; padding: 16px; border-radius: 14px; background: var(--panel); box-shadow: 0 12px 30px -28px rgba(37, 34, 31, 0.45); transition: box-shadow 0.2s; }
.lx-slot:hover { box-shadow: 0 0 0 1px var(--line), 0 14px 32px -26px rgba(37, 34, 31, 0.5); }
.lx-slot-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lx-slot-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lx-slot-time { grid-area: time; display: grid; align-content: start; gap: 5px; }
.lx-slot-time strong { font: 300 26px/1 var(--display); color: var(--ink); font-variant-numeric: lining-nums; }
.lx-slot-time small { font-size: 12px; color: var(--muted); }
.lx-slot-main { grid-area: main; display: grid; align-content: start; gap: 8px; min-width: 0; }
.lx-slot-title { font-size: 15.5px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.lx-slot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--text); }
.lx-slot-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 11.5px; color: var(--ink); }
.lx-slot-chip .lx-mark { width: 7px; height: 7px; margin-right: 6px; }
.lx-slot-side { grid-area: side; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.lx-slot-seat { display: inline-flex; align-items: center; gap: 8px; }
.lx-seat-dots { display: inline-flex; gap: 3px; }
.lx-seat-dots i { width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; }
.lx-seat-dots i.is-taken { background: var(--ink); }
.lx-slot-seats { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.lx-slot-pass { display: inline-flex; align-items: center; font-size: 12px; color: var(--text); }
.lx-slot-pass.is-need { color: #7d6447; }
.lx-slot-act { grid-area: act; position: relative; z-index: 2; }
.lx-act { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s; }
a.lx-act:hover { background: var(--ink); color: var(--bg); }
.lx-act.is-primary { background: var(--ink); color: var(--bg); }
a.lx-act.is-primary:hover { background: #3c3834; }
.lx-act.is-mine { border-color: #8a7a68; color: #6b5a48; }
.lx-act.is-off { border-color: var(--line); color: var(--muted); }
.lx-slot.is-off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.lx-slot.is-off .lx-slot-time strong, .lx-slot.is-off .lx-slot-title { color: var(--muted); }
.lx-slot.is-off .lx-seat-dots i { border-color: #b9b2a8; }
.lx-slot.is-off .lx-seat-dots i.is-taken { background: #b9b2a8; }
.lx-slot.is-off .lx-slot-seats { color: var(--muted); }
.lx-slot[data-state="mine"] { box-shadow: inset 3px 0 0 #8a7a68, 0 12px 30px -28px rgba(37, 34, 31, 0.45); }
.lx-slot-empty { display: grid; gap: 14px; margin-top: 14px; padding: 26px 22px; border-radius: 14px; background: var(--panel); font-size: 14px; color: var(--text); }
.lx-slot-empty p { margin: 0; }
.lx-slot-empty strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 500; color: var(--ink); }
@media (min-width: 768px) {
  .lx-cal { flex-wrap: nowrap; justify-content: space-between; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .lx-cal-day { flex: 1 1 0; width: auto; min-width: 0; }
  .lx-cal-day.is-week { margin-left: 18px; }
  .lx-cal-day.is-week::before { left: -10px; }
  .lx-slot { grid-template-columns: 96px minmax(0, 1fr) auto 150px; grid-template-areas: "time main side act"; align-items: center; gap: 24px; padding: 20px 24px; }
  .lx-slot-time { align-self: center; }
  .lx-slot-side { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 8px; padding-top: 0; border-top: 0; text-align: right; }
  .lx-act { height: 42px; }
}
/* ── Account: individual passes · refund ── */
/* My Studio: the passes are tiles (one column → two → three), each with its action row on the bottom edge; buying
   another is a tile of its own among them (a row on phones). The refund page shows one pass as .lx-pass-item-body. */
.lx-pass-items { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lx-pass-items > .lx-pass-item { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px; }
.lx-pass-head { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: center; }
.lx-pass-head > div { display: grid; gap: 6px; min-width: 0; }
.lx-pass-items > .lx-pass-item .lx-own-bar { flex: none; max-width: none; }
.lx-pass-items .lx-pass-facts { margin: 0; }
.lx-pass-items .lx-pass-act { margin-top: auto; padding-top: 4px; }
.lx-pass-new a { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; height: 100%; padding: 16px 18px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: background 0.25s, box-shadow 0.25s; }
.lx-pass-new a:hover { background: var(--panel); box-shadow: inset 0 0 0 1px var(--ink); }
.lx-pass-new span { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: 50%; font: 300 22px/1 var(--sans); transition: background 0.25s, color 0.25s; }
.lx-pass-new a:hover span { background: var(--ink); color: var(--bg); }
.lx-pass-new strong { font-size: 14.5px; font-weight: 500; }
.lx-pass-new small { font-size: 12px; color: var(--muted); }
.lx-pass-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border-radius: 14px; background: var(--panel); box-shadow: 0 14px 34px -30px rgba(37, 34, 31, 0.4); }
.lx-pass-item .lx-own-img { min-height: 0; aspect-ratio: 1 / 1; }
.lx-pass-item-body { display: grid; gap: 6px; min-width: 0; }
.lx-pass-item .lx-own-top strong { font-size: 14.5px; }
.lx-pass-item .lx-own-n { font-size: 28px; }
.lx-pass-item .lx-own-bar { max-width: 260px; }
.lx-pass-facts { display: grid; gap: 6px; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.lx-pass-facts div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.lx-pass-facts dt { font-size: 11.5px; color: var(--muted); }
.lx-pass-facts dd { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.lx-pass-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; font-size: 12.5px; color: var(--text); }
.lx-pass-act form { margin: 0; }
.lx-pass-act .small { color: var(--text); }
.lx-pass-act .muted { color: var(--muted); }
/* state chips: the words carry the state; tone only supports it */
.lx-pass-item.is-expiring .lx-own-top em { background: #efe1cc; color: #74532b; }
.lx-pass-item.is-refunding .lx-own-top em { background: transparent; box-shadow: inset 0 0 0 1px #9a7d5c; color: #74532b; }
.lx-pass-item.is-used .lx-own-top em, .lx-pass-item.is-refunded .lx-own-top em, .lx-pass-item.is-expired .lx-own-top em { background: var(--line); color: var(--text); }
.lx-pass-item.is-refunding, .lx-pass-item.is-refunded, .lx-pass-item.is-expired, .lx-pass-item.is-used { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.lx-pass-item.is-refunded .lx-own-img, .lx-pass-item.is-expired .lx-own-img, .lx-pass-item.is-used .lx-own-img, .lx-pass-item.is-refunding .lx-own-img { opacity: 0.55; filter: grayscale(0.5); }
.lx-pass-item.is-refunded .lx-own-n, .lx-pass-item.is-expired .lx-own-n, .lx-pass-item.is-used .lx-own-n, .lx-pass-item.is-refunding .lx-own-n { color: var(--muted); }
.lx-pass-item.is-refunding .lx-own-bar span, .lx-pass-item.is-refunded .lx-own-bar span, .lx-pass-item.is-expired .lx-own-bar span { background: var(--muted); }
/* refund request */
.lx-refund { display: grid; gap: 18px; max-width: 640px; }
.lx-refund-back { margin: 0; }
.lx-refund-back .link { font-size: 12.5px; color: var(--text); text-decoration: none; }
.lx-refund-back .link:hover { color: var(--ink); text-decoration: underline; }
.lx-refund .lx-svc-title { margin: 0; }
.lx-refund .alert { margin: 0; }
.lx-refund-form { display: grid; gap: 20px; }
.lx-refund-amount { display: grid; gap: 8px; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.lx-refund-amount > span { font-size: 12px; color: var(--muted); }
.lx-refund-amount strong { font: 300 38px/1 var(--display); color: var(--ink); font-variant-numeric: lining-nums; }
.lx-refund-calc { margin: 0; font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.lx-refund-reason { display: grid; gap: 6px; max-width: 320px; }
.lx-refund-reason span { font-size: 12px; color: var(--muted); }
.lx-refund-reason select { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font: 400 14px/1 var(--sans); color: var(--ink); }
.lx-refund-reason select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lx-refund-policy { display: grid; gap: 10px; }
.lx-refund-label { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.lx-refund-label small { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); }
.lx-refund .lx-co-list { font-size: 13px; list-style: disc; }
.lx-refund .lx-co-list li::marker { color: var(--muted); }
.lx-refund .lx-agree { padding-top: 16px; border-top: 1px solid var(--line); }
.lx-refund .actions { margin-top: 0; }
@media (min-width: 768px) {
  .lx-pass-item { grid-template-columns: 104px minmax(0, 1fr); gap: 18px; padding: 16px; }
  .lx-pass-item-body .lx-pass-facts { grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: 36px; }
  .lx-pass-item-body .lx-pass-facts div { grid-template-columns: none; gap: 2px; }
  .lx-pass-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .lx-pass-items > .lx-pass-item { padding: 22px; }
  .lx-pass-new a { grid-template-columns: none; justify-items: center; align-content: center; gap: 6px; min-height: 220px; text-align: center; }
  .lx-pass-new span { grid-row: auto; width: 48px; height: 48px; margin-bottom: 6px; }
}
@media (min-width: 1100px) {
  .lx-pass-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ── Studio session v2 ── (user 2026-10-25: "우측이 카드", then "비례가 안 맞는 듯") The class across the top; below it the
   class facts on the left and, level with them, one card — panel, radius, a soft shadow — with the member's side (state,
   the pass, the deadline, the one action). Nothing is said twice. Phones: the card comes right after the title. */
.lx-ses { display: grid; grid-template-areas: "head" "card" "info"; gap: 28px; }
.lx-ses-info { grid-area: info; display: grid; gap: 16px; }
.lx-ses-policy { font-size: 12.5px; line-height: 1.75; color: var(--muted); }
.lx-ses-policy strong { margin-right: 8px; font-weight: 500; color: var(--text); }
.lx-ses-head { grid-area: head; display: grid; justify-items: start; gap: 12px; }
.lx-ses-title { font: 300 46px/1.04 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.lx-ses-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--text); }
.lx-ses-head .lx-body { max-width: 34em; margin-top: 6px; }
.lx-ses-card { --ses-shadow: 0 1px 2px rgba(37, 34, 31, 0.05), 0 24px 48px -30px rgba(37, 34, 31, 0.42);
  grid-area: card; align-self: start; display: grid; gap: 14px; padding: 24px 22px; border-radius: var(--r); background: var(--panel); box-shadow: var(--ses-shadow); }
.lx-ses-card .alert { margin: 0; padding: 11px 14px; border-radius: 10px; background: var(--bg); font-size: 13px; line-height: 1.6; color: var(--ink); }
.lx-ses-card .alert-ok { background: #e3e6dd; color: #3f4c3c; }
.lx-ses-card .alert-error { background: #f0e2d9; color: #74402c; }
.lx-ses-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.lx-ses-chip { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--bg); font-size: 12px; font-weight: 500; color: var(--ink); }
.lx-ses-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lx-ses-chip.is-booked { background: #e3e6dd; color: #4a5946; }
.lx-ses-chip.is-wait { background: #efe5d6; color: #74532b; }
.lx-ses-chip.is-off { color: var(--muted); }
.lx-ses-code { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lx-ses-h { font: 400 22px/1.4 var(--serif-ko); letter-spacing: -0.02em; color: var(--ink); }
.lx-ses-when { margin-top: -6px; font-size: 14px; color: var(--text); }
.lx-ses-sub { font-size: 13.5px; line-height: 1.7; color: var(--text); }
.lx-ses-sum { margin: 0; border-top: 1px solid var(--line); }
.lx-ses-sum > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
.lx-ses-sum dt { color: var(--muted); }
.lx-ses-sum dd { margin: 0; color: var(--ink); }
.lx-ses-sum dd small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.lx-ses-sum dd strong { display: block; font-weight: 500; }
.lx-ses-sum em { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #efe1cc; font-size: 11px; font-style: normal; color: #74532b; }
.lx-ses-sum .lx-mark { margin-right: 6px; }
.lx-ses-before { padding: 12px 14px; border-radius: 10px; background: var(--bg); font-size: 12.5px; color: var(--text); }
.lx-ses-before p { margin-bottom: 4px; font-weight: 500; color: var(--ink); }
.lx-ses-before ul { display: grid; gap: 2px; margin: 0; padding-left: 16px; }
.lx-ses-form { margin: 4px 0 0; }
.lx-ses-form .lx-btn { width: 100%; font-size: 13.5px; letter-spacing: 0.02em; text-transform: none; }
.lx-ses-note { margin-top: -4px; font-size: 12.5px; text-align: center; color: var(--text); }
.lx-ses-note span { display: block; margin-top: 2px; color: var(--muted); }
.lx-ses-calm { padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.7; color: var(--text); }
.lx-ses-calm strong { display: block; margin-bottom: 2px; font-weight: 500; color: var(--ink); }
.lx-ses-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.lx-ses-more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); text-decoration: none; }
.lx-ses-more:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }
.lx-ses-facts { margin: 0; border-top: 1px solid var(--ink); }
.lx-ses-facts > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.lx-ses-facts dt { padding-top: 2px; font-size: 12px; color: var(--muted); }
.lx-ses-facts dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.lx-ses-facts dd small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.lx-ses-facts dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.3em; }
.lx-ses-facts dd a:hover { text-decoration-color: currentColor; }
.lx-ses-facts em { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #efe1cc; font-size: 11px; font-style: normal; color: #74532b; }
.lx-ses-seats .lx-seat-dots { margin-right: 10px; vertical-align: 0.05em; }
@media (min-width: 768px) {
  .lx-ses { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); grid-template-areas: "head head" "info card"; column-gap: clamp(40px, 5vw, 80px); row-gap: 36px; align-items: start; }
  .lx-ses-title { font-size: clamp(48px, 4.2vw, 68px); }
  .lx-ses-card { position: sticky; top: 24px; padding: 28px 26px; }
  .lx-ses-facts > div { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 15px 0; }
  .lx-ses-facts dd { font-size: 14.5px; }
}
/* Booking confirmation dialog (#book, CSS :target; app.js keeps it out of Back and handles Esc / focus): deliberate like
   the pass checkout — the class, the pass it takes, the rules, two required consents, then 예약 확정. A sheet from the
   bottom on phones, a centred panel on wider screens. */
.lx-dlg { position: fixed; inset: 0; z-index: 90; display: grid; align-items: end; visibility: hidden; transition: visibility 0s 0.3s; }
.lx-dlg:target { visibility: visible; transition: visibility 0s; }
:root:has(.lx-dlg:target) { overflow: hidden; }
.lx-dlg-scrim { position: absolute; inset: 0; background: rgba(20, 19, 17, 0); transition: background 0.3s; }
.lx-dlg:target .lx-dlg-scrim { background: rgba(20, 19, 17, 0.42); }
.lx-dlg-panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(92vh, 860px); margin: 0; border-radius: 18px 18px 0 0; background: var(--panel); box-shadow: 0 -20px 60px -30px rgba(20, 19, 17, 0.5); transform: translateY(24px); opacity: 0; transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.21, 1), opacity 0.24s; }
.lx-dlg:target .lx-dlg-panel { transform: none; opacity: 1; }
.lx-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 14px; border-bottom: 1px solid var(--line); }
.lx-dlg-head .lx-label { margin-bottom: 6px; }
.lx-dlg-title { font: 300 30px/1.1 var(--display); color: var(--ink); }
.lx-dlg-close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); }
.lx-dlg-close:hover { border-color: var(--ink); }
.lx-dlg-body { display: grid; gap: 22px; padding: 18px 22px 22px; overflow-y: auto; overscroll-behavior: contain; }
.lx-dlg-what { border-top: 0; }
.lx-dlg-what > div:first-child { padding-top: 0; }
.lx-dlg-sec .lx-co-h { margin-bottom: 10px; font-size: 16px; }
.lx-dlg-sec .lx-co-list { list-style: disc; font-size: 13px; }
.lx-dlg-sec .lx-co-list li::marker { color: var(--muted); }
.lx-dlg-pass, .lx-dlg-pick label { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.lx-dlg-pass > span, .lx-dlg-pick label > span { display: block; }
.lx-dlg-pass small, .lx-dlg-pick small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.lx-dlg-pass em, .lx-dlg-pick em { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #efe1cc; font-size: 11px; font-style: normal; color: #74532b; }
.lx-dlg-pass .lx-mark, .lx-dlg-pick .lx-mark { margin-top: 6px; }
.lx-dlg-pick { display: grid; gap: 8px; }
.lx-dlg-pick label { padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.lx-dlg-pick label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--ink); }
.lx-dlg-pick input { flex: none; margin: 3px 0 0; accent-color: var(--ink); }
.lx-dlg-foot { display: grid; gap: 4px; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.lx-dlg-foot .lx-btn { width: 100%; font-size: 13.5px; letter-spacing: 0.02em; text-transform: none; }
.lx-dlg-foot .lx-co-note { margin-top: 4px; text-align: center; }
@media (min-width: 768px) {
  .lx-dlg { align-items: center; justify-items: center; padding: 32px; }
  .lx-dlg-panel { width: min(560px, 100%); border-radius: 20px; transform: translateY(14px) scale(0.985); }
  .lx-dlg-head, .lx-dlg-body, .lx-dlg-foot { padding-inline: 30px; }
  .lx-dlg-head { padding-top: 26px; }
  .lx-dlg-title { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-dlg-panel, .lx-dlg-scrim { transition: none; }
}
/* Booking complete (?ok=booked): the page becomes a receipt — one centred column like a purchase-complete screen, in our
   type, under the usual crumbs (the way back to the timetable). The class is one ticket (picture, title + time, the rows,
   a perforation, the pass it used); then the next steps (bookings · calendar file), the one thing to know (deadline, or
   a calm warning when online cancel is closed), what to bring. A short settle-in motion; none with reduced motion. */
.lx-done { display: grid; justify-items: center; width: min(520px, 100%); margin: clamp(20px, 4vw, 48px) auto 0; padding-bottom: clamp(56px, 8vw, 104px); text-align: center; }
.lx-done-title { font: 400 28px/1.35 var(--serif-ko); letter-spacing: -0.02em; color: var(--ink); }
.lx-done-sub { margin-top: 10px; font-size: 14px; line-height: 1.75; color: var(--text); }
.lx-ticket { --notch: 12px; position: relative; width: 100%; margin-top: 30px; overflow: hidden; border-radius: 18px; background: var(--panel); text-align: left;
  box-shadow: 0 1px 2px rgba(37, 34, 31, 0.05), 0 24px 48px -30px rgba(37, 34, 31, 0.42); }
.lx-ticket-img { display: block; aspect-ratio: 16 / 7; }
.lx-ticket-head { display: grid; justify-items: start; gap: 8px; padding: 20px 22px 4px; }
.lx-ticket-title { font: 300 30px/1.08 var(--display); color: var(--ink); }
.lx-ticket-when { font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.lx-ticket-rows { margin: 0; padding: 10px 22px 18px; }
.lx-ticket-rows > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 8px 0; font-size: 13.5px; line-height: 1.55; }
.lx-ticket-rows dt { color: var(--muted); }
.lx-ticket-rows dd { margin: 0; color: var(--ink); }
.lx-ticket-rows dd small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.lx-ticket-rows dd small a { color: var(--text); text-underline-offset: 0.3em; }
.lx-ticket-code { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
/* the perforation: a dashed rule with a half-circle notch cut on each side */
.lx-ticket-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px 20px; background: #ebe6de; font-size: 13.5px; color: var(--ink); }
.lx-ticket-foot::before { content: ""; position: absolute; left: var(--notch); right: var(--notch); top: 0; border-top: 1px dashed rgba(37, 34, 31, 0.22); }
.lx-ticket-foot::after { content: ""; position: absolute; inset: calc(var(--notch) * -1) 0 auto 0; height: calc(var(--notch) * 2);
  background: radial-gradient(circle at 0 50%, var(--bg) var(--notch), transparent calc(var(--notch) + 0.5px)), radial-gradient(circle at 100% 50%, var(--bg) var(--notch), transparent calc(var(--notch) + 0.5px)); pointer-events: none; }
.lx-ticket-foot small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.lx-ticket-foot strong { flex: none; font: 300 34px/1 var(--display); font-variant-numeric: lining-nums; }
.lx-done-act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 22px; }
.lx-done-act .lx-btn { width: 100%; font-size: 13.5px; letter-spacing: 0.02em; text-transform: none; }
.lx-done-note { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.lx-done-note b { font-weight: 500; color: var(--text); }
.lx-done-warn { width: 100%; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #f1e6d6; font-size: 12.5px; line-height: 1.65; text-align: left; color: #5e4527; }
.lx-done-warn strong { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 500; color: #4a3519; }
.lx-done-before { width: 100%; margin-top: 16px; padding: 16px 20px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); text-align: left; font-size: 12.5px; color: var(--text); }
.lx-done-before p { margin-bottom: 6px; font-weight: 500; color: var(--ink); }
.lx-done-before ul { display: grid; gap: 3px; margin: 0; padding-left: 16px; list-style: disc; }
.lx-done-before li::marker { color: var(--muted); }
@keyframes lx-done-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lx-done-title, .lx-done-sub { animation: lx-done-rise 0.5s cubic-bezier(0.32, 0.72, 0, 1) both; }
.lx-ticket { animation: lx-done-rise 0.6s cubic-bezier(0.32, 0.72, 0, 1) 0.1s both; }
.lx-done-act, .lx-done-note, .lx-done-warn, .lx-done-before { animation: lx-done-rise 0.5s cubic-bezier(0.32, 0.72, 0, 1) 0.22s both; }
@media (prefers-reduced-motion: reduce) {
  .lx-done-title, .lx-done-sub, .lx-ticket, .lx-done-act, .lx-done-note, .lx-done-warn, .lx-done-before { animation: none; }
}
@media (min-width: 768px) {
  .lx-done-title { font-size: 32px; }
  .lx-ticket-head { padding: 24px 28px 4px; }
  .lx-ticket-rows { padding: 12px 28px 20px; }
  .lx-ticket-foot { padding: 20px 28px 22px; }
}
/* ── Online: uploaded posters on the cards (admin content editor — one class = one video) ── */
.lx-vid-img > .lx-vid-poster, .lx-poster > .lx-poster-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* ── Online membership (/online/join) = the Studio pricing page and flow (user 2026-10-25) ── The plan cards are the
   pricing cards (.lx-price-cols.is-brief); every card ends in one bottom row pinned to its bottom edge — a full-width
   button, or the state in a button-sized slot — so the three rows line up whatever the text above. A member's own
   membership sits above the cards (state · 해지 신청 / 해지 취소 · My Online). Checkout and the receipt reuse
   .lx-co / .lx-done / .lx-ticket. */
.lx-join-plans .lx-price-row { border-bottom: 0; }
.lx-join-feats { display: grid; gap: 8px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 13px; color: var(--text); }
.lx-join-feats li { position: relative; padding-left: 16px; }
.lx-join-feats li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.lx-join-act { margin-top: auto; padding-top: 26px; }
.lx-join-act .lx-btn { width: 100%; font-size: 13.5px; letter-spacing: 0.02em; text-transform: none; }
.lx-join-state { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; text-align: center; color: var(--muted); }
.lx-join-back { margin: -10px 0 18px; font-size: 13px; }
.lx-join-back a { display: inline-flex; gap: 8px; color: var(--ink); text-underline-offset: 0.3em; }
.lx-join-mine-row { display: grid; gap: 14px; padding: 18px 20px; border-radius: var(--r); background: var(--panel); box-shadow: 0 18px 40px -34px rgba(37, 34, 31, 0.35); font-size: 13.5px; line-height: 1.6; color: var(--text); }
.lx-join-mine-row strong { display: block; margin-bottom: 2px; font-weight: 500; color: var(--ink); }
.lx-join-mine-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.lx-join-mine-act form { margin: 0; }
.lx-join-mine-act .lx-btn { text-transform: none; letter-spacing: 0.02em; }
@media (min-width: 768px) {
  .lx-price-cols.lx-join-plans .lx-price-col { min-height: 0; }
  .lx-join-mine-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 22px 26px; }
}