/* =========================================================
   safety-education.css — 안전교육 페이지 전용 스타일
   (공통 디자인 토큰·컴포넌트는 common.css 재사용)
   ========================================================= */

/* ① 히어로 : 외부 이미지 파일 사용, 이미지 미로드 시에도 네이비 배경 유지 */
.page-hero{
  position:relative;overflow:hidden;color:#fff;
  background-color:var(--navy-deep);
  background-image:
    linear-gradient(100deg,rgba(16,33,52,.88) 0%,rgba(18,38,58,.68) 45%,rgba(16,33,52,.35) 100%),
    url("../images/safety-education-hero.webp");
  background-size:cover;background-position:center 30%;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;opacity:.3;pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:2;padding:6px 24px 6px;}
.page-hero .eyebrow{display:inline-block;font-size:14px;letter-spacing:.14em;color:#bcd6ec;font-weight:600;margin-bottom:4px;border-left:3px solid var(--gold);padding-left:12px;}
.page-hero h1{
  text-shadow:0 2px 14px rgba(0,0,0,.45);
  font-size:44px;line-height:1.25;font-weight:800;letter-spacing:-.02em;
  margin-bottom:4px;max-width:1050px;overflow-wrap:break-word;
}
.page-hero .lead{text-shadow:0 1px 10px rgba(0,0,0,.4);font-size:19px;line-height:1.65;color:#dce8f3;font-weight:400;margin-bottom:0;max-width:640px;overflow-wrap:break-word;}
.page-hero .hero-btns{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap;}
.page-hero .btn-primary{display:inline-block;}

/* 히어로 바로 다음 섹션 상단 여백을 절반으로 (히어로~본문 간격 압축) */
#areas{padding-top:64px;}

/* ② 교육 서비스 카드 (3종: 육군 / 기업·공공기관 / 안전문화-준비중) */
.edu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch;}
.edu-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;padding:26px 22px;background:#fff;
  transition:transform .2s,box-shadow .2s;
}
.edu-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(31,58,95,.1);}
.edu-grid .edu-card:nth-child(1){border-color:#74b784;}
.edu-grid .edu-card:nth-child(1) h3{color:#5aa06f;}
.edu-grid .edu-card:nth-child(1) .area-ico svg{stroke:#5aa06f;}
.edu-grid .edu-card:nth-child(2){border-color:#6b9bc9;}
.edu-grid .edu-card:nth-child(2) h3{color:#3d7db0;}
.edu-grid .edu-card:nth-child(2) .area-ico svg{stroke:#3d7db0;}
.edu-grid .edu-card:nth-child(3){border-color:#c9a86b;}
.edu-grid .edu-card:nth-child(3) h3{color:#a8873c;}
.edu-grid .edu-card:nth-child(3) .area-ico svg{stroke:#a8873c;}
.edu-grid .edu-card:nth-child(4){border-color:#8b93b8;}
.edu-grid .edu-card:nth-child(4) h3{color:var(--navy);}
.edu-grid .edu-card:nth-child(4) .area-ico svg{stroke:var(--navy);}

.edu-status{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.03em;padding:5px 14px;border-radius:20px;margin-bottom:16px;}
.edu-status.active{background:#eaf6ee;color:#3f8a5c;}
.edu-status.pending{background:var(--bg-soft);color:var(--gray);}

.area-ico{height:44px;display:flex;align-items:center;margin-bottom:10px;}
.area-ico svg{width:36px;height:36px;stroke-width:1.6;fill:none;stroke:var(--gray);}

.edu-card h3{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:6px;overflow-wrap:break-word;}
.edu-target{font-size:14px;color:var(--gray);font-weight:600;margin-bottom:10px;}
.edu-subhead{font-size:14px;color:var(--gray);font-weight:600;margin:18px 0 10px;}
.edu-badge{display:inline-block;font-size:13px;font-weight:700;color:var(--navy);background:var(--bg-soft);border-radius:20px;padding:6px 14px;margin-bottom:14px;width:fit-content;}
.edu-body{font-size:14.5px;color:var(--ink);line-height:1.7;margin-bottom:12px;}
.edu-benefit{font-size:14px;color:var(--navy);font-weight:600;line-height:1.65;background:#f6f9fc;border-left:3px solid var(--blue);padding:10px 14px;border-radius:6px;margin-bottom:16px;}
.edu-card .area-list{list-style:none;margin:0 0 14px;padding:0;}
.edu-card .area-list li{font-size:13.5px;color:var(--ink);padding:4px 0 4px 18px;position:relative;}
.edu-card .area-list li::before{content:"";position:absolute;left:2px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--blue);}
.edu-card .detail-note{margin:0 0 16px;text-align:left;font-size:13px;padding:12px 14px;}
.edu-credential{font-size:12px;color:var(--gray);margin:0 0 14px;padding-top:12px;border-top:1px dashed var(--line);}

.edu-btn{text-align:center;}

.edu-toggle{
  display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;
  font-size:13.5px;font-weight:700;color:var(--blue);padding:4px 0;margin-top:4px;
}
.edu-toggle::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s;}
.edu-toggle[aria-expanded="true"]::after{transform:rotate(-135deg);}
.edu-more{margin-top:16px;}
.edu-phone{margin-top:auto;text-align:center;font-size:15px;font-weight:700;color:var(--navy);padding-top:8px;}
.edu-phone a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
.edu-card.pending{background:var(--bg-soft);border-color:var(--line);}
.edu-card.pending h3{color:var(--gray);}
.edu-card.pending .area-ico svg{stroke:var(--gray);}


.detail-note{font-size:13.5px;color:var(--gray);line-height:1.7;background:var(--bg-soft);border-radius:8px;padding:14px 16px;}

/* ③ ARCA 교육 설계 방식 (강점·전문성 통합) */
.design-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.design-step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 22px;}
.design-step .d-num{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;font-size:14px;font-weight:700;margin-bottom:14px;
}
.design-step h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:8px;}
.design-step p{font-size:13.5px;color:var(--gray);line-height:1.6;}
.instructor-line{max-width:820px;margin:40px auto 0;text-align:center;font-size:13.5px;color:var(--gray);line-height:1.8;padding-top:28px;border-top:1px solid var(--line);}

/* ④ 교육사례 */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.case-card{border:1px solid var(--line);border-radius:12px;padding:26px 22px;background:#fff;}
.case-card h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:10px;}
.case-card p{font-size:14px;color:var(--gray);line-height:1.6;}

.case-example{
  max-width:820px;margin:26px auto 0;border:1.5px dashed var(--line);border-radius:12px;
  padding:22px 24px;background:#fff;
}
.case-example .example-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--gold);background:#faf5e9;border-radius:20px;padding:4px 12px;margin-bottom:10px;}
.case-example h3{font-size:15.5px;font-weight:700;color:var(--navy);margin-bottom:8px;}
.case-example p{font-size:13.5px;color:var(--gray);line-height:1.65;}

/* alternating section background for readability */
.detail-section{padding:70px 0;}
.detail-section.alt{background:var(--bg-soft);}

/* CTA (진행절차 통합) */
.cta-steps{font-size:13px;font-weight:700;letter-spacing:.03em;color:#bcd6ec;margin-bottom:14px;}
.cta-band .cta-btns{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}

/* responsive */
@media (max-width:1200px){
  .page-hero h1{font-size:38px;}
  .page-hero .eyebrow{margin-bottom:10px;}
  .page-hero .lead{font-size:17px;}
  .edu-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .design-grid{grid-template-columns:repeat(2,1fr);}
  .case-grid{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .edu-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .page-hero .wrap{padding:32px 24px 32px;}
  .page-hero h1{font-size:26px;line-height:1.25;margin-bottom:10px;}
  .page-hero .lead{font-size:15px;line-height:1.6;}
  .page-hero .hero-btns{flex-direction:column;align-items:stretch;gap:12px;}
  .design-grid{grid-template-columns:1fr;}
  .detail-section{padding:50px 0;}
  .edu-card{padding:22px 20px;}
  .edu-body,.edu-benefit,.edu-card .area-list li{margin-bottom:8px;}
  .cta-band .cta-btns{flex-direction:column;align-items:stretch;}
}