/* =============================================================
   두두자격지원센터 — 공통 스타일 (시니어 접근성)

   [색을 이렇게 정한 이유]
   1. 배경을 순백이 아니라 베이지로.
      나이가 들면 수정체가 빛을 흩어뜨려 순백 화면이 눈부십니다.
   2. 글자를 순검정이 아니라 따뜻한 진갈색으로.
      순검정+순백은 대비가 지나쳐 글자가 번져 보입니다. 대비 13:1로 충분합니다.
   3. 파랑 계열을 쓰지 않습니다.
      나이가 들면 수정체가 누레져 파랑·보라 구분이 어려워집니다.
      진갈색(주요) + 테라코타(강조) 두 색만 씁니다.
   4. 색만으로 뜻을 나타내지 않습니다.
      고른 카드는 색 + 두꺼운 테두리 + "✔ 선택됨" 글자, 세 가지로 표시합니다.
   5. 모서리를 둥글게, 그림자를 옅게.
      각진 검정 테두리는 답답해 보이고, 경계는 그림자로도 충분히 구분됩니다.

   근거: 이용자 50대 41% / 60대 38% / 70대 이상 14%
   ============================================================= */

:root {
  --bg:         #F7F2E9;   /* 베이지 */
  --bg-2:       #FBF8F2;
  --card:       #FFFFFF;
  --band:       #EFE7D9;

  --ink:        #2B2118;   /* 본문 (배경 대비 13.4:1) */
  --ink-soft:   #6B5B4B;   /* 보조 (대비 5.6:1) */

  --brand:      #4A3529;   /* 진갈색 — 메뉴바, 주요 버튼 (흰 글씨 대비 10.1:1) */
  --brand-2:    #33241B;
  --brand-pale: #F0E7DC;

  --accent:     #BE5427;   /* 테라코타 — 강조, 현재 위치 */
  --accent-pale:#FAEADF;

  --ok:         #2F6B4F;   /* 짙은 초록 — 제대로 넣으셨을 때 (배경 대비 5.6:1) */

  --line:       #E3D8C6;
  --gray:       #9C8C7A;   /* 흐린 글씨 — 선택사항 표시 등 */
}

* { box-sizing: border-box; }

body {
  font-family: "Pretendard", -apple-system, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: -0.015em;
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  padding: 0 0 40px;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

h1 { font-size: 34px; line-height: 1.4; margin: 0 0 14px; letter-spacing: -0.03em; }
h2 { font-size: 26px; line-height: 1.4; margin: 40px 0 16px; letter-spacing: -0.02em; }
h3 { font-size: 22px; margin: 24px 0 8px; }
p  { margin: 0 0 14px; }
b, strong { font-weight: 700; }
a { color: var(--brand); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 4px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}


/* ---------- 맨 위 메뉴바 ----------
   두 줄입니다.
     윗줄 — 로고(왼쪽) · 접수 확인 · 직원용(오른쪽)
     아랫줄 — 홈 · 접수 신청 · 물어보기
   화면마다 높이가 같아야 옮겨 다닐 때 화면이 튀지 않습니다. */

.nav { background: var(--brand); }
.nav-inner { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* 윗줄 */
.nav-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0 10px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.nav .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.logo-mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; letter-spacing: -0.05em; flex: 0 0 40px;
}
.logo-name { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -0.03em; }

.nav .util { display: flex; list-style: none; margin: 0; padding: 0; gap: 4px; }
.nav .util a {
  display: inline-flex; align-items: center; font-size: 16px; font-weight: 600;
  color: #D3C1AF; text-decoration: none; padding: 8px 14px; border-radius: 999px;
}
.nav .util a:hover { background: var(--brand-2); color: #fff; }
.nav .util a.on { background: var(--bg); color: var(--brand); font-weight: 800; }

/* 아랫줄 */
.nav-bottom { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }
.nav-bottom a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 19px; font-weight: 600; color: #E8DCCF; text-decoration: none;
  padding: 0 20px; min-height: 58px; border-radius: 14px 14px 0 0;
}
.nav-bottom a:hover { background: var(--brand-2); color: #fff; }
.nav-bottom a.on { color: var(--brand); background: var(--bg); font-weight: 800; }
.nav-bottom .home svg { width: 22px; height: 22px; }
.nav .menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 4px; }

.nav + * { margin-top: 0; }
.wrap { padding-top: 28px; }

@media (max-width: 640px) {
  .logo-name { font-size: 18px; }
  .nav-bottom a { padding: 0 14px; font-size: 18px; min-height: 52px; }
  .nav .util a { font-size: 15px; padding: 7px 12px; }
}

/* ---------- 카드 ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 3px 14px rgba(74, 53, 41, .08);
  margin-bottom: 22px;
  padding: 0 30px 28px;
  overflow: hidden;
}
.card h2 {
  background: var(--brand-pale); color: var(--brand);
  margin: 0 -30px 26px; padding: 20px 30px;
  font-size: 24px; font-weight: 800;
  border-bottom: 1px solid var(--line);
}
.card > *:last-child { margin-bottom: 0; }

.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 20px; font-weight: 800; margin-right: 10px; vertical-align: -8px;
}

.notice {
  background: var(--accent-pale);
  border: 1px solid #EBC9B2;
  border-left: 8px solid var(--accent);
  border-radius: 14px;
  padding: 14px 20px; margin: 22px 0 0; font-weight: 600; font-size: 18px;
}


/* ---------- 자격증 고르는 카드 ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.pick {
  display: block; width: 100%; text-align: left;
  font-family: inherit; font-size: 20px; color: var(--ink); background: var(--card);
  border: 2px solid var(--line); border-radius: 16px;
  padding: 20px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(74, 53, 41, .05);
  transition: border-color .12s, background .12s;
}
.pick:hover { border-color: var(--accent); background: #FFFCF8; }

/* 고른 것: ① 두꺼운 테라코타 테두리 ② 옅은 배경 ③ "✔ 선택됨" 글자 */
.pick.on {
  border: 5px solid var(--accent); background: var(--accent-pale); padding: 17px;
  box-shadow: 0 4px 16px rgba(190, 84, 39, .18);
}

.pick .cert-name { font-size: 25px; font-weight: 800; display: block; letter-spacing: -0.03em; }
.pick .cert-info { font-size: 17px; color: var(--ink-soft); display: block; margin-top: 4px; }
.pick .cert-fee  { font-size: 21px; font-weight: 800; display: block; margin-top: 12px; color: var(--brand); }
.pick .cert-note {
  font-size: 17px; display: block; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line); color: var(--accent); font-weight: 600;
}
.pick .picked { display: none; font-size: 20px; font-weight: 800; margin-top: 14px; color: var(--accent); }
.pick.on .picked { display: block; }


/* ---------- 입력칸 ---------- */

label { display: block; font-size: 22px; font-weight: 700; margin: 28px 0 8px; }
.optional { font-weight: 400; font-size: 18px; color: var(--ink-soft); }

input, textarea {
  width: 100%; font-family: inherit; font-size: 21px;
  padding: 16px 18px; min-height: 62px;
  border: 2px solid var(--line); border-radius: 14px;
  background: var(--bg-2); color: var(--ink);
}
textarea { min-height: 104px; }
input:focus, textarea:focus { border-color: var(--accent); background: #fff; }

/* 「여기를 채워 주십시오」 상자 안에서는 바깥 테두리 하나만 보이게 합니다.
   안팎이 둘 다 켜지면 테두리가 이중으로 보여 헷갈리십니다. */
.field.next-up input,
.field.next-up textarea,
.field.next-up input:focus,
.field.next-up textarea:focus { border-color: var(--line); background: var(--card); }

/* 키보드로 옮겨 다닐 때 생기는 초점 표시도 끕니다.
   바깥 상자가 이미 "여기입니다"를 보여 주고 있어서,
   안쪽에 하나 더 그리면 테두리가 이중으로 보입니다. */
.field.next-up input:focus-visible,
.field.next-up textarea:focus-visible { outline: none; }

.help { font-size: 17px; color: var(--ink-soft); margin: 8px 0 0; }


/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-family: inherit;
  font-size: 21px; font-weight: 700;
  padding: 15px 30px; min-height: 60px; border-radius: 999px;
  color: #fff; background: var(--brand); border: 2px solid var(--brand); cursor: pointer;
  box-shadow: 0 3px 12px rgba(74, 53, 41, .18);
}
.btn:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn.ghost { color: var(--brand); background: var(--card); box-shadow: 0 2px 8px rgba(74,53,41,.08); }
.btn.ghost:hover { background: var(--brand-pale); }
.btn.wide { width: 100%; margin-top: 36px; font-size: 24px; min-height: 74px; }
.btn:disabled { background: var(--gray); border-color: var(--gray); box-shadow: none; cursor: default; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 26px; }


/* ---------- 안내 문구 ---------- */

#msg { font-size: 20px; font-weight: 700; margin: 22px 0 0; }
#msg.warn {
  background: var(--accent-pale); border: 1px solid #EBC9B2;
  border-left: 8px solid var(--accent); border-radius: 14px;
  padding: 18px 22px; color: var(--ink);
}


/* ---------- 접수 완료 ---------- */

#done {
  background: var(--card); border: 2px solid var(--accent); border-radius: 20px;
  padding: 0 24px 22px; margin-top: 22px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(190, 84, 39, .14);
}
#done h2 {
  background: var(--accent); color: #fff; margin: 0 -24px 20px;
  padding: 15px 24px; border: none; font-size: 21px;
}

/* 접수번호와 안내를 한 줄에 나란히 — 세로 길이를 줄입니다 */
#done .done-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
#done .done-top .lbl { font-size: 15px; color: var(--ink-soft); }
#done .num {
  font-size: 46px; font-weight: 800; color: var(--accent);
  line-height: 1; margin: 0;
}
#done .say { margin: 0; font-size: 17px; font-weight: 600; flex: 1 1 240px; line-height: 1.5; }
#done .say .help { font-weight: 400; font-size: 15px; }

#done dl {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline;
}
#done dt { font-weight: 600; margin: 0; color: var(--ink-soft); font-size: 15px; white-space: nowrap; }
#done dd { margin: 0; font-size: 18px; font-weight: 600; }


/* ---------- 목록 ---------- */

.list { list-style: none; padding: 0; margin: 0; }
.list li { border-bottom: 1px solid var(--line); padding: 16px 0; }
.list li:last-child { border-bottom: none; padding-bottom: 0; }


/* ---------- 맨 아래 ---------- */

.foot {
  background: var(--band); border-radius: 20px;
  margin-top: 52px; padding: 24px 26px; font-size: 17px; color: var(--ink-soft);
}


/* =============================================================
   홈 화면
   ============================================================= */

.hero { padding: 4px 0 0; }
.hero .eyebrow {
  display: inline-block; font-size: 17px; font-weight: 700; color: var(--accent);
  background: var(--accent-pale); border-radius: 999px; padding: 6px 16px; margin: 0 0 14px;
}
.hero h1 { font-size: 40px; line-height: 1.28; margin: 0 0 14px; }
.hero h1 .light { font-weight: 400; color: var(--ink-soft); }
.hero .lead { font-size: 19px; color: var(--ink-soft); margin: 0 0 22px; line-height: 1.65; }

.steps-title { font-size: 19px; font-weight: 700; margin: 0 0 12px; color: var(--ink-soft); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 3px 14px rgba(74, 53, 41, .08);
  padding: 22px 18px; text-align: center;
}
.step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent-pale); color: var(--accent);
  font-size: 22px; font-weight: 800; margin-bottom: 10px;
}
.step .t { font-size: 21px; font-weight: 800; display: block; margin-bottom: 6px; letter-spacing: -0.02em; }
.step .d { font-size: 16px; color: var(--ink-soft); display: block; line-height: 1.55; }


/* ---------- 화면이 좁을 때 ---------- */

@media (max-width: 640px) {
  body { font-size: 19px; }
  .hero h1 { font-size: 30px; }
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .step { display: flex; align-items: center; gap: 18px; text-align: left; padding: 22px; }
  .step .n { margin-bottom: 0; flex: 0 0 52px; }
  .nav-inner { min-height: 0; padding: 6px 12px; }
  .nav a { min-height: 54px; padding: 0 14px; font-size: 18px; }
  .nav .util { margin-left: 0; width: 100%; }
  .card { padding: 0 20px 22px; }
  .card h2 { margin: 0 -20px 20px; padding: 17px 20px; font-size: 22px; }
}


/* =============================================================
   홈 — 자격증 고르기
   아이콘을 크게 넣은 이유: 글자를 읽기 전에 그림으로 먼저 알아보시게.
   ============================================================= */

.cert-title { font-size: 20px; font-weight: 700; margin: 6px 0 16px; color: var(--ink); }

.cert-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 1000px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }

.cert-link {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--card); border: 2px solid var(--line); border-radius: 18px;
  box-shadow: 0 3px 12px rgba(74, 53, 41, .07);
  padding: 18px 12px 16px; text-decoration: none; color: var(--ink);
  min-height: 190px; justify-content: center;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.cert-link:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(190, 84, 39, .18);
}
.cert-link .ico { font-size: 44px; line-height: 1.1; margin-bottom: 10px; }
.cert-link .nm  { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; }
.cert-link .why { font-size: 15px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
.cert-link .fe  {
  font-size: 18px; color: var(--brand); font-weight: 700; margin-top: 10px;
}

/* 지금 접수할 수 없는 자격증 */
.cert-link.closed { cursor: default; background: var(--band); border-style: dashed; }
.cert-link.closed:hover { transform: none; border-color: var(--line); box-shadow: 0 3px 12px rgba(74,53,41,.07); }
.cert-link.closed .ico { filter: grayscale(1); opacity: .5; }
.cert-link.closed .nm, .cert-link.closed .why { color: var(--ink-soft); }
.cert-link .closed-tag {
  display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700;
  background: var(--card); color: var(--accent);
  border: 1px solid #EBC9B2; border-radius: 999px; padding: 4px 12px; line-height: 1.4;
}
.cert-link .fe.na { color: var(--ink-soft); font-weight: 600; font-size: 17px; }
.cert-link .fe.na { color: var(--accent); font-weight: 600; }

@media (max-width: 900px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }


/* ---------- 오른쪽 아래 따라다니는 챗봇 버튼 ---------- */
/* 테라코타를 쓴 이유: 나머지가 전부 진갈색이라 혼자 눈에 띕니다. */

.float-chat {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 19px; font-weight: 700;
  padding: 16px 24px; min-height: 60px; border-radius: 999px;
  color: #fff; background: var(--accent); border: 3px solid #fff;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 20px rgba(190, 84, 39, .38);
}
.float-chat:hover { background: #9C4420; }

@media (max-width: 640px) {
  .float-chat { right: 14px; bottom: 14px; padding: 14px 18px; font-size: 18px; }
}


/* ---------- 고르신 자격증 요약 ---------- */
.summary {
  background: var(--brand-pale); border: 2px solid var(--line); border-radius: 16px;
  padding: 18px 22px; margin: 4px 0 8px;
}
.summary .lbl { font-size: 16px; color: var(--ink-soft); display: block; }
.summary .cert { font-size: 24px; font-weight: 800; display: block; margin: 2px 0 8px; }
.summary .fee  { font-size: 22px; font-weight: 800; color: var(--brand); }
.summary .fee.na { color: var(--accent); font-size: 19px; }
.summary .sub  { font-size: 16px; color: var(--ink-soft); display: block; margin-bottom: 8px; }
.summary .note {
  display: block; font-size: 16px; color: var(--accent); font-weight: 600;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.summary { position: relative; padding-right: 150px; }
.summary .change {
  position: absolute; top: 18px; right: 20px;
  font-size: 16px; color: var(--ink-soft); text-decoration: underline;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; white-space: nowrap;
}
.summary .change:hover { border-color: var(--accent); color: var(--accent); }

/* '여기를 채워 주십시오' 표가 요약 상자와 겹치지 않게
   이름 칸 위에 여유를 둡니다. */


/* ---------- 동의 ---------- */
label.agree {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 20px; font-weight: 400; margin: 22px 0 0; cursor: pointer;
}
label.agree input { width: 28px; height: 28px; min-height: 0; flex: 0 0 28px; margin-top: 4px; accent-color: var(--accent); }
.agree-body {
  border-left: 4px solid var(--line); margin: 10px 0 0 40px; padding: 4px 0 4px 16px;
  font-size: 17px; color: var(--ink-soft);
}
.agree-body p { margin: 0 0 6px; }
.unknown {
  display: inline-block; background: var(--accent-pale); color: var(--accent);
  border-radius: 8px; padding: 1px 10px; font-weight: 700; font-size: 16px;
}
.prep {
  background: var(--bg); border-radius: 14px; padding: 16px 20px; margin-top: 24px;
  font-size: 17px;
}
.prep p { margin: 0 0 6px; }


/* ---------- 모달 ---------- */
.__unused
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(43, 33, 24, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-box {
  background: var(--card); border-radius: 22px; max-width: 520px; width: 100%;
  padding: 30px; box-shadow: 0 12px 40px rgba(43, 33, 24, .35);
  max-height: 90vh; overflow-y: auto;
}
.modal-box h2 {
  margin: 0 0 16px; font-size: 26px; padding-bottom: 14px;
  border-bottom: 3px solid var(--accent);
}
.modal-box .list li { font-size: 19px; }
.modal-warn {
  background: var(--accent-pale); border-left: 8px solid var(--accent);
  border-radius: 12px; padding: 14px 18px; margin: 20px 0 0; font-size: 17px;
}
.modal-box .btn.wide { margin-top: 22px; }


/* ---------- 완료 화면 안의 다음 안내 ---------- */
.done-next {
  background: var(--accent-pale); border: 1px solid #EBC9B2; border-radius: 14px;
  padding: 14px 18px; margin-top: 18px;
}
.done-next .dn-title { font-size: 17px; line-height: 1.5; margin: 0 0 6px; }
.done-next .dn-spec  { font-size: 16px; font-weight: 600; margin: 0 0 6px; line-height: 1.5; }
.done-next .dn-warn  { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.5; }


/* ---------- 동의 상자 ---------- */
.agree-box {
  background: var(--bg); border: 2px solid var(--line); border-radius: 16px;
  padding: 20px 24px 24px; margin-top: 6px;
}
.agree-lead { font-size: 18px; color: var(--ink-soft); margin: 0 0 6px; }
label.agree {
  background: var(--card); border: 2px solid var(--line); border-radius: 14px;
  padding: 16px 18px; margin: 14px 0 0; align-items: center;
}
label.agree:hover { border-color: var(--accent); }
/* 체크되면 확실히 표시 — 색 + 테두리 + 체크박스 색, 세 가지 */
label.agree.done { border-color: var(--accent); background: var(--accent-pale); }
.agree-body { margin: 10px 0 0 18px; }


/* =============================================================
   다음에 하실 차례를 알려 주는 표시
   어르신이 "이제 뭘 해야 하나" 찾지 않으시도록,
   지금 채우실 곳 하나에만 테라코타 테두리와 "여기" 표를 붙입니다.
   ============================================================= */

.field { border-radius: 16px; padding: 4px; margin: 30px -4px 0; position: relative; }

.next-up {
  /* 표(::before)가 이 요소를 기준으로 붙게 합니다.
     이게 없으면 표가 화면 맨 위 오른쪽으로 날아갑니다. */
  position: relative;
  outline: 4px solid var(--accent);
  outline-offset: 2px;
  border-radius: 16px;
  animation: nudge 1.6s ease-in-out infinite;
}
.next-up::before {
  content: "여기를 채워 주십시오";
  position: absolute; top: -14px; right: 14px; left: auto; z-index: 3;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; border-radius: 999px; padding: 3px 14px;
  white-space: nowrap;
}
#send-btn.next-up::before { content: "누르시면 접수됩니다"; top: -13px; right: 20px; left: auto; }
#agree-box.next-up::before { content: "두 가지에 체크해 주십시오"; }
#f-cert.next-up::before { content: "하나를 골라 주십시오"; }

@keyframes nudge {
  0%, 100% { outline-color: var(--accent); }
  50%      { outline-color: #EBC9B2; }
}
@media (prefers-reduced-motion: reduce) {
  .next-up { animation: none; }
}

#send-btn { position: relative; }


/* ---------- 홈: 접수하러 가기 버튼 ---------- */
.btn.start {
  width: 100%; margin: 26px 0 8px;
  font-size: 24px; min-height: 74px;
}

/* 누르기 전에는 자격증 칸을 흐리게 — 한 번에 한 가지만 보시게 */
.cert-zone { transition: opacity .25s; }
.cert-zone.locked { opacity: .28; pointer-events: none; user-select: none; filter: grayscale(1); }

/* 누르면 선명해지면서 테두리로 "여기입니다" 표시 */
.cert-zone.open {
  position: relative; border-radius: 20px; padding: 14px; margin: 0 -14px;
  outline: 4px solid var(--accent); outline-offset: 2px;
  animation: nudge 1.6s ease-in-out infinite;
}
.cert-zone.open::before {
  content: "하나를 골라 주십시오";
  position: absolute; top: -14px; right: 20px; left: auto; z-index: 2;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; border-radius: 999px; padding: 3px 14px;
}
.cert-zone.open .cert-title { margin-top: 6px; }

/* 자격증을 고르실 때는 위쪽을 흐리게 해서 여기에만 집중하시게 합니다.
   바깥 여백을 누르시면 다시 원래대로 돌아옵니다. */
body.focus-mode .hero,
body.focus-mode .steps-title,
body.focus-mode .steps,
body.focus-mode .btn.start {
  opacity: .2; pointer-events: none; transition: opacity .25s;
}
body.focus-mode .cert-zone.open { background: var(--card); }

.cert-zone.open .exit-hint {
  display: block; text-align: center; font-size: 16px;
  color: var(--ink-soft); margin: 14px 0 0;
}
.exit-hint { display: none; }


/* 어르신이 쓰시는 다른 이름 (포크레인 등) */
.cert-link .nm em {
  display: block; font-style: normal; font-size: 15px;
  font-weight: 500; color: var(--ink-soft); margin-top: 2px;
}




/* ---------- 접수 확인 결과 ---------- */
.found { border: 2px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-bottom: 14px; }
.found + .found { margin-top: 0; }
.found-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.found-top .lbl { font-size: 15px; color: var(--ink-soft); }
.found-top .num { font-size: 34px; font-weight: 800; color: var(--accent); line-height: 1; }
.found-top .state {
  margin-left: auto; font-size: 15px; font-weight: 700;
  background: var(--accent-pale); color: var(--accent);
  border-radius: 999px; padding: 6px 16px;
}
.found dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline;
}
.found dt { font-size: 15px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; margin: 0; }
.found dd { font-size: 18px; font-weight: 600; margin: 0; }


/* 결과가 나타날 때 잠깐 테두리를 밝혀 눈에 띄게 */
/* ---------- 결과 모달 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(43, 33, 24, .6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal[hidden] { display: none; }
.modal-box {
  position: relative; background: var(--card); border-radius: 22px;
  max-width: 560px; width: 100%; padding: 28px;
  box-shadow: 0 14px 44px rgba(43, 33, 24, .4);
  max-height: 88vh; overflow-y: auto;
}
.modal-box h2 {
  margin: 0 0 18px; font-size: 24px; padding-bottom: 14px;
  border-bottom: 3px solid var(--accent); background: none; color: var(--ink);
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; min-height: 44px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--card); color: var(--ink-soft);
  font-size: 19px; cursor: pointer; padding: 0;
}
.modal-close:hover { border-color: var(--accent); color: var(--accent); }
.modal-box .btn.wide { margin-top: 20px; }


/* =============================================================
   문의 챗봇
   ============================================================= */

.chat-log {
  background: var(--bg-2); border: 2px solid var(--line); border-radius: 16px;
  padding: 18px; height: 380px; overflow-y: auto;
}
.msg { display: flex; margin-bottom: 14px; }
.msg.me { justify-content: flex-end; }
.msg .bubble {
  max-width: 82%; border-radius: 18px; padding: 14px 18px;
  font-size: 18px; line-height: 1.65; white-space: normal;
}
.msg.bot .bubble { background: var(--card); border: 2px solid var(--line); border-top-left-radius: 6px; }
.msg.me  .bubble { background: var(--brand); color: #fff; border-top-right-radius: 6px; }
.msg .src { display: block; margin-top: 10px; padding-top: 8px;
            border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }

.chat-ex { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.chat-ex .ex {
  font-family: inherit; font-size: 16px; color: var(--brand); background: var(--card);
  border: 2px solid var(--line); border-radius: 999px; padding: 10px 16px;
  min-height: 46px; cursor: pointer;
}
.chat-ex .ex:hover { border-color: var(--accent); color: var(--accent); }

.chat-in { display: flex; gap: 10px; margin-top: 14px; }
.chat-in input { flex: 1; font-size: 18px; padding: 14px 16px; min-height: 58px; }
.chat-in button {
  font-family: inherit; font-size: 18px; font-weight: 700;
  padding: 14px 26px; min-height: 58px; border-radius: 999px;
  color: #fff; background: var(--brand); border: 2px solid var(--brand); cursor: pointer;
}
.chat-in button:disabled { background: var(--gray); border-color: var(--gray); }


/* ---------- 오른쪽 아래 떠 있는 창 ---------- */

.chat-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(43, 33, 24, .55);
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 20px;
}
.chat-modal[hidden] { display: none; }
.chat-box {
  background: var(--bg); border-radius: 22px; width: 100%; max-width: 520px;
  box-shadow: 0 14px 44px rgba(43, 33, 24, .4); overflow: hidden;
  display: flex; flex-direction: column; max-height: 86vh;
}
.chat-top {
  background: var(--brand); color: #fff; padding: 16px 20px;
  display: flex; align-items: center; gap: 12px; font-size: 19px;
}
.chat-close {
  margin-left: auto; width: 40px; height: 40px; border-radius: 50%;
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5);
  font-size: 17px; cursor: pointer; padding: 0;
}
.chat-close:hover { background: var(--brand-2); }
.chat-body { padding: 18px 20px 20px; overflow-y: auto; }
.chat-body .chat-log { height: 300px; }

@media (max-width: 640px) {
  .chat-modal { padding: 0; align-items: stretch; }
  .chat-box { max-width: none; border-radius: 0; max-height: 100vh; }
  .chat-body .chat-log { height: 46vh; }
}


/* ---------- 제목 옆에 버튼 ---------- */
.page-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head > div { flex: 1 1 300px; }
.page-head .btn { flex: 0 0 auto; }

/* ---------- 접수 완료 버튼 세 개 ---------- */
.done-btns { margin: 22px 0 0; }
.done-btns .btn { font-size: 19px; padding: 14px 24px; min-height: 58px; }

/* ---------- 인쇄할 때 ---------- */
@media print {
  .nav, .float-chat, .done-btns, .notice, .chat-modal { display: none !important; }
  /* 접수 확인 모달은 안의 내용만 종이에 나오게 합니다 */
  .modal { position: static; background: none; padding: 0; display: block; }
  .modal-box { box-shadow: none; max-height: none; border: 2px solid #000; }
  .modal-close, .modal-box .btn { display: none !important; }
  .wrap > .card { display: none; }
  body { background: #fff; padding: 0; font-size: 14pt; }
  #done { border: 2px solid #000; box-shadow: none; page-break-inside: avoid; }
  #done h2 { background: #fff; color: #000; border-bottom: 2px solid #000; }
  #done .num { color: #000; }
  .done-next { background: #fff; border: 1px solid #000; }
}


/* ---------- 칸 바로 아래 안내 ----------
   버튼 옆 한 곳에만 안내를 띄우면 화면 아래라 못 보십니다.
   잘못된 칸 바로 밑에 띄워야 어디가 문제인지 바로 아십니다. */
.err {
  background: var(--accent-pale); border: 2px solid var(--accent);
  border-radius: 12px; padding: 12px 16px; margin: 10px 0 0;
  font-size: 18px; font-weight: 700; color: var(--ink);
}
.err[hidden] { display: none; }
.field.bad input, .field.bad textarea { border-color: var(--accent); }

/* 제대로 넣으셨을 때 —— 2026-08-21 추가.
   전에는 "틀렸다"만 알려 드리고 "됐다"는 알려 드리지 않았습니다.
   그래서 다 넣으신 뒤에도 "이게 맞나" 하고 다시 보셔야 했습니다.
   오류처럼 상자로 두르지 않습니다. 잘된 것이 눈에 더 띄면 안 됩니다. */
.ok {
  margin: 10px 0 0; padding: 0 2px;
  font-size: 18px; font-weight: 700; color: var(--ok, #2F6B4F);
  line-height: 1.5;
}
.ok[hidden]   { display: none; }
.help[hidden] { display: none; }

/* 동의 상자도 다른 칸과 같이 틀린 곳이 눈에 보이게 합니다. */
.agree-box.bad { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 16px; }


/* =============================================================
   휴대폰 화면 정리
   글자가 밀리거나 겹치던 곳을 잡습니다.
   ============================================================= */

@media (max-width: 720px) {
  body { font-size: 18px; }
  .wrap { padding: 22px 14px 0; }

  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  .hero h1 { font-size: 27px; line-height: 1.3; }
  .hero .lead { font-size: 17px; }
  .hero .eyebrow { font-size: 15px; padding: 5px 13px; }

  /* 메뉴바 — 두 줄 유지하되 좁게 */
  .nav-inner { padding: 0 14px; }
  .nav-top { padding: 10px 0 8px; gap: 8px; }
  .logo-mark { width: 34px; height: 34px; flex: 0 0 34px; font-size: 15px; }
  .logo-name { font-size: 17px; }
  .nav .util a { font-size: 14px; padding: 6px 10px; }
  .nav-bottom a { font-size: 17px; padding: 0 13px; min-height: 50px; }

  /* 카드 안쪽 여백 */
  .card { padding: 0 16px 18px; border-radius: 16px; }
  .card h2 { margin: 0 -16px 18px; padding: 15px 16px; font-size: 20px; }

  /* 고르신 자격증 — '바꾸기' 단추가 이름을 가려서 아래로 내립니다 */
  .summary { padding: 16px 18px !important; position: static; }
  .summary .change {
    position: static !important; display: inline-block; margin-top: 14px;
    font-size: 15px; padding: 8px 14px;
  }
  .summary .cert { font-size: 20px; line-height: 1.35; }
  .summary .sub { font-size: 15px; }
  .summary .note { font-size: 15px; }

  /* 단계 안내 표가 글자를 가리지 않게 */
  .next-up::before { font-size: 13px; padding: 2px 10px; top: -12px; right: 8px; }

  /* 버튼은 한 줄에 하나씩 꽉 차게 */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .btn { font-size: 19px; padding: 14px 20px; min-height: 56px; }

  /* 접수 완료 — 번호와 안내가 겹치지 않게 세로로 */
  #done { padding: 0 16px 18px; }
  #done h2 { margin: 0 -16px 16px; padding: 14px 16px; font-size: 19px; }
  #done .done-top { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* 가로로 놓을 때 준 최소 너비(240px)가 세로로 쌓이면
     '높이 240px' 로 잡혀서 빈 공간이 생깁니다. 풀어 줍니다. */
  #done .say { flex: none; width: 100%; margin-top: 6px; }
  #done .num { font-size: 40px; }
  #done dl { grid-template-columns: 1fr; gap: 2px; }
  #done dt { margin-top: 10px; }

  /* 자격증 카드 두 칸 */
  .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cert-link { min-height: 156px; padding: 14px 8px; }
  .cert-link .ico { font-size: 34px; }
  .cert-link .nm { font-size: 16px; }
  .cert-link .why { font-size: 13px; }
  .cert-link .fe { font-size: 15px; }
  .cert-link .closed-tag { font-size: 12px; padding: 3px 9px; }

  /* 제목 옆 단추는 아래로 */
  .page-head { flex-direction: column; gap: 14px; }
  .page-head .btn { width: 100%; }

  /* 동의 상자 */
  .agree-box { padding: 16px 16px 18px; }
  label.agree { padding: 14px; font-size: 18px; }
  .agree-body { margin-left: 10px; font-size: 16px; }

  /* 입력칸 */
  input, textarea { font-size: 18px; padding: 14px; }
  label { font-size: 20px; }
}

@media (max-width: 480px) {
  /* 아이콘은 왼쪽, 글자는 오른쪽에 세로로 쌓습니다.
     한 줄에 이름·설명·금액을 나란히 놓으면 좁아서 낱말이 쪼개집니다. */
  .cert-grid { grid-template-columns: 1fr; gap: 8px; }
  .cert-link {
    min-height: 0; display: grid;
    grid-template-columns: 44px 1fr; align-items: center;
    column-gap: 14px; row-gap: 2px; text-align: left; padding: 14px 16px;
  }
  .cert-link .ico  { grid-column: 1; grid-row: 1 / span 3; font-size: 32px; margin: 0; }
  .cert-link .nm   { grid-column: 2; font-size: 18px; line-height: 1.3; }
  .cert-link .nm em { display: inline; margin-left: 6px; font-size: 14px; }
  .cert-link .why  { grid-column: 2; font-size: 14px; margin: 0; }
  .cert-link .fe   { grid-column: 2; font-size: 16px; margin: 2px 0 0; }
  .cert-link .closed-tag { grid-column: 2; margin: 4px 0 0; font-size: 12px; }
  .cert-title { font-size: 18px; }
}


/* ---------- 「물어보기」 단추가 글자를 가리지 않게 ---------- */
/* 휴대폰에서는 단추를 작게 하고, 페이지 아래에 여백을 둡니다. */
@media (max-width: 720px) {
  body { padding-bottom: 96px; }
  .float-chat {
    right: 12px; bottom: 12px; padding: 0; font-size: 0;
    width: 58px; height: 58px; min-height: 58px; border-radius: 50%;
    justify-content: center; box-shadow: 0 4px 14px rgba(190,84,39,.4);
  }
  .float-chat::before { content: "💬"; font-size: 25px; }
}


/* ---------- 휴대폰에서 겹치거나 삐져나가던 곳 ---------- */
@media (max-width: 720px) {
  /* 긴 낱말이 칸을 넘지 않게 */
  body { word-break: keep-all; overflow-wrap: break-word; }
  h1, h2, .cert-link .nm, .summary .cert { word-break: keep-all; }

  /* 가로로 밀리지 않게 */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* 안내 문구가 단추에 가리지 않게 */
  .err { font-size: 17px; padding: 12px 14px; }

  /* 챗봇 창은 화면 가득 */
  .chat-box { max-height: 100vh; }
  .chat-body { padding: 14px; }
  .chat-in input { font-size: 17px; padding: 12px 14px; min-height: 52px; }
  .chat-in button { font-size: 17px; padding: 12px 18px; min-height: 52px; }
  .chat-ex .ex { font-size: 15px; padding: 9px 13px; min-height: 42px; }
  .msg .bubble { font-size: 17px; padding: 12px 15px; max-width: 88%; }

  /* 직원용 표는 옆으로 밀어 보는 게 맞습니다 */
  .scroll { -webkit-overflow-scrolling: touch; }
}