/* ===========================
   development.css — 맞춤형 개발 소개 페이지 전용 스타일
   web-renewal/src/app/development/page.tsx 의 Tailwind/inline 스타일을 순수 CSS로 이식.
   Hero/About/Service/Process/Reference/FAQ/CTA 7개 섹션.
   공통 클래스(.section-*, .btn-pill, .r-*)는 renewal.css에서 재사용한다.
   =========================== */

/* ===========================
   1. Hero
   =========================== */
.dev-hero {
  background-color: #0d1b3e;
  position: relative;
  overflow: hidden;
  min-height: 796px;
  display: flex;
  align-items: center;
}
.dev-hero__circle {
  position: absolute;
  bottom: 0;
  height: 842px;
  mix-blend-mode: color-dodge;
}
.dev-hero__circle--left {
  left: 6.15%;
  right: 50%;
}
.dev-hero__circle--right {
  left: 50%;
  right: 6.15%;
}
.dev-hero__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transform: rotate(-90deg);
}
.dev-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 200px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 55px;
}
.dev-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: center;
  width: 100%;
}
.dev-hero__titles {
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  width: 100%;
  margin: 0;
}
.dev-hero__title {
  font-size: 80px;
  font-weight: 800;
  color: white;
  letter-spacing: -1.5px;
  line-height: 92px;
  text-align: center;
  margin: 0;
}
.dev-hero__title--accent { color: #ff7900; }
.dev-hero__title--white { color: white; }
.dev-hero__subtitle {
  font-size: 20px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  line-height: 33px;
  text-align: center;
  margin: 0;
  white-space: pre-line;
}
.dev-hero__actions {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  justify-content: center;
}
.dev-hero__btn {
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.dev-hero__btn--primary {
  background-color: #ff7900;
  padding: 18px 32px 20px;
  box-shadow: 0px 8px 12px rgba(255, 121, 0, 0.35);
  color: white;
}
.dev-hero__btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 18px 33px 20px;
  color: rgba(255, 255, 255, 0.9);
}

/* ===========================
   2. About — "개발에서 찾는 것"
   =========================== */
.dev-about {
  background-color: #f7f8fa;
  padding-top: 130px;
  padding-bottom: 140px;
}
.dev-about__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.dev-about__cards {
  display: flex;
  gap: 24px;
}
.dev-about-card {
  flex: 1;
  background-color: white;
  border: 1px solid #c7cbce;
  border-radius: 13px;
  overflow: hidden;
  height: 593px;
  position: relative;
}
.dev-about-card__text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}
.dev-about-card__title {
  font-size: 48px;
  font-weight: 800;
  color: #2a2a2a;
  letter-spacing: -0.8px;
  line-height: 52px;
}
.dev-about-card__desc {
  font-size: 24px;
  font-weight: 500;
  color: rgba(42, 42, 42, 0.8);
  line-height: 36px;
  text-align: center;
  white-space: pre-line;
}
.dev-about-card__blob {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 256px;
  width: 522px;
  height: 289px;
}
.dev-about-card__illust--1 {
  position: absolute;
  left: 128px;
  top: 233px;
  width: 378px;
  height: 236px;
}
.dev-about-card__illust--2 {
  position: absolute;
  left: 207px;
  top: 257px;
  width: 295px;
  height: 209px;
}
.dev-about-card__bar {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: 83px;
  background-color: #262626;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  display: flex;
  align-items: center;
  padding: 0 39px;
  text-decoration: none;
  font-size: 24px;
  font-weight: 700;
  color: white;
  line-height: 36px;
}

/* ===========================
   3. Service — "유캔랩스의 개발은 이런걸 만들어요."
   =========================== */
.dev-service {
  background-color: #1b1b1b;
}
.dev-service__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 100px;
  padding-bottom: 130px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.dev-service__label { color: #3a9dff; }
.dev-service__title { color: white; }
.dev-service__body {
  display: flex;
  flex-direction: column;
  gap: 90px;
  align-items: center;
}
.dev-service__cards {
  display: flex;
  gap: 24px;
  width: 100%;
  height: 504px;
}
.dev-svc-card {
  flex: 1;
  background-color: #101010;
  border: 1px solid #3a9dff;
  border-radius: 13px;
  overflow: hidden;
  position: relative;
}
.dev-svc-card__text {
  position: absolute;
  left: 36px;
  top: 50px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.dev-svc-card__title {
  font-size: 48px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.8px;
  line-height: 52px;
}
.dev-svc-card__desc {
  font-size: 24px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 36px;
  white-space: pre-line;
}
.dev-svc-card__glow {
  position: absolute;
  left: 122px;
  top: 323px;
  width: 341px;
  height: 180px;
  background-color: rgba(0, 96, 240, 0.2);
  border-top-left-radius: 223px;
}
.dev-svc-card__illust {
  position: absolute;
  object-fit: contain;
}
.dev-svc-card__illust--1 {
  left: 160px;
  top: 272px;
  width: 258px;
  height: 188px;
}
.dev-svc-card__illust--2 {
  left: 134px;
  top: 255px;
  width: 285px;
  height: 202px;
}
.dev-svc-card__illust--3 {
  left: 202px;
  top: 262px;
  width: 234px;
  height: 193px;
}
.dev-service__tagline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.dev-service__tagline-title {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 52px;
  margin: 0;
  background-image: url("../../images/renewal/figma/development/svc-gradient-text.36c651c145e5.png");
  background-size: cover;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.dev-service__tagline-sub {
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 28.56px;
  text-align: center;
  margin: 0;
  white-space: pre-line;
}

/* ===========================
   4. Process — "진단부터 정착까지, 이렇게 함께해요"
   =========================== */
.dev-process {
  background-color: #0d1b3e;
}
.dev-process__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 100px;
  padding-bottom: 130px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.dev-process__title {
  color: white;
  white-space: pre-line;
}
.dev-process__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}
.dev-process__steps {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.dev-step {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 33px 25px 29px;
  display: flex;
  flex-direction: column;
  gap: 6.8px;
}
.dev-step__badge {
  width: 36px;
  height: 36px;
  background-color: #ff7900;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 6px rgba(255, 121, 0, 0.4);
}
.dev-step__badge span {
  font-size: 15px;
  font-weight: 800;
  color: white;
  text-align: center;
}
.dev-step__title {
  padding-top: 11.2px;
  font-size: 19px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.38px;
}
.dev-step__desc {
  padding-bottom: 9.735px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  line-height: 21.7px;
  white-space: pre-line;
}
.dev-process__arrow {
  width: 18px;
  height: 33px;
  flex-shrink: 0;
}
.dev-process__note {
  background-color: rgba(255, 121, 0, 0.15);
  border-radius: 16px;
  padding: 23px 33px;
}
.dev-process__note span {
  font-size: 16px;
  font-weight: 700;
  color: #ffb987;
  letter-spacing: 0.24px;
}

/* ===========================
   5. Reference — "유캔랩스에서 진행한 개발 사례"
   =========================== */
.dev-ref {
  background-color: #f7f8fa;
  padding-top: 130px;
  padding-bottom: 140px;
}
.dev-ref__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.dev-ref__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.dev-ref__btn-arrow {
  width: 18px;
  height: 19px;
}
.dev-ref__cards {
  display: flex;
  gap: 15px;
}
.dev-ref-card {
  flex: 1;
  background-color: white;
  border: 0.88px solid #c7cbce;
  border-radius: 14px;
  padding: 55.88px 36.88px 35.88px;
  display: flex;
  flex-direction: column;
  gap: 63px;
}
.dev-ref-card__logo {
  width: 279px;
  height: 80px;
  object-fit: cover;
}
.dev-ref-card__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.dev-ref-card__tag-row {
  display: flex;
  align-items: center;
}
.dev-ref-card__tag {
  background-color: #0d1b3e;
  border-radius: 22px;
  padding: 5px 18px;
  display: flex;
  gap: 12.498px;
  align-items: center;
  justify-content: center;
}
.dev-ref-card__tag-icon {
  width: 18px;
  height: 20px;
}
.dev-ref-card__tag span {
  font-size: 16px;
  font-weight: 600;
  color: white;
  line-height: 29.996px;
}
.dev-ref-card__title {
  font-size: 34px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.48px;
  line-height: 44px;
  margin: 0;
  white-space: pre-line;
}
.dev-ref-card__result {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dev-ref-card__result-label {
  font-size: 22px;
  font-weight: 700;
  color: #8356ff;
  line-height: 48.368px;
}
.dev-ref-card__review-wrap {
  border-top: 1px solid #c7cbce;
  padding-top: 23px;
}
.dev-ref-card__review {
  font-size: 24px;
  font-weight: 600;
  color: #686868;
  line-height: 36px;
  margin: 0;
  max-width: 396px;
}

/* ===========================
   6. FAQ — native <details>/<summary> 아코디언
   =========================== */
.dev-faq {
  background-color: white;
  padding-top: 130px;
  padding-bottom: 140px;
}
.dev-faq__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
}
.dev-faq__title { text-align: center; }
.dev-faq__list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 100%;
}
.dev-faq-item {
  background-color: white;
  border: 0.88px solid #c7cbce;
  border-radius: 14px;
  padding: 45.88px 36.88px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* 펼침 상태: 테두리 강조 + 그림자 (원본 isOpen 스타일) */
.dev-faq-item[open] {
  border-color: #ff7900;
  box-shadow: 0px 0px 10px rgba(86, 94, 116, 0.15);
}
.dev-faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
}
/* 기본 디스클로저 삼각형 제거 */
.dev-faq-item__summary::-webkit-details-marker { display: none; }
.dev-faq-item__summary::marker { content: ''; }
.dev-faq-item__q-wrap {
  display: flex;
  gap: 22px;
  align-items: center;
}
.dev-faq-item__q-badge {
  background-color: #ffead5;
  border-radius: 6px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dev-faq-item__q-badge img {
  width: 13px;
  height: 15px;
}
.dev-faq-item__question {
  font-size: 28px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.48px;
  line-height: 35px;
}
.dev-faq-item__chevron {
  width: 15px;
  height: 24px;
  flex-shrink: 0;
  transform: rotate(90deg);
  transition: transform 0.2s;
}
/* 펼침 시 셰브론 회전 (down → up) */
.dev-faq-item[open] .dev-faq-item__chevron {
  transform: rotate(-90deg) scaleY(-1);
}
.dev-faq-item__answer {
  padding-left: 58px;
  padding-top: 22px;
}
.dev-faq-item__answer span {
  font-size: 18px;
  font-weight: 400;
  color: #686868;
  line-height: 28.56px;
}

/* ===========================
   7. CTA
   =========================== */
.dev-cta {
  background: linear-gradient(135.4deg, #0d1b3e 0%, #002b97 100%);
  padding: 100px 0;
}
.dev-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 27px;
  align-items: center;
}
.dev-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  width: 100%;
}
.dev-cta__title {
  font-size: 48px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.8px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 6px;
}
.dev-cta__sub {
  font-size: 17.6px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}
.dev-cta__btn {
  background-color: white;
  border-radius: 10px;
  padding: 22px 52px;
  box-shadow: 0px 12px 16px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  text-decoration: none;
  font-size: 17.6px;
  font-weight: 700;
  color: #1f0e4d;
  text-align: center;
}
.dev-cta__contacts {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}
.dev-cta__contact {
  display: flex;
  gap: 12px;
  align-items: center;
}
.dev-cta__contact-icon {
  flex-shrink: 0;
}
.dev-cta__contact:first-child .dev-cta__contact-icon {
  width: 20px;
  height: 16px;
}
.dev-cta__contact:last-of-type .dev-cta__contact-icon {
  width: 18px;
  height: 18px;
}
.dev-cta__contact span,
.dev-cta__hours {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.dev-cta__dot {
  width: 5px;
  height: 5px;
}

/* ===========================
   모바일 반응형 (max-width: 767px)
   데스크톱 절대배치를 일반 흐름으로 풀고 패딩 축소.
   =========================== */
@media (max-width: 767px) {
  .dev-hero { min-height: 0; }
  .dev-hero__inner { gap: 36px; }
  .dev-hero__title { font-size: 36px; line-height: 44px; letter-spacing: -0.8px; }
  .dev-hero__actions { flex-wrap: wrap; }

  .dev-about,
  .dev-ref,
  .dev-faq { padding-top: 60px; padding-bottom: 60px; }

  .dev-about-card,
  .dev-svc-card { height: auto; min-height: 320px; }
  /* 절대배치 텍스트 → 일반 흐름 (r-relative가 처리하지만 svc는 left 정렬 유지) */
  .dev-about-card__bar {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    border-radius: 0 0 12px 12px;
    margin-top: 24px;
  }
  .dev-svc-card__text { position: relative; left: auto; top: auto; padding: 24px; }

  .dev-service__body { gap: 50px; }
  .dev-service__cards { height: auto; }
  .dev-service__tagline-title { font-size: 32px; line-height: 40px; }

  .dev-process__steps { gap: 16px; }
  .dev-step { padding: 24px 20px; }

  .dev-ref__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .dev-ref-card { padding: 32px 24px; gap: 40px; }
  .dev-ref-card__logo { width: 100%; height: auto; object-fit: contain; }
  .dev-ref-card__title { font-size: 24px; line-height: 32px; }
  .dev-ref-card__review { font-size: 18px; line-height: 28px; }

  .dev-faq-item { padding: 28px 20px; }
  .dev-faq-item__question { font-size: 18px; line-height: 26px; }
  .dev-faq-item__answer { padding-left: 0; }

  .dev-cta { padding: 60px 24px; }
  .dev-cta__title { font-size: 28px; }
  .dev-cta__contacts { flex-wrap: wrap; gap: 8px 16px; }
}

@media (min-width: 768px) and (max-height: 900px) {
  .dev-hero { min-height: 736px; }
  .dev-hero__circle { height: 778px; }
}