/* ==========================================================
   고객 정보 보호 (security.html) — 이 페이지에만 있는 모양
   - 맨 위 메뉴 · 페이지 머리 · 섹션 머리 · FAQ · 상담 띠 · 하단은 css/solution.css 를 함께 씁니다.
   - 색은 solution.css 1번 구역의 값(--g-road 등)을 그대로 씁니다.
   - "@media (max-width: 860px)" = 화면 폭 860px 이하(태블릿 · 휴대폰)일 때만 적용
   목차
     1. 네 가지 방향 (번호 카드 4개)
     2. 기본으로 들어가는 것 (체크 목록)
     3. 솔직하게 말씀드리는 것 (카드 3개)
     4. 그림 1 — 공격이 걸러지는 네 단계
     5. 그림 2 — 문제가 생겼을 때의 1차 · 2차 대안
     6. 화면 폭별 조정
   ========================================================== */

/* ========== 1. 네 가지 방향 (번호 카드 4개) ========== */
/* 카드 4개를 2칸씩 두 줄로 */
.sc-ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--g-line);
  border: 1px solid var(--g-line);
}

.sc-way {
  position: relative;
  background: var(--g-paper);
  padding: 40px 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 카드 왼쪽 위 큰 번호 (01 · 02 …) */
.sc-no {
  font-family: var(--g-en);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--g-road);
}

.sc-way b {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--g-ink);
  text-wrap: balance;
}

.sc-way p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--g-ink-2);
}

/* ========== 2. 기본으로 들어가는 것 (체크 목록) ========== */
/* 항목 9개를 3칸씩 */
.sc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.sc-item {
  position: relative;
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  padding: 22px 22px 22px 56px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 항목 왼쪽의 초록 체크 표시 */
.sc-item::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 25px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--g-road) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

.sc-item b {
  font-size: 17px;
  font-weight: 700;
  color: var(--g-ink);
}

.sc-item span {
  font-size: 15px;
  line-height: 1.65;
  color: var(--g-ink-2);
}

/* ========== 3. 솔직하게 말씀드리는 것 (카드 3개) ========== */
.sc-honest {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.sc-card {
  border-top: 2px solid var(--g-ink);
  padding: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-card b {
  font-size: 19px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--g-ink);
  text-wrap: balance;
}

.sc-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--g-ink-2);
}

/* ========== 4. 그림 1 — 공격이 걸러지는 네 단계 ========== */
/* 그림에서 공격을 나타내는 주황색 (대표 초록과 구분되는 색) */
:root {
  --df-threat: #a54423;
}

/* 그림 위 범례 (공격 · 정상 방문) */
.df-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-bottom: 20px;
  font-size: 15px;
  color: var(--g-ink-2);
}

.df-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.df-key::before {
  content: "";
  display: block;
}

.df-key-threat::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--df-threat);
}

.df-key-blocked::before {
  width: 10px;
  height: 10px;
  border: 1.5px dashed var(--df-threat);
  border-radius: 50%;
}

.df-key-road::before {
  width: 28px;
  height: 3px;
  background: var(--g-road);
}

.df-key-note {
  margin-left: auto;
  font-size: 14px;
  color: #6b6b65;
}

/* 네 칸을 빈틈없이 붙여 초록 길이 이어지게 함 */
.df-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--g-line);
}

.df-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.df-art {
  display: block;
  width: 100%;
  height: auto;
  background: var(--g-road-soft);
}

.df-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 24px 28px;
  border-left: 1px solid var(--g-line);
}

.df-step:first-child .df-text {
  border-left: 0;
}

.df-no {
  font-size: 14px;
  font-weight: 700;
  color: var(--g-road);
}

.df-text b {
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--g-ink);
  text-wrap: balance;
}

.df-text p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--g-ink-2);
}

/* 그림 안의 선 · 점 */
.df-road {
  stroke: var(--g-road);
  stroke-width: 4;
}

.df-road-end,
.df-ink,
.df-ok,
.df-warn,
.df-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.df-road-end {
  stroke: var(--g-road);
  stroke-width: 4;
}

.df-threat circle {
  fill: var(--df-threat);
}

/* 막힌 공격: 속이 빈 점 */
.df-blocked circle {
  fill: none;
  stroke: var(--df-threat);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}

.df-gate {
  fill: var(--g-paper);
  stroke: var(--g-line);
  stroke-width: 1.5;
}

.df-ink {
  stroke: var(--g-ink);
  stroke-width: 2.5;
}

.df-ok {
  stroke: var(--g-road);
  stroke-width: 3.5;
}

.df-digits circle,
.df-ok-dot {
  fill: var(--g-road);
}

.df-pulse {
  stroke: var(--df-threat);
  stroke-width: 2.5;
}

.df-log line {
  stroke: var(--g-road);
  stroke-width: 3;
  stroke-linecap: round;
}

/* 금고 오른쪽의 알아볼 수 없는 글자 (암호화된 모습) */
.df-scramble {
  font-family: var(--g-en);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .08em;
  fill: var(--g-ink-3);
}

/* ========== 5. 그림 2 — 문제가 생겼을 때의 1차 · 2차 대안 ========== */
/* 위 줄: 문제 발견 → 1차 → 다시 운영 / 아래 줄: 평소 시험 · 2차 → 다시 운영 */
.df-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.2fr) 44px minmax(0, 1fr);
  grid-template-rows: auto 52px auto;
}

.df-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px;
  background: var(--g-paper);
  border: 1px solid var(--g-line);
}

.df-node b {
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--g-ink);
  text-wrap: balance;
}

.df-node p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--g-ink-2);
}

.df-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
}

.df-warn {
  stroke: var(--df-threat);
  stroke-width: 3;
}

.df-warn-dot {
  fill: var(--df-threat);
}

.df-start {
  grid-column: 1;
  grid-row: 1;
}

.df-first {
  grid-column: 3;
  grid-row: 1;
  border: 2px solid var(--g-road);
}

.df-second {
  grid-column: 3;
  grid-row: 3;
  border: 2px solid var(--df-threat);
}

.df-end {
  grid-column: 5;
  grid-row: 1 / 4;
}

.df-drill {
  grid-column: 1;
  grid-row: 3;
  background: transparent;
  border-style: dashed;
}

/* 칸 이름표 (1차 대안 · 2차 대안 등) */
.df-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--g-stone);
  font-size: 14px;
  font-weight: 700;
  color: var(--g-ink-2);
}

.df-tag-road {
  background: var(--g-road);
  color: #ffffff;
}

.df-tag-threat {
  background: var(--df-threat);
  color: #ffffff;
}

/* 칸 사이 화살표 */
.df-arrow {
  position: relative;
  align-self: center;
  height: 3px;
  background: var(--g-road);
}

.df-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -5px;
  width: 11px;
  height: 11px;
  border-top: 3px solid var(--g-road);
  border-right: 3px solid var(--g-road);
  transform: rotate(45deg);
}

.df-arrow-a {
  grid-column: 2;
  grid-row: 1;
}

.df-arrow-b {
  grid-column: 4;
  grid-row: 1;
}

.df-arrow-c {
  grid-column: 4;
  grid-row: 3;
}

/* 1차에서 2차로 내려가는 길: 글자 + 아래 화살표 */
.df-fallback {
  grid-column: 3;
  grid-row: 2;
  position: relative;
  align-self: center;
  padding-left: 30px;
  margin-left: 28px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--df-threat);
}

.df-fallback::before {
  content: "↓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  line-height: 1;
}

/* 1차 칸의 "복구되면 다시 운영으로" 안내: 화살표가 사라지는 작은 화면에서만 보임 */
.df-node .df-success {
  display: none;
  font-weight: 600;
  color: var(--g-road);
}

/* 회원 운영 업체 안내 */
.df-member {
  margin: 28px 0 0;
  padding: 20px 24px;
  background: var(--g-road-soft);
  font-size: 16px;
  line-height: 1.7;
  color: var(--g-ink-2);
}

.df-member b {
  color: var(--g-road);
}

/* ========== 6. 화면 폭별 조정 ========== */
/* 화면 폭 1100px 이하일 때 (작은 노트북 · 태블릿): 체크 목록 · 네 단계 2칸 */
@media (max-width: 1100px) {
  .sc-list,
  .df-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .df-step:nth-child(3) .df-text {
    border-left: 0;
  }

  /* 대안 그림은 위에서 아래로 한 줄: 문제 발견 → 1차 → 2차 → 다시 운영 → 평소 시험 */
  .df-flow {
    display: flex;
    flex-direction: column;
  }

  .df-fallback {
    align-self: flex-start;
    padding: 16px 0 16px 30px;
    margin-left: 12px;
  }

  .df-drill {
    margin-top: 24px;
  }

  .df-arrow-b {
    display: none;
  }

  .df-node .df-success {
    display: block;
  }

  /* 화살표를 아래 방향으로 */
  .df-arrow {
    align-self: flex-start;
    width: 3px;
    height: 40px;
    margin-left: 40px;
  }

  .df-arrow::after {
    top: auto;
    right: -4px;
    bottom: 0;
    transform: rotate(135deg);
  }
}

/* 화면 폭 640px 이하일 때 (휴대폰): 네 단계 한 칸씩 */
@media (max-width: 640px) {
  .df-steps {
    grid-template-columns: 1fr;
  }

  .df-text {
    border-left: 0;
  }

  .df-key-note {
    margin-left: 0;
    width: 100%;
  }

  .df-node {
    padding: 24px;
  }
}

/* 화면 폭 860px 이하일 때 (태블릿 · 휴대폰): 모두 한 줄에 하나 */
@media (max-width: 860px) {
  .sc-ways,
  .sc-list,
  .sc-honest {
    grid-template-columns: 1fr;
  }

  .sc-way {
    padding: 28px 24px 32px;
  }

  .sc-way b {
    font-size: 20px;
  }

  .sc-honest {
    gap: 32px;
  }
}