/* 납품사 OS 초안2(Version2) 공통 — 결정 526: 지금 납품사 OS(/공통/공통.css)의 class 이름을 하나도 바꾸지 않고 겉모양만 관리자 OS 초안2 형태로 다시 입힘
   형태: 떠 있는 유리 레일 + 덮는 메뉴 판 · 더블 베젤(겉 쟁반 6px = border + 안쪽 판 = padding-box 배경 → 안쪽 모서리는 저절로 17−6=11) ·
     알약→중간 모서리 단추(주 단추는 먹 면 + 불씨 네모 화살) · 쟁반 고르기 · 유리 창·서랍 · 0.5초 스프링 · 흐림 걷히며 떠오르는 등장(불러올 때만 · 결정 466)
   색은 테마.css :root 이름표만 · 모서리는 결정 525 이름표만 · 데스크톱 웹 전용(결정 359·513) */
@property --mx { syntax:"<percentage>"; inherits:true; initial-value:50%; }
@property --my { syntax:"<percentage>"; inherits:true; initial-value:50%; }
*{ box-sizing:border-box; scrollbar-width:none; } *::-webkit-scrollbar{ width:0; height:0; }
::selection{ background:var(--불씨옅); color:var(--먹); }
html,body{ height:100%; margin:0; }
body{ background:var(--바탕); color:var(--글보통); font-size:var(--글13); line-height:1.45; letter-spacing:.005em; overflow:hidden; font-variant-numeric:tabular-nums; word-break:keep-all; overflow-wrap:anywhere; -webkit-font-smoothing:antialiased; caret-color:var(--먹); accent-color:var(--먹); }
button,input,select,textarea{ font-family:inherit; color:inherit; } button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--먹); outline-offset:2px; } input:not([type=checkbox],[type=radio]):focus-visible,select:focus-visible,textarea:focus-visible{ outline:none; }   /* 칸은 먹 테 + 불씨 빛이 초점 표시 */
[hidden]{ display:none!important; }
h1,h2,h3{ margin:0; letter-spacing:-.02em; } a{ color:inherit; text-decoration:none; } a.탭,a.줄,a.글단추,a.작은단추{ display:inline-flex; align-items:center; } a.줄{ display:grid; }

/* ── 바탕 — 은회색 + 그물 그라데이션 90초 한 바퀴 + 떠다니는 구 셋 + 결 (관리자 OS 초안2 · soft §5D) · 화면 파일의 .번짐 네 칸을 그대로 쓴다 ── */
.번짐{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:linear-gradient(180deg, var(--바탕빛) 0%, var(--바탕) 45%, var(--바탕2) 100%); }
.번짐::before{ content:""; display:var(--번짐, block); position:absolute; inset:-40%; will-change:transform; background:radial-gradient(38% 30% at 20% 22%, color-mix(in srgb, var(--흰) 95%, transparent), transparent 70%), radial-gradient(30% 26% at 78% 70%, color-mix(in srgb, var(--불씨) 10%, transparent), transparent 70%), radial-gradient(34% 30% at 70% 18%, color-mix(in srgb, var(--흰) 70%, transparent), transparent 70%), radial-gradient(28% 24% at 26% 80%, color-mix(in srgb, var(--바탕2) 90%, transparent), transparent 70%); animation:돌기 90s linear infinite; }
.번짐 i{ position:absolute; display:var(--번짐, block); border-radius:var(--r점); animation:둥실 6s ease-in-out infinite; will-change:transform; }   /* 결정 544 — filter:blur(60px)를 걷고 그라데이션으로 번짐을 그린다(움직일 때 다시 그리지 않음) */
.번짐 i:nth-child(1){ width:640px; height:640px; left:2%; top:-6%; background:radial-gradient(circle at 50% 50%, var(--구1) 0%, transparent 66%); }
.번짐 i:nth-child(2){ width:560px; height:560px; right:0; bottom:-8%; background:radial-gradient(circle at 50% 50%, var(--구2) 0%, transparent 66%); animation-delay:-2s; }
.번짐 i:nth-child(3){ width:460px; height:460px; left:42%; top:30%; background:radial-gradient(circle at 50% 50%, var(--구3) 0%, transparent 66%); animation-delay:-4s; }
.테마고르기{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 6px 10px; border-bottom:1px solid var(--줄선); } .테마고르기 .고르기{ flex-wrap:wrap; }   /* 계정 판 — 개인설정(테마 넷 · 결정 532·536) */
/* 찾기 판 — 찾기 단추 옆에 뜨는 작은 판(요청번호 추적 · 결정 533) */
.찾기판{ position:fixed; z-index:var(--층탐색); top:14px; left:50%; transform:translateX(-50%); width:min(560px, calc(100vw - 2 * var(--레일자리))); padding:6px; border-radius:var(--r카드); background:var(--창쟁반); box-shadow:0 0 0 1px var(--유리테), var(--그림자뜸); backdrop-filter:var(--창흐림); -webkit-backdrop-filter:var(--창흐림); transition:opacity .3s var(--곡선), transform .3s var(--곡선), display .3s var(--곡선) allow-discrete; }
@starting-style{ .찾기판:not([hidden]){ opacity:0; transform:translate(-50%, -8px); } }
.찾기판 .추적칸{ width:100%; height:40px; background:var(--면); } .찾기판 .추적칸 input{ flex:1; width:auto; }   /* 상단 검색창 (결정 543) */
/* 전체 창 — 알림·설정은 서랍이 아니라 작업 화면을 다 쓰는 창 (결정 538) */
dialog.전체{ position:fixed; inset:14px 14px 14px var(--레일자리); margin:0; width:auto; height:auto; max-width:none; max-height:none; }
dialog.전체[open]{ display:flex; flex-direction:column; } dialog.전체 .몸{ flex:1; min-height:0; overflow:auto; }
/* 알림 — 갈래 상자(공지 · 이슈 · 시스템 · 발주 · 납품 · 바코드·재고 · 그 밖) */
dialog.전체 .몸.알림몸{ display:flex; flex-direction:column; padding:12px 18px 18px; }
.알림갈래들{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); grid-template-rows:minmax(0,1fr) minmax(0,1fr); gap:12px; }   /* 다섯 갈래가 창을 가득 — 위 셋 · 아래 둘 (결정 543) */
.알림갈래{ display:flex; flex-direction:column; min-height:0; padding:10px 12px 12px; border-radius:var(--r속); background:var(--면2); box-shadow:inset 0 0 0 1px var(--선옅); grid-column:span 2; } .알림갈래:nth-child(n+4){ grid-column:span 3; }
.알림갈래몸{ flex:1; min-height:0; overflow:auto; display:grid; gap:2px; align-content:start; } .빈자리.작게{ min-height:60px; }
/* 알림 줄 상세 — 윗줄 종류 칩 + 내용 · 아랫줄 대상 · 날짜 시각 · 어디로 (결정 546) */
.알림줄.상세{ grid-template-columns:minmax(0,1fr); gap:3px; min-height:46px; padding:6px 10px; } .알림위{ display:flex; align-items:center; gap:8px; min-width:0; } .알림위 .칩{ flex:none; } .알림위 b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--먹); }
.알림아래{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:var(--글12); color:var(--먹3); } .알림줄.읽음 .알림위 b{ color:var(--먹3); font-weight:500; }
.알림갈래 h3{ display:flex; align-items:center; gap:8px; min-height:28px; margin:0 0 4px; font-size:var(--글14); font-weight:800; color:var(--먹); letter-spacing:-.02em; }
/* 설정 페이지 — 왼쪽 갈래 · 오른쪽 설정 (결정 538) */
.설정틀{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:12px; padding:12px 18px 18px; }
.설정길{ display:grid; align-content:start; gap:2px; padding:4px; border-radius:var(--r속); background:var(--면2); box-shadow:inset 0 0 0 1px var(--선옅); }
.설정길 button{ display:flex; align-items:center; gap:10px; height:36px; padding:0 12px; border:0; border-radius:var(--r칸); background:none; color:var(--먹2); font-weight:500; text-align:left; cursor:pointer; transition:var(--움직임); }
.설정길 button:hover{ background:var(--올림); color:var(--먹); } .설정길 button[aria-current=true]{ background:var(--먹); color:var(--흰); font-weight:600; }
.설정몸{ min-width:0; overflow:auto; padding:0 6px; } .설정절 h3{ margin:4px 0 8px; font-size:var(--글16); font-weight:800; color:var(--먹); letter-spacing:-.02em; }
.설정줄{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; padding:4px 0; border-bottom:1px solid var(--줄선); font-weight:500; color:var(--먹2); }
.설정표{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:8px 12px; margin:0 0 8px; padding:6px 0; } .설정표 dt{ color:var(--먹3); } .설정표 dd{ margin:0; color:var(--먹); font-weight:600; }
/* 밀도 촘촘 (결정 353 · 설정 일반) */
html[data-밀도="촘촘"] .표 th,html[data-밀도="촘촘"] .표 td{ height:28px; } html[data-밀도="촘촘"] .표.빽빽 th,html[data-밀도="촘촘"] .표.빽빽 td{ height:24px; } html[data-밀도="촘촘"] .줄{ min-height:30px; }
.번짐 i:nth-child(n+4){ display:none; }
body::after{ content:""; position:fixed; inset:0; z-index:var(--층결); pointer-events:none; opacity:.03; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>"); }
@keyframes 돌기{ to{ transform:rotate(360deg); } }
@keyframes 둥실{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-15px); } }

/* ── 움직임 한 벌 — 등장은 아래 2rem·흐림 4px에서 떠오름(쪽을 열 때만) · 새로 열리는 곁판·창 속은 짧게 · 다시 그려지는 표 줄에는 걸지 않는다(결정 466) ── */
@keyframes 떠오름{ from{ opacity:0; transform:translateY(2rem); } to{ opacity:1; transform:none; } }   /* 결정 547 — 흐림(filter)은 뺌(초안2.css와 같은 까닭) */
@keyframes 나타남{ from{ opacity:0; transform:translateY(6px); } }
@keyframes 펼침{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes 접힘{ to{ opacity:0; transform:translateY(8px); } }
@keyframes 내려옴{ from{ opacity:0; transform:translateY(-8px) scale(.98); } to{ opacity:1; transform:none; } }
.곁판 > *,#곁판 > *,dialog .몸 > *{ animation:나타남 .45s var(--곡선) backwards; }   /* backwards — 끝나면 층을 남기지 않는다(결정 468) */
.미리보기,.내림판,.서브메뉴{ transition:opacity .2s var(--곡선), display .2s var(--곡선) allow-discrete; } @starting-style{ .미리보기:not([hidden]){ opacity:0; } }
.펼침{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .5s var(--곡선), opacity .5s var(--곡선); } .펼침 > *{ overflow:hidden; min-height:0; } .펼침.열림{ grid-template-rows:1fr; opacity:1; }

/* ── 틀 — 왼쪽은 단추 기둥 자리만 비우고 작업 판이 위부터 아래까지 (결정 533 · 상단 바 없음) ── */
.틀{ height:100dvh; display:grid; grid-template-rows:minmax(0,1fr); padding:14px 16px 14px var(--레일자리); }   /* 사용자 막대는 자리를 차지하지 않고 작업 판 위에 떠 있다(결정 551) */
.막대밑.막대밑{ padding-bottom:calc(var(--막대자리) + 4px); }   /* 막대 밑에 깔리는 굴림 칸 — 끝까지 굴리면 마지막 줄이 막대 위로 올라온다(공통.js 막대비킴) */
/* 안 — 관리자 OS 「공정」이 이 화면을 그 자리에 그대로 띄울 때(주소 ?안): 레일·사용자 막대·바탕 번짐 없이 판만 (결정 551) */
html.안, html.안 body{ background:transparent; } html.안 .번짐, html.안 .레일틀, html.안 .가림{ display:none; } html.안 .틀{ padding:0; } html.안 main.판 :is(.유리.구역,.유리.무대){ animation:none; }   /* 등장은 바깥 틀이 쪽을 바꿀 때만 */

/* ── 왼쪽 단추 기둥 — 유리 판 없이 로고 원형 + 단추 셋(찾기 · 알림 · 계정)만 · 올리면 메뉴 판이 작업 화면을 덮는다 (결정 533 · 523) ── */
.레일틀{ position:fixed; z-index:var(--층탐색); left:var(--레일왼); top:14px; bottom:14px; width:var(--레일칸); }
.레일{ position:relative; z-index:2; width:var(--레일칸); display:flex; flex-direction:column; align-items:center; gap:8px; }   /* 로고만 (결정 543) */
/* 사용자 막대 — 왼쪽 아래 · 아바타·이름 | 검색 | 알림 | 설정 (첨부 화면의 왼쪽 아래 꼴 · 결정 543) · 평소엔 숨고 왼쪽 끝·로고에 커서를 대면 나온다 */
.사용자막대{ position:absolute; z-index:3; left:0; bottom:0; display:flex; align-items:center; gap:2px; width:max-content; max-width:360px; height:var(--막대자리); padding:4px 6px 4px 4px; border-radius:var(--r카드); background:var(--표머리); border:1px solid var(--유리테); box-shadow:var(--유리빛), var(--그림자뜸); }   /* 늘 보인다 (결정 546) · 작업 판 위에 떠 있다(551) */
.사용자{ display:flex; align-items:center; gap:8px; min-width:0; height:44px; padding:0 10px 0 4px; border:0; border-radius:var(--r칸); background:none; color:var(--먹); text-align:left; cursor:pointer; transition:var(--움직임); } .사용자:hover{ background:var(--올림); }
.아바타{ width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:var(--r원); background:var(--먹); color:var(--흰); font-size:var(--글13); font-weight:800; }
.사용자글{ display:grid; min-width:0; line-height:1.2; } .사용자글 b{ font-size:var(--글13); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; } .사용자글 small{ font-size:var(--글12); color:var(--먹3); white-space:nowrap; }
.막대단추{ position:relative; width:36px; height:36px; flex:none; padding:0; border:0; border-radius:var(--r칸); background:none; color:var(--먹3); display:grid; place-items:center; cursor:pointer; transition:var(--움직임); } .막대단추 svg{ width:18px; height:18px; }
.막대단추:hover,.막대단추[aria-expanded=true]{ background:var(--올림진); color:var(--먹); } .막대단추 .레일수{ top:0; right:0; }
/* 로고 — 흰 바탕에 흰 원을 두지 않는다(결정 546): 먹 원판 없이 마크 자체를 46으로 크게 · 테마마다 마크 한 벌(기본 = 회색 행성 + 불씨 궤도 · Glass = 먹빛 · 어두운 테마 = 밝은 벌) */
.레일로고{ position:relative; width:var(--레일칸); height:var(--레일칸); flex:none; display:block; margin-bottom:8px; border-radius:var(--r점); transition:var(--움직임); }
.레일로고 img{ position:absolute; inset:0; width:100%; height:100%; display:none; } .레일로고 .마크.로고-먹{ display:block; } :root[data-테마="glass"] .레일로고 .마크.로고-먹,:root[data-테마="blackblue"] .레일로고 .마크.로고-먹{ display:none; } :root[data-테마="glass"] .레일로고 .마크.로고-글래스{ display:block; } :root[data-테마="blackblue"] .레일로고 .마크.로고-밝은{ display:block; }
.레일로고:hover{ transform:scale(1.08) rotate(-6deg); }
.레일칸{ position:relative; width:var(--레일칸); height:var(--레일칸); flex:none; padding:0; border:1px solid var(--유리테); border-radius:var(--r칸); display:grid; place-items:center; background:var(--유리); box-shadow:var(--유리빛), var(--그림자알약); backdrop-filter:var(--유리흐림); -webkit-backdrop-filter:var(--유리흐림); color:var(--먹3); transition:var(--움직임); }
.레일칸 svg{ width:20px; height:20px; transition:var(--움직임); }
.레일칸:hover,.레일칸[aria-expanded=true]{ background:var(--유리진); color:var(--먹); } .레일칸:hover svg{ transform:scale(1.12); } .레일칸:active{ transform:scale(.94); }
.레일칸[aria-current=page]{ background:var(--먹); color:var(--흰); box-shadow:var(--그림자짙); } .레일칸[aria-current=page]:hover{ background:var(--먹2); }
.레일수{ position:absolute; top:2px; right:0; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r칩); display:grid; place-items:center; font-size:var(--글12); font-weight:700; font-style:normal; line-height:1; color:var(--먹); background:var(--흰); box-shadow:0 0 0 1px var(--선진), var(--그림자고름); }
.레일 .밀기{ flex:1; } .레일가름{ width:26px; height:1px; flex:none; background:var(--선진); margin:4px 0; }
/* 메뉴 판 — 장비군마다 세 방(납품·발주·바코드) · 흐림 64 유리로 작업 화면 위를 덮고 칸이 차례로 떠오른다 (결정 396의 장비군 메뉴 + 서브 메뉴를 갈음) */
.메뉴판{ position:fixed; z-index:1; left:calc(var(--레일왼) + var(--레일폭) + 12px); top:14px; bottom:14px; width:min(640px, calc(100vw - var(--레일자리) - 28px)); padding:18px 20px; border-radius:var(--r); display:flex; flex-direction:column; gap:12px; overflow:auto;
  background:var(--유리진); border:1px solid var(--유리테); box-shadow:var(--유리빛), var(--그림자뜸); backdrop-filter:var(--판흐림); -webkit-backdrop-filter:var(--판흐림);
  opacity:0; visibility:hidden; transform:translateX(-16px) scale(.985); transform-origin:left center; transition:opacity .5s var(--곡선), transform .5s var(--곡선), visibility 0s var(--곡선) .5s; }
.레일틀.열림 .메뉴판{ opacity:1; visibility:visible; transform:none; transition:opacity .5s var(--곡선), transform .5s var(--곡선), visibility 0s; }
.메뉴머리,.메뉴묶음{ opacity:0; transform:translateY(2rem); transition:opacity .6s var(--곡선), transform .6s var(--곡선); }
.레일틀.열림 :is(.메뉴머리,.메뉴묶음){ opacity:1; transform:none; transition-delay:calc(var(--i, 0) * 70ms + 60ms); }
.가림{ position:fixed; z-index:calc(var(--층탐색) - 1); inset:0; background:color-mix(in srgb, var(--바탕) 52%, transparent); opacity:0; visibility:hidden; transition:opacity .5s var(--곡선), visibility 0s var(--곡선) .5s; }
.가림.켬{ opacity:1; visibility:visible; transition:opacity .5s var(--곡선), visibility 0s; }
.메뉴머리{ display:flex; align-items:center; gap:8px; min-height:34px; }
.문이름{ min-width:0; font-size:var(--글제목); font-weight:800; color:var(--먹); letter-spacing:-.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.메뉴들{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; align-items:start; }
.메뉴묶음{ display:flex; flex-direction:column; gap:2px; padding:8px 10px 10px; border:var(--쟁반폭) solid var(--쟁반); border-radius:var(--r카드); background:color-mix(in srgb, var(--흰) 78%, transparent) padding-box; box-shadow:0 0 0 1px var(--쟁반링), var(--속빛); }
.메뉴군{ display:flex; align-items:center; gap:10px; padding:2px 4px 6px; font-size:var(--글15); font-weight:700; color:var(--먹); }
.메뉴표{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:var(--r칸); background:var(--올림); color:var(--먹2); transition:var(--움직임); } .메뉴표 svg{ width:16px; height:16px; }
.메뉴군.켬 .메뉴표{ background:var(--먹); color:var(--흰); }
.메뉴방{ display:flex; align-items:center; gap:10px; height:34px; padding:0 10px 0 12px; border-radius:var(--r칸); color:var(--먹2); font-weight:500; transition:var(--움직임); }
.메뉴방 svg{ width:16px; height:16px; flex:none; color:var(--먹4); transition:var(--움직임); }
.메뉴방:hover{ background:var(--올림); color:var(--먹); transform:translateX(4px); } .메뉴방:hover svg{ color:var(--먹); }
.메뉴방[aria-current=page]{ color:var(--먹); font-weight:600; } .메뉴방[aria-current=page]::after{ content:""; width:6px; height:6px; margin-left:auto; border-radius:var(--r점); background:var(--불씨); }
@media (max-height:800px){ .메뉴판{ padding:14px 18px; gap:10px; } .메뉴방{ height:30px; } .메뉴군{ padding-bottom:4px; } }

/* ── 머리줄 — 떠 있는 유리 알약(위치 · 요청번호 추적) ── */
.머리왼,.머리오른{ display:flex; align-items:center; gap:10px; min-width:0; } .머리오른{ justify-content:flex-end; }
.자취{ display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; color:var(--먹3); font-size:var(--글14); white-space:nowrap; }
.자취 b{ color:var(--먹); font-weight:700; letter-spacing:-.02em; } .자취 a{ transition:var(--움직임); } .자취 a:hover{ color:var(--먹); } .자취 svg{ width:14px; height:14px; flex:none; color:var(--먹4); }
.로고{ display:inline-flex; align-items:center; gap:8px; font-size:var(--글15); font-weight:700; color:var(--먹); white-space:nowrap; }
.로고 i{ width:22px; height:22px; border-radius:var(--r작); background:var(--먹); display:inline-block; } .로고 small{ font-size:var(--글12); font-weight:600; color:var(--먹3); margin-left:2px; }
/* 고르기 줄(탭) — 서류철 탭 대신 쟁반 속 고르기 · 고른 칸만 흰 판으로 뜸 (관리자 OS 초안2) */
.탭줄{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:var(--r알약); background:var(--쟁반); box-shadow:inset 0 0 0 1px var(--쟁반링); flex:none; }
.탭{ position:relative; display:inline-flex; align-items:center; height:28px; padding:0 12px; border:0; border-radius:var(--r칩); background:transparent; color:var(--먹3); font-size:var(--글13); font-weight:500; white-space:nowrap; transition:var(--움직임); }
.탭:hover{ color:var(--먹); background:color-mix(in srgb, var(--흰) 50%, transparent); }
.탭[aria-selected=true]{ color:var(--먹); background:var(--흰); font-weight:600; box-shadow:var(--속빛), var(--그림자고름); }
.탭 b{ margin-left:6px; font-size:var(--글12); font-weight:600; color:var(--먹3); }
.밀기{ flex:1; }
.공정단추{ display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px 0 10px; border:0; border-radius:var(--r알약); background:var(--흰); box-shadow:inset 0 0 0 1px var(--선); color:var(--먹); font-size:var(--글13); font-weight:600; transition:var(--움직임); }
.공정단추 i{ width:8px; height:8px; border-radius:var(--r점); background:var(--불씨); } .공정단추 svg{ width:14px; height:14px; color:var(--먹3); }
.갱신{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:32px; height:32px; padding:0; border:0; border-radius:var(--r원); background:transparent; font-size:var(--글12); color:var(--먹3); transition:var(--움직임); }
.갱신:hover{ background:var(--올림); color:var(--먹); } .갱신 svg{ width:14px; height:14px; } .갱신.도는중 svg{ animation:도는 .7s var(--곡선); } @keyframes 도는{ to{ transform:rotate(360deg); } }
.아이콘버튼{ position:relative; width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:var(--r원); background:var(--올림); color:var(--먹2); transition:var(--움직임); }
.아이콘버튼:hover{ background:var(--먹); color:var(--흰); transform:scale(1.05); } .아이콘버튼:active{ transform:scale(.95); }
.아이콘버튼 svg{ width:18px; height:18px; position:relative; z-index:1; }
.알림점{ position:absolute; top:4px; right:4px; min-width:7px; height:7px; border-radius:var(--r점); background:var(--빨); z-index:2; }

/* Light Glass — 커서를 따라 빛 */
.빛{ position:relative; overflow:hidden; transition:--mx .25s var(--곡선), --my .25s var(--곡선); }
.빛::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--흰) 70%, transparent) 0%, transparent 60%); transition:opacity .5s var(--곡선); }
.빛.켬::after{ opacity:1; }

/* ── 유리 — 떠 있는 층(머리줄·미리보기·내림판·거름판·접기 단추)은 Liquid Glass · 작업 판 안의 칸(.유리.구역 · .유리.무대)은 더블 베젤 ── */
.유리{ background:var(--유리); backdrop-filter:var(--유리흐림); -webkit-backdrop-filter:var(--유리흐림); border:1px solid var(--유리테); border-radius:var(--r카드); box-shadow:var(--유리빛), var(--그림자); transition:background-color .5s var(--곡선); }
.유리:hover{ background:var(--유리진); }
/* 더블 베젤 — 겉 쟁반(먹 4.5% · 링) 6px + 안쪽 판(면 · 윗빛) [soft §4A] · 판은 흐리지 않는다(굴리는 내용 위 흐림 금지 · soft §6) */
.유리.구역,.유리.무대,.유리.구역:hover,.유리.무대:hover{ border:var(--쟁반폭) solid var(--쟁반); border-radius:var(--r); background:var(--면) padding-box; box-shadow:0 0 0 1px var(--쟁반링), var(--속빛), var(--그림자); backdrop-filter:none; -webkit-backdrop-filter:none; }
.구역{ min-width:0; min-height:0; display:flex; flex-direction:column; padding:10px 14px; }
.구역머리{ flex:none; display:flex; align-items:center; gap:8px; min-height:30px; margin-bottom:6px; }
.구역이름{ font-size:var(--글15); font-weight:700; color:var(--먹); letter-spacing:-.02em; white-space:nowrap; }
.건수{ font-size:var(--글12); font-weight:600; color:var(--먹3); white-space:nowrap; padding:1px 8px; border-radius:var(--r칩); background:var(--올림); } .건수:empty{ display:none; }
.구역몸{ flex:1; min-height:0; overflow:auto; mask-image:linear-gradient(var(--검정) calc(100% - 18px), transparent); }   /* 굴림 막대 대신 「더 있음」 흐림 */
.구역몸.끝{ mask-image:none; }

/* ── 목록 줄 · 표시 · 칩 · 막대 ── */
.줄{ display:grid; align-items:center; gap:10px; width:100%; min-height:34px; padding:2px 10px; border:0; border-radius:var(--r칸); background:transparent; color:inherit; font-size:var(--글13); text-align:left; transition:var(--움직임); }
.줄 + .줄{ margin-top:2px; }
.줄:hover,.줄:focus-visible{ background:var(--올림); }
.줄[aria-pressed=true],.줄.고름{ background:var(--불씨옅); }
.줄.점선{ border-bottom:1px dashed var(--선); border-radius:0; } .줄.점선:last-child{ border-bottom:0; }   /* 점선으로 한 줄씩 (결정 410·418) · 모서리 0은 결정 525 이름표의 예외 — 둥글리면 점선 밑줄 양끝이 휜다 */
.줄 b{ font-weight:600; color:var(--먹); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .줄 span{ white-space:nowrap; overflow:hidden; text-overflow:clip; } .줄 .옅{ color:var(--먹3); font-size:var(--글12); }
.표시{ width:9px; height:9px; border-radius:var(--r점); border:1.5px solid var(--먹4); flex:none; } .표시.빨{ background:var(--빨); border-color:var(--빨); } .표시.노{ border-color:var(--노); background:var(--노옅); } .표시.초{ background:var(--초); border-color:var(--초); }
.칩{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border:0; border-radius:var(--r칩); font-size:var(--글12); font-weight:600; color:var(--먹2); background:var(--올림); white-space:nowrap; }
.칩.단계{ background:var(--속); color:var(--테); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--테) 40%, transparent); }
.칩.빨{ color:var(--빨); background:var(--빨옅); } .칩.노{ color:var(--노); background:var(--노옅); } .칩.초{ color:var(--초); background:var(--초옅); }
.가는{ display:inline-block; vertical-align:middle; height:4px; border-radius:var(--r막대); background:var(--선옅); overflow:hidden; } .가는 s{ display:block; height:100%; width:var(--w,0%); background:var(--c,var(--먹4)); border-radius:var(--r막대); }
.칸막대{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; height:8px; } .칸막대 b{ border-radius:var(--r막대); background:var(--선옅); } .칸막대 b.찬{ background:var(--먹3); } .칸막대.빨 b.찬{ background:var(--빨); }
.디데이{ min-width:44px; text-align:right; font-weight:700; color:var(--먹); }

/* ── 단추 — 주 단추(.기본)는 먹 면 + 불씨 네모 속 화살(soft §4B 알약을 중간 모서리로) · 올리면 1.02배·화살 3px · 누르면 0.98배 ── */
.기본{ position:relative; overflow:hidden; display:inline-flex; align-items:center; height:34px; padding:0; border:0; border-radius:var(--r알약); background:var(--먹); color:var(--흰); font-size:var(--글13); font-weight:600; box-shadow:var(--그림자짙); transition:var(--움직임); }
.기본 .면,.기본 .덮개{ display:flex; align-items:center; justify-content:center; height:100%; padding:0 40px 0 16px; white-space:nowrap; }
.기본 .덮개{ position:absolute; inset:0; background:var(--먹2); pointer-events:none; clip-path:circle(0% at 50% 50%); transition:clip-path .5s var(--곡선); }   /* Radial Reveal(결정 339) — 먹 → 먹2로 은은하게 번짐 */
.기본 .면{ position:relative; z-index:1; }
.기본::before{ content:""; position:absolute; z-index:2; right:5px; top:50%; width:24px; height:24px; margin-top:-12px; border-radius:var(--r원); background:var(--불씨); pointer-events:none; transition:var(--움직임); }   /* 불씨 네모 — 면에만 · 위 화살은 먹 */
.기본::after{ content:""; position:absolute; z-index:3; right:16px; top:50%; width:6px; height:6px; margin-top:-3px; border-top:1.5px solid var(--먹); border-right:1.5px solid var(--먹); transform:rotate(45deg); pointer-events:none; transition:var(--움직임); }
.기본:hover{ transform:scale(1.02); box-shadow:var(--그림자짙뜸), 0 0 0 4px var(--불씨옅); } .기본:hover::after,.기본:focus-visible::after{ transform:translateX(3px) rotate(45deg); }
.기본:active{ transform:scale(.98); }
.기본:disabled{ opacity:1; cursor:default; } .기본:disabled:hover{ transform:none; box-shadow:var(--그림자짙); } .기본:disabled:hover::after{ transform:rotate(45deg); }   /* 못 누르는 단추도 같은 모양 (결정 419) */
.기본.둘째{ background:var(--흰); color:var(--먹); box-shadow:inset 0 0 0 1px var(--선진), var(--그림자알약); } .기본.둘째 .덮개{ background:var(--면2); } .기본.둘째 .면,.기본.둘째 .덮개{ padding:0 16px; } .기본.둘째::before,.기본.둘째::after{ display:none; }   /* 둘째 주요(반려 등)는 무채색 흰 판 · 화살 없음 (결정 337) */
.기본.둘째:hover{ box-shadow:inset 0 0 0 1px var(--선진), var(--그림자고름); }
.기본.위험{ background:var(--빨); box-shadow:var(--그림자짙); } .기본.위험 .덮개{ background:color-mix(in srgb, var(--빨) 82%, var(--먹)); } .기본.위험::before{ background:color-mix(in srgb, var(--흰) 18%, transparent); } .기본.위험::after{ border-color:var(--흰); }
.글단추{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:0; border-radius:var(--r알약); background:transparent; color:var(--먹2); font-size:var(--글13); font-weight:500; white-space:nowrap; transition:var(--움직임); }
.글단추:hover{ background:var(--올림); color:var(--먹); } .글단추:active{ transform:scale(.97); }
.작은단추{ white-space:nowrap; height:26px; padding:0 10px; border:0; border-radius:var(--r알약); background:var(--흰); box-shadow:inset 0 0 0 1px var(--선진); color:var(--먹); font-size:var(--글12); font-weight:600; transition:var(--움직임); }
.작은단추:hover{ background:var(--면2); transform:scale(1.02); } .작은단추:active{ transform:scale(.97); }
/* Arrow Reveal — 내려받기 · 먹 네모가 번져 판을 채움 */
.받기{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 5px 0 14px; border:0; border-radius:var(--r알약); background:var(--흰); box-shadow:inset 0 0 0 1px var(--선진), var(--그림자알약); color:var(--먹); font-size:var(--글13); font-weight:600; white-space:nowrap; transition:var(--움직임); }
.받기:active{ transform:scale(.98); }
.받기글{ position:relative; z-index:2; transition:color .5s var(--곡선), transform .5s var(--곡선); } .받기칸{ position:relative; width:24px; height:24px; flex:none; }
.받기덮개{ position:absolute; inset:0; border-radius:var(--r원); background:var(--먹); z-index:1; transition:transform .5s var(--곡선); } .받기화살{ position:absolute; inset:4px; z-index:3; color:var(--흰); transition:transform .5s var(--곡선); }
.받기:hover .받기덮개,.받기:focus-visible .받기덮개{ transform:scale(14); } .받기:hover .받기글,.받기:focus-visible .받기글{ color:var(--흰); transform:translateX(-3px); } .받기:hover .받기화살{ transform:translateY(2px); }
/* Scan Grid — 시스템 기능(올려 두는 동안 띠가 반복) */
.훑기{ position:relative; overflow:hidden; height:34px; padding:0 16px; border:0; border-radius:var(--r알약); background:var(--흰); box-shadow:inset 0 0 0 1px var(--선진), var(--그림자알약); color:var(--먹); font-size:var(--글13); font-weight:600; white-space:nowrap; }
.훑기::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--먹) 9%, transparent) 0 1px, transparent 1px 8px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--먹) 9%, transparent) 0 1px, transparent 1px 8px); opacity:0; transition:opacity .5s var(--곡선); }
.훑기::after{ content:""; position:absolute; left:0; right:0; top:0; height:40%; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--불씨) 35%, transparent), transparent); opacity:0; transform:translateY(-100%); }
.훑기:hover::before,.훑기:focus-visible::before{ opacity:1; } .훑기:hover::after,.훑기:focus-visible::after{ opacity:1; animation:훑음 2s linear infinite; } .훑기 span{ position:relative; z-index:1; }
@keyframes 훑음{ from{ transform:translateY(-100%); } to{ transform:translateY(275%); } }
/* Label Slide — 로그인 · 먹 판 + 불씨 네모 화살 */
.라벨{ position:relative; overflow:hidden; height:42px; padding:0; border:0; border-radius:var(--r알약); background:var(--먹); color:var(--흰); font-size:var(--글14); font-weight:600; width:100%; box-shadow:var(--그림자짙); transition:var(--움직임); }
.라벨 span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform .5s var(--곡선), opacity .5s var(--곡선); }
.라벨 span + span{ transform:translateY(100%); opacity:0; } .라벨:hover span:first-child,.라벨:focus-visible span:first-child{ transform:translateY(-100%); opacity:0; } .라벨:hover span + span,.라벨:focus-visible span + span{ transform:none; opacity:1; }
.라벨::before{ content:""; position:absolute; z-index:2; right:6px; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:var(--r원); background:var(--불씨); transition:var(--움직임); }
.라벨::after{ content:""; position:absolute; z-index:3; right:19px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-top:1.5px solid var(--먹); border-right:1.5px solid var(--먹); transform:rotate(45deg); transition:var(--움직임); }
.라벨:hover{ transform:scale(1.02); box-shadow:var(--그림자짙뜸), 0 0 0 4px var(--불씨옅); } .라벨:hover::after{ transform:translateX(3px) rotate(45deg); }
.라벨:active{ transform:scale(.98); } .라벨:disabled{ cursor:default; }
.기본,.받기,.훑기,.라벨,.아이콘버튼{ isolation:isolate; }   /* 단추 속 층(면·덮개·화살)은 단추 안에서만 — 표 줄 안에 놓인 단추가 굴릴 때 붙은 머리(th) 위로 올라왔다 (결정 552) */

/* ── 입력 — 테 없는 칸 + 옅은 안쪽 선 · 초점이면 흰 판 + 먹 테 + 불씨 빛 ── */
label.칸{ position:relative; display:flex; flex-direction:column; gap:4px; font-size:var(--글12); font-weight:600; color:var(--먹3); min-width:0; }
.칸.안내::after{ content:attr(data-말풍선); position:absolute; left:0; top:calc(100% + 7px); z-index:6; padding:6px 10px; border-radius:var(--r작); background:var(--먹); color:var(--흰); font-size:var(--글12); font-weight:500; white-space:nowrap; animation:펼침 .3s var(--곡선); pointer-events:none; }
.칸.안내::before{ content:""; position:absolute; left:14px; top:calc(100% + 2px); z-index:6; border:5px solid transparent; border-bottom-color:var(--먹); pointer-events:none; }
.칸.위안내.안내::after{ top:auto; bottom:calc(100% + 7px); } .칸.위안내.안내::before{ top:auto; bottom:calc(100% + 2px); border-bottom-color:transparent; border-top-color:var(--먹); }
input,select,textarea{ height:34px; min-width:0; padding:0 12px; border:0; border-radius:var(--r칸); background:var(--면2); box-shadow:inset 0 0 0 1px var(--선옅); color:var(--먹); font-size:var(--글13); outline:0; transition:var(--움직임); }
input:focus,select:focus,textarea:focus{ background:var(--흰); box-shadow:inset 0 0 0 1.5px var(--먹), 0 0 0 4px var(--불씨옅); }
input:is([type=checkbox],[type=radio]),input:is([type=checkbox],[type=radio]):focus{ height:auto; padding:0; background:none; box-shadow:none; }
input[type=number]{ appearance:textfield; -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }   /* 숫자 칸은 화살표 없이 (결정 413) */
input::placeholder,textarea::placeholder{ color:var(--먹4); } input:disabled,select:disabled{ background:var(--올림); color:var(--먹3); opacity:1; }
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{ box-shadow:inset 0 0 0 1.5px var(--빨), 0 0 0 3px var(--빨옅); }
.오류글{ display:flex; align-items:center; gap:5px; font-size:var(--글12); font-weight:600; color:var(--빨); min-height:16px; } .오류글 svg{ width:13px; height:13px; }
textarea{ height:auto; min-height:56px; padding:8px 12px; resize:none; line-height:1.5; }
/* 내려오는 고르기 — 단추 하나 · 누르면 아래로 목록 (결정 417) */
.내림고르기{ position:relative; display:inline-flex; } .내림단추{ position:relative; height:28px; padding:0 26px 0 12px; border:0; border-radius:var(--r알약); background:var(--흰); box-shadow:inset 0 0 0 1px var(--선진); color:var(--먹2); font-size:var(--글12); font-weight:600; white-space:nowrap; cursor:pointer; transition:var(--움직임); }
.내림단추::after{ content:""; position:absolute; right:10px; top:50%; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-70%) rotate(45deg); transition:transform .5s var(--곡선); } .내림단추[aria-expanded=true]::after{ transform:translateY(-30%) rotate(225deg); }
.내림단추.고름{ background:var(--먹); box-shadow:none; color:var(--흰); }
.내림판{ position:absolute; top:calc(100% + 6px); left:0; z-index:30; display:flex; flex-direction:column; gap:2px; min-width:100%; padding:4px; animation:내려옴 .4s var(--곡선); }
.내림판.유리{ background:var(--유리진); box-shadow:var(--유리빛), var(--그림자뜸); }
.내림판 button{ height:30px; padding:0 12px; border:0; border-radius:var(--r칩); background:transparent; color:var(--먹2); font-size:var(--글12); font-weight:600; text-align:left; white-space:nowrap; cursor:pointer; transition:var(--움직임); } .내림판 button:hover{ background:var(--올림); color:var(--먹); }
.날짜거름{ display:inline-flex; align-items:center; gap:4px; } .날짜거름 input[type=date]{ height:28px; width:126px; padding:0 8px; font-size:var(--글12); }
.고르기{ display:inline-flex; padding:3px; border-radius:var(--r알약); background:var(--쟁반); box-shadow:inset 0 0 0 1px var(--쟁반링); } .고르기 button{ height:24px; padding:0 10px; border:0; border-radius:var(--r칩); background:transparent; color:var(--먹3); font-size:var(--글12); font-weight:500; white-space:nowrap; transition:var(--움직임); }
.고르기 button:hover{ color:var(--먹); background:color-mix(in srgb, var(--흰) 50%, transparent); }
.고르기 button[aria-pressed=true]{ background:var(--흰); color:var(--먹); font-weight:600; box-shadow:var(--속빛), var(--그림자고름); } .고르기 button:disabled{ opacity:.45; cursor:default; }

/* ── 창(dialog) — 흐린 유리 쟁반(border 6px) + 안쪽 판 · 알림 띠 · 상태 넷 ── */
dialog{ padding:0; border:var(--쟁반폭) solid var(--창쟁반); border-radius:var(--r); color:var(--먹2); background:var(--면) padding-box; box-shadow:0 0 0 1px var(--유리테), var(--속빛), var(--그림자뜸); backdrop-filter:var(--창흐림); -webkit-backdrop-filter:var(--창흐림); }
dialog{ opacity:0; transform:translateY(12px) scale(.98); transition:opacity .45s var(--곡선), transform .45s var(--곡선), overlay .45s var(--곡선) allow-discrete, display .45s var(--곡선) allow-discrete; } dialog[open]{ opacity:1; transform:none; } @starting-style{ dialog[open]{ opacity:0; transform:translateY(12px) scale(.98); } }
dialog::backdrop{ background:color-mix(in srgb, var(--바탕2) 45%, transparent); opacity:0; transition:opacity .45s var(--곡선), overlay .45s allow-discrete, display .45s allow-discrete; } dialog[open]::backdrop{ opacity:1; } @starting-style{ dialog[open]::backdrop{ opacity:0; } }
dialog header{ display:flex; align-items:center; gap:8px; padding:12px 14px 10px 18px; border-bottom:1px solid var(--줄선); } dialog header .구역이름{ font-size:var(--글16); font-weight:800; }
dialog .몸{ padding:12px 18px; } dialog .몸:has(> table.표:first-child){ padding-top:0; } dialog footer{ display:flex; gap:8px; align-items:center; padding:10px 14px 14px 18px; }
#묻는창{ width:min(440px, calc(100vw - 32px)); } #묻는창 .몸{ padding:20px 20px 4px; }
.묻기{ font-size:var(--글16); font-weight:700; color:var(--먹); letter-spacing:-.025em; line-height:1.4; }
.띠{ position:fixed; z-index:var(--층덮개); left:0; right:0; bottom:20px; width:max-content; max-width:calc(100vw - 32px); margin-inline:auto; display:flex; align-items:center; gap:10px; min-height:42px; padding:5px 6px 5px 5px; border-radius:var(--r알약); color:var(--흰); background:color-mix(in srgb, var(--먹) 86%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--흰) 8%, transparent), var(--그림자뜸); backdrop-filter:var(--유리흐림); -webkit-backdrop-filter:var(--유리흐림); font-size:var(--글13); font-weight:600; animation:떠오름 .6s var(--곡선) backwards; }
.띠 > svg{ width:32px; height:32px; padding:7px; flex:none; border-radius:var(--r원); background:var(--불씨); color:var(--먹); } .띠 > span{ padding-right:8px; }
.띠.빨 > svg{ background:var(--빨); color:var(--흰); }
.띠 .작은단추{ background:transparent; box-shadow:none; color:var(--흰); } .띠 .작은단추:hover{ background:color-mix(in srgb, var(--흰) 12%, transparent); }
.띠.사라짐{ animation:접힘 .4s var(--곡선) forwards; }
.뼈{ height:36px; margin-bottom:1px; display:flex; align-items:center; gap:8px; padding:0 8px; } .뼈 i{ height:10px; border-radius:var(--r막대); background:linear-gradient(90deg, var(--올림) 0%, var(--올림진) 50%, var(--올림) 100%); background-size:200% 100%; animation:반짝 1.6s var(--곡선) infinite; } @keyframes 반짝{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
.빈자리{ height:100%; min-height:90px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--먹3); font-size:var(--글13); font-weight:500; }
.빈자리 svg{ width:22px; height:22px; padding:8px; box-sizing:content-box; border-radius:var(--r원); background:var(--올림); color:var(--먹3); }
/* ── 단계 정거장 — 채움이 왼쪽에서 오른쪽으로 흐른다 (두 줄 동시에 · 결정 385) ── */
.정거장줄{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; container-type:inline-size; }
.정거장{ --걸음:.22s; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; height:40px; border:1px dashed var(--선); border-radius:var(--r칸); padding:0 3px; min-width:0; overflow:hidden; white-space:nowrap; font-size:clamp(9px, 2.4cqw, 12px); font-weight:600; color:var(--먹3); background-image:linear-gradient(var(--속),var(--속)); background-repeat:no-repeat; background-size:0% 100%;
  transition:background-size var(--걸음) linear var(--늦,0s), color .01s linear calc(var(--늦,0s) + var(--걸음)*.5), border-color var(--걸음) linear var(--늦,0s), box-shadow .5s var(--곡선) calc(var(--늦,0s) + var(--걸음)); }
.정거장 small{ font-size:var(--글12); font-weight:500; }
.정거장.찬{ background-size:100% 100%; border-style:solid; border-color:var(--테); color:var(--테); } .정거장.지금{ box-shadow:0 0 0 2px var(--테), var(--그림자고름); }
.정거장.작게{ height:30px; }
.자물쇠{ width:12px; height:12px; vertical-align:-1px; margin-right:4px; color:var(--먹3); }
/* ── 움직임 끄기 — 색만 바뀐다 ── */
.멈춤 *,.멈춤 *::before,.멈춤 *::after{ animation:none!important; transition-property:color,background-color,box-shadow!important; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none!important; transition-property:color,background-color,box-shadow!important; } }

/* ══ 2차에서 더한 부품 — 추적 칸 · 큰 숫자 · 표 · 사슬 · 딱지 · 1식 카드 · 사유별 묶음 · 추적 창 ══ */
.추적칸{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 6px 0 12px; border-radius:var(--r알약); background:color-mix(in srgb, var(--흰) 70%, transparent); box-shadow:inset 0 0 0 1px var(--선옅); color:var(--먹3); transition:var(--움직임); }
.추적칸:focus-within{ background:var(--흰); box-shadow:inset 0 0 0 1px var(--선진), var(--그림자고름); } .추적칸:has(input[aria-invalid=true]){ box-shadow:inset 0 0 0 1.5px var(--빨); }
.추적칸 svg{ width:15px; height:15px; color:var(--먹4); flex:none; } .추적칸 input{ width:150px; height:28px; border:0; background:transparent; box-shadow:none!important; padding:0 4px; font-weight:600; letter-spacing:.02em; }
.실측{ font-size:var(--글12); color:var(--먹3); white-space:nowrap; } .실측 b{ color:var(--먹); font-weight:600; margin-right:3px; }
/* 큰 숫자 — 결정 517로 작게(24) · 굵기로 위계 */
.숫자줄{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--간격); }
.큰수{ display:flex; align-items:baseline; gap:10px; padding:10px 16px; min-height:54px; text-align:left; cursor:pointer; }
.큰수 b{ font-size:var(--글큰); font-weight:800; line-height:1.1; color:var(--먹); letter-spacing:-.03em; } .큰수 span{ font-size:var(--글13); font-weight:600; color:var(--먹2); } .큰수 small{ margin-left:auto; font-size:var(--글12); color:var(--먹3); white-space:nowrap; }
.큰수.빨 b{ color:var(--빨); } .큰수.노 b{ color:var(--노); }
/* 표 — 머리 고정 · 줄은 옅은 먹 선 · 34 / 촘촘·빽빽 28 (결정 520) */
.표{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--글13); }
.표 th{ position:sticky; top:0; z-index:1; height:34px; padding:0 10px; background:var(--표머리); box-shadow:inset 0 -1px 0 var(--선); text-align:left; font-size:var(--글12); font-weight:600; color:var(--먹3); white-space:nowrap; }
.표 tbody th{ position:static; }   /* 붙는 것은 맨 위 머리줄뿐 — 줄 머리(BC-MUX 채널 · 장비모델)와 표 안의 표(펼친 세부) 머리는 바깥 머리와 같은 층이라 굴릴 때 그 위에 겹쳐 쌓였다 (결정 552) */
.표 td{ height:34px; padding:0 10px; box-shadow:inset 0 -1px 0 var(--줄선); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--먹2); vertical-align:middle; transition:background-color .5s var(--곡선); }
.표.촘촘 th,.표.촘촘 td{ height:28px; } .표.촘촘 td{ font-size:var(--글12); } .표.촘촘 td input{ height:22px; } .표 .수{ text-align:right; font-variant-numeric:tabular-nums; } .표 td b{ font-weight:600; color:var(--먹); }
.표 tbody tr{ cursor:pointer; } .표 tbody tr:hover td{ background:color-mix(in srgb, var(--먹) 2.8%, transparent); } .표 tbody tr[aria-selected=true] td{ background:var(--불씨옅); }
.표 td .사슬{ vertical-align:middle; } .표 tbody tr:focus-visible{ outline:2px solid var(--먹); outline-offset:-2px; }
.표 td input{ height:26px; width:64px; padding:0 6px; text-align:right; border-radius:var(--r작); } .표 td input[type=date]{ width:126px; text-align:left; }
.요청번호{ font-weight:600; color:var(--먹); letter-spacing:.02em; } .요청번호.열기{ cursor:pointer; border-bottom:1px dashed var(--선); } .요청번호.열기:hover{ border-color:var(--먹); }
.이음{ color:var(--먹3); font-size:var(--글12); }
/* 단계 사슬 — 6단 ○ · Swing □ (결정 384 — 모양으로 두 축을 가른다) */
.사슬{ display:inline-flex; align-items:center; gap:3px; } .사슬 i{ width:10px; height:10px; border:1.5px solid var(--선); background:transparent; display:inline-block; } .사슬.동그라미 i{ border-radius:var(--r점); } .사슬.네모 i{ border-radius:var(--r막대); }
.사슬 i.찬{ background:var(--속); border-color:var(--테); } .사슬 small{ margin-left:5px; font-size:var(--글12); color:var(--먹2); }
/* 딱지 — 처리용 · 재배분 · 단종 · 자동/수동/추가 */
.딱지{ display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:var(--r칩); font-size:var(--글12); font-weight:600; letter-spacing:.02em; color:var(--먹); background:var(--올림진); white-space:nowrap; }
.딱지.단종{ background:var(--빨옅); color:var(--빨); } .딱지.자동{ background:var(--불씨옅); color:var(--먹); } .딱지.수동{ background:var(--노옅); color:var(--노); } .딱지.추가{ background:var(--초옅); color:var(--초); }
/* 1식 재고 카드 */
.식판{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; align-content:start; }
.식카드{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:0; border-radius:var(--r카드); background:var(--면2); box-shadow:inset 0 0 0 1px var(--선옅); transition:var(--움직임); cursor:pointer; text-align:left; color:inherit; }
.식카드:hover,.식카드:focus-visible{ background:var(--흰); transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--선진), var(--그림자고름); } .식카드.경보{ box-shadow:inset 0 0 0 1.5px var(--빨); } .식카드.주의{ box-shadow:inset 0 0 0 1.5px var(--노); }
.식카드 .모델{ display:flex; align-items:center; gap:6px; font-weight:600; color:var(--먹); } .식카드 .모델 .딱지{ margin-left:auto; }
.식카드 .잔여{ display:flex; align-items:baseline; gap:4px; } .식카드 .잔여 b{ font-size:var(--글20); font-weight:800; color:var(--먹); line-height:1; letter-spacing:-.02em; } .식카드 .잔여 span{ font-size:var(--글12); color:var(--먹3); } .식카드 .잔여 em{ margin-left:auto; font-style:normal; font-size:var(--글12); color:var(--먹); font-weight:600; }
.식카드 .한줄{ font-size:var(--글12); color:var(--먹3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .식카드.경보 .한줄{ color:var(--빨); font-weight:600; }
/* 사유별 묶음 */
.묶음{ margin-bottom:10px; } .묶음머리{ display:flex; align-items:center; gap:8px; height:28px; padding:0 8px; font-size:var(--글13); font-weight:700; color:var(--먹); position:sticky; top:0; background:var(--표머리); z-index:1; box-shadow:inset 0 -1px 0 var(--선); }
.묶음머리 .건수{ font-weight:600; }
/* 추적 창 — 업무 OS 추적 창의 형식 (상자 줄 · 띠 · 범례 · 차례로 튀어나옴 · 결정 400) */
dialog.넓은{ width:min(900px, 92vw); } .추적몸{ display:block; } .추적몸 .표{ margin-top:10px; }
.줄이름{ font-size:var(--글12); font-weight:600; color:var(--먹3); margin:8px 0 5px; } .줄이름 .옅{ font-weight:500; margin-left:6px; }
.흐름{ display:flex; align-items:stretch; container-type:inline-size; } .흐름 .화살{ align-self:center; padding:0 4px; color:var(--먹4); font-size:var(--글12); flex:none; }
.흐름상자{ --끝:.72; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:42px; padding:5px 6px; border:1px dashed var(--선); border-radius:var(--r칸); background:transparent; text-align:center; }
.흐름상자 b{ font-size:clamp(9px, 1.5cqw, 12px); font-weight:600; color:var(--먹3); white-space:nowrap; } .흐름상자 small{ font-size:var(--글12); color:var(--먹3); white-space:nowrap; }
.흐름상자.됨{ --끝:1; border-style:solid; border-color:var(--테); background:var(--속); } .흐름상자.됨 b,.흐름상자.됨 small{ color:var(--테); } .흐름상자.지금{ box-shadow:0 0 0 2px var(--테); }
.띠줄{ display:flex; gap:4px; container-type:inline-size; } .띠칸{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; padding:5px 4px 4px; border:0; border-radius:var(--r칸); background:var(--올림); box-shadow:inset 0 0 0 1px var(--선옅); text-align:center; }
.띠칸 b{ font-size:clamp(9px, 1.5cqw, 12px); font-weight:600; color:var(--먹3); white-space:nowrap; } .띠칸 small{ font-size:var(--글12); color:var(--먹3); white-space:nowrap; }
.띠칸.지남{ background:var(--먹); box-shadow:none; } .띠칸.여기{ background:var(--빨); box-shadow:none; } .띠칸.지남 b,.띠칸.지남 small,.띠칸.여기 b,.띠칸.여기 small{ color:var(--흰); }
.범례{ display:flex; gap:12px; margin-top:6px; font-size:var(--글12); color:var(--먹3); } .범례 i{ display:inline-block; width:9px; height:9px; border-radius:var(--r막대); margin-right:4px; vertical-align:-1px; background:var(--올림); box-shadow:inset 0 0 0 1px var(--선옅); } .범례 i.지남{ background:var(--먹); } .범례 i.여기{ background:var(--빨); }
.장비줄들{ margin-top:12px; padding-top:10px; border-top:1px solid var(--줄선); } .장비줄{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:30px; font-size:var(--글13); } .장비줄 > b{ min-width:110px; color:var(--먹); }
.칩흐름{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .칩흐름 i{ font-style:normal; font-size:var(--글12); color:var(--먹3); }
.칩단계{ font-size:var(--글12); padding:2px 8px; border-radius:var(--r칩); color:var(--먹3); background:var(--올림); white-space:nowrap; } .칩단계.됨{ color:var(--초); background:var(--초옅); }
.흐름상자,.띠칸{ opacity:0; animation:튀어나옴 .45s var(--곡선) forwards; animation-delay:var(--늦,0s); }
#추적창[open]{ animation:펼침 .6s var(--곡선); }
.세로선{ display:inline-block; width:1px; height:18px; background:var(--선); margin:0 4px; } .구역이름.보통{ font-weight:500; color:var(--먹2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @keyframes 튀어나옴{ from{ opacity:0; transform:scale(.96); } to{ opacity:var(--끝,1); transform:none; } }
.멈춤 .흐름상자,.멈춤 .띠칸{ animation:none; opacity:var(--끝,1); }
.축이름{ font-size:var(--글12); font-weight:600; color:var(--먹3); }
/* 미리보기 — 커서를 따라가는 유리 판 (결정 412) */
.미리보기{ position:fixed; z-index:30; width:380px; padding:12px 14px; display:flex; flex-direction:column; gap:5px; pointer-events:none; animation:펼침 .3s var(--곡선); } .미리보기.유리{ background:var(--유리진); box-shadow:var(--유리빛), var(--그림자뜸); } .미리보기 b{ color:var(--먹); } .미리보기 .옅{ font-size:var(--글12); color:var(--먹3); }
.미리머리{ display:flex; align-items:center; gap:8px; padding-bottom:6px; border-bottom:1px solid var(--줄선); } .미리머리 b{ font-size:var(--글14); letter-spacing:.01em; } .미리머리 .칩{ margin-left:auto; }
.미리이름{ font-size:var(--글12); color:var(--먹2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.미리줄{ display:grid; grid-template-columns:minmax(0,1fr) 44px 44px; gap:8px; align-items:center; min-height:30px; padding:2px 0; border-bottom:1px dashed var(--선); font-size:var(--글12); } .미리줄:last-child{ border-bottom:0; }
.미리줄.머리말{ min-height:22px; color:var(--먹3); font-weight:600; border-bottom:1px solid var(--줄선); }
.미리줄 .이름{ display:flex; flex-direction:column; min-width:0; gap:1px; } .미리줄 .이름 b{ font-size:var(--글12); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .미리줄 .이름 small{ font-size:var(--글12); font-family:ui-monospace, Consolas, monospace; color:var(--먹3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.미리줄 .수{ text-align:right; } .미리줄 .수.빨 b{ color:var(--빨); } .미리줄 .수 b{ font-size:var(--글13); }
/* 판 짜임 — 세 기둥 · 두 기둥 · 격자 칸은 내용보다 작아질 수 있어야 한 화면 안에 머문다 (결정 354) */
.판{ display:grid; gap:var(--간격); min-height:0; } .판 > *{ min-height:0; min-width:0; } .판.셋{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); } .판.둘{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); } .판.왼넓{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.세로{ display:grid; grid-template-rows:minmax(0,1fr) minmax(0,1fr); gap:var(--간격); min-height:0; }
.메모칸{ display:grid; grid-template-columns:1fr 130px; gap:8px; align-items:end; } .메모칸 textarea{ min-height:48px; }
.막대그림{ width:100%; height:100%; display:block; } .막대그림 text{ font-size:var(--글12); fill:var(--먹3); }
#알림자리{ display:contents; }
/* 빽빽 — 줄이 많은 표·목록 (한 줄 28 · 결정 520) */
.표.빽빽 th{ height:28px; padding:0 8px; font-size:var(--글12); } .표.빽빽 td{ height:28px; padding:0 8px; font-size:var(--글12); } .표.빽빽 .칩{ height:18px; padding:0 6px; font-size:var(--글12); }
.줄.빽빽{ min-height:30px; font-size:var(--글12); padding:2px 8px; } .줄.빽빽 b{ font-size:var(--글12); }
.구역.빽빽{ padding:8px 12px 6px; } .구역.빽빽 .구역머리{ min-height:24px; margin-bottom:4px; }
.수치{ display:inline-flex; align-items:baseline; gap:4px; font-size:var(--글12); color:var(--먹3); white-space:nowrap; } .수치 b{ font-size:var(--글20); font-weight:800; color:var(--먹); line-height:1; letter-spacing:-.02em; } .수치 + .수치{ margin-left:10px; }

/* ── 등장 — 쪽을 열 때 작업 판의 칸이 아래 2rem·흐림 4px에서 차례로 떠오름(70ms · 공통묶기가 --i를 단다) · 다시 그릴 때는 안 함(결정 466) · 로그인 뒤 첫 화면은 레일·머리줄도(결정 358) ── */
html:not(.멈춤) main.판 :is(.유리.구역,.유리.무대){ animation:떠오름 .7s var(--곡선) backwards; animation-delay:calc(var(--i, 0) * 70ms + 40ms); }
main.판.나감{ opacity:0; transition:opacity .12s var(--곡선); }
html.등장:not(.멈춤) .레일{ animation:레일옴 .7s var(--곡선) backwards; }
@keyframes 레일옴{ from{ opacity:0; transform:translateX(-24px); } }
/* 대기화면 — 10분 · EMBER 마크와 둘레빛 (결정 358·460·473) */
.대기{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; background:var(--바탕); cursor:pointer; animation:나타남 .5s var(--곡선); }
.대기 .마크{ width:96px; height:96px; border-radius:var(--r점); background:var(--먹); display:grid; place-items:center; margin:0 auto; box-shadow:0 0 0 14px var(--불씨옅), var(--그림자짙뜸); animation:둥실 6s ease-in-out infinite; } .대기 .마크 img{ width:72px; height:72px; }
.대기 b{ display:block; text-align:center; font-size:var(--글20); font-weight:700; color:var(--먹); }

/* ── 예전 머리줄 탐색(결정 396 ①) — 초안2에서는 레일·메뉴 판이 갈음해 공통.js가 그리지 않는다 · 이름만 남겨 둔다 ── */
.대문단추{ display:inline-flex; align-items:center; height:34px; padding:0 14px; border:0; border-radius:var(--r알약); background:var(--흰); box-shadow:inset 0 0 0 1px var(--선진); color:var(--먹); font-size:var(--글13); font-weight:600; white-space:nowrap; }
.대문단추[aria-current=page]{ background:var(--먹); color:var(--흰); box-shadow:none; }
.장비군줄{ display:flex; align-items:center; gap:10px; min-width:0; }
.장비군들{ display:flex; align-items:stretch; gap:2px; padding:3px; border-radius:var(--r알약); background:var(--쟁반); } .장비군칸{ position:relative; display:inline-flex; }
.장비군{ position:relative; height:28px; padding:0 14px; border:0; border-radius:var(--r칩); background:transparent; color:var(--먹3); font-size:var(--글13); font-weight:500; white-space:nowrap; transition:var(--움직임); }
.장비군:hover{ color:var(--먹); background:color-mix(in srgb, var(--흰) 50%, transparent); } .장비군[aria-pressed=true]{ background:var(--흰); color:var(--먹); font-weight:600; box-shadow:var(--속빛), var(--그림자고름); }
.서브메뉴{ position:absolute; top:calc(100% + 7px); left:0; z-index:30; display:flex; flex-direction:column; gap:2px; min-width:128px; padding:4px; animation:내려옴 .4s var(--곡선); }
.서브메뉴 a{ display:flex; align-items:center; height:30px; padding:0 12px; border-radius:var(--r칩); font-size:var(--글12); font-weight:600; color:var(--먹2); white-space:nowrap; } .서브메뉴 a:hover{ background:var(--올림); color:var(--먹); } .서브메뉴 a[aria-current=page]{ background:var(--먹); color:var(--흰); }
.서브메뉴 .옅{ padding:0 4px 0 8px; font-size:var(--글12); color:var(--먹3); }
/* 알림 서랍 */
#알림몸{ max-height:none; overflow:auto; } .알림줄{ grid-template-columns:96px minmax(0,1fr) 52px; min-height:40px; } .알림줄 span:not(.옅){ white-space:normal; line-height:1.35; }
.알림줄.읽음 b{ color:var(--먹3); font-weight:500; }   /* 읽은 알림은 굵기·색만 낮춤 */

/* ── 4차 검토 (결정 420~424) — 글 미리보기 · 알림 행선 칩 · 알림이 데려간 판 켜짐 · 칩 단추 ── */
.미리글{ font-size:var(--글13); font-weight:600; color:var(--먹); white-space:normal; line-height:1.45; word-break:keep-all; overflow-wrap:anywhere; }
.알림줄 .칩.행선{ height:18px; padding:0 6px; margin-left:4px; vertical-align:middle; }
.구역.켜짐{ animation:켜짐 2.6s var(--곡선) both; } @keyframes 켜짐{ 0%,55%{ box-shadow:0 0 0 2px var(--불씨), var(--속빛), var(--그림자); } 100%{ box-shadow:0 0 0 1px var(--쟁반링), var(--속빛), var(--그림자); } }
button.칩{ font:inherit; font-size:var(--글12); font-weight:600; cursor:pointer; transition:var(--움직임); } button.칩:not(:disabled):hover{ background:var(--흰); box-shadow:inset 0 0 0 1px var(--선진); } button.칩:disabled{ cursor:default; }

/* ── OriginKit 조각 (결정 452 · 움직임만 · 색은 불씨) ── */
@property --네온각{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@property --빛각{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
/* Neon Border — 새 줄 강조 한 바퀴 · 표 줄(tr)에는 쓰지 않는다 (결정 466) */
.네온{ position:relative; }
.네온::after{ content:""; position:absolute; inset:-2px; z-index:3; border-radius:var(--r칸); padding:2px; pointer-events:none; background:conic-gradient(from var(--네온각) at 50% 50%, transparent 0deg 240deg, color-mix(in srgb, var(--불씨) 35%, transparent) 300deg, var(--불씨) 342deg, var(--흰) 352deg, var(--불씨) 360deg); -webkit-mask:linear-gradient(var(--검정) 0 0) content-box, linear-gradient(var(--검정) 0 0); -webkit-mask-composite:xor; mask:linear-gradient(var(--검정) 0 0) content-box, linear-gradient(var(--검정) 0 0); mask-composite:exclude; animation:네온한바퀴 1.4s cubic-bezier(.65,0,.35,1) 1 both; }
@keyframes 네온한바퀴{ from{ --네온각:0deg; opacity:1; } 80%{ opacity:1; } to{ --네온각:360deg; opacity:0; } }
/* Glow Border — 확인 창 주요 단추 */
.빛싸개{ position:relative; display:inline-flex; border-radius:var(--r알약); }
.빛테두리{ isolation:isolate; }
.빛테두리::before{ content:""; position:absolute; inset:-2px; z-index:0; border-radius:var(--r알약); padding:2px; pointer-events:none; background:conic-gradient(from var(--빛각) at 50% 50%, var(--흰) 0deg, color-mix(in srgb, var(--불씨) 45%, transparent) 20deg, color-mix(in srgb, var(--불씨) 6%, transparent) 40deg 150deg, color-mix(in srgb, var(--불씨) 45%, transparent) 172deg, var(--흰) 180deg, color-mix(in srgb, var(--불씨) 45%, transparent) 200deg, color-mix(in srgb, var(--불씨) 6%, transparent) 220deg 330deg, color-mix(in srgb, var(--불씨) 45%, transparent) 352deg, var(--흰) 360deg); -webkit-mask:linear-gradient(var(--검정) 0 0) content-box, linear-gradient(var(--검정) 0 0); -webkit-mask-composite:xor; mask:linear-gradient(var(--검정) 0 0) content-box, linear-gradient(var(--검정) 0 0); mask-composite:exclude; animation:빛돌기 3s linear infinite; }
.빛테두리:hover::before,.빛테두리:focus-within::before{ animation-duration:.6s; }
.빛싸개 > *{ position:relative; z-index:1; }
@keyframes 빛돌기{ to{ --빛각:360deg; } }
/* 열 거르기 판 (결정 462·468) */
.머리거름{ display:inline-grid; place-items:center; width:18px; height:18px; margin-left:4px; padding:0; border:0; border-radius:var(--r작); background:transparent; color:var(--먹3); vertical-align:-3px; cursor:pointer; transition:var(--움직임); } .머리거름 svg{ width:12px; height:12px; }
.머리거름:hover,.머리거름[aria-expanded=true]{ background:var(--올림진); color:var(--먹); } .머리거름.고름{ background:var(--먹); color:var(--흰); }
.열거름판{ position:fixed; z-index:60; min-width:156px; max-height:280px; overflow:auto; display:flex; flex-direction:column; gap:2px; padding:4px; animation:내려옴 .4s var(--곡선); } .열거름판.유리{ background:var(--유리진); box-shadow:var(--유리빛), var(--그림자뜸); }
.열거름판.사라짐{ animation:접힘 .25s var(--곡선) forwards; }
.열거름판 label,.열거름판 .모두{ display:flex; align-items:center; gap:8px; height:28px; padding:0 8px; border:0; border-radius:var(--r칩); background:transparent; font-size:var(--글12); font-weight:600; color:var(--먹2); text-align:left; cursor:pointer; white-space:nowrap; transition:var(--움직임); }
.열거름판 label:hover,.열거름판 .모두:hover{ background:var(--올림); color:var(--먹); } .열거름판 input{ width:14px; height:14px; margin:0; padding:0; } .열거름판 .옅{ margin-left:auto; padding-left:12px; color:var(--먹3); }

/* ── 좁은 창 — 1100 아래 간격만 줄임 · 데스크톱 웹 전용(기준 너비 1024 · 결정 359·513) ── */
@media (max-width:1100px){ .추적칸 input{ width:110px; } .레일칸 svg{ width:18px; height:18px; } }