/* IW Sub Visual - 정적 배너형 v5.4.0 */

/* ▼▼ PC 비주얼 높이 (이 한 줄만 바꾸면 전체 적용) ▼▼ */
/*  100vh=화면꽉참 / 62vh=아래 타이틀·탭 보임 / 55vh=더 보임  */
:root{ --iwc-h: 62vh; }
/* ▲▲ 모바일(768px↓) 기본 330px — 슬롯별로 --iwc-hm 을 주면 그 값이 우선 (v5.8.0) ▲▲ */

/* ===== PC: 스크롤 효과 제거하고 정적 배너로 고정 (단, 풀스크린 고정 미사용 시에만) ===== */
@media (min-width:769px){
  /* 스크롤 공간(160vh)·sticky 제거 → 딱 비주얼 높이만 차지 */
  .iwc-spacer:not(.iwc-fixed){
    height:var(--iwc-h,62vh) !important;
    position:relative !important;
    z-index:0;
    overflow:hidden;
  }
  .iwc-spacer:not(.iwc-fixed) .iwc-stage{
    position:relative !important;
    top:auto !important;
    height:var(--iwc-h,62vh) !important;
    transform:none !important;
    will-change:auto;
  }
  /* 이미지: 항상 풀폭 cover, 축소(settled) 효과 무시 */
  .iwc-spacer:not(.iwc-fixed) .iwc-img,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-img{
    position:absolute !important;
    left:0 !important; top:0 !important;
    width:100% !important; height:var(--iwc-h,62vh) !important;
    border-radius:0 !important;
    transition:none !important;
    transform:none !important;
  }
  /* 어두운 오버레이 유지 (글자 가독성) */
  .iwc-spacer:not(.iwc-fixed) .iwc-shade,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-shade{
    display:block !important;
    opacity:var(--iwc-ov,.3) !important;
  }
  /* 텍스트: 하단 고정, settled 위치이동 무시. 글자 항상 흰색 */
  .iwc-spacer:not(.iwc-fixed) .iwc-textrow,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-textrow{
    position:absolute !important;
    bottom:60px !important; top:auto !important;
    transition:none !important;
  }
  .iwc-spacer:not(.iwc-fixed) .iwc-eng,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-eng{ color:#fff !important; }
  .iwc-spacer:not(.iwc-fixed) .iwc-title,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-title{ color:var(--iwc-tc,#fff) !important; }
  .iwc-spacer:not(.iwc-fixed) .iwc-sub,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-sub{ color:var(--iwc-sc,#fff) !important; }
  /* 스크롤 인디케이터(마우스) 숨김 */
  .iwc-spacer:not(.iwc-fixed) .iwc-scroll{ display:none !important; }
}


.iwc-spacer{position:relative;height:160vh;}
.iwc-stage{position:sticky;top:0;height:var(--iwc-h,100vh);overflow:hidden;background:#fff;}

/* 배경 이미지: 처음 풀화면 → 스크롤 시 아래로 분리·축소·라운드 */
.iwc-img{
  position:absolute;left:0;top:0;width:100%;height:var(--iwc-h,100vh);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  overflow:hidden;border-radius:0;
  will-change:width,height,top,left,border-radius;
  transition:width .6s cubic-bezier(.4,0,.2,1),height .6s cubic-bezier(.4,0,.2,1),top .6s cubic-bezier(.4,0,.2,1),left .6s cubic-bezier(.4,0,.2,1),border-radius .6s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.iwc-stage.iwc-settled .iwc-img{
  width:92%;height:64vh;top:calc(24vh + 50px);left:4%;border-radius:var(--iwc-radius,30px);
}
.iwc-ph{background:linear-gradient(120deg,#3a3a40,#8a8a92);}
.iwc-shade{position:absolute;inset:0;background:#000;opacity:var(--iwc-ov,.3);z-index:2;transition:opacity .4s;pointer-events:none;}
.iwc-stage.iwc-settled .iwc-shade{opacity:0;}

/* 텍스트: 좌(영문+제목 세로 스택) / 우(서브) */
.iwc-textrow{
  position:absolute;left:0;right:0;
  bottom:100px;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 4%;gap:24px;z-index:3;pointer-events:none;
  will-change:bottom;
  transition:bottom .6s cubic-bezier(.4,0,.2,1);
}
.iwc-stage.iwc-settled .iwc-textrow{bottom:78vh;}
.iwc-left{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.iwc-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:16px;}
.iwc-eng{letter-spacing:-.5px;line-height:1.1;}
.iwc-title{letter-spacing:-1.5px;line-height:1.15;}
/* font-weight 는 관리자 '글자 두께 > 서브' 설정이 인라인으로 덮어쓴다(여기 값은 기본값) */
.iwc-sub{max-width:420px;text-align:right;font-weight:600;line-height:1.6;}

/* 우측 마우스형 스크롤 인디케이터 */
.iwc-scroll{display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;}
.iwc-scroll-label{font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.85);transition:color .4s ease;}
.iwc-mouse{width:26px;height:42px;border:2px solid rgba(255,255,255,.85);border-radius:14px;position:relative;transition:border-color .4s ease;}
.iwc-mouse::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;background:#fff;border-radius:2px;animation:iwc-mouse-dot 1.5s infinite;transition:background .4s ease;}
@keyframes iwc-mouse-dot{0%{transform:translateY(0);opacity:1}50%{transform:translateY(10px);opacity:.4}100%{transform:translateY(0);opacity:1}}
/* 분리(settled)되면 마우스 인디케이터 숨김 */
.iwc-stage.iwc-settled .iwc-scroll{opacity:0;transition:opacity .4s ease;}

.iwc-eng{color:#fff;transition:color .4s ease;}
.iwc-title{color:var(--iwc-tc,#fff);transition:color .4s ease;}
.iwc-sub{color:var(--iwc-sc,#fff);transition:color .4s ease;}
.iwc-stage.iwc-settled .iwc-eng{color:#bdbdbd;text-shadow:none;}
.iwc-stage.iwc-settled .iwc-title{color:var(--iwc-tc,#1a1a1a);text-shadow:none;}
.iwc-stage.iwc-settled .iwc-sub{color:var(--iwc-sc,#999);text-shadow:none;}

@media (prefers-reduced-motion: reduce){
  .iwc-spacer{height:100vh;}
  .iwc-mouse::after{animation:none;}
}

/* ===== 풀스크린 고정 + 덮기 효과 ===== */
/* 비주얼은 화면에 고정(z-index 0), 아래 흰배경 콘텐츠가 그 위로 덮임. 헤더는 z-index가 높아 안 덮임 */
.iwc-spacer.iwc-fixed{height:100vh;position:relative;z-index:0;}
.iwc-spacer.iwc-fixed .iwc-stage{
  position:fixed;left:0;top:0;width:100%;height:100vh;
  overflow:hidden;z-index:0;
  /* GPU 합성 레이어로 올려 스크롤 시 리페인트 방지 (부드럽게) */
  transform:translateZ(0);
  will-change:transform;
  backface-visibility:hidden;
}
.iwc-spacer.iwc-fixed .iwc-img{
  position:absolute;left:0;top:0;width:100%;height:100vh;
  border-radius:0;transition:none;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.iwc-spacer.iwc-fixed .iwc-shade{display:block;opacity:var(--iwc-ov,.3);}
.iwc-spacer.iwc-fixed .iwc-textrow{
  position:absolute;left:0;right:0;bottom:100px;
  transition:none;padding:0 4%;align-items:flex-end;
}
.iwc-spacer.iwc-fixed .iwc-right{justify-content:flex-end;}
.iwc-spacer.iwc-fixed .iwc-scroll{display:none;}
.iwc-spacer.iwc-fixed .iwc-eng{color:#fff;}
.iwc-spacer.iwc-fixed .iwc-title{color:var(--iwc-tc,#fff);}
.iwc-spacer.iwc-fixed .iwc-sub{color:var(--iwc-sc,#fff);}

/* ===== 모바일: PC 효과 전부 제거하고 정적 배너로 ===== */
@media (max-width:768px){
  /* 효과형·고정형 공통: sticky/fixed 해제, 높이 250px 고정 */
  .iwc-spacer,
  .iwc-spacer.iwc-fixed{
    height:var(--iwc-hm, 330px) !important;
    position:relative !important;
    z-index:0;
    overflow:hidden;
  }
  .iwc-stage,
  .iwc-spacer.iwc-fixed .iwc-stage{
    position:relative !important;
    top:auto !important;
    height:var(--iwc-hm, 330px) !important;
    transform:none !important;
    will-change:auto;
    z-index:1 !important;
  }
  /* 이미지: 항상 풀폭·cover로 꽉 차게, 효과(settled) 무시 */
  .iwc-img,
  .iwc-stage.iwc-settled .iwc-img,
  .iwc-spacer.iwc-fixed .iwc-img{
    position:absolute !important;
    left:0 !important;top:0 !important;
    width:100% !important;height:var(--iwc-hm, 330px) !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    border-radius:0 !important;transition:none !important;
    transform:none !important;
  }
  /* 어둡게(오버레이) 유지 — 글자 가독성 */
  .iwc-shade,
  .iwc-stage.iwc-settled .iwc-shade,
  .iwc-spacer.iwc-fixed .iwc-shade{
    display:block !important;opacity:var(--iwc-ov,.35) !important;
  }
  /* 텍스트: 하단 고정 위치로 통일, settled 무시 */
  .iwc-textrow,
  .iwc-stage.iwc-settled .iwc-textrow,
  .iwc-spacer.iwc-fixed .iwc-textrow{
    position:absolute !important;
    left:0;right:0;bottom:22px !important;top:auto !important;
    flex-direction:column;align-items:flex-start;
    justify-content:flex-end;gap:6px;padding:0 5%;
    transition:none !important;
  }
  .iwc-right{align-items:flex-start !important;}
  /* 글자색: 항상 흰색 + 모바일 적정 크기 */
  .iwc-eng,.iwc-stage.iwc-settled .iwc-eng,.iwc-spacer.iwc-fixed .iwc-eng{
    color:#fff !important;font-size:12px !important;letter-spacing:.5px;
  }
  .iwc-title,.iwc-stage.iwc-settled .iwc-title,.iwc-spacer.iwc-fixed .iwc-title{
    color:var(--iwc-tc,#fff) !important;font-size:22px !important;line-height:1.25 !important;
  }
  .iwc-sub,.iwc-stage.iwc-settled .iwc-sub,.iwc-spacer.iwc-fixed .iwc-sub{
    color:var(--iwc-sc,#fff) !important;text-align:left;max-width:100%;
    white-space:normal;word-break:keep-all;font-size:13px !important;line-height:1.5;
  }
  /* 스크롤 인디케이터 숨김 */
  .iwc-scroll{display:none !important;}
}

/* =========================================================
   문구 위치 정렬 (data-align) — 서브 비주얼
   textrow를 전체 영역에 깔고 flex로 9방향 배치.
   내부(left/right)를 세로 한 컬럼으로 재배열: 영문→제목→부제
   PC(769px↑)에서만 적용. 모바일은 기존 하단 고정 유지.
   ========================================================= */
@media (min-width:769px){
  .iwc-spacer[data-align] .iwc-textrow{
    top:0 !important;bottom:auto !important;left:0;right:0;height:100%;
    padding:6% 5% !important;gap:0;
    flex-direction:column;
    box-sizing:border-box;
  }
  /* fixed 모드에서도 정렬 적용되도록 */
  .iwc-spacer.iwc-fixed[data-align] .iwc-textrow{
    top:0;bottom:auto;height:100%;padding:6% 5%;flex-direction:column;
  }
  /* 내부 left/right를 한 흐름으로: 가로폭 전체 쓰고 정렬은 textrow가 담당 */
  .iwc-spacer[data-align] .iwc-left,
  .iwc-spacer[data-align] .iwc-right{
    width:100%;align-items:inherit;
  }
  .iwc-spacer[data-align] .iwc-right{justify-content:flex-start;margin-top:12px;}
  .iwc-spacer[data-align] .iwc-scroll{display:none;}
  /* 부제 고정 max-width/우측정렬 해제 → textrow 정렬을 따름 */
  .iwc-spacer[data-align] .iwc-sub{
    max-width:min(100%, 1200px) !important;text-align:inherit !important;
    white-space:normal;word-break:keep-all;
  }

  /* 세로 위치 */
  .iwc-spacer[data-align^="t"] .iwc-textrow{justify-content:flex-start;}
  .iwc-spacer[data-align^="c"] .iwc-textrow{justify-content:center;}
  .iwc-spacer[data-align^="b"] .iwc-textrow{justify-content:flex-end;}
  /* 가로 정렬 */
  .iwc-spacer[data-align$="l"] .iwc-textrow{align-items:flex-start;text-align:left;}
  .iwc-spacer[data-align$="c"] .iwc-textrow{align-items:center;text-align:center;}
  .iwc-spacer[data-align$="r"] .iwc-textrow{align-items:flex-end;text-align:right;}
  .iwc-spacer[data-align$="l"] .iwc-left,.iwc-spacer[data-align$="l"] .iwc-right{align-items:flex-start;}
  .iwc-spacer[data-align$="c"] .iwc-left,.iwc-spacer[data-align$="c"] .iwc-right{align-items:center;}
  .iwc-spacer[data-align$="r"] .iwc-left,.iwc-spacer[data-align$="r"] .iwc-right{align-items:flex-end;}
  /* 중앙/우측 정렬 시 부제 폭 중앙정렬 */
  .iwc-spacer[data-align$="c"] .iwc-sub{margin-left:auto;margin-right:auto;}
  .iwc-spacer[data-align$="r"] .iwc-sub{margin-left:auto;}
}

/* ============================================================
   스타일2 — 제목 위 · 이미지 아래 (KEPCO 참고)  v5.7.0
   브레드크럼 → 라벨 → 큰 제목 → 라운드 이미지.
   스크롤을 내리면 글자는 위로 밀려 사라지고 이미지만 좌우로 넓어진다.
   확장은 --iwc2-p(좌우 패딩) 하나만 바꿔 레이아웃 재계산을 줄인다.
   ============================================================ */
.iwc2 { --iwc2-p: 30px; width: 100%; }
.iwc2 * { box-sizing: border-box; }

/* ── 글자 영역 ── */
.iwc2-head { max-width: var(--iwc2-w, 1800px); margin: 0 auto;
  padding: var(--iwc2-pt, 46px) var(--iwc2-p, 30px) 40px;
  transition: opacity .38s ease, transform .38s ease; }
.iwc2.is-grown .iwc2-head { opacity: 0; transform: translateY(-26px); pointer-events: none; }

.iwc2-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: var(--iwc-cfs,13px); font-weight: var(--iwc-cfw,inherit); color: var(--iwc-cc,#8a949e); margin-bottom: 26px; }
.iwc2-crumb a { color: var(--iwc-cc,#8a949e); text-decoration: none; }
.iwc2-crumb a:hover { color: #4c565e; text-decoration: underline; }
.iwc2-crumb-home::before { content: '\2302'; margin-right: 5px; font-size: 14px; }
.iwc2-crumb-sep { color: var(--iwc-cc,#c9d1d9); }
.iwc2-crumb-now { color: var(--iwc-cc,#4c565e); font-weight: var(--iwc-cnw,inherit); }

.iwc2-label { margin: 0 0 14px; color: var(--iwc2-lbl, #1b6fd6); letter-spacing: -.01em; }
.iwc2-title { margin: 0; color: var(--iwc-tc, var(--iw-ink, #141a1f)); line-height: 1.24;
  letter-spacing: -.03em; word-break: keep-all; }
.iwc2-sub { margin: 18px 0 0; color: var(--iwc-sc,#6b7580); line-height: 1.7; max-width: 900px; }

/* ── 이미지 영역 ── */
.iwc2-imgwrap { max-width: var(--iwc2-w, 1800px); margin: 0 auto;
  padding: 0 var(--iwc2-p, 30px);
  transition: max-width .5s ease, padding .5s ease; }
.iwc2-img { position: relative; height: var(--iwc2-h, 520px);
  border-radius: var(--iwc2-r, 24px); overflow: hidden;
  background-size: cover; background-repeat: no-repeat;
  transition: height .5s ease, border-radius .5s ease; }
.iwc2-shade { position: absolute; inset: 0; pointer-events: none; }
.iwc2-ph { background: #e9edf1; display: flex; align-items: center; justify-content: center; }
.iwc2-phtx { font-size: 14px; color: #8a949e; }

/* ── 확장 상태 : 좌우 여백 0 · 라운드 0 · 전체폭 ── */
.iwc2.can-grow.is-grown .iwc2-imgwrap { max-width: 100%; padding: 0; }
.iwc2.can-grow.is-grown .iwc2-img { border-radius: 0; }

/* ── 반응형 ── */
@media (max-width: 1200px) {
  .iwc2 { --iwc2-p: 20px; }
  .iwc2-head { padding-top: min(var(--iwc2-pt, 34px), 34px); padding-bottom: 30px; }
  .iwc2-crumb { margin-bottom: 18px; }
}
@media (max-width: 768px) {
  .iwc2 { --iwc2-p: 14px; }
  .iwc2-head { padding-top: min(var(--iwc2-pt, 26px), 26px); padding-bottom: 22px; }
  .iwc2-img { height: min(var(--iwc2-h, 520px), 56vw); border-radius: min(var(--iwc2-r, 24px), 14px); }
  .iwc2-sub { margin-top: 12px; }
  /* 모바일에서는 글자를 사라지게 하지 않는다 — 스크롤이 짧아 제목을 놓치기 쉽다 */
  .iwc2.is-grown .iwc2-head { opacity: 1; transform: none; pointer-events: auto; }
  .iwc2.can-grow.is-grown .iwc2-imgwrap { padding: 0 14px; max-width: 100%; }
  .iwc2.can-grow.is-grown .iwc2-img { border-radius: min(var(--iwc2-r, 24px), 14px); }
}

/* ============================================================
   스타일2 — 글자 영역 정렬  v5.7.1
   브레드크럼 · 라벨 · 제목 · 서브타이틀이 한 덩어리로 움직인다.
   브레드크럼은 flex 라 text-align 이 안 먹으므로 justify-content 로 따로 처리한다.
   ============================================================ */
.iwc2-al-center .iwc2-head { text-align: center; }
.iwc2-al-center .iwc2-crumb { justify-content: center; }
.iwc2-al-center .iwc2-sub { margin-left: auto; margin-right: auto; }

.iwc2-al-right .iwc2-head { text-align: right; }
.iwc2-al-right .iwc2-crumb { justify-content: flex-end; }
.iwc2-al-right .iwc2-sub { margin-left: auto; }

/* 좌측(기본)은 원래 값이라 규칙이 필요없다 */

@media (max-width: 560px) {
  /* 좁은 화면에서 우측 정렬은 브레드크럼이 줄바꿈되며 읽기 어려워진다 */
  .iwc2-al-right .iwc2-head { text-align: left; }
  .iwc2-al-right .iwc2-crumb { justify-content: flex-start; }
  .iwc2-al-right .iwc2-sub { margin-left: 0; }
}

/* ============================================================
   스타일3 — 전체폭 배너 + 하단 현재 위치  v5.9.0
   이미지는 화면 꽉 채우고, 안쪽 콘텐츠만 --iwc3-w 로 묶는다.
   글자 덩어리는 세로 가운데, 현재 위치는 배너 하단에 붙는다.
   .iwc-spacer(스타일1) 규칙과 셀렉터가 전혀 겹치지 않게 만든다.
   ============================================================ */
.iwc3{ position:relative; width:100%; height:var(--iwc3-h,480px); overflow:hidden; background:#111820; }
.iwc3 *{ box-sizing:border-box; }

.iwc3-img{ position:absolute; inset:0; background-size:cover; background-position:center 50%; background-repeat:no-repeat; }
.iwc3-shade{ position:absolute; inset:0; pointer-events:none; }
.iwc3-ph{ background:#2a323c; display:flex; align-items:center; justify-content:center; }
.iwc3-phtx{ font-size:14px; color:#9aa5b1; }

/* 안쪽 콘텐츠 — 글자(가운데) + 현재 위치(하단) */
.iwc3-inner{
  position:relative; z-index:2;
  max-width:var(--iwc3-w,1400px); height:100%; margin:0 auto;
  padding:0 30px; display:flex; flex-direction:column;
}
.iwc3-txt{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left; padding:24px 0 var(--iwc3-pb,48px); }

.iwc3-eng{ margin:0 0 12px; color:rgba(255,255,255,.86); letter-spacing:.02em; line-height:1.3; }

/* 서브타이틀 + 현재 위치를 한 줄에 두는 자리 (v5.9.2)
   align-items:baseline — 두 글자의 밑선을 맞춘다. 글자 크기가 달라도 줄이 맞는다.
   현재 위치는 margin-left:auto 로 항상 오른쪽 끝. 서브타이틀이 없어도 오른쪽에 붙는다. */
.iwc3-lastrow{ display:flex; align-items:baseline; gap:28px; width:100%; margin-top:16px; }
.iwc3-lastrow .iwc3-sub{ margin:0; flex:0 1 auto; min-width:0; }
.iwc3-lastrow .iwc3-crumb{ margin-left:auto; padding:0; border-top:0; flex:0 0 auto; flex-wrap:nowrap; }
.iwc3-title{ margin:0; color:var(--iwc-tc,#fff); line-height:1.2; letter-spacing:-.02em; }
.iwc3-sub{ margin:16px 0 0; color:var(--iwc-sc,rgba(255,255,255,.9)); line-height:1.65; max-width:760px; }

/* 현재 위치 */
.iwc3-crumb{
  flex:0 0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:14px 0 22px; font-size:var(--iwc-cfs,14px); font-weight:var(--iwc-cfw,inherit); color:var(--iwc-cc,rgba(255,255,255,.72));
}
.iwc3-crumb.has-line{ border-top:1px solid rgba(255,255,255,.22); }
.iwc3-crumb a{ display:inline-flex; align-items:center; color:var(--iwc-cc,rgba(255,255,255,.72)); text-decoration:none; }
.iwc3-crumb a:hover{ color:#fff; text-decoration:underline; }
.iwc3-sep{ color:var(--iwc-cc,rgba(255,255,255,.45)); }
/* 현재 항목은 굵기로 구분한다 — 색을 직접 지정해도 구분이 남게 두께는 변수로 빼지 않는다 */
.iwc3-now{ color:var(--iwc-cc,#fff); font-weight:600; }
/* 홈 아이콘 — 이미지 파일 없이 CSS 로만 그린다(집 모양) */
.iwc3-home{
  width:13px; height:11px; margin-right:7px; display:inline-block; position:relative; top:1px;
  background:currentColor;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v10h6v-6h2v6h6V11h3z'/%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v10h6v-6h2v6h6V11h3z'/%3E%3C/svg%3E");
}

/* ── 정렬 ── 공통 '문구 위치 정렬'(9방향) 값을 그대로 쓴다 (v5.9.1)
   앞글자 t/c/b = 세로, 뒷글자 l/c/r = 가로. 'cc' 는 두 규칙에 모두 걸린다.
   현재 위치(브레드크럼)는 항상 배너 맨 아래에 붙고 가로 정렬만 따라간다. */
.iwc3[data-align^="t"] .iwc3-txt{ justify-content:flex-start; }
.iwc3[data-align^="c"] .iwc3-txt{ justify-content:center; }
.iwc3[data-align^="b"] .iwc3-txt{ justify-content:flex-end; }

.iwc3[data-align$="l"] .iwc3-txt{ align-items:flex-start; text-align:left; }
.iwc3[data-align$="c"] .iwc3-txt{ align-items:center; text-align:center; }
.iwc3[data-align$="r"] .iwc3-txt{ align-items:flex-end; text-align:right; }

.iwc3[data-align$="c"] .iwc3-sub{ margin-left:auto; margin-right:auto; }
.iwc3[data-align$="r"] .iwc3-sub{ margin-left:auto; }

.iwc3[data-align$="c"] .iwc3-crumb{ justify-content:center; }
.iwc3[data-align$="r"] .iwc3-crumb{ justify-content:flex-end; }

@media (max-width:1200px){
  .iwc3-inner{ padding:0 20px; }
}
/* 900px 이하에서는 서브타이틀과 현재 위치를 한 줄에 못 넣는다 → 세로로 쌓는다 */
@media (max-width:900px){
  .iwc3-lastrow{ flex-direction:column; align-items:flex-start; gap:10px; }
  .iwc3-lastrow .iwc3-crumb{ margin-left:0; flex-wrap:wrap; }
  .iwc3[data-align$="c"] .iwc3-lastrow{ align-items:center; }
  .iwc3[data-align$="r"] .iwc3-lastrow{ align-items:flex-end; }
}
@media (max-width:768px){
  .iwc3{ height:var(--iwc3-hm,300px); }
  .iwc3-inner{ padding:0 16px; }
  /* 모바일은 배너가 짧아 아래 여백을 그대로 쓰면 글자가 위로 몰린다 → 상한 24px */
  .iwc3-txt{ padding:18px 0 min(var(--iwc3-pb,48px), 24px); }
  .iwc3-lastrow{ margin-top:10px; }
  .iwc3-eng{ margin-bottom:8px; }
  .iwc3-sub{ margin-top:10px; }
  .iwc3-crumb{ padding:10px 0 16px; font-size:12.5px; gap:6px; }
}
/* 좁은 화면에서 오른쪽 정렬은 왼쪽으로 되돌린다 —
   현재 위치가 줄바꿈되면 읽는 순서가 흐트러진다(스타일2 와 같은 처리). */
@media (max-width:560px){
  .iwc3[data-align$="r"] .iwc3-txt{ text-align:left; align-items:flex-start; }
  .iwc3[data-align$="r"] .iwc3-sub{ margin-left:0; }
  .iwc3[data-align$="r"] .iwc3-crumb{ justify-content:flex-start; }
  .iwc3[data-align$="r"] .iwc3-lastrow{ align-items:flex-start; }
}

/* ============================================================
   비주얼 아래 여백  v5.9.3
   ------------------------------------------------------------
   변수가 없으면 0 이라 예전 화면과 완전히 같다. PHP 는 값이 있을 때만
   --iwc-gb / --iwc-gbm 를 찍는다.
   모바일 값이 없으면 var() 두 번 겹쳐서 PC 값으로 자연스럽게 떨어진다.
   풀스크린 고정(.iwc-fixed)은 제외 — 아래 콘텐츠가 비주얼을 덮는 구조라
   여백을 주면 그 사이가 빈 띠로 벌어진다.
   ============================================================ */
.iwc-spacer:not(.iwc-fixed){ margin-bottom:var(--iwc-gb,0px); }
.iwc2{ margin-bottom:var(--iwc-gb,0px); }
.iwc3{ margin-bottom:var(--iwc-gb,0px); }

@media (max-width:768px){
  .iwc-spacer:not(.iwc-fixed){ margin-bottom:var(--iwc-gbm,var(--iwc-gb,0px)); }
  .iwc2{ margin-bottom:var(--iwc-gbm,var(--iwc-gb,0px)); }
  .iwc3{ margin-bottom:var(--iwc-gbm,var(--iwc-gb,0px)); }
}

/* ============================================================
   브레드크럼 글자 — 모바일 크기  v5.9.4
   기존 모바일 규칙(스타일3 12.5px)보다 뒤에 와야 이긴다. 그래서 파일 맨 끝에 둔다.
   모바일 값이 없으면 PC 값 → 그것도 없으면 원래 값으로 두 겹 폴백한다.
   ============================================================ */
@media (max-width:768px){
  .iwc2-crumb{ font-size:var(--iwc-cfsm,var(--iwc-cfs,13px)); }
  .iwc3-crumb{ font-size:var(--iwc-cfsm,var(--iwc-cfs,12.5px)); }
}

/* ============================================================
   스타일2 — 이미지 없는 슬롯  v5.9.5
   ------------------------------------------------------------
   .iwc2.is-grown .iwc2-head 규칙은 스크롤하면 글자를 지운다. 이미지가 있을 때는
   "글자 사라지고 이미지가 넓어짐"이 의도지만, 이미지가 없으면 화면에 아무것도
   안 남는다. 그래서 no-img 일 때만 글자를 계속 보여 준다.
   (파일 뒤쪽에 둬야 앞의 is-grown 규칙을 이긴다)
   ============================================================ */
.iwc2.no-img.is-grown .iwc2-head{ opacity:1; transform:none; pointer-events:auto; }

/* ============================================================
   제목 폰트 · 비주얼 위 당기기  v5.10.0
   ------------------------------------------------------------
   변수를 안 찍으면 inherit / 0 이라 예전 화면과 완전히 같다.
   PHP 는 관리자에서 폰트를 고른 슬롯에만 --iwc-tff 를 넣는다.
   ============================================================ */
.iwc-title, .iwc2-title, .iwc3-title{ font-family:var(--iwc-tff, inherit); }
/* '전체 적용' 을 켠 슬롯만 --iwc-aff 가 들어온다 */
.iwc-eng, .iwc-sub,
.iwc2-label, .iwc2-sub, .iwc2-crumb,
.iwc3-eng, .iwc3-sub, .iwc3-crumb{ font-family:var(--iwc-aff, inherit); }

/* 스타일2 — 상단 메뉴와의 거리. 음수를 주면 테마가 본문 위에 두는 여백까지 끌어올린다 */
.iwc2{ margin-top:var(--iwc2-mt, 0px); }