/* 노드페이 공통 스타일 — 브레이크포인트: PC ≥1024 (디자인 1920, 본문 1120) · 태블릿 768–1023 (디자인 800) · 모바일 <768 (디자인 375) */
:root {
  --blue: #0077fe;
  --blue-dark: #0062d1;
  --ink: #31373f;
  --ink-2: #1c2638;
  --gray: #555;
  --gray-2: #6e6e6e;
  --gray-3: #919ba5;
  --line: #e2e8ee;
  --bg-soft: #f4f6f8;
  --bg-soft-2: #f1f5f9;
  --red: #ff505a;
  --wrap: 1120px;
  --hd-h: 80px;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
@media (max-width: 767px) { :root { --hd-h: 70px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hd-h); }
body {
  margin: 0; padding-top: var(--hd-h);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  color: var(--ink); background: #fff; line-height: normal; word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
/* 줄바꿈: PC 에서만 / 모바일에서만 */
.br-pc { display: inline; } .br-t, .br-m { display: none; }
@media (max-width: 1023px) { .br-pc { display: none; } .br-t { display: inline; } }
@media (max-width: 767px) { .br-t { display: none; } .br-m { display: inline; } }

/* 공통 버튼: 파란 알약 (hover 시 진해짐 — ease-out 300ms) */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 100px;
  background: var(--blue); color: #fff; font-weight: 700; white-space: nowrap; transition: background-color .3s var(--ease-out);
}
.btn-pill:hover { background: var(--blue-dark); }

/* ───────── 헤더 (상단 고정) ───────── */
.hd { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hd-h); background: #000; }
.hd-inner { position: relative; display: flex; align-items: center; width: min(var(--wrap), 100% - 40px); height: 100%; margin-inline: auto; }
.hd-logo { flex: none; display: block; width: 126px; }
.hd-logo img { width: 126px; height: auto; }
.hd-cta {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 110px; height: 45px; margin-left: auto;
  border-radius: 100px; background: var(--blue); color: #fff; font-size: 20px; font-weight: 700; white-space: nowrap; transition: background-color .3s var(--ease-out);
}
.hd-cta:hover { background: var(--blue-dark); }
.hd-menu { display: none; }
.gnb-dim { display: none; }

/* PC: 가로 메뉴 + 드롭다운 */
@media (min-width: 1024px) {
  .gnb { margin-left: 20px; }
  .gnb-head { display: none; }
  .gnb-list { display: flex; gap: 20px; }
  .gnb-item { position: relative; }
  .gnb-btn {
    display: flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 10px; background: #000;
    color: #fff; font-size: 18px; font-weight: 500; white-space: nowrap; transition: background-color .3s var(--ease-out);
  }
  .gnb-item:first-child .gnb-btn { padding: 0 17px; }
  .gnb-item:hover .gnb-btn, .gnb-item.is-open .gnb-btn, .gnb-btn:focus-visible { background: #555; }
  .gnb-sub {
    position: absolute; left: 0; top: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
    min-width: 100%; padding: 10px; border-radius: 10px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
  }
  /* 버튼과 메뉴 사이 20px 틈에서 hover 가 끊기지 않도록 */
  .gnb-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
  .gnb-item:hover .gnb-sub, .gnb-item.is-open .gnb-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .gnb-sub a {
    display: block; padding: 10px 17px; border-radius: 10px; color: var(--ink); font-size: 18px; font-weight: 500; white-space: nowrap;
    transition: background-color .3s var(--ease-out);
  }
  .gnb-sub a:hover, .gnb-sub a:focus-visible { background: #e9e9e9; }
  .gnb-sub a[aria-current="page"] { color: var(--blue); }
}

/* 태블릿·모바일: 햄버거 → 오른쪽 서랍 (on click / ease in / 300ms) */
@media (max-width: 1023px) {
  .hd-inner { width: auto; padding: 0 33px 0 33px; }
  .hd-menu { flex: none; display: block; width: 40px; margin-left: 30px; }
  .hd-menu img { width: 40px; height: auto; }
  .hd-menu-m { display: none !important; }
  .gnb {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: 368px; max-width: 100%; padding: 10px;
    overflow-y: auto; overscroll-behavior: contain; background: #fff;
    transform: translateX(100%); visibility: hidden;
    transition: transform .3s var(--ease-in), visibility 0s linear .3s;
  }
  .gnb.is-open { transform: none; visibility: visible; transition: transform .3s var(--ease-in), visibility 0s; }
  .gnb-head { display: flex; justify-content: flex-end; margin-bottom: 30px; }
  .gnb-close { display: flex; padding: 10px; }
  .gnb-close img { width: 25px; height: 25px; }
  .gnb-list { display: flex; flex-direction: column; gap: 5px; }
  .gnb-btn {
    position: relative; display: flex; align-items: center; width: 100%; height: 56px; padding-left: 23.5px; border-radius: 10px;
    color: var(--ink); font-size: 25px; font-weight: 600; text-align: left;
  }
  .gnb-btn::after {
    content: ''; position: absolute; right: 21.5px; top: 13px; width: 30px; height: 30px;
    background: url(/assets/common/chevron-down.webp) center / contain no-repeat;
  }
  .gnb-item.is-open .gnb-btn { color: var(--blue); }
  .gnb-item.is-open .gnb-btn::after { background-image: url(/assets/common/chevron-up.webp); }
  .gnb-sub { display: none; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 5px; }
  .gnb-item.is-open .gnb-sub { display: flex; }
  .gnb-sub a {
    display: block; padding: 10px 25px; border-radius: 10px; color: var(--ink); font-size: 25px; font-weight: 500; white-space: nowrap;
    transition: background-color .3s var(--ease-in);
  }
  .gnb-sub a:active, .gnb-sub a:hover, .gnb-sub a[aria-current="page"] { background: #e9e9e9; }
  .gnb-dim { position: fixed; inset: 0; z-index: 110; display: block; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .3s var(--ease-in); }
  .gnb-dim.is-open { opacity: 1; }
  .gnb-dim[hidden] { display: none; }
}
@media (max-width: 767px) {
  .hd-inner { padding: 0 23.8px; }
  .hd-logo, .hd-logo img { width: 86px; }
  .hd-cta { width: 70px; height: 28px; font-size: 12px; }
  .hd-menu { width: 25px; margin-left: 15px; }
  .hd-menu img { width: 25px; }
  .hd-menu-t { display: none !important; }
  .hd-menu-m { display: block !important; }
  .gnb { width: 230px; }
  .gnb-head { margin-bottom: 20px; }
  .gnb-close img { width: 20px; height: 20px; }
  .gnb-btn { height: 43px; padding-left: 18px; border-radius: 7.7px; font-size: 18px; }
  .gnb-btn::after { right: 13px; top: 10px; width: 23px; height: 23px; }
  .gnb-sub a { font-size: 18px; }
}

/* ───────── 섹션 공통 ───────── */
/* 섹션 제목 기본값 (홈 기준 PC 30 / 태블릿 25 / 모바일 15 Bold) — 페이지 디자인 값이 다르면 페이지 CSS 에서 덮어쓸 것 */
.sec-title { color: var(--ink); font-size: 30px; font-weight: 700; text-align: center; line-height: normal; }
.sec-desc { margin-top: 10px; color: var(--ink); font-size: 20px; font-weight: 500; text-align: center; }
@media (max-width: 1023px) { .sec-title { font-size: 25px; } .sec-desc { font-size: 18px; } }
@media (max-width: 767px) { .sec-title { font-size: 15px; } .sec-desc { margin-top: 5px; font-size: 12px; } }

/* ───────── 자주 묻는 질문 (공통) ───────── */
/* 디자인: PC 900폭 · 높이 74 · 질문 20 Bold · 아이콘 32 / 태블릿 600폭 · 18 / 모바일 335폭 · 높이 48 · 15 · 아이콘 25 */
.faq-list { display: flex; flex-direction: column; gap: 10px; width: min(900px, 100%); margin-inline: auto; }
.faq-item { border-radius: 10px; background: var(--bg-soft); }
.faq-item summary {
  display: flex; align-items: center; gap: 11.25px; min-height: 74px; padding: 19px 40px; cursor: pointer; list-style: none;
  color: #1e1e1e; font-size: 20px; font-weight: 700; line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex: none; width: 32px; height: 32px; margin-left: auto;
  background: url(/assets/common/chevron-down.webp) center / contain no-repeat; transition: transform .3s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-a { padding: 6px 40px 22px; color: #373737; font-size: 20px; font-weight: 500; line-height: normal; }
@media (max-width: 1023px) {
  .faq-list { width: min(600px, 100%); }
  .faq-item summary { padding: 19px 40px; font-size: 18px; }
  .faq-a { padding: 6px 40px 23px; font-size: 18px; }
}
@media (max-width: 767px) {
  .faq-list { width: min(335px, 100%); }
  .faq-item summary { min-height: 48px; padding: 11.5px 25px; font-size: 15px; }
  .faq-item summary::after { width: 25px; height: 25px; }
  .faq-a { padding: 13px 25px 12px; font-size: 15px; }
}

/* ───────── 상담 문의 폼 (모든 페이지 하단 · 상담문의/제휴문의 페이지) ───────── */
.consult { display: flex; justify-content: center; padding: 116px 20px; background: var(--bg-soft); }
.consult-card { width: 900px; max-width: 100%; padding: 66px 90px; border-radius: 20px; background: #fff; filter: drop-shadow(0 0 10px rgba(0, 0, 0, .08)); }
.inq-form { display: flex; flex-direction: column; gap: 30px; }
.inq-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.inq-title { color: var(--ink); font-size: 25px; font-weight: 700; }
.inq-sub { color: var(--gray); font-size: 18px; font-weight: 500; line-height: 24px; }
.inq-field { display: flex; flex-direction: column; gap: 10px; }
.inq-label { color: var(--ink-2); font-size: 18px; font-weight: 700; line-height: 24px; }
.req { color: var(--red); font-weight: 400; }
.inq-input {
  display: block; width: 100%; height: 50px; padding: 0 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--ink); font-size: 16px; font-weight: 400; transition: border-color .2s;
}
.inq-input::placeholder { color: var(--gray-2); opacity: 1; }
.inq-input:hover { border-color: #c9d2dc; }
.inq-input:focus { outline: 0; border-color: var(--blue); }
.inq-input[aria-invalid="true"] { border-color: var(--red); }
.inq-select { appearance: none; -webkit-appearance: none; padding-right: 60px; background: #fff url(/assets/common/select-arrow.webp) right 18px center / 30px 30px no-repeat; cursor: pointer; }
/* 디자인 드롭다운 (JS 가 select 를 감싸 버튼 + 목록으로 바꿈) */
.csel { position: relative; }
.csel-native { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; }
.csel-btn {
  display: flex; align-items: center; padding-right: 60px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #fff url(/assets/common/select-arrow.webp) right 18px center / 30px 30px no-repeat; cursor: pointer;
}
.csel.is-open .csel-btn { border-color: var(--blue); }
.csel-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 0px); z-index: 30; max-height: 360px; overflow-y: auto; padding: 0;
  background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .1); border-radius: 0 0 8px 8px;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
.csel.is-open .csel-list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.csel-list [role="option"] {
  display: flex; align-items: center; min-height: 50px; padding: 0 19px; color: var(--ink); font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background-color .3s var(--ease-out);
}
.csel-list [role="option"].is-active, .csel-list [role="option"][aria-selected="true"] { background: var(--gray-3); }
@media (max-width: 1023px) { .csel-list [role="option"] { font-size: 13px; } }
@media (max-width: 767px) { .csel-list [role="option"] { min-height: 40px; } }
.inq-textarea { height: 200px; padding: 14px 18px; resize: vertical; line-height: 1.5; }
.inq-err { display: none; margin-top: -4px; color: var(--red); font-size: 14px; font-weight: 500; }
.inq-err:not(:empty) { display: block; }
.inq-agree { position: relative; display: flex; align-items: center; gap: 20px; padding: 25px 23px; border-radius: 8px; background: var(--bg-soft-2); }
.inq-check {
  flex: none; appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--gray-3); border-radius: 5px; background: #fff; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.inq-check:checked { border-color: var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.inq-agree label { display: flex; flex-direction: column; gap: 5px; font-size: 18px; cursor: pointer; }
.inq-agree-title { color: var(--ink); font-weight: 700; }
.inq-agree-desc { color: var(--gray-3); font-weight: 500; }
.inq-agree-more { margin-left: auto; align-self: flex-start; color: var(--gray-3); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.inq-err-agree { margin-top: -20px; }
.inq-submit {
  height: 70px; border-radius: 8px; background: var(--gray-3); color: #fff; font-size: 20px; font-weight: 700;
  transition: background-color .3s var(--ease-out);
}
.inq-form.is-ready .inq-submit { background: var(--blue); }
.inq-form.is-ready .inq-submit:hover { background: var(--blue-dark); }
.inq-submit:disabled { cursor: wait; opacity: .7; }
.inq-msg { margin-top: -14px; font-size: 16px; font-weight: 600; text-align: center; }
.inq-msg:empty { display: none; }
.inq-msg.is-ok { color: var(--blue); }
.inq-msg.is-error { color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 1023px) {
  .consult { padding: 100px 20px; }
  .consult-card { width: 600px; padding: 66px 40px; }
  .inq-form { gap: 20px; }
  .inq-head { gap: 5px; }
  .inq-title { font-size: 20px; }
  .inq-sub { font-size: 15px; line-height: normal; }
  .inq-label { font-size: 15px; line-height: normal; }
  .inq-input { font-size: 13px; }
  .inq-textarea { height: 100px; }
  .inq-agree { min-height: 70px; padding: 11px 23px; }
  .inq-agree label { font-size: 15px; }
  .inq-agree-desc { font-size: 12px; }
  .inq-submit { font-size: 18px; }
  .inq-err-agree { margin-top: -10px; }
  .inq-msg { margin-top: -6px; }
}
@media (max-width: 767px) {
  .consult { padding: 40px 20px; }
  .consult-card { width: 335px; padding: 31px 20px; }
  .inq-label { line-height: 24px; }
  .inq-form { gap: 10px; }
  .inq-head { gap: 5px; }
  .inq-input { height: 40px; }
  .inq-select { background-size: 30px 30px; }
  .inq-textarea { height: 120px; }
  .inq-agree { gap: 10px; padding: 12px 23px; min-height: 72px; }
  .inq-agree label { font-size: 15px; }
  .inq-agree-more { display: none; }
  .inq-submit { height: 50px; font-size: 15px; }
  .inq-err { font-size: 12px; }
  .inq-err-agree { margin-top: 0; }
  .inq-msg { margin-top: 0; font-size: 14px; }
}

/* ───────── 푸터 ───────── */
.ft { border-top: 1px solid rgba(0, 0, 0, .1); background: #f5f6fa; color: rgba(0, 0, 0, .55); font-size: 16px; font-weight: 500; letter-spacing: -0.08px; }
.ft-inner { display: flex; gap: 120px; width: min(var(--wrap), 100% - 40px); min-height: 449px; margin-inline: auto; padding: 80px 72px 80px 0; }
.ft-main { flex: 1; display: flex; flex-direction: column; gap: 56px; }
.ft-company { display: flex; flex-direction: column; gap: 21px; }
.ft-logo { width: 107px; height: auto; }
.ft-info { line-height: 1.6; padding-bottom: 51.2px; }
.ft-info div { display: flex; gap: .3em; }
.ft-info dt { font-weight: 700; }
.ft-links { display: flex; align-items: center; gap: 24px; line-height: 1.45; }
.ft-links a:hover, .ft-cs a:hover { color: rgba(0, 0, 0, .8); }
.ft-social { display: block; width: 24px; height: 24px; }
.ft-cs { flex: none; display: flex; flex-direction: column; gap: 8px; width: 194px; line-height: 1.45; white-space: nowrap; }
.ft-cs-title { padding-bottom: 16px; color: #000; font-weight: 700; }
@media (max-width: 1023px) {
  .ft-inner { width: auto; padding: 80px 132px 80px 100px; }
}
@media (max-width: 767px) {
  .ft { font-size: 15px; letter-spacing: -0.075px; }
  .ft-inner { flex-direction: column; gap: 56px; min-height: 639px; padding: 80px 35px; }
  .ft-main { display: contents; }
  .ft-company { order: 1; }
  .ft-cs { order: 2; width: 225px; white-space: normal; }
  .ft-links { order: 3; }
  .ft-info { padding-bottom: 48px; }
}

/* 스크롤하면 나타나기 (JS 가 .is-in 추가, 동작 줄이기 설정 존중) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}