/* 기존 서비스의 녹색·금색과 고정 메뉴를 그대로 사용합니다. */
.model-picker{display:flex;align-items:center;gap:8px;font-size:calc(12px * var(--fz));color:var(--gold-bright)}
.model-picker select{min-height:44px;max-width:180px;color:var(--gold-bright);background:var(--deep);border:1px solid var(--line);padding:8px;font:inherit}
body[data-model=slope]{overflow:auto!important}
body[data-model=slope]>.sticky-summary,body[data-model=slope]>#preview,body[data-model=slope]>#workspace-shell{display:none!important}
#slope-app[hidden],#slope-app [hidden]{display:none!important}
#slope-app{--accent:#75c8ba;min-width:0;color:var(--ink);font-size:calc(13px * var(--fz));line-height:1.7;padding-bottom:24px}
#slope-app *{box-sizing:border-box;min-width:0}
#slope-app :is(button,input,select,textarea){font:inherit;color:inherit;max-width:100%}
#slope-app :is(button,input,select,textarea,a):focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
#slope-app :is(input,select,textarea){background:#091f19;border:1px solid #74928275;border-radius:4px;padding:10px 12px;width:100%;min-height:46px}
#slope-app input[type=range]{padding:0;accent-color:var(--gold);border:0;background:transparent}
#slope-app label{display:block;color:var(--muted);font-size:calc(12px * var(--fz))}
#slope-app label>span{display:block;margin-bottom:6px;color:var(--ink)}
#slope-app small,.sl-note{font-size:calc(11px * var(--fz));line-height:1.7;color:var(--muted)}
#slope-app button,.sl-file{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:10px 15px;border:1px solid var(--line);background:transparent;cursor:pointer;border-radius:4px;white-space:normal}
#slope-app button:hover{border-color:var(--gold);color:var(--gold-bright)}
#slope-app button:disabled{opacity:.5;cursor:not-allowed}
#slope-app .sl-primary{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--deep);font-weight:600}
#slope-app h1,#slope-app h2,#slope-app h3{font-weight:500;letter-spacing:-.035em;line-height:1.45;margin:0}
#slope-app h1{font:500 calc(29px * var(--fz))/1.5 'Noto Serif KR',serif}
#slope-app h2{font-size:calc(19px * var(--fz))}
#slope-app h3{font-size:calc(15px * var(--fz))}
#slope-app p{margin:8px 0}
.sl-summary{position:sticky;top:var(--reviewH,66px);z-index:18;background:#102a23fa;border-bottom:1px solid var(--line);box-shadow:0 8px 20px #06140f22}
.sl-summary-inner{max-width:1380px;padding:13px 36px;margin:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.sl-summary-inner>div+div{border-left:1px solid var(--line);padding-left:20px}
.sl-summary label{font-size:calc(11px * var(--fz))!important}
.sl-summary strong{font-size:calc(24px * var(--fz));line-height:1.5;font-weight:500;font-variant-numeric:tabular-nums;color:var(--gold-bright)}
.sl-summary strong.sl-pending{font-size:calc(15px * var(--fz));color:var(--muted)}
.sl-summary strong{overflow-wrap:anywhere}
#slope-app #sl-price-note:not([data-status=confirmed]){color:var(--gold-bright)}
.sl-summary small{display:block}
.sl-container{max-width:1380px;margin:auto;padding:28px 36px}
.sl-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.sl-heading p{color:var(--muted)}
.sl-eyebrow{font-size:calc(11px * var(--fz));color:var(--gold)!important;letter-spacing:.09em}
.sl-columns{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:start}
.sl-card{border:1px solid var(--line);background:#17352b88;border-radius:8px;padding:24px;margin-bottom:20px}
.sl-card>h2{margin-bottom:16px!important}
.sl-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin-top:18px}
.sl-wide{grid-column:1/-1}
.sl-basis{padding:12px 16px;background:#cbb4780c;border-left:2px solid var(--gold);margin-top:16px}
.sl-amount{font-size:calc(34px * var(--fz));font-variant-numeric:tabular-nums;color:var(--gold-bright)}
.sl-mixture{height:22px;display:flex;border:1px solid var(--line);margin:18px 0 10px;overflow:hidden;border-radius:3px}
.sl-mixture-water{background:var(--accent)}.sl-mixture-product{background:var(--gold-bright)}
.sl-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
#slope-app details{border-top:1px solid var(--line);margin-top:18px;padding-top:8px}
#slope-app summary{min-height:44px;cursor:pointer;color:var(--gold-bright);padding:9px 0;font-size:calc(12px * var(--fz))}
.sl-table-wrap{overflow-x:auto;max-width:100%}
#slope-app table{border-collapse:collapse;width:100%;font-size:calc(12px * var(--fz));line-height:1.65}
#slope-app th,#slope-app td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
#slope-app th{color:var(--muted);font-weight:500}
.sl-kv th{width:48%}.sl-kv td{text-align:right!important;font-variant-numeric:tabular-nums}
.sl-warning{border-left:3px solid var(--gold);padding:12px 16px;background:#cbb4780a;font-size:calc(12px * var(--fz));margin:16px 0}
.sl-error{border:1px solid #d59170;padding:12px 16px;color:#f5be9b;white-space:pre-line;overflow-wrap:anywhere}
.sl-chart{width:100%;height:auto;max-height:180px;display:block;color:var(--muted)}
.sl-record{width:100%;text-align:left;display:block!important;margin:12px 0;padding:18px!important}
.sl-record b{display:block;color:var(--gold-bright);font-size:calc(15px * var(--fz));margin-bottom:5px}
.sl-record span{display:block;color:var(--muted);font-size:calc(12px * var(--fz))}
.sl-empty{padding:28px 0;color:var(--muted);text-align:center}
.sl-live{position:fixed;z-index:100;bottom:24px;right:24px;max-width:min(520px,calc(100vw - 32px));padding:12px 18px;background:#203e32;border:1px solid var(--gold);border-radius:6px;box-shadow:0 8px 24px #0005;color:var(--gold-bright);font-size:calc(12px * var(--fz));overflow-wrap:anywhere;cursor:pointer}
.sl-badge{display:inline-block;padding:3px 9px;background:#cbb47812;border:1px solid var(--line);border-radius:4px;color:var(--gold-bright);font-size:calc(11px * var(--fz))}
#slope-app .sl-live{display:flex;align-items:center;gap:12px;cursor:default}
#slope-app .sl-live button{flex-shrink:0;font-size:calc(11px * var(--fz));padding:6px 9px}
#slope-app .sl-data th,#slope-app .sl-data td{white-space:nowrap}
.sl-file input{font-size:calc(11px * var(--fz))!important;padding:0!important;border:0!important;min-height:30px!important}
body[data-preview=mobile] #slope-app{max-width:390px;margin:auto;border-inline:1px solid var(--line)}
body[data-layout=mobile] .model-picker select{max-width:113px;padding:8px 3px;font-size:calc(11px * var(--fz))}
body[data-layout=mobile] .service-brand{font-size:calc(16px * var(--fz))}
body[data-layout=mobile] .display-settings>summary{font-size:0;padding:0 8px}
body[data-layout=mobile] .display-settings>summary::after{content:'설정';font-size:calc(11px * var(--fz))}
body[data-layout=mobile] #slope-app .sl-container{padding:20px 16px}
body[data-layout=mobile] #slope-app .sl-columns{grid-template-columns:1fr;gap:0}
body[data-layout=mobile] #slope-app .sl-heading{align-items:start;flex-direction:column;gap:4px;margin-bottom:12px}
body[data-layout=mobile] #slope-app .sl-heading .sl-badge{display:none}
body[data-layout=mobile] #slope-app h1{font-size:calc(19px * var(--fz))}
body[data-layout=mobile] #slope-app .sl-live{bottom:calc(82px + env(safe-area-inset-bottom));right:16px;font-size:calc(11px * var(--fz))}
body[data-layout=mobile] #slope-app .sl-card{padding:18px 14px}
body[data-layout=mobile] #slope-app .sl-fields{gap:16px 12px}
body[data-layout=mobile] #slope-app .sl-summary-inner{padding:9px 14px;gap:9px;grid-template-columns:1fr 1fr}
body[data-layout=mobile] #slope-app .sl-summary-inner>div+div{padding-left:10px}
body[data-layout=mobile] #slope-app .sl-summary-inner>div:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:5px 0 0;display:flex;align-items:center;gap:10px}
body[data-layout=mobile] #slope-app .sl-summary-inner>div:last-child small{display:none}
body[data-layout=mobile] #slope-app .sl-summary strong{font-size:calc(21px * var(--fz))}
body[data-layout=mobile] #slope-app .sl-summary strong.sl-pending{font-size:calc(12px * var(--fz))}
body[data-layout=mobile] #slope-app .sl-summary label{font-size:calc(11px * var(--fz))!important}
body[data-layout=mobile] #slope-app .sl-summary small{font-size:calc(11px * var(--fz))}
body[data-layout=mobile] #slope-app .sl-actions>button{flex:1 1 120px}
@media(max-width:380px){body[data-layout=mobile] .review-bar{gap:5px;padding-inline:8px}body[data-layout=mobile] .model-picker select{max-width:104px}body[data-layout=mobile] #slope-app .sl-fields{grid-template-columns:1fr}body[data-layout=mobile] .service-font{padding:6px}}
@media print{.review-bar,.service-nav,#connection-status,#slope-app .sl-actions,#slope-app .sl-file,#slope-app form{display:none!important}body[data-model=slope]{background:white;color:black;padding:0}#slope-app{color:black!important}#slope-app *{color:black!important;background:white!important;box-shadow:none!important}#slope-app .sl-summary{position:static}#slope-app .sl-container{padding:0}#slope-app .sl-columns{display:block}.sl-card{break-inside:avoid}.sl-table-wrap{overflow:visible}}

/* 고정 지표 아래에 설정 제목이 가려지지 않도록 이동 여백을 둡니다. */
#sl-config-settings{scroll-margin-top:calc(var(--reviewH,66px) + 170px)}
#sl-performance-settings{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}

/* 축 글씨는 SVG 축소에 영향받지 않고 사용자의 글씨 크기를 따릅니다. */
.sl-performance-chart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;margin:16px 8px 20px 0}
.sl-y-labels{display:flex;flex-direction:column;justify-content:space-between;font-size:calc(11px * var(--fz));line-height:1.1;padding-bottom:4px}
.sl-performance-chart .sl-chart{margin:0}
.sl-x-labels{grid-column:2;position:relative;height:calc(22px * var(--fz));font-size:calc(11px * var(--fz))}
.sl-x-labels span{position:absolute;transform:translateX(-50%)}
.sl-x-labels span:first-child{transform:none}.sl-x-labels span:last-child{transform:translateX(-100%)}
.sl-x-labels span{white-space:nowrap}

/* 처음 보는 사용자도 면적, 단가, 견적의 관계를 읽도록 결과를 앞으로 배치합니다. */
.sl-flow{display:flex;gap:28px;align-items:center;border-block:1px solid var(--line);padding:14px 0;margin-bottom:14px;color:var(--muted);font-size:calc(12px * var(--fz))}
.sl-flow span{display:flex;gap:10px;align-items:center}.sl-flow b{color:var(--gold-bright);font-weight:500}
#slope-app .sl-text-action{padding:3px 0;min-height:40px;border:0;color:var(--gold-bright);text-decoration:underline;text-underline-offset:5px}
.sl-intro-note{margin-bottom:22px!important}
.sl-estimate-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.sl-estimate-aside{position:sticky;top:calc(var(--reviewH,66px) + 160px)}
.sl-quote-card{border-color:#bca66f88;background:linear-gradient(145deg,#214035,#142e25)}
.sl-quote-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.sl-quote-context{color:var(--muted);font-size:calc(12px * var(--fz))}
.sl-quote-total{padding:22px 0 20px;border-bottom:1px solid var(--line)}
.sl-quote-total-label{font-size:calc(13px * var(--fz));color:var(--gold-bright)}
.sl-quote-total>p{margin:4px 0!important;color:var(--gold-bright)}
.sl-quote-amount{font-size:calc(43px * var(--fz));font-weight:500;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sl-quote-lines>div{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:calc(13px * var(--fz))}
.sl-quote-lines small{display:block}.sl-quote-lines strong{font-weight:500;text-align:right;flex-shrink:0;color:var(--ink)}
.sl-quote-price-note{color:var(--gold-bright)!important}
.sl-quote-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sl-preparation{border-top:1px solid var(--line);padding-top:18px;margin-top:16px}
.sl-preparation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.sl-preparation-grid>div{border-left:1px solid var(--line);padding-left:14px}.sl-preparation-grid>div:first-child{border:0;padding-left:0}
.sl-preparation-grid span{font-size:calc(11px * var(--fz));color:var(--muted);display:block}
.sl-preparation-grid strong{font-size:calc(18px * var(--fz));font-weight:500;overflow-wrap:anywhere;color:var(--gold-bright)}
.sl-quote-scope{font-size:calc(11px * var(--fz));color:var(--muted);padding-top:12px;line-height:1.7}
.sl-schedule-label{margin-top:18px}.sl-technical-section{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
#slope-app .sl-advanced-card>details,#slope-app .sl-estimate-aside>.sl-card>details:first-child{border:0;margin:0;padding:0}
#sl-basic-conditions,#sl-price-settings{scroll-margin-top:calc(var(--reviewH,66px) + 160px)}

/* 폰에서는 결과를 먼저 보여주고 두 바로가기에서 입력 위치로 이동합니다. */
body[data-layout=mobile] .sl-flow{gap:12px;justify-content:space-between;flex-wrap:wrap;font-size:calc(11px * var(--fz))}
body[data-layout=mobile] .sl-flow span{gap:5px}
body[data-layout=mobile] .sl-estimate-aside{position:static;grid-row:1}
body[data-layout=mobile] .sl-estimate-layout form{grid-row:2}
body[data-layout=mobile] .sl-quote-header{gap:8px;flex-wrap:wrap}
body[data-layout=mobile] .sl-quote-amount{font-size:calc(34px * var(--fz))}
body[data-layout=mobile] .sl-quote-lines>div{gap:10px;font-size:calc(12px * var(--fz))}
body[data-layout=mobile] .sl-preparation-grid{gap:8px}
body[data-layout=mobile] .sl-preparation-grid>div{padding-left:8px}
body[data-layout=mobile] .sl-preparation-grid strong{font-size:calc(16px * var(--fz))}
@media print{
 body[data-slope-print=quote] #slope-app>.sl-summary,body[data-slope-print=quote] #slope-app>.sl-container{display:none!important}
 body[data-slope-print=quote] #slope-app #sl-quote-printout[hidden]{display:block!important;padding:12mm;max-width:190mm;margin:auto;font-size:11pt}
 #sl-quote-printout .sl-quote-header{margin-bottom:12px}#sl-quote-printout .sl-quote-total{padding:12px 0}
 #sl-quote-printout .sl-quote-amount{font-size:32pt}#sl-quote-printout .sl-quote-lines>div{padding:8px 0}
 #sl-quote-printout .sl-preparation{padding-top:12px;margin-top:12px}#sl-quote-printout .sl-preparation-grid{margin-bottom:14px}
 #sl-quote-printout table{font-size:10pt}#sl-quote-printout th,#sl-quote-printout td{padding:5px 8px}
 #sl-quote-printout .sl-note,#sl-quote-printout .sl-quote-scope{font-size:9pt;line-height:1.5}
}

/* 첫 휴대폰 화면에서 설명보다 견적 금액이 먼저 읽히도록 간격을 줄입니다. */
body[data-layout=mobile] #slope-app .sl-heading .sl-eyebrow{display:none}
body[data-layout=mobile] #slope-app .sl-heading{margin-bottom:8px}
body[data-layout=mobile] .sl-flow{padding:8px 0;margin-bottom:6px}
body[data-layout=mobile] .sl-intro-note{margin:4px 0 14px!important}
body[data-layout=mobile] .sl-quote-total{padding-top:14px}
.sl-sharing[hidden],.sl-import-preview[hidden]{display:none!important}
.sl-sharing{border-left:3px solid var(--gold);margin-bottom:20px}
.sl-sharing h2{margin-bottom:4px!important}.sl-sharing-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.sl-sharing-head p{margin:4px 0;font-size:calc(13px * var(--fz));line-height:1.65}
.sl-sharing[data-status=error],.sl-sharing[data-status=conflict]{border-left-color:#e8b16b}
.sl-import-preview{padding:18px;border:1px solid var(--gold);border-radius:8px;margin:14px 0;white-space:pre-line;overflow-wrap:anywhere}
.sl-field-card .sl-data th,.sl-field-card .sl-data td{min-width:100px}
.sl-sharing label{display:grid;gap:6px;flex:1;min-width:0}.sl-sharing input{min-width:0;width:100%;box-sizing:border-box}
@media(max-width:600px){.sl-sharing-head{align-items:stretch;flex-direction:column}.sl-sharing-head>button{align-self:flex-start}.sl-sharing .sl-actions{align-items:stretch}.sl-field-card{padding:16px!important}}
/* 작은 폰의 큰 글씨에서도 금액이 숫자 중간에서 끊기지 않게 넓이를 먼저 배분합니다. */
body[data-layout=mobile] #slope-app .sl-summary-inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
body[data-layout=mobile] #slope-app .sl-summary #sl-cost{font-size:calc(17px * var(--fz));line-height:1.45;white-space:nowrap;letter-spacing:-.04em}
body[data-layout=mobile] #sl-cost-label{font-size:calc(11px * var(--fz));line-height:1.5}
body[data-layout=mobile] #sl-price-note{font-size:calc(11px * var(--fz))}
@media print{
 @page{size:A4;margin:12mm}
 html{background:white!important}body[data-model=slope]{background:white!important}
 body[data-slope-print=quote] #slope-app #sl-quote-printout[hidden]{padding:0;max-width:none;font-size:10.5pt;line-height:1.45}
 #sl-quote-printout h2{font-size:18pt!important;margin:4px 0!important}
 #sl-quote-printout h3{font-size:11pt!important;margin:10px 0 4px!important;break-after:avoid}
 #sl-quote-printout p{margin:4px 0!important}#sl-quote-printout small{font-size:9pt!important}
 #sl-quote-printout .sl-quote-header{margin-bottom:4px}#sl-quote-printout .sl-eyebrow{font-size:10pt!important}
 #sl-quote-printout .sl-quote-total{padding:7px 0}#sl-quote-printout .sl-quote-amount{font-size:26pt!important}
 #sl-quote-printout .sl-quote-lines>div{padding:6px 0;font-size:10.5pt}
 #sl-quote-printout .sl-preparation{padding-top:7px;margin-top:8px}#sl-quote-printout .sl-preparation-grid{margin-bottom:6px}
 #sl-quote-printout .sl-preparation-grid strong{font-size:14pt!important}#sl-quote-printout .sl-preparation-grid span{font-size:9pt!important}
 #sl-quote-printout th,#sl-quote-printout td{padding:3px 8px;font-size:10pt;line-height:1.45}
 #sl-quote-printout tr{break-inside:avoid}
}

/* 운반도로와 같은 입력 왼쪽·결과 오른쪽 구조를 쓰며 폰에서는 입력부터 이어집니다. */
#slope-app .sl-container{max-width:1284px;padding:28px 36px 48px}
#slope-app .sl-heading{align-items:start;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:20px}
#slope-app .sl-heading h1{font-size:calc(27px * var(--fz));margin:6px 0 8px}
#slope-app .sl-heading p{font-size:calc(12px * var(--fz));max-width:650px}
.sl-toolbar-actions{margin:8px 0;flex-shrink:0}
#slope-app .sl-quick-guide{margin:0 0 24px;border:0;padding:0}
.sl-quick-guide ol{padding-left:22px;color:var(--muted);line-height:1.9}
.sl-estimate-layout{grid-template-columns:minmax(340px,.85fr) minmax(0,1.15fr);gap:36px}
.sl-estimate-aside{position:static}
#slope-app .sl-control-card{padding:0;border:0;background:transparent}
#slope-app .sl-site-settings{margin:0;border-block:1px solid var(--line);padding:0 0 10px}
#slope-app .instrument{border-radius:0;padding:18px 16px;margin-top:18px}
#slope-app .instrument h2{font-size:calc(14px * var(--fz));line-height:1.6}
#slope-app .instrument .instrument-heading p{margin:2px 0;font-size:calc(11px * var(--fz))}
#slope-app .instrument output{font-size:calc(14px * var(--fz));color:var(--gold-bright);white-space:nowrap}
#slope-app .instrument .sl-fields{gap:14px 12px;margin-top:16px}
#slope-app .sl-basis{font-size:calc(11px * var(--fz));padding:8px 10px}
#slope-app .sl-card{border-radius:2px}
.sl-timeline-card{background:transparent;border:0;border-top:1px solid var(--line);padding:22px 0!important}
.sl-effect-pending{padding:20px 18px;background:#cbb47808;border-left:2px solid var(--gold);margin:20px 0;font-size:calc(12px * var(--fz));color:var(--muted)}
.sl-effect-pending strong{color:var(--gold-bright);font-size:calc(16px * var(--fz));font-weight:500}
.sl-day-control{margin:18px 0;padding:16px 0;border-block:1px solid var(--line)}
.sl-day-control output{display:block;text-align:right;color:var(--gold-bright);font-variant-numeric:tabular-nums}
#sl-simulation-effect .sl-kv,#sl-simulation-effect>h3,#sl-simulation-effect>.sl-note{display:none}
.sl-quote-amount{font-size:calc(32px * var(--fz))}
.sl-quote-total{padding:14px 0}.sl-quote-card{background:linear-gradient(135deg,#cbb4780a,transparent)}
.sl-summary-inner{max-width:1284px;grid-template-columns:1fr 1fr 1fr}
#slope-app .sl-summary strong{font-size:calc(24px * var(--fz));display:block}
#slope-app .sl-summary strong.sl-pending{font-size:calc(17px * var(--fz))}
.sl-view-tabs{display:flex;gap:4px;margin:0 0 20px;border-bottom:1px solid var(--line)}
#slope-app .sl-view-tabs button{flex:1;border:0;border-radius:0;min-height:48px;border-bottom:2px solid transparent;color:var(--muted)}
#slope-app .sl-view-tabs button[aria-pressed=true]{color:var(--gold-bright);border-bottom-color:var(--gold);background:#cbb4780b}
.sl-record-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.3fr);gap:16px;margin-bottom:20px}
#slope-app .sl-record{border:0;border-bottom:1px solid var(--line);border-radius:0;background:#17352b55;margin:0;padding:20px!important}
#slope-app .sl-record b{display:flex;gap:12px;align-items:center;justify-content:space-between}
#slope-app .sl-record strong{font-weight:500;color:var(--ink)}
#slope-app .sl-stage{font-size:calc(11px * var(--fz));display:inline-block;padding:2px 9px;border:1px solid var(--line);color:var(--gold-bright);white-space:nowrap}
.sl-stage[data-stage="2"]{background:#1c9fbd22}.sl-stage[data-stage="3"]{background:#7e9e2f22}
.sl-map-canvas{height:600px;min-height:320px;background:#10241f;border:1px solid var(--line);isolation:isolate;z-index:0}
#sl-record-map{max-width:650px;margin:auto}
#slope-app .sl-map-modes{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0}
#slope-app .sl-map-modes>div{display:flex;gap:2px}
#slope-app .sl-map-modes button{font-size:calc(11px * var(--fz));padding:8px 10px}
#slope-app .sl-map-modes button[aria-pressed=true]{background:var(--gold-bright);color:var(--deep)}
.leaflet-tooltip.sl-map-label{background:#17352b;color:#efead4;border:1px solid #bca66f88;font-family:inherit;font-size:calc(11px * var(--fz));padding:6px 8px;white-space:normal;width:max-content;max-width:200px;overflow-wrap:anywhere}
#slope-app .leaflet-control a{color:#222}.sl-backup-tools{margin-top:24px}
.sl-dialog-bg{position:fixed;inset:0;z-index:500;background:#00140de0;display:flex;align-items:center;justify-content:center;padding:24px}
#slope-app .sl-dialog{width:min(560px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:#16342a;border:1px solid #647955;border-radius:6px;overflow:hidden;margin:0}
.sl-dialog>header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);flex-shrink:0}
.sl-dialog-body{padding:20px 22px;overflow:auto;overscroll-behavior:contain;min-height:0!important}
#slope-app .sl-dialog>footer{padding:16px 22px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line);flex-shrink:0;margin:0}
.sl-dialog footer button{flex:1}.sl-dialog h3{margin:22px 0 10px!important}
.sl-dialog .sl-map-canvas{height:350px;min-height:250px}
body[data-slope-modal=true]{overflow:hidden!important}
#slope-app .sl-dialog input[readonly]{color:var(--muted)}
.sl-measurement-group{margin-bottom:24px}
@media(max-width:1080px){.sl-estimate-layout{grid-template-columns:minmax(320px,1fr) minmax(0,1fr);gap:22px}.sl-heading{flex-wrap:wrap}.sl-toolbar-actions{flex-shrink:1}}
body[data-layout=mobile] #slope-app .sl-container{padding:18px 16px 100px}
body[data-layout=mobile] #slope-app .sl-heading h1{font-size:calc(20px * var(--fz));margin:2px 0 6px}
body[data-layout=mobile] #slope-app .sl-heading{padding-bottom:16px;margin-bottom:16px}
body[data-layout=mobile] #slope-app .sl-toolbar-actions{width:100%;margin:8px 0 0}
body[data-layout=mobile] #slope-app .sl-estimate-layout{display:flex;flex-direction:column;gap:20px}
body[data-layout=mobile] #slope-app .sl-estimate-layout>form,body[data-layout=mobile] #slope-app .sl-estimate-aside{width:100%;order:initial}
body[data-layout=mobile] #slope-app .sl-summary-inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);padding:8px 14px;gap:8px}
body[data-layout=mobile] #slope-app .sl-summary-inner>div.sl-summary-volume{display:none}
body[data-layout=mobile] #slope-app .sl-summary-inner>div.sl-summary-cost{border-top:0;border-left:1px solid var(--line);padding:0 0 0 10px;display:block;grid-column:auto}
body[data-layout=mobile] #slope-app .sl-summary small{font-size:calc(11px * var(--fz));line-height:1.35}
body[data-layout=mobile] #slope-app .sl-summary strong{font-size:calc(18px * var(--fz));line-height:1.5}
body[data-layout=mobile] #slope-app .sl-summary strong.sl-pending{font-size:calc(14px * var(--fz))}
body[data-layout=mobile] #slope-app .sl-summary #sl-cost{font-size:calc(17px * var(--fz));white-space:normal;overflow-wrap:anywhere}
body[data-layout=mobile] #slope-app .sl-control-card{padding:0}
body[data-layout=mobile] #slope-app .instrument-heading{flex-wrap:wrap}
body[data-layout=mobile] #slope-app .instrument output{margin-left:auto}
body[data-layout=mobile] #slope-app .sl-record-tools{grid-template-columns:minmax(0,1fr) minmax(96px,.65fr);gap:10px}
body[data-layout=mobile] #slope-app .sl-sharing{padding:14px}
body[data-layout=mobile] #slope-app .sl-sharing-head{flex-direction:row;align-items:center}
body[data-layout=mobile] #slope-app .sl-sharing-head h2{font-size:calc(14px * var(--fz))}
body[data-layout=mobile] #slope-app .sl-sharing-head p{font-size:calc(11px * var(--fz))}
body[data-layout=mobile] #slope-app .sl-sharing-head button{font-size:calc(11px * var(--fz));padding:8px;flex-shrink:0}
body[data-layout=mobile] #slope-app .sl-map-canvas{height:520px}
body[data-layout=mobile] #slope-app .sl-dialog-bg{padding:8px}
body[data-layout=mobile] #slope-app .sl-dialog{max-height:calc(100dvh - 16px)}
body[data-layout=mobile] #slope-app .sl-dialog-body{padding:14px}
body[data-layout=mobile] #slope-app .sl-dialog>header,body[data-layout=mobile] #slope-app .sl-dialog>footer{padding:10px 14px}
body[data-layout=mobile] #slope-app .sl-dialog .sl-map-canvas{height:340px}
@media print{.sl-toolbar-actions,.sl-view-tabs,.sl-quick-guide,.sl-dialog-bg,.sl-day-control{display:none!important}#slope-app .sl-heading{display:none}#slope-app .sl-estimate-aside{position:static}}
/* 어두운 화면 모드가 PDF의 종이 여백까지 칠하지 않도록 인쇄 색상 체계를 고정합니다. */
@media print{html,body{color-scheme:light!important;background:#fff!important}body[data-slope-print=quote]{margin:0!important;padding:0!important}}
.sl-summary small{word-break:keep-all;overflow-wrap:break-word}
body[data-layout=mobile][data-service=simulation] .sl-toolbar-actions>[data-quote-print]{display:none!important}