/* 메인 sokki_hero.html 스타일 그대로 — 소개서는 늘 PC 판이라 «좁은 화면» 규칙(max-width · max-aspect-ratio)만 뺌 */
/* 레이아웃: 노을 인물 사진 한 장 위에 «실제 SOKKI 챗봇 창»(흰 불투명 · 측정값 그대로) · 위에 로고 + 메뉴 · 창 위 캡션이 1→5 장면 이름 */
:root {
  --sky-top: #957e9f;
  --sky-mid: #f0a27c;
  --sky-low: #f3603f;
  --nav: #1d1626;
  /* 실제 위젯 흰 유리 판(.panel.lt) 값 그대로 — widget_v2.js background_17 · backdrop_filter_3 · border_color_4 · box_shadow_7 */
  --w-glass: linear-gradient(165deg, rgba(255, 255, 255, .76) 0%, rgba(255, 255, 255, .64) 55%, rgba(248, 249, 251, .70) 100%);
  --w-blur: blur(40px) saturate(180%);
  --w-edge: rgba(255, 255, 255, .8);
  --w-shadow: 0 20px 50px rgba(22, 24, 29, .12), 0 0 0 .5px rgba(22, 24, 29, .08);
  --w-ink: #16181d;             /* 실측 rgb(22,24,29) */
  --w-text: rgba(22, 24, 29, .86);
  --w-sub: rgba(22, 24, 29, .58);
  --w-time: rgba(22, 24, 29, .40);
  --w-line: rgba(22, 24, 29, .08);
  --w-soft: rgba(22, 24, 29, .07);
  --w-gray: #6b7280;
  --w-online: #34c38f;
  --w-sale: #e5484d;
  --font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { height: 100%; } body { min-height: 100%; }
body { margin: 0; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%); color: var(--w-ink); font-family: var(--font); word-break: keep-all; -webkit-font-smoothing: antialiased; }
.hero { position: relative; min-height: 100svh; overflow: hidden; }
.photo { position: absolute; inset: 0; display: grid; place-items: center; }
.photo picture { height: 100%; display: grid; place-items: center; }
.photo img { display: block; height: 125svh; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
/* 머리 줄: 화면 위에 늘 고정 · 처음엔 투명 · 내리면 흰 반투명 유리(뒤 흐림) + 가는 선 + 옅은 그림자 */
.top { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding: calc(env(safe-area-inset-top, 0px) + 20px) 28px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid transparent; transition: background-color .35s ease, padding .35s ease, box-shadow .35s ease, border-color .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease; }
.top.scrolled { padding-top: calc(env(safe-area-inset-top, 0px) + 13px); padding-bottom: 13px; background-color: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border-bottom-color: rgba(22, 24, 29, .06); box-shadow: 0 8px 30px rgba(20, 22, 26, .06), inset 0 -1px 0 rgba(255, 255, 255, .5); }
.top.scrolled nav a { color: #1b1d22; }
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }
.logo { height: 22px; width: auto; display: block; }
.top nav { display: flex; align-items: center; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.top nav a { color: var(--nav); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: .86; }
.top nav a:hover, .top nav a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 4px; outline: none; }
/* 메뉴 이동(오너 10-17 «실제 작동»): 고정 머리 줄 높이만큼 띄워 멈춤 · 바로 이동(부드러운 이동은 스크롤 장면들이 중간에 끊어 세움 — 측정) */
html { scroll-padding-top: 72px; }
.top .logo-a { display: block; }
/* 로그인: 얇은 선 동그라미 프로필 아이콘(오너 10-17) → app.sokki.co.kr/login */
.top .login { margin-left: 4px; width: 22px; height: 22px; flex: none; display: grid; place-items: center; opacity: .86; transition: opacity .2s ease; }
.top .login svg { width: 22px; height: 22px; display: block; }
.top .login:hover, .top .login:focus-visible { opacity: 1; text-decoration: none; }

/* 가운데 묶음: 장면 캡션 + 챗봇 창 — 사진 가운데에 얹어 코 · 입이 창 왼쪽으로 살짝 보이게 */
.stage { position: absolute; z-index: 2; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 388px; display: grid; gap: 12px; }
.cap { justify-self: center; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(60, 20, 10, .12); font-size: 14px; font-weight: 600; color: var(--w-ink); max-width: 100%; }
.cap .no { font-size: 12px; font-weight: 700; color: var(--w-sub); font-variant-numeric: tabular-nums; }
.cap .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cap button { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--w-ink); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.cap button:focus-visible { outline: 2px solid var(--w-ink); outline-offset: 2px; }

/* 흐림 유리는 창 뒤에 깐 별도 층(:before)에만 건다 — 실제 위젯과 같은 방식(창 자체에 걸면 크롬이 안쪽을 따로 그려 회색 상자가 비침) */
.chat { --r: 34px; position: relative; isolation: isolate; height: min(600px, 72svh); border-radius: var(--r); border: 1px solid var(--w-edge); box-shadow: var(--w-shadow); display: flex; flex-direction: column; overflow: hidden; }
/* 흐림 층 모서리: 크롬은 흐림(backdrop-filter) + 둥근 모서리를 계단처럼 자름 → clip-path 로 부드럽게(어두운 배경에서 «지글지글» · 오너 10-16) */
.chat:before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--w-glass); -webkit-backdrop-filter: var(--w-blur); backdrop-filter: var(--w-blur);
  -webkit-clip-path: inset(0 round calc(var(--r) - 1px)); clip-path: inset(0 round calc(var(--r) - 1px)); }
.chd { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 18px; border-bottom: 1px solid var(--w-line); }
.av { position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid var(--w-line); background: #fff; display: grid; place-items: center; }
.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.av .dot { position: absolute; right: -1px; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--w-online); border: 2px solid #fff; }
.tt { flex: 1; min-width: 0; }
.t1 { font-size: 16px; font-weight: 700; color: var(--w-ink); }
.t2 { font-size: 12.5px; color: var(--w-sub); margin-top: 2px; }
.hic { display: flex; gap: 14px; color: var(--w-ink); }
.hic svg { width: 20px; height: 20px; display: block; }

/* 대화는 위에서부터 쌓이고, 새 말이 오면 스크립트가 부드럽게 스크롤(손님 휠은 안 잡음 — 페이지 스크롤을 막지 않게 overflow:hidden) */
.msgs { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* 위로 스크롤된 동안만 위 끝을 부드럽게 흐리게 */
.msgs.over { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px); mask-image: linear-gradient(180deg, transparent 0, #000 40px); }
.banner { display: block; width: 100%; height: auto; flex: none; opacity: 0; transition: opacity .45s ease; }
.banner.in { opacity: 1; }
.msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 14px 18px 14px 16px; border-top: 1px solid var(--w-line); opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.msg:first-child { border-top: 0; }
.msg.in { opacity: 1; transform: none; }
.msg .av { width: 36px; height: 36px; }
.me-av { width: 36px; height: 36px; border-radius: 50%; background: #eceef2; color: var(--w-sub); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; }
.meta { display: flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 700; color: var(--w-ink); }
.meta .tag { font-size: 12px; font-weight: 700; color: var(--w-sub); }
.meta .tm { font-size: 13px; font-weight: 400; color: var(--w-time); }
.tx { margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--w-text); }
.tx b { font-weight: 700; }
.blk { margin-top: 10px; display: grid; gap: 8px; }
.qr { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.qr > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 14px; border: 1px solid rgba(22, 24, 29, .14); border-radius: 999px; font-size: 14px; color: var(--w-ink); background: rgba(255, 255, 255, .6); }
.qr > span:after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--w-time); border-top: 1.5px solid var(--w-time); transform: rotate(45deg); margin-left: 2px; }
.mini { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid rgba(22, 24, 29, .10); border-radius: 14px; width: fit-content; max-width: 100%; }
.mini img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.mini .lb { font-size: 12px; color: var(--w-gray); }
.mini .nm { font-size: 13.5px; color: var(--w-ink); }
.mini .nm b { margin-left: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips > span { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: var(--w-soft); color: #374151; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(22, 24, 29, .07), 0 0 0 .5px rgba(22, 24, 29, .07); }
.pc img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.pc .b { padding: 8px 10px 10px; }
.pc .n { font-size: 13px; color: #374151; line-height: 1.35; }
.pc .p { font-size: 15px; font-weight: 700; margin-top: 2px; }
.spot { border: 1.5px solid var(--w-ink); border-radius: 16px; padding: 12px; display: grid; gap: 10px; }
.spot .pics { display: flex; gap: 6px; }
.spot .pics img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.spot .pr { font-size: 13px; color: var(--w-gray); }
.spot .pr s { margin-right: 6px; }
.spot .pr b { font-size: 17px; color: var(--w-sale); }
.btn { display: block; text-align: center; border-radius: 999px; background: var(--w-ink); color: #fff; font-size: 14px; font-weight: 700; padding: 11px 14px; }
.note { font-size: 12px; color: var(--w-gray); }

.cin { margin: 10px 12px 12px; display: flex; align-items: center; gap: 10px; padding: 0 8px; height: 54px; border-radius: 27px; border: 1px solid rgba(22, 24, 29, .10); background: rgba(255, 255, 255, .72); }
.rec { width: 36px; height: 36px; border-radius: 50%; background: var(--w-ink); color: #fff; font-size: 12.5px; font-weight: 600; display: grid; place-items: center; flex: none; }
.ph { flex: 1; min-width: 0; font-size: 14.5px; color: var(--w-time); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send { width: 36px; height: 36px; border-radius: 50%; background: var(--w-soft); color: var(--w-time); display: grid; place-items: center; flex: none; }

/* 휴대폰: 세로 사진 꽉 채우고 창은 화면 폭에 맞춤 */

@media (prefers-reduced-motion: reduce) { .msg { transition: none; } }

/* ── 03 문제: 참고 영상(Details.so «Featured Work») 구조 그대로 — 왼쪽 글 목록이 스크롤에 맞춰 굴러가고, 오른쪽 그림 칸이 함께 올라옴
   바꾼 것: 어두운 판 → 흰 배경 · 사진 → 라인 아이콘 · 회사 이름 → 손님이 떠나는 장면 3개 */
/* --ph = 그림 칸 한 변(스크립트가 칸 폭 · 화면 높이로 정함). 고정되는 판 = 칸 + 아래로 다음 칸 72px */
.prob { --p-ink: #16181d; --p-dim: rgba(22, 24, 29, .5); --p-tile: #f6f5f3; --p-warm: #e8603c; --ph: 520px;
  position: relative; background: #fff; color: var(--p-ink); }
/* 제목: 섹션 맨 위 가운데 · 크게(오너 10-16) — 이 줄은 그냥 지나가고, 아래 굴러가는 판만 화면에 멈춤 */
.prob-intro { max-width: 1240px; margin: 0 auto; padding: 96px 56px 72px; text-align: center; }
.prob-h { margin: 0; font-size: 44px; line-height: 1.22; font-weight: 700; letter-spacing: -.03em; }
/* 제목 위 큰 따옴표(오너 레퍼런스 «66» 모양) — 손님 속마음이라는 표시 · 첫 줄은 살짝 흐리게(오너 10-16) */
.prob-q { display: block; height: 24px; margin: 0 auto 18px; font: 700 60px/1 Georgia, "Times New Roman", serif; color: #3f3f3f; overflow: visible; }
.prob-q > span { display: block; transform: translateY(-8px); }
.prob-h .soft { color: rgba(22, 24, 29, .42); }
.prob-run { position: relative; height: calc(var(--ph) + 72px + 220svh); }
.prob-stick { position: sticky; top: max(24px, calc((100svh - var(--ph) - 72px) / 2)); height: calc(var(--ph) + 72px);
  max-width: 1240px; margin: 0 auto; padding: 0 56px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 72px; overflow: visible; }
/* PC: 그림 영역은 스크립트가 화면 위아래 끝까지 넓힘 → 앞 · 뒤 그림이 아주 옅게 살짝 보임(오너 10-16) */
.prob-left { display: flex; flex-direction: column; min-height: 0; }
.prob-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.prob-eye { font-size: 14px; font-weight: 600; color: var(--p-dim); }
.prob-no { font-size: 14px; font-weight: 600; color: var(--p-dim); font-variant-numeric: tabular-nums; }
.prob-no b { color: var(--p-ink); font-weight: 700; }
.roll { position: relative; flex: 1; min-height: 0; margin-top: 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 62%, transparent 100%); }
.roll-list { position: absolute; left: 0; right: 0; top: 0; margin: 0; padding: 0; list-style: none; will-change: transform; }
.roll-list li { padding: 14px 0; font-size: 40px; line-height: 1.22; font-weight: 650; letter-spacing: -.03em; opacity: .09; }
.roll-list li > span:not(.qm) { display: block; font-weight: 400; color: var(--p-dim); }
.track-wrap { position: relative; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6px, #000 calc(100% - 72px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 6px, #000 calc(100% - 72px), transparent 100%); }
.track { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 20px; will-change: transform; }
/* 그림 칸 = 오너 이미지 3장(모서리 최소 4px · 오너 10-16) · 가운데 온 칸은 살짝 당겨진 상태에서 제자리로 */
.tile { aspect-ratio: 1 / 1; width: min(100%, var(--ph)); margin: 0 auto; border-radius: 4px; overflow: hidden; background: var(--p-tile); }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s cubic-bezier(.2, .6, .2, 1); }
.tile.on img { transform: none; }
/* PC: 가운데가 아닌 칸은 살짝 흐리게 — 앞뒤 칸 가장자리(어두운 띠)가 선처럼 끊겨 보이지 않게 */
@media (min-width: 900px) {
  .tile { transition: filter .8s ease; }
  .tile:not(.on) { filter: blur(4px) saturate(.5); }
}


@media (prefers-reduced-motion: reduce) {
  .tile img { transition: none; transform: none; }
}

/* ── 04 차별: 오너 레퍼런스(흐린 파랑 그러데이션 + 얇은 격자 · 원 + 결) — 더 검게 · 가운데 제목 · 좌 «보통 챗봇» | 우 SOKKI(히어로 채팅창 그대로)
   같은 손님 질문 3개에 두 챗봇이 동시에 답함(화면에 들어오면 재생) · 다른 회사 이름 · 화면은 쓰지 않음(기획 조건) */
.vs { position: relative; overflow: hidden; color: #fff; padding: 176px 24px 168px;
  background:
    radial-gradient(52% 46% at 14% 28%, rgba(52, 104, 220, .42), transparent 72%),
    radial-gradient(46% 42% at 64% 60%, rgba(30, 74, 182, .40), transparent 74%),
    radial-gradient(34% 30% at 94% 94%, rgba(96, 156, 232, .26), transparent 72%),
    radial-gradient(40% 36% at 88% 8%, rgba(120, 146, 186, .14), transparent 70%),
    linear-gradient(180deg, #060810 0%, #04060b 100%); }
.vs::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vs-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vs-lines * { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vs-lines circle { stroke: rgba(255, 255, 255, .10); }
.vs-in { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
.vs-h { margin: 0 0 64px; text-align: center; font-size: 44px; line-height: 1.22; font-weight: 700; letter-spacing: -.03em; }
.vs-h .soft { color: rgba(255, 255, 255, .5); }
.vs-row { display: flex; justify-content: center; align-items: flex-start; gap: 56px; }
.vs-col { width: 388px; flex: none; }
.vs-lb { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px 6px; font-size: 15px; font-weight: 700; }
.vs-lb small { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .55); }
.vs-col.plain .vs-lb { color: rgba(255, 255, 255, .7); }
.vs-res { margin: 16px 0 0 6px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .45); opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; }
.vs-col.ours .vs-res { color: #fff; }
.vs-res.in { opacity: 1; transform: none; }
/* 보통 챗봇: 흔한 모양(평평한 회색 판 · 말풍선) — 일부러 수수하게 · 특정 회사 화면을 본뜨지 않음 */
.vp { height: min(600px, 72svh); border-radius: 14px; background: #eef0f3; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); color: #3a3f47; filter: saturate(.75); }
.vp-hd { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e2e5e9; }
.vp-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #dfe2e7; color: #8a909a; display: grid; place-items: center; }
.vp-t1 { font-size: 15px; font-weight: 600; color: #30343b; }
.vp-t2 { font-size: 12px; color: #9aa0a8; margin-top: 1px; }
.vp-msgs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; }
.vp-b { max-width: 80%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.vp-b.in { opacity: 1; transform: none; }
.vp-b.bot { align-self: flex-start; background: #fff; border-top-left-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.vp-b.me { align-self: flex-end; background: #6a7486; color: #fff; border-top-right-radius: 4px; }
.vp-b.sys { align-self: center; max-width: none; padding: 4px 0; background: none; box-shadow: none; font-size: 12px; color: #a3a8b0; }
.vp-in { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; background: #fff; border-top: 1px solid #e2e5e9; font-size: 14px; color: #a3a8b0; }
/* 쓰는 중 점 세 개(두 쪽 같이) */
.dots3 { display: inline-flex; gap: 4px; padding: 4px 0; }
.dots3 i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; animation: dot3 1s infinite ease-in-out; }
.dots3 i:nth-child(2) { animation-delay: .15s; } .dots3 i:nth-child(3) { animation-delay: .3s; }
@keyframes dot3 { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: .9; transform: translateY(-2px); } }
.vs .chat { border-color: rgba(255, 255, 255, .5); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); color: var(--w-ink); }
/* 어두운 배경 위에서는 흐림이 거의 안 보이고 모서리만 계단처럼 깨짐 → 이 섹션 창만 흐림 없이 같은 유리 색(반투명 · 뒤 파란 빛이 살짝 비침) */
.vs .chat:before { -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-clip-path: none; clip-path: none;
  background: linear-gradient(165deg, rgba(236, 239, 246, .97) 0%, rgba(216, 222, 234, .95) 55%, rgba(200, 208, 224, .96) 100%); }

@media (prefers-reduced-motion: reduce) { .dots3 i { animation: none; } .vp-b, .vs-res { transition: none; } }

/* ── 05 판매 흐름 7장면: 오너 레퍼런스(왼쪽 고정 그림 + 가는 세로선 + 오른쪽 번호 펼침 목록) · 흰 배경
   스크롤 한 칸마다 다음 단계가 펼쳐지고, 왼쪽 채팅창(히어로 창 그대로)이 그 단계 대화를 영상처럼 재생 */
.fl { --fl-line: #e7e4de; --fl-dim: rgba(22, 24, 29, .34); background: #fff; color: var(--w-ink); position: relative; }
.fl-intro { max-width: 1240px; margin: 0 auto; padding: 120px 56px 24px; text-align: center; }
.fl-h { margin: 0; font-size: 44px; line-height: 1.22; font-weight: 700; letter-spacing: -.03em; }
.fl-h .soft { color: rgba(22, 24, 29, .42); }
.fl-run { position: relative; height: calc(100svh + 7 * 56svh); }
.fl-stick { position: sticky; top: 0; height: 100svh; max-width: 1240px; margin: 0 auto; padding: 0 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fl-media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding-right: 56px; min-height: 0; }
/* 챗봇 뒤 연회색 칸 뺌 · 챗봇 더 크게(오너 10-16) */
.fl-tile { width: 100%; display: grid; place-items: center; }
/* 실제 위젯(PC) 측정값 그대로(데모 5187 · 10-16): 흰 불투명 판 400×690 · 모서리 34 · 그림자 0 20 50 12% + 0.5px 테 · 머리 아래 선 없음 · 머리 단추 2개(연필 · 더보기 · #52525b) · 입력칸 테 24% */
.fl .chat { width: min(400px, 92%); height: min(690px, 84svh); box-shadow: 0 20px 50px rgba(22, 24, 29, .12), 0 0 0 .5px rgba(22, 24, 29, .08); }
.fl .chat:before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-clip-path: none; clip-path: none; }
.fl .chd { border-bottom: 0; }
.fl .hic { color: #52525b; }
.fl .qr > span { background: #fff; }
.fl .cin { background: #fff; border-color: rgba(22, 24, 29, .24); }
/* 화면의 모든 따옴표 = 2번 섹션 큰 따옴표와 같은 «66» 모양(Georgia 굵게) · 글자 크기는 둘레 글 그대로(오너 10-16) */
.qm { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-style: normal; }
.ithumb { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: -5px; margin-right: 5px; }
@media (min-width: 900px) { .fl .hic svg:nth-child(2) { display: none; } }
/* 실제 위젯 머리 단추(18px · 사이 16) · «추천» 글자 단추(13.3px) */
.fl .hic { gap: 16px; } .fl .hic svg { width: 18px; height: 18px; }
.fl .rec { font-size: 13.3px; font-weight: 400; }
/* 실제 상품 카드(측정값): 215px · 모서리 20 · 그림자 2/12 7% + 0.5px · 사진 4:3 · 번호 배지 22 · 이름 13 · 가격 15 굵게 + 색 12 · 한 줄 설명 12 · «상품 보기 ›» */
.rrow { display: flex; gap: 10px; overflow: hidden; padding: 4px 18px 6px 4px; margin: 2px -18px 0 -4px; }
.rcard { flex: 0 0 215px; border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 2px 12px rgba(22, 24, 29, .07), 0 0 0 .5px rgba(22, 24, 29, .07); }
.rcard .ph { position: relative; aspect-ratio: 4 / 3; background: #fafafa; }
.rcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcard .no { position: absolute; left: 10px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: rgba(22, 24, 29, .78); color: #fff; font: 700 12px/22px var(--font); text-align: center; }
.rcard .b { padding: 12px 14px 14px; }
.rcard .n { font-size: 13px; line-height: 18.5px; color: #3f3f46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard .p { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; }
.rcard .p strong { font-size: 15px; font-weight: 700; color: var(--w-ink); }
.rcard .cl { font-size: 12px; color: #52525b; }
.rcard .f { margin: 5px 0 12px; font-size: 12px; line-height: 17.4px; color: #6b7280; }
.rcard .go { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px solid #e4e4e7; font-size: 12.5px; font-weight: 500; color: var(--w-ink); }
.rcard .go svg { width: 15px; height: 15px; flex: none; }
.rpg { display: flex; justify-content: center; gap: 5px; margin: 8px 0 2px; }
.rpg i { width: 6px; height: 6px; border-radius: 3px; background: #d4d4d8; }
.rpg i.on { width: 18px; background: #a1a1aa; }
.rq { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rq > span { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid #e4e4e7; border-radius: 16px; background: #fff; font-size: 13px; font-weight: 500; color: #18181b; }
.rq > span svg { width: 15px; height: 15px; color: #71717a; }
/* 실제 «답의 근거» 칩(읽는 칩 · 앞에 종류 한 단어 흐리게) */
.evc { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.evh { font-size: 12px; font-weight: 700; color: rgba(22, 24, 29, .5); }
.evr { display: flex; flex-wrap: wrap; gap: 6px; }
.ev1 { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: #f4f4f5; font-size: 13px; line-height: 1.4; color: var(--w-ink); }
.ev1 .k { color: rgba(22, 24, 29, .5); font-weight: 600; }
/* 형광펜: 말이 뜬 뒤 핵심 문구에 노란 줄이 왼쪽부터 칠해짐(오너 10-16) */
.hl { background-image: linear-gradient(transparent 56%, rgba(255, 222, 64, .85) 56%); background-repeat: no-repeat; background-size: 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .9s cubic-bezier(.3, .6, .2, 1) .55s; }
.msg.in .hl { background-size: 100% 100%; }
.av.me-ph { background: rgba(22, 24, 29, .06); box-shadow: 0 0 0 1px rgba(22, 24, 29, .08); }
@media (prefers-reduced-motion: reduce) { .hl { transition: none; } }
.fl-cap { font-size: 14px; color: rgba(22, 24, 29, .5); }
.fl-cap i { font: italic 400 16px Georgia, "Times New Roman", serif; color: rgba(22, 24, 29, .6); }
/* 가로선은 세로선에 딱 붙게(레퍼런스) — 오른쪽 칸 안쪽 여백 0, 글만 안으로 */
.fl-side { --fl-in: 64px; border-left: 1px solid var(--fl-line); padding-left: 0; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.fl-lead { margin: 0 0 28px; padding-left: var(--fl-in); max-width: 584px; font-size: 16px; line-height: 1.75; color: rgba(22, 24, 29, .62); }
.fl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fl-line); }
.fi { border-bottom: 1px solid var(--fl-line); }
.fi-hd { display: flex; align-items: center; gap: 16px; padding: 14px 4px 14px var(--fl-in); cursor: pointer; }
.fi-hd:hover .fi-t { color: var(--w-ink); } .fi-hd:focus-visible { outline: 2px solid var(--w-ink); outline-offset: 2px; }
.fi-no { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid #dcd9d3; font-size: 13px; color: var(--fl-dim); font-variant-numeric: tabular-nums; transition: background .4s ease, color .4s ease, border-color .4s ease; }
.fi-t { flex: 1; font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--fl-dim); transition: color .4s ease; }
.fi-pm { position: relative; width: 18px; height: 18px; flex: none; }
.fi-pm:before, .fi-pm:after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(22, 24, 29, .45); transition: transform .4s ease, opacity .4s ease; }
.fi-pm:after { transform: rotate(90deg); }
.fi.on .fi-no { background: #2a2926; border-color: #2a2926; color: #fff; }
.fi.on .fi-t { color: var(--w-ink); }
.fi.on .fi-pm:after { transform: rotate(0); opacity: 0; }
/* 펼침: 높이 0 → 내용만큼(부드럽게) */
.fi-bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.3, .6, .2, 1); }
.fi.on .fi-bd { grid-template-rows: 1fr; }
/* 펼친 내용은 제목 글자와 같은 줄에서 시작(안쪽 64 + 번호 32 + 사이 16) · 아래 48px = 빼 버린 상태 줄 자리(여백 그대로 · 오너 10-16) */
.fi-in { min-height: 0; overflow: hidden; padding-left: calc(var(--fl-in) + 48px); }
.fi-in .fi-rows { margin-bottom: 48px; }
.fi-q { display: block; padding-top: 4px; font-size: 17px; font-weight: 700; }
.fi-d { margin: 6px 0 14px; font-size: 15px; line-height: 1.6; color: rgba(22, 24, 29, .62); }
.fi-rows { margin: 0; border-top: 1px solid var(--fl-line); }
.fi-rows div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--fl-line); }
.fi-rows dt { font-size: 13px; color: rgba(22, 24, 29, .5); padding-top: 2px; }
.fi-rows dd { margin: 0; font-size: 15px; line-height: 1.55; }
.fi-meta { margin: 10px 0 18px; font-size: 13px; color: rgba(22, 24, 29, .5); }
.fi-meta.wait { color: #b4572f; }
.cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cards.c3 .pc .b { padding: 6px 7px 8px; }
.cards.c3 .pc .n { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cards.c3 .pc .p { font-size: 13px; }
.optrow { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--w-sub); }
.optrow > span { padding: 4px 9px; border-radius: 999px; background: var(--w-soft); color: var(--w-ink); }
@media (max-height: 820px) and (min-width: 900px) {
  .fl-lead { display: none; }
  .fi-hd { padding: 10px 4px; }
  .fi-t { font-size: 17px; }
  .fi-d { margin-bottom: 10px; }
  .fi-in .fi-rows { margin-bottom: 30px; }
}


/* ── 05-2 판매 부스터(새판 · 오너 10-16): 연회색 격자 위 가운데 줄에 카드 5장(위아래 줄은 회색 빈 칸이 은은하게 사라짐)
   카드를 누르면 5장이 왼쪽 세로 목록으로 다시 맞춰지고(FLIP), 오른쪽에서 상세가 밀려 나옴 — 상세 = 설명 + 실제 위젯 모양 채팅
   카드 질감 = 레퍼런스 그대로: 두꺼운 흰 광택 테두리 · 안쪽 사진 + 아래로 짙어지는 덮개 · 가운데 유리 동그라미 · 은빛 광택 알약 단추. 사진은 --img 한 곳(오너가 따로 만듦 · 지금은 임시) */
.bx { --bx-bg: #0b0b0c; --bx-ghost: #18181a; position: relative; overflow: hidden; background: var(--bx-bg); color: var(--w-ink); padding: 152px 24px 136px; }
.bx-in { position: relative; max-width: 1240px; margin: 0 auto; }
.bx-h { margin: 0; text-align: center; font-size: 44px; line-height: 1.22; font-weight: 700; letter-spacing: -.03em; color: #f5f5f6; }
.bx-h .soft { color: rgba(255, 255, 255, .42); }
/* 제목 머리: 뒤 은은한 빛 · 위 작은 이름표(점 + 판매 부스터 | 6가지) · 본 문장은 위 흰색 → 아래 연회색 */
.bx-in:before { content: ""; position: absolute; left: 50%; top: -120px; width: 760px; height: 420px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, 0)); }
.bx-eye { position: relative; display: flex; width: max-content; align-items: center; gap: 8px; margin: 0 auto 22px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .78); letter-spacing: -.01em; }
.bx-eye i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .8); }
.bx-eye span { padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .5); }
.bx-h { position: relative; }
.bx-h .main { background: linear-gradient(180deg, #fff 30%, #b9b9bd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bx-sub { position: relative; }
.bx-sub { margin: 16px auto 0; max-width: 560px; text-align: center; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .55); }
.bx-stage { position: relative; margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.bx-ghost { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; height: 150px; overflow: hidden; pointer-events: none; transition: opacity .4s ease; }
.bx-ghost i { display: block; aspect-ratio: 1 / 1; border-radius: 40px; background: var(--bx-ghost); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.bx-ghost.gtop { -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 100%); mask-image: linear-gradient(0deg, #000 0%, transparent 100%); }
/* 위 줄은 정사각형의 아래쪽 150px 만 보이게(그리드 칸의 % 바깥 여백 = 칸 너비 기준) */
.bx-ghost.gtop i { margin-top: calc(150px - 100%); }
.bx-ghost.gbot { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.bx-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
/* 카드: 바깥 = 흰 광택 테두리(베젤) · 안 = 유리 네온 아이콘 원본 이미지(손대지 않음) + 아래 검은 그라데이션 · 제목과 본문만 · 겉면 유리 광택 */
.bxc { --img: none;
  position: relative; aspect-ratio: 1 / 1; padding: 7px; border-radius: 40px; border: 0; cursor: pointer; text-align: center; font: inherit; color: #fff;
  background: linear-gradient(180deg, #ffffff 0%, #f1f2f3 55%, #e3e5e8 100%);
  box-shadow: 0 26px 50px rgba(20, 24, 28, .16), 0 2px 6px rgba(20, 24, 28, .06), inset 0 1px 0 #fff, inset 0 -2px 5px rgba(20, 24, 28, .10), 0 0 0 1px rgba(20, 24, 28, .05); }
.bxc:focus-visible { outline: 2px solid var(--w-ink); outline-offset: 4px; }
.bxc { width: 100%; transform-origin: 0 0; }
.bxc-in { display: block; position: relative; height: 100%; border-radius: 33px; overflow: hidden; background: #000; }
/* 카드 그림 = bxNw.webp: 원본 이미지(아이콘 + 주변 픽셀 그대로)를 56% 크기 · 위 10% 에 두고, 바깥은 원본 가장자리 색을 이어 붙여 흐리게 만든 큰 그림(extend_bx.cjs)
   → 카드에 꽉 채워도 아이콘은 작게 · 네모 경계 0(경계 안팎 밝기 차 최대 2.6/255) */
/* 흰 유리 아이콘(검정 바탕 그대로) — 카드의 70% 크기 · 위쪽으로(아이콘 가운데가 카드 약 40%) · 바탕이 같은 검정이라 경계 0 */
.bxc-im { position: absolute; inset: 0; background: var(--wide) center 17% / 70% no-repeat; }
/* 아래 검은 그라데이션(글자 자리) — 중간에 탁한 회색 띠가 안 생기게 여러 단계 */
.bxc-in:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 8, 10, 0) 44%, rgba(8, 8, 10, .14) 54%, rgba(8, 8, 10, .4) 64%, rgba(8, 8, 10, .66) 76%, rgba(8, 8, 10, .86) 90%, rgba(8, 8, 10, .92) 100%); }
/* 고른 뒤 목록 줄 바탕 — 이미지 위로 천천히 덮여서 갑자기 바뀌지 않게 */
.bxc-in:after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, #fbfbfb 0%, #f0f1f2 100%); opacity: 0; transition: opacity .3s ease; }
.bxc-big, .bxc-sm { position: absolute; inset: 0; z-index: 3; transition: opacity .18s ease; }
.bxc-big { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 18px 22px; }
.bxc-sm { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 6px; opacity: 0; pointer-events: none; text-align: left; color: var(--w-ink); }
/* 썸네일 = bxNt.webp(미리 반씩 줄인 240px · 큰 그림을 브라우저가 한 번에 줄이면 가는 선이 지글거림) · 어두운 바탕색 · 안쪽 테 없음(모서리 검은 잔선 원인) */
.bxc-th { flex: none; width: 62px; height: 62px; border-radius: 18px; background: var(--th) center / cover no-repeat; box-shadow: 0 6px 14px rgba(20, 22, 26, .14); transition: filter .25s ease, opacity .25s ease; }
.bxc-t { font-size: 21px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; word-break: keep-all; }
.bxc-d { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .72); word-break: keep-all; }
.bxc-sm .bxc-t { font-size: 15px; font-weight: 500; }
.bxc-sm .bxc-d { font-size: 11.5px; color: rgba(22, 24, 29, .55); }
/* 고른 뒤(재조립): 왼쪽 세로 목록 + 오른쪽 상세 */
/* 목록 줄 높이 = 오른쪽 상세 판 높이에 맞춰 5칸으로 나눔(왼 · 오른 높이 같게) */
.bx-stage.pick { grid-template-columns: 300px minmax(0, 1fr); column-gap: 32px; align-items: stretch; }
.bx-stage.pick .bx-ghost { display: none; }
.bx-stage.pick .bx-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 12px; }
.bx-stage.pick .bxc { height: auto; min-height: 96px; aspect-ratio: auto; padding: 6px; border-radius: 32px; }
.bx-stage.pick .bxc-in { border-radius: 26px; }
/* 펼친 목록도 카드와 같은 검정 포맷: 흰 테두리 + 검정 안 + 흰 글자 · 큰 아이콘은 숨기고 썸네일만 */
.bx-stage.pick .bxc-im { opacity: 0; transition: opacity .2s ease; }
.bx-stage.pick .bxc-sm { color: #fff; }
.bx-stage.pick .bxc-sm .bxc-d { color: rgba(255, 255, 255, .6); }
.bx-stage.pick .bxc-big { opacity: 0; pointer-events: none; }
.bx-stage.pick .bxc-sm { opacity: 1; gap: 16px; padding: 0 16px 0 8px; transition: opacity .3s ease .38s; }
.bx-stage.pick .bxc-th { width: auto; height: calc(100% - 16px); max-height: 104px; aspect-ratio: 1 / 1; border-radius: 20px; }
.bx-stage.pick .bxc-sm .bxc-t { font-size: 16px; font-weight: 600; }
.bx-stage.pick .bxc-sm .bxc-d { font-size: 12.5px; }
/* 고르지 않은 줄: 카드 전체를 반투명하게 하면 유리 테 · 그림자가 겹쳐 깨져 보임 → 글자만 옅게 · 썸네일만 살짝 흐리게 */
/* 고르지 않은 줄: 흰 테두리도 비활성 글자색과 같은 회색(검정 위 흰색 50% = #858586) */
.bx-stage.pick .bxc:not(.on) { background: #858586; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.bx-stage.pick .bxc:not(.on) .bxc-t { color: rgba(255, 255, 255, .5); }
.bx-stage.pick .bxc:not(.on) .bxc-d { color: rgba(255, 255, 255, .32); }
.bx-stage.pick .bxc:not(.on) .bxc-th { opacity: .55; }
.bx-stage.pick .bxc:not(.on):hover .bxc-th { filter: none; opacity: 1; }
.bx-stage.pick .bxc.on { box-shadow: 0 26px 50px rgba(0, 0, 0, .4), inset 0 1px 0 #fff, inset 0 -2px 5px rgba(20, 24, 28, .1), 0 0 0 3px #0b0b0c, 0 0 0 5px rgba(255, 255, 255, .85); }
.bx-panel { display: none; }
.bx-stage.pick .bx-panel { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; padding: 52px 44px 52px 56px; border-radius: 36px; background: #fff;
  box-shadow: 0 30px 70px rgba(20, 24, 28, .10), 0 0 0 1px rgba(20, 24, 28, .05); animation: bxIn .6s cubic-bezier(.3, .6, .2, 1) .25s both; }
@keyframes bxIn { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
.bx-panel.swap { animation: bxSwap .45s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes bxSwap { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
/* 상세 왼쪽: 뒤로 · 기능 아이콘 타일 + 꼬리표 · 제목 · 설명 · 번호 붙은 가는 선 목록 · «사장님 화면에서 켜기» 스위치 줄 */
.bxp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px; padding: 0; border: 0; background: none; font: 500 13px var(--font); color: rgba(22, 24, 29, .55); cursor: pointer; }
.bxp-back:hover { color: var(--w-ink); }
.bxp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bxp-ic { flex: none; width: 60px; height: 60px; border-radius: 18px; background: var(--img) center / cover no-repeat; box-shadow: 0 10px 22px rgba(20, 22, 26, .18); }
.bxp-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bxp-kind b { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(22, 24, 29, .45); }
.bxp-tag { justify-self: start; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(22, 24, 29, .18); font-size: 12px; color: rgba(22, 24, 29, .7); }
.bxp h3 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1.25; }
.bxp p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.7; color: rgba(22, 24, 29, .62); word-break: keep-all; }
.bxp ol { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(22, 24, 29, .09); }
.bxp li { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(22, 24, 29, .09); font-size: 15px; line-height: 1.5; word-break: keep-all; }
.bxp li i { font: italic 400 14px Georgia, "Times New Roman", serif; color: rgba(22, 24, 29, .38); }
.bxp-sw { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 13.5px; color: rgba(22, 24, 29, .6); }
.bxp-sw .sw { position: relative; flex: none; width: 36px; height: 22px; border-radius: 11px; background: var(--w-ink); }
.bxp-sw .sw:after { content: ""; position: absolute; top: 3px; left: 17px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.bxp-sw.off .sw { background: #dcdce0; } .bxp-sw.off .sw:after { left: 3px; }
/* 상세 안 채팅 = 실제 위젯(PC 측정값 폭 380) — 높이는 상세 판을 키우며 600 */
/* 높이는 내용만큼(위쪽 빈 여백 없게) · 판 전체 높이는 .bx-panel min-height 로 */
.bx .chat { width: 380px; height: auto; box-shadow: 0 20px 50px rgba(22, 24, 29, .12), 0 0 0 .5px rgba(22, 24, 29, .08); }
.bx .chat:before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-clip-path: none; clip-path: none; }
.bx .chd { border-bottom: 0; } .bx .hic { color: #52525b; gap: 16px; } .bx .hic svg { width: 18px; height: 18px; } .bx .hic svg:nth-child(2) { display: none; }
.bx .cin { background: #fff; border-color: rgba(22, 24, 29, .24); } .bx .rec { font-size: 13.3px; font-weight: 400; }
.bx .msg { opacity: 1; transform: none; }
.bx .msgs { flex: none; justify-content: flex-start; padding-top: 6px; }
/* 상세 채팅 형광펜은 빨리 · 짧게(말이 뜨자마자 0.1초 뒤 0.45초) */
.bx .hl { transition-duration: .45s; transition-delay: .1s; }
.bx-stage.pick .bx-panel { min-height: 660px; }
.bn { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 12px; border-radius: 12px; background: #f4f4f5; font-size: 13px; color: #52525b; }
.bn b { font-size: 14px; color: var(--w-ink); }
.bar { height: 6px; border-radius: 3px; background: #ececef; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--w-ink); }
.barl { display: flex; justify-content: space-between; font-size: 12px; color: #71717a; }
.setsum { font-size: 13px; color: #52525b; } .setsum b { font-size: 15px; color: var(--w-ink); margin-left: 4px; }


@media (prefers-reduced-motion: reduce) { .bx-stage.pick .bx-panel, .bx-panel.swap { animation: none; } }

/* ── 06 써 보기: 연회색 점 배경(마우스 따라 비켜남) · 왼쪽 휴대폰 속 실제 채팅창(입력 · 예시 질문) · 오른쪽 «선택 상자» 제목 */
.ty { --ty-bg: #ffffff; position: relative; overflow: hidden; background: var(--ty-bg); color: var(--w-ink); padding: 120px 24px; }
.ty-dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ty-in { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 640px minmax(0, 1fr); gap: 24px; align-items: center; }
/* 휴대폰 목업: 그림(1082×1453) 속 검정 화면 칸 = 왼 250 · 위 118 · 폭 581 · 높이 1206(바깥 테두리 기준 측정 · 위 · 옆 같은 기준) */
.ty-phone { position: relative; width: 640px; margin-left: -60px; aspect-ratio: 1082 / 1453; background: url(phone.png) center / 100% 100% no-repeat; filter: drop-shadow(0 44px 60px rgba(20, 22, 26, .24)) drop-shadow(0 12px 20px rgba(20, 22, 26, .12)); }
.ty-screen { position: absolute; left: calc(250 / 1082 * 100% + 3px); top: calc(118 / 1453 * 100% + 3px); width: calc(581 / 1082 * 100% - 6px); height: calc(1206 / 1453 * 100% - 6px); border-radius: 13% / 6.25%; overflow: hidden; background: #fff; }
.ty-fit { position: absolute; left: 0; top: 0; width: 360px; transform-origin: 0 0; display: flex; flex-direction: column; }
.ty-sb { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 26px 0 30px; font: 600 15px var(--font); color: #111; }
.ty-sb i { display: flex; gap: 5px; align-items: center; }
.ty-sb i b { display: block; width: 17px; height: 10px; border-radius: 3px; border: 1.5px solid #111; position: relative; }
.ty-sb i b:after { content: ""; position: absolute; inset: 1.5px 3px 1.5px 1.5px; border-radius: 1px; background: #111; }
.ty .chat { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.ty .chat:before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-clip-path: none; clip-path: none; }
.ty .chd { border-bottom: 0; } .ty .hic { color: #52525b; gap: 16px; } .ty .hic svg { width: 18px; height: 18px; }
.ty .msgs { overflow-y: auto; scrollbar-width: none; justify-content: flex-start; }
.ty .msgs::-webkit-scrollbar { display: none; }
.ty .msg { opacity: 1; transform: none; animation: tyIn .4s ease both; }
@keyframes tyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ty .cin { background: #fff; border-color: rgba(22, 24, 29, .24); margin-bottom: 6px; }
.ty-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14.5px var(--font); color: var(--w-ink); }
.ty-input::placeholder { color: var(--w-time); }
.ty .send { border: 0; cursor: pointer; padding: 0; }
.ty .send.on { background: var(--w-ink); color: #fff; }
.ty-left { margin: 0 0 14px; text-align: center; font-size: 11.5px; color: var(--w-time); }
.ty-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.ty-typing i { width: 6px; height: 6px; border-radius: 50%; background: #c4c4c8; animation: tyDot 1s infinite ease-in-out; }
.ty-typing i:nth-child(2) { animation-delay: .15s; } .ty-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tyDot { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
/* 오른쪽 제목: 위 밑줄 한 줄(말풍선 아이콘) · 큰 글자 + 분홍 선택 상자(왼 글자 커서 · 손잡이 두 점) · 반짝이 · 아래 한 줄 */
.ty-title { position: relative; display: grid; justify-items: start; }
.ty-top { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 22px 64px; font-size: 30px; font-weight: 800; letter-spacing: -.04em; }
.ty-top u { text-decoration-thickness: 3px; text-underline-offset: 7px; }
/* 말풍선 = 둥근 사각 + 왼쪽 아래 꼬리(그림 한 장) · 밑줄 한 줄 왼쪽, 큰 글자 상자 왼쪽 위 모서리에 살짝 걸침 · 살짝 기울임 */
.ty-top { z-index: 2; }
.ty-bub { position: absolute; left: -70px; top: 2px; width: 58px; height: 46px; transform: scaleX(-1); }
.ty-bub-g { position: absolute; inset: 0; -webkit-clip-path: url(#tyBubClip); clip-path: url(#tyBubClip); background: linear-gradient(165deg, rgba(226, 226, 231, .82) 0%, rgba(184, 184, 191, .62) 52%, rgba(160, 160, 168, .66) 100%); -webkit-backdrop-filter: blur(8px) saturate(1.6); backdrop-filter: blur(8px) saturate(1.6); }
.ty-bub-l { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ty-bub:before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -4px; height: 8px; border-radius: 50%; background: rgba(20, 22, 26, .1); filter: blur(4px); }
.ty-big { position: relative; margin: 0; font-size: 84px; line-height: 1.12; font-weight: 900; letter-spacing: -.06em; }
/* 큰 글자 = 노란 형광펜 선택 상자(꽉 채움) · 오른쪽 위 · 왼쪽 아래 손잡이(상자 높이 그대로 세로선 + 끝 둥근 점) */
.ty-sel { position: relative; padding: 0 .08em; background: rgba(255, 223, 62, .8); }
.ty-sel .hd { position: absolute; top: 0; bottom: 0; width: 3px; background: #d9a800; }
.ty-sel .hd:after { content: ""; position: absolute; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: #d9a800; }
.ty-sel .hd.a { right: -1.5px; } .ty-sel .hd.a:after { top: -13px; }
.ty-sel .hd.b { left: -1.5px; } .ty-sel .hd.b:after { bottom: -13px; }
.ty-spark { position: absolute; right: -58px; top: 18%; width: 54px; height: 64px; }
.ty-sub { margin: 26px 0 0; font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
/* 예시 질문: 누르면 휴대폰 채팅으로 바로 보냄 */
.ty-q { margin-top: 52px; display: grid; justify-items: start; gap: 12px; }
.ty-q > b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(22, 24, 29, .5); }
.ty-q > b svg { width: 18px; height: 18px; }
.ty-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 13px 22px; border: 1px solid rgba(22, 24, 29, .08); border-radius: 999px; background: #fff; font: 500 16px var(--font); color: #3f3f46; cursor: pointer; box-shadow: 0 6px 18px rgba(20, 22, 26, .05); transition: transform .2s ease, box-shadow .2s ease, color .2s ease; }
.ty-chip:hover { transform: translateY(-2px); color: var(--w-ink); box-shadow: 0 10px 24px rgba(20, 22, 26, .09); }
.ty-chip.used { color: rgba(22, 24, 29, .38); }
.ty-chip .qm { font-size: 1.25em; color: rgba(22, 24, 29, .3); }


/* 06 움직임(스크립트가 .ty-anim 을 붙였을 때만 숨겼다가 보일 때 .go → 글자 다 치면 .done · 스크립트 없으면 처음부터 다 보임) */
.ty-ul { padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 3px no-repeat; }
.ty-tx i { font-style: normal; }
.ty.ty-anim .ty-phone { opacity: 0; transform: translateY(48px); transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.ty.ty-anim .ty-bub { opacity: 0; transform: scaleX(-1) scale(.4); transition: opacity .25s ease .15s, transform .4s cubic-bezier(.3, 1.6, .5, 1) .15s; }
.ty.ty-anim .ty-top u, .ty.ty-anim .ty-top .ty-ul { opacity: 0; transform: translateY(10px); display: inline-block; transition: opacity .4s ease .25s, transform .4s ease .25s, background-size .45s cubic-bezier(.6, 0, .2, 1) .45s; background-size: 0% 3px; }
.ty.ty-anim .ty-sel { background-size: 100% 100%; }
.ty.ty-anim .ty-sel .hd.b { opacity: 0; transition: opacity .2s ease; }
.ty.ty-anim .ty-spark { opacity: 0; transform: scale(.3) rotate(-30deg); }
.ty.ty-anim .ty-sub, .ty.ty-anim .ty-q > * { opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; }
.ty.go .ty-phone { opacity: 1; transform: none; }
.ty.go .ty-bub { opacity: 1; transform: scaleX(-1) scale(1); }
.ty.go .ty-top .ty-ul { opacity: 1; transform: none; background-size: 100% 3px; }
.ty.go .ty-sel .hd.b { opacity: 1; }
/* 타자기: 오른쪽 손잡이가 글자 끝을 따라가는 커서 · 치는 동안 깜빡 */
.ty-sel.typing .hd.a { animation: tyBlink .8s steps(1) infinite; }
@keyframes tyBlink { 50% { opacity: 0; } }
.ty.done .ty-spark { animation: tySpark .6s cubic-bezier(.3, 1.6, .5, 1) both, tyTw 2.6s ease-in-out .7s infinite; }
@keyframes tySpark { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes tyTw { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(.86) rotate(8deg); opacity: .75; } }
.ty.done .ty-sub { opacity: 1; transform: none; transition-delay: .05s; }
.ty.done .ty-q > * { opacity: 1; transform: none; }
.ty.done .ty-q > :nth-child(1) { transition-delay: .12s; } .ty.done .ty-q > :nth-child(2) { transition-delay: .18s; } .ty.done .ty-q > :nth-child(3) { transition-delay: .24s; }
.ty.done .ty-q > :nth-child(4) { transition-delay: .3s; } .ty.done .ty-q > :nth-child(5) { transition-delay: .36s; } .ty.done .ty-q > :nth-child(6) { transition-delay: .42s; }
/* 휴대폰 바닥 그림자(타원) — 목업 그림 밑에 깔리는 은은한 그림자 */
.ty-phone:after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 30px; border-radius: 50%; background: rgba(20, 22, 26, .22); filter: blur(18px); z-index: -1; }

@media (prefers-reduced-motion: reduce) { .ty .msg, .ty-typing i, .ty.done .ty-spark, .ty-sel.typing .hd.a { animation: none; } .ty-chip { transition: none; } .ty.ty-anim .ty-spark { opacity: 1; transform: none; } }
/* ── 07 믿는 이유: «AI가 지어내면?»을 먼저 막는 자리 · 따뜻한 연회색 바탕(03 그림 칸 색) · 가는 세로선으로 나눈 세 칸 · 칸마다 실제 위젯 모양 한 장면
   ① 없으면 없다고(실제 근거 칩 «적혀 있지 않아요» 점선) ② 근거를 같이(실제 «답의 근거» 칩) ③ 보내기 전 검사 19가지(agentCheck.ts 종류 19개 · 실측 10-17) */
.tr { --tr-bg: #f6f5f3; --tr-line: #e7e4de; position: relative; background: var(--tr-bg); color: var(--w-ink); padding: 136px 24px 144px; }
.tr-in { max-width: 1240px; margin: 0 auto; }
.tr-h { margin: 0; text-align: center; font-size: 44px; line-height: 1.22; font-weight: 700; letter-spacing: -.03em; }
.tr-h .soft { color: rgba(22, 24, 29, .42); }
/* 제목 머리(오너 10-17 «고도화»): 05-2 이름표를 밝은 바탕용으로 · 손님 걱정 줄은 «66» 따옴표 · 화면에 들어오면 «지어내면»에 줄이 그어지고 → «있는 것만»에 형광펜 */
.tr-in { position: relative; }
.tr-in:before { content: ""; position: absolute; left: 50%; top: -96px; width: 760px; max-width: 100%; height: 380px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, 0)); }
.tr-eye { position: relative; display: flex; width: max-content; align-items: center; gap: 8px; margin: 0 auto 22px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(22, 24, 29, .1); background: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 600; color: rgba(22, 24, 29, .78); letter-spacing: -.01em; box-shadow: 0 6px 18px rgba(20, 22, 26, .04); }
.tr-eye i { width: 6px; height: 6px; border-radius: 50%; background: var(--w-online); box-shadow: 0 0 0 3px rgba(52, 195, 143, .18); }
.tr-eye span { padding-left: 8px; border-left: 1px solid rgba(22, 24, 29, .14); font-weight: 500; color: rgba(22, 24, 29, .45); }
.tr-h { position: relative; }
.tr-h .qm { color: rgba(22, 24, 29, .28); }
.tr-x { position: relative; white-space: nowrap; }
.tr-x:after { content: ""; position: absolute; left: -3px; right: -3px; top: 54%; height: 3px; border-radius: 2px; background: rgba(22, 24, 29, .62); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.3, .6, .2, 1) .25s; }
.tr.go .tr-x:after { transform: scaleX(1); }
.tr-hl { white-space: nowrap; background-image: linear-gradient(transparent 58%, rgba(255, 222, 64, .9) 58%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .55s cubic-bezier(.3, .6, .2, 1) .7s; }
.tr.go .tr-hl { background-size: 100% 100%; }
.tr-sub { position: relative; margin: 18px auto 0; max-width: 560px; text-align: center; font-size: 16px; line-height: 1.6; color: rgba(22, 24, 29, .55); }
@media (prefers-reduced-motion: reduce) { .tr-x:after, .tr-hl { transition: none; } }
.tr-row { margin-top: 72px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--tr-line); }
.tr-col { display: flex; flex-direction: column; padding: 28px 36px 0; border-left: 1px solid var(--tr-line); min-width: 0; }
.tr-col:first-child { border-left: 0; padding-left: 0; }
.tr-col:last-child { padding-right: 0; }
.tr-no { font: italic 400 16px Georgia, "Times New Roman", serif; color: rgba(22, 24, 29, .4); }
.tr-t { margin: 10px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.tr-d { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: rgba(22, 24, 29, .58); }
/* 장면 판 = 실제 위젯 흰 판(PC 측정값 그림자 · 모서리 24) · 내용만큼 높이 · 세 칸 같은 높이 */
.tr-sc { flex: 1; margin-top: 28px; padding: 6px 0 14px; border-radius: 24px; background: #fff; box-shadow: 0 20px 50px rgba(22, 24, 29, .08), 0 0 0 .5px rgba(22, 24, 29, .08); }
.tr-sc .msg { opacity: 0; transform: translateY(10px); }
.tr.go .tr-sc .msg { opacity: 1; transform: none; }
.tr.go .tr-sc .msg + .msg { transition-delay: .35s; }
.tr.go .tr-sc .msg .hl { background-size: 100% 100%; }
.tr .evc { opacity: 0; transition: opacity .4s ease .7s; }
.tr.go .evc { opacity: 1; }
/* 근거 칩 «없음» = 실제 위젯처럼 점선 테(widget_v2.js · 정보 없음 줄) */
.ev1.none { background: #fff; border: 1px dashed rgba(22, 24, 29, .26); }
/* ③ 검사 19가지: 회색 칩이 빠르게 하나씩 검정 + 체크로 바뀜 → 끝나면 «보냄» */
.tr-ck { padding: 14px 18px 2px 16px; }
.tr-ckh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: rgba(22, 24, 29, .5); }
.tr-ckh b { font-size: 13px; color: var(--w-ink); font-variant-numeric: tabular-nums; }
.tr-cks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tr-cks > span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; background: #f4f4f5; font-size: 12.5px; line-height: 1.4; color: rgba(22, 24, 29, .45); transition: background .2s ease, color .2s ease; }
.tr-cks > span:before { content: ""; width: 0; height: 7px; margin-top: -2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0; transition: width .2s ease, opacity .2s ease; }
.tr-cks > span.ok { background: var(--w-ink); color: #fff; }
.tr-cks > span.ok:before { width: 3.5px; opacity: 1; margin-right: 2px; }
.tr-sent { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--w-line); font-size: 13.5px; color: rgba(22, 24, 29, .45); transition: color .3s ease; }
.tr-sent i { width: 8px; height: 8px; border-radius: 50%; background: #d4d4d8; transition: background .3s ease; }
.tr-sent.on { color: var(--w-ink); } .tr-sent.on i { background: var(--w-online); }


@media (prefers-reduced-motion: reduce) { .tr .evc, .tr-cks > span, .tr-cks > span:before, .tr-sent, .tr-sent i { transition: none; } }
/* ── 08 사장님 화면(오너 10-17): 왼쪽 고르는 목록 4개(05 번호 칸 · 가는 선 · 07 이름표) + 오른쪽 «사장님 화면» 창 하나
   창 속 = 실제 5300 화면 측정값 그대로(td.css · td-fixprod.css · td-stats.css — 상자 없음 · 1px #ececee 선 · 빨강 #ef4444 숫자 · 칩 모서리 2px) · 데이터는 예시 · 상품 이름은 일반 이름 */
.ow { --ow-line: #e7e4de; --t-ink: #18181b; --t-text: #27272a; --t-body: #3f3f46; --t-sub: #52525b; --t-mute: #a1a1aa; --t-line: #e4e4e7; --t-line-2: #f4f4f5; --t-hair: #ececee; --t-red: #ef4444;
  position: relative; background: #fff; color: var(--w-ink); padding: 136px 24px 152px; overflow: hidden; }
.ow-in { position: relative; max-width: 1240px; margin: 0 auto; }
.ow-eye { display: flex; width: max-content; align-items: center; gap: 8px; margin: 0 auto 22px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(22, 24, 29, .1); background: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 600; color: rgba(22, 24, 29, .78); letter-spacing: -.01em; box-shadow: 0 6px 18px rgba(20, 22, 26, .04); }
.ow-eye i { width: 6px; height: 6px; border-radius: 50%; background: var(--t-red); box-shadow: 0 0 0 3px rgba(239, 68, 68, .16); }
.ow-eye span { padding-left: 8px; border-left: 1px solid rgba(22, 24, 29, .14); font-weight: 500; color: rgba(22, 24, 29, .45); }
.ow-h { margin: 0; text-align: center; font-size: 44px; line-height: 1.22; font-weight: 700; letter-spacing: -.03em; }
.ow-h .soft { color: rgba(22, 24, 29, .42); }
.ow-row { margin-top: 72px; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: center; }
/* 왼쪽 목록 = 05 판매 흐름의 번호 칸 · 가는 선 그대로(이름만 ow-) · 고른 줄 아래 한 줄 설명 + 다음으로 넘어가는 진행 선 */
.ow-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ow-line); }
.ow-it { border-bottom: 1px solid var(--ow-line); }
.ow-hd { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 4px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ow-hd:focus-visible { outline: 2px solid var(--w-ink); outline-offset: 2px; }
.ow-no { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid #dcd9d3; font-size: 13px; color: rgba(22, 24, 29, .34); font-variant-numeric: tabular-nums; transition: background .4s ease, color .4s ease, border-color .4s ease; }
.ow-t { flex: 1; font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: rgba(22, 24, 29, .34); transition: color .4s ease; }
.ow-hd:hover .ow-t { color: var(--w-ink); }
.ow-it.on .ow-no { background: #2a2926; border-color: #2a2926; color: #fff; }
.ow-it.on .ow-t { color: var(--w-ink); }
.ow-bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.3, .6, .2, 1); }
.ow-it.on .ow-bd { grid-template-rows: 1fr; }
.ow-bd > div { min-height: 0; overflow: hidden; padding-left: 52px; }
.ow-bd p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: rgba(22, 24, 29, .58); }
.ow-bar { height: 2px; margin: 0 0 -1px -52px; background: transparent; }
.ow-bar i { display: block; height: 100%; width: 0; background: var(--w-ink); }
.ow-it.on .ow-bar i { animation: owBar var(--ow-dur, 6s) linear both; }
.ow.hold .ow-it.on .ow-bar i { animation-play-state: paused; }
@keyframes owBar { to { width: 100%; } }
/* 오른쪽 창: 흰 판 + 아주 은은한 그림자 · 아래 따뜻한 빛(오너 레퍼런스 · 06 반짝이 노랑 #f2c230 계열) */
.ow-stage { position: relative; }
/* 창 뒤 바탕(오너 10-17 «색 없이 은은하게»): 04 차별 구역의 가는 격자를 밝은 바탕용으로 — 아주 옅은 회색 선 · 가운데서 바깥으로 사라짐 */
.ow-stage:before { content: ""; position: absolute; inset: -130px -110px; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(22, 24, 29, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 24, 29, .075) 1px, transparent 1px); background-size: 44px 44px; background-position: center;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }

.ow-win { position: relative; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px rgba(20, 22, 26, .10), 0 0 0 1px rgba(20, 22, 26, .06); overflow: hidden; font-size: 14px; color: var(--t-text); letter-spacing: -.01em; }
.ow-bar-top { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-bottom: .75px solid var(--t-line); font-size: 12px; color: var(--t-sub); }
.ow-bar-top b { font-size: 13px; font-weight: 700; color: var(--t-ink); letter-spacing: -.02em; }
.ow-bar-top .sp { flex: 1; }
.ow-pane { padding: 30px 36px 34px; }
.ow-pane.swap { animation: owIn .45s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes owIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* 사장님 화면 부품(측정값): 쪽 머리 h1 35/800 → 창 안에선 26 · 큰 숫자 빨강 · 칩 · 단추 · 줄 목록 · 표 · 막대 */
.ow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 22px; border-bottom: .75px solid var(--t-line); }
.ow-head h4 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; color: var(--t-ink); }
.ow-head p { margin: 8px 0 0; font-size: 13px; color: var(--t-body); }
.ow-hero { text-align: right; flex: none; }
.ow-hero .n { font-size: 34px; font-weight: 800; line-height: 1; color: var(--t-red); font-variant-numeric: tabular-nums; }
.ow-hero .n small { font-size: 14px; font-weight: 700; margin-left: 2px; }
.ow-hero .c { margin-top: 6px; font-size: 11.5px; color: var(--t-sub); }
.ow-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 2px; font-size: 11px; color: var(--t-sub); box-shadow: inset 0 0 0 .75px var(--t-line); white-space: nowrap; }
.ow-tag.warn { color: #b45309; background: rgba(245, 158, 11, .12); box-shadow: none; }
.ow-tag.up { color: var(--t-red); background: rgba(239, 68, 68, .10); box-shadow: none; }
.ow-card { padding-top: 22px; }
.ow-card .hd { display: flex; align-items: center; gap: 10px; }
.ow-card .hd h5 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--t-ink); }
.ow-card .hd small { margin-left: auto; font-size: 11.5px; color: var(--t-sub); }
.ow-cnt { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; }
.ow-cnt b { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--t-red); font-variant-numeric: tabular-nums; }
.ow-cnt span { font-size: 12.5px; color: var(--t-sub); }
.ow-cnt .mt { margin-left: auto; align-self: center; width: 120px; height: 4px; background: var(--t-line-2); }
.ow-cnt .mt i { display: block; height: 100%; background: var(--t-ink); }
.ow-sub { margin: 16px 0 6px; font-size: 11px; font-weight: 300; color: var(--t-sub); }
.ow-q { font-size: 13.5px; font-weight: 300; color: var(--t-ink); }
.ow-note { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 18px; }
.ow-note b { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500; color: var(--t-sub); }
.ow-note p { margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--t-text); }
.ow-acts { display: flex; align-items: center; gap: 8px; }
.ow-acts .sp { flex: 1; }
.ow-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: .75px solid var(--t-line); border-radius: 2px; background: #fff; font-size: 12px; font-weight: 300; color: var(--t-ink); white-space: nowrap; }
.ow-btn svg { width: 14px; height: 14px; }
.ow-btn.on { background: var(--t-ink); border-color: var(--t-ink); color: #fff; font-weight: 500; }
.ow-btn.g { color: var(--t-sub); }
.ow-h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--t-ink); }
.ow-h2 small { font-size: 12px; font-weight: 400; color: var(--t-sub); }
.ow-h2 .r { margin-left: auto; font-size: 12px; font-weight: 300; color: var(--t-sub); }
.ow-h2 .r.ow-tag { font-size: 11px; font-weight: 400; }
.ow-h3 { margin: 18px 0 4px; font-size: 14px; font-weight: 600; color: var(--t-ink); }
.ow-lines > div { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: .75px solid var(--t-line-2); }
.ow-lines > div:first-child { border-top: 0; }
.ow-lines .dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #f59e0b; }
.ow-lines .dot.bad { background: var(--t-red); }
.ow-lines .tx { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.ow-lines .tx b { flex: none; font-size: 13.5px; font-weight: 600; color: var(--t-ink); }
.ow-lines .tx span { min-width: 0; font-size: 12.5px; color: var(--t-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-lines .go { flex: none; font-size: 13px; font-weight: 500; color: var(--t-ink); font-variant-numeric: tabular-nums; }
.ow-foot { margin-top: 12px; padding-top: 12px; border-top: .75px solid var(--t-line-2); font-size: 11.5px; color: var(--t-sub); }
.ow-tb { width: 100%; border-collapse: collapse; font-size: 13px; font-weight: 300; table-layout: fixed; }
.ow-tb th { padding: 10px 0; font-size: 11px; font-weight: 300; color: var(--t-sub); text-align: left; border-bottom: .75px solid var(--t-line); }
.ow-tb td { height: 46px; padding: 0; border-bottom: .75px solid var(--t-line-2); color: var(--t-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-tb tr:last-child td { border-bottom: 0; }
.ow-tb .n { text-align: right; font-variant-numeric: tabular-nums; }
.ow-tb .nm { font-weight: 500; color: var(--t-ink); }
.ow-share { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ow-share i { position: relative; width: 84px; height: 4px; background: var(--t-line-2); }
.ow-share i b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--t-red); }
.ow-cap { margin-top: 18px; text-align: center; font-size: 12.5px; color: rgba(22, 24, 29, .45); }


@media (prefers-reduced-motion: reduce) { .ow-pane.swap { animation: none; } .ow-bd, .ow-no, .ow-t { transition: none; } .ow-it.on .ow-bar i { animation: none; } }
/* ── 10 지키는 것(오너 레퍼런스 핀 · 10-17): 따뜻한 연회색 바탕(07 과 같은 색 · 08 격자는 반복 안 함) · 왼쪽 큰 제목 + 오른쪽 짧은 글 · 흰 카드 3장 · 카드마다 검정 가는 선 입체 그림이 계속 움직임(색 0) */
.kp { position: relative; background: #f6f5f3; color: var(--w-ink); padding: 136px 24px 144px; }
.kp { overflow: hidden; }
.kp-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.kp-in { position: relative; max-width: 1240px; margin: 0 auto; }
.kp-top { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: end; }
.kp-eye { display: flex; width: max-content; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(22, 24, 29, .1); background: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 600; color: rgba(22, 24, 29, .78); letter-spacing: -.01em; }
.kp-eye i { width: 6px; height: 6px; border-radius: 50%; background: var(--w-ink); box-shadow: 0 0 0 3px rgba(22, 24, 29, .1); }
.kp-eye span { padding-left: 8px; border-left: 1px solid rgba(22, 24, 29, .14); font-weight: 500; color: rgba(22, 24, 29, .45); }
.kp-h { margin: 0; font-size: 44px; line-height: 1.22; font-weight: 700; letter-spacing: -.03em; }
.kp-h .soft { color: rgba(22, 24, 29, .42); }
.kp-lead { margin: 0 0 6px; font-size: 15px; line-height: 1.7; color: rgba(22, 24, 29, .58); }
.kp-row { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kp-card { display: flex; flex-direction: column; border-radius: 20px; background: #fff; padding: 12px 32px 32px; box-shadow: 0 0 0 1px rgba(22, 24, 29, .05), 0 20px 50px rgba(22, 24, 29, .05); }
.kp-cv { display: block; width: 100%; height: 230px; }
.kp-card h3 { margin: 8px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.kp-card p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: rgba(22, 24, 29, .58); }


/* ── 11 요금(오너 레퍼런스 «Pricing» 그대로 · 화이트판 · 10-17): 큰 영문 글자 «Pricing» 아래쪽이 유리 카드 3장 윗부분 너머로 흐리게 비침
   레퍼런스 측정(735×491 기준 → 1240 폭 ×1.9): 카드 214×323 · 사이 6 · 모서리 12 · 글자 «Pricing» 폭 435 · 카드 위로 62 올라옴 · 칸 안 여백 21 · 가로선 카드 끝까지 · 체크 원 14 · 단추 25 높이 알약
   반전: 검정 바탕 → 흰 바탕 · 흰 글자 → 먹색 · 검은 단추 → 흰 단추(테) · 가운데 흰 단추 → 검정 · 무지개 반사 0 */
section.pr { position: relative; overflow: hidden; background: #fff; color: var(--w-ink); padding: 72px 24px 88px; }
.pr-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pr-in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding-top: 170px; }
/* 글자 위치(측정: Outfit 600 · 줄높이 1 이면 글자 윗끝 = 글자 크기의 16% · 대문자 높이 71%) → 레퍼런스처럼 대문자 높이의 약 62% 가 카드 위로 보이게 */
.pr-big { position: absolute; left: 50%; top: 10px; z-index: 0; transform: translateX(-50%); margin: 0; font: 600 262px/1 "Outfit", var(--font); letter-spacing: -.035em; color: var(--w-ink); white-space: nowrap; pointer-events: none; user-select: none; }
.pr-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prc { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 600px; border-radius: 24px; border: 1px solid rgba(22, 24, 29, .08); box-shadow: 0 30px 70px rgba(22, 24, 29, .08), inset 0 1px 0 rgba(255, 255, 255, .9); overflow: hidden; }
.prc:before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .72) 22%, rgba(252, 252, 253, .94) 48%, rgba(250, 250, 251, .97) 100%); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.prc-top { padding: 44px 40px 40px; }
.prc-lb { font: 500 15px var(--font); color: var(--w-ink); }
.prc-p { margin-top: 18px; font: 600 46px/1 "Outfit", var(--font); letter-spacing: -.02em; color: var(--w-ink); white-space: nowrap; }
.prc-p small { font: 500 .52em var(--font); letter-spacing: 0; color: rgba(22, 24, 29, .45); margin-left: 4px; }
.prc-sub { margin-top: 12px; font-size: 13.5px; color: rgba(22, 24, 29, .5); }
.prc-ln { height: 1px; background: rgba(22, 24, 29, .09); }
.prc ul { list-style: none; margin: 0; padding: 40px 40px 0; display: grid; gap: 20px; flex: 1; align-content: start; }
.prc li { display: flex; align-items: center; gap: 16px; font-size: 14.5px; color: rgba(22, 24, 29, .6); }
.prc li i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #efeff1; display: grid; place-items: center; color: var(--w-ink); }
.prc li i svg { width: 12px; height: 12px; }
.prc-b { display: grid; place-items: center; height: 48px; margin: 40px; border-radius: 999px; background: #fff; color: var(--w-ink); font-size: 14.5px; font-weight: 600; text-decoration: none; box-shadow: 0 0 0 1px rgba(22, 24, 29, .1), 0 6px 16px rgba(22, 24, 29, .06); }
.prc.on .prc-b { background: var(--w-ink); color: #fff; box-shadow: 0 10px 24px rgba(22, 24, 29, .2); }
.pr-foot { position: relative; z-index: 1; margin-top: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pr-tg { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; font: 400 14px var(--font); color: rgba(22, 24, 29, .55); cursor: pointer; }
.pr-tg .sw { position: relative; width: 42px; height: 24px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 24, 29, .2); transition: background .25s ease; }
.pr-tg .sw:after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--w-ink); transition: transform .25s ease, background .25s ease; }
.pr-tg[aria-checked="true"] .sw { background: var(--w-ink); }
.pr-tg[aria-checked="true"] .sw:after { transform: translateX(18px); background: #fff; }
.pr-tg:focus-visible { outline: 2px solid var(--w-ink); outline-offset: 4px; border-radius: 4px; }
.pr-note { font-size: 13px; color: rgba(22, 24, 29, .45); }


@media (prefers-reduced-motion: reduce) { .pr-tg .sw, .pr-tg .sw:after { transition: none; } }
/* ── 12 자주 묻는 질문(오너 레퍼런스 «Common Questions» 그대로 · 10-17): 어두운 거친 바탕 + 위에서 내려오는 빛 · 큰 반투명 유리 판(위 흰색 → 아래 회색) · 가운데 이름표 · 큰 영문 제목 · 유리 질문 칸(번호 원 · 오른쪽 검정 + 단추) · 열린 칸 = 흰 판 + 옅은 보라 테 · 아래 «더 궁금한 게 있으세요?»
   레퍼런스 측정(1206×1078): 바탕 rgb(21,21,21) · 빛 148 · 판 253 → 217 → 186 · 판 폭 90% · 모서리 60 · 칸 폭 = 판의 72% · 칸 242(판보다 밝게) · 열린 칸 255 · 테 rgb(220,209,238) */
.fq { position: relative; overflow: hidden; background: #151515; padding: 96px 24px 120px; }
.fq:before { content: ""; position: absolute; left: 50%; top: -220px; width: 640px; height: 520px; transform: translateX(-50%) rotate(8deg); pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, .62), rgba(255, 255, 255, .16) 55%, rgba(255, 255, 255, 0)); filter: blur(30px); }
.fq:after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fq-pan { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 72px 24px 76px; border-radius: 60px; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 40px 90px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .25); }
.fq-pan:before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(253, 253, 253, .97) 0%, rgba(236, 235, 238, .94) 30%, rgba(217, 215, 220, .92) 58%, rgba(186, 186, 186, .9) 100%); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); }
.fq-eye { display: flex; width: max-content; align-items: center; gap: 8px; margin: 0 auto 20px; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(22, 24, 29, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--w-ink); }
.fq-eye small { font-size: 11px; font-weight: 500; color: rgba(22, 24, 29, .38); }
.fq-eye i { width: 5px; height: 5px; border-radius: 50%; background: var(--w-ink); }
.fq-h { margin: 0; text-align: center; font-size: 64px; line-height: 1.1; font-weight: 700; letter-spacing: -.045em; color: var(--w-ink); }
.fq-list { list-style: none; margin: 64px auto 0; padding: 0; max-width: 896px; display: grid; gap: 10px; }
.fq-it { border-radius: 26px; background: rgba(255, 255, 255, .34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(255, 255, 255, .45), 0 1px 2px rgba(22, 24, 29, .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s ease, box-shadow .3s ease; }
.fq-it.on { background: #fff; box-shadow: inset 0 0 0 1px rgb(220, 209, 238), 0 0 0 4px rgba(220, 209, 238, .28), 0 14px 34px rgba(22, 24, 29, .08); }
.fq-q { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 80px; padding: 0 20px 0 24px; border: 0; background: none; font: inherit; color: var(--w-ink); text-align: left; cursor: pointer; }
.fq-q:focus-visible { outline: 2px solid var(--w-ink); outline-offset: -4px; border-radius: 26px; }
.fq-no { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(22, 24, 29, .06); font-size: 11px; font-weight: 600; color: rgba(22, 24, 29, .55); font-variant-numeric: tabular-nums; }
.fq-t { flex: 1; font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.fq-pm { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #0f0f10; box-shadow: 0 4px 10px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .15); transition: background .3s ease, box-shadow .3s ease, transform .3s ease; }
.fq-pm:before, .fq-pm:after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 1px; background: #fff; transition: background .3s ease; }
.fq-pm:after { transform: rotate(90deg); }
.fq-it.on .fq-pm { background: #fff; box-shadow: inset 0 0 0 1px rgb(220, 209, 238), 0 0 0 3px rgba(220, 209, 238, .3); transform: rotate(45deg); }
.fq-it.on .fq-pm:before, .fq-it.on .fq-pm:after { background: rgba(22, 24, 29, .6); }
.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.3, .6, .2, 1); }
.fq-it.on .fq-a { grid-template-rows: 1fr; }
.fq-a > div { min-height: 0; overflow: hidden; padding: 0 84px 0 64px; }
.fq-a p { margin: 0 0 2px; max-width: 560px; font-size: 15px; line-height: 1.6; color: rgba(22, 24, 29, .56); }
.fq-a p:last-child { margin-bottom: 24px; }
.fq-it.on .fq-q { min-height: 72px; }
.fq-more { margin: 44px 0 0; text-align: center; font-size: 14px; color: rgba(22, 24, 29, .5); }
.fq-more a { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--w-ink); text-underline-offset: 4px; }
.fq-more a i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(22, 24, 29, .25); }
.fq-more a i svg { width: 10px; height: 10px; }

@media (prefers-reduced-motion: reduce) { .fq-a, .fq-it, .fq-pm { transition: none; } }
/* ── 바닥글(오너 레퍼런스 «Cilo» 최대한 그대로 · 10-17): 검정 #0d0d0d · 위 정보 줄(로고 | 한 줄 소개 · 오른쪽 세 묶음) · 가는 선 #191919 · 저작권 줄 · 맨 아래 큰 «SOKKI»(폭 74%) 아래로 갈수록 흐려지며 바닥에서 잘림
   흐림 = 같은 글자 4겹(선명 · 4 · 10 · 18px)을 띠마다 이어 붙임(레퍼런스 측정: 글자 위 332 / 판 608 → 글자 약 75%만 보임) */
.ft { position: relative; overflow: hidden; background: #0d0d0d; color: #fff; padding: 64px 24px 0; }
.ft-in { max-width: 1240px; margin: 0 auto; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 152px); gap: 32px; align-items: start; }
.ft-brand { display: flex; align-items: flex-start; gap: 24px; }
.ft-logo { display: block; height: 22px; width: auto; filter: invert(1); margin-top: 3px; }
.ft-tag { margin: 0; padding-left: 24px; border-left: 1px solid #2a2a2a; max-width: 300px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.ft-col h4 { margin: 0 0 18px; font-size: 14px; font-weight: 600; color: #fff; }
.ft-col a, .ft-col span { display: block; margin-bottom: 12px; font-size: 13px; line-height: 1.55; color: #8a8a8a; text-decoration: none; word-break: keep-all; }
.ft-col a:hover { color: #fff; }
.ft-bar { margin-top: 48px; padding: 22px 0; border-top: 1px solid #191919; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ft-copy { font-size: 12px; color: #5a5a5a; }
.ft-legal { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 12.5px; }
.ft-legal a { color: #bdbdbd; text-decoration: none; } .ft-legal a b { color: #fff; font-weight: 600; }
.ft-legal a:hover { color: #fff; }
.ft-biz { margin: 0; padding-bottom: 8px; font-size: 11.5px; line-height: 1.7; color: #5a5a5a; }
.ft-big { --F: min(306px, 24.7vw); position: relative; height: calc(var(--F) * .55); margin-top: 28px; }
.ft-big span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font: 600 var(--F)/1 "Outfit", var(--font); letter-spacing: -.02em; color: #fff; white-space: nowrap; margin-top: calc(var(--F) * -.16); user-select: none; pointer-events: none; }
/* 흐림 = 글자 위에 흐림 막 5겹(1.5 · 3 · 6 · 10 · 16px)을 겹쳐 아래로 갈수록 매끄럽게 세짐(띠 이음새 0) */
.ft-big .bl { position: absolute; inset: 0 -40px; pointer-events: none; }
.ft-big .bl1 { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); -webkit-mask-image: linear-gradient(180deg, transparent 42%, #000 54%); mask-image: linear-gradient(180deg, transparent 42%, #000 54%); }
.ft-big .bl2 { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(180deg, transparent 52%, #000 64%); mask-image: linear-gradient(180deg, transparent 52%, #000 64%); }
.ft-big .bl3 { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(180deg, transparent 62%, #000 74%); mask-image: linear-gradient(180deg, transparent 62%, #000 74%); }
.ft-big .bl4 { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(180deg, transparent 72%, #000 84%); mask-image: linear-gradient(180deg, transparent 72%, #000 84%); }
.ft-big .bl5 { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(180deg, transparent 82%, #000 96%); mask-image: linear-gradient(180deg, transparent 82%, #000 96%); }

/* ── 휴대폰 다듬기(오너 10-17 휴대폰 화면 6가지) — 첫 화면 채팅창 · 03 가운데 · 04 창 작게 · 05 가운데 + 장면 표시 · 05-2 카드 작게 */
.fl-steps { display: none; }


@keyframes fiIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fi.on { animation: none; } .fl-steps i { transition: none; } }
/* 휴대폰 다듬기 2(오너 10-17): 10 · 07 · 06 가운데 정렬 · 06 채팅창 작게 */

/* ── 13 마지막 단추(🔥 · 10-17): 흰 바탕 · 큰 두 줄 제목 · 위젯 입력칸(.cin) 모양 그대로 키운 입력 막대(몰 주소 | 이메일 | 검정 단추) · 아래 «14일 무료 · 약정 없음» · 동의 한 줄(펼치면 고지 4가지)
   문의 접수 = 260차 JC(위젯 서버 POST /w/inquiry) — 주소가 정해지기 전엔 보내지 않고 안내만 */
.ct { position: relative; background: #fff; color: var(--w-ink); padding: 140px 24px 150px; text-align: center; overflow: hidden; }
.ct:before { content: ""; position: absolute; left: 50%; top: 40px; width: 900px; height: 480px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(22, 24, 29, .045), rgba(22, 24, 29, 0)); }
.ct-in { position: relative; max-width: 760px; margin: 0 auto; }
.ct-eye { display: flex; width: max-content; align-items: center; gap: 8px; margin: 0 auto 22px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(22, 24, 29, .1); background: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 600; color: rgba(22, 24, 29, .78); }
.ct-eye i { width: 6px; height: 6px; border-radius: 50%; background: var(--w-online); box-shadow: 0 0 0 3px rgba(52, 195, 143, .18); }
.ct-eye span { padding-left: 8px; border-left: 1px solid rgba(22, 24, 29, .14); font-weight: 500; color: rgba(22, 24, 29, .45); }
.ct-h { margin: 0; font-size: 56px; line-height: 1.16; font-weight: 700; letter-spacing: -.035em; }
.ct-h .soft { color: rgba(22, 24, 29, .42); }
.ct-form { margin: 48px auto 0; max-width: 720px; }
.ct-bar { display: flex; align-items: center; gap: 0; height: 68px; padding: 0 8px 0 10px; border-radius: 34px; border: 1px solid rgba(22, 24, 29, .16); background: #fff; box-shadow: 0 20px 50px rgba(22, 24, 29, .08); text-align: left; }
.ct-bar:focus-within { border-color: rgba(22, 24, 29, .4); }
.ct-ic { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--w-ink); color: #fff; display: grid; place-items: center; }
.ct-ic svg { width: 20px; height: 20px; }
.ct-f { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 16px; }
.ct-f + .ct-f { border-left: 1px solid rgba(22, 24, 29, .1); }
.ct-f label { font-size: 11.5px; font-weight: 600; color: rgba(22, 24, 29, .5); }
.ct-f input { width: 100%; border: 0; outline: 0; background: transparent; padding: 2px 0 0; font: 400 15.5px var(--font); color: var(--w-ink); }
.ct-f input::placeholder { color: var(--w-time); }
.ct-go { flex: none; height: 52px; padding: 0 24px; border: 0; border-radius: 26px; background: var(--w-ink); color: #fff; font: 600 15px var(--font); cursor: pointer; white-space: nowrap; }
.ct-go:disabled { opacity: .5; cursor: default; }
.ct-go:focus-visible { outline: 2px solid var(--w-ink); outline-offset: 3px; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-agree { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 13px; color: rgba(22, 24, 29, .62); }
.ct-agree input { width: 16px; height: 16px; accent-color: #16181d; margin: 0; }
.ct-agree button { padding: 0; border: 0; background: none; font: inherit; color: rgba(22, 24, 29, .5); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ct-notice { display: none; max-width: 520px; margin: 10px auto 0; padding: 10px 16px; border-radius: 999px;  background: #f6f5f3;  font-size: 12.5px; line-height: 1.7; color: rgba(22, 24, 29, .62);  text-align: center;}
.ct-notice.on { display: block; }
.ct-notice b { color: var(--w-ink); font-weight: 600; }
.ct-note { margin-top: 16px; font-size: 14px; color: rgba(22, 24, 29, .5); }
.ct-note b { color: var(--w-ink); font-weight: 600; }
.ct-msg { margin-top: 10px; font-size: 14px; font-weight: 500; }
.ct-msg:empty { display: none; }
.ct-msg.ok { color: #1a7f5a; } .ct-msg.err { color: #c2412d; }

/* 판매 부스터 6칸(오너 10-17 «품절엔 대안» 추가): PC 한 줄 6칸 → 카드가 작아져 아이콘 · 제목 겹침 막기 · 중간 폭은 3칸 × 2줄 */
@media (min-width: 1100px) { .bx-stage:not(.pick) .bxc-im { background-size: 56%; background-position: center 13%; } .bx-stage:not(.pick) .bxc-big { padding: 0 12px 20px; gap: 5px; } .bx-stage:not(.pick) .bxc-t { font-size: 17px; white-space: nowrap; } .bx-stage:not(.pick) .bxc-d { font-size: 11px; } }