/*
Theme Name: 제조·산업 시안 (Industrial)
Theme URI: https://example.com/
Author: 허브팜스
Description: 철구조물 OEM 제조 + 자체 개발 제품 기업을 위한 워드프레스 블록 테마 시안. 사진 주도형 산업 레이아웃.
Version: 0.2.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: mfg
*/

:root{
  --navy-900:#081627;
  --navy-800:#0e2340;
  --navy-700:#16345a;
  --orange:#ff6a13;
  --orange-600:#dd5608;
  --ink:#10192a;
  --ink-2:#4a5a70;
  --ink-3:#7b8ca3;
  --ink-4:#5f7186;
  --line:#dde3ea;
  --paper:#f2f5f8;
  --ease:cubic-bezier(.16,1,.3,1);
}

body{ -webkit-font-smoothing:antialiased }
/* 섹션은 각자 여백을 갖는다. 워드프레스 기본 블록 간격은 겹치므로 끈다. */
.wp-site-blocks > * + *, .wp-site-blocks > main.wp-block-group > * + *{ margin-block-start:0 !important }
.wp-site-blocks{ overflow-x:visible }
a{ text-decoration:none }
img{ display:block }

/* ---------- 공통 타이포 ---------- */
.wp-site-blocks h1,.wp-site-blocks h2,.wp-site-blocks h3,.wp-site-blocks h4{
  letter-spacing:-.035em; line-height:1.12; font-weight:800; color:var(--ink);
}
.wp-site-blocks h1,.wp-site-blocks h2,.wp-site-blocks h3{ word-break:keep-all }
.wp-site-blocks h2{ font-size:clamp(1.9rem,3.4vw,3rem) !important }
.wp-site-blocks h3{ font-size:clamp(1.15rem,1.6vw,1.45rem) !important; font-weight:700 }
.mf-eyebrow{
  font-family:Archivo,Pretendard,sans-serif; font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--orange); margin:0 0 14px !important;
}
.mf-eyebrow.is-light{ color:#ff9552 }
/* 구성(constrained) 레이아웃은 폭이 좁은 자식을 가운데로 밀어낸다. 본문 리드는 왼쪽에 붙인다. */
.mf-lead{
  font-size:1.05rem; line-height:1.85; color:var(--ink-2); max-width:62ch;
  margin-left:0 !important; margin-right:auto !important;
}
.mf-nobr{ white-space:nowrap }

/* ---------- 버튼 ---------- */
.wp-block-button__link{
  border-radius:2px !important; font-weight:700; letter-spacing:-.01em;
  padding:16px 30px !important; font-size:.98rem;
  transition:transform .35s var(--ease), background-color .25s, box-shadow .35s var(--ease);
}
.wp-block-button__link:hover{ transform:translateY(-2px) }
.mf-btn-primary .wp-block-button__link{
  background:var(--orange) !important; color:#fff !important;
  box-shadow:0 10px 26px -12px rgba(255,106,19,.9);
}
.mf-btn-primary .wp-block-button__link:hover{ background:var(--orange-600) !important }
.mf-btn-ghost .wp-block-button__link{
  background:transparent !important; color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.mf-btn-ghost .wp-block-button__link:hover{
  box-shadow:inset 0 0 0 1px #fff; background:rgba(255,255,255,.08) !important;
}
.mf-btn-dark .wp-block-button__link{ background:var(--navy-800) !important; color:#fff !important }

/* ---------- DRAFT 띠 ---------- */
.mf-draft{ background:var(--navy-900); padding:9px 20px }
.mf-draft p{ margin:0; color:#8fa6c0; font-size:.75rem; text-align:center }

/* ---------- 헤더 ---------- */
.mf-header{ background:#fff; border-bottom:1px solid var(--line); position:relative; z-index:20 }
.mf-brand{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; background:var(--navy-800); color:#fff;
  font-family:Archivo,sans-serif; font-weight:800; font-size:.82rem; letter-spacing:.04em;
}
.mf-header .wp-block-site-title a{ color:var(--ink) !important }
.mf-nav a:not(.wp-block-button__link){
  color:var(--ink-2); font-size:.93rem; font-weight:600; position:relative; padding:6px 0;
  transition:color .2s;
}
.mf-nav a:not(.wp-block-button__link):after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); transition:right .35s var(--ease);
}
.mf-nav a:not(.wp-block-button__link):hover{ color:var(--ink) }
.mf-nav a:not(.wp-block-button__link):hover:after{ right:0 }
.mf-nav .wp-block-button__link{ padding:12px 22px !important; font-size:.9rem }

/* ---------- 히어로 ---------- */
.mf-hero{
  position:relative; min-height:660px; display:flex; align-items:flex-end;
  background:url(assets/img/hero.jpg) center 55%/cover no-repeat var(--navy-900);
  padding-top:0 !important; padding-bottom:0 !important;
}
.mf-hero:before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(6,16,28,.95) 0%,rgba(6,16,28,.84) 42%,rgba(6,16,28,.38) 78%,rgba(6,16,28,.16) 100%);
}
.mf-hero > *{ position:relative; z-index:2; width:100% }
.mf-hero-inner{ padding:112px 0 76px }
.mf-hero h1{
  color:#fff !important; font-size:clamp(2.5rem,5.4vw,4.3rem) !important;
  font-weight:800; letter-spacing:-.045em; line-height:1.08; margin:0 0 26px !important;
}
.mf-hero h1 em{ font-style:normal; color:var(--orange) }
.mf-hero-sub{
  color:#c3d2e3 !important; font-size:1.08rem; line-height:1.85; max-width:50ch;
  margin:0 0 36px !important;
}
.mf-hero-rule{ width:56px; height:4px; background:var(--orange); margin:0 0 26px }

/* 히어로 하단 지표 바 */
.mf-trust{ background:var(--navy-800); border-top:1px solid rgba(255,255,255,.1) }
.mf-trust .wp-block-column{ padding:30px 0 }
.mf-trust .wp-block-column + .wp-block-column{ border-left:1px solid rgba(255,255,255,.1); padding-left:30px }
.mf-tnum{
  font-family:Archivo,sans-serif; font-size:2.1rem; font-weight:800; color:#fff;
  letter-spacing:-.03em; margin:0 0 4px !important; line-height:1;
}
.mf-tnum span{ font-size:1rem; color:var(--orange); margin-left:3px }
.mf-tlab{ margin:0 !important; font-size:.82rem; color:#8fa6c0 }

/* ---------- 섹션 ---------- */
.mf-sec{ padding-top:84px; padding-bottom:84px }
.mf-sec--paper{ background:var(--paper) }
.mf-sec--dark{ background:var(--navy-900) }
.mf-sec--dark h2,.mf-sec--dark h3{ color:#fff !important }
.mf-sec--dark .mf-lead{ color:#a9bdd3 }
.mf-head{ margin-bottom:44px }

/* ---------- 2트랙 사업 ---------- */
.mf-track .wp-block-image{ margin:0 }
.mf-track .wp-block-image img{ width:100%; height:270px; object-fit:cover }
.mf-track-body{ padding:26px 0 0 }
.mf-track-body h3{ margin:0 0 12px !important }
.mf-track-body p{ margin:0 0 18px !important; font-size:.96rem; line-height:1.8; color:var(--ink-2) }
.mf-taglist{ display:flex; flex-wrap:wrap; gap:8px; margin:0 }
.mf-taglist span{
  font-size:.78rem; font-weight:600; color:var(--ink-2);
  border:1px solid var(--line); background:#fff; padding:6px 12px; border-radius:2px;
}

/* ---------- 제품 카드 ---------- */
.mf-prod{
  background:#fff; border:1px solid var(--line); height:100%;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.mf-prod:hover{ transform:translateY(-4px); box-shadow:0 22px 48px -28px rgba(8,22,39,.5) }
.mf-prod .wp-block-image{ margin:0 }
.mf-prod .wp-block-image img{ width:100%; height:210px; object-fit:cover }
.mf-prod-body{ padding:24px 24px 26px }
.mf-prod-body h3{ margin:0 0 10px !important }
.mf-prod-body p{ margin:0 0 16px !important; font-size:.92rem; line-height:1.75; color:var(--ink-2) }
.mf-spec{ width:100%; border-collapse:collapse; font-size:.84rem }
.mf-spec th,.mf-spec td{ padding:8px 0; border-top:1px solid var(--line); text-align:left; vertical-align:top }
.mf-spec th{ color:var(--ink-3); font-weight:600; width:38% }
.mf-spec td{ color:var(--ink); font-weight:600; font-family:Archivo,Pretendard,sans-serif }

/* ---------- 공정 스트립 ---------- */
.mf-proc .wp-block-column{ position:relative; overflow:hidden }
.mf-proc .wp-block-image{ margin:0 }
.mf-proc .wp-block-image img{ width:100%; height:300px; object-fit:cover; transition:transform .7s var(--ease) }
.mf-proc .wp-block-column:hover img{ transform:scale(1.05) }
.mf-proc-cap{
  position:absolute; left:0; right:0; bottom:0; padding:22px 22px 20px; z-index:2;
  background:linear-gradient(to top,rgba(8,22,39,.93),rgba(8,22,39,0));
}
.mf-proc-cap strong{
  display:block; color:#fff; font-size:1.05rem; font-weight:700;
  letter-spacing:-.02em; margin-bottom:4px;
}
.mf-proc-cap span{ color:#9fb5cc; font-size:.82rem }

/* ---------- 관리 플랫폼 (대시보드) ---------- */
.mf-dash{ background:var(--navy-800); border:1px solid rgba(255,255,255,.12); padding:22px }
.mf-dash-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px }
.mf-dash-top b{ color:#fff; font-size:.92rem; font-weight:700 }
.mf-dash-top i{ font-style:normal; color:#6ee7a8; font-size:.76rem; display:flex; align-items:center; gap:6px }
.mf-dash-top i:before{ content:""; width:7px; height:7px; border-radius:50%; background:#6ee7a8 }
.mf-dash-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px }
.mf-dash-cell{ background:rgba(255,255,255,.05); padding:14px }
.mf-dash-cell em{ font-style:normal; display:block; font-size:.7rem; color:#8fa6c0; margin-bottom:6px }
.mf-dash-cell b{
  font-family:Archivo,sans-serif; font-size:1.5rem; color:#fff;
  font-weight:800; letter-spacing:-.02em;
}
.mf-dash-cell b.up{ color:#6ee7a8 }
.mf-dash-cell b.warn{ color:#ffb020 }
.mf-bars{ display:flex; align-items:flex-end; gap:5px; height:74px }
.mf-bars i{ flex:1; background:var(--orange); opacity:.85 }
.mf-bars i:nth-child(even){ background:#2f6fb3; opacity:.7 }
.mf-feat{ margin:0; padding:0; list-style:none }
.mf-feat li{ padding:16px 0; border-top:1px solid rgba(255,255,255,.12); display:flex; gap:14px }
.mf-feat li:last-child{ border-bottom:1px solid rgba(255,255,255,.12) }
.mf-feat b{ color:#fff; font-size:.95rem; font-weight:700; display:block; margin-bottom:5px }
.mf-feat span{ display:block; color:#a9bdd3; font-size:.88rem; line-height:1.7 }
.mf-feat em{
  font-style:normal; font-family:Archivo,sans-serif; color:var(--orange);
  font-size:.8rem; font-weight:700; padding-top:2px; flex:0 0 26px;
}

/* ---------- 인증 / 신뢰 ---------- */
.mf-certs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line) }
.mf-cert{ background:#fff; padding:26px 22px }
.mf-cert em{
  font-style:normal; font-family:Archivo,sans-serif; font-size:.74rem; font-weight:700;
  color:var(--orange); letter-spacing:.1em; display:block; margin-bottom:10px;
}
.mf-cert b{ display:block; font-size:1rem; color:var(--ink); font-weight:700; margin-bottom:6px }
.mf-cert span{ font-size:.83rem; color:var(--ink-3); line-height:1.6 }

/* ---------- 자료실 ---------- */
.mf-res{ border-top:1px solid var(--line) }
.mf-res a{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; border-bottom:1px solid var(--line);
  transition:padding .35s var(--ease), background .25s;
}
.mf-res a:hover{ padding-left:14px; padding-right:14px; background:#fff }
.mf-res b{ font-size:1rem; color:var(--ink); font-weight:700 }
.mf-res em{ font-style:normal; font-size:.82rem; color:var(--ink-3); margin-left:12px; font-family:Archivo,sans-serif }
.mf-res i{ font-style:normal; color:var(--orange); font-weight:700; font-size:.86rem; white-space:nowrap }

/* ---------- 설비 표 ---------- */
.mf-table{ width:100%; border-collapse:collapse; font-size:.92rem; background:#fff }
.mf-table th,.mf-table td{ padding:15px 18px; border-bottom:1px solid var(--line); text-align:left }
.mf-table thead th{
  background:var(--navy-800); color:#fff; font-weight:700; font-size:.82rem;
  letter-spacing:.04em; border-bottom:none;
}
.mf-table td{ color:var(--ink-2) }
.mf-table td:first-child{ color:var(--ink); font-weight:700 }
.mf-table tbody tr:hover{ background:var(--paper) }

/* ---------- 대형 CTA 배너 ---------- */
.mf-cta{
  position:relative; padding-top:0 !important; padding-bottom:0 !important;
  background:url(assets/img/cta-band.jpg) center/cover no-repeat var(--navy-900);
}
.mf-cta:before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(8,22,39,.96),rgba(8,22,39,.74));
}
.mf-cta > *{ position:relative; z-index:2; width:100% }
.mf-cta-inner{ padding:80px 0 }
.mf-cta h2{ color:#fff !important; margin:0 0 16px !important }
.mf-cta p{ color:#bed0e3 !important; font-size:1.02rem; line-height:1.8; margin:0 0 32px !important; max-width:48ch }

/* ---------- 문의 폼 ---------- */
.mf-form{ background:#fff; border:1px solid var(--line); padding:34px }
.mf-form label{ display:block; font-size:.83rem; font-weight:700; color:var(--ink); margin-bottom:7px }
.mf-form input,.mf-form select,.mf-form textarea{
  box-sizing:border-box; width:100%; padding:13px 14px; border:1px solid var(--line); background:#fff;
  font:inherit; font-size:.93rem; color:var(--ink); border-radius:2px; margin-bottom:18px;
  transition:border-color .2s, box-shadow .2s;
}
.mf-form input:focus,.mf-form select:focus,.mf-form textarea:focus{
  outline:none; border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(22,52,90,.1);
}
.mf-form textarea{ min-height:118px; resize:vertical }
.mf-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px }
.mf-form button{
  width:100%; padding:16px; background:var(--orange); color:#fff; border:none;
  font:inherit; font-weight:700; font-size:1rem; cursor:pointer; border-radius:2px;
  transition:background .25s, transform .35s var(--ease);
}
.mf-form button:hover{ background:var(--orange-600); transform:translateY(-2px) }
.mf-form .fine{ margin:14px 0 0; font-size:.78rem; color:var(--ink-3); line-height:1.65 }
.mf-contact-list{ margin:0; padding:0; list-style:none }
.mf-contact-list li{ padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12) }
.mf-contact-list em{
  font-style:normal; display:block; font-size:.76rem; color:#8fa6c0;
  margin-bottom:5px; letter-spacing:.06em;
}
.mf-contact-list b{ color:#fff; font-size:1rem; font-weight:700 }

/* ---------- 푸터 ---------- */
.mf-footer{ background:var(--navy-900); padding-top:60px; padding-bottom:30px }
.mf-fh{ color:#fff; font-size:.82rem; font-weight:700; letter-spacing:.06em; margin:0 0 16px !important }
.mf-footer a{ display:block; color:#8fa6c0; font-size:.88rem; padding:5px 0; transition:color .2s }
.mf-footer a:hover{ color:var(--orange) }
.mf-footer p{ color:#8fa6c0; font-size:.86rem; line-height:1.8 }
.mf-fine{
  margin:34px auto 0 !important; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  color:var(--ink-4); font-size:.76rem; line-height:1.75;
}

/* ---------- 스크롤 등장 ---------- */
.mf-hero-inner > *{ will-change:opacity, transform }
.mf-rise{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.mf-rise.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .mf-rise{ opacity:1; transform:none }
}

/* ---------- 반응형 ---------- */
@media (max-width:1023px){
  .mf-certs{ grid-template-columns:repeat(2,1fr) }
  .mf-trust .wp-block-column + .wp-block-column{ border-left:none; padding-left:0 }
}
@media (max-width:781px){
  .mf-sec{ padding-top:56px; padding-bottom:56px }
  .mf-hero{ min-height:540px }
  .mf-hero-inner{ padding:84px 0 56px }
  .mf-hero h1{ max-width:none }
  .mf-nav a:not(.wp-block-button__link){ display:none }
  .mf-form{ padding:24px }
  .mf-form .row{ grid-template-columns:1fr }
  .mf-table{ display:block; overflow-x:auto; white-space:nowrap }
  .mf-certs{ grid-template-columns:1fr }
}


/* ---------- 고객사 로고 스트립 ---------- */
.mf-logos{
  display:flex; flex-wrap:wrap; align-items:center; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.mf-logos > div{
  flex:1 1 0; min-width:150px; background:#fff; height:88px;
  display:flex; align-items:center; justify-content:center;
}
.mf-logos span{
  font-family:Archivo,sans-serif; font-weight:700; font-size:.9rem;
  letter-spacing:.06em; color:#aab6c4;
  border:1px dashed #ccd5de; padding:12px 20px; border-radius:2px;
}
.mf-logos-note{ margin:16px 0 0 !important; font-size:.8rem; color:var(--ink-3) }

/* ---------- 공장 투어 영상 ---------- */
.mf-video{
  position:relative; overflow:hidden; background:var(--navy-900);
  background-image:url(assets/img/tour.jpg); background-size:cover; background-position:center;
  min-height:460px; display:flex; align-items:center; justify-content:center;
}
.mf-video:before{ content:""; position:absolute; inset:0; background:rgba(8,22,39,.55) }
.mf-video-in{ position:relative; z-index:2; text-align:center; padding:40px 24px }
.mf-play{
  width:76px; height:76px; border-radius:50%; border:none; margin:0 auto 22px;
  background:var(--orange); color:#fff; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  box-shadow:0 0 0 0 rgba(255,106,19,.55); transition:transform .4s var(--ease), background .25s;
  animation:mf-pulse 2.6s infinite;
}
.mf-play:hover{ transform:scale(1.08); background:var(--orange-600) }
.mf-play svg{ width:26px; height:26px; margin-left:4px; fill:#fff }
@keyframes mf-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,106,19,.5) }
  70%{ box-shadow:0 0 0 22px rgba(255,106,19,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,106,19,0) }
}
.mf-video h3{ color:#fff !important; font-size:1.6rem !important; margin:0 0 10px }
.mf-video p{ color:#bed0e3; margin:0; font-size:.95rem; line-height:1.75 }
.mf-video .mf-fine2{ margin-top:18px !important; font-size:.78rem; color:#8fa6c0 }

/* ---------- 방문자 유형 (퍼스널라이제이션) ---------- */
.mf-persona{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px }
.mf-persona button{
  font:inherit; font-size:.88rem; font-weight:700; cursor:pointer;
  padding:11px 20px; border:1px solid var(--line); background:#fff; color:var(--ink-2);
  border-radius:2px; transition:background .2s, color .2s, border-color .2s;
}
.mf-persona button:hover{ border-color:var(--ink-3) }
.mf-persona button[aria-selected="true"]{
  background:var(--navy-800); border-color:var(--navy-800); color:#fff;
}
.mf-persona-msg{
  box-sizing:border-box; margin:0 auto 34px !important; padding:16px 20px; background:#fff;
  border-left:3px solid var(--orange); font-size:.94rem; line-height:1.75; color:var(--ink-2);
}
.mf-persona-msg b{ color:var(--ink) }

/* ---------- 제품 구성기 ---------- */
.mf-cfg{ box-sizing:border-box; background:var(--navy-800); border:1px solid rgba(255,255,255,.12); padding:28px }
.mf-cfg h3{ color:#fff !important; margin:0 0 6px !important }
.mf-cfg > p{ color:#a9bdd3; font-size:.9rem; margin:0 0 24px; line-height:1.7 }
.mf-cfg-row{ margin-bottom:18px }
.mf-cfg-row > em{
  font-style:normal; display:block; font-size:.76rem; font-weight:700;
  color:#8fa6c0; letter-spacing:.06em; margin-bottom:9px;
}
.mf-chips{ display:flex; flex-wrap:wrap; gap:8px }
.mf-chips button{
  font:inherit; font-size:.86rem; font-weight:600; cursor:pointer;
  padding:9px 15px; border-radius:2px; color:#c3d2e3;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  transition:background .2s, color .2s, border-color .2s;
}
.mf-chips button:hover{ border-color:rgba(255,255,255,.4) }
.mf-chips button[aria-pressed="true"]{
  background:var(--orange); border-color:var(--orange); color:#fff;
}
.mf-cfg-out{
  margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.mf-cfg-out div em{ font-style:normal; display:block; font-size:.72rem; color:#8fa6c0; margin-bottom:7px }
.mf-cfg-out div b{
  font-family:Archivo,Pretendard,sans-serif; font-size:1.18rem; color:#fff;
  font-weight:800; letter-spacing:-.02em; line-height:1.25; display:block;
}
.mf-cfg-note{ margin:20px 0 0 !important; font-size:.78rem; color:#8fa6c0; line-height:1.7 }

@media (max-width:781px){
  .mf-logos > div{ flex:1 1 45%; height:74px }
  .mf-video{ min-height:380px }
  .mf-cfg{ padding:20px }
  .mf-cfg-out{ grid-template-columns:1fr; gap:16px }
}


/* ---------- 인증 로드맵 (NeT / NeP) ---------- */
.mf-road{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line) }
.mf-road > div{ background:#fff; padding:24px 22px 26px; position:relative }
.mf-road > div.done{ background:var(--navy-800) }
.mf-road > div.now{ background:#fff; box-shadow:inset 0 3px 0 var(--orange) }
.mf-road em{
  font-style:normal; font-family:Archivo,sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; display:block; margin-bottom:12px; color:var(--ink-3);
}
.mf-road > div.done em{ color:#7f9ab5 }
.mf-road > div.now em{ color:var(--orange) }
.mf-road b{ display:block; font-size:1.02rem; font-weight:700; color:var(--ink); margin-bottom:7px; letter-spacing:-.02em }
.mf-road > div.done b{ color:#fff }
.mf-road span{ font-size:.84rem; color:var(--ink-3); line-height:1.65 }
.mf-road > div.done span{ color:#9fb5cc }

/* ---------- 특허 목록 ---------- */
.mf-pat{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line) }
.mf-pat > div{ background:#fff; padding:18px 22px; display:flex; align-items:center; gap:16px }
.mf-pat i{
  font-style:normal; font-family:Archivo,sans-serif; font-weight:800; font-size:.8rem;
  color:var(--orange); flex:0 0 28px;
}
.mf-pat b{ font-size:.95rem; font-weight:700; color:var(--ink) }
.mf-pat span{ display:block; font-size:.8rem; color:var(--ink-3); margin-top:3px }

/* ---------- 강조 배지 ---------- */
.mf-badge{
  display:inline-block; font-family:Archivo,Pretendard,sans-serif; font-size:.74rem; font-weight:700;
  letter-spacing:.06em; color:#fff; background:var(--orange); padding:5px 11px; border-radius:2px;
  margin-bottom:14px;
}
.mf-vendor{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--navy-800); padding:26px 28px; box-sizing:border-box;
}
.mf-vendor b{ color:#fff; font-size:1.15rem; font-weight:800; letter-spacing:-.025em }
.mf-vendor span{ color:#a9bdd3; font-size:.9rem; line-height:1.7 }
.mf-vendor em{
  font-style:normal; font-family:Archivo,sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; color:var(--orange); display:block; margin-bottom:8px;
}

@media (max-width:781px){
  .mf-road{ grid-template-columns:1fr }
  .mf-pat{ grid-template-columns:1fr }
}


/* ---------- 마감 다듬기 ---------- */
.mf-ph{
  color:var(--ink-3); font-weight:500;
  background:repeating-linear-gradient(-45deg,rgba(123,140,163,.07) 0 6px,transparent 6px 12px);
  padding:2px 7px; border-radius:2px;
}
.mf-sec--dark .mf-ph{ color:#8fa6c0; background:rgba(255,255,255,.05) }

/* 섹션 안 소제목에 규칙선을 붙여 층을 만든다 */
.mf-sec h3[id]{ position:relative; padding-top:22px; margin-top:0 }
.mf-sec h3[id]:before{ content:""; position:absolute; top:0; left:0; width:38px; height:3px; background:var(--orange) }

/* 밝은 섹션끼리 맞닿을 때 경계를 준다 */
.mf-sec--paper{ border-top:1px solid var(--line); border-bottom:1px solid var(--line) }

/* 히어로 하단을 지표 바 쪽으로 자연스럽게 떨어뜨린다 */
.mf-hero:after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:1;
  background:linear-gradient(to bottom,rgba(8,22,39,0),rgba(14,35,64,.85));
  pointer-events:none;
}

/* 제품 카드 제목 두 줄짜리와 한 줄짜리의 높이를 맞춘다 */
.mf-prod-body h3{ min-height:2.6em; display:flex; align-items:flex-start }
.mf-badge + h3{ min-height:2.6em }

/* 벤더 배너를 좌우로 벌린다 */
.mf-vendor{ justify-content:space-between }
.mf-vendor span{ max-width:52ch }

/* 특허 타일 번호를 더 또렷하게 */
.mf-pat i{
  background:var(--paper); width:30px; height:30px; border-radius:2px;
  display:flex; align-items:center; justify-content:center; flex:0 0 30px;
}

/* 표 안 자리표시 행은 옅게 */
.mf-table td .mf-ph{ font-size:.86rem }

@media (max-width:781px){
  .mf-prod-body h3{ min-height:0 }
  .mf-vendor{ gap:14px }
}


/* ================= 마감 2차 ================= */
::selection{ background:var(--orange); color:#fff }

/* ---------- 스크롤 진행 바 ---------- */
.mf-prog{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:90;
  background:linear-gradient(90deg,var(--orange),#ffa365); pointer-events:none;
  transition:width .08s linear;
}

/* ---------- 고정 헤더 ---------- */
.mf-header{
  position:sticky; top:0; z-index:80;
  transition:box-shadow .35s var(--ease), padding .35s var(--ease), background-color .3s;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);
}
.mf-header.is-stuck{ box-shadow:0 10px 30px -22px rgba(8,22,39,.65) }
.mf-header.is-stuck .wp-block-group{ padding-top:12px !important; padding-bottom:12px !important }
.mf-nav a.is-active:not(.wp-block-button__link){ color:var(--ink) }
.mf-nav a.is-active:not(.wp-block-button__link):after{ right:0 }
html{ scroll-behavior:smooth; scroll-padding-top:86px }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

/* ---------- 히어로 신뢰 칩 ---------- */
.mf-chipsrow{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px }
.mf-chipsrow span{
  font-size:.8rem; font-weight:600; color:#d7e3ef; letter-spacing:-.01em;
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.07);
  padding:8px 14px; border-radius:2px; backdrop-filter:blur(4px);
}
.mf-chipsrow span b{ color:var(--orange); font-weight:800; margin-right:5px }

/* ---------- 사진 톤 통일 (출처가 달라도 한 사이트로 보이게) ---------- */
.mf-track .wp-block-image,
.mf-proc .wp-block-image,
.mf-prod .wp-block-image{ position:relative; overflow:hidden }
.mf-track .wp-block-image:after,
.mf-proc .wp-block-image:after,
.mf-prod .wp-block-image:after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,22,39,.28),rgba(14,52,90,.34));
  mix-blend-mode:multiply; transition:opacity .55s var(--ease);
}
.mf-track .wp-block-column:hover .wp-block-image:after,
.mf-proc .wp-block-column:hover .wp-block-image:after,
.mf-prod:hover .wp-block-image:after{ opacity:.25 }
.mf-track .wp-block-image img,
.mf-prod .wp-block-image img{ transition:transform .7s var(--ease) }
.mf-track .wp-block-column:hover img,
.mf-prod:hover .wp-block-image img{ transform:scale(1.04) }

/* ---------- 카드 상단 강조선 ---------- */
.mf-prod{ position:relative }
.mf-prod:before{
  content:""; position:absolute; top:0; left:0; right:100%; height:3px;
  background:var(--orange); z-index:3; transition:right .5s var(--ease);
}
.mf-prod:hover:before{ right:0 }

/* ---------- 특허 타일 ---------- */
.mf-pat > div{ transition:background .25s }
.mf-pat > div:hover{ background:var(--paper) }
.mf-pat b{ display:block; letter-spacing:-.01em }
.mf-pat .tag{
  display:inline-block; font-family:Archivo,sans-serif; font-size:.66rem; font-weight:700;
  letter-spacing:.1em; color:var(--navy-700); background:rgba(22,52,90,.09);
  padding:3px 8px; border-radius:2px; margin-left:8px; vertical-align:2px;
}
.mf-pat .tag.apply{ color:var(--orange-600); background:rgba(255,106,19,.12) }

/* ---------- 섹션 번호 ---------- */
.mf-head{ position:relative }
.mf-head[data-no]:before{
  content:attr(data-no); position:absolute; right:0; top:-6px;
  font-family:Archivo,sans-serif; font-size:3.6rem; font-weight:800;
  color:var(--ink); opacity:.05; letter-spacing:-.05em; line-height:1; pointer-events:none;
}
.mf-sec--dark .mf-head[data-no]:before{ color:#fff; opacity:.08 }

/* ---------- 지표 바 강조 ---------- */
.mf-trust .wp-block-column{ position:relative; transition:background .3s }
.mf-trust .wp-block-column:hover{ background:rgba(255,255,255,.03) }

/* ---------- 벤더 배너 ---------- */
.mf-vendor{ position:relative; overflow:hidden }
.mf-vendor:before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--orange);
}
.mf-vendor{ padding-left:34px }

/* ---------- 로드맵 현재 단계 점멸 ---------- */
.mf-road > div.now:after{
  content:""; position:absolute; right:20px; top:24px; width:8px; height:8px;
  border-radius:50%; background:var(--orange); animation:mf-blink 1.8s ease-in-out infinite;
}
@keyframes mf-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

@media (max-width:781px){
  .mf-head[data-no]:before{ display:none }
  .mf-header{ position:static; backdrop-filter:none; background:#fff }
  .mf-chipsrow span{ font-size:.74rem; padding:7px 11px }
}