/* コラム記事詳細 /archives/<ID>（build.py post_page()、設計書 docs/article-template.md）。記事ページだけが読み込む。
   値は common.css の :root トークンを使う。無い値だけ下の --post-* に置く。角丸 0・影なし・1px 罫線 */
:root{
  --post-w:900px;          /* 本文幅（.col-body と同じ） */
  --post-face:72px;        /* 監修医師の顔写真 */
  --post-face-sp:56px;
  --post-table-min:560px;  /* 3 列以上の表の最小幅（狭い画面は横スクロール）。1〜2 列の表は min-width:0 で折り返す */
}

/* 外枠: ヘッダーは固定なので、ヒーローの無い記事ページはパンくずをヘッダーの下から始める */
.post-crumb{padding-top:var(--header-h)}
.post{padding:var(--sp-24) 0 var(--sp-110)}
.post-body{max-width:var(--post-w)}

/* 記事ヘッダー */
.post-head{padding-bottom:var(--sp-24);border-bottom:1px solid var(--b);margin-bottom:var(--sp-32)}
.post-cat{margin-bottom:var(--sp-16)}
.post-cat a{display:inline-block;padding:var(--sp-4) var(--sp-14);border:1px solid var(--b);font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-10);line-height:var(--lh-180)}
.post-cat a:hover{opacity:1;background:var(--b);color:var(--w)}
.post-title{font-weight:700;font-size:var(--fs-fluid-5);letter-spacing:var(--ls-6);line-height:var(--lh-160)}
.post-meta{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-20);margin-top:var(--sp-18);font-size:var(--fs-12);letter-spacing:var(--ls-8);color:var(--b-60)}

/* アイキャッチ */
.post-eyecatch{margin:0 0 var(--sp-32)}
.post-eyecatch img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}  /* 第 6 波 M10: 元の縦横比（4:3 前後で大きすぎた）を 16:9 の中央切り抜きに */
/* 本文の img は width/height 属性があっても縦横比どおりに縮める（h4 の中の写真など。WF-B-15、U-03）。
   :where() で詳細度 0,0,1 にして、後ろの .post-supervisor img（固定の顔写真 72/56px）に負けるようにする */
:where(.post-body) img{height:auto}

/* 監修ブロック */
.post-supervisor{display:flex;align-items:center;gap:var(--sp-20);padding:var(--sp-18) var(--sp-20);border:1px solid var(--b-15);margin-bottom:var(--sp-8)}
.post-supervisor img{flex:0 0 var(--post-face);width:var(--post-face);height:var(--post-face);object-fit:cover}
.post-supervisor-label{font-size:var(--fs-11);font-weight:700;letter-spacing:var(--ls-24)}
.post-supervisor-name{font-size:var(--fs-15);font-weight:700;letter-spacing:var(--ls-10)}
.post-supervisor-name span{margin-right:var(--sp-10);font-size:var(--fs-12);font-weight:400;color:var(--b-60)}
/* 第 3 波: 資格・経歴・医師の紹介へのリンク（施術情報ボックス .post-treatment dl と同じ 2 列、文字は .post-meta と同じ 12px・b-60） */
.post-supervisor-data{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-4) var(--sp-14);margin-top:var(--sp-8);font-size:var(--fs-12);line-height:var(--lh-190);color:var(--b-60)}
.post-supervisor-data dt{font-weight:700}
.post-supervisor-link{margin-top:var(--sp-8);font-size:var(--fs-12);font-weight:600;letter-spacing:var(--ls-8)}
.post-supervisor-link a{text-decoration:underline;text-underline-offset:3px}

/* 目次: 1 列・入れ子 2 段・番号なし（.col-toc の 2 列グリッドと連番を打ち消す） */
.post-toc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;margin-bottom:0}
.post-toc summary::-webkit-details-marker{display:none}
.post-toc summary::after{content:"+";font-weight:400;font-size:var(--fs-18);line-height:1}
.post-toc details[open] summary{margin-bottom:var(--sp-12)}
.post-toc details[open] summary::after{content:"\2212"}
.post-toc ol{display:block;counter-reset:none}
.post-toc li{counter-increment:none}
.post-toc li a::before{content:none}
.post-toc ol ol{padding-left:var(--sp-20)}
.post-toc ol ol li{font-size:var(--fs-13)}
.post-toc ol ol li a{border-bottom-style:dotted}

/* 本文 */
.post-body .col-h3{scroll-margin-top:calc(var(--header-h) + var(--sp-16))}
.post-body .col-h2{scroll-margin-top:calc(var(--header-h) + var(--sp-16))}
.post-h4{font-weight:700;font-size:var(--fs-15);letter-spacing:var(--ls-6);margin:var(--sp-24) 0 var(--sp-10);padding-left:var(--sp-12);border-left:1px solid var(--b);scroll-margin-top:calc(var(--header-h) + var(--sp-16))}
.post-body .col-p a,.post-list a,.post-table a,.post-quote a,.post-note a,.post-treatment a,.post-related-list a{text-decoration:underline;text-underline-offset:3px}
.post-body .col-p img{height:auto}
.post-list{margin:0 0 var(--sp-20) var(--sp-24);line-height:var(--lh-190)}
ul.post-list{list-style:disc}
ol.post-list{list-style:decimal}
.post-list li{margin-bottom:var(--sp-6)}
.post-body .col-fig img{height:auto}
.post-body .col-fig figcaption{margin-top:var(--sp-8);font-size:var(--fs-12);color:var(--b-60);text-align:center}
/* 本文の埋め込み（地図など）を本文幅に収める。width/height 属性は 4:3 の前提（check-html embed）。WF-B-03・WF-A-15、U-03 */
.post-body iframe{max-width:100%;height:auto;aspect-ratio:4/3}
.post-body hr{border:0;border-top:1px solid var(--b-15);margin:var(--sp-40) 0}

/* 表: 3 列以上は最小幅 560px で横スクロール、1〜2 列は本文幅で折り返す（WF-B-19 の前半、U-03。:has() 非対応のブラウザは従来どおり横スクロール） */
.ptable-wrap{overflow-x:auto;margin:0 0 var(--sp-24)}
.post-table{width:100%;min-width:var(--post-table-min);border-collapse:collapse;font-size:var(--fs-13);line-height:var(--lh-170)}
.post-table th,.post-table td{border:1px solid var(--b);padding:var(--sp-10) var(--sp-14);text-align:left;vertical-align:top}
.post-table th{background:var(--b-05);font-weight:700}
.post-table ul,.post-table ol{margin-left:var(--sp-20);list-style:disc}
.post-table:not(:has(tr > :nth-child(3))){min-width:0}
.post-table:not(:has(tr > :nth-child(3))) a{overflow-wrap:anywhere}  /* 長い URL のリンクを途中で折る（word-break:break-all は使わない） */

/* 引用 */
.post-quote{margin:0 0 var(--sp-24);padding:var(--sp-18) var(--sp-24);border-left:1px solid var(--b);background:var(--b-05);font-size:var(--fs-13)}
.post-quote > * + *{margin-top:var(--sp-10)}
.post-quote h5{font-size:var(--fs-14);font-weight:700}

/* 注意ボックス（旧 ep-box 赤枠） */
.post-note{margin:0 0 var(--sp-24);padding:var(--sp-18) var(--sp-22);border:1px solid var(--b);font-size:var(--fs-13);line-height:var(--lh-190)}
.post-note-label{display:inline-block;margin-bottom:var(--sp-8);padding:0 var(--sp-10);background:var(--b);color:var(--w);font-size:var(--fs-11);font-weight:700;letter-spacing:var(--ls-24)}

/* 施術情報ボックス（施術名・内容・副作用・リスク） */
.post-treatment{margin:0 0 var(--sp-24);padding:var(--sp-18) var(--sp-22);border:1px solid var(--b-15);background:var(--b-05);font-size:var(--fs-13);line-height:var(--lh-190)}
.post-treatment dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-6) var(--sp-18)}
.post-treatment dt{font-weight:700}
.post-treatment .col-fig{margin-bottom:var(--sp-14)}
.post-treatment .col-fig img{height:auto}
.post-treatment-note{margin-top:var(--sp-8);font-size:var(--fs-12);color:var(--b-60)}

/* 本文中の記事カード（sitecard）: 抜粋を足す */
.post-cards p{padding:0 var(--sp-16) var(--sp-18);font-size:var(--fs-12);line-height:var(--lh-190);color:var(--b-60);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* 記事末: 関連記事・アートメイクメニュー */
.post-related{padding:var(--sp-90) 0;border-top:1px solid var(--b-15)}
.post-related-list{max-width:var(--post-w);margin:0 auto;border-top:1px solid var(--b)}
.post-related-list li{border-bottom:1px solid var(--b)}
.post-related-list a{display:block;padding:var(--sp-16) var(--sp-4);font-size:var(--fs-14);font-weight:600;letter-spacing:var(--ls-4);text-decoration:none}
.post-related-list a::after{content:" →"}
.post-related-list a:hover{opacity:1;background:var(--b);color:var(--w)}
.post-menu{padding:var(--sp-90) 0}
.post-menu-list{grid-template-columns:repeat(4,1fr);margin:0}
.post-menu-list .sub{display:block;padding:0 var(--sp-16) var(--sp-18);font-size:var(--fs-12);color:var(--b-60)}
.post-menu-list .tt{padding-bottom:var(--sp-4)}
/* 第 5 波（修正点 No.4・6）: 記事末メニューの価格（sub）を出さないので、カード名の下の余白を .col-cards .tt の既定に戻し、/price への案内を 1 行置く */
.post-menu-list .tt:last-child{padding-bottom:var(--sp-18)}
.post-menu-price{margin-top:var(--sp-20);text-align:center;font-size:var(--fs-14)}
.post-menu-price a{text-decoration:underline;text-underline-offset:3px}
/* 第 5 波: 記事の当院ブロック（build.py TOUIN_BLOCK が True のときだけ出る。見た目は施術情報ボックス .post-treatment に合わせる） */
.post-touin{margin:var(--sp-40) 0 0;padding:var(--sp-18) var(--sp-22);border:1px solid var(--b-15);background:var(--b-05);font-size:var(--fs-13);line-height:var(--lh-190)}
.post-touin-lead{margin-bottom:var(--sp-8);font-weight:700}
.post-touin-list{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-6) var(--sp-18)}
.post-touin-list dt{font-weight:700}
.post-touin-list a{text-decoration:underline;text-underline-offset:3px}

@media (max-width:1100px){
  .post-menu-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .post{padding:var(--sp-14) 0 var(--sp-76)}
  .post-head{margin-bottom:var(--sp-24)}
  .post-eyecatch{margin-bottom:var(--sp-24)}
  .post-supervisor{padding:var(--sp-14)}
  .post-supervisor img{flex-basis:var(--post-face-sp);width:var(--post-face-sp);height:var(--post-face-sp)}
  .post-treatment dl{grid-template-columns:1fr;gap:0}
  .post-treatment dd{margin-bottom:var(--sp-8)}
  .post-related,.post-menu{padding:var(--sp-60) 0}
  .post-menu-list{grid-template-columns:1fr}
  .post-menu-list a{grid-template-rows:auto auto;align-content:center}
  .post-menu-list .th{grid-row:1 / 3}
  .post-menu-list .tt{align-self:end;padding:var(--sp-10) var(--sp-14) 0}
  .post-menu-list .sub{align-self:start;padding:0 var(--sp-14) var(--sp-10)}
  .post-menu-list .tt:last-child{grid-row:1 / 3;align-self:center;padding:var(--sp-10) var(--sp-14)}
  .post-touin-list{grid-template-columns:1fr;gap:0}
  .post-touin-list dd{margin-bottom:var(--sp-8)}
  .post-cards p{display:none}
}