/* Shared service layout: editorial WHY with the selected full-width HOW. */
#main[data-sf-design]{--sf-space:clamp(72px,8vw,144px);--sf-rule:#f3f5f122;--sf-pin-top:104px}
#main[data-sf-design] .services-layout{width:100%;max-width:none;padding-bottom:var(--sf-space)}
#main[data-sf-design] .shortform-showcase{width:var(--header-content-width);margin-inline:auto}
#main[data-sf-design] .shortform-reasons,
#main[data-sf-design] .services-process{width:calc(100% - var(--gutter)*2);margin-inline:auto;padding-top:var(--sf-space);scroll-margin-top:var(--sf-pin-top)}
#main[data-sf-design] .services-section-heading h2{max-width:24ch;font-size:clamp(32px,3.6vw,64px);line-height:1.25;letter-spacing:-.05em;font-weight:600;text-wrap:balance}
#main[data-sf-design] .services-section-heading>p:not(.services-kicker){max-width:54ch;font-size:16px}
/* HOW 설명은 한 줄로(넓은 화면에서) */
#main[data-sf-design] .services-process>.services-section-heading>p:not(.services-kicker){max-width:none}
#main[data-sf-design] .services-kicker{font-size:12px;letter-spacing:.16em}
#main[data-sf-design] .shortform-reasons-count strong{font-size:64px}
#main[data-sf-design] .shortform-reason p,
#main[data-sf-design] .service-steps p{font-size:15px;line-height:1.85}
#main[data-sf-design] .shortform-reasons-heading{padding-bottom:48px;border-bottom:1px solid var(--sf-rule)}
#main[data-sf-design] .shortform-reason-grid{grid-template-columns:minmax(0,1fr);gap:0;margin-top:0;overflow:clip}
/* WHY 글자·행 여백은 처음 디자인 크기 그대로. 넓은 화면에서는 섹션이 적어도 헤더 아래 한 화면 높이가 되도록 네 줄이 남는 높이를 나눠 가진다. */
#main[data-sf-design] .shortform-reasons{--sf-u:calc((100svh - var(--sf-pin-top,104px)) / 100);--sf-row-y:38px;--sf-row-x:32px;
  --sf-num:clamp(54px,6vw,100px);--sf-num-col:160px;--sf-gap:3.4vw}
/* 넓은 화면: WHY 섹션은 최소 헤더 아래 한 화면. 내용이 더 크면 그만큼 늘어난다. */
@media(min-width:1200px){
  #main[data-sf-design] .shortform-reasons{display:flex;flex-direction:column;min-height:calc(100svh - var(--sf-pin-top,104px));margin-top:var(--sf-space);
    padding-block:clamp(20px,calc(var(--sf-u) * 4),56px)}
  #main[data-sf-design] .shortform-reasons-stage,
  #main[data-sf-design] .shortform-reason-viewport{display:flex;flex-direction:column;flex:1}
  #main[data-sf-design] .shortform-reason-grid{flex:1;grid-template-rows:repeat(4,minmax(0,1fr))}
  /* 네 줄이 같은 세 열(번호 · 제목 · 설명)을 공유한다(subgrid). 번호 칸과 제목 칸은 내용 폭에 딱 맞춰,
     번호 끝→제목, 가장 긴 제목 끝→설명 간격이 모두 --sf-gap으로 같다. 설명 열은 줄마다 같은 자리에서 시작한다. */
  #main[data-sf-design] .shortform-reasons{--sf-gap:clamp(40px,4vw,80px);--sf-lead-x:64px}
  #main[data-sf-design] .shortform-reasons .shortform-reason-grid{grid-template-columns:max-content max-content minmax(0,1fr);column-gap:var(--sf-gap)}
  #main[data-sf-design] .shortform-reasons .shortform-reason{grid-column:1/-1;grid-template-columns:subgrid;gap:0 var(--sf-gap);padding-left:var(--sf-lead-x)}
  #main[data-sf-design] .shortform-reasons .shortform-reason-meta+div{display:contents}
}
/* 번호 칸(--sf-num-col) 가운데에 번호를 두고, 번호→제목 간격과 제목 칸→설명 간격을 같게(--sf-gap + 번호 칸 남는 폭의 절반) 맞춘다.
   번호 글자 폭은 글자 크기의 약 1.21배(Inter 고정폭 숫자 두 자리). */
#main[data-sf-design] .shortform-reason{display:grid;grid-template-columns:var(--sf-num-col) minmax(0,1fr);align-items:center;gap:var(--sf-gap);padding:var(--sf-row-y) var(--sf-row-x);border:0;border-bottom:1px solid var(--sf-rule);border-radius:0;background:none}
#main[data-sf-design] .shortform-reason::before{display:none}
#main[data-sf-design] .shortform-reason-meta{gap:12px}
/* 번호는 윤곽선 대신 옅은 민트로 채운다(Inter 가변 글꼴은 획이 겹쳐 윤곽선을 그리면 겹친 선이 보인다). 올리면 아래부터 민트로 차오른다(shortform-reveal.css). */
#main[data-sf-design] .shortform-reason-index{font-size:var(--sf-num);color:transparent;background:linear-gradient(0deg,var(--mint) 50%,color-mix(in srgb,var(--mint) 20%,transparent) 50%) 0 0/100% 200% no-repeat;-webkit-background-clip:text;background-clip:text}
/* 영문 문구는 번호 아래 가운데.
   넓은 화면에서는 문구를 번호 아래에 띄워(absolute) 번호 자체가 제목과 세로 가운데로 맞고, 번호가 줄마다 같은 자리에서 시작한다.
   행은 위아래 여백이 같아 제목·설명이 행의 세로 가운데에 온다. */
#main[data-sf-design] .shortform-reason-label{align-items:center;text-align:center}
@media(min-width:768px){
  #main[data-sf-design] .shortform-reason-meta{justify-content:center}
  #main[data-sf-design] .shortform-reason-label{position:relative;align-items:center}
  #main[data-sf-design] .shortform-reason-label>span:last-child{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;white-space:nowrap}
}
#main[data-sf-design] .shortform-reason-meta+div{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:calc(var(--sf-gap) + (var(--sf-num-col) - var(--sf-num) * 1.21) / 2)}
#main[data-sf-design] .shortform-reason h3{font-size:clamp(26px,2.6vw,44px);line-height:1.4;letter-spacing:-.05em}
#main[data-sf-design] .shortform-reason p{margin:0}

@media(prefers-reduced-motion:no-preference){
  #main[data-sf-motion] [data-motion-card]{transform:translate3d(var(--motion-x,0px),var(--motion-y,0px),0);opacity:var(--motion-opacity,1)}
  #main[data-sf-motion] [data-motion-title]{translate:0 var(--title-y,0px);opacity:var(--title-opacity,1)}
}
@media(max-width:1199px){
  #main[data-sf-design] .shortform-reasons{--sf-row-x:24px}
  #main[data-sf-design] .shortform-reason{grid-template-columns:180px 1fr;gap:32px}
  #main[data-sf-design] .shortform-reason-meta+div{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media(max-width:767px){
  #main[data-sf-design]{--sf-space:64px}
  #main[data-sf-design] .services-section-heading h2{font-size:clamp(28px,5.5vw,42px);max-width:24ch}
  #main[data-sf-design] .services-section-heading>p:not(.services-kicker){font-size:14px}
  #main[data-sf-design] .shortform-reasons-heading{align-items:start;padding-bottom:24px}
  #main[data-sf-design] .shortform-reasons{--sf-row-x:16px}
  #main[data-sf-design] .shortform-reason{grid-template-columns:minmax(0,1fr);gap:24px;padding:32px var(--sf-row-x)}
  #main[data-sf-design] .shortform-reason h3{font-size:23px}
  #main[data-sf-design] .shortform-reason p,#main[data-sf-design] .service-steps p{font-size:14px}
  #main[data-sf-design] .shortform-reason-meta{justify-content:space-between}
  #main[data-sf-design] .shortform-reason-label{flex-direction:row;align-items:end;gap:16px}
  #main[data-sf-design] .shortform-reason-index{font-size:64px}
}
@media(prefers-reduced-motion:reduce){
  #main[data-sf-design] [data-motion-card],#main[data-sf-design] [data-motion-title]{transform:none!important;translate:none!important;opacity:1!important}
}