/* Uses DESIGN_GUIDELINES.md role tokens; shared navigation and footer remain in components.php. */
.quick-order-page{margin:0;background:#f7f8fc;color:var(--text-ink);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-body)}
.quick-order-page *{box-sizing:border-box}
.quick-order-page button,.quick-order-page input,.quick-order-page select,.quick-order-page textarea{font-family:inherit}
.quick-order-page button{cursor:pointer}
.quick-order-page button:disabled{cursor:not-allowed;opacity:.55}
.quick-order-page [hidden]{display:none}
.qom-skip{position:absolute;left:1rem;top:-8rem;background:#fff;z-index:200;padding:1rem}.qom-skip:focus{top:1rem}
.qom-methods{background:white;border-bottom:1px solid #dfe5ee}
.qom-methods-inner{max-width:88rem;margin:auto;padding:1.25rem 2rem 1.5rem}
.qom-methods-inner>p{font-size:var(--text-caption);font-weight:600;letter-spacing:.05em;color:#2456df;margin:0 0 1rem;display:flex;gap:1rem;flex-wrap:wrap}
.qom-methods-inner>p span{font-size:var(--text-helper);color:var(--text-muted);letter-spacing:0;font-weight:400}
#workspace{max-width:88rem;margin:0 auto;padding:0 2rem 4rem;outline:none}
.qom-layout{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:2rem;align-items:start}
.qom-layout.qom-layout-single{grid-template-columns:minmax(0,1fr)}
.qom-main{min-width:0}
.qom-hero{padding:2.75rem 0 2rem}
.qom-eyebrow{font-size:var(--text-caption);letter-spacing:.05em;color:#2456df;font-weight:600}
.qom-hero h1{margin:.75rem 0 1rem;word-break:keep-all}
.qom-hero em{font-style:normal;color:#2456df}
.qom-hero p{max-width:42rem;color:var(--text-muted);margin:0 0 1rem}
.qom-panel{background:white;border:1px solid #e0e6f0;border-radius:1.25rem;padding:2rem;margin-bottom:1.5rem;box-shadow:0 4px 18px #1a335504;min-width:0}
.qom-panel-head{margin-bottom:1.5rem}
.qom-panel-head h2{margin:0 0 .5rem}
.qom-panel-head p{margin:0;color:var(--text-muted);font-size:var(--text-helper)}
.qom-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid #d3dce9;background:white;color:#273b5b;border-radius:.625rem;padding:.75rem 1rem;text-decoration:none;min-height:3rem;text-align:center}
.qom-primary{color:white;background:#2456df;border-color:#2456df}
.qom-btn:hover{background:#edf3ff;border-color:#90a9e8}.qom-primary:hover{background:#1947c5;color:white}
.qom-btn[aria-pressed=true]{border-color:#2456df;color:#1947c5;background:#edf3ff}
.qom-actions,.qom-filters{display:flex;gap:.625rem;align-items:center;flex-wrap:wrap}
.qom-actions{margin-top:1.5rem}.qom-filters{margin-bottom:1.25rem}
.qom-filters .qom-btn{border-radius:2rem;padding:.625rem 1rem}
.qom-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.qom-preset{display:flex;flex-direction:column;align-items:stretch;text-align:left;min-width:0;border:1px solid #dce3ef;border-radius:1rem;background:white;padding:1.5rem;color:var(--text-ink);position:relative}
.qom-preset:hover{border-color:#8ea9e8;box-shadow:0 5px 15px #2456df0a}
.qom-preset.selected{border:2px solid #2456df;padding:calc(1.5rem - 1px);background:#f6f9ff}
.qom-preset.selected:after{content:'✓';position:absolute;right:1rem;top:1rem;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#2456df;color:white}
.qom-icon{display:block;object-fit:contain;flex-shrink:0}
.qom-preset-top{display:flex;gap:1rem;align-items:center;margin:0 0 1.25rem}
.qom-preset-top>span{font-size:var(--text-helper);color:var(--text-muted);font-weight:500}
.qom-preset h3{margin:0 0 .5rem}.qom-preset p{margin:0 0 1rem;color:var(--text-muted);font-size:var(--text-helper);font-weight:400}
.qom-preset-spec{font-size:var(--text-helper);font-weight:400;color:#526079;line-height:1.7;margin-bottom:1.25rem;white-space:pre-line}
.qom-preset-price{margin-top:auto;display:flex;flex-direction:column;border-top:1px solid #e0e7f2;padding-top:1rem;gap:.25rem}
.qom-preset-price strong{font-size:var(--text-card);color:#2456df}
.qom-preset-price small{font-weight:400;color:var(--text-muted)}
.qom-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-bottom:1.5rem}
.qom-field{display:flex;flex-direction:column;gap:.5rem;min-width:0;font-size:var(--text-label);font-weight:500}
.qom-field input,.qom-field select,.qom-field textarea{display:block;width:100%;border:1px solid #ccd7e6;border-radius:.625rem;background:#fff;color:var(--text-ink);font-weight:400}
.qom-field textarea{min-height:10rem;resize:vertical}
#qom-consult{min-height:40rem}
.qom-field input:focus,.qom-field select:focus,.qom-field textarea:focus{border-color:#2456df}
.qom-field small{color:var(--text-muted);font-weight:400}
/* 쪽수처럼 값이 제작 범위를 벗어난 입력란. 색은 공용 폼 오류(assets/form-errors.css)와 같다. */
.qom-field-invalid input{border-color:#d93636;background:#fffafa}
.qom-field-invalid input:focus{border-color:#d93636;box-shadow:0 0 0 3px rgba(217,54,54,.16)}
.qom-field-error{margin:0;color:#c62828;font-size:var(--text-helper);font-weight:400}
.qom-field-error[hidden]{display:none}
.qom-toggle{display:flex;align-items:flex-start;gap:.75rem;font-size:var(--text-body)}
.qom-toggle input{accent-color:#2456df;margin:.2rem 0 0}
.qom-toggle small{display:block;color:var(--text-muted);margin-top:.25rem}
.qom-products{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.75rem;margin:0;padding:.25rem;border:0;min-width:0}
.qom-product-choice{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;flex:1 0 6rem;padding:1.75rem .5rem .75rem;background:#f7f9ff;border:1px solid #dce3ef;border-radius:.875rem;cursor:pointer;color:#273b5b;min-height:7rem}
.qom-product-choice.selected{border-color:#2456df;background:#edf3ff;color:#1947c5}
.qom-product-choice:focus-within{outline:2px solid #2456df;outline-offset:3px}
.qom-product-choice input{position:absolute;top:.5rem;left:.5rem;width:1.125rem;height:1.125rem;margin:0;accent-color:#2456df;flex-shrink:0}
.qom-product-choice .qom-icon{flex-shrink:0}
.qom-start{margin-top:1.5rem}
.qom-quantity-fields{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}  /* 페이지수·부수·인쇄 방식·사이즈를 한 줄에 */
.qom-paper-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}  /* 종이 종류·평량·인쇄 면을 한 줄에 */
.qom-custom-size{margin-top:1.25rem}
@media(max-width:63.999rem){.qom-fields.qom-quantity-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:47.999rem){.qom-fields.qom-paper-fields{grid-template-columns:1fr}}
@media(max-width:47.999rem){.qom-fields.qom-quantity-fields{grid-template-columns:1fr}}
.qom-products button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.25rem .5rem;background:white;border:1px solid #dce3ef;border-radius:.875rem;min-width:0;color:#273b5b}
.qom-products button.selected{border-color:#2456df;background:#edf3ff;color:#1947c5}
.qom-products strong{font-size:var(--text-product)}
.qom-products small{color:var(--text-muted);font-weight:400}
/* 견적 칸은 안에서 스크롤하지 않고 내용만큼 늘어난다(사용자 지시).
   내용이 화면보다 높을 때 위에 붙여 두면 아래쪽이 영영 보이지 않으므로,
   그때는 quick-methods.js 의 fitQuote() 가 top 을 음수로 바꿔 아래에 붙인다. */
#qom-quote-slot{position:sticky;top:1.25rem;margin-top:2.75rem}
.qom-quote{background:white;border:1px solid #cbd8ec;border-top:4px solid #2456df;border-radius:1.25rem;padding:1.5rem;box-shadow:0 8px 24px #223d6a09}
.qom-row{display:flex;align-items:center;gap:.75rem}.qom-row h2,.qom-row h3{margin:0}
.qom-quote-top .qom-row{margin:.75rem 0 1rem}
.qom-spec-summary{margin:0;font-size:var(--text-helper)}
.qom-spec-summary>div{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:.75rem;margin:.625rem 0}
.qom-spec-summary dt{color:var(--text-muted)}.qom-spec-summary dd{margin:0;word-break:keep-all;overflow-wrap:anywhere}
.qom-total{border-top:1px solid #e2e8f2;margin-top:1.25rem;padding:1.25rem 0}
.qom-total>span{font-size:var(--text-label);color:var(--text-muted)}
.qom-total strong{display:block;font-size:var(--text-total);font-weight:700;color:#2456df;margin:.25rem 0}
.qom-total small{display:block;color:#385177}
.qom-total p{font-size:var(--text-helper);color:var(--text-muted);margin:.375rem 0 0}
.qom-note{font-size:var(--text-helper);color:var(--text-muted);line-height:1.6}
.qom-delivery{grid-template-columns:1fr;margin-bottom:.75rem}.qom-delivery .qom-toggle{margin:0}
.qom-quote>.qom-btn{width:100%;margin:.5rem 0 0}
.qom-breakdown{font-size:var(--text-helper);padding:1rem 0;margin-bottom:.5rem;border-top:1px solid #e2e8f2;border-bottom:1px solid #e2e8f2}
.qom-breakdown>span{display:block;margin-bottom:.5rem;color:#526079}.qom-breakdown>div{display:flex;gap:1rem;justify-content:space-between;padding:.2rem 0}
.qom-price-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.qom-price-options button{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;min-width:0;padding:1rem;border:1px solid #dce3ef;border-radius:.75rem;background:#f9fbff;color:#273b5b}
.qom-price-options button[aria-pressed=true]{border-color:#2456df;background:#edf3ff}
.qom-price-options strong{font-size:var(--text-product);color:#2456df}.qom-price-options small{font-weight:400}
.qom-comparison-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1.25rem}
.qom-comparison-actions>span{font-size:var(--text-helper);color:var(--text-muted)}
.qom-alternatives{display:grid;gap:1rem;margin-top:1.5rem}.qom-alternatives article{border:1px solid #dce3ef;border-radius:.75rem;padding:1.25rem;background:#fbfcff}
.qom-alternatives .qom-row{margin-bottom:1rem}.qom-alternatives article>strong{display:block;color:#2456df;font-size:var(--text-price);margin-top:1rem}
.qom-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-bottom:1.5rem}.qom-answers button{justify-content:flex-start;text-align:left;padding:1rem}
.qom-recommendation{display:flex;gap:1.5rem;margin-bottom:2rem;padding:1.5rem;background:#edf3ff;border-radius:1rem;align-items:flex-start}.qom-recommendation h2{margin:.5rem 0}.qom-recommendation p{margin:0}
.qom-history-kind{color:var(--text-muted);font-size:var(--text-helper);font-weight:600}
/* 색간지 이름 색. /order_list.php 의 Bootstrap 4.5 text-primary·warning·success·danger 와 같은 색(quick-data.php pv_order_insert_segments). */
.qom-ink-blue{color:#007bff}.qom-ink-yellow{color:#ffc107}.qom-ink-green{color:#28a745}.qom-ink-red{color:#dc3545}
.qom-history{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1.5rem 0;border-bottom:1px solid #e2e8f2}
.qom-history>div:first-child{display:flex;gap:1rem;align-items:center;min-width:0;flex:1 1 15rem}.qom-history h3{margin:.25rem 0}.qom-history p{margin:0;font-size:var(--text-helper);color:var(--text-muted)}.qom-history small{color:var(--text-muted)}.qom-history .qom-actions{margin:0}
.qom-empty{padding:1.5rem;background:#f5f8fe;border-radius:1rem;color:var(--text-muted)}.qom-empty h3{margin:0 0 .75rem}.qom-empty p{margin:0 0 1.25rem}
.qom-link{display:inline-flex;align-items:center;min-height:3rem;margin-top:1rem;color:#2456df}
#qom-consult-form>.qom-field,#qom-consult-form>.qom-fields{margin-bottom:1.5rem}
#qom-consult-error{color:#a22935;font-size:var(--text-helper)}
.qom-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:110;background:#192f51;color:#fff;border-radius:.75rem;padding:1rem 1.25rem;max-width:calc(100% - 2rem);width:max-content;font-size:var(--text-helper);box-shadow:0 8px 24px #192f5130;display:none}.qom-toast.visible{display:block}
.quick-progress{border:0;border-radius:1rem;padding:2rem;max-width:calc(100% - 2rem)}.quick-progress::backdrop{background:#182b5055}
.qom-main :focus-visible,.qom-quote :focus-visible,.qom-methods :focus-visible{outline:3px solid #91abed;outline-offset:3px}
.qom-mobile-jump{display:none}
.qom-mobile-jump strong{white-space:nowrap}
.qom-mobile-jump{flex-wrap:wrap}
@media(max-width:74rem){.qom-layout{grid-template-columns:minmax(0,1fr) 20rem;gap:1.25rem}.qom-panel{padding:1.5rem}.qom-presets{grid-template-columns:1fr}.qom-price-options{grid-template-columns:1fr}.qom-price-options button{display:grid;grid-template-columns:1fr auto}.qom-price-options small{grid-column:1/-1}}
@media(max-width:58rem){.qom-layout{grid-template-columns:1fr}#qom-quote-slot{position:static;margin-top:0}.qom-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.qom-price-options{grid-template-columns:repeat(3,minmax(0,1fr))}.qom-price-options button{display:flex}.qom-mobile-jump{display:flex;position:sticky;bottom:.75rem;z-index:20;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;background:#192f51;color:#fff;border-radius:.875rem;box-shadow:0 5px 20px #192f512a;font-size:var(--text-action);text-decoration:none}.qom-mobile-jump strong{font-size:var(--text-product)}.qom-toast{bottom:5.5rem}}
@media(max-width:47.999rem){.qom-methods-inner{padding:1rem}#workspace{padding:0 1.25rem 2rem}.qom-hero{padding:2rem 0 1.5rem}.qom-hero h1 br{display:none}.qom-panel{padding:1.25rem;border-radius:1rem}.qom-presets,.qom-fields,.qom-answers{grid-template-columns:1fr}.qom-preset{padding:1.25rem}.qom-preset.selected{padding:calc(1.25rem - 1px)}.qom-products{grid-template-columns:repeat(2,minmax(0,1fr))}.qom-price-options{grid-template-columns:1fr}.qom-price-options button{display:grid;grid-template-columns:1fr auto}.qom-recommendation{padding:1.25rem;gap:1rem;flex-wrap:wrap}.qom-spec-summary>div{grid-template-columns:4.75rem minmax(0,1fr)}.qom-quote{padding:1.25rem}.qom-actions>.qom-btn{flex:1 1 auto}.qom-history>.qom-btn{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Method selector: five radio cards. One is always selected; it decides what #workspace shows. */
.qom-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.quick-order-page .qom-methods{background:#f7f8fc;border-bottom:0}
.quick-order-page .qom-methods-inner{max-width:88rem;padding:2rem 2rem 0}
.qom-method-heading{padding:0 0 1.5rem}
.qom-method-heading h2{margin:0 0 .625rem;font-size:var(--text-page);line-height:var(--leading-heading);letter-spacing:-.04em}
.qom-method-heading p{margin:0;color:var(--text-muted);font-size:var(--text-helper)}
.qom-method-heading strong{color:var(--text-ink);font-weight:600}
.qom-method-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:0;padding:0;border:0;min-width:0}
/* 제목을 라디오 버튼과 같은 줄에 둔다. 예전에는 라디오·아이콘 줄 아래에 제목이
   따로 한 줄을 차지해 카드가 그만큼 높았다. 세 칸 격자로 바꿔 첫 줄에
   [라디오][제목][아이콘]을 놓고, 설명과 아래 줄은 카드 너비 전체를 쓴다. */
.qom-method-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:.5625rem;min-width:0;padding:.875rem 1rem .8125rem;background:#fff;border:1px solid #d4ddea;border-radius:.875rem;box-shadow:0 2px 3px #192b4a04;cursor:pointer;transition:border-color .16s,box-shadow .16s,background .16s}
.qom-method-card:hover{border-color:#7695eb;box-shadow:0 5px 14px #2d51a012}
.qom-method-card.is-selected{border-color:#2456df;box-shadow:0 0 0 1px #2456df;background:#eef3ff}
.qom-method-card:has(input:focus-visible){outline:3px solid #829fff;outline-offset:4px}
/* 라디오와 아이콘을 감싸던 줄은 이제 자리만 내주고 사라진다(display:contents).
   그래야 그 둘이 제목과 같은 격자 줄에 나란히 놓인다. */
.qom-card-top{display:contents}
.qom-card-top input{grid-column:1;grid-row:1;width:1.1875rem;height:1.1875rem;margin:0;flex:none;cursor:pointer;accent-color:#2456df;outline:none}
.qom-method-icon{grid-column:3;grid-row:1;width:1.5rem;height:1.5rem;fill:none;stroke:#687b98;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.is-selected .qom-method-icon{stroke:#2456df}
.qom-method-title{grid-column:2;grid-row:1;font-size:var(--text-card);font-weight:700;line-height:var(--leading-ui);letter-spacing:-.03em;margin:0;color:var(--text-ink)}
.qom-method-desc{grid-column:1/-1;grid-row:2;margin-top:.5rem;font-size:var(--text-helper);line-height:1.7;color:#5a697f;letter-spacing:-.01em}
.qom-card-bottom{grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:.4375rem;margin-top:.625rem;font-size:var(--text-caption);min-height:1.25rem}
.qom-card-choice{color:#64738a}
.is-selected .qom-card-choice{display:inline-flex;align-items:center;gap:.3125rem;color:#2456df;font-weight:700}
.is-selected .qom-card-choice:before{content:"✓"}
.qom-card-arrow{margin-left:auto;width:.9375rem;height:.9375rem;fill:none;stroke:#7687a1;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.is-selected .qom-card-arrow{stroke:#2456df}
.qom-login-required{font-size:var(--text-caption);color:#5c6b82;background:#eef1f5;border-radius:.25rem;padding:.0625rem .3125rem;white-space:nowrap}
/* 안내 띠(.qom-guidance)와 '현재 방식' 띠(.qom-current)는 2026-09-21 에 없앴다.
   카드가 바로 위에 그대로 보이므로 같은 말을 되풀이하던 줄이었다. */
.quick-order-page #workspace{background:white;border:1px solid #aebfdf;border-radius:1rem;max-width:84rem;width:calc(100% - 4rem);margin:1rem auto 2rem;padding-top:1rem}
@media(max-width:74rem){.qom-method-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem}.qom-method-desc br{display:none}.qom-method-card{padding:.875rem 1rem}.qom-card-bottom{margin-top:.5rem}}
@media(max-width:47.999rem){.quick-order-page .qom-methods-inner{padding:1.5rem 1rem 0}.qom-method-heading{padding:0 .25rem 1.25rem}.qom-method-heading h2{font-size:var(--text-section)}.qom-method-grid{grid-template-columns:1fr;gap:.5625rem}.qom-method-card{display:grid;grid-template-columns:1.3125rem minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:.75rem;min-height:5.4375rem;padding:.875rem .9375rem;border-radius:.6875rem}.qom-card-top{display:contents}.qom-card-top input{grid-column:1;grid-row:1/3}.qom-method-icon{display:none}.qom-method-title{grid-column:2;grid-row:1;margin:0 0 .25rem;font-size:var(--text-product)}.qom-method-desc{grid-column:2;grid-row:2;margin-top:0;line-height:1.55}.qom-card-bottom{grid-column:3;grid-row:1/3;margin:0;flex-direction:column;align-items:flex-end;gap:.25rem}.qom-card-arrow{display:none}.qom-card-choice{white-space:nowrap}.quick-order-page #workspace{width:calc(100% - 1.5rem);padding-inline:1.25rem;margin-top:1rem}}
/* 추천 사양 카드의 순위 표시, 그리고 직원용 편집 화면(/quick-advanced-edit.php). */
.qom-preset-rank{margin:0 0 .375rem}
/* The paper name opens an explanation without changing the selected specification. */
.qom-paper-term{cursor:help;text-decoration:underline dotted;text-underline-offset:.2em;text-decoration-thickness:1px}
.qom-paper-help{position:fixed;z-index:120;width:22rem;max-width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem);overflow:auto;padding:1rem 1.25rem;border:1px solid #b8c8e4;border-radius:.75rem;background:#fff;color:var(--text-ink);box-shadow:0 8px 28px #192f5130;font-family:var(--font-ui);font-size:var(--text-helper);line-height:var(--leading-body);overflow-wrap:anywhere}
.qom-paper-help strong{display:block;font-size:var(--text-product);font-weight:600;margin:0 0 .5rem}
.qom-paper-help p{margin:0;color:var(--text-muted);font-size:var(--text-helper)}
.qom-paper-help.has-samples{width:34rem}
.qom-paper-samples{display:grid;gap:1rem;margin-top:1rem}
.qom-paper-sample-group>b{display:block;margin-bottom:.5rem;font-size:var(--text-helper);font-weight:600}
.qom-paper-sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem}
.qom-paper-sample-grid figure{margin:0;min-width:0}
.qom-paper-sample-grid img{display:block;width:100%;height:auto;aspect-ratio:20/13;object-fit:contain;border:1px solid #dce3ef;border-radius:.375rem;background:#f6f8fc}
.qom-paper-sample-grid figcaption{margin-top:.25rem;text-align:center;font-size:var(--text-helper);color:var(--text-ink)}
.qom-paper-help .qom-paper-sample-note{margin-top:1rem;padding-top:.75rem;border-top:1px solid #dce3ef;font-size:var(--text-helper)}
.qom-paper-image-unavailable{display:block;padding:.5rem;background:#f6f8fc;color:var(--text-muted);font-size:var(--text-helper)}
.qom-edit-list{display:grid;gap:1rem}
.qom-edit-row{border:1px solid #dce3ef;border-radius:1rem;background:white;padding:1.5rem;scroll-margin-top:6rem}
.qom-edit-row.is-saved{border:2px solid #2456df;padding:calc(1.5rem - 1px);background:#f6f9ff}
.qom-edit-meta{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin:0 0 .5rem}
.qom-edit-meta .qom-eyebrow{margin:0}
.qom-badge{font-size:var(--text-caption);font-weight:600;border-radius:2rem;padding:.125rem .625rem;background:#edf3ff;color:#1947c5}
.qom-badge-muted{background:#f1f3f7;color:var(--text-muted);font-weight:500}
.qom-edit-row .qom-preset-spec{margin-bottom:1.25rem}
.qom-edit-row .qom-fields{margin-bottom:1rem}
.qom-edit-row .qom-field{margin-bottom:0}
.qom-edit-row .qom-btn{width:auto;margin:0}
.qom-alert{border-radius:.75rem;padding:1rem 1.25rem;margin:0 0 1.5rem;font-size:var(--text-helper);background:#edf3ff;color:#1947c5}
.qom-alert-error{background:#fdecec;color:#ac2525}
@media(max-width:47.999rem){.qom-edit-row{padding:1.25rem}.qom-edit-row.is-saved{padding:calc(1.25rem - 1px)}.qom-edit-row .qom-btn{width:100%}}
.qom-paper-sample-grid img[hidden]{display:none}
.qom-catalog-open{display:block;width:100%;margin-top:1rem;padding:.75rem 1rem;border:1px solid #2456df;border-radius:.5rem;background:#2456df;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.qom-paper-catalog{width:min(74rem,calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 2rem);padding:0;border:1px solid #b8c8e4;border-radius:1rem;background:white;color:var(--text-ink);overflow:auto;font-family:var(--font-ui)}
.qom-paper-catalog::backdrop{background:rgb(15 30 55 / .6)}
.qom-paper-catalog header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;background:#fff;border-bottom:1px solid #dce3ef}
.qom-paper-catalog h2{margin:0;font-size:var(--text-section);font-weight:700}
.qom-paper-catalog header button{flex-shrink:0;padding:.625rem 1rem;border:1px solid #bac8dd;border-radius:.5rem;background:white;color:var(--text-ink);font:inherit;cursor:pointer}
.qom-catalog-body{padding:1.5rem}
.qom-catalog-body>p{font-size:var(--text-body);line-height:var(--leading-body)}
.qom-catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.qom-catalog-grid figure{min-width:0;margin:0}
.qom-catalog-grid button{width:100%;height:100%;padding:.75rem;border:1px solid #dce3ef;border-radius:.75rem;background:#f8faff;color:var(--text-ink);font:inherit;text-align:center;cursor:zoom-in}
.qom-catalog-grid img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border:1px solid #c9d3e3;border-radius:.375rem;background:#fff}
.qom-catalog-grid img[hidden]{display:none}
.qom-catalog-name,.qom-catalog-category{display:block;margin-top:.5rem;overflow-wrap:anywhere;font-size:var(--text-product)}
.qom-catalog-category{color:var(--text-muted);font-size:var(--text-helper)}
.qom-catalog-grid .is-expanded{grid-column:1 / -1}
.qom-catalog-grid .is-expanded button{cursor:zoom-out;border-color:#2456df}
.qom-catalog-grid .is-expanded img{max-height:70dvh;object-fit:contain}
.qom-paper-catalog button:focus-visible,.qom-catalog-open:focus-visible{outline:3px solid #2456df;outline-offset:3px}
@media(max-width:63.999rem){.qom-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:47.999rem){.qom-paper-catalog{width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem)}.qom-paper-catalog header,.qom-catalog-body{padding:1rem}.qom-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}
/* 추천 사양 카드의 직원용 '수정' 버튼(buru21)과 수정 창. 카드가 버튼이라 한 칸에 카드와 버튼을 겹쳐 둔다. */
.qom-preset-cell{position:relative;display:flex;min-width:0}
.qom-preset-cell>.qom-preset{flex:1}
.qom-preset-edit{position:absolute;top:1rem;right:3.25rem;z-index:1;border:1px solid #d3dce9;border-radius:2rem;background:#fff;color:#2456df;font-size:var(--text-helper);font-weight:700;padding:.3rem .8rem;cursor:pointer}
.qom-preset-edit:hover,.qom-preset-edit:focus-visible{border-color:#2456df;background:#f6f9ff}
.qom-preset-dialog{width:min(560px,calc(100% - 32px));border:1px solid #dce3ef;border-radius:1rem;padding:0;color:var(--text-ink);box-shadow:0 24px 80px #17233b44}
.qom-preset-dialog::backdrop{background:#17233b88}
.qom-preset-dialog-form{display:grid;gap:1rem;padding:1.5rem}
.qom-preset-dialog-form header{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.qom-preset-dialog-form h2{font-size:1.25rem;margin:0}
.qom-preset-dialog-form header button{border:1px solid #d3dce9;border-radius:.5rem;background:#f7f8fb;padding:.35rem .8rem;cursor:pointer}
.qom-preset-dialog-form .qom-preset-spec{margin:0;padding:.75rem 1rem;background:#f6f8fc;border-radius:.625rem}
.qom-preset-dialog-form .qom-alert{margin:0}
.qom-preset-dialog-form .qom-actions{display:flex;justify-content:flex-end;gap:.5rem;margin:0}
.qom-preset-dialog-form .qom-btn{width:auto;flex:0 0 auto;margin:0}
/* Recommendation cards: two calm columns, clear title and a separate action row. */
.qom-presets-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:stretch}
.qom-presets-compact .qom-preset-cell{display:flex;flex-direction:column;border:1px solid #dce3ef;border-radius:1rem;background:#fff;min-width:0;transition:border-color .16s ease,box-shadow .16s ease}
.qom-presets-compact .qom-preset-cell:hover{border-color:#a5b9df;box-shadow:0 6px 20px #19233806}
.qom-presets-compact .qom-preset-cell:has(.selected){border-color:#2456df;box-shadow:inset 0 0 0 1px #2456df;background:#f6f9ff}
.qom-presets-compact .qom-preset,.qom-presets-compact .qom-preset.selected{border:0;border-radius:1rem 1rem 0 0;padding:1.5rem;background:transparent;width:100%;overflow-wrap:anywhere;box-shadow:none}
.qom-presets-compact .qom-preset.selected:after{top:1.5rem;right:1.5rem;width:1.375rem;height:1.375rem;font-size:var(--text-helper)}
.qom-presets-compact .qom-preset-top{gap:.75rem;padding-right:2rem;margin:0 0 1.125rem}
.qom-presets-compact .qom-preset-identity{display:flex;flex-direction:column;gap:.125rem;font-size:var(--text-helper);font-weight:400;color:var(--text-muted)}
.qom-presets-compact .qom-preset-rank{margin:0;padding:0;color:#2456df;font-size:var(--text-caption);font-weight:600;letter-spacing:0}
.qom-presets-compact .qom-preset h3{margin:0 0 .5rem;font-size:var(--text-card);line-height:var(--leading-heading);font-weight:600;word-break:keep-all;overflow-wrap:anywhere}
.qom-presets-compact .qom-preset-description{word-break:keep-all;margin:0 0 1rem;font-size:var(--text-helper);line-height:var(--leading-body);color:var(--text-muted);font-weight:400}
.qom-preset-brief{word-break:keep-all;margin-top:auto;padding:.625rem .875rem;background:#f5f7fa;border-radius:.5rem;color:#384a65;font-size:var(--text-helper);line-height:var(--leading-ui);font-weight:500}
.qom-preset.selected .qom-preset-brief{background:#edf2fc}
.qom-presets-compact .qom-preset-price:empty{display:none}
.qom-presets-compact .qom-preset-price:not(:empty){margin-top:1rem;padding-top:1rem}
.qom-preset-tools{display:flex;justify-content:space-between;align-items:center;margin:0 1.5rem;padding:.375rem 0;gap:.75rem;border-top:1px solid #e4e9f1}
.qom-preset-details,.qom-detail-close,.qom-presets-compact .qom-preset-edit{position:static;min-height:2.75rem;border:0;background:transparent;font-size:var(--text-helper);font-weight:500;padding:.5rem 0;text-align:left}
.qom-preset-details{white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem;color:#384a65}
.qom-preset-details svg{flex-shrink:0;transition:transform .16s ease}
.qom-preset-details[aria-expanded=true] svg{transform:rotate(90deg)}
.qom-preset-details:hover,.qom-preset-details[aria-expanded=true],.qom-detail-close{color:#2456df}
.qom-presets-compact .qom-preset-edit{flex-shrink:0;white-space:nowrap;padding:.5rem .625rem;color:var(--text-muted);font-weight:400;border-radius:.375rem}
.qom-presets-compact .qom-preset-edit:hover{background:#edf2fc;color:#2456df}
/* buru21 만 보는 '수정 ← →'. ← → 는 카드 순위를 한 칸씩 옮긴다. */
.qom-presets-compact .qom-preset-admin{display:inline-flex;align-items:center;gap:.125rem;flex-shrink:0}
.qom-presets-compact .qom-preset-move{min-height:2.75rem;min-width:2.25rem;border:0;border-radius:.375rem;background:transparent;color:var(--text-muted);font-size:var(--text-helper);font-weight:400;line-height:1;cursor:pointer}
.qom-presets-compact .qom-preset-move:hover:not(:disabled){background:#edf2fc;color:#2456df}
.qom-presets-compact .qom-preset-move:disabled{opacity:.3;cursor:default}
.qom-presets-compact button:focus-visible{outline:2px solid #2456df;outline-offset:3px}
.qom-preset-detail-panel{position:absolute;left:calc(100% + .75rem);right:auto;top:0;z-index:40;min-width:0;padding:1.5rem;background:#fff;border:1px solid #b8c9e5;border-radius:.75rem;box-shadow:0 12px 32px #17233b24;font-size:var(--text-body);overflow-wrap:anywhere}
.qom-preset-detail-panel p{margin:.75rem 0;color:var(--text-muted)}
.qom-preset-detail-panel .qom-preset-spec{margin-bottom:0}
.qom-preset-dialog{max-height:90vh;overflow-y:auto}
@media(max-width:47.999rem){
 .qom-presets-compact{grid-template-columns:1fr;gap:1rem}
 .qom-presets-compact .qom-preset,.qom-presets-compact .qom-preset.selected{padding:1.25rem}
 .qom-presets-compact .qom-preset.selected:after{top:1.25rem;right:1.25rem}
 .qom-preset-tools{margin:0 1.25rem}
 .qom-preset-detail-panel,.qom-preset-detail-panel.qom-detail-left,.qom-preset-detail-panel.qom-detail-below{position:static;box-shadow:none;border:0;border-top:1px solid #dce3ef;border-radius:0 0 1rem 1rem;padding:1.25rem}
}

.qom-edit-heading{font-size:var(--text-product);line-height:var(--leading-ui);font-weight:600;margin:1.25rem 0 1rem}
/* Detail sheet: typography and quiet surfaces follow the home page. */
.qom-preset-detail-panel{width:min(28rem,calc(100vw - 6rem));padding:1.5rem;border-color:#e1e7f0;border-radius:1.25rem;box-shadow:0 16px 48px #1923381a;max-height:70dvh;overflow-y:auto;overscroll-behavior:contain}
.qom-preset-detail-panel.qom-detail-left{left:auto;right:calc(100% + .75rem)}
/* 양옆이 모두 좁으면 카드 아래에 붙인다. */
.qom-preset-detail-panel.qom-detail-below{left:0;right:0;top:calc(100% + .5rem);width:auto}
.qom-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.qom-detail-kicker,.qom-detail-label{display:block;color:var(--text-muted);font-size:var(--text-helper);font-weight:500}
.qom-detail-header h3{margin:.375rem 0 0;font-size:var(--text-card);line-height:var(--leading-heading);font-weight:600}
.qom-detail-header .qom-detail-close{flex-shrink:0;padding:0 .25rem;color:var(--text-muted)}
.qom-preset-detail-panel .qom-detail-description{margin:1rem 0;font-size:var(--text-body);line-height:var(--leading-body)}
.qom-detail-specs{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid #e8edf4}
.qom-detail-specs .qom-preset-spec{margin-top:.5rem;color:var(--text-ink)}
.qom-detail-paper{margin-top:1.25rem;padding:1.25rem;border:1px solid #e5ebf5;border-radius:.875rem;background:#f7f9fc}
.qom-detail-paper-label{color:#2456df;font-size:var(--text-caption);font-weight:600}
.qom-detail-paper h4{margin:.375rem 0 .5rem;font-size:var(--text-product);font-weight:600;line-height:var(--leading-ui)}
.qom-detail-paper p{margin:0;font-size:var(--text-body);line-height:var(--leading-body)}
.qom-detail-catalog{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:2.75rem;margin-top:1rem;padding:.625rem .875rem;border:1px solid #dbe4f0;border-radius:.625rem;background:white;color:#2456df;font-size:var(--text-helper);font-weight:600}
.qom-detail-catalog:hover{background:#edf3ff;border-color:#a6bce6}
@media(max-width:47.999rem){.qom-preset-detail-panel{width:auto;max-height:none;overflow:visible;border-radius:0 0 1rem 1rem;padding:1.25rem;box-shadow:none}.qom-detail-header{gap:.5rem}.qom-detail-paper{padding:1rem}}

.qom-insert-groups{display:grid;gap:.75rem;margin-top:1rem}.qom-insert-row{display:grid;grid-template-columns:1fr 1fr 1.5fr auto;align-items:end;gap:.75rem;padding:1rem;background:#f7f9fd;border:1px solid #e5ebf5;border-radius:.75rem}.qom-insert-row .qom-field{margin:0;min-width:0}.qom-insert-row input,.qom-insert-row select{width:100%;min-width:0}.qom-insert-row>.qom-btn{padding-inline:.75rem;color:#66758a}.qom-insert-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.qom-insert-actions small{color:#728096}@media(max-width:47.999rem){.qom-insert-row{grid-template-columns:1fr 1fr}.qom-insert-row>.qom-field:nth-child(3){grid-column:1/-1}.qom-insert-row>.qom-btn{grid-column:2;justify-self:end}.qom-insert-actions{gap:.5rem}}
/* 추천 사양 편집: 제본 종류마다 '다음 순위 5개 더 보기' (2026-09-23) */
.qom-edit-more{margin:1.25rem 0 0;text-align:center}
.qom-edit-more .qom-btn{width:auto;min-width:14rem}
.qom-need{font-weight:700;color:#2456df}
.qom-quantity-fields input[data-number]:required:invalid:not([aria-invalid]){border-color:#2456df;box-shadow:0 0 0 3px rgba(36,86,223,.22);background:#f6f9ff}
/* 색지 입력 형식 오류: 06 간지 칸 아래 빨간 안내, 문제 있는 쪽수 칸 둘레를 빨갛게(사용자 지시 2026-09-26). */
.qom-insert-issue{margin:.625rem 0 0;color:#dc2626;font-weight:700;font-size:.875rem;line-height:1.5}
.qom-insert-groups .qom-field input.is-invalid{border-color:#dc2626!important;box-shadow:0 0 0 3px #dc262622}
.qom-insert-groups .qom-field input.is-invalid:focus-visible{outline:2px solid #dc2626;outline-offset:1px}
/* 상세 사양 주문(#concept-3)·동일 사양 여러건 주문: 사양 패널의 위아래 여백을 줄인다. */
.qom-tight .qom-main>.qom-panel{margin-bottom:1rem;padding-top:1.25rem;padding-bottom:1.25rem}
.qom-tight .qom-main>.qom-panel .qom-fields{margin-bottom:0}
.qom-tight .qom-main>.qom-panel .qom-custom-size{margin-top:.75rem}
.qom-tight .qom-main>.qom-panel>.qom-panel-head{margin-bottom:1rem}
/* '기존 주문 양식 복사하기'(상세 사양 주문·동일 사양 여러건 주문의 01 아래). 수령 방법처럼 select 하나로 고른다. */
.qom-past{margin-top:1.25rem;padding-top:1rem;border-top:1px solid #e3e9f3}
.qom-past .qom-field{max-width:100%}
.qom-past select{width:100%;min-width:0;text-overflow:ellipsis}
.qom-past .qom-note{margin:.5rem 0 0}
/* 아직 고르지 않았을 때의 "지난 주문을 고르세요"는 파란 굵은 글씨로 눈에 띄게(사용자 지시 2026-09-26). 펼친 목록의 주문 줄은 보통 글씨. */
.qom-past select:has(option[value=""]:checked),.qom-past option[value=""]{color:#2456df;font-weight:700}
.qom-past option:not([value=""]){color:var(--text-ink);font-weight:400}
/* 견적 칸의 해동표지 '번호 선택/변경' 단추: 안내 문구 아래 한 줄로 둔다(머리글과 겹치지 않게, 2026-09-26). */
.qom-quote-extra{margin:.5rem 0 0}
.qom-quote-extra button{width:100%;min-height:2.25rem;padding:.4rem .75rem;border:1px solid var(--accent,#2456df);border-radius:.5rem;background:#fff;color:var(--accent,#2456df);font:inherit;font-size:var(--text-helper);font-weight:700;cursor:pointer;white-space:normal;text-align:center}
.qom-quote-extra button:hover{background:#eaf0ff}
/* 페이지 칸 아래 최대 쪽수 안내는 도움말 글자 그대로(강조 없음). */
.qom-field small [data-page-limit]{display:inline}
/* '기존 주문 양식 복사하기' 제목은 눈에 띄게 빨간 굵은 글씨(사용자 지시 2026-09-26). 상세 사양·동일 사양 여러건 화면이 같이 쓴다. */
.qom-past-title{color:#c62828;font-weight:700}