/*
 * 자격증3001 인터페이스 품질 기준 v2
 * 버튼, 카드, 폼, 헤더의 시각 언어를 한 체계로 통합한다.
 */
:root {
  --j3q-brand-950: #0b2944;
  --j3q-brand-900: #123a63;
  --j3q-brand-800: #174a78;
  --j3q-brand-700: #1f5f91;
  --j3q-brand-100: #eaf2f8;
  --j3q-accent-700: #b64c13;
  --j3q-accent-600: #d45d18;
  --j3q-accent-100: #fff2e8;
  --j3q-ink: #152334;
  --j3q-muted: #607084;
  --j3q-line: #d6e0e8;
  --j3q-line-strong: #b9c9d7;
  --j3q-surface: #ffffff;
  --j3q-surface-soft: #f5f8fb;
  --j3q-focus: #f29a5b;
  --j3q-radius-control: 12px;
  --j3q-radius-card: 18px;
  --j3q-shadow-control: 0 1px 2px rgba(11, 41, 68, .12), 0 7px 18px rgba(11, 41, 68, .08);
  --j3q-shadow-card: 0 1px 2px rgba(11, 41, 68, .04), 0 12px 32px rgba(11, 41, 68, .07);
  --j3q-shadow-card-hover: 0 2px 5px rgba(11, 41, 68, .07), 0 18px 40px rgba(11, 41, 68, .11);
}

html { -webkit-tap-highlight-color: transparent; }
body { color: var(--j3q-ink); background: var(--j3q-surface-soft); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--j3q-focus) 78%, white);
  outline-offset: 3px;
}

/* Header */
.site-header {
  border-bottom-color: rgba(185, 201, 215, .82);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(11, 41, 68, .025);
}
.header-inner { min-height: 72px; }
.brand--image img.custom-logo {
  height: 46px;
  max-width: 206px;
}
.primary-nav > a,
.primary-nav .header-search > summary {
  min-height: 44px;
  padding-inline: 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--j3q-ink);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: -.012em;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.primary-nav > a::after { display: none; }
.primary-nav > a:hover,
.primary-nav .header-search > summary:hover {
  border-color: #e1e8ee;
  background: var(--j3q-surface-soft);
  color: var(--j3q-brand-900);
}
.primary-nav .primary-nav-cta {
  border-color: var(--j3q-brand-900);
  background: var(--j3q-brand-900);
  color: #fff;
  box-shadow: var(--j3q-shadow-control);
}
.primary-nav .primary-nav-cta:hover {
  border-color: var(--j3q-brand-800);
  background: var(--j3q-brand-800);
  color: #fff;
  transform: translateY(-1px);
}

/* Shared controls */
#main-content .button,
#main-content button.button,
.search-submit,
.cert-filter-form button,
.cert-filter-form > a,
.j3b-board-actions a,
.j3b-board-actions button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid var(--j3q-brand-900);
  border-radius: var(--j3q-radius-control);
  background: var(--j3q-brand-900);
  color: #fff;
  box-shadow: var(--j3q-shadow-control);
  font: inherit;
  font-size: .9rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.012em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
#main-content .button:hover,
#main-content button.button:hover,
.search-submit:hover,
.cert-filter-form button:hover,
.cert-filter-form > a:hover,
.j3b-board-actions a:hover,
.j3b-board-actions button:hover {
  border-color: var(--j3q-brand-800);
  background: var(--j3q-brand-800);
  color: #fff;
  box-shadow: 0 2px 4px rgba(11, 41, 68, .12), 0 10px 24px rgba(11, 41, 68, .12);
  transform: translateY(-1px);
}
#main-content .button:active,
#main-content button.button:active,
.search-submit:active,
.cert-filter-form button:active,
.cert-filter-form > a:active {
  box-shadow: 0 1px 2px rgba(11, 41, 68, .12);
  transform: translateY(0);
}
#main-content .button.secondary,
#main-content .button.outline,
#main-content button.button.outline,
#main-content .home-simple-secondary,
#main-content .home-simple-cbt-button {
  border-color: var(--j3q-line-strong);
  background: #fff;
  color: var(--j3q-brand-900);
  box-shadow: 0 1px 2px rgba(11, 41, 68, .06);
}
#main-content .button.secondary:hover,
#main-content .button.outline:hover,
#main-content button.button.outline:hover,
#main-content .home-simple-secondary:hover,
#main-content .home-simple-cbt-button:hover {
  border-color: var(--j3q-brand-700);
  background: var(--j3q-brand-100);
  color: var(--j3q-brand-950);
  box-shadow: 0 2px 5px rgba(11, 41, 68, .07), 0 8px 20px rgba(11, 41, 68, .08);
}
#main-content .button.secondary-dark {
  border-color: #2c658f;
  background: #fff;
  color: var(--j3q-brand-900);
}
#main-content .button.is-disabled,
#main-content .button[aria-disabled="true"],
#main-content button:disabled {
  border-color: #d6dee5;
  background: #e7ecf0;
  color: #778594;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Forms */
.search-field,
.cert-filter-form input,
.cert-filter-form select,
.cbt-custom-grid select,
.my-goal-form input {
  min-height: 48px;
  border: 1px solid var(--j3q-line-strong);
  border-radius: var(--j3q-radius-control);
  background: #fff;
  color: var(--j3q-ink);
  box-shadow: inset 0 1px 2px rgba(11, 41, 68, .035);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.search-field:focus,
.cert-filter-form input:focus,
.cert-filter-form select:focus,
.cbt-custom-grid select:focus,
.my-goal-form input:focus {
  border-color: var(--j3q-brand-700);
  box-shadow: 0 0 0 4px rgba(31, 95, 145, .11);
  outline: 0;
}
.search-submit { border-radius: var(--j3q-radius-control); }

/* Homepage */
.home-simple-hero {
  border-bottom-color: #dce6ed;
  background:
    radial-gradient(circle at 16% 12%, rgba(31, 95, 145, .1), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(212, 93, 24, .08), transparent 28%),
    linear-gradient(180deg, #fbfdff 0%, #f4f8fb 100%);
}
.home-simple-eyebrow {
  color: var(--j3q-accent-700);
  letter-spacing: .075em;
}
.home-simple-hero h1 {
  color: var(--j3q-brand-950);
  text-wrap: balance;
}
.home-simple-lead { color: var(--j3q-muted); text-wrap: pretty; }
.home-simple-actions .button { min-width: 168px; }
.home-simple-certifications { background: #fff; }
.home-simple-cert-card {
  border-color: var(--j3q-line);
  border-radius: var(--j3q-radius-card);
  box-shadow: var(--j3q-shadow-card);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.home-simple-cert-card.is-active { border-color: #c5d5e1; box-shadow: var(--j3q-shadow-card); }
.home-simple-cert-card.is-active:hover {
  border-color: #8eafc7;
  box-shadow: var(--j3q-shadow-card-hover);
  transform: translateY(-3px);
}
.home-simple-status {
  border: 1px solid #d4e4ef;
  background: #edf6fb;
  color: var(--j3q-brand-700);
}
.home-simple-card-link { color: var(--j3q-brand-700); }
.home-simple-cbt {
  background: linear-gradient(135deg, var(--j3q-brand-950), var(--j3q-brand-800));
}
.home-simple-question-card,
.certification-hero,
.certification-section,
.exam-header,
.exam-content,
.cbt-picker,
.cbt-progress-card,
.cbt-question-map,
.cbt-stage,
.my-learning-header,
.my-account-card,
.my-progress-card {
  border-color: var(--j3q-line);
  border-radius: var(--j3q-radius-card);
  box-shadow: var(--j3q-shadow-card);
}
.home-simple-board-tabs label {
  border-color: var(--j3q-line-strong);
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(11, 41, 68, .035);
}
.home-simple-board-tabs label:hover { border-color: #8eafc7; background: #f2f7fa; }

/* Certification and exam lists */
.certification-quick-nav a,
.cert-stage-tabs a,
.cert-exam-actions a {
  border-color: var(--j3q-line);
  border-radius: 11px;
  background: #fff;
  color: var(--j3q-brand-900);
  box-shadow: 0 1px 2px rgba(11, 41, 68, .04);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.certification-quick-nav a:hover,
.cert-stage-tabs a:hover,
.cert-exam-actions a:hover {
  border-color: #91b0c7;
  background: #f4f8fb;
  box-shadow: 0 7px 18px rgba(11, 41, 68, .07);
  transform: translateY(-1px);
}
.cert-exam-actions a:first-child {
  border-color: var(--j3q-brand-900);
  background: var(--j3q-brand-900);
  color: #fff;
  box-shadow: 0 1px 2px rgba(11, 41, 68, .11), 0 5px 14px rgba(11, 41, 68, .08);
}
.cert-exam-actions a:first-child:hover { border-color: var(--j3q-brand-800); background: var(--j3q-brand-800); }

/* CBT controls: navigation stays quiet, the confirmation action stays obvious. */
.cbt-controls .button { min-height: 46px; }
.cbt-controls .cbt-check,
.cbt-controls .cbt-confirm,
.cbt-controls [data-cbt-next],
.cbt-controls .cbt-submit { box-shadow: var(--j3q-shadow-control); }
.cbt-controls .cbt-flag[aria-pressed="true"],
.cbt-controls .cbt-favorite[aria-pressed="true"] {
  border-color: #cf8c2b;
  background: #fff7e6;
  color: #8a5608;
}
.cbt-map-filters button,
.cbt-accessibility-tools button {
  border-radius: 9px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* Written-exam learning guide: answer material stays inside the answer disclosure. */
.exam-learning-guide {
  margin: 22px 0;
  padding: 22px 24px;
  border: 0;
  border-radius: 14px;
  background: #edf3f8;
  color: var(--j3q-ink);
}
.exam-learning-guide h4,
.exam-learning-guide h5 {
  margin: 0;
  color: var(--j3q-brand-950);
  line-height: 1.35;
}
.exam-learning-guide h4 { font-size: 1.08rem; }
.exam-learning-guide h5 { margin-top: 20px; font-size: .96rem; }
.exam-learning-objective {
  margin: 10px 0 0;
  font-weight: 750;
  line-height: 1.7;
}
.exam-learning-steps {
  display: grid;
  gap: 9px;
  margin: 10px 0 0;
  padding-left: 1.45rem;
}
.exam-learning-steps li { padding-left: 4px; line-height: 1.65; }
.exam-learning-trap,
.exam-learning-transfer,
.exam-learning-locator {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  line-height: 1.65;
}
.exam-learning-trap { border: 1px solid #f0d49a; background: #fff9ea; }
.exam-learning-transfer { border: 1px solid #bcd8e9; background: #f2f8fc; }
.exam-learning-locator { border: 1px dashed #b7c8d5; background: #fff; color: var(--j3q-muted); font-size: .9rem; }

@media (max-width: 820px) {
  .container { width: min(100% - 32px, 1120px); }
  .site-header { min-height: 64px; }
  .header-inner { min-height: 64px; gap: 8px; }
  .brand--image img.custom-logo { height: 34px; max-width: 112px; }
  .primary-nav { display: none !important; }
  .mobile-header-actions { display: flex; gap: 3px; }
  .mobile-header-actions > a,
  .mobile-header-actions > button,
  .mobile-header-actions .header-search > summary {
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--j3q-brand-900);
    font-size: .72rem;
    font-weight: 850;
  }
  .mobile-header-actions > a:hover,
  .mobile-header-actions > button:hover,
  .mobile-header-actions .header-search > summary:hover {
    border-color: #dce5ec;
    background: #f1f6f9;
  }
  .mobile-header-link--primary {
    border-color: var(--j3q-brand-900) !important;
    background: var(--j3q-brand-900) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(11, 41, 68, .1), 0 5px 14px rgba(11, 41, 68, .08);
  }
  .mobile-menu-toggle { flex-direction: column; gap: 3px; }
  .mobile-menu-icon { position: relative; display: block; width: 18px; height: 14px; }
  .mobile-menu-icon span {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transform-origin: center;
    transition: top .16s ease, transform .16s ease, opacity .16s ease;
  }
  .mobile-menu-icon span:nth-child(1) { top: 0; }
  .mobile-menu-icon span:nth-child(2) { top: 6px; }
  .mobile-menu-icon span:nth-child(3) { top: 12px; }
  .mobile-menu-label { font-size: .58rem; line-height: 1; }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
  .mobile-site-menu {
    padding: 12px 0 16px;
    border-top-color: var(--j3q-line);
    box-shadow: 0 18px 40px rgba(11, 41, 68, .16);
  }
  .mobile-site-menu a {
    border-color: var(--j3q-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(11, 41, 68, .035);
  }
  .mobile-site-menu a:hover { border-color: #94b1c7; background: #f4f8fb; }

  .home-simple-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-simple-actions .button { min-width: 0; }
  .home-simple-cert-card { box-shadow: 0 1px 2px rgba(11, 41, 68, .04), 0 8px 22px rgba(11, 41, 68, .06); }
  .certification-hero-actions .button { width: 100%; padding-inline: 12px; }
  .cert-exam-actions a { min-height: 44px; font-size: .78rem; }
  .exam-learning-guide { padding: 18px 16px; }
}

@media (max-width: 420px) {
  .container { width: min(100% - 28px, 1120px); }
  .brand--image img.custom-logo { max-width: 98px; }
  .mobile-header-actions > a,
  .mobile-header-actions > button,
  .mobile-header-actions .header-search > summary { min-width: 40px; padding-inline: 6px; }
  .home-simple-actions { grid-template-columns: 1fr; }
  .home-simple-cert-grid { grid-template-columns: 1fr; }
  .home-simple-cert-card { min-height: 140px; }
  #main-content .button,
  #main-content button.button { min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  #main-content .button,
  #main-content button.button,
  .home-simple-cert-card,
  .certification-quick-nav a,
  .cert-stage-tabs a,
  .cert-exam-actions a { transition: none; }
}

/* The ranking eyebrow sits on white, unlike the dark ranking-page hero. */
.j3r-home .j3r-home-heading p { color: #8a3d00; }