/* 통영어부 관리 — 스킨: 소프트 클레이 (무광 플라스틱 판을 겹쳐 쌓은 구조)
   app.css 위에 덮어쓰는 파일. 사장님이 보여 준 '라이트/다크 모드 스위치' 이미지의 구조를 화면 전체에.

   층 (아래 → 위)
   1. 바닥: 맨 아래 평평한 판 (화면 바탕 · 홈 속 바닥)
   2. 공간: 바닥과 윗판 사이에 Z축으로 살짝 뜬 틈 → 윗판 가장자리에서 바닥으로 떨어지는 그늘로 보임
   3. 윗판: 살짝 두께가 있는 평평한 판 (면은 평평 · 가장자리만 둥글게 마감). 카드 · 메뉴판 · 버튼 · 손잡이
      - 면은 볼록한 곡선이 아니라 평평 (그라데이션 없음)
      - 두께 = 아래쪽 얇은 옆면 띠 · 가장자리 = 위 1px 빛 / 아래 1px 그늘
   홈(버튼 묶음 · 입력칸 · 스위치) = 둘레 면에 바로 뚫린 구멍 (바탕 위에 있으면 바탕을 윗판으로 봄, 따로 솟은 테두리 없음). 구멍 너머로 바닥이 보이고,
      위·왼쪽 벽(판 두께)은 그늘, 바닥에는 판이 드리운 그림자, 아래·오른쪽 가장자리는 빛을 받음.
   고른 것(손잡이) = 구멍 속 바닥 위에 다시 올라앉은 작은 윗판.
   글자: 진한 검정 대신 부드러운 회색, 굵게. 숫자·영문은 둥근 Nunito.
   다크: 바닥·판 = 짙은 먹색, 고른 것 = 밝은 판 (이미지의 다크 모드처럼). 기능 색은 뜻 그대로, 채도만 낮춤. */

[data-skin="clay"], [data-skin="clay"][data-theme="light"] {
  --cl-floor: #EAEDF0;                       /* 1. 바닥 (구멍 속) */
  --cl-page: #EFF1F4;                        /*    화면 판 — 카드는 이 판에 홈선으로 파낸 같은 높이의 면 */
  --cl-plate: #FDFDFE;                       /* 3. 윗판 면 — 카드 안은 거의 흰색 (11/4) */
  --cl-wall: #D6DAE0;                        /*    윗판 두께(옆면) */
  --cl-wall-lo: #C3C9D1;                     /*    옆면 아래 끝 (조금 더 어두움) */
  --cl-pit: #DDE1E6;                         /*    바탕(바닥)에 바로 뚫린 구멍 속 */
  --cl-edge-hi: rgba(255,255,255,.95);       /*    가장자리 빛 */
  --cl-edge-lo: rgba(110,118,132,.10);       /*    가장자리 그늘 */
  --cl-drop: rgba(118,126,140,.30);          /* 2. 판이 바닥에 드리운 그늘 */
  --cl-drop2: rgba(118,126,140,.18);
  --cl-hole-wall: rgba(110,118,132,.22);     /*    구멍 위쪽 벽(그늘) */
  --cl-hole-cast: rgba(112,120,134,.55);     /*    구멍 속 바닥에 지는 그림자 */
  --cl-hole-lip: rgba(255,255,255,.85);      /*    구멍 아래쪽 가장자리 빛 */
  --cl-knob: #FFFFFF; --cl-knob-wall: #D3D8DE; --cl-knob-tx: #4D535D;     /* 손잡이 판 */
  --cl-gv-d: rgba(104,112,126,.30); --cl-gv-d2: rgba(104,112,126,.26); --cl-cg-d: rgba(104,112,126,.18); --cl-cg-d2: rgba(104,112,126,.15); --cl-gv-l: rgba(255,255,255,.95); --cl-gv-l2: rgba(255,255,255,.55);   /* 조각칼로 판 홈선 */
  --cl-inlay-sh: rgba(0,0,0,.35); --cl-inlay-hi: rgba(255,255,255,.10);
  --cl-knob-rim: rgba(110,118,132,.14); --cl-knob-line: rgba(110,118,132,.18); --cl-knob-c1: rgba(100,108,122,.22); --cl-knob-c2: rgba(100,108,122,.28);
  --cl-dark: #3F444D; --cl-dark-wall: #2A2E34; --cl-dark-tx: #E9ECF0;     /* 주요 버튼 판 (= 다크 모드의 판 색) */

  --bg: var(--cl-page); --surface: var(--cl-plate); --raised: rgba(110,118,132,.07); --tint: rgba(110,118,132,.05);
  --border: rgba(110,118,132,.16); --strong: rgba(100,108,122,.38);
  --text: #4A4F58; --text2: #5D636D; --muted: #8C929C; --subtle: #9CA2AB;
  --primary: #3F444D; --primary-hover: #33373F; --ink: #4A4F58; --soft: rgba(110,118,132,.12);
  --accent: #6B7280; --lavender: rgba(110,118,132,.2); --on-primary: #E9ECF0;
  --ok: #3F8460; --ok-bg: rgba(63,132,96,.12); --err: #C0474C; --err-bg: rgba(192,71,76,.11);
  --warn: #A06A12; --warn-bg: rgba(200,150,60,.17); --info: #5C6B82; --info-bg: rgba(92,107,130,.12);
  --blue: #3F6CC0; --blue-bg: rgba(63,108,192,.12); --sky: #2F6E92;
  --shadow-p: none;
  --s1: #4E5460; --s2: #9AA1AC; --s3: #C29A5B; --s4: #BCC2CB; --dim: #C9CED6;
  --rk-us: #D2474C; --rk-c1: #6E5BC4; --rk-c2: #3F7FD0; --rk-c3: #9AA1AC;
  --day-row: #F1F3F5; --opt-bg: #FDFDFE; --row-hover: rgba(63,108,192,.07);
  --day-bg: #F2F4F6; --day-line: #9097A2; --day-sh: 0 6px 8px -6px rgba(110,118,132,.5);
  --rec-bg: #ECE6D9; --rec-bd: #C9B88C;
  color-scheme: light;
}
[data-skin="clay"][data-theme="dark"] {
  --cl-floor: #1F2227;
  --cl-page: #1F2226;
  --cl-plate: #2E3239;
  --cl-wall: #191B1F;
  --cl-wall-lo: #141619;
  --cl-pit: #16181B;
  --cl-edge-hi: rgba(255,255,255,.07);
  --cl-edge-lo: rgba(0,0,0,.35);
  --cl-drop: rgba(0,0,0,.55);
  --cl-drop2: rgba(0,0,0,.35);
  --cl-hole-wall: rgba(0,0,0,.45);
  --cl-hole-cast: rgba(0,0,0,.7);
  --cl-hole-lip: rgba(255,255,255,.07);
  --cl-knob: #E3E6EA; --cl-knob-wall: #A9AFB8; --cl-knob-tx: #3A3F48;     /* 다크에서 고른 것 = 밝은 판 */
  --cl-gv-d: rgba(0,0,0,.55); --cl-gv-d2: rgba(0,0,0,.45); --cl-cg-d: rgba(0,0,0,.34); --cl-cg-d2: rgba(0,0,0,.27); --cl-gv-l: rgba(255,255,255,.08); --cl-gv-l2: rgba(255,255,255,.05); --cl-gv-lw: rgba(255,255,255,.11);   /* 골 바깥 벽(빛 받는 쪽) — 다크에서 조금 더 보이게 */
  --cl-inlay-sh: rgba(0,0,0,.25); --cl-inlay-hi: rgba(255,255,255,.4);
  --cl-knob-rim: rgba(0,0,0,.18); --cl-knob-line: rgba(0,0,0,.4); --cl-knob-c1: rgba(0,0,0,.45); --cl-knob-c2: rgba(0,0,0,.55);
  --cl-dark: #E3E6EA; --cl-dark-wall: #A9AFB8; --cl-dark-tx: #3A3F48;

  --bg: var(--cl-page); --surface: var(--cl-plate); --raised: rgba(255,255,255,.04); --tint: rgba(255,255,255,.03);
  --border: rgba(255,255,255,.07); --strong: rgba(255,255,255,.2);
  --text: #D2D6DD; --text2: #B9BEC7; --muted: #8C929D; --subtle: #7C828D;
  --primary: #E3E6EA; --primary-hover: #F1F3F6; --ink: #D2D6DD; --soft: rgba(255,255,255,.07);
  --accent: #AEB4BE; --lavender: rgba(255,255,255,.16); --on-primary: #3A3F48;
  --ok: #7CC79C; --ok-bg: rgba(124,199,156,.12); --err: #F08A8E; --err-bg: rgba(240,138,142,.12);
  --warn: #E6BE74; --warn-bg: rgba(230,190,116,.13); --info: #AFC0D8; --info-bg: rgba(175,192,216,.1);
  --blue: #8EB2F2; --blue-bg: rgba(142,178,242,.13); --sky: #8CC6E6;
  --s1: #DADEE4; --s2: #8C939E; --s3: #CDAA6E; --s4: #5C626C; --dim: #474C55;
  --rk-us: #F06A6E; --rk-c1: #B6A8F2; --rk-c2: #8EB2F2; --rk-c3: #8C939E;
  --day-row: #2A2E34; --opt-bg: #2E3239; --row-hover: rgba(142,178,242,.08);
  --day-bg: #2A2E34; --day-line: #8C929D; --day-sh: 0 6px 8px -6px rgba(0,0,0,.7);
  --rec-bg: #36332B; --rec-bd: #6E6448;
  color-scheme: dark;
}
/* 그림자 묶음 (층 구조를 한 군데서 정함) */
[data-skin="clay"] {
  /* 윗판 (카드 · 메뉴판): 평평한 면 + 가장자리 빛/그늘 + 두께 3px + 바닥에 드리운 그늘 */
  --cl-plate-sh: inset 1px 1px 1px var(--cl-edge-hi), inset -1px -2px 3px var(--cl-knob-rim), 2px 4px 6px var(--cl-knob-c1), 6px 12px 24px -6px var(--cl-drop);
  /* 작은 판 (버튼): 두께 2px · 그늘 짧게 */
  --cl-btn-sh: inset 1px 1px 1px var(--cl-edge-hi), inset -1px -1px 2px var(--cl-knob-rim), 0 0 0 .5px var(--cl-knob-line), .6px 1.2px 2px var(--cl-knob-c1), 1.8px 3.6px 7px -1px var(--cl-knob-c2);   /* 높이 60% (11/4) */
  /* 손잡이 (구멍 속 바닥 위에 놓인 판) — 빛은 왼쪽 위에서: 왼쪽 위 가장자리 빛 · 오른쪽 아래 가장자리 살짝 그늘 ·
     둘레 아주 옅은 윤곽 · 바닥에 오른쪽 아래로 퍼지는 부드러운 그림자 (딱딱한 옆면 띠 없음 — 이미지의 스위치 손잡이처럼) */
  --cl-knob-sh: inset 1px 1px 1px rgba(255,255,255,.95), inset -1px -1px 2px var(--cl-knob-rim), 0 0 0 .5px var(--cl-knob-line), .6px 1.2px 2px var(--cl-knob-c1), 1.8px 3px 6px -1px var(--cl-knob-c2);
  --cl-dark-sh: inset 1px 1px 1px rgba(255,255,255,.18), inset -1px -1px 2px rgba(0,0,0,.28), 0 0 0 .5px rgba(0,0,0,.25), .6px 1.2px 2px var(--cl-knob-c1), 1.8px 3.6px 7px -1px var(--cl-knob-c2);
  /* 구멍 (윗판을 뚫어 바닥이 보임): 위·왼쪽 벽 그늘 · 바닥에 지는 그림자 · 아래 가장자리 빛 · 구멍 둘레 둥근 마감 */
  --cl-hole-sh: inset 2px 3px 0 var(--cl-hole-wall), inset 4px 10px 14px -4px var(--cl-hole-cast), inset -1px -1px 0 var(--cl-hole-lip), 0 1px 0 var(--cl-edge-hi), 0 -1px 0 var(--cl-edge-lo);
  /* 홈선 (판과 같은 높이의 조각을 얇은 조각칼로 둘레만 파낸 모양) — 빛은 왼쪽 위:
     홈 바깥쪽 벽은 위·왼쪽이 그늘 / 아래·오른쪽이 빛, 조각 가장자리는 위·왼쪽이 빛 / 아래·오른쪽이 살짝 그늘 */
  --cl-groove: 0 0 0 1px var(--cl-gv-d), -1px -1px 1px 1px var(--cl-gv-d2), .5px .5px 0 1px var(--cl-gv-l2), inset 1px 1px 0 var(--cl-gv-l), inset -1px -1px 1px var(--cl-gv-d2);
  /* 큰 면(카드 · 메뉴판)용 홈선 (11/4 02:40): 번지는 그림자 없이 또렷한 1px 선들로만 '파인 골' — 빛은 왼쪽 위
     · 골 바닥 1px (네 변 같음)
     · 위·왼쪽: 골 바깥 벽은 빛을 등져 진하게 / 카드 쪽 가장자리는 빛을 받아 밝게
     · 아래·오른쪽: 카드 쪽 가장자리는 진하게 / 골 바깥 벽은 빛을 받아 밝게 */
  --cl-groove-lg: 0 0 0 1.2px var(--cl-cg-d), -1px -1px 0 1.2px var(--cl-cg-d2), 1px 1px 0 1.2px var(--cl-gv-lw, var(--cl-gv-l)), inset 1px 1px 0 var(--cl-gv-l), inset -1px -1px 0 var(--cl-cg-d2);   /* 11/4 02:50 진한 선 40% 연하게 (카드 전용 색 --cl-cg-*) · 02:55 골 바닥 1.5 → 1.2px */
  /* 상감(진한 조각): 메운 재료 안쪽 위·왼쪽에 아주 옅은 그늘, 아래·오른쪽 가장자리 바깥에 1px 빛 */
  --cl-inlay: inset 1px 1px 2px var(--cl-inlay-sh), inset -1px -1px 0 var(--cl-inlay-hi), .5px .5px 0 .5px var(--cl-gv-l);
  --cl-hole-sh-sm: inset 1px 2px 0 var(--cl-hole-wall), inset 2px 5px 8px -3px var(--cl-hole-cast), inset -1px -1px 0 var(--cl-hole-lip), 0 1px 0 var(--cl-edge-hi);
}

/* ── 글꼴: 숫자·영문은 둥근 Nunito, 한글은 그대로 ── */
[data-skin="clay"] body { font-family: "Nunito", "Noto Sans KR", system-ui, -apple-system, sans-serif; background: var(--cl-page); color: var(--text); }
html[data-skin="clay"] { background: var(--cl-page); }
[data-skin="clay"] :is(h1, h2, h3, .kpi .value, .big-rank b, .brand) { color: var(--text); letter-spacing: -.01em; }
[data-skin="clay"] .card h2, [data-skin="clay"] .top h1 { font-weight: 800; color: var(--text2); }
[data-skin="clay"] .kpi .value { font-weight: 800; color: var(--text2); }
[data-skin="clay"] .kpi .label { color: var(--muted); font-weight: 600; }

/* ── 틀: 바닥 위에 메뉴판 · 카드 판이 떠 있고, 판 사이 고른 틈 ── */
@media (min-width: 821px) {
  [data-skin="clay"] .side { margin: 18px 0 18px 18px; height: calc(100vh - 36px); top: 18px; border-radius: 26px; flex-basis: 232px; }
}
[data-skin="clay"] .side { background: var(--cl-plate); border: 0; box-shadow: var(--cl-groove-lg); }
[data-skin="clay"] .main { gap: 20px; padding: 26px 30px 48px; }
[data-skin="clay"] :is(.row, .row2, .grid-kpi) { gap: 20px; }
[data-skin="clay"] .brand { font-weight: 800; color: var(--text2); }

/* ── 윗판: 카드 · 표 상자 · 창 ── */
/* 카드 = 화면 판과 같은 높이, 둘레만 조각칼 홈선으로 파낸 면 (떠 있지 않음) */
[data-skin="clay"] :is(.card, .sheet-wrap, .pt-card, .pt-set, .pt-save) { background: var(--cl-plate); border: 0; border-radius: 24px; box-shadow: var(--cl-groove-lg); }
[data-skin="clay"] .card { padding: 22px 24px; }
[data-skin="clay"] .card[style*="border-color"] { border: 0 !important; }
[data-skin="clay"] :is(.drawer, .fx-panel) { background: var(--cl-plate); border: 0; box-shadow: inset 1px 1px 0 var(--cl-edge-hi), -2px 4px 24px -6px var(--cl-drop); }
[data-skin="clay"] .pop-box { background: var(--cl-plate); border: 0; border-radius: 26px; box-shadow: var(--cl-plate-sh); }
[data-skin="clay"] .suggest ul { background: var(--cl-plate); border: 0; border-radius: 16px; box-shadow: var(--cl-plate-sh); }
/* 판 안의 작은 상자 (패널 · 고객 창 상자 · 내 이름) = 얕은 구멍 */
[data-skin="clay"] :is(.panel, .item-row, .drawer .box, .me, .rk-status, .api-soon, .need-row) { border: 0 !important; background: var(--cl-floor); border-radius: 18px; box-shadow: var(--cl-hole-sh-sm); }
[data-skin="clay"] .rk-status.bad { box-shadow: var(--cl-hole-sh-sm), inset 0 0 0 2px var(--err); }

/* ── 버튼 = 작은 윗판 (평평한 면 · 둥근 가장자리 · 얇은 두께) ── */
[data-skin="clay"] :is(.btn, .chip, .mini-btns button, .cp-stamp button, .x-btn, .icon-btn, .fx-open, .nav-tog) {
  background: var(--cl-plate); color: var(--text2); border: 0; border-radius: 14px; font-weight: 700;
  box-shadow: var(--cl-btn-sh); transition: box-shadow .12s, transform .1s, color .15s;
}
[data-skin="clay"] :is(.btn, .chip, .mini-btns button, .cp-stamp button, .x-btn, .icon-btn):hover { text-decoration: none; color: var(--text); }
/* 누르면 판이 바닥 쪽으로 내려앉음 (두께·그늘이 줄어듦) */
[data-skin="clay"] :is(.btn, .chip, .mini-btns button, .cp-stamp button, .x-btn, .icon-btn):active { transform: translate(1px, 1px); box-shadow: inset 1px 1px 2px var(--cl-knob-rim), 0 0 0 .5px var(--cl-knob-line), .5px 1px 2px var(--cl-knob-c1); }
/* 주요 버튼 = 먹색 판 (다크: 밝은 판) */
[data-skin="clay"] :is(.btn.primary, .mini-btns button.pri) { background: var(--cl-dark); color: var(--cl-dark-tx); border: 0; box-shadow: var(--cl-dark-sh); }
/* 카드 위 작은 표시 조각(숫자 카드 아이콘 · 로고 · 내 이름 동그라미) = 판과 같은 높이, 둘레만 홈선으로 파냄 (위에 블록을 얹지 않음) */
[data-skin="clay"] .tile:not(.hi) { background: transparent; color: var(--text2); border: 0; box-shadow: var(--cl-groove); }
/* 진한 조각(순 · 통 · 진) = 판에 파낸 자리에 진한 재료를 메워 넣은 상감 — 겉면은 판과 같은 높이, 테두리 고리 없음 */
[data-skin="clay"] :is(.tile.hi, .brand-mark, .avatar) { background: var(--cl-dark); color: var(--cl-dark-tx); border: 0; box-shadow: var(--cl-inlay); }
[data-skin="clay"] .btn.primary:hover { background: var(--cl-dark); color: var(--cl-dark-tx); filter: brightness(1.07); }

/* 글자만 버튼 (취소 등) */
[data-skin="clay"] .mini-btns button.ghost { box-shadow: none !important; background: transparent !important; }
/* 수정 필요 */
[data-skin="clay"] .fx-open { color: var(--warn); }
[data-skin="clay"] .fx-n { background: var(--warn); color: var(--cl-plate); }
[data-skin="clay"] .fx-n.auto { background: var(--err); color: #fff; }   /* 사이트가 찾은 묶음 경고가 있으면 빨강 (11/5) */

/* ── 홈 = 둘레 면에 뚫린 구멍 + 그 속 바닥 위의 손잡이 판 (고른 것) ── */
/* 홈 = 둘레 면(바탕이든 카드든 그 면을 윗판으로 보고)에 바로 뚫린 구멍 — 따로 튀어나온 테두리 없음 */
[data-skin="clay"] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) {
  display: inline-flex; flex-wrap: wrap; align-items: center; width: fit-content; max-width: 100%;
  gap: 4px; padding: 6px; border: 0; border-radius: 20px; background: var(--cl-pit); box-shadow: var(--cl-hole-sh);
}
/* 카드(윗판) 안에 있는 묶음은 판에 바로 뚫린 구멍 (작은 판을 또 얹지 않음) */
[data-skin="clay"] :is(.card, .pt-set, .sheet-wrap, .drawer, .side) :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) { background: var(--cl-floor); }
/* 구멍 속: 안 고른 것 = 바닥에 쓰인 회색 글자 */
[data-skin="clay"] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) > :is(.chip, button):not([aria-pressed="true"]):not([aria-selected="true"]) {
  background: transparent !important; box-shadow: none !important; color: var(--muted) !important; border-radius: 14px;
}
[data-skin="clay"] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) > :is(.chip, button):not([aria-pressed="true"]):not([aria-selected="true"]):hover { color: var(--text2) !important; }
/* 홈 밖에 따로 선 버튼이 '켜진' 것 = 판이 빠지고 구멍이 됨 (바닥이 보임 · 글자 진하게) */
[data-skin="clay"] :is(.chip[aria-pressed="true"], .chip[aria-selected="true"], .mini-btns button[aria-pressed="true"], .btn[aria-pressed="true"]) {
  background: var(--cl-floor) !important; color: var(--text) !important; border: 0; border-radius: 14px; box-shadow: var(--cl-hole-sh-sm) !important; transform: none;
}
/* 구멍 속에서 고른 것 = 바닥 위에 올라앉은 손잡이 판 (평평한 면 · 두께 · 바닥에 그늘) */
[data-skin="clay"] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) > :is(.chip[aria-pressed="true"], .chip[aria-selected="true"], button[aria-pressed="true"]),
[data-skin="clay"] .seg button[aria-pressed="true"] {
  background: var(--cl-knob) !important; color: var(--cl-knob-tx) !important; border: 0; border-radius: 14px; box-shadow: var(--cl-knob-sh) !important; transform: none;
}
[data-skin="clay"] .seg button { min-height: 34px; border-radius: 14px; font-weight: 700; }
[data-skin="clay"] .seg button .ic { opacity: .75; }

/* ── 메뉴: 안 고른 것 = 회색 글자, 지금 메뉴 = 메뉴판에 뚫린 구멍 속 손잡이 판 ── */
[data-skin="clay"] .side .nav-list { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 22px; background: var(--cl-floor); box-shadow: var(--cl-hole-sh); }
[data-skin="clay"] .side .nav-list .nav { padding: 11px 12px; border-radius: 16px; }
@media (max-width: 820px) { [data-skin="clay"] .side:not(.open) .nav-list { display: none; } [data-skin="clay"] .side.open .nav-list { width: 100%; } }
[data-skin="clay"] .nav { color: var(--muted); font-weight: 700; border-radius: 16px; transition: color .15s; }
[data-skin="clay"] .nav .ic { color: var(--subtle); }
[data-skin="clay"] .nav:not(.on):hover { background: transparent; color: var(--text2); }
[data-skin="clay"] .nav.on { background: var(--cl-knob); color: var(--cl-knob-tx); box-shadow: var(--cl-knob-sh); }
[data-skin="clay"] .nav.on .ic { color: var(--cl-knob-tx); }

/* ── 입력칸 = 구멍 ── */
[data-skin="clay"] :is(.input, .sel, .searchbox, .fx-sec textarea, .pt-in, input[type="date"], input[type="number"], input[type="text"]:not([class])) {
  background: var(--cl-floor); border: 0; border-radius: 14px; color: var(--text); box-shadow: var(--cl-hole-sh-sm);
}
[data-skin="clay"] :is(.input, .sel, .fx-sec textarea, .pt-in):focus, [data-skin="clay"] .searchbox:focus-within { outline: 0; box-shadow: var(--cl-hole-sh-sm), 0 0 0 2px var(--strong); }
[data-skin="clay"] ::placeholder { color: var(--subtle); }
[data-skin="clay"] .drop { background: var(--cl-floor); border: 2px dashed var(--strong); border-radius: 20px; box-shadow: var(--cl-hole-sh-sm); }

/* ── 배지: 평평한 작은 조각 (그늘 없음) ── */
[data-skin="clay"] :is(.badge, .tg, .mini, .cat) { border-radius: 9px; font-weight: 700; }
[data-skin="clay"] .badge:not(.ok):not(.err):not(.warn):not(.info):not(.pu):not(.pd), [data-skin="clay"] .tg.mut, [data-skin="clay"] .mini { background: var(--cl-floor); color: var(--muted); }
[data-skin="clay"] .tag-out { border: 0; background: var(--cl-floor); color: var(--muted); box-shadow: var(--cl-hole-sh-sm); }
[data-skin="clay"] .st-pill { border: 0; background: transparent; box-shadow: var(--cl-groove); color: var(--muted); }
[data-skin="clay"] .st-pill b { color: var(--text2); }
[data-skin="clay"] .st-pill.zero { opacity: .5; }

/* ── 표: 판 위 얇은 선 ── */
[data-skin="clay"] :is(table.t, table.sheet, .pt) { color: var(--text2); }
[data-skin="clay"] :is(table.t th, table.sheet th, .pt th) { background: var(--cl-plate); color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); }
[data-skin="clay"] :is(table.t td, table.sheet td) { border-bottom: 1px solid rgba(110,118,132,.1); }
[data-skin="clay"][data-theme="dark"] :is(table.t td, table.sheet td) { border-bottom-color: rgba(255,255,255,.05); }
[data-skin="clay"] table.t tr.us td { background: rgba(110,118,132,.09); color: var(--text); }
[data-skin="clay"] .line-item { border-top-color: rgba(110,118,132,.12); }
[data-skin="clay"] .line-item:hover { background: transparent; }
[data-skin="clay"] .sheet-wrap { overflow: hidden; }
[data-skin="clay"] .share .bar { background: var(--cl-floor); box-shadow: inset 1px 1px 0 var(--cl-hole-wall); }
[data-skin="clay"] .share .bar i { background: var(--s1); }

/* 가격표 품목 줄: 품목 색은 왼쪽 띠만, 바탕은 바닥색 */
[data-skin="clay"] table.pt tr.grp td { background: var(--day-row); border-top: 0; box-shadow: inset 5px 0 0 color-mix(in srgb, var(--pc, var(--ink)) 70%, #9AA0AA); }
[data-skin="clay"] table.pt tr.opt td { background: transparent; }
[data-skin="clay"] table.pt tr.opt td:first-child { box-shadow: inset 5px 0 0 color-mix(in srgb, var(--pc, var(--ink)) 45%, transparent); }

/* ── 스위치: 이미지 그대로 — 구멍 뚫린 작은 판 + 구멍 속 바닥 + 손잡이 판 ── */
[data-skin="clay"] .sw { width: 54px; height: 30px; background: var(--cl-pit); box-shadow: var(--cl-hole-sh); }
[data-skin="clay"] :is(.card, .side, .pt-set) .sw { background: var(--cl-floor); }
[data-skin="clay"] .sw i { top: 4px; left: 4px; width: 22px; height: 22px; background: var(--cl-knob); box-shadow: var(--cl-knob-sh); }
[data-skin="clay"] .sw[aria-checked="true"] { background: #3F444D; }
[data-skin="clay"][data-theme="dark"] .sw[aria-checked="true"] { background: #15171A; }
[data-skin="clay"] .sw[aria-checked="true"] i { transform: translateX(24px); }

/* ── 체크 상자: 작은 구멍 → 체크하면 먹색 판이 끼워짐 ── */
[data-skin="clay"] input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border-radius: 7px; cursor: pointer; vertical-align: middle;
  background: var(--cl-floor); box-shadow: var(--cl-hole-sh-sm); transition: background .12s, box-shadow .12s; }
[data-skin="clay"] input[type="checkbox"]:checked { box-shadow: var(--cl-dark-sh);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23E9ECF0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat, var(--cl-dark); }
[data-skin="clay"][data-theme="dark"] input[type="checkbox"]:checked {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%233A3F48' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat, var(--cl-dark); }
[data-skin="clay"] input[type="checkbox"]:disabled { opacity: .55; cursor: default; }
[data-skin="clay"] input[type="checkbox"]:focus-visible { outline: 2px solid var(--strong); outline-offset: 2px; }
[data-skin="clay"] input[type="radio"] { accent-color: var(--primary); }

/* ── 날짜 줄 · 기록 · 마우스 상자 ── */
[data-skin="clay"] table.sheet tr.day td { background: var(--day-bg); }
[data-skin="clay"] :is(.ch-box, .sl-tip, .rk-tip, .db-tip) { border: 0; }
[data-skin="clay"] .ch-box { border-radius: 18px; background: var(--cl-floor); box-shadow: var(--cl-hole-sh-sm); }
[data-skin="clay"] .ch-box .day-h { background: var(--cl-floor); }
[data-skin="clay"] :is(.sl-tip, .rk-tip, .db-tip) { background: var(--cl-plate); border-radius: 14px; box-shadow: var(--cl-plate-sh); }

/* 그래프 높이 손잡이 · 끌기 바 */
[data-skin="clay"] .chart-rs::after { background: var(--strong); }
[data-skin="clay"] .ty-pan input[type=range], [data-skin="clay"] .tr-slide input[type=range] { accent-color: var(--s1); }

/* 오늘 할 일 요약 · 대시보드 문장 */
[data-skin="clay"] .statement .lead, [data-skin="clay"] .st-cnt .lead { color: var(--text2); font-weight: 800; }

/* 토스트 */
[data-skin="clay"] .ty-toast { background: #3F444D; color: #E9ECF0; border-radius: 16px; }

@media (max-width: 820px) {
  [data-skin="clay"] .side { margin: 12px; border-radius: 22px; }
  [data-skin="clay"] .main { padding: 18px 14px 40px; }
}

/* 바탕(바닥) 위에 바로 놓인 입력칸·꼬리표 = 바탕에 뚫린 구멍이라 한 톤 더 깊게 */
[data-skin="clay"] .main > :is(.toolbar, .chips) :is(.searchbox, .sel, .input), [data-skin="clay"] .main > .chips .tag-out { background: var(--cl-pit); }

/* ═══ 라이트/다크 스위치 — 사장님이 보여 준 이미지 그대로 (11/4) ═══
   비율 = 이미지와 같게 (가로:세로 ≈ 2.1:1, 바깥 테두리 얇게, 손잡이 ≈ 홈 높이)
   둘레 = 화면 판과 같은 높이(솟은 테두리 없음) / 판에 바로 깊게 파인 알약 홈(위·왼쪽 안쪽 그늘이 짙음, 손잡이 쪽 벽은 회색 띠)
   손잡이 = 무광 흰 동그라미 + 가는 회색 해·달 아이콘, 아래로 그림자
   라이트: 홈 바닥 밝은 회색 + 왼쪽 회색 굵은 'LIGHT MODE', 손잡이 오른쪽(해)
   다크  : 홈 바닥 짙은 먹색(위·왼쪽 거의 검정) + 오른쪽 밝은 회색 'DARK MODE', 손잡이 왼쪽(달 + 반짝이)
   바깥 턱·손잡이는 이미지처럼 두 테마 모두 밝은 회색 */
.cl-mode { --cm-h: 40px; --cm-w: 96px; --cm-pad: 0px; --cm-k: calc(var(--cm-h) - 4px);   /* 높이 = 옆 '수정 필요' 버튼과 같게 (11/4) */
  position: relative; flex: none; width: var(--cm-w); height: var(--cm-h); padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; box-shadow: none;   /* 둘레 = 화면 판 그대로 (솟은 테두리 없음) — 판에 바로 파인 홈만 보임 */
  font-family: "Montserrat", "Nunito", "Noto Sans KR", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.cl-mode:focus-visible { outline: 2px solid #9AA0AA; outline-offset: 3px; }
.cl-mode .cm-track { position: relative; display: block; width: 100%; height: 100%; border-radius: 999px; overflow: hidden;
  background: var(--hb-track); box-shadow: var(--hb-track-sh);
  transition: background .35s ease, box-shadow .35s ease; }
/* 글자 = 손잡이를 뺀 나머지 칸의 가운데 → 홈 끝~글자 간격과 글자~손잡이 간격이 같음 */
.cl-mode .cm-txt { position: absolute; top: 50%; transform: translateY(-50%); width: calc(100% - var(--cm-k) - 2px); font-size: 11px; font-weight: 800; line-height: .96; text-box: trim-both cap alphabetic;   /* 글자 상자를 대문자 윗선~글자 밑선으로 잘라서 위·아래 여백이 글꼴과 상관없이 똑같게 (11/4) */ letter-spacing: -.01em; text-align: center; white-space: nowrap; pointer-events: none; transition: opacity .25s ease; }
.cl-mode .cm-l { left: 0; color: var(--hb-tx); }
.cl-mode .cm-d { right: 0; color: var(--hb-tx); opacity: 0; }
.cl-mode .cm-knob { position: absolute; top: 2px; right: 2px; width: var(--cm-k); height: var(--cm-k); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #BDC0C6;
  background: var(--hb-knob); box-shadow: var(--hb-knob-sh);
  transition: right .35s cubic-bezier(.5,.1,.25,1), box-shadow .35s ease; }
.cl-mode .cm-knob svg { position: absolute; width: 66%; height: 66%; transition: opacity .25s ease; }
.cl-mode .cm-moon { opacity: 0; }
/* 다크 상태 */
html[data-theme="dark"] .cl-mode .cm-track { background: var(--hb-track); box-shadow: var(--hb-track-sh); }
html[data-theme="dark"] .cl-mode .cm-l { opacity: 0; }
html[data-theme="dark"] .cl-mode .cm-d { opacity: 1; }
html[data-theme="dark"] .cl-mode .cm-knob { right: calc(100% - var(--cm-k) - 2px); }
html[data-theme="dark"] .cl-mode .cm-sun { opacity: 0; }
html[data-theme="dark"] .cl-mode .cm-moon { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cl-mode *, .cl-mode { transition: none !important; } }

/* ═══ 홈 파인 버튼 (= 라이트/다크 스위치를 그대로 옮긴 것, 11/4) ═══
   트랙(track) = 판에 깊게 파인 알약 홈 / 손잡이(thumb) = 무광 흰 알약
   스위치(.cl-mode)와 묶음 버튼(탭·기간·품목·채널·메뉴 등)이 모두 아래 같은 값을 씀 — 모양만 알약, 높이는 각 버튼 원래 높이 */
[data-skin="clay"], [data-skin="clay"][data-theme="light"] {
  --hb-track: linear-gradient(180deg, #E1E3E7 0%, #EAEBEE 40%, #EEEFF2 100%);
  --hb-track-sh: inset 0 4px 6px -1px rgba(40,44,52,.30), inset 3px 0 5px -2px rgba(40,44,52,.20), inset -2px 0 3px -1px rgba(60,64,72,.45), inset 0 -2px 2px rgba(255,255,255,.8), 0 1px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(40,44,52,.06);
  --hb-knob: radial-gradient(ellipse at 42% 30%, #F7F8F9 0%, #F0F1F3 55%, #E7E9EC 100%);
  --hb-knob-sh: inset 0 1px 1px rgba(255,255,255,1), inset 0 -1px 2px rgba(40,44,52,.06), 0 0 0 .5px rgba(40,44,52,.10), 0 1px 2px rgba(40,44,52,.18), -2px 4px 8px -1px rgba(40,44,52,.24);
  --hb-tx: #6E727B;        /* 트랙에 적힌 글자 (스위치 'LIGHT MODE'와 같은 색) */
  --hb-knob-tx: #4D535D;   /* 손잡이 위 글자 */
}
[data-skin="clay"][data-theme="dark"] {
  --hb-track: linear-gradient(180deg, #2B2E35 0%, #373A42 50%, #3E414A 100%);
  --hb-track-sh: inset 4px 3px 7px -1px rgba(0,0,0,.85), inset 1px 1px 2px rgba(0,0,0,.6), inset 0 -2px 2px rgba(255,255,255,.05), 0 1px 0 var(--cl-gv-l2), 0 -1px 0 rgba(0,0,0,.25);
  --hb-knob-sh: inset 0 1px 1px rgba(255,255,255,1), inset 0 -1px 2px rgba(40,44,52,.06), 0 0 0 .5px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.35), 3px 4px 9px -1px rgba(0,0,0,.5);
  --hb-tx: #C3C6CC;        /* 스위치 'DARK MODE'와 같은 색 */
  --hb-knob-tx: #3A3F48;
}

/* 묶음 버튼 → 트랙 + 손잡이 (손잡이와 트랙 끝 사이 2px — 스위치와 같음) */
[data-skin="clay"] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg),
[data-skin="clay"] :is(.card, .pt-set, .sheet-wrap, .drawer, .side) :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) {
  padding: 2px; gap: 2px; border-radius: 999px; background: var(--hb-track); box-shadow: var(--hb-track-sh);
}
[data-skin="clay"] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) > :is(.chip, button):not([aria-pressed="true"]):not([aria-selected="true"]) {
  border-radius: 999px; color: var(--hb-tx) !important; font-weight: 700;
}
[data-skin="clay"] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) > :is(.chip, button):not([aria-pressed="true"]):not([aria-selected="true"]):hover { color: var(--hb-knob-tx) !important; }
[data-skin="clay"][data-theme="dark"] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) > :is(.chip, button):not([aria-pressed="true"]):not([aria-selected="true"]):hover { color: #E4E6EA !important; }
[data-skin="clay"] :is(.chips:has(> .chip:nth-child(2)):not(:has(> :not(.chip))), .tab-grp, .mini-btns:has(> button[aria-pressed]):not(:has(> :not(button))), .seg) > :is(.chip[aria-pressed="true"], .chip[aria-selected="true"], button[aria-pressed="true"]),
[data-skin="clay"] .seg button[aria-pressed="true"] {
  background: var(--hb-knob) !important; color: var(--hb-knob-tx) !important; border-radius: 999px; box-shadow: var(--hb-knob-sh) !important;
}
[data-skin="clay"] .seg button { border-radius: 999px; }
/* 왼쪽 메뉴도 같은 트랙 + 손잡이 (세로) */
[data-skin="clay"] .side .nav-list { padding: 2px; gap: 2px; border-radius: 26px; background: var(--hb-track); box-shadow: var(--hb-track-sh); }
[data-skin="clay"] .side .nav-list .nav { border-radius: 999px; color: var(--hb-tx); }
[data-skin="clay"] .side .nav-list .nav .ic { color: var(--hb-tx); opacity: .8; }
[data-skin="clay"] .side .nav-list .nav:not(.on):hover { color: var(--hb-knob-tx); }
[data-skin="clay"][data-theme="dark"] .side .nav-list .nav:not(.on):hover { color: #E4E6EA; }
[data-skin="clay"] .side .nav-list .nav.on { background: var(--hb-knob); color: var(--hb-knob-tx); box-shadow: var(--hb-knob-sh); }
[data-skin="clay"] .side .nav-list .nav.on .ic { color: var(--hb-knob-tx); opacity: 1; }
/* 라이트: 지금 메뉴 손잡이 = 메뉴판 바탕과 같은 색 (11/4 — 그러데이션 회색 대신, 그림자는 그대로) */
html[data-skin="clay"]:not([data-theme="dark"]) .side .nav-list .nav.on { background: var(--cl-plate); }
/* 따로 선 스위치(1위 최저가 등)도 테마 스위치와 같은 트랙 + 손잡이 */
[data-skin="clay"] .sw, [data-skin="clay"] :is(.card, .side, .pt-set) .sw { background: var(--hb-track); box-shadow: var(--hb-track-sh); }
[data-skin="clay"] .sw i { top: 2px; left: 2px; width: 26px; height: 26px; background: var(--hb-knob); box-shadow: var(--hb-knob-sh); }
[data-skin="clay"] .sw[aria-checked="true"], [data-skin="clay"][data-theme="dark"] .sw[aria-checked="true"] { background: linear-gradient(180deg, #2B2E35 0%, #373A42 50%, #3E414A 100%); box-shadow: inset 4px 3px 7px -1px rgba(0,0,0,.85), inset 1px 1px 2px rgba(0,0,0,.6), inset 0 -2px 2px rgba(255,255,255,.05), 0 1px 0 var(--cl-gv-l2), 0 -1px 0 rgba(0,0,0,.25); }
[data-skin="clay"] .sw[aria-checked="true"] i { transform: translateX(24px); }

/* 눈 내리기 (assets/snow.js · 다크에서만) — 그림 판은 맨 앞이지만 마우스를 막지 않음 */
.ty-snow { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.ty-snow[hidden], .ty-snow-btn[hidden] { display: none; }
.ty-snow-btn { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 56;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; font-size: 16px; line-height: 1; color: #3A3F48;
  background: var(--hb-knob); box-shadow: var(--hb-knob-sh); opacity: .75; transition: opacity .15s; }
.ty-snow-btn:hover { opacity: 1; }
.ty-snow-btn[aria-pressed="false"] { background: var(--hb-track); box-shadow: var(--hb-track-sh); color: var(--hb-tx); }

/* ═══ 왼쪽 메뉴 바늘 (11/4, assets/clay-nav.js — 시안 '계기판 바늘 메뉴 시안' ⓪) ═══
   지금 메뉴 = 손잡이 판 대신 바늘이 가리킴 · 글자만 진하고 살짝 크게, 나머지는 흐리게 (js가 .has-needle을 붙인 뒤에만 — js가 없으면 예전 손잡이 그대로) */
[data-skin="clay"], [data-skin="clay"][data-theme="light"] {
  --nd-far: #A3A8B0; --nd-sel: #7C818A; --nd-at: #33373F;
  --nd-rail: rgba(40,44,52,.13); --nd-rail-sh: inset 1px 1px 1px rgba(40,44,52,.25), 1px 1px 0 rgba(255,255,255,.9);
  --nd-k1: #FFFFFF; --nd-k2: #F2F3F5; --nd-k3: #E3E6EA; --nd-line: rgba(100,108,122,.32); --nd-hi: rgba(255,255,255,.95);
  --nd-sh: drop-shadow(1px 2.5px 2px rgba(40,44,52,.26));
  --nd-band: var(--cl-plate);   /* 지금 메뉴 줄 바탕 = 메뉴판 색 */
  /* 홈 그림자를 바깥(판 위 빛·선) / 안쪽(벽 그늘) 둘로 나눔 — 안쪽은 칠한 줄 위로 덮여야 바닥이 칠해진 것처럼 보임 */
  --nd-track-out: 0 1px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(40,44,52,.06);
  --nd-track-in: inset 0 4px 6px -1px rgba(40,44,52,.30), inset 3px 0 5px -2px rgba(40,44,52,.20), inset -2px 0 3px -1px rgba(60,64,72,.45), inset 0 -2px 2px rgba(255,255,255,.8);
}
[data-skin="clay"][data-theme="dark"] {
  --nd-far: #7D828B; --nd-sel: #AEB3BB; --nd-at: #F4F5F7;
  --nd-rail: rgba(0,0,0,.35); --nd-rail-sh: inset 1px 1px 1px rgba(0,0,0,.6), 1px 1px 0 rgba(255,255,255,.06);
  --nd-k1: #F7F8F9; --nd-k2: #E6E8EB; --nd-k3: #CDD1D6; --nd-line: rgba(0,0,0,.4); --nd-hi: rgba(255,255,255,.8);
  --nd-sh: drop-shadow(1px 2.5px 2.5px rgba(0,0,0,.6));
  --nd-band: #24272C;           /* 다크: 홈보다 진한 색 */
  --nd-track-out: 0 1px 0 var(--cl-gv-l2), 0 -1px 0 rgba(0,0,0,.25);
  --nd-track-in: inset 4px 3px 7px -1px rgba(0,0,0,.85), inset 1px 1px 2px rgba(0,0,0,.6), inset 0 -2px 2px rgba(255,255,255,.05);
}
[data-skin="clay"] .side .nav-list.has-needle { position: relative; padding: 4px; gap: 0; }
[data-skin="clay"] .side .nav-list.has-needle::before { content: ""; position: absolute; left: 22px; top: 14px; bottom: 14px; width: 4px; border-radius: 3px; background: var(--nd-rail); box-shadow: var(--nd-rail-sh); pointer-events: none; z-index: 2; }
[data-skin="clay"] .side .nav-list.has-needle .nav,
[data-skin="clay"] .side .nav-list.has-needle .nav.on,
[data-skin="clay"] .side .nav-list.has-needle .nav:not(.on):hover {
  position: relative; z-index: 1; padding: 11px 10px 11px 50px; background: transparent !important; box-shadow: none !important;
  color: var(--nd-far); transition: color .3s ease;
}
/* 커지는 건 transform 대신 글자 크기 자체를 키움 — 움직이는 동안에도 글자가 또렷하게 (11/4). 줄 높이는 20px 고정이라 다른 줄이 밀리지 않음 */
[data-skin="clay"] .side .nav-list.has-needle .nd-in { display: flex; align-items: center; gap: .72em; height: 20px; line-height: 20px; font-size: 14px; white-space: nowrap;
  transition: font-size .34s cubic-bezier(.34,1.3,.52,1); }
[data-skin="clay"] .side .nav-list.has-needle .nd-in .ic { width: 1.22em; height: 1.22em; flex: none; }
[data-skin="clay"] .side .nav-list.has-needle .nav .ic { color: currentColor; opacity: .7; transition: opacity .3s ease; }
[data-skin="clay"] .side .nav-list.has-needle .nav.on { color: var(--nd-sel); }
/* 지금 메뉴 줄: 줄 높이만큼 홈 왼쪽 끝~오른쪽 끝까지 네모나게 칠함 (둥근 끝·그림자 없음 — 홈 둥근 모서리 밖은 잘림) */
[data-skin="clay"] .side .nav-list.has-needle { overflow: hidden; box-shadow: var(--nd-track-out); }
[data-skin="clay"] .side .nav-list.has-needle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--nd-track-in); pointer-events: none; z-index: 2; }   /* 홈 벽 그늘 = 칠한 줄 위 */
[data-skin="clay"] .side .nav-list.has-needle .nav.on::before { content: ""; position: absolute; left: -4px; right: -4px; top: 0; bottom: 0; background: var(--nd-band); z-index: -1; pointer-events: none; }
/* 바늘이 가리키는 줄(마우스가 지나가는 줄 포함) = 지금 메뉴와 같은 진한 글자 — 예전 hover 규칙보다 앞서게 */
[data-skin="clay"] .side .nav-list.has-needle .nav.nd-at,
[data-skin="clay"] .side .nav-list.has-needle .nav.nd-at:hover,
[data-skin="clay"] .side .nav-list.has-needle .nav.nd-at:not(.on):hover { color: var(--nd-at); }
[data-skin="clay"] .side .nav-list.has-needle .nav.nd-at .nd-in { font-size: 15px; }
[data-skin="clay"] .side .nav-list.has-needle .nav.nd-at .ic { opacity: 1; }
[data-skin="clay"] .side .nav-list.has-needle .nav.nav-drag .nd-in { font-size: 14px; }
[data-skin="clay"] .nd-needle { position: absolute; left: 16px; top: 0; width: 52px; height: 24px; z-index: 3; pointer-events: none; filter: var(--nd-sh);
  transition: transform .4s cubic-bezier(.34,1.38,.52,1); will-change: transform; }
[data-skin="clay"] .nd-needle svg { display: block; overflow: visible; }
@media (prefers-reduced-motion: reduce) { [data-skin="clay"] .nd-needle, [data-skin="clay"] .side .nav-list.has-needle :is(.nav, .nd-in) { transition: none; } }

/* 수기 주문 상품 줄(.item-row): 꺼진 상자 안에 꺼진 입력칸이 또 있어 2겹으로 보이던 것 → 줄은 판과 같은 높이 + 둘레만 얇게 파인 홈선 (카드와 같은 방식, 11/4) */
[data-skin="clay"] #items .item-row { background: transparent; box-shadow: var(--cl-groove-lg); border-radius: 18px; }