/* ==========================================================
   studycafecost.stofarm.com — 홈(html.php) 전용 컴포넌트
   design.css의 토큰을 그대로 상속한다.
   ========================================================== */

/* ---------- 히어로 ---------- */
.sc-hero{min-height:min(88vh,760px);}
.sc-hero-inner{padding-top:var(--sp-10); padding-bottom:var(--sp-10);}
.sc-hero h1{font-size:clamp(38px,6vw,64px); line-height:1.2;}
.sc-hero-note{margin-top:var(--sp-5); font-size:13px; color:rgba(255,255,255,.6); max-width:560px; line-height:1.7;}
@media (max-width:640px){
  .sc-hero{min-height:auto;}
  .sc-hero-inner{padding-top:var(--sp-8); padding-bottom:var(--sp-8);}
  .sc-hero-actions .sc-btn{width:100%;}
}

/* ---------- 공통 섹션 ---------- */
.sc-alt{background:var(--sc-surface-alt);}
.sc-lead-p{font-size:17px; color:var(--sc-body); max-width:640px; line-height:1.8;}

/* ---------- 비용 구조 그리드 ---------- */
.sc-grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);}
.sc-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);}
@media (max-width:900px){.sc-grid-4{grid-template-columns:repeat(2,1fr);} .sc-grid-3{grid-template-columns:1fr;}}
@media (max-width:520px){.sc-grid-4{grid-template-columns:1fr;}}

.sc-item{background:var(--sc-surface); border:1px solid var(--sc-line); border-radius:var(--radius-m);
  padding:var(--sp-3); transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);}
.sc-item:hover{border-color:var(--sc-primary); transform:translateY(-3px); box-shadow:var(--shadow-m);}
.sc-item-num{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:9px; background:var(--sc-primary-light); color:var(--sc-primary-dark);
  font-size:13px; font-weight:800; margin-bottom:14px;}
.sc-item h3{font-size:17px; margin:0 0 8px; color:var(--sc-ink);}
.sc-item p{font-size:14.5px; color:var(--sc-muted); margin:0; line-height:1.65;}

/* ---------- 캐러셀 ---------- */
.sc-carousel-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-5);}
.sc-carousel-nav{display:flex; gap:10px;}
.sc-cbtn{width:44px; height:44px; border-radius:50%; border:1px solid var(--sc-line); background:var(--sc-surface);
  color:var(--sc-primary-dark); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color var(--transition), background var(--transition);}
.sc-cbtn:hover{border-color:var(--sc-primary); background:var(--sc-primary-light);}
.sc-cbtn:disabled{opacity:.35; cursor:default;}
@media (max-width:640px){.sc-carousel-nav{display:none;}}

.sc-carousel-track .sc-card{flex:0 0 300px;}
.sc-card-index{position:absolute; top:12px; left:12px; z-index:2; background:rgba(11,24,21,.72);
  color:#fff; font-size:12px; font-weight:700; padding:5px 11px; border-radius:var(--radius-pill); backdrop-filter:blur(4px);}
.sc-card-media{position:relative;}
.sc-card-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,24,21,0) 55%,rgba(11,24,21,.34) 100%);}

/* ---------- 기능 소개(재무조회) ---------- */
.sc-feature{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-7); align-items:center;}
@media (max-width:860px){.sc-feature{grid-template-columns:1fr; gap:var(--sp-4);}}
.sc-feature-visual{background:var(--sc-surface); border:1px solid var(--sc-line); border-radius:var(--radius-l);
  padding:var(--sp-3); box-shadow:var(--shadow-m);}
.sc-mock-bar{display:flex; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid var(--sc-line); margin-bottom:14px;}
.sc-mock-dot{width:9px; height:9px; border-radius:50%; background:var(--sc-line);}
.sc-mock-field{border:1px solid var(--sc-line); border-radius:var(--radius-s); padding:11px 14px;
  font-size:14px; color:var(--sc-muted); background:var(--sc-bg); margin-bottom:14px;}
.sc-mock-row{display:grid; grid-template-columns:1fr auto; gap:10px; padding:9px 2px;
  border-bottom:1px solid var(--sc-line); font-size:13.5px;}
.sc-mock-row:last-child{border-bottom:none;}
.sc-mock-row span:last-child{font-weight:700; color:var(--sc-primary-dark);}
.sc-mock-cap{font-size:12px; color:var(--sc-muted); margin:12px 0 0;}

/* ---------- 최신 글 ---------- */
.sc-post-list{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3);}
@media (max-width:760px){.sc-post-list{grid-template-columns:1fr;}}
.sc-post{display:flex; gap:var(--sp-2); align-items:center; background:var(--sc-surface);
  border:1px solid var(--sc-line); border-radius:var(--radius-m); padding:14px; text-decoration:none;
  transition:border-color var(--transition), transform var(--transition);}
.sc-post:hover{border-color:var(--sc-primary); transform:translateX(3px); text-decoration:none;}
.sc-post img{width:76px; height:76px; border-radius:var(--radius-s); object-fit:cover; flex:0 0 auto;}
.sc-post-meta{min-width:0;}
.sc-post-meta strong{display:block; font-size:15.5px; color:var(--sc-ink); font-weight:700; line-height:1.45; margin-bottom:5px;}
.sc-post-meta span{font-size:13px; color:var(--sc-muted); display:block; line-height:1.55;}

/* ---------- CTA 밴드 ---------- */
.sc-cta{background:linear-gradient(135deg,var(--sc-primary-dark),var(--sc-primary)); color:#fff;
  border-radius:var(--radius-l); padding:var(--sp-7) var(--sp-5); text-align:center;}
.sc-cta h2{color:#fff; border:none; margin:0 0 var(--sp-2); padding:0;}
.sc-cta p{color:rgba(255,255,255,.84); max-width:560px; margin:0 auto var(--sp-4); font-size:16px;}
.sc-cta .sc-btn-ghost{background:#fff; border-color:#fff;}

/* ---------- FAQ 홈 ---------- */
.sc-faq-home{max-width:820px; margin:0 auto;}

/* 히어로 하단 고지 여백 */
.sc-hero-note{margin-top:var(--sp-6); padding-top:var(--sp-2); border-top:1px solid rgba(255,255,255,.16);}