/* ㈜정신전자 메인 — 히어로 / 제품 3종(이미지 카드) / 주요거래처
   색은 기준색 #134a8e 한 계열. 모든 섹션은 .mn 안에 둔다(색 변수가 .mn 에 있다). */

.mn{
  --mn-primary:#134a8e;
  --mn-deep:#161C53;
  --mn-ink:#1f2d3f;
  --mn-muted:#7a8699;
  --mn-line:#e6ebf2;
  --mn-soft:#f7f9fc;
  font-family:'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:#4a5568;-webkit-font-smoothing:antialiased;
}
.mn *{box-sizing:border-box}

/* ── 제품 섹션 ───────────────────────────── */
.pc{padding:130px 0 124px;background:#fff}
.pc-in{max-width:1440px;margin:0 auto;padding:0 40px}

.pc-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  margin:0 0 58px;
}
.pc-eyebrow{
  font-family:'IBM Plex Mono','Consolas',monospace;font-size:12px;font-weight:600;
  letter-spacing:.22em;color:#b06a1f;margin:0 0 20px;
}
.pc-title{
  font-size:clamp(34px,4.6vw,62px);font-weight:800;line-height:1.12;letter-spacing:-.04em;
  color:var(--mn-deep);margin:0 0 22px;
}
.pc-title span{display:block;color:var(--mn-primary)}
.pc-lead{font-size:16.5px;line-height:1.85;color:var(--mn-muted);margin:0;max-width:40em}
.pc-arrow{
  flex:0 0 auto;width:52px;height:52px;color:var(--mn-muted);opacity:.55;margin-bottom:6px;
}

/* 카드 3장 — 마우스를 올린 카드가 넓어지고 옆 카드는 밀려 좁아진다.
   타원 변형은 쓰지 않는다(사각 유지). 이미지가 없으면 엑스박스가 그대로 보인다. */
.pc-grid{display:flex;gap:26px;align-items:stretch}
.pc-card{
  position:relative;display:block;overflow:hidden;
  flex:1 1 0;min-width:0;height:clamp(430px,40vw,560px);
  background:#eef1f6;                 /* 이미지가 없을 때 엑스박스가 보이도록 밝게 */
  border-radius:18px;text-decoration:none;
  box-shadow:0 22px 50px -30px rgba(11,27,51,.45);
  transition:
    flex-grow .8s cubic-bezier(.22,.61,.36,1),
    transform .55s cubic-bezier(.22,.61,.36,1),
    box-shadow .55s ease;
}
@media (hover:hover){
  .pc-grid:hover .pc-card{flex-grow:.8}
  .pc-grid .pc-card:hover{
    flex-grow:1.55;
    transform:translateY(-10px);
    box-shadow:0 46px 90px -36px rgba(11,27,51,.5);
  }
}
.pc-card img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(1.02);
  transition:transform 1.5s cubic-bezier(.22,.61,.36,1),filter .6s ease;
  filter:saturate(.86);
}
.pc-card:hover img{transform:scale(1.09);filter:saturate(1)}

/* 아래쪽만 어둡게 — 위쪽은 비워 이미지가 없을 때 엑스박스가 드러난다 */
.pc-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,28,83,0) 0%,rgba(22,28,83,.10) 34%,rgba(22,28,83,.62) 66%,rgba(11,17,54,.94) 100%);
  transition:background .6s ease;
}
.pc-card:hover::after{
  background:linear-gradient(180deg,rgba(19,74,142,0) 0%,rgba(19,74,142,.12) 34%,rgba(22,28,83,.58) 66%,rgba(11,17,54,.92) 100%);
}

.pc-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 34px 38px;
}
.pc-ico{
  width:56px;height:56px;margin-bottom:20px;padding:15px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  color:#fff;backdrop-filter:blur(4px);
  transition:background-color .5s ease,transform .6s cubic-bezier(.34,1.4,.64,1);
}
.pc-card:hover .pc-ico{background:rgba(255,255,255,.3);transform:translateY(-4px)}
.pc-eng{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;margin:0 0 6px;line-height:1.3;white-space:nowrap}
.pc-kor{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.74);margin:0 0 14px;white-space:nowrap}
.pc-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.pc-list li{
  font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82);
  padding:4px 11px;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  backdrop-filter:blur(3px);white-space:nowrap;
}
/* 왼쪽 위 표시선 */
.pc-card::before{
  content:"";position:absolute;left:34px;top:34px;z-index:2;
  width:2px;height:30px;background:#b06a1f;border-radius:2px;
  transition:height .6s ease;
}
.pc-card:hover::before{height:48px}

.pc-foot{text-align:center;margin-top:64px}
.mn-more{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:700;color:var(--mn-primary);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.mn-more:hover{opacity:.72;color:var(--mn-primary)}

/* ── 주요거래처 ───────────────────────────── */
.cb{background:#17206f;padding:104px 0 96px;overflow:hidden}
.cb-head{text-align:center;margin:0 0 56px;padding:0 22px}
.cb-eyebrow{
  font-family:'IBM Plex Mono','Consolas',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.26em;color:#7fa8e0;margin:0 0 18px;
}
.cb-title{
  font-size:clamp(25px,3.2vw,42px);font-weight:800;line-height:1.3;letter-spacing:-.035em;
  color:#fff;margin:0 0 16px;
}
.cb-lead{font-size:16px;line-height:1.8;color:rgba(255,255,255,.6);margin:0}

.cb-belt{position:relative;width:100%;overflow:hidden;padding:10px 0}
.cb-belt::before,.cb-belt::after{
  content:"";position:absolute;top:0;bottom:0;width:200px;z-index:3;pointer-events:none;
}
.cb-belt::before{left:0;background:linear-gradient(90deg,#17206f,rgba(23,32,111,0))}
.cb-belt::after{right:0;background:linear-gradient(270deg,#17206f,rgba(23,32,111,0))}

.cb-track{display:flex;width:max-content;animation:cbRoll 40s linear infinite}
.cb-belt:hover .cb-track{animation-play-state:paused}
.cb-track ul{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.cb-track li{
  flex:0 0 auto;padding:0 34px;
  font-size:clamp(21px,2.1vw,30px);font-weight:800;letter-spacing:-.02em;
  color:rgba(255,255,255,.4);white-space:nowrap;transition:color .25s ease;
}
.cb-track li::after{content:"·";margin-left:34px;color:rgba(255,255,255,.18)}
.cb-track li:hover{color:#fff}
@keyframes cbRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.cb-foot{text-align:center;margin-top:56px}
.cb-more{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:700;color:#9dc0ea;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.cb-more:hover{color:#fff}

/* ── 반응형 ─────────────────────────────── */
@media (max-width:1200px){
  .pc{padding:100px 0 96px}
  .pc-in{padding:0 32px}
  .pc-grid{gap:18px}
  .pc-card{height:clamp(390px,44vw,470px)}
  .pc-body{padding:0 24px 30px}
  .pc-eng{font-size:19px}
  .pc-card::before{left:24px;top:26px}
}
@media (max-width:900px){
  .pc{padding:76px 0 72px}
  .pc-in{padding:0 22px}
  .pc-head{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:36px}
  .pc-arrow{display:none}
  .pc-grid{flex-direction:column;gap:16px}
  .pc-card{height:300px;flex:none!important}
  .pc-card:hover{transform:none}
  .pc-foot{margin-top:40px}
  .cb{padding:66px 0 62px}
  .cb-head{margin-bottom:36px}
  .cb-track li{padding:0 20px;font-size:20px}
  .cb-track li::after{margin-left:20px}
  .cb-belt::before,.cb-belt::after{width:70px}
  .cb-foot{margin-top:38px}
}
@media (prefers-reduced-motion:reduce){
  .pc-card,.pc-card img,.cb-track{transition:none!important;animation:none!important}
}