/* MR 앱 공통 스타일 — Ember Orange 디자인 시스템 (흰 카드·웜 그레이·전사 공통 오렌지 계열) */ /* 폰트(Fraunces·Hanken Grotesk)는 layouts/app.blade.php 에서 preconnect+link로 로드 */ :root{ /* 크메르(캄보디아어) 글자는 Battambang으로 폴백 — 라틴은 앞 폰트, 크메르 글리프만 Battambang */ --serif:'Fraunces', 'Battambang', Georgia, 'Times New Roman', serif; --sans:'Hanken Grotesk', 'Battambang', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Primary = 엠버 오렌지(전사 공통 #FF6B35 계열). 하위호환 위해 변수명 --orange 유지 */ --orange:#E2551F;--orange-hover:#C24312;--orange-soft:#FCE7DC; --accent-deep:#C24312; /* 링크·강조 딥 오렌지 */ --bg:#F7F5F2;--paper:#FBF9F5;--card:#FFFFFF; --ink:#2C2C2C;--muted:#8A8078; /* 뉴트럴 잉크 + 웜 그레이 */ --border:#EAE4DC;--border-soft:#F1EBE2;--rule:#ECE5DB; --input-bg:#FFFFFF;--hover:#F3EFEA;--thead:#F2ECE3;--soft:#F5F2ED; /* 상태 색 */ --ok:#166534;--warn:#B45309;--info:#1D4ED8;--indigo:#4F46E5;--danger:#B91C1C; --amber:#F59E0B; /* 그레이프 팝 액센트(앰버) */ /* 대시보드 벤토 타일 시그니처 단색(라이트) */ --t-indigo:#4F46E5;--t-blue:#1D4ED8;--t-green:#0F766E;--t-pink:#BE185D;--t-amber:#F59E0B; --shadow:0 1px 2px rgba(124,63,24,.06), 0 6px 18px rgba(124,63,24,.10); --hard:5px 5px 0 var(--accent-deep); /* 네오브루탈 하드 오프셋 섀도우(포인트 리스킨) */ --text:var(--ink); /* 상단 헤더/사이드바 — 딥 오렌지→러스트 그라디언트 */ --header-bg:linear-gradient(180deg,#C24312,#8A2C0A);--header-border:rgba(255,255,255,.14); } [data-theme="dark"]{ --orange:#FB923C;--orange-hover:#FDBA74; --bg:#1E1915;--paper:#241D17;--card:#28211C; --ink:#F1EAE4;--muted:#AFA396; --border:#40362E;--border-soft:#362D26;--rule:#40362E; --input-bg:#201A15;--hover:#302823;--thead:#2E2620;--soft:#2E2620;--orange-soft:#3E2415; --accent-deep:#FDBA74; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4); --hard:5px 5px 0 var(--orange); --t-indigo:#6366F1;--t-blue:#2563EB;--t-green:#0D9488;--t-pink:#DB2777;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#7C2D12,#3F1505);--header-border:rgba(255,255,255,.1); } /* ── 색 팔레트 (헤더 드롭다운에서 선택 · ) ──────────────────── 기본값 ember 는 위 :root / [data-theme="dark"] 를 그대로 씀 — 별도 블록 없음. 주의: [data-palette="x"] 와 [data-theme="dark"] 는 특이성이 같아 뒤 규칙이 이김. 그래서 각 팔레트 블록은 다크 블록이 덮는 변수 "전체"를 빠짐없이 정의해야 함. */ /* Corporate Navy — 차분한 기업형 블루 */ [data-palette="navy"]{ --orange:#1E3A5F;--orange-hover:#16304F;--orange-soft:#E3EAF3; --accent-deep:#16304F; --bg:#F4F6F9;--paper:#FAFBFD;--card:#FFFFFF; --ink:#1C2733;--muted:#6B7A8C; --border:#DDE4EC;--border-soft:#E9EEF4;--rule:#E2E8F0; --input-bg:#FFFFFF;--hover:#EEF2F7;--thead:#EDF1F6;--soft:#F1F4F8; --shadow:0 1px 2px rgba(20,40,70,.06), 0 6px 18px rgba(20,40,70,.10); --hard:5px 5px 0 var(--accent-deep); --t-indigo:#4F46E5;--t-blue:#1D4ED8;--t-green:#0F766E;--t-pink:#BE185D;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#1E3A5F,#0F2440);--header-border:rgba(255,255,255,.14); } [data-palette="navy"][data-theme="dark"]{ --orange:#60A5FA;--orange-hover:#93C5FD;--orange-soft:#16273D; --accent-deep:#93C5FD; --bg:#0F1620;--paper:#141C27;--card:#18212E; --ink:#E7EDF4;--muted:#93A3B5; --border:#2A3746;--border-soft:#232F3D;--rule:#2A3746; --input-bg:#121A24;--hover:#1F2937;--thead:#1D2735;--soft:#1D2735; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4); --hard:5px 5px 0 var(--orange); --t-indigo:#6366F1;--t-blue:#2563EB;--t-green:#0D9488;--t-pink:#DB2777;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#152C49,#0A1523);--header-border:rgba(255,255,255,.1); } /* Forest — 저채도 그린 */ [data-palette="forest"]{ --orange:#166534;--orange-hover:#14532D;--orange-soft:#DCF0E3; --accent-deep:#14532D; --bg:#F4F7F4;--paper:#FAFCFA;--card:#FFFFFF; --ink:#1F2A22;--muted:#6F8175; --border:#DCE6DD;--border-soft:#E8F0E9;--rule:#E1EAE2; --input-bg:#FFFFFF;--hover:#EDF3EE;--thead:#EBF2EC;--soft:#F0F5F0; --shadow:0 1px 2px rgba(20,60,35,.06), 0 6px 18px rgba(20,60,35,.10); --hard:5px 5px 0 var(--accent-deep); --t-indigo:#4F46E5;--t-blue:#1D4ED8;--t-green:#0F766E;--t-pink:#BE185D;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#166534,#0B3D1F);--header-border:rgba(255,255,255,.14); } [data-palette="forest"][data-theme="dark"]{ --orange:#4ADE80;--orange-hover:#86EFAC;--orange-soft:#14301F; --accent-deep:#86EFAC; --bg:#101711;--paper:#151E17;--card:#19241B; --ink:#E6EFE8;--muted:#9AAE9F; --border:#2C3A2F;--border-soft:#253226;--rule:#2C3A2F; --input-bg:#121A14;--hover:#1F2B21;--thead:#1D291F;--soft:#1D291F; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4); --hard:5px 5px 0 var(--orange); --t-indigo:#6366F1;--t-blue:#2563EB;--t-green:#0D9488;--t-pink:#DB2777;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#14401F,#08200F);--header-border:rgba(255,255,255,.1); } /* Slate — 무채색 미니멀 */ [data-palette="slate"]{ --orange:#475569;--orange-hover:#334155;--orange-soft:#E7EBF0; --accent-deep:#334155; --bg:#F6F7F9;--paper:#FBFBFC;--card:#FFFFFF; --ink:#1E252E;--muted:#71808F; --border:#E1E5EA;--border-soft:#ECEFF3;--rule:#E5E9ED; --input-bg:#FFFFFF;--hover:#F0F2F5;--thead:#EEF1F4;--soft:#F3F5F7; --shadow:0 1px 2px rgba(30,40,55,.06), 0 6px 18px rgba(30,40,55,.10); --hard:5px 5px 0 var(--accent-deep); --t-indigo:#4F46E5;--t-blue:#1D4ED8;--t-green:#0F766E;--t-pink:#BE185D;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#475569,#1E293B);--header-border:rgba(255,255,255,.14); } [data-palette="slate"][data-theme="dark"]{ --orange:#94A3B8;--orange-hover:#CBD5E1;--orange-soft:#232B36; --accent-deep:#CBD5E1; --bg:#0F1318;--paper:#141920;--card:#181E26; --ink:#E9EDF2;--muted:#94A3B8; --border:#2B333D;--border-soft:#242B34;--rule:#2B333D; --input-bg:#121720;--hover:#212932;--thead:#1F262F;--soft:#1F262F; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4); --hard:5px 5px 0 var(--orange); --t-indigo:#6366F1;--t-blue:#2563EB;--t-green:#0D9488;--t-pink:#DB2777;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#334155,#0F172A);--header-border:rgba(255,255,255,.1); } /* Violet — 채도 높은 보라 */ [data-palette="violet"]{ --orange:#6D28D9;--orange-hover:#5B21B6;--orange-soft:#EDE4FD; --accent-deep:#5B21B6; --bg:#F7F5FC;--paper:#FCFAFF;--card:#FFFFFF; --ink:#241C33;--muted:#7C7290; --border:#E5DFF0;--border-soft:#EEE9F7;--rule:#E8E2F2; --input-bg:#FFFFFF;--hover:#F2EDFA;--thead:#F0EAFA;--soft:#F5F1FC; --shadow:0 1px 2px rgba(60,30,110,.07), 0 6px 18px rgba(60,30,110,.12); --hard:5px 5px 0 var(--accent-deep); --t-indigo:#4F46E5;--t-blue:#1D4ED8;--t-green:#0F766E;--t-pink:#BE185D;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#6D28D9,#3B0F73);--header-border:rgba(255,255,255,.14); } [data-palette="violet"][data-theme="dark"]{ --orange:#A78BFA;--orange-hover:#C4B5FD;--orange-soft:#2E1D4D; --accent-deep:#C4B5FD; --bg:#140F1E;--paper:#1A1327;--card:#1F182D; --ink:#EDE7F6;--muted:#A79BBD; --border:#352B47;--border-soft:#2C2340;--rule:#352B47; --input-bg:#171122;--hover:#292036;--thead:#251D32;--soft:#251D32; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4); --hard:5px 5px 0 var(--orange); --t-indigo:#6366F1;--t-blue:#2563EB;--t-green:#0D9488;--t-pink:#DB2777;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#4C1D95,#20083F);--header-border:rgba(255,255,255,.1); } /* Rose — 선명한 마젠타 핑크 */ [data-palette="rose"]{ --orange:#BE185D;--orange-hover:#9D174D;--orange-soft:#FBE3EE; --accent-deep:#9D174D; --bg:#FBF5F7;--paper:#FFFAFC;--card:#FFFFFF; --ink:#2E1A23;--muted:#8C7480; --border:#F0DFE6;--border-soft:#F7EAEF;--rule:#F2E2E8; --input-bg:#FFFFFF;--hover:#FAEFF3;--thead:#F9ECF1;--soft:#FCF4F7; --shadow:0 1px 2px rgba(120,20,60,.07), 0 6px 18px rgba(120,20,60,.12); --hard:5px 5px 0 var(--accent-deep); --t-indigo:#4F46E5;--t-blue:#1D4ED8;--t-green:#0F766E;--t-pink:#BE185D;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#BE185D,#701038);--header-border:rgba(255,255,255,.14); } [data-palette="rose"][data-theme="dark"]{ --orange:#F472B6;--orange-hover:#F9A8D4;--orange-soft:#3D1428; --accent-deep:#F9A8D4; --bg:#1A1015;--paper:#20151B;--card:#251920; --ink:#F6E7EE;--muted:#B79AA7; --border:#412C37;--border-soft:#372430;--rule:#412C37; --input-bg:#1C1218;--hover:#31212A;--thead:#2C1E26;--soft:#2C1E26; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4); --hard:5px 5px 0 var(--orange); --t-indigo:#6366F1;--t-blue:#2563EB;--t-green:#0D9488;--t-pink:#DB2777;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#831843,#3F0A20);--header-border:rgba(255,255,255,.1); } /* Cyan — 밝은 청록 (Forest 와 구분되는 시원한 계열) */ [data-palette="cyan"]{ --orange:#0E7490;--orange-hover:#155E75;--orange-soft:#DDF1F7; --accent-deep:#155E75; --bg:#F3F8FA;--paper:#FAFDFE;--card:#FFFFFF; --ink:#12262D;--muted:#6A828B; --border:#D9E6EB;--border-soft:#E7F0F4;--rule:#DFEAEF; --input-bg:#FFFFFF;--hover:#EBF4F7;--thead:#E9F3F6;--soft:#F0F7F9; --shadow:0 1px 2px rgba(10,70,90,.07), 0 6px 18px rgba(10,70,90,.12); --hard:5px 5px 0 var(--accent-deep); --t-indigo:#4F46E5;--t-blue:#1D4ED8;--t-green:#0F766E;--t-pink:#BE185D;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#0E7490,#08404F);--header-border:rgba(255,255,255,.14); } [data-palette="cyan"][data-theme="dark"]{ --orange:#22D3EE;--orange-hover:#67E8F9;--orange-soft:#103642; --accent-deep:#67E8F9; --bg:#0C1518;--paper:#111C20;--card:#152228; --ink:#E2F1F5;--muted:#8FA9B2; --border:#26383F;--border-soft:#1F2E34;--rule:#26383F; --input-bg:#0E181C;--hover:#1D2B31;--thead:#1A272C;--soft:#1A272C; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4); --hard:5px 5px 0 var(--orange); --t-indigo:#6366F1;--t-blue:#2563EB;--t-green:#0D9488;--t-pink:#DB2777;--t-amber:#F59E0B; --header-bg:linear-gradient(180deg,#155E75,#062B36);--header-border:rgba(255,255,255,.1); } *{box-sizing:border-box} body{ margin:0;font-family:var(--sans);color:var(--ink);font-size:14px;line-height:1.5; background:var(--bg); background-image:radial-gradient(1200px 500px at 50% -8%, rgba(255,255,255,.6), transparent 70%); background-attachment:fixed; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* 전역 폴리시 — 선택색·키보드 포커스 링·스크롤바·모션 접근성 */ ::selection{background:var(--orange-soft);color:var(--ink)} :focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px} .btn:focus-visible,a.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none} *::-webkit-scrollbar{width:11px;height:11px} *::-webkit-scrollbar-thumb{background:var(--border);border:3px solid transparent;border-radius:20px;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box} @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}} /* 헤더 — 상단바는 sticky라 세로 공간을 아끼는 컴팩트 높이 */ .app-header{display:flex;align-items:center;gap:16px;padding:9px 24px;background:var(--header-bg);border-bottom:1px solid var(--header-border)} .app-title{text-decoration:none} .app-title:hover{text-decoration:none} .app-title-main{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.2px;color:#fff} .app-title-sub{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:1px} .app-header-right{margin-left:auto;display:flex;align-items:center;gap:12px} .ghost-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;font:inherit;padding:6px 10px;border-radius:8px} .ghost-btn:hover{background:var(--hover);color:var(--ink)} .btn-telegram{background:#2AABEE;color:#fff} .avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-deep);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:var(--serif);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)} /* ── 좌측 사이드바 셸 ── */ .app-shell{display:flex;min-height:100vh} .app-sidebar{position:fixed;top:0;left:0;z-index:50;width:232px;height:100vh; background:var(--header-bg);border-right:1px solid var(--header-border); display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto} .app-sidebar .app-title{display:block;padding:4px 10px 14px;margin-bottom:8px;border-bottom:1px solid var(--header-border)} .side-nav{display:flex;flex-direction:column;gap:3px} .side-link{position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;text-decoration:none;color:rgba(255,255,255,.66);font-size:13.5px;font-weight:500;white-space:nowrap;transition:background .15s,color .15s} .side-ic{flex:none;width:18px;height:18px;display:flex;color:rgba(255,255,255,.55);transition:color .15s} .side-ic svg{width:18px;height:18px;stroke-width:1.9} .side-link:hover{background:rgba(255,255,255,.07);color:#fff} .side-link:hover .side-ic{color:rgba(255,255,255,.9)} .side-active{background:rgba(255,255,255,.16);color:#fff;font-weight:700} /* 러스트 그라디언트 위 활성 표시는 밝은 옐로우로 대비 확보 */ .side-active .side-ic{color:#FDE68A} .side-active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:#FDE68A} .side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--header-border);display:flex;flex-direction:column;gap:10px} .side-user{display:flex;align-items:center;gap:8px;padding:0 4px} .side-user-name{color:rgba(255,255,255,.82);font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .side-logout{color:rgba(255,255,255,.72);text-align:left;width:100%} .side-logout:hover{background:rgba(255,255,255,.1);color:#fff} /* 본문 — 사이드바 폭만큼 밀기 */ .app-main{flex:1;min-width:0;margin-left:232px} .app-mobilebar{display:none} .sidebar-backdrop{display:none} /* 데스크톱 상단 컨텍스트 바 — 우측 본문에 가로 앵커 제공(섹션 위치·다크모드·유저) */ .app-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:26px 24px;background:var(--card);border-bottom:1px solid var(--border)} .topbar-crumb{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px} .crumb-cur{display:inline-flex;align-items:center;gap:8px;min-width:0;font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crumb-ic{flex:none;display:flex;color:var(--accent-deep)} .crumb-ic svg{width:20px;height:20px;stroke-width:1.9} .topbar-actions{display:flex;align-items:center;gap:10px;flex:none} .topbar-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s} .topbar-btn:hover{background:var(--hover);color:var(--ink);border-color:var(--muted)} .topbar-btn svg{width:17px;height:17px} .topbar-user{display:flex;align-items:center;gap:8px} .topbar-user-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis} .topbar-logout{display:flex;align-items:center;color:var(--muted);padding:7px;border-radius:8px} .topbar-logout:hover{background:var(--hover);color:var(--ink)} .topbar-logout svg{width:18px;height:18px} /* 데스크톱에선 유저/로그아웃을 상단바로 이전 → 사이드바 하단 숨김 */ .app-sidebar .side-foot{display:none} .hamburger{background:transparent;border:none;color:#fff;cursor:pointer;padding:4px;display:flex} .hamburger svg{width:24px;height:24px} /* 알림 종 + 드롭다운 */ .notif-bell{position:relative;display:flex} .notif-btn{position:relative} .notif-count{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--card)} .notif-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:80;width:min(340px,90vw);background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);overflow:hidden} .notif-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700;color:var(--ink)} .notif-readall{background:none;border:0;padding:0;color:var(--orange);font:inherit;font-size:12px;font-weight:600;cursor:pointer} .notif-readall:hover{text-decoration:underline} .notif-list{max-height:min(60vh,420px);overflow:auto} .notif-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--ink);cursor:default} a.notif-item{cursor:pointer} a.notif-item:hover{background:var(--hover)} .notif-item:last-child{border-bottom:0} .notif-item.is-overdue{border-left:3px solid var(--danger)} .notif-msg{font-size:13px;line-height:1.35} .notif-item.is-overdue .notif-msg{color:var(--danger);font-weight:600} .notif-ago{font-size:11px;color:var(--muted)} .notif-empty{margin:0;padding:18px 12px;text-align:center;color:var(--muted);font-size:13px} /* 모바일 상단바(어두운 배경)용 종 색 보정 + 우측(아바타 옆) 정렬 */ .app-mobilebar .notif-bell{margin-left:auto} .app-mobilebar .notif-btn{color:#fff;border-color:rgba(255,255,255,.35);background:transparent} .app-mobilebar .notif-btn:hover{background:rgba(255,255,255,.12);color:#fff} /* ── 테마 선택 드롭다운 (헤더) — notif-panel 과 같은 팝오버 패턴 ── */ .theme-menu{position:relative;display:flex} .theme-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:80;width:244px;padding:10px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)} .theme-panel-label{display:block;margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)} .theme-modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px} .theme-mode{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 0;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .theme-mode:hover{border-color:var(--orange);color:var(--ink)} .theme-mode svg{width:14px;height:14px} .theme-mode[aria-pressed="true"]{background:var(--orange-soft);border-color:var(--orange);color:var(--accent-deep)} .theme-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .theme-sw{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--muted);font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .theme-sw:hover{border-color:var(--orange);color:var(--ink)} .theme-sw[aria-pressed="true"]{border-color:var(--orange);color:var(--ink);box-shadow:0 0 0 2px var(--orange-soft)} .theme-sw i{display:block;width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.12)} .theme-sw[data-palette="ember"] i{background:linear-gradient(135deg,#E2551F,#8A2C0A)} .theme-sw[data-palette="navy"] i{background:linear-gradient(135deg,#1E3A5F,#0F2440)} .theme-sw[data-palette="forest"] i{background:linear-gradient(135deg,#166534,#0B3D1F)} .theme-sw[data-palette="slate"] i{background:linear-gradient(135deg,#475569,#1E293B)} .theme-sw[data-palette="violet"] i{background:linear-gradient(135deg,#6D28D9,#3B0F73)} .theme-sw[data-palette="rose"] i{background:linear-gradient(135deg,#BE185D,#701038)} .theme-sw[data-palette="cyan"] i{background:linear-gradient(135deg,#0E7490,#08404F)} .app-mobilebar .theme-btn{color:#fff;border-color:rgba(255,255,255,.35);background:transparent} .app-mobilebar .theme-btn:hover{background:rgba(255,255,255,.12);color:#fff} /* 목록·상세 Overdue(지연) 뱃지 */ .ovd-badge{display:inline-block;margin-left:5px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.02em;background:var(--danger);color:#fff;white-space:nowrap} /* 레이아웃 — 데이터 우선: 카드/여백을 슬림하게 잡아 표에 세로 공간을 최대 확보 */ .container{max-width:1180px;margin:14px auto;padding:0 24px;position:relative} .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:14px;box-shadow:var(--shadow)} .card-narrow{max-width:380px;margin:70px auto} h1{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.2px;margin:0 0 12px;color:var(--ink)} h3{font-family:var(--serif);font-weight:600;font-size:15px;margin:14px 0 8px;color:var(--ink);padding-bottom:4px;border-bottom:1px solid var(--rule)} /* 목록 화면 상단: 제목 + 액션 버튼을 한 줄로 (기존 제목 행 + 툴바 행 2단 → 1단) */ .page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px} .page-head h1{margin:0} .page-head .toolbar{margin-bottom:0} /* 본문 제목을 상단바로 승격 → 제목 없는 헤더는 액션만 우측 정렬 */ .page-head.actions-end{justify-content:flex-end} .pm-head,.mm-head{display:flex;align-items:center;justify-content:flex-end;margin-bottom:10px} /* 폼 요소 */ label{display:block;margin:8px 0 3px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:13.5px;background:var(--input-bg);color:var(--ink);transition:border-color .15s,box-shadow .15s} input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:var(--muted)} input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)} /* 체크박스·라디오는 전역 input 박스 스타일 제외 — padding·border·focus box-shadow가 유발하던 레이아웃 떨림 원천 차단 */ input[type=checkbox],input[type=radio]{accent-color:var(--orange);cursor:pointer} input::placeholder,textarea::placeholder{color:var(--muted);opacity:.72} /* 버튼 */ .btn{border:1px solid transparent;border-radius:999px;padding:7px 16px;cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.01em;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.4;transition:background .15s,border-color .15s,box-shadow .15s,transform .12s} .btn:active{transform:translateY(1px)} .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--orange-soft),0 0 0 4px var(--orange)} .btn-primary{background:var(--card);color:var(--orange);border-color:var(--orange)} .btn-primary:hover{background:var(--orange-soft);border-color:var(--orange-hover);color:var(--orange-hover)} .btn-secondary{background:var(--card);color:var(--ink);border-color:var(--border)} .btn-secondary:hover{background:var(--hover);border-color:var(--muted)} .btn-danger{background:var(--card);color:var(--danger);border-color:#E8C4C0} .btn-danger:hover{background:#F6E5E3;border-color:var(--danger)} .btn:disabled,.btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none} .link-danger{background:none;border:0;padding:0;margin-left:10px;color:var(--danger);cursor:pointer;font:inherit} /* 결재 서명칸 */ .signs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:10px 0} .sbox{border:1px solid var(--border);border-radius:5px;background:var(--card);min-height:92px;display:flex;flex-direction:column} .sbox-cur{border:2px solid var(--orange);box-shadow:0 0 0 3px var(--orange-soft)} .sbox-h{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:7px 10px;border-bottom:1px dashed var(--border)} .sbox-b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px;text-align:center} .sbox-b strong{font-family:var(--serif);font-weight:600;color:var(--accent-deep)} .sbox-b small{color:var(--muted);font-size:11px} /* 툴바·필터 */ .toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px} .toolbar .spacer{flex:1} .filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px} .filters select{width:auto;min-width:140px} /* 목록 상단 요약 카드(KPI) — 로그인 후 첫 화면 */ .mr-summary{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:10px;margin-bottom:12px} .mr-stat{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s} .mr-stat:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(76,29,149,.10),0 12px 26px rgba(76,29,149,.12)} .mr-stat-ic{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center} .mr-stat-ic svg{width:18px;height:18px;stroke-width:2} .mr-stat-body{display:flex;flex-direction:column;min-width:0} .mr-stat-num{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums} .mr-stat-lbl{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 상태별 아이콘 칩 색 (배지 팔레트와 동일 톤) */ .mr-stat.is-total .mr-stat-ic{background:var(--orange-soft);color:var(--accent-deep)} .mr-stat.is-progress .mr-stat-ic{background:#FBF0D8;color:#8A5A00} .mr-stat.is-approved .mr-stat-ic{background:#DDF3E4;color:#166534} .mr-stat.is-value .mr-stat-ic{background:#FBE3F0;color:#BE185D} /* 포인트 리스킨 — 첫 타일(Total)을 하드섀도우 히어로로 강조(벤토 리듬) */ .mr-stat.is-total{border:2px solid var(--accent-deep);box-shadow:var(--hard)} .mr-stat.is-total:hover{transform:none;box-shadow:var(--hard)} .mr-stat.is-total .mr-stat-num{font-size:34px} @media(max-width:820px){.mr-summary{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.mr-summary{grid-template-columns:1fr}} /* Dashboard — 인사말 + 주요 화면 바로가기 카드 */ .dash-hello{margin-left:auto;font-size:13px} @media(max-width:600px){.dash-hello{display:none}} /* 홈 요약 벤토 — 컬러 타일 히어로 그리드(대시보드 전용, 밀집 분석 표는 카드 유지) */ .dash-bento{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;grid-auto-rows:56px;margin-bottom:14px} .db{border-radius:14px;padding:8px 16px;display:flex;flex-direction:column;justify-content:center;gap:2px;overflow:hidden} .db-lbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85} .db-num{font-family:var(--serif);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;font-size:22px} .db-foot{font-size:12px;font-weight:600;opacity:.85} .db-hero{background:var(--t-indigo);color:#fff} .db-hero .db-num{font-size:30px;margin:0} .db-hero .db-foot{display:none} .db-blue{background:var(--t-blue);color:#fff} .db-green{background:var(--t-green);color:#fff} .db-pink{background:var(--t-pink);color:#fff} .db-amber{background:var(--t-amber);color:#3a2a00} @media(max-width:860px){.dash-bento{grid-template-columns:repeat(2,1fr)}.db-hero{grid-column:span 2}} @media(max-width:480px){.dash-bento{grid-template-columns:1fr}.db-hero{grid-column:span 1}} /* 미니 분석 벤토 — 크기 제각각 타일(흰 카드 표면). 밀집 표는 .card로 별도 유지 */ .dash-analytics{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px} .bt{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)} .bt-h{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:14px;font-weight:600;color:var(--ink);margin:0 0 12px} .bt-h::before{content:"";flex:none;width:9px;height:9px;border-radius:3px;background:var(--bt-accent,var(--accent-deep))} .bt-h-sub{margin-left:auto;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted)} /* 타일 헤더 인라인 셀렉트(프로젝트 필터) — 헤더 높이를 늘리지 않는 컴팩트 크기 */ .bt-h-pick{width:auto;max-width:180px;margin-left:auto;padding:3px 6px;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted)} .bt-h-pick:hover,.bt-h-pick:focus{color:var(--ink)} /* 타일별 컬러 액센트 — 막대 색을 타일 색으로 통일해 벤토 세트로 읽히게 */ .bt .an-bar-fill,.bt .an-trend-bar{background:var(--bt-accent,var(--orange))} .bt-lead{--bt-accent:var(--t-indigo);grid-column:span 3} .bt-supp{--bt-accent:var(--t-blue);grid-column:span 3} .bt-cat{--bt-accent:var(--t-green);grid-column:span 3} .bt-trend{--bt-accent:var(--t-pink);grid-column:span 3} @media(max-width:760px){.bt-lead,.bt-supp,.bt-cat,.bt-trend{grid-column:span 6}} /* 테이블 — 밀도 우선: 행 높이를 낮춰 한 화면에 더 많은 행 표시 */ table{width:100%;border-collapse:collapse} th,td{border-bottom:1px solid var(--border);padding:6px 12px;text-align:left;font-size:13px;vertical-align:middle} th{background:var(--thead);color:var(--muted);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border);white-space:nowrap} tbody tr{transition:background .12s} tbody tr:hover{background:var(--hover)} tbody tr:last-child td{border-bottom:none} .right{text-align:right} .center{text-align:center} .col-check{width:36px} /* 드래그로 행 순서 변경 (직원 목록 등) */ .col-grip{width:26px;text-align:center;padding-left:6px;padding-right:6px} .drag-handle{cursor:grab;user-select:none;color:var(--muted);font-size:15px;line-height:1;letter-spacing:-2px} tr[draggable=true]{cursor:grab} tr.dragging{opacity:.55;background:var(--hover)} /* 직원 목록 경계선 행 — 위=MR 앱 사용 직원, 아래=무관한 직원 */ tr.emp-divider td{background:var(--hover);border-top:2px dashed var(--orange);border-bottom:2px dashed var(--orange);padding-top:5px;padding-bottom:5px} tr.emp-divider:hover td{background:var(--hover)} .emp-divider-label{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)} .emp-divider-label::after{content:" ↓ (not shown as MR app users)";font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)} /* 목록 행 액션 버튼 (수정/삭제 나란히 정렬) */ .row-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center} .row-actions form{display:inline;margin:0} .btn-row{border:1px solid var(--border);background:var(--card);color:var(--ink);border-radius:7px;padding:4px 12px;font:inherit;font-size:12.5px;font-weight:600;line-height:1.4;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s} .btn-row:hover{background:var(--hover);border-color:var(--muted)} .btn-row.is-danger{color:var(--danger)} .btn-row.is-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff} a{color:var(--accent-deep);text-decoration:none} a:hover{text-decoration:none;color:var(--orange-hover)} /* 배지 (소프트 스타일) */ .badge{padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.02em;display:inline-block;border:1px solid transparent;text-transform:capitalize} /* 배지 앞 상태 점(dot) — 각 상태색(currentColor)을 그대로 상속받아 자동 채색 */ .badge::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:currentColor;vertical-align:middle;position:relative;top:-1px;opacity:.85} .st-draft{background:#EDF0F3;color:#475569;border-color:#DBE1E8} .st-pending{background:#FBF0D8;color:#8A5A00;border-color:#EBD59E} .st-checked{background:#E4EDFB;color:#1D4ED8;border-color:#C7D8F5} .st-verified{background:#EAE7F8;color:#4F46E5;border-color:#D6D0F0} .st-first_approved{background:#E4EDFB;color:#1D4ED8;border-color:#C7D8F5} .st-approved{background:#DDF3E4;color:#166534;border-color:#BEE6C9} .st-rejected{background:#FBE4E4;color:#B91C1C;border-color:#F2C6C6} .st-active{background:#DDF3E4;color:#166534;border-color:#BEE6C9} .st-inactive{background:#EDF0F3;color:#475569;border-color:#DBE1E8} /* Employees 상태 badge는 점 없이 글자만 (MR 상태 badge의 점은 유지) */ .st-active::before,.st-inactive::before{content:none} /* 실구매(Procurement) 요약 배지 */ .pr-none{background:#EDF0F3;color:#475569;border-color:#DBE1E8} .pr-in_progress{background:#FBF0D8;color:#8A5A00;border-color:#EBD59E} .pr-completed{background:#DDF3E4;color:#166534;border-color:#BEE6C9} /* 품목별 실구매 상태 태그(작은 필) */ .pr-tag{display:inline-block;padding:1px 7px;border-radius:11px;font-size:11px;font-weight:600} .pr-tag-pending{background:#EDF0F3;color:#475569} .pr-tag-purchased{background:#DDF3E4;color:#166534} .pr-tag-substituted{background:#FEF0D8;color:#8A5A00} .pr-tag-not_purchased{background:#FBE4E4;color:#B91C1C} /* 포인트 리스킨 — 목록 행 왼쪽 상태 스트라이프(색으로 상태를 한눈에 스캔). Requests 목록 전용 */ #mr-table td.mr-idlink{position:relative;padding-left:18px;font-weight:700} #mr-table td.mr-idlink::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:4px;border-radius:0 3px 3px 0;background:var(--muted)} #mr-table tr.s-pending td.mr-idlink::before{background:var(--warn)} #mr-table tr.s-checked td.mr-idlink::before, #mr-table tr.s-verified td.mr-idlink::before, #mr-table tr.s-first_approved td.mr-idlink::before{background:var(--info)} #mr-table tr.s-approved td.mr-idlink::before{background:var(--ok)} #mr-table tr.s-rejected td.mr-idlink::before{background:var(--danger)} #mr-table tr.s-draft td.mr-idlink::before{background:var(--muted)} /* 플래시 */ .flash{padding:8px 14px;margin:10px auto;max-width:1180px;border-radius:8px;font-size:13px;font-weight:500} .flash-ok{background:#E8F5EC;color:#166534;border:1px solid #C7E6D0} .flash-err{background:#FBEBEB;color:#B91C1C;border:1px solid #F2C6C6} /* 대시보드 로그인 알림 — 대기 결재 배너 (클릭 시 Pending 목록) */ .dash-approve-alert{display:flex;align-items:center;gap:12px;max-width:1180px;margin:10px auto 0;padding:12px 16px;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--orange);border-radius:10px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600} .dash-approve-alert:hover{background:var(--paper)} .dash-approve-alert .daa-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--orange);color:#fff;font-size:12px;font-weight:700} .dash-approve-alert .daa-cta{margin-left:auto;color:var(--orange);font-weight:700;white-space:nowrap} /* 실시간 변경 감지 배너 (SSE 신호로 노출) */ .update-banner[hidden]{display:none} .update-banner{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:7px 12px;background:var(--orange-soft);border:1px solid var(--orange);border-radius:8px;box-shadow:var(--shadow)} .update-banner .ub-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:0 0 auto;animation:ub-pulse 1.4s ease-in-out infinite} .update-banner .ub-text{font-size:13.5px;font-weight:600;color:var(--ink)} .update-banner .ub-refresh{width:auto;padding:6px 14px;margin-left:auto} .update-banner .ub-dismiss{width:auto;padding:0 6px;margin:0;border:none;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer} @keyframes ub-pulse{0%,100%{opacity:1}50%{opacity:.35}} /* 기타 */ .inline{display:inline} .actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap} /* 액션 바에서 좌/우 버튼 그룹을 벌리는 스페이서 (모바일에선 숨김) */ .actbar-spacer{flex:1 1 auto} .approval-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;margin:12px 0;padding:10px 12px;background:var(--paper);border:1px solid var(--border);border-radius:8px} /* 2단계 결재: [Verified by 라벨+드롭다운] [Approve] 를 한 줄로, 버튼 바닥을 드롭다운에 맞춤 */ .approve-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:0} .verifier-pick{display:flex;flex-direction:column} .verifier-pick select{width:auto;min-width:240px;max-width:340px} .cats{display:flex;gap:16px;flex-wrap:wrap} .cat{display:flex;align-items:center;gap:6px;margin:0;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:500;color:var(--ink)} .cat input{width:auto} /* Sub Category 읽기전용 표시(품목 Type에서 자동 파생) — 점이 켜지면 활성 */ .cat-ro,.nr-cat-ro{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:500} .nr-cat-ro{font-size:11px} .sub-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--border);background:transparent;flex:0 0 9px} .is-on{color:var(--ink)} .is-on .sub-dot{background:var(--orange,#FF6B35);border-color:var(--orange,#FF6B35)} /* 페이지네이션 */ .pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px} .pager-info{color:var(--muted);font-size:12.5px} .pager-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .pager-btn{display:inline-block;padding:6px 11px;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none} .pager-btn:hover{background:var(--hover);text-decoration:none} .pager-btn.is-current{background:var(--orange);color:#fff;border-color:var(--orange)} .pager-btn.is-disabled{color:var(--muted);opacity:.5;pointer-events:none} .pager-btn.is-dots{border-color:transparent;background:transparent;color:var(--muted);font-weight:500} /* 다중 선택 드롭다운 (Members 등) */ .multiselect{position:relative;max-width:420px} .multiselect-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:7px;background:var(--input-bg);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-align:left} .multiselect-toggle:hover{border-color:var(--orange)} .multiselect-toggle[aria-expanded="true"]{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)} .multiselect-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .multiselect-label.is-placeholder{color:var(--muted)} .multiselect-caret{color:var(--muted);font-size:12px} .multiselect-panel{list-style:none;margin:4px 0;padding:4px;border:1px solid var(--border);border-radius:8px;max-height:280px;overflow:auto;background:var(--card);position:absolute;left:0;right:0;z-index:5;box-shadow:var(--shadow)} .multiselect-opt{display:flex;align-items:center;gap:8px;margin:0;padding:7px 9px;border-radius:6px;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer} .multiselect-opt:hover{background:var(--hover)} .multiselect-opt input{width:auto;margin:0} /* ───────────────────────────────────────────── 품목 표 (Item Management) — mr/partials/_items-table.blade.php 공용 form.blade(전체페이지)·index.blade(New Request 모달) 두 화면이 함께 씀. 행 렌더는 public/js/mr-form.js — 클래스 변경 시 JS도 함께 확인할 것. ───────────────────────────────────────────── */ .items-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px} .items-title{margin:0;padding:0;border:0;font-family:var(--serif);font-weight:600;font-size:15px;color:var(--ink)} .items-btns{display:flex;gap:8px} .items-btns .btn{width:auto;padding:6px 12px} .items-tips{margin:8px 0;padding:7px 12px;background:var(--paper);border:1px solid var(--border-soft);border-radius:6px;font-size:12.5px;color:var(--muted)} .items-tips kbd{display:inline-block;padding:1px 6px;margin:0 1px;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;background:var(--card);font:inherit;font-size:12px} .chk-cell{width:34px;text-align:center} .chk-cell input{width:auto;margin:0} .no-cell{width:34px} .row-no{text-align:center;color:var(--muted)} .act-cell{width:92px;text-align:center;white-space:nowrap} .add-mark{color:var(--accent-deep);font-weight:700} #items-table{table-layout:fixed} #items-table th{padding:6px 8px} #items-table td{padding:2px 6px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis} #items-table td input{width:100%;min-width:0;padding:4px 7px;font-size:13px;border-radius:6px;line-height:1.3} #items-table td select.n-category,#items-table td select.n-sub{width:100%;min-width:0;padding:4px 6px;font-size:12.5px;border-radius:6px;line-height:1.3} /* Type 미선택(빈 값) 셀은 필수 미입력임을 옅게 표시 */ #items-table td select.n-sub:invalid{color:var(--muted)} #items-table .cat-ro{font-size:12px;color:var(--muted)} #items-table .chk-cell,#items-table .chk-cell input{overflow:visible} #items-table .act-cell{padding:2px 4px} /* Item Name(3번째 열)만 좌측 정렬, 나머지 열은 전부 중앙 정렬 */ #items-table th,#items-table td{text-align:center} #items-table th:nth-child(3),#items-table td:nth-child(3){text-align:left;padding-right:16px} #items-table .entry-row td{background:var(--paper)} #items-table .entry-row input{width:100%} #items-table .item-row:not(.editing){cursor:pointer} #items-table .item-row.editing td{background:var(--orange-soft)} /* Reference 셀: 썸네일+입력+업로드 버튼을 줄바꿈 없이 한 줄로 */ .ref-edit{display:flex;align-items:center;gap:3px;flex-wrap:nowrap} .ref-edit .ref-text{flex:1 1 auto;width:auto;min-width:0} .ref-edit .ic{flex:none} /* 행 액션 아이콘 버튼 (추가·저장·수정·삭제·업로드·마스터 등록) */ #items-table .ic{width:24px;height:24px;padding:0;border:1px solid var(--border);border-radius:5px;background:var(--card);cursor:pointer;font-size:13px;line-height:1;color:var(--ink);vertical-align:middle} #items-table .ic:hover{background:var(--hover)} #items-table .ic-add,#items-table .ic-save{border-color:var(--orange);color:var(--accent-deep)} #items-table .ic-del:hover{color:var(--danger);border-color:var(--danger)} #items-table .ic-master{border-color:var(--orange);color:var(--accent-deep)} #items-table .ic-master:hover{background:var(--orange-soft)} #items-table .ic-master.is-saved{background:var(--orange-soft);border-color:var(--orange);color:var(--accent-deep);cursor:default} #items-table .ic-master.is-busy{opacity:.5;cursor:default} #items-table .act-cell .ic{margin:0 1px} /* 자재마스터 즉시 저장 등 결과 메시지 */ .items-msg{min-height:0;margin:6px 0 0;font-size:13px;font-weight:600} .items-msg.is-ok{color:var(--ok)} .items-msg.is-info{color:var(--accent-deep)} .items-msg.is-warn{color:var(--danger)} /* VAT 열: 품목별 적용 여부 체크박스 (좁은 열이라 입력 폭 100% 규칙에서 제외) */ .vat-cell{width:44px;text-align:center} #items-table td.vat-cell input[type=checkbox]{width:auto;min-width:0;padding:0;margin:0;cursor:pointer} #items-table .vat-cell,#items-table .vat-cell input{overflow:visible} /* 합계 (Subtotal · VAT · Grand Total · Amount in Words) */ .items-totals{margin-top:10px;display:flex;flex-direction:column;gap:4px;font-size:14px} .items-totals span{color:var(--muted)} .items-totals b{color:var(--ink);font-variant-numeric:tabular-nums} .material-picker{margin:8px 0;position:relative} .material-results-list{list-style:none;margin:4px 0;padding:0;border:1px solid var(--border);border-radius:8px;max-height:240px;overflow:auto;background:var(--card);position:absolute;left:0;right:0;z-index:5;box-shadow:var(--shadow)} .material-results-list li{padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--border-soft)} .material-results-list li:hover{background:var(--orange-soft)} /* Item Name 자동완성 드롭다운 (수동 입력행 — body에 fixed로 부착해 표 셀 clip 회피) */ .ac-list{position:fixed;z-index:70;margin:0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);max-height:288px;overflow:auto} .ac-item{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px} .ac-item.is-active,.ac-item:hover{background:var(--orange-soft)} .ac-code{flex:none;font-weight:700;font-size:11px;color:var(--accent-deep);background:var(--orange-soft);border-radius:5px;padding:2px 7px;font-variant-numeric:tabular-nums} .ac-item.is-active .ac-code{background:var(--card)} .ac-desc{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)} .ac-price{flex:none;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums} .ac-empty{padding:9px 10px;color:var(--muted);font-size:12.5px} .comment{border:1px solid var(--border);border-radius:6px;padding:6px 10px;margin-bottom:6px;background:var(--paper)} .comment-body{margin-left:8px;color:var(--accent-deep);font-weight:600} .comment-form{margin-top:10px;display:flex;gap:8px;align-items:flex-end} .comment-form textarea{flex:1;margin-bottom:0} .comment-form .btn{flex:none;white-space:nowrap} .muted{color:var(--muted)} /* Modal (직원 편집 등) */ .modal-overlay{position:fixed;inset:0;background:rgba(28,23,18,.5);display:none;align-items:flex-start;justify-content:center;z-index:50;overflow-y:auto;padding:40px 16px} .modal-overlay.open{display:flex} .modal{background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);width:100%;max-width:540px;padding:20px 24px 24px} .modal-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:6px} .modal-head h2{font-family:var(--serif);font-size:19px;font-weight:600;margin:0;color:var(--ink)} .modal-close{background:transparent;border:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 6px;width:auto} .modal-close:hover{color:var(--ink)} .modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .modal-grid .full{grid-column:1 / -1} .modal-actions{display:flex;gap:8px;margin-top:18px} .modal-actions .btn{width:auto} .modal-wide{max-width:920px} /* Load Material(s) 2단계 위저드 */ .mat-picker-overlay{z-index:60} .mat-steps{display:flex;align-items:center;gap:14px;margin:2px 0 10px} .mat-step{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)} .mat-step b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--border);color:var(--ink);font-size:12px} .mat-step.is-active{color:var(--ink)} .mat-step.is-active b{background:var(--orange);color:#fff} .mat-step-line{flex:1;height:1px;background:var(--border)} #mat-picker-search{width:100%;margin:0 0 8px} /* 카테고리 필터 칩 (Step1) */ .mat-cats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px} .mat-cat{padding:4px 12px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;line-height:1.6;transition:background .15s,border-color .15s,color .15s} .mat-cat:hover{border-color:var(--orange);color:var(--ink)} .mat-cat.is-active{background:var(--orange);border-color:var(--orange);color:#fff} .mat-table-wrap{max-height:56vh;overflow:auto;border:1px solid var(--border);border-radius:8px} .mat-table{width:100%;border-collapse:collapse} .mat-table th{position:sticky;top:0;z-index:1} .mat-table th,.mat-table td{padding:6px 10px;font-size:12.5px;border-bottom:1px solid var(--border-soft);text-align:left;vertical-align:middle} .mat-table .right{text-align:right;font-variant-numeric:tabular-nums} .mat-table .chk-cell{width:36px;text-align:center} .mat-table .chk-cell input{width:auto;margin:0} .mat-tr{cursor:pointer} .mat-tr.is-sel{background:var(--orange-soft)} .mat-noimg{display:inline-flex;align-items:center;justify-content:center;width:40px;height:30px;border:1px solid var(--border);border-radius:5px;background:var(--hover);color:var(--muted);font-size:8.5px} /* Reference 이미지 썸네일 — 피커(mm-thumb)·품목 표(mm-thumb-sm) 공용 */ .mm-thumb{width:40px;height:30px;object-fit:cover;border:1px solid var(--border);border-radius:5px;display:block} .mm-thumb-sm{width:44px;height:34px;object-fit:cover;border:1px solid var(--border);border-radius:5px;display:block} .ref-cell{text-align:center} .mat-table .req{color:#c0392b} .mat-table input{padding:6px 8px} .mq-del-cell{text-align:center} .mq-del{width:26px;height:26px;line-height:1;border:1px solid var(--border);border-radius:6px;background:var(--card);color:#c0392b;font-size:18px;cursor:pointer;padding:0} .mq-del:hover{background:#fdecea;border-color:#c0392b} .mat-code{display:inline-block;padding:3px 8px;border-radius:6px;background:var(--orange-soft);color:var(--orange);font-weight:700;font-size:12px;white-space:nowrap} .mat-unit{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--hover);color:var(--muted);font-size:12px;font-weight:600} .mat-qty{width:90px} .mat-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px} .mat-pager-btns{display:flex;gap:8px} .mat-pager-btns .btn{width:auto;padding:6px 12px} /* 요청서 읽기전용 상세 (show 페이지·목록 모달 공용 partial) */ /* 요약 히어로 — 문서 핵심(라벨·상태·프로젝트·목적·총액)을 최상단 한 블록에 */ .mrd-hero{display:flex;gap:18px;align-items:stretch;margin:6px 0 4px;padding:15px 17px;border:1px solid var(--border);border-radius:12px; background:linear-gradient(135deg,var(--orange-soft) 0%,var(--card) 55%)} .mrd-hero-main{flex:1;min-width:0} .mrd-hero-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .mrd-hero-title h3{margin:0;font-size:19px;font-family:var(--serif);font-weight:600} .mrd-hero-sub{margin:3px 0 0;font-size:12.5px} .mrd-hero-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 16px;margin-top:11px} .mrd-hero-facts>div{font-size:13.5px;font-weight:500;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mrd-hero-total{flex:none;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:2px;padding-left:18px;border-left:1px solid var(--border)} .mrd-hero-total b{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums} .mrd-hero-items{font-size:11.5px;color:var(--muted)} /* 품목 표 하단 합계 라인 (Grand Total + 영문 금액) */ .mrd-itemtotals{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px dashed var(--border)} .mrd-itemtotals b{font-size:16px;font-variant-numeric:tabular-nums} .mrd-words{font-size:12px;color:var(--muted);font-style:italic} .mrd-section{background:var(--paper);border:1px solid var(--border-soft);padding:15px 17px;border-radius:11px;margin-top:14px} .mrd-section h4{margin:0 0 11px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-deep);padding-bottom:9px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:8px} /* 섹션 헤더 좌측 액센트 바 (primary 네이비) */ .mrd-section h4::before{content:"";flex:none;width:4px;height:12px;border-radius:3px;background:var(--orange)} .mrd-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px} /* 섹션별 1행 정렬: Request Information=3열, Requester Information=4열 (≤900px는 기본 규칙이 2열, ≤600px는 1열로 자동 축소) */ .mrd-grid-3{grid-template-columns:repeat(3,1fr)} .mrd-grid-4{grid-template-columns:repeat(4,1fr)} .mrd-grid>div{font-size:14px;color:var(--ink);font-weight:500} .mrd-k{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:3px} .mrd-table,.mrd-sign{width:100%;border-collapse:collapse;margin-top:4px;background:var(--card)} .mrd-table{table-layout:fixed} .mrd-table th,.mrd-table td{border:1px solid var(--border);padding:5px 7px;font-size:12.5px;text-align:center;overflow:hidden;text-overflow:ellipsis} .mrd-table th{background:var(--card);color:var(--muted);font-size:11px;text-transform:uppercase} /* Item Name(2번째 열)만 좌측 정렬, 나머지 열은 전부 중앙 정렬 */ .mrd-table th:nth-child(2),.mrd-table td:nth-child(2){text-align:left} /* Qty·Unit Price·Total Price 숫자 열은 자릿수 정렬 유지 */ .mrd-table td:nth-child(4),.mrd-table td:nth-child(5),.mrd-table td:nth-child(6){font-variant-numeric:tabular-nums} .mrd-sign .right{text-align:right;font-variant-numeric:tabular-nums} .mrd-sign th,.mrd-sign td{border:1px solid var(--border);padding:8px;text-align:center;font-size:12.5px;width:25%} .mrd-sign th{background:var(--card);color:var(--muted);font-size:11px;text-transform:uppercase} /* 결재란 서명 이미지 — 연한 스캔 서명을 크게·진하게. 흰 배경이 남은 파일도 있으므로 밝기는 낮추지 않고(회색 상자가 생김) mix-blend-mode로 흰색을 지운다. multiply: 흰 배경(255)은 셀 배경 그대로 → 안 보이고, 어두운 획만 남는다. */ .mrd-sig{display:block;max-height:72px;max-width:100%;margin:4px auto 0; filter:grayscale(1) contrast(1.7);mix-blend-mode:multiply} /* 다크 테마: 반전해 흰 획으로 만들고 screen으로 검은 배경을 지운다 */ [data-theme=dark] .mrd-sig{filter:grayscale(1) contrast(1.7) invert(1);mix-blend-mode:screen} .mrd-cur{background:var(--orange-soft,#ffe9df)} .mrd-attach{margin:4px 0 0;padding-left:18px} .mrd-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;border-top:1px solid var(--border);padding-top:14px} .mrd-actions .btn{width:auto} /* 넓은 표 가로 스크롤 래퍼 (모바일에서 카드 밖으로 넘치지 않게) */ .table-scroll{overflow:auto;max-height:calc(100vh - 220px);-webkit-overflow-scrolling:touch} .table-scroll table{min-width:640px} /* 헤더 고정 — 스크롤 시 thead만 상단 고정, 데이터만 스크롤 */ .table-scroll thead th{position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--border)} /* ───────────────────────────────────────────── 반응형 — 태블릿(≤900px) · 모바일(≤600px) ───────────────────────────────────────────── */ @media (max-width: 900px) { .container{margin:12px auto;padding:0 16px} .card{padding:14px 14px} /* 사이드바 → 오프캔버스 드로어 (햄버거로 토글) */ .app-main{margin-left:0} /* 데스크톱 상단바 숨기고, 유저/로그아웃은 드로어 하단으로 복귀 */ .app-topbar{display:none} .app-sidebar .side-foot{display:flex} .app-sidebar{transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.4)} .app-sidebar.is-open{transform:none} .app-mobilebar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40;padding:9px 14px;background:var(--header-bg);border-bottom:1px solid var(--header-border)} .app-mobilebar .app-title-main{color:#fff;font-size:18px} /* 알림·테마·아바타를 우측에 한 덩어리로 (auto 여백은 종 아이콘 하나만) */ .app-mobilebar .avatar{margin-left:0} .sidebar-backdrop.is-open{display:block;position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.42)} /* 2열 그리드는 태블릿에서 1열로 */ .modal-grid{grid-template-columns:1fr} .mrd-grid{grid-template-columns:1fr 1fr} .mrd-hero-facts{grid-template-columns:1fr 1fr} /* 서명칸 4열 → 2열 */ .signs{grid-template-columns:repeat(2,1fr)} .modal-wide{max-width:100%} } @media (max-width: 600px) { .container{margin:10px auto;padding:0 12px} .card{padding:12px 12px;border-radius:8px} /* 타이틀·아바타 축소 */ .app-title-main{font-size:18px} .app-title-sub{font-size:8.5px;letter-spacing:.2em} .avatar{width:28px;height:28px} h1{font-size:18px} /* 툴바·필터·액션: 버튼이 꽉 차게 세로 정렬 친화 */ .toolbar,.mrd-actions,.actions{gap:8px} .toolbar .btn,.mrd-actions .btn{flex:1 1 auto} .actbar-spacer{display:none} .filters{flex-direction:column;align-items:stretch} .filters select{width:100%;min-width:0} .approval-actions{flex-direction:column;align-items:stretch} /* 상세 그리드·서명칸 1열, 히어로는 세로 스택 */ .mrd-grid{grid-template-columns:1fr} .signs{grid-template-columns:1fr} .mrd-hero{flex-direction:column;gap:10px} .mrd-hero-facts{grid-template-columns:1fr} .mrd-hero-total{align-items:flex-start;padding-left:0;border-left:none;border-top:1px solid var(--border);padding-top:8px} /* 모달 여백 축소 */ .modal-overlay{padding:16px 10px} .modal{padding:16px 15px} .modal-head h2{font-size:17px} } /* 브라우저 인쇄 — 서명을 더 크게, 색 보정이 인쇄에도 그대로 적용되도록(다크테마 반전 해제) */ @media print{ .mrd-sig{max-height:84px;-webkit-print-color-adjust:exact;print-color-adjust:exact; filter:grayscale(1) contrast(1.9);mix-blend-mode:multiply} /* 다크 테마로 보고 있어도 인쇄는 검정 서명·흰 배경 제거로 통일 */ [data-theme=dark] .mrd-sig{filter:grayscale(1) contrast(1.9);mix-blend-mode:multiply} .mrd-sign{page-break-inside:avoid;break-inside:avoid} }