/* 서비스 안내 페이지(design-register.html …) — 시안 없음, 사이트 톤에 맞춤
   · 위 여백 95 · 아래 170 은 다른 서브 페이지와 같다
   · 머리 상자 바탕은 소개 페이지 블록체인 구역과 같은 그라데이션(#dbfcff → #d1e4ff)
   · 절차 카드는 홈 바로가기 카드(.quick-card)와 같은 줄 #e4e8f0 · 둥글기 20, 번호는 사이트 파랑 */

.guide
{
  padding: 95px 0 170px;
}

/* ── 머리 ── */
.guide-head
{
  padding: 45px 64px 50px;
  border-radius: 24px;
  background: linear-gradient(101deg, #dbfcff 0%, #d1e4ff 100%);
}
.guide-head__eyebrow
{
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: .12em;
  color: var(--blue);
}
.guide-head__title
{
  margin-top: 14px;
  font-size: clamp(34px, 3.8vw, 56px);
  font-weight: 800;
  line-height: 1.2;
  color: #000;
}
.guide-head__lead
{
  max-width: 760px;
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.6;
  color: #333;
}

/* 리드 아래 작은 설명 (저작권 페이지) */
.guide-head__text
{
  max-width: 900px;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
}

/* ── 구역 ── */
.guide-sec
{
  margin-top: 90px;
}
.guide-sec__title
{
  font-size: 32px;
  font-weight: 700;
  line-height: 1.35;
  color: #000;
}
.guide-sec__text
{
  max-width: 980px;
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--body);
}

/* 절차: 3칸 카드. 번호(STEP 01)는 화면에만 — 순서는 ol 이 읽어 준다 */
.guide-steps
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
  list-style: none;
}
.guide-step
{
  position: relative;
  min-height: 190px;
  padding: 32px 32px 34px;
  border: 1px solid #e4e8f0;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.guide-step::after
{
  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;
}
.guide-step:hover
{
  border-color: #d5e2fb;
  box-shadow: 0 20px 40px rgba(26, 101, 254, .1);
  transform: translateY(-6px);
}
.guide-step:hover::after
{
  transform: scaleX(1);
}
.guide-step__num
{
  display: inline-block;
  padding: 0 12px;
  border-radius: 6px;
  background: #eaf2ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: .04em;
  color: var(--blue);
}
.guide-step__text
{
  margin-top: 22px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
  color: #000;
}

/* 제목 + 설명이 있는 단계 (공모전 페이지) */
.guide-step__title
{
  margin-top: 22px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.guide-step__desc
{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
}
.guide-steps--5
{
  grid-template-columns: repeat(5, 1fr);
}
.guide-steps--4
{
  grid-template-columns: repeat(4, 1fr);
}
.guide-steps--5 .guide-step, .guide-steps--4 .guide-step
{
  padding: 28px 26px 30px;
}
.guide-sec__text + .guide-sec__text
{
  margin-top: 8px;
}

/* 진행 흐름: 알약 칸을 파란 화살표로 잇는다. 마지막(디자인 수익)만 파랑으로 채운다 */
.guide-flow
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 0;
  margin-top: 32px;
  padding: 30px 32px;
  border-radius: 20px;
  background: #f7f8fb;
  list-style: none;
}
.guide-flow li
{
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
}
.guide-flow li + li::before
{
  content: "";
  width: 18px;
  height: 12px;
  margin: 0 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Cpath d='M1 6h16M12 1l5 5-5 5' fill='none' stroke='%231a65fe' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.guide-flow__item
{
  padding: 10px 20px;
  border: 1px solid #e4e8f0;
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
}
.guide-flow li:last-child .guide-flow__item
{
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

/* 머리 상자 안의 흐름 (디캅몰): 회색 바탕 없이, 알약은 흰색 그대로 */
.guide-flow.guide-flow--head
{
  margin-top: 28px;
  padding: 0;
  background: none;
}
/* 흐름 아래 이어지는 문단 */
.guide-flow + .guide-sec__text
{
  margin-top: 24px;
}
/* 카드 아래 작은 소제목 (디캅몰 「전체 프로세스」) */
.guide-sub
{
  margin-top: 44px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.guide-flow.guide-flow--after-sub
{
  margin-top: 16px;
}

/* 목록 끝 ※ 안내 (저작권 페이지) — 눈에 띄되 본문보다 조용하게 */
.guide-caution
{
  margin-top: 28px;
  padding-left: 1.2em;
  font-size: 15px;
  line-height: 1.7;
  color: #666;
  text-indent: -1.2em;
}

/* 블록체인 기록 (디캅소개에서 옮겨 옴).
   원래는 화면 폭을 꽉 채운 450px 그라데이션 띠였는데, 이 페이지는 1320px 안쪽이라 둥근 상자로 바꿨다 — 색은 같다 */
.guide-chain
{
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 44px;
  padding: 48px 56px;
  border-radius: 20px;
  background: linear-gradient(101deg, #dbfcff 0%, #d1e4ff 100%);
}
.guide-chain__img
{
  flex-shrink: 0;
  width: 300px;
  height: auto;
}
.guide-chain__title
{
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  color: #000;
}
.guide-chain__desc
{
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: -0.3px;
  color: #333;
}
.guide-chain__flow
{
  margin-top: 24px;
}

/* 등록 후: 왼쪽 파란 선이 있는 회색 상자 */
.guide-note
{
  margin-top: 24px;
  padding: 32px 36px;
  border-left: 4px solid var(--blue);
  border-radius: 0 16px 16px 0;
  background: #f7f8fb;
  font-size: 18px;
  line-height: 1.7;
  color: #333;
}

/* ── 좁은 화면 ── */
@media (max-width: 1100px)
{
  .guide-steps, .guide-steps--4
  {
    grid-template-columns: repeat(2, 1fr);
  }
  .guide-steps--5
  {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px)
{
  .guide-chain
  {
    flex-direction: column;
    gap: 28px;
    margin-top: 32px;
    padding: 32px 24px;
  }
  .guide-chain__img
  {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }
  .guide-chain__title
  {
    font-size: 21px;
  }
  .guide-chain__desc
  {
    font-size: 16px;
    line-height: 1.7;
  }
  .guide-chain__desc br
  {
    display: none;
  }
  .guide
  {
    padding: 56px 0 96px;
  }
  .guide-head
  {
    padding: 40px 24px;
    border-radius: 18px;
  }
  .guide-head__eyebrow
  {
    font-size: 12px;
  }
  .guide-head__lead
  {
    margin-top: 14px;
    font-size: 16px;
  }
  .guide-head__text
  {
    margin-top: 10px;
    font-size: 15px;
  }
  .guide-head__text br
  {
    display: none;
  }
  .guide-caution
  {
    margin-top: 20px;
    font-size: 14px;
  }
  .guide-flow.guide-flow--head
  {
    margin-top: 20px;
    padding: 0;
  }
  .guide-sub
  {
    margin-top: 32px;
    font-size: 18px;
  }
  .guide-sec
  {
    margin-top: 56px;
  }
  .guide-sec__title
  {
    font-size: 23px;
  }
  .guide-sec__text
  {
    margin-top: 14px;
    font-size: 16px;
  }
  .guide-steps, .guide-steps--5, .guide-steps--4
  {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 22px;
  }
  .guide-steps--5 .guide-step, .guide-steps--4 .guide-step
  {
    padding: 22px 22px 24px;
  }
  .guide-step__title
  {
    margin-top: 14px;
    font-size: 18px;
  }
  .guide-step__desc
  {
    font-size: 15px;
  }
  /* 흐름: 가로로 이어 가다 줄바꿈 (세로로 쌓으면 페이지가 너무 길어진다), 알약 · 화살표를 작게 */
  .guide-flow
  {
    gap: 10px 0;
    margin-top: 22px;
    padding: 18px;
  }
  .guide-flow li
  {
    font-size: 14px;
    line-height: 20px;
  }
  .guide-flow li + li::before
  {
    width: 14px;
    margin: 0 6px;
    background-size: 14px auto;
  }
  .guide-flow__item
  {
    padding: 7px 13px;
  }
  .guide-step
  {
    min-height: 0;
    padding: 22px 22px 24px;
  }
  .guide-step__num
  {
    font-size: 13px;
    line-height: 26px;
  }
  .guide-step__text
  {
    margin-top: 14px;
    font-size: 17px;
  }
  .guide-note
  {
    margin-top: 18px;
    padding: 22px 22px;
    font-size: 16px;
  }
}