/* IW Main Hero — 스킨 공용 CSS (스타일2~5)
   스타일1(스크롤 스택)은 iw-hero.css 를 쓰고 이 파일을 로드하지 않는다.
   여기에는 스킨들이 공유하는 슬라이더·인디케이터·문구 기본형만 둔다. */

.iwsk { --ac: var(--iw-brand, #1a3ea8); --ink: var(--iw-ink, #141a1f);
  font-family: var(--iw-font, 'Pretendard', 'Noto Sans KR', sans-serif); width: 100%; }
.iwsk * { box-sizing: border-box; }
.iwsk-in { max-width: var(--iwsk-w, 1800px); margin: 0 auto; padding: 0 30px; }

/* ── 공용 슬라이더 ── */
.iwsk-stage { position: relative; overflow: hidden; background: #e9edf1; outline: none; }
.iwsk-slide { position: absolute; inset: 0; display: block; text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s ease; }
.iwsk-slide.is-on { opacity: 1; visibility: visible; }
.iwsk-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.iwsk-video, .iwsk-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.iwsk-shade { position: absolute; inset: 0; pointer-events: none; }
.iwsk-empty { display: flex; align-items: center; justify-content: center; min-height: 200px;
  height: 100%; color: #8a949e; font-size: 14px; }
.iwsk-stage[data-effect="slide"] .iwsk-slide { transform: translateX(40px);
  transition: opacity .55s ease, transform .55s ease, visibility .55s; }
.iwsk-stage[data-effect="slide"] .iwsk-slide.is-on { transform: translateX(0); }

/* ── 공용 인디케이터 ── */
.iwsk-dots { display: flex; align-items: center; gap: 7px; }
.iwsk-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.5); cursor: pointer; transition: .15s; }
.iwsk-dot.is-on { background: #fff; width: 24px; border-radius: 6px; }
.iwsk-count { font-size: 13px; font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: rgba(255,255,255,.72); }
.iwsk-count .iwsk-cur { color: #fff; font-size: 15px; }
.iwsk-pause { width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.22); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.iwsk-pause:hover { background: rgba(255,255,255,.4); }
.iwsk-pause-i { width: 8px; height: 10px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.iwsk-pause.is-paused .iwsk-pause-i { width: 0; height: 0; border: none;
  border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.iwsk-arrow { border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.72); color: #2b333d; width: 44px; height: 44px;
  border-radius: 50%; font-size: 16px; transition: .15s; }
.iwsk-arrow:hover { background: #fff; color: #141a1f; }

/* ============================================================
   스타일5 — 풀스크린 배너
   참고: 강원랜드 사회공헌재단 · 서충주장애인복지관
   ============================================================ */
.iwsk-s5 { position: relative; }
.iwsk-s5 .iwsk-stage { height: var(--iwsk-h, 100vh); }

/* ── 문구 ── */
.iwsk-s5tx { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 18px;
  color: #fff; max-width: min(1100px, 86%); pointer-events: none; }
.iwsk-s5tx > * { pointer-events: auto; }
.iwsk-s5label { margin: 0; font-size: clamp(14px, 1.2vw, 18px); font-weight: 600;
  letter-spacing: .01em; color: rgba(255,255,255,.92); text-shadow: 0 2px 14px rgba(0,0,0,.3); }
.iwsk-s5title { margin: 0; font-size: clamp(26px, 3.6vw, 56px); line-height: 1.28;
  letter-spacing: -.03em; word-break: keep-all; text-shadow: 0 2px 22px rgba(0,0,0,.34); color: #fff; }
.iwsk-s5btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.iwsk-s5btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px;
  border-radius: 40px; text-decoration: none; font-size: clamp(14px, 1.1vw, 16px); font-weight: 700;
  color: #fff; border: 1px solid rgba(255,255,255,.8); background: transparent; transition: .18s; }
.iwsk-s5btn.line:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.iwsk-s5btn.fill { border-color: transparent; }
.iwsk-s5btn.fill:hover { filter: brightness(1.12); }
.iwsk-s5arr { display: inline-block; transition: transform .18s; }
.iwsk-s5btn:hover .iwsk-s5arr { transform: translateX(4px); }

/* 문구 위치 4방향 */
.iwsk-al-cc .iwsk-s5tx { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; align-items: center; }
.iwsk-al-cl .iwsk-s5tx { left: 6%; top: 50%; transform: translateY(-50%); text-align: left; align-items: flex-start; }
.iwsk-al-bl .iwsk-s5tx { left: 6%; bottom: 14%; text-align: left; align-items: flex-start; }
.iwsk-al-br .iwsk-s5tx { right: 6%; bottom: 14%; text-align: right; align-items: flex-end; }

/* ── 우측 세로 인디케이터 ── */
.iwsk-s5side { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.iwsk-s5side.is-dots .iwsk-dot { background: rgba(255,255,255,.45); }
.iwsk-s5side.is-dots .iwsk-dot.is-on { background: #fff; width: 9px; height: 22px; border-radius: 6px; }
.iwsk-num { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer;
  padding: 0; color: rgba(255,255,255,.55); font-size: 12px; font-weight: 700; font-family: inherit;
  font-variant-numeric: tabular-nums; }
.iwsk-num-l { width: 18px; height: 1px; background: currentColor; transition: width .2s; }
.iwsk-num.is-on { color: #fff; }
.iwsk-num.is-on .iwsk-num-l { width: 34px; height: 2px; }

/* ── 하단 중앙 점 ── */
.iwsk-s5bottom { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 6;
  display: flex; align-items: center; justify-content: center; gap: 12px; }

/* ── 좌하단 카운터 ── */
.iwsk-s5count { position: absolute; left: 6%; bottom: 7%; z-index: 6; display: flex; align-items: center;
  gap: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.iwsk-s5count .iwsk-cur { font-size: 22px; font-weight: 800; }
.iwsk-s5bar { width: 34px; height: 1px; background: rgba(255,255,255,.6); }
.iwsk-s5tot { font-size: 14px; opacity: .7; }
.iwsk-s5pausewrap { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 6;
  display: flex; justify-content: center; }

/* ── 우측 하단 컬러 퀵바 ── */
.iwsk-s5qb { position: absolute; right: 0; bottom: 8%; z-index: 7; display: flex; flex-direction: column; }
.iwsk-s5q { display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 132px; min-height: 62px; padding: 12px 18px; color: #fff; text-decoration: none;
  font-size: 13.5px; font-weight: 700; line-height: 1.35; text-align: center; transition: .16s; }
.iwsk-s5q:first-child { border-top-left-radius: 10px; }
.iwsk-s5q:last-child { border-bottom-left-radius: 10px; }
.iwsk-s5q:hover { filter: brightness(1.12); padding-right: 26px; }
.iwsk-s5q-i { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.iwsk-s5q.is-vert { writing-mode: vertical-rl; text-orientation: mixed; min-height: 118px; min-width: 56px; }
.iwsk-s5q.is-vert:hover { padding-right: 18px; }

/* ── 반응형 ── */
@media (max-width: 1200px) {
  .iwsk-s5qb { bottom: 6%; }
  .iwsk-s5q { min-width: 112px; min-height: 56px; font-size: 12.5px; padding: 10px 14px; }
}
@media (max-width: 980px) {
  .iwsk-s5 .iwsk-stage { height: var(--iwsk-h, 100vh); max-height: 100vh; }
  .iwsk-s5side { right: 4%; }
  .iwsk-num-l { width: 12px; }
  .iwsk-num.is-on .iwsk-num-l { width: 22px; }
  /* 퀵바는 세로 스택이 화면을 가리므로 하단 가로 줄로 전환 */
  .iwsk-s5qb { left: 0; right: 0; bottom: 0; flex-direction: row; }
  .iwsk-s5q { flex: 1; min-width: 0; min-height: 54px; border-radius: 0 !important; }
  .iwsk-s5q.is-vert { writing-mode: horizontal-tb; min-height: 54px; }
  .iwsk-s5q:hover { padding-right: 18px; }
  .iwsk-s5count { bottom: 12%; }
  .iwsk-s5bottom { bottom: 70px; }
}
@media (max-width: 560px) {
  .iwsk-s5tx { max-width: 88%; gap: 13px; }
  .iwsk-s5btn { padding: 13px 24px; }
  .iwsk-s5side { display: none; }
  .iwsk-s5count { left: 5%; }
  .iwsk-s5q { font-size: 11.5px; padding: 9px 8px; }
  .iwsk-s5q-i { width: 18px; height: 18px; }
}

/* ============================================================
   스타일2 — 라운드 배너 + 문구
   참고: 우리은행(문구 중앙 · 전폭) · POSWEL(문구 우측 · 좌우 여백)
   ============================================================ */
.iwsk-s2 { position: relative; }
.iwsk-s2wrap { width: 100%; }
/* 좌우 여백 사용 시에만 컨테이너로 감싼다 — 끄면 전폭으로 붙는다 */
.iwsk-s2.has-side .iwsk-s2wrap { max-width: var(--iwsk-w, 1800px); margin: 0 auto; padding: 0 30px; }
.iwsk-s2 .iwsk-stage { height: var(--iwsk-h, 620px); border-radius: var(--iwsk-round, 30px); }

/* ── 문구 : 윗줄 얇게 + 아랫줄 굵게 ── */
.iwsk-s2tx { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 6px;
  color: #fff; max-width: min(1000px, 84%); }
.iwsk-s2line1 { margin: 0; font-size: clamp(17px, 1.9vw, 30px); line-height: 1.3;
  letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.32); }
.iwsk-s2line2 { margin: 0; font-size: clamp(28px, 4vw, 60px); line-height: 1.2;
  letter-spacing: -.03em; word-break: keep-all; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.36); }
.iwsk-s2btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.iwsk-s2btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 30px;
  border-radius: 40px; color: #fff; text-decoration: none;
  font-size: clamp(14px, 1.05vw, 16px); font-weight: 700; transition: .18s; }
.iwsk-s2btn:hover { filter: brightness(1.12); }
.iwsk-s2arr { display: inline-block; transition: transform .18s; }
.iwsk-s2btn:hover .iwsk-s2arr { transform: translateX(4px); }

/* 문구 위치 3방향 */
.iwsk-s2.iwsk-al-cc .iwsk-s2tx { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; align-items: center; }
.iwsk-s2.iwsk-al-cl .iwsk-s2tx { left: 7%; top: 50%; transform: translateY(-50%); text-align: left; align-items: flex-start; }
.iwsk-s2.iwsk-al-cr .iwsk-s2tx { right: 7%; top: 50%; transform: translateY(-50%); text-align: right; align-items: flex-end; }

/* ── 인디케이터 ── */
.iwsk-s2side { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.iwsk-s2side .iwsk-dot { background: rgba(255,255,255,.5); }
.iwsk-s2side .iwsk-dot.is-on { background: #fff; width: 9px; height: 22px; border-radius: 6px; }
.iwsk-s2bottom { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 6;
  display: flex; align-items: center; justify-content: center; gap: 12px; }
.iwsk-s2bottom.only-pause { justify-content: flex-end; right: 26px; left: auto; }

/* ── 반응형 ── */
@media (max-width: 1200px) {
  .iwsk-s2.has-side .iwsk-s2wrap { padding: 0 20px; }
  .iwsk-s2 .iwsk-stage { height: min(var(--iwsk-h, 620px), 58vw); }
}
@media (max-width: 768px) {
  /* 좁은 화면에서 큰 라운드는 이미지를 너무 깎아낸다 */
  .iwsk-s2 .iwsk-stage { border-radius: min(var(--iwsk-round, 30px), 18px); height: min(var(--iwsk-h, 620px), 78vw); }
  .iwsk-s2.has-side .iwsk-s2wrap { padding: 0 14px; }
  .iwsk-s2tx { max-width: 88%; }
  .iwsk-s2.iwsk-al-cr .iwsk-s2tx { right: 6%; }
  .iwsk-s2.iwsk-al-cl .iwsk-s2tx { left: 6%; }
  .iwsk-s2side { right: 14px; }
}
@media (max-width: 560px) {
  .iwsk-s2btn { padding: 13px 22px; }
  .iwsk-s2btns { margin-top: 16px; }
}

/* ============================================================
   공용 위젯 — 아이콘 바로가기(위) + 공지·숏코드(아래)
   스타일3 우측 카드 2개 · 스타일4 우측 패널이 같은 구조를 공유한다.
   ============================================================ */
.iwsk-wg { display: flex; flex-direction: column; gap: 16px; height: 100%; min-width: 0; }
/* 배경색은 인라인으로 주입된다(관리자 옵션). 여기 값은 옵션이 비었을 때의 폴백. */
.iwsk-wg-a { flex: 0 0 auto; background: #fff; border: 1px solid #e8ebee; border-radius: 20px;
  padding: 26px 24px; text-align: center; }
.iwsk-wg-sub { margin: 0 0 4px; font-size: 14px; color: #6b7580; }
.iwsk-wg-title { margin: 0 0 20px; font-size: clamp(17px, 1.5vw, 22px); font-weight: 800;
  color: var(--ink); letter-spacing: -.02em; word-break: keep-all; }
.iwsk-wg-icons { display: grid; grid-template-columns: repeat(var(--iwsk-wgc, 3), minmax(0, 1fr)); gap: 14px; }
.iwsk-wg-i { display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; transition: transform .16s; }
.iwsk-wg-i:hover { transform: translateY(-2px); }
.iwsk-wg-i-ic { display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; color: #fff; margin-bottom: 4px; }
.iwsk-wg-i-ic img { width: 26px; height: 26px; object-fit: contain; }
.iwsk-wg-i-ic b { font-size: 20px; font-weight: 800; }
.iwsk-wg-i-t { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.iwsk-wg-i-s { font-size: 12.5px; color: #8a949e; }
/* 아래 칸 */
.iwsk-wg-b { flex: 1 1 auto; border-radius: 20px; padding: 22px 24px; min-height: 0;
  display: flex; flex-direction: column; }
.iwsk-wg-b-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.iwsk-wg-b-t { display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: var(--iwsk-wgbt, 16px); font-weight: 800; color: var(--ink); }
.iwsk-wg-b-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--ac); color: #fff; }
.iwsk-wg-b-ic svg { width: 18px; height: 18px; }
/* 제목이 커지면 종 아이콘도 같이 커져야 균형이 맞는다 */
.iwsk-wg-b-ic { width: calc(var(--iwsk-wgbt, 16px) * 2.1); height: calc(var(--iwsk-wgbt, 16px) * 2.1); }
.iwsk-wg-b-ic svg { width: calc(var(--iwsk-wgbt, 16px) * 1.12); height: calc(var(--iwsk-wgbt, 16px) * 1.12); }
.iwsk-wg-b-more { font-size: 13px; color: #6b7580; text-decoration: none; white-space: nowrap; }
.iwsk-wg-b-more:hover { color: var(--ac); }
.iwsk-wg-b-body { flex: 1 1 auto; min-height: 0; font-size: 14.5px; line-height: 1.7; color: #4c565e; }
.iwsk-wg-b-body ul { margin: 0; padding-left: 18px; }
.iwsk-wg-empty { font-size: 13px; color: #8a949e; margin: 0; }

/* ============================================================
   스타일3 — 좌 컬러배너 + 우 위젯
   ============================================================ */
.iwsk-s3 .iwsk-in { max-width: var(--iwsk-w, 1800px); margin: 0 auto; padding: 0 30px; }
.iwsk-s3in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 20px; align-items: stretch; }
.iwsk-s3stage { height: var(--iwsk-h, 620px); border-radius: var(--iwsk-round, 20px); }
/* 배경색 끄기 — .iwsk-stage 의 기본 회색(#e9edf1)까지 지운다 (v1.34.0) */
.iwsk-s3.no-bg .iwsk-s3stage { background: transparent !important; }
/* 컬러 카드 위 그림 — 채우기 방식을 옵션으로 고른다
   is-cover   : 사진처럼 배너를 꽉 채움 (배경색은 가려진다)
   is-contain : 일러스트처럼 잘리지 않게 우측 하단에 얹음 (배경색이 보인다) */
.iwsk-s3art { position: absolute; background-repeat: no-repeat; }
.iwsk-s3art.is-cover { inset: 0; width: auto; height: auto;
  background-position: center; background-size: cover; }
/* 우측 그림 — 배너 높이를 꽉 채운다.
   예전에는 height:84% 라 위아래에 여백이 남아, 좌측 글자와 높이가 어긋나 어색했다.
   background-size: auto 100% 로 세로를 먼저 채우고 폭은 비율대로 따라가며,
   우측 정렬이라 넘치는 부분은 좌측(글자 자리 쪽)에서 잘린다 —
   폭 비율(--iwsk-artw)로 어디까지 올지 조절한다. */
.iwsk-s3art.is-contain { right: 0; top: 0; bottom: 0; width: var(--iwsk-artw, 58%); height: auto;
  background-position: right center; background-size: auto 100%; }
.iwsk-s3tx { position: absolute; left: 8%; top: 50%; transform: translateY(-50%);
  z-index: 4; max-width: 52%; display: flex; flex-direction: column; }
.iwsk-s3badge { align-self: flex-start; background: rgba(255,255,255,.9); color: #2b333d;
  font-size: 12.5px; font-weight: 800; border-radius: 6px; padding: 6px 12px; margin-bottom: 14px; }
/* 부제 색 — 참고 스샷(주황 배너)의 갈색을 그대로 옮겼더니, 배경색을 바꾸면
   글자가 배경에 묻혔다. 배경색은 옵션이므로 흰색이 안전하다.
   살짝 투명도를 줘서 제목과 위계가 생긴다. */
.iwsk-s3sub { margin: 0 0 4px; font-size: clamp(20px, 2.2vw, 34px); color: rgba(255,255,255,.92);
  line-height: 1.25; letter-spacing: -.02em; }
/* 밑줄은 참고 스샷(CMS)의 장식이었다. 기본에서는 뺀다 — 옵션으로 켤 수 있다. */
.iwsk-s3title { margin: 0; font-size: clamp(26px, 3.2vw, 46px); line-height: 1.22;
  letter-spacing: -.03em; color: #fff; word-break: keep-all; }
.iwsk-s3.has-underline .iwsk-s3title {
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.iwsk-s3list { margin-top: 34px; }
.iwsk-s3list-t { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); }
.iwsk-s3list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.iwsk-s3list li { font-size: 15.5px; color: #fff; }
.iwsk-s3btns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 24px; }
.iwsk-s3btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px;
  border-radius: 30px; color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 700; }
.iwsk-s3btn:hover { filter: brightness(1.1); }
.iwsk-s3nav { position: absolute; left: 8%; bottom: 26px; z-index: 5;
  display: flex; align-items: center; gap: 12px; }
.iwsk-s3nav .iwsk-dot { background: rgba(255,255,255,.55); }
.iwsk-s3nav .iwsk-dot.is-on { background: #fff; }
.iwsk-s3hint { position: absolute; left: 8%; bottom: 26px; z-index: 3;
  font-size: 12.5px; color: rgba(255,255,255,.85); }
.iwsk-s3side { min-width: 0; }

/* 문구 뒤 어두운 그라데이션 — 기본 꺼짐 (v1.15.4)
   밝은 사진 위 흰 글자를 위해 넣었지만, 문구가 짧으면 border-radius 때문에
   원형 얼룩처럼 보였다. 필요한 경우에만 옵션으로 켠다.
   켰을 때도 좌측 끝까지 직선으로 깔아 얼룩지지 않게 했다 — 둥근 모서리와
   음수 inset 조합이 얼룩의 원인이었다. */
.iwsk-s3.has-scrim .iwsk-s3tx::before {
  content: ''; position: absolute; left: -100vw; right: -10%; top: -40%; bottom: -40%;
  background: linear-gradient(100deg, rgba(10,14,20,.55) 0%, rgba(10,14,20,.38) 60%, rgba(10,14,20,0) 100%);
  z-index: -1; pointer-events: none;
}
.iwsk-s3tx { z-index: 4; isolation: isolate; }
/* 모바일에서는 문구가 이미지 아래로 내려가므로 필요없다 */
@media (max-width: 768px) {
  .iwsk-s3.has-scrim .iwsk-s3tx::before { display: none; }
}

/* ============================================================
   스타일4 — 검색 + 카드 4개 + 우측 패널 + 하단 링크
   ============================================================ */
.iwsk-s4 .iwsk-in { max-width: var(--iwsk-w, 1800px); margin: 0 auto; padding: 22px 30px 40px; }
.iwsk-s4top { display: flex; align-items: flex-start; justify-content: flex-end; gap: 18px; flex-wrap: wrap; }
.iwsk-s4tel { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.iwsk-s4tel-l { font-size: 13px; font-weight: 700; color: #6b7580; }
.iwsk-s4tel a { color: #c0392b; text-decoration: none; }
.iwsk-s4hours { list-style: none; margin: 0; padding: 0; font-size: 12px; color: #8a949e; line-height: 1.55; }
.iwsk-s4head { text-align: center; margin: 26px 0 34px; }
.iwsk-s4title { margin: 0 0 22px; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.3;
  letter-spacing: -.03em; color: var(--ink); word-break: keep-all; }
.iwsk-s4form { display: flex; align-items: center; max-width: 620px; margin: 0 auto;
  border: 2px solid color-mix(in srgb, var(--ac) 55%, #e8ebee); border-radius: 40px;
  background: #fff; overflow: hidden; }
.iwsk-s4input { flex: 1; min-width: 0; height: 54px; border: none; outline: none;
  padding: 0 22px; font-size: 15.5px; font-family: inherit; color: var(--ink); background: none; }
.iwsk-s4input::placeholder { color: #9aa3ac; }
.iwsk-s4btn { flex: 0 0 auto; width: 58px; height: 54px; border: none; background: none;
  cursor: pointer; color: var(--ac); display: flex; align-items: center; justify-content: center; }
.iwsk-s4btn svg { width: 22px; height: 22px; }
/* 좌우 비율은 --iwsk-s4sw (%) 로 주입된다. 기본 30% = 카드:패널 7:3 */
.iwsk-s4body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--iwsk-s4sw, 30%)); gap: 20px; align-items: stretch; }
.iwsk-s4cards { display: grid; grid-template-columns: repeat(var(--iwsk-s4n, 4), minmax(0, 1fr)); gap: 16px; }
.iwsk-s4card { position: relative; overflow: hidden; border-radius: 20px; min-height: var(--iwsk-s4rh, 300px);
  padding: 26px 22px; text-decoration: none; display: flex; flex-direction: column;
  justify-content: space-between; transition: transform .2s, box-shadow .2s; }
.iwsk-s4card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20,26,31,.12); }
/* 호버 이미지 — 있으면 크로스페이드로 덮는다 */
/* 기본(아웃) 이미지 — 배경색 위에 깔린다. v1.18.0 */
.iwsk-s4card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
/* 사진 위에서는 어두운 글자가 안 읽히므로 아래쪽에 그늘을 깐다 */
.iwsk-s4card.has-img::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.62) 100%); }
.iwsk-s4card.has-img .iwsk-s4card-t,
.iwsk-s4card.has-img .iwsk-s4card-s,
.iwsk-s4card.has-img .iwsk-s4card-go { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.iwsk-s4card-hv { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity .32s ease; }
.iwsk-s4card.has-hover:hover .iwsk-s4card-hv { opacity: 1; }
.iwsk-s4card-hv { z-index: 1; }
/* 기본 이미지가 있으면 그늘이 호버 사진까지 덮어야 글자가 계속 읽힌다 */
.iwsk-s4card.has-img::after { z-index: 1; }
.iwsk-s4card-in, .iwsk-s4card-go { position: relative; z-index: 2; }
.iwsk-s4card-in { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin-top: auto; }
.iwsk-s4card-ic { display: block; margin-bottom: 8px; }
.iwsk-s4card-ic img { width: 62px; height: 62px; object-fit: contain; }
.iwsk-s4card-t { font-size: clamp(16px, 1.4vw, 20px); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.iwsk-s4card-s { font-size: 13px; color: #6b7580; }
.iwsk-s4card-go { margin-top: auto; align-self: stretch; display: flex; align-items: center;
  justify-content: center; gap: 10px; background: rgba(255,255,255,.82); border-radius: 30px;
  padding: 11px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.iwsk-s4card-arr { transition: transform .18s; }
.iwsk-s4card:hover .iwsk-s4card-arr { transform: translateX(4px); }
.iwsk-s4card.has-hover:hover .iwsk-s4card-t,
.iwsk-s4card.has-hover:hover .iwsk-s4card-s { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.iwsk-s4side { min-width: 0; }
/* 하단 가로 링크 */
.iwsk-s4links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.iwsk-s4links > * { flex: 1 1 180px; }
.iwsk-s4link { display: flex; align-items: center; gap: 10px; padding: 15px 18px;
  border: 1px solid #e8ebee; border-radius: 14px; background: #fff;
  text-decoration: none; color: var(--ink); font-size: 14.5px; font-weight: 600; transition: .16s; }
.iwsk-s4link:hover { border-color: color-mix(in srgb, var(--ac) 45%, #e8ebee); background: #fafbfc; }
.iwsk-s4link-i { flex: 0 0 auto; display: inline-flex; width: 34px; height: 34px;
  align-items: center; justify-content: center; border-radius: 50%; background: #f1f4f7; }
.iwsk-s4link-i img { width: 18px; height: 18px; object-fit: contain; }
.iwsk-s4link-t { flex: 1; min-width: 0; }
.iwsk-s4link-arr { color: #b9c0c8; }

/* ============================================================
   반응형 — 스타일3 · 4 · 공용 위젯
   ============================================================ */
@media (max-width: 1400px) {
  .iwsk-s3in { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .iwsk-s4body { grid-template-columns: minmax(0, 1fr) minmax(0, var(--iwsk-s4sw, 30%)); }
  .iwsk-s4cards { gap: 12px; }
  .iwsk-s4card { min-height: min(var(--iwsk-s4rh, 300px), 260px); padding: 22px 16px; }
}
@media (max-width: 1100px) {
  /* 우측 패널을 아래로 내린다 — 더 좁아지면 위젯이 읽히지 않는다 */
  .iwsk-s3in, .iwsk-s4body { grid-template-columns: 1fr; }
  .iwsk-s3stage { height: min(var(--iwsk-h, 620px), 62vw); }
  .iwsk-s3tx { max-width: 62%; }
  .iwsk-s4cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .iwsk-s3 .iwsk-in, .iwsk-s4 .iwsk-in { padding-left: 16px; padding-right: 16px; }
  /* v1.33.0 수정 — 예전에는 min-height:460px 로 상자를 고정해 놓고
     그림은 위 46% 만 덮게 해서, 문구가 짧으면 아래에 배경색만 남는 빈 덩어리가 생겼다.
     상자는 문구 높이를 따라가게 하고, 채우기 방식별로 그림을 다르게 깐다. */
  .iwsk-s3stage { border-radius: min(var(--iwsk-round, 20px), 14px); height: auto; min-height: 260px; }
  /* 전체 채움 : 사진을 배경으로 전부 깔고 그 위에 문구.
     불투명도를 낮춰 배경색과 섞이게 해야 흰 글자가 읽힌다. */
  .iwsk-s3art.is-cover {
    inset: 0; width: 100%; height: 100%;
    background-position: center; background-size: cover; opacity: .45; }
  /* 배경색을 끈 경우엔 섞을 색이 없으므로 사진을 원본 그대로 (v1.34.0) */
  .iwsk-s3.no-bg .iwsk-s3art.is-cover { opacity: 1; }
  /* 비율 맞춤 (v1.35.0) — PC 배너는 가로로 길고 모바일 상자는 세로로 길어서
     cover 로 채우면 좌우가 잘린다. 글자가 박힌 배너는 그 글자가 잘려나간다.
     PHP 가 이미지 실제 비율(--iwsk-s3ar)을 읽어 넘겨주면
     ::before 가 그 비율만큼 자리를 차지해 배너 높이를 만들고,
     그림은 같은 비율의 띠로 얹혀 한 픽셀도 잘리지 않는다.
     ::before 는 흐름 안에 있으므로 문구는 자연히 그 아래에서 시작한다. */
  .iwsk-s3.fitmo-auto .iwsk-s3stage { min-height: 0; }
  .iwsk-s3.fitmo-auto .iwsk-s3stage::before {
    content: ''; display: block; padding-top: calc(100% / var(--iwsk-s3ar, 2.4)); }
  .iwsk-s3.fitmo-auto .iwsk-s3art.is-cover {
    inset: 0 0 auto 0; width: 100%; height: auto;
    aspect-ratio: var(--iwsk-s3ar, 2.4);
    background-position: center; background-size: contain; opacity: 1; }
  /* 문구가 통째로 비었을 때(글자가 이미지 안에 있는 배너) 패딩만 남아 빈 칸이 생긴다 */
  .iwsk-s3.fitmo-auto.tx-empty .iwsk-s3tx { display: none; }
  /* 우측 그림(일러스트) : 위쪽 띠로 두고 문구는 그 아래에서 시작한다.
     띠 높이가 고정이라 문구 padding-top 과 정확히 맞출 수 있다. */
  .iwsk-s3art.is-contain {
    inset: 0 0 auto 0; width: 100%; height: 190px;
    background-position: center; background-size: contain; opacity: 1; }
  .iwsk-s3tx { position: static; transform: none; max-width: 100%; padding: 30px 24px 46px; }
  .iwsk-s3.has-contain .iwsk-s3tx { padding-top: 206px; }
  .iwsk-s3nav, .iwsk-s3hint { left: 24px; }
  .iwsk-s4card { min-height: min(var(--iwsk-s4rh, 300px), 220px); }
  .iwsk-wg-a, .iwsk-wg-b { border-radius: 16px; padding: 20px 18px; }
  .iwsk-s4head { margin: 20px 0 26px; }
  .iwsk-s4top { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .iwsk-s4cards { grid-template-columns: 1fr; }
  .iwsk-wg-icons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .iwsk-s4links > * { flex: 1 1 100%; }
  .iwsk-s3list { margin-top: 22px; }
}

/* ============================================================
   포털형 우측 영역 — v1.17.0
   스타일3 의 "우측 영역 종류 = 포털형" 일 때만 쓰인다.
   검색줄 + 강조타일 5칸 + 아이콘 타일(wg_i1~8 재사용).
   좌측 배너와 높이를 맞춰야 하므로 세로 flex 로 남는 높이를 나눠 갖는다.
   ============================================================ */
.iwsk-pt { display: flex; flex-direction: column; gap: 14px; height: 100%; min-width: 0; }

/* 검색줄 */
.iwsk-pt-search { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid #d7dde5; border-radius: 12px; padding: 12px 16px; }
.iwsk-pt-search input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; outline: 0;
  background: transparent; font-size: 16px; color: var(--ink); font-family: inherit; }
.iwsk-pt-search input[type="search"]::placeholder { color: #9aa4ae; }
.iwsk-pt-search button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--ink); }
.iwsk-pt-search button svg { width: 26px; height: 26px; }

/* 강조타일 — 5칸을 다 채우면 1번이 2행짜리 큰 칸이 된다 */
.iwsk-pt-feat { flex: 1.1 1 auto; min-height: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.iwsk-pt-feat.has-big { grid-template-rows: 1fr 1fr; }
.iwsk-pt-f { position: relative; display: flex; flex-direction: column; gap: 4px;
  border-radius: 10px; padding: 18px 18px 16px; text-decoration: none; overflow: hidden;
  min-height: 74px; transition: filter .16s, transform .16s; }
.iwsk-pt-f:hover { filter: brightness(1.07); transform: translateY(-2px); }
.iwsk-pt-f.is-big { grid-row: span 2; }
.iwsk-pt-f-t { font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em;
  word-break: keep-all; color: inherit; }
.iwsk-pt-f-s { font-size: 13px; opacity: .85; color: inherit; }
.iwsk-pt-f.is-big .iwsk-pt-f-t { font-size: 19px; }
/* 화살표 — 큰 칸은 글자 아래 동그라미, 작은 칸은 우측 하단 꺾쇠 */
.iwsk-pt-f-go { position: absolute; right: 14px; bottom: 12px; display: inline-flex;
  align-items: center; justify-content: center; color: inherit; opacity: .8; }
.iwsk-pt-f-go svg { width: 18px; height: 18px; }
.iwsk-pt-f.is-big .iwsk-pt-f-go { position: static; margin-top: 12px; width: 26px; height: 26px;
  border: 1.6px solid currentColor; border-radius: 50%; opacity: .95; }
.iwsk-pt-f.is-big .iwsk-pt-f-go svg { width: 14px; height: 14px; }
/* 장식 아이콘 — 우측 하단에 크게, 살짝 투명하게 */
.iwsk-pt-f-ic { position: absolute; right: 12px; bottom: 10px; color: inherit; opacity: .42;
  pointer-events: none; }
.iwsk-pt-f-ic svg { width: 40px; height: 40px; }
.iwsk-pt-f.is-big .iwsk-pt-f-ic { right: 16px; bottom: 16px; opacity: .5; }
.iwsk-pt-f.is-big .iwsk-pt-f-ic svg { width: 62px; height: 62px; }
.iwsk-pt-f:not(.is-big) .iwsk-pt-f-ic + .iwsk-pt-f-go { right: 14px; }

/* 아이콘 타일 — 아이콘 왼쪽, 글자 오른쪽 */
.iwsk-pt-tiles { flex: 1 1 auto; min-height: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.iwsk-pt-i { display: flex; align-items: center; gap: 11px; border-radius: 10px;
  padding: 14px 14px; text-decoration: none; min-height: 66px;
  transition: filter .16s, transform .16s; }
.iwsk-pt-i:hover { filter: brightness(1.07); transform: translateY(-2px); }
.iwsk-pt-i-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; color: inherit; }
.iwsk-pt-i-ic svg { width: 28px; height: 28px; }
.iwsk-pt-i-ic b { font-size: 19px; font-weight: 800; }
.iwsk-pt-i-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iwsk-pt-i-t { font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em;
  word-break: keep-all; color: inherit; }
.iwsk-pt-i-s { font-size: 12.5px; opacity: .85; color: inherit; }

/* 타일 안쪽 여백·글자 — 참고 스샷에 맞춰 조금 키운다 (v1.23.0)
   원본 규칙 뒤에 두어 덮어쓴다(원본은 그대로 남겨 되돌리기 쉽게). */
.iwsk-pt-i { padding: 15px 16px; gap: 8px; min-height: 68px; }
/* 박스를 SVG 와 같은 크기로 — 박스에 남던 좌우 2px 씩이 아이콘~글자 간격을 벌리고 있었다 (v1.30.0)
   크기는 --iwsk-pticon 으로 조절한다. 값이 없으면 배치별 기본값. (v1.31.0) */
.iwsk-pt-i-ic { width: var(--iwsk-pticon, 30px); height: var(--iwsk-pticon, 30px); }
.iwsk-pt-i-ic svg { width: 100%; height: 100%; }
.iwsk-pt-i-ic b { font-size: calc(var(--iwsk-pticon, 30px) * .62); }
.iwsk-pt-i-t { font-size: 15px; }

/* 타일 안 배치 — v1.27.0
   .iwsk-pt-i 에 justify-content 가 없어서 세로만 가운데, 가로는 왼쪽 붙임이었다.
   글자 길이가 제각각이면 묶음 폭이 달라져 "가운데가 아닌" 느낌이 난다. */
.iwsk-pt-tiles.is-center .iwsk-pt-i { justify-content: center; padding-left: 10px; padding-right: 10px; }
.iwsk-pt-tiles.is-center .iwsk-pt-i-tx { text-align: left; }
/* 시각 보정 (v1.30.0)
   flex 는 아이콘 "박스"를 기준으로 가운데를 맞추는데, SVG 안쪽에 빈 여백이 있어서
   실제 그림은 박스보다 안쪽에서 시작한다. 그만큼 묶음이 오른쪽으로 밀려 보인다.
   스샷 실측 결과 좌우 여백 차가 4~8px 이었으므로 아이콘을 그 절반만큼 왼쪽으로 당긴다. */
.iwsk-pt-tiles.is-center .iwsk-pt-i-ic { margin-left: -3px; }

/* 6글자짜리(자원봉사신청 등)는 3열 격자에서 폭이 모자라 넘친다.
   가운데 배치일 때만 글자를 아주 살짝 좁혀 한 줄에 들어가게 한다. */
.iwsk-pt-tiles.is-center .iwsk-pt-i-t { letter-spacing: -.045em; }

/* 세로쌓기 — 타일이 세로로 길 때 가장 안정적으로 보인다 */
.iwsk-pt-tiles.is-stack .iwsk-pt-i {
  flex-direction: column; justify-content: center; align-items: center;
  gap: 7px; text-align: center; padding: 16px 10px;
}
.iwsk-pt-tiles.is-stack .iwsk-pt-i-tx { align-items: center; text-align: center; }
/* 세로쌓기는 글자 옆이 아니라 위에 놓이므로 아이콘을 크게 써도 폭이 안 밀린다 (v1.31.0) */
.iwsk-pt-tiles.is-stack .iwsk-pt-i-ic { width: var(--iwsk-pticon, 46px); height: var(--iwsk-pticon, 46px); }
.iwsk-pt-tiles.is-stack .iwsk-pt-i-ic svg { width: 100%; height: 100%; }
.iwsk-pt-tiles.is-stack .iwsk-pt-i-ic b { font-size: calc(var(--iwsk-pticon, 46px) * .62); }
/* 아이콘이 커진 만큼 세로 여유를 준다 */
.iwsk-pt-tiles.is-stack .iwsk-pt-i { min-height: 96px; }
.iwsk-pt-tiles.is-stack .iwsk-pt-i-t { font-size: 15px; line-height: 1.25; }

/* 왼쪽 — 지금까지의 모습 (규칙 없이 flex 기본값) */

/* 아래 칸(공지) — v1.23.0
   검색줄은 제 높이를 쓰고, 남은 높이를 위(타일) : 아래(공지) 로 나눈다.
   비율은 --iwsk-ptsplit / --iwsk-ptbot (합 100) 으로 주입된다. */
.iwsk-pt.has-bot > .iwsk-pt-top { flex: var(--iwsk-ptsplit, 60) 1 0; min-height: 0;
  display: flex; flex-direction: column; gap: 14px; }
.iwsk-pt.has-bot > .iwsk-pt-bot { flex: var(--iwsk-ptbot, 40) 1 0; min-height: 0; display: flex; }
.iwsk-pt.has-bot > .iwsk-pt-bot > .iwsk-wg-b { flex: 1 1 auto; min-height: 0;
  border-radius: 12px; padding: 18px 20px; }
.iwsk-pt.has-bot .iwsk-wg-b-body { overflow: auto; }

@media (max-width: 1100px) {
  /* 우측이 배너 아래로 내려오면 높이를 늘려 잡을 이유가 없다 */
  .iwsk-pt-feat, .iwsk-pt-tiles { grid-auto-rows: auto; }
  /* 비율로 나눌 높이 자체가 없어지므로 각자 제 높이를 쓴다 */
  .iwsk-pt.has-bot > .iwsk-pt-top,
  .iwsk-pt.has-bot > .iwsk-pt-bot { flex: 0 0 auto; }
  .iwsk-pt.has-bot > .iwsk-pt-bot > .iwsk-wg-b { min-height: 180px; }
}
@media (max-width: 700px) {
  .iwsk-pt-feat, .iwsk-pt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iwsk-pt-feat.has-big { grid-template-rows: none; }
  .iwsk-pt-f.is-big { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 460px) {
  .iwsk-pt-feat, .iwsk-pt-tiles { grid-template-columns: 1fr; }
  .iwsk-pt-f.is-big { grid-column: auto; }
}

/* 모바일 아이콘 타일 열 수 — 개수에 맞춰 자동 (v1.42.0)
   규칙: 3 이하에서 나눠떨어지는 가장 큰 수를 열 수로 쓰고, 없으면 3열.
   1→1 / 2→2 / 3→3 / 4→2 / 5→3(3+2) / 6→3 / 7→3 / 8→2
   [data-n] 은 특이도 (0,2,0) 이라 위 700·460 블록의 (0,1,0) 규칙을 순서와 무관하게 이긴다.
   data-n 이 없는 예전 마크업이면 이 블록이 통째로 안 걸려 예전 동작 그대로. */
@media (max-width: 700px) {
  .iwsk-pt-tiles[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .iwsk-pt-tiles[data-n="2"],
  .iwsk-pt-tiles[data-n="4"],
  .iwsk-pt-tiles[data-n="8"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iwsk-pt-tiles[data-n="3"],
  .iwsk-pt-tiles[data-n="5"],
  .iwsk-pt-tiles[data-n="6"],
  .iwsk-pt-tiles[data-n="7"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 3열이 되는 개수는 좁은 화면에서 칸이 100px 안팎이므로 여백·글자를 줄인다.
   가로 배치(가운데/왼쪽)는 그 폭에 아이콘+글자가 못 들어가므로 여기서만 세로쌓기로 돌린다. */
@media (max-width: 520px) {
  .iwsk-pt-tiles[data-n="3"] .iwsk-pt-i,
  .iwsk-pt-tiles[data-n="5"] .iwsk-pt-i,
  .iwsk-pt-tiles[data-n="6"] .iwsk-pt-i,
  .iwsk-pt-tiles[data-n="7"] .iwsk-pt-i {
    flex-direction: column; justify-content: center; align-items: center;
    gap: 6px; text-align: center; padding: 14px 6px; min-height: 86px;
  }
  .iwsk-pt-tiles[data-n="3"] .iwsk-pt-i-tx,
  .iwsk-pt-tiles[data-n="5"] .iwsk-pt-i-tx,
  .iwsk-pt-tiles[data-n="6"] .iwsk-pt-i-tx,
  .iwsk-pt-tiles[data-n="7"] .iwsk-pt-i-tx { align-items: center; text-align: center; }
  .iwsk-pt-tiles[data-n="3"] .iwsk-pt-i-t,
  .iwsk-pt-tiles[data-n="5"] .iwsk-pt-i-t,
  .iwsk-pt-tiles[data-n="6"] .iwsk-pt-i-t,
  .iwsk-pt-tiles[data-n="7"] .iwsk-pt-i-t { font-size: 13px; letter-spacing: -.05em; line-height: 1.25; }
  .iwsk-pt-tiles[data-n="3"] .iwsk-pt-i-s,
  .iwsk-pt-tiles[data-n="5"] .iwsk-pt-i-s,
  .iwsk-pt-tiles[data-n="6"] .iwsk-pt-i-s,
  .iwsk-pt-tiles[data-n="7"] .iwsk-pt-i-s { font-size: 11.5px; }
  /* 아이콘은 지정값(--iwsk-pticon)이 있으면 그대로 두고, 자동일 때만 작게 */
  .iwsk-pt-tiles[data-n="3"] .iwsk-pt-i-ic,
  .iwsk-pt-tiles[data-n="5"] .iwsk-pt-i-ic,
  .iwsk-pt-tiles[data-n="6"] .iwsk-pt-i-ic,
  .iwsk-pt-tiles[data-n="7"] .iwsk-pt-i-ic {
    width: var(--iwsk-pticon, 34px); height: var(--iwsk-pticon, 34px); margin-left: 0;
  }
  .iwsk-pt-tiles[data-n="3"] .iwsk-pt-i-ic b,
  .iwsk-pt-tiles[data-n="5"] .iwsk-pt-i-ic b,
  .iwsk-pt-tiles[data-n="6"] .iwsk-pt-i-ic b,
  .iwsk-pt-tiles[data-n="7"] .iwsk-pt-i-ic b { font-size: calc(var(--iwsk-pticon, 34px) * .62); }
  .iwsk-pt-tiles { gap: 8px; }
}

/* ============================================================
   스타일4 우측 패널 — 배너형 (위 슬라이드 배너 + 아래 공지) v1.19.0
   비율은 --iwsk-sbtop / --iwsk-sbbot (합이 100) 으로 주입된다.
   ============================================================ */
.iwsk-s4side.is-banner { display: flex; }
.iwsk-s4sb { display: flex; flex-direction: column; gap: 16px; height: 100%; width: 100%; min-width: 0; }
.iwsk-s4sb-top { flex: var(--iwsk-sbtop, 50) 1 0; min-height: 0; position: relative;
  border-radius: var(--iwsk-sbround, 20px); overflow: hidden; background: #eef1f4; }
.iwsk-s4sb-bot { flex: var(--iwsk-sbbot, 50) 1 0; min-height: 0; display: flex; }
/* 배너 높이를 px 로 지정한 경우 — 비율 대신 고정, 나머지는 공지가 다 쓴다 */
.iwsk-s4sb.has-fixh .iwsk-s4sb-top { flex: 0 0 var(--iwsk-sbh, 260px); }
.iwsk-s4sb.has-fixh .iwsk-s4sb-bot { flex: 1 1 auto; }
.iwsk-s4sb-bot > .iwsk-wg-b { flex: 1 1 auto; min-height: 0; border-radius: var(--iwsk-sbround, 20px); }
/* 공지가 비어 아무것도 안 그려지면 배너가 아래까지 다 쓴다 */
.iwsk-s4sb-bot:empty { display: none; }

.iwsk-s4sb .iwsk-stage { position: absolute; inset: 0; }
.iwsk-s4sb .iwsk-slide { position: absolute; inset: 0; display: block; opacity: 0;
  transition: opacity .6s ease; text-decoration: none; }
.iwsk-s4sb .iwsk-slide.is-on { opacity: 1; }
.iwsk-s4sb .iwsk-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.iwsk-s4sb .iwsk-empty { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; padding: 20px; text-align: center; font-size: 13.5px; color: #8a949e; }

/* 컨트롤 — 배너 안 우측 하단 */
.iwsk-s4sb-ctrl { position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  background: rgba(16,20,26,.42); border-radius: 999px; padding: 6px 10px;
  backdrop-filter: blur(3px); }
.iwsk-s4sb-ctrl .iwsk-dots { display: flex; align-items: center; gap: 6px; }
.iwsk-s4sb-ctrl .iwsk-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.5); cursor: pointer; transition: background .16s, width .16s; }
.iwsk-s4sb-ctrl .iwsk-dot.is-on { background: #fff; width: 18px; border-radius: 999px; }
.iwsk-s4sb-ctrl .iwsk-pause { width: 18px; height: 18px; padding: 0; border: 0;
  background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 1100px) {
  /* 우측이 카드 아래로 내려오면 높이를 나눠 가질 이유가 없다 */
  .iwsk-s4sb-top { flex: 0 0 auto; height: var(--iwsk-sbh, 260px); }
  .iwsk-s4sb-bot { flex: 0 0 auto; }
}

/* ============================================================
   아이콘 — v1.15.0
   이미지 첨부 대신 아이콘 세트(빌더와 동일)를 쓴다.
   SVG 가 currentColor 를 쓰므로 color 로 아이콘 색을, background 로 배경색을 제어한다.
   ============================================================ */
.iwsk-ic-circle { border-radius: 50%; }
.iwsk-ic-square { border-radius: 12px; }
.iwsk-ic-none   { background: none !important; }
.iwsk-wg-i-ic svg, .iwsk-s4card-ic svg, .iwsk-s4link-i svg, .iwsk-s5q-i svg {
  width: 100%; height: 100%; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 자리마다 아이콘 크기가 다르다 — 배경 크기는 기존 규칙을 쓰고 그림만 비율로 맞춘다 */
.iwsk-wg-i-ic  { padding: 14px; }
.iwsk-s4card-ic { display: inline-flex; width: 66px; height: 66px; padding: 15px;
  align-items: center; justify-content: center; }
.iwsk-s4link-i { padding: 8px; color: var(--ac); }
.iwsk-s5q-i    { display: inline-flex; width: 22px; height: 22px; flex: 0 0 auto; }
/* 배경 없음일 때는 여백이 필요없다 */
.iwsk-ic-none.iwsk-wg-i-ic { padding: 0; }
.iwsk-ic-none.iwsk-s4card-ic { padding: 0; }
.iwsk-ic-none.iwsk-s4link-i { padding: 0; }

/* =========================================================
   검색 결과 모달 — v1.38.0
   iw-job-portal 의 jp-modal 을 iwsk- 로 옮겨 온 것.
   상자는 wp_footer 로 body 바로 아래 출력되므로
   조상 transform 때문에 fixed 가 어긋날 일이 없다.
   ========================================================= */
.iwsk-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;}
.iwsk-modal[hidden]{display:none;}
.iwsk-modal-dim{position:absolute;inset:0;background:rgba(20,35,55,.5);}
.iwsk-modal-box{
  position:relative;width:100%;max-width:680px;max-height:80vh;
  display:flex;flex-direction:column;
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(10,25,45,.28);
}
.iwsk-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;background:#1f6fd0;flex:none;
}
.iwsk-modal-head h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.03em;color:#fff;}
.iwsk-modal-x{
  width:32px;height:32px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.iwsk-modal-x:hover{background:rgba(255,255,255,.3);}
.iwsk-modal-body{flex:1;overflow-y:auto;padding:8px 0;-webkit-overflow-scrolling:touch;}
.iwsk-modal-count{margin:14px 22px 6px;font-size:14px;font-weight:600;color:#5a6b7f;}
.iwsk-modal-msg{margin:34px 22px;text-align:center;font-size:15px;color:#5a6b7f;}
.iwsk-modal-list{list-style:none;margin:0;padding:0;}
.iwsk-modal-list li{border-top:1px solid #eef2f7;}
.iwsk-modal-list a{
  display:block;padding:14px 22px;text-decoration:none;color:#16283d;
  transition:background .15s;
}
.iwsk-modal-list a:hover{background:#f4f8fd;}
.iwsk-modal-t{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em;}
.iwsk-modal-ex{
  display:block;margin-top:4px;font-size:13px;line-height:1.5;color:#6a7a8c;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.iwsk-modal-meta{display:block;margin-top:6px;}
.iwsk-modal-meta em{
  display:inline-block;margin-right:6px;font-style:normal;
  font-size:12px;color:#5a83b8;background:#eaf2fb;border-radius:4px;padding:2px 8px;
}
.iwsk-modal-meta em + em{color:#8494a6;background:#f1f4f8;}

/* 페이지 번호 */
.iwsk-pager{display:flex;justify-content:center;gap:4px;padding:16px 12px 20px;flex-wrap:wrap;}
.iwsk-pager button{
  min-width:32px;height:32px;padding:0 8px;cursor:pointer;
  border:1px solid #dde4ec;background:#fff;border-radius:7px;
  font-size:13px;color:#41546a;
}
.iwsk-pager button:hover:not(:disabled){background:#f2f7fd;border-color:#b9cde4;}
.iwsk-pager button.is-on{background:#1f6fd0;border-color:#1f6fd0;color:#fff;font-weight:700;}
.iwsk-pager button:disabled{opacity:.4;cursor:default;}
.iwsk-pager-gap{color:#9aa8b8;padding:0 2px;line-height:32px;}

@media (max-width:640px){
  .iwsk-modal{padding:12px;}
  .iwsk-modal-box{max-height:86vh;}
  .iwsk-modal-head{padding:14px 16px;}
  .iwsk-modal-list a{padding:13px 16px;}
  .iwsk-modal-count,.iwsk-modal-msg{margin-left:16px;margin-right:16px;}
}

/* ============================================================
   스타일3 배너 — PC · 태블릿 놓기 (v1.41.0)
   ------------------------------------------------------------
   증상: PC 와 모바일은 멀쩡한데 그 사이 폭(대략 768~1400px)에서만
        배너 이미지 좌우가 잘린다.
   원인: 배너 높이는 s3_h 로 고정인데 폭만 줄어들어 상자 비율이 계속 달라진다.
        is-cover 는 background-size:cover 라 남는 쪽을 잘라낸다.
        모바일(≤768px)은 v1.35.0 에서 ::before 비율 방식으로 이미 해결했고,
        넓은 화면은 우연히 이미지 비율과 비슷해서 티가 안 났던 것뿐이다.

   ★ 미디어쿼리로 min-width 를 쓰지 않는다 —
     min-width:769 / max-width:768 짝은 화면 배율 125% 처럼 소수점 폭에서
     빈 구간이 생긴다. 전역으로 두고 모바일 블록에서 되돌린다.
   ============================================================ */

/* ① 비율에 맞춤 — 배너 높이를 이미지 비율이 정한다. s3_h 는 최댓값이 된다.
      grid 의 align-items:stretch 가 높이를 강제하면 aspect-ratio 가 무시되므로
      이 모드에서만 start 로 바꾼다(우측 위젯이 더 길면 배너가 짧아진다). */
.iwsk-s3.fitpc-auto .iwsk-s3stage{
  height: auto;
  aspect-ratio: var(--iwsk-s3ar, 2.4);
  max-height: var(--iwsk-h, 620px);
  align-self: start;
}
/* 문구가 들어 있으면 너무 납작해지지 않게 바닥을 둔다 (문구는 absolute 라 상자를 못 늘린다) */
.iwsk-s3.fitpc-auto:not(.tx-empty) .iwsk-s3stage{
  min-height: min(var(--iwsk-h, 620px), 300px);
}

/* ② 전체 넣기 — 높이는 그대로 두고 이미지를 통째로. 남는 자리는 배경색. */
.iwsk-s3.fitpc-fit .iwsk-s3art.is-cover{
  background-size: contain; background-position: center;
}

/* 모바일에서는 되돌린다 — ≤768px 는 ::before 비율 방식(v1.35.0)이 담당한다 */
@media (max-width: 768px){
  .iwsk-s3.fitpc-auto .iwsk-s3stage{
    aspect-ratio: auto; max-height: none; align-self: stretch;
  }
  .iwsk-s3.fitpc-auto:not(.tx-empty) .iwsk-s3stage{ min-height: 260px; }
  /* fitmo-auto 는 ::before 가 높이를 만들므로 바닥값이 있으면 그만큼 빈 배경이 남는다.
     :not(.tx-empty) 쪽이 (0,4,0) 이라 같은 모양으로 특이도를 맞춰야 이긴다. */
  .iwsk-s3.fitpc-auto.fitmo-auto .iwsk-s3stage,
  .iwsk-s3.fitpc-auto.fitmo-auto:not(.tx-empty) .iwsk-s3stage{ min-height: 0; }
}

/* ============================================================
   v1.44.0 — 포털형(아래 공지 칸 있음) 우측 영역이 배너 높이에 눌려
              아이콘 타일이 공지 상자와 겹치던 문제

   구조: .iwsk-s3in 은 grid(align-items:stretch) 라 우측 칼럼 높이 = 배너 높이다.
        우측은 검색줄(제 높이) + 남은 높이를 타일:공지 = ptsplit:ptbot 으로 나눈다.
        나누는 두 칸이 flex-basis:0 + min-height:0 이라 "내용보다 작아질 수 있는" 상태였고,
        타일 격자는 grid-auto-rows:1fr 이라 줄이 눌리지만 타일 자체는
        min-height(세로쌓기 96px)와 아이콘·글자 때문에 더 못 줄어 아래로 흘러넘쳤다.
        넘친 타일 위에 뒤쪽 형제인 공지 상자가 그려지면서 겹쳐 보인다.

   왜 PC·모바일은 멀쩡했나: 1.43.0 에서 배너가 이미지 비율을 따르게 되어
        배너 높이 = 좌측 칼럼 폭 / 비율 이 됐다. 넓은 화면은 s3_h 로 잘려 500px 이라
        충분하고, 1100px 이하는 1단으로 내려가며 각 칸이 제 높이를 쓴다.
        그 사이(태블릿 가로·노트북)만 배너가 짧아져 자리가 모자랐다.
        1330px 스샷 실측 — 배너 868x379, 타일 2줄 204px 필요한데 배정 177px, 27px 넘침.

   ① 타일 칸은 내용보다 작아지지 않게 한다(min-height:auto).
      → 모자라면 공지 칸이 대신 줄고, 공지 본문은 이미 overflow:auto 라 스크롤된다.
        겹침은 원리적으로 사라진다.
   ② 그래도 1280px 이하에서는 공지가 손톱만 해지므로, 공지 칸이 있는 포털형에 한해
      2단 → 1단 전환점을 1100 → 1280px 로 올린다(:has 로 그 조합만 골라내므로
      공지 칸을 안 쓰는 사이트는 예전 그대로).
   ============================================================ */
.iwsk-pt.has-bot > .iwsk-pt-top { min-height: auto; }
.iwsk-pt.has-bot .iwsk-pt-feat,
.iwsk-pt.has-bot .iwsk-pt-tiles { min-height: auto; }

@media (max-width: 1280px) {
  .iwsk-s3:has(.iwsk-pt.has-bot) .iwsk-s3in { grid-template-columns: 1fr; }
  .iwsk-s3:has(.iwsk-pt.has-bot) .iwsk-s3tx { max-width: 62%; }
  .iwsk-s3:has(.iwsk-pt.has-bot) .iwsk-pt-feat,
  .iwsk-s3:has(.iwsk-pt.has-bot) .iwsk-pt-tiles { grid-auto-rows: auto; }
  .iwsk-s3:has(.iwsk-pt.has-bot) .iwsk-pt.has-bot > .iwsk-pt-top,
  .iwsk-s3:has(.iwsk-pt.has-bot) .iwsk-pt.has-bot > .iwsk-pt-bot { flex: 0 0 auto; }
  .iwsk-s3:has(.iwsk-pt.has-bot) .iwsk-pt.has-bot > .iwsk-pt-bot > .iwsk-wg-b { min-height: 180px; }
  /* 1단으로 내려오면 각 칸이 제 높이를 쓰므로 지정 최소높이는 되돌린다 (v1.45.0) */
  .iwsk-s3:has(.iwsk-pt.has-bot) .iwsk-pt.has-bot > .iwsk-pt-bot { min-height: auto; }
}

/* ============================================================
   v1.45.0 — 창을 줄이면 공지 칸이 눌려 목록이 통째로 사라지던 문제

   v1.44.0 에서 타일 칸(.iwsk-pt-top)만 min-height:auto 로 바꿨더니,
   모자란 높이를 전부 공지 칸이 뒤집어썼다. 공지 칸은 flex-basis:0 + min-height:0 이라
   0 까지 줄어들 수 있고, 안쪽 본문은 overflow:auto 라 조용히 잘려 나간다 —
   1450px 스샷에서 '알려드립니다' 머리줄만 남고 목록이 사라진 것이 이것.

   ① 공지 칸도 제 내용보다 작아지지 않게 한다(min-height:auto).
      pt_bot_h 를 넣으면 그 px 이 바닥이 된다(--iwsk-ptboth).
   ② 두 칸의 바닥을 합친 높이가 배너보다 커질 수 있으므로, 우측 패널이
      배너 높이에 갇히지 않고 자랄 수 있게 한다(height:auto + min-height:100%).
      → 그리드 행이 늘어나고, 비율(ptsplit)은 남는 높이가 있을 때만 일한다.
      fitpc-auto 는 배너가 align-self:start 라 이때 배너 아래에 여백이 생긴다 —
      공지가 사라지는 것보다 낫다고 보고 택했다. 폭 1280~1450 구간에서 최대 60px 안팎.
   ============================================================ */
.iwsk-pt.has-bot { height: auto; min-height: 100%; }
.iwsk-pt.has-bot > .iwsk-pt-bot { min-height: var(--iwsk-ptboth, auto); }

/* =========================================================
   공지 칸 안의 게시판 표가 칸보다 넓어져 가로 스크롤바가 생기던 문제 — v1.46.1

   .iwsk-wg-b-body 는 overflow:auto 라 세로·가로 양쪽에 스크롤이 붙는다.
   게시판 숏코드(KBoard 등)의 표는 제목 칸이 안 줄고 날짜 칸이 nowrap 이라
   글 제목이 길어지거나 날짜 표기가 길어지면(오늘 글 "01:20" → 지난 글
   "2026.08.10") 표 폭이 칸을 넘어서고, 그때부터 가로 스크롤바가 나온다.

   가로는 잠그고(세로만 스크롤), 표는 칸 폭에 맞춰 제목을 말줄임 처리한다.
   ========================================================= */
.iwsk-pt.has-bot .iwsk-wg-b-body { overflow-x: hidden; overflow-y: auto; }

/* v1.46.2 : 게시판 플러그인이 표(또는 감싼 상자)에 min-width 를 걸어 두면
   width:100% 를 줘도 그 값이 이겨서 계속 칸 밖으로 넘친다(min-width 가 max-width 보다 강하다).
   그래서 하한부터 풀어 준다. */
.iwsk-wg-b-body #kboard-default-latest,
.iwsk-wg-b-body #kboard-default-latest > *,
.iwsk-wg-b-body table { min-width: 0 !important; max-width: 100% !important; }

.iwsk-wg-b-body table {
  width: 100% !important; max-width: 100% !important;
  table-layout: fixed; border-collapse: collapse;
}
.iwsk-wg-b-body table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 제목이 td 안 div/a 에 들어 있는 경우까지 잡는다 */
.iwsk-wg-b-body table td > a,
.iwsk-wg-b-body table td > div,
.iwsk-wg-b-body table td .kboard-default-cut-strings {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* KBoard 최신글 표 — 날짜 칸 폭을 고정해 제목이 남는 폭을 다 쓰게 한다.
   (KBoard 기본 규칙이 id+클래스+태그라 같은 수준으로 맞춰야 이긴다) */
.iwsk-wg-b-body #kboard-default-latest table td.kboard-latest-date,
.iwsk-wg-b-body #kboard-default-latest table th.kboard-latest-date {
  /* v1.46.2 : 84px 는 "2026.08.12"(약 64px) + 게시판 기본 좌우 패딩을 감당 못 해
     마지막 글자가 잘렸다. 폭을 늘리고 가로 패딩을 0 으로 눕힌다. */
  width: 104px !important; min-width: 0 !important;
  padding-left: 6px !important; padding-right: 0 !important;
  text-align: right; white-space: nowrap; overflow: hidden;
}
.iwsk-wg-b-body #kboard-default-latest table td.kboard-latest-title,
.iwsk-wg-b-body #kboard-default-latest table th.kboard-latest-title {
  width: auto; overflow: hidden;
}