/* ===================================================
   WEB FONT IMPORTS (상업적 이용 무료 / OFL 1.1)
   --------------------------------------------------
   Pretendard Variable  : orioncactus/pretendard (SIL OFL 1.1)
     → 한국어 + 라틴. Variable Font (weight 45–920).
     → 동적 서브셋: 사용된 글자만 청크 로딩.
   Noto Sans JP         : Google / Noto Project (SIL OFL 1.1)
     → 일본어 + 라틴 fallback.
   =================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ===================================================
   NAMYANG NOVITECH — nyt.css
   Design System v2.1 (2026-06-29)
   =================================================== */

/* outer table height="100%" 체인이 동작하려면 html/body도 100% 필요 */
html, body { height: 100%; margin: 0; padding: 0; }

/* -------------------------------------------------------
   Base Typography
   ------------------------------------------------------- */
body {
  font-family: var(--font-base);
  font-size:   var(--fs-base);
  line-height: var(--lh-base);
  color:        var(--gray-600);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break:   keep-all;      /* 한국어 단어 단위 줄바꿈 */
  overflow-wrap: break-word;
}

/* 일본어 콘텐츠 영역 */
.lang-ja, [lang="ja"] {
  font-family: var(--font-ja);
  word-break:  normal;         /* 일본어는 음절 단위 줄바꿈이 기본 */
}
/*
 * 위 규칙은 <html lang="ja"> 에 걸린다. 그런데 word-break 는 body 에 직접
 * 적혀 있어서, 상속으로 내려온 값이 body 의 제 값에 밀린다.
 * 그래서 일본어에서도 keep-all 이 그대로 살아 있었다.
 *
 * 일본어는 낱말 사이에 공백이 없다. keep-all 이면 문장 하나가 통째로 한 낱말이 되고,
 * 첫 화면 제목이 1247px 짜리 한 줄이 되어 판을 옆으로 밀어냈다.
 * body 를 직접 짚어 되돌린다.
 */
html[lang="ja"] body { word-break: normal; }

/* ---------------------------------------------------
   CSS Custom Properties (Design Tokens)
   --------------------------------------------------- */
:root {
  /* Brand — Teal (로고 logo_e_green.png 기준) */
  --brand-900: #1A5A50;
  --brand-700: #2E7A6E;
  --brand-500: #4DA89A;
  --brand-300: #7DC5BC;
  --brand-100: #D4EEEB;

  /* Green — Forest (내비 hover, 섹션 헤더 계열) */
  --green-700: #1F4D2A;
  --green-500: #288c43;
  --green-200: #5CB840;

  /* Neutral */
  --gray-700: #333333;
  --gray-600: #4A4A4A;
  /*
   * 평가 25: 본문 명암비 7:1 이상, 최소 4.5:1.
   * 전에는 gray-300(#B0B0B0) 이 흰 바탕에서 2.2:1 이라 사실상 안 보였다.
   * "연회색 글씨를 쓰지 않는다" 가 이 항목의 문장이다.
   */
  --gray-500: #5A5A5A;   /* 7.0:1 */
  --gray-400: #6E6E6E;   /* 5.3:1 */
  --gray-300: #767676;   /* 4.6:1 — 흰 바탕에서 최소선 */
  --gray-200: #DDDDDD;
  --gray-100: #F5F5F5;
  --white:    #FFFFFF;

  /* Typography — Font Stacks */
  /* KO + EN: Pretendard Variable (OFL 1.1) → 시스템 폰트 순으로 fallback */
  --font-base: 'Pretendard Variable', 'Pretendard',
               -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic',
               'Noto Sans KR', Arial, sans-serif;
  /* JA: Noto Sans JP (OFL 1.1) */
  --font-ja:   'Noto Sans JP',
               'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo',
               'Apple SD Gothic Neo', sans-serif;
  /* CJK legacy alias — 동일하게 Pretendard 사용 */
  --font-cjk:  'Pretendard Variable', 'Pretendard',
               'Apple SD Gothic Neo', 'Malgun Gothic', Arial, sans-serif;

  /*
   * Font Size Scale
   *
   * 디자인 평가 21·22 를 기준으로 올렸다.
   *   21  본문 17px 이상 — 웹 기본값(14~15px)보다 크게 잡는다
   *   22  어떤 글자도 13px 아래로 내려가지 않는다 (각주·캡션·푸터 포함)
   *
   * 이 회사의 사이트를 실제로 보는 사람이 70대다.
   * 전에는 본문이 13px 이었고 화면 글자의 97~99% 가 17px 미만이었다.
   */
  --fs-xs:     13px;   /* caption, footer small — 여기가 바닥 */
  --fs-sm:     15px;   /* secondary UI, breadcrumb */
  --fs-base:   17px;   /* body text */
  --fs-md:     18px;   /* sub-heading, nav */
  --fs-lg:     22px;   /* page section title */
  --fs-xl:     26px;   /* page title */
  --fs-2xl:    31px;   /* hero / display */

  /* Font Weight Scale */
  --fw-normal:   400;  /* body */
  --fw-medium:   500;  /* nav links, sub-labels */
  --fw-semibold: 600;  /* section headers, sidebar */
  --fw-bold:     700;  /* headings, cta */

  /* Line Height */
  --lh-tight:  1.45;
  --lh-base:   1.75;   /* 평가 23: 1.7배 이상. 한글은 줄이 붙으면 안 읽힌다 */
  --lh-loose:  1.9;

  /* Letter Spacing */
  --tracking-tight:  -0.01em;  /* Korean heading 미세 조정 */
  --tracking-normal:  0em;

  /* Sub-page background gradient stops (computed from brand-300/100) */
  --sub-grad-1: #b8ddd9;
  --sub-grad-2: #d8ecea;
  --sub-grad-3: #edf7f5;
  --sub-grad-4: #f6fbfa;
}

/* ---------------------------------------------------
   Functional Color Aliases (nyt.css 내부에서 사용)
   --------------------------------------------------- */
/* 섹션 헤더 배경 클래스 */
.sec-hd-dark   { background-color: var(--brand-700); }
.sec-hd-accent { background-color: var(--brand-300); }
/* 사이드바 헤더 배경 */
.sidebar-hd    { background-color: var(--brand-500); }
/* 서브 페이지 콘텐츠 영역 배경 */
.sub-back {
  background: linear-gradient(to bottom, var(--sub-grad-1) 0%, var(--sub-grad-2) 30%, var(--sub-grad-3) 70%, var(--sub-grad-4) 100%);
  padding-bottom: 60px;
  text-align: center;
}
/* 콘텐츠 카드 — 그라디언트 위의 흰 직사각형 (배너 포함) */
.content-card {
  background-color: #ffffff;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.11);
  clip-path: inset(0 -25px -25px -25px);
  margin: 0 auto;
  text-align: left;
}
/* 배너 행 td — 좌우 내부 여백과 중앙 정렬. (배너가 상자 밖 화면 폭에 있으면(.after-hero) 첫 줄은 배너가 아니다)
   위쪽은 비워 둔다. 배너가 카드 맨 위에 딱 붙는다. */
table.content-card:not(.after-hero) > tbody > tr:first-child > td {
  padding: 0 16px 0;
  box-sizing: border-box;
  text-align: center;
}
/* 배너 이미지 */
table.content-card:not(.after-hero) > tbody > tr:first-child td > img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
/* ------------------------------------------------------------------
 * 메인 배너 — 화면 폭 전체 (index.htm .main-hero, 고객 요청 2026-09-28 #2)
 *   hero-cap  : 화면 가득 + 높이 제한 (iframe style 의 max-height)
 *   hero-full : 화면 가득, 사진 비율 그대로
 *   td.hero-overlap : 흰 상자를 배너 아래쪽에 겹치고 경계를 흐린다
 *   td.hero-white   : 메인 바탕을 흰색으로, 상자 그림자를 없앤다
 * 높이는 iframe 의 aspect-ratio(1017 : 관리자 배너 높이)로 정한다.
 * ------------------------------------------------------------------ */
.main-hero { position: relative; width: 100%; line-height: 0; text-align: left; }
.main-hero iframe { display: block; width: 100%; height: 33vw; border: 0; }
@supports (aspect-ratio: 1 / 1) { .main-hero iframe { height: auto; } }
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(203, 230, 227, 0), rgba(203, 230, 227, .95));
}
td.hero-overlap > table.content-card.after-hero {
  position: relative; z-index: 2;
  margin-top: calc(var(--hero-gap, 0px) - 56px);
  clip-path: none;                       /* 위쪽 그림자도 보이게 — 배너에 얹힌 모양 */
}
td.hero-white { background: #fff; }
td.hero-white > table.content-card.after-hero { box-shadow: none; margin-top: var(--hero-gap, 0px); }
@media (max-width: 640px) {
  /* 폰에서는 배너가 낮아(약 130px) 56px 를 겹치면 사진 글자가 가린다 */
  td.hero-overlap > table.content-card.after-hero { margin-top: calc(var(--hero-gap, 0px) - 12px); }
  .hero-fade { display: none; }
}

/* 배너 iframe (메인 페이지) */
table.content-card:not(.after-hero) > tbody > tr:first-child td > iframe {
  display: block;
  margin: 0 auto;
}
/* 카드 내부 — 상단 고정 */
table.content-card > tbody > tr > td {
  vertical-align: top;
}
/* 사이드바 td (배너 다음 행, 멀티 컬럼) */
table.content-card > tbody > tr:nth-child(2) > td:first-child:not(:last-child) {
  padding-top: 14px;
  padding-left: 16px;
  padding-right: 20px;
  padding-bottom: 28px;
  border-right: 1px solid var(--gray-200);
  box-sizing: border-box;
}
/* 콘텐츠 td — 좌우 여백 동일하게 */
table.content-card > tbody > tr:nth-child(2) > td:last-child:not(:first-child) {
  padding-top: 14px;
  padding-left: 16px;
  padding-right: 20px;
  padding-bottom: 28px;
  box-sizing: border-box;
}
/* 콘텐츠 영역 내 고정 폭 이미지 오버플로 방지 */
table.content-card > tbody > tr:nth-child(2) > td:last-child img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------
   사이드바 링크
   --------------------------------------------------- */
.sttop {
  font: var(--fs-sm)/1.5 var(--font-base);
  color: var(--gray-600);
  text-decoration: none;
}

a.left {
  font: var(--fw-bold) var(--fs-md)/var(--lh-loose) var(--font-base);
  color: var(--gray-700);
  line-height: 24px;
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}
a.left:hover { color: var(--brand-700); text-decoration: underline; }

a.leftsmall {
  font: var(--fs-xs)/var(--lh-loose) var(--font-base);
  color: var(--gray-500);
  line-height: 18px;
  text-decoration: none;
}
a.leftsmall:hover { text-decoration: underline; }

a.leftsmall2 {
  font: var(--fs-xs)/12px var(--font-base);
  color: var(--gray-500);
  text-decoration: none;
}
a.leftsmall2:hover { text-decoration: underline; }

a.left3 {
  font: var(--fw-bold) var(--fs-sm)/var(--lh-loose) var(--font-base);
  color: var(--brand-300);
  line-height: 18px;
  text-decoration: none;
}
a.left3:hover { text-decoration: underline; }

/* ---------------------------------------------------
   푸터 링크
   --------------------------------------------------- */
a.footer2 {
  font: var(--fw-bold) var(--fs-md)/20px var(--font-base);
  color: var(--brand-500);
  text-decoration: underline;
}

a.footer3 {
  font: var(--fs-xs)/20px var(--font-base);
  color: var(--gray-700);
  text-decoration: none;
}
a.footer3:hover { text-decoration: underline; }

/* ---------------------------------------------------
   텍스트 유틸리티
   --------------------------------------------------- */
.tit {
  font: var(--fw-bold) var(--fs-2xl) var(--font-base);
  color: var(--gray-700);
}
.stit {
  font: var(--fw-bold) var(--fs-2xl) var(--font-base);
  color: var(--gray-700);
}
/*
 * 제목 칸과 위치표시(HOME > ...) 칸이 폭을 나눠 가진다.
 * 폭을 안 정해 두니 브라우저가 글자 수대로 갈라, 위치표시가 길수록 제목이 좁아졌다.
 * 그래서 "Acoustic Interior Board_ABN" 이 두 줄로 꺾이고 오른쪽은 비어 있었다.
 * 제목이 먼저다 — 위치표시는 작은 회색 글씨라 두 줄이 되어도 괜찮다.
 */
td.stit { width: 58%; }
.stit h1 {
  font: var(--fw-bold) var(--fs-2xl)/var(--lh-tight) var(--font-base);
  color: var(--gray-700);
  margin: 0;
}
.ttext {
  font: var(--fs-base)/var(--lh-base) var(--font-base);
  color: var(--gray-600);
  text-decoration: none;
}
.bold {
  font: var(--fw-bold) var(--fs-base)/35px var(--font-base);
  color: var(--gray-700);
  text-decoration: none;
}
.footer1 {
  font: var(--fw-bold) var(--fs-xs) var(--font-base);
  color: var(--gray-600);
  text-decoration: none;
}
.footer3 {
  font: var(--fw-bold) var(--fs-xs)/var(--lh-loose) var(--font-base);
  color: var(--gray-400);
}
.t1 {
  font: var(--fw-bold) var(--fs-xs) var(--font-base);
}
.ttit {
  font: var(--fw-bold) var(--fs-lg) var(--font-base);
  color: var(--brand-700);
  text-decoration: underline;
}
.ttwxt2 {
  font: var(--fw-bold) var(--fs-xs) var(--font-base);
  color: var(--brand-300);
}
.tit3 {
  font: var(--fw-bold) var(--fs-md) var(--font-base);
  color: var(--gray-700);
}
.t2 {
  font: var(--fw-bold) var(--fs-xs)/var(--lh-loose) var(--font-base);
  color: var(--brand-500);
}
.bold2 {
  font: var(--fw-bold) var(--fs-xl)/30px var(--font-base);
  color: var(--brand-500);
  text-decoration: none;
}
.stit2 {
  font: var(--fw-bold) var(--fs-lg) var(--font-base);
  color: var(--brand-900);
}
.tttext {
  font: var(--fw-normal) var(--fs-base)/var(--lh-base) var(--font-base);
  color: var(--gray-500);
  text-decoration: none;
}
.tttextwhite {
  font: var(--fw-bold) var(--fs-sm)/var(--lh-loose) var(--font-base);
  color: var(--white);
  text-decoration: none;
}
.fi2 {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 20px;
  color: var(--gray-500);
}

/* ---------------------------------------------------
   네비게이션 내부 링크
   --------------------------------------------------- */
a.ne {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 24px;
  text-decoration: none;
  color: var(--gray-500);
}

a.global {
  font-family: var(--font-base);
  font-size: var(--fs-xs);
  line-height: 15px;
  text-decoration: none;
  color: var(--gray-600);
}

a.sitemap {
  font-family: var(--font-base);
  font-size: var(--fs-xs);
  line-height: 18px;
  text-decoration: none;
  color: var(--gray-600);
}
a.sitemap:hover { text-decoration: underline; }

a.topmenu {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 15px;
  text-decoration: none;
  color: var(--gray-700);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}
a.topmenu:hover { color: var(--white); }

a.topmenun {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 15px;
  text-decoration: none;
  color: var(--gray-700);
  font-weight: var(--fw-bold);
}

a.topmenunew {
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  line-height: 15px;
  text-decoration: none;
  color: var(--white);
}
a.topmenunew:hover { text-decoration: underline; }

.toplink {
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  line-height: 15px;
  text-decoration: none;
  color: var(--white);
  font-weight: var(--fw-bold);
}

a.footer {
  font-family: var(--font-base);
  font-size: var(--fs-xs);
  line-height: 15px;
  text-decoration: none;
  color: var(--gray-600);
}

a.banner {
  font-family: var(--font-base);
  font-size: var(--fs-xs);
  line-height: 12px;
  text-decoration: none;
  color: var(--white);
}
a.banner:hover { font-weight: var(--fw-bold); }

/* ---------------------------------------------------
   테이블 셀 (게시판, 데이터)
   --------------------------------------------------- */
.td_right {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--gray-500);
  padding: 5px;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: var(--gray-200);
}
.td_left {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--gray-500);
  padding: 5px;
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: var(--gray-200);
}

/* ---------------------------------------------------
   메인 페이지 요소
   --------------------------------------------------- */
.main {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  text-decoration: none;
  color: var(--gray-500);
}
.maindate {
  font-family: var(--font-base);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  text-decoration: none;
  color: var(--gray-400);
}
/* ---------------------------------------------------
   푸터 — 옛 원본 모습
   왼쪽 주소·연락처 / 오른쪽 인증마크 그림. 바탕은 옅은 회색.
   --------------------------------------------------- */
.site-foot {
  /*
   * 오른쪽 인증마크 그림(img/common/footer.jpg)의 바탕색과 같은 값이다.
   * 그림 바탕이 #e7e7e7 인데 여기가 #efefef 라, 그림이 놓인 자리만
   * 네모나게 어둡게 도드라져 보였다. 그림에 흰 여백을 남길 수 없는 JPG 라
   * 띠 쪽을 그림에 맞췄다. 그림을 바꾸면 이 값도 같이 맞춰야 한다.
   */
  background: #e7e7e7;
  border-top: 1px solid #d5d5d5;
  /* 위아래가 높아 보여 줄였다 (26/24 -> 16/14, 위 여백 30 -> 16) */
  padding: 14px 0 12px;
  margin-top: 14px;
  /*
   * 아래쪽 떠 있는 빠른 막대(#nytBar, 높이 약 63px)가 맨 끝까지 내려도 푸터 마지막 줄을 가렸다 (2026-10-01).
   * 막대 높이만큼 푸터 바닥을 더 띄운다 — 푸터 배경색으로 차서 빈 칸처럼 보이지 않는다.
   * 실제 높이는 footer.php 의 스크립트가 재서 맞춘다. 이 값은 스크립트가 없을 때의 바탕.
   */
  padding-bottom: 75px;
}
/* 아주 좁은 폰(360 미만)에서는 막대 단추가 두 줄로 접혀 109px 이 된다 */
@media (max-width: 359px) { .site-foot { padding-bottom: 121px; } }
@media print { .site-foot { padding-bottom: 12px !important; } }
.site-foot-in {
  max-width: 1014px;
  margin: 0 auto;
  padding: 0 14px;
  display: flex;
  /* 글 덩이(144px)와 마크 그림(81px)의 키가 달라, 위로 붙이면 오른쪽이 떠 보인다 */
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.site-foot .ft-text { flex: 1 1 520px; min-width: 0; }
.site-foot p { margin: 0 0 3px; }
/* 제목 줄 — 검고 굵게 */
.site-foot .ft-hd {
  /* 푸터는 참고용이다. 본문(15px)보다 한 단계 작게 두고 높이를 줄인다. */
  font: bold var(--fs-xs, 13px)/1.45 var(--font-base);
  color: #1b1b1b;
}
.site-foot .ft-hd.sm { margin-top: 7px; }
/* 연락처 줄 — 청록 */
.site-foot .ft-line {
  font: var(--fs-xs, 13px)/1.45 var(--font-base);
  color: #2b6777;
}
.site-foot .ft-line b { font-weight: bold; color: #2b6777; }
.site-foot .ft-line a { color: #2b6777; text-decoration: none; }
.site-foot .ft-line a:hover { text-decoration: underline; }
.site-foot .ft-gap { display: inline-block; width: 18px; }
.site-foot .ft-copy {
  margin-top: 8px;
  font: bold var(--fs-xs, 13px)/1.45 var(--font-base);
  color: #1b1b1b;
}
.site-foot .ft-marks { flex: 0 0 auto; }
/*
 * 인증마크 그림. 원본이 350x98 이다.
 * 290 까지 줄였다가 왼쪽 글에 비해 작아 보여 원본 크기로 되돌렸다.
 * 350 이 늘이지 않는 상한이라 여기까지가 가장 또렷하다. 더 키우면 뿌예진다.
 */
.site-foot .ft-marks img { display: block; width: 350px; max-width: 100%; height: auto; }

@media (max-width: 820px) {
  .site-foot-in { flex-direction: column; gap: 18px; }
  /*
   * 세로로 세우면 flex-basis 가 '폭' 이 아니라 '높이' 가 된다.
   * 가로일 때 쓰라고 적어 둔 520px 이 그대로 높이가 되어,
   * 글은 253px 인데 상자가 520px 이었다 — 글 아래로 267px 이 텅 비었다.
   * 세로에서는 내용만큼만 쓰게 되돌린다.
   */
  .site-foot .ft-text { flex: 0 0 auto; width: 100%; }
  .site-foot .ft-marks { align-self: flex-start; }
  .site-foot .ft-gap { width: 0; display: block; height: 0; }
  .site-foot .ft-line b { display: inline-block; margin-top: 2px; }
  /*
   * 주소가 "445-\A 924" 처럼 우편번호 한가운데서 끊겼다.
   * mobile.css 의 td{word-break:break-word} 가 여기까지 내려온 탓이다.
   * 낱말 단위로 끊고, 정말 긴 것만 어쩔 수 없이 자른다.
   */
  .site-foot .ft-line, .site-foot .ft-hd { word-break: keep-all; overflow-wrap: anywhere; }
}

/* 첫 화면 소식 목록 — 제목과 날짜 */
.mnews-d { width: 92px; white-space: nowrap; vertical-align: top; padding-top: 3px; }
/* 제목이 두 줄이 되면 둘째 줄이 글머리표 아래로 파고들었다. 글 시작점에 맞춘다. */
.mnews-t { padding-left: 22px; text-indent: -22px; line-height: 1.6; }

.location {
  font: var(--fs-xs) var(--font-base);
  color: var(--gray-300);
  text-decoration: none;
}
.topline {
  font: var(--fs-xs) var(--font-base);
  color: var(--brand-500);
}

/* 상단 대표전화 (평가 4). 눈에 띄되 로고를 이기지는 않게. */
.head-tel {
  font: var(--fs-xs) var(--font-base);
  color: var(--brand-700);
  font-weight: bold;
  text-decoration: none;
  letter-spacing: .2px;
}
.head-tel:hover { text-decoration: underline; }
.head-tel-hours {
  font: var(--fs-xs) var(--font-base);
  color: var(--gray-300);
  margin-left: 5px;
}

/* 푸터 사업자정보 (평가 9). 읽히되 본문을 방해하지 않는 크기. */
.biz-info {
  font: var(--fs-xs) var(--font-base);
  color: var(--gray-400);
  line-height: 1.9;
  padding: 4px 12px 0;
  text-align: center;
}
.biz-info .sep { color: var(--gray-200); margin: 0 7px; }
.biz-info b { color: var(--gray-500); font-weight: bold; }
/* 이름표와 값이 갈라지지 않게 (주소는 빼고 — 길어서 접혀야 한다) */
.biz-info .nb { white-space: nowrap; }

/* CJK fallback이 필요한 경우에만 */
.sp {
  font: var(--fs-base)/var(--lh-base) var(--font-cjk);
  color: var(--gray-500);
}

.blod3 {
  font: var(--fw-bold) var(--fs-base) var(--font-base);
  color: var(--green-200);
  text-decoration: none;
}
.sitetit {
  font: var(--fw-bold) var(--fs-xl)/var(--lh-tight) var(--font-base);
  color: var(--white);
  text-decoration: none;
}
.maincon {
  font: var(--fs-xs)/var(--lh-base) var(--font-base);
  color: var(--gray-500);
  text-decoration: none;
}
.maintit2 {
  font: var(--fw-bold) var(--fs-md)/var(--lh-base) var(--font-base);
  color: var(--gray-700);
}
.maimtit23 {
  font: var(--fw-bold) var(--fs-md)/var(--lh-base) var(--font-base);
  color: var(--gray-700);
  text-decoration: none;
}
.features4 {
  border-bottom: 1px solid var(--gray-200);
  padding: 5px;
  color: var(--gray-500);
  font-size: var(--fs-md);
  font-family: var(--font-base);
}
.bo1 {
  font: var(--fw-bold) var(--fs-xl)/20px var(--font-base);
  color: var(--brand-500);
}
.maintit {
  font: var(--fw-bold) var(--fs-lg)/var(--lh-base) var(--font-base);
  color: var(--gray-700);
}

/* ---------------------------------------------------
   사이드바 공통
   --------------------------------------------------- */
.leftwhite {
  font: var(--fw-bold) var(--fs-md) var(--font-base);
  color: var(--white);
  letter-spacing: 0.05em;
}
.leftstatus {
  font: var(--fw-bold) var(--fs-md) var(--font-base);
  color: var(--brand-700);
}
.leftstatus2 {
  font: var(--fs-xs)/12px var(--font-base);
  color: var(--brand-500);
}
.bold4 {
  font: var(--fw-bold) var(--fs-lg) var(--font-base);
  color: var(--gray-700);
}
.line {
  font: var(--fs-md) var(--font-base);
  color: var(--gray-700);
  text-decoration: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   사이드 내비게이션 컴포넌트 (A안 — left-border accent)
   레거시 table/img 기반 사이드바를 대체한다.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.snav { width: 235px; }

/* 헤더 블록 */
.snav-hd {
  background-color: var(--brand-500);
  padding: 16px 16px 14px;
}
.snav-hd-title {
  font: var(--fw-bold) 15px/1.2 var(--font-base);
  color: var(--white);
  letter-spacing: 0.03em;
  display: block;
  text-align: center;
}

/* 내비 컨테이너 */
.snav-body { padding: 6px 0; }

/* 1단계 항목 */
a.snav-item, span.snav-item {
  display: block;
  padding: 8px 14px 8px 11px;
  border-left: 3px solid transparent;
  font: var(--fw-medium) var(--fs-md)/1.4 var(--font-base);
  color: var(--gray-600);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}
a.snav-item:hover {
  background: var(--brand-100);
  color: var(--brand-900);
  border-left-color: var(--brand-300);
  text-decoration: none;
}
a.snav-item.active, span.snav-item.active {
  border-left-color: var(--brand-700);
  color: var(--brand-700);
  font-weight: var(--fw-bold);
  background: var(--brand-100);
}

/* 카테고리 eyebrow 라벨 (제품 사이드바 용) */
.snav-cat {
  display: block;
  padding: 10px 14px 4px;
  /* 평가 22: 10px 은 안 된다. 대문자 + 자간까지 더해 더 안 읽혔다 */
  font: var(--fw-bold) var(--fs-xs)/1.4 var(--font-base);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-700);
}

/* 2단계 하위 항목 */
a.snav-sub, span.snav-sub {
  display: block;
  padding: 5px 14px 5px 24px;
  font: var(--fs-xs)/1.5 var(--font-base);
  color: var(--gray-500);
  text-decoration: none;
  position: relative;
}
a.snav-sub::before, span.snav-sub::before {
  content: "";
  position: absolute; left: 13px;
  /*
   * 가운데(top:50%)에 두면 두 줄짜리 항목에서 글머리표가 두 줄 사이 빈 곳에 떨어진다.
   * "AL/Rubber-based Damping Sheet_BAL" 처럼 긴 이름이 여럿이라 눈에 띄었다.
   * 첫 줄 높이에 맞춘다. em 으로 두어 관리자에서 글자 크기를 바꿔도 따라간다.
   */
  top: 5px; margin-top: 0.72em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gray-300);
}
a.snav-sub:hover { color: var(--brand-900); text-decoration: none; }
a.snav-sub:hover::before { background: var(--brand-500); }
a.snav-sub.active, span.snav-sub.active {
  color: var(--brand-700);
  font-weight: var(--fw-semibold);
}
a.snav-sub.active::before, span.snav-sub.active::before { background: var(--brand-700); }

/* 카테고리 그룹 구분선 */
.snav-sep { height: 1px; background: var(--gray-200); margin: 4px 14px; }

/* ---------------------------------------------------
   폼 요소
   --------------------------------------------------- */
.submit02 {
  border: 1px solid var(--gray-700);
  color: var(--gray-500);
  background-color: var(--white);
}
.btn-write {
  /*
   * 평가 65: 주요 버튼 높이 48px 이상. 손가락과 노안 양쪽에 걸린다.
   * 시험성적서 신청·문의 보내기가 이 사이트에서 가장 중요한 단추다.
   * 전에는 22px 이었다 — 폰에서 누르기 어렵고 눈에도 안 띄었다.
   */
  min-height: 48px;
  padding: 0 30px;
  font: var(--fw-bold) var(--fs-md)/48px var(--font-base);
  color: var(--white);
  background: var(--brand-700);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.btn-write:hover { background: var(--brand-900); }
.prod-chk {
  display: block;
  padding-left: 1.3em;
  text-indent: -1.3em;
  line-height: 22px;
}

/* ---------------------------------------------------
   한 줄 길이 (평가 24)

   한 줄이 한글 35~45자를 넘으면 눈이 다음 줄 첫머리를 놓친다.
   본문 폭이 739px 인데 17px 글자로는 60자쯤 들어간다. 그래서 묶는다.
   표·목록은 제외한다 — 거기서는 폭이 정보다.
   --------------------------------------------------- */
.tttext p, .ttext p, .page-body p, .doc-desc, .inq-note {
  max-width: 42em;
}

/* ---------------------------------------------------
   숫자 정렬 (평가 27)

   스펙 수치는 자릿수 폭이 같아야 표에서 자리가 흔들리지 않는다.
   1 과 8 의 폭이 다르면 "10, 12, 15" 가 층층이 어긋나 보인다.
   --------------------------------------------------- */
table.spec-table td, table.spec-table th,
.spec-value, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------
   헤더 상단 바
   --------------------------------------------------- */
.top1 {
  font: var(--fw-bold) var(--fs-sm) var(--font-base);
  /* 평가 25: brand-300 은 짙은 바탕에서 3.9:1 이었다. 흰색으로 올린다 */
  color: var(--white);
}
.top2 {
  font: var(--fw-bold) var(--fs-sm)/var(--lh-base) var(--font-base);
  color: var(--white);
}

/* ---------------------------------------------------
   사이트맵
   --------------------------------------------------- */
.sitemaptit {
  font: var(--fw-bold) var(--fs-lg) var(--font-base);
  color: var(--white);
}
.sitemaptit2 {
  font: var(--fw-bold) var(--fs-sm) var(--font-base);
  color: var(--green-500);
}

/* ---------------------------------------------------
   .arrow (CJK 폰트 아이콘 보조)
   --------------------------------------------------- */
.arrow {
  font: 9px var(--font-cjk);
  color: var(--white);
}

/* ------------------------------------------------------------------
 * 첫 화면 — 이 회사가 무엇을 만드는가 (평가 2·3·6)
 *
 * 배너와 타일의 글자는 전부 그림 안에 있다. 이 구획만은 글로 두어,
 * 처음 온 사람도 검색엔진도 읽을 수 있게 한다.
 * 배너 바로 아래 자리이므로, 배너를 이기지 않을 만큼만 크게 둔다.
 * ------------------------------------------------------------------ */
.ident {
  padding: 30px 22px 6px;
  /* 폰에서 이 padding 이 폭에 더해져 문서가 434px 이 되어 가로로 밀렸다 */
  box-sizing: border-box;
}
.ident-head {
  margin: 0 0 8px;
  font: bold var(--fs-lg) var(--font-base);
  color: var(--brand-900);
  line-height: 1.45;
  letter-spacing: -.2px;
}
.ident-sub {
  margin: 0 0 22px;
  font: var(--fs-sm) var(--font-base);
  color: var(--gray-500);
  line-height: 1.75;
  max-width: 780px;
}
.ident-facts {
  display: table;
  /* 칸 개수가 1~6 으로 바뀐다(관리자 > 회사 소개 문구). 고정 폭(25%) 대신 같은 폭으로 나눈다 */
  table-layout: fixed;
  width: 100%;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  margin: 0 0 24px;
}
.ident-fact {
  display: table-cell;
  padding: 15px 12px;
  /* --ifp: 관리자 "숫자 칸 안쪽 위·아래" (index.htm 이 .ident-facts 에 넣는다) */
  padding: calc(15px + var(--ifp, 0px)) 12px;
  text-align: center;
  border-left: 1px solid var(--gray-100);
}
.ident-fact:first-child { border-left: 0; }
.ident-fact strong {
  display: block;
  font: bold var(--fs-md) var(--font-base);
  color: var(--brand-700);
  line-height: 1.35;
}
.ident-fact span {
  display: block;
  margin-top: 4px;
  font: var(--fs-xs) var(--font-base);
  color: var(--gray-400);
}
.ident-tracks {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 12px 0;
  margin: 0 -12px 6px;
}
.ident-track {
  display: table-cell;
  padding: 16px 15px 18px;
  /* --itp: 관리자 "사업 카드 안쪽 위·아래" */
  padding: calc(16px + var(--itp, 0px)) 15px calc(18px + var(--itp, 0px));
  background: var(--gray-50, #f7f9f9);
  border: 1px solid var(--gray-100);
  border-radius: 3px;
  text-decoration: none;
  vertical-align: top;
}
a.ident-track:hover {
  border-color: var(--brand-300);
  background: #fff;
}
.ident-track strong {
  display: block;
  margin-bottom: 6px;
  font: bold var(--fs-sm) var(--font-base);
  color: var(--brand-700);
}
.ident-track span {
  display: block;
  font: var(--fs-xs) var(--font-base);
  color: var(--gray-500);
  line-height: 1.7;
}

/* 좌측 제품 메뉴의 '용도로 찾기' (평가 15).
   분류를 모르는 사람이 쓰는 입구라, 분류 목록보다 위에 두고 눈에 띄게 한다. */
.snav-find {
  display: block;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid var(--brand-300);
  border-radius: 3px;
  background: #fff;
  color: var(--brand-700);
  font: bold var(--fs-sm) var(--font-base);
  text-decoration: none;
}
.snav-find:hover, .snav-find.active {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

/* 제품 페이지의 자주 묻는 질문 (평가 18).
   본문 아래, 문의 버튼 위에 둔다. 읽고 나서도 남는 질문만 문의로 가게 한다. */
.pfaq { margin: 26px 0 0; }
.pfaq-h {
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--brand-700);
  font: bold var(--fs-md) var(--font-base);
  color: var(--brand-900);
}
.pfaq-i {
  padding: 12px 2px;
  border-bottom: 1px solid var(--gray-100);
}
.pfaq-q {
  font: bold var(--fs-sm) var(--font-base);
  color: var(--brand-700);
}
.pfaq-q:before { content: "Q. "; }
.pfaq-a {
  margin-top: 6px;
  font: var(--fs-sm) var(--font-base);
  color: var(--gray-500);
  line-height: 1.8;
}


/* ------------------------------------------------------------------
 * 본문 안 캐러셀 (관리자 「+ 컴포넌트 → 캐러셀」)
 *
 * 띠 자체는 본문 HTML 에 style 로 적혀 있어 이 파일이 없어도 넘겨진다.
 * 여기 있는 것은 js/carousel.js 가 나중에 붙이는 화살표와 점의 모양뿐이다.
 * ------------------------------------------------------------------ */
.nyt-car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.88); color: #2b3a38;
  font-size: 22px; line-height: 36px; cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,.22);
}
.nyt-car-btn:hover { background: #fff; }
.nyt-car-prev { left: 10px; }
.nyt-car-next { right: 10px; }
.nyt-car-dots { text-align: center; padding: 8px 0 0; }
.nyt-car-dot {
  width: 9px; height: 9px; padding: 0; margin: 0 4px;
  border: 0; border-radius: 50%; background: #cfd6d4; cursor: pointer;
}
.nyt-car-dot.on { background: var(--brand-700, #2b6777); }
/* 큰 사진 칸. 화살표는 여기 기준으로 가운데에 선다. */
.nyt-car-stage { position: relative; }
/* 넘기는 수단(화살표·썸네일)이 생겼으니 띠 아래 스크롤바는 감춘다. 손가락·휠로는 여전히 넘어간다. */
.nyt-car-live [data-nyt-car-strip] { scrollbar-width: none; -ms-overflow-style: none; }
.nyt-car-live [data-nyt-car-strip]::-webkit-scrollbar { display: none; }
.nyt-car-thumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 0; justify-content: flex-start; }
.nyt-car-thumbs .nyt-car-dot { align-self: center; }
.nyt-car-thumb {
  width: 84px; height: 60px; padding: 0; overflow: hidden;
  border: 2px solid transparent; border-radius: 4px; background: #eef2f1;
  cursor: pointer; opacity: .6; transition: opacity .15s, border-color .15s;
}
.nyt-car-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nyt-car-thumb:hover, .nyt-car-thumb:focus { opacity: 1; }
.nyt-car-thumb.on { opacity: 1; border-color: var(--brand-700, #2b6777); }
@media (max-width: 640px) {
  .nyt-car-btn { width: 32px; height: 32px; font-size: 19px; line-height: 30px; }
  .nyt-car-thumb { width: 64px; height: 46px; }
}