/* 3PL 솔루션 (/solutions/3pl, 2026-11-04) — 접두사 t- */
/* ---- 개요: 1PL~3PL ---- */
.t-pl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.t-pl li{padding:28px;border:1px solid var(--e-line);border-radius:var(--r-card);background:#fff}
.t-pl li.is-on{border-color:var(--e-text);background:var(--e-dark);color:#fff}
.t-pl-k{font-family:var(--font-head);font-size:15px;font-weight:800;letter-spacing:.12em;color:var(--e-red)}
.t-pl li.is-on .t-pl-k{color:var(--e-dsub)}
.t-pl h3{margin-top:10px;font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.03em}
.t-pl p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--e-sub)}
.t-pl li.is-on p{color:var(--e-dsub)}
/* ---- 요금 구성 ---- */
.t-fees{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:48px;counter-reset:fee}
.t-fee{position:relative;display:flex;flex-direction:column;padding:28px 22px 24px;border-radius:var(--r-card);background:#fff}
.t-fee+.t-fee::before{content:"";position:absolute;left:-12px;top:50%;width:12px;height:2px;background:var(--e-line)}
.t-fee-n{font-family:var(--font-head);font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--e-mute)}
.t-fee svg{width:40px;height:40px;margin-top:14px;color:var(--e-red)}
.t-fee h3{margin-top:16px;font-family:var(--font-head);font-size:20px;font-weight:800;letter-spacing:-.03em}
.t-fee p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--e-sub)}
.t-fee b{margin-top:auto;padding-top:18px;font-family:var(--font-head);font-size:15px;font-weight:700;line-height:1.5;color:var(--e-text)}
/* ---- CBM ---- */
.t-cbm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:48px}
.t-cube{display:flex;align-items:center;gap:24px;padding:32px;border:1px solid var(--e-line);border-radius:var(--r-card)}
.t-cube svg{flex:none;width:200px;height:auto}
.t-cube figcaption{font-size:16px;line-height:1.65;color:var(--e-sub)}
.t-cube figcaption b{display:block;font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--e-text)}
.t-cube figcaption span{display:block;margin-top:10px}
.t-calc{padding:32px;border-radius:var(--r-card);background:var(--e-bg2)}
.t-calc h3{font-family:var(--font-head);font-size:20px;font-weight:800;letter-spacing:-.03em}
.t-calc dl{margin-top:16px;border-top:1px solid var(--e-line)}
.t-calc dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--e-line);font-size:16px}
.t-calc dt{flex:none;color:var(--e-sub)}
.t-calc dd{text-align:right}
.t-calc .is-sum dd b{font-family:var(--font-head);font-size:20px;color:var(--e-red)}
.t-calc p{margin-top:14px;font-size:14px;line-height:1.6;color:var(--e-mute)}
.t-fit{margin-top:24px;padding:28px 32px;border:1px solid var(--e-line);border-radius:var(--r-card)}
.t-fit-h{font-family:var(--font-head);font-size:18px;font-weight:800}
.t-fit ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
.t-fit li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.55;color:var(--e-sub)}
.t-fit li b{flex:none;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:700;background:var(--e-bg2);color:var(--e-text)}
.t-fit li.is-good b{background:var(--e-text);color:#fff}
.t-fit li.is-bad b{border:1px solid var(--e-line);background:#fff;color:var(--e-mute)}
/* ---- 수작업 vs 시스템 ---- */
.t-vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;margin-top:48px}
.t-vs-col{padding:32px;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-card)}
.t-vs-col.is-sys{border-color:#fff;background:rgba(255,255,255,.06)}
.t-vs-tag{display:inline-flex;padding:6px 14px;border-radius:999px;font-family:var(--font-head);font-size:14px;font-weight:700;background:rgba(255,255,255,.12);color:var(--e-dsub)}
.t-vs-col.is-sys .t-vs-tag{background:var(--e-red);color:#fff}
.t-steps{margin-top:22px;counter-reset:st;display:grid;gap:10px}
.t-steps li{position:relative;padding:14px 16px 14px 52px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);font-size:16px;line-height:1.55;color:var(--e-dsub);counter-increment:st}
.t-steps li::before{content:counter(st);position:absolute;left:16px;top:14px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:700;background:rgba(255,255,255,.14);color:#fff}
.t-vs-col.is-sys .t-steps li{color:#fff}
.t-vs-col.is-sys .t-steps li::before{background:#fff;color:var(--e-dark)}
.t-steps b{font-weight:700;color:#fff}
.t-risk,.t-gain{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.t-risk li,.t-gain li{padding:6px 12px;border-radius:999px;font-size:14px}
.t-risk li{border:1px dashed rgba(255,255,255,.3);color:var(--e-dsub)}
.t-gain li{background:#fff;color:var(--e-dark);font-weight:600}
/* ---- 정산 예시 ---- */
/* 계약 조건 박스와 정산 표 박스의 위 · 아래 끝선을 맞춘다 (같은 높이로 늘림) */
.t-ex{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:20px;margin-top:48px;align-items:stretch}
.t-ex-terms{display:flex;flex-direction:column;padding:28px;border-radius:var(--r-card);background:var(--e-dark);color:#fff}
.t-ex-terms h3{font-family:var(--font-head);font-size:20px;font-weight:800}
.t-ex-terms ul{margin-top:14px}
.t-ex-terms li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:15px;line-height:1.5}
.t-ex-terms li span{flex:none;width:64px;color:var(--e-dsub)}
.t-ex-table{display:flex;overflow-x:auto;border:1px solid var(--e-line);border-radius:var(--r-card);background:#fff}
.t-ex-table table{width:100%;height:100%;min-width:520px;border-collapse:collapse;font-size:16px}
.t-ex-table th,.t-ex-table td{padding:16px 20px;border-bottom:1px solid var(--e-line);text-align:left}
.t-ex-table thead th{padding-top:20px;font-size:14px;font-weight:700;color:var(--e-mute);border-bottom:1.5px solid var(--e-text)}
.t-ex-table thead th:last-child{text-align:right}
.t-ex-table tbody th{width:110px}
.t-ex-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-ex-table tfoot th,.t-ex-table tfoot td{border-bottom:0;font-weight:700}
.t-ex-table tfoot td:nth-child(2){font-size:14px;font-weight:500;color:var(--e-sub)}
.t-ex-table tfoot td:last-child{font-family:var(--font-head);font-size:22px;color:var(--e-red)}
.t-ex-table:focus-visible{outline:2px solid var(--e-focus);outline-offset:3px}
/* ---- 히어로 모션 ---- */
.t-flow{animation:t-dash 1.6s linear infinite}
.t-box{animation:t-blink 3s ease-in-out infinite}
.t-box--2{animation-delay:1s}.t-box--3{animation-delay:2s}
@keyframes t-dash{to{stroke-dashoffset:-18}}
@keyframes t-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.t-flow,.t-box{animation:none}}
@media (max-width:1023px){
  .t-fees{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-fee+.t-fee::before{display:none}
  .t-cbm,.t-vs,.t-ex{grid-template-columns:1fr}
}
@media (max-width:767px){
  .t-pl,.t-fit ul{grid-template-columns:1fr}
  .t-pl{margin-top:40px}
  .t-fees{grid-template-columns:1fr}
  .t-cube{flex-direction:column;align-items:flex-start;padding:24px}
  .t-cube svg{width:160px}
  .t-calc,.t-fit,.t-vs-col,.t-ex-terms{padding:24px 20px}
  .t-ex-table table{min-width:0;font-size:14px}
  .t-ex-table th,.t-ex-table td{padding:12px 10px}
  .t-ex-table tfoot td:last-child{font-size:18px}
  .t-calc dl div{flex-direction:column;gap:2px}
  .t-calc dd{text-align:left}
}