@charset "utf-8";
/* ============================================================
   알앤디파트너 반응형 셸  rnd-shell.css   v1.0 (2026-08)
   ------------------------------------------------------------
   설계 원칙
   1) PC(901px 이상)는 단 한 픽셀도 건드리지 않는다.
      -> 아래 규칙은 전부 @media (max-width:900px) 안에만 존재.
   2) 236개 서브페이지의 본문 마크업을 수정하지 않는다.
      -> 고정폭 레이아웃 테이블을 [width="990"] 같은 속성 선택자로 잡는다.
   3) 파일명/URL 은 절대 바뀌지 않는다. (네이버 키워드 10만개 랜딩 보호)
   ============================================================ */

/* ---------- 공통(모든 화면) : 안전한 최소 보정만 ---------- */
img { max-width: 100%; }
.rnd-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;   /* 페이지별 인라인 CSS 보다 우선 */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* 모바일 전용 요소는 PC에서 감춘다 */
.rnd-m-only { display: none; }

/* ---------- 온라인 주문 폼 제목 색 복구 (PC·모바일 공통) ----------
   topmenu_sub.html 이 모든 페이지에 h2{color:#2d3748!important} 를 주입하는데,
   그것이 견적문의 폼의 남색 배경 위 흰색 제목까지 덮어써서
   "온라인 견적문의" 글자가 배경에 묻혀 거의 안 보이던 문제를 바로잡는다. */
.rq__head h2 {
  color: #ffffff !important;
  border-left: none !important;
  padding-left: 0 !important;
}
.rq__done h3 { color: #0f2547 !important; }

/* 가로 스크롤 표 안내문 */
.rnd-scroll-hint {
  font-size: 12px;
  color: #718096;
  padding: 2px 2px 6px;
  letter-spacing: -0.2px;
}
.rnd-scroll-hint::before { content: '\2194\FE0E  '; }


/* ============================================================
   모바일 / 태블릿  (<=900px)
   ============================================================ */
@media (max-width: 900px) {

  html { -webkit-text-size-adjust: 100%; }
  body {
    text-align: left !important;
    min-width: 0 !important;
    padding-bottom: 108px !important;  /* 하단 고정 CTA 바(2줄) 자리 */
    overflow-x: hidden;
  }

  .rnd-m-only { display: block; }
  .rnd-pc-only { display: none !important; }

  /* 지도·동영상 등 고정폭 임베드 (예: a07_08 오시는길 지도 embed width=490) */
  embed, iframe, object, video {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 본문 카드류가 화면을 넘지 않도록 */
  .structural-calc-card, .sc-card, .cae-card, .cae-container,
  .sc-container, .structural-calc-container, .cae-grid {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---------- 1. 고정폭 레이아웃 테이블 해제 ----------
     990 / 880 / 870 = 레이아웃용 셸. 본문 데이터 테이블은 건드리지 않는다. */
  table[width="990"],
  table[width="880"],
  table[width="870"],
  table[width="990"] > tbody, table[width="880"] > tbody, table[width="870"] > tbody,
  table[width="990"] > tbody > tr, table[width="880"] > tbody > tr, table[width="870"] > tbody > tr,
  table[width="990"] > tbody > tr > td,
  table[width="880"] > tbody > tr > td,
  table[width="870"] > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
    box-sizing: border-box !important;
  }

  /* 셀이 1개뿐인 '껍데기' 테이블 (rnd-shell.js 가 표시) */
  .rnd-tbl-block,
  .rnd-tbl-block > tbody,
  .rnd-tbl-block > tbody > tr,
  .rnd-tbl-block > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* 상단 로고 */
  table[width="990"] img[src*="logo"] {
    max-width: 190px; height: auto !important;
    margin: 8px auto 4px; display: block;
  }

  /* ---------- 2. 상단 메인 네비 : 6개를 3 x 2 그리드로 유지 ----------
     6개 대분류를 모바일에서도 "한 화면에 전부" 보여줘야 전문성이 전달된다. */
  /* 원본 CSS 가 #rnd-topnav 에 width:790px / height:75px 를 고정하고 있다 */
  #rnd-topnav, #rnd-topbar, #rnd-mainnav {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;   /* padding 이 폭에 더해지지 않게 */
  }
  #rnd-topnav { height: auto !important; }

  #rnd-topbar {
    height: auto !important;
    flex-wrap: wrap;
    justify-content: center !important;
    padding: 5px 6px !important;
  }
  #rnd-topbar a { font-size: 11px !important; line-height: 1.8 !important; }

  #rnd-mainnav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    height: auto !important;
  }
  #rnd-mainnav li {
    border-right: 1px solid rgba(255,255,255,0.10) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  #rnd-mainnav li:nth-child(3n) { border-right: none !important; }
  #rnd-mainnav a { padding: 9px 3px !important; min-height: 52px; }
  #rnd-mainnav .mn { font-size: 12.5px !important; letter-spacing: -0.8px !important; }
  #rnd-mainnav .ms { font-size: 8px !important; letter-spacing: -0.4px !important; }

  /* ---------- 3. 상단 비주얼 / 연락처 열 ---------- */
  /* 790px 고정 비주얼 배너 */
  table[width="990"] td[width="790"] > div[style*="background-image"] {
    width: 100% !important;
    height: 118px !important;
  }
  /* 200px 연락처 버튼 열 -> 가로 3버튼 */
  table[width="990"] td[width="200"][height="170"] {
    padding: 8px !important;
    background: #f5f7fa !important;
    display: flex !important;
    gap: 6px;
  }
  table[width="990"] td[width="200"][height="170"] > a {
    flex: 1 1 0;
    margin-bottom: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
    padding: 9px 3px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* ---------- 4. 좌측 메뉴(a_left_menu) ----------
     PC의 좌측 메뉴는 "이 분야에서 우리가 다루는 서비스 전부"를 보여주는 장치다.
     모바일에서는 없애지 않고 본문 아래 '같은 분야 다른 서비스'로 옮긴다.
     (이동은 rnd-shell.js 가 담당, 여기서는 폭/모양만 조정) */
  .lnav { width: 100% !important; }
  .lnav-head { font-size: 15px !important; padding: 11px 8px !important; }

  /* 본문 아래로 옮겨진 메뉴는 2열로 촘촘하게 */
  #rnd-related .lnav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid #e2e8f0;
  }
  #rnd-related .lnav-head { grid-column: 1 / -1; }
  #rnd-related .lnav a {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.3px !important;
    padding: 12px 8px !important;      /* 손가락 탭 영역 확보 */
    min-height: 44px;
    display: flex !important;
    align-items: center;
    text-align: left !important;
    word-break: keep-all;
    border-right: 1px solid #edf2f7;
  }
  #rnd-related .lnav-group {
    grid-column: 1 / -1;
    font-size: 12px !important;
    padding: 8px !important;
  }
  /* 좌측 메뉴 안의 부가 링크(ANSYS·온라인주문서 등)도 하나도 빠뜨리지 않고 그대로 살린다 */
  #rnd-related .lnav-extra,
  #rnd-related .lnav-contact { grid-column: 1 / -1; }
  #rnd-related .lnav-ansys,
  #rnd-related .lnav-contact-btn {
    display: block !important;
    font-size: 13.5px !important;
    padding: 12px 8px !important;
    text-align: center !important;
  }
  #rnd-related .lnav-contact a.lnav-citem {
    font-size: 13px !important;
    padding: 10px 6px !important;
    min-height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* 원래 자리(좌측 컬럼)의 메뉴는 감춘다 — 위 테이블 해제 규칙보다 우선순위를 높인다 */
  table[width="880"] > tbody > tr > td.rnd-lnav-origin,
  table[width="990"] > tbody > tr > td.rnd-lnav-origin,
  .rnd-tbl-block > tbody > tr > td.rnd-lnav-origin,
  td.rnd-lnav-origin,
  .rnd-lnav-origin { display: none !important; }

  /* ---------- 5. 본문 영역 ---------- */
  table[width="880"] > tbody > tr > td[width="150"] { padding: 0 !important; }

  /* 본문 안의 넓은 데이터 테이블은 가로 스크롤 (JS가 .rnd-scroll 로 감쌈) */
  .rnd-scroll > table { max-width: none; }

  /* ---------- 5-0. 여백 다이어트 ----------
     880 테이블 10px + 컨테이너 20px + 카드 25px = 좌우 110px 이 사라진다.
     375px 화면에서는 글 읽을 폭이 265px 밖에 안 되므로 단계별로 줄인다. */
  table[width="880"] { padding: 0 6px !important; }
  .structural-calc-card, .sc-card {
    padding: 15px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 18px !important;
  }

  /* ===== 5-1. 가독성 (모바일에서 글을 실제로 읽게 만드는 부분) =====
     · 한글은 어절 단위로 끊어야 읽힌다 → word-break: keep-all
     · 양쪽정렬(justify)은 모바일에서 단어 사이가 벌어져 읽기 나쁘다 → 왼쪽정렬
     · 본문 15px / 행간 1.8 / 글자간격 -0.2px 로 통일                          */
  table[width="880"] td,
  .cae-container, .sc-container, .structural-calc-container {
    word-break: keep-all !important;      /* 한글 어절 단위 줄바꿈 */
    overflow-wrap: break-word !important; /* 긴 영문·URL 은 강제 줄바꿈 */
  }

  table[width="880"] td,
  table[width="880"] p,
  table[width="880"] li,
  table[width="880"] font {
    font-size: 15px !important;
    line-height: 1.8 !important;
    letter-spacing: -0.2px !important;
    text-align: left !important;
  }

  /* 페이지들이 공통으로 쓰는 콘텐츠 컨테이너 */
  .cae-container, .sc-container, .structural-calc-container {
    max-width: 100% !important;
    padding: 14px 10px 8px !important;
    line-height: 1.8 !important;
  }

  /* 페이지 최상단 제목 배너 */
  .cae-header, .sc-header, .structural-calc-header, .sc-h, .hero {
    padding: 24px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 22px !important;
  }
  .cae-header h1, .sc-h h1, .hero h1,
  .structural-calc-header h1, .sc-header h1 {
    font-size: 21px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.6px !important;
  }
  .cae-header p, .sc-h p, .hero p,
  .structural-calc-header p, .sc-header p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* 중간 제목 — 위아래 여백을 넉넉히 줘서 글 덩어리를 구분해 준다 */
  .cae-container h2, .sc-container h2, .structural-calc-container h2 {
    font-size: 18px !important;
    line-height: 1.45 !important;
    margin-top: 34px !important;
    margin-bottom: 16px !important;
    padding-left: 10px !important;
  }
  .cae-container h3, .sc-container h3, .structural-calc-container h3 {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-top: 22px !important;
  }

  /* 카드 */
  .cae-card, .cae-card.full-width {
    flex: 1 1 100% !important;
    padding: 18px 16px !important;
    border-radius: 8px !important;
  }
  .cae-grid { gap: 14px !important; margin-bottom: 24px !important; }
  .cae-card-title, .cae-card title {
    font-size: 16.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }
  .cae-card-desc {
    font-size: 15px !important;
    line-height: 1.8 !important;
    text-align: left !important;   /* justify 해제 */
    letter-spacing: -0.2px !important;
  }

  /* 강조 박스 / 태그 */
  .cae-highlight {
    font-size: 14.5px !important;
    line-height: 1.8 !important;
    padding: 16px 14px !important;
    margin: 26px 0 !important;
    text-align: left !important;
  }
  .cae-app-box { padding: 12px 13px !important; }
  .cae-tag { font-size: 12.5px !important; padding: 4px 10px !important; }

  /* 문단 사이 숨 쉴 공간 */
  .cae-container p, .sc-container p, .structural-calc-container p {
    margin-bottom: 14px !important;
  }
  .cae-container ul, .cae-container ol { padding-left: 20px !important; }
  .cae-container li { margin-bottom: 7px !important; }

  /* 표 안 글자도 너무 작아지지 않게 */
  .rnd-scroll table td, .rnd-scroll table th,
  .process-table td, .process-table th {
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 9px 10px !important;
  }

  /* 링크는 손가락으로 누를 수 있는 크기로 */
  .cae-container a, .sc-container a, .structural-calc-container a {
    padding: 2px 0;
  }

  /* 가로 나열형 네비 바(a05/a06 계열)는 줄바꿈 + 탭 영역 확보 */
  .vibration-nav-bar, .nav-bar {
    padding: 10px 8px !important;
    line-height: 2.1 !important;
  }
  .vibration-nav-bar, .nav-bar, .nav-bar > *, .vibration-nav-bar b {
    white-space: normal !important;
    word-break: keep-all !important;
  }
  .vibration-nav-link, a.nav-link {
    display: inline-block;
    font-size: 13.5px !important;
    padding: 5px 4px !important;
    letter-spacing: -0.3px !important;
  }
  .vibration-nav-divider, .nav-div { margin: 0 6px !important; }

  /* 본문에 인라인으로 박힌 min-width(예: 실적 바로가기 버튼 min-width:532px) 해제 */
  a[style*="min-width"], div[style*="min-width"], span[style*="min-width"] {
    min-width: 0 !important;
  }

  /* ---------- 6. 푸터 ---------- */
  /* 푸터 안쪽 3열 테이블(로고 / 주소 / 디넷뜨로고)도 세로로 */
  table[width="870"] table[width="100%"],
  table[width="870"] table[width="100%"] > tbody,
  table[width="870"] table[width="100%"] > tbody > tr,
  table[width="870"] table[width="100%"] > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;   /* padding 때문에 폭이 넘치지 않게 */
    text-align: center;
  }
  .contact-info {
    font-size: 13.5px !important;
    line-height: 1.85 !important;
    padding: 4px 14px 12px !important;
    box-sizing: border-box !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .contact-menu, .copyright { box-sizing: border-box !important; max-width: 100% !important; }
  table[width="870"] img { display: block; margin: 10px auto; }
  .contact-menu { text-align: center; margin-top: 14px !important; }
  .contact-link { font-size: 13.5px !important; padding: 8px 6px !important; display: inline-block; }
  .copyright { text-align: center; font-size: 12px !important; margin-top: 16px !important; }

  /* ============================================================
     7. 온라인 주문 / 견적문의 페이지 (b1.php ~ b7.php)
     ------------------------------------------------------------
     여기가 실제로 주문이 들어오는 곳이라 가장 신경 써야 하는 화면이다.
     폼 자체(.rq)는 이미 반응형이지만 바깥 껍데기가 고정폭이라 깨진다.
     ============================================================ */

  /* 폼을 감싼 660px 고정 테이블 */
  table[width="660"],
  table[width="660"] > tbody,
  table[width="660"] > tbody > tr,
  table[width="660"] > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  table[width="660"] > tbody > tr > td { padding: 0 !important; }

  /* 좌측메뉴와 본문 사이 30px 간격용 빈 셀 — 모바일에서는 불필요 */
  table[width="880"] > tbody > tr > td[width="30"] { display: none !important; }

  /* 페이지 제목 이미지 (sub_title_4_1.gif 등 698px 고정) */
  img[src*="sub_title"] {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto 6px;
  }

  /* 입력창 글자를 16px 로 — 그보다 작으면 아이폰이 탭할 때마다 화면을 확대해서
     주문 도중 이탈이 생긴다. 안드로이드에서도 오타가 줄어든다. */
  .rq input[type=text],
  .rq input[type=tel],
  .rq input[type=email],
  .rq input[type=number],
  .rq textarea,
  .rq select {
    font-size: 16px !important;
    padding: 13px 14px !important;
    border-radius: 10px !important;
  }
  .rq textarea { min-height: 170px !important; line-height: 1.75 !important; }
  .rq__f label { font-size: 13.5px !important; }
  .rq__agree { font-size: 13.5px !important; line-height: 1.65 !important; }
  .rq__agree input { width: 20px !important; height: 20px !important; }

  /* ---------- 7. 플로팅 CTA -> 하단 고정 바 ----------
     문의 방법이 항상 엄지 근처에 있어야 한다. */
  #rnd-floating-cta {
    right: 0 !important; left: 0 !important; bottom: 0 !important;
    flex-direction: row !important;
    gap: 0 !important;
    background: #ffffff;
    border-top: 1px solid #d7dee8;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.13);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  #rnd-floating-cta > a {
    flex: 1 1 0;
    margin: 0 3px;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 12px 4px !important;
    box-shadow: none !important;
    white-space: nowrap;
  }
  /* 주문/견적 폼 페이지에서는 떠 있는 문의 바를 내린다.
     (전화·이메일·카톡 버튼은 폼 머리말에 그대로 다 있으므로 없어지는 정보는 없다) */
  .rnd-formpage #rnd-floating-cta { display: none !important; }
  .rnd-formpage body { padding-bottom: 20px !important; }

  /* 이메일 버튼도 감추지 않고 둘째 줄에 얇게 남긴다 (내용 손실 없음) */
  #rnd-floating-cta { flex-wrap: wrap !important; }
  #rnd-floating-cta > a[href^="mailto:"] {
    flex: 1 1 100% !important;
    order: 9;
    margin: 5px 3px 0 !important;
    font-size: 11.5px !important;
    padding: 7px 4px !important;
  }
}


/* ---------- 아주 좁은 화면 (<=359px) ---------- */
@media (max-width: 359px) {
  #rnd-mainnav { grid-template-columns: repeat(2, 1fr); }
  #rnd-mainnav li:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.10) !important; }
  #rnd-mainnav li:nth-child(2n) { border-right: none !important; }
  #rnd-related .lnav-links { grid-template-columns: 1fr; }
}


/* ============================================================
   온라인 주문 폼 — 좁은 화면 마무리 (<=620px)
   rnd-form.css 가 나중에 로드되므로 !important 로 덮어쓴다.
   ============================================================ */
@media (max-width: 620px) {
  /* 머리말을 짧게 잡아 첫 입력칸이 첫 화면 안에 들어오게 한다 */
  .rq__head { padding: 16px 14px 18px !important; }
  .rq__body { padding: 18px 14px !important; }
  .rq__eyebrow { margin-bottom: 5px !important; }
  .rq__head h2 { font-size: 18.5px !important; line-height: 1.35 !important; }
  .rq__head p  { font-size: 12.8px !important; line-height: 1.55 !important; margin-top: 7px !important; }
  .rq__sec { margin-bottom: 10px !important; }

  /* 상단 빠른 연락 버튼: 2열로 크게 */
  .rq__quick { gap: 6px !important; margin-top: 12px !important; }
  .rq__quick a {
    flex: 1 1 calc(50% - 3px);
    justify-content: center !important;
    padding: 10px 6px !important;
    font-size: 12px !important;
    min-height: 42px;
  }

  /* 보내기 / 다시작성 버튼: 손가락으로 누르기 좋게 */
  .rq__foot { gap: 8px !important; }
  .rq__btn {
    flex: 1 1 100% !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
    min-height: 50px;
  }
  .rq__note { flex: 1 1 100% !important; text-align: left !important; margin-top: 2px; }

  /* 첨부 영역 */
  .rq__drop { padding: 24px 14px !important; }
  .rq__drop b { font-size: 14px !important; }
  .rq__drop span { font-size: 12px !important; line-height: 1.6 !important; }
  .rq__file { font-size: 12.5px !important; }
  .rq__file .del { width: 30px !important; height: 30px !important; }
}