/* =========================================================
   ACADEM / Design Guide (shop-guide)
   - brand color: #165cde
   - last updated: 2025-08-10
   ========================================================= */

/* ---------- 공통 기본 ---------- */
.shop-guide{
  --brand:#165cde;                     /* 아카뎀 주색 */
  --brand-weak: rgba(22,92,222,.12);   /* 주색 연한 배경 */
  --border:#e5e7eb;
  --muted:#666;
  max-width:880px;
  margin:0 auto;
  color:#222;
  line-height:1.7;
  font-family:'Pretendard','Noto Sans KR',system-ui,-apple-system,'Segoe UI',Roboto,Arial,
               'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;
}

/* 테마가 폰트/정렬을 덮어써도 본문만 확실히 유지 */
.view-content .shop-guide,
.view-content .shop-guide *{
  font-family:'Pretendard','Noto Sans KR',system-ui,-apple-system,'Segoe UI',Roboto,Arial,
              'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif !important;
  text-align:left !important;
}

.shop-guide h2{font-size:1.6rem;margin:6px 0 12px;}
.shop-guide h3{font-size:1.1rem;margin:14px 0 6px;display:flex;align-items:center;gap:8px;}
.shop-guide p,.shop-guide li{font-size:1rem;}
.shop-guide ul{margin:4px 0 0 18px;}
.shop-guide .tight{margin-top:2px;margin-bottom:6px;}
.shop-guide .muted{color:var(--muted);}

/* ---------- 테이블(필요 섹션에서만) ---------- */
.shop-guide table{width:100%;border-collapse:collapse;margin:4px 0;}
.shop-guide th,.shop-guide td{border:1px solid var(--border);padding:8px 10px;vertical-align:top;}
.shop-guide th{width:22%;background:#fafafa;color:#555;font-weight:600;}

/* ---------- 1) 서비스 안내 : 카드형 ---------- */
.shop-guide .sg-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:8px 0;
}
.shop-guide .sg-card{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
}
.shop-guide .sg-card-ico{
  width:40px;height:40px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-weak);color:var(--brand);
  font-size:20px;font-weight:700;
}
.shop-guide .sg-card-title{font-weight:700;margin-bottom:2px;}
.shop-guide .sg-card-desc{color:#333;}

@media (max-width:700px){
  .shop-guide .sg-cards{grid-template-columns:1fr;}
}

/* ---------- 3) 신청 이후 진행 과정 : 단계 카드형 ---------- */
.shop-guide .sg-steps{
  display:flex;flex-direction:column;gap:10px;margin:8px 0;
}
.shop-guide .sg-step{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:10px;align-items:center;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.shop-guide .sg-step-no{
  width:32px;height:32px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--brand);background:var(--brand-weak);
}
.shop-guide .sg-step-title{font-weight:600;}
.shop-guide .sg-step-meta{font-size:.95rem;color:var(--muted);white-space:nowrap;}

@media (max-width:520px){
  .shop-guide .sg-step{grid-template-columns:36px 1fr;align-items:start}
  .shop-guide .sg-step-meta{grid-column:2 / span 1;margin-top:2px;white-space:normal}
}

/* ---------- 타이포/사이즈 미세조정 ---------- */
@media (min-width:768px){
  .shop-guide h2{font-size:1.55rem;}
}
/* spacers: 정확한 세로 여백 전용 */
.shop-guide .sp-4  { display:block; height:4px;  line-height:0; font-size:0; }
.shop-guide .sp-8  { display:block; height:8px;  line-height:0; font-size:0; }
.shop-guide .sp-12 { display:block; height:12px; line-height:0; font-size:0; }
/* 에디터가 비어있는 태그를 지우는 경우 대비 */
.shop-guide .sp-4::before,
.shop-guide .sp-8::before,
.shop-guide .sp-12::before { content:""; display:block; height:100%; }