/* 첫 화면 배치(public/index.php) — 남색 첫 화면·두 갈래·실제 사례·단계·유지보수·자주 묻는 질문 */

/* ── 남색 첫 화면 ── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-950); color: var(--on-navy);
  padding: calc(68px + var(--space-8)) 0 var(--space-9);
}
.hero::before {   /* 빛 — 시안(오른쪽 위)·파랑(왼쪽 아래) */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 55% at 85% 8%, rgba(54, 198, 242, .30), transparent 70%),
    radial-gradient(55% 60% at 0% 100%, rgba(42, 123, 240, .32), transparent 70%);
}
.hero-mark { position: absolute; z-index: -1; right: -12%; top: 6%; width: min(78vw, 640px); height: auto; opacity: .09; pointer-events: none; }
.hero-inner { display: grid; gap: var(--space-8); }
.hero-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .16em; color: var(--cyan-300); }
.hero h1 { margin-top: var(--space-4); font-size: var(--display); font-weight: var(--weight-heavy); line-height: 1.16; letter-spacing: -0.035em; color: var(--on-navy); }
.hero h1 em { font-style: normal; color: var(--cyan-300); }
.hero-lead { margin-top: var(--space-5); max-width: 40em; color: var(--on-navy-2); font-size: var(--text-lg); }
.hero .btn-row { margin-top: var(--space-7); }

/* 두 갈래 카드(남색 위 유리판) */
.lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.lane {
  position: relative; display: grid; gap: var(--space-3); height: 100%;
  padding: var(--space-6); border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--on-navy); text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lane:hover { color: var(--on-navy); transform: translateY(-3px); border-color: rgba(125, 220, 250, .55); background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); }
.lane:focus-visible { outline-color: var(--cyan-300); }
.lane-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--brand-gradient); color: #fff; box-shadow: 0 10px 24px -10px rgba(54, 198, 242, .7); }
.lane-ico svg { width: 26px; height: 26px; }
.lane-title { font-size: var(--text-2xl); font-weight: var(--weight-heavy); color: var(--on-navy); }
.lane-lead { color: var(--on-navy-2); }
.lane-tags { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lane-tags li { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--space-3); border-radius: var(--r-full); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: var(--on-navy); font-size: var(--text-sm); }
.lane-more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--cyan-300); font-weight: var(--weight-bold); }
.lane-more svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.lane:hover .lane-more svg { transform: translateX(4px); }

@media (min-width: 720px) { .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .hero { padding: calc(68px + var(--space-10)) 0 var(--space-10); }
  .hero-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); }
  .hero h1 { font-size: clamp(44px, 4.1vw, 60px); }
  .lanes { grid-template-columns: 1fr; }
}
/* 키 작은 노트북(1366×768) — 첫 화면 버튼이 접히지 않게 위아래를 줄인다 */
@media (min-width: 1100px) and (max-height: 820px) {
  .hero { padding: calc(68px + var(--space-7)) 0 var(--space-8); }
  .lane { padding: var(--space-5) var(--space-6); gap: var(--space-2); }
}

/* ── 실제 사례 ── */
.case-inner { display: grid; gap: var(--space-7); align-items: center; }
.case .eyebrow, .board-sec .eyebrow, .faq-sec .eyebrow, .process .eyebrow, .works-sec .eyebrow { color: var(--accent-ink); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .08em; }
.case h2 { margin-top: var(--space-3); font-size: var(--display-sm); font-weight: var(--weight-heavy); }
.case-sum { margin-top: var(--space-3); color: var(--text-2); font-size: var(--text-lg); }
.flow { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.flow li { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); font-weight: var(--weight-medium); }
.flow li + li::before { content: ""; position: absolute; left: calc(var(--space-4) + 13px); top: calc(-1 * var(--space-2) - 1px); width: 2px; height: calc(var(--space-2) + 2px); background: var(--border-strong); }
.flow-n { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--r-full); background: var(--primary-soft); color: var(--primary-ink); font-size: var(--text-sm); font-weight: var(--weight-bold); }

.metric { margin: 0; position: relative; overflow: hidden; padding: var(--space-7) var(--space-6); border-radius: var(--r-xl); background: var(--navy-950); color: var(--on-navy); box-shadow: var(--shadow-2); }
.metric::before { content: ""; position: absolute; right: -30%; top: -40%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(54, 198, 242, .32), transparent 65%); }
.metric > * { position: relative; }
.metric-label { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--on-navy-2); }
.metric-row { display: grid; gap: var(--space-3); margin-top: var(--space-5); align-items: end; }
.metric-before, .metric-after { display: grid; gap: var(--space-1); }
.metric-before span, .metric-after span { font-size: var(--text-sm); color: var(--on-navy-3); }
.metric-before strong { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--on-navy-2); }
.metric-after strong { font-size: var(--display-num); font-weight: var(--weight-heavy); line-height: 1; letter-spacing: -0.04em; color: var(--cyan-300); }
.metric-arrow { color: var(--on-navy-3); }
.metric-arrow svg { width: 28px; height: 28px; transform: rotate(90deg); }
.metric-source { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--navy-line); font-size: var(--text-sm); color: var(--on-navy-3); }
@media (min-width: 600px) {
  .metric { padding: var(--space-8); }
  .metric-row { grid-template-columns: auto auto 1fr; gap: var(--space-5); }
  .metric-arrow svg { transform: none; margin-bottom: var(--space-3); }
}
@media (min-width: 960px) { .case-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-9); } }

/* ── 일하는 단계(가로 흐름선 — 모바일은 세로) ── */
.process { background: var(--surface); border-block: 1px solid var(--border); }
.steps-line { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); position: relative; }
.steps-line li { position: relative; display: grid; gap: var(--space-2); padding-left: 64px; }
.steps-line li::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: calc(-1 * var(--space-6)); width: 2px; background: linear-gradient(var(--border-strong), transparent); }
.steps-line li:last-child::before { display: none; }
.step-dot { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-full); background: var(--surface); border: 2px solid var(--primary); color: var(--primary-ink); font-weight: var(--weight-heavy); font-size: var(--text-sm); }
.steps-line li:last-child .step-dot { background: var(--primary); color: var(--on-primary); }
.steps-line h3 { font-size: var(--text-xl); padding-top: var(--space-2); }
.steps-line p { color: var(--text-2); }
@media (min-width: 960px) {
  .steps-line { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
  .steps-line li { padding-left: 0; padding-top: 72px; }
  .steps-line li::before { left: 56px; right: calc(-1 * var(--space-6)); top: 23px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--border-strong), var(--border)); }
  .steps-line h3 { padding-top: 0; }
}

/* ── 유지보수 최근 글 · 자주 묻는 질문(왼쪽 제목, 오른쪽 내용) ── */
.board-inner, .faq-inner { display: grid; gap: var(--space-6); }
.board-inner .section-head, .faq-inner .section-head { margin-bottom: 0; }
@media (min-width: 960px) {
  .board-inner, .faq-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: start; }
  .board-inner .section-head, .faq-inner .section-head { position: sticky; top: 100px; }
}
.board-sec { background: var(--surface); border-block: 1px solid var(--border); }