/*
Theme Name: STYLING DIRECTORY
Theme URI: https://example.com/styling-directory/
Author: Takayuki Sakurai
Author URI: https://example.com/
Description: 「最新の1記事を丸ごと表示」するトップページから始める、白基調のシンプルなブログテーマ。PC閲覧時は執筆者プロフィールをサイドバーに、スマホ表示時は記事末に表示します。記事の途中で目立たせる「強調ボックス」（背景色を選択可）ブロックを同梱。のちに一覧トップへ切り替えやすい構成です。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: styling-directory
Tags: blog, one-column, two-columns, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   0. デザイントークン
   ========================================================= */
:root{
  --sd-bg:        #ffffff;
  --sd-ink:       #1b1b1b;
  --sd-ink-soft:  #6a6a6a;
  --sd-line:      #e6e4df;
  --sd-line-soft: #f0eee9;
  --sd-accent:    #1b1b1b;
  --sd-link:      #14213d;

  --sd-max:       1160px;   /* 全体の最大幅 */
  --sd-reading:   720px;    /* 本文の読みやすい幅 */
  --sd-sidebar:   276px;    /* サイドバー幅 */
  --sd-gap:       64px;     /* 本文とサイドバーの間隔 */
  --sd-pad:       24px;     /* 左右の余白 */

  --sd-serif: "Times New Roman", "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif;
  --sd-sans:  "Hiragino Kaku Gothic ProN", "Hiragino Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", Meiryo, sans-serif;

  --sd-radius: 6px;
}

/* =========================================================
   1. リセット & ベース
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--sd-bg);
  color:var(--sd-ink);
  font-family:var(--sd-sans);
  font-size:16px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:var(--sd-link); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ text-decoration:none; }
:focus-visible{ outline:2px solid var(--sd-accent); outline-offset:3px; }

/* =========================================================
   2. レイアウト共通
   ========================================================= */
.site-content{ min-height:50vh; }
.content-wrap{
  max-width:var(--sd-max);
  margin-inline:auto;
  padding-inline:var(--sd-pad);
}

/* トップ・記事ページ：PCは本文 + サイドバーの2カラム */
.content-wrap--single{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--sd-sidebar);
  gap:var(--sd-gap);
  align-items:start;
  padding-block:56px 80px;
}

/* =========================================================
   3. サイトヘッダー
   ========================================================= */
.site-header{
  border-bottom:1px solid var(--sd-line);
  background:var(--sd-bg);
}
.site-header__inner{
  max-width:var(--sd-max);
  margin-inline:auto;
  padding:22px var(--sd-pad);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.site-branding{ margin:0; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.site-title{
  font-family:var(--sd-serif);
  font-size:1.5rem;
  letter-spacing:.14em;
  font-weight:600;
  text-transform:uppercase;
  color:var(--sd-ink);
  text-decoration:none;
}
.site-description{
  font-size:.74rem;
  letter-spacing:.18em;
  color:var(--sd-ink-soft);
  text-transform:uppercase;
}
.site-nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:22px;
  font-size:.84rem;
  letter-spacing:.04em;
}
.site-nav__list a{ color:var(--sd-ink); text-decoration:none; }
.site-nav__list a:hover{ color:var(--sd-ink-soft); }

/* =========================================================
   4. 記事（entry）
   ========================================================= */
.entry{ min-width:0; }
.entry__header{ margin-bottom:32px; }
.entry__title{
  font-family:var(--sd-serif);
  font-size:clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem);
  line-height:1.35;
  font-weight:600;
  letter-spacing:.01em;
  margin:.1em 0 .5em;
}
.entry__meta{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-size:.8rem;
  letter-spacing:.08em;
  color:var(--sd-ink-soft);
  text-transform:uppercase;
}
.entry__meta a{ color:var(--sd-ink-soft); text-decoration:none; }
.entry__meta a:hover{ color:var(--sd-ink); }
.entry__cats::before{ content:"／"; margin-right:10px; color:var(--sd-line); }

.entry__thumb{ margin:0 0 40px; }
.entry__thumb img{ width:100%; border-radius:var(--sd-radius); }

/* 本文：読みやすい幅に制限 */
.entry__content{ max-width:var(--sd-reading); }
.entry__content > *{ margin-block:1.4em; }
.entry__content > :first-child{ margin-top:0; }
.entry__content h2{
  font-size:1.5rem;
  line-height:1.5;
  font-weight:600;
  margin-top:2.4em;
  padding-bottom:.4em;
  border-bottom:1px solid var(--sd-line);
}
.entry__content h3{ font-size:1.25rem; line-height:1.6; font-weight:600; margin-top:2em; }
.entry__content h4{ font-size:1.08rem; font-weight:600; margin-top:1.8em; }
.entry__content p{ margin-block:1.4em; }
.entry__content a{ color:var(--sd-link); }
.entry__content ul,
.entry__content ol{ padding-left:1.4em; }
.entry__content li{ margin-block:.4em; }
.entry__content blockquote{
  margin-inline:0;
  padding:.4em 0 .4em 1.2em;
  border-left:3px solid var(--sd-ink);
  color:var(--sd-ink-soft);
  font-style:italic;
}
.entry__content img{ border-radius:var(--sd-radius); }
.entry__content code{
  background:var(--sd-line-soft);
  padding:.12em .4em;
  border-radius:4px;
  font-size:.92em;
}
.entry__content pre{
  background:#1b1b1b;
  color:#f5f5f5;
  padding:1.2em 1.4em;
  border-radius:var(--sd-radius);
  overflow:auto;
  line-height:1.7;
}
.entry__content pre code{ background:none; padding:0; }

/* alignwide / full（max-widthを越えて広げる） */
.entry__content .alignwide{ max-width:min(960px, 92vw); margin-inline:auto; }
.entry__content .alignfull{ max-width:none; }

.entry__tags{ margin-top:48px; font-size:.84rem; }
.entry__tags a{
  display:inline-block;
  margin:0 8px 8px 0;
  padding:4px 12px;
  border:1px solid var(--sd-line);
  border-radius:999px;
  color:var(--sd-ink-soft);
  text-decoration:none;
}
.entry__tags a:hover{ border-color:var(--sd-ink); color:var(--sd-ink); }

.entry__pagelinks{ margin-top:32px; font-size:.9rem; }
.entry__comments{ margin-top:64px; max-width:var(--sd-reading); }

/* =========================================================
   5. 執筆者プロフィール
   ========================================================= */
.author-profile{
  border:1px solid var(--sd-line);
  border-radius:var(--sd-radius);
  padding:24px;
  background:var(--sd-bg);
}
.author-profile__head{ display:flex; gap:14px; align-items:center; }
.author-profile__img{ width:56px; height:56px; border-radius:50%; }
.author-profile__label{
  display:block;
  font-size:.66rem;
  letter-spacing:.22em;
  color:var(--sd-ink-soft);
  text-transform:uppercase;
  margin-bottom:2px;
}
.author-profile__name{
  margin:0;
  font-family:var(--sd-serif);
  font-size:1.18rem;
  font-weight:600;
}
.author-profile__bio{
  margin:16px 0 0;
  font-size:.9rem;
  line-height:1.85;
  color:#3c3c3c;
}
.author-profile__links{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:.8rem;
  letter-spacing:.06em;
}
.author-profile__links a{ color:var(--sd-ink); text-decoration:none; border-bottom:1px solid var(--sd-line); padding-bottom:1px; }
.author-profile__links a:hover{ border-color:var(--sd-ink); }
.author-profile__more{
  display:inline-block;
  margin-top:18px;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--sd-ink-soft);
  text-decoration:none;
}
.author-profile__more:hover{ color:var(--sd-ink); }
.author-profile__more::after{ content:" →"; }

/* サイドバー（PC） */
.sidebar{ min-width:0; }
.sidebar .author-profile{ position:sticky; top:32px; }
.sidebar__widgets{ margin-top:28px; }
.widget{ margin-bottom:28px; font-size:.9rem; }
.widget__title{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sd-ink-soft);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--sd-line);
}
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ padding:5px 0; border-bottom:1px solid var(--sd-line-soft); }
.widget a{ text-decoration:none; color:var(--sd-ink); }

/* スマホ用プロフィール枠（記事末）はPCでは非表示 */
.author-profile-slot--mobile{ display:none; margin-top:56px; }

/* =========================================================
   6. 一覧（アーカイブ等のフォールバック）
   ========================================================= */
.content-wrap--list,
.content-wrap--page{ padding-block:56px 80px; }
.content-wrap--page .entry{ max-width:var(--sd-reading); margin-inline:auto; }

.entry-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:40px 32px;
  max-width:var(--sd-max);
}
.card{ min-width:0; }
.card__link{ text-decoration:none; color:inherit; display:block; }
.card__thumb{ margin:0 0 16px; }
.card__thumb img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--sd-radius); }
.card__title{ font-family:var(--sd-serif); font-size:1.3rem; line-height:1.45; font-weight:600; margin:0 0 8px; }
.card__meta{ font-size:.74rem; letter-spacing:.1em; color:var(--sd-ink-soft); text-transform:uppercase; margin:0 0 10px; }
.card__excerpt{ font-size:.92rem; color:#444; margin:0; }
.card__link:hover .card__title{ color:var(--sd-ink-soft); }

.pagination{ margin-top:64px; }
.pagination .nav-links{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 10px;
  border:1px solid var(--sd-line); border-radius:var(--sd-radius);
  text-decoration:none; color:var(--sd-ink);
}
.pagination .page-numbers.current{ background:var(--sd-ink); color:#fff; border-color:var(--sd-ink); }

.no-posts{ color:var(--sd-ink-soft); padding:40px 0; }

/* =========================================================
   7. コメント
   ========================================================= */
.comments-area .comments-title{ font-family:var(--sd-serif); font-size:1.3rem; margin:0 0 24px; }
.comment-list{ list-style:none; margin:0 0 40px; padding:0; }
.comment-list .children{ list-style:none; margin-left:24px; padding-left:0; }
.comment-body{ padding:16px 0; border-bottom:1px solid var(--sd-line-soft); }
.comment-author{ font-size:.9rem; }
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  width:100%; padding:10px 12px; border:1px solid var(--sd-line);
  border-radius:var(--sd-radius); font-family:inherit; font-size:.95rem;
}
.comment-form .submit{
  background:var(--sd-ink); color:#fff; border:none;
  padding:11px 24px; border-radius:var(--sd-radius); cursor:pointer; font-size:.9rem;
}

/* =========================================================
   8. フッター
   ========================================================= */
.site-footer{ border-top:1px solid var(--sd-line); margin-top:40px; }
.site-footer__inner{
  max-width:var(--sd-max);
  margin-inline:auto;
  padding:40px var(--sd-pad);
}
.site-footer__copy{
  margin:0;
  font-size:.76rem;
  letter-spacing:.14em;
  color:var(--sd-ink-soft);
  text-transform:uppercase;
}

/* =========================================================
   9. レスポンシブ
   ========================================================= */
@media (max-width:900px){
  .content-wrap--single{
    grid-template-columns:1fr;   /* 1カラムへ。サイドバーは本文の下に回り込む */
    gap:0;
    padding-block:40px 64px;
  }
  .sidebar{ margin-top:8px; }
  .sidebar .author-profile{ position:static; }

  /* PC用プロフィールはスマホでは隠し、記事末のプロフィールを表示 */
  .author-profile-slot--pc{ display:none; }
  .author-profile-slot--mobile{ display:block; }
}

@media (max-width:600px){
  body{ font-size:15px; }
  .site-header__inner{ gap:10px; }
  .entry__content{ font-size:1rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}