/*     1750625 : HTML 편집기      */
#sub_view #container .contents_wrap {padding-bottom:0;}
/* ===== 기본 범위 ===== */
.sub_page.article_wrap{
  padding: 0 0 clamp(40px, 6vw, 80px) 0;
  background: linear-gradient(180deg,#fff 0%, #FAFAF7 100%);
box-sizing:border-box;
overflow:hidden;
}

.sub_page.article_wrap figcaption {padding: 0 20px; font-weight:700; text-transform:uppercase;}

.sub_page.article_wrap * {
box-sizing:border-box;
color:#1e1e1e;
}
.article_inner{
  max-width: var(--sb-max-width); /* 본문 폭 */
  margin: 0 auto;
  
}

/* ===== 타이포 ===== */
.hd-xl{ font-size: clamp(22px,3.4vw,36px); font-weight: 800; line-height:1.3; margin: .3em 0 .5em; }
.hd-lg{ font-size: clamp(20px,2.6vw,26px); font-weight: 800; margin: clamp(2rem, 4vw, 4rem) 0 .4em; }
.body{ color:#444; line-height:1.9; margin: .9em 0; }

/* ===== 공통 figure ===== */
.fig{ margin: clamp(18px,3vw,28px) 0; }
.fig img{ width:100%; height:auto; display:block; object-fit: cover; }
.fig figcaption{
  font-size: .92rem; color:#666; margin-top: 8px;
}

/* 1) 풀블리드: 화면 좌우 끝까지 */
.fig--bleed{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
margin-top:clamp(2rem, 4vw, 4rem);
}
.fig--bleed img{ max-height: 62vh; object-fit: cover; }

/* 2) 브레이크아웃 모자이크(본문보다 살짝 넓게) */
.fig-grid{
  margin: clamp(18px,3vw,28px) 0;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(8px,1.6vw,16px);
}
.fig-grid figure{
  border-radius: 14px;
  overflow: hidden;
  background:#f2f2f2;
  aspect-ratio: 1/1;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.fig-grid figure img{ width:100%; height:100%; object-fit: cover; }
.fig-grid figure.tall{ grid-row: span 2; aspect-ratio: .66/1; }
.fig-grid figcaption{ padding: 8px 10px; color:#555; }

/* 본문 폭보다 넓게(브레이크아웃) */
.fig-grid--breakout{
  max-width: 1280px;
  margin-left: max( calc((100% - 1280px)/2), -20px );
  margin-right: max( calc((100% - 1280px)/2), -20px );
}

/* 3) 플로팅 이미지 + 라운드 + 텍스트 감싸기 */
.fig--float{
  max-width: 360px;
  margin: .2em 0 1em;
}
.fig--float-right{ float: right; margin-left: 20px; }
.fig--float-left{ float: left; margin-right: 20px; }
.fig--rounded img{
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* 텍스트 감싸기 더 자연스럽게: 원형 흐름(지원브라우저 한정) */
@supports (shape-outside: circle(50%)){
  .fig--float-right img,
  .fig--float-left img{
    width: 100%;
    height: auto;
  }
  /*.fig--float-right{ shape-outside: circle(50%); }*/
  .fig--float-left{ shape-outside: circle(50%); }
}

/* 4) 인라인 듀오(2열 이미지) */
.fig-inline{
  display:flex;
justify-content:center;
  gap: clamp(8px,1.6vw,16px);
  margin: clamp(18px,3vw,28px) 0;

}
.fig-inline figure{
  width:fit-content;
text-align:center;
}

.fig-inline figure img {border-radius: 14px; overflow: hidden; background:#f3f3f3; box-shadow: 0 6px 18px rgba(0,0,0,.06);}
.fig-inline figcaption{ padding: 8px 10px; color:#555; }

/* 5) 풀폭 스트립(가로 배너) */
.fig--strip{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
margin-top:clamp(2rem, 4vw, 4rem);
}
.fig--strip img{ width:100%; height: 42vh; object-fit: cover; }

/* 6) 라이트 패럴랙스(배경 고정) */
.fig-parallax{
  position: relative;
  margin: clamp(30px,2vw,2vw) 0;
  border-radius: 18px;
  overflow: hidden;
}

.fig-parallax__box{

  text-align: center;
}
.fig-parallax__box h3{ font-size: clamp(18px,2.2vw,34px); font-weight:800; margin-bottom:6px; }
.fig-parallax__box p{ color:#444; }

/* 7) 캡션 강조형 */
.fig--caption-xl figcaption{
  font-size: clamp(16px,2.1vw,22px);
  line-height: 1.5;
  font-weight: 700;
  color:#2D3B2B;
  text-align: center;
  margin-top: 12px;
  quotes: "“" "”" "‘" "’";
margin-top: clamp(2rem, 2.4vw, 2.4rem);
}
.fig--caption-xl figcaption:before{ content: open-quote; margin-right: .1em; }
.fig--caption-xl figcaption:after{ content: close-quote; margin-left: .1em; }

/* 8) 콜아웃 카드 */
.callout{
  display: grid; grid-template-columns: auto 1fr;
  gap: 12px; align-items: center;
  background:#fff; border:1px solid #E7E7E2;
  border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  margin: clamp(18px,3vw,28px) 0;
}
.callout__thumb{
  width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background:#f2f2f2;
}
.callout__thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.callout blockquote{
  margin:0; color:#2b2b2b; font-weight:700; line-height:1.6;
}



/* ===== 반응형 ===== */
@media (max-width:1280px) {
.article_inner {padding:0 15px;}
.fig-grid--breakout {margin:0;}
}




@media (max-width: 1023px){
  .fig-grid{ grid-template-columns: repeat(2,1fr); }
  .fig-inline{ grid-template-columns: 1fr; }
.fig-grid figure.tall{ grid-row: auto; aspect-ratio: 1/1; }

.fig--float-right {float:unset; margin: clamp(2rem, 3vw, 3rem) 0;}

.fig--strip {width: 100%; margin: 0; left: 0; right: 0;}
.fig--strip img {height:unset;}
}
@media (max-width: 860px){
  .fig--float-right, .fig--float-left{
    float:none; margin: 12px 0; max-width: 100%;
  }
}
@media (max-width: 767px){
  .fig--bleed img{ max-height: 48vh; }
  .fig--strip img{ height: 32vh; }
  

  .callout{ grid-template-columns: 1fr; text-align: center; }
  .callout__thumb{ margin: 0 auto; }
}
/* iOS 등에서 background-attachment fixed 이슈 보정 */
@supports (-webkit-touch-callout: none){
  .fig-parallax__bg{ background-attachment: scroll; }
}