/* [인쇄톡 고객 주문 UX 개선 | 2026-07-30] 상품 주문 화면의 단계·가격·모바일 가독성 보강 */
:root { --order-ink: #233245; --order-muted: #708096; --order-line: #dfe7ef; --order-panel: #f8fbfe; }

.category-page .order { width: min(calc(100% - 48px), 1272px); margin: 0 auto; padding: 22px 0 72px; }
.order-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 20px; overflow: hidden; border: 1px solid var(--order-line); border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(26, 54, 84, .04); }
.order-journey span { position: relative; display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 16px; color: #768599; font-size: 13px; font-weight: 700; }
.order-journey span + span { border-left: 1px solid #edf1f5; }
.order-journey b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #6f7d8c; background: #edf2f6; font-size: 10px; letter-spacing: .04em; }
.order-journey .is-current { color: #1e5f9f; background: #f1f7fd; }
.order-journey .is-current b { color: #fff; background: var(--blue); }

.product-sidebar { position: sticky; top: 18px; }
.product-sidebar-guide { margin: -5px 0 15px; color: var(--order-muted); font-size: 12px; line-height: 1.55; }
.product-card { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.product-card:hover { border-color: #91b8dd; box-shadow: 0 7px 15px rgba(31, 79, 126, .09); transform: translateY(-1px); }
.product-card.active { box-shadow: inset 3px 0 0 var(--blue); }

.option-panel { overflow: hidden; box-shadow: 0 8px 26px rgba(28, 59, 88, .045); }
.option-head { background: linear-gradient(110deg, #fff 0%, #f5f9fd 100%); }
.option-head > div > p { margin: 0; color: #61748a; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.product-detail-link { display: inline-flex; margin-top: 7px; color: #2e6db1; font-size: 12px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.option-head strong { box-shadow: 0 6px 14px rgba(36, 98, 162, .18); }
.option-group { scroll-margin-top: 90px; }
.option-group-heading > span { box-shadow: 0 5px 10px rgba(36, 98, 162, .14); }
.option-group-heading h4 { font-size: 18px; }
.option-group-fields .field > label, .order-form > .field > label { color: #33465a; font-size: 13px; font-weight: 750; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(53, 119, 183, .14); border-color: #5a94c8; }
.upload-dropzone { border-width: 1.5px; border-radius: 10px; background: #f9fcff; transition: background .16s ease, border-color .16s ease; }
.upload-dropzone:hover { border-color: #5d9ed5; background: #f2f8fe; }

.estimate { position: sticky; top: 18px; overflow: hidden; padding: 0; box-shadow: 0 12px 28px rgba(29, 60, 91, .08); }
.estimate-column { display: grid; grid-column: 3; align-content: start; gap: 14px; min-width: 0; }
.estimate-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 16px; border-bottom: 1px solid #e7edf3; background: #fbfdff; }
.estimate-heading .eyebrow { margin: 0 0 4px; font-size: 9px; }
.estimate-heading h3 { margin: 0; }
#quoteStatus { max-width: 105px; padding: 5px 7px; border-radius: 5px; color: #54708a; background: #edf4fa; font-size: 10px; font-weight: 700; line-height: 1.35; text-align: right; }
#quoteStatus.is-ready { color: #347155; background: #eaf7ef; }
#quoteStatus.is-warning { color: #8b651e; background: #fff7e4; }
.estimate > #estimateSummary, .estimate > .price-breakdown, .estimate > .quote-compare, .estimate > .price, .estimate > button { margin-left: 18px; margin-right: 18px; }
.estimate > #estimateSummary { margin-top: 15px; }
/* [인쇄톡 고객 주문 UX 개선 | 2026-08-06] 버튼의 100% 너비에 좌우 여백이 더해져 카드 폭을 넘지 않도록 공통 견적 패널 기준으로 맞춘다. */
.estimate > #quoteButton, .estimate > #addToCart { display: block; width: calc(100% - 36px); box-sizing: border-box; }
.quote-compare { gap: 8px; }
.price-choice { border-radius: 10px; }
.price-choice.is-selected { box-shadow: 0 5px 12px rgba(38, 99, 160, .09); }
.estimate .price { border-radius: 10px; background: #102844; box-shadow: 0 9px 16px rgba(20, 53, 84, .16); }
.estimate > button:last-child { margin-bottom: 18px; }

/* [인쇄톡 고객 주문 UX 개선 | 2026-08-06] 견적 아래에서 바로 읽는 상품별 제작 가이드 */
.category-production-guide { overflow: hidden; margin-top: 22px; border: 1px solid #dbe6ef; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px rgba(29, 60, 91, .055); }
.category-guide-head { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 24px; align-items: center; padding: 24px; border-bottom: 1px solid #e7edf3; background: linear-gradient(125deg, #fbfdff, #eef7ff); }
.category-guide-head .eyebrow { margin: 0 0 6px; font-size: 10px; }
.category-guide-head h3 { margin: 0; color: #213e59; font-size: 23px; letter-spacing: -.055em; }
.category-guide-head p:not(.eyebrow) { max-width:700px; margin: 9px 0 0; color: #60758a; font-size: 13px; line-height: 1.65; }
.category-guide-head img { width: 176px; height: 112px; border-radius: 10px; object-fit: cover; background: #edf2f6; }
.category-guide-overview, .category-guide-flow, .category-guide-longform, .category-guide-cautions { padding: 25px 24px; border-bottom: 1px solid #e7edf3; }
.category-guide-overview > div > h3, .category-guide-section-head h3, .category-guide-longform h3, .category-guide-cautions h3 { margin: 0; color: #233e58; font-size: 21px; letter-spacing: -.055em; }
.category-guide-overview > div > p:not(.eyebrow), .category-guide-longform header > p:last-child, .category-guide-cautions header > p:last-child { margin: 8px 0 18px; color: #718293; font-size: 13px; line-height: 1.65; }
.category-guide-overview .category-guide-points { padding: 0; }
.category-guide-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0 24px; list-style: none; }
.category-guide-points li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 18px 0; border-bottom: 1px solid #edf1f5; }
.category-guide-points span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #2f70ae; background: #e8f3fc; font-size: 9px; font-weight: 900; }
.category-guide-points strong { display: block; color: #344d63; font-size: 13px; }
.category-guide-points p { margin: 5px 0 0; color: #6d7f90; font-size: 12px; line-height: 1.62; }
.category-guide-flow { background: #f8fbfe; }
.category-guide-section-head .eyebrow, .category-guide-longform .eyebrow, .category-guide-cautions .eyebrow { margin: 0 0 6px; font-size: 10px; }
.category-guide-flow > ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.category-guide-flow li { min-height: 135px; padding: 16px; border-top: 3px solid #66b7d8; border-radius: 9px; background: #fff; box-shadow: 0 2px 10px rgba(31, 63, 94, .045); }
.category-guide-flow li b { color: #ec8b15; font-size: 11px; }
.category-guide-flow li strong { display: block; margin-top: 15px; color: #29445d; font-size: 14px; }
.category-guide-flow li p { margin: 6px 0 0; color: #718292; font-size: 11px; line-height: 1.58; }
.category-guide-longform { background: #fff; }
.category-guide-longform > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 7px; }
.category-guide-longform article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 20px 0; border-bottom: 1px solid #e8eef3; }
.category-guide-longform article:nth-last-child(-n+2) { border-bottom: 0; }
.category-guide-longform article > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #2f70ae; background: #edf5fc; font-size: 10px; font-weight: 900; }
.category-guide-longform h4 { margin: 3px 0 8px; color: #29455e; font-size: 15px; letter-spacing: -.04em; }
.category-guide-longform article p { margin: 0; color: #64778a; font-size: 12px; line-height: 1.72; }
.category-guide-cautions { border-bottom: 0; background: #fffaf0; }
.category-guide-cautions header { margin-bottom: 13px; }
.category-guide-cautions h3 { color: #3c2d14; }
.category-guide-cautions header > p:last-child { margin-bottom: 0; color: #856d47; }
.category-guide-cautions details { border-top: 1px solid #ecdcbf; }
.category-guide-cautions details:last-child { border-bottom: 1px solid #ecdcbf; }
.category-guide-cautions summary { display: flex; align-items: center; gap: 9px; min-height: 50px; color: #4a391d; font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.category-guide-cautions summary::-webkit-details-marker { display: none; }
.category-guide-cautions summary span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #764d00; background: #ffe2a6; font-size: 12px; }
.category-guide-cautions summary i { margin-left: auto; color: #9c7a3c; font-size: 19px; font-style: normal; font-weight: 400; }
.category-guide-cautions details[open] summary i { transform: rotate(45deg); }
.category-guide-cautions details p { margin: 0; padding: 0 28px 16px; color: #6c5a3e; font-size: 12px; line-height: 1.72; }
.category-guide-file-check { margin: 17px 24px 0; border: 1px solid #e0e9f1; border-radius: 8px; background: #fbfdff; }
.category-guide-file-check summary { padding: 12px; color: #3e617f; font-size: 12px; font-weight: 800; cursor: pointer; }
.category-guide-file-check ul { margin: 0; padding: 0 15px 13px 30px; color: #6b7e8f; font-size: 11px; line-height: 1.7; }

.mobile-order-bar { display: none; }

@media (max-width: 1180px) {
  .category-page .order { width: min(calc(100% - 32px), 920px); }
  .order-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .estimate { position: static; grid-column: 1 / -1; }
  .estimate-column { grid-column: 1 / -1; }
  .estimate .quote-compare { display: grid; grid-template-columns: 1fr 1fr; }
  .estimate .price { margin-top: 14px; }
}

@media (max-width: 800px) {
  .category-page .order { width: min(calc(100% - 32px), 680px); padding: 16px 0 94px; }
  .order-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; border-radius: 10px; }
  .order-journey span { min-height: 42px; padding: 0 10px; font-size: 11px; }
  .order-journey span:nth-child(3) { border-left: 0; border-top: 1px solid #edf1f5; }
  .order-journey span:nth-child(4) { border-top: 1px solid #edf1f5; }
  .order-journey b { width: 20px; height: 20px; font-size: 9px; }
  .order-grid { display: block; margin-top: 0; }
  .product-sidebar { position: static; margin-bottom: 14px; padding: 15px; border-radius: 11px; }
  .product-sidebar h3 { margin-bottom: 4px; }
  .product-sidebar-guide { margin: 0 0 11px; }
  .product-sidebar #productList { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; }
  .product-sidebar .product-card { grid-template-columns: 42px minmax(100px, 1fr); flex: 0 0 198px; min-height: 62px; margin: 0; scroll-snap-align: start; }
  .product-sidebar .product-card img { width: 42px; height: 42px; }
  .product-sidebar .product-card span { font-size: 11px; }
  .option-panel { border-radius: 11px; }
  .option-head { padding: 18px 16px; }
  .option-head h3 { font-size: 24px; }
  .order-form { padding: 16px; }
  .option-group { margin-bottom: 13px; padding: 14px; border-radius: 10px; }
  .option-group-heading { margin-bottom: 12px; }
  .option-group-heading h4 { font-size: 16px; }
  .option-group-fields { grid-template-columns: 1fr; gap: 12px; }
  .option-group-fields .field, .option-group-fields .field.full { grid-column: auto; }
  .customer-box { grid-template-columns: 1fr; gap: 12px; }
  .estimate { display: block; position: static; margin-top: 14px; border-radius: 11px; }
  .estimate-column { display: grid; gap: 14px; }
  .category-production-guide { margin-top: 14px; border-radius: 11px; }
  .category-guide-head { grid-template-columns: minmax(0, 1fr) 92px; gap: 13px; padding: 16px; }
  .category-guide-head h3 { font-size: 18px; }
  .category-guide-head p:not(.eyebrow) { font-size: 12px; }
  .category-guide-head img { width: 92px; height: 78px; }
  .category-guide-overview, .category-guide-flow, .category-guide-longform, .category-guide-cautions { padding: 18px 16px; }
  .category-guide-overview > div > h3, .category-guide-section-head h3, .category-guide-longform h3, .category-guide-cautions h3 { font-size: 18px; }
  .category-guide-overview > div > p:not(.eyebrow), .category-guide-longform header > p:last-child, .category-guide-cautions header > p:last-child { font-size: 12px; }
  .category-guide-points { grid-template-columns: 1fr; padding: 0 16px; }
  .category-guide-overview .category-guide-points { padding: 0; }
  .category-guide-points li { padding: 14px 0; }
  .category-guide-flow > ol, .category-guide-longform > div { grid-template-columns: 1fr; }
  .category-guide-flow > ol { margin-top: 14px; }
  .category-guide-flow li { min-height: 0; }
  .category-guide-longform article:nth-last-child(2) { border-bottom: 1px solid #e8eef3; }
  .category-guide-cautions details p { padding-inline: 28px 8px; }
  .category-guide-file-check { margin: 14px 16px 0; }
  .estimate .quote-compare { display: grid; grid-template-columns: 1fr; }
  .estimate .price { margin-top: 14px; }
  .mobile-order-bar { position: fixed; z-index: 27; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #dce7f0; background: rgba(255,255,255,.96); box-shadow: 0 -8px 22px rgba(28, 53, 77, .12); backdrop-filter: blur(12px); }
  .mobile-order-bar div { display: grid; gap: 1px; min-width: 0; }
  .mobile-order-bar span { color: #718197; font-size: 10px; font-weight: 700; }
  .mobile-order-bar strong { overflow: hidden; color: #17385d; font-size: 17px; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-order-bar button { min-height: 42px; padding: 0 11px; border-radius: 7px; font-size: 12px; font-weight: 800; }
}

@media (max-width: 420px) {
  .category-page .order { width: calc(100% - 24px); }
  .order-journey span { gap: 6px; padding-inline: 8px; font-size: 10px; }
  .mobile-order-bar { padding-inline: 12px; gap: 5px; }
  .mobile-order-bar strong { font-size: 15px; }
  .mobile-order-bar button { padding-inline: 9px; }
}