@charset "utf-8";
/* =========================================================
   모바일/인게임 고객센터 공통 스타일
   기준: Figma "2608 인게임고객센터" (PC 1920 / Tablet 768 / Mobile 360)
   ========================================================= */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* ---------- 답변 본문용 웹폰트 ----------
   Web.AP 답변 에디터(SynapEditor) 글꼴 목록에 있는 웹폰트. nexon.cs.front(font.css)·레거시 ncs.css와 동일한 정의.
   답변 HTML의 인라인 font-family가 참조할 때만 다운로드되며, 사이트 기본 폰트(Pretendard)에는 영향 없음.
   (.cs-body 폴백 스택에는 아래 글꼴명을 넣지 않는다. 넣으면 Pretendard 로드 전 폴백 단계에서 웹폰트가 내려받아진다.) */
@font-face { font-family: NotoSansKR; font-weight: 400; src: url(../font/NotoSansKR-Regular.woff) format('woff'); }
@font-face { font-family: NotoSansKR; font-weight: 700; src: url(../font/NotoSansKR-Bold.woff) format('woff'); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 400; src: url(../font/NotoSansKR-Regular.woff) format('woff'); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 700; src: url(../font/NotoSansKR-Bold.woff) format('woff'); }
@font-face { font-family: 'NotoSansKR-Regular'; src: url(../font/NotoSansKR-Regular.woff) format('woff'); }
@font-face { font-family: 'NotoSansKR-Light'; font-display: swap; src: url(../font/NotoSansKR-Light.woff) format('woff'); }
@font-face { font-family: 'NotoSansKR-Bold'; font-weight: 700; font-display: swap; src: url(../font/NotoSansKR-Bold.woff) format('woff'); }
@font-face { font-family: 'NEXONLv1GothicRegular'; src: url("../font/NEXONLv1GothicOTF.eot"); src: url("../font/NEXONLv1GothicOTF.eot?#iefix") format("embedded-opentype"), url("../font/NEXONLv1GothicOTF.woff") format("woff"); }
@font-face { font-family: 'NEXONLv1GothicOTFLight'; src: url("../font/NEXONLv1GothicOTFLight.eot"); src: url("../font/NEXONLv1GothicOTFLight.eot?#iefix") format("embedded-opentype"), url("../font/NEXONLv1GothicOTFLight.woff") format("woff"); }
@font-face { font-family: 'NEXONLv1GothicOTFBold'; src: url("../font/NEXONLv1GothicOTFBold.eot"); src: url("../font/NEXONLv1GothicOTFBold.eot?#iefix") format("embedded-opentype"), url("../font/NEXONLv1GothicOTFBold.woff") format("woff"); }
@font-face { font-family: '승리의깃발'; src: url(../font/WarsOfPrasia.woff) format('woff'); }
@font-face { font-family: '[프전]승리의깃발'; src: url(../font/WarsOfPrasia.woff) format('woff'); }
@font-face { font-family: '비트비트체'; src: url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.woff') format('woff'), url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.woff2') format('woff2'); }
@font-face { font-family: '[던파]비트비트체'; src: url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.woff') format('woff'), url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.woff2') format('woff2'); }
@font-face { font-family: '[던파]연단된칼날-Bold'; src: url(../font/DNFForgedBlade-Bold.woff) format('woff'); }
@font-face { font-family: '[던파]연단된칼날-Medium'; src: url(../font/DNFForgedBlade-Medium.woff) format('woff'); }
@font-face { font-family: '[던파]연단된칼날-Light'; src: url(../font/DNFForgedBlade-Light.woff) format('woff'); }
@font-face { font-family: '[마비노기]마비옛체'; src: url(../font/MabinogiClassic.woff2) format('woff2'), url(../font/MabinogiClassic.woff) format('woff'); }

/* ---------- reset / base ---------- */
.cs-body {
    margin: 0;
    background: #fff;
    color: #17191C;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 14px;
    line-height: 1.57;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;
}
/* 리셋은 요소 선택자(낮은 우선순위)로만 선언한다. 클래스 규칙이 항상 우선하도록 하기 위함. */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { vertical-align: middle; }
button { margin: 0; padding: 0; border: 0; background: none; font-family: inherit; color: inherit; cursor: pointer; }
input, textarea { font-family: inherit; margin: 0; }
em { font-style: normal; }
.cs-body.cs-no-scroll { overflow: hidden; }
.cs-blind { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

.cs-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.cs-body:not(.cs-ingame) .cs-wrap { min-height: 100dvh; } /* iOS Safari 툴바 노출 시 하단 버튼/푸터 가림 방지 (인게임 웹뷰 제외) */
.cs-main { flex: 1 0 auto; display: flex; flex-direction: column; }
.cs-main > * { flex: 1 0 auto; }

.cs-only-pc { display: inline; }
.cs-only-mobile { display: none; }

/* ---------- GNB ---------- */
.cs-gnb { background: #17191C; color: #fff; }
.cs-theme-main .cs-gnb { background: #1181F4; }
.cs-gnb__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 40px; }
.cs-gnb__logo { display: inline-flex; align-items: center; gap: 8px; }
.cs-gnb__logo-icon { width: 32px; height: 32px; }
.cs-gnb__logo-text { width: 100px; height: 25px; }
.cs-gnb__right { display: flex; align-items: center; gap: 36px; } /* 메뉴 ↔ 로그인 버튼 36 (디자이너 요청, 뱃지 유무와 무관) */
.cs-gnb__menu { display: flex; align-items: center; gap: 36px; margin-top: 4px; } /* Figma 5770:27982: 메뉴 프레임 padding-top 24 → 텍스트 중심 y=38 */
.cs-gnb__link { position: relative; display: inline-block; font-size: 18px; font-weight: 500; line-height: 28px; color: #fff; white-space: nowrap; }
.cs-gnb__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; opacity: 0; } /* Figma 5981:2314 hover: 텍스트 폭 2px 바 (뱃지 제외) */
.cs-gnb__link:hover::after { opacity: 1; }
.cs-gnb__link--badge { margin-right: 20px; } /* 뱃지 돌출폭만큼 보정 : 뱃지 ↔ 로그인 버튼도 36 */
.cs-gnb__badge {
    position: absolute; top: -5px; right: -20px;
    min-width: 20px; height: 16px; padding: 0 4px 1px;
    border-radius: 20px; background: #fff; color: #0A74FF;
    font-size: 10px; font-weight: 500; line-height: 15px; text-align: center;
}
.cs-gnb__login {
    width: 88px; height: 36px; border: 1px solid #fff; border-radius: 20px;
    color: #fff; font-size: 14px; font-weight: 500; line-height: 22px;
}
.cs-gnb__login:hover { background: #fff; color: #17191C; } /* Figma 5981:2314 hover */
.cs-gnb__hamburger { display: none; width: 32px; height: 32px; padding: 4px; border-radius: 4px; }
.cs-gnb__hamburger:hover { background: rgba(0, 0, 0, 0.1); }
.cs-gnb__hamburger img { width: 24px; height: 24px; }

/* ---------- Drawer (hamburger menu) ---------- */
.cs-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; display: none; }
.cs-drawer.is-open { display: block; }
.cs-drawer__dim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); }
.cs-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 240px; background: #fff; display: flex; flex-direction: column; }
.cs-drawer__close { position: absolute; top: 18px; right: 16px; width: 24px; height: 24px; }
.cs-drawer__head { padding: 24px 24px 0; }
.cs-drawer__head img { display: block; width: 100px; height: 25px; }
.cs-drawer__head::after { content: ""; display: block; height: 1px; margin-top: 16px; background: #17191C; }
.cs-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 32px; }
.cs-drawer__menu { display: flex; flex-direction: column; gap: 10px; }
.cs-drawer__menu a { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; line-height: 24px; color: #17191C; }
.cs-drawer__badge {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px 1px;
    border-radius: 20px; background: #ECF1F9; color: #0A74FF; font-size: 12px; font-weight: 500; line-height: 18px;
}
.cs-drawer__quick { display: flex; flex-direction: column; gap: 14px; }
.cs-drawer__quick a { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; line-height: 22px; color: #17191C; }
.cs-drawer__quick img { width: 14px; height: 14px; }
.cs-drawer__foot { padding: 0 24px 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 40%); }
.cs-drawer__login { width: 100%; height: 40px; border-radius: 3px; background: #18191C; color: #fff; font-size: 14px; font-weight: 700; line-height: 22px; }

/* ---------- Footer ---------- */
.cs-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 60px; border-top: 1px solid #E8EBF2; } /* Figma 5722:8186: 푸터 fill 없음 */
.cs-body.cs-theme-main { background: #F5F6FA; } /* 메인 페이지: 푸터 영역까지 메인 배경색 노출 */
.cs-footer__links { display: flex; align-items: center; }
.cs-footer__links li { display: flex; align-items: center; }
.cs-footer__links li + li::before { content: ""; display: block; width: 1px; height: 14px; margin: 0 20px; background: #D2D6E0; }
.cs-footer__links a { font-size: 15px; font-weight: 500; line-height: 22px; color: #747A86; }

/* ---------- Home (고객센터 메인) ---------- */
.cs-home { background: #F5F6FA; }
.cs-home__hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; height: 200px; background: #1181F4; color: #fff; text-align: center; }
.cs-home__hero-sub { font-size: 20px; font-weight: 500; line-height: 22px; color: #B8D7FF; }
.cs-home__hero-title { font-size: 38px; font-weight: 700; line-height: 38px; }
.cs-home__list { display: flex; gap: 40px; width: 1000px; max-width: 100%; margin: 0 auto; padding: 90px 40px 80px; }
.cs-home__list li { flex: 1 1 0; min-width: 0; }
.cs-home__card {
    display: flex; flex-direction: column; align-items: center; height: 328px; padding-top: 48px;
    background: #fff; border: 1px solid #E6EAF3; border-radius: 10px; text-align: center; transition: border-color .15s;
}
.cs-home__card:hover, .cs-home__card:focus { border: 2px solid #0A74FF; padding-top: 47px; }
.cs-home__card-img { display: block; width: 140px; height: 126px; margin-bottom: 42px; }
.cs-home__card-img img { width: 100%; height: 100%; }
.cs-home__card-text { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cs-home__card-title { font-size: 26px; font-weight: 700; line-height: 28px; color: #17191C; }
.cs-home__card-desc { font-size: 18px; line-height: 18px; color: #51555D; }

/* ---------- Page container ---------- */
.cs-page { background: #fff; }
.cs-container { width: 1080px; max-width: 100%; margin: 0 auto; padding: 48px 40px 80px; }

/* ---------- Tabs / notice / caution ---------- */
.cs-head { margin-bottom: 30px; }
.cs-tabs { display: flex; gap: 16px; border-bottom: 1px solid #D2D6E0; }
.cs-tabs li a { display: flex; align-items: center; justify-content: center; width: 120px; height: 60px; margin-bottom: -1px; border-bottom: 4px solid transparent; font-size: 24px; font-weight: 500; line-height: 36px; color: #747A86; white-space: nowrap; } /* 비활성 탭도 투명 보더로 텍스트 위치 통일, 활성 보더가 하단 선을 덮도록 1px 겹침 */
.cs-tabs li.is-on a { color: #17191C; font-weight: 700; border-bottom-color: #000; }

.cs-notice {
    position: relative; margin-top: 16px; padding: 12px 16px; border-radius: 4px; background: #ECF1F9;
    color: #1E4B85; font-size: 14px; line-height: 22px;
}
.cs-notice__text { display: block; white-space: pre-wrap; word-break: break-all; }
/* 4줄(88px) 초과 시 접힘: 박스 높이 116px(12 + 88 + 16), 하단 18px 그라데이션, 박스 아래 우측에 탭형 버튼(56x28) */
.cs-notice.is-collapsible.is-collapsed { padding-bottom: 16px; }
.cs-notice.is-collapsible.is-collapsed .cs-notice__text { max-height: 88px; overflow: hidden; }
.cs-notice.is-collapsible.is-collapsed::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, rgba(236, 241, 249, 0) 0%, rgba(236, 241, 249, 0.7) 30%, rgba(236, 241, 249, 1) 100%);
}
.cs-notice__toggle {
    display: none; position: absolute; top: 100%; right: 6px; z-index: 1; width: 56px; height: 28px;
    background: url("../images/mobile/btn_notice_collapse.svg") center / 56px 28px no-repeat;
}
.cs-notice.is-collapsible .cs-notice__toggle { display: block; }
.cs-notice.is-collapsible.is-collapsed .cs-notice__toggle { background-image: url("../images/mobile/btn_notice_expand.svg"); }
.cs-notice--prime { display: flex; align-items: center; gap: 12px; padding: 12px; background: #EEE9DB; color: #A0730A; }
.cs-notice--prime .cs-notice__icon { flex: 0 0 28px; width: 28px; height: 28px; }
.cs-notice--prime .cs-notice__text { flex: 1 1 auto; min-width: 0; }
.cs-notice--prime.is-collapsible.is-collapsed::after {
    background: linear-gradient(180deg, rgba(238, 233, 219, 0) 0%, rgba(238, 233, 219, 0.7) 30%, rgba(238, 233, 219, 1) 100%);
}
.cs-notice--prime .cs-notice__toggle { background-image: url("../images/mobile/btn_notice_collapse_prime.svg"); }
.cs-notice--prime.is-collapsible.is-collapsed .cs-notice__toggle { background-image: url("../images/mobile/btn_notice_expand.svg"); }

.cs-caution { margin-top: 32px; font-size: 13px; line-height: 19px; color: #17191C; }
.cs-caution strong { font-weight: 700; }
.cs-caution em { color: #EF5D5D; font-weight: 700; }

/* ---------- Form layout ---------- */
.cs-form { display: flex; flex-direction: column; gap: 60px; }
.cs-group { display: flex; flex-direction: column; gap: 32px; }
.cs-group + .cs-group { margin-top: 32px; } /* Figma 5779:22179(pc 펼침)/5779:21534/5779:22429(tablet): 입력 그룹 간 32px. 디자인 QA 확정 */
.cs-row { display: flex; align-items: flex-start; gap: 40px; }
.cs-label { flex: 0 0 120px; padding-top: 12px; font-size: 16px; font-weight: 700; line-height: 24px; color: #17191C; }
.cs-label em { color: #EF5D5D; }
.cs-row--top .cs-label { padding-top: 0; }
.cs-field { flex: 1 1 auto; min-width: 0; }
.cs-field--text { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding-top: 12px; font-size: 16px; line-height: 24px; }
.cs-row--text .cs-label, .cs-row--text .cs-field--text { padding-top: 0; } /* Figma 5779:22180: 고객명 행 높이 24, 상단 여백 없음 */
.cs-section__title { padding-bottom: 16px; margin-bottom: 32px; border-bottom: 2px solid #17191C; font-size: 20px; font-weight: 700; line-height: 30px; }

/* ---------- Inputs ---------- */
.cs-input, .cs-textarea {
    display: block; width: 100%; height: 48px; padding: 8px 16px; border: 1px solid #D2D6E0; border-radius: 4px;
    background: #fff; color: #17191C; font-size: 14px; line-height: 22px; outline: none; -webkit-appearance: none; appearance: none;
}
/* 인풋 가이드(5831:10781): Default/Focused 테두리 #D2D6E0, Hover #0A74FF, Error #FF6060, Disable 텍스트 #C6CCD7 */
.cs-input:hover, .cs-textarea:hover { border-color: #0A74FF; }
.cs-input:focus, .cs-textarea:focus { border-color: #D2D6E0; }
.cs-input::placeholder, .cs-textarea::placeholder { color: #A1A7B5; }
.cs-input[readonly], .cs-input:disabled, .cs-textarea[readonly] {
    background: rgba(232, 235, 242, 0.5); border-color: rgba(210, 214, 224, 0.5); color: #C6CCD7;
}
.cs-input[readonly]:hover, .cs-input:disabled:hover { border-color: rgba(210, 214, 224, 0.5); }
.cs-input:disabled::placeholder { color: #C6CCD7; } /* 인풋 가이드 Disable 텍스트 색 (휴대폰 입력란 미체크 상태) */
.cs-textarea { height: 130px; padding: 8px 16px; resize: none; }
.cs-textarea--person { height: 140px; }
.cs-field.is-error .cs-input, .cs-field.is-error .cs-textarea, .cs-field.is-error .cs-select__btn { border-color: #FF6060; }
/* 텍스트 삭제(X) : 입력값이 있을 때만 노출. 아이콘은 파일 첨부 목록의 ico_close_x.svg 재사용 */
.cs-input-clear { position: relative; }
.cs-input-clear .cs-input { padding-right: 48px; }
.cs-input-clear__btn { display: none; position: absolute; top: 50%; right: 10px; width: 32px; height: 32px; margin-top: -16px; align-items: center; justify-content: center; }
.cs-input-clear__btn img { width: 20px; height: 20px; }
.cs-input-clear.has-value .cs-input-clear__btn { display: flex; }
.cs-error-msg { margin-top: 8px; font-size: 14px; line-height: 22px; color: #EF5D5D; }

.cs-hint { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 12px; font-size: 13px; line-height: 19px; color: #17191C; }
.cs-hint img { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.cs-hint em { color: #EF5D5D; font-weight: 700; }

/* ---------- Select (dropdown) ---------- */
.cs-select { position: relative; }
.cs-select__btn {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: 48px; padding: 8px 16px;
    border: 1px solid #D2D6E0; border-radius: 4px; background: #fff; color: #17191C; font-size: 14px; line-height: 22px; text-align: left;
}
.cs-select__btn:hover, .cs-select.is-open .cs-select__btn { border-color: #0A74FF; }
.cs-select__text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cs-select.is-placeholder .cs-select__text { color: #A1A7B5; }
.cs-select__arrow { flex: 0 0 20px; width: 20px; height: 20px; transition: transform .15s; }
.cs-select.is-open .cs-select__arrow { transform: rotate(180deg); }
.cs-select__list {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 288px; overflow-y: auto;
    padding: 4px; border: 1px solid #0A74FF; border-radius: 3px; background: #fff; box-shadow: 0 3px 25px rgba(0, 0, 0, 0.16);
}
.cs-select__list::-webkit-scrollbar { width: 4px; }
.cs-select__list::-webkit-scrollbar-thumb { border-radius: 2px; background: #D2D6E0; }
.cs-select__list::-webkit-scrollbar-track { background: transparent; }
.cs-select.is-open .cs-select__list { display: block; }
.cs-select__list li { min-height: 40px; padding: 9px 16px 9px 12px; border-radius: 3px; font-size: 14px; line-height: 22px; color: #747A86; cursor: pointer; }
.cs-select__list li:hover { background: #ECF1F9; }
.cs-select__list li.is-selected { color: #0A74FF; font-weight: 700; }
.cs-select__list li.is-empty { color: #A1A7B5; cursor: default; }
.cs-select.is-disabled .cs-select__btn { background: rgba(232, 235, 242, 0.5); border-color: rgba(210, 214, 224, 0.5); color: #C6CCD7; cursor: default; }
.cs-select.is-disabled.is-placeholder .cs-select__text { color: #C6CCD7; }

/* ---------- Checkbox ---------- */
.cs-check { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.cs-check input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; overflow: hidden; }
.cs-check__box { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 3px; background: url("../images/mobile/ico_checkbox_off.svg") center / 24px 24px no-repeat; }
.cs-check input:checked + .cs-check__box { background-image: url("../images/mobile/ico_checkbox_on.svg"); }
@media (hover: hover) {
    .cs-check:not(.cs-check--fixed):not(.cs-check--small) .cs-check__box:hover { background-image: url("../images/mobile/ico_checkbox_off_hover.svg"); } /* 가이드 hover 는 아이콘에만 정의 : 라벨 텍스트 hover 제외 */
    .cs-check:not(.cs-check--fixed):not(.cs-check--small) input:checked + .cs-check__box:hover { background-image: url("../images/mobile/ico_checkbox_on_hover.svg"); }
}
/* 필수 동의 미체크 오류 */
.cs-agree-item.is-error .cs-agree-item__head input:not(:checked) + .cs-check__box,
#notifyAgreeWrap.is-error input:not(:checked) + .cs-check__box { background-image: url("../images/mobile/ico_checkbox_off_error.svg"); }
.cs-check--fixed { cursor: default; }
.cs-check__label { font-size: 16px; font-weight: 700; line-height: 24px; color: #17191C; }
.cs-check--normal .cs-check__label { font-size: 14px; font-weight: 400; line-height: 22px; }
.cs-check--top { align-items: flex-start; }
.cs-check__note { display: block; font-size: 13px; font-weight: 400; line-height: 21px; color: #747A86; }
.cs-check__label .cs-prime-badge { margin-left: 2px; }
.cs-agree-notify__list { display: flex; flex-direction: column; gap: 24px; }
.cs-check--small { gap: 6px; }
.cs-check--small .cs-check__box { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 0; background: url("../images/mobile/ico_check_small_off.svg") center / 16px 16px no-repeat; }
.cs-check--small input:checked + .cs-check__box { background-image: url("../images/mobile/ico_check_small_on.svg"); }
@media (hover: hover) { .cs-check--small .cs-check__box:hover { background-image: url("../images/mobile/ico_check_small_hover.svg"); } }
.cs-agree-item.is-error .cs-check--small input:not(:checked) + .cs-check__box { background-image: url("../images/mobile/ico_check_small_error.svg"); }
.cs-check--small .cs-check__label { font-size: 16px; font-weight: 400; line-height: 22px; color: #8F96A3; }
.cs-check--small:hover .cs-check__label { color: #0056C7; }
.cs-check--small input:checked ~ .cs-check__label { color: #0A74FF; font-weight: 700; }

/* ---------- 파일 첨부 ---------- */
.cs-file__desc { margin-bottom: 16px; font-size: 14px; line-height: 22px; color: #747A86; }
.cs-file__actions { display: flex; align-items: flex-end; gap: 12px; }
.cs-file__limit { font-size: 14px; line-height: 22px; color: #747A86; }
.cs-file__list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.cs-file__list:empty { display: none; }
.cs-file__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 3px 15px; border: 1px solid #D2D6E0; border-radius: 4px; background: #fff; }
.cs-file__name { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; line-height: 18px; color: #747A86; }
.cs-file__name img { flex: 0 0 20px; width: 20px; height: 20px; }
.cs-file__name span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cs-file__del { flex: 0 0 20px; width: 20px; height: 20px; }
.cs-file__del img { width: 20px; height: 20px; }

/* ---------- Buttons ---------- */
.cs-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-weight: 700; white-space: nowrap; }
.cs-btn--secondary { height: 40px; padding: 9px 12px; border-radius: 3px; background: #E9ECF2; color: #18191C; font-size: 14px; line-height: 22px; }
.cs-btn--primary { width: 240px; height: 56px; background: #0C77FF; color: #fff; font-size: 18px; line-height: 28px; }
.cs-btn--tertiary { background: #E8EBF2; color: #17191C; }
.cs-btn--dark { background: #17191C; color: #fff; }
/* hover 는 터치 기기의 고착을 피하기 위해 hover 가능 기기에서만 적용 (이하 동일) */
@media (hover: hover) {
    .cs-btn--primary:hover { background: #005CC9; }
    .cs-btn--secondary:hover { background: #C4C9D4; }
}
.cs-submit { display: flex; justify-content: center; margin-top: -28px; } /* 동의 항목 영역과 32px 간격 (섹션 gap 60 - 28) */

/* ---------- 답변 알림 ---------- */
.cs-row--check .cs-label { display: flex; align-items: center; gap: 12px; height: 48px; padding-top: 0; }
.cs-row--check .cs-check__label { font-size: 16px; }
.cs-notify .cs-input { font-size: 16px; }
.cs-check__sub { font-weight: 400; color: #747A86; } /* 휴대폰 (선택) 보조 표기 */
/* 이메일 입력 + 변경/취소 : is-direct(입력만) / is-fixed(마스킹 + 변경) / is-editing(입력 + 취소) */
.cs-input-group { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 16px; border: 1px solid #D2D6E0; border-radius: 4px; background: #fff; }
.cs-input-group:hover { border-color: #0A74FF; }
.cs-input-group__text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; line-height: 24px; color: #17191C; }
.cs-input-group .cs-input { flex: 1 1 auto; width: auto; min-width: 0; height: 46px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.cs-input-group .cs-input:hover, .cs-input-group .cs-input:focus { border-color: transparent; }
.cs-input-group__btn { flex: 0 0 auto; padding: 0 8px; border-radius: 4px; font-size: 16px; line-height: 24px; color: #17191C; white-space: nowrap; }
@media (hover: hover) { .cs-input-group__btn:hover { color: #0056C7; } }
.cs-field.is-error .cs-input-group { border-color: #FF6060; }
.cs-input-group.is-direct .cs-input-group__text, .cs-input-group.is-direct .cs-input-group__btn { display: none; }
.cs-input-group.is-fixed .cs-input, .cs-input-group.is-fixed .cs-input-group__btn--cancel { display: none; }
.cs-input-group.is-editing .cs-input-group__text, .cs-input-group.is-editing .cs-input-group__btn--change { display: none; }
.cs-agree-notify { margin-top: 32px; padding-top: 24px; border-top: 1px solid #E8EBF2; }
.cs-agree-notify .cs-check__label a { color: #0A74FF; font-weight: 500; text-decoration: underline; }
@media (hover: hover) { .cs-agree-notify .cs-check__label a:hover { color: #0056C7; } }

/* ---------- 동의 항목 ---------- */
/* 항목별 아코디언: 헤더(체크박스 + 제목 + 필수 * + 화살표) / 본문(제목, 에디터 내용, 확인 체크) */
.cs-agree-list { display: flex; flex-direction: column; gap: 16px; }
.cs-section--agree .cs-section__title { margin-bottom: 0; } /* Figma 5779:20419: 제목 밑줄 바로 아래 항목 */
.cs-agree-item { background: #F9FAFB; }
.cs-agree-item__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 20px; cursor: pointer; } /* 행 전체 클릭 시 펼치기/접기 (ncs.mobile.reception.js initAgreement) */
.cs-agree-item__req { color: #EF5D5D; }
.cs-agree-item.is-optional .cs-agree-item__req { display: none; }
.cs-agree-item__toggle { flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px; } /* 아이콘은 20px 유지, 터치 영역만 44px로 확대 (음수 마진으로 레이아웃 불변) */
.cs-agree-item__toggle img { width: 20px; height: 20px; transition: transform .15s; }
.cs-agree-item.is-open .cs-agree-item__toggle img { transform: rotate(180deg); }
.cs-agree-item__body { display: none; padding: 8px 20px 32px; }
.cs-agree-item.is-open .cs-agree-item__body { display: block; }
.cs-agree-item > .cs-error-msg { padding: 0 20px 16px; margin-top: 0; }
.cs-agree-item__title { margin-bottom: 0; font-size: 18px; font-weight: 700; line-height: 30px; }
.cs-agree-item__title em { color: #EF5D5D; }
.cs-agree-item__title em.is-optional { color: #747A86; }
/* 동의 항목 본문 : NCS 관리자(AP) CKEditor 로 작성한 HTML 을 Figma 서식으로 덮어쓴다 (PC 고객센터와 동일한 방식).
   표 너비만 !important : 에디터가 넣는 인라인 width(500px)를 무시하고 항상 꽉 채운다. */
.cs-agree-item__content { overflow-x: auto; font-size: 14px; line-height: 24px; color: #17191C; word-break: break-all; }
.cs-agree-item__content p, .cs-agree-item__content div, .cs-agree-item__content blockquote { margin: 4px 0; }
.cs-agree-item__content table { width: 100% !important; margin: 16px 0; border: 0; border-top: 2px solid #17191C; border-bottom: 1px solid #E8EBF2; border-collapse: separate; border-spacing: 0; }
.cs-agree-item__content th, .cs-agree-item__content td { padding: 16px 20px 20px 0; border: 0; border-bottom: 1px solid #E8EBF2; background: none; font-size: 14px; line-height: 24px; color: #17191C; text-align: left; vertical-align: middle; }
.cs-agree-item__content th { padding-bottom: 16px; border-bottom-color: #D2D6E0; font-weight: 700; line-height: 22px; }
.cs-agree-item__content th:nth-of-type(1), .cs-agree-item__content td:nth-of-type(1) { width: 110px; }
.cs-agree-item__content th:nth-of-type(2), .cs-agree-item__content td:nth-of-type(2) { width: 80px; }
.cs-agree-item__content th:last-child, .cs-agree-item__content td:last-child { padding-right: 0; }
.cs-agree-item__content > :first-child { margin-top: 0; }
.cs-agree-item__content > :last-child { margin-bottom: 0; }
.cs-agree-item__content ol, .cs-agree-item__content ul { margin: 1em 0; padding: 0 40px; }
.cs-agree-item__content ol { list-style: decimal; }
.cs-agree-item__content ul { list-style: disc; }
.cs-agree-item__content h1, .cs-agree-item__content h2, .cs-agree-item__content h3, .cs-agree-item__content h4, .cs-agree-item__content h5, .cs-agree-item__content h6 { margin: 0.67em 0; font-weight: normal; line-height: 1.2; }
.cs-agree-item__content h1 { font-size: 2em; } .cs-agree-item__content h2 { font-size: 1.5em; } .cs-agree-item__content h3 { font-size: 1.17em; }
.cs-agree-item__content a { color: #0782C1; text-decoration: underline; }
.cs-agree-item__content hr { border: 0; border-top: 1px solid #ccc; }
.cs-agree-item__content blockquote { padding: 2px 0 2px 20px; border-left: 5px solid #ccc; font-style: italic; font-family: Georgia, Times, "Times New Roman", serif; }
.cs-agree-item__content img { max-width: 100%; height: auto; }
/* 표는 CKEditor가 저장한 border / cellpadding / cellspacing / width 속성과 인라인 style을 브라우저 기본 렌더링으로 그대로 표시 */
.cs-agree-item__confirm { display: flex; justify-content: center; margin-top: 24px; }
/* 마이핀 행 : 라벨 보조 표기 "(선택)" 과 입력 글자수 카운터 */
.cs-label__sub { font-weight: 400; color: #747A86; }
.cs-input-count { margin-top: 8px; text-align: right; font-size: 13px; line-height: 19px; color: #A1A7B5; }
#mypinRow.is-required .cs-mypin__opt, #mypinRow:not(.is-required) .cs-mypin__req { display: none; }

/* ---------- Modal ---------- */
.cs-modal { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1100; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5); }
.cs-modal.is-open { display: flex; }
/* 답변 알림 개인정보 수집·이용 동의 팝업 : Figma 5722:4538 기준 */
.cs-modal__box { width: 820px; max-width: 100%; max-height: 90vh; overflow-y: auto; padding: 32px 24px 28px; border-radius: 4px; background: #fff; box-shadow: 0 3px 25px rgba(0, 0, 0, 0.16); }
.cs-modal__title { margin-bottom: 32px; font-size: 20px; font-weight: 700; line-height: 30px; color: #17191C; }
.cs-modal__body { display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 24px; color: #17191C; }
.cs-modal__body > p:first-child { margin-bottom: 14px; }
.cs-modal__body table { width: 100%; table-layout: fixed; border-collapse: collapse; border-top: 2px solid #17191C; }
.cs-modal__body th { padding: 16px 40px 16px 0; border-bottom: 1px solid #D2D6E0; text-align: left; font-size: 14px; font-weight: 700; line-height: 22px; vertical-align: top; }
.cs-modal__body td { padding: 16px 40px 20px 0; border-bottom: 1px solid #E8EBF2; vertical-align: top; }
.cs-modal__body th:nth-child(1), .cs-modal__body td:nth-child(1) { width: 150px; } /* 110 + 간격 40 */
.cs-modal__body th:nth-child(2), .cs-modal__body td:nth-child(2) { width: 136px; } /* 96 + 간격 40 */
.cs-modal__body th:last-child, .cs-modal__body td:last-child { padding-right: 0; }
.cs-modal__body .cs-sub { color: #747A86; }
.cs-modal__btn { display: block; width: 180px; height: 48px; margin: 40px auto 0; border-radius: 4px; background: #17191C; color: #fff; font-size: 16px; font-weight: 700; line-height: 24px; }

/* ---------- 기본 모달 (alert / confirm 대체) : Figma 6044:28927 ---------- */
.cs-dialog { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1200; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.5); }
.cs-dialog.is-open { display: flex; }
.cs-dialog__box { display: flex; flex-direction: column; gap: 24px; width: 320px; max-width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 32px 20px 24px; border-radius: 4px; background: #fff; box-shadow: 0 3px 25px rgba(0, 0, 0, 0.16); }
.cs-dialog--alert .cs-dialog__box { min-height: 200px; gap: 32px; }
.cs-dialog__message { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; font-size: 16px; font-weight: 400; line-height: 24px; text-align: center; color: #17191C; }
.cs-dialog__buttons { display: flex; gap: 8px; height: 48px; }
.cs-dialog__btn { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; height: 48px; padding: 12px 16px; border-radius: 4px; font-size: 16px; font-weight: 700; line-height: 24px; white-space: nowrap; }
.cs-dialog__btn--cancel { background: #E9ECF2; color: #18191C; } /* Button secondary (filled) */
.cs-dialog__btn--ok { background: #18191C; color: #fff; } /* Button primary_2 (filled) */
@media (hover: hover) {
    .cs-dialog__btn--cancel:hover { background: #C4C9D4; }
    .cs-dialog__btn--ok:hover { background: #005CC9; }
}
.cs-dialog__btn:focus { outline: none; } /* 열릴 때 확인 버튼에 포커스(Enter 닫기)를 주므로 iOS 등의 기본 포커스 테두리는 숨긴다 */

/* ---------- 접수 완료 ---------- */
.cs-page--complete { display: flex; flex-direction: column; }
.cs-complete { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 80px; padding: 200px 40px 80px; background: #fff; }
.cs-complete__title-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.cs-complete__text { display: flex; flex-direction: column; gap: 0; } /* Figma 5722:8061: 제목 ↔ 부제 간격 없음 */
.cs-complete__icon { width: 64px; height: 64px; }
.cs-complete__title { font-size: 28px; font-weight: 700; line-height: 42px; color: #17191C; }
.cs-complete__title .cs-prime-text { color: #D2AA4E; }
.cs-complete--prime .cs-complete__title { font-size: 24px; line-height: 36px; } /* Figma pc_완료(프라임) 5722:8164 */
.cs-complete__box { width: 300px; max-width: 100%; }
.cs-complete__table { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 20px; border-radius: 4px; background: #F9FAFB; font-size: 12px; line-height: 18px; color: #747A86; }
.cs-complete__table dt { flex: 0 0 80px; font-weight: 500; }
.cs-complete__table dd { flex: 1 1 auto; min-width: 0; text-align: right; word-break: break-all; }
.cs-complete__note { margin-top: 8px; font-size: 11px; line-height: 18px; color: #A1A7B5; }
.cs-complete__btns { display: flex; flex-direction: column-reverse; gap: 8px; margin-top: 32px; } /* PC/태블릿 : 세로 배치, 내 문의 바로가기가 위 */
.cs-complete__btns a { width: 100%; height: 56px; padding: 0 20px; font-size: 18px; line-height: 28px; } /* 박스 폭 300 (Figma pc_완료) */

/* ---------- 고객명 / PRIME ---------- */
.cs-prime-badge { display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; }
.cs-prime-badge img:first-child { width: 20px; height: 20px; }
.cs-prime-badge img:last-child { width: 46px; height: 12px; }

/* =========================================================
   Tablet (768 ~ 1024) - Figma: PC > 1024 / Tablet 768~1023 / Mobile ~767
   ========================================================= */
@media (max-width: 1024px) {
    .cs-gnb__inner { padding: 0 20px 0 24px; }
    .cs-gnb__menu, .cs-gnb__login { display: none; }
    .cs-gnb__hamburger { display: inline-flex; align-items: center; justify-content: center; }

    .cs-home__hero { height: 172px; }
    .cs-home__hero-title { font-size: 36px; line-height: 36px; }
    .cs-home__list { width: 100%; gap: 20px; padding: 60px 40px 80px; }

    .cs-container { width: 100%; }
    .cs-row { gap: 12px; } /* 태블릿 라벨 ↔ 입력 12 */
    .cs-notify .cs-row { gap: 12px; }
    .cs-complete__title { font-size: 24px; line-height: 36px; }

    .cs-modal { padding: 0; }
    .cs-modal__box { width: 100%; height: 100%; max-height: none; padding: 32px 40px 24px; border-radius: 0; box-shadow: none; }
}

/* =========================================================
   Mobile (~ 767)
   ========================================================= */
@media (max-width: 767px) {
    .cs-only-pc { display: none; }
    .cs-only-mobile { display: inline; }

    .cs-gnb__inner { height: 56px; padding: 0 8px 0 16px; }
    .cs-theme-main .cs-gnb__inner { height: 48px; }
    .cs-gnb__logo { gap: 4px; }
    .cs-gnb__logo-icon { width: 22px; height: 22px; }
    .cs-body:not(.cs-theme-main) .cs-gnb__logo-icon { display: none; } /* 모바일 내부 페이지 GNB는 워드마크만 노출 */

    .cs-footer__links a { font-size: 13px; line-height: 13px; }

    .cs-home__hero { gap: 12px; height: 120px; }
    .cs-home__hero-sub { font-size: 16px; line-height: 16px; }
    .cs-home__hero-title { font-size: 22px; line-height: 22px; }
    .cs-home__list { flex-direction: column; gap: 20px; padding: 40px 24px; }
    .cs-home__card { flex-direction: row; align-items: center; gap: 16px; height: auto; padding: 20px; border-radius: 8px; text-align: left; }
    .cs-home__card:hover, .cs-home__card:focus { padding: 19px; }
    .cs-home__card-img { flex: 0 0 80px; width: 80px; height: 72px; margin-bottom: 0; }
    .cs-home__card-text { align-items: flex-start; gap: 10px; }
    .cs-home__card-title { font-size: 18px; line-height: 18px; }
    .cs-home__card-desc { font-size: 14px; line-height: 14px; }

    .cs-container { padding: 30px 16px 80px; }
    .cs-tabs { gap: 0; }
    .cs-tabs li { flex: 1 1 0; }
    .cs-tabs li a { width: 100%; height: auto; padding-bottom: 14px; border-bottom-width: 3px; font-size: 16px; line-height: 24px; }
    .cs-tabs li.is-on a { border-bottom-color: #17191C; }
    .cs-notice__toggle { right: 4px; }

    .cs-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .cs-label { flex: 0 0 auto; padding-top: 0; font-size: 14px; line-height: 22px; }
    .cs-field--text { padding-top: 0; font-size: 14px; line-height: 22px; }
    .cs-textarea { height: 166px; }        /* 문의내용 행 200 - 라벨 22 - 간격 12 */
    .cs-textarea--person { height: 129px; } /* 개인정보 행 190 - 라벨 22 - 간격 12 - 안내 19 - 간격 8 */
    .cs-hint { margin-bottom: 8px; }
    .cs-section__title { margin-bottom: 32px; font-size: 18px; line-height: 28px; }

    .cs-file__desc { margin-top: -8px; }
    .cs-row--check .cs-label { height: auto; }
    .cs-row--check .cs-check__label { font-size: 14px; line-height: 22px; }
    .cs-notify .cs-input { font-size: 14px; }
    .cs-input-group__text, .cs-input-group__btn { font-size: 14px; line-height: 22px; }

    .cs-agree-item__head { padding: 16px 12px; }
    .cs-agree-item__head .cs-check__label { font-size: 14px; line-height: 22px; }
    .cs-agree-item__body { padding: 8px 12px 24px; }
    .cs-agree-item > .cs-error-msg { padding: 0 12px 12px; }
    .cs-agree-item__title { margin-bottom: 0; font-size: 16px; line-height: 32px; }
    .cs-agree-item__content { font-size: 13px; line-height: 21px; }
    .cs-agree-item__content th, .cs-agree-item__content td { font-size: 12px; line-height: 18px; }
    .cs-agree-item__content th:nth-of-type(1), .cs-agree-item__content td:nth-of-type(1),
    .cs-agree-item__content th:nth-of-type(2), .cs-agree-item__content td:nth-of-type(2) { width: 60px; }
    .cs-agree-item__confirm { margin-top: 20px; }
    .cs-check--small .cs-check__label { font-size: 14px; line-height: 14px; }

    .cs-btn--primary { width: 100%; height: 48px; font-size: 16px; line-height: 24px; }

    .cs-modal__box { padding: 28px 16px 24px; }
    .cs-modal__title { margin-bottom: 28px; font-size: 18px; line-height: 28px; }
    .cs-modal__body { gap: 12px; font-size: 14px; line-height: 22px; }
    .cs-modal__body > p:first-child { margin-bottom: 12px; } /* 인트로 ↔ 표 24 */
    .cs-modal__body th { padding: 12px 20px 12px 0; font-size: 12px; line-height: 18px; }
    .cs-modal__body td { padding: 12px 20px 16px 0; font-size: 12px; line-height: 18px; }
    .cs-modal__body th:nth-child(1), .cs-modal__body td:nth-child(1) { width: 80px; } /* 60 + 간격 20 */
    .cs-modal__body th:nth-child(2), .cs-modal__body td:nth-child(2) { width: 80px; }
    .cs-modal__btn { width: 100%; margin-top: 32px; }

    .cs-dialog__box { width: 280px; }

    .cs-complete { justify-content: space-between; gap: 40px; padding: 80px 16px 24px; } /* Figma 5722:2793: 제목 상단, 계정 박스 하단 고정 */
    .cs-complete__btns { flex-direction: row; }
    .cs-complete__btns a { flex: 1 1 0; height: 48px; padding: 0 16px; font-size: 16px; line-height: 24px; }
    .cs-complete__icon { width: 52px; height: 52px; }
    .cs-complete__title, .cs-complete--prime .cs-complete__title { font-size: 20px; line-height: 30px; }
    .cs-complete__box { width: 100%; }
    .cs-complete__table { padding: 16px; }
    .cs-prime-badge img:first-child { width: 18px; height: 18px; }
    .cs-prime-badge img:last-child { width: 39px; height: 10px; }
}