/* Native forms keep the original field names, IDs and payment handlers. */
.cm-native:not(.cm-legacy) { width:min(1100px, 100%); margin:40px auto 70px; padding:0 24px; box-sizing:border-box; }
.cm-native *, .cm-native *::before, .cm-native *::after { box-sizing:border-box; }
.cm-native table { max-width:100%; }
.cm-native img { max-width:100%; height:auto; }
.cm-native:not(.cm-legacy) .pg_tit { font-size:20px; padding:0 0 24px; }
.cm-native:not(.cm-legacy) .btn_confirm { margin:24px 0; }
.cm-native:not(.cm-legacy) .frm_input { max-width:100%; }
.cm-native:not(.cm-legacy) .tbl_frm01,
.cm-native:not(.cm-legacy) .tbl_head01 { overflow-x:auto; }

/* Legacy skin3 bodies are scoped by generated CSS; this wrapper only keeps them responsive inside Centmarin chrome. */
.cm-native.cm-legacy { width:min(1200px, 100%); margin:40px auto 70px; padding:0 24px; color:#111; }
.cm-native.cm-legacy :is(.tbl_frm01, .tbl_head01, #sod_frm, #sod_bsk, #sod_approval_frm) { max-width:100%; }
.cm-native.cm-legacy :is(.tbl_frm01, .tbl_head01) { overflow-x:auto; }
.cm-native.cm-legacy input,
.cm-native.cm-legacy select,
.cm-native.cm-legacy textarea { max-width:100%; }


.cm-native.cm-legacy .cm-native.cm-legacy { width:100%; margin:0; padding:0; }
.cm-native.cm-legacy-board > .cm-native.cm-legacy { margin:0; padding:0; }

/* Account and service menus share the drawer's icon/label/caret columns. */
.cm-native:has(> .cm-native-aside_my),
.cm-native:has(> .cm-native-aside_cs),
.cm-native.cm-legacy-mypage,
.cm-native.cm-legacy-orderinquiry,
.cm-native.cm-legacy-orderinquiryview { display:grid; grid-template-columns:200px minmax(0, 1fr); gap:28px; align-items:start; }
.cm-native.cm-native-aside_my,
.cm-native.cm-native-aside_cs { width:100%; min-height:0; margin:0; padding:0; }
.cm-native-aside_my #aside,
.cm-native-aside_cs #aside,
.cm-native.cm-legacy .cm-native-aside_my,
.cm-native.cm-legacy .cm-native-aside_cs,
.cm-native.cm-legacy .cm-native-aside_my #aside,
.cm-native.cm-legacy .cm-native-aside_cs #aside { float:none; width:100%; }
.cm-native-aside_my ~ #con_lf,
.cm-native-aside_cs ~ #con_lf,
.cm-native.cm-legacy .cm-native-aside_my ~ #con_lf,
.cm-native.cm-legacy .cm-native-aside_cs ~ #con_lf { float:none; width:100%; min-width:0; margin:0; }
.cm-native-aside_my .aside_hd,
.cm-native-aside_cs .aside_hd { padding:22px 16px; background:#f4f1e9; color:#252525; text-align:left; }
.cm-native-aside_my .aside_hd p,
.cm-native-aside_cs .aside_hd p { margin:0; padding:0; line-height:1.5; }
.cm-native-aside_my .aside_hd .eng,
.cm-native-aside_cs .aside_hd .eng { color:#8b857a; font-size:11px; }
.cm-native-aside_my .aside_hd .kor,
.cm-native-aside_cs .aside_hd .kor { margin-top:4px; font-size:17px; font-weight:600; }
.cm-native-aside_my .aside_name { padding:12px 14px; border-bottom:1px solid #ede9df; }
.cm-native-aside_my .aside_bx { margin:0; padding:10px 14px; list-style:none; font-size:12px; }
.cm-native-aside_my .aside_bx li { display:flex; justify-content:space-between; gap:10px; }
.cm-native .aside_my,
.cm-native .aside_cs { margin:0; border:1px solid #ede9df; }
.cm-native .aside_my dt { margin:0; padding:14px 14px 8px; color:#8b857a; font-size:12px; font-weight:600; }
.cm-native .aside_my dd,
.cm-native .aside_cs dd { margin:0; padding:0; }
.cm-native .aside_cs dt { height:auto; margin:0; border-top:1px solid #ede9df; }
.cm-native .aside_cs dt:first-child { border-top:0; }
.cm-native #aside a.cm-menu-row { display:grid; grid-template-columns:20px minmax(0, 1fr) 16px; align-items:center; column-gap:10px; min-height:44px; padding:10px 14px; background:none; color:#555; font-size:13px; line-height:1.5; text-decoration:none; }
.cm-native #aside a.cm-menu-row::after { content:none; }
.cm-native #aside a.cm-menu-row:hover,
.cm-native #aside a.cm-menu-row:focus-visible { background:#f4f8ef; color:#61724f; }
.cm-native .aside_cs dd ul { margin:0; padding:0; list-style:none; }
.cm-native .aside_cs dd li a.cm-menu-row { padding:10px 14px; }
.cm-native .cm-menu-row__icon { width:20px; height:20px; justify-self:center; }
.cm-native .cm-menu-row__label { min-width:0; line-height:1.5; overflow-wrap:anywhere; }
.cm-native .cm-menu-row__caret { width:16px; height:16px; justify-self:end; color:#9b958b; }

/* Keep vendor controls and JS-generated caret elements; replace only the glyph. */
.cm-native :is(.fa-angle-right, .ion-ios-arrow-right) { --cm-native-icon:url("./assets/icons/phosphor/caret-right.svg"); }
.cm-native .fa-caret-down { --cm-native-icon:url("./assets/icons/phosphor/caret-down.svg"); }
.cm-native .fa-caret-up { --cm-native-icon:url("./assets/icons/phosphor/caret-up.svg"); }
.cm-native .fa-clock-o { --cm-native-icon:url("./assets/icons/phosphor/clock.svg"); }
.cm-native .fa-print { --cm-native-icon:url("./assets/icons/phosphor/printer.svg"); }
.cm-native .fa-search { --cm-native-icon:url("./assets/icons/phosphor/magnifying-glass.svg"); }
.cm-native .fa-user { --cm-native-icon:url("./assets/icons/phosphor/user.svg"); }
.cm-native :is(.ion-android-close, .ion-close-round, .ion-ios-close-empty) { --cm-native-icon:url("./assets/icons/phosphor/x.svg"); }
.cm-native :is(.fa-angle-right, .fa-caret-down, .fa-caret-up, .fa-clock-o, .fa-print, .fa-search, .fa-user, .ion-android-close, .ion-close-round, .ion-ios-arrow-right, .ion-ios-close-empty)::before {
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-.125em;
  background-color:currentColor;
  -webkit-mask-image:var(--cm-native-icon);
  mask-image:var(--cm-native-icon);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

@media (max-width:900px) {
  .cm-native:has(> .cm-native-aside_my),
  .cm-native:has(> .cm-native-aside_cs),
  .cm-native.cm-legacy-mypage,
  .cm-native.cm-legacy-orderinquiry,
  .cm-native.cm-legacy-orderinquiryview { grid-template-columns:minmax(0, 1fr); gap:24px; }
}
@media (max-width:767px) {
  .cm-native:not(.cm-legacy) { width:100%; padding:0 14px; margin:25px auto 45px; font-size:12px; }
  .cm-native.cm-legacy { width:100%; padding:0 14px; margin:25px auto 45px; }
  .cm-native:not(.cm-legacy) .pg_tit { font-size:18px; }
  .cm-native #sod_frm, .cm-native #sod_bsk, .cm-native #sod_approval_frm { width:100%; }
  .cm-native .sod_left, .cm-native .sod_right { float:none; width:100%; }
  .cm-native input, .cm-native select, .cm-native textarea { max-width:100%; }
  .cm-native .btn_large { padding:0 16px; }
}

@media (max-width:900px) {
  .cm-native.cm-legacy .cm-native-aside_my,
  .cm-native.cm-legacy .cm-native-aside_cs,
  .cm-native.cm-legacy .cm-native-aside_my #aside,
  .cm-native.cm-legacy .cm-native-aside_cs #aside,
  .cm-native.cm-legacy .cm-native-aside_my ~ #con_lf,
  .cm-native.cm-legacy .cm-native-aside_cs ~ #con_lf { float:none; display:block; width:100%; margin-left:0; margin-right:0; }
  .cm-native.cm-legacy .cm-native-aside_my,
  .cm-native.cm-legacy .cm-native-aside_cs { margin-bottom:24px; }
  .cm-native.cm-legacy .tbl_wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cm-native.cm-legacy .tbl_head01 > table,
  .cm-native.cm-legacy .tbl_head02 > table { min-width:720px; }
  .cm-native.cm-legacy .tbl_frm01 > table { width:100%; min-width:0; }
  .cm-native.cm-legacy .tbl_frm01 th,
  .cm-native.cm-legacy .tbl_frm01 td { word-break:keep-all; overflow-wrap:anywhere; }
  .cm-native.cm-legacy #sod_bsk_btn { height:auto; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; }
  .cm-native.cm-legacy #sod_bsk_btn div.palt,
  .cm-native.cm-legacy #sod_bsk_btn div.part { position:static; }
  .cm-native.cm-legacy #sod_bsk_list #mod_option_frm { width:min(500px, calc(100vw - 48px)); max-width:100%; }
  .cm-native.cm-legacy #sod_ws_tot dt,
  .cm-native.cm-legacy #sod_ws_tot dd { box-sizing:border-box; }
}

@media (max-width:520px) {
  .cm-native.cm-legacy .tbl_head01 > table,
  .cm-native.cm-legacy .tbl_head02 > table { min-width:640px; }
  .cm-native.cm-legacy .tbl_frm01 th,
  .cm-native.cm-legacy .tbl_frm01 td { display:block; width:100%; box-sizing:border-box; }
  .cm-native.cm-legacy .tbl_frm01 th { padding-bottom:4px; border-bottom:0; }
  .cm-native.cm-legacy .tbl_frm01 td { padding-top:4px; }
  .cm-native.cm-legacy #sod_bsk_btn { display:block; }
  .cm-native.cm-legacy #sod_bsk_btn div + div { margin-top:8px; }
}

@media (max-width:900px) {
  .cm-native.cm-legacy #sod_bsk_tot > table,
  .cm-native.cm-legacy #sod_bsk_tot > table > tbody,
  .cm-native.cm-legacy #sod_bsk_tot > table > tbody > tr,
  .cm-native.cm-legacy #sod_bsk_tot > table > tbody > tr > td { display:block; width:100% !important; box-sizing:border-box; }
  .cm-native.cm-legacy #sod_bsk_tot > table > tbody > tr > td + td { margin-top:12px; }
  .cm-native.cm-legacy #sod_bsk_tot > table .tbl_frm01 > table,
  .cm-native.cm-legacy #sod_bsk_tot > table .tbl_frm01 > table > tbody,
  .cm-native.cm-legacy #sod_bsk_tot > table .tbl_frm01 > table > tbody > tr { display:table; width:100%; }
  .cm-native.cm-legacy #sod_bsk_tot > table .tbl_frm01 > table > tbody { display:table-row-group; }
  .cm-native.cm-legacy #sod_bsk_tot > table .tbl_frm01 > table > tbody > tr { display:table-row; }
  .cm-native.cm-legacy #sod_bsk_tot > table .tbl_frm01 th,
  .cm-native.cm-legacy #sod_bsk_tot > table .tbl_frm01 td { display:table-cell; width:auto; padding:8px 10px; white-space:normal; vertical-align:middle; }
  .cm-native.cm-legacy #sod_bsk_tot > table .tbl_frm01 th { min-width:104px; }
  .cm-native.cm-legacy .pg_tit span { display:block; text-align:center; font-size:22px; line-height:1.35; }
  .cm-native.cm-legacy .pg_nav { display:none; }
}
