/* 디캅소개 — Figma「2026 디캅 홈페이지 / 디캅소개」(node 2005:37), 1920 기준
   헤더 · 푸터 · 공통 토큰은 style.css. 이 파일은 디캅소개 본문만. */

.ab-title
{
  font-size: clamp(28px, 3.8vw, 50px);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.ab-lead
{
  margin-top: 30px;
  font-size: clamp(16px, 1.97vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.4px;
  text-align: center;
  color: #333;
}
.ab-title--light, .ab-lead--light
{
  color: #fff;
}

/* 로고와 같은 민트→하늘 그라데이션 글자 */
.grad-text
{
  background: linear-gradient(90deg, #03f2d2 0%, #01e4ef 28%, #00dcff 47%, #1ac7ff 60%, #2db8ff 73%, #38afff 86%, #3cacff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── 제목 ── */
.ab-head
{
  padding: 95px 20px 92px;
  text-align: center;
}
.ab-head__title
{
  font-size: clamp(28px, 3.8vw, 50px);
  font-weight: 800;
  line-height: 1.3;
}
.ab-head .ab-lead
{
  margin-top: 22px;
}

/* ── 디캅 · 디캅몰 ── */
.ab-duo
{
  position: relative;
  overflow: hidden;
  padding: 150px 0;
  background: #171719;
}
/* 위아래로 8%씩 더 크게 — 패럴랙스로 움직여도 가장자리가 안 보이게 */
.ab-duo__bg
{
  position: absolute;
  inset: -8% 0;
  background: url(assets/about-hero-bg.jpg) center / cover no-repeat;
}
.ab-duo__grid
{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.duo-card
{
  display: flex;
  flex-direction: column;
  min-height: 500px;
  padding: 45px 50px 48px 47px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}
.duo-card__name
{
  align-self: flex-start;
  font-size: 36px;
  font-weight: 600;
  line-height: 43px;
}
.duo-card__desc
{
  margin-top: 16px;
  font-size: 20px;
  line-height: 28px;
  color: #333;
}
.duo-card__flow
{
  margin-top: 28px;
}
.duo-card__more
{
  align-self: flex-end;
  margin-top: auto;
  padding-top: 24px;
  font-size: 22px;
  line-height: 26px;
  color: #444;
  transition: color .2s;
}
.duo-card__more:hover
{
  color: var(--blue);
}

/* ── 글로벌 특허 ── */
.ab-global
{
  position: relative;
  overflow: hidden;
  padding: 140px 0 120px;
  background: #303846;
}
/* Figma 에서 배경은 30px 위에서 시작해 블록체인 띠 아래에 깔려 있다.
   이미지는 늘이기(STRETCH)인데 원본 세로의 4.3%~92.8% 구간만 쓴다 → 948 / 0.8846 = 1072px 로 늘리고 46px 위로 올린다 */
.ab-global__bg
{
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 948px;
  background: url(assets/about-global-bg.jpg) 0 -46px / 100% 1072px no-repeat;
  opacity: 0.6;
}
.ab-global .wrap
{
  position: relative;
}
.patents
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 94px;
}
.patent
{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 370px;
  padding-top: 32px;
  border-radius: 15px;
  background: rgba(46, 70, 96, 0.9);
}
.patent__country
{
  font-size: 36px;
  font-weight: 600;
  line-height: 43px;
  color: #fff;
}
.patent img
{
  width: auto;
  height: 238px;
  margin-top: 23px;
  box-shadow: 0 0 0 5px #fff;
} /* 흰 테두리 5px 바깥쪽 */

/* ── 좁은 화면 ── */
@media (max-width: 1100px)
{
  .ab-duo__grid
  {
    grid-template-columns: 1fr;
  }
  .duo-card
  {
    min-height: 0;
  }
  .patents
  {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px)
{
  .ab-head
  {
    padding: 56px 20px;
  }
  .ab-duo
  {
    padding: 64px 0;
  }
  .duo-card
  {
    padding: 32px 24px;
  }
  .duo-card__name
  {
    font-size: 28px;
    line-height: 1.2;
  }
  .duo-card__desc, .duo-card__more
  {
    font-size: 17px;
    line-height: 1.6;
  }
  .duo-card__flow
  {
    margin-top: 20px;
  }
  .duo-card__desc br, .ab-lead br
  {
    display: none;
  }
  .ab-global
  {
    padding: 88px 0;
  }
  .ab-global__bg
  {
    top: 0;
    height: 100%;
  }
  .patents
  {
    gap: 12px;
    margin-top: 48px;
  }
  .patent
  {
    height: auto;
    padding: 20px 0 24px;
  }
  .patent__country
  {
    font-size: 22px;
    line-height: 1.2;
  }
  .patent img
  {
    width: 62%;
    height: auto;
    margin-top: 14px;
  }
}