/* =====================================================
   hitoplus — 会員・公開ページスタイル
   テーマ変更は base.css の :root だけ書き換えてください
   ===================================================== */

html, body { height: 100%; margin: 0; }
body { font-family: 'Noto Sans JP', sans-serif; background: var(--pub-bg); color: var(--pub-text); }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--pub-accent); text-decoration: none; }

/* =====================================================
   Layout
   ===================================================== */

.pub-center { min-height: 100vh; display: flex; align-items: center;
              justify-content: center; padding: 1.5rem; }
.pub-wrap   { width: 100%; max-width: 400px; }
.pub-main   { max-width: 800px; margin: 2.5rem auto; padding: 0 1.5rem; }

/* =====================================================
   Nav
   ===================================================== */

.pub-nav        { display: flex; align-items: center; justify-content: space-between;
                  padding: .75rem 1.5rem; background: var(--pub-surface);
                  border-bottom: 1px solid var(--pub-border); }
.pub-nav-brand  { font-weight: 700; color: var(--pub-text); font-size: .95rem; }
.pub-nav-right  { display: flex; align-items: center; gap: .75rem; }
.pub-nav-user   { font-size: .875rem; }
.pub-avatar     { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* =====================================================
   Card
   ===================================================== */

.pub-card { background: var(--pub-surface); border: 1px solid var(--pub-border);
            border-radius: .75rem; padding: 2rem; }

/* =====================================================
   Typography
   ===================================================== */

.pub-title    { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.pub-title-lg { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.pub-heading  { font-size: 1.1rem; font-weight: 600; margin-bottom: .4rem; }
.pub-desc     { font-size: .875rem; color: var(--pub-muted); line-height: 1.7; }
.pub-desc-sm  { font-size: .8rem; color: var(--pub-muted); }
.pub-icon     { font-size: 2.5rem; margin-bottom: 1rem; }

/* =====================================================
   Buttons
   ===================================================== */

.pub-btn { display: inline-flex; align-items: center; justify-content: center;
           width: auto; padding: .65rem 1rem; border-radius: .4rem;
           font-size: .9rem; font-weight: 500; text-align: center; cursor: pointer;
           transition: all .15s; border: 1px solid transparent;
           font-family: inherit; text-decoration: none; }
.pub-btn-block { display: flex; width: 100%; }
.pub-btn-line    { background: var(--pub-line); color: #fff; border-color: var(--pub-line); }
.pub-btn-line:hover { background: #05a848; color: #fff; }
.pub-btn-primary { background: var(--pub-accent); color: #fff; border-color: var(--pub-accent); }
.pub-btn-primary:hover { background: #818cf8; color: #fff; }
.pub-btn-ghost   { background: transparent; color: var(--pub-muted); border-color: var(--pub-border); }
.pub-btn-ghost:hover { background: rgba(255,255,255,.04); color: var(--pub-text); }
.pub-btn-danger  { background: transparent; color: #f87171; border-color: #7f1d1d; }
.pub-btn-danger:hover { background: #450a0a; color: #f87171; }
.pub-btn-sm { padding: .3rem .8rem; font-size: .8rem; }

/* =====================================================
   Form
   ===================================================== */

.pub-field { margin-bottom: 1rem; }
.pub-label { display: block; font-size: .8rem; color: var(--pub-muted); margin-bottom: .4rem; }
.pub-input { width: 100%; background: var(--pub-bg); border: 1px solid var(--pub-border);
             color: var(--pub-text); border-radius: .375rem; padding: .55rem .75rem;
             font-size: .9rem; font-family: inherit; }
.pub-input:focus { outline: 2px solid var(--pub-accent); border-color: transparent; }
.pub-hint  { font-size: .75rem; color: var(--pub-muted); margin-top: .3rem; }

/* =====================================================
   Alert
   ===================================================== */

.pub-alert      { border-radius: .375rem; padding: .7rem 1rem;
                  margin-bottom: 1rem; border: 1px solid; font-size: .875rem; }
.pub-alert-err  { background: #2d0707; border-color: #7f1d1d; color: #fca5a5; }
.pub-alert-info { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.3); color: #a5b4fc; }
.pub-alert-ok   { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.3); color: #86efac; }

/* =====================================================
   Utilities
   ===================================================== */

.c-muted { color: var(--pub-muted); }
.c-err   { color: #f87171; }

/* =====================================================
   Member 2-column Layout
   ===================================================== */

/* Overlay */
.mbr-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 40;
}
.mbr-overlay.is-open { display: block; }

/* Drawer (mobile, slides from left) */
.mbr-drawer {
  position: fixed; inset-y: 0; left: 0; width: 260px;
  background: var(--pub-surface); border-right: 1px solid var(--pub-border);
  z-index: 50; display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .2s ease;
}
.mbr-drawer.is-open { transform: translateX(0); }

/* Layout wrapper */
.mbr-layout { display: flex; min-height: 100vh; }

/* Sidebar (PC only) */
.mbr-sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--pub-surface); border-right: 1px solid var(--pub-border);
  display: none; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

/* Content area */
.mbr-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Mobile header */
.mbr-mobile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; background: var(--pub-surface);
  border-bottom: 1px solid var(--pub-border);
  position: sticky; top: 0; z-index: 10;
}

/* Main content */
.mbr-main { padding: 1.5rem 1.5rem 6rem; flex: 1; }

/* Hamburger button */
.mbr-hamburger {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: .25rem;
}
.mbr-hamburger-bar {
  display: block; width: 22px; height: 2px;
  background: var(--pub-muted); border-radius: 2px;
}

/* Bottom tab bar (mobile only) */
.mbr-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--pub-surface); border-top: 1px solid var(--pub-border);
  display: flex; z-index: 30;
}
.mbr-tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: .45rem .25rem; font-size: .6rem; color: var(--pub-muted);
  text-decoration: none; gap: .15rem; transition: color .15s;
}
.mbr-tab-item.active, .mbr-tab-item:hover { color: var(--pub-accent); }
.mbr-tab-item svg { width: 20px; height: 20px; }

/* Shared: sidebar header / drawer header */
.mbr-sidebar-header {
  padding: 1.25rem 1rem .9rem;
  border-bottom: 1px solid var(--pub-border); flex-shrink: 0;
}
.mbr-drawer-header {
  padding: 1.25rem 1rem .9rem;
  border-bottom: 1px solid var(--pub-border);
  display: flex; align-items: flex-start; justify-content: space-between;
}
.mbr-brand { font-weight: 700; font-size: 1rem; color: var(--pub-text); }
.mbr-sidebar-ws {
  font-size: .72rem; color: var(--pub-muted); margin-top: .2rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mbr-drawer-close {
  background: none; border: none; color: var(--pub-muted);
  cursor: pointer; font-size: 1rem; padding: .1rem .3rem; line-height: 1;
}

/* Nav items */
.mbr-sidebar-nav, .mbr-drawer-nav { flex: 1; overflow-y: auto; padding: .5rem; }
.mbr-nav-section {
  padding: .8rem .5rem .25rem;
  font-size: .65rem; font-weight: 600; color: var(--pub-muted);
  letter-spacing: .06em; text-transform: uppercase;
}
.mbr-nav-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .75rem; border-radius: .375rem;
  font-size: .85rem; color: var(--pub-muted); text-decoration: none;
  transition: background .12s, color .12s;
}
.mbr-nav-link:hover { background: rgba(99,102,241,.08); color: var(--pub-text); }
.mbr-nav-link.active { background: rgba(99,102,241,.15); color: var(--pub-accent); }
.mbr-nav-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.mbr-nav-btn { width: 100%; background: none; border: none; font-family: inherit; cursor: pointer; text-align: left; }

/* Footer (avatar + name + logout) */
.mbr-sidebar-footer, .mbr-drawer-footer {
  padding: .75rem 1rem; border-top: 1px solid var(--pub-border);
  display: flex; align-items: center; gap: .6rem; flex-shrink: 0;
}
.mbr-footer-info { flex: 1; min-width: 0; }
.mbr-footer-name {
  font-size: .8rem; color: var(--pub-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mbr-footer-logout { font-size: .75rem; color: var(--pub-muted); text-decoration: none; }
.mbr-footer-logout:hover { color: #f87171; }

/* PC breakpoint */
@media (min-width: 768px) {
  .mbr-sidebar        { display: flex; }
  .mbr-drawer         { display: none !important; }
  .mbr-overlay        { display: none !important; }
  .mbr-mobile-header  { display: none !important; }
  .mbr-bottom-nav     { display: none !important; }
  .mbr-main           { padding: 2rem; }
}