/* =====================================================================
   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); /* 인풋 전용 하이라이트 (라이트=전역 동일) */
  --fld-sh-deep:color-mix(in srgb,rgb(var(--fld-sh)),#000 3%); /* 오목 상단 진한 밴드 (fld-sh보다 약간 어둡게, 테마 자동적응) */
  --fld-hi-deep:color-mix(in srgb,rgb(var(--fld-hi)),#fff 3%);  /* 오목 하단 하이라이트 밴드 (fld-hi보다 밝게, 테마 자동적응) */
  /* ★오목 well 공용 토큰 — .field와 동일한 6밴드 인셋(진한 밴드 2 + 넓은 인셋 2). 필드가 아닌 오목 요소(안내 입력창·복사칸 등)를 이걸로 통일. */
  --well:inset 1px 2.5px 1.5px var(--fld-sh-deep), inset -1px -2.5px 1.5px var(--fld-hi-deep),
         inset 2px 4px 8px rgba(var(--fld-sh),1), inset -5px -6px 9px rgba(var(--fld-hi),1);
  --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);
  /* ── ★팝업 스크림 = 한 가지 값만 쓴다 (2026-08-05 사용자 지시로 통일) ──────────────
     ★규칙: **팝업이 뜨면 뒤는 흐려진다.** 뉴모피즘·페이퍼 두 스킨 모두 같다(스킨별로 다르게 하지 않는다).
     ⚠️★스크림을 새로 만들 때 rgba·blur 수치를 직접 적지 말 것 — 이 두 토큰만 쓴다.
        (수치를 각자 박은 결과가 딤 .24~.74 · 블러 2~5px으로 제각각이었다. 그래서 화면마다 다르게 보였다.)
     ⚠️ -webkit- 접두사를 **반드시 같이** 쓴다(사파리·iOS는 접두사 없이는 블러가 안 걸린다). */
  --scrim-bg:rgba(255,255,255,.12);   /* 모든 팝업 공통 딤 — 2026-08-06 화이트 딤 확정(문서형 유리 팝업 가독성). 뒤가 밝아져 유리 패널이 밝게 읽힌다. */
  --scrim-blur:blur(5px);             /* 모든 팝업 공통 블러 — 2026-08-06 7→5px(딤 블러 약하게 확정) */
  --scrim-bg-media:rgba(0,0,0,.72);   /* 예외 하나 — 사진 뷰어(라이트박스). 사진 대비를 위해 더 어둡게, 블러는 동일 */
  /* ── ★팝업 패널 = 유리 (2026-08-05 사용자 지시) ───────────────────────────────
     ★규칙: **팝업 패널 자체가 반투명 + 블러(유리)** 다. 뒤 스크림만 흐리는 게 아니라 판 자체가 유리다.
     ⚠️★옛 상태가 「제각각」이던 이유: 팝업이 두 계열로 갈려 있었다 —
        유리 계열(.glass-card·.online-drop·.ms-sug, 그나마 blur 20/24/30px·채도 1.4/1.5/1.7로 제각각) vs
        **불투명 뉴모 계열**(.led-modal-box·.ltab-mbox·.cpick-panel·pg-modal-card = `background:var(--bg)`).
        이제 전부 아래 토큰 하나를 쓴다. 새 팝업도 반드시 이 토큰으로 만들 것(수치 직접 금지).
     ⚠️ 배경은 `--bg-rgb` 기반이라 라이트/다크/페이퍼가 **자동으로 제 톤**을 따른다. 색을 새로 박지 말 것.
     ⚠️ 패널 안의 카드(.co-sk-section 등)도 반투명이어야 유리가 보인다 — 불투명 카드로 꽉 채우면 유리는 테두리에서만 보인다. */
  --panel-bg:rgba(var(--bg-rgb),.62);
  --panel-blur:blur(26px) saturate(1.5);
  --panel-edge:rgba(255,255,255,.62);
  --panel-shadow:0 24px 60px rgba(20,20,18,.24);
  --panel-inner:rgba(var(--bg-rgb),.5);   /* 유리 패널 안에 얹는 카드·시트 */
  /* 팝업 안 컨트롤(인풋·셀렉트·칩) = **평면**. 뉴모 볼록/오목을 쓰지 않는다 — 파일 맨 끝 블록 참조. */
  --panel-field-bg:rgba(var(--bg-rgb),.66);
  --panel-field-edge:color-mix(in srgb, var(--text) 16%, transparent);
}
/* ── 디자인 토큰 (다크) — 약간 웜한 중립 차콜 ───────────────────── */
:root[data-theme="dark"]{
  --bg:#3b3b38;
  --light:#4a4a47;
  --dark:#2a2a29;
  --text:#e8e7e0;
  /* 다크에서는 같은 딤이 약해 보인다(뒤도 이미 어둡다) → 농도만 올리고 블러는 라이트와 동일하게 유지 */
  --scrim-bg:rgba(0,0,0,.56);
  /* 유리 패널 — 배경(--panel-bg)은 --bg-rgb를 타므로 그대로 두고, 테두리 하이라이트·그림자만 다크용으로 */
  --panel-edge:rgba(255,255,255,.12);
  --panel-shadow:0 24px 60px rgba(0,0,0,.55);
  --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 사용자 지시로 되돌렸다 — 태그라인이 로고 오른쪽으로 옮겨가며 높이를 키울 이유가 없어졌다. */
/* ⚠️★상단 패딩에 safe-area 보정이 붙은 이유(2026-08-13) — `viewport-fit=cover`(sys-head.php)를 켜면
   콘텐츠가 **노치·다이나믹 아일랜드 영역까지** 올라온다. 보정이 없으면 홈 화면 앱에서 로고가 상태바에 가린다.
   데스크톱·안드로이드는 `env()`가 0이라 28px 그대로다 — 기존 화면에 영향이 없다.
   ⚠️ 좌우는 일부러 보정하지 않았다. 세로 사용이 기본이고, 가로에서 34px 패딩이 이미 노치를 넘는다. */
.topbrand{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;
  padding:calc(28px + env(safe-area-inset-top,0)) 34px 28px;font-family:var(--mono);
  display:flex;align-items:center;justify-content:space-between;}
.topbrand > *{pointer-events:auto;}

/* ── ★공지 띄우기 띠 (2026-08-01) ───────────────────────────────────────────
   자리 = **헤더 아래 여백 안**. 헤더 바닥(=`top:100%`)에서 시작해 콘텐츠(body padding-top 138px)까지
   비어 있는 36.4px를 쓴다. ⚠️ 이 블록은 **높이를 만들지 않는다**(absolute) — 여백이 늘어나면 안 된다는 지시.
   ⚠️★ `.topbrand`의 flex 아이템이 되면 `space-between`이 셋으로 갈라져 로고·컨트롤 배치가 깨진다.
      반드시 `position:absolute`로 흐름 밖에 둘 것.
   ⚠️ 우측 정렬 = 헤더 컨트롤 바로 아래(사용자 지시). 좌측 여백은 로고와 겹치지 않게 넉넉히 비운다. */
.top-notice{position:absolute;top:100%;right:34px;max-width:min(520px,calc(100% - 68px));
  display:flex;align-items:center;gap:10px;height:26px;margin-top:5px;
  font-family:var(--sans);pointer-events:auto;}
.tn-lab{flex:none;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--accent-ink);background:var(--chip);padding:3px 8px;border-radius:7px;}
/* 창(view) 높이 = 한 칸 높이. ⚠️ 여기 값을 바꾸면 JS의 이동 거리도 같이 바뀌어야 한다 → JS가 실측해서 쓴다. */
.tn-view{flex:1;min-width:0;height:22px;overflow:hidden;}
.tn-roll{list-style:none;margin:0;padding:0;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.tn-roll li{height:22px;display:flex;align-items:center;}
.tn-roll a{display:block;width:100%;font-size:13px;line-height:22px;color:var(--muted);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease;}
.tn-roll a:hover{color:var(--text);}
.tn-num{flex:none;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ph);}
.tn-num b{color:var(--muted);font-weight:600;}
@media (prefers-reduced-motion:reduce){.tn-roll{transition:none;}}
/* 모바일 공지 띠 — 헤더 안에 실제 높이를 확보해 콘텐츠를 덮지 않는다. */
@media (max-width:760px){
  .topbrand:has(.top-notice){position:relative;padding-bottom:64px;}
  .top-notice{display:flex;position:absolute;top:auto;bottom:15px;left:14px;right:14px;width:auto;max-width:none;height:34px;margin:0;padding:0 12px;border-radius:999px;background:var(--bg);box-shadow:1.5px 1.5px 4px rgba(var(--shadow),.58),-1.5px -1.5px 4px rgba(var(--hilite),.72);}
  .tn-lab{padding:2px 7px;font-size:9.5px;}
  .tn-roll a{font-size:12px;}
}
/* ── 상단 스크림 = 약한 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:12px;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 form) — 2단 락업과 비례가 완전히 다르다(3063×280 ≈ 10.9:1).
   ⚠️ `.lockup`의 235px 폭 규격을 그대로 쓰면 높이가 21px밖에 안 나와 글자가 뭉갠다 →
      **높이를 기준으로 잡고 폭은 비례로 따라오게** 한다(width:auto).
   ⚠️ 헤더 세로 정렬은 `.brand-col{align-items:flex-end}`가 잡는다 — 높이를 바꾸면 태그라인 baseline도 같이 볼 것. */
.lockup-word{width:auto;margin-left:0;}
/* 2026-07-30 사용자 지시로 31 → 21px(약 2/3). 폭은 비례로 339 → 230px. */
/* ★관리자 헤더 로고 = CARE **V2 배지**(검정 판에 글자를 음각으로 파낸 knockout) — 사용자 의도.
   ⚠️ a·o 카운터가 소형에서 뭉개지는 건 배지(knockout) 형태의 구조적 특성 → **72px로 키워** 확보(1배에서 깨끗).
   ⚠️ fill:currentColor → 라이트는 판 #222(≈검정), 다크는 판 #fff로 반전. 음각 글자는 판을 뚫은 구멍이라 배경이 비쳐 대비 유지.
      viewBox ≈ 4.7:1 → 폭 비례. 되돌릴 땐 header include를 pg-logo-careform.svg(양각)로. */
/* ⚠️ SVG viewBox를 배지에 크롭해서 이제 배지가 박스를 꽉 채운다(전엔 72px 박스 중 배지는 ~36px뿐).
   그래서 높이를 30px로 낮춰도 예전 36px 배지보다 조금 작은 정도. 우측 끝은 크롭 덕에 컨텐츠 우측(뷰포트-34)과 자동 정렬. */
/* ★관리자 헤더 로고 = CARE **V3**(얇은 양각 워드마크). 크롭으로 우측=컨텐츠 우측 자동 정렬. ratio ≈ 9.6:1.
   ★기본 = 솔리드 currentColor — **페이퍼(평면 스킨)**가 이걸 쓴다(라이트 검정/다크 흰). 크기 36px(2026-07-31 사용자 지시로 26→36 확대). */
.lockup-word > svg{width:auto;height:31px;fill:currentColor;overflow:visible;}   /* 36→31px(=약 85%, 2026-07-31 사용자 지시) */
/* ★★뉴모피즘 — **soft(뉴모) 스킨에서만**. 면은 배경과 같고, 양쪽 림의 베벨로만 선명한 양각을 만든다.
   SVG 내부 필터가 같은 SourceAlpha에서 암부·하이라이트·깊이를 각각 만든 뒤 병렬 합성한다.
   ⚠️★CSS drop-shadow 연쇄는 앞 그림자가 다음 단계에 다시 섞여 플로팅처럼 퍼지므로 사용하지 않는다. 페이퍼는 필터 없이 아래 평면 규칙을 쓴다. */
:root:not([data-skin]) .lockup-word > svg{fill:var(--bg);filter:none;}
:root:not([data-skin]) .lockup-word .care-v6-art{filter:url(#care-v6-emboss-light);}
:root[data-theme="dark"]:not([data-skin]) .lockup-word .care-v6-art{filter:url(#care-v6-emboss-dark);}
/* ★페이퍼 로고 = **배경과 같은 계열의 톤온톤**(2026-07-31 사용자 지시): 라이트는 배경보다 조금 진하게 / 다크는 조금 밝게.
   `--bg`가 지배적(72%)이고 방향 앵커로 `--logo-fill`(라이트=검정→진하게 / 다크=흰→밝게)을 28% 섞는다 → 두 테마 자동. */
/* ★페이퍼 로고 = **면으로 채운 톤온톤**(2026-07-31 사용자 지시로 라인→면 복원): 라이트는 배경보다 조금 진하게 / 다크는 조금 밝게.
   `--bg`가 지배적(72%)이고 방향 앵커로 `--logo-fill`(라이트=검정→진하게 / 다크=흰→밝게)을 28% 섞는다 → 두 테마 자동. */
:root[data-skin="paper"] .lockup-word > svg{
  fill:color-mix(in srgb, var(--bg) 72%, var(--logo-fill));  /* 로고 앵커 35→28%: 페이퍼 로고 추가 농도 완화(2026-08-02 사용자 지시) */
  height:31px;   /* 관리자·클라이언트·모드 공통 크기 */
}
/* ★관리자 헤더에는 **로고만** 있다(2026-07-30 사용자 지시) — 태그라인은 푸터로 옮겼다.
   자식이 로고 하나뿐이므로 `.topbrand{align-items:center}`가 우측 컨트롤(접속중·테마·스킨)과
   **세로 가운데를 자동으로 맞춘다.** 별도 정렬값을 주지 말 것.
   ⚠️ 여기에 다시 태그라인을 넣으면 상자가 세로로 커져 그 가운데 정렬이 깨진다. */
.brand-col-word{align-items:center;}
.brand-beta{display:none;}
@media screen and (min-width:761px){
	.brand-col-word{gap:12px;}
	.brand-col-word .brand-beta{display:inline-flex;align-self:flex-end;align-items:center;justify-content:center;min-width:46px;height:24px;padding:0 10px;border-radius:12px;background:var(--bg);box-shadow:2px 2px 5px rgba(var(--shadow),.62),-2px -2px 5px rgba(var(--hilite),.9);color:var(--muted);font-family:var(--sans);font-size:12px;font-weight:500;line-height:1;letter-spacing:.12em;white-space:nowrap;}
	.brand-col-word .brand-beta-text{display:inline-block;transform:scale(.9);transform-origin:center;}
	:root[data-skin="paper"] .brand-col-word .brand-beta{border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;box-shadow:none;}
}
/* ★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:12px;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:1px solid color-mix(in srgb,var(--edge-hi) 55%,transparent);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 1px 2.5px 1.5px var(--fld-sh-deep), inset -1px -2.5px 1.5px var(--fld-hi-deep),
             inset 2px 4px 8px 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 1px 2.5px 1.5px transparent, inset -1px -2.5px 1.5px transparent,
             inset 2px 4px 8px 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:999px;padding:18px 20px;margin-top:6px;
  /* ⚠️ 이 파일엔 전역 `a{text-decoration:none}`이 없다 — 컴포넌트마다 각자 끈다.
     `.btn`에만 빠져 있어서 `<a class="btn">`(스킨 정보·매뉴얼 보기·PDF로 저장)에 **밑줄이 그어졌다**(2026-08-01 수정).
     버튼처럼 생긴 요소에 밑줄이 있으면 버튼인지 링크인지 읽히지 않는다. */
  text-decoration:none;
  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:12px;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);}

/* ── 미동의 경고 (register.php) ────────────────────────────────────
   동의 없이 [가입하기]를 누르면 이동을 막고 **여기를 보라고** 알린다.
   ⚠️ 색만으로 알리지 않는다 — 색(포인트) + 흔들림 + 체크박스 링 세 가지를 함께 준다.
      색맹·저대비 환경에서 포인트 컬러만으로는 변화가 안 읽힌다.
   ⚠️★ 링 색은 `--accent-ink`를 **직접** 쓴다. `currentColor`는 안 된다 — 폼 컨트롤은 `color`를
      상속하지 않아 라벨이 오렌지가 돼도 input의 currentColor는 **검정 그대로다**(실측 확인).
      rgba 리터럴로 박는 것도 금지 — 스킨(soft/paper) × 다크 4조합에서 각각 어긋난다(§2-1 ⓑ의 실사고). */
.agree-row.warn .agree{color:var(--accent-ink);}
.agree-row.warn .agree input{outline:2px solid var(--accent-ink);outline-offset:2px;}
/* 흔들림은 `.warn`과 **별도 클래스**다 — 색은 남기고 흔들림만 다시 재생해야 하기 때문
   (JS가 매 클릭마다 .shake를 떼었다 붙인다). */
.agree-row.shake{animation:agreeShake .42s cubic-bezier(.36,.07,.19,.97) both;}
@keyframes agreeShake{
  10%,90%{transform:translateX(-2px);}
  20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-7px);}
  40%,60%{transform:translateX(7px);}
}
/* 모션 감소 — 흔들림만 끈다. 색·링은 남겨야 '왜 안 넘어가는지'가 여전히 보인다. */
@media (prefers-reduced-motion:reduce){.agree-row.shake{animation:none;}}

/* ── 문서형 본문 타이포 (약관 등 — 글래스 카드 안에서 .glass-body와 조합) ── */
.modal-body{font-family:var(--sans);font-size:14px;line-height:1.75;color:var(--text);}
.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(--muted);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;}

/* ── 로그인 성공 환영 메시지 ───────────────────────────────────────
   로그인 성공 직후 첫 도착 화면에서 세션 값을 한 번만 소비해 표시한다.
   파동 퇴장이 끝난 다음 화면 위에 뜨므로 페이지 콘텐츠를 밀지 않는 fixed 레이어다. */
.login-welcome{position:fixed;left:50%;top:28px;z-index:220;pointer-events:none;width:min(360px,calc(100vw - 36px));padding:15px 20px;border-radius:18px;background:rgba(var(--bg-rgb),.88);border-top:1px solid var(--edge-hi);border-left:1px solid var(--edge-hi);box-shadow:5px 5px 14px rgba(var(--shadow),.72),-5px -5px 14px rgba(var(--hilite),.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;animation:loginWelcome 3.2s cubic-bezier(.3,.5,.3,1) both;}
.login-welcome .lw-kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--accent-ink);}
.login-welcome strong{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--text);}
.login-welcome .lw-identifier{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);}
.login-welcome.has-actions{pointer-events:auto;width:min(400px,calc(100vw - 36px));gap:4px;animation:loginWelcomeHold .55s cubic-bezier(.3,.5,.3,1) both;}
.lw-action-list{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:12px;}
.lw-action{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:0 14px;border-radius:13px;background:var(--chip);text-decoration:none;font-family:var(--sans);font-size:12.5px;color:var(--text);}
.lw-action span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lw-action b{flex:none;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent-ink);}
.lw-confirm{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:40px;margin-top:5px;padding:0;border:0;border-radius:20px;background:var(--bg);box-shadow:2px 2px 5px rgba(var(--shadow),.72),-2px -2px 5px rgba(var(--hilite),.84);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--title-ink);cursor:pointer;}
.lw-confirm:active{box-shadow:inset 2px 2px 5px rgba(var(--shadow),.84),inset -2px -2px 5px rgba(var(--hilite),.9);}
@keyframes loginWelcome{0%{opacity:0;transform:translate(-50%,-10px) scale(.97);} 12%{opacity:1;transform:translate(-50%,0) scale(1);} 74%{opacity:1;transform:translate(-50%,0) scale(1);} 100%{opacity:0;transform:translate(-50%,-6px) scale(.985);}}
@keyframes loginWelcomeHold{0%{opacity:0;transform:translate(-50%,-10px) scale(.97);} 100%{opacity:1;transform:translate(-50%,0) scale(1);}}
@media (max-width:640px){.login-welcome{top:max(18px,env(safe-area-inset-top));}}
@media (prefers-reduced-motion:reduce){.login-welcome{animation:none;opacity:1;transform:translateX(-50%);}}

/* ── 푸터 ───────────────────────────────────────────────────────── */
/* ★왼쪽 = 브랜드 문장 / 오른쪽 = 카피라이트(2026-07-30). 문장이 없는 화면(클라·로그인)에서는
   왼쪽 칸이 아예 렌더되지 않아 카피라이트만 오른쪽에 남는다.
   ⚠️ 예전엔 `justify-content:center`(카피라이트 한 줄 가운데)였다 — 되돌리면 두 값이 붙어 버린다. */
/* ── 로그인·회원가입 하단 갤러리 링크 (2026-08-01) ─────────────────────────
   모양 = [ (‹) ] + [ 가로 1줄 로고 — 아주 작게 ], **가운데 정렬**.
   ⚠️ 판(pill)을 두르지 않는다 — 사용자 지시의 「동그라미 배경」은 **화살표에만** 해당한다.
      전체를 버튼처럼 만들면 로그인 화면의 주 버튼(로그인)과 무게가 겹친다.
   ⚠️ 기본은 **숨김** — 데스크톱은 헤더에 같은 버튼이 있어 두 번 보일 이유가 없다.
      모바일(≤640px)에서만 켠다(아래 미디어쿼리). */
/* ★색 = **포인트 컬러**(2026-08-01 사용자 지시). 로고와 화살표 모두.
   ⚠️★ `--accent-ink`가 아니라 **`--brand-signal`**이다 — 인수인계 §2-1 ⓑ:
      "`--accent-ink`는 배경 대비를 위해 어둡게 보정한 UI용 값이라 **로고에는 쓰지 않는다. 둘을 섞지 말 것.**"
      `--brand-signal`은 두 테마 공통 원색(#f15a24)이라 라이트·다크에서 브랜드 색이 흔들리지 않는다. */
.bf-gallery{display:none;align-items:center;justify-content:center;gap:9px;
  /* 아래 여백 30 → 50 → **78px** (2026-08-01 사용자 지시, 두 번에 걸쳐 올림).
     ⚠️ 위치는 이 **아래 여백**이 정한다 — 로그인 화면은 `.center{flex:1}`이 본문을 밀어 이 링크를 바닥에 붙이기 때문.
        더 올리려면 이 값만 키우면 된다. */
  align-self:center;margin:4px auto 78px;padding:6px 8px;
  text-decoration:none;color:var(--brand-signal);transition:opacity .2s ease;}
.bf-gallery:link,.bf-gallery:visited{color:var(--brand-signal);}
.bf-gallery:active{opacity:.65;}
/* 화살표 = 머리(꺾쇠)만. 동그라미는 **변수 색**이라 라이트·다크·페이퍼가 자동으로 맞는다.
   ⚠️ 옛 사이드바 버전은 흰 원 + 고정 다크 꺾쇠였는데, 그건 항상 밝은 판 위에 있었기 때문이다.
      여기는 페이지 배경 위라 고정색을 쓰면 다크에서 흰 동그라미가 튄다. */
.bfg-arrow{width:22px;height:22px;flex:none;display:block;}
.bfg-arrow .bfg-c{fill:var(--chip);}
/* 꺾쇠 = 포인트 컬러 · 얇게(2026-08-01 사용자: "살짝 더 얇게" — 2 → 1.6).
   ⚠️ 마크업의 `stroke-width="2"`(표현 속성)를 CSS가 덮는다. 두께를 또 바꿀 일이 생기면 **여기 한 곳**만 고칠 것. */
.bfg-arrow .bfg-p{stroke:var(--brand-signal);stroke-width:1.6;}
/* 로고 = 작게. viewBox 933×102(약 9:1)라 높이 15px이면 폭 약 137px.
   ⚠️ 12 → 15px(2026-08-01 사용자: "살짝 더 키워"). **화살표(22px)는 그대로 둔다** —
      둘을 같이 키우면 하단 링크가 버튼처럼 무거워져 로그인 버튼과 시선이 겹친다. */
.bf-gallery .bfg-logo{display:inline-flex;align-items:center;}
.bf-gallery .bfg-logo > svg{height:15px;width:auto;display:block;fill:currentColor;}

.botfoot{display:flex;align-items:center;justify-content:space-between;gap:13px;flex-wrap:wrap;
  padding:22px 34px;font-family:var(--mono);font-size:12px;letter-spacing:.10em;color:var(--muted);}
.bf-brand{font-family:var(--sans);font-size:12px;letter-spacing:.01em;color:var(--muted);}
.bf-copy{margin-left:auto;}   /* 왼쪽 칸이 없어도 오른쪽에 붙는다 */
@media (max-width:640px){
  /* 모바일은 하단 GNB가 깔려 있어 두 줄로 눕힌다(가로로 붙이면 잘린다) */
  .botfoot{justify-content:center;text-align:center;gap:5px;}
  .bf-copy{margin-left:0;}
}

/* =====================================================================
   앱 레이아웃 — 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;       /* 포인트 컬러 (활성 메뉴·링크·강조) — 브랜드 오렌지 */
  /* ★2026-08-03 사용자 지시 — 어둡게 보정한 #c2451a가 **레드로 읽힌다**는 지적.
     라이트 계열은 시그널 오렌지 원색으로 통일한다. 위 512~513행의 "한 단계 어둡게" 방침은 여기서 폐기.
     ⚠️ 다크 모드(--accent-ink:#ff9a70)는 그대로 둔다 — 어두운 배경에선 밝혀야 같은 세기로 읽힌다. */
  --accent-ink:#f15a24;   /* 포인트 글자색 = 시그널 오렌지 원색 */
  --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;}

/* ★★브랜드 헤더 재배치 (2026-07-30 사용자 지시) — 로고=우측 / 컨트롤=좌측.
   ⚠️ 클래스 이름은 `.tb-admin`이지만 **관리자 전용이 아니다.** 2026-07-31 로그인/회원가입 → 클라이언트
      순으로 넓혀 지금은 전 화면이 이 배치다(조건은 sys-head.php의 `$__brandHeader` 하나뿐).
      이름을 바꾸려면 sys-head.php·styleguide 하니스까지 함께 고쳐야 해서 그대로 뒀다.
   ⚠️ 순서는 **CSS order로만** 잡는다 — 마크업을 전 화면이 공유해 물리적 재배치가 불가하다. */
/* ★2026-08-01 사용자 지시로 **다시 뒤집었다** — 로고=좌측 / 컨트롤=우측.
   (2026-07-30에 로고=우 / 컨트롤=좌로 바꿨던 것을 되돌린 것이다. 또 뒤집을 일이 생기면 이 두 줄만 맞바꾸면 된다.)
   ⚠️ 아래 컨트롤 개별 order(1~5)는 **그룹 안에서의 좌→우 순서**라 그대로 둔다 —
      그룹이 통째로 오른쪽으로 간 것이지 항목끼리 뒤집힌 게 아니다. */
.topbrand.tb-admin .brand-col{order:1;}      /* 로고 → 좌측 */
.topbrand.tb-admin .topbar-right{order:2;}   /* 컨트롤 → 우측 */
/* 컨트롤 그룹 안의 순서 L→R: 갤러리 · 다크/라이트 · 스킨 · 접속중 · 급행 */
.tb-admin .topbar-index{order:1;}
.tb-admin .theme-toggle{order:2;}
.tb-admin .skin-wrap{order:3;}   /* ⚠️ 2026-08-01 이후 flex 아이템은 버튼이 아니라 래퍼다(드롭다운 위치 기준) */
.tb-admin .online-wrap{order:4;}
.tb-admin .rush-btn{order:5;}
/* ⚠️★원래 버튼들은 우측 정렬용으로 `transform:scale(1.2)` + `transform-origin:right center` + 제각각 margin-left로 튜닝돼 있다.
   `transform:scale`은 **레이아웃 박스를 안 바꾼다** → 좌측 그룹에서 gap을 줘도 실제 간격이 6~21px로 들쭉날쭉해진다.
   그래서 tb-admin에서만 `zoom:1.2`로 바꾼다 — zoom은 레이아웃 박스까지 1.2배로 키우므로 flex gap이 **균일하게** 먹는다.
   ⚠️ zoom은 비표준이지만 최신 브라우저 전부 지원, 내부 도구라 문제없다. 비관리자 헤더는 기존 scale 그대로 둔다. */
.tb-admin .topbar-right{gap:16px;}
.tb-admin .topbar-index,
.tb-admin .rush-btn,
.tb-admin .online-btn,
.tb-admin .theme-toggle,
.tb-admin .skin-select{transform:none;zoom:1.2;}
.tb-admin .topbar-right > .rush-btn,
.tb-admin .topbar-right > .online-wrap,
.tb-admin .topbar-right .online-btn,
.tb-admin .topbar-right .theme-toggle,
.tb-admin .topbar-right .skin-select{margin-left:0;}   /* 래퍼가 생겨 `>`(직계)로는 안 잡힌다 — 후손 선택자여야 한다 */
.tb-admin .topbar-right > .skin-wrap{margin-left:0;}
/* 데스크톱 헤더 — 외곽 zoom 1.2는 유지하고 모드·스킨 글자만 약 2px 축소
   ⚠️ 2026-08-03 최초 도입 때는 `:not(.tb-login)`을 붙여 **로그인 페이지를 제외**했었다.
      그 결과 로그인 헤더 14.4px / 로그인 후 헤더 12.4px로 크기가 갈렸고, 사용자가 지적해 제외를 풀었다.
      로그인·가입 헤더와 로그인 후 헤더는 **같은 크기**여야 한다. `:not(.tb-login)`을 다시 붙이지 말 것. */
@media screen and (min-width:761px){
	.topbrand.tb-admin .theme-toggle .tt-state,.topbrand.tb-admin .skin-select .sk-cur{display:inline-block; transform:scale(.86); transform-origin:left center;}
}

/* ★갤러리 이동 버튼 — 다른 컨트롤과 **같은 뉴모 알약**(높이 38·scale 1.2·radius 19). 안에 ③ 심볼. */
.topbar-index{display:inline-flex;align-items:center;justify-content:center;flex:none;
  height:38px;padding:0 16px;cursor:pointer;text-decoration:none;color:var(--muted);
  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:center;-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, color .2s ease, background-color .5s ease;}
.topbar-index:hover{color:var(--text);}
.topbar-index:active{box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
.topbar-index .ti-logo{display:inline-flex;align-items:center;}
.topbar-index .ti-logo > svg{height:18px;width:auto;display:block;}
.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{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 박스(~50px)와 높이를 맞춘 값이다
                          (사용자: "관리자 쪽을 줄여서 맞춰"). ⚠️ 그 박스는 2026-08-01 제거됐지만 이 값은 **그대로 둔다** —
                          기준이 사라졌다고 되돌리면 사용자가 줄여 달라고 한 높이로 되돌아간다. 높이는 안쪽 로그아웃 필이 결정. */
.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-admin{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:4px;line-height:1.2;}
.side-id-admin-meta{display:flex;max-width:100%;align-items:center;gap:7px;font-size:12px;font-weight:540;color:var(--muted);white-space:nowrap;}
.side-id-admin .side-id-grade{margin-left:0;}
.side-id-admin-name{display:block;max-width:100%;font-size:13px;line-height:1.25;overflow-wrap:break-word;}
/* 로그아웃 = 오목 필 버튼 */
.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:12px;font-weight:500;color:var(--muted);margin-top:3px;letter-spacing:0;}

/* ★사이드바 갤러리 링크(`.side-index`)는 2026-08-01 제거됐다 — 헤더 `.topbar-index`와 중복.
   마크업(sys-head.php 양쪽 사이드바)·전용 CSS(.side-index/.si-arrow/.si-label/.si-logo) 모두 같은 커밋에서 걷었다.
   ⚠️ 심볼 파일 `assets/img/pg-logo-symbol.svg`는 **헤더 버튼이 계속 쓴다** — 지우지 말 것. */

/* ══ 클라 스킨 화면 — 업데이트 소식 · 추가 기능 (skin.php, 2026-08-01) ══════════
   ⚠️ 둘 다 **평면**이다. 이 화면은 이미 `.co-sec`(평면 섹션) 안이라 여기서 또 볼록을 주면
      섹션 안에 카드가 뜬 것처럼 보여 관리자 평면화(§2-2 ⓓ) 방향과 어긋난다. */
.news-list{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
.news-item{padding:14px 2px;border-bottom:1px solid var(--div-lo);}
.news-item:last-child{border-bottom:0;padding-bottom:2px;}
.news-head{display:flex;align-items:center;flex-wrap:wrap;gap:9px;}
/* 날짜 = 고정폭 숫자. 목록에서 세로로 자리가 맞아야 훑기 쉽다. */
.news-date{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted);flex:none;}
.news-title{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--text);}
.news-body{font-family:var(--sans);font-size:13.5px;line-height:1.75;color:var(--muted);margin-top:7px;}

/* 기능 카드 — 자동 채움 그리드. ⚠️ 고정 열수로 잡지 말 것(사이드바 때문에 콘텐츠 폭이 화면마다 다르다). */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;margin-top:6px;}
.feat-card{display:flex;flex-direction:column;gap:8px;padding:16px 17px;border-radius:14px;
  border:1px solid var(--div-lo);background:var(--chip);}
.feat-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.feat-name{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--text);}
.feat-sum{font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted);margin:0;flex:1;}
.feat-foot{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:2px;}
/* 금액 0 = "별도 협의" 문구가 들어온다(PHP). 0원으로 찍으면 공짜로 읽힌다 — 그 규칙은 화면 쪽 주석 참조. */
.feat-price{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--link);}
@media (max-width:560px){ .feat-grid{grid-template-columns:1fr;} }

/* 매뉴얼 본문 · 버전 줄 (manual_view.php, 2026-08-01) */
.man-vers{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 0 22px;}
.man-ver{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:11px;text-decoration:none;
  border:1px solid var(--div-lo);background:var(--chip);
  font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted);
  transition:color .2s ease, border-color .2s ease;}
.man-ver span{font-family:var(--sans);font-size:12px;opacity:.75;}
.man-ver:hover{color:var(--text);border-color:var(--accent-ink);}
/* 지금 보고 있는 버전 = 포인트 컬러 채움. ⚠️ 다크 짝을 같이 선언한다(`.sk-pin.on` 특이도 사고와 같은 계열). */
.man-ver.on,
:root[data-theme="dark"] .man-ver.on{background:var(--accent);border-color:var(--accent);color:#fff;}
/* ── 매뉴얼 목차: 검색 + 그룹 탭 (manual.php, 2026-08-01) ─────────────────
   ⚠️ 검색창은 오목(인셋), 탭은 평면 칩이다. 둘 다 볼록으로 하면 아래 목록 카드와 층이 겹쳐 시끄럽다. */
.mn-search{position:relative;display:flex;align-items:center;gap:10px;margin:0 0 14px;
  padding:0 16px;height:52px;border-radius:16px;background:var(--field-bg);
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
:root[data-skin="paper"] .mn-search{box-shadow:none;border:1px solid var(--div-lo);}
.mn-search .ms-ico{width:18px;height:18px;flex:none;color:var(--muted);}
.mn-search input{flex:1;min-width:0;border:0;outline:0;background:none;
  font-family:var(--sans);font-size:14.5px;color:var(--text);}
.mn-search input::placeholder{color:var(--ph);}
.ms-clear{flex:none;width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;
  background:var(--chip);color:var(--muted);font-size:16px;line-height:1;}
.ms-clear:hover{color:var(--text);}
/* 추천 검색어 — 입력칸 **아래에 붙는 줄**이다(레이어 아님). 레이어로 띄우면 목록을 가려 되레 답답하다. */
.ms-sug{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:40;
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:12px 14px;border-radius:14px;
  background:var(--panel-bg);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:1px solid var(--panel-edge);box-shadow:var(--panel-shadow);}
.ms-sug[hidden]{display:none;}
.ms-sug-lbl{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);margin-right:3px;}
.ms-chip{border:1px solid var(--div-lo);background:var(--chip);cursor:pointer;
  padding:5px 11px;border-radius:11px;font-family:var(--sans);font-size:12.5px;color:var(--text);
  transition:border-color .2s ease, color .2s ease;}
.ms-chip:hover{border-color:var(--accent);color:var(--accent-ink);}

.mn-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px;}
.mn-tab{border:1px solid var(--div-lo);background:none;cursor:pointer;
  padding:8px 15px;border-radius:12px;font-family:var(--sans);font-size:13px;font-weight:540;color:var(--muted);
  transition:color .2s ease, background-color .2s ease, border-color .2s ease;}
.mn-tab:hover{color:var(--text);}
/* ⚠️ 다크 짝을 같이 선언한다 — 상태 규칙이 테마 규칙에 밀리는 사고가 이 파일에서 두 번 났다. */
.mn-tab.on,
:root[data-theme="dark"] .mn-tab.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:620;}
.mn-sec[hidden]{display:none;}

/* ── 매뉴얼 본문 조판 (본문은 manuals/ 파일이 만든 HTML — 클래스 접두사 `mn-`) ──
   ⚠️ 여기 클래스를 바꾸면 **매뉴얼 파일 전부**를 같이 고쳐야 한다. 이름을 늘리는 건 자유, 바꾸는 건 비싸다. */
.man-body{font-family:var(--sans);font-size:14.5px;line-height:1.85;color:var(--text);word-break:break-word;}
.man-body > *:first-child{margin-top:0;}
.mn-lead{font-size:15.5px;line-height:1.8;color:var(--text);margin:0 0 26px;}
.mn-h{font-family:var(--sans);font-size:17px;font-weight:700;color:var(--title-ink);
  margin:34px 0 12px;padding-top:20px;border-top:1px solid var(--div-lo);}
.man-body > .mn-h:first-child{border-top:0;padding-top:0;margin-top:0;}
.mn-h4{font-size:14.5px;font-weight:660;color:var(--text);margin:20px 0 8px;}
.man-body p{margin:0 0 12px;}
/* 경로 안내 = 클릭 순서. 등폭 글꼴로 두어 본문과 구분한다. */
.mn-path{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--text);
  background:var(--chip);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  padding:12px 16px;margin:0 0 16px;}
.mn-path b{font-weight:700;}
/* 번호 단계 */
.mn-step{display:flex;gap:12px;align-items:flex-start;margin:0 0 10px;}
.mn-step > b{flex:none;width:23px;height:23px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:3px;}
.mn-step > div{flex:1;min-width:0;}
/* 코드·소스 조각 — 가로로 넘치면 그 안에서만 스크롤(페이지는 안 밀린다) */
.mn-code{font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--text);
  background:var(--field-bg);border:1px solid var(--div-lo);border-radius:10px;
  padding:14px 16px;margin:0 0 16px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;}
.mn-code b{font-weight:400;}
/* ★고쳐야 할 부분만 포인트 컬러로 — "여기만 바꾸세요"가 한눈에 보여야 한다 */
.mn-hi{color:var(--accent-ink);font-weight:700;background:rgba(241,90,36,.10);padding:1px 4px;border-radius:4px;}
:root[data-theme="dark"] .mn-hi{background:rgba(255,122,69,.16);}
.man-body code{font-family:var(--mono);font-size:.92em;background:var(--chip);padding:2px 6px;border-radius:5px;}
/* ★본문 안 링크 — 다른 매뉴얼로 건너가는 길(`manual_view.php?f=경로`)과 외부 안내 링크가 여기 걸린다.
   ⚠️ 밑줄을 빼지 말 것. 매뉴얼은 인쇄(PDF)로도 보는데, 색만으로는 링크인지 안 보인다. */
.man-body a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.man-body a:hover{text-decoration-thickness:2px;}
.mn-table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:13.5px;}
.mn-table th,.mn-table td{border:1px solid var(--div-lo);padding:9px 12px;text-align:left;vertical-align:top;line-height:1.65;}
.mn-table th{background:var(--chip);font-weight:660;color:var(--title-ink);white-space:nowrap;}
.mn-list{margin:0 0 16px;padding-left:20px;}
.mn-list li{margin-bottom:7px;}
/* 참고(조용) / 경고(포인트) — 둘의 무게가 달라야 경고가 경고로 읽힌다 */
.mn-note{background:var(--chip);border-radius:11px;padding:13px 16px;margin:0 0 16px;font-size:13.5px;line-height:1.75;color:var(--muted);}
.mn-note strong{color:var(--text);}
.mn-warn{background:rgba(241,90,36,.08);border:1px solid rgba(241,90,36,.28);border-radius:11px;
  padding:13px 16px;margin:0 0 16px;font-size:13.5px;line-height:1.75;}
:root[data-theme="dark"] .mn-warn{background:rgba(255,122,69,.11);border-color:rgba(255,122,69,.3);}
.mn-warn p:last-child{margin-bottom:0;}
@media (max-width:560px){
  .mn-table{font-size:12.5px;}
  .mn-table th,.mn-table td{padding:7px 9px;}
  .mn-table th{white-space:normal;}
}

/* 클라 업체 정보 (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:12px;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:12px;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:12px;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;}
/* 일반 = 볼록, 활성 = 오목+짙은 잉크 (반전 시안 검토 후 이 방향으로 확정) */
/* ⚠️★2026-07-30 — display:block → **flex**. 라벨 왼쪽에 아이콘이 들어왔기 때문이다(nav_icon()).
   뉴모(soft)는 **알약을 유지**한다(시안 B, 사용자 선택). 페이퍼는 평면 행(시안 A)으로 아래 PAPER 블록에서 갈린다. */
.side-nav a{display:flex;align-items:center;gap:11px;padding:13px 17px;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);}

/* ★★그룹 소제목 (2026-07-30) — 13개를 4덩어리로 끊는다.
   ⚠️★**이게 1차 구별 수단이다**(사용자 지시). 처음엔 10.5px·`--ph`·자간 .07em으로 얇게 넣었다가
      "너무 작고 잘 보이지 않는다"는 지적을 받고 다시 설계했다. 원칙 3가지:
        ① **읽히는 크기**로 — 13px/700. 메뉴 항목(14.5px)보다 작되 '읽는 글자'여야 한다.
        ② **자간을 넓히지 않는다** — 한글은 자간을 벌리면 되레 덩어리로 안 읽힌다(옛 .07em이 그랬다).
        ③ 색은 `--title-ink`(페이지 제목과 같은 급) — 항목보다 진해야 머리글로 읽힌다.
      ⚠️ 다시 작게 줄이지 말 것. 세로가 아쉬우면 **항목 padding을 줄이는 쪽**이 먼저다.
   ⚠️ 위는 넓게 아래는 좁게 — 라벨은 **아래 항목들과 한 덩어리**로 붙어야 한다.
      `.side-nav`가 `gap:12px` flex라 위아래로 12px이 이미 붙는다. 아래 마진이 음수인 건 그 gap을 되돌리는 것. */
.nav-gl{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:0;line-height:1.35;
  color:var(--title-ink);padding:0 6px;margin:20px 0 -2px;}
.nav-gl:first-child{margin-top:0;}

/* ★메뉴 아이콘 — 라벨 **왼쪽**. `currentColor`라 테마·활성 색을 그대로 물려받는다
   (그래서 페이퍼 활성에서 자동으로 오렌지가 된다 — 색을 따로 지정하지 말 것). */
.side-nav .nav-ico{width:17px;height:17px;flex:none;opacity:.55;transition:opacity .2s ease;}
.side-nav a:hover .nav-ico{opacity:.8;}
.side-nav a.on .nav-ico{opacity:1;}
/* 텍스트는 남는 폭을 다 쓰고, 배지는 오른쪽 끝으로 밀린다 */
.side-nav a > span:not(.nav-badge){flex:1;min-width:0;}

/* 좁은 화면: 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;}
  /* ⚠️ 가로 칩 모드에선 그룹 라벨이 칩 사이에 끼어 칩처럼 읽힌다 → **한 줄을 통째로 차지**하게 해
     그룹이 줄 단위로 끊기게 한다(라벨을 숨기면 그룹이 사라져 13개 나열로 되돌아간다). */
  .nav-gl{flex-basis:100%;margin:10px 0 0;}
  .nav-gl:first-child{margin-top:0;}
  .side-nav a > span:not(.nav-badge){flex:none;}   /* 칩은 내용만큼만 — flex:1이면 한 줄에 하나씩 늘어난다 */
}

/* 넓은 콘텐츠 컨테이너 */
.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);}
/* 고객 화면의 접수→견적 확인은 하나의 상위 단계이므로 같은 보라색으로 연결한다. */
.client-app .dot.bs-submitted,.client-app .dot.bs-quoting,.client-app .dot.bs-quoted,.client-app .dot.bs-approving{background:var(--st-violet);}
.client-app .dot.bs-in_progress{background:var(--accent);}

/* 빈 상태 */
/* 빈 상태 — 텍스트가 허공에 뜨지 않게 점선 영역으로 감싸고, 아이콘 + 제목/부가 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;}
/* 빈 화면의 셋째 줄 = 보조 안내(문의 링크 등). 본문보다 한 급 작고 흐리게 — 지시가 아니라 곁들임이다. */
.empty-sub{font-size:12.5px;opacity:.8;}

/* 인라인/보조 버튼 (page-head 액션 등 — 폭 자동) */
/* ★2026-08-07 — `.inline`·`.sm`도 **평면**이다(뉴모 볼록 제거). 버튼은 전부 그림자를 갖지 않는다.
   ⚠️ 등장 애니메이션(inConvexBtn)도 그림자를 되살리므로 함께 껐다 — 아래 `html.pt-anim` 블록 참조. */
.btn.inline,.btn.sm{width:auto;box-shadow:none;background:var(--chip);color:var(--link);
  border:0;animation:none;}
.btn.inline:hover,.btn.sm:hover{box-shadow:none;background:var(--chip-h);color:var(--link-h);}
.btn.inline:active,.btn.sm:active{box-shadow:none;transform:none;}
.btn.inline::before,.btn.inline::after,
.btn.sm::before,.btn.sm::after{display:none;}
.btn.inline{padding:13px 24px;font-size:14.5px;}
.btn.sm{padding:10px 18px;font-size:14px;}

/* 더보기 링크 버튼 — 양각 필 + 음각 원 안 화살표(SVG) */
.more-btn{display:inline-flex;align-items:center;gap:11px;padding:10px 11px 10px 20px;border-radius:999px;
  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;}

/* 수정요청 상세 상단 도구 — 뒤로가기와 삭제 아이콘을 양끝에 배치 */
.batch-detail-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;}
.batch-detail-tools .back{margin:0;}
.batch-return-form{display:flex;margin:0;}
.batch-return-form .back{cursor:pointer;}
.batch-delete-form{display:flex;margin:0 0 0 auto;}
.batch-delete-btn{justify-content:center;width:38px;height:38px;padding:0;cursor:pointer;color:var(--muted);}
.batch-delete-btn:hover{color:var(--err);}
.batch-delete-btn::before{display:none;}
.batch-delete-btn svg{display:block;width:16px;height:16px;}

/* 용어사전 카드 (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;}
.glossary-card{max-width:min(780px,calc(100vw - 48px));}
.glossary-body{margin-bottom:0;}
.glossary-lead{margin:0 0 16px;font-family:var(--sans);font-size:13px;line-height:1.65;color:var(--muted);}
.glossary-modal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.glossary-modal-item{min-width:0;padding:16px 18px;border:1px solid rgba(255,255,255,.52);border-radius:14px;background:var(--chip);}
.glossary-modal-item .gloss-desc{font-size:12.5px;}
.glossary-modal-item .gloss-img{width:100%;height:auto;}

/* ── 폼 확장: 라벨 · 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;}
/* 수정요청 항목 추가 폼 — 셀렉트는 낮게, 플레이스홀더는 보조 텍스트 크기로 */
.batch-add select.field{height:44px;padding:0 46px 0 18px;border-radius:22px;font-size:13.5px;}
.batch-add .field::placeholder{font-size:12.5px;letter-spacing:0;}
.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:0;border-radius:999px;background:var(--chip);appearance:none;-webkit-appearance:none;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-status.is-reviewing::before{background:var(--st-amber);}
.item-status.is-rejected::before{background:var(--err);}
.item-body{font-family:var(--sans);font-size:14.5px;line-height:1.85;color:var(--text);padding:10px 0 12px;}   /* 헤더줄·링크영역과 본문 사이 여백 */

/* ── ★수정 항목 1차 안내(2026-08-06) ──────────────────────────
   관리자: 셀렉트 대신 확인중·기술검토중·작업불가 3버튼 + 인라인 안내 입력.
   고객: 항목 카드에 인라인 안내 박스(채팅 아님). */
/* 종류 선택 = 라디오 pill(폼 필드). 고르면 :has()로 아래 입력 영역이 열린다(JS 불필요). */
.triage-picks{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.triage-pick{cursor:pointer;margin:0;}
.triage-pick input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none;}
.triage-pick span{display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--muted);
  background:var(--chip);border:1px solid transparent;border-radius:999px;padding:6px 14px;
  transition:color .15s,background .15s;}
.triage-pick:hover span{color:var(--text);background:var(--chip-h);}
.triage-pick input:checked + span{color:var(--bg);background:var(--st-amber);}
.triage-pick.danger span{color:var(--err);}
.triage-pick.danger input:checked + span{color:#fff;background:var(--err);}
.triage-pick input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px;}
/* 라디오를 고르기 전엔 입력·등록 버튼을 감춘다(순수 CSS). */
.triage-body{display:none;margin-top:11px;}
.triage-form:has(.triage-pick input:checked) .triage-body,
.triage-form.triage-open .triage-body{display:block;}
/* 안내 해제 = 별도 액션(종류 미선택과 구분). 조용한 보조 버튼. */
.triage-clear-row{margin:8px 0 0;}
.triage-clear-btn{border:0;background:none;cursor:pointer;font-family:var(--sans);font-size:12px;color:var(--muted);
  text-decoration:underline;text-underline-offset:2px;padding:2px 0;}
.triage-clear-btn:hover{color:var(--err);}
.triage-note{width:100%;box-sizing:border-box;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--text);
  background:var(--field-bg);border-radius:11px;padding:12px 14px;resize:vertical;
  box-shadow:var(--well);border:0;outline:0;}
.triage-form-foot{display:flex;align-items:center;gap:10px;margin-top:8px;}
.triage-hint{flex:1;min-width:0;font-family:var(--sans);font-size:12px;color:var(--muted);line-height:1.4;}
/* 등록 버튼 = 우측 정렬·다크 플랫(그림자 없음)·화이트 텍스트. 견적 발송보다 튀지 않게. */
/* ★주 액션 버튼 = **블랙 계열 평면**(2026-08-06 사용자 확정 · 전역 규칙) ────────────
   승인·등록·발송처럼 그 화면의 주 동작은 포인트 컬러(주황)가 아니라 **어두운 배경 + 흰 글씨 · 그림자 없음**.
   포인트 컬러는 강조·상태 표시용으로 남긴다(버튼에 쓰면 화면마다 주황이 번져 위계가 죽는다).
   ⚠️ 한 줄에 놓인 보조 버튼(.chip-btn.sm)과 **높이·모서리를 맞춘다** — min-height 40 / radius 14 (§2-2-1). */
.btn-ink,.triage-submit{display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-height:40px;padding:0 22px;border:0;cursor:pointer;border-radius:999px;white-space:nowrap;
  font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1;
  color:#fff;background:#2a2925;box-shadow:none;transition:background .15s ease;}
.btn-ink:hover,.triage-submit:hover{background:#111;color:#fff;}
.triage-submit{margin-left:auto;}
:root[data-theme="dark"] .btn-ink,:root[data-theme="dark"] .triage-submit{background:#4a4842;color:#fff;}
:root[data-theme="dark"] .btn-ink:hover,:root[data-theme="dark"] .triage-submit:hover{background:#5a5852;}
/* 고객·관리자 공통 인라인 안내 박스 — 좌측 색 바로 종류를 구분. */
.item-notice{display:flex;flex-direction:column;gap:3px;margin-top:12px;padding:11px 14px;border-radius:11px;
  background:var(--chip);border-left:3px solid var(--st-gray);}
.item-notice.nk-checking{border-left-color:var(--st-blue);}
.item-notice.nk-reviewing{border-left-color:var(--st-amber);}
.item-notice.nk-reject{border-left-color:var(--err);background:color-mix(in srgb,var(--err) 6%,var(--chip));}
.item-notice-k{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);}
.item-notice.nk-reject .item-notice-k{color:var(--err);}
.item-notice-b{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--text);}
/* 「고객 안내」 전용 섹션(batch.php · 관리자) — 항목별 안내 행. 접수 항목과 견적 입력 사이. */
.triage-rows{display:flex;flex-direction:column;gap:12px;}
.triage-row{padding:15px 17px;border-radius:14px;background:var(--bg);box-shadow:var(--raise,3px 3px 8px rgba(var(--shadow),.5),-3px -3px 8px rgba(var(--hilite),.8));}
.triage-row-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px;}
.triage-row-no{flex:none;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--chip);border-radius:50%;}
.triage-row-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;}
.triage-row-body{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--sans);font-size:14px;color:var(--text);}
.triage-row-head .item-status{margin-left:auto;flex:none;}
.triage-row .triage-form{margin-top:11px;}
.triage-row .item-notice{margin-top:11px;}
/* 보낸 내역 — 항목별 발송 로그. 최근순, 종류·메일여부·시각·원문. 맨 위가 현재 표시분이면 강조. */
.triage-hist-wrap{margin-top:12px;border-top:1px dashed var(--div-lo);padding-top:11px;}
.triage-hist-t{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);}
.triage-hist-n{display:inline-block;min-width:17px;padding:0 5px;margin-left:4px;text-align:center;font-family:var(--mono);font-size:11px;
  color:var(--muted);background:var(--chip);border-radius:9px;}
.triage-hist-list{list-style:none;margin:10px 0 2px;padding:0;display:flex;flex-direction:column;gap:8px;}
.triage-hist-item{padding:9px 12px;border-radius:10px;background:var(--chip);border-left:3px solid var(--st-gray);}
.triage-hist-item.nk-checking{border-left-color:var(--st-blue);}
.triage-hist-item.nk-reviewing{border-left-color:var(--st-amber);}
.triage-hist-item.nk-reject{border-left-color:var(--err);}
.triage-hist-item.is-current{background:color-mix(in srgb,var(--st-amber) 8%,var(--chip));}
.triage-hist-item.nk-reject.is-current{background:color-mix(in srgb,var(--err) 7%,var(--chip));}
.triage-hist-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px;}
.triage-hist-kind{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--text);}
.triage-hist-item.nk-reject .triage-hist-kind{color:var(--err);}
.triage-hist-cur{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--st-amber);
  background:color-mix(in srgb,var(--st-amber) 14%,transparent);padding:1px 7px;border-radius:8px;}
.triage-hist-item.nk-reject .triage-hist-cur{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent);}
.triage-hist-mail{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--st-blue);
  background:color-mix(in srgb,var(--st-blue) 12%,transparent);padding:1px 7px;border-radius:8px;}
.triage-hist-time{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);}
.triage-hist-note{display:block;font-family:var(--sans);font-size:13px;line-height:1.6;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-card.is-editable .item-top{padding-right:132px;}   /* 수정·삭제 칩 2개가 상태 배지를 가리지 않도록 */
.item-del{position:absolute;top:15px;right:18px;display:flex;gap:6px;}
.item-del .chip-btn{height:28px;min-height:28px;padding:0 12px;border-radius:999px;font-size:12px;line-height:1;}

/* ── 견적 입력 워크시트 (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) 1.1fr 120px 130px;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: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);}
.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);}
/* ★주 액션이므로 전역 규칙을 따른다(2026-08-07 통일): 뉴모=블랙 / 페이퍼=오렌지 · 평면 · 알약.
   예전엔 뉴모 볼록 + 오렌지 **글씨**였다. 오렌지 글씨로 되돌리지 말 것. */
.btn.inline.primary{background:#2a2925;color:#fff;font-weight:600;padding:13px 30px;font-size:14.5px;
  border:0;box-shadow:none;}
.btn.inline.primary:hover{background:#111;color:#fff;box-shadow:none;}
:root[data-theme="dark"] .btn.inline.primary{background:#4a4842;color:#fff;}
:root[data-theme="dark"] .btn.inline.primary:hover{background:#5a5852;}
:root[data-skin="paper"] .btn.inline.primary{background:var(--accent);color:#fff;}
:root[data-skin="paper"] .btn.inline.primary:hover{background:var(--accent-ink);color:#fff;}
:root[data-skin="paper"][data-theme="dark"] .btn.inline.primary,
:root[data-skin="paper"][data-theme="dark"] .btn.inline.primary:hover{color:#231f1b;}

/* 좁은 화면: 견적 행 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;}   /* 직접 입력 필드와 저장 단가 선택 모두 전체폭 */
  .qf-cat{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding-top:2px;}
  .qf-cat .qr-cat{flex:0 0 136px;width:136px;height:40px;}
  .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:12px;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-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 0 18px;padding:7px;border-radius:18px;background:var(--bg);box-shadow:inset 2px 2px 6px rgba(var(--shadow),.84),inset -2px -2px 6px rgba(var(--hilite),.88);}
.review-stat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:70px;padding:13px 14px;border-radius:13px;color:var(--text);}
.review-stat-label{display:flex;align-items:center;gap:7px;min-width:0;font-family:var(--sans);font-size:12px;font-weight:560;color:var(--muted);}
.review-stat-label i{display:block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--muted);}
.review-stat-label i.is-quote{background:var(--st-violet);}
.review-stat-label i.is-payment{background:var(--st-orange);}
.review-stat-label i.is-progress{background:var(--accent);}
.review-stat-label i.is-done{background:var(--c-success);}
.review-stat-label i.is-approved{background:var(--st-green);}
.review-stat-label i.is-inquiry{background:var(--st-amber);}
.review-stat-label i.is-cancelled{background:var(--st-gray);}
.review-stat-label i.is-undecided{background:var(--st-violet);}
.review-stat > strong{font-family:var(--mono);font-size:23px;font-weight:520;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;}
.review-stat.is-active{background:var(--chip);}
:root[data-skin="paper"] .review-stats{border:1px solid var(--edge-lo);box-shadow:none;}
@media (max-width:640px){
  .review-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .review-stat{min-height:66px;padding:12px;}
  .review-stat-label{font-size:12.5px;}
  .review-stat > strong{font-size:21px;}
}
.review-side{flex:1;min-width:280px;display:flex;flex-direction:column;gap:14px;align-items:flex-end;}
/* ── 결정 단계(is-decide) 전용 2열 레이아웃 (2026-08-03 사용자 지시) ──
   좌: 견적 요약 + `전체 요청 취소` / 우: 혜택·결제 + `최종 승인하기`
   ⚠️★ 두 버튼을 **같은 가로선**에 세우는 방법 = 컬럼을 `align-items:stretch`로 같은 높이로 늘리고
        각 컬럼에서 버튼을 `margin-top:auto`로 바닥에 붙인다. 좌표·JS 계산 없음.
        `.quote-foot`의 기본값은 `align-items:flex-start`라 is-decide에서만 덮는다
        (다른 상태 화면의 details 접힘 레이아웃을 건드리면 안 된다).
   ⚠️ 버튼 형태 통일은 §2-2-1 전역 규칙("한 줄에 놓인 버튼은 형태·높이를 맞춘다")을 따른 것이다. */
.quote-foot.is-decide{align-items:stretch;}
.quote-foot.is-decide .quote-main{flex:1;min-width:300px;max-width:480px;display:flex;flex-direction:column;gap:14px;}
.quote-foot.is-decide .quote-main > .quote-summary{flex:none;min-width:0;max-width:none;}
/* ⚠️ 버튼 위 여백 확보 (2026-08-03 지시). `margin-top:auto`는 슬랙을 다 먹으므로
   그 위에 여백을 더 주려면 **앞 요소 쪽에서** 밀어야 한다. 양쪽 컬럼이 같은 높이로 늘어나므로
   두 컬럼 모두에 같은 값(합계 48px)을 넣어야 버튼 가로선이 유지된다.
   좌 = .cancel-form padding-top 34 + .quote-main gap 14 / 우 = 경고문 margin-bottom 36 + .final-form gap 12 */
.quote-foot.is-decide .cancel-form{align-self:flex-start;margin-top:auto;padding-top:34px;}
.quote-foot.is-decide .final-form{flex:1;}
.quote-foot.is-decide .final-form > .benefit-pay-warning{margin-bottom:36px;}
.quote-foot.is-decide .final-form > .btn.inline.primary{margin-top:auto;}
.quote-foot.is-decide .final-form > .btn.inline.primary,
.quote-foot.is-decide .cancel-form > .chip-btn{height:52px;min-height:52px;padding:0 30px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:14.5px;}
@media (max-width:980px){
  .quote-foot.is-decide .quote-main{max-width:none;}
  .quote-foot.is-decide .cancel-form{align-self:stretch;margin-top:0;padding-top:18px;}
  .quote-foot.is-decide .final-form > .benefit-pay-warning{margin-bottom:20px;}
  .quote-foot.is-decide .cancel-form > .chip-btn{width:100%;}
}
.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;}
/* 진행률 바 — 짧고 선명하게 파인 공통 트랙 + 단색 포인트 필 */
.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:12px;overflow:hidden;border-radius:6px;background:color-mix(in srgb,var(--shadow) 3%,var(--bg));box-shadow:inset 1px 1px 2px rgba(var(--shadow),.9),inset -1px -1px 1px rgba(var(--hilite),.72);}
.prog-fill{display:block;height:100%;min-width:0;border-radius:inherit;background:var(--accent);transition:width .6s ease;}
:root[data-theme="dark"] .prog-fill{background:var(--accent);}
/* ── 목록용 얇은 진행 바 (board.php 행, 2026-08-01) ─────────────────────
   ⚠️ 상세와 같은 홈·같은 색을 쓰고 높이만 줄인다. */
.row-prog{display:flex;align-items:center;gap:10px;margin-top:9px;max-width:320px;}
.prog-track.prog-sm{height:6px;min-width:0;flex:1;border-radius:3px;box-shadow:inset .75px .75px 1.5px rgba(var(--shadow),.88),inset -.75px -.75px 1px rgba(var(--hilite),.68);}
:root[data-skin="paper"] .prog-track.prog-sm{box-shadow:none;border:1px solid var(--div-lo);}
.prog-track.prog-sm .prog-fill{border-radius:3px;}
/* 숫자는 고정폭 — 행마다 자리가 흔들리면 목록이 지저분해진다. */
.rp-txt{flex:none;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);}

/* 워크시트(관리자) 항목 결정 상태 태그 */
.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:12px;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:12px;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:999px;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(--field-bg);border:0;outline:0;
  padding:12px 16px;border-radius:12px;box-shadow:var(--well);}
.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:12px;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;}
/* ── 업체 상세: 삭제 데이터 보관함 ─────────────────────────── */
.company-data{scroll-margin-top:28px;}
.data-archive-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.data-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:5px;padding:0 7px;border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);background:var(--bg);box-shadow:inset 1px 1px 3px rgba(var(--shadow),.75),inset -1px -1px 3px rgba(var(--hilite),.9);}
.data-archive-list{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.data-archive-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 18px;border-radius:16px;background:var(--bg);border-top:1px solid var(--edge-hi);border-left:1px solid var(--edge-hi);box-shadow:4px 4px 10px rgba(var(--shadow),.65),-4px -4px 10px rgba(var(--hilite),.78);}
.data-archive-row.is-restored{opacity:.7;}
.data-archive-main{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;}
.data-archive-title{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15px;font-weight:650;color:var(--title-ink);}
.data-archive-state{display:inline-flex;align-items:center;min-height:23px;padding:0 9px;border-radius:999px;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted);background:var(--bg);box-shadow:inset 1.5px 1.5px 4px rgba(var(--shadow),.8),inset -1.5px -1.5px 4px rgba(var(--hilite),.9);}
.data-archive-summary{font-family:var(--sans);font-size:12.5px;color:var(--text);}
.data-archive-meta{font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--muted);}
.data-archive-actions{display:flex;align-items:center;gap:8px;flex:none;}
.data-archive-actions form{display:flex;margin:0;}
.data-archive-empty{margin-top:14px;padding:18px;border:1px solid var(--div-lo);border-radius:14px;font-family:var(--sans);font-size:13px;color:var(--muted);text-align:center;}
:root[data-skin="paper"] .data-archive-row{border:1px solid var(--edge-lo);box-shadow:none;}
:root[data-skin="paper"] .data-count,:root[data-skin="paper"] .data-archive-state{border:1px solid var(--edge-lo);box-shadow:none;}
@media (max-width:640px){
  .data-archive-row{align-items:stretch;flex-direction:column;gap:14px;padding:16px;}
  .data-archive-title{align-items:flex-start;justify-content:space-between;font-size:15px;}
  .data-archive-summary{font-size:13px;line-height:1.55;}
  .data-archive-meta{font-size:11.5px;}
  .data-archive-actions{width:100%;}
  .data-archive-actions > .chip-btn,.data-archive-actions > form{flex:1;}
  .data-archive-actions form .chip-btn{width:100%;}
}
.co-form{margin:16px 0 6px;}                  /* 새 업체 접기 폼 — 카드 없이 평면, 콘텐츠 풀폭 */
/* ★주 액션 버튼 — **솔리드 브랜드 오렌지**(2026-07-29 사용자 지시).
   기존엔 배경이 --bg라 뉴모/페이퍼 어느 쪽에서도 버튼인지 안 보였다(그림자에만 의존).
   ⚠️ 색 하나로 4조합(soft/paper × 라이트/다크)을 다 덮는다 — 스킨 변수(--accent)에만 기대므로 스킨별 예외가 필요 없다.
   ⚠️ 글자색은 **테마별로 다르다**: 라이트 오렌지(#f15a24) 위엔 흰 글자, 다크 오렌지(#ff7a45)는 밝아서 흰 글자가 묻힌다 → 잉크색.
      한 값으로 통일하면 반드시 한쪽이 죽는다(로고 --logo-fill과 같은 이유). */
/* ★★2026-08-07 전면 통일 — 주 액션 버튼은 **블랙 평면 · 폭 auto · 우측**이다.
   그전엔 솔리드 오렌지 + `width:100%`였다. 두 가지 문제가 있었다:
     ⓐ 오렌지가 화면마다 번져 포인트 컬러의 위계가 죽었다(강조·상태 표시와 구분이 사라짐).
     ⓑ 폭 100%가 **기본**이라 줄에 놓을 때마다 개별로 해제해야 했고, 빠뜨리면 저장 버튼이 가로 전체를 먹었다.
   ⇒ `.btn-ink`(2026-08-06 확정)와 **완전히 같은 생김새**로 맞춘다. 정본 = 디자인시스템 §5.
   ⚠️ 포인트 오렌지는 강조·상태·배지에만. **버튼에 되돌리지 말 것.**
   ⚠️ 예외 = **메일 템플릿 CTA**(lib/mailer.php)는 오렌지 알약이다. 웹과 별개 매체로 확정했다. */
.btn.solid,.co-create{display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-width:190px;min-height:44px;padding:0 34px;margin-top:0;
  border:0;border-radius:999px;white-space:nowrap;
  font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1;
  background:#2a2925;color:#fff;box-shadow:none;transition:background .15s ease;}
.btn.solid::before,.btn.solid::after,
.co-create::before,.co-create::after{display:none;}   /* 뉴모 하이라이트 라인 = 솔리드 면에선 얼룩으로 보인다 */
.btn.solid:hover,.co-create:hover{background:#111;color:#fff;box-shadow:none;}
.btn.solid:active,.co-create:active{transform:none;box-shadow:none;}
:root[data-theme="dark"] .btn.solid,
:root[data-theme="dark"] .co-create{background:#4a4842;color:#fff;}
:root[data-theme="dark"] .btn.solid:hover,
:root[data-theme="dark"] .co-create:hover{background:#5a5852;}
/* 문의·공지 = 리스트 레코드 카드 — 뉴모 볼록 제거하고 평면 보더 카드로(항목 구분은 유지) */
.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 사용자 지시). */
/* ⚠️★`.btn.save-bar-main`으로 쓴다 — `.btn.solid{width:100%}`(특이도 0,2,0)가
   `.save-bar-main`(0,1,0)을 이겨 **저장이 가로 전체로 늘어나고 줄이 넘어갔다**(2026-08-07 발견).
   클래스 하나짜리 선택자로 되돌리지 말 것. */
.btn.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;   /* 주 버튼(14px)과 같은 모서리 */
  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;}
  .btn.save-bar-main{width:100%;min-width:0;}   /* ⚠️ 위와 같은 특이도(0,2,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:12px;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:12px;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:12px;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:12px;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:12px;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:12px;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:12px;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:12px;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:var(--panel-bg);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:1px solid var(--panel-edge);border-radius:18px;padding:14px;box-shadow:var(--panel-shadow);}
.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:12px;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:12px;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:12px;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:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.log-admin{flex:none;font-family:var(--sans);font-size:12px;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:var(--scrim-bg);-webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur);}
.glass-overlay[hidden]{display:none;}
body.bodyLock{position:fixed;width:100%;overflow-y:scroll;}
.glass-card{width:100%;max-width:440px;max-height:86vh;overflow:auto;border-radius:20px;padding:22px 24px;
  background:var(--panel-bg);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:1px solid var(--panel-edge);box-shadow:var(--panel-shadow);
  animation:glassIn .26s cubic-bezier(.2,.7,.3,1);}
@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;}
/* 제목은 flex — 뒤에 배지 등이 붙어도 세로 가운데 정렬(2026-08-06 확정). */
.glass-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.2;color:var(--text);}
.glass-close{flex:none;width:34px;height:34px;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:15px;height:15px;}
.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:999px;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:12px;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:12px;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:12px;letter-spacing:.04em;color:var(--muted);background:var(--chip);padding:2px 8px;border-radius:7px;}
.comment-time{font-family:var(--mono);font-size:12px;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 !important;}
html.pt-anim .field::placeholder{transition:color .28s ease !important;}
html.pt-anim .tb-login .brand-col,
html.pt-anim .title,
html.pt-anim .signup,
html.pt-anim .divider,
html.pt-anim .divider::after,
html.pt-anim .bf-gallery,
html.pt-anim .botfoot,
html.pt-anim .notice,
html.pt-anim .shell,
html.pt-anim .reveal{transition:opacity .28s ease !important;}
html.pt-anim .tb-login .lockup-word{transition:transform .28s ease !important;transform-origin:center;}

/* 등장(로드) 전용 — 퇴장(.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:opacity .9s ease, color .9s ease !important;}
html.pt-anim:not(.pt-exit) .field::placeholder{transition:color .9s ease !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;}
/* ★로그인 워드마크는 SVG 내부가 아니라 HTML 래퍼를 폼과 같은 리빌 프레임에서 직접 전환한다.
   iOS WebKit에서도 확실히 보간되는 opacity(brand-col) + scale(lockup-word) 조합이며, 완성된 SVG 베벨 필터는 그대로 유지한다. */
html.pt-anim:not(.pt-exit) .tb-login .lockup-word{
  transition:transform 1.2s cubic-bezier(.3,.5,.3,1) !important;transform-origin:center;}
/* ★로그인/회원가입 헤더의 **좌측 컨트롤(갤러리·테마·스킨)** 도 로드 시 볼록 등장(2026-07-31 사용자 지시).
   ⚠️ .tb-login(로그인/회원가입)에서만 — 관리자 헤더는 PJAX로 지속돼 매번 재생하면 산만하다.
   세 컨트롤 모두 같은 뉴모 알약(box-shadow 3/6) → 공통 inConvexPill. 볼록은 뉴모(soft)에서만. */
html.pt-anim:not(.pt-exit):not(.pt-hidden):not([data-skin]) .tb-login .topbar-index,
html.pt-anim:not(.pt-exit):not(.pt-hidden):not([data-skin]) .tb-login .theme-toggle,
html.pt-anim:not(.pt-exit):not(.pt-hidden):not([data-skin]) .tb-login .skin-select{
  animation:inConvexPill 1.5s cubic-bezier(.3,.5,.3,1) both;transform-origin:center;}
/* 오목(빈 인풋): 선 → 인셋 다크가 0에서 퍼지며 파임 → 인셋 하이라이트가 뒤따라 퍼짐 */
@keyframes inConcave{
  0%  {transform:scale(1.02);border-top-color:transparent;border-left-color:transparent;
       box-shadow:inset 0 0 0 transparent, inset 0 0 0 transparent,
                  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:color-mix(in srgb,var(--edge-hi) 55%,transparent);border-left-color:var(--edge-hi);
       box-shadow:inset 0 0 0 transparent, inset 0 0 0 transparent,
                  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 1px 2.5px 1.5px var(--fld-sh-deep), inset 0 0 0 transparent,
                  inset 2px 4px 8px 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:color-mix(in srgb,var(--edge-hi) 55%,transparent);border-left-color:var(--edge-hi);
       box-shadow:inset 1px 2.5px 1.5px var(--fld-sh-deep), inset -1px -2.5px 1.5px var(--fld-hi-deep),
                  inset 2px 4px 8px 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 1px 2.5px 1.5px transparent, inset -1px -2.5px 1.5px transparent,
                  inset 2px 4px 8px 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:color-mix(in srgb,var(--edge-hi) 55%,transparent);border-left-color:var(--edge-hi);
       box-shadow:inset 1px 2.5px 1.5px transparent, inset -1px -2.5px 1.5px transparent,
                  inset 2px 4px 8px 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 1px 2.5px 1.5px transparent, inset -1px -2.5px 1.5px transparent,
                  inset 2px 4px 8px 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:color-mix(in srgb,var(--edge-hi) 55%,transparent);border-left-color:var(--edge-hi);
       box-shadow:inset 1px 2.5px 1.5px transparent, inset -1px -2.5px 1.5px transparent,
                  inset 2px 4px 8px 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에서 퍼지며 솟음 → 외곽 하이라이트 뒤따름 */
/* ★버튼 등장 애니메이션 — **그림자를 애니메이트하지 않는다**(2026-08-07 사용자 지시).
   예전엔 0%→100%로 뉴모 볼록 그림자를 키워 "형태가 잡히는" 연출을 했는데,
   버튼이 전부 평면이 된 뒤로는 **없던 그림자가 나타났다 사라지는 것처럼** 보였다.
   ⇒ 남기는 건 미세한 스케일뿐. box-shadow 키프레임을 다시 넣지 말 것. */
@keyframes inConvexBtn{
  0%  {transform:scale(.965);opacity:.001;}
  100%{transform:scale(1);opacity:1;}
}
@keyframes inHairline{0%{opacity:0;} 15%{opacity:.75;} 100%{opacity:.75;}}
/* 볼록(로고): filter 드롭섀도 3겹이 0에서 자라며 솟음 — 시작(짙은 시작겹) → 끝(연한 페이드겹)+하이라이트 뒤따름.
   ⚠️ 모든 키프레임의 drop-shadow **개수·순서 동일**해야 브라우저가 함수별로 보간한다(3겹 고정). 100%=정적값과 일치(점프 없음). */
/* 볼록(헤더 알약 = 갤러리·테마·스킨): 헤어라인 선 → 외곽 다크 0에서 솟음 → 하이라이트 뒤따름. 최종=알약 정적값(3/6)과 일치. */
/* ★2026-08-11 되돌림 — 헤더 알약은 다시 **뉴모 볼록**이다(사용자 지시).
   그림자가 정적 상태에 존재하므로 등장 연출도 그림자를 함께 키운다.
   ⚠️ 정적값(3/6)과 100% 키프레임이 **반드시 일치**해야 한다. 어긋나면 애니메이션 끝에 값이 튄다.
   ⚠️ 알약을 다시 평면으로 바꾸는 날에는 이 키프레임의 box-shadow·border-color도 함께 걷어낼 것 —
      안 그러면 없던 그림자가 생겼다 사라져 보인다(8/10에 실제로 그래서 걷어냈다). */
@keyframes inConvexPill{
  0%  {transform:scale(.94);opacity:.001;border-top-color:transparent;border-left-color:transparent;
       box-shadow:0 0 0 rgba(var(--shadow),0), 0 0 0 rgba(var(--hilite),0);}
  15% {border-top-color:var(--edge-hi);border-left-color:var(--edge-hi);
       box-shadow:1px 1px 2px rgba(var(--shadow),.85), 0 0 0 rgba(var(--hilite),0);}
  50% {box-shadow:3px 3px 6px rgba(var(--shadow),1), -2px -2px 4px rgba(var(--hilite),.7);}
  100%{transform:scale(1);opacity:1;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);}
}

html.pt-anim:not(.pt-exit) .tb-login .brand-col,
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) .bf-gallery,
html.pt-anim:not(.pt-exit) .botfoot,
html.pt-anim:not(.pt-exit) .notice,
html.pt-anim:not(.pt-exit) .reveal{transition:opacity .9s ease !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 .tb-login .lockup-word{transform:scale(.96);}

html.pt-hidden .tb-login .brand-col,
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 .bf-gallery,
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:999px;background:var(--bg);color:var(--muted);
  font-size:12px;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:12px;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:12px;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:12px;color:var(--muted);white-space:nowrap;}
.msg-tile-topic{font-family:var(--sans);font-size:12px;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:12px;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:12px;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:12px;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:12px;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);}

/* ⚠️ 옛 `.nav-rico`(삭제함·설정만 **오른쪽 끝**에 opacity .32 아이콘) 규칙은 **폐기**했다(2026-07-30).
   13개 중 2개만 아이콘이 있으니 그 2개만 달라 보였고, 오른쪽 끝 흐린 위치라 찾는 데 도움도 안 됐다.
   지금은 전 메뉴가 **왼쪽 아이콘**을 갖는다(위쪽 `.side-nav .nav-ico` 참조). 마크업에서도 이 클래스를 뺐다. */

/* ── 관리자 설정 허브 (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:12px;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:12px;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:12px;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:12px;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:12px;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:var(--scrim-bg-media);-webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur);}
.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:12px;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;}

/* 사이드바 메뉴 알림 뱃지 (메시지 새 알림 — 동그란 숫자) */
/* ⚠️ 2026-07-30 — 아이콘이 들어오면서 `.side-nav a` 자체가 flex가 됐다. `justify-content:space-between`을
   쓰면 [아이콘][라벨][배지]가 3등분되어 아이콘이 왼쪽 끝으로 떨어진다 → **배지만 margin-left:auto로** 민다. */
.side-nav a.nav-count{gap:10px;}
.side-nav .nav-badge{margin-left:auto;}
.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:12px;font-weight:700;line-height:1;color:#fff;background:var(--accent);}
/* ⚠️ 스케줄 배지만 **뜻이 다르다** — 미확인 개수가 아니라 **지난 마감(지연)** 건수다.
   같은 오렌지로 두면 "새 알림"으로 읽히므로 경고색으로 갈랐다. */
.nav-badge.late{background:var(--err);}

/* 새 메시지 플로팅 토스트 (관리자, 우측 하단 5초) */
/* ★토스트 = **가장 상단 중앙**(2026-07-31 사용자 지시로 하단우측→상단). 새 정보(메시지·회원가입·문의)가 위에서 내려온다.
   ⚠️ 중앙인 이유 = 헤더가 컨트롤(좌)·로고(우)로 양끝을 쓰고 **가운데 밴드가 비어** 있어 겹치지 않는다(우측이면 로고와 충돌). */
.toast-wrap{position:fixed;left:0;right:0;top:20px;z-index:180;display:flex;flex-direction:column;gap:10px;align-items:center;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:12px;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-overview{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 18px;}
.items-overview-copy{min-width:0;}
.items-title{display:flex;align-items:baseline;gap:9px;margin:0;font-family:var(--mono);font-size:16px;font-weight:550;letter-spacing:.01em;color:var(--title-ink);}
.items-count{display:inline-flex;align-items:baseline;gap:3px;font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--muted);}
.items-count strong{font-family:var(--mono);font-size:21px;font-weight:600;line-height:1;color:var(--accent-ink);font-variant-numeric:tabular-nums;}
.items-help{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted);word-break:keep-all;}
.items-add-jump{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:36px;padding:0 15px;border-radius:18px;text-decoration:none;font-family:var(--sans);font-size:12px;font-weight:560;color:var(--title-ink);background:var(--bg);box-shadow:2px 2px 5px rgba(var(--shadow),.72),-2px -2px 5px rgba(var(--hilite),.84);}
.items-add-jump:hover{color:var(--accent-ink);}

/* ── §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:12px;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에 밀리지 않도록 — 드롭존/에디터/액션 토글
   ⚠️★ 브라우저 기본 `[hidden]{display:none}`은 **특이도가 0**이라, 클래스로 `display:flex`를 준 요소에는
      통째로 밀린다. JS가 `hidden`을 걸어도 화면에서 안 사라진다.
      ★2026-08-01 실사고 — 매뉴얼 목차에서 「찾으시는 내용이 없습니다」가 항상 떠 있었고(.empty=flex),
        검색으로 걸러낸 항목도 그대로 보였다(.row-link=flex). display를 주는 요소에 hidden을 쓸 거면
        **반드시 여기에 짝을 추가할 것.** */
.shot-drop[hidden],.shot-edit[hidden],.glass-actions[hidden]{display:none;}
.empty[hidden],.row-link[hidden],.mn-tab[hidden]{display:none;}

/* ═══ 스킨 선택 = 커스텀 드롭다운 (2026-08-01, 네이티브 select에서 재교체) ══════════
   ★버튼은 헤더 컨트롤 톤(양각 뉴모 필) 그대로다. 우측 꺾쇠도 종전 select와 **같은 배경 그라데이션 기법**이라
     알약 모양·크기·정렬이 예전과 픽셀로 동일하다(교체를 눈치채지 못하게 하는 게 목적).
   ⚠️★ 클래스 이름 `.skin-select`를 그대로 쓴다 — 페이퍼 보정(§paper)·`.tb-admin` zoom·모바일 숨김·
      로그인 등장 애니메이션이 전부 이 이름에 걸려 있다. 이제 `<select>`가 아니라 `<button>`이다. */
.skin-wrap{position:relative;display:flex;align-items:center;flex:none;}
.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:12px;font-weight:500;letter-spacing:.05em;color:var(--muted);
  -webkit-tap-highlight-color:transparent;white-space:nowrap;line-height:38px;text-align:left;
  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:active{box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
/* 열려 있을 땐 눌린(오목) 상태로 — 지금 이 버튼이 레이어를 띄우고 있다는 표시 */
.skin-select[aria-expanded="true"]{box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);color:var(--text);}

/* 레이어 = `.online-drop`과 **같은 글래스 문법**(반투명+블러+상단 유리 하이라이트).
   ⚠️ 값을 따로 만들지 말 것 — 두 드롭다운이 미묘하게 다르면 같은 화면에서 바로 티가 난다.
   ⚠️★ 버튼이 `transform:scale(1.2)`(또는 tb-admin의 zoom)라 레이어를 버튼 안에 두면 **같이 확대된다**.
      그래서 레이어는 `.skin-wrap` 기준으로 띄운다(버튼의 형제). 위치 기준을 버튼으로 옮기지 말 것. */
.skin-drop{position:absolute;top:calc(100% + 14px);right:0;width:252px;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:10px;
  box-shadow:0 18px 44px rgba(20,20,18,.18), inset 0 1px 0 rgba(255,255,255,.65);}
:root[data-theme="dark"] .skin-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);}
.skin-drop[hidden]{display:none;}

/* 행 = [스킨 이름 …………… 고정]. 글래스 위라 **전부 평면**이다(뉴모 음영 금지 — 유리에 그림자가 뜨면 탁해진다). */
.sk-row{display:flex;align-items:center;gap:8px;border-radius:12px;padding:2px 2px 2px 4px;}
.sk-row + .sk-row{margin-top:2px;}
.sk-row:hover{background:rgba(255,255,255,.42);}
:root[data-theme="dark"] .sk-row:hover{background:rgba(255,255,255,.07);}
.sk-row.on{background:rgba(255,255,255,.62);}
:root[data-theme="dark"] .sk-row.on{background:rgba(255,255,255,.11);}
.sk-pick{flex:1;min-width:0;text-align:left;background:none;border:0;cursor:pointer;padding:9px 8px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--muted);
  -webkit-tap-highlight-color:transparent;transition:color .2s ease;}
.sk-row:hover .sk-pick{color:var(--text);}
.sk-row.on .sk-pick{color:var(--text);font-weight:640;}
/* 고정 = 켜지면 포인트 컬러 필. ⚠️ 색만으로 알리지 않는다 — 글자도 고정↔고정됨으로 바뀐다(JS). */
.sk-pin{flex:none;cursor:pointer;padding:6px 11px;border-radius:999px;
  border:1px solid var(--edge-lo);background:rgba(255,255,255,.5);
  font-family:var(--sans);font-size:12px;font-weight:560;color:var(--muted);
  -webkit-tap-highlight-color:transparent;transition:color .2s ease, background-color .2s ease, border-color .2s ease;}
:root[data-theme="dark"] .sk-pin{background:rgba(255,255,255,.08);}
.sk-pin:hover{color:var(--text);border-color:var(--accent-ink);}
/* ⚠️★ 다크 짝을 **반드시 같이** 선언한다. 위 `:root[data-theme="dark"] .sk-pin`이 (0,3,0)이라
   `.sk-pin.on`(0,2,0)만 두면 **다크에서만 고정 색이 안 먹는다**(실측으로 잡은 버그).
   `.agree-row.warn`의 currentColor 사고와 같은 계열 — 상태 규칙은 항상 테마별 특이도를 확인할 것. */
.sk-pin.on,
:root[data-theme="dark"] .sk-pin.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.sk-note{font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted);
  margin:8px 4px 2px;padding-top:8px;border-top:1px solid var(--div-lo);}

/* ═══════════════════════════════════════════════════════════════════════
   매출 기록(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)이 끼는 화면**이 있어서
   그때 간격이 통째로 사라진다(내부 계정 탭에서 발견). 일반 형제(~)로 잡아 항상 띄운다. */
/* ⚠️★목록 컨테이너를 새로 만들면 **여기에 꼭 추가할 것** — 빠지면 검색줄에 딱 붙어 나온다
   (스킨의 `.sk-grid`가 실제로 그랬다, 2026-07-30 사용자 지적). */
.list-tools ~ .row-list,
.list-tools ~ .empty,
.list-tools ~ .sk-grid,
.list-tools + .row-list,.list-tools + .empty,.list-tools + .sk-grid{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) ───────────────────────────────────
   ⚠️ 등급(전역 신분)과 업체 역할(대표/담당자, 업체마다 따로)은 **다른 축**이다. 배지도 다르게 보인다. */
/* ★업체 목록 행 — 링크 + 스킨 연결 버튼이 형제, 폼은 그 아래 한 줄을 통째로 쓴다(2026-07-30).
   ⚠️ 회원 목록 `.usr-row`와 같은 이유 = **`<a>` 안에는 폼을 못 넣는다.**
   ⚠️ `flex-wrap:wrap` + 폼 `flex-basis:100%`라야 폼이 다음 줄로 내려간다(안 그러면 버튼 옆에 끼어 찌그러진다). */
.co-row{display:flex;align-items:stretch;gap:14px;}
.co-row > .row-link{flex:1;min-width:0;}
/* ★스킨 연결 버튼 = 옆 리스트 카드(.row-link)와 **같은 판**이다(2026-07-30 사용자 지시).
   높이는 `align-self:stretch`로 카드에 맞추고, 라운드(16px)·볼록 그림자·보더를 그대로 가져온다.
   ⚠️ 알약(999px) 칩이 아니다 — 옆 카드와 모서리가 다르면 따로 논다(전역 버튼 규칙 §2-2-1). */
.co-skin-btn{flex:none;align-self:stretch;padding:0 22px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap;
  font-family:var(--sans);font-size:13.5px;font-weight:560;color:var(--title-ink);
  background:var(--bg);border:0;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);
  transition:box-shadow .3s ease, color .2s ease;cursor:pointer;}
.co-skin-btn:hover{color:var(--text);box-shadow:2px 2px 5px rgba(var(--shadow),1), -2px -2px 5px rgba(var(--hilite),1);}
.co-skin-btn:active{box-shadow:inset 2px 2px 6px rgba(var(--shadow),1), inset -2px -2px 6px rgba(var(--hilite),1);}
.co-row-actions{flex:none;display:grid;grid-template-columns:repeat(3,minmax(86px,auto));gap:8px;align-self:stretch;}
.co-row-actions .co-skin-btn{min-width:86px;padding:0 16px;}
.co-quick-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:86px;padding:0 16px;border-radius:999px;font-family:var(--sans);font-size:13.5px;font-weight:560;line-height:1;white-space:nowrap;color:var(--title-ink);text-decoration:none;background:var(--bg);border:0;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);transition:box-shadow .3s ease,color .2s ease;}
.co-quick-btn:hover{color:var(--text);box-shadow:2px 2px 5px rgba(var(--shadow),1),-2px -2px 5px rgba(var(--hilite),1);}
.co-quick-btn:active{box-shadow:inset 2px 2px 6px rgba(var(--shadow),1),inset -2px -2px 6px rgba(var(--hilite),1);}
.co-action-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);background:var(--chip);}
/* ⚠️★폼은 목록에 펼치지 않는다 — **팝업으로 옮긴다**(2026-07-30 사용자 지시: 목록에선 목록만 보이게).
   보관함은 `hidden`이라 display를 덮어쓰면 안 된다(schedule의 `.sch-dayboxes`와 같은 규칙). */
.co-skin-forms{display:none;}
/* 업체 스킨 연결 팝업 */
.co-modal.led-modal{padding:28px;}
.co-modal .led-modal-box{max-width:720px;max-height:calc(100dvh - 56px);gap:0;padding:0;overflow:hidden;border-radius:24px;}
.co-modal-head{align-items:flex-start;padding:25px 28px 21px;border-bottom:1px solid var(--div-lo);}
.co-modal-heading{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;}
.co-modal-kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--accent-ink);text-transform:uppercase;}
.co-modal-heading .led-modal-title{font-size:22px;line-height:1.25;word-break:keep-all;}
.co-modal-desc{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted);word-break:keep-all;}
.co-modal-close{flex:none;height:36px;padding:0 15px;border-radius:18px;}
.co-modal-body{min-height:0;overflow-y:auto;padding:22px 28px 0;overscroll-behavior:contain;}
.co-skin-form{display:flex;flex-direction:column;gap:16px;}
/* ⚠️ 유리 패널 안의 카드는 **반투명**(--panel-inner)이어야 한다 — 불투명으로 꽉 채우면 유리가 테두리에서만 보인다. */
.co-sk-section{padding:20px;border-radius:18px;background:var(--panel-inner);box-shadow:inset 2px 2px 6px rgba(var(--shadow),.72),inset -2px -2px 6px rgba(var(--hilite),.86);}
.co-sk-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:18px;}
.co-sk-section-head strong{flex:none;font-family:var(--sans);font-size:15.5px;font-weight:680;line-height:1.45;color:var(--text);}
.co-sk-section-head span{max-width:360px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted);text-align:right;word-break:keep-all;}
.co-sk-grid{grid-template-columns:1fr 1fr;gap:14px;margin:0;}
.co-sk-grid .led-f{min-width:0;}
.co-sk-grid .field{margin:0;}
.co-sk-kind:disabled{opacity:.55;cursor:not-allowed;}
.co-cst-labels{display:grid;grid-template-columns:minmax(0,1fr) 140px 40px;gap:10px;margin:0 2px 7px;}
.co-cst-labels span{font-family:var(--sans);font-size:12px;font-weight:560;color:var(--muted);}
.co-cst-labels span:nth-child(2){text-align:right;}
.co-cst-list{display:flex;flex-direction:column;gap:9px;}
.co-cst-row{display:grid;grid-template-columns:minmax(0,1fr) 140px 40px;gap:10px;align-items:center;margin:0;}
.co-cst-row .field{height:42px;margin:0;padding:0 14px;font-size:12.5px;}
.co-cst-del{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;font-size:16px;line-height:1;}
.co-cst-add{align-self:flex-start;height:38px;margin-top:12px;padding:0 15px;border-radius:19px;}
/* 하단 고정 버튼줄 — 유리 위에 얹히므로 배경도 반투명 + 블러(불투명 띠가 깔리면 유리가 잘려 보인다) */
.co-skin-form .led-fbtns{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:2px -28px 0;padding:18px 28px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,rgba(var(--bg-rgb),0) 0,rgba(var(--bg-rgb),.72) 16px,rgba(var(--bg-rgb),.72) 100%);
  -webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);}
.co-skin-form .led-fbtns > .btn.solid{width:100%;min-width:0;}
.co-skin-form .led-fbtns > .chip-btn{min-width:92px;}
/* ── 주문 제작(스킨 없음) 전환 — 2026-08-05 사용자 지시 ────────────────────────
   ★주문 제작이면 「판매 유형」과 「커스터마이징 옵션」을 **감추고 견적서 한 장만** 남긴다.
     (스킨이 없으니 대조할 판매 항목이 없고, 항목을 줄줄이 적는 대신 이미 낸 견적서를 올린다)
   ⚠️ **숨김이지 disabled가 아니다** — 커스터마이징 입력은 그대로 전송돼야 형태를 되돌렸을 때 값이 살아 있다.
      (판매 유형 셀렉트만 JS가 disabled로 끈다 — 그건 값이 남으면 안 되는 칸이라서다)
   ⚠️ 훅은 두 화면이 다르다: 목록 팝업 = `.co-skin-form`, 업체 설정 = `.co-edit-skin`. 둘 다 `.is-custom`을 단다. */
.co-skin-form.is-custom .co-sk-kindwrap,
.co-skin-form.is-custom .co-sk-custom,
.co-edit-skin.is-custom .co-sk-kindwrap,
.co-edit-skin.is-custom .co-sk-customwrap{display:none;}
.co-skin-form:not(.is-custom) .co-sk-quote,
.co-edit-skin:not(.is-custom) .co-sk-quote{display:none;}
/* 주문 제작일 때 스킨 셀렉트는 한 칸만 남으므로 폭을 다 쓴다(빈 칸이 남아 어긋나 보이지 않게) */
.co-skin-form.is-custom .co-sk-grid{grid-template-columns:1fr;}
.co-quote-cur{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px;}
.co-quote-clear{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12.5px;color:var(--muted);cursor:pointer;}
.co-edit-skin .co-sk-quote{margin:18px 0 4px;}

/* ── ★파일 드롭존 `.fdrop` (2026-08-05) ────────────────────────────────────────
   끌어다 놓기 + 클릭 선택. 브라우저 기본 `<input type=file>` 버튼은 OS마다 생김새가 달라
   디자인이 통째로 깨진다 → **input은 숨기고** 이 판이 대신 클릭을 받는다.
   ⚠️ 시각 문법은 스크린샷 첨부(`.shot-drop`)와 **일부러 같게** 맞췄다(점선 + 아이콘 + `.is-over` 오렌지).
      한쪽만 고치면 같은 앱에서 첨부가 두 얼굴이 된다.
   ⚠️ 동작은 `assets/js/file-drop.js`가 document 위임으로 처리한다 — 팝업으로 노드를 옮겨도 다시 붙일 필요가 없다. */
.fdrop{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:26px 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:13px;
  background:rgba(var(--bg-rgb),.34);transition:border-color .2s,background-color .2s;}
.fdrop:hover{border-color:var(--muted);}
.fdrop.is-over{border-color:var(--accent);background:rgba(241,90,36,.09);color:var(--accent-ink);}
.fdrop svg{width:26px;height:26px;opacity:.5;}
.fdrop p{margin:0;line-height:1.5;}
.fdrop strong{font-weight:640;color:var(--text);}
.fdrop.is-over strong{color:var(--accent-ink);}
.fdrop-hint{font-size:11.5px;letter-spacing:.02em;opacity:.8;}
/* 고른 파일 이름 — 판 안에 알약으로 얹는다(고른 뒤에도 다시 끌어다 놓아 교체할 수 있어야 하므로 판은 남긴다) */
.fdrop-file{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin-top:3px;padding:7px 14px;border-radius:999px;
  background:var(--chip);color:var(--text);font-size:12.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fdrop-file[hidden]{display:none;}
/* 페이퍼도 유리 패널 안이므로 배경은 --panel-inner에 맡기고 평면 보더만 남긴다(2026-08-05) */
:root[data-skin="paper"] .co-sk-section{border:1px solid var(--edge-lo);box-shadow:none;}
@media (max-width:640px){
  .co-modal.led-modal{align-items:flex-end;padding:0;}
  .co-modal .led-modal-box{max-width:none;max-height:calc(100dvh - max(18px,env(safe-area-inset-top)));border-radius:24px 24px 0 0;}
  .co-modal-head{padding:20px 18px 17px;}
  .co-modal-heading{gap:4px;}
  .co-modal-heading .led-modal-title{font-size:20px;}
  .co-modal-desc{max-width:250px;font-size:11.5px;}
  .co-modal-close{height:34px;padding:0 13px;font-size:11.5px;}
  .co-modal-body{padding:17px 16px 0;}
  .co-skin-form{gap:12px;}
  .co-sk-section{padding:16px;border-radius:16px;}
  .co-sk-section-head{flex-direction:column;gap:4px;margin-bottom:15px;}
  .co-sk-section-head strong{font-size:15px;}
  .co-sk-section-head span{max-width:none;font-size:11.5px;text-align:left;}
  .co-sk-grid{grid-template-columns:1fr;gap:13px;}
  .co-cst-labels{display:none;}
  .co-cst-row{grid-template-columns:minmax(0,1fr) 100px 36px;gap:7px;}
  .co-cst-row .field{height:40px;padding:0 12px;font-size:12px;}
  .co-cst-del{width:36px;height:36px;}
  .co-cst-add{width:100%;height:40px;margin-top:11px;}
  .co-skin-form .led-fbtns{grid-template-columns:minmax(0,1fr) 86px;margin:2px -16px 0;padding:17px 16px calc(17px + env(safe-area-inset-bottom));}
  .co-skin-form .led-fbtns > .btn,.co-skin-form .led-fbtns > .chip-btn{height:44px;padding:0 14px;font-size:13px;}
}
/* 업체 상세 — 연결된 스킨 요약 + 커스터마이징 목록 */
.co-skin-view{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:8px;}
.co-skin-name{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--text);}
.co-skin-view .chip-btn{height:34px;padding:0 14px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.co-custom-list{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:14px;}
.co-custom-lbl{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);margin-right:3px;}
.co-custom{font-family:var(--sans);font-size:12.5px;color:var(--text);background:var(--chip);
  padding:5px 11px;border-radius:8px;}
.co-custom b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--link);margin-left:6px;}
@media (max-width:640px){
  .co-sk-grid{grid-template-columns:1fr;}
  .co-cst-row{grid-template-columns:1fr 110px 40px;gap:7px;}
  .co-skin-btn{padding:0 15px;font-size:12.5px;}
}

.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:12px;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:12px;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:12px;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;   /* 주 버튼(14px)과 같은 모서리 */
  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:12px;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:12px;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:12px;}

/* ★메모 줄 — **배지 먼저, 텍스트는 그 오른쪽, 버튼은 끝**(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:12px;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);}
/* 「발행안함」 = 끊을 건이 아님. 회색으로 눕혀 둔다 — 초록(발행완료)과 같은 색이면 목록에서 구분이 안 된다. */
.led-tbadge.none {color:var(--muted);background:color-mix(in srgb, var(--muted) 16%, transparent);}
/* 한 번에 전액 받은 건 — 입금 pill 줄을 없앤 대신 여기 한 칩으로 */
.led-full{font-size:12px;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:12px;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:var(--scrim-bg);
  -webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur);}
.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:12px;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:var(--scrim-bg);
  -webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur);}
.ltab-mbox{position:relative;width:100%;max-width:940px;max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;border-radius:20px;
  background:var(--panel-bg);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:1px solid var(--panel-edge);box-shadow:var(--panel-shadow);
  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;}
/* ⚠️ 여기만 블러를 끈다 — 표 편집 패널이 열리면 스크림 위에 또 유리 레이어가 겹쳐 블러가 이중으로 걸린다
   (겹치면 뒤가 뭉개져 표를 못 읽는다). 스크림 통일 규칙(--scrim-blur)의 **의도된 예외**다. */
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:12px;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:12px;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:12px;font-weight:400;color:var(--muted);}
.lt-um{flex:1;min-width:0;font-family:var(--sans);font-size:12px;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:12px;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:12px;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:12px;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:12px;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:12px;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:12px;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:12px;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-colist i{font-style:normal;font-size:12px;color:var(--link);background:var(--chip);
  padding:1px 6px;border-radius:5px;margin-left:5px;}
/* 스킨명 영문 = 한글 제목의 보조 표기(둘 다 있을 때만 뜬다) */
.sk-name-en{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:.03em;}
/* 판매 항목 줄 — [항목명][판매가][추가/비우기]. 매출기록의 금액 줄(.led-fg-amt)과 같은 리듬. */
.sk-fg-price{grid-template-columns:1fr 200px 132px;}
/* 카드의 판매 항목 칩 — 항목명 + 금액을 한 덩어리로(여러 개가 나열되므로 경계가 보여야 한다) */
.sk-price{background:var(--chip);padding:3px 9px;border-radius:7px;}
.sk-price b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--text);margin-left:3px;}
@media (max-width:640px){ .sk-fg-price{grid-template-columns:1fr;} }

/* ★썸네일 업로드 = **점선 영역**(2026-07-30 사용자 지시) — "여기에 넣으세요"라는 자리 표시.
   ⚠️ 좌우 곡선(30px)과 높이를 **옆 인풋(`.field`)과 똑같이** 맞춘다 —
      한 줄에 나란히 놓인 두 칸이 모서리·높이가 다르면 따로 논다(전역 버튼 규칙 §2-2-1과 같은 계열).
   ⚠️ 기본 `.file-btn`(꽉 찬 칩·15px 라운드)을 덮는다. 점선 위에 칩 배경까지 깔면 무거워지므로 배경은 비운다. */
.sk-fu{gap:8px;}
/* ⚠️ 높이를 `.field`와 **실측으로** 맞춘 값이다(눈대중 아님). 점선은 4면 전부라 필드(상·좌 1.5px)보다
   보더가 1.5px 두꺼운 만큼 padding이 조금 작다. 폰트·padding을 건드리면 **다시 재서 맞출 것.** */
.sk-fu .file-btn{width:100%;justify-content:center;
  border-radius:30px;padding:17px 26px;
  background:transparent;border:1.5px dashed var(--div-lo);color:var(--muted);
  transition:border-color .2s ease, color .2s ease;}
.sk-fu .file-btn:hover{background:transparent;border-color:var(--accent);color:var(--accent-ink);}
/* 페이퍼는 `.field` 폰트가 15.5px로 커져 필드가 3px 높아진다 → 버튼도 같이 키운다 */
:root[data-skin="paper"] .sk-fu .file-btn{padding:18.5px 26px;font-size:15px;}
.fu-cur{font-family:var(--sans);font-size:12px;color:var(--muted);}
.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;}
/* ★스킨별 공개 주문서 링크 영역 — 카페24 상세페이지에 붙일 링크를 복사한다(2026-08-06). */
.sk-oslink{margin-top:2px;}
.sk-oslink-lbl{display:block;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px;}
.sk-oslink-lbl em{font-style:normal;font-weight:400;color:var(--muted);margin-left:5px;}
.sk-oslink .copy-row{margin-top:0;}
.sk-oslink .copy-row input{border-radius:9px;padding:8px 12px;box-shadow:var(--well);}
/* ★재발급 = 수정 폼 안쪽의 비상 조작. 경고 문구를 버튼 옆에 붙여 오조작을 막는다. */
.sk-relink{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px;padding-top:12px;border-top:1px solid var(--div-lo);}
.sk-relink-warn{font-family:var(--sans);font-size:12px;color:var(--muted);line-height:1.5;}
.sk-relink-warn strong{color:var(--text);font-weight:600;}
.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:var(--scrim-bg);
  -webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur);}
/* ★유리 패널 — 토큰 규칙은 :root의 --panel-bg 주석 참조(수치 직접 금지) */
.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(--panel-bg);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:1px solid var(--panel-edge);box-shadow:var(--panel-shadow);}
.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:12px;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;}
/* ⚠️ 모서리는 **999px(알약)** — 사이트의 모든 버튼이 같다(2026-08-07 확정). 각지게 되돌리지 말 것. */
.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:12px;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;}
/* 업체명(b) → 가운뎃점 → 작업 요약(span). ⚠️ 칩이 한 줄이라 잘릴 때 **업체명이 남아야** 해서 앞에 둔다.
   ⚠️ 구분자는 `b + span::before`다 — 둘 다 있을 때만 찍혀야 한 쪽이 없을 때 점만 남지 않는다. */
.sch-ev b{font-weight:700;}
.sch-ev span{opacity:.86;}
.sch-ev b + span::before{content:"·";margin:0 4px;font-weight:400;opacity:.6;}
.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:12px;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:12px;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:12px;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:12px;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:12px;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:12px;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:12px;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:12px;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-ink: #d34816 → #f15a24 (2026-08-03 사용자 지시, 뉴모 라이트와 동일 사유 = 레드로 읽힘) */
  --accent:#f15a24; --accent-ink:#f15a24; --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"] .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"] .co-skin-btn,
:root[data-skin="paper"] .co-quick-btn,
: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; }
/* ⚠️ 페이퍼에서도 팝업 패널은 **유리**다(사용자 지시 2026-08-05) — 불투명 배경(#f9f9f9)을 걷어냈다.
   페이퍼의 정체성인 「평면 보더」만 남긴다. */
:root[data-skin="paper"] .ltab-mbox{ border:1px solid var(--edge-lo); }
: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); }
/* ⚠️ 페이퍼에서도 팝업 패널은 유리 — 배경은 --panel-bg에 맡기고 평면 보더만 남긴다(2026-08-05). */
:root[data-skin="paper"] .led-modal-box{ border:1px solid var(--edge-lo); }
:root[data-skin="paper"] .led-modal-text{ background:var(--field-bg); border:1px solid var(--edge-lo); box-shadow:none; }
/* 미수 카드의 좌측 경고 라인은 평면 보더로 덮이므로 다시 살린다(특이도·순서로 위 규칙을 이김) */
: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"] .co-skin-btn,
:root[data-skin="paper"] .co-quick-btn,
: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"] .topbar-index,
: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"] .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"] .triage-note,
: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)보다 어두운 중간 톤 · 활성 = 카드와 동일 + 오렌지 보더/텍스트 */
/* ══ 페이퍼 사이드바 = **시안 A(평면 행)** — 2026-07-30 사용자 선택 ═══════════════════════
   뉴모(soft)는 알약을 유지하고(시안 B) **페이퍼만 평면 행**으로 간다. 마크업은 하나, 차이는 여기뿐이다.
   ⚠️★페이퍼는 원래 플랫이 정체성이라 알약 판이 오히려 겉돈다. 알약을 걷으면 세로도 크게 준다.
      실측(1440×900, 그룹 라벨 4줄 포함): **뉴모 925px**(가용 617 → 308px 넘침) / **페이퍼 669px**(가용 612 → 57px 넘침).
      ⚠️ 둘 다 스크롤이 생긴다 — 사이드바 꺾쇠 힌트(`.side-hint`)가 그 표시다. **스크롤을 없애려고
         그룹 라벨을 다시 줄이지 말 것**(2026-07-30 사용자 지시로 키운 값이다 — 위 `.nav-gl` 주석 참조).
         세로를 벌어야 하면 항목 padding → gap 순으로 볼 것.
   ⚠️ 이 파일에서 `.side-nav a`의 배경을 다시 선언하는 곳이 **여기와 아래 PAPER-DARK 두 군데**다.
      한쪽만 고치면 다크에서 알약이 되살아난다. */
/* ★★주 액션 버튼 색 = **스킨별로 다르다**(2026-08-07 사용자 확정)
     · 뉴모(기본) = **블랙** `#2a2925` — 위 `.btn.solid,.co-create` / `.btn-ink` 정의
     · 페이퍼      = **시그널 오렌지** — 아래 규칙
   둘 다 **그림자 없음**(평면). 페이퍼는 원래 평면 스킨이고, 뉴모에서도 주 버튼만은 뜨지 않게 한다.
   ⚠️ 다크 오렌지(`--accent` #ff7a45)는 밝아서 흰 글자가 묻힌다 → **글자색을 잉크로 바꾼다.**
      한 값으로 통일하면 반드시 한쪽이 죽는다(로고 `--logo-fill`과 같은 이유). */
:root[data-skin="paper"] .btn.solid,
:root[data-skin="paper"] .co-create,
:root[data-skin="paper"] .btn-ink,
:root[data-skin="paper"] .triage-submit{ background:var(--accent); color:#fff; box-shadow:none; border:0; }
:root[data-skin="paper"] .btn.solid:hover,
:root[data-skin="paper"] .co-create:hover,
:root[data-skin="paper"] .btn-ink:hover,
:root[data-skin="paper"] .triage-submit:hover{ background:var(--accent-ink); color:#fff; box-shadow:none; }
:root[data-skin="paper"][data-theme="dark"] .btn.solid,
:root[data-skin="paper"][data-theme="dark"] .co-create,
:root[data-skin="paper"][data-theme="dark"] .btn-ink,
:root[data-skin="paper"][data-theme="dark"] .triage-submit{ color:#231f1b; }
:root[data-skin="paper"][data-theme="dark"] .btn.solid:hover,
:root[data-skin="paper"][data-theme="dark"] .co-create:hover,
:root[data-skin="paper"][data-theme="dark"] .btn-ink:hover,
:root[data-skin="paper"][data-theme="dark"] .triage-submit:hover{ color:#231f1b; }

:root[data-skin="paper"] .side-nav{ gap:2px; }
:root[data-skin="paper"] .side-nav a{ background:none; border:0; box-shadow:none;
  padding:8px 12px; border-radius:10px; font-size:15px; }
:root[data-skin="paper"] .side-nav a:hover{ background:var(--chip); box-shadow:none; }
/* 활성만 배경을 갖는다 = 평면에서 "지금 어디"가 즉시 읽히는 장치. 아이콘은 currentColor라 같이 오렌지가 된다. */
:root[data-skin="paper"] .side-nav a.on{ background:var(--chip); color:var(--accent-ink); font-weight:660; box-shadow:none; }
/* 페이퍼는 항목 gap이 2px뿐이라(평면) 그룹 여백을 마진으로 다 만들어야 한다 — 뉴모보다 큰 값이 들어간다.
   ⚠️★**굵기가 뉴모(700)와 다르다 — 페이퍼만 550이다**(2026-07-30 사용자 지시: "너무 두껍고 진하다").
      페이퍼는 폰트가 전반적으로 한 단계 크고 배경이 평평해 같은 700이 훨씬 무겁게 읽힌다.
      ⚠️ **색은 건드리지 않는다**(`--title-ink` 유지) — 흐리게 하면 처음의 "안 보인다" 문제로 되돌아간다.
         무게만 낮춰서 톤을 죽이는 게 이 지시의 요지다. */
:root[data-skin="paper"] .nav-gl{ margin:20px 0 6px; padding:0 12px; font-size:13.5px; font-weight:550; }
:root[data-skin="paper"] .nav-gl:first-child{ margin-top:2px; }
/* 주요 버튼 = 솔리드 오렌지 · 카드 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; }
/* ⚠️★페이퍼 다크도 **평면 행**이다(위 라이트와 짝). 예전 알약 배경(#2a2925)을 되살리면
   다크에서만 알약이 돌아와 두 테마가 갈린다. 활성 배경만 한 톤 밝게 준다. */
:root[data-skin="paper"][data-theme="dark"] .side-nav a{ background:none; }
:root[data-skin="paper"][data-theme="dark"] .side-nav a:hover{ background:#2a2925; }
:root[data-skin="paper"][data-theme="dark"] .side-nav a.on{ background:#37362f; }
/* (옛 `.skin-select option` 다크 보정은 2026-08-01 커스텀 드롭다운 교체로 제거 — OS가 그리던 목록이 없어졌다) */
/* ★페이퍼 다크 — 상태 필터 칩(라이트 파스텔이 새어 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:var(--scrim-bg);
  -webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur);}

@media (max-width:640px){
  /* ── ★★iOS 입력칸 자동 확대 방지 (2026-08-01 사용자 지시) ─────────────────────
     증상: 로그인 인풋을 탭하면 화면이 확 커진다.
     원인: **iOS 사파리는 글자가 16px 미만인 입력칸에 포커스가 가면 화면을 확대한다.** 이 파일의
           `.field`는 14.5px였다. 안드로이드·데스크톱에는 없는 동작이라 잡기 어려운 증상이다.

     ⚠️★ **`viewport`에 `maximum-scale=1`/`user-scalable=no`로 막지 말 것.** 그러면 손가락 확대까지
        같이 죽어 시력이 낮은 사용자가 화면을 키울 수 없다. 접근성 회귀다. 해결은 **글자 크기**로 한다.
     ⚠️★ `!important`를 쓴 몇 안 되는 자리다. 이 파일 곳곳에 `.led-search .field{font-size:13.5px}`처럼
        **더 구체적인 작은 글씨 규칙**이 흩어져 있어, 그것들이 이기면 증상이 조용히 되살아난다.
        새 입력칸을 만들 때마다 이 함정을 기억할 수는 없으므로 여기서 한 번에 눌러 둔다.
     ⚠️ 체크박스·라디오·파일은 제외 — 글자 크기와 무관하고, 모양이 커스텀돼 있어 건드리면 깨진다. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  textarea{font-size:16px !important;}
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea)::placeholder{font-size:13.5px;line-height:1.45;}
  select{font-size:14px !important;}
  select:focus{font-size:16px !important;}

  /* ── 상단 헤더: 고정 해제(콘텐츠와 함께 스크롤) · 로고 좌상단 크게, 최상단 밀착 ── */
  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(전체적으로 키움) */
  /* 모바일 = 헤더 폭이 좁다. 워드마크는 가로가 길어 높이를 더 줄여야 들어간다(31 → 21px ≈ 230px 폭) */
  .lockup-word{width:auto;}
  .lockup-word > svg{height:22px;}          /* 데스크톱 31px 축소에 맞춰 모바일도 26→22px(약 85%) */

  .lockup .care-t{font-size:14px;}            /* CARE는 절대px라 로고 축소 시 넘침 → 폭 비례로 축소(19×172/235≈14) */
  /* 테마·스킨 컨트롤은 하단 GNB로 이동 → 헤더에서 숨김 */
  .topbar-right .theme-toggle,
  .topbar-right .skin-wrap{display:none;}   /* 래퍼째 숨긴다(버튼만 숨기면 빈 래퍼가 gap을 먹는다) */
  /* ★갤러리 버튼은 모바일 헤더에서 뺀다(2026-08-01 사용자 지시) —
     하단 GNB 맨 끝의 P✳g 마크(`.mgnb-brand`)가 같은 곳으로 가므로 위아래로 두 번 있을 이유가 없다.
     ⚠️ 로그인·회원가입에는 하단 GNB가 없다 → 그 화면에서는 모바일에 갤러리 링크가 없어진다(의도된 결과).
        되살리려면 `.tb-login .topbar-index{display:inline-flex}` 한 줄이면 된다. */
  .topbar-index{display:none;}

  /* ── ★로그인·회원가입 모바일 헤더 = **로고만, 가로 100%** (2026-08-01 사용자 지시) ──────
     ⚠️★ 한때 테마·스킨 컨트롤을 로고 위에 세웠다가 **뺐다**(사용자: 로그인 화면에서까지 바꿀 일이 없다).
        바로 위의 기본 규칙이 이미 테마·스킨을 숨기므로 **여기서 되살리지 않는다** — 되살리는 규칙을
        다시 넣지 말 것. 로그인 후 화면은 하단 GNB의 「모드」에서 바꾸면 된다.
     ⚠️ 컨트롤이 전부 숨으면 빈 flex 아이템만 남아 gap이 헛공간을 만든다 → **래퍼째** 숨긴다.
     ⚠️ 로고는 `width:100%` + `height:auto`다. 위 `.lockup-word > svg{height:22px}`를 덮어야 하므로
        **높이를 풀어 줘야** 폭이 실제로 100%가 된다(높이가 고정이면 폭은 비례로 묶인다). */
  .topbrand.tb-login{flex-direction:column;align-items:stretch;gap:0;}
  .topbrand.tb-login .topbar-right{display:none;}
  /* ★로그인·회원가입 맨 아래 갤러리 링크 — 모바일 전용(데스크톱은 헤더에 같은 버튼이 있다).
     ⚠️ 이 화면들은 하단 GNB가 없어 **여기가 갤러리로 가는 유일한 문**이다. 지우지 말 것. */
  .bf-gallery{display:flex;}
  .topbrand.tb-login .brand-col{align-items:stretch;}
  /* 로그인 로고 폭 = 기본 로그인 폼(.form)의 max-width 330px. translateY는 폼 위치를 밀지 않고 로고만 내린다. */
  body:has(> .center > .form:not(.wide)) .topbrand.tb-login .brand-col{width:100%;max-width:330px;align-self:center;transform:translateY(14px);}
  .tb-login .lockup,
  .tb-login .lockup-word{width:100%;margin-left:0;}
  .tb-login .lockup-word > svg{width:100%;height:auto;}
  /* ── 급행·접속 = 우상단 작게 고정. 텍스트 제거·색 배경·흰 숫자 ── */
  .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 = 하단 고정 닫기 바와 스크림을 가리지 않게 확보 */
  #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(--bg);color:var(--text);cursor:pointer;
    font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;box-shadow:4px 4px 10px rgba(var(--shadow),.78),-4px -4px 10px rgba(var(--hilite),.9);
    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:1;box-shadow:var(--press);}
  .m-ov-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
  #mMenu .side-id,#mMenu .side-nav{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-id{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:15px 16px;margin-bottom:22px;border:0;border-radius:18px;background:var(--bg);
    box-shadow:4px 4px 10px rgba(var(--shadow),.72),-4px -4px 10px rgba(var(--hilite),.88);}
  #mMenu .side-nav{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:4px;margin:0 0 20px;padding:8px;border-radius:22px;background:var(--bg);border:0;border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);box-shadow:none;filter:none;}
  /* 기본(뉴모) = 헤더 스킨·모드 버튼과 같은 3px/6px 암부·명부를 서로 영향을 주지 않는 별도 레이어에서 병렬 렌더링한다. 닫기 버튼과는 20px 여백을 둔다. */
  #mMenu .side-nav::before,#mMenu .side-nav::after{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:20.5px;background:var(--bg);pointer-events:none;}
  #mMenu .side-nav::before{filter:drop-shadow(3px 3px 6px rgba(var(--shadow),1));}
  #mMenu .side-nav::after{filter:drop-shadow(-3px -3px 6px rgba(var(--hilite),1));}
  #mMenu .side-nav a{display:flex;align-items:center;gap:11px;padding:15px 16px;border-radius:15px;
    font-family:var(--sans);font-size:15.5px;font-weight:560;background:transparent;border:0;color:var(--text);box-shadow:none;}
  #mMenu .side-nav a.on{background:var(--bg);color:var(--text);
    box-shadow:inset 2px 2px 5px rgba(var(--shadow),1),inset -2px -2px 5px rgba(var(--hilite),1);}
  #mMenu .side-nav a:active{background:var(--bg);box-shadow:inset 2px 2px 5px rgba(var(--shadow),1),inset -2px -2px 5px rgba(var(--hilite),1);}
  #mMenu .side-nav .nav-badge{margin-left:auto;}
  /* ⚠️ 2026-07-30 — 아이콘이 **왼쪽**으로 왔다. margin-left:auto를 남기면 오른쪽 끝으로 튄다. */
  #mMenu .side-nav .nav-ico{width:19px;height:19px;opacity:.62;}
  #mMenu .side-nav a.on .nav-ico{opacity:.95;}
  /* 그룹 소제목 — 사이드바를 JS로 복제하므로 여기도 같이 들어온다(오버레이에선 오히려 더 도움이 된다) */
  /* ⚠️ 오버레이에서도 그룹 라벨이 **1차 구별 수단**이다 — 데스크톱과 같은 원칙(읽히는 크기·자간 0·제목 잉크).
     터치 화면이라 데스크톱보다 한 호흡 더 크고 더 벌린다. */
  #mMenu .nav-gl{font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:0;line-height:1.35;
    color:var(--muted);padding:0 8px;margin:22px 0 5px;}
  #mMenu .nav-gl:first-child{margin-top:8px;}
  /* ── 페이퍼 = 플랫: 뉴모 음영 대신 실선 보더 카드(스킨 특성 차별화) ── */
  :root[data-skin="paper"] #mMenu .side-nav{gap:7px;margin-top:16px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;filter:none;isolation:auto;}
  :root[data-skin="paper"] #mMenu .side-nav::before,:root[data-skin="paper"] #mMenu .side-nav::after{display:none;}
  :root[data-skin="paper"] #mMenu .side-nav a{font-size:15px;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{padding:12px 4px 16px;margin-bottom:6px;border-bottom:1px solid var(--edge-lo);border-radius:0;background:transparent;box-shadow:none;}
  :root[data-skin="paper"] #mMenu .nav-gl{font-size:14px;font-weight:700;color:var(--title-ink);padding:0 4px;margin:24px 0 2px;}
  :root[data-skin="paper"] #mMenu .nav-gl:first-child{margin-top:4px;}
  :root[data-skin="paper"] #mMenu .m-ov-x{background:var(--text);color:var(--bg);box-shadow:none;}
  /* ★항목 순차 등장(스태거) — 패널이 슬라이드해 들어온 뒤 신원줄·메뉴가 위에서부터 차례로 페이드+상승.
     지연은 .show에만 걸어 닫을 땐 한꺼번에 사라지게(역스태거 방지) */
  #mMenu .side-id,
  #mMenu .nav-gl,
  #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 .nav-gl,
  #mMenu.show .side-nav a{opacity:1;transform:none;}
  /* 그룹 라벨은 바로 아래 항목과 같은 박자로 뜨게 — 라벨만 먼저 뜨면 빈 제목이 잠깐 보인다 */
  #mMenu.show .nav-gl{transition-delay:.15s;}
  #mMenu.show .side-id{transition-delay:.08s;}
  #mMenu.show .side-nav a:nth-of-type(1){transition-delay:.16s;}
  #mMenu.show .side-nav a:nth-of-type(2){transition-delay:.21s;}
  #mMenu.show .side-nav a:nth-of-type(3){transition-delay:.26s;}
  #mMenu.show .side-nav a:nth-of-type(4){transition-delay:.31s;}
  #mMenu.show .side-nav a:nth-of-type(5){transition-delay:.36s;}
  #mMenu.show .side-nav a:nth-of-type(6){transition-delay:.41s;}
  #mMenu.show .side-nav a:nth-of-type(7){transition-delay:.46s;}
  #mMenu.show .side-nav a:nth-of-type(8){transition-delay:.51s;}
  #mMenu.show .side-nav a:nth-of-type(9){transition-delay:.56s;}
  #mMenu.show .side-nav a:nth-of-type(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;}
}

/* 관리자 수정요청 상세 디벨롭 (2026-08-02) */
.admin-batch-detail .batch-detail-tools{margin-bottom:18px;}
.admin-batch-detail .page-head{align-items:flex-start;margin:0 0 22px;padding:22px 24px;border-radius:20px;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),.68),-5px -5px 12px rgba(var(--hilite),.86);}
.admin-batch-detail .page-head .crumb{margin-bottom:10px;font-family:var(--sans);font-size:12px;font-weight:560;letter-spacing:.02em;color:var(--muted);}
.admin-batch-detail .page-head > .status.lg{display:inline-flex;align-items:center;justify-content:center;min-height:34px;margin:0;padding:0 14px;border-radius:17px;background:var(--chip);font-family:var(--sans);font-size:12.5px;font-weight:600;}
.admin-batch-detail .admin-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:16px 18px;padding:20px 22px;}
.admin-controls-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 0 15px;border-bottom:1px solid var(--div-lo);}
.admin-controls-head > div{display:flex;flex-direction:column;gap:5px;min-width:0;}
.admin-controls-head strong{font-family:var(--sans);font-size:15px;font-weight:650;color:var(--title-ink);}
.admin-controls-head span{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);}
.admin-controls-head .admin-control-count{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:28px;padding:0 11px;border-radius:14px;background:var(--chip);font-size:12px;font-weight:560;color:var(--text);}
.admin-batch-detail .admin-controls > form{width:100%;}
.admin-batch-detail .admin-controls label{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;font-size:12.5px;font-weight:560;color:var(--muted);}
.admin-batch-detail .admin-controls select.field,.admin-batch-detail .admin-controls .due-input{width:100%;min-width:0;height:44px;margin:0;box-sizing:border-box;}
.admin-batch-detail .admin-controls .ac-note{grid-column:1/-1;}
.admin-batch-detail .items-overview{align-items:flex-start;margin-top:36px;}
.admin-batch-detail .items-title{font-size:17px;font-weight:600;}
.admin-batch-detail .items-help{max-width:620px;}
.admin-batch-detail .item-card{padding:22px 24px;}
.admin-batch-detail .item-top{align-items:center;}   /* 2026-08-17 — 왼쪽(번호·태그)과 오른쪽(상태·버튼)을 세로 가운데로. flex-start 였다 */
.admin-batch-detail .item-tags{min-width:0;}
.admin-batch-detail .item-body{font-size:15px;}
.admin-batch-detail .item-url{line-height:1.6;}
:root[data-skin="paper"] .admin-batch-detail .page-head,:root[data-skin="paper"] .admin-batch-detail .admin-controls{background:#f9f9f9;border:1px solid var(--edge-lo);box-shadow:none;}
:root[data-skin="paper"][data-theme="dark"] .admin-batch-detail .page-head,:root[data-skin="paper"][data-theme="dark"] .admin-batch-detail .admin-controls{background:#2a2925;}
:root[data-skin="paper"] .admin-controls-head .admin-control-count{border:1px solid var(--edge-lo);}

@media (max-width:640px){
	.admin-batch-detail .batch-detail-tools{margin-bottom:18px;}
	.admin-batch-detail .page-head{display:flex;gap:16px;margin:0 0 18px;padding:19px 18px;border-radius:18px;}
	.admin-batch-detail .page-head > :first-child{flex:1 1 auto;min-width:0;}
	.admin-batch-detail .page-head > .status.lg{align-self:flex-start;flex:none;min-height:30px;margin:0;padding:0 11px;border-radius:15px;font-size:11.5px;}
	.admin-batch-detail .page-head .crumb{margin-bottom:8px;font-size:11.5px;}
	.admin-batch-detail .ph-title{font-size:21px;line-height:1.3;}
	.admin-batch-detail .ph-sub{margin-top:9px;font-size:13px;line-height:1.55;}
	.admin-batch-detail .admin-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;margin-bottom:26px;padding:17px 15px;border-radius:18px;}
	.admin-batch-detail .admin-controls-head{gap:12px;padding-bottom:13px;}
	.admin-controls-head strong{font-size:14px;}
	.admin-controls-head span{font-size:11.5px;}
	.admin-controls-head .admin-control-count{min-height:26px;padding:0 9px;font-size:11px;}
	.admin-batch-detail .admin-controls label{gap:7px;font-size:11.5px;}
	.admin-batch-detail .admin-controls select.field,.admin-batch-detail .admin-controls .due-input{height:42px;padding-top:0;padding-bottom:0;font-size:13.5px !important;}
	.admin-batch-detail .admin-controls .ac-note{white-space:normal;line-height:1.55;}
	.admin-batch-detail .admin-controls > form:has(.chip-btn){grid-column:1/-1;}
	.admin-batch-detail .admin-controls > form:has(.chip-btn) .chip-btn{width:100%;}
	.admin-batch-detail .items-overview{display:block;margin:38px 0 16px;}
	.admin-batch-detail .items-title{font-size:16px;line-height:1.4;}
	.admin-batch-detail .items-help{margin-top:7px;font-size:12px;line-height:1.6;}
	.admin-batch-detail .item-list{gap:14px;}
	.admin-batch-detail .item-card{padding:18px 16px 20px;border-radius:18px;scroll-margin-bottom:92px;}
	.admin-batch-detail .item-card.is-editable .item-top{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:8px 9px;padding-right:0;margin-bottom:15px;}
	.admin-batch-detail .item-tags{padding-right:50px;}
	.admin-batch-detail .item-tags .tag{max-width:100%;font-size:11.5px;line-height:1.35;white-space:normal;word-break:keep-all;}
	.admin-batch-detail .item-st-form{grid-column:2;margin:2px 0 0;width:146px;}
	.admin-batch-detail .ist{width:100%;height:34px;padding-left:12px;font-size:11.5px;}
	.admin-batch-detail .item-del{top:16px;right:14px;}
	.admin-batch-detail .item-del .chip-btn{height:28px;min-height:28px;padding:0 10px;font-size:11px;}
	.admin-batch-detail .item-body{font-size:14.5px;line-height:1.7;}
	.admin-batch-detail .item-url{display:block;margin-top:11px;font-size:12.5px;line-height:1.6;}
}

@media (max-width:360px){
	.admin-batch-detail .page-head{display:block;}
	.admin-batch-detail .page-head > .status.lg{margin-top:14px;}
	.admin-batch-detail .admin-controls{grid-template-columns:1fr;}
	.admin-batch-detail .admin-controls-head,.admin-batch-detail .admin-controls .ac-note,.admin-batch-detail .admin-controls > form:has(.chip-btn){grid-column:1;}
}
/* 모바일 접속 현황 재배치 (2026-08-02) */
@media (max-width:640px){
	.online-wrap{display:none;}
	#mMenu .m-menu-presence{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px;padding:14px 16px;border-radius:16px;background:var(--bg);font-family:var(--sans);font-size:12px;color:var(--muted);border-top:1px solid var(--edge-hi);border-left:1px solid var(--edge-hi);box-shadow:3px 3px 8px rgba(var(--shadow),.68),-3px -3px 8px rgba(var(--hilite),.84);}
	#mMenu .m-menu-presence strong{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;color:var(--text);}
	#mMenu .m-menu-presence strong::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--c-neutral);}
	#mMenu .m-menu-presence.has strong::before{background:var(--c-success);}
	:root[data-skin="paper"] #mMenu .m-menu-presence{background:var(--field-bg);border:1px solid var(--edge-lo);box-shadow:none;}
}
/* 업체 정보 위계·데이터 접힘·모바일 업체 카드 정리 (2026-08-02) */
.co-meta-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;margin:0;padding:0 11px;border-radius:14px;background:var(--chip);font-family:var(--sans);font-size:12px;font-weight:600;line-height:1;letter-spacing:.01em;color:var(--muted);vertical-align:middle;white-space:nowrap;}
.ph-title .co-meta-badge{margin-left:10px;}
.co-skin-view{align-items:center;gap:8px;}
.co-skin-name{margin-right:3px;font-size:17px;font-weight:650;}
.co-skin-view .co-meta-badge{height:28px;min-height:28px;margin:0;padding:0 11px;border-radius:14px;font-size:12px;}
.co-meta-badge.is-action{color:var(--title-ink);text-decoration:none;box-shadow:none;}
.co-meta-badge.is-action:hover{color:var(--accent-ink);background:var(--chip-h);box-shadow:none;}
.company-data{border:0;}
.data-archive-toggle{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-radius:18px;background:var(--bg);border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);box-shadow:4px 4px 10px rgba(var(--shadow),.68),-4px -4px 10px rgba(var(--hilite),.84);cursor:pointer;list-style:none;}
.data-archive-toggle::-webkit-details-marker{display:none;}
.data-archive-heading{display:flex;flex-direction:column;gap:6px;min-width:0;}
.data-archive-heading .section-h{display:flex;align-items:center;margin:0;}
.data-archive-heading .panel-desc{margin:0;font-size:12.5px;line-height:1.55;}
.data-toggle-label{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;min-height:32px;padding:0 12px;border-radius:16px;background:var(--chip);font-family:var(--sans);font-size:12px;font-weight:600;color:var(--text);}
.data-toggle-label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease;}
.data-toggle-label .when-open{display:none;}
.company-data[open] .data-archive-toggle{box-shadow:inset 2px 2px 6px rgba(var(--shadow),.72),inset -2px -2px 6px rgba(var(--hilite),.86);}
.company-data[open] .data-toggle-label .when-closed{display:none;}
.company-data[open] .data-toggle-label .when-open{display:inline;}
.company-data[open] .data-toggle-label svg{transform:rotate(180deg);}
.data-archive-body{padding-top:18px;}
.data-archive-body > .panel-desc{margin:0 0 14px;}
:root[data-skin="paper"] .data-archive-toggle{background:#f9f9f9;border:1px solid var(--edge-lo);box-shadow:none;}
:root[data-skin="paper"] .company-data[open] .data-archive-toggle{box-shadow:none;}
:root[data-skin="paper"][data-theme="dark"] .data-archive-toggle{background:#2a2925;}

@media (max-width:640px){
	.co-row{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;padding:0;border-radius:18px;background:var(--bg);border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);box-shadow:4px 4px 10px rgba(var(--shadow),.68),-4px -4px 10px rgba(var(--hilite),.84);overflow:hidden;}
	.co-row > .row-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px;width:100%;padding:18px 17px 15px;border:0;border-radius:0;background:transparent;box-shadow:none;}
	.co-row > .row-link:hover,.co-row > .row-link:active{box-shadow:none;}
	.co-row .row-main{gap:8px;min-width:0;}
	.co-row .row-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0;font-size:15.5px;line-height:1.4;white-space:normal;}
	.co-row .row-title .co-brand{margin:0;}
	.co-row .row-meta{font-size:12.5px;line-height:1.6;white-space:normal;word-break:keep-all;}
	.co-row .row-arrow{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;align-self:start;min-width:68px;padding-top:1px;font-size:12px;line-height:1.4;text-align:right;white-space:nowrap;}
	.co-row .row-arrow strong{font-size:15px;}
	.co-row > .co-row-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:calc(100% - 28px);align-self:center;margin:0 14px 14px;}
	.co-row-actions > .co-quick-btn{display:flex;align-items:center;justify-content:center;width:100%;height:42px;min-height:42px;padding:0;border:0;border-radius:999px;background:var(--chip);font-size:12.5px;box-shadow:inset 1.5px 1.5px 4px rgba(var(--shadow),.72),inset -1.5px -1.5px 4px rgba(var(--hilite),.86);}
	.co-row-actions > .co-skin-btn{grid-column:1/-1;display:flex;align-items:center;justify-content:center;width:100%;height:42px;min-height:42px;margin:0;padding:0;border:0;border-radius:999px;background:var(--chip);font-size:12.5px;box-shadow:inset 1.5px 1.5px 4px rgba(var(--shadow),.72),inset -1.5px -1.5px 4px rgba(var(--hilite),.86);}
	.co-row-actions > .co-quick-btn:active,.co-row-actions > .co-skin-btn:active{box-shadow:inset 2.5px 2.5px 6px rgba(var(--shadow),.82),inset -2.5px -2.5px 6px rgba(var(--hilite),.9);}
	.ph-title .co-meta-badge{margin-left:8px;}
	.co-skin-view{gap:8px;}
	.co-skin-name{flex-basis:100%;margin:0 0 3px;font-size:16px;}
	.data-archive-toggle{gap:14px;padding:16px;border-radius:17px;}
	.data-archive-heading .panel-desc{font-size:11.5px;}
	.data-toggle-label{min-height:30px;padding:0 10px;font-size:11px;}
	.data-archive-body{padding-top:15px;}
	:root[data-skin="paper"] .co-row{background:#f9f9f9;border:1px solid var(--edge-lo);box-shadow:none;}
	:root[data-skin="paper"] .co-row-actions > .co-quick-btn,
	:root[data-skin="paper"] .co-row-actions > .co-skin-btn{border:1px solid var(--edge-lo);box-shadow:none;}
	:root[data-skin="paper"][data-theme="dark"] .co-row{background:#2a2925;}
}
/* 쿠폰·적립금·추천 가입 */
.signup-order{width:100%;margin:18px 0 12px;padding:18px;border-radius:22px;background:var(--bg);box-shadow:inset 2px 2px 6px rgba(var(--shadow),.42),inset -2px -2px 6px rgba(var(--hilite),.72);}
.signup-order-title{margin-bottom:12px;font-size:13px;font-weight:700;color:var(--ink);text-align:left;}
.signup-order-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.signup-order-option{position:relative;cursor:pointer;}
.signup-order-option input{position:absolute;opacity:0;pointer-events:none;}
.signup-order-option span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px;border-radius:16px;background:var(--bg);font-size:13px;font-weight:600;color:var(--muted);box-shadow:4px 4px 10px rgba(var(--shadow),.45),-4px -4px 10px rgba(var(--hilite),.72);transition:.2s ease;}
.signup-order-option input:checked + span{color:var(--accent);box-shadow:inset 2px 2px 6px rgba(var(--shadow),.62),inset -2px -2px 6px rgba(var(--hilite),.78);}
.referral-field{position:relative;margin-top:18px;text-align:left;}
.referral-field[hidden]{display:none;}
.referral-field > label{display:block;margin:0 8px 7px;font-size:12px;font-weight:650;color:var(--ink);}
.referral-field > label span{font-weight:500;color:var(--muted);}
.referral-field .field{width:100%;margin:0;}
.referral-note{margin:9px 8px 0;font-size:12px;line-height:1.55;color:var(--muted);}
.referral-results{position:absolute;left:0;right:0;top:78px;z-index:12;padding:7px;border-radius:16px;background:var(--bg);box-shadow:7px 7px 20px rgba(var(--shadow),.55),-7px -7px 20px rgba(var(--hilite),.78);}
.referral-results[hidden]{display:none;}
.referral-results button{display:block;width:100%;padding:11px 13px;border:0;border-radius:11px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;}
.referral-results button:hover{background:var(--chip);}
.benefits-page{padding-bottom:100px;}
.benefit-admin-grid,.benefit-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:30px;}
.benefit-issue-card{padding:24px;}
.benefit-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.benefit-form label,.reward-setting label,.benefit-pay-panel label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:650;color:var(--muted);}
.benefit-form .btn{grid-column:1/-1;margin-top:4px;}
.benefit-referral-panel{margin-bottom:32px;padding:24px;}
.benefit-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px;}
.benefit-section-head p{margin:5px 0 0;font-size:12.5px;color:var(--muted);}
.reward-setting{display:flex;align-items:flex-end;gap:8px;}
/* ⚠️ `margin-bottom:0`이 핵심이다 (2026-08-03). 전역 `.field`에 `margin-bottom:20px`가 있어
   라벨 박스가 입력창보다 20px 더 길어지고, `.reward-setting{align-items:flex-end}`가
   그 **박스 아래끝**에 버튼을 맞추는 바람에 저장 버튼만 20px 내려가 보였다.
   이 선언을 지우면 다시 어긋난다. */
.reward-setting .field{width:150px;height:40px;margin-bottom:0;}
.benefit-referral-list{display:flex;flex-direction:column;gap:10px;}
.benefit-referral-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(280px,1.4fr) auto;gap:10px;align-items:center;padding:14px 16px;border-radius:17px;background:var(--chip);}
.benefit-referral-row > div{display:flex;flex-direction:column;gap:4px;}
.benefit-referral-row > div span{font-size:12px;color:var(--muted);}
.benefit-referral-row form{display:flex;gap:8px;align-items:center;}
.benefit-referral-row .field{height:40px;margin:0;}
.benefit-history .row-link{align-items:center;}
.benefit-history code,.benefit-coupon code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;}
.benefit-balance{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:18px;padding:28px;box-shadow:5px 5px 14px rgba(var(--shadow),.48),-5px -5px 14px rgba(var(--hilite),.76);}
.benefit-balance > span{font-size:13px;color:var(--muted);}
.benefit-balance strong{display:flex;align-items:baseline;gap:5px;margin:8px 0 4px;color:var(--ink);line-height:1;}
.benefit-balance strong b{font-size:29px;font-weight:720;letter-spacing:-.035em;}
.benefit-balance strong em{font-size:12px;font-style:normal;font-weight:650;letter-spacing:0;}
.benefit-balance p{margin:0;font-size:12px;color:var(--muted);}
.benefit-rule{display:flex;align-items:center;gap:16px;margin-bottom:32px;text-align:left;}
.benefit-rule span{font-size:12.5px;line-height:1.65;}
.benefit-coupon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:34px;}
.benefit-coupon{display:flex;flex-direction:column;gap:7px;min-height:190px;padding:22px;border-radius:23px;background:var(--bg);box-shadow:5px 5px 14px rgba(var(--shadow),.52),-5px -5px 14px rgba(var(--hilite),.78);}
.benefit-coupon:not(.active){opacity:.48;}
.benefit-coupon-status{align-self:flex-start;padding:5px 9px;border-radius:999px;background:var(--chip);font-size:12px;color:var(--muted);}
.benefit-coupon strong{margin-top:8px;font-size:14px;}
.benefit-coupon .benefit-money{display:flex;align-items:baseline;gap:4px;color:var(--accent-ink);line-height:1;}
.benefit-coupon .benefit-money span{font-size:21px;font-weight:720;letter-spacing:-.025em;}
.benefit-coupon .benefit-money em{font-size:12px;font-style:normal;font-weight:650;}
.benefit-coupon code,.benefit-coupon > span{font-size:12px;color:var(--muted);}
.benefit-amount{display:flex;align-items:baseline;gap:3px;color:var(--ink);white-space:nowrap;}
.benefit-amount b{font-size:14px;}
.benefit-amount em{font-size:12px;font-style:normal;font-weight:600;}
.benefit-amount.minus{color:var(--muted);}
.benefit-pay-warning{margin:10px 0 14px;padding:11px 13px;border-radius:13px;background:var(--chip);font-size:12px;line-height:1.6;color:var(--muted);}
/* 쿠폰·적립금 = 결제 방법 **위**에 놓이는 인플로 패널 (2026-08-03 2차 디렉션)
   ⚠️★ 팝오버(position:absolute)로 만들지 말 것 — 1차 시안이 그랬다가 반려됐다.
        열리면 문서 흐름에서 **결제 방법을 아래로 밀어내야** 한다.
   ⚠️★ `.final-form`이 `align-items:flex-end`다. `align-self:stretch`가 없으면
        폭이 콘텐츠만큼 줄어들어 좁게 나온다(반려 사유 중 하나).
   ⚠️ 상단 정렬은 DOM 순서로 얻는다 — `.review-side`의 첫 요소라서 좌측 `.quote-summary`와 윗변이 맞는다.
        모양(반경·패딩·볼록 그림자)도 그 카드에 맞춰 한 쌍으로 읽히게 했다. */
.benefit-pay-panel{align-self:stretch;
  /* ⚠️★ `auto-fit + minmax`를 쓰지 말 것 (2026-08-03 실사고).
        넓은 화면에서 **3열**이 생기고 3번째가 빈 채로 남아 가로를 다 못 쓴다.
        auto-fit의 빈 트랙 접힘은 `.benefit-pay-head`·`.benefit-pay-result`의
        `grid-column:1/-1`이 모든 트랙을 점유해 버려서 발동하지 않는다.
        → 2열 고정 + 좁은 구간에서만 미디어쿼리로 1열(두 줄). */
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 20px;align-content:start;
  margin:0 0 6px;padding:22px 26px;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);}
.benefit-pay-panel[hidden]{display:none;}
.benefit-pay-panel > .benefit-pay-head,.benefit-pay-panel > .benefit-pay-result{grid-column:1/-1;}
/* 패널이 좁아지는 구간에서만 두 줄로 (2026-08-03)
   ⚠️ 981~1180px 구간이 실제로 좁아지는 곳이다 — 좌측 견적 카드(max 480px)와 나란히 서기 때문.
      980px 이하에서는 `.quote-foot`가 세로로 쌓여 패널이 다시 전폭이 되므로 2열로 되돌아간다.
      진짜 1열이 필요한 건 760px 이하(모바일)이고 그건 아래 별도 미디어쿼리에서 처리한다. */
@media (min-width:981px) and (max-width:1180px){
  .benefit-pay-panel{grid-template-columns:minmax(0,1fr);}
}
.benefit-pay-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;}
.benefit-pay-head a{font-size:12px;color:var(--accent);}
/* 좌우 컬럼 정렬 (2026-08-03 사용자 지적 "정렬이 맞지 않아")
   ⚠️★ 원인 둘. ① `적립금` 캡션이 `적립금` + `보유 0원` 두 줄이라 우측 입력창이 좌측보다 내려갔다.
        → 캡션을 `.bp-cap` 한 줄로 묶어 양쪽 라벨 높이를 같게 만든다. 여기서 줄바꿈이 생기면 다시 어긋난다.
        ② 전역 `.field`에 `margin-bottom:20px`가 있어 입력창 아래 유령 여백이 생기고,
           그 여백까지 늘어난 `전액 사용` 버튼이 입력창보다 커 보였다. → 이 패널 안에서만 0으로 죽인다. */
.benefit-pay-panel .bp-cap{display:flex;align-items:baseline;gap:8px;min-height:17px;font-weight:650;}
.benefit-pay-panel .bp-sub{font-weight:500;}
/* ⚠️★ 셀렉트와 인풋의 세로 중앙을 **보장**하려면 높이를 명시해야 한다 (2026-08-03).
   패딩만으로는 안 된다 — `<select>`와 `<input>`은 내부 줄높이 계산이 브라우저마다 달라
   같은 패딩을 줘도 몇 px씩 어긋난다. 높이를 못 박으면 둘 다 그 안에서 중앙 정렬된다. */
.benefit-pay-panel .field{margin-bottom:0;box-sizing:border-box;height:54px;padding-top:0;padding-bottom:0;}
.benefit-point-input{display:flex;align-items:stretch;gap:8px;}
.benefit-point-input .field{flex:1;min-width:0;}
.benefit-point-input button{flex:none;min-width:104px;padding:0 22px;border:0;border-radius:30px;background:var(--chip);color:var(--ink);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap;}
.benefit-pay-result{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--edge-lo);font-size:12px;}
.benefit-pay-result strong{font-size:18px;color:var(--accent);}
.qs-row.benefit-minus b{color:var(--accent);}
.bill-benefit{display:block;margin-top:4px;font-size:12px;color:var(--muted);}
.lw-benefit-list{display:flex;flex-direction:column;gap:7px;width:100%;margin-top:13px;}
.lw-benefit{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.11);color:inherit;text-decoration:none;text-align:left;}
.lw-benefit span{font-size:12px;opacity:.68;}
.lw-benefit b{font-size:12px;font-weight:600;}
.work-progress-block{scroll-margin-top:120px;}
:root[data-skin="paper"] .signup-order,:root[data-skin="paper"] .benefit-balance,:root[data-skin="paper"] .benefit-coupon,:root[data-skin="paper"] .benefit-pay-panel{border:1px solid var(--edge-lo);box-shadow:none;}
:root[data-skin="paper"] .benefit-balance strong,:root[data-skin="paper"] .benefit-coupon .benefit-money,:root[data-skin="paper"] .benefit-amount{color:var(--accent-ink);}
:root[data-skin="paper"] .benefit-amount.minus{color:var(--muted);}

/* 작업 완료 확인 · 운영 기준 */
.completion-admin-form{display:flex;justify-content:flex-end;margin-top:16px;}
.completion-review-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px;border-radius:22px;background:var(--bg);box-shadow:inset 2px 2px 6px rgba(var(--shadow),.46),inset -2px -2px 6px rgba(var(--hilite),.72);}
.completion-review-kicker{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--accent-ink);}
.completion-review-card h3{margin:0;font-size:21px;}
.completion-review-card .review-msg{margin:0;text-align:left;}
.quote-summary-disclosure{flex:1;min-width:300px;max-width:480px;padding:0;border-radius:18px;background:var(--bg);box-shadow:inset 2px 2px 6px rgba(var(--shadow),.42),inset -2px -2px 6px rgba(var(--hilite),.7);}
.quote-summary-disclosure summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 17px;cursor:pointer;list-style:none;font-size:12px;font-weight:650;color:var(--muted);}
.quote-summary-disclosure summary::-webkit-details-marker{display:none;}
.quote-summary-disclosure summary::after{content:'+';font-family:var(--mono);font-size:15px;font-weight:500;color:var(--accent-ink);}
.quote-summary-disclosure[open] summary::after{content:'−';}
.quote-summary-disclosure[open] summary{border-bottom:1px solid var(--edge-lo);}
.quote-summary-disclosure .quote-summary{min-width:0;max-width:none;padding:17px;}
.completion-final-action{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:56px;padding:24px 26px;border-radius:24px;background:var(--bg);box-shadow:5px 5px 14px rgba(var(--shadow),.48),-5px -5px 14px rgba(var(--hilite),.76);}
.completion-final-action > span{font-size:13px;font-weight:620;color:var(--text);}
.completion-final-action form{flex:0 1 360px;margin:0;}
.completion-final-action .btn{width:100%;height:54px;margin:0;border-radius:999px;font-size:14px;}
.item-admin-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto;}
.item-admin-actions form{margin:0;}
/* ★타이틀 영역 여백 확대(2026-08 사용자 지시): 뒤로가기↔타이틀, 타이틀 영역↔첫 그룹 사이를 더 벌린다. 이 페이지에만 스코프. */
.operation-settings .page-head{margin:16px 0 46px;}
:root[data-skin="paper"] .operation-settings .page-head{margin-bottom:46px;}
.operation-settings .page-head .back{margin-bottom:28px;}
.operation-settings-form{display:flex;flex-direction:column;gap:34px;}   /* 그룹 간 여백 넉넉히(22→34) */
.operation-group{margin:0;}
/* ★중간 타이틀 = 항목보다 확실히 잘 보이게(2026-08 사용자 지시): 진하게 + 왼쪽 액센트 바 */
.operation-group .block-title{position:relative;font-size:15.5px;font-weight:700;color:var(--text);
  padding-left:14px;margin-bottom:16px;letter-spacing:.01em;}
.operation-group .block-title::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;background:var(--accent);}
.operation-list{display:flex;flex-direction:column;}
.operation-row{display:grid;grid-template-columns:minmax(240px,1fr) auto;align-items:center;gap:24px;padding:18px 0;border-bottom:1px solid var(--edge-lo);}
.operation-row:last-child{border-bottom:0;}
.operation-copy{display:flex;flex-direction:column;gap:5px;}
.operation-copy strong{font-size:15px;}
.operation-copy small{font-size:12px;line-height:1.55;color:var(--muted);}
/* ★수량 컨트롤 = 슬라이더 → **±스테퍼**(2026-08 사용자 지시). [− | 숫자 단위 | +] 한 알약. 숫자는 가운데 정렬로 행마다 위치 통일. */
.operation-control{display:flex;justify-content:flex-end;}
/* ★±버튼과 수량 인풋을 **분리**(2026-08 사용자 지시): 버튼=독립 볼록, 인풋=독립 오목, 사이 간격. 컨테이너는 배경 없음. */
.operation-number{display:flex;align-items:center;gap:10px;}
.op-step{flex:none;width:46px;height:46px;border-radius:14px;cursor:pointer;
  border:0;border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);background:var(--bg);
  font-size:21px;line-height:1;color:var(--muted);-webkit-tap-highlight-color:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1);
  transition:color .15s, box-shadow .15s;}
.op-step:hover{color:var(--accent);}
.op-step:active{transform:translateY(1px);box-shadow:inset 2px 2px 5px rgba(var(--shadow),1), inset -2px -2px 5px rgba(var(--hilite),1);}
/* 수량 인풋(오목·독립) — 숫자 가운데, 단위 우측. 고정폭으로 행마다 정렬. */
.op-val{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  height:46px;min-width:88px;padding:0 12px;border-radius:14px;background:var(--bg);
  box-shadow:inset 2px 2px 5px rgba(var(--shadow),.5), inset -2px -2px 5px rgba(var(--hilite),.75);}
.op-val input{width:40px;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-weight:600;text-align:center;-moz-appearance:textfield;}
.op-val input::-webkit-outer-spin-button,.op-val input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.op-val em{flex:none;min-width:20px;text-align:left;font-size:12px;font-style:normal;color:var(--muted);}
.operation-save{display:flex;justify-content:flex-end;margin-top:8px;}
/* 스킨 폼 — 프로그램 기능 포함 토글 */
.sk-prog-toggle{display:flex;gap:11px;align-items:flex-start;margin:16px 0 4px;cursor:pointer;font-size:13.5px;color:var(--muted);line-height:1.6;}
.sk-prog-toggle input{margin-top:2px;width:17px;height:17px;flex:none;accent-color:var(--accent-ink);}
.sk-prog-toggle strong{color:var(--text);font-weight:640;}
:root[data-skin="paper"] .completion-review-card,:root[data-skin="paper"] .quote-summary-disclosure,:root[data-skin="paper"] .completion-final-action,:root[data-skin="paper"] .op-val,:root[data-skin="paper"] .op-step{border:1px solid var(--edge-lo);box-shadow:none;}
:root[data-skin="paper"] .op-step:active{box-shadow:none;background:var(--chip);}

@media (max-width:760px){
	.signup-order{padding:15px;border-radius:19px;}
	.signup-order-options{grid-template-columns:1fr;gap:8px;}
	.signup-order-option span{min-height:44px;font-size:12.5px;}
	.benefit-admin-grid,.benefit-history-grid{grid-template-columns:1fr;gap:18px;}
	.benefit-issue-card,.benefit-referral-panel{padding:18px;}
	.benefit-form{grid-template-columns:1fr;}
	.benefit-section-head{flex-direction:column;}
	.reward-setting{width:100%;}
	.reward-setting label{flex:1;}
	.reward-setting .field{width:100%;}
	.benefit-referral-row{grid-template-columns:1fr;gap:12px;}
	.benefit-referral-row form{width:100%;}
	.benefit-referral-row form .field{flex:1;min-width:0;}
	.benefit-coupon-grid{grid-template-columns:1fr;}
	.benefit-balance{padding:22px;}
	.benefit-rule{align-items:flex-start;flex-direction:column;gap:5px;}
	/* 모바일은 무조건 1열(두 줄) — auto-fit이 이미 접지만 명시해 둔다 (2026-08-03) */
	.benefit-pay-panel{grid-template-columns:minmax(0,1fr);gap:13px;margin:0 0 4px;padding:16px;}
	.benefit-point-input button{min-width:92px;padding:0 16px;}
}
@media (max-width:760px){
	.completion-admin-form .btn,.completion-review-card .btn{width:100%;}
	.quote-summary-disclosure{width:100%;min-width:0;max-width:none;}
	.completion-final-action{align-items:stretch;flex-direction:column;margin-top:42px;padding:20px;}
	.completion-final-action > span{font-size:12.5px;}
	.completion-final-action form{flex:none;width:100%;}
	.item-admin-actions{gap:5px;}
	.item-admin-actions .chip-btn{min-width:54px;}
	.operation-row{grid-template-columns:1fr;gap:14px;padding:18px 0;}
	.operation-control{justify-content:flex-start;}
	.operation-save .btn{width:100%;}
}

/* 업체 내부 히스토리 */
.history-wrap{display:flex;flex-direction:column;gap:30px;}
.history-page-head{margin-bottom:0;}
.history-count{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:25px;padding:0 9px;margin-left:8px;border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);background:var(--chip);vertical-align:middle;}
.history-head-actions{display:flex;align-items:center;gap:10px;}
.history-composer{padding:30px;border-radius:26px;background:var(--bg);border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);box-shadow:5px 5px 14px rgba(var(--shadow),.62),-5px -5px 14px rgba(var(--hilite),.82);}
.history-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:26px;}
.history-section-head h2{margin:4px 0 7px;font-family:var(--sans);font-size:20px;font-weight:650;color:var(--text);}
.history-section-head p{margin:0;font-size:13px;line-height:1.65;color:var(--muted);}
.history-kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--accent);}
.history-form{display:flex;flex-direction:column;gap:18px;}
.history-form label,.history-import label{display:flex;flex-direction:column;gap:8px;}
.history-field-grid{display:grid;grid-template-columns:160px 160px minmax(260px,1fr) 150px;gap:14px;}
.history-form .field,.history-import .field,.history-filter .field{margin:0;}
.history-editor{min-height:310px;padding:20px;resize:vertical;font-family:var(--sans);font-size:13px;line-height:1.75;white-space:pre-wrap;tab-size:2;}
.history-form-actions{display:flex;align-items:center;gap:10px;}
.history-template-source,.history-copy-source{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none;}
.history-import{padding:0;border-radius:22px;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),.5),-3px -3px 8px rgba(var(--hilite),.72);overflow:hidden;}
.history-import > summary{display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:0 22px;list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--title-ink);}
.history-import > summary::-webkit-details-marker{display:none;}
.history-import > summary::after{content:'＋';font-family:var(--mono);font-size:17px;font-weight:400;color:var(--muted);transition:transform .25s ease;}
.history-import[open] > summary::after{transform:rotate(45deg);}
.history-import form{display:flex;flex-direction:column;gap:16px;padding:4px 22px 24px;border-top:1px solid var(--div-lo);}
.history-import form > p{margin:18px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);}
.history-import-editor{min-height:240px;padding:18px;resize:vertical;font-family:var(--mono);font-size:12px;line-height:1.7;}
.history-list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:8px;}
.history-list-head h2{margin:0 0 6px;font-size:20px;font-weight:650;color:var(--text);}
.history-list-head p{margin:0;font-size:12.5px;color:var(--muted);}
.history-export-actions{display:flex;align-items:center;gap:8px;}
.history-filter{display:grid;grid-template-columns:minmax(260px,1fr) 190px auto auto;gap:10px;align-items:center;}
.history-filter .field{height:46px;}
.history-list{display:flex;flex-direction:column;gap:12px;}
.history-entry{border-radius:20px;background:var(--bg);border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);box-shadow:4px 4px 10px rgba(var(--shadow),.56),-4px -4px 10px rgba(var(--hilite),.78);overflow:hidden;}
.history-entry > summary{display:grid;grid-template-columns:112px minmax(0,1fr) 30px;align-items:center;gap:18px;min-height:78px;padding:15px 20px;list-style:none;cursor:pointer;}
.history-entry > summary::-webkit-details-marker{display:none;}
.history-entry-date{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--accent);}
.history-entry-main{display:flex;flex-direction:column;gap:6px;min-width:0;}
.history-entry-main strong{overflow:hidden;font-size:15px;font-weight:620;color:var(--text);text-overflow:ellipsis;white-space:nowrap;}
.history-entry-main span{font-size:12px;color:var(--muted);}
.history-entry-toggle{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-family:var(--mono);font-size:17px;color:var(--muted);background:var(--chip);transition:transform .25s ease;}
.history-entry[open] .history-entry-toggle{transform:rotate(45deg);}
.history-entry-content{padding:0 20px 22px;border-top:1px solid var(--div-lo);}
.history-entry-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:16px 0;font-size:12px;color:var(--muted);}
.history-source{flex-basis:100%;overflow-wrap:anywhere;}
.history-md{max-height:560px;margin:0;padding:22px;border-radius:16px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--sans);font-size:13px;line-height:1.75;color:var(--text);background:var(--chip);box-shadow:inset 2px 2px 6px rgba(var(--shadow),.42),inset -2px -2px 6px rgba(var(--hilite),.7);}
.history-entry-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:16px;}
.history-entry-actions form{margin:0;}
:root[data-skin="paper"] .history-composer,:root[data-skin="paper"] .history-import,:root[data-skin="paper"] .history-entry{background:#f9f9f9;border:1px solid var(--edge-lo);box-shadow:none;}
:root[data-skin="paper"] .history-md{background:var(--chip);border:1px solid var(--edge-lo);box-shadow:none;}
:root[data-skin="paper"][data-theme="dark"] .history-composer,:root[data-skin="paper"][data-theme="dark"] .history-import,:root[data-skin="paper"][data-theme="dark"] .history-entry{background:#2a2925;}
@media (max-width:900px){
	.history-field-grid{grid-template-columns:1fr 1fr;}
	.history-title-field{grid-column:1/-1;}
	.history-filter{grid-template-columns:minmax(0,1fr) 170px auto;}
}
@media (max-width:640px){
	.history-wrap{gap:24px;}
	.history-page-head,.history-section-head,.history-list-head{align-items:stretch;flex-direction:column;}
	.history-head-actions,.history-export-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;}
	.history-head-actions > *,.history-export-actions > *{display:flex;justify-content:center;width:100%;}
	.history-composer{padding:22px 17px;border-radius:20px;}
	.history-section-head{gap:14px;margin-bottom:22px;}
	.history-section-head > .chip-btn{align-self:flex-start;}
	.history-field-grid,.history-filter{grid-template-columns:1fr;}
	.history-title-field{grid-column:auto;}
	.history-editor{min-height:360px;padding:16px;font-size:13px;}
	.history-form-actions{display:grid;grid-template-columns:1fr;}
	.history-form-actions > *{display:flex;justify-content:center;width:100%;}
	.history-import > summary{min-height:56px;padding:0 17px;}
	.history-import form{padding:4px 17px 20px;}
	.history-entry > summary{grid-template-columns:1fr 30px;gap:9px 12px;min-height:88px;padding:16px 17px;}
	.history-entry-date{grid-column:1/-1;}
	.history-entry-main strong{font-size:15px;white-space:normal;}
	.history-entry-toggle{grid-column:2;grid-row:2;}
	.history-entry-content{padding:0 14px 17px;}
	.history-md{max-height:65vh;padding:17px;font-size:12.5px;}
	.history-entry-actions{display:grid;grid-template-columns:1fr 1fr 1fr;}
	.history-entry-actions > *,.history-entry-actions form .chip-btn{display:flex;justify-content:center;width:100%;}
}

/* 업체 목록 접이식 관리 메뉴 — 2026-08-03 */
.co-row{position:relative;overflow:visible;}
.co-row-menu{position:relative;flex:none;align-self:stretch;display:flex;z-index:3;}
.co-row-menu > summary{list-style:none;min-width:78px;padding:0 18px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:12px;font-weight:600;line-height:1;color:var(--title-ink);cursor:pointer;user-select:none;background:var(--bg);border:0;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);transition:box-shadow .25s ease,color .2s ease;}
.co-row-menu > summary::-webkit-details-marker{display:none;}
.co-row-menu > summary::marker{content:"";}
.co-row-menu[open]{z-index:40;}
.co-row-menu[open] > summary{color:var(--text);box-shadow:inset 2px 2px 6px rgba(var(--shadow),.78),inset -2px -2px 6px rgba(var(--hilite),.9);}
/* 유리 통일(2026-08-06) — 옛 불투명 뉴모 드롭다운을 팝업 표준(유리)으로. 정본 = 디자인시스템.md §5-1 ⓐ. */
.co-row-menu-panel{position:absolute;top:calc(100% + 9px);right:0;z-index:41;display:grid;grid-template-columns:repeat(3,minmax(92px,1fr));width:310px;padding:8px;border-radius:16px;background:var(--panel-bg);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);border:1px solid var(--panel-edge);box-shadow:var(--panel-shadow);}
.co-row-menu-action{min-width:0;min-height:42px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;background:transparent;font-family:var(--sans);font-size:12px;font-weight:560;line-height:1;color:var(--title-ink);text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;transition:background .2s ease,color .2s ease,box-shadow .2s ease;}
.co-row-menu-action:hover{color:var(--text);background:var(--panel-field-bg);box-shadow:none;}
.co-row-menu-action.co-skin-btn{align-self:auto;min-width:0;padding:0 10px;border:0;border-radius:999px;background:transparent;box-shadow:none;}
.co-row-menu-action.co-skin-btn:hover{background:var(--chip);box-shadow:inset 1.5px 1.5px 4px rgba(var(--shadow),.45),inset -1.5px -1.5px 4px rgba(var(--hilite),.65);}
.co-row-menu .co-action-count{min-width:18px;height:18px;padding:0 5px;font-size:12px;}
:root[data-skin="paper"] .co-row-menu > summary{border:1px solid var(--edge-lo);box-shadow:none;}
:root[data-skin="paper"] .co-row-menu[open] > summary{background:var(--chip);box-shadow:none;}
:root[data-skin="paper"] .co-row-menu-panel{border:1px solid var(--edge-lo);box-shadow:0 8px 20px rgba(0,0,0,.08);}
:root[data-skin="paper"] .co-row-menu-action:hover,:root[data-skin="paper"] .co-row-menu-action.co-skin-btn:hover{box-shadow:none;}
@media (max-width:640px){
	.co-row{overflow:hidden;}
	.co-row-menu{position:static;display:block;width:calc(100% - 28px);align-self:center;margin:0 14px 14px;}
	.co-row-menu > summary{width:100%;min-height:38px;padding:0 14px;border:0;border-radius:12px;background:var(--chip);box-shadow:inset 1.5px 1.5px 4px rgba(var(--shadow),.56),inset -1.5px -1.5px 4px rgba(var(--hilite),.76);}
	.co-row-menu[open] > summary{box-shadow:inset 2.5px 2.5px 6px rgba(var(--shadow),.78),inset -2.5px -2.5px 6px rgba(var(--hilite),.88);}
	.co-row-menu-panel{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:8px;padding:6px;border:0;border-radius:12px;background:var(--chip);box-shadow:none;}
	.co-row-menu-action,.co-row-menu-action.co-skin-btn{width:100%;min-height:40px;padding:0 5px;font-size:12px;white-space:normal;text-align:center;}
	:root[data-skin="paper"] .co-row-menu > summary,:root[data-skin="paper"] .co-row-menu-panel{border:1px solid var(--edge-lo);box-shadow:none;}
}
/* 히스토리 목록 우선 · 작성 팝업 — 2026-08-03 */
.history-list-head{margin-top:0;}
.history-export-actions{flex-wrap:wrap;justify-content:flex-end;}
.history-create-btn{min-height:38px;padding:0 16px;}
.history-compose-modal[hidden]{display:none!important;}
.history-compose-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:28px;opacity:0;transition:opacity .22s ease;}
.history-compose-modal.is-open{opacity:1;}
.history-compose-scrim{position:absolute;inset:0;background:var(--scrim-bg);-webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur);}
/* ★팝업으로 뜰 때만 유리 — `.history-composer`는 페이지 안 섹션으로도 쓰여서 그쪽은 건드리지 않는다.
   (이 규칙이 .history-composer보다 뒤에 있어 같은 특이도로 이긴다 — 순서를 바꾸지 말 것) */
.history-compose-box{position:relative;z-index:1;width:min(1180px,calc(100vw - 56px));max-height:calc(100dvh - 56px);margin:0;overflow:auto;transform:translateY(18px);opacity:.4;transition:transform .32s cubic-bezier(.22,.8,.25,1),opacity .24s ease;
  background:var(--panel-bg);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:1px solid var(--panel-edge);box-shadow:var(--panel-shadow);}
.history-compose-modal.is-open .history-compose-box{transform:translateY(0);opacity:1;}
.history-section-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
.history-import{margin-top:0;}
@media (max-width:760px){
	.history-list-head{align-items:flex-start;}
	.history-export-actions{width:100%;justify-content:flex-start;}
	.history-create-btn{order:-1;width:100%;}
	.history-compose-modal{place-items:end center;padding:10px;}
	/* 모바일 전용 블러 완화는 없앴다 — 팝업 스크림은 한 가지 값(--scrim-blur)만 쓴다(2026-08-05). */
	.history-compose-box{width:100%;max-height:calc(100dvh - 20px);padding:22px 17px;border-radius:22px;transform:translateY(28px);}
	.history-section-head{align-items:flex-start;}
	.history-section-actions{width:100%;justify-content:flex-start;}
}
/* 히스토리 사용자용 요약 · AI 원문 분리 — 2026-08-03 */
.history-human-field{padding:18px;border-radius:16px;background:var(--chip);box-shadow:inset 1.5px 1.5px 5px rgba(var(--shadow),.48),inset -1.5px -1.5px 5px rgba(var(--hilite),.68);}
.history-field-help{margin-top:-2px;font-size:12px;line-height:1.55;color:var(--muted);}
.history-human-editor{min-height:112px;padding:16px;resize:vertical;font-family:var(--sans);font-size:14px;line-height:1.75;}
.history-human-head{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:16px;padding:20px 20px 12px;}
.history-human-summary{margin:0;padding:0 20px 20px;font-size:14px;line-height:1.8;color:var(--title-ink);word-break:keep-all;overflow-wrap:anywhere;}
.history-ai-detail{border-top:1px solid var(--div-lo);}
.history-ai-detail > summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 20px;list-style:none;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;}
.history-ai-detail > summary::-webkit-details-marker{display:none;}
.history-ai-detail > summary::marker{content:"";}
.history-ai-detail[open] .history-entry-toggle{transform:rotate(45deg);}
.history-ai-detail .history-entry-content{padding:0 20px 22px;}
.history-ai-empty{padding:22px;border-radius:16px;background:var(--chip);font-size:12px;line-height:1.7;color:var(--muted);text-align:center;box-shadow:inset 1.5px 1.5px 5px rgba(var(--shadow),.42),inset -1.5px -1.5px 5px rgba(var(--hilite),.64);}
:root[data-skin="paper"] .history-human-field,:root[data-skin="paper"] .history-ai-empty{border:1px solid var(--edge-lo);box-shadow:none;}
@media (max-width:760px){
	.history-human-field{padding:15px;border-radius:14px;}
	.history-human-editor{min-height:104px;padding:14px;font-size:13px;}
	.history-human-head{grid-template-columns:80px minmax(0,1fr);gap:11px;padding:17px 15px 10px;}
	.history-human-summary{padding:0 15px 17px;font-size:13px;line-height:1.75;}
	.history-ai-detail > summary{min-height:46px;padding:0 15px;}
	.history-ai-detail .history-entry-content{padding:0 15px 17px;}
}
/* 히스토리 읽기 쉬운 단일 목록 — 2026-08-03 */
.history-list{display:flex;flex-direction:column;gap:0;border-radius:22px;overflow:hidden;background:var(--bg);border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);box-shadow:5px 5px 13px rgba(var(--shadow),.72),-5px -5px 13px rgba(var(--hilite),.84);}
.history-list .history-entry{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;}
.history-list .history-entry:not(:last-child){border-bottom:1px solid var(--div-lo);}
.history-entry > summary.history-list-row{display:grid;grid-template-columns:112px minmax(0,1fr) 32px;align-items:center;gap:18px;min-height:92px;padding:17px 20px;list-style:none;cursor:pointer;transition:background .2s ease;}
.history-entry > summary.history-list-row::-webkit-details-marker{display:none;}
.history-entry > summary.history-list-row::marker{content:"";}
.history-entry > summary.history-list-row:hover{background:var(--chip);}
.history-row-content{display:flex;flex-direction:column;gap:7px;min-width:0;}
.history-row-title{display:flex;align-items:center;gap:9px;min-width:0;}
.history-row-title strong{overflow:hidden;font-size:14px;font-weight:650;line-height:1.4;color:var(--text);text-overflow:ellipsis;white-space:nowrap;}
.history-row-tag{flex:none;padding:3px 7px;border-radius:999px;background:var(--chip);font-size:12px;font-weight:600;line-height:1.2;color:var(--muted);}
.history-list .history-human-summary{display:-webkit-box;margin:0;padding:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:13px;line-height:1.65;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere;}
.history-list .history-entry-date{font-size:12px;line-height:1.4;color:var(--accent);}
.history-list .history-entry-toggle{background:var(--chip);}
.history-list .history-entry-content{padding:0 20px 22px;border-top:1px solid var(--div-lo);}
.history-ai-heading{padding-top:18px;font-size:12px;font-weight:700;color:var(--muted);}
.history-ai-admin{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px 4px;border-top:1px solid var(--div-lo);}
.history-ai-admin p{margin:0;font-size:12px;line-height:1.6;color:var(--muted);}
.history-ai-admin-actions{display:flex;align-items:center;gap:8px;flex:none;}
:root[data-skin="paper"] .history-list{border:1px solid var(--edge-lo);box-shadow:none;}
:root[data-skin="paper"] .history-entry > summary.history-list-row:hover{background:var(--chip);}
@media (max-width:760px){
	.history-list{border-radius:18px;}
	.history-entry > summary.history-list-row{grid-template-columns:72px minmax(0,1fr) 28px;gap:10px;min-height:88px;padding:15px 13px;}
	.history-row-title{align-items:flex-start;flex-direction:column;gap:5px;}
	.history-row-title strong{width:100%;font-size:13px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
	.history-row-tag{padding:2px 6px;font-size:12px;}
	.history-list .history-human-summary{font-size:12px;line-height:1.6;}
	.history-list .history-entry-date{font-size:12px;}
	.history-list .history-entry-content{padding:0 13px 17px;}
	.history-ai-admin{align-items:flex-start;flex-direction:column;padding:16px 15px 4px;}
	.history-ai-admin-actions{width:100%;}
	.history-ai-admin-actions .chip-btn{flex:1;}
}
/* 히스토리 제목 위계 · 버튼 높이 · 모바일 정리 — 2026-08-03 */
.history-page-head .ph-title{font-size:25px;font-weight:700;line-height:1.3;color:var(--text);}
.history-page-head .ph-sub{margin-top:8px;font-size:13px;line-height:1.65;}
.history-list-head{margin-top:26px;}
.history-list-head h2{margin-bottom:7px;font-size:18px;font-weight:600;line-height:1.35;}
.history-list-head p{font-size:12px;line-height:1.6;}
.history-head-actions > .btn.inline,.history-head-actions > .chip-btn.sm,.history-export-actions > .history-create-btn,.history-filter > .chip-btn.sm{height:46px;min-height:46px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.history-head-actions > .btn.inline,.history-head-actions > .chip-btn.sm{min-width:112px;padding-left:18px;padding-right:18px;}
.history-filter .field{height:46px;min-height:46px;}
.history-head-actions > .history-head-btn{position:relative;min-width:128px;height:46px;min-height:46px;margin:0;padding:0 20px;border:0;border-radius:999px;background:var(--chip);box-shadow:none;font-family:var(--sans);font-size:13.5px;font-weight:540;line-height:1;color:var(--text);letter-spacing:0;text-decoration:none;}
.history-head-actions > .history-head-btn.history-head-btn--raised{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),.9),-5px -5px 12px rgba(var(--hilite),.9);}
.history-filter{overflow:visible;}
.history-filter > *{min-width:0;}
.history-filter select.field{display:block;width:100%;height:46px;min-height:46px;margin:0;padding:0 46px 0 22px;overflow:visible;border-radius:23px;line-height:normal;background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;}
.history-entry-actions > .chip-btn.sm,.history-entry-actions form .chip-btn.sm{min-height:40px;}
@media (max-width:640px){
	.history-wrap{gap:24px;}
	.history-page-head .ph-title{font-size:22px;font-weight:700;}
	.history-page-head .ph-sub{margin-top:7px;font-size:12px;line-height:1.6;}
	.history-list-head{margin-top:22px;gap:15px;}
	.history-list-head h2{margin-bottom:6px;font-size:17px;font-weight:600;}
	.history-head-actions{gap:8px;}
	.history-head-actions > .btn.inline,.history-head-actions > .chip-btn.sm,.history-export-actions > .history-create-btn,.history-filter > .chip-btn.sm{width:100%;height:44px;min-height:44px;padding:0 12px;white-space:nowrap;}
	.history-filter .field{width:100%;height:44px;min-height:44px;}
	.history-head-actions > .history-head-btn{width:100%;min-width:0;height:44px;min-height:44px;padding:0 12px;}
	.history-filter select.field{height:44px;min-height:44px;padding:0 44px 0 20px;border-radius:22px;background-position:calc(100% - 21px) 50%,calc(100% - 16px) 50%;}
	.history-ai-admin-actions{display:grid;grid-template-columns:1fr;gap:8px;}
	.history-ai-admin-actions .chip-btn.sm{width:100%;min-height:42px;display:flex;align-items:center;justify-content:center;}
	.history-section-actions .chip-btn.sm{min-height:42px;display:inline-flex;align-items:center;justify-content:center;}
	.history-entry-actions > .chip-btn.sm,.history-entry-actions form .chip-btn.sm{min-height:40px;}
}
/* ═══ 업체 선택 팝업 + 즐겨찾기 (2026-08-03 신설, 사용자 지시) ═══════════════
   ⚠️ 스킨 2축(soft/paper × 라이트/다크) 전부에서 살아야 한다. 색은 전부 변수로만 쓴다.
   ⚠️ 트리거는 `.field`(입력창)와 같은 높이·반경으로 맞춘다 — 폼 안에서 셀렉트 자리를 대신하기 때문. */
.cp-field{display:flex;}
.cp-trigger{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:54px;padding:0 20px 0 26px;border:0;border-radius:30px;cursor:pointer;
  background:var(--field-bg);color:var(--field-ink);font:inherit;font-size:14.5px;text-align:left;
  border-top:1.5px solid var(--edge-hi);border-left:1.5px solid var(--edge-hi);
  box-shadow:inset 3.8px 3px 6px rgba(var(--fld-sh),1), inset -5px -6px 9px rgba(var(--fld-hi),1);}
.cp-trigger-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ph);}
.cp-trigger-label.is-set{color:var(--field-ink);font-weight:600;}
.cp-trigger-cue{flex:none;font-size:11.5px;font-weight:650;letter-spacing:.02em;color:var(--accent-ink);}
:root[data-skin="paper"] .cp-trigger{border:1px solid var(--edge-lo);box-shadow:none;}

.cpick[hidden]{display:none;}
.cpick{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:24px;}
html.cpick-lock{overflow:hidden;}
.cpick-scrim{position:absolute;inset:0;background:var(--scrim-bg);-webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur);}
.cpick-panel{position:relative;display:flex;flex-direction:column;width:min(560px,100%);max-height:min(78vh,720px);
  border-radius:22px;overflow:hidden;
  background:var(--panel-bg);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:1px solid var(--panel-edge);box-shadow:var(--panel-shadow);}
.cpick-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 14px;}
.cpick-head strong{display:block;font-size:15px;font-weight:700;}
.cpick-hint{display:block;margin-top:4px;font-size:12px;color:var(--muted);}
.cpick-x{flex:none;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:var(--chip);color:var(--muted);font-size:19px;line-height:1;}
.cpick-x:hover{background:var(--chip-h);color:var(--text);}
.cpick-tools{display:flex;flex-direction:column;gap:10px;padding:0 22px 14px;}
.cpick-search{margin-bottom:0;height:46px;}
.cpick-sorts{display:flex;flex-wrap:wrap;gap:7px;}
.cpick-sort{padding:8px 14px;border:0;border-radius:30px;cursor:pointer;background:var(--chip);
  color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;transition:background .2s,color .2s;}
.cpick-sort:hover{background:var(--chip-h);color:var(--text);}
.cpick-sort.is-on{color:#fff;background:var(--accent);}
.cpick-list{flex:1;min-height:0;overflow-y:auto;padding:0 12px 6px;}
.cpick-empty{padding:34px 12px;text-align:center;font-size:13px;color:var(--muted);}
.cpick-row{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:14px;cursor:pointer;}
.cpick-row:hover{background:var(--chip);}
.cpick-row.is-on{background:rgba(241,90,36,.09);}
.cpick-check{flex:none;width:18px;height:18px;accent-color:var(--accent);cursor:pointer;}
.cpick-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.cpick-name{font-size:13.5px;font-weight:650;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpick-name em{font-style:normal;font-weight:500;color:var(--muted);}
.cpick-meta{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.cpick-fav{flex:none;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--edge-lo);font-size:16px;line-height:1;transition:color .2s,background .2s;}
.cpick-fav:hover{background:var(--chip-h);color:var(--muted);}
.cpick-fav.is-on{color:var(--accent);}
.cpick-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 22px 18px;border-top:1px solid var(--edge-lo);}
.cpick-count{font-size:12.5px;font-weight:650;color:var(--muted);}
.cpick-actions{display:flex;gap:8px;}

/* 업체 목록의 즐겨찾기 별 */
.co-fav{flex:none;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;
  background:var(--chip);color:var(--edge-lo);font-size:16px;line-height:1;transition:color .2s,background .2s;}
.co-fav:hover{background:var(--chip-h);color:var(--muted);}
.co-fav.is-on{color:var(--accent);}

/* 기본 적립금 `저장` — 입력창과 같은 높이·반경으로 맞춤 (2026-08-03 사용자 지적 "무드와 안 맞음") */
.reward-setting .mini-btn{height:40px;padding:0 20px;border-radius:999px;border:0;cursor:pointer;
  background:var(--chip);color:var(--text);font:inherit;font-size:12.5px;font-weight:650;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  transition:background .2s ease,color .2s ease;}
.reward-setting .mini-btn:hover{background:var(--chip-h);color:var(--accent-ink);}

@media (max-width:760px){
  /* 모바일은 하단 시트 */
  .cpick{padding:0;align-items:flex-end;}
  .cpick-panel{width:100%;max-height:86vh;border-radius:22px 22px 0 0;}
  .cpick-foot{padding-bottom:calc(18px + env(safe-area-inset-bottom));}
  .cpick-actions{flex:1;}
  .cpick-actions .btn,.cpick-actions .chip-btn{flex:1;}
  .cp-trigger{height:50px;padding:0 16px 0 20px;}
}

/* 업체 목록 즐겨찾기 별 — `.co-row`(flex)의 첫 칸 (2026-08-03)
   ⚠️ `.co-row`는 `align-items:stretch`라 별 버튼이 카드 높이만큼 늘어난다 → align-self로 세로 중앙에 고정한다. */
.co-row > .co-fav{align-self:center;margin-right:-4px;}
.co-row.is-fav > .row-link .row-title{color:var(--accent-ink);}
@media (max-width:760px){
  .co-row > .co-fav{width:32px;height:32px;font-size:15px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ★★팝업 안에서는 뉴모피즘을 쓰지 않는다 (2026-08-05 사용자 지시)
   ═══════════════════════════════════════════════════════════════════════════
   팝업 패널은 **유리**(--panel-bg)다. 유리 위에 볼록·오목(뉴모)을 얹으면 재질이 충돌해
   "페이지와 느낌이 다른" 이물감이 생긴다 → 팝업 안의 셀렉트·인풋·칩 버튼은 **평면**으로 간다.

   ⚠️★**이 블록보다 뒤에 컨트롤(.field·select·.btn·.chip-btn) 규칙을 두지 말 것.**
      `.field[placeholder]:not(:placeholder-shown)`(입력하면 볼록으로 바뀌는 규칙)과 특이도가 같아
      **순서로 이기고 있다.** 뒤에 같은 대상을 다시 선언하면 팝업 안이 다시 뉴모로 돌아간다.
      (레이아웃 전용 규칙은 뒤에 와도 무방하다 — 아래 「업체 상세 레이아웃」 블록이 그 예다.)
   ⚠️ `select.field`는 화살표를 `background-image`로 그린다 → `background` 단축 금지, **background-color만** 바꾼다.
   ⚠️ 주 버튼(`.btn.solid` 오렌지)은 제외한다 — 원래 평면이고, 팝업에서 유일한 색 신호다.
   ⚠️ 평면 문법(보더+그림자 없음)은 페이퍼 스킨과 **같은 것**을 쓴다(§paper 컨트롤). 새로 만들지 말 것. */
:root :is(.led-modal, .cpick-panel, .glass-card, .history-compose-box, .ltab-mbox, .online-drop, .ms-sug, .pg-modal-card)
  :is(.field, select.field, textarea.field, select, textarea,
      input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url],
      input[type=number], input[type=date], input[type=search], .chip-btn, .btn:not(.solid)){
  background-color:var(--panel-field-bg);
  border:1px solid var(--panel-field-edge);
  box-shadow:none;
}
/* 뉴모 하이라이트 라인(볼록해 보이게 하는 의사요소)도 팝업 안에서는 끈다 */
:root :is(.led-modal, .cpick-panel, .glass-card, .history-compose-box, .ltab-mbox, .pg-modal-card) .btn::before,
:root :is(.led-modal, .cpick-panel, .glass-card, .history-compose-box, .ltab-mbox, .pg-modal-card) .btn::after{display:none;}
/* 팝업 안 카드/섹션 = 유리 위에 얹는 옅은 판(오목 인셋 제거). 페이지의 카드 문법과 톤을 맞춘다. */
:root :is(.led-modal, .cpick-panel, .glass-card, .history-compose-box, .ltab-mbox, .pg-modal-card)
  :is(.co-sk-section, .pg-row, .cpick-row){
  background-color:var(--panel-inner);
  border:1px solid var(--panel-field-edge);
  box-shadow:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ★업체 상세 레이아웃 개편 (2026-08-05 사용자 지시: "가독성이 떨어지고 정돈되지 않았다")
   ═══════════════════════════════════════════════════════════════════════════
   ★진단 — 고친 것이 무엇인지:
     ① **위계가 없었다.** 섹션 8개가 전부 평면(`.co-sec`=margin만)이라 경계가 제목 글자 하나뿐이었고,
        그 제목마저 15px·weight 500·`--title-ink`(흐린 색)라 "구역이 나뉜다"는 신호가 약했다.
     ② **순서가 거꾸로였다.** 업체 상세를 여는 이유인 **수정요청 그룹이 맨 아래**였고,
        링크·주문서·사업자등록증 같은 부속 정보가 위를 차지했다.
     ③ **폭 낭비.** 짧은 정보 섹션(스킨·담당자·링크·사업자등록증)이 전폭 1열로 쌓여 스크롤만 길었다.
     ④ **리듬 불일치.** 수정요청 그룹만 섹션 껍데기 없이 h2로 떠 있었고, 인라인 style이 흩어져 있었다.

   ⚠️★**마크업 순서 ≠ 화면 순서다.** `.cod-flow`는 flex이고 순서는 아래 `order`가 정한다.
      큰 PHP 블록(프로그램 기능)을 물리적으로 옮기면 변수 계산 순서가 깨져서 이 방식을 택했다.
   ⚠️★**섹션을 새로 추가하면 여기에 `order`와 폭을 같이 적을 것.** 안 적으면 order:0이라 맨 앞으로 튀어나온다.
   ⚠️ 카드화는 `.co-detail` 안에서만 한다 — `.co-sec`은 skin/program/manual 화면도 쓰는 공용 클래스라
      전역으로 바꾸면 그쪽 레이아웃까지 흔들린다. */
.co-detail .cod-flow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px;margin-top:22px;}
/* 카드 = 앱의 기존 볼록 카드 문법(.data-archive-row)과 같은 값. 새로 만들지 말 것 */
.co-detail .cod-flow > .co-sec{margin:0;padding:22px 24px;border-radius:18px;background:var(--bg);
  border-top:1px solid var(--edge-hi);border-left:1px solid var(--edge-hi);
  box-shadow:4px 4px 10px rgba(var(--shadow),.65),-4px -4px 10px rgba(var(--hilite),.78);}
/* 제목 = 한 단계 올린다(구역이 나뉜다는 신호). 본문색 + 굵기 + 아래 실선 */
.co-detail .cod-flow > .co-sec > .section-h,
.co-detail .cod-sec-head > .section-h{font-family:var(--sans);font-size:15px;font-weight:660;color:var(--text);letter-spacing:-.01em;}
/* ⚠️★제목 아래 **구분선을 긋지 않는다**(2026-08-05 사용자 지시: "너무 복잡해 보여").
   카드가 이미 경계를 갖고 있어서, 그 안에 선을 또 그으면 층이 늘어난다. 위계는 굵기·색·여백으로만. */
.co-detail .cod-flow > .co-sec > .section-h{margin:0 0 16px;}
/* 제목 + 배지/액션을 한 줄에 두는 헤드. `.prog-sec-head`도 같은 규격을 타게 묶는다(카드마다 제목 줄이 달라 보이면 안 된다).
   ⚠️★**구분선을 긋지 않는다**(2026-08-05 사용자 지시) — 아래가 자기 배경을 가진 목록이라
      선까지 그으면 경계가 두 겹이 된다. 「판이 있는 목록 위엔 선을 긋지 않는다」가 이 화면의 규칙이다.
      본문이 글인 카드(스킨·링크 등)는 아래 `.co-sec > .section-h`가 여전히 선을 긋는다. */
.co-detail .cod-sec-head,
.co-detail .prog-sec .prog-sec-head{display:flex;align-items:center;gap:9px;margin:0 0 14px;}
.co-detail .cod-sec-head > .section-h,
.co-detail .prog-sec .prog-sec-head > .section-h{margin:0;padding:0;border:0;
  font-family:var(--sans);font-size:15px;font-weight:660;color:var(--text);letter-spacing:-.01em;}
/* 헤드 오른쪽 끝 액션(수정요청 「+ 수정대리등록」) — 제목·배지는 왼쪽에 붙고 액션만 끝으로 민다.
   ★톤은 **평면**이다(2026-08-05 사용자 지시) — 섹션 안쪽 보조 동작이라 판이 튀어나오면 제목보다 먼저 읽힌다.
     대신 페이지 헤드의 「업체 설정」이 볼록(주 진입)을 맡는다. 둘의 톤을 바꿔 달지 말 것. */
.co-detail .cod-sec-act{margin:0 0 0 auto;display:flex;align-items:center;}
.co-detail .cod-sec-act .chip-btn{background:transparent;border:1px solid var(--div-lo);box-shadow:none;color:var(--link);}
.co-detail .cod-sec-act .chip-btn:hover{background:var(--chip);border-color:var(--muted);color:var(--link-h);}

/* ★페이지 헤드 「업체 설정」 = 이 화면의 주 진입 → **볼록**으로 세운다(2026-08-05 사용자 지시).
   ⚠️ `.ph-actions .chip-btn`이 형태(높이·알약)를 이미 잡고 있다 — 여기서는 **톤(면·그림자)만** 더한다. */
.co-detail .ph-actions .chip-btn{background:var(--bg);color:var(--title-ink);
  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);
  transition:box-shadow .25s ease, color .2s ease;}
.co-detail .ph-actions .chip-btn:hover{color:var(--text);box-shadow:2px 2px 5px rgba(var(--shadow),1), -2px -2px 5px rgba(var(--hilite),1);}
.co-detail .ph-actions .chip-btn:active{box-shadow:inset 2px 2px 6px rgba(var(--shadow),1), inset -2px -2px 6px rgba(var(--hilite),1);}
:root[data-skin="paper"] .co-detail .ph-actions .chip-btn{background:var(--chip);border:1px solid var(--edge-lo);box-shadow:none;}
/* 아이콘 붙은 버튼 — 사이드바와 같은 `nav_icon()` SVG를 쓴다(`.nav-ico`). 크기만 버튼에 맞춘다. */
.chip-btn.has-ico{gap:7px;}
.chip-btn.has-ico .nav-ico{width:16px;height:16px;flex:none;opacity:.9;}

/* ★수정요청 리스트 = **평면 + 배경색으로 구분**(2026-08-05 사용자 지시).
   카드(볼록) 안에 또 볼록 행이 들어가면 판이 두 겹으로 겹쳐 경계가 안 읽힌다 → 그림자·보더를 걷고
   **카드보다 한 톤 낮은 면(--chip)**으로만 행을 세운다. 선이 아니라 색이 구분 수단이다.
   ⚠️ `.row-link`는 전 화면 공용이다 — 반드시 `.co-detail .cod-batches` 안에서만 평면화할 것. */
.co-detail .cod-batches .row-link{background:var(--chip);border:0;box-shadow:none;
  transition:background-color .2s ease;}
.co-detail .cod-batches .row-link:hover{background:var(--chip-h);box-shadow:none;}
.co-detail .cod-batches .row-link:active{background:var(--chip-h);box-shadow:none;}
/* 한 섹션 안의 두 번째 제목(링크 카드의 「온라인 주문서 링크」).
   ⚠️ 선을 긋지 않고 **여백으로만** 끊는다 — 두 링크가 붙어 보이던 문제(2026-08-05 지적)는 간격 부족이었다.
      선을 더하는 대신 간격을 벌리는 쪽이 이 화면의 규칙(위 제목 규칙과 같은 판단)에 맞다. */
/* (폐기) `.cod-h-2nd` — 한 카드 안의 두 번째 제목용이었다. 링크 2종을 **각각 독립 카드**로 쪼개면서
   더 쓰이지 않는다. 카드 안에 제목을 두 개 두게 되면 그때는 카드를 나눌 때가 된 것이다. */

/* ── 화면 순서 + 폭 ────────────────────────────────────────────
   ①수정요청(전폭) → ②스킨 ③담당자(2열) → ④프로그램(전폭) → ⑤링크 ⑥사업자등록증(2열) → ⑦주문서이력 → ⑧데이터 */
.co-detail .cod-invite {order:1;}
.co-detail .cod-osheet {order:2;}
.co-detail .cod-batches{order:3;flex:1 1 100%;}
.co-detail .cod-skin   {order:4;}
.co-detail .cod-members{order:5;}
.co-detail .prog-sec   {order:6;flex:1 1 100%;}
.co-detail .cod-license{order:7;}
.co-detail .cod-sheets {order:8;flex:1 1 100%;}
.co-detail .company-data{order:9;flex:1 1 100%;}
/* 2열 후보들 — 짝이 없으면(조건부 섹션이라 흔하다) 혼자 한 줄을 다 쓰게 flex-grow로 늘린다 */
.co-detail .cod-invite,
.co-detail .cod-osheet,
.co-detail .cod-skin,
.co-detail .cod-members,
.co-detail .cod-license{flex:1 1 calc(50% - 12px);min-width:min(340px,100%);}
/* 좁은 화면 = 1열. 2열이 340px 밑으로 눌리면 오히려 못 읽는다 */
@media (max-width:1080px){
  .co-detail .cod-flow > .co-sec{flex:1 1 100%;}
}
@media (max-width:640px){
  .co-detail .cod-flow{gap:16px;margin-top:16px;}
  .co-detail .cod-flow > .co-sec{padding:18px 16px;border-radius:16px;}
}
/* 데이터 보관함(details)도 카드 규칙을 그대로 받는다. 접힌 상태에서 여백이 과해 보이지 않게만 조정.
   ⚠️ 선택자를 `.cod-flow >`로 맞춰야 위 카드 규칙(같은 특이도)보다 뒤에서 이긴다 — `.co-detail .company-data`만으론 진다. */
.co-detail .cod-flow > .company-data{padding:18px 24px;}
.co-detail .cod-flow > .company-data[open]{padding-bottom:24px;}

/* ── 주문서 이력 항목 — company.php의 인라인 style을 옮겨온 것 ─────────────── */
.os-item{border:1px solid var(--div-lo);border-radius:12px;padding:13px 15px;margin-bottom:10px;background:var(--field-bg);}
.os-item:last-child{margin-bottom:0;}
.os-item[open]{background:var(--bg);}
.os-sum{display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:13.5px;font-weight:640;color:var(--text);}
.os-sum::-webkit-details-marker{display:none;}
.os-id{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.02em;}
.os-who{font-weight:400;color:var(--muted);}
.os-dl{margin-top:13px;padding-top:13px;border-top:1px solid var(--div-lo);}

/* ═══ 관리자 · 주문서 접수 카드 (admin/ordersheets.php · 2026-08-06 개편) ═══════
   ★진단: 예전엔 payload 키를 받은 순서대로 30줄 넘게 평면 나열해, 무엇이 중요한지 안 읽혔다.
   ★해법: 헤더(상호·접수번호·링크종류) → 접수자 한 줄 → 승인 조건 칩 → 접힌 그룹 상세 → 액션.
     "승인해도 되나?"를 카드 상단만 보고 판단하고, 세부는 필요할 때 펼친다. */
.osa-list{display:flex;flex-direction:column;gap:14px;margin-top:14px;}
.osa-card{background:var(--bg);border-radius:16px;padding:18px 20px;box-shadow:var(--raise);}
.osa-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.osa-head-main{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0;}
.osa-no{font-family:var(--mono);font-size:12px;color:var(--ph);}
.osa-title{font-family:var(--sans);font-size:16.5px;font-weight:650;color:var(--text);margin:0;line-height:1.3;}
.osa-time{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;}
/* 링크 종류·스킨 배지 — 공개/지정/스킨을 색 없이 톤으로만 구분(카드가 시끄러워지지 않게) */
.osa-tag{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);
  background:var(--chip);padding:3px 10px;border-radius:999px;white-space:nowrap;}
.osa-tag.is-bound{color:var(--text);}
.osa-tag.is-skin{color:var(--accent-ink,var(--accent));background:color-mix(in srgb,var(--accent) 12%,transparent);}
/* 접수자 = 이름·전화·메일 한 줄 */
.osa-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;
  font-family:var(--sans);font-size:13.5px;color:var(--muted);}
.osa-who span + span::before,.osa-who-name + span::before{content:"·";margin-right:8px;color:var(--ph);}
.osa-who-name{font-weight:600;color:var(--text);}
/* 승인 조건 칩 — 승인 시 실제로 벌어지는 일(계정 생성 여부·비번 이전·연결 업체·동의) */
.osa-flags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;}
.osa-flag{font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--muted);
  background:var(--chip);padding:4px 10px;border-radius:8px;}
.osa-flag.on{color:var(--text);}
.osa-flag.warn{color:var(--err);background:color-mix(in srgb,var(--err) 9%,var(--chip));}
/* 상세 = 접기. 대기 건이 여러 개여도 목록을 훑을 수 있어야 한다. */
.osa-detail{margin-top:14px;border-top:1px solid var(--div-lo);padding-top:12px;}
.osa-detail-sum{cursor:pointer;list-style:none;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);}
.osa-detail-sum::-webkit-details-marker{display:none;}
.osa-detail-sum::before{content:"▸";display:inline-block;margin-right:6px;transition:transform .15s;}
.osa-detail[open] .osa-detail-sum::before{transform:rotate(90deg);}
/* 그룹 = 주문서 폼과 같은 순서(담당자→카페24→디자인→SNS→하단정보). 2열로 접어 세로 길이를 줄인다. */
.osa-groups{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px;margin-top:16px;}
.osa-group{min-width:0;}
.osa-group-t{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--accent-ink,var(--accent));
  /* 구분선과 첫 항목 사이 여백 10→17px (2026-08-07). 선에 내용이 붙어 있어 그룹 경계가 덜 읽혔다.
     ⚠️ padding-bottom(제목↔선)은 그대로 둔다 — 같이 키우면 제목이 선에서 떠서 묶임이 풀린다. */
  margin:0 0 17px;padding-bottom:7px;border-bottom:1px solid var(--div-lo);}
/* ⚠️ 라벨 열은 **고정폭 금지** — '개인정보관리책임자'처럼 긴 라벨이 두 줄로 꺾여 읽기 나빴다(2026-08-06).
   max-content = 그 그룹에서 가장 긴 라벨에 맞춰 한 줄로 유지. 행 간격도 넉넉히(7→13). */
.osa-group .info-list{grid-template-columns:max-content 1fr;gap:13px 18px;}
.osa-group .info-list dt{font-size:12.5px;white-space:nowrap;}
.osa-group .info-list dd{font-size:13.5px;line-height:1.6;}
/* 액션 = 거절(좌·보조) / 승인(우·주). 나란한 버튼은 높이를 맞춘다(§2-2-1). */
.osa-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:15px;border-top:1px solid var(--div-lo);}
.osa-acts form{margin:0;}
.osa-acts .osa-approve{margin-left:auto;}
.osa-acts .chip-btn.sm{min-height:40px;padding:0 18px;}
/* ★처리 이력 — 「승인됨」은 **상태 배지**, 「업체 보기」는 **버튼**이다. 나란히 놓이므로
   ⓐ 높이는 같게(34) ⓑ 생김새는 확실히 다르게: 배지=배경 없는 점+글자 / 버튼=채워진 칩.
   (둘 다 회색 알약이면 배지를 누르려 든다 — 2026-08-06 사용자 지적) */
.osa-hist{margin-top:12px;}
.osa-hist .member-actions{gap:10px;}
.osa-hist .co-meta-badge{min-height:34px;padding:0 2px 0 0;background:none;color:var(--muted);font-weight:500;gap:6px;}
.osa-hist .co-meta-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--st-gray);flex:none;}
.osa-hist .co-meta-badge.is-brand{color:var(--text);}
.osa-hist .co-meta-badge.is-brand::before{background:var(--st-green,#639922);}
.osa-hist .chip-btn.sm{min-height:34px;padding:0 14px;}

/* ── 비밀번호 재설정 링크 줄 (업체 상세 · 담당자 아래 · 2026-08-07) ─────────────
   발급 직후에만 펼쳐진다. 링크 복사 + 그 담당자 1명에게만 메일 발송. */
/* ★★배경색이 깔린 영역 안에서는 **뉴모피즘을 쓰지 않는다**(2026-08-07 사용자 지시 · 전역 원칙).
   뉴모 그림자는 "면과 배경이 같은 색"이라는 전제 위에서만 성립한다 → 배경을 바꾼 패널 안에서는
   그림자 색을 매번 그 배경에 맞춰야 하고, 안 맞추면 지금처럼 컨트롤이 통째로 묻힌다.
   ⇒ 패널 안은 **평면 + 면 색 차이**로만 위계를 만든다:
     ① 패널 = `--chip`(가라앉은 판) ② 컨트롤 면 = `--pw-face`(**패널보다 밝은 면**) ③ 주 버튼 = `.btn-ink`(블랙)
   ⚠️ 라이트는 흰색이 밝은 쪽, 다크는 `--chip`이 `--bg`보다 밝으므로 **그보다 더 밝은 값**을 따로 준다. */
/* 컨트롤 면 = **페이지 배경(--bg)보다 한 톤 밝게**. 패널(--chip)보다도 밝아야 그 위에서 떠 보인다. */
.member-pwrow{list-style:none;margin:-2px 0 8px;padding:15px 16px;border-radius:13px;background:var(--chip);
  --pw-face:#f7f6f4; --pw-face-h:#fdfdfc;}
:root[data-theme="dark"] .member-pwrow{--pw-face:#4f4f4a; --pw-face-h:#585852;}
/* 링크 줄 = 밝은 면 한 덩어리. 복사 버튼을 **그 안 오른쪽 끝**에 넣어 버튼 수를 줄인다.
   ⚠️ 공용 `.copy-row`를 쓰지 않는다 — `.co-detail .copy-row input`(파일 뒤쪽·같은 특이도)이
      `background:var(--chip)`로 덮어써 **입력칸이 패널과 같은 색이 되어 안 보였다**(2026-08-07). */
.mpw-link{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 14px;border-radius:999px;background:var(--pw-face);}
.mpw-link input{flex:1;min-width:0;border:0;outline:0;background:transparent;box-shadow:none;
  font-family:var(--mono);font-size:12.5px;color:var(--text);padding:0;}
/* 복사 = 동그라미 + 아이콘만(글자 없음) */
.mpw-copy{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;color:var(--muted);background:var(--chip);
  transition:background .15s,color .15s;}
.mpw-copy svg{width:15px;height:15px;}
.mpw-copy:hover{background:var(--chip-h);color:var(--text);}
.mpw-copy.ok{background:var(--st-green,#639922);color:#fff;}
/* 보조 버튼 = 밝은 면 + 얇은 테두리 · 알약 · 한 단계 작게 */
.co-detail .member-pwrow .chip-btn{background:var(--pw-face);color:var(--text);box-shadow:none;
  border:1px solid var(--div-lo);border-radius:999px;font-size:12.5px;}
.co-detail .member-pwrow .chip-btn:hover{background:var(--pw-face-h);color:var(--text);box-shadow:none;}
.mpw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:9px;}
.mpw-t{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--text);}
.mpw-t em{font-style:normal;font-weight:400;color:var(--muted);margin-left:6px;}
.mpw-exp{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
/* 액션 = [링크 취소][링크 재발급] … [메일 보내기]. 보조는 왼쪽 묶음, 주 동작은 오른쪽 끝(§5).
   ⚠️ 이 패널 안 버튼은 한 단계 작게(34px·12.5px) + **좌우 끝을 완전 알약(999px)** 으로. */
.mpw-acts{display:flex;align-items:center;gap:8px;margin-top:12px;}
.mpw-acts form{margin:0;}
.mpw-acts form:last-child{margin-left:auto;}
.mpw-acts .chip-btn.sm{min-height:34px;padding:0 15px;font-size:12.5px;border-radius:999px;}
.mpw-acts .btn-ink{min-height:34px;padding:0 17px;font-size:12.5px;border-radius:999px;}
@media (max-width:640px){
  .mpw-acts{flex-direction:column-reverse;align-items:stretch;}
  .mpw-acts form:last-child{margin-left:0;}
  .mpw-acts .chip-btn.sm,.mpw-acts .btn-ink{width:100%;}
}
@media (max-width:640px){
  .osa-groups{grid-template-columns:1fr;}
  .osa-head{flex-direction:column;gap:6px;}
  .osa-acts{flex-direction:column-reverse;align-items:stretch;}
  .osa-acts .osa-approve{margin-left:0;}
  .osa-acts .btn.sm,.osa-acts .chip-btn{width:100%;}
}

/* ═══ 업체 목록 행 — 메타 가독성 (2026-08-05) ═══════════════════════════════
   ★진단: 한 줄 문자열("담당자 3명 · 요청 5건 · 스킨 테라스 (세팅형)")이라 가운뎃점만 늘어서
     숫자도 스킨명도 눈에 안 잡혔다. 성격이 다른 정보를 **칩으로 분리**하고 숫자만 진하게 세운다.
   ⚠️ 레이아웃 규칙이라 팝업 평면화 블록보다 뒤에 와도 무방하다(컨트롤 대상이 아니다). */
.co-row-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;}
.co-mt{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:8px;
  background:var(--chip);font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);white-space:nowrap;}
.co-mt b{font-family:var(--mono);font-weight:640;font-variant-numeric:tabular-nums;color:var(--text);}
/* 무엇을 쓰는가(스킨명·주문 제작) = 이 행의 성격을 정하는 값 → 글자를 본문색으로 한 단계 올린다 */
.co-mt.is-build{color:var(--text);font-weight:560;}
.co-mt.is-none{background:transparent;padding-left:0;opacity:.75;font-style:normal;}
/* 진행중 = 목록에서 가장 자주 훑는 숫자 → 숫자를 크게, 라벨은 아래 작게(스캔 속도) */
.co-open{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.1;}
.co-open strong{font-family:var(--mono);font-size:19px;font-weight:640;font-variant-numeric:tabular-nums;color:var(--text);}
.co-open em{font-family:var(--sans);font-size:11.5px;font-style:normal;color:var(--muted);}
@media (max-width:640px){
  .co-mt{font-size:12px;padding:2px 8px;}
  .co-open strong{font-size:17px;}
}

/* ── 견적서 미리보기 팝업 `.qv-*` (2026-08-05) ───────────────────────────────
   껍데기는 기존 유리 팝업(.glass-overlay/.glass-card)을 그대로 쓰고, 문서를 담을 폭·높이만 넓힌다.
   ⚠️ `.glass-card`의 기본 max-width는 440px(안내용)이다 — 문서는 그 폭으로는 못 읽는다. */
/* ⚠️★z-index — 이 미리보기는 **업체 스킨 설정 팝업(.led-modal, z-index 120) 안에서도** 열린다.
   `.glass-overlay` 기본값(100)을 그대로 두면 그 팝업 **뒤로** 깔려 안 보인다. 라이트박스(200)보다도 위로 둔다. */
.qv-overlay{z-index:230;}
.qv-card{max-width:min(880px,94vw);max-height:92vh;display:flex;flex-direction:column;}
.qv-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;
  margin:4px 0 0;padding:0;border-radius:14px;background:rgba(var(--bg-rgb),.42);}
.qv-img{max-width:100%;max-height:min(70vh,760px);object-fit:contain;border-radius:12px;display:block;}
.qv-pdf{width:100%;height:min(70vh,760px);border:0;border-radius:12px;background:#fff;}
.qv-none{display:flex;flex-direction:column;align-items:center;gap:9px;padding:56px 24px;text-align:center;
  font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--muted);}
.qv-none strong{font-size:15px;font-weight:640;color:var(--text);}
.qv-foot{display:flex;align-items:center;gap:10px;margin-top:16px;}
.qv-foot .btn.solid{flex:1;min-width:0;}
.qv-foot .chip-btn{flex:none;}
@media (max-width:640px){
  .qv-body{border-radius:12px;}
  .qv-img,.qv-pdf{max-height:58vh;height:58vh;}
  .qv-img{height:auto;}
  .qv-foot{flex-direction:column;align-items:stretch;}
}

/* ── ★주문 제작 패치(와펜) `.cod-patch` — 2026-08-05 ─────────────────────────
   ★왜 만들었나: 주문 제작은 스킨 행이 없어 「업체명 + 전용 제작」을 큰 글자 한 줄로 세웠는데,
     카드 대비 **글자만 크고 위계는 없어** 어색했다(사용자 지적).
     → **크기로 강조하지 않고 형태로 강조한다.** 작지만 와펜처럼 생겨서 눈에 먼저 걸린다.
   ⚠️ 관리자 업체 상세(admin/company.php)와 고객 스킨 화면(skin.php)이 **같은 부품**을 쓴다.
   ⚠️ 안쪽 점선 링은 `::before`로 그린다 — 보더를 두 겹 주면 요소 크기가 어긋난다.
   ⚠️ 색은 `--accent`를 color-mix로 옅게만 쓴다. 솔리드 오렌지는 주 버튼 몫이라 여기서 쓰면 위계가 겹친다. */
/* ⚠️★1차 시안(오렌지 점선 와펜)은 **무드에 맞지 않아 폐기**했다(2026-08-05 사용자 판단).
      이 앱은 미색·저채도·평면이 기본인데 점선 + 오렌지 틴트가 스티커처럼 튀었다.
      → **한 줄 칩**으로 되돌린다. 강조는 색이 아니라 **작은 라벨 + 이름 굵기**로만.
      ⚠️ 여기에 브랜드 색을 다시 칠하지 말 것 — 이 화면의 색은 주 액션 버튼 하나만 갖는다. */
.cod-patch{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 12px;border-radius:10px;
  background:var(--chip);}
.cod-patch-k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;line-height:1;
  color:var(--muted);text-transform:uppercase;}
.cod-patch-k::after{content:'';display:inline-block;width:1px;height:11px;margin-left:9px;
  background:var(--div-lo);vertical-align:-2px;}
.cod-patch-n{font-family:var(--sans);font-size:14px;font-weight:660;line-height:1.3;color:var(--text);
  max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cod-patch-s{font-family:var(--sans);font-size:12px;font-weight:500;line-height:1;color:var(--muted);}
@media (max-width:640px){
  .cod-patch{gap:7px;padding:6px 12px;}
  .cod-patch-n{font-size:13.5px;max-width:14ch;}
}

/* ★프로그램 기능 카드의 액션 줄 = **평면**(2026-08-05 사용자 지시).
   카드(볼록) 안에서 볼록 버튼이 또 튀어나오면 판이 두 겹으로 겹친다 — 수정요청 헤더 버튼과 같은 판단이다.
   ⚠️ 「영상 프로그램 승인」과 「기간 갱신」은 **같은 등급의 나란한 액션**이라 톤을 함께 맞춘다
      (한 줄에서 하나만 볼록하면 그쪽이 주 액션처럼 읽힌다 — §5 버튼 규칙).
   ⚠️ `.btn`의 뉴모 하이라이트 의사요소도 같이 끈다. 안 끄면 평면 면 위에 밝은 선만 남는다. */
.co-detail .prog-controls .btn{background:transparent;border:1px solid var(--div-lo);box-shadow:none;color:var(--link);}
.co-detail .prog-controls .btn::before,
.co-detail .prog-controls .btn::after{display:none;}
.co-detail .prog-controls .btn:hover{background:var(--chip);border-color:var(--muted);color:var(--link-h);box-shadow:none;}
.co-detail .prog-controls .btn:active{background:var(--chip-h);box-shadow:none;transform:translateY(1px);}

/* ═══ 업체 상세 — 2026-08-05 2차 정리 (사용자 지적 묶음) ═══════════════════════

   ★ⓐ 볼록 카드 안에는 **볼록/오목 리스트를 두지 않는다.** 전부 평면(면으로만 구분).
      판이 겹치면 어디까지가 카드고 어디부터가 항목인지 안 읽힌다. 리스트의 구분 수단은 **선이 아니라 색**이다.
      ⚠️ 전부 `.co-detail` 스코프다 — 같은 클래스가 다른 화면에서도 쓰이므로 전역으로 풀지 말 것. */
.co-detail .member-item,
.co-detail .data-archive-row,
.co-detail .prog-status,
.co-detail .prog-order,
.co-detail .prog-files .pf-row,
.co-detail .os-item{background:var(--chip);border:0;box-shadow:none;}
.co-detail .os-item[open]{background:var(--chip-h);}

/* ★ⓑ 프로그램 안내문 — **CSS가 아예 안 걸려 있었다.**
   규칙이 `.prog-files .pf-empty`인데 이 문장은 `.prog-block`(prog-files 아님) 안에 있어
   기본 폰트 크기(본문보다 큼)로 떨어졌다. 그래서 "폰트 위계가 엉망"으로 보였다. 조상 조건을 뺀다. */
.co-detail .pf-empty{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.65;color:var(--muted);padding:4px 0;}
.co-detail .pf-empty strong{font-weight:600;color:var(--text);}

/* ★ⓒ 링크 입력줄 — 좌우 2열로 놓이면 카드가 이미 절반이므로 **그 안에서는 100%**를 쓴다
   (2026-08-05 사용자 지시). 폭을 또 절반으로 줄이면 URL이 앞부분만 보인다. */
.co-detail .copy-row{max-width:none;}

/* ★ⓓ 본문 링크 = **포인트 컬러**. 브라우저 기본 파랑이 그대로 나오고 있었다(규칙이 없었다). */
.panel-desc a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.panel-desc a:hover{color:var(--accent);}
/* ★ⓔ 본문 안 코드 조각(`ordersheet.php` 등) — 기본 monospace라 글자가 작고 흐려 거의 안 보였다.
   **본문과 같은 한글 폰트**로 통일하고 크기도 본문에 맞춘다(폰트가 갈리면 줄 높이까지 어긋난다). */
.panel-desc code{font-family:var(--sans);font-size:inherit;font-weight:600;color:var(--text);
  background:var(--chip);padding:1px 7px;border-radius:6px;letter-spacing:0;}

/* ★ⓕ 「영상 프로그램 승인」 = 이 카드의 주 액션 → **솔리드 포인트 컬러**(사용자 지시).
   ⚠️★ `.btn`에는 페이지 등장 시 **볼록해지는 뉴모 애니메이션**(`inConvexBtn`)이 걸린다(html.pt-anim).
      솔리드 면에서는 그 연출이 얼룩처럼 보이므로 여기서 끈다 — 하이라이트 의사요소도 같이 끈다.
   ⚠️ 옆의 「기간 갱신」은 보조라 평면 유지 — 한 줄에서 색은 하나만 갖는다(§5 버튼 규칙). */
/* ⚠️ 주 액션이므로 전역 규칙을 따른다(2026-08-07): **뉴모=블랙 / 페이퍼=오렌지 · 그림자 없음 · 알약**.
   예전엔 여기만 오렌지 + 드롭섀도가 박혀 있어 통일에서 빠졌다. 색·그림자를 여기서 다시 정의하지 말 것. */
.co-detail .prog-controls .btn.is-approve{background:#2a2925;color:#fff;border:0;border-radius:999px;
  box-shadow:none;animation:none;}
.co-detail .prog-controls .btn.is-approve::before,
.co-detail .prog-controls .btn.is-approve::after{display:none;animation:none;}
.co-detail .prog-controls .btn.is-approve:hover{background:#111;color:#fff;box-shadow:none;}
.co-detail .prog-controls .btn.is-approve:active{transform:none;box-shadow:none;}
:root[data-theme="dark"] .co-detail .prog-controls .btn.is-approve{background:#4a4842;color:#fff;}
:root[data-theme="dark"] .co-detail .prog-controls .btn.is-approve:hover{background:#5a5852;}
/* 페이퍼 = 시그널 오렌지(다크는 글자를 잉크로) */
:root[data-skin="paper"] .co-detail .prog-controls .btn.is-approve{background:var(--accent);color:#fff;}
:root[data-skin="paper"] .co-detail .prog-controls .btn.is-approve:hover{background:var(--accent-ink);color:#fff;}
:root[data-skin="paper"][data-theme="dark"] .co-detail .prog-controls .btn.is-approve,
:root[data-skin="paper"][data-theme="dark"] .co-detail .prog-controls .btn.is-approve:hover{color:#231f1b;}
/* 승인 해제(이미 켜진 상태)는 색을 뺀다 — 되돌리는 동작이 주 색을 가져가면 안 된다 */
.co-detail .prog-controls .btn.is-approve.ghost{background:transparent;color:var(--link);
  border:1px solid var(--div-lo);box-shadow:none;}

/* ★남아 있던 「판 안의 판」 정리 (2026-08-05 재지적) ─────────────────────────────
   ⚠️★ **카드 안의 어떤 요소도 자기 판을 갖지 않는다** — 볼록(그림자)도, 오목(인셋)도.
      면(--chip)과 여백으로만 구분한다. 아래 목록은 실제로 판이 남아 있던 것들이다:
        · `.data-archive-toggle` — 데이터 보관함 **머리 자체가 볼록 카드**였다(카드 안 카드의 주범)
        · `.copy-row input` · `.add-member input` — 인셋(오목) 입력칸
   ⚠️ 새 요소를 이 화면에 넣을 때도 같은 규칙을 지킬 것. box-shadow를 쓰고 싶으면 먼저 이 주석을 볼 것. */
.co-detail .data-archive-toggle{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0;}
.co-detail .company-data[open] .data-archive-toggle{box-shadow:none;}
.co-detail .data-archive-body{padding-top:16px;}
.co-detail .data-archive-empty{border:0;background:var(--chip);}
.co-detail .copy-row input,
.co-detail .add-member input{background:var(--chip);box-shadow:none;border:0;}
.co-detail .copy-row input:focus,
.co-detail .add-member input:focus{background:var(--chip-h);}

/* ★세로 리듬 확정 (2026-08-05 사용자 지시) ─────────────────────────────────────
   원칙: **제목과 설명은 붙이고, 제목 위는 크게 벌린다.** 그래야 "여기서 새 영역이 시작한다"가 읽힌다.
     제목 ─8px─ 설명 ─16px─ 본문 ────46px──── 다음 제목
   ⚠️★버그였던 것: 앞선 규칙이 `margin:0 0 16px` **단축**이라 `margin-top`을 0으로 덮었다.
      그래서 `.cod-h-2nd{margin-top:44px}`가 특이도(0,2,0)로 (0,4,0)에 져서 **간격이 아예 안 먹었다**.
      → 아래는 같은 깊이의 선택자로 다시 잡는다. 단축(`margin:`)으로 되돌리지 말 것. */
.co-detail .cod-flow > .co-sec > .section-h,
.co-detail .cod-sec-head,
.co-detail .prog-sec .prog-sec-head{margin-top:0;margin-bottom:8px;}
.co-detail .co-sec .panel-desc{margin:0 0 16px;}
/* 카드 안 **두 번째부터의 제목** = 앞 영역과 확실히 끊는다(선이 아니라 여백으로) */
.co-detail .cod-flow > .co-sec > .section-h:not(:first-child){margin-top:46px;}
/* 설명 아래 곧바로 오는 입력줄은 자체 여백을 줄여 이중 여백을 막는다 */
.co-detail .copy-row{margin-top:2px;}
/* 카드끼리의 간격도 한 단계 벌린다 */
.co-detail .cod-flow{gap:24px;}

/* ★좌우 2열 카드의 **높이·바닥 정렬** (2026-08-05 사용자 지시) ────────────────────
   요구: 같은 줄의 두 카드는 높이가 같고, 그 안의 「링크+복사」 줄이 **가로로 나란히** 놓일 것.
         높이 차이는 **설명 텍스트와 링크줄 사이 여백을 늘려서** 흡수한다(글자 크기를 건드리지 않는다).
   방법: flex line 안에서 카드를 stretch → 카드 자체를 세로 flex로 → 링크줄에 `margin-top:auto`.
         그러면 남는 높이가 전부 설명 아래 여백으로 가고 링크줄은 바닥에 붙어 서로 정렬된다.
   ⚠️ `align-items`를 flex-start로 되돌리면 이 정렬이 통째로 깨진다. */
.co-detail .cod-flow{align-items:stretch;}
.co-detail .cod-invite,
.co-detail .cod-osheet{display:flex;flex-direction:column;}
.co-detail .cod-invite .copy-row,
.co-detail .cod-osheet .copy-row{margin-top:auto;}
/* 복사 버튼 = 아이콘 + 라벨. 링크줄에서 높이가 입력칸과 맞아야 한 줄로 읽힌다 */
.copy-row .chip-btn.has-ico{flex:none;gap:6px;}
.copy-row .chip-btn.has-ico .nav-ico{width:15px;height:15px;}

/* ═══════════════════════════════════════════════════════════════════════════
   ★★전역 규칙 — 제출(주 액션) 버튼은 **줄의 오른쪽 끝** (2026-08-05 사용자 지시)
   ═══════════════════════════════════════════════════════════════════════════
   「저장·승인·확인·연결·참여」처럼 **결정하는 버튼은 항상 오른쪽 끝**에 둔다.
   보조(닫기·취소)와 위험(삭제·해제)은 그 왼쪽에 — 손이 오른쪽 끝에서 결정을 찾는다는 전제다.
   ⚠️★**새 액션 줄을 만들 때도 이 규칙을 따를 것.** 왼쪽 정렬로 새로 만들지 말고 아래 클래스를 재사용한다.
      (`.save-bar` 폼 하단 · `.led-fbtns` 폼/팝업 하단 · `.prog-controls` 카드 안 액션 · `.qv-foot` 팝업 푸터)
   ⚠️ 마크업 순서는 그대로 두고 **CSS `order`로만** 자리를 바꾼다 — 폼 전송·탭 이동 순서를 건드리지 않기 위해서다. */

/* 주 버튼이 들어가는 나머지 액션 줄도 우측 정렬 + **세로 가운데**(왼쪽 버튼과 밑선이 어긋나지 않게).
   2026-08-07 전면 통일 때 좌측으로 남아 있던 곳들이다. */
.history-form-actions,
.quote-actions{justify-content:flex-end;align-items:center;}

/* 폼 하단 저장 바 — 저장을 오른쪽 끝으로, 보조·위험은 왼쪽으로 */
.save-bar{justify-content:flex-end;}
.save-bar-main{order:2;}
.save-bar-side{order:1;margin-left:0;margin-right:auto;}

/* 폼·팝업 하단 버튼 줄 */
.led-fbtns{justify-content:flex-end;}
.led-fbtns > .btn.solid{order:3;}
.led-fbtns .led-del{order:1;margin-left:0;margin-right:auto;}   /* 삭제 = 주 액션과 가장 멀리(오클릭 방지) */

/* 업체 스킨 설정 팝업의 스티키 푸터 — 옛 grid(저장이 가로 전체) 대신 오른쪽 정렬 */
.co-skin-form .led-fbtns{display:flex;grid-template-columns:none;justify-content:flex-end;}
.co-skin-form .led-fbtns > .btn.solid{width:auto;min-width:190px;order:2;}
.co-skin-form .led-fbtns > .chip-btn{order:1;}

/* 카드 안 액션 줄(영상 프로그램 승인 등) */
.co-detail .prog-controls{justify-content:flex-end;}

/* 견적서 미리보기 팝업 푸터 — 다운로드(주 액션)를 오른쪽 끝으로 */
.qv-foot{justify-content:flex-end;}
.qv-foot .btn.solid{flex:none;min-width:190px;order:2;}
.qv-foot .chip-btn{order:1;}

@media (max-width:640px){
  /* 모바일은 세로로 쌓이므로 좌우 개념이 없다 — 주 액션을 **맨 아래**(엄지에 가장 가까운 곳)로 */
  .save-bar-main,.co-skin-form .led-fbtns > .btn.solid,.qv-foot .btn.solid{order:2;}
  .save-bar-side,.co-skin-form .led-fbtns > .chip-btn,.qv-foot .chip-btn{order:1;}
}

/* ★주문 제작/스킨 카드의 배지 줄 — 2026-08-05 사용자 지시 3건 ─────────────────
   ⓐ **가로 100%**(버튼까지 포함). 액션 버튼은 오른쪽 끝으로 — 제출 버튼 우측 규칙과 같은 방향이다.
   ⓑ **라디우스 통일** — 칩(패치)과 버튼이 나란한데 10 / 14로 달라 줄이 어긋나 보였다. 카드 안에서는 10px 하나로.
   ⓒ 「전용 제작」만 포인트 컬러 — 이름은 본문색, 성격 표시만 색을 갖는다(색은 아껴 쓴다). */
.co-detail .cod-skin .co-skin-view{width:100%;}
.co-detail .cod-skin .co-skin-view .co-meta-badge.is-action{margin-left:auto;}
.co-detail .cod-skin .cod-patch,
.co-detail .cod-skin .co-skin-view .co-meta-badge{border-radius:10px;}
.cod-patch-s{color:var(--accent-ink);font-weight:600;}
/* 브랜드명 = 쇼핑몰 링크. 밑줄은 hover에서만 — 평소엔 칩 안의 이름으로 읽혀야 한다 */
.cod-patch-n.is-link{text-decoration:none;color:var(--text);cursor:pointer;transition:color .18s ease;}
.cod-patch-n.is-link:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;}

/* ★주문 제작 카드 ↔ 담당자 카드 **행 맞춤** (2026-08-06 사용자 지시) ────────────
   좌우 카드는 이미 같은 높이지만(align-items:stretch), 그 **안의 행**은 제각각이라
   패치 줄과 담당자 줄, 안내문과 「연결」 줄이 어긋나 보였다. 두 줄의 높이·시작 위치를 맞춘다.
     · 1행 = 담당자 행(.member-item) 실측 61px
     · 2행 = 연결 줄(.add-member)   실측 43px
     · 시작 위치 = 담당자 목록이 margin-top:14px이므로 패치 줄도 14px로 맞춘다
   ⚠️★**담당자가 2명 이상이면 오른쪽이 길어져 다시 어긋난다** — 값 기반 정렬의 한계다.
      그때는 이 토큰을 늘리는 게 아니라 "행 맞춤을 포기"하는 쪽이 맞다(억지로 맞추면 빈 카드가 길어진다).
   ⚠️ 수치를 두 곳에 흩지 말 것 — 아래 토큰 2개만 고친다. */
.co-detail{--codrow-1:61px; --codrow-2:43px;}
.co-detail .cod-skin .co-skin-view{margin-top:14px;min-height:var(--codrow-1);align-items:center;}
/* 견적서 안내문 = 오른쪽 「연결」 줄과 **세로 가운데** 정렬 */
.co-detail .cod-skin .co-skin-view + .panel-desc{display:flex;align-items:center;
  margin:14px 0 0;min-height:var(--codrow-2);}

/* ★보낸 안내의 고객 확인 상태 (2026-08-06) — 「보낸 내역」 각 줄 **오른쪽 끝**.
   확인은 그룹 완료 확인 버튼으로 들어온다(항목마다 누르게 하지 않는다 — 버튼이 항목 수만큼 늘어난다).
   ⚠️ '자동 확정'을 '확인 완료'로 쓰지 말 것 — 고객이 실제로 본 게 아니다. 둘은 다른 사실이다. */
.triage-hist-ack{margin-left:auto;flex:none;padding:2px 9px;border-radius:8px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.6;
  background:var(--chip);color:var(--muted);}
.triage-hist-ack.is-ok{background:color-mix(in srgb, var(--c-success) 16%, transparent);color:var(--c-done);}
.triage-hist-ack.is-auto{background:color-mix(in srgb, var(--c-warn) 16%, transparent);color:var(--c-warn);}


/* ══ 요청 관리 블록 재설계 (2026-08-17, 사용자 지시) ═══════════════════════════
   ① 그룹 상태 — 셀렉트를 걷어내고 가로 100%를 쓰는 단계 표시로. 성격이 같은 상태끼리 묶는다.
   ② 완료 목표일 — 「며칠 걸린다」 슬라이더. 가로 한 줄에 라벨·슬라이더·결과·저장을 나란히.
   ⚠️ .admin-controls 는 2열 그리드다(4518행). 두 폼 모두 grid-column 으로 한 줄을 통째로 차지시킨다. */
.admin-batch-detail .admin-controls > form.status-steps,
.admin-batch-detail .admin-controls > form.due-picker { grid-column:1/-1; }

/* ── 항목 카드 헤더 줄 정렬 (2026-08-17) ──
   왼쪽 = 번호·태그, 오른쪽 = 상태·버튼. 카드 좌우 끝까지 벌린다. */
.admin-batch-detail .item-top { justify-content:space-between; width:100%; }
.admin-batch-detail .item-tags { flex:1 1 auto; }
.admin-batch-detail .item-admin-actions { flex:0 0 auto; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
/* 수정·삭제 칩이 없는 카드는 오른쪽 여백을 비워둘 이유가 없다(칩이 있는 카드에만 is-editable 이 붙는다). */
.admin-batch-detail .item-card:not(.is-editable) .item-top { padding-right:0; }
/* ── 항목 카드 안 「작업 불가」 사유 입력 (2026-08-17) ── */
.item-reject-form { margin:10px 0 2px; padding:13px 14px 14px; border-radius:12px;
  background:var(--chip); box-shadow:inset 0 0 0 1.5px var(--err,#c0492a); }
.item-reject-form[hidden] { display:none; }
.item-reject-form .rj-lbl { display:block; margin:0 0 8px; font-family:var(--sans); font-size:12px;
  font-weight:650; color:var(--text); }
.item-reject-form .rj-lbl .req { color:var(--err,#c0492a); }
.item-reject-form .rj-note { width:100%; margin:0; box-sizing:border-box; }
.item-reject-form .rj-help { margin:8px 0 0; font-family:var(--sans); font-size:11.5px; line-height:1.6; color:var(--muted); }
.item-reject-form .rj-help strong { color:var(--err,#c0492a); font-weight:700; }
.item-reject-form .rj-act { display:flex; gap:8px; margin:12px 0 0; }
/* ── 완료 안내 미발송 표시 (2026-08-17) ── */
.status-steps .sc-opt.sc-mail { color:var(--accent,#f15a24); background:var(--bg);
  box-shadow:inset 0 0 0 1.5px var(--accent,#f15a24); font-weight:700; }
.status-steps .sc-opt.sc-mail:hover { color:#fff; background:var(--accent,#f15a24); box-shadow:none; }
.status-steps .sc-opt.sc-mail:disabled { opacity:.45; cursor:not-allowed; }
.status-steps .sc-mailnote { margin:10px 0 0; font-family:var(--sans); font-size:11.5px; line-height:1.6;
  color:var(--accent,#f15a24); font-weight:600; }
/* ── 관리자가 대신 만든 요청 알림 줄 (2026-08-17) ── */
.made-by-admin { grid-column:1/-1; display:flex; align-items:flex-start; gap:10px; margin:0; padding:11px 14px;
  border-radius:12px; background:var(--chip); }
.made-by-admin .mba-tag { flex:0 0 auto; display:inline-flex; align-items:center; height:22px; padding:0 10px;
  border-radius:11px; background:var(--muted); color:var(--bg);
  font-family:var(--sans); font-size:11px; font-weight:700; white-space:nowrap; }
.made-by-admin .mba-txt { font-family:var(--sans); font-size:12px; line-height:1.6; color:var(--muted); }
.made-by-admin .mba-txt strong { color:var(--text); font-weight:650; }
/* 지나지 않은 단계 — 「완료」 주황으로 칠하면 거짓말이 된다. 비운 채 테두리만 남긴다. */
.status-steps .sc-p.skipped::before { background:var(--div-lo); }
.status-steps .sc-p.skipped .sc-num { background:var(--bg); color:var(--muted);
  box-shadow:inset 0 0 0 2px var(--div-lo); }
.status-steps .sc-p.skipped .sc-nm, .status-steps .sc-p.skipped .sc-st { color:var(--muted); opacity:.75; }
/* ── ① 그룹 상태 — 큰 단계 5개 + 그 단계의 세부 상태 (레퍼런스 C안) ── */
.status-steps { display:flex; flex-direction:column; gap:11px; }
.status-steps .ss-label { font-family:var(--sans); font-size:12.5px; font-weight:560; color:var(--muted); }

/* 윗줄 — 진행선. type="button" 이라 눌러도 상태는 안 바뀐다(아랫줄 패널만 열린다). */
.status-steps .sc-rail { display:flex; width:100%; }
.status-steps .sc-p { flex:1 1 0; min-width:0; position:relative; display:flex; flex-direction:column;
  align-items:center; gap:6px; padding:3px 4px 0; border:0; background:none; cursor:pointer; font-family:var(--sans); }
.status-steps .sc-p::before { content:''; position:absolute; top:13px; left:-50%; width:100%; height:3px; background:var(--div-lo); }
.status-steps .sc-p:first-child::before { display:none; }
.status-steps .sc-p.done::before, .status-steps .sc-p.now::before { background:var(--accent,#f15a24); }
.status-steps .sc-num { position:relative; z-index:1; display:grid; place-items:center; width:28px; height:28px;
  border-radius:50%; background:var(--bg); font-size:12px; font-weight:700; color:var(--muted);
  box-shadow:inset 2px 2px 4px rgba(var(--shadow),1), inset -2px -2px 4px rgba(var(--hilite),1); transition:.15s; }
/* 지나온 단계 — 선과 같은 주황 단색. 투명도를 쓰면 어두운 배경에서 원이 비어 보인다. */
.status-steps .sc-p.done .sc-num { background:var(--accent,#f15a24); color:#fff; box-shadow:none; }
/* 진행 중 — 선·완료원과 같은 주황이면 어디가 현재인지 안 잡힌다. 대비색으로 채워 선에서 떼어 놓는다.
   ⚠️ var(--text)/var(--bg) 조합이라 라이트·다크 양쪽에서 자동으로 반전된다. */
.status-steps .sc-p.now .sc-num { background:var(--text); color:var(--bg); box-shadow:0 0 0 5px rgba(241,90,36,.22); }
.status-steps .sc-nm { font-size:12.5px; font-weight:650; color:var(--muted); }
.status-steps .sc-p.now .sc-nm { color:var(--text); font-weight:750; }
.status-steps .sc-st { font-size:11px; color:var(--muted); opacity:.8; }
/* 지금 열려 있는 단계 표시 — 현재 단계가 아닌 곳을 훑어볼 때 어디를 보고 있는지 알려준다 */
.status-steps .sc-p.open .sc-nm { color:var(--text); }
.status-steps .sc-p.open:not(.now) .sc-num { box-shadow:inset 0 0 0 2px var(--accent,#f15a24); color:var(--accent,#f15a24); }

/* 아랫줄 — 실제로 상태를 바꾸는 버튼 */
.status-steps .sc-detail { margin:4px 0 0; padding:15px 16px 16px; border-radius:14px; background:var(--chip); }
.status-steps .sc-dl { display:block; margin:0 0 11px; font-family:var(--sans); font-size:11.5px; font-weight:650; color:var(--muted); }
.status-steps .sc-btns { display:flex; gap:9px; flex-wrap:wrap; }
.status-steps .sc-opt { flex:1 1 0; min-width:120px; height:42px; padding:0 14px; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--muted); background:var(--bg);
  box-shadow:3px 3px 6px rgba(var(--shadow),1), -3px -3px 6px rgba(var(--hilite),1); transition:color .15s, background .15s; }
.status-steps .sc-opt:hover { color:var(--text); }
.status-steps .sc-opt.on { color:#fff; background:var(--accent,#f15a24); font-weight:750; box-shadow:none; }

/* 예외 — 진행 단계가 아니므로 눈에 덜 띄게 */
.status-steps .ss-except { display:flex; align-items:center; gap:8px; padding:13px 0 0; border-top:1px solid var(--div-lo); }
.status-steps .ss-gname { font-family:var(--sans); font-size:11px; font-weight:650; color:var(--muted); }
.status-steps .ss-opt.ex { flex:0 0 auto; height:30px; padding:0 15px; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--sans); font-size:11.5px; font-weight:600; color:var(--muted);
  background:transparent; box-shadow:inset 0 0 0 1px var(--div-lo); }
.status-steps .ss-opt.ex:hover { color:var(--text); }
.status-steps .ss-opt.ex.on { background:var(--muted); color:var(--bg); box-shadow:none; font-weight:700; }
/* ── ② 완료 목표일 슬라이더 ── */
.due-picker { display:flex; align-items:center; gap:14px; width:100%; max-width:100%; flex-wrap:wrap; }
/* ⚠️★ .admin-controls label 에 width:100% 가 걸려 있다(4525행). 그대로 두면 라벨이 줄을 통째로 먹고
       슬라이더·저장 버튼을 화면 밖으로 밀어낸다. 여기서 되돌린다. */
.due-picker > label { flex:0 0 auto; width:auto !important; display:inline-flex !important; align-items:center;
  font-family:var(--sans); font-size:12.5px; font-weight:560; color:var(--muted); white-space:nowrap; }
.due-picker .due-slide { flex:1 1 260px; display:flex; align-items:center; gap:14px; min-width:0; }
.due-picker .due-out { flex:0 1 auto; min-width:0; font-family:var(--sans); font-size:13px; font-weight:650;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.due-picker .due-save { flex:0 0 auto; }

/* 손잡이 — 기본 렌더링은 트랙 대비 세로 중심이 어긋나고 면이 비어 보인다. 트랙·손잡이를 직접 그린다.
   ⚠️ margin-top 은 (트랙 6px − 손잡이 20px) / 2 = −7px. 이 값이 어긋나면 원이 위아래로 뜬다. */
.due-picker .due-range { flex:1 1 auto; width:auto; min-width:110px; height:22px; margin:0; padding:0;
  background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; }
.due-picker .due-range:focus { outline:none; }
.due-picker .due-range::-webkit-slider-runnable-track { height:6px; border-radius:99px; background:var(--div-lo); }
.due-picker .due-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-7px; border:0; border-radius:50%;
  background:var(--accent,#f15a24); box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer; }
.due-picker .due-range::-moz-range-track { height:6px; border-radius:99px; background:var(--div-lo); }
.due-picker .due-range::-moz-range-thumb { width:20px; height:20px; border:0; border-radius:50%;
  background:var(--accent,#f15a24); box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer; }
/* 평소엔 날짜칸을 숨기고 7영업일을 넘겨야 드러낸다 — 두 입력이 같이 보이면 뭘 써야 할지 헷갈린다. */
.due-picker .due-input { display:none; flex:0 0 170px; width:170px !important; height:40px; margin:0; }
.due-picker.is-exact .due-input { display:inline-block; }
.due-picker.is-exact .due-out { font-weight:500; color:var(--muted); }

/* 상태 버튼이 1개뿐인 단계(결제·작업·완료)에서 버튼이 줄 전체로 늘어나 띠처럼 보이던 것 교정 */
.status-steps .sc-opt { flex:0 1 auto; min-width:160px; padding:0 26px; }
@media (max-width:900px) {
  /* 좁은 화면 — 진행선은 그대로 두되 글자를 줄이고, 「완료/대기」 보조 문구는 뺀다(칸이 5개라 겹친다). */
  .status-steps .sc-nm { font-size:11.5px; }
  .status-steps .sc-st { display:none; }
  .status-steps .sc-num { width:26px; height:26px; }
  .status-steps .sc-opt { flex:1 1 100%; }
  .due-picker { flex-wrap:wrap; }
  .due-picker .due-slide { flex:1 1 100%; order:2; }
  .due-picker .due-save { order:3; margin-left:auto; }
}

/* ══ 서명·계약 문서 (2026-08-21 신설) ══════════════════════════════════
   ⚠️★ `.sg-` 접두어로 가둔다 — `.inq-` 와 같은 이유다. 전역 `.panel`·`.row-link` 를
      고치면 공지·업체·요청 밀도가 통째로 달라진다(디자인시스템 §9 실사고).
   ⚠️★ 관리자(admin/signs.php)와 고객(contracts.php)이 **같은 클래스를 쓴다.**
      같은 문서를 보는 화면이라 생김새가 다르면 서로 대조가 안 된다.
   ⚠️ 표(<table>)를 쓰지 않는다 — 갑·을 두 쪽 상태가 붙으면서 칸이 좁아 못 읽는다.
      행 하나를 카드로 두고 안에서 접는다. */

.sg-list{display:flex;flex-direction:column;gap:10px;}

/* 행 = 가라앉은 판. `.row-link` 를 쓰지 않는 이유 = 행 전체가 링크가 아니다
   (안에 버튼이 여럿이라 어디를 눌러도 같은 곳으로 가면 안 된다). */
.sg-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:15px 17px;border-radius:14px;background:var(--chip);
  /* ⚠️★ 배경이 깔린 판 안이므로 뉴모피즘을 쓰지 않는다 — 평면 + **면 색 차이**로만 위계를 만든다
     (디자인시스템 §5, `.member-pwrow` 와 같은 방식). 컨트롤 면은 패널(--chip)보다 밝아야 그 위에서 떠 보인다.
     ⚠️ 다크에서 --chip 은 --bg 보다 밝다. 라이트 기준으로만 잡으면 다크에서 뒤집힌다 — 두 값을 따로 준다. */
  --sg-face:#f7f6f4;}
:root[data-theme="dark"] .sg-row{--sg-face:#4f4f4a;}
.sg-row.is-void{opacity:.5;}
.sg-main{flex:1 1 260px;min-width:0;}
.sg-title{font-size:15px;font-weight:600;line-height:1.35;word-break:keep-all;}
.sg-meta{margin-top:4px;font-family:var(--mono);font-size:12px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:4px 9px;}

/* 테스트 문서 — 눈에 띄어야 한다. 실제 발송으로 착각하면 그게 사고다. */
.sg-test{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;
  color:var(--c-warn);background:rgba(200,140,20,.14);padding:2px 8px;border-radius:8px;margin-left:7px;}

/* 상태 배지 — 배경 없이 **앞에 점**. 버튼과 나란히 놓여도 누르려 들지 않는다(디자인시스템 §5). */
.sg-badge{display:inline-flex;align-items:center;gap:6px;flex:none;
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.02em;}
.sg-badge::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;}
.sg-badge.st-draft{color:var(--muted);}        .sg-badge.st-draft::before{background:var(--muted);}
.sg-badge.st-sent{color:var(--c-warn);}        .sg-badge.st-sent::before{background:var(--c-warn);}
.sg-badge.st-signed{color:var(--c-success);}   .sg-badge.st-signed::before{background:var(--c-success);}
.sg-badge.st-void{color:var(--muted);}         .sg-badge.st-void::before{background:var(--muted);}

/* ★갑·을 두 쪽을 **나란히** 보여준다 (2026-08-21).
   전에는 서명 줄 중 **마지막 것 하나만** 그려서, 을만 날인된 문서가 「서명됨」처럼 보였다.
   실제로 그 때문에 「갑이 서명한 줄」로 오독한 일이 있었다 — 두 쪽을 항상 같이 둔다. */
.sg-parties{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap;}
.sg-party{min-width:104px;padding:8px 11px;border-radius:11px;
  background:var(--sg-face);border:1px solid var(--div-lo);}
.sg-party-k{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;}
.sg-party-v{margin-top:2px;font-size:13px;font-weight:560;line-height:1.3;}
.sg-party-t{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:1px;}
.sg-party.is-wait .sg-party-v{color:var(--c-warn);font-weight:500;}
.sg-party.is-off  .sg-party-v{color:var(--muted);font-weight:500;}

/* 액션 — 결정 버튼은 오른쪽 끝(디자인시스템 §5). 카드 안이라 34~40px 로 맞춘다. */
.sg-acts{flex:0 0 auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto;}
.sg-acts .chip-btn{min-height:34px;padding:0 13px;font-size:13px;
  background:var(--sg-face);border:1px solid var(--div-lo);box-shadow:none;}
.sg-acts .chip-btn:hover{background:var(--chip-h);box-shadow:none;}
/* 주 액션(고객 「서명하러 가기」)은 블랙 평면. 나란한 칩과 높이·모서리를 맞춘다(디자인시스템 §5). */
.sg-acts .btn-ink{min-height:34px;padding:0 17px;border-radius:11px;font-size:13px;}
.sg-linkrow .chip-btn{background:var(--sg-face);border:1px solid var(--div-lo);box-shadow:none;}
.sg-acts form{display:inline-flex;margin:0;}

/* 링크 줄 — 주소를 통째로 보여주지 않는다. 「복사」 하나면 된다.
   ⚠️ 확정 전 문서에는 이 줄 자체가 나오지 않는다(링크가 아직 없다). */
.sg-linkrow{flex:1 1 100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:2px;padding-top:11px;border-top:1px solid var(--div-lo);}
.sg-linkrow code{flex:1 1 220px;background:var(--sg-face);padding:7px 11px;border-radius:999px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:12px;color:var(--muted);}

.sg-empty{margin:0;color:var(--muted);}

@media (max-width:640px){
  .sg-row{gap:11px;}
  .sg-acts{margin-left:0;width:100%;}
  .sg-parties{width:100%;}
  .sg-party{flex:1 1 0;min-width:0;}
}

/* ══ 작업 체크리스트 (admin/todo.php · 2026-08-24 신설) ═══════════════════════
   ⚠️ 줄이 20~40개씩 늘어서는 화면이다. **뉴모 금지** — 볼록한 카드가 30개 겹치면
      어디를 봐야 할지 사라진다(디자인시스템: 배경 깔린 패널 안에서는 평면 + 면 색 차이로 위계).
   ⚠️ 상태 3버튼은 **왼쪽 고정**이다. 눈이 세로로 한 줄만 훑으면 진도가 읽혀야 한다. */
.td-note{font-family:var(--sans);font-size:13.5px;line-height:1.65;color:var(--muted);
  margin:-14px 0 20px;padding:11px 15px;border-radius:12px;background:var(--chip);}
.td-note strong{color:var(--text);font-weight:600;}

.td-co{margin:0 0 26px;}
.td-co-head{display:flex;align-items:center;gap:9px;margin:0 0 10px;}
.td-co-n{font-family:var(--mono);font-size:13px;color:var(--muted);}

.td-batch{margin:0 0 12px;padding:0 0 0 13px;border-left:2px solid var(--div-lo);}
.td-batch-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;}
.td-batch-head a{font-family:var(--sans);font-size:14px;font-weight:560;color:var(--text);text-decoration:none;}
.td-batch-head a:hover{text-decoration:underline;}
.td-bmeta{font-family:var(--mono);font-size:12.5px;color:var(--muted);}

/* ── 한 줄 ── */
.td-row{display:flex;align-items:flex-start;gap:13px;
  padding:12px 14px;margin:0 0 7px;border-radius:13px;
  background:var(--chip);border:1px solid transparent;}
.td-row.st-doing{background:rgba(213,147,31,.10);border-color:rgba(213,147,31,.22);}
.td-row.st-done{background:transparent;border-color:var(--div-lo);opacity:.55;}
.td-row.st-done .td-body{text-decoration:line-through;}
.td-row.hl{border-color:var(--accent-ink,var(--err));}

.td-main{flex:1 1 auto;min-width:0;}
.td-tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 5px;}
.td-ist{font-family:var(--mono);font-size:12px;color:var(--muted);}
.td-body{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--text);word-break:break-word;}
.td-memo{margin-top:5px;font-family:var(--sans);font-size:13px;color:var(--muted);}
.td-go{display:inline-block;margin-top:7px;font-family:var(--mono);font-size:12.5px;
  color:var(--link);text-decoration:none;}
.td-go:hover{color:var(--link-h);text-decoration:underline;}
.td-due{font-family:var(--mono);font-size:12px;color:var(--err);}

/* ── 상태 3버튼 (평면 알약) ── */
.td-seg{flex:0 0 auto;display:flex;gap:4px;margin:0;padding:3px;border-radius:999px;background:var(--bg);}
.td-sbtn{font-family:var(--sans);font-size:12.5px;line-height:1;white-space:nowrap;
  padding:8px 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);
  cursor:pointer;box-shadow:none;min-width:auto;transition:background .12s,color .12s;}
.td-sbtn:hover{background:var(--chip-h);color:var(--text);}
.td-sbtn.on{color:#fff;font-weight:600;}
.td-sbtn.s-todo.on{background:var(--muted);}
.td-sbtn.s-doing.on{background:var(--c-warn,#d5931f);}
.td-sbtn.s-done.on{background:var(--c-success,#23a06b);}

/* ── 직접 적은 할 일 ── */
.td-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px;}
.td-add .field{min-height:42px;}
.td-add-title{flex:2 1 260px;}
.td-add-co{flex:0 1 170px;}
.td-add-due{flex:0 1 150px;}
.td-add-memo{flex:1 1 200px;}
.td-add .btn-ink{flex:0 0 auto;min-width:130px;min-height:42px;border-radius:999px;}
.td-manual{display:flex;flex-direction:column;}
.td-del{flex:0 0 auto;margin:0;}
.td-x{font-family:var(--sans);font-size:12.5px;padding:7px 11px;border:0;border-radius:999px;
  background:transparent;color:var(--muted);cursor:pointer;box-shadow:none;min-width:auto;}
.td-x:hover{background:rgba(176,83,62,.12);color:var(--err);}

@media (max-width:640px){
  .td-row{flex-wrap:wrap;gap:10px;}
  .td-seg{order:2;width:100%;justify-content:stretch;}
  .td-sbtn{flex:1 1 0;}
  .td-main{order:1;flex:1 1 100%;}
  .td-del{order:3;margin-left:auto;}
  .td-add>*{flex:1 1 100%;}
}