/* ══ 블록 1 — 메인 앱 (Apple Monochrome · Pretendard) ══ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'SF Pro KR','Apple SD Gothic Neo',sans-serif;font-size:13px;background:#F5F5F7;color:#2E2E30;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:root{
--navy:#2E2E30;--navy2:#424245;--nbg:#F5F5F7;--nbg2:#E8E8ED;
--teal:#30D158;--tbg:#F5F5F7;
--rose:#D0021B;--rbg:#FFF5F5;
--amber:#6E6E73;--abg:#F5F5F7;
--purple:#6E6E73;--pbg:#F5F5F7;
--green:#30D158;--gbg:#F5F5F7;
--ink:#2E2E30;--ink2:#424245;--ink3:#86868B;
--surf:#F5F5F7;--card:#FFFFFF;--bd:#E8E8ED;--bd2:#D2D2D7;
--grad1:linear-gradient(180deg,#2E2E30 0%,#3C3C40 100%);
--shadow-sm:0 1px 2px rgba(0,0,0,.04);
--shadow-md:0 4px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
--shadow-lg:0 20px 48px rgba(0,0,0,.08),0 8px 20px rgba(0,0,0,.04);
--radius:16px;--radius-sm:10px;--radius-lg:22px;
--ease:cubic-bezier(.25,.1,.25,1);
}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.fade-in{animation:fadeIn .3s var(--ease)}
.app{display:none;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden;position:relative}
/* ══════════════════════════════════════════ */
/* 🎨 이모지 → 미니멀 픽토그램 CSS 치환 */
/* 이모지 자체는 숨기고 SVG 아이콘으로 대체 */
/* ══════════════════════════════════════════ */
/* 이모지 제거용 유틸 — 텍스트 앞에 있는 이모지를 가리고 대신 아이콘 표시 */
/* 네비 폴더 메뉴 */
#nt-folder{font-size:0!important}
#nt-folder::after{content:'Folder';font-size:12.5px;font-weight:500;letter-spacing:-.01em;color:inherit}
#nt-folder::before{content:'';display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,") no-repeat center/contain}
/* 💡 팁 버튼들 — 동그란 info(i) 아이콘으로 */
.tip-btn{font-size:0!important;width:16px!important;height:16px!important;border:.5px solid var(--bd2)!important;border-radius:50%!important;background:transparent!important;color:var(--ink3)!important;position:relative;padding:0!important;margin-left:4px;flex-shrink:0;cursor:pointer;transition:all .2s var(--ease)}
.tip-btn::after{content:'i';font-family:'Pretendard Variable',serif;font-style:italic;font-size:10px;font-weight:600;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:currentColor;line-height:1}
.tip-btn:hover{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important;transform:none}
/* 툴팁 팝업 안의 이모지 제거 */
.tip-popup{position:relative}
/* 📋 📅 📊 📷 🔗 📤 ⬇ ⬆ ✅ ☑ 📁 📎 🗑 → 숨기고 텍스트만 */
/* 버튼 이모지 선택적 숨김 — CSS unicode-range를 쓸 수 없어서 HTML 그대로 두되 font-size 조정 */
/* 이모지 통일 처리: 모든 이모지에 일관된 필터 적용 */
button,div,span{letter-spacing:-.01em}
/* ══════════════════════════════════════════ */
/* 네비게이션 */
.nav{background:var(--grad1);display:flex;align-items:center;padding:0 24px;height:56px;gap:2px;flex-shrink:0;box-shadow:0 .5px 0 rgba(255,255,255,.08) inset;position:relative;z-index:100;backdrop-filter:saturate(180%) blur(20px)}
.nb{font-size:15px;font-weight:600;color:#fff;margin-right:24px;display:flex;align-items:center;gap:8px;letter-spacing:-.03em;position:relative}
/* 🎨 네비 로고 SVG 완전히 숨기고 텍스트 로고로 교체 */
.nb svg{display:none!important}
.nb::before{content:'';display:inline-block;width:20px;height:20px;border-radius:5px;background:#fff;-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;vertical-align:middle;margin-right:2px}
.nb::after{content:'nopro';font-size:16px;font-weight:600;letter-spacing:-.04em;color:#fff}
.nb-dot{width:7px;height:7px;border-radius:50%;background:#30D158;display:inline-block;box-shadow:0 0 10px rgba(48,209,88,.4);animation:pulse 2.4s ease-in-out infinite}
.nb-ver{font-size:10px;font-weight:500;color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:999px;margin-left:6px;letter-spacing:.02em;border:.5px solid rgba(255,255,255,.1)}
.nt{height:56px;display:flex;align-items:center;padding:0 14px;font-size:12.5px;color:rgba(255,255,255,.55);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .25s var(--ease);font-weight:500;letter-spacing:-.01em;position:relative}
.nt:hover{color:#fff;background:rgba(255,255,255,.05)}
.nt.on{color:#fff;border-bottom-color:#fff;font-weight:600}
.nt.on::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:20px;height:2px;background:#fff;border-radius:2px 2px 0 0}
.nsp{flex:1}
.nxa{padding:7px 16px;font-size:11.5px;font-weight:500;background:rgba(255,255,255,.1);color:#fff;border:.5px solid rgba(255,255,255,.15);border-radius:980px;cursor:pointer;font-family:inherit;transition:all .22s var(--ease);letter-spacing:-.01em}
.nxa:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.25)}
.body{display:flex;flex:1;overflow:hidden}
/* 사이드바 */
.sb{width:180px;background:var(--card);border-right:.5px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0;height:100%;overflow:hidden;position:relative;transition:width .3s var(--ease)}
.sb-toggle{position:absolute;top:12px;right:10px;width:22px;height:22px;border-radius:50%;border:.5px solid var(--bd);background:#fff;cursor:pointer;font-size:10px;color:var(--ink3);display:flex;align-items:center;justify-content:center;z-index:5;padding:0;transition:all .2s var(--ease);font-family:inherit;line-height:1;box-shadow:var(--shadow-sm)}
.sb-toggle:hover{color:var(--ink);border-color:var(--ink2);background:var(--surf)}
.sb.collapsed{width:44px}
.sb.collapsed>*:not(.sb-toggle){display:none!important}
.sb.collapsed .sb-toggle{right:50%;transform:translateX(50%)}
.sb-hd{padding:18px 16px 12px}
.sb-t{font-size:10px;font-weight:600;color:var(--ink3);letter-spacing:.06em;text-transform:uppercase}
.sb-s{font-size:10px;color:var(--ink3);margin-top:4px;letter-spacing:-.01em}
.sb-search{margin:0 12px 10px;position:relative}
.sb-search input{width:100%;padding:7px 12px 7px 30px;font-size:12px;border:.5px solid var(--bd);border-radius:10px;background:var(--surf);color:var(--ink);font-family:inherit;transition:all .2s var(--ease);letter-spacing:-.01em}
.sb-search input:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(29,29,31,.08)}
.sb-search::before{content:'';position:absolute;left:10px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--ink3);-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;pointer-events:none}
.ei{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:all .22s var(--ease);border-radius:0 10px 10px 0;margin:1px 8px 1px 0}
.ei:hover{background:var(--surf)}
.ei.on{background:var(--surf);border-left-color:var(--ink)}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
.en{font-size:12.5px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.er{font-size:10px;color:var(--ink3);letter-spacing:-.01em}
.main{flex:1;overflow-y:auto;background:var(--surf);height:100%}
.pg{padding:0;display:none}
.pg.on{display:block;animation:fadeIn .3s var(--ease);min-height:100%}
/* 페이지 헤더 */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;padding:28px 28px 0}
.sticky-hd{position:sticky;top:0;z-index:50;background:rgba(245,245,247,.85);backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--bd)}
.sticky-hd .ph{margin-bottom:0;border-bottom:none}
.pt{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.03em}
.pt-s{font-size:12px;color:var(--ink3);margin-top:5px;font-weight:400;letter-spacing:-.01em}
/* 버튼 — 애플 pill */
.btn{padding:8px 16px;font-size:12px;border:.5px solid var(--bd2);border-radius:980px;cursor:pointer;background:var(--card);color:var(--ink);font-family:inherit;transition:all .22s var(--ease);font-weight:500;line-height:1;box-shadow:var(--shadow-sm);letter-spacing:-.01em}
.btn:hover{background:var(--surf);border-color:var(--ink2);color:var(--ink)}
.btn:active{transform:scale(.98);transition-duration:.1s}
.btn-n{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.15),0 4px 12px rgba(0,0,0,.08)}
.btn-n:hover{background:#1D1D1F;color:#fff;border-color:#2E2E30}
.btn-t{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.15),0 4px 12px rgba(0,0,0,.08)}
.btn-t:hover{background:#1D1D1F;color:#fff;border-color:#2E2E30}
.btn-sm{padding:6px 13px;font-size:11px;border-radius:980px}
.btn-xs{padding:4px 10px;font-size:10.5px;border-radius:980px}
/* 날짜바 */
.dbar{display:inline-flex;align-items:center;background:var(--card);border:.5px solid var(--bd);border-radius:14px;overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.ds{display:flex;align-items:center;border-right:.5px solid var(--bd)}
.ds:last-child{border-right:none}
.dl{padding:7px 10px;font-size:10px;background:var(--surf);font-weight:500;color:var(--ink2);white-space:nowrap;letter-spacing:.04em;text-transform:uppercase}
.dv{padding:7px 12px;font-size:14px;font-weight:600;color:var(--ink);background:#fff;min-width:36px;text-align:center;cursor:pointer;user-select:none;transition:background .15s;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dv:hover{background:var(--surf)}
.dar{padding:7px 9px;background:var(--surf);color:var(--ink3);cursor:pointer;font-size:14px;user-select:none;transition:all .15s}
.dar:hover{background:var(--nbg2);color:var(--ink)}
.ddow{padding:7px 14px;font-size:11.5px;color:var(--ink3);background:var(--surf);white-space:nowrap;font-weight:500;letter-spacing:-.01em}
/* 휴게 */
.bk-box{background:var(--card);border:.5px solid var(--bd);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.bk-hd{background:var(--grad1);color:#fff;padding:13px 20px;font-size:12.5px;font-weight:500;display:flex;align-items:center;justify-content:space-between;letter-spacing:-.01em}
.bk-note{font-size:10.5px;color:rgba(255,255,255,.55);font-weight:400;letter-spacing:-.01em}
.bk-body{padding:14px 20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bk-pill{display:flex;align-items:center;gap:6px;background:var(--surf);border:.5px solid var(--bd);border-radius:980px;padding:6px 14px;transition:all .2s var(--ease)}
.bk-pill:hover{background:var(--nbg2);border-color:var(--bd2)}
.bk-lbl{font-size:10px;font-weight:600;color:var(--ink2);letter-spacing:.02em;text-transform:uppercase}
.bk-val{font-size:11.5px;color:var(--ink);font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bk-ep{display:flex;align-items:center;gap:3px;background:var(--card);border:.5px solid var(--bd);border-radius:980px;padding:5px 12px}
.bs{padding:2px 6px;font-size:10.5px;border:.5px solid var(--bd2);border-radius:6px;background:#fff;color:var(--ink);font-family:inherit;cursor:pointer}
.bs:focus{outline:none;border-color:var(--ink)}
.bk-del{width:20px;height:20px;border:none;background:none;cursor:pointer;color:var(--ink3);font-size:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;transition:all .15s}
.bk-del:hover{color:var(--rose);background:rgba(208,2,27,.08)}
.bk-add{padding:6px 14px;font-size:10.5px;border:.5px dashed var(--bd2);border-radius:980px;background:none;cursor:pointer;color:var(--ink3);font-family:inherit;font-weight:500;transition:all .2s var(--ease)}
.bk-add:hover{border-color:var(--ink2);color:var(--ink);background:var(--surf)}
.bk-mod{font-size:9.5px;color:var(--ink2);background:var(--surf);padding:2.5px 8px;border-radius:980px;border:.5px solid var(--bd2);font-weight:500;letter-spacing:-.01em}
/* ══════════════════════════════════════════ */
/* 📊 근태 테이블 — 칸 분리 + 무채색 헤더 변주 */
/* ══════════════════════════════════════════ */
.tw{background:var(--card);border:.5px solid var(--bd);border-radius:var(--radius);overflow:hidden;overflow-x:auto;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.et{width:100%;border-collapse:collapse;min-width:580px}
/* 헤더 — 라이트 톤 (흰 배경 + 짙은 텍스트) */
.et thead th{color:#1D1D1F!important;padding:12px 6px;font-size:10.5px;font-weight:600;text-align:center;border-right:.5px solid #E8E8ED!important;border-bottom:.5px solid #D2D2D7!important;letter-spacing:.02em;background:#FAFAFA!important}
.et thead tr:first-child th{background:#FAFAFA!important}
/* 수당 그룹 (실근무/휴게/야간/연장/휴일) — 살짝 톤 다운으로만 구분 */
.et thead th[style*="1A3A6E"],
.et thead th[style*="2D6A4F"],
.et thead th[style*="1A5276"],
.et thead th[style*="4A1A7E"],
.et thead th[style*="7A2E0E"]{background:#F5F5F7!important;color:#1D1D1F!important}
.et thead tr:last-child th{background:#F0F0F3!important;color:#86868B!important;font-weight:500;font-size:9.5px;border-top:.5px solid #E8E8ED!important}
.et thead th:last-child{border-right:none!important}
/* 행 — hover/zebra로 분리 가시화 */
.et tbody tr{border-bottom:.5px solid #E8E8ED;transition:all .18s var(--ease)}
.et tbody tr:nth-child(even){background:#FAFAFA}
.et tbody tr:last-child{border-bottom:none}
.et tbody tr:hover{background:#F0F0F3!important;box-shadow:inset 0 0 0 1px var(--bd2)}
.et tbody tr.ab-row{background:rgba(208,2,27,.04)!important}
.et tbody tr.ab-row:hover{background:rgba(208,2,27,.08)!important}
.et tbody tr.hol-row{background:#F5F5F7!important}
.et tbody tr.hol-row:hover{background:#EBEBEE!important}
.et tbody tr.al-row{background:rgba(48,209,88,.05)!important}
.et tbody tr.al-row:hover{background:rgba(48,209,88,.1)!important}
/* 셀 — 세로 구분선 추가 */
.et td{padding:9px 6px;text-align:center;vertical-align:middle;border-right:.5px solid #F0F0F2}
.et td:last-child{border-right:none}
.td-nm{text-align:left;padding-left:18px;letter-spacing:-.01em;font-weight:500}
.time-inp{width:80px;padding:7px 8px;font-size:13px;font-weight:500;border:.5px solid var(--bd2);border-radius:10px;background:var(--surf);color:var(--ink);font-family:inherit;text-align:center;letter-spacing:.5px;transition:all .2s var(--ease);font-variant-numeric:tabular-nums}
.time-inp:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(29,29,31,.08)}
.time-inp.night,.time-inp.cross,.time-inp.hol-t{border-color:var(--bd2);background:var(--surf);color:var(--ink)}
.time-inp.dis{opacity:.35;pointer-events:none}
.time-inp::placeholder{color:var(--ink3);font-weight:400;font-size:12px;letter-spacing:0}
/* 수당 칼럼 셀 — 애플 톤 무채색 변주 */
.td-w{background:#F5F5F7;font-size:11.5px;font-weight:600;color:var(--ink);min-width:70px;font-variant-numeric:tabular-nums;border-left:.5px solid #E8E8ED}
.td-nt{background:#F5F5F7;font-size:11.5px;color:var(--ink);min-width:58px;font-weight:500;font-variant-numeric:tabular-nums}
.td-ot{background:#EFEFF1;font-size:11.5px;color:var(--ink);min-width:58px;font-weight:500;font-variant-numeric:tabular-nums}
.td-hol{background:#E8E8ED;font-size:11.5px;color:var(--ink);min-width:58px;font-weight:500;font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;padding:2.5px 8px;font-size:9.5px;border-radius:980px;font-weight:500;letter-spacing:-.01em;border:.5px solid var(--bd);background:var(--surf);color:var(--ink)}
.ch-cr,.ch-hol,.ch-al{background:var(--surf);color:var(--ink);border-color:var(--bd)}
.ch-ab{background:rgba(208,2,27,.08);color:var(--rose);border-color:rgba(208,2,27,.2)}
.note-inp{padding:5px 10px;font-size:10.5px;border:.5px solid var(--bd);border-radius:8px;background:transparent;color:var(--ink2);font-family:inherit;width:400px;letter-spacing:-.01em}
.note-inp:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(29,29,31,.06)}
/* 스탯 카드 */
.sg5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}
.sg4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.sc{background:var(--card);border:.5px solid var(--bd);border-radius:var(--radius);padding:18px 20px;text-align:center;box-shadow:var(--shadow-sm);transition:all .25s var(--ease)}
.sc:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--bd2)}
.sc.ok{border-color:var(--bd2);background:#fff;box-shadow:var(--shadow-sm)}
.sc-l{font-size:10.5px;color:var(--ink3);margin-bottom:8px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.sc-v{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sc-u{font-size:11.5px;color:var(--ink3);font-weight:400;margin-left:3px;letter-spacing:-.01em}
/* 캘린더 */
.cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cdh{text-align:center;font-size:10px;font-weight:500;padding:8px 0;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase}
.cdh.su{color:var(--rose)}.cdh.sa{color:var(--ink2)}
.cdc{min-height:70px;border:.5px solid var(--bd);border-radius:12px;padding:6px;cursor:pointer;overflow:hidden;transition:all .22s var(--ease);background:var(--card)}
.cdc:hover{border-color:var(--ink2);background:var(--surf);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.cdc.em{background:transparent;cursor:default;border-color:transparent}
.cdc.em:hover{background:transparent;border-color:transparent;transform:none;box-shadow:none}
.cdc.hd{background:var(--surf);border-color:var(--bd2)}
.cdc.abd{background:rgba(208,2,27,.04);border-color:rgba(208,2,27,.15)}
.cdc.phd{background:var(--surf);border-color:var(--bd2)}
.cdc.ald{background:rgba(48,209,88,.05);border-color:rgba(48,209,88,.2)}
.cdc.sel{border:1.5px solid var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(29,29,31,.08)}
.cdn{font-size:10px;font-weight:600;color:var(--ink);margin-bottom:2px;letter-spacing:-.01em}
.cdn.su{color:var(--rose)}.cdn.sa{color:var(--ink2)}.cdn.ph{color:var(--rose)}
.cwk{font-size:8.5px;font-weight:500;color:var(--ink2);margin-top:2px;letter-spacing:-.01em}
.cti{font-size:8.5px;color:var(--ink2);line-height:1.5;font-weight:400;letter-spacing:-.01em}
.tch{font-size:7.5px;padding:1.5px 6px;border-radius:980px;display:inline-block;margin-top:1px;font-weight:500;background:var(--surf);color:var(--ink);border:.5px solid var(--bd)}
.ph-name{font-size:8.5px;color:var(--rose);font-weight:500;margin-top:1px;letter-spacing:-.01em}
/* 전체현황표 */
.ov-w{overflow-x:auto;border:.5px solid var(--bd);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm)}
.ov-t{border-collapse:collapse;width:100%}
.ov-t th{padding:12px 8px;font-size:10.5px;font-weight:600;color:#1D1D1F;background:#FAFAFA;border-right:.5px solid #E8E8ED;border-bottom:.5px solid #D2D2D7;text-align:center;white-space:nowrap;letter-spacing:.02em}
.ov-t td{padding:8px 8px;font-size:10.5px;border-bottom:.5px solid #F0F0F2;border-right:.5px solid #F0F0F2;text-align:center;white-space:nowrap;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.ov-t tr:last-child td{border-bottom:none}
.ov-t td.ec{text-align:left;font-weight:500;background:var(--surf);position:sticky;left:0;z-index:1;border-right:1px solid var(--bd)}
.ov-t td.hd2{background:var(--surf);color:var(--ink)}
.ov-t td.ab2{background:rgba(208,2,27,.06);color:var(--rose)}
.ov-t td.ph2{background:var(--surf);color:var(--ink)}
.ov-t td.al2{background:rgba(48,209,88,.08);color:var(--green)}
.ov-t td.mt{color:var(--ink3)}
.ov-t td.sm{background:#F5F5F7;font-weight:700;color:#1D1D1F;border-top:.5px solid #D2D2D7}
/* 급여카드 */
.pg2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:20px}
.pc{background:var(--card);border:.5px solid var(--bd);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:all .25s var(--ease)}
.pc:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--bd2)}
.pch{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:.5px solid var(--bd);background:var(--surf)}
.pcb{padding:16px 22px}
.pr{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:7px 0;border-bottom:.5px solid #F5F5F7}
.pr:last-child{border-bottom:none;font-size:14px;font-weight:600;padding-top:12px;color:var(--ink);letter-spacing:-.02em}
.prl{color:var(--ink3);font-weight:400;letter-spacing:-.01em}
.prv{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.02em}
.prx{font-size:9.5px;color:var(--ink3);margin-left:3px;font-weight:400}
.ptb{background:var(--card);border:.5px solid var(--bd);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.pth{background:var(--grad1);color:#fff;padding:15px 24px;font-size:13.5px;font-weight:500;letter-spacing:-.02em}
/* ══════════════════════════════════════════ */
/* 📋 직원관리·연차 테이블 — 칸 분리 강화 */
/* ══════════════════════════════════════════ */
.emt{width:100%;border-collapse:collapse;table-layout:auto}
.emt th{text-align:center!important;padding:12px 8px!important;font-size:10.5px;font-weight:600;color:#1D1D1F!important;background:#FAFAFA!important;border-right:.5px solid #E8E8ED!important;border-bottom:.5px solid #D2D2D7!important;letter-spacing:.02em;position:relative;white-space:nowrap}
.emt th .col-resize{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;z-index:2}
.emt th .col-resize:hover,.emt th .col-resize.active{background:rgba(0,0,0,.1)}
/* 셀 — 세로·가로 구분선 강화 */
.emt td{padding:10px 8px;font-size:11.5px;border-bottom:.5px solid #E8E8ED;border-right:.5px solid #F0F0F2;overflow:visible!important;letter-spacing:-.01em;white-space:nowrap}
.emt td:last-child{border-right:none}
.emt tr:last-child td{border-bottom:none}
/* 행 zebra + hover */
.emt tbody tr:nth-child(even) td{background:#FAFAFA}
.emt tbody tr:hover td{background:#F0F0F3!important;box-shadow:inset 0 1px 0 var(--bd2),inset 0 -1px 0 var(--bd2)}
.ei2{width:100%;padding:7px 9px;font-size:11.5px;border:.5px solid var(--bd);border-radius:8px;background:transparent;color:var(--ink);font-family:inherit;font-weight:400;transition:all .2s var(--ease);letter-spacing:-.01em;box-sizing:border-box}
.ei2:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(29,29,31,.06)}
/* 성별 버튼 — 잘림 방지 */
.gender-btn{padding:5px 10px;font-size:10.5px;border:.5px solid var(--bd2);border-radius:980px;cursor:pointer;background:#fff;color:var(--ink2);font-family:inherit;font-weight:500;transition:all .22s var(--ease);letter-spacing:-.01em;white-space:nowrap;min-width:32px;flex-shrink:0;line-height:1.3}
.gender-btn.male.on,.gender-btn.female.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* 성별 컨테이너 — 잘림 방지 */
.emt td:nth-child(11){overflow:visible!important;min-width:56px}
/* 연차 테이블 — 라이트 헤더 */
#leave-table thead tr{background:#FAFAFA!important}
#leave-table thead th{background:#FAFAFA!important;border-right:.5px solid #E8E8ED!important;border-bottom:.5px solid #D2D2D7!important;color:#1D1D1F!important;font-weight:600!important}
/* 강조 컬럼 (사용연차·잔여연차·시급·잔여연차수당) — 살짝 다른 톤으로 구분 */
#leave-table thead th[style*="0E4D2E"],
#leave-table thead th[style*="0E4D3E"]{background:#F5F5F7!important;color:#1D1D1F!important}
#leave-table thead th[style*="0A3D5C"]{background:#F5F5F7!important;color:#1D1D1F!important}
#leave-table thead th[style*="1a3a5c"]{background:#F5F5F7!important;color:#1D1D1F!important}
#leave-table thead th[style*="2d1a4f"]{background:#F5F5F7!important;color:#1D1D1F!important}
#leave-table tbody td{border-bottom:.5px solid #E8E8ED!important;border-right:.5px solid #F0F0F2!important;padding:10px 8px!important;letter-spacing:-.01em}
#leave-table tbody td:last-child{border-right:none!important}
#leave-table tbody tr:nth-child(even) td{background:#FAFAFA}
#leave-table tbody tr:hover td{background:#F0F0F3!important}
/* 연차 행 내부 컬러풀 영역 통째로 무채색 */
#leave-table [style*="background:#FFF8E1"],
#leave-table [style*="background:#EFF6FF"],
#leave-table [style*="background:#F0FDF4"],
#leave-table [style*="background:#ECFDF5"]{background:var(--surf)!important;border-color:var(--bd)!important}
#leave-table [style*="color:#1D4ED8"],
#leave-table [style*="color:#065F46"],
#leave-table [style*="color:#059669"],
#leave-table [style*="color:#6366F1"]{color:var(--ink)!important}
/* 설정 */
.set-g{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.set-c{background:var(--card);border:.5px solid var(--bd);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .25s var(--ease)}
.set-c:hover{box-shadow:var(--shadow-md)}
.set-h{background:var(--grad1);color:#fff;padding:14px 20px;font-size:13px;font-weight:500;letter-spacing:-.01em}
.set-b{padding:18px 20px}
.sr{display:flex;align-items:flex-start;justify-content:space-between;padding:13px 0;border-bottom:.5px solid #F5F5F7;gap:14px}
.sr:last-child{border-bottom:none;padding-bottom:0}
.sr:first-child{padding-top:0}
.sl{font-size:13px;color:var(--ink);font-weight:500;letter-spacing:-.01em}
.ss{font-size:11px;color:var(--ink3);margin-top:5px;line-height:1.6;letter-spacing:-.01em;font-weight:400}
.ss.warn{color:var(--rose);font-weight:500}
/* 토글 — iOS 스타일 */
.tgl{position:relative;width:42px;height:26px;cursor:pointer;flex-shrink:0;margin-top:2px}
.tgl input{opacity:0;width:0;height:0}
.ttr{position:absolute;inset:0;background:var(--bd2);border-radius:13px;transition:background .25s var(--ease)}
.tgl input:checked+.ttr{background:var(--green)}
.tth{position:absolute;top:2px;left:2px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform .25s var(--ease);box-shadow:0 2px 4px rgba(0,0,0,.15),0 2px 10px rgba(0,0,0,.06)}
.tgl input:checked~.tth{transform:translateX(16px)}
.tgl.dis{opacity:.3;pointer-events:none}
.ni{width:78px;padding:6px 10px;font-size:12.5px;border:.5px solid var(--bd2);border-radius:10px;background:#fff;color:var(--ink);font-family:inherit;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.ni:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.06)}
.si{padding:6px 10px;font-size:11.5px;border:.5px solid var(--bd2);border-radius:10px;background:#fff;color:var(--ink);font-family:inherit;cursor:pointer;font-weight:500;letter-spacing:-.01em}
.si:focus{outline:none;border-color:var(--ink)}
.rb-g{display:flex;gap:5px;flex-wrap:wrap}
.rb{padding:6px 14px;font-size:11.5px;border:.5px solid var(--bd2);border-radius:980px;cursor:pointer;background:#fff;color:var(--ink2);transition:all .22s var(--ease);font-weight:500;letter-spacing:-.01em}
.rb.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.aw{background:var(--surf);border:.5px solid var(--bd2);border-radius:12px;padding:12px 16px;font-size:11.5px;color:var(--ink2);margin-bottom:14px;display:flex;gap:8px;line-height:1.6;font-weight:400}
.info{background:var(--surf);border:.5px solid var(--bd);border-radius:10px;padding:10px 14px;font-size:10.5px;color:var(--ink2);margin-top:10px;line-height:1.7;font-weight:400}
.info.green,.info.amber{background:var(--surf);border-color:var(--bd);color:var(--ink2)}
.divider{height:.5px;background:var(--bd);margin:12px 0}
.mode-badge{display:inline-flex;padding:3px 10px;font-size:10px;border-radius:980px;font-weight:500;margin-left:8px;letter-spacing:-.01em;border:.5px solid var(--bd);background:var(--surf);color:var(--ink)}
.mode-fixed,.mode-daily,.mode-pohal{background:var(--surf);color:var(--ink);border:.5px solid var(--bd)}
/* 엑셀 */
.xl-wrap{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 260px);margin-top:14px;border:.5px solid var(--bd);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm);position:relative}
.xl-t{border-collapse:collapse;font-size:10px;white-space:nowrap;min-width:1400px}
.xl-t th{background:#FAFAFA;color:#1D1D1F;padding:8px 10px;text-align:center;border:.5px solid #E8E8ED;border-bottom:.5px solid #D2D2D7;font-weight:600;font-size:9.5px;position:sticky;top:0;z-index:4;letter-spacing:.02em}
.xl-t th.yw{background:#F5F5F7;color:#1D1D1F}
.xl-t td{padding:6px 9px;border:.5px solid var(--bd);text-align:center;font-variant-numeric:tabular-nums;color:var(--ink)}
.xl-t tr:nth-child(even) td{background:var(--surf)}
.xl-t td.nm{text-align:left;font-weight:500;background:var(--surf);position:sticky;left:0;z-index:2}
.xl-t td.num{text-align:right}
.xl-t td.yw-cell{background:var(--surf);color:var(--ink);font-weight:500}
/* 직책수당 */
.allowance-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surf);border:.5px solid var(--bd);border-radius:12px;margin-bottom:8px;transition:all .2s var(--ease)}
.allowance-item:hover{border-color:var(--bd2);background:#fff}
.allowance-name{flex:1;padding:6px 10px;font-size:12.5px;border:.5px solid var(--bd);border-radius:8px;background:#fff;color:var(--ink);font-family:inherit;font-weight:500;letter-spacing:-.01em}
.allowance-name:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.06)}
/* 외출 */
.out-btn{padding:5px 12px;font-size:10.5px;border:.5px solid var(--bd2);border-radius:980px;cursor:pointer;background:var(--card);color:var(--ink2);font-family:inherit;font-weight:500;transition:all .2s var(--ease);letter-spacing:-.01em}
.out-btn:hover{background:var(--surf);border-color:var(--ink2);color:var(--ink)}
.out-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}
.out-row{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.out-time{padding:5px 9px;font-size:11px;font-weight:500;border:.5px solid var(--bd2);border-radius:8px;background:#fff;color:var(--ink);font-family:inherit;text-align:center;width:72px;letter-spacing:.3px;font-variant-numeric:tabular-nums}
.out-time:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.06)}
.out-x{width:20px;height:20px;border:none;background:none;cursor:pointer;color:var(--ink3);font-size:14px;border-radius:50%;padding:0}
.out-x:hover{color:var(--rose);background:rgba(208,2,27,.08)}
/* 직원 배지 */
.emp-mode-badge{display:inline-flex;padding:2.5px 8px;font-size:9.5px;border-radius:980px;font-weight:500;margin-left:6px;letter-spacing:-.01em;border:.5px solid var(--bd);background:var(--surf);color:var(--ink)}
.emb-fixed,.emb-monthly,.emb-hourly,.emb-pohal{background:var(--surf);color:var(--ink);border:.5px solid var(--bd)}
/* 주/야간·내외국인 배지 */
.shift-btn{padding:5px 12px;font-size:10.5px;border:.5px solid var(--bd2);border-radius:980px;cursor:pointer;background:#fff;color:var(--ink2);font-family:inherit;font-weight:500;transition:all .22s var(--ease);letter-spacing:-.01em}
.shift-btn.day.on,.shift-btn.night.on{background:var(--ink);border-color:var(--ink);color:#fff}
.nation-btn{padding:5px 12px;font-size:10.5px;border:.5px solid var(--bd2);border-radius:980px;cursor:pointer;background:#fff;color:var(--ink2);font-family:inherit;font-weight:500;transition:all .22s var(--ease);letter-spacing:-.01em}
.nation-btn.local.on,.nation-btn.foreign.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* 포괄임금 */
.pohal-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surf);border:.5px solid var(--bd);border-radius:12px}
.pohal-label{font-size:10px;font-weight:500;color:var(--ink);background:#fff;padding:4px 10px;border-radius:980px;white-space:nowrap;border:.5px solid var(--bd);letter-spacing:-.01em}
.att-btn{padding:7px 16px;font-size:11.5px;border:.5px solid var(--bd2);border-radius:980px;cursor:pointer;background:#fff;color:var(--ink2);font-family:inherit;font-weight:500;transition:all .22s var(--ease);letter-spacing:-.01em}
.att-btn:hover{background:var(--surf);border-color:var(--ink2);color:var(--ink)}
.att-btn.on-work,.att-btn.on-annual{background:var(--green);border-color:var(--green);color:#fff}
.att-btn.on-absent{background:var(--rose);border-color:var(--rose);color:#fff}
/* 법정 모달 */
.law-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:saturate(180%) blur(10px)}
.law-modal{background:#fff;border-radius:22px;padding:34px 38px;max-width:580px;width:92%;box-shadow:var(--shadow-lg);max-height:88vh;overflow-y:auto}
.law-modal-title{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:6px;letter-spacing:-.03em}
.law-modal-sub{font-size:12px;color:var(--ink3);margin-bottom:22px;letter-spacing:-.01em}
.law-case{background:var(--surf);border:.5px solid var(--bd);border-radius:16px;padding:16px 18px;margin-bottom:12px}
.law-case-title{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:6px;letter-spacing:-.01em}
.law-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:.5px solid var(--bd);font-size:12.5px;letter-spacing:-.01em}
.law-row:last-child{border-bottom:none;font-weight:600;font-size:14px;padding-top:10px}
.law-tag{padding:3px 10px;border-radius:980px;font-size:10px;font-weight:500;background:#fff;color:var(--ink);border:.5px solid var(--bd)}
.law-result{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
/* 툴팁 */
.tip-wrap{display:inline-flex;align-items:center}
.tip-popup-bg{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;backdrop-filter:saturate(180%) blur(10px)}
.tip-popup{background:#fff;color:var(--ink);font-size:13px;line-height:1.75;padding:26px 28px;border-radius:22px;max-width:90vw;width:420px;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg);position:relative;white-space:normal;font-weight:400;animation:fadeIn .22s var(--ease);letter-spacing:-.01em}
.tip-popup-close{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--ink3);font-size:22px;cursor:pointer;line-height:1;padding:0;transition:color .15s}
.tip-popup-close:hover{color:var(--ink)}
.tip-wrap .tip-btn{pointer-events:all}
/* 안전교육 */
.sf-chip{padding:3.5px 10px;border-radius:980px;font-size:9.5px;border:.5px solid var(--bd2);background:var(--card);color:var(--ink2);cursor:pointer;transition:all .2s var(--ease);user-select:none;letter-spacing:-.01em;font-weight:500}
.sf-chip-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sf-fbtn{padding:5px 12px;border-radius:980px;font-size:10px;border:.5px solid var(--bd2);background:var(--card);color:var(--ink2);cursor:pointer;transition:all .2s var(--ease);font-weight:500;letter-spacing:-.01em}
.sf-fbtn-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sf-ni{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:10px;border:.5px solid var(--bd)}
.sf-ni-done{background:rgba(48,209,88,.06);border-color:rgba(48,209,88,.25)}
.sf-ni-wait{background:rgba(208,2,27,.04);border-color:rgba(208,2,27,.2)}
.sf-drop{border:1.5px dashed var(--bd2);border-radius:22px;background:var(--card);transition:all .25s var(--ease);cursor:pointer;position:relative;overflow:hidden}
.sf-drop.dragover{border-color:var(--ink);background:var(--surf);transform:scale(1.005);box-shadow:var(--shadow-md)}
.sf-drop-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:60px 28px;text-align:center}
/* 📁 드래그 영역 아이콘 — 휴대폰 이모지 숨기고 SVG */
#sf-drop-icon2{font-size:0!important;width:48px;height:48px;background:var(--ink3);-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;opacity:.5}
.sf-icon{font-size:48px;line-height:1;opacity:.6}
.sf-drop-t{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.sf-drop-s{font-size:12px;color:var(--ink3);letter-spacing:-.01em}
.sf-img-card{background:var(--card);border:.5px solid var(--bd);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column;transition:all .25s var(--ease)}
.sf-img-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.sf-img-card img{width:100%;height:auto;display:block;cursor:zoom-in;flex:1;object-fit:cover}
.sf-img-overlay{position:absolute;top:0;right:0;left:0;bottom:0;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding-bottom:12px;background:linear-gradient(transparent 55%,rgba(0,0,0,.55));opacity:0;transition:opacity .2s;pointer-events:none;border-radius:20px}
.sf-img-card:hover .sf-img-overlay{opacity:1;pointer-events:all}
.sf-del-btn,.sf-zoom-btn{padding:7px 13px;font-size:11px;background:rgba(255,255,255,.2);color:#fff;border:.5px solid rgba(255,255,255,.3);border-radius:980px;cursor:pointer;font-weight:500;backdrop-filter:blur(10px);letter-spacing:-.01em}
.sf-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;backdrop-filter:saturate(180%) blur(20px)}
.sf-lightbox img{max-width:92vw;max-height:92vh;border-radius:14px;box-shadow:0 30px 100px rgba(0,0,0,.5)}
.sf-date-badge{position:absolute;bottom:12px;left:12px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:4px 10px;border-radius:980px;font-weight:500;backdrop-filter:blur(10px);letter-spacing:-.01em}
.sf-count-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;border-radius:50%;width:20px;height:20px;font-size:10px;font-weight:600;margin-left:5px;font-variant-numeric:tabular-nums}
.sf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}
.sf-nav-badge{font-size:9px;background:var(--ink);color:#fff;border-radius:980px;padding:2px 7px;margin-left:4px;font-weight:500;letter-spacing:-.01em}
/* ══════════════════════════════════════════ */
/* 🔗 안전교육 링크 영역 — 카카오 노란 버튼 무채색 */
/* ══════════════════════════════════════════ */
/* 카카오 복사 버튼 — 노란색 덮어쓰고 애플 톤으로 */
button[onclick="sfCopyLink()"][style*="FEE500"],
button[onclick="sfCopyLink()"][style*="#FEE500"]{
background:var(--ink)!important;color:#fff!important;padding:10px 14px!important;
border-radius:12px!important;font-size:11px!important;font-weight:600!important;
align-self:stretch!important;display:flex!important;align-items:center!important;
justify-content:center!important;letter-spacing:-.01em!important;min-width:64px
}
button[onclick="sfCopyLink()"][style*="FEE500"]:hover,
button[onclick="sfCopyLink()"][style*="#FEE500"]:hover{background:#1D1D1F!important}
/* TBM 오버레이 */
#tbm-sign-overlay{display:none;position:fixed;inset:0;background:#F5F5F7;z-index:99999;overflow-y:auto}
#tbm-sign-overlay.show{display:block}
#tbm-sign-overlay .hdr{background:linear-gradient(180deg,#2E2E30,#3C3C40);padding:22px 24px 18px;text-align:center;position:relative}
#tbm-sign-overlay .hdr-logo{font-size:11px;font-weight:600;color:rgba(255,255,255,.45);margin-bottom:6px;letter-spacing:.3em}
#tbm-sign-overlay .hdr-title{font-size:22px;font-weight:600;color:#fff;margin-bottom:4px;letter-spacing:-.03em}
#tbm-sign-overlay .hdr-title-sub{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:14px;letter-spacing:-.01em}
#tbm-sign-overlay .hdr-date{display:inline-block;background:rgba(255,255,255,.1);color:#fff;padding:6px 18px;border-radius:980px;font-size:12px;font-weight:500;border:.5px solid rgba(255,255,255,.15);letter-spacing:-.01em}
#tbm-sign-overlay .lang-btn{position:absolute;top:18px;right:18px;display:flex;gap:6px}
#tbm-sign-overlay .lb{padding:5px 13px;border-radius:980px;font-size:11px;font-weight:500;cursor:pointer;border:.5px solid transparent;font-family:inherit;transition:all .2s var(--ease);letter-spacing:-.01em}
#tbm-sign-overlay .lb-ko{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
#tbm-sign-overlay .lb-en,#tbm-sign-overlay .lb.act{background:#fff;color:#2E2E30;border-color:#fff}
#tbm-sign-overlay .step-bar{background:#fff;border-bottom:.5px solid #E8E8ED;padding:14px 20px;display:flex;align-items:center;gap:0;justify-content:center}
#tbm-sign-overlay .step{display:flex;align-items:center;gap:7px}
#tbm-sign-overlay .step-num{width:24px;height:24px;border-radius:50%;background:#D2D2D7;color:#fff;font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s var(--ease)}
#tbm-sign-overlay .step-num.done-st{background:#30D158}
#tbm-sign-overlay .step-num.act-st{background:#2E2E30}
#tbm-sign-overlay .step-lbl{font-size:10.5px;color:#86868B;white-space:nowrap;font-weight:500;letter-spacing:-.01em}
#tbm-sign-overlay .step-lbl.act-st{color:#2E2E30;font-weight:600}
#tbm-sign-overlay .step-arr{color:#D2D2D7;font-size:12px;margin:0 10px}
#tbm-sign-overlay .tbm-wrap{max-width:480px;margin:0 auto;padding:18px 16px 44px}
#tbm-sign-overlay .card{background:#fff;border:.5px solid #E8E8ED;border-radius:18px;padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
#tbm-sign-overlay .ctit{font-size:11px;font-weight:600;color:#86868B;margin-bottom:12px;letter-spacing:.04em;text-transform:uppercase}
#tbm-sign-overlay .tbm-ko{font-size:14px;font-weight:500;color:#2E2E30;line-height:1.75;letter-spacing:-.01em}
#tbm-sign-overlay .tbm-en{font-size:12.5px;color:#424245;line-height:1.7;margin-top:10px;padding-top:10px;border-top:.5px dashed #E8E8ED;letter-spacing:-.01em}
#tbm-sign-overlay .tbm-en-lbl{font-size:10px;font-weight:600;color:#424245;margin-bottom:4px;letter-spacing:.04em;text-transform:uppercase}
#tbm-sign-overlay .srch-wrap{position:relative;margin-bottom:10px}
#tbm-sign-overlay .srch-inp{width:100%;padding:13px 15px 13px 42px;border:.5px solid #D2D2D7;border-radius:12px;font-size:14px;font-family:inherit;color:#2E2E30;outline:none;transition:all .2s var(--ease);background:#fff;letter-spacing:-.01em}
#tbm-sign-overlay .srch-inp:focus{border-color:#2E2E30;box-shadow:0 0 0 3px rgba(29,29,31,.06)}
#tbm-sign-overlay .srch-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:0;width:16px;height:16px;background:#86868B;-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,") no-repeat center/contain}
#tbm-sign-overlay .srch-clear{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:15px;color:#86868B;cursor:pointer;display:none}
#tbm-sign-overlay .filter-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
#tbm-sign-overlay .chip{padding:5px 12px;border-radius:980px;font-size:10.5px;border:.5px solid #D2D2D7;background:#fff;color:#86868B;cursor:pointer;transition:all .2s var(--ease);font-weight:500;letter-spacing:-.01em}
#tbm-sign-overlay .chip.on{background:#2E2E30;color:#fff;border-color:#2E2E30}
#tbm-sign-overlay .emp-list{display:flex;flex-direction:column;gap:7px;max-height:340px;overflow-y:auto}
#tbm-sign-overlay .emp-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:.5px solid #E8E8ED;border-radius:14px;cursor:pointer;transition:all .22s var(--ease);user-select:none}
#tbm-sign-overlay .emp-item:hover{border-color:#424245;background:#F5F5F7;transform:translateY(-1px);box-shadow:var(--shadow-md)}
#tbm-sign-overlay .emp-item.selected{border-color:#2E2E30;background:#F5F5F7;box-shadow:0 0 0 3px rgba(29,29,31,.06)}
#tbm-sign-overlay .emp-item.signed-done{background:rgba(48,209,88,.06);border-color:rgba(48,209,88,.3);cursor:default;opacity:.7}
#tbm-sign-overlay .emp-item.signed-done:hover{transform:none;box-shadow:none}
#tbm-sign-overlay .emp-avt{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0;letter-spacing:-.02em}
#tbm-sign-overlay .avt-n,#tbm-sign-overlay .avt-f{background:#F5F5F7;color:#2E2E30}
#tbm-sign-overlay .avt-sel{background:#2E2E30;color:#fff}
#tbm-sign-overlay .avt-done{background:#30D158;color:#fff}
#tbm-sign-overlay .emp-info{flex:1;min-width:0}
#tbm-sign-overlay .emp-nm{font-size:14px;font-weight:600;color:#2E2E30;letter-spacing:-.02em}
#tbm-sign-overlay .emp-nm-en{font-size:11px;color:#86868B;margin-top:1px;letter-spacing:-.01em}
#tbm-sign-overlay .emp-sub{font-size:10.5px;color:#86868B;margin-top:2px;letter-spacing:-.01em}
#tbm-sign-overlay .emp-sel-icon{font-size:22px;flex-shrink:0;color:#2E2E30}
#tbm-sign-overlay .done-badge{font-size:10px;font-weight:500;color:#30D158;background:#fff;border:.5px solid #30D158;padding:3px 10px;border-radius:980px;letter-spacing:-.01em}
#tbm-sign-overlay .empty-msg{text-align:center;padding:28px;color:#86868B;font-size:12.5px;letter-spacing:-.01em}
#tbm-sign-overlay .selected-name-box{background:#F5F5F7;border:.5px solid #E8E8ED;border-radius:14px;padding:16px 18px;margin-bottom:14px;text-align:center}
#tbm-sign-overlay .sel-nm-lbl{font-size:11px;color:#86868B;font-weight:500;margin-bottom:5px;letter-spacing:.04em;text-transform:uppercase}
#tbm-sign-overlay .sel-nm{font-size:22px;font-weight:600;color:#2E2E30;letter-spacing:-.03em}
#tbm-sign-overlay .sel-nm-en{font-size:14px;color:#86868B;margin-top:3px;letter-spacing:-.01em}
#tbm-sign-overlay .agree-list{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
#tbm-sign-overlay .agree-item{display:flex;align-items:flex-start;gap:14px;padding:15px 16px;background:#F5F5F7;border:.5px solid #E8E8ED;border-radius:13px;cursor:pointer;transition:all .2s var(--ease)}
#tbm-sign-overlay .agree-item:hover{border-color:#D2D2D7}
#tbm-sign-overlay .agree-item.checked{background:#fff;border-color:#30D158}
#tbm-sign-overlay .agree-chk{width:22px;height:22px;border:1.5px solid #D2D2D7;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:all .2s var(--ease);background:#fff}
#tbm-sign-overlay .agree-chk.on{background:#30D158;border-color:#30D158}
#tbm-sign-overlay .agree-chk.on::after{content:'✓';color:#fff;font-size:13px;font-weight:700}
#tbm-sign-overlay .agree-txt{flex:1}
#tbm-sign-overlay .agree-main{font-size:12.5px;font-weight:500;color:#2E2E30;line-height:1.55;letter-spacing:-.01em}
#tbm-sign-overlay .agree-sub{font-size:10.5px;color:#86868B;margin-top:4px;line-height:1.55;letter-spacing:-.01em}
#tbm-sign-overlay .agree-en{font-size:10.5px;color:#86868B;margin-top:2px;font-style:italic;letter-spacing:-.01em}
#tbm-sign-overlay .required-notice{font-size:10.5px;color:#D0021B;margin-bottom:12px;font-weight:500;letter-spacing:-.01em}
#tbm-sign-overlay .btn-submit{width:100%;padding:17px;background:#2E2E30;color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .22s var(--ease);letter-spacing:-.02em}
#tbm-sign-overlay .btn-submit:hover:not(:disabled){background:#1D1D1F;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.15)}
#tbm-sign-overlay .btn-submit:disabled{background:#D2D2D7;cursor:not-allowed;transform:none}
#tbm-sign-overlay .btn-submit.ready{background:#30D158}
#tbm-sign-overlay .btn-back{width:100%;padding:11px;background:transparent;color:#86868B;border:.5px solid #D2D2D7;border-radius:12px;font-size:13px;cursor:pointer;font-family:inherit;margin-top:10px;transition:all .2s var(--ease);letter-spacing:-.01em}
#tbm-sign-overlay .btn-back:hover{background:#F5F5F7;color:#2E2E30}
#tbm-sign-overlay .popup-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100000;align-items:center;justify-content:center;backdrop-filter:saturate(180%) blur(20px)}
#tbm-sign-overlay .popup-bg.show{display:flex}
#tbm-sign-overlay .popup-box{background:#fff;border-radius:26px;padding:40px 30px;text-align:center;max-width:340px;width:92%;box-shadow:0 30px 100px rgba(0,0,0,.3);animation:tbmPopIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes tbmPopIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
#tbm-sign-overlay .popup-icon{font-size:56px;margin-bottom:14px;display:block}
#tbm-sign-overlay .popup-title{font-size:22px;font-weight:600;color:#30D158;margin-bottom:4px;letter-spacing:-.03em}
#tbm-sign-overlay .popup-title-en{font-size:15px;color:#86868B;margin-bottom:18px;letter-spacing:-.01em}
#tbm-sign-overlay .popup-name{font-size:18px;font-weight:600;color:#2E2E30;margin-bottom:4px;letter-spacing:-.02em}
#tbm-sign-overlay .popup-time{font-size:13px;color:#86868B;margin-bottom:7px;letter-spacing:-.01em}
#tbm-sign-overlay .popup-legal{font-size:10.5px;color:#86868B;background:#F5F5F7;border-radius:10px;padding:10px 14px;margin:14px 0 22px;line-height:1.65;text-align:left;letter-spacing:-.01em}
#tbm-sign-overlay .popup-close{padding:14px 34px;background:#2E2E30;color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;width:100%;letter-spacing:-.01em;transition:all .22s var(--ease)}
#tbm-sign-overlay .popup-close:hover{background:#1D1D1F}
#tbm-sign-overlay .lang-en .ko-only{display:none!important}
#tbm-sign-overlay .lang-ko .en-only{display:none!important}
#tbm-sign-overlay .step-page{display:none}
#tbm-sign-overlay .step-page.on{display:block}
/* 안전교육 달력 */
.sf-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px}
.sf-cal-day{text-align:center;padding:5px 2px;font-size:9.5px;font-weight:500;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase}
.sf-cal-day.su{color:var(--rose)}.sf-cal-day.sa{color:var(--ink2)}
.sf-cal-cell{min-height:48px;border:.5px solid var(--bd);border-radius:10px;padding:5px 6px;cursor:pointer;transition:all .2s var(--ease);background:#fff}
.sf-cal-cell:hover{border-color:var(--ink2);background:var(--surf);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.sf-cal-cell.sf-has{background:var(--surf);border-color:var(--bd2)}
.sf-cal-cell.sf-today{border:1.5px solid var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.06)}
.sf-cal-cell.sf-empty{background:transparent;border-color:transparent;cursor:default;pointer-events:none}
.sf-cal-dn{font-size:10px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.sf-cal-dn.su{color:var(--rose)}.sf-cal-dn.sa{color:var(--ink2)}
.sf-cal-cnt{font-size:8.5px;font-weight:500;color:var(--ink2);margin-top:2px;letter-spacing:-.01em}
.sf-cal-dot{width:5px;height:5px;border-radius:50%;background:var(--ink);margin:3px auto 0}
/* ══ 모바일 반응형 ══ */
.mob-ham{display:none;align-items:center;justify-content:center;width:36px;height:36px;background:rgba(255,255,255,.08);border:none;border-radius:10px;cursor:pointer;flex-shrink:0;margin-right:8px}
.mob-ham-bar{display:block;width:18px;height:1.5px;background:#fff;border-radius:2px;position:relative}
.mob-ham-bar::before,.mob-ham-bar::after{content:'';position:absolute;left:0;width:18px;height:1.5px;background:#fff;border-radius:2px}
.mob-ham-bar::before{top:-5px}.mob-ham-bar::after{top:5px}
.mob-sb-dim{display:none;position:fixed;inset:0;top:54px;background:rgba(0,0,0,.3);z-index:199;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(4px)}
@media(max-width:768px){
.app{height:100dvh;max-height:100dvh}
.mob-ham{display:flex}
.nav{padding:0 8px;height:46px;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nb{margin-right:8px;flex-shrink:0}
.nb-ver{display:none}
.nt{padding:0 8px;font-size:11px;flex-shrink:0;height:46px}
.nt .tip-wrap{display:none}
.nsp{flex:0 0 4px}
.nxa{padding:4px 10px;font-size:10px;white-space:nowrap;flex-shrink:0}
.nav button[onclick*="authLogout"]{padding:4px 10px!important;font-size:10px!important;margin-right:4px!important;white-space:nowrap}
.sb{display:none;position:fixed;top:46px;left:0;bottom:0;z-index:200;width:224px;box-shadow:var(--shadow-lg);animation:mobSlideIn .25s var(--ease)}
.sb.mob-open{display:flex}
.sb-toggle{display:none}
.mob-sb-dim{top:46px}
.mob-sb-dim.on{display:block}
@keyframes mobSlideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.body{flex-direction:column}
.main{width:100%}
.pg.on{padding:0 10px 16px}
.ph{padding:14px 0 0;gap:8px;flex-direction:column}
.ph>div{width:100%}
.ph>div:last-child{display:flex;flex-wrap:wrap;gap:6px}
.pt{font-size:18px}
.pt .tip-wrap{display:none}
.sticky-hd{padding:0 10px}
.sticky-hd .ph{padding:10px 0 8px}
.dbar{margin-bottom:8px}
.dl{padding:4px 6px;font-size:8.5px}
.dv{padding:4px 7px;font-size:12px;min-width:24px}
.dar{padding:4px 5px;font-size:12px}
.btn{padding:6px 10px;font-size:10.5px}
.btn-sm{padding:5px 9px;font-size:10px}
.btn-xs{padding:4px 8px;font-size:9.5px}
.sg5,.sg4{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}
.sc{padding:10px 10px}
.sc-v{font-size:16px}
.sc-l{font-size:9px}
.bk-box{margin-bottom:8px}
.bk-body{padding:8px 10px;gap:5px}
.bk-hd{padding:8px 12px;font-size:11px}
.tw,.ov-w{border-radius:10px}
.et{min-width:480px}
.et thead th{padding:8px 4px;font-size:9.5px}
.et td{padding:6px 4px}
.time-inp{width:58px;padding:5px 3px;font-size:11px}
.note-inp{width:120px!important;min-width:0!important;max-width:200px!important;font-size:9.5px}
.td-w,.td-nt,.td-ot,.td-hol{min-width:40px;font-size:9.5px}
.et thead th:first-child,.et tbody td:first-child{display:none!important}
.et col:first-child{width:0!important}
.et thead th:nth-child(2){position:sticky!important;left:0!important;z-index:5!important;min-width:80px}
.td-nm{position:sticky!important;left:0!important;z-index:3!important;background:#fff!important}
.et tbody tr:hover .td-nm{background:var(--surf)!important}
.et tbody tr.ab-row .td-nm,.et tbody tr.hol-row .td-nm,.et tbody tr.al-row .td-nm{background:#FAFAFA!important}
.ov-t td.ec{position:sticky;left:0;z-index:2;background:var(--surf);min-width:70px}
.pg2{grid-template-columns:1fr;gap:10px}
#pay-total{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;padding:10px 12px!important}
.xl-wrap{border-radius:10px}
.xl-t{min-width:800px}
.cgrid{gap:2px}
.cdc{min-height:42px;padding:3px;border-radius:7px}
.cdn{font-size:8px}.cwk{font-size:7px}.cti{font-size:7px}
.cdh{font-size:9px;padding:4px 0}
#leave-table{min-width:700px!important}
#leave-table th,#leave-table td{padding:7px 5px!important;font-size:10.5px!important}
#leave-table thead th:first-child{position:sticky!important;left:0!important;z-index:11!important;background:#FAFAFA!important}
#leave-table tbody td:first-child{position:sticky!important;left:0!important;z-index:3!important;background:#fff!important}
.set-g{grid-template-columns:1fr;gap:10px}
.sr{flex-wrap:wrap}
.ni{width:60px}
.emt{table-layout:auto}
.emt th,.emt td{font-size:10.5px;padding:6px 4px}
.ei2{padding:4px 5px;font-size:10.5px}
.emt thead th:nth-child(1),.emt tbody td:nth-child(1){display:none!important}
.emt thead th:nth-child(2),.emt tbody td:nth-child(2){display:none!important}
.emt thead th:nth-child(3){position:sticky!important;left:0!important;z-index:3!important;background:#FAFAFA!important;min-width:80px!important;width:80px!important}
.emt tbody td:nth-child(3){position:sticky!important;left:0!important;z-index:2!important;background:#fff!important;min-width:80px!important}
.emt thead th:nth-child(4){position:sticky!important;left:80px!important;z-index:3!important;background:#FAFAFA!important;min-width:60px!important;border-right:.5px solid #D2D2D7!important}
.emt tbody td:nth-child(4){position:sticky!important;left:80px!important;z-index:2!important;background:#fff!important;border-right:1px solid var(--bd)!important}
.emt tbody tr:hover td:nth-child(3),.emt tbody tr:hover td:nth-child(4){background:var(--surf)!important}
.emt th,.emt td{min-width:60px!important;white-space:nowrap!important}
.emt thead th:nth-child(5){min-width:60px!important}
.emt thead th:nth-child(6){min-width:56px!important}
.emt thead th:nth-child(7){min-width:60px!important}
.emt thead th:nth-child(8){min-width:80px!important}
.emt thead th:nth-child(11){min-width:76px!important}
.emt thead th:nth-child(13){min-width:110px!important}
.emt thead th:nth-child(14){min-width:130px!important}
.ei2{min-width:50px!important}
.shift-list-header,.shift-emp-row{grid-template-columns:28px 80px 1fr 56px 70px 50px 1fr 60px!important;font-size:10.5px!important;padding:7px 9px!important}
#shift-modal>div:first-child{width:calc(100vw - 20px)!important;max-width:480px!important}
#sf-page-daily{flex-direction:column!important;gap:12px!important}
#sf-sidebar{width:100%!important;flex-shrink:1!important}
.sf-grid{grid-template-columns:1fr;gap:10px}
.sf-drop-inner{padding:28px 14px;gap:10px}
.sf-icon{font-size:34px}
.mi-wrap{grid-template-columns:1fr!important;gap:14px!important;padding:14px!important}
.law-modal{width:96%;padding:20px 18px;border-radius:18px}
.tip-popup{width:94%;max-width:340px;padding:20px 18px;border-radius:18px}
.pf-bar{flex-wrap:wrap;gap:4px}
[style*="display:flex"][style*="gap:6px"]{flex-wrap:wrap!important}
[style*="display:grid"][style*="repeat(6"]{grid-template-columns:repeat(3,1fr)!important}
[style*="display:grid"][style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:480px){
.sg5,.sg4{grid-template-columns:1fr}
.nt{padding:0 6px;font-size:10.5px}
.nb svg{width:60px;height:15px}
.et{min-width:400px}
.cdc{min-height:36px}
#pay-total{grid-template-columns:repeat(2,1fr)!important}
.shift-list-header,.shift-emp-row{grid-template-columns:28px 1fr 56px 60px 1fr 52px!important}
.shift-list-header>div:nth-child(2),.shift-emp-row>div:nth-child(2){display:none!important}
.shift-list-header>div:nth-child(6),.shift-emp-row>div:nth-child(6){display:none!important}
#leave-table{min-width:580px!important}
}
/* ═══════════════════════════════════════════════════════════════════
nopro 랜딩페이지 CSS — flex.team inspired · Apple Monochrome
기존 app.css의 랜딩 스코프(#landing-overlay)를 통째로 교체
═══════════════════════════════════════════════════════════════════ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
#landing-overlay{
font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'SF Pro KR','Apple SD Gothic Neo',sans-serif;
color:#1D1D1F;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.65;
letter-spacing:-.01em;
}
#landing-overlay *,
#landing-overlay *::before,
#landing-overlay *::after{box-sizing:border-box;margin:0;padding:0}
#landing-overlay{
--lp-primary:#1D1D1F;
--lp-primary-dark:#000000;
--lp-bg:#FFFFFF;
--lp-bg-soft:#F5F5F7;
--lp-bg-muted:#FAFAFC;
--lp-ink:#1D1D1F;
--lp-ink-2:#424245;
--lp-ink-3:#86868B;
--lp-line:#E8E8ED;
--lp-line-2:#D2D2D7;
--lp-shadow-sm:0 1px 2px rgba(0,0,0,.04);
--lp-shadow:0 4px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
--lp-shadow-lg:0 24px 60px -12px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.04);
--lp-ease:cubic-bezier(.25,.1,.25,1);
--lp-ease-out:cubic-bezier(.16,1,.3,1);
}
#landing-overlay a{color:inherit;text-decoration:none}
#landing-overlay button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
#landing-overlay img{max-width:100%;display:block}
#landing-overlay ul{list-style:none}
#landing-overlay .wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media (max-width:640px){#landing-overlay .wrap{padding:0 20px}}
/* ─── Navigation ─── */
#landing-overlay .lp-nav{
position:sticky;top:0;z-index:100;
background:rgba(255,255,255,.72);
backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);
border-bottom:.5px solid var(--lp-line);
padding:14px 0;
}
#landing-overlay .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
#landing-overlay .logo{
font-size:22px;font-weight:600;
letter-spacing:-.035em;
color:var(--lp-primary);
cursor:pointer;
}
#landing-overlay .nav-links{display:flex;gap:32px;font-size:13.5px;color:var(--lp-ink-2);font-weight:500;letter-spacing:-.01em}
#landing-overlay .nav-links a{transition:color .2s var(--lp-ease);cursor:pointer}
#landing-overlay .nav-links a:hover{color:var(--lp-primary)}
#landing-overlay .nav-cta{display:flex;gap:8px;align-items:center}
/* ─── Buttons ─── */
#landing-overlay .btn{
display:inline-flex;align-items:center;gap:6px;
padding:10px 20px;
border-radius:980px;
font-size:13.5px;font-weight:500;
transition:all .22s var(--lp-ease);
letter-spacing:-.01em;
white-space:nowrap;cursor:pointer;
line-height:1;
}
#landing-overlay .btn-ghost{color:var(--lp-ink-2)}
#landing-overlay .btn-ghost:hover{color:var(--lp-primary);background:var(--lp-bg-soft)}
#landing-overlay .btn-primary{
background:var(--lp-primary);color:#fff;
box-shadow:0 1px 2px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.08);
}
#landing-overlay .btn-primary:hover{
background:#000;
transform:translateY(-1px);
box-shadow:0 2px 6px rgba(0,0,0,.2), 0 8px 20px rgba(0,0,0,.12);
}
#landing-overlay .btn-outline{
border:.5px solid var(--lp-line-2);color:var(--lp-primary);
background:#fff;
box-shadow:var(--lp-shadow-sm);
}
#landing-overlay .btn-outline:hover{
background:var(--lp-primary);color:#fff;border-color:var(--lp-primary);
transform:translateY(-1px);
}
#landing-overlay .btn-lg{padding:15px 28px;font-size:15px}
@media (max-width:900px){#landing-overlay .nav-links{display:none}}
@media (max-width:480px){
#landing-overlay .nav-cta .btn-ghost{display:none}
}
/* ─── Hero ─── */
#landing-overlay .hero{
padding:120px 0 110px;
background:linear-gradient(180deg,#FAFAFC 0%,#FFFFFF 100%);
position:relative;overflow:hidden;
}
#landing-overlay .hero::before{
content:'';position:absolute;
top:-350px;right:-250px;
width:800px;height:800px;
background:radial-gradient(circle,rgba(29,29,31,.04),transparent 65%);
border-radius:50%;pointer-events:none;
}
#landing-overlay .hero-inner{text-align:center;position:relative;z-index:1}
#landing-overlay .hero-tag{
display:inline-block;
font-size:12.5px;font-weight:500;
color:var(--lp-ink-2);
background:#fff;
padding:7px 16px;
border-radius:980px;
margin-bottom:32px;
border:.5px solid var(--lp-line);
letter-spacing:.02em;
box-shadow:var(--lp-shadow-sm);
}
#landing-overlay .hero h1{
font-size:clamp(40px,6vw,68px);
line-height:1.08;
letter-spacing:-.045em;
font-weight:700;
margin-bottom:28px;
color:var(--lp-ink);
}
#landing-overlay .hero h1 .highlight{color:var(--lp-primary)}
#landing-overlay .hero-sub{
font-size:19px;
color:var(--lp-ink-2);
margin-bottom:44px;
font-weight:400;
letter-spacing:-.015em;
line-height:1.55;
max-width:640px;
margin-left:auto;margin-right:auto;
}
#landing-overlay .hero-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
#landing-overlay .hero-note{
font-size:12.5px;
color:var(--lp-ink-3);
letter-spacing:-.01em;
}
@media (max-width:640px){
#landing-overlay .hero{padding:64px 0 60px}
#landing-overlay .hero-sub{font-size:15.5px;margin-bottom:32px}
}
/* ─── Stats ─── */
#landing-overlay .stats{
padding:80px 0;
background:var(--lp-primary);
color:#fff;
}
#landing-overlay .stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:32px;text-align:center;
}
#landing-overlay .stat-num{
font-size:56px;font-weight:600;
letter-spacing:-.045em;
line-height:1;margin-bottom:10px;
font-variant-numeric:tabular-nums;
}
#landing-overlay .stat-label{
font-size:13.5px;
opacity:.7;font-weight:400;
letter-spacing:-.01em;
}
@media (max-width:640px){
#landing-overlay .stats{padding:56px 0}
#landing-overlay .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px}
#landing-overlay .stat-num{font-size:42px}
}
/* ─── Section heads (공통) ─── */
#landing-overlay .section-head{text-align:center;margin-bottom:64px;max-width:720px;margin-left:auto;margin-right:auto}
#landing-overlay .section-label{
display:inline-block;
font-size:12px;font-weight:500;
color:var(--lp-ink-2);
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:20px;
}
#landing-overlay .section-title{
font-size:clamp(32px,4.2vw,46px);
font-weight:600;
letter-spacing:-.04em;
line-height:1.15;
margin-bottom:20px;
color:var(--lp-ink);
}
#landing-overlay .section-desc{
font-size:17px;
color:var(--lp-ink-2);
letter-spacing:-.01em;
line-height:1.6;
font-weight:400;
}
/* ─── WHY ─── */
#landing-overlay .why{padding:140px 0;background:#fff}
#landing-overlay .why-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
#landing-overlay .why-card{
background:#fff;
border:.5px solid var(--lp-line);
border-radius:22px;
padding:40px 32px 36px;
transition:all .28s var(--lp-ease);
box-shadow:var(--lp-shadow-sm);
min-height:280px;
display:flex;flex-direction:column;
}
#landing-overlay .why-card:hover{
border-color:var(--lp-line-2);
box-shadow:var(--lp-shadow);
transform:translateY(-3px);
}
#landing-overlay .why-card.highlight{
background:var(--lp-primary);
color:#fff;
border-color:var(--lp-primary);
}
#landing-overlay .why-card.highlight .why-num{color:rgba(255,255,255,.35)}
#landing-overlay .why-card.highlight p{color:rgba(255,255,255,.7)}
#landing-overlay .why-num{
font-size:13px;font-weight:500;
color:var(--lp-ink-3);
letter-spacing:.08em;
margin-bottom:24px;
font-variant-numeric:tabular-nums;
}
#landing-overlay .why-card h3{
font-size:22px;font-weight:600;
letter-spacing:-.03em;
line-height:1.3;
margin-bottom:16px;
}
#landing-overlay .why-card p{
font-size:14.5px;
color:var(--lp-ink-2);
line-height:1.7;
letter-spacing:-.01em;
font-weight:400;
}
@media (max-width:900px){
#landing-overlay .why{padding:80px 0}
#landing-overlay .why-grid{grid-template-columns:1fr;gap:12px}
#landing-overlay .why-card{min-height:auto;padding:32px 26px}
}
/* ─── FEATURES (Pillars) ─── */
#landing-overlay .features{padding:140px 0;background:var(--lp-bg-soft)}
#landing-overlay .pillars{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
#landing-overlay .pillar{
background:#fff;
border:.5px solid var(--lp-line);
border-radius:22px;
padding:36px 32px;
transition:all .28s var(--lp-ease);
display:flex;flex-direction:column;
}
#landing-overlay .pillar:hover{
border-color:var(--lp-line-2);
box-shadow:var(--lp-shadow);
transform:translateY(-3px);
}
#landing-overlay .pillar-tag{
display:inline-block;
font-size:11.5px;font-weight:500;
color:var(--lp-ink-2);
background:var(--lp-bg-soft);
padding:5px 12px;
border-radius:980px;
border:.5px solid var(--lp-line);
letter-spacing:.02em;
margin-bottom:20px;
align-self:flex-start;
}
#landing-overlay .pillar h3{
font-size:24px;font-weight:600;
letter-spacing:-.03em;
line-height:1.25;
margin-bottom:14px;
}
#landing-overlay .pillar p{
font-size:14.5px;
color:var(--lp-ink-2);
line-height:1.65;
margin-bottom:24px;
letter-spacing:-.01em;
}
#landing-overlay .pillar ul{
display:flex;flex-direction:column;gap:10px;
padding-top:24px;
border-top:.5px solid var(--lp-line);
margin-top:auto;
}
#landing-overlay .pillar li{
font-size:13.5px;
color:var(--lp-ink-2);
letter-spacing:-.01em;
padding-left:18px;
position:relative;
line-height:1.5;
}
#landing-overlay .pillar li::before{
content:'';
position:absolute;
left:0;top:9px;
width:4px;height:4px;
border-radius:50%;
background:var(--lp-ink);
}
@media (max-width:900px){
#landing-overlay .features{padding:80px 0}
#landing-overlay .pillars{grid-template-columns:1fr;gap:12px}
}
/* ─── SHOWCASE ─── */
#landing-overlay .showcase{padding:140px 0;background:#fff}
#landing-overlay .showcase-tabs{
display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
margin-bottom:40px;
}
#landing-overlay .showcase-tab{
padding:10px 18px;
border-radius:980px;
background:#fff;
border:.5px solid var(--lp-line);
font-size:13.5px;font-weight:500;
color:var(--lp-ink-2);
cursor:pointer;
transition:all .22s var(--lp-ease);
letter-spacing:-.01em;
}
#landing-overlay .showcase-tab:hover{
border-color:var(--lp-line-2);
color:var(--lp-primary);
}
#landing-overlay .showcase-tab.active{
background:var(--lp-primary);color:#fff;
border-color:var(--lp-primary);
}
#landing-overlay .showcase-frame{
background:#fff;
border:.5px solid var(--lp-line);
border-radius:20px;
box-shadow:var(--lp-shadow-lg);
overflow:hidden;
max-width:1100px;
margin:0 auto;
}
#landing-overlay .showcase-bar{
background:var(--lp-bg-soft);
border-bottom:.5px solid var(--lp-line);
padding:12px 18px;
display:flex;align-items:center;gap:12px;
font-size:12px;color:var(--lp-ink-3);
letter-spacing:-.01em;
}
#landing-overlay .showcase-dots{display:flex;gap:6px}
#landing-overlay .showcase-dots span{width:11px;height:11px;border-radius:50%}
#landing-overlay .showcase-dots span:nth-child(1){background:#FF5F57}
#landing-overlay .showcase-dots span:nth-child(2){background:#FEBC2E}
#landing-overlay .showcase-dots span:nth-child(3){background:#28C840}
#landing-overlay .showcase-body{background:#fff;overflow:hidden}
#landing-overlay .showcase-body img{width:100%;height:auto;display:block}
#landing-overlay .showcase-caption{
margin:28px auto 0;
padding:24px 28px;
background:var(--lp-bg-soft);
border:.5px solid var(--lp-line);
border-radius:18px;
text-align:center;
max-width:640px;
}
#landing-overlay .showcase-caption h4{
font-size:18px;font-weight:600;
margin-bottom:8px;
letter-spacing:-.02em;
}
#landing-overlay .showcase-caption p{
font-size:14.5px;
color:var(--lp-ink-2);
letter-spacing:-.01em;
line-height:1.6;
}
@media (max-width:640px){
#landing-overlay .showcase{padding:80px 0}
}
/* ─── HOW ─── */
#landing-overlay .how{padding:140px 0;background:var(--lp-bg-soft)}
#landing-overlay .how-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
#landing-overlay .how-step{
background:#fff;
border:.5px solid var(--lp-line);
border-radius:22px;
padding:40px 32px;
text-align:left;
transition:all .28s var(--lp-ease);
}
#landing-overlay .how-step:hover{
border-color:var(--lp-line-2);
transform:translateY(-3px);
box-shadow:var(--lp-shadow);
}
#landing-overlay .how-num{
font-size:13px;font-weight:500;
color:var(--lp-ink-3);
letter-spacing:.08em;
margin-bottom:28px;
font-variant-numeric:tabular-nums;
}
#landing-overlay .how-step h3{
font-size:20px;font-weight:600;
letter-spacing:-.03em;
line-height:1.3;
margin-bottom:12px;
}
#landing-overlay .how-step p{
font-size:14.5px;
color:var(--lp-ink-2);
line-height:1.65;
letter-spacing:-.01em;
}
@media (max-width:900px){
#landing-overlay .how{padding:80px 0}
#landing-overlay .how-grid{grid-template-columns:1fr;gap:12px}
}
/* ─── COMPARE ─── */
#landing-overlay .compare{padding:140px 0;background:#fff}
#landing-overlay .compare-table{
background:#fff;
border:.5px solid var(--lp-line);
border-radius:20px;
overflow:hidden;
box-shadow:var(--lp-shadow-sm);
max-width:1000px;
margin:0 auto;
}
#landing-overlay .compare-table table{width:100%;border-collapse:collapse}
#landing-overlay .compare-table th,
#landing-overlay .compare-table td{
padding:18px 22px;
text-align:center;
border-bottom:.5px solid var(--lp-line);
font-size:14px;
letter-spacing:-.01em;
}
#landing-overlay .compare-table th{
background:var(--lp-bg-soft);
font-weight:500;font-size:12.5px;
color:var(--lp-ink-2);
letter-spacing:.04em;
text-transform:uppercase;
}
#landing-overlay .compare-table th.hot{
background:var(--lp-primary);color:#fff;
font-size:13px;font-weight:600;
}
#landing-overlay .compare-table td:first-child,
#landing-overlay .compare-table th:first-child{
text-align:left;font-weight:500;
}
#landing-overlay .compare-table td.on{color:var(--lp-primary);font-weight:600}
#landing-overlay .compare-table td.mid{color:var(--lp-ink-2);font-weight:500}
#landing-overlay .compare-table td.off{color:var(--lp-ink-3);font-weight:400}
#landing-overlay .compare-table td.hot{background:var(--lp-bg-muted)}
#landing-overlay .compare-table tr:last-child td{border-bottom:none}
@media (max-width:700px){
#landing-overlay .compare{padding:80px 0}
#landing-overlay .compare-table th,
#landing-overlay .compare-table td{padding:14px 10px;font-size:12px}
}
/* ─── PRICING ─── */
#landing-overlay .pricing{padding:140px 0;background:var(--lp-bg-soft)}
#landing-overlay .pricing-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:14px;
}
#landing-overlay .price-card{
background:#fff;
border:.5px solid var(--lp-line);
border-radius:22px;
padding:32px 24px;
display:flex;flex-direction:column;
transition:all .28s var(--lp-ease);
position:relative;
}
#landing-overlay .price-card:hover{
border-color:var(--lp-line-2);
box-shadow:var(--lp-shadow);
transform:translateY(-4px);
}
#landing-overlay .price-card.featured{
border-color:var(--lp-primary);
background:var(--lp-primary);
color:#fff;
box-shadow:var(--lp-shadow);
}
#landing-overlay .price-card.featured .price-tier{color:#fff}
#landing-overlay .price-card.featured .price-size{color:rgba(255,255,255,.6)}
#landing-overlay .price-card.featured .price-amount .num{color:#fff}
#landing-overlay .price-card.featured .price-period{color:rgba(255,255,255,.6)}
#landing-overlay .price-card.featured .price-features li{color:rgba(255,255,255,.75)}
#landing-overlay .price-card.featured .price-features li::before{color:#fff}
#landing-overlay .price-card.featured .price-cta{
background:#fff;color:var(--lp-primary);
border-color:#fff;
}
#landing-overlay .price-card.featured .price-cta:hover{
background:var(--lp-bg-soft);
}
#landing-overlay .price-badge{
position:absolute;top:-13px;left:50%;
transform:translateX(-50%);
background:var(--lp-primary);color:#fff;
font-size:11px;font-weight:500;
padding:5px 14px;
border-radius:980px;
letter-spacing:-.01em;
border:.5px solid var(--lp-primary);
box-shadow:0 4px 12px rgba(0,0,0,.12);
}
#landing-overlay .price-card.featured .price-badge{
background:#fff;color:var(--lp-primary);
border-color:#fff;
}
#landing-overlay .price-tier{
font-size:14px;font-weight:600;
color:var(--lp-primary);
margin-bottom:4px;
letter-spacing:-.02em;
}
#landing-overlay .price-size{
font-size:12.5px;
color:var(--lp-ink-3);
margin-bottom:24px;
font-weight:400;
letter-spacing:-.01em;
}
#landing-overlay .price-amount{
display:flex;align-items:baseline;gap:3px;
margin-bottom:6px;
}
#landing-overlay .price-amount .num{
font-size:30px;font-weight:600;
letter-spacing:-.045em;
line-height:1;
color:var(--lp-ink);
font-variant-numeric:tabular-nums;
}
#landing-overlay .price-period{
font-size:11.5px;
color:var(--lp-ink-3);
margin-bottom:24px;
letter-spacing:-.01em;
}
#landing-overlay .price-features{
display:flex;flex-direction:column;gap:10px;
margin-bottom:24px;
flex:1;
padding-top:20px;
border-top:.5px solid var(--lp-line);
}
#landing-overlay .price-card.featured .price-features{
border-top-color:rgba(255,255,255,.15);
}
#landing-overlay .price-features li{
font-size:13px;
color:var(--lp-ink-2);
padding-left:20px;
position:relative;
line-height:1.5;
letter-spacing:-.01em;
}
#landing-overlay .price-features li::before{
content:'\2713';
position:absolute;left:0;
color:var(--lp-primary);
font-weight:600;
font-size:12px;
}
#landing-overlay .price-cta{
padding:12px;
border-radius:980px;
border:.5px solid var(--lp-line-2);
font-size:13px;font-weight:500;
color:var(--lp-primary);
background:#fff;
text-align:center;
transition:all .22s var(--lp-ease);
cursor:pointer;width:100%;
letter-spacing:-.01em;
}
#landing-overlay .price-cta:hover{
border-color:var(--lp-primary);
background:var(--lp-primary);color:#fff;
}
#landing-overlay .price-enterprise{
margin-top:24px;
background:#fff;
border:.5px solid var(--lp-line);
border-radius:22px;
padding:28px 36px;
display:flex;justify-content:space-between;
align-items:center;gap:32px;flex-wrap:wrap;
transition:all .28s var(--lp-ease);
}
#landing-overlay .price-enterprise:hover{
border-color:var(--lp-line-2);
box-shadow:var(--lp-shadow);
}
#landing-overlay .pe-left{display:flex;gap:36px;align-items:center;flex-wrap:wrap}
#landing-overlay .pe-info .price-tier{margin-bottom:4px}
#landing-overlay .pe-info .price-size{margin-bottom:0}
#landing-overlay .pe-price{
font-size:20px;font-weight:600;
color:var(--lp-ink);
letter-spacing:-.03em;
}
#landing-overlay .pe-desc{
font-size:13.5px;
color:var(--lp-ink-2);
max-width:380px;
letter-spacing:-.01em;
line-height:1.55;
}
#landing-overlay .pricing-note{
margin-top:24px;
text-align:center;
font-size:13px;
color:var(--lp-ink-3);
letter-spacing:-.01em;
}
@media (max-width:1000px){
#landing-overlay .pricing-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:500px){
#landing-overlay .pricing{padding:80px 0}
#landing-overlay .pricing-grid{grid-template-columns:1fr}
}
/* ─── FAQ ─── */
#landing-overlay .faq{padding:140px 0;background:#fff}
#landing-overlay .faq-list{max-width:820px;margin:0 auto}
#landing-overlay .faq-item{border-bottom:.5px solid var(--lp-line)}
#landing-overlay .faq-q{
width:100%;padding:26px 0;
display:flex;justify-content:space-between;align-items:center;gap:20px;
font-size:17px;font-weight:500;
text-align:left;
color:var(--lp-ink);
transition:color .2s var(--lp-ease);
cursor:pointer;
letter-spacing:-.02em;
}
#landing-overlay .faq-q:hover{color:var(--lp-ink-2)}
#landing-overlay .faq-toggle{
flex-shrink:0;
width:28px;height:28px;
border-radius:50%;
background:#fff;
border:.5px solid var(--lp-line);
display:flex;align-items:center;justify-content:center;
font-size:15px;font-weight:400;
color:var(--lp-primary);
transition:all .3s var(--lp-ease);
}
#landing-overlay .faq-item.open .faq-toggle{
transform:rotate(45deg);
background:var(--lp-primary);color:#fff;
border-color:var(--lp-primary);
}
#landing-overlay .faq-a{
max-height:0;overflow:hidden;
transition:max-height .4s var(--lp-ease),padding .3s;
color:var(--lp-ink-2);
font-size:15px;
line-height:1.75;
letter-spacing:-.01em;
}
#landing-overlay .faq-item.open .faq-a{
max-height:320px;
padding:0 0 26px;
}
@media (max-width:640px){
#landing-overlay .faq{padding:80px 0}
#landing-overlay .faq-q{font-size:15px;padding:22px 0}
#landing-overlay .faq-a{font-size:14px}
}
/* ─── CTA ─── */
#landing-overlay .lp-cta{
padding:140px 0;
background:var(--lp-primary);
color:#fff;
text-align:center;
position:relative;overflow:hidden;
}
#landing-overlay .lp-cta::before{
content:'';position:absolute;inset:0;
background:radial-gradient(900px 450px at 50% 100%,rgba(255,255,255,.06),transparent 70%);
}
#landing-overlay .cta-inner{position:relative;z-index:1}
#landing-overlay .lp-cta h2{
font-size:clamp(32px,4.2vw,48px);
font-weight:600;
letter-spacing:-.04em;
margin-bottom:20px;
line-height:1.15;
}
#landing-overlay .lp-cta p{
font-size:17px;
margin-bottom:40px;
opacity:.75;
letter-spacing:-.01em;
font-weight:400;
line-height:1.55;
}
#landing-overlay .lp-cta .btn-primary{
background:#fff;color:var(--lp-primary);
}
#landing-overlay .lp-cta .btn-primary:hover{
background:var(--lp-bg-soft);
}
#landing-overlay .cta-contact{
margin-top:48px;padding-top:32px;
border-top:.5px solid rgba(255,255,255,.12);
font-size:14px;opacity:.75;
display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center;
letter-spacing:-.01em;
}
#landing-overlay .cta-contact a{
color:#fff;text-decoration:none;
border-bottom:.5px solid rgba(255,255,255,.3);
transition:border-color .2s;
padding-bottom:1px;
}
#landing-overlay .cta-contact a:hover{border-bottom-color:#fff}
#landing-overlay .cta-contact .sep{opacity:.4}
@media (max-width:640px){
#landing-overlay .lp-cta{padding:80px 0}
}
/* ─── Footer ─── */
#landing-overlay .lp-footer{
padding:80px 0 40px;
background:#fff;
border-top:.5px solid var(--lp-line);
}
#landing-overlay .footer-grid{
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1fr;
gap:48px;
margin-bottom:52px;
}
#landing-overlay .foot-about .logo{margin-bottom:16px;display:inline-block}
#landing-overlay .foot-tag{
font-size:14px;
color:var(--lp-ink-2);
line-height:1.7;
max-width:340px;
letter-spacing:-.01em;
}
#landing-overlay .foot-col h4{
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--lp-ink);
margin-bottom:20px;
font-weight:500;
}
#landing-overlay .foot-col ul{display:flex;flex-direction:column;gap:12px}
#landing-overlay .foot-col a{
font-size:13.5px;
color:var(--lp-ink-2);
transition:color .2s var(--lp-ease);
cursor:pointer;
letter-spacing:-.01em;
}
#landing-overlay .foot-col a:hover{color:var(--lp-primary)}
#landing-overlay .foot-col li{
font-size:13.5px;
color:var(--lp-ink-2);
letter-spacing:-.01em;
}
#landing-overlay .foot-bottom{
padding-top:28px;
border-top:.5px solid var(--lp-line);
font-size:12px;
color:var(--lp-ink-3);
text-align:center;
letter-spacing:-.01em;
}
@media (max-width:800px){
#landing-overlay .lp-footer{padding:60px 0 30px}
#landing-overlay .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:480px){
#landing-overlay .footer-grid{grid-template-columns:1fr;gap:32px}
}
/* ─── Reveal animation ─── */
#landing-overlay .reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .8s var(--lp-ease-out),transform .8s var(--lp-ease-out);
}
#landing-overlay .reveal.in{opacity:1;transform:none}
/* ══ 블록 3 — 인증 오버레이 (Apple Monochrome Dark) ══ */
.auth-input{
width:100%;padding:14px 15px;
border-radius:12px;
background:rgba(255,255,255,.05);
border:.5px solid rgba(255,255,255,.1);
color:#F5F5F7;
font-size:13.5px;font-weight:400;
font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
outline:none;
transition:all .2s cubic-bezier(.25,.1,.25,1);
-webkit-appearance:none;
letter-spacing:-.01em;
}
.auth-input:hover{
border-color:rgba(255,255,255,.18);
background:rgba(255,255,255,.06);
}
.auth-input:focus{
border-color:rgba(255,255,255,.4);
background:rgba(255,255,255,.08);
box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
.auth-input::placeholder{color:rgba(245,245,247,.3);font-weight:400}
.auth-label{
display:block;
font-size:11px;font-weight:500;
color:rgba(245,245,247,.5);
margin-bottom:8px;
letter-spacing:.06em;
text-transform:uppercase;
font-family:'Pretendard Variable','Pretendard',-apple-system,sans-serif;
}
.auth-btn-p{
width:100%;padding:14px;
border-radius:12px;border:none;
background:#fff;
color:#1D1D1F;
font-size:14.5px;font-weight:600;
cursor:pointer;
font-family:'Pretendard Variable','Pretendard',-apple-system,sans-serif;
transition:all .22s cubic-bezier(.25,.1,.25,1);
letter-spacing:-.02em;
box-shadow:0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(255,255,255,.08);
}
.auth-btn-p:hover{
transform:translateY(-1px);
background:#F5F5F7;
box-shadow:0 4px 12px rgba(0,0,0,.25), 0 8px 24px rgba(255,255,255,.12);
}
.auth-btn-p:active{
transform:translateY(0);
transition-duration:.1s;
}
.auth-btn-p:disabled{
opacity:.45;
transform:none;cursor:not-allowed;
}
.auth-select{
width:100%;padding:14px 15px;
border-radius:12px;
background:rgba(255,255,255,.05);
border:.5px solid rgba(255,255,255,.1);
color:#F5F5F7;
font-size:13.5px;font-weight:400;
font-family:'Pretendard Variable','Pretendard',-apple-system,sans-serif;
outline:none;cursor:pointer;
-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='rgba(245,245,247,0.45)' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 14px center;
letter-spacing:-.01em;
transition:all .2s cubic-bezier(.25,.1,.25,1);
}
.auth-select:hover{
border-color:rgba(255,255,255,.18);
background-color:rgba(255,255,255,.06);
}
.auth-select:focus{
border-color:rgba(255,255,255,.4);
box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(12px) scale(.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
/* ══ 블록 4 — 관리자 대시보드 (Apple Monochrome Dark) ══ */
.adm-sb-item{
display:flex;align-items:center;gap:11px;
padding:10px 12px;
border-radius:10px;
cursor:pointer;
font-size:12.5px;font-weight:500;
color:rgba(245,245,247,.5);
margin-bottom:2px;
transition:all .2s cubic-bezier(.25,.1,.25,1);
border:.5px solid transparent;
letter-spacing:-.01em;
}
.adm-sb-item:hover{
background:rgba(255,255,255,.05);
color:rgba(245,245,247,.9);
}
.adm-sb-item.on{
background:rgba(255,255,255,.08);
color:#fff;
font-weight:600;
border-color:rgba(255,255,255,.12);
}
.adm-tbl{width:100%;border-collapse:collapse}
.adm-tbl th{
padding:12px 14px;
font-size:10.5px;font-weight:500;
color:rgba(245,245,247,.4);
text-align:left;
letter-spacing:.08em;
text-transform:uppercase;
border-bottom:.5px solid rgba(255,255,255,.08);
}
.adm-tbl td{
padding:13px 14px;
font-size:12.5px;
color:rgba(245,245,247,.8);
border-bottom:.5px solid rgba(255,255,255,.05);
vertical-align:middle;
letter-spacing:-.01em;
}
.adm-tbl tr:hover td{background:rgba(255,255,255,.03)}
.adm-tbl tr:last-child td{border-bottom:none}
.adm-del-btn{
padding:6px 13px;
border-radius:980px;
border:.5px solid rgba(255,69,58,.25);
background:rgba(255,69,58,.08);
color:#FF6961;
font-size:11.5px;font-weight:500;
cursor:pointer;
font-family:'Pretendard Variable','Pretendard',-apple-system,sans-serif;
transition:all .2s cubic-bezier(.25,.1,.25,1);
display:inline-flex;align-items:center;gap:5px;
letter-spacing:-.01em;
}
.adm-del-btn:hover{
background:rgba(255,69,58,.18);
border-color:rgba(255,69,58,.4);
color:#fff;
}
.adm-stat{
background:rgba(255,255,255,.03);
border:.5px solid rgba(255,255,255,.07);
border-radius:18px;
padding:24px;
transition:all .25s cubic-bezier(.25,.1,.25,1);
}
.adm-stat:hover{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.12);
transform:translateY(-2px);
}
/* ── 공통 필터바 ── */
.filter-bar{
display:flex;align-items:center;gap:6px;
padding:8px 14px;
border-bottom:.5px solid var(--bd);
flex-wrap:wrap;
background:var(--surf);
}
.filter-group{
display:flex;gap:3px;
background:var(--nbg2);
border-radius:10px;
padding:3px;
}
.fb{
padding:5px 12px;
border-radius:7px;
font-size:11px;font-weight:500;
border:none;cursor:pointer;
background:transparent;
color:var(--ink3);
font-family:inherit;
letter-spacing:-.01em;
transition:all .2s cubic-bezier(.25,.1,.25,1);
}
.fb:hover{background:rgba(0,0,0,.04)}
.fb.on{background:var(--ink);color:#fff}
.fb.on-night,
.fb.on-foreign{background:var(--ink);color:#fff}
.filter-search{position:relative;margin-left:auto}
.filter-search input{
height:30px;
border:.5px solid var(--bd2);
border-radius:8px;
padding:0 10px 0 26px;
font-size:12px;
font-family:inherit;
background:var(--card);
color:var(--ink);
width:140px;
letter-spacing:-.01em;
transition:all .2s cubic-bezier(.25,.1,.25,1);
}
.filter-search input:focus{
outline:none;
border-color:var(--ink);
box-shadow:0 0 0 3px rgba(29,29,31,.06);
}
.filter-search .fs-icon{
position:absolute;left:8px;top:50%;
transform:translateY(-50%);
font-size:11px;opacity:.4;
pointer-events:none;
}
/* ── 근무형태 ── */
.shift-ftab{
padding:5px 12px;
border-radius:980px;
font-size:11px;font-weight:500;
border:.5px solid var(--bd2);
cursor:pointer;
background:transparent;
color:var(--ink3);
font-family:inherit;
letter-spacing:-.01em;
transition:all .2s cubic-bezier(.25,.1,.25,1);
}
.shift-ftab:hover{background:var(--surf);color:var(--ink2)}
.shift-ftab.on{
background:var(--ink);color:#fff;
border-color:var(--ink);
}
.shift-list-header{
display:grid;
grid-template-columns:36px 100px 1fr 80px 100px 70px 1fr 80px;
padding:9px 14px;
background:var(--surf);
border-bottom:.5px solid var(--bd);
font-size:11px;
color:var(--ink3);
font-weight:500;
letter-spacing:-.01em;
}
.shift-emp-row{
display:grid;
grid-template-columns:36px 100px 1fr 80px 100px 70px 1fr 80px;
align-items:center;
padding:11px 14px;
border-bottom:.5px solid var(--bd);
cursor:pointer;
font-size:12px;
color:var(--ink);
letter-spacing:-.01em;
transition:background .15s;
}
.shift-emp-row:hover{background:var(--surf)}
.shift-emp-row.checked{background:var(--surf)}
.shift-sec-title{
font-size:11px;font-weight:500;
color:var(--ink3);
margin-bottom:10px;
padding-bottom:5px;
border-bottom:.5px solid var(--bd);
letter-spacing:.04em;
text-transform:uppercase;
}
.shift-form-row{
display:flex;align-items:center;gap:10px;
margin-bottom:12px;
}
.shift-label{
font-size:12px;
color:var(--ink3);
width:80px;flex-shrink:0;
letter-spacing:-.01em;
}
.shift-input{
flex:1;height:32px;
border:.5px solid var(--bd2);
border-radius:8px;
padding:0 10px;
font-size:12px;
font-family:inherit;
background:var(--card);
color:var(--ink);
letter-spacing:-.01em;
transition:all .2s cubic-bezier(.25,.1,.25,1);
}
.shift-input:focus{
outline:none;
border-color:var(--ink);
box-shadow:0 0 0 3px rgba(29,29,31,.06);
}
.shift-time-input{
width:140px;min-width:140px;height:36px;
border:.5px solid var(--bd2);
border-radius:10px;
padding:0 12px;
font-size:13px;
font-family:inherit;
background:var(--card);
color:var(--ink);
box-sizing:border-box;
font-variant-numeric:tabular-nums;
letter-spacing:.3px;
transition:all .2s cubic-bezier(.25,.1,.25,1);
}
.shift-time-input:focus{
outline:none;
border-color:var(--ink);
box-shadow:0 0 0 3px rgba(29,29,31,.06);
}
.shift-divider{
height:.5px;
background:var(--bd);
margin:14px 0;
}
.sm-day-btn{
width:32px;height:32px;
border-radius:50%;
border:.5px solid var(--bd2);
font-size:11px;font-weight:500;
cursor:pointer;
background:transparent;
color:var(--ink3);
display:flex;align-items:center;justify-content:center;
user-select:none;
transition:all .2s cubic-bezier(.25,.1,.25,1);
letter-spacing:-.01em;
}
.sm-day-btn:hover{background:var(--surf);color:var(--ink)}
.sm-day-btn.on{
background:var(--ink);
border-color:var(--ink);
color:#fff;
}
.sm-day-btn.hol{
background:var(--surf);
border-color:var(--bd);
color:var(--rose);
cursor:default;
}
.sm-bk-row{
display:flex;align-items:center;gap:7px;
margin-bottom:7px;
}
.shift-bk-del{
width:24px;height:24px;
border-radius:6px;
border:.5px solid var(--bd2);
background:transparent;
color:var(--ink3);
cursor:pointer;
font-size:12px;
font-family:inherit;
transition:all .2s cubic-bezier(.25,.1,.25,1);
}
.shift-bk-del:hover{
border-color:var(--rose);
color:var(--rose);
}
.shift-add-bk{
font-size:11px;
color:var(--ink);
border:.5px dashed var(--bd2);
border-radius:980px;
padding:6px 12px;
background:transparent;
cursor:pointer;
width:100%;
margin-top:3px;
font-family:inherit;
font-weight:500;
letter-spacing:-.01em;
transition:all .2s cubic-bezier(.25,.1,.25,1);
}
.shift-add-bk:hover{
border-color:var(--ink2);
background:var(--surf);
}
.shift-btn-primary{
padding:8px 18px;
background:var(--ink);
color:#fff;
border:none;
border-radius:980px;
font-size:12px;
cursor:pointer;
font-family:inherit;
font-weight:500;
letter-spacing:-.01em;
transition:all .22s cubic-bezier(.25,.1,.25,1);
}
.shift-btn-primary:hover{background:#000}
.shift-btn-ghost{
padding:8px 18px;
background:transparent;
color:var(--ink);
border:.5px solid var(--bd2);
border-radius:980px;
font-size:12px;
cursor:pointer;
font-family:inherit;
font-weight:500;
letter-spacing:-.01em;
transition:all .22s cubic-bezier(.25,.1,.25,1);
}
.shift-btn-ghost:hover{
background:var(--surf);
border-color:var(--ink2);
}
.shift-unreg{
font-size:11px;
color:var(--ink);
background:var(--surf);
border:.5px solid var(--bd2);
border-radius:980px;
padding:3px 10px;
letter-spacing:-.01em;
font-weight:500;
}
/* ── 사이드바 필터 버튼 ── */
.sb-fb{
padding:3px 9px;
border-radius:7px;
font-size:10px;font-weight:500;
border:.5px solid var(--bd2);
cursor:pointer;
background:transparent;
color:var(--ink3);
font-family:inherit;
letter-spacing:-.01em;
transition:all .2s cubic-bezier(.25,.1,.25,1);
}
.sb-fb:hover{background:var(--surf)}
.sb-fb.on{
background:var(--ink);
color:#fff;
border-color:var(--ink);
}
#sb-list::-webkit-scrollbar{width:4px}
#sb-list::-webkit-scrollbar-track{background:transparent}
#sb-list::-webkit-scrollbar-thumb{
background:var(--bd2);
border-radius:4px;
}
#sb-list::-webkit-scrollbar-thumb:hover{background:var(--ink3)}