/* [E-08] ============================================================ page-abou */

.sec-who, .sec-why, .sec-what, .sec-closing, .abv { --pad-170: clamp(64px, 8.85vw, 170px); }

#main { position: relative; }

/* 시안이 정의한 줄바꿈은 넓은 폭에서만 지킨다 */
@media (min-width: 1024px) { .nowrap-lg { white-space: nowrap; } }

/* 본문 덩어리 — 시안의 빈 줄 = 한 줄 높이 만큼의 문단 간격 */
.prose {
  display: flex; flex-direction: column;
  font-size: var(--fs-body); line-height: 1.8; font-weight: 500;
  color: var(--ink-2);
  gap: 1.8em;
}
.prose--center { text-align: center; }
.prose--items-center { align-items: center; }

/* 형광펜 밑줄 헤딩 (36:471 / 36:479 / 36:529) */
.mark-title { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); width: 100%; }
.mark-h {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px;
  font-size: var(--fs-h2); line-height: 1; font-weight: 700; text-align: center;
}
.mark {
  position: relative; isolation: isolate; display: inline-block;
  padding-inline: .17em; line-height: 1;
  color: var(--brand-cta); background: var(--white);
}
.mark--pink { background: var(--tint-pink); }
.mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: .267em; background: rgba(227, 84, 87, .3);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-out) calc(var(--d, 0ms) + 180ms);
}
.is-in .mark::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .mark::after { transform: scaleX(1); } }

/* 리드 문장 (Gmarket Light 30 / lh 1.6) */
.lead-lg {
  font-size: clamp(16px, 1.56vw, 30px); line-height: 1.6; font-weight: 300;
  color: var(--ink); text-align: center;
}

/* ---------------- visual 36:437 (1920x400 · bg #e35457) ---------------- */
.abv {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand-cta); color: var(--white);
  min-height: clamp(180px, 20.83vw, 400px);
  display: flex; align-items: center;
}
/* 36:448 — 좌측 세로 중앙, opacity .7 (거의 투명한 질감 레이어) */
.abv__bg {
  /* 시안: absolute · left 0 · 480×500 · 세로 중앙 · opacity .70.
     세로 중앙을 transform 으로 잡으면 [data-parallax] 의 transform 이 그걸 덮는다 —
     transform 을 쓰지 않는 auto-margin 중앙 정렬로 둔다. */
  position: absolute; left: 0; top: 0; bottom: 0; margin-block: auto;
  width: clamp(160px, 25vw, 480px); height: clamp(167px, 26.04vw, 500px);
  object-fit: cover; object-position: left center;
  opacity: .7; z-index: 0; pointer-events: none;
}
.abv__inner {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md);
  /* 시안 36:438 — pr 100 (캐릭터 우측 끝이 1760 이 아니라 1660 이다) */
  padding-right: calc(var(--gutter) + clamp(0px, 5.21vw, 100px));
}
.abv__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-md); min-width: 0; }
.abv__title { font-size: clamp(26px, 3.96vw, 76px); line-height: 1; font-weight: 700; white-space: nowrap; }
.abv__char { flex: 0 0 auto; width: clamp(96px, 14.01vw, 269px); height: auto; }

@media (max-width: 767px) {
  .abv__inner { padding-right: var(--gutter); }
  .abv__char { display: none; }
  .abv-sh--p2 { display: none; }
}
@media (max-width: 479px) {
  .abv__bg { opacity: .35; }
}

/* ---------------- WHO·WHY 배경 라인 36:362 ---------------- */
.about-story { position: relative; overflow: hidden; }
.page-deco {
  /* stroke-linecap:round 캡이 시작·끝에서 점처럼 보이지 않도록 클립 여유 */
  --deco-cap-bleed: 12px;
  top: calc(-1 * var(--deco-cap-bleed));
  left: 50%;
  translate: -50% 0;
  width: 84.53%;
  max-width: 1165px;
  height: calc(100% + var(--deco-cap-bleed) * 2);
  min-height: calc(100% + var(--deco-cap-bleed) * 2);
  z-index: 0;
  color: rgba(51, 0, 0, 0.04);
  overflow: visible;
  opacity: 0;
}
.page-deco.is-ready { opacity: 1; }
.page-deco__path {
  fill: none;
  stroke: currentColor;
  stroke-width: 11.9177;
  stroke-miterlimit: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
}
@media (prefers-reduced-motion: reduce) {
  .page-deco { opacity: 1; }
  .page-deco__path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}
@media (max-width: 767px) { .page-deco { display: none; } }

/* ---------------- 1 · WHO 36:468 ---------------- */
.sec-who { padding-block: var(--sec-y) var(--pad-170); overflow: visible; }
.sec-who__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gap-xl); text-align: center;
}

/* ---------------- 2 · WHY 36:476 ---------------- */
.sec-why { padding-block: var(--pad-170); }
.sec-why__inner { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); }

/* 3카드 — 가운데 카드만 150 내려앉은 계단형. 카드 높이는 서로 같게 유지한다(시안 570). */
.why__cards {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch;
  gap: clamp(16px, 2.08vw, 40px); width: 100%;
  padding-bottom: clamp(0px, 7.81vw, 150px);
}
.why__col { min-width: 0; display: flex; }
.why__col--mid { position: relative; top: clamp(0px, 7.81vw, 150px); }
.why__card {
  flex: 1 1 auto; border-radius: var(--r-lg);
  padding: clamp(28px, 3.65vw, 70px) clamp(20px, 2.6vw, 50px);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-lg);
  min-height: clamp(0px, 29.69vw, 570px);
  transition: transform var(--mo-base) var(--ease-out), box-shadow var(--mo-base) var(--ease-out);
}
.why__card:hover { box-shadow: 0 22px 44px rgba(0, 0, 0, .10); }
.why__card--violet { background: var(--tint-violet); }
.why__card--sky    { background: var(--tint-sky); }
.why__card--amber  { background: var(--tint-amber); }
.why__icon { width: auto; height: clamp(44px, 3.65vw, 70px); }
.why__h { font-size: var(--fs-h3); line-height: 1.4; font-weight: 700; color: var(--ink); }

@media (max-width: 960px) {
  .why__cards { grid-template-columns: 1fr; justify-items: center; gap: 24px; padding-bottom: 0; }
  .why__col { max-width: 573px; width: 100%; }
  .why__col--mid { top: 0; }
  .why__card { min-height: 0; width: 100%; }
}
@media (max-width: 479px) {
  .why__card { padding: 24px; gap: var(--gap-md); }
  .why__icon { height: 56px; }
}

/* ---------------- 3 · WHAT 36:524 (핑크 1920x1420 + 물결 36:555) ---------------- */
.sec-what {
  position: relative; z-index: 1;
  background: var(--tint-pink);
  padding-block: var(--pad-170);
}
.sec-what__inner { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); }

.what__cards { display: flex; gap: clamp(16px, 2.08vw, 40px); width: 100%; }
.what__card {
  flex: 1 1 0; min-width: 0;
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(28px, 3.65vw, 70px) clamp(20px, 2.6vw, 50px);
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-lg);
  transition: transform var(--mo-base) var(--ease-out), box-shadow var(--mo-base) var(--ease-out);
}
.what__card:hover { transform: translateY(-10px); box-shadow: 0 24px 44px rgba(0, 0, 0, .08); }
.what__card:last-child { align-self: stretch; }
.what__img { width: auto; height: clamp(120px, 10.42vw, 200px); }
.what__text { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); width: 100%; }
.what__badge {
  background: var(--brand-cta); color: var(--white); border-radius: var(--r-pill);
  padding: clamp(7px, .52vw, 10px) clamp(18px, 1.56vw, 30px);
  padding-top: calc(clamp(7px, .52vw, 10px) + var(--optical-y)); /* Gmarket Sans optical center */
  font-size: clamp(15px, 1.04vw, 20px); line-height: 1; font-weight: 700;
}
.what__h { font-size: clamp(20px, 1.56vw, 30px); line-height: 1.2; font-weight: 700; color: var(--ink); text-align: center; }

/* 물결 — page-about · page-class 공용 스타일은 core.css */

@media (max-width: 960px) {
  .what__cards { flex-direction: column; align-items: center; gap: 24px; }
  .what__card { max-width: 573px; width: 100%; }
  .what__card:last-child { align-self: auto; }
}
@media (max-width: 767px) {
  .sec-what { padding-block: clamp(56px, 13vw, 100px); }
}
@media (max-width: 479px) {
  .what__card { padding: 24px; gap: var(--gap-md); }
}

/* ---------------- 4 · closing 36:561 ---------------- */
/* 캐릭터는 프레임 아래(footer 쪽)로 넘치도록 두되, 가로 넘침은 잘라낸다 */
.sec-closing { position: relative; padding-block: var(--pad-170) var(--sec-y); overflow-x: clip; overflow-y: clip; }
.closing__inner { position: relative; }
.closing__copy {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); text-align: center;
}
.closing__title { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 2.08vw, 40px); }
.closing__h { font-size: var(--fs-h2); line-height: 1.4; font-weight: 700; color: var(--ink); }
.closing__end {
  font-size: clamp(16px, 1.56vw, 30px); line-height: 1.6; font-weight: 500;
  color: var(--ink-2); text-align: center;
}
@media (min-width: 768px) {
  .closing__title .closing__end { font-size: clamp(16px, 1.35vw, 25px); }
}

/* 캐릭터·장식 — 시안 36:561 (1600 기준) · copy 아래 relative 영역 */
.closing__chars {
  position: relative;
  z-index: 1;
  pointer-events: none;
  bottom: calc(-1 * var(--sec-y));
}
.closing__chars .ch { position: absolute; height: auto; max-width: 100%; top: auto; }

/* ≥1921px — 시안 고정 px (36:561 @1600) */
@media (min-width: 1921px) {
  .closing__chars .ch--dodo  { left: 29px;   bottom: -2px; width: 167px; height: auto; }
  .closing__chars .ch--jack  { left: 188px;  bottom: -2px; width: 177px; height: auto; }
  .closing__chars .ch--green { right: -3.3%; bottom: -2px; width: 468px; height: auto; left: auto; }
  .closing__chars .ch--s1    { left: 5.69%;  bottom: 400px; width: 114px; height: auto; }
  .closing__chars .ch--s2    { right: 9.81%; bottom: 470px; width: 122px; height: auto; left: auto; transform: none; }
  .closing__chars .ch--s3    { right: -48px; bottom: 515px; width: 122px; height: auto; left: auto; rotate: 11.15deg; transform: none; }
}

/* ≤1920px — width·bottom vw(1920=시안px) · left/right % (1600 컨테이너 비율) */
@media (max-width: 1920px) {
  .closing__chars .ch--dodo  { left: 1.8125%; bottom: -0.104166667vw; width: 8.697916667vw; height: auto; }
  .closing__chars .ch--jack  { left: 11.75%;  bottom: -0.104166667vw; width: 9.21875vw;     height: auto; }
  .closing__chars .ch--green { right: -3.3%; bottom: -0.104166667vw; width: 24.375vw; height: auto; left: auto; }
  .closing__chars .ch--s1    { left: 5.69%;  bottom: 20.833333333vw; width: 5.9375vw;     height: auto; rotate: none; }
  .closing__chars .ch--s2    { right: 9.81%; bottom: 24.479166667vw; width: 6.354166667vw; height: auto; left: auto; rotate: none; transform: none; }
  .closing__chars .ch--s3    { right: -3%; bottom: 26.822916667vw; width: 6.354166667vw; height: auto; left: auto; rotate: 11.15deg; transform: none; }
}

@media (max-width: 1023px) {
  .sec-closing { padding-bottom: 0; }
  .closing__inner {
    display: flex; flex-direction: column;
    gap: clamp(24px, 5vw, 48px);
    min-height: clamp(420px, 62vw, 640px);
  }
  .closing__chars {
    margin-top: auto;
    bottom: 0;
    padding-top: 10vw;
    display: flex; align-items: flex-end; justify-content: center;
    gap: clamp(8px, 2vw, 20px);
    width: 100%;
  }
  /* 캐릭터 3 — flex 흐름 · vw 축소(1920 기준) 유지 */
  .closing__chars .ch--dodo,
  .closing__chars .ch--jack,
  .closing__chars .ch--green {
    position: static; bottom: auto; left: auto; right: auto; rotate: none;
    width: 8.697916667vw;
  }
  .closing__chars .ch--jack  { width: 9.21875vw; }
  .closing__chars .ch--green { width: 24.375vw; }
  /* 구름 — 컨테이너 기준 absolute · bottom/right·left */
  .closing__chars .ch--s1,
  .closing__chars .ch--s2,
  .closing__chars .ch--s3 {
    position: absolute;
  }
  .closing__chars .ch--s1 { left: 11.69%; bottom: 20.833333333vw; width: 7.9375vw; rotate: none; }
  .closing__chars .ch--s2 { right: 19.81%; bottom: 24.479166667vw; width: 9.354167vw; left: auto; rotate: none; transform: none; }
  .closing__chars .ch--s3 { right: 4%; bottom: 18.822917vw; width: 9.354167vw; left: auto; rotate: 11.15deg; transform: none; }
}
@media (max-width: 479px) {
  .closing__chars .ch--dodo,
  .closing__chars .ch--jack { display: none; }
}

/* 좁은 폭 제목 크기 (시안 반응 의도: 768→30 / 390→24) */
@media (max-width: 767px) {
  .mark-h, .closing__h { font-size: 30px; }
  .lead-lg { font-size: 18px; }
}
@media (max-width: 479px) {
  .mark-h, .closing__h { font-size: 24px; }
  .lead-lg { font-size: 16px; }
  .closing__end { font-size: 18px; }
}

/* ---- 장식 도형 4개 — 시안 get_design_context 실측 (중심 % + 회전) ---- */
.abv-sh--sq1 { left: 90.52%; top: 67.0%; --rot: 0deg; }
.abv-sh--sq2 { left: 71.62%; top: 28.0%; --rot: -26.9deg; }
.abv-sh--p1 { left: 89.51%; top: 25.91%; --rot: -34.04deg; }
.abv-sh--p2 { left: 64.62%; top: 61.16%; --rot: 22.55deg; }