/* ============================================================
   JAY会「断捨離 × 感謝ワーク」
   上質で静かな、瞑想的デザイン
   ------------------------------------------------------------
   設計方針：
   - 引き算の美。装飾を足すのではなく、余白で語る。
   - 京都・禅・断捨離・感謝の世界観。生成りの紙にそっと墨で書いたような佇まい。
   - 主要閲覧端末はスマホ → モバイルファーストで組み、広い画面で余白を足す。
   - 40代女性中心 → 行間1.8前後・十分なコントラストで「読み疲れない」可読性を最優先。
   ============================================================ */

/* 明朝＝見出しの品格・余韻、ゴシック＝本文の可読性。日本語ウェイトを絞って読み込み負荷を抑える */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;600&display=swap');

:root{
  /* --- 配色：彩度を落とした和のアースカラー --- */
  --bg:#f6f2ea;          /* 生成り（オフホワイト）。真っ白を避け、紙の温度を持たせる */
  --bg-soft:#efe9dd;     /* 区切りや沈める面に使うわずかに濃い生成り */
  --card:#fffdf9;        /* カード面。背景よりほんの少し明るく浮かせる */
  --ink:#37322c;         /* 墨色。純黒を避け、目に優しい焦げ茶寄りの黒 */
  --ink-soft:#574f45;    /* 本文の補助・引用テキスト */
  --muted:#9a9082;       /* 控えめな注記。低コントラストになりすぎない範囲に調整 */
  --line:#e4dccd;        /* 繊細な区切り線 */
  --line-soft:#eee7d9;
  --accent:#a98b5d;      /* 木のような落ち着いたゴールド／サンドベージュ */
  --accent-dark:#8a6f45; /* ホバー・リンクの深いゴールド */
  --gold-tint:#f3ecdd;   /* 引用ブロック等のごく淡いゴールドの面 */
  --danger:#a85149;      /* 削除・エラー。主張しすぎない朱 */
  --danger-wash:#f6e7e4;
  --radius:16px;         /* 大きめの角丸でやわらかさを出す */
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(55,50,44,.04), 0 8px 24px rgba(55,50,44,.05); /* ごく控えめな影 */
  --maxw:680px;          /* 読み物として最適な1行長を保つ本文カラム幅 */
  --serif:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;          /* 日本語の可読性。ゆったりした行間で「静けさ」を出す */
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:32px 22px 88px;    /* 下に大きく余白をとり、読後の余韻を残す */
}

a{color:var(--accent-dark); text-decoration:none; transition:color .2s ease}
a:hover{color:var(--accent)}

img{max-width:100%; height:auto}

/* ---------- ヘッダー ---------- */
.site-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 22px;
  background:rgba(255,253,249,.86);
  backdrop-filter:saturate(120%) blur(6px);   /* スクロール時も背景がうるさくならないよう半透明 */
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;          /* ナビは常に手の届くところに */
}
.brand{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink);
  letter-spacing:.14em;       /* 明朝＋字間で「のれん」のような落ち着き */
}
.brand:hover{color:var(--accent-dark)}
.nav-link{
  font-size:.84rem; color:var(--muted); letter-spacing:.08em;
  padding:6px 14px; border:1px solid var(--line); border-radius:999px;
}
.nav-link:hover{color:var(--accent-dark); border-color:var(--accent)}

/* ---------- フッター ---------- */
.site-footer{
  text-align:center; padding:48px 22px 56px;
  color:var(--muted); font-size:.8rem; line-height:2;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.site-footer p{margin:.2em 0}

/* ---------- 共通テキスト・見出し ---------- */
.muted{color:var(--muted); font-size:.86rem}

.error{
  background:var(--danger-wash); color:var(--danger);
  padding:12px 16px; border-radius:var(--radius-sm);
  font-size:.9rem; border:1px solid rgba(168,81,73,.18);
  margin:0 0 16px;
}

h1{
  font-family:var(--serif); font-weight:500;
  font-size:1.6rem; line-height:1.5; margin:.1em 0 .5em; letter-spacing:.04em;
}
h2{
  font-family:var(--serif); font-weight:500;
  font-size:1.25rem; line-height:1.6; margin:2.4em 0 .8em; letter-spacing:.04em;
}

/* セクション見出し：明朝＋細い下線で「章扉」のような静けさ */
.section-title{
  font-family:var(--serif); font-weight:500;
  font-size:1.25rem; letter-spacing:.06em; margin:0 0 1.4em;
}
.section-title.center{text-align:center}
/* 中央寄せ見出しには、左右に伸びる繊細なヘアラインを添えて余白を演出 */
.section-title.center::after{
  content:""; display:block; width:40px; height:1px;
  background:var(--accent); margin:.7em auto 0; opacity:.7;
}

/* 小ラベル（音声など）：字間を広げた控えめなキャプション */
.section-label{
  display:block; font-size:.74rem; letter-spacing:.18em;
  color:var(--muted); text-transform:none; margin-bottom:.4em;
}

/* 区切り線：中央にゴールドの点を置いた、和の間仕切り */
.divider{
  border:none; height:1px; background:var(--line);
  margin:48px 0; position:relative;
}
.divider::after{
  content:"❖"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:var(--bg); color:var(--accent);
  font-size:.7rem; padding:0 12px; opacity:.8;
}

/* ---------- カード（共通） ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  margin:18px 0;
  box-shadow:var(--shadow);
}

/* ============================================================
   トップページ
   ============================================================ */

/* --- Hero：詩のように、たっぷりの余白で迎える --- */
.hero{
  text-align:center;
  padding:40px 8px 8px;
  margin-bottom:8px;
}
.hero-eyebrow{
  font-size:.78rem; letter-spacing:.32em; color:var(--accent-dark);
  margin:0 0 1.4em; font-weight:500;
}
.hero-title{
  font-family:var(--serif); font-weight:500;
  font-size:2rem; line-height:1.7; letter-spacing:.08em;
  margin:0 0 1em; color:var(--ink);
}
.hero-lead{
  font-size:.98rem; line-height:2; color:var(--ink-soft);
  max-width:30em; margin:.6em auto;   /* 1行を短く保ち、ゆっくり読ませる */
}

/* --- このワークの歩き方 --- */
.howto{margin:56px 0}
.howto-steps{
  list-style:none; counter-reset:step; padding:0; margin:0;
  display:grid; gap:14px;
}
.howto-steps li{
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px 22px 64px;     /* 左に番号バッジ分のスペース */
  box-shadow:var(--shadow);
}
/* 手書き番号のような、丸いゴールドのステップ番号 */
.howto-steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:20px; top:22px;
  width:30px; height:30px; line-height:30px; text-align:center;
  border-radius:50%; border:1px solid var(--accent);
  color:var(--accent-dark); font-size:.86rem; font-weight:500;
  font-family:var(--serif);
}
.howto-step-title{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:1.05rem; letter-spacing:.03em; margin-bottom:.3em;
}
.howto-step-body{display:block; font-size:.92rem; color:var(--ink-soft); line-height:1.9}
.howto-note{
  text-align:center; font-size:.88rem; color:var(--muted);
  margin-top:24px; line-height:1.9;
}

/* --- 全15回のテーマ（目次） --- */
.toc{margin:56px 0 0}
.day-list{list-style:none; padding:0; margin:0; display:grid; gap:14px}

/* day-card：触れたくなる、静かなカード。ホバーで「そっと浮く」 */
.day-card{
  display:flex; flex-direction:column; gap:4px;
  color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px;
  box-shadow:var(--shadow);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.day-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(55,50,44,.05), 0 14px 32px rgba(138,111,69,.10);
}
.day-num{
  font-size:.74rem; color:var(--accent-dark); font-weight:500;
  letter-spacing:.14em;
}
.day-theme{
  font-family:var(--serif); font-weight:500;
  font-size:1.18rem; line-height:1.6; letter-spacing:.03em; margin-top:2px;
}
/* lead：テーマに添える詩的な一文。明朝・斜体気味の余韻 */
.day-lead{
  font-size:.9rem; color:var(--ink-soft); line-height:1.85; margin-top:4px;
}
.day-meta{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-top:10px; font-size:.78rem; color:var(--muted);
}
/* バッジ：主張しすぎない、淡いゴールドのピル */
.badge-audio,.badge-count{
  display:inline-flex; align-items:center;
  padding:3px 11px; border-radius:999px;
  font-size:.74rem; letter-spacing:.04em;
  background:var(--gold-tint); color:var(--accent-dark);
  border:1px solid var(--line);
}

/* --- 公開時刻前のロックカード：静かに沈めて、開けないことを示す --- */
.day-card.locked{
  cursor:default; background:var(--bg-soft);
  box-shadow:none; opacity:.78;
}
.day-card.locked:hover{transform:none; border-color:var(--line)}
.day-card.locked .day-theme{color:var(--muted)}
.badge-lock{
  display:inline-flex; align-items:center;
  padding:3px 11px; border-radius:999px;
  font-size:.74rem; letter-spacing:.04em;
  background:transparent; color:var(--muted);
  border:1px dashed var(--line);
}

/* --- 各回ページのロック画面 --- */
.locked-page{text-align:center; padding:48px 28px}
.locked-page .lock-mark{font-size:2rem; display:block; opacity:.55}
.locked-page .lock-day{
  font-size:.82rem; letter-spacing:.1em; color:var(--accent-dark);
  margin:14px 0 6px;
}
.locked-page .lock-title{
  font-family:var(--serif); font-weight:500;
  font-size:1.3rem; line-height:1.7; letter-spacing:.04em; margin:0 0 .6em;
}

/* ============================================================
   Day（各回）ページ
   ============================================================ */

.crumbs{margin:0 0 24px; font-size:.86rem}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent-dark)}

.lesson{margin-bottom:8px}
.lesson-head{text-align:center; margin-bottom:36px}

/* フェーズチップ：今どの段階かを、静かに示すラベル */
.phase-chip{
  display:inline-block; font-size:.72rem; letter-spacing:.12em;
  color:var(--accent-dark); background:var(--gold-tint);
  border:1px solid var(--line); border-radius:999px;
  padding:4px 14px; margin-bottom:14px;
}
.lesson-num{
  display:block; font-size:.78rem; letter-spacing:.14em;
  color:var(--accent-dark); font-weight:500; margin-bottom:.5em;
}
.lesson-theme{
  font-family:var(--serif); font-weight:500;
  font-size:1.7rem; line-height:1.55; letter-spacing:.05em; margin:0 0 .5em;
}
/* lesson-lead：テーマの詩的な一文。明朝・ゆとりある行間で美しく見せる */
.lesson-lead{
  font-family:var(--serif); font-weight:400;
  font-size:1.02rem; line-height:2.1; color:var(--ink-soft);
  letter-spacing:.04em; max-width:28em; margin:.6em auto 0;
}

/* --- 今日の問い：そっと心に置かれる、印象的な引用ブロック --- */
.question{
  position:relative;
  text-align:center;
  background:var(--gold-tint);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:40px 28px 36px;
  margin:36px 0;
}
.question-label{
  display:block; font-size:.74rem; letter-spacing:.22em;
  color:var(--accent-dark); margin-bottom:1em;
}
/* 大きな引用符を背後にそっと添える（飾りすぎない大きさ・低い不透明度） */
.question::before{
  content:"\201C";              /* “ */
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-size:3.4rem; line-height:1;
  color:var(--accent); opacity:.22;
}
.question-text{
  font-family:var(--serif); font-weight:500;
  font-size:1.3rem; line-height:1.95; letter-spacing:.05em;
  color:var(--ink); margin:0; max-width:24em; margin-inline:auto;
}

/* --- 音声 --- */
.audio{margin:32px 0}
.audio audio{width:100%; margin-top:8px}

/* --- 本文：読み物として最高の可読性を --- */
.lesson-body{margin:32px 0}
.lesson-body p{
  margin:0 0 1.5em; line-height:2; color:var(--ink-soft);
  font-size:1rem;
}

/* --- 今日のワーク：手順 --- */
.work{margin:40px 0}
.work-steps{
  list-style:none; counter-reset:wstep; padding:0; margin:0;
  display:grid; gap:12px;
}
.work-steps li{
  position:relative;
  padding:16px 18px 16px 54px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  line-height:1.85; color:var(--ink-soft);
  box-shadow:var(--shadow);
}
.work-steps li::before{
  counter-increment:wstep; content:counter(wstep);
  position:absolute; left:16px; top:16px;
  width:26px; height:26px; line-height:26px; text-align:center;
  border-radius:50%; background:var(--accent); color:#fff;
  font-family:var(--serif); font-size:.82rem;
}

/* --- リマインダー：左にゴールドの線を引いた、そっと添える一言 --- */
.reminder{
  border-left:3px solid var(--accent);
  background:var(--bg-soft);
  padding:16px 20px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--ink-soft); font-size:.94rem; line-height:1.9;
  margin:28px 0;
}

/* --- 結び：明朝で、ゆっくり余韻を残して閉じる --- */
.closing{
  font-family:var(--serif); font-weight:400;
  text-align:center; font-size:1.05rem; line-height:2.1;
  color:var(--ink); letter-spacing:.05em;
  margin:40px auto 8px; max-width:26em;
}

/* ============================================================
   投稿フォーム
   ============================================================ */

.post{margin-top:8px}
.post-guide{
  text-align:center; color:var(--ink-soft); font-size:.92rem;
  line-height:1.95; margin:0 auto 22px; max-width:30em;
}

.form{display:flex; flex-direction:column; gap:18px; text-align:left}
.form label{
  display:flex; flex-direction:column; gap:7px;
  font-size:.88rem; font-weight:500; color:var(--ink);
  letter-spacing:.03em;
}
.form input[type=text],
.form input[type=password],
.form textarea{
  font:inherit; font-size:1rem;
  padding:13px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fffefb; color:var(--ink); width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form input[type=text]:focus,
.form input[type=password]:focus,
.form textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(169,139,93,.14);   /* やわらかいゴールドのフォーカスリング */
}
.form textarea{resize:vertical; line-height:1.8; min-height:110px}
.form input[type=file]{
  font-size:.86rem; color:var(--ink-soft);
  padding:10px 0;
}
.form input[type=file]::file-selector-button{
  font:inherit; font-size:.84rem; cursor:pointer;
  margin-right:12px; padding:8px 16px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--bg-soft); color:var(--ink);
  transition:border-color .2s ease;
}
.form input[type=file]::file-selector-button:hover{border-color:var(--accent)}
.form .hint{font-weight:400; font-size:.76rem; color:var(--muted); letter-spacing:0}

/* --- ボタン：丸みのある、押したくなる静かなボタン --- */
.btn{
  font:inherit; font-size:.95rem; cursor:pointer;
  border:1px solid var(--line); border-radius:999px;
  padding:13px 28px; font-weight:500; letter-spacing:.06em;
  background:var(--bg-soft); color:var(--ink);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:var(--accent); color:#fff; border-color:var(--accent);
  align-self:flex-start; padding-inline:36px;
}
.btn.primary:hover{background:var(--accent-dark); border-color:var(--accent-dark)}
.btn.danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn.danger:hover{background:#94463f}
.btn.small{padding:7px 16px; font-size:.8rem}
.inline{display:inline}

/* ============================================================
   コメント（みんなの手放し）
   ============================================================ */

.comments{margin-top:40px}
.comment{padding:22px 24px}
.comment-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-bottom:4px;
}
.comment .nick{
  font-family:var(--serif); font-weight:500; font-size:1.02rem; color:var(--ink);
  letter-spacing:.03em;
}
.comment .time{font-size:.76rem; color:var(--muted)}
.comment .photo{
  /* 高さを300pxに固定。縦長・横長どちらも切り取らず全体を枠内に収める（contain）。
     containなので余白が出る部分は、やわらかい生成り色で額縁のように見せる */
  width:100%; height:300px; object-fit:contain;
  background:var(--bg-soft);
  border-radius:var(--radius-sm); margin:14px 0 4px; display:block;
}
.comment .body{
  white-space:pre-wrap; word-break:break-word;
  margin:8px 0 0; line-height:1.95; color:var(--ink-soft); font-size:.97rem;
}

/* --- 本人削除：普段はそっと畳んでおく控えめなUI --- */
.comment .del{margin-top:14px; border-top:1px solid var(--line-soft); padding-top:10px}
.comment .del > summary{
  cursor:pointer; list-style:none; display:inline-block;
  font-size:.76rem; color:var(--muted); letter-spacing:.04em;
}
.comment .del > summary::-webkit-details-marker{display:none}
.comment .del > summary:hover{color:var(--danger)}
.comment .del[open] > summary{margin-bottom:10px; color:var(--ink-soft)}
.comment .del-note{font-size:.78rem; color:var(--muted); line-height:1.8; margin:0 0 10px}
.comment .del-form{display:flex; flex-direction:column; gap:8px}
.comment .del-form input{
  font:inherit; font-size:.9rem; padding:9px 11px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fffefb; color:var(--ink); width:100%;
}
.comment .del-form .btn{align-self:flex-start}

/* ============================================================
   ゲート / ログイン
   ============================================================ */

.gate{max-width:440px; margin:48px auto; text-align:center}
.gate h1{
  font-family:var(--serif); font-weight:500;
  font-size:1.6rem; letter-spacing:.1em; margin-bottom:.6em;
}
.gate .muted{font-size:.9rem; line-height:1.95; margin-bottom:1.8em; display:block}
.gate strong{color:var(--accent-dark); font-weight:500}
.gate .form{margin-top:24px; text-align:center}
.gate .form label{align-items:center}
.gate .form .btn.primary{align-self:center}

/* ============================================================
   管理画面
   ============================================================ */

.admin-head{display:flex; justify-content:space-between; align-items:center; gap:16px}
.admin-head h1{margin:0}

/* テーブルは横スクロールできるラッパで包めないため（HTML変更不可）、
   table自身を block 化してスマホで横スクロール可能にする */
.admin-table{
  width:100%; border-collapse:collapse;
  font-size:.86rem; margin-top:18px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.admin-table th,.admin-table td{
  border-bottom:1px solid var(--line-soft);
  padding:12px 12px; text-align:left; vertical-align:top;
}
.admin-table thead th{
  color:var(--muted); font-weight:500; font-size:.74rem;
  letter-spacing:.08em; background:var(--bg-soft);
}
.admin-table tbody tr:last-child td{border-bottom:none}
.admin-table tbody tr:hover{background:var(--bg-soft)}
.admin-table .realname{font-weight:700; color:var(--ink)}
.admin-table .cell-body{white-space:pre-wrap; word-break:break-word; min-width:180px; color:var(--ink-soft)}
.admin-table .thumb{
  width:64px; height:64px; object-fit:cover; border-radius:var(--radius-sm);
}
.nowrap{white-space:nowrap; color:var(--muted)}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* --- スマホ（〜600px）：管理テーブルを横スクロール可能に --- */
@media (max-width:600px){
  .admin-table{
    display:block; width:100%;
    overflow-x:auto;                 /* はみ出した列は横スクロールで見せる */
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;              /* セル内改行を抑え、列幅を保ったままスクロール */
    border-radius:var(--radius-sm);
  }
  .admin-table thead,
  .admin-table tbody,
  .admin-table tr{display:table; width:100%; table-layout:fixed}
  .admin-table .cell-body{
    white-space:normal;              /* 本文だけは折り返して読めるように */
    min-width:0;
  }
  /* スクロール可能であることを示すヒント */
  .admin-head + .muted::after{
    content:" ／ 表は横にスクロールできます"; color:var(--muted);
  }
}

/* --- タブレット以上（601px〜）：ゆとりを足す --- */
@media (min-width:601px){
  .container{padding:44px 24px 100px}
  .hero{padding-top:56px}
  .hero-title{font-size:2.3rem}
  .lesson-theme{font-size:1.9rem}
}

/* --- 広い画面（margin の最適化） --- */
@media (min-width:760px){
  .hero-title{font-size:2.5rem}
}

/* --- ごく狭い端末（〜360px）の微調整 --- */
@media (max-width:360px){
  .container{padding:24px 16px 72px}
  .hero-title{font-size:1.7rem}
  .lesson-theme{font-size:1.5rem}
  .question-text{font-size:1.15rem}
  .howto-steps li{padding-left:58px}
}

/* --- 動きを減らす設定の人への配慮 --- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
  .day-card:hover,.btn:hover{transform:none}
}