.threadmill-connection-note{position:fixed;z-index:2000;bottom:0;left:0;right:0;margin:0;padding:7px 15px;background:rgba(255,255,255,.97);border-top:1px solid #d4dce1;font:12px/1.5 Arial,"Malgun Gothic",sans-serif;color:#53616b;text-align:center;box-shadow:0 -2px 8px #00000008}.threadmill-error{max-width:720px;margin:8vh auto;padding:28px;font:15px/1.8 Arial,"Malgun Gothic",sans-serif;border:1px solid #ddd;border-top:4px solid #a2ce00;color:#263238}.threadmill-error h1{font-size:23px}.threadmill-error button{padding:10px 18px;border:0;background:#248c9b;color:#fff;cursor:pointer}.threadmill-error a{color:#187b8b}body{padding-bottom:34px}.threadmill-network-error{background:#fff3e8;color:#a34b14}.threadmill-error p{overflow-wrap:anywhere}
.threadmill-summary{position:relative;max-width:850px;margin:0 70px 55px 87px;padding:135px 0 25px;font:14px/1.7 Arial,"Malgun Gothic",sans-serif;color:#263238}.threadmill-summary[hidden]{display:none}.threadmill-summary h1{font-size:23px;margin:0 0 20px}.threadmill-summary-warning{padding:16px;border:1px solid #dcba6a;background:#fff8e8;color:#795710}.threadmill-summary p{margin:12px 0}.threadmill-summary table{width:100%;border-collapse:collapse;margin:20px 0}.threadmill-summary th,.threadmill-summary td{border:1px solid #cdd2d2;padding:9px 14px;text-align:left}.threadmill-summary th{width:230px;background:#f3f5f4;font-weight:500}.step_num [role=button]:focus-visible{outline:2px solid #7ba700;outline-offset:-3px}
.threadmill-menu-toggle{display:none}
/* Keep validation notices centered and readable at every window size. */
.modal-wrapper .modal[role="alertdialog"]{box-sizing:border-box;display:flex;flex-direction:column;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);top:50%;left:50%;margin:0!important;transform:translate(-50%,-50%);overflow:auto}
.modal-wrapper .modal[role="alertdialog"] .head{box-sizing:border-box;flex:0 0 auto;height:56px;min-height:0;padding:14px 26px}
.modal-wrapper .modal[role="alertdialog"] .btn-close{line-height:28px;color:#fff}
.modal-wrapper .modal[role="alertdialog"] .btn-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
.modal-wrapper .modal[role="alertdialog"] .content{box-sizing:border-box;flex:1 1 auto;display:flex;align-items:center;justify-content:center;height:auto;min-height:0;margin:0;padding:20px 26px;font-size:18px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;overflow:auto}
/* The original drawing/field positions remain unchanged on large desktops.
   Reflow narrower or shorter windows so fixed fields cannot escape the viewport. */
@media(max-width:1919px),(max-height:850px){
  body{padding-bottom:0;overflow-x:visible}
  #wrapper,#contents,#header,#contents *{box-sizing:border-box}
  #wrapper{min-width:0;width:100%}
  #header{position:relative;width:100%;height:auto;padding:14px 20px;background-size:cover;border-bottom:1px solid #e3e7e5}
  #header .header-bottom{padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
  #header .logo{margin:0;line-height:1}
  #header .logo img{width:210px;max-width:calc(100vw - 100px);height:auto}
  .threadmill-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid #ccd4ce;border-radius:4px;background:#fff;padding:10px;cursor:pointer}
  .threadmill-menu-toggle span{display:block;width:22px;height:2px;background:#263a31}
  .threadmill-menu-toggle:focus-visible{outline:2px solid #448242;outline-offset:3px}
  #header .gnb{display:none;width:100%;padding:0 0 10px}
  #header.threadmill-menu-open .gnb{display:block}
  #header .gnb>ul{padding:4px 0 16px}
  #header .gnb .home a{padding:14px 0;line-height:1.4;font-size:16px}
  #header .utill-menu{max-width:420px}
  #header .language_wrap{box-sizing:border-box}
  #header .language_wrap p,#header .language_wrap a,#header .link_lic{min-height:44px;line-height:44px}
  #header .language_wrap ul{position:relative;box-sizing:border-box}
  #header .side_media,#header .m-gnb-bg{display:none}
  #contents{margin:0 auto;padding:0 20px 28px;min-height:0;width:100%;max-width:1280px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start;overflow-wrap:anywhere}
  .step_num{position:relative;top:auto;left:auto;grid-column:1/-1;grid-row:1;display:flex;flex-wrap:wrap;gap:6px;width:100%;min-width:0;padding:16px 0 0;height:auto;z-index:1;font-size:14px;counter-reset:threadmill-step;scroll-margin-top:8px}
  .step_num>div:first-child:not([role=button]){display:none}
  .step_num>[role=button]{float:none;flex:1 1 130px;display:flex;align-items:center;gap:7px;min-width:0;width:auto;height:auto;min-height:52px;margin:0;padding:10px;border:1px solid #d9e1dc;border-radius:4px;line-height:1.4;text-align:left;cursor:pointer;overflow-wrap:anywhere}
  .step_num>[role=button]::before{counter-increment:threadmill-step;content:counter(threadmill-step);flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#e8eee9;color:#46604e;text-align:center;line-height:22px;font-size:12px;font-weight:700}
  .step_num>.step_menu_over{background:#edf6e6;border-color:#73a545;color:#234e30;font-weight:700}
  .step_num>.step_menu_over::before{background:#548638;color:#fff}
  .detailArea{position:static;grid-column:2;grid-row:2;padding:0;min-width:0;width:100%}
  .step1_detail,.step2_detail,.step3_detail{grid-column:1;grid-row:2;margin:0;padding:16px;background:#fafbf9;border:1px solid #e1e7e2;border-radius:6px;min-width:0}
  .step1_cell1,.step1_cell2,.step2_cell1,.step2_cell2,.step3_cell1{float:none;position:static;width:auto;margin:0;padding:0;min-width:0}
  .step1_cell2,.step2_cell2{margin:20px 0 0;text-align:center}
  #contents img{max-width:100%;height:auto;object-fit:contain}
  .step1_image_detail{margin:0;max-height:440px}
  .step1_thread1,.step1_thread2{height:auto;display:flow-root}
  .step1_thread_type2{float:none;margin-top:10px}
  .step1_thread_image3{float:none;text-align:center}
  .step1_thread_type3,.step1_thread_type4{float:none;width:100%;padding-bottom:12px}
  .step1_thread_type3>div,.step1_thread_type4>div{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
  .step1_thread_type3>div>div,.step1_thread_type4>div>div,.step1_thread_type2 div{float:none;width:auto;height:auto;min-width:0;padding:0;overflow-wrap:anywhere}
  .step1_select,.step2_select,.step3_select{margin-top:12px}
  .step2_thread_type{width:auto;margin:10px 0;line-height:1.7}
  .step3_thread_image1,.step3_thread_image2{padding:12px 0;text-align:center}
  .s1a1,.s2a1,.s3a1{width:100%;height:auto;padding:0;min-width:0}
  .s1a1c0,.s2a1c0,.s3a1c0{height:auto;margin:0 0 8px;font-size:19px;line-height:1.5}
  #contents :is(.a1c,.a2c,.a1c1,.a1c2,.a1c3,.a1c4,.a4c1,.a4c2):not(.step_none){display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;height:auto;min-height:0;margin:0 0 12px;padding:10px;border:1px solid #e1e7e2;border-radius:5px}
  #contents :is(.a1c,.a2c,.a1c1,.a1c2,.a1c3,.a1c4,.a4c1,.a4c2)>div{float:none;position:static;flex:1 1 0;min-width:0;width:auto;height:auto;margin:0;padding:0;text-align:left;line-height:1.5}
  #contents :is(.a1c,.a2c,.a1c1,.a1c2,.a1c3,.a1c4,.a4c1,.a4c2)>div:first-child{flex-basis:100%;font-size:15px}
  #contents :is(.a1c,.a2c,.a4c1,.a4c2)>div>label{cursor:pointer}
  #contents input:not([type=hidden]):not([type=checkbox]):not([type=button]),#contents select{box-sizing:border-box;width:100%;max-width:100%;height:44px;min-height:44px;padding:6px 8px;font-size:16px;line-height:1.4}
  #contents input[type=checkbox]{width:20px;height:20px;vertical-align:middle;margin:0 5px 0 0;accent-color:#5a8f3d}
  #contents select{color:#36423c}
  #contents #workpiece{height:auto;min-height:140px;margin:0;padding:6px;font-size:16px}
  .s1a1c9r1{margin:0;padding:8px 0;font-size:16px}
  .s1a1c9r2{padding:0}
  .step_button{padding:14px 0 6px;clear:both}
  .step_button>div{display:flex;gap:10px;justify-content:flex-end;font-size:0}
  #contents .input_button{width:auto;min-width:104px;max-width:100%;min-height:46px;height:auto;padding:10px 22px;border-radius:5px;font-size:16px;line-height:1.4}
  .step_button .input_button{flex:1 1 0}
  .step4_detail{grid-column:1/-1;grid-row:2;width:100%;margin:0}
  .step4_cell1{display:flex;flex-direction:column;float:none;width:100%;max-width:760px;margin:0 auto}
  .step4_select{order:-2;width:auto}
  .step4_cell1>.a2c1,.step4_cell1>.a2c2,.step4_cell1>.a2c3{display:none}
  .step4_cell2{order:-1;width:100%;margin:12px 0 0}
  .step4_thread_image1,.step4_thread_image2{position:static;order:2;width:100%;margin:16px 0;text-align:center}
  .step4_thread_image2 img{max-height:420px}
  .step4_cell1>.step_button{order:1}
  .step_line{float:none;width:100%;margin:0 0 12px;background:#e2e7e3}
  #contents .a4c2>div:not([class]):only-child{display:flex;flex-wrap:wrap;gap:8px}
  #contents .a4c2>div:not([class]):only-child>div{float:none;flex:1 1 0;width:auto;height:auto;margin:0;min-width:0}
  #contents .a4c2>div:not([class]):only-child>div:first-child{flex-basis:100%}
  .threadmill-summary{grid-column:1/-1;width:100%;max-width:850px;margin:0 auto;padding:0;overflow-wrap:anywhere}
  .threadmill-summary table{table-layout:fixed}
  .threadmill-summary th{width:45%}
  .threadmill-summary th,.threadmill-summary td{padding:10px;overflow-wrap:anywhere}
  .threadmill-connection-note{position:static;box-sizing:border-box;width:100%;padding:12px 20px;text-align:left;font-size:12px;line-height:1.6}
  .threadmill-error{box-sizing:border-box;max-width:calc(100% - 32px);margin:24px auto;padding:20px}
  .modal-wrapper .modal{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);top:50%;left:50%;margin:0!important;transform:translate(-50%,-50%);overflow:auto}
  .modal-wrapper .modal .head{box-sizing:border-box;max-width:100%;height:auto;min-height:48px;padding:10px 16px;overflow:visible;display:flow-root}
  .modal-wrapper .modal .btn-close{min-height:28px;line-height:28px}
  .modal-wrapper .modal .content{box-sizing:border-box;max-width:100%;height:auto;min-height:100px;margin:20px 0;padding:0 16px;overflow-wrap:anywhere}
  /* Never expose hidden machining branches while reflowing their row layout. */
  #contents .step_none{display:none}
}
@media(max-width:899px){
  #header{padding:12px 16px}
  #header .logo img{width:190px}
  #contents{grid-template-columns:minmax(0,1fr);padding:0 16px 24px;gap:18px}
  .step_num>[role=button]{flex-basis:calc(33.333% - 6px);padding:8px 6px;gap:5px;font-size:12px;min-height:64px}
  .step_num>[role=button]::before{flex-basis:18px;width:18px;height:18px;line-height:18px;font-size:11px}
  .detailArea{grid-column:1;grid-row:2}
  .step1_detail,.step2_detail,.step3_detail{grid-column:1;grid-row:3}
  .step1_thread_type2 div{line-height:1.6}
  .threadmill-summary h1{font-size:21px}
  .threadmill-summary th,.threadmill-summary td{padding:9px 8px;font-size:13px}
}
@media(max-width:479px){
  .step_num>[role=button]{flex-basis:calc(50% - 6px);font-size:13px}
}

/* Original final step: ordered conditions beside the generated program. */
.threadmill-program{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:54px;max-width:none;margin:0 35px 55px 87px;padding-top:145px;color:#24404d;align-items:start}
.threadmill-program[hidden]{display:none}
.threadmill-program h1{font-size:18px;line-height:1.5;margin:0 0 24px;font-weight:700}
.threadmill-sequence-card{padding:15px 16px;margin-bottom:10px;border:1px solid #aaa;border-radius:4px;background:#eee;font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.threadmill-sequence-card h2{margin:0;font-size:15px;line-height:1.55;font-weight:700}
.threadmill-offset{color:#008000}
.threadmill-applied-value{font-weight:700;color:#226c82}
.threadmill-code-panel{position:sticky;top:135px;min-width:0}
.threadmill-code-panel>label{display:block;margin:0 0 15px;padding:0 0 8px;border-bottom:1px solid #bdc4c4;font-size:25px;line-height:1.25;color:#333}
#threadmill-gcode{box-sizing:border-box;display:block;width:100%;height:522px;min-height:300px;resize:vertical;border:1px solid #aaa;border-radius:3px;background:#eee;padding:12px 10px;color:#3d3d3d;font:18px/1.45 Consolas,"Courier New",monospace;white-space:pre;overflow:auto;tab-size:2}
#threadmill-gcode:focus-visible{outline:2px solid #258ea3;outline-offset:2px}
.threadmill-program .threadmill-program-status{min-height:22px;margin:8px 0 16px;font-size:13px;color:#53616b}
.threadmill-program .threadmill-program-failed{color:#b13d21}
.threadmill-program-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;border-top:1px solid #bdc4c4;padding-top:15px}
.threadmill-program .input_button{width:auto;min-width:85px;height:auto;padding:8px 24px;border:1px solid #df693c;border-radius:16px;background:#fff;color:#c75b2e;font-size:17px;line-height:1.4;cursor:pointer}
.threadmill-program .input_button:disabled{opacity:.45;cursor:default}
.threadmill-program .input_button[hidden]{display:none}
.threadmill-program .threadmill-program-note{font-size:12px;line-height:1.6;color:#6c7478;margin:14px 0 0}
@media(max-width:1919px),(max-height:850px){
  .threadmill-program{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:30px;max-width:none;margin:0;padding:8px 0 20px}
  .threadmill-code-panel{top:20px}
  .threadmill-program h1{margin-bottom:20px}
}
@media(max-width:899px){
  .threadmill-program{grid-template-columns:minmax(0,1fr);gap:24px}
  .threadmill-code-panel{position:static}
  #threadmill-gcode{height:440px;font-size:15px}
  .threadmill-sequence-card{font-size:14px}
  .threadmill-sequence-card h2{font-size:14px}
}