/* 디캅 홈 — Figma「2026 디캅 홈페이지 / 홈」(node 2004:3), 1920 기준 */
:root
{
  --blue: #1a65fe;
  --body: #444;
  --wrap: 1320px;
}

*
{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body
{
  font-family: Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  color: #000;
  background: #fff;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img
{
  display: block;
  max-width: 100%;
}
a
{
  color: inherit;
  text-decoration: none;
}
ul
{
  list-style: none;
}
address
{
  font-style: normal;
}

.wrap
{
  width: min(var(--wrap), 100% - 40px);
  margin-inline: auto;
}
.wrap--wide
{
  --wrap: 1400px;
}
.sec-title
{
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

/* ── 헤더 ── */
.gnb
{
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: 84px;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color .3s, box-shadow .3s, transform .4s;
}
/* 서브 페이지(디캅소개 · 기술 · 서비스)는 처음부터 흰 헤더 + 아래 선 #e4e8f0 */
.page-sub
{
  padding-top: 85px;
} /* 고정 헤더 84px + 아래 선 1px */
.page-sub .gnb
{
  background: #fff;
  box-shadow: 0 1px 0 #e4e8f0;
}
/* 글이 적은 페이지(공지사항 · 자주 묻는 질문 · 오시는 길)에서 푸터가 화면 한가운데 뜨지 않게 —
   본문이 남는 높이를 가져가고 푸터는 화면 맨 아래에 붙는다 */
.page-sub
{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-sub main
{
  flex: 1 0 auto;
}
.page-sub .footer
{
  flex-shrink: 0;
}
.page-sub .footer
{
  padding-top: 99px;
} /* 서브 페이지 시안은 푸터 내용이 위에서 99px (홈은 69px) */
/* 스크롤 상태 (js/motion.js 가 붙인다) */
.gnb.is-scrolled
{
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.gnb.is-hidden
{
  transform: translateY(-100%);
}

/* 상단으로 버튼 — decop.co.kr(css/common.css .top_btn) 값 그대로. 조금이라도 내리면 .on (js/motion.js) */
.top_btn
{
  position: fixed;
  right: 30px;
  bottom: 20px;
  z-index: 15;
  width: 60px;
  /* 원본은 <a> 안 이미지가 글자 기준선에 앉아 아래에 6.5px 빈 줄이 생긴다 → 실제 이미지는 화면 아래 26.5px. 똑같이 보이게 */
  padding: 0 0 6.5px;
  border: 0;
  background: none;
  cursor: pointer;
  visibility: hidden;
  transition: all ease .6s;
}
.top_btn.on
{
  opacity: 1;
  visibility: visible;
}
.top_btn img
{
  width: 100%;
}
.top_btn:focus-visible
{
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 50%;
}

/* 오른쪽 바로가기 버튼 4개 (js/side-quick.js, 홈 제외) — 두산로보틱스 오른쪽 바로가기 방식을 사이트 톤으로
   오른쪽 끝에 붙은 흰 탭(왼쪽만 둥글게 12), 지금 보고 있는 페이지의 버튼(aria-current)만 사이트 파랑. 화면 오른쪽 세로 가운데(사용자 요청 2026-09-17).
   .is-mini(스크롤 내려감): 글자 폭을 0 으로 접어 아이콘만 — 마우스 · 키보드가 닿으면 다시 펼친다 */
.side-quick
{
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 14;
  transform: translateY(-50%);
}
.side-quick__list
{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.side-quick__link
{
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 18px 0 16px;
  border-radius: 12px 0 0 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 28, 80, .1), 0 0 3px rgba(0, 28, 80, .08);
  color: #000;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}
.side-quick__icon
{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.side-quick__text
{
  overflow: hidden;
  max-width: 120px;
  margin-left: 8px;
  transition: max-width .35s ease, margin-left .35s ease, opacity .25s ease;
}
.side-quick.is-mini .side-quick__text
{
  max-width: 0;
  margin-left: 0;
  opacity: 0;
}
.side-quick.is-mini .side-quick__link:hover .side-quick__text, .side-quick.is-mini .side-quick__link:focus-visible .side-quick__text
{
  max-width: 120px;
  margin-left: 8px;
  opacity: 1;
}
.side-quick__link:hover, .side-quick__link:focus-visible
{
  background: #eaf2ff;
  color: var(--blue);
}
/* 지금 보고 있는 페이지의 버튼 (js/side-quick.js 가 aria-current 를 붙인다) */
.side-quick__link[aria-current="page"]
{
  background: var(--blue);
  color: #fff;
}
.side-quick__link[aria-current="page"]:hover, .side-quick__link[aria-current="page"]:focus-visible
{
  background: #0f55e0;
  color: #fff;
}
.side-quick__link:focus-visible
{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
/* 좁은 화면: 늘 아이콘만, 조금 작게 */
@media (max-width: 760px)
{
  .side-quick__list
  {
    gap: 6px;
  }
  .side-quick__link
  {
    height: 44px;
    padding: 0 12px;
    border-radius: 10px 0 0 10px;
  }
  .side-quick__icon
  {
    width: 20px;
    height: 20px;
  }
  .side-quick .side-quick__text, .side-quick.is-mini .side-quick__link:hover .side-quick__text
  {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
  }
}

/* Lenis 관성 스크롤 권장 CSS */
html.lenis, html.lenis body
{
  height: auto;
}
.lenis.lenis-smooth
{
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped
{
  overflow: hidden;
}
.gnb__logo img
{
  width: 162px;
  height: 46px;
}
.gnb__nav
{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 65px; /* 시안 80px → 65px (사용자 요청) */
}
.gnb__nav a
{
  position: relative;
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  white-space: nowrap;
  transition: color 0.3s ease;
}
/* 메뉴 hover — 운영 중인 decop.co.kr(css/common.css .header .gnb a) 효과 그대로:
   글자는 #3b65eb 로, 밑줄은 왼쪽에서 그어지고 마우스를 떼면 오른쪽으로 빠진다 */
.gnb__nav a::after
{
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #3b65eb;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.4s ease;
}
.gnb__nav a:hover, .gnb__nav a:focus-visible
{
  color: #3b65eb;
}
.gnb__nav a:hover::after, .gnb__nav a:focus-visible::after
{
  transform: scaleX(1);
  transform-origin: bottom left;
}
.btn-dark
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 44px;
  border-radius: 6px;
  background: #202936;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: background-color .25s ease;
}
/* hover: 공지사항 상세 「목록」 버튼과 같게 사이트 파랑으로 (키보드 이동도 같게) */
.btn-dark:hover, .btn-dark:focus-visible
{
  background: var(--blue);
  outline: none;
}

/* ── 히어로 ── */
/* 히어로는 PC 화면 높이의 95% (사용자 요청). 폰 이미지는 아래에 붙어 있고,
   문구 위 여백은 「남는 높이(95vh - 시안 묶음 741px)」의 --hero-lift 배(최소 120px).
   1 이면 시안 위치, 0.7 은 사용자가 문구를 조금 더 올려 달라고 해서 — 1080px 화면에서 약 85px 위

   화면이 낮을 때 (2026-09-16):
   글자 크기에 화면 높이(vh)도 물렸다 — 900px 이상에서는 지금까지와 똑같이 최댓값(제목 74 · 문구 26)에 걸리고,
   그보다 낮아지면 제목 8.5vh · 문구 3vh 로 같이 줄어든다. 그래야 글 묶음이 낮은 화면에서 자리를 덜 차지한다.
   글 묶음 높이(--hero-block)는 그 두 값으로 계산한다 — 74/26 일 때 401px 로 시안과 같다.
   그래도 모자라면 --hero-min 만큼 히어로가 늘어나고 페이지가 스크롤된다(height 가 아니라 min-height —
   예전엔 height 고정 + overflow:hidden 이라 화면이 약 548px 아래로 내려가면 버튼이 잘렸다). */
.hero
{
  --hero-fs: clamp(34px, min(5.6vw, 8.5vh), 74px);
  --hero-lead-fs: clamp(17px, min(1.97vw, 3vh), 26px);
  /* 제목(1.19) + 로고(1.7027 - 0.081) + 문구 위 여백(0.23) + 버튼 위 여백(0.703) = 글자 크기의 3.7416배,
     문구 두 줄 = 문구 크기의 2.62배, 버튼 56px */
  --hero-block: calc(var(--hero-fs) * 3.7416 + var(--hero-lead-fs) * 2.62 + 56px);
  --hero-img-min: 280px; /* 폰 이미지는 이보다 작아지지 않는다 */
  --hero-min: calc(120px + var(--hero-block) + var(--hero-img-min) * 0.759);
  --hero-h: max(var(--hero-min), 95vh);
  --hero-lift: 0.7;
  --hero-pad: max(120px, calc((var(--hero-h) - 741px) * var(--hero-lift)));
  position: relative;
  overflow: hidden;
  min-height: var(--hero-h);
  padding-top: var(--hero-pad);
  text-align: center;
  background: linear-gradient(to bottom right, #fff 0%, #c6e7ff 100%);
}
.hero__inner
{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 20px;
}
.hero__title
{
  font-size: var(--hero-fs);
  font-weight: 700;
  line-height: 1.19;
}
/* 시안 326×126 을 제목 크기에 맞춰 함께 줄인다 (126/74 = 1.7027, 위 여백 -6/74) */
.hero__logo
{
  width: auto;
  height: calc(var(--hero-fs) * 1.7027);
  margin-top: calc(var(--hero-fs) * -0.081);
}
.hero__lead
{
  margin-top: calc(var(--hero-fs) * 0.23);
  font-size: var(--hero-lead-fs);
  line-height: 1.31;
  letter-spacing: -0.4px;
}
/* 가운데 맞춤을 transform 대신 left/right + margin auto 로 — 모션이 transform(크기·위치)을 쓰기 때문.
   높이는 최대 448px(시안). 화면이 낮으면 줄어드는데, 버튼과 겹치는 폭을 시안 비율(108/448 = 24.1%)로 유지한다 —
   고정 108px 로 두면 이미지가 작아질 때 방패가 버튼을 덮는다. 버튼 아래 끝 = 여백 + 401px. 폭은 비율대로 따라간다. */
.hero__visual
{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: auto;
  height: min(448px, calc((var(--hero-h) - var(--hero-pad) - var(--hero-block)) / 0.759));
}

/* 히어로 스토어 버튼 — 하단 배너 버튼(.cta-store)과 클래스 · 규칙을 따로 둔다 */
.hero-store
{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: calc(var(--hero-fs) * 0.703); /* 시안 52px (52/74) */
}
.hero-store__btn
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 170px;
  height: 56px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  font-size: 20px;
  line-height: 24px;
  /* letter-spacing: -1px; */
  font-weight: 200;
  transition: border-color .25s ease, background-color .25s ease;
}
.hero-store__btn--apple
{
  gap: 10px;
}
/* hover: 테두리가 진해지고 바탕이 아주 살짝 어두워진다. 키보드 이동(focus-visible)도 같게 */
.hero-store__btn:hover, .hero-store__btn:focus-visible
{
  border-color: #000;
  background-color: rgba(0, 0, 0, 0.04);
  outline: none;
}

/* ── 소개 ── */
.intro
{
  padding: 157px 0 170px;
  text-align: center;
}
/* 시안 50px → 46px (사용자 요청 2026-09-15). 1315px 이상 화면에서 46px, 그보다 좁으면 비례해서 줄어든다 */
.intro__text
{
  font-size: clamp(24px, 3.5vw, 46px);
  font-weight: 600;
  line-height: 1.3;
}
.combo
{
  position: relative;
  width: 1020px;
  max-width: 100%;
  height: 120px;
  margin: 90px auto 0;
}
.combo__pill
{
  position: absolute;
  top: 0;
  width: 57.843%;
  height: 100%;
  border-radius: 78px;
  opacity: 0.4;
}
.combo__pill--a
{
  left: 0;
  background: #02ecde;
}
.combo__pill--b
{
  right: 0;
  background: #226fff;
}
.combo__label
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  font-weight: 400;
  line-height: 35px;
  color: #001c50;
  white-space: nowrap;
}
.combo__label--a
{
  left: 19.706%;
}
.combo__label--b
{
  left: 64.412%;
}
.combo__plus
{
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  font-weight: 100;
  color: #000;
}

/* ── 바로가기 카드 4개 (소개와 기술 · 서비스 사이) ──
   시안 없음 — 사이트 톤에 맞춤: 줄 #e4e8f0 · 둥글기 20 · 파랑 #1a65fe, 위 띠는 소개 알약 두 색(#02ecde → #226fff)
   hover · 키보드: 카드가 떠오르고, 아이콘과 화살표가 파랗게 채워지고, 위 띠가 왼쪽부터 그어진다 */
.quick
{
  padding: 0 0 140px;
}
.quick__list
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.quick-card
{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 36px 32px 30px;
  border: 1px solid #e4e8f0;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.quick-card::before
{
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #02ecde, #226fff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.quick-card__icon
{
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #eaf2ff;
  color: var(--blue);
  transition: background-color .35s ease, color .35s ease;
}
.quick-card__icon svg
{
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quick-card__en
{
  margin-top: 30px;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue);
}
.quick-card__title
{
  margin-top: 8px;
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
  color: #000;
}
.quick-card__desc
{
  flex: 1;
  margin-top: 12px;
  font-size: 16px;
  line-height: 26px;
  color: var(--body);
}
.quick-card__more
{
  display: flex;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #eef1f6;
  font-size: 15px;
  font-weight: 600;
  line-height: 32px;
  color: #000;
}
.quick-card__more::after
{
  content: "";
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  background: #f1f4f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5h10M7 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  transition: background-color .35s ease, transform .35s ease;
}
.quick-card:hover, .quick-card:focus-visible
{
  border-color: #d5e2fb;
  box-shadow: 0 20px 40px rgba(26, 101, 254, .12);
  transform: translateY(-8px);
}
.quick-card:focus-visible
{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.quick-card:hover::before, .quick-card:focus-visible::before
{
  transform: scaleX(1);
}
.quick-card:hover .quick-card__icon, .quick-card:focus-visible .quick-card__icon
{
  background-color: var(--blue);
  color: #fff;
}
.quick-card:hover .quick-card__more::after, .quick-card:focus-visible .quick-card__more::after
{
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5h10M7 1l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  transform: translateX(4px);
}

/* ── 기술 · 서비스 ── */
.services
{
  background: #f8f8fa;
  padding: 143px 0 149px;
}
.tabs
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 68px;
}
.tabs__btn
{
  height: 45px;
  padding: 0 18.5px;
  border: 1px solid #d9d9d9;
  border-radius: 22.5px;
  background: #fff;
  color: #000;
  font: 500 16px/19px Pretendard, sans-serif;
  cursor: pointer;
}
.tabs__btn.is-active
{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.cards
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 69px 20px;
  margin-top: 40px;
}
/* 탭으로 거른 결과가 없을 때 (홈 · 기술 · 서비스 공용, js/services.js) */
.svc-empty
{
  padding: 120px 0 60px;
  font-size: 18px;
  color: #999;
  text-align: center;
}
.card__thumb, .notice__thumb
{
  aspect-ratio: 427 / 220;
  border-radius: 15px;
  overflow: hidden;
  background: #c4e4fd;
}
.card__thumb img, .notice__thumb img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 카드·공지 글자는 시안(날짜 14 · 제목 20 · 설명 14 · 태그 12)보다 한두 단계 크게 — 사용자 요청 (2026-09-15) */
.card__date
{
  margin-top: 20px;
  font-size: 15px;
  line-height: 18px;
  color: var(--body);
}
.card__title
{
  margin-top: 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
.card__desc
{
  margin-top: 12px;
  height: 72px;
  overflow: hidden;
  font-size: 16px;
  line-height: 24px;
  color: var(--body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* 카드 hover (홈 · 기술 · 서비스 공통): 손가락 커서 + 사진이 살짝 커지고 제목이 파랗게 */
.card
{
  cursor: pointer;
}
.card__thumb img
{
  transition: transform .5s ease;
}
.card:hover .card__thumb img
{
  transform: scale(1.05);
}
/* 영상 카드: 썸네일 가운데 재생 표시 (64px 반투명 원 + 흰 삼각형) */
.card--video .card__thumb
{
  position: relative;
}
.card--video .card__thumb::after
{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22'%3E%3Cpath d='M0 0v22l20-11z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 54% 50%;
  pointer-events: none;
  transition: background-color .2s;
}
.card--video:hover .card__thumb::after
{
  background-color: var(--blue);
}
.card__title
{
  transition: color .2s;
}
.card:hover .card__title
{
  color: var(--blue);
}
.tags
{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 14px;
}
.tags li
{
  padding: 0 11px;
  border-radius: 4px;
  background: #eaf2ff;
  color: var(--blue);
  font-size: 13px;
  line-height: 26px;
}

/* ── 공지사항 ── */
.notice
{
  padding: 142px 0 150px;
}
.notice__list
{
  margin-top: 73px;
}
.notice__item
{
  position: relative;
  display: grid;
  grid-template-columns: 427px 1fr;
  gap: 20px;
  cursor: pointer;
}
/* 항목 전체가 공지사항 상세(notice-view.html)로 가는 링크: 제목 링크의 ::after 가 항목을 덮는다 */
.notice__link::after
{
  content: "";
  position: absolute;
  inset: 0;
}
.notice__link:focus-visible
{
  outline: none;
}
.notice__link:focus-visible::after
{
  outline: 2px solid var(--blue);
  outline-offset: 6px;
  border-radius: 15px;
}
/* hover — 공지사항 페이지(.ntc-item) · 카드와 같게: 손가락 커서 + 사진이 살짝 커지고 제목이 파랗게.
   사진 확대는 transform 대신 scale 속성으로 — 홈에서는 스크롤 모션(GSAP)이 이 사진의 transform 을 쓰고 있어서 겹치면 hover 가 먹히지 않는다.
   GSAP 은 요소에 인라인으로 scale: none 도 적어 두므로 !important 로 이긴다(스크롤 크기 × 1.05 로 곱해진다) */
.notice__thumb img
{
  transition: scale .5s ease;
}
.notice__item:hover .notice__thumb img
{
  scale: 1.05 !important;
}
.notice__title
{
  transition: color .2s;
}
.notice__item:hover .notice__title
{
  color: var(--blue);
}
.notice__body
{
  padding-top: 22px;
}
.notice__title
{
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
}
.notice__desc
{
  margin-top: 20px;
  font-size: 17px;
  line-height: 28px;
  color: var(--body);
}
.notice__date
{
  margin-top: 20px;
  font-size: 15px;
  line-height: 18px;
  color: var(--body);
}

/* ── 하단 배너 ── */
.cta
{
  position: relative;
  overflow: hidden;
  height: 456px;
  padding-top: 82px;
  color: #fff;
  text-align: center;
}
/* 배경을 따로 둔 이유: 스크롤하면 가운데 상자에서 화면 가득 펼쳐진다(clip-path) */
.cta__bg
{
  position: absolute;
  inset: 0;
  background: #001a51 url(assets/cta-bg.png) center / cover no-repeat;
}
.cta .wrap
{
  position: relative;
}
.cta__logo
{
  width: 74px;
  height: 94px;
  margin: 0 auto;
}
.cta__text
{
  margin-top: 15px;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.47;
}
/* 하단 배너 스토어 버튼 — 히어로 버튼(.hero-store)과 클래스 · 규칙을 따로 둔다. 어두운 바탕이라 흰 테두리 · 흰 글자 */
.cta-store
{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.cta-store__btn
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 170px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  font-weight: 200;
  transition: border-color .25s ease, background-color .25s ease;
}
.cta-store__btn--apple
{
  gap: 10px;
}
/* hover: 반투명 흰 테두리가 또렷한 흰색이 되고 바탕을 살짝 밝힌다(히어로 버튼과 같은 방식). 키보드 이동(focus-visible)도 같게 */
.cta-store__btn:hover, .cta-store__btn:focus-visible
{
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  outline: none;
}

/* ── 푸터 ── */
.footer
{
  height: 250px;
  padding-top: 69px;
  background: #000;
}
.footer__inner
{
  display: flex;
  align-items: flex-start;
}
.footer__logo
{
  width: 162px;
  height: 46px;
  margin-left: -2px;
  flex-shrink: 0;
}
.footer__info
{
  margin: 3px 0 0 133px;
  font-size: 15px;
  line-height: 21px;
  color: #adadad;
}
.footer__links
{
  display: flex;
  align-items: center;
}
.footer__links li
{
  display: flex;
  align-items: center;
}
.footer__links li + li::before
{
  content: "";
  width: 3px;
  height: 3px;
  margin: 0 7px;
  background: #999;
}
.footer__addr
{
  margin-top: 9px;
}
.footer__addr span + span
{
  margin-left: 18px;
}
.footer__family
{
  flex-shrink: 0;
  width: 268px;
  height: 40px;
  margin: 5px 0 0 auto;
  padding: 0 13px;
  border: 1px solid #666;
  border-radius: 0;
  color: #fff;
  font: 14px Pretendard, sans-serif;
  appearance: none;
  cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M.5.5 6 5.5 11.5.5' fill='none' stroke='%23999'/%3E%3C/svg%3E") no-repeat right 20px center;
}
.footer__family option
{
  color: #000;
}

/* ── 좁은 화면 ── */
@media (max-width: 1100px)
{
  .gnb__nav
  {
    display: none;
  }
  .cards
  {
    grid-template-columns: repeat(2, 1fr);
  }
  .quick__list
  {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer
  {
    height: auto;
    padding-bottom: 48px;
  }
  .footer__inner
  {
    flex-wrap: wrap;
    gap: 24px;
  }
  .footer__info, .footer__family
  {
    margin: 0;
  }
}
@media (max-width: 640px)
{
  .top_btn
  {
    right: 20px;
    width: 40px;
  } /* decop.co.kr 과 같은 640px 기준 */
}
@media (max-width: 760px)
{
  .quick
  {
    padding-bottom: 80px;
  }
  .quick__list
  {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .quick-card
  {
    padding: 28px 24px 24px;
  }
  .quick-card__icon
  {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
  .quick-card__icon svg
  {
    width: 30px;
    height: 30px;
  }
  .quick-card__en
  {
    margin-top: 22px;
  }
  .quick-card__title
  {
    font-size: 22px;
    line-height: 30px;
  }
  .quick-card__desc
  {
    font-size: 15px;
    line-height: 24px;
  }
  .quick-card__more
  {
    margin-top: 20px;
    padding-top: 16px;
  }
  .gnb
  {
    padding: 0 20px;
  }
  .hero
  {
    min-height: 0;
    padding-top: 140px;
  }
  .hero__logo
  {
    width: 220px;
    height: auto;
  }
  .hero__visual
  {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .intro
  {
    padding: 96px 0;
  }
  .combo
  {
    height: 72px;
    margin-top: 48px;
  }
  .combo__label
  {
    font-size: 14px;
    line-height: 1.2;
    white-space: normal;
  }
  .combo__label--a
  {
    left: 0;
    width: 42.157%;
  }
  .combo__label--b
  {
    left: 57.843%;
    width: 42.157%;
  }
  .combo__plus
  {
    font-size: 32px;
  }
  .services, .notice
  {
    padding: 88px 0;
  }
  .tabs, .cards
  {
    margin-top: 32px;
  }
  .cards
  {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .notice__list
  {
    margin-top: 40px;
  }
  .notice__item
  {
    grid-template-columns: 1fr;
  }
  .notice__body
  {
    padding-top: 0;
  }
  .notice__desc br, .footer__addr br
  {
    display: none;
  }
  .cta
  {
    height: auto;
    padding: 64px 0;
  }
  .footer__addr span
  {
    display: block;
  }
  .footer__addr span + span
  {
    margin-left: 0;
  }
  .footer__family
  {
    width: 100%;
  }
}

/* ── 전체메뉴(햄버거) — 운영 중인 decop.co.kr(.category 3줄 버튼 + #full_menu 오른쪽 슬라이드) 방식 그대로.
   PC 메뉴(.gnb__nav)가 사라지는 1100px 이하에서만 보인다. 버튼 · 패널 마크업은 js/menu.js 가 만든다
   (메뉴 항목은 헤더 .gnb__nav 를 복제 — 메뉴를 고칠 곳은 헤더 한 곳뿐). ── */
.gnb__toggle
{
  display: none;
  position: relative;
  width: 40px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.gnb__toggle .bar
{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
  transition: opacity .3s, top .3s, transform .5s;
  transition-delay: .3s, .3s, 0s; /* 닫힐 때: 먼저 각도가 풀리고, 그다음 줄이 제자리로 */
}
.gnb__toggle .bar:nth-child(1)
{
  top: 0;
}
.gnb__toggle .bar:nth-child(2)
{
  top: 11px;
}
.gnb__toggle .bar:nth-child(3)
{
  top: 22px;
}
/* 열리면 X — 가운데 줄이 사라지고 위 · 아래 줄이 가운데로 모인 뒤 돌아간다 */
.gnb__toggle.is-open .bar
{
  transition-delay: 0s, 0s, .3s;
}
.gnb__toggle.is-open .bar:nth-child(1)
{
  top: 11px;
  transform: rotate(-45deg);
}
.gnb__toggle.is-open .bar:nth-child(2)
{
  opacity: 0;
}
.gnb__toggle.is-open .bar:nth-child(3)
{
  top: 11px;
  transform: rotate(45deg);
}
.gnb__toggle:focus-visible
{
  outline: 2px solid var(--blue);
  outline-offset: 8px;
}

/* 메뉴가 열려 있는 동안 헤더는 흰 바탕으로 고정 (홈은 히어로 위 투명 헤더라 그냥 두면 뒤가 비친다) */
.gnb.is-menu-open
{
  background: #fff;
  transform: none;
}

.full-menu
{
  position: fixed;
  inset: 84px 0 0;
  z-index: 9; /* 헤더(10) 아래 — 햄버거 버튼을 덮지 않는다 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 50px 60px 60px;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  transform: translateX(100%);
  /* visibility 는 0초 — 열 때는 바로 보이고(그래야 누른 즉시 포커스가 들어간다), 닫을 때만 밀려 나간 뒤(0.5초 뒤) 숨는다 */
  transition: transform .5s ease, visibility 0s linear .5s;
}
.full-menu.is-open
{
  visibility: visible;
  transform: none;
  transition: transform .5s ease, visibility 0s linear 0s;
}
.full-menu__nav
{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.full-menu__nav a
{
  font-size: 38px;
  line-height: 2;
  font-weight: 500;
  transition: color .3s ease;
}
.full-menu__nav a:hover, .full-menu__nav a:focus-visible
{
  color: var(--blue);
}
.full-menu__nav a[aria-current="page"]
{
  color: var(--blue);
}
.full-menu__cta
{
  width: 100%;
  max-width: 240px;
  height: 56px;
  font-size: 18px;
}
/* 메뉴가 열리면 페이지는 그대로 멈춘다 (팝업의 html.is-modal-open 과 같은 방식) */
html.is-menu-open
{
  overflow: hidden;
}
html.is-menu-open .top_btn
{
  visibility: hidden;
}

@media (max-width: 1100px)
{
  .gnb__toggle
  {
    display: block;
  }
  .gnb > .btn-dark
  {
    display: none;
  } /* 패널 안 .full-menu__cta 로 옮겨 간다 */
}
@media (max-width: 760px)
{
  .full-menu
  {
    padding: 40px 20px 48px;
  } /* 헤더 좌우 여백(20px)과 글머리를 맞춘다 */
}
@media (max-width: 640px)
{
  .full-menu__nav a
  {
    font-size: 30px;
  } /* decop.co.kr 과 같은 640px 기준 */
}