/* 모달 스튜디오 전용 Stone UI. 업무 화면의 입력 스타일은 변경하지 않는다. */
.mg-page { overflow: auto; min-height: 0; flex: 1; padding: 32px; background: #fafaf9; color: #292524; }
.mg-page *, .mg-dialog * { box-sizing: border-box; }
.mg-page [hidden] { display: none !important; }
.mg-hero { padding: 36px; border: 1px solid #e7e5e4; border-radius: 16px; background: linear-gradient(120deg,#fff,#f5f5f4); }
.mg-code { font-size: 11px; letter-spacing: .12em; color: #78716c; font-weight: 700; }
.mg-hero h1 { margin: 12px 0; font-size: 32px; letter-spacing: -.04em; font-weight: 700; }
.mg-hero p { line-height: 1.8; color: #78716c; font-size: 14px; }
.mg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mg-tags span { padding: 5px 10px; border: 1px solid #d6d3d1; border-radius: 20px; font-size: 11px; color: #57534e; }
.mg-nav { display: flex; gap: 24px; padding: 22px 0; border-bottom: 1px solid #e7e5e4; }
.mg-nav a { color: #44403c; font-size: 13px; font-weight: 600; }
.mg-section { padding-top: 36px; scroll-margin-top: 100px; }
.mg-section-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.mg-section-title h2, .mg-guide h2 { font-size: 21px; font-weight: 700; margin-top: 6px; }
.mg-section-title p, .mg-guide p { font-size: 13px; color: #78716c; line-height: 1.7; }
.mg-gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 18px; }
.mg-card { min-width: 0; padding: 22px; border: 1px solid #e7e5e4; border-radius: 12px; background: #fff; transition: box-shadow .15s; }
.mg-card:hover { box-shadow: 0 8px 24px #2925240b; }
.mg-card h3 { font-size: 16px; font-weight: 650; margin: 6px 0; }
.mg-card > p { color: #78716c; font-size: 12px; min-height: 36px; }
.mg-card > button { display: flex; justify-content: space-between; width: 100%; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e7e5e4; font-size: 12px; font-weight: 600; }
.mg-mini { height: 108px; margin-bottom: 18px; padding: 12px; display: flex; justify-content: end; background: #e7e5e4; border-radius: 6px; overflow: hidden; }
.mg-mini > div { width: 65%; background: #fff; padding: 10px; box-shadow: 0 2px 8px #29252418; }
.mg-mini i { display: block; width: 45%; height: 5px; background: #78716c; margin-bottom: 10px; }
.mg-mini b { display: block; height: 8px; margin: 6px 0; background: #f5f5f4; }
.mg-mini--center { align-items: center; justify-content: center; }
.mg-mini--center > div { height: 75px; border-radius: 5px; }
.mg-mini--bottom { align-items: end; padding-bottom: 0; }
.mg-mini--bottom > div,.mg-mini--full > div { width: 100%; }
.mg-guide { margin: 36px 0; padding: 24px; border-left: 3px solid #a8a29e; background: #f5f5f4; }
.mg-dialog { --mg-width: 800px; position: fixed; inset: var(--mg-top,0px) 0 0 auto; width: min(var(--mg-width),100vw); max-width: 100vw; height: calc(100dvh - var(--mg-top,0px)); max-height: none; margin: 0; padding: 0; border: 1px solid #e7e5e4; border-radius: 0; background: #fafaf9; color: #292524; box-shadow: -12px 0 48px #29252420; font-size: 13px; overflow: hidden; }
.mg-dialog[open] { display: flex; flex-direction: column; animation: mg-slide .22s ease-out; }
.mg-dialog::backdrop { background: #29252455; backdrop-filter: blur(2px); }
.mg-dialog[data-position=center] { inset: 0; margin: auto; height: min(820px,90dvh); max-width: calc(100vw - 32px); border-radius: 14px; }
.mg-dialog[data-position=bottom] { inset: auto 0 0; margin: 0 auto; height: 80dvh; border-radius: 18px 18px 0 0; }
.mg-dialog[data-position=full] { inset: var(--mg-top,0px) 0 0; width: 100vw; }
.mg-dialog[data-position=center][open],.mg-dialog[data-position=full][open] { animation-name: mg-fade; }
.mg-dialog[data-position=bottom][open] { animation-name: mg-up; }
.mg-dialog-header { display: flex; align-items: start; justify-content: space-between; padding: 22px 26px; background: white; border-bottom: 1px solid #e7e5e4; flex-shrink: 0; }
.mg-dialog-header h2 { font-size: 20px; font-weight: 700; margin: 5px 0; }
.mg-dialog-header p { font-size: 12px; color: #78716c; }
.mg-dialog-header > button { width: 30px; height: 30px; font-size: 24px; border: 1px solid #e7e5e4; border-radius: 6px; line-height: 1; }
.mg-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 26px; border-bottom: 1px solid #e7e5e4; background: #f5f5f4; flex-shrink: 0; }
.mg-controls label { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.mg-controls select { border: 1px solid #d6d3d1; border-radius: 5px; padding: 5px 8px; background: #fff; max-width: 200px; }
.mg-controls .mg-tags { margin: 0; }
.mg-dialog-body { flex: 1; min-height: 0; overflow: auto; padding: 24px; }
.mg-dialog-footer { display: flex; justify-content: end; align-items: center; gap: 10px; padding: 14px 24px; background: white; border-top: 1px solid #e7e5e4; flex-shrink: 0; }
.mg-dialog-footer > span { margin-right: auto; color: #78716c; font-size: 11px; }
.mg-dialog-footer button { border: 1px solid #d6d3d1; border-radius: 6px; padding: 7px 16px; }
.mg-dialog-footer .mg-primary { background: #292524; color: #fff; border-color: #292524; }
.mg-summary { display: flex; justify-content: space-between; gap: 20px; padding: 22px; margin-bottom: 20px; background: #292524; color: #fafaf9; border-radius: 10px; }
.mg-summary > div { display: grid; gap: 7px; }
.mg-summary strong { font-size: 20px; }
.mg-summary small,.mg-summary span { font-size: 11px; }
.mg-summary > div:last-child { text-align: right; }
.mg-status { display: inline-block; padding: 3px 8px; background: #e7e5e4; color: #44403c; border-radius: 5px; font-size: 11px; }
.mg-tabs,.mg-mode { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid #d6d3d1; }
.mg-tab-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid #d6d3d1; min-height: 40px; }
.mg-tab-toolbar .mg-tabs { min-width: 0; overflow-x: auto; margin: 0; border: 0; }
.mg-tab-toolbar .mg-tabs button { white-space: nowrap; }
.mg-wide-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; margin-left: auto; border: 1px solid #d6d3d1; border-radius: 4px; color: #292524; background: #fff; }
.mg-wide-toggle .material-symbols-outlined { font-size: 16px; }
.mg-print-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border: 1px solid #d6d3d1; border-radius: 4px; color: #292524; background: #fff; }
.mg-print-button .material-symbols-outlined { font-size: 16px; }
#mg-print-root { display: none; }
@media print {
    html:has(body.mg-printing), body.mg-printing { height: auto !important; overflow: visible !important; }
    body.mg-printing > :not(#mg-print-root), body.mg-printing dialog { display: none !important; }
    body.mg-printing #mg-print-root { display: block !important; color: #000; background: #fff; font-size: 12px; }
    #mg-print-root h1 { font-size: 20px; font-weight: 600; margin: 0 0 20px; }
    #mg-print-root .mg-summary { background: #fff; color: #000; border: 1px solid #d6d3d1; }
    #mg-print-root .mg-detail-card { break-inside: avoid; box-shadow: none; }
    #mg-print-root .mg-table-wrap { overflow: visible; }
    #mg-print-root table { white-space: normal; }
    #mg-print-root [data-mg-detail] { display: block; }
}
.mg-tabs button,.mg-mode button { padding: 10px 16px; color: #78716c; }
.mg-tabs [aria-selected=true],.mg-mode [aria-pressed=true] { border-bottom: 2px solid #44403c; font-weight: 700; color: #292524; }
.mg-detail-card { background: #fff; border: 1px solid #e7e5e4; border-radius: 8px; margin-bottom: 16px; padding: 20px; }
.mg-detail-card h3 { font-weight: 700; margin-bottom: 14px; }
.mg-detail-card dl { display: grid; grid-template-columns: repeat(min(var(--detail-columns, 2), var(--detail-screen-columns, 4)),minmax(0,1fr)); gap: 1px 16px; }
.mg-detail-card dl > div { display: grid; grid-template-columns: 100px minmax(0,1fr); column-gap: 8px; }
.mg-detail-card dl > .mg-detail-divider {
    display: block;
    grid-column: 1 / -1;
    height: 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #78716c;
}
.mg-detail-card dl > [data-d01-divider] { display: none; }
.mg-dialog[data-code="D01"] .mg-detail-card dl > [data-d01-divider] { display: block; }
.mg-dialog[data-code="D01"] .mg-detail-card [data-d01-divider-item] dt,
.mg-dialog[data-code="D01"] .mg-detail-card [data-d01-divider-item] dd { border-bottom: 0; }
.mg-detail-card dt,.mg-detail-card dd { border-bottom: 1px solid #d6d3d1;  font-weight: 500; }
.mg-detail-card dt { background: transparent; padding: 8px 10px; color: #000; font-weight: 400; font-size: 13px; }
.mg-detail-card dd { margin: 0; padding: 8px 10px; text-align: right; overflow-wrap: anywhere; font-size: 12px; }
.mg-table-wrap { overflow: auto; margin-top: 20px; font-size: 12px; }
.mg-table-wrap table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.mg-table-wrap th,.mg-table-wrap td { padding: 8px 10px; text-align: center; border-bottom: 1px solid #e7e5e4; }
.mg-table-wrap th { background: #f5f5f4; }
.mg-timeline { padding-left: 12px; }
.mg-timeline li { display: flex; gap: 24px; padding: 0 0 26px 20px; border-left: 1px solid #000; }
.mg-detail-card .mg-timeline,
.mg-detail-card .mg-timeline time,
.mg-detail-card .mg-timeline strong,
.mg-detail-card .mg-timeline p { color: #000; font-size: 12px; font-weight: 400; }
.mg-timeline li > div { min-width: 0; }
.mg-detail-card .mg-timeline strong { display: inline; font-weight: 500; }
.mg-timeline p { display: inline; margin: 0 0 0 6px; }
.mg-accordion summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
[data-view=split] [data-mg-detail] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
[data-view=split] .mg-summary { grid-column: 1/-1; }
.mg-fields { --field-border: #d6d3d1; --field-bg: #fff; --field-radius: 6px; }
.mg-fields label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 600; min-width: 0; }
.mg-fields input,.mg-fields select,.mg-fields textarea { width: 100%; min-width: 0; border: 1px solid var(--field-border); border-radius: var(--field-radius); background: var(--field-bg); padding: 10px 12px; color: #292524; font: inherit; font-weight: 400; transition: border-color .15s,box-shadow .15s; }
.mg-fields textarea { resize: vertical; min-height: 80px; }
.mg-fields input:focus,.mg-fields select:focus,.mg-fields textarea:focus { border-color: #57534e; outline: 0; box-shadow: 0 0 0 3px #a8a29e33; }
.mg-fields input::placeholder,.mg-fields textarea::placeholder { color: #c4bfbb; opacity: 1; }
.mg-fields small { font-size: 11px; font-weight: 400; color: #78716c; }
.mg-fields input[readonly],.mg-fields input:disabled { background: #e7e5e4; color: #78716c; }
.mg-fields input:disabled { cursor: not-allowed; opacity: .7; }
.mg-fields input[aria-invalid=true] { border-color: #b91c1c; background: #fffafa; }
.mg-fields .mg-error { color: #b91c1c; }
.mg-field-label { display: flex; align-items: center; gap: 6px; }
.mg-fields .mg-field-error { display: block; padding: 0; color: #9f3529; font-size: 11px; line-height: 1.5; }
.mg-field-state { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 10px; margin-left: auto; width: 10px; height: 14px; color: #15803d; font-size: 10px; font-weight: 700; line-height: 14px; }
.mg-field-state.is-pending { color: #000; }
.mg-field-state.is-invalid { color: #b45345; }
.mg-style-horizontal label .mg-field-error { grid-column: 2; }
.mg-fields input[aria-invalid=true]:focus { border-color: #b45345; box-shadow: 0 0 0 2px #b4534515; }
.mg-style-underline input[aria-invalid=true]:focus { border-bottom: 1px solid #000; box-shadow: none; }
[data-mg-feedback].mg-validation-summary:not(:empty) { background: #fdf5f3; color: #9f3529; border: 1px solid #edd4cd; }
.mg-fields fieldset { margin: 0 0 24px; padding: 20px; border: 1px solid #e7e5e4; border-radius: 8px; background: #fff; }
.mg-fields legend { padding: 0 8px; font-weight: 700; color: #57534e; }
.mg-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.mg-full { grid-column: 1/-1; }
.mg-style-soft { --field-bg: #f5f5f4; --field-border: #e7e5e4; }
.mg-style-sharp { --field-radius: 0px; --field-border: #a8a29e; }
.mg-style-round { --field-radius: 12px; }
.mg-style-round input,.mg-style-round select { padding: 13px 15px; }
.mg-style-underline { --field-radius: 1px; --field-bg: transparent; }
.mg-style-underline input,.mg-style-underline select,.mg-style-underline textarea { border-width: 0 0 1px; }
.mg-style-underline input:focus,.mg-style-underline select:focus,.mg-style-underline textarea:focus {
    border-bottom: 1px solid #000;
    outline: none;
    box-shadow: none;
}
.mg-style-hybrid .mg-form-tab-toolbar { margin-bottom: 18px; }
.mg-style-hybrid .f13-group-card { margin-bottom: 16px; padding: 20px; border-color: #e7e5e4; border-radius: 8px; background: #fff; }
.mg-style-hybrid fieldset legend { color: #292524; font-size: 14px; font-weight: 600; }
.mg-style-hybrid .mg-form-grid { gap: 20px; }
.mg-style-hybrid .mg-field-label { flex-direction: row; align-items: center; width: 100%; text-align: left; }
.mg-style-inset { --field-bg: #fafaf9; }
.mg-style-inset input,.mg-style-inset select,.mg-style-inset textarea { box-shadow: inset 0 2px 3px #2925240c; }
.mg-style-bold { --field-border: #a8a29e; }
.mg-style-bold input,.mg-style-bold select,.mg-style-bold textarea { border-width: 2px; }
.mg-style-block label { background: #f5f5f4; padding: 10px; border: 1px solid #e7e5e4; border-radius: 8px; }
.mg-style-horizontal label { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; background: #f5f5f4; padding: 10px; }
.mg-style-horizontal label small { grid-column: 2; }
.mg-style-compact input,.mg-style-compact select,.mg-style-compact textarea { padding: 6px 9px; font-size: 12px; }
.mg-style-pill { --field-radius: 24px; --field-bg: #fafaf9; }
.mg-style-pill textarea { border-radius: 14px; }
.mg-style-warm { --field-bg: #e7e5e4; --field-border: #d6d3d1; --field-radius: 8px; }
.mg-page button:focus-visible,.mg-page a:focus-visible { outline: 2px solid #78716c; outline-offset: 3px; }
[data-mg-feedback]:not(:empty) { padding: 12px; background: #e7e5e4; border-radius: 6px; }
@keyframes mg-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes mg-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mg-fade { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
@media(max-width:700px) {
 .mg-page { padding: 16px; }.mg-hero { padding: 24px; }.mg-hero h1 { font-size: 26px; }
 .mg-section-title { display: block; }.mg-section-title p { margin-top: 8px; }
 .mg-dialog-body { padding: 16px; }.mg-controls { padding: 10px 16px; gap: 8px; }
 .mg-form-grid,[data-view=split] [data-mg-detail] { grid-template-columns: minmax(0,1fr); }
 .mg-summary strong { font-size: 15px; }.mg-dialog-footer > span { max-width: 45%; }
}
@media(prefers-reduced-motion:reduce) { .mg-dialog[open] { animation: none; }.mg-fields input,.mg-card { transition: none; } }
@media screen and (width < 1280px) { .mg-dialog { --detail-screen-columns: 3; } }
@media screen and (width < 840px) { .mg-dialog { --detail-screen-columns: 2; } }
@media screen and (width < 600px) { .mg-dialog { --detail-screen-columns: 1; } }

.mg-dialog-header > [data-mg-close] { width: 24px; height: 24px; font-size: 18px; border-radius: 4px; background: transparent; color: #000; border: 0; }
.mg-dialog-footer > button { height: 26px; padding: 3px 10px; font-size: 11px; line-height: 18px; border-radius: 4px; }
.mg-dialog-footer > [data-mg-close] { height: 26px; padding: 3px 10px; font-size: 11px; line-height: 18px; border-radius: 4px; background: #000; color: #fff; border-color: #000; }

.mg-readonly-icon.material-symbols-outlined { margin-left: auto; font-size: 12px; color: #78716c; line-height: 14px; }