@charset "utf-8";
/*
 * 모바일 대응 (추가 전용).
 *
 * 이 사이트는 1017px 고정 폭 테이블 레이아웃이라, 휴대폰에서는 데스크톱 화면이
 * 통째로 축소되어 글씨를 읽을 수 없었다. nyt.css 는 건드리지 않고 이 파일에서
 * 미디어쿼리로만 덮어써서 데스크톱 표시에는 영향을 주지 않는다.
 *
 * 범위: 본문·이미지·그리드·배너가 화면 폭에 맞게 흐르도록 한다.
 *       상단 드롭다운 메뉴는 최상위가 href="#" 이고 하위가 hover 로만 열려서 터치에서
 *       쓸 수 없다. 모바일에서는 감추고 top.php 의 .m-nav 목록을 대신 보여준다.
 */

/* 모바일 메뉴 기본 상태는 숨김. 아래 미디어쿼리에서 다시 켠다.
   (기본 규칙을 미디어쿼리보다 먼저 두어야 덮어쓰기가 동작한다) */
.m-nav { display: none; }

@media (max-width: 1060px) {

  /* ── 고정 폭 해제 ───────────────────────────────── */
  table[width="1017"],
  table[width="1000"],
  #mainContainer {
    width: 100% !important;
    max-width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* 가로 스크롤 방지.
     nyt.css 와 top.php 가 html·body 에 height:100% 를 준다. 거기에 overflow-x:hidden
     이 겹치면 html 이 '화면 높이만큼의 스크롤 상자' 가 되어, 그 아래 내용이 잘리고
     세로 스크롤 자체가 막힌다. 높이를 내용에 맞게 풀어 준다.
     top.php 의 인라인 style 이 이 파일보다 뒤에 오므로 !important 가 필요하다. */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
    height: auto !important;
    min-height: 100%;
  }

  /* ── 메인 배너 (iframe 안의 슬라이더) ─────────────── */
  /* 1017×335 비율을 유지하며 가로를 채운다. aspect-ratio 미지원 환경을 위해
     기본 height 를 함께 준다(대략적인 폴백). */
  iframe[src*="visual.html"] {
    display: block;
    width: 100% !important;
    height: 33vw;
    aspect-ratio: 1017 / 335;
  }

  /* ── 본문 여백 ─────────────────────────────────── */
  td { word-break: break-word; }

  /* 어떤 표도 화면 밖으로 나가지 않게 한다 (폭이 px 로 박힌 표가 많다) */
  table { max-width: 100% !important; }

  /* 서브페이지 본문 카드: [좌측 메뉴 275px | 본문 739px] 2열을 세로로 쌓는다 */
  table.content-card { width: 100% !important; }
  table.content-card > tbody > tr > td,
  table.content-card > tr > td {
    display: block;
    width: 100% !important;
  }
  table.content-card table { width: 100% !important; }

  /* ── 홈 2열 그리드 → 1열 ──────────────────────── */
  table.home-grid,
  table.home-grid tbody,
  table.home-grid tr,
  table.home-grid td {
    display: block;
    width: 100% !important;
    height: auto !important;
  }
  /* 셀 사이 간격용 빈 칸은 숨기고 margin 으로 대체 */
  table.home-grid td[width="23"],
  table.home-grid tr > td[colspan="3"] { display: none; }
  table.home-grid td { margin-bottom: 10px; }
  table.home-grid td img { width: 100%; height: auto; }

  /* 메인의 구획 칸들은 width:100% 에 좌우 안쪽 여백이 붙어 있어, 기본 계산법으로는
     여백만큼 화면 밖으로 나간다. 여백을 폭 안에 포함시킨다. */
  #main-banner, #main-grid, #main-bottom {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* ── 하단 영역 (새소식 · 미디어 · 문의) ─────────── */
  /* 데스크톱에서는 3칸을 가로로 놓는다. 좁은 화면에서 그대로 두면 한 칸이 70px 까지
     줄어 글자가 세로로 한 자씩 쌓이고, 오른쪽 칸은 화면 밖으로 나간다. 세로로 쌓는다. */
  table.main-bottom-row,
  table.main-bottom-row > tbody,
  table.main-bottom-row > tbody > tr,
  table.main-bottom-row > tbody > tr > td {
    display: block;
    width: 100% !important;
  }
  /* 칸 사이를 벌리려고 넣은 빈 칸은 숨기고 아래 여백으로 대신한다 */
  table.main-bottom-row > tbody > tr > td[width="3%"] { display: none; }
  table.main-bottom-row > tbody > tr > td { margin-bottom: 26px; }
  table.main-bottom-row > tbody > tr > td:last-child { margin-bottom: 0; }

  /* 가로로 늘려 쓰는 장식 줄(img/main/line.jpg, 원본 53x17)은 height 속성이 17 인데,
     위의 height:auto 가 그것을 덮어써서 원본 비율대로 세로가 110px 까지 부푼다.
     좁은 화면에서 두꺼운 회색 띠로 보이던 원인이다. 높이를 지켜 준다. */
  img[src$="main/line.jpg"] { height: 17px; }

  /* 날짜가 좁은 칸에서 "Jul. 09 / 2025" 로 쪼개진다 */
  #main-bottom .location, #main-bottom .location div { white-space: nowrap; }

  /* 데스크톱에서는 오른쪽 좁은 칸에 놓여 우측 정렬이 맞지만, 세로로 쌓이면
     한가운데가 비고 버튼만 오른쪽에 치우쳐 보인다. 폭을 꽉 채운다. */
  #main-bottom .main-inq-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* 푸터 저작권은 인라인으로 22px 이 박혀 있어 좁은 화면에서 두 줄로 넘치고
     페이지에서 가장 큰 글자가 된다. 인라인을 이기려면 !important 가 필요하다. */
  .footer-copy { font-size: 14px !important; line-height: 1.5; padding-left: 12px; padding-right: 12px; }

  /* ── 상단 메뉴 ─────────────────────────────────── */
  /* 데스크톱 드롭다운은 최상위가 href="#" 이고 하위 메뉴가 hover 로만 열려서
     터치 기기에서는 어떤 페이지로도 갈 수 없다. 모바일에서는 감추고
     top.php 가 같은 데이터로 만든 .m-nav 를 대신 보여준다. */
  #mainContainer { width: 100% !important; }
  #dhtmlgoodies_menu { display: none !important; }
  .m-nav { display: block !important; }

  /* 헤더는 로고 칸이 rowspan 으로 왼쪽 210px 를 차지한다.
     좁은 화면에서는 세로로 쌓아 메뉴가 화면 폭을 다 쓰게 한다. */
  table.site-head,
  table.site-head tbody,
  table.site-head tr,
  table.site-head td {
    display: block;
    width: 100% !important;
    height: auto !important;
  }
  table.site-head td.site-logo { text-align: center; padding: 8px 0 4px; }
  table.site-head td.site-logo img { margin-top: 0 !important; width: 190px; height: auto; }
}

.m-nav .m-nav-sec {
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: var(--brand-700, #2E7A6E);
}
.m-nav .m-nav-sec > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.m-nav .m-nav-sec > summary::-webkit-details-marker { display: none; }
.m-nav .m-nav-sec > summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  opacity: .8;
}
.m-nav .m-nav-sec[open] > summary::after { content: "\2212"; }   /* − */
.m-nav .m-nav-sec > a {
  display: block;
  padding: 11px 16px 11px 28px;       /* 손가락으로 누를 수 있는 높이 */
  background: var(--brand-900, #1A5A50);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.10);
}

/*
 * 761~1060px (창을 좁힌 데스크톱, 화면 배율을 키운 노트북, 태블릿 가로)
 *
 * 이 폭에서 항목을 세로로 길게 쌓으면 화면을 다 잡아먹어 어색하다.
 * 제목은 데스크톱처럼 가로 한 줄에 놓고, 펼친 항목만 그 아래 전체 폭을 쓴다.
 */
@media (min-width: 761px) and (max-width: 1060px) {
  .m-nav {
    display: flex !important;
    flex-wrap: wrap;
    background: var(--brand-700, #2E7A6E);
  }
  .m-nav .m-nav-sec {
    flex: 1 1 auto;
    border-bottom: 0;
    border-right: 1px solid rgba(255,255,255,.18);
    order: 1;
  }
  .m-nav .m-nav-sec:last-of-type { border-right: 0; }
  .m-nav .m-nav-sec > summary {
    padding: 12px 10px;
    text-align: center;
    font-size: 13.5px;
  }
  .m-nav .m-nav-sec > summary::after { float: none; margin-left: 6px; }

  /* 펼친 묶음은 줄 전체를 차지하고 링크를 가로로 흘린다 */
  .m-nav .m-nav-sec[open] { flex-basis: 100%; order: 2; }
  .m-nav .m-nav-sec[open] > summary { text-align: left; padding-left: 16px; }
  .m-nav .m-nav-sec[open] > a {
    display: inline-block;
    width: auto;
    padding: 9px 16px;
    border-top: 1px solid rgba(255,255,255,.10);
  }
}

/* ------------------------------------------------------------------
 * 폰 세로 — 메뉴를 두 칸으로
 *
 * 여섯 묶음을 한 줄씩 쌓으니 머리말만 384px 이었다. 844px 짜리 화면의 45% 다.
 * 첫 화면에 회사 소개도 배너도 안 보이고 메뉴만 보인다.
 * 두 칸으로 접으면 세 줄이 된다. 항목은 그대로 다 보이고,
 * 761~1060px 구간이 이미 쓰고 있는 방식과도 결이 같다.
 *
 * 펼친 묶음은 줄 전체를 차지하고 아래로 내려간다(order) — 반 칸 안에
 * 하위 항목을 욱여넣으면 글자가 두 줄씩 접힌다.
 * ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .m-nav {
    display: flex !important;
    flex-wrap: wrap;
    background: var(--brand-700, #2E7A6E);
  }
  .m-nav .m-nav-sec {
    flex: 0 0 50%;
    box-sizing: border-box;
    order: 1;
    border-right: 1px solid rgba(255,255,255,.18);
  }
  .m-nav .m-nav-sec:nth-of-type(2n) { border-right: 0; }
  .m-nav .m-nav-sec[open] {
    flex-basis: 100%;
    order: 2;
    border-right: 0;
  }
}

@media (max-width: 760px) {
  /* 폰 세로: 글자 크기를 읽을 수 있게 올린다.
     top.php 의 인라인 style 이 body{font-size:12px} 를 이 파일보다 뒤에 선언하므로
     !important 가 없으면 적용되지 않는다. */
  body { font-size: 15px !important; }

  #dhtmlgoodies_menu ul.menuBlock1 > li > a {
    padding: 9px 10px !important;
    font-size: 13px !important;
  }

  /* 좌측 사이드바가 있는 페이지는 세로로 쌓는다 */
  td[width="275"] {
    display: block;
    width: 100% !important;
  }

  /* 쌓기만 하면 제품 목록 전체(1100px 남짓)를 지나야 본문이 나온다. 제품을 보러 온
     사람에게는 본문이 먼저다. 줄을 세로 흐름으로 바꿔 목록을 아래로 내린다.
     :has() 를 모르는 옛 브라우저에서는 지금처럼 목록이 위에 남는다(동작에는 지장 없음). */
  tr:has(> td[width="275"]) {
    display: flex;
    flex-direction: column;
  }
  tr:has(> td[width="275"]) > td[width="275"] { order: 2; }

  /* 목록 글씨가 10~11px 라 손가락으로 누르기도 읽기도 어렵다.
     12px 로 올려 뒀었는데, 그 사이 데스크톱 기준이 13px 로 올라가서
     폰에서만 도로 작아져 있었다. !important 라 조용히 이겼다. 기준에 맞춘다. */
  .snav-cat { font-size: 13px !important; }
  a.snav, span.snav, a.snav-sub, span.snav-sub { font-size: 13.5px !important; }
  a.snav-sub, span.snav-sub { padding-top: 8px; padding-bottom: 8px; }

  /* ── 문의 폼 ─────────────────────────────────────
     라벨과 입력칸이 좌우로 나뉘어 있어 폰에서는 입력칸이 화면 절반뿐이다.
     주소나 회사명을 넣으면 글자가 보이지 않는다. 세로로 쌓아 폭을 다 쓰게 한다. */
  table.inq-table,
  table.inq-table > tbody,
  table.inq-table > tbody > tr,
  table.inq-table > tbody > tr > th,
  table.inq-table > tbody > tr > td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  table.inq-table > tbody > tr { padding: 10px 0; }
  table.inq-table > tbody > tr > th {
    text-align: left;
    padding: 0 0 5px 0;
    background: none;
  }
  table.inq-table > tbody > tr > td { padding: 0; }
  table.inq-table input[type="text"],
  table.inq-table textarea,
  table.inq-table select {
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px;
    /* 16px 보다 작으면 iOS 사파리가 입력할 때 화면을 확대해 버린다 */
    font-size: 16px;
  }
  table.inq-table textarea { height: 150px; }

  /* 보내기 단추가 작아 누르기 어렵다 */
  .btn-write {
    display: block;
    width: 100%;
    padding: 13px 0;
    font-size: 15px;
  }

  /* 푸터 인증 로고 묶음이 넘치지 않게 */
  table.content-card { width: 100% !important; }
}

/* ------------------------------------------------------------------
 * 폰에서 누를 수 있는 크기 (디자인 평가 80 · 65 · 75)
 *
 * 잰 결과 누를 수 있는 것 57개 중 50개가 44px 아래였고, 8px 안에 붙어 있는
 * 짝이 14 쌍이었다. 잘못 눌린다.
 *
 * 링크 자체를 키우면 글이 성기게 벌어지므로, 메뉴·단추처럼 "누르라고 있는 것"만
 * 키운다. 본문 안의 글 링크는 그대로 둔다.
 * ------------------------------------------------------------------ */
@media (max-width: 820px) {
  /*
   * line-height:44px 로 키웠더니, 두 줄로 접히는 항목에서 줄과 줄 사이가
   * 44px 씩 벌어졌다. "AL/Rubber-based Damping / Sheet_BAL" 이 손가락 두 개
   * 높이로 떨어져 보였다. 높이는 안쪽 여백으로 만들고 줄 간격은 정상으로 둔다.
   */
  .m-nav a, .m-nav-sec a,
  .snav-item, .snav a,
  .topmenunew,
  .btnType1, .btn-write, .main-more,
  button, input[type=submit],
  #nytBar a,
  .lang-txt {
    min-height: 44px;
    line-height: 1.5;
    padding-top: 11px;
    padding-bottom: 11px;
    display: inline-block;
    box-sizing: border-box;
  }
  /* 서로 붙어 있으면 잘못 눌린다 */
  .lang-txt { margin: 0 4px; padding: 0 8px; }
  /*
   * inline-block 이라 짧은 항목끼리 한 줄에 나란히 붙었다.
   * ("Floor Mat  ALGC-Websuler", "Windbreaker  DIY Kit")
   * 메뉴는 한 줄에 하나여야 어디를 누르는지 안다.
   */
  .snav-item, .snav a, .m-nav a, .m-nav-sec a { display: block; }

  /* 폰에서 본문이 확대 없이 읽혀야 한다 (평가 75) */
  body { font-size: var(--fs-base, 17px) !important; }
}

/* ------------------------------------------------------------------
 * 첫 화면 소개 블록 — 폰
 *
 * 재 보니 뷰포트가 390 인데 문서가 434 였다. 가로로 밀려서, 손가락으로
 * 옆으로 끌 수 있는 상태였다. 원인은 .ident 의 좌우 padding 44px 이
 * 폭에 더해진 것(box-sizing 없음). 그건 nyt.css 에서 고쳤고,
 * 여기서는 4칸으로 나뉜 줄을 폰에서 2칸으로 접는다.
 * 390px 를 넷으로 나누면 글자 자리가 73px 밖에 안 남아 낱말이 다 쪼개진다.
 * ------------------------------------------------------------------ */
@media (max-width: 820px) {
  .ident { padding: 22px 16px 6px; }

  /*
   * 숫자 넷(창립·분류·인증·기술인증)은 두 칸으로 접는다.
   *
   * 바로 위 주석에 "2칸으로 접는다" 라고 적혀 있었는데 코드는 display:block —
   * 한 칸이었다. 글은 두 칸이라는데 화면은 네 줄이었다.
   * 390px 에서 네 줄이면 숫자 넷을 보는 데 300px 을 쓴다. 데스크톱은 한 줄 60px 이다.
   */
  .ident-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-left: 0;
    margin-right: 0;
  }
  .ident-fact {
    display: block;
    width: auto;
    box-sizing: border-box;
    text-align: left;
    border-left: 0;
    border-top: 1px solid var(--gray-100);
    padding: 12px 12px 12px 2px;
    padding: calc(12px + var(--ifp, 0px)) 12px calc(12px + var(--ifp, 0px)) 2px;
  }
  /* 칸이 하나뿐이면 반쪽만 쓰지 않게 */
  .ident-fact:only-child { grid-column: 1 / -1; }
  /* 첫 줄(1·2번째)은 위 선을 빼고, 오른쪽 칸에만 세로 선을 둔다 */
  .ident-fact:nth-child(-n+2) { border-top: 0; }
  .ident-fact:nth-child(2n)   { border-left: 1px solid var(--gray-100); padding-left: 14px; }

  /*
   * 설명 글이 들어 있는 상자(산업용 소재 공급 …)는 한 칸 그대로 둔다.
   * 두 칸으로 접으면 폭이 180px 밖에 안 돼 문장이 조각난다.
   */
  .ident-tracks {
    display: block;
    margin-left: 0;
    margin-right: 0;
  }
  .ident-track {
    display: block;
    width: auto;
    box-sizing: border-box;
    margin: 0 0 10px;
  }
}

/* ------------------------------------------------------------------
 * 서브페이지 제목 줄 — 폰
 *
 * 제목과 위치표시(HOME > ...)가 한 줄을 반씩 나눠 갖는다. 데스크톱에서는
 * 그럴 만하지만 390px 에서는 제목 몫이 226px 뿐이라
 * "Acoustic / Interior / Board_ABN" 처럼 세 줄로 꺾였다.
 * 폰에서는 위아래로 놓는다.
 * ------------------------------------------------------------------ */
@media (max-width: 820px) {
  td.stit, td.stit + td {
    display: block;
    width: auto;
  }
  td.stit + td div[align="right"] { text-align: left; }
  td.stit + td .location { display: block; margin-top: 2px; }

  /*
   * 위아래로 놓아 폭 354px 를 다 줘도 31px 글자로는 제품 이름이 안 들어간다.
   * ("Acoustic Interior Board_ABN" 은 31px 에서 390px 쯤 된다)
   * 폰에서만 제목을 줄인다. 줄여도 화면에서 가장 큰 글자다.
   */
  td.stit h1 { font-size: 23px; }
}

/*
 * 미디어 쪽(board/media.htm) 동영상 (2026-10-15).
 * 동영상 4개를 가로 2칸 고정 폭(360px) 표로 놓아 폰에서 화면 밖으로 나갔다.
 * 폰에서는 한 줄에 하나씩, 화면 폭에 맞춰 16:9 로 보인다.
 */
@media (max-width: 760px) {
  /* 동영상 표를 감싼 칸들도 열 폭(빈 칸 width=249 가 정한다)에서 풀어 준다 */
  tr:has(> td > table > tbody > tr > td > iframe.video_v),
  td:has(> table > tbody > tr > td > iframe.video_v) { display: block; width: 100% !important; height: auto !important; }
  table:has(iframe.video_v), table:has(iframe.video_v) > tbody, tr:has(> td > iframe.video_v) { display: block; width: 100% !important; height: auto !important; }
  td:has(> iframe.video_v) { display: block; width: 100% !important; height: auto !important; padding: 0 0 14px !important; }
  iframe.video_v { display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
}

/*
 * 본문 안 [사진 | 글] 두 칸 표 (2026-10-15, Technology). 휴대폰에서는 위아래로 쌓는다.
 * 사진 칸 폭(270px)이 고정이라 그대로 두면 글자 칸이 손가락 하나 폭으로 줄었다.
 */
@media (max-width: 760px) {
  table.nyt-2col, table.nyt-2col > tbody, table.nyt-2col > tbody > tr, table.nyt-2col > tbody > tr > td { display: block; width: 100% !important; }
  table.nyt-2col > tbody > tr > td:first-child { text-align: center; padding: 0 0 14px !important; }
  table.nyt-2col img { max-width: 100%; height: auto; }
}