:root{
  --bg: #14171a;
  --panel: #1d2124;
  --panel-2: #24292d;
  --line: #33393e;
  --text: #edeef0;
  --text-dim: #9aa3a9;
  --brand: #ee5560;
  --brand-deep: #811119;
  --steel: #8197a5;
  --red: #b23a2e;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:96px; scrollbar-color:var(--line) var(--bg); accent-color:var(--brand);}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans KR', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  caret-color:var(--brand);
}
::selection{background:var(--brand-deep); color:#fff;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
a{color:inherit; text-decoration:none;}
.display{font-family:'Archivo', sans-serif; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', monospace;}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}

/* diagonal hazard stripe used sparingly as texture */
.hazard-strip{
  height:6px;
  background:repeating-linear-gradient(135deg, var(--brand-deep) 0 14px, #14171a 14px 28px);
}

header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:1120px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{display:flex; align-items:center; gap:10px; min-width:0;}
.logo-svg{
  width:50px; height:50px; flex-shrink:0; object-fit:contain;
}
.logo-text{font-family:'Archivo'; font-weight:800; font-size:26px; letter-spacing:0.02em; line-height:1.1;}
.logo-sub{font-size:11px; color:var(--text-dim); font-family:'IBM Plex Mono'; letter-spacing:0.05em; margin-top:2px;}
#site-nav{display:flex; align-items:center; gap:28px;}
#site-nav a{font-size:14px; color:var(--text-dim); transition:color .15s;}
#site-nav a:hover{color:var(--brand);}
.nav-cta{
  display:inline-block; padding:9px 18px; border:1px solid var(--brand); color:var(--brand) !important;
  font-size:13px; font-weight:600; white-space:nowrap;
}
.nav-cta:hover{background:var(--brand); color:var(--bg) !important;}
.menu-btn{
  display:none; width:44px; height:44px; flex-shrink:0;
  background:none; border:1px solid var(--line); color:var(--text); cursor:pointer;
  align-items:center; justify-content:center;
}
.menu-btn svg{width:20px; height:20px;}
.menu-btn .icon-close{display:none;}
.menu-btn[aria-expanded="true"] .icon-open{display:none;}
.menu-btn[aria-expanded="true"] .icon-close{display:block;}
@media(max-width:920px){
  .menu-btn{display:inline-flex;}
  #site-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:8px 24px 20px;
  }
  #site-nav.open{display:flex;}
  #site-nav a{font-size:16px; color:var(--text); padding:14px 0; border-bottom:1px solid var(--line);}
  #site-nav a.nav-cta{margin-top:16px; text-align:center; padding:14px 18px; border:1px solid var(--brand);}
}
@media(max-width:480px){ .logo-sub{display:none;} .logo-text{font-size:22px;} .logo-svg{width:42px; height:42px;} }

/* HERO — styled as an oversized equipment rating plate */
.hero{
  max-width:1120px; margin:0 auto; padding:80px 24px 40px;
}
h1{
  font-size:clamp(34px, 6vw, 62px);
  font-weight:800;
  line-height:1.08;
  max-width:780px;
  margin-bottom:22px;
  text-wrap:balance;
}
h1 em{color:var(--brand); font-style:normal;}
.hero-sub{
  font-size:17px; color:var(--text-dim); max-width:540px; margin-bottom:34px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px;}
.btn-primary{
  background:var(--brand-deep); color:#fff; padding:14px 26px; font-weight:700; font-size:14px;
  display:inline-block; transition:transform .15s, background-color .15s;
}
.btn-primary:hover{background:#9a1620;}
.btn-secondary{
  border:1px solid var(--line); padding:14px 26px; font-weight:600; font-size:14px; color:var(--text);
  display:inline-block; transition:border-color .15s;
}
.btn-secondary:hover{border-color:var(--brand);}

/* rating plate strip — the signature element, echoed later */
.plate{
  background:var(--panel); border:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.plate-cell{
  padding:20px 22px; border-right:1px solid var(--line);
}
.plate-cell:last-child{border-right:none;}
.plate-label{font-family:'IBM Plex Mono'; font-size:11px; color:var(--text-dim); letter-spacing:0.05em; margin-bottom:6px;}
.plate-value{font-family:'Archivo'; font-weight:700; font-size:17px; color:var(--brand);}
@media(max-width:760px){
  .plate{grid-template-columns:repeat(2,1fr);}
  .plate-cell:nth-child(odd){border-right:1px solid var(--line);}
  .plate-cell:nth-child(even){border-right:none;}
  .plate-cell:nth-child(-n+2){border-bottom:1px solid var(--line);}
}

section{max-width:1120px; margin:0 auto; padding:88px 24px;}
.section-head{margin-bottom:44px;}
h2{font-family:'Archivo'; font-weight:700; font-size:clamp(26px,3.4vw,36px); line-height:1.25; text-wrap:balance;}
.section-desc{color:var(--text-dim); font-size:15px; max-width:520px; margin-top:12px;}

/* products */
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:960px){.product-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:760px){.product-grid{grid-template-columns:1fr;}}
.product-card{
  background:var(--panel); border:1px solid var(--line); padding:36px;
  display:flex; flex-direction:column;
  transition:border-color .15s;
}
.product-card:hover{border-color:#4a5157;}
@media(max-width:480px){.product-card{padding:28px 24px;}}
.product-tag{font-family:'IBM Plex Mono'; font-size:11px; color:var(--brand); letter-spacing:0.05em; margin-bottom:14px;}
.product-name{font-family:'Archivo'; font-weight:700; font-size:24px; margin-bottom:10px;}
.product-desc{color:var(--text-dim); font-size:14px; margin-bottom:22px;}
.badge-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;}
.badge{
  font-family:'IBM Plex Mono'; font-size:11px; padding:6px 10px;
  border:1px solid var(--line); color:var(--steel);
}
.product-link{
  margin-top:auto; font-size:13px; font-weight:600; color:var(--brand);
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
}
.product-link svg{width:14px; height:14px; transition:transform .15s;}
.product-link:hover svg{transform:translateX(3px);}

/* catalog — model spec sheets */
.catalog-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:28px;}
.catalog-head .section-desc{margin-top:12px;}
.ext-link{font-size:13px; font-weight:600; color:var(--text-dim); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:color .15s;}
.ext-link:hover{color:var(--brand);}
.ext-link svg{width:13px; height:13px;}
.grade-key{
  display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); margin-bottom:20px;
}
.grade-key div{flex:1 1 200px; padding:14px 18px; border-right:1px solid var(--line); font-size:13px; color:var(--text-dim);}
.grade-key div:last-child{border-right:none;}
.grade-key b{font-family:'IBM Plex Mono'; color:var(--text); font-weight:600; margin-right:8px;}
@media(max-width:760px){
  .grade-key div{flex-basis:50%; border-bottom:1px solid var(--line);}
  .grade-key div:nth-child(even){border-right:none;}
  .grade-key div:nth-last-child(-n+2){border-bottom:none;}
}
.model-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media(max-width:860px){.model-grid{grid-template-columns:1fr;}}
@media(min-width:861px){
  .model-grid > .model:last-child:nth-child(odd){grid-column:1 / -1;}
  .model-grid > .model:last-child:nth-child(odd) .spec{display:grid; grid-template-columns:1fr 1fr; column-gap:28px;}
}
.model{background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column;}
.model-top{padding:28px 28px 20px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px;}
.model-kind{font-size:13px; color:var(--text-dim); margin-bottom:4px;}
.model-name{font-family:'Archivo'; font-weight:800; font-size:30px; line-height:1.1; letter-spacing:-0.01em;}
.model-zone{font-family:'IBM Plex Mono'; font-size:12px; color:var(--brand); border:1px solid var(--brand); padding:5px 9px; white-space:nowrap;}
.model-lead{padding:0 28px 20px; color:var(--text-dim); font-size:14px;}
.spec{border-top:1px solid var(--line); margin:0 28px;}
.spec div{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px;}
.spec dt{color:var(--text-dim);}
.spec dd{color:var(--text);}
.variants{padding:18px 28px 26px; margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.variants span{font-family:'IBM Plex Mono'; font-size:12px; padding:5px 9px; border:1px solid var(--line); color:var(--steel);}
.variants span.on{color:var(--text); border-color:#4a5157;}
.catalog-note{margin-top:20px; font-size:13px; color:var(--text-dim);}
@media(max-width:480px){
  .model-top{padding:24px 22px 16px;} .model-lead{padding:0 22px 16px;} .spec{margin:0 22px;} .variants{padding:16px 22px 22px;}
  .model-name{font-size:26px;}
}

/* HMI size table */
.hmi-common{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--panel); margin-bottom:20px;}
.hmi-common > div{padding:18px 20px; border-right:1px solid var(--line);}
.hmi-common > div:last-child{border-right:none;}
.hmi-common .v{font-family:'Archivo'; font-weight:700; font-size:15px; color:var(--text); margin-top:4px;}
@media(max-width:860px){
  .hmi-common{grid-template-columns:1fr 1fr;}
  .hmi-common > div:nth-child(even){border-right:none;}
  .hmi-common > div:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
.hmi-table{width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums;}
.hmi-table th{font-size:12px; font-weight:500; color:var(--text-dim); text-align:left; padding:12px 16px; border-bottom:1px solid var(--line);}
.hmi-table td{padding:16px; border-bottom:1px solid var(--line);}
.hmi-table td.size{font-family:'Archivo'; font-weight:700; font-size:20px; white-space:nowrap;}
.hmi-table td.code{font-family:'IBM Plex Mono'; font-size:13px; color:var(--text);}
.hmi-table td.dim{color:var(--text-dim);}
@media(max-width:640px){
  .hmi-table thead{display:none;}
  .hmi-table tr{display:grid; grid-template-columns:76px 1fr; column-gap:16px; padding:14px 0; border-bottom:1px solid var(--line);}
  .hmi-table td{border:none; padding:2px 0;}
  .hmi-table td.size{grid-row:span 3; font-size:22px;}
}
.opt-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; align-items:center;}
.opt-list .lbl{font-size:13px; color:var(--text-dim); margin-right:4px;}
.opt-list span.badge{color:var(--text-dim);}

/* why us */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:760px){.why-grid{grid-template-columns:1fr;}}
.why-cell{background:var(--bg); padding:32px 28px;}
.why-title{font-family:'Archivo'; font-weight:700; font-size:18px; margin-bottom:10px;}
.why-desc{color:var(--text-dim); font-size:14px;}

/* industries */
.industry-list{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.industry-row{
  display:grid; grid-template-columns:minmax(180px, 1fr) 2fr; gap:20px; align-items:center;
  padding:22px 4px; border-bottom:1px solid var(--line);
}
@media(max-width:640px){
  .industry-row{grid-template-columns:1fr; row-gap:4px;}
}
.industry-name{font-family:'Archivo'; font-weight:700; font-size:17px;}
.industry-app{color:var(--text-dim); font-size:14px;}

/* contact — framed like a requisition form */
.contact-wrap{
  background:var(--panel); border:1px solid var(--line);
}
.contact-head{
  padding:26px 32px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px;
}
.contact-head .note{font-size:13px; color:var(--text-dim);}
.contact-body{padding:32px;}
@media(max-width:480px){.contact-head{padding:22px 24px;} .contact-body{padding:24px;}}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field label{display:block; font-size:13px; color:var(--text-dim); margin-bottom:8px;}
.field input, .field textarea, .field select{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text);
  padding:12px 14px; font-family:inherit; font-size:16px; border-radius:0;
  transition:border-color .15s;
}
.field input:hover, .field textarea:hover, .field select:hover{border-color:#4a5157;}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--brand); outline:none;}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{outline:2px solid var(--brand); outline-offset:0;}
.field textarea{resize:vertical; min-height:120px;}
.field textarea::placeholder{color:#7f888e;}
.hp{display:none;}
.contact-info{
  display:flex; gap:32px; flex-wrap:wrap; margin-top:24px; padding-top:24px; border-top:1px solid var(--line);
}
.contact-info-item .plate-label{margin-bottom:4px;}
.contact-info-item .val{font-size:15px;}
.contact-info-item a.val:hover{color:var(--brand);}

footer{
  border-top:1px solid var(--line); padding:32px 24px; text-align:center;
  color:var(--text-dim); font-size:12px; font-family:'IBM Plex Mono'; letter-spacing:0.03em;
}

/* sub pages */
.page-head{max-width:1120px; margin:0 auto; padding:64px 24px 8px;}
.crumb{font-size:13px; color:var(--text-dim); margin-bottom:18px; display:flex; gap:8px; align-items:center;}
.crumb a:hover{color:var(--brand);}
.page-head h1{font-family:'Archivo'; font-size:clamp(34px,5vw,52px); margin-bottom:16px;}
.page-head .hero-sub{margin-bottom:0;}
.page-head + section{padding-top:48px;}
#site-nav a[aria-current="page"]{color:var(--text);}
.cta-band{
  max-width:1120px; margin:0 auto 88px; padding:0 24px;
}
.cta-band > div{
  background:var(--panel); border:1px solid var(--line); padding:32px;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.cta-band h2{font-size:clamp(20px,2.4vw,26px);}
.cta-band p{color:var(--text-dim); font-size:14px; margin-top:6px;}
.product-actions{margin-top:auto; display:flex; gap:20px; flex-wrap:wrap; align-items:center;}
.product-actions .product-link{margin-top:0;}
.product-link.ghost{color:var(--text-dim);}
.product-link.ghost:hover{color:var(--brand);}

/* product photos */
.model-photo{
  height:260px; display:flex; align-items:center; justify-content:center; padding:28px;
  background:#fff;
}
.model-photo img{max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain;}
@media(max-width:480px){ .model-photo{height:220px; padding:22px;} }

.hmi-visual{
  display:grid; grid-template-columns:1.25fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); margin-bottom:20px;
}
.hmi-visual figure{
  margin:0; height:320px; padding:32px 32px 20px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:16px;
  background:#fff;
}
.hmi-visual img{max-height:230px; max-width:100%; width:auto; height:auto; object-fit:contain;}
.hmi-visual figcaption{font-size:13px; color:#4a5157;}
@media(max-width:640px){
  .hmi-visual{grid-template-columns:1fr 1fr;}
  .hmi-visual figure{height:220px; padding:20px 14px 14px;}
  .hmi-visual img{max-height:150px;}
}

/* ===== guide ===== */
.toc{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px;}
.toc a{font-size:13px; padding:8px 14px; border:1px solid var(--line); color:var(--text-dim); transition:border-color .15s, color .15s;}
.toc a:hover{border-color:var(--brand); color:var(--text);}
.guide .g-sec{padding-top:72px; padding-bottom:72px; border-bottom:1px solid var(--line);}
.guide .page-head + .g-sec{padding-top:56px;}
.guide .g-sec:last-of-type{border-bottom:none;}
.guide h2{margin-bottom:20px;}
.g-lead{color:var(--text-dim); font-size:16px; max-width:720px; margin-bottom:32px;}
.g-text p{color:var(--text-dim); font-size:15px; margin-bottom:14px; max-width:62ch;}
.g-text strong, .g-lead b, .g-text b{color:var(--text); font-weight:600;}
.g-text h3, .g-h3{font-family:'Archivo'; font-size:19px; margin:32px 0 12px;}
.g-split{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start;}
#zones .g-split{grid-template-columns:1fr 1.15fr;}
@media(max-width:900px){.g-split, #zones .g-split{grid-template-columns:1fr; gap:32px;}}
.g-list{list-style:none; border-top:1px solid var(--line); margin-top:20px;}
.g-list li{padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--text-dim);}
.g-list b{display:inline-block; min-width:96px; color:var(--text); font-weight:600;}
.g-fig{margin:0; background:var(--panel); border:1px solid var(--line); padding:28px 24px 18px;}
.g-fig svg{width:100%; height:auto; display:block;}
.g-fig figcaption{font-size:13px; color:var(--text-dim); margin-top:14px;}

/* triangle */
.tri-shape{fill:none; stroke:var(--line); stroke-width:3;}
.tri-cut{stroke:var(--brand); stroke-width:3; stroke-dasharray:8 6;}
.tri-dot{fill:var(--text-dim);} .tri-dot.hot{fill:var(--brand);}
.tri-label{fill:var(--text); font:600 17px 'IBM Plex Sans KR', sans-serif;}
.tri-label.hot{fill:var(--brand);}
.tri-center{fill:var(--text); font:800 30px 'Archivo','IBM Plex Sans KR', sans-serif;}
.tri-sub{fill:var(--text-dim); font:400 13px 'IBM Plex Sans KR', sans-serif;}
.tri-note{fill:var(--brand); font:600 13px 'IBM Plex Sans KR', sans-serif;}

/* incident photo */
.g-photo{margin:0 0 40px; border:1px solid var(--line); background:var(--panel);}
.g-photo img{display:block; width:100%; height:auto; max-height:560px; object-fit:cover;}
.g-photo figcaption{padding:16px 20px; display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--text);}
.g-photo .credit{font-size:12px; color:var(--text-dim);}
.g-photo .credit a{text-decoration:underline; text-underline-offset:3px;}
.g-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
@media(max-width:900px){.g-cols{grid-template-columns:1fr; gap:24px;}}
.g-cols h3{font-family:'Archivo'; font-size:17px; margin-bottom:10px; line-height:1.4;}
.g-cols p{font-size:14px; color:var(--text-dim);}

/* zone map */
.z2{fill:rgba(238,85,96,.10); stroke:rgba(238,85,96,.45); stroke-dasharray:6 5;}
.z1{fill:rgba(238,85,96,.28); stroke:rgba(238,85,96,.7);}
.z0{fill:#811119;}
.tank{fill:#4a5157;}
.ground{stroke:var(--line); stroke-width:2;}
.zt{fill:var(--text); font:700 16px 'Archivo', sans-serif;}
.zs{fill:var(--text-dim); font:400 12px 'IBM Plex Sans KR', sans-serif;}
.zt.light, .zs.light{fill:#fff;}

/* tables */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line);}
.g-table{width:100%; border-collapse:collapse; font-size:14px; min-width:520px;}
.g-table th{font-size:12px; font-weight:500; color:var(--text-dim); text-align:left; padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line);}
.g-table td{padding:13px 16px; border-bottom:1px solid var(--line); color:var(--text-dim); vertical-align:top;}
.g-table tr:last-child td{border-bottom:none;}
.g-table td.k{font-family:'IBM Plex Mono'; color:var(--text); white-space:nowrap;}
.g-table td.code{font-family:'IBM Plex Mono'; font-size:13px; color:var(--text);}

/* protection types */
.types{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:1000px){.types{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.types{grid-template-columns:1fr;}}
.type{background:var(--bg); padding:26px 22px; display:flex; flex-direction:column;}
.type-sym{font-family:'Archivo'; font-weight:800; font-size:34px; line-height:1; color:var(--brand); margin-bottom:16px;}
.type h3{font-family:'Archivo'; font-size:16px; margin-bottom:8px; line-height:1.4;}
.type h3 span{display:block; font-size:12px; font-weight:500; color:var(--text-dim); font-family:'IBM Plex Sans KR';}
.type p{font-size:13.5px; color:var(--text-dim); margin-bottom:16px;}
.type-zone{margin-top:auto; font-size:12px; color:var(--text); padding-top:12px; border-top:1px solid var(--line);}
.type.is-key{background:var(--panel);}

/* code decode */
.decode{background:var(--panel); border:1px solid var(--line); padding:32px; margin-bottom:28px;}
.decode-row{display:grid; grid-template-columns:repeat(7, auto); justify-content:start; gap:0;}
.tok{display:flex; flex-direction:column; padding:0 18px 0 0; margin-right:18px; border-right:1px solid var(--line);}
.tok:last-child{border-right:none; margin-right:0;}
.tok code{font-family:'IBM Plex Mono'; font-weight:600; font-size:clamp(26px,3.4vw,40px); color:var(--text); line-height:1.1; padding-bottom:12px; margin-bottom:12px; border-bottom:3px solid #4a5157;}
.tok.atex code{color:var(--steel); border-bottom-color:var(--steel);}
.tok.key code{color:var(--brand); border-bottom-color:var(--brand);}
.tok .tl{font-size:12px; font-weight:600; color:var(--text); margin-bottom:4px; white-space:nowrap;}
.tok .td{font-size:12.5px; color:var(--text-dim); line-height:1.5;}
.decode-note{margin-top:24px; font-size:13px; color:var(--text-dim);}
.decode-note .sw{margin-right:8px;}
.decode-note b{color:var(--text); font-family:'IBM Plex Mono'; font-weight:600;}
.sw{display:inline-block; width:10px; height:10px; flex-shrink:0;} .atex-sw{background:var(--steel);}
@media(max-width:900px){
  .decode{padding:24px;}
  .decode-row{grid-template-columns:repeat(2,1fr); gap:20px 16px;}
  .tok{border-right:none; margin-right:0; padding:0;}
}

.g-grid2{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:12px;}
@media(max-width:900px){.g-grid2{grid-template-columns:1fr;}}
.g-card{background:var(--panel); border:1px solid var(--line); padding:28px;}
.g-card h3{font-family:'Archivo'; font-size:18px; margin-bottom:10px;}
.g-card > p{font-size:14px; color:var(--text-dim); margin-bottom:18px;}
.g-card b{color:var(--text); font-weight:600;}
.g-card .small{font-size:13px; margin:18px 0 0;}
@media(max-width:480px){.g-card{padding:22px;}}

.ladder{display:flex; flex-direction:column; gap:6px;}
.rung{display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--line); font-size:14px;}
.rung b{font-family:'IBM Plex Mono'; font-size:16px;}
.rung span{color:var(--text);}
.rung em{font-style:normal; font-size:12px; color:var(--text-dim); white-space:nowrap;}
.rung.r1{margin-right:24%;} .rung.r2{margin-right:12%;}
.rung.r3{border-color:var(--brand);} .rung.r3 b{color:var(--brand);}
@media(max-width:480px){.rung{grid-template-columns:44px 1fr;} .rung em{grid-column:2;} .rung.r1, .rung.r2{margin-right:0;}}

.tclass{display:flex; flex-direction:column; gap:8px;}
.tclass > div{display:grid; grid-template-columns:34px 1fr 64px; gap:12px; align-items:center; font-size:13px;}
.tclass b{font-family:'IBM Plex Mono'; color:var(--text-dim);}
.tclass i{display:block; height:12px; width:var(--w); background:#4a5157;}
.tclass span{color:var(--text-dim); text-align:right; font-variant-numeric:tabular-nums;}
.tclass .on b, .tclass .on span{color:var(--text);}
.tclass .on i{background:var(--brand);}

.examples{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:900px){.examples{grid-template-columns:1fr;}}
.ex{border:1px solid var(--line); padding:22px; display:flex; flex-direction:column; gap:12px;}
.ex-head{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--text-dim);}
.ex-head a{color:var(--brand); font-weight:600; white-space:nowrap;}
.ex code{font-family:'IBM Plex Mono'; font-size:15px; color:var(--text); background:var(--panel); padding:10px 12px; border:1px solid var(--line);}
.ex p{font-size:13.5px; color:var(--text-dim);}

/* certs */
.certs{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px;}
@media(max-width:1000px){.certs{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.certs{grid-template-columns:1fr;}}
.cert{background:var(--panel); border:1px solid var(--line); padding:24px 22px;}
.cert.is-kr{border-color:var(--brand);}
.cert-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px;}
.cert h3{font-family:'Archivo'; font-size:20px; line-height:1.2;}
.cert-top span{font-size:12px; color:var(--text-dim); white-space:nowrap;}
.cert.is-kr .cert-top span{color:var(--brand);}
.cert-basis{font-size:12px; color:var(--steel); margin-bottom:12px; line-height:1.5;}
.cert p:last-child{font-size:13.5px; color:var(--text-dim);}
.compare h3{margin-bottom:16px;}
.disclaimer{margin-top:28px; font-size:13px; color:var(--text-dim);}

.g-split > *, .g-grid2 > *, .g-cols > *, .examples > *, .certs > *{min-width:0;}

/* Ex d · e · i detail */
.type-sym .exp{font-size:15px; font-weight:700; color:var(--text-dim); margin-right:6px; vertical-align:middle;}
.dei-wrap{margin-top:64px;}
.dei-wrap .g-h3{font-size:24px; margin:0 0 14px;}
.dei{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:1000px){.dei{grid-template-columns:1fr;}}
.dei > *{min-width:0;}
.dei-card{background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column;}
.dei-card figure{margin:0; padding:22px 20px 14px; border-bottom:1px solid var(--line); background:var(--bg);}
.dei-card svg{display:block; width:100%; height:auto; max-height:240px;}
.dei-body{padding:24px;}
.dei-tag{font-size:13px; color:var(--text-dim); margin-bottom:12px;}
.dei-tag b{font-family:'IBM Plex Mono'; font-size:22px; color:var(--brand); margin-right:8px; vertical-align:-2px;}
.dei-body > p{font-size:14px; color:var(--text-dim); margin-bottom:18px;}
.dei-body > p b{color:var(--text); font-weight:600;}
.dei-spec{border-top:1px solid var(--line);}
.dei-spec div{display:grid; grid-template-columns:84px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px;}
.dei-spec dt{color:var(--text-dim);}
.dei-spec dd{color:var(--text);}
.dei-extra{margin-top:20px;}

/* diagram parts */
.d-box{fill:#24292d; stroke:#8197a5; stroke-width:9;}
.burst{fill:var(--brand);}
.d-gap{fill:#14171a; stroke:#8197a5; stroke-width:2;}
.flow{fill:none; stroke-width:4; stroke-linecap:round;}
.flow.hot{stroke:var(--brand); stroke-dasharray:6 5;}
.flow.cool{stroke:#8197a5;}
.flow.small{stroke:#8197a5; stroke-width:3; stroke-dasharray:5 5;}
.arrow-cool{fill:#8197a5;}
.e-box{fill:#24292d; stroke:#8197a5; stroke-width:3;}
.term{fill:#33393e; stroke:#9aa3a9; stroke-width:1.5;}
.wire{stroke:#9aa3a9; stroke-width:3; fill:none;}
.check{fill:none; stroke:#5fbf8a; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.safe-area{fill:#1d2124;}
.haz-area{fill:rgba(238,85,96,.12);}
.border{stroke:var(--brand); stroke-width:2; stroke-dasharray:6 5;}
.barrier{fill:#811119;}
.dev{fill:#33393e; stroke:#9aa3a9; stroke-width:1.5;}
.dl{fill:var(--text); font:600 13px 'IBM Plex Sans KR', sans-serif;}
.dl.sm{font-size:12px; font-weight:500;}
.dl.xs{font-size:11px; font-weight:500; fill:#c3cacf;}
.dl.dim{fill:var(--text-dim);}
.dl.hot{fill:var(--brand);}
.dl.light{fill:#fff;}

.field.full{grid-column:1 / -1;}
.field label .opt{color:#7f888e;}
.field input::placeholder{color:#7f888e;}

/* ===================================================================
   MOTION — 번호별로 독립. 빼려면 해당 블록만 지우면 됨.
   =================================================================== */

/* [1] 모바일 메뉴: 위에서 8px 내려오며 등장(200ms), 같은 길로 퇴장(150ms) */
@media(max-width:920px){
  #site-nav{
    opacity:0; transform:translateY(-8px);
    transition:opacity .15s var(--ease-out), transform .15s var(--ease-out), display .15s allow-discrete;
  }
  #site-nav.open{
    opacity:1; transform:none;
    transition-duration:.2s;
  }
  @starting-style{
    #site-nav.open{opacity:0; transform:translateY(-8px);}
  }
}

/* [2] 누름 반응: 누르는 순간 97%로 (160ms) */
.btn-primary{transition:transform 160ms var(--ease-out), background-color .15s;}
.btn-secondary{transition:transform 160ms var(--ease-out), border-color .15s;}
#site-nav a.nav-cta{transition:transform 160ms var(--ease-out), background-color .15s, color .15s;}
.toc a{transition:transform 160ms var(--ease-out), border-color .15s, color .15s;}
.menu-btn{transition:transform 160ms var(--ease-out);}
.btn-primary:active, .btn-secondary:active, #site-nav a.nav-cta:active, .toc a:active{transform:scale(0.97);}
.menu-btn:active{transform:scale(0.94);}

/* [3] 문의 버튼 떠오름은 마우스 있는 기기에서만 (폰에서 들러붙음 방지) */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-primary:hover:active{transform:translateY(-2px) scale(0.97);}
}

/* [4] 첫 화면 등장: 제목 → 설명 → 버튼 → 인증 판넬, 60ms 간격 */
@keyframes hero-in{from{opacity:0; transform:translateY(8px);}}
.hero > *{animation:hero-in 500ms var(--ease-out) both;}
.hero > :nth-child(2){animation-delay:60ms;}
.hero > :nth-child(3){animation-delay:120ms;}
.hero > :nth-child(4){animation-delay:180ms;}

/* [5] 문의 전송 중 상태 */
button[type="submit"]{transition:transform 160ms var(--ease-out), background-color .15s, opacity .15s;}
button[type="submit"].is-sending{opacity:.6; cursor:progress; transform:none;}

/* 동작 줄이기: 끄지 않고 '이동'만 빼고 투명도 변화는 남김 */
@media (prefers-reduced-motion: reduce){
  @keyframes hero-fade{from{opacity:0;}}
  .hero > *{animation-name:hero-fade;}
  #site-nav, #site-nav.open{transform:none;}
  @starting-style{ #site-nav.open{transform:none;} }
  .btn-primary:active, .btn-secondary:active, #site-nav a.nav-cta:active, .toc a:active, .menu-btn:active,
  .btn-primary:hover, .btn-primary:hover:active{transform:none;}
}

/* ===================================================================
   MOTION 2 — [A]~[I]. 마찬가지로 번호 블록만 지우면 빠짐 (JS는 site.js 같은 번호)
   =================================================================== */

/* [A] 모바일 메뉴 항목이 0.03초 간격으로 차례 등장 */
@keyframes nav-item-in{from{opacity:0; transform:translateY(-6px);}}
@media(max-width:920px){
  #site-nav.open a{animation:nav-item-in 220ms var(--ease-out) both;}
  #site-nav.open a:nth-child(2){animation-delay:30ms;}
  #site-nav.open a:nth-child(3){animation-delay:60ms;}
  #site-nav.open a:nth-child(4){animation-delay:90ms;}
  #site-nav.open a:nth-child(5){animation-delay:120ms;}
}

/* [B] 경고 스트라이프가 페이지 진입·메뉴 열고 닫을 때 한 번 흐름 (가로 주기 39.6px × 2) */
@keyframes stripe-run{from{background-position-x:-79.2px;}}
@keyframes stripe-run-2{from{background-position-x:-79.2px;}}
.hazard-strip{animation:stripe-run 900ms var(--ease-out) 150ms both;}
header:has(#site-nav.open) .hazard-strip{animation:stripe-run-2 700ms var(--ease-out) both;}

/* [C] PC 메뉴 밑줄이 마우스를 따라 미끄러짐, 현재 페이지에 머묾 */
.nav-ink{display:none;}
@media(min-width:921px) and (hover:hover){
  #site-nav{position:relative;}
  .nav-ink{
    display:block; position:absolute; left:0; bottom:-8px; width:1px; height:2px;
    background:var(--brand); transform-origin:left; opacity:0; pointer-events:none;
    transition:transform 250ms var(--ease-out), opacity 200ms var(--ease-out);
  }
}

/* [D] "끊김 없이." 아래 신호선이 그려짐 */
h1 em{position:relative; display:inline-block;}
.signal{position:absolute; left:0; bottom:-.34em; width:100%; height:.3em; overflow:visible; pointer-events:none;}
.signal path{fill:none; stroke:var(--brand); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; animation:signal-draw 1200ms var(--ease-in-out) 650ms forwards;}
@keyframes signal-draw{to{stroke-dashoffset:0;}}

/* [E] 인증 판넬: 글자가 하나씩 찍히고, 검사등이 한 번 지나감 */
.vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.plate-value.stamp span[aria-hidden]{display:inline-block; white-space:pre; animation:stamp 280ms var(--ease-out) both;}
@keyframes stamp{from{opacity:0; transform:scale(1.7);}}
.hero .plate{position:relative; overflow:hidden;}
.hero .plate::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:22%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07) 50%, transparent);
  transform:translateX(-100%); animation:plate-scan 1300ms var(--ease-in-out) 1700ms both;
}
@keyframes plate-scan{to{transform:translateX(460%);}}

/* [F] 첫 화면 배경에 방폭 구역(Zone) 동심원이 천천히 퍼짐 */
.hero{position:relative; isolation:isolate;}
.zone-rings{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
.hero > .zone-rings{animation:none;}
.zone-rings span{
  position:absolute; right:-6%; top:-4%; width:560px; aspect-ratio:1; border-radius:50%;
  border:1px solid var(--brand); opacity:0; transform:scale(.35);
  animation:zone-pulse 9s linear infinite;
}
.zone-rings span:nth-child(2){animation-delay:3s;}
.zone-rings span:nth-child(3){animation-delay:6s;}
@keyframes zone-pulse{
  15%{opacity:.16;}
  100%{opacity:0; transform:scale(1.25);}
}
@media(max-width:760px){.zone-rings span{width:360px; right:-30%; top:-2%;}}

/* [G] 방폭 원리 그림 (Ex d · e · i): 화면에 들어오면 한 번 재생, 그림을 누르면 다시 재생 */
@keyframes fade-in{to{opacity:1;}}
@keyframes line-draw{to{stroke-dashoffset:0;}}
.dei.js-anim figure{cursor:pointer;}
.dei.js-anim svg *{transform-box:fill-box; transform-origin:center;}
/* Ex d — 내부 폭발 → 뜨거운 가스가 틈새를 지나 → 식어서 나감 */
.dei.js-anim .dei-card:nth-child(1) .burst{opacity:0; transform:scale(.2);}
.dei.js-anim .dei-card:nth-child(1) .flow.hot{opacity:0;}
.dei.js-anim .dei-card:nth-child(1) .flow.cool{stroke-dasharray:32; stroke-dashoffset:32;}
.dei.js-anim .dei-card:nth-child(1) .arrow-cool{opacity:0;}
.dei-card.play:nth-child(1) .burst{animation:burst 650ms var(--ease-out) forwards;}
.dei-card.play:nth-child(1) .flow.hot{animation:fade-in 200ms 450ms forwards, dash-run 900ms linear 450ms 2;}
.dei-card.play:nth-child(1) .flow.cool{animation:line-draw 450ms var(--ease-out) 1500ms forwards;}
.dei-card.play:nth-child(1) .arrow-cool{animation:fade-in 200ms 1850ms forwards;}
@keyframes burst{0%{opacity:0; transform:scale(.2);} 55%{opacity:1; transform:scale(1.18);} 100%{opacity:1; transform:scale(1);}}
@keyframes dash-run{to{stroke-dashoffset:-55;}}
/* Ex e — 단자를 하나씩 점검 → 체크 표시 */
.dei.js-anim .dei-card:nth-child(2) .term{opacity:.35;}
.dei.js-anim .dei-card:nth-child(2) .check{stroke-dasharray:80; stroke-dashoffset:80;}
.dei-card.play:nth-child(2) .term{animation:fade-in 250ms var(--ease-out) forwards;}
.dei-card.play:nth-child(2) .term:nth-of-type(3){animation-delay:200ms;}
.dei-card.play:nth-child(2) .term:nth-of-type(4){animation-delay:400ms;}
.dei-card.play:nth-child(2) .check{animation:line-draw 900ms var(--ease-in-out) 600ms forwards;}
/* Ex i — 배리어를 지난 작은 에너지가 느리게 흐름 */
.dei.js-anim .dei-card:nth-child(3) .flow.small{opacity:0;}
.dei.js-anim .dei-card:nth-child(3) .arrow-cool{opacity:0;}
.dei-card.play:nth-child(3) .barrier{animation:barrier-on 700ms var(--ease-out);}
.dei-card.play:nth-child(3) .flow.small{animation:fade-in 300ms 300ms forwards, dash-slow 1600ms linear 300ms 3;}
.dei-card.play:nth-child(3) .arrow-cool{animation:fade-in 300ms 500ms forwards;}
@keyframes barrier-on{40%{fill:#b0202b;}}
@keyframes dash-slow{to{stroke-dashoffset:-40;}}

/* [H] 가이드: 읽은 만큼 차는 막대 + 목차에 현재 섹션 표시 */
.read-progress{position:absolute; left:0; right:0; bottom:-3px; height:3px; background:var(--brand);
  transform:scaleX(0); transform-origin:left; pointer-events:none;}
.toc a.is-current{border-color:var(--brand); color:var(--text);}

/* [I] 제품 사진이 마우스를 따라 살짝 입체적으로 기움 (PC만, 스펙 글자는 고정) */
@media (hover:hover) and (pointer:fine){
  .model-photo{perspective:900px;}
  .model-photo img{transition:transform 500ms var(--ease-out);}
  .model-photo.tilting img{transition-duration:120ms;}
}

/* 동작 줄이기: 위치 이동·반복 움직임은 빼고 결과 상태를 바로 보여줌 */
@media (prefers-reduced-motion: reduce){
  #site-nav.open a{animation-name:fade-in; opacity:0;}
  .hazard-strip, header:has(#site-nav.open) .hazard-strip{animation:none;}
  .nav-ink{transition:opacity 200ms;}
  .signal path{animation:none; stroke-dashoffset:0;}
  .plate-value.stamp span[aria-hidden]{animation-name:fade-in; opacity:0;}
  .hero .plate::after{display:none;}
  .zone-rings span{animation:none; opacity:.08; transform:scale(.8);}
  .zone-rings span:nth-child(n+2){display:none;}
}

/* [J] 첫 화면 영상 루프 (PC만). 영상 안에 Zone 동심원이 있어 PC에선 [F] 동심원을 숨김 */
.hero-media{display:none;}
@media(min-width:901px){
  .hero-media{
    display:block; position:absolute; top:0; bottom:120px; right:-24px; width:58%;
    z-index:-1; pointer-events:none;
    -webkit-mask-image:radial-gradient(ellipse 75% 80% at 58% 70%, #000 55%, transparent 100%);
            mask-image:radial-gradient(ellipse 75% 80% at 58% 70%, #000 55%, transparent 100%);
  }
  .hero-media video{width:100%; height:100%; object-fit:cover; object-position:50% 100%; display:block;}
  .hero:has(.hero-media video[src]) .zone-rings{display:none;}
}

/* [K] "이런 현장에서" 표와 "제품 문의" 사이 오른쪽: 바다 위 시추 플랫폼 + 데릭에서 퍼지는 동심원 */
#industries{position:relative; isolation:isolate;}
.sea-band{position:absolute; right:24px; bottom:-150px; width:380px; height:320px; z-index:-1; pointer-events:none;}
.sea-band svg{position:absolute; inset:0; width:100%; height:100%; overflow:hidden; display:block;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 22%, #000 82%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 22%, #000 82%, transparent);}
.sea-band .rig-body{fill:#252b2f;}
.sea-band .rig-brace{fill:none; stroke:#2f363a; stroke-width:4; stroke-linecap:square;}
.sea-band .rig-edge{fill:none; stroke:var(--steel); stroke-opacity:.4; stroke-width:2;}
.band-sea{fill:#101316;}
.band-sealine{stroke:var(--steel); stroke-opacity:.28; stroke-width:1.5;}
.band-waves path{fill:none; stroke:var(--steel); stroke-opacity:.3; stroke-width:1.5;}
.band-waves path.dim{stroke-opacity:.15;}
.band-waves{animation:band-wave 6s linear infinite;}
@keyframes band-wave{to{transform:translateX(-80px);}}
.band-beacon{fill:var(--brand); animation:band-blink 1s steps(1, end) infinite;}
@keyframes band-blink{0%{opacity:1;} 18%{opacity:.15;}}
/* 전파 동심원: 데릭 꼭대기(894.5, 98.6)에서 퍼져 나감 (영상 속 동심원과 같은 리듬: 4초, 3개 엇갈림) */
.band-rings{position:absolute; left:45.92%; top:30.81%; width:0; height:0;}
.band-rings span{
  position:absolute; left:-230px; top:-230px; width:460px; height:460px; border-radius:50%;
  border:2px solid var(--brand); opacity:0; transform:scale(.06);
  animation:band-ring 4s linear infinite;
}
.band-rings span:nth-child(2){animation-delay:-1.333s;}
.band-rings span:nth-child(3){animation-delay:-2.667s;}
@keyframes band-ring{
  0%{opacity:0; transform:scale(.06);}
  15%{opacity:.7;}
  100%{opacity:0; transform:scale(1);}
}
@media(max-width:900px){.sea-band{display:none;}}
@media (prefers-reduced-motion: reduce){
  .band-waves, .band-beacon{animation:none;}
  .band-rings span{animation:none; opacity:.25; transform:scale(.5);}
  .band-rings span:nth-child(n+2){display:none;}
}