/*
 * 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 — 목록 도구 줄 구역.
 */

/* ---------- 페이지 골격(데스크톱 본문) ---------- */
.page{width:100%;max-width:var(--page-max);margin:0 auto;padding:var(--s4) var(--s8) var(--s16);}
.page-head{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin:var(--s4) 0 var(--s6);}
.page-head .sp{flex:1;}
.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(--accent);}
.btn.txt:hover,.btn.ghost:hover{background:var(--fill);box-shadow:none;color:var(--accent-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(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);font-weight:var(--w-bold);}
.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);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(--accent);}
.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);box-shadow:inset 0 0 0 2px var(--accent);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(--accent);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(--accent-soft);color:var(--accent);}
.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(--accent);}
.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);}
.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(--accent);}
.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(--accent),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);}

/* ---------- 로딩: 글자로("불러오는 중…") + 스켈레톤 ---------- */
.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);}
.menu-pop .mi.dang,.menu-pop .mi.dang svg{color:var(--dang);}
.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);}}

/* ---------- 고유 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(글자 + ▾). 정렬 버튼 글자는 늘 "정렬".
      휴대폰 = 2열 같은 폭 칸(세로줄 맞춤): .lt-view.lt-grid(휴대폰 화면) · html.app-m .lt-view(공용 한 장 화면의 휴대폰 틀)
   ④ 개수 줄 .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;}}
.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);}
.lt-view.lt-grid,html.app-m .lt-view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);align-items:stretch;}
.lt-view.lt-grid > .btn,.lt-view.lt-grid > .chip,html.app-m .lt-view > .btn,html.app-m .lt-view > .chip{width:100%;min-width:0;max-width:none;margin:0;
  padding:0 var(--s3);justify-content:center;}
/* 개수 글이 길면 글이 칸 안에서 줄바꿈되고 [고르기] 스위치는 늘 오른쪽(다음 줄로 밀리지 않음) */
.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;}
/* 개수 줄 토막(.lt-seg "알 N개" · "N개 숨김", 지금 정렬 이름 .lt-now)은 토막 안에서 줄바꿈 안 함 — 숫자와 이름이 떨어지지 않게(줄은 " · " 에서만 나뉨) */
.lt-seg,.lt-now{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;}