/* 디자인 시스템: 304LAB 로고 색상 (차콜 #383838 · 오렌지 #EF862B · 옐로 #F7B830) */
:root{
  --bg:#f7f6f3; --surface:#fff; --surface-2:#fbfaf7; --surface-3:#f3f0eb;
  --line:#e9e5de; --line-strong:#d7d1c7;
  --text:#2b2b2b; --text-2:#4a4744; --muted:#6f6a64; --faint:#a39d96;
  /* 오렌지는 면(버튼·강조)에, 글자는 대비가 충분한 진한 오렌지로 */
  --primary:#ef862b; --primary-hover:#e0731a; --primary-strong:#a34e0c; --primary-soft:#fff1e2; --primary-line:#f6c795;
  --on-primary:#2b2b2b;
  --accent:#f7b830; --accent-soft:#fff6dd;
  --brand-dark:#383838;
  --ok:#059669; --ok-soft:#e3f7ee; --warn:#a16207; --warn-soft:#fef6dc;
  --danger:#c20038; --danger-soft:#ffe4e8; --info:#0e7490; --info-soft:#e0f4f8;
  --r-sm:5px; --r:8px; --r-lg:12px;
  --shadow-sm:0 1px 2px rgba(40,36,32,.06);
  --shadow:0 1px 3px rgba(40,36,32,.07),0 8px 24px rgba(40,36,32,.07);
  --side:224px; --head:56px;
  --row:36px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  background:var(--bg);color:var(--text);font-size:13px;line-height:1.45;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:var(--primary-strong);text-decoration:none}
a:hover{text-decoration:underline}
.hidden{display:none !important}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.spacer{flex:1}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}

/* ---------- 로그인 ---------- */
#startup{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:100}
.startup-card{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:24px;color:var(--muted)}
.startup-dot{width:10px;height:10px;border-radius:50%;background:var(--primary)}
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 20% 0%,#e8e9ff,transparent),var(--bg)}
.login-card{width:360px;max-width:calc(100% - 32px);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:32px 28px}
.login-card .logo{width:40px;height:40px;border-radius:10px;background:var(--brand-dark);color:var(--primary);display:grid;place-items:center;margin-bottom:14px}
.login-card h1{font-size:20px;margin:0 0 4px;letter-spacing:-.02em}
.login-card .sub{color:var(--muted);margin-bottom:20px}
.login-card label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin:12px 0 5px}
.login-card input{width:100%;height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r)}
.login-card input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.login-card button{width:100%;height:42px;margin-top:20px;border:0;border-radius:var(--r);background:var(--primary);color:var(--on-primary);font-weight:700;cursor:pointer}
.login-card button:hover{background:var(--primary-hover)}
.login-err{color:var(--danger);font-size:12.5px;margin-top:12px;min-height:18px}

/* ---------- 셸: 사이드바 + 헤더 ---------- */
#shell{height:100%}
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:40}
.side-brand{height:var(--head);display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line);flex:none}
.side-brand .logo{width:30px;height:30px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center;flex:none}
.side-brand b{display:block;font-size:14px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-brand small{display:block;font-size:11px;color:var(--faint)}
.side-nav{flex:1;overflow:auto;padding:8px 8px 16px}
.nav-group{font-size:11px;font-weight:700;color:var(--faint);letter-spacing:.04em;padding:14px 10px 6px}
.nav-item{display:flex;align-items:center;gap:9px;width:100%;height:34px;padding:0 10px;border:0;background:transparent;border-radius:var(--r-sm);color:var(--text-2);font-weight:500;cursor:pointer;text-align:left}
.nav-item:hover{background:var(--surface-3);color:var(--text)}
.nav-item.active{background:var(--primary-soft);color:var(--primary-strong);font-weight:700}
.nav-item .badge{margin-left:auto}
.nav-item .chev{margin-left:auto;color:var(--faint);transition:transform .15s}
.nav-item.open .chev{transform:rotate(90deg)}
.nav-row{display:flex;align-items:center;gap:2px}
.nav-row>.nav-item{flex:1;min-width:0}
.nav-toggle{width:34px;height:34px;display:grid;place-items:center;flex:none;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);cursor:pointer}
.nav-toggle:hover{background:var(--surface-3);color:var(--text)}
.nav-toggle .chev{transition:transform .15s}
.nav-toggle[aria-expanded=true] .chev{transform:rotate(90deg)}
.nav-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.nav-sub{margin:2px 0 6px 18px;padding-left:10px;border-left:1px solid var(--line)}
.nav-sub .nav-item{height:30px;font-size:12.5px;font-weight:500}
.side-foot{border-top:1px solid var(--line);padding:10px 12px;display:flex;align-items:center;gap:8px;flex:none}
.side-foot .who{min-width:0;flex:1}
.side-foot .who b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who small{color:var(--faint);font-size:11px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--primary-soft);color:var(--primary-strong);display:grid;place-items:center;font-weight:700;flex:none}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:700}
.badge.red{background:var(--danger-soft);color:var(--danger)}
.badge.amber{background:var(--warn-soft);color:var(--warn)}
.badge.blue{background:var(--primary-soft);color:var(--primary-strong)}

.head{position:fixed;top:0;left:var(--side);right:0;height:var(--head);background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 20px;z-index:30}
.head .burger{display:none}
.crumb{display:flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap;overflow:hidden;min-width:0}
.crumb b{color:var(--text);font-size:14px;overflow:hidden;text-overflow:ellipsis}
.search{position:relative;width:min(440px,42vw);margin-left:auto}
.search input[type=search]{width:100%;height:36px;padding:0 64px 0 36px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.search input[type=search]::-webkit-search-cancel-button{display:none}
.search input[type=search]:focus{outline:none;background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.search > svg{position:absolute;left:11px;top:10px;color:var(--faint);pointer-events:none;z-index:1}
.search kbd{position:absolute;right:8px;top:8px;font-family:inherit;font-size:11px;font-weight:600;line-height:18px;padding:0 6px;border:1px solid var(--line);border-radius:4px;color:var(--faint);background:#fff}
.search-pop{position:absolute;top:42px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);max-height:440px;overflow:auto;padding:6px;z-index:60}
.search-pop .sec{font-size:11px;font-weight:700;color:var(--faint);padding:6px 8px 4px}
.sr{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 8px;border-radius:var(--r-sm);cursor:pointer}
.sr.on,.sr:hover{background:var(--primary-soft)}
.sr .code{font-size:12px;color:var(--muted)}
.sr .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr .sub{font-size:12px;color:var(--muted);white-space:nowrap}
.head-actions{display:flex;gap:6px;align-items:center}

#content{margin-left:var(--side);padding:calc(var(--head) + 18px) 22px 40px;min-height:100%;min-width:0}
body{overflow-x:hidden}
.wrap{max-width:1480px;margin:0 auto}

/* ---------- 공통 컴포넌트 ---------- */
.page-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.page-head h2{font-size:20px;margin:0;letter-spacing:-.02em}
.page-head .desc{color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card.pad{padding:16px}
.card-head{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line);min-height:46px}
.card-head h3{margin:0;font-size:14px;letter-spacing:-.01em}
.card-head .count{color:var(--muted);font-weight:500}
.card-body{padding:14px 16px}
.section-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;margin:20px 0 10px}
.section-title .count{color:var(--muted);font-weight:500}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-3);border-radius:var(--r);flex-wrap:wrap}
.seg button{border:0;background:transparent;height:28px;padding:0 11px;border-radius:6px;color:var(--text-2);font-weight:500;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.active{background:#fff;color:var(--primary-strong);font-weight:700;box-shadow:var(--shadow-sm)}

input[type=text],input[type=date],input[type=time],input[type=number],input[type=email],input[type=password],input[type=search],select,textarea{
  height:32px;padding:0 9px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;max-width:100%}
textarea{height:auto;padding:7px 9px;resize:vertical;width:100%;line-height:1.5}
input[type=color]{width:44px;height:32px;padding:2px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--primary);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--text);font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:#b9bfcf}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:700}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-3)}
.btn.danger{color:var(--danger);border-color:#f3c2cc}
.btn.danger:hover{background:var(--danger-soft)}
.btn.sm{height:26px;padding:0 9px;font-size:12px}
.btn.icon{width:32px;padding:0}
.btn.sm.icon{width:26px}
.btn[disabled]{opacity:.45;cursor:default}
.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}

.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:10px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--surface-3);color:var(--text-2)}
.tag.gray{background:var(--surface-3);color:var(--text-2)}
.tag.blue{background:var(--primary-soft);color:var(--primary-strong)}
.tag.green{background:var(--ok-soft);color:var(--ok)}
.tag.amber{background:var(--warn-soft);color:var(--warn)}
.tag.red{background:var(--danger-soft);color:var(--danger)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;vertical-align:middle}
.due{color:var(--danger);font-weight:700}
.money{font-variant-numeric:tabular-nums;font-weight:600}

/* 표 */
.table-wrap{overflow:auto;border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;z-index:1;text-align:left;height:34px;padding:0 10px;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{height:var(--row);padding:4px 10px;border-bottom:1px solid var(--line);white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
tbody td.wrap{white-space:normal}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fafbff}
tbody tr.clickable{cursor:pointer}
th.r,td.r{text-align:right}
.empty{text-align:center;color:var(--faint);padding:36px 10px;white-space:normal}
.table-foot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);color:var(--muted)}

/* 폼 */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 14px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field>label{font-size:11.5px;font-weight:600;color:var(--muted)}
.field input,.field select{width:100%}
.field.span2{grid-column:span 2}
.field.full{grid-column:1/-1}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline>input,.inline>select{min-width:0}
.form-sec{font-size:12px;font-weight:700;color:var(--primary-strong);margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.form-sec:first-child{margin-top:0}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;transition:border-color .15s}
.kpi:hover{border-color:var(--primary-line)}
.kpi .k{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:600}
.kpi .v{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.kpi .s{color:var(--muted);font-size:12px;margin-top:2px}

.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.grid2>*{min-width:0}
.stack{display:grid;gap:14px}
.day-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:start}
.day-layout>*{min-width:0}

/* 리스트 (홈 타임라인 등) */
.list-row{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:#fafbff}
.list-row .t{font-variant-numeric:tabular-nums;color:var(--text-2);font-weight:600}
.list-row .main{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row .sub{color:var(--muted);font-size:12px}

/* ---------- 고객 상세 ---------- */
.detail{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.detail>*{min-width:0}
.summary{position:sticky;top:calc(var(--head) + 18px)}
.summary .card{overflow:hidden}
.sum-top{padding:16px}
.sum-top .code{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:600}
.sum-top h2{margin:8px 0 2px;font-size:22px;letter-spacing:-.02em}
.sum-row{display:flex;align-items:center;gap:8px;padding:4px 0;color:var(--text-2);min-width:0}
.sum-row svg{color:var(--faint)}
.sum-row .btn{margin-left:auto}
.sum-money{border-top:1px solid var(--line);padding:12px 16px;display:grid;gap:5px}
.sum-money div{display:flex;justify-content:space-between}
.sum-money .bal{font-size:15px;font-weight:800;padding-top:4px;border-top:1px dashed var(--line)}
.sum-actions{border-top:1px solid var(--line);padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sum-memo{border-top:1px solid var(--line);padding:12px 16px;font-size:12.5px;color:var(--text-2);white-space:pre-wrap;max-height:180px;overflow:auto}
.sum-memo .h{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:4px}
.sum-memo.imp{background:#fff6f8}
.sum-memo.imp .h{color:var(--danger)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{display:inline-flex;align-items:center;border:0;background:transparent;height:40px;padding:0 14px;color:var(--muted);font-weight:600;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button:hover{color:var(--text)}
.tabs button.active{color:var(--primary-strong);border-bottom-color:var(--primary)}
.tabs .badge{margin-left:6px}

.contract{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;margin-bottom:12px;overflow:hidden}
.contract-head{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);cursor:pointer;flex-wrap:wrap}
.contract-head h4{margin:0;font-size:14px}
.contract-head .chev{color:var(--faint);transition:transform .15s}
.contract.closed .chev{transform:rotate(-90deg)}
.contract.closed .contract-body{display:none}
.contract.closed .contract-head{border-bottom:0}
.contract-body{padding:12px 14px}
.pays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:6px}
.pay-col{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;min-width:0}
.pay-col .h{display:flex;align-items:center;gap:6px;font-weight:700;margin-bottom:4px}
.pay-line{display:flex;gap:6px;align-items:center;font-size:12.5px;padding:3px 4px;border-radius:4px;cursor:pointer;min-width:0}
.pay-line:hover{background:var(--primary-soft)}
.pay-line .m{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.subhead{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted);margin:14px 0 6px}
.mini-table{border:1px solid var(--line);border-radius:var(--r);overflow:auto}
.mini-table tbody td{height:34px}

/* 진행단계 파이프라인 */
.stages{display:flex;gap:3px;align-items:center}
.stage{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:22px;padding:0 5px;border-radius:11px;background:var(--surface-3);color:var(--faint);font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;border:0}
.stage:hover{outline:1px solid var(--primary-line)}
.stage.on{background:var(--ok-soft);color:var(--ok)}
.stage.next{background:var(--primary-soft);color:var(--primary-strong)}

.rec{display:grid;grid-template-columns:132px 64px minmax(0,1fr) auto;gap:8px;align-items:start;padding:8px 2px;border-bottom:1px solid var(--line)}
.rec:last-child{border-bottom:0}
.rec .t{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.rec .who{color:var(--primary-strong);font-size:12px;font-weight:600}
.rec .b{white-space:pre-wrap}

.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.tm-item{display:flex;gap:6px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 7px;cursor:pointer}
.tm-item.past{background:var(--surface-2);color:var(--muted)}
.tm-item b{font-size:12px}
.tm-item small{display:block;color:var(--muted);font-size:11px}
.save-bar{position:sticky;bottom:0;display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:10px 0;background:linear-gradient(transparent,var(--bg) 30%)}

/* ---------- 캘린더 ---------- */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line);gap:1px}
.cal .dow{background:var(--surface-2);text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);padding:8px 0}
.cal .dow.sun{color:var(--danger)} .cal .dow.sat{color:var(--primary-strong)}
.cal .cell{background:#fff;min-height:118px;padding:6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;min-width:0}
.cal .cell:hover{background:#fafbff}
.cal .cell.other{background:var(--surface-2);cursor:default}
.cal .dn{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--text-2)}
.cal .dn .cnt{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted)}
.cal .cell.sun .dn{color:var(--danger)} .cal .cell.sat .dn{color:var(--primary-strong)}
/* 주말·오늘 칸 색: 토 연노랑, 일 연분홍, 오늘 연하늘(주말보다 우선) */
.cal .cell.sat{background:#fff8dc}
.cal .cell.sat:hover{background:#fff1c2}
.cal .cell.sun{background:#fff0f3}
.cal .cell.sun:hover{background:#ffe2e8}
.cal .cell.today{background:#e3f3ff}
.cal .cell.today:hover{background:#d2ebff}
.cal .cell.today .dn .d{background:#0369a1;color:#fff;border-radius:10px;padding:0 6px}
.ev{display:flex;align-items:center;gap:4px;font-size:11.5px;line-height:18px;padding:0 5px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;background:var(--surface-3);color:var(--text)}
.ev .bar{width:3px;height:12px;border-radius:2px;flex:none}
.ev .tx{overflow:hidden;text-overflow:ellipsis}
.ev.tm{background:transparent;color:#1d4ed8;font-weight:600}
.ev.due{background:transparent;color:var(--info);font-weight:600}
.ev.memo{background:var(--warn-soft);color:#92400e}
.ev.cancel{text-decoration:line-through;opacity:.55}
.more{font-size:11px;color:var(--muted);padding-left:4px}

/* 일스케줄 타임라인 */
.timegrid{display:grid;border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;background:#fff;max-height:calc(100vh - 230px)}
.tg-corner,.tg-h{position:sticky;top:0;z-index:2;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:var(--text-2);height:36px;display:flex;align-items:center;gap:6px;padding:0 10px}
.tg-corner{left:0;z-index:3;border-right:1px solid var(--line)}
.tg-h{border-right:1px solid var(--line)}
.tg-time{position:sticky;left:0;z-index:1;border-right:1px solid var(--line);background:var(--surface-2)}
.tg-time div{height:48px;font-size:11px;color:var(--muted);text-align:right;padding:2px 6px 0 0;border-bottom:1px solid var(--line)}
.tg-col{position:relative;border-right:1px solid var(--line);background:repeating-linear-gradient(#fff 0 47px,var(--line) 47px 48px)}
.tg-col:last-child{border-right:0}
.tg-now{position:absolute;left:0;right:0;height:2px;background:var(--danger);z-index:2}
.tg-ev{position:absolute;left:4px;right:4px;border-radius:6px;padding:3px 6px;font-size:11.5px;line-height:15px;overflow:hidden;cursor:pointer;border-left:3px solid;box-shadow:var(--shadow-sm)}
.tg-ev:hover{z-index:3;box-shadow:var(--shadow)}
.tg-ev b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-ev small{display:block;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 막대 차트 */
.bars .row{display:grid;grid-template-columns:150px minmax(0,1fr) 100px;gap:10px;align-items:center;padding:5px 0}
.bars .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.bar{height:8px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.bar>span{display:block;height:100%;background:var(--primary);border-radius:4px}

/* 칩 (설정) */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 4px 0 10px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:12.5px}
.mini{border:0;background:transparent;color:var(--faint);cursor:pointer;padding:0 3px;font-size:12px;line-height:1}
.mini:hover{color:var(--text)} .mini.del:hover{color:var(--danger)}

/* 모달 */
.backdrop{position:fixed;inset:0;background:rgba(40,36,32,.38);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal{width:min(640px,100%);max-height:90vh;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);box-shadow:0 20px 50px rgba(40,36,32,.25);animation:pop .14s ease}
@keyframes pop{from{transform:scale(.98);opacity:.6}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:15px}
.modal-body{padding:16px 18px;overflow:auto}
.modal-foot{display:flex;gap:8px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.account-modal .modal-foot{flex-wrap:wrap}
.account-delete-note{margin-top:16px;padding:10px 12px;border:1px solid #f3c2cc;border-radius:var(--r);background:var(--danger-soft);color:var(--danger);font-size:12px;overflow-wrap:anywhere}
.account-delete-note p{margin:4px 0 0;line-height:1.6}
.account-delete-note.protected{border-color:var(--line);background:var(--surface-2);color:var(--muted)}
@media(max-width:560px){.account-modal .modal-foot>.faint{display:none}}

#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--text);color:#fff;padding:10px 16px;border-radius:var(--r);box-shadow:var(--shadow);opacity:0;transition:.18s;z-index:200;pointer-events:none;font-weight:600}
#toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- 반응형 ---------- */
@media(max-width:1180px){
  .detail{grid-template-columns:240px minmax(0,1fr)}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .day-layout{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .pays{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  .side{transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
  body.nav-open .side{transform:none}
  .nav-shade{display:none}
  body.nav-open .nav-shade{display:block;position:fixed;inset:0;background:rgba(40,36,32,.3);z-index:35}
  .head{left:0;padding:0 12px}
  .head .burger{display:inline-flex}
  #content{margin-left:0;padding:calc(var(--head) + 12px) 12px 32px}
  .detail{grid-template-columns:minmax(0,1fr)}
  .summary{position:static}
  .search{width:auto;flex:1}
  .search kbd{display:none}
  .crumb{display:none}
}
@media(max-width:560px){
  .head-actions .btn .lbl{display:none}
  .field.span2{grid-column:auto}
  .rec{grid-template-columns:minmax(0,1fr) auto}
  .rec .t,.rec .who,.rec .b{grid-column:1}
  .bars .row{grid-template-columns:90px minmax(0,1fr) 80px}
  .cal .cell{min-height:64px;padding:3px}
  .cal .ev{font-size:10px;padding:0 2px}
  .cal .ev .bar{display:none}
  .cal .dn .cnt{display:none}
  .kpi .v{font-size:19px}
  .page-head h2{font-size:18px}
}

/* ---------- 고객 등록/수정 폼 (항목별 카드) ---------- */
.cform-wrap{container-type:inline-size}
.cform{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,300px);gap:14px;align-items:start}
.cform-full{grid-column:1/-1}
.cform-col{display:grid;gap:14px;min-width:0}
.family-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.family-person{display:grid;gap:2px;min-width:0;flex:1 1 120px;overflow-wrap:anywhere}
.family-person small{font-size:11.5px;color:var(--muted)}
.family-row .tag{white-space:normal}
.family-candidates{margin:12px 0}
.family-review-group{border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-top:12px}
.family-review-group>.btn{margin-top:10px}
.family-review input[type=search]{width:100%;min-width:0}
.family-review-group>.inline{flex-wrap:wrap;overflow-wrap:anywhere}
.family-card .fcard-body>div>.btn{margin:4px 6px 0 0}
.family-candidates p,.family-card p{font-size:12px}
.family-setting{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,100px) minmax(0,120px);gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.family-setting-name{display:grid;justify-items:start;gap:4px;min-width:0;overflow-wrap:anywhere}
.family-setting input,.family-setting select{width:100%;min-width:0}
.family-setting input[type=checkbox]{width:16px;height:16px;flex:none}
.family-setting input:disabled,.family-setting select:disabled{background:var(--surface-3);color:var(--muted);cursor:not-allowed}
.family-setting.with-role{grid-template-columns:repeat(2,minmax(0,1fr))}
.family-setting.with-role .family-setting-name,.family-role-field{grid-column:1/-1}
@media(max-width:560px){.family-setting{grid-template-columns:repeat(2,minmax(0,1fr))}.family-setting-name{grid-column:1/-1}}
.fcard{container:card/inline-size;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.fcard-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.fcard-head .ico{width:28px;height:28px;border-radius:7px;background:var(--primary-soft);color:var(--primary-strong);display:grid;place-items:center;flex:none}
.fcard-head h3{margin:0;font-size:14px}
.fcard-head .hint{margin-left:auto;font-size:11.5px;color:var(--muted);background:var(--surface-3);padding:2px 8px;border-radius:10px;white-space:nowrap}
.fcard-body{padding:14px 16px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.fgrid .full{grid-column:1/-1}
/* 6칸 격자: c2=1/3, c3=1/2, c4=2/3, c6=한 줄 */
.fgrid.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.fgrid.g6 .c2{grid-column:span 2}.fgrid.g6 .c3{grid-column:span 3}.fgrid.g6 .c4{grid-column:span 4}.fgrid.g6 .c6{grid-column:1/-1}
/* 세그먼트 버튼: 칸 너비를 꽉 채움 */
.pick.seg{flex-wrap:nowrap;gap:2px;padding:2px;background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r)}
.pick.seg button{flex:1 1 0;min-width:0;height:27px;padding:0 8px;border:0;background:transparent;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick.seg button.on{background:#fff;color:var(--primary-strong);border:0;box-shadow:0 1px 2px rgba(40,36,32,.12),inset 0 0 0 1px var(--primary-line)}
.pick.seg+small{display:block;margin-top:4px;font-size:11.5px}
.req{color:var(--danger);margin-left:2px}
.pick{display:flex;gap:4px;flex-wrap:wrap}
.pick button{height:32px;padding:0 12px;border:1px solid var(--line-strong);background:#fff;border-radius:var(--r-sm);color:var(--text-2);font-weight:600;cursor:pointer}
.pick button:hover{border-color:var(--primary-line)}
.pick button.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-strong)}
.tip{display:flex;gap:8px;align-items:flex-start;background:var(--primary-soft);color:var(--primary-strong);border-radius:var(--r);padding:9px 11px;font-size:12.5px;margin-bottom:12px}
.tm-chips{display:flex;gap:5px;flex-wrap:wrap}
.tm-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border:1px solid var(--line);border-radius:13px;font-size:12px;cursor:pointer;background:#fff;color:var(--text-2);user-select:none}
.tm-chip input{width:13px;height:13px}
.tm-chip.on{background:var(--ok-soft);border-color:#a7f3d0;color:var(--ok)}
.tm-chip.past{opacity:.6}
.tm-chip small{color:var(--muted);font-size:11px}
.dup{margin-top:6px;font-size:12px;border-radius:var(--r-sm);padding:6px 8px}
.dup.warn{background:var(--warn-soft);color:#92400e}
.dup.ok{color:var(--ok);padding:2px 0 0}
.dup a{font-weight:700;margin-right:6px}
.sw-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer}
.sw-row:last-child{border-bottom:0}
.sw-row .t{flex:1;min-width:0}
.sw-row .t b{display:block;font-size:13px}
.sw-row .t small{color:var(--muted);font-size:11.5px}
.switch{position:relative;width:36px;height:20px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.switch span{position:absolute;inset:0;border-radius:10px;background:#cfd4e0;transition:.15s;pointer-events:none}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.15s}
.switch input:checked+span{background:var(--primary)}
.switch input:checked+span::after{transform:translateX(16px)}
.switch input:focus-visible+span{box-shadow:0 0 0 3px var(--primary-soft)}
.acc-head{cursor:pointer;user-select:none}
.acc-head .chev{margin-left:8px;color:var(--faint);transition:transform .15s}
.fcard.closed .acc-body{display:none}
.fcard.closed .acc-head{border-bottom:0}
.fcard.closed .acc-head .chev{transform:rotate(-90deg)}
.memo-imp{background:#fff6f8 !important;border-color:#f3c2cc !important}
.action-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:8px;margin:16px -22px -40px;padding:12px 22px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--line)}
.action-bar .faint{font-size:12px}
@container (max-width:620px){
  .cform{grid-template-columns:minmax(0,1fr)}
}
/* 카드 폭 기준: 좁으면 1/3칸 → 1/2칸, 더 좁으면 한 줄씩 */
@container card (max-width:400px){
  .fgrid.g6 .c2{grid-column:span 3}.fgrid.g6 .c4{grid-column:1/-1}
}
@container card (max-width:300px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .fgrid.g6>*{grid-column:1/-1!important}
}
.date-pair{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px}
/* 상세 화면에서는 저장 바를 본문 폭에 맞춘 떠 있는 바로 */
.detail .action-bar{bottom:12px;margin:16px 0 0;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
@media(max-width:900px){ .action-bar{margin:16px -12px -32px;padding:10px 12px} .detail .action-bar{margin:16px 0 0;bottom:8px} }

/* 자동완성 목록 */
.ac-list{position:fixed;z-index:300;max-height:260px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:4px}
.ac-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-sm);cursor:pointer;font-size:13px}
.ac-item:hover,.ac-item.on{background:var(--primary-soft)}
.ac-label{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ac-sub{margin-left:auto;color:var(--muted);font-size:11.5px;white-space:nowrap}

/* 세부상품 목록 선택 */
.pp-wrap{margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pp-top{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface-2);border-bottom:1px solid var(--line);color:var(--faint)}
.pp-top input[type=search]{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;height:30px;padding:0}
.pp-top input[type=search]:focus{box-shadow:none}
.pp-top input::-webkit-search-cancel-button{display:none}
.pp-cats{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line)}
.pp-cats button{flex:none;height:26px;padding:0 10px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--text-2);font-size:12px;font-weight:600;cursor:pointer}
.pp-cats button.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pp-list{max-height:250px;overflow:auto}
.pp-list .empty{padding:18px;text-align:center;color:var(--muted);font-size:12.5px}
.pp-grp{position:sticky;top:0;z-index:1;background:var(--surface-3);padding:4px 10px;font-size:11.5px;font-weight:700;color:var(--muted)}
.pp-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto 70px;gap:8px;align-items:center;padding:6px 10px;border-top:1px solid var(--line);cursor:pointer;font-size:13px}
.pp-grp+.pp-row{border-top:0}
.pp-row:hover{background:var(--surface-2)}
.pp-row.on{background:var(--primary-soft)}
.pp-row .num{text-align:right;font-size:12px}
.pp-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-row.on .pp-name{font-weight:700;color:var(--primary-strong)}
.pp-box{width:16px;height:16px;border:1.5px solid var(--line-strong);border-radius:4px;display:grid;place-items:center;color:transparent;background:#fff}
.pp-box svg{width:12px;height:12px}
.pp-row.on .pp-box{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pp-sel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border-top:1px solid var(--line);background:var(--surface-2);font-size:12.5px}
.pp-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--primary-line);border-radius:999px;padding:2px 3px 2px 10px;font-weight:600}
.pp-chip input{width:48px;height:24px;padding:0 4px}
.pp-chip button{width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.pp-chip button:hover{background:var(--danger-soft);color:var(--danger)}
.pp-chip button svg{width:13px;height:13px}
@media (max-width:600px){.pp-row{grid-template-columns:18px minmax(0,1fr) auto}.pp-row .num{display:none}}
.fgrid .inline>input[type=date]{flex:1 1 auto;min-width:0}
.vsep{width:1px;height:20px;background:var(--line-strong);margin:0 4px}
@media(max-width:900px){.vsep{display:none}}

/* 설정 › 패키지상품(목록+상세) · 세부상품 */
.ms{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:14px;align-items:start}
.ms-side{position:sticky;top:calc(var(--head) + 18px);display:flex;flex-direction:column;max-height:calc(100vh - var(--head) - 110px)}
.ms-search{display:flex;align-items:center;gap:8px;padding:0 10px;height:34px;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--faint)}
.ms-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.ms-search input[type=search]{flex:1;min-width:0;border:0;height:30px;padding:0;background:transparent;box-shadow:none!important}
.ms-search input::-webkit-search-cancel-button{display:none}
.ms-side .ms-search{margin:10px 12px}
.ms-list{overflow:auto;border-top:1px solid var(--line);flex:1}
.ms-list .empty{padding:24px;text-align:center;color:var(--muted)}
.ms-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);cursor:pointer;border-left:3px solid transparent}
.ms-row:hover{background:var(--surface-2)}
.ms-row.on{background:var(--primary-soft);border-left-color:var(--primary)}
.ms-row.on b{color:var(--primary-strong)}
.ms-main{display:flex;flex-direction:column;min-width:0}
.ms-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-main small{color:var(--muted);font-size:11.5px}
.ms-row .num{font-weight:600;font-size:12.5px}
.dot.lg{width:14px;height:14px}
.ms-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ms-head h3{margin:0;font-size:16px}
.ms-price{font-size:20px;font-weight:800;color:var(--primary-strong);letter-spacing:-.02em}
.ms-price small{font-size:12px;font-weight:600;margin-left:2px;color:var(--muted)}
.ms-note{display:flex;align-items:center;gap:8px;margin:12px 18px 0;padding:8px 12px;background:var(--info-soft);color:var(--info);border-radius:var(--r);font-size:12.5px}
.ms-note svg{width:15px;height:15px;flex:none}
.ms-sub{padding:14px 18px 8px;font-size:13px}
.ms-table{width:100%}
.ms-table td,.ms-table th{height:34px;padding:0 12px}
.ms-table td{border-bottom:1px solid var(--line)}
.ms-table tr.grp td{position:sticky;top:34px;z-index:1;height:28px;background:var(--surface-3);font-size:12px;font-weight:700;color:var(--text-2)}
.ms-detail .ms-table tr.grp td{position:static}
.ms-table tr.clickable{cursor:pointer}
.ms-table tr.clickable:hover td{background:var(--surface-2)}
.ms-sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 18px;background:var(--surface-2);border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);font-size:12.5px}
.pi-tools{display:flex;align-items:center;gap:10px;padding:12px 14px 8px;flex-wrap:wrap}
.pi-tools .ms-search{width:min(340px,100%)}
.chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 12px;border-bottom:1px solid var(--line)}
.chips button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer}
.chips button span{font-size:11px;color:var(--muted);font-weight:600}
.chips button:hover{border-color:var(--primary-line)}
.chips button.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.chips button.on span{color:var(--on-primary);opacity:.7}
@media(max-width:900px){
  .ms{grid-template-columns:minmax(0,1fr)}
  .ms-side{position:static;max-height:none}
  .ms-list{max-height:300px}
}
.ms-detail{scroll-margin-top:calc(var(--head) + 12px)}

/* 설정 › 세부상품: 구분 목록 + 표 */
.pi{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:start}
.pi-side{position:sticky;top:calc(var(--head) + 18px);max-height:calc(100vh - var(--head) - 110px);display:flex;flex-direction:column;overflow:hidden}
.pi-side-head{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:13px}
.pi-side-head small{color:var(--muted);font-weight:500}
.pi-nav{overflow:auto;padding:6px}
.pi-nav button{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);font-size:13px;font-weight:500;cursor:pointer;text-align:left}
.pi-nav button span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-nav button small{color:var(--faint);font-size:11.5px;font-weight:600}
.pi-nav button:hover{background:var(--surface-2)}
.pi-nav button.on{background:var(--primary-soft);color:var(--primary-strong);font-weight:700}
.pi-nav button.on small{color:var(--primary)}
.pi-main .card-head{flex-wrap:wrap}
.pi-main .ms-search{width:min(260px,100%)}
.pi-wrap{max-height:calc(100vh - var(--head) - 150px);border-radius:0 0 var(--r-lg) var(--r-lg)}
.pi-table .pi-ship{width:150px}
.pi-table .pi-num{width:96px}
.pi-table .pi-vendor{width:120px}
.pi-table td:first-child,.pi-table th:first-child{padding-left:16px}
@media(max-width:900px){
  .pi{grid-template-columns:minmax(0,1fr)}
  .pi-side{position:static;max-height:none}
  .pi-side-head{display:none}
  .pi-nav{display:flex;gap:4px;overflow-x:auto;padding:8px;scrollbar-width:thin}
  .pi-nav button{width:auto;flex:none;height:30px;border:1px solid var(--line-strong);border-radius:999px;background:#fff}
  .pi-nav button span{overflow:visible}
  .pi-nav button.on{border-color:var(--primary)}
  .pi-wrap{max-height:none}
  .pi-table .pi-ship{width:auto}
}
@media(max-width:600px){.pi-table td:first-child{white-space:normal;line-height:1.35;padding-top:6px;padding-bottom:6px}.pi-table .pi-num{width:70px}.pi-main .ms-search{width:100%}}
@media(max-width:600px){.pi-table td,.pi-table th{padding-left:8px;padding-right:8px}.pi-table td:first-child,.pi-table th:first-child{padding-left:12px}.pi-table .pi-num{width:56px}}

/* ---------- 사이드바: 로고 차콜 바탕 ---------- */
.side{background:var(--brand-dark);border-right:0;color:#e9e6e1}
.side-brand{border-bottom-color:rgba(255,255,255,.08)}
.side-brand .logo{background:var(--primary);color:var(--brand-dark)}
.side-brand b{color:#fff}
.side-brand small{color:#b5afa7}
.nav-group{color:#a8a29a}
.side .nav-item{color:#d6d2cc}
.side .nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.side .nav-item.active{background:rgba(239,134,43,.18);color:#ffb46a;box-shadow:inset 3px 0 0 var(--primary)}
.side .nav-item .chev{color:#8f8981}
.side .nav-toggle{color:#b5afa7;background:transparent}
.side .nav-toggle:hover{background:rgba(255,255,255,.07);color:#fff}
.side .nav-sub{border-left-color:rgba(255,255,255,.14)}
.side .badge{background:rgba(255,255,255,.12);color:#f1eee9}
.side .badge.blue{background:var(--primary);color:var(--brand-dark)}
.side-foot{border-top-color:rgba(255,255,255,.08)}
.side-foot .who b{color:#fff}
.side-foot .who small{color:#b5afa7}
.side .avatar{background:var(--accent);color:var(--brand-dark)}
.side-foot .btn.ghost{color:#d6d2cc;background:transparent;border-color:transparent}
.side-foot .btn.ghost:hover{background:rgba(255,255,255,.08);color:#fff}
/* 사이드 메뉴 스크롤바: 가는 I자 캡슐 (트랙 없음, 가장자리에서 띄움). 마우스를 올리거나 끌면 브랜드 오렌지 */
.side-nav::-webkit-scrollbar{width:12px}
.side-nav::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border:4px solid transparent;background-clip:padding-box;border-radius:999px;min-height:40px}
.side-nav:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.34)}
.side-nav::-webkit-scrollbar-thumb:hover{background-color:var(--primary);border-width:3px}
.side-nav::-webkit-scrollbar-thumb:active{background-color:var(--primary-hover);border-width:3px}
.side-nav::-webkit-scrollbar-button{display:none;height:0}
/* Firefox는 둥근 모양 지정이 안 돼 가는 막대 + 색만 맞춤 (Chrome에 넣으면 위 캡슐 모양이 무시되므로 Firefox 전용) */
@supports (-moz-appearance:none){ .side-nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent} .side-nav:hover{scrollbar-color:var(--primary) transparent} }
/* 옐로 포인트: 오늘·강조 배지 */
.badge.amber{background:var(--accent-soft);color:#7a5600}

/* ---------- 고객 요약 카드: 추가 정보 ---------- */
.sum-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:8px 0 2px}
.sum-name h2{margin:0}
.sum-parents{margin:4px 0 8px;color:var(--text-2);overflow-wrap:anywhere}
.sum-name .sex{font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--surface-3);color:var(--text-2)}
.sum-name .sex.m{background:#e6f0ff;color:#1d4ed8}
.sum-name .sex.f{background:#ffe9f0;color:#be185d}
.sum-age{font-size:12px;color:var(--muted);margin-bottom:8px}
.sum-age b{color:var(--text-2)}
.important-memo{display:grid;gap:8px;margin-top:10px;min-width:0}
.important-memo-toggle{justify-self:start;max-width:100%;height:auto;min-height:28px;white-space:normal}
.sum-flag{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--danger);background:var(--danger-soft);border-radius:var(--r-sm);padding:2px 7px}
.sum-next{margin:0 16px 12px;border:1px solid var(--primary-line);background:var(--primary-soft);border-radius:var(--r);padding:9px 11px;display:grid;gap:4px}
.sum-next .h{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--primary-strong)}
.sum-next .h svg{width:14px;height:14px}
.sum-next .ln{display:flex;align-items:center;gap:6px;font-size:12.5px;min-width:0}
.sum-next .ln:not(.tm){cursor:pointer}
.sum-next .ln span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sum-next .ln.tm{color:#1d4ed8}
.sum-next .ln em{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;color:var(--primary-strong);background:#fff;border-radius:4px;padding:0 5px;flex:none}
.sum-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.sum-stats .st{padding:9px 16px;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid var(--line)}
.sum-stats .st:nth-child(odd){border-right:1px solid var(--line)}
.sum-stats .st[onclick],.sum-stats .st:hover{cursor:pointer}
.sum-stats .st:hover{background:var(--surface-2)}
.sum-stats .st small{font-size:11px;color:var(--muted)}
.sum-stats .st b{font-size:14px;font-variant-numeric:tabular-nums}
.sum-stats .st.warn b{color:var(--warn)}
.sum-stats + .sum-money{border-top:0}

/* ---------- 촬영 탭 ---------- */
.shots-bar .shot-filter{width:auto}
.pick.seg.shot-filter button{flex:none;padding:0 12px;display:inline-flex;gap:5px;align-items:center;overflow:visible}
.shot-filter button .n{font-size:11px;color:var(--muted);font-weight:700}
.shot-filter button.on .n{color:var(--primary-strong)}
.dday{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:11px;font-weight:800}
.dday.sm{height:18px;font-size:10.5px;padding:0 6px}
.next-shot{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1.5px solid var(--primary-line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.ns-main{display:grid;gap:6px;min-width:0}
.ns-top{display:flex;align-items:center;gap:8px;font-size:12px}
.ns-when{font-size:20px;font-weight:800;letter-spacing:-.02em}
.ns-when span{margin-left:10px;font-size:15px;font-weight:700;color:var(--text-2)}
.ns-kind{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ns-staff,.sr-sub{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ns-memo{font-size:12.5px;color:var(--text-2)}
.ns-actions{display:flex;gap:6px;flex-wrap:wrap}
.staff{display:inline-flex;gap:4px;align-items:center;height:22px;padding:0 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);font-size:12px}
.staff small{color:var(--muted);font-size:11px}
.shot-year{display:flex;align-items:baseline;gap:8px;margin:14px 2px 8px;font-size:14px}
.shot-year:first-child{margin-top:0}
.shot-list{display:grid;gap:6px}
.shot-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.shot-row:hover{border-color:var(--primary-line);box-shadow:var(--shadow-sm)}
.shot-row.up{border-left:3px solid var(--primary)}
.shot-row.cancel .sr-title b{text-decoration:line-through;color:var(--muted)}
.date-blk{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 0;background:var(--surface-2)}
.date-blk b{font-size:14px;font-variant-numeric:tabular-nums}
.date-blk small{font-size:10.5px;color:var(--muted)}
.sr-main{display:grid;gap:4px;min-width:0}
.sr-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sr-title .num{font-size:12px}
.sr-sub .memo{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.sr-side{display:flex;align-items:center;gap:4px}
.st-chip{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 6px 0 9px;border:1px solid;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;background:#fff}
.st-chip svg{width:12px;height:12px}
.st-menu{position:fixed;z-index:300;width:140px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:4px}
.st-menu button{display:flex;align-items:center;gap:8px;width:100%;height:30px;padding:0 9px;border:0;background:transparent;border-radius:var(--r-sm);font-size:13px;cursor:pointer;text-align:left}
.st-menu button:hover{background:var(--surface-2)}
.st-menu button.on{background:var(--primary-soft);font-weight:700}
@media(max-width:600px){
  .shot-row{grid-template-columns:52px minmax(0,1fr);gap:10px}
  .sr-side{grid-column:2;justify-content:flex-start}
  .ns-when{font-size:18px}
  .shots-bar .shot-filter{width:100%;overflow-x:auto}
}
.sum-next .ln b{white-space:nowrap;flex:none}

/* 고객 대표 사진 */
.sum-photo{position:relative;background:var(--surface-3);border-bottom:1px solid var(--line);aspect-ratio:4/3;max-height:240px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sum-photo.editable:not(.has){cursor:pointer}
.sum-photo.editable:not(.has):hover{background:var(--primary-soft)}
.sum-photo .ph{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--faint);font-size:12px;font-weight:600}
.sum-photo .ph svg{width:28px;height:28px}
.sum-photo img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
.sum-photo .ph-act{position:absolute;right:8px;bottom:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.sum-photo:hover .ph-act,.sum-photo:focus-within .ph-act{opacity:1}
@media(hover:none){.sum-photo .ph-act{opacity:1}}

/* 다음 일정 · 100일 단위 */
.sum-next .hundred{margin-top:6px;padding-top:7px;border-top:1px dashed var(--primary-line);display:grid;gap:3px}
.sum-next .hundred .hh{font-size:11px;font-weight:700;color:var(--muted)}
.sum-next .hundred .ln b{min-width:44px;color:var(--primary-strong)}

/* 세부상품 진행표: 출고항목 묶음 + 단계 열 */
.items-tbl th.c,.items-tbl td.c{text-align:center;padding-left:4px;padding-right:4px}
.items-tbl td.wrap{white-space:normal;min-width:120px}
.items-tbl .stage{min-width:46px;margin:0 auto}
.items-tbl .stage-head{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 9px;border-radius:12px;border:1px solid var(--primary-line);background:var(--primary-soft);color:var(--primary-strong);font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.items-tbl .stage-head:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.items-tbl td.g-name{vertical-align:middle;font-size:12.5px;border-right:1px solid rgba(0,0,0,.06);min-width:84px}
.items-tbl td.g-name small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.items-tbl tbody tr.g-first td{border-top:2px solid rgba(0,0,0,.08)}
.items-tbl tbody tr.g-first:first-child td{border-top:0}
.items-tbl tbody tr.g0 td,.items-tbl tbody tr.g2 td{background:#fff}
.items-tbl tbody tr.g1 td,.items-tbl tbody tr.g3 td{background:var(--surface-2)}
.items-tbl tbody tr.clickable:hover td{filter:brightness(.96)}
.sum-next .hundred .ln{align-items:baseline}
.sum-next .hundred .ln span{white-space:normal;overflow:visible;text-overflow:clip;flex:1}
.sum-next .hundred .ln b{min-width:38px}
.sum-photo:not(.has){aspect-ratio:auto;height:92px}
.sum-next .hundred .ln span{white-space:nowrap;font-size:12px}
.sum-next .hundred .ln b{min-width:34px}
.sum-next .hundred .ln{gap:5px}

/* 증명사진: 고객명 옆 3:4 소형 */
.sum-id{display:flex;gap:12px;align-items:flex-start;margin-top:8px}
.sum-id-txt{flex:1;min-width:0}
.sum-id-txt .sum-name{margin-top:0}
.sum-id .sum-photo{flex:none;width:72px;height:96px;aspect-ratio:auto;max-height:none;border:1px solid var(--line);border-radius:var(--r);margin:0}
.sum-id .sum-photo:not(.has){height:96px}
.sum-id .sum-photo .ph{gap:3px;font-size:10.5px}
.sum-id .sum-photo .ph svg{width:20px;height:20px}
.sum-id .sum-photo .ph-act{left:0;right:0;bottom:0;justify-content:center;padding:3px;background:rgba(0,0,0,.35)}
.sum-id .sum-photo .ph-act .btn{height:20px;padding:0 6px;font-size:11px}

/* 다음 일정: 눌러서 펼침 (기본 접힘) */
.sum-next .h{cursor:pointer;user-select:none}
.sum-next .h .spacer{flex:1}
.sum-next .h .chev{transition:transform .15s}
.sum-next.closed .h .chev{transform:rotate(-90deg)}
.sum-next.closed > :not(.h):not(.tm){display:none}
.sum-next.closed{gap:4px}

/* 고객정보: 이력 | 메모 (오른쪽 좁은 카드 안에서 버튼으로 화면 전환) */
.hm-tabs{margin-bottom:10px}
.hm-tabs button .n{margin-left:4px;font-size:11px;font-weight:700;color:var(--primary-strong)}
.hist-form{display:grid;gap:6px;margin-bottom:10px}
.hist-form textarea{width:100%;resize:vertical;min-height:64px}
.hist-form .inline{flex-wrap:nowrap;gap:6px}
.hist-form .btn{flex:none}
.hist-list{max-height:min(52vh,460px);overflow:auto;margin:0 -4px;padding:0 4px}
.hist-item{padding:8px 10px;margin-bottom:6px;border:1px solid var(--line);border-left:3px solid var(--primary-line);border-radius:var(--r);background:var(--surface-2)}
.hist-item:hover{background:#fff;border-left-color:var(--primary)}
.hist-meta{display:flex;align-items:center;gap:6px;font-size:11.5px;margin-bottom:3px;flex-wrap:wrap}
.hist-meta b{font-variant-numeric:tabular-nums;color:var(--text)}
.hist-meta .tm{color:var(--muted);font-variant-numeric:tabular-nums}
.hist-meta .who{background:var(--primary-soft);color:var(--primary-strong);border-radius:999px;padding:0 7px;font-weight:600;font-size:11px}
.hist-meta .spacer{flex:1}
.hist-meta .mini.del{opacity:0}
.hist-item:hover .hist-meta .mini.del,.hist-item:focus-within .hist-meta .mini.del{opacity:1}
@media(hover:none){.hist-meta .mini.del{opacity:1}}
.hist-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-size:12.5px}

/* 눌러서 정렬하는 표 머리글 */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--text)}
th.sortable .sort-ind{margin-left:4px;font-size:10px;color:var(--faint)}
th.sortable.sorted{color:var(--primary-strong)}
th.sortable.sorted .sort-ind{color:var(--primary-strong)}

/* 고객정보: 영역(기본정보·날짜·형제자매·수신관리·추가정보) 구분용 단일 하늘색 머리글 */
.cform .fcard:not(.hm-card){border-color:#cfe3f4}
.cform .fcard:not(.hm-card) > .fcard-head{background:#eaf4fd;border-bottom-color:#cfe3f4;border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.cform .fcard:not(.hm-card).closed > .fcard-head{border-radius:calc(var(--r-lg) - 1px)}
.cform .fcard:not(.hm-card) > .fcard-head .ico{background:#fff;box-shadow:inset 0 0 0 1px #cfe3f4}
.cform .fcard:not(.hm-card) > .fcard-head h3{color:#0b6aa8}
.cform .fcard:not(.hm-card) > .fcard-head .hint{background:#fff;color:#0b6aa8}

/* 계약·상품 탭: 큰 항목(계약 제목줄)만 연한 초록색, 안쪽은 원래 베이지 */
.contract{border-color:#cfe8d6}
.contract-head{background:#eaf6ee;border-bottom-color:#cfe8d6}
.contract-head h4{color:#256b3e}
.contract-head .chev{color:#3aa165}

/* 전체 출고가 끝난 상품: 제목줄을 회색으로 */
.contract.shipped{border-color:#dcdde0}
.contract.shipped .contract-head{background:#eeeff1;border-bottom-color:#dcdde0}
.contract.shipped .contract-head h4{color:#6b7280}
.contract.shipped .contract-head .chev{color:#9ca3af}
.contract.shipped .contract-head > .muted{color:#9ca3af}

/* 잔금(중도금 등)이 남은 상품: 제목줄을 주황색으로 (출고 완료 회색보다 우선) */
.contract.unpaid{border-color:#f6c795}
.contract.unpaid .contract-head{background:#fff1e2;border-bottom-color:#f6c795}
.contract.unpaid .contract-head h4{color:#a34e0c}
.contract.unpaid .contract-head .chev{color:#ef862b}
.contract.unpaid .contract-head > .muted{color:var(--muted)}

/* 세부상품 추가·수정 팝업: 왼쪽 고르기 / 오른쪽 담은 목록 */
.item-modal .modal-body{padding:14px 18px}
.ia-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:16px;align-items:start}
.ia-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:8px}
.ia-h small{margin-left:auto;font-weight:500;color:var(--muted);font-size:11.5px}
.ia-n{width:20px;height:20px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-size:11.5px;flex:none}
.ia-count{margin-left:auto;font-size:12px;font-weight:700;color:var(--primary-strong)}
.ia-pick .pp-wrap{margin-bottom:0}
.ia-pick .pp-list{max-height:330px}
.ia-tray{display:grid;gap:6px;min-height:120px;max-height:236px;overflow:auto;padding:8px;border:1px dashed var(--primary-line);border-radius:var(--r);background:var(--surface-2);align-content:start}
.ia-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:100px;color:var(--faint);font-size:12.5px;text-align:center}
.ia-empty svg{width:20px;height:20px}
.ia-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:6px 8px;background:#fff;border:1px solid var(--primary-line);border-radius:var(--r)}
.ia-nm{min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.ia-nm b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.ia-qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:#fff}
.ia-qty button{width:26px;height:28px;border:0;background:var(--surface-3);cursor:pointer;font-size:15px;line-height:1;color:var(--text-2)}
.ia-qty button:hover{background:var(--primary-soft);color:var(--primary-strong)}
.ia-qty input{width:42px;height:28px;border:0;border-radius:0;text-align:center;padding:0;box-shadow:none;-moz-appearance:textfield}
.ia-qty input::-webkit-outer-spin-button,.ia-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ia-del{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.ia-del:hover{background:var(--danger-soft);color:var(--danger)}
.ia-del svg{width:14px;height:14px}
.ia-direct{margin-top:12px;display:grid;gap:6px}
.ia-sub{font-size:12px;font-weight:700;color:var(--muted)}
.ia-direct-row{display:grid;grid-template-columns:minmax(0,1fr) 64px auto;gap:6px}
.ia-more{margin-top:14px;border:1px solid var(--line);border-radius:var(--r)}
.ia-more summary{cursor:pointer;padding:9px 12px;font-size:12.5px;font-weight:700;color:var(--text-2);display:flex;align-items:center;gap:8px;list-style:none;background:var(--surface-2);border-radius:var(--r)}
.ia-more summary::-webkit-details-marker{display:none}
.ia-more summary::before{content:'▸';color:var(--faint);transition:transform .12s}
.ia-more[open] summary::before{transform:rotate(90deg)}
.ia-more summary small{margin-left:auto;font-weight:500;color:var(--muted)}
.ia-more-body{padding:12px}
.ia-dates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:10px}
.ia-dates .field label{white-space:nowrap}
.ia-dates input[type=date]{min-width:0;padding:0 6px;font-size:12px}
@media(max-width:820px){.ia-cols{grid-template-columns:minmax(0,1fr)}.ia-dates{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.item-modal .modal-body div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}}

/* 관리대장 > 월별 인화 */
.pr-nav{padding:10px 12px;margin-bottom:12px;display:grid;gap:8px}
.pr-month{font-size:16px;min-width:110px;text-align:center}
.pr-months{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.pr-months button{display:inline-flex;align-items:baseline;gap:4px;height:26px;padding:0 10px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--text-2);font-size:12px;font-weight:600;cursor:pointer}
.pr-months button small{color:var(--muted);font-weight:500;font-size:11px}
.pr-months button.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pr-months button.on small{color:var(--on-primary);opacity:.85}
.pr-quick{padding:10px 12px;margin-bottom:12px;display:grid;gap:8px;border-color:var(--primary-line);background:var(--primary-soft)}
.pr-quick-h{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--primary-strong)}
.pr-quick-h small{font-weight:500;color:var(--muted);font-size:11.5px;margin-left:6px}
.pr-quick-h svg{width:14px;height:14px}
.pr-quick-grid{display:grid;grid-template-columns:140px minmax(110px,1fr) 130px minmax(130px,1.3fr) 64px 100px 110px minmax(150px,1.2fr) auto auto;gap:6px;align-items:center}
.pr-quick-grid input,.pr-quick-grid select{min-width:0;width:100%}
.pr-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--primary-strong);background:#fff;border:1px solid var(--primary-line);border-radius:999px;padding:1px 4px 1px 8px}
.pr-link:empty{display:none}
.pr-link button{width:18px;height:18px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
.pr-link button:hover{background:var(--danger-soft);color:var(--danger)}
.pr-cust{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:11px;font-weight:600;color:var(--primary-strong);text-decoration:none;background:var(--primary-soft);border-radius:999px;padding:0 6px}
.pr-paid{border:0;cursor:pointer;font:inherit;font-weight:700}
@media(max-width:1100px){.pr-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pr-quick-grid .btn{grid-column:span 2}}
@media(max-width:600px){.pr-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pr-quick-grid .chk{white-space:nowrap;gap:5px}

/* 세부상품 설정: 구분·내용을 한 카드에 합치고 구분(항목)별 띠로 나눔 */
.pi.pi-one{display:block}
.pi-one .pi-nav{display:flex;flex-wrap:wrap;gap:4px;overflow:visible;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.pi-one .pi-nav button{width:auto;height:28px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;padding:0 10px}
.pi-one .pi-nav button span{overflow:visible;flex:none}
.pi-one .pi-nav button.on{border-color:var(--primary);background:var(--primary-soft)}
.pi-one .pi-wrap{border-radius:0 0 var(--r-lg) var(--r-lg)}
.pi-table tr.grp td{height:36px;padding:0 12px;background:var(--primary-soft);border-top:1px solid var(--primary-line);border-bottom:1px solid var(--primary-line);color:var(--primary-strong)}
.pi-grp{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;height:34px}
.pi-grp b{font-size:13px}
.pi-grp .faint{font-weight:600;color:var(--muted)}
.pi-grp .spacer{flex:1}
.pi-grp .chev{width:16px;height:16px;color:var(--primary);transition:transform .15s}
.pi-table tr.grp.shut .chev{transform:rotate(-90deg)}
.pi-grp .btn{height:24px;padding:0 8px;font-size:12px;background:#fff}

/* 세부상품 설정: 구분(항목)을 왼쪽 칸에 묶고 그 옆에 세부상품 나열 */
.pi-table th.pi-gcell-h{width:150px;padding-left:16px;text-align:center}
.pi-table td.pi-gcell{vertical-align:middle;text-align:center;padding:10px 12px 10px 16px;white-space:normal;min-width:130px;background:var(--primary-soft);border-right:1px solid var(--primary-line);border-bottom:1px solid var(--primary-line);color:var(--primary-strong)}
.pi-table td.pi-gcell b{display:block;font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.pi-table td.pi-gcell small{display:block;color:var(--muted);font-weight:600;margin:1px 0 0}
.pi-table td.pi-gcell .btn{height:24px;padding:0 8px;font-size:12px;background:#fff}
.pi-table tr.pg td:not(.pi-gcell){background:#fff}
.pi-table tr.pg.g1 td:not(.pi-gcell){background:var(--surface-2)}
.pi-table tr.pg.g-first td{border-top:2px solid var(--primary-line)}
.pi-table tr.pg.g-first:first-child td{border-top:0}
.pi-table tr.pg.clickable:hover td:not(.pi-gcell){background:var(--primary-soft)}
.pi-table td:first-child{padding-left:12px}

/* 세부상품 설정: 박스형 (한 줄 4개) */
.pi-groups{max-height:calc(100vh - var(--head) - 150px);overflow:auto;border-radius:0 0 var(--r-lg) var(--r-lg)}
.pi-g{display:grid;grid-template-columns:140px minmax(0,1fr);border-top:2px solid var(--primary-line)}
.pi-g:first-child{border-top:0}
.pi-g .pi-gcell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px;text-align:center;background:var(--primary-soft);border-right:1px solid var(--primary-line);color:var(--primary-strong)}
.pi-g .pi-gcell b{font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.pi-g .pi-gcell small{color:var(--muted);font-weight:600}
.pi-boxes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px;align-content:start;background:#fff}
.pi-g.g1 .pi-boxes{background:var(--surface-2)}
.pi-box{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px 12px;text-align:left;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer;font:inherit;color:inherit;transition:border-color .12s,box-shadow .12s}
.pi-box:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(40,36,32,.10)}
.pi-bname{font-weight:700;font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-height:2.7em}
.pi-bship{min-height:20px}
.pi-bprice{margin-top:auto;display:flex;justify-content:flex-end;align-items:baseline;gap:2px;font-variant-numeric:tabular-nums}
.pi-bprice{font-size:10.4px}
.pi-bprice b{font-size:12px}
.pi-bprice small{color:var(--muted);font-size:inherit}
.pi-bmeta{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.pi-boxes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.pi-groups{max-height:none}.pi-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pi-g{grid-template-columns:minmax(0,1fr)}.pi-g .pi-gcell{flex-direction:row;justify-content:flex-start;border-right:0;border-bottom:1px solid var(--primary-line);padding:8px 12px}}

/* 세부상품 설정: 구분 안에서 전용 출고항목도 왼쪽 칸으로 */
.pi-subs{display:grid;min-width:0}
.pi-sub{display:grid;grid-template-columns:104px minmax(0,1fr);min-width:0}
.pi-sub + .pi-sub{border-top:1px dashed var(--primary-line)}
.pi-scell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 8px;text-align:center;background:#fff8ef;border-right:1px solid var(--primary-line);color:var(--primary-strong)}
.pi-scell b{font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
.pi-scell small{color:var(--muted);font-weight:600;font-size:11.5px}
.pi-g.g1 .pi-scell{background:#fff3e3}
.pi-sub .pi-boxes{padding:10px;gap:8px}
@media(max-width:900px){.pi-sub{grid-template-columns:88px minmax(0,1fr)}}
@media(max-width:600px){.pi-sub{grid-template-columns:minmax(0,1fr)}.pi-scell{flex-direction:row;justify-content:flex-start;border-right:0;border-bottom:1px solid var(--primary-line);padding:6px 12px}}

/* 구분 순서 드래그 */
.pi-gcell[draggable=true]{cursor:grab}
.pi-g.dragging{opacity:.45}
.pi-g.drop-above{box-shadow:inset 0 3px 0 var(--primary)}
.pi-g.drop-below{box-shadow:inset 0 -3px 0 var(--primary)}
.pi-nav button[draggable=true]{cursor:grab}
.pi-nav button.dragging{opacity:.4}
.pi-nav button.drop-before{box-shadow:-3px 0 0 var(--primary)}
.pi-nav button.drop-after{box-shadow:3px 0 0 var(--primary)}

/* 드래그 정렬: 어디에 놓일지 확실히 보이게 (놓을 자리 막대 + 대상 윤곽 + 하단 안내 + 놓은 뒤 깜빡임) */
.pi-box.dragging{opacity:.4;transform:scale(.96);border:2px dashed var(--primary);background:var(--primary-soft)}
.pi-box.drop-target{outline:2px dashed var(--primary);outline-offset:1px;background:var(--primary-soft)}
.pi-box.drop-before{box-shadow:-7px 0 0 0 var(--primary)}
.pi-box.drop-after{box-shadow:7px 0 0 0 var(--primary)}
.pi-boxes{transition:none}
.pi-nav button.dragging{opacity:.45;transform:scale(.95);border:2px dashed var(--primary)}
.pi-nav button.drop-target{outline:2px dashed var(--primary);outline-offset:1px;background:var(--primary-soft)}
.pi-nav button.drop-before{box-shadow:-6px 0 0 0 var(--primary)}
.pi-nav button.drop-after{box-shadow:6px 0 0 0 var(--primary)}
.pi-g.dragging{opacity:.5;outline:3px dashed var(--primary);outline-offset:-3px}
.pi-g.drop-target{background:var(--primary-soft)}
.pi-g.drop-above{box-shadow:inset 0 7px 0 0 var(--primary)}
.pi-g.drop-below{box-shadow:inset 0 -7px 0 0 var(--primary)}
.pi-drop-hint{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:400;max-width:min(560px,90vw);padding:10px 18px;border-radius:999px;background:#2b2723;color:#fff;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none;opacity:0;transition:opacity .08s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-drop-hint.show{opacity:1}
.pi-drop-hint b{color:#ffd29a}
@keyframes pi-moved{0%,60%{background:#ffe3bd;box-shadow:0 0 0 3px var(--primary)}100%{box-shadow:0 0 0 0 transparent}}
.pi-box.moved,.pi-nav button.moved{animation:pi-moved 1.4s ease-out}
.pi-g.moved .pi-gcell{animation:pi-moved 1.4s ease-out}
.pi-bprice{justify-content:space-between;align-items:baseline}
.pi-bpv{margin-left:auto;display:inline-flex;align-items:baseline;gap:2px}
.pi-bstock{color:var(--muted);font-weight:600;white-space:nowrap}

/* 세부상품 박스: 이름·전용 출고항목 바로 수정 */
.pi-box{position:relative}
.pi-box:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.pi-bname{cursor:text;border-radius:4px;margin:-2px -4px;padding:2px 4px}
.pi-bname:hover{background:var(--primary-soft)}
.pi-bname-edit{width:100%;height:auto;min-height:2.7em;padding:3px 6px;font:inherit;font-weight:700;border:1.5px solid var(--primary);border-radius:4px;background:#fff;box-shadow:0 0 0 3px var(--primary-soft)}
.pi-bship-edit{position:absolute;top:6px;right:6px;z-index:2;display:none;align-items:center;gap:3px;max-width:70%;height:20px;padding:0 6px 0 8px;border:1px solid var(--primary-line);border-radius:999px;background:#fff;color:var(--primary-strong);font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-bship-edit svg{width:11px;height:11px;flex:none}
.pi-bship-edit:hover{background:var(--primary-soft);border-color:var(--primary)}
.pi-box:hover .pi-bship-edit,.pi-box:focus-within .pi-bship-edit{display:inline-flex}
@media(hover:none){.pi-bship-edit{display:inline-flex}}
.pi-box.dragging .pi-bship-edit,.pi-box.drop-target .pi-bship-edit{display:none}
.pi-ship-menu{position:fixed;z-index:400;width:180px;max-height:250px;overflow:auto;padding:4px;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:0 10px 28px rgba(40,36,32,.22)}
.pi-ship-menu button{display:block;width:100%;height:30px;padding:0 10px;border:0;border-radius:var(--r-sm);background:transparent;text-align:left;font-size:12.5px;cursor:pointer;color:var(--text-2)}
.pi-ship-menu button:hover{background:var(--surface-2)}
.pi-ship-menu button.on{background:var(--primary-soft);color:var(--primary-strong);font-weight:700}

/* 왼쪽 구분·전용 출고항목 칸: 이름을 눌러 바로 수정 */
.pi-rename{cursor:text;border-radius:4px;padding:1px 5px;margin:-1px -5px}
.pi-rename:hover{background:#fff;box-shadow:0 0 0 1px var(--primary-line)}
.pi-gname-edit{width:100%;min-width:80px;height:26px;padding:0 6px;text-align:center;font:inherit;font-weight:700;font-size:13px;border:1.5px solid var(--primary);border-radius:4px;background:#fff;color:var(--text);box-shadow:0 0 0 3px var(--primary-soft)}

/* 설정 > 전용 출고항목 */
.ship-help{padding:12px 16px;color:var(--text-2);font-size:12.5px;line-height:1.55;border-bottom:1px solid var(--line);background:var(--surface-2)}
.ship-add{padding:12px 16px;border-bottom:1px solid var(--line);gap:8px}
.ship-table td,.ship-table th{white-space:nowrap}
.ship-table th:first-child,.ship-table td:first-child{width:88px;padding-left:16px}
.ship-table tr.off td{opacity:.55}
.ship-table tr.off td:last-child,.ship-table tr.off td:nth-last-child(2){opacity:1}
.ship-ord{display:inline-flex;gap:2px}
.ship-ord .mini[disabled]{opacity:.3;cursor:default}
.ship-nm{display:inline-flex;align-items:center;gap:8px}
.ship-name{cursor:text;border-radius:4px;padding:2px 6px;margin:-2px -6px;font-size:13.5px}
.ship-name:hover{background:var(--primary-soft)}
.ship-name-edit{height:28px;min-width:200px;padding:0 8px;font:inherit;font-weight:700;border:1.5px solid var(--primary);border-radius:4px;background:#fff;box-shadow:0 0 0 3px var(--primary-soft)}
.ship-table .btn[disabled]{opacity:.35;cursor:not-allowed}
.ship-table td:last-child{width:56px;text-align:center}
.ship-table .switch{display:inline-block;vertical-align:middle}
.ship-table th:nth-last-child(2),.ship-table td:nth-last-child(2){width:64px;text-align:center}

/* 설정 > 전용 출고항목: 출고항목별 지정 세부상품 / 일반 출고 상품 */
.ship-toggle{display:inline-grid;place-items:center;width:22px;height:22px;border:0;border-radius:5px;background:transparent;color:var(--faint);cursor:pointer;flex:none;padding:0}
.ship-toggle:hover{background:var(--primary-soft);color:var(--primary-strong)}
.ship-toggle .chev{width:15px;height:15px;transition:transform .15s;transform:rotate(-90deg)}
.ship-toggle[aria-expanded=true] .chev{transform:rotate(0)}
.ship-table tr.ship-detail>td{padding:0;white-space:normal;max-width:none;background:var(--surface-2);border-bottom:1px solid var(--line)}
.ship-panel{padding:12px 16px 14px 62px;display:grid;gap:12px;border-left:3px solid var(--primary-line)}
.ship-groups{display:grid;gap:10px}
.ship-grp{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;align-items:start}
.ship-grp-h{padding:5px 8px;border-radius:var(--r-sm);background:var(--primary-soft);color:var(--primary-strong);font-size:12.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.ship-grp-h small{margin-left:6px;color:var(--muted);font-weight:600}
.ship-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.ship-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:28px;padding:3px 6px 3px 10px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;font:inherit;font-size:12.5px;color:var(--text)}
.ship-chip b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ship-chip small{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ship-chip.off{opacity:.5}
.ship-chip button{display:grid;place-items:center;width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;padding:0}
.ship-chip button:hover{background:var(--danger-soft);color:var(--danger)}
.ship-chip.pick{cursor:pointer;padding-right:8px}
.ship-chip.pick svg{width:12px;height:12px;color:var(--faint)}
.ship-chip.pick:hover{border-color:var(--primary);background:var(--primary-soft)}
.ship-empty{padding:4px 2px;color:var(--muted);font-size:12.5px}
.ship-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:10px;border-top:1px dashed var(--line-strong)}
.ship-quick-h{display:inline-flex;align-items:center;gap:5px;margin-right:6px;font-size:12px;font-weight:700;color:var(--primary-strong)}
.ship-quick input{height:30px}
.ship-general{padding:12px 16px 14px;max-height:420px;overflow:auto}
@media(max-width:700px){.ship-panel{padding-left:16px}.ship-grp{grid-template-columns:minmax(0,1fr)}}

/* 고객 영문명: 왼쪽 카드의 한글 이름 바로 아래 */
.sum-en{margin:-2px 0 4px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--muted);overflow-wrap:anywhere}

/* 형제·자매 연동 안내 */
.sync-note{display:flex;align-items:flex-start;gap:7px;padding:8px 10px;border:1px solid var(--primary-line);border-radius:var(--r);background:var(--primary-soft);color:var(--primary-strong);font-size:12px;line-height:1.5}
.sync-note svg{flex:none;margin-top:2px}
.sync-note b{font-weight:700}

/* 신규 고객 등록: 계약·상품 / 촬영 일정 한 번에 */
.nc-steps{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.nc-steps button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 6px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer}
.nc-steps button:hover{border-color:#cfe3f4;background:#eaf4fd}
.nc-steps .n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:11.5px;font-weight:800}
.nc-steps b{color:var(--primary-strong);font-weight:700}
.nc-steps .arrow{color:var(--faint);display:inline-grid}
.nc-extra{display:grid;gap:14px;margin-top:14px}
.nc-extra .fcard{border-color:#cfe3f4}
.nc-extra .fcard > .fcard-head{background:#eaf4fd;border-bottom-color:#cfe3f4;border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.nc-extra .fcard > .fcard-head .ico{background:#fff;box-shadow:inset 0 0 0 1px #cfe3f4}
.nc-extra .fcard > .fcard-head h3{color:#0b6aa8}
.nc-extra .fcard > .fcard-head .hint{background:#fff;color:#0b6aa8}
.nc-rows{display:grid;gap:10px}
.nc-row{padding:12px 14px 12px;border:1px solid var(--line);border-left:3px solid #0284c7;border-radius:var(--r);background:var(--surface-2)}
.nc-row-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.nc-title{font-size:13px;color:#0b6aa8}
.nc-nowrap{flex-wrap:nowrap;gap:6px}
.nc-nowrap input{min-width:0}
.nc-auto{margin-top:10px}
.nc-info{margin-top:6px;font-size:12px}
.nc-balance{font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--surface-3);color:var(--muted)}
.nc-balance.due{background:var(--danger-soft);color:var(--danger)}
.nc-balance.ok{background:var(--ok-soft);color:var(--ok)}
.nc-foot{display:flex;align-items:center;gap:12px;margin-top:10px}
.nc-totals{display:flex;gap:16px;font-size:12.5px;color:var(--muted)}
.nc-totals b{color:var(--text)}
.nc-summary{font-size:12.5px;font-weight:700;color:var(--primary-strong);margin-right:12px}
@media(max-width:700px){.nc-steps{width:100%}}
.cform-col > .nc-extra{margin-top:0}

/* 신규 등록: 형제·자매·쌍둥이 */
.nc-note{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;margin-bottom:10px;border:1px solid #cfe3f4;border-radius:var(--r);background:#f3f9fe;color:#0b6aa8;font-size:12.5px;line-height:1.5}
.nc-note svg{flex:none;margin-top:2px}
.nc-empty{padding:10px 2px;color:var(--muted);font-size:12.5px}
.nc-fam-main{background:#fff;border-left-color:var(--primary)}
.nc-main-name{font-size:13px}
.nc-row-h .tag{margin-left:2px}
.nc-main-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nc-family .fcard-head h3{white-space:nowrap}