/* =========================================================
   page.css - 페이지(상품 주문 폼) 관련 스타일
   ========================================================= */

/* 즐겨찾기(+) 버튼: 정사각형, 회색바탕 */
.inpp-fav-btn{width:36px; height:36px; flex:none; border:none; border-radius:4px; background:#f4f5f7; color:#888; display:inline-flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer;}
.inpp-fav-btn:hover{background:#e9ecef;}

/* 포스터 형태(가로형/세로형) 전용 커스텀 라디오버튼 (박스형) */
.inpp-shape-opt{display:inline-flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; margin:0;}
.inpp-shape-opt input{display:none;}
.inpp-shape-box{width:82px; height:64px; border:1px solid #d6dbe1; display:flex; align-items:center; justify-content:center; background:#fff;}
.inpp-shape-opt input:checked ~ .inpp-shape-box{border-color:#1279bd;}
.inpp-shape-rect{display:block; background:#c5cdd8;}
.inpp-shape-rect.h{width:42px; height:30px;}
.inpp-shape-rect.v{width:30px; height:42px;}
.inpp-shape-opt input:checked ~ .inpp-shape-box .inpp-shape-rect{background:#1279bd;}
.inpp-shape-txt{font-size:12px; color:#555;}
.inpp-shape-opt input:checked ~ .inpp-shape-txt{color:#1279bd;}

input[type=checkbox] {
  display: none; }

input[type=checkbox] + label {
  display: inline-block;
  cursor: pointer;
  padding-left: 28px;
  background: url("/data/assets/next/images/check-round.png") no-repeat;
}

input[type=checkbox]:checked + label {
  background-image: url("/data/assets/next/images/check-round-fill.png");
}


input[type=radio] {
  display: none;
}


input[type=radio] + label {
  display: inline-block;
  cursor: pointer;
  padding-left: 28px;
  background: url("/data/assets/next/images/check-circle1.png") no-repeat;
}

input[type=radio]:checked + label {
  background-image: url("/data/assets/next/images/check-circle-fill.png");
}

/* ===== 본문 컨테이너 ===== */
.inpp-product{padding-bottom:60px;}
.inpp-product .inpp-wrap{display:flex; gap:50px; align-items:flex-start;}
.inpp-col-main{flex:1; min-width:0; padding-top:14px;} /* 작업가이드 버튼 위 여백 = 타이틀행 아래 여백(14px) */
.inpp-col-side{width:326px; flex:0 0 326px; position:sticky; top:111px; padding-top:0;} /* 고정 헤더(62+49) 바로 아래 — 상단 여백 없음 */

/* ===== 타이틀 / 탭 ===== */
.inpp-prod-title-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.inpp-prod-title{font-size:20px; padding-left:10px; font-weight:500; color:#1a1a1a; letter-spacing:-0.5px; font-family:'Noto Sans KR',sans-serif;}
.inpp-guide-btn{border:none; background:#f4f5f7; color:#888; font-size:13px; padding:7px 14px; cursor:pointer; display:inline-flex; align-items:center; border-radius:2px;} /* 회색 바탕 버튼 */
.inpp-guide-btn .bi{color:#8a93a3; margin-right:5px; font-size:14px;}

.inpp-prod-tabs{display:flex; margin-bottom:18px;} /* 탭 상자 보더 제거 */
.inpp-prod-tabs > button, .inpp-prod-tabs > a{flex:1; height:45px; position:relative; display:flex; align-items:center; justify-content:center; border:none; background:#f5f5f7; color:#333; font-size:15px; font-weight:400; padding:0; font-family:'Noto Sans KR',sans-serif; text-decoration:none; cursor:pointer;}
.inpp-prod-tabs > * + *::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:20px; background:#dadbdd;}
.inpp-prod-tabs > .inpp-active + *::before,
.inpp-prod-tabs > .inpp-active::before{display:none;} /* 활성(파란) 박스 안·옆 구분선 숨김 */
.inpp-prod-tabs > .inpp-active{background:#006bb9; color:#fff; font-weight:400;}
.inpp-prod-tabs .inpp-badge-hot{display:inline-block; background:#ff0303; color:#fff; font-size:11px; font-weight:700; padding:2px 6px; border-radius:3px; margin-left:6px; vertical-align:middle; line-height:1.3;}

/* ===== 폼 라인 공통 ===== */
.inpp-fline{display:flex; border-top:1px solid var(--inpp-line); min-height:0; align-items:stretch;}
.inpp-fline + .inpp-fline{border-top:none;}
.inpp-fline:first-child{padding-top:12px;}
.inpp-fline .inpp-lb{width:75px; flex:0 0 75px; display:flex; align-items:center; justify-content:flex-start; padding-left:0; font-size:13px; color:#525252; font-weight:500;}
.inpp-fline .inpp-ct{flex:1; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:6px 12px 6px 7px;}
.inpp-section .inpp-ct{gap:12px;}
/* 엔진 주입 대기용 빈 span(#cover-color-optwrap)이 폭 0 flex 아이템으로 남아 gap 이 두 번 들어가는 것 방지
   (span:empty 전체를 잡으면 .inpp-shape-rect 같은 장식용 빈 span 까지 숨으므로 id 로 한정) */
#cover-color-optwrap:empty{display:none;}
/* 토너 주의 문구 라벨(#default-caution 등 label.pl-2): p/label 기본 마진 제거해 셀렉트와 세로 중앙 정렬 */
.inpp-ct label.pl-2{margin:0; display:inline-flex; align-items:center;}
.inpp-ct label.pl-2 p{margin:0;}
/* 인쇄방법 줄: 주의 문구 개행으로 내용이 2행이 되어도 '인쇄방법' 라벨은 첫 행(셀렉트) 기준으로 정렬
   (form-top 라벨과 같은 방식 — 첫 행 높이 34px 에 맞춘 고정 높이 박스 + 줄 stretch 방지) */
.inpp-fline.machine .inpp-lb{align-self:flex-start; height:34px; padding-top:6px; box-sizing:content-box;}
.inpp-fline.machine .inpp-ct{align-content:flex-start;}

/* 부트스트랩 폼 컨트롤 컴팩트 스타일 */
.inpp-ct .form-control, .inpp-ct .form-select, .inpp-bind-main .form-select{height:34px; border:1px solid #d6dbe1; font-size:13px; color:#525252; background-color:#fff;}
.inpp-ct .form-control{padding:6px 10px;}
.inpp-ct .form-select, .inpp-bind-main .form-select{padding:0 26px 0 10px; background-position:right 8px center;}

.inpp-unit{font-size:13px; color:#555;}
.inpp-sub-spec{font-size:13px; color:#777; display:flex; align-items:center; gap:5px; margin-top:6px; width:100%; white-space:nowrap;}
.inpp-sub-spec .inpp-spine{display:flex; align-items:center; gap:6px; margin-left:auto;}
.inpp-sub-spec b{font-weight:500; font-size:13px; color:#555; white-space:nowrap;}
.inpp-sub-spec .inpp-mini{display:inline-block; width:42px; height:26px; text-align:center; border:none; background:#f4f5f7; color:#555; font-size:13px; padding:0 4px;}
.inpp-sub-spec .inpp-accent{color:#1279bd; font-weight:500;}
.inpp-helper-red{color:var(--inpp-red); font-size:12px;}
.inpp-page-box{width:178px; height:34px; border:1px solid #d6dbe1; display:flex; align-items:center; background:#fff; box-sizing:border-box;}
.inpp-page-box .inpp-page-input{flex:1; min-width:0; height:32px; border:none; padding:0 10px; font-size:13px; color:#525252; background:transparent;}
.inpp-page-box .inpp-page-unit{padding-right:12px; font-size:13px; color:#888;}
.inpp-helper-blue{color:#1279bd; font-size:12px; margin-left:8px;}

/* 상단 폼 + 미리보기 */
.inpp-form-top{display:flex; gap:0;}
.inpp-form-top .inpp-ftl{flex:1; min-width:0; padding-bottom:16px; padding-right:15px;}
.inpp-form-top .inpp-ftl .inpp-fline{border-top:none; border-bottom:none; min-height:0; align-items:flex-start; padding-top:0;}
.inpp-form-top .inpp-ftl .inpp-fline .inpp-ct{padding-top:6px; padding-bottom:6px; padding-left:7px; padding-right:0; min-width:0;}
.inpp-form-top .inpp-ftl .inpp-fline:last-child .inpp-ct{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-right:0;}
.inpp-form-top .inpp-ftl .inpp-fline:last-child .inpp-page-box{width:auto; min-width:0;}
.inpp-form-top .inpp-ftl .inpp-lb{height:34px; padding-top:6px; box-sizing:content-box;}
.inpp-preview-box{width:306px; flex:0 0 306px; background:#eef0f3; align-self:stretch; margin-top:6px; border:1px solid var(--inpp-line); border-bottom:none; display:flex; align-items:center; justify-content:center;}
.inpp-preview-box .hardcover-template-holder2{text-align:center;}
/* 템플릿 썸네일: 로딩/실패 시에도 168px 영역 유지 — d-controller makeTemplate 의 inline height:100% 무력화 */
.inpp-preview-box .hardcover-template-holder2 #template-thumb{width:100%; height:168px !important; object-fit:contain;}
/* 일반책자(23): 상철 선택시 세로로 긴 템플릿이 렌더돼도 회색박스 크기 고정 — 이미지는 박스 안에서 contain (인라인 height:100%·max-height:400px 무력화) */
.inpp-preview-box .book-template-holder #template-thumb{width:100%; height:166px !important; object-fit:contain;}
.inpp-preview-thumb{border:1px solid #d6dbe1; height:118px; display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
.inpp-preview-thumb .inpp-pages{display:flex;}
.inpp-preview-thumb .inpp-pages span{width:46px; height:62px; border:1px solid #c5cdd8;}
.inpp-preview-thumb .inpp-pages span:first-child{border-right:none;}
.inpp-tpl-btn{width:100%; border:1px solid var(--inpp-blue); color:var(--inpp-blue); background:#fff; font-size:13px; font-weight:600; padding:8px 0; border-radius:2px;}
.inpp-tpl-btn .bi{margin-right:4px;}

/* 제본 섹션 */
.inpp-bind-wrap{display:flex; border:1px solid var(--inpp-line); margin-top:0;}
.inpp-bind-cats{width:82px; flex:0 0 82px; border-right:1px solid var(--inpp-line); background:#f5f6fb;}
.inpp-bind-cats input{display:none;}
.inpp-bind-cats .inpp-cat{height:34px; display:flex; align-items:center; justify-content:flex-start; padding-left:8px; font-size:12px; color:#555; background:#f5f6fb; cursor:pointer; white-space:nowrap; margin:0;}
.inpp-bind-cats input:checked + .inpp-cat{background:#006bb9; color:#fff; font-weight:700; box-shadow:-1px 0 0 0 #006bb9, 1px 0 0 0 #006bb9;}
.inpp-bind-main{flex:1; padding:16px 0 6px 0;} /* 셀렉트 박스 아래 여백 축소 */
.inpp-bind-thumbs{display:flex; gap:20px; margin-bottom:10px; margin-left:20px;}
.inpp-bind-thumb{text-align:center; cursor:pointer; margin:0;}
.inpp-bind-thumb input{display:none;}
.inpp-bind-thumb .inpp-img{display:inline-block; line-height:0; background:#f5f6fb;}
.inpp-bind-thumb img{width:70px; height:70px; display:block;}
.inpp-bind-thumb p{font-size:12px; color:#555; margin-top:2px;}
.inpp-bind-thumb input:checked ~ .inpp-img{background:#fff; box-shadow:0 0 0 1px #1279bd;}
.inpp-bind-thumb input:checked ~ p{color:#1279bd;}
.inpp-bind-wing{border-top:1px solid var(--inpp-line); padding-top:8px;}
.inpp-bind-wing .inpp-wing-row{display:flex; align-items:center; gap:10px; margin-left:20px; min-height:46px;}
.inpp-bind-wing .inpp-wl{width:72px; font-size:13px; font-weight:500; color:#525252; text-align:center;}
.inpp-bind-wing .form-select{width:258px; flex:none;}
.inpp-wing-extra{display:none; align-items:center; gap:6px; font-size:13px; color:#555;}
.inpp-wing-extra.show{display:flex;}
.inpp-wing-extra .inpp-flap-input{width:64px; height:30px; border:1px solid #d6dbe1; text-align:center; font-size:13px; color:#525252;}
.inpp-wing-extra .inpp-flap-unit{color:#888;}
.inpp-wing-extra .inpp-flap-gap{margin-left:14px;}
/* 스프링제본 링 종류(트윈링/코일링): 라디오 한 줄 + 아래 셀렉트 3개(위치 고정, 내용만 토글) */
#springRing{flex-direction:row; align-items:center; gap:8px;} /* 링종류 셀렉트 + 옵션 셀렉트 3개 한 줄 (v2 시안) */
.inpp-ring-radios{display:flex; align-items:center; gap:24px; } /* 라디오 2개 한 줄(컴팩트) */
.inpp-ring-row .inpp-ring-opt{display:inline-flex; align-items:center; margin:0; cursor:pointer; font-size:13px; font-weight:600; color:#525252;}
.inpp-ring-row .inpp-ring-opts{display:flex; align-items:center; gap:8px;} /* 셀렉트 3개 한 줄 (twinOpts/coilOpts 같은 자리) */
.inpp-ring-row .inpp-ring-sel{width:auto; min-width:130px; height:30px; flex:0 0 auto; font-size:13px; color:#525252; padding:0 28px 0 10px; background-position:right 8px center;}

/* 섹션 블럭 (블럭간 마진 일관 설정용) */
.inpp-section{margin-top:26px;}
.inpp-section .inpp-sec-title{margin-top:0;}

/* 섹션 타이틀 */
.inpp-sec-title{display:flex; align-items:center; gap:8px; margin:26px 0 10px;}
.inpp-sec-title .bi{color:#525252; font-size:16px;}
.inpp-sec-title > i{position:relative; top:1px;}
.inpp-sec-title b{font-size:15px; color:#000; font-weight:500;}
.inpp-sec-title .inpp-desc{font-size:12px; color:#9aa3af;}
.inpp-col-main > .inpp-sec-title{padding-bottom:10px; border-bottom:1px solid var(--inpp-line);}

/* 인쇄 아이콘 */
.inpp-ink-ic{width:30px; height:30px; border:1px solid #d6dbe1; display:inline-flex; align-items:center; justify-content:center; font-size:15px; background:#fff;}
.inpp-ink-ic.inpp-blue{color:var(--inpp-blue);}
.inpp-ink-ic.inpp-warn{color:var(--inpp-red);}
.inpp-paper-btn{height:34px; border:1px solid #d6dbe1; background:#fff; font-size:13px; color:#555; padding:0 12px;}
.inpp-paper-btn .bi{color:var(--inpp-blue); margin-right:4px;}

/* 추가 버튼들 */
.inpp-add-btns{display:flex; gap:12px; margin-top:6px; margin-left:82px;}
/* 내지/면지/간지 추가: 커스텀 체크박스(토글 버튼) — 순수 CSS 토글(:checked ~) */
.inpp-add-chk{display:none;}
.inpp-add-btns .inpp-add-btn{flex:0 0 178px; width:178px; height:34px; display:inline-flex; align-items:center; justify-content:center; gap:4px; border:1px solid #e3e7ec; background:#f4f5f7; color:#888; font-size:13px; border-radius:0; cursor:pointer; padding:0; margin:0;}
.inpp-add-btns .inpp-add-btn .bi{color:#888;}
.inpp-add-btns .inpp-add-btn .inpp-am{display:none;} /* 기본: - 아이콘 숨김 */
/* 활성(체크) 라벨 스타일: 체크박스가 .inpp-add-btns·패널과 형제이므로 ~ 로 타겟 */
#addInner:checked   ~ .inpp-add-btns label[for="addInner"],
#addMyeonji:checked ~ .inpp-add-btns label[for="addMyeonji"],
#addGanji:checked   ~ .inpp-add-btns label[for="addGanji"]{background:#eaf3fb; border-color:#1279bd; color:#1279bd;}
#addInner:checked   ~ .inpp-add-btns label[for="addInner"] .bi,
#addMyeonji:checked ~ .inpp-add-btns label[for="addMyeonji"] .bi,
#addGanji:checked   ~ .inpp-add-btns label[for="addGanji"] .bi{color:#1279bd;}
#addInner:checked   ~ .inpp-add-btns label[for="addInner"] .inpp-ap,
#addMyeonji:checked ~ .inpp-add-btns label[for="addMyeonji"] .inpp-ap,
#addGanji:checked   ~ .inpp-add-btns label[for="addGanji"] .inpp-ap{display:none;}  /* 활성: + 숨김 */
#addInner:checked   ~ .inpp-add-btns label[for="addInner"] .inpp-am,
#addMyeonji:checked ~ .inpp-add-btns label[for="addMyeonji"] .inpp-am,
#addGanji:checked   ~ .inpp-add-btns label[for="addGanji"] .inpp-am{display:inline;} /* 활성: - 표시 */
/* 추가 패널: 활성 시 표시 (체크박스 ~ 패널) */
.inpp-add-panel{display:none; margin-top:10px;}
#addInner:checked   ~ #panelInner,
#addMyeonji:checked ~ #panelMyeonji,
#addGanji:checked   ~ #panelGanji{display:block;}
/* 면지추가 "내지와 같음" 체크박스: 글자 축소 + 체크 이미지와 세로 가운데 정렬 */
.inpp-ct label[for="startend-inner-same"]{font-size:13px; color:#555; font-weight:400; display:inline-flex; align-items:center; background-position:left center;}

/* 추천후가공 */
.inpp-finish-grid{display:flex; gap:14px;}
.inpp-finish-card{flex:1; text-align:center; cursor:pointer;}
.inpp-finish-card .inpp-img{position:relative; border:1px solid #e3e7ec; overflow:hidden;}
.inpp-finish-card img{width:100%; aspect-ratio:200/105; display:block;}
.inpp-finish-card .inpp-best{position:absolute; top:0; left:0; background:var(--inpp-red); color:#fff; font-size:10px; font-weight:700; padding:2px 7px;}
.inpp-finish-card p{font-size:13px; color:#525252; margin:7px 0; font-weight:600;}

/* 체크박스 라인 */
.inpp-check-line{display:flex; gap:30px; align-items:center; padding:6px 0;}
.inpp-check-line label{font-size:14px; color:#525252; display:flex; align-items:center; gap:7px; cursor:pointer;}
.inpp-urgent-desc{color:var(--inpp-red); font-size:13px; margin-bottom:8px;}
textarea.inpp-memo{height:120px; border:1px solid #d6dbe1; border-radius:0; padding:12px; font-size:13px; resize:none;}

/* 하단 안내 탭 */
.inpp-info-tabs{display:flex; border-bottom:1px solid var(--inpp-line); margin-top:30px;}
.inpp-info-tabs a{flex:1; text-align:center; padding:14px 0; font-size:15px; color:#888; font-weight:600;}
.inpp-info-tabs a.inpp-active{color:var(--inpp-navy); border-bottom:2px solid var(--inpp-navy);}

/* 다양한 용도 */
.inpp-usage{margin-top:46px;}
.inpp-usage h3{text-align:center; font-size:22px; font-weight:800; color:#1a1a1a; margin-bottom:26px; font-family:'Noto Sans KR',sans-serif;}
.inpp-usage-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px 22px;}
.inpp-usage-item{text-align:center;}
.inpp-usage-item img{width:100%; height:150px; object-fit:cover; border-radius:4px; display:block;}
.inpp-usage-item p{font-size:14px; color:#525252; margin-top:12px; font-weight:600;}

/* ===== 우측 견적 패널 ===== */
.inpp-side-box{border:1px solid var(--inpp-line); border-top:none;} /* 상단은 고정 헤더 border-bottom 과 겹쳐 제거 */
.inpp-side-preview{background:#eef0f3; padding:0; height:210px; overflow:hidden;}
.inpp-side-preview img{width:100%; height:210px; object-fit:cover; display:block;}
.inpp-side-pad{padding:14px;}
.inpp-side-head{display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--inpp-line);}
.inpp-side-head b{font-size:15px; color:#1a1a1a; font-weight:400;}
.inpp-side-head a{font-size:13px; color:#525252;}
.inpp-side-head a .bi{margin-right:3px;}

.inpp-estimate{position:relative;}
.inpp-estimate::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--inpp-line);}
.inpp-spec{display:flex; gap:0; padding:12px 0; border-bottom:1px solid var(--inpp-line);}
.inpp-spec .inpp-spec-left{flex:0 0 50%; min-width:0; padding-right:12px;}
.inpp-spec .inpp-spec-right{flex:0 0 50%; min-width:0; padding-left:12px;}
.inpp-spec ul li{display:flex; justify-content:space-between; font-size:12px; line-height:21px;}
.inpp-spec-left li .inpp-v{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /* 긴 값(인터프로판 규격 등)은 박스 폭만큼만 + 말줄임 */
.inpp-spec-left li .inpp-k{flex-shrink:0; white-space:nowrap; margin-right:8px;} /* 값이 길어도 라벨(용지 등) 유지 + 라벨↔값 최소 간격(공백 2개 폭) */

.inpp-summary{display:flex; padding:9px 0; border-bottom:1px solid var(--inpp-line);}
.inpp-sum-left{flex:0 0 50%; min-width:0; padding-right:12px; display:flex; flex-direction:column; justify-content:center;}
.inpp-sum-right{flex:0 0 50%; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
.inpp-sum-line{display:flex; justify-content:space-between; font-size:12px; line-height:22px;}
.inpp-sum-right .inpp-tl{font-size:13px; color:#555; font-weight:400;}
.inpp-sum-right .inpp-tr{font-size:24px; font-weight:500; color:#333; line-height:1.05;}
.inpp-sum-right .inpp-tr small{font-size:14px; font-weight:400; color:#555; margin-left:2px;}

.inpp-btn-2{display:flex; gap:8px; margin-top:14px;}
.inpp-btn-2 button{flex:1; height:40px; border:1px solid #333; background:#fbfbfc; color:#525252; font-size:14px; font-weight:400; border-radius:0;}
.inpp-btn-2 button .bi{margin-right:5px; color:#666;}
.inpp-btn-cart{flex:1; height:40px; border:1px solid #ff5b59!important; background:#fff!important; color:#ff5b59!important; font-size:15px; font-weight:400; border-radius:0;}
.inpp-btn-order{flex:1; height:40px; border:1px solid #ff5b59!important; background:#ff5b59!important; color:#fff!important; font-size:15px; font-weight:400; border-radius:0;}
.inpp-btn-row{display:flex; gap:8px; margin-top:8px; padding-bottom:12px; border-bottom:1px solid var(--inpp-line);}

/* 업로드 큐 아이템 — 파일명 바로 옆에 삭제(×) 한 줄 배치 (BS4 .row/유틸 미로드 보정, common.js setUploadFile 마크업) */
#order-uploader-queue .uploadifive-queue-item > .row{display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start !important; width:100%;} /* BS 유틸 justify-content-between!important 상쇄 */
#order-uploader-queue .uploadifive-queue-item > .row > div{width:auto !important; flex:0 1 auto !important; padding:0 !important;} /* BS .row>* width:100% 상쇄 — 파일명 폭만큼만 */
#order-uploader-queue .uploadifive-queue-item > .row > div:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#order-uploader-queue .uploadifive-queue-item .close{margin-left:8px; color:#888; text-decoration:none;}

.inpp-compare-row{display:flex; gap:8px; margin-top:12px; padding-bottom:14px; border-bottom:1px solid var(--inpp-line);}
.inpp-compare-btn{flex:1; border:1px solid var(--inpp-line); border-radius:0; overflow:hidden; background:#fff; cursor:pointer;}
.inpp-compare-btn.inpp-cmp-disabled{cursor:not-allowed; opacity:.55;} /* 계산불가: 폼 이동 비활성 */
.inpp-cmp-head{height:30px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:400;}
.inpp-toner .inpp-cmp-head{background:#20a8b8;}
.inpp-yunjeon .inpp-cmp-head{background:#359ad0;}
.inpp-indigo .inpp-cmp-head{background:#5b6ac0;}
.inpp-cmp-price{height:30px; display:flex; align-items:center; justify-content:center; background:#f7f8fa; font-size:19px; font-weight:500; color:#737373;}
.inpp-cmp-price small{font-size:14px; font-weight:400; color:#888; margin-left:2px;}

.inpp-side-notes{margin-top:12px; padding-bottom:40px;} /* 견적창 하단 안내문 아래 여백 */
.inpp-side-notes p{font-size:11.5px; color:#555; line-height:1.7;}
.inpp-side-notes .inpp-move{color:#333; text-decoration:none; font-weight:700;}

.inpp-perfcut-lb{font-size:13px; margin:0 12px 0 4px; display:inline-flex; align-items:center;}


/* 폼 포커스: 부트스트랩 기본 파란 효과 복원 — 리뉴얼 본문 전체 인풋/셀렉트/텍스트영역 */
.inpp-product input:focus,
.inpp-product textarea:focus,
.inpp-product select:focus,
.inpp-product .form-control:focus,
.inpp-product .form-select:focus{
  border-color:#86b7fe;
  box-shadow:0 0 0 .2rem rgba(13,110,253,.25);
  outline:none;
}


/* 수량 박스: 포커스 시 파란 테두리만 (glow 없음) */
.inpp-page-box:focus-within{ border-color:#86b7fe; }
.inpp-page-box .inpp-page-input:focus{ box-shadow:none; } /* 인풋 내부 글로우 제거 */


/* 추천후가공(기존 postproc) — 카드가 좌측 컬럼을 채워 ~185px, 견적창 침범 방지 */
.inpp-product .postproc-selected-box{ flex-wrap:wrap; align-items:stretch; gap:12px; margin-bottom:24px; }
.inpp-product .postproc-selected-box .left,
.inpp-product .postproc-selected-box .right{ flex:1; min-width:0; }
.inpp-product .postproc-selected-box .postproc-selected-wrap{ gap:12px; }
.inpp-product .postproc-selected-box .postproc-item{ flex:1; min-width:0; }
.inpp-product .postproc-selected-box .postproc-item .img-area img.enlarge-img2{ width:100%; height:100px; object-fit:cover; display:block; }
/* 추천후가공 타이틀 밑줄 복원(리뉴얼 섹션 라인과 동일) */
.inpp-product .section-title{ margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--inpp-line); }

/* 추천후가공: 그룹 라벨 제거에 맞춰 중간 점선(divider)·그룹 패딩 제거 */
.inpp-product .postproc-selected-box .left{ border-right:none; padding-right:0; }
.inpp-product .postproc-selected-box .right{ padding-left:0; }

/* 표지/내지 인쇄 색상 라디오 (엔진이 cover_color/inner_color 라디오로 읽음) — 버튼형 토글 */
.inpp-color-radios{ display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }
.inpp-color-radios input[type=radio]{ position:absolute; opacity:0; width:0; height:0; }
.inpp-color-radios label{ padding:6px 12px; border:1px solid #d6dbe1; font-size:13px; color:#555; cursor:pointer; margin:0; line-height:1.2; }
.inpp-color-radios input[type=radio]:checked + label{ border-color:#1279bd; background:#1279bd; color:#fff; font-weight:600; }

/* 표지날개 is_wing: 기존버전과 동일한 일반 라디오버튼 + 텍스트 */
.inpp-wing-radios{ display:inline-flex; align-items:center; }
.inpp-wing-radios input[type=radio]{ margin:0 4px 0 0; }
.inpp-wing-radios label{ margin:0 16px 0 0; font-size:13px; color:#525252; cursor:pointer; }

/* 후가공 오시/미싱 위젯(d-after.js 동적 생성) — 레거시(order.css)와 동일 간격 보정.
   줄수 라벨 간격은 레거시 mr-4(≈20px)가 v2 로드 CSS 엔 없어 0 이 되고,
   간격 인풋은 order.css 의 폭 제한 셀렉터가 구 클래스라 form-control 이 통짜로 커지는 문제 대응 */
#osi-line-buttons, #mising-line-buttons{ display:flex; flex-wrap:wrap; align-items:center; column-gap:20px; row-gap:6px; }
#osi-line-buttons label, #mising-line-buttons label{ margin:0; }
.osi-spacing .osi-input-group, .mising-spacing .mising-input-group{ display:inline-flex; align-items:stretch; }
/* 라벨 박스(연회색)와 인풋이 붙은 인풋그룹 형태 — 레거시 input-group-text 모양.
   라벨은 border-right 없이 인풋에 바로 붙고, 그룹 바깥 모서리만 라운드(좌=라벨, 우=인풋) */
.osi-spacing .input-group-text, .mising-spacing .input-group-text{
  display:flex; align-items:center; background:#f5f6f8; border:1px solid #ced4da; border-right:none;
  border-radius:4px 0 0 4px; margin:0;
  color:#333; font-size:12px; padding:0 8px !important; white-space:nowrap;
}
.osi-spacing .osi-spacing-input, .mising-spacing .mising-spacing-input{
  width:64px !important; flex:0 0 auto; text-align:right;
  border:1px solid #ced4da; border-radius:0 4px 4px 0; margin:0;
  height:30px; font-size:13px; padding:0 8px;
}

/* 오시+접지/접지 카드 — 레거시 마크업이 커스텀 부트스트랩(48컬럼)의 col-md-12/33/38/16 을 쓰는데
   v2 는 Bootstrap5(CDN) 라 해당 클래스가 없어 컬럼이 세로로 무너짐 → 카드 스코프로 레거시 퍼센트 재정의 */
#toggle-afterproc-osifold .col-md-12, #toggle-afterproc-folding .col-md-12{ flex:0 0 25%; max-width:25%; width:25%; position:relative; }
#toggle-afterproc-osifold .col-md-33, #toggle-afterproc-folding .col-md-33{ flex:0 0 68.75%; max-width:68.75%; width:68.75%; }
#toggle-afterproc-osifold .col-md-38, #toggle-afterproc-folding .col-md-38{ flex:0 0 79.166667%; max-width:79.166667%; width:79.166667%; }
#toggle-afterproc-osifold .col-md-16, #toggle-afterproc-folding .col-md-16{ flex:0 0 33.333333%; max-width:33.333333%; width:33.333333%; }
/* BS5 에 없는 form-inline(BS4) — 접지방식 라디오+라벨 인라인 배치.
   gap 은 간격 인풋(.inputbox)들과 '확인' 버튼 사이 여백(레거시 mr-2/mx-2 가 BS5 에 없어 붙던 문제) */
#toggle-afterproc-osifold .form-inline, #toggle-afterproc-folding .form-inline{ display:flex; align-items:center; gap:8px; }