/* 카드 상세 팝업 — 홈 · 기술 · 서비스 공용 (js/card-modal.js)
   시안 캡처 「기술 · 서비스-1.png」를 픽셀로 재서 옮긴 값에 사용자가 글자 · 선을 고친 값. 원래 services.css 에 있던 것을 옮겼다. */

/* 카드 전체가 눌린다: 제목 버튼의 ::after 가 카드를 덮는다 */
.card
{
  position: relative;
}
.card__open
{
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.card__open::after
{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
}
.card__open:focus-visible
{
  outline: none;
}
.card__open:focus-visible::after
{
  outline: 2px solid var(--blue);
  outline-offset: 8px;
}
/* hover(사진 확대 · 제목 파랑)는 style.css 에 있다 */

/* ── 상세 팝업 (940×960 · 모서리 20 · 검정 70% 덮개) ── */
html.is-modal-open
{
  overflow: hidden;
}
.svc-modal
{
  margin: auto; /* style.css 의 * { margin: 0 } 이 dialog 가운데 정렬(margin:auto)을 지우므로 되돌린다 */
  width: 940px;
  max-width: calc(100% - 40px);
  height: 960px;
  max-height: calc(100% - 40px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: #000;
  overflow: hidden;
}
.svc-modal::backdrop
{
  background: rgba(0, 0, 0, 0.7);
}
.svc-modal[open]
{
  animation: svc-modal-in .4s cubic-bezier(.2, .8, .2, 1);
}
.svc-modal[open]::backdrop
{
  animation: svc-fade-in .3s ease;
}
@keyframes svc-modal-in
{
  from
  {
    opacity: 0;
    transform: translateY(24px) scale(.98);
  }
}
@keyframes svc-fade-in
{
  from
  {
    opacity: 0;
  }
}

.svc-modal__scroll
{
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #747474 transparent; /* 시안의 회색 스크롤바 */
}
.svc-modal__scroll::-webkit-scrollbar
{
  width: 7px;
}
.svc-modal__scroll::-webkit-scrollbar-thumb
{
  border-radius: 4px;
  background: #747474;
}

/* 위 이미지 208px, 아래쪽이 흰색으로 녹아든다 */
.svc-modal__media
{
  position: relative;
  height: 208px;
  overflow: hidden;
}
.svc-modal__img
{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* 카드에 data-modal-fit 이 있을 때: JS 가 width · height · left · top 을 % 로 넣는다(가로 · 세로 따로 늘어날 수 있다) */
.svc-modal__img.is-fit
{
  position: absolute;
  max-width: none;
  object-fit: fill;
}
.svc-modal__media::after
{
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 70px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}

/* 닫기: 36px 원 #323d4e, 위 · 오른쪽 20px */
.svc-modal__close
{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #323d4e;
  cursor: pointer;
  transition: background-color .2s;
}
.svc-modal__close::before, .svc-modal__close::after
{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.svc-modal__close::after
{
  transform: translate(-50%, -50%) rotate(-45deg);
}
.svc-modal__close:hover, .svc-modal__close:focus-visible
{
  background: var(--blue);
  outline: none;
}

.svc-modal__head
{
  padding: 50px 48px 0;
}
.svc-modal__title
{
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
}
.svc-modal__date
{
  margin-top: 8px;
  font-size: 16px;
  line-height: 19px;
  color: #666;
}
.svc-modal__line
{
  height: 1px;
  margin: 25px 50px 0;
  border: 0;
  background: #ddd;
}
.svc-modal__body
{
  margin-top: 30px;
  padding: 0 48px 50px;
  font-size: 18px;
  color: #333;
  white-space: pre-line;
  word-break: normal;
  letter-spacing: -0.2px;
  line-height: 1.5;
}

/* ── 사진 · 구역이 있는 상세 본문 (js/card-details.js) ──
   「디캅 앱에서 제공하는 다양한 기능」 = decop.co.kr/service-overview.html 내용.
   원본은 1300px 폭 페이지라 팝업 안쪽 폭(940 - 48×2 = 844)에 맞춰 줄였다: 폰 300→240, 원 200→130 */
.svc-modal__body.is-rich
{
  margin-top: 0;
  padding: 0;
  white-space: normal;
  font-size: inherit;
  letter-spacing: normal;
}

.svc-detail__row
{
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 44px 48px;
}
.svc-detail__row--rev
{
  flex-direction: row-reverse;
} /* 원본 service_2 — 글이 왼쪽, 폰이 오른쪽 */
.svc-detail__row--tint
{
  background: #f3f7ff;
} /* 원본 service_2 · service_4 바탕색 */

/* 폰 테두리 — 원본 .mobile (흰 테두리 15 · 모서리 36 · 바깥 그림자 + 안쪽 그림자) 를 0.8배로 */
.svc-detail__phone
{
  flex-shrink: 0;
  padding: 12px;
  border-radius: 29px;
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .25), inset 0 0 15px rgba(0, 0, 0, .1);
}
.svc-detail__phone img
{
  display: block;
  width: 240px;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 24px;
}

.svc-detail__kicker
{
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: #999;
}
.svc-detail__lead
{
  margin-top: 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.55;
  color: #111;
}

/* 마지막 구역: 가운데 문구 + 겹쳐 놓은 동그란 사진 7장 (원본 .designAll) */
.svc-detail__row--cats
{
  flex-direction: column;
  gap: 0;
  padding: 56px 48px 60px;
}
.svc-detail__title
{
  font-size: 26px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
.svc-cats
{
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.svc-cats__item
{
  margin-left: -20px;
} /* 원본 -30px(원 200 대비 15%) 과 같은 비율 */
.svc-cats__item:first-child
{
  margin-left: 0;
}
.svc-cats__item img
{
  display: block;
  width: 130px;
  height: 130px;
  border-radius: 50%;
}
.svc-cats__item span
{
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
}

/* ── 좁은 화면 ── */
@media (max-width: 760px)
{
  .svc-modal
  {
    max-width: calc(100% - 24px);
    max-height: calc(100% - 48px);
    border-radius: 16px;
  }
  .svc-modal__media
  {
    height: 150px;
  }
  .svc-modal__close
  {
    top: 12px;
    right: 12px;
  }
  .svc-modal__head
  {
    padding: 28px 24px 0;
  }
  .svc-modal__title
  {
    font-size: 26px;
    line-height: 1.3;
  }
  .svc-modal__date
  {
    font-size: 14px;
  }
  .svc-modal__line
  {
    margin: 24px 24px 0;
    height: 1px;
  }
  .svc-modal__body
  {
    margin-top: 24px;
    padding: 0 24px 32px;
    font-size: 17px;
    line-height: 1.7;
  }
  .svc-modal__body.is-rich
  {
    margin-top: 0;
    padding: 0;
  }
  /* 상세 본문: 폰과 글을 위아래로, 동그란 사진은 겹치지 않고 4칸 격자로 */
  .svc-detail__row, .svc-detail__row--rev
  {
    flex-direction: column;
    gap: 24px;
    padding: 36px 24px;
  }
  .svc-detail__phone
  {
    padding: 10px;
    border-radius: 24px;
  }
  .svc-detail__phone img
  {
    width: 200px;
    border-radius: 19px;
  }
  .svc-detail__txt
  {
    text-align: center;
  }
  .svc-detail__kicker
  {
    font-size: 15px;
  }
  .svc-detail__lead
  {
    margin-top: 8px;
    font-size: 19px;
    line-height: 1.6;
  }
  .svc-detail__row--cats
  {
    padding: 40px 24px 44px;
  }
  .svc-detail__title
  {
    font-size: 20px;
  }
  .svc-cats
  {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 10px;
    margin-top: 28px;
  }
  .svc-cats__item, .svc-cats__item:first-child
  {
    margin-left: 0;
  }
  .svc-cats__item img
  {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .svc-cats__item span
  {
    margin-top: 8px;
    font-size: 13px;
  }
}

/* ── 안내 이미지 한 장으로 된 본문 (js/card-details.js 의 prove-my-design) ──
   원본이 폰 375pt 용 2배 이미지(750×6965)라 750px 를 넘겨 늘리면 흐려진다 — 그 폭까지만 키우고 가운데 놓는다. */
.dg
{
  padding: 30px 0;
  background: var(--dg-bg, #f0f3f8);
} /* 이미지 위아래 여백 — 바탕은 그 이미지 좌우 가장자리 색으로 */
.dg--register, .dg--cert
{
  --dg-bg: #f1f4f9;
}
.dg__full
{
  display: block;
  width: min(750px, 100%);
  height: auto;
  margin: 0 auto;
}

/* ── 홍보영상 (js/card-details.js 의 promo-video) ──
   decop.co.kr/promotion.html 처럼 문구 두 줄 아래 16:9 유튜브 영상. 위 사진 칸은 없다(data-modal-media="none")
   팝업 높이는 고정(960) 대신 내용만큼 — 영상 아래가 비지 않게. 화면보다 길면 안에서 스크롤 */
.svc-modal.is-no-media
{
  height: fit-content; /* dialog 는 화면에 고정 배치라 auto 면 화면 높이까지 늘어난다 */
}
.svc-modal.is-no-media .svc-modal__scroll
{
  max-height: calc(100dvh - 40px);
}
.svc-video
{
  padding: 40px 48px 50px;
}
.svc-video__lead
{
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
  text-align: center;
}
.svc-video__frame
{
  aspect-ratio: 16 / 9;
  margin-top: 30px;
  border-radius: 15px;
  overflow: hidden;
  background: #000;
}
/* file:// 로 열었을 때(유튜브 오류 153)의 대신 화면: 썸네일 + 가운데 빨간 「YouTube에서 보기」 */
.svc-video__fallback
{
  position: relative;
  display: block;
  height: 100%;
}
.svc-video__fallback img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .75;
  transition: opacity .2s;
}
.svc-video__fallback span
{
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 14px 26px 14px 52px;
  border-radius: 12px;
  background: #f00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16'%3E%3Cpath d='M0 0v16l14-8z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 26px 50%;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.svc-video__fallback:hover img, .svc-video__fallback:focus-visible img
{
  opacity: 1;
}
.svc-video__frame iframe
{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 760px)
{
  .svc-video
  {
    padding: 28px 24px 32px;
  }
  .svc-video__lead
  {
    font-size: 17px;
  }
  .svc-video__lead br
  {
    display: none;
  }
  .svc-video__frame
  {
    margin-top: 20px;
    border-radius: 10px;
  }
  .svc-video__fallback span
  {
    padding: 10px 18px 10px 40px;
    background-position: 18px 50%;
    font-size: 15px;
  }
}