/* pages-main.css — 메인(index) 공통 자리 · INTERNAL MODULE
   메인은 index 한 장뿐이므로 공통 규칙은 두지 않는다. 실제 규칙은 p-index.css 에 있다.
   ※ 이 파일이 없으면 build-css.sh 의 `cat pages-main.css p-index.css` 가 실패하면서
     main.css 가 0B 로 잘린다(실측) — 그래서 빈 자리라도 존재해야 한다. */
/* p-index.css — 메인(81:102) 전용 · INTERNAL MODULE
   main.css = pages-main.css(없음) + p-index.css.
   서브 전용 클래스(.psec01__* · .steps · .matrix · .sechead · .phero)는 여기서 쓰지 않는다.
   시안 실측값만 적는다 — 1920 은 전사, 사이 폭은 콘텐츠가 정한다. */

/* 버튼 안 화살표 아이콘 — 시안은 solar:arrow-up 을 90도 돌려 오른쪽을 보게 쓴다 */
.mico-arrow{width:28px;height:28px;flex:0 0 auto;transform:rotate(90deg)}

/* ══ 메인 히어로 + About 스크롤 씬 ════════════════════════════════ */
.mintro{position:relative}
.mintro__fx{position:absolute;inset:0 0 auto;width:100%;height:100vh;height:100dvh;
  z-index:0;pointer-events:none;overflow:hidden}

/* ══ 메인 히어로 (81:103 · 1920×660) ═══════════════════════════════ */
.mhero{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  height:100vh;height:100dvh;min-height:660px;padding-block:88px var(--s-56);color:var(--c-white)}
.mhero__bg{position:absolute;inset:0 0 -22vh;overflow:hidden}
.mhero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
/* 시안: 위에서 아래로 옅어지는 검정 + 전면 20% 검정 */
.mhero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.4) 15%,rgba(0,0,0,0) 145%),
             linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.2))}
.mhero__in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-32)}
.mhero__head{display:flex;flex-direction:column;gap:var(--s-20)}
.mhero__eyebrow{display:flex;flex-direction:column;gap:var(--s-12)}
.mhero__rule{display:block;width:40px;height:2px;background:var(--c-brand)}
.mhero__title{font-size:48px;font-weight:700;line-height:var(--lh-tight);color:var(--c-white)}
.mhero__lead{color:var(--c-white);font-size:22px;line-height:var(--lh-tight)}
.mhero__btns{display:flex;flex-wrap:wrap;gap:var(--s-12)}
.mhero__cta{background:#c1c1c1;color:var(--c-white);font-size:var(--fs-body);gap:10px;
  padding:var(--s-12) var(--s-24)}
.mhero__cta img{width:28px;height:28px;flex:0 0 auto}
.mhero__cta:hover{background:var(--c-brand)}
@media (max-width:1439px){.mhero__title{font-size:42px}.mhero__lead{font-size:20px}}
@media (max-width:1023px){
  .mhero{min-height:520px;padding-block:80px var(--s-40)}
  .mhero__title{font-size:34px}.mhero__lead{font-size:18px}
}
@media (max-width:639px){
  .mhero{min-height:440px;padding-block:72px var(--s-32)}
  .mhero__title{font-size:26px}.mhero__lead{font-size:16px}
  .mhero__cta{font-size:var(--fs-sm)}
}

/* ══ 회사소개 밴드 (81:145 · 1920×450) ════════════════════════════ */
.mabout{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;min-height:450px;padding-block:var(--s-80);
  background:transparent;color:var(--c-white);text-align:center}
.mabout__bg{position:absolute;left:0;right:0;top:-18vh;height:calc(100% + 18vh);overflow:hidden;opacity:0}
.mabout__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.mabout__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.85)}
.mabout__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s-40);
  opacity:0}
.mabout__text{display:flex;flex-direction:column;align-items:center;gap:var(--s-40)}
.mabout__title{font-size:32px;font-weight:600;line-height:1.5}
.mabout__desc{font-size:var(--fs-body);line-height:1.5}
.mabout__btn{font-size:var(--fs-body);gap:10px;padding:var(--s-16) 28px}
@media (max-width:1023px){
  .mabout{padding-block:var(--s-56)}
  .mabout__title{font-size:26px}
  .mabout__text{gap:var(--s-24)}
  .mabout__in{gap:var(--s-32)}
}
@media (max-width:639px){
  .mabout{min-height:400px}
  .mabout__title{font-size:22px}
  .mabout__desc{font-size:var(--fs-sm)}
  .mabout__btn{font-size:var(--fs-sm)}
}
@media (prefers-reduced-motion:reduce){
  .mabout__in{opacity:1}
}

/* ══ 제품 솔루션 (81:154 · 1920×1123) ═════════════════════════════ */
.mproduct{position:relative;overflow:hidden;padding-block:var(--s-80);background:#1a1a1a;color:var(--c-white)}
.mproduct__bg{position:absolute;inset:0}
.mproduct__bg img{width:100%;height:100%;object-fit:cover;opacity:.6}
.mproduct__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
.mproduct__in{position:relative;display:flex;flex-direction:column;gap:60px}
.mproduct__head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.mproduct__title{font-size:32px;font-weight:600;line-height:1.5}
.mproduct__desc{font-size:20px;line-height:1.5}
.mproduct__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.mproduct__list > li{display:flex}
.mproduct__card{display:flex;flex-direction:column;width:100%;
  background:var(--c-white);color:var(--c-ink);border-radius:10px;overflow:hidden}
.mproduct__media{display:block;aspect-ratio:1/1;background:var(--c-bg-soft)}
.mproduct__media img{width:100%;height:100%;object-fit:cover}
.mproduct__body{display:flex;flex-direction:column;flex:1 1 auto;
  gap:var(--s-20);padding:var(--s-20) 28px;transition:background-color .25s ease,color .25s ease}
.mproduct__name{display:flex;flex-direction:column;gap:var(--s-4)}
/* 시안 ExtraBold 28px · 카드 390px(1680 폭 · gap 40) */
.mproduct__en{font-size:28px;font-weight:800;line-height:1.5;color:#000;transition:color .25s ease}
.mproduct__ko{font-size:var(--fs-body);font-weight:500;line-height:1.5;color:var(--c-brand);transition:color .25s ease}
.mproduct__points{list-style:disc;padding-left:24px;font-size:var(--fs-body);line-height:1.5;transition:color .25s ease}
.mproduct__points li{list-style:inherit}
/* 시안 1번째 카드만 중점(·) 접두 — disc 가 아님 */
.mproduct__points--mid{list-style:none;padding-left:0}
.mproduct__points--mid li{padding-left:0}
.mproduct__points--mid li::before{content:"· "}
.mproduct__arrow{width:38px;height:38px;margin-top:auto;align-self:flex-end;transform:rotate(90deg);
  transition:filter .25s ease}
.mproduct__card:hover .mproduct__body{background:var(--c-brand);color:var(--c-white)}
.mproduct__card:hover .mproduct__en,
.mproduct__card:hover .mproduct__ko,
.mproduct__card:hover .mproduct__points{color:var(--c-white)}
.mproduct__card:hover .mproduct__arrow{filter:brightness(0) invert(1)}
.mproduct__btns{display:flex;justify-content:flex-end}
.mproduct__btn{border:1px solid var(--c-white);color:var(--c-white);
  font-size:var(--fs-body);gap:10px;padding:var(--s-16) 28px}
.mproduct__btn .mico-arrow{transition:filter .2s ease}
.mproduct__btn:hover{background:var(--c-white);color:var(--c-brand)}
.mproduct__btn:hover .mico-arrow{filter:invert(1)}
@media (max-width:1279px){
  .mproduct__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mproduct__en{font-size:24px}  /* 2열로 줄면 카드가 넓어져 시안 크기에 가까워진다 */
  .mproduct__title{font-size:26px}
  .mproduct__desc{font-size:var(--fs-body)}
}
@media (max-width:1023px){
  .mproduct{padding-block:var(--s-56)}
  .mproduct__in{gap:var(--s-40)}
  .mproduct__en{font-size:18px}
}
@media (max-width:639px){
  .mproduct__list{grid-template-columns:minmax(0,1fr)}
  .mproduct__title{font-size:22px}
  .mproduct__en{font-size:22px}
  .mproduct__points{font-size:var(--fs-sm)}
  .mproduct__btn{font-size:var(--fs-sm)}
}

/* ══ 강점 4가지 (81:169 · 1920×698) ═══════════════════════════════ */
.mstrength{position:relative;overflow:hidden;padding-block:var(--s-80);
  background:var(--c-brand);color:var(--c-white)}
/* z-index:0 으로 스택 문맥을 만든다 — 로고(z-index:1)가 카드 위로 올라오는 것을 막는다 */
.mstrength__bg{position:absolute;inset:0;overflow:hidden;z-index:0}
/* 시안: 사진 위에 브랜드 블루 판을 덮고, 그 위에 로고를 20% 로 얹는다 */
.mstrength__photo{position:absolute;left:-6.74%;top:-60.77%;width:106.74%;height:236.46%;max-width:none}
.mstrength__bg::after{content:"";position:absolute;inset:0;background:var(--c-brand)}
.mstrength__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:60px}
/* 시안 1920×698: 로고 641×111 · 섹션 오른쪽 끝 · contents 기준 top 32(112-80) */
.mstrength__mark{position:absolute;top:32px;right:0;width:641px;height:111px;
  max-width:none;object-fit:contain;opacity:.2;z-index:0;pointer-events:none}
.mstrength__title,.mstrength__list{position:relative;z-index:1}
.mstrength__title{font-size:32px;font-weight:600;line-height:1.5;text-align:center}
.mstrength__title b{font-weight:700}
.mstrength__list{width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.mstrength__card{display:flex;flex-direction:column;align-items:center;gap:var(--s-40);
  padding:var(--s-40) var(--s-20);background:var(--c-white);border-radius:10px;text-align:center}
.mstrength__icon{position:relative;display:block;width:160px;height:160px;
  flex:0 0 auto;overflow:hidden}
.mstrength__icon img{position:absolute;max-width:none}
/* 아이콘별 크롭 — 시안 실측(%는 160 박스 기준) */
.mstrength__icon--1 img{left:-63.26%;top:-19.04%;width:226.25%;height:150.83%}
.mstrength__icon--2 img{left:-49.14%;top:-16.19%;width:198.75%;height:132.5%}
.mstrength__icon--3 img{left:3.7%;top:7.39%;width:92.31%;height:92.31%}
.mstrength__icon--4 img{left:6.07%;top:6.41%;width:87.45%;height:87.45%}
.mstrength__text{display:flex;flex-direction:column;gap:var(--s-20)}
.mstrength__name{font-size:20px;font-weight:600;line-height:var(--lh-tight);color:var(--c-brand)}
.mstrength__desc{font-size:var(--fs-body);line-height:1.5;color:var(--c-ink)}
@media (max-width:1279px){
  .mstrength__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mstrength__title{font-size:26px}
}
@media (max-width:1023px){
  .mstrength{padding-block:var(--s-56)}
  .mstrength__in{gap:var(--s-40)}
  .mstrength__card{gap:var(--s-24);padding:var(--s-24)}
  .mstrength__icon{width:120px;height:120px}
}
@media (max-width:639px){
  .mstrength__list{grid-template-columns:minmax(0,1fr)}
  .mstrength__title{font-size:22px}
  .mstrength__desc{font-size:var(--fs-sm)}
}

/* ══ 적용 사례 로고 (81:178 · 1920×340) ═══════════════════════════ */
.mref{background:#666;color:var(--c-white);padding-block:var(--s-80)}
.mref__in{display:flex;align-items:flex-start;gap:60px}
.mref__head{flex:0 1 520px;display:flex;flex-direction:column;gap:var(--s-16)}
.mref__title{font-size:32px;font-weight:600;line-height:1.5}
.mref__lead{display:flex;flex-direction:column;gap:10px}
.mref__desc{font-size:20px;line-height:1.5}
.mref__note{color:#ddd;font-size:var(--fs-xs);line-height:1.5}
.mref__rows{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--s-20);overflow:hidden}
.mref__rows::before,.mref__rows::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none}
.mref__rows::before{left:-30px;background:linear-gradient(90deg,#666 0%,rgba(102,102,102,.85) 22%,rgba(102,102,102,.5) 48%,rgba(102,102,102,.18) 74%,rgba(102,102,102,0) 100%)}
.mref__rows::after{right:-30px;background:linear-gradient(270deg,#666 0%,rgba(102,102,102,.85) 22%,rgba(102,102,102,.5) 48%,rgba(102,102,102,.18) 74%,rgba(102,102,102,0) 100%)}
.mref__row{display:flex;flex-wrap:nowrap;gap:20px;width:max-content;will-change:transform}
.mref__logo{flex:0 0 224px;width:224px;height:80px;background:var(--c-white);overflow:hidden}
.mref__logo img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);
  transition:filter .28s ease}
.mref__logo:hover img{filter:grayscale(0)}
@media (max-width:1279px){
  .mref__in{flex-direction:column;gap:var(--s-40)}
  .mref__head{flex:0 0 auto}
  /* 세로로 쌓이면 flex-basis 0 이 높이 0 이 된다 — 반드시 auto 로 되돌린다 */
  .mref__rows{flex:0 0 auto;width:100%}
  .mref__title{font-size:26px}
  .mref__desc{font-size:var(--fs-body)}
}
@media (max-width:1023px){.mref{padding-block:var(--s-56)}}
@media (max-width:639px){
  .mref__title{font-size:22px}
}

/* 메인 시안 콘텐츠 1680(좌우 120) · about/footer 는 160 */
@media (min-width:1920px){
  [data-page="index"] .mhero .container,
  [data-page="index"] .mproduct .container,
  [data-page="index"] .mstrength .container,
  [data-page="index"] .mref .container{padding-inline:120px}
  [data-page="index"] .mabout .container,
  [data-page="index"] .ftr .container{padding-inline:160px}
}