/*
 * CGM beta2 — 공통 컴포넌트 (계약: team/contracts/beta2-ui.md §5, 소유: builder-U0)
 * 색 = A "Clear" 토큰 · 모양 = B "Terrarium"(큰 라운드·면·부드러운 그림자, 선 최소) · 사용성 원칙(큰 글자·큰 버튼·글자 라벨).
 *
 * 로드 순서: tokens.css → transitions.css → ui.css → (shell-desktop.css | m-shell.css) → 화면 CSS.
 * 화면 CSS 는 같은 이름(.btn·.chip·.seg …)을 다시 정의하지 않는다. 이전(migrate) 전 화면은 자기 정의가 이걸 덮어쓴다 —
 * 화면 이전 = "화면 CSS 에서 공통과 겹치는 규칙을 지우고 이 클래스를 쓰는 것".
 * 색은 전부 토큰(var(--…)). #hex·rgba 하드코딩 금지(다크 깨짐).
 * (2026-10-15 사용자 "개체 찾는 창은 QR 검색이랑 같이") 찾기 줄 [QR로 찾기] 공용 모양 .lt-qr — 목록 도구 줄 구역.
 * (v3.0 도마도 — team/plans/domado-v3.md §2) 색·글꼴은 tokens.css 가 바꿈. 여기서 바꾼 모양: 켜진 칩 = 산호 채움 + 흰 글자(디자이너 그림 3 "전체보기") ·
 *   그림 아이콘 .di(디자이너 PNG mask — 색 = currentColor) · 휴대폰 도구 칸 줄(.lt-grid) = [그림 글자 ▾] 가로 칸(그림 3 "태그·필터·정렬") ·
 *   제목 글꼴 .ff-display(Cafe24 써라운드).
 */

/* ---------- 페이지 골격(데스크톱 본문) ---------- */
.page{width:100%;max-width:var(--page-max);margin:0 auto;padding:var(--s4) var(--s8) var(--s16);}
/* (v3.0 3차-D — domado-ui.md §8) 제목 줄 = [제목 덩어리] ······ [단추들] 한 줄(단추가 하나씩 다음 줄로 떨어지지 않게 flex-wrap 없음).
   한 줄에 안 들어가면 js/nav.js fitHeads 가 .ph-stack — 제목 덩어리 한 줄 + 단추 줄 한 줄(같은 왼쪽 선)로 바꾼다. */
.page-head{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:nowrap;margin:var(--s4) 0 var(--s6);}
.page-head > :first-child{flex:0 0 auto;min-width:0;white-space:nowrap;}   /* 제목 덩어리 글은 꺾지 않는다(모자라면 두 줄 배치 · 그래도 넘치면 말줄임) */
.page-head > :not(:first-child){flex-shrink:0;}
.page-head .sp{flex:1 1 0;min-width:0;}
.page-head.ph-stack{flex-wrap:wrap;row-gap:var(--s4);align-items:center;}
.page-head.ph-stack > :first-child{flex:1 1 100%;}
.page-head.ph-stack > :first-child > *{overflow:hidden;text-overflow:ellipsis;}
.page-head.ph-stack > .sp{display:none;}
/* (3차-D) 머리 줄 단추는 높이 하나(--ctl) — 주 행동(.btn.lg 56)도 옆 단추와 같은 높이로(같은 줄 상자 위아래 맞춤 · 진한 산호로 구별) */
.page-head .btn.lg{height:var(--ctl);}
.page-title{margin:0;font-size:var(--t-3xl);font-weight:var(--w-black);color:var(--ink);letter-spacing:var(--track-tight);line-height:1.15;}
.page-sub{margin:var(--s2) 0 0;font-size:var(--t-lg);color:var(--ink-3);line-height:1.4;}
.page-sub b{color:var(--ink);font-weight:var(--w-bold);}
.sec-title{margin:0;font-size:var(--t-xl);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.015em;}

/* =====================================================================================================
 * "모양 = 뜻" (2026-10-14 UI 정돈 — team/contracts/ui-declutter.md §1~§3, 단계 A 공통 모양)
 *   누르는 것   = 모서리 12px 둥근 네모(--r-btn) — 버튼·입력·검색·필터·옵션·목록 행·탭. 안에 들어간 칸 = 8px(--r-btn-in).
 *   표시만 하는 것 = 알약(--r-tag) — .tag · .st · 배지 · 토스트 · 개수. 그림자·테두리 없음. <button> 에 알약 모양 금지.
 *   묶음 = 24px 면(.box). 카드 안 카드 금지.
 * 어느 부품을 쓰나(한 줄 요약):
 *   할 일           → .btn(보조) · .btn.pri(주, 한 구역 1개) · .btn.txt(물러나기·자세히·닫기) · .btn.dang(위험) · .btn.sm(행 안 1개)
 *   하나만 고르는 필터(2~4칸) → .seg  (칩으로 만든 줄이면 .chip-seg 로 감싼다 — 같은 모양)
 *   여러 개 켜는 조건 → .chip.chk (체크 칩, 켜짐 = accent 테두리 + ✓) — 많으면 체크 목록 시트로
 *   설명 붙은 하나 고르기 → .opt-list > .opt (2~3칸 짧은 고르기는 .opt-row)
 *   목록에서 들어가기 → .row-list > .row-link (행 전체 누름 + "›")
 *   화면 안 쪽 바꾸기(계약서/도매 기록 · 출품/참가자/설정 · 상세 탭) → .ptabs > .ptab (밑줄 탭)
 *   상태·딱지 → .tag / .st (누르지 못함)
 * ===================================================================================================== */

/* ---------- 버튼 위계(§2) ----------
   .btn       보조 — 48 · 16/600 · 12px · 흰 면(--btn2 = --panel) + 그림자(--btn2-sh), 호버 들림. 한 구역 최대 2개.
              (2026-10-15 긴급패치 — 회색 채움을 정돈 전 색으로 되돌림, 모양은 그대로)
   .btn.pri   주   — accent 채움 · 번지는 그림자 없음 · 700. 한 구역(화면 머리·카드·시트)에 1개, 목록 행 안 금지.
   .btn.txt   글자 — 투명 + accent 글자(옛 .ghost 와 같음). 물러나는 일·자세히·뒤로·닫기·되돌리기에만.
   .btn.dang  위험 — --dang-soft 바탕 + --dang 글자. 진한 빨강(.dang.solid)은 확인 창 마지막 버튼만.
   .btn.sm 44(행 안 보조 1개) · .btn.lg 56(화면의 주 행동) · .btn.block 전폭.
   회색 면 위(아래 "회색 면 위 보조 버튼")에서도 보조 버튼은 흰 바탕 + 그림자 — 회색 위 회색 금지.
   흰 + 테두리는 "입력칸"(.f-input·.f-search·.f-select)과 "고르기 칸"(.opt-list .opt·.opt-row — 고름 = 테두리 색이 바뀜)만.
   누르는 버튼·칩은 테두리 없이 흰 + 그림자 하나로(2026-10-15 긴급패치).
   아이콘만 있는 버튼 금지 — 항상 한국어 라벨을 같이 쓴다. */
.btn{height:var(--ctl);padding:0 var(--s5);border:0;border-radius:var(--r-btn);
  background:var(--btn2);color:var(--ink);box-shadow:var(--btn2-sh);
  font:var(--w-semi) var(--t-md)/1 var(--font);letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  cursor:pointer;white-space:nowrap;text-decoration:none;user-select:none;
  transition:background-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease),color var(--dur-1) var(--ease);}
.btn:hover{background:var(--btn2-hover);box-shadow:var(--btn2-sh-hover);color:var(--ink);}
.btn:active{transform:scale(.98);}
.btn svg{flex:0 0 auto;}
.btn.pri{background:var(--accent);color:var(--accent-ink);box-shadow:none;font-weight:var(--w-bold);}
.btn.pri:hover{background:var(--accent-hover);color:var(--accent-ink);}
.btn.pri:active{background:var(--accent-press);}
.btn.txt,.btn.ghost{padding:0 var(--s3);background:transparent;box-shadow:none;color:var(--link);}
.btn.txt:hover,.btn.ghost:hover{background:var(--fill);box-shadow:none;color:var(--link-hover);}
.btn.dang{background:var(--dang-soft);color:var(--dang);font-weight:var(--w-bold);box-shadow:none;}
.btn.dang:hover{background:color-mix(in srgb,var(--dang-soft) 84%,var(--dang));color:var(--dang);}
.btn.dang.solid{background:var(--dang);color:var(--panel);box-shadow:none;}
.btn.dang.solid:hover{background:color-mix(in srgb,var(--dang) 88%,var(--ink));color:var(--panel);}
.btn.txt.dang,.btn.ghost.dang{background:transparent;color:var(--dang);}
.btn.txt.dang:hover,.btn.ghost.dang:hover{background:var(--dang-soft);}
.btn.lg{height:var(--ctl-lg);padding:0 var(--s6);font-size:var(--t-lg);font-weight:var(--w-bold);}
.btn.sm{height:var(--ctl-sm);padding:0 var(--s4);font-size:var(--t-sm);}
.btn.block{display:flex;width:100%;}
.btn:disabled,.btn[aria-disabled="true"],.btn.dis{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;}

/* ---------- 칩 — 필터·빠른 선택(48 · 12px) ----------
   기본 .chip(지금 화면들이 쓰는 그대로 — 단계 B 에서 .seg/.chip.chk 로 옮겨 감): 보조 버튼(.btn)과 같은 흰 면 + 그림자(--btn2-sh),
     호버 = 들림(--btn2-sh-hover). (2026-10-15 긴급패치 — 테두리 칩이 옆의 그림자 버튼과 두 모양으로 섞여 보여 하나로. 테두리 없음)
     켜짐(.on · aria-pressed=true) = 2px accent 테두리 + --accent-soft + accent 글자 700 (잉크 검정 채움 없앰).
   .chip.chk — 여러 개 켜는 조건(별점 4+·무정란 포함·태그 등): 앞에 체크 상자, 켜짐 = accent 테두리 + ✓.
     (이름이 .check 가 아닌 까닭: .check 는 아래 "체크(선택) 24px 상자" 부품 — 같이 붙이면 칩이 24px 로 줄어든다)
   하나만 고르는 칩 줄 — 칩들을 .chip-seg 로 감싸면 .seg 와 같은 이어 붙인 모양(우물 + 고른 칸 흰 들림 + 굵은 잉크). */
.chip{height:var(--ctl);padding:0 var(--s4);border:0;border-radius:var(--r-btn);
  background:var(--btn2);color:var(--ink);box-shadow:var(--btn2-sh);
  font:var(--w-semi) var(--t-md)/1 var(--font);display:inline-flex;align-items:center;gap:var(--s2);
  cursor:pointer;white-space:nowrap;user-select:none;
  transition:background-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-1) var(--ease);}
.chip:hover{color:var(--ink);box-shadow:var(--btn2-sh-hover);}
.chip .n{font-size:var(--t-xs);font-weight:var(--w-bold);color:var(--ink-3);}
.chip .sw{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.chip .x{font-size:var(--t-xs);opacity:.75;}
.chip.on,.chip[aria-pressed="true"]{background:var(--chip-on-bg);color:var(--accent-ink);box-shadow:none;font-weight:var(--w-black);}   /* (v3.0) 산호 그라데이션 채움 + 흰 글자(그림 3 "전체보기" — 원칙 0) */
.chip.on:hover,.chip[aria-pressed="true"]:hover{color:var(--accent-ink);box-shadow:none;background:var(--chip-on-bg);filter:brightness(.97);}
.chip.on .n,.chip[aria-pressed="true"] .n{color:inherit;opacity:.85;}
/* 체크 칩 — 상자(20px·6px) + 켜지면 accent 채움 ✓ */
.chip.chk::before{content:"";width:20px;height:20px;border-radius:6px;flex:0 0 auto;box-sizing:border-box;
  border:2px solid var(--line-3);background:var(--panel);display:inline-grid;place-items:center;
  font-size:14px;font-weight:var(--w-black);line-height:1;color:var(--accent-ink);}
.chip.chk.on::before,.chip.chk[aria-pressed="true"]::before{content:"✓";border-color:var(--accent-ink);background:var(--accent);}
/* 하나만 고르는 칩 줄 = 세그먼트(아래 .seg 와 같은 모양) */
.chip-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:var(--r-btn);background:var(--fill-2);max-width:100%;}
.chip-seg > .chip,.seg > .chip{background:transparent;box-shadow:none;border-radius:var(--r-btn-in);color:var(--ink-3);}
.chip-seg > .chip:hover,.seg > .chip:hover{color:var(--ink);box-shadow:none;}
.chip-seg > .chip.on,.chip-seg > .chip[aria-pressed="true"],.seg > .chip.on{background:var(--panel);color:var(--ink);box-shadow:var(--sh-1);font-weight:var(--w-bold);}
.chip-seg > .chip.on .n,.seg > .chip.on .n{color:var(--ink-3);opacity:1;}

/* ---------- 세그먼트 — 하나만 고르는 필터·보기 전환(2~4칸) ----------
   이어 붙인 한 줄: 우물 --fill-2 · 12px · 안쪽 4. 칸 48 · 8px. 고른 칸 = 흰(--panel) + --sh-1 + 굵은 잉크(검정 채움 없음).
   고른 칸 표시: .on · aria-pressed=true · aria-selected=true · aria-checked=true 어느 것이든.
   375 에서 넘치면 가로 스크롤 대신 "단계: 전체 ▾" 선택칸(.f-select)으로. */
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-btn);background:var(--fill-2);max-width:100%;}
.seg > a,.seg > button,.seg > span{height:var(--ctl);padding:0 var(--s4);border:0;border-radius:var(--r-btn-in);background:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;font:var(--w-semi) var(--t-md)/1 var(--font);color:var(--ink-3);
  cursor:pointer;text-decoration:none;white-space:nowrap;}
.seg > *:hover{color:var(--ink);}
.seg > .on,.seg > [aria-pressed="true"],.seg > [aria-selected="true"],.seg > [aria-checked="true"]{
  background:var(--panel);color:var(--ink);box-shadow:var(--sh-1);font-weight:var(--w-bold);}
.seg.block{display:flex;width:100%;}
.seg.block > *{flex:1 1 0;min-width:0;}
/* 휴대폰 폭 — 칸 안쪽 여백을 줄여 숫자 붙은 4칸이 한 줄에 들어가게(그래도 넘치면 화면에서 선택칸으로 바꾼다) */
@media (max-width:430px){.seg > a,.seg > button,.seg > span,.chip-seg > .chip{padding:0 var(--s3);}}
/* 칸 안에서만 나뉘는 세그먼트 .seg-fit(.seg / .chip-seg 에 덧붙임, 2026-10-15 — 개체 m02 .m2-seg 와 같은 모양):
   칸 폭은 글자만큼 나눠 갖고(flex auto), 넉넉하면 "이름 숫자" 한 줄 · 좁으면 그 칸 안에서만 이름 위·숫자 아래.
   이름(.sl)·숫자(.n) 토막은 쪼개지지 않는다(9,999 도 한 덩어리). 줄 폭(한 줄 꽉 등)은 화면 CSS 가 정한다. */
.seg-fit > a,.seg-fit > button,.seg-fit > span,.seg-fit > .chip{flex:1 1 auto;min-width:0;height:auto;min-height:var(--ctl);padding:4px 10px;
  flex-wrap:wrap;column-gap:6px;row-gap:0;line-height:1.25;text-align:center;white-space:normal;}
.seg-fit .sl,.seg-fit .n{white-space:nowrap;}
.seg-fit .n{font-variant-numeric:tabular-nums;}

/* ---------- 회색 면 위 보조 버튼 = 흰 바탕 + 그림자 (회색 위 회색 금지 — 미리보기에서 회색 버튼이 회색 면에 묻혀 안 보였다) ----------
   (2026-10-15 긴급패치) 테두리 → .btn 과 같은 그림자(--btn2-sh, 호버 --btn2-sh-hover). 지금은 --btn2 = --panel 이라 기본 .btn 과 같지만,
   --btn2 를 다시 회색으로 바꾸더라도 회색 면 위에서는 흰 면이 되도록 남겨 둔다.
   회색 면(--fill·--fill-2 바탕의 카드·도구 줄·우물) 안의 보조 버튼(.btn — 주·글자·위험 제외)에 적용. 칩(.chip)은 원래 흰 + 그림자라 그대로.
   쓰는 법: 회색 바탕 상자에 class="surface-fill"(또는 data-surface="fill")을 붙인다(.surface-fill 은 바탕 --fill 도 준다).
   이미 있는 회색 면(beta2 화면 26곳을 열어 찾은 것 — 버튼이 실제로 회색 면 위에 있던 곳)은 아래 :where() 목록에 이름으로 넣었다:
     .gd-photo-hint(03 사진 탭 "붙여넣기" — js/gecko-detail-photos.js) · .fdi-src(Feedle 미리 보기 주소 줄 — js/feedle-import.js).
   단계 B 에서 그 상자에 surface-fill 클래스를 붙이면 여기 이름은 빼도 된다. 새 회색 면은 이름을 늘리지 말고 클래스를 붙일 것.
   우선순위 = .btn 과 같은 한 단계(:where 로 감쌈) + 이 파일에서 .btn 뒤 —
   화면 CSS 가 같은 버튼을 다시 칠하면(예: .cn-whtools-b .btn.ghost) 화면 쪽이 이긴다. */
:where(.surface-fill,[data-surface="fill"],.gd-photo-hint,.fdi-src) .btn:where(:not(.pri):not(.txt):not(.ghost):not(.dang)){
  background:var(--panel);box-shadow:var(--btn2-sh);}
:where(.surface-fill,[data-surface="fill"],.gd-photo-hint,.fdi-src) .btn:where(:not(.pri):not(.txt):not(.ghost):not(.dang)):hover{
  background:var(--panel);box-shadow:var(--btn2-sh-hover);}
.surface-fill{background:var(--fill);}

/* ---------- 옵션 — 설명 붙은 하나 고르기(§3) ----------
   <div class="opt-list" role="radiogroup"> <button type="button" class="opt" role="radio" aria-checked="true">
     <span class="opt-t">제목</span><span class="opt-d">한 줄 설명</span></button> … </div>
   (label 로 만들 때: <label class="opt"><input type="radio" name="…"> <span class="opt-t">…</span></label> — 입력은 숨기고 :checked 로 표시)
   행 최소 56 · 12px · 흰 + 1.5px --line-3. 고름(.on · aria-checked/pressed=true · input:checked) = 2px accent 테두리 + --accent-soft + 오른쪽 ✓ 원.
   (2026-10-15 긴급패치 때 일부러 테두리 유지 — 고르기 칸은 버튼이 아니라 입력에 가깝고, 고름이 "테두리 색 바뀜"이라 그림자로 바꾸면 덜 뚜렷해진다)
   범례 상자 대신 옵션마다 한 줄 설명(.opt-d). 5개 이상이면 .f-select/시트.
   .opt-row — 2~3칸 짧은 고르기(성별·건강): 한 줄에 이어 붙인 칸, 고름 = accent 테두리 + accent 글자. */
.opt-list{display:flex;flex-direction:column;gap:var(--s2);}
.opt-list .opt{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;
  width:100%;min-height:56px;padding:var(--s3) 52px var(--s3) var(--s4);border:0;border-radius:var(--r-btn);
  background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--line-3);color:var(--ink);text-align:left;cursor:pointer;
  font:var(--w-semi) var(--t-body)/1.3 var(--font);user-select:none;
  transition:box-shadow var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease);}
.opt-list .opt:hover{box-shadow:inset 0 0 0 1.5px var(--ink-4);}
.opt-list .opt .opt-t{font-size:var(--t-body);font-weight:var(--w-semi);color:var(--ink);}
.opt-list .opt .opt-d{font-size:var(--t-sm);font-weight:var(--w-reg);color:var(--ink-3);line-height:1.4;}
.opt-list .opt::after{content:"";position:absolute;right:var(--s4);top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;
  box-sizing:border-box;border:2px solid var(--line-3);display:grid;place-items:center;
  font-size:14px;font-weight:var(--w-black);line-height:1;color:var(--accent-ink);}
.opt-list .opt > input[type=radio],.opt-list .opt > input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;}
.opt-list .opt.on,.opt-list .opt[aria-checked="true"],.opt-list .opt[aria-pressed="true"],.opt-list .opt:has(> input:checked){
  background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--sel-line);}
.opt-list .opt.on .opt-t,.opt-list .opt[aria-checked="true"] .opt-t,.opt-list .opt[aria-pressed="true"] .opt-t,.opt-list .opt:has(> input:checked) .opt-t{font-weight:var(--w-bold);}
.opt-list .opt.on::after,.opt-list .opt[aria-checked="true"]::after,.opt-list .opt[aria-pressed="true"]::after,.opt-list .opt:has(> input:checked)::after{
  content:"✓";border-color:var(--accent);background:var(--accent);}
.opt-list .opt:has(> input:focus-visible){outline:3px solid var(--accent-ring);outline-offset:2px;}
.opt-list .opt:disabled,.opt-list .opt[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
.opt-row{display:flex;width:100%;}
.opt-row > button,.opt-row > label,.opt-row > a{flex:1 1 0;min-width:0;height:var(--ctl);padding:0 var(--s3);border:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--panel);color:var(--ink-2);
  box-shadow:inset 0 0 0 1.5px var(--line-3);font:var(--w-semi) var(--t-md)/1 var(--font);cursor:pointer;white-space:nowrap;text-decoration:none;}
.opt-row > * + *{margin-left:-1.5px;}
.opt-row > :first-child{border-radius:var(--r-btn) 0 0 var(--r-btn);}
.opt-row > :last-child{border-radius:0 var(--r-btn) var(--r-btn) 0;}
.opt-row > :only-child{border-radius:var(--r-btn);}
.opt-row > .on,.opt-row > [aria-pressed="true"],.opt-row > [aria-checked="true"],.opt-row > :has(> input:checked){
  position:relative;z-index:1;background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 0 0 0 2px var(--sel-line);font-weight:var(--w-bold);}
.opt-row > label > input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;}

/* ---------- 목록 행 — 행 전체가 누르는 곳(§3, 본보기 = 계정 메뉴 .mi · 드로어 .ms-ni) ----------
   <div class="row-list"> <a class="row-link" href="…"> <span class="rl-b"><span class="rl-t">제목</span><span class="rl-s">보조 줄</span></span>
     <span class="rl-v">값</span><span class="rl-go">이어 쓰기</span> </a> … </div>
   최소 64(보조 줄 있으면 72) · 12px · 행 사이 헤어라인 · 오른쪽 = 표시 0~1(.tag) + 값 + (필요하면 동사 글자 .rl-go) + "›".
   "자세히·열기·보기" 버튼을 따로 두지 않는다. 자주 쓰는 일 1개만 행 안 .btn.sm —
   그때는 행을 <div class="row-link"> 로, 제목 쪽을 <a class="rl-main"> 으로(행 전체 누름은 .rl-main 이 ::before 로 덮는다). */
.row-list{display:flex;flex-direction:column;}
.row-list > .row-link + .row-link{box-shadow:0 -1px 0 var(--line);}
.row-link{position:relative;display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--row);padding:var(--s3) var(--s4);
  border:0;border-radius:var(--r-btn);background:transparent;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;
  font:var(--w-semi) var(--t-md)/1.3 var(--font);}
.row-link:hover{background:var(--fill);color:var(--ink);}
.row-link:active{background:var(--fill-2);}
.row-link:focus-visible,.row-link .rl-main:focus-visible{outline:3px solid var(--accent-ring);outline-offset:-3px;}
.row-link::after{content:"›";flex:0 0 auto;margin-left:var(--s1);font-size:26px;font-weight:var(--w-reg);line-height:1;color:var(--ink-3);}
.row-link .rl-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.row-link .rl-t{font-size:var(--t-lg);font-weight:var(--w-semi);color:var(--ink);overflow-wrap:anywhere;}
.row-link .rl-s{font-size:var(--t-sm);font-weight:var(--w-reg);color:var(--ink-3);}
.row-link:has(.rl-s){min-height:72px;}
.row-link .rl-v{flex:0 0 auto;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-2);white-space:nowrap;}
.row-link .rl-go{flex:0 0 auto;font-size:var(--t-md);font-weight:var(--w-bold);color:var(--link);white-space:nowrap;}
.row-link .rl-main{color:inherit;text-decoration:none;}
.row-link .rl-main::before{content:"";position:absolute;inset:0;border-radius:inherit;}
.row-link .btn{position:relative;z-index:1;}
.row-link.dang .rl-t{color:var(--dang);}
/* (B4b 추가) 표시만 하는 행 — 같은 줄 모양이지만 누르지 못함("›"·눌림 없음). 설정 목록의 "내 역할" 같은 고정값 줄.
   행 안에 버튼 1개(.btn.sm — 예: "복사")는 그대로 누를 수 있다. */
.row-link.static{cursor:default;}
.row-link.static:hover,.row-link.static:active{background:transparent;}
.row-link.static::after{content:none;}
/* (B4b 추가) 카드(.box) 안 목록 — 카드 안쪽 여백만큼 행을 바깥으로 넓혀 눌리는 면이 카드 끝까지(글자 줄은 카드 글자와 맞음) */
.box > .row-list.bleed,.box .row-list.bleed{margin-inline:calc(-1 * var(--s4));}

/* ---------- 페이지 탭 — 밑줄 탭(§3: 분양관리 계약서/도매 기록/받을 개체 · 경매 출품/참가자/설정 · 상세 탭) ----------
   필터 세그먼트(.seg)와 다른 모양: 바탕 없음 + 아래 헤어라인, 고른 탭 = 잉크 700 + 3px accent 밑줄.
   <nav class="ptabs" role="tablist"> <a class="ptab on" aria-current="page" href="…">계약서</a> … </nav>
   고른 탭 표시: .on · aria-selected=true · aria-current=page. 칸 48 이상. 좁으면 줄바꿈(가로 스크롤 금지). */
.ptabs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 var(--s1);box-shadow:inset 0 -1px 0 var(--line-2);}
.ptab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--ctl);padding:0 var(--s4);
  border:0;border-radius:var(--r-btn-in) var(--r-btn-in) 0 0;background:transparent;color:var(--ink-3);
  font:var(--w-semi) var(--t-body)/1.2 var(--font);white-space:nowrap;text-decoration:none;cursor:pointer;}
.ptab:hover{background:var(--fill);color:var(--ink);}
.ptab::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:0;height:3px;border-radius:3px 3px 0 0;background:transparent;}
.ptab.on,.ptab[aria-selected="true"],.ptab[aria-current="page"]{color:var(--ink);font-weight:var(--w-bold);}
.ptab.on::after,.ptab[aria-selected="true"]::after,.ptab[aria-current="page"]::after{background:var(--accent);}
.ptab .n{font-size:var(--t-xs);font-weight:var(--w-bold);color:var(--ink-3);}
.ptab:focus-visible{outline:3px solid var(--accent-ring);outline-offset:-3px;}
/* (B4b 추가) 칸이 2~3개뿐인 휴대폰 화면 — 탭이 폭을 나눠 가진다(누르는 면이 넓게) */
.ptabs.block > .ptab{flex:1 1 0;min-width:0;}

/* ---------- 태그(작은 라벨) — 성별·나이·모프·상태. 표시 전용 = 알약(28 · 14/600 · soft · 그림자·테두리 없음). 사진 위는 .glass ---------- */
.tag{height:28px;padding:0 var(--s3);border:0;box-shadow:none;border-radius:var(--r-tag);display:inline-flex;align-items:center;gap:5px;
  font-size:var(--t-xs);font-weight:var(--w-semi);line-height:1;white-space:nowrap;background:var(--fill);color:var(--ink-2);}
.tag.male{background:var(--male-soft);color:var(--male);}
.tag.female{background:var(--female-soft);color:var(--female);}
.tag.unknown{background:var(--unknown-soft);color:var(--unknown);}
.tag.ok{background:var(--ok-soft);color:var(--ok);}
.tag.warn{background:var(--warn-soft);color:var(--warn);}
.tag.dang{background:var(--dang-soft);color:var(--dang);}
.tag.info{background:var(--info-soft);color:var(--info);}
.tag.accent{background:var(--hl-soft);color:var(--hl);}   /* 강조 딱지(태그·대표 사진) = ④ 강조 색 */
.tag.violet{background:var(--violet-soft);color:var(--violet);}
.tag.teal{background:var(--teal-soft);color:var(--teal);}
.tag.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;}
/* 사진 위 글래스 상태 태그 — 점 색만 상태 톤(js/geckos.js statusTone) */
.tag.dot[data-tone]::before{background:var(--ink-4);}
.tag.dot[data-tone="ok"]::before{background:var(--ok);}
.tag.dot[data-tone="accent"]::before{background:var(--jade);}   /* 상태 색 "청록" — 브랜드와 따로 고정 */
.tag.dot[data-tone="info"]::before{background:var(--info);}
.tag.dot[data-tone="warn"]::before{background:var(--warn);}
.tag.dot[data-tone="dang"]::before{background:var(--dang);}
.tag.dot[data-tone="violet"]::before{background:var(--violet);}
.tag.dot[data-tone="teal"]::before{background:var(--teal);}
/* (v2.35.12 A0110) 매장 상태 색 "주황"(팔레트 키 warn · 기본 NFS) — 주의 색(--warn)은 붉게 바뀌었고 상태 팔레트에는 "빨강"(dang)이 따로 있어,
   상태 표시에서만 --warn 을 주황(--orange)으로 바꿔 둔다(두 색이 같아지지 않게). 상태 표시 = statusTone 을 쓰는 곳 */
:is(.tag.st,.g-st,.gl-st,.gd-st,.m3-st,.st-dot,.hs-dot,.hs-sw,.bv-cv[data-st])[data-tone="warn"]{--warn:var(--orange);--warn-soft:var(--orange-soft);}
.tag.glass{background:var(--glass);color:var(--glass-ink);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);}
.tag.glass-dark{background:var(--glass-dark);color:var(--glass-dark-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}

/* ---------- 상태 표시 — 기본값은 조용히(점 + 글자), 예외만 색 ----------
   data-tone: ok(사육중) · accent(브리딩중) · info(분양중) · warn(NFS) · muted(휴식중·보관) + 매장이 만든 상태 dang·violet·teal.
   js/statuses.js statusTone() — 매장별 색(팔레트 키 8개) */
.st-dot{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-size:var(--t-md);font-weight:var(--w-med);white-space:nowrap;}
.st-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-4);flex:0 0 auto;}
.st-dot[data-tone="ok"]::before{background:var(--ok);}
.st-dot[data-tone="accent"]::before{background:var(--jade);}
.st-dot[data-tone="info"]::before{background:var(--info);}
.st-dot[data-tone="warn"]::before{background:var(--warn);}
.st-dot[data-tone="dang"]::before{background:var(--dang);}
.st-dot[data-tone="violet"]::before{background:var(--violet);}
.st-dot[data-tone="teal"]::before{background:var(--teal);}
.st-dot[data-tone="muted"]{color:var(--ink-3);}

/* ---------- 단계·결과 태그 — 알 단계(js/egg-ui.js stageTag) · 메이팅 결과(matings.js resultKey) ----------
   .st[data-stage=도자기|눈꽃|골프공|부화…] · .st[data-result=ok|fail|unk]. 크기는 여기, 화면 CSS 는 배치만. */
.st[data-stage],.st[data-result]{height:28px;padding:0 var(--s3);border:0;box-shadow:none;border-radius:var(--r-tag);display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-size:var(--t-xs);font-weight:var(--w-bold);line-height:1;white-space:nowrap;background:var(--fill);color:var(--ink-2);}
.st[data-stage]::before,.st[data-result]::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.st[data-stage="눈꽃"]{background:var(--info-soft);color:var(--info);}
.st[data-stage="골프공"]{background:var(--warn-soft);color:var(--warn);}
.st[data-stage="부화"],.st[data-stage="해칭"]{background:var(--ok-soft);color:var(--ok);}
.st[data-result="ok"]{background:var(--ok-soft);color:var(--ok);}
.st[data-result="fail"]{background:var(--dang-soft);color:var(--dang);}
.st[data-result="unk"]{background:var(--fill);color:var(--ink-3);}

/* ---------- 면(카드) — 선 대신 면 + 그림자 ---------- */
.box{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s6);}
.box-h{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);}
.box-h h2,.box-h .box-t{margin:0;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);}
.box-h .sp{flex:1;}
.box-h a{font-size:var(--t-md);font-weight:var(--w-semi);}

/* ---------- 사진 카드(B) — 목록 기본 보기 ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s6);}
.pcard{position:relative;display:block;background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);
  padding:10px 10px var(--s4);cursor:pointer;color:inherit;text-decoration:none;
  transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease);}
.pcard:hover{transform:var(--lift);box-shadow:var(--sh-2);}
/* 썸네일은 정사각 1:1(정사각 사진이 위아래 잘리지 않게 — 사용자 불만 2026-10-06), cover·가운데 */
.pcard .pc-ph{position:relative;aspect-ratio:1/1;border-radius:var(--r-photo);overflow:hidden;
  background-color:var(--fill);background-position:center;background-repeat:no-repeat;background-size:cover;}
.pcard .pc-tl{position:absolute;left:10px;top:10px;}
.pcard .pc-tr{position:absolute;right:10px;top:10px;}
.pcard .pc-br{position:absolute;right:10px;bottom:10px;}
.pcard .pc-bd{padding:var(--s3) 6px 0;}
.pcard .pc-nm{margin:0;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.015em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcard .pc-id{margin-top:2px;font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcard .pc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3);}
.pcard.sel{box-shadow:0 0 0 3px var(--sel-line),var(--sh-2);}

/* ---------- 표(데이터가 많은 화면의 보조 보기) — 헤더 채움·대문자 없음, 행 헤어라인만, 행 64px ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;}
.tbl th{height:44px;padding:0 var(--s3);text-align:left;white-space:nowrap;background:transparent;
  font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--ink-3);text-transform:none;letter-spacing:0;
  border:0;border-bottom:1px solid var(--line-2);}
.tbl td{height:var(--row);padding:0 var(--s3);white-space:nowrap;font-size:var(--t-md);color:var(--ink-2);
  border-bottom:1px solid var(--line);}
.tbl tbody tr{cursor:pointer;}
.tbl tbody tr:hover td{background:var(--fill);}
.tbl tbody tr.sel td{background:var(--accent-soft);}
.tbl .none{color:var(--ink-4);}             /* 빈 값 "—" (장식) */
.tbl .num{text-align:right;}

/* ---------- 입력 — 누르는 것이라 12px(--r-btn), 흰 + 1.5px --line-3 ---------- */
.f-field{display:flex;flex-direction:column;gap:var(--s2);}
.f-label{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink);}
.f-input,.f-select,.f-textarea{width:100%;height:var(--ctl);padding:0 var(--s4);
  border:1.5px solid var(--line-3);border-radius:var(--r-btn);background:var(--panel);color:var(--ink);
  font:var(--w-reg) var(--t-md)/1.2 var(--font);outline:none;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);}
.f-textarea{height:auto;min-height:120px;padding:var(--s3) var(--s4);line-height:var(--lh);resize:vertical;}
.f-input::placeholder,.f-textarea::placeholder{color:var(--ink-4);}
.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring);}
.f-input[aria-invalid="true"],.f-select[aria-invalid="true"]{border-color:var(--dang);}
.f-input:disabled,.f-select:disabled{background-color:var(--fill);color:var(--ink-3);}
.f-select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
.f-hint{font-size:var(--t-xs);color:var(--ink-3);}
.f-err{font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--dang);}
/* 검색 필드 — 입력칸과 같은 모양(12px · 흰 + 1.5px --line-3, 그림자 없음). 테두리는 inset 그림자(크기 변화 0) */
.f-search{height:var(--ctl);display:flex;align-items:center;gap:10px;padding:0 var(--s4);border-radius:var(--r-btn);
  background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--line-3);color:var(--ink-3);}
.f-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px var(--accent-ring);}
.f-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);
  font:var(--w-reg) var(--t-md)/1 var(--font);}
.f-search input::placeholder{color:var(--ink-3);}
.f-search svg{flex:0 0 auto;}
/* (2026-10-15 앱 전체 통일) 찾기 칸 [지우기] = .btn.sm.lt-qx(칸 안 오른쪽, 글자가 있을 때만 — js/list-tools.js searchBoxHtml·wireSearchBox).
   브라우저 기본 ✕(type=search)는 숨김 — 글자 버튼 하나로. 지우기가 있으면 칸 오른쪽 여백을 줄여 버튼이 칸 안에 붙는다. */
.f-search input::-webkit-search-cancel-button{display:none;-webkit-appearance:none;}
.f-search:has(> .lt-qx){padding-right:4px;}
.f-search > .lt-qx{flex:0 0 auto;}
/* 창(uiForm .uidlg-field input — 테두리·안쪽 여백) 안에 놓여도 찾기 칸 안의 입력은 테두리 없이(테두리·포커스 고리는 바깥 .f-search 하나) */
.f-search.lt-search > input:not([type=checkbox]):not([type=radio]):not([type=file]){height:100%;min-width:0;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;outline:0;}

/* ---------- 체크(선택) — 24px 상자 ---------- */
.check{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;flex:0 0 auto;
  background:var(--panel);box-shadow:0 0 0 2px var(--line-3) inset;cursor:pointer;vertical-align:middle;}
.check.on{background:var(--accent);box-shadow:none;}
.check.on::after{content:"";width:6px;height:11px;margin-top:-3px;border:solid var(--accent-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}

/* ---------- 빈 상태: 아이콘 + 한 줄 설명 + 다음 행동 버튼 ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s2);padding:var(--s12) var(--s6);}
.empty-state .es-ic{width:72px;height:72px;border-radius:50%;background:var(--fill);color:var(--ink-3);display:grid;place-items:center;margin-bottom:var(--s2);}
.empty-state .es-t{margin:0;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);}
.empty-state .es-d{margin:0;font-size:var(--t-md);color:var(--ink-3);max-width:440px;}
.empty-state .btn{margin-top:var(--s3);}
/* (v2.36 ux-fix U-05·U-06) 불러오기 실패 상자(js/ui-dialog.js failHtml — 쉬운 말 + [다시 해 보기]) — 카드·목록 안에 들어가므로 여백을 줄이고 격자 칸이면 한 줄 전체 */
.empty-state.ui-fail{padding:var(--s6) var(--s4);grid-column:1/-1;}
.empty-state.ui-fail .es-t{font-size:var(--t-lg);color:var(--ink-2);word-break:keep-all;}
.empty-state.ui-fail .es-d{word-break:keep-all;}
.empty-state.ui-fail .btn{margin-top:var(--s2);}
/* (v2.36 ux-fix U-09) 링크로 여는 화면의 "링크가 안 맞음·못 읽음" — 공용 부품 js/link-problem.js(모양 = 직원 초대 화면 .jn-bad 그대로)
   제목 → 노란 상자(무엇이 문제) → 회색 한 줄(어떻게·누구에게) → [다시 해 보기](못 읽었을 때만) → 가는 단추. 단추는 한 줄 전체 폭. */
.lp-card{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s6) var(--s5);min-width:0;}
.lp-t{margin:0 0 var(--s4);font-size:var(--t-xl);font-weight:var(--w-bold);color:var(--ink);line-height:1.35;letter-spacing:-0.015em;word-break:keep-all;overflow-wrap:anywhere;}
.lp-msg{margin:0 0 8px;padding:14px 16px;border-radius:var(--r-lg);background:var(--warn-soft);
  font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;white-space:pre-line;}
.lp-sub{margin:0 0 var(--s4);font-size:var(--t-md);color:var(--ink-2);line-height:1.55;word-break:keep-all;overflow-wrap:anywhere;}
.lp-btns{display:flex;flex-direction:column;gap:10px;margin-top:var(--s4);}
.lp-btns .btn{width:100%;min-height:var(--ctl-lg);height:auto;white-space:normal;line-height:1.3;text-decoration:none;}
.lp-btns .btn.lp-go{background:var(--fill);color:var(--ink);box-shadow:none;}
.lp-btns .btn.lp-go:hover{background:var(--fill-2);}

/* ---------- 로딩: 글자로("불러오는 중…") + 스켈레톤 ---------- */
.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:var(--s10) var(--s4);
  font-size:var(--t-md);color:var(--ink-3);}
.loading::before{content:"";width:20px;height:20px;border-radius:50%;border:3px solid var(--fill-2);border-top-color:var(--accent);
  animation:u-spin .8s linear infinite;}
.skeleton{border-radius:var(--r-sm);background:linear-gradient(90deg,var(--fill) 25%,var(--fill-2) 50%,var(--fill) 75%);
  background-size:200% 100%;animation:u-shimmer 1.4s var(--ease) infinite;}
@keyframes u-spin{to{transform:rotate(360deg);}}
@keyframes u-shimmer{from{background-position:100% 0;}to{background-position:-100% 0;}}

/* ---------- 팝오버 메뉴(계정·홈 전환 등) — 항목 48px, 글자 라벨 ---------- */
.menu-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:260px;max-width:340px;padding:var(--s2);
  background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--sh-pop);text-align:left;cursor:default;}
.menu-pop .mp-h{padding:var(--s2) var(--s3) var(--s3);}
.menu-pop .mp-h b{display:block;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);}
.menu-pop .mp-h small{display:block;font-size:var(--t-xs);color:var(--ink-3);}
.menu-pop .mp-t{padding:var(--s2) var(--s3) var(--s1);font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--ink-3);}
.menu-pop .mi{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:48px;padding:0 var(--s3);border:0;
  border-radius:var(--r-btn);background:transparent;color:var(--ink);font:var(--w-semi) var(--t-md)/1.2 var(--font);
  text-align:left;cursor:pointer;white-space:nowrap;text-decoration:none;}
.menu-pop .mi:hover{background:var(--fill);color:var(--ink);}
.menu-pop .mi svg{flex:0 0 auto;color:var(--ink-3);}
.menu-pop .mi .sub{margin-left:auto;padding-left:var(--s3);font-size:var(--t-xs);font-weight:var(--w-reg);color:var(--ink-3);}
.menu-pop .mi.on{background:var(--accent-soft);color:var(--accent-text);}
.menu-pop .mi.dang,.menu-pop .mi.dang svg{color:var(--dang);}
/* (v2.24) 계정 메뉴가 창보다 길면(낮은 창·항목 많은 계정) 메뉴 안에서 굴림 — 맨 아래 [회원 탈퇴]·[새 소식]까지 늘 닿게 */
#acct-menu.menu-pop{max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain;}
/* (v2.24) 보조 줄(회원 탈퇴 — 계정 일 맨 아래) — 한 단계 옅은 글자, 크기·누르는 곳은 그대로 */
.menu-pop .mi.quiet{color:var(--ink-2);font-weight:var(--w-med);}
.menu-pop .mp-sep{height:1px;background:var(--line);margin:var(--s2) var(--s2);}
.menu-pop .mp-note{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);font-size:var(--t-xs);color:var(--ink-3);}
.menu-pop .mp-note .d{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto;}

/* ---------- 텍스트 로고(.blogo — 데스크톱 상단 바 · 모바일 드로어/헤더) — 다크에서 반전 ---------- */
:root.dark-ok[data-theme=dark] .blogo{filter:invert(1) hue-rotate(180deg) brightness(1.4);}
@media (prefers-color-scheme:dark){:root.dark-ok:not([data-theme=light]) .blogo{filter:invert(1) hue-rotate(180deg) brightness(1.4);}}

/* ---------- 브랜드 로고(멀티 브랜드 — /brand/logo.svg 가로 · /brand/mark.svg 정사각, js/brand.js) ----------
   주소마다 가로 로고 길이가 다르다(글자 3자 ~ 20자). 높이는 화면 CSS 가 정하고, 폭은 상한(--logo-max) 안에서 비율 그대로 줄어든다
   (넘침·잘림·찌그러짐 없음 — 머리 줄이 밀리지 않게). 가운데 놓는 곳(로그인)은 object-position 만 바꾼다. */
img[src^="/brand/logo"]{max-width:min(var(--logo-max,180px),100%);min-width:0;flex-shrink:1;object-fit:contain;object-position:left center;}
/* 정사각 로고(/brand/mark — 머리 줄·메뉴·매장 고르기·로그인·손님 화면·계약서 머리)와 로고 넣는 칸 미리 보기(.r-img) = 모서리 조금 둥글게
   (사용자 2026-10-22 "너무 네모면 쫌 그러니까 모서리 조금만"). 큰 그림 = --r-img(8px) · 작은 그림은 폭의 16%(28~40px → 약 4.5~6.4px).
   가로 글자 로고(/brand/logo)는 그대로 · 이미 동그란 것·사진 카드(--r-photo)는 그대로. 인쇄물(계약서·라벨)에는 로고가 안 나감(계약서 머리 = 인쇄 제외). */
img[src^="/brand/mark"],img.r-img{border-radius:min(var(--r-img), 16%);}

/* ---------- 아래 문구(모든 브랜드 같음 — 글자는 js/brand.js FOOT_LINES 한 곳) ----------
   자리: [data-brand-foot](로그인·손님 화면 등) · 컴퓨터 셸 본문 맨 끝(nav.js) · 휴대폰 메뉴 맨 아래(m-shell.js).
   작고 조용하게, 하지만 읽히게(14px · ink-3 — 흰 바탕 6:1 · 앱 바탕 5.6:1). 두 줄(줄마다 따로 — 좁은 폰에서 문장 중간 끊김 최소). 인쇄에는 안 나온다. */
.brand-foot{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:var(--s5) var(--s4);
  font-size:var(--t-xs);line-height:1.45;font-weight:var(--w-reg);color:var(--ink-3);text-align:center;letter-spacing:0;}
.brand-foot[hidden]{display:none;}
.brand-foot .bf-l{display:block;max-width:100%;overflow-wrap:anywhere;}
.main > .brand-foot{margin-top:auto;padding:var(--s8) var(--s4) 0;}
@media print{.brand-foot{display:none!important;}}

/* ---------- 고유 ID 표기(유일한 mono 사용처) ---------- */
.uid{font-family:var(--mono);font-size:max(var(--t-xs),.92em);letter-spacing:-.01em;color:var(--ink-3);}

@media (prefers-reduced-motion:reduce){.pcard,.btn{transition:none;}.skeleton,.loading::before{animation:none;}}

/* ==================== 목록 도구 줄(team/contracts/list-toolbar.md, 2026-10-15) — 모든 목록 화면 같은 줄 순서·같은 부품 ====================
   ① 찾기 줄 .lt-find = 찾기 칸(.f-search) + 찾는 기능 버튼(QR로 찾기) — 찾는 것끼리만
   ② 상태 세그먼트(.seg / .chip-seg — 위 공용 모양)
   ③ 보기 줄 .lt-view = [골라 보기 ▾] [정렬 ▾](+ 태그 ▾ 등) — 버튼 = 보조 .btn/.chip + .lt-btn(글자 + ▾). 정렬 버튼 글자는 늘 "정렬".
      휴대폰 = 같은 폭 도구 칸 한 줄(그림 + 글자, 오른쪽부터 · 2026-10-24 v2.15.1 — 아래 "휴대폰 보기 줄" 설명):
        .lt-view.lt-grid(휴대폰 화면) · html.app-m .lt-view(공용 한 장 화면의 휴대폰 틀) · 칸 그림 = 단추의 data-ico
   ④ 개수 줄 .lt-count = 회색 한 줄 .lt-cnt("N마리" + 지금 정렬 이름 .lt-now) + 오른쪽 [고르기] 켜기/끄기 스위치 .sw-btn(선택 기능이 있는 화면만)
   ⑤ 목록 */
.lt-find{display:flex;align-items:center;gap:var(--s2);min-width:0;}
.lt-find > .f-search,.lt-find > label{flex:1 1 auto;min-width:0;}
.lt-find > .btn{flex:0 0 auto;gap:6px;}
/* (2026-10-15 사용자 "개체 찾는 창은 QR 검색이랑 같이") [QR로 찾기] = .btn.lt-qr(js/list-tools.js qrBtnHtml) — 찾기 칸 바로 옆, 높이 48·모서리 12·QR 그림 + 글자.
   글자는 줄바꿈·잘림 없이 늘 한 줄(좁으면 찾기 칸이 줄어든다). 02 .gl-qrbtn · m02 .m2-qr · 개체 고르기 창 .gks-qr · 기록할 개체 고르기 .care-pick-qr 같은 모양 */
.lt-qr{flex:0 0 auto;gap:6px;white-space:nowrap;padding:0 var(--s4) 0 var(--s3);}
.lt-qr > svg{flex:0 0 auto;}
@media (max-width:350px){.btn.lt-qr{padding:0 var(--s3) 0 10px;gap:4px;}.lt-qr > svg{width:18px;height:18px;}}
/* (v2.35.9 디자이너 A0101·A0114) 글자 없는 QR 그림 단추(qrBtnHtml — .lt-qr-ic) — 찾기 칸 높이와 같은 네모 칸 하나 · 그림 26 · 찾기 칸이 넓어짐 */
.btn.lt-qr.lt-qr-ic,.lt-find > .btn.lt-qr-ic{width:var(--ctl,48px);min-width:var(--ctl,48px);padding:0;gap:0;justify-content:center;color:var(--ink);}
.btn.lt-qr.lt-qr-ic > svg{width:26px;height:26px;}
/* (v3.0 도마도 — v2.35.9 합침) 그림 = 디자이너 아이콘 img/icons/qr.svg(.di-qr) — 원본 viewBox 100 에서 그림은 30.3~69.7(약 40%) → mask 를 233% 로 키워
   그림만 26 칸에 꽉(v2.35.9 인라인 그림의 viewBox 28.5 43 과 같은 자름) */
.btn.lt-qr-ic > .lt-qr-di{--di-s:26px;-webkit-mask-size:233%;mask-size:233%;}
.lt-view{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);min-width:0;}
.lt-btn{gap:6px;white-space:nowrap;}
.lt-btn > svg{flex:0 0 auto;}
/* 개수 줄 오른쪽에 들어간 [정렬 ▾](고르기 스위치가 없는 화면 — 손님 목록 s.html)는 작게(사용자 2026-10-15 "정렬 버튼은 저것보다 작아져도 괜찮겠다") */
.lt-count > .lt-btn{height:40px;padding:0 var(--s3);font-size:var(--t-sm);}
/* 휴대폰 보기 줄 = 도구 칸 줄(2026-10-24 v2.15.1 — 사용자 "모바일에서 개체 정리해서 보기 할 경우 골라보기 정렬 색으로 보기 태그가 겁나 맘에 안 든다.
   정렬이 개같이 되어있다. 너무 어르신들만 쓸 거라 생각하고 UI 미감을 내다버린게 아닌지?" — v2.13.3 "글자 길이만큼 오른쪽부터 나란히(넘치면 다음 줄)"를 바꿈):
   · 늘 한 줄. 칸 = 같은 폭(줄 폭의 1/4 — 칸이 2~3개인 화면도 같은 크기, 오른쪽부터 채움 · 5개 이상이면 같은 폭으로 나눠 줄어듦).
     칸 순서 = 마크업 순서, 맨 오른쪽은 늘 [정렬] · 그 왼쪽 [골라 보기] · 그 밖(태그·색으로 보기·보기 설정·다른 기간·매장)은 더 왼쪽.
   · 칸 모양 = 보조 단추와 같은 흰 면 + 그림자(테두리 없음) · 모서리 12 · 높이 56 · 칸 사이 8(좁은 폰 6) · 위 작은 선 그림(22px, data-ico) + 아래 글자(15 · 좁은 폰 14).
     글자 라벨은 늘 있음(그림만 금지) · ▾ 는 뺌(안의 svg 숨김 — 누르면 시트가 열리는 것은 칸 모양으로).
     긴 글자는 칸 안에서 낱말 사이 두 줄(잘림·넘침 없음 — 320 에서도 "색으로 보기"·"내 매장 모두"는 한 줄에 들어감).
   · 걸린 조건 = 켜진 칸(.on · aria-pressed · aria-expanded) accent 옅은 면 + accent 글자·그림 + 2px 테두리 · 조건 수 = 그림 오른쪽 위 숫자 딱지(.m2-fcount · .lt-n).
   · 그림 data-ico = filter 골라 보기 · sort 정렬 · color 색으로 보기 · tag 태그 · view 보기 설정 · period 다른 기간 · store 매장 (js/list-tools.js toolBtnHtml 이 글자로 붙임).
   · 같은 줄 안 "걸린 조건"(m02 .m2-conds)은 다음 줄 한 줄 꽉. 컴퓨터(.lt-view 위 줄)는 그대로 — 왼쪽부터 글자 + ▾ 한 줄 */
:root{--lt-gap:8px;}
@media (max-width:374px){:root{--lt-gap:6px;}}
/* width:100% — 세로 flex 줄(경매 .au-frow · 장부 .lg-frow) 안에서 줄 높이를 칸이 한 줄씩 넘어간 높이로 잡지 않게(v2.13.3 장부 기간 줄과 같은 까닭) */
.lt-view.lt-grid,html.app-m .lt-view{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:stretch;gap:var(--s2) var(--lt-gap);width:100%;box-sizing:border-box;}
.lt-view.lt-grid > .btn,.lt-view.lt-grid > .chip,html.app-m .lt-view > .btn,html.app-m .lt-view > .chip{--lt-bg:var(--btn2);
  position:relative;flex:1 1 0;width:auto;min-width:0;max-width:none;margin:0;
  height:auto;min-height:var(--ctl-sm);padding:4px 8px 4px 12px;flex-direction:row;justify-content:flex-start;align-items:center;gap:6px;
  background:var(--lt-bg);color:var(--ink);font-size:var(--fs-chip-s);font-weight:var(--w-semi);line-height:1.2;letter-spacing:-.01em;
  text-align:center;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;}
.lt-view.lt-grid > .btn:active,.lt-view.lt-grid > .chip:active,html.app-m .lt-view > .btn:active,html.app-m .lt-view > .chip:active{transform:scale(.97);}
.lt-view.lt-grid > .btn > svg,.lt-view.lt-grid > .chip > svg,html.app-m .lt-view > .btn > svg,html.app-m .lt-view > .chip > svg{display:none;}
/* (v3.0) 맨 끝 ▾(마지막 svg)만 보임 — 칸 오른쪽 끝 */
.lt-view.lt-grid > .btn > svg:last-child,.lt-view.lt-grid > .chip > svg:last-child,html.app-m .lt-view > .btn > svg:last-child,html.app-m .lt-view > .chip > svg:last-child{display:block;margin-left:auto;width:16px;height:16px;color:var(--ink-3);}
.lt-view.lt-grid > .btn > :is(span,b),.lt-view.lt-grid > .chip > :is(span,b),html.app-m .lt-view > .btn > :is(span,b),html.app-m .lt-view > .chip > :is(span,b){min-width:0;}
.lt-view.lt-grid > .btn[data-ico]::before,.lt-view.lt-grid > .chip[data-ico]::before,html.app-m .lt-view > .btn[data-ico]::before,html.app-m .lt-view > .chip[data-ico]::before{content:"";flex:0 0 auto;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--lt-ico) center/contain no-repeat;mask:var(--lt-ico) center/contain no-repeat;}
/* (v3.0) 그림 = 디자이너 아이콘(태그·필터·정렬 — img/icons/*.svg) — 주소를 변수에 담지 않고 바로(상대 주소가 이 파일 기준으로 풀리게) */
.lt-view.lt-grid > :is(.btn,.chip)[data-ico="tag"]::before,html.app-m .lt-view > :is(.btn,.chip)[data-ico="tag"]::before{-webkit-mask-image:url("../img/icons/tag.svg");mask-image:url("../img/icons/tag.svg");}
.lt-view.lt-grid > :is(.btn,.chip)[data-ico="filter"]::before,html.app-m .lt-view > :is(.btn,.chip)[data-ico="filter"]::before{-webkit-mask-image:url("../img/icons/filter.svg");mask-image:url("../img/icons/filter.svg");}
.lt-view.lt-grid > :is(.btn,.chip)[data-ico="sort"]::before,html.app-m .lt-view > :is(.btn,.chip)[data-ico="sort"]::before{-webkit-mask-image:url("../img/icons/sort.svg");mask-image:url("../img/icons/sort.svg");}
/* (v3.0) 칸이 넷 이상이면(정리해서 보기 [색으로 보기] 등) 예전처럼 그림 위·글자 아래 세로 칸(▾ 없음) — 좁은 폭에서 글자가 칸 안에 들어가게 */
:is(.lt-view.lt-grid,html.app-m .lt-view):has(> :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden])) > :is(.btn,.chip){
  min-height:56px;padding:7px 4px 6px;flex-direction:column;justify-content:center;gap:3px;}
:is(.lt-view.lt-grid,html.app-m .lt-view):has(> :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden])) > :is(.btn,.chip) > svg:last-child{display:none;}
.lt-view.lt-grid > .btn.on,.lt-view.lt-grid > .chip.on,html.app-m .lt-view > .btn.on,html.app-m .lt-view > .chip.on,.lt-view.lt-grid > .btn[aria-pressed="true"],.lt-view.lt-grid > .chip[aria-pressed="true"],html.app-m .lt-view > .btn[aria-pressed="true"],html.app-m .lt-view > .chip[aria-pressed="true"],.lt-view.lt-grid > .btn[aria-expanded="true"],.lt-view.lt-grid > .chip[aria-expanded="true"],html.app-m .lt-view > .btn[aria-expanded="true"],html.app-m .lt-view > .chip[aria-expanded="true"]{--lt-bg:var(--accent-soft);
  color:var(--link);box-shadow:inset 0 0 0 2px var(--sel-line);font-weight:var(--w-bold);}
/* 조건 수 딱지 — 그림 오른쪽 위(칸 바탕색 테두리로 그림과 떨어져 보이게). 오른쪽 끝 = 가운데 + 28px 고정 → 두 자리면 왼쪽(그림 쪽)으로 넓어짐 — 320 칸(67px)에서도 칸 안 */
.lt-view.lt-grid > .btn .m2-fcount,.lt-view.lt-grid > .chip .m2-fcount,html.app-m .lt-view > .btn .m2-fcount,html.app-m .lt-view > .chip .m2-fcount,.lt-view.lt-grid > .btn .lt-n,.lt-view.lt-grid > .chip .lt-n,html.app-m .lt-view > .btn .lt-n,html.app-m .lt-view > .chip .lt-n{position:absolute;top:-6px;left:22px;right:auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;margin:0;padding:0 6px;border-radius:var(--r-full);background:var(--accent);color:var(--accent-ink);
  font-size:var(--t-xs);font-weight:var(--w-bold);line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--lt-bg);
  white-space:nowrap;word-break:normal;overflow-wrap:normal;max-width:none;}
.lt-view.lt-grid > .btn .m2-fcount[hidden],.lt-view.lt-grid > .chip .m2-fcount[hidden],html.app-m .lt-view > .btn .m2-fcount[hidden],html.app-m .lt-view > .chip .m2-fcount[hidden],.lt-view.lt-grid > .btn .lt-n[hidden],.lt-view.lt-grid > .chip .lt-n[hidden],html.app-m .lt-view > .btn .lt-n[hidden],html.app-m .lt-view > .chip .lt-n[hidden]{display:none;}
:is(.lt-view.lt-grid,html.app-m .lt-view):has(> :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden])) > :is(.btn,.chip) :is(.m2-fcount,.lt-n){top:3px;left:auto;right:calc(50% - 28px);}
/* (v2.35.11 디자이너 A0137 "태그·필터·정렬 폰트 줄이기" — v3 합침) 칸 글자 = --fs-chip-s 14(디자이너 그림 비율 · css/tokens.css — 옛 15, 374 아래 14) · 폭·높이는 그대로 */
@media (max-width:374px){
  .lt-view.lt-grid > .btn,.lt-view.lt-grid > .chip,html.app-m .lt-view > .btn,html.app-m .lt-view > .chip{padding-left:8px;padding-right:4px;gap:4px;letter-spacing:-.02em;}
  :is(.lt-view.lt-grid,html.app-m .lt-view):has(> :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden])) > :is(.btn,.chip){padding:7px 2px 6px;}
}
/* 320 대 — 칸 67px: "내 매장 모두"(장부 매장 둘 이상)·"색으로 보기"도 한 줄에(그래도 넘치면 낱말 사이 두 줄) */
@media (max-width:340px){
  .lt-view.lt-grid > .btn,.lt-view.lt-grid > .chip,html.app-m .lt-view > .btn,html.app-m .lt-view > .chip{padding-left:1px;padding-right:1px;letter-spacing:-.03em;}
}
/* (3차-D — 3차-M 요청 1 · §7 확대 200% 195) 아주 좁은 폭(259 이하 — 칸 약 54px)은 왼쪽 그림을 빼고 [글자 ▾]만 · 그래도 모자라면 글자 줄임표(▾ 는 칸 안) */
@media (max-width:259px){
  .lt-view.lt-grid > :is(.btn,.chip)[data-ico]::before,html.app-m .lt-view > :is(.btn,.chip)[data-ico]::before{display:none;}
  .lt-view.lt-grid > :is(.btn,.chip),html.app-m .lt-view > :is(.btn,.chip){padding-left:6px;padding-right:4px;gap:2px;justify-content:center;}
  .lt-view.lt-grid > :is(.btn,.chip) > :is(span,b),html.app-m .lt-view > :is(.btn,.chip) > :is(span,b){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lt-view.lt-grid > :is(.btn,.chip) > svg:last-child,html.app-m .lt-view > :is(.btn,.chip) > svg:last-child{flex:0 0 auto;margin-left:0;}
}
[data-ico="filter"]{--lt-ico: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='M10 20a1 1 0 0 0 .55.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .52-1.34L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.74 1.67l7.22 7.99A2 2 0 0 1 10 14z'/%3E%3C/svg%3E");}
[data-ico="sort"]{--lt-ico: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='m21 16-4 4-4-4M17 20V4M3 8l4-4 4 4M7 4v16'/%3E%3C/svg%3E");}
[data-ico="color"]{--lt-ico: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 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z'/%3E%3Ccircle cx='13.5' cy='6.5' r='1.2' fill='%23000'/%3E%3Ccircle cx='17.5' cy='10.5' r='1.2' fill='%23000'/%3E%3Ccircle cx='6.5' cy='12.5' r='1.2' fill='%23000'/%3E%3Ccircle cx='8.5' cy='7.5' r='1.2' fill='%23000'/%3E%3C/svg%3E");}
[data-ico="tag"]{--lt-ico: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.59 2.59A2 2 0 0 0 11.17 2H4a2 2 0 0 0-2 2v7.17a2 2 0 0 0 .59 1.42l8.7 8.7a2.43 2.43 0 0 0 3.42 0l6.58-6.58a2.43 2.43 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.2' fill='%23000'/%3E%3C/svg%3E");}
[data-ico="view"]{--lt-ico: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='M20 7h-9M14 17H5'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3C/svg%3E");}
[data-ico="period"]{--lt-ico: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='M8 2v4M16 2v4M3 10h18'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3C/svg%3E");}
[data-ico="store"]{--lt-ico: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='M3 21h18M5 21V9l7-5 7 5v12'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");}
/* 개수 글이 길면 글이 칸 안에서 줄바꿈되고 [고르기] 스위치는 늘 오른쪽(다음 줄로 밀리지 않음) */
.lt-count{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-width:0;}
.lt-cnt{flex:1 1 0;min-width:0;margin:0;font-size:var(--t-md);color:var(--ink-3);line-height:1.5;overflow-wrap:anywhere;}
.lt-cnt b{color:var(--ink);font-weight:var(--w-bold);}
.lt-now:not(:empty)::before{content:"·";margin:0 .4em;}
/* (v2.36 U-06) 목록을 못 읽어 개수 글이 비면(실패 안내는 목록 자리 상자 하나) 지금 정렬 이름도 숨김 — "· 최근 기록순"만 덩그러니 남지 않게 */
.lt-cnt > :empty + .lt-now,.page-sub > :empty + .lt-now{display:none;}
/* 개수 줄 토막(.lt-seg "알 N개" · "N개 숨김", 지금 정렬 이름 .lt-now)은 토막 안에서 줄바꿈 안 함 — 숫자와 이름이 떨어지지 않게(줄은 " · " 에서만 나뉨) */
.lt-seg,.lt-now{white-space:nowrap;}
/* (v2.9 길이 검사) 글 안 "·" 가 줄 첫머리에 오지 않게 — 앞 낱말 끝과 "·" 를 줄바꿈 없는 한 덩어리로(js/geckos.js dotsHtml 이 감쌈 · 장부 .lg-bit 와 같은 뜻) */
.nb-dot{white-space:nowrap;}
/* [고르기] 켜기/끄기 스위치 — 글자 라벨 + 작은 스위치(role="switch" aria-checked). 누르는 곳 = 12px 네모 48px(바탕 없음, 마우스 올림 옅은 면).
   스위치 홈·동그라미는 켜짐/꺼짐 표시(켜짐 = accent). 켜면 그 화면의 선택 모드(체크 + 아래 선택 바), 끄면 해제 */
.sw-btn{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;min-height:var(--ctl);margin:0;padding:0 var(--s2) 0 var(--s3);border:0;
  border-radius:var(--r-btn);background:transparent;color:var(--ink);font-family:inherit;font-size:var(--t-md);font-weight:var(--w-semi);line-height:1.2;
  cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.sw-btn:hover{background:var(--fill);}
.sw-btn:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}
.sw-btn[hidden]{display:none;}
.sw-btn .sw-t{position:relative;flex:0 0 auto;width:46px;height:28px;border-radius:var(--r-tag);background:var(--line-3);
  transition:background-color var(--dur-1) var(--ease);}
.sw-btn .sw-t::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--panel);box-shadow:var(--sh-1);
  transition:transform var(--dur-1) var(--ease);}
.sw-btn[aria-checked="true"] .sw-t{background:var(--accent);}
.sw-btn[aria-checked="true"] .sw-t::after{transform:translateX(18px);}
@media (prefers-reduced-motion:reduce){.sw-btn .sw-t,.sw-btn .sw-t::after{transition:none;}}
/* 좁은 휴대폰(≤360) — 개수 줄이 한 줄에 들어가게 스위치 둘레·홈만 조금 작게(누르는 높이 48·글자 크기는 그대로) */
@media (max-width:360px){
  .lt-count{gap:var(--s2);}
  .sw-btn{gap:6px;padding:0 4px 0 var(--s2);}
  .sw-btn .sw-t{width:40px;height:24px;}
  .sw-btn .sw-t::after{width:18px;height:18px;}
  .sw-btn[aria-checked="true"] .sw-t::after{transform:translateX(16px);}
}
/* 정렬 창(컴퓨터 펼침 메뉴 — js/list-tools.js openSortPicker). 지금 정렬 = ✓ + 옅은 accent 면 */
.lt-sortpop{min-width:240px;}
.lt-sortpop .lt-ck{width:20px;height:20px;display:inline-flex;flex:0 0 auto;color:var(--accent);}
.lt-sortpop .mi .lt-ck svg{color:var(--accent);}
/* 지금 항목에 방향 글자(.lt-sd "가→하")·안내(.lt-sh "한 번 더 누르면 순서가 뒤집혀요")가 붙을 때 — 02 정렬 메뉴(.gl-smenu)와 같은 모양 */
.lt-sortpop .lt-sb{display:flex;flex-direction:column;gap:3px;min-width:0;padding:7px 0;}
.lt-sortpop .lt-sl{display:flex;align-items:center;gap:var(--s2);}
.lt-sortpop .lt-sd{flex:0 0 auto;padding:2px 10px;border:1.5px solid currentColor;border-radius:var(--r-full);background:var(--panel);
  font-size:var(--t-sm);font-weight:var(--w-bold);line-height:1.3;}
.lt-sortpop .lt-sh{font-size:var(--t-xs);font-weight:var(--w-reg);color:var(--ink-2);line-height:1.3;white-space:normal;}
/* (2026-10-21 v2.8 장부) 기간 고르기 — [이번 달 | 올해 | 전체](.seg.lt-pseg) · [다른 기간 ▾](.chip.lt-btn.lt-pother — 다른 기간을 보는 중이면 .on)
   · 다른 기간 창(js/list-tools.js openPeriodPicker — 컴퓨터 펼침 = 정렬 창 모양 + 줄마다 날짜 범위 .lt-sh, 휴대폰 = 아래 시트) */
.lt-periodpop{min-width:280px;}
.lt-periodpop .lt-sb{padding:8px 0;}
.lt-periodpop .lt-sh{font-variant-numeric:tabular-nums;}
/* (2026-10-22 v2.9 U2) 형질 한 줄 — js/traits.js traitLineHtml. "형질 할리퀸 · 핀스트라이프"(표시만 — 누르지 않음).
   라벨 .trt-k = 흐린 굵은 글자 · 글자 .trt-v = 낱말 사이에서 줄바꿈(긴 글자 40자는 아무 데서나) · .trt-clip = 카드용 한 줄(앞 2개 말줄임 + "외 N" 늘 보임) */
.trt-line{display:block;min-width:0;line-height:1.45;color:var(--ink-2);word-break:keep-all;overflow-wrap:anywhere;}
.trt-line .trt-k{margin-right:2px;font-weight:var(--w-bold);color:var(--ink-3);white-space:nowrap;}
.trt-line.trt-clip{display:flex;align-items:baseline;gap:4px;white-space:nowrap;overflow:hidden;}
.trt-line.trt-clip > *{flex:0 0 auto;}
.trt-line.trt-clip .trt-k{margin-right:0;}
.trt-line.trt-clip .trt-v{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.trt-line.trt-clip .trt-m{color:var(--ink-3);white-space:nowrap;}

/* ==================== (v3.0 도마도) 그림 아이콘 · 제목 글꼴 ====================
   .di = 디자이너 아이콘(img/icons/*.svg — viewBox 100, 원본 assets/APP/icon PNG 를 옮긴 것)을 mask 로 칠함 → 색 = currentColor(고른 탭 = 주 색). 크기 = --di-s(기본 24px).
   쓰는 법: <span class="di di-gecko" aria-hidden="true"></span> · js/icons.js icon("gecko", 24).
   이름(뜻 — 설계 §1): egg-fill 알(채움) · gecko 개체 · qr · photo 사진 · home 홈 · egg 알(선) · menu 메뉴(네모 넷) · bell 알림 · box 보관함 ·
     tag 태그 · filter 필터 · info 안내 · sort 정렬 · excel 엑셀(표) · link 링크 · feed 급여(그릇) · check 확인 · edit 편집(연필 — 3차-H, 같은 선 굵기로 그림).
   디자이너 그림이 없는 곳은 지금 선 그림 그대로(굵기만 비슷하게). 새 그림을 받으면 같은 이름으로 바꿔 끼운다. */
.di{display:inline-block;flex:0 0 auto;width:var(--di-s,24px);height:var(--di-s,24px);background-color:currentColor;vertical-align:middle;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.di-egg-fill{-webkit-mask-image:url("../img/icons/egg-fill.svg");mask-image:url("../img/icons/egg-fill.svg");}
.di-gecko{-webkit-mask-image:url("../img/icons/gecko.svg");mask-image:url("../img/icons/gecko.svg");}
.di-qr{-webkit-mask-image:url("../img/icons/qr.svg");mask-image:url("../img/icons/qr.svg");}
.di-photo{-webkit-mask-image:url("../img/icons/photo.svg");mask-image:url("../img/icons/photo.svg");}
.di-home{-webkit-mask-image:url("../img/icons/home.svg");mask-image:url("../img/icons/home.svg");}
.di-egg{-webkit-mask-image:url("../img/icons/egg.svg");mask-image:url("../img/icons/egg.svg");}
.di-menu{-webkit-mask-image:url("../img/icons/menu.svg");mask-image:url("../img/icons/menu.svg");}
.di-bell{-webkit-mask-image:url("../img/icons/bell.svg");mask-image:url("../img/icons/bell.svg");}
.di-box{-webkit-mask-image:url("../img/icons/box.svg");mask-image:url("../img/icons/box.svg");}
.di-tag{-webkit-mask-image:url("../img/icons/tag.svg");mask-image:url("../img/icons/tag.svg");}
.di-filter{-webkit-mask-image:url("../img/icons/filter.svg");mask-image:url("../img/icons/filter.svg");}
.di-info{-webkit-mask-image:url("../img/icons/info.svg");mask-image:url("../img/icons/info.svg");}
.di-sort{-webkit-mask-image:url("../img/icons/sort.svg");mask-image:url("../img/icons/sort.svg");}
.di-excel{-webkit-mask-image:url("../img/icons/excel.svg");mask-image:url("../img/icons/excel.svg");}
.di-link{-webkit-mask-image:url("../img/icons/link.svg");mask-image:url("../img/icons/link.svg");}
.di-feed{-webkit-mask-image:url("../img/icons/feed.svg");mask-image:url("../img/icons/feed.svg");}
.di-check{-webkit-mask-image:url("../img/icons/check.svg");mask-image:url("../img/icons/check.svg");}
.di-edit{-webkit-mask-image:url("../img/icons/edit.svg");mask-image:url("../img/icons/edit.svg");}   /* (3차-H) 편집(연필) — 디자이너 그림에 없어 같은 선 굵기로 그림 */
/* 제목 글꼴(Cafe24 써라운드 — 굵은 한 벌) — 앱 이름·쪽 제목·홈 상자 제목·큰 숫자 */
.ff-display{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;}
.page-title{font-family:var(--font);font-weight:700;letter-spacing:-.02em;}   /* (v3.0 1차 고침) 쪽 제목 = Pretendard 700(써라운드 아님 — domado-ui.md §2) */
/* 화면에서만 숨김(화면 읽기·E2E 이름은 그대로) — 그림만 있는 단추의 글자 */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;font-size:1px;line-height:1px;}  /* (v3.0) 글자 크기 1px — 안 보이는 글이 줄 높이를 차지해 세로 가운데 재기를 흔들지 않게(읽어 주기는 그대로) */

/* ==================== (v3.0 1차 고침 — team/contracts/domado-ui.md §1·§4·§6) 공용 ====================
   ① 누름 44 — 보이는 모양은 그림 크기 그대로, 누름 칸만 투명 ::after 로 44 까지 넓힘(가운데 기준). 넓히는 것 = 아래 목록 + 화면 CSS 가 같은 꼴로.
      (안쪽 글자 말줄임은 안쪽 span 에서 — 단추 자신은 overflow:visible 이어야 ::after 가 안 잘림) */
.hit44{position:relative;overflow:visible;}
.hit44::after,.lt-view.lt-grid > :is(.btn,.chip)::after,html.app-m .lt-view > :is(.btn,.chip)::after{
  content:"";position:absolute;left:min(0px,calc(50% - 22px));top:min(0px,calc(50% - 22px));width:max(100%,44px);height:max(100%,44px);}
/* ② 도구 칸 줄(태그·필터·정렬 — 휴대폰 .lt-grid · 앱 틀 휴대폰 html.app-m .lt-view) = 같은 폭 가로 칸 · 보이는 높이 36.8 · 모서리 15 · 흰 칸 + 옅은 테두리 ·
      그림 18.6 + 글자(Pretendard 600 14 — v2.35.11 디자이너 A0137 --fs-chip-s · 한 줄 — 넘치면 말줄임, 두 줄 금지) + ▾ 오른쪽 끝 · 칸 사이 = --gap-x */
.lt-view.lt-grid,html.app-m .lt-view{column-gap:var(--gap-x);row-gap:var(--gap-x);}
.lt-view.lt-grid > :is(.btn,.chip),html.app-m .lt-view > :is(.btn,.chip){position:relative;overflow:visible;min-height:36.8px;height:36.8px;padding:0 10px 0 12px;gap:7px;
  border-radius:var(--r-ctl);box-shadow:inset 0 0 0 1px #ececeb,0 1px 3px rgba(12,12,12,.06);
  font-size:var(--fs-chip-s);font-weight:600;color:#010101;white-space:nowrap;word-break:normal;overflow-wrap:normal;letter-spacing:-.01em;}
.lt-view.lt-grid > :is(.btn,.chip) > :is(span,b):not(.m2-fcount):not(.lt-n),html.app-m .lt-view > :is(.btn,.chip) > :is(span,b):not(.m2-fcount):not(.lt-n){
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lt-view.lt-grid > :is(.btn,.chip)[data-ico]::before,html.app-m .lt-view > :is(.btn,.chip)[data-ico]::before{width:18.6px;height:18.6px;}
.lt-view.lt-grid > :is(.btn,.chip) > svg:last-child,html.app-m .lt-view > :is(.btn,.chip) > svg:last-child{width:14px;height:14px;color:#1b1b1c;}
/* 칸이 넷 이상이어도 가로 칸 한 줄(세로 칸 없음 — 글자 두 줄·한 글자씩 꺾임 막기). 넘치는 칸 글자는 말줄임 · ▾ 는 뺌 */
:is(.lt-view.lt-grid,html.app-m .lt-view):has(> :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden])) > :is(.btn,.chip){
  min-height:36.8px;height:36.8px;padding:0 6px 0 8px;flex-direction:row;justify-content:flex-start;gap:5px;}
:is(.lt-view.lt-grid,html.app-m .lt-view):has(> :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden]) ~ :is(.btn,.chip):not([hidden])) > :is(.btn,.chip) :is(.m2-fcount,.lt-n){top:-6px;left:18px;right:auto;}
@media (max-width:374px){
  .lt-view.lt-grid > :is(.btn,.chip),html.app-m .lt-view > :is(.btn,.chip){padding:0 6px 0 8px;gap:5px;}
}
.lt-view.lt-grid > :is(.btn,.chip):is(.on,[aria-pressed="true"],[aria-expanded="true"]),html.app-m .lt-view > :is(.btn,.chip):is(.on,[aria-pressed="true"],[aria-expanded="true"]){
  color:var(--accent-text);box-shadow:inset 0 0 0 2px var(--sel-line);}
/* ③ 켜기 단추(고르기 등 .sw-btn) — 켜짐 색 = 디자이너 #f9826d */
.sw-btn[aria-checked="true"] .sw-t{background:var(--switch-on);}
/* ④ 진한 산호 글자 — 22px 미만 산호 글자 자리(딱지·고른 줄) */
.tag.accent{color:var(--accent-text);}
/* ⑤ (2차-P) 가로로 미는 줄 끝 흐림 — 넘치는 칩 줄 등. js 가 .hs-l(왼쪽에 더 있음)·.hs-r(오른쪽에 더 있음)을 붙인다(js/list-tools.js wireScrollFade).
      흐림 폭 28 · 다 보이면 흐림 없음 */
.hs-fade{--hs-f:28px;}
/* (v3.0 3차-E) 정해진 칩·탭 줄 단계 맞춤(js/list-tools.js wireFitSteps)이 재는 동안 움직임 끔 — 모션 최소화(.01ms)에서도 바로 잰 값이 새 값이게 */
.fit-now,.fit-now *,.fit-now *::before,.fit-now *::after{transition:none !important;}
.hs-fade.hs-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--hs-f)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--hs-f)),transparent);}
.hs-fade.hs-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--hs-f));mask-image:linear-gradient(90deg,transparent,#000 var(--hs-f));}
.hs-fade.hs-l.hs-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--hs-f),#000 calc(100% - var(--hs-f)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--hs-f),#000 calc(100% - var(--hs-f)),transparent);}
/* ⑥ (2차-P) 밑줄 탭(.ptabs — 개체 상세 탭·분양관리·경매 등 앱 전체) — 글자 = 칩·탭 역할 15(계약 §2) · 고른 탭 = 진한 산호 글자(22px 미만 산호 = --accent-text) + 산호 밑줄 ·
      안 고른 탭 = 보조 회색 · 아래 선 = 옅은 선(그림 탭 줄 #ececea) */
.ptabs{box-shadow:inset 0 -1px 0 var(--line-2);}
.ptab{font-size:var(--fs-chip);font-weight:600;color:var(--ink-sub);letter-spacing:-.01em;}
.ptab.on,.ptab[aria-selected="true"],.ptab[aria-current="page"]{color:var(--accent-text);font-weight:700;}
.ptab .n{font-size:14px;color:var(--ink-sub);}
.ptab.on .n,.ptab[aria-selected="true"] .n,.ptab[aria-current="page"] .n{color:inherit;}
/* ⑦ (2차-P) 하나만 고르는 줄 — 도마도 칩 줄 말투(그림 3: 회색 우물 없음 · 흰 칸 + 옅은 가장자리 · 고른 칸 = 산호 그라데이션 + 흰 글자 800 — 계약 §3 칩 켜짐).
      .seg(이어 붙인 한 덩어리 — 보기 바꾸기·폼 고르기) = 흰 바탕 덩어리(--r-ctl · --sh-ctl) 안에서 고른 칸만 산호 ·
      .chip-seg(칩 줄 — 단계·상태로 보기) = 칩마다 흰 칸(사이 --gap-x) · 고른 칩 산호. 휴대폰 칸 높이 = .seg 44 · .chip-seg 38.6(누름 44 ::after) */
.seg{gap:3px;padding:3px;border-radius:var(--r-ctl);background:var(--panel);box-shadow:var(--sh-ctl);}
.seg > a,.seg > button,.seg > span,.seg > .chip{border-radius:calc(var(--r-ctl) - 3px);color:var(--ink-sub);font-size:var(--fs-chip);font-weight:600;}
.seg > *:hover{color:var(--ink);background:var(--fill);}
.seg > .on,.seg > [aria-pressed="true"],.seg > [aria-selected="true"],.seg > [aria-checked="true"],.seg > .chip.on{
  background:var(--chip-on-bg);color:var(--accent-ink);font-weight:800;box-shadow:0 4px 10px -6px var(--accent-glow);}
.seg > .on .n,.seg > [aria-pressed="true"] .n,.seg > [aria-selected="true"] .n,.seg > .chip.on .n{color:inherit;opacity:1;}
.chip-seg{gap:var(--gap-x);padding:0;border-radius:0;background:transparent;}
.chip-seg > .chip{background:var(--panel);color:#010101;box-shadow:var(--sh-ctl);border-radius:var(--r-ctl);font-size:var(--fs-chip);font-weight:600;}
.chip-seg > .chip:hover{color:#010101;box-shadow:var(--sh-ctl);background:var(--fill);}
.chip-seg > .chip .n{color:#424346;font-size:var(--fs-chip);font-weight:600;}
.chip-seg > .chip.on,.chip-seg > .chip[aria-pressed="true"]{background:var(--chip-on-bg);color:var(--accent-ink);font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(247,202,194,.9),0 4px 10px -6px var(--accent-glow);}
.chip-seg > .chip.on .n,.chip-seg > .chip[aria-pressed="true"] .n{color:var(--accent-ink);opacity:1;}
html.is-mobile .seg > :is(a,button,span,.chip){height:44px;min-height:44px;}
html.is-mobile .seg-fit > :is(a,button,span,.chip){height:auto;min-height:44px;}
/* (3차-D) 컴퓨터 — 이어 붙인 고르기(.seg) 바깥 높이 = 옆 단추·찾기 칸(--ctl 48)과 같게: 안쪽 2 + 칸 44(누름 44 그대로) — 도구 줄 상자 위아래가 맞음 */
html:not(.is-mobile):not(.app-m) .seg:not(.seg-fit){padding:2px;}
html:not(.is-mobile):not(.app-m) .seg:not(.seg-fit) > :is(a,button,span,.chip){height:calc(var(--ctl) - 4px);min-height:44px;border-radius:calc(var(--r-ctl) - 2px);}
html.is-mobile .chip-seg > .chip{position:relative;overflow:visible;height:38.6px;min-height:38.6px;}
html.is-mobile .chip-seg > .chip::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 22px);height:44px;}
/* ⑧ (2차-P) 칩·보조 단추 가장자리 = 흰 칸 말투(옅은 테두리 + 아래 번짐 — 찾기 칸·QR 과 같은 --sh-ctl) · 모서리 = 칩 --r-ctl */
.chip{border-radius:var(--r-ctl);box-shadow:var(--sh-ctl);}
.chip:hover{box-shadow:var(--sh-ctl);background:var(--fill);}
.chip.on,.chip[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(247,202,194,.9),0 4px 10px -6px var(--accent-glow);}
/* ⑨ (2차-P) 목록 도구 줄 공용(list-toolbar.md — 알 관리·동배·메이팅·분양관리 등 모든 목록) = 개체 목록(그림 3)과 같은 모양:
      찾기 칸 = 흰 칸 44(그림 42.3 + 누름) · 모서리 --r-ctl · 옅은 가장자리 · 돋보기 19 · 안내 글 #45464c 17 / 찾기 줄 칸 사이 --gap-x /
      개수 줄 = "N마리"(Pretendard 600 17.5 검정) · 지금 정렬(600 15 보조 회색) / [고르기] = 그림 켜기 단추(70.9×25.5 · 켜짐 #f9826d — 원칙 0 그림 단추, 글자는 화면 읽기용) */
.f-search{border-radius:var(--r-ctl);box-shadow:var(--sh-ctl);color:#45464c;}
.f-search input::placeholder{color:#45464c;}
:is(html.is-mobile,html.app-m) .f-search{height:44px;padding:0 4px 0 13px;gap:9px;}
:is(html.is-mobile,html.app-m) .f-search > svg{width:19px;height:19px;}
:is(html.is-mobile,html.app-m) .f-search input{font-size:17px;font-weight:500;}
:is(html.is-mobile,html.app-m) .lt-find{gap:var(--gap-x);}
:is(html.is-mobile,html.app-m) .lt-find > .btn{height:44px;min-height:44px;border-radius:var(--r-ctl);box-shadow:var(--sh-ctl);}
:is(html.is-mobile,html.app-m) .lt-count{min-height:44px;}
:is(html.is-mobile,html.app-m) .lt-cnt{font-size:var(--fs-chip);font-weight:600;color:var(--ink-sub);line-height:1.3;}
:is(html.is-mobile,html.app-m) .lt-cnt b{font-size:var(--fs-count);font-weight:600;color:#000000;}
:is(html.is-mobile,html.app-m) .lt-count > .sw-btn{position:relative;min-height:44px;height:44px;padding:0;gap:0;border-radius:999px;background:transparent;}
:is(html.is-mobile,html.app-m) .lt-count > .sw-btn:hover{background:transparent;}
:is(html.is-mobile,html.app-m) .lt-count > .sw-btn .sw-l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;font-size:1px;line-height:1px;}
:is(html.is-mobile,html.app-m) .lt-count > .sw-btn .sw-t{width:70.9px;height:25.5px;background:#d9d9d8;}
:is(html.is-mobile,html.app-m) .lt-count > .sw-btn .sw-t::after{top:1px;left:1px;width:23.5px;height:23.5px;}
:is(html.is-mobile,html.app-m) .lt-count > .sw-btn[aria-checked="true"] .sw-t{background:var(--switch-on);}
:is(html.is-mobile,html.app-m) .lt-count > .sw-btn[aria-checked="true"] .sw-t::after{transform:translateX(45.4px);}
/* ⑩ (2차-P) 짧은 고르기 줄(.opt-row — 성별·알 종류·알 상태 등) = .seg 와 같은 모양(흰 덩어리 안 고른 칸 산호 · 테두리 칸 없앰) */
.opt-row{gap:3px;padding:3px;border-radius:var(--r-ctl);background:var(--panel);box-shadow:var(--sh-ctl);}
.opt-row > button,.opt-row > label,.opt-row > a{box-shadow:none;border-radius:calc(var(--r-ctl) - 3px);color:var(--ink-sub);font-size:var(--fs-chip);font-weight:600;}
.opt-row > :first-child,.opt-row > :last-child,.opt-row > :only-child{border-radius:calc(var(--r-ctl) - 3px);}
.opt-row > * + *{margin-left:0;}
.opt-row > button:hover,.opt-row > label:hover,.opt-row > a:hover{background:var(--fill);color:var(--ink);}
.opt-row > .on,.opt-row > [aria-pressed="true"],.opt-row > [aria-checked="true"],.opt-row > :has(> input:checked){
  background:var(--chip-on-bg);color:var(--accent-ink);box-shadow:0 4px 10px -6px var(--accent-glow);font-weight:800;}
.opt-row > label:has(> input:focus-visible){outline:3px solid var(--accent-ring);outline-offset:-2px;}
html.is-mobile .opt-row > :is(button,label,a){height:44px;}
.opt-row > :is(.on,[aria-pressed="true"],[aria-checked="true"]):hover,.opt-row > :has(> input:checked):hover{background:var(--chip-on-bg);color:var(--accent-ink);}
/* ⑪ (2차-P) 공용 창 도마도 말투 — 확인·알림·폼 창(js/ui-dialog.js) · 달력(js/calendar.js) · 날짜 칸(js/date-field.js) · 꾹 누르기 빠른 기록(js/gecko-context-menu.js) ·
      부·모 고르기(js/pair-picker.js). 각 파일이 넣는 스타일 뒤에 오도록 :root 로 한 단계 높여 덮는다(구조·훅·동작 그대로 — 모양만).
      · 창·시트 모서리 = 큰 상자(--r-box 23) · 보조 단추(취소·닫기·이전 달 등) = 흰 칸 + 옅은 가장자리(--sh-ctl · 모서리 --r-ctl) — 회색 채움 없앰
      · 진한 단추(확인) = 산호 그라데이션 + 흰 글자 800(그림 [확인] — 원칙 0) · 위험 = 진한 빨강 그대로 · 입력 칸 모서리 --r-ctl
      · 빠른 기록 칸 = 흰 칸(급여·체중 큰 칸 = 옅은 산호 면 + 진한 산호 글자) · 안 고른 별 = --ink-4(큰 별 3 : 1) */
:root .uidlg{border-radius:var(--r-box);}
:root .uidlg-f button{border-radius:var(--r-ctl);}
:root .uidlg-cancel{background:var(--panel);color:var(--ink);box-shadow:var(--sh-ctl);}
:root .uidlg-cancel:hover{background:var(--fill);}
:root .uidlg-ok{background:var(--ok-btn-bg);color:var(--accent-ink);font-weight:800;box-shadow:0 4px 12px -6px var(--accent-glow);}
:root .uidlg-ok:hover{background:var(--ok-btn-bg);filter:brightness(.97);}
:root .uidlg-ok.danger{background:var(--dang);color:#ffffff;box-shadow:none;filter:none;}
/* (v2.35.12 A0131 디자이너 "기존 팔레트의 연한 빨강" — v3 합침) danger:"soft"(친구 초대 [코드 취소]) = 도마도 팔레트의 옅은 산호 #ffac9e + 진한 산호 글자 #8b3224(4.5 : 1).
   뜻 있는 색이라 브랜드 색을 따라가지 않음(고정 값) · v2 의 옅은 빨강(#fcebea)은 도마도 흰 창에서 꺼진 단추처럼 옅어 팔레트 값으로 · 어둡게 = v2 와 같은 옅은 빨강 + 빨강 글자 */
:root .uidlg-ok.danger.soft{background:#ffac9e;color:#8b3224;}
:root .uidlg-ok.danger.soft:hover{background:#ffac9e;filter:brightness(.96);}
@media (prefers-color-scheme:dark){:root.dark-ok:not([data-theme=light]) .uidlg-ok.danger.soft:is(*,:hover){background:var(--dang-soft);color:var(--dang);}}
:root.dark-ok[data-theme=dark] .uidlg-ok.danger.soft:is(*,:hover){background:var(--dang-soft);color:var(--dang);}
:root .uidlg-msg,:root .uidlg-fmsg{color:var(--ink-2);}
:root .uidlg-field input,:root .uidlg-field select{border-radius:var(--r-ctl);}
:root .uidlg-field .uidlg-hint,:root .uidlg-act-s,:root .uidlg-act-h{color:var(--ink-sub);}
:root .uidlg-act{border-radius:var(--r-ctl);}
@media (max-width:768px){
  :root .uidlg,:root .uidlg.wide{border-radius:var(--r-box) var(--r-box) 0 0;}
  :root .uidlg-f button,:root .uidlg-field input:not([type=checkbox]):not([type=radio]):not([type=file]),:root .uidlg-field select{border-radius:var(--r-ctl);}
}
:root .uidlg-toast{border-radius:999px;}
/* 달력 */
:root .cgmcal{border-radius:var(--r-box);}
:root .cgmcal-host.sheet .cgmcal{border-radius:var(--r-box) var(--r-box) 0 0;}
:root .cgmcal-nav,:root .cgmcal-nav:disabled{border-radius:var(--r-ctl);background:var(--panel);box-shadow:var(--sh-ctl);}
:root .cgmcal-day{border-radius:var(--r-ctl);}
:root .cgmcal-day.sel,:root .cgmcal-day.sel:hover,:root .cgmcal-opt.sel,:root .cgmcal-opt.sel:hover{background:var(--chip-on-bg);color:var(--accent-ink);box-shadow:0 4px 10px -6px var(--accent-glow);}
:root .cgmcal-opt{border-radius:var(--r-ctl);background:var(--panel);box-shadow:var(--sh-ctl);}
:root .cgmcal-foot button{border-radius:var(--r-ctl);}
:root .cgmcal-clear,:root .cgmcal-close{background:var(--panel);box-shadow:var(--sh-ctl);}
:root .cgmcal-today{background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);}
@media (hover:hover){
  :root .cgmcal-nav:not(:disabled):hover,:root .cgmcal-clear:hover,:root .cgmcal-close:hover,:root .cgmcal-opt:not(:disabled):not(.sel):hover{background:var(--fill);}
}
/* 날짜 칸 [달력] */
:root .df-btn{border-radius:var(--r-ctl);background:var(--panel);box-shadow:var(--sh-ctl);}
:root .df-btn:hover{box-shadow:var(--sh-ctl);background:var(--fill);}
/* 꾹 누르기 빠른 기록 */
:root .gcm{border-radius:var(--r-card);}
:root .gcm-host.sheet .gcm{border-radius:var(--r-box) var(--r-box) 0 0;}
:root .gcm-i{border-radius:var(--r-ctl);}
:root .gcm-i svg,:root .gcm-i .gcm-chev{color:var(--ink);}
:root .gcm-h small,:root .gcm-i .gcm-now,:root .gcm-note{color:var(--ink-sub);}
:root .gcm-recs .gcm-i{background:var(--panel);box-shadow:var(--sh-ctl);}
:root .gcm-recs .gcm-i:hover{background:var(--fill);}
:root .gcm-recs .gcm-i.big{background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);}
:root .gcm-recs .gcm-i.big svg{color:var(--accent-text);}
:root .gcm-host.sheet .gcm-close{border-radius:var(--r-ctl);background:var(--panel);box-shadow:var(--sh-ctl);}
:root .gcm-star{border-radius:var(--r-ctl);background:var(--panel);box-shadow:var(--sh-ctl);color:var(--ink-4);}
:root .gcm-star.on{color:var(--star);}
:root .gcm-star .n{color:var(--ink-sub);}
:root .gcm-star0{border-radius:var(--r-ctl);background:var(--panel);box-shadow:var(--sh-ctl);}
:root .gcm-star0[aria-checked="true"]{background:var(--chip-on-bg);color:var(--accent-ink);box-shadow:none;}
/* 태그 편집 창(js/tags.js — v2.35.11 디자이너 A0146 2열 · v3 합침) = 빠른 기록 칸과 같은 도마도 흰 칸(옅은 가장자리 --sh-ctl · 모서리 --r-ctl · 회색 2px 테두리 없음) ·
   붙은 칸 = 옅은 산호 면 + 산호 2px 선(도구 칸 켜짐과 같은 꼴 — 체크 상자가 산호로 보이게 그라데이션은 쓰지 않음) · 반쯤 = 진한 회색 선 */
:root .tg-opt{border-color:transparent;border-radius:var(--r-ctl);box-shadow:var(--sh-ctl);}
:root .tg-opt[data-state="on"]{border-color:var(--sel-line);background:var(--accent-soft);box-shadow:none;}
:root .tg-opt[data-state="some"]{border-color:var(--ink-3);box-shadow:none;}
/* 부·모 고르기 칸 */
:root .pp-pick{border-radius:var(--r-ctl);border-color:var(--line-3);}
:root .pp-pick-k{color:var(--ink-sub);}
:root .pp-pick-go{border-radius:calc(var(--r-ctl) - 4px);background:var(--panel);color:var(--ink);box-shadow:var(--sh-ctl);}
:root .pp-pick:hover .pp-pick-go{background:var(--accent-soft);color:var(--accent-text);}
:root .pp-top .fhint,:root .pp-help{color:var(--ink-sub);}
/* ⑫ (2차-P) 상세 쪽 머리 공용 — 계약 §6 "상세 쪽 = ‹ 뒤로 + 제목 꼴, 맨 위 머리와 같은 높이·여백·글자". 휴대폰 m 화면(css/m-shell.css body > .top 뒤로)과 같은 값.
      <header class="ms-backhead"><button class="ms-back">‹ 뒤로</button><span class="ms-btitle">제목</span><span class="ms-bside">매장 이름</span> … <button class="btn">…</button></header>
      높이 64(위 12 + 칸 44 + 여백) · 옆 여백 --page-x · ‹ 뒤로 = Pretendard 600 17 진한 글 · 꺾쇠 24 · 단추 왼쪽 -7px(꺾쇠 선이 여백 선에) ·
      머리 안 제목 = Pretendard 700 22 한 줄 말줄임 · 곁글(매장 이름 등) = 15 보조 회색 말줄임 · 오른쪽 단추 = 흰 칸 44(--sh-ctl · --r-ctl · 15 600).
      큰 쪽 제목 줄 = .ms-dtitle(맨 위 쪽 "개체"와 같은 Pretendard 700 31.6 · 위 20 · 옆 --page-x — 바깥 상자에 이미 옆 여백이 있으면 margin-inline:0) · 그 아래 안내 = .ms-dsub */
.ms-backhead{display:flex;align-items:center;gap:8px;min-height:64px;padding:12px var(--page-x) 0;background:var(--bg);}
.ms-backhead > .ms-back{flex:0 0 auto;display:inline-flex;align-items:center;gap:1px;height:44px;min-height:44px;min-width:44px;margin:0 0 0 -7px;padding:0 6px 0 0;border:0;
  border-radius:var(--r-ctl);background:transparent;box-shadow:none;color:var(--ink);font-family:var(--font);font-size:17px;font-weight:600;line-height:1;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;text-decoration:none;}
.ms-backhead > .ms-back svg{width:24px;height:24px;flex:0 0 auto;}
.ms-backhead > .ms-back:active{background:var(--fill);}
.ms-backhead > .ms-btitle{min-width:0;margin:0;font-family:var(--font);font-size:var(--t-xl);font-weight:700;line-height:1.3;color:var(--ink);letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ms-backhead > .ms-bside{min-width:0;margin-left:auto;font-size:var(--fs-chip);font-weight:600;color:var(--ink-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ms-backhead > .btn{flex:0 0 auto;height:44px;min-height:44px;padding:0 12px 0 14px;gap:4px;border-radius:var(--r-ctl);background:var(--panel);color:var(--ink);box-shadow:var(--sh-ctl);
  font-size:var(--fs-chip);font-weight:600;}
.ms-dtitle,h1.ttl.ms-dtitle{margin:20px var(--page-x) 0;padding:0;font-family:var(--font);font-weight:700;font-size:var(--fs-title);line-height:1.25;color:var(--ink);letter-spacing:-.02em;overflow-wrap:anywhere;}
.ms-dsub{margin:4px var(--page-x) 0;font-size:var(--t-md);font-weight:500;color:var(--ink-sub);line-height:1.5;}
.ms-backhead > .btn svg{width:18px;height:18px;flex:0 0 auto;}
/* ⑬ (2차-P — domado-ui.md §7 극단 화면) 창(ui-dialog)이 아래 시트로 뜨는 폭(≤768) 가운데 넓은 쪽(600↑ — 태블릿·반쪽 창)에서는 휴대폰 화면 기둥 폭(--m-col)만큼 가운데.
      낮은 화면은 ui-dialog.js 가 이미 최대 높이(100dvh − 여백) 안에서 본문만 스크롤 · 단추는 아래 붙임. */
@media (min-width:600px) and (max-width:768px){
  :root .uidlg-host{place-items:end center;}
  :root .uidlg,:root .uidlg.wide{max-width:var(--m-col);}
}
/* ⑭ (2차-P — 2차-Q 요청 2·3) 목록 개수 줄 오른쪽 [정렬 ▾] = 공용 도구 칸(휴대폰 — 높이 36.8 · 모서리 --r-ctl · 흰 칸 --sh-ctl · 누름 44 ::after).
      입력 칸 이름(label[for]) 누름 44 — 공용 칸 묶음(.field 로그인·가입 · .sp-f 판매자 정보 · .cn-f 계약 · .cs-f 손님 서명 · .ac-f 경매 받기): 투명 ::after(누르면 그 칸으로). */
:is(html.is-mobile,html.app-m) .lt-count > .lt-btn{position:relative;overflow:visible;height:36.8px;min-height:36.8px;padding:0 12px;gap:5px;border:0;border-radius:var(--r-ctl);
  background:var(--panel);color:var(--ink);box-shadow:var(--sh-ctl);font-size:var(--fs-chip-s);font-weight:600;}   /* 글자 14 = 도구 칸과 같음(v2.35.11 디자이너 A0137 "정렬 폰트 줄이기") */
:is(html.is-mobile,html.app-m) .lt-count > .lt-btn::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 22px);height:44px;}
:is(.field,.sp-f,.cn-f,.cs-f,.ac-f) > label[for]{position:relative;}
:is(.field,.sp-f,.cn-f,.cs-f,.ac-f) > label[for]::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 22px);height:44px;}

/* ==================== (v3.0 3차-G1 — team/plans/domado-motion.md §10 B · 동작 js/ui-form.js) 폼·알림 부품 ====================
   참고 사이트(lucianlabs)의 생각만 빌려 우리 토큰으로 다시 그림 — 220ms 이하 · 미끄러짐 16px 이하 · 흔들기·반짝이·되풀이 없음 · 움직임 줄이기면 결과만. */
/* ⑮ 저장 단추 — 크기 그대로 "저장 중…" → "✓ 저장했어요" 1초 → 원래대로(saveBtn · withSave · uiForm 확인 단추). 누름은 막되 흐리게 하지 않음(글자로 알림) */
:is(.btn,.uidlg-f button).sb-busy:disabled{opacity:.86;cursor:progress;}
:is(.btn,.uidlg-f button).sb-done:disabled{opacity:1;cursor:default;}
.sb-l{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:cg-fade-in var(--dur-1) var(--ease);}
.sb-ic{display:inline-grid;place-items:center;flex:0 0 auto;width:1.2em;height:1.2em;margin-right:.3em;}
.sb-ic svg{width:100%;height:100%;}
.sb-ic path{stroke-dasharray:26;stroke-dashoffset:26;animation:sb-draw var(--dur-1) var(--ease-out) forwards;}
@keyframes sb-draw{to{stroke-dashoffset:0;}}
/* ⑯ 틀린 칸 — 빨간 테두리 + 칸 아래 글자 · 위 요약 "N개 항목을 확인해 주세요"(showInvalid · uiForm) — 흔들기 없음 */
.fv-bad :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=file]),:is(input,select,textarea).fv-bad{
  border-color:var(--dang)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--dang) 16%,transparent);}
.fv-bad,[aria-invalid="true"]{scroll-margin-top:calc(var(--nav-h,76px) + 24px);scroll-margin-bottom:140px;}
.fv-msg{margin:6px 0 0;font-size:var(--t-sm);font-weight:600;line-height:1.45;color:var(--dang);overflow-wrap:anywhere;word-break:keep-all;}
.fv-sum,.uidlg-fsum{display:flex;align-items:center;gap:8px;margin:0 0 var(--s3);padding:10px 14px;border-radius:var(--r-ctl);
  background:var(--dang-soft);color:var(--dang);font-size:var(--t-md);font-weight:700;line-height:1.4;animation:cg-fade-in var(--dur-1) var(--ease);}
.fv-sum::before,.uidlg-fsum::before{content:"!";display:inline-grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--dang);color:#ffffff;font-size:14px;font-weight:800;line-height:1;}
.fv-sum[hidden],.uidlg-fsum[hidden]{display:none;}
.uidlg-h > .uidlg-fsum{margin:10px 0 2px;}
.uidlg-field.fv-bad :is(input,select):not([type=checkbox]):not([type=radio]):not([type=file]){border-color:var(--dang);}
/* ⑰ 금액 칸 — 치는 대로 쉼표 · 아래 [+1만][+5만][+10만](wireMoney) — 칸 = 흰 칸(칩 말투) · 보이는 높이 40 · 누름 44 */
.mn-chips{display:flex;flex-wrap:nowrap;gap:var(--gap-x,8px);margin-top:8px;min-width:0;}
.mn-chips > .mn-chip{position:relative;flex:1 1 0;min-width:0;max-width:128px;height:40px;padding:0 6px;border:0;border-radius:var(--r-ctl);
  background:var(--panel);color:var(--ink);box-shadow:var(--sh-ctl);font-family:var(--font);font-size:var(--fs-chip);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);}
.mn-chips > .mn-chip::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 22px);height:44px;}
.mn-chips > .mn-chip:hover{background:var(--fill);}
.mn-chips > .mn-chip:active{transform:scale(.97);}
.mn-chips > .mn-chip:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}
/* ⑱ 켜기 단추(.sw-btn — 설정 스위치·고르기 켜기) — 손잡이 미끄러짐 0.14초 + 손잡이 안 ✕(꺼짐) → ✓(켜짐). 색 = 브랜드와 상관없는 회색·진한 글자색 */
.sw-btn .sw-t::after{background-repeat:no-repeat;background-position:center;background-size:58% 58%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a98' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9'/%3E%3C/svg%3E");}
.sw-btn[aria-checked="true"] .sw-t::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23393939' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");}
:root.dark-ok[data-theme=dark] .sw-btn[aria-checked="true"] .sw-t::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f3f2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");}
@media (prefers-color-scheme:dark){:root.dark-ok:not([data-theme=light]) .sw-btn[aria-checked="true"] .sw-t::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f3f2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");}}
/* ⑲ 펼침(<details> 모두 — 지난 기록·여백 간격·사진 넣는 법 등) — 높이가 0.22초 펼쳐지고 접힘. 안 되는 브라우저(사파리 등)는 지금처럼 바로 */
@supports (interpolate-size:allow-keywords){
  details{interpolate-size:allow-keywords;}
  details::details-content{block-size:0;overflow-y:clip;transition:block-size var(--dur-2) var(--ease-out),content-visibility var(--dur-2) allow-discrete;}
  details[open]::details-content{block-size:auto;}
  @media (prefers-reduced-motion:reduce){details::details-content{transition:none;}}
  @media print{details::details-content{block-size:auto;transition:none;}}
}
/* ⑳ ＋/− 칸 숫자 — 바뀐 쪽에서 살짝 굴러 들어옴(rollNum · 0.14초 · 6px) · 끝에 닿은 안내 글(.st-lim) */
.st-roll-up{animation:st-roll-up var(--dur-1) var(--ease-out);}
.st-roll-dn{animation:st-roll-dn var(--dur-1) var(--ease-out);}
@keyframes st-roll-up{from{transform:translateY(6px);opacity:.35;}to{transform:none;opacity:1;}}
@keyframes st-roll-dn{from{transform:translateY(-6px);opacity:.35;}to{transform:none;opacity:1;}}
.st-lim{margin:6px 0 0;font-size:var(--t-sm);font-weight:600;color:var(--ink-sub);line-height:1.4;animation:cg-fade-in var(--dur-1) var(--ease);}
.st-lim[hidden]{display:none;}
/* ㉑ 줄 접어 없애기 — 체크 그려짐(.cl-mark) → 높이 접힘(collapseOut) */
.cl-check{position:relative;}
.cl-mark{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:color-mix(in srgb,var(--ok-soft) 88%,transparent);color:var(--ok);
  pointer-events:none;animation:cg-fade-in var(--dur-1) var(--ease);}
.cl-mark svg{width:28px;height:28px;}
.cl-mark path{stroke-dasharray:26;stroke-dashoffset:26;animation:sb-draw var(--dur-1) var(--ease-out) forwards;}
/* ㉒ 진행 막대(progress) — 끝을 모르면 흐르는 막대(불러오는 동안만 되풀이 — 움직임 줄이기면 가만히 1/3) → 개수를 알면 채워지는 막대 */
.pbar{position:relative;height:12px;border-radius:999px;background:var(--fill-2);overflow:hidden;}
.pbar > span{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width var(--dur-2) var(--ease);}
.pbar.pb-wait > span{width:34%!important;transition:none;animation:pb-flow 1.3s linear infinite;}
@keyframes pb-flow{from{transform:translateX(-100%);}to{transform:translateX(300%);}}
@media (prefers-reduced-motion:reduce){.pbar.pb-wait > span{animation:none;}.pbar > span{transition:none;}}
.pbar-t{margin:8px 0 0;font-size:var(--t-md);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.pbar-t:empty{display:none;}
/* ㉓ 빈 상태 캐릭터(emptyArtHtml) — 디자이너 도마도 그림 가만히 + 단추 줄(글자 단추 · 한 줄 같은 폭 — 아주 좁으면 한 줄에 하나씩) */
.empty-state .es-art{display:block;width:112px;height:auto;aspect-ratio:192/152;margin:0 auto var(--s2);object-fit:contain;user-select:none;-webkit-user-drag:none;}
.es-domado .es-acts{display:flex;flex-wrap:nowrap;justify-content:center;gap:var(--gap-x,8px);margin-top:var(--s3);width:100%;max-width:420px;}
.es-domado .es-acts > .btn{margin-top:0;flex:1 1 0;min-width:0;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:330px){.es-domado .es-acts{flex-direction:column;align-items:center;}.es-domado .es-acts > .btn{width:100%;max-width:280px;flex:0 0 auto;}}
/* ㉔ 인터넷 끊김 띠(모든 쪽 — js/m-shell-paint.js) — 화면 위(컴퓨터 = 위 메뉴 줄 아래) · 돌아오면 "다시 연결됐어요" 잠깐 → 사라짐 */
.net-band{position:fixed;z-index:990;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;width:max-content;max-width:min(560px,calc(100vw - 2 * var(--page-x,16px)));min-height:48px;padding:10px 18px 10px 14px;
  border-radius:var(--r-ctl);background:var(--ink);color:#ffffff;box-shadow:var(--sh-pop);font-family:var(--font);font-size:var(--t-md);font-weight:600;line-height:1.35;
  animation:nb-in var(--dur-2) var(--ease-out);}
.net-band[hidden]{display:none;}
.net-band.ok{background:var(--ok);}
.net-band .nb-ic{flex:0 0 auto;width:22px;height:22px;}
.net-band .nb-t{min-width:0;overflow-wrap:anywhere;word-break:keep-all;}
html:has(.shell > .side) .net-band{top:calc(var(--nav-h,76px) + 10px);}
@keyframes nb-in{from{opacity:0;transform:translate(-50%,-8px);}to{opacity:1;transform:translate(-50%,0);}}
@media (prefers-reduced-motion:reduce){.net-band{animation:none;}}
@media print{.net-band,.to-top{display:none!important;}}
/* ㉕ 글자 단추 "맨 위로"(긴 목록 — 개체·장부 · js/m-shell-paint.js) — 두 화면 넘게 내리면 오른쪽 아래(아래 탭·[+]·고르기 바와 안 겹치게) · 그림만 금지 */
.to-top{position:fixed;z-index:37;right:max(var(--page-x,16px),calc(50% - var(--m-col,600px) / 2 + var(--page-x,16px)));bottom:calc(24px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:4px;height:44px;padding:0 16px 0 12px;border:0;border-radius:999px;background:var(--panel);color:var(--ink);
  box-shadow:var(--sh-ctl),0 6px 18px -8px rgba(12,12,12,.28);font-family:var(--font);font-size:var(--fs-chip);font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity 150ms var(--ease),transform 150ms var(--ease);}
.to-top.on{opacity:1;transform:none;pointer-events:auto;}
.to-top svg{width:18px;height:18px;flex:0 0 auto;}
.to-top:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}
html:not(.has-tabbar) .to-top{right:max(24px,calc((100vw - var(--page-max,1320px)) / 2));}
html.has-tabbar .to-top{bottom:calc(var(--tabbar-h,70px) + 14px + env(safe-area-inset-bottom,0px));}
html:has(.selbar:not([hidden]),.savebar:not([hidden]),.actbar:not([hidden]),.cp-bar:not([hidden]),.ms-host:not([hidden]),.uidlg-host.show) .to-top{display:none;}
@media (prefers-reduced-motion:reduce){.to-top{transition:none;}}
/* ㉖ 한 번 톡(popOnce — 새 알림 점) — 0.14초 커졌다 제자리 · 되풀이 없음 */
.cg-pop{animation:cg-pop var(--dur-1) var(--ease-out);}
@keyframes cg-pop{50%{transform:scale(1.28);}}
/* (v3.0 — v2.36 U-09 링크 문제 화면 맞춤) 옅은 안내 상자 = 모서리 --r-ctl(직원 초대 .jn-bad-msg v3.0 묶음 · 로그인 카드 안과 같은 값) */
.lp-msg{border-radius:var(--r-ctl);}
/* ㉗ (v3.0 알림 센터 — js/alerts.js · team/plans/alert-center.md 2판) 도마도 모양. 구조·훅·동작(읽음·지우기·밀기·접어 쌓기)은 alerts.js 그대로(v2 도 같은 파일) — 여기는 모양만.
      · 판 모서리 = 큰 상자(--r-box) · 제목 '알림' = 도마도 제목 글꼴 · [닫기] 없음(2026-11-11 — 바깥·Esc·뒤로·종 · 휴대폰은 아래로 끌어 닫기)
      · 머리 오른쪽 '모두 읽음 | 모두 지우기' = 흰 바탕 검은 글자 단추(alerts.js 기본 모양 그대로 — 사용자 2026-11-11 "분홍색으로 하지 말고 테두리도 넣지 마라")
      · 펼친 묶음 머리 '접기 | 지우기' = 머리 줄과 같은 글자 단추(alerts.js .al-acts > .al-txb — 사용자 2026-11-11 "모두 읽음 | 모두 지우기 랑 같은 형식으로")
      · [다시 불러오기] = 새 단추 공용 꼴 .btn-dz(아래 ㉘)
      · 알림 카드 = 흰 면 + 옅은 가장자리(--sh-ctl) · 모서리 --r-card · 안 읽음 = 산호 점 + 옅은 산호 면 · 겹친 카드(접힌 묶음) = 흰 면 두 장
      · 종류 그림 = 디자이너 아이콘(알 해칭 egg · 급여 feed · 건강 gecko · 그 밖 bell — img/icons, .di 와 같은 mask) · 계약서·옮기기·경매·새 멤버는 그림이 없어 선 그림 그대로
      · 빈 판 = 도마도 캐릭터(가만히 — 빈 상태 ㉓ 와 같은 그림) */
:root .al-host.al-side .al-panel{border-radius:var(--r-box);}
:root .al-host.al-sheet .al-panel{border-radius:var(--r-box) var(--r-box) 0 0;}
:root .al-t{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;}
:root .al-row,:root .al-stack{border-radius:var(--r-card);}
:root .al-card{background:var(--panel);box-shadow:var(--sh-ctl);}
:root .al-card.unread{background:color-mix(in srgb,var(--accent-soft) 60%,var(--panel));box-shadow:inset 0 0 0 1.4px color-mix(in srgb,var(--accent) 28%,transparent);}
:root .al-it:hover{background:color-mix(in srgb,var(--ink) 3%,transparent);}
:root .al-ic{background:var(--fill);}
:root .al-card.unread .al-ic{background:var(--panel);}
:root .al-dot{background:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent);}
:root .al-stack::before{background:var(--panel);box-shadow:var(--sh-ctl);}
:root .al-stack::after{background:var(--panel);box-shadow:var(--sh-ctl);opacity:.8;}
:root .al-stack > .al-row{box-shadow:0 2px 6px -2px rgba(12,12,12,.12);}
:root .al-gt{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;}
:root .al-ic:is([data-cat="egg"],[data-cat="feed"],[data-cat="health"],[data-cat="etc"]) > svg{display:none;}
:root .al-ic:is([data-cat="egg"],[data-cat="feed"],[data-cat="health"],[data-cat="etc"])::before{content:"";width:22px;height:22px;background-color:currentColor;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
:root .al-ic[data-cat="egg"]::before{-webkit-mask-image:url("../img/icons/egg.svg");mask-image:url("../img/icons/egg.svg");}
:root .al-ic[data-cat="feed"]::before{-webkit-mask-image:url("../img/icons/feed.svg");mask-image:url("../img/icons/feed.svg");}
:root .al-ic[data-cat="health"]::before{-webkit-mask-image:url("../img/icons/gecko.svg");mask-image:url("../img/icons/gecko.svg");}
:root .al-ic[data-cat="etc"]::before{-webkit-mask-image:url("../img/icons/bell.svg");mask-image:url("../img/icons/bell.svg");}
:root .al-empty .al-eic{width:112px;height:89px;border-radius:0;background:url("../img/domado/head-192.webp") center/contain no-repeat;}
:root .al-empty .al-eic > svg{display:none;}
/* ㉘ (v3.0 2026-11-11 — 사용자 "새로 추가된 버튼은 우리 디자이너의 버튼 추가 스타일을 따라라. 기존 규칙은 이제 없다." · 계약 domado-ui.md §4)
      새 단추 공용 꼴 — 그림 1(ref/design_v2/1.png) 대시보드 위 [QR]·[사진]·[EDIT]. 값은 tokens.css --btn-dz-*(브랜드 주 색을 따라감).
      .btn-dz     글자 단추 = 옅은 산호 바탕(--btn-dz-bg #ffac9e) + 흰 글자 · Pretendard 600 17(좁은 화면 16) · 보이는 높이 33.6 · 모서리 7 · 안 여백 14
      .btn-dz.ic  그림 단추 = 산호 바탕(--btn-dz-ic #ff9280) + 흰 그림 20 · 33.6 정사각 · 이름은 aria-label + title
      .btn-dz.sub 보조 글자 단추 = 흰 칸 + 옅은 가장자리(--sh-ctl) + 진한 글자 — 한 줄에 주(.btn-dz)와 같이 있을 때만(2026-11-12 경매 화면 머리 [등록 마감]·[경매 종료])
      누름 칸 = 44(::after 투명 넓힘 — 글자 단추는 위아래 · 그림 단추는 사방 · 그림 단추 둘이 붙으면 사이 8 → 10.4 로 겹침 없음)
      한 줄 여럿 = .dz-row(같은 높이 · 사이 8 · 오른쪽 끝 맞춤 · 줄 바뀜 없음 — 계약 §8) 또는 그 줄의 flex(같은 값)
      마우스 올림(마우스 있는 기기만) = 조금 진하게 · 누름 = 더 진하게 + 살짝 작게 · 끔 = 흐리게 · 포커스 = 산호 링 · 어둡게도 산호 그대로 + 흰 글자
      :root 로 한 단계 높임 — 부품 파일이 넣는 기본 모양(js/alerts.js .al-retry · js/pedigree.js .pd-zb·.pd-fit — v2 와 같은 파일)을 덮음.
      var(…, 기본값) = 토큰이 없는 버전(v2 로 옮길 때)도 이 묶음만 옮기면 같은 꼴(바탕은 그 버전의 --accent 에서 섞음).
      쓰는 곳(2026-11-11): 알림 센터 [다시 불러오기](머리 '모두 읽음 | 모두 지우기'·묶음 머리 '접기 | 지우기'는 글자 단추 — 사용자 지정) · 개체 상세 체중 변화 [성장 기록 보기] ·
        메모 탭 [메모 쓰기] · 휴대폰 사진 빈 판 [사진 추가] · 가계도 판 [축소][확대](그림)·[전체 보기] · 매장공지 화면 [공지 쓰기]·[이전 공지 더 보기] ·
        (2026-11-12) 경매 화면 머리 [정산]·[출품 올리기]·[결과 넣기]·[경매 종료] + 보조(.sub) [등록 마감]·[경매 종료].
      그대로 두는 것: 예전 단추(.btn …) · 창(uiConfirm·uiForm·바닥 시트)의 [저장]/[취소] · 줄 단추·'›' 글자 줄 · 스위치 · 칩·탭 · 쓰기 화면 꾸밈 줄 · 바탕 없는 그림 단추([✕]·[⋯]) */
:root .btn-dz{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;
  width:auto;height:var(--btn-dz-h,33.6px);min-height:0;padding:0 14px;border:0;border-radius:var(--r-btn-sm,7px);background:var(--btn-dz-bg,color-mix(in srgb,var(--accent) 76%,#ffffff));color:var(--btn-dz-ink,#ffffff);box-shadow:none;
  font:600 var(--fs-btn-dz,17px)/1 var(--font);letter-spacing:-.01em;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);}
:root .btn-dz::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);}
:root .btn-dz > svg{flex:0 0 auto;width:18px;height:18px;}
:root .btn-dz:hover{background:var(--btn-dz-bg,color-mix(in srgb,var(--accent) 76%,#ffffff));color:var(--btn-dz-ink,#ffffff);}   /* 손가락 기기 — 누른 뒤 남는 :hover 가 부품 기본 모양으로 바뀌지 않게 */
@media (hover:hover){:root .btn-dz:hover:not(:disabled){background:var(--btn-dz-bg-hover,color-mix(in srgb,var(--accent) 90%,#ffffff));color:var(--btn-dz-ink,#ffffff);}}
:root .btn-dz:active:not(:disabled){background:var(--btn-dz-bg-press,var(--accent));transform:scale(.97);}
:root .btn-dz:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}
:root .btn-dz:disabled,:root .btn-dz[aria-disabled="true"]{opacity:.45;cursor:default;transform:none;}
:root .btn-dz.ic{width:var(--btn-dz-h,33.6px);padding:0;background:var(--btn-dz-ic,var(--accent));}
:root .btn-dz.ic::after{left:50%;right:auto;width:44px;transform:translate(-50%,-50%);}
:root .btn-dz.ic > svg{width:20px;height:20px;}
:root .btn-dz.ic:hover{background:var(--btn-dz-ic,var(--accent));}
@media (hover:hover){:root .btn-dz.ic:hover:not(:disabled){background:var(--btn-dz-ic-hover,color-mix(in srgb,var(--accent) 88%,#000000));}}
:root .btn-dz.ic:active:not(:disabled){background:var(--btn-dz-ic-press,color-mix(in srgb,var(--accent) 78%,#000000));}
:root .btn-dz.ic + .btn-dz.ic{margin-left:2.4px;}
/* .btn-dz.sub 보조 글자 단추(2026-11-12 경매 화면 머리 — 한 줄에 주 단추와 같이 있을 때만) = 흰 칸 + 옅은 가장자리(--sh-ctl) + 진한 글자.
   v3 에 이미 있는 흰 칸 말투(그림 3 흰 칩·[QR] 칸 · 휴대폰 홈 [매장 고르기] 33.6) — 크기·모서리·글자·누름 44 는 .btn-dz 그대로. 어둡게 = --panel·--line 이 따라감 */
:root .btn-dz.sub,:root .btn-dz.sub:hover{background:var(--panel);color:var(--ink-2);box-shadow:var(--sh-ctl);}
@media (hover:hover){:root .btn-dz.sub:hover:not(:disabled){background:var(--fill);color:var(--ink);}}
:root .btn-dz.sub:active:not(:disabled){background:var(--fill);color:var(--ink);}
.dz-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap;min-width:0;}
@media (max-width:360px){:root .btn-dz{font-size:16px;padding:0 12px;}:root .btn-dz.ic{padding:0;}}
@media (prefers-reduced-motion:reduce){:root .btn-dz{transition:none;}:root .btn-dz:active:not(:disabled){transform:none;}}