@charset "utf-8";

body {}
.input, .select, .textarea {width:100%; height:52px; border:1px solid #E5EAF2; border-radius:10px; padding:0 18px; background:#fff; transition:.25s; font-size:15px; box-sizing: border-box; outline: none;}
.textarea {height:130px; padding:16px; resize:none;}
.input:focus, .select:focus, .textarea:focus {border-color:#1B63F0; box-shadow:0 0 0 4px rgba(27,99,240,.08);}
.input:hover, .select:hover, .textarea:hover {border-color:#7AAEFF;}
.input.needs-manual-input {border-color:#F2994A; background:#FFF8EE;}
.input.needs-manual-input::placeholder {color:#B9772E;}
.select {appearance:none; -webkit-appearance:none; -moz-appearance:none; background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%237A869A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center; background-size:16px; padding-right:45px;}

.fs12 {font-size:12px !important;}
.fs13 {font-size:13px !important;}
.fs14 {font-size:14px !important;}
.fs15 {font-size:15px !important;}
.fs16 {font-size:16px !important;}
.fs18 {font-size:18px !important;}
.fs20 {font-size:20px !important;}
.fs22 {font-size:22px !important;}
.fs24 {font-size:24px !important;}
.fs28 {font-size:28px !important;}
.fs32 {font-size:32px !important;}

.fw400 {font-weight:400 !important;}
.fw500 {font-weight:500 !important;}
.fw600 {font-weight:600 !important;}
.fw700 {font-weight:700 !important;}
.fw800 {font-weight:800 !important;}

.pt0{padding-top:0px !important;}
.pt10{padding-top:10px !important;}
.pt20{padding-top:20px !important;}
.pt30{padding-top:30px !important;}
.pt40{padding-top:40px !important;}
.pt50{padding-top:50px !important;}

.tx-al-le {text-align: left !important;}
.tx-al-ri {text-align: right !important;}
.tx-al-ce {text-align: center !important;}

#container-wrap {background-size: inherit;}
.sim-wrap {display:flex; min-height:100vh;}
.sim-container {flex:1;}
.sim-flex {display: flex; justify-content: space-between; gap: 30px; margin-top: 50px;}
.sim-left {display:flex; flex-direction:column; flex:1;}
.sim-right {display:flex; flex-direction:column; flex:1;}

.ex-titlt .ex-t-txt {font-size: 38px; color: #000;}
.ex-titlt .ex-t-txt span {color: #57962e;}
.ex-titlt .ex-s-txt {font-size: 16px; font-weight: 500;}

.sim-card {background:#fff; border-radius:14px; box-shadow:0 12px 35px rgba(0,0,0,.05); border:1px solid #E5EAF2; margin-bottom:10px; /*overflow:hidden;*/ transition:.25s ease;}
.sim-card-header {position:relative; display:flex; align-items:center; gap:10px; height: 40px; padding:10px 20px; border-bottom:1px solid #E5EAF2;}
.sim-card-header h3 {font-size:20px; font-weight:600;}
.sim-card-header h3 span {font-weight: 500; font-size: 15px; color: #ff1924;}
.sim-card-header .card-no {width:30px; height:30px; border-radius:50%; background:#18B55B; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;}
.sim-card-header .card-no-bl {width:30px; height:30px; border-radius:50%; background:#186eb5; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;}
.sim-card-body {padding:20px;}
.sim-sub-section + .sim-sub-section {margin-top:40px; padding-top:40px; border-top:1px dashed #E5EAF2;}
.sim-sub-title {position:relative; display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:16px; font-weight:600; color:#333;}
.sim-sub-title .sub-no {flex:0 0 22px; height:22px; border-radius:50%; background:#E8F6EE; color:#18B55B; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.sim-sub-title .sub-desc {font-size:13px; font-weight:400; color:#888;}
.sim-sub-title .tooltip-box {top:36px; font-weight:400;}.sim-card:focus-within {transform:translateY(-6px); border-color:#57962e; box-shadow:0 15px 40px rgba(0,0,0,.12); z-index: 99999;}


.btn {height:48px; padding:0 28px; border-radius:10px; font-size:16px; font-weight:500; transition:.25s; transition:.25s; position:relative; overflow:hidden; flex: 1;}
.btn.white{background:#fff; border:1px solid #E5EAF2;}
.btn.green {background:#18B55B; color:#fff; border: 1px solid #18B55B;}
.btn.blue {background:#186eb5; color:#fff; border: 1px solid #186eb5;}
.btn.gray {background:#E9EDF4;}
.btn:hover {transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08);}
.btn-area {display:flex; justify-content: center; gap:12px; margin-top:10px;}
/* .btn은 <button> 기준으로 만들어져 있어(height/padding이 inline-block 기준) <a>에 그대로 쓰면
   기본이 display:inline이라 높이/여백이 안 먹고 링크 기본 스타일(밑줄/파란 글씨)까지 섞여 다르게 보인다.
   표준연동·미연동 계약서 다운로드처럼 <a class="btn">로 쓰는 경우를 위해 여기서 바로잡는다. */
a.btn {display:inline-block !important; text-align:center !important; text-decoration:none !important; color:inherit !important;}
.btn svg {vertical-align: -4px;}
.btn:after{content:""; position:absolute; left:-120%; top:0; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transition:.7s;}
.btn:hover:after{left:120%;}
.btn.btn-sm {flex:none; height:28px; padding:0 14px; font-size:13px; border-radius:8px; background: #708090; color: #fff; border: 0px solid #18B55B;}

/* 라벨 오른쪽에 작은 버튼을 같은 줄에 붙일 때(예: "LME 시세" 옆 "추이 보기") 쓰는 한 줄 정렬용 래퍼 */
.label-row {display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.label-row label {margin-bottom:0 !important;}

.sheet-panel {width:380px; background:#fff; border-right:1px solid #E5EAF2; box-shadow:5px 0 25px rgba(0,0,0,.05);}
.sheet-panel-header {padding:35px; border-bottom:1px solid #E5EAF2;}
.sheet-panel-header h2 {font-size:26px; margin-bottom:8px;}
.sheet-panel-body {padding:35px;}
.sheet-toggle {width:46px; height:110px; background:#1B63F0; border-radius:0 10px 10px 0; align-self:center; color:#fff; cursor:pointer;}

.form-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.form-item {display:flex; flex-direction:column;}
.form-item.full {grid-column:1/-1;}
.form-item label {font-size:14px; color:#666; margin-bottom:8px; font-weight:600;}
.form-item label p strong {    color: #1976FF;
    font-size: 15px;
    font-weight: 500;}
.form-flex {display:flex; gap:16px; margin-top:16px;}

.input-unit {position:relative;}
.input-unit span {position:absolute; right:16px; top:50%; transform:translateY(-50%); color:#999; font-size:13px;}
.input-unit input {padding-right: 40px; text-align: right;}
.input-unit input.t-center {text-align: center; padding-right: 18px;}
.input-unit input.ca-price {cursor: not-allowed; background: #f0fff0; pointer-events:none;}
.input-unit input.ca-price:hover {border: 1px solid #E5EAF2;}
/* 데이터가 없어서 직접 입력을 열어준 칸은 .ca-price의 pointer-events:none을 다시 풀어준다 */
.input-unit input.ca-price.needs-manual-input {cursor:text; pointer-events:auto; background:#FFF8EE;}
.input-unit input.ca-price.needs-manual-input:hover {border-color:#F2994A;}
/* 수량처럼 입력창 오른쪽에 단위 select(kg/톤)를 나란히 붙이는 필드 */
.input-unit.with-unit-select {display:flex; gap:8px;}
.input-unit.with-unit-select .input {flex:1; min-width:0;}
.input-unit.with-unit-select .select {flex:0 0 120px; width:100px;}


/* 총 납품대금처럼 입력값 옆에 한글 단위(예: "(2천만)")를 같은 입력창 안에 보여주는 필드.
   실제 <input>의 value는 계산 로직이 그대로 파싱해야 하므로 순수 숫자만 유지하고,
   대신 이 wrapper 자체가 테두리를 가진 "입력창처럼" 보이게 만들고 그 안에서
   input(테두리 없음, 남는 폭 차지)과 한글 suffix, 단위(원)를 한 줄에 나란히 배치한다. */
.input-unit.amount-with-korean {display:flex; align-items:center; gap:6px; width:100%; height:52px; border:1px solid #E5EAF2; border-radius:10px; padding:0 40px 0 18px; background:#fff; box-sizing:border-box; transition:.25s;}
.input-unit.amount-with-korean:focus-within {border-color:#1B63F0; box-shadow:0 0 0 4px rgba(27,99,240,.08);}
.input-unit.amount-with-korean .input {flex:1; min-width:0; width:auto; height:auto; border:none; padding:0; background:transparent;}
.input-unit.amount-with-korean .input:focus {box-shadow:none;}
.input-unit.amount-with-korean .total-price-korean {flex:0 0 auto; color:#888; font-size:13px; white-space:nowrap;}
.input-unit.amount-with-korean span {position:static; flex:0 0 auto; transform:none;}

.radio-group {display:flex; gap:22px; height:52px; align-items:center;}
.radio-group label {display:flex; align-items:center; gap:8px; cursor:pointer; margin:0;}

.index-type-group {display:flex; gap:10px; margin-bottom:14px;}
.index-type-btn {flex:1; height:44px; padding:0 10px; border-radius:10px; border:1px solid #E5EAF2; background:#fff; color:#666; font-size:15px; font-weight:500; cursor:pointer; transition:.2s;}
.index-type-btn:hover {border-color:#18B55B; color:#18B55B;}
.index-type-btn.active {background:#18B55B; border-color:#18B55B; color:#fff;}

.summary-grid{display:flex; gap: 10px; flex-wrap: wrap;}
.summary-card{border-radius:14px; color:#fff; padding:22px; width: calc(50% - 58px);}
.summary-card small{display:block; opacity:.8; font-size: 16px;}
.summary-card strong{display:block; font-size:20px;}
.summary-card span{font-size:12px; opacity:.85;}
.summary-card.blue{background:#1976FF;}
.summary-card.green{background:#14B65E;}
.summary-card.orange{background:#FF9333;}
.summary-card.purple{background:#7357FF;}

.calc-list{display:flex; flex-direction:column;}
.calc-item{display:flex; align-items:center; gap:18px;}
.calc-no{width:54px; height:54px; border-radius:50%; background:#1976FF; color:#fff; display:flex; justify-content:center; align-items:center; font-weight:700;}
.calc-content{flex:1; background:#F7FAFD; border:1px solid #E7EDF5; border-radius:12px; padding:18px 22px;}
.calc-content h4{margin-bottom:6px; font-size:16px;}
.calc-content p{color:#666;}
.calc-arrow{text-align:center; font-size:26px; color:#1B63F0; margin:12px 0;}
.calc-item.success .calc-no{background:#18B55B;}

.result-table {width:100%;}
.result-table thead th {background:#EEF5FF; border:1px solid #DCE7F5; padding:15px; font-weight:700;}
.result-table tbody th {background:#FAFCFF; border:1px solid #E7EDF5; padding:16px;}
.result-table tbody td {border:1px solid #E7EDF5; padding:16px; text-align:center;}
.result-table tbody tr:hover {background:#F7FBFF;}
.up {color:#E53935; font-weight:700;}
.down {color:#1976FF; font-weight:700;}
.notice-box {margin-top:20px; padding:24px; border-radius:14px; background:#FFF9E8; border:1px solid #F7D66A;}
.notice-box strong {display:block; color:#C67A00; font-size: 18px;}
.notice-box li {color: #000; font-size: 20px; font-weight: 600;}

.summary-card {overflow:hidden; position:relative;}
.summary-card:after {content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-60px; top:-60px; background:rgba(255,255,255,.12);}
.summary-card:before {content:""; position:absolute; width:90px; height:90px; border-radius:50%; right:20px; bottom:-35px; background:rgba(255,255,255,.08);}
.summary-card.blue {background: linear-gradient(135deg, #4A9BFF, #1B63F0);}
.summary-card.orange {background: linear-gradient(135deg, #FFB15C, #FF8D2C);}
.summary-card.green {background: linear-gradient(135deg, #39D887, #18B55B);}
.summary-card.purple {background: linear-gradient(135deg, #9B82FF, #6D4CFF);}
.summary-card strong {font-size: 22px; font-weight: 600; margin-bottom: 10px;}

.calc-list {position:relative; padding-left:28px;}
.calc-list:before {content:""; position:absolute; left:26px; top:30px; bottom:30px; width:2px; background:#DDE8F5;}
.calc-item{position:relative; z-index:2;}
.calc-no{box-shadow: 0 8px 18px rgba(27,99,240,.25);}

.success .calc-no{background:#18B55B; box-shadow:0 8px 18px rgba(24,181,91,.25);}
.result-table{overflow:hidden; border-radius:12px;}
.result-table thead th:first-child{border-radius:10px 0 0 0;}
.result-table thead th:last-child{border-radius:0 10px 0 0;}
.result-table tbody tr:nth-child(even){background:#FAFCFE;}
.result-table tbody tr{transition:.25s;}
.result-table tbody tr:hover{background:#EEF7FF;}
.notice-box{display:flex; gap:18px; align-items:center; justify-content: center;}
.notice-box:before{content:"!"; width:34px; height:34px; background:#FFC84C; border-radius:50%; display:flex; justify-content:center; align-items:center; font-weight:bold; color:#fff; flex-shrink:0;}

/* 계산하기를 누르기 전, 결과표 자리에 대신 보여주는 빈 상태 안내 박스 */
.result-empty-state {border-style:dashed;}
.result-empty-body {min-height:200px; display:flex; align-items:center; justify-content:center; text-align:center;}
.result-empty-text {color:#888; font-size:15px; line-height:1.8;}

.date-range {display:flex; align-items:center; gap:10px;}
.date-range .input {flex:1; min-width:0;}
.date-range .dash {flex:0 0 auto; color:#666; font-weight:500;}

.date-box {position:relative; flex:1;}
.date-box .input{width:100%; padding: 0 14px;}
.date-box::after{content:""; position:absolute; top:50%; margin-top: 1px; right:8px; width:18px; height:18px;  transform:translateY(-50%); pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237A869A' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");}

.input-noti {width: 100%; height: 52px; border: 1px solid #E5EAF2; border-radius: 10px; padding: 0 8px; background: #fff; font-size: 20px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
.input-noti p.yes {font-size: 20px;}
.input-noti p.yes strong {color:#1976FF; font-size: 20px; font-weight: 500;}
.input-noti p.no {font-size: 20px;}
.input-noti p.no strong {color:#ff1924; font-size: 20px; font-weight: 500;}

.input-noti p.blank {font-size: 12px; font-weight: 500;}

.border-line {width: 100%; height: 52px; border: 1px solid #E5EAF2; border-radius: 10px; padding: 0 14px; background: #fff; font-size: 14px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-evenly;}
.info-p {font-size: 13px; margin-top: 5px; color: #888; letter-spacing: -0.2px; text-align: left;}
.info-rd {font-size: 13px; margin-top: 5px; color: #ff1924; letter-spacing: -0.2px; text-align: left;}

.compare-custom {display:none; margin-top:10px;}
.compare-custom.show {display:block;}
.compare-custom {max-height:0; overflow:hidden; opacity:0; transition:.3s;}
.compare-custom.show {max-height:80px; opacity:1; margin-top:10px;}

.point-wrap {/*display:flex; gap:18px;*/}
/* overflow:hidden을 쓰면 .point-title 배경의 각진 모서리는 잘려서 둥글게 보이지만, 카드 안의
   .final-variation-tag 툴팁(position:absolute)도 카드 경계에서 함께 잘려버린다.
   그래서 overflow:hidden 대신 .point-title 자체에 위쪽 모서리를 둥글게 줘서 같은 효과를 낸다. */
.point-card {border:1px solid #D9E5F4; border-radius:10px; background:#fff;}
.point-title {height:38px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; border-radius:9px 9px 0 0;}
.point-body {padding:18px; display:flex; gap:18px;}
.point-body .ca-cen {text-align: center; padding: 18px;}
.point-row {display:grid; /*grid-template-columns:170px 1fr 70px;*/ align-items:center; gap:12px; flex:1;}
.point-row + .point-row {/*margin-top:14px;*/}
.point-card + .point-card {margin-top:10px;}
.compare-points .point-card:first-child {margin-top:10px;}
.point-label {font-weight:600; color:#333;}
.point-unit {color:#666; font-size:14px; font-weight:600;}
.point-input .input {width:100%; text-align:center; font-weight:600;}
.point-card.base {border-color:#9BC5FF; flex: 1;}
.point-card.base-non {border-color:#fff; flex: 1;}
.point-card.base .point-title {color:#1F6BFF; background:linear-gradient(#F9FCFF,#F3F8FF);}
.point-card.compare {border-color:#e8debf; flex: 1;}
.point-card.compare .point-title {color:#a09118; background:linear-gradient(#fefefe, #fcfcf5);}
.point-card.compare.adjusted {border-color:#186eb5;}
.point-card.compare.adjusted .point-title {color:#fff; background:#186eb5;}
.point-card.compare.adjusted .point-title::after {content:" (신규 기준시점)"; font-size:12px; font-weight:500;}
.point-card.change {border-color:#BFE8D0; flex: 0.8;}
.point-card.change .point-title {color:#18A058; background:linear-gradient(#FCFFFD,#F5FCF8);}
.point-card.change .input {padding-right:18px; text-align:center;}

/* 원자재 가격 변동결과(최초 기준시점) */
.base-result-card {border:1px solid #D9E5F4; border-radius:12px; background:#fff; overflow:hidden;}
.base-result-title {padding:14px 20px; font-size:17px; font-weight:700; color:#1F6BFF; background:rgba(50, 200, 255, 0.15); border-bottom:1px solid rgba(50, 200, 255, 0.3);}
/* 결과 3개(기준시점/기준지표 금액/환율)는 항상 한 줄에 같은 폭으로 나란히 둔다 */
.base-result-grid {display:flex; flex-wrap:nowrap; gap:16px; padding:18px 20px 20px;}
.base-result-item {flex:1 1 0; min-width:0;}
.base-result-label {margin-bottom:8px; font-size:14px; font-weight:600; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.base-result-card .ca-cen {text-align:center;}
/* 바탕은 연두색. 다른 규칙/인라인 스타일에 덮이지 않도록 !important로 지정한다 */
.base-result-card .input-unit input.ca-price {
    background: rgba(100, 210, 200, 0.18) !important;
    border-color: rgba(150, 210, 100, 0.45);
}
/* 직접 입력이 필요한 칸은 연두색 대신 기존 주황 입력 표시를 유지 */
.base-result-card .input-unit input.ca-price.needs-manual-input {background:#FFF8EE !important; border-color:#F2994A;}

/* 차수별 조정 아코디언 */
.adjust-acc {margin-top:12px; border:1px solid #D9E5F4; border-radius:12px; background:#fff; overflow:hidden;}
/* 조정요건 충족 차수(runAdjustmentCalc가 .adjusted를 붙임)는 펼침 여부와 관계없이 처음부터 하늘색으로 표시 */
.adjust-acc.adjusted {border-color:#9BC5FF;}
.adjust-acc-head {display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 20px; cursor:pointer; user-select:none;}
.adjust-acc.adjusted .adjust-acc-head {background:rgba(50, 200, 255, 0.15) !important;}
/* 펼쳤을 때는 색 변화 없이 헤더와 본문 사이 구분선만 */
.adjust-acc.open .adjust-acc-head {border-bottom:1px solid #E5EEF9;}
.adjust-acc.adjusted.open .adjust-acc-head {border-bottom-color:rgba(50, 200, 255, 0.3);}
.adjust-acc-head:focus-visible {outline:2px solid #1B63F0; outline-offset:-2px;}
.acc-round {font-size:19px; font-weight:700; color:#1A3A7A;}
.acc-date {padding-left:14px; border-left:1px solid #C9D3E0; font-size:16px; color:#555;}
.acc-rate {margin-left:auto; min-width:110px; padding:8px 16px; border-radius:8px; background:#FFF8D6; text-align:center; font-size:13px; color:#666;}
.acc-rate-value {font-size:20px; font-weight:700; color:#222;}
.acc-badge {display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:8px; font-size:13px; font-weight:600; white-space:nowrap;}
.acc-badge.cond-yes {background:#E8F6EE; border:1px solid #BFE8D0; color:#18A058;}
.acc-badge.cond-no {background:#F1F3F6; border:1px solid #E1E5EB; color:#555;}
.acc-badge-icon {font-weight:700;}
.acc-arrow {width:10px; height:10px; margin:0 4px 4px 4px; border-right:2px solid #1A3A7A; border-bottom:2px solid #1A3A7A; transform:rotate(45deg); transition:transform .2s;}
.adjust-acc.open .acc-arrow {margin-top:6px; margin-bottom:0; transform:rotate(-135deg);}
.adjust-acc-body {display:none; padding:16px 20px 18px;}
.adjust-acc.open .adjust-acc-body {display:block;}

.acc-table-wrap {overflow-x:auto;}
.acc-table {width:100%; min-width:520px; table-layout:fixed; border-collapse:separate; border-spacing:0; border:1px solid #E1E8F2; border-radius:10px; overflow:hidden; font-size:15px;}
/* 내용 길이(텍스트 vs 입력칸)에 따라 열 폭이 달라지지 않도록 고정: 항목명 28%, 기준/비교/변동률 각 24% */
.acc-table thead th:nth-child(1) {width:28%;}
.acc-table thead th:nth-child(n+2) {width:24%;}
.acc-table th, .acc-table td {padding:12px 14px; text-align:center; border-bottom:1px solid #E9EEF5;}
.acc-table th + th, .acc-table th + td, .acc-table td + td {border-left:1px solid #E9EEF5;}
    .acc-table thead th {
        background: rgba(0, 0, 0, 0.25);
        font-weight: 600;
        color: #444;
    }
.acc-table tbody th {width:28%; text-align:left; font-weight:500; color:#333; background:#fff;}
/* "원자재 가격 (US$/톤)"은 단위까지 붙어 길어서 다른 항목명보다 조금 작게 */
.acc-table tbody th.acc-price-label {font-size:13px;}
.acc-table tr:last-child th, .acc-table tr:last-child td {border-bottom:none;}
.acc-table .acc-change {text-align:right; font-weight:600; color:#222;}
.acc-table .acc-final-row th {font-weight:700; background:rgba(50, 200, 255, 0.15);}
.acc-table .acc-final-row td {background:rgba(50, 200, 255, 0.15); color:#888;}
.acc-table .acc-final-row td.acc-final {background:#FFF8D6; text-align:right; color:#222;}
.acc-table .final-variation-percent {font-size:20px; font-weight:700;}
/* 비교 열 입력칸: 조회된 값은 일반 텍스트처럼 보이고, 직접 입력이 필요하면(needs-manual-input) 입력칸 모양이 된다 */
.acc-input {width:100%; height:36px; padding:0 8px; border:1px solid transparent; border-radius:6px; background:transparent; text-align:center; font-size:15px; box-sizing:border-box; outline:none;}
.acc-input.needs-manual-input {border-color:#F2994A; background:#FFF8EE;}
.acc-input.needs-manual-input:focus {border-color:#1B63F0; box-shadow:0 0 0 3px rgba(27,99,240,.08);}
.acc-note {margin-top:10px; font-size:13px; color:#777;}

.flatpickr-months .flatpickr-month {}

.calc-box .input, .select, .textarea {width:100%; height:52px;}

.result-wrap {overflow-x:auto; width: 578px; padding-bottom: 10px;}
.result-history-table {width:max-content; min-width:100%; border-collapse:collapse; table-layout:fixed; background:#fff;}
.result-history-table th, .result-history-table td {min-width:100px; height:40px; padding:14px 10px; border:1px solid #D8DEE9; text-align:center; vertical-align:middle; font-size:14px; font-weight:500; color:#1F2937;}
.result-history-table thead th {background:#F8FAFC;}
.result-history-table thead tr:first-child th {font-size:14px; font-weight:600;}
.result-history-table thead tr:last-child th {font-size:14px; font-weight:600;}
.result-history-table tbody th {background:#FCFCFD; font-size:14px; font-weight:600;}
.result-history-table td:empty::after {content:"";}
.text-danger {color:#E5484D !important; font-weight:600;}
.text-primary {color:#2563EB !important; font-weight:600;}

.result-ttl {margin-bottom: 10px;}
.result-ttl p {font-size: 15px; color: #666; margin-bottom: 8px; font-weight: 600;}
.result-ttl p span {color: #186eb5;}

hr {border-top: 1px dashed #ddd; margin: 30px 0px;}

.graph-wrap {display:flex; flex-direction: column; gap:24px;}
.graph-box {background:#fff; border:1px solid #D9E2EC; border-radius:8px; padding:20px; height:280px;}
.graph-box canvas {width:100% !important; height:100% !important;}

/* Layer Popup */
/* z-index:1000이 사이트 공통 CSS(common.min.css 등, 내용을 알 수 없는 외부 스타일시트)의 헤더/다른
   레이어보다 낮아서 팝업이 뒤로 가려지는 문제가 있었다. 무엇이 정확히 얼마인지 알 수 없으니
   브라우저가 허용하는 최댓값 근처로 !important를 줘서 항상 이기게 한다. */
.layer-popup {position:fixed; inset:0; display:none; z-index:2147483647 !important;}
.layer-popup.open {display:flex; justify-content:center; align-items:center;}
.layer-dim {position:absolute; inset:0; background:rgba(0,0,0,.45);}
.layer-wrap {position:relative; width:1000px; height:90vh; background:#fff; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 25px 80px rgba(0,0,0,.18);}
.layer-header {height:72px; display:flex; justify-content:space-between; align-items:center; padding:0 30px; border-bottom:1px solid #E5E7EB;}
.layer-header h2 {font-size:24px; font-weight:700;}

.layer-close {width:42px; height:42px; border:none; background:#fff; color:#333 !important; font-size:22px; cursor:pointer;}
.layer-body {flex:1; overflow:auto; padding:40px; background:#F8FAFC;}
.link-paper {width:auto; margin:0 auto; background:#fff; padding:30px; box-shadow:0 10px 35px rgba(0,0,0,.08);}
.paper-title {text-align:center; font-size:34px; margin-bottom:60px;}
.paper-desc {margin-bottom:30px; line-height:1.8;}
.paper-table {width:100%; border-collapse:collapse;}
.paper-table th {width:38%; background:#EEFAD9;}
.paper-table th, .paper-table td {border:1px solid #333; padding:18px; line-height:1.7; text-align: left;}
.paper-foot {margin-top:25px; line-height:1.8;}
/* 연동표 바로 아래 출력/다운로드 버튼 줄 */
.link-table-actions {display:flex; justify-content:center; align-items:center; gap:10px; margin-top:24px;}
/* 출력하기 / 연동표 다운로드를 반반으로: .btn은 flex:1인데 .split-download는 고정폭(240+46px)이라 출력하기만 늘어나던 것을 맞춘다 */
.link-table-actions > .btn,
.link-table-actions > .split-download {flex:1 1 0; min-width:0;}
.link-table-actions .btn-download {width:auto; flex:1;}
.link-table-actions .download-menu {width:100%;}
.link-section-divider {border:none; border-top:1px solid #D1D5DB; margin:40px 0;}

/* 표준 연동계약서 작성 */
.contract-form {background:#fff; padding:30px; box-shadow:0 10px 35px rgba(0,0,0,.08);}
.contract-form-title {font-size:22px; font-weight:700; color:#333; margin-bottom:8px;}
.contract-form-desc {font-size:14px; color:#888; margin-bottom:24px;}
.contract-party-title {grid-column:1 / -1; font-size:16px; font-weight:700; color:#333; margin:8px 0 0; padding-top:4px;}
.contract-date-picker {position:relative;}
.contract-date-picker .input {padding-right:52px;}
.contract-date-btn {position:absolute; right:6px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:none; border-radius:8px; background:transparent; color:#666; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.contract-date-btn:hover {background:#F4F8FF; color:#1B63F0;}
/* 팝업 z-index가 최댓값이라 body에 붙는 기본 달력은 팝업 뒤로 가려진다. static 모드로 입력칸 바로 밑에 붙인다.
   static 모드는 .contract-date-picker 바깥을 .flatpickr-wrapper(inline-block)로 감싸므로 폭을 다시 채워준다. */
.contract-date-item .flatpickr-wrapper {display:block; width:100%;}
/* 마지막 줄(8번) 달력은 아래 공간이 없어 위로 연다 */
.contract-date-item.open-up .flatpickr-calendar.static {top:auto; bottom:calc(100% + 2px);}
/* <a>라 위쪽 a.btn 규칙(display:inline-block !important; color:inherit !important)이 flex 중앙정렬과
   .btn.blue의 흰색을 덮어쓴다. 그래서 더 구체적인 선택자 + !important로 다시 지정한다(아이콘도 currentColor라 같이 흰색) */
a.btn.standard-contract-download-btn {display:flex !important; align-items:center; justify-content:center; gap:8px; width:100%; height:52px; margin-top:12px; box-sizing:border-box;}
/* 다운로드 버튼 위 안내 문구. 느낌표 아이콘은 이미지 없이 원형 배경 + 글자로 만든다 */
.contract-download-notice {display:flex; align-items:center; gap:8px; margin-top:30px; font-size:14px; color:#555;}
.contract-download-notice .notice-icon {flex:0 0 18px; width:18px; height:18px; border-radius:50%; background:#186eb5; color:#fff; font-size:12px; font-weight:700; line-height:18px; text-align:center;}
.standard-contract-download-btn,
.standard-contract-download-btn:link,
.standard-contract-download-btn:visited,
.standard-contract-download-btn:hover,
.standard-contract-download-btn:active {color:#fff !important;}
.split-download {position:relative; display:flex;}
.btn-download {width:240px; height:48px; border:1px solid #2563EB; border-right:none; background:#2563EB; color:#fff; border-radius:8px 0 0 8px; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;}
.btn-arrow {width:46px; height:48px; border:1px solid #18B55B; border-radius:0 8px 8px 0; background:#18B55B; color:#fff; cursor:pointer; transition:.25s;}

.split-download:hover .btn-download,
.split-download:hover .btn-arrow {transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08);}
.download-menu {position:absolute; bottom:55px; top:auto; right:0; width:286px; background:#fff; border:1px solid #ddd; border-radius:8px; overflow:hidden; display:none; box-shadow:0 10px 30px rgba(0,0,0,.12); z-index:9999;}
.download-menu li {padding:13px 18px; cursor:pointer;}
.download-menu li:hover {background:#F4F8FF;}


.result-table thead th {padding: 5px;}
.result-table tbody th {padding: 0px;}
.result-table tbody td {padding: 5px;}
.result-history-table th, .result-history-table td {min-width: 90px; height: 40px;}

.form-grid.calcha-box .point-wrap {display: flex; gap: 5px; align-items: flex-end;}
.form-grid.calcha-box .point-card + .point-card {margin-top: 0px;}
.form-grid.calcha-box .point-body {padding: 10px; display: flex; gap: 10px; flex-direction: column;}
.form-grid.calcha-box .point-body .point-row {padding: 0px; gap: 4px; flex-direction: column;}
.form-grid.calcha-box .point-label {text-align: center;}
.form-grid.calcha-box .point-card.change {flex: 0.6;}

.sim-right.form-grid {align-items: start;}

.info-box {padding: 15px 20px; border: 1px solid #ddd; border-radius: 10px; background: #fff; max-height: 700px; overflow-y: auto;}
.info-box h3 {color: #505050; margin-bottom: 8px; font-size: 18px;}
.info-box .text {font-size: 14px; line-height: 24px; font-weight: 400; color: #505050; margin-bottom: 10px;}
.info-box .example {color: #E60024;}
.info-box ul {padding-left: 20px; color: #222; font-size: 14px;}
.info-box ul li {list-style: disc; color: #505050; font-size: 16px; line-height: 24px; font-weight: 400;}
.info-box .table {}
.info-box .table table {border: 1px solid #FFC7C7; margin-top: 10px;}
.info-box .table table tr {border-bottom: 1px solid #D2D2D2;}
.info-box .table table tr:nth-child(1) {border-bottom: none;}
.info-box .table table tr:nth-last-child(1) {border-bottom: none;}
.info-box .table table td {padding: 10px; min-height: unset; height: auto; border-bottom: none; font-size: 14px; line-height: 26px; color:#222; text-align: center; border:1px solid #ddd;}
.info-box .table table td:last-child {border-left: 1px solid #D2D2D2;}
.info-box .table table .title {background: #FFEFEF; border-right: 1px solid #FFC7C7 !important; border-top: none !important; border-bottom: none !important; border-left: none !important;}
.info-box .table table .title:last-child {border-right: none !important;}
.info-box .table table tr .title:nth-last-child(1){border-right: none;}

.tooltip-wrap {display: inline-flex; align-items: center; margin-left: 10px;}
.tooltip-btn {width: 20px; height: 20px; padding: 0; border: 1px solid #999; border-radius: 50%; background: #fff; font-size: 16px; font-weight: 700; color: #555; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.tooltip-btn.active {background: #333; border-color: #333; color: #fff;}
.tooltip-box {display: none; position: absolute; left: -65px; top: 58px; width: calc(100% - -130px); box-sizing: border-box; padding: 20px; border-radius: 8px; background: #5f9ea0; color: #fff; z-index: 99999; box-shadow: 0 8px 25px rgba(0,0,0,.2);}
.tooltip-box::before {content: ""; position: absolute; top: -10px; left: 90px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #5f9ea0;}
.tooltip-box.show {display: block;}
.tooltip-box strong {display: block; margin-bottom: 15px; font-size: 16px;}
.tooltip-box p {margin: 0; font-size: 14px; line-height: 1.7;}
.sim-card {position: relative; overflow: visible;}
.sim-card.tooltip-active {z-index: 1000;}

.input-noti p {position: relative; cursor: pointer;}
.status-tooltip {display: none; position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); padding: 12px 15px; box-sizing: border-box; background: #333; color: #fff; border-radius: 8px; font-size: 13px; font-weight: 400; line-height: 1.6; text-align: left; white-space: nowrap; z-index: 99999; box-shadow: 0 5px 15px rgba(0,0,0,.15);}
.status-tooltip::before {content: ""; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #333;}
.input-noti p:hover .status-tooltip {display: block;}

/* 변동카드 "변동" 첫 행에 붙는 조정요건 충족(O)/미충족(X) 뱃지. 카드 크기에 맞춰 작게 표시하고
   .status-tooltip을 그대로 재사용해 마우스 오버 시 사유를 보여준다. */
.final-variation-tag {position: relative; display: inline-block; cursor: pointer; font-size: 12px; font-weight: 700;}
.final-variation-tag .cond-yes strong, .final-variation-tag .cond-no strong {font-size: 12px; font-weight: 700;}
.final-variation-tag .cond-yes strong {color: #1B63F0;}
.final-variation-tag .cond-no strong {color: red;}
.final-variation-tag:hover .status-tooltip {display: block;}

.new-window-icon {
    display: inline-block;
    position: relative;
    width: 13px;
    height: 13px;
    margin-left: 6px;
    vertical-align: -1px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    box-sizing: border-box;
}

.new-window-icon::before {
    content: "";
    position: absolute;
    right: -2px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    background: #fff;
}

.new-window-icon::after {
    content: "";
    position: absolute;
    right: 0;
    top: -2px;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
}

/* 출력하기: 납품대금 연동 결과표(.result-table-card)만 A4에 맞춰 인쇄하고 나머지는 전부 숨김.
   여러 페이지로 넘어가도 되니 크기는 읽기 좋게 넉넉히 잡고, 표/차트 하나가 페이지 중간에서
   잘리지 않도록만 신경쓴다. */
/* 연동 산식 아래 안내 문구: 화면에서만 보이고 인쇄(.no-print)에서는 빠진다.
   HWP/엑셀/계약서 다운로드는 linkTablePayload()가 .link-target-formula span만 읽으므로 원래 포함되지 않는다. */
.formula-notice {margin-top:8px; color:#888; font-size:13px; line-height:1.6;}
/* .no-print의 반대: 화면에서는 숨기고 인쇄에서만 보인다 */
.print-only {display:none;}

@media print {
    @page {
        size: A4;
        margin: 14mm;
    }

    .no-print {
        display: none !important;
    }
    .print-only {
        display: block !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* #container-wrap에 배경 이미지/색(ex_style.css의 comm_back_img.png, #fdf9ee)과 margin-top:160px가
       걸려있는데, 이 요소는 결과표의 조상이라 display:none으로 숨기지 않고 그대로 두고 있다(숨기면
       .result-table-card까지 같이 사라짐). 그래서 인쇄용으로 배경/여백만 따로 제거해준다.
       이게 "A4 크기에 안 맞아 보이는" 것의 원인이기도 하다 - 카드 자체는 182mm로 고정돼 있지만,
       뒤에 깔린 이 배경이 페이지 전체를 채우면서 카드 크기가 안 맞는 것처럼 보이게 만들었다. */
    html, body, #container-wrap, .ex-cont-wrap, .sim-wrap, .sim-container, .sim-flex, .sim-left, .sim-right {
        background: none !important;
        background-image: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        min-height: 0 !important;
    }


    .result-table-card, .result-table-card * {
        box-sizing: border-box !important;
    }


    .result-table-card {
        display: block !important;
        position: static;
        width: 182mm !important;
        max-width: 182mm !important;
        margin: 0 auto !important;
        border: none;
        box-shadow: none;
    }

    .result-table-card .sim-card-header {
        justify-content: center;
        border-bottom: 1px solid #E5EAF2;
        margin-bottom: 14px;
    }


    .result-table-card .sim-card-header .card-no {
        display: none;
    }

    .result-table-card .sim-card-header h3 {
        font-size: 20px;
    }

    .result-ttl p {
        font-size: 13px;
    }


    .result-ttl p span {
        color: #000 !important;
    }

    .result-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }


    .result-table .result-wrap {
        page-break-inside: avoid;
    }


    .result-history-table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
    }


    .result-history-table th, .result-history-table td {
        min-width: 0 !important;
        height: auto !important;
        padding: 8px 4px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    .result-history-table thead th {
        font-size: 11px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }


    .result-history-table tbody th {
        font-size: 10px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .result-history-table tbody th:nth-child(1),
    .result-history-table tbody th:nth-child(2) {
        width: 65px !important;
    }


    .result-history-table tbody td {
        font-size: 10px !important;
        line-height: 1.3 !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
    }

    .result-history-table .row-title {
        width: 130px !important;
    }
    
    .result-history-table tr {
        page-break-inside: avoid;
    }

    hr {
        margin: 20px 0;
    }

    .result-grp {
        page-break-before: auto;
    }

    /* 차트 3개(납품대금/미연동, LME시세, 환율)를 한 줄에 나란히 두지 않고, 한 줄에 하나씩 세로로 나열.
       display:flex(+column)는 그대로 두면 안 된다 - 브라우저가 flex 컨테이너 내부 자식들의 개별
       page-break-inside를 무시하고 flex 전체를 하나의 덩어리로 취급해서, 셋 중 하나라도 안 들어가면
       차트 3개가 통째로 다음 페이지로 넘어가 버린다. display:block으로 바꿔서 일반 블록 흐름으로
       두면 각 .graph-box가 각자 자기 위치에서 들어가는지/안 들어가는지 개별 판단해서, 들어가는 것까지는
       현재 페이지에 남고 안 들어가는 것부터 다음 페이지로 넘어간다. */
    .graph-wrap {
        display: block;
    }

    /* height는 Simulator.cshtml의 PRINT_CHART_HEIGHT(chart.resize에 넘기는 값)와 반드시 같아야 한다.
       다르면 캔버스 내부 그림 비율과 실제 표시 크기가 어긋나 다시 찌그러져 보인다.
       flex gap 대신 margin-bottom으로 차트 사이 간격을 준다(display:block에서는 gap이 안 먹음). */
    .graph-box {
        width: 100% !important;
        height: 260px;
        padding: 12px;
        margin-bottom: 12px;
        page-break-inside: avoid;
    }

    /* 하도급대금등 연동표(.link-paper) 출력. 폭/정렬/위치는 Simulator.cshtml의 printOnly()가 인쇄 직전에
       인라인 !important로 못박는다(.result-table-card와 같은 방식) - 여기서는 화면용 카드 그림자/여백처럼
       인쇄에 어울리지 않는 부분만 정리한다. */
    .link-paper, .link-paper * {
        box-sizing: border-box !important;
    }
    .link-paper {
        box-shadow: none !important;
        padding: 0 !important;
        /* 제목(34px)/표 행(18px 패딩, line-height 1.7) 등을 100% 그대로 찍으면 세로 길이가
           A4 한 장(297mm)을 넘어 2페이지로 넘어간다. zoom은 transform:scale과 달리 레이아웃
           자체를 축소된 크기로 다시 계산해주므로, 폭/여백/줄바꿈 위치가 전부 90% 기준으로
           다시 잡히면서 세로 길이도 같이 줄어 1페이지 안에 들어온다. */
        zoom: 0.9 !important;
    }

    /* "4. 원재료 가격의 변동률을 산정을 위한 기준시점 및 비교시점"의 <br>은 화면에서 좁은 칸에 줄바꿈용으로
       넣어둔 것 - 인쇄에서는 셀 폭이 넓어져 줄바꿈 없이 한 줄로 나와도 되니 <br> 자체를 숨긴다. */
    .paper-table th br {
        display: none;
    }
}
.rs-notice-box {display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 14px 18px; background: #f5f9f0; border: 1px solid #dce9cf; border-radius: 10px; box-sizing: border-box;}
.rs-notice-box .rs-notice-icon {flex: 0 0 auto; color: #73a73a; font-size: 16px; font-weight: 700; line-height: 1.6;}
.rs-notice-box p {margin: 0; color: #555; font-size: 18px; line-height: 1.7; word-break: keep-all; position: relative; padding-left: 14px;}
.rs-notice-box p:before {content: "-"; position: absolute; left: 0;}
.rs-notice-box .none-hip p {padding-left: 0px;}
.rs-notice-box .none-hip p:before {display: none}


/* 전체 박스 */
.price-info-box {margin: 0 auto; padding: 10px; border-radius: 10px; background:radial-gradient(circle at 12% 15%, rgba(222, 244, 238, 0.95), transparent 34%), radial-gradient(circle at 88% 10%, rgba(232, 246, 242, 0.85), transparent 32%), linear-gradient(135deg, #e8f6f2 0%, #f4fbf9 50%, #eaf7f3 100%);}

/* 제목 */
.price-info-heading {display: flex; align-items: center; gap: 8px; margin-bottom: 8px;}
.heading-icon {display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #08a968; flex: 0 0 auto;}
.heading-icon svg {width: 100%; height: 100%;}
.price-info-heading h2 {margin: 0; color: #004b46; font-size: 15px; font-weight: 600; line-height: 1.25;}

/* 카드 영역 */
.price-card-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;}
.price-card {display: block; min-width: 0; padding: 10px; border: 1px solid #d5e0df; border-radius: 10px; background: rgba(255, 255, 255, 0.92); color: inherit; text-decoration: none; box-shadow:0 2px 4px rgba(0, 0, 0, 0.015), inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;}
.price-card:hover {transform: translateY(-3px); border-color: #99c7f8; box-shadow:0 12px 28px rgba(29, 89, 139, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);}
.price-card:focus-visible {outline: 3px solid rgba(0, 113, 238, 0.25); outline-offset: 3px;}
.price-card-head {display: flex; align-items: center; justify-content: space-between; gap: 4px;}
.price-card-head strong {min-width: 0; color: #0873ef; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: -1.2px; word-break: keep-all;}
.external-icon {display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto; color: #0873ef;}
.external-icon svg {width: 100%; height: 100%;}
.price-card p {margin: 5px 0 0; color: #3d3d3d; font-size: 13px; font-weight: 400; letter-spacing: -0.8px; word-break: keep-all;}

/* 하단 안내 */
.price-notice {display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid #d4e1df; border-radius: 10px; background: rgba(255, 255, 255, 0.18);}
.notice-icon {display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(180deg, #14b86c 0%, #02a258 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 5px rgba(0, 145, 86, 0.14);}
.notice-icon svg {width: 31px; height: 31px;}
.price-notice p {margin: 0; color: #07524d; font-size: 13px; letter-spacing: -0.4px; word-break: keep-all;}