/* ============================================================= 케이엘큐브(KLCUBE) 홈페이지 - 메인 스타일 ------------------------------------------------------------- ※ 비개발자 안내 - 이 파일은 홈페이지의 "색상, 글자, 간격, 배치"를 담당합니다. - 문구(글자 내용)는 index.html 에서 수정합니다. - 색상만 바꾸고 싶다면 아래 "브랜드 색상" 부분만 고치면 홈페이지 전체 색이 함께 바뀝니다. ============================================================= */ /* ------------------------------------------------------------- [1] 브랜드 색상 ※ 확인 필요 (임시값) ------------------------------------------------------------- CI/BI 디자인 가이드의 정확한 색상 코드를 아직 확인하지 못해 임시 색상을 넣었습니다. 가이드의 정확한 HEX 값을 알려주시면 아래 값만 교체하면 전체 홈페이지 색이 한 번에 맞춰집니다. ------------------------------------------------------------- */ :root { --brand-ink: #0A1428; /* 짙은 남색 : 어두운 영역 배경/제목 */ --brand-blue: #0C4DA2; /* 메인 파랑 : KLcube 로고 색 기준 */ --brand-teal: #14C4B0; /* 청록 : 연결/접근성 강조 (배경영상과 조화) */ --brand-blue-dark: #093A80; /* 제품별 브랜드 색 (로고 색 기준) */ --verse: #C0269A; /* HandSignVerse (마젠타) */ --nova: #279FDC; /* HandSignNova (블루) */ --talktalk: #F07E1A; /* HandSignTalkTalk (오렌지) */ /* 글자색 */ --text-strong: #0E1730; /* 진한 제목 글자 */ --text-body: #38415A; /* 본문 글자 */ --text-muted: #6B7590; /* 흐린 보조 글자 */ --text-on-dark: #EAF0FF; /* 어두운 배경 위 글자 */ /* 배경/선 */ --bg: #FFFFFF; --bg-soft: #F4F7FC; /* 아주 옅은 회색 배경 */ --bg-card: #FFFFFF; --line: #E2E8F3; /* 카드/구분선 색 */ /* 그림자 */ --shadow-sm: 0 2px 10px rgba(16, 32, 74, 0.06); --shadow-md: 0 14px 40px rgba(16, 32, 74, 0.10); /* 공통 값 */ --radius: 16px; --maxw: 1200px; --header-h: 74px; } /* ------------------------------------------------------------- [2] 기본 초기화 / 공통 ------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } /* 오프캔버스 모바일 메뉴(.mobile-menu, translateX(100%))가 문서 오른쪽으로 나가 1024px 등에서 8px 가로 스크롤을 만들던 것을 문서 레벨에서 클립. overflow-x:clip 은 스크롤 컨테이너를 만들지 않아 position:sticky 를 깨지 않는다 (body 에는 이미 overflow-x:hidden 이 있으나 html 레벨 누출을 막지 못했음). */ html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif; color: var(--text-body); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: 96px 0; } .section--soft { background: var(--bg-soft); } .section--dark { background: var(--brand-ink); color: var(--text-on-dark); } /* 섹션 상단 제목 묶음 */ .section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; } .section-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 14px; } .section--dark .section-eyebrow { color: var(--brand-teal); } .section-title { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.25; color: var(--text-strong); font-weight: 800; letter-spacing: -0.02em; } .section--dark .section-title { color: #fff; } .section-desc { margin-top: 16px; font-size: 17px; color: var(--text-muted); } .section--dark .section-desc { color: #B9C6E6; } /* 버튼 */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-size: 16px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space: nowrap; } .btn:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 3px; } .btn--primary { background: var(--brand-blue); color: #fff; } .btn--primary:hover { background: var(--brand-blue-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .btn--ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); } .btn--line { background: #fff; color: var(--brand-blue); border-color: var(--line); } .btn--line:hover { border-color: var(--brand-blue); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn--lg { padding: 17px 34px; font-size: 17px; } /* "임시/확인필요" 표시용 배지 (실제 완성본에서는 제거) */ .temp-badge { display: inline-block; font-size: 12px; font-weight: 700; color: #92510A; background: #FFF3DE; border: 1px solid #F5D9A8; padding: 3px 10px; border-radius: 999px; vertical-align: middle; } /* ------------------------------------------------------------- [3] 상단 메뉴 (헤더) ------------------------------------------------------------- */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; transition: background .25s ease, box-shadow .25s ease; } /* 처음(Hero 위)에는 투명, 스크롤하면 흰 배경 */ .header.is-solid { background: rgba(255,255,255,.96); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); } .header .container { display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 10px; } /* 로고 이미지 : 원본 비율 유지 (절대 강제로 늘리지 않음) */ .logo-image { width: auto; height: 34px; max-width: 200px; object-fit: contain; display: block; } .gnb { display: flex; align-items: center; gap: 6px; } .gnb > li > a, .gnb > li > .gnb-toggle { display: inline-block; padding: 10px 16px; font-size: 16px; font-weight: 600; color: #fff; border-radius: 10px; transition: background .2s, color .2s; background: transparent; border: 0; cursor: pointer; font-family: inherit; line-height: inherit; } .header.is-solid .gnb > li > a, .header.is-solid .gnb > li > .gnb-toggle { color: var(--text-strong); } .gnb > li > a:hover, .gnb > li > .gnb-toggle:hover { color: var(--brand-teal); } .header.is-solid .gnb > li > a:hover, .header.is-solid .gnb > li > .gnb-toggle:hover { color: var(--brand-blue); background: var(--bg-soft); } .header-cta { display: flex; align-items: center; gap: 10px; } .lang-switch { font-size: 14px; font-weight: 700; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 7px 14px; background: transparent; } .header.is-solid .lang-switch { color: var(--text-strong); border-color: var(--line); } .header-cta .btn { padding: 10px 20px; font-size: 15px; } /* 모바일 햄버거 버튼 (평소 숨김) */ .nav-toggle { display: none; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 10px; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .25s; } .header.is-solid .nav-toggle span, .header.is-solid .nav-toggle span::before, .header.is-solid .nav-toggle span::after { background: var(--text-strong); } .nav-toggle span { top: 21px; } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } /* ------------------------------------------------------------- [4] Hero (메인 첫 화면) ------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; color: #fff; overflow: hidden; background: linear-gradient(135deg, #0B1630 0%, #14264F 45%, #0E3A6B 100%); } /* 배경 영상 (무음·자동재생·짧은 루프) */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* 배경 영상 위 어둡게 덮어 글자가 잘 보이도록 */ .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,16,34,.90) 0%, rgba(8,16,34,.70) 42%, rgba(8,16,34,.35) 100%), linear-gradient(180deg, rgba(8,16,34,.55) 0%, transparent 30%, rgba(8,16,34,.65) 100%); } .hero__grid { position: absolute; inset: 0; z-index: 1; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%); } .hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-top: var(--header-h); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--brand-teal); text-transform: uppercase; margin-bottom: 22px; } .hero__eyebrow::before { content:""; width: 26px; height: 2px; background: var(--brand-teal); display:inline-block; } .hero h1 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.18; font-weight: 800; letter-spacing: -0.02em; color: #fff; word-break: keep-all; } .hero h1 .accent { color: var(--brand-teal); } .hero__sub { margin-top: 22px; font-size: clamp(16px, 1.6vw, 19px); color: #C6D4F2; max-width: 540px; } .hero__en { margin-top: 10px; font-size: 15px; letter-spacing: .04em; color: #8FA5D6; } .hero__actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; } /* Hero 우측 : 수어 AI 아바타 영상 자리 */ .hero__visual { position: relative; aspect-ratio: 4/5; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--shadow-md); } /* Hero 우측 수어 아바타 영상 : 패널을 꽉 채움 (검은 배경이 어두운 영역과 자연스럽게 어울림) */ .hero__avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; background: #06101F; } .hero__visual .placeholder-note { text-align: center; color: #C6D4F2; padding: 20px; position: relative; z-index: 2; } .hero__visual .avatar-emoji { font-size: 76px; } /* 아바타 영상 위 라벨(수어 인사) */ .hero__visual .avatar-caption { position: absolute; left: 14px; bottom: 14px; z-index: 3; font-size: 13px; font-weight: 700; color: #EAF0FF; background: rgba(8,16,34,.6); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); } .scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; color: #B9C6E6; font-size: 13px; letter-spacing: .1em; display: flex; flex-direction: column; align-items: center; gap: 8px; } .scroll-hint::after { content:""; width: 1px; height: 34px; background: linear-gradient(#B9C6E6, transparent); } /* 이미지/영상 자리표시 공통 */ .placeholder { display: flex; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(45deg, #EEF2FA, #EEF2FA 12px, #E7ECF7 12px, #E7ECF7 24px); color: var(--text-muted); font-size: 14px; font-weight: 600; border: 1px dashed #C7D2E8; border-radius: 12px; padding: 18px; } .section--dark .placeholder { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); color: #B9C6E6; } /* ------------------------------------------------------------- [4-2] About Us (회사 소개 요약) ------------------------------------------------------------- */ .about__wrap { display: grid; grid-template-columns: 1.4fr .9fr; gap: 48px; align-items: center; } .about__lead { font-size: 17px; color: var(--text-body); margin: 18px 0 26px; max-width: 620px; } .about__stats { display: grid; grid-template-columns: 1fr; gap: 16px; } .about__stats li { display: flex; align-items: center; gap: 18px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; } .about__stats strong { font-size: 34px; font-weight: 800; color: var(--brand-blue); min-width: 64px; line-height: 1; } .about__stats span { font-size: 15px; color: var(--text-muted); font-weight: 600; } /* ------------------------------------------------------------- [5] Our Service (서비스 카드) ------------------------------------------------------------- */ .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .service-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; align-items: stretch; text-align: center; } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: #C9D6F5; } /* 로고/이미지 자리 : 카드 상단 전체폭(풀블리드) 썸네일 밴드. 나중에 로 사진 교체 가능. */ .service-card__logo { margin: -30px -30px 22px; height: 156px; background: linear-gradient(135deg,#EEF3FB,#E3ECF8); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .service-card__logo .logo-image { width: auto; height: auto; max-height: 78px; max-width: 74%; object-fit: contain; } .service-card__tag { align-self: center; font-size: 12px; font-weight: 700; color: var(--brand-blue); background: #EAF0FF; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; } .service-card h3 { font-size: 22px; color: var(--text-strong); font-weight: 800; margin-bottom: 6px; } .service-card .role { font-size: 18px; color: var(--brand-teal); font-weight: 800; line-height: 1.35; margin: 4px 0 12px; letter-spacing: -0.01em; } .service-card p { font-size: 15.5px; color: var(--text-body); flex: 1; } .service-card .more { margin-top: 20px; font-weight: 700; color: var(--brand-blue); font-size: 15px; } .service-card .more::after { content: " →"; } /* 서비스별 브랜드 색 강조 (로고 색 기준) */ .service-card--verse { border-top: 3px solid var(--verse); } .service-card--nova { border-top: 3px solid var(--nova); } .service-card--talktalk { border-top: 3px solid var(--talktalk); } .service-card--verse .service-card__tag { color: var(--verse); background: rgba(192,38,154,.10); } .service-card--nova .service-card__tag { color: var(--nova); background: rgba(39,159,220,.12); } .service-card--talktalk .service-card__tag { color: var(--talktalk); background: rgba(240,126,26,.12); } .service-card--verse .role { color: var(--verse); } .service-card--nova .role { color: var(--nova); } .service-card--talktalk .role { color: var(--talktalk); } .service-card--verse .more { color: var(--verse); } .service-card--nova .more { color: var(--nova); } .service-card--talktalk .more { color: var(--talktalk); } /* AX 플랫폼 카드 (신규, 로고 대신 그라데이션 워드마크) */ .service-card--ax { border-top: 3px solid var(--brand-blue); background: linear-gradient(180deg,#F5F9FF,#fff 42%); } .service-card--ax .service-card__tag { color:#fff; background: linear-gradient(90deg,var(--brand-blue),var(--brand-teal)); } .service-card--ax .role, .service-card--ax .more { color: var(--brand-blue); } .ax-wordmark { display:inline-flex; align-items:baseline; gap:12px; height:auto; } .ax-wordmark b { font-size:56px; font-weight:900; letter-spacing:-0.02em; line-height:1; background:linear-gradient(90deg,var(--brand-blue),var(--brand-teal)); -webkit-background-clip:text; background-clip:text; color:transparent; } .ax-wordmark > span { font-size:22px; font-weight:700; color:var(--text-muted); letter-spacing:.02em; } /* ── 향후 사진 교체용 이미지 슬롯 ────────────────────────────── 아이콘/로고 대신 사진을 넣고 싶으면, 해당 자리(.ic 또는 .service-card__logo) 안의 내용을 아래처럼 이미지 하나로 바꾸면 영역을 꽉 채워 표시됩니다. 설명 ------------------------------------------------------------- */ .card-media { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; } /* ------------------------------------------------------------- [6] 실시간 수어 생성 데모 ------------------------------------------------------------- */ .demo { background: linear-gradient(160deg, #0B1630, #10203F); color: #fff; } /* [v1.8.4] .section-title 는 전역적으로 --text-strong(진한 남색)을 쓰는데, 이 섹션은 배경이 남색 그라데이션이라 그대로 두면 글자가 배경에 묻힌다. #nova-demo(HandSignNova 페이지)의 제목에만 흰색을 되돌려 준다 — 홈 화면(index.html #demo)은 js/ksl-demo.js 가 자체 헤더(.ksl-title, showHeader 기본값)를 그리고 있어 이 .section-title 요소가 애초에 없으므로 영향 없음. 전 페이지 공통 .section-title 규칙은 그대로 둠. */ #nova-demo .section-title { color: #fff; } .demo__disclaimer { text-align: center; margin-top: 22px; font-size: 13.5px; color: #8FA5D6; } .demo__disclaimer a { color: var(--brand-teal); font-weight: 700; } /* ============================================================= 맞춤 수어 아바타 체험 (js/ksl-demo.js 가 그리는 UI) ============================================================= */ .ksl-app { color: #fff; } /* 섹션 헤더 */ .ksl-head { text-align: center; max-width: 760px; margin: 0 auto 30px; } .ksl-eyebrow { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--brand-teal); } .ksl-title { font-size: clamp(26px, 4vw, 36px); font-weight: 800; margin: 10px 0 12px; } .ksl-desc { color: #C6D4F2; font-size: 15.5px; line-height: 1.7; } .ksl-badgerow { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; align-items: center; margin-top: 16px; } .ksl-badge { font-size: 13px; font-weight: 700; color: #05101F; background: var(--brand-teal); padding: 5px 12px; border-radius: 999px; } .ksl-steps { font-size: 13.5px; color: #9FB2DA; } /* 본문 그리드 — 좌우 외곽 패널 동일 높이(stretch), 왼쪽 콘텐츠가 기준 */ .ksl-grid { display: grid; grid-template-columns: 45% 55%; gap: 32px; align-items: stretch; } /* 좌: 입력 패널 */ .ksl-panel { display: flex; flex-direction: column; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 24px; } /* 1단계: 카드 라디오 그룹 — 가로형 카드가 세로로 쌓임 */ .ksl-cards { border: 0; padding: 0; margin: 0 0 20px; } .ksl-cards__legend { font-size: 14px; font-weight: 700; color: var(--brand-teal); padding: 0; margin-bottom: 12px; } .ksl-cards__list { display: flex; flex-direction: column; gap: 9px; } .ksl-card { position: relative; display: flex; align-items: center; gap: 14px; cursor: pointer; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.16); border-radius: 12px; padding: 12px 18px; min-height: 64px; transition: border-color .15s, background .15s; } .ksl-card:hover { background: rgba(255,255,255,.11); } .ksl-card.is-selected { border-color: var(--brand-teal); background: rgba(45,212,191,.14); } .ksl-card__radio:focus-visible + .ksl-card__icon { outline: 3px solid var(--brand-teal); outline-offset: 3px; border-radius: 8px; } .ksl-card__icon { flex: 0 0 auto; width: 30px; height: 30px; color: var(--brand-teal); } .ksl-card__icon svg { width: 100%; height: 100%; display: block; } .ksl-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ksl-card__namerow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .ksl-card__name { font-size: 15.5px; font-weight: 700; color: #fff; } .ksl-card__rec { font-size: 10.5px; font-weight: 800; color: #05101F; background: var(--brand-teal); border-radius: 999px; padding: 1px 7px; } .ksl-card__ex { font-size: 13.5px; color: #A9B8DC; line-height: 1.4; } .ksl-card__check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #05101F; background: var(--brand-teal); opacity: 0; transition: opacity .15s; } .ksl-card__check svg { width: 13px; height: 13px; } .ksl-card.is-selected .ksl-card__check { opacity: 1; } /* 헤더 숨김(nova) 시 배지만 표시 */ .ksl-badgerow--solo { justify-content: flex-start; margin-top: 0; margin-bottom: 22px; } /* 2단계: 폼 */ .ksl-form { margin-bottom: 18px; } .ksl-fields { display: flex; flex-direction: column; gap: 16px; } .ksl-fields--address { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; } .ksl-field { display: flex; flex-direction: column; gap: 6px; } .ksl-field__label { font-size: 14px; font-weight: 700; color: #DCE6FF; } .ksl-field__input { width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #fff; padding: 13px 15px; font-size: 16px; font-family: inherit; } .ksl-field__input::placeholder { color: #90A2CC; } .ksl-field__input:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 2px; } .ksl-field__input.is-invalid { border-color: #FF9B9B; background: rgba(255,120,120,.08); } /* [v1.8.1] 안내·오류 공용 슬롯 — 평소 안내문, 검증 오류 시 같은 자리에서 오류로 교체(.is-error). min-height 로 2줄 분량을 항상 예약해 오류가 나타나거나 사라져도 아래 요소가 밀리지 않는다. 2줄을 넘는 긴 메시지는 자르지 않고 자연스럽게 늘어난다(min-height 이므로 상한이 아님). */ .ksl-field__help { font-size: 12.5px; line-height: 1.45; color: #9FB2DA; min-height: 2.9em; } .ksl-field__help.is-error { color: #FFB4B4; font-weight: 600; } /* 완성될 문장 미리보기 */ .ksl-preview { background: rgba(5,16,31,.6); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; } .ksl-preview__t { display: block; font-size: 12.5px; font-weight: 700; color: var(--brand-teal); margin-bottom: 8px; } .ksl-preview__s { font-size: 17px; line-height: 1.7; color: #EAF0FF; } .ksl-token { font-weight: 800; color: var(--brand-teal); padding: 0 2px; } .ksl-token--empty { color: #7C90BC; font-weight: 600; } .ksl-token--masked { color: #FFC98A; } /* [v1.8.1] 실시간 마스킹 발생 시(타이핑 중) 나타나는 줄 — display:none 대신 visibility:hidden 으로 감춰 항상 자리를 예약한다(§1·§2 취지: 입력 중에도 그 아래 미리보기·생성 버튼이 밀리지 않게). aria-live 는 visibility:hidden 에서도 보이지 않을 때와 동일하게 동작(접근성 트리에서 제외)하므로 안내 동작은 그대로다. */ .ksl-preview__mask { margin-top: 10px; font-size: 12.5px; line-height: 1.4; min-height: 1.4em; color: #FFC98A; } .ksl-preview__mask[hidden] { display: block; visibility: hidden; } /* [v1.8.1] 오류 요약·차단 안내 예약 슬롯 — 자식(errsummary/blocked)의 hidden 여부와 무관하게 wrapper 자체가 min-height 를 갖고 있어, 나타나거나 사라져도 아래 생성 버튼·CTA 가 밀리지 않는다(§2). 필드 수가 최대 2개(company_address)인 현재 템플릿 기준으로 오류요약(제목+최대 2줄)이 더 크므로 그 높이에 맞춰 예약했다. 모바일 360~390px 폭에서 차단 안내 문장이 3줄로 줄바꿈되는 실측(94.8px)을 반영해 100px로. */ .ksl-noticebox { min-height: 100px; margin-bottom: 16px; } /* 오류 요약 */ .ksl-errsummary { background: rgba(255,120,120,.1); border: 1px solid rgba(255,140,140,.4); border-radius: 12px; padding: 14px 16px; } .ksl-errsummary__t { font-weight: 700; color: #FFC1C1; margin-bottom: 6px; font-size: 14px; } .ksl-errsummary__list { margin: 0; padding-left: 18px; } .ksl-errsummary__list a { color: #FFD5D5; font-size: 13.5px; } /* [v1.7.6] 정책상 생성 차단 안내(필드 검증 오류와 구분되는 톤) */ .ksl-blocked { background: rgba(255,201,138,.12); border: 1px solid rgba(255,201,138,.45); border-radius: 12px; padding: 14px 16px; color: #FFDDB0; font-size: 13.5px; font-weight: 600; line-height: 1.6; } /* 생성 버튼 */ .ksl-generate { width: 100%; justify-content: center; font-size: 16px; } .ksl-generate:disabled { opacity: .55; cursor: not-allowed; } .ksl-privacy { margin-top: 14px; font-size: 12.5px; color: #A9B8DC; line-height: 1.6; } /* 우: 결과 무대 — [v1.8.1] 고정 가로세로 비율(3:4, 아바타 인물 사진처럼 세로가 긴 형태 — 실측 Unity 캔버스 632×830 ≈ 0.76 과 근접)로 박스 크기를 못박아, 대기·로딩·생성·오류 어떤 상태에서도(Unity 스테이지 포함) 크기가 변하지 않게 한다(§1). align-self:start 로 그리드의 stretch 정렬(왼쪽 패널 높이에 맞춰 늘어나는 것)을 이 항목만 빼서, aspect-ratio 가 실제로 적용되게 한다(stretch 가 있으면 브라우저가 aspect-ratio 를 무시하고 늘림). [v1.8.5] align-self 는 .ksl-grid 의 '직계' 자식에만 의미가 있는데, 액션 바를 더하면서 .ksl-stage 가 .ksl-stage-col 로 한 겹 감싸졌다 — 그리드 아이템은 이제 .ksl-stage-col 이므로 align-self 도 그쪽으로 옮겼다(아래 .ksl-stage-col 규칙). */ .ksl-stage { background: #05101F; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; display: flex; position: relative; } /* [v1.8.5] 스테이지 + 하단 액션 바(다시보기·초기화)를 세로로 묶는 그리드 2번째 칸. align-self:start 는 위 .ksl-stage 주석 참고. 액션 바는 항상 렌더돼 있어(있다 없다 하지 않음) 높이가 고정이므로 별도 레이아웃 시프트 방지 처리가 필요 없다. */ .ksl-stage-col { display: flex; flex-direction: column; gap: 14px; align-self: start; } .ksl-stage-actions { display: flex; gap: 10px; } .ksl-stage-actions .btn { flex: 1 1 0; justify-content: center; min-height: 44px; } .ksl-stage-actions .btn:disabled { opacity: .45; cursor: not-allowed; } .ksl-stage-actions .btn:disabled:hover { transform: none; background: transparent; } .ksl-stage__inner { flex: 1; display: flex; flex-direction: column; min-height: 0; } .ksl-stage__idle, .ksl-stage__gen, .ksl-stage__msg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; gap: 14px; } .ksl-stage__hint, .ksl-stage__status, .ksl-stage__msgtext { color: #9FB2DA; font-size: 15px; } .ksl-stage__substatus { color: #7C90BC; font-size: 13px; } .ksl-stage--wait .ksl-stage__msgtext { color: #FFC98A; } .ksl-stage--err .ksl-stage__msgtext { color: #FFB4B4; } .ksl-spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255,255,255,.18); border-top-color: var(--brand-teal); animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================= [v1.8.0] Unity WebGL 체험 스테이지(개발팀 지시서 4항) - .ksl-stage--unity 가 붙으면 기존 어댑터 영역(.ksl-stage__inner)을 숨기고 Unity 상시 컨테이너(.ksl-unity-stage)만 flex:1 로 전체를 채운다. - 캔버스는 pointer-events:none + tabindex 미부여로 입력을 받지 않는다 (지시서 6항 — 페이지 스크롤·기존 UI 동작을 방해하지 않아야 함). ============================================================= */ .ksl-stage--unity .ksl-stage__inner { display: none; } .ksl-unity-stage { flex: 1; min-height: 0; display: flex; } .ksl-unity-stage[hidden] { display: none; } .unity-webgl { position: relative; flex: 1; width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; } .unity-webgl__frame { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .unity-webgl__canvas { width: 100%; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 1 / 1; background: transparent; /* 투명 배경 유지 — 강제로 불투명하게 만들지 않음 */ pointer-events: none; outline: none; } .unity-webgl__canvas:focus { outline: none; } .unity-webgl__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #05101F; } .unity-webgl__loading[hidden] { display: none; } .unity-webgl__loading span { color: #9FB2DA; font-size: 14px; } .unity-webgl__bar { width: 60%; max-width: 220px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; } .unity-webgl__bar-fill { height: 100%; width: 0%; background: var(--brand-teal); transition: width .15s linear; } /* 경고는 Unity 영역을 가리지 않도록 하단에 오버레이(지시서 4항) */ .unity-webgl__warning { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(255,120,120,.15); border: 1px solid rgba(255,140,140,.4); color: #FFC1C1; font-size: 13.5px; text-align: center; } .unity-webgl__warning[hidden] { display: none; } /* 결과 — 무대 높이를 채우되 플레이어는 비율 유지(contain) */ .ksl-result { flex: 1; display: flex; flex-direction: column; padding: 18px; gap: 14px; min-height: 0; } .ksl-result__t { font-size: 16px; font-weight: 800; color: #fff; } .ksl-result__t:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 3px; } .ksl-player { position: relative; width: 100%; aspect-ratio: 4/3; background: #020A16; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ksl-player__video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #020A16; } .ksl-player__canvas { width: 100%; height: 100%; } .ksl-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ksl-ctrl { font-size: 13px; color: #DCE6FF; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; } .ksl-ctrl:hover { background: rgba(255,255,255,.16); } .ksl-ctrl.is-on { background: var(--brand-teal); color: #05101F; font-weight: 700; } .ksl-controls__rate { display: inline-flex; align-items: center; gap: 6px; } .ksl-controls__ratelbl { font-size: 12.5px; color: #9FB2DA; } .ksl-result__sentence { font-size: 16px; color: #EAF0FF; line-height: 1.7; } .ksl-result__comp-t { display: block; font-size: 12.5px; font-weight: 700; color: var(--brand-teal); margin-bottom: 8px; } .ksl-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ksl-chip { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.1); color: #DCE6FF; } .ksl-chip--fixed { background: rgba(45,212,191,.2); color: #B8FFF2; } .ksl-chip--fs { background: rgba(255,255,255,.14); } .ksl-chip--num { background: rgba(120,170,255,.22); color: #D5E6FF; } .ksl-chip--masked { background: rgba(255,180,120,.22); color: #FFD2A6; font-weight: 700; } .ksl-result__again { align-self: flex-start; } /* 하단 제작 문의 CTA */ .ksl-cta { margin-top: 28px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 24px 26px; text-align: center; transition: border-color .2s, background .2s; } .ksl-cta.is-highlighted { border-color: var(--brand-teal); background: rgba(45,212,191,.1); } .ksl-cta__t { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 8px; } .ksl-cta__b { font-size: 14.5px; color: #C6D4F2; line-height: 1.7; max-width: 760px; margin: 0 auto 8px; } .ksl-cta__scope { font-size: 13px; color: #9FB2DA; margin-bottom: 16px; } .ksl-cta__btn { } /* 모션 최소화: 스피너 회전 정지 */ @media (prefers-reduced-motion: reduce) { .ksl-spinner { animation: none; border-top-color: rgba(255,255,255,.18); } } /* 반응형 (지시서 8항) */ @media (max-width: 1023px) { /* 좌우를 위아래로 쌓고 동일 높이 강제 해제 */ .ksl-grid { grid-template-columns: 1fr; gap: 22px; align-items: start; } .ksl-player { aspect-ratio: 4/5; } /* 모바일 결과 플레이어 세로 */ } @media (max-width: 767px) { .ksl-panel { padding: 20px 16px; } .ksl-generate { width: 100%; } } /* [v1.8.2] 모바일 한정 — 완성 문장(.ksl-preview__s)이 정상 입력(2줄)과 금칙어 마스킹 **(1줄) 사이를 오갈 때 29px 줄어들며 아래 생성 버튼·스테이지가 딸려 올라가던 시프트 수정(데스크톱은 폭이 넓어 두 경우 다 1줄이라 발생하지 않음, 규칙 건드리지 않음). 58px = font-size 17px × line-height 1.7 × 2줄 실측값을 폴백으로 먼저 두고, 지원 브라우저에서는 2lh 로 더 정확히 재계산한다(2lh 를 모르는 브라우저는 그 선언만 무시하고 58px 폴백을 그대로 씀). */ @media (max-width: 430px) { .ksl-preview__s { min-height: 58px; min-height: 2lh; } } @media (max-width: 360px) { .ksl-fields--address { grid-template-columns: 1fr; } .ksl-card { padding: 12px 14px; gap: 11px; } .ksl-card__ex { font-size: 12.5px; } } /* ------------------------------------------------------------- [7] Solutions (적용 분야) ------------------------------------------------------------- */ .solutions__intro { max-width: 760px; } .solutions__grid { display: grid; grid-template-columns: 300px 1fr; gap: 30px; margin-top: 40px; } .domain-list { display: flex; flex-direction: column; gap: 8px; } .domain-btn { text-align: left; width: 100%; padding: 16px 20px; border-radius: 12px; cursor: pointer; background: var(--bg-card); border: 1px solid var(--line); font-size: 17px; font-weight: 700; color: var(--text-body); display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: .2s; } .domain-btn:hover { border-color: #C9D6F5; } .domain-btn.is-active { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); } .domain-btn .arrow { opacity: 0; transition: .2s; } .domain-btn.is-active .arrow { opacity: 1; } .domain-panel { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-card); display: grid; grid-template-columns: 1fr 1fr; min-height: 340px; } .domain-panel__text { padding: 40px; display: flex; flex-direction: column; justify-content: center; } .domain-panel__text h3 { font-size: 26px; color: var(--text-strong); font-weight: 800; margin-bottom: 14px; } .domain-panel__text p { font-size: 16.5px; color: var(--text-body); } .domain-panel__text .btn { margin-top: 24px; align-self: flex-start; } .domain-panel__img { background: var(--bg-soft); position: relative; } .domain-panel__img .placeholder { position: absolute; inset: 16px; } /* ------------------------------------------------------------- [8] Case Study (도입 사례) ------------------------------------------------------------- */ .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .case-card { border-radius: var(--radius); overflow: hidden; background: var(--bg-card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; } .case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .case-card__img { aspect-ratio: 16/10; } .case-card__img .placeholder { height: 100%; border: 0; border-radius: 0; } .case-card__body { padding: 22px 24px 26px; } .case-card__cat { font-size: 13px; font-weight: 700; color: var(--brand-blue); } .case-card__body h3 { font-size: 19px; color: var(--text-strong); margin: 8px 0 8px; font-weight: 800; } .case-card__body p { font-size: 15px; color: var(--text-muted); } /* ------------------------------------------------------------- [9] News & Media ------------------------------------------------------------- */ .media-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; } /* 언론보도 구분 필터 (press 페이지) */ .press-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .press-filter__btn { padding: 9px 18px; border-radius: 999px; cursor: pointer; background: var(--bg-card); border: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--text-body); transition: .2s; } .press-filter__btn:hover { border-color: #C9D6F5; } .press-filter__btn.is-active { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); } .press-count { color: var(--text-muted); font-size: 15px; margin-bottom: 14px; } .press-more { display: flex; justify-content: center; margin-top: 28px; } .news-row .cat { display: inline-block; margin-right: 10px; padding: 2px 10px; border-radius: 999px; background: rgba(31,90,224,.08); color: var(--brand-blue); font-size: 13px; font-weight: 700; } @media (max-width: 480px) { .press-filter__btn { padding: 8px 14px; font-size: 14px; } } .news-list { display: flex; flex-direction: column; gap: 16px; } .news-lead { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); transition: box-shadow .2s; } .news-lead:hover { box-shadow: var(--shadow-md); } .news-lead__img { min-height: 130px; } .news-lead__img .placeholder { height: 100%; border: 0; border-radius: 0; } .news-lead__body { padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; } .news-lead__body .date { font-size: 13px; color: var(--text-muted); } .news-lead__body h3 { font-size: 19px; color: var(--text-strong); font-weight: 800; margin: 6px 0 10px; line-height: 1.35; } .news-lead__body .read { color: var(--brand-blue); font-weight: 700; font-size: 15px; } .news-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); transition: border-color .2s; } .news-row:hover { border-color: #C9D6F5; } .news-row .src { font-size: 13px; color: var(--brand-blue); font-weight: 700; } .news-row h4 { font-size: 16px; color: var(--text-strong); font-weight: 600; margin-top: 4px; } .news-row .date { font-size: 13px; color: var(--text-muted); white-space: nowrap; } .media-video { display: flex; flex-direction: column; } .video-frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #0A1428; display: flex; align-items: center; justify-content: center; } .video-frame .play { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; color: var(--brand-blue); font-size: 26px; box-shadow: var(--shadow-md); } .video-frame .caption-note { position: absolute; bottom: 12px; left: 12px; right: 12px; font-size: 12px; color: #C6D4F2; background: rgba(0,0,0,.4); padding: 6px 10px; border-radius: 8px; text-align: center; } .media-video .cap { margin-top: 14px; font-size: 14px; color: var(--text-muted); } /* ------------------------------------------------------------- [11] Contact ------------------------------------------------------------- */ /* 배경 영상 + 어두운 덮개 (hero 와 동일 패턴). 폼·정보 카드는 흰 카드라 그대로 가독) */ #contact.contact-bg { position: relative; overflow: hidden; } .contact__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .contact__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,16,34,.86) 0%, rgba(8,16,34,.82) 100%); } #contact.contact-bg > .container { position: relative; z-index: 2; } /* v1.7.1: 메인 팝업(공지). 기본 비활성이라 관리자가 켠 경우에만 렌더됨. */ .kl-popup__back { position: fixed; inset: 0; z-index: 2000; background: rgba(8,16,34,.6); display: flex; align-items: center; justify-content: center; padding: 20px; } .kl-popup { position: relative; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 26px 24px 20px; text-align: center; } .kl-popup__close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--text-muted); cursor: pointer; border-radius: 8px; } .kl-popup__close:hover { background: var(--bg-soft); color: var(--text-strong); } .kl-popup__img { display: block; width: 100%; height: auto; border-radius: 12px; margin: 4px 0 16px; } .kl-popup__title { font-size: 20px; font-weight: 800; color: var(--text-strong); margin: 0 0 10px; line-height: 1.3; } .kl-popup__body { font-size: 15px; color: var(--text-body); line-height: 1.65; margin: 0 0 18px; white-space: pre-line; } .kl-popup__btn { display: inline-block; background: var(--brand-blue); color: #fff; font-weight: 700; font-size: 15px; padding: 11px 22px; border-radius: 999px; text-decoration: none; } .kl-popup__btn:hover { background: var(--brand-blue-dark); } .kl-popup__hide { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 13.5px; color: var(--text-muted); cursor: pointer; } @media (max-width: 480px) { .kl-popup { padding: 22px 18px 16px; } .kl-popup__title { font-size: 18px; } } /* 스팸 방지 허니팟 필드 — 화면 밖으로 밀어 사람에겐 안 보이게(디스플레이 제거 대신 위치 이동). tabindex=-1 + aria-hidden 으로 키보드·스크린리더에도 노출 안 됨. */ .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .contact__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .contact-form { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); } .contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 14.5px; font-weight: 700; color: var(--text-strong); margin-bottom: 7px; } .field label .req { color: #E0453B; } .field input, .field textarea, .field select { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; font-size: 15.5px; font-family: inherit; color: var(--text-strong); background: #fff; } .field textarea { min-height: 120px; resize: vertical; } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 1px; border-color: var(--brand-blue); } .consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-muted); margin: 6px 0 18px; } .consent input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; } .form-note { margin-top: 14px; font-size: 13px; color: var(--text-muted); } /* 문의 폼 인라인 상태 메시지(성공/실패/전송중) — role=status, aria-live=polite */ .form-status { margin-top: 14px; padding: 12px 15px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.5; } .form-status--ok { background: #E7F6EC; color: #1B7A3D; border: 1px solid #B7E4C7; } .form-status--error { background: #FDECEA; color: #B3261E; border: 1px solid #F5C6C2; } .form-status--pending { background: #EEF3FB; color: #0C4DA2; border: 1px solid #C9DBF2; } .contact-info { display: flex; flex-direction: column; gap: 20px; } .contact-info .map { flex: 1; min-height: 240px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .contact-info .map .placeholder { height: 100%; border: 0; border-radius: 0; } .info-list { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; } .info-list li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 15.5px; } .info-list li:last-child { border-bottom: 0; } .info-list .k { width: 84px; color: var(--text-muted); font-weight: 700; flex-shrink: 0; } .info-list .v { color: var(--text-strong); } /* ------------------------------------------------------------- [12] Footer ------------------------------------------------------------- */ .footer { background: #070E20; color: #AFC0E6; padding: 66px 0 30px; } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); } .footer__brand .logo-image { height: 32px; margin-bottom: 18px; } .footer__brand p { font-size: 15px; color: #93A6D0; max-width: 340px; } .footer__brand .slogan { color: #E4ECFF; font-weight: 700; font-size: 16px; margin-bottom: 8px; } .footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; font-weight: 700; } .footer__menu li, .footer__addr li { margin-bottom: 10px; font-size: 14.5px; } .footer__addr .label { color: #6E82AE; font-weight: 700; margin-right: 6px; } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 13.5px; color: #7688B2; flex-wrap: wrap; } .footer__policy { display: flex; gap: 18px; flex-wrap: wrap; } .footer__policy a:hover { color: #fff; } .footer__sns { display: flex; gap: 10px; } .footer__sns a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #AFC0E6; } .footer__sns a svg { width: 18px; height: 18px; fill: currentColor; display: block; } .footer__sns a:hover { background: rgba(255,255,255,.1); color: #fff; } /* ------------------------------------------------------------- [13] 로고 파일이 없을 때 보이는 자리표시 (실제 원본 로고 파일을 assets/logos/ 에 넣으면 자동으로 로고가 보입니다) ------------------------------------------------------------- */ .logo-fallback { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; background: rgba(120,140,190,.14); border: 1px dashed #9FB0D6; color: #6B7590; font-size: 12px; font-weight: 700; white-space: nowrap; } .section--dark .logo-fallback, .footer .logo-fallback, .header:not(.is-solid) .logo-fallback { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #C6D4F2; } /* 본문 바로가기 — 평소엔 숨어 있다가 Tab 으로 포커스되면 나타난다 */ .skip-link { position: fixed; top: -60px; left: 12px; z-index: 300; padding: 12px 20px; border-radius: 0 0 10px 10px; background: var(--brand-blue); color: #fff; font-weight: 700; transition: top .2s ease; } .skip-link:focus { top: 0; } main:focus { outline: none; } /* ------------------------------------------------------------- [14] 모바일 슬라이드 메뉴 (햄버거 클릭 시) ------------------------------------------------------------- */ .mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--brand-ink); color: #fff; transform: translateX(100%); transition: transform .3s ease, visibility .3s; padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; /* 화면 밖으로 밀어내기만 하면 닫혀 있어도 키보드 포커스가 그 안으로 들어간다. PC 에서 Tab 을 누르면 포커스가 보이지 않는 메뉴로 사라지고, aria-hidden 인 영역에 포커스가 놓이는 접근성 위반이 된다. */ visibility: hidden; } .mobile-menu.is-open { transform: translateX(0); visibility: visible; } .mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .mobile-menu__close { background: transparent; border: 0; color: #fff; font-size: 30px; cursor: pointer; } .mobile-menu a { padding: 14px 8px; font-size: 19px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.1); } .mobile-menu .btn { margin-top: 20px; justify-content: center; } .mobile-menu .lang-switch { align-self: flex-start; margin-top: 16px; } /* ------------------------------------------------------------- [15] 반응형 (화면이 작아질 때 배치 변경) ------------------------------------------------------------- */ @media (max-width: 1024px) { .hero .container { grid-template-columns: 1fr; gap: 30px; } .hero__visual { max-width: 420px; } /* (구 데모 그리드 규칙 제거됨 — .ksl-grid 반응형이 대체) */ .media-grid { grid-template-columns: 1fr; } .contact__wrap { grid-template-columns: 1fr; } .service-grid { grid-template-columns: repeat(2, 1fr); } .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 820px) { /* PC 메뉴 숨기고 햄버거 표시 */ .gnb, .header-cta .btn, .header-cta .lang-switch { display: none; } .nav-toggle { display: block; } .section { padding: 66px 0; } .about__wrap { grid-template-columns: 1fr; gap: 30px; } .about__stats { grid-template-columns: 1fr 1fr 1fr; } .about__stats li { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; } .about__stats strong { font-size: 28px; } .service-grid { grid-template-columns: 1fr; } .solutions__grid { grid-template-columns: 1fr; } .domain-list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; } .domain-btn { white-space: nowrap; } .domain-panel { grid-template-columns: 1fr; } .domain-panel__img { min-height: 200px; } .case-grid { grid-template-columns: 1fr; } .news-lead { grid-template-columns: 1fr; } .news-lead__img { min-height: 180px; } .contact-form .row { grid-template-columns: 1fr; } } @media (max-width: 480px) { .container { padding: 0 18px; } /* 3열로는 숫자 칸(min-width:64px)+여백 때문에 더 줄어들지 못해 화면 밖으로 밀려났다 */ .about__stats { grid-template-columns: 1fr 1fr; } .about__stats strong { min-width: 0; } .footer__top { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; align-items: flex-start; } .hero__actions .btn { width: 100%; justify-content: center; } } /* 접근성 : 움직임 최소화를 선호하는 사용자 배려 */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* 키보드 포커스가 잘 보이도록 */ a:focus-visible, button:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 2px; border-radius: 4px; } /* 화면에 안 보이지만 스크린리더가 읽는 텍스트 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================= [추가] 전체 사이트 공통 효과 & 상세페이지 스타일 (v0.4) ============================================================= */ /* --- 스크롤 등장 효과 --- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } .reveal--left { transform: translateX(-32px); } .reveal--right { transform: translateX(32px); } .reveal--zoom { transform: scale(.94); } .reveal--left.is-in, .reveal--right.is-in, .reveal--zoom.is-in { transform: none; } /* --- 그라데이션 글로우(오브) : 레퍼런스의 은은한 배경 효과 --- */ .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; z-index: 0; } .orb--blue { background: radial-gradient(circle, rgba(27,110,240,.55), transparent 70%); } .orb--teal { background: radial-gradient(circle, rgba(20,196,176,.5), transparent 70%); } .orb--verse { background: radial-gradient(circle, rgba(192,38,154,.45), transparent 70%); } .section, .hero, .page-hero, .cta-band { position: relative; } .section > .container, .cta-band > .container { position: relative; z-index: 2; } /* --- 상단 메뉴 드롭다운 --- */ .has-dropdown { position: relative; } .caret { font-size: 11px; opacity: .8; } .dropdown { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); padding: 8px; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease; z-index: 120; } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown .dropdown.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 4px); } .dropdown li a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; } .dropdown li a b { color: var(--text-strong); font-size: 15.5px; font-weight: 700; } .dropdown li a span { color: var(--text-muted); font-size: 13px; } .dropdown li a:hover { background: var(--bg-soft); } .dropdown li a:hover b { color: var(--brand-blue); } .dropdown li a[aria-current="page"] b { color: var(--brand-blue); } /* Our Service 그룹(통합 소개 링크는 AX Platform 과 동일한 기본 .dropdown li a 스타일 사용) + 하위 서비스 링크 */ .dropdown__group { padding: 0; } .dropdown__sub { list-style: none; margin: 2px 0 0; padding: 0; } .dropdown__sub li a { padding: 10px 14px 10px 22px; font-size: 15px; font-weight: 700; color: var(--text-strong); border-radius: 10px; } .dropdown__sub li a:hover { background: var(--bg-soft); color: var(--brand-blue); } .dropdown__sub li a[aria-current="page"] { color: var(--brand-blue); } .dropdown > li:not(.dropdown__group) { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; } /* 모바일 아코디언 (Our Service) */ .m-acc { border-bottom: 1px solid rgba(255,255,255,.1); } .m-acc__toggle { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 14px 8px; font-size: 19px; font-weight: 700; color: #fff; font-family: inherit; display: flex; align-items: center; justify-content: space-between; } .m-acc__toggle::after { content: '▾'; font-size: 14px; transition: transform .2s; } .m-acc__toggle[aria-expanded="true"]::after { transform: rotate(180deg); } .m-acc__panel { display: flex; flex-direction: column; padding: 0 0 10px 12px; } .m-acc__panel[hidden] { display: none; } .m-acc__grouplabel { padding: 8px 8px 4px; font-size: 13px; font-weight: 800; color: #9FB2DA; } .m-acc__grouplink { padding: 12px 8px !important; font-size: 17px !important; font-weight: 800 !important; color: var(--brand-teal) !important; border-bottom: 0 !important; min-height: 44px; display: flex; align-items: center; } .m-acc__panel a { padding: 12px 8px !important; font-size: 17px !important; border-bottom: 0 !important; min-height: 44px; display: flex; align-items: center; } .mobile-menu a[aria-current="page"] { color: var(--brand-teal); } /* 헤더가 투명(Hero 위)일 때 드롭다운 화살표는 흰색 유지 */ .header:not(.is-solid) .caret { color: #fff; } /* --- 상세페이지 상단(페이지 히어로) --- */ .page-hero { padding: calc(var(--header-h) + 66px) 0 66px; background: linear-gradient(135deg, #0A1428 0%, #12244B 55%, #0E3A6B 100%); color: #fff; overflow: hidden; } .page-hero__grid { position: absolute; inset: 0; z-index: 1; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 60% 30%, #000, transparent 80%); } .page-hero .container { position: relative; z-index: 2; } .breadcrumb { font-size: 14px; color: #9FB2DA; margin-bottom: 18px; } .breadcrumb a:hover { color: #fff; } .breadcrumb .sep { margin: 0 8px; opacity: .6; } .page-hero h1 { font-size: clamp(30px, 4.2vw, 48px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: #fff; word-break: keep-all; } .page-hero__sub { margin-top: 18px; font-size: clamp(16px,1.5vw,19px); color: #C6D4F2; max-width: 640px; } .page-hero__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-teal); margin-bottom: 16px; } .page-hero--verse { background: linear-gradient(135deg,#1A0A2E,#3A0F5B 55%,#7A1E96); } .page-hero--nova { background: linear-gradient(135deg,#04121F,#0B2E52 55%,#0E5B8A); } .page-hero--talktalk { background: linear-gradient(135deg,#2A1402,#5B300F 55%,#B5610F); } /* 주황 배경에서 기본 부제 색이 묻혀 읽기 어려워 밝게 올린다 */ .page-hero--talktalk .page-hero__sub { color: #F6E7D4; } /* --- 아이콘 배지(pill) --- */ .pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--brand-blue); background: #EAF0FF; padding: 7px 15px; border-radius: 999px; } .pill .ic { font-size: 15px; } /* --- 체크리스트 --- */ .feature-list { display: grid; gap: 14px; } .feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--text-body); } .feature-list .ck { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-teal); color: #05221F; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; margin-top: 1px; } .feature-list b { color: var(--text-strong); } /* --- 2단 텍스트+이미지 블록 --- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .split--rev .split__media { order: -1; } .split__media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-height: 320px; background: var(--bg-soft); position: relative; } .split__media .placeholder { position: absolute; inset: 0; border: 0; border-radius: 0; } .split h2 { font-size: clamp(24px,3vw,34px); color: var(--text-strong); font-weight: 800; letter-spacing: -0.02em; margin: 14px 0 16px; line-height: 1.28; } .split p { font-size: 16.5px; color: var(--text-body); margin-bottom: 18px; } /* --- 프로세스 단계 (NOVA 등) --- */ .process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: step; } .process__step { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px; text-align: center; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } /* 단계 번호 자리 : 상단 전체폭(풀블리드) 밴드. 나중에 로 이미지 교체 가능. */ .process__step .n { margin: -22px -18px 16px; width: auto; height: 92px; border-radius: 0; background: linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 34px; } .process__step h4 { font-size: 16px; color: var(--text-strong); font-weight: 700; margin-bottom: 6px; } .process__step p { font-size: 13.5px; color: var(--text-muted); } /* 단계별 일러스트: 카드 좌우 여백까지 꽉 채워 번호 띠 바로 아래에 붙인다 */ /* 카드 좌우 안쪽여백(18px)까지 꽉 채우려면 전역 img{max-width:100%} 를 풀어 줘야 한다 */ .process__step .shot { display: block; width: calc(100% + 36px); max-width: none; height: auto; margin: -16px -18px 14px; aspect-ratio: 4/3; object-fit: cover; background: var(--bg-soft); } /* --- 스펙/기능 카드 그리드 --- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .info-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; text-align: center; } .info-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: #C9D6F5; } /* 아이콘/이미지 자리 : 카드 상단 전체폭(풀블리드) 썸네일 밴드. 나중에 로 사진 교체 가능. */ .info-card .ic { margin: -30px -28px 22px; height: 150px; border-radius: 0; background: linear-gradient(135deg,#EAF1FC,#DCE7F7); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; font-size: 62px; line-height: 1; overflow: hidden; border-bottom: 1px solid var(--line); } .info-card h3 { font-size: 19px; color: var(--text-strong); font-weight: 800; margin-bottom: 10px; } .info-card p { font-size: 15px; color: var(--text-body); } /* v1.6.3: 3D 아이콘(카드 상단 밴드) — 이모지 자리를 이미지로. 필터·배경 덧입힘 금지, 비율 유지(contain), 같은 그리드 카드 동일 표시영역. 이미지 자체에 연한 블루 배경 포함. */ .info-card .ic--img { font-size: 0; padding: 0; } .info-card .ic--img .icon3d { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 0; } /* v1.6.4: 이미지 영역 배경을 아이콘의 baked 배경색과 통일 → 사각 경계 제거(이미지는 그대로). 값은 배포 webp 가장자리 픽셀 샘플링 평균(그룹별). 기존 밴드 그라데이션을 solid 로 교체. */ .info-card .ic--img.ic3d--axcaps { background: #E6EFFC; } .info-card .ic--img.ic3d--axuse { background: #E6F0FD; } .info-card .ic--img.ic3d--channels { background: #D7DEF0; } .info-card .ic--img.ic3d--law { background: #DFE5F6; } .info-card .ic--img.ic3d--moat { background: #D6DCF0; } .info-card .ic--img.ic3d--talktalk { background: #CED3E9; } .info-card .ic--img.ic3d--verse { background: #D6DCEF; } /* v1.6.4b — 아이콘별 배경 미세보정: 그룹 평균 대신 각 이미지의 가장자리 실측색. :has() 미지원 구형 브라우저는 위 그룹 색상으로 폴백. */ .info-card .ic--img:has(.icon3d[src*="01-agent-studio.webp"]) { background: #E6EFFC; } .info-card .ic--img:has(.icon3d[src*="02-knowledge-rag.webp"]) { background: #E6EEFC; } .info-card .ic--img:has(.icon3d[src*="03-prompt-template-coach.webp"]) { background: #E5F1FD; } .info-card .ic--img:has(.icon3d[src*="04-model-registry.webp"]) { background: #E3EDFC; } .info-card .ic--img:has(.icon3d[src*="05-connector-mcp-tool.webp"]) { background: #E7F0FB; } .info-card .ic--img:has(.icon3d[src*="06-nlq.webp"]) { background: #E3EEFC; } .info-card .ic--img:has(.icon3d[src*="07-document-generation.webp"]) { background: #E7F0FD; } .info-card .ic--img:has(.icon3d[src*="08-security-deidentification.webp"]) { background: #E3ECFA; } .info-card .ic--img:has(.icon3d[src*="09-audit-monitoring-cost.webp"]) { background: #E7EFFC; } .info-card .ic--img:has(.icon3d[src*="01-organization-ai-portal-v5-dashboard.webp"]) { background: #E5EDFD; } .info-card .ic--img:has(.icon3d[src*="02-public-customer-ai-chatbot-v4-balanced.webp"]) { background: #E6F2FE; } .info-card .ic--img:has(.icon3d[src*="03-ai-document-automation-v4-balanced.webp"]) { background: #E5F1FD; } .info-card .ic--img:has(.icon3d[src*="channel-broadcast-digital-signage.webp"]) { background: #D8DEF1; } .info-card .ic--img:has(.icon3d[src*="channel-mobile-app.webp"]) { background: #D6DDEF; } .info-card .ic--img:has(.icon3d[src*="channel-qr-chatbot.webp"]) { background: #D5DEF0; } .info-card .ic--img:has(.icon3d[src*="channel-website-kiosk.webp"]) { background: #DCE2F3; } .info-card .ic--img:has(.icon3d[src*="context-global-accessibility.webp"]) { background: #DCE3F5; } .info-card .ic--img:has(.icon3d[src*="context-government-policy-alt.webp"]) { background: #DEE4F6; } .info-card .ic--img:has(.icon3d[src*="context-korea-accessibility.webp"]) { background: #E2EBFA; } .info-card .ic--img:has(.icon3d[src*="ai-human-avatar.webp"]) { background: #D7DDEF; } .info-card .ic--img:has(.icon3d[src*="aligned-corpus-management.webp"]) { background: #D4DCF0; } .info-card .ic--img:has(.icon3d[src*="all-in-one-pipeline.webp"]) { background: #D6DDF1; } .info-card .ic--img:has(.icon3d[src*="nonmanual-rule-generation.webp"]) { background: #D7DDF0; } .info-card .ic--img:has(.icon3d[src*="branded-information-v3.webp"]) { background: #C9CEE7; } .info-card .ic--img:has(.icon3d[src*="daily-information-alert-v2.webp"]) { background: #CED3E8; } .info-card .ic--img:has(.icon3d[src*="three-way-call-v2.webp"]) { background: #CFD5EA; } .info-card .ic--img:has(.icon3d[src*="cms.webp"]) { background: #D6DCEE; } .info-card .ic--img:has(.icon3d[src*="mindsign.webp"]) { background: #D4DBF0; } .info-card .ic--img:has(.icon3d[src*="nova.webp"]) { background: #D9E0F1; } .info-card .ic--img:has(.icon3d[src*="qring.webp"]) { background: #D6DCF0; } .info-card .ic--img:has(.icon3d[src*="signbot.webp"]) { background: #D4DDF0; } .info-card .ic--img:has(.icon3d[src*="talktalk.webp"]) { background: #D6DCEE; } .info-card p .temp-badge { margin-top: 6px; } /* --- 통계 밴드 --- */ .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat-band li { text-align: center; padding: 20px; } .stat-band .num { font-size: clamp(32px,4vw,46px); font-weight: 800; color: var(--brand-blue); line-height: 1; letter-spacing: -0.02em; } .section--dark .stat-band .num { color: var(--brand-teal); } .stat-band .lbl { font-size: 15px; color: var(--text-muted); margin-top: 10px; font-weight: 600; } .section--dark .stat-band .lbl { color: #B9C6E6; } /* --- 타임라인(연혁/로드맵) --- */ .timeline { position: relative; padding-left: 28px; } .timeline::before { content:""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } .timeline__item { position: relative; padding: 0 0 30px 8px; } .timeline__item::before { content:""; position: absolute; left: -25px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-blue); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); } .timeline__item .yr { font-size: 15px; font-weight: 800; color: var(--brand-blue); } .timeline__item h4 { font-size: 17px; color: var(--text-strong); font-weight: 700; margin: 4px 0 6px; } .timeline__item p { font-size: 15px; color: var(--text-muted); } /* --- 아코디언(FAQ) --- */ .accordion { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .accordion__item { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); overflow: hidden; } .accordion__q { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 20px 24px; font-size: 17px; font-weight: 700; color: var(--text-strong); display: flex; justify-content: space-between; align-items: center; gap: 14px; } .accordion__q .ico { font-size: 22px; color: var(--brand-blue); transition: transform .25s; flex-shrink: 0; } .accordion__item.is-open .accordion__q .ico { transform: rotate(45deg); } .accordion__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .accordion__item.is-open .accordion__a { max-height: 400px; } .accordion__a p { padding: 0 24px 22px; font-size: 15.5px; color: var(--text-body); } /* --- CTA 밴드 --- */ .cta-band { background: linear-gradient(120deg, var(--brand-blue), #0A2E6B 60%, var(--brand-ink)); color: #fff; overflow: hidden; } .cta-band .container { padding-top: 76px; padding-bottom: 76px; text-align: center; } .cta-band h2 { font-size: clamp(26px,3.4vw,40px); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-bottom: 14px; word-break: keep-all; } .cta-band p { font-size: 18px; color: #C6D4F2; margin-bottom: 30px; } .cta-band .btn--primary { background: #fff; color: var(--brand-blue); } .cta-band .btn--primary:hover { background: #EAF0FF; } .cta-band .btn--ghost { border-color: rgba(255,255,255,.6); } /* --- 모바일 앱 스크린 목업 --- */ .phone { width: 260px; aspect-ratio: 9/19; border-radius: 34px; background: #0A1428; border: 8px solid #05101F; box-shadow: var(--shadow-md); position: relative; overflow: hidden; margin: 0 auto; } .phone .scr { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .phone-row { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; align-items: center; } /* 앱 소개 이미지: 이미 기기 목업이 들어간 이미지라 .phone 프레임을 쓰지 않는다 */ .app-shot { display: block; width: 260px; max-width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow-md); background: #fff; } /* 배경이 비어 있는(투명 PNG) 기기 이미지는 흰 판·그림자 없이 그대로 띄운다 */ .app-shot--bare { background: none; box-shadow: none; border-radius: 0; } /* --- 상세페이지 반응형 --- */ @media (max-width: 1024px) { .process { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr 1fr; } .stat-band { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .gnb .has-dropdown .dropdown { display: none; } /* 모바일은 슬라이드 메뉴 사용 */ .split { grid-template-columns: 1fr; gap: 26px; } .split--rev .split__media { order: 0; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .process { grid-template-columns: 1fr; } .stat-band { grid-template-columns: 1fr 1fr; } } /* v1.6.1: 모바일에서 split/도메인 패널 이미지가 위·아래로 잘리던 문제 수정. 데스크톱은 그대로 cover 유지, 모바일(≤820px, 1단으로 쌓일 때)만 이미지 전체가 보이도록 실제 이미지 비율에 맞춘 박스로 표시(solutions·nova 1:1 / about 12:7·6:5 / ax 16:9 img). */ @media (max-width: 820px) { /* 미디어(ax 콘솔·모니터 등): 자연 비율로 전체 표시 */ .split__media { min-height: 0; height: auto; } .split__media > .card-media { height: auto; object-fit: contain; } /* 배경-이미지 미디어: 전체가 보이도록 contain + 이미지 비율에 맞춘 박스 */ .domain-panel__img, .split__media[style*="background-image"] { background-size: contain !important; background-repeat: no-repeat; background-position: center; min-height: 0 !important; } .domain-panel__img { aspect-ratio: 1 / 1; min-height: 0 !important; } /* 솔루션 800×800 */ .split__media[style*="nova-assets"] { aspect-ratio: 1 / 1; } /* 900×900 */ .split__media[style*="about-main"] { aspect-ratio: 12 / 7; } /* 1200×700 */ .split__media[style*="about-roadmap"] { aspect-ratio: 6 / 5; } /* 1200×1000 */ } /* ============================================================= [추가 v0.8] Our Service 2단 카테고리 + 팝업 / 파트너 롤링 ============================================================= */ .cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px} .cat-card{position:relative;border-radius:22px;padding:46px 42px;min-height:360px;display:flex;flex-direction:column;overflow:hidden;border:0;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;cursor:pointer;color:#fff} .cat-card--access{background:linear-gradient(140deg,#0C4DA2 0%,#127FB0 55%,#14C4B0 100%)} .cat-card--ax{background:linear-gradient(140deg,#1A0A2E 0%,#3A0F5B 45%,#0C4DA2 100%)} .cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)} .cat-card::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-80px;top:-90px;background:rgba(255,255,255,.10);pointer-events:none} .cat-card__eyebrow{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:16px;position:relative;z-index:1} .cat-card h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.02em;position:relative;z-index:1} .cat-card p{margin-top:14px;font-size:16px;color:rgba(255,255,255,.92);max-width:430px;flex:1;position:relative;z-index:1} .cat-card__chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 18px;position:relative;z-index:1} .cat-card__chips span{font-size:12.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.18);padding:6px 12px;border-radius:999px} .cat-card__more{font-weight:800;font-size:15.5px;color:#fff;position:relative;z-index:1} .cat-card__more b{font-size:18px} .cat-popup{position:fixed;inset:0;z-index:150;background:rgba(8,16,34,.62);display:none;align-items:center;justify-content:center;padding:24px} .cat-popup.show{display:flex;animation:fadein .2s} .cat-popup__panel{position:relative;background:var(--bg-soft);border-radius:22px;max-width:1060px;width:100%;max-height:88vh;overflow-y:auto;padding:42px;box-shadow:var(--shadow-md);animation:popup .22s} .cat-popup__close{position:absolute;right:20px;top:16px;background:transparent;border:0;font-size:32px;color:var(--text-muted);cursor:pointer;line-height:1} .service-grid--3{grid-template-columns:repeat(3,1fr)} @keyframes fadein{from{opacity:0}to{opacity:1}} @keyframes popup{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}} /* 파트너 로고 가로 롤링 */ .partner-roll{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .partner-track{display:flex;gap:26px;width:max-content;animation:rollx 28s linear infinite} .partner-roll:hover .partner-track{animation-play-state:paused} .partner-item{flex:0 0 auto;width:180px;height:90px;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-weight:700;font-size:14px} .partner-item .logo-image{max-height:46px;max-width:78%} @keyframes rollx{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){ .partner-track{animation:none} } @media(max-width:820px){ .cat-grid{grid-template-columns:1fr} .service-grid--3{grid-template-columns:1fr} .cat-popup__panel{padding:28px 18px} } /* [v1.0] 팝업 열릴 때 배경 스크롤 잠금 + 카드 키보드 포커스 표시 */ body.no-scroll{overflow:hidden} .cat-card:focus-visible{outline:3px solid var(--brand-teal);outline-offset:3px} .cat-popup__panel:focus{outline:none} /* [v1.0] 미디어(영상) 그리드 + 재생 모달 */ .video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .video-card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .2s,box-shadow .2s;text-align:left;padding:0;width:100%} .video-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)} .video-card:focus-visible{outline:3px solid var(--brand-teal);outline-offset:2px} .video-card__thumb{position:relative;aspect-ratio:16/9;background:#0A1428;overflow:hidden} .video-card__thumb img{width:100%;height:100%;object-fit:cover} .video-card__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .video-card__play span{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--brand-blue);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow-md)} .video-card__len{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px} .video-card__body{padding:14px 16px 16px} .video-card__body h3{font-size:16px;color:var(--text-strong);font-weight:700;line-height:1.35;margin-bottom:8px} .video-card__meta{font-size:13px;color:var(--text-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap} .cap-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px} .cap-badge--y{background:#E4F6EE;color:#129C6E} .cap-badge--n{background:#FFF3DE;color:#92510A} .vmodal{position:fixed;inset:0;z-index:200;background:rgba(8,16,34,.72);display:none;align-items:center;justify-content:center;padding:24px} .vmodal.show{display:flex} .vmodal__panel{position:relative;width:100%;max-width:960px} .vmodal__close{position:absolute;right:-6px;top:-46px;background:transparent;border:0;color:#fff;font-size:34px;cursor:pointer} .vmodal__frame{aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden} .vmodal__frame iframe,.vmodal__frame video{width:100%;height:100%;border:0;display:block} .vmodal__cap{color:#C6D4F2;font-size:13.5px;margin-top:10px;text-align:center} @media(max-width:1024px){.video-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.video-grid{grid-template-columns:1fr}.vmodal__close{top:-6px;right:6px}} /* v1.0 수정: 모바일 데모 영역 가로 넘침 방지 (그리드 아이템 축소 허용) */ .ksl-grid > * { min-width: 0; } .ksl-panel, .ksl-stage, .ksl-stage-col { min-width: 0; max-width: 100%; } /* ============================================================= v1.1 추가: 연혁(History) · 인증/수상 목록 · 지도 embed ============================================================= */ /* 연혁 타임라인 */ .history { max-width: 900px; margin: 0 auto; } .history__row { display: grid; grid-template-columns: 96px 1fr; gap: 26px; padding: 22px 0; border-top: 1px solid var(--line); } .history__row:first-child { border-top: 0; } .history__yr { font-size: 27px; font-weight: 800; color: var(--brand-blue); line-height: 1.1; } .history__items { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } .history__items li { display: flex; gap: 12px; font-size: 15.5px; color: var(--text-body); line-height: 1.5; } .history__items .mo { flex: 0 0 46px; font-weight: 700; color: var(--text-muted); } @media (max-width: 640px) { .history__row { grid-template-columns: 58px 1fr; gap: 14px; } .history__yr { font-size: 21px; } } /* v1.6.7: Why We Exist — 전문 통역 보완 메시지 블록(조용한 강조: 소프트 카드 + 좌측 브랜드 라인) */ .why-callout { display: flex; gap: 26px; align-items: center; max-width: 900px; margin: 30px auto 0; background: var(--bg-soft); border: 1px solid var(--line); border-left: 4px solid var(--brand-blue); border-radius: 14px; padding: 22px 26px; } .why-callout__stat { flex: 0 0 auto; min-width: 168px; text-align: center; } .why-callout__num { font-size: 34px; font-weight: 800; color: var(--brand-blue); line-height: 1.1; } .why-callout__lbl { font-size: 13px; color: var(--text-body); margin-top: 7px; line-height: 1.45; font-weight: 600; } .why-callout__src { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; line-height: 1.4; } .why-callout__msg { font-size: 15px; color: var(--text-body); line-height: 1.75; margin: 0; } @media (max-width: 820px) { .why-callout { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; } .why-callout__stat { min-width: 0; text-align: left; } } /* 연혁 연도 탭 (v1.5) — 색상만으로 선택 상태를 구분하지 않도록 배경·밑줄·굵기 병행 */ .history-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; } .history-tab { appearance: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; line-height: 1; transition: background .15s, color .15s, border-color .15s; } .history-tab:hover { color: var(--brand-blue); border-color: var(--brand-blue); } .history-tab:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; } .history-tab[aria-selected="true"] { color: #fff; background: var(--brand-blue); border-color: var(--brand-blue); box-shadow: 0 6px 16px rgba(30,86,160,.28); } .history-tab[aria-selected="true"] { text-decoration: underline; text-underline-offset: 3px; } /* 색상 외 단서 */ .history-panel { min-height: 120px; } /* 인증·수상 목록 (다크 섹션 위) */ .trust-cert { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; text-align: left; } .trust-cert__item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px 18px; } .trust-cert__item .nm { font-weight: 800; font-size: 15.5px; color: #fff; margin-bottom: 6px; line-height: 1.4; } .trust-cert__item .meta { font-size: 12.5px; color: #B9C6E6; line-height: 1.55; } /* 대표 수상·인증 배지 (다크 섹션 위 · 엠블럼 이미지는 옅은 배경이라 흰 타일에 얹는다) */ .award-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 4px 0 28px; } /* 타일 색은 엠블럼 이미지의 배경색과 같게 맞춰 이미지 경계가 보이지 않게 한다 */ .award { background: #ECF2FB; border-radius: 16px; padding: 18px 16px 16px; text-align: center; box-shadow: var(--shadow-sm); } .award img { display: block; width: 116px; height: 116px; object-fit: contain; margin: 0 auto 12px; } .award .nm { font-weight: 800; font-size: 15px; color: var(--text-strong); line-height: 1.4; } .award .meta { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; } /* 반응형 규칙은 반드시 .award-row 정의보다 뒤에 둔다 (앞에 두면 위 4열 규칙에 덮인다) */ @media (max-width: 1024px) { .award-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .award-row { grid-template-columns: 1fr; gap: 12px; } .award { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; } .award img { width: 64px; height: 64px; margin: 0; flex: none; } } /* 지도 embed 컨테이너(오시는 길 등) */ .split__media iframe, .map iframe { border-radius: var(--radius); } /* ============================================================= v1.1 마케팅 반영: 신뢰 벨트 · 고객/파트너 스트립 ============================================================= */ /* 신뢰 벨트 */ .trust-strip{background:#0B1730;color:#DCE6FF;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)} .trust-strip .container{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .trust-strip__badges{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0} .trust-strip__badges li{font-size:13.5px;font-weight:700;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 14px} .trust-strip__note{font-size:13.5px;color:#AEBEDF;margin:0} .trust-strip__note b{color:#fff} @media(max-width:720px){.trust-strip .container{justify-content:center;text-align:center}} /* 고객·파트너 스트립 */ .client-strip{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;list-style:none;margin:0;padding:0} .client-strip li{font-size:14.5px;font-weight:700;color:var(--text-body,#2b3a5e);background:#fff;border:1px solid var(--line,#E3E8F1);border-radius:10px;padding:12px 18px} /* v1.2: 메인 도입사례 4열 (홈 #case 한정) */ #case .case-grid{grid-template-columns:repeat(4,1fr)} @media(max-width:1024px){#case .case-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){#case .case-grid{grid-template-columns:1fr}} /* ============================================================= HandSignVerse 플랫폼 구조도 (v1.6.1) — 참고 이미지 레이아웃 밝은 패널 + 흰 카드(01·03·04) + 중앙 네이비 플랫폼(02). 아이콘·제품 컬러 반영. 데스크톱: 가로 흐름(●—›) / ≤1023: 세로 스택(↓). ============================================================= */ .verse-diagram{ margin-top:44px; } .vd-sprite{ position:absolute; width:0; height:0; overflow:hidden; } .vd-ico{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block; } /* 한 축 파이프라인: 입력 → 플랫폼(4단계) → 접점 */ .vd-axis{ display:grid; grid-template-columns:250px 60px 1fr 60px 250px; align-items:stretch; } .vd-side{ background:#F8FBFF; border:1px solid #E5ECF7; border-radius:18px; padding:24px 20px; display:flex; flex-direction:column; box-shadow:0 6px 18px rgba(20,40,80,.05); } .vd-kicker{ font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--brand-blue); text-transform:uppercase; } .vd-title{ font-size:21px; font-weight:800; color:var(--text-strong); margin:7px 0 5px; } .vd-desc{ font-size:12.5px; line-height:1.55; color:var(--text-muted); margin:0 0 14px; } .vd-sidechips{ display:flex; flex-direction:column; gap:10px; margin-top:16px; } .vd-chip{ display:flex; align-items:center; gap:11px; background:#fff; border:1px solid #E0E8F5; border-radius:12px; padding:12px 14px; font-size:14px; font-weight:700; color:var(--text-strong); } .vd-chip .vd-ico{ color:var(--brand-blue); } .vd-sidefoot{ margin:12px 0 0; font-size:11.5px; color:#9fb1cf; text-align:center; } /* 연결선 */ .vd-link{ display:flex; align-items:center; justify-content:center; } .vd-link-svg{ width:56px; height:24px; overflow:visible; } .vd-link-svg line{ stroke:var(--brand-teal); stroke-width:2.5; stroke-linecap:round; opacity:.85; } .vd-link-head{ fill:var(--brand-teal); } .vd-link-flow{ fill:#BFF3E3; animation:vdFlow 1.8s linear infinite; } @keyframes vdFlow{ 0%{ transform:translateX(4px); opacity:0; } 15%{ opacity:1; } 75%{ opacity:1; } 100%{ transform:translateX(40px); opacity:0; } } /* 플랫폼 */ .vd-plat{ position:relative; overflow:hidden; border-radius:22px; background:radial-gradient(90% 120% at 85% -10%, rgba(61,142,240,.28) 0%, transparent 45%), radial-gradient(70% 100% at 8% 110%, rgba(58,199,169,.22) 0%, transparent 45%), linear-gradient(158deg,#0F1E3E 0%, #0A1428 100%); border:1px solid rgba(255,255,255,.09); padding:26px 30px; display:flex; flex-direction:column; gap:18px; box-shadow:0 14px 34px rgba(8,18,40,.28); } .vd-plat::after{ content:""; position:absolute; top:18px; right:170px; width:120px; height:52px; pointer-events:none; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size:10px 10px; } .vd-plat-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; position:relative; z-index:1; } .vd-logo{ height:34px; width:auto; } .vd-plat-pill{ margin-left:auto; font-size:12px; font-weight:700; color:#EAF0FF; background:rgba(8,20,44,.55); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:8px 16px; } /* 4단계 — 트랙 라인 위의 공정 노드 (오너 시안) */ .vd-steps{ position:relative; display:flex; align-items:stretch; gap:12px; flex:1 1 auto; padding-top:21px; } .vd-track{ position:absolute; left:12.5%; right:12.5%; top:19px; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--brand-teal), #59B7FF); } .vd-step{ flex:1 1 0; min-width:0; position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:52px 12px 28px; margin-top:19px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; transition:transform .25s ease, border-color .25s ease; } .vd-step:hover{ transform:translateY(-3px); border-color:rgba(127,224,196,.4); } .vd-node{ position:absolute; top:-19px; left:50%; transform:translateX(-50%); width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:15px; font-weight:800; color:#07203C; background:linear-gradient(135deg,#8FE7CD,#3AC7A9); box-shadow:0 0 0 6px #0D1B36, 0 0 16px rgba(58,199,169,.4); } .vd-node--nova{ background:linear-gradient(135deg,#9CD4FF,#4D9BF5); color:#0A2C55; box-shadow:0 0 0 6px #0D1B36, 0 0 18px rgba(77,155,245,.55); } .vd-step b{ font-size:20px; font-weight:800; color:#fff; letter-spacing:-.02em; white-space:nowrap; } .vd-step small{ font-size:12.5px; line-height:1.6; color:#A9C0E8; word-break:keep-all; } .vd-step--nova{ background:linear-gradient(165deg,#1A4C86 0%, #123362 100%); border-color:rgba(122,180,255,.42); flex:1.12 1 0; } .vd-logo--nova{ height:30px; width:auto; margin-bottom:-2px; } .vd-ib{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; } .vd-ib .vd-ico{ width:22px; height:22px; } .vd-ib--teal{ background:rgba(58,199,169,.14); color:#7FE0C4; border:1px solid rgba(58,199,169,.25); } /* 하단 두 줄(기반 기술 · 확장 모듈) */ .vd-plat-foot{ display:flex; flex-direction:column; gap:8px; margin-top:auto; } .vd-foot-row{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; } .vd-foot-label{ font-size:12px; font-weight:800; letter-spacing:.02em; color:#7f96bd; margin-right:6px; } .vd-foot-item{ font-size:12.5px; font-weight:700; color:#EAF2FF; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px 14px; } /* 반응형 */ @media (max-width:1100px){ .vd-axis{ grid-template-columns:1fr; gap:0; } .vd-link{ height:38px; } .vd-link-svg{ transform:rotate(90deg); } .vd-side{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 20px; } .vd-side > .vd-kicker{ flex-basis:100%; } .vd-sidechips{ flex-direction:row; flex-wrap:wrap; margin-top:0; flex:1 1 100%; } .vd-sidefoot{ flex-basis:100%; text-align:left; } .vd-steps{ flex-wrap:wrap; } .vd-step{ flex:1 1 44%; } .vd-track{ display:none; } } @media (max-width:640px){ .vd-step{ flex:1 1 100%; padding-top:30px; } .vd-chip{ flex:1 1 44%; justify-content:flex-start; } } @media (prefers-reduced-motion: reduce){ .vd-node{ box-shadow:0 0 0 5px #0C1830; } .vd-link-flow{ animation:none; opacity:0; } }