/* 산재치료 섹션 — 모든 선택자가 #sanjae 하위로 스코프되어 있어
   기존 스타일과 충돌하지 않는다. 2026-09-01 시안 이식. */
#sanjae{
  --sj-navy:#0d386b;
  --sj-sky:#29a3e1;
  --sj-tint:#eef8fd;
  --sj-line:#dfe8f0;
  --sj-head:#333;
  --sj-body:#686868;
  font-family:Montserrat,S-CoreDream,"Noto Sans KR",NanumSR,"Nanum Gothic",나눔고딕,돋움,Dotum,AppleGothic,sans-serif;
  font-size:18px;
  letter-spacing:-0.09em;
  line-height:normal;
  color:var(--sj-head);
  word-break:keep-all;overflow-wrap:break-word;
  background:
    radial-gradient(1100px 520px at 50% -180px,#eaf6fd 0%,rgba(234,246,253,0) 72%),
    #fff;
  padding:44px 0 48px;position:relative;overflow:hidden;
}
#sanjae *{box-sizing:border-box}
#sanjae img{max-width:100%;display:block}
#sanjae ul{margin:0;padding:0;list-style:none}
#sanjae .sj-inner{max-width:1400px;margin:0 auto;padding:0 40px}

/* ---------- 섹션 타이틀 (기존 .mTit 규격) ---------- */
#sanjae .sj-tit{text-align:center}
#sanjae .sj-tit h2{
  font-size:45px;font-weight:700;color:var(--sj-head);
  line-height:normal;margin:0;
}
#sanjae .sj-tit > p{
  font-size:22px;font-weight:400;color:var(--sj-body);
  line-height:normal;margin:20px 0 0;
}

/* ---------- 산재보험 강조 블록 ---------- */
#sanjae .sj-key{text-align:center;margin-top:30px}
#sanjae .sj-mark{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 24px;border-radius:100px;
  background:#fff;border:1px solid var(--sj-sky);
  font-size:18px;font-weight:600;color:var(--sj-navy);line-height:normal;
  box-shadow:0 6px 18px rgba(41,163,225,.15);
}
#sanjae .sj-mark svg{width:18px;height:18px;fill:var(--sj-sky);flex:none}
#sanjae .sj-key h3{
  font-size:26px;font-weight:600;color:var(--sj-sky);
  line-height:normal;margin:16px 0 0;
}
#sanjae .sj-key p{
  font-size:20px;font-weight:400;color:var(--sj-body);
  line-height:1.5;margin:12px 0 0;
}
#sanjae .sj-key p b{font-weight:600;color:var(--sj-head)}

/* ---------- 3분할 카드 ---------- */
#sanjae .sj-cards{display:flex;gap:22px;margin-top:30px}
#sanjae .sj-cards > li{flex:1 1 0;min-width:0}
#sanjae .sj-card{
  height:100%;background:#fff;border:1px solid var(--sj-line);
  border-radius:22px;overflow:hidden;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),
             box-shadow .4s ease,border-color .4s ease;
}
#sanjae .sj-card:hover{
  transform:translateY(-8px);border-color:var(--sj-sky);
  box-shadow:0 20px 44px rgba(13,56,107,.13);
}
#sanjae .sj-card__img{position:relative;height:200px;overflow:hidden;background:#e9eff5}
#sanjae .sj-card__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
#sanjae .sj-card:hover .sj-card__img img{transform:scale(1.07)}
#sanjae .sj-card__no{
  position:absolute;left:18px;top:18px;
  width:38px;height:38px;border-radius:100px;
  background:rgba(13,56,107,.86);color:#fff;
  font-family:Montserrat,sans-serif;font-size:15px;font-weight:700;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;
}
#sanjae .sj-card__body{padding:20px 22px 23px}
#sanjae .sj-card h4{
  font-size:24px;font-weight:600;color:var(--sj-navy);
  line-height:normal;margin:0 0 10px;
}
#sanjae .sj-card p{font-size:18px;font-weight:400;color:var(--sj-body);line-height:1.55;margin:0}

/* ---------- 고지 문구 ---------- */
#sanjae .sj-note{
  margin:26px 0 0;font-size:16px;line-height:1.5;
  color:#a3aeb9;text-align:center;
}

/* ---------- 등장 애니메이션 ---------- */
#sanjae [data-sj-in]{opacity:0;transform:translateY(26px)}
#sanjae [data-sj-in].is-in{
  opacity:1;transform:none;
  transition:opacity .7s ease var(--d,0s), transform .8s cubic-bezier(.22,.61,.36,1) var(--d,0s);
}

/* ---------- 반응형 ---------- */
@media (max-width:1280px){
  #sanjae{padding:38px 0 42px}
  #sanjae .sj-inner{padding:0 30px}
  #sanjae .sj-key{margin-top:26px}
  #sanjae .sj-cards{gap:18px;margin-top:26px}
  #sanjae .sj-card__img{height:172px}
  #sanjae .sj-card__body{padding:18px 20px 21px}
  #sanjae .sj-note{margin-top:22px}
}
@media (min-width:861px) and (max-height:940px){
  #sanjae{padding:38px 0 42px}
  #sanjae .sj-key{margin-top:26px}
  #sanjae .sj-cards{margin-top:26px}
  #sanjae .sj-card__img{height:168px}
  #sanjae .sj-card__body{padding:18px 22px 21px}
  #sanjae .sj-note{margin-top:22px}
}
@media (min-width:861px) and (max-height:820px){
  #sanjae{padding:30px 0 34px}
  #sanjae .sj-tit > p{margin-top:15px}
  #sanjae .sj-key{margin-top:22px}
  #sanjae .sj-key h3{margin-top:13px}
  #sanjae .sj-cards{margin-top:22px}
  #sanjae .sj-card__img{height:132px}
  #sanjae .sj-card__body{padding:16px 20px 18px}
  #sanjae .sj-note{margin-top:18px;font-size:15px}
}
@media (min-width:861px) and (max-height:790px){
  /* 세로가 매우 짧은 화면: 글자 크기는 유지하고 사진만 낮춤 */
  #sanjae{padding:26px 0 30px}
  #sanjae .sj-card__img{height:96px}
  #sanjae .sj-card__body{padding:15px 20px 17px}
  #sanjae .sj-cards{margin-top:20px}
  #sanjae .sj-note{margin-top:16px;font-size:14.5px}
}
@media (min-width:861px) and (max-height:740px){
  #sanjae{padding:24px 0 28px}
  #sanjae .sj-card__img{display:none}
  #sanjae .sj-card__body{padding:20px 22px 22px}
  #sanjae .sj-cards{margin-top:18px}
  #sanjae .sj-note{margin-top:14px}
}
@media (max-width:860px){
  #sanjae{font-size:16px;padding:52px 0 56px}
  #sanjae .sj-inner{padding:0 20px}
  #sanjae .sj-tit h2{font-size:27px}
  #sanjae .sj-tit > p{font-size:16.5px;margin-top:14px;line-height:1.6}
  #sanjae .sj-tit > p br{display:none}
  #sanjae .sj-key{margin-top:30px}
  #sanjae .sj-mark{font-size:14.5px;padding:9px 18px}
  #sanjae .sj-key h3{font-size:19px;margin-top:14px}
  #sanjae .sj-key p{font-size:16px;margin-top:12px;line-height:1.6}
  #sanjae .sj-key p br{display:none}
  #sanjae .sj-cards{flex-direction:column;gap:14px;margin-top:28px}
  #sanjae .sj-card{border-radius:18px}
  #sanjae .sj-card__img{height:auto;aspect-ratio:2/1}
  #sanjae .sj-card__no{width:36px;height:36px;font-size:13px;left:16px;top:16px}
  #sanjae .sj-card__body{padding:22px 22px 25px}
  #sanjae .sj-card h4{font-size:19px;margin-bottom:10px}
  #sanjae .sj-card p{font-size:16px}
  #sanjae .sj-note{margin-top:24px;font-size:14px;text-align:left}
}
@media print{
  #sanjae [data-sj-in]{opacity:1!important;transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  #sanjae [data-sj-in]{opacity:1;transform:none;transition:none}
  #sanjae .sj-card,#sanjae .sj-card__img img{transition:none}
}
#sanjae [data-sj-in]{opacity:1;transform:none}
