/* /support — 2026-09-30, 5판.

   사장님이 apple.com/kr/business 를 가리키며 "ux도 괜찬다" 하셨다.
   그 화면에서 읽어 온 뼈대는 이렇다.

       바탕      검정에서 시작
       섹션      위아래 144px 고정 여백 — 한 화면에 한 가지만
       본문 폭    980px
       색 교차    검정 → 진회색 → 검정 → 흰색 → 회색 → 검정
       흐름      선언(검정) → 실무(흰색) → 묻는 것(회색) → 다음 행선지(검정)

   그 위에 우리 규칙을 얹는다 — **보여줄 것만 보여주고 늘어놓는 말은 모달로**
   (사장님 "카드롤 보여주는거야. 늘어놓는 말은 모달로 치워버리고").
   이모지는 안 쓴다. 숫자가 그림이다. */

.sup-body{
  --ink:#000; --ink-2:#1D1D1F; --paper:#fff; --grey:#F5F5F7;
  --dim:#86868B; --line:#D2D2D7; --teal:#2FD1BE;
  /* 왼쪽 목록은 **다른 화면과 같은 밝은 판**이다. 한때 이 화면에서만 다크로
     덮었는데, 다크로 가는 칸이 히어로와 「준비된 라인」 둘뿐이 되면서
     되돌렸다(2026-10-01 "옆에 탭도 일반버전으로 회귀"). */
}
.sup-body .ps-main{background:#fff}
/* 다크로 가는 칸은 둘뿐 — 히어로와 「준비된 라인은 이미 돌아가고 있습니다」.
   나머지는 밝은 판이다(2026-10-01). 아래 값은 그 밝은 판에서 쓴다. */
.sup{--ink:#101418; --muted:#5b6472; --line:#e6e9ee; --brand:#14a89a;
  --paper:#fff; --grey:#F5F5F7;
  --sh-lt:0 1px 2px rgba(16,20,24,.05), 0 14px 30px -14px rgba(16,20,24,.2);
  --sh-lt-h:0 2px 4px rgba(16,20,24,.07), 0 26px 46px -18px rgba(16,20,24,.3)}
.sup{font-family:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased}
.sup *{box-sizing:border-box}
.sup a{color:inherit;text-decoration:none}

.sup section{padding:144px 40px}
.sup .w{max-width:980px;margin:0 auto}
.sup .lb{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--teal)}

/* 색 교차 */
.sup .s-black{background:#000;color:#fff}
.sup .s-dim{background:#1D1D1F;color:#fff}
.sup .s-white{background:#fff;color:#1D1D1F}
.sup .s-grey{background:#F5F5F7;color:#1D1D1F}
.sup .s-black .dim,.sup .s-dim .dim{color:#A1A1A6}
.sup .s-white .dim,.sup .s-grey .dim{color:#6E6E73}

/* 히어로 */
.sup .intro{padding:64px 40px 0;color:#fff;opacity:0;
  max-height:0;overflow:hidden;transition:opacity .8s, max-height .9s}
.sup .shots.done .intro{max-height:60vh}
.sup .shots.go .intro{opacity:1}
.sup .intro h1{font-size:clamp(44px,6.4vw,88px);font-weight:800;letter-spacing:-.04em;
  line-height:1.02;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.sup .intro h1 .wm{color:#2FD1BE;letter-spacing:0}
/* 굵고 흐린 회색은 읽기 어렵다 — 무게를 낮추고 색을 올린다(2026-09-30) */
.sup .intro p{margin-top:26px;font-size:clamp(17px,1.8vw,21px);line-height:1.72;
  max-width:48ch;color:#CDCFD4;font-weight:500;letter-spacing:-.01em}
.sup .intro p b{color:#fff;font-weight:700}

/* 큰 제목 */
.sup h2{font-size:clamp(32px,4.6vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1.14}
.sup h2 + .sub{margin-top:24px;font-size:clamp(17px,2vw,21px);line-height:1.55;max-width:46ch}

/* 큰 사진 → 캐러셀 (2026-09-30).
   섹션을 두 화면 높이로 잡고, 안쪽을 sticky 로 붙여 둔 뒤 첫 장의 scale 만 줄인다.
   다 줄어들면(.done) 줄이 실제로 옆으로 밀리는 캐러셀이 된다. */
/* 스크롤이 아니라 페이지를 열면 저절로 돈다(2026-09-30) — 그래서 섹션을
   길게 잡지 않는다. 한 화면이면 된다. */
/* 위는 사진 줄, 아래는 제목 — 한 화면에 같이 든다(애플 at Work 배치).
   **캐러셀 칸은 작다**(2026-09-30 사장님 "캐러셀은 작아. 저렇게 크지 않아").
   화면폭의 22% 안쪽, 줄 높이는 34vh. 크게 덮는 것은 인트로 한 번뿐이다. */
.sup .shots{min-height:100vh;position:relative;background:#000;padding:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:0}

/* 캐러셀 줄 — 인트로가 사라진 뒤 펼쳐진다 */
/* **인트로 동안에는 줄이 화면 높이를 다 쓴다.** 줄이 낮으면 크게 띄운
   첫 칸을 overflow:hidden 이 위아래로 잘라낸다 — 2026-09-30에 이것 때문에
   "계속 첫화면 높이가 이렇게밖에 안돼" 를 몇 번 들었다.
   다 줄어들면(.done) 46vh 로 내려앉는다. */
.sup .stage{height:100vh;display:flex;align-items:center;
  overflow:hidden;background:#000;position:relative;
  transition:height .95s cubic-bezier(.16,1,.3,1)}
.sup .shots.done .stage{height:46vh;min-height:300px}
.sup .shots:not(.go) .shot.lead b,.sup .shots:not(.go) .shot.lead i{opacity:0}
.sup .shot.lead b,.sup .shot.lead i{transition:opacity .6s .5s}
.sup .shot.lead .ph{transform-origin:center center;will-change:transform}

/* 멈춤 단추 — 저절로 흐르는 것은 세울 수 있어야 한다 */
.sup .pause{position:absolute;right:28px;bottom:14px;z-index:9;width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:12px;
  cursor:pointer;opacity:0;transition:opacity .4s;letter-spacing:1px}
.sup .shots.done .pause{opacity:1}
.sup .pause:hover{background:rgba(255,255,255,.26)}
.sup .rail{width:100%;overflow:hidden}
.sup .track{display:flex;gap:16px;align-items:center;padding:0 40px;
  will-change:transform;width:max-content}
/* 장비 사진은 대부분 1:1 이다(11장 중 8장이 640×640, 2026-09-30 실측).
   칸을 정사각으로 잡고 가로형 몇 장은 안에서 맞춰 넣는다 — 칸 높이가
   장마다 달라지면 줄이 들쭉날쭉해진다. */
.sup .shot{flex:0 0 auto;width:min(22vw,262px);will-change:transform,opacity}
/* **칸은 사진과 같은 1:1 이다.** 비율이 다르면 확대하는 순간 잘린다
   (2026-09-30에 4:5·16:9 로 해보다 계속 잘렸다). 사진도 잘라 넣지 않는다.
   가로 화면에서 남는 좌우는 어두운 바탕이 받는다. */
.sup .shot .ph{display:block;position:relative;width:100%;height:0;padding-top:100%;
  border-radius:14px;overflow:hidden;background:#15181D;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
/* 사진마다 배경 밝기와 채도가 제각각이라 검은 판 위에서 들쭉날쭉했다.
   **옵티컬 한 겹을 씌워 톤을 맞춘다**(2026-09-30 사장님 "옵티컬 씌워서
   채도를 맞추면 될꺼같은데"). 흰 배경 사진은 회색으로 내려앉고,
   이미 어두운 사진은 거의 그대로 남는다. */
.sup .shot .ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(170deg, rgba(8,9,11,.06) 0%, rgba(8,9,11,.20) 58%, rgba(8,9,11,.34) 100%);
  transition:opacity .8s}
/* 인트로 동안 첫 장은 화면을 꽉 채운다 — 이때만 잘라 넣는다.
   캐러셀로 들어가면 다시 contain 이라 잘리지 않는다(2026-09-30). */
/* 칸을 꽉 채운다 — 92% 로 넣으면 안쪽에 여백이 남아 사진이 떠 보이지 않는다
   (2026-09-30 사장님 "첫 스타트만 이미지가 잘 떠있으면될꺼같다").
   장비 사진은 대부분 1:1 이라 잘리는 곳이 거의 없다. */
/* **칸 높이를 aspect-ratio 에 기대지 않는다.** 그게 안 먹는 브라우저에서는
   가로만 늘고 세로가 고정돼 납작한 띠가 된다(2026-09-30 사장님 "가로폭은
   맞는데 세로가 계속 고정되어있어"). padding-top:100% 는 어디서나 돈다.
   사진은 손대지 않는다 — 프레임을 꽉 채우는 사진을 고르는 것으로 푼다. */
.sup .shot .ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
  filter:saturate(.88) contrast(1.0) brightness(1.04)}
.sup .shot b{display:block;margin-top:12px;font-size:13.5px;font-weight:600;color:#fff;
  letter-spacing:-.03em;line-height:1.35}
.sup .shot i{display:block;margin-top:3px;font-style:normal;font-size:12px;color:#6E6E73}




/* 흐르는 동안에는 칸마다 크기를 손으로 준다 — 가운데가 크고 옆이 작다 */
.sup .shots.done .shot .ph{transition:none}
.sup .shots.done .shot{transition:opacity .3s}
.sup .shots.done .shot.lead b,.sup .shots.done .shot.lead i{opacity:1}

@media(max-width:700px){
  .sup .shot{width:58vw}
  .sup .rail{padding:0 12vw;gap:14px}
}

/* 수치 카드 */
.sup .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.sup .cards.two{grid-template-columns:repeat(3,1fr)}
.sup .nc{border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;
  border-radius:20px;padding:40px 32px 36px;transition:transform .2s ease, background .2s ease}
.sup .s-black .nc,.sup .s-dim .nc{background:#1D1D1F}
.sup .s-dim .nc{background:#000}
.sup .s-white .nc,.sup .s-grey .nc{background:#F5F5F7}
.sup .nc:hover{transform:translateY(-4px)}
.sup .nc b{display:block;font-size:clamp(44px,6vw,68px);font-weight:800;letter-spacing:-.055em;line-height:1}
.sup .nc b em{font-style:normal;font-size:.36em;font-weight:700;margin-left:8px;letter-spacing:-.02em}
.sup .nc i{display:block;margin-top:18px;font-style:normal;font-size:16px;line-height:1.5}
.sup .nc::after{content:"＋";position:absolute;right:26px;top:30px;font-size:17px;opacity:.45}

/* 표 */
.sup .tbl{width:100%;border-collapse:collapse;margin-top:56px;font-size:17px}
.sup .tbl th{text-align:left;font-size:14px;font-weight:600;color:#6E6E73;padding:0 0 14px;
  border-bottom:1px solid var(--line)}
.sup .tbl th:nth-child(n+2),.sup .tbl td:nth-child(n+2){text-align:right;width:150px}
.sup .tbl td{padding:20px 0;border-bottom:1px solid var(--line)}
.sup .tbl td b{font-size:23px;font-weight:800;letter-spacing:-.03em}
.sup .note{margin-top:22px;font-size:14px;color:#6E6E73}

/* 마지막 */
/* 한 문장이 화면 하나를 쓴다 — 「SHIFT 가 뭐야?」에 답하는 칸들.
   숫자도 사진도 넣지 않는다. 말만 남긴다(2026-09-30). */
.sup .say{min-height:78vh;display:flex;align-items:center;padding:0 40px}
.sup .say p{font-size:clamp(30px,4.4vw,62px);font-weight:700;letter-spacing:-.045em;
  line-height:1.32;color:#EDEDEF;margin:0}
.sup .say.big p{font-size:clamp(36px,5.6vw,80px);font-weight:800;letter-spacing:-.05em}
.sup .say p b{color:#fff;font-weight:800}
.sup .say p .dim{color:#7A7C82}
.sup .say p .sub{display:block;margin-top:22px;font-size:clamp(17px,1.8vw,22px);
  font-weight:500;color:#A9ABB1;letter-spacing:-.01em;line-height:1.6}
.sup .say p .wm{color:#2FD1BE;letter-spacing:0}
@media(max-width:700px){.sup .say{min-height:64vh;padding:0 24px}}

/* 「우리가 하는 일」 — cn /proposal 의 4칸을 다섯으로 옮긴 것. 아이콘 + 한 줄.
   사진은 넣지 않는다(2026-09-30). 긴 말은 카드가 아니라 모달에 있다. */
/* ── 「어떤 상황이신가요?」 — 히어로 다음, 우리가 하는 일 앞.
   칸 비율은 원본 그대로 **가로 1 : 세로 1.36**("이비율을 유지하라고").
   폭이 달라져도 비율이 따라오게 padding-top 비율상자를 쓰고 안쪽을
   절대배치한다 — aspect-ratio 는 안 먹는 브라우저가 있다.
   배경만 다크, 칸은 흰색. 순검정이면 그림자가 안 보여 바닥을 한 단 올린다. */
.sup .cases{background:var(--grey);padding:112px 40px 116px}
.sup .cases .w{max-width:1420px;width:100%;min-width:0}
.sup .cases h2{margin:0;font-size:clamp(28px,3.2vw,44px);font-weight:800;
  letter-spacing:-.04em;line-height:1.16;color:var(--ink)}
.sup .cases .grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sup .cs{position:relative;width:100%;height:0;padding-top:136%;cursor:pointer;
  background:#fff;border-radius:20px;min-width:0;
  transition:transform .22s ease, box-shadow .22s ease;
  box-shadow:var(--sh-lt)}
.sup .cs:hover{transform:translateY(-6px);
  box-shadow:var(--sh-lt-h)}
.sup .cs .in{position:absolute;inset:0;padding:7% 8% 8%;
  display:flex;flex-direction:column;align-items:flex-start}
/* 아이콘은 원본 파일 그대로 쓴다(public_static/art). 비율이 저마다 달라
   칸 높이만 잡고 contain 으로 맞춘다 — 늘어나지 않는다. 크기는 건드리지 않는다.
   **margin-bottom:auto 를 쓰지 않는다** — 글이 바닥으로 밀리고, 글 길이가
   칸마다 달라 시작선까지 어긋났다(2026-09-30 "텍스트가 너무 밑이야"). */
.sup .cs .ic{display:flex;width:100%;height:27%;margin:2% 0 0;flex:0 0 auto;
  align-items:center;justify-content:center}
/* 높이를 칸에 **딱 맞춘다**. width:auto + height:auto 로 두면 아직 안 받은
   그림이 0x0 이 되고, 그러면 lazy 가 영영 안 걸려 안 불러온다(2026-09-30).
   그림마다 가로세로가 달라 contain 으로 가운데 맞춘다. */
.sup .cs .ic img{height:100%;width:auto;max-width:60%;
  object-fit:contain;display:block}
.sup .cs .lb{margin:10% 0 0;font-size:clamp(12px,1vw,15px);font-weight:800;
  letter-spacing:.09em;color:#39B8AC}
.sup .cs h3{margin:3.5% 0 0;font-size:clamp(22px,2.1vw,33px);font-weight:800;
  letter-spacing:-.035em;line-height:1.3;color:#15181C}
.sup .cs .bd{margin:5.5% 0 0;font-size:clamp(14px,1.22vw,18px);font-weight:500;
  line-height:1.7;letter-spacing:-.012em;color:#6B7280}
@media(max-width:1040px){
  .sup .cases .grid{grid-template-columns:1fr;gap:18px}
  .sup .cs{padding-top:0;height:auto}
  .sup .cs .in{position:static;padding:34px 28px 32px}
  /* 좁은 화면에서도 그림 칸 높이를 고정해야 세 칸의 글 시작선이 맞는다 —
     그림마다 세로가 달라(86·105·78) 안 잡으면 어긋난다. */
  .sup .cs .ic{height:104px;margin:0 0 24px;justify-content:flex-start;align-items:center}
  .sup .cs .ic img{height:100%;width:auto;max-width:none}
  .sup .cs .lb{margin:0;font-size:13px}
  .sup .cs h3{margin:10px 0 0;font-size:25px}
  .sup .cs .bd{margin:14px 0 0;font-size:16px}
  .sup .cs h3{margin:10px 0 0}
  .sup .cs .bd{margin:14px 0 0}
}
@media(max-width:700px){.sup .cases{padding:72px 24px 78px}}

/* 순검정 위에는 그림자가 떨어질 바닥이 없다 — 뜨는 효과가 아예 안 보인다.
   그래서 이 칸만 바닥을 한 단 올린다(#000 → #101317). 히어로는 검은 채로 두니
   경계가 오히려 또렷해지고, 그 위에서야 밝은 칸이 실제로 떠 보인다.
   (2026-09-30 "다크라 떠오르는 효과가 안나겠군") */
.sup .does{background:var(--paper)}
.sup .does{padding:118px 40px 128px;position:relative}
.sup .does .w{position:relative}
.sup .does .w{max-width:1420px}
.sup .does .lb{text-align:center;margin:0 0 20px;color:var(--brand)}
.sup .does h2{text-align:center;margin:0;font-size:clamp(32px,4.4vw,60px);font-weight:800;
  letter-spacing:-.045em;line-height:1.18;color:var(--ink)}
.sup .does .lead{text-align:center;margin:26px auto 0;max-width:62ch;
  font-size:clamp(16px,1.6vw,20px);font-weight:500;line-height:1.72;
  letter-spacing:-.012em;color:var(--muted)}
.sup .does .lead b{color:var(--ink);font-weight:700}
.sup .does .grid{margin-top:62px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}

/* 다섯 칸을 한 줄에 놓으려면 화면이 넓어야 한다. 좁아지면 3+2 → 2 → 1 로 접는다. */
@media(max-width:1620px){.sup .does .grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1040px){.sup .does .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .sup .does{padding:76px 24px 84px}
  .sup .does .grid{grid-template-columns:1fr;gap:14px;margin-top:44px}
}

.sup .end{text-align:center}
.sup .end h2{font-size:clamp(34px,5vw,64px)}
.sup .cta{margin-top:48px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.sup .cta a{background:#2FD1BE;color:#000;padding:20px 44px;border-radius:999px;
  font-size:18px;font-weight:700;letter-spacing:-.02em;transition:.16s}
.sup .cta a:hover{background:#4FE0CF}
.sup .cta a.q{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #48484D}
.sup .cta a.q:hover{background:rgba(255,255,255,.08)}


@media(max-width:900px){
  .sup section{padding:96px 28px}
  .sup .hero{padding:120px 28px 100px}
  .sup .cards,.sup .cards.two{grid-template-columns:1fr 1fr;gap:14px}
}
@media(max-width:600px){
  .sup .cards,.sup .cards.two{grid-template-columns:1fr}
  .sup .tbl th:nth-child(3),.sup .tbl td:nth-child(3){display:none}
}

/* ── cn /proposal 의 짜임과 모달을 그대로 쓰되 **색만 다크**로 간다
   (2026-09-30 "색상 CN과 맞춰 · 모달을 넣어야해" → "다크버전으로 해").
   그래서 남는 것은 cn 의 뼈대 — 카드 한 줄 + 96px 아이콘 띠 모달, 620px,
   모서리 24px. 히어로부터 끝까지 한 색으로 내려간다. ──────────────── */
.sup{--card:#1D1D1F;--card-h:#26262A;--brand:#2FD1BE;
  --sh-h:0 2px 6px rgba(0,0,0,.4), 0 26px 50px -18px rgba(0,0,0,.72)}



/* 모달 — cn .apm 규격(620px · r24 · 아이콘 96px 띠)에 다크를 입힌 것 */
.sup .apm-mask{position:fixed;inset:0;background:rgba(0,0,0,.66);
  backdrop-filter:blur(3px);z-index:800;display:none}
.sup .apm-mask.on{display:block}
.sup .apm{position:fixed;z-index:801;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,92vw);max-height:86vh;overflow-y:auto;background:#fff;
  border-radius:24px;box-shadow:0 14px 34px rgba(0,0,0,.4), 0 50px 110px rgba(0,0,0,.6);
  display:none;text-align:left}
.sup .apm.on{display:block}
.sup .apm-h{background:#E9ECEF;padding:44px 34px 38px;text-align:center;position:relative}
.sup .apm-h svg{width:88px;height:88px;color:#101418;opacity:.86;margin:0 auto}
.sup .apm-h img{width:auto;height:auto;max-width:150px;max-height:112px;
  display:block;margin:0 auto;object-fit:contain}
.sup .apm-x{position:absolute;right:20px;top:20px;width:36px;height:36px;border-radius:999px;
  background:rgba(16,20,24,.08);border:0;color:#5b6472;font-size:19px;cursor:pointer;line-height:1}
.sup .apm-x:hover{background:rgba(16,20,24,.16)}
.sup .apm-b{padding:34px 36px 38px}
.sup .apm-b h3{margin:0;font-size:28px;font-weight:800;letter-spacing:-.03em;color:#101418}
.sup .apm-b p{margin:18px 0 0;font-size:15.5px;line-height:1.85;color:#3d4653;font-weight:500}
.sup .apm-b p b{color:#101418;font-weight:700}
@media(max-width:700px){
  .sup .apm-h{padding:34px 24px 28px}
  .sup .apm-h svg{width:64px;height:64px}
  .sup .apm-h img{max-width:110px;max-height:84px}
  .sup .apm-b{padding:26px 24px 30px}
  .sup .apm-b h3{font-size:23px}
}

/* ── **배경만 다크**. 칸은 cn 것 그대로 둔다 — 밝은 칸, 검은 글
   (2026-09-30 "카드는 이대로 배경은 다크"). 글이 주인공이라 아이콘은
   왼쪽 위에 작게 물러나고, 제목·설명은 위에서부터 쌓이고 아래는 비운다.
   알약은 없다 — 칸 전체가 눌린다. 효과만 cn .ap 수치를 따른다. ────── */
.sup .do{position:relative;background:#EDEFF2;border:0;border-radius:22px;
  padding:30px 28px 30px;cursor:pointer;color:#101418;text-align:left;font-family:inherit;
  display:flex;flex-direction:column;align-items:flex-start;min-height:232px;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
  box-shadow:var(--sh-lt)}
.sup .do:hover{transform:translateY(-6px);background:#fff;
  box-shadow:var(--sh-lt-h)}
.sup .do svg{width:34px;height:34px;color:#2A3142;flex:0 0 auto}
.sup .do h3{margin:0;padding-top:34px;font-size:clamp(26px,2.1vw,32px);
  font-weight:800;letter-spacing:-.035em;line-height:1.14;color:#101418}
.sup .do p{margin:12px 0 0;font-size:14px;font-weight:500;line-height:1.62;
  letter-spacing:-.012em;color:#6B7280}
@media(max-width:700px){.sup .do{min-height:0;padding:26px 24px}
  .sup .do h3{padding-top:26px}}

/* 모달 — cn .apm 규격(620px · r24 · 아이콘 96px 띠)에 다크를 입힌 것 */
.sup .apm-mask{position:fixed;inset:0;background:rgba(0,0,0,.66);
  backdrop-filter:blur(3px);z-index:800;display:none}
.sup .apm-mask.on{display:block}
.sup .apm{position:fixed;z-index:801;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,92vw);max-height:86vh;overflow-y:auto;background:#fff;
  border-radius:24px;box-shadow:0 14px 34px rgba(0,0,0,.4), 0 50px 110px rgba(0,0,0,.6);
  display:none;text-align:left}
.sup .apm.on{display:block}
.sup .apm-h{background:#E9ECEF;padding:44px 34px 38px;text-align:center;position:relative}
.sup .apm-h svg{width:88px;height:88px;color:#101418;opacity:.86;margin:0 auto}
.sup .apm-h img{width:auto;height:auto;max-width:150px;max-height:112px;
  display:block;margin:0 auto;object-fit:contain}
.sup .apm-x{position:absolute;right:20px;top:20px;width:36px;height:36px;border-radius:999px;
  background:rgba(16,20,24,.08);border:0;color:#5b6472;font-size:19px;cursor:pointer;line-height:1}
.sup .apm-x:hover{background:rgba(16,20,24,.16)}
.sup .apm-b{padding:34px 36px 38px}
.sup .apm-b h3{margin:0;font-size:28px;font-weight:800;letter-spacing:-.03em;color:#101418}
.sup .apm-b p{margin:18px 0 0;font-size:15.5px;line-height:1.85;color:#3d4653;font-weight:500}
.sup .apm-b p b{color:#101418;font-weight:700}
@media(max-width:700px){
  .sup .apm-h{padding:34px 24px 28px}
  .sup .apm-h svg{width:64px;height:64px}
  .sup .apm-h img{max-width:110px;max-height:84px}
  .sup .apm-b{padding:26px 24px 30px}
  .sup .apm-b h3{font-size:23px}
}

/* 칸이 화면에 들어올 때 차례로 떠오른다 — cn 의 뜨는 느낌을 들어올 때에도 준다.
   자리는 처음부터 잡혀 있고 움직이는 것은 8px 과 투명도뿐이라, 스크립트가
   못 돌아도 칸은 그대로 보인다(2026-09-30 "효과도 카드를 띄우는 것도 같이 해"). */
.sup .does .grid.rise .do{opacity:0;transform:translateY(18px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1),
             box-shadow .22s ease, background .22s ease}
.sup .does .grid.rise.on .do{opacity:1;transform:none}
.sup .does .grid.rise.on .do:nth-child(2){transition-delay:.07s}
.sup .does .grid.rise.on .do:nth-child(3){transition-delay:.14s}
.sup .does .grid.rise.on .do:nth-child(4){transition-delay:.21s}
.sup .does .grid.rise.on .do:nth-child(5){transition-delay:.28s}
.sup .does .grid.rise.on .do:hover{transition-delay:0s;transform:translateY(-6px)}
@media(prefers-reduced-motion:reduce){
  .sup .does .grid.rise .do{opacity:1;transform:none;transition:none}
}

/* ── 「실제 이야기」 — Apple at Work 의 같은 칸 꼴(2026-10-01).
   제목 왼쪽 · 링크 오른쪽, 칸 두 장이 보이고 오른쪽 아래에 좌우 화살표.
   사진 자리는 색면으로 둔다 — 이 페이지엔 장비 사진을 더 넣지 않기로 했고,
   현장 사진은 얼굴·상호가 찍혀 있어 그대로 못 쓴다. 회사명도 안 쓴다. ───── */
.sup .tales{background:#000;padding:112px 0 104px;--fx:48px}
/* 가로 스크롤은 **가장자리까지** 간다. 여백을 바깥(.w)이 아니라 트랙
   **안쪽**에 두면, 칸이 그 여백 밑으로 흘러 나가 뭉툭하게 잘리지 않는다.
   맞춰 서는 자리도 scroll-padding 으로 같이 민다(2026-10-01 "양쪽 잘림"). */
.sup .tales .w{max-width:1520px;margin:0 auto;width:100%;min-width:0;
  padding:0;box-sizing:border-box}
.sup .tales .hd,.sup .tales .nav{padding-left:var(--fx);padding-right:var(--fx)}
.sup .tales .hd{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:38px}
.sup .tales h2{margin:0;font-size:clamp(28px,3.4vw,48px);font-weight:800;
  letter-spacing:-.045em;line-height:1.14;color:#fff}
.sup .tales h2 .ac{color:#2FD1BE}
.sup .tales .all{font-size:clamp(14px,1.1vw,17px);font-weight:700;color:#2FD1BE;
  letter-spacing:-.015em;white-space:nowrap}
.sup .tales .all i{font-style:normal;display:inline-block;transition:transform .2s ease}
.sup .tales .all:hover i{transform:translateX(3px)}
.sup .tales .track{display:flex;gap:26px;width:100%;min-width:0;max-width:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;box-sizing:border-box;
  padding:0 var(--fx) 4px;scroll-padding-left:var(--fx);scroll-padding-right:var(--fx)}
.sup .tales .track::-webkit-scrollbar{display:none}
.sup .st{position:relative;flex:0 0 calc(50% - 13px);min-width:0;scroll-snap-align:start;
  height:0;padding-top:34%;border-radius:18px;overflow:hidden;cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.5), 0 24px 46px -18px rgba(0,0,0,.85)}
.sup .st:hover{transform:translateY(-5px);
  box-shadow:0 6px 14px rgba(0,0,0,.6), 0 44px 76px -20px rgba(0,0,0,.95)}
/* **작업자가 일하는 장면**을 쓴다. 설비만 찍힌 컷은 이야기가 안 된다
   (2026-10-01 "작업자가 있는 사진을 넣어야지"). 사진은 사장님이 직접 고른
   현장 컷과, 현장 영상에서 뽑은 프레임이다 — 사진 폴더에는 사람이 든 컷이
   거의 없었다. 밝기 0.44 · 채도 0.62 로 구워 어둡게 깔고, 위에서 덮는
   그라데이션으로 글 자리를 만든다. */
.sup .st{background-size:cover;background-position:center;background-repeat:no-repeat}
/* 덮개는 **위에서 아래로** 짙다. 왼쪽을 덮는 방식이었는데, 작업자가 왼쪽에
   서 있는 사진이 오면 사람이 통째로 가려졌다. 글은 어차피 위에 앉으므로
   위만 덮고 아래(현장)는 살린다(2026-10-01). */
.sup .st::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(6,8,10,.82) 0%, rgba(6,8,10,.62) 26%,
    rgba(6,8,10,.18) 52%, rgba(6,8,10,.08) 76%, rgba(6,8,10,.34) 100%)}
.sup .st > *{position:relative;z-index:1}
.sup .st.s1{background-image:url("/public/static/art/site/site-patch.webp")}
.sup .st.s2{background-image:url("/public/static/art/site/site-hygiene.webp")}
.sup .st.s3{background-image:url("/public/static/art/site/site-cosmetic.webp")}
.sup .st.s4{background-image:url("/public/static/art/site/site-produce.webp")}
.sup .st.s5{background-image:url("/public/static/art/site/site-rewinder.webp")}
.sup .st.s6{background-image:url("/public/static/art/site/site-pouch.webp")}
.sup .st.s7{background-image:url("/public/static/art/site/site-punch.webp")}
.sup .st.s8{background-image:url("/public/static/art/site/site-wipes.webp")}
.sup .st.s9{background-image:url("/public/static/art/site/site-tank.webp")}
.sup .st.s10{background-image:url("/public/static/art/site/site-carton.webp")}
.sup .st .t{position:absolute;left:6.5%;top:8%;font-size:clamp(12px,1vw,15px);
  font-weight:700;letter-spacing:-.01em;color:rgba(255,255,255,.62)}
.sup .st h3{position:absolute;left:6.5%;top:18%;right:12%;margin:0;
  font-size:clamp(20px,2.1vw,33px);font-weight:800;letter-spacing:-.04em;
  line-height:1.32;color:#fff}
.sup .st .more{position:absolute;right:5%;bottom:8%;width:clamp(34px,3vw,46px);
  height:clamp(34px,3vw,46px);border-radius:999px;background:#fff;color:#101418;
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;
  transition:transform .2s ease}
.sup .st:hover .more{transform:scale(1.08)}
.sup .tales .nav{margin-top:38px;display:flex;gap:12px;justify-content:flex-end}
.sup .tales .nav button{width:46px;height:46px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;
  font-family:inherit;transition:background .18s ease, opacity .18s ease}
.sup .tales .nav button:hover{background:rgba(255,255,255,.26)}
.sup .tales .nav button:disabled{opacity:.3;cursor:default;background:rgba(255,255,255,.1)}

/* ── 「실패하지 않도록」 — Apple 의 가치관 칸 꼴. 밝은 바닥에 흰 칸.
   사장님 "우리는 고객이 장비를 구매함에 있어 실패를 하지않게 하는거야". ─── */
.sup .vals{background:#F4F5F7;color:#101418;padding:110px 40px 116px}
.sup .vals .w{max-width:1420px;width:100%;min-width:0}
.sup .vals .eb{margin:0 0 16px;font-size:13px;font-weight:800;letter-spacing:.09em;
  color:#39B8AC}
.sup .vals h2{margin:0 0 6px;font-size:clamp(28px,3.4vw,48px);font-weight:800;
  letter-spacing:-.045em;line-height:1.16;color:#101418}
.sup .vals h2 .ac{color:#39B8AC}
.sup .vals .lead{margin:24px 0 0;max-width:56ch;font-size:clamp(16px,1.5vw,20px);
  font-weight:500;line-height:1.72;letter-spacing:-.012em;color:#5b6472}
.sup .vals .lead b{color:#101418;font-weight:700}
.sup .vals .grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sup .vl{background:#fff;border-radius:20px;padding:38px 34px 34px;
  display:flex;flex-direction:column;align-items:flex-start;
  box-shadow:0 1px 2px rgba(16,20,24,.05), 0 16px 32px -16px rgba(16,20,24,.2)}
.sup .vl svg{width:38px;height:38px;color:#101418}
.sup .vl h3{margin:26px 0 0;font-size:clamp(21px,1.75vw,27px);font-weight:800;
  letter-spacing:-.035em;line-height:1.34;color:#101418}
.sup .vl p{margin:14px 0 0;font-size:clamp(14px,1.15vw,17px);font-weight:500;
  line-height:1.7;letter-spacing:-.012em;color:#6B7280}
.sup .vl{cursor:pointer;transition:transform .22s ease, box-shadow .22s ease}
.sup .vl:hover{transform:translateY(-5px);
  box-shadow:0 2px 4px rgba(16,20,24,.07), 0 26px 46px -18px rgba(16,20,24,.3)}
.sup .vl .more{margin-top:auto;padding-top:22px;font-size:15px;font-weight:700;
  letter-spacing:-.015em;color:#0E8878}
.sup .vl .more i{font-style:normal;display:inline-block;transition:transform .2s ease}
.sup .vl:hover .more i{transform:translateX(3px)}
@media(max-width:1040px){
  .sup .tales{padding:76px 0 72px;--fx:24px}
  .sup .st{flex:0 0 88%;padding-top:58%}
  .sup .vals{padding:76px 24px 80px}
  .sup .vals .grid{grid-template-columns:1fr;gap:16px}
  .sup .vl{padding:30px 26px 28px}
}

/* 이 페이지의 주제는 「준비된」이다(2026-10-01). 히어로의 SHIFT Ready 와
   끝의 「준비돼 있습니다」를 섹션 제목이 이어 준다 — 강조는 민트 한 색. */
.sup .does h2 .ac{color:var(--brand)}
.sup .cases h2 .sm{display:block;margin-top:10px;font-size:.52em;font-weight:700;
  letter-spacing:-.025em;color:var(--brand)}

/* 밝은 판 — 다크로 가는 칸은 히어로와 「준비된 라인」 둘뿐이고
   나머지는 전부 이쪽이다(2026-10-01). */
.sup .s-light{background:var(--paper);color:var(--ink)}
.sup .say.s-light p{color:var(--ink)}
.sup .say.s-light p b{color:#000}
.sup .say.s-light p .dim{color:var(--muted)}
.sup .say.s-light p .sub{color:var(--muted)}
.sup .say.s-light p .wm{color:var(--brand)}
.sup .end.s-light h2{color:var(--ink)}
.sup .end.s-light .cta a{background:var(--ink);color:#fff}
.sup .end.s-light .cta a:hover{background:#000}
.sup .end.s-light .cta a.q{background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line)}
.sup .end.s-light .cta a.q:hover{background:var(--grey)}

/* 자주 묻는 질문 — **맨 밑**에 두는 칸. 중간에 두면 클로징이 끊긴다.
   흰 카드 2열이고, 접히는 것은 details/summary 라 스크립트가 없어도 열린다.
   align-items:start 라야 한쪽이 열려도 옆 칸이 같이 늘어나지 않는다. */
.sup .faq{background:var(--grey);color:var(--ink);padding:100px 40px 112px}
.sup .faq .w{max-width:1280px}
.sup .faq .eb{margin:0 0 14px;font-size:clamp(15px,1.3vw,19px);font-weight:800;
  letter-spacing:.02em;color:var(--brand)}
.sup .faq h2{margin:0;font-size:clamp(28px,3.4vw,46px);font-weight:800;
  letter-spacing:-.045em;line-height:1.14;color:var(--ink)}
.sup .faq .lead{margin:18px 0 0;font-size:clamp(15px,1.25vw,17px);font-weight:600;
  letter-spacing:-.012em;color:var(--muted)}
.sup .faq .list{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;
  gap:18px;align-items:start}
.sup .qa{background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,20,24,.05), 0 12px 26px -16px rgba(16,20,24,.18);
  transition:box-shadow .22s ease}
.sup .qa:hover{box-shadow:0 2px 4px rgba(16,20,24,.07), 0 20px 38px -18px rgba(16,20,24,.26)}
.sup .qa summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  gap:16px;padding:26px 28px;font-size:clamp(16px,1.35vw,19px);font-weight:700;
  letter-spacing:-.03em;line-height:1.5;color:var(--ink)}
.sup .qa summary::-webkit-details-marker{display:none}
.sup .qa summary b{font-weight:800;color:var(--brand);margin-right:2px}
.sup .qa summary:hover{color:var(--brand)}
.sup .qa .pm{margin-left:auto;flex:0 0 auto;position:relative;width:17px;height:17px;
  margin-top:6px}
.sup .qa .pm::before,.sup .qa .pm::after{content:"";position:absolute;left:0;top:7px;
  width:17px;height:2px;border-radius:2px;background:#3d4653;
  transition:transform .22s ease}
.sup .qa .pm::after{transform:rotate(90deg)}
.sup .qa[open] .pm::after{transform:rotate(0deg)}
.sup .qa[open] summary{padding-bottom:6px}
.sup .qa .ans{padding:0 28px 28px}
.sup .qa .ans p{margin:0;font-size:clamp(14.5px,1.15vw,16px);font-weight:500;
  line-height:1.8;letter-spacing:-.012em;color:var(--muted)}
.sup .qa .ans p + p{margin-top:14px}
@media(max-width:900px){
  .sup .faq{padding:70px 24px 78px}
  .sup .faq .list{grid-template-columns:1fr;gap:14px}
  .sup .qa summary{padding:22px 22px}
  .sup .qa .ans{padding:0 22px 22px}
}

/* 클로징 두 칸은 **한 덩어리**로 읽혀야 한다. 「걱정하지 마십시오」가 78vh 를
   먹고 그 뒤에 section 기본 여백 144px 이 또 붙어 사이가 벌어졌다
   (2026-10-01 "사이 간격이 너무 길어 흐름이 끈겨"). 붙여 놓는다. */
.sup .say.big.s-light{min-height:0;padding:126px 40px 0}
.sup .end.s-light{padding-top:58px}
@media(max-width:700px){
  .sup .say.big.s-light{padding:78px 24px 0}
  .sup .end.s-light{padding-top:40px}
}

/* FAQ 칸을 키운다 — 너무 소심했다(같은 날). */
.sup .faq .list{gap:20px}
.sup .qa{border-radius:20px}
.sup .qa summary{padding:34px 34px;gap:18px;font-size:clamp(17px,1.5vw,21px);
  line-height:1.45}
.sup .qa summary b{font-size:.95em}
.sup .qa .pm{width:20px;height:20px;margin-top:8px}
.sup .qa .pm::before,.sup .qa .pm::after{width:20px;top:9px}
.sup .qa[open] summary{padding-bottom:10px}
.sup .qa .ans{padding:0 34px 32px}
.sup .qa .ans p{font-size:clamp(15px,1.2vw,17px);line-height:1.82}
@media(max-width:900px){
  .sup .qa summary{padding:26px 24px}
  .sup .qa .ans{padding:0 24px 26px}
}

/* 인트로 동안 첫 장이 위아래로 잘렸다 — 크게 띄운 첫 장을 줄(.rail)의 overflow:hidden 이
   줄 높이만큼만 보여 줬다(2026-10-01 사장님 「저기를 안짤리게 꽉 채워서」, cn /support 에서 먼저 고침).
   인트로 동안은 줄이 자르지 않고, 화면 밖은 .stage(100vh, overflow:hidden)가 자른다. 줄로 내려앉으면(.done) 다시 자른다. */
.sup .shots:not(.done) .rail{overflow:visible}

/* ── 휴대폰 가로 넘김(2026-10-01 「서포트 페이지에서 여기부분은 가로스크롤로 … 고르는일부터 섹션과 우리의 가치관도」).
   세로로 쌓이면 화면이 길어지고 말이 묻힌다 — 「어떤 상황」 · 「하는 일」 · 「가치관」 카드를 옆으로 넘긴다.
   줄은 화면 끝에서 끝까지, 첫 칸은 글 선. ── */
@media(max-width:760px){
  .sup .cases .grid,.sup .does .grid,.sup .vals .grid{display:flex !important;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:24px;margin-left:-24px;margin-right:-24px;padding:6px 24px 22px;scrollbar-width:none}
  .sup .cases .grid::-webkit-scrollbar,.sup .does .grid::-webkit-scrollbar,.sup .vals .grid::-webkit-scrollbar{display:none}
  .sup .cases .grid>.cs{flex:0 0 80vw;scroll-snap-align:start}
  .sup .does .grid>.do{flex:0 0 72vw;scroll-snap-align:start;min-height:200px}
  .sup .vals .grid>.vl{flex:0 0 80vw;scroll-snap-align:start}
  .sup .does .grid.rise .do{opacity:1;transform:none}
}