/* 뒷부분 섹션 — 작동 방식 · 무결성 · 산업 · 차별점 · 요금 · FAQ · 문의. */

/* ══ 작동 방식 ══ */
.layers { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--s-4); align-items: stretch; }
.layer {
  padding: var(--s-5); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--bg-surface);
}
.layer__head { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-4); }
.layer__no { font-size: 13px; color: var(--accent); font-weight: 700; padding-top: 3px; }
.layer__head h3 { font-size: 19px; }
.layer__head p { font-size: 13px; color: var(--text-faint); margin-top: 2px; }
.layer__list li { font-size: 14px; color: var(--text-muted); padding-left: 14px; position: relative; margin-bottom: 8px; }
.layer__list li::before { content: "—"; position: absolute; left: 0; color: var(--line-strong); }
.layer__arrow { align-self: center; color: var(--line-strong); font-size: 22px; }

.flow { margin-top: var(--s-9); }
.flow__title { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: var(--s-5); }
.flow__steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); }
.fstep { padding-top: var(--s-4); border-top: 2px solid var(--line-strong); }
.fstep__no { font-size: 12px; color: var(--accent); font-weight: 700; }
.fstep h4 { font-size: 15px; margin: 6px 0 5px; }
.fstep p { font-size: 13px; color: var(--text-muted); }

/* ══ 데이터 무결성 ══ */
.clauses { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-7); }
.clause { display: flex; gap: var(--s-4); }
.clause__no { font-size: 13px; font-weight: 700; color: var(--accent); padding-top: 4px; flex: none; }
.clause h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clause__tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px;
  border-radius: var(--r-pill); border: 1px solid var(--accent-line);
  color: var(--accent); background: var(--accent-soft);
}
.clause p { font-size: 14px; color: var(--text-muted); margin-top: 6px; }

/* ══ 적용 산업 ══ */
.tiers { display: grid; gap: var(--s-7); }
.tier__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.tier__badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; padding: 4px 11px;
  border-radius: var(--r-pill); background: var(--accent); color: #032029;
}
.tier--2 .tier__badge { background: var(--accent-alt); color: #fff; }
.tier--3 .tier__badge { background: var(--bg-elevated); color: var(--text-muted); }
.tier__label { font-size: 14px; color: var(--text-muted); }
.tier__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }

.ind {
  padding: var(--s-5); border-radius: var(--r-lg);
  border: 1px solid var(--line-soft); background: var(--bg-surface);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.ind:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.ind__top { display: flex; align-items: baseline; gap: 10px; }
.ind__rank { font-size: 12px; color: var(--text-faint); }
.ind__name { font-size: 18px; flex: 1; }
.ind__score { font-size: 18px; color: var(--accent); font-weight: 700; }
.ind__score small { font-size: 11px; color: var(--text-faint); font-weight: 400; }
.ind__why { font-size: 14px; color: var(--text-muted); margin-top: var(--s-3); }
.ind__pain { font-size: 13px; color: var(--text-faint); margin-top: var(--s-2); font-style: italic; }

.axes { display: grid; gap: 6px; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.axis { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.axis__name { font-size: 11px; color: var(--text-faint); }
.axis__bar { display: flex; gap: 3px; }
.axis__bar i { width: 16px; height: 4px; border-radius: 2px; background: var(--line-soft); }
.axis__bar i.on { background: var(--accent); }

/* ══ 차별점 ══ */
.strengths { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }
.strength { padding: var(--s-5) var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-elevated), transparent); }
.strength__no { font-size: 12px; font-weight: 700; color: var(--accent); }
.strength h3 { font-size: 16px; margin: var(--s-3) 0 var(--s-2); }
.strength p { font-size: 13.5px; color: var(--text-muted); }

.partner {
  margin-top: var(--s-7); padding: var(--s-6); border-radius: var(--r-xl);
  border: 1px solid var(--line); background: var(--bg-surface);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center;
}
.partner__copy h3 { font-size: clamp(19px, 2.2vw, 25px); }
.partner__copy p { font-size: 15px; color: var(--text-muted); margin-top: var(--s-3); }
.partner__list { display: grid; gap: var(--s-3); }
.partner__list li { display: flex; gap: var(--s-3); align-items: baseline; font-size: 14px; }
.partner__list strong { flex: none; min-width: 7em; color: var(--amber); }
.partner__list span { color: var(--text-muted); }

/* ══ 요금 ══ */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: start; }
.plan {
  position: relative; padding: var(--s-6); border-radius: var(--r-xl);
  border: 1px solid var(--line); background: var(--bg-surface);
}
.plan--featured {
  border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), transparent 55%);
  box-shadow: 0 20px 60px rgba(34, 211, 238, 0.12);
}
.plan__badge {
  position: absolute; top: -11px; left: var(--s-6);
  font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--accent); color: #032029;
}
.plan__name { font-size: 20px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--s-3); }
.plan__price strong { font-size: 34px; font-weight: 700; }
.plan__price span { font-size: 13px; color: var(--text-faint); }
.plan__target { font-size: 13px; color: var(--text-muted); margin-top: 6px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-soft); }
.plan__features { margin: var(--s-4) 0 var(--s-5); display: grid; gap: 9px; }
.plan__features li { font-size: 14px; color: var(--text-muted); padding-left: 22px; position: relative; }
.plan__features li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-size: 13px; font-weight: 700;
}
.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-7); }
.term { padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.term h4 { font-size: 15px; }
.term p { font-size: 13.5px; color: var(--text-muted); margin-top: 6px; }
.pricing__note { margin-top: var(--s-6); font-size: 12.5px; color: var(--text-faint); }

/* ══ FAQ ══ */
.faqs { display: grid; gap: var(--s-2); }
.faq { border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--bg-surface); overflow: hidden; }
.faq[open] { border-color: var(--line-strong); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__q { font-size: 16px; font-weight: 600; }
.faq__mark { position: relative; width: 14px; height: 14px; flex: none; }
.faq__mark::before, .faq__mark::after {
  content: ""; position: absolute; background: var(--accent);
  top: 50%; left: 0; width: 14px; height: 1.5px; transition: transform 0.25s var(--ease);
}
.faq__mark::after { transform: rotate(90deg); }
.faq[open] .faq__mark::after { transform: rotate(0); }
.faq__a { padding: 0 var(--s-5) var(--s-5); }
.faq__a p { font-size: 14.5px; color: var(--text-muted); }
/* ★답이 여러 문단이면 사이를 띄운다. 붙여 놓으면 «①②» 같은 갈래가 한 덩이로
   보여서, 두 가지를 말하고 있다는 것 자체가 눈에 안 들어온다. */
.faq__a p + p { margin-top: var(--s-3); }
.faq__tags { display: flex; gap: 6px; margin-top: var(--s-3); }
.faq__tags span {
  font-size: 11px; padding: 2px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--line-soft); color: var(--text-faint);
}

/* ══ 문의 ══ */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
.contact__copy h2 { font-size: clamp(26px, 3.4vw, 38px); }
.contact__steps { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.contact__steps li { display: flex; gap: var(--s-4); }
.contact__steps .num { color: var(--accent); font-size: 13px; font-weight: 700; padding-top: 3px; }
.contact__steps strong { font-size: 15px; }
.contact__steps p { font-size: 13.5px; color: var(--text-muted); margin-top: 3px; }
.contact__direct { display: grid; gap: 9px; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
.contact__direct li { display: flex; gap: var(--s-4); font-size: 15px; }
.contact__direct span { min-width: 3.5em; font-size: 12px; color: var(--text-faint); padding-top: 3px; }
.contact__direct a { color: var(--accent); }

.cform { padding: var(--s-6); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--bg-surface); display: grid; gap: var(--s-4); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.cform__status { font-size: 13.5px; min-height: 1.2em; }
.cform__status.is-ok { color: var(--state-stable); }
.cform__status.is-bad { color: var(--state-unstable); }
.cform__privacy { font-size: 12px; color: var(--text-faint); }

@media (max-width: 1100px) {
  .layers { grid-template-columns: 1fr; }
  .layer__arrow { display: none; }
  .flow__steps { grid-template-columns: repeat(3, 1fr); }
  .strengths, .tier__list { grid-template-columns: repeat(2, 1fr); }
  .terms { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; }
  .contact, .partner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .clauses, .flow__steps, .strengths, .tier__list, .terms, .cform__row { grid-template-columns: 1fr; }
}