/* 범용 프로그램 페이지 틀 (discord.com 첫 화면 구성).
   굵은 대문자 헤드라인 + 제품 화면 → 좌우로 번갈아 나오는 큰 둥근 기능 카드 → 흐르는 글자 띠
   → 마지막 큰 문장과 다운로드 → 큰 워드마크 바닥글. 색은 페이지마다 .kit--이름 에서 정한다. */
.kit {
  color-scheme: dark;
  --k-bg: #0b0d2a;
  --k-bg-2: #161a55;
  --k-glow-1: #4854ff;
  --k-glow-2: #8a3cf0;
  --k-brand: #4b55e8;
  --k-brand-hover: #5a64f5;
  --k-ink: #fff;
  --k-ink-2: rgba(255, 255, 255, 0.78);
  --k-frame: rgba(160, 170, 255, 0.16);
  --k-frame-line: rgba(255, 255, 255, 0.1);
  --k-panel-a: #2a2e8f;
  --k-panel-b: #5b3fd6;
  --k-band: #3b3fb8;
  --k-foot-a: #2a2f9e;
  --k-foot-b: #5865f2;
  --k-word: #dfe2ff;
  --k-display: 'Instrument Sans', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --k-text: 'Pretendard Variable', Pretendard, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --k-radius: 48px;
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --k-wrap: 1240px;
  --k-gutter: clamp(16px, 4vw, 40px);
}
.kit, .kit *, .kit *::before, .kit *::after { box-sizing: border-box; }
html:has(body.kit) { scroll-behavior: smooth; scrollbar-color: color-mix(in srgb, var(--k-brand) 60%, #000) transparent; }
body.kit {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-ink);
  font-family: var(--k-text);
  font-size: 17px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.kit ::selection { background: color-mix(in srgb, var(--k-brand) 70%, #fff); color: #fff; }
:where(.kit) a { color: inherit; text-decoration: none; }
:where(.kit) img { display: block; max-width: 100%; }
:where(.kit) button { font: inherit; color: inherit; cursor: pointer; }
.kit :focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 10px; }
.kit .ico { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.k-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: #fff; color: #000; font-weight: 600; }
.k-skip:focus { top: 12px; }
.k-wrap { width: min(100% - 2 * var(--k-gutter), var(--k-wrap)); margin: 0 auto; }

/* 배경: 깊은 그라데이션 + 별빛 */
.k-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(1200px 800px at 12% -10%, color-mix(in srgb, var(--k-glow-1) 60%, transparent), transparent 60%),
  radial-gradient(900px 700px at 100% 30%, color-mix(in srgb, var(--k-glow-2) 45%, transparent), transparent 60%),
  linear-gradient(180deg, var(--k-bg-2), var(--k-bg) 60%); }
.k-sky::before, .k-sky::after { content: ''; position: absolute; inset: 0; background-image:
  radial-gradient(1.4px 1.4px at 12% 18%, #fff9, transparent 60%), radial-gradient(1px 1px at 32% 72%, #fff8, transparent 60%),
  radial-gradient(1.6px 1.6px at 58% 34%, #fffa, transparent 60%), radial-gradient(1px 1px at 76% 82%, #fff7, transparent 60%),
  radial-gradient(1.2px 1.2px at 88% 12%, #fff9, transparent 60%), radial-gradient(1px 1px at 46% 56%, #fff6, transparent 60%);
  background-size: 520px 520px; opacity: 0.55; }
.k-sky::after { background-size: 340px 340px; background-position: 120px 60px; opacity: 0.35; animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: 0.12; } }
.k-spark { position: absolute; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.5); pointer-events: none; }
.k-spark svg { width: 100%; height: 100%; fill: currentColor; }

/* ── 내비 ─────────────────────────────────────────────────────────── */
.k-nav { position: sticky; top: 0; z-index: 60; transition: background 0.3s, box-shadow 0.3s, -webkit-backdrop-filter 0.3s, backdrop-filter 0.3s; }
.k-nav.is-stuck { background: color-mix(in srgb, var(--k-bg) 72%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 1px 0 var(--k-frame-line); }
.k-nav__row { height: 80px; display: flex; align-items: center; gap: 24px; }
.k-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--k-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
.k-logo img { width: 34px; height: 34px; border-radius: 9px; }
.k-nav__links { display: none; flex: 1; justify-content: center; gap: 32px; font-weight: 600; font-size: 16px; }
.k-nav__links a { position: relative; padding: 6px 0; color: var(--k-ink-2); transition: color 0.2s; }
.k-nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform 0.25s var(--k-ease); }
.k-nav__links a:hover { color: #fff; }
.k-nav__links a:hover::after { transform: scaleX(1); }
.k-nav__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.k-studio { display: none; font-size: 14px; font-weight: 600; color: var(--k-ink-2); padding: 8px 12px; border-radius: 999px; transition: background 0.2s, color 0.2s; }
.k-studio:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.k-nav__pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: #fff; color: #111; font-weight: 700; font-size: 14px; white-space: nowrap; transition: box-shadow 0.2s, color 0.2s; }
.k-nav__pill:hover { color: var(--k-brand); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
@media (max-width: 480px) {
  .k-nav__row { gap: 12px; }
  .k-logo { font-size: 15px; gap: 8px; min-width: 0; }
  .k-logo img { width: 30px; height: 30px; }
  .k-nav__pill { width: 40px; padding: 0; justify-content: center; }
  .k-nav__pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.k-menu { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.08); }
.k-menu span { width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.3s var(--k-ease), opacity 0.2s; }
.k-menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.k-menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.k-menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.k-drawer { position: fixed; inset: 80px 0 auto; z-index: 59; padding: 12px var(--k-gutter) 28px; background: color-mix(in srgb, var(--k-bg) 94%, #000); border-bottom: 1px solid var(--k-frame-line); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); animation: drop 0.3s var(--k-ease) both; }
.k-drawer a { display: block; padding: 14px 0; border-bottom: 1px solid var(--k-frame-line); font-size: 18px; font-weight: 700; }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }
@media (min-width: 960px) {
  .k-nav__links, .k-studio { display: flex; }
  .k-menu, .k-drawer { display: none !important; }
}

/* ── 버튼 ─────────────────────────────────────────────────────────── */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 30px; border-radius: 28px; border: 0; font-size: 18px; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: transform 0.2s var(--k-ease), box-shadow 0.2s, background 0.2s, color 0.2s; }
.k-btn .ico { width: 22px; height: 22px; }
.k-btn--light { background: #fff; color: #23272a; }
.k-btn--light:hover { color: var(--k-brand); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); transform: translateY(-1px); }
.k-btn--brand { background: var(--k-brand); color: #fff; }
.k-btn--brand:hover { background: var(--k-brand-hover); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); transform: translateY(-1px); }
.k-btn.is-soon .ico { width: 18px; height: 18px; }
.k-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; }
@media (max-width: 540px) { .k-btns .k-btn { width: 100%; } }

/* ── 첫 화면 ─────────────────────────────────────────────────────── */
.k-hero { position: relative; padding: 40px 0 96px; }
.k-hero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .k-hero__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; } }
.k-h1 { margin: 0 0 24px; font-family: var(--k-display); font-weight: 600; font-size: clamp(40px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.k-h1 .k-h1__ko { display: block; margin-top: 0.3em; font-size: 0.62em; font-family: var(--k-text); font-weight: 800; letter-spacing: -0.04em; line-height: 1.12; text-transform: none; }
.k-lede { max-width: 30em; margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; color: var(--k-ink-2); }
.k-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.k-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; font-weight: 600; color: var(--k-ink-2); }
.k-chip .ico { width: 14px; height: 14px; }
.k-hero__visual { position: relative; min-width: 0; }
.k-hero .k-btns { margin-top: 56px; }

/* ── 기능 카드 ───────────────────────────────────────────────────── */
.k-features { display: grid; gap: clamp(72px, 9vw, 120px); padding: 40px 0 120px; }
.k-card { position: relative; display: grid; gap: 0; border-radius: var(--k-radius); padding: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--k-frame) 130%, transparent), var(--k-frame)); border: 1px solid var(--k-frame-line); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.5); isolation: isolate; }
@media (min-width: 900px) {
  .k-card { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; min-height: 560px; }
  .k-card.is-flip { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
  .k-card.is-flip .k-card__panel { order: 2; }
}
.k-card__panel { position: relative; min-width: 0; min-height: 360px; height: 100%; border-radius: calc(var(--k-radius) - 12px); overflow: hidden; background: radial-gradient(120% 90% at 30% 110%, var(--panel-b, var(--k-panel-b)), transparent 70%), linear-gradient(160deg, var(--panel-a, var(--k-panel-a)), color-mix(in srgb, var(--panel-a, var(--k-panel-a)) 60%, #000)); display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); }
@media (min-width: 900px) { .k-card__panel { min-height: 528px; } }
.k-card__panel.is-full { padding: 0; }
.k-card__copy { padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 48px) clamp(20px, 3vw, 48px); }
.k-h2 { margin: 0 0 18px; font-family: var(--k-display); font-weight: 600; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.k-h2 .k-h2__ko { display: block; margin-top: 0.3em; font-size: 0.74em; font-family: var(--k-text); font-weight: 800; letter-spacing: -0.035em; line-height: 1.2; text-transform: none; }
.k-card__copy p { max-width: 26em; margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; color: var(--k-ink-2); }
.k-card__copy p + p { margin-top: 12px; }
.k-card__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.k-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.06); font-size: 15px; font-weight: 600; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.k-toggle:hover { background: rgba(255, 255, 255, 0.14); }
.k-toggle[aria-pressed='true'] { background: #fff; border-color: #fff; color: #15171c; }
.k-toggle .ico { width: 16px; height: 16px; }
.k-note { display: block; margin-top: 16px; font-size: 14px; color: color-mix(in srgb, var(--k-ink-2) 85%, transparent); }
.k-float { position: absolute; z-index: 2; pointer-events: none; will-change: transform; transform: translate3d(0, var(--py, 0px), 0) rotate(var(--rot, 0deg)); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35)); }
@media (max-width: 899px) { .k-float { display: none; } }

/* 등장: 이미 보이는 상태에서 살짝 떠오른다 */
.k-reveal { transition: transform 0.9s var(--k-ease), opacity 0.9s var(--k-ease); }
.k-card .k-card__panel { transition: transform 0.9s var(--k-ease) 0.15s, opacity 0.9s var(--k-ease) 0.15s; }
.js .k-card.k-reveal:not(.is-in) .k-card__panel { transform: translateY(28px); opacity: 0.001; }
/* 카드 기울기와 커서를 따라가는 빛 (데스크톱, kit.js) */
.k-card { transform-style: preserve-3d; }
.k-card.is-tilt { transition: transform 0.15s ease-out; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.k-card__light { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(520px circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 255, 255, 0.11), transparent 60%); transition: opacity 0.4s; }
.k-card:hover .k-card__light { opacity: 1; }
.js .k-reveal:not(.is-in) { transform: translateY(40px) scale(0.985); }

/* ── 흐르는 글자 띠 ──────────────────────────────────────────────── */
.k-band { position: relative; overflow: hidden; padding: 22px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--k-band) 80%, #000), var(--k-band), color-mix(in srgb, var(--k-band) 80%, #000)); border-block: 1px solid var(--k-frame-line); }
.k-band__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.k-band:hover .k-band__track { animation-play-state: paused; }
.k-band__set { display: flex; align-items: center; gap: 36px; padding-right: 36px; }
.k-band__word { font-family: var(--k-display); font-weight: 600; font-size: clamp(34px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.k-band__mark { width: clamp(28px, 3vw, 40px); height: clamp(28px, 3vw, 40px); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── 사양 ───────────────────────────────────────────────────────── */
.k-specs { padding: 0 0 120px; }
.k-specs__head { text-align: center; margin-bottom: 40px; }
.k-specs__head p { max-width: 36em; margin: 0 auto; color: var(--k-ink-2); }
.k-specs__grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .k-specs__grid { grid-template-columns: 1fr 1fr; } }
.k-spec { padding: clamp(24px, 3vw, 40px); border-radius: 32px; background: var(--k-frame); border: 1px solid var(--k-frame-line); }
.k-spec h3 { margin: 0 0 20px; font-family: var(--k-display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.k-spec dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 12px 20px; font-size: 15px; }
.k-spec dt { color: color-mix(in srgb, var(--k-ink-2) 80%, transparent); font-weight: 600; }
.k-spec dd { margin: 0; }
.k-spec__foot { margin: 20px 0 0; font-size: 14px; color: var(--k-ink-2); }

/* ── 마지막 ─────────────────────────────────────────────────────── */
.k-final { position: relative; padding: 40px 0 0; text-align: center; overflow: hidden; }
.k-final__title { margin: 0 auto 48px; max-width: 16em; font-family: var(--k-display); font-weight: 600; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.k-final__title span { display: block; margin-top: 0.25em; font-size: 0.8em; font-family: var(--k-text); letter-spacing: -0.04em; text-transform: none; }
.k-final__info { margin: 20px auto 0; max-width: 40em; font-size: 14px; color: var(--k-ink-2); }
.k-lineup { position: relative; margin-top: 72px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 2vw, 28px); padding: 0 var(--k-gutter); }

/* ── 바닥글 ─────────────────────────────────────────────────────── */
.k-footer { position: relative; background: linear-gradient(180deg, var(--k-foot-a), var(--k-foot-b)); padding: 72px 0 0; overflow: hidden; }
.k-footer__grid { display: grid; gap: 40px; }
@media (min-width: 860px) { .k-footer__grid { grid-template-columns: 1.1fr repeat(2, 1fr); } }
/* 다른 작업 카드 */
.k-more { margin-bottom: 56px; }
.k-more h3 { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.k-more__row { display: grid; gap: 12px; }
@media (min-width: 720px) { .k-more__row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .k-more__row { grid-template-columns: repeat(4, 1fr); } }
.k-more__card { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); transition: background 0.25s, transform 0.3s var(--k-ease), border-color 0.25s; }
.k-more__card:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }
.k-more__name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--k-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.k-more__desc { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-more__meta { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.k-more__card--all { border-style: dashed; }
/* 내비 ← 홈 */
.k-home { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: -8px; border-radius: 50%; color: rgba(255, 255, 255, 0.75); transition: background 0.2s, color 0.2s; }
.k-home:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.k-home .ico { font-size: 18px; }
.k-footer h3 { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.k-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; font-weight: 500; }
.k-footer ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.k-footer__brand { margin: 40px 0 0; max-width: 28em; font-family: var(--k-display); font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: 1.25; letter-spacing: -0.03em; }
.k-footer__legal { margin: 20px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.k-word { margin: 40px 0 0; font-family: var(--k-display); font-weight: 600; font-size: min(250px, calc(138vw / var(--len, 8))); line-height: 0.8; letter-spacing: -0.045em; color: var(--k-word); text-align: center; white-space: nowrap; transform: translateY(0.08em); user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .kit *, .kit *::before, .kit *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .k-reveal:not(.is-in) { opacity: 1; transform: none; }
  .k-band__track { animation: none; }
}

[hidden] { display: none !important; }

/* ── 텀블벅 스토리에서 가져온 부품 ─────────────────────────────────────── */
.k-sh { margin: 0 0 clamp(32px, 5vw, 56px); }
.k-sh.is-center { text-align: center; }
.k-sh__t { font-size: clamp(34px, 4.6vw, 64px); }
.k-sh__lead { max-width: 36em; margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; color: var(--k-ink-2); }
.k-sh.is-center .k-sh__lead { margin-inline: auto; }

/* 전후 비교 */
.k-cmp-sec { padding-block: clamp(56px, 8vw, 120px); text-align: center; }
.k-cmp__q { margin: 0 auto clamp(28px, 4vw, 48px); max-width: 20em; font-weight: 800; font-size: clamp(24px, 3vw, 42px); line-height: 1.35; letter-spacing: -0.03em; text-wrap: balance; }
.k-cmp__a { margin: clamp(28px, 4vw, 48px) auto 0; max-width: 26em; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.7; color: var(--k-ink-2); }
.k-cmp__a b { color: #fff; }
.k-cmp { position: relative; max-width: 1080px; margin: 0 auto; border-radius: clamp(16px, 2vw, 28px); overflow: hidden; border: 1px solid var(--k-frame-line); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7); user-select: none; touch-action: pan-y; }
.k-cmp__img { display: block; width: 100%; height: auto; }
.k-cmp__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.k-cmp__top .k-cmp__img { height: 100%; object-fit: cover; }
.k-cmp__bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); pointer-events: none; }
.k-cmp__bar b { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 2px; padding: 0 8px; height: 44px; border-radius: 999px; background: #fff; color: #111; transform: translate(-50%, -50%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); font-size: 16px; }
.k-cmp__tag { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; }
.k-cmp__tag--l { left: 14px; } .k-cmp__tag--r { right: 14px; }
.k-cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* 한눈에 보기 */
.k-gl-sec { padding-block: clamp(40px, 6vw, 96px); }
.k-gl { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .k-gl { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.k-gl__tile { display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: 24px; border: 1px solid var(--k-frame-line); background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); color: #fff; transition: transform 0.4s var(--k-ease), border-color 0.25s, background 0.25s; }
a.k-gl__tile:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.34); background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)); }
.k-gl__shot { display: flex; align-items: center; justify-content: center; height: clamp(120px, 14vw, 190px); margin-bottom: 8px; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 100% at 30% 120%, color-mix(in srgb, var(--k-brand) 60%, transparent), transparent 70%), rgba(6, 8, 24, 0.6); }
.k-gl__shot img { max-width: 86%; max-height: calc(100% - 28px); width: auto; height: auto; object-fit: contain; min-height: 0; border-radius: 8px; transition: transform 0.6s var(--k-ease); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45)); }
a.k-gl__tile:hover .k-gl__shot img { transform: scale(1.06) rotate(-1deg); }
.k-gl__tile strong { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.k-gl__text { font-size: 14px; line-height: 1.6; color: var(--k-ink-2); }
@media (min-width: 860px) { .k-gl__tile--wide { grid-column: span 2; } .k-gl__tile--wide .k-gl__shot img { max-width: 92%; } }
.k-gl__tile--cover .k-gl__shot img { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: none; }

/* 실제 화면 플레이어 */
.k-fp-sec { padding-block: clamp(40px, 6vw, 96px); scroll-margin-top: 90px; }
.k-fp { padding: clamp(12px, 1.6vw, 20px); border-radius: var(--k-radius); background: linear-gradient(135deg, color-mix(in srgb, var(--k-frame) 130%, transparent), var(--k-frame)); border: 1px solid var(--k-frame-line); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.5); }
.k-fp__tabs { display: flex; gap: 8px; padding: 4px 4px 14px; overflow-x: auto; scrollbar-width: none; }
.k-fp__tabs::-webkit-scrollbar { display: none; }
.k-fp__tab { flex: none; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: var(--k-ink-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.k-fp__tab:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.k-fp__tab[aria-selected='true'] { background: #fff; color: #0b0d24; border-color: #fff; }
.k-fp__body { display: grid; gap: 16px; }
@media (min-width: 980px) { .k-fp__body { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr); align-items: start; } }
.k-fp__stage { position: relative; border-radius: calc(var(--k-radius) - 14px); overflow: hidden; background: #05060f; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.k-fp__video { width: 100%; height: 100%; object-fit: contain; display: block; }
.k-fp__video.is-swap { animation: k-fp-in 0.5s var(--k-ease); }
@keyframes k-fp-in { from { opacity: 0; transform: scale(0.985); } }
.k-fp__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.14); }
.k-fp__prog b { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
.k-fp__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: fp; }
.k-fp__item { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; width: 100%; padding: 14px 16px; border-radius: 18px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.04); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.k-fp__item::before { counter-increment: fp; content: counter(fp, decimal-leading-zero); grid-row: span 2; font-family: var(--k-display); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.45); padding-top: 3px; }
.k-fp__item:hover { background: rgba(255, 255, 255, 0.09); }
.k-fp__item[aria-current='true'] { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); }
.k-fp__item strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.k-fp__item span { font-size: 13.5px; line-height: 1.55; color: var(--k-ink-2); }
.k-fp__list.is-swap .k-fp__item { animation: k-fp-row 0.45s var(--k-ease) both; animation-delay: calc(var(--i) * 50ms); }
@keyframes k-fp-row { from { opacity: 0; transform: translateY(10px); } }

/* 카드 패널 속 실제 화면 영상 */
.k-clip { display: block; width: 100%; height: 100%; object-fit: cover; }
.k-card__panel.is-clip { padding: 0; display: block; }
.k-card__panel.is-clip.is-contain { display: grid; place-items: center; padding: clamp(14px, 2vw, 28px); }
.k-card__panel.is-clip.is-contain .k-clip { height: auto; border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); }
/* 카드 본문의 번호 매긴 항목 */
.k-points { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 30em; }
.k-points li { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.k-points strong { font-size: 15px; font-weight: 700; }
.k-points span { font-size: 14px; line-height: 1.6; color: var(--k-ink-2); }
.k-more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 15px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .k-fp__video.is-swap, .k-fp__list.is-swap .k-fp__item { animation: none; } }