/* ==========================================================================
   stories.css — B7 · 홈 이야기 칸(DESIGN 8-1 #7 U4 · #8 U5 · #10 U8 · 6절 S5 · 7-3)
   - 머리 st- 만 씀. 그림 키트(ui-kit.css · B4)의 클래스는 다시 정의하지 않고, 필요한 자리만 st- 로 덮는다(4-15 끝 줄).
   - 테마 = html[data-theme] 토큰만 · 줄인 움직임 = 정지(stories.js 가 html.rm 이면 움직임 0).
   - 첫 그림: U4 는 HTML 그대로 다 또렷(선 끝까지) · S5 는 html.js(움직임 켬)이면 PC(시작) · 아니면 폰(끝 = HTML 정지 그림).
   - ≤1023 「채팅 길」: 글자 · 조작 · 기록 줄은 .tx-lane(오른쪽 84 비움) · 폭 전체 그림(S5 기기 틀)만 틀 너비.
   ========================================================================== */

.st-sec { margin-top: var(--section-gap); }
.h-slot > .st-sec:first-child { margin-top: 0; }   /* 홈(B4)의 칸 자리 .h-slot 이 이미 칸 사이 간격을 줌 — 겹치지 않게 */
.st-head { margin-bottom: 40px; }
.st-line { display: block; }
.st-h { color: var(--ink); }
.st-lead { margin-top: 18px; font-size: 18px; font-weight: 550; line-height: 1.6; color: var(--ink-2); }
.st-cond { margin-top: 14px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 600.98px) {
  .st-head { margin-bottom: 28px; }
  .st-lead { font-size: 16px; }
}

/* ── U4 그 사람 기록 타임라인(7-3) ─────────────────────────────────────── */
.st-tl {
  --st-lx: 170px;                          /* 선 x(노드 가운데) — stories.js 가 잰 값으로 덮음 */
  position: relative; display: flex; flex-direction: column; gap: 28px;
  margin: 0; padding: 4px 0; list-style: none;
}
/* 선: 바탕(HTML 그대로 = 끝까지 그려진 차콜) · 움직임 켬(data-live)이면 아직 안 온 길은 옅은 선 + 그려진 길(.st-tl__fill) */
.st-tl::before {
  content: ""; position: absolute; z-index: 0; left: var(--st-lx); width: 2px; margin-left: -1px;
  top: var(--st-l0, 22px); height: calc(var(--st-l1, 100%) - var(--st-l0, 22px));
  border-radius: 1px; background: var(--ink);
}
.st-tl:not([data-live])::before { height: auto; bottom: 46px; }      /* JS 전: 마지막 노드 근처까지(어림) */
.st-tl[data-live]::before { background: var(--line-2); }
.st-tl__fill {
  position: absolute; z-index: 1; left: var(--st-lx); top: 0; width: 2px; height: 1px; margin-left: -1px;
  background: var(--ink); transform-origin: 0 0; transform: scaleY(0); pointer-events: none;
}
.st-tl__dot {
  position: absolute; z-index: 3; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); pointer-events: none;
}

.st-row {
  --st-k: 0;                               /* 0 = 점이 닿음(또렷) · 1 = 아직(흐림 2px · 투명 .78) */
  position: relative; display: grid; align-items: start;
  grid-template-columns: 148px 44px minmax(0, 520px) minmax(0, 1fr);
  grid-template-areas: "date node pic guide";
}
.st-date {
  margin: 0; padding-top: 9px;
  font-size: 15px; font-weight: 750; line-height: 1.4; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.st-row > .st-date { grid-area: date; justify-self: end; }
.st-node {
  grid-area: node; justify-self: center; position: relative; z-index: 2;
  width: 14px; height: 14px; margin-top: 12px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--bg);
}
.st-row.is-on .st-node, .st-tl:not([data-live]) .st-node { border: 2.5px solid var(--ink); background: var(--ink); box-shadow: inset 0 0 0 2.5px var(--bg); }
.st-pic { grid-area: pic; min-width: 0; }
.st-guide {
  grid-area: guide; justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin: 0 0 0 28px; padding: 0 6px; border-radius: 10px;
  font-size: 15px; font-weight: 650; line-height: 1.4; color: var(--ink);
}
.st-guide__arw { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent-ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.st-guide:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* 아직 안 온 기록: 그림 · 날짜만 흐림(읽힘) — 링크는 또렷 · 초점이 들어오면 또렷 */
.st-tl[data-live] .st-row :is(.st-pic, .st-date) {
  filter: blur(calc(var(--st-k) * 2px)); opacity: calc(1 - .22 * var(--st-k));
}
.st-tl[data-live] .st-row.is-on :is(.st-pic, .st-date),
.st-tl[data-live] .st-row:focus-within :is(.st-pic, .st-date) { filter: none; opacity: 1; }
.st-tl[data-live] .st-row:not(.is-on) .st-guide { opacity: calc(1 - .22 * var(--st-k)); }
.st-tl[data-live] .st-row:focus-within .st-guide { opacity: 1; }

/* 그림 부품(ui-kit) — 홈 본문 크기에 맞춰 글자만 키움(축소 0 · 최소 11px 그대로) */
.st-pic > :is(.ui-rec, .ui-todo__row) { box-shadow: var(--sh-1); }
.st-tl .ui-rec { font-size: 14px; }
.st-tl .ui-rec__head { padding: 8px 14px; font-size: 12.5px; }
.st-tl .ui-rec__head::before { width: 14px; height: 14px; }
.st-tl .ui-rec__body { padding: 10px 14px 0; font-size: 15px; line-height: 1.5; }
.st-tl .ui-rec__body:last-child { padding-bottom: 12px; }
.st-tl .ui-rec__from { padding: 4px 14px 11px; font-size: 12.5px; }
.st-pic--person {
  padding: 13px 16px; border: 1px solid var(--ui-line); border-radius: var(--r-rec, 12px);
  background: var(--ui-card); box-shadow: var(--sh-1);
}
.st-pic--person .ui-avatar { width: 40px; height: 40px; font-size: 15px; }
.st-pic--person .ui-person > b { font-size: 16px; }
.st-tl .ui-todo__row { min-height: 58px; margin-top: 0; padding: 10px 14px; }
.st-tl .ui-todo__txt b { font-size: 14px; }
.st-tl .ui-todo__txt span { font-size: 13px; }

@media (max-width: 1279.98px) {
  .st-tl { --st-lx: 140px; }
  .st-row { grid-template-columns: 120px 40px minmax(0, 420px) minmax(0, 1fr); }
  .st-guide { margin-left: 20px; }
}
@media (max-width: 1023.98px) {
  .st-tl { --st-lx: 15px; gap: 22px; }
  .st-row {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas: "node date" "node pic" "node guide";
  }
  .st-row > .st-date { justify-self: start; padding: 0 0 8px; font-size: 14px; }
  .st-node { grid-row: 1 / span 3; margin-top: 3px; }
  .st-row:not(:has(.st-date)) .st-node { margin-top: 12px; }
  .st-guide { margin: 6px 0 0 -6px; }
  .st-tl:not([data-live])::before { top: 10px; }
}

/* ── U5 같은 기록, PC ↔ 폰(S5) ─────────────────────────────────────────── */
.st-head--u5 { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.st-seg {
  position: relative; flex: none; display: inline-flex; gap: 0; padding: 4px; border-radius: 999px; background: var(--bg-2);
}
.st-seg__btn {
  position: relative; z-index: 1; width: 76px; height: 40px; border-radius: 999px;
  font-size: 15px; font-weight: 700; line-height: 1; color: var(--ink-2);
  transition: color var(--ui-fast) ease-out;
}
.st-seg__btn[aria-checked="true"] { color: var(--ink); }
.st-seg__ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 80px; width: 76px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--sh-1);
}
.st-seg:has([data-mode="pc"][aria-checked="true"]) .st-seg__ind { left: 4px; }

/* 기기 틀 크기(4-15 · S5): PC ≥1280 1040×600 · 1024–1279 틀 너비×520 · ≤1023 틀 너비×400 / 폰 ≥1024 300×620 · ≤1023 280×580 */
.st-s5 {
  --st-pc-w: 1040px; --st-pc-h: 600px; --st-pc-r: 14px;
  --st-ph-w: 300px;  --st-ph-h: 620px; --st-ph-r: 40px; --st-bz: 9px;
  --m: 1; --pa: 0; --qa: 1;                /* --m 0 = PC · 1 = 폰(기기 틀 모양) · --pa / --qa = PC · 폰 화면 투명도 */
  position: relative;
}
.st-s5[data-mode="pc"],
html.js:not(.rm) .st-s5:not([data-live]) { --m: 0; --pa: 1; --qa: 0; }   /* 움직임 켬: PC 에서 시작(첫 그림 전 · 칸이 화면 밖) */
/* // 판단: ≤1279 「틀 너비」 PC 는 양옆 16px 을 남김 — 틀 그림자가 칸 밖으로 잘리지 않게(그림 속 글자 크기는 그대로) */
@media (max-width: 1279.98px) { .st-s5 { --st-pc-w: calc(100% - 32px); --st-pc-h: 520px; } }
@media (max-width: 1023.98px) { .st-s5 { --st-pc-h: 400px; --st-ph-w: 280px; --st-ph-h: 580px; } }
@media (max-width: 600.98px)  { .st-s5 { --st-pc-w: calc(100% - 16px); } }

/* 판단: 두 틀을 위쪽에 맞춤(가운데 맞춤이면 ≤1279 PC 꼴에서 토글과 틀 사이가 크게 빔) — 무대 높이는 큰 쪽 기준(CLS 0) */
.st-stage {
  --st-t: 16px;
  position: relative; height: calc(max(var(--st-pc-h), var(--st-ph-h)) + var(--st-t) + 44px); overflow: hidden;   /* 위 16 · 아래 44 = 틀 그림자 자리 */
}
.st-stage > * { position: absolute; }
.st-bezel {
  z-index: 0;
  left: calc(50% - (var(--st-pc-w) + (var(--st-ph-w) - var(--st-pc-w)) * var(--m)) / 2);
  top: var(--st-t);
  width: calc(var(--st-pc-w) + (var(--st-ph-w) - var(--st-pc-w)) * var(--m));
  height: calc(var(--st-pc-h) + (var(--st-ph-h) - var(--st-pc-h)) * var(--m));
  border-radius: calc(var(--st-pc-r) + (var(--st-ph-r) - var(--st-pc-r)) * var(--m));
  box-shadow: var(--ui-frame-shadow);
}
.st-bezel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--ui-bezel); box-shadow: inset 0 0 0 1.5px var(--ui-bezel-edge); opacity: var(--m);
}
.st-scr {
  z-index: 1; inset: 0;
  clip-path: inset(
    calc(var(--st-t) + var(--st-bz) * var(--m))
    calc(50% - (var(--st-pc-w) + (var(--st-ph-w) - var(--st-pc-w)) * var(--m)) / 2 + var(--st-bz) * var(--m))
    calc(100% - var(--st-t) - (var(--st-pc-h) + (var(--st-ph-h) - var(--st-pc-h)) * var(--m)) + var(--st-bz) * var(--m))
    calc(50% - (var(--st-pc-w) + (var(--st-ph-w) - var(--st-pc-w)) * var(--m)) / 2 + var(--st-bz) * var(--m))
    round calc(var(--st-pc-r) + (var(--st-ph-r) - var(--st-bz) - var(--st-pc-r)) * var(--m))
  );
}
.st-s5[data-to="phone"] .st-scr { background: var(--ui-phone-bg); }   /* 바뀌는 동안 = 도착할 화면 바탕(빈 흰 판 0) */
.st-s5[data-to="pc"] .st-scr { background: var(--ui-surface); }
.st-pcv, .st-phv { position: absolute; left: 50%; transform: translateX(-50%); }
.st-pcv { top: var(--st-t); width: var(--st-pc-w); height: var(--st-pc-h); opacity: var(--pa); }
.st-phv { top: calc(var(--st-t) + var(--st-bz)); width: calc(var(--st-ph-w) - 2 * var(--st-bz)); height: calc(var(--st-ph-h) - 2 * var(--st-bz)); opacity: var(--qa); }
.st-s5[data-anim] .st-pcv { filter: blur(var(--pb, 0px)); }
.st-s5[data-anim] .st-phv { filter: blur(var(--qb, 0px)); }
.st-s5:not([data-anim]) :is(.st-pcv, .st-phv) { will-change: auto; }
/* 틀 · 그림자는 바깥 하나(.st-bezel)가 맡음 — 키트 틀을 덮음(st-) */
.st-pcv > .ui-pc { --pc-w: 100%; --pc-h: 100%; width: 100%; height: 100%; max-width: none; border-radius: 0; box-shadow: none; }
.st-phv > .ui-phone { --dev-pad: 0px; --dev-r: calc(var(--st-ph-r) - var(--st-bz)); width: 100%; height: 100%; padding: 0; background: none; box-shadow: none; }

/* 강조 상자(정지) — 같은 문자 「견적서 잘 받았습니다. …」 · 움직이는 동안은 .st-hl 하나가 상자 → 점 → 상자 */
.st-pcv [data-anchor="s5-pc"]::after,
.st-phv [data-anchor="s5-ph"]::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none; border: 2.5px solid var(--accent);
}
.st-pcv [data-anchor="s5-pc"]::after { inset: 0; border-radius: var(--r-rec, 12px); opacity: calc(1 - var(--m)); }
.st-phv [data-anchor="s5-ph"] { position: relative; }
.st-phv [data-anchor="s5-ph"]::after { inset: -4px; border-radius: 16px; opacity: var(--m); }
.st-s5[data-anim] [data-anchor]::after { opacity: 0; }
.st-hl {
  z-index: 4; left: 0; top: 0; width: 0; height: 0; box-sizing: border-box; opacity: 0;
  border: 2.5px solid var(--accent); border-radius: 12px; background: transparent; pointer-events: none;
}
/* 판이 compact 꼴(판 너비 <560 · 끝 기록 2)일 때도 따라갈 문자(수신 10:26)가 보이게: 「기록」 한 줄을 빼면 끝 두 줄 = 폰 화면의 두 문자
   // 판단: 4-15 compact 「기록 마지막 2」를 그대로 두면 S5 가 따라갈 문자가 PC 판에서 사라짐(390 · 360) — 그 폭에서만 기록 ④를 뺌 */
@container uib (max-width: 559px) {
  .st-s5 .st-pcv .ui-tl > .ui-rec.is-note { display: none; }
  .st-s5 .st-pcv .ui-tl > .ui-rec[data-anchor="s5-pc"] { display: block; }
}
@media (max-width: 1023.98px) {
  .st-head--u5 { display: block; }
  .st-head--u5 .st-seg { margin-top: 20px; }
}

/* ── U5 폰 시연 셋(사용자 10/19 직접 지시) ─────────────────────────────────
   ① 문자 · 기록 ② 전화 · 통화요약 ③ 태그 · 단체 문자 — 폰 화면 안 겹 .st-dm(정지 그림 위) · 폰 모드일 때만(.st-s5[data-demo]).
   그림 상태는 stories.js 가 시각의 순수 함수로 씀: --k(나타남 0→1) · .is-on · .is-hid · --p/--tp(누름 고리) · 글자.
   선택 단추 .st-pick = ≥1024 폰 옆 · ≤1023 폰 아래(.tx-lane 폭) · PC 모드에서는 자리만 남기고 숨김(칸 높이 같음 · CLS 0). */
/* 판단: 안 보이는 시연은 display:none(주석 층이 숨은 글자에 이름표를 달지 않게) — 들어올 때만 0.24초 흐려 들어옴 */
.st-dm { position: absolute; z-index: 1; inset: 0; display: none; background: var(--ui-phone-bg); }
.st-s5[data-demo] .st-dm { display: block; animation: st-fade .24s ease-out; }
.st-s5[data-demo] .st-phv [data-anchor="s5-ph"]::after { opacity: 0; }   /* 정지 그림의 강조 상자는 시연 밑에서 끔 */
.st-d { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; background: var(--ui-phone-bg); }
.st-d.is-cur { display: flex; animation: st-fade .24s ease-out; }
@keyframes st-fade { from { opacity: 0; } }
html.rm :is(.st-dm, .st-d) { animation: none; }
.st-d [data-a], .st-d [data-z] { opacity: var(--k, 1); }
.st-d .is-gone { visibility: hidden; }
.st-d .is-hid { display: none !important; }
/* 자리가 열리고 닫히는 줄(높이 0fr ↔ 1fr · 안의 것만 흐려짐) */
.st-d .st-g[data-a], .st-d .st-g[data-z] { opacity: 1; }
.st-g { display: grid; grid-template-rows: 1fr; }
.st-g > * { min-height: 0; overflow: hidden; opacity: var(--k, 1); transform: translateY(calc((1 - var(--k, 1)) * 8px)); }
.st-g.is-full > * { overflow: visible; }
/* 누름 고리(키트 .ui-press 와 같은 주황 2px · 0.4초) */
.st-tap { position: relative; }
.st-tap::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid var(--ui-orange); pointer-events: none;
  opacity: calc(var(--tp, 0) * (1 - var(--p, 0))); transform: scale(calc(.8 + .3 * var(--p, 0)));
}
.st-ico { display: inline-flex; border-radius: 50%; }
.st-typed { flex: 1 1 auto; min-width: 0; color: var(--ui-ink); }
.st-typed.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--ui-orange); }
.st-d .ui-phone__field { flex-wrap: wrap; gap: 4px 6px; }

/* ① 문자 · 기록 */
.st-chat { gap: 0; }
.st-chat > * + * { margin-top: 10px; }
.st-chat > .st-g { margin-top: 0; }
.st-chat > .st-g > * { display: flex; flex-direction: column; gap: 10px; }
.st-chat > .st-g > * > :first-child { margin-top: 10px; }   /* 틈은 안쪽 여백으로(접힌 줄의 자리 0 — 0fr 줄 자신에 패딩 · 테두리 0) */
.st-memo {
  align-self: stretch; margin: 0 4px; padding: 8px 11px 10px; border-radius: 12px;
  background: var(--ui-note-bg); border: 1px solid var(--ui-memo-line); color: var(--ui-ink); font-size: 13px; line-height: 1.45;
}
.st-memo__h { display: flex; align-items: center; gap: 5px; margin: 0 0 3px; font-size: 11.5px; line-height: 1.3; color: var(--ui-note); }
.st-memo__h::before {
  content: ""; flex: none; width: 13px; height: 13px; background-color: currentColor;
  -webkit-mask: var(--ui-ic-doc) center/contain no-repeat; mask: var(--ui-ic-doc) center/contain no-repeat;
}
.st-memo__h time { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ui-phone-sub); font-variant-numeric: tabular-nums; }
.st-mtag {
  flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px;
  background: var(--ui-note-bg); color: var(--ui-note); font-size: 11px; font-weight: 700; line-height: 1;
}
.st-menu {
  position: absolute; z-index: 3; left: 8px; bottom: 90px; padding: 5px; border-radius: 12px;
  background: var(--ui-card); box-shadow: var(--ui-box-shadow); transform: translateY(calc((1 - var(--k, 1)) * 6px));
}
.st-menu__i { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ui-ink); white-space: nowrap; }
.st-menu__i > .ui-i { color: var(--ui-note); }

/* ② 전화 · 통화요약 */
.st-scrim { position: absolute; z-index: 3; inset: 0; background: var(--ui-scrim); }
.st-cp {
  position: absolute; z-index: 4; left: 10px; right: 10px; top: 46px; overflow: hidden; border-radius: 18px;
  background: var(--ui-card); box-shadow: var(--ui-box-shadow); transform: translateY(calc((1 - var(--k, 1)) * -18px));
}
.st-cp__top { display: flex; flex-direction: column; align-items: center; padding: 14px 14px 16px; background: var(--ui-phone-head); color: var(--ui-ink); text-align: center; }
.st-cp__lbl { display: flex; gap: 6px; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ui-phone-sub); }
.st-cp__tm { font-variant-numeric: tabular-nums; }
.st-cp__ava { width: 64px; height: 64px; margin: 10px 0 8px; font-size: 24px; }
.st-cp__name { font-size: 18px; font-weight: 800; line-height: 1.3; }
.st-cp__num { font-size: 12px; line-height: 1.4; color: var(--ui-phone-sub); font-variant-numeric: tabular-nums; }
.st-cp__memo { padding: 12px 14px 0; }
.st-cp__sec { font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--ui-sub); }
.st-cp__field { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--ui-pill); color: var(--ui-ph); font-size: 12px; line-height: 1.4; }
.st-cp__acts { display: flex; gap: 6px; padding: 12px 14px 0; }
.st-cp__acts > span {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; height: 32px; border-radius: 9px;
  border: 1px solid var(--ui-line-2); color: var(--ui-ink-2); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.st-cp__foot { display: flex; justify-content: center; min-height: 84px; padding: 14px 14px 12px; }
.st-cp__btn { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; line-height: 1.2; color: var(--ui-ink-2); }
.st-cp__ring { position: relative; display: block; width: 46px; height: 46px; border-radius: 50%; background: var(--ui-go); }
.st-cp__btn.is-end .st-cp__ring { background: var(--ui-missed); }
.st-cp__ring::before {
  content: ""; position: absolute; inset: 13px; background-color: #FFFFFF;
  -webkit-mask: var(--ui-ic-phone) center/contain no-repeat; mask: var(--ui-ic-phone) center/contain no-repeat;
}
.st-cp__btn.is-end .st-cp__ring::before { transform: rotate(135deg); }
.st-crec {
  align-self: flex-start; width: 214px; padding: 9px 11px 11px; border-radius: 12px;
  background: var(--ui-bubble); color: var(--ui-ink); box-shadow: 0 1px 1px rgba(31,42,48,.06);
}
.st-crec__h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.3; }
.st-crec__h > .ui-i { --ui-i-s: 15px; color: var(--ui-ico-call); }
.st-crec__d { color: var(--ui-ink-2); font-variant-numeric: tabular-nums; }
.st-crec__h > time { margin-left: auto; font-size: 11px; color: var(--ui-phone-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-crec .ui-stt { margin: 9px 0 0; }
.st-sum { margin-top: 9px; padding: 8px 10px 9px; border-radius: 10px; border: 2px solid transparent; background: var(--ui-surface-2); }
.st-sum.is-on { border-color: var(--ui-orange); }
.st-sum__h { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--ui-msg); }
.st-sum__h::before {
  content: ""; flex: none; width: 13px; height: 13px; background-color: currentColor;
  -webkit-mask: var(--ui-ic-lines) center/contain no-repeat; mask: var(--ui-ic-lines) center/contain no-repeat;
}
.st-sum ul { margin: 5px 0 0; padding: 0; list-style: none; }
.st-sum li { position: relative; padding-left: 11px; font-size: 12px; line-height: 1.5; color: var(--ui-ink); }
.st-sum li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--ui-ink-2); }
.st-toast {
  position: absolute; z-index: 5; left: 50%; bottom: 96px; padding: 8px 14px; border-radius: 999px;
  background: var(--ui-ink); color: var(--ui-surface); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  transform: translate(-50%, calc((1 - var(--k, 1)) * 8px));
}

/* ③ 태그 · 단체 문자 */
.st-chead { flex: none; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px 0 12px; background: var(--ui-phone-head); color: var(--ui-ink); }
.st-chead > b { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
.st-chead > .ui-i { --ui-i-s: 18px; }
.st-tags { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--ui-phone-bar); border-bottom: 1px solid var(--ui-line); }
.st-tags__lbl { margin-right: 2px; font-size: 11.5px; font-weight: 700; color: var(--ui-sub); }
.st-tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--ui-line-2); background: var(--ui-card); color: var(--ui-ink-2); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.st-tag.is-on { border-color: var(--ui-orange); background: var(--ui-orange-tint); color: var(--ui-orange-deep); }
.st-selbar {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px;
  background: var(--ui-phone-bar); border-bottom: 1px solid var(--ui-line); font-size: 12.5px; line-height: 1; color: var(--ui-ink);
}
.st-selbar__n { margin-left: auto; font-weight: 700; color: var(--ui-orange-deep); }
.st-clist { flex: 1 1 auto; min-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; background: var(--ui-phone-bar); }
.st-crow__in { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px; border-bottom: 1px solid var(--ui-line); }
.st-crow .ui-avatar { width: 34px; height: 34px; font-size: 13px; }
.st-crow p { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.st-crow p > b { font-size: 13.5px; }
.st-crow p > span { font-size: 11.5px; color: var(--ui-sub); font-variant-numeric: tabular-nums; }
.st-tagp { flex: none; padding: 4px 7px; border-radius: 6px; background: var(--ui-orange-tint); color: var(--ui-orange-deep); font-size: 11px; font-weight: 700; line-height: 1; }
.st-tagp.is-plain { background: var(--ui-pill); color: var(--ui-ink-2); }
.st-cb { position: relative; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ui-sub); }
.st-cb.is-on, .st-crow.is-on .st-cb { background: var(--ui-orange-fill); border-color: var(--ui-orange-fill); }
.st-cb.is-on::before, .st-crow.is-on .st-cb::before {
  content: ""; position: absolute; inset: 1px; background-color: #FFFFFF;
  -webkit-mask: var(--ui-ic-check) center/contain no-repeat; mask: var(--ui-ic-check) center/contain no-repeat;
}
.st-crow:not(.is-on) .st-cb[data-a] { opacity: var(--k, 1); }
.st-bar {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 34px; padding: 10px 14px 12px;
  background: var(--ui-phone-bar); border-top: 1px solid var(--ui-line); transform: translateY(calc((1 - var(--k, 1)) * 100%));
}
.st-comp {
  position: absolute; z-index: 4; left: 0; right: 0; top: 28px; bottom: 34px; display: flex; flex-direction: column;
  background: var(--ui-phone-bar); transform: translateX(calc((1 - var(--k, 1)) * 100%));
}
.st-d .st-comp[data-a] { opacity: 1; }
.st-comp__to { padding: 12px 14px; border-bottom: 1px solid var(--ui-line); }
.st-comp__lbl { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ui-ink-2); }
.st-rcps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st-rcp {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px 0 3px; border-radius: 999px;
  background: var(--ui-pill); color: var(--ui-ink); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.st-rcp > .ui-avatar { width: 22px; height: 22px; font-size: 11px; }
.st-rcp > .ui-i { --ui-i-s: 14px; color: var(--ui-go-ink); }
.st-comp__msg {
  flex: none; min-height: 132px; display: flex; align-items: flex-start; margin: 12px 14px; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--ui-orange); color: var(--ui-ph); font-size: 13px; line-height: 1.5;
}
.st-comp > .st-comp__go.ui-btn { flex: none; width: auto; margin: auto 14px 14px; }
.st-comp .st-toast { bottom: 64px; }

/* 선택 단추(폰 모드일 때만 보임 · 자리는 늘 같음) */
.st-pick { display: flex; flex-direction: column; gap: 8px; opacity: var(--qa); }
.st-s5[data-mode="pc"]:not([data-anim]) .st-pick,
html.js:not(.rm) .st-s5:not([data-live]) .st-pick,
html:not(.js) .st-pick { visibility: hidden; }
.st-pick__btn {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px 14px;
  border-radius: 16px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); text-align: left;
  font-size: 15px; font-weight: 650; line-height: 1.35;
  transition: background-color var(--ui-fast) ease-out, color var(--ui-fast) ease-out;
}
.st-pick__btn:hover { background: var(--bg-2); }
.st-pick__btn[aria-pressed="true"] { background: var(--surface); box-shadow: var(--sh-1); color: var(--ink); }
.st-pick__n {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-2); color: var(--ink-2); font-size: 13px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.st-pick__btn[aria-pressed="true"] .st-pick__n { background: var(--ink); color: var(--bg); }
.st-pick__bar { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 3px; overflow: hidden; border-radius: 2px; background: var(--line-2); opacity: 0; }
.st-pick__bar::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--pr, 0)); }
.st-pick__btn[aria-pressed="true"] .st-pick__bar { opacity: 1; }
html.rm .st-pick__bar { display: none; }
@media (min-width: 1024px) {
  .st-pick { position: absolute; z-index: 2; top: calc(var(--st-ph-h) / 2 + 16px - 96px); left: calc(50% + var(--st-ph-w) / 2 + 48px); width: 240px; }
}
@media (max-width: 1023.98px) {
  .st-pick { gap: 6px; max-width: min(360px, calc(100% - var(--lane-cut))); margin-top: -22px; }
  .st-pick__btn { min-height: 48px; padding: 10px 14px 12px; border-radius: 14px; font-size: 14px; }
  .st-pick__bar { left: 14px; right: 14px; bottom: 5px; }
}

/* ── U8 통화 음성인식(홈 맨 끝 · 정지 그림) ─────────────────────────────── */
.st-u8__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 32px 56px; align-items: center;
}
.st-u8__link { margin-top: 22px; }
.st-u8__pic { margin: 0; min-width: 0; }
.st-call { position: relative; padding: 22px 24px 26px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-2); }
.st-call .st-date { display: block; margin: 0 0 12px; padding: 0; text-align: left; font-size: 14px; }
.st-call .ui-tl { overflow: visible; }
.st-call .ui-rec { font-size: 14px; }
.st-call .ui-rec__head { padding: 8px 14px; font-size: 12.5px; }
.st-call .ui-rec__head::before { width: 14px; height: 14px; }
.st-call .ui-audio { height: 34px; margin: 12px 14px 0; font-size: 12.5px; }
.st-call .ui-stt { height: 26px; margin: 10px 14px 0; font-size: 12.5px; }
.st-call .ui-rec > .ui-stt:last-child { margin-bottom: 14px; }
@media (max-width: 1023.98px) {
  .st-u8__grid { grid-template-columns: minmax(0, 1fr); }
  .st-u8__pic { max-width: min(460px, calc(100% - var(--lane-cut))); }
}
@media (max-width: 600.98px) {
  .st-call { padding: 18px 16px 20px; }
}