/* =========================================================================
   nsiajob — PROJECT THEME
   자격증·취업 포털. Brand = 신뢰감 있는 파랑(blue). This file is the ONE
   place color/mood is fixed for this product; it only overrides the
   ◆ PROJECT KNOB tokens + adds portal-specific layout helpers. It sits ON
   TOP of the design system (styles.css) — it never redefines the system.
   ========================================================================= */

:root {
  /* ◆ Brand palette — 파랑. saturation kept < 80%, single accent ------- */
  --accent: #1f5fd0;
  --accent-hover: #164bad;
  --accent-weak: #eaf1fd;
  --accent-contrast: #ffffff;
  --accent-text: #1a4fb0;

  /* Deep navy for hero / footer surfaces ------------------------------ */
  --navy: #0f2a5e;
  --navy-2: #12356f;

  /* Page base — clean institutional white ----------------------------- */
  --bg: #f4f6fb;          /* portal grey-blue canvas */
  --surface: #ffffff;
  --surface-2: #f4f6fb;
  --surface-3: #e9eef7;
  --border: #e2e7f0;
  --border-strong: #d2d9e6;
  --border-subtle: #edf0f6;

  --ring: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---- App shell ------------------------------------------------------- */
.nsx-page { background: var(--bg); min-height: 100vh; }
.nsx-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }

/* ---- Top utility bar ------------------------------------------------- */
.nsx-utility { background: var(--navy); color: #cdd8ec; font-size: 13px; }
.nsx-utility .nsx-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 18px; height: 38px; }
.nsx-utility a { color: inherit; text-decoration: none; opacity: 0.9; }
.nsx-utility a:hover { opacity: 1; color: #fff; }
.nsx-utility .sep { width: 1px; height: 12px; background: rgba(255,255,255,0.18); }

/* ---- Header ---------------------------------------------------------- */
.nsx-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-sticky); }
.nsx-header .nsx-wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.nsx-logo { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; color: var(--navy); text-decoration: none; }
.nsx-logo b { color: var(--accent); }
.nsx-logo .dot { color: var(--accent); }
.nsx-nav { display: flex; align-items: center; gap: 4px; margin-left: 4px; }
.nsx-nav a { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; transition: var(--transition-colors); white-space: nowrap; }
.nsx-nav a:hover { background: var(--accent-weak); color: var(--accent-text); }
.nsx-nav a.is-active { color: var(--accent-text); }
.nsx-nav a .caret { font-size: 12px; opacity: 0.6; }
.nsx-header__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* header quick search (compact) */
.nsx-hsearch { position: relative; }
.nsx-hsearch input { width: 220px; height: 40px; padding: 0 38px 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-2); font-size: 14px; transition: var(--transition-control); }
.nsx-hsearch input:focus-visible { outline: none; width: 260px; border-color: var(--accent); background: #fff; box-shadow: var(--focus-ring); }
.nsx-hsearch .ph { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }

/* ---- Hero ------------------------------------------------------------ */
.nsx-hero { background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); }
.nsx-hero .nsx-wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; padding-block: 44px 40px; }
.nsx-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--accent-text); background: var(--accent-weak); padding: 6px 12px; border-radius: var(--radius-pill); margin-bottom: 18px; }
.nsx-hero h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -0.03em; color: var(--navy); margin-bottom: 14px; }
.nsx-hero h1 em { font-style: normal; color: var(--accent); }
.nsx-hero__sub { font-size: 17px; color: var(--text-muted); line-height: 1.6; max-width: 30ch; margin-bottom: 24px; }

/* big hero search */
.nsx-bigsearch { position: relative; max-width: 460px; margin-bottom: 18px; }
.nsx-bigsearch input { width: 100%; height: 56px; padding: 0 56px 0 20px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); background: #fff; font-size: 16px; box-shadow: var(--shadow-sm); transition: var(--transition-control); }
.nsx-bigsearch input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.nsx-bigsearch button { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: none; border-radius: var(--radius-md); background: var(--accent); color: #fff; cursor: pointer; font-size: 20px; display: grid; place-items: center; transition: var(--transition-control); }
.nsx-bigsearch button:hover { background: var(--accent-hover); }

/* realtime dropdown */
.nsx-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; z-index: var(--z-overlay); }
.nsx-suggest[hidden] { display: none; }
.nsx-suggest a { display: flex; align-items: center; gap: 10px; padding: 11px 18px; text-decoration: none; color: var(--text); font-size: 15px; transition: background var(--dur-fast); }
.nsx-suggest a:hover, .nsx-suggest a.is-cursor { background: var(--accent-weak); }
.nsx-suggest a mark { background: none; color: var(--accent); font-weight: 700; }
.nsx-suggest a .cat { margin-left: auto; font-size: 12px; color: var(--text-subtle); }
.nsx-suggest .empty { padding: 16px 18px; color: var(--text-subtle); font-size: 14px; }

.nsx-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* hero image placeholder slot */
.nsx-imgslot { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-3); border: 1.5px dashed var(--border-strong); display: grid; place-items: center; text-align: center; color: var(--text-subtle); }
.nsx-hero .nsx-imgslot { aspect-ratio: 4 / 3.2; }
.nsx-imgslot__inner { padding: 24px; max-width: 30ch; }
.nsx-imgslot .ph { font-size: 34px; color: var(--accent); opacity: 0.55; }
.nsx-imgslot b { display: block; margin: 10px 0 4px; color: var(--text-muted); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.nsx-imgslot span { font-size: 12.5px; line-height: 1.5; }

/* ---- Main 3-column grid --------------------------------------------- */
.nsx-main { padding-block: 32px 56px; }
.nsx-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr) 300px; gap: 24px; align-items: start; }

/* section blocks / panels */
.nsx-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: clip; }
.nsx-panel + .nsx-panel { margin-top: 20px; }
.nsx-panel__head { display: flex; align-items: center; gap: 8px; padding: 15px 18px; border-bottom: 1px solid var(--border-subtle); }
.nsx-panel__head h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); }
.nsx-panel__head .ph { color: var(--accent); font-size: 18px; }
.nsx-panel__head a { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-subtle); text-decoration: none; }
.nsx-panel__head a:hover { color: var(--accent-text); }
.nsx-panel__body { padding: 16px 18px; }
.nsx-panel__body.flush { padding: 6px 8px; }

/* aside nav (등급별) */
.nsx-aside-title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); padding: 4px 10px; margin-bottom: 4px; }
.nsx-gradelist { display: flex; flex-direction: column; }
.nsx-gradelist a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); text-decoration: none; color: var(--text); font-size: 14.5px; font-weight: 500; transition: var(--transition-colors); }
.nsx-gradelist a:hover { background: var(--accent-weak); color: var(--accent-text); }
.nsx-gradelist a.is-active { background: var(--accent); color: #fff; font-weight: 600; }
.nsx-gradelist a .n { margin-left: auto; font-size: 12px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.nsx-gradelist a:hover .n, .nsx-gradelist a.is-active .n { color: inherit; }

/* ranking list (인기 Top 10) */
.nsx-rank { display: flex; flex-direction: column; }
.nsx-rank__row { display: flex; align-items: center; gap: 14px; padding: 13px 10px; border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: background var(--dur-fast); }
.nsx-rank__row:hover { background: var(--surface-2); }
.nsx-rank__num { width: 26px; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--text-subtle); }
.nsx-rank__row:nth-child(-n+3) .nsx-rank__num { color: var(--accent); }
.nsx-rank__main { min-width: 0; }
.nsx-rank__name { font-size: 15.5px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.01em; }
.nsx-rank__meta { display: flex; gap: 10px; margin-top: 3px; font-size: 12.5px; color: var(--text-subtle); }
.nsx-rank__meta .pass { color: var(--accent-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.nsx-rank__delta { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nsx-rank__delta.up { color: #d13b3b; }
.nsx-rank__delta.down { color: #2b6fd0; }
.nsx-rank__delta.same { color: var(--text-disabled); }
.nsx-fav { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 20px; color: var(--border-strong); padding: 4px; line-height: 1; transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-fast); }
.nsx-fav:hover { color: #f0b400; transform: scale(1.12); }
.nsx-fav.is-on { color: #f5b800; }

/* application (원서접수) banner */
.nsx-apply { display: flex; align-items: center; gap: 16px; padding: 18px; background: linear-gradient(100deg, var(--navy), var(--navy-2)); border-radius: var(--radius-lg); color: #fff; }
.nsx-apply__icon { width: 46px; height: 46px; border-radius: var(--radius-md); background: rgba(255,255,255,0.14); display: grid; place-items: center; font-size: 24px; flex-shrink: 0; }
.nsx-apply h3 { font-size: 16px; font-weight: 700; margin-bottom: 3px; color: #fff; }
.nsx-apply p { font-size: 13.5px; color: #c3d0ea; }
.nsx-apply .ds-num { color: #fff; font-weight: 700; }

/* right-rail widgets */
.nsx-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nsx-tool { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 8px; border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: var(--text); text-align: center; transition: var(--transition-control); }
.nsx-tool:hover { border-color: var(--accent); background: var(--accent-weak); color: var(--accent-text); transform: translateY(-2px); }
.nsx-tool .ph { font-size: 24px; color: var(--accent); }
.nsx-tool span { font-size: 13px; font-weight: 600; }

/* jobs list */
.nsx-jobs { display: flex; flex-direction: column; }
.nsx-job { display: block; padding: 12px 4px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border-subtle); }
.nsx-job:last-child { border-bottom: none; }
.nsx-job:hover .nsx-job__title { color: var(--accent-text); }
.nsx-job__title { font-size: 14.5px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.01em; }
.nsx-job__co { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.nsx-job__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

/* mini calculator widget */
.nsx-calc label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.nsx-calc__row { display: flex; gap: 8px; margin-bottom: 8px; }
.nsx-calc__row .t-input { text-align: center; }
.nsx-calc__result { margin-top: 10px; padding: 12px; border-radius: var(--radius-md); background: var(--surface-2); text-align: center; font-size: 14px; }
.nsx-calc__result b { font-size: 22px; font-family: var(--font-mono); }
.nsx-calc__result.pass b { color: var(--accent); }
.nsx-calc__result.fail b { color: #d13b3b; }

/* ad slot */
.nsx-ad { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, #eef2f9 10px, #eef2f9 20px); color: var(--text-subtle); text-align: center; padding: 28px 16px; font-size: 13px; }
.nsx-ad b { display: block; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.06em; font-size: 11px; }

/* section label above panels in center col */
.nsx-lead { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.nsx-lead h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); }
.nsx-lead p { font-size: 13px; color: var(--text-subtle); }

/* ---- Footer ---------------------------------------------------------- */
.nsx-footer { background: var(--navy); color: #b7c4dc; padding-block: 40px 32px; font-size: 13.5px; }
.nsx-footer .nsx-wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.nsx-footer h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: 0.01em; }
.nsx-footer a { display: block; color: #b7c4dc; text-decoration: none; padding: 4px 0; }
.nsx-footer a:hover { color: #fff; }
.nsx-footer__brand .nsx-logo { color: #fff; margin-bottom: 12px; }
.nsx-footer__legal { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 28px; padding-top: 20px; line-height: 1.7; color: #8798b6; font-size: 12.5px; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
  .nsx-grid { grid-template-columns: minmax(0,1fr) 300px; }
  .nsx-col-left { display: none; }
  .nsx-nav a:nth-child(n+6) { display: none; }
}
@media (max-width: 860px) {
  .nsx-hero .nsx-wrap { grid-template-columns: 1fr; }
  .nsx-hero .nsx-imgslot { aspect-ratio: 16/9; }
  .nsx-grid { grid-template-columns: 1fr; }
  .nsx-col-right { order: 3; }
  .nsx-nav, .nsx-hsearch { display: none; }
  .nsx-footer .nsx-wrap { grid-template-columns: 1fr 1fr; }
}