/* 현장 컨설팅 — 4만km · 실제 사진 · 실명 후기 */

/* 지구 한 바퀴 */
.km{
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center;
  margin-top:40px; padding:26px 30px;
  background:linear-gradient(120deg, rgba(79,141,255,.10), rgba(139,92,246,.06) 60%, transparent);
  border:1px solid var(--line); border-left:3px solid var(--a2); border-radius:18px;
}
.km-num{
  font-size:clamp(30px,4.4vw,50px); font-weight:800; line-height:1; letter-spacing:-.02em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap;
}
.km-tx p{margin:0; color:var(--tx); font-size:16px; line-height:1.7}
.km-tx b{color:#fff}
.km-src{margin-top:8px !important; color:var(--tx3); font-size:13px !important}

/* 현장 사진 그리드 */
.onsite{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:32px;
}
.onsite figure{
  position:relative; margin:0; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  aspect-ratio:4/3;
}
.onsite img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.35) contrast(1.04) brightness(.82);
  transition:filter .45s ease, transform .45s ease;
}
.onsite figure:hover img{filter:none; transform:scale(1.045)}
.onsite figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px;
  font-size:12.5px; font-weight:700; color:#fff; letter-spacing:-.01em;
  background:linear-gradient(180deg, transparent, rgba(4,8,18,.88));
}

/* 후기 */
.revh{
  margin:56px 0 0; font-size:clamp(20px,2.4vw,26px); font-weight:750;
  letter-spacing:-.02em; color:var(--tx);
}
#reviews .reviews{grid-template-columns:repeat(3,1fr); margin-top:24px}
#reviews .rev q{
  quotes:none; display:block; color:var(--tx); font-size:15px; line-height:1.78;
  font-style:normal; flex:1;
}
#reviews .rev q b{color:#fff; background:linear-gradient(transparent 62%, rgba(139,92,246,.32) 0); padding:0 1px}
#reviews .rev .who{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  color:var(--tx3); font-size:13px;
}
#reviews .rev .who b{color:var(--tx2); font-weight:700}
.csat{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:0;
  color:var(--ok); background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.28);
  vertical-align:2px;
}

.csat.cs2{
  color:var(--warn); background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.28);
}

/* 만족도 집계 스트립 */
.rev-sum{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:24px;
  background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.rev-sum .rs-i{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:20px 12px; background:var(--panel2); text-align:center;
}
.rev-sum .rs-i b{
  font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-.03em; color:var(--ok);
  line-height:1.1;
}
.rev-sum .rs-i span{font-size:12.5px; color:var(--tx3); word-break:keep-all}
.rev-sum .rs-i:first-child b{color:var(--tx)}
.rev-sum .rs-i:nth-child(3) b{color:var(--warn)}
.rev-sum .rs-z b{color:var(--tx3); opacity:.55}

/* 접힌 후기 */
#reviews .rev-x{display:none}
#reviews .reviews.is-open .rev-x{display:flex}

.rev-btn{
  display:block; margin:24px auto 0; padding:13px 26px;
  border-radius:999px; border:1px solid var(--line); background:var(--panel2);
  color:var(--tx2); font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.rev-btn b{color:var(--tx); font-weight:750}
.rev-btn:hover{border-color:var(--a2); color:var(--tx); background:var(--bg2)}

#reviews .note{
  margin-top:28px; color:var(--tx3); font-size:12.5px; line-height:1.7; max-width:78ch;
}

@media (max-width:980px){
  .onsite{grid-template-columns:repeat(2,1fr)}
  #reviews .reviews{grid-template-columns:1fr 1fr}
  .km{grid-template-columns:1fr; gap:14px; text-align:left}
}
@media (max-width:640px){
  #reviews .reviews{grid-template-columns:1fr}
  .onsite{gap:8px}
  .km{padding:20px 18px}
  .rev-sum{grid-template-columns:repeat(2,1fr)}
}