/* ============================================================
   common.css — 공통: 변수 / header / footer / quick / sub_visual / 버튼 / 폼
   컬러·타이포 토큰은 Figma 시안 실측값 기준
   ============================================================ */
:root {
  /* color — Figma 실측 팔레트 */
  --navy-950: #060c18;
  --navy-900: #0a2136;
  --navy-850: #0f1a25;
  --navy-800: #0f2c48;
  --navy-700: #162638;
  --navy-600: #111d2a;
  --cyan-300: #6fe0ff;
  --cyan-400: #4fd6ff;
  --cyan-500: #35b7e0;
  --cyan-600: #2ea6d8;
  --cyan-700: #2b86b8;
  --cyan-800: #1c6690;
  --green-300: #a6e88f;
  --green-400: #8ee06a;
  --green-600: #76ad58;
  --green-700: #558a3c;
  --teal-500: #2fa79a;
  --teal-700: #1f7d72;
  --ink: #111111;
  --ink-600: #333333;
  --bg-soft: #f4f9fb;
  --white: #ffffff;
  --grad-cta: linear-gradient(92deg, #2b86b8 0%, #33b3dc 50%, #76ad58 100%);

  /* layout — 1920 기준 / 콘텐츠 1600 */
  --container: 1600px;
  --header-h: 93px;

  /* type scale — Figma 실측 */
  --fs-display: 64px; /* hero */
  --fs-h2: 54px; /* 섹션 타이틀 */
  --fs-h3: 40px;
  --fs-h4: 28px;
  --fs-h5: 24px;
  --fs-body-lg: 20px;
  --fs-body: 18px;
  --fs-body-sm: 17px;
  --fs-caption: 16px;
}

.container {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
  padding: 0 100px;
}

/* util — 이미지 외곽 1px 잘라내기 (래스터 이미지 가장자리 잔여 테두리 제거) */
.img-trim1 {
  clip-path: inset(1px);
}

/* 로고 카드 — 고객사 로고 그리드(clients.html), 메인 로고 마퀴 공통 */
.client-cell {
  background: var(--white);
  border: 1px solid #e2ebf0;
  border-radius: 16px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.client-cell:hover {
  border-color: var(--cyan-400);
  box-shadow: 0 12px 30px rgba(28, 102, 144, 0.1);
}
.client-cell img {
  max-height: 56px;
  width: auto;
  max-width: 80%;
}

.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-600);
  margin-bottom: 28px;
}
.sec-eyebrow svg {
  flex-shrink: 0;
}
.sec-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.sec-title em {
  font-style: normal;
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sec-desc {
  margin-top: 18px;
  font-size: var(--fs-body-lg);
  color: var(--ink-600);
}

/* ------------------------------------------------------------
   ++ top — 헤더 (93px) + GNB 2depth 메가메뉴
   ------------------------------------------------------------ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  max-width: 1920px;
  margin-inline: auto;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.header .container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0;
}
.header__logo img {
  width: 131px;
  height: 40px;
}
.header__nav-area {
  margin-inline: auto;
}
.gnb {
  display: flex;
  align-items: center;
  gap: 80px;
}
.gnb > li {
  position: relative;
}
.gnb > li > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--header-h);
  padding: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--white);
  transition: color 0.2s ease;
}
.gnb > li > a:hover,
.gnb > li.is-active > a {
  color: var(--cyan-400);
}

/* hd_btn — 문의하기 (134×45) */
.hd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 134px;
  height: 45px;
  border-radius: 10px;
  background: var(--cyan-600);
  color: var(--white);
  font-size: 17px;
  font-weight: 600;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.hd-btn:hover {
  background: var(--cyan-500);
  transform: translateY(-1px);
}

/* GNB 서브메뉴 — 각 상위 메뉴를 hover/focus 하면 그 항목의 서브메뉴만 독립된 패널로 열림 */
.gnb__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 280px;
  padding: 22px 20px 20px;
  background: rgba(6, 12, 24, 0.97);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 14px 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s;
  pointer-events: none;
}
.gnb__submenu ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.gnb__submenu a {
  display: block;
  padding: 2px 0;
  font-size: 17px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  color: rgba(255, 255, 255, 0.72);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.gnb__submenu a:hover {
  color: var(--white);
  transform: translateY(-1px);
}

.gnb__item:hover .gnb__submenu,
.gnb__item:focus-within .gnb__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* 스크롤 시 헤더 배경 */
.header.is-scrolled,
.header.is-open {
  background: rgba(6, 12, 24, 0.94);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}
/* backdrop-filter는 fixed 자손(.header__nav-area)의 기준점을 header로 바꿔버리므로
   모바일 메뉴가 열린 동안에는 꺼서 패널 위치가 틀어지지 않게 함 */
.header.is-menu-open {
  backdrop-filter: none;
}

/* 모바일 GNB 토글(햄버거) — 768px 이하에서만 노출 */
.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  flex-shrink: 0;
}
.header__toggle span {
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}
.header.is-menu-open .header__toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.header.is-menu-open .header__toggle span:nth-child(2) {
  opacity: 0;
}
.header.is-menu-open .header__toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* 모바일 GNB 뒤 dim */
.header__dim {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 24, 0.6);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.header.is-menu-open .header__dim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ------------------------------------------------------------
   버튼 — Figma COMMON 컴포넌트 (btn ov ~ ov5)
   ------------------------------------------------------------ */
/* btn_ov — 무료 상담 신청 (190×55, 그라디언트, hover 시 화살표) */
.btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  height: 55px;
  padding: 0 30px;
  border-radius: 12px;
  background: var(--grad-cta);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
}
.btn-cta .txt {
  transition: transform 0.25s ease;
}
.btn-cta:hover .txt {
  transform: translateX(-14px);
}
.btn-cta .arw {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: translate(10px, -50%);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.btn-cta:hover .arw {
  opacity: 1;
  transform: translate(0, -50%);
}

/* btn_ov2~ov5 — 아웃라인 버튼 (190/210×55) */
.btn-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  height: 55px;
  padding: 0 28px;
  border-radius: 10px;
  border: 1px solid currentColor;
  font-size: 18px;
  font-weight: 600;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.btn-line .txt {
  transition: transform 0.25s ease;
}
.btn-line:hover .txt {
  transform: translateX(-14px);
}
.btn-line::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cyan-600);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: translate(10px, -50%);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.btn-line:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}
.btn-line--light {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}

/* btn-detail — "자세히 보기" 전용 (하늘색 아웃라인, hover 시 그라디언트 채움) */
.btn-detail {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  height: 55px;
  padding: 0 28px;
  border-radius: 10px;
  border: 1px solid var(--cyan-600);
  color: var(--cyan-600);
  font-size: 18px;
  font-weight: 600;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.btn-detail .txt {
  transition: transform 0.25s ease;
}
.btn-detail:hover .txt {
  transform: translateX(-14px);
}
.btn-detail::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cyan-600);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: translate(10px, -50%);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.btn-detail:hover {
  color: var(--white);
  border: none;
  background: var(--grad-cta);
}
.btn-detail:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
  background: var(--white);
  color: var(--cyan-600);
}
.btn-line--light:hover {
  color: var(--cyan-400);
  border-color: var(--cyan-400);
}

/* ------------------------------------------------------------
   quick — 우측 하단 퀵메뉴 (문의 / TOP)
   ------------------------------------------------------------ */
.quick {
  position: fixed;
  right: max(32px, calc((100vw - 1920px) / 2 + 32px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quick a,
.quick button {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.quick a::after,
.quick button::after {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--navy-950);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}
.quick a:hover::after,
.quick button:hover::after,
.quick a:focus-visible::after,
.quick button:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.quick a {
  background: var(--cyan-700);
}
.quick a:hover {
  background: var(--cyan-800);
  transform: translateY(-3px);
}
.quick button {
  background: var(--green-600);
}
.quick button:hover {
  background: var(--green-700);
  transform: translateY(-3px);
}
.quick img {
  width: 20px;
  height: 20px;
}
.quick .quick-top {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s;
}
.quick .quick-top.is-show {
  opacity: 1;
  visibility: visible;
}

/* ------------------------------------------------------------
   ++ sub_visual — 서브 상단 비주얼 (820px) + breadcrumb + LNB
   ------------------------------------------------------------ */
.sub-visual {
  position: relative;
  height: 820px;
  color: var(--white);
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      900px 520px at 82% 30%,
      rgba(46, 166, 216, 0.2),
      transparent 62%
    ),
    radial-gradient(
      700px 500px at 12% 82%,
      rgba(142, 224, 106, 0.1),
      transparent 60%
    ),
    linear-gradient(165deg, #0a2136 0%, var(--navy-950) 58%);
}
.sub-visual__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sub-visual__bg--dim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 12, 24, 0.55) 0%,
    rgba(6, 12, 24, 0.25) 45%,
    rgba(6, 12, 24, 0.72) 100%
  );
}
.sub-visual .container {
  position: relative;
  z-index: 2;
}
.sub-visual:not(.sub-visual--center) > .container {
  display: grid;
  grid-template-columns: 1.15fr 1.05fr;
  align-items: center;
  gap: 24px;
}
.sub-visual__eyebrow {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin-bottom: 18px;
}
.sub-visual__title {
  font-size: 84px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sub-visual__desc {
  margin-top: 20px;
  font-size: 34px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  max-width: 720px;
}
/* 타이틀 자리의 로고 이미지 — 어두운 비주얼 위라 흰색으로 반전 */
.sub-visual__logo {
  display: block;
  width: auto;
  height: 80px;
}
/* 리드 문구 + 보조 설명 2단 구성 */
.sub-visual__lead {
  margin-top: 40px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--white);
  max-width: 860px;
}
.sub-visual__lead + .sub-visual__desc {
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
  max-width: 860px;
}
/* 히어로 CTA 버튼 행 */
.sub-visual__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}
.sub-visual__hero {
  width: 100%;
  max-width: 680px;
  justify-self: center;
}

/* navi — breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.66);
}
.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 10px;
  color: rgba(255, 255, 255, 0.4);
}
.breadcrumb li:last-child {
  color: var(--cyan-400);
  font-weight: 600;
}

/* 2depth — LNB 탭 (active / ov / default) */
.lnb-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
}
.lnb {
  display: flex;
  justify-content: center;
}
.lnb a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding: 0 108px;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.66);
  transition: color 0.2s ease;
}
.lnb a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--grad-cta);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.lnb a:hover {
  color: var(--white);
}
.lnb a.is-active {
  color: var(--white);
  font-weight: 700;
}
.lnb a.is-active::after {
  transform: scaleX(1);
}

/* ------------------------------------------------------------
   + contact_bnr — 하단 상담 배너 (547px)
   ※ 배경 사진 원본 미수급 — 네이비 그라디언트 대체 (report 참조)
   ------------------------------------------------------------ */
.contact-bnr,
contact-bnr {
  position: relative;
  height: 547px;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-align: center;
  background: url("../images/common/contact_bnr.jpg") center/cover no-repeat;
  color: var(--white);
}
.contact-bnr .container,
contact-bnr .container {
  position: relative;
  z-index: 2;
}
.contact-bnr__eyebrow {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 24px;
}
.contact-bnr__title {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.8);
}
.contact-bnr__actions {
  margin-top: 42px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* ------------------------------------------------------------
   ++ footer
   ------------------------------------------------------------ */
.footer,
site-footer {
  display: block;
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.62);
  font-size: 16px;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 72px 0 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__brand img {
  width: 148px;
  height: 45px;
  margin-bottom: 24px;
  clip-path: inset(1px);
}
.footer__social {
  display: none;
  gap: 14px;
}
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}
.footer__social a svg {
  width: 20px;
  height: 20px;
}
.footer__social a:hover {
  color: var(--white);
}
.footer__nav {
  display: grid;
  grid-template-columns: 130px 270px 180px 130px 140px;
  gap: 20px;
  margin-left: auto;
}
.footer__nav h3 {
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 16px;
}
.footer__nav a {
  display: block;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}
.footer__nav a:hover {
  color: var(--cyan-400);
}
.footer__info-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 0 8px;
  font-size: 17px;
}
.footer__info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.footer__info li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.footer__info li:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}
.footer__info dt {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}
.footer__info dd {
  color: rgba(255, 255, 255, 0.6);
}
.footer__btm {
  padding: 18px 0 34px;
  font-size: 14px;
}
.footer__copy {
  color: rgba(255, 255, 255, 0.35);
}
.footer__copy span {
  display: inline-block;
  margin-left: 18px;
}

/* ------------------------------------------------------------
   폼 요소 — Figma SUB 컴포넌트 (input & textarea / select / radio / check · 각 3상태)
   ------------------------------------------------------------ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-field > label {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.form-field .req {
  color: var(--cyan-600);
  margin-left: 2px;
}

.inp,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid #d5dee4;
  background: var(--white);
  font-size: 17px;
  color: var(--ink);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.inp::placeholder,
.form-field textarea::placeholder {
  color: #9aa7b0;
}
.inp:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px rgba(53, 183, 224, 0.18);
}
.form-field.is-error .inp,
.form-field.is-error textarea {
  border-color: #e0524f;
  box-shadow: 0 0 0 3px rgba(224, 82, 79, 0.14);
}
.form-field .err-msg {
  display: none;
  font-size: 15px;
  color: #e0524f;
}
.form-field.is-error .err-msg {
  display: block;
}
.form-field textarea {
  min-height: 180px;
  resize: vertical;
}
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

/* check / radio */
.check,
.radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 17px;
}
.check input,
.radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.check .box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid #c3ced6;
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.check input:checked + .box {
  background: var(--cyan-500);
  border-color: var(--cyan-500);
}
.check input:checked + .box::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.radio .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #c3ce d6;
  border-color: #c3ced6;
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.radio input:checked + .dot {
  border-color: var(--cyan-500);
}
.radio input:checked + .dot::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cyan-500);
}
.check input:focus-visible + .box,
.radio input:focus-visible + .dot {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
}

/* 공통 fade-up 등장 */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 반응형 안전장치 — 데스크톱(1920) 시안 기준, 축소 시 열 붕괴 방지 */
@media (max-width: 1200px) {
  :root {
    --fs-display: 48px;
    --fs-h2: 40px;
  }
  .gnb {
    gap: 120px;
  }
  .gnb > li > a {
    padding: 0 16px;
    font-size: 17px;
  }
  .sub-visual {
    height: 640px;
  }
  .sub-visual__logo {
    height: 60px;
  }
  .sub-visual__lead,
  .sub-visual__lead + .sub-visual__desc {
    max-width: 560px;
  }
  .footer__top {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  /* 폰 전용 — 본문(#phone-scale-inner)은 768px 배열을 그대로 두고 zoom으로 화면폭에 맞춰 축소.
     zoom은 transform과 달리 실제 레이아웃 높이를 다시 계산해주므로 높이 보정 JS가 필요 없고,
     position:sticky/fixed 자손의 기준점도 바꾸지 않아 안전함. 0.55 밑으로는 축소를 멈추고
     #phone-scale-outer의 가로 스크롤(드래그)로 넘어감 */
  #phone-scale-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #phone-scale-inner {
    width: 768px;
    zoom: clamp(0.55, calc(100vw / 768px), 1);
  }

  /* 헤더/모바일 GNB — 스케일 대상 밖(항상 원본 크기)이라 아래 규칙만 유지 */
  .header__toggle {
    display: inline-flex;
  }
  .header__nav-area {
    position: fixed;
    top: var(--header-h);
    right: -100%;
    margin-inline: 0;
    width: min(320px, 82%);
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    background: var(--navy-950);
    z-index: 200;
    padding: 28px 28px 40px;
    overflow-y: auto;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease;
  }
  .header.is-menu-open .header__nav-area {
    right: 0;
  }
  .gnb {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .gnb > li > a {
    height: auto;
    padding: 16px 0;
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .gnb__submenu {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border-top: none;
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
    padding: 4px 0 14px 16px;
  }
  .gnb__submenu a {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
  }
}