.sec-about__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  align-items:center;
}

/* 제목은 기본적으로 1행 전체폭 */
.sec-about__head{grid-column:1 / -1}

/* --about-ratio 는 blade 가 인라인으로 넣는다. 없으면 4/3
   ⚠️ max-height 를 걸지 않으면 세로 비율에서 화면을 넘어간다 */
.sec-about__media img{
  display:block;
  width:100%;
  height:auto;
  max-height:620px;
  aspect-ratio:var(--about-ratio, 4/3);
  object-fit:cover;
  border-radius:var(--radius);
  object-position:center top;
}

.sec-about__text{color:var(--c-text-sub)}
.sec-about__text p+p{margin-top:1em}
/* 본문 하단 이미지 — 서명·인증마크 등 */
.sec-about__body-img{
  display:block;
  width:var(--body-img-w, 180px);
  max-width:100%;
  height:auto;
  margin-top:24px;
}


.sec-about__actions{margin-top:32px}
.sec-about__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 34px;
  background:var(--c-primary);
  color:#fff;
  border-radius:var(--btn-radius);
  font-size:var(--fs-sm);
  font-weight:700;
  text-decoration:none;
  transition:background var(--tr);
}
.sec-about__btn svg{width:16px;height:16px;transition:var(--tr)}
.sec-about__btn:hover{background:var(--c-primary-d)}
.sec-about__btn:hover svg{transform:translateX(3px)}

/* --a  이미지 좌 (기본) */

/* --b  이미지 우 */
.sec-about--b .sec-about__media{grid-column:2;grid-row:2}
.sec-about--b .sec-about__content{grid-column:1;grid-row:2}

/* --c  이미지 없이 중앙 정렬 */
.sec-about__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  align-items:start;
}
.sec-about--c .sec-about__media{display:none}

/* ========== --d / --e  전체폭 분할 + 컬러 패널 ========== */
/* --d 이미지 좌측 · --e 이미지 우측. 배치만 다르고 나머지는 공통 */
.sec-about--d,
.sec-about--e{padding:0}

.sec-about--d .sec__inner,
.sec-about--e .sec__inner{max-width:none;padding:0}

.sec-about--d .sec-about__grid,
.sec-about--e .sec-about__grid{
  gap:0;
  align-items:stretch;
}

/* 컬러 패널 — 래퍼를 더 만들지 않기 위해 그라데이션으로 반쪽만 칠한다 */
.sec-about--d .sec-about__grid{
  background:linear-gradient(to right, transparent 50%, var(--c-about-panel, #16325c) 50%);
}
.sec-about--e .sec-about__grid{
  background:linear-gradient(to right, var(--c-about-panel-alt, #1355be) 50%, transparent 50%);
}

.sec-about--d .sec-about__head,
.sec-about--e .sec-about__head{
  grid-row:1;
  align-self:end;
  padding:clamp(48px, 6vw, 90px) clamp(28px, 5vw, 80px) 0;
  margin:0;
}
.sec-about--d .sec-about__head{grid-column:2}
.sec-about--e .sec-about__head{grid-column:1}

/* 왼쪽 정렬 — base 의 중앙 정렬을 개별 요소까지 되돌린다 */
.sec-about--d .sec-about__head,
.sec-about--d .sec-about__head .sec__eyebrow,
.sec-about--d .sec-about__head .sec__title,
.sec-about--d .sec-about__head .sec__desc,
.sec-about--e .sec-about__head,
.sec-about--e .sec-about__head .sec__eyebrow,
.sec-about--e .sec-about__head .sec__title,
.sec-about--e .sec-about__head .sec__desc{
  text-align:left;
  margin-left:0;
  margin-right:auto;
  max-width:none;
}

.sec-about--d .sec-about__head .sec__title::after,
.sec-about--d .sec-about__head .sec__title::before,
.sec-about--e .sec-about__head .sec__title::after,
.sec-about--e .sec-about__head .sec__title::before{
  margin-left:0;
  margin-right:auto;
  left:0;
  transform:none;
}

.sec-about--d .sec-about__media,
.sec-about--e .sec-about__media{grid-row:1 / 3}
.sec-about--d .sec-about__media{grid-column:1}
.sec-about--e .sec-about__media{grid-column:2}

.sec-about--d .sec-about__media img,
.sec-about--e .sec-about__media img{
  height:100%;
  min-height:520px;
  aspect-ratio:auto;
  border-radius:0;
}

.sec-about--d .sec-about__content,
.sec-about--e .sec-about__content{
  grid-row:2;
  align-self:start;
  padding:24px clamp(28px, 5vw, 80px) clamp(48px, 6vw, 90px);
}
.sec-about--d .sec-about__content{grid-column:2}
.sec-about--e .sec-about__content{grid-column:1}

.sec-about--d .sec__eyebrow,
.sec-about--e .sec__eyebrow{color:var(--c-point)}
.sec-about--d .sec__title,
.sec-about--e .sec__title{color:#fff}
.sec-about--d .sec__desc,
.sec-about--d .sec-about__text,
.sec-about--e .sec__desc,
.sec-about--e .sec-about__text{color:rgba(255,255,255,.78)}

.sec-about--d .sec__hl,
.sec-about--e .sec__hl{color:var(--c-primary-l)}

.sec-about--d .sec-about__btn,
.sec-about--e .sec-about__btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.5);
}
.sec-about--d .sec-about__btn:hover,
.sec-about--e .sec-about__btn:hover{
  background:rgba(255,255,255,.12);
  border-color:#fff;
}

@media (max-width:1024px){
  .sec-about__grid{grid-template-columns:1fr;gap:28px}
  .sec-about--b .sec-about__media,
  .sec-about--b .sec-about__content{grid-column:1;grid-row:auto}

 .sec-about--d .sec-about__grid{
    background:var(--c-about-panel, #16325c);
  }
  .sec-about--e .sec-about__grid{
    background:var(--c-about-panel-alt, #1355be);
  }
  .sec-about--d .sec-about__head,
  .sec-about--d .sec-about__media,
  .sec-about--d .sec-about__content,
  .sec-about--e .sec-about__head,
  .sec-about--e .sec-about__media,
  .sec-about--e .sec-about__content{grid-column:1;grid-row:auto}
  .sec-about--d .sec-about__media,
  .sec-about--e .sec-about__media{order:-1}
  .sec-about--d .sec-about__media img,
  .sec-about--e .sec-about__media img{min-height:0;aspect-ratio:16/9}
  .sec-about--d .sec-about__head,
  .sec-about--e .sec-about__head{padding:40px 24px 0}
  .sec-about--d .sec-about__content,
  .sec-about--e .sec-about__content{padding:20px 24px 48px}
}