/* =====================================================================
   SEOULMANSION CARE — Design System
   소프트 뉴모피즘 · Switzer(영문)/Pretendard Variable(한글) · 라이트+다크
   모든 페이지 공통. partials/sys-head.php 가 이 파일을 로드한다.
   ===================================================================== */

/* ── 디자인 토큰 (라이트) ───────────────────────────────────────── */
:root{
  --bg:#f0efed;
  --light:#ffffff;        /* 뉴모 하이라이트(좌상) */
  --dark:#cbcac6;         /* 뉴모 섀도우(우하) */
  --text:#333333;
  --field-bg:var(--bg);   /* 인풋 필드 배경 (라이트=페이지와 동일, 다크=살짝 어둡게) */
  --field-ink:#232323;    /* 인풋 입력 텍스트 — 본문보다 한 단계 진하게 */
  --muted:#8f8e89;
  --err:#b0533e;
  --bg-rgb:240,239,237;   /* --bg의 RGB (rgba()용) — 스크림 그라데이션의 끝색에 쓴다 */
  --shadow:203,202,198;   /* 뉴모 섀도우 RGB (rgba()용) */
  --hilite:255,255,255;   /* 뉴모 하이라이트 RGB */
  --fld-sh:var(--shadow); /* 인풋 전용 섀도우 (라이트=전역 동일) */
  --fld-hi:var(--hilite); /* 인풋 전용 하이라이트 (라이트=전역 동일) */
  --edge-hi:#f7f7f5;      /* 밝은 테두리/하이라이트 라인 */
  --edge-lo:#e4e2dd;      /* 어두운 테두리/라인 */
  --logo-ink:#504f4c;     /* 로고 SEOULMANSION — 중성 그레이(주변 위계 상승에 맞춰 한 단계 강화) */
  --care-ink:#767573;     /* 로고 CARE (미사용: care-t는 --muted 사용) */
  --title-ink:#6c6b68;    /* 페이지 제목 (갈색기 제거·중립 그레이·한 단계 진하게) */
  --ph:#a6a5a0;           /* placeholder (한 단계 진하게) */
  --chip:#eae8e5;         /* ghost 버튼 배경 */
  --chip-h:#e4e1dc;
  --link:#84837f;         /* ghost 버튼 텍스트 (한 단계 진하게) */
  --link-h:#646360;
  --div-lo:#d3d1cb;       /* 구분선 */
  --div-hi:#fbfaf6;
  --mono:'Switzer','Pretendard Variable','Pretendard',system-ui,sans-serif; /* 영문=Switzer, 한글=Pretendard 폴백(글리프 단위 매칭) */
  --sans:'Pretendard Variable','Pretendard',system-ui,sans-serif; /* 한글 본문 */
  --raise:6px 6px 13px var(--dark), -6px -6px 13px var(--light);
  --press:inset 5px 5px 10px var(--dark), inset -5px -5px 11px var(--light);
}
/* ── 디자인 토큰 (다크) — 약간 웜한 중립 차콜 ───────────────────── */
:root[data-theme="dark"]{
  --bg:#3b3b38;
  --light:#4a4a47;
  --dark:#2a2a29;
  --text:#e8e7e0;
  --field-ink:#f3f2ec;
  --err:#d97a63;          /* 다크 전용 — 어두운 배경에서 가독 확보 */
  --muted:#bbbbb6;
  --bg-rgb:59,59,56;
  --shadow:30,30,28;
  --hilite:73,73,69;      /* 인셋 하단·우측 그라데이션 하이라이트 톤다운 */
  --edge-hi:#4b4b48;      /* 상단·좌측 테두리 하이라이트 — 밝기 낮춰 이질감 제거 */
  --edge-lo:#292928;
  --logo-ink:#e0e0db;
  --care-ink:#c1c1bc;
  --title-ink:#c9c9c4;
  --ph:#9e9e9c;
  --chip:#454542;
  --chip-h:#4e4e4a;
  --link:#bebdb9;
  --link-h:#e4e3de;
  --div-lo:#2a2a29;
  --div-hi:#575753;
}

/* ── 리셋 · 테마 전환(색은 .5s로 부드럽게) ──────────────────────── */
*,*::before,*::after{box-sizing:border-box;
  transition:background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--text);font-family:var(--mono);
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;
  padding-top:138px;}   /* 고정 헤더(2단 로고 ≈80.5px + 상하 28px ≈ 136.5px) 자리 + 여유 1.5px.
                            ★2026-07-23 로고 확대 후 하단 여백이 과해 여유를 14→1.5px로 줄임(사용자: "하단 간격 너무 넓다").
                              더 좁히려면 (a)헤더 상하 패딩 28px 축소 또는 (b)SVG viewBox 하단 여백 크롭. 로고 폭 바꾸면 재계산. */

/* ── 헤더 (플로팅 구조: 바 없이 로고·토글 등 각 요소가 개별로 상단에 떠서 고정) ──
   컨테이너 자체는 클릭 통과(pointer-events:none)·배경 없음 → 콘텐츠가 사이로 스크롤됨 */
/* ⚠️ 세로 여백은 **고정 28px**이다. 한때 최상단만 넓히고 스크롤 시 좁히는 방식을 넣었다가
   2026-07-21 사용자 지시로 되돌렸다 — 태그라인이 로고 오른쪽으로 옮겨가며 높이를 키울 이유가 없어졌다. */
.topbrand{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;
  padding:28px 34px;font-family:var(--mono);
  display:flex;align-items:center;justify-content:space-between;}
.topbrand > *{pointer-events:auto;}
/* ── 상단 스크림 = 약한 blur 3단 + 낮은 알파 색 페이드 ─────────────────
   ★사내 가이드 `Z:\# 코드작업저장\텍스트영역_더보기_스크림_블러타입(260616).md`의 구조를 이식했다.
     홈페이지 contact.php 헤더와 **같은 방식**이다 — 스크롤한 내용이 헤더 글자와 겹쳐 읽히는 것을 막는다.
   가이드의 핵심: 강한 blur 1개보다 **약한 blur 3단**, 색은 주역이 아니라 **보정막**(알파를 낮게).
   ⚠️ 스크롤했을 때만 보인다(html.is-scrolled). 맨 위에서는 헤더가 그냥 떠 있어야 깔끔하다.
   ⚠️ `pointer-events:none` 필수 — 바로 위 `.topbrand > *{pointer-events:auto}`가 이 요소에도 걸리므로
      명시하지 않으면 스크림이 헤더 아래 영역의 클릭을 통째로 가로챈다.
   ⚠️ z-index:-1 = `.topbrand`가 만든 쌓임맥락 **안쪽**에서만 뒤로 간다 →
      로고·우측 메뉴보다는 뒤, 페이지 콘텐츠보다는 앞에 정확히 놓인다.
   ⚠️ 끝색은 `transparent`(=rgba(0,0,0,0))가 아니라 **--bg-rgb의 알파 0**을 쓴다.
      transparent로 두면 밝은 테마에서 회색 얼룩이 생긴다(가이드 §조정 원칙). */
.top-scrim{position:absolute;left:0;right:0;top:0;height:170px;z-index:-1;
  pointer-events:none;opacity:0;transition:opacity .28s ease;}
html.is-scrolled .top-scrim{opacity:1;}
.top-scrim span{position:absolute;inset:0;display:block;}
/* blur 수치는 가이드의 확정값(1.2 / .46 / .28). 올리면 헤더 글자부터 뭉친다 */
.top-scrim .ts1{backdrop-filter:blur(1.2px);-webkit-backdrop-filter:blur(1.2px);
  mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 66%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 66%);}
.top-scrim .ts2{backdrop-filter:blur(.46px);-webkit-backdrop-filter:blur(.46px);
  mask-image:linear-gradient(180deg,#000 30%,#000 62%,transparent 86%);
  -webkit-mask-image:linear-gradient(180deg,#000 30%,#000 62%,transparent 86%);}
.top-scrim .ts3{backdrop-filter:blur(.28px);-webkit-backdrop-filter:blur(.28px);
  mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.38) 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.38) 88%,transparent 100%);}
/* 색 보정막 — 맨 위(헤더 글자 뒤)만 불투명하고, 아래로는 급격히 알파를 떨궈 띠 경계를 없앤다 */
.top-scrim::after{content:'';position:absolute;inset:0;
  /* ★불투명 구간을 40% → 16%로 줄이고 중간 알파도 낮췄다(2026-07-21 사용자 지시: "더 투명하게").
     ⚠️ 불투명 구간은 **헤더 글자 뒤를 덮을 만큼**만 남긴다 — 여기를 더 줄이면 스크롤한 본문이
        로고·우측 메뉴와 겹쳐 읽히기 시작한다(blur만으로는 못 가린다). */
  background:linear-gradient(180deg,
    var(--bg) 0%, var(--bg) 16%,
    rgba(var(--bg-rgb),.42) 36%, rgba(var(--bg-rgb),.18) 58%,
    rgba(var(--bg-rgb),.06) 80%, rgba(var(--bg-rgb),0) 100%);}
/* == 로고 락업 = PROGRAM ( CARE ) GALLERY ==========================
   2026-07-21 사용자 지시로 교체. 종전 = 뉴모(볼록) 알약 도형 + SEOULMANSION/CARE 글자.
   ⚠️★ **평면 + 채움(fill)이다.** 볼록 효과(SVG #smooth 필터·그림자·베벨)는 요청에 따라 전부 걷어냈다.
      되살릴 일이 생겨도 CSS drop-shadow 체인으로 흉내내지 말 것 — 앞 그림자가 다음 계산에 섞여
      하이라이트가 씻겨나간다(옛 구현이 SVG 필터에서 '병렬' 합성을 쓴 이유).
   ⚠️ 아웃라인이 아니라 면이므로 획 두께(vector-effect·stroke-width) 문제는 이제 없다.
      되돌려 아웃라인으로 쓸 일이 생기면, `vector-effect`는 루트 <svg>에 걸어도 **상속되지 않는다**는 점을 기억할 것. */
/* ★로고 + 태그라인을 **가로 한 줄**로 묶는다(2026-07-21 사용자 지시로 아래 → 오른쪽).
   ⚠️ 태그라인을 .lockup(<a>) 안에 넣지 않는다 — 링크 텍스트가 되어 스크린리더가 로고 이름과 함께 읽는다.
   ⚠️ `align-items:flex-end` + 태그라인의 padding-bottom 조합으로 **로고 베이스라인에 밑선을 맞춘다**.
      flex의 `baseline` 정렬은 못 쓴다 — .lockup은 글자가 없는 블록이라 브라우저가 '바닥 모서리'를
      베이스라인으로 삼아, 로고 글자의 실제 밑선보다 9px 아래로 정렬된다. */
.brand-col{display:flex;align-items:flex-end;gap:16px;}
/* ★태그라인 — 최상단에서만 보이고 스크롤하면 접힌다. 나타남·사라짐 모두 **클립패스**(사용자 지시).
   ⚠️ clip-path는 **레이아웃을 바꾸지 않는다** — 그것만 쓰면 글자는 사라져도 자리는 남아 헤더가 안 줄어든다.
      그래서 height·margin을 같이 접는다. 둘은 한 쌍이다(clip=보이는 것, height=차지하는 것).
   ⚠️ 좌측 정렬 = 로고 잉크 왼끝(34px)과 같은 축. .lockup의 음수 마진은 로고에만 걸려 있으므로
      태그라인은 열의 시작점(=34px)에 그대로 두면 맞는다. */
.brand-sub{height:15px;margin-bottom:12px;
  /* ★2026-07-23 두 줄 로고(5.2→8) → 확대 198px(→9) → 235px(→12px). 태그라인 밑선을 **아랫줄(gallery) 베이스라인**에 맞춘다.
     235px 로고는 gallery 베이스라인이 상자 바닥에서 약 15.3px 위(y160.5)라, 태그라인을 그만큼 더 들어 올려야 한다.
     ⚠️ 눈으로 미세조정 필요 — 로고 폭·CARE 크기를 바꾸면 이 값도 다시 잰다. */
  /* ★로고 베이스라인에 밑선을 맞춘 실측 보정값.
     ⚠️ padding으로 하면 안 된다 — 전역 `box-sizing:border-box` 탓에 패딩이 height:15px **안쪽**으로
        먹혀 글자가 밀리지 않는다(실측: padding 6→11.2px로 올려도 베이스라인이 그대로였다).
        margin은 상자 바깥이라 flex-end 정렬에서 상자를 통째로 위로 밀어 올린다. */
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.01em;
  line-height:15px;white-space:nowrap;color:var(--muted);
  clip-path:inset(0 0 0 0);
  transition:clip-path .34s cubic-bezier(.4,0,.2,1), height .34s cubic-bezier(.4,0,.2,1),
             margin-bottom .34s cubic-bezier(.4,0,.2,1);}
html.is-scrolled .brand-sub{clip-path:inset(0 0 100% 0);height:0;margin-bottom:0;}

.lockup{position:relative;display:block;width:235px;
  /* ★2단(두 줄) 락업 폭. viewBox 577.6×197.9 → 235px면 렌더 높이 ≈ 80.5px, 배율 0.4069 px/단위.
     2026-07-23 사용자 지시로 180 → 198 → 235px("로고 자체를 더 키워"). CARE는 HTML 고정 px라 로고와 함께 커지지 않으니 별도.
     ⚠️★ 이 폭을 줄이면 **괄호 사이 간격(px)도 같이 줄어든다**. CARE는 HTML 글자라 px가 고정이므로 너무 줄이면 CARE가 괄호를 넘친다.
        현재 계산: 괄호 안쪽 간격 = 197.5단위 × 0.3116 ≈ 61.5px, CARE(19px) ≈ 52px → 좌우 여유 약 4.8px(가로판과 동급).
        폭을 바꾸면 body padding-top(132px)·CARE bottom%·태그라인 margin도 함께 재계산할 것. */
  margin-left:-0.8px;   /* 로고 잉크(P 왼끝)가 viewBox 왼끝(0)에서 약 2단위 안쪽 → 235px 환산 0.8px 보정.
                            ★이 보정이 있어야 글자 왼끝이 좌측 메뉴 패널 왼끝과 맞는다(둘 다 34px 거터). ⚠️눈으로 미세조정. */
  color:var(--logo-fill);}  /* ★면 색의 출처. SVG가 fill="currentColor"라 여기서 정해진다(다크모드 자동 추종) */
.lockup > svg{display:block;width:100%;height:auto;}
/* ★CARE = 괄호 안쪽 중심에 얹는다(아랫줄). 색은 포인트 컬러(사용자 지시).
   좌표 근거: 왼쪽 괄호 안쪽 16.5 + 오른쪽 괄호 안쪽(124+90=214) → 중심 x 115.25 / 베이스라인 y ≈ 160.5(gallery 밑선)
     left = 115.25 ÷ 577.6 = 19.95%
   ⚠️ 로고 파일의 괄호 벌림(현재 +90)을 다시 바꾸면 이 값도 다시 재야 한다 — 자동으로 따라오지 않는다. */
/* ★세로 위치 = **아랫줄(gallery) 베이스라인에 CARE 밑선을 맞춘다**.
   ⚠️★ 상자 하단과 글자 밑선은 다르다(상자 아래 디센더 공간). bottom%는 CARE 상자 밑변 기준이라 밑선보다 약간 아래로 잡는다.
   ★현재 17% = 사용자 눈 확인 후 조정값(12% → 17%, "너무 아래로 내려갔어"). 괄호 세로 중심에 가깝게 올렸다.
     ⚠️ **눈으로 미세조정 필요** — font-size·font-weight·로고 폭에 딸린 값이다. 뜨면 %를 올리고, 내려가면 %를 낮춘다.
      정밀히 재는 법 = CARE 안에 `height:0`인 inline-block을 넣으면 그 아랫변이 곧 베이스라인이다. */
.lockup .care-t{position:absolute;left:19.95%;bottom:17%;transform:translateX(-50%);
  line-height:1;white-space:nowrap;
  /* ★산세리프(2026-07-21 사용자 지시. 이력: 내로우 산세리프 → 세리프 → 다시 산세리프).
     ⚠️ 서체를 바꾸면 **같은 px에서도 폭·높이가 달라진다**. 산세리프는 x-height가 커서 더 커 보이므로
        세리프 25px과 비슷한 덩어리로 보이려면 크기를 내려 잡아야 한다(현재 19px).
     ⚠️ 괄호 사이 여유는 좌우 약 5px뿐이다 — 크기·자간을 올릴 땐 반드시 폭을 다시 잴 것. */
  font-family:var(--sans);
  font-size:19px;font-weight:600;letter-spacing:.03em;   /* CARE 자체 크기는 19px 유지(사용자: "케어를 키우라는 게 아니다"). 로고를 198px로 키워 괄호 여유 ≈7.8px로 넉넉 */
  color:var(--brand-signal);}  /* 브랜드 원색 그대로. UI용 --accent-ink는 어둡게 보정된 값이라 쓰지 않는다 */

/* 다크모드 토글 — 바깥 양각 래퍼(LIGHT/DARK 텍스트 + 이중양각 토글) */
/* 배경양각: 높이 = SEOULMANSION 로고라벨(38px) · 볼록(양각) */
.theme-toggle{display:inline-flex;align-items:center;gap:11px;flex:none;
  transform:scale(1.2);transform-origin:right center;
  height:38px;padding:0 7px 0 16px;cursor:pointer;background:var(--bg);border-radius:19px;
  border:0;border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  -webkit-tap-highlight-color:transparent;outline:0;
  box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1);
  transition:box-shadow .5s ease, background-color .5s ease;}
.theme-toggle:focus-visible{box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1), 0 0 0 2px rgba(var(--shadow),.85);}
/* 현재 모드 텍스트(왼쪽 · 옅게) — CSS content로 상태 표기 */
.theme-toggle .tt-state{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  color:var(--muted);line-height:1;user-select:none;transition:color .5s ease;}
.theme-toggle .tt-state::before{content:"LIGHT";}
.theme-toggle[aria-checked="true"] .tt-state::before{content:"DARK";}
/* 이중양각 토글: 높이 ≈ CARE 로고라벨(32px) · 볼록+오목 동시(레퍼런스) */
.theme-toggle .tt-sw{position:relative;flex:none;width:46px;height:26px;border-radius:13px;
  background:var(--bg);
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);
  transition:box-shadow .5s ease, background-color .5s ease;}
/* 노브: 볼록 원형(볼록 인풋과 동일 언어) · 라이트=왼쪽 / 다크=오른쪽 */
.theme-toggle .tt-knob{position:absolute;top:50%;left:3px;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;background:var(--bg);
  border-top:1px solid var(--edge-hi);border-left:1px solid var(--edge-hi);
  box-shadow:2px 2px 4px rgba(var(--shadow),1), -2px -2px 4px rgba(var(--hilite),1);
  transition:left .3s ease, background-color .5s ease, box-shadow .5s ease;}
.theme-toggle[aria-checked="true"] .tt-knob{left:calc(100% - 21px);}
@media (prefers-reduced-motion:reduce){
  .theme-toggle .tt-knob{transition:background-color .5s ease, box-shadow .5s ease;}
}

/* ── 레이아웃 유틸 ──────────────────────────────────────────────── */
.center{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 20px 40px;}

/* ── 폼 컨테이너 ────────────────────────────────────────────────── */
/* (구 waterPush 미세 굴절 애니메이션 제거 — 폼 스케일 진동이 텍스트를
   흐릿↔선명하게 반복시켜 가독성을 해쳐서 뺐음) */
.form{width:100%;max-width:330px;display:flex;flex-direction:column;}
.form.wide{max-width:380px;}   /* 회원가입 등 필드 많은 폼 */

/* ── 제목 ───────────────────────────────────────────────────────── */
.title{font-family:var(--mono);color:var(--title-ink);font-size:21px;letter-spacing:.06em;
  text-align:center;margin:0 0 34px;text-shadow:1px 1px 1px rgba(var(--hilite),.7);}

/* ── 인풋 (빈칸=오목, 타이핑하면=볼록으로 부드럽게 올라옴) ───────── */
/* 오목/볼록을 같은 4겹 구조로 두고 알파만 교차 → CSS가 보간 가능 */
.field{width:100%;outline:0;background:var(--field-bg);
  border:0;border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  border-radius:30px;padding:17px 26px;margin-bottom:20px;
  font-family:var(--mono);font-size:14.5px;color:var(--field-ink);letter-spacing:.02em;
  box-shadow:inset 3.8px 3px 6px rgba(var(--fld-sh),1), inset -5px -6px 9px rgba(var(--fld-hi),1),
             3px 3px 6px rgba(var(--fld-sh),0), -3.5px -3.5px 7px rgba(var(--fld-hi),0);
  transition:box-shadow .65s cubic-bezier(.4,0,.2,1), background-color .5s ease, color .5s ease, border-color .5s ease;}
.field::placeholder{color:var(--ph);}
/* ⚠️★**`[placeholder]`가 반드시 붙어야 한다.** `:placeholder-shown`은 "지금 플레이스홀더를 **보여주는 중**"일 때만 매치된다 →
   placeholder 속성이 **없는** 인풋은 영영 매치되지 않고, 그래서 `:not(:placeholder-shown)`이 **항상 참**이 된다.
   그 결과 아무것도 입력하지 않은 빈 칸이 '채워짐(볼록)'으로 보였다(2026-07-29 사용자 발견, 상태가 정확히 거꾸로).
   ⚠️ 새 인풋을 만들 때 `.field`에는 **placeholder를 반드시 넣을 것** — 없으면 입력해도 볼록으로 안 바뀐다. */
.field[placeholder]:not(:placeholder-shown){
  box-shadow:inset 3.8px 3px 6px rgba(var(--fld-sh),0), inset -5px -6px 9px rgba(var(--fld-hi),0),
             3px 3px 6px rgba(var(--fld-sh),1), -3.5px -3.5px 7px rgba(var(--fld-hi),1);}

/* ── 주 버튼 (볼록 · hover 시 볼록 줄임 · 폼 다 채워지면 오목) ───── */
.btn{position:relative;width:100%;cursor:pointer;background:var(--bg);
  border:0;border-top:1.5px solid transparent;border-left:1.5px solid transparent;
  border-bottom:1.5px solid transparent;border-right:1.5px solid transparent;
  border-radius:30px;padding:18px 20px;margin-top:6px;
  font-family:var(--sans);font-weight:520;font-size:15px;color:var(--text);letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:6px 6px 13px rgba(var(--shadow),1), -6px -6px 13px rgba(var(--hilite),1),
             inset 2px 2px 7px rgba(var(--shadow),0), inset -5px -5px 10px rgba(var(--hilite),0);
  transition:box-shadow .65s cubic-bezier(.4,0,.2,1), border-color .65s cubic-bezier(.4,0,.2,1),
             transform .1s ease, background-color .5s ease, color .5s ease;}
/* 상단 하이라이트 라인 · 하단 라인 (양끝으로 흐려짐) */
.btn::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--edge-hi) 50%, transparent);opacity:.75;}
.btn::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--edge-lo) 50%, transparent);
  opacity:0;transition:opacity .65s cubic-bezier(.4,0,.2,1);}
.btn:hover{box-shadow:3.5px 3.5px 8px rgba(var(--shadow),1), -3.5px -3.5px 8px rgba(var(--hilite),1),
  inset 2px 2px 7px rgba(var(--shadow),0), inset -5px -5px 10px rgba(var(--hilite),0);}
.btn:active{box-shadow:6px 6px 13px rgba(var(--shadow),0), -6px -6px 13px rgba(var(--hilite),0),
  inset 4px 4px 11px rgba(var(--shadow),1), inset -8px -8px 15px rgba(var(--hilite),1);transform:translateY(1px);}
/* 폼의 필수 .field 가 다 채워지면(선택=.opt 제외) → 주 버튼 오목 */
.form:not(:has(.field[placeholder]:not(.opt):placeholder-shown)) .btn{
  border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);
  box-shadow:6px 6px 13px rgba(var(--shadow),0), -6px -6px 13px rgba(var(--hilite),0),
             inset 2px 2px 7px rgba(var(--shadow),1), inset -5px -5px 10px rgba(var(--hilite),1);}
.form:not(:has(.field[placeholder]:not(.opt):placeholder-shown)) .btn::after{opacity:1;}
.form:not(:has(.field[placeholder]:not(.opt):placeholder-shown)) .btn:hover{
  border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);
  box-shadow:6px 6px 13px rgba(var(--shadow),0), -6px -6px 13px rgba(var(--hilite),0),
             inset 3px 3px 9px rgba(var(--shadow),1), inset -7px -7px 13px rgba(var(--hilite),1);}

/* ── 업체 선택 리스트 (my.php · .btn 재사용 + 행 레이아웃) ──────── */
.co-list{display:flex;flex-direction:column;gap:4px;}
.co-list form{display:block;}
.btn.row{justify-content:space-between;text-align:left;}
.co-name{display:flex;align-items:center;gap:10px;font-weight:560;}
.co-badge{font-size:11.5px;font-weight:540;letter-spacing:.04em;color:var(--link);
  background:var(--chip);padding:4px 10px;border-radius:11px;}
.co-arrow{font-family:var(--mono);font-size:14px;color:var(--muted);letter-spacing:.06em;}

/* ── 동의 체크박스 (오목=미체크 / 볼록+체크마크=체크, 인풋과 같은 언어) ── */
.agree{display:flex;align-items:center;gap:11px;margin:0 4px 20px;cursor:pointer;user-select:none;
  font-family:var(--sans);font-size:14px;letter-spacing:.01em;color:var(--muted);}
.agree input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;border-radius:7px;
  background:var(--bg);cursor:pointer;position:relative;
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);
  transition:box-shadow .3s ease, background-color .5s ease;}
.agree input:checked{border-top:1px solid var(--edge-hi);border-left:1px solid var(--edge-hi);
  box-shadow:2px 2px 4px rgba(var(--shadow),1), -2px -2px 4px rgba(var(--hilite),1);}
.agree input:checked::after{content:"";position:absolute;left:7px;top:3.5px;width:4px;height:8px;
  border:solid var(--title-ink);border-width:0 2px 2px 0;transform:rotate(45deg);}
.agree:hover{color:var(--link-h);}

/* 동의 행 (체크박스 + 약관 확인 링크) */
.agree-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 20px;}
.terms-link{flex:none;font-family:var(--sans);font-size:12.5px;color:var(--link);background:none;border:0;cursor:pointer;
  padding:2px 0;text-decoration:underline;text-underline-offset:2px;transition:color .2s;}
.terms-link:hover{color:var(--link-h);}

/* ── 문서형 본문 타이포 (약관 등 — 글래스 카드 안에서 .glass-body와 조합) ── */
.modal-body{font-family:var(--sans);font-size:14px;line-height:1.75;color:var(--muted);}
.modal-body > p:first-child{color:var(--text);margin:0 0 4px;}
.modal-body h4{font-size:14px;font-weight:600;color:var(--text);margin:16px 0 5px;}
.modal-body ul{margin:0;padding-left:17px;}
.modal-body li{margin:2px 0;}
.modal-note{margin-top:16px;font-size:12px;color:var(--ph);line-height:1.6;}

/* ── 구분선 (가운데 진하고 양끝 흐려짐 · 그루브) ────────────────── */
.divider{position:relative;width:100%;height:1px;margin:38px 0;
  background:linear-gradient(90deg, transparent, var(--div-lo) 50%, transparent);}
.divider::after{content:"";position:absolute;left:0;top:1px;width:100%;height:1px;
  background:linear-gradient(90deg, transparent, var(--div-hi) 50%, transparent);}

/* ── ghost 버튼 (보조 액션 · 톤 배경 필) ────────────────────────── */
.signup{text-align:center;}
.signup a{display:inline-block;font-family:var(--sans);font-size:14px;font-weight:540;
  letter-spacing:.01em;color:var(--link);background:var(--chip);
  padding:14px 35px;border-radius:24px;text-decoration:none;
  transition:color .16s, background .16s;}
.signup a:hover{background:var(--chip-h);color:var(--link-h);}

/* ── 알림(에러/안내) ────────────────────────────────────────────── */
.notice{font-size:13.5px;text-align:center;margin:0 0 22px;letter-spacing:.02em;line-height:1.6;}
.notice.err{color:var(--err);}
.notice.ok{font-family:var(--sans);color:var(--muted);letter-spacing:0;}
/* 초대 가입 안내(register.php) — 14px·더 진하게, 업체명 강조(#333=--text) */
.notice.ok.enroll{font-size:14px;color:var(--title-ink);}  /* 명시 지정값(스케일 제외) */
.notice.ok.enroll strong{color:var(--text);font-weight:600;}

/* ── 푸터 ───────────────────────────────────────────────────────── */
.botfoot{display:flex;align-items:center;justify-content:center;gap:13px;
  padding:22px 34px;font-family:var(--mono);font-size:12px;letter-spacing:.10em;color:var(--muted);}

/* =====================================================================
   앱 레이아웃 — board·batch·admin 등 리스트/내비가 있는 페이지
   (login류의 <main class="center"> 대신 <main class="wrap"> 사용)
   ===================================================================== */
/* ── 컬러 시스템 (시맨틱 · 기능별 · 추후 여기 한 곳만 바꾸면 전체 반영) ──
   원칙: 컬러 최소화. 포인트(--accent) 1색 + 기능색 소수만. 상태점 등은 전부 여기서 파생. */
:root{
  /* ★★로고 락업 전용 **브랜드 원색**(2026-07-21 사용자 지시: "완전 주황·완전 블랙").
     ⚠️ 관리자 UI 색(--accent/--logo-ink)과 **일부러 분리**한다. 그쪽은 배경 대비를 위해 조정된 값이라
        로고에 그대로 쓰면 브랜드 색이 아니게 된다(실제로 로고가 회색 #504f4c, CARE가 어두운 주황 #c2451a로 나갔다).
     ⚠️ 값의 출처는 홈페이지다 — index/brand/contact.php의 --ink/--paper/--signal. 그쪽이 바뀌면 여기도 맞출 것. */
  --brand-signal:#f15a24;  /* 브랜드 오렌지 — 두 테마 공통(원색 그대로) */
  /* ★로고 면 색 — **테마별로 다르다**(2026-07-21 사용자 지시로 라이트는 #222).
     ⚠️ 한 값으로 통일하면 반드시 한쪽이 죽는다. 실측 대비:
          라이트 배경 #f0efed → #222 13.85:1 ✔ / #fff 1.15:1 ✘
          다크  배경 #3b3b38 → #fff 11.24:1 ✔ / #222 1.42:1 ✘
        그래서 라이트=어두운 회색, 다크=흰색으로 **각자 반대편** 값을 쓴다. */
  --logo-fill:#222222;

  /* ★2026-07-21 사용자 지시로 인디고 블루 → **브랜드 오렌지**로 교체.
     출처 = 홈페이지의 포인트 컬러 `--signal:#f15a24` (index/brand/contact.php 공통).
     ⚠️ --accent는 채움(점·배지·버튼)용, --accent-ink는 **글자용**이다.
        브랜드 원색 #f15a24를 밝은 배경 위 본문 글자로 쓰면 대비가 모자라 읽기 나쁘다 → ink는 한 단계 어둡게. */
  --accent:#f15a24;       /* 포인트 컬러 (활성 메뉴·링크·강조) — 브랜드 오렌지 */
  --accent-ink:#c2451a;   /* 포인트 진한 버전 (텍스트용) */
  --c-info:#5b8def;       /* 정보/접수 */
  --c-warn:#d5931f;       /* 주의/견적필요 */
  --c-progress:#8a6cf0;   /* 진행 단계(견적완료·승인중) */
  --c-payment:#df713a;    /* 결제 대기 */
  --c-success:#23a06b;    /* 진행중/성공 */
  --c-done:#178a56;       /* 완료 */
  --c-neutral:#9aa1ab;    /* 대기/취소/보류 */
  /* 상태점 별칭(기존 클래스 호환) */
  --st-gray:var(--c-neutral); --st-blue:var(--c-info); --st-amber:var(--c-warn);
  --st-violet:var(--c-progress); --st-cyan:#1aa6b7; --st-orange:var(--c-payment);
  --st-green:var(--c-success); --st-done:var(--c-done);
}
/* 다크 — 같은 기능색을 명도만 올려(어두운 배경 가독) 별도 정의 */
:root[data-theme="dark"]{
  --logo-fill:#ffffff;    /* 다크는 흰색 — 위 라이트 쪽 주석의 대비표 참조(--brand-signal은 두 테마 공통) */
  --accent:#ff7a45;       /* 어두운 배경에서는 명도를 올려야 같은 세기로 읽힌다 */
  --accent-ink:#ff9a70;
  --c-info:#7da6f2;
  --c-warn:#e0a83e;
  --c-progress:#a68df4;
  --c-payment:#e88b58;
  --c-success:#43b585;
  --c-done:#3aa574;
  --c-neutral:#a8aeb8;
}

/* 유틸 */
.muted{color:var(--muted);}
.small{font-size:13.5px;}

/* 헤더 우측 (아이덴티티 / 로그아웃 / 토글) — .topbrand 안에 배치
   ⚠️토글은 scale(1.2) origin-right라 레이아웃 박스보다 왼쪽으로 ~24px 더 그려짐 → margin으로 이격 */
.topbar-right{display:flex;align-items:center;gap:18px;}
/* ★회사 홈페이지로 나가는 링크 — 조용한 텍스트. 급행·접속중 같은 '알림'이 아니라 '이동'이라
   버튼처럼 보이면 안 된다(눌러야 할 것처럼 시선을 끌면 본래 업무를 방해한다). */
.topbar-right .theme-toggle{margin-left:26px;}
.who{font-family:var(--mono);font-size:14.5px;letter-spacing:.02em;color:var(--title-ink);}
.who strong{color:var(--text);font-weight:600;}
.navlink{font-family:var(--sans);font-size:14.5px;font-weight:520;color:var(--link);text-decoration:none;transition:color .2s;}
.navlink:hover{color:var(--link-h);}

/* ── 앱 셸(관리자 2단): 좌 메뉴 · 콘텐츠 ─────────────────────────
   이너 정렬 = 헤더와 일치(좌우 34px). 영역 간 gap 30px. 두 영역 모두 양각 패널. */
.shell{flex:1;display:grid;
  grid-template-columns:clamp(260px,17vw,330px) minmax(0,1fr);
  gap:30px;align-items:start;width:100%;padding:6px 34px 34px;}
/* 콘텐츠 양각 패널 */
.shell .wrap{background:var(--bg);border-radius:22px;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:5px 5px 12px rgba(var(--shadow),.75), -5px -5px 12px rgba(var(--hilite),.85);}
/* 좌 컬럼 = 스티키 스택(신원 패널 + 메뉴 패널, 각각 별도 양각) — top은 JS가 최초 로드 위치로 실측 고정 */
.sidebar{position:sticky;top:110px;height:calc(100vh - 110px - 34px);
  display:flex;flex-direction:column;gap:18px;}
/* 신원·메뉴·INDEX 각각 볼록 패널 (같은 양각 처리) */
.side-id,.side-nav,.side-index{background:var(--bg);border-radius:20px;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:5px 5px 12px rgba(var(--shadow),.75), -5px -5px 12px rgba(var(--hilite),.85);}
/* ⚠️ 스크롤바는 숨기고(디자인) **페이드 마스크 + 꺾쇠**로 "더 있다"를 알린다(2026-07-29 사용자 지시).
   스크롤바만 지우면 메뉴가 잘린 줄도 모른다 — 표시 수단을 반드시 같이 둘 것.
   클래스(.can-up/.can-down/.has-more)는 sys-head.php의 스크립트가 켜고 끈다. */
.side-nav{flex:1;min-height:0;padding:15px;overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;}
.side-nav::-webkit-scrollbar{width:0;height:0;display:none;}
/* ⚠️★**mask-image를 쓰지 말 것.** 처음엔 위/아래 페이드를 mask로 넣었는데,
   마스크는 콘텐츠뿐 아니라 **그 요소의 배경과 box-shadow까지 함께 깎는다** →
   메뉴 패널의 뉴모 음영이 눈에 띄게 약해졌다(2026-07-29 사용자 지적, 즉시 롤백).
   표시는 아래 꺾쇠 버튼 하나로만 한다. */
/* 스크롤 여지가 있을 때 뜨는 꺾쇠 — 누르면 그 방향으로 한 화면 이동 */
.side-hint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50%;display:none;align-items:center;justify-content:center;
  color:var(--muted);background:var(--bg);cursor:pointer;pointer-events:auto;z-index:3;
  box-shadow:2px 2px 5px rgba(var(--shadow),1), -2px -2px 5px rgba(var(--hilite),1);}
.side-hint svg{width:15px;height:15px;}
.sidebar.has-more .side-hint{display:flex;animation:sideHintBob 1.9s ease-in-out infinite;}
/* 맨 아래까지 내렸는데 위로 더 있으면 = 위로 올리라는 뜻 → 꺾쇠를 뒤집는다 */
.side-hint.up svg{transform:rotate(180deg);}
.sidebar.has-more .side-hint.up{animation:sideHintBobUp 1.9s ease-in-out infinite;}
.side-hint:hover{color:var(--text);}
@keyframes sideHintBob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(3px);}}
@keyframes sideHintBobUp{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-3px);}}
@media (prefers-reduced-motion:reduce){.sidebar.has-more .side-hint{animation:none;}}
/* 모바일 전체메뉴 오버레이는 사이드바를 JS로 복제한다 → 거기선 이 힌트를 숨긴다 */
.m-menu .side-hint,#mMenu .side-hint{display:none !important;}
/* 클라이언트 = 1단(solo): 좌우 영역 없이 콘텐츠만 가운데(클라 레이아웃은 추후 별도 설계) */
.shell.solo{display:block;}
.shell.solo .wrap{max-width:980px;margin:0 auto;}
.shell .wrap{margin:0;max-width:none;padding:28px 32px 48px;}  /* 칼럼 가득 → 패널 간 간격 = gap 그대로 */

/* 신원 영역 (관리자 이름 · 로그아웃) — 메뉴 패널 위 별도 볼록 박스 */
.side-id{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 21px;}   /* ★2026-07-23 세로 17→9px로 축소 — INDEX 박스(.side-index, ~50px)와 높이를 맞춤(사용자: "관리자 쪽을 줄여서 맞춰"). 높이는 안쪽 로그아웃 필이 결정. */
.side-id-name{font-family:var(--sans);font-size:13.5px;font-weight:560;color:var(--muted);min-width:0;}
.side-id-name strong{color:var(--text);font-weight:620;}   /* 이름은 짙게, "관리자" 접두는 흐리게 */
/* 로그아웃 = 오목 필 버튼 */
.side-id-out{flex:none;font-family:var(--sans);font-size:12px;font-weight:540;color:var(--muted);text-decoration:none;
  padding:9px 15px;border-radius:12px;background:var(--bg);
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);
  transition:color .2s ease, box-shadow .3s ease;}
.side-id-out:hover{color:var(--text);}
.side-id-sub{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:3px;letter-spacing:0;}

/* PROGRAM GALLERY = 회사 메인(/)으로 나가는 링크. 신원 박스(.side-id)와 **동일한 양각 패널**.
   화살표(긴 꼬리)+텍스트를 **왼쪽에 붙여** 배치(flex-start, 좁은 gap). 전체가 클릭 링크라 hover/press 반응을 더한다(누르면 오목). */
.side-index{display:flex;align-items:center;justify-content:flex-start;gap:18px;padding:13px 21px;
  text-decoration:none;color:var(--muted);cursor:pointer;
  transition:color .2s ease, box-shadow .3s ease;}
.side-index:hover{color:var(--text);}
.side-index:active{box-shadow:inset 3px 3px 8px rgba(var(--shadow),1), inset -3px -3px 8px rgba(var(--hilite),1);}
/* 대가리(꺾쇠)만 담은 **평면** 흰 동그라미(24px, 그림자 없음). padding 13px+원 24px = ~50px로 .side-id와 높이 일치 */
.side-index .si-arrow{width:24px;height:24px;flex:none;}
.side-index .si-label{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.05em;}

/* 클라 업체 정보 (profile.php) */
.info-list{display:grid;grid-template-columns:130px 1fr;gap:11px 18px;margin:2px 0 0;}
.info-list dt{font-family:var(--sans);font-size:13px;color:var(--muted);}
.info-list dd{font-family:var(--sans);font-size:14px;color:var(--text);margin:0;word-break:break-all;}
.mem-list{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
/* 2단 구조: 이름줄(이름+뱃지) / 메타줄(이메일·전화·시각). 우측=액션 버튼. flat 나열 → 위계 부여 */
.mem-row{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;
  padding:14px 18px;border-radius:14px;background:var(--bg);
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.mem-info{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto;}
.mem-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mem-name{font-family:var(--sans);font-size:15px;font-weight:640;color:var(--text);letter-spacing:-.01em;}
.mem-sub{display:flex;align-items:center;flex-wrap:wrap;font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.5;}
.mem-sub .mem-meta+.mem-meta::before{content:"·";margin:0 9px;opacity:.5;}
.mem-act{display:flex;align-items:center;gap:8px;flex:none;}
.mem-badge{font-family:var(--mono);font-size:11px;color:var(--accent-ink);background:rgba(241,90,36,.13);padding:3px 9px;border-radius:8px;}
.mem-badge.chat{color:var(--c-success);background:rgba(35,160,107,.13);}
:root[data-theme="dark"] .mem-badge{color:var(--accent);background:rgba(255,122,69,.16);}
.mem-meta{font-family:var(--sans);font-size:12.5px;color:var(--muted);}
.invite-box{margin-top:18px;padding:16px 18px;border-radius:14px;
  background:rgba(241,90,36,.1);border:1px solid rgba(241,90,36,.24);}
:root[data-theme="dark"] .invite-box{background:rgba(255,122,69,.12);border-color:rgba(255,122,69,.26);}
.invite-box p{margin:0 0 11px;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--text);}
/* 초대 링크: 틴트 영역 위이므로 평면(뉴모 금지) — 흰 필 + 헤어라인 + 복사 버튼 */
.invite-row{display:flex;gap:8px;align-items:stretch;}
.invite-link{flex:1;min-width:0;font-family:var(--mono);font-size:12.5px;color:var(--text);
  background:rgba(255,255,255,.72);border:1px solid rgba(241,90,36,.3);border-radius:10px;
  padding:11px 13px;outline:none;box-shadow:none;}
:root[data-theme="dark"] .invite-link{background:rgba(255,255,255,.1);border-color:rgba(255,122,69,.3);}
.invite-copy{flex:none;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;
  color:#fff;background:var(--accent-ink);border:0;border-radius:10px;padding:0 20px;transition:opacity .2s, background .25s;}
.invite-copy:hover{opacity:.9;}
.invite-copy.done{background:var(--c-success);}
/* profile 편집 폼 */
.pf-form .lbl{margin-top:14px;}
.lbl-hint{font-family:var(--sans);font-size:11px;font-weight:400;color:var(--ph);margin-left:6px;}
.pf-sub{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);margin:24px 2px 2px;letter-spacing:.02em;}
.pf-act{margin-top:22px;display:flex;justify-content:flex-end;}
.pf-note{font-family:var(--sans);font-size:13px;color:var(--muted);margin:2px 0 12px;line-height:1.6;}
.bt-note{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted);}
/* 사업자등록증 */
.license-box{margin-top:24px;padding:18px 20px;border-radius:16px;background:var(--bg);
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.license-head{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:10px;}
.license-ok{font-family:var(--mono);font-size:11px;color:var(--c-success);background:rgba(35,160,107,.13);padding:3px 9px;border-radius:8px;}
:root[data-theme="dark"] .license-ok{background:rgba(67,181,133,.16);}
.license-view{margin:8px 0 14px;}
.license-thumb{max-width:240px;max-height:180px;border-radius:10px;border:1px solid var(--edge-lo);display:block;}
.mem-badge.me{color:var(--c-success);background:rgba(35,160,107,.13);}
:root[data-theme="dark"] .mem-badge.me{background:rgba(67,181,133,.16);}
.mem-del{margin-left:auto;}
/* 삭제함(admin/trash) 행 액션 */
.trash-act{display:flex;gap:8px;flex:none;}   /* = .mem-act (하위호환 유지) */
/* 계정 삭제 위험 영역 */
.danger-zone{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--edge-lo);}
.dz-txt{flex:1;min-width:200px;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted);}
@media (max-width:560px){ .info-list{grid-template-columns:1fr;gap:3px 0;} .info-list dt{margin-top:8px;} }

/* 좌측 세로 메뉴 — 양각 영역 안에 아이템 한 번 더 볼록, 활성 = 오목 + 포인트 */
.side-nav{display:flex;flex-direction:column;gap:12px;}
/* 일반 = 볼록, 활성 = 오목+짙은 잉크 (반전 시안 검토 후 이 방향으로 확정) */
.side-nav a{display:block;padding:13px 19px;border-radius:15px;text-decoration:none;background:var(--bg);
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  font-family:var(--sans);font-size:14.5px;font-weight:520;color:var(--muted);
  box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1);
  transition:color .2s ease, box-shadow .35s ease;}
.side-nav a:hover{color:var(--text);
  box-shadow:2px 2px 5px rgba(var(--shadow),1), -2px -2px 5px rgba(var(--hilite),1);}
.side-nav a.on{color:var(--text);font-weight:620;
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}

/* 좁은 화면: 1단으로 — 메뉴는 가로 칩 */
@media (max-width:1120px){
  .shell{display:block;padding:6px 34px 0;}
  .sidebar{position:static;height:auto;margin-bottom:18px;}
  .side-nav{flex-direction:row;flex-wrap:wrap;}
}

/* 넓은 콘텐츠 컨테이너 */
.wrap{flex:1;width:100%;max-width:900px;margin:0 auto;padding:6px 34px 64px;}

/* 페이지 헤드 (제목 + 보조 + 우측 액션) */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:14px 0 26px;}
.ph-title{font-family:var(--mono);font-size:21px;font-weight:560;letter-spacing:.02em;color:var(--text);}   /* 뉴모·페이퍼 동일 21px(사용자 지시 2026-07-27, 뉴모 기준으로 통일 — 페이퍼 전용 24 오버라이드 제거) */
.ph-sub{margin-top:10px;font-family:var(--sans);font-size:15px;color:var(--muted);
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;}   /* 숫자 배지와 텍스트 세로 중앙 정확히 일치 */
.ph-sub strong{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;
  border-radius:12px;background:var(--chip);font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--text);line-height:1;}
/* 평면 서브(활동로그 등) — 영역=평면 톤 필, 숫자=평면 배경(영역보다 한 톤 밝게) */
.ph-sub.sub-inset{display:inline-flex;padding:9px 16px;border-radius:13px;background:var(--chip);gap:0;}
.ph-sub.sub-inset strong{margin:0 5px;background:var(--bg);border:0;box-shadow:none;}
/* 설명 라인 — 정보 라인(.ph-sub, 숫자 강조)과 목적을 구분. 제목 아래 '정보 / 설명' 2단의 둘째 줄.
   문장이므로 한 톤 흐리게·살짝 작게·행간 넉넉히(정보=데이터, 설명=읽는 문장) */
.ph-desc{margin-top:8px;font-family:var(--sans);font-size:13.5px;font-weight:400;color:var(--muted);line-height:1.65;max-width:64ch;}
.ph-desc strong{color:var(--text);font-weight:600;}
.ph-sub a{color:var(--link);text-decoration:none;}
.ph-sub a:hover{color:var(--link-h);}
.ph-sub strong{color:var(--text);font-weight:600;}

/* 연결 완료 → 안내 메일 유도 배너 (accent 톤) */
.notify-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 20px;padding:15px 20px;border-radius:15px;
  background:rgba(241,90,36,.12);border:1px solid rgba(241,90,36,.28);}
:root[data-theme="dark"] .notify-bar{background:rgba(255,122,69,.14);border-color:rgba(255,122,69,.3);}
.nb-text{font-family:var(--sans);font-size:13.5px;color:var(--text);min-width:0;}
.nb-text strong{font-weight:600;color:var(--accent-ink);}
/* 평면 버튼 — 배너 배경보다 한 톤 진한 accent 필 */
.nb-btn{flex:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:13px;font-weight:560;text-decoration:none;
  color:var(--accent-ink);background:rgba(241,90,36,.2);padding:10px 16px;border-radius:12px;
  transition:background .2s ease;}
.nb-btn:hover{background:rgba(241,90,36,.32);}
.nb-btn svg{width:12px;height:12px;}
:root[data-theme="dark"] .nb-btn{color:var(--accent);background:rgba(255,122,69,.22);}
:root[data-theme="dark"] .nb-btn:hover{background:rgba(255,122,69,.34);}
.nb-actions{display:inline-flex;align-items:center;gap:8px;flex:none;}
.nb-close{flex:none;width:30px;height:30px;border-radius:9px;border:0;cursor:pointer;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted);transition:color .2s,background .2s;}
.nb-close:hover{color:var(--text);background:rgba(241,90,36,.14);}
.nb-close svg{width:11px;height:11px;}

/* 플래시 메시지 (오목 인셋 안내) */
.flash{margin:0 0 20px;padding:13px 20px;border-radius:15px;font-family:var(--sans);font-size:14px;
  color:var(--text);background:var(--bg);text-align:center;
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}

/* 콘텐츠 패널 (볼록 카드) */
.panel{background:var(--bg);border-radius:20px;padding:22px 24px;margin-bottom:18px;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:5px 5px 12px rgba(var(--shadow),.75), -5px -5px 12px rgba(var(--hilite),.85);}
.panel-title{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--title-ink);margin:0 0 4px;}
.panel-desc{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin:0 0 4px;line-height:1.6;}

/* 리스트 행 (볼록 필 링크 — .field/.btn 볼록 언어) */
.row-list{display:flex;flex-direction:column;gap:9px;}
.row-list form{display:block;}
.row-link{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:16px 22px;border-radius:16px;background:var(--bg);text-decoration:none;color:var(--text);cursor:pointer;
  border:0;border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);text-align:left;
  box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1);
  transition:box-shadow .3s ease, background-color .5s ease;}
.row-link:hover{box-shadow:2px 2px 5px rgba(var(--shadow),1), -2px -2px 5px rgba(var(--hilite),1);}
.row-link:active{box-shadow:inset 2px 2px 6px rgba(var(--shadow),1), inset -2px -2px 6px rgba(var(--hilite),1);}
.row-main{display:flex;flex-direction:column;gap:5px;min-width:0;}
.row-title{font-family:var(--sans);font-weight:560;font-size:15px;color:var(--text);}
/* 리스트 행 안 업체명 — 업체별 고유색 라벨 (--co-h = 업체명 해시 hue, co_hue() 헬퍼로 주입)
   채도 낮은 파스텔로 구별만: 라이트=밝은 필+짙은 글자, 다크=어두운 필+밝은 글자 */
.co-tag{display:inline-flex;align-items:center;padding:4px 10px;margin-right:7px;border-radius:9px;
  background:hsl(var(--co-h,40) 26% 87%);font-family:var(--sans);font-size:12px;font-weight:560;
  color:hsl(var(--co-h,40) 24% 32%);vertical-align:middle;line-height:1.3;white-space:nowrap;}
:root[data-theme="dark"] .co-tag{background:hsl(var(--co-h,40) 14% 29%);color:hsl(var(--co-h,40) 20% 80%);}
.row-meta{font-family:var(--mono);font-size:13.5px;letter-spacing:.02em;color:var(--muted);}   /* 2026-07-25 12.5→13.5(+1) 리스트 메타 가독 */
.row-arrow{font-family:var(--mono);font-size:14px;color:var(--muted);flex:none;}

/* 상태 배지 (색점 + 라벨 — 차분) */
.status{display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;
  font-family:var(--mono);font-size:14px;letter-spacing:.03em;color:var(--muted);}   /* 2026-07-25 12→14(+2) 우측 상태 라벨 가독 */
.status .dot{width:8px;height:8px;border-radius:50%;flex:none;}
.dot.bs-draft,.dot.bs-canceled,.dot.bs-hold{background:var(--st-gray);}
.dot.bs-submitted{background:var(--st-blue);}
.dot.bs-quoting{background:var(--st-amber);}
.dot.bs-quoted{background:var(--st-violet);}
.dot.bs-approving{background:var(--st-cyan);}
.dot.bs-awaiting_payment{background:var(--st-orange);}
.dot.bs-in_progress{background:var(--st-green);}
.dot.bs-done{background:var(--st-done);}

/* 빈 상태 */
/* 빈 상태 — 텍스트가 허공에 뜨지 않게 점선 영역으로 감싸고, 아이콘 + 제목/부가 2단으로 위계 부여 */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  text-align:center;padding:46px 24px;font-family:var(--sans);font-size:14px;color:var(--muted);line-height:1.7;
  border:1.5px dashed color-mix(in srgb, var(--muted) 42%, transparent);border-radius:16px;}
.empty svg{width:36px;height:36px;fill:none;stroke:var(--muted);opacity:.4;}
.empty p{margin:0;}
.empty strong{color:var(--text);font-weight:600;}
.empty .em-title{display:block;font-size:15.5px;font-weight:600;color:var(--text);margin-bottom:5px;}

/* 인라인/보조 버튼 (page-head 액션 등 — 폭 자동) */
.btn.inline{width:auto;padding:13px 24px;font-size:14.5px;}
.btn.sm{width:auto;padding:10px 18px;font-size:14px;}

/* 더보기 링크 버튼 — 양각 필 + 음각 원 안 화살표(SVG) */
.more-btn{display:inline-flex;align-items:center;gap:11px;padding:10px 11px 10px 20px;border-radius:16px;
  background:var(--bg);border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  text-decoration:none;font-family:var(--sans);font-size:13px;font-weight:560;color:var(--title-ink);
  box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1);
  transition:box-shadow .3s ease, color .2s ease;}
.more-btn:hover{color:var(--text);
  box-shadow:2px 2px 5px rgba(var(--shadow),1), -2px -2px 5px rgba(var(--hilite),1);}
.more-btn:active{box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.more-arrow{width:25px;height:25px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  box-shadow:inset 1.5px 1.5px 3px rgba(var(--shadow),1), inset -1.5px -1.5px 3px rgba(var(--hilite),1);}
.more-arrow svg{width:12px;height:12px;display:block;}

/* 뒤로가기 버튼 — 뉴모피즘 볼록 알약 + SVG 화살표(currentColor 상속) · 전 페이지 공용 */
.back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
  color:var(--muted);text-decoration:none;margin:0 0 18px;padding:10px 18px 10px 15px;border-radius:999px;
  background:var(--bg);border:0;
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);
  transition:color .2s ease, box-shadow .3s ease;}
.back:hover{color:var(--text);box-shadow:inset 3px 3px 6px rgba(var(--shadow),1), inset -3px -3px 6px rgba(var(--hilite),1);}
.back::before{content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;}

/* 용어사전 카드 (glossary.php) */
.gloss-term{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--text);}
.gloss-desc{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:6px;line-height:1.65;}
.gloss-img{margin-top:13px;max-width:100%;border-radius:12px;display:block;}

/* ── 폼 확장: 라벨 · textarea · select · 파일첨부 · 폼행 (앱 폼용) ── */
.lbl{display:block;font-family:var(--sans);font-size:13.5px;color:var(--muted);margin:0 0 7px 4px;}
.lbl .req{color:var(--err);margin-left:2px;}
textarea.field{min-height:92px;resize:vertical;line-height:1.65;border-radius:18px;}   /* 여러 줄 = 카드와 동일 라디우스(필 금지) */
select.field{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.f-row{display:flex;gap:14px;}
.f-row > *{flex:1;min-width:0;}
/* 파일 첨부 — 큼직한 톤 필 버튼 + 선택 파일 리스트(.fu-list, sys-head JS가 채움) */
.file-btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:540;
  color:var(--title-ink);padding:14px 24px;border-radius:15px;background:var(--chip);transition:background .2s,color .2s;}
.file-btn:hover{background:var(--chip-h);color:var(--text);}
.file-btn svg{width:15px;height:15px;flex:none;}
.file-btn input{display:none;}
.fu-wrap{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:9px;}
.fu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%;}
.fu-list:empty{display:none;}
.fu-list li{font-family:var(--sans);font-size:12.5px;color:var(--text);background:var(--chip);
  padding:10px 14px;border-radius:11px;max-width:420px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── 배치 상세 (batch.php) ──────────────────────────────────── */
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;}
.status.lg{font-size:14px;}
.status.lg .dot{width:9px;height:9px;}

/* 관리자 컨트롤 바 (오목 인셋) */
.admin-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 22px;padding:15px 20px;border-radius:16px;
  background:var(--bg);box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.admin-controls label{font-family:var(--sans);font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:10px;margin:0;}
.admin-controls select.field{width:auto;min-width:140px;padding:11px 40px 11px 16px;margin:0;}
/* 그룹 상태 셀렉트 · 완료 목표일 = 동일한 볼록(neumo raised) pill로 통일 — 네이티브 크롬 의존 제거 + 커스텀 아이콘 */
.admin-controls select.field,
.admin-controls .due-input{-webkit-appearance:none;appearance:none;border:0;border-radius:26px;background-color:var(--bg);
  box-shadow:6px 6px 13px rgba(var(--shadow),.7), -6px -6px 13px rgba(var(--hilite),.9);}
.admin-controls select.field:active,
.admin-controls .due-input:active{box-shadow:inset 3px 3px 7px rgba(var(--shadow),1), inset -3px -3px 7px rgba(var(--hilite),1);}
.admin-controls select.field{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}

/* 항목 카드 */
.item-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.item-card{position:relative;background:var(--bg);border-radius:18px;padding:19px 22px;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:4px 4px 10px rgba(var(--shadow),.7), -4px -4px 10px rgba(var(--hilite),.8);}
.item-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px;}
.item-no{font-family:var(--mono);font-size:12px;color:var(--muted);width:22px;height:22px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 1.5px 1.5px 3px rgba(var(--shadow),1), inset -1.5px -1.5px 3px rgba(var(--hilite),1);}
.item-tags{display:flex;gap:6px;flex-wrap:wrap;flex:1;}
.tag{font-family:var(--sans);font-size:12px;color:var(--link);background:var(--chip);padding:4px 10px;border-radius:9px;}
.tag.rush{color:var(--err);font-weight:600;background:rgba(176,83,62,.12);}
:root[data-theme="dark"] .tag.rush{background:rgba(217,122,99,.16);}
.row-title .tag.rush{margin-right:7px;vertical-align:middle;}
.item-status{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.item-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--st-gray);flex:none;}
.item-status.is-quoted::before{background:var(--st-violet);}
.item-status.is-approved::before{background:var(--st-green);}
.item-status.is-inquiry::before{background:var(--st-amber);}
.item-status.is-in_progress::before{background:var(--st-blue);}
.item-status.is-done::before{background:var(--st-done);}
.item-body{font-family:var(--sans);font-size:14.5px;line-height:1.7;color:var(--text);}
.item-url{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:13.5px;color:var(--accent);word-break:break-all;text-decoration:none;}
.item-quote{margin-top:12px;font-family:var(--sans);font-size:14px;color:var(--text);}
.item-del{position:absolute;top:15px;right:18px;}

/* ── 견적 입력 워크시트 (batch.php · 관리자) ─────────────────── */
.quote-rows{display:flex;flex-direction:column;gap:9px;margin-bottom:20px;}
/* 견적입력 필드 라벨 래퍼 — 데스크톱은 통과(컨트롤이 곧 그리드 아이템, 한 줄 유지), 소제목 숨김. 모바일에서만 소제목+반반(아래 @media) */
.qf{display:contents;}
.qf-t{display:none;}
.quote-row{display:grid;grid-template-columns:26px minmax(0,1fr) 130px 1.1fr 120px;gap:9px;align-items:center;
  padding:11px 14px;border-radius:14px;background:var(--chip);}   /* 급행비 컬럼 제거(요청 단위로 일원화) → 5열 */
/* 급행 행: 좌→우 20% 지점까지 붉은 계열 그라데이션이 배경에 스며듦 */
.quote-row.is-rush{background:linear-gradient(90deg, rgba(176,83,62,.15), rgba(176,83,62,0) 20%), var(--chip);}
:root[data-theme="dark"] .quote-row.is-rush{background:linear-gradient(90deg, rgba(217,122,99,.17), rgba(217,122,99,0) 20%), var(--chip);}
.qr-no{font-family:var(--mono);font-size:11px;color:var(--muted);width:22px;height:22px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 1.5px 1.5px 3px rgba(var(--shadow),1), inset -1.5px -1.5px 3px rgba(var(--hilite),1);}
.qr-desc{font-family:var(--sans);font-size:13px;color:var(--text);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px;}
/* 견적 입력 컨트롤 — 오목 필드 */
.qr-cat,.qr-label,.qr-amt,.qr-rush{font-family:var(--sans);font-size:13px;color:var(--text);background:var(--bg);border:0;outline:0;
  height:40px;padding:0 14px;border-radius:11px;min-width:0;
  box-shadow:inset 2px 2px 4px rgba(var(--shadow),1), inset -2px -2px 4px rgba(var(--hilite),1);}
.qr-cat{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:30px;color:var(--muted);
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.qr-amt,.qr-rush{font-family:var(--mono);text-align:right;}
.qr-cat::placeholder,.qr-label::placeholder,.qr-amt::placeholder,.qr-rush::placeholder{color:var(--ph);}
.qr-rush{color:var(--err);}
/* 관리자 전용 내부 메모 — 항목 견적행 아래 전폭. 왼쪽 포인트 보더로 '내부용'임을 시각 구분 */
.qr-note{grid-column:1/-1;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--text);background:var(--bg);
  border:0;border-left:2px solid var(--accent);outline:0;padding:9px 13px;border-radius:8px 11px 11px 8px;min-width:0;
  resize:vertical;min-height:38px;
  box-shadow:inset 2px 2px 4px rgba(var(--shadow),1), inset -2px -2px 4px rgba(var(--hilite),1);}
.qr-note::placeholder{color:var(--ph);}
.qr-note:focus{border-left-color:var(--accent-ink);}
/* 견적 푸터 — 좌: 요약(크게, 존재감) / 우: 액션 버튼, 가로 나란히 */
.quote-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.quote-summary{flex:1;min-width:300px;max-width:480px;display:flex;flex-direction:column;gap:10px;
  padding:22px 28px;border-radius:18px;background:var(--bg);
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:5px 5px 12px rgba(var(--shadow),.75), -5px -5px 12px rgba(var(--hilite),.85);}
.qs-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--sans);font-size:13.5px;color:var(--muted);}
.qs-row b{font-family:var(--mono);font-weight:500;font-size:14.5px;color:var(--text);}
.qs-row.total{margin-top:8px;padding-top:14px;border-top:1px solid var(--div-lo);font-size:16px;color:var(--text);font-weight:600;}
.qs-row.total b{font-size:21px;font-weight:600;color:var(--accent-ink);}
/* 액션 — 둘 다 양각(동일 스타일), 위계는 잉크·굵기로 */
.quote-actions{display:flex;align-items:center;gap:10px;flex:none;}
.btn.inline.quiet{color:var(--muted);font-weight:480;}
.btn.inline.quiet:hover{color:var(--text);}
.btn.inline.primary{color:var(--accent-ink);font-weight:640;padding:13px 30px;font-size:14.5px;
  border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);}

/* 좁은 화면: 견적 행 2줄 + 푸터 세로 */
@media (max-width:820px){
  /* 모바일 견적입력 = 2열 그리드 · 각 필드 위 소제목(.qf-t) · 가격|급행비 반반 */
  .quote-row{grid-template-columns:1fr 1fr;gap:12px 10px;grid-auto-rows:auto;}
  /* 급행 배경 그라데이션 = 좌→우(90deg) → 위→아래(180deg) */
  .quote-row.is-rush{background:linear-gradient(180deg, rgba(176,83,62,.15), rgba(176,83,62,0) 22%), var(--chip);}
  :root[data-theme="dark"] .quote-row.is-rush{background:linear-gradient(180deg, rgba(217,122,99,.17), rgba(217,122,99,0) 22%), var(--chip);}
  .qr-no{display:none;}                         /* 번호 배지는 카드 구분으로 충분 → 숨김 */
  .qr-desc{grid-column:1 / 3;margin-bottom:2px;}
  .qf{display:flex;flex-direction:column;gap:5px;min-width:0;}   /* 데스크톱 contents → 모바일 세로 · min-width:0(가로 넘침 방지) */
  .qf > select,.qf > input,.qf > textarea{width:100%;min-width:0;box-sizing:border-box;}   /* 컨트롤이 컨테이너 밖으로 안 벗어나게 */
  .qf-t{display:block;font-family:var(--sans);font-weight:500;color:var(--muted);letter-spacing:.02em;padding-left:2px;}
  .qf-cat,.qf-label,.qf-amt,.qf-note{grid-column:1 / 3;}   /* 전체폭 (항목별 급행비 폐지 → 반반 불필요) */
  .qr-amt{text-align:left;}
  .qr-note{min-height:114px;}                          /* 내부 메모 3배가량 */
  /* 항목 폰트 통일 — 가장 작은 폰트 기준(12px)으로 소제목·값·설명 모두 동일 */
  .qr-desc,.qr-label,.qr-amt,.qr-rush,.qr-note,.qf-t,.qr-desc .tag{font-size:12px;}
  .quote-foot{flex-direction:column;align-items:stretch;}
  .quote-summary{max-width:none;}
  .quote-actions{justify-content:flex-end;}
}

/* ── P3: 클라이언트 견적 확인 · 항목 결정 · 문의 스레드 ────────── */
/* 항목 결정 액션 — 카드(--bg 베이스) 위 평면 칩 */
.item-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;}
.chip-btn.ok{color:var(--c-success);}
.chip-btn.ok:hover{color:var(--c-success);}

/* 문의 작성/답변 폼 */
.iq-form{margin-top:12px;}
.iq-form textarea.field{min-height:64px;margin-bottom:10px;}

/* 항목 문의 스레드 — 카드 안 톤 필 영역. 톤 필 위이므로 버블·배지는 평면(뉴모 금지) */
.ithread{margin-top:14px;padding:14px 16px 16px;border-radius:16px;background:var(--chip);}
.ithread-head{display:flex;align-items:center;gap:4px;margin-bottom:12px;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text);}
.ithread-head .n-badge{background:rgba(var(--shadow),.32);}
.iq-badge{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.02em;}
.iq-badge::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;}
.iq-badge.wait-admin{color:var(--c-warn);}   .iq-badge.wait-admin::before{background:var(--c-warn);}
.iq-badge.wait-client{color:var(--c-success);} .iq-badge.wait-client::before{background:var(--c-success);}
.ithread .comment-list{gap:9px;margin:0;}
.ithread .comment{max-width:100%;padding:11px 14px;border:0;box-shadow:none;background:rgba(var(--shadow),.3);}
.ithread .iq-form{margin-top:12px;}

/* 견적 확인 요약 (클라이언트, #review) */
.review-stats{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 18px;padding:13px 18px;border-radius:14px;
  background:var(--bg);box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.review-side{flex:1;min-width:280px;display:flex;flex-direction:column;gap:14px;align-items:flex-end;}
.final-form{display:flex;flex-direction:column;gap:12px;align-items:flex-end;width:100%;}
.final-form .lbl{margin:0;}
.cancel-form{margin:0;}
.cq-note{margin:4px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted);}
.cq-note strong{color:var(--text);font-weight:600;}
.cq-note.warn{color:var(--err);}
.review-msg{margin:0;font-family:var(--sans);font-size:14px;line-height:1.7;color:var(--muted);text-align:right;}
.review-msg strong{color:var(--text);font-weight:600;}

/* 결제 방법 세그먼트 — .seg 패턴(미선택 톤 필 / 선택 볼록) */
.pay-seg{display:flex;gap:8px;}
.pay-opt{position:relative;cursor:pointer;margin:0;}
.pay-opt input{position:absolute;opacity:0;pointer-events:none;}
.pay-opt span{display:inline-flex;align-items:center;padding:11px 18px;border-radius:12px;
  font-family:var(--sans);font-size:13.5px;font-weight:540;color:var(--muted);background:var(--chip);
  border-top:1.5px solid transparent;border-left:1.5px solid transparent;
  transition:color .2s ease, background .2s ease, box-shadow .3s ease;}
.pay-opt:hover span{color:var(--text);}
.pay-opt input:checked + span{color:var(--text);background:var(--bg);
  border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);
  box-shadow:2px 2px 5px rgba(var(--shadow),1), -2px -2px 5px rgba(var(--hilite),1);}

/* 관리자 항목 상태 셀렉트 (item-top 우측) — 작은 오목 컨트롤 */
.item-st-form{margin:0 76px 0 auto;}   /* 우측 절대배치 삭제 버튼과 이격 */
.ist{appearance:none;-webkit-appearance:none;cursor:pointer;border:0;outline:0;
  font-family:var(--mono);font-size:12px;color:var(--text);background:var(--bg);
  height:30px;padding:0 28px 0 13px;border-radius:9px;
  box-shadow:inset 1.5px 1.5px 3px rgba(var(--shadow),1), inset -1.5px -1.5px 3px rgba(var(--hilite),1);
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}

/* ── P4: 입금확인·완료 목표일·진행 프로그레스 ────────────────── */
/* 완료 목표일 = 네이티브 date. 브라우저 기본 달력 아이콘이 옆 셀렉트와 안 맞아 튀던 것 →
   기본 인디케이터를 투명 클릭영역으로 두고 커스텀 캘린더 아이콘(우측)으로 통일 + 값 폰트/색 정렬 */
.due-input{position:relative;width:auto;min-width:158px;margin:0;height:auto;cursor:pointer;
  font-family:var(--sans);color:var(--field-ink);letter-spacing:.02em;padding:10px 40px 10px 15px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8e89' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4.5' width='17' height='16' rx='2.5'/><line x1='3.5' y1='9' x2='20.5' y2='9'/><line x1='8' y1='2.6' x2='8' y2='6'/><line x1='16' y1='2.6' x2='16' y2='6'/></svg>");
  background-repeat:no-repeat;background-position:calc(100% - 13px) 50%;background-size:16px 16px;}
.due-input::-webkit-calendar-picker-indicator{position:absolute;top:0;right:0;width:44px;height:100%;
  margin:0;padding:0;opacity:0;cursor:pointer;}
.due-input::-webkit-inner-spin-button,.due-input::-webkit-clear-button{display:none;-webkit-appearance:none;}
.due-d{font-family:var(--mono);}
.due-d.near{color:var(--err);font-weight:600;}
.ac-note{font-family:var(--sans);font-size:13px;color:var(--muted);}
.ac-note,.admin-controls .ac-note strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 진행률 바 — 오목 트랙 + accent 평면 필 */
.prog-wrap{width:100%;display:flex;flex-direction:column;gap:11px;}
.prog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--sans);font-size:13px;color:var(--muted);}
.prog-head b{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);}
.prog-track{height:14px;border-radius:7px;background:var(--bg);overflow:hidden;
  box-shadow:inset 2px 2px 4px rgba(var(--shadow),1), inset -2px -2px 4px rgba(var(--hilite),1);}
.prog-fill{display:block;height:100%;border-radius:7px;min-width:0;
  background:linear-gradient(90deg, rgba(241,90,36,.5), rgba(241,90,36,.78));
  transition:width .6s ease;}
:root[data-theme="dark"] .prog-fill{background:linear-gradient(90deg, rgba(255,122,69,.45), rgba(255,122,69,.7));}

/* 워크시트(관리자) 항목 결정 상태 태그 */
.tag.st-inquiry{color:var(--c-warn);background:rgba(213,147,31,.13);font-weight:600;}
:root[data-theme="dark"] .tag.st-inquiry{background:rgba(224,168,62,.16);}
.tag.st-approved{color:var(--c-success);background:rgba(35,160,107,.12);}
:root[data-theme="dark"] .tag.st-approved{background:rgba(67,181,133,.16);}
.tag.st-canceled,.tag.st-rejected{color:var(--muted);background:var(--chip-h);text-decoration:line-through;}

/* 클라 보드: 액션 필요 태그 + 상태 요약 확장 */
.tag.act{color:var(--accent-ink);background:rgba(241,90,36,.13);font-weight:600;margin-left:8px;vertical-align:middle;}
:root[data-theme="dark"] .tag.act{color:var(--accent);background:rgba(255,122,69,.16);}
.item-status.is-payment::before{background:var(--c-payment);}

@media (max-width:820px){
  .review-side{align-items:stretch;}
  .final-form{align-items:stretch;}
  .final-form .btn{width:100%;}
  .review-msg{text-align:left;}
}

/* 첨부 목록 */
.att-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.att-list a{font-family:var(--sans);font-size:13.5px;color:var(--link);text-decoration:none;}
.att-list a:hover{color:var(--link-h);}
.att-size{color:var(--muted);font-size:12px;margin-left:4px;}

/* 제출 바 */
.submit-bar{margin:22px 0;padding:22px 24px;border-radius:18px;background:var(--bg);text-align:center;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:5px 5px 12px rgba(var(--shadow),.75), -5px -5px 12px rgba(var(--hilite),.85);}
.submit-bar p{font-family:var(--sans);font-size:14px;color:var(--muted);margin:0 0 16px;}

/* 섹션 블록 (항목추가 / 대화) — 영역 간 호흡 확대 */
.block{margin-top:46px;}
/* ── 영역별 배경 구분(오목 패널) + 액션 버튼을 패널 밖 아래·우측으로 위치 통일 ── */
#add.block, #talk.block, #paynote.block{background:var(--bg);border-radius:18px;padding:24px 26px;
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
#add.block .block-title, #talk.block .block-title, #paynote.block .block-title{margin-top:0;}
/* 결제 안내: 패널 아래 여백으로 항목 리스트와 명확히 분리 + 버튼 여백 */
#paynote.block{margin-bottom:46px;}
#paynote .block-act{margin-bottom:4px;}
#paynote textarea.field{margin-bottom:0;}
/* 액션 버튼 행: 패널 바깥(볼록 표면) 아래, 우측 정렬로 위치 통일 */
.block-act{display:flex;justify-content:flex-end;gap:10px;margin:14px 6px 0;}
.block-act > .btn{margin:0;}
/* 항목추가(왼쪽) + 제출(오른쪽) 한 줄, 세로 가운데 정렬 — 같은 버튼 타입, 색으로만 구분 */
/* 스텝1: 항목 추가 = 패널 아래 우측, 높이 낮춘 보조 버튼 */
.add-act{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin:14px 6px 0;}
.add-note{margin:0 auto 0 0;font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--muted);}
.btn.inline.add-btn{padding-top:8px;padding-bottom:8px;font-size:13px;}
/* 스텝2: 제출 = 위 간격으로 분리(별도 스텝), 메시지 위 · 버튼 아래 가운데. 버튼 아래 여백 확대 */
.submit-step{margin-top:46px;margin-bottom:48px;}
.submit-hint{margin:0 6px 16px;font-family:var(--sans);font-size:13px;line-height:1.65;color:var(--muted);text-align:center;}
.submit-act{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;}   /* 급행 체크(위) + 제출 버튼(아래) 세로 중앙 */
.submit-act > .btn{min-width:300px;justify-content:center;}
@media (max-width:640px){
  .block-act{justify-content:stretch;}
  .block-act > .btn{flex:1;justify-content:center;text-align:center;}
  .submit-act > .btn{width:100%;}
}
/* 급행/파일 행: 급행(좌·상단) · 파일첨부(우측 끝) */
.fu-wrap.fu-right{flex:0 1 auto;align-items:flex-end;}
/* 급행 팝업: 헤더-본문 간격 확대 */
#rushModal .glass-head{margin-bottom:26px;}
/* 본문 — 색 통일(모두 text), 중요 내용만 포인트 컬러(.hl) */
#rushModal .rush-body{font-family:var(--sans);font-size:14px;line-height:1.78;}
#rushModal .rush-body p{margin-bottom:13px;color:var(--text);}
#rushModal .rush-body p:last-of-type{margin-bottom:0;}
#rushModal .rush-body strong{font-weight:700;color:var(--text);}
.rush-body .hl{color:var(--accent-ink);font-weight:700;}   /* 급행·제출 확인 등 글래스 안내 공용 강조 */
/* 동의 체크박스 — 좌측 정렬 + 글래스 위에서 또렷하게 */
#rushModal .rush-agree{justify-content:flex-start;width:100%;text-align:left;margin:22px 0 0;color:var(--text);}
#rushModal .rush-agree input{background:rgba(255,255,255,.55);box-shadow:none;border:1.5px solid rgba(241,90,36,.45);}   /* 2026-07-24 옛 블루(72,100,140) 잔재 → 브랜드 오렌지로 교정 */
#rushModal .rush-agree input:checked{background:var(--accent-ink);border-color:var(--accent-ink);box-shadow:none;}
#rushModal .rush-agree input:checked::after{border-color:#fff;}
.block-title{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--title-ink);
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;}
.block-title .link{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:13px;font-weight:500;
  color:var(--link);background:var(--chip);padding:9px 14px;border-radius:11px;text-decoration:none;letter-spacing:0;white-space:nowrap;
  transition:background .18s ease,color .18s ease;}
.block-title .link:hover{background:var(--chip-h);color:var(--link-h);}
.block-title span.n{font-family:var(--sans);color:var(--muted);font-weight:400;}

/* ── 관리자 대시보드 (admin/index.php) ─────────────────────── */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:4px 0 0;}
.kpi{display:flex;flex-direction:column;gap:11px;padding:17px 19px;border-radius:16px;background:var(--bg);text-decoration:none;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:3px 3px 7px rgba(var(--shadow),.7), -3px -3px 7px rgba(var(--hilite),.8);transition:box-shadow .3s ease;}
a.kpi:hover{box-shadow:2px 2px 5px rgba(var(--shadow),.7), -2px -2px 5px rgba(var(--hilite),.8);}
.kpi-label{font-family:var(--sans);font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;}
.kpi-label .dot{width:8px;height:8px;border-radius:50%;flex:none;}
.kpi-num{font-family:var(--mono);font-size:23px;font-weight:500;letter-spacing:.01em;color:var(--text);}
.kpi-num .unit{font-size:13.5px;color:var(--muted);margin-left:3px;font-weight:400;}
.kpi.accent{box-shadow:inset 2px 2px 6px rgba(var(--shadow),1), inset -2px -2px 6px rgba(var(--hilite),1);border:0;}
.kpi.accent .kpi-num{color:var(--accent-ink);}
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:38px;align-items:start;}
/* 대시보드 좌우 열 정렬 일치: 타이틀 세로 가운데 + 행 고정 높이 76px·간격 9px 통일
   → 처리대기 N번째 행과 마감임박 N번째 행의 상하 라인이 픽셀 단위로 일치 */
.dash-cols .section-h{display:flex;align-items:center;min-height:33px;}
.dash-cols .row-link,
.dash-cols .due-item{height:76px;box-sizing:border-box;}
.dash-cols .row-main,.dash-cols .due-main{min-width:0;}
.dash-cols .row-title,.dash-cols .row-meta,
.dash-cols .due-title,.dash-cols .due-sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-cols .empty{min-height:76px;padding:14px 20px;display:flex;align-items:center;justify-content:center;border:0;gap:0;}
.dash-cols .empty p{margin:0;}
.section-h{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--title-ink);margin:0 0 12px;}
/* 콘텐츠 중간에 오는 섹션 타이틀(앞에 다른 요소가 있을 때)은 위 간격을 크게 — 영역 간 호흡(전 페이지 공통) */
* + .section-h{margin-top:46px;}
.section-h .muted{font-family:var(--sans);color:var(--muted);font-weight:400;font-size:13.5px;margin-left:4px;}
/* 섹션 타이틀 라인의 정렬 토글(세그) — 미선택=톤 필, 선택=볼록(톤 칩 언어) */
.section-h:has(.seg){display:flex;align-items:center;gap:8px;}
.seg{display:inline-flex;gap:5px;margin-left:auto;}
.seg a{font-family:var(--sans);font-size:11.5px;font-weight:540;color:var(--muted);text-decoration:none;
  padding:7px 12px;border-radius:10px;background:var(--chip);
  border-top:1.5px solid transparent;border-left:1.5px solid transparent;
  transition:color .2s ease, background .2s ease, box-shadow .3s ease;}
.seg a:hover{color:var(--text);}
.seg a.on{color:var(--text);background:var(--bg);
  border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);
  box-shadow:2px 2px 5px rgba(var(--shadow),1), -2px -2px 5px rgba(var(--hilite),1);}

/* 필터 칩 (requests.php — 볼록=미선택 / 오목=선택) */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;}
.filter{font-family:var(--sans);font-size:14px;color:var(--muted);text-decoration:none;padding:9px 15px;border-radius:12px;
  background:var(--bg);transition:box-shadow .3s ease, color .3s ease;
  box-shadow:2px 2px 5px rgba(var(--shadow),.8), -2px -2px 5px rgba(var(--hilite),.9);}
/* 카운트 = 오목 원형 배지(.item-no와 같은 언어, 두 자리수는 알약형으로 늘어남) */
.filter span{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  min-width:21px;height:21px;padding:0 6px;margin-left:7px;border-radius:11px;
  color:var(--muted);font-size:11px;font-family:var(--mono);line-height:1;
  box-shadow:inset 1.5px 1.5px 3px rgba(var(--shadow),1), inset -1.5px -1.5px 3px rgba(var(--hilite),1);}
.filter:hover{color:var(--text);}
.filter.on{color:var(--text);box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.filter.on span{color:var(--text);
  box-shadow:1.5px 1.5px 3px rgba(var(--shadow),.9), -1.5px -1.5px 3px rgba(var(--hilite),1);}
/* 톤 칩 — 미선택 = 평면(중립 뉴트럴 필·연하게), 선택만 볼록. 시험 적용: .filters.tonal(견적단가) */
.filters.tonal .filter{background:var(--tonal-chip,#e9e8e4);box-shadow:none;color:var(--title-ink);
  border-top:1.5px solid transparent;border-left:1.5px solid transparent;}
.filters.tonal .filter:hover{color:var(--text);}
.filters.tonal .filter span{box-shadow:none;background:var(--tonal-num-bg,#f2f1ee);color:var(--tonal-num,#6c6b68);}
:root[data-theme="dark"]{--tonal-chip:#52524f;--tonal-num-bg:#5f5f5c;--tonal-num:#d8d8d3;}
.filters.tonal .filter.on{background:var(--bg);color:var(--text);
  border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);
  box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1);}
.filters.tonal .filter.on span{background:none;color:var(--text);
  box-shadow:inset 1.5px 1.5px 3px rgba(var(--shadow),1), inset -1.5px -1.5px 3px rgba(var(--hilite),1);}

/* 접이식 영역 (새 업체/새 항목 폼 등)
   overflow:hidden이 안쪽 패널의 볼록 그림자를 자르므로 좌우 패딩(+상쇄 마진)과
   패널 상하 마진으로 그림자 여백을 확보한다 */
.collapse{max-height:0;overflow:hidden;transition:max-height .42s ease;margin:0 -24px;padding:0 24px;}
.collapse.open{max-height:460px;margin-bottom:6px;}
.collapse .panel{margin-top:18px;margin-bottom:22px;}

/* 칩 버튼 (보조 액션 — 업체설정/복사/연결 등) */
.chip-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:14px;font-weight:540;
  color:var(--link);background:var(--chip);padding:12px 18px;border-radius:14px;text-decoration:none;border:0;cursor:pointer;
  transition:background .2s ease, color .2s ease;white-space:nowrap;}
.chip-btn:hover{background:var(--chip-h);color:var(--link-h);}
.chip-btn.sm{padding:10px 15px;font-size:13.5px;}
.ph-actions{display:flex;align-items:center;gap:10px;flex:none;}
/* ★한 줄에 놓인 버튼은 **형태·높이를 맞춘다**(2026-07-29 사용자 지시 · §2-2-1 전역 규칙).
   .chip-btn(작은 라운드)과 .btn.sm(알약)이 섞여 높이·모서리가 어긋나 보였다.
   ⚠️ 톤은 일부러 다르다 — 보조는 평면(.flat), 주 액션은 볼록/솔리드. **형태만** 같게 맞춘 것이다. */
.ph-actions .chip-btn,
.ph-actions .btn.sm{height:42px;padding:0 20px;border-radius:999px;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;margin:0;line-height:1;}
.ph-actions .btn.inline{margin:0;}
.ph-actions form{display:flex;align-items:center;}
/* ★평면 버튼 — 주 버튼과 **크기·모양은 같고 톤만 평면**(뉴모 볼록·하이라이트 라인 제거).
   보조 이동(통계·되돌아가기)용.
   ⚠️ 색 이력 — ① 중립 칩색: 너무 안 보임 ② 브랜드 오렌지: 붉은 계열이라 경고처럼 읽힘(둘 다 사용자 지적, 2026-07-29)
      → ③ **그린(--c-success)** 으로 확정. 매출·성장 맥락에 맞고 경고색(--c-warn/--err)과도 안 겹친다.
   ⚠️ 글자색은 라이트=--c-done(짙은 초록, 대비 확보) / 다크=--c-success(밝은 초록). 한 값으로 통일하면 한쪽이 죽는다. */
.btn.inline.flat{background:color-mix(in srgb, var(--c-success) 14%, transparent);
  color:var(--c-done);box-shadow:none;font-weight:640;text-decoration:none;
  border:1px solid color-mix(in srgb, var(--c-success) 36%, transparent);}
.btn.inline.flat::before,.btn.inline.flat::after{display:none;}
.btn.inline.flat:hover{background:color-mix(in srgb, var(--c-success) 24%, transparent);
  color:var(--c-done);box-shadow:none;}
.btn.inline.flat:active{box-shadow:none;transform:translateY(1px);}
:root[data-theme="dark"] .btn.inline.flat{color:var(--c-success);}
:root[data-theme="dark"] .btn.inline.flat:hover{color:var(--c-success);}

/* 업체 상세 (company.php) */
.copy-row{display:flex;gap:10px;margin-top:12px;}
.copy-row input{flex:1;min-width:0;font-family:var(--mono);font-size:13.5px;color:var(--muted);background:var(--bg);border:0;outline:0;
  padding:12px 16px;border-radius:12px;box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.member-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.member-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border-radius:13px;
  box-shadow:inset 1.5px 1.5px 4px rgba(var(--shadow),1), inset -1.5px -1.5px 4px rgba(var(--hilite),1);}
.member-info{display:flex;flex-direction:column;gap:3px;min-width:0;}
.member-info strong{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text);}
.badge-primary{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--link);
  background:var(--chip);padding:2px 8px;border-radius:8px;margin-left:6px;vertical-align:middle;}
.member-sub{font-family:var(--mono);font-size:12px;color:var(--muted);}
.member-actions{display:flex;gap:14px;flex:none;align-items:center;}
.add-member{display:flex;gap:10px;margin-top:14px;}
.add-member input{flex:1;min-width:0;font-family:var(--sans);font-size:14px;color:var(--text);background:var(--bg);border:0;outline:0;
  padding:13px 18px;border-radius:14px;box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.add-member input::placeholder{color:var(--ph);}
/* ── 업체 리스트·상세: 콘텐츠 평면화(뉴모 카드 제거)로 가로 확장 — "수정요청 그룹"과 동일 평면 리듬 ── */
.co-sec{margin:46px 0 0;}                     /* 패널 카드 대신 평면 섹션 — 위 간격 = 일반 section-h(* + .section-h=46)와 동일 */
.co-sec > .section-h{margin:0 0 12px;}
.co-sec .panel-desc{margin:0 0 12px;}
.co-form{margin:16px 0 6px;}                  /* 새 업체 접기 폼 — 카드 없이 평면, 콘텐츠 풀폭 */
/* ★주 액션 버튼 — **솔리드 브랜드 오렌지**(2026-07-29 사용자 지시).
   기존엔 배경이 --bg라 뉴모/페이퍼 어느 쪽에서도 버튼인지 안 보였다(그림자에만 의존).
   ⚠️ 색 하나로 4조합(soft/paper × 라이트/다크)을 다 덮는다 — 스킨 변수(--accent)에만 기대므로 스킨별 예외가 필요 없다.
   ⚠️ 글자색은 **테마별로 다르다**: 라이트 오렌지(#f15a24) 위엔 흰 글자, 다크 오렌지(#ff7a45)는 밝아서 흰 글자가 묻힌다 → 잉크색.
      한 값으로 통일하면 반드시 한쪽이 죽는다(로고 --logo-fill과 같은 이유). */
.btn.solid,.co-create{width:100%;
  background:var(--accent);color:#fff;font-weight:640;letter-spacing:.01em;
  border-color:transparent;
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 34%, transparent);}
.btn.solid::before,.btn.solid::after,
.co-create::before,.co-create::after{display:none;}   /* 뉴모 하이라이트 라인 = 솔리드 면에선 얼룩으로 보인다 */
.btn.solid:hover,.co-create:hover{background:var(--accent-ink);
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 44%, transparent);}
.btn.solid:active,.co-create:active{transform:translateY(1px);
  box-shadow:0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent);}
:root[data-theme="dark"] .btn.solid,
:root[data-theme="dark"] .co-create{color:#231f1b;}   /* 밝은 오렌지 위 = 잉크색이 대비가 산다 */
/* 문의·공지 = 리스트 레코드 카드 — 뉴모 볼록 제거하고 평면 보더 카드로(항목 구분은 유지) */
.inq-card,.notice-item{box-shadow:none;border:1px solid var(--edge-lo);}

/* 업체 설정 폼 (company_edit.php · .settings 스코프) */
.settings{display:block;}
/* 뉴모 카드 제거 → 평면 섹션(업체 상세 co-sec과 동일 리듬). 위 간격 = section-h(46/34) */
.settings .fs{background:none;border:0;padding:0;margin:56px 0 0;box-shadow:none;}   /* 묶음 사이 = 46 → 56 */
/* ★legend = 필드 라벨과 위계가 갈려야 한다(2026-07-29 사용자 지시) — 매출기록 .led-fsub와 같은 급.
   구분선까지 깔아 "여기부터 다른 묶음"이 눈으로 잡히게 한다. */
.settings legend{font-family:var(--sans);font-size:17.5px;font-weight:700;letter-spacing:-.015em;
  color:var(--text);padding:0 0 14px;margin:0 0 26px;width:100%;border-bottom:1px solid var(--div-lo);}
/* 줄 간격 = 한 줄(24px). 필드가 많아 촘촘하면 어디까지가 한 항목인지 안 읽힌다 */
.settings label{display:flex;flex-direction:column;gap:9px;font-family:var(--sans);font-size:13.5px;color:var(--muted);margin:0 0 24px;}
.settings label:last-child{margin-bottom:0;}
.settings label.inline{flex-direction:row;align-items:center;gap:11px;}
.settings .req-mark{color:var(--err);}
.settings input:not([type=checkbox]),.settings select{width:100%;font-family:var(--mono);font-size:14px;color:var(--text);
  background:var(--bg);border:0;outline:0;padding:14px 20px;border-radius:22px;
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);transition:box-shadow .3s ease;}
.settings input::placeholder{color:var(--ph);}
.settings select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.settings input[type=checkbox]{width:19px;height:19px;flex:none;appearance:none;-webkit-appearance:none;border-radius:6px;background:var(--bg);cursor:pointer;position:relative;
  box-shadow:inset 2px 2px 4px rgba(var(--shadow),1), inset -2px -2px 4px rgba(var(--hilite),1);}
.settings input[type=checkbox]:checked{box-shadow:2px 2px 4px rgba(var(--shadow),1), -2px -2px 4px rgba(var(--hilite),1);}
.settings input[type=checkbox]:checked::after{content:"";position:absolute;left:6.5px;top:3px;width:4px;height:8px;border:solid var(--title-ink);border-width:0 2px 2px 0;transform:rotate(45deg);}
.settings .form-row{display:flex;gap:14px;margin-bottom:0;}
.settings .form-row > label{margin-bottom:24px;}
.settings .form-row > label{flex:1;min-width:0;}
.settings .fs-secure{box-shadow:none;}
/* ── 하단 액션 바 (업체 설정) ─────────────────────────────────
   왼쪽 = 주 액션(저장, 솔리드 오렌지) · 오른쪽 = 되돌리기 어려운 것(재발급·삭제, 평면 칩).
   ⚠️ 저장 버튼은 폼 밖에 있고 `form="coEditForm"`로 연결돼 있다(폼은 중첩이 안 되므로). */
.save-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:56px;padding-top:28px;border-top:1px solid var(--div-lo);}
/* ⚠️ 높이는 오른쪽 칩(44px)과 **똑같이** 맞춘다 — 한 줄이 깔끔하게 떨어져야 한다.
   위계는 **가로 폭 + 솔리드 오렌지**로만 준다(세로로 키우면 줄이 어긋나 보인다. 2026-07-29 사용자 지시). */
.save-bar-main{width:auto;min-width:230px;height:44px;padding:0 58px;font-size:14.5px;margin:0;}
.save-bar-side{display:flex;align-items:center;gap:10px;margin-left:auto;}
.save-bar-side form{margin:0;display:flex;align-items:center;}
.save-bar-side .chip-btn{height:44px;padding:0 20px;border-radius:999px;font-size:13.5px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}
@media (max-width:640px){
  .save-bar{flex-direction:column;align-items:stretch;gap:14px;margin-top:44px;}
  .save-bar-main{width:100%;min-width:0;}
  .save-bar-side{margin-left:0;}
  .save-bar-side form,.save-bar-side .chip-btn{flex:1;width:100%;}
}
.settings .secure-note{font-family:var(--sans);font-size:12px;color:var(--muted);line-height:1.6;margin:14px 0 0;}
.sep{border:0;height:1px;background:var(--div-lo);margin:34px 0 20px;}
.danger-zone{display:flex;gap:26px;align-items:center;}
.due-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.due-item{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:14px;background:var(--bg);cursor:pointer;
  box-shadow:inset 1.5px 1.5px 4px rgba(var(--shadow),1), inset -1.5px -1.5px 4px rgba(var(--hilite),1);}
.due-dday{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--muted);flex:none;
  padding:5px 10px;border-radius:9px;background:var(--bg);
  box-shadow:2px 2px 4px rgba(var(--shadow),.9), -2px -2px 4px rgba(var(--hilite),1);}
.due-dday.soon{color:var(--err);}
.due-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.due-title{font-family:var(--sans);font-size:14px;font-weight:560;color:var(--text);}
.due-sub{font-family:var(--mono);font-size:12px;color:var(--muted);}
/* ★2026-07-29 — 이 목록에 스케줄(수동 일정)이 섞인다. 눌렀을 때 가는 곳이 달라(요청 vs 달력)
   어디서 온 줄인지 표시가 없으면 링크가 제멋대로 느껴진다. 수정요청 쪽엔 배지를 안 붙인다(기본값이라). */
.due-src{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.02em;
  color:var(--accent-ink);background:color-mix(in srgb, var(--accent) 14%, transparent);
  padding:2px 7px;border-radius:6px;margin-right:7px;vertical-align:1px;}
/* 미배정 가입 요청 — 3단 위계(회사 → 담당자 → 메타), 평면 톤 필, 클릭=업체 연결 */
.req-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.req-item{display:flex;flex-direction:column;gap:8px;padding:16px 19px;border-radius:14px;background:var(--chip);
  text-decoration:none;transition:background .2s ease;
  width:100%;border:0;cursor:pointer;text-align:left;font-family:inherit;}
.req-item:hover{background:var(--chip-h);}
/* ① 회사명 + 담당자명(한 줄) ↔ 가입일(우측 옅게) */
.req-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.req-title{display:flex;align-items:baseline;gap:9px;min-width:0;flex-wrap:wrap;}
.req-co{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--text);}
.req-name{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);}
.req-name::before{content:"·";margin-right:9px;color:var(--div-lo);}
.req-date{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em;}
/* ② 전화·이메일·도메인 — 라벨 붙은 한 줄(넘치면 줄바꿈) */
.req-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;}
.req-kv{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.01em;display:inline-flex;align-items:center;gap:6px;min-width:0;}
.req-k{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);
  background:var(--bg);padding:2px 7px;border-radius:7px;flex:none;}
/* 카운트 배지 (패널 타이틀 옆 "1명" 등) */
.n-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 9px;margin-left:7px;
  border-radius:12px;background:var(--chip);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text);
  line-height:1;vertical-align:middle;}

/* ── 데모 모드 배지 (?demo=1 · 샘플 데이터 렌더링 중 표시) ────── */
.demo-flag{position:fixed;left:18px;bottom:18px;z-index:90;pointer-events:auto;cursor:help;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  color:var(--bg);background:var(--c-warn);padding:6px 12px;border-radius:10px;
  box-shadow:0 6px 16px rgba(20,20,18,.22);}

/* ── 접속 중 (헤더 버튼 + 드롭다운) ──────────────────────────── */
@keyframes sbPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
/* 급행 버튼 — 접속 중과 동일 양각 언어, 적색 시맨틱(있을 때만 렌더) */
.rush-btn{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 9px 0 16px;cursor:pointer;
  background:var(--bg);border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  border-radius:19px;transform:scale(1.2);transform-origin:right center;margin-left:28px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;color:var(--err);
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1);
  transition:box-shadow .3s ease, background-color .5s ease;}
.rush-btn:hover{box-shadow:2px 2px 5px rgba(var(--shadow),1), -2px -2px 5px rgba(var(--hilite),1);}
.rush-btn:active{box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.rb-dot{width:8px;height:8px;border-radius:50%;background:var(--err);flex:none;
  animation:sbPulse 2.4s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.rb-dot{animation:none;}}
.rb-num{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--err);line-height:1;
  box-shadow:inset 1.5px 1.5px 3px rgba(var(--shadow),1), inset -1.5px -1.5px 3px rgba(var(--hilite),1);}
/* 버튼 — 다크 토글과 동일 양각 언어(높이 38·scale 1.2·edge-hi·raise) */
.online-wrap{position:relative;display:flex;align-items:center;flex:none;}
.online-btn{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 9px 0 16px;cursor:pointer;
  background:var(--bg);border:0;border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  border-radius:19px;transform:scale(1.2);transform-origin:right center;margin-left:28px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.05em;color:var(--muted);
  -webkit-tap-highlight-color:transparent;outline:0;
  box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1);
  transition:box-shadow .3s ease, color .3s ease, background-color .5s ease;}
.online-btn:active{box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--c-neutral);flex:none;transition:background .3s ease;}
.ob-num{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);line-height:1;
  box-shadow:inset 1.5px 1.5px 3px rgba(var(--shadow),1), inset -1.5px -1.5px 3px rgba(var(--hilite),1);
  transition:color .3s ease;}
/* 접속자 있음 = 녹색, 없음 = 회색 */
.online-btn.has{color:var(--text);}
.online-btn.has .ob-dot{background:var(--c-success);animation:sbPulse 2.4s ease-in-out infinite;}
.online-btn.has .ob-num{color:var(--c-success);}
@media (prefers-reduced-motion:reduce){.online-btn.has .ob-dot{animation:none;}}
/* 드롭다운 — Liquid Glass (반투명 + 블러 + 상단 유리 하이라이트).
   ★앞으로 팝업/드롭다운 레이어는 전부 이 글래스 스타일로 통일 */
.online-drop{position:absolute;top:calc(100% + 14px);right:0;width:300px;max-height:420px;overflow:auto;z-index:80;
  background:rgba(255,255,255,.44);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(255,255,255,.6);border-radius:18px;padding:14px;
  box-shadow:0 18px 44px rgba(20,20,18,.18), inset 0 1px 0 rgba(255,255,255,.65);}
:root[data-theme="dark"] .online-drop{background:rgba(30,30,28,.5);border-color:rgba(255,255,255,.09);
  box-shadow:0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.1);}
.online-drop[hidden]{display:none;}
.sb-empty{font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.6;margin:2px 4px 8px;}
/* 접속자 리스트 (평면 반투명 필 — 글래스 위 음각 금지) */
.sb-online-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.sb-online-item{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:13px;
  background:rgba(255,255,255,.5);}
:root[data-theme="dark"] .sb-online-item{background:rgba(255,255,255,.07);}
.sb-dot{width:8px;height:8px;border-radius:50%;background:var(--c-neutral);flex:none;margin-top:4px;}
.sb-dot.on{background:var(--c-success);}
.sb-online-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sb-online-who{font-family:var(--sans);font-size:13px;color:var(--text);}
.sb-online-who strong{font-weight:600;}
.sb-online-sub{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.02em;}
.sb-online-list.recent{opacity:.66;}   /* 최근 접속(현재 아님)은 옅게 */

/* ── 활동 로그 (admin/activity.php) ──────────────────────────── */
/* 검색·필터 바 — 모든 컨트롤 높이 46px 통일 + 세로 가운데 정렬 */
.log-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 24px;}
.log-filter > *{height:46px;box-sizing:border-box;margin:0;}
.lf-search{flex:2;min-width:180px;font-family:var(--sans);font-size:13.5px;color:var(--text);background:var(--bg);border:0;outline:0;
  padding:0 18px;border-radius:14px;
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.lf-search::placeholder{color:var(--ph);}
.lf-select{flex:1;min-width:130px;font-family:var(--sans);font-size:13px;color:var(--text);background:var(--bg);border:0;outline:0;cursor:pointer;
  padding:0 38px 0 16px;border-radius:14px;appearance:none;-webkit-appearance:none;
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.log-filter .btn.inline{flex:none;padding:0 24px;}

/* 날짜 헤더 — 볼록 필(타이틀처럼 도드라지게) */
.log-day{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.04em;
  color:var(--title-ink);margin:0 0 14px;padding:9px 16px;border-radius:13px;background:var(--bg);
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1);}
* + .log-day{margin-top:38px;}
.log-day-n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;border-radius:10px;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  box-shadow:inset 1.5px 1.5px 3px rgba(var(--shadow),1), inset -1.5px -1.5px 3px rgba(var(--hilite),1);}

.log-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.log-item{display:flex;align-items:center;gap:16px;padding:13px 17px;border-radius:13px;background:var(--chip);}
.log-time{flex:none;font-family:var(--mono);font-size:12px;color:var(--muted);width:38px;}
.log-badge{flex:none;width:104px;font-family:var(--sans);font-size:11.5px;font-weight:600;padding:5px 0;border-radius:8px;text-align:center;white-space:nowrap;}
/* 배지 색 = 의미별 7색. --tone-c(색상 토큰)를 정하면 글자=그 색, 배경=같은 색 옅은 틴트(color-mix).
   틴트 세기(--tint)만 다크에서 올려 어두운 카드 위에서도 읽히게. st-* 토큰이 테마별 값이라 자동 대응. */
.log-badge{--tint:16%;color:var(--tone-c,var(--muted));
  background:color-mix(in srgb, var(--tone-c,var(--muted)) var(--tint), transparent);}
.log-badge.tone-green{--tone-c:var(--st-green);}
.log-badge.tone-blue{--tone-c:var(--st-blue);}
.log-badge.tone-cyan{--tone-c:var(--st-cyan);}
.log-badge.tone-amber{--tone-c:var(--st-amber);}
.log-badge.tone-violet{--tone-c:var(--st-violet);}
.log-badge.tone-red{--tone-c:var(--err);}
.log-badge.tone-gray{--tone-c:var(--muted);--tint:20%;}
:root[data-theme="dark"] .log-badge{--tint:26%;}
:root[data-theme="dark"] .log-badge.tone-gray{--tint:28%;}
.log-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;text-align:left;}
.log-subject{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.log-detail{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.log-admin{flex:none;font-family:var(--sans);font-size:11.5px;color:var(--muted);}

/* ── ★재사용 Liquid Glass 모달 (팝업 공통 컴포넌트) ───────────────
   딤 스크림 + 글래스 카드(반투명·blur·유리 테두리·상단 하이라이트). 뉴모 아님. */
.glass-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(25,25,23,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.glass-overlay[hidden]{display:none;}
.glass-card{width:100%;max-width:440px;max-height:86vh;overflow:auto;border-radius:20px;padding:22px 24px;
  background:rgba(244,243,241,.74);-webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 60px rgba(20,20,18,.24), inset 0 1px 0 rgba(255,255,255,.75);
  animation:glassIn .26s cubic-bezier(.2,.7,.3,1);}
:root[data-theme="dark"] .glass-card{background:rgba(42,42,40,.78);border-color:rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);}
@keyframes glassIn{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}
.glass-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.glass-title{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--text);}
.glass-close{flex:none;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:color .2s,background .2s;}
:root[data-theme="dark"] .glass-close{background:rgba(255,255,255,.1);}
.glass-close:hover{color:var(--text);}
.glass-close svg{width:11px;height:11px;}
.glass-body{margin-bottom:18px;}
/* 글래스 위 버튼: 평면 반투명(솔리드=주 액션) */
.glass-btn{font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;border:0;white-space:nowrap;
  padding:11px 18px;border-radius:12px;background:var(--text);color:var(--bg);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;transition:opacity .2s;}
.glass-btn:hover{opacity:.88;}
.glass-btn.ghost{background:rgba(255,255,255,.62);color:var(--text);font-weight:560;border:1px solid rgba(255,255,255,.5);}
:root[data-theme="dark"] .glass-btn.ghost{background:rgba(255,255,255,.12);color:var(--text);border-color:rgba(255,255,255,.14);}
.glass-btn.ghost.danger{color:var(--err);}

/* 미배정 상세 (모달 본문) */
.ua-info{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;}
.ua-info > div{min-width:0;}
.ua-info dt{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--title-ink);margin-bottom:4px;}
.ua-info dd{margin:0;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--text);word-break:break-all;}
.ua-hint{margin-top:14px;padding:11px 14px;border-radius:11px;font-family:var(--sans);font-size:12px;line-height:1.5;
  color:var(--accent-ink);background:rgba(241,90,36,.14);}
.ua-hint[hidden]{display:none;}
/* 미배정 액션 */
.glass-actions{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid rgba(255,255,255,.35);}
:root[data-theme="dark"] .glass-actions{border-top-color:rgba(255,255,255,.1);}
.ua-act-label{display:block;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);margin-bottom:8px;}
.ua-act-row{display:flex;gap:9px;}
.ua-act-row2{display:flex;gap:9px;}
.ua-act-row2 .glass-btn,.ua-act-row2 form{flex:1;}
.ua-act-row2 form .glass-btn{width:100%;}
.ua-select{flex:1;min-width:0;font-family:var(--sans);font-size:13px;color:var(--text);
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.5);outline:0;padding:10px 14px;border-radius:12px;}
:root[data-theme="dark"] .ua-select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);}
.ua-newco-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  font-family:var(--sans);font-size:12.5px;font-weight:540;color:var(--title-ink);cursor:pointer;
  padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.42);border:1px dashed rgba(120,118,112,.5);
  transition:background .2s ease, color .2s ease;}
:root[data-theme="dark"] .ua-newco-toggle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);}
.ua-newco-toggle:hover{color:var(--text);background:rgba(255,255,255,.6);}
:root[data-theme="dark"] .ua-newco-toggle:hover{background:rgba(255,255,255,.12);}
.ua-newco[hidden]{display:none;}
.ua-newco{margin-top:2px;}

/* ── 견적단가 (admin/catalog.php) — 인라인 편집 행 ─────────── */
.cat-row{display:flex;gap:10px;align-items:center;margin-bottom:9px;}
.cat-msel,.req-msel{display:none;}   /* 데스크톱=필터 칩(.filters). 모바일에서만 드롭다운 표시(아래 @media) */
/* 사용 해제 항목: 행 전체 흐림 + 글자색 자체를 placeholder 톤으로 → 비활성 확실히 */
.cat-row.is-off{opacity:.6;}
.cat-row.is-off .ci,
.cat-row.is-off select.ci{color:var(--ph);}
.cat-row.is-off .ci-active{color:var(--ph);}
.cat-edit{display:flex;gap:10px;align-items:center;flex:1;min-width:0;}
.ci{font-family:var(--sans);font-size:13.5px;color:var(--text);background:var(--bg);border:0;outline:0;
  padding:12px 16px;border-radius:13px;min-width:0;
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.ci::placeholder{color:var(--ph);}
select.ci{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.ci-name{flex:2.2;}
.ci-cat{flex:1;}
.ci-price{width:118px;flex:none;text-align:right;font-family:var(--mono);}
.ci-active{display:flex;align-items:center;gap:7px;flex:none;cursor:pointer;user-select:none;
  font-family:var(--sans);font-size:12.5px;color:var(--muted);white-space:nowrap;}
.ci-active input{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:none;border-radius:6px;
  background:var(--bg);cursor:pointer;position:relative;
  box-shadow:inset 2px 2px 4px rgba(var(--shadow),1), inset -2px -2px 4px rgba(var(--hilite),1);}
.ci-active input:checked{box-shadow:2px 2px 4px rgba(var(--shadow),1), -2px -2px 4px rgba(var(--hilite),1);}
.ci-active input:checked::after{content:"";position:absolute;left:6.5px;top:3px;width:4px;height:8px;
  border:solid var(--title-ink);border-width:0 2px 2px 0;transform:rotate(45deg);}
.chip-btn.danger{color:var(--err);}
.chip-btn.danger:hover{color:var(--err);background:var(--chip-h);}

/* 대화 (채팅 버블) */
.comment-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px;}
.comment{padding:14px 18px;border-radius:16px;max-width:82%;background:var(--bg);
  box-shadow:3px 3px 7px rgba(var(--shadow),.6), -3px -3px 7px rgba(var(--hilite),.7);}
.comment.from-admin{align-self:flex-start;}
.comment.from-client{align-self:flex-end;}
.comment-head{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.comment-head strong{font-family:var(--sans);font-size:14px;color:var(--text);font-weight:600;}
.role-tag{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);background:var(--chip);padding:2px 8px;border-radius:7px;}
.comment-time{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-left:auto;}
.comment-body{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--text);}

/* ── 배경 소프트 물결 — 기본 정지. 페이지 전환(html.pt-exit) 때만 재생 ──
   용도: 로드가 아니라 "전환 트리거"(로그인/링크 클릭 → 파동 + 퇴장 후 이동).
   호출: JS의 window.smPageExit() 가 html에 .pt-exit 를 붙여 재생시킨다. */
.ripple-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.ripple-bg .ring{position:absolute;left:50%;top:50%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;
  border-radius:50%;transform:scale(.5);opacity:0;transform-origin:center;will-change:transform,opacity;}
/* 파동 묶음(주 마루 + 잔파동) — 하이라이트/암부 대비 상향 + 띠 폭 소폭 확대 */
.ripple-bg .ring:nth-child(1){background:radial-gradient(circle,
  transparent 33%, rgba(var(--hilite),.21) 37%, rgba(var(--shadow),.12) 40.5%,
  rgba(var(--hilite),.38) 45%, rgba(var(--shadow),.16) 49%,
  rgba(var(--hilite),.64) 53.5%, rgba(var(--shadow),.16) 57%, transparent 60%);}
.ripple-bg .ring:nth-child(2){background:radial-gradient(circle,
  transparent 41%, rgba(var(--hilite),.22) 45%, rgba(var(--shadow),.13) 48.5%,
  rgba(var(--hilite),.46) 53%, rgba(var(--shadow),.13) 56%, transparent 59%);}
.ripple-bg .ring:nth-child(3){background:radial-gradient(circle,
  transparent 48%, rgba(var(--hilite),.21) 52.5%, rgba(var(--shadow),.09) 55%, transparent 58.5%);}
/* 전환 트리거 시에만 애니메이션 부여 — linear로 0→100 균일하게 퍼짐(감속 없음) */
html.pt-exit .ripple-bg .ring{animation:rippleOut .65s linear forwards;}
html.pt-exit .ripple-bg .ring:nth-child(2){animation-name:rippleOut2;animation-duration:.62s;animation-delay:.03s;}
html.pt-exit .ripple-bg .ring:nth-child(3){animation-name:rippleOut3;animation-duration:.59s;animation-delay:.06s;}
/* 개화 직후 정점 → 퍼지는 내내 서서히 잦아들며 소멸(점감 페이드) */
@keyframes rippleOut { 0%{transform:scale(.5);opacity:1;} 38%{opacity:.72;} 58%{opacity:.36;} 74%{opacity:.14;} 88%{opacity:.04;} 100%{transform:scale(1);opacity:0;} }
@keyframes rippleOut2{ 0%{transform:scale(.5);opacity:.92;} 38%{opacity:.64;} 58%{opacity:.31;} 74%{opacity:.11;} 88%{opacity:.03;} 100%{transform:scale(1);opacity:0;} }
@keyframes rippleOut3{ 0%{transform:scale(.5);opacity:.85;} 38%{opacity:.56;} 58%{opacity:.26;} 74%{opacity:.09;} 88%{opacity:.02;} 100%{transform:scale(1);opacity:0;} }
@media (prefers-reduced-motion:reduce){ .ripple-bg{display:none;} }

/* ── 페이지 등장/퇴장 전환 ──────────────────────────────────────────
   로드: 음영은 천천히(1.2s) 차오르고 텍스트는 빠르게(.28s) 페이드인
   내부 링크 클릭: 반대로 사라진 뒤 이동 (partials/sys-head.php 스크립트)
   새 페이지에서 등장시킬 요소엔 .reveal 클래스를 붙이면 된다. ───── */
html.pt-anim .field,
html.pt-anim .btn{transition:opacity .28s ease, color .28s ease, box-shadow 1.2s ease !important;}
html.pt-anim .field::placeholder{transition:color .28s ease !important;}
html.pt-anim .title,
html.pt-anim .signup,
html.pt-anim .divider,
html.pt-anim .divider::after,
html.pt-anim .botfoot,
html.pt-anim .notice,
html.pt-anim .shell,
html.pt-anim .reveal{transition:opacity .28s ease !important;}

/* 등장(로드) 전용 — 퇴장(.pt-exit) 제외. 총 1.5s, 단계 연출(키프레임):
   ① 0~0.22s  밋밋한 배경에 테두리 선(edge-hi)부터 생김
   ② 0.22s~   다크 섀도우가 오프셋·블러 0에서 점점 "퍼지며" 깊어짐 (빛=좌상단)
   ③ 0.75s~   하이라이트가 뒤따라 0에서 퍼지며 1.5s에 형태 완성
   → 알파 페이드가 아니라 그림자 크기 자체가 자라서 파이는/솟는 느낌.
   텍스트(글자색·독립 텍스트)는 0.5s에 시작해 1s간 천천히 페이드 → 1.5s 동시 완료.
   헤더(로고·토글)는 고정(전환 미적용). 오목=눌려 들어감(1.02→1), 볼록=부풀어 오름(.965→1). */
html.pt-anim:not(.pt-exit) .field,
html.pt-anim:not(.pt-exit) .btn{transition:color .8s ease .4s !important;}
html.pt-anim:not(.pt-exit) .field::placeholder{transition:color .8s ease .4s !important;}
/* 형태 잡힘은 리빌 시점(pt-hidden 제거)에 키프레임으로 재생 */
html.pt-anim:not(.pt-exit):not(.pt-hidden) .field:not([placeholder]),
html.pt-anim:not(.pt-exit):not(.pt-hidden) .field:placeholder-shown{animation:inConcave 1.5s cubic-bezier(.3,.5,.3,1) both;}
html.pt-anim:not(.pt-exit):not(.pt-hidden) .field[placeholder]:not(:placeholder-shown){animation:inConvexField 1.5s cubic-bezier(.3,.5,.3,1) both;}
html.pt-anim:not(.pt-exit):not(.pt-hidden) .btn{animation:inConvexBtn 1.5s cubic-bezier(.3,.5,.3,1) both;}
html.pt-anim:not(.pt-exit):not(.pt-hidden) .btn::before{animation:inHairline 1.5s ease both;}
/* 오목(빈 인풋): 선 → 인셋 다크가 0에서 퍼지며 파임 → 인셋 하이라이트가 뒤따라 퍼짐 */
@keyframes inConcave{
  0%  {transform:scale(1.02);border-top-color:transparent;border-left-color:transparent;
       box-shadow:inset 0 0 0 rgba(var(--fld-sh),0), inset 0 0 0 rgba(var(--fld-hi),0),
                  3px 3px 6px rgba(var(--fld-sh),0), -3.5px -3.5px 7px rgba(var(--fld-hi),0);}
  15% {border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);
       box-shadow:inset .5px .5px 1px rgba(var(--fld-sh),.85), inset 0 0 0 rgba(var(--fld-hi),0),
                  3px 3px 6px rgba(var(--fld-sh),0), -3.5px -3.5px 7px rgba(var(--fld-hi),0);}
  50% {box-shadow:inset 3.8px 3px 6px rgba(var(--fld-sh),1), inset -3.3px -4px 6px rgba(var(--fld-hi),.75),
                  3px 3px 6px rgba(var(--fld-sh),0), -3.5px -3.5px 7px rgba(var(--fld-hi),0);}
  100%{transform:scale(1);border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);
       box-shadow:inset 3.8px 3px 6px rgba(var(--fld-sh),1), inset -5px -6px 9px rgba(var(--fld-hi),1),
                  3px 3px 6px rgba(var(--fld-sh),0), -3.5px -3.5px 7px rgba(var(--fld-hi),0);}
}
/* 볼록(채워진 인풋·셀렉트): 선 → 외곽 다크가 0에서 퍼지며 솟음 → 외곽 하이라이트 뒤따름 */
@keyframes inConvexField{
  0%  {transform:scale(.975);border-top-color:transparent;border-left-color:transparent;
       box-shadow:inset 3.8px 3px 6px rgba(var(--fld-sh),0), inset -5px -6px 9px rgba(var(--fld-hi),0),
                  0 0 0 rgba(var(--fld-sh),0), 0 0 0 rgba(var(--fld-hi),0);}
  15% {border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);
       box-shadow:inset 3.8px 3px 6px rgba(var(--fld-sh),0), inset -5px -6px 9px rgba(var(--fld-hi),0),
                  .5px .5px 1px rgba(var(--fld-sh),.85), 0 0 0 rgba(var(--fld-hi),0);}
  50% {box-shadow:inset 3.8px 3px 6px rgba(var(--fld-sh),0), inset -5px -6px 9px rgba(var(--fld-hi),0),
                  3px 3px 6px rgba(var(--fld-sh),1), -2.3px -2.3px 4.5px rgba(var(--fld-hi),.75);}
  100%{transform:scale(1);border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);
       box-shadow:inset 3.8px 3px 6px rgba(var(--fld-sh),0), inset -5px -6px 9px rgba(var(--fld-hi),0),
                  3px 3px 6px rgba(var(--fld-sh),1), -3.5px -3.5px 7px rgba(var(--fld-hi),1);}
}
/* 볼록(버튼): 헤어라인 → 외곽 다크가 0에서 퍼지며 솟음 → 외곽 하이라이트 뒤따름 */
@keyframes inConvexBtn{
  0%  {transform:scale(.965);
       box-shadow:0 0 0 rgba(var(--shadow),0), 0 0 0 rgba(var(--hilite),0),
                  inset 2px 2px 7px rgba(var(--shadow),0), inset -5px -5px 10px rgba(var(--hilite),0);}
  15% {box-shadow:1px 1px 2px rgba(var(--shadow),.85), 0 0 0 rgba(var(--hilite),0),
                  inset 2px 2px 7px rgba(var(--shadow),0), inset -5px -5px 10px rgba(var(--hilite),0);}
  50% {box-shadow:6px 6px 13px rgba(var(--shadow),1), -4px -4px 8.5px rgba(var(--hilite),.75),
                  inset 2px 2px 7px rgba(var(--shadow),0), inset -5px -5px 10px rgba(var(--hilite),0);}
  100%{transform:scale(1);
       box-shadow:6px 6px 13px rgba(var(--shadow),1), -6px -6px 13px rgba(var(--hilite),1),
                  inset 2px 2px 7px rgba(var(--shadow),0), inset -5px -5px 10px rgba(var(--hilite),0);}
}
@keyframes inHairline{0%{opacity:0;} 15%{opacity:.75;} 100%{opacity:.75;}}
html.pt-anim:not(.pt-exit) .title,
html.pt-anim:not(.pt-exit) .signup,
html.pt-anim:not(.pt-exit) .divider,
html.pt-anim:not(.pt-exit) .divider::after,
html.pt-anim:not(.pt-exit) .botfoot,
html.pt-anim:not(.pt-exit) .notice,
html.pt-anim:not(.pt-exit) .reveal{transition:opacity .8s ease .4s !important;}
/* 앱 셸(3단 페이지)은 지연 없이 부드럽게 — 내부 인풋은 자체 형태 애니 유지 */
html.pt-anim:not(.pt-exit) .shell{transition:opacity .55s ease !important;}

/* 등장 시작 자세(로드 전용 · 퇴장엔 미적용) — 키프레임 0%와 동일 값(리빌 순간 점프 방지)
   오목=살짝 부푼 채(눌려 들어감), 볼록=살짝 움츠린 채(부풀어 오름), 테두리 선·헤어라인 없음 */
html.pt-hidden:not(.pt-exit) .field{transform:scale(1.02);border-top-color:transparent;border-left-color:transparent;}
html.pt-hidden:not(.pt-exit) .field[placeholder]:not(:placeholder-shown){transform:scale(.975);}
html.pt-hidden:not(.pt-exit) .btn{transform:scale(.965);}
html.pt-hidden:not(.pt-exit) .btn::before{opacity:0;}

html.pt-hidden .field,
html.pt-hidden .btn,
html.pt-hidden .title,
html.pt-hidden .signup,
html.pt-hidden .divider,
html.pt-hidden .divider::after,
html.pt-hidden .botfoot,
html.pt-hidden .notice,
html.pt-hidden .shell,
html.pt-hidden .reveal{opacity:0;}
html.pt-hidden .field,
html.pt-hidden .btn{box-shadow:none;color:transparent;}
html.pt-hidden .field::placeholder{color:transparent;}

@media (prefers-reduced-motion:reduce){
  html.pt-hidden .field, html.pt-hidden .btn,
  html.pt-hidden .title,
  html.pt-hidden .signup, html.pt-hidden .divider, html.pt-hidden .divider::after,
  html.pt-hidden .botfoot, html.pt-hidden .notice, html.pt-hidden .shell, html.pt-hidden .reveal{opacity:1;}
  html.pt-hidden .field{color:var(--field-ink);}
  html.pt-hidden .btn{color:var(--text);}
  html.pt-hidden .field::placeholder{color:var(--ph);}
  html.pt-hidden:not(.pt-exit) .field, html.pt-hidden:not(.pt-exit) .field[placeholder]:not(:placeholder-shown),
  html.pt-hidden:not(.pt-exit) .btn{transform:none;border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);}
  html.pt-hidden:not(.pt-exit) .btn{border-top-color:transparent;border-left-color:transparent;}
  html.pt-hidden:not(.pt-exit) .btn::before{opacity:.75;}
  html.pt-anim .field, html.pt-anim .btn, html.pt-anim .btn::before{animation:none !important;}
}

/* ── 결제·정산 내역 (billing.php) ───────────────────────────── */
.bill-sum{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px;}
.bill-card{flex:1;min-width:170px;background:var(--bg);border-radius:18px;padding:18px 22px;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:5px 5px 12px rgba(var(--shadow),.75), -5px -5px 12px rgba(var(--hilite),.85);
  display:flex;flex-direction:column;gap:5px;}
.bill-card-lbl{font-family:var(--sans);font-size:12.5px;color:var(--muted);letter-spacing:.02em;}
.bill-card b{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--text);letter-spacing:.01em;}
.bill-card.warn b{color:var(--c-warn);}
.bill-card-sub{font-family:var(--sans);font-size:12px;color:var(--muted);}
.bill-wrap{overflow-x:auto;border-radius:16px;}
.bill-table{width:100%;border-collapse:collapse;min-width:560px;}
.bill-table th{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted);text-align:left;
  padding:0 14px 12px;border-bottom:1px solid var(--div-lo);white-space:nowrap;letter-spacing:.02em;}
.bill-table td{padding:16px 14px;border-bottom:1px solid var(--div-lo);vertical-align:middle;}
.bill-table tr:last-child td{border-bottom:0;}
.bill-table th.c,.bill-table td.c{text-align:center;}
.bill-table th.r,.bill-table td.r{text-align:right;}
.bill-title{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--text);text-decoration:none;}
.bill-title:hover{color:var(--accent-ink);}
.bill-meta{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:3px;}
.bill-amt{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--text);}
.bill-won{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-left:2px;}
.bill-table td.c .item-status{justify-content:center;}

/* ── 항목별 대화·피드백 보강 (batch.php ithread) ────────────── */
.ithread-empty{font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 12px;}
.iq-form-act{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;}
.iq-form-act .fu-wrap{margin:0;}
.iq-form-act .btn{margin:0;flex:none;}
.ithread .iq-form textarea.field{margin-bottom:0;}

/* ── 수정 종류·수정 영역 2단 + 셀렉트 아래 안내 텍스트 (batch.php 항목 추가) ── */
.area-pick{align-items:flex-start;margin-bottom:20px;}
.area-pick .field{margin-bottom:0;}
.area-hint{margin:8px 2px 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);transition:color .15s;}
.area-hint.on{color:var(--accent-ink);}

/* ── 수정 영역 관리 (admin/areas.php) ───────────────────────── */
.area-legend{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0;}
.area-rows{display:flex;flex-direction:column;gap:10px;}
.area-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:var(--chip);}
.area-row.off{opacity:.55;}
.area-ord{display:flex;flex-direction:column;gap:2px;flex:none;}
.ord-btn{width:26px;height:19px;border:0;border-radius:6px;background:var(--bg);color:var(--muted);
  font-size:10px;line-height:1;cursor:pointer;box-shadow:1px 1px 3px rgba(var(--shadow),.7), -1px -1px 3px rgba(var(--hilite),.8);}
.ord-btn:hover:not(:disabled){color:var(--accent-ink);}
.ord-btn:disabled{opacity:.3;cursor:default;}
.area-row .area-name{flex:0 0 180px;max-width:180px;}
.area-row .area-hintf{flex:1 1 240px;min-width:180px;}
.area-active{display:inline-flex;align-items:center;gap:6px;flex:none;font-family:var(--sans);font-size:13px;color:var(--muted);cursor:pointer;}
.area-active input{width:16px;height:16px;}
.area-row .chip-btn{flex:none;}

/* ── 수정 종류 조건부 항목 + 배지 (batch.php) ───────────────── */
.rt-cond{margin:2px 0 6px;padding:14px 16px 4px;border-radius:12px;background:rgba(241,90,36,.06);}
:root[data-theme="dark"] .rt-cond{background:rgba(255,122,69,.08);}
.rt-note{margin:2px 2px 12px;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted);}
.rt-note strong{color:var(--accent-ink);font-weight:600;}
.tag.rt-tag{font-weight:600;color:var(--accent-ink);background:rgba(241,90,36,.13);}
.tag.rt-error{color:var(--err);background:rgba(176,83,62,.12);}
.item-extra{margin-top:8px;font-family:var(--sans);font-size:13px;color:var(--text);line-height:1.55;}
.item-extra .ie-k{display:inline-block;font-size:11px;font-weight:600;color:var(--muted);
  background:var(--chip);padding:2px 8px;border-radius:7px;margin-right:6px;}
.item-extra .ie-link{color:var(--link);text-decoration:none;word-break:break-all;}
.item-extra .ie-link:hover{color:var(--link-h);}

/* ── ★영역 배경 규칙: 배경(틴트·톤 필)이 있는 영역 안의 인풋·버튼은 뉴모 금지 → 평면 ── */
/* 배경이 얹힌 영역(rt-cond·ithread·area-row 등) 안에서는 필드/버튼을 평면으로 (양각/음각 뉴모 제거) */
.rt-cond .field,
.ithread .iq-form .field,
.sch-undated .field,
.area-row .field{
  box-shadow:none;
  border:1px solid var(--div-lo);
  background-color:var(--field-bg);   /* select 화살표(background-image) 보존 위해 배경'색'만 지정 */
}
.rt-cond .field:focus,
.ithread .iq-form .field:focus,
.sch-undated .field:focus,
.area-row .field:focus{border-color:var(--accent);}
/* 틴트 위 칩 버튼도 같은 이유로 평면(뉴모 볼록이면 배경에서 떠 보인다) */
.sch-undated .chip-btn{box-shadow:none;border:1px solid var(--div-lo);background-color:var(--chip-h);}
.rt-cond .btn,
.ithread .iq-form .btn{
  box-shadow:none;
  border:1px solid var(--div-lo);
  background-color:var(--chip-h);     /* 영역 배경보다 한 톤 짙은 평면 필 */
}

/* ── 필드 하단 안내 문구 (해당 URL 복사 안내 등) ───────────── */
.field-note{margin:-9px 2px 18px;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted);}
.field-note b{font-weight:600;color:var(--text);}

/* ── 목록 행 항목 미리보기 (board.php) ──────────────────────── */
.row-items{display:flex;flex-direction:column;gap:2px;margin-top:7px;}
.row-items .ri{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding-left:12px;position:relative;}
.row-items .ri::before{content:"";position:absolute;left:2px;top:9px;width:3px;height:3px;border-radius:50%;background:var(--div-lo);}
.row-items .ri.more{color:var(--link);}
.row-items .ri.more::before{background:none;}

/* ── 대시보드 급행 가로 스트립 (admin/index.php, 넘치면 스와이프) ── */
.rush-sec{margin-bottom:26px;}
.rush-sec .rush-hint{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--err);letter-spacing:0;margin-left:4px;}
/* overflow-x:auto 는 세로 오버플로도 잘라내므로(스펙상 visible→auto), 카드 그림자 크기만큼 안쪽 패딩 확보 + 음수 마진으로 위치 보정 */
/* 가로 스와이프 스트립: 스크롤바 숨김 + 드래그/화살표. .shell .wrap 좌우 padding(32px)만큼 브레이크아웃 → 첫 카드는 콘텐츠 정렬, 좌우 풀와이드 사용 */
.hstrip-wrap{position:relative;margin:0 -32px;}
.rush-strip{display:flex;gap:12px;overflow-x:auto;padding:12px 32px 16px;margin:0;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;touch-action:pan-y;}
.rush-strip::-webkit-scrollbar{display:none;}
.rush-strip.dragging{cursor:grabbing;scroll-behavior:auto;}
.rush-strip.dragging a{pointer-events:none;}
.hstrip-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--muted);
  box-shadow:3px 3px 7px rgba(var(--shadow),.9), -3px -3px 7px rgba(var(--hilite),.95);
  opacity:0;pointer-events:none;transition:opacity .18s,color .15s,box-shadow .15s;}
.hstrip-arrow svg{width:15px;height:15px;}
.hstrip-arrow:hover{color:var(--accent-ink);}
.hstrip-arrow:active{box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.hstrip-wrap:hover .hstrip-arrow.show{opacity:1;pointer-events:auto;}
.hstrip-arrow.left{left:1px;}
.hstrip-arrow.right{right:1px;}
.rush-card{flex:0 0 264px;width:264px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;
  padding:17px 20px;border-radius:16px;background:var(--bg);text-decoration:none;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:4px 4px 10px rgba(var(--shadow),.75), -4px -4px 10px rgba(var(--hilite),.85);
  transition:box-shadow .2s;}
.rush-card:hover{box-shadow:2px 2px 6px rgba(var(--shadow),1), -2px -2px 6px rgba(var(--hilite),1);}
.rush-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.rush-card-st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;}
.rush-card .co-tag{align-self:flex-start;}
.rush-card-title{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rush-card-meta{font-family:var(--sans);font-size:12px;color:var(--muted);}

/* ── 대시보드 메시지 스트립 + 메시지 페이지 (admin/messages.php) ── */
.rush-sec .section-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.section-more{margin-left:auto;font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:0;
  color:var(--muted);text-decoration:none;background:var(--chip);padding:6px 13px;border-radius:9px;transition:background .15s,color .15s;}
.section-more:hover{color:var(--text);background:var(--chip-h);}
.msg-hint{color:var(--accent-ink) !important;}
.msg-card{width:300px;flex-basis:300px;padding:18px 20px;gap:8px;}
.msg-card-topic{font-family:var(--sans);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-card-body{font-family:var(--sans);font-size:14.5px;line-height:1.55;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.msg-card .iq-badge{align-self:flex-start;}
/* 날짜별 카드 그리드 */
.msg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.msg-tile{display:flex;flex-direction:column;gap:7px;padding:16px 18px;border-radius:16px;background:var(--bg);text-decoration:none;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:4px 4px 10px rgba(var(--shadow),.75), -4px -4px 10px rgba(var(--hilite),.85);transition:box-shadow .2s;}
.msg-tile:hover{box-shadow:2px 2px 6px rgba(var(--shadow),1), -2px -2px 6px rgba(var(--hilite),1);}
.msg-tile-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.msg-tile-head .co-tag{align-self:flex-start;}
.msg-tile-time{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;}
.msg-tile-topic{font-family:var(--sans);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-tile-body{font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.msg-tile-body .mt-who{font-weight:600;color:var(--accent-ink);}
.msg-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.mt-count{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
/* 업체 대화창 */
.msg-chat{margin-top:8px;}
/* 일자 구분선 — 대화 시작점 표시 + 스크롤 시 대화창 상단 가운데 스티키.
   떠 있는 레이어(§3) → 글래스 배경: 버블 위로 지나갈 때도 또렷하게 */
.msg-daysep{align-self:center;margin:18px 0 10px;   /* 2026-07-25 sticky 해제 — 떠서 메시지 덮던 문제(날짜를 흐름 안 인라인 구분선으로) */
  font-family:var(--sans);font-size:12px;color:var(--muted);
  background:rgba(244,243,241,.78);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 4px 14px rgba(20,20,18,.07);
  padding:4px 14px;border-radius:20px;max-width:none;}
:root[data-theme="dark"] .msg-daysep{background:rgba(42,42,40,.72);border-color:rgba(255,255,255,.08);
  box-shadow:0 4px 14px rgba(0,0,0,.3);color:var(--text);}
.msg-ctx{display:inline-block;margin-top:8px;font-family:var(--sans);font-size:11.5px;color:var(--link);text-decoration:none;}
.msg-ctx:hover{color:var(--link-h);}
.att-mini{display:inline-block;margin-top:8px;margin-right:10px;font-family:var(--sans);font-size:12.5px;color:var(--link);text-decoration:none;}

/* ── 대시보드 활동 피드 (최상단, admin/index.php) ───────────── */
.feed-sec{margin:0 0 26px;}
.feed-strip .feed-card{flex:0 0 264px;width:264px;}
.feed-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:17px 20px;border-radius:16px;
  background:var(--bg);text-decoration:none;border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:4px 4px 10px rgba(var(--shadow),.75), -4px -4px 10px rgba(var(--hilite),.85);transition:box-shadow .2s;}
.feed-card:hover{box-shadow:2px 2px 6px rgba(var(--shadow),1), -2px -2px 6px rgba(var(--hilite),1);}
.feed-card.is-new{box-shadow:0 0 0 1.6px var(--accent), 4px 4px 10px rgba(var(--shadow),.55);}
.feed-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.feed-new{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;color:#fff;background:var(--accent);padding:2px 7px;border-radius:20px;}
.feed-card-co{font-family:var(--sans);font-size:12.5px;font-weight:600;color:hsl(var(--co-h,220),40%,45%);}
:root[data-theme="dark"] .feed-card-co{color:hsl(var(--co-h,220),45%,72%);}
.feed-card-title{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--text);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.feed-card-time{font-family:var(--mono);font-size:11.5px;color:var(--muted);}

/* ── 카페24 결제 안내 박스(클라 견적확인) + 계정유형 ────────── */
.pay-note-box{margin:12px 0 14px;padding:14px 16px;border-radius:12px;background:rgba(241,90,36,.1);}
:root[data-theme="dark"] .pay-note-box{background:rgba(255,122,69,.14);}
.pnb-label{display:block;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--accent-ink);margin-bottom:6px;}
.pnb-body{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--text);word-break:break-all;}
.pnb-body a{color:var(--link);}
.cafe-type{margin-bottom:4px;}
.ac-note.pay strong{color:var(--accent-ink);}

/* 사이드바 우측 아이콘 메뉴 (관리자 설정·삭제함 등) — 텍스트 좌 / 아이콘 우, 아이콘은 최대한 흐리게 */
.side-nav a.nav-rico{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.nav-rico .nav-ico{width:16px;height:16px;flex:none;color:var(--muted);opacity:.32;transition:opacity .2s;}
.side-nav a.nav-rico.on .nav-ico{opacity:.6;}

/* ── 관리자 설정 허브 (admin/settings.php) ─────────────────── */
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.set-card{display:flex;flex-direction:column;gap:7px;padding:18px 20px;border-radius:16px;background:var(--bg);text-decoration:none;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:4px 4px 10px rgba(var(--shadow),.75), -4px -4px 10px rgba(var(--hilite),.85);transition:box-shadow .2s;}
.set-card:hover{box-shadow:2px 2px 6px rgba(var(--shadow),1), -2px -2px 6px rgba(var(--hilite),1);}
.set-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--text);}
.set-card-arr{color:var(--muted);flex:none;}
.set-card:hover .set-card-arr{color:var(--accent-ink);}
.set-card-desc{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted);}

/* ── 대시보드 섹션 흐름(순서/간격 통일) + 정렬 라벨 ────────────── */
.dash-flow{display:flex;flex-direction:column;gap:46px;margin-top:46px;}
.dash-flow > *{margin:0;order:0;}
.dash-flow .dash-cols{margin-top:0;}
.sort-label{margin-left:auto;font-family:var(--sans);font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0;}

/* ── 통합 채팅 (chat.php · admin/messages.php) ──────────────── */
.chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.resp-hours{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:14px;background:var(--chip);}
.resp-hours .rh-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted);}
.resp-hours.on .rh-dot{background:var(--c-success);box-shadow:0 0 0 4px rgba(35,160,107,.15);}
.resp-hours.off .rh-dot{background:var(--muted);}
.rh-txt{display:flex;flex-direction:column;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text);line-height:1.3;}
.resp-hours.on .rh-txt{color:var(--c-success);}
.rh-sub{font-family:var(--sans);font-size:11px;font-weight:400;color:var(--muted);}

.chat-box{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;background:var(--chip);
  min-height:300px;max-height:min(58vh,620px);overflow-y:auto;}
.chat-empty{margin:auto;font-family:var(--sans);font-size:13.5px;color:var(--muted);text-align:center;}
.chat-msg{display:flex;flex-direction:column;gap:3px;max-width:80%;}
.chat-msg.from-client{align-self:flex-end;align-items:flex-end;}
.chat-msg.from-admin{align-self:flex-start;align-items:flex-start;}
.chat-tag{align-self:flex-start;font-family:var(--sans);font-size:11.5px;color:var(--accent-ink);background:rgba(241,90,36,.12);
  padding:3px 10px;border-radius:9px 9px 9px 3px;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-msg.from-client .chat-tag{align-self:flex-end;border-radius:9px 9px 3px 9px;}
.chat-tag:hover{background:rgba(241,90,36,.2);}
/* 버블 — 양쪽 동일한 평면(§3-0: 톤 영역 위 뉴모 금지) + 완전 둥근 곡선(한 줄=필) */
.chat-bubble{padding:10px 16px;border-radius:20px;background:var(--bg);box-shadow:none;}
.chat-msg.from-client .chat-bubble{background:rgba(241,90,36,.14);box-shadow:none;}
:root[data-theme="dark"] .chat-msg.from-client .chat-bubble{background:rgba(255,122,69,.18);}
.chat-body{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--text);white-space:pre-wrap;word-break:break-word;}   /* 14→15 가독(메시지 앱 기준) */
.chat-meta{font-family:var(--mono);font-size:11px;color:var(--muted);padding:0 6px;}
.chat-bubble .att-mini{display:inline-block;margin-top:6px;margin-right:10px;font-size:12.5px;color:var(--link);text-decoration:none;}

.chat-form{margin-top:14px;}
.chat-tagbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.chat-tag.sel{background:rgba(241,90,36,.14);color:var(--accent-ink);padding:6px 12px;border-radius:10px;font-size:12.5px;}
.tag-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;}
.tag-x:hover{color:var(--err);}
.chat-input{display:flex;align-items:flex-end;gap:8px;}
.chat-input .field{flex:1;min-height:46px;resize:none;padding:12px 18px;margin:0;border-radius:23px;}   /* 채팅 입력은 필 유지 */
/* 입력바 — 전 컨트롤 46px 통일·완전 둥근(필/원형), 한 줄 상태에서 세로 중앙 일치 */
.chat-call{flex:none;align-self:flex-end;display:inline-flex;align-items:center;height:46px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--accent-ink);
  background:rgba(241,90,36,.12);border:0;border-radius:999px;padding:0 24px;cursor:pointer;white-space:nowrap;}
.chat-call:hover{background:rgba(241,90,36,.2);}
.chat-file{flex:none;align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;background:var(--chip);color:var(--muted);cursor:pointer;}
.chat-file svg{width:19px;height:19px;}.chat-file input{display:none;}.chat-file:hover{color:var(--accent-ink);}
.chat-send{flex:none;align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;border:0;background:var(--accent);color:#fff;cursor:pointer;box-shadow:none;}
.chat-send svg{width:20px;height:20px;}.chat-send:hover{filter:brightness(1.06);}
.chat-send:active{box-shadow:inset 2px 2px 5px rgba(0,0,0,.15);}

.tag-desc{font-family:var(--sans);font-size:13px;color:var(--muted);margin:0 0 12px;}
.tag-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto;}
.tag-batch{display:flex;flex-direction:column;gap:4px;}
.tag-opt{text-align:left;border:0;background:var(--chip);border-radius:11px;padding:11px 14px;cursor:pointer;
  font-family:var(--sans);font-size:14px;color:var(--text);display:flex;flex-direction:column;gap:2px;transition:background .15s;}
.tag-opt.bt{font-weight:600;}
.tag-opt.it{margin-left:16px;background:transparent;font-size:13px;color:var(--muted);padding:7px 12px;}
.tag-opt:hover{background:var(--chip-h);color:var(--text);}
.tag-opt-meta{font-family:var(--sans);font-size:11.5px;font-weight:400;color:var(--muted);}

/* ── 채팅 세부: 태그바 숨김·스크롤바 숨김·첨부 미리보기 ────── */
.chat-tagbar[hidden]{display:none;}
.chat-box{scrollbar-width:none;-ms-overflow-style:none;}
.chat-box::-webkit-scrollbar{display:none;}
.chat-input .field{overflow-y:auto;scrollbar-width:none;}
.chat-input .field::-webkit-scrollbar{display:none;}
/* 메시지 첨부 */
.att-media{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.att-img{display:block;border-radius:10px;overflow:hidden;line-height:0;box-shadow:1px 1px 4px rgba(var(--shadow),.5);}
.att-img img{width:92px;height:92px;object-fit:cover;display:block;}
.att-file{display:inline-flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:10px;background:var(--chip);text-decoration:none;max-width:190px;}
.af-type{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--accent-ink);}
.af-name{font-family:var(--sans);font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-msg.from-client .att-file{background:rgba(241,90,36,.1);}
/* 입력 첨부 미리보기 */
.chat-att-preview{display:flex;flex-wrap:wrap;gap:8px;padding:0 4px;margin-top:10px;}
.chat-att-preview:empty{margin:0;}
.ap-img{width:56px;height:56px;border-radius:9px;overflow:hidden;line-height:0;box-shadow:1px 1px 4px rgba(var(--shadow),.5);}
.ap-img img{width:100%;height:100%;object-fit:cover;}
.ap-file{display:inline-flex;flex-direction:column;gap:2px;padding:7px 11px;border-radius:9px;background:var(--chip);max-width:150px;}

/* ── 이미지 라이트박스 (첨부 크게 보기 + 저장) ───────────────── */
.att-img{cursor:zoom-in;}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:32px;
  background:rgba(0,0,0,.74);backdrop-filter:blur(4px);}
.lightbox[hidden]{display:none;}
.lb-img{max-width:92vw;max-height:82vh;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.55);}
.lb-close{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);color:#fff;transition:background .15s;}
.lb-close svg{width:22px;height:22px;}
.lb-close:hover{background:rgba(255,255,255,.3);}
.lb-save{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:14px;
  background:#fff;color:#2a2a2a;font-family:var(--sans);font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.35);}
.lb-save svg{width:18px;height:18px;}
.lb-save:hover{background:#f1f1f1;}

/* ── 태그(수정사항) 미리보기 모달 (peek) ─────────────────────── */
.peek-card{max-width:520px;width:calc(100vw - 40px);}
.peek-body{max-height:min(64vh,560px);overflow-y:auto;}
.peek-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.peek-title{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--text);}
.peek-sub{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-bottom:14px;}
.peek-empty{font-family:var(--sans);font-size:13.5px;color:var(--muted);text-align:center;padding:20px 0;}
.peek-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.peek-item{padding:13px 15px;border-radius:13px;background:var(--chip);display:flex;flex-direction:column;gap:7px;}
.peek-item.focus{background:rgba(241,90,36,.13);box-shadow:inset 0 0 0 1.5px var(--accent);}
.peek-item-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.peek-no{font-family:var(--mono);font-size:11px;color:var(--muted);width:18px;}
.peek-item-body{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--text);white-space:pre-wrap;}
.peek-item-url{font-family:var(--sans);font-size:12.5px;color:var(--link);text-decoration:none;word-break:break-all;}
.peek-item-quote{font-family:var(--mono);font-size:12.5px;color:var(--accent-ink);}
.peek-detail{margin-top:18px;width:100%;}

/* 채팅 본문 링크 — 부드러운 색상 */
.chat-body a{color:#d4623a;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(212,98,58,.45);}
.chat-body a:hover{color:#6f89af;}
:root[data-theme="dark"] .chat-body a{color:#9fb4d6;}

/* 채팅 참여 인원 태그 (서울맨션 + 업체 인원, 회사별 색 통일) */
.chat-parties{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.chat-parties .co-tag{font-size:12px;}

/* 사이드바 메뉴 알림 뱃지 (메시지 새 알림 — 동그란 숫자) */
.side-nav a.nav-count{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.nav-badge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:700;line-height:1;color:#fff;background:var(--accent);}
/* ⚠️ 스케줄 배지만 **뜻이 다르다** — 미확인 개수가 아니라 **지난 마감(지연)** 건수다.
   같은 오렌지로 두면 "새 알림"으로 읽히므로 경고색으로 갈랐다. */
.nav-badge.late{background:var(--err);}

/* 새 메시지 플로팅 토스트 (관리자, 우측 하단 5초) */
.toast-wrap{position:fixed;right:22px;bottom:22px;z-index:180;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none;}
.msg-toast{pointer-events:auto;display:flex;flex-direction:column;gap:3px;max-width:330px;
  padding:14px 18px;border-radius:16px;text-decoration:none;
  background:rgba(244,243,241,.8);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5);
  opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;}
:root[data-theme="dark"] .msg-toast{background:rgba(42,42,40,.8);border-color:rgba(255,255,255,.1);box-shadow:0 18px 46px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);}
.msg-toast.show{opacity:1;transform:none;}
.mt-co{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--accent-ink);}
.mt-body{font-family:var(--sans);font-size:13.5px;color:var(--text);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* 입력 중 표시 (관리자 대화창) — 클라 말풍선과 같은 우측 정렬 */
.chat-typing{align-self:flex-end;display:flex;align-items:center;gap:8px;padding:2px 4px;
  font-family:var(--sans);font-size:12.5px;color:var(--muted);}
.chat-typing[hidden]{display:none;}
.chat-typing .dots{display:inline-flex;gap:3px;}
.chat-typing .dots span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typing 1.2s infinite;}
.chat-typing .dots span:nth-child(2){animation-delay:.2s;}
.chat-typing .dots span:nth-child(3){animation-delay:.4s;}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* 목록 행 미확인 메시지 수 (우측 화살표 왼쪽) */
/* 목록 행 미확인 메시지 수 — 음각(오목) 배지, 화살표 왼쪽. §3-0: 뉴모 성립 = 요소색=배경색(--bg) */
.status .unread-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;
  border-radius:11px;background:var(--bg);color:var(--accent);font-family:var(--mono);font-size:11.5px;font-weight:700;line-height:1;margin-right:10px;
  box-shadow:inset 1.5px 1.5px 3px rgba(var(--shadow),.85), inset -1.5px -1.5px 3px rgba(var(--hilite),.85);}

/* 낙관적 전송 버블 (서버 응답 전 임시 표시) */
.chat-msg.pending{opacity:.55;}
.chat-msg.pending .chat-body.opt-file{font-size:12px;color:var(--muted);}
.chat-msg.pending.failed{opacity:1;}
.chat-msg.pending.failed .chat-meta{color:var(--err);}

/* 요청 제목 옆 급행 태그 (요청 전체 단위) */
.ph-title .tag.rush{vertical-align:4px;margin-left:8px;}
.submit-act .rush-submit{display:inline-flex;align-items:center;justify-content:center;
  background:rgba(241,90,36,.10);border-radius:999px;padding:12px 24px;}   /* 급행 = accent(오렌지) 옅은 틴트 평면 필 */
:root[data-theme="dark"] .submit-act .rush-submit{background:rgba(255,122,69,.13);}
.submit-act .rush-submit span{color:#6d6c67;font-weight:500;}   /* 급행 라벨 텍스트 — muted(#8f8e89)와 text(#333) 중간 톤 */
:root[data-theme="dark"] .submit-act .rush-submit span{color:#b8b7b2;}
/* 틴트 필 위 체크박스 — 그림자를 틴트 톤(오렌지)으로 맞춤.
   ⚠️ 판(background:#e1e3e6)만 아직 옛 쿨그레이다 — 오렌지 그림자와 미세하게 어긋난다(눈 확인 대기, 인수인계 §2-1). */
.rush-submit input{background:#e1e3e6;
  box-shadow:inset 2px 2px 5px rgba(241,90,36,.32), inset -2px -2px 5px rgba(255,255,255,.95);}
.rush-submit input:checked{border-top-color:rgba(255,255,255,.85);border-left-color:rgba(255,255,255,.85);
  box-shadow:2px 2px 4px rgba(241,90,36,.30), -2px -2px 4px rgba(255,255,255,.95);}
.rush-submit input:checked::after{border-color:var(--accent-ink);}
:root[data-theme="dark"] .rush-submit input{background:#464a4f;
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.42), inset -2px -2px 5px rgba(255,122,69,.16);}
:root[data-theme="dark"] .rush-submit input:checked{border-top-color:rgba(255,255,255,.12);border-left-color:rgba(255,255,255,.12);
  box-shadow:2px 2px 4px rgba(0,0,0,.4), -2px -2px 4px rgba(255,122,69,.2);}

/* 업체·담당자 정보 팝업 (관리자, 대화 헤더 태그 클릭) */
.co-tag-btn{cursor:pointer;border:none;font:inherit;}
.co-tag-btn:hover{filter:brightness(.96);}
.coinfo-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.coinfo-item{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.42);border:1px solid var(--div-lo);}
:root[data-theme="dark"] .coinfo-item{background:rgba(255,255,255,.05);}
.ci-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.ci-name{font-family:var(--sans);font-size:15px;color:var(--text);}
.ci-primary{background:rgba(241,90,36,.16);color:var(--accent-ink);}
.ci-chat{background:rgba(122,152,114,.16);color:#6d8a66;}
.ci-row{display:flex;gap:10px;font-family:var(--sans);font-size:13px;color:var(--text);margin-top:4px;}
.ci-k{color:var(--muted);min-width:58px;flex:none;}
.ci-link{color:#d4623a;text-decoration:none;}
.ci-link:hover{text-decoration:underline;}

/* PJAX 콘텐츠 슬롯 — 셸 그리드의 콘텐츠 칼럼 래퍼 */
/* ★콘텐츠 영역 폰트 통일 — 이 안에서 --mono(Switzer)를 --sans(Pretendard)로 재정의하면
   본문·라벨·제목·숫자 등 콘텐츠의 모든 var(--mono) 사용처가 Pretendard로 렌더된다.
   헤더(.topbrand)·사이드바(.sidebar)는 .page-slot 밖이라 Switzer 유지(사용자 지시 2026-07-27: 관리자 콘텐츠 폰트 전부 Pretendard). */
.page-slot{min-width:0;display:block; --mono:var(--sans);}

/* 항목 리스트 섹션 제목 — 음영만이 아닌 텍스트로 영역 구분(가독성) */
.items-title{margin:0 0 16px;justify-content:flex-start;gap:8px;}

/* ── §3-0 v2 정비: 견적 워크시트 = 톤 필(색 영역) 위 → 컨트롤·배지 평면(뉴모 금지) ── */
.quote-row .qr-cat, .quote-row .qr-label, .quote-row .qr-amt, .quote-row .qr-rush{
  box-shadow:none;border:1px solid var(--div-lo);background-color:var(--field-bg);}
.quote-row .qr-cat:focus, .quote-row .qr-label:focus, .quote-row .qr-amt:focus, .quote-row .qr-rush:focus{border-color:var(--accent);}
.quote-row .qr-note{box-shadow:none;border:1px solid var(--div-lo);border-left:2px solid var(--accent);background-color:var(--field-bg);}
.quote-row .qr-note:focus{border-color:var(--accent);border-left-color:var(--accent);}
.quote-row .qr-no{box-shadow:none;background:var(--chip-h);}

/* ── 스크린샷 첨부 에디터 (batch 항목 폼) ─────────────────────── */
.fu-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.shot-card{max-width:min(940px,94vw);}
.shot-drop{display:flex;flex-direction:column;align-items:center;gap:10px;padding:52px 20px;text-align:center;cursor:pointer;
  border:1.5px dashed var(--div-lo);border-radius:14px;color:var(--muted);font-family:var(--sans);font-size:14px;
  transition:border-color .2s,background-color .2s;}
.shot-drop svg{width:34px;height:34px;opacity:.55;}
.shot-drop.over{border-color:var(--accent);background:rgba(241,90,36,.08);}
.shot-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.st-group{display:inline-flex;gap:6px;}
.st-sep{width:1px;height:22px;background:var(--div-lo);margin:0 4px;}
.sc-color{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.75);cursor:pointer;background:var(--c);opacity:.45;padding:0;}
.sc-color.on{opacity:1;box-shadow:0 0 0 2px var(--c);}
.sc-tool,.sc-act{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--div-lo);border-radius:999px;
  background:rgba(255,255,255,.4);color:var(--muted);cursor:pointer;font-family:var(--sans);font-size:12.5px;}
:root[data-theme="dark"] .sc-tool,:root[data-theme="dark"] .sc-act{background:rgba(255,255,255,.06);}
.sc-tool svg{width:17px;height:17px;}
.sc-act svg{width:15px;height:15px;}
.sc-tool.on{color:var(--text);border-color:var(--accent);background:rgba(241,90,36,.14);}
.sc-tool:hover,.sc-act:hover{color:var(--text);}
.shot-canvas-wrap{overflow:auto;max-height:56vh;border-radius:12px;line-height:0;background:
  repeating-conic-gradient(rgba(0,0,0,.045) 0% 25%, transparent 0% 50%) 0 0/22px 22px;}
#shotCanvas{display:block;max-width:100%;height:auto;cursor:crosshair;touch-action:none;}
/* 첨부된 스크린샷 썸네일 */
.shot-list{list-style:none;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin:10px 0 0;padding:0;}
.shot-list li{position:relative;line-height:0;}
.shot-list img{height:64px;border-radius:10px;display:block;border:1px solid var(--div-lo);}
.shot-list .sx{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:0;cursor:pointer;
  background:var(--text);color:var(--bg);font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center;}

/* 항목 카드 첨부 이미지 — 큰 미리보기(클릭=라이트박스 확대) */
.item-card .att-media{margin-top:12px;}
.item-card .att-img img{width:auto;height:auto;max-height:240px;max-width:min(460px,100%);object-fit:contain;}

/* hidden 속성이 display:flex에 밀리지 않도록 — 드롭존/에디터/액션 토글 */
.shot-drop[hidden],.shot-edit[hidden],.glass-actions[hidden]{display:none;}

/* ═══ 스킨 선택 = 네이티브 select (2026-07-24, 버튼+드롭다운에서 교체) ══════════
   헤더 컨트롤 톤(양각 뉴모 필)에 맞춤. 우측 꺾쇠는 배경 그라데이션으로(select.field와 동일 기법). */
.skin-select{height:38px;padding:0 34px 0 15px;cursor:pointer;appearance:none;-webkit-appearance:none;outline:0;flex:none;
  background-color:var(--bg);border:0;border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  border-radius:19px;transform:scale(1.2);transform-origin:right center;margin-left:26px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.05em;color:var(--muted);
  -webkit-tap-highlight-color:transparent;
  box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1);
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:box-shadow .3s ease, color .3s ease, background-color .5s ease;}
.skin-select:hover{color:var(--text);}
.skin-select option{font-family:var(--sans);color:#222;background:#fff;}

/* ═══════════════════════════════════════════════════════════════════════
   매출 기록(admin/ledger.php) — 2026-07-29 신설
   ⚠️ 엑셀 표(14열)를 옮기지 않는다. **수주 1건 = 카드 1장**, 카드 안은 위→아래 5단:
      ① 유형·회사·브랜드·날짜 → ② 합계 + 완납/미수 → ③ 입금률 바 → ④ 금액 구성·입금내역 → ⑤ 메모
      숫자는 전부 var(--mono)·tabular-nums로 세로 자릿수가 맞는다(눈으로 스캔되는 이유).
   ⚠️ 스킨 대응은 아래 PAPER 블록에서 .led-card / .led-pay 등을 목록에 추가해 처리한다(여기는 뉴모 기준).
   ═══════════════════════════════════════════════════════════════════════ */
/* 영역 간 간격 — 탭 / KPI / 필터 / 월 리스트가 각각 다른 덩어리로 보여야 한다(2026-07-29 사용자 지시로 확대) */
.led-kpi{grid-template-columns:repeat(4,1fr);margin:0 0 44px;}
.led-filters,.list-tools{display:flex;align-items:center;gap:14px;margin:0;}
.led-filters .filters{flex:1;margin:0;}
.led-search,.list-search{flex:none;width:250px;}
.led-search .field,.list-search .field{margin:0;height:38px;padding:0 15px;font-size:13.5px;}
/* 목록 상단 안내문 — 이 화면에서 뭘 할 수 있고 뭘 못 하는지 한 줄로 */
.list-note{flex:1;font-family:var(--sans);font-size:12.5px;color:var(--muted);}
/* ⚠️ 인접(+)만으로는 안 된다 — 툴바와 목록 **사이에 접힘 폼(.collapse)이 끼는 화면**이 있어서
   그때 간격이 통째로 사라진다(내부 계정 탭에서 발견). 일반 형제(~)로 잡아 항상 띄운다. */
.list-tools ~ .row-list,
.list-tools ~ .empty,
.list-tools + .row-list,.list-tools + .empty{margin-top:34px;}
.list-tools + .collapse.open{margin-top:26px;}
/* 회원 행 우측 = 마지막 접속 */
.usr-seen{font-family:var(--sans);font-size:12.5px;color:var(--muted);white-space:nowrap;}
.usr-seen.none{color:var(--ph);}
/* ── 회원 등급 (2026-07-29) ───────────────────────────────────
   ⚠️ 등급(전역 신분)과 업체 역할(대표/담당자, 업체마다 따로)은 **다른 축**이다. 배지도 다르게 보인다. */
.usr-row{display:flex;align-items:stretch;gap:10px;}
.usr-row > .row-link{flex:1;min-width:0;}
.usr-gform{flex:none;display:flex;align-items:center;margin:0;}
.usr-gsel{height:44px;min-width:150px;padding:0 34px 0 16px;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:13px;color:var(--link);background-color:var(--chip);border:0;outline:0;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:background-color .3s ease, color .3s ease;}
.usr-gsel:hover{background-color:var(--chip-h);color:var(--text);}
.usr-grade-badge{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.01em;
  padding:3px 9px;border-radius:8px;color:#fff;margin-left:2px;vertical-align:middle;}
.usr-grade-badge.g-owner {background:var(--accent);}
.usr-grade-badge.g-sub   {background:var(--c-info);}
.usr-grade-badge.g-team  {background:var(--c-progress);}
.usr-grade-badge.g-client{background:var(--c-neutral);}
.usr-grade-badge.g-none  {background:var(--c-neutral);}
.usr-gfilter{margin:0 0 22px;}
/* 사이드바 신원 영역의 등급 배지 — 메뉴가 왜 안 보이는지의 근거라 항상 보이게 둔다 */
.side-id-grade{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:8px;
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.01em;
  color:var(--link);background:var(--chip);vertical-align:middle;}
/* 관리자 계정 행(회원 목록 > 내부 계정 탭) */
.adm-row{display:flex;align-items:center;gap:10px;}
.adm-row > .adm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.adm-name{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--text);}
.adm-meta{font-family:var(--sans);font-size:12.5px;color:var(--muted);}
.adm-me{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--accent-ink);
  background:color-mix(in srgb, var(--accent) 14%, transparent);padding:2px 8px;border-radius:8px;margin-left:6px;}
/* 비밀번호 재설정 줄 — 같은 줄 버튼 높이 44px 규칙(§2-2-1) 적용 */
.adm-item + .adm-item{margin-top:9px;}
.adm-pw{display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:12px 14px;
  border-radius:14px;background:var(--chip);}
.adm-pw[hidden]{display:none;}
.adm-pw .field{flex:1;min-width:0;margin:0;height:44px;padding:0 18px;font-size:14px;}
.adm-pw .btn.solid{width:auto;min-width:120px;height:44px;padding:0 28px;font-size:14px;margin:0;}
.adm-pw .chip-btn{height:44px;padding:0 18px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}
@media (max-width:640px){
  .adm-pw{flex-wrap:wrap;}
  .adm-pw .field{flex-basis:100%;}
  .adm-pw .btn.solid{flex:1;min-width:0;}
}
@media (max-width:640px){
  .usr-row{flex-direction:column;gap:8px;}
  .usr-gsel{width:100%;min-width:0;height:42px;}
}
.co-badge.warn{color:var(--c-warn);}
@media (max-width:640px){
  .list-tools{flex-direction:column;align-items:stretch;gap:10px;}
  .list-search{width:100%;}
  .list-note{order:2;}
}
.led-filters + .empty{margin-top:38px;}
/* 월 구분선 = 가장 큰 덩어리 경계. 일반 section-h(46)보다 더 벌린다 */
.led-month{display:flex;align-items:baseline;gap:9px;margin:56px 0 18px;}
.led-list{display:flex;flex-direction:column;gap:9px;}

.led-card{background:var(--bg);border-radius:16px;padding:16px 20px 17px;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:4px 4px 10px rgba(var(--shadow),.7), -4px -4px 10px rgba(var(--hilite),.8);}
/* 미수가 남은 건 = 좌측에 얇은 경고 라인. 카드 전체를 물들이지 않고 '아직 안 끝났다'만 표시 */
.led-card.has-due{border-left:2.5px solid var(--c-warn);}
.led-card .led-editbox{display:none;}
.led-card.editing .led-view{display:none;}
.led-card.editing .led-editbox{display:block;}

.led-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.led-kind{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.01em;
  padding:4px 9px;border-radius:8px;flex:none;color:#fff;}
.led-kind.k-order {background:var(--c-info);}
.led-kind.k-custom{background:var(--c-progress);}
.led-kind.k-fix   {background:var(--c-success);}
.led-kind.k-event {background:var(--c-warn);}
.led-kind.k-etc   {background:var(--c-neutral);}
.led-co{font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--text);}
.led-brand{font-family:var(--mono);font-size:12.5px;color:var(--muted);background:var(--chip);
  padding:3px 8px;border-radius:7px;letter-spacing:.02em;}
/* ★수주일·기록자 = 카드에서 자주 확인하는 값이라 **칩으로 승격**했다(2026-07-29 사용자 지시 — 너무 흐렸다).
   브랜드 칩(.led-brand)과 같은 계열로 묶어 상단 줄의 리듬을 맞춘다. */
.led-date{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--text);margin-left:auto;
  background:var(--chip);padding:4px 10px;border-radius:8px;letter-spacing:.01em;white-space:nowrap;}
.led-by{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--link);white-space:nowrap;
  background:var(--chip);padding:4px 9px;border-radius:8px;display:inline-flex;align-items:center;gap:4px;}
.led-edit{flex:none;}

.led-mid{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px 11px;margin-top:11px;}
/* 입금 방식·거래 방식 = 돈에 관한 값이라 금액 줄 **오른쪽 끝**에 붙인다(완납 배지와 같은 베이스라인) */
.led-mtags{margin-left:auto;display:flex;align-items:baseline;gap:7px;}
.led-amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:25px;font-weight:600;
  color:var(--text);letter-spacing:.005em;line-height:1;}
.led-amt .won{font-size:13px;font-weight:400;color:var(--muted);margin-left:3px;}
.led-state{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:9px;white-space:nowrap;}
.led-state.paid{color:var(--c-done);background:rgba(35,160,107,.12);}
.led-state.due {color:var(--c-warn);background:rgba(213,147,31,.14);}
.led-state.over{color:var(--c-info);background:rgba(91,141,239,.14);}

/* 입금률 바 — 숫자를 읽기 전에 '얼마나 들어왔나'가 먼저 보이게 하는 장치 */
/* 입금률 바 — 아래 세금계산서 줄의 **구분선 역할도 겸한다**(그래서 그 줄엔 border-top이 없다).
   그만큼 금액 줄과 띄워야 선처럼 읽힌다(2026-07-29 사용자 지시로 11 → 18px). */
.led-bar{height:4px;border-radius:3px;background:var(--div-lo);overflow:hidden;margin-top:18px;}
.led-bar span{display:block;height:100%;border-radius:3px;background:var(--c-success);transition:width .4s ease;}
.led-card.has-due .led-bar span{background:var(--c-warn);}

.led-break{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:10px;}
.led-break b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--text);}
.led-break .op{margin:0 3px 0 7px;color:var(--ph);}
/* 부가세 미포함으로 입력된 건 = 합계에 10%가 더해졌다는 표시(안 붙이면 왜 금액이 다른지 알 수 없다) */
.led-vatflag{font-size:11.5px;color:var(--muted);background:var(--chip);padding:2px 8px;border-radius:7px;margin-left:8px;}

.led-pays{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.led-pay{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--text);
  background:var(--chip);padding:4px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:7px;}
.led-pay i{font-style:normal;color:var(--muted);font-size:11.5px;}

/* ★메모 줄 — **배지 먼저, 텍스트는 그 오른쪽, 버튼은 끝**(2026-07-29 사용자 지시).
   위 구분선은 여유 있게 띄운다(입금률 바와 붙어 읽기 나빴다). */
/* ⚠️ **구분선 없음** — 위 입금률 바(녹색)가 선 역할을 한다(사용자 지시). 선을 다시 넣으면 줄이 두 겹으로 보인다. */
.led-notes{display:flex;align-items:center;flex-wrap:wrap;gap:7px 12px;margin-top:14px;
  font-family:var(--sans);font-size:12.5px;color:var(--muted);}
/* 특이사항 = 세금계산서 줄과 성격이 달라 별도 줄 */
.led-memo{display:block;font-family:var(--sans);font-size:12.5px;color:var(--muted);
  line-height:1.5;margin-top:12px;}
/* 계산서 상태 = 이 줄에서 가장 먼저 읽혀야 할 값 → 채운 배지 */
.led-tbadge{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:8px;white-space:nowrap;}
.led-tbadge.done {color:var(--c-done);background:color-mix(in srgb, var(--c-success) 16%, transparent);}
.led-tbadge.later{color:var(--accent-ink);background:color-mix(in srgb, var(--accent) 15%, transparent);}
/* 한 번에 전액 받은 건 — 입금 pill 줄을 없앤 대신 여기 한 칩으로 */
.led-full{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:8px;white-space:nowrap;
  color:var(--c-done);background:color-mix(in srgb, var(--c-success) 16%, transparent);}
/* 거래방식 = 중립 칩(배지들과 형태를 맞춰 줄이 따로 놀지 않게) */
.led-deal{font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:8px;white-space:nowrap;
  color:var(--link);background:var(--chip);}
/* 계산서 상세(처리방식·발행일·메모) = 배지 오른쪽 평문 */
.led-tax{color:var(--muted);}
.led-notes .led-taxreq{margin-left:auto;}
.led-notes form.led-taxundo{margin-left:auto;}
.led-notes form.led-taxundo{margin:0 0 0 auto;display:flex;align-items:center;}
/* 같은 줄 버튼 = 같은 높이(위 규칙과 동일 기준) */
.led-notes .chip-btn{height:34px;padding:0 14px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.led-notes .led-taxreq + .led-taxdone{margin-left:0;}


/* ── 보기 모드 전환 (카드형 / 표형) ───────────────────────── */
.view-seg{display:flex;flex:none;padding:3px;border-radius:999px;background:var(--chip);}
.view-seg .vs{padding:7px 16px;border-radius:999px;text-decoration:none;
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);
  transition:background-color .2s ease, color .2s ease;}
.view-seg .vs:hover{color:var(--text);}
.view-seg .vs.on{background:var(--bg);color:var(--text);
  box-shadow:1px 1px 3px rgba(var(--shadow),.9), -1px -1px 3px rgba(var(--hilite),.9);}
.led-xls{flex:none;height:38px;padding:0 18px;font-size:13px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;margin:0;width:auto;}

/* ── 표 보기 — 시트를 그대로 옮긴 열 구성(23열) ────────────────
   ⚠️ 열이 많아 **가로 스크롤이 정상**이다(탭과 달리 데이터라 가려져도 기능이 사라지지 않는다).
      대신 머리행은 sticky로 고정하고, 스크롤바는 **숨기지 않는다**(여기선 스크롤이 있다는 신호가 필요하다).
   ⚠️ 숫자는 mono + tabular-nums + 우측 정렬 — 자릿수가 세로로 맞아야 훑어진다. */
/* 표 위 도구줄 */
.ltab-bar{display:flex;align-items:center;gap:14px;margin-top:26px;}
.ltab-hint{flex:1;min-width:0;font-family:var(--sans);font-size:12px;color:var(--muted);}
.ltab-hint b{color:var(--accent-ink);}
.ltab-fs{flex:none;height:34px;padding:0 14px;border-radius:999px;gap:6px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.ltab-fs svg{width:14px;height:14px;}
.ltab-bar + .ltab-wrap{margin-top:12px;}

/* ── 전체 보기 — 뷰포트를 꽉 채운다 ──────────────────────────
   ⚠️ 표를 **DOM에서 옮기지 않는다**. 옮기면 펼쳐둔 수정 폼이 초기화되고 form 연결이 끊긴다.
      html.ltab-open 클래스만 켜고 여기서 .ltab-wrap 을 fixed 로 띄운다. */
.ltab-scrim{position:fixed;inset:0;z-index:125;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.ltab-scrim[hidden]{display:none;}
.ltab-x{position:fixed;top:16px;right:18px;z-index:135;display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;
  background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px;font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.28);}
.ltab-x[hidden]{display:none;}
.ltab-x kbd{font-family:var(--mono);font-size:11px;color:var(--muted);
  background:var(--chip);padding:2px 6px;border-radius:5px;}
html.ltab-open .ltab-wrap{position:fixed;inset:62px 14px 14px;z-index:130;
  max-height:none;min-height:0;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);}
html.ltab-open .ltab-bar{visibility:hidden;}

/* 높이 — 화면을 최대한 쓴다(2026-07-29 사용자 지시로 확대). 총계 바가 스티키로 아래를 덮으므로 그만큼만 남긴다. */
.ltab-wrap{overflow:auto;max-height:calc(100vh - 210px);min-height:320px;border-radius:14px;
  background:var(--bg);border:1px solid var(--edge-lo);margin-top:26px;}
.ltab{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;
  font-family:var(--sans);font-size:12.5px;color:var(--text);}
.ltab th,.ltab td{padding:11px 12px;border-bottom:1px solid var(--div-lo);white-space:nowrap;}
/* 수정 열 = **왼쪽 고정** — 가로로 스크롤해도 손에 닿아야 한다 */
.ltab th.ed,.ltab td.ed{position:sticky;left:0;z-index:3;width:40px;padding:0 6px;
  background:var(--bg);border-right:1px solid var(--div-lo);}
.ltab thead th.ed{z-index:4;background:var(--chip);}
.ltab tfoot td.ed{z-index:4;background:var(--chip);}
.ltab tbody tr:hover td.ed{background:var(--chip);}
.ltab-edit{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0 auto;
  border:0;border-radius:8px;background:transparent;color:var(--ph);cursor:pointer;
  transition:background-color .2s ease, color .2s ease;}
.ltab-edit svg{width:14px;height:14px;}
.ltab-edit:hover{background:var(--chip-h);color:var(--accent-ink);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── 표 수정 팝업 ─────────────────────────────────────────────
   ⚠️★ 수정 폼을 **표 안(<tr>)에 넣지 않는다**(colspan 행 방식은 동작하지 않았다).
      표 바깥 `.ltab-forms` 보관함에 렌더해 두고, 수정할 때 그 **노드를 팝업으로 옮긴다**(복제 금지 — 같은 name이 둘이 되면 저장이 꼬인다).
   ⚠️ 일반 표 = 가운데 팝업 / **전체 보기 = 우측에서 슬라이드되는 패널**(사용자 지시). */
.ltab-forms[hidden]{display:none;}
.ltab-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;}
.ltab-modal[hidden]{display:none;}
.ltab-mscrim{position:absolute;inset:0;background:rgba(0,0,0,.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.ltab-mbox{position:relative;width:100%;max-width:940px;max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;border-radius:20px;background:var(--bg);
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:ltabPop .24s cubic-bezier(.22,1,.36,1);}
@keyframes ltabPop{from{transform:translateY(10px);opacity:0;}to{transform:none;opacity:1;}}
.ltab-mhead{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 24px 15px;border-bottom:1px solid var(--div-lo);}
.ltab-mtitle{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--text);}
.ltab-mbody{flex:1;min-height:0;overflow-y:auto;padding:6px 24px 24px;}
.ltab-mbody .led-fsub:first-of-type{margin-top:26px;}

/* 전체 보기 = 우측 드로어. 표를 계속 보면서 고칠 수 있게 스크림도 옅게. */
html.ltab-open .ltab-modal{padding:0;}
html.ltab-open .ltab-mscrim{background:rgba(0,0,0,.22);-webkit-backdrop-filter:none;backdrop-filter:none;}
html.ltab-open .ltab-mbox{position:fixed;top:62px;right:14px;bottom:14px;left:auto;
  width:min(620px,94vw);max-width:none;max-height:none;border-radius:16px;
  animation:ltabSlide .3s cubic-bezier(.22,1,.36,1);}
@keyframes ltabSlide{from{transform:translateX(105%);opacity:.4;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .ltab-mbox,html.ltab-open .ltab-mbox{animation:none;}
}
@media (max-width:640px){
  .ltab-modal{padding:12px;}
  .ltab-mbox{max-height:calc(100vh - 24px);border-radius:16px;}
  .ltab-mhead{padding:16px 16px 12px;}
  .ltab-mbody{padding:4px 16px 18px;}
  html.ltab-open .ltab-mbox{top:56px;right:8px;bottom:8px;left:8px;width:auto;}
}
.ltab thead th{position:sticky;top:0;z-index:2;background:var(--chip);
  font-size:11.5px;font-weight:600;color:var(--title-ink);text-align:left;
  border-bottom:1px solid var(--edge-lo);}
.ltab th.c,.ltab td.c{text-align:center;}
.ltab th.r,.ltab td.r{text-align:right;}
.ltab td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.ltab td.s{color:var(--muted);}
.ltab td.nm{font-weight:600;}
.ltab th.hi,.ltab td.hi{background:color-mix(in srgb, var(--accent) 7%, transparent);font-weight:600;}
.ltab td.hi.due{color:var(--c-warn);}
.ltab tbody tr:hover td{background:var(--chip);}
.ltab tbody tr:hover td.hi{background:color-mix(in srgb, var(--accent) 12%, transparent);}
.ltab tbody tr.is-due td:first-child{box-shadow:inset 3px 0 0 var(--c-warn);}
/* 합계 행 = 시트와 같은 자리(맨 아래). 스크롤해도 바닥에 붙는다 */
.ltab tfoot td{position:sticky;bottom:0;z-index:2;background:var(--chip);font-weight:700;
  border-top:1px solid var(--edge-lo);border-bottom:0;}
.ltab tfoot td.hi{background:color-mix(in srgb, var(--accent) 13%, transparent);}
@media (max-width:640px){
  .ltab-wrap{max-height:calc(100vh - 250px);min-height:260px;margin-top:20px;}
  .ltab-bar{flex-direction:column;align-items:stretch;gap:9px;margin-top:20px;}
  .ltab-fs{width:100%;}
  html.ltab-open .ltab-wrap{inset:56px 8px 8px;}
  .ltab-x{top:10px;right:10px;}
  .ltab th,.ltab td{padding:8px 10px;font-size:12px;}
  .view-seg{align-self:flex-start;}
  .led-xls{width:100%;}
}

/* ── 하단 총계 바 (구글시트 「합계」 행) ─────────────────────
   ⚠️ `position:sticky; bottom:0` — 리스트가 길어도 총계는 항상 보여야 한다.
      부모(.wrap)에 overflow가 걸리면 스티키가 죽는다. 모바일은 하단 GNB 위로 띄운다. */
.led-total{position:sticky;bottom:0;z-index:20;margin-top:22px;padding:14px 20px 15px;
  border-radius:16px;background:var(--bg);
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:0 -6px 18px rgba(var(--shadow),.55), 5px 5px 12px rgba(var(--shadow),.7), -5px -5px 12px rgba(var(--hilite),.8);}
/* 머리(합계·건수·통계 링크) — 아래 숫자 줄과 **확실히 떨어뜨린다**(2026-07-29 사용자 지시) */
.lt-head{display:flex;align-items:baseline;gap:9px;margin-bottom:20px;
  padding-bottom:13px;border-bottom:1px solid var(--div-lo);}
.lt-title{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text);}
.lt-cnt{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--muted);}
/* 숫자 3개 — 좌우 간격을 크게, 라벨↔숫자 세로 간격도 크게. **숫자 크기는 셋 다 같다**(위계는 색으로만). */
/* ⚠️ align-items:center — 잔금은 칩(패딩)이라 flex-start면 왼쪽 두 항목과 **세로선이 어긋난다**(2026-07-29 사용자 지적) */
.lt-cells{display:flex;flex-wrap:wrap;align-items:center;gap:16px 64px;}
.lt-cell{display:flex;flex-direction:column;gap:9px;min-width:0;}
.lt-k{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--title-ink);white-space:nowrap;}
.lt-cell b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:19px;font-weight:600;
  color:var(--text);letter-spacing:.005em;line-height:1;}
.lt-w{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--muted);margin-left:3px;}
/* 잔금(미수) = 가장 중요한 값이라 칩으로 띄워 눈에 걸리게 한다 */
.lt-due{margin-left:auto;align-items:flex-end;padding:9px 16px 11px;border-radius:13px;background:var(--chip);}
.lt-due.has{background:color-mix(in srgb, var(--c-warn) 15%, transparent);}
.lt-due.has .lt-k{color:var(--c-warn);}
.lt-due.has b{color:var(--c-warn);}
.lt-due.has .lt-w{color:var(--c-warn);opacity:.75;}
.lt-due:not(.has) b{color:var(--c-done);}
/* 잔금 칩 = 항상 버튼(미수 0이어도 눌러서 「미수 없음」을 확인할 수 있어야 한다) */
button.lt-due{border:0;cursor:pointer;font:inherit;text-align:right;position:relative;padding-right:34px;
  transition:background-color .2s ease;}
button.lt-due:hover{background:var(--chip-h);}
button.lt-due.has:hover{background:color-mix(in srgb, var(--c-warn) 24%, transparent);}
.lt-dchev{position:absolute;right:13px;top:50%;margin-top:-7px;width:14px;height:14px;
  color:var(--muted);transition:transform .25s ease;}
button.lt-due.has .lt-dchev{color:var(--c-warn);}
button.lt-due.on .lt-dchev{transform:rotate(180deg);}

/* 미수 목록 — 누구한테 얼마를 못 받았나 + 계약금이 언제 들어왔나 */
.lt-unpaid{margin-top:16px;padding-top:14px;border-top:1px solid var(--div-lo);
  display:flex;flex-direction:column;gap:6px;max-height:270px;overflow-y:auto;}
.lt-unpaid[hidden]{display:none;}
.lt-ut{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:2px;}
.lt-ut strong{color:var(--c-warn);}
.lt-unone{font-family:var(--sans);font-size:12.5px;color:var(--muted);padding:10px 13px;
  border-radius:11px;background:color-mix(in srgb, var(--c-success) 12%, transparent);}
.lt-unone strong{color:var(--c-done);}
.lt-u{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:11px;
  background:var(--chip);text-decoration:none;transition:background-color .2s ease;}
.lt-u:hover{background:var(--chip-h);}
.lt-uco{flex:none;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:6px;white-space:nowrap;}
.lt-uco i{font-style:normal;font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--muted);}
.lt-um{flex:1;min-width:0;font-family:var(--sans);font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lt-um em{font-style:normal;color:var(--c-warn);font-weight:600;}
.lt-ud{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;color:var(--c-warn);}

/* ── 총계 바 「자세히」 접힘 ─────────────────────────────────
   기본은 총액 3개만(복잡해 보인다는 지적으로 걷어낸 것). 펼치면 **차수별·유형별을 가로로**. */
.lt-toggle{display:flex;align-items:center;gap:5px;margin:14px auto 0;padding:7px 15px;
  border:0;border-radius:999px;cursor:pointer;background:var(--chip);
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--link);
  transition:background-color .2s ease, color .2s ease;}
.lt-toggle:hover{background:var(--chip-h);color:var(--text);}
.lt-toggle svg{width:14px;height:14px;transition:transform .25s ease;}
.lt-toggle.on svg{transform:rotate(180deg);}
.lt-detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--div-lo);
  display:flex;flex-direction:column;gap:14px;}
.lt-detail[hidden]{display:none;}
.lt-dgroup{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.lt-dt{flex:none;width:64px;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);}
.lt-drow{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:9px 30px;}
.lt-d{display:flex;flex-direction:column;gap:4px;min-width:0;}
.lt-d i{font-style:normal;font-family:var(--sans);font-size:11.5px;color:var(--muted);white-space:nowrap;}
.lt-d i em{font-style:normal;color:var(--ph);margin-left:3px;}
.lt-d b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:600;color:var(--text);}

/* ── 매출 통계(admin/ledger_stats.php) ────────────────────────
   ⚠️ 그래프는 외부 라이브러리 없이 **CSS 폭(%)** 으로만 그린다(오프라인 NAS 환경).
      막대 = 수주 확정액(연한 바) 위에 입금액(진한 바)을 겹쳐 "얼마 중 얼마 받았나"를 한 눈에. */
.st-list{display:flex;flex-direction:column;gap:7px;}
.st-row{display:flex;align-items:center;gap:14px;padding:9px 2px;}
.st-row.is-zero{opacity:.4;}
.st-label{flex:none;width:132px;display:flex;align-items:center;gap:8px;min-width:0;}
.st-no{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;}
a.st-no.st-link{text-decoration:none;}
a.st-no.st-link:hover{color:var(--accent-ink);}
.st-n{font-family:var(--sans);font-size:11.5px;color:var(--muted);white-space:nowrap;}
.st-bar{position:relative;flex:1;min-width:0;height:16px;border-radius:8px;background:var(--div-lo);overflow:hidden;}
.st-bar span{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--chip-h);}
.st-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--c-success);opacity:.85;}
:root[data-theme="dark"] .st-bar span{background:#5c5c57;}
.st-nums{flex:none;width:190px;text-align:right;display:flex;flex-direction:column;gap:2px;}
.st-nums b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:600;color:var(--text);}
.st-sub{font-family:var(--sans);font-size:11.5px;color:var(--muted);}
.st-sub em{font-style:normal;color:var(--c-warn);font-weight:600;}
.st-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
.st-legend{display:flex;gap:18px;margin-top:30px;font-family:var(--sans);font-size:12px;color:var(--muted);}
.st-legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-2px;}
.st-legend .lg-total{background:var(--chip-h);}
.st-legend .lg-paid{background:var(--c-success);}

/* 랭킹 */
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.rank-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:13px;background:var(--bg);
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:3px 3px 8px rgba(var(--shadow),.6), -3px -3px 8px rgba(var(--hilite),.7);}
.rank-no{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);background:var(--chip);}
.rank-no.top{background:var(--accent);color:#fff;}
.rank-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.rank-name{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:7px;min-width:0;}
.rank-meta{font-family:var(--sans);font-size:11.5px;color:var(--muted);}
.rank-num{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:600;color:var(--text);}
.rank-num .unit{font-size:11.5px;color:var(--muted);margin-left:2px;font-weight:400;}

@media (max-width:640px){
  .st-row{gap:10px;flex-wrap:wrap;}
  .st-label{width:auto;flex:1;}
  .st-nums{width:auto;}
  .st-bar{flex-basis:100%;order:3;height:12px;}
  .st-cols{grid-template-columns:1fr;gap:0;}
}
@media (max-width:640px){
  /* 하단 GNB(64px)와 safe-area 위로 띄운다 — 안 그러면 총계가 GNB에 가린다 */
  .led-total{bottom:calc(72px + env(safe-area-inset-bottom,0));padding:12px 15px 13px;border-radius:14px;}
  .lt-head{margin-bottom:15px;padding-bottom:11px;}
  .lt-cells{gap:14px 26px;}
  .lt-cell{gap:7px;}
  .lt-cell b{font-size:17px;}
  .lt-due{margin-left:auto;padding:8px 13px 10px;}
  .lt-dgroup{gap:8px;}
  .lt-dt{width:100%;}
  .lt-drow{gap:9px 20px;}
  .lt-d b{font-size:13.5px;}
  .lt-u{flex-wrap:wrap;gap:5px 10px;}
  .lt-um{flex-basis:100%;order:3;white-space:normal;}
  .lt-ud{margin-left:auto;}
  .lt-unpaid{max-height:230px;}
}

/* ── 입력/수정 폼 (신규·편집 공용) ───────────────────────────── */
/* 접힘 높이 = 내용보다 넉넉히. 폼이 5단 16필드라 기본 .collapse 460px면 잘린다.
   ⚠️ 행 간격(.led-fgrid gap)이나 필드를 늘리면 여기도 같이 올려야 한다 — 안 그러면 아래가 잘린다. */
.led-collapse.open{max-height:2200px;margin-bottom:56px;}   /* ★기록 추가 버튼 아래 여백(사용자: 훨씬 벌려달라) */
.led-collapse .co-form{padding-bottom:34px;}
.led-form{display:block;}
/* 행 간격 = 한 줄(24px). 필드가 많아 촘촘하면 어디까지가 한 항목인지 안 읽힌다(2026-07-29 사용자 지시) */
.led-fgrid{display:grid;gap:24px 14px;margin-bottom:24px;}
/* ★한 줄 묶음(2026-07-29 사용자 지시): 수주일+제작유형+거래방식 / 회사명+브랜드 */
.led-fg-top  {grid-template-columns:190px 1fr 1fr;}
.led-fg-co   {grid-template-columns:1fr 1fr;}
/* 수주 금액 = [부가세 셀렉트][금액][+ 항목 추가] · 추가 금액은 그 아래로 같은 열에 쌓인다 */
.led-fg-amt  {grid-template-columns:190px 1fr 128px;}
.led-fg-pay  {grid-template-columns:190px 1fr 128px;}
.led-more    {margin-top:-6px;}     /* 「+ 항목 추가」로 열린 줄 = 앞 줄과 한 덩어리로 붙여 보이게 */
.led-more[hidden]{display:none;}    /* ⚠️ display:grid가 [hidden]의 UA display:none을 이기므로 명시 필요 */
.led-fg-tax  {grid-template-columns:230px 230px 1fr;}   /* 계산서 처리 · 발행 여부 · 특이사항 */
.led-f{display:block;min-width:0;}
.led-f .field{margin-bottom:0;}
.led-f-add{display:flex;flex-direction:column;}
.led-f-add .chip-btn{width:100%;height:52px;}   /* .field와 같은 높이로 맞춰 바닥선 정렬 */
.led-f-add .chip-btn[hidden]{display:none;}
.led-add{color:var(--accent-ink);font-weight:600;}

/* ── 회사명 자동완성 드롭다운 ─────────────────────────────────
   ⚠️ 부모(.led-f-ac)가 position:relative여야 인풋 바로 아래에 걸린다. */
.led-f-ac{position:relative;}
.led-ac{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  max-height:262px;overflow-y:auto;padding:6px;border-radius:14px;background:var(--bg);
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:6px 6px 16px rgba(var(--shadow),.9), -6px -6px 16px rgba(var(--hilite),.7);}
.led-ac[hidden]{display:none;}
.led-ac-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;padding:10px 13px;border-radius:10px;
  font-family:var(--sans);font-size:14.5px;color:var(--text);}
.led-ac-item:hover,.led-ac-item.on{background:var(--chip);}
.led-ac-item b{font-weight:600;}
.led-ac-item span{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:auto;
  background:var(--chip);padding:2px 8px;border-radius:7px;}
.led-ac-item:hover span,.led-ac-item.on span{background:var(--bg);}
/* 출처 라벨 — 장부 기록이 아니라 업체목록에서 온 후보임을 표시(브랜드가 비어 있는 이유) */
.led-ac-src{font-style:normal;font-family:var(--sans);font-size:11px;color:var(--ph);margin-left:auto;}
.led-ac-item span + .led-ac-src{margin-left:8px;}

/* ── 스킨 목록(admin/skins.php) — 2026-07-29 ───────────────────
   카드 = [썸네일][내용]. 썸네일이 없으면 이니셜 박스로 대체(JS가 깨진 이미지도 여기로 되돌린다). */
.sk-grid{display:flex;flex-direction:column;gap:10px;}
.sk-card{background:var(--bg);border-radius:16px;padding:14px;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:4px 4px 10px rgba(var(--shadow),.7), -4px -4px 10px rgba(var(--hilite),.8);}
.sk-card .sk-editbox{display:none;}
.sk-card.editing .sk-view{display:none;}
.sk-card.editing .sk-editbox{display:block;padding:6px 8px 4px;}
.sk-view{display:flex;gap:16px;align-items:flex-start;}
.sk-thumb{width:132px;height:92px;flex:none;border-radius:11px;overflow:hidden;background:var(--chip);
  display:flex;align-items:center;justify-content:center;}
.sk-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sk-thumb-none span{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--ph);}
.sk-thumb-none img{display:none;}
.sk-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;}
.sk-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.sk-name{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--text);}
.sk-edit{margin-left:auto;}
.sk-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--sans);font-size:12.5px;color:var(--muted);}
.sk-memo{font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.5;}
.sk-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--div-lo);}
.sk-cos{font-family:var(--sans);font-size:12.5px;color:var(--ph);}
.sk-cos.has{color:var(--text);}
.sk-cos strong{font-family:var(--mono);}
.sk-colist{font-family:var(--sans);font-size:12.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sk-foot .chip-btn{margin-left:0;height:34px;padding:0 14px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;text-decoration:none;}
.sk-foot .chip-btn:first-of-type{margin-left:auto;}
.sk-fg4{grid-template-columns:1.4fr 1fr 1fr 1fr;}
.sk-fg3{grid-template-columns:repeat(3,1fr);}
.sk-fg2{grid-template-columns:1fr 1fr;}
@media (max-width:640px){
  .sk-view{flex-direction:column;}
  .sk-thumb{width:100%;height:150px;}
  .sk-fg4,.sk-fg3,.sk-fg2{grid-template-columns:1fr;}
  .sk-foot .chip-btn:first-of-type{margin-left:0;}
  .sk-colist{white-space:normal;}
}

/* ── 세금계산서 발행 요청 양식 모달 ──────────────────────────
   ⚠️ 이 사이트는 http라 navigator.clipboard가 없다 → 복사는 textarea + execCommand가 주 경로.
      그래서 내용은 <pre>가 아니라 **선택 가능한 textarea**여야 한다. */
.led-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;}
.led-modal[hidden]{display:none;}
.led-modal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.led-modal-box{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;gap:14px;padding:24px 26px 22px;border-radius:20px;background:var(--bg);
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:10px 10px 28px rgba(0,0,0,.22), -6px -6px 16px rgba(var(--hilite),.5);}
.led-modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.led-modal-title{font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--text);}
.led-modal-warn{font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--err);
  background:color-mix(in srgb, var(--err) 10%, transparent);padding:11px 14px;border-radius:11px;}
.led-modal-warn[hidden]{display:none;}
.led-modal-warn a{color:var(--accent-ink);font-weight:600;}
.led-modal-text{width:100%;flex:1;min-height:270px;resize:vertical;
  font-family:var(--mono);font-size:13.5px;line-height:1.85;color:var(--field-ink);
  background:var(--field-bg);border:0;border-radius:14px;padding:16px 18px;
  box-shadow:inset 3px 3px 7px rgba(var(--fld-sh),1), inset -3px -3px 7px rgba(var(--fld-hi),1);}
.led-modal-text:focus{outline:none;}
.led-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.led-modal-hint{font-family:var(--sans);font-size:12px;color:var(--muted);}
@media (max-width:640px){
  .led-modal{padding:14px;}
  .led-modal-box{padding:20px 18px 18px;border-radius:16px;}
  .led-modal-text{min-height:230px;font-size:13px;}
  .led-modal-foot{flex-direction:column;align-items:stretch;}
  .led-modal-foot .btn{width:100%;}
}
/* ★날짜 필드 — 값과 달력 아이콘이 붙어 보이던 문제(사용자 지적). 오른쪽 여백 + 아이콘 앞 간격을 준다.
   ⚠️ 다크에서는 UA 기본 달력 아이콘이 검정이라 어두운 필드 위에서 안 보인다 → color-scheme으로 아이콘·팝업을 다크용으로 전환.
      (invert 필터를 같이 걸면 두 번 뒤집혀 다시 검정이 된다 — 둘 중 하나만 쓸 것) */
/* ⚠️ 날짜·시각 필드를 **`.led-f` 밖**에 새로 만들면 이 규칙이 안 걸린다 — 셀렉터에 같이 넣을 것
   (스케줄의 `.su-date`가 그 사례다: 폼이 아니라 경고 줄 안에 있어 따로 붙였다). */
.led-f input[type="date"].field,
.led-f input[type="time"].field,
.su-date{padding-right:14px;}
.led-f input[type="date"].field::-webkit-calendar-picker-indicator,
.led-f input[type="time"].field::-webkit-calendar-picker-indicator,
.su-date::-webkit-calendar-picker-indicator{margin-left:12px;opacity:.65;cursor:pointer;}
.led-f input[type="date"].field::-webkit-calendar-picker-indicator:hover,
.led-f input[type="time"].field::-webkit-calendar-picker-indicator:hover,
.su-date::-webkit-calendar-picker-indicator:hover{opacity:1;}
:root[data-theme="dark"] .led-f input[type="date"].field,
:root[data-theme="dark"] .led-f input[type="time"].field,
:root[data-theme="dark"] .su-date{color-scheme:dark;}

/* ── 연도 탭 (제목 바로 아래) ─────────────────────────────────
   ⚠️ 파라미터 없이 들어오면 **올해**가 켜진다(admin/ledger.php $year). 전체는 y=all.
      해가 바뀌면 기록 0건이어도 올해 탭이 생긴다. */
.led-tabs{display:flex;gap:2px;flex-wrap:wrap;margin:-6px 0 34px;border-bottom:1px solid var(--div-lo);}
.led-tab{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--mono);font-size:14.5px;color:var(--muted);
  padding:11px 17px 13px;margin-bottom:-1px;border-bottom:2px solid transparent;transition:color .2s ease;}
.led-tab:hover{color:var(--text);}
.led-tab.on{color:var(--text);font-weight:600;border-bottom-color:var(--accent);}
.led-tab span{font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--muted);
  background:var(--chip);padding:2px 8px;border-radius:10px;}
.led-tab.on span{background:var(--accent);color:#fff;}
/* ★그룹 소제목 — 필드 라벨(.lbl 13.5px)과 위계가 갈려야 한다(2026-07-29 사용자 지시).
   제목은 굵고 크게, 부연 설명은 **아랫줄로 내려** 정보 톤으로 분리한다(같은 줄에 붙이면 제목이 묻힌다). */
.led-fsub,.form-sub{font-family:var(--sans);font-size:17.5px;font-weight:700;letter-spacing:-.015em;
  color:var(--text);margin:44px 0 5px;}
.led-fnote,.form-note{font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--muted);
  margin:0 0 20px;padding-left:11px;position:relative;line-height:1.5;}
.led-fnote::before,.form-note::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:2px;
  border-radius:2px;background:var(--div-lo);}
/* 업체 생성 폼 — 항목이 많아 접힘 높이를 크게. 행 간격도 매출기록과 같은 24px */
.collapse-lg.open{max-height:1400px;}
.co-fr{margin-bottom:18px;}
.co-fr .field{margin-bottom:0;}
/* 브랜드명 = 업체명 옆 보조 표기 */
.co-brand{font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--muted);
  background:var(--chip);padding:3px 9px;border-radius:7px;margin-left:9px;letter-spacing:.02em;vertical-align:middle;}
@media (max-width:640px){
  .co-fr{flex-direction:column;gap:18px;}
  .collapse-lg.open{max-height:2600px;}
}
/* ★★한 줄에 놓인 버튼은 **높이를 반드시 맞춘다**(2026-07-29 사용자 지시 — 매번 어긋나던 지점).
   기준 높이 = 44px. 위계는 **가로 폭 + 색**으로만 준다(세로로 키우면 줄이 어긋나 보인다). */
.led-fbtns{display:flex;align-items:center;gap:10px;margin-top:30px;}
.led-fbtns > .btn,
.led-fbtns > .chip-btn{height:44px;padding:0 22px;border-radius:999px;font-size:14px;margin:0;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.led-fbtns > .btn.solid{width:auto;min-width:190px;padding:0 52px;}   /* 주 액션만 가로로 넓게 */
.led-fbtns .led-del{margin-left:auto;}   /* 삭제 = 저장/취소와 멀리 떨어뜨려 오클릭 방지 */
.led-num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;}

@media (max-width:640px){
  /* 모바일 = 표가 아니라 세로 카드라 그대로 읽힌다. 그리드만 1열로 접고 숫자를 살짝 줄인다. */
  .led-kpi{grid-template-columns:1fr 1fr;gap:9px;}
  .led-filters{flex-direction:column;gap:10px;}
  .led-search{width:100%;}
  .led-card{padding:15px 16px 16px;border-radius:14px;}
  .led-top{gap:7px;}
  .led-co{font-size:15px;}
  .led-date{font-size:12px;}
  .led-amt{font-size:22px;}
  .led-edit{margin-left:auto;}
  /* 월 소계는 문장이 길다('12건 · 8,204,000원 · 미수 …') — 모바일 section-h의 '정보 칩' 스타일을 풀고 아랫줄로 내린다 */
  .led-month{flex-wrap:wrap;}
  .led-month .muted{background:none;padding:0;margin-left:0;flex-basis:100%;font-size:12.5px;}
  .led-fg-top,.led-fg-amt,.led-fg-co,.led-fg-tax{grid-template-columns:1fr;max-width:none;}
  .led-notes .led-taxreq{margin-left:0;width:100%;}
  /* 「+ 항목 추가」로 열린 줄 — 모바일 1열에선 왼쪽 정렬용 빈 스페이서가 빈 줄이 되므로 숨긴다 */
  .led-more{margin-top:0;}
  .led-more > .led-f[aria-hidden="true"]{display:none;}
  .led-f-add .chip-btn{height:46px;}
  .led-fsub{font-size:18px;margin:38px 0 5px;}
  .led-fg-pay{grid-template-columns:145px 1fr;max-width:none;}   /* 입금은 날짜+금액이 한 줄로 붙어야 읽힌다 */
  .led-collapse.open{max-height:3600px;margin-bottom:44px;}
  .led-fbtns{flex-wrap:wrap;}
  /* ⚠️★탭은 **줄바꿈**한다. 예전엔 가로 스크롤(nowrap+overflow)이었는데 스크롤바를 숨겨둔 탓에
     화면 밖 탭이 **있는지도 모르게 숨었다**(2026-07-29 「내부 계정」 탭이 안 보인다는 지적으로 발견).
     탭은 화면 진입 경로라 하나라도 가려지면 그 기능 자체가 없는 것이 된다 → 무조건 다 보이게 접는다. */
  .led-tabs{flex-wrap:wrap;overflow:visible;margin-bottom:28px;}
  .led-tab{flex:none;padding:10px 13px 12px;font-size:14px;}
  .led-kpi{margin-bottom:32px;}
  .led-month{margin:44px 0 16px;}
}

/* ═══════════════════════════════════════════════════════════════════════
   스케줄 달력 (admin/schedule.php) — 2026-07-29 신설
   ★소스가 둘이다: 수정요청의 완료 목표일(자동) + rev_schedule(수동).
     화면에서는 **같은 모양**으로 그린다 — 색·크기를 다르게 하면 두 종류의 일정으로 읽혀 달력이 갈린다.
     구분은 카드 하단 안내문과 「요청 열기」 버튼뿐이다.
   ⚠️ 여기는 뉴모(soft) 기준이다. PAPER 대응은 아래 PAPER 블록 목록에 `.sch-card`·`.sch-cell`을 넣어 처리한다.
   ═══════════════════════════════════════════════════════════════════════ */
/* 달 이동 줄 — 상태 탭(.led-tabs)과 **줄을 나눈다**. 한 줄에 섞으면 '달'과 '상태' 두 축이 같은 필터로 읽힌다. */
.sch-nav{display:flex;align-items:center;gap:10px;margin:0 0 24px;}
.sch-ym{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:.04em;
  color:var(--text);min-width:104px;text-align:center;}
.sch-today-btn{margin-left:auto;}
.sch-late-n{color:var(--err);font-weight:600;}
.lbl .opt{color:var(--ph);font-size:12px;font-weight:400;margin-left:3px;}

/* ★목표일 없는 진행 건 — 달력에 **아예 못 뜨는** 값이라 경고 톤으로 맨 위에 세운다.
   ⚠️ 상태·검색 필터와 무관하게 항상 보인다(필터에 걸려 사라지면 놓치는 의미가 없어진다). */
.sch-undated{margin:0 0 32px;padding:16px 18px 6px;border-radius:14px;
  background:color-mix(in srgb, var(--c-warn) 9%, transparent);border-left:2.5px solid var(--c-warn);}
.su-head{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text);margin-bottom:13px;}
.su-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:12px;}
.su-name{flex:1;min-width:220px;text-decoration:none;color:var(--text);font-size:13.5px;}
.su-name:hover{color:var(--accent-ink);}
.su-st{font-size:12px;color:var(--muted);white-space:nowrap;}
.su-date{width:158px;margin:0;}
.su-row .chip-btn{height:44px;padding:0 18px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}

/* ── 월 달력 ─────────────────────────────────────────────────
   ⚠️ 날짜 숫자는 **버튼**이다(누르면 그 날짜로 새 일정 폼이 열린다). 링크로 바꾸면 PJAX가 페이지를 새로 부른다. */
.sch-cal{margin:32px 0 10px;}
.sch-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px;}
.sch-dow span{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);text-align:center;padding:4px 0;}
.sch-dow .sun{color:var(--err);}
.sch-dow .sat{color:var(--c-info);}
.sch-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.sch-cell{min-height:114px;padding:7px 7px 9px;border-radius:12px;background:var(--bg);
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:3px 3px 8px rgba(var(--shadow),.6), -3px -3px 8px rgba(var(--hilite),.75);
  display:flex;flex-direction:column;gap:4px;min-width:0;}
.sch-cell.out{opacity:.4;}                              /* 앞뒤 달의 자투리 칸 — 지우지 않고 흐린다(주 단위 흐름이 끊기지 않게) */
.sch-cell.today{border-left:2.5px solid var(--accent);}
/* ★칸 전체가 버튼이다 — 누르면 그 날 전체가 팝업으로 펼쳐진다(칩만 예외로 자기 카드로 점프).
   ⚠️ 날짜 숫자만 눌러야 하는 줄 알면 대부분 못 찾는다 → 칸 어디를 눌러도 열리게 하고 hover로 알린다. */
.sch-cell{cursor:pointer;transition:background-color .16s ease;}
.sch-cell:hover .sch-daynum{background:var(--chip);}
.sch-cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.sch-daynum{align-self:flex-start;padding:2px 6px;border-radius:8px;
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);line-height:1;}
.sch-daynum.sun{color:var(--err);}
.sch-daynum.sat{color:var(--c-info);}
.sch-cell.today .sch-daynum{background:var(--accent);color:#fff;}
/* 칸 안 일정 = 유형 색 칩. ⚠️ 지연(late)은 유형 색을 **덮는다** — 늦었다는 사실이 유형보다 먼저 읽혀야 한다. */
.sch-ev{display:block;text-decoration:none;font-family:var(--sans);font-size:11.5px;line-height:1.35;
  color:#fff;background:var(--c-neutral);padding:3px 7px;border-radius:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sch-ev i{font-style:normal;font-family:var(--mono);opacity:.82;margin-right:4px;}
.sch-ev.k-fix   {background:var(--c-success);}
.sch-ev.k-custom{background:var(--c-progress);}
.sch-ev.k-order {background:var(--c-info);}
.sch-ev.k-event {background:var(--c-warn);}
.sch-ev.late{background:var(--err);}
.sch-ev.done{background:var(--chip);color:var(--muted);text-decoration:line-through;}
.sch-more{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--accent-ink);padding-left:4px;}
.sch-cell:hover .sch-more{text-decoration:underline;}

/* ★주 보기 = **세로 리스트**다(2026-07-29 사용자 지시 — 7열 격자 안).
   일주일은 7칸뿐이라 격자로 그리면 칸만 길쭉해지고 제목은 여전히 잘린다.
   세로로 눕히면 날짜가 왼쪽 기준선이 되고 제목이 한 줄을 다 써서 **그 주에 뭘 하는지가 읽힌다.**
   ⚠️ 월 보기의 칸(.sch-cell)과 다른 구조다 — 공용 클래스로 묶지 말 것(한쪽을 고치면 다른 쪽이 깨진다). */
.sch-week{display:flex;flex-direction:column;gap:6px;margin:32px 0 10px;}
.sw-row{display:flex;align-items:stretch;gap:16px;padding:13px 18px;border-radius:13px;cursor:pointer;
  background:var(--bg);border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:3px 3px 8px rgba(var(--shadow),.6), -3px -3px 8px rgba(var(--hilite),.75);}
.sw-row.today{border-left:2.5px solid var(--accent);}
.sw-row.empty{opacity:.55;}
.sw-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* 날짜 열 = 왼쪽 기준선. 폭을 고정해야 7줄의 제목 시작점이 세로로 맞는다. */
.sw-date{flex:none;width:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-right:1px solid var(--div-lo);padding-right:14px;margin-right:-2px;}
.sw-d{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--text);line-height:1;}
.sw-w{font-family:var(--sans);font-size:11.5px;color:var(--muted);}
.sw-d.sun,.sw-w.sun{color:var(--err);}
.sw-d.sat,.sw-w.sat{color:var(--c-info);}
.sw-row.today .sw-d{color:var(--accent-ink);}
.sw-evs{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center;}
.sw-none{font-family:var(--sans);font-size:13px;color:var(--ph);}
.sw-ev{display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-decoration:none;
  padding:7px 11px;border-radius:9px;background:var(--chip);}
.sw-ev:hover{background:var(--chip-h);}
.sw-ev.late{border-left:2.5px solid var(--err);}
.sw-ev.done{opacity:.6;}
.sw-time{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--muted);
  min-width:40px;flex:none;font-variant-numeric:tabular-nums;}
.sw-title{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--text);}
.sw-ev.done .sw-title{text-decoration:line-through;}
.sw-co{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.sw-ev .sch-state{margin-left:auto;}
/* 보기 전환(월/주/일) = 매출기록의 카드/표 전환과 같은 컨트롤. 기간 이동 줄 오른쪽 끝에 붙인다. */
.sch-seg{margin-left:auto;}
.sch-today-btn{margin-left:0;}

/* ★일 보기 머리 — 격자를 안 그리는 대신 "언제/몇 건/추가"를 한 줄로 준다. */
.sch-dayhead{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:30px 0 8px;
  padding:16px 20px;border-radius:14px;background:var(--chip);}
.sch-dayhead.today{background:color-mix(in srgb, var(--accent) 12%, transparent);}
.sd-date{font-family:var(--mono);font-size:21px;font-weight:600;color:var(--text);letter-spacing:.01em;}
.sd-dow{font-family:var(--sans);font-size:14px;color:var(--muted);}
.sd-n{font-family:var(--sans);font-size:13px;color:var(--muted);}
.sd-n strong{color:var(--text);}
.sch-dayhead .chip-btn{margin-left:auto;height:38px;padding:0 16px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}

/* ★날짜 펼치기 팝업 — 달력 칸은 좁아 잘리므로, 칸을 누르면 그 날 전체를 여기서 읽는다.
   ⚠️★보관함(.sch-dayboxes)의 노드를 **옮겨서** 채운다(복제 금지 — 매출기록 표 수정과 같은 규칙).
      그래서 보관함은 `hidden`이되 display를 flex 등으로 덮어쓰지 말 것(덮으면 [hidden]이 져서 다 보인다). */
.sch-modal .led-modal-box{max-width:680px;}
.sch-modal-list{display:flex;flex-direction:column;gap:7px;overflow-y:auto;max-height:min(58vh,520px);}
.sch-modal-empty{font-family:var(--sans);font-size:13px;color:var(--muted);margin:8px 0 4px;}
.sch-drow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-decoration:none;
  padding:11px 14px;border-radius:11px;background:var(--chip);}
.sch-drow:hover{background:var(--chip-h);}
.sch-drow.late{border-left:2.5px solid var(--err);}
.sch-drow.done{opacity:.62;}
.sd-time{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);
  min-width:42px;flex:none;font-variant-numeric:tabular-nums;}
.sd-title{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--text);}
.sch-drow.done .sd-title{text-decoration:line-through;}
.sd-co{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.sch-drow .sch-state{margin-left:auto;}

/* ── 날짜 구분(리스트) ───────────────────────────────────────── */
.sch-day{display:flex;align-items:center;gap:9px;margin:46px 0 14px;}
.sch-daytag{font-family:var(--sans);font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:8px;}
.sch-daytag.today{color:#fff;background:var(--accent);}
.sch-daytag.past{color:var(--muted);background:var(--chip);}

/* ── 일정 카드 ───────────────────────────────────────────────
   매출기록 카드(.led-card)와 같은 판·같은 그림자다. 목록 화면끼리 밀도가 갈리지 않게 맞춘 것. */
.sch-card{background:var(--bg);border-radius:16px;padding:15px 20px 16px;margin-bottom:9px;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:4px 4px 10px rgba(var(--shadow),.7), -4px -4px 10px rgba(var(--hilite),.8);}
.sch-card.is-late{border-left:2.5px solid var(--err);}   /* 늦은 건만 좌측 라인 — 카드 전체를 물들이지 않는다 */
.sch-card.is-done{opacity:.68;}
.sch-card .sch-editbox{display:none;}
.sch-card.editing .sch-view{display:none;}
.sch-card.editing .sch-editbox{display:block;}

.sch-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.sch-title{font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--text);}
.sch-card.is-done .sch-title{text-decoration:line-through;}
.sch-state{font-family:var(--sans);font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:8px;
  white-space:nowrap;margin-left:auto;}
.sch-state.s-plan {color:var(--c-info);    background:color-mix(in srgb, var(--c-info) 15%, transparent);}
.sch-state.s-doing{color:var(--c-done);    background:color-mix(in srgb, var(--c-success) 16%, transparent);}
.sch-state.s-done {color:var(--muted);     background:var(--chip);}
.sch-state.s-hold {color:var(--c-neutral); background:color-mix(in srgb, var(--c-neutral) 18%, transparent);}
/* 같은 줄 버튼 = 같은 높이(카드 내부 인라인 액션 34px — 전역 규칙) */
.sch-top .chip-btn,
.sch-foot .chip-btn{height:34px;padding:0 14px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}

.sch-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px 12px;margin-top:12px;
  font-family:var(--sans);font-size:12.5px;color:var(--muted);}
.sch-due{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--text);
  background:var(--chip);padding:4px 10px;border-radius:8px;white-space:nowrap;}
.sch-due.late{color:var(--err);}
.sch-dday{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;}
.sch-dday.near{color:var(--err);}
/* ★약속 내용 = 나중에 "뭘 해주기로 했더라"를 확인하는 칸. 메타와 섞이지 않게 판을 깔아 분리한다. */
.sch-body{font-family:var(--sans);font-size:13px;line-height:1.65;color:var(--text);
  margin-top:13px;padding:11px 14px;border-radius:10px;background:var(--chip);}
.sch-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:13px;
  padding-top:12px;border-top:1px solid var(--div-lo);}
.sch-note{font-family:var(--sans);font-size:12px;color:var(--muted);}
.sch-quick{margin:0 0 0 auto;display:flex;align-items:center;}

/* ── 입력 폼 ─────────────────────────────────────────────────
   행 간격·버튼 줄은 매출기록 폼(.led-fgrid/.led-fbtns)을 그대로 쓴다. 열 배분만 여기서 잡는다. */
.sch-fg3{grid-template-columns:repeat(3,1fr);max-width:760px;}
.sch-fg-what{grid-template-columns:2fr 1fr 1fr;max-width:760px;}   /* 제목이 제일 길다 */
.sch-f-body{display:block;max-width:760px;margin-bottom:6px;}
.sch-form textarea.field{min-height:112px;resize:vertical;line-height:1.6;}

@media (max-width:640px){
  .sch-nav{flex-wrap:wrap;gap:8px;}
  .sch-ym{min-width:82px;font-size:17px;}
  /* 달력은 7열을 유지한다 — 열을 접으면 '주' 구조가 사라져 달력이 아니게 된다.
     대신 칸을 줄이고 글자를 작게: 상세는 아래 리스트에서 읽는 구조다. */
  .sch-dow{gap:3px;}
  .sch-dow span{font-size:11px;}
  .sch-grid{gap:3px;}
  .sch-cell{min-height:76px;padding:4px 3px 6px;border-radius:9px;gap:3px;}
  .sch-daynum{font-size:11.5px;padding:1px 4px;}
  .sch-ev{font-size:9.5px;padding:2px 4px;border-radius:4px;}
  .sch-ev i{display:none;}          /* 칸이 좁아 시각까지는 못 넣는다 — 리스트 카드에서 읽는다 */
  .sch-more{font-size:9.5px;}
  .sch-card{padding:14px 15px 15px;border-radius:14px;}
  .sch-title{font-size:14.5px;}
  .sch-state{margin-left:0;}
  .sch-quick{margin-left:0;width:100%;}
  .sch-fg3,.sch-fg-what{grid-template-columns:1fr;}
  .su-row{flex-direction:column;align-items:stretch;}
  .su-date{width:100%;}
  .su-name{min-width:0;}
  /* 보기 전환은 기간 이동 아래로 내린다(한 줄에 5개는 안 들어간다) */
  .sch-seg{margin-left:0;width:100%;justify-content:center;}
  .sch-today-btn{margin-left:auto;}
  /* 주 보기(세로 리스트)는 모바일에서 오히려 자연스럽다 — 날짜 열만 좁히고 줄바꿈을 허용한다 */
  .sw-row{padding:11px 13px;gap:11px;}
  .sw-date{width:40px;padding-right:10px;}
  .sw-d{font-size:17px;}
  .sw-ev{gap:7px;padding:7px 9px;}
  .sw-time{min-width:34px;}
  .sw-title{font-size:12.5px;}
  .sw-ev .sch-state{margin-left:0;}
  .sch-dayhead{padding:14px 15px;gap:8px;}
  .sd-date{font-size:18px;}
  .sch-dayhead .chip-btn{margin-left:0;width:100%;height:44px;}
  .sch-drow{gap:7px;padding:10px 12px;}
  .sd-time{min-width:36px;font-size:11.5px;}
  .sd-title{font-size:13px;}
  .sch-drow .sch-state{margin-left:0;}
  .sch-modal-list{max-height:min(52vh,420px);}
}

/* ═══════════════════════════════════════════════════════════════════════
   스킨: PAPER (플랫 · 페이퍼/블랙/오렌지) — 2026-07-23 신설
   루트 브랜드(brand.php)의 --paper #faf9f7 / --ink #131211 / --signal #f15a24 를 가져와 통일감.
   전략: ① 토큰 리매핑(색) ② 뉴모 그림자 무력화(--shadow/--hilite/--light/--dark를 페이퍼색으로 → 오프셋 그림자가
         페이퍼 배경에 묻혀 '플랫') ③ 패널·컨트롤에 실선 풀보더로 섹션 구분 ④ 폰트 살짝 키움 + 오렌지 강조.
   ⚠️ 다크 블록보다 **뒤**에 있어야 data-theme=dark와 겹칠 때 스킨이 이긴다(동일 특이도 → 나중 규칙 승).
   ⚠️ ★첫 패스다 — 가독성·통일성 위주로 주요 표면만 손봤다. 세부는 실제 화면 보며 다듬을 것.
   (v2에서 웜페이퍼+흰카드+큰폰트로 강화했다가 2026-07-23 사용자 지시로 이 v1으로 되돌림.) */
:root[data-skin="paper"]{
  --bg:#f2f2ef; --light:#f2f2ef; --dark:#f2f2ef;          /* ★캔버스 = 옅은 뉴트럴 오프화이트(웜기 절반만, 페이지+컨텐츠 통합). 카드는 #f9f9f9. 2026-07-25 */
  --shadow:242,242,239; --hilite:242,242,239;              /* 뉴모 box-shadow 소멸(배경색이 배경 위에) — bg 바뀌면 여기도 맞춰야 플랫 유지 */
  --fld-sh:242,242,239; --fld-hi:242,242,239; --bg-rgb:242,242,239;
  --text:#131211;                                          /* ink */
  --field-bg:#ffffff; --field-ink:#131211;                /* 필드=순백 */
  --muted:#6f6c67;
  --title-ink:#131211; --ph:#a6a29b;
  --edge-hi:#f2f2ef; --edge-lo:#d7d5cf;                    /* ★edge-hi=배경(투명, 반쪽 보더 제거) · edge-lo=카드 경계 실보더(짙고 뉴트럴) */
  --div-lo:#e2e1dd; --div-hi:#eeeeea;                      /* 구분선 — 뉴트럴 */
  --chip:#ededea; --chip-h:#e6e5e1;                        /* 칩(필터·D-day·토글트랙) — 뉴트럴 */
  --link:#131211; --link-h:#f15a24;
  --logo-ink:#131211; --logo-fill:#131211;
  --accent:#f15a24; --accent-ink:#d34816; --brand-signal:#f15a24; --err:#c0492a;
}
/* 섹션 구분 = 실선 풀보더 + **그림자 전부 제거(플랫)**.
   ⚠️ 뉴모 '볼록 카드' 패턴을 쓰는 요소 전부 — 카드는 흰 컨텐츠 위라 색트릭만으론 그림자가 남아 box-shadow:none 명시. */
:root[data-skin="paper"] .shell .wrap,
:root[data-skin="paper"] .panel,
:root[data-skin="paper"] .side-id,
:root[data-skin="paper"] .side-nav,
:root[data-skin="paper"] .side-index,
:root[data-skin="paper"] .kpi,
:root[data-skin="paper"] .msg-tile,
:root[data-skin="paper"] .msg-grid > a,
:root[data-skin="paper"] .set-card,
:root[data-skin="paper"] .feed-card,
:root[data-skin="paper"] .rush-card,
:root[data-skin="paper"] .row-link,
:root[data-skin="paper"] .item-card,
:root[data-skin="paper"] .bill-card,
:root[data-skin="paper"] .more-btn,
:root[data-skin="paper"] .submit-bar,
:root[data-skin="paper"] .quote-summary,
:root[data-skin="paper"] .log-day,
:root[data-skin="paper"] .led-card,
:root[data-skin="paper"] .sk-card,
:root[data-skin="paper"] .sch-card,
:root[data-skin="paper"] .sch-cell,
:root[data-skin="paper"] .sw-row,
:root[data-skin="paper"] .resp-hours{ border:1px solid var(--edge-lo); box-shadow:none; }
/* 지연·오늘 라인은 평면 보더로 덮이므로 다시 살린다(순서로 위 규칙을 이김) */
:root[data-skin="paper"] .sch-card.is-late{ border-left:2.5px solid var(--err); }
:root[data-skin="paper"] .sch-cell.today{ border-left:2.5px solid var(--accent); }
:root[data-skin="paper"] .sw-row.today{ border-left:2.5px solid var(--accent); }
/* 총계 바는 떠 있는 면이라 플랫에서도 위쪽 그림자는 남긴다(안 그러면 스크롤되는 카드와 겹쳐 붙어 보인다) */
:root[data-skin="paper"] .led-total{ background:#f9f9f9; border:1px solid var(--edge-lo);
  box-shadow:0 -8px 20px rgba(0,0,0,.07); }
:root[data-skin="paper"] .rank-item{ background:#f9f9f9; border:1px solid var(--edge-lo); box-shadow:none; }
:root[data-skin="paper"] .ltab-wrap{ background:#f9f9f9; }
:root[data-skin="paper"] .ltab th.ed,:root[data-skin="paper"] .ltab td.ed{ background:#f9f9f9; }
:root[data-skin="paper"][data-theme="dark"] .ltab th.ed,
:root[data-skin="paper"][data-theme="dark"] .ltab td.ed{ background:#2a2925; }
:root[data-skin="paper"] .ltab-mbox{ background:#f9f9f9; border:1px solid var(--edge-lo); }
:root[data-skin="paper"][data-theme="dark"] .ltab-mbox{ background:#2a2925; }
:root[data-skin="paper"] .view-seg .vs.on{ background:#f9f9f9; border:1px solid var(--edge-lo); box-shadow:none; }
:root[data-skin="paper"][data-theme="dark"] .ltab-wrap{ background:#2a2925; }
:root[data-skin="paper"][data-theme="dark"] .view-seg .vs.on{ background:#37362f; }
:root[data-skin="paper"][data-theme="dark"] .rank-item{ background:#2a2925; }

:root[data-skin="paper"][data-theme="dark"] .led-total{ background:#2a2925; box-shadow:0 -8px 20px rgba(0,0,0,.45); }
/* 자동완성 드롭다운 — 플랫에서도 떠 있는 면이라 보더 + 옅은 그림자는 남긴다(안 그러면 배경에 묻힌다) */
:root[data-skin="paper"] .led-ac{ background:#f9f9f9; border:1px solid var(--edge-lo);
  box-shadow:0 6px 18px rgba(0,0,0,.09); }
:root[data-skin="paper"][data-theme="dark"] .led-ac{ background:#2a2925; box-shadow:0 6px 18px rgba(0,0,0,.5); }
:root[data-skin="paper"] .led-modal-box{ background:#f9f9f9; border:1px solid var(--edge-lo); box-shadow:0 14px 40px rgba(0,0,0,.2); }
:root[data-skin="paper"] .led-modal-text{ background:var(--field-bg); border:1px solid var(--edge-lo); box-shadow:none; }
:root[data-skin="paper"][data-theme="dark"] .led-modal-box{ background:#2a2925; box-shadow:0 14px 40px rgba(0,0,0,.6); }
/* 미수 카드의 좌측 경고 라인은 평면 보더로 덮이므로 다시 살린다(특이도·순서로 위 규칙을 이김) */
:root[data-skin="paper"] .led-card.has-due{ border-left:2.5px solid var(--c-warn); }
/* ★컨텐츠 영역 = 화이트 (페이지 배경과 분리) */
:root[data-skin="paper"] .shell .wrap{ background:#f2f2ef; }   /* 2026-07-25 컨텐츠=캔버스와 통합(옅은 뉴트럴). 카드는 #f9f9f9로 분리 */
/* ★카드 배경 = 페이지보다 **더 옅은** 톤(흰 컨텐츠 위에서 은은히 구분) */
:root[data-skin="paper"] .panel,
:root[data-skin="paper"] .kpi,
:root[data-skin="paper"] .msg-tile,
:root[data-skin="paper"] .msg-grid > a,
:root[data-skin="paper"] .set-card,
:root[data-skin="paper"] .feed-card,
:root[data-skin="paper"] .rush-card,
:root[data-skin="paper"] .row-link,
:root[data-skin="paper"] .item-card,
:root[data-skin="paper"] .bill-card,
:root[data-skin="paper"] .more-btn,
:root[data-skin="paper"] .submit-bar,
:root[data-skin="paper"] .quote-summary,
:root[data-skin="paper"] .led-card,
:root[data-skin="paper"] .sk-card,
:root[data-skin="paper"] .sch-card,
:root[data-skin="paper"] .sch-cell,
:root[data-skin="paper"] .sw-row,
:root[data-skin="paper"] .log-day{ background:#f9f9f9; }   /* 2026-07-25 카드=#f9f9f9 미색(옅은 캔버스 위에서 분리) */
/* 컨트롤(버튼·필드·칩) = 플랫 보더 + **그림자 제거**(인풋 이너섀도우 포함) */
:root[data-skin="paper"] .btn,
:root[data-skin="paper"] .chip-btn,
:root[data-skin="paper"] .field,
:root[data-skin="paper"] select.field,
:root[data-skin="paper"] textarea.field,
:root[data-skin="paper"] .qr-note,
:root[data-skin="paper"] .rush-btn,
:root[data-skin="paper"] .online-btn,
:root[data-skin="paper"] .skin-select,
:root[data-skin="paper"] .theme-toggle,
:root[data-skin="paper"] .side-id-out,
:root[data-skin="paper"] .side-nav a,
:root[data-skin="paper"] .qr-cat,
:root[data-skin="paper"] .qr-label,
:root[data-skin="paper"] .qr-amt,
:root[data-skin="paper"] .qr-rush,
:root[data-skin="paper"] .block-title .link{ border:1px solid var(--edge-lo); box-shadow:none; }
/* 뉴모 인셋에만 의존해 페이퍼에서 사라지던 컨트롤 보정 — 견적항목 목록(.ci)·항목상태(.ist)·미배정연결(.ua-select).
   select 화살표(background-image) 유지 위해 background 단축이 아닌 background-color 사용. 변수 기반이라 라이트·다크 자동 대응. */
:root[data-skin="paper"] .ci,
:root[data-skin="paper"] select.ci,
:root[data-skin="paper"] .ist,
:root[data-skin="paper"] .ua-select,
:root[data-skin="paper"] .copy-row input,
:root[data-skin="paper"] .add-member input{ background-color:var(--field-bg); border:1px solid var(--edge-lo); box-shadow:none; }
/* 업체상세 담당자 행(.member-item)도 뉴모 인셋 의존 → 페이퍼에서 실선 보더 카드로(라이트/다크) */
:root[data-skin="paper"] .member-item{ background:#f9f9f9; border:1px solid var(--edge-lo); box-shadow:none; }
:root[data-skin="paper"][data-theme="dark"] .member-item{ background:#2a2925; }
/* ★사이드바 메뉴 버튼 = 캔버스(#f2f2ef)보다 밝고 활성(#f9f9f9)보다 어두운 중간 톤 · 활성 = 카드와 동일 + 오렌지 보더/텍스트 */
:root[data-skin="paper"] .side-nav a{ background:#f6f6f4; font-size:15.5px; }   /* 2026-07-25 비활성 = 캔버스<이것<활성 사이 톤 */
:root[data-skin="paper"] .side-nav a.on{ background:#f9f9f9; border-color:var(--accent); color:var(--accent-ink); }
/* 주요 버튼 = 솔리드 오렌지 · 카드 hover = 오렌지 보더 */
:root[data-skin="paper"] .btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
/* 페이퍼는 플랫 — 뉴모 상/하 하이라이트 라인 제거(주 버튼 위 밝은 선이 볼록해 보이던 문제) */
:root[data-skin="paper"] .btn::before,
:root[data-skin="paper"] .btn::after{ display:none; }
:root[data-skin="paper"] .kpi:hover,
:root[data-skin="paper"] .msg-tile:hover,
:root[data-skin="paper"] .set-card:hover{ border-color:var(--accent); }
/* ★다크 토글 — 페이퍼(플랫)에선 뉴모 음영이 사라져 트랙·노브가 안 보인다. 평면 트랙+노브로 재구성(라이트/다크 공통, 변수로 자동 적응).
   off = chip 트랙 + 흰 노브(좌) · on(다크) = 오렌지 트랙 + 흰 노브(우) */
:root[data-skin="paper"] .theme-toggle .tt-sw{ background:var(--chip); border:1px solid var(--edge-lo); box-shadow:none; }
:root[data-skin="paper"] .theme-toggle[aria-checked="true"] .tt-sw{ background:var(--accent); border-color:var(--accent); }
:root[data-skin="paper"] .theme-toggle .tt-knob{ background:#fff; border:1px solid var(--edge-lo); box-shadow:none; }
:root[data-skin="paper"] .theme-toggle[aria-checked="true"] .tt-knob{ border-color:var(--accent); }
/* 대화창 — 플랫 스킨에선 박스가 배경에 묻히지 않게 보더(버블 색은 --chip/--bg로 라이트·다크 자동 대응) */
:root[data-skin="paper"] .chat-box{ border:1px solid var(--edge-lo); }
/* 마감 임박 리스트 — 평면화 목록에서 누락돼 뉴모 음영이 남아 처리대기(.row-link)와 달라 보였음. 동일 평면 스타일로 통일(2026-07-24) */
:root[data-skin="paper"] .due-item{ background:#f9f9f9; border:1px solid var(--edge-lo); box-shadow:none; }
:root[data-skin="paper"] .due-dday{ background:var(--chip); border:1px solid var(--edge-lo); box-shadow:none; }
/* 필터 칩 — 평면화에서 누락돼 뉴모 음영이 남아 선택/미선택이 안 구분됐음. 미선택=평면 보더칩 / 선택=오렌지 필로 대비 확보(2026-07-24) */
:root[data-skin="paper"] .filter{ background:var(--chip); border:1px solid var(--edge-lo); box-shadow:none; color:#4a4843; font-weight:500; }   /* 라벨=부드러운 다크 그레이(muted 너무 흐림 / 순잉크 너무 짙음의 중간) */
:root[data-skin="paper"] .filter:hover{ background:var(--chip-h); }
:root[data-skin="paper"] .filter span{ background:#fff; border:none; box-shadow:none; color:var(--muted); }   /* 숫자 배지=흰 동그라미(선 없음) */
/* 상태별 필터(카운트>0) — 칩 배경 = 상태색의 옅고 차분한(저채도) 톤. color-mix 흰틴트가 형광끼 나서 명시 컬러코드로 직접 지정. 아래 리스트 상태 점과 같은 색 계열로 매칭 */
:root[data-skin="paper"] .filter.bs-submitted{ background:#cddfe1; border-color:#b3cbce; }        /* 접수=더스티 틸 */
:root[data-skin="paper"] .filter.bs-quoting{ background:#eae0bd; border-color:#d8cca2; }          /* 견적산정=더스티 골드 */
:root[data-skin="paper"] .filter.bs-quoted{ background:#e0d9ec; border-color:#cbc1dd; }           /* 견적발송=더스티 라벤더 */
:root[data-skin="paper"] .filter.bs-approving{ background:#eed9e1; border-color:#dcbfcb; }        /* 승인=더스티 로즈 */
:root[data-skin="paper"] .filter.bs-awaiting_payment{ background:#f2d9c6; border-color:#e6c6ab; } /* 입금대기=더스티 테라코타 */
:root[data-skin="paper"] .filter.bs-in_progress{ background:#d2dcec; border-color:#b8c6de; }      /* 작업중=더스티 슬레이트블루 */
:root[data-skin="paper"] .filter.bs-done{ background:#d3e2cd; border-color:#b9d0b1; }             /* 완료=더스티 세이지그린 */
:root[data-skin="paper"] .filter.bs-canceled,
:root[data-skin="paper"] .filter.bs-hold{ background:#e1e1dc; border-color:#cfcfc9; }             /* 취소·보류=그레이 */
/* 숫자 = 블랙 계열(굵게) */
:root[data-skin="paper"] .filter.has span{ color:#3a3835; font-weight:700; }
/* 숫자 배지 동그라미 = 칩보다 밝은 동일 상태색 계열(옅게) */
:root[data-skin="paper"] .filter span.bs-submitted{ background:#e6f0f1; }        /* 틸 */
:root[data-skin="paper"] .filter span.bs-quoting{ background:#f6f0dd; }          /* 골드 */
:root[data-skin="paper"] .filter span.bs-quoted{ background:#f0ecf7; }           /* 라벤더 */
:root[data-skin="paper"] .filter span.bs-approving{ background:#f9ecf1; }        /* 로즈 */
:root[data-skin="paper"] .filter span.bs-awaiting_payment{ background:#faece0; } /* 테라코타 */
:root[data-skin="paper"] .filter span.bs-in_progress{ background:#eaeff7; }      /* 슬레이트블루 */
:root[data-skin="paper"] .filter span.bs-done{ background:#ecf3e8; }             /* 세이지그린 */
:root[data-skin="paper"] .filter span.bs-canceled,
:root[data-skin="paper"] .filter span.bs-hold{ background:#f2f2ee; }             /* 그레이 */
/* 카운트 0(대기 없음) 필터는 차분히 물러나게 — specificity로 위 상태색을 눌러 이김 */
:root[data-skin="paper"] .filter:not(.has):not(.on){ background:#f4f4f2; border-color:var(--edge-lo); color:var(--ph); }
:root[data-skin="paper"] .filter:not(.has):not(.on) span{ background:#fff; color:var(--ph); }
:root[data-skin="paper"] .filter.on{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:none; }
:root[data-skin="paper"] .filter.on span{ background:rgba(255,255,255,.22); border-color:transparent; color:#fff; box-shadow:none; }
/* ★폰트 전체 +1~2px (가독) */
:root[data-skin="paper"] .block-title,
:root[data-skin="paper"] .section-h,
:root[data-skin="paper"] .panel-title{ font-size:17px; }
:root[data-skin="paper"] .panel-desc{ font-size:15px; }
:root[data-skin="paper"] .lbl{ font-size:15px; }
:root[data-skin="paper"] .field,
:root[data-skin="paper"] select.field,
:root[data-skin="paper"] textarea.field{ font-size:15.5px; }
:root[data-skin="paper"] .kpi-num{ font-size:25px; }
:root[data-skin="paper"] .kpi-label{ font-size:14px; }
:root[data-skin="paper"] .page-head{ margin-bottom:30px; }
/* ★활동 로그 — 페이퍼(플랫)에서 검색/셀렉트·로그 행이 뉴모 그림자에만 의존해 영역이 사라지던 것 보정.
   변수 기반이라 라이트·다크 자동 대응(단, 카드 배경 #f9f9f9는 라이트 전용 → 아래 다크 블록에서 재지정). (2026-07-27) */
:root[data-skin="paper"] .lf-search,
:root[data-skin="paper"] .lf-select{ background-color:var(--field-bg); border:1px solid var(--edge-lo); box-shadow:none; }
:root[data-skin="paper"] .log-item,
:root[data-skin="paper"] .mem-row{ background:#f9f9f9; border:1px solid var(--edge-lo); box-shadow:none; }
:root[data-skin="paper"] .log-day-n{ background:var(--chip); border:1px solid var(--edge-lo); box-shadow:none; }

/* ═══ 스킨 PAPER — 다크 모드 (data-skin=paper + data-theme=dark) ══════════════
   페이퍼 스킨의 어두운 버전. 밝기 관계는 라이트와 동일(페이지 < 카드 < 컨텐츠), 톤만 다크.
   ⚠️ 선택자에 [data-theme="dark"]가 하나 더 붙어 라이트 페이퍼(속성 1개)보다 특이도가 높다 → 다크 우선 적용. */
:root[data-skin="paper"][data-theme="dark"]{
  --bg:#22221f; --light:#22221f; --dark:#22221f;          /* 페이지 = 웜 다크(가장 어두운 면). 그림자 소멸 */
  --shadow:34,34,31; --hilite:34,34,31;
  --fld-sh:34,34,31; --fld-hi:34,34,31; --bg-rgb:34,34,31;
  --text:#e9e8e1;
  --field-bg:#2a2925; --field-ink:#f3f2ec;
  --muted:#a3a099;
  --title-ink:#e9e8e1; --ph:#7d7a72;
  --edge-hi:#22221f; --edge-lo:#3d3c36;                    /* edge-hi=페이지(투명, 반쪽 보더 제거) · edge-lo=다크 실보더 */
  --div-lo:#35342e; --div-hi:#2c2b26;
  --chip:#2f2e29; --chip-h:#38372f;
  --link:#e9e8e1; --link-h:#ff7a45;
  --logo-ink:#e9e8e1; --logo-fill:#e9e8e1;
  --accent:#ff7a45; --accent-ink:#ff9a70; --brand-signal:#f15a24; --err:#d97a63;
}
/* 하드코딩된 라이트 배경들의 다크 대응(페이지 < 카드 < 컨텐츠 순서 유지) */
:root[data-skin="paper"][data-theme="dark"] .shell .wrap{ background:#2f2e29; }   /* 컨텐츠 = 가장 밝은 표면 */
:root[data-skin="paper"][data-theme="dark"] .panel,
:root[data-skin="paper"][data-theme="dark"] .kpi,
:root[data-skin="paper"][data-theme="dark"] .msg-tile,
:root[data-skin="paper"][data-theme="dark"] .msg-grid > a,
:root[data-skin="paper"][data-theme="dark"] .set-card,
:root[data-skin="paper"][data-theme="dark"] .feed-card,
:root[data-skin="paper"][data-theme="dark"] .rush-card,
:root[data-skin="paper"][data-theme="dark"] .row-link,
:root[data-skin="paper"][data-theme="dark"] .item-card,
:root[data-skin="paper"][data-theme="dark"] .bill-card,
:root[data-skin="paper"][data-theme="dark"] .more-btn,
:root[data-skin="paper"][data-theme="dark"] .submit-bar,
:root[data-skin="paper"][data-theme="dark"] .quote-summary,
:root[data-skin="paper"][data-theme="dark"] .due-item,
:root[data-skin="paper"][data-theme="dark"] .log-item,
:root[data-skin="paper"][data-theme="dark"] .mem-row,
:root[data-skin="paper"][data-theme="dark"] .led-card,
:root[data-skin="paper"][data-theme="dark"] .sk-card,
:root[data-skin="paper"][data-theme="dark"] .sch-card,
:root[data-skin="paper"][data-theme="dark"] .sch-cell,
:root[data-skin="paper"][data-theme="dark"] .sw-row,
:root[data-skin="paper"][data-theme="dark"] .log-day{ background:#2a2925; }
:root[data-skin="paper"][data-theme="dark"] .side-nav a{ background:#2a2925; }
:root[data-skin="paper"][data-theme="dark"] .side-nav a.on{ background:#37362f; }   /* 활성 = 한 톤 밝게(라이트의 화이트 대응) */
:root[data-skin="paper"][data-theme="dark"] .skin-select option{ color:#e9e8e1; background:#2a2925; }
/* ★페이퍼 다크 — 상태 필터 칩(라이트 파스텔이 새어 near-black 위에서 눈부시던 것 차단). 색상(hue) 유지·명도만 다크로 (2026-07-27) */
:root[data-skin="paper"][data-theme="dark"] .filter{ background:var(--chip); border-color:var(--edge-lo); color:#cbc9c1; }
:root[data-skin="paper"][data-theme="dark"] .filter:hover{ background:var(--chip-h); }
:root[data-skin="paper"][data-theme="dark"] .filter span{ background:rgba(255,255,255,.09); color:#cbc9c1; }
:root[data-skin="paper"][data-theme="dark"] .filter.bs-submitted{ background:#26383a; border-color:#37504f; }
:root[data-skin="paper"][data-theme="dark"] .filter.bs-quoting{ background:#3a3421; border-color:#524a30; }
:root[data-skin="paper"][data-theme="dark"] .filter.bs-quoted{ background:#322c40; border-color:#463d57; }
:root[data-skin="paper"][data-theme="dark"] .filter.bs-approving{ background:#3a2b32; border-color:#523c46; }
:root[data-skin="paper"][data-theme="dark"] .filter.bs-awaiting_payment{ background:#3d2e23; border-color:#553f2f; }
:root[data-skin="paper"][data-theme="dark"] .filter.bs-in_progress{ background:#28303f; border-color:#3a445a; }
:root[data-skin="paper"][data-theme="dark"] .filter.bs-done{ background:#2b3a29; border-color:#3d5139; }
:root[data-skin="paper"][data-theme="dark"] .filter.bs-canceled,
:root[data-skin="paper"][data-theme="dark"] .filter.bs-hold{ background:#33322c; border-color:#47463d; }
:root[data-skin="paper"][data-theme="dark"] .filter.has{ color:#ecebe4; }
:root[data-skin="paper"][data-theme="dark"] .filter.has span{ color:#f2f1ea; font-weight:700; }
:root[data-skin="paper"][data-theme="dark"] .filter span.bs-submitted{ background:#31474a; }
:root[data-skin="paper"][data-theme="dark"] .filter span.bs-quoting{ background:#4a4229; }
:root[data-skin="paper"][data-theme="dark"] .filter span.bs-quoted{ background:#3f3752; }
:root[data-skin="paper"][data-theme="dark"] .filter span.bs-approving{ background:#4a3640; }
:root[data-skin="paper"][data-theme="dark"] .filter span.bs-awaiting_payment{ background:#4d3a2c; }
:root[data-skin="paper"][data-theme="dark"] .filter span.bs-in_progress{ background:#333d50; }
:root[data-skin="paper"][data-theme="dark"] .filter span.bs-done{ background:#354a31; }
:root[data-skin="paper"][data-theme="dark"] .filter span.bs-canceled,
:root[data-skin="paper"][data-theme="dark"] .filter span.bs-hold{ background:#3f3e37; }
:root[data-skin="paper"][data-theme="dark"] .filter:not(.has):not(.on){ background:#262521; border-color:var(--edge-lo); color:var(--ph); }
:root[data-skin="paper"][data-theme="dark"] .filter:not(.has):not(.on) span{ background:rgba(255,255,255,.05); color:var(--ph); }
/* 활성(on) 필터 = 오렌지 강조 재지정 — 위 일반 .filter 규칙(동률 특이도·뒤 위치)이 base의 .filter.on을 덮던 것 복구 */
:root[data-skin="paper"][data-theme="dark"] .filter.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
:root[data-skin="paper"][data-theme="dark"] .filter.on span{ background:rgba(255,255,255,.22); color:#fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   모바일 (≤640px) — 앱 스타일 셸 (2026-07-25)
   · 상단: 로고만 작게 좌상단 + 스크롤 따라 사라짐(고정 X). 급행·접속=우상단 작게 고정(색 배경·흰 숫자)
   · 좌측 사이드바 = 햄버거로 여는 좌측 드로어(오프캔버스)
   · 하단 GNB(앱바) = 메뉴·홈·모드·설정
   ═══════════════════════════════════════════════════════════════════════════ */
.mgnb{display:none;}                        /* 데스크톱 기본 숨김 */
.m-safari-tint{display:none;}               /* 데스크톱 기본 숨김 */
.nav-scrim[hidden]{display:none;}
.nav-scrim{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}

@media (max-width:640px){
  /* ── 상단 헤더: 고정 해제(콘텐츠와 함께 스크롤) · 로고 좌상단 크게, 최상단 밀착 ── */
  body{padding-top:0;}                       /* 데스크톱 고정헤더용 138px 여백 제거 → 로고가 최상단에 붙음 */
  .topbrand{position:static;padding:20px 18px 26px;}   /* 하단 26px = 로고 아래 여백(사용자: 더 주기) */
  .top-scrim{display:none;}
  .brand-sub{display:none;}
  .brand-col{align-items:center;gap:0;}
  .lockup{width:172px;}                       /* 128 → 172(전체적으로 키움) */
  .lockup .care-t{font-size:14px;}            /* CARE는 절대px라 로고 축소 시 넘침 → 폭 비례로 축소(19×172/235≈14) */
  /* 테마·스킨 컨트롤은 하단 GNB로 이동 → 헤더에서 숨김 */
  .topbar-right .theme-toggle,
  .topbar-right .skin-select{display:none;}
  /* ── 급행·접속 = 우상단 작게 고정. 텍스트 제거·색 배경·흰 숫자 ── */
  .rush-btn,.online-btn{transform:none;margin:0;height:auto;min-width:0;padding:0;border:0;
    box-shadow:none;background:transparent;gap:0;font-size:0;letter-spacing:0;}
  .online-wrap{position:fixed;top:34px;right:16px;z-index:60;}   /* top=로고 세로중심에 맞춤(로고 padding-top 20 + 높이 ½) */
  .rush-btn{position:fixed;top:34px;right:58px;z-index:60;}
  .rb-dot,.ob-dot{display:none;}
  .rush-btn .rb-num,.online-btn .ob-num{width:30px;height:30px;min-width:30px;padding:0;
    border-radius:50%;box-shadow:none;font-size:12px;color:#fff;}
  .rush-btn .rb-num{background:#e5392c;}   /* 급행 = 선명한 알림 레드(--err은 어두운 벽돌색이라 배지엔 흐림) */
  .online-btn .ob-num{background:var(--c-neutral);}
  .online-btn.has .ob-num{background:var(--c-success);}
  .online-drop{position:fixed;top:50px;right:12px;left:12px;width:auto;max-height:60vh;}
  /* ── 셸: 1단 · 사이드바는 숨김(메뉴는 전체 오버레이로 내용만 복제해 표시) ── */
  .shell{display:block;padding:0 14px;}
  .sidebar{display:none;}
  /* 모바일 = 사이드바 없음 → 콘텐츠를 별도 패널로 감싸지 않고 페이지 배경 위에 넓게(뉴모 볼록·페이퍼 보더 제거) */
  /* ★하단 GNB 클리어런스는 컨텐츠 컨테이너(.wrap)에 직접 준다 — body padding-bottom이 스크롤 여백으로
     온전히 안 먹는 기기 대비. GNB(4+60=64) + 여백 + safe-area 만큼 확보해 마지막 콘텐츠가 GNB에 안 가리게 */
  .shell .wrap,
  :root[data-skin="paper"] .shell .wrap,
  :root[data-skin="paper"][data-theme="dark"] .shell .wrap{
    background:transparent;border:0;box-shadow:none;border-radius:0;
    padding:20px 0 calc(96px + env(safe-area-inset-bottom,0));}
  body{padding-bottom:0;}   /* 클리어런스는 .wrap이 담당(중복 여백 제거) */
  .botfoot{display:none;}
  /* 사파리 하단 툴바 tint 끄기 — 바닥 3px 이내 fixed 요소를 '투명'으로 두면 사파리가 투명을 읽어 툴바에 배경색을 입히지 않음.
     (solid --bg면 툴바가 앱 배경색으로 물듦 / transparent면 기본 프로스트 유지) */
  /* 바닥 3px fixed 요소 배경을 브라우저가 툴바 색으로 샘플링.
     · 평소(메뉴 닫힘) = 투명 → 툴바 배경 없음(프로스트)
     · 메뉴/시트 열림(html.m-ov-open) = --bg → 툴바가 앱 배경색과 같아져 경계 사라짐(seamless)
     z:200으로 오버레이 위에서도 이 요소가 바닥을 차지 */
  .m-safari-tint{display:block;position:fixed;left:0;bottom:-8px;width:100%;height:12px;
    margin:0;padding:0;background:transparent;z-index:200;pointer-events:none;transition:background .2s ease;}
  :root.m-ov-open .m-safari-tint{background:var(--bg);}
  /* ── 하단 GNB(앱바) ── */
  /* 투명 + 블러(글래스) — 사파리 하단 바 tint는 .m-safari-tint가 담당하므로 GNB는 원래 유리 질감 유지.
     블러는 ::before로 분리 → overflow:hidden 없이도 라운드 클립 + box-shadow 안 잘림 */
  .mgnb{display:flex;position:fixed;left:16px;right:16px;bottom:calc(4px + env(safe-area-inset-bottom,0));z-index:95;height:60px;
    align-items:stretch;justify-content:space-around;border-radius:30px;
    background:transparent;border:1px solid rgba(140,140,140,.22);box-shadow:none;}   /* 그림자 제거(사파리 툴바에서 잘려 어색) + 위치 아래로 */
  .mgnb::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
    -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);}
  .mgnb-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    padding:0;background:none;border:0;box-shadow:none;cursor:pointer;text-decoration:none;
    font-family:var(--sans);font-size:10.5px;font-weight:500;color:color-mix(in srgb,var(--text) 70%,var(--muted));line-height:1;
    -webkit-tap-highlight-color:transparent;transition:color .2s ease;}   /* --text와 --muted 사이(살짝 낮춤) */
  .mgnb-btn svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round;}
  .mgnb-btn span{display:block;line-height:1;}
  .mgnb-btn:active{color:var(--accent);}
  /* 브랜드 마크 = 공식 P✳g 로고(assets/img/pg-logo-mark.svg 인라인). currentColor 추종(다른 아이콘과 같은 muted·active=accent) */
  .mgnb-brand .mgnb-logo{height:28px;width:auto;fill:currentColor;}

  /* ── 대시보드 콘텐츠 리플로우(내부 그리드가 데스크톱이라 눌리던 것 해소) ── */
  .kpi-row{grid-template-columns:repeat(2,1fr);gap:10px;}        /* 5칸 → 2칸(세로로 쪼개지던 라벨 해소) */
  /* ★섹션 리듬 통일 — 처리대기↔마감임박 간격도 섹션 간격(46)과 동일(종전 14 → 붙어보임 해소) */
  .dash-cols{grid-template-columns:1fr;gap:46px;margin-top:0;} /* 2단 → 1단 세로, 내부 간격도 통일 */
  .dash-flow{gap:46px;margin-top:44px;}          /* 섹션 간 46 · 첫 섹션(급행) 위 44로 넉넉히 */
  /* 단일 열에선 고정 76px·말줄임 불필요 → 자연 높이·줄바꿈 허용(정보 안 잘리게) */
  .dash-cols .row-link,.dash-cols .due-item{height:auto;}
  .dash-cols .row-title,.dash-cols .row-meta,
  .dash-cols .due-title,.dash-cols .due-sub{white-space:normal;}
  /* 급행 등 가로 스트립: 음수마진(-32px)이 콘텐츠 패딩(17px)보다 커 가로 오버플로 → 패딩에 맞춤 */
  .hstrip-wrap{margin:0 -14px;}
  .rush-strip{padding:12px 14px 16px;}
  /* 메시지/피드 그리드 = 1열 */
  .msg-grid{grid-template-columns:1fr;}
  /* ── 타이포 위계 & 여백 리듬 — 크기 단계·행간·간격을 통일해 세련·가독(사용자 지시) ── */
  .page-head{margin:2px 0 30px;flex-wrap:wrap;align-items:flex-start;}
  /* 우측 요소(응답시간 배지·액션)가 좁은 폭에서 넘치지 않게 → 제목 블록이 한 줄 차지, 우측 요소는 아래로 */
  .page-head > :first-child{flex:1 1 100%;}
  .page-head .resp-hours{align-self:stretch;max-width:100%;}   /* 긴 응답시간 텍스트가 pill 폭을 밀어 가로 오버플로 내던 것 방지(내부 줄바꿈) */
  /* mem-row(삭제함·팀원): 좁은 폭에서 정보/버튼을 세로로 쌓아 버튼 잘림 방지 */
  .mem-row{flex-direction:column;align-items:stretch;gap:12px;}
  .mem-act,.trash-act{justify-content:flex-start;}
  .ph-title{font-size:20px;letter-spacing:-.005em;line-height:1.25;}   /* 타이틀 더 축소(사용자) */
  /* 서브 요약 = 칩 제거 → 자연스러운 문장 흐름 + 숫자만 굵게 강조(한눈에 읽히게) */
  .ph-sub{display:block;font-size:14px;margin-top:10px;line-height:1.65;}
  .ph-sub strong{display:inline;min-width:0;height:auto;padding:0;margin:0 1px;background:none;box-shadow:none;border:0;
    font-family:var(--mono);font-size:15.5px;font-weight:700;color:var(--text);}
  /* 섹션 타이틀 = 제목답게(굵게·짙게·자간 조임) + 제목↔내용 간격 */
  .section-h{font-size:17px;font-weight:640;letter-spacing:-.01em;color:var(--text);margin:0 0 16px;}
  * + .section-h{margin-top:34px;}               /* dash-flow 밖(카탈로그 등)에서만 발동 */
  .block{margin-top:34px;}                        /* block 섹션(영역·문의·공지·설정)도 section-h와 동일 위 간격 */
  .co-sec{margin-top:34px;}                       /* 업체 상세 평면 섹션도 동일 위 간격 */
  .co-sec > .section-h{margin:0 0 16px;}          /* 데스크톱 12px 상속 방지 — 모바일 section-h와 동일 */
  /* 업체 설정 — 평면 섹션 위 간격 통일 + 사업자정보 등 2열 폼을 1열(한 줄 한 개)로 */
  .settings .fs{margin-top:44px;}
  .settings legend{font-size:17.5px;font-weight:700;letter-spacing:-.015em;color:var(--text);margin-bottom:22px;}
  .settings .form-row{flex-direction:column;gap:0;}
  /* 타이틀 옆 카운트('N건'·'상태 변화') = 정보 칩 */
  .section-h .muted{background:var(--chip);color:var(--muted);font-weight:500;font-size:12px;
    padding:3px 10px;border-radius:20px;margin-left:2px;letter-spacing:0;}
  /* 급행/메시지 안내문 = 나열 텍스트 → 제목 아래 별도 줄, 톤 입힌 노트 */
  .rush-sec .rush-hint{flex-basis:100%;order:9;margin:3px 0 0;padding:7px 12px;border-radius:10px;letter-spacing:0;
    background:color-mix(in srgb, var(--err) 11%, transparent);color:var(--err);font-size:12px;font-weight:500;line-height:1.45;}
  .rush-sec .msg-hint{background:color-mix(in srgb, var(--accent) 13%, transparent);}
  .section-h:has(.rush-hint){margin-bottom:8px;}   /* 안내 노트가 있으면 노트↔카드 간격 축소(16→8) */
  .block-title{font-size:15.5px;margin:0 0 18px;}
  .kpi{padding:18px 19px;gap:12px;}
  .kpi-num,
  :root[data-skin="paper"] .kpi-num{font-size:20px;}   /* 모바일 KPI 숫자 축소 — 페이퍼 규칙(25px)까지 눌러 두 스킨 동일(사용자) */
  .kpi-label{font-size:12.5px;}
  .row-list{gap:12px;}
  /* 정보 많은 큐 카드 정리(실기기) — 상태를 상단 정렬(여러 줄일 때 세로중앙 부유 방지) + 업체태그는 제목 위 독립 줄 */
  .row-link{padding:17px 18px;align-items:flex-start;gap:12px;}
  .row-main{gap:8px;flex:1 1 auto;min-width:0;}   /* 남는 폭을 채워 우측 상태 배지가 밖으로 밀리지 않게 */
  .row-title{font-size:15.5px;line-height:1.45;word-break:keep-all;}   /* 한글 단어 중간 잘림 방지("개선" 유지) */
  .row-title .co-tag{display:flex;width:fit-content;margin:0 0 7px;}   /* 업체태그 → 제목 위 독립 줄로(제목과 겹침 방지) */
  .row-meta{font-size:13px;line-height:1.6;word-break:keep-all;}
  .status{align-self:flex-start;margin-top:2px;font-size:12.5px;letter-spacing:.02em;gap:6px;}   /* 상태 배지 = 카드 상단 우측 고정 + 모바일에서 한 단계 작게(사용자) */
  .status .dot{width:7px;height:7px;}
  .due-item{padding:15px 17px;}

  /* 새 항목 추가 버튼 — 모바일 전체폭 + 카테고리 셀렉트와 동일 높이(48px).
     볼록 살짝 낮춤(그림자 약하게) + 위 여백 살짝(margin-top). 아래 셀렉트와 간격은 .cat-msel 음수 top으로 축소 */
  .page-head .cat-add{flex:1 1 100%;width:100%;height:48px;padding:0 22px;margin:15px 0 0;
    box-shadow:4px 4px 10px rgba(var(--shadow),.68), -4px -4px 10px rgba(var(--hilite),.82);}
  /* 필터(카테고리·상태) — 모바일은 칩 나열 대신 전체폭 드롭다운(select) */
  .filters{display:none;}
  .cat-msel,.req-msel{display:block;width:100%;height:48px;margin:0 0 22px;box-sizing:border-box;
    font-family:var(--sans);font-size:15px;color:var(--text);background:var(--bg);border:0;outline:0;cursor:pointer;
    appearance:none;-webkit-appearance:none;padding:0 42px 0 16px;border-radius:14px;
    box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
  .cat-msel{margin-top:-14px;}   /* 카탈로그만 위 추가버튼과 간격 축소 */
  :root[data-skin="paper"] .cat-msel,
  :root[data-skin="paper"] .req-msel{background-color:var(--field-bg);border:1px solid var(--edge-lo);box-shadow:none;}
  /* 견적 단가 행 — 좁은 화면에서 한 줄에 몰리던 것을, 카드로 감싸고 여러 줄로 풀어 다 보이게.
     줄1 이름 / 줄2 카테고리 / 줄3 가격+사용+저장 / 줄4 삭제 */
  .cat-row{flex-wrap:wrap;align-items:stretch;gap:10px;padding:15px 16px;border-radius:16px;margin-bottom:12px;
    background:var(--bg);box-shadow:4px 4px 9px rgba(var(--shadow),.6), -4px -4px 9px rgba(var(--hilite),.9);}
  .cat-edit{flex:1 1 100%;flex-wrap:wrap;gap:10px;}
  .cat-edit .ci-name{flex:1 1 100%;}
  .cat-edit .ci-cat{flex:1 1 100%;}
  .cat-edit .ci-price{flex:1 1 120px;width:auto;text-align:left;}
  .cat-edit .ci-active{flex:0 0 auto;}
  .cat-edit .chip-btn{flex:0 0 auto;}
  .cat-row > form:not(.cat-edit){flex:1 1 100%;}
  .cat-row > form:not(.cat-edit) .chip-btn{width:100%;}
  :root[data-skin="paper"] .cat-row{background:#f9f9f9;border:1px solid var(--edge-lo);box-shadow:none;}
  :root[data-skin="paper"][data-theme="dark"] .cat-row{background:#2a2925;}

  /* ══ 오버레이(메뉴/모드) ══ */
  .m-overlay{position:fixed;inset:0;z-index:120;display:flex;opacity:0;transition:opacity .32s ease;}
  .m-overlay.show{opacity:1;}
  .m-overlay[hidden]{display:none;}
  .m-overlay::before{content:"";position:absolute;inset:0;background:rgba(20,20,20,.42);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
  /* 메뉴 = 전체 오버레이 패널(사이드바 내용 복제 → 재디자인) */
  /* 등장 = 왼쪽에서 오른쪽으로 슬라이드 + 페이드(오버레이 opacity). expo-out 이징으로 부드럽게·고급스럽게.
     하단 padding = 하단 고정 닫기 바(약 86px)를 가리지 않게 확보 */
  #mMenu .m-ov-panel{position:relative;z-index:1;width:100%;height:100%;overflow-y:auto;background:var(--bg);
    padding:calc(env(safe-area-inset-top,0) + 40px) 22px calc(env(safe-area-inset-bottom,0) + 120px);
    transform:translateX(-48px);transition:transform .42s cubic-bezier(.16,1,.3,1);}
  #mMenu.show .m-ov-panel{transform:none;}
  /* 하단 다단계 blur 스크림(참고 MD) — 메뉴가 아래로 갈수록 3단 블러 + --bg 페이드로 사라짐 → 닫기 버튼(z:3)과 겹침 방지 */
  #mMenu .m-ov-scrim{position:fixed;left:0;right:0;bottom:0;z-index:2;height:112px;pointer-events:none;}
  /* 하단 = 배경색 강하게(0~38% 완전 불투명 → 가장 아래 100%), 위로 갈수록 페이드 */
  #mMenu .m-ov-scrim::after{content:"";position:absolute;inset:0;
    background:linear-gradient(0deg, var(--bg) 0%, var(--bg) 38%, rgba(var(--bg-rgb),.55) 64%, rgba(var(--bg-rgb),.2) 84%, rgba(var(--bg-rgb),0) 100%);}
  #mMenu .m-ov-scrim .mos-b{position:absolute;inset:0;}
  /* 블러 구간을 짧게 — 마스크를 위쪽 좁은 띠에 집중 */
  #mMenu .m-ov-scrim .mos1{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);
    -webkit-mask-image:linear-gradient(0deg,#000 24%,#000 48%,transparent 70%);mask-image:linear-gradient(0deg,#000 24%,#000 48%,transparent 70%);}
  #mMenu .m-ov-scrim .mos2{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
    -webkit-mask-image:linear-gradient(0deg,#000 42%,#000 64%,transparent 84%);mask-image:linear-gradient(0deg,#000 42%,#000 64%,transparent 84%);}
  #mMenu .m-ov-scrim .mos3{-webkit-backdrop-filter:blur(.4px);backdrop-filter:blur(.4px);
    -webkit-mask-image:linear-gradient(0deg,#000 60%,rgba(0,0,0,.38) 84%,transparent 100%);mask-image:linear-gradient(0deg,#000 60%,rgba(0,0,0,.38) 84%,transparent 100%);}
  /* 닫기 = 하단 가운데 알약(너무 넓지 않게).
     ★떠 있는 버튼이라 볼록/오목(카빙)·블러 대신 '단일 컬러'(잉크 반전 솔리드). 뉴모·페이퍼 공통 */
  .m-ov-x{position:fixed;left:0;right:0;margin:0 auto;width:fit-content;min-width:172px;
    bottom:calc(env(safe-area-inset-bottom,0) + 18px);z-index:3;
    height:52px;padding:0 40px;display:flex;align-items:center;justify-content:center;gap:8px;
    border:0;border-radius:26px;background:var(--text);color:var(--bg);cursor:pointer;
    font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;box-shadow:none;
    transform:translateY(10px);transition:transform .42s cubic-bezier(.16,1,.3,1) .04s, opacity .2s ease;}
  #mMenu.show .m-ov-x{transform:none;}
  .m-ov-x:active{opacity:.85;}
  .m-ov-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
  #mMenu .side-id,#mMenu .side-nav,#mMenu .side-index{position:static;background:none;border:0;box-shadow:none;
    height:auto;width:auto;transform:none;padding:0;margin:0;overflow:visible;border-radius:0;}
  #mMenu .side-index{display:none;}   /* PROGRAM GALLERY 루트 링크는 오버레이에서 제거 → 하단 GNB 심벌로 이동 */
  #mMenu .side-id{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 4px 16px;margin-bottom:6px;border-bottom:1px solid var(--edge-lo);}
  #mMenu .side-nav{display:flex;flex-direction:column;gap:7px;margin-top:16px;}
  /* 기본(뉴모) = 볼록 양각 항목 · 폰트 15px(뉴모·페이퍼 공통) */
  #mMenu .side-nav a{display:flex;align-items:center;gap:10px;padding:15px 18px;border-radius:16px;
    font-family:var(--sans);font-size:15px;font-weight:560;background:var(--bg);border:0;color:var(--text);
    box-shadow:4px 4px 9px rgba(var(--shadow),.7), -4px -4px 9px rgba(var(--hilite),.9);}
  #mMenu .side-nav a.on{background:var(--accent);color:#fff;box-shadow:3px 3px 9px rgba(var(--shadow),.5);}
  #mMenu .side-nav .nav-badge{margin-left:auto;}
  #mMenu .side-nav .nav-ico{margin-left:auto;width:20px;height:20px;}
  /* ── 페이퍼 = 플랫: 뉴모 음영 대신 실선 보더 카드(스킨 특성 차별화) ── */
  :root[data-skin="paper"] #mMenu .side-nav a{background:#f9f9f9;border:1px solid var(--edge-lo);box-shadow:none;}
  :root[data-skin="paper"][data-theme="dark"] #mMenu .side-nav a{background:#2a2925;}
  :root[data-skin="paper"] #mMenu .side-nav a.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none;}
  :root[data-skin="paper"] #mMenu .side-id{border-bottom-color:var(--edge-lo);}
  /* ★항목 순차 등장(스태거) — 패널이 슬라이드해 들어온 뒤 신원줄·메뉴가 위에서부터 차례로 페이드+상승.
     지연은 .show에만 걸어 닫을 땐 한꺼번에 사라지게(역스태거 방지) */
  #mMenu .side-id,
  #mMenu .side-nav a{opacity:0;transform:translateY(12px);
    transition:opacity .42s ease, transform .52s cubic-bezier(.16,1,.3,1);}
  #mMenu.show .side-id,
  #mMenu.show .side-nav a{opacity:1;transform:none;}
  #mMenu.show .side-id{transition-delay:.08s;}
  #mMenu.show .side-nav a:nth-child(1){transition-delay:.16s;}
  #mMenu.show .side-nav a:nth-child(2){transition-delay:.21s;}
  #mMenu.show .side-nav a:nth-child(3){transition-delay:.26s;}
  #mMenu.show .side-nav a:nth-child(4){transition-delay:.31s;}
  #mMenu.show .side-nav a:nth-child(5){transition-delay:.36s;}
  #mMenu.show .side-nav a:nth-child(6){transition-delay:.41s;}
  #mMenu.show .side-nav a:nth-child(7){transition-delay:.46s;}
  #mMenu.show .side-nav a:nth-child(8){transition-delay:.51s;}
  #mMenu.show .side-nav a:nth-child(9){transition-delay:.56s;}
  #mMenu.show .side-nav a:nth-child(n+10){transition-delay:.61s;}
  /* ★닫힘 = 슬라이드/그림자 없이 전체를 opacity로 페이드아웃(제자리에서 깔끔하게 사라짐) */
  #mMenu.closing{opacity:0;transition:opacity .3s ease;}
  #mMenu.closing .m-ov-panel{transform:none;box-shadow:none;}
  #mMenu.closing .side-id,
  #mMenu.closing .side-nav a,
  #mMenu.closing .m-ov-x,
  #mMenu.closing .m-ov-scrim{transform:none;}
  /* 모드 = 하단 시트(테마·스킨) */
  .m-sheet{align-items:flex-end;}
  .m-sheet .m-ov-panel{position:relative;width:100%;background:var(--bg);border-radius:26px 26px 0 0;
    padding:12px 22px calc(env(safe-area-inset-bottom,0) + 26px);box-shadow:0 -12px 40px rgba(0,0,0,.24);
    transform:translateY(100%);transition:transform .28s cubic-bezier(.3,0,.2,1);}
  .m-sheet.show .m-ov-panel{transform:none;}
  .m-grip{width:40px;height:4px;border-radius:2px;background:var(--edge-lo);margin:2px auto 16px;}
  .m-sheet-title{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--text);margin:0 0 4px;}
  .m-seg-label{font-family:var(--sans);font-size:13px;color:var(--muted);margin:18px 0 8px;}
  .m-seg{display:flex;gap:10px;}
  .m-seg button{flex:1;padding:15px 0;border-radius:15px;border:1px solid var(--edge-lo);background:var(--chip);
    font-family:var(--sans);font-size:15px;font-weight:560;color:var(--muted);cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,border-color .2s;}
  .m-seg button.on{background:var(--accent);border-color:var(--accent);color:#fff;}
}