/* 공통 화면은 운반도로의 색상·서체·입력 왼쪽/결과 오른쪽 배치를 그대로 사용합니다. */
.usage-page{width:100%;max-width:1284px;margin:auto;padding:32px 36px 60px;box-sizing:border-box;color:var(--ink);font-size:calc(13px * var(--fz));line-height:1.75}
.usage-page *{box-sizing:border-box;min-width:0}.usage-page[hidden],.app-update[hidden],#usage-printout[hidden]{display:none!important}
body[data-usage=true] #preview{display:none!important}
body[data-usage=true] #sl-simulation{display:none!important}
body[data-usage=true][data-service=simulation] .sl-container{display:none!important}
body[data-model=other] #workspace-shell{display:none!important}
#usage-simulator #sl-basic-conditions{display:none!important}
body[data-usage=true][data-service=simulation] #usage-simulator #sl-condition-form{display:block}
.usage-intro{padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.usage-intro h1{font-size:calc(28px * var(--fz));line-height:1.5;margin:8px 0 10px;letter-spacing:-.045em}
.usage-intro>p:not(.eyebrow){color:var(--muted);margin:0;font-size:calc(13px * var(--fz))}
.usage-steps{display:flex;flex-wrap:wrap;gap:10px 26px;padding:0;list-style:none;counter-reset:step;margin:20px 0 0;color:var(--gold-bright);font-size:calc(11px * var(--fz))}
.usage-steps li:before{counter-increment:step;content:'0' counter(step) '  ';opacity:.6;margin-right:4px}
.usage-layout{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);gap:40px;align-items:start}
.usage-controls{display:grid;gap:18px}.usage-block{border:1px solid var(--line);background:#17352b44;padding:20px;margin:0;min-width:0}
.usage-page .usage-block h2{font:500 calc(15px * var(--fz))/1.6 'IBM Plex Sans KR',sans-serif;margin:0 0 18px}.usage-block h2>span{color:var(--gold);font-size:calc(11px * var(--fz));margin-right:10px}
.usage-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.usage-field{display:grid;gap:6px;font-size:calc(12px * var(--fz));color:var(--ink)}.usage-field small{color:var(--muted);font-size:calc(11px * var(--fz));line-height:1.6}
.usage-page input:not([type=range]),.usage-page select{width:100%;max-width:100%;min-height:44px;background:var(--deep);border:1px solid var(--line);color:var(--ink);font:inherit;padding:9px 10px;border-radius:2px}
.usage-page input:focus-visible,.usage-page select:focus-visible,.usage-page button:focus-visible,.usage-page summary:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.usage-page .field-unit{display:flex;align-items:center;gap:6px}.usage-page .field-unit>span{flex-shrink:0;font-size:calc(11px * var(--fz));color:var(--muted)}
.usage-page input[type=range]{width:100%;min-height:44px;accent-color:var(--gold);margin:8px 0 0;cursor:pointer}
.usage-scale,.usage-note{font-size:calc(11px * var(--fz));color:var(--muted);line-height:1.7;margin:9px 0;overflow-wrap:anywhere}.usage-scale{text-align:justify;word-spacing:6px}
.usage-page .mixture-bar{display:flex;height:9px;overflow:hidden;border-radius:0;margin-top:14px;background:var(--gold)}#use-water-fill{background:#7aa195;display:block;height:100%}
.usage-block summary{cursor:pointer;min-height:30px;color:var(--gold-bright);font-size:calc(13px * var(--fz));font-weight:500}
.usage-quote{border-top:2px solid var(--gold);padding:26px 28px;background:linear-gradient(145deg,#cbb4780e,transparent);border-bottom:1px solid var(--line)}
.usage-page .usage-quote h2{font-size:calc(20px * var(--fz));line-height:1.6;margin:7px 0 24px;font-weight:500}
.usage-amount{display:flex;align-items:baseline;gap:9px;margin:0 0 8px;color:var(--gold-bright);overflow-wrap:anywhere}.usage-amount strong{font:500 calc(38px * var(--fz))/1.4 'Cormorant Garamond',serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.usage-volumes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0;padding:18px 0;border-block:1px solid var(--line)}.usage-volumes span{display:block;color:var(--muted);font-size:calc(11px * var(--fz))}.usage-volumes strong{display:block;font-size:calc(19px * var(--fz));font-weight:500;overflow-wrap:anywhere}.usage-volumes small{color:var(--muted);font-size:calc(11px * var(--fz))}
.usage-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:calc(12px * var(--fz));line-height:1.65}.usage-table th,.usage-table td{padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere;vertical-align:top}.usage-table th{width:47%;text-align:left;font-weight:400;color:var(--muted);padding-right:12px}.usage-table td{text-align:right;font-variant-numeric:tabular-nums}
.usage-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 10px}.usage-page button{font:inherit;min-height:44px;padding:10px 16px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}.usage-page .primary-button{background:var(--gold-bright);color:var(--deep);font-weight:600;min-width:0}.usage-actions button{flex:1}.usage-page button:disabled{opacity:.5;cursor:default}
.usage-effect{margin-top:24px;border-inline:0;background:transparent}.usage-effect .timeline{display:block;padding:0;border:0}.usage-effect .timeline-intro{display:none}.usage-effect .observation{margin:0}.usage-effect #chart{width:100%;height:auto}.usage-effect #sl-simulation-effect{margin-top:16px}
#usage-simulator #sl-condition-form .sl-card{margin:14px 0;padding:0;border:0;background:transparent}#usage-simulator .sl-timeline-card{border:0!important;padding:0!important}
.usage-error{color:#ffe0bb;border-left:3px solid #e2ad72;padding:12px;background:#6c382633}
/* 기존 환경별 label 규칙보다 공통 입력의 배치를 우선합니다. */
#usage-simulator .usage-field{display:grid;gap:6px;margin:0;font-size:calc(12px * var(--fz))}
#usage-simulator .usage-field .field-unit{display:flex;flex-direction:row;align-items:center;gap:6px}
#usage-simulator .field-unit input{flex:1;width:100%;min-width:0}
#usage-simulator .field-unit>span{display:inline;width:auto;flex-shrink:0}
#usage-simulator .usage-block h2{font:500 calc(15px * var(--fz))/1.6 'IBM Plex Sans KR',sans-serif;margin:0 0 18px}
#usage-simulator .usage-quote h2{font-size:calc(20px * var(--fz));margin:7px 0 24px}
@media print{body[data-usage-print=true] #usage-printout .usage-table th,body[data-usage-print=true] #usage-printout .usage-table td{padding:6px 0;font-size:11pt}body[data-usage-print=true] #usage-printout h1{font-size:22pt;margin:0 0 12px}body[data-usage-print=true] #usage-printout tr{break-inside:avoid}}
.app-update{position:fixed;z-index:600;bottom:calc(var(--bottom-navH,0px) + 12px);left:50%;transform:translateX(-50%);width:min(580px,calc(100% - 24px));padding:14px 16px;display:flex;align-items:center;gap:14px;background:#e4cc92;color:#122a22;box-shadow:0 5px 24px #0005;font-size:calc(12px * var(--fz));line-height:1.6}.app-update button{flex-shrink:0;border:1px solid #122a2280;background:transparent;padding:10px;color:inherit;font:inherit;min-height:44px}
body[data-layout=mobile] .usage-page{padding:20px 16px calc(var(--bottom-navH,64px) + 28px);max-width:100%}body[data-preview=mobile] .usage-page{max-width:390px}
body[data-layout=mobile] .usage-intro h1{font-size:calc(22px * var(--fz))}body[data-layout=mobile] .usage-layout{display:flex;flex-direction:column;gap:24px}body[data-layout=mobile] .usage-controls,body[data-layout=mobile] .usage-results{width:100%}body[data-layout=mobile] .usage-block{padding:16px}body[data-layout=mobile] .usage-fields{gap:12px}body[data-layout=mobile] .usage-quote{padding:20px 16px}body[data-layout=mobile] .usage-amount strong{font-size:calc(31px * var(--fz))}body[data-layout=mobile] .usage-volumes{gap:10px}body[data-layout=mobile] .usage-volumes strong{font-size:calc(16px * var(--fz))}
@media print{body[data-usage-print=true]{background:white!important;color:black!important}body[data-usage-print=true]>:not(#usage-printout){display:none!important}body[data-usage-print=true] #usage-printout{display:block!important;padding:12mm;font:12pt/1.6 'Malgun Gothic',sans-serif;color:black}#usage-printout .usage-table{font-size:11pt}#usage-printout th,#usage-printout td{color:black;border-bottom:1px solid #bbb}.app-update{display:none!important}}