/* =====================================================================
   달비서 캐릭터 시험 (2026-10-08, 대표 지시 「한 곳만 시험」)
   자리: 랜딩 「맡기시면 이렇게 진행됩니다」 하나뿐이다.
   되돌리기: index.html 의 이 파일 링크 한 줄, figure 블록, ptg-intro--guide 클래스를 걷어 낸다.
   컨셉 문서 Avoid 「캐릭터 없음」과 충돌하는 시험이라 확정 전에는 다른 자리로 넓히지 않는다.
   선택자는 전부 .ptg-intro--guide 아래에 묶었다. 이 클래스는 랜딩에만 있다.
   ===================================================================== */

.ptg-intro.ptg-intro--guide{
  display:flex;align-items:flex-end;gap:clamp(12px,3vw,32px);
  text-align:left;padding-bottom:0;
}
.ptg-intro--guide .ptg-intro__text{flex:1 1 auto;min-width:0;padding-bottom:28px}

/* 「달비서가 안내해 드립니다」. 주색은 답과 기한에만 쓰므로(CONCEPT Visual behavior) 중립색으로 둔다 */
.ptg-intro--guide .ptg-guide__name{
  display:block;margin-bottom:6px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--wds-label-neutral);
}

/* 허리에서 잘린 그림이라 바닥을 아래 설정 상자 윗변에 붙인다. 상자 뒤에 서 있는 것처럼 읽힌다 */
.ptg-intro--guide .ptg-guide{flex:0 0 auto;width:clamp(112px,22vw,220px);margin:0}
/* 이 구역 바탕은 #F7F7F8 이라 그림의 순백 배경이 네모로 보인다.
   배경을 알파로 따내면 흰 셔츠 둘레를 건드리게 되므로 곱하기 합성으로 바탕색에 녹인다.
   자산을 만들 때 거의 흰 픽셀을 255 로 맞춰 두었으므로 배경은 바탕색과 정확히 같아진다 */
.ptg-intro--guide .ptg-guide img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.ptg-intro--guide + .ptg-setup{margin-top:0}

@media (max-width:560px){
  .ptg-intro.ptg-intro--guide{gap:10px}
  .ptg-intro--guide .ptg-intro__text{padding-bottom:18px}
  .ptg-intro--guide .ptg-intro__text h2{font-size:23px}
}