/* 개방 범위 안내 — 색을 쓰지 않고 테두리만 있는 무채색 카드 */
.callout--warn {
  border-color: var(--line);
  background: var(--bg);
  color: var(--gray);
}

.callout--warn b {
  color: var(--ink);
}

/* 요약 카드 */
.summary-card {
  margin: 0 0 32px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
}

.summary-card dl {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px 20px;
  margin: 0;
  font-size: 14.5px;
}

.summary-card dt {
  color: var(--mute);
  font-size: 13px;
  font-weight: 700;
  padding-top: 2px;
}
.summary-card dd {
  margin: 0;
  color: var(--gray);
  /* 이 값이 없으면 1fr 칸이 가장 긴 낱말 아래로 줄어들지 못해,
   칸 전체가 카드 오른쪽 여백을 뚫고 나간다 */
  min-width: 0;
}

/* 좁은 화면 — 이름표(96px)를 옆에 두면 값이 쓸 폭이 120px 안팎만 남아
 글이 잘게 쪼개진다. 이름표를 값 위로 올려 카드 폭을 온전히 쓴다 */
@media (max-width: 560px) {
  .summary-card dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .summary-card dt {
    margin-top: 16px;
    padding-top: 0;
  }

  .summary-card dt:first-child {
    margin-top: 0;
  }

  .summary-card dd {
    margin-top: 3px;
  }
}

.badge {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.b-ok {
  background: var(--ok-bg);
  color: var(--ok-ink);
}
.b-warn {
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.b-no {
  background: var(--bad-bg);
  color: var(--bad-ink);
}

/* 단계 목록 */
ol.steps {
  counter-reset: s;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

ol.steps > li {
  counter-increment: s;
  position: relative;
  padding: 0 0 22px 44px;
  margin: 0;
}

ol.steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

ol.steps > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 12.5px;
  top: 32px;
  bottom: 4px;
  width: 1px;
  background: var(--line);
}

ol.steps ul {
  margin: 8px 0;
}

/* 체크리스트 */
ul.checklist {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

ul.checklist li {
  position: relative;
  margin: 8px 0;
  padding-left: 28px;
  color: var(--gray);
}

ul.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: var(--ok-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a45' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}

/* 연결 구조도 */
.flow {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0 0 26px;
  padding-bottom: 6px;
  overflow-x: auto;
}

.flow .node {
  flex: 1 1 0;
  min-width: 148px;
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
  text-align: center;
  font-size: 13.5px;
}

.flow .node b {
  display: block;
  margin-bottom: 5px;
  font-size: 14.5px;
  font-weight: 700;
}
.flow .node small {
  display: block;
  color: var(--mute);
  font-size: 12.5px;
  line-height: 1.5;
}

.flow .arrow {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 6px;
  color: #c8ccd2;
  font-size: 17px;
}

/* 좁은 화면 — 네 칸을 가로로 늘어놓으면 687px 라 가로 스크롤이 생기고
 첫 칸만 보인다. 위에서 아래로 읽는 순서도로 바꿔 한 폭에 담는다 */
@media (max-width: 760px) {
  .flow {
    flex-direction: column;
    gap: 0;
    padding-bottom: 0;
    overflow-x: visible;
  }

  .flow .node {
    flex: 0 0 auto;
    min-width: 0;
    padding: 14px 16px;
    text-align: left;
    font-size: 14.5px;
    font-weight: 600;
  }

  .flow .node small {
    margin-top: 3px;
    font-weight: 400;
  }

  /* 가로 화살표를 감추고 같은 자리에 아래 방향 화살표를 세운다 */
  .flow .arrow {
    justify-content: center;
    padding: 6px 0;
    font-size: 0;
  }

  .flow .arrow::after {
    content: '↓';
    font-size: 17px;
  }
}

/* FAQ */
details.faq {
  border-bottom: 1px solid var(--line);
}
details.faq:first-of-type {
  border-top: 1px solid var(--line);
}

details.faq summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 20px 34px 20px 2px;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

details.faq summary::-webkit-details-marker {
  display: none;
}

.faq-q {
  flex: 0 0 auto;
  color: var(--mute);
  font-weight: 800;
}

details.faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 27px;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--mute);
  border-bottom: 1.6px solid var(--mute);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

details.faq[open] summary::after {
  transform: rotate(-135deg);
}
details.faq .body {
  padding: 0 8px 22px 26px;
}
details.faq .body p {
  margin: 0;
  color: var(--gray);
  font-size: 15px;
}

/* 홈: 문서로 이동하는 카드 버튼 */
.lcard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 12px;
}

/* 도구 카드와 같은 표면 — 회색 덩어리 대신 테두리로 세운다 */
.lcard {
  display: block;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.lcard:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 20px rgba(102, 75, 244, 0.12);
  transform: translateY(-2px);
}

.lcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lcard-head b {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lcard-arrow {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--mute);
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}

/* 도구 카드와 같은 반응 — 보라로 물들며 살짝 밀린다 */
.lcard:hover .lcard-arrow {
  color: var(--brand);
  transform: translateX(3px);
}

.lcard-desc {
  display: block;
  margin-top: 6px;
  color: var(--gray);
  font-size: 14px;
  line-height: 1.6;
}

.lcard-grid--one {
  grid-template-columns: minmax(0, 1fr);
}

/* 항목이 셋인 묶음은 한 줄에 나란히 — 빈칸 없이 리듬이 맞는다 */
.lcard-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 도구 카드 — 어떤 도구인지 로고로 바로 알아보게 */
.tcard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 16px;
}

/* 이 페이지의 핵심 액션이라 알아보기·사용하기 카드보다 무게를 준다.
 로고를 위에 크게 세우고, 배경 대신 테두리로 세워 카드처럼 보이게 한다 */
.tcard {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.tcard:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 20px rgba(102, 75, 244, 0.12);
  transform: translateY(-2px);
}

.tcard-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}

.tcard-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tcard-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 설명 줄 수가 달라도 칩은 카드 아래에 나란히 오도록 */
.tcard-meta {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
}

/* 난이도·소요시간 칩 — 색 구분 없이 검은 텍스트로 통일.
 카드가 흰 배경이 되면서 칩이 묻히므로 옅은 회색을 깔아 구분한다 */
.lv {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
}

/* 폭이 줄면 3열은 좁아지므로 2열로 접는다 */
@media (max-width: 1000px) {
  .lcard-grid--three,
  .tcard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .lcard-grid,
  .lcard-grid--three,
  .tcard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}