/* ==========================================================================
   ui-kit.css — 다시 그린 제품 화면 키트 (B4 · 0f 조기 납품 B4a · DESIGN 4-15 · 3-2)
   쓰는 쪽: B4 홈(히어로 판 · 역 ⑤⑥ 카드) · B5 문제 해결(연결 도식) · B7 이야기 · 앱 홈
   - 같은 클래스를 자기 CSS 에서 다시 정의하지 않는다 — 고칠 것은 자기 머리(h- · ts- · st- · vn- · lo-)로 덮는다(4-15 끝 줄).
   - 색: 3-2 의 --ui-* 는 tokens.css(B0). 이 파일은 3-2 표 밖의 그림 속 중립색 · 아이콘 원 색만 「키트 토큰」으로 둔다.
   - 테마: html[data-theme="dark"] 하나만(prefers-color-scheme 0). 움직임 0(transition · animation 0 — 모션은 쓰는 쪽 JS 가 seek(t) 로).
   - 그림 속 글자 최소 11px · 축소 transform 0 · 아이콘 = 선 SVG 1.75(24 기준) · 이모지 0 · 말줄임 0 · 그라데이션 0.
   - 나라: 한국 전용 칸에 data-kr 만 달면 core.css(B0) 규칙이 숨김 — 이 파일은 따로 하지 않음.
   - 그림 묶음은 aria-hidden="true" + 옆에 .sr-only 한 줄(쓰는 쪽).

   ── 클래스 목록 · 마크업 꼴 ────────────────────────────────────────────────
   [공통 조각]
   .ui-i[data-i]           아이콘 하나(<i class="ui-i" data-i="search"></i>) · 크기 --ui-i-s(기본 16px) · 색 = currentColor
     data-i 값: envelope phone doc pencil mobile globe search menu back plus mic up check calendar clock image
                person gear dots contacts story card headset palette power close chev chat lines checksq play
   .ui-avatar[data-c]      원 + 흰 이니셜(data-c = green|blue|purple|brown|teal · 기본 green)
   .ui-new                 「★NEW」 칩
   .ui-sec                 작은 칸 이름(「연락처 정보」 · 「메모」 · 「해야 할 일」)
   .ui-to                  「To. 김소연」 칩
   .ui-act(.is-primary|.is-on)[data-i]   맨 아래 동작 단추 — 아이콘은 순서대로 자동(기록 하기 · 전화 걸기 · 폰 전송 · 웹 전송) · data-i 로 바꿈
                           is-primary = 주황 테두리(「기록 하기」) · is-on = 눌린(상자 열린) 꼴 = --ui-orange-fill 채움
   .ui-btn(.is-fill|.is-indigo|.is-text|.is-wide)   상자 · 모달 단추(「저장하기」 · 「저장」 · 「취소」 · 「폰 메시지 전송」 · 「확인」)
   .ui-tab(.is-on)         상자 탭(「메모 · 할일 · 약속」 — 아이콘 순서대로 자동)
   .ui-pill(.is-on)        소요시간 「allDay · 30m · 1h · 2h」(is-on = 남보라)
   .ui-check(.is-on)       알림 설정 칸(「10분전」 …)
   .ui-field(.is-date|.is-time)  입력 칸 모양 · 안의 자리표시 글자는 <span class="ui-ph">
   .ui-radio(.is-on)       「즉시 발송」 · 「예약」
   .ui-seg2 > span(.is-on)[data-i]   두 칸 스위치(「폰 전송」 | 「웹 전송」)
   .ui-audio > .ui-audio__play + .ui-audio__t + .ui-audio__bar     통화 녹음 재생 줄(「0:00 / 4:08」)
   .ui-stt                 「음성인식」 칩

   [웹 스토리 판 .ui-board — 히어로 · 역 ⑥ · PC 틀 안 공용(4-15 마크업 그대로)]
   <div class="ui-board" data-variant="full|compact|still" aria-hidden="true">
     <div class="ui-board__tl">
       <div class="ui-filters"><span class="ui-fchip is-msg">메시지</span><span class="ui-fchip is-call">통화</span><span class="ui-fchip is-note">기록</span></div>
       <ol class="ui-tl" data-anchor="tl" [data-last="1..5"]>        위 = 오래된 기록 · 아래 = 최신 · data-last = 끝에서 N 개만 보임
         <li class="ui-rec is-in|is-missed|is-note|is-out|is-call" data-anchor="rec-1"><i class="ui-rec__ico"></i>
           <p class="ui-rec__head"><b>수신</b> 10월 10일 15시 2분</p><p class="ui-rec__body">…</p><p class="ui-rec__from">From 012-****-7890</p></li>
       </ol>
       <div class="ui-actions"><span class="ui-to">To. 김소연</span><span class="ui-act is-primary" data-anchor="btn-note">기록 하기</span>
         <span class="ui-act">전화 걸기</span><span class="ui-act">폰 전송</span><span class="ui-act" data-kr>웹 전송</span></div>
     </div>
     <aside class="ui-board__info">
       <div class="ui-person"><span class="ui-avatar" data-c="green">김</span><b>김소연</b><span class="ui-new">★NEW</span></div>
       <p class="ui-sec">연락처 정보</p>
       <dl class="ui-fields"><dt>이름</dt><dd>김소연</dd><dt>전화</dt><dd>012-****-7890</dd><dt>이메일</dt><dd>soyeon@example.com</dd></dl>
       <div class="ui-memo"><p class="ui-sec">메모</p><p>화요일 오후 상담 선호<br>견적서 요청 (10/10)</p></div>
       <div class="ui-todo"><p class="ui-sec">해야 할 일 <span class="ui-plus">+ 할일</span></p>
         <div class="ui-todo__row is-empty" data-anchor="todo-1">해야 할 일이 없어요</div>          처음
         <div class="ui-todo__row" data-anchor="todo-1"><i class="ui-todo__ico"></i><p class="ui-todo__txt"><b>10월 14일 (수) 오후 2:00</b><span>약속 · 방문 상담 · 1h</span></p></div>   끝 장면
       </div>
     </aside>
     <div class="ui-box" data-anchor="note-box" hidden>
       <span class="ui-to">To. 김소연</span>
       <div class="ui-box__tabs"><span class="ui-tab is-on">메모</span><span class="ui-tab">할일</span><span class="ui-tab" data-anchor="tab-appt">약속</span></div>
       <div class="ui-box__main"><p class="ui-box__input" data-anchor="note-input"><span class="ui-ph">기록할 내용을 입력하세요.</span></p><span class="ui-box__photo">사진 첨부</span></div>
       <div class="ui-box__foot"><span class="ui-btn is-fill" data-anchor="note-save">저장하기</span></div>
     </div>
     <div class="ui-box is-appt" data-anchor="appt-box" hidden>
       <p class="ui-box__title">약속 만들기<span class="ui-box__sub">김소연</span></p>
       <p class="ui-field" data-anchor="appt-title"><span class="ui-ph">내용</span></p>
       <div class="ui-box__row"><span class="ui-box__lbl">날짜</span><span class="ui-field is-date" data-anchor="appt-date">2026. 10. 14.</span><span class="ui-field is-time" data-anchor="appt-time">오후 02:00</span></div>
       <p class="ui-box__lbl">소요시간</p>
       <div class="ui-seg"><span class="ui-pill">allDay</span><span class="ui-pill">30m</span><span class="ui-pill is-on" data-anchor="appt-dur-1h">1h</span><span class="ui-pill">2h</span></div>
       <p class="ui-box__lbl">알림 설정</p>
       <div class="ui-checks"><span class="ui-check">10분전</span> … <span class="ui-check">3일 전</span></div>
       <div class="ui-box__foot"><span class="ui-btn is-text">취소</span><span class="ui-btn is-indigo" data-anchor="appt-save">저장</span></div>
     </div>
   </div>
   - 크기: full ≥1440 680×520 · 1280–1439 600×460 · ≤1279 min(416px,100%)×320(compact 꼴로 바뀜) · compact = min(416px,100%)×320
           still = 부모 크기 100%(부모가 크기를 줌) · ≤600 은 높이 auto(최소 320 — 좁은 폭에서 글자가 잘리지 않게).
   - 배치는 판 자체 너비로(container uib): ≥560 두 칸(오른쪽 칸 240 · 560–659 는 220 + 카드 여백 줄임) / <560 compact 꼴
     (오른쪽 칸 → 위 띠: 아바타 · 이름 · ★NEW · 번호 · 메모 · 해야 할 일 줄 / 필터 칩 숨김 / 기록은 늘 끝에서 2 개 / 단추 한 줄
     · <400 은 단추 아이콘 빼고 한 줄 · 해야 할 일 아이콘 뺌).
   - 판 높이가 모자라면 data-last="N"(1~5) 으로 끝 기록 N 개만 — 예: 700×470 still 은 3 · PC 틀(1040×600)은 4.
   - 기록 상자 · 약속 상자: 판 왼쪽 아래 「기록 하기」 줄 바로 위에 놓임(단추 줄이 한 줄일 때 기준 — 두 줄이면 쓰는 쪽이 잰 bottom 으로)
     — 판 너비 ≥660 360×222 · 360×286 / 560–659 320×200 · 320×260 / <560 300×200 · 300×260.
     높이는 최소값(en 처럼 글이 길면 늘어남 · 4-15). 열고 닫는 모션 · hidden 은 쓰는 쪽(home.js).
   - 판 껍데기(그림자 · 「답」 꼬리표)는 쓰는 쪽(.h-board 등) — 이 판은 바탕 · 모서리만(full · compact 24 · still 0).
     커서가 판 밖에서 들어오면 껍데기에 overflow:hidden(가로 넘침 0 — 12-1).
   - 기록 하나만 따로(U4 타임라인 · U8 통화 카드): .ui-rec · .ui-person · .ui-todo__row 를 판 밖에서 그대로 씀.
     선 · 원(.ui-rec__ico)은 .ui-tl 안에서만 그려짐. U8 통화 카드 = .ui-rec.is-call + .ui-audio + .ui-stt.

   [PC 틀 .ui-pc]
   <div class="ui-pc" aria-hidden="true">
     <div class="ui-pc__url"><span class="ui-pc__addr">www.textory.com</span></div>
     <div class="ui-pc__top"><img class="ui-pc__logo" src="/assets/brand/textory_logo_horizontal_white_h48.png" alt="" width="87" height="16">
       <span class="ui-pc__tools"><i class="ui-i" data-i="palette"></i><i class="ui-i" data-i="power"></i></span></div>
     <div class="ui-pc__body">
       <nav class="ui-rail"><span class="ui-rail__i">연락처</span><span class="ui-rail__i is-on">스토리</span><span class="ui-rail__i">스케줄</span><span class="ui-rail__i">메시지</span>
         <span class="ui-rail__gap"></span><span class="ui-rail__i">설정</span><span class="ui-rail__i">내계정</span><span class="ui-rail__i">결제</span><span class="ui-rail__i">고객센터</span></nav>
       <div class="ui-side"><p class="ui-side__h">보기</p><span class="ui-side__i is-on">스토리 전체</span><span class="ui-side__i">즐겨찾기</span> …
         <p class="ui-side__h">내 스토리</p><span class="ui-side__i">내 스토리 보기</span></div>
       <ol class="ui-list"><li class="ui-list__row is-sel"><span class="ui-avatar" data-c="green">김</span><b>김소연</b><span class="ui-list__when">10월 13일 10시 40분</span>
         <span class="ui-list__num">012-****-7890</span><span class="ui-new">★NEW</span><span class="ui-list__last">김소연님, 안녕하세요. …</span></li> …</ol>
       <div class="ui-board" data-variant="still">…</div>
     </div>
   </div>
   - 크기: ≥1280 1040×600(주소창 32 · 맨 위 바 40 · 레일 56 · 사이드 168 · 목록 232 · 판 584) · 1024–1279 100%×520 · ≤1023 100%×400
     (≤1279 = 주소창 + 판 둘레만 — 맨 위 바 · 레일 · 사이드 · 목록은 틀 밖 · 글자 축소 0).
     ≤1023 은 400 안에 들도록 카드 여백을 줄이고 끝 기록 3(data-last 1 · 2 는 그대로 · 판 너비 <560 이면 compact 꼴 2).
   - 아이콘: 레일 · 목록 미리보기는 순서 · data-i 로(레일 8칸 순서 자동). 맨 위 바 오른쪽은 아이콘만(플랜 · 크레딧 · AI 비서 0).
   - .ui-pc.is-mini(연결 도식 PC): 주소창 + <p class="ui-pc__title">스토리 전체</p> + .ui-list 두 줄(.ui-avatar · b · .ui-list__last) · 너비 --pc-w(기본 220).

   [폰 틀 — 안드로이드(아이폰 0) · 펀치홀 · 아래 「||| ○ <」]
   .ui-phone   텍스토리 앱 한 사람 스토리(내 폰). 크기 ≥1024 300×620 · ≤1023 280×580 · --dev-w/--dev-h 로 바꿈
     <div class="ui-phone" aria-hidden="true"><div class="ui-phone__screen">
       <div class="ui-sbar"><span>10:41</span></div>
       <div class="ui-phone__head"><i class="ui-i" data-i="back"></i><span class="ui-phone__ava"></span>
         <p class="ui-phone__who"><b>김소연</b><span>012-****-7890</span></p><i class="ui-i" data-i="search"></i><i class="ui-i" data-i="phone"></i><i class="ui-i" data-i="menu"></i></div>
       <div class="ui-phone__chat"><p class="ui-day">2026년 10월 13일 화요일</p>
         <div class="ui-bubble is-in"><p>…</p><time>오전 10:26</time></div><div class="ui-bubble is-out"><p>…</p><time>오전 10:40</time></div></div>
       <div class="ui-phone__input"><i class="ui-i" data-i="plus"></i><span class="ui-phone__field">메시지를 입력해주세요.</span><i class="ui-i ui-go" data-i="mic"></i><i class="ui-phone__send"></i></div>
       <div class="ui-nbar"></div></div></div>
   .ui-phone.is-shell   흰 화면 껍데기(연결 도식 「내 폰」) — 안에 .ui-sbar + .ui-app-row … + .ui-nbar
   .ui-app-row[data-app="sms|textory"]   <div class="ui-app-row" data-app="sms"><i class="ui-app-row__ico"></i><p><b>삼성 메시지</b><span>견적서 잘 받았습니다. …</span></p></div>
   .ui-sms     손님 폰 — 브랜드 · 앱 이름 없는 일반 문자 화면(흰 바탕 · 보낸 = 오른쪽 · 받은 = 왼쪽 · 입력 줄 자리표시 글자 0)
     <div class="ui-sms" aria-hidden="true"><div class="ui-sms__screen"><div class="ui-sbar"><span>10:41</span></div>
       <div class="ui-sms__head"><i class="ui-i" data-i="back"></i><span class="ui-phone__ava"></span><b>012-****-4321</b></div>
       <div class="ui-sms__chat"><div class="ui-bubble is-out"><p>…</p><time>오전 10:26</time></div></div>
       <div class="ui-sms__input"><i class="ui-i" data-i="plus"></i><span class="ui-sms__field"></span><i class="ui-sms__send"></i></div>
       <div class="ui-nbar"></div></div></div>
     Loela 처럼 문구가 들어 있는 장면은 .ui-sms__field 안에 그 문구. 다른 폰 틀 안에 화면만 넣을 때는 .ui-sms.is-bare(틀 0 · 부모 크기 100% · 모서리 --ui-bare-r).
   .is-mini    (.ui-phone · .ui-sms 공용) 연결 도식용 작은 폰 150×236 · 글자 11px · 시각은 말풍선 아래
   .ui-bubble.is-in|.is-out · .ui-day · .ui-sbar · .ui-nbar   폰 안 공용 조각(말풍선 · 날짜 구분 · 상태 줄 · 아래 줄)
   대화 칸은 아래(입력 줄 쪽)부터 쌓임 — 위부터 쌓으려면 .ui-phone__chat.is-top / .ui-sms__chat.is-top

   [메시지 전송 화면 .ui-send — 역 ⑤ 카드]
   <div class="ui-send" aria-hidden="true">
     <div class="ui-send__head"><i class="ui-send__ico"></i><b>메시지 전송</b>
       <span class="ui-seg2"><span class="is-on" data-i="mobile">폰 전송</span><span data-i="globe" data-kr>웹 전송</span></span></div>
     <div class="ui-send__body">
       <div class="ui-send__to"><p class="ui-send__lbl">받는 사람 (1명)</p><p class="ui-send__who"><span class="ui-avatar">김</span><b>김소연</b><span>012-****-7890</span></p></div>
       <div class="ui-send__compose"><p class="ui-send__lbl">메시지 내용</p><p class="ui-send__msg">김소연님, 안녕하세요. …</p>
         <p class="ui-send__opts"><span class="ui-radio is-on">즉시 발송</span><span class="ui-radio">예약</span></p>
         <span class="ui-btn is-fill is-wide" data-i="mobile">폰 메시지 전송</span></div>
     </div>
     <div class="ui-scrim" hidden></div>
     <div class="ui-modal" hidden><p class="ui-modal__head">메시지 전송</p>
       <div class="ui-modal__body"><p class="ui-modal__msg"><span class="ui-ok">전송 완료</span> 성공: 1/1건</p><span class="ui-btn is-fill">확인</span></div></div>
   </div>
   - 요금 · 바이트 · 「0원」 · 080 · AI작성 · 템플릿 단추 0(9-7). 너비 <460 은 두 칸 → 한 칸. 높이는 내용(부모가 주면 그 안).
   - 모달: .ui-scrim(뒤 판 .35) + .ui-modal(가운데 · transform 안 씀 — 쓰는 쪽이 scale 0.96→1 을 자유롭게).

   [모션 도우미 — 위치 · 크기는 쓰는 쪽 JS 가 seek(t) 로]
   .ui-cursor   SVG 화살표(흰 테두리) 22×26 · 끝점 = 왼쪽 위(2,2) · transform 은 쓰는 쪽
   .ui-press    주황 2px 누름 고리 30px · style="--p:0..1"(0 = 막 누름 · 1 = 다 퍼져 사라짐 · 기본 1 = 안 보임) · left/top = 누른 점

   판단(B4a · 10/17):
   ① 시간줄 카드는 한 열(카드 왼쪽 · 선과 원 오른쪽) — 3c1 textory-web-story-1 배치. 실제 넓은 화면은 발신 · 기록 카드가 선 오른쪽에
     놓이지만, 4-15 크기(680×520 · 600×460 · PC 판 584)에 글자 11px 이상으로 두 쪽을 넣으면 카드가 3~4줄로 늘어 판을 넘친다.
     좁은 실제 화면(9/21 memo.mp4 실캡처)도 카드가 한 열로 이어진다. 그래서 「기록」 · 「발신」도 같은 열 · 머리 낱말과 원 색으로 구분.
   ② 「기록 하기」 테두리 주황(3-2) · 눌린 꼴은 실제처럼 채움(--ui-orange-fill).
   ③ 약속 상자 「시간」 낱말: 실제 창(ux-audit 03_고객상세/03)은 「날짜」 줄에 날짜 칸 · 시간 칸을 나란히 두고 「시간」 글자가 없다 → 그대로.
   ④ 레일 · 사이드(늘 짙은 남색)의 주황 글자는 3-2 --ui-orange-text(#D8390F · 남색 위 2.6)로는 AA 미달 → 키트 토큰
     --ui-orange-on-navy #FF9A57(사이드 6.10 · 레일 4.59). 남보라 「저장」 · 「1h」 다크 채움 #7C80FF 위 흰 글자 3.29 → 글자 #14163A(5.30).
   ⑤ 앱 탭 이름 · 순서 · 글자 = loc_ko.json(4-15 글자 근거) · 06 8(a)(b) · 3c1 그림. 대비 계산 = qa/scratch_B4a/contrast_check.py.
   ========================================================================== */


/* ── 0. 키트 토큰(3-2 표 밖 · 그림 속 중립색 · 아이콘 원 · 기기 틀) ───────── */
:root{
  --ui-surface:#FFFFFF;   --ui-surface-2:#F5F6F8;  --ui-card:#FFFFFF;
  --ui-ink:#1F2A30;       --ui-ink-2:#3D4850;      --ui-sub:#5B6670;   --ui-ph:#5F6A74;
  --ui-line:#E4E7EB;      --ui-line-2:#D3D8DE;     --ui-tl-line:#D3D7DC;
  --ui-sel:#E6F1F8;       --ui-memo-line:#EFE3A6;  --ui-new-line:#C9CEF6; --ui-call-line:#BFE3CC;
  --ui-ico-msg:#4FA6DB;   --ui-ico-call:#8A6CCB;   --ui-ico-note:#FCEBC2; --ui-ico-note-ink:#8B5E00; --ui-ico-ink:#FFFFFF;
  --ui-orange-tint:#FFF1E8; --ui-orange-deep:#C2330C; --ui-orange-on-navy:#FF9A57; --ui-indigo-ink:#FFFFFF;
  --ui-chrome:#22262B;    --ui-chrome-addr:#34393F; --ui-chrome-ink:#C9CDD3;
  --ui-rail-ink:#C9CBE0;  --ui-side-ink:#E6E7F0;   --ui-side-ink-2:#C2C5D8;
  --ui-bezel:#16191C;     --ui-bezel-edge:#2E3338; --ui-punch:#06080A;
  --ui-phone-bar:#FFFFFF; --ui-phone-head:#C9E0F4; --ui-phone-sub:#3E4A54; --ui-bubble:#FFFFFF; --ui-pill:#F1F3F5;
  --ui-go:#4CAF1A;        --ui-go-ink:#3B8E2E;
  --ui-sms-bg:#FFFFFF;    --ui-sms-in:#EEF0F3;     --ui-sms-out:#DDEBFB; --ui-sms-send:#3D4850;
  --ui-audio:#F1F3F4;     --ui-scrim:rgba(15,20,24,.35);
  --ui-box-shadow:0 8px 22px rgba(31,42,48,.14), 0 1px 3px rgba(31,42,48,.08);
  --ui-frame-shadow:0 2px 6px rgba(31,42,48,.08), 0 18px 40px rgba(31,42,48,.14);

  /* 아이콘(마스크 · 24 기준 선 1.75 · 둥근 끝) — 색은 쓰는 곳의 background-color */
  --ui-ic-envelope: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' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.6 7.4 12 13l8.4-5.6'/%3E%3C/svg%3E");
  --ui-ic-phone: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='M6.6 3.5h2.6l1.5 4.1-2 1.4a12 12 0 0 0 6.3 6.3l1.4-2 4.1 1.5v2.6a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");
  --ui-ic-doc: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 3.5h6.5L18 8v11.5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-15a1 1 0 0 1 1-1z'/%3E%3Cpath d='M13.5 3.5V8H18M9 12.5h6M9 16h6'/%3E%3C/svg%3E");
  --ui-ic-pencil: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 20l1-4L16 5a2.1 2.1 0 0 1 3 3L8 19z'/%3E%3Cpath d='M14 7l3 3'/%3E%3C/svg%3E");
  --ui-ic-mobile: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' y='2.5' width='10' height='19' rx='2.2'/%3E%3Cpath d='M11 18.2h2'/%3E%3C/svg%3E");
  --ui-ic-globe: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='M3.5 12h17M12 3.3c2.4 2.4 3.6 5.3 3.6 8.7s-1.2 6.3-3.6 8.7c-2.4-2.4-3.6-5.3-3.6-8.7s1.2-6.3 3.6-8.7z'/%3E%3C/svg%3E");
  --ui-ic-search: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.8' cy='10.8' r='6.3'/%3E%3Cpath d='m15.5 15.5 4.6 4.6'/%3E%3C/svg%3E");
  --ui-ic-menu: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 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --ui-ic-back: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='M19.5 12h-15M10.5 6l-6 6 6 6'/%3E%3C/svg%3E");
  --ui-ic-plus: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 5v14M5 12h14'/%3E%3C/svg%3E");
  --ui-ic-mic: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='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3'/%3E%3C/svg%3E");
  --ui-ic-up: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='M12 19V5.5M6.5 11 12 5.5l5.5 5.5'/%3E%3C/svg%3E");
  --ui-ic-check: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ui-ic-calendar: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' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --ui-ic-clock: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.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --ui-ic-image: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='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m20.5 16-5-5-8.5 8.5'/%3E%3C/svg%3E");
  --ui-ic-person: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='8.5' r='3.7'/%3E%3Cpath d='M4.8 20.2a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
  --ui-ic-gear: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.9 11 21.2 11.1 21.2 12.9 18.9 13 17.6 16.2 19.1 17.8 17.8 19.1 16.2 17.6 13 18.9 12.9 21.2 11.1 21.2 11 18.9 7.8 17.6 6.2 19.1 4.9 17.8 6.4 16.2 5.1 13 2.8 12.9 2.8 11.1 5.1 11 6.4 7.8 4.9 6.2 6.2 4.9 7.8 6.4 11 5.1 11.1 2.8 12.9 2.8 13 5.1 16.2 6.4 17.8 4.9 19.1 6.2 17.6 7.8z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
  --ui-ic-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5.5 12h.01M12 12h.01M18.5 12h.01'/%3E%3C/svg%3E");
  --ui-ic-contacts: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='4.5' y='3.5' width='15' height='17' rx='2.5'/%3E%3Ccircle cx='12' cy='10' r='2.7'/%3E%3Cpath d='M8 16.8a4 4 0 0 1 8 0'/%3E%3C/svg%3E");
  --ui-ic-story: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='4' y='4' width='16' height='16' rx='2.5'/%3E%3Cpath d='M8 9h8M8 12.5h8M8 16h4.5'/%3E%3C/svg%3E");
  --ui-ic-card: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' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E");
  --ui-ic-headset: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 14.5V12a7.5 7.5 0 0 1 15 0v2.5'/%3E%3Crect x='3.5' y='13.5' width='4' height='6' rx='1.6'/%3E%3Crect x='16.5' y='13.5' width='4' height='6' rx='1.6'/%3E%3C/svg%3E");
  --ui-ic-palette: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 3.5a8.5 8.5 0 1 0 0 17c1.1 0 1.7-.8 1.7-1.6 0-1.3-1.1-1.6-1.1-2.7 0-1 .8-1.7 1.8-1.7h2.2a3.9 3.9 0 0 0 3.9-3.9c0-4-3.8-7.1-8.5-7.1z'/%3E%3Ccircle cx='7.8' cy='11' r='.9'/%3E%3Ccircle cx='10.5' cy='7.4' r='.9'/%3E%3Ccircle cx='15' cy='7.7' r='.9'/%3E%3C/svg%3E");
  --ui-ic-power: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 3.5V12'/%3E%3Cpath d='M7.2 6.6a7.5 7.5 0 1 0 9.6 0'/%3E%3C/svg%3E");
  --ui-ic-close: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='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
  --ui-ic-chev: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='m6.5 14.5 5.5-5.5 5.5 5.5'/%3E%3C/svg%3E");
  --ui-ic-chat: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.5h14a1.5 1.5 0 0 1 1.5 1.5v8.5a1.5 1.5 0 0 1-1.5 1.5H11l-4.5 3.5V17H5a1.5 1.5 0 0 1-1.5-1.5V7A1.5 1.5 0 0 1 5 5.5z'/%3E%3C/svg%3E");
  --ui-ic-lines: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 7h14M5 12h14M5 17h9'/%3E%3C/svg%3E");
  --ui-ic-checksq: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='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='m8.5 12.2 2.4 2.4 4.8-4.8'/%3E%3C/svg%3E");
  --ui-ic-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6L18.8 12z' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* 채운 모양에서 글자 빼기(머리 작은 원 · 체크 칸) */
  --ui-ic-dir-in:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23fff'/%3E%3Cpath d='M8 4.3v7M5.1 8.5 8 11.4l2.9-2.9' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='16' height='16' mask='url(%23m)'/%3E%3C/svg%3E");
  --ui-ic-dir-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23fff'/%3E%3Cpath d='M8 11.7v-7M5.1 7.5 8 4.6l2.9 2.9' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='16' height='16' mask='url(%23m)'/%3E%3C/svg%3E");
  --ui-ic-chkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Crect width='16' height='16' rx='3.5' fill='%23fff'/%3E%3Cpath d='m4.3 8.3 2.4 2.4 5-5' stroke='%23000' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='16' height='16' mask='url(%23m)'/%3E%3C/svg%3E");
  --ui-ic-sys:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cpath d='M1 11h2V8.5H1zM4.6 11h2V6.5h-2zM8.2 11h2V4.3h-2zM11.8 11h2V2h-2z'/%3E%3Cpath d='M23 11.2l-2-2.4a3 3 0 0 1 4 0zM19.6 7.2a5.4 5.4 0 0 1 6.8 0l-1 1.2a3.8 3.8 0 0 0-4.8 0zM17.7 4.9a8.4 8.4 0 0 1 10.6 0l-1 1.2a6.8 6.8 0 0 0-8.6 0z'/%3E%3Cpath fill-rule='evenodd' d='M33 2.5h10A1.5 1.5 0 0 1 44.5 4v4A1.5 1.5 0 0 1 43 9.5H33A1.5 1.5 0 0 1 31.5 8V4A1.5 1.5 0 0 1 33 2.5zm.2 1.3v4.4h9.6V3.8zM33.9 4.5h6.6v3h-6.6z'/%3E%3C/svg%3E");
  --ui-ic-nav:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 3.5v9M25 3.5v9M30 3.5v9'/%3E%3Crect x='74' y='2.5' width='11' height='11' rx='3.5'/%3E%3Cpath d='m133 3 -5 5 5 5'/%3E%3C/svg%3E");
  --ui-cursor-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M2.2 2.2v18.6l5.1-4.7 3.5 7.9 3.3-1.5-3.4-7.7 7-.3z' fill='%23111418' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-symbol-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 214 166' fill='none'%3E%3Cg stroke-width='20' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='%23FB4A1F' d='M102 10 H37 A27 27 0 0 0 10 37 V103 A27 27 0 0 0 37 130 H100'/%3E%3Cpath stroke='%232C3A42' d='M116 10 H177 A27 27 0 0 1 204 37 V103 A27 27 0 0 1 177 130 H130 L106 154'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="dark"]{
  --ui-surface:#23282D;   --ui-surface-2:#1D2226;  --ui-card:#2A3036;
  --ui-ink:#ECE9E4;       --ui-ink-2:#CFCBC4;      --ui-sub:#A7AEB4;   --ui-ph:#9AA4AC;
  --ui-line:#363D44;      --ui-line-2:#48515A;     --ui-tl-line:#4A525A;
  --ui-sel:#24323D;       --ui-memo-line:#4B4428;  --ui-new-line:#3D4478; --ui-call-line:#2F4C3B;
  --ui-ico-msg:#2F7FB0;   --ui-ico-call:#6B53A8;   --ui-ico-note:#4A3B1C; --ui-ico-note-ink:#F0C27A;
  --ui-orange-tint:#3A2418; --ui-orange-deep:#FF8F4D; --ui-indigo-ink:#14163A;
  --ui-bezel:#0E1012;     --ui-bezel-edge:#3A4046;
  --ui-phone-bar:#12171B; --ui-phone-head:#1A252E; --ui-phone-sub:#A9B6C0; --ui-bubble:#2C3842; --ui-pill:#232C34;
  --ui-go:#3D8F16;        --ui-go-ink:#6CC46A;
  --ui-sms-bg:#1B2024;    --ui-sms-in:#2A3036;     --ui-sms-out:#22364C; --ui-sms-send:#CFCBC4;
  --ui-audio:#1F2428;     --ui-scrim:rgba(0,0,0,.45);
  --ui-box-shadow:0 8px 22px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
  --ui-frame-shadow:0 2px 6px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.45);
  --ui-symbol-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 214 166' fill='none'%3E%3Cg stroke-width='20' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='%23FB4A1F' d='M102 10 H37 A27 27 0 0 0 10 37 V103 A27 27 0 0 0 37 130 H100'/%3E%3Cpath stroke='%23EEEAE3' d='M116 10 H177 A27 27 0 0 1 204 37 V103 A27 27 0 0 1 177 130 H130 L106 154'/%3E%3C/g%3E%3C/svg%3E");
}


/* ── 1. 바탕 · 아이콘 ───────────────────────────────────────────────────── */
:where(.ui-board,.ui-pc,.ui-phone,.ui-sms,.ui-send,.ui-rec,.ui-person,.ui-todo__row,.ui-app-row){
  box-sizing:border-box; font-family:var(--font,"Pretendard Variable",system-ui,sans-serif);
  -webkit-font-smoothing:antialiased; text-align:left; letter-spacing:-.005em;
  word-break:keep-all; overflow-wrap:anywhere;
}
:where(.ui-board,.ui-pc,.ui-phone,.ui-sms,.ui-send) *,
:where(.ui-board,.ui-pc,.ui-phone,.ui-sms,.ui-send) *::before,
:where(.ui-board,.ui-pc,.ui-phone,.ui-sms,.ui-send) *::after{ box-sizing:border-box; }
:where(.ui-board,.ui-pc,.ui-phone,.ui-sms,.ui-send) :where(p,ol,ul,dl,dd,figure){ margin:0; }
:where(.ui-board,.ui-pc,.ui-phone,.ui-sms,.ui-send,.ui-rec,.ui-todo__row,.ui-person,.ui-app-row) :where(b){ font-weight:700; }
[class*="ui-"][hidden]{ display:none !important; }

/* 아이콘: data-i → --ui-i-mask (아이콘 요소 자신 · 단추 앞 ::before 공용) */
:where([class*="ui-"],[class*="ui-"] *)[data-i="envelope"]{ --ui-i-mask:var(--ui-ic-envelope); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="phone"]{ --ui-i-mask:var(--ui-ic-phone); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="doc"]{ --ui-i-mask:var(--ui-ic-doc); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="pencil"]{ --ui-i-mask:var(--ui-ic-pencil); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="mobile"]{ --ui-i-mask:var(--ui-ic-mobile); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="globe"]{ --ui-i-mask:var(--ui-ic-globe); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="search"]{ --ui-i-mask:var(--ui-ic-search); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="menu"]{ --ui-i-mask:var(--ui-ic-menu); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="back"]{ --ui-i-mask:var(--ui-ic-back); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="plus"]{ --ui-i-mask:var(--ui-ic-plus); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="mic"]{ --ui-i-mask:var(--ui-ic-mic); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="up"]{ --ui-i-mask:var(--ui-ic-up); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="check"]{ --ui-i-mask:var(--ui-ic-check); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="calendar"]{ --ui-i-mask:var(--ui-ic-calendar); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="clock"]{ --ui-i-mask:var(--ui-ic-clock); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="image"]{ --ui-i-mask:var(--ui-ic-image); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="person"]{ --ui-i-mask:var(--ui-ic-person); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="gear"]{ --ui-i-mask:var(--ui-ic-gear); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="dots"]{ --ui-i-mask:var(--ui-ic-dots); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="contacts"]{ --ui-i-mask:var(--ui-ic-contacts); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="story"]{ --ui-i-mask:var(--ui-ic-story); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="card"]{ --ui-i-mask:var(--ui-ic-card); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="headset"]{ --ui-i-mask:var(--ui-ic-headset); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="palette"]{ --ui-i-mask:var(--ui-ic-palette); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="power"]{ --ui-i-mask:var(--ui-ic-power); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="close"]{ --ui-i-mask:var(--ui-ic-close); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="chev"]{ --ui-i-mask:var(--ui-ic-chev); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="chat"]{ --ui-i-mask:var(--ui-ic-chat); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="lines"]{ --ui-i-mask:var(--ui-ic-lines); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="checksq"]{ --ui-i-mask:var(--ui-ic-checksq); }
:where([class*="ui-"],[class*="ui-"] *)[data-i="play"]{ --ui-i-mask:var(--ui-ic-play); }

.ui-i{
  display:inline-block; flex:none; width:var(--ui-i-s,16px); height:var(--ui-i-s,16px);
  background-color:currentColor;
  -webkit-mask:var(--ui-i-mask,var(--ui-ic-dots)) center/contain no-repeat;
          mask:var(--ui-i-mask,var(--ui-ic-dots)) center/contain no-repeat;
}


/* ── 2. 공통 조각 ───────────────────────────────────────────────────────── */
.ui-avatar{
  display:inline-grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--ui-av-green); color:#FFFFFF; font-size:14px; font-weight:700; line-height:1; letter-spacing:0;
}
.ui-avatar[data-c="blue"]{ background:var(--ui-av-blue); }
.ui-avatar[data-c="purple"]{ background:var(--ui-av-purple); }
.ui-avatar[data-c="brown"]{ background:var(--ui-av-brown); }
.ui-avatar[data-c="teal"]{ background:var(--ui-av-teal); }

.ui-new{
  display:inline-flex; align-items:center; height:19px; padding:0 7px; border-radius:999px;
  background:var(--ui-new-bg); color:var(--ui-new); border:1px solid var(--ui-new-line);
  font-size:11px; font-weight:700; line-height:1; white-space:nowrap;
}
.ui-sec{ font-size:11px; font-weight:600; line-height:1.4; color:var(--ui-sub); }

.ui-to{
  display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:7px;
  background:var(--ui-call-bg); color:var(--ui-call); font-size:11.5px; font-weight:700; white-space:nowrap; line-height:1;
}

/* 맨 아래 동작 단추(순서대로 아이콘 · data-i 가 이김) */
.ui-act{
  display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px; border-radius:8px;
  background:var(--ui-card); 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;
}
.ui-act::before{
  content:""; flex:none; width:13px; height:13px; background-color:currentColor;
  -webkit-mask:var(--ui-i-mask,var(--ui-ic-pencil)) center/contain no-repeat;
          mask:var(--ui-i-mask,var(--ui-ic-pencil)) center/contain no-repeat;
}
.ui-act:not([data-i]):nth-child(1 of .ui-act){ --ui-i-mask:var(--ui-ic-pencil); }
.ui-act:not([data-i]):nth-child(2 of .ui-act){ --ui-i-mask:var(--ui-ic-phone); }
.ui-act:not([data-i]):nth-child(3 of .ui-act){ --ui-i-mask:var(--ui-ic-mobile); }
.ui-act:not([data-i]):nth-child(4 of .ui-act){ --ui-i-mask:var(--ui-ic-globe); }
.ui-act.is-primary{ border-color:var(--ui-orange); color:var(--ui-ink); }
.ui-act.is-primary::before{ background-color:var(--ui-orange); }
.ui-act.is-on{ background:var(--ui-orange-fill); border-color:var(--ui-orange-fill); color:#FFFFFF; }
.ui-act.is-on::before{ background-color:#FFFFFF; }

/* 상자 · 모달 단추 */
.ui-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px; height:28px; padding:0 14px;
  border-radius:8px; border:1px solid var(--ui-line-2); background:var(--ui-card); color:var(--ui-ink-2);
  font-size:12px; font-weight:700; line-height:1; white-space:nowrap;
}
.ui-btn[data-i]::before{
  content:""; flex:none; width:14px; height:14px; background-color:currentColor;
  -webkit-mask:var(--ui-i-mask) center/contain no-repeat; mask:var(--ui-i-mask) center/contain no-repeat;
}
.ui-btn.is-fill{ background:var(--ui-orange-fill); border-color:var(--ui-orange-fill); color:#FFFFFF; }
.ui-btn.is-indigo{ background:var(--ui-indigo); border-color:var(--ui-indigo); color:var(--ui-indigo-ink); }
.ui-btn.is-text{ background:none; border-color:transparent; padding:0 8px; }
.ui-btn.is-wide{ display:flex; width:100%; height:34px; font-size:12.5px; }

/* 상자 탭(메모 · 할일 · 약속) */
.ui-tab{
  display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 10px 0 8px; border-radius:999px;
  border:1px solid var(--ui-line-2); background:var(--ui-card); color:var(--ui-ink-2);
  font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap;
}
.ui-tab::before{
  content:""; flex:none; width:12px; height:12px; background-color:currentColor;
  -webkit-mask:var(--ui-i-mask,var(--ui-ic-lines)) center/contain no-repeat;
          mask:var(--ui-i-mask,var(--ui-ic-lines)) center/contain no-repeat;
}
.ui-tab:not([data-i]):nth-child(1 of .ui-tab){ --ui-i-mask:var(--ui-ic-lines); }
.ui-tab:not([data-i]):nth-child(2 of .ui-tab){ --ui-i-mask:var(--ui-ic-checksq); }
.ui-tab:not([data-i]):nth-child(3 of .ui-tab){ --ui-i-mask:var(--ui-ic-calendar); }
.ui-tab.is-on{ background:var(--ui-orange-tint); border-color:var(--ui-orange); color:var(--ui-orange-deep); }

/* 소요시간 알약 · 알림 칸 · 입력 칸 · 라디오 */
.ui-pill{
  display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px;
  border:1px solid var(--ui-line-2); background:var(--ui-card); color:var(--ui-ink-2);
  font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap;
}
.ui-pill.is-on{ background:var(--ui-indigo); border-color:var(--ui-indigo); color:var(--ui-indigo-ink); }
.ui-check{ display:inline-flex; align-items:center; gap:4px; font-size:11px; line-height:1.3; color:var(--ui-ink-2); white-space:nowrap; }
.ui-check::before{ content:""; flex:none; width:11px; height:11px; border:1.5px solid var(--ui-sub); border-radius:3px; }
.ui-check.is-on::before{
  border:0; background-color:var(--ui-indigo);
  -webkit-mask:var(--ui-ic-chkbox) center/contain no-repeat; mask:var(--ui-ic-chkbox) center/contain no-repeat;
}
.ui-field{
  display:flex; align-items:center; gap:6px; min-width:0; height:30px; padding:0 10px; border-radius:8px;
  border:1px solid var(--ui-line-2); background:var(--ui-card); color:var(--ui-ink);
  font-size:12px; line-height:1; white-space:nowrap;
}
.ui-field.is-date::after,.ui-field.is-time::after{
  content:""; flex:none; margin-left:auto; width:13px; height:13px; background-color:var(--ui-sub);
  -webkit-mask:var(--ui-ic-calendar) center/contain no-repeat; mask:var(--ui-ic-calendar) center/contain no-repeat;
}
.ui-field.is-time::after{ -webkit-mask-image:var(--ui-ic-clock); mask-image:var(--ui-ic-clock); }
.ui-ph{ color:var(--ui-ph); font-weight:500; }
.ui-radio{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; line-height:1.2; color:var(--ui-ink-2); white-space:nowrap; }
.ui-radio::before{ content:""; flex:none; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--ui-sub); }
.ui-radio.is-on::before{ border:4.5px solid var(--ui-orange); }

/* 두 칸 스위치(폰 전송 | 웹 전송) */
.ui-seg2{
  display:inline-flex; flex:none; gap:2px; padding:3px; border-radius:10px;
  background:var(--ui-surface-2); border:1px solid var(--ui-line);
}
.ui-seg2 > span{
  display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:7px;
  font-size:11.5px; font-weight:600; line-height:1; color:var(--ui-sub); white-space:nowrap;
}
.ui-seg2 > span[data-i]::before{
  content:""; flex:none; width:13px; height:13px; background-color:currentColor;
  -webkit-mask:var(--ui-i-mask) center/contain no-repeat; mask:var(--ui-i-mask) center/contain no-repeat;
}
.ui-seg2 > .is-on{ background:var(--ui-card); color:var(--ui-orange-text); box-shadow:0 1px 2px rgba(31,42,48,.10); }

/* 통화 녹음 재생 줄 · 음성인식 칩(U8 웹 통화 카드) */
.ui-audio{
  display:flex; align-items:center; gap:8px; height:30px; margin:8px 10px 0; padding:0 12px 0 10px;
  border-radius:15px; background:var(--ui-audio); color:var(--ui-ink-2); font-size:11.5px; font-weight:600;
}
.ui-audio__play{
  flex:none; width:12px; height:12px; background-color:currentColor;
  -webkit-mask:var(--ui-ic-play) center/contain no-repeat; mask:var(--ui-ic-play) center/contain no-repeat;
}
.ui-audio__t{ flex:none; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui-audio__bar{ position:relative; flex:1; min-width:24px; height:4px; border-radius:2px; background:var(--ui-line-2); }
.ui-audio__bar::before{ content:""; position:absolute; left:0; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--ui-ink-2); }
.ui-stt{
  display:inline-flex; align-items:center; gap:5px; height:24px; margin:8px 10px 0; padding:0 9px 0 7px;
  border-radius:999px; background:var(--ui-msg-bg); color:var(--ui-msg); font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap;
}
.ui-stt::before{
  content:""; flex:none; width:13px; height:13px; background-color:currentColor;
  -webkit-mask:var(--ui-ic-mic) center/contain no-repeat; mask:var(--ui-ic-mic) center/contain no-repeat;
}


/* ── 3. 웹 스토리 판 .ui-board ───────────────────────────────────────────── */
.ui-board{
  --ui-pad-t:16px; --ui-pad-x:16px; --ui-pad-b:14px; --ui-rec-gap:10px;
  position:relative; display:grid;
  grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr);
  container:uib / inline-size;
  background:var(--ui-surface); color:var(--ui-ink); border-radius:var(--ui-board-r,0);
  font-size:12.5px; font-weight:500; line-height:1.45;
}
/* container 는 안 너비를 0 으로 치므로(크기 격리) 줄어드는 부모 안에서도 판이 접히지 않게 「원래 너비」를 알려 둔다 */
.ui-board[data-variant="full"]{ width:680px; max-width:100%; height:520px; contain-intrinsic-inline-size:680px; --ui-board-r:var(--r-board,24px); }
.ui-board[data-variant="compact"]{ width:min(416px,100%); height:320px; contain-intrinsic-inline-size:416px; --ui-board-r:var(--r-board,24px); }
.ui-board[data-variant="still"]{ width:100%; height:100%; contain-intrinsic-inline-size:584px; }
@media (max-width:1439px){ .ui-board[data-variant="full"]{ width:600px; height:460px; contain-intrinsic-inline-size:600px; } }
@media (max-width:1279.98px){ .ui-board[data-variant="full"]{ width:min(416px,100%); height:320px; contain-intrinsic-inline-size:416px; } }
@media (max-width:600.98px){ .ui-board:is([data-variant="full"],[data-variant="compact"]){ height:auto; min-height:320px; } }

/* 왼쪽 칸: 필터 → 시간줄 → 단추 */
.ui-board__tl{
  grid-column:1; grid-row:1 / -1; min-width:0; min-height:0;
  display:flex; flex-direction:column; padding:var(--ui-pad-t) var(--ui-pad-x) var(--ui-pad-b);
}
.ui-filters{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.ui-fchip{
  --c:var(--ui-msg); --c-bg:var(--ui-msg-bg);
  display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px 0 6px; border-radius:7px;
  border:1px solid var(--c); background:var(--c-bg); color:var(--c);
  font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap;
}
.ui-fchip::before{
  content:""; flex:none; width:13px; height:13px; background-color:var(--c);
  -webkit-mask:var(--ui-ic-chkbox) center/contain no-repeat; mask:var(--ui-ic-chkbox) center/contain no-repeat;
}
.ui-fchip.is-call{ --c:var(--ui-call); --c-bg:var(--ui-call-bg); }
.ui-fchip.is-note{ --c:var(--ui-note); --c-bg:var(--ui-note-bg); }

/* 시간줄: 카드 왼쪽 · 선과 원은 오른쪽 홈(판단 ①) */
.ui-tl{
  list-style:none; margin:0; padding:0 38px 0 0;
  flex:1 1 auto; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--ui-rec-gap,10px);
}
.ui-tl[data-last="1"] > .ui-rec:not(:nth-last-child(-n+1 of .ui-rec)),
.ui-tl[data-last="2"] > .ui-rec:not(:nth-last-child(-n+2 of .ui-rec)),
.ui-tl[data-last="3"] > .ui-rec:not(:nth-last-child(-n+3 of .ui-rec)),
.ui-tl[data-last="4"] > .ui-rec:not(:nth-last-child(-n+4 of .ui-rec)),
.ui-tl[data-last="5"] > .ui-rec:not(:nth-last-child(-n+5 of .ui-rec)){ display:none; }

/* 기록 카드 */
.ui-rec{
  --ui-rec-c:var(--ui-in); --ui-ico-bg:var(--ui-ico-msg); --ui-ico-fg:var(--ui-ico-ink); --ui-ico-m:var(--ui-ic-envelope); --ui-dir:var(--ui-ic-dir-in);
  position:relative; flex:none; margin:0; list-style:none;
  background:var(--ui-card); border:1px solid var(--ui-line); border-radius:var(--r-rec,12px);
  color:var(--ui-ink); font-size:12.5px; line-height:1.45;
}
.ui-rec.is-missed{ --ui-rec-c:var(--ui-missed); --ui-ico-bg:var(--ui-ico-call); --ui-ico-m:var(--ui-ic-phone); }
.ui-rec.is-call{ --ui-ico-bg:var(--ui-ico-call); --ui-ico-m:var(--ui-ic-phone); }
.ui-rec.is-note{ --ui-rec-c:var(--ui-note); --ui-ico-bg:var(--ui-ico-note); --ui-ico-fg:var(--ui-ico-note-ink); --ui-ico-m:var(--ui-ic-doc); --ui-dir:var(--ui-ic-doc); }
.ui-rec.is-out{ --ui-rec-c:var(--ui-msg); --ui-dir:var(--ui-ic-dir-out); }
.ui-rec__head{
  display:flex; flex-wrap:wrap; align-items:center; column-gap:6px; row-gap:0; margin:0;
  padding:var(--ui-rec-hy,6px) 10px; border-bottom:1px solid var(--ui-line);
  font-size:11px; font-weight:500; line-height:1.4; color:var(--ui-sub); font-variant-numeric:tabular-nums;
}
.ui-rec__head::before{
  content:""; flex:none; width:13px; height:13px; background-color:var(--ui-rec-c);
  -webkit-mask:var(--ui-dir) center/contain no-repeat; mask:var(--ui-dir) center/contain no-repeat;
}
.ui-rec__head b{ font-weight:700; color:var(--ui-rec-c); }
.ui-rec__body{ margin:0; padding:var(--ui-rec-by,7px) 10px 0; font-size:12.5px; line-height:1.45; color:var(--ui-ink); }
.ui-rec__body:last-child{ padding-bottom:var(--ui-rec-bb,9px); }
.ui-rec__from{ margin:0; padding:var(--ui-rec-ft,3px) 10px var(--ui-rec-fb,8px); font-size:11px; line-height:1.35; color:var(--ui-sub); font-variant-numeric:tabular-nums; }
.ui-rec > .ui-stt:last-child{ margin-bottom:9px; }
.ui-rec__ico{ display:none; }
/* .ui-tl 안에서만: 원(선 위) + 선 조각 */
.ui-tl > .ui-rec > .ui-rec__ico{
  display:block; position:absolute; z-index:1; top:5px; left:calc(100% + 8px);
  width:26px; height:26px; border-radius:50%; background:var(--ui-ico-bg);
}
.ui-tl > .ui-rec > .ui-rec__ico::before{
  content:""; position:absolute; inset:6px; background-color:var(--ui-ico-fg);
  -webkit-mask:var(--ui-ico-m) center/contain no-repeat; mask:var(--ui-ico-m) center/contain no-repeat;
}
.ui-tl > .ui-rec::after{
  content:""; position:absolute; top:-1px; bottom:calc(-1px - var(--ui-rec-gap,10px)); left:calc(100% + 20px);
  width:2px; background:var(--ui-tl-line);
}
.ui-tl > .ui-rec:nth-last-child(1 of .ui-rec)::after{ bottom:-1px; }

/* 단추 줄: 「To」 한 줄 + 단추 한 줄(오른쪽 맞춤) */
.ui-actions{
  display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:0 6px;
  margin-top:12px; flex:none;
}
.ui-actions::before{ content:""; order:1; flex-basis:100%; height:0; }
.ui-actions > .ui-to{ order:0; margin:0 auto 6px 0; }
.ui-actions > .ui-act{ order:2; }

/* 오른쪽 칸(연락처) */
.ui-board__info{
  grid-column:2; grid-row:1 / -1; width:240px; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; padding:18px 16px 14px; border-left:1px solid var(--ui-line);
}
.ui-person{
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; row-gap:3px;
  align-items:center; color:var(--ui-ink);
}
.ui-person > .ui-avatar{ grid-row:1 / span 2; }
.ui-person > b{ grid-column:2; font-size:15px; font-weight:700; line-height:1.25; letter-spacing:-.01em; }
.ui-person > .ui-new{ grid-column:2; justify-self:start; }
.ui-board__info > .ui-sec{ margin:16px 0 7px; }
.ui-fields{
  display:grid; grid-template-columns:42px minmax(0,1fr); gap:6px 8px; margin:0;
  font-size:11.5px; line-height:1.35;
}
.ui-fields dt{ color:var(--ui-sub); font-weight:500; }
.ui-fields dd{ margin:0; color:var(--ui-ink); font-weight:500; overflow-wrap:anywhere; }
.ui-memo{ margin-top:14px; }
.ui-memo > .ui-sec{ margin:0 0 6px; }
.ui-memo > p:not(.ui-sec){
  margin:0; padding:8px 10px; border-radius:8px; background:var(--ui-memo); color:var(--ui-memo-ink);
  border:1px solid var(--ui-memo-line); font-size:12px; line-height:1.5;
}
.ui-todo{ margin-top:14px; }
.ui-todo > .ui-sec{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0;
  font-size:12px; font-weight:700; color:var(--ui-ink);
}
.ui-plus{
  display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px;
  background:var(--ui-call-bg); color:var(--ui-call); border:1px solid var(--ui-call-line);
  font-size:11px; font-weight:700; line-height:1; white-space:nowrap;
}
.ui-todo__row{
  display:flex; align-items:center; gap:9px; min-height:50px; margin-top:8px; padding:8px 10px;
  border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-card); color:var(--ui-ink);
  font-size:12px; line-height:1.4;
}
.ui-todo__row.is-empty{
  justify-content:center; gap:5px; border-style:dashed; color:var(--ui-sub); font-size:11.5px; font-weight:500;
}
.ui-todo__row.is-empty::before{
  content:""; flex:none; width:12px; height:12px; background-color:currentColor;
  -webkit-mask:var(--ui-ic-check) center/contain no-repeat; mask:var(--ui-ic-check) center/contain no-repeat;
}
.ui-todo__ico{
  position:relative; flex:none; width:28px; height:28px; border-radius:8px; background:var(--ui-note-bg);
}
.ui-todo__ico::before{
  content:""; position:absolute; inset:6px; background-color:var(--ui-orange);
  -webkit-mask:var(--ui-ic-calendar) center/contain no-repeat; mask:var(--ui-ic-calendar) center/contain no-repeat;
}
.ui-todo__txt{ display:flex; flex-direction:column; gap:1px; margin:0; min-width:0; }
.ui-todo__txt b{ font-size:12.5px; font-weight:700; color:var(--ui-ink); font-variant-numeric:tabular-nums; }
.ui-todo__txt span{ font-size:11.5px; color:var(--ui-sub); }

/* 기록 상자 · 약속 상자(「기록 하기」 줄 바로 위) */
.ui-box{
  position:absolute; z-index:3; left:var(--ui-pad-x); bottom:calc(var(--ui-pad-b) + 34px);
  width:360px; max-width:calc(100% - 2 * var(--ui-pad-x)); min-height:222px;
  display:flex; flex-direction:column; gap:8px; padding:10px 12px 12px;
  background:var(--ui-card); border:1.5px solid var(--ui-orange); border-radius:12px; box-shadow:var(--ui-box-shadow);
  color:var(--ui-ink); font-size:12px; line-height:1.45;
}
.ui-box > .ui-to{ align-self:flex-start; height:22px; }
.ui-box__tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.ui-box__main{ flex:1 1 auto; display:flex; gap:10px; min-height:62px; }
.ui-box__input{ flex:1; min-width:0; margin:0; padding:2px 2px 0; font-size:12.5px; line-height:1.5; color:var(--ui-ink); }
.ui-box__photo{
  flex:none; width:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:8px 4px; border:1px dashed var(--ui-line-2); border-radius:8px;
  font-size:11px; font-weight:600; line-height:1.3; color:var(--ui-sub); text-align:center; white-space:nowrap;
}
.ui-box__photo::before{
  content:""; flex:none; width:16px; height:16px; background-color:currentColor;
  -webkit-mask:var(--ui-ic-image) center/contain no-repeat; mask:var(--ui-ic-image) center/contain no-repeat;
}
.ui-box__foot{ display:flex; justify-content:flex-end; align-items:center; gap:6px; margin-top:auto; }
.ui-box.is-appt{ min-height:286px; gap:7px; padding:12px 14px; border-color:var(--ui-line-2); }
.ui-box__title{ margin:0 0 2px; font-size:13.5px; font-weight:700; line-height:1.3; color:var(--ui-ink); }
.ui-box__sub{ display:block; margin-top:1px; font-size:11px; font-weight:500; color:var(--ui-sub); }
.ui-box__row{ display:flex; align-items:center; gap:6px; }
.ui-box__row > .ui-field{ flex:1 1 0; }
.ui-box__row > .ui-field.is-time{ flex:0 1 112px; }
.ui-box__lbl{ flex:none; margin:0; font-size:11px; font-weight:600; line-height:1.3; color:var(--ui-sub); }
.ui-seg{ display:flex; flex-wrap:wrap; gap:5px; }
.ui-checks{ display:flex; flex-wrap:wrap; gap:4px 9px; }

/* 판 너비 560–659(1280–1439 full · PC 틀 안 still) — 칸 너비만 줄임 · 글자 그대로 */
@container uib (max-width:659px){
  .ui-board__info{ width:220px; padding:16px 14px 12px; }
  .ui-board__tl{ --ui-rec-gap:6px; --ui-rec-hy:5px; --ui-rec-by:5px; --ui-rec-bb:7px; --ui-rec-ft:2px; --ui-rec-fb:6px; padding:10px 14px 10px; }
  .ui-filters{ margin-bottom:8px; }
  .ui-fchip{ height:22px; }
  .ui-actions{ margin-top:8px; }
  .ui-actions > .ui-to{ margin-bottom:5px; }
  .ui-box{ left:14px; bottom:44px; width:320px; min-height:200px; gap:7px; }
  .ui-box.is-appt{ min-height:260px; gap:6px; padding:10px 12px; }
  .ui-board__info > .ui-sec{ margin:14px 0 6px; }
  .ui-memo,.ui-todo{ margin-top:12px; }
  .ui-todo__row{ gap:7px; padding:7px 8px; }
  .ui-todo__ico{ width:24px; height:24px; }
  .ui-todo__ico::before{ inset:5px; }
  .ui-todo__txt b{ font-size:12px; }
}
/* 판 너비 <560 = compact 꼴: 오른쪽 칸 → 위 띠 · 필터 숨김 · 끝 기록 2 · 단추 한 줄 */
@container uib (max-width:559px){
  .ui-board__info{
    grid-column:1 / -1; grid-row:1; width:auto; border-left:0; border-bottom:1px solid var(--ui-line);
    padding:7px 14px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
    grid-template-areas:"person phone" "memo todo"; gap:6px 10px; align-items:start;
  }
  .ui-board__tl{ --ui-rec-gap:6px; --ui-rec-hy:5px; --ui-rec-by:5px; --ui-rec-bb:7px; --ui-rec-ft:2px; --ui-rec-fb:6px; grid-column:1 / -1; grid-row:2; padding:8px 14px 8px; }
  .ui-person{ grid-area:person; grid-template-columns:auto auto auto; grid-template-rows:auto; column-gap:7px; align-self:center; }
  .ui-person > .ui-avatar{ grid-row:auto; width:28px; height:28px; font-size:12.5px; }
  .ui-person > b{ grid-column:auto; font-size:14px; white-space:nowrap; }
  .ui-person > .ui-new{ grid-column:auto; }
  .ui-board__info > .ui-sec{ display:none; }
  .ui-fields{ grid-area:phone; display:block; align-self:center; justify-self:end; font-size:12px; }
  .ui-fields > *{ display:none; }
  .ui-fields > dd:nth-of-type(2){ display:block; font-weight:600; color:var(--ui-ink-2); white-space:nowrap; }
  .ui-memo{ grid-area:memo; margin:0; }
  .ui-memo > .ui-sec{ display:none; }
  .ui-memo > p:not(.ui-sec){ padding:5px 9px; font-size:11.5px; line-height:1.45; }
  .ui-todo{ grid-area:todo; margin:0; }
  .ui-todo > .ui-sec{ display:none; }
  .ui-todo__row{ margin:0; min-height:44px; padding:6px 9px; gap:8px; }
  .ui-todo__ico{ width:24px; height:24px; }
  .ui-todo__ico::before{ inset:5px; }
  .ui-todo__txt b{ font-size:12px; }
  .ui-todo__txt span{ font-size:11px; }
  .ui-filters{ display:none; }
  .ui-tl > .ui-rec:not(:nth-last-child(-n+2 of .ui-rec)){ display:none; }   /* compact = 끝 기록 2(data-last 가 더 크면 2 · 1 이면 1) */
  .ui-actions{ margin-top:7px; row-gap:6px; }
  .ui-actions::before{ display:none; }
  .ui-actions > .ui-to{ margin:0 auto 0 0; }
  .ui-act{ gap:4px; padding:0 7px; font-size:11px; }
  .ui-act::before{ width:12px; height:12px; }
  .ui-box{ left:14px; bottom:41px; width:300px; min-height:200px; gap:7px; padding:9px 11px 11px; }
  .ui-box.is-appt{ min-height:260px; gap:6px; padding:10px 12px; }
  .ui-box__photo{ width:80px; }
}
/* 판 너비 <400(폰 폭): 띠를 세로로 · 단추 작게 */
@container uib (max-width:399px){
  .ui-board__info{ padding:8px 12px; }
  .ui-board__tl{ padding:8px 12px 8px; }
  .ui-todo__ico{ display:none; }
  .ui-tl{ padding-right:34px; }
  .ui-tl > .ui-rec > .ui-rec__ico{ left:calc(100% + 6px); width:24px; height:24px; }
  .ui-tl > .ui-rec::after{ left:calc(100% + 17px); }
  .ui-act{ padding:0 8px; }
  .ui-act::before{ display:none; }   /* 폰 폭 판: 단추 아이콘을 빼고 한 줄(이름 · 순서 그대로) — 판단 */
  .ui-box{ left:12px; width:calc(100% - 24px); }
}


/* ── 4. PC 틀 .ui-pc ────────────────────────────────────────────────────── */
.ui-pc{
  --pc-w:1040px; --pc-h:600px;
  position:relative; display:grid; grid-template-rows:32px 40px minmax(0,1fr);
  width:var(--pc-w); max-width:100%; height:var(--pc-h); overflow:hidden;
  border-radius:14px; background:var(--ui-surface); color:var(--ui-ink);
  box-shadow:var(--ui-frame-shadow); font-size:12.5px; line-height:1.45;
}
.ui-pc__url{ display:flex; align-items:center; gap:14px; padding:0 14px; background:var(--ui-chrome); min-width:0; }
.ui-pc__url::before{
  content:""; flex:none; width:9px; height:9px; margin-right:20px; border-radius:50%; background:#5A6068;
  box-shadow:14px 0 0 #5A6068, 28px 0 0 #5A6068;
}
.ui-pc__addr{
  display:inline-flex; align-items:center; height:20px; padding:0 12px; border-radius:6px;
  background:var(--ui-chrome-addr); color:var(--ui-chrome-ink); font-size:11.5px; font-weight:500; letter-spacing:.01em; white-space:nowrap;
}
.ui-pc__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px 0 16px; background:var(--ui-pc-top); }
.ui-pc__logo{ display:block; height:16px; width:auto; }
.ui-pc__tools{ display:flex; align-items:center; gap:14px; color:#C9CBE0; }
.ui-pc__tools .ui-i{ --ui-i-s:16px; }
.ui-pc__body{ display:grid; grid-template-columns:56px 168px 232px minmax(0,1fr); min-height:0; }
.ui-pc__body > .ui-board{ min-width:0; }

/* 레일(순서대로 아이콘: 연락처 · 스토리 · 스케줄 · 메시지 / 설정 · 내계정 · 결제 · 고객센터) */
.ui-rail{ display:flex; flex-direction:column; min-height:0; padding:4px 0 6px; background:var(--ui-pc-rail); }
.ui-rail__gap{ flex:1; }
.ui-rail__i{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px 7px;
  font-size:11px; font-weight:600; line-height:1.15; color:var(--ui-rail-ink); white-space:nowrap; letter-spacing:-.02em;
}
.ui-rail__i::before{
  content:""; width:18px; height:18px; background-color:currentColor;
  -webkit-mask:var(--ui-i-mask,var(--ui-ic-story)) center/contain no-repeat; mask:var(--ui-i-mask,var(--ui-ic-story)) center/contain no-repeat;
}
.ui-rail__i:not([data-i]):nth-child(1 of .ui-rail__i){ --ui-i-mask:var(--ui-ic-contacts); }
.ui-rail__i:not([data-i]):nth-child(2 of .ui-rail__i){ --ui-i-mask:var(--ui-ic-story); }
.ui-rail__i:not([data-i]):nth-child(3 of .ui-rail__i){ --ui-i-mask:var(--ui-ic-calendar); }
.ui-rail__i:not([data-i]):nth-child(4 of .ui-rail__i){ --ui-i-mask:var(--ui-ic-envelope); }
.ui-rail__i:not([data-i]):nth-child(5 of .ui-rail__i){ --ui-i-mask:var(--ui-ic-gear); }
.ui-rail__i:not([data-i]):nth-child(6 of .ui-rail__i){ --ui-i-mask:var(--ui-ic-person); }
.ui-rail__i:not([data-i]):nth-child(7 of .ui-rail__i){ --ui-i-mask:var(--ui-ic-card); }
.ui-rail__i:not([data-i]):nth-child(8 of .ui-rail__i){ --ui-i-mask:var(--ui-ic-headset); }
.ui-rail__i.is-on{ background:var(--ui-pc-side); color:var(--ui-orange-on-navy); }
.ui-rail__i.is-on::after{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:0 2px 2px 0; background:var(--ui-orange); }

/* 사이드 */
.ui-side{ display:flex; flex-direction:column; min-height:0; padding:10px 0; background:var(--ui-pc-side); }
.ui-side__h{
  display:flex; align-items:center; justify-content:space-between; margin:0; padding:8px 12px 8px 16px;
  font-size:12px; font-weight:700; line-height:1.3; color:var(--ui-side-ink);
}
.ui-side__h::after{
  content:""; width:13px; height:13px; background-color:var(--ui-rail-ink);
  -webkit-mask:var(--ui-ic-chev) center/contain no-repeat; mask:var(--ui-ic-chev) center/contain no-repeat;
}
.ui-side__h:not(:first-child){ margin-top:12px; border-top:1px solid rgba(255,255,255,.08); padding-top:16px; }
.ui-side__i{
  position:relative; display:block; padding:6px 12px 6px 26px;
  font-size:12px; font-weight:500; line-height:1.35; color:var(--ui-side-ink-2); white-space:nowrap;
}
.ui-side__i.is-on{ color:var(--ui-orange-on-navy); font-weight:700; }
.ui-side__i.is-on::before{ content:""; position:absolute; left:15px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--ui-orange-on-navy); }

/* 목록 */
.ui-list{ list-style:none; margin:0; padding:0; min-height:0; overflow:hidden; background:var(--ui-surface); border-right:1px solid var(--ui-line); }
.ui-list__row{
  position:relative; display:grid; grid-template-columns:34px minmax(0,1fr) auto;
  grid-template-areas:"av name when" "av num num" "av new new" "av last last";
  column-gap:9px; row-gap:3px; padding:11px 10px 11px 12px; border-bottom:1px solid var(--ui-line);
}
.ui-list__row > .ui-avatar{ grid-area:av; width:34px; height:34px; font-size:13px; align-self:start; margin-top:1px; }
.ui-list__row > b{ grid-area:name; font-size:13.5px; font-weight:700; line-height:1.3; color:var(--ui-ink); white-space:nowrap; }
.ui-list__when{ grid-area:when; align-self:center; font-size:11px; color:var(--ui-sub); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ui-list__num{ grid-area:num; font-size:12px; font-weight:700; line-height:1.3; color:var(--ui-ink-2); font-variant-numeric:tabular-nums; }
.ui-list__row > .ui-new{ grid-area:new; justify-self:start; }
.ui-list__last{ grid-area:last; display:flex; align-items:flex-start; gap:5px; font-size:11.5px; line-height:1.4; color:var(--ui-sub); }
.ui-list__last::before{
  content:""; flex:none; width:12px; height:12px; margin-top:2px; background-color:currentColor;
  -webkit-mask:var(--ui-i-mask,var(--ui-ic-envelope)) center/contain no-repeat; mask:var(--ui-i-mask,var(--ui-ic-envelope)) center/contain no-repeat;
}
.ui-list__row.is-sel{ background:var(--ui-sel); }
.ui-list__row.is-sel::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ui-orange); }

/* ≤1279: 주소창 + 판 둘레만(틀 너비 × 520 · ≤1023 × 400) */
@media (max-width:1279.98px){
  .ui-pc:not(.is-mini){ --pc-w:100%; --pc-h:520px; grid-template-rows:32px minmax(0,1fr); }
  .ui-pc:not(.is-mini) > .ui-pc__top,
  .ui-pc:not(.is-mini) .ui-rail,
  .ui-pc:not(.is-mini) .ui-side,
  .ui-pc:not(.is-mini) .ui-list{ display:none; }
  .ui-pc:not(.is-mini) > .ui-pc__body{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1023.98px){
  .ui-pc:not(.is-mini){ --pc-h:400px; }
  /* 400 높이 안에 판이 들어가게: 카드 여백을 줄이고 끝 기록 3(data-last 1 · 2 는 그대로) — 판단 */
  .ui-pc:not(.is-mini) .ui-board__tl{ --ui-rec-gap:6px; --ui-rec-hy:5px; --ui-rec-by:5px; --ui-rec-bb:7px; --ui-rec-ft:2px; --ui-rec-fb:6px; }
  .ui-pc:not(.is-mini) .ui-tl:not([data-last="1"]):not([data-last="2"]) > .ui-rec:not(:nth-last-child(-n+3 of .ui-rec)){ display:none; }
}

/* 작은 PC(연결 도식): 주소창 + 「스토리 전체」 목록 두 줄 */
.ui-pc.is-mini{ --pc-w:220px; height:auto; grid-template-rows:auto auto; border-radius:10px; }
.ui-pc.is-mini .ui-pc__url{ height:22px; gap:8px; padding:0 8px; }
.ui-pc.is-mini .ui-pc__url::before{ width:6px; height:6px; margin-right:12px; box-shadow:9px 0 0 #5A6068, 18px 0 0 #5A6068; }
.ui-pc.is-mini .ui-pc__addr{ height:15px; padding:0 8px; font-size:11px; border-radius:4px; }
.ui-pc.is-mini .ui-pc__body{ display:block; padding:6px 0 2px; }
.ui-pc__title{ margin:0; padding:2px 10px 6px; font-size:11.5px; font-weight:700; line-height:1.3; color:var(--ui-ink); border-bottom:1px solid var(--ui-line); }
.ui-pc.is-mini .ui-list{ border-right:0; }
.ui-pc.is-mini .ui-list__row{ grid-template-columns:20px minmax(0,1fr); grid-template-areas:"av name" "av last"; column-gap:7px; row-gap:1px; padding:6px 10px; }
.ui-pc.is-mini .ui-list__row:last-child{ border-bottom:0; }
.ui-pc.is-mini .ui-list__row > .ui-avatar{ width:20px; height:20px; font-size:11px; }
.ui-pc.is-mini .ui-list__row > b{ font-size:11.5px; }
.ui-pc.is-mini :is(.ui-list__when,.ui-list__num,.ui-new){ display:none; }
.ui-pc.is-mini .ui-list__last{ font-size:11px; }
.ui-pc.is-mini .ui-list__last::before{ display:none; }


/* ── 5. 폰 틀(안드로이드) .ui-phone · .ui-sms ─────────────────────────────── */
.ui-phone,.ui-sms{
  --dev-w:300px; --dev-h:620px; --dev-pad:9px; --dev-r:40px;
  position:relative; flex:none; width:var(--dev-w); height:var(--dev-h); padding:var(--dev-pad);
  border-radius:var(--dev-r); background:var(--ui-bezel);
  box-shadow:inset 0 0 0 1.5px var(--ui-bezel-edge), var(--ui-frame-shadow);
  color:var(--ui-ink); font-size:13px; line-height:1.45;
}
@media (max-width:1023.98px){ .ui-phone,.ui-sms{ --dev-w:280px; --dev-h:580px; } }
:is(.ui-phone__screen,.ui-sms__screen){
  position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden;
  border-radius:calc(var(--dev-r) - var(--dev-pad)); background:var(--ui-phone-bg);
}
.ui-sms__screen,.ui-phone.is-shell .ui-phone__screen{ background:var(--ui-sms-bg); }
:is(.ui-phone__screen,.ui-sms__screen)::before{
  content:""; position:absolute; z-index:2; top:8px; left:50%; width:10px; height:10px; margin-left:-5px;
  border-radius:50%; background:var(--ui-punch);
}
/* 상태 줄 · 아래 줄 */
.ui-sbar{
  flex:none; display:flex; align-items:center; justify-content:space-between; height:28px; padding:0 18px 0 20px;
  background:var(--ui-phone-bar); color:var(--ui-ink); font-size:12px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
}
.ui-sbar::after{
  content:""; width:40px; height:11px; background-color:currentColor;
  -webkit-mask:var(--ui-ic-sys) right center/contain no-repeat; mask:var(--ui-ic-sys) right center/contain no-repeat;
}
.ui-nbar{
  flex:none; height:34px; background-color:var(--ui-phone-bar); position:relative;
}
.ui-nbar::before{
  content:""; position:absolute; inset:0; background-color:var(--ui-sub);
  -webkit-mask:var(--ui-ic-nav) center/150px 15px no-repeat; mask:var(--ui-ic-nav) center/150px 15px no-repeat;
}
/* 텍스토리 앱 한 사람 스토리 */
.ui-phone__head{
  flex:none; display:flex; align-items:center; gap:8px; padding:9px 12px 9px 10px;
  background:var(--ui-phone-head); color:var(--ui-ink);
}
.ui-phone__head > .ui-i{ --ui-i-s:18px; }
.ui-phone__ava{
  position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:#AAB4BE;
}
.ui-phone__ava::before{
  content:""; position:absolute; inset:7px; background-color:#FFFFFF;
  -webkit-mask:var(--ui-ic-person) center/contain no-repeat; mask:var(--ui-ic-person) center/contain no-repeat;
}
.ui-phone__who{ flex:1; min-width:0; display:flex; flex-direction:column; margin:0; line-height:1.25; }
.ui-phone__who b{ font-size:14px; font-weight:700; }
.ui-phone__who span{ font-size:11.5px; color:var(--ui-phone-sub); font-variant-numeric:tabular-nums; }
.ui-phone__chat,.ui-sms__chat{
  flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  gap:10px; padding:12px 12px 14px;
}
:is(.ui-phone__chat,.ui-sms__chat).is-top{ justify-content:flex-start; }
.ui-day{ align-self:center; margin:0 0 2px; font-size:11.5px; font-weight:700; line-height:1.3; color:var(--ui-phone-sub); }
.ui-bubble{ display:flex; align-items:flex-end; gap:6px; max-width:100%; }
.ui-bubble.is-in{ align-self:flex-start; }
.ui-bubble.is-out{ align-self:flex-end; flex-direction:row-reverse; }
.ui-bubble > p{
  max-width:194px; margin:0; padding:9px 11px; border-radius:12px; background:var(--ui-bubble); color:var(--ui-ink);
  font-size:13px; line-height:1.45; box-shadow:0 1px 1px rgba(31,42,48,.06);
}
.ui-bubble > time{ flex:none; font-size:11px; line-height:1.3; color:var(--ui-phone-sub); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ui-phone__input,.ui-sms__input{
  flex:none; display:flex; align-items:center; gap:8px; padding:8px 10px 8px 12px;
  background:var(--ui-phone-bar); color:var(--ui-sub);
}
.ui-phone__input > .ui-i,.ui-sms__input > .ui-i{ --ui-i-s:18px; }
.ui-phone__field,.ui-sms__field{
  flex:1; min-width:0; display:flex; align-items:center; min-height:34px; padding:7px 12px; border-radius:17px;
  background:var(--ui-pill); color:var(--ui-ph); font-size:12.5px; line-height:1.35;
}
.ui-go{ color:var(--ui-go-ink); }
.ui-phone__send,.ui-sms__send{
  position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:var(--ui-go);
}
.ui-phone__send::before,.ui-sms__send::before{
  content:""; position:absolute; inset:8px; background-color:#FFFFFF;
  -webkit-mask:var(--ui-ic-up) center/contain no-repeat; mask:var(--ui-ic-up) center/contain no-repeat;
}
/* 손님 폰(일반 문자 화면 · 브랜드 0) */
.ui-sms__head{
  flex:none; display:flex; align-items:center; gap:8px; padding:9px 12px 9px 10px;
  border-bottom:1px solid var(--ui-line); background:var(--ui-sms-bg); color:var(--ui-ink);
}
.ui-sms__head > .ui-i{ --ui-i-s:18px; }
.ui-sms__head > b{ min-width:0; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.ui-sms__screen .ui-phone__ava{ background:#B8C0C8; }
.ui-sms .ui-bubble.is-in > p{ background:var(--ui-sms-in); box-shadow:none; }
.ui-sms .ui-bubble.is-out > p{ background:var(--ui-sms-out); box-shadow:none; }
.ui-sms .ui-bubble > time{ color:var(--ui-sub); }
.ui-sms__input{ background:var(--ui-sms-bg); border-top:1px solid var(--ui-line); }
.ui-sms__field{ color:var(--ui-ink); }
.ui-sms__send{ background:var(--ui-sms-send); }
.ui-sms__send::before{ background-color:var(--ui-sms-bg); }
.ui-sms .ui-sbar,.ui-sms .ui-nbar{ background-color:var(--ui-sms-bg); }
/* 틀 없이 화면만(다른 폰 틀 안에 넣을 때) */
.ui-sms.is-bare{ width:100%; height:100%; padding:0; border-radius:var(--ui-bare-r,0); background:none; box-shadow:none; }   /* 모서리 = 부모 틀이 --ui-bare-r 로 */
.ui-sms.is-bare > .ui-sms__screen{ border-radius:inherit; }
.ui-sms.is-bare > .ui-sms__screen::before{ display:none; }
/* 앱 행(연결 도식 「내 폰」) */
.ui-app-row{
  display:flex; align-items:flex-start; gap:9px; padding:9px 12px; border-bottom:1px solid var(--ui-line);
  background:var(--ui-sms-bg); color:var(--ui-ink); font-size:12px; line-height:1.4;
}
.ui-app-row__ico{
  position:relative; flex:none; width:30px; height:30px; border-radius:50%; background:var(--ui-msg-bg);
}
.ui-app-row__ico::before{
  content:""; position:absolute; inset:7px; background-color:var(--ui-msg);
  -webkit-mask:var(--ui-ic-chat) center/contain no-repeat; mask:var(--ui-ic-chat) center/contain no-repeat;
}
.ui-app-row[data-app="textory"] .ui-app-row__ico{ background:var(--ui-card); box-shadow:inset 0 0 0 1px var(--ui-line-2); }
.ui-app-row[data-app="textory"] .ui-app-row__ico::before{
  inset:8px 6px; background:var(--ui-symbol-img) center/contain no-repeat; -webkit-mask:none; mask:none;
}
.ui-app-row > p{ display:flex; flex-direction:column; gap:1px; min-width:0; margin:0; }
.ui-app-row > p > b{ font-size:12px; font-weight:700; }
.ui-app-row > p > span{ font-size:11.5px; color:var(--ui-sub); }
/* 작은 폰(연결 도식) */
:is(.ui-phone,.ui-sms).is-mini{ --dev-w:150px; --dev-h:236px; --dev-pad:5px; --dev-r:22px; font-size:11px; }
@media (max-width:1023.98px){ :is(.ui-phone,.ui-sms).is-mini{ --dev-w:150px; --dev-h:236px; } }
:is(.ui-phone,.ui-sms).is-mini :is(.ui-phone__screen,.ui-sms__screen)::before{ top:5px; width:6px; height:6px; margin-left:-3px; }
:is(.ui-phone,.ui-sms).is-mini .ui-sbar{ height:16px; padding:0 9px 0 11px; font-size:11px; }
:is(.ui-phone,.ui-sms).is-mini .ui-sbar::after{ width:26px; height:8px; }
:is(.ui-phone,.ui-sms).is-mini .ui-nbar{ height:16px; }
:is(.ui-phone,.ui-sms).is-mini .ui-nbar::before{ -webkit-mask-size:96px 10px; mask-size:96px 10px; }
:is(.ui-phone,.ui-sms).is-mini :is(.ui-phone__head,.ui-sms__head){ gap:3px; padding:4px 6px; }
:is(.ui-phone,.ui-sms).is-mini :is(.ui-phone__head,.ui-sms__head) > .ui-i{ --ui-i-s:12px; }
:is(.ui-phone,.ui-sms).is-mini .ui-phone__ava{ width:14px; height:14px; }
:is(.ui-phone,.ui-sms).is-mini .ui-phone__ava::before{ inset:3px; }
:is(.ui-phone,.ui-sms).is-mini :is(.ui-sms__head > b,.ui-phone__who b){ font-size:11px; white-space:nowrap; letter-spacing:-.01em; }
:is(.ui-phone,.ui-sms).is-mini :is(.ui-phone__chat,.ui-sms__chat){ gap:5px; padding:6px 6px 7px; }
/* 작은 폰: 시각을 말풍선 아래로(옆에 두면 말풍선이 너무 좁아져 낱말이 깨짐) */
:is(.ui-phone,.ui-sms).is-mini .ui-bubble{ flex-direction:column; align-items:flex-start; gap:1px; }
:is(.ui-phone,.ui-sms).is-mini .ui-bubble.is-out{ align-items:flex-end; }
:is(.ui-phone,.ui-sms).is-mini .ui-bubble > p{ max-width:112px; padding:5px 7px; border-radius:8px; font-size:11px; line-height:1.35; }
:is(.ui-phone,.ui-sms).is-mini .ui-bubble > time{ font-size:11px; }
:is(.ui-phone,.ui-sms).is-mini :is(.ui-phone__input,.ui-sms__input){ gap:4px; padding:4px 6px; }
:is(.ui-phone,.ui-sms).is-mini :is(.ui-phone__input,.ui-sms__input) > .ui-i{ --ui-i-s:11px; }
:is(.ui-phone,.ui-sms).is-mini :is(.ui-phone__field,.ui-sms__field){ min-height:18px; padding:2px 7px; border-radius:9px; font-size:11px; }
:is(.ui-phone,.ui-sms).is-mini :is(.ui-phone__send,.ui-sms__send){ width:18px; height:18px; }
:is(.ui-phone,.ui-sms).is-mini :is(.ui-phone__send,.ui-sms__send)::before{ inset:4px; }
:is(.ui-phone,.ui-sms).is-mini .ui-app-row{ gap:5px; padding:5px 6px; font-size:11px; }
:is(.ui-phone,.ui-sms).is-mini .ui-app-row__ico{ width:18px; height:18px; }
:is(.ui-phone,.ui-sms).is-mini .ui-app-row__ico::before{ inset:4px; }
:is(.ui-phone,.ui-sms).is-mini .ui-app-row[data-app="textory"] .ui-app-row__ico::before{ inset:5px 3px; }
:is(.ui-phone,.ui-sms).is-mini .ui-app-row > p > :is(b,span){ font-size:11px; }


/* ── 6. 메시지 전송 화면 .ui-send(역 ⑤) + 전송 완료 모달 ───────────────────── */
.ui-send{
  position:relative; display:flex; flex-direction:column; min-height:0; overflow:hidden;
  container:uis / inline-size; contain-intrinsic-inline-size:600px; border-radius:var(--ui-board-r,0);
  background:var(--ui-surface-2); color:var(--ui-ink); font-size:12.5px; line-height:1.45;
}
.ui-send__head{
  flex:none; display:flex; align-items:center; gap:8px; padding:10px 12px 10px 14px;
  background:var(--ui-card); border-bottom:1px solid var(--ui-line);
}
.ui-send__head > b{ font-size:13.5px; font-weight:700; white-space:nowrap; }
.ui-send__head > .ui-seg2{ margin-left:auto; }
.ui-send__ico{ position:relative; flex:none; width:24px; height:24px; border-radius:7px; background:var(--ui-orange); }
.ui-send__ico::before{
  content:""; position:absolute; inset:5px; background-color:#FFFFFF;
  -webkit-mask:var(--ui-ic-chat) center/contain no-repeat; mask:var(--ui-ic-chat) center/contain no-repeat;
}
.ui-send__body{ flex:1 1 auto; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); align-items:start; gap:10px; padding:12px; min-height:0; }
.ui-send__to,.ui-send__compose{
  display:flex; flex-direction:column; gap:8px; min-width:0; padding:12px;
  background:var(--ui-card); border:1px solid var(--ui-line); border-radius:10px;
}
.ui-send__lbl{ margin:0; font-size:11.5px; font-weight:700; line-height:1.3; color:var(--ui-ink-2); }
.ui-send__to > .ui-send__lbl{ font-size:12.5px; color:var(--ui-ink); }
.ui-send__who{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:0; padding:7px 8px; border-radius:8px;
  background:var(--ui-surface-2); font-size:12px; line-height:1.3;
}
.ui-send__who > .ui-avatar{ width:24px; height:24px; font-size:11px; }
.ui-send__who > b{ font-size:12.5px; }
.ui-send__who > span:not(.ui-avatar){ color:var(--ui-sub); font-size:11.5px; font-variant-numeric:tabular-nums; }
.ui-send__msg{
  margin:0; min-height:84px; padding:9px 11px; border:1.5px solid var(--ui-orange); border-radius:8px;
  background:var(--ui-card); font-size:12.5px; line-height:1.5; color:var(--ui-ink);
}
.ui-send__opts{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:0; }
.ui-send__compose > .ui-btn{ margin-top:2px; }
@container uis (max-width:459px){
  .ui-send__body{ grid-template-columns:minmax(0,1fr); }
  .ui-send__head{ flex-wrap:wrap; }
}
.ui-scrim{ position:absolute; inset:0; z-index:4; background:var(--ui-scrim); border-radius:inherit; }
.ui-modal{
  position:absolute; z-index:5; inset:0; margin:auto; width:min(280px, calc(100% - 32px)); height:max-content;
  border-radius:12px; overflow:hidden; background:var(--ui-card); color:var(--ui-ink);
  box-shadow:0 14px 36px rgba(15,20,24,.28), 0 2px 6px rgba(15,20,24,.12);
}
.ui-modal__head{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; padding:12px 12px 12px 16px;
  border-bottom:1px solid var(--ui-line); font-size:13.5px; font-weight:700; line-height:1.3;
}
.ui-modal__head::after{
  content:""; flex:none; width:15px; height:15px; background-color:var(--ui-sub);
  -webkit-mask:var(--ui-ic-close) center/contain no-repeat; mask:var(--ui-ic-close) center/contain no-repeat;
}
.ui-modal__body{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:18px 16px 16px; }
.ui-modal__msg{ display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:4px 6px; margin:0; font-size:12.5px; line-height:1.4; color:var(--ui-ink); font-variant-numeric:tabular-nums; }
.ui-ok{ display:inline-flex; align-items:center; gap:4px; font-weight:700; }
.ui-ok::before{
  content:""; flex:none; width:14px; height:14px; background-color:var(--ui-ink);
  -webkit-mask:var(--ui-ic-check) center/contain no-repeat; mask:var(--ui-ic-check) center/contain no-repeat;
}
.ui-modal__body > .ui-btn{ min-width:76px; height:32px; }


/* ── 7. 모션 도우미(위치 · 크기는 쓰는 쪽 JS) ─────────────────────────────── */
.ui-cursor{
  position:absolute; z-index:8; left:0; top:0; width:22px; height:26px; margin:-2px 0 0 -2px;
  background:var(--ui-cursor-img) center/contain no-repeat; pointer-events:none; transform-origin:2px 2px;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.28));
}
.ui-press{
  --p:1;
  position:absolute; z-index:7; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
  border:2px solid var(--ui-orange); pointer-events:none;
  opacity:calc(1 - var(--p)); transform:scale(calc(.35 + .65 * var(--p)));
}