@charset "utf-8";
/* 햄버거 전체 화면 메뉴(.mo_menu_wrap) 다시 짜기 — 2026-11-03
   예전 문제: ul 을 position:absolute; top:50%; translateY(-50%) 로 화면 가운데 띄우고 겉을 overflow:hidden 으로 막아
   메뉴가 화면보다 길면 위·아래가 잘리고 스크롤도 안 됐다(PC 1280×720 에서 포트폴리오·회사소개·PHP 보안패치가 안 보임,
   휴대폰 360~390px 에서 CONTACT 가 마지막 메뉴 위에 겹침). PC 에선 회사소개 하위 6개도 70px 큰 글자라 더 길었다.
   지금: 겉이 세로로 스크롤되는 격자 — 위는 메뉴, 아래는 연락처·회사소개서 다운로드(같은 흐름이라 겹치지 않음).
   글자 크기는 화면 너비·높이 중 작은 쪽에 맞춰 보통 화면에선 한 화면에 다 들어오고, 그래도 길면 스크롤된다.
   불러오는 곳: theme/responsive/tail.php, theme/responsive/include/page/overview_tail.php (ovw_common.css · mobile-ux.css 다음) */

.mo_menu_wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  grid-template-areas: "menu menu" "info down";
  column-gap: 20px;
  height: 100%;
  height: 100dvh;
  padding: clamp(92px, 13vh, 150px) 7% calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* 메뉴가 열려 있는 동안 뒤 페이지가 같이 스크롤되지 않게 */
html:has(.mo_menu_wrap.open), body:has(.mo_menu_wrap.open) { overflow: hidden; }
/* 챗봇 말풍선이 메뉴 위에 떠 다운로드 단추를 가린다 — mobile-ux.css 는 모바일만 감춰서 PC 도 감춘다 */
html:has(.mo_menu_wrap.open) #ichatbot-root { display: none !important; }

.mo_menu_wrap .inner { grid-area: menu; align-self: center; max-width: none; width: 100%; margin: 0; padding: 0; } /* 사이트 공통 .inner 좌우 여백 제거 */
.mo_menu_wrap ul { position: static; top: auto; left: auto; transform: none; margin: 0; padding: 0; }
.mo_menu_wrap ul li { margin: 0 0 clamp(6px, 1.5vh, 16px); }
.mo_menu_wrap ul li a,
.mo_menu_wrap ul li a:hover {
  display: inline-block;
  font-size: clamp(22px, min(7.4vw, 4.6vh), 34px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.02em;
}
.mo_menu_wrap ul li a { color: #fff; opacity: .72; transition: opacity .2s; }
.mo_menu_wrap ul li a:hover,
.mo_menu_wrap ul li a:focus-visible { opacity: 1; }
.mo_menu_wrap ul li a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
/* 글자가 아래에서 올라오는 효과(gsap)의 가림막 — 받침이 잘리지 않게 아래 여유 */
.mo_menu_wrap ul li a .hidtxt { background: none; padding-bottom: .06em; }
.mo_menu_wrap .mo_txt_menu--php { color: #ff3b4e; }

/* 회사소개 하위 6개 — 모든 화면에서 작은 줄(PC 에서도 70px 로 커지지 않게) */
.mo_menu_wrap ul li.mo_sub_li { margin: -2px 0 clamp(10px, 2.2vh, 22px); }
.mo_menu_wrap .mo_sub { display: flex; flex-wrap: wrap; gap: 2px 18px; padding-left: 2px; }
.mo_menu_wrap .mo_sub a,
.mo_menu_wrap .mo_sub a:hover {
  display: inline-block !important;
  font-size: 15px !important;
  line-height: 1.4;
  font-weight: 500 !important;
  letter-spacing: 0;
  color: #fff !important;
  padding: 6px 0;
}
.mo_menu_wrap .mo_sub a { opacity: .58; }
.mo_menu_wrap .mo_sub a:hover, .mo_menu_wrap .mo_sub a:focus-visible { opacity: 1; }

/* 아래 줄: 연락처 · 회사소개서 다운로드 */
.mo_menu_wrap .info_wrap {
  grid-area: info;
  position: static; left: auto; bottom: auto; width: auto;
  align-self: end;
  margin-top: clamp(20px, 4vh, 44px);
  padding-top: clamp(16px, 2.6vh, 26px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.mo_menu_wrap .add { color: #9a9a9a; font-size: 12px; }
.mo_menu_wrap .add h3 { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: #bdbdbd; margin: 0; }
.mo_menu_wrap .add p { margin: 6px 0 12px; }
.mo_menu_wrap .info_wrap p a { color: #fff; font-size: 15px; font-weight: 500; }
.mo_menu_wrap .info_wrap .tel { margin-top: 6px; }

.mo_menu_wrap .down {
  grid-area: down;
  position: relative; right: auto; bottom: auto;
  align-self: end; justify-self: end;
  width: 54px; height: 54px;
  margin: 0 30px 30px 0;
}
.mo_menu_wrap .down img { width: 18px; }
/* 둥근 글씨(회사소개서 다운로드)는 단추 둘레에 — 화면 밖으로 나가 가로 스크롤을 만들지 않게 */
.mo_menu_wrap .obj,
.mo_menu_wrap .down:hover .obj {
  width: 116px; height: 116px;
  right: auto; bottom: auto; left: 50%; top: 50%;
  margin: -58px 0 0 -58px;
  pointer-events: none;
}

/* 태블릿 */
@media (min-width: 769px) {
  .mo_menu_wrap { padding-left: 8%; padding-right: 8%; }
  .mo_menu_wrap ul li a,
  .mo_menu_wrap ul li a:hover { font-size: clamp(30px, min(5.6vw, 5.2vh), 52px); }
  .mo_menu_wrap .mo_sub a, .mo_menu_wrap .mo_sub a:hover { font-size: 16px !important; }
  .mo_menu_wrap .mo_sub { max-width: 440px; } /* 6개를 3 · 3 두 줄로(한 개만 다음 줄로 떨어지지 않게) */
  .mo_menu_wrap .add, .mo_menu_wrap .add h3 { font-size: 13px; }
  .mo_menu_wrap .info_wrap p a { font-size: 17px; }
}

/* PC: 왼쪽 아래 연락처 · 가운데 메뉴 · 오른쪽 아래 다운로드 */
@media (min-width: 1081px) {
  .mo_menu_wrap {
    grid-template-columns: minmax(220px, 24%) minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    grid-template-areas: ". menu ." "info menu down";
    column-gap: 4vw;
    padding: clamp(90px, 12vh, 140px) 4% clamp(28px, 5vh, 56px);
  }
  .mo_menu_wrap .inner { align-self: center; }
  .mo_menu_wrap ul li a,
  .mo_menu_wrap ul li a:hover { font-size: clamp(32px, min(4.2vw, 6vh), 64px); line-height: 1.2; }
  .mo_menu_wrap ul li { margin-bottom: clamp(4px, 1.2vh, 14px); }
  .mo_menu_wrap .mo_sub { gap: 4px 20px; }
  .mo_menu_wrap .info_wrap { margin-top: 0; border-top: 0; padding-top: 0; }
  .mo_menu_wrap .down { width: 64px; height: 64px; margin: 0 44px 44px 0; }
  .mo_menu_wrap .obj,
  .mo_menu_wrap .down:hover .obj { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
}

@media (prefers-reduced-motion: reduce) {
  .mo_menu_wrap .obj { animation: none; }
}