:root { --pad: 14px; --radius: 14px; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background:#f6f7fb; color:#111; }
a{ color:inherit; text-decoration:none; }
.container{ max-width: 980px; margin: 0 auto; padding: 16px; }
.card{ background:#fff; border-radius: var(--radius); padding: var(--pad); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.row{ display:flex; gap:16px; }
.col{ flex:1; min-width:0; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom:1px solid rgba(0,0,0,.06); position:sticky; top:0; z-index:5; flex-wrap:nowrap; }
.nav .left{ display:flex; align-items:center; gap:10px; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; background:#f0f2ff; border-radius:999px; font-size: 12px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding: 10px 12px; border-radius: 12px; border:1px solid rgba(0,0,0,.12); background:#fff; cursor:pointer; font-weight:600; }
.btn.primary{ background:#111; color:#fff; border-color:#111; }
.btn.danger{ background:#fff; color:#b00020; border-color: rgba(176,0,32,.35); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.input{ width:100%; padding: 11px 12px; border-radius: 12px; border:1px solid rgba(0,0,0,.14); background:#fff; font-size: 16px; }
.small{ font-size: 12px; color: rgba(0,0,0,.65); }
.h1{ font-size: 18px; margin: 0 0 10px 0; }
.h2{ font-size: 15px; margin: 0 0 10px 0; }
.list{ display:flex; flex-direction:column; gap:10px; }
.item{ padding: 10px 12px; border:1px solid rgba(0,0,0,.08); border-radius: 12px; background:#fff; }
.item .meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.dot{ width:8px; height:8px; border-radius:999px; background:#e6e6e6; border:1px solid #e6e6e6; display:inline-block; }
.dot.unread{ background:#ff7a00; }
.dot.new{ background:#2f7dff; }
.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; padding: 2px 6px; border:1px solid rgba(0,0,0,.14); border-bottom-width:2px; border-radius: 8px; background:#fff; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.countbadge{
  background: #e0e1fb;
  color: #0a0080;
  border-radius: 1em;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
}
@media (max-width: 820px){
  .row{ flex-direction:column; }
  .grid2{ grid-template-columns: 1fr; }
}
.footer-actions{ position:fixed; left:0; right:0; bottom:0; padding:12px 0; background:transparent; border-top:none; backdrop-filter:none; }
.footer-actions .inner{ max-width: 980px; margin: 0 auto; display:flex; justify-content:flex-end; gap: 10px; }


/* top page tweaks */
.textlink{display:inline-block; font-weight:700; text-decoration:underline; padding:2px 0;}
.catrow{display:flex; flex-wrap:wrap; gap:10px;}
.catbtn{position:relative;}
.new-badge{
  position:absolute;
  top:-8px;
  left:-8px;
  font-size:10px;
  font-weight:900;
  padding:2px 6px;
  border-radius:999px;
}
.blink{animation:blink 1s infinite;}
@keyframes blink{
  0%, 50% { opacity:1; }
  51%, 100% { opacity:.2; }
}

.rightlink{display:block; text-align:right;}


/* compact right-aligned action links */
.btn.rightlink{
  display:inline-block;
  width:auto;
  padding:6px 12px;
}


/* keep right alignment while compact */
.rightlink{
  text-align:right;
}
.rightlink .btn,
.btn.rightlink{
  display:inline-block;
  width:auto;
}


/* right align wrapper */
.align-right{
  display:flex;
  justify-content:flex-end;
}

/* compact clickable (button/link) */
.btn-compact{
  display:inline-block;
  width:auto;
  padding:6px 12px;
}


/* force right align action links */
.card .align-right{
  display:flex;
  justify-content:flex-end;
}

/* compact action button */
.btn.btn-compact{
  display:inline-block;
  width:auto;
  padding:6px 12px;
}


/* right align area for action links (e.g., すべて表示) */
.card .align-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.card .align-right > a{
  width:auto;
}


/* robust right align for "すべて表示 →" */
.showall-wrap{overflow:auto;}
.showall{
  float:right;
  display:inline-block !important;
  width:auto !important;
  padding:6px 12px;
}


/* news index controls spacing */
.spacer{ width:16px; height:16px; }
.modebox{ display:flex; flex-direction:column; }

.nav .right{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.nav .right .btn{ white-space:nowrap; }
.badge{ white-space:nowrap; }


/* news index toolbar */
.toolbar{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.toolbar-left{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.toolbar-right{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}

/* news index controls (Home / Post / filters) */
.news-controls{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;}
.news-controls form{margin:0;}
.news-controls .home-btn{order:1;}
.news-controls .post-btn{order:2; white-space:nowrap;}
.news-controls .mode-form{order:3;}
.news-controls .cate-form{order:4;}
.label-block{display:block; margin:0 0 4px 0;}
.select-compact{width:auto; min-width:150px;}
.news-controls .cate-form select{width:auto; min-width:170px;}


/* news detail: keep category / unread / read icons left-aligned on all window sizes */
.news-detail-head .col{display:flex; justify-content:flex-start;}
.news-detail-head .meta{justify-content:flex-start !important; width:100%;}

@media (max-width: 520px){
  .header-home{ display:none !important; }

  /* On mobile, wrap at the post button */
  .news-controls .post-btn{order:10; flex-basis:100%; width:100%;}

  /* Make Home + selects fit in one row */
  .news-controls{gap:8px;}
  /* Hide Home on mobile */
  .news-controls .home-btn{display:none;}
  .news-controls .mode-form,
  .news-controls .cate-form{flex:1 1 0; min-width:0;}
  .news-controls .label-block{font-size:12px; margin:0 0 2px 0;}
  .news-controls select{width:100%; min-width:0; padding:8px 10px; font-size:14px;}

  /* news detail: place "もどる" under "既読マーク" on mobile */
  .news-detail-actions{flex-direction:column-reverse;}
  .news-detail-actions .col{width:100%;}
  .news-detail-actions .col:last-child{justify-content:flex-start !important;}

  /* news detail: align icons (category / unread) to the left on mobile */
  .news-detail-head{align-items:flex-start !important;}
  .news-detail-head .meta{justify-content:flex-start;}
  .news-detail-head .col:last-child{justify-content:flex-start !important;}
}


/* news/index mobile home in title */
.news-title-wrap{position:relative;}
.home-btn-mobile{display:none;}
@media (max-width: 520px){
  .news-controls .home-btn{display:none;}
  .home-btn-mobile{display:inline-flex; position:absolute; right:0; top:0; left:auto; transform:none;}
}

@media (min-width: 521px){
  .home-btn-mobile{display:none !important;}
}

.news-edit-actions{display:flex; gap:10px; flex-wrap:wrap;}
@media (max-width: 520px){
  .news-edit-actions .btn{font-size:14px;}
}

.desktop-menu{display:flex; gap:8px; align-items:center;}
.mobile-menu{display:none;}
@media (max-width:520px){.desktop-menu{display:none;} .mobile-menu{display:inline-flex;}}

/* hide header home button on mobile */
@media (max-width:520px){ .header-home{ display:none !important; } }


/* form field width modifiers */
.input--auto{ max-width: 360px; }
.input--code{ max-width: 180px; }
.input--name{ max-width: 240px; }
.input--kana{ max-width: 240px; }
.input--role{ max-width: 260px; }
/* ensure inputs don't stretch in grid */
.input--auto{ justify-self: start; }


/* admin user form layout */
.form{ display:flex; flex-direction:column; gap:14px; }
.form-row{ display:grid; grid-template-columns: 110px 1fr; gap:12px; align-items:center; }
.form-row--2 .form-field2{ display:grid; grid-template-columns: minmax(160px, 240px) minmax(160px, 240px); gap:10px; }

/* admin user edit/add: stack last/first name (and kana) vertically on small screens */
@media (max-width:520px){
  .form-row--2 .form-field2{ grid-template-columns: 1fr; }
  .form-row--2 .form-field2 .input--name,
  .form-row--2 .form-field2 .input--kana{ max-width: 100%; }
}
.form-field{ display:flex; align-items:center; gap:10px; }
.form-actions{ margin-top:12px; }
.input--code{ width:160px; }
.input--role{ width:220px; }
.input--name{ max-width:240px; }
.input--kana{ max-width:240px; }