/* Shared guide layout and components; loaded only on pages with this layout. */

body.cf-homepage { font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; color: #333; margin:0; padding:0; line-height:1.6; background: #ffffff; }

.cf-section { padding: 54px 0; border-bottom: 1px solid #ececec; }

.cf-section.gray { background: #fafbfc; }

h1 { font-size: 2.6rem; font-weight: 700; line-height: 1.2; margin-bottom: 15px; letter-spacing: -0.5px; }

p { font-size: 1.05rem; line-height: 1.8; color: #444; margin-bottom: 20px; overflow-wrap: break-word; }

ul.cf-list { margin-bottom: 24px; padding-left: 24px; }

ul.cf-list li { margin-bottom: 12px; font-size: 1.05rem; line-height: 1.6; color: #444; }

.cf-hero { background: #ffffff; padding: 60px 0 50px; text-align: center; border-bottom: 1px solid #ececec; }

.cf-meta-bar { font-size: 0.85rem; color: #6b7280; margin-bottom: 15px; display: inline-block; }

.cf-hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }

.cf-badge { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; }

.cf-btn-primary { display: inline-block; background: #27ae60; color: #ffffff !important; padding: 15px 32px; font-size: 1.1rem; font-weight: 600; border-radius: 6px; text-decoration: none !important; box-shadow: 0 4px 12px rgba(39,174,96,0.3); transition: all 0.2s ease; margin-bottom: 30px; }

.cf-btn-primary:hover { background: #219150; transform: translateY(-1px); }

.hero-image { max-width: 100%; height: auto; max-height: 400px; border-radius: 12px; box-shadow: 0 14px 28px rgba(0,0,0,0.12); object-fit: contain; }

.cf-notice-box { background: #f0f7fc; border-left: 4px solid #3498d9; padding: 20px 24px; border-radius: 4px; margin: 24px 0; }

.cf-notice-box p { margin: 0; font-size: 0.98rem; }

.cf-table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid #dedede; border-radius: 6px; }

.cf-comparison { width: 100%; min-width: 600px; border-collapse: collapse; text-align: left; background: #fff; }

.cf-comparison th, .cf-comparison td { padding: 16px 14px; border-bottom: 1px solid #dedede; vertical-align: top; }

.cf-comparison th { font-weight: 600; color: #333; }

.cf-comparison thead { background: #f4f7f9; }

.cf-comparison tbody tr:last-child > * { border-bottom: 0; }

.cf-split-row { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 20px; }

.cf-split-col { flex: 1; min-width: 280px; }

@media (max-width: 767px) {
  h1 { font-size: 2.1rem; }
  .header-inner { flex-direction: column; text-align: center; gap: 10px; }
  nav ul { justify-content: center; }
  .cf-split-row { gap: 20px; }
}