@font-face{
  font-family:"Geist Variable";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ============================================================
   HYUNJIN ENS — Global AI + ESS
   Design System v1.0 (2026.08)
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root{
  /* Brand — 로고 그라디언트(라임 → 그린 → 틸) 기반 */
  --yellow:    #D6C700;
  --lime:      #8CBF00;
  --green:     #0B9825;
  --green-600: #077A1E;
  --teal:      #00786A;
  --teal-700:  #00594F;

  /* Neutral */
  --ink:       #0B1412;
  --ink-800:   #16211E;
  --ink-700:   #2A3733;
  --muted:     #5F6E69;
  --muted-2:   #626E69;  /* 워시(#F6F8F6) 위에서도 4.5 를 넘도록 한 단계 진하게 */
  /* 부문 식별색 — 로고 색을 흰 배경에서 읽히는 밝기로 내린 판.
     원색(옐로 1.75:1 · 라임 2.19:1)은 글자로 쓸 수 없다. 색상은 그대로 두고
     명도만 낮춰 본문 기준 4.5:1 을 넘긴다. */
  --dom-a:     #6E6800;   /* ESS — 옐로 계열   5.76:1 */
  --dom-b:     #0A7C1F;   /* 배터리 — 그린 계열 5.36:1 */
  --dom-c:     #00786A;   /* SF — 틸 계열      5.39:1 */
  --line:      #E3E8E5;
  --line-2:    #EFF2F0;
  --surface:   #FFFFFF;
  --surface-2: #F6F8F6;
  --surface-3: #EEF2EF;

  /* 보조 — 값으로 흩어져 있던 색을 이름으로 모았다 */
  --green-700: #06611A;   /* 상태 글자 · 합격 표시 */
  --yellow-700:#5A5400;   /* 옐로 배지 글자 */
  --yellow-600:#8A8100;   /* 옐로 아이콘 */
  --teal-300:  #2FAE9C;   /* 어두운 면 위 틸 */
  --error:     #B03A31;
  --error-300: #FFC1BB;   /* 어두운 면 위 실패 안내 */
  --line-card: #D9E0DC;   /* 카드 · 패널 테두리 */
  --line-strong:#C9D2CD;  /* 표 안쪽 선 — --line 보다 한 단계 진하다 */
  --surface-1: #FBFCFB;   /* 표 행 이름 · 옅은 면 */
  --grey-300:  #B9C4BE;   /* 도식 선 · 입력 안내 글자 */
  --grey-400:  #A2B1AA;
  --grey-500:  #8A968F;
  --tray:      #2F6FA8;   /* 배터리 트레이 파랑 */
  --tray-300:  #3B7CB8;   /* 도해 속 트레이 */
  --tray-line: #5A6E7D;   /* 도해 랙 외곽선 */
  --panel-line:#7E8E9C;   /* 도해 태양광 패널 외곽선 */
  --tray-deep: #1E3A52;
  --intro-wash:#F3F5F3;   /* 사업부문 도입부 띠 왼쪽 */
  --intro-mineral:#7D928A;/* 도입부 띠 오른쪽 — 광물성 그레이그린 */
  --wash-a:    #FAF8EA;   /* ESS 부문 도입부 워시 */
  --scrim:     rgba(0,0,0,.6);   /* 사진 위 글자 바탕 */

  /* Dark surfaces */
  --dark:      #071310;
  --dark-2:    #0E1E1A;
  --dark-3:    #16302A;

  /* Type */
  /* 라틴은 Geist, 한글은 Pretendard.
     Geist 에 한글 글리프가 없어 자동으로 Pretendard 로 넘어간다. */
  --font: "Geist Variable", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue",
          "Malgun Gothic", "맑은 고딕", sans-serif;

  /* ── 타입 스케일 ────────────────────────────────────────
     11단계 고정. 새 크기를 즉석에서 만들지 말고 반드시 이 중에서 고른다.
     ※ 도식 글자도 이 눈금을 쓴다 — 2026-09-21 에 도식을 전부 HTML 로 옮겼다. */
  --fs-200:.75rem;     /* 12px  마이크로 라벨 · eyebrow · 캡션 · 폼 라벨 (최소 단계) */
  --fs-300:.8125rem;   /* 13px  보조 본문 · 표 셀 */
  --fs-400:.875rem;    /* 14px  작은 본문 · 버튼 · 링크 */
  --fs-500:1rem;       /* 16px  기본 본문 · 내비 */
  --fs-600:1.125rem;   /* 18px  리드 · 카드 제목 */
  --fs-700:1.375rem;   /* 22px  소제목 */
  --fs-h3:clamp(1.15rem,1.7vw,1.375rem);    /* 18 → 22, --fs-700 과 같은 상한 */
  --fs-h2:clamp(1.55rem,2.7vw,2.25rem);     /* 25 → 36 */
  --fs-h1:clamp(1.9rem,3.4vw,3rem);         /* 30 → 48 */

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;
  --radius-lg: 3px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);

  --header-h: 76px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-500);
  line-height:1.75;
  color:var(--ink-700);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  word-break:keep-all;
  overflow-wrap:break-word;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
table{border-collapse:collapse;width:100%;}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px;}
::selection{background:var(--lime);color:var(--ink);}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4{
  color:var(--ink);
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.02em;
}
.display{line-height:1.12;letter-spacing:-.035em;font-weight:800;}   /* 크기는 .hero h1 이 --fs-h1 로 정한다 */
.h1{font-size:var(--fs-h1);letter-spacing:-.03em;}
.h2{font-size:var(--fs-h2);letter-spacing:-.028em;}
.h3{font-size:var(--fs-h3);letter-spacing:-.02em;}
.h4{font-size:var(--fs-500);letter-spacing:-.015em;}
.lead{font-size:var(--fs-600);color:var(--muted);line-height:1.85;}
.small{font-size:var(--fs-400);}
.tiny{font-size:var(--fs-300);letter-spacing:.02em;}

/* Eyebrow / 섹션 라벨 */

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(72px,9vw,132px);}

.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px);}
.section-head .lead{margin-top:16px;}
.grid{display:grid;gap:clamp(20px,2.4vw,32px);}

.g3{grid-template-columns:repeat(3,1fr);}

/* 개수에 상관없이 자동 정렬 — 품목 추가 시 배치가 깨지지 않는다 */
.g-auto{grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));}

/* 품목 상태 배지 */
.status{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--fs-200);font-weight:700;letter-spacing:.06em;
  padding:4px 12px;border-radius:999px;line-height:1;white-space:nowrap;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.status--prep{background:var(--surface-2);color:#5A6661;}
.status--prep::before{opacity:.5;}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.split--top{align-items:start;}

.bg-2{background:var(--surface-2);}
.bg-3{background:var(--surface-3);}
.dark{background:var(--dark);color:rgba(255,255,255,.78);}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff;}
.dark .lead{color:rgba(255,255,255,.62);}
.mt-s{margin-top:16px;}
.mt-m{margin-top:32px;}
.mt-l{margin-top:48px;}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:var(--radius);
  font-size:var(--fs-400);font-weight:600;letter-spacing:-.01em;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);white-space:nowrap;
}
.btn svg{width:15px;height:15px;transition:transform .3s var(--ease);}
.btn:hover svg{transform:translateX(3px);}

.btn--accent{background:var(--dom-b);color:#fff;}
.btn--ghost{border:1px solid var(--line);color:var(--ink);background:var(--surface);}
.btn--ghost:hover{border-color:var(--ink);}
.btn--outline-light{border:1px solid rgba(255,255,255,.28);color:#fff;}
.btn--outline-light:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.55);}
.btn--lg{padding:16px 32px;font-size:var(--fs-500);}
.btn--block{width:100%;}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-400);font-weight:600;color:var(--teal);
  border-bottom:1px solid transparent;transition:.25s var(--ease);
}
.link-arrow:hover{border-bottom-color:var(--teal);gap:12px;}

/* ---------- 6. Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:900;
  display:flex;align-items:center;
  transition:background .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.header__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.header.is-solid{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);
}
.brand{display:flex;align-items:center;gap:12px;}

.nav{display:flex;align-items:center;gap:clamp(20px,2.3vw,36px);}
.nav a{
  position:relative;font-size:var(--fs-400);font-weight:500;color:rgba(255,255,255,.82);
  padding-block:8px;transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1);}
.header.is-solid .nav a{color:var(--ink-700);}
.nav a:hover{color:#fff;}
.header.is-solid .nav a:hover{color:var(--ink);}

.header__aside{display:flex;align-items:center;gap:12px;}
.lang{display:flex;align-items:center;gap:0;font-size:var(--fs-200);font-weight:600;letter-spacing:.04em;}
.lang button{padding:4px 8px;border-radius:2px;color:rgba(255,255,255,.5);transition:.25s;}
.lang button.is-on{color:#fff;}
.lang span{color:rgba(255,255,255,.28);}
.header.is-solid .lang button{color:var(--muted-2);}
.header.is-solid .lang button.is-on{color:var(--ink);}
.header.is-solid .lang span{color:var(--line);}
.header .btn--accent{padding:12px 20px;font-size:var(--fs-400);}

.burger{display:none;width:44px;height:44px;position:relative;}
.burger i{
  position:absolute;left:11px;width:22px;height:1.6px;background:#fff;
  transition:.3s var(--ease);
}
.burger i:nth-child(1){top:17px;}
.burger i:nth-child(2){top:24px;}
.header.is-solid .burger i{background:var(--ink);}
body.nav-open .burger i{background:var(--ink);}
body.nav-open .burger i:nth-child(1){top:21px;transform:rotate(45deg);}
body.nav-open .burger i:nth-child(2){top:21px;transform:rotate(-45deg);}

/* Mobile drawer */
.drawer{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:880;
  background:var(--surface);padding:32px var(--gutter) 48px;
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:.3s var(--ease);overflow-y:auto;
}
body.nav-open .drawer{transform:none;opacity:1;pointer-events:auto;}
body.nav-open{overflow:hidden;}
.drawer a{display:block;padding:16px 0;font-size:var(--fs-600);font-weight:700;color:var(--ink);border-bottom:1px solid var(--line-2);}
.drawer .btn{margin-top:24px;}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--dark);color:#fff;overflow:hidden;
  padding-top:calc(var(--header-h) + 40px);
}
.hero__bg{position:absolute;inset:0;z-index:0;}

.hero__inner{position:relative;z-index:2;width:100%;}

.hero h1{color:#fff;margin-bottom:24px;}

.hero .lead{max-width:640px;color:rgba(255,255,255,.66);}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;}

/* Hero KPI strip */

/* ---------- 8. Cards ---------- */
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(28px,2.6vw,36px);
  transition:.45s var(--ease);overflow:hidden;height:100%;
  display:flex;flex-direction:column;
}
.card::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.card__icon{
  width:46px;height:46px;margin-bottom:20px;display:grid;place-items:center;
  border-radius:var(--radius);background:var(--surface-2);color:var(--teal);
}
.card__icon svg{width:22px;height:22px;}
.card h3{margin-bottom:12px;}
.card p{font-size:var(--fs-400);color:var(--muted);line-height:1.8;}
.card__foot{margin-top:auto;padding-top:20px;}
.card__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.tag{
  font-size:var(--fs-200);font-weight:500;padding:4px 12px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line-2);
}
.card.dark-card{background:var(--dark-2);border-color:rgba(255,255,255,.09);}
.card.dark-card h3{color:#fff;}
.card.dark-card p{color:rgba(255,255,255,.6);}
.card.dark-card .card__icon{background:rgba(255,255,255,.06);color:var(--lime);}
.card.dark-card .tag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.7);}

/* Feature list */
.flist{display:grid;gap:0;}
.flist li{
  display:block;
  padding:16px 0;border-bottom:1px solid var(--line-2);
}
.flist li:last-child{border-bottom:0;}
.flist .ic{
  width:22px;height:22px;flex:none;margin-top:4px;display:grid;place-items:center;
  border-radius:50%;background:var(--teal);color:#fff;
}
.flist .ic svg{width:11px;height:11px;}
.flist h4{margin-bottom:4px;}
.flist p{font-size:var(--fs-400);color:var(--muted);line-height:1.72;}
.dark .flist li{border-bottom-color:rgba(255,255,255,.09);}
.dark .flist p{color:rgba(255,255,255,.58);}

/* ---------- 9. Media ---------- */
.media{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);
}
.media img{width:100%;}
.media--pad{padding:clamp(16px,2.2vw,28px);background:var(--surface);}
figcaption{font-size:var(--fs-300);color:var(--muted-2);margin-top:12px;letter-spacing:.01em;}

/* ---------- 10. Tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:clamp(36px,4vw,52px);}
.tabs button{
  padding:12px 20px;font-size:var(--fs-500);font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.25s var(--ease);
  letter-spacing:-.01em;
}
.tabs button:hover{color:var(--ink);}
.tabs button.is-on{color:var(--ink);border-bottom-color:var(--teal);}
.panel{display:none;}
.panel.is-on{display:block;animation:fade .45s var(--ease);}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---------- 11. Spec table ---------- */
.spec{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);}
.spec caption{
  text-align:left;padding:16px 20px;background:var(--surface-2);
  font-weight:700;color:var(--ink);font-size:var(--fs-500);border-bottom:1px solid var(--line);
}
.spec th,.spec td{padding:12px 20px;font-size:var(--fs-400);text-align:left;border-bottom:1px solid var(--line-2);}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0;}
.spec th{width:46%;color:var(--muted);font-weight:500;background:var(--surface-1);}
.spec td{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Comparison table */
.ctable{min-width:660px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);}
.ctable th,.ctable td{padding:16px 20px;font-size:var(--fs-400);border-bottom:1px solid var(--line-2);text-align:left;}
.ctable thead th{background:var(--surface);color:var(--ink);font-weight:600;border-bottom:2px solid var(--ink);}
.ctable tbody th{font-weight:500;color:var(--muted);background:var(--surface-1);}
.ctable td{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}
.ctable .hl{background:rgba(11,152,37,.06);}

/* ---------- 12. Timeline ---------- */
.timeline{position:relative;padding-left:24px;}
.timeline::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:var(--line);
}
.timeline li{position:relative;padding-bottom:32px;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{
  content:"";position:absolute;left:-26px;top:9px;width:11px;height:11px;border-radius:50%;
  background:var(--surface);border:2px solid var(--teal);
}
.timeline .yr{
  font-size:var(--fs-500);font-weight:800;color:var(--teal);letter-spacing:.02em;margin-bottom:4px;display:block;
}
.timeline p{font-size:var(--fs-400);color:var(--muted);line-height:1.8;}
.timeline strong{color:var(--ink);font-weight:600;}
.dark .timeline li::before{background:var(--dark);border-color:var(--lime);}
.dark .timeline .yr{color:var(--lime);}
.dark .timeline p{color:rgba(255,255,255,.6);}
.dark .timeline strong{color:#fff;}

/* ---------- 13. Metrics ---------- */

/* ---------- 14. Certifications ---------- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:clamp(16px,1.8vw,24px);}
.cert{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px;transition:.3s var(--ease);
}
.cert img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--surface-2);border-radius:2px;}
.cert figcaption{font-size:var(--fs-300);font-weight:600;color:var(--ink);margin-top:12px;line-height:1.5;}
.cert .tiny{color:var(--muted-2);font-weight:400;display:block;margin-top:4px;}

/* ---------- 15. Contact ---------- */
.contact-shell{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(32px,4.5vw,72px);align-items:start;}
.contact-info li{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.contact-info .k{font-size:var(--fs-200);letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:8px;}
.contact-info .v{font-size:var(--fs-500);color:#fff;font-weight:500;line-height:1.65;}
.contact-info .v span{display:block;font-size:var(--fs-400);color:rgba(255,255,255,.5);font-weight:400;margin-top:4px;}

.form{
  background:var(--surface);border-radius:var(--radius-lg);
  padding:clamp(28px,3.2vw,44px);border:1px solid var(--line);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:8px;}

.field label{font-size:var(--fs-300);font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.field label .req{color:var(--error);margin-left:3px;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);font-size:var(--fs-400);color:var(--ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--grey-300);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,120,106,.12);
}
.field textarea{resize:vertical;min-height:130px;line-height:1.7;}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235F6E69' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px;
}

/* 문의 유형 선택 (radio chips) */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{position:relative;}
.chip input{position:absolute;opacity:0;width:0;height:0;}
.chip span{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border:1px solid var(--line);border-radius:999px;
  font-size:var(--fs-400);font-weight:500;color:var(--muted);cursor:pointer;
  transition:.25s var(--ease);user-select:none;background:var(--surface);
}
.chip span::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--line);transition:.25s var(--ease);flex:none;
}
.chip input:checked + span{
  border-color:var(--teal);color:var(--teal-700);background:rgba(0,120,106,.06);font-weight:600;
}
.chip input:checked + span::before{background:var(--teal);box-shadow:0 0 0 3px rgba(0,120,106,.18);}
.chip input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px;}

.consent{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px;background:var(--surface-2);border-radius:var(--radius);
  font-size:var(--fs-300);color:var(--muted);line-height:1.65;
}
.consent input{width:17px;height:17px;flex:none;margin-top:0;accent-color:var(--teal);cursor:pointer;}
.consent a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;}

.form-note{font-size:var(--fs-300);color:var(--muted-2);margin-top:12px;text-align:center;}
.form-status{
  display:none;margin-top:16px;padding:12px 16px;border-radius:var(--radius);font-size:var(--fs-400);font-weight:500;
}
.form-status.ok{display:block;background:rgba(11,152,37,.10);color:var(--green-600);border:1px solid rgba(11,152,37,.28);}
.form-status.err{display:block;background:rgba(176,58,49,.08);color:var(--error);border:1px solid rgba(176,58,49,.25);}

/* ---------- 16. CTA band ---------- */

/* ---------- 17. Footer ---------- */
.footer{background:var(--dark);color:rgba(255,255,255,.55);padding-top:clamp(56px,6vw,84px);}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;}

.footer__desc{font-size:var(--fs-400);line-height:1.85;margin-top:20px;max-width:340px;color:rgba(255,255,255,.5);}
.footer h4,.footer .footer__h{font-size:var(--fs-200);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:20px;}
.footer li{margin-bottom:0;}
.footer li a{font-size:var(--fs-400);color:rgba(255,255,255,.52);transition:color .25s;}
.footer li a:hover{color:var(--lime);}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.09);padding-top:28px;padding-bottom:36px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:var(--fs-300);color:rgba(255,255,255,.38);
}
.footer__bottom .biz{display:flex;flex-wrap:wrap;gap:4px 16px;}

/* ---------- 18. Reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
[data-reveal].is-in{opacity:1;transform:none;}
[data-reveal-delay="1"]{transition-delay:.25s;}
[data-reveal-delay="2"]{transition-delay:.25s;}
[data-reveal-delay="3"]{transition-delay:.25s;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  [data-reveal]{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* ---------- 19. i18n ---------- */
/* 폐기 — 초기 마크업 이중언어 방식(data-ko/data-en) 잔재.
   현재는 data-i18n + JS 사전 방식이며, main.js 가 원문 백업용으로
   data-ko 를 붙이므로 이 규칙이 번역된 요소를 전부 숨겨버렸음. */

/* ---------- 20. Responsive ---------- */
@media (max-width:1080px){
  .footer__top{grid-template-columns:1fr 1fr;gap:32px;}
  .contact-shell{grid-template-columns:1fr;}
}
@media (max-width:900px){
  :root{--header-h:64px;}
  .nav,.header .btn--accent{display:none;}
  .burger{display:block;}
  .split{grid-template-columns:1fr;gap:32px;}
  .g3{grid-template-columns:repeat(2,1fr);}
  
  
  
}
@media (max-width:640px){
  .g3{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .footer__top{grid-template-columns:1fr;gap:32px;}
  /* 푸터에서 손으로 실제 누르는 것은 전화와 메일이다. 32px 로는 옆 줄이 눌린다.
     사이트맵 링크는 드로어 메뉴에 같은 것이 있어 그대로 둔다 —
     13줄을 모두 키우면 푸터만 156px 늘어난다 */
  .footer__top a[href^="tel:"],
  .footer__top a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px;}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tabs button{padding:12px 16px;font-size:var(--fs-400);white-space:nowrap;}
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 72px);}
}

/* ---------- 21. Print ---------- */
@media print{
  .header,.drawer,.hero__bg,.form{display:none!important;}
  body{color:#000;}
}

/* 도식은 2026-09-21 에 전부 HTML 로 옮겼다 — .chain(공급 구조) · .fl(흐름 3 · 4칸) · .stp(시험 단계) · .lad(용량 단계).
   고정폭 800px SVG 는 좁은 화면에서 옆으로 밀어야 했고, 글자 크기도 화면마다 달라졌다. */

/* ═══════════════════════════════════════════════════════════
   DESIGN REFINEMENT — 산업·엔지니어링 에디토리얼
   기조 : 정밀한 계측 도면의 질서. 장식이 아니라 구조로 말한다.
   ═══════════════════════════════════════════════════════════ */

/* ---------- R1. 수치 조판 ---------- */
table,.spec,time{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* 국문 가독 — 자간을 과하게 좁히지 않는다 */
:lang(ko) .display{letter-spacing:-.028em;}
.display{font-weight:800;line-height:1.1;}
.lead{color:var(--muted);}

/* ---------- R2. 섹션 라벨 ----------
   이브로우에는 이미 사이트 차원의 인덱스(01 — About …)가 들어 있다.
   CSS 카운터를 더하면 번호가 겹치므로 쓰지 않는다. 선을 뒤로 옮겨 정리만 한다. */

/* ---------- R3. 히어로 — 배경 재구성 ---------- */
.hero{align-items:center;padding-block:calc(var(--header-h) + 56px) 0;}

/* 계측 라벨식 뱃지 — 펄스 제거 */

/* 그라디언트 글자 제거 — 단색 강조.
   국문은 받침 때문에 밑선을 두면 오류처럼 보인다. 색으로만 구분한다. */

/* 2단 구성에 맞춘 제목 크기 재조정 */
.hero h1{
  font-size:var(--fs-h1);
  letter-spacing:-.032em;line-height:1.16;
  text-wrap:balance;margin-bottom:24px;
}
.hero .lead{max-width:none;font-size:var(--fs-500);line-height:1.8;}
.hero__cta{margin-top:32px;}

/* ---------- R4. 히어로 레이아웃 + 도해 ---------- */
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4.5vw,80px);align-items:center;
}
.hero__lead{max-width:none;padding-bottom:0;}

/* KPI — 계측 눈금 느낌 */

/* ---------- R5. 카드 — 코너 레지스트레이션 ---------- */
.card{border-radius:var(--radius-lg);transition:border-color .45s var(--ease),background .45s var(--ease);}
.card::after{
  content:"";position:absolute;left:-1px;top:-1px;
  width:52px;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.card::before{
  content:"";position:absolute;left:-1px;top:-1px;
  width:2px;height:52px;background:var(--green);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);z-index:1;
}
.card:has(a):hover{border-color:var(--ink-700);}
.card:has(a):hover::after{transform:scaleX(1);}
.card:has(a):hover::before{transform:scaleY(1);}

/* ---------- R6. 버튼 — 부양·발광 제거 ---------- */
.btn{border-radius:var(--radius);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);}
.btn--accent{background:var(--dom-b);}
.btn--accent:hover{background:var(--green-700);filter:none;transform:none;box-shadow:none;}
.btn.btn--accent:hover,.header .btn.btn--accent:hover,body .nav a.btn--accent:hover{color:#fff;}

.btn:hover svg{transform:translateX(4px);}

/* ---------- R7. 헤더 ---------- */
.header.is-solid{background:rgba(255,255,255,.92);border-bottom-color:var(--line);}

.nav a::after{background:var(--green);height:1px;}

/* ---------- R8. 표 — 데이터시트 조판 ----------
   주의 : 단위 표기(kWh, mAh)가 있으므로 text-transform 을 쓰지 않는다. */
table{font-variant-numeric:tabular-nums;}
.ctable{border-radius:var(--radius-lg);}
.ctable thead th{font-size:var(--fs-300);font-weight:700;letter-spacing:.02em;}
/* .hl 이 thead th 보다 특정도가 높아 헤더 배경을 덮던 문제 — 강조 열은 헤더도 강조색으로 */

.ctable .hl{background:rgba(11,152,37,.05);}
.ctable tbody th{letter-spacing:-.005em;}
.spec th{font-weight:500;letter-spacing:-.005em;}

/* ---------- R9. 도해 — 실측값 반영 ---------- */

/* ---------- R10. 상태 배지 ---------- */
.status{border-radius:2px;letter-spacing:.07em;padding:4px 8px;}
.status::before{border-radius:0;width:5px;height:5px;}
.status--on{background:rgba(11,152,37,.10);color:var(--green-700);}
.status--soon{background:rgba(214,199,0,.16);color:var(--yellow-700);}

/* ---------- R11. 선택·포커스 ---------- */
::selection{background:var(--lime);color:var(--ink);}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:0;}

/* ---------- R12. 반응 ---------- */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:40px;}
  
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;}
}

/* ═══════════════════════════════════════════════════════════
   HERO 재기획 — 계통 단선도 + 3부문 스트립
   추상 도형은 회사가 무엇을 하는지 말해주지 않는다. 실물을 그린다.
   ═══════════════════════════════════════════════════════════ */

/* 3개 사업 부문 — 히어로 하단 */

.dm{
  position:relative;display:flex;flex-direction:column;gap:4px;justify-content:flex-end;
  min-height:clamp(230px,24vw,310px);padding:24px 28px 28px;
  border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
  background-size:cover;background-position:center;
  transition:transform .3s var(--ease);
}
/* 하단 그라데이션 — 사진 위 글자 가독 */
.dm::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(3,8,7,.92) 0%,rgba(3,8,7,.52) 42%,rgba(3,8,7,.10) 74%,rgba(3,8,7,.14) 100%);
  transition:background .3s var(--ease);
}
.dm--a{background-image:url("/assets/img/dom-ess-rack-dark.webp");background-position:center top;}
.dm--b{background-image:url("/assets/img/dom-battery.webp");}
.dm--c{background-image:url("/assets/img/sf-line-hyunjinjeup.webp");}
.dm:hover::before{background:linear-gradient(0deg,rgba(3,8,7,.88) 0%,rgba(3,8,7,.42) 42%,rgba(3,8,7,.04) 74%,rgba(3,8,7,.08) 100%);}

.dm__t{font-size:var(--fs-600);font-weight:700;color:#fff;letter-spacing:-.02em;margin-top:8px;}
.dm__d{font-size:var(--fs-300);color:rgba(255,255,255,.72);line-height:1.6;}

.nav{gap:clamp(20px,2.5vw,40px);}
.nav a{font-size:var(--fs-500);font-weight:500;}
.header .btn--accent{padding:12px 24px;font-size:var(--fs-400);}
.lang{font-size:var(--fs-400);}

@media (max-width:980px){
  .dm{min-height:200px;padding:20px 24px 24px;}
}

/* ═══════════════════════════════════════════════════════════
   HERO — 전면 몰입 (B안 · 2026-08-25 결재 채택)
   이미지를 화면 전체에 깔고 문구를 아래쪽에 올린다.
   ═══════════════════════════════════════════════════════════ */
.hero--full{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--dark);overflow:hidden;
}
.hero--full .hero__bg{position:absolute;inset:0;z-index:0;}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:100% 40%;
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(3,8,7,.96) 4%,rgba(3,8,7,.62) 38%,rgba(3,8,7,.10) 66%),
    linear-gradient(90deg,rgba(3,8,7,.72) 0%,rgba(3,8,7,.10) 52%,rgba(3,8,7,0) 78%),
    linear-gradient(180deg,rgba(3,8,7,.78) 0%,rgba(3,8,7,0) 20%);
}
.hero--full .hero__inner{
  position:relative;z-index:2;width:100%;display:block;
  padding-bottom:clamp(28px,3.4vw,44px);
}
.hero--full .hero__lead{max-width:none;}
.hero--full h1{
  font-size:var(--fs-h1);
  line-height:1.3;letter-spacing:-.03em;margin-bottom:20px;
  max-width:19ch;text-shadow:0 2px 30px rgba(0,0,0,.6);
}
.hero--full .lead{
  max-width:540px;color:rgba(255,255,255,.74);
  font-size:var(--fs-500);line-height:1.8;
  text-shadow:0 1px 18px rgba(0,0,0,.7);
}
.hero--full .hero__cta{margin-top:32px;}

/* ── 3개 사업 부문 ── */
.domains{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(40px,4.4vw,60px);
}
.domains .dm{padding-block:24px 28px;min-height:clamp(230px,24vw,310px);}
.domains .dm__t{font-size:var(--fs-500);}

@media (max-width:900px){
  .hero__scrim{background:
    linear-gradient(0deg,rgba(3,8,7,.97) 8%,rgba(3,8,7,.72) 46%,rgba(3,8,7,.22) 78%),
    linear-gradient(180deg,rgba(3,8,7,.82) 0%,rgba(3,8,7,0) 22%);}
  .hero__img{object-position:62% 40%;}
  .domains{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════
   밝은 배경으로 시작하는 페이지는 헤더를 처음부터 불투명하게.
   투명 헤더의 흰 글자가 흰 배경 위에 놓여 보이지 않던 문제.
   ═══════════════════════════════════════════════════════════ */
body.hd-solid .header{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);
}

body.hd-solid .nav a{color:var(--ink-700);}
body.hd-solid .nav a:hover{color:var(--ink);}
body.hd-solid .lang button{color:var(--muted-2);}
body.hd-solid .lang button.is-on{color:var(--ink);}
body.hd-solid .lang span{color:var(--line);}
body.hd-solid .burger i{background:var(--ink);}

/* ── 취득 진행 중 인증 — 인증서 사진 자리를 대체 ── */
/* 특허 — 번호는 고정폭 숫자로 줄바꿈 없이, 명칭 열은 줄바꿈 허용 */
.pat__num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--ink);}
.ctable--pat td:nth-child(2){min-width:16em;}
.cert figcaption .pat__num{display:block;}
.cert--soon{border-style:dashed;}
.cert__soon{
  width:100%;aspect-ratio:3/4;border-radius:2px;
  background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface-3) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:16px;
}
.cert__badge{
  font-size:var(--fs-200);font-weight:800;letter-spacing:.1em;line-height:1;
  color:var(--yellow-700);background:rgba(214,199,0,.20);
  padding:4px 12px;border-radius:2px;
}
.cert__code{
  font-size:var(--fs-700);font-weight:800;letter-spacing:-.02em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.cert__code b{color:var(--ink);margin-left:2px;}
.cert__note{font-size:var(--fs-200);line-height:1.5;color:var(--muted-2);}

/* ── 문의 폼 대체 안내 패널 (발송 설정 완료 시 제거) ── */
.contact-cta{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  padding:clamp(28px,3.4vw,44px);
  align-self:start;
}
.contact-cta .lead{color:rgba(255,255,255,.66);font-size:var(--fs-500);}
.cta-rows{display:flex;flex-direction:column;gap:12px;margin-top:32px;}
.cta-row{
  display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;
  gap:0 12px;align-items:baseline;
  padding:16px 20px;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);transition:.3s var(--ease);
}
.cta-row:hover{background:rgba(255,255,255,.06);border-color:var(--lime);}
.cta-row__k{
  grid-row:1/3;font-size:var(--fs-200);font-weight:800;letter-spacing:.14em;
  color:var(--lime);align-self:center;
}
.cta-row__v{font-size:var(--fs-500);font-weight:700;color:#fff;letter-spacing:-.01em;}
.cta-row__s{font-size:var(--fs-200);color:rgba(255,255,255,.45);}
@media (max-width:640px){
  .cta-row{grid-template-columns:1fr;gap:4px;}
  .cta-row__k{grid-row:auto;}
}

/* ═══════════════════════════════════════════════════════════
   UX 개선 — 키보드 접근성 · 클릭 영역 · 링크 명확성
   근거: 접근성은 부가 기능이 아니라 좋은 UI 의 일부
   ═══════════════════════════════════════════════════════════ */

/* 포커스가 어두운 면에서도 보이도록 이중 링 */
:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,255,255,.55);
  border-radius:2px;
}
.dark :focus-visible,.hero :focus-visible,.footer :focus-visible{
  outline-color:var(--lime);
  box-shadow:0 0 0 4px rgba(0,0,0,.55);
}

/* 건너뛰기 링크 — 키보드 사용자가 반복 메뉴를 우회 */
.skip{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--ink);color:#fff;padding:12px 20px;
  font-size:var(--fs-400);font-weight:600;border-radius:0 0 2px 0;
}
.skip:focus{left:0;}

/* 터치 목표 최소 크기 — 작은 링크도 손가락으로 누를 수 있게 */
.nav a,.lang button,.footer a,.link-arrow{
  min-height:44px;display:inline-flex;align-items:center;
}
.dm{min-height:44px;}

/* 외부 이동 링크는 형태로도 구분 (색에만 의존하지 않기) */
.link-arrow{text-decoration-thickness:1px;text-underline-offset:3px;}
.link-arrow:focus-visible{text-decoration:underline;}

/* ═══════════════════════════════════════════════════════════
   브랜드 로고 — 조합형(마크 + 사명)
   배경 밝기에 따라 흰 글자 / 짙은 글자 판을 바꿔 끼운다.
   ═══════════════════════════════════════════════════════════ */
.brand{display:flex;align-items:center;gap:0;}
.brand__lockup{display:block;line-height:0;}
.brand__lockup img{
  height:40px;width:auto;display:block;
  transition:opacity .3s var(--ease);
}
/* 배경 밝기 x 언어 = 4조합.
   마크업의 srcset 은 [국문 x 어두운 면] 기본판만 담당하고,
   나머지 3조합은 content:image-set() 으로 갈아끼운다(2x 포함).
   image-set 미지원 브라우저는 앞줄 url() 로 폴백된다. */
.header.is-solid .brand__lockup img,
body.hd-solid .header .brand__lockup img{
  content:url("/assets/img/logo-lockup-dark.png");
  content:image-set(url("/assets/img/logo-lockup-dark.png") 1x,
                    url("/assets/img/logo-lockup-dark@2x.png") 2x);
}
html[lang="en"] .brand__lockup img{
  content:url("/assets/img/logo-lockup-light-en.png");
  content:image-set(url("/assets/img/logo-lockup-light-en.png") 1x,
                    url("/assets/img/logo-lockup-light-en@2x.png") 2x);
}
html[lang="en"] .header.is-solid .brand__lockup img,
html[lang="en"] body.hd-solid .header .brand__lockup img{
  content:url("/assets/img/logo-lockup-dark-en.png");
  content:image-set(url("/assets/img/logo-lockup-dark-en.png") 1x,
                    url("/assets/img/logo-lockup-dark-en@2x.png") 2x);
}
/* 푸터는 항상 어두운 면 — 흰 글자 판 강제 */
.footer .brand__lockup img{
  content:url("/assets/img/logo-lockup-light.png") !important;
  content:image-set(url("/assets/img/logo-lockup-light.png") 1x,
                    url("/assets/img/logo-lockup-light@2x.png") 2x) !important;
}
html[lang="en"] .footer .brand__lockup img{
  content:url("/assets/img/logo-lockup-light-en.png") !important;
  content:image-set(url("/assets/img/logo-lockup-light-en.png") 1x,
                    url("/assets/img/logo-lockup-light-en@2x.png") 2x) !important;
}

@media (max-width:640px){
  .brand__lockup img{height:34px;}
}

/* 사양표는 자릿수를 맞춘다 — 숫자 폭이 고정되어 열이 흔들리지 않는다 */
.spec td,.ctable td{font-variant-numeric:tabular-nums;}

/* ═══════════════════════════════════════════════════════════
   위계 사다리 — 크기 하나에 기대지 않는다

   기존에는 h1~h4 가 전부 같은 색(--ink) · 같은 굵기(700) 였고
   차이가 크기뿐이라, 페이지 제목과 절 제목이 형제처럼 보였다.
   굵기 · 명도 · 표식을 함께 움직여 단계를 '재지 않고 느끼도록' 한다.

     단계          크기      굵기   색          표식
     display      35~66     800    ink        —
     h1 페이지     30~48     800    ink        eyebrow 와 한 덩어리
     h2 절        25~36     700    ink        앞에 브랜드 악센트 바
     h3 소절      18~22     700    ink-800    —
     h4 항목      16        600    ink-700    —
     본문         16        400    ink-700
     리드         18        400    muted

   ※ 어두운 배경은 `.dark h1~h4{color:#fff}` 가 특이도상 우선하므로
     아래 색 지정에 영향받지 않는다.
   ═══════════════════════════════════════════════════════════ */
.h1{font-weight:800;letter-spacing:-.035em;}
.h2{font-weight:700;}
.h3{font-weight:700;color:var(--ink-800);}
.h4{font-weight:600;color:var(--ink-700);}

/* 절 제목 앞 악센트 — eyebrow 의 그라데이션 선과 같은 언어로
   '여기서 새 절이 시작한다' 를 즉시 알린다 */
.h2{position:relative;}

/* 페이지 머리(eyebrow + h1 + 리드)를 하나의 덩어리로 닫는다.
   아래로 이어지는 것이 '내용' 임을 경계선으로 분명히 한다. */
.section-head{
  padding-bottom:clamp(28px,3vw,36px);
  border-bottom:1px solid var(--line);
}
.dark .section-head{border-bottom-color:rgba(255,255,255,.14);}

/* 경계선은 아래 내용의 폭에 맞춘다.
   글은 760px 로 묶되 덩어리(=선)는 본문 단 전체를 가로지르게 한다 —
   760px 에서 끊기면 오른쪽 칼럼 중간에 걸려 어중간해 보인다. */
.section-head{max-width:none;}
.section-head>*{max-width:760px;}

/* 리드는 제목에 매인 문장이므로 행 길이를 줄여
   제목-리드가 한 덩어리로 읽히게 한다 (영문 기준 70자 안팎) */
.section-head .lead{max-width:620px;}

/* 표식은 한 번만 — eyebrow 가 이미 '절의 시작' 을 알린 자리에서는
   악센트 바를 생략한다. 두 표식이 겹치면 오히려 위계가 흐려진다. */

/* 그리드 칸은 기본이 min-width:auto 라, 끊기지 않는 긴 문자열(메일 주소 등)이
   칸을 밀어내 좁은 화면에서 가로로 넘친다. 최소폭을 풀고 줄바꿈을 허용한다. */
.contact-shell>*{min-width:0;}
.contact-info .v,.contact-info .v span{overflow-wrap:anywhere;}

/* ═══════════════════════════════════════════════════════════
   범위 목록 — '하는 것' 과 '하지 않는 것' 을 나란히 놓는다.
   하지 않는 것을 밝히는 편이 신뢰를 만든다. 다만 같은 무게로
   보이면 안 되므로, 표식과 명도로 둘을 갈라 놓는다.
   ═══════════════════════════════════════════════════════════ */
.dlist{display:grid;gap:0;}
.dlist li{
  position:relative;padding:12px 0 12px 24px;
  font-size:var(--fs-400);color:var(--ink-700);line-height:1.65;
  border-bottom:1px solid var(--line-2);
}
.dlist li:last-child{border-bottom:0;}
.dlist li::before{
  content:"";position:absolute;left:0;top:22px;
  width:11px;height:2px;border-radius:2px;background:var(--green);
}
/* 하지 않는 범위 — 표식을 열린 선으로 바꾸고 한 단계 옅게 */
.dlist--out li{color:var(--muted);}
.dlist--out li::before{background:none;border-top:2px dashed var(--muted-2);opacity:.65;}

.dark .dlist li{color:rgba(255,255,255,.78);border-bottom-color:rgba(255,255,255,.1);}
.dark .dlist li::before{background:var(--lime);}
.dark .dlist--out li{color:rgba(255,255,255,.5);}
.dark .dlist--out li::before{background:none;border-top-color:rgba(255,255,255,.35);}

/* ═══════════════════════════════════════════════════════════
   헤더 — 순백 바를 걷어내고 유리질 표면으로

   기존에는 밝은 페이지에서 rgba(255,255,255,.92) 가 항상 떠 있어
   흰 판때기로 보였다. 두 가지를 바꾼다.
     1) 맨 위에서는 바를 두지 않는다. 스크롤해야 올라온다
     2) 색을 순백에서 살짝 비켜 놓는다. 브랜드 쪽으로 아주 옅게 기운
        중성색이라, 흰 배경 위에서도 '판' 이 아니라 '면' 으로 읽힌다
   ═══════════════════════════════════════════════════════════ */
.header.is-solid,
body.hd-solid .header.is-solid{
  background:rgba(250,252,251,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(11,20,18,.07);
  box-shadow:0 10px 30px -26px rgba(11,20,18,.5);
}
/* 맨 위 — 바 없음 */
body.hd-solid .header{
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:transparent;box-shadow:none;
}
/* 유리 효과를 못 쓰는 브라우저는 불투명하게 — 글자가 배경에 묻히면 안 된다 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header.is-solid,body.hd-solid .header.is-solid{background:rgba(250,252,251,.97);}
}

/* ═══════════════════════════════════════════════════════════
   카드 키워드 — 알약을 옆으로 흘리지 않고 세로로 세운다

   기존에는 flex-wrap 이라 카드마다 2줄 · 3줄 · 1줄로 제각각 접혔다.
   개수가 같아도 글자 길이가 달라 줄 수가 달라지니 나란히 놓으면 어긋난다.
   한 줄에 하나씩 세우면 개수가 곧 줄 수가 되어 카드끼리 맞는다.

   시작 높이도 맞춘다 — 본문 길이가 달라도 margin-top:auto 로
   키워드 블록을 아래에 붙여 세 카드의 기준선을 같게 한다.
   ═══════════════════════════════════════════════════════════ */
.card__tags{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  margin-top:auto;padding-top:20px;
}
.card__tags .tag{
  background:none;border:0;border-radius:0;
  padding:8px 0 8px 16px;position:relative;
  font-size:var(--fs-300);font-weight:500;color:var(--muted);
  letter-spacing:.005em;
}
.card__tags .tag::before{
  content:"";position:absolute;left:0;top:calc(50% - .5px);
  width:8px;height:1px;background:var(--line);
}
/* auto 여백이 둘이면 남는 공간이 갈라진다 — 푸터는 키워드 바로 뒤에 붙인다 */
.card__tags + .card__foot{margin-top:0;}
.dark-card .card__tags .tag{color:rgba(255,255,255,.55);}
.dark-card .card__tags .tag::before{background:rgba(255,255,255,.2);}

/* ═══════════════════════════════════════════════════════════
   카드 이득 라벨 — 부문 번호 위에 '무엇이 좋아지는가' 를 먼저 둔다

   리드에서 세 가지를 한 문장에 묶으려니 마무리가 계속 어색했다.
   각 카드가 자기 이득을 직접 말하게 하면 묶을 이유 자체가 없어진다.
   읽는 순서도 자연스럽다 — 무엇이 좋아지는지 먼저, 어느 부문인지 다음.
   ═══════════════════════════════════════════════════════════ */
.card__benefit{
  /* 카드에서 가장 먼저 읽혀야 할 줄. 이득이 부문명보다 앞선다.
     18px 로만 올리면 부문명(22px)과 비슷해져 둘이 경쟁하므로,
     이득을 제목 크기로 올리고 부문명을 한 단계 내려 위계를 분명히 한다. */
  font-size:var(--fs-h3);font-weight:800;color:var(--ink);
  letter-spacing:-.028em;line-height:1.3;margin-bottom:8px;
}
/* 이득 라벨이 있는 카드에 한해 부문명을 한 단계 낮춘다 */
.card__benefit ~ .h3{
  font-size:var(--fs-600);font-weight:700;color:var(--ink-800);letter-spacing:-.015em;
}
.card.dark-card .card__benefit,
.dark .card__benefit{color:#fff;}

/* ═══════════════════════════════════════════════════════════
   부분 채색 — 새 색을 만들지 않고 이미 쓰는 체계를 넓힌다

   히어로는 이미 부문마다 다른 색을 쓴다(ESS 옐로 · BATTERY 그린 · FACTORY 틸).
   같은 배정을 카드까지 가져오면 페이지가 다채로워지면서도
   '왜 이 색인가' 에 답이 있다. 색을 장식으로 뿌리지 않는다.

   면은 옅게(6~8%), 선과 아이콘만 진하게. 흰 바탕을 살리는 선에서 멈춘다.
   ═══════════════════════════════════════════════════════════ */
.card--a .card__icon{background:rgba(214,199,0,.10);color:var(--yellow-600);}
.card--b .card__icon{background:rgba(11,152,37,.09);color:var(--green);}
.card--c .card__icon{background:rgba(0,120,106,.09);color:var(--teal);}

/* 위쪽 얇은 띠 — 카드마다 다른 색이 스치듯 들어간다.
   ::before / ::after 는 이미 호버 효과가 쓰고 있으므로 배경으로 그린다.
   .card:hover 의 background 단축 속성이 배경 이미지를 지우므로 :hover 도 함께 지정. */
.card--a,.card--b,.card--c,
.card--a:hover,.card--b:hover,.card--c:hover{
  background-repeat:no-repeat;
  background-position:top left;
  background-size:100% 3px;
}

/* 도해 칸 — 순백 대신 브랜드 쪽으로 아주 옅게 기운 면 + 위쪽 브랜드 선 */
.media--pad{
  position:relative;
  background:linear-gradient(180deg,rgba(0,120,106,.035),rgba(0,120,106,0) 220px),var(--surface);
  border-color:rgba(0,120,106,.16);
}

/* 교차 배경 — 무채색 회색 한 가지만 쓰면 페이지가 밋밋하다.
   녹빛 면과 노란빛 면을 번갈아 두어 스크롤에 리듬을 준다. */
.bg-2{background:#F2F7F3;}
.bg-3{background:#FAFAF0;}

/* 표 머리 — 회색 대신 브랜드 쪽으로 기운 면 + 위쪽 가는 색선.
   한 규칙으로 회사소개 · 제품 · 사양 페이지가 함께 색을 얻는다.
   면은 옅게 두고 선으로만 또렷하게 — 표 본문의 가독성을 해치지 않는다. */
.spec{position:relative;}
.spec caption{
  background:linear-gradient(180deg,rgba(0,120,106,.055),rgba(0,120,106,.02));
  border-bottom-color:rgba(0,120,106,.16);
}
.spec th{background:var(--surface-1);}

/* ═══════════════════════════════════════════════════════════
   부문 식별색을 글자에 입힌다

   카드에서 가장 먼저 읽히는 줄이 세 장 모두 검정이면
   무엇이 다른 부문인지 색으로는 알 수 없다.
   띠 · 아이콘과 같은 색을 글자에도 주어 카드 하나가 한 색으로 묶이게 한다.

   ※ 로고 원색이 아니라 --dom-* (명도를 낮춘 판)을 쓴다. 원색은 안 읽힌다.
   ※ 제목(h1~h3)은 검정으로 둔다. 제목까지 색을 넣으면 위계가 무너진다.
   ═══════════════════════════════════════════════════════════ */
.card--a .card__benefit{color:var(--dom-a);}
.card--b .card__benefit{color:var(--dom-b);}
.card--c .card__benefit{color:var(--dom-c);}

/* 번호 줄도 같은 색으로 — 카드가 한 색으로 묶인다.
   옅은 판(#8C8524 등)을 썼더니 3.8~4.2:1 로 기준(4.5)에 못 미쳤다.
   12px 작은 글씨라 더 엄격해야 한다. 정규 부문색을 그대로 쓴다. */

/* 어두운 면에서는 로고 원색을 그대로 쓴다 — 대비가 충분하다 */
.dark .card--a .card__benefit,.card--a.dark-card .card__benefit{color:var(--yellow);}
.dark .card--b .card__benefit,.card--b.dark-card .card__benefit{color:var(--lime);}
.dark .card--c .card__benefit,.card--c.dark-card .card__benefit{color:var(--teal-300);}

/* ═══════════════════════════════════════════════════════════
   페이지마다 부문 색을 입힌다

   제품 상세 페이지가 전부 같은 틸이면 어느 부문을 보고 있는지
   색으로는 구별되지 않는다. body 에 부문 클래스를 두어
   eyebrow 와 절 표식이 그 페이지의 색을 띠게 한다.
   본문·제목은 건드리지 않는다 — 색은 이정표 역할까지만.
   ═══════════════════════════════════════════════════════════ */

/* 표 머리 선도 페이지 색을 따른다 */
/* 어두운 면은 원색 그대로 — 대비가 충분하다 */

/* ═══════════════════════════════════════════════════════════
   비교표 — 머리행을 색으로 쪼개지 않는다

   기존에는 강조 열 머리만 초록으로 칠해 검정-초록-검정이 됐다.
   강조는 면이 아니라 표식으로 한다. 머리행은 한 톤으로 이어 놓고
   강조 열에만 위쪽 브랜드 선을 긋고 아주 옅게 띄운다.
   같은 장치를 .spec caption 에도 썼으므로 사이트 안에서 말이 맞는다.

   정렬 — 라벨 열(첫 열)은 왼쪽, 비교 열의 머리는 가운데.
   머리는 열 전체를 대표하는 이름이므로 열 가운데에 놓이는 편이 읽기 쉽다.
   ═══════════════════════════════════════════════════════════ */
.ctable thead th{
  text-align:center;
  font-weight:600;letter-spacing:.01em;
  padding-top:16px;padding-bottom:16px;
}
.ctable thead th:first-child{text-align:left;}

/* 강조 열 — 위쪽 브랜드 선 + 살짝 뜬 면. 색 덩어리가 아니다 */
.ctable thead th.hl{background:rgba(11,152,37,.06);color:var(--ink);font-weight:700;}
/* 본문 강조 열 — 옅은 틴트에 좌우 경계를 더해 하나의 띠로 읽히게 */
.ctable .hl{
  background:rgba(11,152,37,.05);
  box-shadow:inset 1px 0 0 rgba(11,152,37,.13),inset -1px 0 0 rgba(11,152,37,.13);
}
.ctable tbody tr:last-child .hl{box-shadow:inset 1px 0 0 rgba(11,152,37,.13),inset -1px 0 0 rgba(11,152,37,.13),inset 0 -2px 0 0 var(--green);}

/* 라벨 열 — 값보다 한 걸음 물러난다 */
.ctable tbody th{
  font-weight:500;color:var(--muted);background:var(--surface-1);
  font-size:var(--fs-300);letter-spacing:.005em;
}
/* 페이지 부문색을 표에도 — 강조 선이 그 페이지의 색을 띤다 */

/* 안전성 시험 표 — 저해상 이미지를 대체한다.
   판정 열은 좁고 짧으므로 가운데 정렬하고 통과 표시를 배지로 세운다. */
.ctable--safety{min-width:560px;}
.ctable--safety td:nth-child(3){text-align:center;width:1%;white-space:nowrap;}
.ctable--safety thead th:nth-child(3){width:1%;white-space:nowrap;}
.pass{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--fs-300);font-weight:700;color:var(--dom-b);
  padding:4px 12px;border-radius:999px;
  background:rgba(11,152,37,.10);white-space:nowrap;
}
.pass::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;
}
/* 도해 칸 안에 표가 들어가므로 안쪽 여백을 줄인다 */
.media--pad .table-scroll{margin:-4px 0;}

/* 안전성 검증 — 설명은 읽기 좋은 폭으로 묶고, 표는 전폭으로 편다.
   표는 열이 넷이라 2단 칼럼(525px)에서는 머리글이 접히고 잘린다. */
.safety-head{max-width:720px;}
.ctable--safety{min-width:0;}
@media (max-width:760px){.ctable--safety{min-width:600px;}}

/* 그리드·플렉스 칸은 기본이 min-width:auto 라, 안에 든 표(min-width 660px)가
   칸을 밀어내 좁은 화면에서 페이지 전체가 가로로 넘친다.
   표는 .table-scroll 안에서 스스로 스크롤되므로 칸의 최소폭만 풀어주면 된다.
   (.contact-shell 에서 같은 문제를 한 번 고쳤다 — 전 구획에 공통 적용) */
.split>*,.grid>*,.g3>*,.g-auto>*{min-width:0;}

/* ═══════════════════════════════════════════════════════════
   페이지 상단 워시 — 전부 순백이면 페이지마다 표정이 없다.
   머리 영역 뒤에 그 페이지 부문색의 아주 옅은 물을 깔아
   위에서 아래로 갈수록 흰색으로 가라앉게 한다.
   본문 대비에는 영향이 없는 3~4% 틴트까지만.
   ═══════════════════════════════════════════════════════════ */
main{background:linear-gradient(180deg,#F3F7F4 0,rgba(243,247,244,0) 460px);}
body.dom-a main{background:linear-gradient(180deg,var(--wash-a) 0,rgba(250,248,234,0) 460px);}
body.dom-b main{background:linear-gradient(180deg,#F0F7F1 0,rgba(240,247,241,0) 460px);}
body.dom-c main{background:linear-gradient(180deg,#EDF5F3 0,rgba(237,245,243,0) 460px);}

/* 카드 테두리 — 순백 위에서 --line 이 너무 옅어 윤곽이 흐렸다 */
.card{border-color:var(--line-card);}

/* ═══════════════════════════════════════════════════════════
   지표 스트립 — 숫자만 크고 나머지가 없어 밋밋했다

   네 지표는 성격이 다르다(연도 · 축적 · 인증 · 무사고).
   위쪽 색 선으로 넷을 구분하고, 옅은 면과 안쪽 여백을 주어
   '표 한 줄' 이 아니라 '지표판 네 장' 으로 보이게 한다.
   숫자 뒤 단위는 작고 색이 있어 이미 구분되므로 더 손대지 않는다.
   ═══════════════════════════════════════════════════════════ */

/* 무사고 0건 — 이 페이지에서 가장 강한 숫자다. 면을 눌러 눈이 멎게 한다 */

/* 페이지 워시로 배경이 순백에서 살짝 내려가면서 두 곳이 4.5:1 밑으로 떨어졌다.
   배경을 바꾸면 그 위 글자를 다시 재야 한다 — 색상은 두고 명도만 낮춘다. */

.pass{color:var(--green-700);}

/* ── 어두운 면 위 글자 명암비 ───────────────────────────
   흰색 알파를 .40~.45 로 잡아 4.5:1 을 못 넘긴 것들. .62 로 올린다.
   그리고 부문색 규칙(body.dom-*)이 .dark 보다 특이도가 높아
   어두운 면에서도 틸이 나오고 있었다 — 라임으로 되돌린다. */

.dark .cta-row__s,.contact-cta .cta-row__s{color:rgba(255,255,255,.62);}
.dark .tiny,.contact-cta .tiny,.dark figcaption{color:rgba(255,255,255,.62);}

/* ═══════════════════════════════════════════════════════════
   섹션 머리 도형 — 오른쪽 빈자리를 채우되, 장식이 아니라 요약

   페이지마다 하는 말을 선으로 추상화한다.
   회사소개=겹치는 두 고리(두 축을 잇는다) · 사업영역=세 원의 교집합 ·
   제품=커지는 모듈 · 배터리=셀 적층 · 연혁=시간 눈금 · 문의=퍼지는 신호

   선만 쓰고 면을 칠하지 않는다. 색은 그 페이지의 부문색을 따르되
   불투명도 14% — 있는 줄 모르게, 없으면 허전하게.
   제목·리드는 760px 안에 있으므로 겹치지 않는다.
   좁은 화면과 인쇄에서는 숨긴다.
   ═══════════════════════════════════════════════════════════ */
.section-head{position:relative;}
.section-head>*{position:relative;z-index:1;}
/* 모바일에서도 보이게 — 숨겨 두니 '이미지가 없다'는 인상을 줬다.
   다만 글줄과 겹치지 않도록 작고 옅게, 제목 오른쪽 위에 건다. */

/* 연혁은 section-head 가 아니라 2단 구성이라 기준 요소를 따로 잡는다 */
.hist-head{position:relative;}

/* 회사소개 도형은 두 대상을 나란히 두므로 가로가 길다 */

/* ═══════════════════════════════════════════════════════════
   구성 단위 — 셀 · 트레이 · 랙

   실제 설계 도면을 쓰므로 사진처럼 꾸미지 않는다.
   흰 바탕 위에 그대로 놓고, 아래에 이름·사양·설명을 붙인다.
   세 칸의 이미지 영역 높이를 고정해 도면 크기가 달라도 기준선이 맞는다.
   ═══════════════════════════════════════════════════════════ */
.cmp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
.cmp{
  display:flex;flex-direction:column;
  border:1px solid var(--line-card);border-radius:var(--radius-lg);
  background:var(--surface-1);padding:20px;
  background-repeat:no-repeat;background-position:top left;background-size:100% 3px;
}
.cmp__img{
  height:210px;display:grid;place-items:center;margin-bottom:16px;
  background:#fff;border-radius:var(--radius);overflow:hidden;
}
.cmp__img img{max-width:100%;max-height:196px;width:auto;height:auto;display:block;}
.cmp__img--draw svg{width:100%;height:100%;max-height:196px;}

.cmp h3{margin-bottom:4px;}
.cmp__spec{
  font-size:var(--fs-400);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-bottom:8px;
}
.cmp__d{font-size:var(--fs-300);color:var(--muted);line-height:1.7;}
@media (max-width:860px){
  .cmp-row{grid-template-columns:1fr;}
  .cmp__img{height:180px;}
  .cmp__img img{max-height:166px;}
}

/* 탭 — 항목이 많아 좁은 화면에서는 가로로 넘칠 수 있어 스크롤을 허용한다 */
.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs button{white-space:nowrap;flex:none;}
.panel.is-on{display:block;}
.panel[hidden]{display:none;}
/* 인쇄 — 탭을 누를 수 없으므로 전부 펼치고 제목을 붙인다 */
@media print{
  .tabs{display:none;}
  .panel,.panel[hidden]{display:block!important;}
}

/* ═══════════════════════════════════════════════════════════
   탭 — 눌러야 하는 것으로 보이게

   글자만 있고 테두리가 없어 '누를 수 있다' 는 신호가 없었다.
   각 항목을 테두리 있는 칸으로 세우고, 선택된 것만 짙게 채운다.
   글자도 한 단계 키워 목록으로 읽히게 한다.
   ═══════════════════════════════════════════════════════════ */
.tabs{
  border-bottom:0;gap:8px;margin-bottom:clamp(20px,2.4vw,28px);
  padding-bottom:2px;
}
.tabs button{
  padding:12px 20px;font-size:var(--fs-400);font-weight:700;
  color:var(--ink-700);border:1px solid var(--line-card);border-radius:var(--radius-lg);
  background:#fff;margin-bottom:0;
  display:inline-flex;align-items:center;gap:8px;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.tabs button::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--grey-300);flex:none;
  transition:background .25s var(--ease);
}
.tabs button:hover{border-color:var(--ink-700);color:var(--ink);}
.tabs button.is-on{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.tabs button.is-on::after{background:var(--lime);}
.tabs button:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

/* 두 도면을 나란히 — 좁아지면 위아래로 */
/* .figduo — 도해 두 장을 나란히. .figpair 와 달리 높이를 묶지 않는다.
   구조도는 라벨 글자가 들어 있어 380px 로 눌리면 못 읽는다.
   세로로 긴 도해는 폭을 채워야 글자가 산다. */
.figduo{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.figduo img{width:100%;height:auto;}
@media (max-width:860px){.figduo{grid-template-columns:1fr;}}
.figpair{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.figpair .media--pad{display:flex;flex-direction:column;justify-content:space-between;}
.figpair img{max-height:380px;width:auto;margin-inline:auto;}
@media (max-width:720px){
  .figpair{grid-template-columns:1fr;}
  /* 한 줄로 쌓이면 옆에 맞출 짝이 없다. 그런데도 높이를 380px 로 묶어 두니
     세로로 긴 것(DC 분전반 0.538)은 폭이 205px 까지 줄어 양옆 130px 이 비었다.
     쌓인 뒤에는 높이를 맞출 이유가 없으므로 폭을 채운다. */
  .figpair img{max-height:none;width:100%;}
}

/* 구성 단위 4단 — 셀 · 트레이 · 랙 · 뱅크 */
.cmp-row--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1080px){.cmp-row--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:860px){.cmp-row--4{grid-template-columns:1fr;}}
/* 랙 등급 — 세로 목록을 가로 3단으로 */


/* 시동용 배터리 실물 — 사양표보다 실물이 먼저 증명한다 */
/* 라인업 머리 — 제목 왼쪽, 등록상표 오른쪽. 좁아지면 줄바꿈해 로고가 아래로 간다 */
.lu-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.lu-head .h3{margin:0;}
.lu-logo{width:190px;height:auto;flex:none;}
@media (max-width:640px){.lu-logo{width:150px;}}
.bat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);}
.bat{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:#fff;padding:16px 16px 16px;margin:0;
}
.bat img{width:100%;height:auto;border-radius:var(--radius);}
.bat figcaption{display:flex;flex-direction:column;gap:2px;margin-top:12px;}
.bat__brand{font-size:var(--fs-200);font-weight:800;letter-spacing:.14em;color:var(--dom-b);}
.bat__model{font-size:var(--fs-400);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.bat__wh{font-size:var(--fs-300);color:var(--muted-2);font-variant-numeric:tabular-nums;}
@media (max-width:900px){.bat-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.bat-row{grid-template-columns:1fr;}}

/* 회사소개 3부문 스트립 */

/* 설치 현장 사진은 원본이 556px — 그 이상 늘리면 흐려진다. 확대 금지. */
figure.media img[src$="racks-installed.webp"]{
  max-width:556px;margin-inline:auto;
}

/* ESS ↔ 스마트팩토리 연결 한 장 — 회사소개 전용 */
.bridge{margin:clamp(24px,3vw,36px) 0 0;}
.bridge img{
  width:100%;max-width:1280px;height:auto;display:block;
  border-radius:var(--radius-lg);border:1px solid var(--line);
}
.bridge figcaption{
  font-size:var(--fs-300);color:var(--muted-2);margin-top:12px;
}

/* ═══════════════════════════════════════════════════════════
   산업 현장 장면 — 2D 정면도
   계통: 계통→수전→변압기→공장 구내 母線. PV·ESS 는 PCS 로 母線에 병렬,
   ESS 만 양방향(경부하 충전 / 피크 방전). 母線에서 생산 라인으로 공급.
   ═══════════════════════════════════════════════════════════ */
.scene{width:100%;height:auto;display:block;}
.scene path,.scene polygon,.scene rect{stroke-linejoin:round;stroke-linecap:round;}

/* 母線 — 이 그림의 중심선 */

/* 2층 → 슈트 → 1층 → 픽 지점 */
/* 적재: 얹고(55%) → 복귀 중 한 칸 내려가며 맨 아래가 빠진다(85~95%) */
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important;}}
@media print{.scene *{animation:none!important;}}

/* 회사소개 장면 — 동영상 */
/* 2단 안에서는 상단 여백·폭 상한이 필요 없다 */

/* 회사소개 머리 — 제목 40% / 동영상 60%
   16:9 를 전체폭에 깔면 세로가 화면의 70% 를 먹는다. 폭을 나눠 세로를 줄인다. */
.intro-2col{
  display:grid;grid-template-columns:40fr 60fr;
  gap:clamp(24px,3vw,44px);align-items:center;
}
.intro-2col .section-head{margin-bottom:0;}
.intro-2col .section-head::after{display:none;}
.intro-2col .lead{max-width:none;}
@media (max-width:900px){
  .intro-2col{grid-template-columns:1fr;gap:clamp(20px,3vw,28px);}
}

/* ═══════════════════════════════════════════════════════════
   모바일 탭 타깃 보정 — 실측에서 21~34px 로 나온 것들
   글자 크기는 그대로 두고 패딩·정렬로만 높이를 만든다.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* 연락처의 전화·메일 — 21px 였다. 실제로 누르는 링크다 */
  .cta-row a[href^="tel:"],
  .cta-row a[href^="mailto:"],
  main a[href^="tel:"],
  main a[href^="mailto:"]{
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* 언어 전환 · 로고 · 더보기 링크 */
  .lang button{min-height:44px;padding-inline:12px;display:inline-flex;align-items:center;}
  .brand{min-height:44px;display:inline-flex;align-items:center;}
  .link-arrow{min-height:44px;display:inline-flex;align-items:center;gap:8px;}
  /* 본문에 읽히는 마이크로 라벨은 12px 아래로 내리지 않는다 */
  .cta-row__k,.cert__badge,.status{font-size:var(--fs-200);}
}

/* 자료 내려받기 — 파일이 없으면 JS 가 감춘 채로 둔다(깨진 링크 노출 금지) */
.dl{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;margin-top:clamp(20px,2.6vw,32px);
  padding:clamp(16px,2vw,24px) clamp(20px,2.2vw,28px);
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
}
.dl__t{display:flex;flex-direction:column;gap:3px;min-width:0;}
.dl__k{font-size:var(--fs-500);font-weight:700;color:var(--ink);}
.dl__d{font-size:var(--fs-300);color:var(--muted-2);}
.dl__btn{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  min-height:44px;padding:0 20px;border-radius:var(--radius);
  background:var(--dom-b);color:#fff;font-size:var(--fs-400);font-weight:700;
  transition:background .25s var(--ease);
}
.dl__btn:hover{background:var(--green-700);}
.dl__btn svg{width:15px;height:15px;}
@media (max-width:560px){
  .dl{flex-direction:column;align-items:stretch;}
  .dl__btn{justify-content:center;}
}

/* 카드에서 다음 장으로 넘어가는 링크 — 좁은 화면에서는 '누를 것' 으로 보여야 한다.

   왜 고쳤나 : 모바일에서 카드가 세로로 길어진다. 긴 본문과 태그 네 줄을 지나
   맨 아래에 놓인 97px 짜리 청록 글씨는 본문의 연장으로 읽힌다.
   게다가 이 링크의 유일한 표시가 hover 밑줄인데 **터치에는 hover 가 없다.**
   그래서 모바일에서는 아무 표시도 없는 맨 글씨였다.

   데스크톱은 건드리지 않는다 — 거기서는 카드가 짧고 hover 가 있다. */
.link-arrow__i{line-height:1;}
@media (max-width:900px){
  .card__foot{padding-top:20px;}
  .card__foot .link-arrow{
    display:flex;width:100%;justify-content:space-between;align-items:center;
    min-height:48px;padding:0 8px 0 16px;
    border:1px solid var(--teal);border-radius:var(--radius);
    background:rgba(0,120,106,.05);
    font-size:var(--fs-500);
  }
  /* 폭이 꽉 찼으므로 hover 로 사이를 벌리던 동작은 뜻이 없다 */
  .card__foot .link-arrow:hover{gap:0;border-color:var(--teal);}
  .card__foot .link-arrow:active{background:rgba(0,120,106,.12);}
  /* 화살표는 동그라미에 담아 '버튼' 으로 읽히게 한다 */
  .card__foot .link-arrow__i{
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;flex:none;border-radius:50%;
    background:var(--teal);color:#fff;font-size:var(--fs-400);
  }
}

/* 경로 표시 — 제품 하위 페이지. 제목 위 라벨이 아니라 상위로 돌아가는 길 */
.crumb{display:block;font-size:var(--fs-300);color:var(--muted-2);margin-bottom:16px;}
.crumb a{color:inherit;text-decoration:underline;text-decoration-color:rgba(0,120,106,.35);text-underline-offset:3px;}
.crumb a:hover{color:var(--teal);text-decoration-color:currentColor;}

/* Impeccable critique B 확인 결함
   · 제품 페이지 본문 줄 길이 — 1113px 폭을 다 써 한 줄 76~128자. 읽는 폭으로 묶는다
   · 통합 관제 탭 캡션이 테두리에 붙어 있음 — 여백 없는 .media 안의 figcaption */
.snap-page main .section p.mt-s,
.snap-page main .section p.tiny{max-width:72ch;}
.media > figcaption{padding:12px 16px 12px;margin-top:0;}

/* ═══════════════════════════════════════════════════════════
   2026-09-15 Impeccable critique 후속 — 조용하게
   · 모든 상자·도판·표머리에 같던 옐로→틸 윗선이 템플릿 서명이 되었다. 걷어낸다
   · 사양표는 요금제표가 아니다 — 검은 머리띠 대신 흰 바탕 + 잉크 선
   · 강조색은 의미 있는 곳(라인업표 대표 모델 열)에만
   ═══════════════════════════════════════════════════════════ */
.card--a,.card--b,.card--c,
.card--a:hover,.card--b:hover,.card--c:hover{background-image:none;}
.media--pad::before{content:none;}
.media--pad{background:var(--surface);border-color:var(--line);}
.cmp{background-image:none;}
.spec caption,
body[class] .spec caption{box-shadow:none;background:var(--surface-1);border-bottom-color:var(--line);}

.ctable thead th,.ctable thead th.hl{box-shadow:none;}
.ctable .hl,.ctable tbody tr:last-child .hl{background:rgba(11,152,37,.05);box-shadow:none;}
/* 모바일 가로 스크롤 시 행 이름이 따라오게 */
.ctable tbody th,.ctable thead th:first-child{position:sticky;left:0;z-index:1;}
.ctable tbody th{background:var(--surface-1);}

/* 구성 제품 — 탭 대신 순서대로. 절 사이는 선 하나로 나눈다 */
.panel--flow{display:block;animation:none;}
.panel--flow + .panel--flow{margin-top:clamp(40px,5vw,64px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line);}
.panel--flow > .h3:first-child{margin-bottom:12px;}
/* 앵커 여백은 html 의 scroll-padding-top 하나로 — 패널만 따로 24px 더 내려가 다른 절과 멈추는 자리가 달랐다(2026-09-17) */

/* 특허증 접기 */
.pat-certs > summary{
  cursor:pointer;display:inline-flex;align-items:center;gap:12px;list-style:none;
  padding:12px 20px;border:1px solid var(--line-card);border-radius:var(--radius-lg);
  font-size:var(--fs-400);font-weight:700;color:var(--ink);background:#fff;
}
.pat-certs > summary::-webkit-details-marker{display:none;}
.pat-certs > summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease);}
.pat-certs[open] > summary::after{transform:rotate(-135deg) translateY(-2px);}
.pat-certs > summary:hover{border-color:var(--ink-700);}
.pat-certs[open] > .cert-grid{margin-top:20px;}

/* 문의 마무리 */
.req{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;
  padding-top:clamp(28px,3.5vw,40px);border-top:2px solid var(--ink);}
.req .h3{margin:0;}
.req p{max-width:60ch;}
.req__links{display:flex;flex-wrap:wrap;gap:12px;}
.req__links a{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid var(--ink);
  border-radius:var(--radius-lg);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.req__links li:first-child a{background:var(--dom-b);border-color:var(--dom-b);color:#fff;}
.req__links a:hover{border-color:var(--teal);}
.req__links li:first-child a:hover{background:var(--green-700);}

/* 모바일 — 세로로 긴 실물 사진 한 장이 화면을 다 먹지 않게 */
@media (max-width:640px){
  .figpair .media img{max-height:360px;width:auto;margin-inline:auto;}
}

/* 구성 제품 소개 문단 바로 아래 첫 절 — 탭이 있던 자리만큼 띄운다 */
.panel--flow:first-of-type,
p + .panel--flow{margin-top:clamp(28px,3.5vw,40px);}

/* 제품 페이지 장 넘김 — 전역 smooth 스크롤이 JS 이징 위에 겹쳐 매 프레임 따라가느라 표지보다 훨씬 느렸다.
   표지(html.snap.snap-js)와 같게 끈다. 앵커 이동은 scroll-margin 으로 위치만 맞춘다 */
html.snap-page{scroll-behavior:auto;}

/* 페이지 머리 리드 — 760px 에 묶여 마지막 어절 하나만 다음 줄로 떨어지던 것.
   넓은 화면에서는 한 줄로, 좁아지면 줄 끝이 한 어절만 남지 않게 */
.section-head > .lead{max-width:none;text-wrap:pretty;}
.lead,.section-head .h1,.section-head .h2{text-wrap:pretty;}

/* 제품소개 허브 — 카드에 보유 실사 한 장씩. 빈 카드가 템플릿으로 읽히던 것 */
/* 허브 카드 그림 — 세 장 모두 같은 3:2 틀을 꽉 채운다(2026-09-17).
   전에는 랙은 가운데 작게 · 배터리는 가로로 넓게 · 공장 사진만 꽉 차 크기가 셋 다 달랐다.
   제품 그림 둘은 같은 바닥색(--surface-3) · 같은 3:2 캔버스 · 같은 바닥선으로 새로 만들었다 */
.card__img{aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;margin-bottom:20px;background:var(--surface-3);}
.card__img img{display:block;width:100%;height:100%;object-fit:cover;}

/* 카드 「자세히 보기」 — 글자 링크라 눌리는 것으로 안 보였다(사용자 지적).
   테두리 있는 버튼으로 세우고, 카드 전체를 눌러도 같은 곳으로 간다(main.js) */
.card__foot .link-arrow{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;
  border:1.5px solid var(--ink);border-radius:var(--radius-lg);border-bottom-color:var(--ink);
  font-weight:700;color:var(--ink);text-decoration:none;background:#fff;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.card__foot .link-arrow:hover,.card:has(a):hover .card__foot .link-arrow{background:var(--ink);color:#fff;border-color:var(--ink);gap:16px;}
.card:has(.card__foot a){cursor:pointer;}

/* 비교표 — 「너무 흐려서 구분이 불명확 · 전부 가운데 정렬 · 머리 글자가 작다」(사용자 2026-09-15) */
.ctable th,.ctable td{text-align:center;border-bottom:1px solid var(--line-strong);}
.ctable thead th,body[class] .ctable thead th{
  text-align:center;font-size:var(--fs-500);font-weight:800;letter-spacing:-.01em;
  padding-top:20px;padding-bottom:20px;border-bottom:2px solid var(--ink);
}
.ctable thead th:first-child{text-align:center;}
.ctable tbody th{text-align:center;font-size:var(--fs-400);color:var(--ink-700);background:var(--surface-2);border-right:1px solid var(--line-strong);}
.ctable td{border-left:1px solid var(--line);}
.ctable td:first-of-type{border-left:0;}
.ctable tbody tr:nth-child(even) td{background:var(--surface-1);}
.ctable .hl,.ctable tbody tr:nth-child(even) .hl{background:rgba(11,152,37,.07);}
.ctable--pat td,.ctable--pat th{text-align:center;}

/* 사양 주석 — 「※ … 입니다」 설명조 대신 명사형 한 줄씩 */
.spec-notes{list-style:none;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--line);font-size:var(--fs-300);color:var(--muted);line-height:1.75;max-width:none;}
.spec-notes li{display:flex;gap:12px;align-items:baseline;}
.spec-notes b{flex:none;font-weight:600;color:var(--ink-700);}
.spec-notes b::after{content:" :";}
.contact-cta .spec-notes,.dark .spec-notes{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.62);}
.dark .spec-notes b{color:rgba(255,255,255,.86);}

/* 글자 크기 통일 (2026-09-15 실측) — 카드 그리드 제목은 모든 페이지 같은 크기 */
.grid > .card > .h3,.grid > .card > h2.h3,.grid > .card > h3.h3{font-size:var(--fs-h3);line-height:1.35;}

/* 한글 라벨 — 대문자 자간 영문 라벨용 설정 해제 */
.contact-info .k{letter-spacing:0;text-transform:none;font-size:var(--fs-300);font-weight:600;}
/* 사양 줄 — 단위만 다음 줄로 떨어지지 않게 */
.cmp__spec{text-wrap:balance;word-break:keep-all;}

/* ═══ v108 — Impeccable 감사 VER.1 후속 (DESIGN.md) ═══ */
/* 모바일 서랍의 견적 문의 — .drawer a 글자색(ink)이 버튼 흰 글자를 덮어 3.49:1 이던 것 */
.drawer a.btn--accent{color:#fff;border-bottom:0;}
.drawer a.btn--accent:hover{background:var(--green-700);}
/* 어두운 절 안 가로 스크롤 안내 */
/* 경로 링크 — 글자는 작게, 누르는 영역은 44px */
.crumb a{display:inline-block;padding-block:12px;margin-block:-12px;}
.lang button{min-width:44px;justify-content:center;}
/* 사양 줄 한 줄 길이 */
.spec-notes li{max-width:80ch;}

/* ═══ v109 — 표지 사업 부문 중복 제거 ═══
   아래 「사업 부문」 절이 히어로의 세 칸과 같은 곳으로만 이어져 삭제.
   세 칸이 사업 부문 입구를 맡는다 — 조금 키우고 칸 안에 「자세히 보기」 표시(칸 전체가 링크) */
.domains{margin-top:clamp(32px,3.6vw,48px);}
.domains .dm{min-height:clamp(260px,25vw,340px);padding:28px;gap:8px;}
.domains .dm__t{font-size:var(--fs-700);letter-spacing:-.02em;}
.domains .dm__d{font-size:var(--fs-400);}
.dm__more{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  min-height:44px;padding:0 20px;border:1px solid rgba(255,255,255,.6);border-radius:var(--radius);
  font-size:var(--fs-400);font-weight:600;color:#fff;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.dm__more svg{width:14px;height:14px;}
.dm:hover .dm__more,.dm:focus-visible .dm__more{background:#fff;border-color:#fff;color:var(--ink);}
@media (max-width:980px){.domains .dm{min-height:220px;padding:24px;}}

/* 문의 접수 줄 — 줄 전체가 링크라 모바일 터치 보정(main a[href^="mailto:"]{display:inline-flex})이
   격자를 덮어 전화번호가 끊기고 안내 문구가 칸 밖으로 흘렀다 */
@media (max-width:900px){
  main a.cta-row[href]{display:grid;}
}

/* 시스템 구성 단위 네 칸 — 제목 · 굵은 사양 · 설명이 네 칸 모두 같은 수평선에 오게(subgrid),
   사양과 설명 사이 가는 구분선 */
.cmp-row--4 > .cmp{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;}
.cmp-row--4 .h4{margin-bottom:4px;}
.cmp-row--4 .cmp__spec{margin-bottom:0;padding-bottom:12px;border-bottom:1px solid var(--line);}
.cmp-row--4 .cmp__d{padding-top:12px;}

/* 사양 줄 「항목 : 값」 — 목록마다 항목 칸 폭을 가장 긴 항목에 맞춰 콜론이 위아래 같은 자리에 선다 */
.spec-notes{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:12px;max-width:88ch;}
.spec-notes li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline;max-width:none;}
.spec-notes b{display:flex;justify-content:space-between;gap:8px;}
.spec-notes b::after{content:":";font-weight:400;}
@media (max-width:640px){
  .spec-notes{grid-template-columns:1fr;}
  .spec-notes li{grid-template-columns:1fr;row-gap:0;}
  .spec-notes b{justify-content:flex-start;}
  .spec-notes li + li{margin-top:6px;}
}

/* 두 단 안의 비교표 — 최소폭 660px 때문에 반 칸에서 글자가 잘렸다. 넓은 화면에서는 칸 안에서 줄바꿈 */
@media (min-width:901px){
  .split .table-scroll .ctable{min-width:0;}
}
/* 모바일 사양 줄 — 항목이 값 위로 쌓이면 콜론은 떼어 낸다 */
@media (max-width:640px){
  .spec-notes b::after{content:none;}
}

/* 푸터 소제목 — h4 → h2 (본문 제목 단계를 건너뛰지 않게). 모양은 기존 그대로 */
.footer .footer__h{margin-top:0;line-height:1.4;font-weight:700;}

/* 인증서 격자 — 자동 채움으로 6장이 5 + 1, 특허증 9장이 5 + 4 로 끊겨 한 장이 홀로 남던 것 */
.cert-grid--6{grid-template-columns:repeat(6,minmax(0,1fr));}
.cert-grid--9{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1080px){.cert-grid--6{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:640px){.cert-grid--6,.cert-grid--9{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* 페이지 도입부(.pgb) — 제품 3페이지 공통.
   왼쪽 : 경로 → h1 → 소개(실제 HTML 글자). 글자 시작선은 .wrap = 본문 시작선.
   오른쪽 : **세 페이지 모두 같은 크기의 이미지 틀**(.pgb__img) — 화면 오른쪽 44% · 배너 전체 높이.
     누끼 제품(ESS · 배터리)은 틀 가운데 바닥선에 같은 높이(86%)로 세우고,
     사진(스마트팩토리)은 틀을 채우되 왼쪽 38% 를 배경색으로 녹여 사각 테두리가 보이지 않게 한다.
   채도 : 세 이미지를 같은 값(saturate .55)으로 낮춘다 — 이미지가 제목보다 먼저 눈을 끌지 않게.
   배경은 좌→우 한 방향만. 아래 본문으로 번지는 세로 페이드는 두지 않는다 — 하단은 직선 경계. */
.pgb{
  position:relative;overflow:hidden;
  margin-top:var(--header-h);
  /* 오른쪽 끝 = 미네랄 그레이그린 #7D928A. 브랜드 초록의 색상만 남기고 채도를 거의 뺀 광물성 톤.
     2026-09-17 후보 비교 : 검정(#16302A) 무겁고 촌스러움 · 세이지(#6FA08E) 민트빛이라 유행 탐 ·
     슬레이트(#54685F) 검은 배터리팩 윤곽이 묻힘 · 청회(#6F8886) 차가움 · 올리브(#848C7C) 카키로 낡아 보임. */
  background:linear-gradient(90deg,var(--intro-wash) 0%,#E6EBE7 42%,var(--intro-mineral) 100%);
}
.pgb__in{
  display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);align-items:center;
  column-gap:clamp(24px,3vw,48px);min-height:340px;
}
.pgb__txt{position:relative;z-index:1;padding-block:36px;}   /* 이미지 틀은 .pgb(화면 오른쪽 끝) 기준으로 잡히고, 글자는 그 위에 선다 */
.pgb__txt .crumb{margin-bottom:12px;}
.pgb__txt .h1{text-wrap:balance;}
.pgb__txt .lead{margin-top:14px;max-width:560px;}

.pgb__img{position:absolute;top:0;right:0;bottom:0;width:44%;z-index:0;}
.pgb__img img{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:86%;width:auto;max-width:90%;object-fit:contain;object-position:center bottom;
  filter:saturate(.55);
}
.pgb__img--photo img{
  left:0;right:0;top:0;bottom:0;transform:none;
  width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 78%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 38%);
}
.pgb__img:empty{display:none;}
.pgb + .section{padding-top:56px;}

@media (max-width:1024px){
  .pgb__in{min-height:300px;column-gap:24px;}
}
@media (max-width:640px){
  .pgb{background:linear-gradient(90deg,var(--intro-wash) 0%,#E9EDEA 58%,var(--grey-400) 100%);}   /* 좁은 화면 : 글자가 전폭을 쓰므로 어두운 띠는 오른쪽 끝에만 */
  .pgb__in{grid-template-columns:1fr;min-height:0;row-gap:0;}
  .pgb__txt{padding-block:28px 20px;}
  .pgb__txt .lead{max-width:84%;}
  .pgb__txt .crumb{margin-bottom:8px;}
  /* 좁은 화면 : 틀을 글자 아래로 내리고, 세 페이지 같은 높이 · 전폭 */
  .pgb__img{position:relative;top:auto;right:auto;bottom:auto;width:auto;height:210px;margin-inline:calc(var(--gutter) * -1);}
  .pgb__img img{height:88%;}
  .pgb__img--photo img{height:100%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 30%);}
  .pgb + .section{padding-top:48px;}
}
@media print{.pgb{background:none;}.pgb__img{display:none;}}

/* 시동용 배터리 라인업 — 용량별 네 칸. 한 바닥선에 세워 크기 차이가 보이게 한다 */
.lu-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:clamp(12px,2vw,28px);}
.lu-item{display:flex;flex-direction:column;align-items:center;}
.lu-item img{width:calc(var(--s,1) * 100%);height:auto;display:block;}
.lu-cap{display:block;width:100%;text-align:center;margin-top:12px;padding-block:10px;
  padding-inline:8px;font-size:var(--fs-400);font-weight:700;color:var(--ink-800);border-top:1px solid var(--line);}
@media (max-width:640px){.lu-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px;}}

/* ═══ 제품 3페이지 공통 골격 (2026-09-17) — 도입부 → 하위 카드 한 줄 → 하위 절 → 증거 → 문의 ═══ */
.g4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1080px){.g4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.g4{grid-template-columns:1fr;}}
/* 하위 절 — 위에 가는 선 하나로 구역을 가른다(패널 사이 구분선과 같은 값) */
.sub,.panel--flow.sub{margin-top:clamp(72px,8vw,112px);padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--line);}
.sub > .h2 + .lead,.sub > .h2 + p{margin-top:12px;}
.sub + .table-scroll,.sub + .figpair,.sub + .split,.sub + figure,.sub + div{margin-top:clamp(24px,3vw,32px);}
.flist--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);}
.flist--2 li:nth-last-child(2){border-bottom:0;}
@media (max-width:640px){.flist--2{grid-template-columns:1fr;}.flist--2 li:nth-last-child(2){border-bottom:1px solid var(--line-2);}}
.link-arrow__i svg{display:block;}
.footer p.footer__h{margin-top:0;}
/* 주석 줄 안의 링크 — 글자는 작아도 누르는 면은 44px */
.spec-notes a{display:inline-block;padding-block:11px;margin-block:-11px;}
.card h2.h3{margin-bottom:12px;}
.flist h3{margin-bottom:4px;}
/* 도입부 사진 초점 — 페이지마다 피사체 위치가 달라 틀 안 중심을 따로 잡는다 */
body.dom-a .pgb__img--photo img{object-position:62% 40%;}
@media (max-width:640px){body.dom-a .pgb__img--photo img{object-position:60% 72%;}}

/* ESS 패키지 라인업 — 인클로저형(실물 랙 · 실제 높이 비율) · 컨테이너형(동일 축척 도해) */
.pkg{display:grid;gap:clamp(32px,4vw,48px);}
.pkg__cap{font-size:var(--fs-400);font-weight:700;color:var(--ink-800);margin-bottom:20px;}
.encl{display:flex;align-items:flex-end;gap:clamp(32px,6vw,88px);padding-left:4px;}
.encl__item{display:flex;flex-direction:column;align-items:flex-start;}
.encl__item img{display:block;width:auto;max-width:100%;height:calc(var(--mm) / 2150 * 320px);object-fit:contain;object-position:left bottom;}
.encl__t{margin-top:16px;font-size:var(--fs-500);font-weight:700;color:var(--ink);}
.encl__s{margin-top:4px;font-size:var(--fs-300);line-height:1.6;color:var(--muted);font-variant-numeric:tabular-nums;}
@media (max-width:640px){.encl__item img{height:calc(var(--mm) / 2150 * 220px);}.encl{gap:24px;}}
/* 용량 사다리 — 4칸 · 칸 사이 화살표, 640px 이하 2×2 */
.lad__row{list-style:none;margin:0;padding:8px 0 4px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(24px,3vw,40px);row-gap:32px;}
.lad__step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;}
.lad__step + .lad__step::before{content:"";position:absolute;top:19px;left:calc(-1 * clamp(24px,3vw,40px) + 2px);width:calc(clamp(24px,3vw,40px) - 4px);height:14px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2014%22%20fill%3D%22none%22%20stroke%3D%22%238A968F%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%207H45%22%2F%3E%3Cpath%20d%3D%22M38.5%202.4%2044.5%207%2038.5%2011.6%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center;background-size:100% 14px;}
.lad__ic{height:56px;display:flex;align-items:flex-end;justify-content:center;}
.lad__svg{display:block;max-width:100%;height:auto;overflow:visible;}
.lad__t{margin-top:16px;font-size:var(--fs-500);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.lad__s{margin-top:4px;font-size:var(--fs-300);line-height:1.5;color:var(--muted);}
.lad .lad__b{fill:#F4F7F5;stroke:#9FAEA6;stroke-width:1.1;}
.lad .lad__door{fill:#fff;stroke:var(--grey-300);stroke-width:.9;}
.lad .lad__skirt{stroke:#C4CEC8;stroke-width:3.4;stroke-linecap:round;}
.lad .lad__lv{stroke:var(--grey-300);stroke-width:1;stroke-linecap:round;}
.lad .lad__tray{fill:var(--tray-300);opacity:.9;}
.lad .lad__b--on{fill:rgba(11,152,37,.08);stroke:var(--green);stroke-width:1.4;}
.lad .lad__r{fill:#E9EEF2;stroke:var(--tray-line);stroke-width:1.1;}
.lad .lad__bus{stroke:var(--green);stroke-width:1.4;fill:none;}

@media (max-width:640px){.lad__row{grid-template-columns:repeat(2,minmax(0,1fr));}.lad__step + .lad__step::before,.lad__step + .lad__step::after{content:none;}}
.pkg > figcaption{padding:0;margin-top:0;}
/* 이미지 대기 칸 — 이미지가 들어오기 전에는 화면에 나오지 않는다 */
.pkg__grp--wait{display:none;}
.pkg__grp + .pkg__grp:not(.pkg__grp--wait){padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line);}
/* 컨테이너 용량 버전 — 실제 높이 비율(10FT 2,591 : 20FT HC 2,896 mm)로 세운다. 길이 차이는 사진 자체가 말한다 */
.ctn{display:flex;align-items:flex-end;gap:clamp(20px,3vw,40px);}
.ctn__item{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.ctn__f img{display:block;width:auto;max-width:100%;height:calc(var(--mm) / 2896 * 230px);object-fit:contain;object-position:left bottom;}
@media (max-width:900px){.ctn__f img{height:calc(var(--mm) / 2896 * 150px);}}
@media (max-width:640px){.ctn{gap:14px;}.ctn__f img{height:calc(var(--mm) / 2896 * 96px);}.ctn .encl__t{font-size:var(--fs-400);}}
/* 가로로 긴 사진 한 장을 판 안에 꽉 채우는 경우에만 — 예전에 .media--pad 전체에 걸어
   유닛랙 세로 사진까지 가로로 늘어났다(2026-09-21) */
.media--wide > img{display:block;width:100%;height:auto;}
.pkg__note{margin-top:16px;font-size:var(--fs-300);color:var(--muted-2);letter-spacing:.01em;}

/* 공급 구조 — 수용가를 가운데 둔 3단. 화살표는 CSS 로 그린다.
   좁은 화면에서는 세로로 접히고 화살표 방향도 따라 돈다 */
.chain__row{display:grid;grid-template-columns:1fr minmax(0,240px) 1fr;align-items:center;column-gap:clamp(28px,4vw,56px);}
.chain__side,.chain__hub{position:relative;text-align:center;min-width:0;}
.chain__hub{border:1px solid var(--line-card);border-radius:var(--radius);padding:16px 16px 20px;background:var(--surface);}
.chain__pics{display:flex;justify-content:center;align-items:flex-end;gap:12px;}
.chain__pics img,.chain__hub > img{display:block;width:auto;max-width:100%;height:clamp(66px,8vw,92px);object-fit:contain;}
.chain__hub > img{height:clamp(74px,9vw,104px);margin-inline:auto;}
.chain__eyebrow{font-size:var(--fs-200);font-weight:800;letter-spacing:.16em;margin-bottom:12px;}
.chain__eyebrow--a{color:var(--dom-a);}
.chain__eyebrow--b{color:var(--dom-b);}
.chain__t{margin-top:14px;font-size:var(--fs-400);font-weight:700;color:var(--ink);}
.chain__t--hub{font-size:var(--fs-500);padding-bottom:12px;border-bottom:1px solid var(--line);}
.chain__s{margin-top:4px;font-size:var(--fs-300);color:var(--muted);}
.chain__list{list-style:none;margin:12px 0 0;padding:0;font-size:var(--fs-300);color:var(--muted);line-height:1.9;}
/* 화살표 — 가는 선 + 촉. 왼쪽 묶음은 오른쪽으로, 오른쪽 묶음은 왼쪽으로 */
.chain__side::after{content:"";position:absolute;top:calc(50% - 32px);width:clamp(30px,4vw,52px);height:14px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2014%22%20fill%3D%22none%22%20stroke%3D%22%230A7C1F%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%207H53%22%2F%3E%3Cpath%20d%3D%22M46.5%202.4%2052.5%207%2046.5%2011.6%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center;background-size:100% 14px;}
.chain__side:not(.chain__side--r)::after{right:calc(-1 * clamp(28px,4vw,56px) / 2 - clamp(15px,2vw,26px));}
.chain__side--r::after{left:calc(-1 * clamp(28px,4vw,56px) / 2 - clamp(15px,2vw,26px));transform:scaleX(-1);}
.chain__note{display:flex;gap:14px;align-items:baseline;margin-top:clamp(24px,3vw,32px);padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-300);color:var(--muted);}
.chain__note b{flex:none;font-size:var(--fs-200);font-weight:800;letter-spacing:.14em;color:var(--dom-c);}
@media (max-width:760px){
  .chain__row{grid-template-columns:1fr;row-gap:44px;}
  .chain__side::after{top:auto;bottom:-34px;left:calc(50% - 22px);width:44px;height:14px;right:auto;transform:rotate(90deg);}
  .chain__side--r{order:3;}
  .chain__side--r::after{bottom:auto;top:-34px;transform:rotate(-90deg);}
  .chain__hub{order:2;}
}

/* 흐름 도식 — 상자 3 · 4개를 가로로, 좁은 화면에서는 세로로.
   예전 800px 고정폭 SVG 는 모바일에서 옆으로 밀어야 했다 (2026-09-21) */
/* 이 판은 잘라낼 것이 없다 — 칸 사이 화살표 · 연결 이름이 판 안에서 살짝 비어져 나와도 보여야 한다 */
.fl{overflow:visible;}
.fl__h{font-size:var(--fs-200);font-weight:700;letter-spacing:.09em;color:var(--muted-2);text-transform:uppercase;margin-bottom:20px;}
.fl__row{list-style:none;margin:0;padding:0;display:grid;align-items:stretch;column-gap:var(--fl-gap,clamp(34px,4vw,56px));row-gap:36px;}
.fl__row--3{grid-template-columns:repeat(3,minmax(0,1fr));--fl-gap:clamp(60px,7vw,96px);}  /* 칸 사이에 연결 이름이 들어간다 */
.fl__row--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.fl__step{position:relative;border:1px solid var(--line-card);border-radius:var(--radius);background:var(--surface);padding:16px 18px 18px;min-width:0;}
.fl__step--on{border-color:var(--green);background:rgba(11,152,37,.045);}
.fl__cap{font-size:var(--fs-200);font-weight:700;letter-spacing:.09em;color:var(--muted-2);text-transform:uppercase;}
.fl__t{margin-top:8px;font-size:var(--fs-500);font-weight:700;color:var(--ink);}
.fl__l{list-style:none;margin:10px 0 0;padding:0;font-size:var(--fs-300);color:var(--muted);line-height:1.8;}
.fl__note{margin-top:clamp(22px,3vw,30px);padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-300);color:var(--muted-2);}
/* 칸 사이 화살표 + 그 위의 연결 이름 */
.fl__step:not(:last-child)::after{content:"";position:absolute;top:calc(50% - 7px);right:calc(-1 * var(--fl-gap,56px) + 8px);width:calc(var(--fl-gap,56px) - 16px);height:14px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2014%22%20fill%3D%22none%22%20stroke%3D%22%2300786A%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%207H53%22%2F%3E%3Cpath%20d%3D%22M46.5%202.4%2052.5%207%2046.5%2011.6%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center;background-size:100% 14px;}
.fl__link{position:absolute;top:calc(50% - 26px);right:calc(-1 * var(--fl-gap,56px));width:var(--fl-gap,56px);text-align:center;font-size:var(--fs-200);color:var(--muted-2);white-space:nowrap;}
@media (max-width:860px){
  .fl__row--3,.fl__row--4{grid-template-columns:1fr;row-gap:42px;}
  .fl__step:not(:last-child)::after{top:auto;bottom:-32px;right:auto;left:calc(50% - 21px);width:42px;height:14px;transform:rotate(90deg);}
  .fl__link{top:auto;bottom:-26px;right:auto;left:50%;width:auto;transform:translateX(14px);}
}
@media (min-width:861px) and (max-width:1080px){.fl__row--4{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* 시험 단계 — 점과 선으로 잇는 4칸. 좁은 화면에서는 세로 줄로 선다 (2026-09-21) */
.stp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;}
.stp__i{position:relative;padding-top:26px;text-align:center;min-width:0;}
.stp__i::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--grey-500);}
.stp__i--on::before{background:var(--dom-b);border-color:var(--dom-b);}
.stp__i:not(:last-child)::after{content:"";position:absolute;top:5px;left:calc(50% + 12px);width:calc(100% - 24px);height:1.6px;background:var(--line-strong);}
.stp__n{display:block;font-size:var(--fs-200);font-weight:800;letter-spacing:.16em;color:var(--muted-2);}
.stp__i--on .stp__n{color:var(--dom-b);}
.stp__t{margin-top:8px;font-size:var(--fs-400);font-weight:700;color:var(--ink);}
.stp__i--on .stp__t{color:var(--dom-b);}
@media (max-width:760px){
  .stp{grid-template-columns:1fr;row-gap:22px;}
  .stp__i{padding:0 0 0 30px;text-align:left;}
  .stp__i::before{top:4px;left:0;transform:none;}
  .stp__i:not(:last-child)::after{top:18px;left:5px;width:1.6px;height:calc(100% + 4px);}
  .stp__t{margin-top:2px;}
}

/* 절 목차 — 상세 페이지 상단. 큰 카드가 하던 일을 한 줄로 (2026-09-21) */
.toc{display:flex;flex-wrap:wrap;gap:4px clamp(24px,3vw,40px);padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.toc__i{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:var(--fs-400);font-weight:600;color:var(--ink-700);transition:color .25s var(--ease);}
.toc__i::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);flex:none;}
.toc__i:hover{color:var(--green-700);}
.sec-status{margin-top:10px;}
/* 목차 다음 첫 절 — 큰 카드 묶음을 받던 간격(최대 112px)은 한 줄 목차에는 과하다 */
.toc + .sub,.toc + .panel--flow,.toc + div{margin-top:clamp(36px,4vw,52px);}
.toc + .spec-notes{margin-top:14px;border-top:0;padding-top:0;}
.spec-notes + .sub{margin-top:clamp(36px,4vw,52px);}

/* 메일 주소 복사 단추 — 어두운 문의 블록 안 */
.copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px;}
.copy{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.28);border-radius:2px;background:transparent;color:rgba(255,255,255,.86);font-size:var(--fs-300);font-weight:600;cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease);}
.copy:hover{border-color:rgba(255,255,255,.6);color:#fff;}
.copy__msg{font-size:var(--fs-300);color:var(--lime);max-width:46ch;line-height:1.55;}
.copy__msg.is-bad{color:var(--error-300);}

/* 카드 안 사업부 라벨 — 줄은 셋이 나란히 유지 (2026-09-21) */
.card__div{font-size:var(--fs-200);font-weight:800;letter-spacing:.12em;color:var(--muted-2);margin-bottom:10px;}
.card--a .card__div,.card--b .card__div{color:var(--dom-a);}
.card--c .card__div{color:var(--dom-c);}

/* 회사소개 상단 숫자 네 칸 — 확인된 값만 (2026-09-21) */
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px) clamp(24px,4vw,44px);align-content:center;}
.facts li{border-top:1px solid var(--line);padding-top:14px;}
.facts__n{display:block;font-size:var(--fs-700);font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;}
.facts__k{display:block;margin-top:4px;font-size:var(--fs-300);color:var(--muted);}
@media (max-width:640px){.facts{gap:16px 20px;}}

/* 홈 실적 · 인증 절 (2026-09-21) — 배경 사진이 들어오면 .proof--photo 를 더한다 */
.proof{background:var(--surface-2);padding-bottom:0;}   /* 마지막이 전폭 사진이라 아래 여백을 없애 푸터와 맞붙인다 */
/* 절 아래 전폭 사진 띠 — 배경으로 깔면 글자와 겹치고 사진이 과하게 잘린다 (2026-09-21) */
.band{margin:clamp(36px,4.5vw,60px) 0 0;}
.band img{display:block;width:100%;height:clamp(200px,26vw,400px);object-fit:cover;object-position:50% 62%;filter:saturate(.68);}
  .proof--photo .proof__head,.proof--photo .facts,.proof--photo .refs,.proof--photo .proof__more{max-width:none;}
}
.proof__head{max-width:760px;}
.facts--4{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(28px,3.5vw,44px);}
.refs{list-style:none;margin:clamp(28px,3.5vw,40px) 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line);}
.refs li{display:flex;flex-wrap:wrap;gap:6px 20px;padding:14px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-400);color:var(--ink-700);}
.refs__k{flex:none;min-width:150px;font-weight:700;color:var(--ink);}
.proof__more{margin-top:24px;}
@media (max-width:860px){.facts--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.refs__k{min-width:0;width:100%;}}

/* 공급 구조 아이콘 — 정면도 한 벌 (2026-09-21). 평면 클립아트 4장을 대신한다 */
.chain__ic{display:block;width:auto;height:clamp(66px,8vw,92px);overflow:visible;}
.chain__hub > .chain__ic{height:clamp(74px,9vw,104px);margin-inline:auto;}
.chain__ic .ic-body{fill:var(--lad-shell,#F4F7F5);stroke:var(--lad-stroke,#9FAEA6);stroke-width:1.2;stroke-linejoin:round;}
.chain__ic .ic-door{fill:#fff;stroke:var(--grey-300);stroke-width:1;}
.chain__ic .ic-panel{fill:#E4EAF0;stroke:var(--panel-line);stroke-width:1.1;stroke-linejoin:round;}
.chain__ic .ic-cell{fill:rgba(59,124,184,.16);stroke:var(--tray-line,#5A6E7D);stroke-width:1.1;}
.chain__ic .ic-term{fill:#fff;stroke:var(--tray-line,#5A6E7D);stroke-width:1;}
.chain__ic .ic-line{fill:none;stroke:var(--lad-stroke,#9FAEA6);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
.chain__ic .ic-hair{fill:none;stroke:var(--grey-300);stroke-width:1;stroke-linecap:round;}
.chain__ic .ic-hairfill{fill:#fff;stroke:var(--grey-300);stroke-width:1;}
.chain__ic .ic-skirt{stroke:var(--lad-skirt,#C4CEC8);stroke-width:3.6;stroke-linecap:round;}
.chain__ic .ic-fill{fill:#fff;stroke:var(--lad-stroke,#9FAEA6);stroke-width:1.1;}
.chain__ic .ic-ground{stroke:var(--line);stroke-width:1.2;stroke-linecap:round;}
.chain__ic .ic-blade{fill:none;stroke:var(--lad-stroke,#9FAEA6);stroke-width:1.6;stroke-linecap:round;}
.chain__ic .ic-term--p{stroke:#B03A31;}
.chain__pics{align-items:flex-end;}

/* 용량 후보 5종 — 한 줄에 다섯 (2026-09-22) */
.lu-row--5{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(10px,1.6vw,24px);flex-wrap:wrap;}
.lu-row--5 .lu-item{flex:1 1 0;min-width:112px;text-align:center;}
/* 좁은 화면 — 다섯이 2+2+1 로 흩어지면 마지막 칸만 커진다. 두 칸 격자로 고정 */
@media (max-width:640px){
  .lu-row--5{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;}
  .lu-row--5 .lu-item{min-width:0;}
}
.lu-row--5 .lu-item img{display:block;width:100%;height:auto;margin-inline:auto;}
/* 맺음말 링크 알림 — 흰 바탕이라 색을 달리한다 (2026-09-30) */
.req .copy__msg{display:block;flex:1 1 100%;margin-top:14px;color:var(--green-700);}
.req .copy__msg.is-bad{color:var(--error);}