/* Shared service layout: centered showcase and expanding production columns. */
.step-reveal-icon,.step-reveal-en,.step-reveal-hit{display:none}
#main[data-sf-design=reveal]{--sf-header-space:104px}
#main[data-sf-design=reveal] .services-layout{padding-top:0}
/* Balance the header spacer below the stage so the film group sits at screen center. */
#main[data-sf-design=reveal] .shortform-showcase{
  height:calc(100svh - var(--sf-header-space));padding:0 0 var(--sf-header-space);
  grid-template-rows:1fr auto 1fr;
}
#main[data-sf-design=reveal] .shortform-reels{
  grid-area:2/1;width:min(930px,100%,calc((100svh - var(--sf-header-space)*2 - 128px)*1.6875));
  margin:0;padding-block:0;translate:0 -7px;
}
/* 가로(16:9) 영상 세 편(롱폼·홍보·광고·브랜드)은 같은 높이에서 더 넓게 놓인다. */
#main[data-sf-design=reveal] .shortform-reels[data-format=landscape]{width:min(1180px,100%,calc((100svh - var(--sf-header-space)*2 - 128px)*3.4));padding-block:0}
/* 가로 영상은 세로보다 낮아서, 위 제목·아래 문구를 영상 밖으로 조금 더 밀어낸다. */
#main[data-sf-design=reveal] .shortform-reels[data-format=landscape]~.shortform-showcase-note{translate:0 calc(45% + clamp(28px,3.2vw,56px))}
#main[data-sf-design=reveal]:has(.shortform-reels[data-format=landscape]) .shortform-showcase-heading{translate:0 calc(-45% - clamp(28px,3.2vw,56px))}
#main[data-sf-design=reveal] .shortform-showcase-heading{grid-area:2/1;translate:0 -45%}
#main[data-sf-design=reveal] .shortform-showcase-note{grid-area:2/1;translate:0 45%;margin-bottom:0}
/* WHY 행에 올리면 그 행이 켜진다(스크롤 등장 모션과 따로 동작): 번호가 아래부터 민트로 차오르며 빛나고,
   행 아래 선이 왼쪽부터 그려지고, 옅은 민트 빛이 깔리며, 제목이 민트로 바뀌어 오른쪽으로 살짝 밀린다. 나머지 행은 흐려진다. */
#main[data-sf-design=reveal] .shortform-reason{isolation:isolate}
#main[data-sf-design=reveal] .shortform-reason::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:left;
  box-shadow:0 0 12px color-mix(in srgb,var(--mint) 50%,transparent);transition:transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
#main[data-sf-design=reveal] .shortform-reason::before{display:block;content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--mint) 8%,transparent),transparent 75%);
  opacity:0;transition:opacity .5s;pointer-events:none}
#main[data-sf-design=reveal] .shortform-reason-index{transition:background-position .7s cubic-bezier(.16,1,.3,1),filter .4s}
#main[data-sf-design=reveal] .shortform-reason-label>span:last-child{transition:color .4s}
#main[data-sf-design=reveal] .shortform-reason h3{transition:translate .6s cubic-bezier(.16,1,.3,1),color .4s,opacity .4s}
#main[data-sf-design=reveal] .shortform-reason p{transition:color .4s,opacity .4s}
#main[data-sf-design=reveal] .shortform-reason-meta{transition:opacity .4s}
@media(hover:hover) and (pointer:fine){
  #main[data-sf-design=reveal] .shortform-reason:hover::after{transform:scaleX(1)}
  #main[data-sf-design=reveal] .shortform-reason:hover::before{opacity:1}
  #main[data-sf-design=reveal] .shortform-reason:hover .shortform-reason-index{background-position:0 100%;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--mint) 45%,transparent))}
  #main[data-sf-design=reveal] .shortform-reason:hover .shortform-reason-label>span:last-child{color:var(--mint)}
  #main[data-sf-design=reveal] .shortform-reason:hover h3{translate:12px 0;color:var(--mint)}
  #main[data-sf-design=reveal] .shortform-reason:hover p{color:var(--text)}
  /* 행 자체의 투명도는 스크롤 등장 모션이 쓰므로, 흐리게 하는 건 행 안쪽 요소에만 준다. */
  #main[data-sf-design=reveal] .shortform-reason-grid:hover .shortform-reason:not(:hover) :is(.shortform-reason-meta,h3,p){opacity:.45}
}
@media(prefers-reduced-motion:reduce){
  #main[data-sf-design=reveal] .shortform-reason:hover h3{translate:none}
}
#main[data-sf-design=reveal] .services-process{display:block;width:100%;max-width:none;margin-inline:0}
#main[data-sf-design=reveal] .services-process>.services-section-heading{width:calc(100% - var(--gutter)*2);max-width:none;margin:0 auto clamp(32px,4vw,64px)}
#main[data-sf-design=reveal] .service-steps{
  --step-side:clamp(20px,2vw,40px);
  /* Expanded flex share: 2.25 / (2.25 + 3) = 3/7, after four panels' padding/borders. */
  --step-copy-width:calc((100cqw - var(--step-side)*8 - 3px)*3/7 - 16px);
  /* Keep headings at the narrowest column's width, including while another stage opens. */
  --step-title-width:calc((100cqw - var(--step-side)*8 - 3px)*4/21);
  container-type:inline-size;
  display:flex;gap:0;margin:0;padding:0;
  min-height:max(560px,calc(100svh - var(--sf-pin-top)));border:0;border-block:1px solid var(--sf-rule);
}
#main[data-sf-design=reveal] .service-steps li:nth-child(n){
  --reveal-fill:#b4e9d5;position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1 1 0;width:auto;min-width:0;min-height:100%;padding:48px var(--step-side);gap:0;
  border:0;border-right:1px solid var(--sf-rule);border-radius:0;background:transparent;
  text-align:center;transform:none;opacity:1;
  transition:flex-grow .65s cubic-bezier(.22,.61,.36,1),flex-basis .65s cubic-bezier(.22,.61,.36,1);
}
#main[data-sf-design=reveal] .service-steps li.is-reveal-open{flex-grow:2.25}
#main[data-sf-design=reveal] .service-steps li:last-child{border-right:0}
#main[data-sf-design=reveal] .service-steps li:nth-child(2){--reveal-fill:#e8e0ca}
#main[data-sf-design=reveal] .service-steps li:nth-child(3){--reveal-fill:#c8dfe0}
#main[data-sf-design=reveal] .service-steps li:nth-child(4){--reveal-fill:#9ee5ce}
#main[data-sf-design=reveal] .service-steps li::before{
  content:'';position:absolute;inset:0;z-index:-1;width:auto;height:auto;
  background:var(--reveal-fill);transform:none;clip-path:circle(0% at 50% 50%);
  transition:clip-path .6s cubic-bezier(.22,.61,.36,1);pointer-events:none;
}
#main[data-sf-design=reveal] .service-steps li::after{
  content:attr(data-step-index);position:absolute;top:22px;left:24px;
  font:500 11px/1 var(--font-latin);letter-spacing:.14em;color:#a3b1a9;
  transition:color .18s;pointer-events:none;
}
#main[data-sf-design=reveal] .step-film-frame,
#main[data-sf-design=reveal] .step-visual-number{display:none}
#main[data-sf-design=reveal] .step-reveal-icon{display:block;order:0;margin-bottom:18px;color:var(--mint);transition:color .18s}
#main[data-sf-design=reveal] .step-reveal-icon svg{display:block;width:30px;height:30px}
#main[data-sf-design=reveal] .service-steps h3{
  order:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:var(--step-title-width);max-width:none;min-height:2.5em;
  margin:0;font-size:clamp(28px,2.3vw,44px);font-weight:600;
  line-height:1.25;letter-spacing:-.055em;color:var(--text);text-wrap:balance;transition:color .18s;
}
#main[data-sf-design=reveal] .step-reveal-en,
#main[data-sf-design=reveal] .service-steps .step-number{
  display:block;order:2;margin-top:14px;font:500 12px/1.5 var(--font-latin);
  letter-spacing:.2em;color:#9fb1a7;transition:color .18s;
}
#main[data-sf-design=reveal][data-how-reveal] .service-steps .step-number{display:none}
#main[data-sf-design=reveal] .service-steps p{
  order:3;max-width:680px;margin:20px 0 0;font-size:15px;line-height:1.85;
  color:#b6c5bd;word-break:keep-all;overflow-wrap:anywhere;
}
/* Lay out copy at its final width, so widening/narrowing panels never rewrap visible lines. */
#main[data-sf-design=reveal][data-how-reveal] .service-steps p{
  flex-shrink:0;width:min(680px,var(--step-copy-width));max-width:none;
  opacity:0;translate:0 8px;transition:opacity .1s ease-out,translate .2s ease-out,color .14s;
}
#main[data-sf-design=reveal] .step-reveal-hit{
  display:block;position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;
  border:0;border-radius:0;background:none;color:inherit;cursor:pointer;touch-action:pan-x pan-y;
}
#main[data-sf-design=reveal] .step-reveal-hit:focus-visible{outline:2px solid var(--mint);outline-offset:-6px}
#main[data-sf-design=reveal] .service-steps li.is-reveal-open::before{clip-path:circle(75% at 50% 50%)}
#main[data-sf-design=reveal] .service-steps li.is-reveal-open::after{color:#35564a}
#main[data-sf-design=reveal] .is-reveal-open :is(h3,.step-reveal-icon,.step-reveal-en){color:#102d23}
#main[data-sf-design=reveal][data-how-reveal] .service-steps li.is-reveal-open p{
  color:#244a3b;opacity:1;translate:0 0;
  transition:opacity .28s ease-out .4s,translate .35s cubic-bezier(.22,.61,.36,1) .4s,color .14s;
}
#main[data-sf-design=reveal] .is-reveal-open .step-reveal-hit:focus-visible{outline-color:#102d23}
/* 관리자에서 단계 배경 이미지를 넣으면 색 대신 그 이미지로 채운다. 글자가 읽히도록 검은색 반투명 막(60%)만 덮고 글자는 밝게 둔다. */
#main[data-sf-design=reveal] .service-steps li.has-reveal-image::before{
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),var(--reveal-image) center/cover no-repeat,var(--reveal-fill);
}
#main[data-sf-design=reveal] .service-steps li.has-reveal-image.is-reveal-open::after{color:#d4f4e8}
#main[data-sf-design=reveal] .has-reveal-image.is-reveal-open :is(h3,.step-reveal-en){color:#fff}
#main[data-sf-design=reveal] .has-reveal-image.is-reveal-open .step-reveal-icon{color:var(--mint)}
#main[data-sf-design=reveal][data-how-reveal] .service-steps li.has-reveal-image.is-reveal-open p{color:#e3eee8}
#main[data-sf-design=reveal] .has-reveal-image.is-reveal-open .step-reveal-hit:focus-visible{outline-color:var(--mint)}
@media(max-width:1199px){
  #main[data-sf-design=reveal]{--sf-header-space:98px}
}
@media(max-width:1023px){
  #main[data-sf-design=reveal] .service-steps{
    --step-side:28px;--step-copy-width:calc(60cqw - var(--step-side)*2 - 17px);
    --step-title-width:calc(46cqw - var(--step-side)*2 - 1px);
    min-height:max(480px,calc(100svh - var(--sf-pin-top)));overflow-x:auto;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:thin;
    scrollbar-color:#95cbb680 transparent;
  }
  #main[data-sf-design=reveal] .service-steps li:nth-child(n){flex:0 0 46%;scroll-snap-align:start;padding:40px var(--step-side)}
  #main[data-sf-design=reveal] .service-steps li.is-reveal-open{flex-basis:60%}
  #main[data-sf-design=reveal] .service-steps h3{font-size:32px}
}
@media(max-width:767px){
  #main[data-sf-design=reveal] .service-steps{
    --step-side:24px;--step-copy-width:calc(90cqw - var(--step-side)*2 - 17px);
    --step-title-width:calc(78cqw - var(--step-side)*2 - 1px);
  }
  #main[data-sf-design=reveal] .service-steps li:nth-child(n){flex-basis:78%;padding:36px var(--step-side)}
  #main[data-sf-design=reveal] .service-steps li.is-reveal-open{flex-basis:90%}
  #main[data-sf-design=reveal] .service-steps li::after{top:16px;left:16px;font-size:10px}
  #main[data-sf-design=reveal] .step-reveal-icon{margin-bottom:16px}
  #main[data-sf-design=reveal] .step-reveal-icon svg{width:26px;height:26px}
  #main[data-sf-design=reveal] .service-steps h3{font-size:clamp(26px,6.5vw,40px)}
  #main[data-sf-design=reveal] .step-reveal-en{font-size:11px;margin-top:12px}
  #main[data-sf-design=reveal] .service-steps p{font-size:14px;margin-top:18px}
}
@media(max-width:699px){
  #main[data-sf-design=reveal] .shortform-reels{translate:0 -3px}
}
@media(max-width:599px){
  #main[data-sf-design=reveal]{--sf-header-space:86px}
}
@media(prefers-reduced-motion:reduce){
  #main[data-sf-design=reveal] .service-steps li,
  #main[data-sf-design=reveal] .service-steps li::before,
  #main[data-sf-design=reveal] .service-steps li::after,
  #main[data-sf-design=reveal] .service-steps li :is(h3,p,span){transition:none!important;translate:none!important}
}