/* ============================================================
 * ydi.css — YDI(YES Diamond) 사이트 전용 오버라이드
 * YPM 디자인 시스템(style.css)을 그대로 쓰되, YDI 브랜드에서
 * 달라져야 하는 최소한만 여기서 덮어쓴다. style.css 뒤에 로드할 것.
 * ============================================================ */

/* [nav 드롭다운 깜빡임 방지 — hover intent]
   기존 드롭다운은 transition:all .28s 로 페이드인/아웃 한다. 그래서 마우스로
   상단 메뉴 위를 빠르게 지나가면 여러 드롭다운이 반쯤 뜬 채 깜빡였다(테두리+그림자가
   검은 상자처럼 보임). "여는 것만 살짝 지연"시켜, 스쳐 지나갈 땐 아예 열리지 않고
   잠깐 머무를 때만 열리게 한다. 닫힐 땐 지연 없이 바로 닫는다. */
body[class] .nav-dropdown { transition: opacity .14s ease, transform .14s ease, box-shadow .14s ease !important; transition-delay: 0s !important; }
body[class] .nav-item:hover .nav-dropdown { transition-delay: .18s !important; }

/* [언어 선택기 국기]
   기존 `.lang-cur svg { width:11px }` 및 open 시 회전 규칙은 캐럿용인데 모든 svg에
   적용되므로, 국기(.fico)는 더 높은 특이도로 크기 고정 + 회전 방지한다. */
.lang-cur svg.fico { width:20px; height:13px; flex-shrink:0; border-radius:2px; }
.lang-pick.open .lang-cur svg.fico { transform:none; }
.lang-list .lang-btn { gap:9px; }
.lang-list .lang-btn .fico { flex-shrink:0; border-radius:2px; }

/* [메가 드롭다운 컬럼 겹침 방지 — 영문 긴 라벨]
   메가 메뉴는 각 드롭다운을 자기 nav 항목 왼쪽에 absolute 배치하고 글자 폭
   (width:max-content, max 260px)만큼 넓힌다. 영문 모드에서 "Company" 항목은
   좁은데 그 아래 "Patents & Certifications" 라벨이 길어 옆 컬럼(Semiconductor)을
   침범해 글자가 겹쳤다. 컬럼 폭을 항목 간격 안쪽으로 제한하고 긴 라벨은 단어
   단위로 줄바꿈시켜 침범을 막는다. (한글 라벨은 짧아 그대로 한 줄로 나온다.) */
.nav-menu.mega .nav-dropdown { max-width: 150px; }
.nav-menu.mega .nav-dropdown a { white-space: normal; word-break: keep-all; line-height: 1.3; }

/* [모바일 nav 보정] style.css 뒤쪽(2196행)의 무조건부 규칙이 모바일 숨김
   미디어쿼리(502행)를 덮어써서, 좁은 화면에서도 상단 메뉴가 그대로 나와
   가로로 잘려 보인다(원본 YPM CSS의 버그). ydi.css 가 뒤에 로드되므로
   여기서 좁은 화면일 때 상단 메뉴를 감추고 햄버거(사이트맵)만 남긴다. */
@media (max-width: 900px) {
  body .nav-menu { display: none !important; }
  body .nav-right { display: flex !important; align-items: center; gap: 8px; }
}

/* 푸터 로고: YDI 로고 원본이 짙은 회색이라 어두운 푸터에서 안 보인다.
   흰색으로 반전시켜 얹는다(원본 PNG를 white 버전으로 만들 도구가 없어 CSS로 처리). */
/* 푸터 CI 는 상단(nav)과 동일하게 컬러로 표시(흑백 흰색필터 제거) */
.footer-logo img { filter:none; opacity:1; }

/* 하단 저작권 줄의 이메일 (YPM 푸터처럼 copyright 앞에 배치) */
.footer-copy-mail { color:var(--brand-bright); font-weight:600; text-decoration:none; }
.footer-copy-mail:hover { text-decoration:underline; }
.footer-copy-sep { margin:0 10px; opacity:.4; }

/* 나란히 놓이는 관계사 로고(YEST·YHT·YOT)도 어두운 푸터에서 흰색으로 */
.footer-affil { display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:22px; }
.footer-affil a { display:inline-flex; align-items:center; }
.footer-affil img { height:26px; width:auto; filter:brightness(0) invert(1); opacity:.6; transition:opacity .2s; }
/* YPM 로고 원본이 다른 관계사보다 커 보여 스케일을 맞춘다 */
.footer-affil a[href*="ypm"] img { height:20px; }
.footer-affil a:hover img { opacity:1; }
.footer-affil-label { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-right:4px; }

/* 제품 갤러리(썸네일 그리드) — sub 페이지 공용 */
.pg-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:20px 0 8px; }
@media(max-width:768px){ .pg-gallery{ grid-template-columns:repeat(2,1fr); gap:14px; } }
.pg-item {
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); display:flex; flex-direction:column;
}
.pg-item:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--brand-bright); }
.pg-thumb { position:relative; aspect-ratio:4/3; background:var(--gray-100); overflow:hidden; }
.pg-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.pg-item:hover .pg-thumb img { transform:scale(1.04); }
.pg-cap { padding:12px 16px; font-size:.86rem; font-weight:600; color:var(--gray-700); line-height:1.4; }
.pg-cap:empty { display:none; }

/* 소재/스펙 좌우 2단 (제품의 용도 / 특징) */
.use-feature { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:8px; }
@media(max-width:768px){ .use-feature{ grid-template-columns:1fr; gap:18px; } }

/* 왼쪽 세로 바가 붙은 소제목 (구 .left_bar 대체) */
.bar-title {
  display:flex; align-items:center; gap:12px; margin:38px 0 18px;
  font-size:1.05rem; font-weight:800; color:var(--gray-900); letter-spacing:-.01em;
}
.bar-title::before { content:""; width:5px; height:20px; background:var(--brand-main); border-radius:2px; flex-shrink:0; }

/* 이미지 라이트박스 (구 window.open 팝업 대체)
   ★ 기본 상태를 opacity:0(렌더됨)이 아니라 display:none(렌더 안 됨)으로 둔다.
     예전엔 opacity:0 + transition 이라, 페이지 로드/이동 때 이 전체화면 어두운
     오버레이가 잠깐 나타났다 사라지는 현상이 있었다. display:none 이면 열기
     전까지 아예 그려지지 않아 어떤 상황에서도 깜빡이지 않는다(사이트맵과 동일 방식). */
.lb-backdrop {
  position:fixed; inset:0; z-index:5000; background:rgba(15,16,20,.86);
  display:none; align-items:center; justify-content:center; padding:32px;
}
.lb-backdrop.open { display:flex; }
/* 작은 원본도 확대 화면을 적절히 채우도록 최소 크기 지정(큰 원본엔 영향 없음).
   ※ 저해상도 원본은 확대 시 흐릿할 수 있으며, 고화질 이미지로 교체하면 선명해진다. */
.lb-backdrop img { width:auto; min-width:min(56vw, 520px); max-width:92vw; max-height:88vh; object-fit:contain; border-radius:6px; box-shadow:0 24px 80px rgba(0,0,0,.5); background:#fff; }
.lb-close { position:absolute; top:24px; right:28px; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:24px; cursor:pointer; transition:background .2s; }
.lb-close:hover { background:rgba(255,255,255,.25); }

/* 클릭 가능한 갤러리 썸네일 커서 */
.pg-thumb[data-full]{ cursor:zoom-in; }

/* [산업용 공구 카테고리 — 사진 준비 중 placeholder]
   실제 이미지가 준비되면 build_products.js 의 photoSlots(n) 을 gallery([...]) 로
   바꾸면 자동으로 사진 갤러리로 대체된다. */
.pg-thumb--empty{ display:flex; align-items:center; justify-content:center; border:1px dashed var(--gray-300); background:var(--gray-50); }
.pg-thumb--empty .pg-empty-txt{ font-size:.82rem; font-weight:600; color:var(--gray-400); letter-spacing:.02em; }

/* ===== 공지사항 목록/보기 ===== */
.notice-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.notice-filter a{padding:8px 16px;border:1px solid var(--gray-200);border-radius:30px;font-size:.88rem;font-weight:600;color:var(--gray-600);text-decoration:none;transition:var(--transition)}
.notice-filter a:hover{border-color:var(--brand-bright);color:var(--brand-main)}
.notice-filter a.on{background:var(--brand-main);border-color:var(--brand-main);color:#fff}
.notice-table{width:100%;border-collapse:collapse;border-top:2px solid var(--brand-main)}
.notice-table th{background:var(--gray-50);padding:13px 14px;font-size:.82rem;font-weight:700;color:var(--gray-600);border-bottom:1px solid var(--gray-200)}
.notice-table td{padding:15px 14px;border-bottom:1px solid var(--gray-100);font-size:.92rem;color:var(--gray-700);vertical-align:middle}
.notice-table td.c{text-align:center;color:var(--gray-500);white-space:nowrap}
.notice-table tr:hover td{background:var(--gray-50)}
.notice-table a.nt{color:var(--gray-900);font-weight:600;text-decoration:none}
.notice-table a.nt:hover{color:var(--brand-main)}
.n-badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap}
.n-badge.important{background:#fde8e6;color:#c0392b}
.n-badge.recruit{background:#eaf6ec;color:#2c8a3d}
.n-badge.general{background:#eef1f4;color:#5a6570}
.n-pin{color:var(--brand-main);font-weight:800;margin-right:5px}
.n-new{display:inline-block;margin-left:6px;font-size:.62rem;font-weight:800;color:#fff;background:#c0392b;border-radius:3px;padding:1px 5px;vertical-align:middle}
.notice-pager{display:flex;gap:6px;justify-content:center;margin-top:28px}
.notice-pager a,.notice-pager span{padding:8px 13px;border:1px solid var(--gray-200);border-radius:4px;font-size:.88rem;color:var(--gray-700);text-decoration:none}
.notice-pager .cur{background:var(--brand-main);border-color:var(--brand-main);color:#fff;font-weight:700}
.notice-empty{text-align:center;padding:60px 0;color:var(--gray-500)}
.notice-view-head{border-bottom:2px solid var(--gray-900);padding-bottom:18px}
.notice-view-head h2{font-size:1.45rem;font-weight:800;color:var(--gray-900);margin:10px 0 10px;line-height:1.4}
.notice-view-meta{font-size:.85rem;color:var(--gray-500);display:flex;gap:16px;flex-wrap:wrap}
.notice-view-body{padding:30px 4px;font-size:.98rem;line-height:1.9;color:var(--gray-700);border-bottom:1px solid var(--gray-200);min-height:120px;word-break:break-word}
.notice-view-body img{max-width:100%;height:auto}
.notice-view-nav{display:flex;justify-content:center;margin-top:26px}
/* 공지 첨부파일 */
.notice-attach{padding:20px 4px 4px}
.notice-attach-title{font-size:.9rem;font-weight:800;color:var(--gray-900);margin-bottom:10px}
.notice-attach ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.notice-attach li a{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--gray-200);border-radius:8px;text-decoration:none;color:var(--gray-700);font-size:.9rem;font-weight:600;transition:var(--transition);background:var(--gray-50)}
.notice-attach li a:hover{border-color:var(--brand-main);color:var(--brand-main);background:var(--brand-light)}
.notice-attach .na-ic{flex-shrink:0}
.notice-attach .na-name{flex:1;word-break:break-all}
.notice-attach .na-size{flex-shrink:0;font-size:.8rem;color:var(--gray-500);font-weight:500}

/* 강점/특징 카드 그리드 */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:900px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .feat-grid{ grid-template-columns:1fr; } }
.feat-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:28px 26px; box-shadow:var(--shadow-sm); transition:var(--transition); }
.feat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--brand-bright); }
.feat-ico { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--brand-light); color:var(--brand-main); margin-bottom:16px; }
.feat-ico svg { width:24px; height:24px; }
.feat-card h4 { font-size:1.05rem; font-weight:800; color:var(--gray-900); margin-bottom:8px; letter-spacing:-.01em; }
.feat-card p { font-size:.9rem; color:var(--gray-600); line-height:1.65; }

/* 회사개요 등 데이터 표 (구 .bbs_style 대체) */
.data-table { width:100%; border-collapse:collapse; border-top:2px solid var(--brand-main); font-size:.92rem; }
.data-table th, .data-table td { padding:14px 18px; border-bottom:1px solid var(--gray-200); text-align:left; vertical-align:top; }
.data-table th { background:var(--gray-50); font-weight:700; color:var(--gray-900); width:16%; white-space:nowrap; }
.data-table td { color:var(--gray-700); }
.data-table .cen { text-align:center; }
.data-table thead th { background:var(--brand-light); color:var(--brand-dark); text-align:center; width:auto; }
.data-table .txt-red { color:var(--red-accent); font-weight:700; }
.table-scroll { overflow-x:auto; }
.table-scroll .data-table { min-width:640px; }
.table-cap { font-size:.82rem; color:var(--gray-500); margin-top:10px; }

/* 인증 카드 (특허/인증) */
.cert-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media(max-width:900px){ .cert-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .cert-grid{ grid-template-columns:1fr; } }
.cert-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); }
.cert-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.cert-thumb { aspect-ratio:3/4; background:var(--gray-100); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cert-thumb img { width:100%; height:100%; object-fit:contain; padding:14px; transition:transform .4s; }
.cert-card:hover .cert-thumb img { transform:scale(1.04); }
.cert-name { padding:14px 16px; text-align:center; font-weight:700; color:var(--gray-800); font-size:.92rem; border-top:1px solid var(--gray-100); }

/* 소재/용도 리스트 (list_style_bult 대체) */
.use-block h3 { font-size:1rem; font-weight:800; color:var(--brand-dark); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.use-list { list-style:none; padding:0; margin:0; }
.use-list > li { position:relative; padding:0 0 10px 20px; color:var(--gray-700); font-size:.94rem; line-height:1.6; }
.use-list > li::before { content:""; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--brand-main); }
.use-list ul { list-style:none; padding:6px 0 0 4px; margin:0; }
.use-list ul li { position:relative; padding:0 0 6px 14px; color:var(--gray-500); font-size:.88rem; }
.use-list ul li::before { content:"–"; position:absolute; left:0; top:0; }

/* R&D 설비 카드 */
.equip-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media(max-width:768px){ .equip-grid{ grid-template-columns:1fr; } }
.equip-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); }
.equip-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.equip-thumb { aspect-ratio:16/10; background:var(--gray-100); overflow:hidden; cursor:zoom-in; }
.equip-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.equip-card:hover .equip-thumb img { transform:scale(1.05); }
.equip-body { padding:18px 22px; }
.equip-cat { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-main); }
.equip-body h4 { font-size:1.05rem; font-weight:800; color:var(--gray-900); margin-top:4px; }

/* 개인정보처리방침 문서 */
.policy-doc { color:var(--gray-700); font-size:.94rem; line-height:1.75; }
.policy-doc .policy-lead { color:var(--gray-600); }
.policy-doc .policy-eff { font-weight:700; color:var(--brand-dark); margin:10px 0 26px; }
.policy-doc h3 { font-size:1.08rem; font-weight:800; color:var(--gray-900); margin:32px 0 12px; padding-top:22px; border-top:1px solid var(--gray-200); letter-spacing:-.01em; }
.policy-doc h3:first-of-type { border-top:0; padding-top:0; }
.policy-doc p { margin-bottom:12px; }
.policy-doc ul { list-style:none; padding:0; margin:0 0 14px; }
.policy-doc ul li { position:relative; padding:0 0 8px 16px; }
.policy-doc ul li::before { content:""; position:absolute; left:2px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--brand-main); }
.policy-box { background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:18px 22px; margin:12px 0 16px; }
.policy-box p { margin:4px 0; font-size:.9rem; }

/* ============================================================
 * 플로팅 문의 버튼 + 문의 보조화면(드로어)   [전 페이지 공용 — ydi.js 가 주입]
 *  · 우측 하단 원형 버튼(기존 .to-top '맨 위로' 버튼 바로 위). 클릭하면
 *    오른쪽에서 문의 폼 패널이 슬라이드로 열린다(보조화면).
 *  · 문의 전용 페이지(body.page-contact)에는 같은 폼이 본문에 이미 있으므로 숨긴다.
 *  · 폼 스타일이 style.css 에서 body.page-contact 로 묶여 있어 다른 페이지엔
 *    적용되지 않는다. 그래서 여기서 .cdrawer 안 폼을 자체 완결로 스타일한다.
 * ============================================================ */
.cfab{position:fixed;right:24px;bottom:84px;z-index:81;width:48px;height:48px;padding:0;border:none;border-radius:50%;
  background:var(--brand-main);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);transition:background .2s,transform .2s}
.cfab:hover{background:var(--brand-dark);transform:translateY(-2px)}
.cfab svg{width:23px;height:23px;display:block}
.cfab-tip{position:absolute;right:60px;top:50%;white-space:nowrap;background:var(--gray-900);color:#fff;
  font-size:.78rem;font-weight:600;padding:6px 11px;border-radius:5px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-50%) translateX(6px);transition:opacity .18s,transform .18s}
.cfab:hover .cfab-tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
/* 숨김은 ydi.js 가 #inquiryForm 유무로 판단(문의 페이지만). CSS 로 page-contact 를
   숨기면 공지·고객의소리 같은 support ASP 페이지도 걸려서 규칙을 두지 않는다. */
@media(max-width:900px){.cfab{right:14px;bottom:70px;width:44px;height:44px}.cfab-tip{display:none}}

.cdrawer-back{position:fixed;inset:0;z-index:2000;background:rgba(15,20,25,.44);opacity:0;visibility:hidden;transition:opacity .28s}
.cdrawer-back.open{opacity:1;visibility:visible}
.cdrawer{position:fixed;top:0;right:0;bottom:0;z-index:2001;width:432px;max-width:92vw;background:#fff;
  transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
  box-shadow:-14px 0 44px rgba(0,0,0,.22)}
.cdrawer.open{transform:none}
.cdrawer-hd{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 22px;
  background:var(--brand-deep);color:#fff}
.cdrawer-hd b{font-size:17px;font-weight:800;display:block}
.cdrawer-hd small{font-size:12px;color:rgba(255,255,255,.72);display:block;margin-top:2px;font-weight:400}
.cdrawer-x{flex-shrink:0;background:none;border:none;color:#fff;cursor:pointer;width:34px;height:34px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.cdrawer-x:hover{background:rgba(255,255,255,.16)}
.cdrawer-x svg{width:20px;height:20px;display:block}
.cdrawer-bd{flex:1;overflow-y:auto;padding:20px 22px 28px}
.cdrawer .cdf-g{margin-bottom:13px}
.cdrawer .cdf-two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.cdrawer label.cdf-l{display:block;font-size:.8rem;font-weight:700;color:var(--gray-700);margin-bottom:5px}
.cdrawer .cdf-req{color:var(--brand-main);margin-left:3px}
.cdrawer input.cdf-in,.cdrawer select.cdf-in,.cdrawer textarea.cdf-in{width:100%;border:1px solid var(--gray-300,#d6d9dd);
  border-radius:6px;padding:10px 12px;font-size:.92rem;font-family:inherit;color:var(--gray-900);background:#fff}
.cdrawer textarea.cdf-in{min-height:96px;resize:vertical}
.cdrawer .cdf-in:focus{outline:none;border-color:var(--brand-main);box-shadow:0 0 0 3px rgba(244,112,40,.15)}
.cdrawer .cdf-cnt{text-align:right;font-size:.72rem;color:var(--gray-500);margin-top:3px}
.cdrawer .cdf-priv{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;padding:13px 14px;
  margin:4px 0 15px;font-size:.76rem;color:var(--gray-600);line-height:1.7}
.cdrawer .cdf-priv h4{margin:0 0 6px;font-size:.8rem;color:var(--gray-800)}
.cdrawer .cdf-row{display:flex;align-items:flex-start;gap:8px;margin-top:9px;font-size:.8rem;color:var(--gray-700);cursor:pointer}
.cdrawer .cdf-row input{margin-top:2px;flex-shrink:0}
.cdrawer .cdf-sb{width:100%;border:none;border-radius:7px;padding:14px;font-size:1rem;font-weight:700;color:#fff;
  background:var(--brand-main);cursor:pointer;transition:background .2s}
.cdrawer .cdf-sb:hover:not(:disabled){background:var(--brand-dark)}
.cdrawer .cdf-sb:disabled{background:#d9c3b3;cursor:not-allowed}
.cdrawer .cdf-msg{border-radius:8px;padding:13px 14px;font-size:.85rem;line-height:1.6;margin-bottom:14px}
.cdrawer .cdf-msg.ok{background:#e8f5ee;border:1px solid #1a7a4a;color:#1a7a4a}
.cdrawer .cdf-msg.err{background:#fdecea;border:1px solid #c0392b;color:#c0392b}