/* 고객관리 솔루션 - 목업 확정 스타일 (hybrid-base + final + form) 을 합친 것 */

/* ── hybrid-base.css ── */
/* 샘플 6A/6B/6C 공통 부품. 색·둥글기는 각 페이지의 :root 변수로 바꾼다. */
*{box-sizing:border-box}
/* 글자 크기 단계 - 여기만 바꾸면 전체가 따라옴. 모바일 값은 파일 끝 @media 블록 */
:root{--fs-xxs:10.5px;--fs-xs:11.5px;--fs-sm:12px;--fs-base:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:20px}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs-base)/1.5 "Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;height:100vh;display:flex;overflow:hidden}
button,input,select{font:inherit;color:inherit}
.page{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}  /* min-height:0 이 없으면 목록이 길 때 .page 가 화면 밖으로 늘어나 안쪽 스크롤이 안 생김 */
.top{height:50px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 16px;gap:8px;flex-shrink:0}
.top h1{font-size:var(--fs-lg);font-weight:600;margin:0}
.crumb{color:var(--muted);font-size:var(--fs-sm);margin-left:6px}
.top .sp{flex:1}
.btn{padding:6px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accentInk)}
.work{flex:1;display:flex;min-height:0;padding:12px;gap:12px}

/* 목록 */
.list{width:290px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.list .head{padding:10px 12px 8px;border-bottom:1px solid var(--line)}
.list .head .row{display:flex;align-items:center;gap:6px}
.list .head b{font-size:var(--fs-md)}
.list .head #cnt{color:var(--muted);margin-left:auto}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:1px 9px;font-size:var(--fs-sm);cursor:pointer;color:var(--muted)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accentInk)}
.items{flex:1;overflow:auto}
.item{padding:9px 12px;border-bottom:1px solid var(--line2);cursor:pointer}
.item:hover{background:var(--surface2)}
.item.sel{background:var(--accentSoft);box-shadow:inset 3px 0 0 var(--accent)}
.item-top{display:flex;align-items:center;gap:6px}
.item .nm{font-weight:600;flex:1}
.item .sub{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lock{font-size:var(--fs-xs)}

/* 상세 */
.detail{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dscroll{flex:1;overflow:auto}
.dhead{padding:12px 16px 4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dhead .title{display:flex;align-items:baseline;gap:8px}
.dhead h2{margin:0;font-size:var(--fs-xl)}
.dhead .en{color:var(--muted);font-size:var(--fs-sm)}
.dhead .tags{display:flex;gap:4px}
.dhead .acts{margin-left:auto;display:flex;gap:6px}
/* 숫자 카드 (4번에서 가져온 부분) */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:8px 16px 4px}
.kpi{border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;background:var(--surface2)}
.kpi .k{color:var(--muted);font-size:var(--fs-xs)}
.kpi .v{font-size:var(--fs-xl);font-weight:700;line-height:1.3}
.kpi .s{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.k-warn .v{color:var(--warn)}.kpi.k-bad .v{color:var(--bad)}.kpi.k-ok .v{color:var(--ok)}.kpi.k-info .v{color:var(--info)}
.kpi.k-warn{border-color:var(--warnLine)}.kpi.k-bad{border-color:var(--badLine)}
/* 3열 정보 (2번에서 가져온 부분) */
.fgrid{display:grid;grid-template-columns:84px 1fr 84px 1fr 84px 1fr;gap:6px 10px;padding:10px 16px 12px;align-items:center;border-bottom:1px solid var(--line)}
.fgrid .l{color:var(--muted);font-size:var(--fs-sm);text-align:right}
.fgrid .v{border:1px solid var(--line2);border-radius:var(--r);padding:4px 8px;min-height:28px;background:var(--field)}
.fgrid .w3{grid-column:span 3}.fgrid .w5{grid-column:span 5}
.tabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--surface);position:sticky;top:0;z-index:1}
.tabs button{border:0;background:none;padding:9px 11px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--accentText);border-bottom-color:var(--accent);font-weight:600}
.tabs .n{background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:0 5px;font-size:var(--fs-xxs);margin-left:3px}
.tabbody{padding:12px 16px}

/* 탭 안 공통 표 */
table.grid{width:100%;border-collapse:collapse;margin:4px 0 12px}
table.grid th{background:var(--surface2);border-bottom:1px solid var(--line);border-top:1px solid var(--line);padding:6px 8px;text-align:left;font-weight:600;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
table.grid td{border-bottom:1px solid var(--line2);padding:6px 8px;vertical-align:top}
.badge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.b-ok{background:var(--okSoft);color:var(--ok)}.b-warn{background:var(--warnSoft);color:var(--warn)}.b-bad{background:var(--badSoft);color:var(--bad)}
.b-info{background:var(--infoSoft);color:var(--info)}.b-mute{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.lic{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:12px}
.lic-head{font-size:var(--fs-md);margin-bottom:4px}
.kv-inline{color:var(--muted);margin:3px 0;font-size:var(--fs-sm)}.kv-inline b{color:var(--ink)}
.chain{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:6px}
.chain-step{background:var(--surface2);border:1px solid var(--line);padding:0 8px;border-radius:10px;font-size:var(--fs-xs)}
.chain-arrow{color:var(--muted)}
.dim{color:var(--muted);opacity:.7}.add{color:var(--info);font-size:var(--fs-xs)}
.empty{color:var(--muted);padding:20px;text-align:center}
.note-internal{color:var(--warn);margin:0 0 6px;font-size:var(--fs-sm)}.note-public{color:var(--info);margin:0 0 6px;font-size:var(--fs-sm)}
.internal{color:var(--warn)}
h4{margin:10px 0 4px;font-size:var(--fs-base)}
.mini{padding:0 8px;font-size:var(--fs-xs);border:1px solid var(--line);background:var(--surface);border-radius:var(--r);cursor:pointer}
.sample-flag{position:fixed;right:12px;bottom:10px;background:#fff3cd;border:1px solid #e6c77f;padding:3px 8px;font-size:var(--fs-xs);color:#8a6d1a;border-radius:4px}

/* ── final.css ── */
/* 확정 스타일 (6C 기반): 상단 가로 메뉴 + 인디고 강조색 + 다크 모드.
   hybrid-base.css 다음에 불러와서 덮어쓴다. */
:root{--bg:#f1f3f7;--surface:#fff;--surface2:#f5f6fa;--field:#f8f9fc;--line:#e1e4ec;--line2:#eceef4;--ink:#1a1f2e;--muted:#646b7d;
  --accent:#4f46e5;--accentInk:#fff;--accentText:#4338ca;--accentSoft:#eef0ff;--r:8px;
  --ok:#15924a;--okSoft:#e6f6ed;--warn:#c27606;--warnSoft:#fdf1da;--warnLine:#f0d193;--bad:#d63333;--badSoft:#fde7e7;--badLine:#f2b2b2;--info:#4f46e5;--infoSoft:#eef0ff;
  --bar:#1e2433;--barInk:#c3c9d8}
@media (prefers-color-scheme:dark){:root{--bg:#0e111a;--surface:#161a26;--surface2:#1c2130;--field:#191e2c;--line:#2a3042;--line2:#222838;--ink:#e4e7f0;--muted:#979eb2;
  --accent:#8b85ff;--accentInk:#0e111a;--accentText:#a9a4ff;--accentSoft:#23224a;
  --ok:#4fd48a;--okSoft:#13301f;--warn:#f3b545;--warnSoft:#35280e;--warnLine:#5a4413;--bad:#f47676;--badSoft:#3a1919;--badLine:#5c2727;--info:#8b85ff;--infoSoft:#23224a;
  --bar:#0a0d14;--barInk:#a9b0c2}}
body{flex-direction:column}

/* 상단 가로 메뉴 (짧은 글자) */
.topbar{height:48px;background:var(--bar);display:flex;align-items:center;gap:4px;padding:0 16px;flex-shrink:0}
.topbar .logo{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;margin-right:18px;font-size:var(--fs-md)}
.topbar .logo i{width:26px;height:26px;border-radius:7px;background:var(--accent);display:grid;place-items:center;font-style:normal;font-size:var(--fs-base);color:#fff}
.topbar a{color:var(--barInk);text-decoration:none;padding:6px 12px;border-radius:6px;position:relative;font-size:var(--fs-base)}
.topbar a:hover{background:#2c3446;color:#fff}
.topbar a.on{background:#343d52;color:#fff;font-weight:600}
.topbar a .n{background:var(--bad);color:#fff;border-radius:8px;font-size:var(--fs-xxs);padding:0 5px;margin-left:4px;vertical-align:1px}
.topbar .sp{flex:1}
.topbar .who{color:var(--barInk);font-size:var(--fs-sm);display:flex;align-items:center;gap:8px}
.topbar .who b{width:28px;height:28px;border-radius:50%;background:#343d52;color:#fff;display:grid;place-items:center}

/* 고객관리: 목록 상단 통합검색 */
.list .gsearch{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);margin-bottom:8px}
.list .filters{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px}
.list .filters select{padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface2);font-size:var(--fs-sm)}
.pagehead{display:flex;align-items:center;gap:8px;padding:10px 12px 0}
.pagehead h1{font-size:var(--fs-lg);margin:0}
.pagehead .sp{flex:1}
.work{padding-top:10px}
.kpis{grid-template-columns:repeat(4,1fr)}
.kpi{border-left:3px solid var(--line)}
.kpi.k-warn{border-left-color:var(--warn)}.kpi.k-bad{border-left-color:var(--bad)}.kpi.k-info{border-left-color:var(--info)}.kpi.k-ok{border-left-color:var(--ok)}
/* 간소형 숫자 카드: 한 줄 띠 (라벨 · 값 · 보조설명) */
.kpis.compact,.tiles.compact{display:flex;gap:8px;flex-wrap:wrap}
.kpis.compact{padding:6px 16px 6px}
.tiles.compact{margin-bottom:12px}
.kpis.compact .kpi,.tiles.compact .tile{flex:1 1 200px;min-width:0;display:flex;align-items:baseline;gap:8px;padding:6px 12px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:6px}
.kpis.compact .k,.tiles.compact .k{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.kpis.compact .v,.tiles.compact .v{font-size:var(--fs-md);font-weight:700;line-height:1.3;white-space:nowrap}
.kpis.compact .k-warn,.tiles.compact .t-warn{border-left-color:var(--warn)}
.kpis.compact .k-bad,.tiles.compact .t-bad{border-left-color:var(--bad)}
.kpis.compact .k-ok,.tiles.compact .t-ok{border-left-color:var(--ok)}
.kpis.compact .k-info,.tiles.compact .t-info{border-left-color:var(--info)}
.kpis.compact .s,.tiles.compact .s{font-size:var(--fs-xs);color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fgrid .v{background:transparent;border:0;border-bottom:1px dashed var(--line);border-radius:0;padding:4px 2px}
.tabs button.on{background:var(--accentSoft);border-radius:6px 6px 0 0}

/* 대시보드·포털 공통 (스크롤 페이지) */
.scroll{flex:1;overflow:auto}
.wrap{max-width:1360px;margin:0 auto;padding:14px 18px 30px}
.headrow{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.headrow h1{font-size:var(--fs-xl);margin:0}
.headrow .sub{color:var(--muted);font-size:var(--fs-sm)}
.headrow .sp{flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:5px 12px;cursor:pointer;color:var(--muted);font-size:var(--fs-sm)}
.seg button.on{background:var(--accent);color:var(--accentInk)}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r);padding:10px 14px;cursor:pointer}
.tile:hover{border-color:var(--accent)}
.tile .k{color:var(--muted);font-size:var(--fs-sm)}.tile .v{font-size:24px;font-weight:700;line-height:1.3}.tile .s{color:var(--muted);font-size:var(--fs-xs)}
.tile.t-warn{border-left-color:var(--warn)}.tile.t-warn .v{color:var(--warn)}
.tile.t-bad{border-left-color:var(--bad)}.tile.t-bad .v{color:var(--bad)}
.tile.t-info{border-left-color:var(--info)}.tile.t-info .v{color:var(--info)}
.tile.t-ok{border-left-color:var(--ok)}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:start}
.stack{display:flex;flex-direction:column;gap:12px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel > h2{font-size:var(--fs-md);margin:0;padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.panel > h2 .more{margin-left:auto;font-size:var(--fs-sm);color:var(--accentText);font-weight:400;cursor:pointer}
.panel > h2 .cnt{background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:0 6px;font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.panel .in{padding:4px 14px 10px}
.panel .in.flush{padding:0}
.panel table.grid{margin:0}
.panel .in.flush table.grid th:first-child,.panel .in.flush table.grid td:first-child{padding-left:14px}
.rowlist .r{display:flex;gap:8px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line2)}
.rowlist .r:last-child{border-bottom:0}
.rowlist .r .main{flex:1;min-width:0}
.rowlist .r .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowlist .r .m{color:var(--muted);font-size:var(--fs-sm)}
.cname{font-weight:600;color:inherit;text-decoration:none}
.cname:hover{color:var(--accentText);text-decoration:underline}
.subcap{color:var(--muted);font-size:var(--fs-sm);margin:10px 0 2px}
/* 만료 타임라인 (구간별) */
.band{padding:8px 14px 4px;font-size:var(--fs-sm);font-weight:700;display:flex;align-items:center;gap:6px}
.band::after{content:"";flex:1;height:1px;background:var(--line)}
.tl{display:flex;gap:10px;padding:5px 14px;align-items:center}
.tl .dd{width:50px;text-align:right;font-weight:700;font-size:var(--fs-base);flex-shrink:0}
.tl .bar{width:4px;align-self:stretch;border-radius:2px;flex-shrink:0}
.tl .main{flex:1;min-width:0}.tl .t{font-weight:600}.tl .m{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── form.css ── */
/* 입력 화면·팝업 공통 (기능 폴더 목업). hybrid-base.css, final.css 다음에 불러온다. */
.fpage{flex:1;overflow:auto}
.fwrap{max-width:1200px;margin:0 auto;padding:14px 18px 30px}
.fhead{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.fhead h1{font-size:var(--fs-xl);margin:0}
.fhead .crumb{color:var(--muted);font-size:var(--fs-sm);margin:0}
.fhead .sp{flex:1}
.fsec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px}
.fsec>h2{font-size:var(--fs-md);margin:0;padding:10px 14px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fsec>h2 .hint{font-weight:400;color:var(--muted);font-size:var(--fs-sm)}
.fsec>h2 .sp{flex:1}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;padding:12px 14px;align-items:start;border-bottom:0}
.sample-flag{bottom:auto;top:56px}   /* 하단 저장 버튼을 가리지 않도록 */
.fgrid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid .w2{grid-column:span 2}.fgrid .wall{grid-column:1/-1}
.fld label.lb{display:block;font-size:var(--fs-sm);color:var(--muted);margin-bottom:3px}
.req{color:var(--bad);font-weight:700}
.fld input:not([type=checkbox]):not([type=radio]),.fld select,.fld textarea{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface2)}
.fld textarea{min-height:64px;resize:vertical}
.fld .help{font-size:var(--fs-xs);color:var(--muted);margin-top:3px}
.fld .err{font-size:var(--fs-xs);color:var(--bad);margin-top:3px}
.fld.bad input,.fld.bad select{border-color:var(--bad)}
.fld input[readonly]{background:transparent;border-style:dashed}
.radios{display:flex;gap:14px;flex-wrap:wrap;padding:5px 0}
.radios label{display:flex;gap:5px;align-items:center;font-size:var(--fs-base)}
.radios label.dis{color:var(--muted);text-decoration:line-through}
.chk{display:flex;gap:6px;align-items:center;font-size:var(--fs-base)}
.lockline{font-size:var(--fs-xs);color:var(--warn)}
.tblwrap{padding:0 14px 12px}
.tblwrap table.grid{margin:6px 0}
.qty input{width:80px;padding:4px 6px;border:1px solid var(--line);border-radius:5px;background:var(--surface2);text-align:right}
.qty td.na{background:var(--surface2);color:var(--line);text-align:center}
.fbar{flex-shrink:0;background:var(--surface);border-top:1px solid var(--line);padding:10px 18px;display:flex;gap:8px;align-items:center}
.fbar .sp{flex:1}
.fbar .note{color:var(--muted);font-size:var(--fs-sm)}
.tabsline{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:12px}
.tabsline button{border:0;background:none;padding:8px 14px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}
.tabsline button.on{color:var(--accentText);border-bottom-color:var(--accent);font-weight:600}
.pane{display:none}.pane.on{display:block}
.mode-badge{font-size:var(--fs-xs);padding:2px 8px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);color:var(--muted)}
.popup-mark{font-size:var(--fs-xxs);background:var(--accentSoft);color:var(--accentText);border-radius:4px;padding:0 5px;margin-left:2px;font-weight:600;vertical-align:1px}
/* 팝업 */
.modal-bg{position:fixed;inset:0;background:rgba(15,20,32,.45);display:none;align-items:flex-start;justify-content:center;padding-top:64px;z-index:50}
.modal-bg.on{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:10px;width:min(640px,94vw);max-height:82vh;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.modal.wide{width:min(920px,96vw)}
.modal.narrow{width:min(440px,94vw)}
.modal .mh{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
.modal .mh h3{margin:0;font-size:var(--fs-md);flex:1}
.modal .mf{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface)}
.modal .mf .sp{flex:1}
.modal .mnote{padding:8px 16px 0;color:var(--muted);font-size:var(--fs-sm)}
.xbtn{border:0;background:none;font-size:var(--fs-2xl);line-height:1;cursor:pointer;color:var(--muted)}
.toast{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);background:#1e2433;color:#fff;padding:9px 18px;border-radius:8px;display:none;z-index:60;font-size:var(--fs-base)}
.toast.on{display:block}
.diff td.old{color:var(--bad);text-decoration:line-through}.diff td.new{color:var(--ok);font-weight:600}

/* ── 앱 전용 추가 ── */
.flashes{position:fixed;left:50%;transform:translateX(-50%);bottom:40px;display:flex;flex-direction:column;gap:6px;z-index:70}
.flashes .toast{position:static;transform:none}
.toast.b-info{background:#1e2433}.toast.b-bad{background:var(--bad)}.toast.b-warn{background:#9a6a0a}.toast.b-ok{background:#15803d}
.toast-err{background:var(--badSoft);color:var(--bad);padding:8px 12px;border-radius:6px;margin:8px}
.page-scroll{flex:1;overflow:auto}
.wrap{max-width:1360px;margin:0 auto;padding:14px 18px 30px}
.cname{font-weight:600;color:inherit;text-decoration:none}.cname:hover{color:var(--accentText);text-decoration:underline}
.btn{text-decoration:none;display:inline-block;color:inherit}
.btn.pri{color:var(--accentInk)}
a.mini{text-decoration:none;color:inherit;display:inline-block}
.inline{display:inline}
.fld .err{display:block}
.ro-note{font-size:var(--fs-sm);color:var(--muted)}
.htmx-request.htmx-indicator,.htmx-request .htmx-indicator{opacity:1}
.htmx-indicator{opacity:0;transition:opacity .2s}
.dev-banner{background:#fef3c7;color:#92400e;font-size:var(--fs-sm);padding:3px 16px;text-align:center}
.empty-box{padding:30px;text-align:center;color:var(--muted)}
table.grid td form{display:inline}
.kpis.compact .kpi a{color:inherit}
/* 고객 상세 3열 정보 (form.css의 .fgrid와 겹치지 않게 이름 분리) */
.igrid{display:grid;grid-template-columns:84px 1fr 84px 1fr 84px 1fr;gap:6px 10px;padding:10px 16px 12px;align-items:center;border-bottom:1px solid var(--line)}
.igrid .l{color:var(--muted);font-size:var(--fs-sm);text-align:right}
.igrid .v{border-bottom:1px dashed var(--line);padding:4px 2px;min-height:28px}
.igrid .w3{grid-column:span 3}.igrid .w5{grid-column:span 5}
.tabacts{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.tabacts .sp{flex:1}
.quick{display:flex;gap:4px;margin-top:4px}.quick button{font-size:var(--fs-xs);padding:1px 7px;border:1px solid var(--line);border-radius:5px;background:var(--surface);cursor:pointer}
.sum td.tot{font-weight:700;color:var(--accentText)}
.list form{margin:0}
.nowrap{white-space:nowrap}
/* 티켓 (final-tickets.html) */
.tk{flex:1;display:flex;gap:12px;padding:12px;min-height:0}
.tlist{width:330px;flex-shrink:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden}
.tlist .head{padding:10px 12px;border-bottom:1px solid var(--line)}
.tlist .head input[type=search],.tlist .head input[name=q]{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface2);margin-bottom:8px}
.tlist .head label{font-size:var(--fs-sm);color:var(--muted);display:flex;gap:5px;align-items:center;margin-top:6px}
.titems{flex:1;overflow:auto}
.ti{display:block;padding:10px 12px;border-bottom:1px solid var(--line2);cursor:pointer;color:inherit;text-decoration:none}
.ti:hover{background:var(--surface2)}
.ti.sel{background:var(--accentSoft);box-shadow:inset 3px 0 0 var(--accent)}
.ti .r1{display:flex;gap:6px;align-items:center}
.ti .no{color:var(--muted);font-size:var(--fs-xs);font-family:Consolas,monospace}
.ti .t{font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ti .m{color:var(--muted);font-size:var(--fs-sm);display:flex;gap:6px;margin-top:2px}
.tdetail{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden}
.dh{padding:12px 16px;border-bottom:1px solid var(--line)}
.dh .no{color:var(--muted);font-family:Consolas,monospace;font-size:var(--fs-sm)}
.dh h2{margin:2px 0 6px;font-size:var(--fs-lg)}
.dh .tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.thread{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;background:var(--bg)}
.msg{max-width:78%;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--surface)}
.msg.customer{align-self:flex-start}
.msg.staff{align-self:flex-end;border-color:var(--accent);background:var(--accentSoft)}
.msg.partner{align-self:flex-end;border-color:#b98f3c}
.msg.note{align-self:center;max-width:88%;background:var(--warnSoft);border:1px dashed var(--warn)}
.msg.system{align-self:center;background:none;border:0;color:var(--muted);font-size:var(--fs-sm);padding:0}
.msg .who{font-size:var(--fs-sm);color:var(--muted);margin-bottom:3px;display:flex;gap:6px;align-items:center}
.msg .who b{color:var(--ink)}
.msg .body{white-space:pre-wrap;line-height:1.55}
.files{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.file{font-size:var(--fs-sm);border:1px solid var(--line);border-radius:6px;padding:1px 8px;background:var(--surface);color:var(--accentText);text-decoration:none}
.composer{border-top:1px solid var(--line);padding:10px 16px;background:var(--surface)}
.composer .modes{display:flex;gap:4px;margin-bottom:6px}
.composer .modes label{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:3px 10px;cursor:pointer;font-size:var(--fs-sm)}
.composer .modes input{display:none}
.composer .modes label:has(input:checked){background:var(--accent);color:var(--accentInk);border-color:var(--accent)}
.composer .modes label.note:has(input:checked){background:var(--warn);border-color:var(--warn);color:#fff}
.composer:has(input[value=note]:checked) textarea{background:var(--warnSoft);border-color:var(--warn)}
.composer textarea,.composer input[name=title]{width:100%;min-height:70px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface2);resize:vertical}
.composer input[name=title]{min-height:0;margin:6px 0}
.composer .row{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.composer .row .sp{flex:1}
.composer .row select{padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface2)}
.composer .guide{font-size:var(--fs-sm);color:var(--muted)}
.closed{border-top:1px solid var(--line);padding:14px 16px;background:var(--surface2);display:flex;gap:12px;align-items:center}
.closed p{margin:0;color:var(--muted)}
.tprops{width:270px;flex-shrink:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:auto}
.tprops .sec{padding:10px 14px;border-bottom:1px solid var(--line2)}
.tprops .k{font-size:var(--fs-xs);color:var(--muted);margin-bottom:3px}
.tprops select,.tprops input{width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface2)}
.tprops .btn{width:100%;margin-top:4px}
.flow{display:flex;gap:3px;flex-wrap:wrap;font-size:var(--fs-xs)}
.flow span{padding:1px 6px;border-radius:4px;background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.flow span.on{background:var(--accent);color:var(--accentInk);border-color:var(--accent)}
.matrix td,.matrix th{text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix input[disabled]{opacity:.25}
@media print{.topbar,.fbar,.dev-banner,.flashes,.noprint{display:none!important}body{height:auto;overflow:visible;display:block}.fpage{overflow:visible}}

/* ══ 모바일 (820px 이하) - 데스크톱 CSS 는 그대로 두고 이 층만 덧씌움 ══
   원칙: 2단·3단 → 1단 세로 쌓기 · 표는 가로 스크롤 · 팝업은 전체 폭 · 입력 글자 16px(iOS 자동 확대 방지) */
.m-only{display:none}
.btn,.mini,.badge,.chip{white-space:nowrap}
/* 데스크톱: 왼쪽 목록은 화면 끝까지 늘리지 않고 약 80% 높이에서 멈춤 (안쪽 스크롤). 모바일은 그대로 */
@media (min-width:821px){
  .list,.tlist,html .ulist,html .roles{align-self:flex-start;max-height:calc(80vh - 90px)}
  html .cl{max-height:calc(80vh - 136px)}
  html .pl{max-height:calc(80vh - 120px)}
}  /* 버튼·뱃지는 어떤 폭에서도 글자를 세로로 쪼개지 않음 */
@media (max-width:820px){
  /* 글자 단계만 키움 - 데스크톱 px 는 :root 의 변수 값 */
  :root{--fs-xxs:12px;--fs-xs:13px;--fs-sm:14px;--fs-base:15px;--fs-md:16px;--fs-lg:17px;--fs-xl:19px;--fs-2xl:21px}
  .m-only{display:inline-block}
  .d-only,.m-hide{display:none!important}   /* d-only: 데스크톱에서만 보이는 부연 문구 · m-hide: 모바일에서 감추는 표 열 */
  body{height:auto;min-height:100vh;overflow:auto}
  input,select,textarea{font-size:16px}       /* 16px 미만이면 iOS 가 입력칸 포커스 때 화면을 확대함 */
  .mini{padding:5px 10px}
  /* 상단 메뉴: 두 줄로 감싸고 메뉴는 가로 스크롤 */
  .topbar{height:auto;flex-wrap:wrap;padding:6px 8px;gap:2px}
  .topbar .logo{width:100%;margin:0 0 2px}
  .topbar a{padding:7px 9px}
  .topbar .sp{display:none}
  .topbar .who{width:100%;justify-content:flex-end;margin-top:2px}
  /* 페이지 틀: 내부 스크롤 대신 문서 스크롤 */
  .page,.fpage,.scroll,.page-scroll,.dscroll{overflow:visible;height:auto}
  .work,.tk{flex-direction:column;padding:8px;gap:8px;height:auto;min-height:0}
  .list,.tlist{width:100%;max-height:42vh}
  .tprops{width:100%}
  .thread{max-height:55vh}
  .fwrap,.wrap{padding:10px}
  .fhead,.pagehead,.headrow{gap:6px}
  .fhead .crumb,.pagehead .sub,.headrow .sub,.fsec h2 .hint{display:none}   /* 약식: 화면 설명 문구는 모바일에서 생략 */
  .tabsline{flex-wrap:wrap;gap:4px;align-items:center}
  /* 고객 상세 */
  .dhead .acts{margin-left:0;width:100%;flex-wrap:wrap}
  .igrid{grid-template-columns:84px 1fr}
  .igrid .w3,.igrid .w5{grid-column:span 1}
  .kpis.compact .kpi,.tiles.compact .tile{flex:1 1 45%}
  .tiles{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
  /* 입력 폼: 한 열 */
  .fgrid,.fgrid.c2,.fgrid.c4{grid-template-columns:1fr}
  .fgrid .w2,.fgrid .w3,.fgrid .w5,.fgrid .wall{grid-column:1/-1}
  /* 표는 가로로 넘김 */
  .tblwrap,.tabbody,.panel .in,.lic{overflow-x:auto}
  /* 칸은 줄바꿈 없이 옆으로 넓어지고 표 전체가 가로 스크롤 - 긴 글 칸(.wrap)만 접어서 표시 */
  table.grid th,table.grid td{white-space:nowrap}
  table.grid td.wrap,table.grid th.wrap{white-space:normal;min-width:200px;max-width:320px}
  html .src td,html .src th{white-space:normal;min-width:170px}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 팝업 */
  .modal-bg{padding:6px;align-items:flex-start}
  .modal,.modal.wide,.modal.narrow{width:100%;max-height:94vh}
  .fbar{flex-wrap:wrap;padding:8px 10px}
  .fbar .note{width:100%;order:-1}
  .flashes{width:calc(100% - 16px)}
  /* 페이지별 <style> 에 정의된 2단 레이아웃 (html 접두로 우선순위 확보) */
  html .lay{flex-direction:column}
  html .cl,html .pl,html .roles,html .ulist{width:100%;max-height:36vh;position:static}
  html .rmain,html .umain{width:100%}
  html .authgrid{grid-template-columns:1fr}
  html .brand{padding:18px 16px}html .brand .lg{font-size:20px}html .brand ul,html .brand p{display:none}
  html .acard{width:100%;padding:18px}
  html .prods,html .cgrid,html .cats,html .addform{grid-template-columns:1fr}
  html .hello{flex-wrap:wrap}
  html .composer .row{gap:6px}
  html .switch{display:none}
}