/* ============================================================
   FARMKO GLS — E-Service 화물 추적 (tracking.html)
   redesign.css / redesign-sub.css 토큰 위에 얹는다.
   ============================================================ */

/* ── 조회 폼 ─────────────────────────────────────────── */
.trk-form{border-top:2px solid var(--ink);padding:24px 0 0}
.trk-types{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.trk-row{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:10px;align-items:end}
.trk-row.no-year{grid-template-columns:minmax(0,1fr) auto}
.trk-row.no-year .trk-year{display:none}
.trk-f label{display:block;font-size:12.5px;font-weight:600;color:var(--steel);margin:0 0 7px}
.trk-f input,.trk-f select{font:inherit;font-size:16px;width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink)}
.trk-f input:focus,.trk-f select:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}
.trk-f input{text-transform:uppercase;letter-spacing:.02em}
.trk-f input::placeholder{text-transform:none;letter-spacing:0;color:#93A09E}
.trk-row .btn{padding:14px 30px}
.trk-row .btn[disabled]{opacity:.6;cursor:wait}
.trk-hint{font-size:13px;color:var(--steel);margin:12px 0 0}

/* ── 결과 ───────────────────────────────────────────── */
.trk-out{margin-top:40px}
.trk-out:empty{display:none}
.trk-sum{border-top:2px solid var(--ink);padding:22px 0 0}
.trk-sum-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.trk-sum-hd h3{margin:0;font-size:21px;font-weight:700;letter-spacing:-.025em}
.trk-badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:2px;background:var(--panel);color:var(--ink)}
.trk-badge.ok{background:var(--clear);color:#fff}
.trk-badge i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.trk-route{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trk-route .p small{display:block;font-size:12px;color:var(--steel);margin-bottom:3px}
.trk-route .p b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.trk-route .p:last-child{text-align:right}
.trk-route svg{width:44px;height:16px;fill:none;stroke:var(--steel);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trk-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0}
.trk-kv div{padding:16px 18px 16px 0;border-bottom:1px solid var(--line)}
.trk-kv dt{font-size:12px;color:var(--steel);margin:0 0 4px}
.trk-kv dd{margin:0;font-size:15px;font-weight:500;word-break:break-all}

/* 타임라인 */
.trk-tl-hd{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--steel);margin:38px 0 6px}
.trk-tl{list-style:none;margin:0;padding:0}
.trk-tl li{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;padding:16px 0 16px 22px;border-bottom:1px solid var(--line)}
.trk-tl li::before{content:"";position:absolute;left:0;top:23px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--steel);background:var(--paper)}
.trk-tl li:first-child::before{background:var(--mark);border-color:var(--mark)}
.trk-tl li.todo::before{border-style:dashed}
.trk-tl li.todo{color:var(--steel)}
.trk-tl .at{font-size:14px;color:var(--steel)}
.trk-tl .t{font-size:15.5px;font-weight:600;letter-spacing:-.015em;margin:0}
.trk-tl .d{font-size:14px;color:#36423F;margin:3px 0 0}
.trk-tl li.todo .t{font-weight:500}

/* 다건 후보 */
.trk-cands{border-top:2px solid var(--ink)}
.trk-cands button{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;text-align:left;font:inherit;background:none;border:0;border-bottom:1px solid var(--line);padding:15px 0;cursor:pointer;color:inherit}
.trk-cands button:hover{background:var(--panel)}
.trk-cands small{display:block;font-size:12px;color:var(--steel)}
.trk-cands .go{font-size:13px;font-weight:600;color:var(--mark)}

.trk-src{margin-top:22px;font-size:12.5px;color:var(--steel);line-height:1.7}

@media (max-width:820px){
  .trk-row{grid-template-columns:minmax(0,1fr) 96px}
  .trk-row .btn{grid-column:1/-1}
  .trk-row.no-year{grid-template-columns:1fr}
  .trk-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trk-tl li{grid-template-columns:1fr;gap:2px}
  .trk-cands button{grid-template-columns:1fr auto}
  .trk-cands button span:nth-child(2),.trk-cands button span:nth-child(3){display:none}
}

/* ── 선사 사이트 연결 ───────────────────────────────── */
.trk-carriers{margin-top:64px;border-top:2px solid var(--ink);padding-top:24px}
.trk-car-hd h3{margin:0 0 8px;font-size:19px;font-weight:700;letter-spacing:-.025em}
.trk-car-hd p{margin:0 0 20px;font-size:14.5px;color:var(--steel);max-width:70ch}
.trk-car-in{max-width:420px;margin:0 0 16px}
.trk-car-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.trk-car{position:relative;display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;color:inherit;background:#fff;border:1px solid var(--line);border-radius:2px;padding:14px 40px 14px 16px;cursor:pointer}
.trk-car:hover{border-color:var(--ink)}
.trk-car b{font-size:15px;font-weight:600}
.trk-car small{font-size:12.5px;color:var(--steel)}
.trk-car svg{position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;fill:none;stroke:var(--steel);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trk-car.is-hit{border-color:var(--mark);box-shadow:inset 0 0 0 1px var(--mark)}
.trk-car.is-hit svg{stroke:var(--mark)}
.trk-car-msg{font-size:13.5px;color:var(--clear);margin:14px 0 0;min-height:1.4em}
@media (max-width:820px){ .trk-car-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }