/* ============================================================
 * hm_pageframe.css — site-distinct outer wrappers for built-in
 * gnuboard pages (login / register / new / search) and shared frame
 * around board pages. Pairs with hm_pageframe_open.php / _close.php.
 * Each .hm-pf-NN root visually structures the slot differently.
 * ============================================================ */

.hm-pf { box-sizing: border-box; }
.hm-pf-body { box-sizing: border-box; }

/* 01 — Plain single-column with vertical padding */
.hm-pf-01 { padding: 24px 0; }
.hm-pf-01 .hm-pf-shell { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.hm-pf-01 .hm-pf-body { padding: 8px 0; }

/* 02 — Two-column with left rail */
.hm-pf-02 { padding: 24px 0; }
.hm-pf-02 .hm-pf-shell { max-width: 1180px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 60px 1fr; gap: 24px; }
.hm-pf-02 .hm-pf-rail { background: linear-gradient(180deg, transparent, var(--hm-accent, #2563eb) 30%, var(--hm-accent, #2563eb) 70%, transparent); opacity: .25; border-radius: 999px; }
.hm-pf-02 .hm-pf-body { padding: 4px 0; }
@media (max-width: 720px) { .hm-pf-02 .hm-pf-shell { grid-template-columns: 1fr; } .hm-pf-02 .hm-pf-rail { display: none; } }

/* 03 — Narrow centered (book-like) */
.hm-pf-03 { padding: 32px 0; }
.hm-pf-03 .hm-pf-narrow { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* 04 — Split content (sidebar pinstripe + body) */
.hm-pf-04 { padding: 28px 0; background: linear-gradient(180deg, var(--hm-bg-soft, #f8fafc), transparent 40%); }
.hm-pf-04 .hm-pf-split { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 8px 1fr; gap: 24px; }
.hm-pf-04 .hm-pf-side { background: repeating-linear-gradient(180deg, var(--hm-accent, #2563eb) 0 6px, transparent 6px 14px); opacity: .35; border-radius: 4px; }
@media (max-width: 720px) { .hm-pf-04 .hm-pf-split { grid-template-columns: 1fr; } .hm-pf-04 .hm-pf-side { display: none; } }

/* 05 — Card frame with subtle header bar */
.hm-pf-05 { padding: 32px 16px; background: var(--hm-bg-soft, #f8fafc); }
.hm-pf-05 .hm-pf-card { max-width: 1120px; margin: 0 auto; background: #fff; border: 1px solid var(--hm-border, #e5e7eb); border-radius: 16px; box-shadow: 0 8px 28px rgba(15,23,42,.05); overflow: hidden; }
.hm-pf-05 .hm-pf-card-head { height: 8px; background: var(--hm-accent, #2563eb); }
.hm-pf-05 .hm-pf-body { padding: 28px; }

/* 06 — Quote rail style */
.hm-pf-06 { padding: 28px 0; }
.hm-pf-06 .hm-pf-shell { max-width: 1080px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 4px 1fr; gap: 20px; }
.hm-pf-06 .hm-pf-quote-rail { background: var(--hm-accent, #2563eb); border-radius: 2px; }
@media (max-width: 720px) { .hm-pf-06 .hm-pf-shell { grid-template-columns: 1fr; } .hm-pf-06 .hm-pf-quote-rail { display: none; } }

/* 07 — Newspaper columns (head row + body) */
.hm-pf-07 { padding: 24px 0; }
.hm-pf-07 .hm-pf-cols { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.hm-pf-07 .hm-pf-col-head { height: 2px; background: var(--hm-fg, #111); margin-bottom: 18px; }

/* 08 — Minimal narrow */
.hm-pf-08 { padding: 36px 16px; }
.hm-pf-08 .hm-pf-min { max-width: 680px; margin: 0 auto; }

/* 09 — News strip on top */
.hm-pf-09 { padding: 0 0 24px; }
.hm-pf-09 .hm-pf-news-strip { height: 4px; background: linear-gradient(90deg, #dc2626, #f97316); margin-bottom: 20px; }
.hm-pf-09 .hm-pf-shell { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* 10 — Wide cover */
.hm-pf-10 { padding: 0 0 32px; }
.hm-pf-10 .hm-pf-wide { max-width: none; margin: 0; }
.hm-pf-10 .hm-pf-cover { height: 6px; background: linear-gradient(90deg, var(--hm-accent, #2563eb), transparent 60%); margin-bottom: 24px; }
.hm-pf-10 .hm-pf-body { max-width: 1180px; margin: 0 auto; padding: 0 16px; }