/* ============================================================
   gm_teamcenter.css — GM Teamcenter 권한 등록 페이지 전용
   ------------------------------------------------------------
   [범위] .gmtc_registration-page 안의 "프로세스 다이어그램"만 담당.
   [이동] 바로가기(.quicklinks-*)·안내 카드(.guide-*)는
          components.css 로 분리했습니다. (충돌 해소)
   ============================================================ */

/* 팔레트 (이 페이지 전용) */
.gmtc_registration-page{
  --green:#63a375;
  --green-panel:#f1f7f2;
  --green-box:#f4faf5;
  --green-border:#d3e7d8;
  --blue:var(--brand);
  --blue-panel:#eef4fb;
  --blue-box:#f3f8fd;
  --blue-border:#cfe0f2;
  --ink:#1f2a37;
  --gray:#5b6572;
  --line:#e2e6eb;
  --arrow:#3d4652;
}

/* ---------- 프로세스 섹션 헤더 ---------- */
.process-section{ 
  padding:30px 24px;
  
}
.process-section .section-header{
  max-width:var(--content);
  margin:0 auto 44px;
  text-align:center;
}
.process-section .section-tag{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--blue);
  margin-bottom:10px;
}
.process-section .section-header h2{
  font-size:28px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:12px;
}
.process-section .section-header p{
  font-size:15px;
  color:var(--gray);
}

/* ============================================================
   프로세스 다이어그램 (유동 레이아웃)
   [좌표계] 1000 x 720 고정 격자. 박스는 %, 화살표는 SVG(viewBox 동일).
   [박스 이동 시] 아래 #id 의 top/height(%) 와 템플릿의 <path> 좌표를
                  함께 수정해야 정렬이 맞습니다.
   ============================================================ */
.process-scroll{ max-width:1000px; margin:0 auto; }
.process-tree{
  position:relative;
  z-index:0;
  width:100%;
  max-width:1000px;
  aspect-ratio:1000 / 720;    /* 좌표계와 동일 비율 */
  margin:0 auto;
  container-type:inline-size; /* 내부 글자를 cqw 로 함께 축소 */
}

/* 컬럼(색상 패널) */
.process-column{
  position:absolute;
  top:0;
  height:100%;
  width:29%;
  border-radius:12px;
}
.process-column.supplier { left:2%;    background:var(--green-panel); }
.process-column.smt      { left:35.5%; background:var(--blue-panel); }
.process-column.humanebiz{ left:69%;   background:var(--green-panel); }

/* 컬럼 헤더 */
.column-title{
  height:6.4%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:clamp(11px, 1.5cqw, 15px);
  border-radius:12px 12px 0 0;
}
.supplier-title,
.humanebiz-title{ background:var(--green); }
.smt-title{ background:var(--blue); }

/* 흐름 박스 */
.process-box{
  position:absolute;
  left:6.21%;
  width:87.59%;
  z-index:2;                  /* 화살표(z-index:1)보다 위 */
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 3px 10px rgba(20,30,50,.05);
  padding:1.2cqw 1.6cqw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
.process-box h3{ font-size:clamp(10.5px, 1.5cqw, 15px); font-weight:700; color:var(--ink); line-height:1.35; }
.process-box p{ margin-top:.5em; font-size:clamp(9px, 1.25cqw, 12.5px); color:var(--gray); line-height:1.45; }
.supplier .process-box,
.humanebiz .process-box{ background:var(--green-box); border-color:var(--green-border); }
.smt .process-box{ background:var(--blue-box); border-color:var(--blue-border); }

/* 박스별 위치 (top/height 는 720 기준 %) — 화살표 <path> 와 세트로 수정 */
#gm-supplypower  { top:8%;  height:12%; }
#smt-agreement   { top:23%; height:15%; }
#request-form    { top:40%; height:11%; }
#preparation     { top:50%; height:8%;  }
#smt-approval    { top:60%; height:15%; }
#global-request  { top:76%; height:13%; }
#connection-check{ top:90%; height:8%;  }

/* 화살표 오버레이 */
.process-svg{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
}
.process-svg path{ fill:none; stroke:var(--arrow); stroke-width:1.6; }
.process-svg marker polygon{ fill:var(--arrow); }

/* 화살표 라벨 (선 위 빈 공간) */
.process-label{
  position:absolute;
  z-index:3;
  transform:translateX(-50%);
  text-align:center;
  font-size:clamp(8.5px, 1.15cqw, 11.5px);
  line-height:1.4;
  color:#6b7481;
  white-space:nowrap;
}
.process-label span{ display:block; }
.process-label.approve-request{ left:40%; top:10%; }
.process-label.email-approval { left:27%; top:28%; }
.process-label.send-form      { left:54%; top:38%; }
.process-label.finder-request { left:58%; top:52%; }
.process-label.id-notify      { left:50%; top:79%; }

/* ---------- 반응형 (프로세스) ---------- */
@media (max-width:640px){
  .process-section{ padding:24px 20px; }

  /* 모바일: 다이어그램은 원본 비율 유지 + 가로 스크롤(스와이프).
     740px 미만으로 줄이면 글자 하한(clamp)이 걸리므로 권장 하한 ≈ 740px */
  .process-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
  }
  .process-tree{ width:760px; max-width:none; }
}


/* ==========================================================
   Installation / Update Service
========================================================== */

.service-section{
  margin:20px auto;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:50px;
}
.service-grid.cols-2{ grid-template-columns:repeat(2,1fr); }

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

    border-color:#1d4ed8;

}

.service-card{
    padding:24px;
}



.service-card .service-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0;

    border-radius:10px;
    background:#2563eb;
    color:#fff;
}


.service-card .service-header h3{
    flex:1;

    margin:0;

    font-size:1.1rem;
    line-height:1.4;
    text-align:left;
}


.service-card p{
    margin:0;
    color:var(--text-muted);
    line-height:1.8;
}

@media (max-width:1024px){

    .service-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .service-section{
        padding:60px 0;
    }

    .service-card .service-header h3{
        font-size:16px;
        line-height:1.4;
    }

    .service-card p{
        font-size:14px;
        line-height:1.7;
    }

    .service-grid,
    .service-grid.cols-2 {
        grid-template-columns:1fr;
        gap:20px;
    }

    .service-card{
        padding:30px 24px;
    }
}


/* ============================================================
   글로벌 데이터 쉐어링 다이어그램 (.gds-*)
   적용: gmtc_technical_support 의 "글로벌 데이터 쉐어링" service-section
   방식: gmtc_registration 과 동일 — 1000x780 좌표계, 박스(%) + SVG 직각 화살표
   ============================================================ */

/* 다이어그램 캔버스 (폭에 맞춰 비율 유지 축소) */
.gds-diagram{
    position:relative;
    width:100%;
    max-width:1000px;
    margin:0 auto;
    aspect-ratio:1000 / 780;       /* 좌표계와 동일 비율 */
    container-type:inline-size;     /* 내부 글자 cqw 로 함께 축소 */
}

/* 공통 박스 */
.gds-box{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:.15em;
    padding:.8cqw;
    border:1px solid var(--line);
    background:var(--card);
    box-shadow:0 3px 10px rgba(20,30,50,.05);
    z-index:2;                     /* 화살표(z-index:1)보다 위 */
}
.gds-box .gds-ico{ font-size:clamp(13px,2.4cqw,24px); line-height:1; }
.gds-box .gds-name{ font-size:clamp(10px,1.55cqw,16px); font-weight:800; color:var(--text); }
.gds-box .gds-sub{ font-size:clamp(8px,1cqw,11px); color:var(--text-muted); }

/* 상단: 글로벌 시스템 3개 — 원형 (서버) */
.gds-top{ top:2%; width:15%; aspect-ratio:1; border-radius:50%; }
.gds-gmna{ left:18%; border:2px solid #5aa469; }   /* 북미(초록) */
.gds-etc { left:43%; border:2px solid #e8833a; }   /* 기타(주황) */
.gds-gme { left:68%; border:2px solid #e6b800; }   /* 유럽(노랑) */

/* 중앙 허브: GM-ODS (강조, 사각형) */
.gds-ods{
    top:30%; height:15%; left:33%; width:34%;
    border-radius:14px;
    background:var(--brand);
    border-color:var(--brand);
}
.gds-ods .gds-name{ color:#fff; font-size:clamp(13px,2cqw,20px); }
.gds-ods .gds-sub { color:rgba(255,255,255,.85); }

/* PDMAP — 원형 (서버) */
.gds-pdmap{
    top:56%; left:42.5%; width:15%;
    aspect-ratio:1; border-radius:50%;
    border:2px solid var(--brand);
    background:#eaf1fb;
}
.gds-pdmap .gds-name{ color:var(--brand-strong); }

/* 하단: 공급업체 3개 — 사각형 */
.gds-sup{ top:82%; height:12%; width:20%; border-radius:12px; }
.gds-supa{ left:15%; }
.gds-supb{ left:40%; }
.gds-supc{ left:65%; }

/* 화살표 오버레이 (viewBox 1000x780 공유) */
.gds-svg{
    position:absolute; inset:0; z-index:1;
    width:100%; height:100%;
    pointer-events:none;
}
.gds-svg path{ fill:none; stroke:#4a5361; stroke-width:2; }
.gds-svg .flow-pub path{ stroke:#d99a00; }        /* Publish(노랑) */
.gds-svg .flow-imp path{ stroke:#c0392b; }        /* Remote Import(빨강) */
.gds-svg marker polygon{ fill:#4a5361; }

/* 화살표 라벨 */
.gds-label{
    position:absolute; z-index:3;
    transform:translate(-50%,-50%);
    font-size:clamp(8px,1.1cqw,12px);
    font-weight:700;
    white-space:nowrap;
}
.gds-label.pub-top{ left:54%; top:26.5%; color:#c08000; }
.gds-label.imp-mid{ left:42%; top:50%;   color:#c0392b; }
.gds-label.pub-mid{ left:56%; top:50%;   color:#c08000; }

/* ============================================================
   글로벌 데이터 쉐어링 — 반응형
   모바일에서는 원본 비율 유지 + 가로 스크롤
   ============================================================ */

.gds-scroll{
    width:100%;
    max-width:1000px;
    margin:0 auto;
}

@media (max-width:640px){

    .gds-scroll{
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        padding-bottom:10px;
    }

    .gds-diagram{
        width:640px;
        max-width:none;
    }

}