/* =========================================================
   켐텍인터내셔날 — 전면 재설계 "공정 라인" (2026-10-06)
   색: 그래파이트 #16181D · 앰버 #C87A1E(유일한 강조) · 중성회색 · 화이트
       앰버는 250LF 물성표의 제품 외관(Amber liquid)에서 가져왔다.
   글꼴: Pretendard 하나 — 히어로 메인카피 서체로 전부 통일 (수치는 tabular-nums)
   짜임: 가운데 정렬 폐기 → 좌측 정렬 + 01~07 번호 레일
   고정 규칙: 기본 18px · 최소 16px · 좌우 10%
   ========================================================= */
:root {
  --char: #16181D;      /* 그래파이트 — 어두운 면 · 제목 */
  --char-2: #232830;
  --dark: #0E1013;
  --brown: #C87A1E;     /* 앰버 — 이 사이트의 유일한 강조색 */
  --brown-d: #A4620F;
  --brown-lt: #E8A94F;
  --cream: #EDEEF0;     /* 중성 밝은 회색 */
  --bg2: #F6F7F8;
  --line: #E3E5E8;
  --line-2: #C7CBD0;
  --ink: #121417;
  --tx: #2B3038;
  --tx-2: #5B636C;
  --tx-3: #868D95;
  --white: #FFFFFF;
  --wrap: none;
  --gut: 10%;
  --hdr: 104px;   /* 로고·메뉴가 상단에 붙지 않도록 */
  --font: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  --en: var(--font);    /* 히어로 메인카피와 같은 서체 하나로 통일 */
  --mono: var(--font);  /* 숫자 정렬은 tabular-nums 로 유지 */
  --shadow: 0 10px 30px rgba(0, 0, 0, .08);
  --measure: 70ch;      /* 읽는 글의 한 줄 폭 상한 */
}
.lang-cn { --font: "Pretendard Variable", Pretendard, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --en: var(--font); --mono: var(--font); }
.lang-jp { --font: "Pretendard Variable", Pretendard, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; --en: var(--font); --mono: var(--font); }

/* ---------- base ---------- */
body.ct { margin: 0; font-family: var(--font); font-size: 18px; line-height: 1.65; letter-spacing: -0.02em; color: var(--tx); background: #fff; -webkit-font-smoothing: antialiased; }
.ct *, .ct *::before, .ct *::after { box-sizing: border-box; }
.ct.lang-kr { word-break: keep-all; overflow-wrap: anywhere; }
.ct.lang-cn, .ct.lang-jp { line-break: strict; overflow-wrap: anywhere; }
.ct img { max-width: 100%; height: auto; display: block; }
.ct a { color: inherit; text-decoration: none; }
.ct h1, .ct h2, .ct h3, .ct h4 { margin: 0; line-height: 1.3; color: inherit; font-weight: 700; letter-spacing: -0.03em; }
.ct p { margin: 0 0 1em; }
.ct ul, .ct ol { margin: 0; padding: 0; list-style: none; }
.ct table { border-collapse: collapse; width: 100%; }
.ct button { font-family: inherit; }
.ct code { font-family: var(--mono); }
.ct :focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }
.ct-sr { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ct-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--char); color: #fff; padding: 10px 16px; }
.ct-skip:focus { left: 8px; }
.ct-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.ct-narrow { max-width: none; }
.ct-main { min-height: 50vh; padding-top: var(--hdr); }
.has-visual .ct-main { padding-top: 0; }
.ct-muted { color: var(--tx-3); font-size: max(1rem, .94em); }
.ct-mono { font-family: var(--mono); font-size: max(1rem, .9em); }
.ct-nw { white-space: nowrap; }
.ct-code { display: inline-block; font-family: var(--mono); font-weight: 600; font-size: 1rem; color: var(--brown-d); background: #E9EFF4; padding: 2px 8px; white-space: nowrap; }
.ct-code.is-lg { font-size: 1.14rem; padding: 4px 12px; }
.ct-h2 { font-size: clamp(1.92rem, 2.88vw, 2.52rem); color: var(--ink); }
.ct-h3 { font-size: clamp(1.5rem, 2.04vw, 1.8rem); color: var(--ink); margin-bottom: 20px !important; }
.ct-h4 { font-size: 1.32rem; color: var(--ink); margin: 40px 0 14px !important; }
.ct-eyebrow { font-family: var(--en); font-size: 16px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--brown); margin: 0 0 12px; }
.ct-eyebrow.is-light { color: var(--brown-lt); }
.ct-lead { font-size: 1.2rem; color: var(--tx-2); max-width: 760px; }
.ct-lead-lg { font-size: 1.272rem; color: var(--tx-2); max-width: 900px; margin-bottom: 40px; line-height: 1.8; }
.ct-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 1.104rem; color: var(--brown-d) !important; background: none; border: 0; padding: 0; cursor: pointer; }
.ct-link .ct-ico { width: 16px; height: 16px; transition: transform .2s; }
.ct-link:hover .ct-ico { transform: translateX(4px); }
.ct-ico { flex: none; }

/* ---------- buttons (각진 사각형) ---------- */
.ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 28px; font-size: 1.14rem; font-weight: 500; line-height: 1.2; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; letter-spacing: -0.02em; }
.ct-btn .ct-ico { width: 17px; height: 17px; }
.ct-btn-a, .ct-btn-teal { background: var(--brown); border-color: var(--brown); color: #fff !important; }
.ct-btn-a:hover, .ct-btn-teal:hover { background: var(--brown-d); border-color: var(--brown-d); }
.ct-btn-b { background: var(--brown-d); border-color: var(--brown-d); color: #fff !important; }
.ct-btn-b:hover { background: var(--char); border-color: var(--char); }
.ct-btn-line { background: #fff; border-color: var(--line-2); color: var(--tx) !important; }
.ct-btn-line:hover { border-color: var(--char); color: var(--ink) !important; }
.ct-btn-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff !important; }
.ct-btn-ghost:hover { background: #fff; color: var(--ink) !important; }
.ct-btn-sm { min-height: 42px; padding: 0 20px; font-size: 1.08rem; }
.ct-btn-xs { min-height: 32px; padding: 0 12px; font-size: 1rem; }
.ct-btn-xs .ct-ico { width: 14px; height: 14px; }
.ct-btn-block { width: 100%; }
.ct-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- header ---------- */
.ct-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--hdr); transition: background .3s, box-shadow .3s; background: rgba(255,255,255,.95); box-shadow: 1px 4px 4px 1px rgba(0,0,0,.05); }
.has-visual .ct-header { background: transparent; box-shadow: none; }
.has-visual .ct-header.is-scrolled, .ct-header.is-scrolled { background: rgba(255,255,255,.9); box-shadow: 1px 4px 4px 1px rgba(0,0,0,.05); backdrop-filter: blur(6px); }
.ct-header-in { height: 100%; display: flex; align-items: center; padding: 0 var(--gut); max-width: none; margin: 0; }
.ct-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.ct-brand img { width: 46px; height: auto; }
.ct-brand-tx { display: flex; flex-direction: column; line-height: 1.1; }
.ct-brand-tx small { font-family: var(--en); font-size: 16px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--tx-3); }
.ct-brand-tx strong { font-family: var(--en); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.has-visual .ct-header:not(.is-scrolled) .ct-brand-tx strong { color: #fff; }
.has-visual .ct-header:not(.is-scrolled) .ct-brand-tx small { color: rgba(255,255,255,.7); }
.ct-gnb { margin: 0 auto; height: 100%; }
.ct-gnb > ul { display: flex; height: 100%; }
.ct-gnb > ul > li { position: relative; height: 100%; }
.ct-gnb > ul > li > a { display: flex; align-items: center; height: 100%; padding: 0 clamp(18px, 3vw, 46px); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); transition: color .2s; }
.has-visual .ct-header:not(.is-scrolled) .ct-gnb > ul > li > a { color: #fff; }
.ct-gnb > ul > li:hover > a, .ct-gnb > ul > li.is-on > a { color: var(--brown) !important; }
.ct-drop { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px); min-width: 180px; padding: 14px 0; background: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: .2s; text-align: center; border-top: 2px solid var(--brown); }
.ct-gnb > ul > li:hover .ct-drop, .ct-gnb > ul > li:focus-within .ct-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ct-drop a { display: block; padding: 8px 20px; font-size: 17px; color: var(--tx-2); white-space: nowrap; }
.ct-drop a:hover { color: var(--brown-d); background: var(--cream); }
.ct-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.ct-lang { position: relative; }
.ct-lang-btn { height: 34px; padding: 0 12px; border: 1px solid var(--line-2); background: transparent; font: 600 16px var(--en); letter-spacing: .08em; color: var(--ink); cursor: pointer; }
.has-visual .ct-header:not(.is-scrolled) .ct-lang-btn { color: #fff; border-color: rgba(255,255,255,.45); }
.ct-lang-list { position: absolute; right: 0; top: 44px; background: #fff; box-shadow: var(--shadow); min-width: 140px; padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s; }
.ct-lang.is-open .ct-lang-list, .ct-lang:focus-within .ct-lang-list { opacity: 1; visibility: visible; transform: none; }
.ct-lang-list a { display: block; padding: 8px 18px; font-size: 17px; color: var(--tx-2); }
.ct-lang-list a:hover, .ct-lang-list a.is-on { color: var(--brown-d); background: var(--cream); }
.ct-burger { width: 40px; height: 40px; border: 0; background: none; padding: 9px 6px; cursor: pointer; }
.ct-burger span { display: block; height: 2px; background: var(--ink); margin: 5px 0; transition: .25s; }
.ct-burger span:nth-child(2) { width: 70%; margin-left: auto; }
.has-visual .ct-header:not(.is-scrolled) .ct-burger span { background: #fff; }

/* 전체 메뉴 패널 */
.ct-drawer { position: fixed; inset: 0; z-index: 300; }
.ct-drawer[hidden] { display: none; }
.ct-drawer-dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); animation: ct-fade .25s; }
.ct-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--char); color: #fff; padding: 30px 40px 40px; overflow-y: auto; animation: ct-slide .3s ease; display: flex; flex-direction: column; gap: 28px; }
@keyframes ct-fade { from { opacity: 0; } }
@keyframes ct-slide { from { transform: translateX(100%); } }
.ct-drawer-top { display: flex; align-items: center; justify-content: space-between; }
.ct-drawer-top strong { font-family: var(--en); letter-spacing: .3em; font-size: 16px; color: var(--brown-lt); }
.ct-drawer-x { position: relative; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; }
.ct-drawer-x span { position: absolute; left: 6px; right: 6px; top: 17px; height: 2px; background: #fff; transform: rotate(45deg); }
.ct-drawer-x span + span { transform: rotate(-45deg); }
.ct-drawer-g { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.ct-drawer-g p { margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
.ct-drawer-g p span { font-family: var(--en); font-size: 1.62rem; font-weight: 700; letter-spacing: .02em; }
.ct-drawer-g p em { font-style: normal; font-size: 1.02rem; color: rgba(255,255,255,.5); }
.ct-drawer-g ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.ct-drawer-g a { display: block; padding: 6px 0; font-size: 1.14rem; color: rgba(255,255,255,.75); }
.ct-drawer-g a:hover { color: var(--brown-lt); }
.ct-drawer-lang { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-drawer-lang a { padding: 6px 14px; border: 1px solid rgba(255,255,255,.25); font-size: 1.02rem; color: rgba(255,255,255,.8); }
.ct-drawer-lang a.is-on { background: var(--brown); border-color: var(--brown); color: #fff; }
.ct-drawer-cs { margin-top: auto; }
.ct-drawer-cs p { font-family: var(--en); font-size: 16px; letter-spacing: .25em; color: var(--brown-lt); margin: 0 0 6px; }
.ct-drawer-cs a { display: block; font-family: var(--en); font-size: 2.04rem; font-weight: 600; }
.ct-drawer-cs span { font-size: 1.02rem; color: rgba(255,255,255,.6); }

/* ---------- sub visual + snb ---------- */
.ct-sub { position: relative; height: clamp(320px, 38vw, 460px); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; background: var(--char); }
.ct-sub-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ct-sub-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,22,40,.72), rgba(12,22,40,.6)); }
.ct-sub-in { position: relative; padding-top: calc(var(--hdr) / 2); }
.ct-sub-en { font-family: var(--en); font-size: 16px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.75); margin: 0 0 14px; }
.ct-sub h1, .ct-sub .ct-sub-title { font-size: clamp(2.4rem, 4.8vw, 3.6rem); font-weight: 700; letter-spacing: -0.04em; margin: 0 0 14px; line-height: 1.25; }
.ct-sub .ct-sub-lead { max-width: 720px; margin: 0 auto; font-size: 1.2rem; color: rgba(255,255,255,.82); }
.ct-snb { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.ct-snb-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; }
.ct-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; color: var(--tx-3); }
.ct-crumbs .ct-ico { width: 16px; height: 16px; }
.ct-crumbs a:hover { color: var(--brown-d); }
.ct-tabs { display: flex; overflow-x: auto; scrollbar-width: none; height: 64px; }
.ct-tabs::-webkit-scrollbar { display: none; }
.ct-tabs a { display: flex; align-items: center; height: 100%; padding: 0 22px; font-size: 18px; color: var(--tx-2); white-space: nowrap; border-bottom: 2px solid transparent; }
.ct-tabs a:hover { color: var(--ink); }
.ct-tabs a.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--brown); }

/* ---------- sections ---------- */
.ct-sec { padding: clamp(70px, 8vw, 110px) 0; }
.ct-sec-tight { padding: clamp(50px, 6vw, 80px) 0; }
.ct-sec-gray { background: var(--bg2); }
.ct-shead { margin-bottom: 40px; }
.ct-shead h2 { font-size: clamp(2.16rem, 3.6vw, 3.12rem); color: var(--ink); margin-bottom: 12px; }
.ct-shead.is-center { text-align: center; }
.ct-shead.is-center .ct-lead { margin: 0 auto; }
.ct-shead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.ct-shead-row .ct-shead { margin-bottom: 30px; }
.ct-empty { padding: 36px; text-align: center; color: var(--tx-3); background: #fff; border: 1px solid var(--line); }
.ct-badge { display: inline-block; font-size: 16px; font-weight: 600; padding: 3px 10px; background: #E9EFF4; color: var(--brown-d); white-space: nowrap; }

/* =========================================================
   HOME
   ========================================================= */
.hm-head { text-align: center; margin-bottom: 50px; }
.hm-head h2 { font-family: var(--en); font-size: clamp(2.52rem, 4.08vw, 3.6rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 14px; }
.hm-head p { color: var(--tx-2); margin: 0; }
.hm-head.is-light h2 { color: #fff; }
.hm-head.is-light p { color: rgba(255,255,255,.7); }

/* 01 visual */
.hm-visual { position: relative; height: 100vh; min-height: 680px; max-height: 980px; color: #fff; background: var(--dark); }
.hm-slides, .hm-slide { position: absolute; inset: 0; }
.hm-slides { overflow: hidden; }
.hm-slide { opacity: 0; transition: opacity 1.2s ease; }
.hm-slide.is-on { opacity: 1; z-index: 1; }
.hm-slide img { width: 100%; height: 100%; object-fit: cover; }
.hm-slide .hm-slide-tx { opacity: 0; transition: opacity .3s ease; }
.hm-slide.is-on .hm-slide-tx { opacity: 1; transition: opacity .6s ease .6s; }
.hm-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,22,40,.72) 0%, rgba(12,22,40,.4) 55%, rgba(12,22,40,.15) 100%); }
.hm-slide-tx { position: absolute; left: 0; right: 0; top: 38%; z-index: 2; }
.hm-title { font-family: var(--en); font-size: clamp(2.64rem, 4.68vw, 4.2rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em; margin: 0; color: #fff; }
.hm-sub { margin: 20px 0 0; font-size: clamp(1.2rem, 1.74vw, 1.56rem); font-weight: 500; letter-spacing: -0.04em; color: rgba(255,255,255,.92); max-width: 900px; }
.hm-dots { position: absolute; left: 0; right: 0; bottom: 100px; z-index: 3; display: flex; gap: 8px; }
.hm-dots button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: transparent; padding: 0; cursor: pointer; }
.hm-dots button.is-on { background: #fff; }


.hm-pc-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #EEF2F6; }
.hm-pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.hm-pc-img.is-mark { background: linear-gradient(145deg, var(--char), #22375A); }
.ct-pc-mark { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--brown-lt); }
.ct-pc-mark .ct-ico { width: 54px; height: 54px; stroke-width: 1.3; }
.ct-pc-mark code { font-size: clamp(1.2rem, 1.5vw, 1.6rem); font-weight: 600; color: #fff; letter-spacing: .02em; text-align: center; line-height: 1.35; padding: 0 20px; max-width: 100%; }




/* 07 comm */
.hm-comm { padding: 100px 0; background-image: linear-gradient(0deg, #fff 50%, var(--bg2) 100%); }
.hm-comm-in { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: 60px; }
.hm-comm-t { font-family: var(--en); font-size: 1.74rem; font-weight: 700; color: var(--ink); margin: 0 0 26px !important; letter-spacing: -0.02em; }
.hm-news-tabs { display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--line-2); margin-bottom: 10px; }
.hm-news-tabs button { position: relative; border: 0; background: none; padding: 6px 2px 10px; font-size: 17px; color: var(--tx-3); cursor: pointer; }
.hm-news-tabs button.is-on { color: var(--brown-d); font-weight: 700; }
.hm-news-tabs button.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brown-d); }
.hm-news-more { margin-left: auto; font-size: 29px; font-weight: 300; line-height: 1; color: var(--tx-2) !important; padding-bottom: 8px; }
.hm-news-list li a { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.hm-news-list li.is-empty { padding: 26px 0; color: var(--tx-3); font-size: 17px; }
.hm-date { flex: none; width: 70px; height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); }
.hm-date b { font-family: var(--en); font-size: 1.62rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.hm-date i { font-style: normal; font-family: var(--en); font-size: 16px; color: var(--tx-3); }
.hm-news-s { font-size: 17px; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-news-list a:hover .hm-news-s { color: var(--brown-d); }
.hm-cs-t { font-size: 1.32rem; font-weight: 700; color: #000; margin: 0 0 14px; }
.hm-cs-tel { margin: 0 0 14px; }
.hm-cs-tel a { display: block; font-family: var(--en); font-size: clamp(2.16rem, 2.88vw, 2.64rem); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; line-height: 1.25; }
.hm-cs-tel span { font-family: var(--en); font-size: 1.2rem; color: var(--tx-2); }
.hm-cs-info { font-size: 16px; color: var(--tx-2); line-height: 1.8; }
.hm-cs-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 26px; }
.hm-cs-btns .ct-btn { padding: 0 10px; min-height: 46px; font-size: 1.08rem; }
.hm-map { aspect-ratio: 4 / 3; background: var(--bg2); border: 1px solid var(--line); }
.hm-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================
   공통 컴포넌트 (서브페이지)
   ========================================================= */
.ct-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ct-cat { position: relative; display: flex; flex-direction: column; padding: 38px 34px 30px; background: #fff; border: 1px solid var(--line); transition: box-shadow .25s, border-color .25s; }
.ct-cat:hover { border-color: var(--brown); box-shadow: var(--shadow); }
.ct-cat-no { position: absolute; top: 26px; right: 30px; font-family: var(--en); font-size: 2.88rem; font-weight: 700; color: var(--bg2); line-height: 1; }
.ct-cat-ico { width: 54px; height: 54px; display: grid; place-items: center; background: var(--char); color: #fff; margin-bottom: 22px; }
.ct-cat-ico .ct-ico { width: 26px; height: 26px; }
.ct-cat h3 { font-size: 1.5rem; color: var(--ink); margin-bottom: 10px; }
.ct-cat p { color: var(--tx-2); font-size: 1.14rem; flex: 1; }
.ct-cat-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--en); font-size: 16px; font-weight: 600; color: var(--brown-d); }
.ct-cats.is-compact { margin-top: 56px; }

.ct-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ct-pgrid > * { min-width: 0; }
.ct-pcard h3 { overflow-wrap: anywhere; }
.ct-pgrid.is-4 { grid-template-columns: repeat(4, 1fr); }
.ct-pcard { background: #fff; border: 1px solid var(--line); transition: box-shadow .25s, border-color .25s; }
.ct-pcard[hidden] { display: none; }
.ct-pcard:hover { border-color: var(--brown); box-shadow: var(--shadow); }
.ct-pcard-link { display: flex; flex-direction: column; height: 100%; padding: 28px 26px 24px; }
.ct-pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.ct-pcard-ico { width: 46px; height: 46px; display: grid; place-items: center; background: var(--bg2); color: var(--char); flex: none; }
.ct-pcard h3 { font-family: var(--en); font-size: 1.344rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.ct-pcard p { font-size: 1.104rem; color: var(--tx-2); flex: 1; margin-bottom: 16px; }
.ct-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ct-tags li { font-size: 16px; padding: 3px 9px; background: #E9EFF4; color: var(--brown-d); }
.ct-tags li.is-mat { background: var(--bg2); color: var(--tx-2); }
.ct-tags.is-light li { background: rgba(255,255,255,.12); color: #fff; }
.ct-tags.is-light li a { color: inherit; }
.ct-tags.is-light li.is-mat { background: rgba(255,255,255,.06); color: rgba(255,255,255,.75); }
.ct-pcard-more { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--brown-d); }
.ct-pcard-more .ct-ico { width: 15px; height: 15px; transition: transform .2s; }
.ct-pcard:hover .ct-pcard-more .ct-ico { transform: translateX(4px); }

.ct-filter { background: var(--cream); border: 1px solid #DCE5EC; padding: 26px 30px; margin-bottom: 50px; }
.ct-filter-search { position: relative; margin-bottom: 16px; }
.ct-filter-search .ct-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--tx-3); }
.ct-filter-search input { width: 100%; height: 52px; border: 1px solid var(--line-2); padding: 0 16px 0 46px; font: inherit; font-size: 18px; background: #fff; }
.ct-filter-search input:focus { outline: 0; border-color: var(--brown); }
.ct-filter-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: start; padding: 8px 0; }
.ct-filter-label { font-weight: 700; font-size: 17px; color: var(--ink); padding-top: 8px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chip { height: 36px; padding: 0 14px; border: 1px solid var(--line-2); background: #fff; font-size: 16px; color: var(--tx-2); cursor: pointer; transition: .15s; }
.ct-chip:hover { border-color: var(--brown); color: var(--brown-d); }
.ct-chip.is-on { background: var(--char); color: #fff; border-color: var(--char); }
.ct-filter-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; margin-top: 8px; border-top: 1px solid #DCE5EC; }
.ct-filter-foot p { margin: 0; color: var(--tx-2); }
.ct-filter-foot strong { font-family: var(--en); color: var(--brown-d); font-size: 1.38rem; }
.ct-pgroup { margin-bottom: 60px; }
.ct-pgroup[hidden] { display: none; }
.ct-pgroup-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.ct-pgroup-head .ct-h3 { margin: 0 !important; }
.ct-reag-band { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 28px 32px; background: var(--char); color: #fff; }
.ct-reag-band .ct-pcard-ico { background: rgba(255,255,255,.08); color: var(--brown-lt); }
.ct-reag-band strong { display: block; font-size: 1.44rem; }
.ct-reag-band small { color: rgba(255,255,255,.7); font-size: 1.104rem; }
.ct-reag-band:hover { background: var(--brown-d); }

/* product detail */
.ct-phero { background: var(--char); color: #fff; }
.ct-phero > .ct-wrap { padding-top: 50px; padding-bottom: 60px; }
.ct-phero .ct-crumbs { color: rgba(255,255,255,.55); margin-bottom: 30px; }
.ct-phero .ct-crumbs a:hover { color: #fff; }
.ct-phero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.ct-phero .ct-eyebrow { font-family: var(--font); letter-spacing: .02em; text-transform: none; font-size: 1.104rem; font-weight: 500; color: var(--brown-lt); }
.ct-phero h1 { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; font-family: var(--en); font-size: clamp(2.4rem, 4.56vw, 3.72rem); letter-spacing: -0.03em; margin-bottom: 16px; }
.ct-phero h1 .ct-code { background: var(--brown); color: #fff; }
.ct-phero-lead { font-size: 1.296rem; color: rgba(255,255,255,.82); max-width: 640px; }
.ct-phero .ct-tags { margin: 22px 0 30px; }
.ct-flag { display: inline-block; margin-left: 8px; padding: 2px 10px; background: var(--brown); color: #fff; font-size: 16px; vertical-align: middle; }
.ct-phero-img { margin: 0; background: #fff; padding: 24px; }
.ct-phero-img img { margin: 0 auto; max-height: 340px; width: auto; }
.ct-phero-mark { aspect-ratio: 4 / 3; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,0)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--brown-lt); }
.ct-phero-mark .ct-ico { width: 84px; height: 84px; stroke-width: 1.2; }
.ct-phero-mark code { font-size: clamp(1.92rem, 3.6vw, 2.88rem); font-weight: 600; color: #fff; }
.ct-pdetail { display: grid; grid-template-columns: 220px 1fr; gap: 60px; padding-top: 70px; padding-bottom: 90px; }
.ct-pdetail > *, .hm-comm-in > *, .ct-quote > *, .ct-loc > *, .ct-rg-2col > *, .ct-record > *, .ct-greet > *, .ct-tl-year > *, .ct-phero-grid > * { min-width: 0; }
.ct-toc { position: sticky; top: calc(var(--hdr) + 30px); align-self: start; }
.ct-toc ol { border-left: 1px solid var(--line-2); margin-bottom: 22px; }
.ct-toc a { display: flex; gap: 10px; padding: 9px 0 9px 18px; margin-left: -1px; border-left: 2px solid transparent; color: var(--tx-3); font-size: 17px; }
.ct-toc a span { font-family: var(--en); font-size: 16px; color: var(--line-2); padding-top: 2px; }
.ct-toc a:hover, .ct-toc a.is-on { color: var(--ink); border-left-color: var(--brown); font-weight: 600; }
.ct-toc a.is-on span { color: var(--brown); }
.ct-psec { padding: 0 0 52px; margin-bottom: 52px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hdr) + 30px); }
.ct-psec:last-child { border-bottom: 0; }
.ct-psec > h2 { display: flex; align-items: baseline; gap: 14px; font-size: 1.92rem; color: var(--ink); margin-bottom: 24px; }
.ct-psec > h2 span { font-family: var(--en); font-size: 1.08rem; color: var(--brown); font-weight: 700; }
.ct-psec > p { font-size: 1.224rem; color: var(--tx-2); line-height: 1.85; }
.ct-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ct-feats li { padding: 24px 26px; background: var(--bg2); }
.ct-feat-no { font-family: var(--en); font-size: 16px; font-weight: 700; color: var(--brown); display: block; margin-bottom: 6px; }
.ct-feats strong { display: block; font-size: 1.248rem; color: var(--ink); margin-bottom: 6px; }
.ct-feats p { margin: 0; font-size: 1.116rem; color: var(--tx-2); }
.ct-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ct-apps li, .ct-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.ct-apps li { padding: 14px 18px; border: 1px solid var(--line); }
.ct-apps .ct-ico, .ct-checklist .ct-ico { width: 18px; height: 18px; color: var(--brown); margin-top: 4px; }
.ct-apps.is-after-flow { margin-top: 20px; }
.ct-checklist { display: grid; gap: 8px; margin: 14px 0 18px; }
.ct-kv { border-top: 2px solid var(--ink); }
.ct-kv th, .ct-kv td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 1.14rem; }
.ct-kv th { width: 32%; background: #F3F6F9; font-weight: 600; color: var(--ink); }
.ct-kv td { color: var(--tx-2); }
.ct-kv.is-lg th { width: 190px; }
.ct-pending { display: flex; gap: 10px; align-items: center; padding: 20px 22px; background: #F7F9FB; border: 1px dashed var(--line-2); color: var(--tx-3); margin: 0; font-size: 1.116rem; }
.ct-pending .ct-ico { color: var(--brown); }
.ct-variant { margin-top: 30px; padding: 28px; border: 1px solid var(--line); }
.ct-variant-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.ct-variant-head strong { color: var(--ink); font-size: 1.272rem; }
.ct-variant > p { color: var(--tx-2); }
.ct-table-wrap { position: relative; overflow-x: auto; border-top: 2px solid var(--ink); margin-bottom: 14px; }
.ct-table th, .ct-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: 1.128rem; }
.ct-table thead th { background: #F3F6F9; color: var(--ink); font-weight: 700; white-space: nowrap; }
.ct-table thead th.is-hl { background: var(--brown); color: #fff; }
.ct-table tbody th { font-weight: 600; color: var(--ink); }
.ct-table td.is-hl { color: var(--brown-d); font-weight: 600; background: #EEF5F7; }
.ct-strengths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.ct-strengths li { padding: 22px; background: var(--char); color: #fff; display: flex; flex-direction: column; gap: 6px; }
.ct-strengths .ct-ico { color: var(--brown-lt); }
.ct-strengths span { font-size: 1.08rem; color: rgba(255,255,255,.75); }
.ct-sem { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.ct-sem figure { margin: 0; background: #111; padding: 14px; text-align: center; }
.ct-sem img { margin: 0 auto; width: 100%; max-width: 360px; }
.ct-sem figcaption { color: rgba(255,255,255,.8); font-size: 1.02rem; margin-top: 10px; }
.ct-sem-arrow { color: var(--brown); }
.ct-sem-arrow .ct-ico { width: 30px; height: 30px; }
.ct-diagram { margin: 0; padding: 30px; background: var(--char); color: #fff; }
.ct-diagram figcaption strong { display: block; font-size: 1.38rem; margin-bottom: 6px; }
.ct-diagram figcaption span { color: rgba(255,255,255,.75); font-size: 1.116rem; }
.ct-diagram-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 20px; }
.ct-diagram-tags li { font-family: var(--en); font-size: 16px; padding: 4px 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.ct-diagram > figcaption + .ct-diagram-flow { margin-top: 20px; }
.ct-diagram-flow { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 8px; }
.ct-diagram-flow li { position: relative; padding: 16px 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 6px; }
.ct-diagram-flow li:not(:last-child)::after { content: ""; position: absolute; right: -8px; top: 26px; width: 8px; height: 1px; background: rgba(255,255,255,.35); }
.ct-diagram-flow li.is-key { border-color: var(--brown); background: rgba(14,122,139,.14); }
.ct-diagram-flow li.is-hl { background: var(--brown); border-color: #5FB3BF; color: #fff; box-shadow: 0 10px 30px rgba(14,122,139,.35); transform: translateY(-6px); }
.ct-diagram-flow li.is-hl .ct-diagram-prod { color: #fff; font-weight: 700; }
.ct-diagram-no { font-family: var(--en); font-size: 16px; opacity: .7; }
.ct-diagram-flow strong { font-family: var(--en); font-size: 16px; font-weight: 700; letter-spacing: .01em; line-height: 1.35; }
.ct-diagram-flow .ct-diagram-desc { font-size: 16px; line-height: 1.5; opacity: .88; }
.ct-diagram-prod { font-style: normal; font-family: var(--en); font-size: 16px; color: var(--brown-lt); margin-top: auto; }
.ct-diagram-aside { margin-top: 12px; padding: 12px 14px; border: 1px dashed rgba(255,255,255,.25); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 1.02rem; }
.ct-diagram-aside strong { font-family: var(--en); font-size: 16px; }
.ct-diagram-aside.is-hl { background: var(--brown); border: 1px solid #5FB3BF; color: #fff; }
.ct-diagram-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 1.056rem; color: var(--brown-lt); }
.ct-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ct-steps li { padding: 16px; border: 1px solid var(--line); font-weight: 600; color: var(--ink); font-size: 1.104rem; }
.ct-steps li span { display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--brown); color: #fff; font: 600 16px var(--en); margin-right: 8px; }
.ct-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-types div { padding: 24px; border: 1px solid var(--line); border-top: 3px solid var(--brown); }
.ct-types strong { font-family: var(--en); color: var(--ink); }
.ct-types p { margin: 8px 0 0; color: var(--tx-2); font-size: 1.116rem; }
.ct-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.ct-gallery figure { margin: 0; border: 1px solid var(--line); background: #fff; }
.ct-gallery img { width: 100%; height: 220px; object-fit: contain; background: #F3F6F9; padding: 12px; }
.ct-gallery figcaption { padding: 10px 14px; font-size: 1.02rem; color: var(--tx-2); border-top: 1px solid var(--line); }
.ct-psec-inq { background: var(--cream); padding: 36px !important; border: 0 !important; }

/* reagents */
.ct-rg .ct-chips { margin-bottom: 16px; }
.ct-rg-table td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.ct-rg-table tbody tr:hover { background: var(--cream); }
.ct-rg-table tbody tr[hidden] { display: none; }
.ct-rg-table code { color: var(--ink); font-weight: 600; }
.ct-rg-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.ct-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ct-scope li { display: flex; gap: 12px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--line); }
.ct-scope li span { font-family: var(--en); font-size: 16px; font-weight: 700; color: var(--brown); }
.ct-imports { display: grid; gap: 8px; margin-top: 16px; }
.ct-imports li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; background: #fff; border-left: 3px solid var(--brown); }
.ct-imports strong { font-family: var(--en); font-size: 1.14rem; color: var(--ink); }
.ct-imports span { color: var(--tx-3); font-size: 1.08rem; }
.ct-imports li.is-etc { border-left-color: var(--line-2); }
.ct-imports li.is-etc strong { font-family: var(--font); font-weight: 400; color: var(--tx-2); }

/* forms */
.ct-form { display: grid; gap: 18px; }
.ct-fs { border: 0; margin: 0; padding: 0; }
.ct-fs legend { font-weight: 700; color: var(--ink); font-size: 1.116rem; margin-bottom: 10px; padding: 0; }
.ct-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ct-seg-i input { position: absolute; opacity: 0; pointer-events: none; }
.ct-seg-i span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 50px; padding: 8px 10px; border: 1px solid var(--line-2); font-size: 1.08rem; color: var(--tx-2); cursor: pointer; transition: .15s; line-height: 1.3; background: #fff; }
.ct-seg-i input:checked + span { border-color: var(--char); background: var(--char); color: #fff; }
.ct-seg-i input:focus-visible + span { outline: 2px solid var(--brown); outline-offset: 2px; }
.ct-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field { display: flex; flex-direction: column; gap: 6px; }
.ct-field > span { font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.ct-field em { font-style: normal; font-size: 1rem; color: #B45309; margin-left: 4px; font-weight: 600; }
.ct-field input, .ct-field select, .ct-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-2); font: inherit; font-size: 1.176rem; color: var(--tx); background: #fff; }
.ct-field textarea { min-height: 150px; resize: vertical; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: 0; border-color: var(--brown); }
.ct-field input.is-invalid { border-color: #DC2626; }
.ct-checks { display: flex; gap: 20px; }
.ct-checks label, .ct-agree label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ct-checks input, .ct-agree input { width: 18px; height: 18px; accent-color: var(--brown-d); }
.ct-agree { padding: 16px 18px; background: var(--bg2); }
.ct-agree p { margin: 6px 0 0 26px; font-size: 1rem; color: var(--tx-3); }
.ct-agree a { color: var(--brown-d); text-decoration: underline; }
.ct-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ct-form-foot p { margin: 0; }
.ct-cap-row { display: flex; align-items: center; gap: 12px; }
.ct-cap-q { font-family: var(--en); font-size: 1.32rem; color: var(--ink); white-space: nowrap; padding: 0 16px; height: 50px; display: inline-flex; align-items: center; background: var(--bg2); }
.ct-cap-row input { max-width: 120px; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.js .ct-when { display: none; }
.js .ct-when.is-on { display: block; }
.js .ct-when.ct-grid2.is-on { display: grid; }
.ct-alert { display: flex; gap: 10px; align-items: center; padding: 14px 18px; font-weight: 600; }
.ct-alert.is-ok { background: #F1F7EF; color: #3F6212; border: 1px solid #CFE3C3; }
.ct-alert.is-err { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.ct-quote { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }
.ct-quote-form { background: #fff; border: 1px solid var(--line); padding: 36px; }
.ct-quote-side { position: sticky; top: calc(var(--hdr) + 30px); }
.ct-quote-side .ct-dl > div { grid-template-columns: 80px 1fr; }

/* contact · map */
.ct-contact-card { background: var(--cream); padding: 32px; border: 1px solid #DCE5EC; }
.ct-dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid #D5DFE8; }
.ct-dl dt { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); font-size: 1.104rem; }
.ct-dl dt .ct-ico { width: 18px; height: 18px; color: var(--brown); }
.ct-dl dd { margin: 0; color: var(--tx-2); font-size: 1.128rem; }
.ct-dl dd a:hover { color: var(--brown-d); }
.ct-map { background: var(--bg2); aspect-ratio: 16 / 10; }
.ct-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.ct-map.is-lg { aspect-ratio: auto; min-height: 480px; }
.ct-map.is-lg iframe { min-height: 480px; }
.ct-loc { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: stretch; }
.ct-maplinks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.ct-maplinks .ct-ico { width: 13px; height: 13px; }

/* company */
.ct-greet { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: start; }
.ct-greet-side { position: sticky; top: calc(var(--hdr) + 40px); padding: 40px 32px; background: var(--cream); text-align: center; }
.ct-greet-side img { width: 120px; margin: 0 auto 18px; }
.ct-greet-body h2 { color: var(--ink); margin-bottom: 30px; }
.ct-greet-body p { font-size: 1.26rem; line-height: 1.95; color: var(--tx-2); }
.ct-tl-year { display: grid; grid-template-columns: 200px 1fr; gap: 36px; padding: 40px 0; border-top: 1px solid var(--line); }
.ct-tl-year h2 { font-family: var(--en); font-size: 3.12rem; font-weight: 700; color: var(--ink); line-height: 1; position: sticky; top: calc(var(--hdr) + 30px); align-self: start; }
.ct-tl-year ul { display: grid; gap: 12px; }
.ct-tl-year li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; font-size: 1.2rem; color: var(--tx-2); }
.ct-tl-year li.is-key { color: var(--ink); font-weight: 600; }
.ct-tl-m { font-family: var(--en); font-size: 16px; font-weight: 600; text-align: center; padding: 3px 0; background: var(--bg2); color: var(--tx-2); height: fit-content; margin-top: 2px; }
.ct-tl-year li.is-key .ct-tl-m { background: var(--brown); color: #fff; }
.ct-certs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 70px; }
.ct-cert { display: grid; grid-template-columns: 180px 1fr; gap: 26px; padding: 26px; border: 1px solid var(--line); }
.ct-cert-img { display: block; border: 1px solid var(--line); transition: box-shadow .2s; }
.ct-cert-img:hover { box-shadow: var(--shadow); }
.ct-cert h3 { font-family: var(--en); color: var(--ink); font-size: 1.44rem; margin-bottom: 4px; }
.ct-cert .ct-kv th { width: 38%; font-size: 1.008rem; padding: 10px 12px; }
.ct-cert .ct-kv td { font-size: 1.02rem; padding: 10px 12px; }
.ct-award { display: grid; grid-template-columns: 440px 1fr; gap: 40px; align-items: center; padding: 30px; background: var(--char); color: #fff; }
.ct-award h3 { font-size: 1.8rem; margin-bottom: 14px; }
.ct-award p { color: rgba(255,255,255,.8); }
.ct-award .ct-eyebrow { color: var(--brown-lt); }
.ct-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 70px; }
.ct-logos > * { min-width: 0; }
.ct-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 170px; background: #fff; border: 1px solid var(--line); padding: 20px; transition: border-color .2s; }
.ct-logo:hover { border-color: var(--brown); }
.ct-logo img { max-width: min(180px, 100%); max-height: 64px; width: auto; object-fit: contain; }
.ct-logo-word { font-family: var(--en); font-weight: 800; font-size: 1.68rem; color: var(--char); text-align: center; }
.ct-logo-name { font-size: 1rem; color: var(--tx-3); }
.ct-record { display: grid; grid-template-columns: 280px 1fr; gap: 50px; padding-top: 50px; border-top: 1px solid var(--line); }
.ct-record li { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ct-record time { color: var(--brown-d); font-weight: 600; }
.ct-ov { margin-bottom: 8px; }

/* downloads · news list · legal */
.ct-news-list li a { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ct-news-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-news-list time { font-family: var(--en); font-size: 16px; color: var(--tx-3); }
.ct-prose h2 { font-size: 1.344rem; color: var(--ink); margin: 34px 0 10px; }
.ct-prose p { color: var(--tx-2); line-height: 1.85; }
.ct-credits { display: grid; gap: 14px; }
.ct-credits li { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--line); }
.ct-credits strong { display: block; color: var(--ink); }
.ct-credits span { font-size: 1.08rem; color: var(--tx-2); }
.ct-credits a { color: var(--brown-d); text-decoration: underline; }
.ct-404 { text-align: center; }
.ct-404 .ct-code { font-size: 3.6rem; margin-bottom: 20px; }
.ct-404 h1 { margin-bottom: 30px; }

/* ---------- footer ---------- */
.ct-footer { background: var(--dark); color: #9AA6B8; padding: 44px 0 50px; font-size: 16px; }
.ct-foot-menu { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 22px; }
.ct-foot-menu a { color: #fff; font-size: 16px; }
.ct-foot-menu a:hover { color: var(--brown-lt); }
.ct-foot-info { font-style: normal; display: flex; flex-wrap: wrap; gap: 4px 18px; line-height: 1.8; }
.ct-foot-info a:hover { color: #fff; }
.ct-copy { margin: 14px 0 0; color: #6F7C90; font-family: var(--en); font-size: 16px; }
.ct-float { position: fixed; right: 20px; bottom: 20px; z-index: 150; display: flex; flex-direction: column; gap: 8px; }
.ct-float a { width: 50px; height: 50px; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: background .2s, opacity .3s, transform .3s; }
.ct-float-q { background: var(--brown); color: #fff !important; }
.ct-float-q:hover { background: var(--brown-d); }
.ct-float-top { background: var(--char); color: #fff !important; }
.js .ct-float-top { opacity: 0; transform: translateY(10px); pointer-events: none; }
.js .ct-float.is-show .ct-float-top { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- board area ---------- */
.ct-board-area { padding: 60px 0 100px; }
.ct-board-area .board-page { max-width: var(--wrap); padding-left: var(--gut); padding-right: var(--gut); padding-top: 0; }
.ct-board-area .board-head .board-title { display: none; }
.ct-board-area .btn-primary { background: var(--brown); border-color: var(--brown); border-radius: 0; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .hm-slide .hm-title, .js .hm-slide .hm-sub { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .ct-gnb { display: none; }
  .ct-actions { margin-left: auto; }
  .hm-comm-in { grid-template-columns: 1fr 1fr; }
  .hm-loc { grid-column: 1 / -1; }
  .hm-map { aspect-ratio: 21 / 8; }
  .ct-diagram-flow { grid-template-columns: repeat(min(var(--n, 7), 4), minmax(0, 1fr)); }
  .ct-diagram-flow li::after { display: none; }
  .ct-pgrid.is-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  :root { --hdr: 64px; --gut: 32px; }
  .hm-visual { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; }
  .hm-slides { position: relative; height: clamp(520px, 78vh, 760px); }
  .hm-dots { bottom: auto; top: calc(clamp(520px, 78vh, 760px) - 60px); }
  .ct-pgrid, .ct-cats { grid-template-columns: repeat(2, 1fr); }
  .ct-snb-in { flex-direction: column; align-items: stretch; gap: 0; }
  .ct-crumbs { padding: 12px 0 0; }
  .ct-tabs { height: 52px; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
  .ct-tabs a { padding: 0 14px; }
  .ct-phero-grid { grid-template-columns: 1fr; gap: 32px; }
  .ct-phero-mark { aspect-ratio: 16 / 7; }
  .ct-pdetail { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .ct-toc { position: sticky; top: var(--hdr); z-index: 20; margin: 0 calc(var(--gut) * -1) 40px; background: #fff; border-bottom: 1px solid var(--line); padding: 0 var(--gut); }
  .ct-toc ol { display: flex; overflow-x: auto; border-left: 0; margin: 0; scrollbar-width: none; }
  .ct-toc ol::-webkit-scrollbar { display: none; }
  .ct-toc a { border-left: 0; border-bottom: 2px solid transparent; margin: 0; padding: 14px 12px; white-space: nowrap; }
  .ct-toc a:hover, .ct-toc a.is-on { border-bottom-color: var(--brown); }
  .ct-toc .ct-btn { display: none; }
  .ct-rg-2col, .ct-loc, .ct-quote, .ct-record, .ct-award { grid-template-columns: 1fr; }
  .ct-quote-side { position: static; }
  .ct-greet { grid-template-columns: 1fr; gap: 30px; }
  .ct-greet-side { position: static; display: flex; align-items: center; gap: 20px; padding: 22px; text-align: left; }
  .ct-greet-side img { width: 70px; margin: 0; }
  .ct-greet-side p { margin: 0; }
  .ct-certs { grid-template-columns: 1fr; }
  .ct-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --gut: 20px; }
  .ct-brand img { width: 38px; }
  .ct-brand-tx small { display: none; }
  .ct-brand-tx strong { font-size: 1.3rem; }
  .hm-slides { height: clamp(480px, 70vh, 700px); min-height: 0; }
  .hm-dots { top: calc(clamp(480px, 70vh, 700px) - 50px); }
  .hm-slide-tx { top: 34%; }
  .hm-comm-in { grid-template-columns: 1fr; gap: 50px; }
  .hm-map { aspect-ratio: 4 / 3; }
  .ct-sub { height: 300px; }
  .ct-pgrid, .ct-pgrid.is-4, .ct-cats, .ct-feats, .ct-apps, .ct-types, .ct-gallery, .ct-strengths, .ct-scope, .ct-grid2 { grid-template-columns: 1fr; }
  .ct-seg { grid-template-columns: 1fr 1fr; }
  .ct-filter { padding: 18px; }
  .ct-filter-row { grid-template-columns: 1fr; gap: 8px; }
  .ct-filter-label { padding: 0; }
  .ct-steps { grid-template-columns: 1fr 1fr; }
  .ct-diagram { padding: 20px; }
  .ct-diagram-flow { grid-template-columns: 1fr; }
  .ct-diagram-flow li { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .ct-diagram-flow li.is-hl { transform: none; }
  .ct-diagram-flow .ct-diagram-desc, .ct-diagram-flow .ct-diagram-prod { flex-basis: 100%; }
  .ct-sem { grid-template-columns: 1fr; }
  .ct-sem-arrow { transform: rotate(90deg); justify-self: center; }
  .ct-kv th { width: 38%; padding: 12px; }
  .ct-kv td { padding: 12px; }
  .ct-quote-form, .ct-contact-card { padding: 22px; }
  .ct-news-list li a { grid-template-columns: auto 1fr; }
  .ct-news-list time { grid-column: 2; }
  .ct-dl > div { grid-template-columns: 1fr; gap: 2px; }
  .ct-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-logo { height: 130px; }
  .ct-tl-year { grid-template-columns: 1fr; gap: 16px; padding: 30px 0; }
  .ct-tl-year h2 { position: static; font-size: 2.4rem; }
  .ct-cert { grid-template-columns: 110px 1fr; gap: 16px; padding: 16px; }
  .ct-award { padding: 20px; gap: 20px; }
  .ct-credits li { grid-template-columns: 1fr; }
  .ct-reag-band { grid-template-columns: auto 1fr; }
  .ct-reag-band > .ct-ico { display: none; }
  .ct-rg-table th, .ct-rg-table td { padding: 10px 8px; font-size: 1.032rem; }
  .ct-rg-table td:nth-child(3) { white-space: nowrap; }
  .ct-rg-table [data-rg-pick] .ct-rg-pick-tx { display: none; }
  .ct-map.is-lg, .ct-map.is-lg iframe { min-height: 320px; }
  .ct-psec > h2 { font-size: 1.62rem; }
  .ct-phero h1 { font-size: 2.4rem; }
  .ct-float a { width: 44px; height: 44px; }
}

/* >>> home-plan — 최종기획서 메인 구성 02~05 */
.hm-sec { padding: 110px 0; }
.hm-head h2 { letter-spacing: -0.03em; }
/* 02 3대 제품군 카드 */
.hm-fam { background: #fff; }
.hm-fam-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hm-fam-card { display: flex; flex-direction: column; height: 100%; padding: 40px 36px 34px; background: var(--bg2); border-top: 4px solid var(--char); transition: background .25s, border-color .25s, box-shadow .25s; }
.hm-fam-card:hover { background: #fff; border-top-color: var(--brown); box-shadow: var(--shadow); }
.hm-fam-ico { width: 64px; height: 64px; display: grid; place-items: center; background: var(--char); color: #fff; margin-bottom: 26px; }
.hm-fam-ico .ct-ico { width: 32px; height: 32px; }
.hm-fam-card:hover .hm-fam-ico { background: var(--brown); }
.hm-fam-cnt { font-size: 16px; font-weight: 600; color: var(--brown); margin-bottom: 6px; }
.hm-fam-card strong { font-size: 1.75rem; color: var(--ink); margin-bottom: 14px; line-height: 1.3; }
.hm-fam-desc { color: var(--tx-2); flex: 1; margin-bottom: 26px; line-height: 1.7; }
.hm-fam-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--char); }
.hm-fam-go .ct-ico { width: 18px; height: 18px; transition: transform .2s; }
.hm-fam-card:hover .hm-fam-go { color: var(--brown); }
.hm-fam-card:hover .hm-fam-go .ct-ico { transform: translateX(4px); }
/* 03 대표 제품 */
.hm-feat { background: var(--bg2); }
.hm-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.hm-feat-grid > li { min-width: 0; }
.hm-pc a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s; }
.hm-pc a:hover { border-color: var(--brown); box-shadow: var(--shadow); }
.hm-pc-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; padding: 26px 28px 28px; }
.hm-pc-tx strong { font-size: 1.4rem; line-height: 1.3; color: var(--ink); }
.hm-pc a:hover .hm-pc-tx strong { color: var(--brown-d); }
.hm-pc-tx em { font-style: normal; color: var(--tx-2); line-height: 1.6; }
.hm-pc-tags { margin-top: auto; padding-top: 12px; font-size: 16px; color: var(--brown-d); }
.hm-feat .hm-more { text-align: center; margin: 50px 0 0; }
/* 04 적용 공정 한눈에 보기 */
.hm-flow { background: var(--char); color: #fff; }
.hm-flow-line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.hm-flow-step { position: relative; display: flex; flex-direction: column; min-width: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.hm-flow-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 20px 22px; min-height: 180px; background: rgba(255,255,255,.07); color: #fff; transition: background .25s; }
.hm-flow-head:hover { background: rgba(255,255,255,.14); }
.hm-flow-step:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 82px; width: 10px; height: 10px; border-top: 2px solid var(--brown-lt); border-right: 2px solid var(--brown-lt); transform: rotate(45deg); }
.hm-flow-no { font-size: 16px; font-weight: 700; color: var(--brown-lt); }
.hm-flow-head .ct-ico { width: 34px; height: 34px; color: #fff; stroke-width: 1.5; }
.hm-flow-head strong { font-size: 1.2rem; line-height: 1.35; word-break: keep-all; }
.hm-flow-step.is-key { border-color: var(--brown); }
.hm-flow-step.is-key .hm-flow-head { background: var(--brown); }
.hm-flow-prods { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.hm-flow-prods a { display: block; padding: 10px 12px; background: #fff; color: var(--ink); border-left: 3px solid var(--brown); transition: background .2s; }
.hm-flow-prods a:hover { background: var(--cream); }
.hm-flow-prods code { display: block; font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--char); line-height: 1.35; overflow-wrap: anywhere; }
.hm-flow-prods span { display: block; font-size: 16px; line-height: 1.4; color: var(--tx-2); }
.hm-flow-prods strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--char); }
.ct-pc-mark strong { font-size: clamp(1.2rem, 1.5vw, 1.6rem); font-weight: 700; color: #fff; text-align: center; line-height: 1.35; padding: 0 20px; }
.hm-flow-rail { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; align-items: center; margin-top: 14px; border: 1px dashed rgba(255,255,255,.35); }
.hm-flow-rail-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 20px 22px; color: #fff; }
.hm-flow-rail-t .ct-ico { width: 28px; height: 28px; }
.hm-flow-rail-t strong { font-size: 1.2rem; }
.hm-flow-rail-t span { width: 100%; font-size: 16px; color: rgba(255,255,255,.65); }
.hm-flow-rail .hm-flow-prods { flex-direction: row; flex-wrap: wrap; }
.hm-flow .hm-flow-note { margin: 22px 0 0; font-size: 16px; color: rgba(255,255,255,.6); }
/* 05 주요 고객사 — 로고 흐름 배너 */
.hm-cus { background: #fff; }
.hm-marquee { display: flex; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hm-marquee-track { flex: none; display: flex; animation: hm-marquee 45s linear infinite; }
.hm-marquee:hover .hm-marquee-track, .hm-marquee:focus-within .hm-marquee-track { animation-play-state: paused; }
.hm-marquee-track a { display: grid; place-items: center; width: max(240px, 16vw); height: 150px; padding: 24px 36px; border-right: 1px solid var(--line); }
.hm-marquee-track img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; }
.hm-marquee-track b { font-size: 1.5rem; font-weight: 800; color: var(--char); text-align: center; line-height: 1.2; }
@keyframes hm-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .hm-marquee { flex-wrap: wrap; justify-content: center; }
  .hm-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .hm-marquee-track[aria-hidden] { display: none; }
}
@media (max-width: 1280px) {
  .hm-flow-line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-flow-step:nth-child(3n)::after { display: none; }
}
@media (max-width: 1024px) {
  .hm-fam-grid { grid-template-columns: 1fr; }
  .hm-fam-card { display: grid; grid-template-columns: 64px 1fr; column-gap: 24px; padding: 30px; }
  .hm-fam-ico { grid-row: 1 / span 4; margin: 0; }
  .hm-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hm-fam-card { grid-template-columns: 1fr; }
  .hm-fam-ico { grid-row: auto; margin-bottom: 18px; }
  .hm-feat-grid { grid-template-columns: 1fr; }
  .hm-flow-line { grid-template-columns: 1fr; gap: 20px; }
  .hm-flow-step::after { display: none; }
  .hm-flow-head { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hm-flow-head strong { flex: 1; }
  .hm-flow-prods { flex-direction: row; flex-wrap: wrap; }
  .hm-flow-rail { grid-template-columns: 1fr; }
  .hm-marquee-track a { width: 200px; height: 120px; padding: 20px 26px; }
}
/* <<< home-plan */

/* >>> ct-fx — 서브페이지 시각 요소(자체 제작 SVG · 절제된 애니메이션) */
.ct-fx-draw { fill: none; stroke-dasharray: 700; stroke-dashoffset: 700; }
.js .reveal.is-in .ct-fx-draw, .js .reveal.is-in.ct-fx-draw { animation: ct-fx-draw 1.1s ease forwards; animation-delay: calc(var(--d, 0) * .09s); }
html:not(.js) .ct-fx-draw, .no-fx .ct-fx-draw { stroke-dashoffset: 0; }
@keyframes ct-fx-draw { to { stroke-dashoffset: 0; } }

/* 절차 · 공정 체인 */
.ct-chain { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; margin: 0 0 10px; }
.ct-chain-i { position: relative; display: flex; min-width: 0; }
.ct-chain-box { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--char); color: inherit; }
a.ct-chain-box { transition: border-color .25s, box-shadow .25s, transform .25s; }
a.ct-chain-box:hover { border-top-color: var(--brown); box-shadow: var(--shadow); transform: translateY(-3px); }
.ct-chain-no { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--brown); }
.ct-chain-ico .ct-ico { width: 34px; height: 34px; color: var(--char); stroke-width: 1.5; }
a.ct-chain-box:hover .ct-chain-ico .ct-ico { color: var(--brown); }
.ct-chain-box strong { font-size: 1.2rem; color: var(--ink); line-height: 1.35; }
.ct-chain-d { font-size: 16px; color: var(--tx-2); line-height: 1.6; }
.ct-chain-link { position: absolute; right: -21px; top: 50%; width: 40px; height: 14px; margin-top: -7px; z-index: 2; overflow: visible; }
.ct-chain-link line, .ct-chain-link polyline { stroke: var(--brown); stroke-width: 1.6; }
.ct-chain-link .ct-fx-dot { fill: var(--brown); opacity: 0; }
.js .ct-chain.is-in .ct-fx-dot { animation: ct-fx-run 2.6s linear infinite; animation-delay: calc(var(--i, 0) * .25s); }
@keyframes ct-fx-run { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(28px); opacity: 0; } }
.ct-chain.is-dark .ct-chain-box { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); border-top-color: var(--brown); color: #fff; }
.ct-chain.is-dark .ct-chain-ico .ct-ico { color: #fff; }
.ct-chain.is-dark .ct-chain-box strong { color: #fff; }
.ct-chain.is-dark .ct-chain-d { color: rgba(255,255,255,.7); }

/* 숫자 카드 */
.ct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 40px 0 50px; }
.ct-stats li { padding: 26px 22px; background: var(--bg2); border-left: 3px solid var(--brown); }
.ct-stat-v { display: flex; align-items: baseline; gap: 4px; color: var(--ink); }
.ct-stat-v b { font-size: clamp(2.2rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.ct-stat-v i { font-style: normal; font-size: 1.14rem; font-weight: 600; color: var(--brown); }
.ct-stat-l { display: block; margin-top: 8px; font-size: 16px; color: var(--tx-2); }

/* 웨이퍼 장식 */
.ct-fx-wafer { width: 100%; max-width: 230px; height: auto; }
.ct-fx-wafer .ct-fx-ring { stroke: var(--brown); stroke-width: 2; }
.ct-fx-wafer .ct-fx-flat { stroke: var(--char); stroke-width: 3; }
.ct-fx-wafer .ct-fx-dies rect { fill: var(--char); opacity: .1; }
.js .ct-fx-wafer.is-in .ct-fx-dies rect { animation: ct-fx-die 2.4s ease forwards; animation-delay: calc(var(--d, 0) * .12s); }
@keyframes ct-fx-die { 0% { opacity: .06; } 40% { opacity: .5; } 100% { opacity: .16; } }
.ct-fx-wafer .ct-fx-scan { fill: none; stroke: var(--brown); stroke-width: 1.2; stroke-dasharray: 6 14; opacity: .55; transform-origin: 110px 110px; }
.js .ct-fx-wafer.is-in .ct-fx-scan { animation: ct-fx-spin 16s linear infinite; }
@keyframes ct-fx-spin { to { transform: rotate(360deg); } }

/* 인증 배지 */
.ct-fx-badge { width: 84px; height: auto; }
.ct-fx-badge .ct-fx-draw { stroke: var(--brown); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ct-fx-badge .ct-fx-check { stroke: var(--char); stroke-width: 6; }

/* 공급 관계도 */
.ct-fx-net { width: 100%; height: auto; }
.ct-fx-net line { stroke: var(--brown); stroke-width: 1.4; opacity: .75; }
.ct-fx-net .ct-fx-net-node circle { fill: #fff; stroke: var(--char); stroke-width: 2; }
.ct-fx-net .ct-fx-net-node text { font-family: var(--font); font-size: 15px; font-weight: 600; fill: var(--ink); }
.ct-fx-net .ct-fx-net-center circle { fill: var(--char); }
.ct-fx-net .ct-fx-net-center text { font-family: var(--font); font-size: 16px; font-weight: 700; fill: #fff; }
.js .ct-fx-net .ct-fx-net-node { opacity: 0; }
.js .ct-fx-net.is-in .ct-fx-net-node { animation: ct-fx-pop .5s ease forwards; animation-delay: calc(var(--d, 0) * .12s + .5s); }
@keyframes ct-fx-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* 지도 핀 */
.ct-fx-pin { width: 92px; height: auto; }
.ct-fx-pin .ct-fx-draw { stroke: var(--brown); stroke-width: 3; }
.ct-fx-pin .ct-fx-pulse { fill: var(--brown); opacity: .16; }
.js .ct-fx-pin.is-in .ct-fx-pulse { animation: ct-fx-pulse 3.2s ease-out infinite; transform-origin: 60px 60px; }
.js .ct-fx-pin.is-in .ct-fx-pulse.is-2 { animation-delay: 1.6s; }
@keyframes ct-fx-pulse { 0% { transform: scale(.6); opacity: .28; } 70% { opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } }

/* 제품 공정도 — 화면에 들어오면 단계가 차례로 나타난다 */
.js .ct-diagram.reveal .ct-diagram-flow li { opacity: 0; }
.js .ct-diagram.reveal.is-in .ct-diagram-flow li { animation: ct-fx-step .5s ease forwards; animation-delay: calc(var(--i, 0) * .09s); }
@keyframes ct-fx-step { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.js .ct-diagram.reveal.is-in .ct-diagram-flow li.is-hl { animation: ct-fx-step-hl .6s ease forwards; animation-delay: calc(var(--i, 0) * .09s); }
@keyframes ct-fx-step-hl { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(-6px); } }
.ct-diagram-flow li.is-hl::before { content: ""; position: absolute; inset: -4px; border: 1px solid var(--brown-lt); opacity: 0; }
.js .ct-diagram.reveal.is-in .ct-diagram-flow li.is-hl::before { animation: ct-fx-halo 3.4s ease-out infinite 1s; }
@keyframes ct-fx-halo { 0% { opacity: .55; transform: scale(1); } 60% { opacity: 0; transform: scale(1.06); } 100% { opacity: 0; } }

/* SEM 세정 전 · 후 겹쳐 보기 */
.ct-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-ba figure { margin: 0; }
.ct-ba img { width: 100%; background: #000; }
.ct-ba figcaption { margin-top: 8px; font-size: 16px; color: var(--tx-2); text-align: center; }
.ct-ba-range { display: none; }
.js .ct-ba { position: relative; display: block; --x: 50%; }
.js .ct-ba figure { position: absolute; inset: 0; }
.js .ct-ba .ct-ba-a { position: relative; }
.js .ct-ba .ct-ba-b { clip-path: inset(0 0 0 var(--x)); }
.js .ct-ba figcaption { position: absolute; left: 14px; bottom: 12px; margin: 0; padding: 4px 12px; background: rgba(12,22,40,.75); color: #fff; font-size: 16px; }
.js .ct-ba .ct-ba-b figcaption { left: auto; right: 14px; }
.js .ct-ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #fff; pointer-events: none; }
.js .ct-ba-range { display: block; position: absolute; inset: auto 0 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.js .ct-ba-range:focus-visible { opacity: .001; outline: 2px solid var(--brown); outline-offset: 2px; }
.ct-ba-hint { margin: 10px 0 0; font-size: 16px; color: var(--tx-3); }

@media (max-width: 1024px) {
  .ct-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .ct-chain-link { display: none; }
}
@media (max-width: 720px) {
  .ct-chain { grid-template-columns: 1fr; gap: 12px; }
  .ct-chain-box { padding: 22px 20px; }
  .ct-stats { grid-template-columns: 1fr 1fr; }
  .ct-fx-net { display: none; }  /* 작은 화면에서는 글자가 너무 작아진다 — 아래 로고 타일이 같은 내용을 담는다 */
}
@media (prefers-reduced-motion: reduce) {
  .ct-fx-draw { stroke-dashoffset: 0 !important; animation: none !important; }
  .js .ct-chain.is-in .ct-fx-dot, .js .ct-fx-wafer.is-in .ct-fx-scan, .js .ct-fx-pin.is-in .ct-fx-pulse,
  .js .ct-diagram.reveal.is-in .ct-diagram-flow li.is-hl::before { animation: none !important; }
  .js .ct-fx-wafer.is-in .ct-fx-dies rect { animation: none !important; opacity: .16; }
  .js .ct-fx-net .ct-fx-net-node, .js .ct-diagram.reveal .ct-diagram-flow li { opacity: 1 !important; animation: none !important; }
}

/* 시각 요소가 놓이는 자리 */
.ct-greet-side .ct-fx-wafer { margin: 0 auto 18px; }
.ct-shead-badge { display: flex; align-items: center; justify-content: flex-start; gap: 20px; margin: 10px 0 24px; }
.ct-shead-badge .ct-h3 { margin: 0 !important; }
.ct-loc-pin { display: flex; justify-content: center; margin-bottom: 10px; }
.ct-chain-sm .ct-chain-box { padding: 22px 18px; gap: 8px; }
.ct-chain-sm .ct-chain-box strong { font-size: 1.08rem; }
.ct-chain + .ct-cats, .ct-chain + .ct-filter, .ct-chain + .ct-timeline, .ct-chain + .ct-certs { margin-top: 56px; }
.ct-fx-net { margin: 0 auto 46px; max-width: 760px; }

/* 문의 유도 띠 */
.ct-cta { background: var(--char); color: #fff; padding: 56px 0; margin-top: 90px; }
.ct-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.ct-cta h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 8px; }
.ct-cta p { margin: 0; color: rgba(255,255,255,.75); }
.ct-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ct-cta .ct-btn-line { background: transparent; border-color: rgba(255,255,255,.45); color: #fff !important; }
.ct-cta .ct-btn-line:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* SEM 세정 전 · 후 — 화살표가 흐른다 */
.ct-sem-svg { width: 60px; height: 24px; overflow: visible; }
.ct-sem-svg line, .ct-sem-svg polyline { fill: none; stroke: var(--brown); stroke-width: 2; }
.ct-sem-svg .ct-fx-dot { fill: var(--brown); opacity: 0; }
.js .ct-sem.is-in .ct-sem-svg .ct-fx-dot { animation: ct-fx-run-lg 2.8s linear infinite 1s; }
@keyframes ct-fx-run-lg { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(44px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js .ct-sem.is-in .ct-sem-svg .ct-fx-dot { animation: none !important; } }
/* <<< ct-fx */

/* >>> ct-board-font-floor — main.css 게시판 글자 18px 기준 · 최소 16px (rule18.py 생성) */
.ct .primary-nav a { font-size: 18px; }
.ct .lang-btn { font-size: 16px; }
.ct .lang-switcher li a { font-size: 17px; }
.ct .lang-switcher li a.is-active::after { font-size: 16px; }
.ct .hero-title { font-size: clamp(41px, 6.6vw, 67px); }
.ct .btn, .ct .btn-primary, .ct .btn-ghost, .ct .btn-danger { font-size: 17px; }
.ct .btn.small { font-size: 16px; }
.ct .link { font-size: 17px; }
.ct .post-list time { font-size: 16px; }
.ct .ft-title { font-size: 16px; }
.ct .board-tools .search input, .ct .board-tools .search button, .ct .board-tools .btn-primary { font-size: 17px; }
.ct .board-table th, .ct .board-table td { font-size: 17px; }
.ct .board-table th { font-size: 16px; }
.ct .badge { font-size: 16px; }
.ct .pager a { font-size: 17px; }
.ct .photo-title { font-size: 17px; }
.ct .photo-sub { font-size: 16px; }
.ct .calendar th { font-size: 16px; }
.ct .calendar td .d { font-size: 16px; }
.ct .cal-event { font-size: 16px; }
.ct .crumbs { font-size: 16px; }
.ct .post-meta { font-size: 17px; }
.ct .post-body { font-size: 19px; }
.ct .attachments-block h3 { font-size: 17px; }
.ct .post-image figcaption { font-size: 16px; }
.ct .download-block h3 { font-size: 17px; }
.ct .download-card .dl-name { font-size: 17px; }
.ct .download-card .dl-meta { font-size: 16px; }
.ct .download-card .dl-ext { font-size: 16px; }
.ct .prev-next a { font-size: 17px; }
.ct .comment-form input, .ct .comment-form textarea { font-size: 17px; }
.ct .write-form label { font-size: 17px; }
.ct .write-form input[type=text], .ct .write-form input[type=password], .ct .write-form input[type=email], .ct .write-form input[type=url], .ct .write-form input[type=number], .ct .write-form input[type=search], .ct .write-form input[type=datetime-local], .ct .write-form textarea { font-size: 18px; }
.ct .alert { font-size: 17px; }
.ct .wz-kicker { font-size: 16px; }
.ct .wz-title { font-size: clamp(34px, 5.04vw, 53px); }
.ct .wz-tagline { font-size: 18px; }
.ct .wz-hero-badge { font-size: 16px; }
.ct .wz-hero-title { font-size: clamp(26px, 3.12vw, 38px); }
.ct .wz-hero-excerpt { font-size: 18px; }
.ct .wz-meta { font-size: 16px; }
.ct .wz-meta-small { font-size: 16px; }
.ct .wz-section-title { font-size: 16px; }
.ct .wz-tag { font-size: 16px; }
.ct .wz-pick-title { font-size: 18px; }
.ct .wz-card-flag { font-size: 16px; }
.ct .wz-card-title { font-size: 20px; }
.ct .wz-card-excerpt { font-size: 16px; }
/* <<< ct-board-font-floor */

/* >>> ct-redesign — 2026-10-06 전면 재설계 "공정 라인"
   기존 시각 언어를 덮어쓴다. 토큰은 :root 에서 이미 교체됨. */

/* 1. 섹션 머리 — 가운데 정렬 폐기, 좌측 + 번호 레일 ------------------ */
body.ct { counter-reset: ctsec; }
.ct .hm-sec, .ct .hm-comm { counter-increment: ctsec; }
.ct .hm-head {
  text-align: left; margin-bottom: 56px; position: relative;
  padding-left: 88px; min-height: 52px;
}
.ct .hm-head::before {
  content: counter(ctsec, decimal-leading-zero);
  position: absolute; left: 0; top: .34em;
  font-family: var(--font); font-size: 17px; font-weight: 700;
  letter-spacing: .08em; color: var(--brown); font-feature-settings: "tnum";
}
.ct .hm-head::after {
  content: ""; position: absolute; left: 15px; top: 2.5em; bottom: -18px;
  width: 1px; background: linear-gradient(var(--line-2), transparent);
}
.ct .hm-head.is-light::after { background: linear-gradient(rgba(255,255,255,.4), transparent); }
.ct .hm-head h2 { font-weight: 700; letter-spacing: -0.035em; }
.ct .hm-head p { max-width: var(--measure); margin: 0; }

/* 2. 읽는 글만 줄 폭을 잡는다 (화면 여백은 10% 그대로) ---------------- */
.ct .ct-lead, .ct .ct-lead-lg { max-width: var(--measure); }
.ct .ct-shead p, .ct .ct-prose p, .ct .ct-prose li { max-width: var(--measure); }
.ct .ct-shead.is-center { text-align: left; }
.ct .ct-shead.is-center .ct-lead { margin-left: 0; }

/* 3. 강조는 앰버 하나 — 윗선으로 현재 위치를 표시 --------------------- */
.ct .ct-eyebrow { font-weight: 600; letter-spacing: .2em; }
.ct .ct-code { background: rgba(200,122,30,.10); color: var(--brown-d); }
.ct .ct-badge { background: rgba(200,122,30,.10); color: var(--brown-d); }
.ct .ct-btn-a, .ct .ct-btn-teal { background: var(--brown); border-color: var(--brown); }
.ct .ct-btn-a:hover, .ct .ct-btn-teal:hover { background: var(--brown-d); border-color: var(--brown-d); }
.ct .ct-btn-b { background: var(--char); border-color: var(--char); }
.ct .ct-btn-b:hover { background: var(--brown); border-color: var(--brown); }

/* 4. 헤더 — 선 하나로 바닥을 긋는다 ---------------------------------- */
.ct .ct-header { box-shadow: none; border-bottom: 1px solid transparent; }
.ct .ct-header.is-scrolled { background: rgba(255,255,255,.92); border-bottom-color: var(--line); box-shadow: none; }
.ct .ct-brand-tx strong { letter-spacing: -0.02em; }
.ct .ct-brand-tx small { letter-spacing: .14em; font-weight: 700; }

/* 5. 제품군 카드 — 아이콘 네모를 버리고 공정 구간 선으로 ---------------- */
.ct .hm-fam-card { background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--char); padding: 38px 34px 32px; }
.ct .hm-fam-card:hover { border-color: var(--line); border-top-color: var(--brown); box-shadow: 0 14px 34px rgba(18,20,23,.07); }
.ct .hm-fam-ico { width: 46px; height: 46px; background: transparent; color: var(--brown); border: 1px solid var(--line-2); margin-bottom: 24px; }
.ct .hm-fam-card:hover .hm-fam-ico { background: transparent; border-color: var(--brown); }
.ct .hm-fam-ico .ct-ico { width: 24px; height: 24px; }
.ct .hm-fam-cnt { font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.ct .hm-fam-card strong { font-size: 1.62rem; letter-spacing: -0.03em; }
.ct .hm-fam-go { color: var(--brown-d); }

/* 6. 대표 제품 카드 — 사진 유무로 줄이 어긋나지 않게 통일 --------------- */
.ct .hm-feat { background: var(--bg2); }
.ct .hm-pc a { border: 1px solid var(--line); background: #fff; }
.ct .hm-pc a:hover { border-color: var(--brown); box-shadow: 0 14px 34px rgba(18,20,23,.07); }
.ct .hm-pc-mark, .ct .hm-pc > a > figure, .ct .hm-pc-img {
  aspect-ratio: 4 / 3; width: 100%; overflow: hidden; background: var(--char);
  display: grid; place-items: center; flex: none;
}
.ct .hm-pc-mark img, .ct .hm-pc-img img { width: 100%; height: 100%; object-fit: cover; }
.ct .hm-pc-tx strong { font-size: 1.32rem; letter-spacing: -0.03em; }
.ct .hm-pc-tags { font-family: var(--mono); font-size: 16px; color: var(--tx-3); letter-spacing: .02em; }

/* 7. 적용 공정 — 칸 높이를 맞춘다 ------------------------------------ */
.ct .hm-flow { background: var(--char); }
.ct .hm-flow-step { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.10); }
.ct .hm-flow-head { min-height: 164px; background: rgba(255,255,255,.05); }
.ct .hm-flow-head:hover { background: rgba(255,255,255,.11); }
.ct .hm-flow-step.is-key { border-color: var(--brown); }
.ct .hm-flow-step.is-key .hm-flow-head { background: var(--brown); }
.ct .hm-flow-no { font-family: var(--font); color: var(--brown-lt); letter-spacing: .08em; }
.ct .hm-flow-step:not(:last-child)::after { border-top-color: var(--brown); border-right-color: var(--brown); }
.ct .hm-flow-prods { flex: 1; }
.ct .hm-flow-prods a { border-left-color: var(--brown); }
.ct .hm-flow-prods a:hover { background: rgba(200,122,30,.12); }

/* 8. 고객사 로고 — 평소엔 가라앉히고 손이 닿으면 살아난다 --------------- */
.ct .hm-marquee-track img { filter: grayscale(1) contrast(.85); opacity: .62; transition: filter .25s, opacity .25s; }
.ct .hm-marquee-track a:hover img { filter: none; opacity: 1; }
.ct .hm-marquee-track b { font-family: var(--font); color: var(--tx-3); letter-spacing: -0.01em; }
.ct .hm-marquee-track a:hover b { color: var(--char); }

/* 9. 첫 화면 — 막은 슬라이드 안(글자 아래)에 깔아야 한다 ---------------- */
.ct .hm-slide::after {
  background: linear-gradient(100deg, rgba(14,16,19,.88) 0%, rgba(14,16,19,.60) 48%, rgba(14,16,19,.24) 100%);
}
.ct .hm-title { color: #fff; letter-spacing: -0.045em; }
.ct .hm-sub {
  color: rgba(255,255,255,.86); font-family: var(--mono); font-weight: 500;
  font-size: clamp(1rem, 1.18vw, 1.18rem); letter-spacing: .01em; margin-top: 22px;
}
.ct .hm-dots button { border-color: rgba(255,255,255,.7); }
.ct .hm-dots button.is-on { background: var(--brown); border-color: var(--brown); }

/* 9-1. 로고 마크 — 구 팔레트(틸) PNG 를 단색으로 눌러 새 색과 맞춘다 */
.ct .ct-brand img { filter: brightness(0); opacity: .9; transition: filter .25s, opacity .25s; }
.ct.has-visual .ct-header:not(.is-scrolled) .ct-brand img,
.has-visual .ct-header:not(.is-scrolled) .ct-brand img { filter: brightness(0) invert(1); opacity: 1; }
.ct .ct-brand:hover img { opacity: 1; }

/* 10. 움직임은 공정이 흐르는 것만 ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ct *, .ct *::before, .ct *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* 11. 서체를 하나로 통일했으므로 숫자만 폭을 맞춘다 ---------------------- */
.ct .ct-code, .ct .ct-mono, .ct .hm-fam-cnt, .ct .hm-flow-no, .ct .hm-head::before,
.ct .hm-sub, .ct .hm-pc-tags, .ct table td, .ct table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.ct .ct-code { font-weight: 600; letter-spacing: .01em; }
.ct .hm-sub { letter-spacing: -0.01em; }

/* 12. 상단 — 여유를 주고 대메뉴를 키운다 ------------------------------- */
.ct .ct-brand img { width: 50px; }
.ct .ct-brand-tx small { font-size: 16px; letter-spacing: .14em; }
.ct .ct-brand-tx strong { font-size: 1.5rem; }
.ct .ct-brand { margin-right: clamp(10px, 1.2vw, 20px); }
.ct .ct-gnb > ul > li > a {
  font-size: 21px; font-weight: 600; padding: 0 clamp(14px, 2.5vw, 36px);
  white-space: nowrap;            /* 중메뉴 열이 겹치지 않도록 간격을 넓혔다 */
}
/* 중메뉴 열 밀어내기 — 1열(짧은 항목)은 왼쪽, 2열(가장 긴 항목)은 오른쪽으로 */
.ct .ct-drop { --sx: 0px; }
.ct .ct-gnb > ul > li:nth-child(1) .ct-drop { --sx: -18px; }
.ct .ct-gnb > ul > li:nth-child(2) .ct-drop { --sx: 18px; }
.ct .ct-drop { transform: translate(calc(-50% + var(--sx)), 10px); }
.ct .ct-gnb:hover .ct-drop, .ct .ct-gnb:focus-within .ct-drop,
.ct .ct-gnb > ul > li:hover .ct-drop, .ct .ct-gnb > ul > li:focus-within .ct-drop {
  transform: translate(calc(-50% + var(--sx)), 0);
}
.ct .ct-lang-btn { font-size: 17px; }

/* 13. 메가 메뉴 — 대메뉴에 손이 닿으면 전체가 한 번에 열린다 -------------- */
.ct .ct-header { position: fixed; }
.ct .ct-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; z-index: 1;
  height: 318px; background: rgba(255,255,255,.9); backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); border-top: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 16px 34px rgba(18,20,23,.04);   /* 음영 60% 낮춤 */
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .22s, transform .22s, visibility .22s; pointer-events: none;
}
/* ::after 는 문서 순서상 맨 뒤라 그냥 두면 드롭다운을 덮는다 */
.ct .ct-header-in { position: relative; z-index: 2; }
.ct .ct-drop { z-index: 3; }
.ct .ct-header:has(.ct-gnb:hover)::after,
.ct .ct-header:has(.ct-gnb:focus-within)::after { opacity: 1; visibility: visible; transform: none; }

/* 열린 동안은 모든 대메뉴의 하위가 동시에 보인다 */
.ct .ct-gnb:hover .ct-drop, .ct .ct-gnb:focus-within .ct-drop {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.ct .ct-drop {
  background: transparent; box-shadow: none; border-top: 0;
  padding: 26px 0 30px; min-width: 190px;
}
.ct .ct-drop a { font-size: 18px; padding: 8px 18px; color: var(--tx); font-weight: 500; }
.ct .ct-drop a:hover { color: var(--brown-d); background: transparent; text-decoration: underline; text-underline-offset: 5px; }

/* 히어로 위 투명 헤더에서 메가가 열리면 글자가 흰색이라 안 보인다 → 되돌린다 */
.ct .ct-header:has(.ct-gnb:hover), .ct .ct-header:has(.ct-gnb:focus-within) {
  background: #fff; border-bottom-color: transparent;
}
.has-visual .ct-header:has(.ct-gnb:hover) .ct-gnb > ul > li > a,
.has-visual .ct-header:has(.ct-gnb:hover) .ct-brand-tx strong { color: var(--ink); }
.has-visual .ct-header:has(.ct-gnb:hover) .ct-brand-tx small { color: var(--tx-3); }
.has-visual .ct-header:has(.ct-gnb:hover) .ct-brand img { filter: brightness(0); opacity: .9; }
.has-visual .ct-header:has(.ct-gnb:hover) .ct-lang-btn,
.has-visual .ct-header:has(.ct-gnb:hover) .ct-burger span { color: var(--ink); }

/* 하위가 없는 대메뉴(견적문의 · Blog)는 드롭이 없다 */
.ct .ct-gnb > ul > li:not(:has(.ct-drop)) > a { position: relative; }

/* 모바일 드로어 — 하위 없는 메뉴 제목을 링크로 */
.ct .ct-drawer-g.is-single ul { display: none; }
.ct .ct-drawer-g.is-single p a { color: inherit; }

@media (max-width: 1280px) {
  .ct .ct-header::after { display: none; }
}
@media (max-width: 1024px) {
  :root { --hdr: 72px; }
}

/* 14. Blog 버튼 - KOR 버튼과 같은 모양으로 KOR 왼쪽에 ------------------- */
.ct .ct-blog-btn {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid var(--line-2); background: transparent;
  font: 600 17px var(--font); letter-spacing: .06em; color: var(--ink);
  transition: color .2s, border-color .2s, background .2s;
}
.ct .ct-blog-btn:hover { color: var(--brown-d); border-color: var(--brown); }
.has-visual .ct-header:not(.is-scrolled) .ct-blog-btn { color: #fff; border-color: rgba(255,255,255,.45); }
.has-visual .ct-header:not(.is-scrolled) .ct-blog-btn:hover { color: #fff; border-color: #fff; }
.has-visual .ct-header:has(.ct-gnb:hover) .ct-blog-btn { color: var(--ink); border-color: var(--line-2); }
@media (max-width: 1280px) {
  .ct .ct-blog-btn { display: none; }   /* 좁은 화면은 드로어로 */
}

/* 15. 첫 화면 "공정 라인" ---------------------------------------------
   사진은 분위기만, 정보는 공정 6단계가 전달한다. 켐텍 제품이 들어가는 칸에 앰버 점이 켜진다. */
.ct .hm-line { display: flex; align-items: center; min-height: min(100vh, 860px); height: auto; padding: calc(var(--hdr) + 40px) 0 96px; }
.ct .hm-line .hm-slides { position: absolute; inset: 0; }
.ct .hm-line .hm-slide::after {
  background: linear-gradient(100deg, rgba(14,16,19,.80) 0%, rgba(14,16,19,.68) 46%, rgba(14,16,19,.52) 100%);
}
.ct .hm-line-in { position: relative; z-index: 2; width: 100%; }
.ct .hm-line .hm-title { max-width: 20ch; }
.ct .hm-line .hm-sub { margin-bottom: 54px; }

.ct .ctl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
/* 단계를 잇는 선 */
.ct .ctl::before {
  content: ""; position: absolute; left: 0; right: 0; top: 44px; height: 2px;
  background: linear-gradient(90deg, rgba(200,122,30,.75) 0%, rgba(255,255,255,.34) 55%, rgba(255,255,255,.18) 100%);
}
/* 선 위를 흐르는 점 */
.ct .ctl::after {
  content: ""; position: absolute; top: 41px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brown); box-shadow: 0 0 12px 2px rgba(200,122,30,.8);
  animation: ctl-run 7s linear infinite;
}
@keyframes ctl-run { from { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { left: 100%; opacity: 0; } }

.ct .ctl-s { min-width: 0; position: relative; }
.ct .ctl-s > a { display: block; padding: 0 14px 0 0; color: #fff; }
.ct .ctl-no { display: block; font-size: 16px; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.78); font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.ct .ctl-dot {
  display: block; width: 11px; height: 11px; border-radius: 50%; margin: 12px 0 18px;
  background: rgba(255,255,255,.26); border: 1px solid rgba(255,255,255,.4); position: relative; z-index: 1;
}
.ct .ctl-s.is-ct .ctl-dot {
  background: var(--brown); border-color: var(--brown);
  animation: ctl-pulse 6s ease-in-out infinite;
  animation-delay: calc(var(--c) * .5s);
}
@keyframes ctl-pulse {
  0%, 62%, 100% { box-shadow: 0 0 0 0 rgba(200,122,30,.55); }
  12%           { box-shadow: 0 0 0 9px rgba(200,122,30,0); }
}
.ct .ctl-s strong { display: block; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; word-break: keep-all; }
.ct .ctl-s em {
  display: block; margin-top: 8px; min-height: 48px; font-style: normal; font-size: 16px; line-height: 1.5;
  color: var(--brown-lt); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.ct .ctl-s:not(.is-ct) strong { color: rgba(255,255,255,.8); font-weight: 500; }
.ct .ctl-s > a:hover strong { color: #fff; }
.ct .ctl-s > a:hover .ctl-dot { background: var(--brown-lt); border-color: var(--brown-lt); }
.ct .ctl-note { margin: 42px 0 0; font-size: 17px; color: rgba(255,255,255,.92); max-width: var(--measure); text-shadow: 0 1px 10px rgba(0,0,0,.6); }

.ct .hm-line .hm-dots { position: absolute; bottom: 38px; }

@media (prefers-reduced-motion: reduce) {
  .ct .ctl::after { animation: none; left: 0; opacity: .9; }
  .ct .ctl-s.is-ct .ctl-dot { animation: none; }
}
@media (max-width: 1280px) {
  .ct .ctl { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 38px; }
  .ct .ctl::before, .ct .ctl::after { display: none; }
}
@media (max-width: 720px) {
  .ct .hm-line { min-height: 0; padding: calc(var(--hdr) + 28px) 0 72px; }
  .ct .ctl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .ct .hm-line .hm-sub { margin-bottom: 36px; }
  .ct .hm-line .hm-dots { position: static; margin-top: 34px; }
}

/* 15-1. 모바일 - 기존 규칙이 슬라이드를 고정 높이 relative 로 바꿔 배경이 중간에 끊긴다 */
@media (max-width: 1024px) {
  .ct .hm-line { display: block; height: auto; max-height: none; }
  .ct .hm-line .hm-slides { position: absolute; inset: 0; height: auto; }
  .ct .hm-line .hm-dots { position: static; }
}

/* 15-2. 배경을 밝힌 만큼 글자에 옅은 그림자를 둬 어느 슬라이드에서도 읽히게 */
.ct .hm-line .hm-title { text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.ct .hm-line .hm-sub { color: rgba(255,255,255,.95); text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.ct .ctl-s strong { text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.ct .ctl-s em { color: #F0B968; text-shadow: 0 1px 10px rgba(0,0,0,.65); }

/* 13-1. 흰 배경 60% 는 뒤가 비친다 - 메가가 열리는 동안 아래 내용을 가라앉혀
   글자끼리 겹쳐 읽히지 않는 것을 막는다. */
.ct .hm-line-in, .ct .ct-subvisual-in, .ct .ct-main > * { transition: opacity .22s, filter .22s; }
body.ct:has(.ct-gnb:hover) .hm-line-in,
body.ct:has(.ct-gnb:focus-within) .hm-line-in { opacity: .3; filter: blur(2px); }
body.ct:has(.ct-gnb:hover) .hm-dots { opacity: .3; }

/* backdrop-filter 를 못 쓰는 환경에서는 60% 로 두면 글자가 묻힌다 - 불투명도를 올려 폴백 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ct .ct-header::after { background: rgba(255,255,255,.96); }
  .ct .ct-header:has(.ct-gnb:hover), .ct .ct-header:has(.ct-gnb:focus-within) { background: #fff; }
}

/* 16. 02 제품군 카드 재설계 -------------------------------------------
   사진이 저해상도라 흐린 워시로 질감만 쓰고, 아이콘+라벨을 한 줄로 묶는다. */
.ct .hm-fam-grid { gap: 26px; }
.ct .hm-fam-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: block; height: 100%; padding: 0;
  background: #fff; border: 1px solid var(--line); border-top: 0;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
/* 상단 얇은 선이 호버 때 왼쪽에서 차오른다 */
.ct .hm-fam-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--char); z-index: 2; transition: background .3s;
}
.ct .hm-fam-card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--brown); z-index: 3; transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.ct .hm-fam-card:hover { border-color: var(--line-2); box-shadow: 0 18px 44px rgba(18,20,23,.10); transform: translateY(-3px); }
.ct .hm-fam-card:hover::after { width: 100%; }

/* 배경 사진 - 흐리게 깔아 저해상도를 숨긴다 */
.ct .hm-fam-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(3px) saturate(.55) contrast(1.05);
  opacity: .13; transform: scale(1.12);
  transition: opacity .45s, transform .6s;
}
.ct .hm-fam-card:hover .hm-fam-bg { opacity: .2; transform: scale(1.18); }

.ct .hm-fam-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; height: 100%;
  padding: 36px 32px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.96) 55%, #fff 100%);
}
/* 아이콘 + 수량 라벨을 한 줄로 */
.ct .hm-fam-top { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ct .hm-fam-ico {
  width: 42px; height: 42px; flex: none; margin: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--brown);
  border: 1px solid var(--line-2); transition: border-color .3s, background .3s, color .3s;
}
.ct .hm-fam-card:hover .hm-fam-ico { background: var(--brown); border-color: var(--brown); color: #fff; }
.ct .hm-fam-ico .ct-ico { width: 21px; height: 21px; }
.ct .hm-fam-cnt {
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: .02em;
  color: var(--brown-d); font-variant-numeric: tabular-nums;
}
.ct .hm-fam-card strong { font-size: 1.68rem; letter-spacing: -0.035em; margin-bottom: 14px; color: var(--ink); }
.ct .hm-fam-desc { color: var(--tx-2); flex: 1; margin-bottom: 28px; line-height: 1.68; }

/* 바로가기 - 원형 화살표 */
.ct .hm-fam-go { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); }
.ct .hm-fam-go em { font-style: normal; font-weight: 600; font-size: 1.06rem; letter-spacing: -0.01em; }
.ct .hm-fam-arrow {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--ink);
  transition: background .28s, border-color .28s, color .28s, transform .28s;
}
.ct .hm-fam-arrow .ct-ico { width: 16px; height: 16px; transition: transform .28s; }
.ct .hm-fam-card:hover .hm-fam-go { color: var(--brown-d); }
.ct .hm-fam-card:hover .hm-fam-arrow {
  background: var(--brown); border-color: var(--brown); color: #fff; transform: translateX(4px);
}
.ct .hm-fam-card:hover .hm-fam-arrow .ct-ico { transform: translateX(1px); }

@media (max-width: 1024px) {
  .ct .hm-fam-card { display: block; }
  .ct .hm-fam-body { display: flex; padding: 28px 26px 24px; }
  .ct .hm-fam-ico { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ct .hm-fam-card, .ct .hm-fam-bg, .ct .hm-fam-arrow { transition: none; }
  .ct .hm-fam-card:hover { transform: none; }
}

/* 17. 짙은 바다색 (검정으로 보이던 곳) ---------------------------------- */
:root { --sea: #0E3A46; --sea-d: #0A2B34; --sea-l: #14505F; }
.ct .ct-float-top { background: var(--sea); }
.ct .ct-float-top:hover { background: var(--sea-d); }
.ct .ct-float a { box-shadow: 0 10px 26px rgba(0,0,0,.22); }

/* 18. 03 대표 제품 - 사진 없는 칸을 코드 타이포 썸네일로 --------------- */
.ct .hm-feat-grid { gap: 26px; }
.ct .hm-pc a {
  position: relative; overflow: hidden; border: 1px solid var(--line); background: #fff;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.ct .hm-pc a::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; z-index: 4;
  background: var(--brown); transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.ct .hm-pc a:hover { border-color: var(--line-2); box-shadow: 0 18px 44px rgba(18,20,23,.10); transform: translateY(-3px); }
.ct .hm-pc a:hover::after { width: 100%; }
.ct .hm-pc-img { position: relative; overflow: hidden; }
.ct .hm-pc-img img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.ct .hm-pc a:hover .hm-pc-img img { transform: scale(1.06); }
.ct .hm-pc-img.is-mark {
  background:
    linear-gradient(135deg, rgba(200,122,30,.18) 0%, rgba(200,122,30,0) 48%),
    linear-gradient(160deg, #15323B 0%, #0E242B 100%);
}
.ct .hm-pc-img.is-mark::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 90% at 28% 18%, #000 32%, transparent 76%);
  mask-image: radial-gradient(120% 90% at 28% 18%, #000 32%, transparent 76%);
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.ct .hm-pc a:hover .hm-pc-img.is-mark::before { transform: scale(1.09) translate(-6px, -4px); }
.ct .ct-pc-mark { gap: 16px; }
.ct .ct-pc-mark .ct-ico { width: 28px; height: 28px; color: var(--brown-lt); stroke-width: 1.4; opacity: .92; }
.ct .ct-pc-mark code {
  font-size: clamp(1.5rem, 2.1vw, 2.08rem); font-weight: 700; color: #fff;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.ct .ct-pc-mark strong { font-size: clamp(1.18rem, 1.6vw, 1.5rem); font-weight: 700; color: #fff; }
.ct .hm-pc-tx { padding: 24px 26px 26px; gap: 10px; }
.ct .hm-pc-tx strong { font-size: 1.3rem; letter-spacing: -0.03em; }
.ct .hm-pc-tx em { font-size: 1rem; color: var(--tx-2); }

/* 19. 04 적용 공정 - 제품 칸 높이 통일 --------------------------------- */
.ct .hm-flow-prods { display: grid; gap: 8px; align-content: start; }
.ct .hm-flow-prods li { min-width: 0; }
.ct .hm-flow-prods a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 74px; height: 100%; padding: 12px 14px;
}
.ct .hm-flow-rail .hm-flow-prods { grid-auto-flow: column; grid-auto-columns: minmax(152px, 1fr); }

/* 20. 05 고객사 - 로고에 박힌 배경색으로 타일을 채운다 ------------------ */
.ct .hm-marquee-track a { width: max(230px, 15vw); height: 148px; padding: 0; background: #fff; border-right: 1px solid var(--line); }
.ct .hm-marquee-track img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: contain; padding: 26px 30px; background: #fff;
  filter: grayscale(1) contrast(.9); opacity: .66; transition: filter .3s, opacity .3s;
}
.ct .hm-marquee-track a:hover img { filter: none; opacity: 1; }

/* 21. 07 하단 - 짙은 바다색 면으로 끊고 견적을 주인공으로 --------------- */
.ct .hm-comm { background: var(--sea); color: #fff; padding: 92px 0 84px; }
.ct .hm-comm-in { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 54px; align-items: start; }
.ct .hm-comm-t {
  font-size: 1.02rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brown-lt); margin-bottom: 24px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.ct .hm-news-tabs { border-bottom: 0; margin-bottom: 6px; }
.ct .hm-news-tabs button { color: rgba(255,255,255,.55); font-size: 1.06rem; font-weight: 600; background: none; border: 0; padding: 8px 0; margin-right: 22px; cursor: pointer; }
.ct .hm-news-tabs button.is-on { color: #fff; border-bottom: 2px solid var(--brown); }
.ct .hm-news-more { color: rgba(255,255,255,.6); }
.ct .hm-news-more:hover { color: var(--brown-lt); }
.ct .hm-news-list li { border-bottom: 1px solid rgba(255,255,255,.1); }
.ct .hm-news-list a { display: flex; align-items: center; gap: 18px; padding: 16px 0; color: #fff; }
.ct .hm-news-list a:hover .hm-news-s { color: var(--brown-lt); }
.ct .hm-date { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.ct .hm-date b { font-size: 1.42rem; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.ct .hm-date i { font-style: normal; font-size: 16px; color: rgba(255,255,255,.5); margin-top: 4px; }
.ct .hm-news-s { color: rgba(255,255,255,.88); }
.ct .hm-news-list .is-empty { color: rgba(255,255,255,.45); padding: 26px 0; border-bottom: 0; }
.ct .hm-cs-t { font-size: 1.1rem; color: rgba(255,255,255,.72); margin-bottom: 8px; }
.ct .hm-cs-tel a { display: block; font-size: clamp(2rem, 2.9vw, 2.64rem); font-weight: 700; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.ct .hm-cs-tel span { display: block; margin-top: 6px; font-size: 1rem; color: rgba(255,255,255,.55); }
.ct .hm-cs-info { margin-top: 18px; font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,.68); }
.ct .hm-cs-btns { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.ct .hm-cs-btns .ct-btn-b { background: transparent; border-color: rgba(255,255,255,.42); color: #fff !important; }
.ct .hm-cs-btns .ct-btn-b:hover { background: #fff; border-color: #fff; color: var(--sea) !important; }
.ct .hm-map { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.16); }
.ct .hm-map iframe { display: block; width: 100%; height: 300px; border: 0; filter: grayscale(.5) brightness(.95); transition: filter .35s; }
.ct .hm-map:hover iframe { filter: none; }

/* 22. 푸터 재설계 + 관리자 로그인 -------------------------------------- */
.ct .ct-footer { background: #0A1418; color: rgba(255,255,255,.62); padding: 0; }
.ct .ct-foot-grid { display: grid; grid-template-columns: 260px 1fr; gap: 48px; padding-top: 62px; padding-bottom: 46px; }
.ct .ct-foot-brand { display: flex; flex-direction: column; gap: 6px; }
.ct .ct-foot-brand img { width: 46px; filter: brightness(0) invert(1); opacity: .9; }
.ct .ct-foot-brand strong { font-size: 1.3rem; color: #fff; letter-spacing: -0.02em; margin-top: 10px; }
.ct .ct-foot-brand small { font-size: 16px; letter-spacing: .12em; color: rgba(255,255,255,.4); text-transform: uppercase; }
.ct .ct-foot-menu { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ct .ct-foot-menu a { font-size: 1.04rem; color: rgba(255,255,255,.82); }
.ct .ct-foot-menu a:hover { color: var(--brown-lt); }
.ct .ct-foot-menu b { font-weight: 700; color: #fff; }
.ct .ct-foot-info { display: flex; flex-wrap: wrap; gap: 6px 26px; font-style: normal; font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.58); }
.ct .ct-foot-info a { color: inherit; }
.ct .ct-foot-info a:hover { color: var(--brown-lt); }
.ct .ct-foot-bar { border-top: 1px solid rgba(255,255,255,.1); background: #071013; }
.ct .ct-foot-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.ct .ct-copy { margin: 0; font-size: 16px; color: rgba(255,255,255,.42); }
.ct .ct-admin-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.66);
  font-size: 16px; font-weight: 600; letter-spacing: .06em;
  transition: border-color .25s, color .25s, background .25s;
}
.ct .ct-admin-link .ct-ico { width: 15px; height: 15px; }
.ct .ct-admin-link:hover { border-color: var(--brown); background: var(--brown); color: #fff; }

@media (max-width: 1024px) {
  .ct .hm-comm-in { grid-template-columns: 1fr; gap: 42px; }
  .ct .hm-comm { padding: 64px 0 60px; }
  .ct .ct-foot-grid { grid-template-columns: 1fr; gap: 30px; padding-top: 46px; padding-bottom: 34px; }
}
@media (max-width: 720px) {
  .ct .ct-foot-bar-in { flex-direction: column; align-items: flex-start; }
}

/* 19-1. 04 공정 칸 - 호버 시 배경이 반투명이라 뒤 어두운 면이 비친다.
   배경만 바꾸고 글자색을 그대로 두면 묻히므로 함께 밝게 올린다. */
.ct .hm-flow-prods a:hover { background: rgba(200,122,30,.22); border-left-color: var(--brown-lt); }
.ct .hm-flow-prods a:hover code,
.ct .hm-flow-prods a:hover strong { color: #fff; }
.ct .hm-flow-prods a:hover span { color: rgba(255,255,255,.82); }
.ct .hm-flow-prods a:focus-visible code,
.ct .hm-flow-prods a:focus-visible strong { color: #fff; }
.ct .hm-flow-prods a:focus-visible { background: rgba(200,122,30,.22); }

/* 20-1. SFA 로고 - 예외를 걷어 다른 고객사와 똑같이 처리한다 (2026-10-20 고객 요청).
   PNG 에 밝은 배경색(#E9EEF5)이 박혀 있어 타일 배경만 같은 색으로 맞춘다.
   필터 · 투명도 · hover 는 공통 규칙을 그대로 따른다 — 평소 흑백, 마우스 올리면 칼라. */
.ct .hm-marquee-track a:has(img[src*="sfa-semicon"]) { background: #E9EEF5; }

/* 21-1. 07 하단 정리 ---------------------------------------------------
   지도 높이 충돌, 열 높이 불균형, 약한 제목과 버튼을 함께 잡는다. */

/* 지도 - aspect-ratio 와 iframe height 가 싸우고 있었다 */
.ct .hm-map { aspect-ratio: auto; height: 320px; }
.ct .hm-map iframe { height: 100%; }

/* 세 열을 같은 높이로 세우고 위에서 정렬 */
.ct .hm-comm-in { align-items: stretch; }
.ct .hm-comm-in > div { display: flex; flex-direction: column; }

/* 제목 - 작고 흐려서 축이 안 보였다. 앞에 짧은 선을 붙여 묶는다 */
.ct .hm-comm-t {
  position: relative; display: flex; align-items: center; gap: 12px;
  font-size: 1.16rem; font-weight: 700; letter-spacing: .1em;
  color: #fff; margin-bottom: 26px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.ct .hm-comm-t::before {
  content: ""; width: 22px; height: 2px; flex: none; background: var(--brown);
}

/* 공지가 없을 때 - 빈 칸 대신 바로가기 두 장 */
.ct .hm-news-alt { display: grid; gap: 12px; margin-top: 18px; }
.ct .hm-news-alt a {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.18); color: #fff;
  transition: background .25s, border-color .25s, transform .25s;
}
.ct .hm-news-alt a:hover { background: rgba(255,255,255,.07); border-color: var(--brown); transform: translateX(4px); }
.ct .hm-news-alt .ct-ico { width: 24px; height: 24px; flex: none; color: var(--brown-lt); }
.ct .hm-news-alt span { display: flex; flex-direction: column; gap: 3px; }
.ct .hm-news-alt strong { font-size: 1.12rem; font-weight: 700; }
.ct .hm-news-alt em { font-style: normal; font-size: 16px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.ct .hm-news-list .is-empty { padding: 20px 0 4px; }

/* 견적 - 전화 블록과 버튼을 한 덩어리로, 버튼을 키운다 */
.ct .hm-cs-tel { margin-bottom: 4px; }
.ct .hm-cs-btns { margin-top: auto; padding-top: 28px; gap: 12px; }
.ct .hm-cs-btns .ct-btn {
  min-height: 58px; padding: 0 30px; font-size: 1.1rem; font-weight: 600;
  position: relative; overflow: hidden;
}
.ct .hm-cs-btns .ct-btn-a::after {
  content: ""; position: absolute; inset: 0; background: var(--brown-d);
  transform: translateX(-101%); transition: transform .34s cubic-bezier(.2,.7,.3,1); z-index: -1;
}
.ct .hm-cs-btns .ct-btn-a { z-index: 0; }
.ct .hm-cs-btns .ct-btn-a:hover::after { transform: none; }

/* 오시는 길 - 지도 아래에 주소를 붙여 열을 채운다 */
.ct .hm-loc .hm-map { margin-bottom: 0; }

/* 23. 인사말 - 웨이퍼 SVG(스캔 라인 + 다이 점등) ------------------------ */
:root { --forest: #0F3B2E; --forest-d: #0B2C22; }
.ct .ct-fx-wafer2 { width: 100%; max-width: 260px; height: auto; display: block; }
.ct .ctw-ring { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.ct .ctw-arc { fill: none; stroke: var(--brown); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 148; stroke-dashoffset: 148; }
.ct .ctw-flat { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 150; stroke-dashoffset: 150; }
.ct .ctw-dies rect { fill: var(--cream); opacity: 0; }
.ct .ctw-dot { fill: var(--brown); opacity: 0; }
.ct .ctw-scanline { opacity: 0; }
.ct .reveal.is-in .ctw-arc { animation: ctw-draw 1.1s .2s cubic-bezier(.3,.7,.3,1) forwards; }
.ct .reveal.is-in .ctw-flat { animation: ctw-draw 1s .5s cubic-bezier(.3,.7,.3,1) forwards; }
.ct .reveal.is-in .ctw-dies rect { animation: ctw-pop .5s forwards; animation-delay: calc(.35s + var(--d) * .055s); }
.ct .reveal.is-in .ctw-dot { animation: ctw-pop .4s 1.3s forwards; }
.ct .reveal.is-in .ctw-scanline { animation: ctw-scan 3.6s 1.4s linear infinite; }
@keyframes ctw-draw { to { stroke-dashoffset: 0; } }
@keyframes ctw-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes ctw-scan { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(290px); } }
@media (prefers-reduced-motion: reduce) {
  .ct .ctw-arc, .ct .ctw-flat { stroke-dashoffset: 0; }
  .ct .ctw-dies rect, .ct .ctw-dot { opacity: 1; }
  .ct .ctw-scanline { display: none; }
}
/* 인사말 본문 - 문단 간격과 맺음말 */
.ct .ct-greet-body p { font-size: 1.1rem; line-height: 1.95; color: var(--tx); margin-bottom: 1.35em; max-width: var(--measure); }
.ct .ct-greet-body p.ct-greet-end { color: var(--ink); font-weight: 500; }
.ct .ct-greet-sign { display: flex; align-items: baseline; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.ct .ct-greet-sign span { font-size: 1rem; color: var(--tx-3); }
.ct .ct-greet-sign strong { font-size: 1.32rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }

/* 24. 서브 하단 CTA 띠 - 푸터와 색이 붙어 안 보였다. 짙은 초록으로 끊는다 */
.ct .ct-cta { background: var(--forest); color: #fff; }
.ct .ct-cta h2, .ct .ct-cta strong { color: #fff; }
.ct .ct-cta p { color: rgba(255,255,255,.76); }
.ct .ct-cta .ct-btn-line { background: transparent; border-color: rgba(255,255,255,.45); color: #fff !important; }
.ct .ct-cta .ct-btn-line:hover { background: #fff; border-color: #fff; color: var(--forest) !important; }

/* 23-1. 인사말 2차 — 다이가 배경색과 같아 안 보였다 + 좌우 높이 균형 ------ */
.ct .ctw-dies rect { fill: #D3D7DE; }           /* 배경 #EDEEF0 과 구분되게 */
.ct .ctw-dies rect:nth-of-type(3n) { fill: #C3C9D3; }
.ct .ct-fx-wafer2 { max-width: 300px; margin: 0 auto; }

.ct .ct-greet { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; }
.ct .ct-greet-side { background: var(--cream); padding: 34px 28px 30px; }
.ct .ct-greet-sticky { position: sticky; top: calc(var(--hdr) + 26px); }
.ct .ct-greet-side .ct-eyebrow { text-align: center; margin: 18px 0 0; }

.ct .ct-greet-facts { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.ct .ct-greet-facts li { background: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.ct .ct-greet-facts span { font-size: 16px; color: var(--tx-3); letter-spacing: .04em; }
.ct .ct-greet-facts strong { font-size: 1.22rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ct .ct-greet-facts em { font-style: normal; font-size: 16px; line-height: 1.55; color: var(--tx-2); }

/* 중간 타이틀 — 큰 제목과 본문 사이의 축 */
.ct .ct-greet-sub {
  position: relative; font-size: 1.32rem; font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink); margin: 2.1em 0 .7em; padding-left: 18px;
}
.ct .ct-greet-sub::before {
  content: ""; position: absolute; left: 0; top: .34em; bottom: .34em; width: 3px; background: var(--brown);
}
.ct .ct-greet-body > p:first-of-type { font-size: 1.18rem; color: var(--ink); line-height: 1.85; }

@media (max-width: 1024px) {
  .ct .ct-greet { grid-template-columns: 1fr; gap: 34px; }
  .ct .ct-greet-sticky { position: static; }
  .ct .ct-greet-facts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .ct .ct-greet-facts { grid-template-columns: 1fr; }
}

/* 23-2. 인사말 본문 - 70ch 제한 탓에 오른쪽이 비었다. 열을 꽉 채우고
   줄바꿈만 다듬는다(한글은 어절 단위, 영문 제품명은 중간에 자르지 않음). */
.ct .ct-greet-body p,
.ct .ct-greet-body .ct-greet-sub,
.ct .ct-greet-body .ct-greet-end { max-width: none; }
.ct .ct-greet-body p {
  word-break: keep-all;          /* 한글은 어절 단위로 끊는다 */
  overflow-wrap: break-word;     /* anywhere 는 영문 제품명을 아무 데서나 자른다 */
  text-wrap: pretty;             /* 마지막 줄에 한 단어만 남는 것을 막는다 */
  hyphens: none;
}
.ct .ct-greet-body > p:first-of-type { max-width: none; }
/* 넓은 화면에서 한 줄이 지나치게 길어지지 않도록 본문 열만 살짝 잡아 준다 */
@media (min-width: 1700px) {
  .ct .ct-greet-body { max-width: 1180px; }
}

/* 25. 회사개요 표 — 줄만 긋던 표를 라벨/값 구조로 다시 짠다 ------------- */
.ct .ct-kv { border-top: 2px solid var(--ink); border-collapse: separate; border-spacing: 0; }
.ct .ct-kv th, .ct .ct-kv td { border-bottom: 1px solid var(--line); vertical-align: top; }
.ct .ct-kv th {
  width: 190px; padding: 24px 0 24px 4px; text-align: left; background: transparent;
  font-size: 16px; font-weight: 600; letter-spacing: .08em; color: var(--tx-3);
  text-transform: uppercase; white-space: nowrap;
}
.ct .ct-kv td { padding: 22px 0 22px 28px; font-size: 1.1rem; line-height: 1.75; color: var(--ink); }
.ct .ct-kv tr { transition: background .2s; }
.ct .ct-kv tr:hover th { color: var(--brown-d); }
.ct .ct-kv tr:hover td { background: linear-gradient(90deg, rgba(200,122,30,.05), transparent 60%); }
/* 값 안의 제품 코드 나열에 숨을 준다 */
.ct .ct-kv td { word-break: keep-all; overflow-wrap: break-word; }

/* 26. 적용 공정 체인 — 박스를 버리고 선 위의 단계로 -------------------- */
.ct .ct-chain { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.ct .ct-chain::before {
  content: ""; position: absolute; left: 0; right: 0; top: 54px; height: 2px;
  background: linear-gradient(90deg, var(--brown) 0%, var(--line-2) 70%, var(--line) 100%);
}
.ct .ct-chain-box {
  position: relative; background: transparent; border: 0; border-radius: 0;
  padding: 0 18px 0 0; min-height: 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
.ct .ct-chain-no {
  font-size: 16px; font-weight: 700; letter-spacing: .1em; color: var(--brown);
  font-variant-numeric: tabular-nums; margin-bottom: 14px;
}
.ct .ct-chain-ico {
  width: 46px; height: 46px; display: grid; place-items: center; flex: none;
  background: #fff; border: 2px solid var(--line-2); border-radius: 50%;
  color: var(--tx-2); margin: 0 0 18px; position: relative; z-index: 1;
  transition: border-color .28s, color .28s, background .28s, transform .28s;
}
.ct .ct-chain-ico .ct-ico { width: 22px; height: 22px; }
.ct .ct-chain-box:hover .ct-chain-ico,
.ct .ct-chain-box:focus-visible .ct-chain-ico {
  border-color: var(--brown); color: #fff; background: var(--brown); transform: scale(1.06);
}
.ct .ct-chain-i { font-size: 1.14rem; font-weight: 700; line-height: 1.4; color: var(--ink); letter-spacing: -0.02em; word-break: keep-all; }
.ct .ct-chain-d { margin-top: 6px; font-size: 16px; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.ct .ct-chain-box:hover .ct-chain-i { color: var(--brown-d); }
.ct .ct-chain-link { display: none; }

/* 27. 제품 분류 — 필터 상자를 걷어내고 선으로 정리 ---------------------- */
.ct .ct-filter { background: transparent; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 26px 0; }
.ct .ct-filter-search { position: relative; margin-bottom: 20px; }
.ct .ct-filter-search input {
  width: 100%; height: 56px; padding: 0 18px 0 48px; font-size: 1.08rem;
  border: 1px solid var(--line-2); border-radius: 0; background: #fff; transition: border-color .2s;
}
.ct .ct-filter-search input:focus { border-color: var(--brown); outline: none; }
.ct .ct-filter-row { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 12px; }
.ct .ct-filter-label { flex: none; width: 92px; padding-top: 9px; font-size: 16px; font-weight: 600; letter-spacing: .06em; color: var(--tx-3); }
.ct .ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct .ct-chip {
  padding: 8px 16px; font-size: 16px; font-weight: 500; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--tx-2); cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.ct .ct-chip:hover { border-color: var(--brown); color: var(--brown-d); }
.ct .ct-chip.is-on { background: var(--char); border-color: var(--char); color: #fff; }
.ct .ct-filter-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }

/* 분류 카드(ct-cat) — 메인 제품군 카드와 같은 언어로 */
.ct .ct-cat-no { font-size: 16px; font-weight: 700; letter-spacing: .1em; color: var(--brown); font-variant-numeric: tabular-nums; }
.ct .ct-cat-ico { color: var(--brown); }
.ct .ct-cat-meta { font-size: 16px; color: var(--tx-3); font-variant-numeric: tabular-nums; }

@media (max-width: 1280px) {
  .ct .ct-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .ct .ct-chain::before { display: none; }
}
@media (max-width: 720px) {
  .ct .ct-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct .ct-kv th { width: 110px; padding-right: 10px; white-space: normal; }
  .ct .ct-kv td { padding-left: 14px; }
  .ct .ct-filter-row { flex-direction: column; gap: 8px; }
  .ct .ct-filter-label { width: auto; padding-top: 0; }
}

/* 25-1. 회사개요 - 표와 '적용 공정' 제목이 붙어 있었다 */
.ct div:has(> .ct-kv) + .ct-shead-row { margin-top: 96px; }
.ct .ct-shead-row + .ct-muted { margin-bottom: 30px; }
.ct .ct-muted + .ct-chain { margin-top: 40px; }

/* 26-1. 공정 아이콘 - 호버 시 선 색이 배경(앰버)과 같아져 사라졌다.
   다른 규칙이 svg color 를 앰버로 덮고 있어 특이성을 올려 흰색으로 고정한다. */
.ct .ct-chain-box:hover .ct-chain-ico .ct-ico,
.ct .ct-chain-box:focus-visible .ct-chain-ico .ct-ico,
.ct .ct-chain-box:hover .ct-chain-ico svg,
.ct .ct-chain-box:focus-visible .ct-chain-ico svg {
  color: #fff !important; stroke: #fff !important;
}

/* 24-1. CTA 띠 - 짙은 초록 위에 공정 사진을 은은하게 깐다 */
.ct .ct-cta { position: relative; overflow: hidden; isolation: isolate; }
.ct .ct-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("/assets/ct/img/photo/cleanroom-1.jpg");
  background-size: cover; background-position: 62% 38%;
  opacity: .5; filter: blur(2px) grayscale(.5) brightness(.8) contrast(1.06) saturate(.7);
  transform: scale(1.06);
}
.ct .ct-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(15,59,46,.95) 0%, rgba(15,59,46,.9) 38%, rgba(15,59,46,.6) 72%, rgba(15,59,46,.5) 100%);
}

/* 27-1. 분류 카드 - 아이콘과 제목을 한 줄로, '자세히 보기'를 원형 버튼으로 */
.ct .ct-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ct .ct-cat {
  display: grid; grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas: "no no" "ico title" "desc desc" "meta meta";
  column-gap: 14px; align-content: start;
  padding: 30px 28px 26px; background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--char);
  position: relative; overflow: hidden; transition: border-color .3s, box-shadow .3s, transform .3s;
}
.ct .ct-cat::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--brown); transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.ct .ct-cat:hover { border-color: var(--line); box-shadow: 0 16px 40px rgba(18,20,23,.08); transform: translateY(-3px); }
.ct .ct-cat:hover::after { width: 100%; }

.ct .ct-cat-no { grid-area: no; margin-bottom: 16px; font-size: 16px; font-weight: 700; letter-spacing: .1em; color: var(--brown); font-variant-numeric: tabular-nums; }
.ct .ct-cat-ico {
  grid-area: ico; width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--brown); margin: 0;
  transition: background .28s, border-color .28s, color .28s;
}
.ct .ct-cat-ico .ct-ico { width: 23px; height: 23px; }
.ct .ct-cat:hover .ct-cat-ico { background: var(--brown); border-color: var(--brown); color: #fff; }
.ct .ct-cat:hover .ct-cat-ico .ct-ico { color: #fff !important; stroke: #fff !important; }
.ct .ct-cat h3 {
  grid-area: title; align-self: center; margin: 0;
  font-size: 1.44rem; letter-spacing: -0.03em; line-height: 1.3; word-break: keep-all;
}
.ct .ct-cat p { grid-area: desc; margin: 20px 0 24px; color: var(--tx-2); line-height: 1.7; }
.ct .ct-cat-meta {
  grid-area: meta; display: inline-flex; align-items: center; gap: 12px;
  font-size: 1.06rem; font-weight: 600; color: var(--ink);
}
.ct .ct-cat-meta .ct-ico {
  width: 38px; height: 38px; padding: 10px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink);
  transition: background .28s, border-color .28s, color .28s, transform .28s;
}
.ct .ct-cat:hover .ct-cat-meta { color: var(--brown-d); }
.ct .ct-cat:hover .ct-cat-meta .ct-ico {
  background: var(--brown); border-color: var(--brown); color: #fff !important; stroke: #fff !important; transform: translateX(4px);
}
@media (max-width: 1024px) { .ct .ct-cats { grid-template-columns: 1fr; } }

/* 28. 수상 블록 - 검정 대신 짙은 남색 + 상패 사진을 어둡게 깐다 --------- */
:root { --navy: #131E36; --navy-d: #0C1526; }
.ct .ct-award {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy); padding: 38px; align-items: center;
}
.ct .ct-award::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: url("/assets/ct/img/company/amkor-award-2013.jpg");
  background-size: cover; background-position: 30% 52%;
  filter: blur(22px) grayscale(.5) brightness(.8) saturate(.8);
  transform: scale(1.5); opacity: .5;
}
/* 트로피 워터마크 - 그라데이션 위에 올려 형태가 읽히게 한다 */
.ct .ct-award::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    url("/assets/ct/img/company/trophy-bg.svg"),
    linear-gradient(100deg, rgba(19,30,54,.9) 0%, rgba(19,30,54,.62) 34%, rgba(19,30,54,.8) 58%, rgba(19,30,54,.84) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 18px center, 0 0;
  background-size: auto 100%, cover;
  opacity: 1;
}
.ct .ct-award figure, .ct .ct-award img { position: relative; z-index: 1; }
.ct .ct-award img { box-shadow: 0 18px 40px rgba(0,0,0,.42); }
.ct .ct-award h3 { color: #fff; letter-spacing: -0.03em; }
.ct .ct-award p { color: rgba(255,255,255,.9); line-height: 1.8; }
.ct .ct-award .ct-eyebrow { color: var(--brown-lt); letter-spacing: .18em; }

/* 29. 고객사 페이지 재설계 ------------------------------------------------
   관계도 SVG 가 display:inline 이라 margin:0 auto 가 먹지 않아 760px 그림이
   1152px 칸 왼쪽에 붙어 있었다. 블록으로 바꾸고 전체 구성을 다시 짠다.     */
.ct .ct-fx-net { display: block; margin: 0 auto; max-width: 820px; }
.ct .ct-cusrel {
  background: var(--cream); border: 1px solid var(--line);
  padding: 30px 28px 16px; margin-bottom: 30px;
}
.ct .ct-cusrel > .ct-eyebrow { margin: 0 0 4px; }
.ct .ct-fx-net .ct-fx-net-node circle { fill: #fff; stroke: var(--char); stroke-width: 2; }
.ct .ct-fx-net .ct-fx-net-center circle { fill: var(--sea); }

/* 숫자 요약 3칸 */
.ct .ct-cusfacts {
  list-style: none; margin: 0 0 70px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line-2); border: 1px solid var(--line-2);
}
.ct .ct-cusfacts li { background: #fff; padding: 24px 26px 22px; }
.ct .ct-cusfacts strong {
  display: block; font-size: 2.3rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.ct .ct-cusfacts em { font-style: normal; font-size: 1.05rem; font-weight: 600; color: var(--brown-d); margin-left: 5px; letter-spacing: 0; }
.ct .ct-cusfacts span { display: block; margin-top: 10px; font-size: 16px; color: var(--tx-3); letter-spacing: .03em; }

/* 고객사 카드 — 7개 + 문의 카드 = 4열 2행으로 딱 맞는다 */
.ct .ct-cus-head { margin: 0 0 26px; }
.ct .ct-cus-head p { margin: 8px 0 0; }
.ct .ct-cuslist {
  list-style: none; margin: 0 0 90px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.ct .ct-cus {
  position: relative; display: grid; grid-template-rows: auto 1fr auto;
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--char);
  padding: 20px 22px 22px; min-height: 216px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.ct .ct-cus:hover { border-top-color: var(--brown); box-shadow: 0 16px 34px rgba(16,24,40,.10); transform: translateY(-4px); }
.ct .ct-cus-no { font-size: 16px; font-weight: 700; letter-spacing: .1em; color: var(--brown); font-variant-numeric: tabular-nums; }
.ct .ct-cus-logo { display: grid; place-items: center; padding: 14px 0 16px; }
.ct .ct-cus-logo img { max-width: 100%; max-height: 54px; width: auto; object-fit: contain; }
.ct .ct-cus-word { font-weight: 800; font-size: 1.55rem; color: var(--char); letter-spacing: -0.03em; text-align: center; }
.ct .ct-cus-txt strong { display: block; font-size: 1.06rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; word-break: keep-all; line-height: 1.45; }
.ct .ct-cus-txt em { display: block; margin-top: 3px; font-style: normal; font-size: 16px; color: var(--tx-3); }

/* 여덟 번째 칸 — 문의 카드 */
.ct .ct-cus-cta { background: var(--sea); border-color: var(--sea); border-top-color: var(--brown); padding: 0; }
.ct .ct-cus-cta:hover { box-shadow: 0 16px 34px rgba(14,58,70,.26); }
.ct .ct-cus-cta a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 20px 22px 22px; text-decoration: none; color: #fff; }
.ct .ct-cus-cta .ct-cus-no { color: var(--brown-lt); font-size: 1.2rem; line-height: 1; }
.ct .ct-cus-cta strong { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.03em; word-break: keep-all; line-height: 1.45; }
.ct .ct-cus-cta-b { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); word-break: keep-all; }
.ct .ct-cus-cta-a { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; color: var(--brown-lt); }
.ct .ct-cus-cta-a svg { width: 16px; height: 16px; transition: transform .25s; }
.ct .ct-cus-cta:hover .ct-cus-cta-a svg { transform: translateX(4px); }

/* 공급 이력 — 연도 레일 타임라인 */
.ct .ct-sup { padding-top: 56px; border-top: 1px solid var(--line); }
.ct .ct-sup-head { margin-bottom: 36px; }
.ct .ct-sup-head p { margin: 8px 0 0; }
.ct .ct-sup-years { list-style: none; margin: 0; padding: 0; }
.ct .ct-sup-year { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 36px; padding-bottom: 36px; }
.ct .ct-sup-year::before { content: ""; position: absolute; left: 10px; top: 18px; bottom: -4px; width: 1px; background: var(--line-2); }
.ct .ct-sup-year:last-child { padding-bottom: 0; }
.ct .ct-sup-year:last-child::before { display: none; }
.ct .ct-sup-y { position: relative; padding-left: 34px; }
.ct .ct-sup-y::before {
  content: ""; position: absolute; left: 4px; top: 9px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; border: 3px solid var(--brown);
}
.ct .ct-sup-y b { display: block; font-size: 1.95rem; font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ct .ct-sup-y span { display: inline-block; margin-top: 10px; padding: 3px 10px; font-size: 16px; color: var(--tx-3); background: var(--cream); font-variant-numeric: tabular-nums; }
.ct .ct-sup-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct .ct-sup-items li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 15px 18px; background: #fff; border: 1px solid var(--line); border-left: 2px solid var(--line-2);
  transition: border-left-color .25s, background .25s;
}
.ct .ct-sup-items li:hover { border-left-color: var(--brown); background: linear-gradient(90deg, rgba(200,122,30,.05), transparent 70%); }
.ct .ct-sup-items time { font-size: 16px; font-weight: 700; color: var(--brown-d); font-variant-numeric: tabular-nums; padding-top: 2px; }
.ct .ct-sup-items span { font-size: 1.02rem; line-height: 1.62; color: var(--ink); word-break: keep-all; overflow-wrap: break-word; }

@media (max-width: 1180px) {
  .ct .ct-cuslist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ct .ct-cuslist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct .ct-cusfacts { grid-template-columns: 1fr; }
  .ct .ct-sup-year { grid-template-columns: 1fr; gap: 16px; }
  .ct .ct-sup-year::before { display: none; }
  .ct .ct-sup-y { padding-left: 0; }
  .ct .ct-sup-y::before { display: none; }
  .ct .ct-sup-items { grid-template-columns: 1fr; }
  .ct .ct-cusrel { padding: 22px 16px 10px; }
}
@media (max-width: 560px) {
  .ct .ct-cuslist { grid-template-columns: 1fr; }
}

.ct .ct-cta { margin-top: 40px; }   /* 섹션 아래 패딩과 겹쳐 170px 가 비어 있었다 */

/* 30. 오시는 길 재설계 — 작은 지도 + 회색 카드 + 아래 빈 여백을 걷어낸다 --- */
.ct .ct-lc-map { position: relative; }
.ct .ct-lc-frame { position: relative; height: 560px; overflow: hidden; border: 1px solid var(--line); background: var(--cream); }
.ct .ct-lc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* 구글 임베드가 지도 좌상단에 비어 있는 흰 카드를 띄운다 — 그 자리를 덮는다 */
.ct .ct-lc-card {
  position: absolute; left: 0; top: 0; width: min(500px, 100%);
  background: #fff; border-top: 3px solid var(--brown); padding: 30px 34px 30px;
  box-shadow: 18px 22px 54px rgba(16,24,40,.22);
}
.ct .ct-lc-card .ct-eyebrow { margin: 0 0 8px; }
.ct .ct-lc-card h2 { margin: 0 0 12px; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.ct .ct-lc-addr { margin: 0; font-size: 1.06rem; line-height: 1.7; color: var(--tx); word-break: keep-all; }
.ct .ct-lc-addr-kr { margin: 6px 0 0; font-size: 16px; color: var(--tx-3); word-break: keep-all; }
.ct .ct-lc-open { margin: 20px 0 10px; font-size: 16px; letter-spacing: .06em; color: var(--tx-3); }
.ct .ct-lc-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ct .ct-lc-links a {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 16px;
  font-weight: 600; color: var(--tx-2); border: 1px solid var(--line-2); background: #fff;
  transition: border-color .2s, color .2s;
}
.ct .ct-lc-links a:hover { border-color: var(--brown); color: var(--brown-d); }
.ct .ct-lc-links svg { width: 14px; height: 14px; }

.ct .ct-lc-info {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr;
  gap: 1px; background: var(--line-2); border: 1px solid var(--line-2);
}
.ct .ct-lc-info li { background: #fff; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 5px; }
.ct .ct-lc-ico { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--brown); margin-bottom: 8px; }
.ct .ct-lc-ico svg { width: 19px; height: 19px; }
.ct .ct-lc-k { font-size: 16px; letter-spacing: .05em; color: var(--tx-3); }
.ct .ct-lc-v { font-size: 1.08rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.6; word-break: keep-all; font-variant-numeric: tabular-nums; }
.ct .ct-lc-v a { color: inherit; }
.ct .ct-lc-v a:hover { color: var(--brown-d); }
.ct .ct-lc-info small { font-size: 16px; color: var(--tx-3); word-break: keep-all; }

@media (max-width: 1180px) { .ct .ct-lc-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ct .ct-lc-frame { height: 360px; }
  .ct .ct-lc-card { position: static; width: auto; box-shadow: none; border: 1px solid var(--line); border-top: 3px solid var(--brown); }
  .ct .ct-lc-info { grid-template-columns: 1fr; margin-top: 18px; }
}

/* 31. 제품 목록 — 두 찾기 구역 분리 + 카드 재설계 ------------------------- */
.ct .ct-find { margin-bottom: 46px; }
.ct .ct-find-h { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
.ct .ct-find-no {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--char); color: #fff; font-size: 16px; font-weight: 700;
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.ct .ct-find-h .ct-h3 { margin: 0 !important; font-size: 1.64rem; font-weight: 800; letter-spacing: -0.04em; }
.ct .ct-find-h p { margin: 8px 0 0; }
/* 02 구역은 패널로 감싸 01 과 확실히 갈라 놓는다 */
.ct .ct-find-alt {
  background: var(--cream); border: 1px solid var(--line);
  padding: 34px 34px 32px; margin-bottom: 0;
}
.ct .ct-find-alt .ct-find-no { background: var(--sea); }
.ct .ct-find-alt .ct-filter { border: 0; padding: 0; background: transparent; }
.ct .ct-find-alt .ct-filter-search input { background: #fff; border-color: var(--line); }
.ct .ct-find-alt .ct-filter-row:last-child { margin-bottom: 0; }

/* 결과 줄 — 패널 밖으로 꺼내 카드 목록의 머리로 삼는다 */
.ct .ct-results {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  margin: 46px 0 22px; padding-bottom: 16px; border-bottom: 2px solid var(--ink);
}
.ct .ct-results-n { margin: 0; display: flex; align-items: baseline; gap: 7px; }
.ct .ct-results-n strong { font-size: 2rem; font-weight: 800; letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.ct .ct-results-n span { font-size: 1.02rem; color: var(--tx-3); }
.ct .ct-results-reset {
  padding: 8px 15px; font-size: 16px; font-weight: 600; color: var(--tx-2);
  background: #fff; border: 1px solid var(--line-2); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.ct .ct-results-reset:hover { border-color: var(--brown); color: var(--brown-d); }

/* 카드 — 아이콘을 빼고 제목과 버튼으로 무게를 옮긴다 */
.ct .ct-pgrid { gap: 22px; }
.ct .ct-pcard {
  position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.ct .ct-pcard { border-top: 3px solid var(--line-2); }
.ct .ct-pcard::before {
  content: ""; position: absolute; left: 0; top: -3px; z-index: 2; height: 3px; width: 100%;
  background: var(--brown); transform: scaleX(0); transform-origin: left;
  transition: transform .44s cubic-bezier(.2,.7,.3,1);
}
.ct .ct-pcard:hover { border-color: var(--line-2); box-shadow: 0 20px 44px rgba(16,24,40,.12); transform: translateY(-5px); }
.ct .ct-pcard:hover::before { transform: scaleX(1); }
.ct .ct-pcard-link { position: relative; z-index: 1; padding: 30px 28px 26px; }
/* 상자가 또렷하게 보이도록 — 상단 띠는 늘 보이고, 우상단 모서리에 액센트 */
.ct .ct-pcard::after {
  content: ""; position: absolute; right: 0; top: 0; z-index: 2;
  width: 26px; height: 26px; pointer-events: none;
  border-top: 2px solid var(--brown); border-right: 2px solid var(--brown);
  opacity: 0; transform: translate(-6px, 6px);
  transition: opacity .34s, transform .34s cubic-bezier(.2,.7,.3,1);
}
.ct .ct-pcard:hover::after { opacity: 1; transform: translate(0, 0); }
.ct .ct-pcard-top { margin-bottom: 16px; min-height: 27px; }  /* 코드 칩이 없는 제품도 제목 줄을 맞춘다 */
.ct .ct-pcard h3 { font-size: 1.52rem; font-weight: 800; letter-spacing: -0.035em; color: var(--ink); line-height: 1.3; margin-bottom: 10px; overflow-wrap: break-word; }
.ct .ct-pcard p { font-size: 1.06rem; line-height: 1.68; color: var(--tx-2); margin-bottom: 18px; word-break: keep-all; }
.ct .ct-pcard .ct-tags { margin-bottom: 22px; }
.ct .ct-pcard-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; font-size: 16px; font-weight: 700; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2);
  transition: background .28s, border-color .28s, color .28s, gap .28s, box-shadow .28s;
}
.ct .ct-pcard-more .ct-ico { width: 15px; height: 15px; transition: transform .28s; }
.ct .ct-pcard:hover .ct-pcard-more {
  background: var(--char); border-color: var(--char); color: #fff; gap: 15px;
  box-shadow: 0 8px 18px rgba(22,24,29,.22);
}
.ct .ct-pcard:hover .ct-pcard-more .ct-ico { transform: translateX(3px); }

@media (max-width: 900px) {
  .ct .ct-find-alt { padding: 24px 20px 22px; }
  .ct .ct-find-h { gap: 13px; }
  .ct .ct-find-no { width: 38px; height: 38px; }
  .ct .ct-results { margin-top: 34px; }
}

/* 32. 공정 단계(01·02·03) 다시 — 번호가 따로 떠 있고 간격이 빡빡했다 ------ */
.ct .ct-chain { padding-top: 16px; margin-top: 8px; row-gap: 46px; }
.ct .ct-chain::before { top: 44px; height: 2px; background: var(--line-2); left: 28px; right: calc(100% / var(--n) - 28px); }
/* 지나온 구간만 앰버로 — 선이 단계와 같은 높이에 놓인다 */
.ct .ct-chain::after {
  content: ""; position: absolute; left: 28px; top: 44px; height: 2px; width: 0;
  background: var(--brown); transition: width .5s cubic-bezier(.2,.7,.3,1);
}
.ct .ct-chain:hover::after { width: calc(100% - 100% / var(--n)); }
.ct .ct-chain-box { position: relative; padding: 0 24px 0 0; }
/* 번호를 원 위에 배지로 붙인다 */
.ct .ct-chain-no {
  position: absolute; left: 42px; top: -10px; z-index: 3; margin: 0;
  min-width: 28px; height: 28px; padding: 0 8px; display: grid; place-items: center;
  background: var(--char); color: #fff; font-size: 16px; font-weight: 700;
  letter-spacing: .03em; border-radius: 999px; font-variant-numeric: tabular-nums;
  transition: background .28s, transform .28s;
}
.ct .ct-chain-box:hover .ct-chain-no { background: var(--brown); transform: translateY(-2px); }
.ct .ct-chain-ico {
  width: 56px; height: 56px; margin: 0 0 24px; border: 1px solid var(--line-2);
  background: #fff; border-radius: 50%; position: relative; z-index: 2;
}
.ct .ct-chain-ico .ct-ico { width: 25px; height: 25px; }
.ct .ct-chain-box strong { display: block; min-height: 2.9em; font-size: 1.2rem; font-weight: 700; line-height: 1.45; letter-spacing: -0.03em; color: var(--ink); word-break: keep-all; }
.ct .ct-chain-d {
  display: inline-block; margin-top: 12px; padding: 4px 11px; background: var(--cream);
  font-size: 16px; color: var(--tx-3); font-variant-numeric: tabular-nums;
}
.ct .ct-chain-box:hover .ct-chain-d { background: rgba(200,122,30,.12); color: var(--brown-d); }

/* 구역 사이 간격을 넓힌다 — 붙어 있어 어디까지가 한 덩어리인지 안 보였다 */
.ct .ct-find { margin-bottom: 78px; }
.ct .ct-find-h { margin-bottom: 34px; }
.ct .ct-find-alt { margin-bottom: 0; }
.ct .ct-results { margin-top: 58px; }

@media (max-width: 1280px) {
  .ct .ct-chain::after { display: none; }
}
@media (max-width: 720px) {
  .ct .ct-chain { row-gap: 34px; }
  .ct .ct-find { margin-bottom: 52px; }
}

/* 33. 오시는 길 — 사무실 · 공장 2칸, 고객사 3열 ------------------------- */
.ct .ct-lc-sites {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line-2); border: 1px solid var(--line-2);
}
.ct .ct-lc-sites li { background: #fff; padding: 26px 28px 24px; }
.ct .ct-lc-tag {
  display: inline-block; margin-bottom: 12px; padding: 5px 13px;
  background: var(--char); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .04em;
}
.ct .ct-lc-tag.is-plant { background: var(--sea); }
.ct .ct-lc-sites strong { display: block; font-size: 1.12rem; font-weight: 700; line-height: 1.6; color: var(--ink); letter-spacing: -0.02em; word-break: keep-all; }
.ct .ct-lc-sites small { display: block; margin-top: 5px; font-size: 16px; color: var(--tx-3); word-break: keep-all; }
.ct .ct-lc-sites em {
  display: block; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-style: normal; font-size: 16px; color: var(--tx-2); font-variant-numeric: tabular-nums;
}
.ct .ct-lc-sites em a { color: inherit; }
.ct .ct-lc-sites em a:hover { color: var(--brown-d); }

/* 고객사 8곳 + 문의 카드 = 9칸 → 3열이 딱 맞는다 */
.ct .ct-cuslist { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .ct .ct-lc-sites { grid-template-columns: 1fr; }
  .ct .ct-cuslist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .ct .ct-cuslist { grid-template-columns: 1fr; } }

/* 34. 새 CI 로고 — 단색 필터를 걷고 상호 간격을 넓힌다 (2026-10-08 고객 요청) */
.ct .ct-brand img,
.ct.has-visual .ct-header:not(.is-scrolled) .ct-brand img,
.has-visual .ct-header:not(.is-scrolled) .ct-brand img,
.has-visual .ct-header:has(.ct-gnb:hover) .ct-brand img { filter: none; opacity: 1; }
.ct .ct-brand { gap: 16px; }
.ct .ct-brand img { width: 54px; }
.ct .ct-brand-tx { gap: 3px; }
.ct .ct-brand-tx small { letter-spacing: .2em; font-size: 16px; }
.ct .ct-brand-tx strong { letter-spacing: .055em; font-size: 1.46rem; }
/* 히어로 사진 위에서도 로고와 상호가 읽히도록 그림자를 얇게 깐다 */
.ct.has-visual .ct-header:not(.is-scrolled) .ct-brand img { filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
@media (max-width: 720px) {
  .ct .ct-brand { gap: 11px; }
  .ct .ct-brand img { width: 42px; }
  .ct .ct-brand-tx strong { letter-spacing: .03em; }
}

/* 35. 인증 카드 — 값 칸이 좁아 기관명이 네 줄로 쪼개졌다 ------------------ */
.ct .ct-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ct .ct-cert { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 26px; align-items: start; }
.ct .ct-cert-img { display: block; border: 1px solid var(--line); background: #fff; }
.ct .ct-cert-img img { width: 100%; height: auto; display: block; }
.ct .ct-cert .ct-kv th { width: 96px; padding: 13px 0 13px 2px; font-size: 16px; white-space: nowrap; }
.ct .ct-cert .ct-kv td { padding: 12px 0 12px 14px; font-size: 16px; line-height: 1.55; word-break: keep-all; overflow-wrap: break-word; }
.ct .ct-cert h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.035em; }
@media (max-width: 1100px) {
  .ct .ct-certs { grid-template-columns: 1fr; }
  .ct .ct-cert { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 640px) { .ct .ct-cert { grid-template-columns: 1fr; gap: 18px; } }

/* 36. 2026-10-12 고객 수정 --------------------------------------------- */
/* (1) 영어에서 'Semiconductor Process Materials'(263px)가 양옆 열을 침범했다.
       열 폭을 묶어 두 줄로 흘리고, 세 번째 열도 오른쪽으로 더 민다. */
.ct .ct-drop { max-width: 212px; }
.ct .ct-drop a { white-space: normal; line-height: 1.45; }
.ct .ct-gnb > ul > li:nth-child(3) .ct-drop { --sx: 28px; }

/* (4) 푸터 로고도 흰색 단색이 아니라 CI 색 그대로 */
.ct .ct-foot-brand img { filter: none; opacity: 1; width: 54px; }
.ct .ct-foot-brand strong { letter-spacing: .055em; }
.ct .ct-foot-brand small { letter-spacing: .12em; }

/* 37. 모바일 가로 넘침 (2026-10-20) -----------------------------------
   .hm-flow-rail 의 제품칸이 grid-auto-flow:column + minmax(152px) 라
   제품 3개가 가로로 서면서 152*3+여백 = 472px 를 만들어 문서를 493px 로
   밀었다(화면 390px). 그 탓에 드로어 닫기(X) 버튼도 화면 밖으로 나갔다. */
@media (max-width: 720px) {
  .ct .hm-flow-rail .hm-flow-prods { grid-auto-flow: row; grid-auto-columns: auto; }
  .ct .hm-flow-rail-t { padding: 18px 16px; }
}

/* 38. 모바일 버튼 넘침 (2026-10-20) -----------------------------------
   제품 문의 칸의 버튼이 줄바꿈되지 않아 356px 를 차지, 278px 칸을 넘겼다. */
@media (max-width: 720px) {
  .ct .ct-btn { max-width: 100%; white-space: normal; text-align: center; }
  .ct .ct-psec-inq { padding: 26px 20px; }
  .ct .ct-psec-inq .ct-btn { width: 100%; }
}

/* 39. 모바일 줄바꿈 가독성 (2026-10-20) -------------------------------
   좁은 폭에서 끝줄에 글자 두어 개만 남는 고아줄이 생긴다. 제목은 줄 길이를
   고르게(balance), 본문은 마지막 줄이 너무 짧지 않게(pretty) 흘린다. */
@media (max-width: 720px) {
  .ct h1, .ct h2, .ct h3, .ct h4,
  .ct .ct-greet-sub, .ct .ct-h3, .ct .ct-h4 { text-wrap: balance; }
  .ct p, .ct li, .ct dd, .ct figcaption, .ct .ct-copy { text-wrap: pretty; }
}

/* 40. 일본어 · 중국어 줄바꿈 (2026-10-20) ------------------------------
   word-break:keep-all 은 어절이 있는 한국어용인데 컴포넌트 20곳에 언어 구분
   없이 박혀 있었다. 띄어쓰기가 없는 일본어 · 중국어에서는 끊을 자리가 사라져
   표 한 칸이 522px 까지 늘어나 모바일 문서폭을 573px 로 밀었다.
   CJK 는 글자 사이에서 끊는 것이 정상이므로 두 언어만 해제한다. */
.ct.lang-jp, .ct.lang-cn { word-break: normal; }
.ct.lang-jp *, .ct.lang-cn * { word-break: normal !important; }
/* <<< ct-redesign */