/* public_html/assets/common/exhibitors.check.css
   NX Exhibitors Check (page only) — Ultimate v1 (Stable)
   - Depends on /assets/common/online.css (NX base components)
   - Uses site global color tokens:
     --color-primary / --color-secondary / --color-accent / --color-bg
     --c-white / --c-ink / --c-ink-2
   - Breakpoints: 1040 / 640
   - Purpose: tidy + consistent + no surprise side-effects
*/

/* =========================================================
   X0) TOKENS (page-only)
========================================================= */
:root {
  /* 고정 헤더/상단 고정영역 높이만큼(사이트마다 조절) */
  --nx-scroll-pad: 160px;

  /* page-only spacing */
  --nx-check-radius: 16px;
  --nx-check-gap: 18px;

  /* neutral helpers (브랜드색은 토큰만 사용) */
  --nx-border: rgba(0, 0, 0, 0.08);
  --nx-border-soft: rgba(0, 0, 0, 0.06);
  --nx-text: var(--c-ink, #111);
  --nx-text-2: var(--c-ink-2, #333);
  --nx-muted: rgba(0, 0, 0, 0.62);
}

/* =========================================================
   X1) Native validation scroll fix
   - required/validation focus 시 fixed header 아래로 숨는 문제 방지
========================================================= */
html {
  scroll-padding-top: var(--nx-scroll-pad);
}
input,
select,
textarea {
  scroll-margin-top: var(--nx-scroll-pad);
}

/* =========================================================
   X2) Layout
========================================================= */
.nx-check {
  padding: 24px 0 70px;
}

/* hero bullets */
.nx-check .nx-card--hero .nx-card-head {
  padding-bottom: 0;
}
.nx-check .nx-bullets {
  margin: 12px 0 0;
  padding-left: 18px;
}
.nx-check .nx-bullets li {
  margin: 6px 0;
  color: var(--nx-text-2);
}

/* grid */
.nx-check-page .nx-check-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--nx-check-gap);
  margin-top: 18px;
  align-items: start;
}

/* =========================================================
   X3) Card tone (subtle)
========================================================= */
.nx-check-page .nx-card {
  border: 1px solid var(--nx-border-soft);
  border-radius: var(--nx-check-radius);
  overflow: hidden;
  background: var(--c-white, #fff);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.nx-check-page .nx-card-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--nx-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nx-check-page .nx-card-body {
  padding: 16px 18px;
}

.nx-check-page .nx-card-title {
  color: var(--nx-text);
  letter-spacing: -0.02em;
}

/* badge */
.nx-check-page .nx-badge--req {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--c-white, #fff);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* =========================================================
   X4) Left card (Pre-check)
========================================================= */
.nx-check-page .nx-check-aside .nx-card-body {
  display: grid;
  gap: 14px;
}

/* 작은 안내 박스 */
.nx-check-page .nx-check-aside .nx-mini {
  padding: 14px;
  border: 1px solid var(--nx-border-soft);
  border-radius: 14px;
  background: var(--c-white, #fff);
}

/* 제목: 왼쪽 점 포인트(브랜드 토큰 사용) */
.nx-check-page .nx-check-aside .nx-mini-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--nx-text);
  margin-bottom: 8px;
}
.nx-check-page .nx-check-aside .nx-mini-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.nx-check-page .nx-check-aside .nx-mini-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--nx-muted);
}

.nx-check-page .nx-check-aside .nx-divider {
  height: 1px;
  background: var(--nx-border);
}

/* 문의 링크 스타일 */
.nx-check-page .nx-check-aside a {
  color: var(--color-secondary);
  text-decoration: none;
}
.nx-check-page .nx-check-aside a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   X5) Right form (inputs + spacing)
========================================================= */
.nx-check-page .nx-check-form .nx-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

/* field */
.nx-check-page .nx-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nx-check-page .nx-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--nx-text);
}

/* input */
.nx-check-page .nx-input {
  width: 100%;
  max-width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--nx-border);
  border-radius: 12px;
  background: var(--c-white, #fff);
  color: var(--nx-text);
  box-sizing: border-box;
  appearance: auto; /* reset 충돌 대비 */
}
.nx-check-page .nx-input::placeholder {
  color: rgba(0, 0, 0, 0.38);
}
.nx-check-page .nx-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06); /* 중립 그림자 */
}

/* help */
.nx-check-page .nx-help {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.48);
}

/* confirm line */
.nx-check-page .nx-check-confirm {
  margin-top: 14px;
}
.nx-check-page .nx-checkline {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--nx-text-2);
}
.nx-check-page .nx-checkline input {
  width: 18px;
  height: 18px;
}

/* actions */
.nx-check-page .nx-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* buttons (NO heavy shadow)
   - online.css의 기본 버튼 스타일을 존중하되, 페이지 요구사항만 '가볍게' 강제
*/
.nx-check-page .nx-btn--primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--c-white, #fff) !important;
  box-shadow: none !important;
}
.nx-check-page .nx-btn--primary:hover {
  filter: brightness(0.96);
}

.nx-check-page .nx-btn--ghost {
  background: var(--c-white, #fff) !important;
  border: 1px solid var(--nx-border) !important;
  color: var(--nx-text) !important;
  box-shadow: none !important;
}
.nx-check-page .nx-btn--ghost:hover {
  border-color: var(--color-secondary) !important;
  color: var(--color-secondary) !important;
}

/* result box (dev placeholder) */
.nx-check-page .nx-result {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--nx-border);
  color: var(--nx-text);
}

.nx-mobile-block {
  display: none;
}

/* =========================================================
   X9) RESPONSIVE (1040 / 640)
========================================================= */
@media (max-width: 1040px) {
  :root {
    --nx-scroll-pad: 140px;
  }
  .nx-check-page .nx-check-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --nx-scroll-pad: 120px;
  }

  .nx-mobile-block {
    display: block;
  }
  .nx-desktop-only {
    display: none;
  }

  .nx-check-page .nx-check-form .nx-form-grid {
    grid-template-columns: 1fr;
  }

  .nx-check-page .nx-actions {
    flex-direction: column;
  }
}