/* Scoped reusable inline/checkout module. Typography follows DESIGN_GUIDELINES.md. */
.mir-panel,.mir-dialog{font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-ink);text-align:left;letter-spacing:0;box-sizing:border-box}
.mir-panel *,.mir-dialog *{box-sizing:border-box}
.mir-panel [hidden],.mir-dialog [hidden]{display:none}
.mir-panel{margin:8px 0 24px;padding:28px 32px;border:1px solid #dbe2ef;border-radius:16px;background:#fff;box-shadow:0 8px 28px #17233b06;min-width:0}
.mir-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.mir-panel h3,.mir-dialog h2,.mir-dialog h3,.mir-panel h4{margin:0;font-weight:600;line-height:var(--leading-heading)}
.mir-panel p,.mir-dialog p{margin:0;font-size:var(--text-helper);line-height:var(--leading-body);color:var(--text-muted)}
.mir-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mir-toolbar>[data-inline-close]{margin-left:auto;flex-shrink:0}
.mir-panel button,.mir-dialog button{font-family:inherit;font-size:var(--text-action);font-weight:600;line-height:var(--leading-ui);cursor:pointer;box-shadow:none}
.mir-panel button:disabled,.mir-dialog button:disabled{opacity:.5;cursor:default}
.mir-panel :focus-visible,.mir-dialog :focus-visible{outline:3px solid #2456df66;outline-offset:3px}
.mir-panel .mir-text-button,.mir-dialog .mir-text-button{border:0;background:transparent;color:var(--text-muted);min-height:var(--control-small);padding:8px;font-size:var(--text-label);white-space:nowrap}
.mir-text-button:hover{color:var(--text-link);background:#f5f7fc}
/* 주문 방식은 탭이다: 고른 탭이 아래 입력 상자(.mir-config-body)와 한 몸으로 붙는다(사용자 지시 2026-10-03, 시안 A). */
.mir-choices{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-end}
.mir-choices button{display:flex;align-items:flex-start;gap:12px;text-align:left;flex:0 1 400px;min-width:0;padding:14px 20px 16px;border:1px solid #cfd6e4;border-bottom:0;border-radius:12px 12px 0 0;background:#eceff7;color:var(--text-muted);position:relative;margin-bottom:-1px}
.mir-choices button:hover{background:#e4e8f3;color:var(--text-ink)}
.mir-choices button[aria-pressed=true]{background:#fff;color:var(--text-ink);border-color:#2456df;box-shadow:inset 0 3px 0 #2456df;z-index:2}
.mir-choices button[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff}
.mir-choices .mir-tab-icon{flex:none;width:26px;height:26px;color:#8b94a7;margin-top:1px}
.mir-choices button[aria-pressed=true] .mir-tab-icon{color:#2456df}
.mir-choices .mir-tab-text{min-width:0;color:inherit}
.mir-choices b{display:block;font-size:var(--text-action);font-weight:700;line-height:var(--leading-ui)}
.mir-choices small{display:block;margin-top:4px;font-size:var(--text-helper);font-weight:400;line-height:1.45;color:inherit}
.mir-config:empty{display:none}
.mir-config-body{border-top:1px solid #e5e9f0;margin-top:24px;padding-top:24px}
.mir-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;align-items:end}
.mir-quick-fields{display:flex;flex-wrap:wrap;margin-top:0}
.mir-quick-fields>.mir-field{flex:1 1 130px}
.mir-quick-fields>.mir-field:has([name=urgent_printing]),.mir-quick-fields>.mir-field:has([name=sheet_select]){flex:2 1 300px}
.mir-quick-fields>.mir-options-button{flex:0 1 auto}
.mir-field{display:flex;flex-direction:column;gap:8px;font-size:var(--text-label);font-weight:500;color:var(--text-ink);min-width:0;margin:0}
.mir-field input,.mir-field select,.mir-field textarea{width:100%;min-width:0;min-height:var(--control-height);font-family:inherit;font-size:var(--text-input);font-weight:400;line-height:var(--leading-ui);padding:12px 14px;color:var(--text-ink);background:white;border:1px solid #d6dfea;border-radius:8px;box-shadow:none}
.mir-field input[readonly]{background:#f6f8fb;color:var(--text-muted)}
.mir-field textarea{resize:vertical;min-height:8rem}
.mir-field input:focus,.mir-field select:focus,.mir-field textarea:focus{border-color:var(--text-link)}
.mir-panel .mir-primary,.mir-dialog .mir-primary{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:#2456df;border:1px solid #2456df;border-radius:8px;color:white;min-height:var(--control-height);padding:12px 24px}
.mir-panel .mir-primary:hover:not(:disabled),.mir-dialog .mir-primary:hover:not(:disabled){background:#1947c8}
.mir-panel .mir-secondary,.mir-dialog .mir-secondary{background:#fff;border:1px solid #d6dfea;border-radius:8px;color:var(--text-ink);min-height:var(--control-height);padding:12px 18px}
.mir-panel .mir-hint,.mir-dialog .mir-hint{font-size:var(--text-helper);color:var(--text-muted)}
.mir-page-rule:empty{display:none}
.mir-panel .mir-page-rule{margin-top:12px}
.mir-options{padding:22px 24px;margin-top:20px;background:#f7f9fc;border:1px solid #e3e8f0;border-radius:10px}
.mir-review-options{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px}
.mir-check{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-helper);font-weight:400;margin:12px 0;color:var(--text-ink)}
.mir-check input[type=checkbox]{flex-shrink:0;width:18px;height:18px;min-height:0;margin:3px 0 0;accent-color:#2456df}
.mir-check small{display:block;color:var(--text-muted);font-size:var(--text-helper);font-weight:400}
.mir-inserts{margin-top:20px;padding-top:20px;border-top:1px solid #dfe5ee}
.mir-insert-row{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;align-items:end;gap:16px;margin:16px 0}
.mir-panel summary{cursor:pointer;min-height:var(--control-small);padding:12px 0;font-size:var(--text-label);font-weight:500;color:var(--text-muted)}
.mir-quick-price{margin-top:16px;max-width:320px}
.mir-estimate{display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:center;margin:16px -32px -28px;padding:22px 32px;background:#f4f7fc;border-top:1px solid #e0e7f1;border-radius:0 0 16px 16px}
.mir-total{display:block;color:var(--text-ink);font-size:var(--text-total);font-weight:700;line-height:var(--leading-heading);margin:5px 0 8px;font-variant-numeric:tabular-nums}
.mir-breakdown{grid-column:1/-1}
.mir-breakdown dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px;max-width:760px;font-size:var(--text-helper)}
.mir-breakdown dl>div{display:flex;justify-content:space-between;gap:12px}
.mir-breakdown dt{font-weight:400;color:var(--text-muted)}
.mir-breakdown dd{margin:0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.mir-panel .mir-error,.mir-dialog .mir-error{color:#ae2939;white-space:pre-line;font-size:var(--text-helper);margin:20px 0 0}
.mir-error:empty{display:none}
.mir-link{display:inline-block;margin-top:16px;color:var(--text-link)}
.mir-dialog{width:min(760px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid #d9e1ec;border-radius:16px;box-shadow:0 24px 90px #17233b44;overflow:auto;background:white}
.mir-dialog::backdrop{background:#17233b88}
body:has(.mir-dialog[open]){overflow:hidden}
.mir-dialog .mir-heading{padding:22px 28px;border-bottom:1px solid #e3e8f0}
.mir-checkout-body{padding:24px 28px}
.mir-checkout-body section{padding:24px 0;border-bottom:1px solid #e4e9f0}
.mir-checkout-body h3{font-size:var(--text-product);margin-bottom:18px}
.mir-checkout-body section>.mir-hint{margin:12px 0}
.mir-checkout-body .mir-field+.mir-field{margin-top:20px}
.mir-fields .mir-field+.mir-field{margin-top:0}
.mir-address .mir-field:has([name=add_address1]),.mir-address .mir-field:has([name=add_address2]){grid-column:1/-1}
.mir-modal-estimate{display:grid;grid-template-columns:1fr auto;gap:8px 20px;background:#f4f7fc;border:1px solid #e2e9f3;border-radius:10px;padding:20px 22px;font-size:var(--text-helper);color:var(--text-muted)}
.mir-modal-estimate strong{color:var(--text-ink);font-variant-numeric:tabular-nums}
.mir-modal-estimate p{grid-column:1/-1}
.mir-confirm{margin-top:24px}
.mir-modal-footer{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px;padding:20px 28px;border-top:1px solid #e3e8f0;background:white}
.mir-upload{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px dashed #aab9d1;border-radius:10px;background:#f8faff;font-size:var(--text-helper)}
.mir-upload input{width:100%;font:inherit;font-size:var(--text-input)}
.mir-upload input::file-selector-button{min-height:var(--control-small);border:1px solid #cad5e5;border-radius:6px;background:white;color:var(--text-ink);font:inherit;padding:8px 12px;margin-right:12px;cursor:pointer}
.mir-file-list,.mir-same-files ul{list-style:none;padding:0;margin:12px 0;overflow-wrap:anywhere;font-size:var(--text-helper)}
.mir-file-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e3e8f0;padding:8px 0}
.mir-file-list span{min-width:0}
/* Integration overrides for the legacy order table: expanded cells must remain visible. */
.ms-order-table:has(.mir-order-actions) th:nth-child(8){width:140px}
.mir-order-actions{display:flex;gap:8px;align-items:stretch}
.ms-orders .ms-order-table .mir-order-actions .btn{flex:1;font-size:var(--text-label);min-height:var(--control-small);padding:9px 10px;white-space:nowrap}
.ms-orders .ms-order-table .mir-order-actions [aria-expanded=true]{border-color:#2456df;color:#2456df;background:#f4f7ff}
.ms-orders-form:not(.ms-orders-cart) .ms-order-table .mir-table-row>td:first-child,.ms-order-table .mir-table-row>td{display:table-cell;text-align:left;padding:0;border:0;background:transparent}
.mir-table-row>td:before{display:none}
.mir-table-row{scroll-margin-top:100px}
.ms-order-table .mir-panel p{font-size:var(--text-helper)}
@media(max-width:800px){.pv-table-scroll>.ms-order-table:has(.mir-order-actions){min-width:0}}
@media(max-width:1100px){.ms-order-table:has(.mir-order-actions) th:nth-child(8){width:130px}}
@media(max-width:800px){.mir-table-row{display:block}.ms-orders-form:not(.ms-orders-cart) .ms-order-table .mir-table-row>td:first-child,.ms-order-table .mir-table-row>td{display:block;width:100%}.mir-panel{padding:24px;margin:0 0 8px}.mir-estimate{margin-left:-24px;margin-right:-24px;margin-bottom:-24px;padding:22px 24px}.mir-order-actions .btn{width:auto}.mir-insert-row{grid-template-columns:1fr 1fr}.mir-insert-row>:nth-child(3){grid-column:1}.mir-insert-row>button{justify-self:start}}
@media(max-width:540px){.mir-panel{padding:20px}.mir-heading{align-items:flex-start}.mir-choices{display:grid;grid-template-columns:1fr}.mir-choices button{width:100%}.mir-fields{grid-template-columns:1fr}.mir-estimate{grid-template-columns:1fr;margin-left:-20px;margin-right:-20px;margin-bottom:-20px;padding:20px}.mir-estimate>[data-checkout]{margin-top:12px;width:100%}.mir-breakdown dl{grid-template-columns:1fr}.mir-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:12px}.mir-dialog .mir-heading,.mir-checkout-body,.mir-modal-footer{padding:20px}.mir-modal-estimate{grid-template-columns:1fr;padding:18px}.mir-options{padding:18px}.mir-insert-row{grid-template-columns:1fr}.mir-order-actions{gap:8px}.ms-orders .ms-order-table .mir-order-actions .btn{white-space:normal}.mir-modal-footer{display:grid;grid-template-columns:1fr 1fr}.mir-modal-footer button{padding:12px}.mir-breakdown dl>div{flex-wrap:wrap}}
@media(prefers-reduced-motion:no-preference){.mir-config-body{animation:mir-reveal .16s ease-out}@keyframes mir-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}}

@media(max-width:540px){.mir-toolbar{flex-wrap:wrap}.mir-toolbar .mir-choices{flex:1 1 100%}.mir-toolbar>[data-inline-close]{order:-1}.mir-toolbar .mir-choices button{white-space:normal}}
/* 방식 탭은 왼쪽 정렬, 닫기는 패널 오른쪽 위 × 아이콘 (사용자 지시) */
.mir-panel{position:relative}
.mir-toolbar{justify-content:flex-start;align-items:flex-end;padding-right:56px}
.mir-toolbar .mir-choices{justify-content:flex-start;flex:1 1 auto}
/* 공통 버튼 규칙이 글자 크기와 최소 높이(48px 터치 영역)를 !important 로 고정하므로 × 는 span 으로 키운다. */
.mir-panel .mir-close{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-muted)}
.mir-panel .mir-close span{font-size:26px!important;font-weight:400!important;line-height:1!important}
.mir-panel .mir-close:hover{color:var(--text-ink);background:#f1f4f9}
/* Make the expanded reorder choices distinct from the surrounding order rows. */
.mir-panel{background:#f3f6ff;border:2px solid #9db5f0;box-shadow:0 8px 24px #2456df14}
.mir-panel .mir-choices button:focus-visible{outline:3px solid #17233b;outline-offset:-4px}
/* 입력 상자: 고른 탭과 같은 파란 테두리, 왼쪽 위 모서리는 탭에 붙으므로 각지게. 금액 띠는 상자 안쪽 가장자리까지 채운다. */
.mir-panel .mir-config-body{margin-top:0;padding:22px 28px 24px;border:1px solid #2456df;border-radius:0 12px 12px 12px;background:#fff}
.mir-panel .mir-mode-note{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:var(--text-helper);color:#1a44b8}
.mir-panel .mir-mode-note svg{flex:none}
.mir-panel .mir-mode-note strong{color:inherit;font-weight:700}
.mir-panel .mir-estimate{margin:20px -28px -24px;padding:22px 28px;border-radius:0 0 12px 12px}
@media(max-width:800px){.mir-panel .mir-config-body{padding:20px}.mir-panel .mir-estimate{margin:20px -20px -20px;padding:20px}}
@media(max-width:540px){.mir-panel .mir-choices{gap:8px}.mir-panel .mir-choices button{flex-basis:auto;padding:14px 16px;border-bottom:1px solid #cfd6e4;border-radius:12px;margin-bottom:0}.mir-panel .mir-choices button[aria-pressed=true]{border-bottom-color:#2456df}.mir-panel .mir-choices button::after{display:none}.mir-panel .mir-config-body{margin-top:10px;padding:16px;border-radius:12px}.mir-panel .mir-estimate{margin:16px -16px -16px;padding:18px 16px}}
/* Checkout contact shortcuts and the existing customer address book. */
.mir-dialog .mir-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mir-dialog .mir-section-heading h3,.mir-dialog .mir-section-heading h4{margin:0}
.mir-dialog .mir-section-heading .mir-secondary,.mir-dialog .mir-address-card .mir-secondary,.mir-dialog .mir-address-save .mir-secondary{font-size:var(--text-label);min-height:var(--control-small);padding:10px 14px}
.mir-dialog .mir-contact-status:empty{display:none}
.mir-dialog .mir-contact-status,.mir-dialog .mir-address-status{margin-bottom:16px}
.mir-dialog .mir-address-book{padding:20px;margin-bottom:20px;border:1px solid #cbd8ed;border-radius:10px;background:#f5f8fd}
.mir-dialog .mir-address-list{display:grid;gap:12px;max-height:360px;overflow:auto;overscroll-behavior:contain}
.mir-dialog .mir-address-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid #dce3ee;border-radius:8px;background:#fff;overflow-wrap:anywhere}
.mir-dialog .mir-address-card strong{font-size:var(--text-body);font-weight:600}
.mir-dialog .mir-address-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.mir-dialog .mir-address-save{margin-top:16px;padding:16px;border-radius:8px;background:#f5f8fd}
.mir-dialog .mir-address-save p{margin-top:8px}
@media(max-width:540px){.mir-dialog .mir-address-card{flex-direction:column;align-items:stretch}.mir-dialog .mir-address-actions{justify-content:flex-end}.mir-dialog .mir-address-book{padding:16px}.mir-dialog .mir-section-heading{align-items:flex-start}}
/* '기존 파일로 재주문'은 거의 쓰지 않는 방식이므로 두 번째 탭에 두고, 첫 탭(새 파일)이 기본으로 열린다(사용자 지시 2026-09-30·10-03). */

/* 전단 후가공 선택칸(사용자 지시 2026-10-01) */
.mir-finishing{container-type:inline-size;margin-top:12px}
/* 패널이 넓으면(데스크탑) 다섯 칸 한 줄(접지만 조금 넓게), 중간 폭은 3칸씩(사용자 지시 2026-10-02). */
.mir-finishing-fields{gap:16px 12px}
@container (min-width:30rem){.mir-finishing-fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:44rem){.mir-finishing-fields{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr))}}