/* =========================================================
 * 成分解析ブログ 2026-11 デザイン見直し（試作）
 * 子テーマ alice-cosmekaiseki 1.8.0〜（試作は themes/alice-cosmekaiseki-design-mock-2026-11/）
 * 色: cream #FBF6F0 / paper #FFFCF8 / cocoa #4A3B38 / soft #6B5A55
 *     mocha #B8A38E / line #E6D9CC / plum #8E5A60 / pink #F4E3E5 / sage #9CB3A5
 * ========================================================= */
:root{ --ck-paper:#FFFCF8; --ck-soft:#6B5A55; --ck-muted:#9c8f88; --ck-mocha:#B8A38E; --ck-line:#E6D9CC; --ck-plum:#8E5A60; --ck-pink:#F4E3E5; --ck-pink2:#F8EDEC; --ck-sage:#9CB3A5; --ck-sage2:#5F7D6B; --ck-cocoa:#4A3B38; }
.ck-num{ font-family:'Jost',var(--font-body,sans-serif); font-variant-numeric:tabular-nums; }
.ck-en{ font:italic 400 14px 'Cormorant Garamond',serif; color:var(--ck-mocha); letter-spacing:.02em; }

/* ---------- A1 記事の頭：更新日・書いた人・出典 ---------- */
.single .entry-header .entry-meta{ display:none; }
.ck-byline{ display:flex; flex-wrap:wrap; gap:4px 18px; font-size:12.5px; line-height:1.7; color:var(--ck-soft); border-top:1px solid var(--ck-line); border-bottom:1px solid var(--ck-line); padding:8px 0; margin:14px 0 18px; }
.ck-byline b{ color:var(--ck-cocoa); font-weight:500; }
.ck-byline a{ color:inherit; }

/* ---------- A2 冒頭まとめカード＋特徴タグ ---------- */

/* ---------- A3 目次：PCは右列で追従／スマホは閉じた目次＋下のバー ---------- */
.ck-toc-side{ position:sticky; top:84px; }
@media (max-width:860px){ .ck-toc-side{ display:none; } }
.ck-toc-side .toc{ background:none; border:0; border-left:1px solid var(--ck-line); border-radius:0; padding:0 0 0 2px; margin:0; max-height:calc(100vh - 150px); overflow:auto; }
.ck-toc-side .toc-title{ display:none; }
.ck-toc-side .toc-list li{ margin:0; font-size:12.5px; line-height:1.55; }
.ck-toc-side .toc-list a{ display:block; padding:5px 0 5px 12px; border:0; border-left:2px solid transparent; margin-left:-2px; color:var(--ck-soft); }
.ck-toc-side .toc-list .toc-lv3 a{ padding-left:24px; font-size:12px; }
.ck-toc-side .toc-list a.is-current{ border-left-color:var(--ck-plum); color:var(--ck-plum); font-weight:500; }
@media (min-width:861px){
  .entry-content > .toc, .entry-content > details.ck-toc-inline{ display:none; }
}
details.ck-toc-inline{ border:1px solid var(--ck-line); border-radius:6px; background:var(--ck-paper); margin:0 0 28px; }
details.ck-toc-inline > summary{ cursor:pointer; list-style:none; padding:11px 16px; font:600 14px var(--heading-font,'Shippori Mincho',serif); display:flex; justify-content:space-between; }
details.ck-toc-inline > summary::-webkit-details-marker{ display:none; }
details.ck-toc-inline > summary::after{ content:'ひらく ▾'; font:400 12px var(--font-body,sans-serif); color:var(--ck-plum); }
details.ck-toc-inline[open] > summary::after{ content:'とじる ▴'; }
details.ck-toc-inline .toc{ background:none; border:0; margin:0; padding:0 16px 12px; }
details.ck-toc-inline .toc-title{ display:none; }
.ck-spbar{ display:none; }
@media (max-width:860px){
  .ck-spbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,252,248,.97); border-top:1px solid var(--ck-line); box-shadow:0 -2px 10px rgba(74,59,56,.06); padding:4px 0 calc(4px + env(safe-area-inset-bottom)); }
  .ck-spbar a, .ck-spbar button{ flex:1; background:none; border:0; font:500 12px var(--font-body,sans-serif); color:var(--ck-cocoa); text-decoration:none; padding:8px 0; text-align:center; cursor:pointer; }
  .ck-spbar > * + *{ border-left:1px solid var(--ck-line) !important; }
  body.single{ padding-bottom:52px; }
  .ck-sheet{ position:fixed; inset:auto 0 0 0; z-index:70; max-height:72vh; overflow:auto; background:var(--ck-paper); border-radius:14px 14px 0 0; box-shadow:0 -6px 24px rgba(74,59,56,.18); padding:14px 18px 70px; transform:translateY(105%); transition:transform .25s; }
  .ck-sheet.is-open{ transform:none; }
  .ck-sheet .toc{ background:none; border:0; padding:0; margin:0; }
  .ck-sheet .toc-title{ display:none; }
  .ck-sheet .ck-sheet-ttl{ font:600 15px var(--heading-font,'Shippori Mincho',serif); margin-bottom:6px; display:flex; justify-content:space-between; }
}

/* ---------- A4 全成分の「ざっと見る表」 ---------- */
.ck-zen{ margin:0 0 8px; }
.ck-zen table{ width:100%; border-collapse:collapse; font-size:13.5px; background:var(--ck-paper); border:0 !important; }
.ck-zen th{ background:none !important; font-weight:500; font-size:11.5px; color:var(--ck-muted); text-align:left; border:0 !important; border-bottom:1px solid var(--ck-mocha) !important; padding:6px 8px !important; }
.ck-zen td{ border:0 !important; border-bottom:1px solid var(--ck-line) !important; padding:8px !important; vertical-align:top; line-height:1.6; background:none !important; }
.ck-zen td:first-child{ font-weight:500; width:34%; }
.ck-zen td:nth-child(2){ width:20%; }
.ck-zen .ck-n{ font:400 11px 'Jost',sans-serif; color:var(--ck-muted); display:inline-block; min-width:1.8em; }
.ck-chip{ display:inline-block; font-size:11px; line-height:1.7; border-radius:999px; padding:0 8px; margin:1px 3px 1px 0; background:#F1ECE6; color:var(--ck-soft); white-space:nowrap; }
.ck-zen tr.is-more{ display:none; }
.ck-zen.is-open tr.is-more{ display:table-row; }
.ck-zen-more{ display:block; width:100%; background:none; border:0; border-bottom:1px solid var(--ck-line); padding:10px; font:500 13px var(--font-body,sans-serif); color:var(--ck-plum); cursor:pointer; }
.ck-zen.is-open .ck-zen-more{ display:none; }
@media (max-width:600px){
  .ck-zen table, .ck-zen tbody, .ck-zen tr, .ck-zen td{ display:block; width:auto !important; }
  .ck-zen thead{ display:none; }
  .ck-zen tr{ border-bottom:1px solid var(--ck-line); padding:8px 2px; }
  .ck-zen.is-open tr.is-more{ display:block; }
  .ck-zen td{ border:0 !important; padding:1px 0 !important; }
  .ck-zen td:nth-child(3){ font-size:12.5px; color:var(--ck-soft); }
}

/* ---------- A5 注目成分を「成分ごとの段」に ---------- */
.entry-content h3 .ck-h3-sub{ display:block; font:400 12.5px/1.6 var(--font-body,sans-serif); color:var(--ck-soft); letter-spacing:.02em; margin-top:2px; }
.entry-content > ul.ck-ing-list{ list-style:none; padding:0; margin:12px 0 22px; border-top:1px solid var(--ck-line); }
.entry-content > ul.ck-ing-list > li{ padding:10px 2px 10px 0; margin:0; border-bottom:1px solid var(--ck-line); font-size:14px; line-height:1.75; color:var(--ck-cocoa); }
.entry-content > ul.ck-ing-list > li::before{ display:none; }
.entry-content > ul.ck-ing-list > li > strong:first-child{ display:block; font:600 15.5px/1.5 var(--heading-font,'Shippori Mincho',serif); color:var(--ck-cocoa); background:none; margin-bottom:1px; }

.entry-content > ul.ck-ing-list .ck-colon{ display:none; }
.ck-sheet [data-ck=close]{ background:none; border:0; color:var(--ck-plum); font-size:13px; cursor:pointer; }

/* ---------- A6 研究の箱と出典の番号 ---------- */
sup.ck-ref{ font:500 10.5px 'Jost',sans-serif; vertical-align:super; line-height:0; margin-left:1px; }
sup.ck-ref a{ color:var(--ck-plum); text-decoration:none; }
.ck-research{ border-left:3px solid var(--ck-sage) !important; background:#F4F6F2 !important; border-radius:0 4px 4px 0 !important; }
.ck-sources{ margin:36px 0 8px; padding-top:14px; border-top:1px solid var(--ck-line); }
.ck-sources-ttl{ font:600 15px var(--heading-font,'Shippori Mincho',serif); margin:0 0 6px; }
.ck-sources ol{ margin:0; padding-left:1.8em; }
.ck-sources li{ font-size:12px; line-height:1.7; color:var(--ck-soft); margin:0 0 6px; word-break:break-all; }
.ck-sources li small{ font-size:inherit; }
.ck-sources li:target{ background:var(--ck-pink2); }
.ck-sources a{ color:var(--ck-soft); }

/* ---------- A7 読み終わりの道 ---------- */
.ck-learn{ margin:36px 0 8px; padding:18px 20px; background:var(--ck-paper); border:1px solid var(--ck-line); border-radius:6px; }
.ck-learn-ttl{ font:600 16px var(--heading-font,'Shippori Mincho',serif); margin:0 0 10px; }
.ck-learn ul{ list-style:none; margin:0; padding:0; }
.ck-learn li{ border-top:1px dashed var(--ck-line); }
.ck-learn li a{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; text-decoration:none; color:var(--ck-cocoa); font-size:14px; }
.ck-learn li a::after{ content:'→'; color:var(--ck-plum); }
.ck-learn .ck-learn-hit{ font-size:11.5px; color:var(--ck-muted); margin-left:8px; }
.single .related h2{ font-size:18px; }
.single .related .card-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:600px){ .single .related .card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }

/* =========================================================
 * トップページ（T1〜T6）
 * ========================================================= */
.ck-top{ max-width:1120px; margin:0 auto; padding:0 32px 64px; }
.ck-top-hero{ text-align:center; padding:40px 0 18px; }
.ck-top-hero h1{ font:600 30px/1.5 'Shippori Mincho',serif; letter-spacing:.06em; margin:2px 0 6px; color:var(--ck-cocoa); }
.ck-top-hero p{ font-size:13px; color:var(--ck-soft); margin:0; }
.ck-sec{ margin:48px 0 0; }
.ck-sec-head{ display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--ck-line); padding-bottom:8px; margin-bottom:18px; }
.ck-sec-head h2{ font:600 20px 'Shippori Mincho',serif; color:var(--ck-cocoa); margin:0; letter-spacing:.05em; }
.ck-sec-head .ck-more{ margin-left:auto; font-size:12.5px; color:var(--ck-plum); text-decoration:none; }
/* T1 検索 */
.ck-top-search{ max-width:760px; margin:0 auto; }
.ck-top-search #ck-search-wrap .ck-search-form{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
.ck-top-search .ck-keyword-row input{ height:52px !important; font-size:15px !important; border:1px solid var(--ck-mocha) !important; background:var(--ck-paper) !important; }
.ck-top-search .ck-keyword-row button{ height:52px !important; padding:0 28px !important; background:var(--ck-plum) !important; }
.ck-top-search .ck-concern-row{ justify-content:center; }
.ck-top-search .ck-concern-row .ck-section-label{ display:none; }
.ck-top-search .ck-concern-btns{ justify-content:center; }
.ck-more-filter{ margin:6px auto 0; text-align:center; }
.ck-more-filter > summary{ display:inline-block; cursor:pointer; list-style:none; font-size:12.5px; color:var(--ck-plum); border:1px dashed var(--ck-mocha); border-radius:999px; padding:3px 14px; }
.ck-more-filter > summary::-webkit-details-marker{ display:none; }
.ck-more-filter[open] > summary{ margin-bottom:10px; }
.ck-more-filter .ck-row{ justify-content:center; }
/* T2+T3 新着（3列）と人気（右列） */
.ck-top-2col{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; }
.ck-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px; }
.ck-tcard{ display:block; text-decoration:none; color:var(--ck-cocoa); }
.ck-tcard .ck-thumb{ display:block; aspect-ratio:1200/630; background:#F1ECE6 center/cover no-repeat; border-radius:3px; border:1px solid var(--ck-line); }
.ck-tcard .ck-cat{ display:block; font-size:11px; color:var(--ck-plum); margin-top:8px; }
.ck-tcard .ck-ttl{ display:block; font:600 14px/1.6 'Shippori Mincho',serif; margin-top:2px; }
.ck-tcard .ck-tdate{ display:block; font:400 11px 'Jost',sans-serif; color:var(--ck-muted); margin-top:4px; }
.ck-rank{ list-style:none; margin:0; padding:0; counter-reset:r; }
.ck-rank li{ border-bottom:1px solid var(--ck-line); }
.ck-rank a{ display:grid; grid-template-columns:24px 84px minmax(0,1fr); gap:10px; align-items:center; padding:10px 0; text-decoration:none; color:var(--ck-cocoa); }
.ck-rank .ck-r{ font:500 20px 'Jost',sans-serif; color:var(--ck-mocha); text-align:center; }
.ck-rank .ck-thumb{ aspect-ratio:1200/630; background:#F1ECE6 center/cover no-repeat; border-radius:2px; }
.ck-rank .ck-ttl{ font:600 13px/1.55 'Shippori Mincho',serif; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* T6 比較の帯 */
.ck-feat{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ck-feat a{ display:grid; grid-template-columns:44% 1fr; gap:16px; align-items:center; background:var(--ck-paper); border:1px solid var(--ck-line); border-radius:4px; padding:12px; text-decoration:none; color:var(--ck-cocoa); }
.ck-feat .ck-thumb{ aspect-ratio:1200/630; background:#F1ECE6 center/cover no-repeat; border-radius:2px; }
.ck-feat .ck-ttl{ display:block; font:600 15px/1.6 'Shippori Mincho',serif; }
.ck-feat .ck-sub{ display:block; font-size:12px; color:var(--ck-soft); margin-top:4px; }
/* T4 アイテムから探す */
.ck-cats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--ck-line); border-left:1px solid var(--ck-line); }
.ck-cats a{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:12px 14px; border-right:1px solid var(--ck-line); border-bottom:1px solid var(--ck-line); background:var(--ck-paper); color:var(--ck-cocoa); text-decoration:none; font-size:14px; }
.ck-cats a:hover{ background:var(--ck-pink2); }
.ck-cats .ck-num{ font-size:12px; color:var(--ck-muted); }
/* T5 成分の勉強 */
.ck-study{ display:grid; grid-template-columns:1fr 1fr; gap:0 32px; list-style:none; margin:0; padding:0; counter-reset:s; }
.ck-study li{ border-bottom:1px dashed var(--ck-line); counter-increment:s; }
.ck-study a{ display:flex; gap:12px; padding:10px 0; text-decoration:none; color:var(--ck-cocoa); font-size:14px; line-height:1.6; }
.ck-study a::before{ content:counter(s, decimal-leading-zero); font:500 13px/1.9 'Jost',sans-serif; color:var(--ck-mocha); }
/* プロフィール・姉妹サイト（中身は今のまま・幅だけ揃える） */
.ck-top-foot{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:56px; }
.ck-top-foot > a, .ck-top-foot > div{ display:block; background:var(--ck-paper); border:1px solid var(--ck-line); border-radius:6px; padding:20px 22px; text-decoration:none; color:var(--ck-cocoa); }
.ck-top-foot .ck-ttl{ font:600 16px 'Shippori Mincho',serif; display:block; }
.ck-top-foot p, .ck-top-foot .ck-sub{ font-size:12.5px; color:var(--ck-soft); margin:4px 0 0; display:block; }
.ck-ig{ display:inline-block; margin-top:10px; background:var(--ck-plum); color:#fff !important; border-radius:999px; padding:6px 18px; font-size:12.5px; text-decoration:none; }
@media (max-width:900px){
  .ck-top{ padding:0 16px 48px; }
  .ck-top-hero{ padding:26px 0 12px; }
  .ck-top-hero h1{ font-size:23px; }
  .ck-top-2col{ grid-template-columns:1fr; gap:0; }
  .ck-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  .ck-tcard .ck-ttl{ font-size:13px; }
  .ck-cats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ck-cats a{ font-size:13px; padding:11px 12px; }
  .ck-study{ grid-template-columns:1fr; }
  .ck-feat{ grid-template-columns:1fr; }
  .ck-top-foot{ grid-template-columns:1fr; }
  .ck-sec{ margin-top:38px; }
  .ck-top-search .ck-keyword-row input, .ck-top-search .ck-keyword-row button{ height:46px !important; }
}

/* =========================================================
 * カテゴリページ（C1）
 * ========================================================= */
.ck-arch-head{ margin:0 0 14px; }
.ck-arch-head h1{ font:600 24px/1.5 'Shippori Mincho',serif; margin:0; }
.ck-arch-head h1 .ck-num{ font-size:14px; color:var(--ck-muted); font-weight:400; margin-left:8px; }
.ck-arch-desc, .ck-arch-desc p{ font-size:13.5px; color:var(--ck-soft); margin:6px 0 0; line-height:1.8; }
.ck-sort{ display:flex; gap:8px; margin:12px 0 4px; }
.ck-sort a{ font-size:12.5px; border:1px solid var(--ck-line); border-radius:999px; padding:2px 14px; background:#fff; color:var(--ck-soft); text-decoration:none; }
.ck-sort a.is-on{ background:var(--ck-plum); border-color:var(--ck-plum); color:#fff; }
.ck-rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ck-line); }
.ck-rows li{ border-bottom:1px solid var(--ck-line); }
.ck-rows a{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:18px; padding:14px 0; text-decoration:none; color:var(--ck-cocoa); }
.ck-rows .ck-thumb{ aspect-ratio:1200/630; background:#F1ECE6 center/cover no-repeat; border-radius:3px; border:1px solid var(--ck-line); }
.ck-rows .ck-ttl{ display:block; font:600 15.5px/1.6 'Shippori Mincho',serif; }
.ck-rows .ck-exc{ display:block; font-size:12.5px; line-height:1.7; color:var(--ck-soft); margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ck-rows .ck-tdate{ display:block; font:400 11px 'Jost',sans-serif; color:var(--ck-muted); margin-top:4px; }
@media (max-width:600px){
  .ck-arch-head h1{ font-size:20px; }
  .ck-rows a{ grid-template-columns:120px minmax(0,1fr); gap:12px; padding:12px 0; }
  .ck-rows .ck-ttl{ font-size:13.5px; }
  .ck-rows .ck-exc{ display:none; }
}