/* =========================================================
   BIX5 사이트 보정 (시안3.1 위에 덮어씀) — 마지막에 로드. 색은 시안3.1 그대로 두고 여기서 바꾸지 않음
   ========================================================= */

/* 첫 화면·AI 페이지 영상: 일시정지 버튼은 영상 오른쪽 위 (아래쪽 영상 문구를 가리지 않게) */
.vframe .video-toggle, .ai-video-wrap .video-toggle { top: 12px; bottom: auto; }
/* 모바일에서도 영상을 자르지 않고 원본 비율(1920:500) 그대로 */
@media (max-width: 900px) {
  .vframe .video-box { aspect-ratio: 1920 / 500; }
  .vframe .video-box video { object-fit: contain; object-position: center; }
}
@media (max-width: 640px) {
  .vframe .video-toggle, .ai-video-wrap .video-toggle { top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; justify-content: center; }
  .vframe .video-toggle span, .ai-video-wrap .video-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* 인증 마크·고객사 로고: 항상 컬러 */
.cert .mark img, .footer-cert img, .ref-logo img, .ref-logo:hover img { filter: none; opacity: 1; }

/* 기능 > 클릭 & 드래그 카드: 애니메이션 데모 대신 '직접 만들기' 영상(16:9) */
/* 영상(1920x1080) 그대로 16:9 */
.fx-editor .fx-video { aspect-ratio: 16 / 9; margin-top: var(--s5); border-radius: 14px; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); background-color: #0b0b14; }
.fx-editor .fx-video video { object-fit: contain; }
/* 일시정지 버튼: 에디터 위쪽 도구 막대를 가리지 않게 오른쪽 아래(빈 속성 패널 위)에 작은 아이콘으로 */
.fx-editor .fx-video .video-toggle { top: auto; bottom: 10px; right: 10px; width: 30px; height: 30px; padding: 0; justify-content: center; }
.fx-editor .fx-video .video-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { .fx-editor .fx-video .video-toggle { bottom: 6px; right: 6px; width: 26px; height: 26px; } }
/* 고객사 전체 그리드: 마지막 칸(외 다수)을 줄 끝까지 채움 — 칸 수는 references.ftl grid 매크로가 계산. 슬라이드는 해당 없음 */
/* 이미지는 한 칸 폭과 같은 크기로(한국소프테크와 같은 글자 크기). 칸 폭 = (늘린 칸 폭 + 좌우패딩 − (n−1)×gap) ÷ n − 좌우패딩 */
.refs .ref-grid .ref-logo[style] { --n: var(--fill7, 1); --px: 28px; grid-column: span var(--n); }
.refs .ref-grid .ref-logo[style] img { width: calc((100% + var(--px) - (var(--n) - 1) * var(--s3)) / var(--n) - var(--px)); height: auto; max-width: 100%; }
@media (max-width: 960px) { .refs .ref-grid .ref-logo[style] { --n: var(--fill4, 1); } }
@media (max-width: 640px) { .refs .ref-grid .ref-logo[style] { --n: var(--fill3, 1); --px: 16px; } }

/* 대시보드 인터페이스 페이지: 단계 사이 화살표(→)가 연해서 잘 안 보이던 것 → 진하게 */
.ifv-flow li:not(:last-child)::after { color: var(--text-2); font-weight: 700; }
.ifv--new .ifv-flow li:not(:last-child)::after { color: var(--accent); }

/* 모바일 햄버거 메뉴: 펼친 하위 메뉴에 PC용 가운데 정렬 이동(translate -50%)이 남아 화면 밖으로 밀려나던 것 */
@media (max-width: 1100px) {
  .nav-open .gnb-item.is-open .dropdown, body.v2-legacy.v2-legacy.nav-open .gnb-item.is-open .dropdown { transform: none; }
}

/* 소개 02 HTML5: 기기 그림 4개(합계 330px 고정)가 휴대폰 폭에서 카드 밖으로 넘치던 것 → 칸 폭에 맞춰 비율대로 줄어듦 (넓은 화면은 그대로) */
.art-html5 .devices { flex: 0 1 330px; min-width: 0; }
.art-html5 .devices span { height: auto; min-width: 0; flex-basis: 0; flex-shrink: 1; }
.art-html5 .devices .d-pc { flex-grow: 120; aspect-ratio: 120 / 76; }
.art-html5 .devices .d-tv { flex-grow: 92; aspect-ratio: 92 / 56; }
.art-html5 .devices .d-tab { flex-grow: 56; aspect-ratio: 56 / 72; }
.art-html5 .devices .d-ph { flex-grow: 32; aspect-ratio: 32 / 56; }

/* 첫 화면 쇼케이스 아래: 제품 문의(주) + 예제 모두 보기(보조) 두 버튼 */
.sc-more { margin-top: var(--s6); text-align: center; }
.sc-more p { margin: 0 auto; max-width: 560px; color: var(--text-2); font-size: 15px; line-height: 1.6; word-break: keep-all; }
.sc-more .sc-more-btns { margin-top: 0; flex-wrap: wrap; align-items: center; gap: 12px; }
.sc-more .btn--primary { padding-inline: 1.6em; box-shadow: var(--btn-shadow, var(--shadow-lg)); }
@media (max-width: 480px) { .sc-more .sc-more-btns .btn { width: 100%; justify-content: center; } }

/* 모바일 성능: 큰 흐림(blur 80~90px) 장식 원이 움직이며 매 프레임 다시 그려져 화면이 끊기고 탭 반응이 늦던 것
   → 휴대폰·태블릿 폭에서는 blur 대신 가장자리가 부드럽게 사라지는 마스크로 같은 빛 번짐을 표현 (PC는 그대로) */
@media (max-width: 900px), (pointer: coarse) {
  .hv-bg i, .aurora i, .hero-deco i, .safety .glow {
    filter: none;
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
            mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  }
}

/* 헤더 메뉴: 2depth 페이지에 있을 때 그 그룹(1depth)도 현재 위치로 표시 (layout.ftl 이 주소로 판단해 is-current 부여) */
.gnb-link.is-current { color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.dropdown a[aria-current="page"] { background: var(--surface-2); color: var(--text); font-weight: 700; }

/* 대시보드 만들기 (createDashboard.html, 새 디자인) */
.cd-hero .ai-layout { align-items: center; }
.cd-hero-video { aspect-ratio: 16 / 9; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); background-color: #0b0b14; }
.cd-hero-video video { object-fit: contain; }
.cd-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: var(--s6) 0 0; padding: 0; list-style: none; max-width: 520px; }
.cd-ways a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; transition: border-color .2s, transform .2s; }
.cd-ways a:hover { border-color: var(--text-2); transform: translateY(-2px); }
.cd-ways b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--grad, var(--accent)); color: #fff; font-size: 12px; }
.cd-steps { display: grid; gap: clamp(56px, 8vw, 112px); }
.cd-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; scroll-margin-top: calc(var(--header-h, 72px) + 24px); }
.cd-step--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cd-step--flip .cd-copy { order: 2; }
.cd-n { display: inline-block; font-size: clamp(40px, 2rem + 2vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: var(--grad, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cd-copy h3 { margin: 14px 0 6px; font-size: clamp(22px, 1.1rem + 1vw, 30px); letter-spacing: -.02em; line-height: 1.3; word-break: keep-all; }
.cd-sub { margin: 0 0 18px; color: var(--accent); font-weight: 700; font-size: 15px; }
.cd-copy p:not(.cd-sub) { margin: 0 0 12px; color: var(--text-2); font-size: 16px; line-height: 1.8; word-break: keep-all; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.cd-tags li { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; }
.cd-video { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; background: #0b0b14; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.cd-video video { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) {
  .cd-step, .cd-step--flip { grid-template-columns: minmax(0, 1fr); }
  .cd-step--flip .cd-copy { order: 0; }
}
@media (max-width: 480px) { .cd-ways { grid-template-columns: minmax(0, 1fr); } }
/* 소개·인터페이스 페이지처럼 나타나기 효과 끔 (긴 블록이 화면에 충분히 들어오기 전까지 비어 보이던 것) */
.js .page-create .reveal { opacity: 1; transform: none; transition: none; }

/* 햄버거 메뉴(모바일): 현재 위치 1depth 를 PC용 알약 배경 대신 글자색 + 왼쪽 막대로 */
@media (max-width: 1100px) {
  .nav-open .gnb-link.is-current { position: relative; background: none; box-shadow: none; color: var(--accent); padding-left: 14px; }
  .nav-open .gnb-link.is-current::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--grad, var(--accent)); }
}
/* 햄버거 메뉴: PC용 마우스 올림·펼침 알약 배경(흰 배경+그림자)도 끔 — 데스크톱 브라우저를 좁혀 볼 때 보이던 것 */
@media (max-width: 1100px) {
  .nav-open .gnb-link:hover, .nav-open .gnb-item.is-open > .gnb-link, .nav-open .gnb-link[aria-current="page"] { background: none; box-shadow: none; }
}

/* 소개(about-new.css) 모바일 보정 — about-new.css 가 site.css 뒤에 로드되므로 body.page-about 로 우선순위를 올림 */
/* 05 데이터 연결: '.ax1i .v5row'(2단 고정)가 모바일 1단 규칙을 이겨, 오른쪽 '연결 가능한 데이터' 카드가 눌려 글자가 세로로 쌓이던 것 → 720px 이하 1단 */
@media (max-width: 720px) {
  body.page-about .v5row { grid-template-columns: minmax(0, 1fr); }
}
/* 02 기기 그림(PC·태블릿·폰): 휴대폰 폭에서 세 기기 합계 폭이 카드보다 넓어 PC가 왼쪽으로 잘리던 것 → 비율 그대로 축소 */
@media (max-width: 480px) {
  body.page-about .vd5 .vd4-row { gap: 12px; zoom: .74; }
}
/* 상단 '9가지' 목록: 3칸에서 제목이 '…'로 잘리던 것 → 두 줄까지 줄바꿈 */
@media (max-width: 560px) {
  body.page-about.ax1y .ax1-index--ic b, body.page-about .ax1-index--ic b { white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; font-size: 12px; line-height: 1.3; }
}
/* 07 SSO·08 분석 연동 도식: 모바일에서 세로로 쌓이면 가로용 곡선(svg[data-flines])이 길게 늘어나 이상한 S자 선이 생기던 것
   (about-new.css 의 '숨김' 규칙이 svg[data-flines]{display:block} 에 져서 안 먹던 것) → 곡선을 숨기고 짧은 세로 연결선으로 */
@media (max-width: 720px) {
  body.page-about svg.sso2-l, body.page-about svg.pf-lines { display: none; }
  body.page-about .sso2-flow { gap: 26px; }
  body.page-about .pf-stage { row-gap: 30px; }
  body.page-about .sso2-ways, body.page-about .sso2-bix, body.page-about .pf-hub { position: relative; }
  body.page-about .sso2-ways::before, body.page-about .sso2-bix::before, body.page-about .pf-hub::before {
    content: ""; position: absolute; left: 50%; top: -20px; width: 2px; height: 14px; translate: -50% 0; border-radius: 2px; background: var(--grad, #7c6cff); opacity: .7;
  }
  body.page-about .pf-hub::before { top: -24px; height: 18px; }
}

/* 흘러가는 고객사 로고(소개 페이지 .refs 안의 마퀴): 박스(높이 60, 위아래 여백 8)보다 큰 '그리드용 최대 높이 52px'가 적용돼
   세로로 긴 로고 11개(ref18·25·40·43·47·50·61·65·73·75·81)가 박스 아래로 삐져나오던 것 → 박스 안쪽 높이(44px)까지만 */
.refs .marquee-track .ref-logo img { max-height: 44px; max-width: 100%; }

/* 기술 문의 첨부파일: 긴 파일명(띄어쓰기 없는 영문·숫자)이 줄바꿈되지 않아 모바일에서 카드 밖으로 나가던 것 */
.fm-files td:first-child { overflow-wrap: anywhere; word-break: break-all; }
.post-files li { min-width: 0; }
.post-files a { flex-wrap: wrap; max-width: 100%; overflow-wrap: anywhere; word-break: break-all; }

/* 메인 쇼케이스 3x3(9개, 같은 크기 카드). 2열 폭에서는 홀수 마지막 카드가 혼자 남지 않게 두 칸 차지 */
@media (max-width: 960px) and (min-width: 601px) { .showcase--grid .shot:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 16 / 7; } }