/* 이 파일의 규칙은 모두 #p-<화면이름> 안쪽에만 걸립니다.
   접두사를 떼면 특이도가 낮아져 base.css 의 반응형 규칙을 덮어쓰게 되므로 그대로 둡니다. */
#p-technology h1, #p-technology h2, #p-technology h3, #p-technology h4{margin:0;font-weight:700;line-height:.95;color:var(--ink)}
#p-technology p{margin:0}
#p-technology :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#p-technology .display-xl{font-size:clamp(32px, 20.4px + 3.09vw, 56px);font-weight:700;line-height:1.2}
#p-technology .display-lg{font-size:clamp(26px, 19.2px + 1.80vw, 40px);font-weight:700;line-height:1}
#p-technology .display-md{font-size:clamp(22px, 17.2px + 1.29vw, 32px);font-weight:700;line-height:1}
#p-technology .heading-lg{font-size:24px;font-weight:700;line-height:.95}
#p-technology .subtitle{font-size:19.2px;font-weight:600;line-height:1.3}
#p-technology .body-lg{font-size:18px;line-height:1.5}
#p-technology .body-md{font-size:16px;line-height:1.4}
#p-technology .body-sm{font-size:14px;line-height:1.57}
#p-technology .caption{font-size:12px;line-height:1.4}
#p-technology .overline{font-size:12px;font-weight:700;line-height:1.45;letter-spacing:0}
#p-technology  
.band{padding:var(--s-section) 64px}
#p-technology .band.light{background:var(--canvas)}
#p-technology .band.soft{background:var(--surface-soft)}
#p-technology .band.dark{background:var(--surface-dark);color:var(--on-dark)}
#p-technology .band.dark h1, #p-technology .band.dark h2, #p-technology .band.dark h3{color:var(--on-dark)}
#p-technology .inner{max-width:1152px;margin:0 auto}
@media(max-width:900px){#p-technology .band{padding:96px 24px}}
#p-technology .btn{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;letter-spacing:.144px;line-height:1;
  padding:14px 24px;border-radius:var(--r-xs);border:1px solid transparent;min-height:50px}
#p-technology .btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#p-technology .band.dark .btn-primary{background:var(--accent-on-dark);color:var(--ink);border-color:var(--accent-on-dark)}
#p-technology .btn-outline-dark{background:var(--canvas);color:var(--ink);border-color:var(--hairline-strong);padding:13px 23px}
#p-technology .btn-outline-light{background:var(--surface-dark);color:var(--on-dark);border-color:var(--on-dark);padding:13px 23px}
#p-technology .btns{display:flex;flex-wrap:wrap;gap:var(--s-sm)}
#p-technology .more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;align-self:flex-start}
#p-technology .band.dark .more{color:var(--on-dark);border-bottom-color:var(--on-dark)}
#p-technology  
.hero{background:var(--surface-dark);color:var(--on-dark);padding:var(--s-section) 64px}
#p-technology .hero .inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-xxxl)}
#p-technology .hero .stack{display:flex;flex-direction:column;align-items:center;gap:var(--s-lg)}
#p-technology .hero h1{color:var(--on-dark);max-width:18ch}
#p-technology .hero .subtitle{color:var(--on-dark-mute);max-width:46ch}
@media(max-width:900px){#p-technology .hero{padding:96px 24px}}
#p-technology  
.filmband{background:var(--surface-dark);padding:0 64px var(--s-section)}
@media(max-width:900px){#p-technology .filmband{padding:0 24px 96px}}
#p-technology .film{max-width:1152px;margin:0 auto;height:542px;background:var(--surface-deep);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--s-lg)}
@media(max-width:900px){#p-technology .film{height:340px}}
#p-technology .film .lb{font-size:11px;color:rgba(255,255,255,.35)}
#p-technology  
.cloud{display:flex;flex-wrap:wrap;gap:var(--s-lg) 56px;align-items:center;margin-top:var(--s-xl);
  padding-top:var(--s-xl);border-top:1px solid var(--hairline-strong)}
#p-technology .cloud .c{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
#p-technology  
/* 1fr 은 minmax(auto,1fr) 이라 열이 내용보다 좁아지지 못합니다. 그림의
   원본 폭이 그대로 최소 폭이 되어 열이 부풀고 화면이 옆으로 넘쳤습니다.
   minmax(0,1fr) 로 두어 열이 제 몫만큼만 차지하게 합니다. */
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:var(--s-xxxl)}
@media(max-width:900px){#p-technology .frow{grid-template-columns:1fr;gap:var(--s-xl)}}
#p-technology .fcopy{display:flex;flex-direction:column;gap:var(--s-md)}
#p-technology .fcopy .d{font-size:17px;line-height:1.6;color:var(--charcoal)}
#p-technology .band.dark .fcopy .d{color:var(--on-dark-mute)}
#p-technology .fcopy ul{list-style:none;margin:var(--s-xs) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-xs)}
#p-technology .fcopy li{font-size:16px;font-weight:700;color:var(--ink);border-top:1px solid var(--hairline);padding-top:var(--s-xs)}
#p-technology .band.dark .fcopy li{color:var(--on-dark);border-top-color:var(--divider-dark)}
/* 슬롯 높이를 440px 로 고정해 두어 상자 비율이 1.25:1 이었습니다.
   base.css 에 접두사 없는 .fimg{height:440px} 가 남아 있어 여기서
   높이를 빼면 그 규칙이 살아납니다. height:auto 로 명시적으로 풉니다.
   그림은 16:9 로 만들어 주신 것이라 좌우가 29% 씩 잘려 나갔습니다.
   상세 화면과 같은 16:9 로 맞춥니다. 글 단과 높이도 나란해집니다. */
#p-technology .fimg{aspect-ratio:16/9;height:auto;background:var(--surface-soft);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--s-md)}
#p-technology .band.dark .fimg{background:var(--surface-deep)}
#p-technology .fimg .lb{font-size:11px;color:var(--ash)}
#p-technology .band.dark .fimg .lb{color:rgba(255,255,255,.35)}
@media(max-width:900px){#p-technology .fimg{aspect-ratio:16/9;height:auto}
#p-technology .frow.rev .fimg{order:-1}}
#p-technology  
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xxxl);margin-top:var(--s-xxl)}
@media(max-width:767px){#p-technology .nums{grid-template-columns:1fr;gap:var(--s-xl)}}
#p-technology .nums .n{border-top:1px solid var(--hairline-strong);padding-top:var(--s-md);display:flex;flex-direction:column;gap:var(--s-xs)}
#p-technology .nums .v{font-size:40px;font-weight:700;line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums}
#p-technology .nums .t{font-size:16px;font-weight:700;color:var(--ink);margin-top:4px}
#p-technology .nums .d{font-size:14px;line-height:1.6;color:var(--mute)}
#p-technology  
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-lg)}
#p-technology .cta p{color:var(--on-dark-mute);max-width:50ch}
#p-technology  
a{text-decoration:none;color:inherit}
#p-technology .btn{transition:background-color .15s,color .15s,border-color .15s;cursor:pointer}
#p-technology .btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
#p-technology .band.dark .btn-primary:hover{background:#e6e6e6;border-color:#e6e6e6}
#p-technology .btn-outline-light:hover{background:var(--on-dark);color:var(--ink)}
#p-technology .more{transition:opacity .15s}
#p-technology .more:hover{opacity:.6}
#p-technology  
.gwrap{margin-top:var(--s-xxl)}
#p-technology .gtrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*var(--s-md))/3);gap:var(--s-md);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#p-technology .gtrack::-webkit-scrollbar{display:none}
@media(max-width:900px){#p-technology .gtrack{grid-auto-columns:calc((100% - var(--s-md))/2)}}
@media(max-width:600px){#p-technology .gtrack{grid-auto-columns:86%}}
#p-technology .gcard{scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--s-sm)}
#p-technology .gcard .th{aspect-ratio:4/3;background:var(--canvas);display:flex;align-items:flex-end;
  padding:var(--s-sm);transition:background-color .15s}
#p-technology .gcard:hover .th{background:#ececec}
#p-technology .gcard .th span{font-size:11px;color:var(--ash)}
#p-technology .gcard .kick{display:flex;gap:var(--s-sm);align-items:center;margin-top:2px}
#p-technology .gcard .cat{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--mute);
  border:1px solid var(--stone);padding:3px 8px;line-height:1}
#p-technology .gcard .dt{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ash);font-variant-numeric:tabular-nums}
#p-technology .gcard .h{font-size:20px;font-weight:700;line-height:1.3;color:var(--ink)}
#p-technology .gcard:hover .h{text-decoration:underline;text-underline-offset:4px}
#p-technology .gcard .d{font-size:14px;line-height:1.65;color:var(--mute)}
#p-technology .gctl{display:flex;align-items:center;gap:var(--s-md);margin-top:var(--s-xl)}
#p-technology .gctl button{width:40px;height:40px;flex:0 0 auto;border:1px solid var(--hairline-strong);background:transparent;
  color:var(--ink);cursor:pointer;border-radius:var(--r-xs);font-size:15px;line-height:1;transition:background-color .15s,color .15s}
#p-technology .gctl button:hover:not(:disabled){background:var(--ink);color:var(--canvas)}
#p-technology .gctl button:disabled{opacity:.25;cursor:default}
#p-technology .gbar{flex:1 1 auto;max-width:280px;height:2px;background:var(--stone);position:relative}
#p-technology .gbar i{position:absolute;top:0;height:100%;background:var(--ink);transition:left .25s ease,width .25s ease}
#p-technology .gcount{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--mute);
  font-variant-numeric:tabular-nums;margin-left:auto;flex:0 0 auto}
#p-technology .xref{margin-top:var(--s-xxxl);border-top:1px solid var(--hairline-strong);padding-top:var(--s-md);
  display:flex;gap:var(--s-md);flex-wrap:wrap;align-items:baseline;justify-content:space-between}
#p-technology .xref .q{font-size:14px;line-height:1.6;color:var(--mute);max-width:62ch}
#p-technology  
.hero .stack .bc, #p-technology .ihead .bc{margin-bottom:0}
@media(max-width:900px){#p-technology .trio{grid-template-columns:1fr}}
#p-technology .trio .i{background:var(--canvas);padding:var(--s-xl);display:flex;flex-direction:column;gap:var(--s-sm)}
#p-technology .trio .v{font-size:34px;font-weight:700;line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums}
#p-technology .trio .t{font-size:17px;font-weight:700;line-height:1.3;color:var(--ink)}
#p-technology .trio .d{font-size:14px;line-height:1.7;color:var(--mute)}
#p-technology .trio .s{font-size:12px;line-height:1.5;color:var(--ash);border-top:1px solid var(--hairline);padding-top:var(--s-sm);margin-top:auto}
#p-technology .spec{border-top:1px solid var(--hairline-strong);margin-top:var(--s-xxl)}
#p-technology .spec .r{display:grid;grid-template-columns:230px 180px 1fr;gap:var(--s-lg);align-items:baseline;
  padding:var(--s-lg) 0;border-bottom:1px solid var(--hairline)}
@media(max-width:767px){#p-technology .spec .r{grid-template-columns:1fr;gap:4px}}
#p-technology .spec .k{font-size:16px;font-weight:700;color:var(--ink)}
#p-technology .spec .v{font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
#p-technology .spec .c{font-size:14px;line-height:1.6;color:var(--mute)}
#p-technology .iface{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xxxl);margin-top:var(--s-xxl)}
@media(max-width:900px){#p-technology .iface{grid-template-columns:1fr;gap:var(--s-xl)}}
#p-technology .iface ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-xs)}
#p-technology .iface li{font-size:16px;color:var(--on-dark);border-top:1px solid var(--divider-dark);padding-top:var(--s-xs)}
#p-technology .iface .d{font-size:17px;line-height:1.6;color:var(--on-dark-mute)}
#p-technology a{text-decoration:none;color:inherit}
#p-technology .gwrap{margin-top:var(--s-xxl)}
#p-technology .trio{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);margin-top:var(--s-xxl)}
@media(max-width:900px){#p-technology .trio{grid-template-columns:1fr}}
/* 칸이 여섯이라 세 열입니다. 넷으로 두면 마지막 줄에 둘만 남습니다. */
#p-technology .stats{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s-md);margin-top:var(--s-xxl)}
@media(max-width:900px){#p-technology .stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#p-technology .stats{grid-template-columns:1fr}}
#p-technology .stat{border:1px solid var(--hairline-strong);
  padding:var(--s-xl);display:flex;flex-direction:column;
  transition:background-color .18s,border-color .18s,color .18s}
#p-technology .stat .num, #p-technology .stat .lb, #p-technology .stat .cap{transition:color .18s,border-color .18s}
/* 숫자 강조 그리드 */
/* 손이 얹히면 타일이 통째로 검게 뒤집힙니다. 손가락으로 누르는 기기에서는
   호버가 눌린 채로 남기 때문에 hover 를 실제로 쓸 수 있는 환경에만 겁니다. */
@media(hover:hover){#p-technology .stat:hover{
    background:var(--surface-dark);border-color:var(--surface-dark)}
#p-technology .stat:hover .num{color:var(--on-dark)}
#p-technology .stat:hover .lb{
    color:var(--on-dark);border-top-color:var(--divider-dark)}
#p-technology .stat:hover .cap{color:var(--on-dark-mute)}}
#p-technology .stat .num{display:flex;align-items:baseline;gap:1px;
  font-size:clamp(34px,3.2vw,48px);font-weight:700;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
#p-technology .stat .num i{font-style:normal;font-size:.5em;font-weight:700}
#p-technology .stat .lb{font-size:16px;font-weight:700;color:var(--ink);
  margin-top:var(--s-lg);padding-top:var(--s-sm);border-top:1px solid var(--hairline)}
#p-technology .stat .cap{font-size:14px;line-height:1.65;
  color:var(--mute);margin-top:var(--s-xs)}
/* 제목과 목록 사이를 항목 사이보다 넓게 둡니다. 같은 값이면 제목이 목록의
   한 항목처럼 읽힙니다. 항목 사이 32px, 제목 아래 48px입니다. */
#p-technology .records{border-top:1px solid var(--hairline-strong);
  margin-top:var(--s-xxxl)}
#p-technology .rec{padding:var(--s-xl) 0;border-bottom:1px solid var(--hairline);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr);gap:var(--s-lg) var(--s-xxxl);
  align-items:start}
@media(max-width:900px){#p-technology .rec{grid-template-columns:1fr;gap:var(--s-sm)}}
/* 공개된 기록 — 제목과 부제 */
#p-technology .rec h3{font-size:26px;font-weight:700;line-height:1.25;color:var(--ink)}
@media(max-width:767px){#p-technology .rec h3{font-size:21px}}
#p-technology .rec .sb{font-size:17px;line-height:1.75;color:var(--charcoal)}
#p-technology .rec .src{grid-column:2;font-size:12px;line-height:1.5;
  color:var(--ash);letter-spacing:.02em}
@media(max-width:900px){#p-technology .rec .src{grid-column:1}}
#p-technology .statfoot{margin-top:var(--s-lg);text-align:right;
  font-size:12px;line-height:1.6;color:var(--ash)}
/* 연동 섹션을 회색 밴드로 옮기면서 글자색을 밝은 배경에 맞춥니다.
   바로 아래 마무리 제안이 검정이라, 검정 밴드가 둘 붙어 한 덩어리로 보였습니다. */
#p-technology .iface .d{color:var(--charcoal)}
#p-technology .iface li{color:var(--ink);
  border-top-color:var(--hairline-strong)}
/* 연동 목록에 번호를 붙입니다. 원칙과 도입 절차에서 쓰는 01 형식과 맞췄습니다. */
#p-technology .iface ul{counter-reset:iface}
#p-technology .iface li{counter-increment:iface;
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--s-md);align-items:baseline}
#p-technology .iface li::before{
  content:counter(iface,decimal-leading-zero);
  font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--ash);font-variant-numeric:tabular-nums}
/* 기록 항목을 가르는 선. #f2f2f2 는 회색 밴드(#f7f7f7) 위에서 다섯 단계밖에
   차이가 나지 않아 사실상 보이지 않았습니다. 한 단계 진한 색으로 올립니다. */
#p-technology .rec{border-bottom-color:var(--stone)}
#p-technology .records{border-top-color:var(--stone)}
@media(hover:hover){#p-technology .hovwrap{
    position:fixed;top:0;left:0;z-index:22;pointer-events:none;will-change:transform;
    transition:transform .28s cubic-bezier(.22,.61,.36,1)}
#p-technology .hovimg{
    width:280px;aspect-ratio:16/10;background:var(--canvas);
    border:1px solid var(--hairline-strong);
    display:flex;align-items:flex-end;padding:var(--s-sm);
    opacity:0;transform:scale(.94);
    transition:opacity .18s ease,transform .18s cubic-bezier(.22,.61,.36,1)}
#p-technology .hovwrap.on .hovimg{
    opacity:1;transform:scale(1)}
#p-technology .hovimg span{
    font-size:11px;color:var(--ash);letter-spacing:.02em}
#p-technology .hovimg.has-img span{
    background:var(--surface-dark);color:var(--on-dark);
    padding:5px 8px;line-height:1.2;max-width:100%}
#p-technology .hovimg.has-img{
    padding:0;background-size:cover;background-position:center;background-repeat:no-repeat}
/* 미리보기가 영상인 항목입니다. 배경 그림이 첫 장면을 이미 그리고 있으므로
   영상은 그 위를 덮습니다. 이름표는 영상 위에 남아야 해 한 겹 올려 둡니다. */
#p-technology .hovimg{position:relative;overflow:hidden}
#p-technology .hovimg .hovvid{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;border:0}
#p-technology .hovimg span{position:relative;z-index:1}
#p-technology .rec h3{transition:opacity .18s}
#p-technology .rec:hover h3{opacity:.55}}
@media(prefers-reduced-motion:reduce){#p-technology .hovwrap, #p-technology .hovimg, #p-technology .rec h3{transition:none!important}}
#p-technology .hero{position:relative;overflow:hidden}
#p-technology .hero .hbg{position:absolute;inset:0;z-index:0}
#p-technology .hero .hbg::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
#p-technology .hero .inner{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){#p-technology .hero .hbg::after{background:rgba(0,0,0,.66)}}

/* ── 떠받치는 세 가지 ────────────────────────────────────────
   개요 화면에서 측위·스테레오·로봇 플랫폼 셋을 한자리에 세웁니다.
   셋이 두 열로 접히면 마지막 하나가 줄에 혼자 남으므로, 세 열에서
   곧바로 한 열로 세웁니다. */
#p-technology .plede{font-size:17px;line-height:1.7;color:var(--mute);margin-top:var(--s-lg);max-width:62ch}
/* 두 문장을 각각 한 줄로 보이려고 폭 제한을 푸는 자리입니다.
   기술 상세의 .lede.one 과 같은 뜻입니다. */
#p-technology .plede.one{max-width:none}
#p-technology .pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-md);margin-top:var(--s-xxxl)}
@media(max-width:900px){#p-technology .pillars{grid-template-columns:1fr;gap:0}}
#p-technology .pillars .pl{display:flex;flex-direction:column;align-items:flex-start;
  border-top:1px solid var(--hairline-strong);padding-top:var(--s-md);padding-right:var(--s-lg)}
@media(max-width:900px){#p-technology .pillars .pl{padding:var(--s-lg) 0;border-top:0;border-bottom:1px solid var(--stone)}
#p-technology .pillars .pl:first-child{border-top:1px solid var(--hairline-strong)}}
#p-technology .pillars .k{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ash);
  font-variant-numeric:tabular-nums}
#p-technology .pillars .t{font-size:24px;font-weight:700;line-height:1.15;color:var(--ink);margin-top:6px}
#p-technology .pillars .d{font-size:15px;line-height:1.75;color:var(--charcoal);margin-top:var(--s-lg)}
#p-technology .pillars .go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;
  color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;margin-top:var(--s-lg);
  transition:opacity .15s}
#p-technology .pillars .go::after{content:"\2192"}
#p-technology .pillars .pl:hover .t{text-decoration:underline;text-underline-offset:4px}
#p-technology .pillars .pl:hover .go{opacity:.6}

/* 밴드 안의 사진. 칸 높이가 정해져 있으므로 비율을 지키며 채우고 넘치는 만큼 잘라 씁니다.
   규칙이 아니라 요소(img)로 넣어야 다른 배경 규칙에 덮이지 않습니다. */
#p-technology .fimg{padding:0;overflow:hidden}
#p-technology .fimg img{display:block;width:100%;height:100%;object-fit:cover}

/* ── 세로로 긴 그림을 16:9 칸에 넣을 때 ──────────────────────────
   기술 개요의 그림 칸은 16:9 입니다. 측위와 Robot System 사진은 본디 16:9 라
   그대로 들어가는데, 스테레오의 판재 복원 화면만 1200×1227 로 거의
   정사각이라 세로의 45% 가 잘립니다. 원본이 956px 짜리 한 장뿐이어서
   16:9 로 다시 뽑아도 없는 화소를 늘리는 것이 될 뿐입니다. 그래서 파일은
   두고 잘리는 자리만 옮깁니다.
   가운데를 두면 접합부의 파란 선이 위 삼분의 일에 몰려 오른쪽 위에서
   끊깁니다. 25% 로 올리면 선이 모서리에서 모서리로 지나고 양쪽 판재가
   함께 보입니다. 이 칸의 주제가 판재가 아니라 접합부이기 때문입니다. */
#p-technology .fimg.crop-up img{object-position:center 25%}