/* 서비스 페이지 새 틀 (2026-10-18) — service/sub01~06.php 와 효성CMS 소개(company/company.php)에서 불러온다
   - 이름은 모두 .cmsx- 로 시작해 기존 sub_page.css·cms-ui.css 와 섞이지 않게 한다
   - 색: 남색(브랜드)·노랑(빠른상담 버튼과 같은 행동 색)·밝은 회청 배경 */
.cmsx {
  --x-navy: #0b2f6b; --x-blue: #1f3a8a; --x-ink: #1b2333; --x-muted: #5b6475; --x-line: #e3e8f0;
  --x-tint: #f5f7fb; --x-yellow: var(--cms-yellow, #fdb813); --x-radius: 16px;
}
.cmsx-intro, .cmsx-sec, .cmsx-cta { color: var(--x-ink); letter-spacing: -0.02em; word-break: keep-all; }
/* reset.css 가 h2·p·div 등에 word-break:break-all 을 직접 걸어 상속이 안 되므로, 새 틀 안 요소에 직접 낱말 단위 줄바꿈(긴 문자열은 넘치지 않게) */
.cmsx-intro *, .cmsx-sec *, .cmsx-cta * { word-break: keep-all; overflow-wrap: break-word; }
/* 기본 초기화는 새 구간에만(위 하위메뉴 .locationWrap 은 기존 모양 유지) */
.cmsx-intro ul, .cmsx-intro ol, .cmsx-sec ul, .cmsx-sec ol { list-style: none; margin: 0; padding: 0; }
.cmsx-intro h2, .cmsx-intro h3, .cmsx-intro p, .cmsx-sec h2, .cmsx-sec h3, .cmsx-sec p, .cmsx-cta h2, .cmsx-cta p { margin: 0; }
/* reset.css 의 'a:link { font-size:12px }' 가 링크 글자를 줄이므로 새 구간 링크는 부모 글자 크기를 따른다 */
.cmsx-intro a, .cmsx-intro a:link, .cmsx-intro a:visited,
.cmsx-sec a, .cmsx-sec a:link, .cmsx-sec a:visited,
.cmsx-cta a, .cmsx-cta a:link, .cmsx-cta a:visited { color: inherit; font-size: inherit; }
.cmsx a.cmsx-btn, .cmsx a.cmsx-btn:link, .cmsx a.cmsx-btn:visited { font-size: 16px; }
.cmsx svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmsx-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.cmsx-in--narrow { max-width: 880px; }
.cmsx-pc { display: inline; }

/* 상단 배너: 기존 배너 사진은 그대로, 글자를 페이지 제목(H1)으로 */
#container > .sub_wr.cmsx > .subVisual .cmsx-vh1 {
  margin: 0; padding: 190px 24px 0; color: #fff; font-size: 50px; font-weight: 600; letter-spacing: -0.04em; text-align: center; line-height: 1.2;
}
#container > .sub_wr.cmsx > .subVisual .cmsx-vsub { margin: 12px 0 0; padding: 0 24px; color: #fff; font-size: 20px; font-weight: 300; letter-spacing: -0.02em; text-align: center; line-height: 1.5; }

/* 공통 구간 */
.cmsx-sec { padding: 80px 0; }
.cmsx-sec--tint { background: var(--x-tint); }
.cmsx-h2 { font-size: 32px; line-height: 1.3; font-weight: 700; color: var(--x-ink); letter-spacing: -0.03em; }
.cmsx-sub { margin-top: 10px !important; font-size: 16px; line-height: 1.7; color: var(--x-muted); }
.cmsx-note { margin-top: 20px !important; font-size: 14px; line-height: 1.6; color: var(--x-muted); }

/* 버튼 */
.cmsx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cmsx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid transparent; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.cmsx-btn svg { font-size: 18px; }
.cmsx-btn--primary { background: var(--x-yellow); color: #231a00; }
.cmsx-btn--primary:hover { background: #f2a900; }
.cmsx-btn--line { background: #fff; border-color: var(--x-blue); color: var(--x-blue); }
.cmsx-btn--line:hover { background: #eef2fb; }
.cmsx-btn--tel { background: transparent; color: var(--x-navy); padding: 0 12px; }
.cmsx-btn--light { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.cmsx-btn--light:hover { background: rgba(255,255,255,.1); }
.cmsx-btn--tel-light { background: transparent; color: #fff; padding: 0 12px; }
.cmsx-btn:focus-visible, .cmsx a:focus-visible, .cmsx summary:focus-visible { outline: 3px solid #4d7cff; outline-offset: 2px; }

/* 1. 소개 */
.cmsx-intro { padding: 72px 0 80px; }
.cmsx-intro__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cmsx-eyebrow { font-size: 15px; font-weight: 700; color: var(--x-blue); }
.cmsx-intro__title { margin-top: 12px !important; font-size: 36px; line-height: 1.35; font-weight: 800; color: var(--x-ink); letter-spacing: -0.04em; }
.cmsx-intro__lead { margin-top: 18px !important; font-size: 17px; line-height: 1.75; color: #3b4456; }
.cmsx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px !important; }
.cmsx-chips li { padding: 8px 14px; border-radius: 999px; background: #eef2fb; color: var(--x-blue); font-size: 14px; font-weight: 600; }
.cmsx-intro__visual { position: relative; height: 340px; border-radius: 24px; background: radial-gradient(circle at 70% 30%, #dfe8fb 0, #eef3fc 45%, #f7f9fd 100%); overflow: hidden; }
.cmsx-paycard {
  position: absolute; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center;
  width: 280px; padding: 20px 22px; box-sizing: border-box; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px rgba(11,47,107,.14);
}
.cmsx-paycard b { font-size: 24px; font-weight: 800; color: var(--x-navy); line-height: 1.2; }
.cmsx-paycard em { grid-column: 2; font-style: normal; font-size: 15px; color: var(--x-muted); }
.cmsx-paycard__ok { grid-row: 1 / span 2; position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--x-blue); }
.cmsx-paycard__ok::after { content: ''; position: absolute; left: 20px; top: 15px; width: 12px; height: 22px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.cmsx-paycard--1 { left: 8%; top: 34px; }
.cmsx-paycard--2 { left: 30%; top: 128px; }
.cmsx-paycard--3 { left: 12%; top: 222px; opacity: .92; }
/* 소개 오른쪽 그림(2026-10-18 A안): 박스에 맞춰 자르고 손·펜·서류가 보이게 */
.cmsx-intro__visual--photo { background: #eef2f8; }
.cmsx-intro__visual--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%; }

/* 카드 묶음 */
.cmsx-cards { display: grid; gap: 16px; margin-top: 32px !important; }
.cmsx-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmsx-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmsx-card { padding: 28px 24px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; }
.cmsx-card h3 { margin-top: 14px !important; font-size: 19px; line-height: 1.4; font-weight: 700; color: var(--x-ink); }
.cmsx-card p { margin-top: 8px !important; font-size: 15px; line-height: 1.7; color: var(--x-muted); }
.cmsx-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #eef2fb; color: var(--x-blue); font-size: 24px; }
.cmsx-why .cmsx-card h3 { margin-top: 10px !important; }
.cmsx-why__no { font-size: 15px; font-weight: 800; color: var(--x-blue); }

/* 3. 처리 흐름 */
.cmsx-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 32px !important; counter-reset: none; }
.cmsx-flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmsx-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmsx-flow li { position: relative; padding: 24px 20px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; }
.cmsx-flow li + li::before {
  content: ''; position: absolute; left: -12px; top: 50%; width: 10px; height: 10px; border-top: 2px solid #9aa9c4; border-right: 2px solid #9aa9c4; transform: translate(0, -50%) rotate(45deg);
}
.cmsx-flow li.is-key { border-color: var(--x-blue); background: #f2f6ff; }
.cmsx-flow__no { display: block; font-size: 14px; font-weight: 800; color: var(--x-blue); }
.cmsx-flow strong { display: block; margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--x-ink); }
.cmsx-flow em { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 8px; background: #eef2fb; font-style: normal; font-size: 13px; font-weight: 700; color: var(--x-navy); }
.cmsx-flow p { margin-top: 10px !important; font-size: 14px; line-height: 1.6; color: var(--x-muted); }

/* 4·6. 링크 목록(업종·부가서비스) */
.cmsx-links { display: grid; gap: 12px; margin-top: 28px !important; }
.cmsx-links--ind { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmsx-links--addon { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmsx-links a {
  position: relative; display: block; height: 100%; padding: 20px 44px 20px 20px; box-sizing: border-box; border: 1px solid var(--x-line); border-radius: 14px;
  background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.cmsx-links a:hover { border-color: var(--x-blue); box-shadow: 0 8px 20px rgba(11,47,107,.08); }
.cmsx-links strong { display: block; font-size: 17px; font-weight: 700; color: var(--x-ink); }
.cmsx-links span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--x-muted); }
.cmsx-links svg { position: absolute; right: 16px; top: 50%; margin-top: -9px; font-size: 18px; color: #8a97b0; }

/* 5. 관리 프로그램 */
.cmsx-tools { margin-top: 28px; padding: 28px 28px 24px; border-radius: var(--x-radius); background: var(--x-tint); }
.cmsx-tools h3 { font-size: 18px; font-weight: 700; color: var(--x-ink); }
.cmsx-tools ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin-top: 16px !important; }
.cmsx-tools li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; color: #3b4456; }
.cmsx-tools li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 7px; height: 12px; border: solid var(--x-blue); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* 7. 가입절차 */
.cmsx-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 32px !important; }
.cmsx-steps li { padding: 24px 20px; border-radius: var(--x-radius); border: 1px solid var(--x-line); background: #fff; }
.cmsx-steps span { font-size: 13px; font-weight: 800; color: var(--x-blue); letter-spacing: .02em; }
.cmsx-steps strong { display: block; margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--x-ink); }
.cmsx-steps p { margin-top: 8px !important; font-size: 14px; line-height: 1.6; color: var(--x-muted); word-break: break-all; }
.cmsx-steps p a { color: var(--x-blue); font-weight: 600; }

/* 8. 구비서류 */
.cmsx-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.cmsx-doc { padding: 28px; border-radius: var(--x-radius); background: #fff; border: 1px solid var(--x-line); }
.cmsx-doc h3 { font-size: 19px; font-weight: 700; color: var(--x-navy); }
.cmsx-doc ul { margin-top: 14px !important; }
.cmsx-doc li { position: relative; padding-left: 16px; font-size: 16px; line-height: 1.9; color: #3b4456; }
.cmsx-doc li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--x-blue); }

/* 9. 자주 묻는 질문 */
.cmsx-faq { margin-top: 24px; border-top: 1px solid var(--x-line); }
.cmsx-faq details { border-bottom: 1px solid var(--x-line); }
.cmsx-faq summary { position: relative; display: block; padding: 22px 44px 22px 0; cursor: pointer; list-style: none; }
.cmsx-faq summary::-webkit-details-marker { display: none; }
.cmsx-faq summary h3 { display: inline; font-size: 17px; line-height: 1.5; font-weight: 700; color: var(--x-ink); }
.cmsx-faq summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border: solid #7d8aa3; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s;
}
.cmsx-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.cmsx-faq details p { padding: 0 8px 22px 0; font-size: 15px; line-height: 1.75; color: #3b4456; }

/* 10. 마지막 행동 */
.cmsx-cta { padding: 64px 0; background: var(--x-navy); color: #fff; text-align: center; }
.cmsx-cta h2 { font-size: 30px; line-height: 1.35; font-weight: 800; color: #fff; }
.cmsx-cta p { margin-top: 10px !important; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.82); }
.cmsx-cta .cmsx-actions { justify-content: center; }

/* ---------- 효성CMS 소개(company/company.php, 2026-10-18) 전용 구간 ---------- */
.cmsx-sec dl, .cmsx-sec dd { margin: 0; }
.cmsx-h3 { margin-top: 48px !important; font-size: 21px; line-height: 1.4; font-weight: 700; color: var(--x-ink); }
.cmsx-h3 + .cmsx-links, .cmsx-h3 + .cmsx-history { margin-top: 18px !important; }
/* 숫자로 보는 효성CMS(공식 실적, 출처·기준일 함께) */
.cmsx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px !important; }
.cmsx-stats > div { padding: 26px 24px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; }
.cmsx-stats dt { font-size: 15px; font-weight: 600; color: var(--x-muted); }
.cmsx-stats dd { margin-top: 8px !important; font-size: 34px; line-height: 1.2; font-weight: 800; color: var(--x-navy); letter-spacing: -0.03em; }
.cmsx-stats small { margin-left: 2px; font-size: 18px; font-weight: 700; }
/* 결제수단 카드(누르면 서비스 안내로) */
.cmsx-card--link { position: relative; display: block; height: 100%; box-sizing: border-box; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cmsx-card--link:hover { border-color: var(--x-blue); box-shadow: 0 8px 20px rgba(11,47,107,.08); }
.cmsx-more { display: inline-flex; align-items: center; gap: 2px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--x-blue); }
.cmsx-more svg { font-size: 16px; }
/* 믿고 맡길 수 있는 이유: 운영 회사 + 보안 */
.cmsx-trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; margin-top: 28px; }
.cmsx-trust__co { padding: 28px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; }
.cmsx-trust__co h3 { font-size: 18px; font-weight: 700; color: var(--x-navy); }
.cmsx-trust__co dl { margin-top: 12px; }
.cmsx-trust__co dl > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--x-line); }
.cmsx-trust__co dl > div:last-child { border-bottom: 0; }
.cmsx-trust__co dt { font-size: 15px; color: var(--x-muted); }
.cmsx-trust__co dd { font-size: 15px; font-weight: 600; color: var(--x-ink); }
.cmsx-trust__partner { margin-top: 14px !important; padding: 12px 14px; border-radius: 10px; background: #eef2fb; font-size: 14px; line-height: 1.6; color: var(--x-navy); }
.cmsx-trust__sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cmsx-trust__sec li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 22px 20px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; }
.cmsx-trust__sec .cmsx-ico { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
.cmsx-trust__sec h3 { font-size: 16px; line-height: 1.45; font-weight: 700; color: var(--x-ink); }
.cmsx-trust__sec p { margin-top: 6px !important; font-size: 14px; line-height: 1.65; color: var(--x-muted); }
/* 걸어온 길 */
.cmsx-history { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cmsx-history li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 16px 18px; border: 1px solid var(--x-line); border-radius: 14px; background: #fff; }
.cmsx-history b { font-size: 16px; font-weight: 800; color: var(--x-blue); }
.cmsx-history span { font-size: 15px; line-height: 1.55; color: #3b4456; }
.cmsx-links--more { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- 장점(advantage.php)·이용효과(success_list.php) 전용 구간(2026-10-18) ---------- */
/* 바로 가기(#주소)로 옮겨 갈 때 위에 고정된 머리말(약 110px)에 제목이 가리지 않게 */
.cmsx section[id], .cmsx h2[id] { scroll-margin-top: 110px; }
/* 장점 소개 오른쪽: 네 가지 장점으로 바로 가기 */
.cmsx-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cmsx-jump a { display: block; height: 100%; padding: 22px 20px; box-sizing: border-box; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cmsx-jump a:hover { border-color: var(--x-blue); box-shadow: 0 8px 20px rgba(11,47,107,.08); }
.cmsx-jump strong { display: block; margin-top: 12px; font-size: 18px; font-weight: 700; color: var(--x-ink); }
.cmsx-jump span:last-child { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--x-muted); }
/* 장점 한 가지 = 그림 + 글(줄마다 좌우 바꿈) */
.cmsx-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.cmsx-feature--rev .cmsx-feature__media { order: 2; }
.cmsx-feature__media { position: relative; height: 380px; border-radius: 24px; background: #eef2f8; overflow: hidden; }
.cmsx-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmsx-feature__en { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--x-blue); }
.cmsx-feature .cmsx-h2 { margin-top: 8px !important; }
.cmsx-feature__lead { margin-top: 12px !important; font-size: 17px; line-height: 1.7; color: #3b4456; }
.cmsx-checks { margin-top: 20px !important; }
.cmsx-checks li { position: relative; padding: 7px 0 7px 28px; font-size: 16px; line-height: 1.6; color: #3b4456; }
.cmsx-checks li::before { content: ''; position: absolute; left: 5px; top: 13px; width: 7px; height: 12px; border: solid var(--x-blue); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cmsx-feature .cmsx-note a { color: var(--x-blue); font-weight: 600; }
/* 이용효과: 수금 방식 비교(숫자 없이 방식만) */
.cmsx-compare { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px !important; }
.cmsx-compare li { padding: 24px 22px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; }
.cmsx-compare li.is-key { border-color: var(--x-blue); background: #f2f6ff; }
.cmsx-compare h3 { font-size: 18px; font-weight: 700; color: var(--x-ink); }
.cmsx-compare li.is-key h3 { color: var(--x-navy); }
.cmsx-compare p { margin-top: 12px !important; font-size: 14px; line-height: 1.65; color: var(--x-muted); }
.cmsx-compare p b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--x-blue); }
/* 이용효과: 도입 전과 후 */
.cmsx-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.cmsx-ba__col { padding: 28px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; }
.cmsx-ba__col--after { border-color: var(--x-blue); background: #f2f6ff; }
.cmsx-ba__col h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: var(--x-ink); }
.cmsx-ba__col h3 span { padding: 4px 10px; border-radius: 8px; background: #e7ebf2; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #5b6475; }
.cmsx-ba__col--after h3 span { background: var(--x-blue); color: #fff; }
.cmsx-ba__col ul { margin-top: 14px !important; }
.cmsx-ba__col li { position: relative; padding: 7px 0 7px 26px; font-size: 15px; line-height: 1.6; color: #3b4456; }
.cmsx-ba__col--before li::before { content: ''; position: absolute; left: 6px; top: 18px; width: 9px; height: 2px; background: #9aa4b5; }
.cmsx-ba__col--after li::before { content: ''; position: absolute; left: 5px; top: 13px; width: 7px; height: 12px; border: solid var(--x-blue); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- 업종 페이지(Industry/*.php, 2026-10-18) 전용 구간 ---------- */
/* 소개 오른쪽 세로 그림(운영자 3D 그림, 세로형) */
.cmsx-intro__visual--tall { height: 470px; }
.cmsx-intro__visual--tall img { object-position: 50% 30%; }
/* 대상 업종·결제수단 */
.cmsx-fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 28px; }
.cmsx-fit__col { padding: 28px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; }
.cmsx-fit__col h3 { font-size: 18px; font-weight: 700; color: var(--x-navy); }
.cmsx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px !important; }
.cmsx-tags li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--x-line); background: var(--x-tint); font-size: 15px; color: #3b4456; }
.cmsx-fit__fees { margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--x-line); font-size: 15px; line-height: 1.7; color: #3b4456; }
.cmsx-fit__fees b { display: block; margin-bottom: 2px; font-size: 14px; color: var(--x-blue); }
.cmsx-pays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px !important; }
/* reset.css 의 a:link 12px 를 피하려고 글자 크기는 li 에 준다(새 구간 링크는 부모 크기를 따름) */
.cmsx-pays li, .cmsx-others li { font-size: 15px; }
.cmsx-pays a, .cmsx-pays__txt { position: relative; display: flex; align-items: center; gap: 8px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--x-line); background: #fff; font-size: 15px; font-weight: 600; color: var(--x-ink); text-decoration: none; }
.cmsx-pays a { padding-right: 34px; transition: border-color .15s; }
.cmsx-pays a:hover { border-color: var(--x-blue); }
.cmsx-pays svg { flex: none; font-size: 17px; color: var(--x-blue); }
.cmsx-pays a svg:last-child { position: absolute; right: 12px; top: 50%; margin-top: -8px; font-size: 16px; color: #8a97b0; }
.cmsx-pays__txt { background: var(--x-tint); }
/* 다른 업종 안내 */
.cmsx-others { display: flex; flex-wrap: wrap; gap: 8px; }
.cmsx-others a { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--x-line); background: #fff; font-size: 15px; font-weight: 600; color: var(--x-ink); text-decoration: none; transition: border-color .15s, color .15s; }
.cmsx-others a:hover { border-color: var(--x-blue); color: var(--x-blue); }
.cmsx-h3 + .cmsx-others { margin-top: 16px !important; }

/* ---------- 서류/가입절차(request/process.php, 2026-10-18) 전용 구간 ---------- */
/* 소개 오른쪽: 준비할 서류·보내실 곳 요약 */
.cmsx-docsum { padding: 30px 28px; border: 1px solid var(--x-line); border-radius: 24px; background: var(--x-tint); }
.cmsx-docsum h3 { font-size: 18px; font-weight: 700; color: var(--x-navy); }
.cmsx-docsum ol { margin-top: 14px !important; counter-reset: docsum; }
.cmsx-docsum ol li { position: relative; padding: 11px 0 11px 40px; border-bottom: 1px solid var(--x-line); font-size: 16px; font-weight: 600; color: var(--x-ink); counter-increment: docsum; }
.cmsx-docsum ol li::before { content: counter(docsum); position: absolute; left: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--x-blue); color: #fff; font-size: 14px; font-weight: 800; line-height: 28px; text-align: center; }
.cmsx-docsum__send { margin-top: 20px; }
.cmsx-docsum__send div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 6px 0; font-size: 16px; }
.cmsx-docsum__send dt { color: var(--x-muted); }
.cmsx-docsum__send dd { font-weight: 700; color: var(--x-ink); }
.cmsx-docsum__send a { color: var(--x-blue) !important; text-decoration: none; }
.cmsx-docsum__note { margin-top: 12px !important; font-size: 14px; line-height: 1.6; color: var(--x-muted); }
/* 가입절차 자세히: 세로 단계 */
.cmsx-timeline { margin-top: 32px !important; }
.cmsx-timeline > li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding-bottom: 28px; }
.cmsx-timeline > li::before { content: ''; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: #d5ddeb; }
.cmsx-timeline > li:last-child { padding-bottom: 0; }
.cmsx-timeline > li:last-child::before { display: none; }
.cmsx-timeline__no { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid var(--x-blue); font-size: 15px; font-weight: 800; color: var(--x-blue); }
.cmsx-timeline > li.is-key .cmsx-timeline__no { background: var(--x-blue); color: #fff; }
.cmsx-timeline__body { padding: 22px 24px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; }
.cmsx-timeline__body h3 { font-size: 19px; font-weight: 700; color: var(--x-ink); }
.cmsx-timeline__body > p { margin-top: 6px !important; font-size: 15px; line-height: 1.7; color: var(--x-muted); }
.cmsx-timeline__body ul { margin-top: 10px !important; }
.cmsx-timeline__body li { position: relative; padding: 4px 0 4px 18px; font-size: 15px; line-height: 1.6; color: #3b4456; }
.cmsx-timeline__body li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--x-blue); }
.cmsx-timeline__body a { color: var(--x-blue) !important; font-weight: 600; }
/* 화면 읽기 전용 글자(단계 번호) */
.cmsx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 옅은 배경 구간 안의 확인 목록은 흰 상자로 */
.cmsx-tools--white { background: #fff; border: 1px solid var(--x-line); }
.cmsx-tools--white ul { margin-top: 0 !important; }
/* 서류 보내는 방법 */
.cmsx-send { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.cmsx-send > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 20px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; font-size: 17px; }
.cmsx-send .cmsx-ico { grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
.cmsx-send b { font-size: 14px; font-weight: 600; color: var(--x-muted); }
.cmsx-send span:last-child, .cmsx-send a { font-weight: 700; color: var(--x-ink) !important; text-decoration: none; word-break: break-all; }

/* ---------- 가입신청(request/request.php + theme/new/rgb.php, 2026-10-18) — 폼 기능(이름·숨김 칸·스크립트)은 그대로, 모양만 ---------- */
.cmsx-apply { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.cmsx-form { padding: 36px 40px 40px; border: 1px solid var(--x-line); border-radius: 24px; background: #fff; box-shadow: 0 10px 30px rgba(11,47,107,.06); }
.cmsx-form__head h2 { font-size: 26px; font-weight: 800; color: var(--x-ink); letter-spacing: -0.03em; }
.cmsx-form__head p { margin-top: 8px !important; font-size: 15px; line-height: 1.6; color: var(--x-muted); }
.cmsx-form__head p b { color: #d0312d; font-weight: 700; }
/* rgb.php 안쪽 표를 카드형 입력칸으로 */
.cmsx-form .board_list_wrap3 { margin-top: 20px; }
.cmsx-form .table_wr1 { width: 100%; border: 0; border-collapse: collapse; font-family: inherit; }
.cmsx-form .table_wr1 caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cmsx-form .table_wr1 th, .cmsx-form .table_wr1 td { border: 0; border-bottom: 1px solid #edf0f5; background: none; }
.cmsx-form .table_wr1 th { width: 190px; padding: 18px 16px 18px 0; white-space: nowrap; vertical-align: middle; font-size: 15px; font-weight: 600; color: var(--x-ink); }
.cmsx-form .table_wr1 td { padding: 14px 0; font-size: 15px; color: #3b4456; }
.cmsx-form .table_wr1 td.cms-sec { padding: 26px 0 10px; border-bottom: 2px solid var(--x-navy); background: none; font-size: 17px; font-weight: 800; color: var(--x-navy); }
.cmsx-form .table_wr1 tr:first-child td.cms-sec { padding-top: 4px; }
.cmsx-form .table_wr1 th .cms-req { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: #fdecec; color: #c62828; font-size: 11px; font-weight: 700; font-style: normal; vertical-align: 1px; }
.cmsx-form .int_field, .cmsx-form .int_add {
  height: 50px; width: 100%; max-width: 360px; padding: 0 14px; box-sizing: border-box; border: 1px solid #cfd6e3; border-radius: 12px; background: #fff;
  font-family: inherit; font-size: 16px; color: var(--x-ink); transition: border-color .15s, box-shadow .15s;
}
.cmsx-form select.int_field { padding-right: 8px; }
.cmsx-form .int_field.w_400 { max-width: 520px; width: 100% !important; }
.cmsx-form .int_field.w_110 { width: 110px !important; max-width: none; }
.cmsx-form .int_field:focus { border-color: var(--x-blue); box-shadow: 0 0 0 3px rgba(31,58,138,.15); outline: none; }
.cmsx-form .int_field::placeholder { color: #9aa3b2; }
.cmsx-form .table_wr1 td span.cms-radio { display: flex; gap: 6px; margin: 8px 0 0; padding: 0; }
.cmsx-form .table_wr1 td .cms-radio label { display: inline-flex; align-items: center; gap: 6px; height: 50px; margin: 0; padding: 0 16px; border: 1px solid #cfd6e3; border-radius: 12px; font-size: 15px; cursor: pointer; }
.cmsx-form .table_wr1 td .cms-radio label:has(input:checked) { border-color: var(--x-blue); background: #f2f6ff; color: var(--x-navy); font-weight: 700; }
.cmsx-form .table_wr1 td .cms-radio input { width: 18px !important; height: 18px; margin: 0; accent-color: var(--x-blue); }
.cmsx-form .provision2 { display: block; margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: var(--x-tint); text-align: left; }
.cmsx-form .provision2 label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--x-ink); }
.cmsx-form .provision2 label input { width: 20px; height: 20px; margin: 0; accent-color: var(--x-blue); }
.cmsx-form .provision2 label span { margin: 0; font-size: 15px; vertical-align: 0; }
.cmsx-form .provision2 a, .cmsx-form .provision2 a:link, .cmsx-form .provision2 a:visited {
  display: inline-block !important; width: auto !important; height: auto !important; margin-left: 10px !important; padding: 6px 12px !important; border: 1px solid #cfd6e3 !important; border-radius: 8px !important;
  background: #fff !important; color: var(--x-blue) !important; font-size: 13px !important; font-weight: 600; line-height: 1.4 !important; text-decoration: none;
}
.cmsx-form .receive-btn2 { margin-top: 20px; text-align: left; }
.cmsx-form .receive-btn2 input {
  width: 100%; height: 58px; padding: 0; border: 0; border-radius: 14px; background: var(--x-yellow); color: #231a00;
  font-family: inherit; font-size: 18px; font-weight: 800; cursor: pointer; transition: background-color .15s;
}
.cmsx-form .receive-btn2 input:hover { background: #f2a900; }
.cmsx-form .receive-btn2 input:focus-visible { outline: 3px solid #4d7cff; outline-offset: 2px; }
.cmsx-form__safe { margin-top: 12px !important; font-size: 13px; line-height: 1.6; color: var(--x-muted); text-align: center; }
/* 오른쪽 안내 */
.cmsx-apply-aside { position: sticky; top: 130px; display: grid; gap: 16px; }
.cmsx-apply-aside > div { padding: 24px; border: 1px solid var(--x-line); border-radius: 20px; background: var(--x-tint); }
.cmsx-apply-aside h3 { font-size: 17px; font-weight: 700; color: var(--x-navy); }
.cmsx-apply-aside ol { margin-top: 12px !important; counter-reset: apply; }
.cmsx-apply-aside ol li { position: relative; padding: 8px 0 8px 34px; font-size: 15px; line-height: 1.5; color: var(--x-ink); counter-increment: apply; }
.cmsx-apply-aside ol li::before { content: counter(apply); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--x-blue); color: #fff; font-size: 13px; font-weight: 800; line-height: 24px; text-align: center; }
.cmsx-apply-aside ol li small { display: block; font-size: 13px; color: var(--x-muted); }
.cmsx-apply-aside ul { margin-top: 10px !important; }
.cmsx-apply-aside ul li { position: relative; padding: 4px 0 4px 16px; font-size: 15px; color: #3b4456; }
.cmsx-apply-aside ul li::before { content: ''; position: absolute; left: 3px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--x-blue); }
.cmsx-apply-aside p { margin-top: 10px !important; font-size: 14px; line-height: 1.6; color: var(--x-muted); }
.cmsx-apply-aside a.cmsx-more, .cmsx-apply-aside a.cmsx-more:link { margin-top: 12px; font-size: 14px; text-decoration: none; }
.cmsx-apply-aside .cmsx-btn { width: 100%; margin-top: 14px; }

/* 태블릿 */
@media screen and (max-width: 1199px) {
  .cmsx-apply { grid-template-columns: 1fr; }
  .cmsx-apply-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmsx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmsx-trust { grid-template-columns: 1fr; }
  .cmsx-history { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmsx-feature { gap: 32px; }
  .cmsx-feature__media { height: 300px; }
  .cmsx-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmsx-intro__visual--tall { height: 380px; }
  .cmsx-intro__grid { grid-template-columns: 1fr; gap: 32px; }
  .cmsx-intro__visual { height: 300px; }
  .cmsx-cards--4, .cmsx-links--ind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmsx-flow, .cmsx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmsx-flow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmsx-flow li + li::before { display: none; }
}

/* 모바일 */
@media screen and (max-width: 767px) {
  .cmsx-pc { display: none; }
  .cmsx-in { padding: 0 20px; }
  #container > .sub_wr.cmsx > .subVisual .cmsx-vh1 { padding: 92px 20px 0; font-size: 26px; font-weight: 700; }
  #container > .sub_wr.cmsx > .subVisual .cmsx-vsub { margin-top: 6px; padding: 0 20px; font-size: 14px; font-weight: 400; line-height: 1.5; }
  .cmsx-sec { padding: 52px 0; }
  .cmsx-intro { padding: 40px 0 52px; }
  .cmsx-h2 { font-size: 24px; }
  .cmsx-sub { font-size: 15px; }
  .cmsx-intro__title { font-size: 25px; line-height: 1.4; }
  .cmsx-intro__lead { font-size: 16px; }
  .cmsx-actions { gap: 8px; }
  .cmsx-actions .cmsx-btn { flex: 1 1 calc(50% - 4px); }
  .cmsx-actions .cmsx-btn--tel, .cmsx-actions .cmsx-btn--tel-light { flex-basis: 100%; }
  .cmsx-intro__visual { height: 236px; border-radius: 18px; }
  .cmsx-paycard { width: 220px; padding: 14px 16px; grid-template-columns: 44px 1fr; column-gap: 12px; border-radius: 16px; }
  .cmsx-paycard b { font-size: 19px; }
  .cmsx-paycard em { font-size: 13px; }
  .cmsx-paycard__ok { width: 44px; height: 44px; }
  .cmsx-paycard__ok::after { left: 16px; top: 11px; width: 9px; height: 18px; border-width: 0 3px 3px 0; }
  .cmsx-paycard--1 { left: 6%; top: 20px; }
  .cmsx-paycard--2 { left: 22%; top: 88px; }
  .cmsx-paycard--3 { left: 9%; top: 156px; }
  .cmsx-cards--4, .cmsx-cards--3, .cmsx-links--ind, .cmsx-links--addon, .cmsx-docs, .cmsx-tools ul { grid-template-columns: 1fr; }
  .cmsx-cards { margin-top: 24px !important; gap: 12px; }
  .cmsx-card { padding: 22px 20px; }
  /* 한눈에 보기: 아이콘 왼쪽·글 오른쪽으로 높이 줄이기 */
  .cmsx-cards--4 .cmsx-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .cmsx-cards--4 .cmsx-ico { grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
  .cmsx-cards--4 .cmsx-card h3 { margin-top: 0 !important; font-size: 17px; }
  .cmsx-cards--4 .cmsx-card p { grid-column: 2; margin-top: 4px !important; font-size: 14px; }
  .cmsx-links--ind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmsx-links--ind a { padding: 16px 32px 16px 16px; }
  .cmsx-links--ind strong { font-size: 16px; }
  .cmsx-links--ind svg { right: 10px; }
  /* 흐름·절차: 세로로 쌓고 왼쪽 선으로 잇기 */
  .cmsx-flow, .cmsx-steps { grid-template-columns: 1fr; gap: 10px; }
  .cmsx-flow li, .cmsx-steps li { padding: 18px 18px 18px 20px; }
  .cmsx-flow strong, .cmsx-steps strong { font-size: 17px; }
  .cmsx-tools { padding: 22px 20px; }
  .cmsx-doc { padding: 22px 20px; }
  .cmsx-faq summary { padding: 18px 36px 18px 0; }
  .cmsx-faq summary h3 { font-size: 16px; }
  .cmsx-cta { padding: 48px 0; }
  .cmsx-cta h2 { font-size: 23px; }
  /* 효성CMS 소개 */
  .cmsx-h3 { margin-top: 36px !important; font-size: 19px; }
  .cmsx-stats { gap: 10px; margin-top: 22px !important; }
  .cmsx-stats > div { padding: 18px 16px; }
  .cmsx-stats dt { font-size: 14px; }
  .cmsx-stats dd { margin-top: 4px !important; font-size: 24px; }
  .cmsx-stats small { font-size: 15px; }
  .cmsx-methods .cmsx-card--link, .cmsx-modules .cmsx-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .cmsx-methods .cmsx-ico, .cmsx-modules .cmsx-ico { grid-row: 1 / span 3; width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
  .cmsx-methods .cmsx-card h3, .cmsx-modules .cmsx-card h3 { margin-top: 0 !important; font-size: 17px; }
  .cmsx-methods .cmsx-card p, .cmsx-modules .cmsx-card p { grid-column: 2; margin-top: 4px !important; font-size: 14px; }
  .cmsx-methods .cmsx-more { grid-column: 2; margin-top: 8px; }
  .cmsx-trust__co { padding: 22px 20px; }
  .cmsx-trust__co dl > div { grid-template-columns: 104px minmax(0, 1fr); padding: 10px 0; }
  .cmsx-trust__co dt, .cmsx-trust__co dd { font-size: 14px; }
  .cmsx-trust__sec { grid-template-columns: 1fr; gap: 10px; }
  .cmsx-trust__sec li { padding: 18px; }
  .cmsx-history { grid-template-columns: 1fr; gap: 8px; }
  .cmsx-history li { grid-template-columns: 48px minmax(0, 1fr); padding: 13px 16px; }
  .cmsx-history b { font-size: 15px; }
  .cmsx-history span { font-size: 14px; }
  .cmsx-links--more { grid-template-columns: 1fr; }
  /* 장점·이용효과 */
  .cmsx-jump { gap: 10px; }
  .cmsx-jump a { padding: 16px; }
  .cmsx-jump .cmsx-ico { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }
  .cmsx-jump strong { margin-top: 10px; font-size: 16px; }
  .cmsx-jump span:last-child { font-size: 13px; }
  .cmsx-feature { grid-template-columns: 1fr; gap: 22px; }
  .cmsx-feature--rev .cmsx-feature__media { order: 0; }
  .cmsx-feature__media { height: 220px; border-radius: 18px; }
  .cmsx-feature__lead { font-size: 16px; }
  .cmsx-checks { margin-top: 14px !important; }
  .cmsx-checks li { font-size: 15px; padding: 6px 0 6px 26px; }
  .cmsx-compare { grid-template-columns: 1fr; gap: 10px; margin-top: 22px !important; }
  .cmsx-compare li { padding: 18px; }
  .cmsx-compare h3 { font-size: 17px; }
  .cmsx-compare p { margin-top: 8px !important; }
  .cmsx-ba { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .cmsx-ba__col { padding: 22px 20px; }
  .cmsx-ba__col li { font-size: 15px; }
  /* 업종 */
  .cmsx-intro__visual--tall { height: 300px; }
  .cmsx-fit { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .cmsx-fit__col { padding: 22px 20px; }
  .cmsx-tags li { padding: 7px 12px; font-size: 14px; }
  .cmsx-pays { grid-template-columns: 1fr; }
  .cmsx-others a { padding: 9px 14px; }
  .cmsx-others li { font-size: 14px; }
  /* 서류/가입절차 */
  .cmsx-docsum { padding: 22px 20px; border-radius: 18px; }
  .cmsx-docsum ol li { font-size: 15px; }
  .cmsx-docsum__send div { font-size: 15px; }
  .cmsx-timeline { margin-top: 22px !important; }
  .cmsx-timeline > li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding-bottom: 16px; }
  .cmsx-timeline > li::before { left: 19px; top: 40px; }
  .cmsx-timeline__no { width: 40px; height: 40px; font-size: 13px; }
  .cmsx-timeline__body { padding: 16px 16px; }
  .cmsx-timeline__body h3 { font-size: 17px; }
  .cmsx-timeline__body > p, .cmsx-timeline__body li { font-size: 14px; }
  .cmsx-send { grid-template-columns: 1fr; gap: 10px; }
  .cmsx-send > div { padding: 16px; }
  /* 가입신청: 이름표를 입력칸 위에, 한 줄에 하나씩 */
  .cmsx-form { padding: 24px 18px 26px; border-radius: 18px; }
  .cmsx-form__head h2 { font-size: 22px; }
  .cmsx-form .table_wr1, .cmsx-form .table_wr1 tbody, .cmsx-form .table_wr1 tr, .cmsx-form .table_wr1 th, .cmsx-form .table_wr1 td { display: block; width: auto; }
  .cmsx-form .table_wr1 colgroup { display: none; }
  .cmsx-form .table_wr1 th { display: block !important; padding: 14px 0 6px; border-bottom: 0; text-align: left; }
  .cmsx-form .table_wr1 td { padding: 0 0 12px; text-align: left; }
  .cmsx-form .table_wr1 td.cms-sec { padding: 18px 0 8px; margin-bottom: 4px; }
  .cmsx-form .int_field, .cmsx-form .int_field.w_400 { max-width: none; width: 100% !important; }
  .cmsx-form .int_field.w_110 { width: calc((100% - 32px) / 3) !important; padding: 0 8px; }
  .cmsx-form .table_wr1 td span.cms-radio { display: flex; margin: 10px 0 0; padding: 0; }
  .cmsx-form .table_wr1 td .cms-radio label { flex: 1; justify-content: center; }
  .cmsx-form .provision2 { padding: 14px 14px; }
  .cmsx-form .provision2 label span { font-size: 14px; }
  .cmsx-form .provision2 a { margin: 10px 0 0 28px !important; }
  .cmsx-apply-aside { grid-template-columns: 1fr; }
  .cmsx-apply-aside > div { padding: 20px 18px; }
}

/* ---------- 내용 인쇄(2026-10-18, 운영자 요청) ----------
   '내용 인쇄' 버튼(소개 구간, 가입신청 오른쪽). 화면에서는 인쇄 전용 머리·꼬리를 숨기고, 모바일(767px 이하)에서는 버튼을 숨긴다.
   인쇄할 때는 머리말·메뉴·떠 있는 버튼·하단·버튼·장식 카드를 빼고, 배너 제목을 검은 글자로, 질문은 모두 펼친다(sub01.php 스크립트). */
.cmsx-print-only { display: none; }
@media screen and (max-width: 767px) {
  .cmsx-actions .cmsx-print { display: none; }
}
@page { margin: 14mm 12mm; }
@media print {
  html, body { background: #fff !important; }
  body > *:not(#wrapper), #wrapper > *:not(#container), #container > *:not(.sub_wr) { display: none !important; }
  #wrapper, #container { margin: 0 !important; padding: 0 !important; width: auto !important; }
  .cmsx .locationWrap, .cmsx-actions, .cmsx-intro__visual, .cmsx-links svg, .cmsx-cta { display: none !important; }
  .cmsx * { box-shadow: none !important; }
  .cmsx { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cmsx-print-only { display: block !important; }
  .cmsx-print-head { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid #0b2f6b; font-size: 11px; color: #0b2f6b; }
  .cmsx-print-foot { margin-top: 18px; padding: 10px 12px; border: 1px solid #c9d2e3; border-radius: 8px; font-size: 12px; line-height: 1.6; color: #1b2333; break-inside: avoid; }
  #container > .sub_wr.cmsx > .subVisual { background: none !important; height: auto !important; }
  #container > .sub_wr.cmsx > .subVisual .cmsx-vh1 { padding: 0 !important; color: #0b2f6b !important; font-size: 28px !important; font-weight: 800; text-align: left; }
  #container > .sub_wr.cmsx > .subVisual .cmsx-vsub { margin-top: 4px !important; padding: 0 !important; color: #3b4456 !important; font-size: 14px !important; text-align: left; }
  .cmsx-in, .cmsx-in--narrow { max-width: none !important; padding: 0 !important; }
  .cmsx-intro, .cmsx-sec { padding: 16px 0 !important; background: #fff !important; }
  .cmsx-intro__grid { display: block !important; }
  .cmsx-intro__title { font-size: 20px !important; }
  .cmsx-intro__lead { font-size: 13px !important; }
  .cmsx-h2 { font-size: 18px !important; break-after: avoid; page-break-after: avoid; }
  .cmsx-sub, .cmsx-note { font-size: 12px !important; }
  .cmsx-cards, .cmsx-flow, .cmsx-steps, .cmsx-links, .cmsx-docs { margin-top: 10px !important; gap: 8px !important; }
  .cmsx-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cmsx-cards--3, .cmsx-links--addon { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .cmsx-flow, .cmsx-steps { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .cmsx-flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .cmsx-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .cmsx-links--ind { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .cmsx-docs, .cmsx-tools ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cmsx-card, .cmsx-flow li, .cmsx-steps li, .cmsx-links a, .cmsx-doc, .cmsx-tools, .cmsx-faq details { break-inside: avoid; page-break-inside: avoid; }
  .cmsx-card, .cmsx-flow li, .cmsx-steps li, .cmsx-doc, .cmsx-tools { padding: 10px 12px !important; }
  .cmsx-links a { padding: 8px 10px !important; }
  .cmsx-card h3, .cmsx-flow strong, .cmsx-steps strong, .cmsx-links strong, .cmsx-doc h3, .cmsx-tools h3 { font-size: 14px !important; }
  .cmsx-card p, .cmsx-flow p, .cmsx-steps p, .cmsx-links span, .cmsx-doc li, .cmsx-tools li, .cmsx-faq details p { font-size: 12px !important; line-height: 1.55 !important; }
  .cmsx-flow li + li::before { display: none; }
  .cmsx-faq summary { padding: 8px 0 !important; }
  .cmsx-faq summary::after { display: none; }
  .cmsx-faq summary h3 { font-size: 13px !important; }
  .cmsx-faq details p { padding-bottom: 8px !important; }
  .cmsx a { text-decoration: none; }
  /* 효성CMS 소개 */
  .cmsx-h3 { margin-top: 14px !important; font-size: 15px !important; break-after: avoid; page-break-after: avoid; }
  .cmsx-h3 + .cmsx-links, .cmsx-h3 + .cmsx-history { margin-top: 8px !important; }
  .cmsx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 10px !important; }
  .cmsx-stats > div { padding: 10px 12px !important; }
  .cmsx-stats dt { font-size: 12px !important; }
  .cmsx-stats dd { font-size: 20px !important; }
  .cmsx-stats small { font-size: 12px !important; }
  .cmsx-more { display: none !important; }
  .cmsx-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) !important; gap: 8px !important; margin-top: 10px !important; }
  .cmsx-trust__co { padding: 10px 12px !important; }
  .cmsx-trust__co h3, .cmsx-trust__sec h3 { font-size: 13px !important; }
  .cmsx-trust__co dl > div { padding: 5px 0 !important; }
  .cmsx-trust__co dt, .cmsx-trust__co dd, .cmsx-trust__partner, .cmsx-trust__sec p, .cmsx-history span { font-size: 12px !important; line-height: 1.5 !important; }
  .cmsx-trust__partner { padding: 6px 8px !important; }
  .cmsx-trust__sec { gap: 8px !important; }
  .cmsx-trust__sec li { padding: 8px 10px !important; grid-template-columns: 30px minmax(0, 1fr) !important; }
  .cmsx-trust__sec .cmsx-ico { width: 28px !important; height: 28px !important; font-size: 15px !important; }
  .cmsx-history { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .cmsx-history li { padding: 6px 10px !important; grid-template-columns: 40px minmax(0, 1fr) !important; }
  .cmsx-history b { font-size: 13px !important; }
  .cmsx-links--more { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cmsx-stats > div, .cmsx-trust__co, .cmsx-trust__sec li, .cmsx-history li { break-inside: avoid; page-break-inside: avoid; }
  /* 장점·이용효과 */
  .cmsx-jump, .cmsx-feature__media { display: none !important; }
  .cmsx-feature { display: block !important; }
  .cmsx-feature__lead, .cmsx-checks li, .cmsx-compare p, .cmsx-ba__col li { font-size: 12px !important; line-height: 1.55 !important; }
  .cmsx-checks { margin-top: 6px !important; }
  .cmsx-checks li { padding: 2px 0 2px 20px !important; }
  .cmsx-checks li::before, .cmsx-ba__col--after li::before { top: 5px !important; width: 5px !important; height: 9px !important; }
  .cmsx-compare { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 10px !important; }
  .cmsx-compare li, .cmsx-ba__col { padding: 10px 12px !important; break-inside: avoid; page-break-inside: avoid; }
  .cmsx-compare h3, .cmsx-ba__col h3 { font-size: 14px !important; }
  .cmsx-ba { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 10px !important; }
  .cmsx-ba__col li { padding: 2px 0 2px 20px !important; }
  .cmsx-ba__col--before li::before { top: 10px !important; }
  /* 업종 */
  .cmsx-fit { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 10px !important; }
  .cmsx-fit__col { padding: 10px 12px !important; break-inside: avoid; page-break-inside: avoid; }
  .cmsx-fit__col h3 { font-size: 14px !important; }
  .cmsx-tags, .cmsx-pays { margin-top: 6px !important; gap: 4px !important; }
  .cmsx-tags li, .cmsx-pays a, .cmsx-pays__txt, .cmsx-fit__fees { padding: 3px 8px !important; font-size: 12px !important; }
  .cmsx-pays svg { font-size: 12px !important; }
  .cmsx-pays a svg:last-child { display: none; }
  .cmsx-others-title, .cmsx-others { display: none !important; }
  /* 서류/가입절차: 서류 요약은 인쇄에도 남긴다(소개 오른쪽 그림이 아니라 내용) */
  .cmsx-docsum { margin-top: 10px; padding: 10px 12px !important; break-inside: avoid; }
  .cmsx-docsum h3, .cmsx-timeline__body h3 { font-size: 14px !important; }
  .cmsx-docsum ol li, .cmsx-docsum__send div, .cmsx-docsum__note, .cmsx-timeline__body > p, .cmsx-timeline__body li, .cmsx-send span:last-child, .cmsx-send a, .cmsx-send b { font-size: 12px !important; }
  .cmsx-docsum ol li { padding: 4px 0 4px 26px !important; }
  .cmsx-docsum ol li::before { width: 18px !important; height: 18px !important; margin-top: -9px !important; line-height: 18px !important; font-size: 11px !important; }
  .cmsx-timeline { margin-top: 10px !important; }
  .cmsx-timeline > li { grid-template-columns: 30px minmax(0, 1fr) !important; column-gap: 8px !important; padding-bottom: 6px !important; break-inside: avoid; }
  .cmsx-timeline > li::before { display: none; }
  .cmsx-timeline__no { width: 28px !important; height: 28px !important; font-size: 11px !important; }
  .cmsx-timeline__body { padding: 8px 10px !important; }
  .cmsx-send { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .cmsx-send > div { padding: 8px 10px !important; grid-template-columns: 1fr !important; }
  .cmsx-send .cmsx-ico { display: none; }
}

/* 이용기관 로그인(customer/login.php, 2026-10-18) — 프로그램 8개 카드, 모두 새 창 */
.cmsx-logins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px !important; }
.cmsx-logins a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; box-sizing: border-box;
  padding: 22px 20px 20px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cmsx-logins a:hover { border-color: #b8c6e6; box-shadow: 0 12px 28px rgba(15,35,80,.10); transform: translateY(-2px); }
.cmsx-logins strong { margin-top: 6px; font-size: 18px; line-height: 1.35; font-weight: 800; color: var(--x-ink); }
.cmsx-logins__host { font-size: 13px; line-height: 1.5; color: var(--x-muted); }
.cmsx-sec .cmsx-logins__url { word-break: break-all; } /* 긴 주소가 좁은 카드 밖으로 넘치지 않게 */
.cmsx-logins__btn { margin-top: auto; display: inline-flex; align-items: center; gap: 2px; padding: 8px 12px 8px 16px; border-radius: 999px; background: var(--x-navy); color: #fff; font-size: 14px; font-weight: 700; }
.cmsx-logins a:hover .cmsx-logins__btn { background: var(--x-blue); }
@media screen and (max-width: 1023px) { .cmsx-logins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media screen and (max-width: 767px) {
  .cmsx-logins { margin-top: 20px !important; }
  .cmsx-logins a { padding: 16px 14px; gap: 6px; border-radius: 14px; }
  .cmsx-logins strong { font-size: 16px; margin-top: 2px; }
  .cmsx-logins__host { font-size: 12px; }
  .cmsx-logins__btn { font-size: 13px; padding: 6px 10px 6px 12px; }
}