/* ══ Y4 「분리」 — ../../v16/y3.css 위에 덮음 ═══════════════════════════════════
   물류의 허브 = 지그재그 타임라인(가운데 초록 선 · ✓ 불, 사진과 글이 좌우로 번갈아)
   소통의 허브 = 창구 넷 카드(언제부터 · 이럴 때 · 연락) + 연출 사진 — 창구 설명과 '어디로'를 한 곳에서만 */

/* 물류 — 지그재그 */
.zh{max-width:820px;margin-bottom:clamp(32px,4vw,56px)}
.zh h2{font-size:clamp(30px,3.6vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.15}
.zh .lede{margin-top:12px;color:var(--sub);font-size:clamp(16px,1.25vw,18px)}
.zline{position:relative;display:flex;flex-direction:column;gap:clamp(24px,3vw,44px)}
.zz{display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);align-items:center}
.zz .zp{grid-column:1;grid-row:1;aspect-ratio:3/2}
.zz .lamp{grid-column:2;grid-row:1;justify-self:center}
.zz .zt{grid-column:3;grid-row:1}
.zz.r .zp{grid-column:3}
.zz.r .zt{grid-column:1;text-align:right}
.zz.r .zt p:last-child{margin-left:auto}
.zn{font-size:clamp(42px,4.4vw,64px);font-weight:800;color:var(--acc);letter-spacing:-.05em;line-height:1}
.zt h3{margin-top:6px;font-size:clamp(26px,2.6vw,38px);font-weight:800;letter-spacing:-.035em}
.zt p:last-child{margin-top:8px;max-width:440px;color:var(--sub);font-size:16px}
.js .zz.rv{opacity:1;transform:none}
.js .zz .zp{opacity:0;transform:translateX(-28px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js .zz.r .zp{transform:translateX(28px)}
.js .zz .zt{opacity:0;transform:translateY(12px);transition:opacity .6s .15s,transform .6s var(--ease) .15s}
.zz.in .zp,.zz.in .zt,.s-still .zz .zp,.s-still .zz .zt{opacity:1;transform:none}

/* 소통 — 창구 넷 */
.chw{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:14px}
.chw .chp{min-height:100%}
.chg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.chc{display:flex;flex-direction:column;padding:24px;border-radius:var(--r)}
.chc .when{align-self:flex-start;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800}
.chc h3{margin-top:14px;font-size:clamp(24px,2.2vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.2}
.chc .one{margin-top:2px;font-size:15px;font-weight:700;opacity:.8}
.chc .lb{margin-top:18px;font-size:12.5px;font-weight:800;opacity:.7}
.chc ul{margin-top:6px}
.chc li{padding:8px 0;font-size:14.5px;font-weight:600;line-height:1.5;border-top:1px solid}
.chc.g{background:var(--acc);color:var(--fg)}
.chc.g .when{background:var(--fg);color:var(--acc)}
.chc.g li{border-color:rgba(17,21,19,.18)}
.chc.k,.chc.k2{color:#fff}
.chc.k{background:#2B332E}
.chc.k2{background:#353D38}
.chc.k .when,.chc.k2 .when{background:rgba(255,255,255,.12);color:var(--acc)}
.chc.k li,.chc.k2 li{border-color:rgba(255,255,255,.14)}
.chc.w{background:#fff;color:var(--fg)}
.chc.w .when{background:#FEE500;color:#191919}
.chc.w li{border-color:var(--line)}
.cha{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px}
.cha .mapb{width:auto;padding:0 14px 0 10px;font-size:14.5px}
.s3.ink .chn{margin-top:12px;color:rgba(255,255,255,.55)}
@media (max-width:1080px){
  .chw{grid-template-columns:1fr}
  .chw .chp{aspect-ratio:16/9;min-height:0}
}
@media (max-width:900px){
  .zline .tline3{left:19px;margin-left:0}
  .zz,.zz.r{grid-template-columns:40px minmax(0,1fr);row-gap:12px;column-gap:16px}
  .zz .lamp,.zz.r .lamp{grid-column:1;grid-row:1;align-self:start}
  .zz .zp,.zz.r .zp{grid-column:2;grid-row:1}
  .zz .zt,.zz.r .zt{grid-column:2;grid-row:2;text-align:left}
  .zz.r .zt p:last-child{margin-left:0}
  .js .zz .zp,.js .zz.r .zp{transform:translateY(16px)}
}
@media (max-width:600px){.chg{grid-template-columns:1fr}}