/* =====================================================================
   달비서 캐릭터, 하위 페이지 네 자리 (2026-10-08 대표 「사이트에 넓혀 보자」, 법인설립은 같은 날 추가 지정)
   랜딩 한 자리는 character.css 가 맡고, 이 파일은 아래 네 자리만 맡는다.
     수임계약 가이드  유형 고르기 전 빈 화면     02 서류 내밀기
     수임계약서       첫 안내문 옆               03 양손으로 내밀기
     세무 팁          카드 묶음 바로 위          05 손바닥 안내 (손을 그려 넣은 판)
     법인설립 가이드  10단계 체크리스트 머리말   04 노트북 작업
   넣지 않는 자리: 파란 머리 구역(곱하기 합성이 그림을 파랗게 물들인다),
     금액·조건·기한 자리(CONCEPT.md Avoid, 법인설립 수수료표 포함), 사무소 소개(대표 실사 사진 옆).
   되돌리기: 각 페이지의 이 파일 링크 한 줄과 .dal-guide 블록을 걷어 낸다.
   선택자는 전부 .dal-guide 아래에 묶었다. 이 클래스는 위 네 페이지에만 있다.
   ===================================================================== */

/* 허리에서 잘린 그림이라 바닥을 아래 선에 붙인다. 카운터 뒤에 서 있는 것처럼 읽힌다 */
.dal-guide{
  display:flex;align-items:flex-end;gap:clamp(12px,3vw,28px);
  text-align:left;
  border-bottom:1px solid var(--wds-line-normal);
}
.dal-guide .dal-guide__text{flex:1 1 auto;min-width:0;padding-bottom:20px}

/* 이름표. 주색은 답과 기한에만 쓰므로(CONCEPT Visual behavior) 중립색. 바탕 #F7F7F8 위 8.67:1 */
.dal-guide .dal-guide__name{
  display:block;margin-bottom:6px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--wds-label-neutral);
}
.dal-guide .dal-guide__line{margin:0;font-size:16px;line-height:1.6;color:var(--wds-label-neutral)}

.dal-guide .dal-guide__fig{flex:0 0 auto;margin:0;width:clamp(96px,14vw,150px)}
/* 바탕이 #F7F7F8 이라 그림의 순백 배경이 네모로 보인다. 곱하기 합성으로 녹인다(랜딩과 같은 방식).
   자산을 만들 때 세 채널 248 이상을 255 로 맞춰 두어 배경이 바탕색과 정확히 같아진다 */
.dal-guide .dal-guide__fig img{display:block;width:100%;height:auto;mix-blend-mode:multiply}

/* 손바닥 안내 판은 가로로 넓어 같은 폭이면 작아 보인다 */
.dal-guide--tips .dal-guide__fig{width:clamp(110px,16vw,180px)}

/* 수임계약 가이드: 빈 화면 상자가 가운데 정렬·위아래 48px 이라 글 시작선만 왼쪽으로 돌린다.
   유형을 고르면 스크립트가 상자째 display:none 으로 숨기므로 캐릭터도 같이 사라진다 */
#select-prompt .dal-guide{max-width:640px;margin:0 auto}
/* 원래 안내 문장은 빈 화면용 연회색(상자 인라인 color:var(--text-light), 불투명도 .28)이라 #F7F7F8 위 대비가 기준에 크게 못 미쳤다.
   캐릭터가 붙으면서 이 문장이 대사가 되므로 이름표와 같은 중립색으로 올린다 */
#select-prompt .dal-guide__text{color:var(--wds-label-neutral)}

/* 수임계약서: 안내문 상자는 파란빛 바탕이라 캐릭터를 상자 밖에 세운다. 상자 아래 여백은 선까지의 여백으로 바꾼다 */
.dal-guide--contract .alert-box{margin-bottom:0}
.dal-guide--contract{margin-bottom:24px}

/* 세무 팁: 카드 묶음과 붙지 않게 */
.dal-guide--tips{margin-bottom:28px}

/* 법인설립: 머리말이 가운데 정렬이라 블록도 가운데 720px 안에 둔다. 1100px 를 다 쓰면 대사와 그림이 너무 멀어진다.
   노트북 판은 책상까지 그려져 가로로 넓다. 같은 폭이면 얼굴이 작아져 한 단계 키운다.
   그림 아래 책상 앞쪽이 이 블록의 1px 선 위에 놓인다(그림 밑 흰 여백은 자산을 만들 때 잘라 냈다) */
.dal-guide--incorp{max-width:720px;margin:0 auto 36px}
.dal-guide--incorp .dal-guide__fig{width:clamp(120px,18vw,190px)}

@media (max-width:560px){
  .dal-guide{gap:10px}
  .dal-guide .dal-guide__text{padding-bottom:14px}
  .dal-guide .dal-guide__fig{width:88px}
  .dal-guide--tips .dal-guide__fig{width:100px}
  .dal-guide--incorp .dal-guide__fig{width:104px}
}

/* 수임계약서는 서명 후 인쇄(PDF 저장)를 한다. 계약서 종이에 캐릭터가 찍히면 안 된다 */
@media print{
  .dal-guide .dal-guide__fig,.dal-guide .dal-guide__name{display:none !important}
  .dal-guide{border-bottom:0}
}