/* ══ Y5 「정리」 — ../../v16/y3.css · ../../v18/y4.css 위에 덮음 ═══════════════════
   홈 가공형 3PL(.sp5 사진 칸 5 · .fx3) · 홈 소통 짧게(.tk5) · 홈 위치 띠 시간(.tm5)
   서비스 10단계(.f10 — 묶음 띠 + 단계 칸) · 담당자 창구 넷 한 줄(.chg.c4) */

/* 홈 — 가공형 3PL */
.sp5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sp5i{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:#fff;transition:background .2s}
.sp5i:hover{background:#FAFCF7}
.sp5i .sp{aspect-ratio:4/3;border-radius:0}
.sp5i .tx{padding:16px 18px 20px}
.sp5i h3{font-size:clamp(19px,1.6vw,22px);font-weight:800;letter-spacing:-.03em}
.sp5i p{margin-top:5px;color:var(--sub);font-size:14px;line-height:1.55}
.js .sp5 .sp5i{opacity:0;transform:translateY(14px);transition:opacity .5s calc(var(--i) * .08s),transform .5s var(--ease) calc(var(--i) * .08s),background .2s}
.sp5.in .sp5i,.s-still .sp5 .sp5i{opacity:1;transform:none}
.fx3w{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-top:14px;padding:20px 24px;border-radius:var(--r);background:var(--fg);color:#fff}
.fx3{display:flex;flex-wrap:wrap;gap:12px 36px}
.fx3 li{display:flex;align-items:baseline;gap:10px}
.fx3 b{font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.03em;color:var(--acc);white-space:nowrap}
.fx3 span{font-size:14.5px;color:rgba(255,255,255,.82)}
.fx3w .more{color:#fff}

/* 홈 — 소통 짧게 */
.tk5{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,48px);align-items:center}
.tk5 .tkp{aspect-ratio:4/3}
.tk5 ol{counter-reset:t}
.tk5 li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:baseline;padding:20px 0;border-top:1px solid rgba(255,255,255,.16)}
.tk5 li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.tk5 li b{font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.03em;color:var(--acc)}
.tk5 li span{font-size:15.5px;color:rgba(255,255,255,.85)}
.tk5 .more{margin-top:24px;color:#fff}

/* 홈 — 위치 띠 시간 */
.tm5{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
.tm5 li{padding:12px 14px;border-radius:var(--r);background:var(--tint);font-size:13.5px;color:var(--sub);line-height:1.45}
.tm5 b{display:block;font-size:20px;font-weight:800;color:var(--fg);letter-spacing:-.02em}

/* 서비스 — 10단계 */
.f10 .bds{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin-bottom:8px}
.f10 .bd{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:11px 12px;white-space:nowrap;border-radius:var(--r);font-size:14.5px;font-weight:800;transition:filter .2s}
.f10 .bd:hover{filter:brightness(1.06)}
.f10 .bd span{display:inline-flex}
.f10 .bd svg{width:15px;height:15px}
.f10 .k{--c:var(--fg);--o:#fff}
.f10 .g{--c:var(--acc);--o:var(--fg)}
.f10 .t{--c:#CFE6B0;--o:var(--fg)}
.f10 .bd{background:var(--c);color:var(--o)}
.f10 ol{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.f10 li{position:relative;display:flex;flex-direction:column;min-height:132px;padding:14px 14px 16px;border-radius:var(--r);background:var(--tint);border-top:5px solid var(--c)}
.f10 li .n{font-size:13px;font-weight:800;color:var(--acc-d)}
.f10 li b{margin-top:auto;font-size:clamp(18px,1.55vw,22px);font-weight:800;letter-spacing:-.03em;line-height:1.2;word-break:keep-all}
.f10 li .tg{display:none}
.f10 li:not(:last-child)::after{content:"";position:absolute;right:-8px;top:-5px;width:8px;height:5px;background:var(--c)}
.js .f10 li{opacity:0;transform:translateY(10px);transition:opacity .4s calc(var(--i) * .07s),transform .4s var(--ease) calc(var(--i) * .07s)}
.f10.in li,.s-still .f10 li{opacity:1;transform:none}
.s-still .f10 li,.s-still .sp5 .sp5i{transition:none!important}

/* 담당자 — 창구 넷 한 줄 */
.chg.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.chg.c4 .cha{flex-direction:column}
.chg.c4 .cha .mapb{width:100%}

/* 문의 — 글 속 링크 */
.lede a.ul{border-bottom:2px solid var(--acc);font-weight:700;color:var(--fg)}

@media (max-width:1180px){
  .sp5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sp5i{grid-column:span 2}
  .sp5i:nth-child(n+4){grid-column:span 3}
  .chg.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .tk5{grid-template-columns:1fr}
  .tk5 .tkp{aspect-ratio:16/9}
  .tk5 li{grid-template-columns:1fr;gap:4px;padding:16px 0}
  .f10 .bds{display:none}
  .f10 ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f10 li{min-height:0;padding:12px 14px 14px}
  .f10 li b{margin-top:6px}
  .f10 li .tg{display:block;margin-top:8px;align-self:flex-start;padding:2px 8px;border-radius:3px;background:var(--c);color:var(--o);font-size:12px;font-weight:800}
  .f10 li::after{display:none}
}
@media (max-width:600px){
  .sp5{grid-template-columns:1fr}
  .sp5i,.sp5i:nth-child(n+4){grid-column:auto;flex-direction:row}
  .sp5i .sp{flex:0 0 38%;aspect-ratio:auto;min-height:118px}
  .sp5i .tx{padding:14px 16px}
  .fx3{flex-direction:column;gap:8px}
  .tm5{grid-template-columns:1fr 1fr}
  .tm5 li:last-child{grid-column:1/3}
  .chg.c4{grid-template-columns:1fr}
}