/* 299 WORKS JOURNAL COMMON TEMPLATE v1
   共通部分はこのファイルで管理します。
   テーマ固有の色・画像・カード構成は各HTML内のCSSで管理します。 */

:root{
  --journal-paper:#f3f1eb;
  --journal-ink:#111;
  --journal-red:#d7192d;
  --journal-pad:clamp(22px,5.5vw,88px);
  --journal-header-height:76px;
}

body.journal-page{
  margin:0;
  background:var(--paper,var(--journal-paper));
  color:var(--ink,var(--journal-ink));
  font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Arial,sans-serif;
}

body.journal-page a{
  color:inherit;
  text-decoration:none;
}

/* ===== 共通ヘッダー ===== */
body.journal-page header.journal-header{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--journal-header-height);
  padding:0 var(--pad,var(--journal-pad));
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(243,241,235,.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(0,0,0,.16);
}

body.journal-page .journal-brand{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  font-weight:900;
  letter-spacing:.12em;
  font-size:13px;
}

body.journal-page .site-logo-mark{
  width:54px;
  height:54px;
  object-fit:contain;
  flex:none;
}

body.journal-page .brand-word{
  font-size:13px;
  font-weight:850;
  letter-spacing:.15em;
  white-space:nowrap;
}

body.journal-page .creator{
  font-size:10px;
  color:#6e6a62;
  letter-spacing:.12em;
  border-left:1px solid #aaa;
  padding-left:13px;
  white-space:nowrap;
}

body.journal-page nav.journal-nav{
  display:flex;
  gap:27px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}

body.journal-page nav.journal-nav a:hover{
  color:var(--red,var(--journal-red));
}

/* ===== 共通フッター ===== */
body.journal-page footer.journal-footer{
  background:#070707;
  color:#fff;
  padding:28px var(--pad,var(--journal-pad));
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  font-size:9px;
  letter-spacing:.14em;
}

body.journal-page .footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

body.journal-page .footer-brand .site-logo-mark{
  width:52px;
  height:52px;
}

body.journal-page .footer-brand .brand-word{
  color:#fff;
  font-size:12px;
}

body.journal-page .journal-footer-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
  color:#777;
  text-align:right;
}

body.journal-page .journal-footer-return{
  color:#fff;
  border-bottom:1px solid #777;
  padding-bottom:4px;
  font-weight:800;
}

body.journal-page .journal-footer-return:hover{
  color:var(--red,var(--journal-red));
  border-color:var(--red,var(--journal-red));
}

/* ===== 共通アクセシビリティ ===== */
body.journal-page a:focus-visible{
  outline:2px solid var(--red,var(--journal-red));
  outline-offset:4px;
}

@media(max-width:980px){
  body.journal-page nav.journal-nav{
    display:none;
  }
}

@media(max-width:700px){
  :root{
    --journal-header-height:65px;
  }

  body.journal-page header.journal-header{
    padding:0 19px;
  }

  body.journal-page .site-logo-mark{
    width:43px;
    height:43px;
  }

  body.journal-page .brand-word{
    font-size:11px;
  }

  body.journal-page .creator{
    display:none;
  }

  body.journal-page footer.journal-footer{
    display:block;
    padding:25px 20px;
  }

  body.journal-page .footer-brand{
    margin-bottom:16px;
  }

  body.journal-page .journal-footer-meta{
    justify-content:space-between;
    gap:18px;
    text-align:left;
  }
}