/* ============================================================
   HF LOGISTICS — Blueprint (시안 2A)
   흰 배경 + 인디고 / 괘선 기반 데이터 조판 / 한·영 병기
   ============================================================ */

:root{
  /* ground & ink — 중성색은 인디고 쪽으로 미세하게 기울인 블루그레이 */
  --ground:#FFFFFF;
  --panel:#F4F6FA;
  --panel-2:#EDF0F6;
  --ink:#0E1420;
  --ink-2:#2B3648;
  --muted:#5C6879;
  --line:#DDE2EA;
  --line-strong:#C3CBD8;

  /* accent */
  --indigo:#1D4ED8;
  --indigo-ink:#16327F;
  --indigo-wash:#EEF3FE;
  --navy:#131C34;

  /* semantic (accent와 분리) */
  --alert:#C02B1D;
  --alert-wash:#FCEEEC;
  --ok:#0F766E;
  --hold:#B45309;

  --maxw:1240px;
  --gutter:clamp(16px,4vw,48px);

  --ff-sans:"Noto Sans KR","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B111C;
    --panel:#121A28;
    --panel-2:#18212F;
    --ink:#E9EDF4;
    --ink-2:#C2CAD8;
    --muted:#8A95A7;
    --line:#26303F;
    --line-strong:#3A4657;
    --indigo:#6D96F7;
    --indigo-ink:#A9C2FB;
    --indigo-wash:#141F38;
    --navy:#080D18;
    --alert:#F1867A;
    --alert-wash:#2A1614;
    --ok:#4FD1C5;
    --hold:#E0A93C;
  }
}
:root[data-theme="dark"]{
  --ground:#0B111C;
  --panel:#121A28;
  --panel-2:#18212F;
  --ink:#E9EDF4;
  --ink-2:#C2CAD8;
  --muted:#8A95A7;
  --line:#26303F;
  --line-strong:#3A4657;
  --indigo:#6D96F7;
  --indigo-ink:#A9C2FB;
  --indigo-wash:#141F38;
  --navy:#080D18;
  --alert:#F1867A;
  --alert-wash:#2A1614;
  --ok:#4FD1C5;
  --hold:#E0A93C;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-size:15px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}

img{max-width:100%;display:block}
a{color:inherit}

:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:2px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 공통 조판 ---------- */

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.eyebrow{
  font-family:var(--ff-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--indigo);
  margin:0;
}
.eyebrow.dim{color:var(--muted)}

h1,h2,h3,h4{text-wrap:balance;margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.28}
h2{font-size:clamp(22px,3vw,30px)}
h3{font-size:17px;letter-spacing:-.012em}
p{margin:0}

.lede{font-size:clamp(15px,1.5vw,16.5px);color:var(--ink-2);line-height:1.82;max-width:62ch}
.note{font-size:12.5px;color:var(--muted);line-height:1.7}
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}

/* 섹션 헤더: 한·영 병기 */
.sec{padding-block:clamp(56px,7vw,92px);border-top:1px solid var(--line)}
.sec.flush{border-top:0}
.sec.panel{background:var(--panel)}

.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 28px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head .t{display:flex;flex-direction:column;gap:10px;min-width:0}
.sec-head h2 .en{
  font-family:var(--ff-mono);font-size:.46em;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-left:.75em;vertical-align:.32em;
}

/* ---------- 버튼 ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;font-size:14px;font-weight:700;font-family:var(--ff-sans);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn-primary{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn-primary:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:var(--panel)}
.btn-indigo{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.btn-indigo:hover{background:var(--indigo-ink);border-color:var(--indigo-ink)}
.btn .ar{font-family:var(--ff-mono);font-weight:400}

/* ---------- 유틸리티 바 ---------- */

.utility{background:var(--navy);color:#AEBBD4;border-bottom:1px solid rgba(255,255,255,.08)}
.utility .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;min-height:36px}
.utility span,.utility a{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}
.utility .dot{color:var(--indigo);margin-inline:.5em}
.utility a{color:#DCE4F5;text-decoration:none}
.utility a:hover{color:#fff}
.utility .right{display:flex;align-items:center;gap:14px}

/* ---------- 헤더 ---------- */

.masthead{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;min-width:0}
.brand img{display:block;width:auto;height:34px;max-width:100%}
.brand .light{display:none}
.masthead .brand img{height:38px}
.foot .brand img{height:36px}

/* 다크 테마에서는 흰 로고로 교체 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .masthead .brand .dark{display:none}
  :root:not([data-theme="light"]) .masthead .brand .light{display:block}
}
:root[data-theme="dark"] .masthead .brand .dark{display:none}
:root[data-theme="dark"] .masthead .brand .light{display:block}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  padding:9px 13px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ink-2);
  border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--indigo);border-bottom-color:var(--indigo)}
.nav .btn{margin-left:10px;padding:10px 18px;font-size:13px;border-bottom-width:1px}

.navtoggle{
  display:none;background:none;border:1px solid var(--line-strong);color:var(--ink);
  padding:8px 12px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;cursor:pointer;
}

@media (max-width:940px){
  .navtoggle{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ground);border-bottom:1px solid var(--line);padding:8px var(--gutter) 18px;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 2px;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{border-bottom-color:var(--line)}
  .nav .btn{margin:14px 0 0}
}

/* ---------- 히어로 ---------- */

.hero{border-bottom:1px solid var(--line)}
.hero .grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:0;align-items:stretch;
}
.hero .left{padding:clamp(44px,6vw,76px) clamp(28px,4vw,56px) clamp(44px,6vw,76px) 0;display:flex;flex-direction:column;gap:22px;justify-content:center}
.hero .right{border-left:1px solid var(--line);padding:clamp(28px,3.4vw,40px) 0 clamp(28px,3.4vw,40px) clamp(28px,4vw,56px)}

.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.2;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--indigo)}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

@media (max-width:940px){
  .hero .grid{grid-template-columns:1fr}
  .hero .left{padding:clamp(36px,7vw,56px) 0 32px}
  .hero .right{border-left:0;border-top:1px solid var(--line);padding:32px 0 clamp(36px,7vw,52px)}
}

/* ---------- 스케줄 보드 ---------- */

.board{display:flex;flex-direction:column;gap:14px;height:100%}
.board-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.board-top .wk{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--muted)}
.board-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

table.data{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.data th{
  font-family:var(--ff-mono);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:0 14px 9px 0;border-bottom:1px solid var(--line-strong);white-space:nowrap;
}
table.data td{
  padding:12px 14px 12px 0;border-bottom:1px solid var(--line);font-size:13px;vertical-align:baseline;white-space:nowrap;
}
table.data td:first-child{font-weight:700;letter-spacing:-.01em}
table.data td.num{font-family:var(--ff-mono);font-size:12.5px;color:var(--ink-2)}
table.data tr:last-child td{border-bottom:0}

.tag{
  display:inline-block;font-family:var(--ff-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;padding:3px 8px;white-space:nowrap;
}
.tag.open{background:var(--indigo-wash);color:var(--indigo)}
.tag.tight{background:var(--alert-wash);color:var(--alert)}
.tag.ask{background:var(--panel-2);color:var(--muted)}

/* ---------- 사실 스트립 ---------- */

.facts{border-bottom:1px solid var(--line);background:var(--panel)}
.facts .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.facts .cell{padding:clamp(20px,2.6vw,30px) clamp(16px,2.2vw,28px);border-left:1px solid var(--line)}
.facts .cell:first-child{border-left:0;padding-left:0}
.facts .cell:last-child{padding-right:0}
.facts .v{font-family:var(--ff-mono);font-size:clamp(20px,2.6vw,27px);font-weight:700;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.facts .v small{font-size:.58em;font-weight:500;letter-spacing:.02em;margin-left:.3em;color:var(--muted)}
.facts .k{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.55}

@media (max-width:820px){
  .facts .grid{grid-template-columns:repeat(2,1fr)}
  .facts .cell{border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .facts .cell:nth-child(-n+2){border-top:0}
  .facts .cell:nth-child(odd){border-left:0;padding-left:0}
  .facts .cell:nth-child(even){padding-right:0}
}

/* ---------- 문제 카드 (보류 사유) ---------- */

.risks{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.risks .r{background:var(--ground);padding:24px 22px;display:flex;flex-direction:column;gap:9px}
.risks .r .ix{font-family:var(--ff-mono);font-size:11px;font-weight:700;color:var(--alert);letter-spacing:.1em}
.risks .r h3{font-size:15.5px}
.risks .r p{font-size:13px;color:var(--muted);line-height:1.68}
@media (max-width:900px){.risks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.risks{grid-template-columns:1fr}}

/* ---------- 프로세스 (실제 순서를 갖는 단계) ---------- */

.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.flow .s{background:var(--ground);padding:20px 18px;display:flex;flex-direction:column;gap:7px;position:relative}
.flow .s .n{font-family:var(--ff-mono);font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.1em}
.flow .s b{font-size:14px;letter-spacing:-.012em}
.flow .s span{font-size:12.5px;color:var(--muted);line-height:1.6}
.flow .s.hot{background:var(--indigo-wash)}
.flow .s.hot .n{color:var(--indigo)}
.flow .s.hot b{color:var(--indigo-ink)}
.flow .s.hot::after{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--indigo)}
@media (max-width:1000px){.flow{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.flow{grid-template-columns:repeat(2,1fr)}}

/* ---------- 서비스 격자 (시안 2A 7분할) ---------- */

.svcs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svcs .s{background:var(--ground);padding:26px 24px;display:flex;gap:18px;text-decoration:none;transition:background .15s ease}
.svcs .s:hover{background:var(--panel)}
.svcs .s .n{font-family:var(--ff-mono);font-size:11px;font-weight:700;color:var(--indigo);letter-spacing:.1em;padding-top:3px;flex-shrink:0}
.svcs .s .b{display:flex;flex-direction:column;gap:6px;min-width:0}
.svcs .s h3{font-size:16px}
.svcs .s h3 .en{font-family:var(--ff-mono);font-size:9.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-left:.7em;vertical-align:.2em}
.svcs .s p{font-size:13px;color:var(--muted);line-height:1.68}
.svcs .cta{background:var(--indigo);color:#fff;grid-column:span 1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:26px 24px;text-decoration:none;transition:background .15s ease}
.svcs .cta:hover{background:var(--indigo-ink)}
.svcs .cta b{font-size:16.5px;line-height:1.45;letter-spacing:-.015em}
.svcs .cta span{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.86}
@media (max-width:820px){.svcs{grid-template-columns:1fr}}

/* ---------- 2열 분할 블록 ---------- */

.split{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.split > .c{background:var(--ground);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:16px}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* 정의형 목록 */
.deflist{display:flex;flex-direction:column;gap:0;margin:0}
.deflist .row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.deflist .row:last-child{border-bottom:0}
.deflist dt{font-family:var(--ff-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.deflist dd{margin:0;color:var(--ink-2);line-height:1.68}
@media (max-width:520px){.deflist .row{grid-template-columns:1fr;gap:3px}}

/* 체크 목록 */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.checks li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:12px;row-gap:2px;font-size:13.5px;line-height:1.7;
}
/* 표식은 1열 1행, 본문(b·span)은 모두 2열.
   열을 지정하지 않으면 두 번째 줄이 1열로 떨어져 제목을 오른쪽으로 밀어냅니다. */
.checks li::before{grid-column:1;grid-row:1}
.checks li > *{grid-column:2}
.checks li::before{
  content:"✓";font-family:var(--ff-mono);font-size:11px;font-weight:700;color:var(--indigo);
  border:1px solid var(--line-strong);width:20px;height:20px;display:grid;place-items:center;margin-top:3px;
}
.checks li b{display:block;font-weight:700;letter-spacing:-.01em}
.checks li span{color:var(--muted);font-size:12.8px}
.checks.no li::before{content:"×";color:var(--alert)}

/* 번호 있는 단계 목록 */
.steps{list-style:none;margin:0;padding:0;counter-reset:st;display:flex;flex-direction:column}
.steps li{
  counter-increment:st;display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;row-gap:2px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.steps li::before{grid-column:1;grid-row:1}
.steps li > *{grid-column:2}
.steps li:last-child{border-bottom:0}
.steps li::before{
  content:counter(st,decimal-leading-zero);
  font-family:var(--ff-mono);font-size:11px;font-weight:700;color:var(--indigo);letter-spacing:.08em;padding-top:4px;
}
.steps li b{display:block;font-size:14.5px;letter-spacing:-.012em}
.steps li span{display:block;font-size:13px;color:var(--muted);line-height:1.68;margin-top:3px}

/* ---------- 창고 / 파트너 ---------- */

.hubs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.hub{background:var(--ground);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:14px}
.hub .kind{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hub .kind .en{font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--indigo)}
.hub .partner{font-size:12px;color:var(--muted)}
.hub .partner b{color:var(--ink-2);font-weight:700}
.hub h3{font-size:19px;letter-spacing:-.02em}
.hub .addr{font-size:12.5px;color:var(--muted);line-height:1.6}
.hub ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line);padding-top:14px}
.hub ul li{position:relative;padding-left:15px;font-size:13px;color:var(--ink-2);line-height:1.62}
.hub ul li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;background:var(--indigo)}
@media (max-width:860px){.hubs{grid-template-columns:1fr}}

/* 거점 목록 */
.nodes{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.nodes .nd{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.nodes .nd .city{font-size:16px;font-weight:800;letter-spacing:-.02em}
.nodes .nd .city i{font-style:normal;font-family:var(--ff-mono);font-size:11px;font-weight:500;color:var(--muted);margin-left:.5em;letter-spacing:.06em}
.nodes .nd .desc{font-size:13px;color:var(--muted);line-height:1.62}
@media (max-width:700px){.nodes .nd{grid-template-columns:1fr;gap:5px}}

.st{font-family:var(--ff-mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;padding:3px 9px;white-space:nowrap;justify-self:start}
.st.live{background:var(--indigo-wash);color:var(--indigo)}
.st.plan{background:var(--panel-2);color:var(--muted)}

/* ---------- 이유 ---------- */

.reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.reasons .rr{background:var(--ground);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:10px}
.reasons .rr .n{font-family:var(--ff-mono);font-size:11px;font-weight:700;color:var(--indigo);letter-spacing:.12em}
.reasons .rr h3{font-size:17px;letter-spacing:-.02em}
.reasons .rr p{font-size:13.5px;color:var(--muted);line-height:1.74}
@media (max-width:760px){.reasons{grid-template-columns:1fr}}

/* ---------- 연혁 ---------- */

.hist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.hist .h{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;padding:15px 0;border-bottom:1px solid var(--line);align-items:baseline}
.hist .h time{font-family:var(--ff-mono);font-size:12.5px;font-weight:600;color:var(--indigo);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.hist .h p{font-size:14px;letter-spacing:-.008em}
.hist .h.next time{color:var(--muted)}
@media (max-width:520px){.hist .h{grid-template-columns:1fr;gap:3px}}

/* ---------- 전면 다크 블록 ---------- */

.slab{background:var(--navy);color:#EAF0FF}
.slab .wrap{padding-block:clamp(52px,6.5vw,84px)}
.slab h2{color:#fff}
.slab .lede{color:#B9C6E2}
.slab .eyebrow{color:#7EA0F2}
.slab .rule{border-top:1px solid rgba(255,255,255,.14)}

/* ---------- 문의 ---------- */

.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.contact > div{background:var(--ground);padding:clamp(26px,3.2vw,38px);display:flex;flex-direction:column;gap:18px}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--ff-mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--ff-sans);font-size:14px;color:var(--ink);background:var(--ground);
  border:1px solid var(--line-strong);padding:11px 13px;width:100%;
}
.field textarea{resize:vertical;min-height:96px;line-height:1.66}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--indigo);outline-offset:-1px;border-color:var(--indigo)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.formnote{font-size:12px;color:var(--muted);line-height:1.66}

/* ---------- 푸터 ---------- */

.foot{background:var(--navy);color:#9CACC9;border-top:1px solid rgba(255,255,255,.08)}
.foot .top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:36px 28px;padding-block:clamp(40px,5vw,60px)}
.foot .brand .dark{display:none}
.foot .brand .light{display:block}
.foot h4{font-family:var(--ff-mono);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7EA0F2;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot ul a,.foot ul li{font-size:13px;color:#B7C4DC;text-decoration:none;line-height:1.6}
.foot ul a:hover{color:#fff}
.foot .co{display:flex;flex-direction:column;gap:12px;max-width:34ch}
.foot .co p{font-size:12.5px;line-height:1.72;color:#94A5C4}
.foot .bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:20px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.foot .bottom span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;color:#6F80A0;text-transform:uppercase}
@media (max-width:860px){.foot .top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot .top{grid-template-columns:1fr}}

/* ---------- 페이지 헤드 (서브페이지) ---------- */

.phead{border-bottom:1px solid var(--line);background:var(--panel)}
.phead .wrap{padding-block:clamp(40px,5.5vw,68px);display:flex;flex-direction:column;gap:16px}
.phead h1{font-size:clamp(27px,4vw,42px);letter-spacing:-.032em;line-height:1.22}
.phead .crumb{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.phead .crumb a{color:var(--indigo);text-decoration:none}

/* 근거 인용 */
.cite{
  border-left:2px solid var(--indigo);background:var(--indigo-wash);
  padding:14px 18px;font-size:12.5px;color:var(--ink-2);line-height:1.7;
}
.cite b{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);display:block;margin-bottom:5px}

/* ============================================================
   히어로 슬라이더 — 해상 · 항공 · 중장비 3슬라이드
   .hp-art 안의 <svg>를 <img>로 바꾸면 실사진으로 교체됩니다.
   JS가 .slides 에 .js-on 을 붙이기 전에는 첫 슬라이드가 그대로 보입니다.
   ============================================================ */

.hero3{background:var(--navy);color:#EAF0FF;border-bottom:1px solid var(--line);position:relative}

/* 모든 슬라이드를 같은 그리드 칸에 겹쳐 둡니다.
   절대배치를 쓰지 않으므로 높이는 가장 큰 슬라이드에 맞춰집니다. */
.slides{display:grid}
.slide{grid-area:1/1;min-width:0}
.slides.js-on .slide{opacity:0;visibility:hidden;transition:opacity .55s ease}
.slides.js-on .slide.is-active{opacity:1;visibility:visible}

.sgrid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  padding-block:clamp(38px,5vw,64px);
}
.stext{display:flex;flex-direction:column;gap:20px;min-width:0}
.stext .eyebrow{color:#7EA0F2}
.stext h1{font-size:clamp(28px,4.4vw,50px);line-height:1.2;letter-spacing:-.035em;color:#fff}
.stext h1 em{font-style:normal;color:#8FAEFF}
.stext .lede{color:#B4C3E0;max-width:46ch}
.stext .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.hero3 .btn-ghost{color:#EAF0FF;border-color:rgba(255,255,255,.3)}
.hero3 .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero3 .btn-primary{background:#fff;color:var(--navy);border-color:#fff}
.hero3 .btn-primary:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}

.hp-art{
  position:relative;width:100%;aspect-ratio:16/10;max-width:100%;
  background:#111A30;border:1px solid rgba(126,160,242,.22);overflow:hidden;
}
.hp-art svg,.hp-art img{display:block;width:100%;height:100%;object-fit:cover}

/* 슬라이드 선택 탭 */
.hnav{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid rgba(255,255,255,.14);
}
.hdot{
  flex:1 1 0;min-width:150px;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:16px 18px 18px;background:none;border:0;cursor:pointer;
  border-left:1px solid rgba(255,255,255,.14);
  color:#8FA1C4;text-align:left;font-family:var(--ff-sans);
  transition:background .18s ease,color .18s ease;position:relative;
}
.hdot:first-child{border-left:0}
.hdot:hover{background:rgba(255,255,255,.05);color:#DCE5F8}
.hdot .n{font-family:var(--ff-mono);font-size:10px;font-weight:600;letter-spacing:.18em}
.hdot .t{font-size:13.5px;font-weight:700;letter-spacing:-.012em}
.hdot[aria-selected="true"]{color:#fff;background:rgba(126,160,242,.1)}
.hdot[aria-selected="true"] .n{color:#7EA0F2}
.hdot .bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--indigo)}
.hdot[aria-selected="true"] .bar{width:100%;transition:width linear}

@media (max-width:900px){
  .sgrid{grid-template-columns:1fr;padding-block:clamp(32px,6vw,48px)}
  .stext{order:1}
  .hp-art{order:2;aspect-ratio:16/9}
  .hdot{min-width:0;flex:1 1 33%;padding:13px 12px 15px}
  .hdot .t{font-size:12px}
}

/* ---------- 부문 2축 ---------- */

.divs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.divs .d{background:var(--ground);padding:clamp(26px,3.2vw,36px);display:flex;flex-direction:column;gap:16px}
.divs .d .tag2{
  font-family:var(--ff-mono);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--indigo);
}
.divs .d h3{font-size:21px;letter-spacing:-.024em}
.divs .d .sub{font-size:13px;color:var(--muted);line-height:1.66}
.divs .d ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.divs .d ul li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;
}
.divs .d ul li b{font-weight:700;letter-spacing:-.01em}
.divs .d ul li span{font-size:12px;color:var(--muted);text-align:right}
@media (max-width:860px){.divs{grid-template-columns:1fr}}

/* ============================================================
   모션 — 화물은 움직입니다
   1) 로드 시 도면이 제도되듯 선이 그려짐 (블루프린트니까)
   2) 그 뒤 상시 : 선박 롤링 · 항공기 활주 · 트레일러 주행, 바퀴 회전
   3) 아래 섹션은 화면 진입 시 올라오며 등장 (JS가 클래스를 붙임)
   prefers-reduced-motion 이면 전부 정지 상태로 보입니다.
   ============================================================ */

@keyframes hf-draw{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
@keyframes hf-fill{from{fill-opacity:0}to{fill-opacity:1}}
@keyframes hf-drift{to{stroke-dashoffset:-320}}
@keyframes hf-spin{to{transform:rotate(360deg)}}

/* 패널별 시차 */
.hpanels .hp:nth-child(1) .hp-art{--dly:.20s}
.hpanels .hp:nth-child(2) .hp-art{--dly:.42s}
.hpanels .hp:nth-child(3) .hp-art{--dly:.64s}

/* 1) 제도되듯 그려지는 선 */
.hp-art .art :is(path,rect,circle):not(.w1):not(.w2):not(.w3){
  stroke-dasharray:1600;
  animation:
    hf-draw 1.5s cubic-bezier(.28,.76,.32,1) var(--dly,0s) both,
    hf-fill 1s ease calc(var(--dly,0s) + .72s) both;
}
/* 라벨과 수면선은 지연 없이 처음부터 보입니다.
   지연 뒤 나타나게 하면 캡처·저사양 환경에서 내용이 사라질 수 있습니다. */

/* 수면 · 지면 · 노면 흐름 */
.hp-art .w1{animation:hf-drift 6s  linear infinite}
.hp-art .w2{animation:hf-drift 9s  linear infinite}
.hp-art .w3{animation:hf-drift 12s linear infinite}

/* 2) 상시 주행 */
@keyframes hf-sail{
  0%,100%{transform:translateY(0) rotate(0deg)}
  28%    {transform:translateY(-4px) rotate(.8deg)}
  72%    {transform:translateY(3px) rotate(-.7deg)}
}
@keyframes hf-taxi{
  0%,100%{transform:translate(0,0)}
  30%    {transform:translate(4px,-3px)}
  70%    {transform:translate(-3px,1px)}
}
@keyframes hf-road{
  0%,100%{transform:translateY(0)}
  20%{transform:translateY(-1.8px)}
  45%{transform:translateY(1px)}
  70%{transform:translateY(-1.3px)}
  90%{transform:translateY(.7px)}
}
@keyframes hf-boom{
  0%,100%{transform:rotate(0deg)}
  50%    {transform:rotate(-3deg)}
}

.hp-art .ship,.hp-art .plane,.hp-art .rig,
.hp-art .wheel,.hp-art .roller,.hp-art .boom{
  transform-box:fill-box;transform-origin:center;
}
.hp-art .ship {transform-origin:50% 84%;animation:hf-sail 5s   ease-in-out infinite}
.hp-art .plane{                        animation:hf-taxi 4.6s ease-in-out infinite}
.hp-art .rig  {                        animation:hf-road 1.1s ease-in-out infinite}
.hp-art .wheel {animation:hf-spin 1.3s linear infinite}
.hp-art .roller{animation:hf-spin 2.1s linear infinite}
.hp-art .boom  {transform-origin:88% 88%;animation:hf-boom 3.6s ease-in-out infinite}

/* 슬라이드 전환마다 도면을 다시 그립니다.
   활성 슬라이드에서만 애니메이션이 돌도록 해 전환할 때 자연히 재생됩니다. */
.slides.js-on .slide .hp-art .art :is(path,rect,circle):not(.w1):not(.w2):not(.w3){animation:none}
.slides.js-on .slide.is-active .hp-art .art :is(path,rect,circle):not(.w1):not(.w2):not(.w3){
  animation:hf-draw 1.4s cubic-bezier(.28,.76,.32,1) both,
            hf-fill .9s ease .68s both;
}

/* 슬라이드 문구도 순차 등장 */
@keyframes hf-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.slides.js-on .slide .stext > *{opacity:0}
.slides.js-on .slide.is-active .stext > *{animation:hf-rise .6s cubic-bezier(.22,.72,.28,1) both}
.slides.js-on .slide.is-active .stext > *:nth-child(1){animation-delay:.06s}
.slides.js-on .slide.is-active .stext > *:nth-child(2){animation-delay:.14s}
.slides.js-on .slide.is-active .stext > *:nth-child(3){animation-delay:.22s}
.slides.js-on .slide.is-active .stext > *:nth-child(4){animation-delay:.30s}

/* 3) 스크롤 등장 — JS가 .hf-rv 를 붙인 뒤 진입 시 .in 추가.
      JS가 없으면 클래스가 붙지 않아 처음부터 보입니다. */
.hf-rv{
  opacity:0;transform:translateY(26px);
  transition:opacity .6s ease,transform .68s cubic-bezier(.2,.75,.28,1);
}
.hf-rv.in{opacity:1;transform:none}

/* 스케줄 보드 행은 한 줄씩 */
.hf-row{opacity:0;transform:translateX(-14px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.75,.28,1)}
.hf-row.in{opacity:1;transform:none}

/* 4) 마감 임박 — 상태를 글자 밖에서도 읽히게 */
@keyframes hf-tight{
  0%,100%{background:var(--alert-wash)}
  50%    {background:color-mix(in srgb,var(--alert) 26%,var(--alert-wash))}
}
.tag.tight{animation:hf-tight 2.2s ease-in-out infinite}

/* 5) 스크롤 시 헤더 분리 */
.masthead{transition:box-shadow .22s ease}
.masthead.scrolled{box-shadow:0 8px 26px rgba(14,20,32,.09)}
:root[data-theme="dark"] .masthead.scrolled{box-shadow:0 8px 26px rgba(0,0,0,.45)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .masthead.scrolled{box-shadow:0 8px 26px rgba(0,0,0,.45)}
}

@media (prefers-reduced-motion:reduce){
  .hf-rv,.hf-row{opacity:1;transform:none;transition:none}
  .slides.js-on .slide .stext > *{opacity:1}
  .hp-art .art :is(path,rect,circle),
  .hp-art .art text{stroke-dasharray:none}
}

/* ============================================================
   열 수 유틸 — 반드시 파일 맨 뒤에 둡니다.
   인라인 style 로 grid-template-columns 를 주면 미디어쿼리가
   무시돼 좁은 화면에서 가로로 넘칩니다. 대신 이 클래스를 씁니다.
   ============================================================ */
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-5{grid-template-columns:repeat(5,1fr)}
.svcs .cta.wide{grid-column:span 2}

@media (max-width:1040px){
  .cols-4,.cols-5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .cols-3,.cols-4,.cols-5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .cols-3,.cols-4,.cols-5{grid-template-columns:1fr}
  .svcs .cta.wide{grid-column:auto}
}
@media (max-width:820px){
  .svcs .cta.wide{grid-column:auto}
}

/* 초소형 화면 (360~480px) 보정 */
@media (max-width:480px){
  .hdot{padding:11px 10px 13px;min-height:58px}   /* 탭 터치 영역 확보 */
  .hdot .t{font-size:11.5px;line-height:1.35}
  .sgrid{gap:20px}
  .stext{gap:16px}
  .facts .v{font-size:22px}
  .facts .k{font-size:12px}
  .btn{padding:12px 18px}
  .cta .btn{flex:1 1 auto;justify-content:center}  /* 버튼이 한 줄에 안 맞으면 꽉 차게 */
}