/* ==========================================================================
   apps.css — B7 · VoiceNote 홈(/ko/voicenote/) · Loela 홈(/ko/loela/) (DESIGN 8-10 · 8-11 · 3-3)
   - 머리 vn-(VoiceNote) · lo-(Loela)만 씀 — 두 쪽 공용 꼴은 :is(.vn-x, .lo-x) 로 묶음. 키트(ui-)는 다시 정의하지 않고 덮기만.
   - 강조색은 body[data-product] 가 tokens.css 에서 정함(VoiceNote 보라 · Loela 코랄 — 코랄은 점 · 채움 장식만, 글자 · 의미 선은 --accent-ink).
   - 그림 속 앱 화면 색은 실제 화면에서 뽑은 값(screenshots/voicenote/ko · PUB/library/screens/loela) — 글자는 AA(4.5) 맞춰 진하게(// 판단 표시).
   - 첫 그림: 움직임 켬(html.js:not(.rm))이면 시작 장면, 아니면 끝 장면(= HTML 정지 그림) · JS 가 3초 안에 안 붙으면 끝 장면으로(안전장치).
   ========================================================================== */

/* ── 앱 화면 색(그림 속 · 이 파일 전용) ── */
:root{
  --vn-bg:#F5F7FA; --vn-surface:#FFFFFF; --vn-line:#E5E7EB; --vn-line-2:#EFF0F3; --vn-ink:#111827; --vn-sub:#5B6370;
  --vn-pri:#4F46E5;      /* 글자 · 단추 채움 — 실제 #6366F1 위 흰 글자 4.47 이라 진하게(// 판단: H29 선례) */
  --vn-pri-line:#A9ABF6; --vn-tint:#EDEEF9; --vn-tint-line:#DADCF6;
  --vn-cli:#0B6E4C; --vn-cli-bg:#E7F8F2; --vn-cli-dot:#10B981; --vn-memo:#4F46E5; --vn-memo-bg:#E6E8FA;
  --vn-ava:#E4EDFB; --vn-ava-ink:#2F4F8F;
  --vn-rec:#E5484D; --vn-rec-ink:#C62F35;   /* 녹음 중 빨강(그림 속 · 사용자 10/19) */
  --lo-bg:#FAF7F5; --lo-card:#FFFFFF; --lo-line:#ECE6E2; --lo-ink:#2E2430; --lo-sub:#625869;
  --lo-red:#C8422C; --lo-red-ink:#B03A26; --lo-tint:#FFEFEA; --lo-dot:#FF7A6B; --lo-shadow:#EBE8E6;
  --lo-ava-a:#FFEACB; --lo-ava-a-ink:#7A4E0A; --lo-ava-b:#F5E1EE; --lo-ava-b-ink:#8A3567; --lo-ava-c:#FFEFEA; --lo-ava-c-ink:#A8351F;
}
html[data-theme="dark"]{
  --vn-bg:#171A21; --vn-surface:#222630; --vn-line:#343A46; --vn-line-2:#2C313B; --vn-ink:#ECEEF3; --vn-sub:#AAB1BD;
  --vn-pri:#A5B4FC; --vn-pri-line:#5B62C9; --vn-tint:#262A45; --vn-tint-line:#363C66;
  --vn-cli:#6EE7B7; --vn-cli-bg:#12352A; --vn-cli-dot:#34D399; --vn-memo:#C7CBFF; --vn-memo-bg:#2A2D52;
  --vn-ava:#253552; --vn-ava-ink:#C9DAFF;
  --vn-rec:#F0524F; --vn-rec-ink:#FF8E8B;
  --lo-bg:#1C1719; --lo-card:#282124; --lo-line:#3A3135; --lo-ink:#F4ECEE; --lo-sub:#C4B8C0;
  --lo-red:#C8422C; --lo-red-ink:#FF9A86; --lo-tint:#3A2622; --lo-dot:#FF7A6B; --lo-shadow:#141012;
  --lo-ava-a:#3D3017; --lo-ava-a-ink:#FFD796; --lo-ava-b:#3A2433; --lo-ava-b-ink:#F4B8DD; --lo-ava-c:#3A2622; --lo-ava-c-ink:#FFB4A4;
}
/* 아이콘(선 1.75 · 둥근 끝 — ui-kit 에 없는 것만) */
:root{
  --vn-ic-share:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3.5M7.5 8 12 3.5 16.5 8'/%3E%3Cpath d='M8 11H6a1.5 1.5 0 0 0-1.5 1.5v6A1.5 1.5 0 0 0 6 20h12a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 18 11h-2'/%3E%3C/svg%3E");
  --vn-ic-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15M9.5 6.5V4.5h5v2M6.5 6.5l1 13h9l1-13M10 10.5v6M14 10.5v6'/%3E%3C/svg%3E");
  --vn-ic-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  --vn-ic-addp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8.5' r='3.6'/%3E%3Cpath d='M3.5 19.5a6.5 6.5 0 0 1 13 0M18.5 8v6M15.5 11h6'/%3E%3C/svg%3E");
  --vn-ic-client:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6.5' width='17' height='13' rx='2'/%3E%3Cpath d='M10 4h4v4h-4z'/%3E%3Ccircle cx='9' cy='12.5' r='1.6'/%3E%3Cpath d='M6.5 16.5a2.6 2.6 0 0 1 5 0M14 12h3.5M14 15h3.5'/%3E%3C/svg%3E");
  --vn-ic-memo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 4.5h13v9l-5 6h-8z'/%3E%3Cpath d='M13.5 19.5v-6h5M8.5 9h7M8.5 12.5h4'/%3E%3C/svg%3E");
  --vn-ic-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5 12 4l7.5 6.5v9h-5v-6h-5v6h-5z'/%3E%3C/svg%3E");
  --vn-ic-list:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17' rx='2'/%3E%3Cpath d='M8.5 8.5h7M8.5 12h7M8.5 15.5h4.5'/%3E%3C/svg%3E");
  --vn-ic-bt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7.5l10 9-5 4.5v-18l5 4.5-10 9'/%3E%3C/svg%3E");
  --vn-ic-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5v3M8 7.5v9M12 4.5v15M16 8.5v7M20 10.5v3'/%3E%3C/svg%3E");
  --vn-ic-rec:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.5' y='2.5' width='9' height='19' rx='3'/%3E%3Cpath d='M10.5 6h3'/%3E%3Ccircle cx='12' cy='15.5' r='2.2'/%3E%3C/svg%3E");
  --vn-ic-msg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-7l-4 3.5v-3.5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --vn-ic-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='m4.5 7.5 7.5 5.5 7.5-5.5'/%3E%3C/svg%3E");
  --vn-ic-note:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17' rx='2'/%3E%3Cpath d='M8.5 8.5h7M8.5 12h7M8.5 15.5h4'/%3E%3C/svg%3E");
  --vn-ic-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --lo-ic-q:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.75'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.6M12 17h.01'/%3E%3C/svg%3E");
  --lo-ic-cake:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 20.5h15v-7a2 2 0 0 0-2-2h-11a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4.5 15.5c1.5 1 3 1 4.5 0s3-1 4.5 0 3 1 4.5 0M12 11.5v-3M12 6.2c.9-.8 1.2-1.6 0-3-1.2 1.4-.9 2.2 0 3z'/%3E%3C/svg%3E");
  --lo-ic-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c5 0 9 3.5 9 7.9s-4 7.9-9 7.9c-1.1 0-2.2-.2-3.2-.5L5 20.5l.9-3.4C4 15.6 3 13.5 3 11.1 3 6.7 7 3.2 12 3.2z' fill='%23000'/%3E%3C/svg%3E");
}

/* ── 쪽 틀 ───────────────────────────────────────────────────────────── */
:is(.vn-main, .lo-main) { padding-bottom: 8px; }
:is(.vn-hero, .lo-hero) { padding-top: 40px; }
:is(.vn-hero__grid, .lo-hero__grid) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: center;
}
:is(.vn-hero__icon, .lo-hero__icon) { display: block; width: 64px; height: 64px; border-radius: 16px; }
:is(.vn-h1, .lo-h1) {
  margin-top: 24px; font-size: 56px; font-weight: 800; line-height: 1.14; letter-spacing: -.042em; color: var(--ink);
  text-wrap-style: balance;
}
:is(.vn-line, .lo-line) { display: block; }
:is(.vn-desc, .lo-desc) { margin-top: 20px; max-width: 34em; font-size: 18px; font-weight: 500; line-height: 1.65; color: var(--ink-2); }
:is(.vn-stores, .lo-stores) { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
:is(.vn-store, .lo-store) svg { width: 15px; height: 15px; }
.lo-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.lo-fact { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; line-height: 1.4; color: var(--ink); }
.lo-fact svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--accent-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

:is(.vn-sec, .lo-sec) { margin-top: var(--section-gap); }
:is(.vn-h2, .lo-h2) { margin-bottom: 28px; }
:is(.vn-stepl, .lo-stepl) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
:is(.vn-step, .lo-step) { padding: 24px 24px 26px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-1); }
:is(.vn-step, .lo-step) h3 { margin-top: 14px; }
:is(.vn-step, .lo-step) p { margin-top: 8px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
:is(.vn-step__dot, .lo-step__dot) { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

:is(.vn-groups, .lo-groups) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 48px; }
:is(.vn-group__t, .lo-group__t) { margin: 0 0 4px; font-size: 14px; font-weight: 750; line-height: 1.4; color: var(--ink-3); }
:is(.vn-rows, .lo-rows) { margin: 0; padding: 0; list-style: none; }

:is(.vn-blog__head, .lo-blog__head) { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
:is(.vn-blog__head, .lo-blog__head) :is(.vn-h2, .lo-h2) { margin: 0; }
:is(.vn-posts, .lo-posts) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
:is(.vn-posts, .lo-posts) > li, :is(.vn-posts, .lo-posts) .tx-post { height: 100%; }

.vn-know { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.vn-know__i { padding: 24px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-1); }
.vn-know__i p { margin-top: 8px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }

@media (max-width: 1439px) { :is(.vn-h1, .lo-h1) { font-size: 48px; } }
/* 1024–1279: 글 칸이 좁아(≈430) 둘째 줄이 한 줄에 들도록 — 한 낱말만 남는 줄 0(E9) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  :is(.vn-h1, .lo-h1) { font-size: 36px; }
  :is(.vn-hero__grid, .lo-hero__grid) { column-gap: 32px; }
  :is(.vn-stage, .lo-stage) { --stage-px: 32px; }
}
@media (max-width: 1023.98px) {
  :is(.vn-hero, .lo-hero) { padding-top: 28px; }
  :is(.vn-hero__grid, .lo-hero__grid) { grid-template-columns: minmax(0, 1fr); }
  :is(.vn-h1, .lo-h1) { font-size: 40px; }
  :is(.vn-stepl, .lo-stepl), :is(.vn-posts, .lo-posts), .vn-know, :is(.vn-groups, .lo-groups) { grid-template-columns: minmax(0, 1fr); }
  :is(.vn-show, .lo-show) { justify-self: start; max-width: calc(100% - var(--lane-cut)); }
}
@media (max-width: 600.98px) {
  :is(.vn-h1, .lo-h1) { margin-top: 18px; font-size: 28px; }   /* 두 줄 그대로 — 한 낱말만 남는 줄 0(E9) */
  :is(.vn-desc, .lo-desc) { font-size: 16px; }
  :is(.vn-step, .lo-step), .vn-know__i { padding: 20px; }
}

/* ── 그림 무대(폰 + 커서 자리) ─────────────────────────────────────────── */
:is(.vn-show, .lo-show) { position: relative; margin: 0; padding-bottom: 48px; min-width: 0; }
:is(.vn-stage, .lo-stage) {
  --stage-px: 56px; --stage-py: 24px;
  position: relative; overflow: hidden; padding: var(--stage-py) var(--stage-px) calc(var(--stage-py) + 40px);   /* 아래 = 기기 그림자 자리(잘린 그림자 모서리 0) */
}
:is(.vn-phone, .lo-phone) { --dev-w: 300px; --dev-h: 620px; }
@media (max-width: 1023.98px) { :is(.vn-phone, .lo-phone) { --dev-w: 280px; --dev-h: 580px; } }
@media (max-width: 600.98px) {
  :is(.vn-show, .lo-show) { width: 100%; }        /* 폭이 정해져야 폰 너비 min(280px, 100%) 가 풀림(줄어드는 칸 안 % 0 막기) */
  :is(.vn-stage, .lo-stage) { --stage-px: 0px; --stage-py: 16px; padding-right: 14px; }
  :is(.vn-phone, .lo-phone) { --dev-w: min(280px, 100%); --dev-h: 560px;
    box-shadow: inset 0 0 0 1.5px var(--ui-bezel-edge), 0 4px 12px rgba(31, 42, 48, .14); }   /* 오른쪽 14px 안에 드는 그림자 */
}
:is(.vn-scr, .lo-scr) { position: relative; overflow: hidden; }
:is(.vn-l, .lo-l) { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 28px 0 34px; }
:is(.vn-sbar, .lo-sbar) { position: absolute; z-index: 6; left: 0; right: 0; top: 0; background: transparent; color: var(--vn-ink); }
.lo-sbar { color: var(--lo-ink); }
:is(.vn-nbar, .lo-nbar) { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; background-color: transparent; }
:is(.vn-press, .lo-press) { border-color: var(--accent-ink); }
.vn-press { border-color: var(--accent); }
:is(.vn-replay, .lo-replay) {
  position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px 0 13px;
  border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap;
}
:is(.vn-replay, .lo-replay) svg { width: 14px; height: 14px; fill: currentColor; }
:is(.vn-replay, .lo-replay):hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
@media (max-width: 600.98px) { :is(.vn-show, .lo-show) { padding-bottom: 46px; } }
/* VoiceNote 조작 줄(사용자 10/19) — [❚❚ 일시 정지 | ▶ 계속 보기 | ▶ 다시 보기] 한 자리 + 「폰 | 외부기기」(aria-pressed) */
.vn-ctl { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 10px; }
.vn-ctl .vn-replay { position: static; justify-content: center; min-width: 108px; }
.vn-modes { display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 3px; box-sizing: border-box; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.vn-mode { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; }
.vn-mode:hover { color: var(--ink); }
.vn-mode[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.vn-mode:focus-visible, .vn-ctl .vn-replay:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.vn-pause > span { display: inline-flex; align-items: center; gap: 7px; }

/* 장면 보임(정지 꼴) — 끝 장면이 HTML 기본 · 움직임 켬이면 시작 장면 · JS(data-live)가 붙으면 인라인으로 그림 */
.vn-s-list, .vn-s-rec, .vn-s-ble, .lo-s-home, .lo-s-msg { opacity: 0; visibility: hidden; }
.vn-wait, .vn-sum { opacity: 0; visibility: hidden; }   /* VoiceNote 끝 = 상세 「전문」 + 공유 시트(메일 고름) */
@keyframes apFailHide { to { opacity: 0; visibility: hidden; } }
@keyframes apFailShow { to { opacity: 1; visibility: visible; } }
html.js:not(.rm) .vn-stage:not([data-live]) .vn-s-list,
html.js:not(.rm) .lo-stage:not([data-live]) .lo-s-home { opacity: 1; visibility: visible; animation: apFailHide 0s 3s forwards; }
html.js:not(.rm) .vn-stage:not([data-live]) :is(.vn-s-detail, .vn-scrim, .vn-sheet),
html.js:not(.rm) .lo-stage:not([data-live]) .lo-s-sms { opacity: 0; visibility: hidden; animation: apFailShow 0s 3s forwards; }
html.js:not(.rm) .lo-stage:not([data-live]) .lo-noti { display: none; }          /* 시작 = 알림 카드 닫힘(높이 0) */
html.js:not(.rm) .lo-stage:not([data-live]) .lo-sent { visibility: hidden; animation: apFailShow 0s 3s forwards; }   /* 시작 = 보낸 말풍선 0 */
@keyframes apFailGone { to { display: none; } }
.lo-stage:not([data-live]) .lo-typed,
.lo-stage[data-at="end"] .lo-typed { display: none; }                               /* 끝 = 보낸 뒤 입력 칸 비움(한 줄로 줄어듦) */
html.js:not(.rm) .lo-stage:not([data-live]) .lo-typed { display: block; animation: apFailGone 0s 3s forwards; }
:is(.vn-stage, .lo-stage).is-measure .lo-typed { display: block !important; }      /* 전송 단추 자리는 문구가 든 꼴로 잼 */
/* 앵커 재기(apps.js measure — 크기 바뀜 · 글꼴 준비 때만): 열림 · 밀림을 끝 자리로 놓고 잰 뒤 곧바로 되돌림(그림 0) */
:is(.vn-stage, .lo-stage).is-measure :is(.vn-l, .lo-l, .vn-file, .vn-sheet, .lo-noti, .lo-rest, .lo-sent) { transform: none !important; clip-path: none !important; }

/* ── VoiceNote 화면(그림 속) ───────────────────────────────────────────── */
.vn-scr { background: var(--vn-bg); color: var(--vn-ink); font-size: 12.5px; line-height: 1.45; }
.vn-i { display: inline-block; flex: none; width: 18px; height: 18px; background-color: currentColor;
  -webkit-mask: var(--vn-i-m) center/contain no-repeat; mask: var(--vn-i-m) center/contain no-repeat; }
.vn-i.is-share { --vn-i-m: var(--vn-ic-share); } .vn-i.is-trash { --vn-i-m: var(--vn-ic-trash); } .vn-i.is-down { --vn-i-m: var(--vn-ic-down); }
.vn-i.is-addp { --vn-i-m: var(--vn-ic-addp); } .vn-i.is-card { --vn-i-m: var(--vn-ic-client); }
.vn-s-list { background: var(--vn-bg); }
.vn-bar { flex: none; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; background: var(--vn-surface); }
.vn-bar__t { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.vn-bar__i { --ui-i-s: 19px; color: var(--vn-ink); }
.vn-search { flex: none; display: flex; align-items: center; gap: 7px; height: 36px; margin: 0 12px; padding: 0 12px;
  border: 1px solid var(--vn-line); border-radius: 18px; background: var(--vn-surface); color: var(--vn-sub); font-size: 12px; white-space: nowrap; overflow: hidden; }
.vn-search .ui-i { --ui-i-s: 15px; }
.vn-s-list .vn-search { box-shadow: 0 6px 0 var(--vn-surface); }
.vn-list { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 4px 12px 0; }
.vn-day { margin: 10px 4px 6px; font-size: 12px; font-weight: 700; color: var(--vn-sub); }
.vn-card { display: flex; gap: 10px; padding: 11px 12px; border: 1px solid var(--vn-line); border-radius: 14px; background: var(--vn-surface); }
.vn-ico { position: relative; flex: none; display: block; width: 34px; height: 34px; border-radius: 9px; background: var(--vn-cli-bg); color: var(--vn-cli); }
.vn-ico::before { content: ""; position: absolute; inset: 8px; background-color: currentColor;
  -webkit-mask: var(--vn-ic-client) center/contain no-repeat; mask: var(--vn-ic-client) center/contain no-repeat; }
.vn-ico.is-memo { background: var(--vn-memo-bg); color: var(--vn-memo); }
.vn-ico.is-memo::before { -webkit-mask-image: var(--vn-ic-memo); mask-image: var(--vn-ic-memo); }
.vn-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vn-card__t { font-size: 13.5px; font-weight: 800; line-height: 1.35; }
.vn-card__p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--vn-sub); }
.vn-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 0; }
.vn-chip { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 9px; border-radius: 999px;
  background: var(--vn-cli-bg); color: var(--vn-cli); font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; }
.vn-chip::before { content: ""; width: 12px; height: 12px; background-color: currentColor;
  -webkit-mask: var(--vn-ic-client) center/contain no-repeat; mask: var(--vn-ic-client) center/contain no-repeat; }
.vn-chip.is-memo { background: var(--vn-memo-bg); color: var(--vn-memo); }
.vn-chip.is-memo::before { -webkit-mask-image: var(--vn-ic-memo); mask-image: var(--vn-ic-memo); }
.vn-chip.is-lg { height: 26px; padding: 0 8px 0 10px; font-size: 12.5px; }
.vn-chip .vn-i { width: 13px; height: 13px; margin-left: 2px; }
.vn-when { font-size: 11.5px; color: var(--vn-sub); white-space: nowrap; }
.vn-tabbar { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); height: 52px; margin-top: auto; border-top: 1px solid var(--vn-line-2);
  background: var(--vn-surface); }
.vn-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--vn-sub); }
.vn-tab::before { content: ""; width: 19px; height: 19px; background-color: currentColor;
  -webkit-mask: var(--vn-tab-m, var(--vn-ic-home)) center/contain no-repeat; mask: var(--vn-tab-m, var(--vn-ic-home)) center/contain no-repeat; }
.vn-tab.is-people { --vn-tab-m: var(--ui-ic-contacts); } .vn-tab.is-rec { --vn-tab-m: var(--vn-ic-list); }
.vn-tab.is-cal { --vn-tab-m: var(--ui-ic-calendar); } .vn-tab.is-set { --vn-tab-m: var(--ui-ic-gear); }
.vn-tab.is-on { color: var(--vn-pri); font-weight: 700; }

.vn-s-detail { background: var(--vn-bg); }
.vn-detail__in { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vn-top { flex: none; display: flex; align-items: center; gap: 16px; height: 46px; padding: 0 14px; color: var(--vn-ink); }
.vn-top .ui-i { --ui-i-s: 19px; }
.vn-top .vn-i { width: 19px; height: 19px; }
.vn-top__sp { flex: 1; }
.vn-top__t { flex: 1; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.vn-meta { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 2px 14px 0; }
.vn-date { font-size: 11px; color: var(--vn-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vn-title { display: block; padding: 8px 14px 0; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.vn-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 10px 14px 0; padding: 0 14px 0 11px;
  border: 1.5px solid var(--vn-pri-line); border-radius: 999px; color: var(--vn-pri); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.vn-link .vn-i { width: 16px; height: 16px; }
.vn-audio { flex: none; display: flex; align-items: center; gap: 10px; margin: 12px 14px 0; padding: 10px 14px 9px 11px;
  border: 1px solid var(--vn-tint-line); border-radius: 14px; background: var(--vn-tint); }
.vn-audio__play { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--vn-pri); }
.vn-audio__play::before { content: ""; position: absolute; left: 9px; top: 7px; border-style: solid; border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--vn-pri); }
.vn-audio__track { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vn-audio__bar { position: relative; display: block; height: 3px; border-radius: 2px; background: var(--vn-line); }
.vn-audio__bar::before { content: ""; position: absolute; left: 0; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--vn-pri); }
.vn-audio__t { display: flex; justify-content: space-between; font-size: 11px; color: var(--vn-sub); font-variant-numeric: tabular-nums; }
.vn-tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; height: 40px; margin-top: 14px; border-bottom: 1px solid var(--vn-line); background: var(--vn-surface); }
.vn-tabs > span { position: relative; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--vn-sub); }
.vn-tabs > span.is-on { color: var(--vn-pri); }
.vn-tabs > span.is-on::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 26px; height: 3px; margin-left: -13px; border-radius: 2px; background: var(--vn-pri); }
.vn-body { flex: 1 1 auto; min-height: 0; padding: 12px 12px 0; overflow: hidden; }
.vn-text { margin: 0; padding: 11px 13px; border: 1px solid var(--vn-line-2); border-radius: 12px; background: var(--vn-surface); font-size: 12.5px; line-height: 1.6; }
.vn-foot { flex: none; display: grid; grid-template-columns: 1fr 1fr; height: 50px; border-top: 1px solid var(--vn-line-2); background: var(--vn-surface); }
.vn-foot__b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--vn-sub); }
.vn-foot__b .vn-i { width: 17px; height: 17px; color: var(--vn-pri); }

.vn-recbtn { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; margin: 10px 12px 12px;
  border-radius: 12px; background: var(--vn-pri); color: #FFFFFF; font-size: 13.5px; font-weight: 800; }
html[data-theme="dark"] .vn-recbtn { background: #4F46E5; }
.vn-recbtn .ui-i { --ui-i-s: 17px; }

/* 녹음 중(「폰」) — 시간 흐름 · 소리 막대 · 멈춤 */
.vn-s-rec { background: var(--vn-bg); }
.vn-rec { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-bottom: 24px; }
.vn-rec__state { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--vn-surface); border: 1px solid var(--vn-line); font-size: 12.5px; font-weight: 800; color: var(--vn-rec-ink); }
.vn-rec__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vn-rec); }
.vn-rec__time { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vn-wave { display: flex; align-items: center; gap: 4px; height: 60px; }
.vn-wave > i { display: block; width: 4px; height: 100%; border-radius: 2px; background: var(--vn-pri); transform: scaleY(.12); }
.vn-rec__ctl { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-bottom: 18px; }
.vn-stop { position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; background: var(--vn-surface); border: 1.5px solid var(--vn-line); }
.vn-stop::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 6px; background: var(--vn-rec); }
.vn-stop__l { font-size: 12px; font-weight: 700; color: var(--vn-sub); }

/* 녹음기 연결(「외부기기」) — 블루투스 · 녹음 파일 동기화 */
.vn-s-ble { background: var(--vn-bg); }
.vn-dev { flex: none; display: flex; align-items: center; gap: 12px; margin: 6px 12px 0; padding: 12px 14px;
  border: 1px solid var(--vn-line-2); border-radius: 14px; background: var(--vn-surface); }
.vn-dev__ico { position: relative; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--vn-tint); color: var(--vn-pri); }
.vn-dev__ico::before { content: ""; position: absolute; inset: 9px; background-color: currentColor;
  -webkit-mask: var(--vn-ic-rec) center/contain no-repeat; mask: var(--vn-ic-rec) center/contain no-repeat; }
.vn-dev__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; margin: 0; }
.vn-dev__t b { font-size: 14.5px; font-weight: 800; }
.vn-dev__st { position: relative; display: block; height: 18px; }
.vn-dev__s { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; height: 18px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vn-dev__s.is-wait { color: var(--vn-sub); opacity: 0; visibility: hidden; }
.vn-dev__s.is-ok { color: var(--vn-cli); }
.vn-okdot { width: 8px; height: 8px; border-radius: 50%; background: var(--vn-cli-dot); }
.vn-dev .vn-i.is-bt { width: 20px; height: 20px; color: var(--vn-pri); }
.vn-i.is-bt { --vn-i-m: var(--vn-ic-bt); } .vn-i.is-wave { --vn-i-m: var(--vn-ic-wave); }
.vn-spin { flex: none; display: block; width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--vn-tint-line); border-top-color: var(--vn-pri); }
.vn-sub { flex: none; margin: 16px 16px 6px; font-size: 12px; font-weight: 700; color: var(--vn-sub); }
.vn-file { flex: none; display: flex; gap: 10px; margin: 0 12px; padding: 11px 12px; border: 1px solid var(--vn-line); border-radius: 12px; background: var(--vn-surface); }
.vn-sync { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vn-sync__bar { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--vn-line); overflow: hidden; }
.vn-sync__bar > i { position: absolute; inset: 0; border-radius: 2px; background: var(--vn-pri); transform-origin: 0 50%; }
.vn-sync__st { position: relative; flex: none; width: 52px; height: 16px; }
.vn-sync__s { position: absolute; right: 0; top: 0; font-size: 11px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.vn-sync__s.is-ing { color: var(--vn-sub); opacity: 0; visibility: hidden; }
.vn-sync__s.is-done { color: var(--vn-cli); }

/* 상세 속 정리 중 · 요약 · 전문(화자 구분) — 같은 자리에 겹쳐 둠 */
.vn-body { position: relative; }
.vn-pane { position: absolute; left: 12px; right: 12px; top: 12px; margin: 0; }
.vn-wait { display: flex; flex-direction: column; gap: 9px; padding: 12px 13px 14px; border: 1px solid var(--vn-line-2); border-radius: 12px; background: var(--vn-surface); }
.vn-wait__h { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 12.5px; font-weight: 800; color: var(--vn-pri); }
.vn-sk { display: block; height: 8px; border-radius: 4px; background: var(--vn-line-2); }
.vn-sk:nth-of-type(2) { width: 92%; } .vn-sk:nth-of-type(3) { width: 74%; } .vn-sk:nth-of-type(4) { width: 84%; }
.vn-sum { padding: 11px 13px 11px 30px; border: 1px solid var(--vn-line-2); border-radius: 12px; background: var(--vn-surface);
  font-size: 12.5px; line-height: 1.6; list-style: disc; }
.vn-sum li + li { margin-top: 4px; }
.vn-sum li::marker { color: var(--vn-pri); }
.vn-full { display: flex; flex-direction: column; gap: 7px; }
.vn-say { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 12px 9px; border: 1px solid var(--vn-line-2); border-radius: 12px;
  background: var(--vn-surface); font-size: 12.5px; line-height: 1.55; }
.vn-who { font-size: 11px; font-weight: 800; color: var(--vn-pri); }
.vn-who.is-b { color: var(--vn-cli); }

/* 폰 공유 메뉴(OS 공유 시트) — 일반 앱 모양 · 회사 로고 0 */
.vn-scrim { position: absolute; z-index: 4; inset: 0; background: rgba(15, 18, 24, .38); }
.vn-sheet { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 8px 14px 42px;
  border-radius: 20px 20px 0 0; background: var(--vn-surface); box-shadow: 0 -8px 24px rgba(15, 18, 24, .14); }
.vn-sheet__grab { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--vn-line); }
.vn-sheet__h { display: flex; flex-direction: column; gap: 1px; margin: 2px 2px 0; }
.vn-sheet__h b { font-size: 15px; font-weight: 800; }
.vn-sheet__h span { font-size: 11.5px; color: var(--vn-sub); }
.vn-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border: 1px solid var(--vn-line-2); border-radius: 11px; background: var(--vn-bg); }
.vn-seg > span { display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--vn-sub); white-space: nowrap; }
.vn-seg > span.is-on { background: var(--vn-surface); color: var(--vn-pri); box-shadow: inset 0 0 0 1.5px var(--vn-pri-line); }
.vn-opt { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 2px; font-size: 12.5px; font-weight: 700; }
.vn-opt > span { flex: 1; min-width: 0; }
.vn-opt .vn-i { width: 17px; height: 17px; color: var(--vn-pri); }
.vn-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: var(--vn-pri); }
html[data-theme="dark"] .vn-sw { background: #4F46E5; }
.vn-sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; }
.vn-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding-top: 12px; border-top: 1px solid var(--vn-line-2); }
.vn-app { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; font-size: 11px; font-weight: 600; color: var(--vn-ink); white-space: nowrap; }
.vn-app__i { position: relative; display: block; width: 44px; height: 44px; border-radius: 13px; background: var(--vn-bg); box-shadow: inset 0 0 0 1px var(--vn-line); color: var(--vn-sub); }
.vn-app__i::before { content: ""; position: absolute; inset: 11px; background-color: currentColor;
  -webkit-mask: var(--vn-app-m) center/contain no-repeat; mask: var(--vn-app-m) center/contain no-repeat; }
.vn-app__i.is-msg { --vn-app-m: var(--vn-ic-msg); } .vn-app__i.is-mail { --vn-app-m: var(--vn-ic-mail); }
.vn-app__i.is-note { --vn-app-m: var(--vn-ic-note); } .vn-app__i.is-file { --vn-app-m: var(--vn-ic-file); }
.vn-app.is-picked .vn-app__i { color: var(--vn-pri); box-shadow: inset 0 0 0 1px var(--vn-line), 0 0 0 2.5px var(--vn-pri); }

/* 외부 녹음기(무대 안 · 「외부기기」에서만) — 폰은 왼쪽으로 비켜 섬(겹침 최소) */
.vn-stage[data-mode="ext"] .vn-phone { translate: min(0px, calc(14px - var(--stage-px))) 0; }
.vn-recdev { --rd-w: 76px; --rd-h: 170px; position: absolute; right: 10px; top: 34%; display: none; flex-direction: column; align-items: center;
  width: var(--rd-w); height: var(--rd-h); box-sizing: border-box; padding: 12px 9px 14px; border-radius: 24px;
  background: linear-gradient(180deg, #3B4049, #24282F); color: #E8EBF0;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .09), 0 12px 26px rgba(15, 18, 24, .26); }
.vn-stage[data-mode="ext"] .vn-recdev { display: flex; }
.vn-recdev__ring { position: absolute; inset: -5px; border: 2px solid var(--accent); border-radius: 28px; opacity: 0; pointer-events: none; }
.vn-recdev__mic { display: block; width: 36px; height: 16px; border-radius: 8px; opacity: .55;
  background: radial-gradient(circle, #8E96A3 1.2px, transparent 1.6px) 0 0/6px 6px; }
.vn-recdev__scr { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; margin-top: 10px; padding: 6px 0 7px; box-sizing: border-box;
  border-radius: 8px; background: #0E1116; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.vn-recdev__row { display: flex; align-items: center; gap: 6px; height: 11px; }
.vn-recdev__bt { display: block; width: 11px; height: 11px; background-color: #8FA2FF; -webkit-mask: var(--vn-ic-bt) center/contain no-repeat; mask: var(--vn-ic-bt) center/contain no-repeat; }
.vn-recdev__dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: #F0524F; opacity: 0; }
.vn-recdev__t { font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.vn-recdev__lv { display: flex; align-items: center; gap: 3px; height: 14px; margin-top: 10px; }
.vn-recdev__lv > i { display: block; width: 3px; height: 100%; border-radius: 1.5px; background: #8E96A3; transform: scaleY(.18); }
.vn-recdev__btn { position: relative; display: block; width: 34px; height: 34px; margin-top: auto; border-radius: 50%; background: #1A1D22;
  box-shadow: inset 0 0 0 2px #4C5360; }
.vn-recdev__btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #F0524F; }
@media (min-width: 1024px) and (max-width: 1279.98px) { .vn-recdev { --rd-w: 64px; --rd-h: 150px; right: 4px; } }
@media (max-width: 600.98px) { .vn-recdev { --rd-w: 60px; --rd-h: 142px; right: 4px; top: 50%; padding: 10px 7px 12px; }   /* 좁은 판 — 녹음기 화면 아래 빈 자리 위 */ .vn-recdev__t { font-size: 11.5px; } }

/* ── Loela 화면(그림 속) ───────────────────────────────────────────────── */
.lo-scr { background: var(--lo-bg); color: var(--lo-ink); font-size: 12.5px; line-height: 1.45; }
.lo-i { display: inline-block; flex: none; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: var(--lo-i-m) center/contain no-repeat; mask: var(--lo-i-m) center/contain no-repeat; }
.lo-i.is-q { --lo-i-m: var(--lo-ic-q); } .lo-i.is-cake { --lo-i-m: var(--lo-ic-cake); }
.lo-s-home, .lo-s-msg { background: var(--lo-bg); }
.lo-bar { flex: none; display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 14px 0 16px; }
.lo-logo { display: inline-flex; align-items: center; font-size: 21px; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--lo-ink); }
.lo-logo__w > span { color: var(--lo-red); }
html[data-theme="dark"] .lo-logo__w > span { color: var(--lo-red-ink); }   /* 다크 판 위 3.6 → 8.6 */
.lo-logo__mark { display: inline-block; width: 18px; height: 18px; margin-right: 6px; background-color: var(--lo-dot);
  -webkit-mask: var(--lo-ic-mark) center/contain no-repeat; mask: var(--lo-ic-mark) center/contain no-repeat; }
.lo-ask { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 9px; border: 1px solid var(--lo-line);
  border-radius: 999px; background: var(--lo-card); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.lo-ask .lo-i { width: 15px; height: 15px; color: var(--lo-sub); }
.lo-date { flex: none; margin: 2px 16px 10px; font-size: 12px; font-weight: 700; color: var(--lo-sub); }
.lo-noti { flex: none; padding: 0 12px 14px; }
.lo-today { padding: 14px 14px 14px; border-radius: 18px; background: var(--lo-card); box-shadow: 0 4px 0 var(--lo-shadow); }
.lo-today__top { display: flex; align-items: center; gap: 12px; }
.lo-today__t { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; }
.lo-today__t b { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 800; line-height: 1.3; }
.lo-today__t span { font-size: 12px; color: var(--lo-sub); }
.lo-ava { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 16px; font-weight: 800;
  background: var(--lo-ava-a); color: var(--lo-ava-a-ink); }
.lo-ava.is-b { width: 38px; height: 38px; font-size: 14.5px; background: var(--lo-ava-b); color: var(--lo-ava-b-ink); }
.lo-ava.is-c { background: var(--lo-ava-c); color: var(--lo-ava-c-ink); }
.lo-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 12px;
  font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.lo-btn.is-wide { display: flex; width: 100%; }
.lo-btn.is-fill { background: var(--lo-red); color: #FFFFFF; }
.lo-btn.is-line { border: 1.5px solid var(--lo-sub); color: var(--lo-red-ink); background: transparent; }
.lo-btn.is-text { height: 32px; color: var(--lo-red-ink); }
.lo-today .lo-btn { margin-top: 13px; }
.lo-rest { flex: 1 1 auto; min-height: 0; }
.lo-sub { margin: 4px 16px 4px; font-size: 12.5px; font-weight: 800; color: var(--lo-sub); }
.lo-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--lo-line); }
.lo-row:last-child { border-bottom: 0; }
.lo-row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; margin: 0; }
.lo-row__t b { font-size: 14px; font-weight: 800; }
.lo-row__t span { font-size: 11.5px; color: var(--lo-sub); }
.lo-dday { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--lo-sub); font-variant-numeric: tabular-nums; }
.lo-dday::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lo-dot); }

.lo-msg__in { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lo-qh { flex: none; display: flex; align-items: baseline; justify-content: space-between; padding: 16px 16px 12px; }
.lo-qh b { font-size: 19px; font-weight: 900; letter-spacing: -.03em; }
.lo-qh span { font-size: 13px; font-weight: 700; color: var(--lo-sub); font-variant-numeric: tabular-nums; }
.lo-who { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 16px; }
.lo-who__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; margin: 0; }
.lo-who__t span { font-size: 11px; color: var(--lo-sub); }
.lo-who__t b { font-size: 17px; font-weight: 700; line-height: 1.3; }
.lo-tag { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--lo-tint); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.lo-msgbox { flex: none; margin: 12px 14px 0; padding: 14px 16px; border-radius: 16px; background: var(--lo-tint); font-size: 13.5px; line-height: 1.6; }
.lo-acts { flex: none; display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: auto; padding: 0 14px 10px; }

.lo-s-sms { background: var(--ui-sms-bg); }
.lo-sms { --ui-bare-r: 0; }
.lo-sms .ui-sms__screen { background: var(--ui-sms-bg); }
.lo-sms .ui-sms__chat { gap: 8px; }
.lo-sent { display: flex; flex-direction: column; gap: 8px; }
.lo-sent .ui-day { color: var(--ui-sub); }
.lo-sms .ui-sms__field { min-height: 36px; }
.lo-typed { display: block; }