/* ============================================================
   서울잇다플레이스 – 전용 스타일
   고립예방플랫폼 '똑똑' 사이트 CSS(component.css/content.css/main.css) 위에 얹어
   사이트 기본 색상 변수(--sub4 #0977c3, --cate1 #187bfc, --gray-*)를 그대로 사용
   ※ JSP 인라인 style 금지 정책에 따라 잇다플레이스 관련 스타일은 모두 이 파일에 둔다.
   ============================================================ */

/* 소스 HTML에서 인라인으로 잡혀 있던 공통 유틸 */
.sip-inline{display:inline;}
.sip-col-200{width:200px;}
.sip-col-180{width:180px;}
.sip-inp{width:100%;max-width:320px;}
.sip-col-130{width:130px;}
.sip-col-70{width:70px;}
.sip-col-150{width:150px;}
.sip-sub-note{color:#888;font-size:.95em;}
.sip-subtit{margin:34px 0 14px;color:#222;font-size:19px;font-weight:600;}
.sip-photos.col2{grid-template-columns:1fr 1fr;}
/* 사진 크기 축소 요청 — 칸 수와 비율은 그대로 두고 영역 폭만 3/4 로 줄인다.
   폭이 좁은 화면에서는 더 줄이면 너무 작아지므로 100% 로 되돌린다. */
.sip-photos.sip-photos-sm{width:75%;}
@media(max-width:767px){.sip-photos.sip-photos-sm{width:100%;}}
.sip-empty{color:#888;padding:30px 0;grid-column:1/-1;}
.sip-center{text-align:center;}
.sip-ph-lg{min-height:220px;}
.sip-cnt{font-size:1.6rem;color:var(--sub4,#0977c3);}

/* 사진 자리(placeholder) */
.sip-ph{border:1px dashed #bcc7d2;border-radius:8px;
  background:repeating-linear-gradient(135deg,#fafbfc,#fafbfc 12px,#f1f4f8 12px,#f1f4f8 24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:#777;font-size:14px;font-weight:500;padding:20px;min-height:150px;gap:5px;line-height:1.4;}
.sip-ph .ic{font-size:26px;opacity:.6;}
.sip-ph small{color:#9aa4ad;font-weight:400;font-size:12.5px;}

.sip-hint{color:var(--sub4,#0977c3);font-weight:600;font-size:15px;margin:0 0 16px;}

/* 소개 문단 – 문단 정렬 + 문장 길이를 고르게 (0803 PPT 3p) */
.sip-introhead{display:flex;justify-content:center;margin-bottom:34px;}
.sip-introhead img{max-width:100%;width:360px;height:auto;}
.sip-intro-txt{max-width:900px;margin:0 auto;}
.sip-intro-txt p{margin:0 0 20px;font-size:17px;line-height:1.85;color:#444;
  text-align:center;word-break:keep-all;}
.sip-intro-txt p:last-child{margin-bottom:0;}
.sip-intro-txt p strong{font-weight:600;color:var(--sub4,#0977c3);}
.sip-intro-txt p.closing{font-weight:600;color:#222;}
@media(max-width:560px){
  .sip-introhead img{width:260px;}
  .sip-intro-txt p{font-size:15.5px;line-height:1.8;}
}

/* 프로그램 소개 3분류 카드 */
.sip-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sip-card{border:1px solid var(--gray-e5,#e5e5e5);border-top:3px solid var(--sub4,#0977c3);
  border-radius:6px;padding:24px;background:#fff;}
.sip-card .tag{display:inline-block;font-size:13px;font-weight:600;padding:5px 13px;border-radius:4px;
  background:var(--gray-f5,#f5f5f5);color:var(--sub4,#0977c3);margin-bottom:13px;}
.sip-card h4{margin:0 0 9px;font-size:19px;font-weight:600;color:#222;line-height:1.4;}
.sip-card p{margin:0;font-size:15px;color:#666;line-height:1.6;word-break:keep-all;}

.sip-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.sip-photos > div{border:1px solid var(--gray-e5,#e5e5e5);border-radius:8px;overflow:hidden;background:#fff;}
.sip-photos > div > img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;}
/* 인물이 아래쪽에 있는 사진은 위를 잘라 아래가 다 보이게 한다 */
.sip-photos > div.ph-bottom > img{object-position:bottom;}
/* placeholder는 테두리를 자체적으로 그리므로 래퍼 테두리를 지운다 */
.sip-photos > .sip-ph{border:1px dashed #bcc7d2;}

/* 로고 박스 – 가로로 긴 워드마크가 잘리지 않도록 여백을 두고 가운데 정렬 */
.sip-logobox{display:flex;align-items:center;justify-content:center;min-height:150px;padding:26px 30px;
  border:1px solid var(--gray-e5,#e5e5e5);border-radius:8px;background:#fff;}
.sip-logobox img{max-width:100%;max-height:80px;width:auto;height:auto;object-fit:contain;}

/* 프로그램 단계(STEP) 리본 */
.sip-steplabel{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:16px;font-weight:700;color:#333;}
.sip-steplabel .dot{width:12px;height:12px;border-radius:50%;display:inline-block;}
.sip-steplabel .dot.youth{background:#2b7fe0;}
.sip-steplabel .dot.senior{background:#1b8f96;}
/* 오른쪽으로 나아가는 화살표(셰브론) 스텝 */
.sip-steps{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px;}
.sip-step{flex:1;min-width:130px;position:relative;background:var(--c,#ccc);color:#fff;text-align:center;
  padding:16px 16px 16px 28px;
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);}
.sip-step:first-child{padding-left:18px;
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);}
.sip-step .st-no{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:5px;opacity:.92;
  text-shadow:0 1px 2px rgba(0,0,0,.15);}
.sip-step .st-key{display:block;font-size:15px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.18);line-height:1.35;}
@media(max-width:760px){.sip-step{min-width:0;flex:1 1 30%;}}
/* 단계별 색상 (JSP 인라인 style 대신 클래스로 분리) */
.sip-step.step-y1{--c:#a9d0f5;} .sip-step.step-y2{--c:#7cb8f1;} .sip-step.step-y3{--c:#4f9aec;}
.sip-step.step-y4{--c:#2b7fe0;} .sip-step.step-y5{--c:#1663c0;} .sip-step.step-y6{--c:#0f4c96;}
.sip-step.step-c1{--c:#9fd8db;} .sip-step.step-c2{--c:#6cc3c8;} .sip-step.step-c3{--c:#38a7ae;}
.sip-step.step-c4{--c:#1b8f96;} .sip-step.step-c5{--c:#0d747b;} .sip-step.step-c6{--c:#045459;}

/* 버튼 */
.sip-btn{display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
  border-radius:8px;cursor:pointer;font-family:inherit;text-decoration:none;transition:.12s;}
.sip-btn-primary{width:100%;padding:16px 20px;background:var(--sub4,#0977c3);color:#fff;
  border:1px solid var(--sub4,#0977c3);box-shadow:0 2px 6px rgba(9,119,195,.25);}
.sip-btn-primary:hover{background:#0a6aad;border-color:#0a6aad;}
.sip-btn-line{padding:14px 40px;background:#fff;color:#333;border:1px solid #c4ccd3;}
.sip-btn-line:hover{border-color:var(--sub4,#0977c3);color:var(--sub4,#0977c3);}

/* 공간 지도 (핀 + 레이어 팝업) */
.sip-mapwrap{position:relative;margin-top:6px;}
.sip-map{aspect-ratio:16/9;border:1px solid var(--gray-e5,#e5e5e5);border-radius:10px;overflow:hidden;background:#f4f7fa;}
.sip-map .sip-ph{height:100%;min-height:0;border:0;border-radius:0;}
/* 실제 도면 이미지가 들어간 경우 : 핀 좌표(%)가 이미지 기준이므로 잘리거나 늘어나면 안 된다.
   고정 비율을 풀고 이미지 원본 비율 그대로 높이를 잡는다. */
.sip-map.has-img{aspect-ratio:auto;background:#fff;}
/* 도면 채도를 살짝 낮춰 그 위의 이름표가 묻히지 않게 한다 (도면 자체는 그대로 알아볼 수 있는 정도) */
.sip-map.has-img img{display:block;width:100%;height:auto;filter:saturate(.62) brightness(1.06);}
/* 개인정보 동의서 팝업
   표는 사이트 공통 .tableA .tableA-1, 체크박스는 .chk-st1, 스크롤은 .popup-cont 기본값을 그대로 쓴다.
   여기에는 대응 컴포넌트가 없는 것(원문 안내문·주의문구·구획 제목)만 둔다. */
/* 글자 크기는 사이트 규격을 따른다 — 본문 17px(.b-txt-st2), 작은글씨 15px(.sm-txt-st1),
   표 16px(.tableA), 체크박스 라벨 15px(.chk-st1). 임의로 줄이지 않는다. */
.sip-agree-lead{margin:0 0 12px;font-size:17px;color:#444;line-height:1.7;word-break:keep-all;}
.sip-agree-req{margin:0 0 22px;font-size:17px;font-weight:600;color:var(--sub4,#0977c3);word-break:keep-all;}
.sip-agree-sec{margin-bottom:30px;}
.sip-agree-sec h5{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:20px;font-weight:700;color:#222;}
.sip-agree-sec h5 .req{padding:3px 9px;border-radius:4px;background:#fdecef;color:#c2185b;font-size:14px;font-weight:700;}
/* 동의서 셀은 문장이 길어 가운데 정렬이면 읽기 어렵다 — 왼쪽 정렬로만 바꾸고 크기는 .tableA 기본(16px) 유지 */
.sip-agree-sec .tableA td{text-align:left;line-height:1.6;}
.sip-agree-note{margin:12px 0 14px;font-size:15px;color:#666;line-height:1.65;word-break:keep-all;}
.sip-agree-chk label{font-weight:600;color:#222;word-break:keep-all;}
/* 미동의 상태의 '동의하고 시작하기' — 눌리지 않는다는 걸 색으로도 알린다 */
#agreeYes[disabled]{background:#c9d3da;color:#fff;cursor:not-allowed;}

/* 도면 아래 공간 목록 — 도면의 대체 수단이므로 항상 노출한다(숨기면 대체 수단 구실을 못 한다). */
.sip-spotlist{margin-top:26px;}
.sip-spotlist-tit{margin:0 0 12px;font-size:17px;font-weight:700;color:#222;}
.sip-spotlist ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.sip-spotlist li{padding:14px 16px;border:1px solid var(--gray-e5,#e5e5e5);border-radius:8px;background:#fff;}
.sip-spotlist li strong{display:inline-block;padding:3px 10px;border-radius:999px;
  background:var(--sub4,#0977c3);color:#fff;font-size:13px;font-weight:700;}
.sip-spotlist li .sub{display:block;margin-top:8px;font-size:14.5px;font-weight:600;color:#333;}
.sip-spotlist li .catch{margin:6px 0 4px;font-size:13.5px;color:#555;line-height:1.5;word-break:keep-all;}
.sip-spotlist li .desc{margin:0;font-size:13px;color:#777;line-height:1.5;word-break:keep-all;}
@media(max-width:900px){.sip-spotlist ul{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.sip-spotlist ul{grid-template-columns:1fr;}}

.sip-pinlayer{position:absolute;inset:0;}
.sip-pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;z-index:2;}
.sip-pin:focus{outline:2px solid #cc0000;outline-offset:3px;border-radius:4px;}
/* 핀마다 z-index로 쌓임 맥락이 생겨, 팝업(자식)이 다른 핀 아래로 깔린다.
   열려 있는 핀 자체를 위로 올려 팝업이 항상 다른 핀보다 위에 오도록 한다. */
.sip-pin:hover,.sip-pin:focus,.sip-pin.on{z-index:20;}
/* 핀은 아이콘만 두면 도면 위에서 눈에 띄지 않아, 공간 이름을 함께 적은 이름표로 만든다.
   이름을 이미지에 굽지 않고 HTML 텍스트로 얹는 이유 :
     - 화면낭독기가 읽을 수 있고 브라우저 확대·번역에도 그대로 따라온다
     - 이미지 안의 글자는 WCAG 1.4.5(텍스트 이미지) 위반이 된다
   흰 테두리 + 그림자로 어떤 바닥색 위에서도 경계가 살아 있게 한다.
   배경(#0977c3)과 흰 글씨의 명도대비는 4.73:1 로 AA 기준(4.5:1)을 넘는다. */
.sip-pin .mark{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  padding:5px 11px 5px 8px;border-radius:999px;
  background:var(--sub4,#0977c3);color:#fff;font-size:13.5px;font-weight:700;line-height:1.2;
  border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35);transition:transform .12s,background .12s;}
.sip-pin .mark .bi{font-size:13px;line-height:1;}
.sip-pin:hover .mark,.sip-pin:focus .mark,.sip-pin.on .mark{transform:scale(1.08);background:#0a4f86;}
/* 좁은 화면에서는 이름표끼리 겹치므로 단계적으로 줄인다.
   480px 이하에서는 이름을 감추고 아이콘만 남긴다 — 이름은 눌렀을 때 팝업에서 확인한다.
   (보이는 글자가 없어지므로 WCAG 2.5.3 Label in Name 대상에서 벗어나며, aria-label 이 이름을 계속 제공한다) */
@media(max-width:767px){
  .sip-pin .mark{font-size:11px;padding:3px 8px 3px 6px;gap:3px;border-width:1.5px;}
  .sip-pin .mark .bi{font-size:11px;}
}
@media(max-width:480px){
  .sip-pin .mark{font-size:0;gap:0;padding:6px;}
  .sip-pin .mark .bi{font-size:13px;}
}
/* 이름표 아래 꼬리 — 실제 위치를 정확히 가리킨다 */
.sip-pin::before{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:#fff;}
.sip-pin::after{content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--sub4,#0977c3);}
.sip-pin:hover::after,.sip-pin:focus::after,.sip-pin.on::after{border-top-color:#0a4f86;}
/* 레이어 팝업 */
.sip-pop{position:absolute;left:50%;transform:translateX(-50%);width:280px;background:#fff;
  border:1px solid var(--gray-e5,#e5e5e5);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.18);
  padding:12px;opacity:0;visibility:hidden;transition:.15s;z-index:10;}
.sip-pin:hover .sip-pop,.sip-pin:focus .sip-pop,.sip-pin.on .sip-pop{opacity:1;visibility:visible;}
.sip-pin.pos-up .sip-pop{bottom:calc(100% + 14px);}
.sip-pin.pos-down .sip-pop{top:calc(100% + 8px);}
.sip-pin.h-left .sip-pop{left:0;transform:translateX(-14px);}
.sip-pin.h-right .sip-pop{left:auto;right:0;transform:translateX(14px);}
.sip-pop::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:8px solid transparent;}
.sip-pin.pos-up .sip-pop::after{top:100%;border-top-color:#fff;}
.sip-pin.pos-down .sip-pop::after{bottom:100%;border-bottom-color:#fff;}
.sip-pin.h-left .sip-pop::after{left:26px;}
.sip-pin.h-right .sip-pop::after{left:auto;right:26px;}
/* 팝업 사진 – 2장 이상이면 좌우 슬라이드 */
.sip-pop .pop-img{position:relative;margin-bottom:10px;border-radius:6px;overflow:hidden;
  background:var(--gray-f5,#f5f5f5);}
.sip-pop .pop-img .sip-ph{aspect-ratio:16/10;min-height:0;border:0;border-radius:0;margin:0;}
.sip-pop .pop-track{display:flex;transition:transform .25s ease;}
.sip-pop .pop-track img{flex:0 0 100%;display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
.sip-pop .pop-nav{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;
  font-size:13px;line-height:1;cursor:pointer;transition:background .12s;}
.sip-pop .pop-nav:hover{background:rgba(0,0,0,.72);}
.sip-pop .pop-nav.prev{left:6px;}
.sip-pop .pop-nav.next{right:6px;}
.sip-pop .pop-count{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:10px;
  background:rgba(0,0,0,.5);color:#fff;font-size:11px;font-weight:600;}
/* 마커와 팝업 사이 여백에서 hover가 끊기면 슬라이드 버튼을 누를 수 없어, 투명 영역으로 이어준다 */
.sip-pin .sip-pop::before{content:"";position:absolute;left:0;width:100%;}
.sip-pin.pos-up .sip-pop::before{top:100%;height:16px;}
.sip-pin.pos-down .sip-pop::before{bottom:100%;height:10px;}
.sip-pop .pop-badge{display:inline-block;background:var(--sub4,#0977c3);color:#fff;font-size:13px;font-weight:700;padding:5px 12px;border-radius:5px;vertical-align:middle;}
.sip-pop .pop-sub{display:inline-block;margin-left:7px;font-size:12.5px;font-weight:600;color:#7b8590;vertical-align:middle;}
.sip-pop .pop-catch{margin:9px 0 5px;font-size:13.5px;font-weight:600;color:#222;line-height:1.45;word-break:keep-all;}
.sip-pop .pop-desc{margin:0;font-size:12.5px;color:#666;line-height:1.5;word-break:keep-all;}

/* 2개짜리 탭 (사이트 기본 .tab-btn.tab-st1 위에 폭/하단여백만 재정의)
   – .tab-st1의 margin 단축속성이 .mb50을 덮어쓰므로 여기서 margin-bottom을 지정 */
.tab-btn.tab-st1.sip-tab2{margin:0 -3px 50px;}
.tab-btn.tab-st1.sip-tab2 > li{flex:0 1 50%;}
@media(max-width:560px){.tab-btn.tab-st1.sip-tab2{margin-bottom:34px;}.tab-btn.tab-st1.sip-tab2 > li{flex:0 1 50%;}}

/* 프로그램 신청 – 필터 + 검색 */
.sip-filterrow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px;}
/* 왼쪽 : 진행상태·연령 셀렉트 / 오른쪽 : 검색조건 셀렉트 + 검색창 */
.sip-leftgroup,.sip-rightgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sip-selbox{height:40px;border:1px solid #d0d5da;border-radius:999px;padding:0 36px 0 18px;font-size:14.5px;
  font-weight:600;color:#333;font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;}
.sip-selbox:focus{border-color:var(--sub4,#0977c3);}
.sip-search{display:flex;align-items:center;border:1px solid #d0d5da;border-radius:999px;overflow:hidden;background:#fff;}
.sip-search input{border:0;padding:9px 6px 9px 18px;font-size:14.5px;width:200px;font-family:inherit;color:#333;background:transparent;}
.sip-search button{border:0;background:transparent;padding:8px 16px 8px 6px;color:#888;cursor:pointer;font-size:16px;display:flex;align-items:center;}
.sip-search button:hover{color:var(--sub4,#0977c3);}
@media(max-width:560px){
  .sip-leftgroup,.sip-rightgroup{width:100%;}
  .sip-leftgroup .sip-selbox{flex:1;}
  .sip-rightgroup .sip-search{flex:1;}
  .sip-search input{width:100%;}
}

/* 프로그램 포스터(썸네일) */
.sip-posters{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
/* 메인 – 프로그램 캐러셀 (한 화면 4건, 좌우 화살표) */
.program-swiper-wrap{position:relative;}
.program-swiper{overflow:hidden;}
.program-swiper .swiper-slide{height:auto;}
.program-swiper .sip-poster{height:100%;}
/* 화살표는 캐러셀 양 끝에 겹쳐 둔다.
   (main.css처럼 -35px 바깥에 두면 .inner-padding 여백이 좁은 화면에서 잘린다) */
.program-swiper-wrap .swiper-btn-st1 > div{position:absolute;top:50%;transform:translateY(-50%);z-index:10;}
.program-swiper-wrap .swiper-btn-st1 > div.swiper-button-prev{left:0;}
.program-swiper-wrap .swiper-btn-st1 > div.swiper-button-next{right:0;}
/* 끝에 닿으면 화살표가 X(비활성)로 바뀌는데, swiper 기본 CSS가 여기에 pointer-events:none 을 건다.
   화살표를 카드 위에 겹쳐 놓았기 때문에 그대로 두면 클릭이 뒤쪽 포스터로 통과해 상세로 이동해 버린다.
   → 클릭을 화살표가 삼키도록 되살리고, 누를 수 없는 상태임을 커서로 알린다. */
.program-swiper-wrap .swiper-btn-st1 > div.swiper-button-disabled{pointer-events:auto;cursor:default;}
/* 비활성(첫/끝 슬라이드) 아이콘·투명도는 사이트 기본(main.css / swiper) 규칙을 그대로 따른다 */
.sip-poster{display:block;color:inherit;text-decoration:none;border:1px solid var(--gray-e5,#e5e5e5);border-radius:8px;overflow:hidden;background:#fff;transition:.15s;cursor:pointer;}
.sip-poster .sip-ph,.sip-poster .meta h4{text-decoration:none;}
.sip-poster:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-3px);}
.sip-poster .img{aspect-ratio:4/3;position:relative;}
.sip-poster .img .sip-ph{height:100%;min-height:0;border:0;border-radius:0;}
/* BO 등록 썸네일 : 카드 비율(4/3)에 맞춰 잘라 채운다 */
.sip-poster .img .sip-thumb{display:block;width:100%;height:100%;object-fit:cover;}
.sip-poster .badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2;}
.sip-chip{font-size:12px;font-weight:600;padding:5px 11px;border-radius:4px;color:#fff;}
.chip-y{background:var(--sub4,#0977c3);}
.chip-c{background:#5c6bc0;}
.chip-upcoming{background:#b45309;}
.chip-open{background:var(--cate1,#187bfc);}
.chip-closed{background:#9aa4ad;}
.sip-poster .meta{padding:14px 16px;}
.sip-poster .meta h4{margin:0;font-size:16px;font-weight:600;color:#222;}
.sip-poster .hover{position:absolute;inset:0;background:rgba(13,60,100,.93);color:#fff;opacity:0;transition:.18s;
  display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px;}
.sip-poster:hover .hover{opacity:1;}
.sip-poster .hover .li{font-size:14px;display:flex;gap:8px;}
.sip-poster .hover .li b{opacity:.75;font-weight:500;min-width:62px;flex:0 0 auto;}
/* 날짜·시각이 중간에서 끊기지 않게 한다. 한 줄에 다 못 들어가면 '~' 앞뒤로만 줄이 바뀌고,
   넘어간 줄은 라벨 폭만큼 들여써져 값끼리 세로로 정렬된다.
     신청기간 2026.08.13. 09:00 ~
              2026.08.20. 18:00                                              */
.sip-poster .hover .li .v{min-width:0;}
.sip-poster .hover .li .v .nb{white-space:nowrap;}

/* 페이지네이션 */
.sip-pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:34px;flex-wrap:wrap;}
.sip-pagination button{min-width:38px;height:38px;padding:0 10px;border:1px solid #d9dee3;background:#fff;color:#555;
  border-radius:6px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;transition:.12s;}
.sip-pagination button:hover:not(:disabled){border-color:var(--sub4,#0977c3);color:var(--sub4,#0977c3);}
.sip-pagination button.on{background:var(--sub4,#0977c3);border-color:var(--sub4,#0977c3);color:#fff;}
.sip-pagination button:disabled{opacity:.4;cursor:default;}

/* 프로그램 상세 */
.sip-detail{display:grid;grid-template-columns:320px 1fr;gap:30px;align-items:start;}
.sip-posterbox{aspect-ratio:3/4;border:1px solid var(--gray-e5,#e5e5e5);border-radius:8px;overflow:hidden;}
.sip-posterbox .sip-ph{height:100%;min-height:0;border:0;border-radius:0;}
.sip-posterbox .sip-thumb{display:block;width:100%;height:100%;object-fit:cover;}

/* 활동 카드 */
.sip-act{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.sip-act.col1{grid-template-columns:1fr;margin-bottom:30px;}
.sip-act.col2{grid-template-columns:1fr 1fr;margin-bottom:30px;}
.sip-act .a{border:1px solid var(--gray-e5,#e5e5e5);border-radius:8px;padding:22px 18px;background:#fff;}
.sip-act .a .ic{width:54px;height:54px;border-radius:15px;
  background:linear-gradient(135deg,#e7f1fb,#f4f9fd);border:1px solid #e3eef8;
  display:grid;place-items:center;margin-bottom:15px;}
.sip-act .a .ic svg{display:block;}
.sip-act .a h4{margin:0 0 7px;font-size:17px;font-weight:600;color:#222;}
.sip-act .a p{margin:0;font-size:14.5px;color:#666;line-height:1.6;word-break:keep-all;}

/* 허브(index) 카드 */
.sip-hubcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.sip-hub{display:block;border:1px solid var(--gray-e5,#e5e5e5);border-top:3px solid var(--sub4,#0977c3);
  border-radius:8px;overflow:hidden;background:#fff;transition:.15s;}
.sip-hub:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-4px);}
.sip-hub .top{height:140px;background:#eef3f8;display:grid;place-items:center;font-size:44px;}
.sip-hub .bd{padding:24px;}
.sip-hub h4{margin:0 0 8px;font-size:20px;font-weight:600;color:#222;}
.sip-hub p{margin:0 0 16px;font-size:15px;color:#666;line-height:1.6;}
.sip-hub .go{color:var(--sub4,#0977c3);font-weight:600;font-size:15px;}

/* 메인 – 밝은 배경용 '바로가기' 버튼 (main.css의 .more-btn-st2는 흰 글씨/어두운 배경 전용)
   0803 PPT 1p : 버튼 크기는 글씨 크기에 맞춰 구성 → 고정폭(240px) 대신 내용 폭 */
.more-btn-st2.more-btn-line{flex-shrink:0;width:auto;max-width:none;padding:11px 22px;
  color:var(--sub4,#0977c3);font-weight:600;white-space:nowrap;
  background:#fff;border:1px solid var(--sub4,#0977c3);transition:.15s;}
.more-btn-st2.more-btn-line:hover{color:#fff;background:var(--sub4,#0977c3);border-color:var(--sub4,#0977c3);}

/* 모바일 : 제목을 한 줄로 두고 '바로가기'를 제목 아래로 내린다.
   (.sec-tit이 flex 한 줄이라 240px 버튼이 제목 폭을 좁혀 줄바꿈을 일으킴) */
@media(max-width:767px){
  .section-place .sec-tit{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px;}
  /* 한 줄 유지를 위해 폭에 따라 축소. 6vw면 360px에서 여백이 거의 없어 5.6vw로 둠 */
  .section-place .sec-tit .h-tit-st1{white-space:nowrap;font-size:min(3.8rem,5.6vw);}
}

/* ── 프로그램 신청(program-apply.html) ── */
/* component/content.css에는 list 초기화가 없어(사이트 reset이 별도 파일) 목업에서 마커가 보임 */
#applyForm ul{list-style:none;}
.apply-target{margin:0 0 26px;padding:16px 20px;background:var(--gray-f5,#f5f5f5);border-radius:8px;
  font-size:16px;color:#555;}
.apply-target strong{margin-left:10px;font-weight:600;color:#222;}

/* 섹션 제목 옆 필수/선택 배지 */
.apply-flag{display:inline-block;margin-left:8px;padding:4px 11px;border-radius:4px;
  font-size:13px;font-weight:600;vertical-align:middle;}
.apply-flag.req{background:#fdecec;color:#c0392b;}
.apply-flag.opt{background:var(--gray-f5,#f5f5f5);color:#777;}
.req-mark{color:#c0392b;font-weight:700;}

.apply-help{margin:12px 0 0;font-size:14.5px;color:#888;}

/* 위기상황 6문항 : 일상위험고립군일 때만 노출 */
.crisis-block[hidden]{display:none;}
.crisis-guide{margin:0 0 10px;padding:14px 18px;background:#fff8ec;border:1px solid #f2e2c4;border-radius:8px;}
.crisis-guide p{margin:0;font-size:15px;color:#7a5f22;line-height:1.6;}
.crisis-guide strong{font-weight:600;}
.apply-note{margin-bottom:24px;padding:18px 20px;background:#f4f9fd;border:1px solid #dcecf8;border-radius:8px;}
.apply-note p{margin:0;font-size:15px;color:#555;line-height:1.65;}
.apply-note p + p{margin-top:6px;}
.apply-note strong{font-weight:600;color:var(--sub4,#0977c3);}

/* 제출은 가운데, 자가진단 건너뛰기는 같은 줄 오른쪽 */
.apply-btns{position:relative;display:flex;justify-content:center;align-items:center;margin:50px 0 100px;}
.apply-btns .apply-submit{min-width:220px;padding:18px 30px;font-size:18px;cursor:pointer;border:0;
  box-shadow:0 3px 10px rgba(9,119,195,.3);}
.apply-btns .apply-skip{position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:#fff;color:#666;border:1px solid #c4ccd3;}
.apply-btns .apply-skip:hover{border-color:var(--sub4,#0977c3);color:var(--sub4,#0977c3);}
@media(max-width:767px){
  .apply-btns{flex-direction:column;gap:10px;margin-bottom:70px;}
  .apply-btns .apply-submit{width:100%;}
  .apply-btns .apply-skip{position:static;transform:none;width:100%;}
}

/* 방문등록 배너 (프로그램 소개 탭 하단 CTA)
   – 숲 컨셉에 맞춰 파스텔 연두·초록 바탕 (0803 PPT 6p) */
.sip-visit{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-top:60px;padding:46px 50px 0;min-height:270px;border-radius:28px;overflow:hidden;
  color:inherit;
  background-color:#eaf6e4;
  background-image:radial-gradient(rgba(58,138,60,.10) 1.6px,transparent 1.7px);
  background-size:26px 26px;}

.sip-visit .txt{position:relative;z-index:1;max-width:660px;padding-bottom:46px;}
.sip-visit .eyebrow{display:block;margin-bottom:14px;font-size:16px;font-weight:500;color:#4f6b47;}
.sip-visit .tit,.sip-visit .tit2{display:block;font-size:34px;font-weight:700;line-height:1.35;
  color:#1f4523;letter-spacing:-.02em;word-break:keep-all;}
.sip-visit .tit2{margin-top:4px;font-size:19px;font-weight:500;color:#42663c;}
.sip-visit .desc{margin:16px 0 18px;font-size:16.5px;line-height:1.65;color:#4f6b4a;word-break:keep-all;}
.sip-visit .btn{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:14px 30px;border-radius:999px;
  border:0;cursor:pointer;font-family:inherit;
  background:#33803a;color:#fff;font-size:17px;font-weight:700;
  box-shadow:0 4px 12px rgba(51,128,58,.28);transition:gap .15s,background .15s;}
.sip-visit .btn:hover{gap:14px;background:#2a6a2c;}
/* 사전신청이 아니라는 안내 */
.sip-visit .caution{margin:18px 0 0;display:flex;gap:.25em;font-size:14.5px;line-height:1.6;color:#556b4f;word-break:keep-all;}

.sip-visit .char{position:relative;z-index:1;flex-shrink:0;align-self:flex-end;}
.sip-visit .char img{display:block;width:240px;height:auto;}

@media(max-width:1100px){
  .sip-visit .tit{font-size:28px;}
  .sip-visit .char img{width:180px;}
}
@media(max-width:900px){
  .sip-visit{flex-direction:column-reverse;align-items:flex-start;gap:0;padding:32px 30px 0;min-height:0;}
  .sip-visit .txt{padding-bottom:34px;}
  .sip-visit .tit{font-size:24px;}
  .sip-visit .tit2{font-size:17px;}
  .sip-visit .char{align-self:flex-end;margin-top:-10px;}
  .sip-visit .char img{width:150px;}
}
@media(max-width:560px){
  .sip-visit{padding:26px 22px 0;border-radius:20px;}
  .sip-visit .eyebrow{font-size:14.5px;}
  .sip-visit .tit{font-size:21px;}
  .sip-visit .tit2{font-size:16px;}
  .sip-visit .desc{font-size:15px;}
  .sip-visit .btn{width:100%;justify-content:center;}
  .sip-visit .char img{width:120px;}
}

/* 안내 노트 */
.sip-note{background:#fbfaf3;border:1px solid #ece3c8;border-radius:6px;padding:13px 17px;
  font-size:13.5px;color:#8a6d1f;margin-top:16px;}

@media(max-width:900px){
  .sip-cards,.sip-space-grid,.sip-posters,.sip-photos,.sip-act,.sip-hubcards{grid-template-columns:1fr 1fr;}
  .sip-detail{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .sip-cards,.sip-space-grid,.sip-posters,.sip-photos,.sip-act,.sip-hubcards{grid-template-columns:1fr;}
}

/* ============================================================
   0803 PPT 반영분
   ============================================================ */

/* ── 팝업 : 사이트 공통 .popup-wrap 컴포넌트를 쓰고, 내용부 보조 스타일만 둔다 ── */
.sip-popup .popup-inner{max-width:520px;}
.sip-popup .popup-box1{border-radius:8px;overflow:hidden;}
.sip-popup .popup-top{display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--gray-e5,#e5e5e5);}
.sip-popup .popup-cont{padding:24px;max-height:calc(100vh - 220px);overflow-y:auto;}
.sip-popup .btn-ce{border-top:1px solid var(--gray-e5,#e5e5e5);gap:0;}
.sip-popup .btn-ce button + button{border-left:1px solid var(--gray-e5,#e5e5e5);}
/* 미응답 문항 목록 */
.sip-misslist{margin:14px 0 0;padding:14px 16px;max-height:200px;overflow:auto;list-style:none;
  background:var(--gray-f5,#f5f5f5);border-radius:8px;font-size:15px;color:#c0392b;line-height:1.7;}
/* 개인정보 동의 본문 */
.sip-agreebox{margin:14px 0 0;padding:16px;max-height:230px;overflow:auto;
  border:1px solid var(--gray-e5,#e5e5e5);border-radius:8px;background:#fcfcfd;
  font-size:14.5px;line-height:1.7;color:#666;}
.sip-agreebox dt{margin-top:12px;font-weight:600;color:#333;}
.sip-agreebox dt:first-child{margin-top:0;}

/* 미응답 문항 하이라이트 */
.bbs-st1 > li.sip-invalid{background:#fff6f6;box-shadow:inset 3px 0 0 #c0392b;}

/* ── 신청완료 화면 ── */
.sip-done{max-width:640px;margin:20px auto 90px;text-align:center;}
.sip-done .ic{width:88px;height:88px;margin:0 auto 26px;border-radius:50%;display:grid;place-items:center;
  background:#eaf4fc;color:var(--sub4,#0977c3);font-size:44px;line-height:1;}
.sip-done h3{margin:0 0 14px;font-size:26px;font-weight:700;color:#222;line-height:1.4;word-break:keep-all;}
/* 안내문을 제목과 같은 크기로 (0824 수정요청) */
.sip-done .lead{margin:0 0 26px;font-size:26px;font-weight:600;color:#555;line-height:1.5;word-break:keep-all;}
.sip-done .tel-box{padding:20px;border:1px solid var(--gray-e5,#e5e5e5);border-radius:10px;
  background:var(--gray-f5,#f5f5f5);font-size:15.5px;color:#555;line-height:1.7;}
.sip-done .tel-box .tel{display:block;margin-top:6px;font-size:22px;font-weight:700;color:var(--sub4,#0977c3);}
@media(max-width:560px){
  .sip-done h3{font-size:21px;}
}

/* ── 자가진단 결과 : 똑똑 .result-box 컴포넌트를 그대로 쓰고 카카오 버튼 색만 보강 ── */
.sip-kakao{background-color:#f7e011;color:#3c1e1e;}
/* 긴급위기군 전용 연락처 안내 */
/* hidden 속성은 UA 기본 display:none 인데, 여기서 display 를 지정하면 그 값이 이겨
   긴급위기군이 아닐 때도 빈 분홍 상자가 남는다. [hidden] 을 명시해 확실히 숨긴다. */
.sip-urgent-tel[hidden]{display:none;}
.sip-urgent-tel{margin-top:18px;padding:16px 20px;display:inline-block;text-align:left;
  background:#fff5f5;border:1px solid #f0c9c9;border-radius:8px;
  font-size:15.5px;line-height:1.9;color:#444;}

/* ── 프로그램 상세 : 포스터 높이를 오른쪽 신청란과 맞춤 (0803 PPT 11p) ── */
.sip-detail{align-items:start;}
/* 상세 포스터는 목록 썸네일과 같은 4:3 (0803 PPT의 '신청란 크기로 통일'보다 목록 일관성 우선) */
.sip-detail .sip-posterbox{aspect-ratio:4/3;height:auto;min-height:0;}
.sip-detail .sip-posterbox img{display:block;width:100%;height:100%;object-fit:cover;}
.sip-detail .sip-detail-info{display:flex;flex-direction:column;}
.sip-detail .sip-detail-info .mt20{padding-top:4px;}
@media(max-width:900px){.sip-detail .sip-posterbox{min-height:0;aspect-ratio:4/3;}}

/* 정원/신청인원 */
.sip-capacity .cur{color:var(--sub4,#0977c3);font-weight:600;}
.sip-capacity .sub{color:#888;font-size:.95em;}

/* ============================================================
   메인 화면 개편분 (0803 PPT 2p / 메인 pc·모바일 시안)
   main.css를 건드리지 않고 이 파일에서 덮어쓴다.
   ============================================================ */

/* 1) 메인 비주얼 : 배너(가로2:세로1) + 우측 바로가기 2종
      main.css의 .section1 .main-swiper(고정 1200x450)를 덮어써야 하므로 선택자를 더 길게 잡는다.
      모서리 반경은 사이트 카드 공통값(1.5rem)을 따른다. */
/* 배너 위 수박 캐릭터를 걷어냈으므로 그 자리로 잡혀 있던 여백(12.5rem)도 줄인다 */
.section.section1{padding-top:4rem;}
.section1 .main-visual{display:grid;grid-template-columns:minmax(0,1fr) 260px 260px;gap:20px;align-items:stretch;}
.section1 .main-visual .main-swiper{width:auto;margin:0;overflow:hidden;border-radius:1.5rem;}
.section1 .main-visual .main-swiper .swiper-slide{width:100%;height:auto;}
.section1 .main-visual .main-swiper .swiper-slide .img-wrap{aspect-ratio:2/1;height:auto;overflow:hidden;border-radius:0;background:var(--light1);}
.section1 .main-visual .main-swiper .swiper-slide .img-wrap img{width:100%;height:100%;object-fit:cover;}
/* 화살표·컨트롤을 배너 안쪽으로 (기존에는 배너 바깥 -35px / bottom:-40px) */
.section1 .main-visual .main-swiper .swiper-btn-st1 > div.swiper-button-prev{left:14px;}
.section1 .main-visual .main-swiper .swiper-btn-st1 > div.swiper-button-next{right:14px;}
/* 배너 화살표도 배너 링크 위에 겹쳐 있어 같은 통과 클릭이 생긴다 (위 프로그램 캐러셀과 동일 사유) */
.section1 .main-visual .main-swiper .swiper-btn-st1 > div.swiper-button-disabled{pointer-events:auto;cursor:default;}
.section1 .main-visual .swiper-control-st1{bottom:18px;right:24px;}

/* 바로가기 카드 : 타이포·버튼은 사이트 공통 컴포넌트(h-tit-st3 / sm-txt-st1 / more-btn-st2)를 그대로 쓰고,
   일러스트도 '지금 서울은' 박스에서 같은 주제에 쓰는 이미지를 재사용한다. */
/* 캐릭터는 카드 배경색과 같은 계열로 짝지었다.
     하늘색(--light2 #e9f8ff) → 수박 : 붉은 과육이 하늘색과 보색으로 또렷하게 보인다
     연보라(#eee7fa)          → 가지 : 배경과 같은 보라 계열이라 톤이 자연스럽게 이어진다
   바닥 전체를 채우던 일러스트와 달리 우하단에 작게 두고, 그만큼 아래 여백만 비워
   글씨·버튼과 겹치지 않게 한다(버튼은 좌측 정렬이라 서로 자리를 침범하지 않음). */
.main-shortcut{position:relative;display:flex;flex-direction:column;
  padding:35px 28px 118px;border-radius:1.5rem;overflow:hidden;
  background-repeat:no-repeat;background-position:right 18px bottom 14px;background-size:auto 96px;}
.main-shortcut.sc-crisis{background-color:var(--light2);background-image:url(../img/itdaplace/char-subak.png);}
.main-shortcut.sc-selftest{background-color:#eee7fa;background-image:url(../img/itdaplace/char-gaji.png);}
.main-shortcut .h-tit-st3{font-size:2.6rem;color:var(--main1);}
.main-shortcut.sc-selftest .h-tit-st3{color:#4a3080;}
.main-shortcut .sm-txt-st1{margin-top:14px;color:#555;}
.main-shortcut .more-btn-st2{margin-top:24px;max-width:none;width:auto;align-self:flex-start;background:var(--main4);word-break:keep-all;}   /* 좁은 화면에서 "위기주민 알리/기" 처럼 단어가 잘리지 않게 */
.main-shortcut.sc-selftest .more-btn-st2{background:#6b4bc4;}
.main-shortcut:hover .h-tit-st3{text-decoration:underline;}

@media(max-width:1240px){
  /* 1fr 그대로 두면 swiper가 잡는 min-content 때문에 가로로 넘친다 */
  .section1 .main-visual{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .section1 .main-visual .main-swiper{grid-column:1/-1;}
}
@media(max-width:560px){
  .section1 .main-visual{gap:12px;}
  /* 모바일은 캐릭터를 빼고, 캐릭터 자리로 비워둔 아래 여백도 없앤다 — 카드가 세로로 길어지는 것 방지.
     ※ 미디어쿼리는 특이도를 올려주지 않는다. 이미지를 지정한 쪽이 .main-shortcut.sc-* (클래스 2개)
        이므로 같은 형태로 덮어야 한다 — .main-shortcut 하나로는 이기지 못한다. */
  .main-shortcut{padding:22px 18px;}
  .main-shortcut.sc-crisis,
  .main-shortcut.sc-selftest{background-image:none;}
  .main-shortcut .h-tit-st3{font-size:1.9rem;}
  .main-shortcut .more-btn-st2{margin-top:16px;padding:8px 14px;font-size:13px;}
}

/* 2) 지원사업 : 썸네일(포스터) 형태 — 잇다플레이스 프로그램과 동일한 카드
      기존 .sp-list 규칙이 붙지 않도록 클래스명을 .sp-thumb-list로 새로 둔다. */
.section3 .support-wrap .sec-con .sp-thumb-list{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.section3 .support-wrap .sec-con .sp-thumb-list > li{width:auto;margin:0;}
.section3 .support-wrap .sec-con .sp-thumb-list .sip-poster{height:100%;display:flex;flex-direction:column;}
.section3 .support-wrap .sec-con .sp-thumb-list .sip-poster .img{aspect-ratio:4/3;overflow:hidden;background:var(--gray-f5,#f5f5f5);}
.section3 .support-wrap .sec-con .sp-thumb-list .sip-poster .img img{width:100%;height:100%;object-fit:cover;}
.section3 .support-wrap .sec-con .sp-thumb-list .sip-poster .meta{flex-grow:1;}
.section3 .support-wrap .sec-con .sp-thumb-list .sip-poster .meta .sm-txt-st1{display:block;margin-top:8px;}
@media(max-width:900px){.section3 .support-wrap .sec-con .sp-thumb-list{grid-template-columns:1fr 1fr;gap:16px;}}
/* 모바일에서도 한 줄에 2개가 보이도록 카드 내부 요소 축소 */
@media(max-width:560px){
  .section3 .support-wrap .sec-con .sp-thumb-list{grid-template-columns:1fr 1fr;gap:12px;}
  .section3 .support-wrap .sec-con .sp-thumb-list .sip-poster .meta{padding:10px 11px;}
  .section3 .support-wrap .sec-con .sp-thumb-list .sip-poster .meta h4{font-size:1.4rem;line-height:1.45;}
  .section3 .support-wrap .sec-con .sp-thumb-list .sip-poster .badges{top:8px;left:8px;gap:4px;}
  .section3 .support-wrap .sec-con .sp-thumb-list .sip-chip{font-size:1.1rem;padding:4px 8px;}
}

/* 3) 섹션 상하 여백 : main.css의 .section{padding:9rem 0}이 모바일에서 재정의되지 않아
      좁은 화면에서도 섹션 사이가 180px씩 벌어진다. 화면 폭에 맞춰 단계적으로 줄인다.
      (.section3의 padding-bottom:0 등 개별 규칙은 특이도가 높아 그대로 유지된다.
       .section2는 아래 블록에서 따로 더 줄이므로 sec-tit 여백은 건드리지 않는다.) */
@media(max-width:1023px){
  .section{padding:6rem 0;}
  .section:not(.section2) .sec-tit{margin-bottom:30px;}
}
@media(max-width:767px){
  .section{padding:4rem 0;}
  .section:not(.section2) .sec-tit{margin-bottom:22px;}
  .section.section1{padding-top:2rem;}
}

/* 4) 지금 서울은 : 모바일 줄간격·영역 축소
      ※ 박스 관련 규칙은 반드시 main.css와 같은 깊이(.section2 .sec-con .grid-wrap .box-item)로 쓸 것.
        .sec-con 을 빼면 특이도가 낮아 main.css의 padding:40px 20px 100px 20px 에 밀린다. */
@media(max-width:767px){
  .section2{padding-top:30px;padding-bottom:30px;}
  .section2 .sec-tit{margin-bottom:16px;}
  .section2 .sec-con .grid-wrap{gap:8px;}
  /* 하단 여백(원래 100px)은 배경 일러스트 자리였으나, 겹쳐도 무방하다는 요청에 따라 걷어낸다.
     배경 이미지는 콘텐츠 뒤에 깔리므로 글자·버튼 가독성에는 영향이 없다. */
  .section2 .sec-con .grid-wrap .box-item{padding:18px 16px 18px 16px;gap:6px;}
  .section2 .sec-con .grid-wrap .box-item .h-tit-st3{font-size:1.7rem;line-height:1.3;margin-bottom:2px;}
  .section2 .sec-con .grid-wrap .box-item .h-tit-st3 br{display:none;}
  .section2 .sec-con .grid-wrap .box-item .num{margin:2px 0 8px;line-height:1.1;}
  .section2 .sec-con .grid-wrap .box-item .num em{font-size:3.2rem;}
  .section2 .sec-con .grid-wrap .box-item .more-btn-st2{margin-top:0;padding:8px 12px;}
  .section2 .sec-con .grid-wrap .box-item .inp-flex{margin-top:8px;}
  .section2 .sec-con .grid-wrap .box-item .sm-txt-st1{line-height:1.4;}
  /* 마지막 박스의 장식 이미지는 겹치면서 검색창 클릭을 막지 않도록 처리 */
  .section2 .sec-con .grid-wrap .box-item:last-child::before{pointer-events:none;}

  /* 하단 여백을 없애면서 일러스트가 흰 글자 위로 올라와 명도대비가 무너진다.
     (특히 1·2번 박스의 흰 원 위에서 흰 글자가 사라짐)
     높이는 그대로 두고 일러스트만 줄여 우측 하단 구석으로 밀어낸다. */
  .section2 .sec-con .grid-wrap .box-item:first-child{background-size:74px auto;background-position:right -8px bottom -6px;}
  .section2 .sec-con .grid-wrap .box-item:nth-child(2){background-size:74px auto;background-position:right -8px bottom -6px;}
  .section2 .sec-con .grid-wrap .box-item:nth-child(3){background-size:84px auto;background-position:right -8px bottom -6px;}
  .section2 .sec-con .grid-wrap .box-item:nth-child(4){background-size:74px auto;background-position:right -8px bottom -6px;}
  .section2 .sec-con .grid-wrap .box-item:last-child::before{width:96px;height:96px;right:-10px;bottom:-10px;background-size:contain;}
}