/* ============================================================
   서비스 소개 탭 전용 — style.css → layout.css 다음에 읽는다.
   원칙: 작은 회색 라벨을 쓰지 않는다. 제목은 본문 크기 이상.
   ============================================================ */

/* ── 비교표 ─────────────────────────────────────────────── */
/* 항목명은 모두 짧고 오른쪽 열의 글이 길어져, 라벨 칸을 줄이고 오른쪽을 넓힌다. */
.vs-table{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr) minmax(0,1.25fr);
  margin-top:clamp(36px,4.5vw,60px)}
.vs-table>div{
  padding:clamp(17px,2vw,23px) clamp(14px,1.8vw,24px);
  border-bottom:1px solid var(--hair);display:flex;align-items:center;
  font-size:16px;line-height:1.65;letter-spacing:-.025em;
}
.vs-table>div:nth-child(3n+1){padding-left:0;font-weight:700;letter-spacing:-.035em;color:var(--navy)}
.vs-table>div:nth-child(3n+2){color:var(--ink-3)}
.vs-table>div:nth-child(3n){background:var(--tint-2);color:var(--navy);font-weight:600}
.vs-table>.hd{
  font-size:clamp(17px,1.8vw,21px);font-weight:700;letter-spacing:-.035em;
  color:var(--navy);border-bottom:2px solid var(--navy);
  align-items:flex-end;padding-bottom:18px;
}
.vs-table>.hd.gold{border-bottom-color:var(--gold)}
.vs-table>.hd:first-child{border-bottom-color:var(--hair)}

/* ── 왼쪽 카드가 오른쪽 항목을 따라간다 ────────────────── */
.sync-card{position:relative;max-width:216px;aspect-ratio:1/1;border-radius:24px;overflow:hidden;
  margin-top:clamp(26px,3vw,38px)}
.sync-card .face{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transform:scale(1.05);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
}
.sync-card .face.on{opacity:1;transform:none}
.sync-card svg{width:46%;height:auto;color:var(--navy);opacity:.82}
.sync-meter{display:flex;align-items:center;gap:12px;margin-top:22px;max-width:216px}
.sync-meter .track{flex:1;height:2px;background:var(--hair);position:relative;overflow:hidden}
.sync-meter .track i{position:absolute;inset:0;background:var(--gold);transform-origin:left;
  transform:scaleX(var(--p,0));transition:transform .5s cubic-bezier(.22,.61,.36,1)}

/* 번호 없는 2단 리스트 */
.list.plain .li{grid-template-columns:minmax(140px,208px) minmax(0,1fr)}

/* ── 탭 ─────────────────────────────────────────────────── */
.tabs{position:relative;display:flex;border-bottom:1px solid var(--hair);
  margin-top:clamp(30px,4vw,48px)}
.tabs button{flex:1;padding:19px 10px;text-align:left;font-size:16px;font-weight:600;
  color:var(--ink-4);transition:color .2s;letter-spacing:-.03em;line-height:1.45}
.tabs button:hover{color:var(--ink-2)}
.tabs button.on{color:var(--navy)}
.tabs .ink{position:absolute;bottom:-1px;left:0;height:2px;background:rgba(190,156,95,.28);
  width:var(--w,20%);transform:translateX(var(--x,0));overflow:hidden;
  transition:transform .42s cubic-bezier(.22,.61,.36,1),width .42s cubic-bezier(.22,.61,.36,1)}
/* 자동 전환까지 남은 시간을 밑줄이 채워지며 보여준다 */
.tabs .ink-p{display:block;width:100%;height:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left}
.panels{margin-top:clamp(34px,4vw,54px)}
.panel{display:none}
.panel.on{display:block;max-width:760px;animation:pin .5s cubic-bezier(.22,.61,.36,1)}
@keyframes pin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel h3{font-size:clamp(21px,2.4vw,30px);letter-spacing:-.042em;margin-bottom:22px;line-height:1.35}
.panel p{font-size:17px;color:var(--ink-2);line-height:1.92}
.panel p+p{margin-top:18px}

.statement{
  min-height:62vh;                      /* 한 화면을 다 먹지 않으면서 가운데를 확보한다 */
  display:grid;place-items:center;
  padding:clamp(64px,8vw,120px) 0;
  text-align:center;
}
.statement .wrap{width:100%}
.statement .st-q{
  font-size:clamp(24px,3.6vw,48px);font-weight:700;letter-spacing:-.05em;
  line-height:1.42;color:var(--navy);max-width:22ch;margin-inline:auto;
}
/* 앞줄은 뒤로 물러나고, 뒷줄은 금색이 왼쪽부터 채워진다. --p 는 service.js 가 넣는다. */
.st-dim{opacity:calc(1 - var(--p,0) * .58)}
.st-hl{
  background:linear-gradient(90deg,#F0E3C8 0 calc(var(--p,0) * 100%),transparent 0) no-repeat;
  background-size:100% .56em;background-position:0 86%;padding:0 .1em;
}
@media (max-width:820px){
  /* 위아래 빈 자리를 넉넉히 둬서 이 문장만 화면에 잠깐 남게 한다. */
  .statement{min-height:66vh;padding:clamp(72px,14vw,120px) 0}
  .statement .st-q{max-width:none;font-size:28px;line-height:1.4}
}

.sec-tint{background:var(--tint)}

@media (max-width:820px){
  /* 표를 풀어 항목마다 한 덩어리로. 항목명 아래 일반 → 우리 순서로 두 줄이 온다.
     라벨은 74px 고정폭이라 두 줄의 문장 시작점이 세로로 맞는다. */
  .vs-table{display:block;margin-top:clamp(28px,6vw,44px)}
  .vs-table>.hd{display:none}
  .vs-table>div{display:block;border-bottom:0;padding:0}

  .vs-table>div:nth-child(3n+1){
    border-top:1px solid var(--hair);margin-top:19px;padding-top:19px;
    font-size:17px;letter-spacing:-.04em;
  }
  .vs-table>div:nth-child(4){border-top:0;margin-top:0;padding-top:0}

  /* 라벨을 ::before 로 흘려 두면 내용이 두 줄이 될 때 둘째 줄이 라벨 아래로
     내려간다. 격자로 묶어 둘째 줄도 내용 시작점에 맞춘다. */
  .vs-table>div:nth-child(3n+2),
  .vs-table>div:nth-child(3n){
    font-size:15.5px;line-height:1.72;padding:6px 0;background:none;
    display:grid;grid-template-columns:86px minmax(0,1fr);align-items:start;
  }
  .vs-table>div:nth-child(3n+2){margin-top:9px;color:var(--ink-3);font-weight:400}
  .vs-table>div:nth-child(3n){color:var(--navy);font-weight:600}
  .vs-table>div:nth-child(3n+2)::before,
  .vs-table>div:nth-child(3n)::before{
    font-size:15.5px;font-weight:400;
  }
  .vs-table>div:nth-child(3n+2)::before{content:"일반 중개";color:var(--ink-3)}
  .vs-table>div:nth-child(3n)::before{content:var(--brand,"이 서비스");color:var(--gold-dk)}
  /* 스크롤에 맞춰 바뀌는 카드인데 sticky 가 풀리면 그냥 그림 하나가 된다. */
  .sync-card,.sync-meter{display:none}
  /* layout.css 가 모바일에서도 본문을 2열에 못 박아, 제목 길이에 따라
     본문 시작점이 항목마다 달라졌다. 한 열로 세워 시작점을 맞춘다. */
  .list.plain .li{grid-template-columns:1fr;gap:7px 0}
  .list.plain .li p{grid-column:1}
  /* 탭 대신 아코디언. 작은 화면에서 5초마다 글이 바뀌면 읽는 중에 사라진다. */
  .tabs{display:none}
  .panels{margin-top:8px}
  .panel{display:block;max-width:none;animation:none;border-top:1px solid var(--hair)}
  .panel h3{
    margin:0;padding:19px 34px 19px 0;position:relative;cursor:pointer;
    font-size:17.5px;line-height:1.45;letter-spacing:-.035em;
  }
  .panel h3::after{
    content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
    margin-top:-6px;
    background:
      linear-gradient(var(--ink-3),var(--ink-3)) center/13px 1.5px no-repeat,
      linear-gradient(var(--ink-3),var(--ink-3)) center/1.5px 13px no-repeat;
    transition:transform .25s ease;
  }
  .panel.open h3{color:var(--gold-dk)}
  .panel.open h3::after{   /* 세로 획만 지워 − 가 되게 한다 */
    background:linear-gradient(var(--gold-dk),var(--gold-dk)) center/13px 1.5px no-repeat;
  }
  .panel>p{display:none;font-size:15.5px}
  .panel.open>p{display:block}
  .panel.open>p:last-child{padding-bottom:22px}
}


/* ── Sotheby's 참고 · 짧은 금색 선을 본문 왼쪽에 나란히 ── */
/* 본문 컬럼을 더 좁게 *//* 좌측 제목 아래 설명 — 작은 회색 라벨이 아니라 본문 크기로 */


/* 절차 · 번호를 뺀 대신 제목을 키운다 */
.sec .step h4{font-size:clamp(17px,1.8vw,20px);margin-bottom:12px}
.sec .step{padding-top:28px}


/* ── 진행 절차 · 스크롤 따라 차오르는 세로 트랙 ─────────
   단계별로 따로 그리지 않고 선 하나가 위에서 아래로 채워진다.
   선이 지나간 노드가 켜져서 실제로 진행되는 느낌이 난다. */
.flow{position:relative;margin-top:clamp(34px,4vw,54px)}
.flow-track{position:absolute;left:6.7px;top:10px;bottom:14px;width:1.6px;
  background:var(--hair);overflow:hidden}
.flow-fill{display:block;width:100%;height:100%;background:var(--gold);
  transform:scaleY(0);transform-origin:top}

.fstep{
  position:relative;display:grid;
  grid-template-columns:34px minmax(0,1fr);
  column-gap:14px;
  padding-bottom:clamp(30px,3.6vw,46px);
}
.fstep:last-child{padding-bottom:0}
.fstep::before{
  content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;
  background:#fff;box-shadow:inset 0 0 0 1.5px var(--hair);z-index:2;transition:box-shadow .35s ease;
}
.sec-tint .fstep::before{background:var(--tint)}
.fstep.lit::before{box-shadow:inset 0 0 0 4.5px var(--gold)}

.fstep h4{grid-column:2;font-size:clamp(18px,1.95vw,22px);letter-spacing:-.038em;
  line-height:1.4;color:var(--ink-3);transition:color .35s ease}
.fstep.lit h4{color:var(--navy)}
.fstep p{grid-column:2;margin-top:10px;font-size:16.5px;color:var(--ink-2);
  line-height:1.85;letter-spacing:-.02em}

@media (max-width:820px){
  .fstep{grid-template-columns:28px minmax(0,1fr);column-gap:10px}
  .fstep h4{font-size:18px}
  .fstep p{font-size:15.5px}
}

/* ── 중개보수 표 ────────────────────────────────────────── */
/* ── 진행 절차 · 세로 타임라인 ──────────────────────────
   가로 5열은 좌-우 2단 안에서 컬럼이 100px 밖에 안 나와
   글자가 세로로 늘어진다. 세로로 흘리는 편이 읽기도 낫다. */
.flow{margin-top:clamp(34px,4vw,54px)}
.fstep{
  position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);
  padding-bottom:clamp(28px,3.4vw,42px);
}
.fstep:last-child{padding-bottom:0}

/* 노드 */
.fstep::before{
  content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;
  background:#fff;box-shadow:inset 0 0 0 1.5px var(--hair);z-index:2;
  transition:box-shadow .4s cubic-bezier(.22,.61,.36,1) var(--d,0s);
}
.fstep.in::before{box-shadow:inset 0 0 0 4.5px var(--gold)}
.sec-tint .fstep::before{background:var(--tint)}

/* 다음 노드로 잇는 세로선 */
.fstep::after{
  content:"";position:absolute;left:6.7px;top:24px;width:1.6px;
  height:calc(100% - 24px);background:var(--gold);
  transform:scaleY(0);transform-origin:top;
  transition:transform .6s cubic-bezier(.34,.68,.36,1) var(--d,0s);
}
.fstep:last-child::after{display:none}
.fstep.in::after{transform:scaleY(1)}

.fstep h4{grid-column:2;font-size:clamp(18px,1.95vw,22px);letter-spacing:-.038em;
  margin-bottom:10px;line-height:1.4}
.fstep p{grid-column:2;font-size:16.5px;color:var(--ink-2);line-height:1.85;letter-spacing:-.02em}

@media (max-width:820px){
  .fstep{grid-template-columns:28px minmax(0,1fr)}
  .fstep h4{font-size:18px}
  .fstep p{font-size:15.5px}
}


/* ── 행 단위 순차 등장 (비교표 · 요금표) ────────────────── */
.anim .rows [data-row]{
  opacity:0;transform:translateY(12px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1) var(--rd,0s),
             transform .5s cubic-bezier(.22,.61,.36,1) var(--rd,0s);
}
.anim .rows.in [data-row]{opacity:1;transform:none}

/* 비교표 헤더 밑줄은 좌에서 우로 그린다 */
.anim .vs-table.rows > .hd{position:relative;border-bottom-color:transparent!important}
.anim .vs-table.rows > .hd::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.34,.68,.36,1) .1s;
}
.anim .vs-table.rows > .hd.gold::after{background:var(--gold)}
.anim .vs-table.rows > .hd:first-child::after{background:var(--hair)}
.anim .vs-table.rows.in > .hd::after{transform:scaleX(1)}

/* 이 서비스 열의 크림 배경도 같이 나타난다 */
.anim .vs-table.rows > div:nth-child(3n){background:transparent;transition:background .6s ease .25s}
.anim .vs-table.rows.in > div:nth-child(3n){background:var(--tint-2)}

/* 탭 밑줄은 처음 한 번 미끄러져 들어온다 */
.anim .tabs .ink{transform:translateX(var(--x,0)) scaleX(0);transform-origin:left}
.anim .tabs.in .ink{transform:translateX(var(--x,0)) scaleX(1);
  transition:transform .6s cubic-bezier(.34,.68,.36,1) .2s,width .42s cubic-bezier(.22,.61,.36,1)}

/* 왼쪽 금색 선은 늘어나며 그어진다 */
/* 아이콘 카드는 살짝 커지며 들어온다 */
.anim .sync-card{transform:scale(.96)}
.anim .sync-card.in{transform:none;transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .78s cubic-bezier(.22,.61,.36,1)}

@media (prefers-reduced-motion:reduce){
  .anim .rows [data-row],
  .anim .vs-table.rows > .hd::after,
  .anim .tabs .ink,
  .anim .sync-card{opacity:1!important;transform:none!important;transition:none!important}
  .anim .vs-table.rows > div:nth-child(3n){background:var(--tint-2)}
}


/* 히어로 그라데이션을 조금 더 보이게 */
.hero::after{
  background:
    radial-gradient(900px 420px at 76% 0%,rgba(190,156,95,.46),transparent 66%),
    radial-gradient(660px 340px at 26% -10%,rgba(190,156,95,.26),transparent 64%)!important;
  height:600px!important;
}


/* CTA 밴드 안의 본문 링크 */

/* ── 히어로 하단 · 큰 문단 한 덩어리 (Linear 방식) ───────
   첫 문장만 남색, 나머지는 회색으로 물러난다.
   좌측 제목은 두지 않는다. 첫 문장과 말이 겹치기 때문이다.
   28px 는 히어로 제목(86)과 섹션 제목(42) 사이에 자리를 잡는 크기다. */
.hero-lead{
  font-size:clamp(20px,2.2vw,28px);font-weight:700;
  letter-spacing:-.04em;line-height:1.45;color:var(--ink-4);max-width:30ch;
}
.hero-lead b{font-weight:700;color:var(--navy)}
/* 전환 문장 — 페이지에서 색으로 강조하는 유일한 자리. */
.pivot{font-style:normal;font-weight:700;color:var(--gold-dk)}

@media (max-width:820px){
  .hero-lead{max-width:none}
}

/* ── 모바일 비교표 모션 (M2) ────────────────────────────
   한 항목 안에서 일반 줄이 먼저 오고 우리 줄이 뒤따른다.
   비교 순서를 시간으로 그린다. --rd 는 service.js 가 행마다 넣는다. */
@media (max-width:820px){
  /* 표가 500px 가까이 길다. 통째로 재생하면 아래 항목은 화면 밖에서 끝난다.
     그래서 .in 이 아니라 항목마다 붙는 .up 을 기준으로 삼는다. */
  .anim .vs-table.rows.in>div[data-row]{opacity:0;transform:translateY(12px)}
  .anim .vs-table.rows>div[data-row].up{opacity:1;transform:none}
  /* 항목 넷은 --rd 만큼 차례로, 한 항목 안에서는 일반 줄 → 우리 줄 순서로. */
  /* 두 물결로 나눈다. 항목명과 일반 중개가 네 항목 모두 먼저 내려오고,
     그게 끝난 뒤에 우리 답만 따로 올라온다. 섞이면 비교로 안 읽힌다.
     --rd 는 service.js 가 넣는 0.06 + i*0.055 다. */
  .anim .vs-table.rows>div:nth-child(3n+1),
  .anim .vs-table.rows>div:nth-child(3n+2){transition-delay:var(--rd,0s)}
  .anim .vs-table.rows>div:nth-child(3n){
    /* 데스크톱의 크림 배경 규칙이 transition 단축 속성으로 property 를
       background 하나로 덮어버려, 우리 줄만 opacity·transform 전환에서
       빠져 즉시 나타나고 있었다. 전환 대상을 여기서 되돌린다. */
    transition-property:opacity,transform;
    transition-timing-function:cubic-bezier(.22,.61,.36,1);
    transition-delay:calc(var(--rd,0s) + .62s);
    transition-duration:.62s;                 /* 뒤 물결은 조금 느리게 — 강조 */
  }
  /* 데스크톱의 크림 배경 연출은 모바일에 쓰지 않는다 */
  .anim .vs-table.rows>div:nth-child(3n),
  .anim .vs-table.rows.in>div:nth-child(3n){background:none}
}

/* ── 사례 아코디언 모션 ─────────────────────────────────
   본문이 위에서 미끄러져 내려온다. display 를 바꾸므로 transition 이 아니라
   animation 을 쓴다. 위쪽 금색 선은 7초 뒤 다음으로 넘어간다는 신호다. */
@media (max-width:820px){
  .panel{position:relative}
  .panel.open>p{animation:accOpen .42s cubic-bezier(.22,.61,.36,1) both}
  .panel.open>p+p{animation-delay:.08s}
  @keyframes accOpen{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

  .panel::before{
    content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--gold);
    transform:scaleX(0);transform-origin:0 50%;
  }
  .panel.timing::before{transform:scaleX(1);transition:transform 7s linear}
}

/* ── 마무리 밴드 · 모바일에서 화면을 반쯤 먹지 않게 ──────
   남색 면이 넓을수록 무게가 실리는데, 세로 화면에서는 그게 과하다. */
@media (max-width:820px){
  .band{padding:clamp(34px,8vw,56px) 0}
  .band h2{font-size:20px;line-height:1.38}
  .band p{margin-top:10px;font-size:14.5px;line-height:1.68}
  .band .btns{gap:8px;margin-top:18px}
  .band .btn{padding:11px 17px;font-size:14px;border-radius:9px}
}

/* ── 제목과 본문 사이 간격을 한 값으로 ─────────────────
   섹션마다 26 / 28 / 26 / 8px 로 제각각이었다. 사례 섹션은 탭을 숨기면서
   탭 자리만큼 좁아져 있었다. 모바일에서는 36px 하나로 통일한다. */
@media (max-width:820px){
  .two{gap:36px}
  .vs-table{margin-top:36px}
  .panels{margin-top:36px}
  .flow{margin-top:0}
}

/* ── FAQ 토글 · 사례 아코디언과 같은 장치 ─────────────
   열리면 세로획이 지워져 − 가 된다. 회전시키면 × 가 되어 "닫기"로 읽힌다. */
.faq-q i{
  position:relative;width:14px;height:14px;flex-shrink:0;
  background:
    linear-gradient(var(--ink-3),var(--ink-3)) center/14px 1.6px no-repeat,
    linear-gradient(var(--ink-3),var(--ink-3)) center/1.6px 14px no-repeat;
  transform:none!important;
}
.faq-i.on .faq-q i{
  background:linear-gradient(var(--gold-dk),var(--gold-dk)) center/14px 1.6px no-repeat;
}
.faq-i.on .faq-q{color:var(--gold-dk)}

/* 연락처 목록 — 자간 벌린 작은 회색 라벨을 본문 크기로 */
/* ── 상담 폼 · 동의 한 줄 ───────────────────────────────
   전문은 privacy.html 에 있다. 체크박스 기본값은 비워 둔다. */
.agree{display:flex;align-items:center;gap:10px;margin-top:22px;cursor:pointer}
.agree input{width:18px;height:18px;margin:0;accent-color:var(--gold-dk);flex-shrink:0}
.agree span{font-size:15px;line-height:1.6;color:var(--ink-2);letter-spacing:-.02em}
.agree a{color:var(--gold-dk);text-decoration:underline;text-underline-offset:3px}

/* ── 연락처 목록 ────────────────────────────────────────
   전화·카톡·메일은 서로 다른 기능이 아니라 같은 곳에 닿는 다른 통로다.
   카드로 늘어놓으면 "골라야 한다"는 신호를 주므로 라벨과 값만 둔다.
   라벨 열을 고정폭으로 잡아 값의 시작점이 세로로 맞는다. */
.clist{
  margin-top:clamp(30px,3.6vw,46px);
  border-top:1px solid var(--hair);max-width:620px;
}
.clist > div{
  display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:16px;padding:clamp(16px,1.9vw,21px) 0;border-bottom:1px solid var(--hair);
}
.clist dt{font-size:16px;font-weight:700;color:var(--navy);letter-spacing:-.03em}
.clist dd{margin:0;font-size:17px;line-height:1.6;color:var(--ink-2);letter-spacing:-.025em}
.clist dd a{
  color:var(--navy);font-weight:600;
  border-bottom:1px solid var(--hair);padding-bottom:2px;transition:border-color .2s;
}
.clist dd a:hover{border-bottom-color:var(--gold)}

@media (max-width:820px){
  .clist > div{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:15px 0}
  .clist dt{font-size:15px}
  .clist dd{font-size:15.5px}
}

/* ── 상담 안내 탭 · 가운데 한 단 ────────────────────────
   서비스 소개는 읽는 화면이라 왼쪽 정렬 2단을 쓰지만, 여기는 행동하는 화면이다.
   폭을 640px 하나로 통일하고 가운데로 모은다. 실측한 A형 다섯 곳(Stripe·Resend·
   Ramp·Clerk·Figma)이 모두 뷰포트 중심에 맞춘다. */
#tab-contact .sec > .wrap > *{max-width:640px;margin-inline:auto}
#tab-contact .sec > .wrap > .ask{max-width:none}
#tab-contact h2.t{text-align:center;margin-bottom:clamp(28px,3.4vw,40px)}
#tab-contact .clist,
#tab-contact .form-shell,
#tab-contact .faq{max-width:640px;margin-inline:auto}
#tab-contact .clist{margin-top:0}
#tab-contact .form-shell{max-width:640px;margin-top:0}
#tab-contact form.q{max-width:none}
#tab-contact .faq{margin-top:0}
#tab-contact .faq.narrow{max-width:640px}

/* 연락처를 상담 신청 안으로 옮겼다. 폼과 사이를 띄우고 제목과는 붙인다. */


/* C · 읽는 화면이 아니라 하는 화면이라 섹션 여백을 절반으로 줄인다.
   --pad(최대 176px)는 서비스 소개 탭 기준이라 여기서는 공백만 커진다. */
#tab-contact .sec{padding:clamp(48px,6vw,88px) 0}



/* ── 상담 신청 · 왼쪽 연락 수단 / 오른쪽 폼 ─────────────
   실측한 B형 여섯 곳 중 다섯 곳이 폼을 오른쪽에 둔다. 왼쪽은 맥락, 오른쪽은 입력.
   지표나 고객 인용문은 넣을 것이 없으므로 왼쪽에는 제목과 연락 수단만 둔다. */
.ask{display:grid;grid-template-columns:minmax(0,340px) minmax(0,600px);gap:clamp(36px,6vw,96px);align-items:stretch;justify-content:space-between}
/* 제목과 연락처 사이에 숨을 둔다. 붙어 있으면 제목의 한 줄처럼 읽힌다. */
#tab-contact .ask h2.t{text-align:left;margin-bottom:0}
/* 제목은 맨 위에 두고, 연락처는 남는 자리의 세로 가운데에 놓는다.
   옆으로 붙이면 세로를 거의 안 써서 아래가 남는다. */
.ask-l{display:flex;flex-direction:column}
.ask-l .ch-list{margin-block:auto}
#tab-contact .ask-r .form-shell{max-width:none;margin-top:0}

@media (max-width:900px){
  .ask{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  /* 데스크톱 54px 에서 갑자기 줄지 않게 한 단계만 내린다. 다른 섹션 제목(27px)보다는 크다. */
  #tab-contact .ask h2.t{text-align:left;font-size:34px;margin-bottom:26px}
}

/* 왼쪽 칸 연락 수단 — 무엇인지 말해주는 소제목을 값 위에 둔다.
   300px 폭이라 라벨을 옆에 두면 값의 시작점이 항목마다 어긋난다. */
/* 라벨을 값 위에 두면 제목처럼 읽힌다. 옆에 붙이고 폭을 고정해 값의 시작점을 맞춘다. */
.ch-list > div{padding:clamp(15px,1.8vw,21px) 0;border-top:1px solid var(--hair)}
.ch-list > div:first-child{border-top:0;padding-top:0}
/* 라벨이 값보다 작고 굵으면 태그처럼 보인다. 본문 크기에 굵기를 낮춰 글로 읽히게 한다. */

.ch-list dt{font-size:16px;font-weight:400;color:var(--ink-2);letter-spacing:-.02em;margin-bottom:5px}
.ch-list dd{margin:0;font-size:18px;font-weight:600;color:var(--navy);letter-spacing:-.03em;line-height:1.5}
.ch-list dd a:hover{border-bottom-color:var(--gold)}
@media (max-width:900px){
  /* 2열로 쪼개면 폭이 항목마다 달라지고 값이 줄바꿈된다. 데스크톱과 같은 한 열로 둔다. */
  .ch-list{display:block;margin-block:0}
  .ch-list > div{padding:14px 0}
  .ch-list dt{font-size:15.5px;margin-bottom:4px}
  .ch-list dd{font-size:17px}
}

/* ── 자격과 경력 ──────────────────────────────────────
   제목과 도입 문장을 같은 줄에 두고, 이력은 그 아래 전체 폭에 둔다.
   비교표와 「상담이 필요한 경우」가 쓰는 골격이다. 분류 이름을 왼쪽
   칸에 두면 오른쪽이 비고 분류 이름이 본문보다 작아진다.          */
.cv{margin-top:clamp(40px,4.6vw,66px)}
.cv-n{font-size:clamp(21px,2.1vw,25px);font-weight:700;letter-spacing:-.042em;
  line-height:1.3;color:var(--navy);
  padding-bottom:clamp(16px,1.9vw,21px);border-bottom:1px solid var(--hair)}
/* 칸을 똑같이 나누면(1fr) 글이 짧은 자격 칸 뒤에만 공백이 두 배로 남는다.
   auto 는 칸을 글 너비에 맞춘 뒤 남는 폭을 세 칸에 똑같이 더한다. 칸 사이
   간격이 같아지고, 마지막 칸 뒤에도 그 몫만큼 공백이 남는다.             */
.cv-cols{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(24px,3vw,56px)}
.cv-cols section{padding-top:clamp(15px,1.7vw,21px)}
.cv h3{font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--navy);
  margin-bottom:6px}
.cv-row1{padding-top:clamp(15px,1.7vw,21px)}
.cv-row1 p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.78;letter-spacing:-.02em}
.cv-cols2{grid-template-columns:repeat(2,auto)}
.cv ul{margin:0;padding:0;list-style:none}
.cv li{font-size:15.5px;color:var(--ink-2);line-height:1.78;letter-spacing:-.02em}

@media (max-width:820px){
  .cv-cols,.cv-cols2{grid-template-columns:1fr;gap:0}
  .cv h3{font-size:16.5px}
}
}