/* pages/guide.css — 이용 안내 (목록과 상세 5개 페이지 공통) */

/* 목록 */
.guide-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.guide-card { height: 100%; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: border-color .15s ease; }
.guide-card:hover { border-color: var(--c-main); }
.guide-card h2 { font-size: var(--fs-xl); color: var(--c-main); margin-top: 8px; }
.guide-card p { color: var(--c-muted); flex: 1; }
.guide-more { font-weight: var(--fw-bold); color: var(--c-main); }
.guide-more::after { content: " →"; }
.guide-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--c-chip); color: var(--c-main); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.guide-card:hover .guide-icon { background: var(--c-main); color: var(--c-on-main); }

/* 상세 */
.crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 20px; }
.crumb a { color: var(--c-muted); }
.guide-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.guide-head .guide-icon { width: 64px; height: 64px; background: var(--c-main); color: var(--c-on-main); }
.guide-head p { color: var(--c-muted); margin-top: 6px; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }

.doc { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.doc h2 { font-size: var(--fs-xl); color: var(--c-main); margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc h3 { font-size: var(--fs-lg); margin-top: 8px; }
.doc p, .doc li { color: var(--c-text-2); line-height: 1.75; }
.doc ul, .doc ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc strong { color: var(--c-text); }
.doc .alert strong { color: inherit; }
.doc-updated { font-size: var(--fs-xs); color: var(--c-faint) !important; margin-top: 16px; }

.steps { list-style: none; padding: 0 !important; counter-reset: s; gap: 12px !important; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px; }
.steps li::before { content: counter(s); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--c-main); color: var(--c-on-main);
  display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); }
.steps li strong { font-size: var(--fs-lg); }
.steps li span { color: var(--c-muted); }

.svc-grid, .box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.svc, .box { border: 1px solid var(--c-line); border-radius: var(--radius-field); padding: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--c-bg); }
.svc h3, .box h3 { font-size: var(--fs-md); margin: 0; color: var(--c-main); }
.svc p { font-size: var(--fs-sm); flex: 1; }
.box ul { font-size: var(--fs-sm); padding-left: 18px; gap: 4px; }
.price { align-self: flex-start; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--c-surface); border: 1px solid var(--c-field);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-main); font-variant-numeric: tabular-nums; }

.calc { background: var(--c-bg); border-radius: var(--radius-field); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }

.faq { border: 1px solid var(--c-line); border-radius: var(--radius-field); background: var(--c-surface); }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: var(--fw-bold); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--c-muted); font-weight: var(--fw-regular); }
.faq[open] summary::after { content: "−"; }
.faq p { padding: 0 16px 16px; }

/* 옆 메뉴 */
.guide-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; }
.side-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-muted); }
.side-nav { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); overflow: hidden; }
.side-nav a { padding: 12px 16px; text-decoration: none; color: var(--c-text-2); font-weight: var(--fw-medium); }
.side-nav a + a { border-top: 1px solid var(--c-line); }
.side-nav a:hover { background: var(--c-bg); }
.side-nav a[aria-current="page"] { color: var(--c-main); font-weight: var(--fw-bold); box-shadow: inset 3px 0 0 var(--c-point); }
.side-contact { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--c-muted); padding: 0 4px; }
.side-contact strong { color: var(--c-text); }

@media (max-width: 900px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-side { position: static; }
  .doc { padding: 24px 18px; }
}