@import url("/_ds/tokens.css");
/* 제목이 쓰는 글꼴. 라틴만 받고 한글은 아래 본문 글꼴이 받는다(§제목은 Plus Jakarta Sans) */
@import url("https://api.fontshare.com/v2/css?f%5B%5D=plus-jakarta-sans@200,300,400,500,600,700,800&display=swap");

/* Bottari LP v2 : Desktop 1440
   색·선·라운드·그림자는 전부 앱 DS 토큰(app/_ds/tokens.css)의 별칭이다.
   아래 이름은 랜딩이 쓰는 역할 이름이고 값은 DS 가 든다. 여기에 색을 적지 않는다.
   크기·간격·자간은 Figma 구조라 그대로 둔다. */

:root{
  /* ---- 모션 토큰 (2026-09-11 jinny 「타이밍 감을 토큰으로」) : 길이 셋 · 곡선 셋. 지연(언제)은 컷마다 박자표에 초로 적고, 길이(얼마나)는 여기서만 정한다.
     규칙은 아래 합산 주석이 든다 */
  --t-fast:.12s;--t-mid:.12s;--t-cam:1.4s;--t-cut:0s;--t-press:.24s;
  --e-out:cubic-bezier(.2,.8,.2,1);--e-pop:cubic-bezier(.2,.9,.3,1.2);--e-inout:cubic-bezier(.4,0,.2,1);
  /* 값은 영상 셋 실측 합산(2026-09-11 · 계획서 59) : 등장·퇴장 한 프레임에 가깝게 .12 · 넓어지는 카메라 1.4 ease-out · 가까워질 땐 컷(--t-cut 0) ·
     커서 이동 .28 · 클릭 전 멈춤 .22 · 타자 긴 문장 30cps / 짧은 칸 50cps / 클로즈업 12cps · 읽는 시간 한두 줄 고정 1.9s · 문단 3.5s ·
     마디 간격 읽을 말 .6 / 안 읽는 덩이 .2 / 목록 줄 .35 · 한 화면의 가구는 한 프레임에 · 사건 둘은 안 겹침 · 끝의 drift 는 안 쓴다(되풀이에 튄다 · 09-12) · 튕김은 부품에 없음 */
  /* surfaces : --bg-page · --bg-sunken 은 DS 이름 그대로라 여기서 다시 선언하지 않는다 */
  --bg-raised:var(--bg-overlay);
  --bg-chip:var(--chip-bg-quiet);
  --bg-white:#FFFFFF; /* 랜딩 배경은 순백(2026-09-10 jinny) */
  /* lines */
  --line:var(--border-default);
  --line-2:var(--border-default);
  --line-soft:var(--border-subtle);
  --line-input:var(--border-strong);
  /* ink */
  --ink:var(--text-primary);
  --ink-body:var(--text-secondary);
  --ink-2:var(--text-secondary);
  --ink-mute:var(--text-tertiary);
  --ink-3:var(--text-tertiary);
  --ink-4:var(--text-muted);
  --ink-5:var(--text-placeholder);
  --ink-inverse:var(--text-inverse);
  --ink-inverse-2:color-mix(in srgb, var(--text-inverse) 72%, var(--bg-inverted));
  /* accent : 면은 accent-brand, 글자는 text-brand */
  --accent:var(--accent-brand);
  --accent-soft:var(--overlay-brand);
  --accent-ink:var(--text-brand);
  /* status */
  --ok:var(--status-text-success);
  --ok-2:var(--status-text-success);
  --ok-soft:var(--status-bg-success);
  --ok-ink:var(--status-text-success);
  --danger:var(--status-text-danger);
  --danger-2:var(--status-solid-danger);
  --warn-soft:var(--status-bg-warning);
  --warn-ink:var(--status-text-warning);
  --mention-soft:var(--tint-bg-pink);
  --mention-ink:var(--tint-text-pink);
  /* cast */
  --av-rose:var(--tint-solid-red);
  --av-pink:var(--tint-solid-pink);
  --av-green:var(--tint-solid-green);
  --av-green-2:var(--tint-solid-green);
  --av-orange:var(--tint-solid-orange);
  --av-blue:var(--tint-solid-blue);
  /* 랜딩만의 튀는 면색 (2026-09-10 jinny 「배경 색상은 좀 더 채도 높게 튀게」) : 앱 분류색(--tint-solid-*)은
     표·칩용이라 채도가 낮다. 마케팅 면은 이 넷만 쓰고, 그 위 글자는 --text-on-brand 다 */
  --pop-purple:#A259FF;
  --pop-green:#0FA958;
  --pop-orange:#FF5A2E;
  --pop-blue:#1E8BFF;
  --pop-yellow:#FFC700;
  --pop-pink:#FF5CA8;
  /* ---- 랜딩 톤 (2026-09-11 jinny 「검정 잉크 + 흰 종이 + 선명한 면색 · 그림자·그라디언트·검정 보더 없음 · Figma 처럼 대비 높고 다채롭게」) ----
     앱 분류색은 채도가 낮아 랜딩에선 여기서 덮는다(tokens.css 는 안 건드린다). 사람 = 선명한 색 하나 · 면 = 그 색을 34% 로 흰색에 섞은 것 · 글자는 잉크 */
  --tint-solid-orange:var(--pop-orange);--tint-solid-green:var(--pop-green);--tint-solid-blue:var(--pop-blue);--tint-solid-purple:var(--pop-purple);
  --tint-bg-orange:color-mix(in srgb,var(--pop-orange) 34%,#fff);--tint-bg-green:color-mix(in srgb,var(--pop-green) 34%,#fff);--tint-bg-blue:color-mix(in srgb,var(--pop-blue) 34%,#fff);--tint-bg-purple:color-mix(in srgb,var(--pop-purple) 34%,#fff);
  --tint-text-orange:#111;--tint-text-green:#111;--tint-text-blue:#111;--tint-text-purple:#111;
  --panel-purple:#6B2CFF;--panel-blue:#1B6FE0;--panel-orange:#FF6A1F;--panel-pink:#FFA1F1;   /* 판은 채도 높은 솔리드(2026-09-12 jinny 「차가운 회색 + 검정 + 파랑 · 채도 높은 포인트 · 검정을 섞는다」) */--panel-paper:#E6E8EB;--section-paper:#F2F3F5;   /* 미색은 노랗다 → 밝은 쿨 그레이(2026-09-12 jinny) */
  /* TONE.md 판 색(2026-09-13 jinny · 무드보드 결론) : 비껴간 파스텔 넷 · 파랑은 판이 아니라 한 점 */
  --panel-lime:#DEF683;--panel-peri:#B9B8FF;--panel-coral:#FF7A3D;--panel-pink2:#FFB3E6;--panel-ink:#141416;
  --pop-teal:#12B5B0;
  --pop-tint-yellow:#FFF3CC;
  --pop-tint-blue:#DDEEFF;
  --pop-tint-pink:#FFE1EF;
  --pop-tint-teal:#D6F5F3;
  --cut-radius:24px;
  /* 그림자는 한 벌 : 경계를 말하는 링 + 2~4px 흐림 (2026-09-13 · elevenlabs 실측 .5px .075 + 2px 4px .04). 8px 32px 는 안 쓴다 */
  --shadow-ring:0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.04);
  /* 혜택 그라디언트 한 값 : 요금 Business 카드 · 하단 혜택 띠 · 대기자 모달 머리가 같이 쓴다(2026-09-15 jinny 「카드 그라디언트랑 동일한거」 · 판 색 셋 페리·파랑·핑크만 · 글은 잉크) */
  --promo-grad:
    radial-gradient(90% 90% at 100% 0%,rgba(255,179,230,.9) 0%,rgba(255,179,230,0) 60%),
    radial-gradient(70% 80% at 0% 100%,rgba(185,184,255,.6) 0%,rgba(185,184,255,0) 62%),
    linear-gradient(160deg,#D2ECFF 0%,#A6D9FF 48%,#DCF0FF 100%);   /* 바탕은 하늘색 · 핑크·페리는 귀퉁이에만(2026-09-15 jinny 코멘트 1789449608037 「많이 보라색」) */
  --promo-grad-fade:linear-gradient(180deg,rgba(255,255,255,0) 30%,var(--bg-white) 100%);
  /* layout */
  --pad:120px;
  --content-w:1142px;   /* 본문 폭(2026-09-14 jinny : 1200 보다 조금 좁게) · 좌우 여백은 --pad */
  --wrap:calc(var(--content-w) + 2 * var(--pad));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:128px;-webkit-text-size-adjust:none;text-size-adjust:none}   /* 앵커로 뛰면 고정 바(64) 아래에 숨 64 를 더 둔다 : 바 높이만 주면 제목이 바에 닿는다(2026-09-21 jinny) */   /* iOS Safari 가 넓은 블록(zoom 으로 줄인 1200 무대) 안의 작은 글자를 저 혼자 키워 컷 안 글자만 무대 배율을 안 따랐다(2026-09-15 시뮬레이터 실측) */   /* html·main 에 overflow-x:clip 을 걸면 히어로 sticky 가 풀린다(실측 2026-09-14) : 가로 넘침은 body overflow-x hidden 과 .hero-wrap clip 이 막는다 */
/* 보자기 도구 판(.bj-nav · .bj-panel · 리뷰 판)이 열리면 그 폭만큼 body 가 밀린다(panel.js · review.js 의 규칙 그대로).
   랜딩은 그 남은 폭을 **브라우저 창처럼** 쓴다 : 폭이 줄어도 크기는 그대로고, 반응형 기준을 넘으면 그 규칙대로 다시 놓인다 ·
   무대(모션 · 그림)만 비례로 준다(2026-09-12 jinny 「통째로 줄이면 안 된다」). 기준은 창 폭이 아니라 body 안쪽 폭이라 미디어 쿼리 대신
   lp.js 가 잰 폭을 <html data-lpw="m|s"> 로 놓고 그 속성으로 가른다(1200 · 900).
   ⚠️ body{container-type} 은 안 쓴다 : 엔진에 따라 layout containment 가 걸려 고정 요소(도구 판 · 아래 바 · .top)가 창이 아니라 body 기준으로 놓였다(2026-09-12 jinny 「하단 크롬바가 사라졌어 · 사이드바 내용물이 사라짐」) */
:root[data-review-open="true"] body:not(:has(.bj-panel)) .top{right:320px}
/* 아래 혜택 띠도 같은 규칙 : 도구 판이 열리면 그 폭만큼 비켜서 사이드바에 안 가린다(2026-09-14 jinny) */
:root[data-review-open="true"] body:not(:has(.bj-panel)) .hx-strip{right:320px}
body{
  margin:0;background:var(--bg-white);color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
p,h1,h2,h3{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
s{text-decoration:line-through;text-decoration-skip-ink:none}

/* ---------- shared shells ---------- */
.rule{border:0;height:1px;background:var(--line);max-width:var(--wrap);margin:0 auto;width:100%}
.hero,.cuts,.promo,.compare,   /* .nav 는 뺐다 : 헤더 배경은 페이지 폭 전체 · 안쪽(.nav-in)만 1440(2026-09-12 jinny 「회색 배경에서 헤더 배경이 잘림」) */
.nav-in,.cuts,.compare,.context .sec-in,.claude-layer,.pricing,.faq{max-width:var(--wrap);margin:0 auto;width:100%}
.foot-top,.foot-bottom{max-width:var(--content-w);margin-left:auto;margin-right:auto;width:100%}   /* 마지막 띠·푸터는 페이지 폭 전체를 덮고 안쪽만 1440(2026-09-13 jinny 「양옆 흰 여백 안 생기게」) */

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  font-weight:500;white-space:nowrap;text-decoration:none}   /* pill · 500 (2026-09-13 jinny) */
.btn-dark{background:var(--ink);color:var(--ink-inverse)}
/* 검정 버튼(2026-09-14 jinny 코멘트 1789369922424) : 호버에 파랑이 되고 오른쪽에 화살표가 밀려 나온다 · 누르면 .96 로 눌린다 */
.btn-dark{transition:background .2s,color .2s,scale .12s}
.btn-dark:hover{background:var(--accent);color:var(--text-on-brand)}
.btn-dark::after,.btn-line::after,.m-row .btn::after{content:'→';display:inline-block;max-width:0;overflow:hidden;opacity:0;margin-left:0;transition:max-width .25s var(--e-out),opacity .2s,margin-left .25s var(--e-out)}
.btn-dark:hover::after,.btn-line:hover::after,.m-row:hover .btn::after{max-width:1.2em;opacity:1;margin-left:8px}
.m-row .btn-blue:hover{background:var(--accent)}   /* 행 단추는 처음부터 파랑 · 호버엔 화살표만(2026-09-15 jinny 코멘트 1789458799341) */
.btn-dark:active{scale:.96}
.btn-line{border:1px solid var(--line-input);color:var(--ink);background:none;text-decoration:none;transition:border-color .2s,scale .12s}   /* 선은 한 단 연하게 · 호버에 화살표(2026-09-15 jinny 코멘트 1789455486441) */
.btn-line:hover{border-color:var(--ink)}
.btn-line:active{scale:.96}
.btn-blue{background:var(--accent);color:var(--text-on-brand);transition:background .2s}
.btn-blue:hover{background:var(--accent-ink)}   /* 모달 CTA 는 처음부터 파랑(2026-09-15 jinny 코멘트 1789448785273) */
.btn-light{background:var(--bg-white);color:var(--ink);box-shadow:var(--shadow-ring)}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-lg{height:44px;padding:0 20px;font-size:16px}
.btn-xs{height:36px;padding:0 14px;font-size:14px}   /* 모달 완료 행의 단추도 이 칸(40 → 36) · 둘이 같은 검정(2026-09-15 jinny 코멘트 1789449012778) */
.btn-block{width:100%;padding:0 22px}


/* ---------- nav ---------- */
.nav{background:var(--bg-white)}   /* 보더 없음 · 띠와 흰 바탕만(2026-09-13) */
.nav-in{height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad)}   /* 양끝이 같은 폭이라 버튼이 커져도 가운데 메뉴가 안 밀린다(2026-09-14 jinny) */
.nav-in>:last-child{justify-self:end}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.brand{display:block}
.nav-links{display:flex;gap:28px;font-weight:400;font-size:14px;color:var(--ink)}
.nav-links a{text-decoration:none}

/* ---------- type scale ---------- */
.eyebrow{font-weight:400;font-size:13px;letter-spacing:0;color:var(--ink-3)}   /* 눈썹은 작은 회색 한 줄 · 색·굵기 없음(2026-09-13) */
.eyebrow-tight{letter-spacing:1.04px}
.h2{font-weight:500;font-size:36px;line-height:1.17;letter-spacing:-.5px;color:var(--ink)}   /* 제목은 300~400 · 36 (2026-09-13 jinny) */
.h2-40{font-weight:500;font-size:32px;line-height:1.2;letter-spacing:-.3px}
.h2-w720{max-width:720px}
.h2-568{max-width:600px}
.h3{font-weight:500;font-size:20px;letter-spacing:-.2px;color:var(--ink)}

/* ── 제목은 Plus Jakarta Sans · 본문은 Pretendard (2026-09-18 🔒 jinny) ──────────
   **라틴만 이 글꼴이 받는다.** 이 글꼴에는 한글이 없어서, 이름 차례에서 본문 글꼴을 바로
   뒤에 두면 브라우저가 글자 하나씩 고른다(라틴 Jakarta · 한글 Pretendard).
   본문·앱 목업은 `--font-sans` 그대로라 안 바뀐다 : 컷 안은 실제 제품 화면이고 제품에는
   한글이 있어 이 글꼴이 제품 서체가 될 수 없다.
   굵기는 각 제목 규칙이 500 으로 든다. 낱말 사이는 이 글꼴의 빈칸이 본문 글꼴보다
   0.07em 좁아(실측 0.32em 대 0.39em) 그만큼 준다. 안 주면 낱말이 붙어 읽힌다. */
.hero-title,
.h2,
.h2-40,
.h3,
.cut .h3,
.ctx-item .fh,
.pprice b,
.final-h,
.m-h,
.legal h1{
  font-family:'Plus Jakarta Sans', var(--font-sans);
  word-spacing:.07em;
}
.body{font-size:16px;line-height:1.6;color:var(--text-secondary);max-width:568px}
.lede{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:560px}   /* 섹션 머리의 서브라인은 다 이 한 칸이다(Claude 절 본문 둘도 · 2026-09-12 jinny 코멘트) */
.cl-text .lede{max-width:568px}

/* ---------- avatars ---------- */
.av{position:relative;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);color:var(--text-on-brand);font-weight:600;flex:none}
.av-20{width:20px;height:20px;font-size:8px}
.av-22{width:22px;height:22px;font-size:9px}
.av-24{width:24px;height:24px;font-size:10px}
.av-26{width:26px;height:26px;font-size:11px}
.av-28{width:28px;height:28px;font-size:12px}
.av-sq{border-radius:var(--radius-md)}
.av-sq7{border-radius:var(--radius-sm)}
.av-ring{border:2px solid var(--bg-white)}
.av-rose{background:var(--av-rose)}
.av-pink{background:var(--av-pink)}
.av-green{background:var(--av-green)}
.av-green-2{background:var(--av-green-2)}
.av-orange{background:var(--av-orange)}
.av-blue{background:var(--av-blue)}
.av .dot{position:absolute;left:14px;top:14px;width:9px;height:9px}
.mock-dm .av-green{background:var(--av-green-2)}


/* ---------- top : 굴려도 고정 · 뒤가 비친다 ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;}
/* 보자기 도구 바가 위·아래를 덮는 만큼만 비킨다 : --ct(위 바) · --cb(아래 바)는 lp.js 가 보이는 바의 실제 높이를 잰 값이다 · 바가 숨으면 0 이라 남은 화면 전체를 쓴다(2026-09-15 jinny) */
.top{top:var(--ct,0px)}
body{padding-bottom:var(--cb,0px)}
/* 히어로는 첫 화면을 꽉 채운다 : 더미가 화면 바닥에 닿는다. 미리보기는 위·아래 도구 바 40px 씩을 뺀다 */
.top{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

.top .nav{background:color-mix(in srgb,var(--bg-white) 74%,transparent)}

/* ---------- hero : 제목·서브 문구·CTA 가 한 덩이로 가운데 · 뒤로 사진 원이 돈다(계획서 56) ----------
   폭이 좁으면 제목·서브 문구가 한 단씩 작아진다(아래 :root[data-lpw]) */
main{padding-top:64px}   /* nav 64 뿐이다 · 띠는 없다(2026-09-13 jinny) */
.hero-wrap{overflow-x:clip}   /* 사진 원 클립이 좌우로 100vw 나간다 : 가로 스크롤이 안 생기게(clip 은 sticky 를 안 깬다) */   /* 두 화면 : 첫 화면만큼 내리는 동안 히어로는 붙어 있고 문제 → 해결로 바뀐다(2026-09-14 jinny) */
.hero{position:relative;height:calc(100vh - 64px);max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:center;padding:0 var(--pad) 24px;overflow:visible;z-index:1}   /* 위 여백 0 (2026-09-18 jinny 코멘트 1789718052671) : 글 덩이가 가운데 정렬이라 위 여백이 있으면 그만큼 아래로 치우친다 */   /* 카드 넷의 그림자가 잘리지 않게(2026-09-13 jinny) · 가로 넘침은 body 가 막는다 */
.hero{height:calc(100vh - 64px - var(--ct,0px) - var(--cb,0px))}   /* 도구 바가 보이는 만큼만 뺀다(위 body 여백은 보자기가 준다) */
.cuts{position:relative;z-index:3;background:var(--bg-white);overflow-x:clip}   /* 폰에서 무대(1200)가 판 밖으로 세는 것을 막는다(2026-09-14 · sticky 가 없는 절이라 clip 이 안전하다) */
/* 제목 있는 절 사이엔 선이 없다(2026-09-14 jinny · B) : 위아래 120 여백만이 절을 가른다 · 제목 없이 짧은 끝 CTA(.final)와 푸터만 선을 둔다 */
.claude-layer,.compare,.context,.pricing,.faq{border-top:0}
.claude-layer,.context,.pricing,.faq,.final{position:relative;z-index:3;background:var(--bg-white)}
/* 덩이 셋 : 글(아이브로우·제목·서브라인 16) → 32 → 버튼 → 48 → 컴포저. 컴포저 높이는 예약해 두어(글 넉 줄) 커져도 제목이 안 밀린다 */
.hero-core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:100%}
.hero-text{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-20);max-width:760px}   /* 제목과 서브 사이 20 (2026-09-18 jinny 코멘트 1789739487801 : 16 → space-20) */
.hero-title{position:relative;display:grid;justify-items:center;font-weight:500;font-size:52px;line-height:1.1;letter-spacing:-1.3px;text-align:center}
/* 제목 두 벌이 같은 자리 : 문제(ht-a)가 위로 빠지고 해결(ht-b)이 아래에서 올라온다(.45) · 서브 문구는 문제 상태에만
   자리는 둘이 같이 잡는다(grid 한 칸에 겹친다 · .hero-below 와 같은 방식) : 한 벌만 잡으면 긴 쪽이 그 폭에 접혀 상태가 바뀔 때 높이가 튄다 */
.ht{display:block}
/* 해결 제목은 글자가 파랗게 찍히며 나온다(2026-09-15 jinny 코멘트 1789449853605 「제목이 바뀌는 것이 눈에 띄게」) : lp.js 가 글자마다 <i class=hc> 로 싼다 · 1.1 부터 글자당 35ms · 잉크로 서고 파란 꼬리가 따라간다(jinny 「검은 글씨가 나올 때 꼬리가 파란색」) */
.ht .hc{opacity:0;font-style:normal;animation:hcin .45s var(--e-out) calc(.15s + var(--i,0) * 40ms - var(--i,0) * var(--i,0) * .44ms) both}   /* 들어오면 바로 글자가 표시된다(.15) : 글자 사이가 40ms 에서 점점 좁아진다(i 번째 간격 = 40 - .88·i ms · 32자째 12ms · 2026-09-15 jinny 코멘트 1789459324426) */
@keyframes hcin{0%{opacity:0;color:var(--ink)}8%,25%{opacity:1;color:var(--ink)}45%,70%{color:var(--accent)}100%{opacity:1;color:var(--ink)}}   /* 컴포저 타자(twink)와 같은 박자 : 검은 글씨가 서고 꼬리가 파랗다 · 끝 값을 다 적는다(안 적으면 밑값 opacity 0 으로 돌아가 글이 사라졌다 · 2026-09-15 jinny) */
/* 서브 문구도 두 벌 : 문제(hs-a)가 위로 빠지고 해결(hs-b)이 아래에서 올라온다
   자리는 제목과 같이 둘이 함께 잡는다(grid 한 칸에 겹친다) : 한 벌만 잡으면 긴 쪽이 그 폭에 접힌다 */
/* 박자(2026-09-21 jinny 「타이틀 → 하단 서브 요소 → 그래픽」 · 원래 뜻은 2026-09-14 jinny 「순차로 · 시간차」) :
   .15 제목(글자마다 찍혀 .94 에 끝난다) → .55 서브 문구(.4) → .75 CTA(.4) → .95 사진 원(.6) → 1.65 아래 화살표 → 3.0 띠.
   넷은 아래 §등장 넷은 한 시계로 가 같이 출발시킨다 */
.hero-sub{font:var(--ts-body);letter-spacing:var(--ts-body-ls);color:var(--ink-2);text-align:center;max-width:680px;text-wrap:balance;animation:heroin .4s var(--e-out) .55s both}   /* 제목 첫 줄이 다 선 뒤(.62)에 겹쳐 올라온다(2026-09-21 jinny 「타이틀 → 하단 서브 요소 → 그래픽」 · 전엔 제목과 같은 .15 라 둘이 같이 났다) */
@keyframes heroin{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes heroin2{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}   /* 사진 원은 자리만 잡고 있다가 켜진다(안 보일 땐 visibility 도 꺼 둔다) */   /* 들어오는 한 벌 : 아래에서 올라오며 켜진다 */
/* 등장 넷은 **다 실린 뒤 한 시계로** 시작한다(2026-09-21 jinny 「전부 로딩된 다음에 시작」) :
   안 묶으면 HTML 에 있는 셋이 첫 그림에 이미 돌고, 제목은 lp.js 가 글자로 쪼갠 뒤에 서서 259ms 늦게 출발한다(실측).
   index.html 이 첫 그림 전에 넷을 멈춰 두고(hero-hold) load 때 한 번에 푼다(hero-go · 푸는 자리는 lp.js §히어로를 연다).
   멈춘 동안은 fill both 가 첫 칸을 잡고 있어 아무것도 안 보인다 · JS 가 없으면 두 반이 다 안 붙어 그냥 돈다 */
html.hero-hold .ht .hc,html.hero-hold .hero-sub,html.hero-hold .cta-block,html.hero-hold .hx-ringclip{animation-play-state:paused}
html.hero-go .ht .hc,html.hero-go .hero-sub,html.hero-go .cta-block,html.hero-go .hx-ringclip{animation-play-state:running}
/* 멈춰 둔 동안은 제목 글도 **안 보인다** : 쪼개기 전 .ht 는 생 글이라 애니메이션이 없고, 그래서 첫 그림에 제목이
   통째로 났다가 lp.js 가 쪼개는 순간 사라졌다(2026-09-21 jinny 「타이틀 전체가 한번 나타났다 사라지고」).
   자리는 그대로 잡는다(visibility) : 숨기는 동안 제목 높이가 줄면 아래 덩이가 튄다 */
html.hero-hold:not(.hero-go) .hero-title .ht{visibility:hidden}
/* 아래 화살표도 같은 시계에 둔다 : 제 전환(1.65s)을 첫 그림부터 재어 히어로보다 먼저 설 수 있었다 */
html.hero-hold:not(.hero-go) .hero .hx-down{opacity:0;visibility:hidden;transition:none;animation:none}
.cta-block{display:flex;flex-direction:column;align-items:center;margin-top:32px;z-index:3}
.hero-foot{font-size:13px;color:var(--ink-3)}
/* 혜택 띠(2026-09-14 jinny · 참조 Figma Make 하단 띠) : 화면 아래 고정 64 · 해결 글이 나온 뒤(.6) 아래에서 올라온다 · 되돌리면 내려간다 · × 로 닫으면 끝까지 없다 */
.hx-strip{position:fixed;left:0;right:0;bottom:0;z-index:40;height:72px;display:flex;align-items:center;justify-content:center;gap:20px;padding:0 72px 0 24px;background:var(--accent);color:#fff;font-size:16px;translate:0 100%;transition:translate .45s var(--e-out);will-change:translate;backface-visibility:hidden}   /* 제 층으로 올린다 : 올라온 뒤 가운데가 안 그려진 채 남았다(Electron · 2026-09-14 jinny) */   /* 판 = 브랜드 파랑 단색(--accent) · 글은 흰색 · 단추는 검정(2026-09-15 jinny : 순백 페이지에서 연하늘 그라디언트는 명도가 비슷해 안 튀었다 · 24종 중 고름 · 요금 카드·모달의 --promo-grad 는 그대로) · 높이 72(2026-09-13 jinny) · 계획서 61 A1 */
.hx-strip-t{flex:0 1 auto;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 배지와 문구가 한 문단이다 : 폰에서 둘이 한 문장으로 이어져야 한다(2026-09-15 jinny) */
.hx-strip b{font-size:16px;font-weight:700;letter-spacing:.04em;color:#fff;margin-right:16px}   /* 오른쪽 문구와 같은 16(2026-09-15 jinny 코멘트 1789459976731 · 전 13) */   /* 누르는 칩은 CTA 하나뿐이다 : 배지까지 칩이면 어느 쪽이 누르는 것인지 안 보였다(2026-09-15 jinny) */
.hx-strip-short{display:none}   /* 짧은 문구는 좁은 창(s · xs)에서만 */
.hx-strip a{flex:none;height:40px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:500;font-size:14px;text-decoration:none}
.hx-strip-x{position:absolute;right:24px;top:50%;translate:0 -50%;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:#fff;opacity:.7;cursor:pointer;transition:opacity .15s}
.hx-strip-x:hover{opacity:1}
body.strip-on .hx-strip{translate:0 0;transition:translate .5s var(--e-out)}
body.strip-on:not(.strip-off) .footer{padding-bottom:calc(40px + var(--strip-h,64px))}   /* 배너가 떠 있는 동안 푸터 끝이 가려지지 않게 */   /* CTA(1.0~1.4)가 다 나온 뒤에 올라온다 · 한 번 올라오면 위로 되돌려도 남는다(× 만 닫는다 · 2026-09-14 jinny 코멘트 셋) */
body.strip-off .hx-strip{display:none}
.hx-strip{bottom:var(--cb,0px)}   /* 아래 도구 바가 보이는 만큼만 올린다(2026-09-14 jinny 「크롬에 가려서 안 보임」 · 2026-09-15 「치우면 하단이 빈다」) */
/* CTA 는 컴포저 자리 : 해결 상태에서만, 먼지가 걷힌 뒤(1.0) 올라온다 · 되돌릴 땐 바로 내려간다 */
.cta-block{animation:heroin .4s var(--e-out) .75s both}
/* 사진 원(2026-09-14 jinny) : 히어로 위아래에 맞춘 클립(좌우는 히어로 상자 밖까지 · 위아래 160 흰 그라디언트 마스크) 안에서 원이 90초에 한 바퀴 돈다.
   반지름 --rr 은 lp.js 가 놓는다(55vh 와 본문 폭 40% 중 작은 쪽) · 사진은 36/40/44 세 단계 · 얼굴은 늘 똑바로(안쪽이 거꾸로 돈다) · 글 덩이(z 2) 뒤.
   제목·서브·CTA 가 다 선 뒤(.95) 켜진다 */
.hx-ringclip{position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;z-index:1;overflow:hidden;pointer-events:none;animation:heroin2 .6s var(--e-out) .95s both;   /* 원은 .95 에 켜진다(2026-09-21 jinny 「그래픽이 마지막」) : 제목이 다 찍히고 서브·CTA 가 선 뒤 마지막으로 따라 들어온다. 2026-09-17 의 「들어왔을 때 비어 보인다」는 그대로 지킨다 : 그때까지 제목이 글자를 찍고 있어 화면이 안 빈다 */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%)}
.hx-ring{position:absolute;left:var(--rcx,50%);top:var(--rcy,50%);width:0;height:0;animation:ringspin 90s linear infinite}
@keyframes ringspin{to{rotate:360deg}}
/* 해결 상태에서 가만히 있으면 아래 가운데 연한 화살표가 통통 튄다(2026-09-15 jinny 코멘트 1789452270220) : 2.6 뒤 켜지고 · 더 내리면(.past · lp.js) 꺼진다 · 누르면 다음 절로 */
.hx-down{position:absolute;left:50%;bottom:20px;translate:-50% 0;z-index:4;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--ink-4);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s;cursor:pointer;display:grid;place-items:center}
.hero:not(.past) .hx-down{opacity:1;visibility:visible;transition:opacity .5s 1.65s,visibility 0s 1.65s;animation:hxbounce 1.4s ease-in-out 1.65s infinite}
@keyframes hxbounce{0%,100%{translate:-50% 0}50%{translate:-50% 8px}}
body.strip-on:not(.strip-off) .hx-down{bottom:calc(20px + var(--strip-h,72px))}   /* 배너가 떠 있으면 그 위로 */
.hx-orb{position:absolute;left:0;top:0;width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);transform:rotate(var(--a)) translate(var(--rr,65vh)) rotate(calc(var(--a) * -1))}
.hx-orb img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--bg-white),0 2px 8px rgba(0,0,0,.14);animation:ringspin 90s linear infinite reverse}
/* ---------- section: 3 cuts (위 글 · 아래 큰 판 · 판 안에서 부품이 움직인다) ---------- */
.cuts{padding:120px var(--pad);display:flex;flex-direction:column;gap:40px}
/* 섹션 머리는 한 벌 : 눈썹 → h2 (좌 · 폭 640) · 설명은 오른쪽 열 (2026-09-13 · elevenlabs 실측 : 머리 블록 270~380 · 설명 16 우 열). 가운데 정렬은 없다 */
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:48px}   /* 제목 → 서브라인 세로(2026-09-13 jinny 「좌우 배치는 애매」) */
.sec-head .h2{max-width:720px}
.sec-head .lede{max-width:640px}
.sec-head-center{align-items:flex-start;text-align:left}
.cut{display:flex;flex-direction:column;gap:28px;padding:56px 0}   /* 컷 사이를 벌려 한 화면에 판 하나(2026-09-13) */
.cut-head{display:flex;flex-direction:column;gap:12px;max-width:720px}
.cut .h3{font-size:32px;font-weight:500;letter-spacing:-.5px;line-height:1.2}   /* 컷은 섹션 바로 아래 칸(2026-09-13 jinny 「01~03 타이틀 너무 작다」) : 36 > 32 > 24 > 16 */
.ctx-txt .fh{font-size:24px;font-weight:400;letter-spacing:-.3px;line-height:1.25}   /* 컷 셋과 팀 메모리 네 줄의 제목은 한 칸(2026-09-12 jinny) */
.cut .body{font-size:16px}
.cut .body{max-width:720px}
/* 판 : 색은 여기에만 */
.stage-panel{border-radius:var(--cut-radius);padding:56px;background:var(--panel-purple);display:flex;justify-content:center;min-width:0;align-self:center;width:100%;max-width:calc(var(--sw,1040px) * var(--sz,1) + var(--spx,0px))}   /* 판 폭은 무대 배율을 따라간다 : 창이 낮아 무대가 줄면 판도 같이 준다(2026-09-12) */
/* 모션 패널 안쪽 1px 선(2026-09-17 jinny 「하얗게 잘리는 게 어색」) : 확대 컷에서 흰 창이 패널 가장자리에서 잘리는 자리가 카드 테두리로 읽힌다.
   창이 아니라 패널에 그린다 : 잘리는 자리에서는 창 테두리가 화면 밖이라 창에 그린 선은 안 보인다. 값은 창 안 구분선과 같은 --line(10%) · 맨 위(z 20)라 어느 무대에도 가려지지 않는다.
   01·02 패널은 static 이었다 → relative 로(선이 다른 조상 기준으로 놓였다) */
.stage-panel{position:relative}
.stage-panel::after,.ctx-panel::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;z-index:20}
.cut[data-color='green'] .stage-panel{background:var(--panel-lime)}   /* 02 는 라임 판(2026-09-13 jinny · TONE.md) · data-color 이름은 그대로 둔다 */
.cut[data-color='ink'] .stage-panel{background:var(--panel-pink2)}   /* 03 복사본 컷은 핑크 판(2026-09-17 jinny · 전 잉크) : 흰 창과 판이 갈리고 04 코랄과 이웃이다 · data-color 이름은 그대로 둔다(02 의 green→라임과 같은 사정) */
.cut[data-color='orange'] .stage-panel{background:var(--panel-coral)}   /* 03 은 코랄로 시작해 Jane 뒤 분홍(2026-09-13 jinny · TONE.md : 파랑은 판이 아니다 · 코랄+핑크는 이웃) */
/* 03 : 담당이 Jane 으로 바뀌는 7.5 에 판이 분홍으로 넘어가 끝까지 분홍(2026-09-12 jinny) */
.cut[data-color='orange'] .stage-panel:has(.s4.play){animation:s4pink var(--t-fast) 8.5s forwards}
@keyframes s4pink{to{background:var(--panel-pink2)}}
/* 01 은 흰 틀 없이 패널 자체가 무대다 : 볼드한 보라 */
.cut[data-color] .stage-panel.stage-panel-bare{padding:0;background:var(--panel-peri)}   /* 판 색 = 무대 바탕(페리) : 잉크였을 때 라운드 가장자리에 검은 실선이 비쳤다(2026-09-15 jinny 코멘트 1789451835601) · 무대는 처음부터 페리라 뒤가 어두울 이유가 없다 */
.stage{position:relative;width:100%;max-width:1040px;height:calc(600px * var(--sz,1));background:var(--bg-white);border-radius:12px;
  overflow:hidden;font-size:15px}
/* 안쪽은 늘 --sw×600 이고 lp.js 가 --sz(판 폭 ÷ 무대 폭)를 잰다(크기가 바뀔 때마다). 커서·글자·판이 한 배율로 줄어든다.
   CSS 만으로(tan(atan2(100cqw, 무대폭))) 내 봤더니 jinny 의 브라우저에서 무대가 손톱만 하게 났다(2026-09-12) : 실측으로 되돌렸다 */
.stage-in{position:absolute;left:50%;top:0;width:var(--sw,1040px);height:600px;translate:-50% 0;zoom:var(--sz,1)}
.stage-bare{max-width:none;background:none;box-shadow:none;border-radius:var(--cut-radius)}
.cursor{position:absolute;z-index:9;width:48px;height:48px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));opacity:0;animation-timing-function:cubic-bezier(.3,1.4,.4,1)}
/* 대본이 움직이는 커서(lp.js 「커서 대본」 · 계획서 62) : 나타남 .25 · 누름 = 닿기 직전 1.15 로 커졌다(.is-lift) .85 로 눌린다(.is-press · .2) · 왼쪽으로 갈 때는 좌우를 뒤집는다(.is-flip) */
.cursor.is-on{opacity:1}
.cursor{transition:opacity .25s var(--e-out),scale .2s var(--e-out);transform-origin:50% 50%;scale:var(--cz,1)}   /* 뒤집기(transform)는 전환 없이 바로 : .2s 로 넘기면 중간에 폭이 0 이 되어 한순간 사라져 보였다(2026-09-15 jinny 코멘트 1789477460605) */   /* --cz = 목표가 커서 부모보다 더 확대된 비(lp.js) : 확대 컷에서는 커서도 그만큼 크다 */
.cursor.is-lift{scale:calc(var(--cz,1) * 1.15)}
.cursor.is-press{scale:calc(var(--cz,1) * .85)}
.cursor.is-flip{transform:scaleX(-1)}
.run{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pop-green);animation:pulse 1.2s ease-in-out infinite;flex:none}
.sq{width:12px;height:12px;border-radius:3px;flex:none;background:var(--bg-sunken)}
.sq-rose{background:var(--av-rose)}.sq-blue{background:var(--av-blue)}
/* 얼굴 : 스쿼클(보자기는 마스크로 자른다 · 여기는 30% 라운드로 근사) · 칩 안에 드는 얼굴은 언제나 원형(2026-09-12 jinny) */
.face{display:block;object-fit:cover;border-radius:32%;corner-shape:superellipse(1.32);flex:none}   /* 스쿼클 : 앱의 --corner-smooth 와 같은 곡면(2026-09-14 jinny) · 원형인 자리는 round 로 되돌린다 */
.asg-chip .face,.cc-box .face,.cc-face,.pav .face,.cchip .face,.co .face,.s3-joined .face,.ct-who .face,.pres .face,.bub-av{border-radius:50%;corner-shape:round}   /* 세션·채널 풀 컷(사이드바 행 · 대화 줄)의 얼굴은 전부 스쿼클이다 : 원형은 칩·겹친 얼굴·03 의 떠 있는 얼굴(bub)만(2026-09-15 jinny 코멘트 1789483655240) */
.face-20{width:20px;height:20px}.face-28{width:28px;height:28px}.face-36{width:36px;height:36px}.face-56{width:56px;height:56px}.face-88{width:88px;height:88px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0;scale:.96;visibility:visible}to{opacity:1;scale:1;visibility:visible}}
@keyframes show{to{opacity:1;visibility:visible}}
@keyframes fadeout{to{opacity:0;translate:0 -8px;visibility:hidden}}
@keyframes hide{to{opacity:0;visibility:hidden}}
/* 글자가 차례로 쳐진다 : 폭 0 → 100% 를 steps 로 */
.tw span{display:inline-block;white-space:nowrap;overflow:hidden;width:0;vertical-align:bottom}
.tw-long span{white-space:normal;width:auto;clip-path:inset(0 100% 0 0)}
@keyframes type{to{width:100%}}
@keyframes typeclip{to{clip-path:inset(0 0 0 0)}}

/* 01 궤도 → 사이드바 : 얼굴이 원을 돌다 하나씩 행에 내려앉는다(좌표는 lp.js 가 rAF 로 계산한다) */
/* 01 은 세 토막이다(2026-09-12 jinny · A′) : ① 0~4.5 사이드바 클로즈업(1.7배 · 판 가운데) ② 4.5 컷으로 세션 화면의 코드 칸만 2.2배(사이드바·채팅은 왼쪽 밖) · 7.5 Jane · 10.5 Leo 는 컷 교체
   ③ 13.0 카메라 1.4s 뒤로 → 세션 화면 전체(사이드바 · 채팅 · 컴포저 · 코드)가 0.9배로 판 안에 여백을 두고 표시된다(꽉 채우면 답답하다 · jinny) · 2s 머묾.
   카메라는 zoom 이 아니라 transform(translate + scale · 원점 0 0)이다 : zoom 은 브라우저마다 시간 보간과 left 계산이 달라 화면이 멈추거나 엉뚱한 자리가 보였다(2026-09-12 jinny).
   화면 좌표 = translate + scale × 무대 좌표. 사이드바 가운데 = (1200 - 320×1.7)/2 = 328 · 코드 칸(x 654.4)을 왼쪽 끝에 = -654.4×2.2 = -1439.7 · 0.9배 가운데 = (60, 30) */
/* 스토리보드(2026-09-12 jinny) : 보라 판 가운데서 얼굴들이 크게 돌다(1.7배) → 1.5~2.5 줌아웃하며 회색 사이드바가 왼쪽에서 들어오고 얼굴이 하나씩 행으로 → 4.6 클릭 · 컷 「사이드바 + 얼굴 + 코드」(1.6배 · 채팅 칸 없음) → 7.4 둘째 사람 → 10.2 풀 컷(0.9)에서 세션을 눌러 본다 → 16.0 끝
   화면 좌표 = translate + scale × 무대 좌표 · 처음 가운데(600,300)를 1.7배로 = (600-600×1.7, 300-300×1.7) = (-420,-210) */
.s2-view{--rz:2.2;position:absolute;left:0;top:0;width:1200px;height:600px;transform-origin:0 0;zoom:var(--rz);transform:translate(calc(-420px / var(--rz)),calc(-210px / var(--rz))) scale(calc(1.7 / var(--rz)));border-radius:0;overflow:hidden}   /* 화질 규칙(2026-09-15 jinny 「확대 컷 화질 근본 수정」) : 비트맵은 가장 큰 배율(--rz = 최대 카메라 배율 2.2)로 굳히고 카메라(transform)는 줄이기만 한다 · transform scale 이 1 을 넘는 순간이 없어 어느 브라우저·어느 시점에도 흐려질 수 없다 · will-change:transform 을 두지 않는다(Chrome 은 그것이 있으면 처음 굳힌 배율을 다시 안 그린다) · zoom 아래서는 translate px 도 zoom 배가 되므로 카메라 값 셋 다 ÷ --rz */   /* 라운드는 무대가 진다 · view 에 두면 확대 컷 왼쪽 위에 어두운 틈이 비친다(2026-09-12 jinny) */
/* 3.9 카메라가 사이드바로 다가간다(.6s · 오른쪽은 아직 어두운 빈 판) → 4.6 클릭에 그 자리에 코드가 켜진다 → 10.2 풀 컷(1200 → 920 · .767) */
.s2.play .s2-view{animation:s2out 1s var(--e-inout) 0.8s forwards,s2zoom .6s var(--e-inout) 2.6s forwards,s2zoomout .8s var(--e-inout) 4.2s forwards}   /* 2.8 사이드바로 줌(왼쪽 위 고정 · 2.2) → 3.6 클릭 → 4.2 줌아웃 · 궤도 1.2 에 끝나 얼굴이 2.7 까지 다 행 자리에 도착한다(2026-09-15 jinny 코멘트 1789471396099)(2026-09-14 jinny 코멘트 1789379939654) */   /* 1배 확대 컷(코드가 보인다)을 세 번의 클릭 내내 두고 11.5 에 줌아웃 없이 풀 샷으로 컷(2026-09-14 jinny) */   /* 9.5 컷은 1.25 배(오른쪽·아래 잘림)로 서서 2.2s 동안 .8 배로 줄어든다(2026-09-14 jinny 코멘트 1789361397487 그림) */
@keyframes s2out{from{transform:translate(calc(-420px / var(--rz)),calc(-210px / var(--rz))) scale(calc(1.7 / var(--rz)))}to{transform:translate(0,0) scale(calc(1 / var(--rz)))}}   /* 카메라 값은 화면 배율 그대로 적고 ÷ --rz 만 붙인다(.s2-view 화질 규칙) */
@keyframes s2zoom{from{transform:translate(0,0) scale(calc(1 / var(--rz)))}to{transform:translate(0,0) scale(1)}}   /* 훨씬 많이(2026-09-14 jinny · 1.5 → 2.2) */
@keyframes s2zoomout{from{transform:translate(0,0) scale(1)}to{transform:translate(0,0) scale(calc(1 / var(--rz)))}}   /* (600,300)·1.7 → (600,300)·1 : 원이 그 자리에서 작아진다 */
@keyframes hide2{to{opacity:0;visibility:hidden}}
@keyframes hioff2{to{background:transparent}}
@keyframes show2{to{opacity:1;visibility:visible}}
@keyframes pressb{0%{scale:1;background:rgba(0,0,0,.07)}35%{scale:.9;background:rgba(0,0,0,.12)}70%{scale:1.04;background:rgba(0,0,0,.09)}100%{scale:1;background:rgba(0,0,0,.09)}}
/* 클로즈업 두 컷(4.6~10.2)은 채팅 칸이 없다 : 사이드바 옆에 바로 코드가 서서 「사이드바 · 얼굴 · 코드」가 한 프레임에 든다 · 풀 컷에서 돌아온다 */
@keyframes chipout{to{opacity:0;visibility:hidden;width:0;padding:0;margin-left:-10px;overflow:hidden}}   /* 풀 컷에선 「Leo is editing」 색 칩 없음(2026-09-12 jinny) */
/* 사이드바는 판 왼쪽 끝까지 : 무대가 판보다 좁아도(넓은 화면) 회색 면이 왼쪽으로 이어진다 */
/* 01 은 확대가 없다(2026-09-12 jinny) : 행 셋을 차례로 눌러 서로 다른 사람의 코딩이 오른쪽 전체 높이에 보인다 */
/* 끝의 drift(1.03 배)는 뺐다 : 되풀이 시작에 크기가 튀어 움찔한다(2026-09-12 jinny) · 다른 컷도 같다 */
.s2-bg{position:absolute;left:0;top:0;right:0;bottom:0;background:var(--panel-peri);opacity:1}   /* 왼쪽 끝까지 보라 : 사이드바가 들어오기 전 검정이 보였다(2026-09-14 jinny) */   /* 보라(페리윙클)는 처음부터(2026-09-14 jinny · 전엔 세션을 누를 때 켜졌다) */
   /* 세션을 누르면 사이드바 오른쪽이 페리윙클이 되고 그 위에 세션 창이 표시된다(2026-09-14 jinny) */
/* 보라 바탕은 안 켠다 : 세션 화면이 패널을 꽉 채운다(2026-09-12 jinny) */
.s2-orbit{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.orb{position:absolute;left:0;top:0;width:52px;height:52px;opacity:0;transform-origin:0 0}   /* 도는 얼굴 52(반지름은 105 그대로 · 2026-09-14 jinny 「썸네일 작게, 원은 유지」) */   /* 줄어들 때 왼쪽 위가 기준이라 착지점이 행의 얼굴 자리와 맞는다 */
.orb .face{width:100%;height:100%;border-radius:50%;corner-shape:round;box-shadow:0 0 0 2px var(--bg-white),0 2px 8px rgba(0,0,0,.14)}   /* 히어로 사진 원과 같은 흰 링·그림자(2026-09-14 jinny 코멘트 1789380574552) */   /* 도는 얼굴은 원형(2026-09-12 jinny) */
.s2-side{position:absolute;left:0;top:0;bottom:0;width:280px;background:#F6F6F5;border-right:1px solid var(--line);
  padding:20px 12px;display:flex;flex-direction:column;gap:2px;transform:translateX(-105%)}
.s2-side .grp{font-weight:600;font-size:11px;letter-spacing:.08em;color:var(--ink-4);padding:6px 8px 8px}
.srow{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:8px;font-size:15px;opacity:0;transition:opacity .3s cubic-bezier(.2,.8,.2,1);transform-origin:50% 50%}
.srow .nm.tw.is-typing::after{display:none}
.srow.in{opacity:1}
.srow .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .face{margin-left:auto}
.gi-flag{flex:none;color:var(--ink-2)}
/* 세션 행의 리딩 = 점(앱 statusdot : 쉬는 세션은 테두리만) · Bottari 가 뛰는 세션은 Bottari 얼굴이 뛴다(앱의 bottari-bounce) (2026-09-14 jinny) */
.sdot{flex:none;width:20px;height:20px;display:grid;place-items:center}
.sdot>*{grid-area:1/1}
/* 리딩은 앱 사이드바 그대로(parts.css statusdot · 2026-09-14 jinny) : 쉬는 세션 = 테두리 점(8 · 6 은 작고 연했다) · Bottari 가 뛰는 세션 = 회색 Bottari 심볼이 땅을 짚고 뛴다(bottari-bounce) */
.sdot::before{content:'';grid-area:1/1;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink-5)}
.sdot svg{width:16px;height:14px;color:var(--ink-3);opacity:0;visibility:hidden;transform-origin:bottom center}
.sdot.live::before{display:none}
.sdot.live svg{opacity:1;visibility:visible;animation:tbounce 1.2s ease-in-out infinite}
@keyframes tbounce{0%{transform:none}10%{transform:scale(1.08,.92)}30%{transform:translateY(-5px) scale(.94,1.06)}45%{transform:scale(1.06,.94)}55%,100%{transform:none}}
.s2.play .r3 .sdot::before{animation:hide 0s 4.6s forwards}   /* 4.6 에 셋째 세션에서 Bottari 가 뛰기 시작 → 5.6 클릭 : 커서가 누르기 1초 전에 먼저 뛴다(2026-09-15 jinny 코멘트 1789471396099 · 전엔 클릭 뒤였다) */
.s2.play .r3 .sdot svg{animation:show 0s 4.6s forwards,tbounce 1.2s ease-in-out 4.6s infinite}
.s2.play .r5 .sdot::before{animation:hide 0s 6.6s forwards}   /* 6.6 다섯째 → 7.6 클릭 */
.s2.play .r5 .sdot svg{animation:show 0s 6.6s forwards,tbounce 1.2s ease-in-out 6.6s infinite}
.sess-head .gi-flag{color:var(--ink)}
/* 누르는 모션(전체 공통 · 2026-09-12 jinny 「클릭하는 순간 작아졌다 커지는 걸 더」) : 확 눌렸다(0.9) 튀어 오르며(1.04) 선택 면이 남는다 */
@keyframes press{0%{background:rgba(0,0,0,.07)}35%{background:rgba(0,0,0,.16)}70%{background:rgba(0,0,0,.08)}100%{background:rgba(0,0,0,.09)}}   /* scale 을 뺐다 : 확대(2.2) 안에서 행만 1배로 다시 그려져 깨져 보였다(2026-09-14 jinny) */
@keyframes hioff{to{background:transparent}}
/* 세션 판 : 왼쪽 58% = 머리(제목 · running · 담당 칩) + 채팅 + 컴포저 · 오른쪽 42% = 코드가 위에서 아래까지(머리는 왼쪽으로 · 2026-09-12 jinny) */
/* 세션 판은 사이드바 오른쪽을 꽉 채운다(보라 여백 0) : 사이드바(회색) | 세션 채팅(미색) | 코드(먹) 셋으로 나뉜다(2026-09-12 jinny) */
.s2-sess{position:absolute;left:304px;right:24px;top:24px;bottom:24px;border-radius:12px;box-shadow:0 16px 40px -16px rgba(0,0,0,.28);background:var(--bg-white);
  opacity:0;visibility:hidden;overflow:hidden}
.s2-sess[data-c='green']{--pc:var(--pop-green)}.s2-sess[data-c='purple']{--pc:var(--pop-purple)}.s2-sess[data-c='orange']{--pc:var(--pop-orange)}
.sess-left{position:absolute;left:0;top:0;bottom:0;width:58%;background:var(--bg-white)}   /* 세션 채팅 판은 흰색(2026-09-14 jinny · 전 미색 #FBFAF6) */
.s2 .sess-left{width:50%}   /* 코드가 메인이라 코드 칸이 62% · 채팅·컴포저가 끝 풀샷에서 「세션 화면」임을 보인다(2026-09-12 jinny) */   /* 미색 : 사이드바 #F6F6F5 보다 밝다 */
.sess-head{height:52px;display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid var(--line)}
.sess-head b{font-weight:600}
.sess-head .asg-chip{margin-left:auto;position:static}
.chev{flex:none;color:var(--ink-4)}   /* 담당 칩의 셰브론은 아이콘이다(2026-09-12 jinny) */
.sess-stream{padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.s2-sess .msg.pre,.st.pre{opacity:1}
.sess-chat{position:absolute;left:0;right:0;top:52px;bottom:0}
.sess-stream{position:absolute;left:0;right:0;top:0;bottom:118px;padding:12px 20px;overflow:hidden;justify-content:flex-start;gap:14px}
.s2-sess .code{left:50%;top:0;bottom:0;padding:0;font-size:14px}   /* 코드 컷은 2.2배라 화면에서 30px 급(2026-09-12 jinny 「훨씬 커야 함」) */
.code-tab{margin:0;height:44px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.12);color:#E6E6E6;font-size:13px;white-space:nowrap}
.ct-file{font-weight:600}
/* 누가 치고 있나 : 그 사람 색의 이름표가 코드 판 헤더에 표시되고 마지막 줄에 그 색의 캐럿이 깜박인다(2026-09-12 jinny 「서로 다른 사람이 각각 코딩」) */
/* 담당자 얼굴·이름이 먼저 온다(2026-09-12 jinny 「코딩 컷에 담당자 얼굴 및 이름도 잘 보이게」) : 그 사람 색 Pill · 얼굴 28 */
.ct-who{display:none;order:-1;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;background:var(--pc);color:#fff;font-weight:600;font-size:12px}
.ct-who .face{width:22px;height:22px}
.ct-who .face{border-radius:50%}
.code-body{padding:16px 20px}
.ccaret{display:inline-block;width:8px;height:1.1em;background:var(--pc);vertical-align:-2px;animation:blink 1s steps(1) infinite}
.s2-sess .steps{width:auto;max-width:300px;font-size:12.5px;padding:10px 12px}
.s2-sess .msg{gap:12px}.s2-sess .say{font-size:15px}
.s2-sess .sess-composer{left:16px;right:16px;top:auto;bottom:14px;width:auto;max-width:none;transform:none}.sess-composer .cbody{min-height:44px}
/* 사이드바는 얼굴이 돌다가 1.5 에 밀려 들어온다(키프레임이라 재생바로 되감긴다) */
.s2.play .s2-side{animation:sidein .42s cubic-bezier(.16,1.12,.3,1) 0.8s forwards}   /* 슉 : 빠르고 살짝 넘쳤다 돌아온다(2026-09-14 jinny 「텐션감」) */
@keyframes sidein{to{transform:translateX(0)}}
/* 박자표 : 3.9 사이드바로 → 4.0 커서 → 4.6 r1 Angie(코드 켜짐) → 7.4 r3 Jane → 10.2 풀 컷 r4 Leo → 11.4 r1 → 12.6 r3 → 13.8 r4(1.2s 간격으로 여럿을 눌러 본다) · 16.0 끝 */
/* 위부터 차례로 누른다(2026-09-12 jinny 「이것저것 누르니 정신없음」) : 확대에서 r1(4.6) · r2(7.4) → 풀 컷에서 r3(10.2) · r4(11.4) · r5(12.6) · r6(13.8). 판은 셋을 돌려 쓴다(1·3·4·1·3·4) */
/* 두더지잡기(2026-09-14 jinny) : Bottari 가 뛰는 행만 누른다 · r1 3.9 → r3 7.1 → r5 10.1(짧게) · 다른 팀원의 세션을 실시간으로 본다 */
.s2.play .r1{animation:press .4s cubic-bezier(.3,1.4,.4,1) 3.6s forwards,hioff .15s 5.5s forwards}
.s2.play .r3{animation:press .4s cubic-bezier(.3,1.4,.4,1) 5.6s forwards,hioff .15s 7.5s forwards}
.s2.play .r5{animation:press .4s cubic-bezier(.3,1.4,.4,1) 7.6s forwards}
/* 세션 전환은 컷이다 : 앞 판이 꺼지는 그 프레임에 다음 판이 켜진다(겹침 0 · 빈 프레임 0 · 영상 셋에 크로스페이드는 없다) */
@keyframes fadein{from{opacity:0;visibility:visible}to{opacity:1;visibility:visible}}
@keyframes sessrise{from{opacity:1;visibility:visible;translate:0 0}to{opacity:1;visibility:visible;translate:0 0}}   /* 세션 창은 아래에서 16 올라오며 켜진다(2026-09-14 jinny 코멘트 1789380601479) */
.s2.play .s2-sess-1{animation:sessrise var(--t-cut) var(--e-out) 3.7s forwards,fadeout var(--t-cut) ease 5.7s forwards}
.s2.play .s2-sess-3{animation:sessrise var(--t-cut) var(--e-out) 5.7s forwards,fadeout var(--t-cut) ease 7.7s forwards}
.s2-sess-3{z-index:2}.s2-sess-4{z-index:3}   /* 다음 창이 앞 창 위로 올라오고 앞 창은 그 아래서 옅어진다(깜빡임 0 · 2026-09-14 jinny 코멘트 1789396790362) */
.s2.play .s2-sess-4{animation:sessrise var(--t-cut) var(--e-out) 7.7s forwards}
/* 코드 다섯 줄은 세션과 한 프레임에 서 있고(가구) 뒤 세 줄만 .35 간격으로 써진다(지금 치는 중) */
.s2.play .s2-sess-1 .cl-1{animation:show var(--t-cut) 3.7s forwards}.s2.play .s2-sess-1 .cl-2{animation:show var(--t-cut) 3.7s forwards}.s2.play .s2-sess-1 .cl-3{animation:show var(--t-cut) 3.7s forwards}.s2.play .s2-sess-1 .cl-4{animation:show var(--t-cut) 3.7s forwards}
.s2.play .s2-sess-1 .cl-5{animation:show var(--t-cut) 3.7s forwards}.s2.play .s2-sess-1 .cl-6{animation:rise .2s 3.8s forwards}.s2.play .s2-sess-1 .cl-7{animation:rise .2s 3.8s forwards}.s2.play .s2-sess-1 .cl-8{animation:rise .2s 3.8s forwards}.s2.play .s2-sess-1 .cl-cur{animation:rise .2s 3.8s forwards}
.s2.play .s1-2{animation:rise .3s 3.8s forwards}.s2.play .s1-3{animation:rise .3s 3.8s forwards}
.s2.play .s2-sess-3 .cl-1{animation:show var(--t-cut) 5.7s forwards}.s2.play .s2-sess-3 .cl-2{animation:show var(--t-cut) 5.7s forwards}.s2.play .s2-sess-3 .cl-3{animation:show var(--t-cut) 5.7s forwards}.s2.play .s2-sess-3 .cl-4{animation:show var(--t-cut) 5.7s forwards}
.s2.play .s2-sess-3 .cl-5{animation:show var(--t-cut) 5.7s forwards}.s2.play .s2-sess-3 .cl-6{animation:rise .2s 5.8s forwards}.s2.play .s2-sess-3 .cl-7{animation:rise .2s 5.8s forwards}.s2.play .s2-sess-3 .cl-8{animation:rise .2s 5.8s forwards}.s2.play .s2-sess-3 .cl-cur{animation:rise .2s 5.8s forwards}
.s2-sess .say-2{opacity:0;max-height:0;min-height:0;overflow:hidden;margin-top:-4px}.s2.play .s3-2{animation:rise .3s 5.8s forwards}   /* Jane 세션은 작업 카드 대신 대답 컷 : 둘째 문장이 .1 뒤에 올라온다(세션 셋 중 하나는 글로 답한다 · 2026-09-15 jinny 코멘트 1789474440044) */
.s2.play .s2-sess-4 .cl-1{animation:show var(--t-cut) 7.7s forwards}.s2.play .s2-sess-4 .cl-2{animation:show var(--t-cut) 7.7s forwards}.s2.play .s2-sess-4 .cl-3{animation:show var(--t-cut) 7.7s forwards}.s2.play .s2-sess-4 .cl-4{animation:show var(--t-cut) 7.7s forwards}
.s2.play .s2-sess-4 .cl-5{animation:show var(--t-cut) 7.7s forwards}.s2.play .s2-sess-4 .cl-6{animation:rise .2s 7.8s forwards}.s2.play .s2-sess-4 .cl-7{animation:rise .2s 7.8s forwards}.s2.play .s2-sess-4 .cl-8{animation:rise .2s 7.8s forwards}.s2.play .s2-sess-4 .cl-cur{animation:rise .2s 7.8s forwards}
.s2.play .s4-2{animation:rise .3s 7.8s forwards}.s2.play .s4-3{animation:rise .3s 7.8s forwards}
.s2 .c2{width:64px;height:64px}   /* 1배 컷이라 48 은 작았다(2026-09-14 jinny) */
/* 커서 c2 의 걸음(2.9 나타남 → 3.6 r1 · 5.6 r3 · 7.6 r5 누름)은 lp.js 「커서 대본」 표가 든다(계획서 62) · 클릭 사이 2초 · 세션 안 타자는 0.7 배(2026-09-15 jinny 코멘트 1789462771385 「6초 간격 → 2초」) */

/* 02 멘션 : 연두 위에 컴포저만 크게 → 멘션 → 보내면 컴포저가 축소되며 내려가고 그 뒤에서 흰 판이 펼쳐진다(연두는 바깥에 남는다)
   ⚠️ 움직이는 것은 transform·opacity 뿐이다. 폭·top·글자 크기·clip-path 를 움직이면 프레임마다 레이아웃을 다시 해 버벅인다 */
.stage-panel-green{background:var(--panel-lime);padding:0}   /* !important 를 두면 아래 flipbg 애니메이션이 적용되지 않는다 */   /* 02 는 파랑 판(2026-09-11 jinny) */
/* 카메라는 transform 이 아니라 zoom 이다 : transform scale 은 1배로 그린 것을 늘려 흐려진다(2026-09-11 jinny 「확대될 때 화질」) · 가운데 55% 를 축으로 1.35 → 1 */
/* 폭은 px 다 : zoom 은 % 폭을 키우지 않는다(100% 면 부모 폭 그대로라 컷 확대가 안 됐다 · 2026-09-11 실측) */
/* 끝 상태(zoom 1)가 기본값이고 확대 1.35 는 backwards 로 7.4 까지 붙든다 : zoom 을 forwards 로 남기면 끝난 뒤 레이아웃이 1.35 로 남는다(2026-09-11 실측) */
.s3-view{--rz:1.8;position:absolute;left:50%;top:55%;width:var(--sw,1200px);height:600px;translate:-50% -55%;transform-origin:var(--s3-zo,50% 50%);zoom:calc(1.1 * var(--rz));transform:var(--s3-c0,translate(0,20px))}   /* 화질 규칙(01 컷 .s2-view 와 같다 · 2026-09-17 jinny 「모션이 뿌옇다」) : 비트맵은 기본 1.1 × 최대 카메라 배율 1.8 로 굳히고 카메라(transform)는 그 위에서 줄이기만 한다.
   전엔 zoom 1.1 위에 transform 1.25 · scale 1.8 을 얹어서, 움직이는 동안 크롬이 1.1 로 굳힌 비트맵을 늘려 글이 뿌옇다가 멈추면 다시 그려 또렷해졌다. 값은 lp.js s3fit 가 --rz 로 나눠 준다(scale 이 1 을 넘는 순간이 없다) */
/* 카메라(2026-09-15 jinny 코멘트 1789483565644 「위가 빈 채로 오래 남는다」) : 창 위 끝과 양옆만 보이게 1.25 배로 당긴 컷에서 시작한다 → 1.5 부터 대화가 쌓이는 속도(1.3 초에 한 마디)로 같이 내려간다 → 6.0 컴포저 가운데가 판 가운데에 오면 멈춘다
   → 6.4 흰 판이 빠지는 동안(.6) 카메라는 1 배로, 컴포저는 1.25 로 가서 컴포저 크기는 그대로 남는다. 값 다섯(--s3-c0~c4)은 lp.js s3fit 가 잰다
   구간 : 1.5~6.0 한 번에 내려간다(천천히 떠나 가운데쯤 가장 빠르고 다시 천천히 멈춘다 · 2026-09-16 jinny 코멘트 1789484910595 「너무 일정한 속도라 지루하다」 · 전엔 가속 .8 · 등속 2.9 · 감속 .8) · 6.0~6.4 멈춤 · 6.4~7.0 배율 복귀 */
.s3.play .s3-view{animation:s3cam 5.5s linear 1.5s forwards,s3zin .6s var(--e-inout) 10.8s forwards,s3zout .35s var(--e-inout) 13.05s forwards}
@keyframes s3cam{
  0%{transform:var(--s3-c0);animation-timing-function:cubic-bezier(.55,0,.3,1)}
  81.818%,89.091%{transform:var(--s3-c3);animation-timing-function:step-start}
  100%{transform:var(--s3-c4)}}
@keyframes s3zin{from{transform:var(--s3-c4)}to{transform:var(--s3-c5)}}   /* scale 속성이 아니라 transform 으로 : 화질 규칙(위) · c5 = c4 를 --s3-zo 축으로 1.8 배 한 값(lp.js) */   /* 칩이 들어가는 것을 .9 보여 준 뒤(10.8 · Jayden 누름 9.4 · 목록 닫힘·칩 9.9) 줌인이 시작돼 제이든에게 치는 동안 유지된다(2026-09-16 jinny 코멘트 1789479562649 「칩이 입력되는 순간부터」 · 전 치기 시작 10.4) · 처음 결정 : 제이든에게 치기 시작하면(10.4) 컴포저 왼쪽 위(글 줄이 시작하는 자리)를 축으로 1.8 배 · 다 치면(12.0) .2 뒤 되돌아간다(12.2~12.7 · 보내기 12.8 전 · 2026-09-15 jinny 코멘트 1789479562649) · 축 --s3-zo 는 lp.js s3fit 가 잰다 · 커서도 판 안이라 같이 커진다 */
@keyframes s3zout{from{transform:var(--s3-c5)}to{transform:var(--s3-c4)}}
/* 카메라 : 7.3 줌아웃 하나뿐이다(그 뒤는 안 움직인다 · 글을 읽는 동안 화면이 흔들리면 안 된다) */
/* 토막 : A 0~7.4 클로즈업(1.35) → B 7.4~8.8 카메라 뒤로 → C 8.8~11.0 전체(가구 한 프레임 · 말 셋) → 컷 11.0 채팅 1.6배 → D ~15.6 답 → 컷 15.6 전체 → 17.5 끝 */
/* 02 는 커지는 카메라가 없다(2026-09-12 jinny) : 7.6 에 컷으로 1.35 → 1 · 흰 판은 좌우 120 을 남겨 파랑이 보인다 */
/* 전체 화면은 컷으로 오되 24px 아래에서 살짝 올라온다(투명도는 그대로 · 2026-09-12 jinny) */
/* 컷은 transform 이다 : 0s 라 흐림이 없고(정지 상태는 그 배율로 다시 그린다) zoom 처럼 좌표가 뒤틀리지 않는다 */
/* 원점은 (kF-가운데)/(k-1) : 보는 자리 F=(600,290 · Jayden 답 둘) */
/* 흰 판 : 컴포저 뒤 작은 상자에서 시작해(scale) 가장자리 28px 남기고 펼쳐진다 */
.s3-frame{position:absolute;inset:70px 240px -26px;background:var(--bg-white);border-radius:12px;
  opacity:1}   /* 높이 556 = 머리 52 + 위 여백 20 + 마디 넷(70×4 + 12×3) + 24 + 컴포저 128 + 아래 16 : 넷이 다 쌓이면 빈 곳이 안 남는다(2026-09-15 jinny 코멘트 1789483565644) */
.s3.play .s3-frame{animation:framebg .3s 6.1s forwards}   /* 프레임 면·머리·대화만 빠지고 컴포저는 그 자리에 남는다(계획서 61 D4) */
.s3.play .s3-head,.s3.play .s3-stream{animation:hide .3s 6.1s forwards}   /* 흰 판·머리·대화는 6.1~6.4 에 흐려지고, 다 흐려진 6.4 에 카메라가 1 배로 바뀐다(흐려지는 동안 작아지는 것이 안 보인다) */
@keyframes framebg{to{background:transparent}}
.s3-fc{position:absolute;left:16px;right:16px;bottom:16px;z-index:5}   /* 프레임 아래 컴포저 = 멘션 타이핑 컴포저(하나) */
.s3.play .s3-fc{animation:fcgrow .01s steps(1,start) 6.4s forwards,fcdrop .26s var(--e-out) 7.6s forwards,fcmid .34s var(--e-inout) 9.9s forwards,hide .01s 15.1s forwards}   /* 컴포저는 세션 뷰에서 단독 컷으로 넘어갈 때(6.4) 카메라 1.25 → 1 과 같은 프레임에 1 → 1.25 가 되어 화면 크기·자리가 그대로다 · 목록이 뜨면(7.6) 내려가 목록·컴포저 묶음이 무대 가운데에 서고(fcdrop), 고르면(9.9) 컴포저만 무대 가운데로 돌아온다(fcmid) · 그 뒤에 줌인(10.8) (2026-09-16 jinny 코멘트 1789521445286) */
@keyframes fcgrow{to{scale:1.25}}   /* 크기만 바뀐다 : 자리를 옮기는 것은 아래 fcdrop·fcmid 둘이다 */
@keyframes fcdrop{to{translate:0 var(--fc-drop,82px)}}   /* 82 = 화면 86px(윈자리 배율 1.046) : 목록 위끝과 컴포저 아래끝이 무대 위·아래에서 같은 만큼(97) 떨어지는 값 */
@keyframes fcmid{to{translate:0 -19px}}   /* -19 = 화면 20px : 컴포저 가운데가 무대 가운데와 맞는 자리 */
/* 판 안 글은 판이 다 펼쳐진 뒤에 보인다(펼치는 동안 찌그러진 글이 안 보이게) */
/* 마디는 전부 자리를 잡고 있고 나타날 때만 14px 올라온다(레이아웃을 안 움직여 버벅임 0 · 다 들어가서 안 잘린다 · 2026-09-12 jinny) */
/* 02 는 마디가 창 위(머리 아래)부터 차례로 쌓이고 카메라가 따라 내려간다(2026-09-15 jinny 코멘트 1789483565644) · 03 은 마지막 마디가 컴포저 바로 위에 서고 그 위로 쌓인다 */
.s3-stream{position:absolute;left:0;right:0;top:52px;bottom:144px;padding:20px 32px 0;   /* 아래 끝 = 컴포저 위(128 + 16) */display:flex;flex-direction:column;gap:12px;justify-content:flex-start;overflow:hidden;opacity:1}
.s3-stream .msg{opacity:0;translate:0 14px;max-height:0;overflow:visible;margin-top:-12px}   /* 자라는 동안 안 자른다 : 글은 통째로 아래(컴포저 뒤)에서 올라오고 상자만 자란다(2026-09-15 jinny 코멘트 1789475428693 「올라올 때 아래가 잘린다」) */
.s3-stream .msg-b{max-width:520px}   /* 말 줄은 520 에서 접는다 : 판 폭을 다 채우면 부담스럽다(2026-09-15 jinny) */
/* 시작 대화 넷이 하나씩 올라온다(2026-09-14 jinny 코멘트 1789396604174) · 3.0 까지 머문 뒤 카메라가 훑고 4.0 컷 */
.s3.play .pk1{animation:pre2 .8s var(--e-out) .2s forwards}
.s3.play .pk2{animation:pre2 .8s var(--e-out) 1.5s forwards}
.s3.play .pk3{animation:pre2 .8s var(--e-out) 2.8s forwards}
.s3.play .pk4{animation:pre2 .8s var(--e-out) 4.1s forwards}   /* 말 넷은 1.3 간격 · .5 에 올라온다(전 .9 · .35) : 「아직도 빠르다」(2026-09-15 jinny 코멘트 1789457592002) */
@keyframes rise2{to{opacity:1;translate:0 0}}
.msg{display:flex;gap:14px;align-items:flex-start;opacity:0;max-height:0;overflow:hidden;margin-top:-20px}
.msg.pre{opacity:1;max-height:none;overflow:visible;margin-top:0}
@keyframes rise{from{opacity:0;translate:0 14px;max-height:0;margin-top:-20px}30%{max-height:280px;margin-top:0}to{opacity:1;translate:0 0;max-height:280px;margin-top:0;overflow:visible}}
.msg-b{display:flex;flex-direction:column;gap:4px;min-width:0;position:relative}
.msg-head{font-weight:600;font-size:15px}
.msg-head .tm{font-weight:400;font-size:12px;color:var(--ink-4);margin-left:8px}
.log{font-family:var(--font-mono,ui-monospace,monospace);font-size:13px;color:var(--ink-2)}
.err{font-family:var(--font-mono,ui-monospace,monospace);font-size:13px;color:var(--danger)}
.mention{background:var(--pop-tint-blue);color:var(--pop-blue);border-radius:6px;padding:1px 9px 1px 6px;font-weight:600}   /* 좌우 여백 4 → 왼쪽 6 · 오른쪽 9(2026-09-15 jinny 코멘트 1789477785119 「우측 패딩 좀 더」) */   /* 멘션 칩은 연하늘 + 파란 글(2026-09-12 jinny) */
.msg-line{display:block;font-size:16px;line-height:1.5}
.msg-line .mention{display:inline;margin-right:4px}
.msg-line .say{display:inline}
.say{font-size:16px;line-height:1.5;min-height:24px}
.joined{align-self:center;font-size:13px;color:var(--ink-2);background:var(--bg-raised);border-radius:999px;padding:6px 14px;opacity:0;max-height:0;overflow:hidden;margin-top:-20px}
/* 로딩 점 : 글이 들어설 그 줄 위에 겹쳐 있다가 글이 시작되면 사라진다(자리가 비지 않는다) */
.typing{position:absolute;left:0;top:26px;display:inline-flex;gap:4px;align-items:center;height:24px;opacity:0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-4);animation:tdot 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,100%{opacity:.3;translate:0 0}50%{opacity:1;translate:0 -3px}}
/* 찍힌 글자는 잉크로 서고 .15 뒤에 파랑이 따라와 지나간다(.6 · 2026-09-15 jinny 코멘트 1789448563751 「30% 진행된 순간부터 파랑이 뒤에 따라오도록」) · 끝 값을 안 적어 그 자리의 글자색으로 간다 · 01 사이드바 이름도 같은 .tw 다 */
.tw .ch{font-style:normal}   /* 타자에 파란 꼬리를 안 단다 : 정신없다(2026-09-15 jinny 코멘트 1789455351557) */
.tw.is-typing + .caret{display:none}   /* 타자 중엔 캐럿이 하나다 : 둘이 겹쳐 굵었다가 끝나며 얇아지는 것이 버그로 보였다(2026-09-14 jinny) */
.tw.is-typing::after{content:'';display:inline-block;width:2px;height:1.1em;background:var(--accent);vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
/* 컴포저 : 보따리 P.Composer 값(상자 radius 12 · 테두리 1 · 그림자 없음 · 발줄 ＋·모드 칩 / 모델·강도·사용량·보내기). 처음엔 가운데 크게 */
.s3-composer{position:absolute;left:50%;top:50%;width:calc(100% - 136px);max-width:680px;transform:translate(-50%,-50%) scale(1);transform-origin:50% 50%;z-index:5;opacity:0;visibility:hidden}
/* 멘션 목록이 위로 뜨는 동안(1.1~3.7) 컴포저가 48 내려가 목록이 무대 위에 안 잘린다(2026-09-11 jinny) */
/* 박자표 : 0.6 @·내려감 → 0.8 목록 → 1.6 Jane → 2.65 Jayden → 3.1 클릭 → 3.3 칩 → 3.6~6.5 타자(30cps) → 7.2 보내기 → 7.4 카메라 → 8.8 판·첫 말 9.2·내 말 9.8·참여 10.4
   → 11.0 컷(채팅 1.6배) · 보는 중 → 11.9 점 → 12.5~15.3 답 → 15.6 컷(전체) → 17.5 끝 */
/* 박자표(2026-09-12 저녁) : 0.6 @ · 내려감(.3) → 0.8 목록(.2 올라옴) → 1.0 커서 → 1.3 Jane → 2.1 Jayden → 2.3 클릭 → 2.4 칩 · 목록 닫힘 → 2.6~5.5 타자 → 5.6 커서 보내기로 → 6.25 클릭
   → 6.45 컴포저 사라짐 → 6.6 참여 Pill(아래서 올라옴 · 판이 진한 파랑으로) → 8.1 컷 전체 화면(24px 올라옴 · 판 원래 파랑) → 8.3 내 글 · 8.9 참여 · 9.5 보는 중 · 10.7 점 · 11.3~14.3 답 → 17.0 끝 */
/* 내려가는 것 : 판이 다 펼쳐진 뒤(8.2) 가운데에서 판 아래 자리로 내려가며 판 폭(가장자리 28 + 40)까지 넓어진다 */
@keyframes cphback{to{opacity:1;translate:0 0;visibility:visible}}
.cbox{position:relative;background:var(--bg-white);border:1px solid var(--line);border-radius:16px;box-shadow:none;
  display:flex;flex-direction:column;gap:12px;padding:14px 16px 12px}
.cbody{position:relative;min-height:56px;line-height:1.5;font-size:16px}
.cph{position:absolute;left:10px;top:0;color:var(--ink-5)}
.brow{display:flex;align-items:center;justify-content:space-between;min-height:32px}
.bl,.br{display:flex;align-items:center;gap:8px}
.br{gap:12px}
.cplus{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:var(--ink-2)}
.cchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink-2)}
.csend{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--text-on-brand);display:grid;place-items:center;font-weight:700;font-size:15px}
.cmeta{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.cmeta span{color:var(--ink-4)}
.cmeta .ring{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-input);border-top-color:var(--ink-2);border-right-color:var(--ink-2)}
/* 아직 안 친 조각은 자리를 차지하지 않는다(캐럿이 @ 바로 뒤에 붙는다) */
.ty{display:inline-block;max-width:0;overflow:hidden;opacity:0;vertical-align:bottom;white-space:nowrap}
@keyframes tyin{to{max-width:480px;opacity:1}}
.s3-fc .ty-chip{padding:0;margin:0}   /* 안 보일 땐 여백도 0 : 칩 여백이 캐럿을 12px 밀어 플레이스홀더와 겹쳤다(2026-09-15 jinny 코멘트 1789474581770) */
@keyframes tychip{to{max-width:480px;opacity:1;padding:1px 9px 1px 6px;margin-right:4px}}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--accent);vertical-align:-3px;margin-left:0;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* 멤버 팝오버 : 보따리 P.Dropdown 값(radius 12 · --shadow-md · 항목 두 줄 · radius 8) */
.s3-pop{position:absolute;left:0;bottom:calc(100% + 6px);width:340px;background:var(--bg-white);border-radius:var(--radius-lg);
  padding:6px;opacity:0;visibility:hidden;font-size:14px}
.pop-row{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;border-radius:8px;font-size:16px}
.pop-row .face{width:28px;height:28px}
.pop-row .pn{display:block;line-height:1.2;white-space:nowrap}   /* 이름(+역할)이 한 줄 · 메타가 한 줄이다(2026-09-11 jinny) */
.pop-row .pn em{display:block}
.pop-row .pn em{font-style:normal;font-size:13px;color:var(--ink-4)}
.pop-row.is-hi{background:var(--overlay-hover)}
@keyframes hion{to{background:var(--overlay-hover)}}
@keyframes press2{0%{scale:1}40%{scale:.86}100%{scale:1}}   /* 누름은 확실히 보인다(2026-09-12 jinny) */
/* 차례 : 0.9 클릭 → 1.0 @ → 1.2 팝오버 → 1.7 Jane 위 → 2.6 Jayden 위(멈춤) → 3.6 클릭 → 3.9 타자 → 6.7 보내기로 → 7.2 클릭 → 7.3 판 펼침 → 8.2 컴포저 내려감 → 9.0 첫 말 → 9.5 내 글 → 10.9 입장 → 11.6 점 → 12.3 타자 → 14.8 점 → 15.4 Bottari 타자 · 카메라는 7.3 줌아웃뿐(옛 줄인) */
.s3.play .ty-1{animation:tyin .1s 7.4s forwards,tyout .01s 9.9s forwards}   /* @ 와 멘션 칩은 같은 프레임(9.2)에 바뀐다 : 둘 다 폭을 .1 씩 늘이고 줄이면 합친 폭이 잠깐 커져 뒤 글이 오른쪽으로 밀렸다 돌아왔다(2026-09-16 jinny 코멘트 1789484981208 「흔들림 없이 그 자리를 대체」) */
@keyframes tyout{to{max-width:0;opacity:0;visibility:hidden}}
@keyframes poprise{from{opacity:0;visibility:visible;translate:0 8px}to{opacity:1;visibility:visible;translate:0 0}}
.s3.play .s3-pop{animation:poprise .2s var(--e-out) 7.6s forwards,hide .2s var(--e-out) 9.9s forwards}   /* 8px 올라오며 켜진다 · 크기는 안 움직인다 */   /* 크기 변화 없이 켜진다(버벅임 제거) */
/* 목록 셋은 다 남고 커서가 Jane 을 지나 Jayden 을 고른다(2026-09-12 jinny) */
.s3.play .pr-2{animation:hion var(--t-fast) 9.2s forwards,press2 var(--t-press) 9.4s}
.s3.play .ty-chip{animation:tychip .01s 9.9s forwards,hide .01s 15.1s forwards}   /* 칩 7.8 → 글은 8.0 부터(고른 뒤에 쓴다 · 2026-09-15 jinny 코멘트 1789456896107) */   /* 숨긴 뒤에도 자리를 차지해 Jayden 의 글이 뒤로 밀렸다 → 10.4 에 폭을 0 으로(2026-09-12) */   /* 검게 번쩍이던 것은 뺐다(2026-09-12 jinny 「칩 배경이 까맣게 되는 버그」) */
.s3.play .ty-2{animation:hide .01s 15.1s forwards}
@keyframes tycollapse{to{display:none;opacity:0;visibility:hidden}}   /* 자리까지 비운다(display 는 키프레임에서 끊겨서 바뀐다) */
/* 보낸 뒤 : 참여 Pill 이 파랑 무대 가운데에 표시되고(6.1) 전체 화면 컷(7.6)에 자리를 내준다 */
.s3-joined{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:var(--ink);background:var(--bg-white);border-radius:999px;padding:8px 20px 8px 8px;opacity:0;visibility:hidden;z-index:6;zoom:1.25}   /* 얼굴 36 · 글 16 · 여백 8/20 의 비율 그대로 1.25 배(zoom) : 45 · 20 · 10/25(2026-09-15 jinny 코멘트 1789447173585 「비율 유지한 채로」) */
@keyframes pillrise{from{opacity:0;visibility:visible;translate:-50% calc(-50% + 18px)}to{opacity:1;visibility:visible;translate:-50% -50%}}
.s3.play .s3-joined{animation:pillrise .4s var(--e-out) 15.6s forwards}   /* 완성된 칩이 그대로 올라온다(2026-09-15 jinny 코멘트 1789459256090) */
.s3-joined .face{width:36px;height:36px}
/* Pill 이 표시되는 순간 판이 검정으로 뒤집히고(6.45) 그 뒤 전체 화면 컷에서도 검정으로 남는다(2026-09-12 jinny) */
.s3.play .c3{animation:hide .01s 15.1s forwards}   /* 커서도 같은 프레임에 없어진다 : 사라지는 시각을 lp.js 타이머가 재면 시계가 둘로 갈려 한 프레임씩 앞뒤로 흔들렸다(2026-09-16 jinny 코멘트 1789519860056 「커서가 사라지는 게 보이면 안됨」) · 판이 파랑으로 뒤집는 그 키프레임을 그대로 쓴다 */
.cut[data-color='green'] .stage-panel:has(.s3.play){animation:flipbg .01s 15.1s forwards}   /* 보내기를 누르고(14.6) 누름(.24)이 끝나고 살짝 쉰 뒤(15.1) 판이 파랑으로 바뀐다 · 참여 Pill 은 .5 뒤(15.6)(2026-09-16 jinny 코멘트 1789475004374 · 2026-09-15 1789484039008) */   /* 라임 → 파랑은 전환 없이 바로(2026-09-15 jinny 코멘트 1789458893262) */   /* 판 둘 : 라임(채팅 · 컴포저) → 파랑(참여 Pill) · 검정 판은 뺐다(2026-09-15 jinny 코멘트 1789457566867) */
@keyframes flipbg{to{background:var(--accent)}}   /* 멘션 컷의 바깥 패널은 파랑(2026-09-13 jinny) : 파랑이 판이 되는 유일한 자리 */
/* 8.1 컷 : 내 글 · 참여 칩 · 얼굴은 컷과 한 프레임에 이미 있다(2026-09-12 jinny) → 8.6 본 것 → 10.5 점 → 11.1 답 · 16.2 끝 */
@keyframes pre2{to{opacity:1;translate:0 0;max-height:140px;margin-top:0;overflow:visible}}   /* .8s · 끝 높이 140(실제 73 에 가깝게 : 320 이면 첫 .1 초에 다 펴져 튀었다 · 2026-09-15 jinny 코멘트 1789474545243 「부드럽게」) */
/* Bottari 의 답(2026-09-14 jinny 「Jayden 이 올리면 Bottari 가 대답하는 컷까지」) : 13.6 생각 중으로 서고 15.6 에 같은 자리에서 글로 바뀐다 · 03 과 같은 패턴 · 21.0 끝 */
.s3 .typing{display:none}
.s3.play .cph{animation:hide .01s 7.4s forwards}   /* @ 가 찍히는 프레임(7.4)에 사라진다 : 그 전까지는 플레이스홀더가 서 있고 겹치지도 않는다(2026-09-16 jinny 코멘트 1789484450547 「@ 를 보기도 전에 플레이스홀더가 먼저 날아간다」 · 2026-09-14 「겹침」 · 전 7.15 에 .12 페이드) */
.s3.play .csend{animation:press2 var(--t-press) 14.6s}
.s3 .caret{opacity:0}
.s3.play .caret{animation:caretblink 1s 6.4s infinite,fadeout .1s 14.6s forwards}   /* 세션 전체가 보이는 동안은 입력이 안 켜져 있다 : 흰 판이 빠지고 컴포저만 남는 순간(6.4)부터 파란 캐럿이 깜빡인다(2026-09-16 jinny) */
@keyframes caretblink{0%,50%{opacity:1}50.01%,100%{opacity:0}}   /* 켜진 채 시작해 반 박자 꺼진다 · 시작 전은 .s3 .caret 의 0 */
/* 커서 : 40px · 한 번 나타나면 끝까지 남는다. 멈출 자리마다 멈춘다 */
.cursor{position:absolute;z-index:9;width:48px;height:48px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));opacity:0;animation-timing-function:cubic-bezier(.3,1.4,.4,1)}
/* 커서 c3 의 걸음(7.7 나타남 → 8.1 Jane → 8.9 Jayden 누름 → 9.5 사라짐 → 12.3 다시 → 12.8 보내기)은 lp.js 「커서 대본」 표가 든다(계획서 62).
   목록(7.6)이 뜬 뒤에 커서가 나온다(2026-09-15 jinny 코멘트 1789460155577) */
/* 머리 : 세션 이름 + 방에 있는 얼굴. 입장 순간 Jayden 얼굴이 하나 더 붙는다 */
.s3-head{position:absolute;left:0;right:0;top:0;height:52px;display:flex;align-items:center;gap:10px;padding:0 24px;border-bottom:1px solid var(--line);opacity:1;font-size:15px}
.s3-head b{font-weight:600}
.s3-head .asg-chip{margin-left:auto;position:static}   /* 머리 오른쪽 = 담당자 칩(얼굴 둘 대신 · 2026-09-15 jinny 코멘트 1789474523453) */
/* 인용 카드 : Jayden 이 세션 안에서 본 것(Leo 가 보낸 것이 아니다) */
.look{font-size:14px;color:var(--ink-3)}.look b{font-weight:600;font-family:var(--font-mono,ui-monospace,monospace);color:var(--ink-2)}
.qcode{margin:6px 0 0;padding:10px 14px;border-radius:8px;background:#2B2B2E;color:#E6E6E6;font-family:var(--font-mono,ui-monospace,monospace);font-size:13px;line-height:1.7;width:fit-content}
.qcode .ln{display:inline-block;width:26px;color:#8A8A8E}.qcode .ln em{font-style:normal;color:#fff}
.qcode .hl{background:rgba(255,255,255,.14);border-radius:4px;padding:1px 6px;margin-left:-6px}
.qcode i{font-style:normal}.qcode .k{color:#F28FB8}.qcode .f{color:#C9A6FF}
/* c3move = 5.5s(7.7~13.2) 의 % · 좌표는 .s3-view(1200×600) 의 % · 컴포저가 1.25 로 커지고 64 내려간 상태를 실측(2026-09-15 jinny 코멘트 1789458870168)
   Jane 행 가운데 (32.0%, 80%) · Jayden 행 (32.0%, 90%) · 보내기 (82.6%, 128%) · 커서 svg 왼쪽 위라 조금 왼쪽·위
   차례 : 7.7 나타남(목록 7.6 뒤) → 8.1 Jane 위 → 8.5 → 8.9 Jayden 위 · 9.1 누름 → 9.5 사라짐 → 12.3 보내기 옆에서 나타나 12.75 도착 · 12.8 누름 → 13.2 끝 */

.cowner{position:relative;padding:0 10px 0 4px;font-weight:600;color:var(--ink)}
.co{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.co-b{position:absolute;left:4px;top:0;height:100%;opacity:0}
/* 머리는 02 의 것과 같다 : 깃발 + 제목 왼쪽 · 담당 칩 오른쪽 · 「running」 없음(2026-09-12 jinny) */
.s4-head{position:absolute;left:0;right:0;top:0;height:52px;display:flex;align-items:center;gap:10px;padding:0 24px;border-bottom:1px solid transparent;z-index:4;font-size:15px}
.s4-title{font-weight:600;font-size:15px}
.asg{position:relative;margin-left:auto;height:32px;width:170px}
.asg-chip{position:absolute;right:0;top:0;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 6px;
  border:1px solid var(--line);border-radius:8px;font-size:14px;font-weight:500;white-space:nowrap;background:var(--bg-white)}
.asg-b{opacity:0}
.s4-dd{position:absolute;right:0;top:40px;width:250px;background:var(--bg-white);border:1px solid var(--line);border-radius:12px;
  padding:6px;opacity:0;visibility:hidden;z-index:3}
.dd-k{font-weight:600;font-size:11px;letter-spacing:.08em;color:var(--ink-4);padding:6px 10px}
.s4-dd .pop-row{gap:10px;min-height:44px;padding:5px 8px;font-size:14px}
.s4-dd .pop-row .pn em{font-size:12px}
.pav{position:relative;flex:none;width:24px;height:24px}
.pav .face{width:24px;height:24px}
.pst{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:var(--status-solid-success);box-shadow:0 0 0 2px var(--bg-white)}
.pst.away{background:var(--ink-5)}
.s4-chat{position:absolute;left:0;right:0;top:52px;bottom:0}
.s4-stream{position:absolute;left:0;right:0;top:0;bottom:120px;padding:20px 24px;display:flex;flex-direction:column;gap:12px;justify-content:flex-start}
/* 마디는 전부 자리를 잡고 있고 나타날 때만 14px 올라온다(02 와 같다 · 레이아웃이 안 움직인다) */
/* 아직 안 온 마디는 자리를 안 차지한다(자리를 미리 잡으면 flex-end 가 앞 마디를 위로 밀어 가린다 · 2026-09-12 실측) */
.s4-stream .msg{opacity:0;translate:0 14px;max-height:0;overflow:visible;margin-top:-12px}
@keyframes rise4{from{opacity:0;translate:0 14px;max-height:0;margin-top:-12px}to{opacity:1;translate:0 0;max-height:140px;margin-top:0;overflow:visible}}
.s4-stream .msg.pre{opacity:1;translate:0 0;max-height:none;overflow:visible;margin-top:0}   /* 앞 담당의 기록은 처음부터 다 서 있다(2026-09-15 jinny 코멘트 1789461199137) */
.s4-stream .joined.pre{display:inline-flex;align-items:center;gap:8px;opacity:1;max-height:none;overflow:visible;margin:6px 0;padding:6px 14px 6px 6px}   /* 넘김 칩 : 얼굴 + 한 줄 · 위아래 마디와 18 */
.s4-stream .msg-b{max-width:560px}   /* 문단이 빨리 끊긴다(전 : 말 폭 870 · 2026-09-14 jinny) */
.working{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);background:var(--bg-raised);border-radius:8px;padding:8px 12px;width:fit-content;opacity:0}.working b{font-weight:600;font-family:var(--font-mono,ui-monospace,monospace)}
/* 01·03 의 작은 컴포저 : 상자(테두리 1 · radius 16) + 발줄(＋ · 모델 · 모드 / 보내기 오른쪽 끝) */
/* 01·03 의 컴포저는 02 와 같은 상자(.cbox)다 · 바깥 틀은 자리만 잡는다 */
.sess-composer,.s4-composer{background:none;border:0;padding:0;display:block;opacity:1;visibility:visible}   /* .s3-composer 의 기본 숨김을 되돌린다 : 01 세션 창·03 끝 컴포저가 안 보였다(2026-09-14 jinny 코멘트 셋) */
.sess-composer .cbody,.s4-composer .cbody{min-height:40px}
.s4-composer .cbody{min-height:44px}
.steps{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:13px;color:var(--ink-2);width:340px}
.st{display:flex;align-items:center;gap:8px;opacity:0}
.ok{color:var(--ok);font-weight:700}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-input);border-top-color:var(--ink);animation:spin .8s linear infinite;flex:none}
.steps-2{opacity:0}
.code{position:absolute;left:58%;right:0;top:56px;bottom:0;background:#2B2B2E;padding:22px 24px;font-family:var(--font-mono,ui-monospace,SFMono-Regular,monospace);font-size:13px;line-height:1.75;color:#E6E6E6;overflow:hidden}
.cl{margin:0;white-space:pre;opacity:0;min-height:1.75em}
.cl i{font-style:normal}.cl .k{color:#F28FB8}.cl .f{color:#C9A6FF}.cl .n{color:#FFB27A}.cl .s{color:#FFD08A}.cl .c{color:#8A8A8E}
/* 요약 카드 : 넘겨받은 사람이 묻는 순간 Bottari 가 이 세션의 상태를 카드로 올린다(요약을 사람이 안 쓴다) */
.sumcard{margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:min(100%,520px);display:flex;flex-direction:column;gap:8px;background:var(--bg-white)}
.sc-h{margin:0 0 2px;font-weight:600;font-size:13px;color:var(--ink-3)}
.sc-r{margin:0;display:flex;gap:10px;font-size:14px;line-height:1.45}
.sc-r b{flex:none;width:52px;font-weight:600;color:var(--ink)}.sc-r span{color:var(--ink-2)}


/* 03 넘긴다 · jinny 스토리보드(2026-09-12) 일곱 토막 : ⓪ 말풍선 셋이 아래에서 위로(0.3 · 1.6 · 2.9) → ① 4.0 컷 담당 칩 클로즈업(로딩 상자 → 얼굴이 안으로 · 이름·셰브론) · 5.7 셰브론 클릭
   → ② 5.9 목록 · 6.5 Jane 클릭 → ③ 6.7 슬롯 교체(아래에서 위로) → ④ 8.0 컷 컴포저 글 쪽 · 8.4~9.6 타자 → ⑤ 9.9 카메라 오른쪽 .6 · 10.8 보내기 → ⑥ 11.0 풀 컷 · 11.1 내 말 · 11.5 상태 줄 · 12.4 카드 · 13.7 다음 일 · 15.9 끝 */
.s4 .s4-composer .cbox{border-color:var(--line)}   /* 컴포저 테두리는 어디서나 회색(2026-09-12 jinny) */
.s4 .s4-composer .csend{background:var(--accent)}   /* 색 판 위 작은 요소는 파랑(2026-09-13 jinny · 커서·칩·단추에 파랑이 끼어든다) */
.s4 .s4-composer{left:16px;right:16px;top:auto;bottom:16px;width:auto;max-width:none;transform:none}   /* 좌우·아래 16 같게(2026-09-12 jinny) */
.s4-stream{overflow:hidden;justify-content:flex-end;bottom:136px;padding:16px 24px 0;gap:12px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px);mask-image:linear-gradient(to bottom,transparent 0,#000 40px)}   /* 넘치면 위로 밀려 흐려지며 사라진다(2026-09-12 jinny) */
.s4-stream{bottom:167px}   /* 컴포저 위 36(실측 48 에서 12 당김) · 02 와 같은 규칙 */
.sq-purple{background:var(--tint-solid-purple)}
.s4{background:transparent;box-shadow:none}
/* ⓪ 말풍선 : 회색 면 · 큰 라운드 · 얼굴 56 · 아래에서 24px 올라온다 */
.s4-out{position:absolute;inset:0;z-index:2}
.bub{position:absolute;display:flex;gap:18px;align-items:flex-start;opacity:0;visibility:hidden}
.bub-av{width:72px;height:72px;box-shadow:0 0 0 3px #fff,0 1px 6px 3px rgba(0,0,0,.14)}
.bub p{margin:0;background:var(--bg-white);border-radius:28px;padding:20px 28px;font-size:26px;line-height:36px;color:var(--ink);max-width:560px}
/* 셋은 한 묶음(.bub-stack)이다 : 첫 채팅 상자가 화면 가운데(262)에 서고 새 것이 아래서 올라올 때마다 묶음이 위로 가 앞 상자가 위로 옮겨진다(1.6 → 177 · 2.9 → 102 · 2026-09-12 jinny) */
.bub-stack{position:absolute;left:0;right:0;top:262px;height:396px}
.s4.play .bub-stack{animation:stk1 .25s var(--e-out) 1.6s forwards,stk2 .25s var(--e-out) 2.9s forwards}
@keyframes stk1{to{top:177px}}@keyframes stk2{to{top:102px}}
.bub-a{left:160px;top:0}
.bub-b{right:160px;top:170px}
.bub-c{left:160px;top:320px}
/* 로딩 상자 = 오른쪽 한 줄 채팅 상자와 같은 높이(36 + 20×2) · 점 10 */
.bub p.bub-dots{display:inline-flex;gap:8px;align-items:center;justify-content:center;height:76px;min-width:124px}
.bub-dots i{width:10px;height:10px}
.bub-dots i,.cc-dots i{width:8px;height:8px;border-radius:50%;background:var(--ink-4);animation:tdot 1s ease-in-out infinite}
.bub-dots i:nth-child(2),.cc-dots i:nth-child(2){animation-delay:.15s}.bub-dots i:nth-child(3),.cc-dots i:nth-child(3){animation-delay:.3s}
@keyframes bubrise{from{opacity:0;visibility:visible;translate:0 24px}to{opacity:1;visibility:visible;translate:0 0}}
.s4.play .bub-a{animation:bubrise .25s var(--e-out) .3s forwards,hide var(--t-cut) 4.0s forwards}
.s4.play .bub-b{animation:bubrise .25s var(--e-out) 1.6s forwards,hide var(--t-cut) 4.0s forwards}
.s4.play .bub-c{animation:bubrise .25s var(--e-out) 2.9s forwards,hide var(--t-cut) 4.0s forwards}
/* ① 담당 칩 클로즈업 : 무대 가운데 2배 · 로딩 상자와 같은 꼴로 시작(얼굴은 상자 밖 왼쪽 · 안엔 점 셋) */
.s4-cc{position:absolute;left:50%;top:50%;translate:-50% -50%;zoom:2.4;opacity:0;visibility:hidden;z-index:6;--ccup:78px}
/* ② 목록이 뜨는 동안(5.9~6.7) 칩이 통째로 위로 밀려나 목록이 무대 안에 다 보이고, 닫히면 돌아온다 */
@keyframes ccup{to{translate:-50% calc(-50% - var(--ccup,80px))}}
@keyframes ccdown{from{translate:-50% calc(-50% - var(--ccup,80px))}to{translate:-50% -50%}}
@keyframes ccrise{from{opacity:0;visibility:visible;translate:-50% calc(-50% + 24px)}to{opacity:1;visibility:visible;translate:-50% -50%}}
.s4.play .s4-cc{animation:ccrise .3s var(--e-out) 4.0s forwards,ccup .3s var(--e-out) 5.9s forwards,ccdown .3s var(--e-out) 7.7s forwards,hide var(--t-cut) 9.3s forwards}   /* 완성된 칩이 아래에서 올라온다 · 얼굴이 상자 안으로 들어가는 연출은 뺐다(2026-09-13 jinny) */
.s4-cc .cc-face,.s4-cc .cc-dots{display:none!important}   /* 뒤의 .cc-dots{display:flex} 보다 앞서게 */
.s4-cc .cc-slot,.s4-cc .cc-chev{opacity:1}   /* 처음부터 완성형(뒤의 .cc-slot{opacity:0} 보다 앞서게) */
.cc-box{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 6px;border:1px solid var(--line);border-radius:8px;background:var(--bg-white);font-size:14px;font-weight:500;white-space:nowrap}
.cc-face{position:absolute;left:-96px;top:50%;width:72px;height:72px;translate:0 -50%;border-radius:50%;z-index:2;box-shadow:0 0 0 3px #fff,0 1px 6px 3px rgba(0,0,0,.14)}
/* 바깥의 사람이 부품 안으로 들어온다(연출의 핵심) : 56 → 20 으로 줄며 상자 왼쪽 얼굴 자리로 · 닿는 프레임에 슬롯의 얼굴·이름이 켜지고 이 얼굴은 꺼진다 */
@keyframes ccin{to{left:-20px;scale:.278;box-shadow:none}}
.cc-dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px}
.cc-slot{width:144px;height:20px;overflow:visible;opacity:0}   /* 칩 폭 180 = 아래 목록(.cc-dd) 폭과 같다(2026-09-15 jinny 「위아래 너비 동일하게」) */   /* 자르는 것은 칩 상자(.cc-box) : 슬롯에서 자르면 이름이 칩 안쪽 여백 위에서 잘려 보였다(2026-09-14 jinny) */
.cc-list{display:flex;flex-direction:column;gap:6px}   /* 다음 이름은 칩 아래 여백(6)만큼 떨어져 상자 밖(31)에 있다 : 교체 때만 올라온다(2026-09-14 jinny) */
.cc-p{display:flex;align-items:center;gap:8px;height:20px;flex:none}
.cc-p .face{width:20px;height:20px}
/* ③ 슬롯 교체 : 목록이 닫히고(6.7) 칩이 가운데로 돌아온(7.0) 뒤 7.5 에 Angie 가 위로 나가고 Jane 이 아래에서 올라온다(.3) · 크기 변화 없음 · 8.3 컷 */
@keyframes ccslot{to{translate:0 -26px}}
.s4.play .cc-list{animation:ccslot .3s var(--e-out) 8.5s forwards}
.cc-chev{opacity:0}
.s4.play .cc-chev{animation:press2 var(--t-press) 5.7s}
/* ② 목록 : 상자 아래 · Angie 가 현재(✓) · 커서가 Jane 을 짚어 누른다 */
.cc-dd{left:0;right:auto;top:40px;width:180px}   /* 칩과 같은 폭(2026-09-15 jinny) */
.s4.play .cc-dd{animation:poprise .2s var(--e-out) 5.9s forwards,hide var(--t-fast) 7.7s forwards}
.cc-r{opacity:1}
.cc-r-a .dd-ck{opacity:1}
.dd-ck{flex:none;width:14px;height:14px;margin-left:auto;color:var(--accent)}   /* 체크는 행 오른쪽 끝(2026-09-13 jinny) · 파랑(2026-09-15 jinny 코멘트 1789477870290) · 14×14 svg : 글자 ✓ 를 <i> 에 넣어 기울고 굵기가 합성돼 찌그러져 보였다(코멘트 1789477870290) */
.s4.play .cc-r-b{animation:hion var(--t-fast) 7.3s forwards,press2 var(--t-press) 7.5s}
/* 커서(칩 좌표 · 팁은 svg 의 (5.3,4)) : 5.2 나타남 → 5.5 셰브론(슬롯 144 라 중심 165,16) → 5.7 클릭 → 목록이 1.8s 보인다 → 6.9~7.2 Jane 행 → 7.5 클릭 → 7.8 사라짐(2026-09-12 jinny 「팝오버가 너무 빨리 지나간다」) */
.c4c{position:absolute;width:32px;height:32px;left:209px;top:119px;opacity:0;z-index:9}   /* 칩이 2.4 배 확대된 무대라 커서도 32(2026-09-15 jinny 「커서 더 크게」) · 팁은 (5.3,4) */
.s4.play .c4c{animation:c4hold .3s var(--e-out) 7.7s forwards}   /* 커서는 칩 안에 있어 칩이 가운데로 내려올 때(7.7) 같이 떨어졌다 : 그만큼 반대로 올려 누른 자리에 서 있다(2026-09-16 jinny 코멘트 1789485538324) */
@keyframes c4hold{to{translate:0 calc(-1 * var(--ccup,80px))}}
/* 풀 컷의 머리 칩도 Jane 으로(보이는 것은 11.0 부터) */
@keyframes swapout{to{opacity:0}}
@keyframes swapin{to{opacity:1}}
.s4.play .asg-a{animation:swapout var(--t-cut) 8.5s forwards}
.s4.play .asg-b{animation:swapin var(--t-cut) 8.5s forwards}
/* ④·⑤ 컴포저 클로즈업 : 1.8배라 글 쪽만 보이고(왼쪽) 카메라가 .6 에 오른쪽으로 가 보내기가 보인다 · Jane 이름표가 발줄에 있어 누가 치는지 보인다 */
.s4-cq{position:absolute;left:0;top:0;width:680px;translate:var(--cq0,calc(200px / 3.1)) calc(101px / 3.1);zoom:3.1;opacity:0;visibility:hidden;z-index:5;transform:none}
.s4-cq .cbox{border-color:var(--line)}.s4-cq .csend{background:var(--accent)}
/* 3.1배(680×128 → 2108×397) · jinny 스케치(2026-09-12) : 위아래와 한쪽엔 주황 여백이 남고 반대쪽만 패널 가장자리에서 잘린다.
   처음엔 왼쪽 여백 200 이 있고 오른쪽이 잘린다 · 카메라가 가면 오른쪽 여백 200 이 남고 왼쪽이 잘린다(판 1200 · 여백 0). 세로는 무대 가운데(300 - 397/2 = 101).
   잘리는 자리는 무대가 아니라 주황 패널 가장자리다.
   무대는 안 잘라내고(.s4 overflow) 패널이 잘라낸다. 패널은 무대보다 사방 56 크고 그 56 은 무대 배율(--sz)을 안 받으므로 무대 px 로는 56/--sz.
   translate 의 px 는 zoom 배가 되므로 ÷3.1.
   패널이 잘라내려면 패널이 position 을 가져야 한다(없으면 absolute 인 컴포저가 패널을 뚫고 페이지 위로 나간다 · 실측) */
.s4{overflow:visible}
@keyframes cqpan{to{translate:var(--cq1,calc((1000px - 2108px) / 3.1)) calc(101px / 3.1)}}
.s4.play .s4-cq{animation:show var(--t-cut) 9.3s forwards,cqpan .6s var(--e-inout) 11.2s forwards,hide var(--t-cut) 12.3s forwards}
.cq{opacity:0}
.s4.play .s4-cq .cph{animation:fadeout var(--t-fast) 9.45s forwards}
.s4.play .cq{animation:show .1s 9.3s forwards,fadeout .1s 12.1s forwards}
.s4.play .s4-cq .csend{animation:press2 var(--t-press) 12.1s}
/* 보내기 커서(컴포저 좌표 · 680 폭 · 팁은 svg 의 (4,3) · 보내기 실측 중심 649,99) : 10.6 나타남 → 10.9 보내기 위 → 11.1 클릭 */
.c4b{position:absolute;width:28px;height:28px;left:600px;top:130px;opacity:0;z-index:9}
/* ⑥ 풀 컷 : 세션 화면 전체가 11.0 한 프레임에 · zoom 1 이 기본값이고 확대 상태는 backwards 로 붙든다(forwards 로 남기면 레이아웃이 확대값으로 남는다) */
.s4{--vz:1.8;--vl:-143px;--vt:50px}
.s4-view{position:absolute;left:120px;top:30px;width:960px;height:540px;zoom:1;opacity:0;visibility:hidden;z-index:3;background:transparent;overflow:visible}
.s4.play .s4-view{animation:viewout var(--t-cut) 12.3s both}
.s4-panel{position:relative;overflow:hidden;padding:0}   /* 세 컷의 바깥 판은 다 1200×600 여백 없음(2026-09-12 jinny 「프레임 높이가 다르다」) */
@keyframes viewout{from{zoom:var(--vz);left:var(--vl);top:var(--vt)}to{zoom:1;left:120px;top:30px;opacity:1;visibility:visible}}
.s4-paper{position:absolute;inset:0;background:var(--bg-white);border-radius:12px;opacity:0;visibility:hidden;z-index:0}
.s4.play .s4-paper{animation:show var(--t-cut) 12.3s forwards}
.s4-title,.s4-flag{opacity:0}
.s4.play .s4-head{animation:headpaper var(--t-cut) 12.3s forwards}
@keyframes headpaper{to{border-bottom-color:var(--line)}}
.s4.play .s4-title,.s4.play .s4-flag{animation:show var(--t-cut) 12.3s forwards}
.s4-chat{opacity:0}
.s4.play .s4-chat{animation:show var(--t-cut) 12.3s forwards}
.s4-view .s4-dd .pop-row{opacity:0}
.s4.play .msg-me{animation:rise4 .6s var(--e-out) 13.2s forwards}   /* 풀 컷(12.3)에 넘김 Pill 까지 먼저 보이고 .9 뒤에 Jane 의 말이 올라온다(2026-09-15 jinny 코멘트 1789462663154) */
.s4.play .msg-bot{animation:rise4 .6s var(--e-out) 13.8s forwards}   /* 생각 중으로 서서(13.8) 15.8 에 글로 바뀐다 */
/* 만드는 중은 말로(영상 셋 공통) : 11.5~12.3 「Reading the session…」 */
/* 생각 중은 보따리 앱의 패턴 그대로(chat.js tariThinkBits) : 보따리 얼굴 행 · 「Thinking…」 글자 위로 빛이 지나가고(shimmer) 아래에 곁수치 줄(경과 · 작업 수) */
.msg-bot .tarithinking{display:block;color:var(--ink-3);font-size:16px;line-height:1.5;max-height:24px;overflow:hidden}
.shimmer{position:relative;display:inline-block}
.shimmer::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 20%,#fff 40%,transparent 60%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 1.6s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
/* 「Thinking…」은 첫 답 마디 안에 있다가(13.8) 15.8 에 같은 자리에서 글로 바뀐다 : 생각 줄이 접히며 사라지고 글이 .35 에 걸쳐 펴진다(마디가 새로 서지 않는다 · 곁수치 줄은 뺐다 · 2026-09-13 jinny) */
@keyframes thinkfade{to{opacity:0;max-height:0;margin-bottom:-4px}}
.s4.play .msg-bot .tarithinking{animation:thinkfade .4s var(--e-out) 15.8s forwards}
.say-late{opacity:0;max-height:0;min-height:0;overflow:hidden;margin-top:-4px}   /* .say 의 min-height 24 가 max-height 0 을 이겨 접힌 글이 늘 24 를 차지했다 : 바뀌는 순간 마디가 20 줄어 튀었다(2026-09-14 jinny) · -4 는 flex gap 몫 */
@keyframes sayin{to{opacity:1;max-height:var(--sh,48px);margin-top:0}}   /* 끝 높이 = 글 높이(--sh) : 320 이면 .35s 의 첫 프레임에 다 펴져 마디가 튀었다(2026-09-14 jinny) */
.s4 .say-late{--sh:48px}
.s4.play .msg-bot .say-late{animation:sayin .4s var(--e-out) 15.8s forwards}


/* ---------- section: your Claude, kept ---------- */
.claude-layer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:center;padding:120px var(--pad)}
.cl-text{display:flex;flex-direction:column;gap:18px}
/* 카드 하나(2026-09-14 jinny) : 세로 300×400 · 흰 · 링 + 아래 그림자 · 쉴 때 오른쪽으로 6deg 기울고 마우스를 따라 3D 로 기운다(lp.js 가 transform 을 쓴다) */
.cl-side{display:flex;justify-content:center;align-items:center;perspective:1100px}
.cl-card{position:relative;width:300px;height:360px;padding:28px;border-radius:24px;background:var(--bg-white);box-shadow:var(--shadow-ring),0 12px 24px -10px rgba(0,0,0,.08),0 40px 64px -32px rgba(0,0,0,.14);
  display:flex;flex-direction:column;transform:rotate(3deg) rotateY(5deg) rotateX(2deg);transform-style:preserve-3d;transition:transform .6s var(--e-out),box-shadow .6s var(--e-out);will-change:transform}
.cl-card.is-tilt{transition:transform .12s linear}
.cl-card-top{display:flex;align-items:center;justify-content:space-between}
.lk-logo{width:32px;height:32px;flex:none;display:block}   /* 로고는 파일(assets/img/claude-mark.svg) : 경로가 길어 HTML 안에 못 둔다 */
.cl-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);letter-spacing:.2px}
.cl-dot{width:8px;height:8px;border-radius:50%;background:var(--status-solid-success);flex:none}
.cl-card-mid{margin-top:auto;padding-bottom:22px}
.cl-card-mid b{display:block;font-size:22px;font-weight:400;letter-spacing:-.3px;line-height:1.2}
.cl-card-mid small{display:block;font-size:13px;color:var(--ink-3);margin-top:8px}
.cl-card-rows{display:flex;flex-direction:column}
.cl-card-rows>div{display:flex;flex-direction:column;gap:1px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:12px;line-height:1.4}
.cl-card-rows span{color:var(--ink-4)}
.cl-card-rows b{font-weight:500;color:var(--ink)}

/* ---------- section: compare table (Figma LP 127:2 · 옛 v2 그대로) ---------- */
.compare{position:relative;z-index:3;background:var(--bg-white)}
.compare{padding:120px var(--pad);display:flex;flex-direction:column}
/* 3열(2026-09-15 jinny) : 1열 = 행 라벨(회색) · 2열 = 문서(회색 글) · 3열 = 세션(잉크 글 + 연회색 면이 열 전체를 덮는다). 행 여백은 칸이 진다(면이 줄 사이에서 안 끊기게) */
.cmp-t{display:flex;flex-direction:column}
.cmp-r{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,1.05fr);column-gap:48px;border-top:1px solid var(--line-soft);font-size:16px;line-height:1.5}
.cmp-r>*{margin:0;padding:18px 0 20px}
.cmp-r:last-child{border-bottom:1px solid var(--line-soft)}
.cmp-h{border-top:0}
.cmp-h .th{padding:14px 0 16px;font-size:13px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3)}
.cmp-h .th-s{color:var(--accent-ink)}
.cmp-r small{font-size:16px;color:var(--ink-3)}
.cmp-r .d{color:var(--ink-3)}
.cmp-r .s{color:var(--ink);font-weight:500}
.cmp-r .s,.cmp-h .th-s{background:var(--section-paper);padding-left:24px;padding-right:24px}
/* 좁을 때(≤900) : 탭 둘 + 1열(라벨 위 · 값 아래) · 탭 밑줄이 --p 만큼 차오른다(값은 lp.js 가 놓는다) */
.cmp-tabs{display:none;margin-bottom:4px}
.cmp-tab{position:relative;appearance:none;background:none;border:0;border-bottom:1px solid var(--line-soft);flex:1;padding:12px 0 14px;font:inherit;font-size:15px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);cursor:pointer}
.cmp-tab.is-on{color:var(--accent-ink)}
.cmp-bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink)}
.cmp-tab.is-on .cmp-bar{width:var(--p,0%)}
:root[data-lpw='s'] .cmp-tabs{display:flex}
:root[data-lpw='s'] .cmp-r{display:flex;flex-direction:column;gap:6px;padding:16px 0 18px}
:root[data-lpw='s'] .cmp-r.cmp-h{display:none}   /* .cmp-h 도 .cmp-r 라 이 줄이 flex 줄보다 뒤에 서야 우선한다 */
:root[data-lpw='s'] .cmp-h+.cmp-r{border-top:0}   /* 첫 행 윗선은 탭 밑선과 겹치니 탭 것 하나만 남긴다 */
:root[data-lpw='s'] .cmp-r>*{padding:0}
:root[data-lpw='s'] .cmp-r .s{background:none}
:root[data-lpw='s'] .cmp-r small{font-size:13px}   /* 라벨은 값(16)보다 한 단 아래로 */
:root[data-lpw='s'] .cmp-r .d,:root[data-lpw='s'] .cmp-r .s{color:var(--ink);font-weight:500}
:root[data-lpw='s'] .cmp-t[data-tab='0'] .cmp-r .s{display:none}
:root[data-lpw='s'] .cmp-t[data-tab='1'] .cmp-r .d{display:none}
.cmp-li p{margin:0}
.cmp-doc .cmp-li p{color:var(--ink-3)}
.cmp-ses .cmp-li p{font-weight:600}
.cmp-ses .cmp-li p::before{content:"✓";display:inline-block;width:22px;color:#4DE38A}


/* ---------- section: team memory (4 cards · 판은 전부 밝은 회색) ---------- */
/* 섹션 바깥 배경 전체가 연한 미색이고(2026-09-12 jinny · 패널색은 「너무 진함」) 넉 장의 패널은 그보다 진한 미색 · 흰 틀이 그 위에 창처럼 놓인다 · 넉 장은 2×2 가 아니라 글·그림 좌우 네 줄, 그림 쪽이 줄마다 바뀐다(첫 줄 오른쪽) */
.context{padding:120px 0;background:var(--bg-white);overflow-x:clip}   /* 팀 메모리 판(620 zoom)이 폰에서 밖으로 세는 것을 막는다(2026-09-14) */   /* 회색 띠 없음 : 채도 판은 흰 위에 있어야 도드라진다(2026-09-13) */   /* 배경은 페이지 폭 전체(오른쪽 여백까지 · 2026-09-12 jinny) · 안쪽 .sec-in 만 1440 */
.context .sec-in{padding:0 var(--pad);display:flex;flex-direction:column;gap:8px}
.lede-center{text-align:left}
/* 넷이 한 자리(2026-09-13 jinny 안) : 절 높이 = 스크롤 길이(넷 × 70vh) · 안쪽은 sticky · 왼쪽 목록 400 · 오른쪽 패널 */
/* 왼쪽 열 = 절 제목 + 목록 · 오른쪽 = 패널(2026-09-14 jinny · 참조의 왼쪽 열 규격) : 꺼진 항목 16 회색 · 켜진 항목 24 잉크 + 설명 · 번호는 줄 오른쪽 끝 13 */
.ctx-grid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:80px;align-items:start}   /* 왼쪽 넷은 오른쪽 패널 위에 맞춘다 · 대신 머리와 32 더 띈다(2026-09-15 jinny 코멘트 1789455568103) */
.context .sec-head{padding-bottom:80px}   /* 왼쪽 네 줄은 오른쪽 패널 바닥에 맞춘다 : 왼쪽 위에 글이 몰려 눈에 안 띄었다(2026-09-15 jinny 코멘트 1789450283220) */
.ctx-left{display:flex;flex-direction:column}
.ctx-list{display:flex;flex-direction:column}
.ctx-item{position:relative;padding:16px 0 17px;border-top:1px solid var(--line-soft);cursor:pointer;outline:none}
.ctx-item:last-child{border-bottom:1px solid var(--line-soft)}
.ctx-item.is-on{padding:16px 0 20px}   /* 켜져도 위 여백은 그대로 : 커지는 것은 제목 크기와 설명뿐이라 펼침이 덜 튄다(2026-09-14 jinny) */
.ctx-row{display:flex;align-items:center;justify-content:space-between;gap:16px}   /* 숫자와 제목은 가운데로 맞춘다(2026-09-18 jinny) : 밑선에 맞추면 13 짜리 숫자가 24 짜리 제목의 밑선에 걸려 아래로 치우친다 */
.ctx-item .fh{margin:0;font-weight:500;font-size:18px;letter-spacing:0;line-height:1.3;color:var(--ink-4);transition:color .25s var(--e-out)}   /* 접힌 줄 18 · 크기는 전환하지 않는다(글자 크기 전환은 매 프레임 레이아웃이라 버벅였다) */
.ctx-item:hover .fh{color:var(--ink-2)}
.ctx-item.is-on .fh{font-size:24px;letter-spacing:-.3px;color:var(--ink)}
.ctx-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--e-out)}
.ctx-more>*{overflow:hidden;min-height:0;margin:0}
.ctx-item.is-on .ctx-more{grid-template-rows:1fr}
.ctx-item.is-on .ctx-more{padding-top:12px}   /* 접힌 줄에는 이 여백이 없어야 한 줄 높이가 47 이다 */
.ctx-bar{position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--accent);z-index:1}   /* 항목 위 선 위에 파랑으로 차오른다 : 이 영상이 어디까지 왔나(2026-09-14 jinny) */
.ctx-item.is-on .ctx-bar{width:var(--p,0%)}
.ctx-stage{position:relative;min-width:0;height:480px}   /* 왼쪽 열보다 120 더 내려간다(2026-09-14 jinny 「딱 맞으면 답답」) · 참조도 그렇다 */
.ctx-stage .ctx-panel{position:absolute;inset:0;aspect-ratio:auto;opacity:0;transform:translateY(24px);will-change:opacity,transform;contain:layout;transition:opacity .4s var(--e-out),transform .5s var(--e-out);pointer-events:none}
.ctx-stage .ctx-panel.is-on{opacity:1;transform:none;pointer-events:auto}
.ctx-stage .ctx-panel.is-prev{opacity:0;transform:translateY(-24px)}
.ctx-panel[data-k="1"]{display:flex;align-items:center;justify-content:center}
.ctx-panel[data-k="4"]{align-items:center}   /* 채팅 창은 아래 컴포저까지 다 보인다(2026-09-14 jinny) */
.ctx-panel{border-radius:var(--cut-radius);aspect-ratio:16/10;overflow:hidden;padding:36px 0 0 36px;background:var(--panel-paper)}   /* 패널은 섹션보다 한 단 진한 미색 · 색은 커서·이름표·버튼처럼 움직이는 것에만(2026-09-11 jinny) */
/* 그림이 왼쪽에 서는 짝수 줄은 안쪽을 오른쪽 위에 붙여 잘리는 쪽이 글이 아니라 페이지 바깥을 본다 */
.ctx-panel[data-k="2"],.ctx-panel[data-k="4"]{padding:36px 64px 0;display:flex;justify-content:center}   /* 소스 · 채팅 장은 가운데 · 좌우 64 (2026-09-13 jinny 「왼쪽으로 쳐졌고 답답하게 꽉 참」) · 아래만 잘린다 */
.ctx-panel[data-k="2"] .ctx-shot{border-radius:12px 12px 0 0}
.ctx-panel[data-k="4"] .ctx-shot{border-radius:20px}   /* 더 둥글게(전 12) */
/* 강약(2026-09-13 jinny) : 면색 판은 1 스크럼(검정) · 4 팀 채팅(핑크) 둘. 2 소스 · 3 제품데이터는 회색 종이 판(분간은 되게 · 색은 없게) */
.ctx-panel[data-k="3"]{background:var(--panel-blue)}   /* 문서 편집 판은 파랑(2026-09-13 jinny) */
.ctx-panel[data-k="4"]{background:var(--panel-pink2);padding:36px 40px 0}   /* 채팅 장은 좌우 40(2026-09-13 jinny) */   /* 팀 메모리 넉 판 = 잉크 · 종이 · 페리윙클 · 핑크 · 질감은 안 쓴다(2026-09-13 jinny) */   /* 색 둘 : 1번 남색(원래) + 3번 주황 → 강·약·강·약 (2026-09-13 jinny) */
/* 흰 틀이 있는 문서·채팅 장은 그림자·테두리로 배경과 구분된다 */
.ctx-shot:has(.cx3),.ctx-shot:has(.cx4){box-shadow:var(--shadow-ring)}
/* 넉 장은 사진이 아니라 그려서 움직인다. 안쪽은 늘 620×380 이고 lp.js 가 --cz 로 통째로 줄인다 */
.ctx-shot{position:relative;margin:0;width:620px;height:380px;border-radius:12px 0 0 0;overflow:hidden;
  background:var(--bg-white);
  zoom:var(--cz,1)}   /* transform scale 은 1배로 그린 것을 줄여 흐려진다(2026-09-13 jinny 「채팅 화질」) → zoom 으로 그 배율에서 다시 그린다 */
.cx{position:absolute;inset:0;overflow:hidden;color:var(--ink);background:var(--bg-white)}
@keyframes cxrise{to{opacity:1;visibility:visible;transform:translateY(0)}}
@keyframes cxpop{to{opacity:1;visibility:visible;transform:scale(1)}}

/* 1 스크럼 : 검정 한 창(2026-09-13 jinny · A안) → 참조(Vesse 통화 창)와 앱 스크럼 창을 재서 고침(2026-09-14 jinny 코멘트 1789362574321) :
   다른 것 셋 = ① 타일이 왼쪽 열을 꽉 채운다(160×128 · 전엔 132 에 빈 검정이 컸다) ② 노트 판이 흰 판(앱의 스레드 판) ③ 아래 조작 줄(앱 그대로 : 초대 / 마이크·카메라·화면·손·이모지·스레드·노트·⋯ / 빨간 나가기) */
.ctx-panel[data-k="1"]{padding:0;background:#141416}
.ctx-shot:has(.cx1){border-radius:0}
.cx1{display:flex;flex-direction:column;gap:16px;padding:9px 20px 12px;background:#141416}   /* 양옆 20 : 모서리 radius 12 옆에서 14 는 좁아 보였다 · 세로 사이 16 : 말하는 링(밖 12)이 발줄에 안 닿는다(2026-09-15 jinny 코멘트 1789440666419) */
.cx1-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:28px;flex:none;margin-bottom:-7px}   /* 머리 칸 = 판 위 끝에서 타일 위 끝까지 46 · 신호등·제목 가운데가 그 칸의 가운데(23)에 온다 : 위 9 + 28 + 아래 9(= -7 + 사이 16) · 제목은 가운데 칸(2026-09-15 jinny 코멘트 1789474668147 · 1789482794629 「위로 쳐진 것 같다」 · 전 위 6 / 아래 12) */
/* 좌상단 macOS 창 신호등 : 점 12 · 사이 8 · 빨·노·초 */
.cx1-lights{display:flex;gap:8px}
.cx1-lights i{width:12px;height:12px;border-radius:50%;background:#FF5F57}
.cx1-lights i:nth-child(2){background:#FEBC2E}
.cx1-lights i:nth-child(3){background:#28C840}
.cx1-tt{display:flex;flex-direction:column;gap:2px}
.cx1-tt b{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;letter-spacing:-.2px;color:#fff}   /* 헤드셋 아이콘 + Scrum(2026-09-15 jinny 코멘트 1789474668147 · 전 「Sprint sync」) */
.cx1-tt span{font-size:12px;color:rgba(255,255,255,.5)}
.cx1-body{display:flex;gap:12px;flex:1;min-height:0}
.cx1-cam{flex:0 0 60%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:8px;min-height:0}
.cx1-tile{position:relative;min-height:0;border-radius:12px;background:#26262A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}   /* overflow 를 안 자른다 : 말하는 링이 타일 밖 8 까지 나간다 */
.cx1-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:12px}   /* 절대 배치 : 사진의 제 높이가 줄의 최소 높이가 되어 둘째 줄 타일이 발줄을 덮었다(2026-09-15 jinny 코멘트 1789440666419) */
/* 말하는 사람 = 앱 스크럼 타일과 같은 흰 링(parts.css §scspeakglow · 안쪽 2px 선 + 밖으로 풀리는 두 단 · .85s 맥동 · 2026-09-15 jinny 「실제 스크럼 화면처럼 흰 글로우가 움직이게」) */
.cx1-tile::after{content:'';position:absolute;inset:0;border-radius:12px;opacity:0;pointer-events:none}
@keyframes cxspeak{0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.6),0 0 3px 3px rgba(255,255,255,.26),0 0 8px 4px rgba(255,255,255,.1)}50%{box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 3px 3px rgba(255,255,255,.48),0 0 8px 4px rgba(255,255,255,.2)}}
.cx1-nm{position:absolute;left:8px;bottom:8px;font-size:11px;font-weight:500;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);border-radius:999px;padding:3px 8px}
.cx1-mute{position:absolute;right:8px;bottom:8px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center}
.cx1.play .k1::after{animation:show 0.14s 0.42s forwards,hide 0.14s 2.12s forwards,cxspeak 0.6s ease-in-out infinite}
.cx1.play .k3::after{animation:show 0.14s 2.12s forwards,hide 0.14s 3.82s forwards,cxspeak 0.6s ease-in-out infinite}
.cx1.play .k2::after{animation:show 0.14s 3.82s forwards,hide 0.14s 6.08s forwards,cxspeak 0.6s ease-in-out infinite}
/* 조작 줄 : 앱 스크럼 창의 발줄(32 버튼 · 회색 면 · 켜진 것은 파랑 · 나가기는 빨강) */
.cx1-bar{flex:none;height:40px;display:flex;align-items:center;justify-content:space-between}
.cx1-mid{display:flex;gap:6px}
.cx1-bt{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff}
.cx1-bt svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx1-bt.on{background:var(--accent)}
.cx1-leave{height:32px;padding:0 12px;border-radius:8px;background:var(--status-solid-danger);color:#fff;font-size:13px;font-weight:600;display:inline-flex;align-items:center}
/* 녹음 중은 파형 하나로 : 「Recording」 글자를 빼고 AI notes 제목 줄 오른쪽 끝에 회색~검정 파형만(2026-09-15 jinny 코멘트 1789448663357) */
.cx1-wave{display:inline-flex;align-items:center;gap:3px;height:16px}
.cx1-wave i{width:3px;height:100%;border-radius:2px;background:var(--ink);opacity:.22;transform:scaleY(.3);animation:cxwave .9s ease-in-out infinite}   /* 막대 셋 · 굵기 3 · 연하게 .22(2026-09-15 jinny 코멘트 1789470575328) */
.cx1-wave i:nth-child(2){animation-delay:.2s}.cx1-wave i:nth-child(3){animation-delay:.4s}
@keyframes cxwave{0%,100%{transform:scaleY(.3);opacity:.35}50%{transform:scaleY(1);opacity:1}}
/* 노트 카드 : 대화 요약(얼굴 20 · 이름 · 한 문장)이 한 줄씩 쌓인다 */
.cx1-doc{flex:1;min-width:0;border-radius:12px;padding:14px 16px;background:var(--bg-white);color:var(--ink);overflow:hidden}   /* 노트 판은 앱의 스레드 판처럼 흰 판(2026-09-14 jinny 「보따리 스크럼 창과 비슷하게」) */
.cx1-nh{margin:0;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-4)}
.cx1-notes{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.cx1-notes li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ink-body);opacity:0;visibility:hidden;transform:translateY(8px)}
.cx1-notes li img{flex:none;width:20px;height:20px;border-radius:50%;object-fit:cover}
.cx1-notes li b{color:var(--ink);font-weight:600}
.cx1.play .ln1{animation:cxrise var(--t-mid) var(--e-out) 0.78s forwards}
.cx1.play .ln2{animation:cxrise var(--t-mid) var(--e-out) 1.76s forwards}
.cx1.play .ln3{animation:cxrise var(--t-mid) var(--e-out) 2.83s forwards}
.cx1.play .ln4{animation:cxrise var(--t-mid) var(--e-out) 3.82s forwards}
.cx1.play .ln5{animation:cxrise var(--t-mid) var(--e-out) 4.8s forwards}

/* 2 소스 : 카드(420)가 가운데 한 장 크게 서고 위아래로 갈수록 작고 연하다 · 1.5s 마다 한 칸씩 위로 옮겨 가며 아래서 한 장 생기고 위에서 한 장 사라진다(2026-09-14 jinny 그림) · 커서는 가운데 칸 버튼에 서서 지나가는 카드를 누른다 */
.ctx-shot:has(.cx2),.cx2{background:transparent;box-shadow:none;border:0;overflow:visible}
.ctx-panel:has(.cx2){padding:0;align-items:center}
.cx2{display:block;padding:0}
.cx2-list{position:absolute;left:50%;top:50%;width:420px;height:380px;translate:-50% -50%}   /* 판 가운데(판이 380 보다 커도) */
/* 칸 다섯 : 가운데 158 · 위아래 76 씩 · 한 장의 삶 7.5s = 칸 다섯 × 1.5s(머묾 .9 + 이동 .6) · 열 장이 1.5s 씩 어긋나 돌고 r1~r5 는 음수 지연으로 첫 프레임부터 자리에 있다 · 7.5s 뒤 r6~r10 이 같은 자리라 이어진다 */
.cx2-r{position:absolute;left:0;right:0;top:158px;height:64px;display:flex;align-items:center;gap:14px;padding:0 14px 0 16px;background:var(--bg-white);border:1px solid var(--line);border-radius:14px;opacity:0;transform:translateY(152px) scale(.8)}
/* 카드는 아래에서 작게(.6) 나타나 커지며 올라온다 · 커지는 구간 셋은 e-out(2026-09-15 jinny 코멘트 1789450185942) */
@keyframes cx2flow{
  0%{opacity:0;transform:translateY(178px) scale(.6);animation-timing-function:var(--e-out)}
  6%{opacity:.4;transform:translateY(130px) scale(.8)}
  12%{opacity:.4;transform:translateY(130px) scale(.8);animation-timing-function:var(--e-out)}
  20%{opacity:.75;transform:translateY(68px) scale(.9)}
  32%{opacity:.75;transform:translateY(68px) scale(.9);animation-timing-function:var(--e-out)}
  40%{opacity:1;transform:translateY(0) scale(1)}
  52%{opacity:1;transform:translateY(0) scale(1)}
  60%{opacity:.75;transform:translateY(-68px) scale(.9)}
  72%{opacity:.75;transform:translateY(-68px) scale(.9)}
  80%{opacity:.4;transform:translateY(-130px) scale(.8)}
  92%{opacity:.4;transform:translateY(-130px) scale(.8)}
  96%{opacity:0;transform:translateY(-164px) scale(.75)}
  100%{opacity:0;transform:translateY(-198px) scale(.7)}}   /* 바깥 칸은 130 : 카드(64)가 .8 배라 68 간격이면 1-2 · 4-5 사이가 6 넓어 보였다(2026-09-15 jinny 코멘트 1789474799391) */
.cx2-i{width:32px;height:32px;display:grid;place-items:center;flex:none}.cx2-i svg{width:30px;height:30px}
.cx2-n{font-size:15px;font-weight:600;color:var(--ink);flex:1}
.cx2-btn{position:relative;height:32px;min-width:92px;padding:0 12px;border-radius:9px;display:grid;place-items:center;font-size:13px;color:#fff;background:var(--accent);border:1px solid var(--accent)}
.cx2-btn b,.cx2-btn i{grid-area:1/1;font-weight:600;font-style:normal}
.cx2-btn b{color:#fff}
.cx2-btn i{opacity:0;color:var(--accent)}
/* 가운데 칸에 머무는 한가운데(삶의 48% · 커서의 누름과 같은 %)에 눌려 연결된다 : Connect(파랑) → Connected(흰 바탕) */
@keyframes cx2press{0%,47%{scale:1;background:var(--accent);color:#fff}48.5%{scale:.86}50%,100%{scale:1;background:#fff;color:var(--accent)}}
@keyframes cx2labb{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes cx2labi{0%,49%{opacity:0}50%,100%{opacity:1}}
.cx2.play .r1{animation:cx2flow 6.5s var(--e-inout) -5.2s forwards}.cx2.play .r1 .cx2-btn{animation:cx2press 6.5s -5.2s forwards}.cx2.play .r1 b{animation:cx2labb 6.5s -5.2s forwards}.cx2.play .r1 i{animation:cx2labi 6.5s -5.2s forwards}
.cx2.play .r2{animation:cx2flow 6.5s var(--e-inout) -3.9s forwards}.cx2.play .r2 .cx2-btn{animation:cx2press 6.5s -3.9s forwards}.cx2.play .r2 b{animation:cx2labb 6.5s -3.9s forwards}.cx2.play .r2 i{animation:cx2labi 6.5s -3.9s forwards}
.cx2.play .r3{animation:cx2flow 6.5s var(--e-inout) -2.6s forwards}.cx2.play .r3 .cx2-btn{animation:cx2press 6.5s -2.6s forwards}.cx2.play .r3 b{animation:cx2labb 6.5s -2.6s forwards}.cx2.play .r3 i{animation:cx2labi 6.5s -2.6s forwards}
.cx2.play .r4{animation:cx2flow 6.5s var(--e-inout) -1.3s forwards}.cx2.play .r4 .cx2-btn{animation:cx2press 6.5s -1.3s forwards}.cx2.play .r4 b{animation:cx2labb 6.5s -1.3s forwards}.cx2.play .r4 i{animation:cx2labi 6.5s -1.3s forwards}
.cx2.play .r5{animation:cx2flow 6.5s var(--e-inout) 0s forwards}.cx2.play .r5 .cx2-btn{animation:cx2press 6.5s 0s forwards}.cx2.play .r5 b{animation:cx2labb 6.5s 0s forwards}.cx2.play .r5 i{animation:cx2labi 6.5s 0s forwards}
.cx2.play .r6{animation:cx2flow 6.5s var(--e-inout) 1.3s forwards}.cx2.play .r6 .cx2-btn{animation:cx2press 6.5s 1.3s forwards}.cx2.play .r6 b{animation:cx2labb 6.5s 1.3s forwards}.cx2.play .r6 i{animation:cx2labi 6.5s 1.3s forwards}
.cx2.play .r7{animation:cx2flow 6.5s var(--e-inout) 2.6s forwards}.cx2.play .r7 .cx2-btn{animation:cx2press 6.5s 2.6s forwards}.cx2.play .r7 b{animation:cx2labb 6.5s 2.6s forwards}.cx2.play .r7 i{animation:cx2labi 6.5s 2.6s forwards}
.cx2.play .r8{animation:cx2flow 6.5s var(--e-inout) 3.9s forwards}.cx2.play .r8 .cx2-btn{animation:cx2press 6.5s 3.9s forwards}.cx2.play .r8 b{animation:cx2labb 6.5s 3.9s forwards}.cx2.play .r8 i{animation:cx2labi 6.5s 3.9s forwards}
.cx2.play .r9{animation:cx2flow 6.5s var(--e-inout) 5.2s forwards}.cx2.play .r9 .cx2-btn{animation:cx2press 6.5s 5.2s forwards}.cx2.play .r9 b{animation:cx2labb 6.5s 5.2s forwards}.cx2.play .r9 i{animation:cx2labi 6.5s 5.2s forwards}
.cx2.play .r10{animation:cx2flow 6.5s var(--e-inout) 6.5s forwards}.cx2.play .r10 .cx2-btn{animation:cx2press 6.5s 6.5s forwards}.cx2.play .r10 b{animation:cx2labb 6.5s 6.5s forwards}.cx2.play .r10 i{animation:cx2labi 6.5s 6.5s forwards}
.cx2-cur{left:0;top:0}
/* 커서 cx2-cur 는 가운데 칸에 서서 지나가는 버튼을 누른다 : 걸음은 lp.js 「커서 대본」 표(계획서 62) */
/* 커서는 가운데 칸 버튼 자리(--bx,--b1 · 620×380 안 실측)에 서고 카드가 지나간다 · 누름 0.6 · 2.1 · 3.6 · 5.1 · 6.6 (7.5s 의 8·28·48·68·88%) */
/* 3 문서 : 이름표 단 커서 둘이 오가며 고르고 한 줄을 넣는다 */
/* 문서 판(프레임)은 오렌지 · 문서 면은 아주 연한 회색(흰 바깥과 살짝만 갈리게 · 2026-09-14 jinny 코멘트 1789396713737) · 글 좌표는 그대로(면을 24/20 바깥으로) */
.ctx-panel:has(.cx3){background:var(--panel-orange)}
.cx3-doc{position:absolute;left:24px;top:20px;right:96px;padding:20px 112px 20px 24px;border-radius:12px}   /* 오른쪽 안 여백 112 : 글이 일찍 접혀서 줄 끝에서 쓰는 화살표 + 이름표(팁에서 오른쪽 끝까지 105)가 문서 판 밖으로 안 나간다(2026-09-15 jinny 「커서가 바깥으로 나가는 순간이 없게」 · 실측 : 판 오른쪽 524 · 글 끝 412) */
.cx.cx3{background:var(--bg-canvas-raised)}   /* 글 상자가 아니라 흰 판 전체를 아주 연한 회색으로(2026-09-15 jinny 코멘트 1789380188200) */   /* 커서·이름표가 오른쪽에서 안 잘리게 안으로 */
.cx3-h{font-size:24px;font-weight:700;letter-spacing:-.5px}   /* 제목 24 · 본문 16 (전 20 · 13.5 · 2026-09-15 jinny 코멘트 1789477653209 「텍스트 더 크게」) */
.cx3-m{font-size:13px;color:var(--ink-4);margin-top:6px}
.cx3-p{position:relative;z-index:0;font-size:16px;line-height:1.6;color:var(--ink-body);margin-top:14px}
/* 고른 면 : 커서가 지나간 만큼만 찬다(폭은 lp.js 「문서 컷 대본」이 프레임마다 적는다 · 키프레임이 아니다 · 계획서 63) · 색은 그 사람 색을 옅게 · 동작이 끝나면 걷힌다 */
.cx3 .t,.s5-doc .t{--sc:var(--accent)}
.cx3 .t.sel,.s5-doc .t.sel{background-image:linear-gradient(color-mix(in srgb,var(--sc) 24%,transparent),color-mix(in srgb,var(--sc) 24%,transparent));background-repeat:no-repeat;background-size:0% 100%;border-radius:3px;padding:1px 0}
.cx3 .t.del,.s5-doc .t.del{text-decoration:line-through;text-decoration-color:var(--sc);text-decoration-thickness:1.5px;color:var(--ink-4)}   /* 고른 것에 취소선만 긋는다 · 글자는 남는다(2026-09-15 jinny 「사라지지 않게」) */
.cx3 .t.bold,.s5-doc .t.bold{font-weight:600;color:var(--ink)}
.cx3-blk{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink-body);opacity:0;transform:translateY(6px);transition:opacity var(--t-mid) var(--e-out),transform var(--t-mid) var(--e-out)}   /* Leo 가 넣는 체크박스 블록 */
.cx3-blk.on{opacity:1;transform:none}
.cx3-blk .cb{flex:none;width:14px;height:14px;margin-top:5px;border:1.5px solid var(--ink-4);border-radius:3px}
.cx3-mark{display:inline-block;width:0;height:1em;vertical-align:-2px}   /* 쓰는 자리의 표(보이지 않는다) : 화살표 끝이 글자마다 이 자리를 따라간다 · 글줄 안에 있어 줄이 바뀌어도 어긋나지 않는다 */
.cx3-ch{font-style:normal;animation:cx3in .26s var(--e-out) both}   /* 글자가 찍힐 때 스르르 나타난다(2026-09-15 jinny 「타이핑이 딱딱하다」) · 인라인 그대로다 : 상자로 만들면 낱말 가운데서 줄이 끊긴다 */
@keyframes cx3in{from{opacity:0}to{opacity:1}}
.cx3-cur{position:absolute;left:0;top:0;z-index:4;opacity:0;color:var(--c);transition:opacity .25s var(--e-out);
  display:flex;align-items:flex-start;pointer-events:none}
.cx3-cur svg{width:30px;height:30px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08))}   /* 모션 커서 그림자는 넷이 같고(컷 커서 · 히어로 손 · 이 커서) 도는 사진 원(.14)보다 한 단 연하다(2026-09-15 jinny 「너무 세다」 코멘트 1789433468584) */
.cx3-cur span{margin:12px 0 0 -7px;padding:4px 10px;   /* 이름표는 화살표에 바짝(위 12 · 왼쪽 -7 · 전 18 · -4 · 2026-09-15 jinny 코멘트 1789477641571) */border-radius:7px;background:var(--c);color:#fff;
  font-size:14px;font-weight:700;white-space:nowrap}
.cur-a{--c:var(--pop-green)}   /* Jayden 초록 · Bottari 파랑(2026-09-15 jinny 코멘트 1789448715754) · 고른 자리의 색도 그 사람 색 */
.cur-b{--c:var(--pop-pink)}
.cur-c{--c:var(--accent)}
.cur-c span{display:inline-flex;align-items:center;gap:6px;padding-left:8px}
.cx3-cur.is-on{opacity:1}   /* 걸음은 lp.js 「커서 대본」 표(계획서 62) */
.cx3-cur .cur-tari{flex:none;width:16px;height:14px;color:#fff;filter:none}   /* 아바타 틀(분홍) 없이 심볼만 흰색으로(2026-09-14 jinny) · .cx3-cur svg 의 30px(화살표) 규칙이 안 먹게 크기를 따로 */
/* 커서 셋은 클릭하지 않는다(2026-09-14 jinny 코멘트 1789370151659) : 끌어서 고르거나 글을 쓴다. 걸음·시각표는 한 곳, lp.js 「문서 컷 대본」(계획서 63) · 한 바퀴 8s(2026-09-15 jinny 코멘트 1789460682904)
   Bottari 커서는 있는 동안 늘 무엇을 한다(2026-09-15 jinny 코멘트 1789448691066) · 어느 순간에도 둘 이상이 움직인다 */

/* 4 채널 : 채팅이 하나씩 올라오고 이모지가 눌린다 · 중간에 보따리에게 묻는다 (제안 1789041227471) */
.ctx-panel:has(.cx4){padding:24px 28px}   /* 사방 24/28 : 창을 살짝 더 크게(전 36/40 · 2026-09-15 jinny 코멘트 1789477579511) */
.cx4{display:flex;flex-direction:column;zoom:1.25}   /* 안 글·얼굴·칩을 통째로 1.25 배(다른 컷보다 작아 보였다 · 1.12 에서 「좀 더」 · 2026-09-15 jinny 코멘트 1789477579511) · 마디 높이는 lp.js 가 재서 --y1~4 에 넣는다 */
.cx4-head{flex:none;height:44px;display:flex;align-items:center;gap:7px;padding:0 20px;
  border-bottom:1px solid var(--line-soft);font-size:14px}
.cx4-hash{color:var(--ink-4);font-weight:600}
.cx4-head b{font-weight:700}
.cx4-cnt{margin-left:auto;font-size:12px;color:var(--ink-4)}
.cx4-clip{position:relative;flex:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px);mask-image:linear-gradient(to bottom,transparent 0,#000 28px)}
.cx4-stream{position:absolute;left:0;right:0;bottom:12px;padding:0 20px;display:flex;
  flex-direction:column;gap:10px;transform:translateY(var(--y1))}
.cx4.play .cx4-stream{animation:cx4up 7.2s cubic-bezier(.2,.8,.2,1) forwards}   /* 한 바퀴 7.2s = data-loop · 목록이 .45s 에 걸쳐 올라온다(마디가 떠오르는 시간과 같다) */
@keyframes cx4up{
  0%,22.22%{transform:translateY(var(--y1))}
  28.47%,40.28%{transform:translateY(var(--y2))}
  46.53%,56.94%{transform:translateY(var(--y3))}
  63.19%,100%{transform:translateY(0)}
}
/* 마디 높이는 lp.js 「채널 마디 높이」가 재서 --y1~3 에 넣는다(마디가 하나 들어올 때마다 그 높이 + 사이 10 만큼 올라온다 · 반응은 사람 글에만 달린다 · 2026-09-15 jinny). 아래 값은 재기 전 기본 */
.cx4{--y1:calc(73px + 10px + 52px + 10px + 52px + 10px);--y2:calc(52px + 10px + 52px + 10px);--y3:calc(52px + 10px)}
.cx4-msg{position:relative;display:flex;gap:12px;align-items:flex-start;min-height:52px;
  opacity:0;visibility:hidden;transform:translateY(8px)}
.cx4-msg.is-old{opacity:1;visibility:visible;transform:none}   /* 이력 마디는 처음부터 서 있다(2026-09-15) */
.cx4-b{position:relative;min-width:0;padding-top:4px}
.cx4-n{font-size:14px;font-weight:700;line-height:1.3}
.cx4-n span{margin-left:6px;font-size:11px;font-weight:400;color:var(--ink-4)}
.cx4-say{margin-top:1px;font-size:14px;line-height:1.45;color:var(--ink-body)}
.cx4-dots{position:absolute;left:0;top:22px;display:inline-flex;gap:4px;align-items:center;height:20px;opacity:0}
.cx4-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-4);animation:tdot 1s ease-in-out infinite}
.cx4-dots i:nth-child(2){animation-delay:.15s}.cx4-dots i:nth-child(3){animation-delay:.3s}
.cx4-late{opacity:0;visibility:hidden}
.cx4-re{display:inline-flex;align-items:center;gap:5px;margin-top:6px;width:fit-content;
  height:24px;padding:0 9px;border-radius:999px;font-size:13px;line-height:1;
  background:var(--bg-raised);border:1px solid var(--line);color:var(--ink-2);font-weight:500;   /* 반응은 글 아래 한 줄 · 회색 Pill(슬랙 · 2026-09-12 jinny) · 반응 없는 마디는 안 커진다 */
  opacity:0;visibility:hidden;transform:scale(.5);transform-origin:0 50%}
.cx4-re b{font-size:11px;font-weight:700}
.cx4-re + .cx4-re{margin-left:4px}
.cx4-re.pre{opacity:1;visibility:visible;transform:none}   /* 남이 먼저 단 반응 : 글과 같이 서 있다 */
.cx4-re.mine{border-color:var(--accent);background:rgba(0,161,255,.14)}   /* 내가 누른 것 = 앱 .reactionpill[data-mine] 과 같은 파랑 테·연한 파랑 면(2026-09-15 jinny 「좋아요 누르면 파란 칩」) */
.cx4-re.mine b{color:var(--accent-ink)}
/* 눌린 이모지는 한 번 커졌다 제 크기로 돌아온다 */
@keyframes cxpressed{0%{opacity:0;visibility:visible;transform:scale(.5)}
  55%{opacity:1;transform:scale(1.38)}100%{opacity:1;visibility:visible;transform:scale(1)}}
/* 올라오는 마디는 넷, 1.2~1.3s 간격(2026-09-16 jinny 코멘트 1789474778486 「4개 · 지금은 또 너무 느리다」 · 전 셋이 .5/2.6/4.4s · 그 전 다섯이 .2/1.21/1.91/2.55/4.33s) :
   Leo 글(.4) → 🚀 누름(1.1) → Jane(1.6) → 👍(2.2) → Jayden 이 묻는다(2.9) → Bottari 가 쓴다(4.1 · 점 .8s) → 답(4.9) → 2.3s 읽고 다시 */
.cx4.play .m1{animation:cxrise .45s var(--e-out) .4s forwards}
.cx4.play .m2{animation:cxrise .45s var(--e-out) 1.6s forwards}
.cx4.play .m3{animation:cxrise .45s var(--e-out) 2.9s forwards}
.cx4.play .m4{animation:cxrise .45s var(--e-out) 4.1s forwards}
.cx4.play .cx4-dots{animation:show 0.13s 4.2s forwards,hide 0.13s 4.9s forwards}
.cx4.play .cx4-late{animation:show 0.2s 4.9s forwards}
.cx4.play .r1{animation:cxpressed 0.27s cubic-bezier(.3,1.3,.4,1) 1.1s forwards}
.cx4.play .r2{animation:cxpressed 0.27s cubic-bezier(.3,1.3,.4,1) 2.2s forwards}
.cx4-comp{flex:none;height:44px;margin:8px 20px 16px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 6px 0 14px;font-size:14px;color:var(--ink-5)}
.cx4-ph{flex:1}
.cx4-send{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--text-on-brand);display:grid;place-items:center;font-weight:700;font-size:14px}
.fh{font-weight:600;font-size:22px;letter-spacing:-.3px}
.fp{font-size:16px;line-height:1.55;color:var(--ink-3)}   /* 보조 설명이라 한 단 연하게(2026-09-18 jinny 코멘트 1789718031745 : #454545 → text-tertiary) */
.more-link{font-weight:500;color:var(--accent-ink);text-decoration:none;font-size:16px}
.more-link:hover{text-decoration:underline}

/* ---------- section: pricing ---------- */
.pricing{padding:120px var(--pad);display:flex;flex-direction:column}
.pricing .sec-head{align-items:center;text-align:center}   /* 제목·서브라인 가운데 · 카드 둘도 가운데(2026-09-14 jinny 코멘트 1789362055152) */
.pricing .sec-head .lede{margin-left:auto;margin-right:auto}
/* 카드 한 장에 다 든다(2026-09-14 jinny 참조 그림) : 머리(단색 파랑) → 이름 + pill(가격) → 설명 → What you get 항목 → 버튼(아래 붙음) · 전체는 pricing.html */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:24px;justify-content:center}
/* 요금 카드(2026-09-15 jinny 스케치) : 흰 카드 한 골격 = 왼쪽 위 작은 이름 → 검정 큰 가격 + 오른쪽 「per seat / month」(Business 는 그 위에 $25 취소선)
   → 한두 줄 설명 → CTA → 항목 넷(✓) → 맨 아래 고스트 「See all features →」 · Business 만 오른쪽 위 귀퉁이에 맑은 그라디언트 · 배지·기한 줄은 없다 */
.pcard{position:relative;display:flex;flex-direction:column;gap:20px;min-width:0;padding:28px 28px 24px;border-radius:20px;overflow:hidden;background:var(--bg-white);box-shadow:0 0 0 1px var(--line),0 8px 24px -12px rgba(0,0,0,.14)}   /* 선 1px + 약한 그림자(2026-09-15 jinny) · 흰 카드 하나 · 선 1px var(--line)(전 .5px .08 : 연했다) · 캡은 넣었다가 뺐다(2026-09-15 jinny 「촌스럽다」) */
.pcard{transition:box-shadow .35s var(--e-out)}
.pcard:hover{box-shadow:0 0 0 1px var(--line),0 12px 32px -12px rgba(0,0,0,.19)}   /* 호버에 그림자만 살짝 진하게(.14 → .19 · .35s 로 번진다 · 2026-09-15 jinny 코멘트 1789469813912 「더 연하게 · 갑작스럽지 않게」) */
.pcard>*{position:relative}
.pcard-hi::before{content:'';position:absolute;right:-110px;top:-190px;width:340px;height:320px;border-radius:50%;pointer-events:none;   /* 원의 중심을 꼭짓점에서 왼쪽 60 · 위 30 으로 비껴 위쪽이 더 넓게 든다(2026-09-15 jinny) */
  background:radial-gradient(closest-side,rgba(120,195,255,.9) 0%,rgba(255,179,230,.35) 50%,rgba(255,255,255,0) 100%)}   /* 시작점 한 단 진하게(전 166,217,255 .7) */
.pcard-hi::after{content:'';position:absolute;right:0;top:0;width:200px;height:150px;pointer-events:none;z-index:0;   /* 그라디언트 위 별 점 스물둘(2026-09-15 jinny) : 테두리를 .4px 로 딱 끊어 선명하게 · 큰 둘만 짧은 테 · 위 변까지 골고루 · 왼콽 아래로 옅어진다 */
  background:
    radial-gradient(circle at 172px 30px,#fff 0 2.1px,rgba(255,255,255,.55) 2.4px,rgba(255,255,255,0) 4.3px),
    radial-gradient(circle at 96px 20px,#fff 0 1.9px,rgba(255,255,255,.55) 2.2px,rgba(255,255,255,0) 4.1px),
    radial-gradient(circle at 130px 60px,#fff 0 1.5px,rgba(255,255,255,0) 1.9px),
    radial-gradient(circle at 186px 96px,#fff 0 1.5px,rgba(255,255,255,0) 1.9px),
    radial-gradient(circle at 150px 120px,#fff 0 1.4px,rgba(255,255,255,0) 1.8px),
    radial-gradient(circle at 58px 50px,#fff 0 1.4px,rgba(255,255,255,0) 1.8px),
    radial-gradient(circle at 196px 14px,#fff 0 1.5px,rgba(255,255,255,0) 1.9px),
    radial-gradient(circle at 24px 10px,#fff 0 1.3px,rgba(255,255,255,0) 1.7px),
    radial-gradient(circle at 112px 8px,#fff 0 1px,rgba(255,255,255,0) 1.4px),
    radial-gradient(circle at 156px 10px,#fff 0 1px,rgba(255,255,255,0) 1.4px),
    radial-gradient(circle at 44px 30px,#fff 0 1px,rgba(255,255,255,0) 1.4px),
    radial-gradient(circle at 80px 100px,#fff 0 1px,rgba(255,255,255,0) 1.4px),
    radial-gradient(circle at 118px 92px,#fff 0 0.9px,rgba(255,255,255,0) 1.3px),
    radial-gradient(circle at 168px 64px,#fff 0 1px,rgba(255,255,255,0) 1.4px),
    radial-gradient(circle at 196px 130px,#fff 0 0.9px,rgba(255,255,255,0) 1.3px),
    radial-gradient(circle at 88px 44px,#fff 0 0.9px,rgba(255,255,255,0) 1.3px),
    radial-gradient(circle at 14px 36px,#fff 0 0.8px,rgba(255,255,255,0) 1.2px),
    radial-gradient(circle at 140px 140px,#fff 0 0.9px,rgba(255,255,255,0) 1.3px),
    radial-gradient(circle at 62px 124px,#fff 0 0.8px,rgba(255,255,255,0) 1.2px),
    radial-gradient(circle at 180px 148px,#fff 0 0.8px,rgba(255,255,255,0) 1.2px),
    radial-gradient(circle at 70px 8px,#fff 0 0.8px,rgba(255,255,255,0) 1.2px),
    radial-gradient(circle at 34px 70px,#fff 0 0.8px,rgba(255,255,255,0) 1.2px);
  -webkit-mask-image:linear-gradient(225deg,#000 45%,transparent 92%);mask-image:linear-gradient(225deg,#000 45%,transparent 92%)}
.pname{margin:0;font-size:14px;font-weight:500;color:var(--ink-2)}
.pprice{margin:0;display:flex;align-items:flex-end;gap:12px}
.pprice b{font-size:48px;font-weight:500;letter-spacing:-1.7px;line-height:1;color:var(--ink)}   /* 글자 가격(Custom · 협의)도 이 크기를 그대로 쓴다 : 한 단어를 세우는 자리는 숫자와 같은 크기다(2026-09-21 jinny · Vercel 실측) · 48(2026-09-21 jinny · 전 56) */
.punit{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding-bottom:6px;font-size:14px;line-height:1.3;color:var(--ink-3)}   /* 「per seat / month」 = text-tertiary(2026-09-15 jinny 코멘트 1789483844020 · 1789483848009 · 두 카드 모두 · 전 ink-2) */
.punit s{font-size:13px;color:var(--ink-3);text-decoration-thickness:1px}   /* 취소선 1(2026-09-16 jinny 「진하다 · 글과 같은 색 · 글 길이만큼」 · 전 1.5) */
/* 요금 굴림(lp.js) : 자리마다 숫자 띠 · 한 자리 높이 = 1em(가격 줄 높이 1) · 숫자 폭은 고르게(tabular) */
.proll{font-variant-numeric:tabular-nums}
.proll-c{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.proll-c i{display:block;font-style:normal}
.proll-c i span{display:block;height:1em}
.punit s.proll-s{align-self:flex-start;opacity:0;translate:-6px 0;transition:opacity .3s var(--e-out),translate .3s var(--e-out)}   /* 굴림이 끝나면 오른쪽에 생긴다 · 취소선은 글자 자체의 선(글과 같은 색 · 글 길이만큼) */
.punit s.proll-s.is-on{opacity:1;translate:0 0}
.pdesc{margin:0;min-height:48px;font-size:15px;line-height:1.5;color:var(--ink-2)}   /* 두 줄 자리를 잡아 두 카드의 CTA 가 같은 높이에 놓인다 */
.pfeat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.pfeat li{display:flex;gap:8px;align-items:center}
.pfeat li::before{content:'';flex:none;width:16px;height:16px;background:no-repeat center/14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='%2300A1FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")}   /* 원 없는 체크만 · 16 영역 안 14(2026-09-15 jinny 코멘트 1789483781543 「원 없는 그냥 체크」 · 「파란 체크로」 accent · 전엔 테두리 원 16 안에 체크 8) */
.pmore{display:inline-flex;align-items:center;gap:6px;margin-top:auto;width:fit-content;font-size:14px;font-weight:500;color:var(--ink-3);text-decoration:none}   /* 고스트 : 글자와 화살표만 · 한 단 연하게(2026-09-15 jinny 코멘트 1789452845068) */
.pmore:hover{color:var(--accent)}   /* 호버에 파란 글자 단추(2026-09-15 jinny 코멘트 1789455508066) */

/* ---------- section: FAQ ---------- */
.faq{padding:120px var(--pad);display:grid;grid-template-columns:420px 1fr;gap:80px;align-items:start}   /* 제목 왼쪽(따라옴) · 목록 오른쪽 · 행 크게(2026-09-13 jinny · Cursor 식) */
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa .q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:22px 0;font-weight:500;font-size:18px}   /* 절 제목(400)보다 두꺼워 보여 한 단 내렸다(2026-09-15 jinny) */
.qa .q::-webkit-details-marker{display:none}
.qa .q::after{content:'';flex:none;width:9px;height:9px;margin-right:6px;margin-left:auto;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--e-out)}
.qa[open]:not(.is-closing) .q::after{transform:translateY(3px) rotate(-135deg)}   /* 닫히는 동안은 open 이 켜져 있어 .is-closing 으로 먼저 돌린다(lp.js FAQ 여닫기) */
.qa .a{padding:0 0 22px;font-size:16px;line-height:1.6;color:var(--ink-2)}
/* 목록·물음은 절 폭을 다 쓴다(.body 의 568 · 목록 900 상한을 푼다) */
.faq .faq-list{max-width:none;width:100%}
.faq .qa .q{max-width:none;width:100%}
.qa{display:flex;flex-direction:column;gap:8px;min-width:0}
.q{font-weight:500;font-size:16px;color:var(--ink);max-width:568px}
.a{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:568px}

/* ---------- section: final CTA ---------- */
/* 마지막 띠는 밝게(2026-09-13 jinny 「어두운 면은 작은 포인트로」) : hairline 위 한 줄 · 왼쪽 문장 · 오른쪽 검정 pill */
.final{padding:0;border-top:1px solid var(--line-soft)}
.final-box{max-width:var(--wrap);margin:0 auto;background:var(--bg-white);padding:72px var(--pad);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 48px}
.final-h{margin:0;font-weight:500;font-size:28px;line-height:1.25;letter-spacing:-.4px;max-width:640px;color:var(--ink);text-align:left;grid-column:1}
.final-meta{margin:0;font-size:14px;color:var(--ink-3);grid-column:1}
.final-box .btn{grid-column:2;grid-row:1/3}

/* ---------- footer ---------- */
.footer{padding:64px var(--pad) 40px;display:flex;flex-direction:column;background:var(--bg-white);color:var(--ink);border-top:1px solid var(--line-soft)}   /* 밝은 푸터(2026-09-13) · 네 단 */
.rule{display:none}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;align-items:start;padding-bottom:40px;border-bottom:1px solid var(--line-soft)}
.foot-brand .foot-word{margin:0;color:var(--ink);line-height:0}   /* .foot-brand p 의 회색이 이겨서 로고가 연했다(2026-09-14 jinny) */
.foot-brand{display:flex;flex-direction:column;gap:14px}
.foot-brand p{margin:0;font-size:14px;color:var(--ink-3);max-width:300px;line-height:1.5}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col h5{margin:0 0 6px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--ink-3)}
.foot-col a{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);text-decoration:none}
.foot-col .fi{width:16px;height:16px;color:var(--ink-3);flex:none}   /* Follow 리딩 = 그 서비스 아이콘(스프라이트 심볼 · 계획서 61 L2) */
.foot-col a:hover .fi{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:24px;font-size:13px;color:var(--ink-3)}
.foot-legal{margin:0;max-width:760px;font-size:13px;color:var(--ink-4)}
.foot-bottom>span{white-space:nowrap}   /* © 줄은 안 꺾인다(768 에서 두 줄이 됐다 · 2026-09-15) */   /* 밝은 푸터라 회색(전엔 어두운 푸터의 흰 글이 남아 안 보였다 · 2026-09-14) */

/* ---------- modals ---------- */
.scrim{position:fixed;inset:0;
  background:var(--bg-dim);z-index:100;
  display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:20px}   /* 모달은 화면 세로 가운데(margin auto) · 창보다 길면 위부터 스크롤(2026-09-15 jinny 코멘트 1789448833397) */
.scrim[hidden]{display:none}
/* 모달도 바뀐 결(2026-09-14 jinny) : 라운드 24 · 링 그림자 · 제목 28/400 · pill 입력 · 버튼은 파랑 */
.modal{position:relative;background:var(--bg-surface-modal);width:480px;max-width:100%;padding:0 32px 32px;border-radius:24px;overflow:hidden;
  box-shadow:var(--shadow-ring),0 32px 64px -32px rgba(0,0,0,.24);display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
  margin:auto 0;flex:none}   /* 간격은 묶음마다 다르게 준다 : 칩·제목·서브(16·6) / 입력칸·단추(8) / 동의(12) · 묶음 사이 28(2026-09-15 jinny) */   /* 480 · 가운데 정렬 · 머리(그라디언트)가 위를 채운다(계획서 61 H1·I) */
.modal[hidden]{display:none}
/* 머리 : 혜택 그라디언트를 살짝(.45) 깔고 아래로 흰색에 녹인다 · 잉크 Pill(대기자) 또는 ✓ 타일(완료)이 그 위에 · × 는 오른쪽 위 */
.m-head{position:relative;flex:none;width:calc(100% + 64px);margin:0 -32px 16px;height:80px;   /* 머리 80 · 글 ink-3 · 묶음 10 · 입력칸·단추 48 (2026-09-15 jinny 조정 코멘트 다섯) */display:flex;justify-content:center;align-items:flex-end;padding-bottom:0}
.m-head::before{content:'';position:absolute;inset:0;background:var(--promo-grad);opacity:.45;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
.m-head>*{position:relative}
.m-head-done{height:120px}   /* 완료 머리는 120 : 64 타일이 머리 아래쪽에 놓인다 · 80 이면 타일이 머리를 채워 위에 붙어 보인다(대기자 머리 80 은 jinny 조정 1789469354139 · 완료는 코멘트 1789469372253) */
.m-pill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em}
.m-tile{width:64px;height:64px;border-radius:18px;background:var(--bg-white);color:var(--accent);font-size:28px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.08);   /* 흰 타일 · 연한 회색 선 · 살짝 그림자 : 뒤 그라디언트와 대비(2026-09-15 jinny 코멘트 1789456541078) */
  animation:tilein .3s var(--e-out) both}
@keyframes tilein{from{scale:.6;opacity:0}to{scale:1;opacity:1}}
.m-close{position:absolute;top:16px;right:16px;font-size:16px;color:var(--ink-3);line-height:1;padding:4px;background:none;border:0;cursor:pointer}
.m-h{font-weight:500;font-size:28px;line-height:1.15;letter-spacing:-.4px;color:var(--ink);margin:0}
.m-p{font-size:15px;line-height:1.55;color:var(--ink-3);margin:6px 0 0}
.m-form{display:flex;flex-direction:column;gap:var(--space-10);width:100%;margin-top:28px}   /* 입력칸 · 단추가 한 묶음(10) · 동의 한 줄이 그 아래(12)(2026-09-15 jinny) */
.m-input{flex:none;width:100%;min-width:0;height:48px;border:1px solid var(--line-input);border-radius:12px;
  padding:0 20px;font-family:inherit;font-size:16px;color:var(--ink);background:var(--bg-white);text-align:center}
.m-input::placeholder{color:var(--ink-4)}
.m-form .btn-lg{flex:none;height:48px;margin-top:0;border-radius:12px}   /* 세로로 쌓인 두 pill 대신 둥근 사각(2026-09-15 jinny) */
.m-consent{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
.m-consent a{color:var(--ink-2);text-decoration:underline}
.m-foot{font-size:13px;color:var(--ink-3)}
.m-foot b{font-weight:600;color:var(--ink)}
/* 완료 : 행 둘(레퍼런스 macOS 권한 대화상자 · 계획서 61 I3) = 아이콘 44 · 제목 17 + 설명 14 · 오른쪽 Pill 단추 · 행 전체가 링크 */
.m-rows{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:24px;text-align:left}
.m-row{display:flex;align-items:center;gap:16px;min-height:88px;padding:16px 16px 16px 20px;border-radius:24px;background:var(--bg-surface);border:1px solid var(--line-soft);text-decoration:none;color:inherit}   /* 면 bg-surface · 테 1 border-subtle(2026-09-15 jinny 조정 코멘트 1789469436972 · 1789469437106) */   /* 호버 배경 없음 : 행 자체는 누를 것이 없다(2026-09-15 jinny 코멘트 1789456126744) */
.m-ricon{flex:none;width:44px;height:44px;color:var(--ink);display:grid;place-items:center}   /* 검은 원 없이 로고만(고스트) : 오른쪽 단추가 강조돼야 한다(2026-09-15 jinny 코멘트 1789448997927) */
.m-ricon .fi{width:28px;height:28px}
.m-ricon-ph{color:#FF6154}   /* Product Hunt 로고는 제 오렌지(2026-09-15 jinny 코멘트 1789456145189) */
.m-rtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.m-rtext b{font-size:17px;font-weight:600;color:var(--ink);line-height:1.3}
.m-rtext small{font-size:14px;color:var(--ink-3);line-height:1.4}
.m-row .btn{flex:none}
.m-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:101}   /* 폭·높이를 꼭 적는다 : canvas 는 inset 만으로 안 늘고 제 픽셀 수(width 속성)만큼 그려진다 · 안 적으면 DPR 2 에서 한 번 뜰 때마다 600→1200→2400 으로 커져 조각이 모달 위 가운데의 두 배 자리(창 오른쪽 끝)에서 터졌다(2026-09-15 jinny 코멘트 1789469372253) */
/* 보자기 판이 열려 있으면 그 폭을 뺀 자리의 가운데(2026-09-15 jinny 코멘트 1789458212964 · 1789458778353) : 변수는 판이 닫혀도 값이 있어 body 클래스로 건다 */
:root[data-xs] .m-row{flex-wrap:wrap;gap:12px 14px}
:root[data-xs] .m-rtext{flex:1 1 calc(100% - 58px)}
:root[data-xs] .m-row .btn{margin-left:58px}

/* ---------- narrow ---------- */
/* 좁을 때 : 폭은 lp.js 가 body 안쪽으로 재서 <html data-lpw> 에 놓는다(m ≤1200 · s ≤900) */
:root[data-lpw='m']{--pad:64px}
:root[data-lpw='s']{--pad:24px}
:root[data-lpw='s'] .hero{padding-top:0}   /* 데스크톱과 같이 0 (2026-09-18 jinny 코멘트 1789718052671 「전체 통일」) · 폰(data-xs)은 글이 위에 붙는 갈래라 그대로 24 */
:root[data-lpw='s'] .hero-title{font-size:36px;letter-spacing:-.8px}
:root[data-lpw='s'] .lede{font-size:16px}
:root[data-lpw='s'] .h2,:root[data-lpw='s'] .final-h{font-size:32px;letter-spacing:-0.7px}
:root[data-lpw='s'] .h2-40{font-size:28px}
:root[data-lpw='s'] .nav-links{display:none}
:root[data-lpw='s'] .drow,:root[data-lpw='s'] .claude-layer{flex-direction:column;height:auto}
:root[data-lpw='s'] .claude-layer{grid-template-columns:1fr}
:root[data-lpw='s'] .pcards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:744px;margin:0 auto;width:100%}   /* 768 은 두 열(340) · 폰은 한 열 · 카드 상한 360 은 max-width 744 로(계획서 61 M4 · auto-fit 은 max 가 고정 px 면 그 값으로 개수를 세어 한 열이 됐다) */
:root[data-lpw='s'] .drow{gap:32px;padding:32px 0}
:root[data-lpw='s'] .disappear{min-height:0;padding-top:80px}
:root[data-lpw='s'] .compare,:root[data-lpw='s'] .features,:root[data-lpw='s'] .claude-layer,:root[data-lpw='s'] .pricing,:root[data-lpw='s'] .faq,:root[data-lpw='s'] .cuts,:root[data-lpw='s'] .context{padding-top:80px;padding-bottom:80px}   /* 절 위아래 : 좁은 창 80 · 폰 64(계획서 61 M2) */
:root[data-lpw='s'] .visual,:root[data-lpw='s'] .visual-provider{width:100%;height:280px}
:root[data-lpw='s'] .faq{grid-template-columns:1fr;gap:40px}   /* 제목 → 목록 40(전 24) : 목록 위가 아래(절 여백 64)보다 붙어 보였다(2026-09-15 jinny) */   /* 420 + 1fr 두 열이 폰에서 옆으로 샜다(2026-09-14 실측 scrollX 243) */
:root[data-lpw='s'] .fgrid,:root[data-lpw='s'] .faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
:root[data-lpw='s'] .fcard{height:auto;padding-bottom:200px}
:root[data-lpw='s'] .fvis{position:relative;left:0;top:0;right:0;margin:23px}
:root[data-lpw='s'] .fh{position:static;margin:24px 23px 0;white-space:normal}
:root[data-lpw='s'] .fp{position:static;margin:12px 23px 0}
:root[data-lpw='s'] .ctx-grid{grid-template-columns:1fr;gap:32px}
:root[data-lpw='s'] .stage-panel{border-radius:max(10px,calc(var(--cut-radius) * var(--sz,1)));overflow:hidden}
:root[data-lpw='s'] .stage,:root[data-lpw='s'] .stage-bare{border-radius:0}   /* 안쪽 틀은 제 라운드를 버리고 판이 자른다 : 안 라운드(24×배율)가 판 라운드보다 작아 귀퉁이에 검정이 남았다(2026-09-15 jinny 코멘트 1789449413748) */   /* 판 radius 도 무대 배율을 따른다 · 하한 10(계획서 61 M1) */
:root[data-lpw='s'] .ctx-panel{border-radius:max(10px,calc(var(--cut-radius) * var(--cz,1)))}
:root[data-lpw='s'] .stage-in{zoom:1;transform:scale(var(--sz,1));transform-origin:50% 0}   /* 좁은 창은 zoom 이 아니라 transform 으로 줄인다 : iOS Safari 는 zoom 으로 글자를 9px 아래로 못 줄여(smart minimum) 상자만 줄고 글자는 그대로라 컷 안이 깨졌다(2026-09-15 시뮬레이터 실측 · 데스크톱은 .95 라 안 걸린다) */
:root[data-lpw='s'] .ctx-shot{zoom:1;flex:none;transform:scale(var(--cz,1));transform-origin:0 0;margin-right:calc(620px * (var(--cz,1) - 1));margin-bottom:calc(var(--sh,380px) * (var(--cz,1) - 1))}   /* 같은 이유 · 흐름 상자를 음수 여백으로 보이는 크기에 맞춘다(--sh 는 lp.js 가 높이와 같이 준다) */
:root[data-lpw='s'] .ctx-stage{height:auto;min-height:0;aspect-ratio:16/10;order:-1}   /* 좁은 창 : 판이 위, 목록이 아래(2026-09-15 jinny 코멘트 1789398192750) · height 480 이 남아 있으면 비율이 폭을 640 으로 늘려 옆으로 샜다 */
:root[data-lpw='s'] .nav-in{display:flex;justify-content:space-between}   /* 메뉴가 숨으면 세 칸 그리드가 버튼을 가운데로 보냈다(2026-09-15 jinny 코멘트 1789398031961) */
:root[data-lpw='s'] .cmp-r{grid-template-columns:1fr;gap:6px}
:root[data-lpw='s'] .cl-row{grid-template-columns:1fr}
:root[data-lpw='s'] .now{font-size:56px}
:root[data-lpw='s'] .final-box{padding:56px 24px}
:root[data-lpw='s'] .foot-top{grid-template-columns:1fr 1fr;gap:28px}
:root[data-lpw='s'] .modal{padding:0 24px 24px}
:root[data-lpw='s'] .m-head{width:calc(100% + 48px);margin:0 -24px 8px}
:root[data-lpw='s'] .m-form{flex-direction:column}

/* 폰(data-xs · ≤600 · s 규칙 위에 얹는다) : 히어로 밑판 480 · 컴포저 440 · 카드 160 위아래 · 원 · 띠 한 줄 · 판 여백 16 · 무대 밑판 720(lp.js) (2026-09-14 jinny 반응형) */
:root[data-xs]{--pad:16px}
:root[data-xs] .nav .btn{height:36px;padding:0 14px;font-size:13px}
:root[data-xs] .hero{padding:24px var(--pad) 16px;height:calc(100svh - 64px)}   /* svh : iOS Safari 의 100vh 는 툴바가 있을 때의 화면보다 커서 아래 카드가 툴바 뒤로 갔다 */   /* 폰은 내용이 위에 붙는다 : 가운데 두면 컴포저 아래 카드 둘이 화면 밖으로 나갔다(2026-09-15) · 무대 배율은 lp.js 가 카드까지 재서 정한다 */
:root[data-xs] .hero-text{gap:var(--space-12)}
:root[data-xs] .hero-title{font-size:34px;letter-spacing:-.6px}
:root[data-xs] .hero-sub{font-size:15px}
/* 폰 히어로 규칙(2026-09-15 jinny 코멘트 1789449282204) : 글 덩이가 세로 가운데 · 사진 원은 글보다 커서 좌우가 잘리고 위아래 호만 남는다 */
:root[data-xs] .hs-more,:root[data-xs] .hero-sub br{display:none}   /* 폰 서브라인은 앞 문장 하나(2줄) */
:root[data-xs] .hx-orb{width:36px;height:36px;margin:-18px 0 0 -18px}   /* 폰은 스물넷 다 · 전부 36(2026-09-15 jinny 코멘트 1789449282204 「1번 그림 간격 · 작은 크기로 통일」) · 반지름은 lp.js(폭의 60%) */
:root[data-xs] .hx-ringclip{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%)}
/* 폰 : 한 문장 + 우상단 닫기 + 아래 풀폭 CTA (2026-09-15 jinny) · 아래는 홈 바(safe-area) 위 */
:root[data-lpw='s'] .hx-strip-long{display:none}:root[data-lpw='s'] .hx-strip-short{display:inline}   /* 좁은 창은 짧은 문구 하나(계획서 61 A2·A3) */
:root[data-xs] .hx-strip{height:auto;flex-direction:column;align-items:stretch;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));font-size:14px}   /* 폰(2026-09-15 jinny) : 문단 한 덩이(길면 줄바꿈) → 아래 풀폭 CTA 36 · × 는 오른쪽 위 · display 는 안 건드린다(body.strip-off 의 display:none 과 순위가 같다) */
:root[data-xs] .hx-strip-t{flex:none;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4;padding-right:36px}
:root[data-xs] .hx-strip b{font-size:14px;letter-spacing:.04em;margin-right:6px}
:root[data-xs] .hx-strip-long{display:inline}:root[data-xs] .hx-strip-short{display:none}   /* 폰도 긴 문구 그대로 · 문단으로 흐른다 */
:root[data-xs] .hx-strip a{width:100%;height:36px;padding:0 16px;justify-content:center;font-size:14px}
:root[data-xs] .hx-strip-x{top:6px;right:6px;translate:0;width:36px;height:36px}
/* 좁은 창·폰의 컷 판에 여백을 두지 않는다 : 데스크톱 세 판이 다 1200×600 여백 없음이라 폰에도 테두리가 서면 프레임 비율이 데스크톱과 달라진다(2026-09-15 jinny 「모션 프레임은 데스크톱과 비율 동일」) */
:root[data-xs] .cut{padding:24px 0;gap:20px}
:root[data-xs] .cuts,:root[data-xs] .compare,:root[data-xs] .claude-layer,:root[data-xs] .pricing,:root[data-xs] .faq,:root[data-xs] .context{padding-top:64px;padding-bottom:64px}
:root[data-xs] .h2,:root[data-xs] .final-h{font-size:26px;letter-spacing:-.5px}
:root[data-xs] .cut .h3{font-size:24px;letter-spacing:-.3px}   /* 절 제목 26 아래 칸 : 컷 제목 32 가 절 제목보다 커져 있었다(2026-09-15 jinny 코멘트 1789398086426) */
:root[data-xs] .fh{font-size:18px}
:root[data-lpw='s'] .ctx-item{padding:14px 0}
:root[data-xs] .ctx-item{padding:14px 0}   /* 접힌 줄 위아래 14(전 10 · 2026-09-15 jinny 「좀 더 높이자」) */
:root[data-xs] .ctx-item.is-on{padding:16px 0}   /* 위아래 같게 · 한 단 낮게(2026-09-15 jinny 코멘트 1789449555056) */
:root[data-xs] .ctx-item .fh{font-size:16px}
:root[data-xs] .ctx-item.is-on .fh{font-size:18px}
:root[data-lpw='s'] .ctx-item .fh,:root[data-lpw='s'] .ctx-item .fp{margin:0}   /* 컷 라벨용 .fh/.fp 여백(24/12 · 옆 23)이 탭에 새어 글이 줄 가운데서 24 내려앉았다(2026-09-15 jinny 코멘트 1789449555056) */
:root[data-xs] .ctx-item .fp{font-size:14px}   /* 폰 탭 설명 14(제목 16/18)(같은 코멘트) */
:root[data-xs] .ctx-item.is-on .ctx-more{padding-top:4px}   /* 접힌 탭 47 → 37 · 열린 탭도 한 단 낮게(계획서 61 M3 · jinny 「접힌 탭이랑 열린 탭 너무 높은 듯」) */
:root[data-xs] .cut .body,:root[data-xs] .fp{font-size:15px}
:root[data-xs] .lede{font-size:15px}
:root[data-xs] .cl-card{width:240px;height:auto;min-height:320px;padding:22px;transform:none}   /* 높이를 못 박으면 항목 넷이 바닥을 넘었다(실측 327/320 · 2026-09-15 jinny 코멘트 1789398101889) */
:root[data-xs] .cmp-t{font-size:15px}
:root[data-xs] .ctx-stage{aspect-ratio:4/3}
:root[data-xs] .stage-panel,:root[data-xs] .ctx-panel{border-radius:12px}   /* 폰은 컷 판·팀 메모리 판 라운드 한 값 12(2026-09-15 jinny 코멘트 1789449543585 「모션 프레임 래디어스가 안 줄었다」) */
:root[data-xs] .pprice b{font-size:44px}
:root[data-xs] .final-box{grid-template-columns:1fr;gap:20px;padding:40px 20px;text-align:center;justify-items:center}   /* 한 열이 되면 가운데(2026-09-15 jinny 코멘트 1789398210016) */
:root[data-xs] .final-h{text-align:center}
:root[data-xs] .final-box .btn{grid-column:1;grid-row:auto;justify-self:center}
:root[data-xs] .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}   /* 법적 고지 옆에 © 가 서면 © 가 세 줄로 쪼개졌다(2026-09-15 jinny 코멘트 1789398257068) */
:root[data-xs] .foot-top{grid-template-columns:1fr;gap:24px}
/* 낮은 창(data-lph=short · 높이 ≤760) : 히어로 글 한 단 · 절 여백 120 → 80 · 컷 사이 56 → 32 · 무대는 lp.js 가 높이로 이미 줄인다 */
:root[data-lph='short']:not([data-xs]) .hero-title{font-size:40px;letter-spacing:-1px}
:root[data-lph='short'] .hero-text{gap:var(--space-12)}
:root[data-lph='short'] .cta-block{margin-top:20px}
:root[data-lph='short'] .cuts,:root[data-lph='short'] .compare,:root[data-lph='short'] .context,:root[data-lph='short'] .pricing,:root[data-lph='short'] .faq{padding-top:80px;padding-bottom:80px}
:root[data-lph='short'] .cut{padding:32px 0}

/* focus */
.m-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring-focus)}   /* 앱 입력칸과 같은 파란 링(2026-09-15 jinny 코멘트 1789455622511) */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- pricing page : feature table ---------- */
.features-table{max-width:var(--wrap);margin:0 auto;width:100%;padding:40px var(--pad) 120px;display:flex;flex-direction:column;gap:32px}
.ftable{width:100%;border-collapse:collapse;font-size:16px}
/* 머리 = 요금제 요약(이름 · 한 줄 · 가격 · 단추)이 내비 아래 붙어 따라온다 : 아래 기능을 보면서 언제든 시작한다(2026-09-15 jinny 코멘트 1789450108604)
   굵은 선과 「Feature」 글자는 없다(코멘트 1789450093348 · 1789450099754) */
.ftable thead th{top:calc(64px + var(--ct,0px))}   /* 내비(64) 아래 · 도구 바가 보이면 그만큼 더 · 아래 규칙의 top:64px 가 이 값을 덮어 바가 있을 때 40 잘렸다(2026-09-15 jinny 코멘트 1789460453377) */
.ftable thead th{position:sticky;z-index:2;background:var(--bg-white);text-align:left;font-weight:400;padding:16px 16px 20px;color:var(--ink);vertical-align:bottom}   /* 머리 아래 선은 없다 · 붙었을 때 그림자만(2026-09-15 jinny 코멘트 1789459690447) */
.ftable.is-stuck thead th::after{content:'';position:absolute;left:0;right:0;top:100%;height:12px;background:linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,0));pointer-events:none}   /* 위에 붙었을 때만 아래로 그림자(2026-09-15 jinny 코멘트 1789455987684) */
.fplan{display:flex;flex-direction:column;align-items:center;gap:8px}
.fplan b{font-size:16px;font-weight:500;color:var(--ink)}
.fplan .btn{margin-top:4px;width:100%}   /* 열 폭을 그대로 채운다 : 선 없이도 열 폭이 보인다(2026-09-15 jinny 코멘트 1789459715102) */
.ftable thead th:not(:first-child),.ftable td:not(:first-child){text-align:center;width:280px}   /* Business · Enterprise 열 220(2026-09-15 jinny 코멘트 1789450005967) */
.ftable td:nth-child(2){box-shadow:inset 1px 0 var(--line),inset -1px 0 var(--line)}   /* Business 열은 면 없이 본문 칸에만 좌우 선 · 머리(요금 이름·버튼)에는 선이 없다(2026-09-15 jinny 「가격 헤더의 양쪽 디바이더는 제거」) · border 가 아니라 안쪽 그림자다 · 파랑은 체크 하나(계획서 61 G3) */
.ftable td.y::before{content:'';display:inline-block;width:20px;height:20px;border-radius:50%;vertical-align:middle}   /* 없는 칸은 빈칸(대시 없음 · 계획서 61 G3) */
.ftable td.y::before{background:var(--accent) no-repeat center/10px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.ftable tbody th{text-align:left;font-weight:400;padding:48px 16px 16px}   /* th 기본 굵기(700)가 서브라인에 새어 들었다(2026-09-15 jinny 「레귤러로 내려 달라고 했는데」) */   /* 묶음 머리 = 제목 24 + 서브라인 15(계획서 61 G1) */
.ftable .fsec b{display:block;font-weight:400;font-size:24px;letter-spacing:-.3px;line-height:1.2;color:var(--ink)}
.ftable .fsec span{display:block;margin-top:6px;font-size:15px;font-weight:400;line-height:1.5;color:var(--ink-3)}
.ftable tbody tr:first-child th{padding-top:16px}
.ftable .fsec th{border-bottom:1px solid var(--line)}   /* 묶음 머리 아래에도 선 : 묶음마다 첫 줄 위와 끝줄 아래가 같은 선으로 닫힌다(2026-09-15 jinny 코멘트 1789479824505) */
.ftable td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.ftable td:first-child{color:var(--ink)}
/* 기능 칸 = 이름(연한 밑줄 · 커서 ?) · 설명은 툴팁(마우스 hover · 키보드 focus · 터치는 이름을 탭해 열고 바깥 탭으로 닫는다 · lp.js) · 폰은 hover 가 없어 이름 아래 설명을 다시 펼친다(계획서 61 G2 · ⓘ 은 뺐다 : 2026-09-15 jinny 코멘트 1789449967466) */
.ftable .fcell{position:relative;display:inline-flex;align-items:center;gap:8px}
.ftable .fname{font-weight:500;color:var(--ink);cursor:help;text-decoration:underline;text-decoration-color:var(--line-input);text-decoration-thickness:1px;text-underline-offset:2px;outline-offset:4px}
.ftable .fcell:hover .fname,.ftable .fname:focus-visible,.ftable .fcell.is-open .fname{text-decoration-color:var(--ink)}
.ftable .fdesc{position:absolute;left:0;bottom:calc(100% + 10px);width:max-content;max-width:260px;padding:8px 10px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;line-height:1.45;font-weight:400;
  opacity:0;visibility:hidden;transition:opacity .12s,visibility .12s;z-index:3;pointer-events:none}
.ftable .fdesc::after{content:'';position:absolute;left:14px;top:100%;border:6px solid transparent;border-top-color:var(--ink)}
.ftable .fcell:hover .fdesc,.ftable .fname:focus-visible~.fdesc,.ftable .fcell.is-open .fdesc{opacity:1;visibility:visible}
:root[data-xs] .fplan .btn{display:none}   /* 폰 머리는 이름만(CTA 는 위 카드가 든다) · 표는 데스크톱과 같다 : 이름 밑줄 → 탭하면 툴팁(2026-09-15 jinny) */
:root[data-xs] .ftable thead th:not(:first-child),:root[data-xs] .ftable td:not(:first-child){width:92px}   /* 폰 열 92(전 72) · 기능 열이 나머지 */
:root[data-xs] .ftable thead th{padding:12px 8px 14px}
:root[data-xs] .ftable .fdesc{max-width:min(260px,calc(100vw - 32px))}   /* 툴팁은 화면 안에 */
:root[data-xs] .ftable td{padding-left:8px;padding-right:8px}
:root[data-xs] .ftable tbody th{padding-left:8px;padding-right:8px}
:root[data-xs] .ftable .fsec b{font-size:20px}

/* ---------- 나타남 : 화면에 들어올 때 서서히 (lp.js 가 .rv 를 달고 .is-in 을 켠다) ---------- */
.rv{opacity:0;translate:0 22px;transition:opacity .7s ease-out,translate .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.rv.is-in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;translate:0 0;transition:none}}

/* ---------- 재생바(?scrub 일 때만) : 유튜브처럼 끌어 멈추고 ▶ 로 이어 돈다 ---------- */
.scrub{display:flex;align-items:center;gap:12px;height:44px;padding:0 4px;margin-top:8px;font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2)}
.sc-btn{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:var(--ink);position:relative;cursor:pointer}
.sc-btn::before{content:"";position:absolute;left:9px;top:8px;width:10px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box}
.sc-btn.is-paused::before{left:11px;width:0;height:0;border:0;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.sc-range{flex:1;height:4px;accent-color:var(--ink);cursor:pointer}
.sc-time{flex:none;min-width:110px;text-align:right;font-variant-numeric:tabular-nums}
.panel-claude{flex-wrap:wrap}.scrub.in-panel{flex-basis:100%;margin:24px 0 -24px;color:#fff}
.scrub.in-panel .sc-btn{background:#fff}.scrub.in-panel .sc-btn::before{border-color:#fff #111}.scrub.in-panel .sc-btn.is-paused::before{border-left-color:#111}.scrub.in-panel .sc-range{accent-color:#fff}

/* 앱 화면은 서 있는 동안 아주 천천히 커진다(+1%/s · 영상 셋 공통) : 전체 화면 토막에 건다 */

/* ---------- legal : privacy.html · terms.html (계획서 61 K1 · 영문 한 벌 · 목차 없음) ---------- */
.legal{max-width:calc(700px + var(--pad) * 2);margin:0 auto;padding:96px var(--pad) 120px;display:flex;flex-direction:column;gap:8px}
.legal-head{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 0 24px;text-align:center}
.legal h1{font-weight:500;font-size:40px;line-height:1.1;letter-spacing:-.6px;color:var(--ink);margin:0}
.legal-updated{margin:0;font-size:13px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.legal-intro{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0 0 16px}
.legal h2{font-weight:500;font-size:22px;line-height:1.3;letter-spacing:-.3px;color:var(--ink);margin:32px 0 8px}
.legal p,.legal li{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:20px}
.legal h3{font-weight:600;font-size:16px;line-height:1.5;color:var(--ink);margin:20px 0 4px}
.legal blockquote{margin:0 0 16px;padding:16px 20px;border-left:2px solid var(--ink);font-size:16px;line-height:1.6;color:var(--ink)}
.legal li{margin-bottom:6px}
.legal a{color:var(--ink);text-decoration:underline}
.legal strong{font-weight:600;color:var(--ink)}
:root[data-lpw='s'] .legal{padding-top:56px}
:root[data-lpw='s'] .legal h1{font-size:32px}

/* ---------- 한글(html[lang=ko] · lp.js 가 언어를 놓을 때 lang 도 놓는다) : 어절 단위로 꺾이고 제목은 두 줄이 고르게(계획서 61 N2) ---------- */
html[lang=ko] body{word-break:keep-all;overflow-wrap:anywhere}
html[lang=ko] h1,html[lang=ko] h2,html[lang=ko] h3,html[lang=ko] .h2,html[lang=ko] .h3,html[lang=ko] .final-h{text-wrap:balance}
/* 폰에서 어색하게 접히던 줄 넷(2026-09-15 jinny 코멘트 1789462540229) : br.d 는 폰에서 뺀다(짧은 꼬리 줄이 남았다) · br.m 은 폰에서만 넣는다(「2026.」 혼자 남았다) · .nb 는 낱말을 안 자른다(write-/ups) */
:root[data-xs] br.d{display:none}
br.m{display:none}
:root[data-xs] br.m{display:inline}
.nb{white-space:nowrap}
html[lang=ko] br.en{display:none}   /* 영문 문장 길이에 맞춘 줄바꿈은 한글에서 뺀다 · 히어로 제목·서브는 줄마다 키라 그대로 */

/* ═══ 03 복사본이 없어요(.s5 · 계획서 65) : 세션 컴포저에서 문서를 멘션해 고쳐 달라고 한다 → 세션 안 오른쪽에 문서 패널이 열리는데 팀원이 이미 안에서 고치고 있다.
   박자표 : 0.3·1.2 앞 대화 둘이 오른다 · 1.0 카메라가 채팅 위에서 컴포저로 내려간다 → 2.0 @ · 2.2 문서 목록 → 3.4 첫 문서 누름 → 3.9 칩 → 4.3~6.5 타자 → 6.6 카메라가 보내기 쪽으로 → 7.9 보내기
   → 8.1 풀 컷 · 내 글 → 8.8 Bottari 답 → 9.2 문서 패널 열림(Jayden 이미 안에 · 1.3 머문다) → 11.0 카메라 문서 패널로 → 9.5~17.5 둘이 같이 고친다(lp.js 「문서 컷 대본」 s5) → 15.8 Jayden 이 잇는 줄을 따라 조금 내려간다 → 17.4 풀 컷 → 19.2 끝
   문서 단독 화면은 한 프레임도 없다(2026-09-16 jinny 「세션 내에서 문서가 열리는 느낌 · 문서쪽으로 줌인」) */
.s5-panel{position:relative;overflow:hidden;padding:0}
/* 카메라 : 1.5배 · 잉크가 ㄴ자로 남는다(두 면은 잘려도 된다 · 2026-09-16 jinny 「한 면 정도는 모서리에 걸려서 잘려도 · 너무 안에만 포커싱하면 답답함」 → 1.2 는 갈 거리가 48 이라 패닝이 안 읽혀 1.5 로).
   원점은 판 가운데 C(600,300) 로 계산하고 : 점 p → C + S(p−C) + T. (CSS 는 원점 0 0 · translate = C(1−S)+T · 아래 화질 규칙 때문에 ÷ --rz) 창은 x 120~1080 · y 30~570.
   T0 (168,145) = 창 왼쪽 위가 화면 (48,40) · 아래·오른쪽 잘림 → T1 (168,−145) = 창 왼쪽 아래가 (48,560) · 컴포저와 목록이 다 든다 → T2 (−168,−145) = 창 오른쪽 아래가 (1152,560) · 보내기가 든다
   → F 풀 컷 → T4 (−168,145) = 창 오른쪽 위가 (1152,40) · 문서 패널 머리와 세션 왼쪽 조각이 든다 → T5 (−168,115) = 30 아래로(Jayden 이 잇는 줄) → F */
.s5-view{--rz:1.5;position:absolute;left:0;top:0;width:1200px;height:600px;transform-origin:0 0;zoom:var(--rz);transform:translate(calc(-132px / var(--rz)),calc(-5px / var(--rz))) scale(calc(1.5 / var(--rz)))}   /* 화질 규칙(01 .s2-view 와 같다) : 비트맵은 최대 카메라 배율 --rz 로 굳히고(zoom) 카메라(transform)는 줄이기만 한다 · rastersweep 이 1.5 를 잡았다(2026-09-16). 원점 0 0 이라 자리 t = C(1−S)+T 를 translate 로 적고, zoom 아래라 셋 다 ÷ --rz */
.s5.play .s5-view{animation:s5p1 .9s var(--e-inout) 1s forwards,s5p2 .6s var(--e-inout) 6.6s forwards,s5o1 .5s var(--e-inout) 8.1s forwards,s5i2 .6s var(--e-inout) 11s forwards,s5p3 .7s var(--e-inout) 15.8s forwards,s5o2 .5s var(--e-inout) 17.4s forwards}   /* 패널이 다 열린 뒤(9.7) 1.3 머물고 줌인한다(2026-09-17 jinny 「문서가 펼쳐졌구나 인지할 시간」 · 전 9.8) */
@keyframes s5p1{from{transform:translate(calc(-132px / var(--rz)),calc(-5px / var(--rz))) scale(calc(1.5 / var(--rz)))}to{transform:translate(calc(-132px / var(--rz)),calc(-295px / var(--rz))) scale(calc(1.5 / var(--rz)))}}
@keyframes s5p2{from{transform:translate(calc(-132px / var(--rz)),calc(-295px / var(--rz))) scale(calc(1.5 / var(--rz)))}to{transform:translate(calc(-468px / var(--rz)),calc(-295px / var(--rz))) scale(calc(1.5 / var(--rz)))}}
@keyframes s5o1{from{transform:translate(calc(-468px / var(--rz)),calc(-295px / var(--rz))) scale(calc(1.5 / var(--rz)))}to{transform:translate(calc(0px / var(--rz)),calc(0px / var(--rz))) scale(calc(1 / var(--rz)))}}
@keyframes s5i2{from{transform:translate(calc(0px / var(--rz)),calc(0px / var(--rz))) scale(calc(1 / var(--rz)))}to{transform:translate(calc(-468px / var(--rz)),calc(-5px / var(--rz))) scale(calc(1.5 / var(--rz)))}}
@keyframes s5p3{from{transform:translate(calc(-468px / var(--rz)),calc(-5px / var(--rz))) scale(calc(1.5 / var(--rz)))}to{transform:translate(calc(-468px / var(--rz)),calc(-35px / var(--rz))) scale(calc(1.5 / var(--rz)))}}
@keyframes s5o2{from{transform:translate(calc(-468px / var(--rz)),calc(-35px / var(--rz))) scale(calc(1.5 / var(--rz)))}to{transform:translate(calc(0px / var(--rz)),calc(0px / var(--rz))) scale(calc(1 / var(--rz)))}}
.s5-frame{position:absolute;inset:30px 120px;background:var(--bg-white);border-radius:12px;overflow:hidden}   /* 창 960×540 = 04 와 같다(전 1120×520 은 넷 중 혼자 길쭉했다 · 2026-09-16 jinny) */
.s5-sess{position:absolute;left:0;top:0;bottom:0;right:0}
.s5.play .s5-sess{animation:s5sess .5s var(--e-out) 9.2s forwards}   /* 패널이 열리면 세션 칸이 오른쪽 440 을 내준다(같은 .5 · 같은 곡선) */
@keyframes s5sess{to{right:440px}}
.s5-head{position:absolute;left:0;right:0;top:0;height:52px;display:flex;align-items:center;gap:10px;padding:0 24px;border-bottom:1px solid var(--line);font-size:15px}
.s5-head b{font-weight:600}
.s5-head .asg-chip{margin-left:auto;position:static}
.s5-stream{position:absolute;left:0;right:0;top:52px;bottom:158px;padding:20px 24px 0;display:flex;flex-direction:column;gap:12px;justify-content:flex-end;overflow:hidden}   /* 아래 정렬 : 마지막 말이 늘 컴포저 위에 다 보이고 넘치는 것은 위에서 잘린다(2026-09-17 jinny 「컴포저가 글을 가린다」 · 전엔 위 정렬이라 넷째 말 둘째 줄이 컴포저 뒤로 갔다) */
.s5-stream .msg{opacity:0;translate:0 14px;max-height:0;overflow:visible;margin-top:-12px}
.s5-stream .msg.pre{opacity:1;translate:0 0;max-height:none;margin-top:0}
.s5-stream .msg-b{max-width:520px}
.s5.play .m0a{animation:rise4 .5s var(--e-out) .3s forwards}   /* 앞 대화 둘도 하나씩 오른다 : 첫 2초가 정지 화면이었다(2026-09-16 진단) · 카메라가 그 사이 컴포저로 내려간다 */
.s5.play .m0b{animation:rise4 .5s var(--e-out) 1.2s forwards}
.s5.play .m1{animation:rise4 .4s var(--e-out) 8.1s forwards}   /* 보낸 글은 풀 컷과 한 프레임에 오른다 */
.s5.play .m2{animation:rise4 .4s var(--e-out) 8.8s forwards}
.s5-dm{display:inline-flex;align-items:center;gap:5px}   /* 문서 멘션 칩 : 사람 칩과 같은 파랑 · 리딩은 문서 글리프 */
.msg-line .s5-dm{vertical-align:baseline}   /* 말 줄 안에서는 인라인(.msg-line .mention 이 우선한다) : 칩 글이 옆 글과 같은 베이스라인에 놓인다(2026-09-17 jinny · 전 -3px 라 칩만 내려갔다) */
.msg-line .s5-dm .s5-dg{vertical-align:-3px;margin-right:5px}   /* 인라인 svg 는 베이스라인에 붙어 글보다 높게 놓인다 → 3 내려 대문자 높이 가운데에 맞춘다 · gap 대신 여백 */
.s5-dg{flex:none;width:16px;height:16px}
.s5-fc{position:absolute;left:16px;right:16px;bottom:16px;z-index:5}   /* 세션 칸 전폭(02 와 같다) : 최대폭을 두면 처음부터 좁게 서고 패널이 열릴 때 같이 안 준다(2026-09-16 jinny) */
.s5-fc .ty-chip{padding:0;margin:0;gap:0}   /* 안 보일 땐 여백도 0(02 와 같다) */
.s5-fc .ty-chip .s5-dg{width:0}
.s5-pop{position:absolute;left:0;bottom:calc(100% + 6px);width:340px;background:var(--bg-white);border-radius:var(--radius-lg);padding:6px;opacity:0;visibility:hidden;font-size:14px;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.12)}   /* 흰 판 위라 그림자를 둔다(02 의 목록은 색 판 위라 없다) */
.s5-dt{flex:none;width:28px;height:28px;border-radius:8px;background:var(--pop-tint-blue);color:var(--pop-blue);display:grid;place-items:center}
.s5-dt .s5-dg{width:16px;height:16px}
.s5 .caret{opacity:0}
.s5.play .caret{animation:caretblink 1s 1s infinite,fadeout .1s 7.9s forwards}
.s5.play .cph{animation:hide .01s 2s forwards,s5show .01s 8.2s forwards}   /* @ 가 찍히는 프레임에 사라지고 보낸 뒤 돌아온다 */
@keyframes s5show{to{opacity:1;visibility:visible}}
.s5.play .ty-1{animation:tyin .1s 2s forwards,tyout .01s 3.9s forwards}
.s5.play .s5-pop{animation:poprise .2s var(--e-out) 2.2s forwards,hide .2s var(--e-out) 3.9s forwards}
.s5.play .pr-1{animation:hion var(--t-fast) 3.2s forwards,press2 var(--t-press) 3.4s}
.s5.play .ty-chip{animation:s5chip .01s 3.9s forwards,tycollapse .01s 8.2s forwards}
@keyframes s5chip{to{max-width:480px;opacity:1;padding:1px 9px 1px 6px;margin-right:4px;gap:5px}}
.s5.play .ty-chip .s5-dg{animation:s5chipg .01s 3.9s forwards}
@keyframes s5chipg{to{width:16px}}
.s5.play .ty-2{animation:tycollapse .01s 8.2s forwards}
.s5.play .csend{animation:press2 var(--t-press) 7.9s}
/* 문서 패널 : 앱 작업 패널 docs 탭(머리 = 문서 이름 · 관전자 얼굴 무리 · ⋯ · 닫기) · 오른쪽 밖에서 들어온다 */
.s5-dock{position:absolute;top:0;bottom:0;right:0;width:440px;border-left:1px solid var(--line);background:var(--bg-white);translate:100% 0;z-index:3}
.s5.play .s5-dock{animation:s5dock .5s var(--e-out) 9.2s forwards}
@keyframes s5dock{to{translate:0 0}}
.s5-dhead{height:52px;display:flex;align-items:center;gap:8px;padding:0 12px 0 16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.s5-dhead b{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.s5-who{margin-left:auto;display:inline-flex;align-items:center;padding-right:4px}   /* 얼굴 무리 : 겹쳐 서고 흰 테가 하나씩 구분한다 · 누가 들어와 있나가 여기 · 상태점은 없다(쌓인 얼굴에는 안 단다 · 2026-09-17 jinny) */
.s5-who .pav{width:22px;height:22px;margin-left:-4px;position:relative}   /* 겹침 4(전 6 · 2026-09-17 jinny 「조금 더 띄우자」) */
.s5-who .pav:first-child{margin-left:0}
.s5-who .pav:nth-child(1){z-index:3}.s5-who .pav:nth-child(2){z-index:2}.s5-who .pav:nth-child(3){z-index:1}   /* 왼쪽이 위에 온다(2026-09-17 jinny) */
.s5-who .pav .face{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px var(--bg-white)}
.s5-doc{position:absolute;left:0;right:0;top:52px;bottom:0;padding:20px 116px 20px 24px;overflow:hidden}   /* 오른쪽 안 여백 116 : 줄 끝에서 쓰는 화살표 + Bottari 이름표(팁에서 오른쪽 끝까지 108)가 패널 밖으로 안 나간다(96 이면 잘렸다 · 2026-09-16 실측) */
.s5-doc .cx3-h{font-size:20px}
.s5-doc .cx3-p{font-size:15px;line-height:1.6}
.s5-doc .cx3-blk{font-size:15px}
.s5-doc .cx3-blk.ans{padding-left:0}