/* 고객 관리 화면 (public/customers-ui.js). Every selector starts with .cust- so nothing else on the console changes; panels,
   buttons, badges, tables (cards on phones), diag-grid and info-strip are the shared components. Sizes 12·13·14·16px,
   radius 10·16px (pills 999px), neutral greys + forest green, accents --chart-1 and --chart-2 only (tokens.css). */
.cust-tabs{margin-bottom:24px}
.cust-strip{justify-content:space-between;flex-wrap:wrap;color:var(--text-2);background:var(--bg-selected);font-size:13px}
.cust-strip .button{margin-left:auto}
.cust-reset{font-size:13px}
.cust-who{display:flex;align-items:center;gap:10px;min-width:0}
.cust-avatar{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg-selected);color:var(--text-brand);font-size:13px;font-weight:700}
.cust-list td.num,.cust-list th.num{text-align:right;white-space:nowrap}
/* The chip menus hang below the filter bar: the panel must not cut them off when a filter leaves one or two rows. */
.cust-list.panel.no-pad{overflow:visible}
.cust-list .table-scroll{border-radius:0 0 var(--r-lg) var(--r-lg)}
.cust-name{font-weight:700;color:var(--text-1);text-decoration:none}
.cust-name:hover,.cust-name:focus-visible{text-decoration:underline}
.cust-sub{display:block;margin-top:2px;font-size:12px;color:var(--text-2);overflow-wrap:anywhere}
.cust-means span{display:block;overflow-wrap:anywhere}
.cust-next b{font-weight:600}
.cust-next small{display:block;font-size:12px;color:var(--text-2)}
.cust-due-overdue,.cust-due-overdue b{color:var(--amber-500)}
.cust-due-today,.cust-due-today b{color:var(--text-brand)}
.cust-stage{margin:0;background:var(--bg-selected);color:var(--text-brand)}
.cust-stage.cust-stage-inquiry{background:var(--bg-muted);color:var(--text-2)}
.cust-stage.cust-stage-won{background:var(--bg-selected);color:var(--success-text)}
.cust-stage.cust-stage-lost{background:var(--warning-bg);color:var(--warning-text)}
.cust-stage.cust-stage-closed{background:var(--n-150);color:var(--text-2)}
.cust-more{padding:16px;text-align:center;border-top:1px solid var(--line-2)}
.cust-candidates{margin-top:24px}
.cust-candidates:focus{outline:none}
.cust-candidates .panel-head{margin-bottom:8px}
.cust-candidates h2{font-size:16px;margin:0}
.cust-row-actions{margin:0;flex-wrap:wrap;justify-content:flex-end}
.cust-note{margin:12px 0 0;font-size:12px}
.cust-form [hidden],.cust-manage [hidden]{display:none!important}
/* 영업 단계 보드: lanes scroll sideways inside their own box, the page never does. */
/* position:relative keeps each card's sr-only label inside the scroller; without it the labels in lanes off to the right widened the phone page. */
.cust-board{position:relative;display:flex;gap:12px;align-items:flex-start;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;padding:0 0 12px;-webkit-overflow-scrolling:touch}
.cust-board:focus-visible{outline:2px solid var(--action-brand);outline-offset:2px;border-radius:16px}
.cust-lane{flex:0 0 240px;min-width:0;padding:12px;border-radius:16px;background:var(--bg-muted)}
.cust-lane header{display:flex;align-items:center;gap:8px;min-height:32px;margin-bottom:12px}
.cust-lane h2{margin:0;font-size:14px;font-weight:700}
.cust-lane em{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--chart-1);white-space:nowrap}
.cust-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 6px;border-radius:999px;background:var(--bg-surface);color:var(--text-2);font-size:12px;font-weight:700}
.cust-cards{display:flex;flex-direction:column;gap:8px}
.cust-lane-empty{margin:0;padding:8px 0;font-size:12px;color:var(--text-2);text-align:center}
.cust-lane-stack{display:flex;flex-direction:column;gap:12px;flex:0 0 240px;min-width:0}
.cust-lane-stack .cust-lane{flex:none}
.cust-lane-folded summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:14px;font-weight:700;list-style:none}
.cust-lane-folded summary::-webkit-details-marker{display:none}
.cust-lane-folded summary::after{content:'펼치기';margin-left:auto;font-size:12px;font-weight:600;color:var(--text-2)}
.cust-lane-folded[open] summary::after{content:'접기'}
.cust-lane-folded[open] summary{margin-bottom:12px}
.cust-lane-lost{background:var(--warning-bg)}
.cust-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-surface);font-size:13px}
.cust-card .cust-name{overflow-wrap:anywhere}
.cust-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px}
.cust-card-meta .score-tag{margin:0}
.cust-amount{font-weight:700;color:var(--text-1)}
.cust-move{display:flex;gap:6px;margin-top:4px}
.cust-move select{flex:1;min-width:0;font-size:13px}
.cust-cards{min-height:48px}
.cust-note-drag{display:none}
/* PC (mouse): cards are dragged between lanes, so the stage picker only shows when the keyboard is inside the card. */
@media (hover:hover) and (pointer:fine){
 .cust-card[draggable=true]{cursor:grab;transition:box-shadow .15s,border-color .15s}
 .cust-card[draggable=true]:hover{border-color:var(--line-1);box-shadow:0 2px 8px color-mix(in srgb,var(--forest-950) 8%,transparent)}
 .cust-card[draggable=true] .cust-name{cursor:pointer}
 .cust-card .cust-move{display:none}
 .cust-card:focus-within .cust-move{display:flex}
 .cust-note-drag{display:inline}.cust-note-pick{display:none}
}
.cust-card.is-dragging{opacity:.45;cursor:grabbing}
.cust-dragging .cust-lane{transition:background .15s,outline-color .15s;outline:2px dashed transparent;outline-offset:-2px}
.cust-lane.cust-drop{background:var(--bg-selected);outline-color:var(--action-brand)}
/* 고객 상세 */
.cust-head-meta{font-size:14px;color:var(--text-2)}
.cust-stop-strip{background:var(--warning-bg);color:var(--sand-700);font-size:13px}
.cust-detail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.cust-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.cust-panel{margin:0;min-width:0}
.cust-panel h2{margin:0 0 12px;font-size:16px}
.cust-panel .panel-head{margin-bottom:12px}
.cust-panel .panel-head h2{margin:0}
.cust-panel .diag-grid{grid-template-columns:96px minmax(0,1fr)}
.cust-panel code{padding:2px 6px;border-radius:10px;background:var(--bg-muted);font-size:12px;overflow-wrap:anywhere}
.cust-touch{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.cust-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:0 0 12px;padding:0;list-style:none}
.cust-steps li{font-size:12px;color:var(--text-2);text-align:center}
.cust-steps li::before{content:'';display:block;height:6px;margin-bottom:6px;border-radius:999px;background:var(--n-150)}
.cust-steps li.done::before,.cust-steps li.current::before{background:var(--action-brand)}
.cust-steps li.current{font-weight:700;color:var(--text-brand)}
.cust-off{margin:0 0 12px;font-size:13px}
.cust-timeline{margin:0;padding:0;list-style:none}
.cust-timeline li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.cust-timeline li:last-child{border-bottom:0}
.cust-timeline p{margin:0 0 4px;font-size:14px;overflow-wrap:anywhere}
.cust-timeline small{font-size:12px;color:var(--text-2)}
.cust-timeline .diag-grid{margin:8px 0}
.cust-tl-kind{align-self:start;padding:4px 6px;border-radius:10px;background:var(--bg-selected);color:var(--text-brand);font-size:12px;font-weight:700;text-align:center;white-space:nowrap}
.cust-tl-chat .cust-tl-kind{background:var(--bg-selected);color:var(--success-text)}
.cust-tl-stage .cust-tl-kind,.cust-tl-lead .cust-tl-kind{background:var(--warning-bg);color:var(--warning-text)}
.cust-digest{font-size:13px;color:var(--text-2)}
@media (max-width:1150px){
 .cust-detail{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cust-detail .cust-col:last-child{grid-column:1/-1}
}
@media (max-width:760px){
 .cust-detail{grid-template-columns:minmax(0,1fr)}
 .cust-lane,.cust-lane-stack{flex-basis:220px}
 .cust-row-actions{justify-content:flex-start}
}
@media (max-width:480px){
 .cust-timeline li{grid-template-columns:minmax(0,1fr);gap:6px}
 .cust-tl-kind{justify-self:start}
 .cust-panel .diag-grid{grid-template-columns:80px minmax(0,1fr)}
 /* Phone: one lane per board width, snapping, so a lane is never cut in half. Sized against the board, not 100vw:
    on a phone the layout viewport grows to fit wide content, so vw-sized lanes widened the page they were in. */
 .cust-board{scroll-snap-type:x mandatory;scroll-padding:0}
 .cust-lane,.cust-lane-stack{flex-basis:calc(100% - 40px);scroll-snap-align:start}
 .cust-move select{font-size:14px}
}
/* 메일 연동 (umail-) — 설정 › 메일 연동 (public/mail-connect-ui.js). The form fields reuse the alert form's classes. */
.umail-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;margin-top:24px}
.umail-stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.umail-card{min-width:0;padding:20px;border:1px solid var(--line-2);border-radius:16px;background:var(--bg-surface)}
.umail-card h3{margin:0 0 8px;font-size:16px}
.umail-card textarea{width:100%}
.umail-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.umail-card-head h3{margin:0}
.umail-card-head .badge{margin-left:auto}
.umail-kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 12px;margin:0 0 16px;font-size:14px}
.umail-kv dt{color:var(--text-2);font-weight:600}
.umail-kv dd{margin:0;overflow-wrap:anywhere}
.umail-tip{margin:0 0 16px;padding:12px;border-radius:10px;background:var(--bg-muted);color:var(--text-2);font-size:13px}
.umail-form-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.umail-form-foot .button{margin-left:auto}
.umail-steps{margin:0;padding:0;list-style:none;counter-reset:umail}
.umail-steps li{position:relative;padding:0 0 12px 36px;counter-increment:umail;font-size:14px}
.umail-steps li::before{content:counter(umail);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--bg-selected);color:var(--text-brand);font-size:12px;font-weight:700}
.umail-steps small{display:block;margin-top:2px;font-size:12px;color:var(--text-2)}
@media (max-width:1150px){
 .umail-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
 .umail-card{padding:16px}
 .umail-kv{grid-template-columns:minmax(0,1fr);gap:2px}
 .umail-kv dd{margin-bottom:8px}
 .umail-form-foot .button{width:100%;margin-left:0}
}

/* 문자 연동 (sms-) — 설정 › 문자 연동 (시안 19~21) */
.sms-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.sms-stack{display:grid;gap:16px;min-width:0}
.sms-panel .panel{margin:0}
.sms-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.sms-head h3{margin:0;font-size:16px}
.sms-head .badge:first-of-type{margin-left:auto}
.sms-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.sms-fields label{display:grid;gap:8px;font-size:14px;font-weight:600}
.sms-help{margin:12px 0 0;font-size:13px;color:var(--text-2);overflow-wrap:anywhere}
.sms-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px}
/* The global form-button top margin would push the save button off the row's centre line. */
.sms-actions>.button.primary.small,.umail-form-foot>.button.primary.small{margin-top:0;margin-bottom:0}
.sms-actions .muted{font-size:13px}
.umail-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sms-settings-form{margin-top:24px;padding-top:24px;border-top:1px solid var(--bg-muted)}
.umail-links .button{margin:0}
.sms-actions .button.primary{margin-left:auto}
.sms-note{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--bg-subtle);font-size:13px;color:var(--text-2)}
.sms-warn{margin:12px 0 0;padding:10px 12px;border:1px solid var(--line-1);border-radius:10px;background:var(--bg-subtle);font-size:13px;color:var(--warning-text)}
.sms-side h3{margin:0 0 12px;font-size:16px}
.sms-steps,.sms-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.sms-steps{counter-reset:sms-step}
.sms-steps li,.sms-list li{display:grid;gap:2px;padding-left:36px;position:relative;font-size:14px}
.sms-steps li small,.sms-list li small{font-size:12px;color:var(--text-2)}
.sms-steps li::before{counter-increment:sms-step;content:counter(sms-step);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:999px;background:var(--bg-muted);color:var(--text-2);font-size:12px;font-weight:700;display:grid;place-items:center}
.sms-steps li.sms-now::before{background:var(--action-brand);color:var(--text-inverse)}
.sms-steps li.sms-done::before{content:'✓';background:var(--bg-selected);color:var(--text-brand)}
.sms-list li::before{content:'';position:absolute;left:9px;top:8px;width:6px;height:6px;border-radius:999px;background:var(--action-brand)}
.sms-picks{display:grid;gap:8px;margin:16px 0 0;padding:0;border:0}
.sms-picks legend{margin-bottom:8px;font-size:14px;font-weight:600}
.sms-sender-form label.sms-pick{display:flex;align-items:center;gap:12px;margin:0;font-weight:400;padding:12px 16px;border:1px solid var(--line-2);border-radius:10px;font-size:14px;cursor:pointer}
.sms-sender-form label.sms-pick input{flex:0 0 auto;margin:0}
.sms-pick:has(input:checked){border-color:var(--action-brand);background:var(--bg-selected)}
.sms-pick small{margin-left:auto;font-size:12px}
.sms-sender-form label{display:grid;gap:8px;margin-top:16px;font-size:14px;font-weight:600}
.sms-table{width:100%;font-size:13px}
.sms-reason{display:block;margin-top:4px;font-size:12px;color:var(--text-2)}
.sms-replace{margin-top:16px;font-size:14px}
.sms-replace summary{cursor:pointer;font-weight:600}
@media (max-width:1150px){
 .sms-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
 .sms-fields{grid-template-columns:minmax(0,1fr)}
 .sms-actions .button{flex:1}
 .sms-actions .button.primary{margin-left:0}
}
/* AI 분석·유입 분석 (insight-, inflow-) — public/insights-ui.js (시안 1·2), public/inflow-ui.js (시안 3·17). Bars are HTML with
   an inline width, like the reports screen; --chart-1 for counts and rises, --chart-2 for falls. */
.insight-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
/* One column as wide as the panel: an auto track grew to the longest unwrapped title, pushing the button out and adding a sideways scroll. */
.insight-threads{position:sticky;top:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-height:calc(100vh - 32px);overflow-x:hidden;overflow-y:auto}
.insight-new{justify-content:center}
.insight-search{margin:0}
.insight-group h3{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--text-2)}
.insight-group ul{margin:0;padding:0;list-style:none}
.insight-group,.insight-group li{min-width:0}
.insight-group a{display:block;padding:8px 10px;border-radius:10px;font-size:14px;color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insight-group a:hover,.insight-group a:focus-visible{background:var(--bg-muted)}
.insight-group a.active{background:var(--bg-selected);color:var(--text-brand);font-weight:700}
.insight-cap{margin:0;font-size:12px}
.insight-main{display:grid;gap:16px;min-width:0}
.insight-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.insight-head h2{margin:0 0 4px;font-size:20px}
.insight-head p{margin:0;font-size:13px}
.insight-intro h2{margin:0 0 8px;font-size:20px}
.insight-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.insight-examples .button{white-space:normal;text-align:left}
.insight-turn{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line-2)}
.insight-q{justify-self:end;max-width:min(560px,100%);margin:0;padding:10px 14px;border-radius:16px;background:var(--bg-selected);font-size:14px;overflow-wrap:anywhere}
.insight-steps{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.insight-steps li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:10px;background:var(--bg-muted);font-size:13px}
.insight-steps li::before{content:'✓';flex:0 0 auto;font-weight:700;color:var(--chart-1)}
.insight-steps li span{flex:1;min-width:0;overflow-wrap:anywhere}
.insight-steps li.insight-step-off::before{content:'–';color:var(--amber-500)}
.insight-steps li.insight-step-off{color:var(--text-2)}
.insight-steps code{font-size:12px;color:var(--text-2)}
.insight-answer{font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.insight-note{margin:0;padding:10px 12px;border-radius:10px;background:var(--warning-bg);color:var(--sand-700);font-size:13px}
.insight-card{padding:12px 14px;border:1px solid var(--forest-200);border-left:4px solid var(--chart-1);border-radius:10px;background:var(--bg-app)}
.insight-card b{font-size:14px}
.insight-card p{margin:6px 0 0;font-size:14px;overflow-wrap:anywhere}
.insight-card.insight-low{border-left-color:var(--warning-mark);background:var(--bg-app);border-color:var(--line-1)}
.insight-chart{margin:0;display:grid;gap:6px}
.insight-chart figcaption{margin-bottom:4px;font-size:14px;font-weight:700}
.insight-bar{display:grid;grid-template-columns:minmax(80px,160px) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px}
.insight-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insight-bar b{font-size:13px;white-space:nowrap}
.insight-track{height:10px;border-radius:999px;background:var(--bg-muted);overflow:hidden}
.insight-track i{display:block;height:100%;border-radius:999px;background:var(--chart-1)}
.insight-track i.insight-neg{background:var(--warning-mark)}
.insight-bar.insight-low .insight-track i{opacity:.45}
.insight-table h3{margin:0 0 8px;font-size:14px}
.insight-table table{width:100%;font-size:13px}
.insight-table tr.insight-low td{color:var(--text-2)}
.insight-table p{margin:6px 0 0;font-size:12px}
.insight-digest{display:block;margin-top:4px;font-size:12px;color:var(--text-2);overflow-wrap:anywhere}
.insight-flag{display:inline-block;padding:2px 6px;border-radius:999px;background:var(--warning-bg);color:var(--sand-700);font-size:12px;font-weight:600;white-space:nowrap}
.insight-cites p{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px;font-size:13px}
.insight-chip{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--bg-selected);color:var(--text-brand);font-size:12px;font-weight:600;text-decoration:none}
.insight-chip.insight-gone{background:var(--bg-muted);color:var(--text-2)}
.insight-foot{margin:0;font-size:12px}
.insight-ask{display:grid;gap:8px}
.insight-ask textarea{width:100%;resize:vertical;font-size:14px}
.insight-ask .row-actions{justify-content:flex-end;margin:0}
.insight-usage{display:grid;grid-template-columns:auto minmax(80px,1fr);align-items:center;gap:6px 12px;font-size:13px}
.insight-usage small{grid-column:1/-1;font-size:12px;color:var(--text-2)}
.insight-usage.insight-warn .insight-track i{background:var(--warning-mark)}
.inflow-tabs{margin-bottom:16px}
.inflow-tabs a{text-decoration:none}
.inflow-funnel{display:grid;gap:8px;margin-bottom:12px}
.inflow-step{display:grid;grid-template-columns:96px minmax(0,1fr) 80px 56px;align-items:center;gap:10px;font-size:14px}
.inflow-step b{text-align:right;font-size:14px}
.inflow-step small{font-size:12px;color:var(--text-2);text-align:right}
.inflow-track{height:14px;border-radius:999px;background:var(--bg-muted);overflow:hidden}
.inflow-track i{display:block;height:100%;border-radius:999px;background:var(--chart-1)}
.inflow-note{font-size:13px}
.inflow-table{width:100%;font-size:13px}
.inflow-table small{font-size:12px;color:var(--text-2)}
.inflow-table tr.inflow-low td{color:var(--text-2)}
.inflow-path{overflow-wrap:anywhere}
.inflow-flag{display:inline-block;padding:2px 6px;border-radius:999px;background:var(--warning-bg);color:var(--sand-700);font-size:12px;font-weight:600;white-space:nowrap}
.inflow-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.inflow-card{display:grid;gap:4px;padding:14px;border:1px solid var(--line-2);border-radius:16px}
.inflow-card span{font-size:13px;color:var(--text-2)}
.inflow-card strong{font-size:20px}
.inflow-card strong small{font-size:13px;font-weight:400}
.inflow-card small{font-size:12px;color:var(--text-2)}
.inflow-explain h2{margin-top:0;font-size:20px}
.inflow-explain p{font-size:14px}
@media (max-width:1150px){
 .insight-layout{grid-template-columns:minmax(0,1fr)}
 .insight-threads{position:static;max-height:none}
 .inflow-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
 .insight-bar{grid-template-columns:minmax(64px,96px) minmax(0,1fr) auto}
 .inflow-step{grid-template-columns:72px minmax(0,1fr) 64px;font-size:13px}
 .inflow-step small{grid-column:2/-1;text-align:left}
 .inflow-cards{grid-template-columns:minmax(0,1fr)}
}

/* 회신함 (reply-) */
.reply-strip{margin-bottom:12px}
/* 작업대(doc/44 §4-8): 목록 300 · 편집 · 점검 280, 상담 로그 작업대(.inbox-work)와 같은 테두리·열 구분 */
.reply-work{display:grid;grid-template-columns:300px minmax(0,1fr) 280px;height:calc(100dvh - 200px);min-height:620px;border:1px solid var(--n-150);border-radius:var(--r-lg);background:var(--bg-surface);overflow:hidden}
.reply-work.no-side{grid-template-columns:300px minmax(0,1fr)}
.reply-col{min-width:0;min-height:0;overflow:auto}
.reply-list-col{border-right:1px solid var(--n-150)}
.reply-side-col{border-left:1px solid var(--n-150);background:var(--bg-subtle)}
.reply-list-head{position:sticky;top:0;z-index:1;padding:10px 12px;border-bottom:1px solid var(--n-150);background:var(--bg-surface)}
.reply-seg{display:flex;gap:2px;padding:3px;border-radius:var(--r-sm);background:var(--bg-muted)}
.reply-seg button{flex:1;min-width:0;height:32px;padding:0 6px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--text-2);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.reply-seg button b{font-size:12px;font-weight:600;color:var(--text-3)}
.reply-seg button.on{background:var(--bg-surface);color:var(--text-1);font-weight:700;box-shadow:var(--e-1)}
.reply-rows{margin:0;padding:0;list-style:none}
.reply-item{display:flex;gap:10px;width:100%;padding:12px;border:0;border-bottom:1px solid var(--n-100);border-left:3px solid transparent;background:var(--bg-surface);color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.reply-item.sel{background:var(--bg-selected);border-left-color:var(--forest-800)}
.reply-avatar{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--avatar-1-bg);color:var(--avatar-1-fg);font-size:14px;font-weight:700}
.reply-item-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.reply-item-top{display:flex;align-items:center;gap:6px}
.reply-item-top b{font-size:14px;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-item-top time{margin-left:auto;flex:none;font-size:12px;color:var(--text-3)}
.reply-item-pv{font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-item-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.reply-work .panel{margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.reply-main-col>.panel{padding:20px 24px}
.reply-main-col>.empty{padding:48px 24px}
.reply-side-col>.panel{padding:16px;border-bottom:1px solid var(--n-150)}
.reply-side-col>.panel:last-child{border-bottom:0}
.reply-side-col h2{font-size:14px}
.reply-editor{display:grid;gap:14px}
.reply-editor-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reply-editor-head h2{margin:0}
.reply-editor-head .reply-channel{margin-left:auto}
.reply-editor-head .reply-back{display:none}
.reply-foot .button[disabled]{opacity:1;background:var(--bg-muted);border-color:var(--line-1);color:var(--text-2)}
.reply-channel{display:inline-flex;gap:6px}
.reply-channel [aria-disabled=true]{opacity:.5;cursor:not-allowed}
/* The channel choice sits in the editor head beside the status badge. */
.reply-channel .button{min-height:var(--h-sm);height:var(--h-sm)}
.reply-people{font-size:14px}
.reply-people small{font-size:12px}
.reply-warn{color:var(--warning-text);font-weight:600}
.reply-stop{background:var(--warning-bg);color:var(--warning-text)}
.reply-subject{display:flex;gap:12px;align-items:baseline;font-size:14px}
.reply-subject span{font-size:13px;color:var(--text-2)}
.reply-view,.reply-final{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7;padding:14px 16px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-surface)}
.reply-final{max-height:320px;overflow:auto;margin:12px 0}
.reply-added{background:transparent;color:inherit;text-decoration:underline;text-decoration-color:var(--forest-400);text-decoration-thickness:3px;text-underline-offset:3px}
.reply-plain .reply-added{text-decoration:none}
.reply-blank{padding:0 4px;border-radius:10px;background:var(--warning-bg);color:var(--warning-text);font-weight:700}
.reply-token{color:var(--text-brand);font-weight:700}
.reply-meta{margin:0;font-size:13px;color:var(--text-2)}
.reply-sig{margin:0;white-space:pre-wrap;font-size:13px;color:var(--text-2)}
.reply-sig small{display:block;font-size:12px;color:var(--text-2)}
.reply-tools{justify-content:flex-end}
.reply-empty p{margin:0 0 12px;font-size:14px}
.reply-edit,.reply-rewrite,.reply-in-form{display:grid;gap:12px}
.reply-edit textarea,.reply-rewrite textarea,.reply-in-form textarea{width:100%;font-size:14px;line-height:1.6}
.reply-rewrite{padding:14px 16px;border-radius:16px;background:var(--bg-selected)}
.reply-rewrite label small{font-size:12px;font-weight:400;color:var(--text-2)}
.reply-rewrite-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.reply-rewrite-foot .field-help{margin:0}
/* Shared form spacing put a top margin on the button and lifted it off the row's centre. */
.reply-rewrite-foot.reply-rewrite-foot>.button.button,.reply-foot.reply-foot>.row-actions.row-actions{margin:0}
.reply-chips{display:flex;flex-wrap:wrap;gap:6px}
.reply-chip{border:1px solid var(--line-2);border-radius:999px;background:var(--bg-surface);padding:4px 10px;font-size:12px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.reply-checks ul,.reply-cards,.reply-versions ol,.reply-open-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.reply-checks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;font-size:13px;overflow-wrap:anywhere}
.reply-checks li small{font-size:12px}
.reply-check-ok span{color:var(--success-text);font-weight:700}
.reply-check-warn span{color:var(--amber-500);font-weight:700}
.reply-check-block{color:var(--warning-text)}
.reply-check-block span{color:var(--warning-text);font-weight:700}
.reply-cards li{font-size:13px;overflow-wrap:anywhere}
.reply-cards small{display:block;font-size:12px;color:var(--text-2)}
.reply-versions li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;font-size:13px}
.reply-versions p{margin:2px 0;font-size:13px;color:var(--text-2);overflow-wrap:anywhere}
.reply-versions small{font-size:12px;color:var(--text-2)}
.reply-ver-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--bg-selected);color:var(--text-brand);font-size:12px;font-weight:700}
.reply-open-list{margin:8px 0}
.reply-open-list li{font-size:13px}
.reply-approval{font-size:14px}
.reply-acks{display:grid;gap:8px;margin:12px 0;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px}
.reply-acks legend{padding:0 4px;font-size:13px;font-weight:700}
.reply-ack{font-size:13px;align-items:flex-start}
.reply-raw{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;font-size:13px;padding:12px;border-radius:10px;background:var(--bg-selected)}
/* 1439px 이하: 목록 · 편집 두 열, 점검은 편집 아래(페이지가 스크롤) */
@media (max-width:1439px){
 .reply-work,.reply-work.no-side{grid-template-columns:280px minmax(0,1fr);height:auto;min-height:620px;overflow:visible}
 .reply-col{overflow:visible}
 .reply-list-col{grid-row:1/span 2}
 .reply-side-col{grid-column:2;border-left:0;border-top:1px solid var(--n-150)}
}
@media (max-width:1150px){
 .reply-work,.reply-work.no-side{grid-template-columns:240px minmax(0,1fr)}
 .reply-main-col>.panel{padding:16px}
}
@media (max-width:760px){
 .reply-work,.reply-work.no-side{display:block;min-height:0;border:0;border-radius:0;background:transparent}
 .reply-list-col{border:1px solid var(--n-150);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-surface)}
 .reply-work:not(.has-detail) :is(.reply-main-col,.reply-side-col){display:none}
 .reply-work.has-detail .reply-list-col{display:none}
 .reply-main-col,.reply-side-col{border:1px solid var(--n-150);border-radius:var(--r-lg);background:var(--bg-surface)}
 .reply-side-col{margin-top:12px}
 .reply-editor-head .reply-back{display:grid;place-items:center;flex:none;width:var(--h-md);height:var(--h-md);margin-left:-12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-1);font:inherit;font-size:20px;line-height:1;text-decoration:none;cursor:pointer}
 .reply-editor-head .reply-channel{margin-left:0;width:100%}
 .reply-rewrite-foot{flex-direction:column;align-items:stretch}
 .reply-foot .row-actions{width:100%}
 .reply-foot .row-actions .button{flex:1}
}

/* 견적서 (quote-) — public/quotes-ui.js (시안 18). The paper is the printed document; printing copies it next to the console
   (.quote-print-copy) and hides the console while the document element carries .quote-printing. */
.quote-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.quote-head h2,.quote-head h3{margin:0}
/* A heading followed by a muted note gets 8px under it (usability.css); in this one-line head it sat above the centre. */
.quote-head.quote-head.quote-head>h2,.quote-head.quote-head.quote-head>h3{margin:0}
.quote-head h3{font-size:16px}
.quote-sub{display:block;font-size:12px;color:var(--text-2);overflow-wrap:anywhere}
.quote-no{font-weight:700;white-space:nowrap}
.quote-list{margin-bottom:24px}
.quote-list .quote-head{padding:20px 24px 12px}
.quote-row-actions{display:flex;gap:8px;flex-wrap:wrap}
.quote-strip{margin:0;font-size:13px}
.quote-form-grid{display:grid;gap:16px}
/* 판매자 정보 on the quote form (the supplier block, user decision 2026-10-22): a plain group, two columns on PC. */
.quote-seller-fields{min-width:0;margin:8px 0 16px;padding:16px;border:1px solid var(--line-2);border-radius:10px}
.quote-seller-fields legend{padding:0 4px;font-size:14px;font-weight:600}
.quote-seller-fields>.field-help{margin:0 0 12px}
.quote-seller-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.quote-seller-wide{grid-column:1/-1}
@media (max-width:480px){.quote-seller-grid{grid-template-columns:minmax(0,1fr)}}
.quote-form-grid label{display:grid;gap:8px}
.quote-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:24px;align-items:start}
.quote-stack{display:grid;gap:16px;min-width:0}
.quote-suggest,.quote-ai,.quote-editor,.quote-totals{display:grid;gap:12px}
.quote-ai-form{display:grid;gap:8px}
.quote-ai-form textarea{min-height:64px}
.quote-ai>.field-help{margin:0;font-size:12px}
.quote-ai-list{margin:0;padding-left:18px;display:grid;gap:2px}
.quote-ai-dropped{color:var(--warning-text)}
.quote-suggest>p,.quote-ai>p,.quote-editor p{margin:0;font-size:13px}
.quote-suggest-box{display:grid;gap:8px;padding:12px;border:1px dashed var(--forest-300);border-radius:10px;background:var(--bg-selected);font-size:13px}
.quote-suggest-box p{margin:0;overflow-wrap:anywhere}
.quote-editor form{display:grid;gap:16px}
.quote-editor [hidden]{display:none!important}
.quote-rows{display:grid}
.quote-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
/* Flex, not fixed grid columns: the optional months field left the amount and 「빼기」 in the wrong columns when hidden. */
.quote-row label{display:grid;gap:8px;font-size:13px}
/* Inputs and the amount/빼기 button share one bottom line, so the form's 16px label margin would lift the inputs above the button. */
.quote-row.quote-row label{margin:0;gap:0}
.quote-row-item{flex:1 1 calc(100% - 96px);min-width:0}
.quote-row-spec{flex:2 1 180px;min-width:0}
.quote-row-price{flex:1 1 120px;min-width:0}
.quote-row-qty{flex:0 0 88px}
.quote-row-months{flex:0 0 104px}
.quote-row-ratio{flex:0 0 88px}
.quote-row-hint{display:block;flex:1 0 100%;font-size:12px;color:var(--text-2)}
.quote-row-hint:empty{display:none}
.quote-row-amount{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;justify-content:flex-end;min-height:var(--h-md);font-size:13px;font-weight:700;white-space:nowrap}
.quote-row>.button{flex:none;min-height:var(--h-md);height:var(--h-md)}
.quote-warn{display:block;flex:1 0 100%;font-size:12px;color:var(--warning-text)}
/* Top-aligned: the help line under 유효기간 made bottom alignment push its date input above the discount select. */
.quote-terms{align-items:start}
.quote-terms .field-help{font-size:12px;font-weight:400}
.quote-totals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px}
.quote-totals-grid small{display:block;font-size:12px;color:var(--text-2)}
.quote-totals-grid b{display:block;font-size:16px;white-space:nowrap}
.quote-totals-grid b small{display:block;font-size:12px;font-weight:600;color:var(--text-2)}
.quote-totals-grid .quote-grand{font-size:20px;color:var(--text-brand)}
.quote-totals .field-help{margin:0}
.quote-note{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}
.quote-paper{position:relative;background:var(--bg-surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 8px 20px color-mix(in srgb,var(--forest-950) 6%,transparent);padding:24px;font-size:12px;line-height:1.6;color:var(--forest-900);min-width:0;overflow-wrap:anywhere}
.quote-paper-draft{margin:0 0 12px;padding:6px 10px;border-radius:10px;background:var(--warning-bg);color:var(--warning-text);font-size:12px;font-weight:700;text-align:center}
.quote-paper-band{display:grid;justify-items:center;gap:2px;padding:12px;border-radius:10px;background:var(--action-brand);color:var(--text-inverse);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.quote-paper-title{margin:0;font-size:20px;letter-spacing:6px;text-align:center;color:var(--text-inverse)}
.quote-paper-band span{font-size:12px;font-weight:700;letter-spacing:3px}
.quote-paper-parties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;margin-top:16px}
.quote-paper .quote-paper-kv{margin-top:0}
.quote-paper .quote-paper-kv th{width:38%;background:var(--bg-selected);color:var(--text-brand);font-weight:600}
.quote-paper .quote-paper-kv th,.quote-paper .quote-paper-kv td{padding:4px 8px!important;white-space:normal}
.quote-paper-subject{display:flex;gap:12px;margin:16px 0 0;padding:8px 12px;border:2px solid var(--action-brand);font-size:13px}
.quote-paper-subject b{flex:none}
.quote-paper-lead{margin:12px 0 0;font-size:12px;color:var(--text-2)}
.quote-paper .quote-paper-lines{margin-top:8px}
.quote-paper .quote-paper-lines th{background:var(--action-brand);color:var(--text-inverse);white-space:normal}
/* The lines table fits the 470px preview and a phone: every cell but the amount wraps (a unit price breaks at 「/ 단위」). */
.quote-paper .quote-paper-lines td,.quote-paper .quote-paper-lines .num{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.quote-paper .quote-paper-lines .quote-paper-amt,.quote-paper .quote-paper-lines .quote-paper-no{white-space:nowrap}
.quote-paper .quote-paper-lines .quote-paper-no{width:1%}
/* The read-only lines table (approved quote) fits its card instead of the console tables' 650px minimum. */
.quote-read.quote-read{min-width:0}
.quote-read td,.quote-read .num{white-space:normal;word-break:keep-all}
.quote-paper-terms{margin-top:16px;border:2px solid var(--action-brand)}
.quote-paper-terms h3{margin:0;padding:4px 8px;background:var(--action-brand);color:var(--text-inverse);font-size:12px;text-align:center;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.quote-paper-terms p{margin:0;padding:8px;white-space:pre-wrap}
.quote-paper table{width:100%;min-width:0;border-collapse:collapse;margin-top:16px;font-size:12px}
/* 견적서 표 선 기준(2026-10-22 사용자 요청): 모든 표·상자의 바깥선은 2px 브랜드 그린, 칸 사이는 1px 연회색입니다. 공통 표의 칸 선(머리글 위쪽의 흰 선 등)이
   바깥선을 덮어 위쪽·칸 사이 선이 빠지던 문제라, 칸 선을 여기서 모두 정합니다(겹치는 선은 굵은 바깥선이 이깁니다). */
.quote-paper.quote-paper table{border:2px solid var(--action-brand)}
.quote-paper.quote-paper table th,.quote-paper.quote-paper table td{border:1px solid var(--forest-200)}
.quote-paper.quote-paper .quote-paper-lines thead th{border-color:var(--quote-head)}
/* The paper is a fixed-width document: the console table rules (min-width 650px, 16px !important cells) pushed it past its right edge. */
.quote-paper th,.quote-paper td{padding:8px!important;font-size:12px;line-height:1.5;vertical-align:middle}
.quote-paper th{background:var(--bg-muted);color:var(--n-700);font-weight:700;text-align:left;white-space:nowrap;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.quote-paper th.num{text-align:right}
.quote-paper .num{text-align:right;white-space:nowrap}
.quote-paper td small{font-size:12px;color:var(--text-2)}
.quote-paper .quote-paper-totals{width:100%!important}
.quote-paper .quote-paper-totals th{width:auto;text-align:center;font-weight:700}
.quote-paper .quote-paper-totals td{width:34%;padding:4px 8px!important}
.quote-paper .quote-paper-grand th,.quote-paper .quote-paper-grand td{background:var(--action-brand);color:var(--text-inverse);font-size:14px;font-weight:800;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.quote-paper-note{margin:16px 0 0;white-space:pre-wrap}
.quote-paper-foot{margin:20px 0 0;font-size:12px;color:var(--text-2)}
@media screen{
 .quote-print-copy{display:none}
}
@media print{
 .quote-printing #app,.quote-printing #toast,.quote-printing #modal-root{display:none!important}
 .quote-print-copy{display:block;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;max-width:none}
 .quote-print-copy .quote-paper-draft{display:none}
 .quote-print-copy .quote-paper-parties{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1150px){
 .quote-layout{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
 .quote-row-item{flex-basis:calc(100% - 84px)}
 .quote-row-amount{justify-content:flex-start}
 .quote-totals-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .quote-paper{padding:20px}
 .quote-paper-parties{grid-template-columns:minmax(0,1fr)}
 .quote-row-spec,.quote-row-price{flex-basis:100%}
}