/* Hallmark · shape: Stacked panels (a poster hero, a day rail, one pinned chapter of four groups, an approval demo, beta rows, faq, closing mast) · genre: modern-minimal · theme: brand · redesign: full
 * paper: oklch(97.5% 0.008 280) · accent: oklch(40% 0.22 275) · display: Wanted Sans · body: Wanted Sans · hero: Poster (a page-wide headline, the phone tilted across it, a brand band under it) · nav: a floating glass bar, wordmark and one action · footer: a mast, the icon and the action over the links · signature: the tilted phone that swings upright as the page scrolls
 * axes: light/geometric-sans/chromatic-indigo · posture: Poster · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R (eleven features), grouped in four with a full-screen title between groups */
/* Hallmark · waive 83 · every picture is a screenshot of the product itself; on wide screens the pinned chapter shows one at a time · the page shows 기능 화면 from 아침 점검 to AI 질문 and the user asked for every 기능 one by one */
/* Hallmark · waive 38iii · the two accented words 수십 개 and 딸깍 appear once, in the hero headline only · the user asked for 수십 개 and 딸깍 to be emphasised in the headline */
/* Hallmark · answered F8: panels stack, the hero scrubs, the chapter pins; the user asked in words for sections that separate completely on scroll */
/* Hallmark · answered: motion per emilkowalski/skills (choreograph, animate): one lead per event, exits faster than entrances, decoration fades only, nothing blocks a click */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Wanted Sans Variable"; src: url("fonts/WantedSansVariable.woff2") format("woff2"); font-weight: 400 1000; font-style: normal; font-display: swap; }

:root { --display-weight: 700; --nav-h: 76px; --panel-r: 40px; }
body { word-break: keep-all; font-size: 17px; line-height: 1.65; letter-spacing: -0.012em; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: var(--color-paper); }
h1, h2, h3 { line-height: 1.12; }
.container { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: var(--space-md); top: -60px; z-index: var(--z-toast); background: var(--color-action); color: var(--color-action-ink); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control); }
.skip:focus-visible { top: var(--space-sm); }
.anchor { display: block; height: 0; }

/* 단추 */
.btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); font: 650 16px/1 var(--font-body); letter-spacing: -0.01em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
.btn--primary { background: var(--color-action); color: var(--color-action-ink); }
.btn--secondary { background: var(--color-glass); color: var(--color-ink); border-color: var(--color-glass-edge); }
.btn svg { width: 16px; height: 16px; transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover svg { transform: translateX(3px); }
  .btn--secondary:hover { border-color: var(--color-muted); }
}
.btn--small { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* 머리 줄: 맨 위에서는 글자만, 스크롤하면 떠 있는 유리 막대 */
.nav { position: fixed; inset: env(safe-area-inset-top, 0px) 0 auto 0; z-index: var(--z-sticky-nav); padding-block: var(--space-sm); pointer-events: none; }
.nav__wrap { padding-left: max(var(--space-md), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-md), env(safe-area-inset-right, 0px)); }
.nav__bar { position: relative; pointer-events: auto; display: flex; align-items: center; gap: var(--space-lg); min-height: 56px; max-width: 1120px; margin-inline: auto; padding: 0 var(--space-xs) 0 20px; border-radius: var(--radius-pill); border: 1px solid transparent; overflow: hidden; transition: background-color var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.nav.is-scrolled .nav__bar { background: var(--nav-glass); border-color: var(--nav-edge); box-shadow: 0 18px 40px -22px var(--color-shade); backdrop-filter: blur(14px); transform: translateY(4px); }
.nav__prog { position: absolute; inset: auto 0 0 0; height: 2px; background: var(--color-accent); transform-origin: left; transform: scaleX(0); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.brand img { width: 32px; height: 32px; }
.nav__links { display: flex; gap: var(--space-lg); margin-inline: auto; }
.nav__links a { position: relative; text-decoration: none; color: var(--color-ink-2); font-size: 15px; font-weight: 500; padding: var(--space-xs) var(--space-3xs); }
.nav__links a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--color-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--color-ink); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
@media (max-width: 56rem) { .nav__links { display: none; } .nav .btn { margin-left: auto; } }

/* 유리 무대 */
.stage { position: relative; border-radius: var(--radius-card); background: linear-gradient(160deg, var(--color-glass-hi), var(--color-glass-lo)); border: 1px solid var(--color-glass-edge); box-shadow: inset 0 1px 0 var(--color-glass-line), 0 30px 60px -36px var(--color-shade); overflow: hidden; }

/* 구역: 다음 구역이 앞 구역을 덮으며 올라온다. 바탕 빛은 구역에 붙어 있어 따로 움직이지 않는다 */
.panel { position: relative; isolation: isolate; background: var(--color-paper); color: var(--color-ink); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: max(var(--section-gap-s), calc(var(--nav-h) + var(--space-lg))) var(--section-gap-s); }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(56% 60% at 100% 0%, var(--color-glow-indigo), transparent 72%), radial-gradient(48% 54% at 0% 100%, var(--color-glow-lime), transparent 72%); }
.panel--over { border-radius: var(--panel-r) var(--panel-r) 0 0; box-shadow: 0 -30px 60px -30px var(--color-shade); }
.panel--mist { background: var(--panel-mist); }
@media (prefers-reduced-motion: no-preference) {
  .js .panel { position: sticky; top: var(--stick, 0px); }
  /* 머무름: 구역이 다 보인 뒤 이만큼 더 스크롤해야 다음 구역이 올라온다 */
  .js .hold { height: calc(var(--h, 0.5) * 100svh); }
}

/* 첫 화면: 화면 폭을 채우는 제목, 그 위에 비스듬히 얹힌 휴대폰, 아래 브랜드 띠 */
.hero { justify-content: flex-start; padding-block: calc(var(--nav-h) + var(--space-lg)) var(--section-gap-s); }
.hero__meta { display: flex; justify-content: space-between; gap: var(--space-md); font-size: 14px; color: var(--color-muted); margin-bottom: var(--space-xs); }
.hero__title { max-width: none; text-align: center; font-size: clamp(2rem, calc((min(100vw, var(--container)) - 2 * var(--gutter) - var(--space-md)) / var(--len, 10)), 8.6rem); line-height: 1.03; letter-spacing: -0.05em; font-weight: 750; }
.hero__title > span { display: block; white-space: nowrap; will-change: transform; }
/* 제목 속 강조(사용자 요청): 글자색만 바꾸고, 딸깍에는 글자 위에 점 */
.hero__title .hl { color: var(--color-accent); }
.hero__title .hl--dot { -webkit-text-emphasis: filled dot var(--color-accent); text-emphasis: filled dot var(--color-accent); -webkit-text-emphasis-position: over right; text-emphasis-position: over right; }
/* 점 자리만큼 벌어진 줄 간격을 되돌린다 */
.hero__title .l2 { margin-top: -0.12em; }
@media (max-width: 40rem) { .hero__title .l2 { margin-top: 0.04em; } }
/* 띠: 뒤가 비치지 않는 젖빛 유리. 흐림 효과 없이, 면 안에 번진 빛을 넣어 유리처럼 보이게 한다 */
.hero__band { position: relative; margin-top: clamp(var(--space-lg), 2.4vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 20vw, 290px) minmax(0, 1fr); align-items: center; gap: var(--gap-columns); min-height: clamp(360px, 46svh, 440px); padding: clamp(var(--space-lg), 3vw, 48px); border-radius: var(--panel-r); background: radial-gradient(circle at 1px 1px, var(--band-dot) 1px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(160deg, var(--band-frost-hi), var(--band-frost-lo)); border: 1px solid var(--band-edge); box-shadow: inset 0 1px 0 var(--color-glass-line), 0 40px 70px -50px var(--color-shade); }
.hero__brand { display: grid; gap: var(--space-sm); align-content: center; }
.hero__brand p { max-width: 24ch; }
.hero__word { font: 750 clamp(2.4rem, 4vw, 4rem)/1 var(--font-display); letter-spacing: -0.045em; }
.hero__brand p { color: var(--color-ink-2); font-size: 16px; line-height: 1.55; }
.hero__brand .btn-row { margin-top: var(--space-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.hero__device { position: relative; align-self: stretch; min-height: 320px; z-index: 2; }
.hero__phone { position: absolute; left: 50%; top: 55%; width: 128%; max-width: none; height: auto; aspect-ratio: 720 / 1296; pointer-events: none; transform: translate(-50%, -50%) rotate(-16deg); will-change: transform; }
/* 오른쪽: 해 주는 일 네 가지를 아이콘으로. 올리면 마우스 자리에 설명 상자가 뜬다 */
.hero__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); justify-self: end; inline-size: min(100%, 340px); }
.tile { display: grid; justify-items: center; align-content: center; gap: var(--space-xs); min-height: 124px; padding: var(--space-md); border-radius: var(--radius-card); background: var(--tile-bg); border: 1px solid var(--band-edge); color: var(--color-ink); text-decoration: none; font: 600 15px/1.2 var(--font-body); letter-spacing: -0.01em; transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.tile svg { width: 30px; height: 30px; color: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.tile:active { transform: scale(0.97); }
.tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
@media (hover: hover) and (pointer: fine) {
}
.tip { position: fixed; inset: 0 auto auto 0; z-index: var(--z-tooltip); pointer-events: none; max-width: 280px; }
.tip__box { display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-ui); background: var(--tip-bg); color: var(--tip-ink); box-shadow: 0 18px 40px -18px var(--color-shade); font-size: 14.5px; line-height: 1.5; transform-origin: 0 0; transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); }
.js .tip:not(.is-on) .tip__box { opacity: 0; transform: translateY(6px) scale(0.97); }
html:not(.js) .tip { display: none; }
.tip__box b { font-weight: 650; font-size: 15.5px; letter-spacing: -0.02em; }
.tip__box span { color: var(--tip-ink-2); }
.tip.is-on .tip__box { transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out); }
.day__lead { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 52ch; }
.hero__below { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; margin-top: clamp(var(--space-xl), 5vw, 72px); }
.hero__state { font: 650 clamp(1.6rem, 2.3vw, 2.4rem)/1.3 var(--font-display); letter-spacing: -0.035em; max-width: 19ch; }
.hero__over { display: grid; gap: var(--space-xs); font-size: 16px; color: var(--color-ink-2); max-width: 44ch; }
.hero__over b { color: var(--color-ink); font-weight: 650; font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .hero__title { animation: rise 700ms var(--ease-out) both; }
  .hero__band { animation: fade 800ms var(--ease-out) 120ms both; }
  .hero__phone { animation: phone-in 1000ms var(--ease-out) 200ms both; }
  .is-wait { opacity: 0; }
  .is-in { animation: rise 720ms var(--ease-out) both; }
  @keyframes rise { from { opacity: 0; translate: 0 18px; } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes phone-in { from { opacity: 0; translate: 0 50px; rotate: -10deg; } }
}

/* 공통 구역 머리 */
.panel h2 { font-size: clamp(2.2rem, 2.8vw + 1rem, 4rem); line-height: 1.12; }
.section-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }

/* 하루 흐름 */
.day__rail { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); }
.day { position: relative; }
.day__line { position: absolute; inset: 9px 0 auto 0; height: 2px; background: var(--color-rule); }
.day__fill { display: block; block-size: 100%; inline-size: 100%; background: var(--color-accent); transform-origin: 0 0; }
.stop { position: relative; z-index: 1; display: grid; gap: var(--space-xs); align-content: start; margin-top: var(--space-xl); padding: var(--space-lg); border-radius: var(--radius-card); background: linear-gradient(160deg, var(--color-glass-hi), var(--color-glass-lo)); border: 1px solid var(--color-glass-edge); box-shadow: inset 0 1px 0 var(--color-glass-line); opacity: 0.55; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.stop::before { content: ""; position: absolute; inset: -40px auto auto var(--space-lg); width: 20px; height: 20px; border-radius: 50%; background: var(--color-paper); border: 2px solid var(--color-muted); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.stop.is-lit { opacity: 1; }
.stop.is-lit::before { background: var(--color-accent); border-color: var(--color-accent); }
.stop b { font: 700 clamp(1.4rem, 1.3vw + 0.9rem, 2.1rem)/1.1 var(--font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.stop strong { font-weight: 650; font-size: 18px; }
.stop span { color: var(--color-ink-2); font-size: 15px; line-height: 1.55; }
@media (hover: hover) and (pointer: fine) { .stop:hover { transform: translateY(-6px); opacity: 1; } }

/* 핵심 기능 */
.chapter { background-color: var(--panel-g0); justify-content: flex-start; }
/* 긴 기능 구역은 빛을 화면 크기로 붙여 둔다(구역 길이만큼 늘어나지 않게) */
.chapter::before { position: sticky; inset: 0 auto auto 0; display: block; flex: none; width: 100%; height: 100svh; margin-bottom: -100svh; background-color: var(--panel-g0); transition: background-color 500ms var(--ease-out); }
.chapter[data-g="1"]::before { background-color: var(--panel-g1); }
.chapter[data-g="2"]::before { background-color: var(--panel-g2); }
.chapter[data-g="3"]::before { background-color: var(--panel-g3); }
.chapter__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.segs { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.seg { position: relative; overflow: hidden; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-glass-edge); background: var(--color-glass); color: var(--color-ink-2); font: 600 15px/1 var(--font-body); letter-spacing: -0.01em; cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.seg__fill { position: absolute; inset: auto 0 0 0; height: 3px; background: var(--color-accent); transform-origin: left; transform: scaleX(0); }
.seg span { position: relative; }
.seg.is-on { border-color: var(--color-ink); color: var(--color-ink); }
.seg:active { transform: scale(0.97); }
.seg:hover { color: var(--color-ink); }
.seg:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }

.chapter__body { display: grid; gap: var(--space-3xl); }
.group { display: grid; gap: var(--space-xl); scroll-margin-top: calc(var(--nav-h) + var(--space-lg)); }
.group__head { display: grid; gap: var(--space-sm); }
.group__count { font-size: 15px; font-weight: 600; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.group__title { font: 700 clamp(1.8rem, 1.6vw + 1rem, 2.6rem)/1.15 var(--font-display); letter-spacing: -0.04em; margin: 0; max-width: none; }
.group__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.group__menu button { min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-glass-edge); background: var(--color-glass); color: var(--color-ink); font: 600 15px/1 var(--font-body); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.group__menu button:hover { border-color: var(--color-ink); }
.group__menu button:active { transform: scale(0.97); }
.group__menu button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.feat { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: var(--gap-columns); align-items: start; scroll-margin-top: calc(var(--nav-h) + var(--space-lg)); }
.feat__text { display: grid; gap: var(--space-sm); align-content: start; }
.feat__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0; font: 650 clamp(1.35rem, 0.8vw + 1rem, 1.7rem)/1.25 var(--font-display); letter-spacing: -0.03em; }
.feat__name button { all: unset; cursor: pointer; }
.feat__name button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.tag { font: 600 13px/1 var(--font-body); letter-spacing: 0; padding: var(--space-xs); border-radius: 8px; background: var(--color-glass); border: 1px solid var(--color-glass-edge); color: var(--color-ink-2); white-space: nowrap; }
.feat__desc { color: var(--color-ink-2); max-width: 34ch; }
.notes { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-2xs); counter-reset: note; }
.notes li { counter-increment: note; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); align-items: center; padding: 10px var(--space-sm); border-radius: var(--radius-ui); font-size: 15.5px; color: var(--color-ink-2); border: 1px solid transparent; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.notes li::before { content: counter(note); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 650 14px/1 var(--font-body); background: var(--color-paper-3); color: var(--color-ink-2); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.notes li.is-cur { background: var(--color-glass-hi); border-color: var(--color-glass-edge); color: var(--color-ink); transform: translateX(4px); box-shadow: 0 14px 30px -22px var(--color-shade); }
.notes li.is-cur::before { background: var(--color-accent); color: var(--color-accent-ink); }

.feat__fig { margin: 0; padding: var(--space-md); display: flex; flex-direction: column; }
.shot { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: var(--radius-ui); display: flex; flex-direction: column; }
.pan { position: relative; flex: none; width: var(--mw, 100%); margin: auto; aspect-ratio: var(--ar); overflow: hidden; border-radius: var(--radius-ui); background: var(--ui-bg); box-shadow: 0 0 0 1px var(--color-edge-soft); transform: translateY(var(--pan, 0px)); transition: transform 760ms var(--ease-out); }
.pan > img { position: absolute; inset-inline-start: var(--ix, 0%); inset-block-start: 0; width: var(--iw, 100%); max-width: none; height: auto; }
.pan--ui { aspect-ratio: auto; padding: var(--space-lg); color: var(--ui-ink); }
.mark { position: absolute; border: 2px solid transparent; border-radius: 10px; pointer-events: none; transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.mark i { pointer-events: auto; cursor: pointer; position: absolute; inset: -13px auto auto -13px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-body); font-style: normal; background: var(--ui-bg); color: var(--color-dot); box-shadow: 0 0 0 1.5px var(--color-dot), 0 4px 10px -4px var(--color-shade); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.mark--low i { inset: auto auto -13px -13px; }
.mark--left i { inset: calc(50% - 12px) auto auto -32px; }
.mark--right i { inset: calc(50% - 12px) -32px auto auto; }
.mark.is-cur { border-color: var(--color-dot); box-shadow: 0 0 0 4px var(--color-dot-soft); }
.mark.is-cur i { background: var(--color-dot); color: var(--color-dot-ink); transform: scale(1.12); }

/* 팀 초대: 직접 만든 화면 조각 */
.team__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.team__head b { font-size: 20px; font-weight: 650; }
.team__head small { display: block; color: var(--ui-muted); font-size: 14px; }
.team__make { display: inline-grid; place-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--ui-action); color: var(--ui-action-ink); font-weight: 650; font-size: 15px; }
.team__rows { list-style: none; margin: var(--space-md) 0 0; padding: 0; border: 1px solid var(--ui-line); border-radius: var(--radius-ui); }
.team__rows li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--ui-line); font-size: 16px; }
.team__rows li:first-child { border-top: 0; }
.team__rows i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ui-bg-2); font-style: normal; font-weight: 650; color: var(--ui-muted); }
.team__rows small { color: var(--ui-muted); }

/* 고정 무대(넓은 화면 + 움직임 허용 + 스크립트): 묶음 제목이 화면을 가득 채웠다가, 기능이 하나씩 */
.chapter.is-pinned { height: calc(100svh * (1 + var(--scroll, 10))); min-height: 0; padding-block: 0; display: block; }
.is-pinned .chapter__pin { position: sticky; top: env(safe-area-inset-top, 0px); height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); padding-block: calc(var(--nav-h) + var(--space-md)) clamp(20px, 3.5svh, 44px); }
.is-pinned .chapter__head { margin-bottom: clamp(var(--space-md), 3svh, 32px); }
.is-pinned .chapter__head h2 { font-size: clamp(1.5rem, 1.2vw + 1rem, 2.1rem); color: var(--color-ink-2); }
.is-pinned .chapter__body { grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); grid-template-rows: repeat(4, auto) minmax(0, 1fr); column-gap: var(--gap-columns); row-gap: 0; min-height: 0; align-content: start; }
.is-pinned .group, .is-pinned .feat { display: contents; }
.is-pinned .group__head { grid-column: 1; margin-bottom: var(--space-md); gap: var(--space-2xs); }
.is-pinned .group__menu { display: none; }
.is-pinned .feat__text { grid-column: 1; padding: var(--space-sm) 0 var(--space-sm) var(--space-md); border-left: 2px solid var(--color-rule); gap: var(--space-xs); transition: border-color var(--dur-long) var(--ease-out); }
.is-pinned .group:not(.is-on) > .group__head, .is-pinned .group:not(.is-on) .feat__text { display: none; }
.is-pinned .feat:not(.is-on) .feat__desc, .is-pinned .feat:not(.is-on) .notes { display: none; }
.is-pinned .feat:not(.is-on) .feat__name { color: var(--color-muted); font-size: clamp(1.1rem, 0.5vw + 0.9rem, 1.3rem); transition: color var(--dur-short) var(--ease-out); }
.is-pinned .feat:not(.is-on) .feat__name:hover { color: var(--color-ink); }
.is-pinned .feat.is-on .feat__text { border-color: var(--color-accent); }
.is-pinned .group.is-on > .group__head { animation: rise 560ms var(--ease-out) both; }
.is-pinned .feat.is-on .feat__desc { animation: rise 480ms var(--ease-out) both; }
.is-pinned .feat.is-on .notes { animation: rise 520ms var(--ease-out) 70ms both; }
.is-pinned .feat__fig { grid-column: 2; grid-row: 1 / -1; min-height: 0; align-self: start; max-height: 100%; opacity: 0; visibility: hidden; transform: translateY(26px) scale(0.975); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms; }
.is-pinned .feat.is-on .feat__fig { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms var(--ease-out), transform 640ms var(--ease-out), visibility 0s; }
.is-pinned .feat:not(.is-on) .mark { visibility: hidden; }
/* 묶음이 바뀌는 순간: 제목이 가운데 크게 있다가 스크롤에 따라 줄어들며 왼쪽 제자리로 가고, 그 사이 기능 화면이 떠오른다 */
.is-pinned .group__head { inline-size: fit-content; transform-origin: 50% 50%; }
.is-pinned .group.is-scrub .group__head, .is-pinned .group.is-scrub .feat__text, .is-pinned .group.is-scrub .feat__fig { transition: none; }

/* 직접 눌러 보는 승인 카드 */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; }
.deck-stage { height: clamp(590px, 78svh, 720px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; padding: var(--space-lg); perspective: 1100px; }
.tally { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-xl); font-size: 15px; color: var(--color-muted); }
.tally div { display: grid; justify-items: center; gap: var(--space-3xs); }
.tally b { font: 700 28px/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.tally b.bump { animation: bump 360ms var(--ease-out); }
@keyframes bump { 40% { transform: translateY(-5px) scale(1.12); } }
.deck-hint { font-size: 15px; color: var(--color-muted); }
.deck { position: relative; width: min(100%, 480px); height: 446px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 320ms var(--ease-out); }
.pcard { position: absolute; inset: 0 0 auto; background: var(--ui-bg); color: var(--ui-ink); border-radius: 20px; padding: var(--space-lg); box-shadow: 0 1px 0 var(--ui-sheen) inset, 0 0 0 1px var(--ui-edge), 0 28px 60px -28px var(--color-shade); font-size: 16px; line-height: 1.4; transform-origin: 50% 100%; transition: transform 520ms var(--ease-out), opacity 360ms var(--ease-out); }
.pcard[data-pos="1"] { transform: translateY(18px) scale(0.95); opacity: 0.72; }
.pcard[data-pos="2"] { transform: translateY(34px) scale(0.9); opacity: 0.4; }
/* 뒤에 쌓인 카드는 빈 종이처럼(글자가 앞 카드 밑에 비치지 않게), 앞으로 올 때 내용이 나타난다 */
.pcard > * { transition: opacity 280ms var(--ease-out) 120ms, visibility 0s; }
.pcard[data-pos="1"] > *, .pcard[data-pos="2"] > * { opacity: 0; visibility: hidden; transition: opacity 160ms var(--ease-out), visibility 0s linear 160ms; }
.pcard[data-pos="0"] { z-index: 3; } .pcard[data-pos="1"] { z-index: 2; } .pcard[data-pos="2"] { z-index: 1; }
.js .pcard[data-pos="out-r"] { z-index: 4; transform: translateX(120%) rotate(8deg); opacity: 0; transition: transform 420ms var(--ease-in-out), opacity 300ms var(--ease-out); }
.js .pcard[data-pos="out-l"] { z-index: 4; transform: translateX(-120%) rotate(-8deg); opacity: 0; transition: transform 420ms var(--ease-in-out), opacity 300ms var(--ease-out); }
.pcard__head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-sm); }
.pcard__who { display: grid; gap: var(--space-3xs); }
.pcard__who small { color: var(--ui-muted); font-size: 14px; }
.pcard__who b { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.chip { display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 650; padding: var(--space-2xs) var(--space-xs); border-radius: 7px; white-space: nowrap; background: var(--ui-up-bg); color: var(--ui-up); }
.chip--down { background: var(--ui-down-bg); color: var(--ui-down); }
.chip--info { background: var(--ui-info-bg); color: var(--ui-info); }
.chip--plain { background: var(--ui-bg-2); color: var(--ui-muted); }
.pcard__price { display: flex; align-items: baseline; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-sm); font-variant-numeric: tabular-nums; }
.pcard__price s { color: var(--ui-muted); font-size: 19px; }
.pcard__price strong { font-size: 42px; font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
.metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); padding: 10px 0; border-top: 1px solid var(--ui-line); font-variant-numeric: tabular-nums; }
.metric span:first-child { color: var(--ui-muted); }
.metric b { font-weight: 650; color: var(--ui-up); }
.meter { grid-column: 1 / -1; position: relative; height: 7px; border-radius: 4px; background: var(--ui-bg-2); }
.meter i { position: absolute; inset: 0; border-radius: 4px; background: var(--ui-up); transform-origin: left; transform: scaleX(var(--k)); }
.meter u { position: absolute; inset-block: -3px; width: 2px; inset-inline-start: var(--t); background: var(--ui-ink); text-decoration: none; }
.adj { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.4em; align-items: center; gap: var(--space-sm); padding: 10px 0 var(--space-3xs); border-top: 1px solid var(--ui-line); color: var(--ui-muted); font-size: 15px; }
.adj output { text-align: right; font-weight: 650; color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.adj input { appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: 24px; margin: 0; background: transparent; cursor: pointer; }
.adj input::-webkit-slider-runnable-track { block-size: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ui-bg-2) 0 min(50%, var(--p)), var(--ui-action) min(50%, var(--p)) max(50%, var(--p)), var(--ui-bg-2) max(50%, var(--p)) 100%); }
.adj input::-moz-range-track { block-size: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ui-bg-2) 0 min(50%, var(--p)), var(--ui-action) min(50%, var(--p)) max(50%, var(--p)), var(--ui-bg-2) max(50%, var(--p)) 100%); }
.adj input::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 20px; block-size: 20px; margin-top: -7px; border-radius: 50%; background: var(--ui-bg); border: 2px solid var(--ui-action); box-shadow: 0 2px 6px -2px var(--color-shade); transition: transform var(--dur-micro) var(--ease-out); }
.adj input::-moz-range-thumb { inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--ui-bg); border: 2px solid var(--ui-action); }
.adj input:active::-webkit-slider-thumb { transform: scale(1.15); }
.adj input:focus-visible { outline: 2px solid var(--ui-action); outline-offset: 2px; border-radius: 6px; }
.pcard__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-xs); margin-top: var(--space-md); }
.pbtn { min-height: 48px; border: 0; border-radius: 14px; font: 650 16px/1 var(--font-body); letter-spacing: -0.01em; background: var(--ui-bg-2); color: var(--ui-ink); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.pbtn--ok { background: var(--ui-action); color: var(--ui-action-ink); }
.pbtn:active, .pbtn.is-press { transform: scale(0.96); }
.pbtn:focus-visible { outline: 2px solid var(--ui-action); outline-offset: 2px; transition: none; }

.pcard__status { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); min-height: 28px; color: var(--ui-muted); font-size: 14px; }
.pcard[data-state="work"] [data-status] { background: var(--ui-info-bg); color: var(--ui-info); }
.pcard[data-state="done"] [data-status] { background: var(--ui-up-bg); color: var(--ui-up); }
.deck__pause { justify-self: end; min-height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); border: 1px solid var(--color-glass-edge); background: var(--color-glass); color: var(--color-ink-2); font-size: 14px; cursor: pointer; }
.deck__pause:hover { color: var(--color-ink); }
.deck__pause:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html:not(.js) .deck__pause { display: none; }
.deck-foot { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.facts { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; }
.facts li { position: relative; display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--space-md); padding: 20px var(--space-md); border-top: 1px solid var(--color-rule); border-radius: var(--radius-ui); transition: background-color var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .facts li:hover { background: var(--color-glass); } }
.facts b { font-weight: 650; }
.facts span { color: var(--color-ink-2); }

/* 베타 */
.beta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; }
.rows { margin: var(--space-lg) 0 0; display: grid; }
.rows > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--space-md); padding: 18px 0; border-top: 1px solid var(--color-rule); }
.rows dt { font-weight: 650; }
.rows dd { margin: 0; color: var(--color-ink-2); line-height: 1.6; }
.apply { margin-top: var(--space-xl); display: grid; gap: var(--space-sm); }
.apply__note { color: var(--color-ink-2); }
.checks { background: var(--ui-bg); color: var(--ui-ink); border-radius: 18px; padding: var(--space-lg); box-shadow: 0 30px 70px -30px var(--color-shade); font-size: 16.5px; }
.checks__head { display: flex; justify-content: space-between; align-items: center; font-weight: 650; }
.checks__head span { color: var(--ui-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.checks__bar { height: 6px; border-radius: 3px; background: var(--ui-bg-2); margin: var(--space-sm) 0 var(--space-xs); overflow: hidden; }
.checks__bar i { display: block; height: 100%; background: var(--ui-action); transform-origin: left; transform: scaleX(0.4); }
.checks ul { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; align-items: center; gap: var(--space-sm); padding: 14px var(--space-xs); border-top: 1px solid var(--ui-line); border-radius: 8px; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.checks li:first-child { border-top: 0; }
@media (hover: hover) and (pointer: fine) { .checks li:hover { background: var(--ui-bg-2); transform: translateX(4px); } }
.checks li svg { width: 22px; height: 22px; flex: none; }
.checks li.done { color: var(--ui-muted); }
.beta__side { display: grid; gap: var(--space-md); }
.beta__side .stage { padding: clamp(var(--space-lg), 3vw, var(--space-xl)); }
.beta__side p { color: var(--color-muted); font-size: 15px; }

/* 질문 */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.faq__list { display: grid; gap: var(--space-sm); }
.faq__item { padding: var(--space-lg); border-radius: var(--radius-card); display: grid; gap: var(--space-xs); background: linear-gradient(160deg, var(--color-glass-hi), var(--color-glass-lo)); border: 1px solid var(--color-glass-edge); box-shadow: inset 0 1px 0 var(--color-glass-line); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .faq__item:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--color-glass-line), 0 24px 44px -30px var(--color-shade); } }
.faq__item h3 { font-size: 20px; font-weight: 650; letter-spacing: -0.025em; max-width: none; }
.faq__item p { color: var(--color-ink-2); }

/* 마무리와 바닥글 */
.closing { justify-content: space-between; gap: var(--space-2xl); padding-block: max(var(--section-gap-s), calc(var(--nav-h) + var(--space-lg))) var(--space-lg); }
.closing__mast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xl); align-items: center; padding: clamp(32px, 5vw, 72px); }
.closing__icon { width: clamp(96px, 10vw, 148px); height: auto; aspect-ratio: 1; border-radius: 28%; box-shadow: 0 30px 60px -24px var(--color-shade), 0 0 0 1px var(--color-glass-edge); transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .closing__mast:hover .closing__icon { transform: rotate(-6deg) scale(1.05); } }
.closing__mast p { color: var(--color-ink-2); margin-top: var(--space-xs); }
.footer { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: var(--gap-columns); padding-block: var(--space-xl) var(--space-lg); }
.footer h3 { font: 650 15px/1.3 var(--font-body); letter-spacing: -0.01em; color: var(--color-ink); margin-bottom: var(--space-sm); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer a { color: var(--color-ink-2); text-decoration: none; font-size: 15px; }
.footer a:hover { color: var(--color-ink); }
.footer__lede { color: var(--color-muted); font-size: 15px; margin-top: var(--space-sm); }
.legal { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-lg) 0; border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: 14px; }
.legal a { color: var(--color-ink-2); }

/* 좁은 화면 */
@media (max-width: 64rem) {
  .split, .beta, .faq, .feat, .hero__below { grid-template-columns: minmax(0, 1fr); }
  .feat__desc { max-width: 52ch; }
  .hero__band { grid-template-columns: minmax(0, 1fr) clamp(180px, 26vw, 240px); }
  /* 휴대폰은 위로만 띠 밖으로 나오고, 아래 아이콘 줄은 가리지 않는다 */
  .hero__device { clip-path: inset(-400px -120px 0 -120px); }
  .hero__phone { width: 120%; top: 58%; }
  .hero__tiles { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); inline-size: 100%; justify-self: stretch; }
  .tile { min-height: 96px; }
  .day__rail { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding-left: var(--space-xl); }
  .day__line { inset: 0 auto 0 9px; inline-size: 2px; block-size: auto; }
  .stop { margin-top: 0; }
  .stop::before { inset: var(--space-lg) auto auto -40px; }
  .footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer > div:first-child { grid-column: 1 / -1; }
  .chapter__head { flex-direction: column; align-items: start; }
}
@media (max-width: 40rem) {
  :root { --panel-r: 28px; --nav-h: 68px; }
  body { font-size: 16.5px; }
  .hero__meta span:nth-child(2) { display: none; }
  .hero__band { grid-template-columns: minmax(0, 1fr); }
  .hero__device { min-height: 330px; justify-self: center; inline-size: 220px; clip-path: inset(0 -120px 0 -120px); }
  .hero__phone { width: 108%; top: 62%; }
  .hero__tiles { gap: var(--space-xs); }
  .tile { min-height: 84px; padding: var(--space-xs); font-size: 13px; }
  .tile svg { width: 26px; height: 26px; }
  .hero__brand { max-width: none; }
  .deck-stage { height: 610px; padding: var(--space-md); }
  .tally { gap: var(--space-lg); }
  .pcard { padding: 20px; }
  .pcard__price strong { font-size: 36px; }
  .deck { height: 432px; }
  .deck-hint { display: none; }
  .feat__fig { padding: var(--space-xs); }
  .shot { overflow-x: auto; overscroll-behavior-x: contain; }
  .pan { min-width: calc(600px * var(--mwf, 1)); margin: 0; }
  .facts li, .rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .closing__mast { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__rows li { grid-template-columns: 40px minmax(0, 1fr); }
  .team__rows li > .chip { grid-column: 2; justify-self: start; }
}
main { display: contents; }

/* 화면 아래 스크롤 안내: 맨 위에서만 보이고, 내려가면 사라진다 */
.scroll-cue { position: fixed; left: 50%; bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--nav-glass); border: 1px solid var(--nav-edge); box-shadow: 0 14px 30px -18px var(--color-shade); color: var(--color-ink); font: 600 14px/1 var(--font-body); text-decoration: none; transform: translateX(-50%); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.scroll-cue svg { width: 16px; height: 16px; }
.scroll-cue:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.scroll-cue.is-off { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg { animation: cue-bob 1800ms var(--ease-in-out) infinite; }
  .scroll-cue:hover svg, .scroll-cue:focus-visible svg { animation-play-state: paused; }
  @keyframes cue-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
}

/* 원 모양 포인터(마우스가 있는 화면에서만): 검은 테두리 + 흰 면, 가운데 작은 점 */
.cursor { display: none; }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor .cursor { display: block; position: fixed; inset: 0 auto auto 0; z-index: var(--z-tooltip); pointer-events: none; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.has-cursor .cursor.is-on { opacity: 1; }
.cursor__ring, .cursor__dot { position: fixed; inset: 0 auto auto 0; display: block; border-radius: 50%; will-change: transform; }
.cursor__ring::before, .cursor__dot::before { content: ""; position: absolute; border-radius: 50%; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.cursor__ring::before { inset: -17px; border: 1.5px solid var(--cursor-ink); background: var(--cursor-fill); box-shadow: 0 6px 16px -8px var(--color-shade); }
.cursor__dot::before { inset: -3px; background: var(--cursor-ink); }
.cursor.is-hot .cursor__ring::before { transform: scale(1.6); background: var(--cursor-fill-hot); }
.cursor.is-hot .cursor__dot::before { transform: scale(0.66); }
.cursor.is-down .cursor__ring::before { transform: scale(0.76); }
.cursor.is-hot.is-down .cursor__ring::before { transform: scale(1.3); }

/* 버튼 호버: 바뀐 색의 같은 내용을 한 겹 더 깔고, 그 겹을 왼쪽부터 드러낸다(배경색과 글자색이 같은 선을 따라 바뀜) */
.btn--primary { --sw-bg: var(--sweep-lime); --sw-ink: var(--sweep-lime-ink); }
.btn--secondary, .group__menu button, .deck__pause, .tile { --sw-bg: var(--color-action); --sw-ink: var(--color-action-ink); }
.sweep { position: relative; overflow: hidden; isolation: isolate; }
.sweep__label { display: contents; }
.sweep__fill { position: absolute; inset: -1px; z-index: 1; display: flex; align-items: center; justify-content: center; gap: inherit; padding: inherit; border: 1px solid transparent; border-radius: inherit; background: var(--sw-bg); color: var(--sw-ink); font: inherit; letter-spacing: inherit; white-space: nowrap; pointer-events: none; clip-path: inset(0 100% 0 0); transition: clip-path 240ms var(--ease-out); }
.tile .sweep__fill { display: grid; justify-items: center; align-content: center; }
.sweep__fill svg { color: inherit; }
.sweep[data-sw="up"] .sweep__fill { clip-path: inset(100% 0 0 0); }
.sweep[data-sw="center"] .sweep__fill { clip-path: inset(0 50% 0 50%); }
.sweep[data-sw="circle"] .sweep__fill { clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sweep:hover .sweep__fill { clip-path: inset(0 0 0 0); transition: clip-path 420ms var(--ease-out); }
  .sweep[data-sw="circle"]:hover .sweep__fill { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); transition: clip-path 520ms var(--ease-out); }
  .tile:hover .sweep__fill svg { animation: tile-pop 420ms var(--ease-out); }
  @keyframes tile-pop { 40% { transform: translateY(-4px) scale(1.08); } }
  /* 승인 카드 버튼: 겹 없이 색만 살짝 */
  .pbtn--ok:hover { background: var(--ui-action-hover); }
  .pbtn--no:hover { background: var(--ui-line); }
}
.sweep:focus-visible .sweep__fill { clip-path: inset(0 0 0 0); transition: none; }
.sweep[data-sw="circle"]:focus-visible .sweep__fill { clip-path: circle(150% at 50% 50%); }