@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（するめらぼ WP-D2.1：Pastel Modern × Creative Magazine 統合版）
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.2.1-d2.1
*/

/* =====================================================================
   するめらぼ — Pastel Modern x Creative Magazine
   構成:  0 tokens / 1 base / 2 header+logo / 3 hero / 4 home sections / 5 cards+lists
          6 article / 7 legacy decoration (.surume-post, 旧カスタムCSSの置き換え)
          8 Cocoon standard boxes / 9 widgets+footer / 10 responsive
   色は全て 0 の変数。本文HTMLは一切変更しない（CSSのみ）。Pochipp 内部は触らない。
   旧「追加CSS」(カスタマイザー) の内容は本ファイルの 7 に整理して移した。本番反映時は追加CSSを空にする。
   ===================================================================== */

/* ---------- 0. tokens ---------- */
:root {
  /* brand */
  --sl-lav-50:  #f8f5ff;
  --sl-lav-100: #efe9ff;
  --sl-lav-200: #e0d6fc;
  --sl-lav-300: #c9b8fa;
  --sl-lav-500: #8d79f0;   /* main */
  --sl-lav-600: #6f5bd6;   /* links / strong accents (AA on white) */
  --sl-lav-700: #5846b8;
  --sl-pink-100: #ffe8f2;
  --sl-pink-300: #ffc2d9;
  --sl-pink-500: #ff7fae;
  --sl-pink-700: #c0356f;  /* text-safe pink */
  --sl-cyan-100: #def7fb;
  --sl-cyan-300: #a6e3ef;
  --sl-cyan-500: #2fb3cf;
  --sl-cyan-700: #0d7a91;  /* text-safe cyan */
  /* neutrals */
  --sl-bg:      #fbf9ff;
  --sl-surface: #ffffff;
  --sl-ink:     #2f2c3b;   /* body: dark gray (slightly violet) */
  --sl-ink-2:   #4a4660;
  --sl-muted:   #67627f;
  --sl-line:    #e8e2f6;
  /* semantic (meaning-bearing colours stay non-purple on purpose) */
  --sl-warn-bg: #fff3ee;  --sl-warn-line: #e4765a;  --sl-warn-ink: #a8391e;
  --sl-ok-bg:   #e8f8fb;  --sl-ok-line:   #2fb3cf;  --sl-ok-ink:   #0d6d82;
  --sl-err-bg:  #fdecee;  --sl-err-line:  #d9455f;  --sl-err-ink:  #a3213b;
  /* shape + depth */
  --sl-r-lg: 22px; --sl-r-md: 14px; --sl-r-sm: 10px;
  --sl-shadow:    0 10px 32px rgba(111, 91, 214, .12);
  --sl-shadow-sm: 0 3px 14px rgba(111, 91, 214, .10);
  --sl-grad: linear-gradient(135deg, #efe8ff 0%, #ffe6f1 55%, #dcf7fb 100%);
  --sl-grad-text: linear-gradient(100deg, var(--sl-lav-600) 0%, #c0529a 55%, var(--sl-cyan-700) 100%);
  /* type */
  --sl-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  --sl-font-round: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
  --sl-measure: 46rem;
}

/* ---------- 1. base ---------- */
body { background: var(--sl-bg); color: var(--sl-ink); font-family: var(--sl-font); }
body.custom-background { background-image: none; }
a { color: var(--sl-lav-600); }
a:hover { color: var(--sl-pink-700); }
.content-in { max-width: 1240px; }
:focus-visible { outline: 3px solid var(--sl-cyan-500); outline-offset: 2px; }
::selection { background: var(--sl-lav-200); }
.skip-link:focus { background: var(--sl-surface); color: var(--sl-ink); }

/* ---------- 2. header + logo (text logo; site name / tagline come from Settings > General) ---------- */
.header-container, .header-container-in { background: rgba(255, 255, 255, .94); }
.header-container { box-shadow: 0 4px 22px rgba(111, 91, 214, .08); border-bottom: 1px solid var(--sl-line); }
.header-in { padding-top: 12px; padding-bottom: 8px; }
.tagline { color: var(--sl-muted); font-size: .72rem; letter-spacing: .08em; }

.sl-logo { display: inline-flex; align-items: center; gap: 12px; line-height: 1.1; text-align: left; }
.sl-logo__mark {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: #fff url("images/surume-avatar.webp") center / cover no-repeat;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sl-lav-300);
}
.sl-logo__mark::after { content: "\266A"; position: absolute; right: -9px; top: -9px; font-size: 15px; line-height: 1; color: var(--sl-pink-500); }
.sl-logo__text { display: flex; flex-direction: column; gap: 3px; }
.sl-logo__ja {
  font-family: var(--sl-font-round); font-weight: 800; font-size: 1.7rem; letter-spacing: .06em; white-space: nowrap;
  color: var(--sl-lav-600); background: var(--sl-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sl-logo__en { font-size: .66rem; font-weight: 700; letter-spacing: .32em; color: var(--sl-muted); white-space: nowrap; }
.sl-logo__en::before { content: "\2726"; color: var(--sl-cyan-500); margin-right: .55em; letter-spacing: 0; }
.header-container-in .logo-header { text-align: center; margin: 0; padding: 4px 0; max-height: none; }
.header-container-in .logo-header a.site-name-text-link { display: inline-flex; padding: 4px 8px; text-decoration: none; color: var(--sl-ink); }
.header-container-in .logo-header a:hover { opacity: .9; }

#navi, #navi-in > ul { background: transparent; }
#navi { border-top: 1px solid var(--sl-line); }
.navi-in > ul { justify-content: center; flex-wrap: wrap; padding: 4px 0; }
.navi-in > ul > li > a { color: var(--sl-ink); font-weight: 700; font-size: .9rem; letter-spacing: .05em; border-radius: 999px; margin: 3px 4px; padding: 3px 16px; height: auto; line-height: 1.9; background: var(--sl-lav-100); }
.navi-in > ul > li:nth-child(3n+2) > a { background: var(--sl-pink-100); }
.navi-in > ul > li:nth-child(3n) > a { background: var(--sl-cyan-100); }
.navi-in > ul > li > a:hover { background: var(--sl-lav-500); color: #fff; }

/* ---------- 3. hero (Cocoon "appeal area"; copy is edited in Cocoon Settings > Appeal Area) ---------- */
.appeal {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1240px; margin: 28px auto 0; min-height: 340px;
  background: var(--sl-grad); border-radius: var(--sl-r-lg); box-shadow: var(--sl-shadow);
}
.appeal::before { /* soft dot grid + colour blobs */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 78% 30%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle, rgba(141, 121, 240, .16) 1.4px, transparent 1.6px) 0 0 / 22px 22px;
}
.appeal::after { /* character: official art (provisional cut-out). Anchored to the bottom; art has its own top margin so the head is never clipped */
  content: ""; position: absolute; z-index: 0; right: clamp(8px, 4vw, 64px); bottom: 0;
  width: clamp(300px, 40vw, 520px); aspect-ratio: 640 / 514;
  background: url("images/surume-hero-bust.webp") center bottom / contain no-repeat; pointer-events: none;
}
.appeal-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.appeal-content { text-align: left; margin: 0; padding: 52px 0 6px 52px; max-width: 54%; background: transparent; box-shadow: none; }
.appeal-title { text-wrap: balance; position: relative; color: var(--sl-ink); background: transparent; text-shadow: none; font-family: var(--sl-font-round); font-weight: 800; font-size: clamp(1.55rem, 3.1vw, 2.5rem); line-height: 1.4; letter-spacing: .03em; }
.appeal-title::before { content: "STUDIO SURUME  \00D7  SURUME LAB"; display: block; margin-bottom: 10px; font-family: var(--sl-font); font-size: .66rem; font-weight: 700; letter-spacing: .3em; color: var(--sl-lav-600); }
.appeal-message { background: transparent; color: var(--sl-ink-2); text-shadow: none; font-size: 1rem; line-height: 1.9; }
.appeal-button { display: inline-block; margin: 10px 0 0; border-radius: 999px; background: var(--sl-lav-600); color: #fff; padding: 10px 30px; border: 0; font-weight: 700; letter-spacing: .06em; box-shadow: 0 8px 20px rgba(111, 91, 214, .32); }
.appeal-button:hover { background: var(--sl-pink-700); color: #fff; }
.home-entrance { max-width: 54%; margin: 0 0 40px; padding: 0 0 0 52px; }
.home-entrance ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.home-entrance a { display: block; padding: 7px 18px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--sl-ink); text-decoration: none; font-weight: 700; font-size: .9rem; border: 1.5px solid var(--sl-lav-300); box-shadow: var(--sl-shadow-sm); }
.home-entrance li:nth-child(3n+2) a { border-color: var(--sl-pink-300); }
.home-entrance li:nth-child(3n) a { border-color: var(--sl-cyan-300); }
.home-entrance a:hover { background: var(--sl-lav-600); color: #fff; border-color: var(--sl-lav-600); }

/* ---------- 4. home sections (featured works / genres / profile band), printed by functions.php ---------- */
.sl-home { margin: 0 0 8px; }
.sl-section { margin: 44px 0 0; }
.sl-section:first-child { margin-top: 36px; }
.sl-section__head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--sl-ink); position: relative; }
.sl-section__head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 88px; height: 2px; background: var(--sl-grad-text); }
.sl-section__no { font-family: var(--sl-font-round); font-weight: 800; font-size: .85rem; letter-spacing: .12em; color: var(--sl-lav-600); }
.sl-section__title { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font-family: var(--sl-font-round); font-weight: 800; font-size: 1.35rem; letter-spacing: .04em; color: var(--sl-ink); }
.sl-section__en { font-size: .68rem; font-weight: 700; letter-spacing: .28em; color: var(--sl-muted); text-transform: uppercase; }
.sl-section__more { margin-left: auto; font-size: .84rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sl-section__more::after { content: " \2192"; }

/* card (shared by featured + genre sections) */
.sl-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--sl-surface); border-radius: var(--sl-r-md); box-shadow: var(--sl-shadow-sm); overflow: hidden; text-decoration: none; color: var(--sl-ink); transition: transform .18s ease, box-shadow .18s ease; }
.sl-card:hover { transform: translateY(-3px); box-shadow: var(--sl-shadow); color: var(--sl-ink); }
.sl-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--sl-lav-100); overflow: hidden; }
.sl-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-card__cat { position: absolute; left: 10px; top: 10px; padding: 2px 12px; border-radius: 999px; background: var(--sl-lav-600); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.sl-card__body { padding: 12px 16px 16px; }
.sl-card__title { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: .98rem; font-weight: 700; line-height: 1.6; color: var(--sl-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sl-card__date { display: block; margin-top: 6px; font-size: .74rem; color: var(--sl-muted); }
.sl-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* featured works: 1 large + 2 stacked (more than 3 wrap below). Order is controlled in the admin (sticky posts). */
.sl-featured .sl-grid { grid-template-columns: 1.55fr 1fr; grid-auto-rows: auto; }
.sl-featured .sl-card:first-child { grid-row: span 3; }
.sl-featured .sl-card:first-child .sl-card__title { font-size: 1.3rem; line-height: 1.55; }
.sl-featured .sl-card:first-child .sl-card__body { padding: 16px 20px 22px; }
.sl-featured .sl-card:first-child::before { content: "\2605  PICK UP"; position: absolute; z-index: 2; right: 12px; top: 12px; padding: 3px 12px; border-radius: 999px; background: var(--sl-pink-500); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.sl-featured .sl-card:not(:first-child) { flex-direction: row; }
.sl-featured .sl-card:not(:first-child) .sl-card__thumb { flex: 0 0 44%; align-self: flex-start; }
.sl-featured .sl-card:not(:first-child) .sl-card__cat { left: 8px; top: 8px; font-size: .64rem; padding: 1px 9px; }
.sl-featured .sl-card:not(:first-child) .sl-card__body { align-self: center; padding: 12px 14px; }

/* genre sections: accent colour rotates lavender -> pink -> cyan -> lavender */
.sl-genre:nth-of-type(3n+1) { --sl-acc: var(--sl-lav-600); --sl-acc-soft: var(--sl-lav-100); }
.sl-genre:nth-of-type(3n+2) { --sl-acc: var(--sl-pink-700); --sl-acc-soft: var(--sl-pink-100); }
.sl-genre:nth-of-type(3n)   { --sl-acc: var(--sl-cyan-700); --sl-acc-soft: var(--sl-cyan-100); }
.sl-genre .sl-section__no, .sl-genre .sl-section__more { color: var(--sl-acc); }
.sl-genre .sl-card__cat { background: var(--sl-acc); }
.sl-genre .sl-card:hover .sl-card__title { color: var(--sl-acc); }

/* "latest" heading above Cocoon's own list */
.sl-latest-head { margin-top: 52px; }

/* profile / official material band */
.sl-links { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0; padding: 0; list-style: none; }
.sl-links a { display: block; height: 100%; padding: 18px 20px; border-radius: var(--sl-r-md); background: var(--sl-surface); border: 1.5px solid var(--sl-lav-200); text-decoration: none; color: var(--sl-ink); box-shadow: var(--sl-shadow-sm); transition: transform .18s ease; }
.sl-links li:nth-child(3n+2) a { border-color: var(--sl-pink-300); }
.sl-links li:nth-child(3n) a { border-color: var(--sl-cyan-300); }
.sl-links a:hover { transform: translateY(-3px); color: var(--sl-ink); }
.sl-links__t { display: block; font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
.sl-links__t::after { content: " \2192"; color: var(--sl-lav-600); }
.sl-links__d { display: block; font-size: .82rem; line-height: 1.65; color: var(--sl-muted); }

/* ---------- 5. cards + lists (Cocoon entry cards, vertical 3 columns) ---------- */
body.no-sidebar .content-in, body.no-sidebar .main { width: 100%; max-width: 1240px; }
.main, .sidebar { background: transparent; border-radius: var(--sl-r-lg); }
.main { padding: 0 0 8px; }
#list.ect-vertical-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; }
#list.ect-vertical-card .entry-card-wrap { width: auto; margin: 0; padding: 0; }
#list.ect-vertical-card .entry-card-wrap .entry-card { height: 100%; }
.entry-card-wrap { background: var(--sl-surface); border: 0; border-radius: var(--sl-r-md); box-shadow: var(--sl-shadow-sm); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.entry-card-wrap:hover { background: var(--sl-surface); transform: translateY(-3px); box-shadow: var(--sl-shadow); }
.card-thumb img { border-radius: 0; }
.cat-label { background: var(--sl-lav-600); color: #fff; border-radius: 999px; padding: 2px 12px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; left: 10px; top: 10px; }
#list .entry-card-wrap:nth-child(3n+2) .cat-label { background: var(--sl-pink-700); }
#list .entry-card-wrap:nth-child(3n) .cat-label { background: var(--sl-cyan-700); }
.entry-card-title { color: var(--sl-ink); font-weight: 700; line-height: 1.6; }
.entry-card-wrap:hover .entry-card-title { color: var(--sl-lav-600); }
.entry-card-snippet, .entry-card-meta, .e-card-info { color: var(--sl-muted); }
.e-card-content, .entry-card-content { padding: 6px 16px 14px; }
.archive-title, .list-title h1 { font-family: var(--sl-font-round); font-weight: 800; color: var(--sl-ink); line-height: 1.45; background: transparent; border: 0; border-bottom: 2px solid var(--sl-ink); border-radius: 0; padding: 0 0 8px; position: relative; }
.archive-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 88px; height: 2px; background: var(--sl-grad-text); }
.pagination .page-numbers { border-radius: 999px; background: var(--sl-surface); border: 1px solid var(--sl-line); color: var(--sl-ink); }
.pagination .current { background: var(--sl-lav-600); color: #fff; border-color: var(--sl-lav-600); }
.pagination-next-link { border-radius: 999px; background: var(--sl-surface); border: 1px solid var(--sl-lav-300); color: var(--sl-lav-600); }

/* ---------- 6. article ---------- */
.single .main, .page .main, .error404 .main { background: var(--sl-surface); padding: 40px 48px; box-shadow: var(--sl-shadow); }
.sidebar { background: var(--sl-surface); padding: 20px; box-shadow: var(--sl-shadow); }
.entry-title { font-family: var(--sl-font-round); font-weight: 800; font-size: 1.9rem; line-height: 1.5; color: var(--sl-ink); position: relative; padding-bottom: 16px; margin-bottom: 18px; }
.entry-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 4px; border-radius: 4px; background: var(--sl-grad-text); }
.eye-catch img { border-radius: var(--sl-r-md); }
.date-tags .post-date, .date-tags .post-update, .author-info, .post-date, .post-update { color: var(--sl-muted); }
.article .entry-content { font-size: 1.02rem; line-height: 1.95; letter-spacing: .01em; color: var(--sl-ink); }
.article .entry-content p { margin-block: 1.1em; }
.article .entry-content img { border-radius: var(--sl-r-sm); }
.entry-content a { color: var(--sl-lav-600); }
.entry-content a:hover { color: var(--sl-pink-700); }
.toc { border: 0; background: var(--sl-lav-50); border-radius: var(--sl-r-md); border-left: 4px solid var(--sl-lav-500); }
.toc-title { color: var(--sl-lav-700); font-weight: 800; }
.toc a { color: var(--sl-ink-2); }
.entry-categories a, .entry-tags a { border-radius: 999px; }
.sns-share a, .sns-follow a { border-radius: 999px; }
.related-entry-heading, .comment-reply-title, .comment-title, .recent-comments-title { background: transparent; color: var(--sl-ink); border: 0; border-bottom: 2px solid var(--sl-lav-300); border-radius: 0; padding: 4px 0 8px; font-family: var(--sl-font-round); font-weight: 800; }
.pager-post-navi a { border-radius: var(--sl-r-md); background: var(--sl-lav-50); border: 1px solid var(--sl-line); }
#breadcrumb, .breadcrumb { color: var(--sl-muted); }
.blogcard { border-radius: var(--sl-r-md); border-color: var(--sl-lav-200); }

/* Headings inside any article (posts with and without .surume-post) */
.entry-content h2 { position: relative; margin: 3em 0 1.1em; padding: .55em .9em .55em 1.1em; font-family: var(--sl-font-round); font-weight: 800; font-size: 1.45rem; line-height: 1.5; color: var(--sl-ink); background: linear-gradient(90deg, var(--sl-lav-100) 0%, rgba(255, 255, 255, 0) 100%); border: 0; border-left: 8px solid var(--sl-lav-500); border-radius: 0 var(--sl-r-sm) var(--sl-r-sm) 0; }
.entry-content h2::before { content: ""; position: absolute; left: -8px; bottom: 0; width: 8px; height: 38%; border-radius: 0 0 0 4px; background: var(--sl-pink-500); }
.entry-content h3 { margin: 2.4em 0 .9em; padding: 0 0 .35em; font-family: var(--sl-font-round); font-weight: 800; font-size: 1.22rem; line-height: 1.5; color: var(--sl-ink); background: none; border: 0; border-bottom: 2px solid var(--sl-lav-200); position: relative; }
.entry-content h3::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 64px; height: 2px; background: var(--sl-pink-500); }
.entry-content h4 { margin: 2em 0 .8em; padding: .45em .9em; font-weight: 800; font-size: 1.08rem; color: var(--sl-pink-700); background: var(--sl-pink-100); border: 0; border-left: 5px solid var(--sl-pink-500); border-radius: var(--sl-r-sm); }
.entry-content h5, .entry-content h6 { color: var(--sl-ink-2); font-weight: 800; }
.entry-content blockquote { margin: 1.6em 0; padding: 1em 1.3em; background: var(--sl-lav-50); border: 0; border-left: 4px solid var(--sl-lav-300); border-radius: 0 var(--sl-r-sm) var(--sl-r-sm) 0; color: var(--sl-ink-2); }
.entry-content blockquote::before, .entry-content blockquote::after { color: var(--sl-lav-300); }
.entry-content hr { border: 0; height: 2px; margin: 3em 0; background: linear-gradient(90deg, rgba(141, 121, 240, 0), var(--sl-lav-300), var(--sl-pink-300), var(--sl-cyan-300), rgba(141, 121, 240, 0)); }
.entry-content mark, .entry-content .highlight { background: linear-gradient(transparent 58%, var(--sl-pink-100) 58%); color: inherit; }
.entry-content table { border-collapse: collapse; }
.entry-content th, .entry-content td { border: 1px solid var(--sl-line); }
.entry-content th { background: var(--sl-lav-100); color: var(--sl-ink); font-weight: 800; }
.entry-content tbody tr:nth-child(even) td { background: var(--sl-lav-50); }
/* Pochipp: markup untouched; only the outer box surface / button shape */
.pochipp-box { border-radius: var(--sl-r-md); border-color: var(--sl-line); box-shadow: var(--sl-shadow-sm); }
.pochipp-box__btn { border-radius: 999px; }

/* ---------- 7. legacy article decoration (.surume-post ...) — former "Additional CSS", re-coloured; same selectors, same HTML ---------- */
.surume-post { color: var(--sl-ink); line-height: 1.9; }
.surume-post h1 { margin-top: 20px; padding-bottom: 10px; font-size: 2em; line-height: 1.4; color: var(--sl-lav-700); border-bottom: 3px dashed var(--sl-lav-300); }
.surume-post strong, .surume-ai-manga-report strong, .entry-content strong { font-weight: 800; color: var(--sl-ink); background: linear-gradient(transparent 62%, var(--sl-pink-100) 62%); }
.surume-post a, .surume-ai-manga-report a { color: var(--sl-lav-600); text-decoration: none; border-bottom: 1px dotted var(--sl-lav-500); }
.surume-post a:hover, .surume-ai-manga-report a:hover { color: var(--sl-pink-700); border-bottom-color: var(--sl-pink-500); }
.surume-post .pochipp-box a, .surume-post .blogcard a, .surume-post a.sns-button { border-bottom: 0; }
.surume-post hr { margin: 3em 0; }
.surume-post p { margin: 15px 0; }

/* lists */
.surume-post .check-list, .surume-post .idea-list { list-style: none; padding-left: 0; }
.surume-post .check-list li, .surume-post .idea-list li { position: relative; margin-bottom: 8px; padding: 12px 20px 12px 42px; border-radius: var(--sl-r-sm); }
.surume-post .check-list li { background: var(--sl-cyan-100); border-left: 5px solid var(--sl-cyan-500); }
.surume-post .check-list li::before { content: "\2713"; position: absolute; left: 14px; top: 10px; width: 1.2em; height: 1.2em; font-size: 1.2em; font-weight: 800; color: var(--sl-cyan-700); }
.surume-post .idea-list li { background: var(--sl-pink-100); border-left: 5px solid var(--sl-pink-500); padding-left: 20px; }

/* boxes */
.entry-content .surume-post .info-box, .entry-content .surume-post .alert-box, .entry-content .surume-post .success-box { margin: 25px 0; padding: 20px; }
.surume-post .box-title { margin: 0 0 12px; font-size: 1.12em; font-weight: 800; }
.entry-content .surume-post .info-box { color: var(--sl-ink); background: var(--sl-lav-50); border: 1px solid var(--sl-lav-200); border-left: 5px solid var(--sl-lav-500); border-radius: 0 var(--sl-r-sm) var(--sl-r-sm) 0; }
.entry-content .surume-post .info-box .box-title { color: var(--sl-lav-700); }
.entry-content .surume-post .alert-box { color: var(--sl-ink); background: var(--sl-warn-bg); border-left: 5px solid var(--sl-warn-line); border-radius: 0 var(--sl-r-sm) var(--sl-r-sm) 0; }   /* semantic: caution */
.entry-content .surume-post .alert-box .box-title { color: var(--sl-warn-ink); }
.entry-content .surume-post .alert-box::before { display: none; }   /* Cocoon's built-in icon collided with the legacy box padding */
.entry-content .surume-post .success-box { color: var(--sl-ink); background: var(--sl-ok-bg); border: 2px dashed var(--sl-ok-line); border-radius: var(--sl-r-md); }   /* semantic: success */
.entry-content .surume-post .success-box .box-title { color: var(--sl-ok-ink); }

/* conversation bubbles: おっさん = pink (left), するめ = lavender (right) */
.surume-post .conversation-block { margin: 30px 0; }
.surume-post .speech-bubble { position: relative; max-width: 85%; margin-bottom: 15px; padding: 15px 20px; border-radius: 16px; box-shadow: var(--sl-shadow-sm); }
.surume-post .speaker-name { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .9em; font-weight: 800; line-height: 1.2; }
/* speaker badge drawn by CSS only (HTML untouched): するめ = official avatar, おっさん = emoji in a same-size ring, so both sides carry equal visual weight */
.surume-post .speaker-name::before, .surume-post .speaker-name::after { flex: none; width: var(--sl-badge, 44px); height: var(--sl-badge, 44px); box-sizing: border-box; border-radius: 50%; }
.surume-post .human-speech .speaker-name::before { content: "🧔"; content: "🧔" / ""; display: grid; place-items: center; font-size: calc(var(--sl-badge, 44px) * .55); line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; background: #fff; border: 2px solid var(--sl-pink-300); }
.surume-post .ai-speech .speaker-name { justify-content: flex-end; }
.surume-post .ai-speech .speaker-name::after { content: ""; background: #fff url("images/surume-avatar.webp") center / cover no-repeat; border: 2px solid var(--sl-lav-300); }
.surume-post .human-speech { margin-right: auto; background: var(--sl-pink-100); border: 1px solid var(--sl-pink-300); }
.surume-post .human-speech .speaker-name { color: var(--sl-pink-700); }
.surume-post .human-speech::before { content: ""; position: absolute; left: -10px; bottom: 15px; border: 10px solid transparent; border-left: 0; border-right-color: var(--sl-pink-100); }
.surume-post .ai-speech { margin-left: auto; background: var(--sl-lav-100); border: 1px solid var(--sl-lav-200); }
.surume-post .ai-speech .speaker-name { color: var(--sl-lav-700); text-align: right; }
.surume-post .ai-speech::after { content: ""; position: absolute; right: -10px; bottom: 15px; border: 10px solid transparent; border-right: 0; border-left-color: var(--sl-lav-100); }
.surume-post .final-cheers { margin-top: 50px; padding: 20px; text-align: center; font-size: 1.2em; font-weight: 700; color: var(--sl-lav-700); background: var(--sl-grad); border: 2px dashed var(--sl-lav-300); border-radius: var(--sl-r-md); }

/* tables: the old rule made EVERY table display:block + nowrap, which caused the 375px overflow on the AI-manga article; scroll is now contained per table */
.surume-post table { display: block; width: 100%; max-width: 100%; margin: 30px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; border-collapse: collapse; box-shadow: var(--sl-shadow-sm); border-radius: var(--sl-r-sm); }
.surume-post th, .surume-post td { padding: 12px 15px; text-align: left; border: 1px solid var(--sl-line); }
.surume-post th { background: var(--sl-lav-600); color: #fff; font-weight: 800; }
.surume-post tr:nth-child(even) { background: var(--sl-lav-50); }

/* AI-manga report (single article, scoped by .surume-ai-manga-report) */
.surume-ai-manga-report { --surume-orange: var(--sl-lav-500); --surume-dark-orange: var(--sl-lav-700); --surume-green: var(--sl-cyan-700); min-width: 0; max-width: 100%; color: var(--sl-ink); line-height: 1.9; }
.surume-ai-manga-report h2 { margin: 48px 0 24px; padding: 12px 18px; background: linear-gradient(90deg, var(--sl-lav-100) 0%, #fff 100%); }
.surume-ai-manga-report h2::before { display: none; }
.surume-ai-manga-report h3 { color: var(--sl-ink); border-bottom: 2px solid var(--sl-lav-200); }
.surume-ai-manga-report h3::after { background-color: var(--sl-pink-500); }
.surume-ai-manga-report .lead-intro-card { background: var(--sl-lav-50); border-color: var(--sl-lav-200); border-left: 5px solid var(--sl-lav-500); }
.surume-ai-manga-report .surume-avatar-icon { border-color: var(--sl-lav-300); background: var(--sl-lav-100); }
.surume-ai-manga-report .surume-avatar-name { color: var(--sl-lav-700); }
.surume-ai-manga-report .surume-bubble { border-color: var(--sl-lav-200); box-shadow: var(--sl-shadow-sm); }
.surume-ai-manga-report .surume-bubble::before { border-color: transparent var(--sl-lav-200) transparent transparent; }
.surume-ai-manga-report .grand-finale-card { background: var(--sl-grad); border-color: var(--sl-lav-300); box-shadow: var(--sl-shadow); }
.surume-ai-manga-report .grand-finale-title { color: var(--sl-lav-700); }
.surume-ai-manga-report .grand-finale-sub { color: var(--sl-ink-2); }
.surume-ai-manga-report .success-badge { background: var(--sl-cyan-700); }
.surume-ai-manga-report .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.surume-post .surume-ai-manga-report table.summary-table, .surume-ai-manga-report table.summary-table { display: table; width: 100%; min-width: 540px; margin: 0; overflow: visible; white-space: normal; box-shadow: none; }
.surume-ai-manga-report table.summary-table th { background: var(--sl-lav-600); color: #fff; border-bottom: 2px solid var(--sl-pink-500); white-space: nowrap; }
.surume-ai-manga-report .surume-comment-box { display: flex; align-items: flex-start; gap: 16px; margin: 28px 0 32px; }
.surume-ai-manga-report .surume-avatar-col { flex: 0 0 68px; width: 68px; text-align: center; }
.surume-ai-manga-report .surume-avatar-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto; overflow: hidden; border: 2px solid var(--sl-lav-300); border-radius: 50%; }
.surume-ai-manga-report .surume-avatar-icon img { display: block; width: 100%; height: 100%; margin: 0; padding: 0; object-fit: contain; }
.surume-ai-manga-report .surume-bubble { flex: 1; min-width: 0; }

/* AI-manga article: figures carry inline max-width (420px / 320px) that exceeded the narrower card at 375px (the +61px page overflow found in WP-D1).
   min(100%, N) keeps the original cap and lets the image shrink. !important only because the cap is an inline style attribute. */
.surume-ai-manga-report img[style*="max-width: 420px"] { max-width: min(100%, 420px) !important; height: auto; }
.surume-ai-manga-report img[style*="max-width: 320px"] { max-width: min(100%, 320px) !important; height: auto; }
.surume-ai-manga-report figure { max-width: 100%; }

/* the few inline-styled boxes inside pages (terms / fan-guidelines / official-materials / links, one post). HTML stays as is; the orange/green
   ones are re-mapped here. This is the ONLY place !important is used, because inline style attributes cannot be overridden otherwise. */
.entry-content [style*="#fff3e0"] { background-color: var(--sl-pink-100) !important; border-left-color: var(--sl-pink-500) !important; }
.entry-content [style*="#ff9800"] { border-left-color: var(--sl-pink-500) !important; }
.entry-content [style*="#2ecc71"] { border-top-color: var(--sl-cyan-300) !important; }
.entry-content [style*="#e17055"], .entry-content [style*="#ff6b6b"] { color: var(--sl-pink-700) !important; }
.entry-content [style*="#d8c7a3"] { border-color: var(--sl-lav-300) !important; }
.entry-content [style*="#fffaf0"] { background: var(--sl-lav-50) !important; }
.entry-content [style*="#a3d9a5"] { border-top-color: var(--sl-cyan-300) !important; }

/* ---------- 8. Cocoon standard boxes / notices (colour roles: brand = lavender / pink / cyan; caution + error keep a warm / red hue for meaning) ---------- */
/* Bootstrap-style notice boxes (.primary-box, .success-box ... and Gutenberg "is-style-*") */
.entry-content :is(.is-style-primary-box, .primary-box, .sp-primary, .primary) { color: var(--sl-lav-700); background-color: var(--sl-lav-100); border-color: var(--sl-lav-300); }
.entry-content :is(.is-style-success-box, .success-box, .sp-success, .success) { color: var(--sl-ok-ink); background-color: var(--sl-ok-bg); border-color: var(--sl-ok-line); }
.entry-content :is(.is-style-info-box, .info-box, .sp-info, .info) { color: var(--sl-ink); background-color: var(--sl-lav-50); border-color: var(--sl-lav-300); }
.entry-content :is(.is-style-warning-box, .warning-box, .sp-warning, .warning) { color: var(--sl-warn-ink); background-color: var(--sl-warn-bg); border-color: var(--sl-warn-line); }
.entry-content :is(.is-style-danger-box, .danger-box, .sp-danger, .danger) { color: var(--sl-err-ink); background-color: var(--sl-err-bg); border-color: var(--sl-err-line); }
.entry-content :is(.is-style-secondary-box, .secondary-box, .is-style-light-box, .light-box, .is-style-dark-box, .dark-box) { color: var(--sl-ink-2); background-color: #f3f1f8; border-color: var(--sl-line); }
/* icon boxes (information / question / alert / memo / comment / ok / ng / good / bad / profile) */
.entry-content :is(.is-style-information-box, .information-box, .information) { background: var(--sl-lav-50); border-color: var(--sl-lav-300); }
.entry-content :is(.is-style-information-box, .information-box, .information)::before { color: var(--sl-lav-500); border-right-color: var(--sl-lav-300); }
.entry-content :is(.is-style-question-box, .question-box, .question) { background: var(--sl-cyan-100); border-color: var(--sl-cyan-300); }
.entry-content :is(.is-style-question-box, .question-box, .question)::before { color: var(--sl-cyan-500); border-right-color: var(--sl-cyan-300); }
.entry-content :is(.is-style-alert-box, .alert-box, .alert) { background: var(--sl-warn-bg); border-color: var(--sl-warn-line); }
.entry-content :is(.is-style-alert-box, .alert-box, .alert)::before { color: var(--sl-warn-line); border-right-color: var(--sl-warn-line); }
.entry-content :is(.is-style-memo-box, .memo-box) { background: var(--sl-pink-100); border-color: var(--sl-pink-300); }
.entry-content :is(.is-style-memo-box, .memo-box)::before { color: var(--sl-pink-500); border-right-color: var(--sl-pink-300); }
.entry-content :is(.is-style-comment-box, .comment-box, .is-style-profile-box, .profile-box) { background: var(--sl-lav-50); border-color: var(--sl-lav-200); }
.entry-content :is(.is-style-comment-box, .comment-box, .is-style-profile-box, .profile-box)::before { color: var(--sl-lav-300); border-right-color: var(--sl-lav-200); }
.entry-content :is(.is-style-ok-box, .ok-box, .is-style-good-box, .good-box) { background: var(--sl-ok-bg); border-color: var(--sl-ok-line); }
.entry-content :is(.is-style-ok-box, .ok-box, .is-style-good-box, .good-box)::before { color: var(--sl-ok-line); border-right-color: var(--sl-ok-line); }
.entry-content :is(.is-style-ng-box, .ng-box, .is-style-bad-box, .bad-box) { background: var(--sl-err-bg); border-color: var(--sl-err-line); }
.entry-content :is(.is-style-ng-box, .ng-box, .is-style-bad-box, .bad-box)::before { color: var(--sl-err-line); border-right-color: var(--sl-err-line); }
.entry-content :is(.information-box, .question-box, .alert-box, .memo-box, .comment-box, .ok-box, .ng-box, .good-box, .bad-box, .profile-box) { color: var(--sl-ink); }
.information-box, .question-box, .memo-box, .comment-box, .blank-box, .iconlist-box, .sticky-box, .toggle-wrap, .tab-caption-box { border-radius: var(--sl-r-sm); }
.marker, .marker-under { background: linear-gradient(transparent 60%, var(--sl-pink-100) 60%); }
.btn, .button, .wp-block-button__link { border-radius: 999px; }
.btn-wrap a, a.btn { background: var(--sl-lav-600); color: #fff; border-color: var(--sl-lav-600); }

/* ---------- 9. widgets + footer ---------- */
.sidebar h2, .sidebar h3, .widget-title { background: var(--sl-lav-100); color: var(--sl-ink); border: 0; border-radius: 12px; padding: 10px 14px; font-size: .98rem; font-weight: 800; }
.sidebar a, .widget a { color: var(--sl-ink); }
.sidebar a:hover, .widget a:hover { color: var(--sl-lav-600); }
.search-edit, .search-box input[type="text"] { border-radius: 999px; border-color: var(--sl-lav-200); }
.search-box .search-submit, .wp-block-search__button { border-radius: 999px; background: var(--sl-lav-600); color: #fff; border: 0; }
.wp-block-search__input { border-radius: 999px; border: 1px solid var(--sl-lav-200); }
.go-to-top-button { background: var(--sl-lav-600); }
.footer { margin-top: 48px; background: #34304a; color: #ece8ff; border-radius: 36px 36px 0 0; }
.footer a, .footer .navi-footer-in a { color: #ece8ff; }
.footer a:hover { color: var(--sl-pink-300); }
.footer .logo-footer a, .footer .site-name-text { color: #fff; }
.footer .sl-logo__ja { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.footer .sl-logo__en { color: #cfc7ee; }
.footer .sl-logo__mark { box-shadow: 0 0 0 3px #34304a, 0 0 0 5px var(--sl-lav-300); }
/* footer layout: Cocoon places the footer logo with position:absolute (it collided with the centred menu). Replaced by a 2-column grid: logo | menu + copyright */
.footer .footer-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 48px; margin: 0; padding: 36px 8px 28px; }
.footer .footer-bottom-logo { position: static; float: none; margin: 0; padding: 0; }
.footer .footer-bottom-content { float: none; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin: 0; text-align: right; }
.footer .navi-footer { width: 100%; margin: 0; }
.footer .navi-footer-in > .menu-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer .navi-footer-in > .menu-footer li.menu-item { width: auto; flex: 0 1 auto; margin: 0; border: 0; }
.footer .navi-footer-in > .menu-footer li a { display: block; padding: 6px 14px; border: 1px solid rgba(236, 232, 255, .28); border-radius: 999px; font-size: .86rem; line-height: 1.5; text-align: center; word-break: auto-phrase; }
.footer .navi-footer-in > .menu-footer li a:hover { background: rgba(236, 232, 255, .12); border-color: var(--sl-pink-300); }
.footer .source-org.copyright { margin: 0; font-size: .8rem; color: #cfc7ee; }

/* ---------- 10. responsive ---------- */
@media screen and (max-width: 1023px) {
  #list.ect-vertical-card, .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single .main, .page .main { padding: 28px 24px; }
  .appeal-content, .home-entrance { max-width: 56%; }
  .appeal-content { padding: 40px 0 6px 32px; } .home-entrance { padding-left: 32px; }
  .appeal::after { width: clamp(240px, 42vw, 360px); right: 2%; }
  .sl-featured .sl-grid { grid-template-columns: 1fr; }
  .sl-featured .sl-card:first-child { grid-row: auto; }
}
@media screen and (max-width: 1023px) {
  .footer .footer-bottom { grid-template-columns: 1fr; justify-items: center; gap: 20px; padding: 32px 12px 24px; }
  .footer .footer-bottom-content { align-items: center; text-align: center; width: 100%; }
  .footer .navi-footer-in > .menu-footer { justify-content: center; }
}
@media screen and (max-width: 834px) {
  .appeal { margin: 14px 12px 0; min-height: 0; border-radius: 18px; }
  /* character moves BELOW the copy: no overlap with text, head fully visible */
  .appeal-in { padding-bottom: calc(min(78vw, 420px) * .8 + 8px); }
  .appeal-content, .home-entrance { max-width: 100%; }
  .appeal-content { padding: 28px 18px 6px; } .home-entrance { padding: 0 18px; margin-bottom: 18px; }
  .appeal::after { right: 50%; transform: translateX(50%); width: min(78vw, 420px); }
  .single .main, .page .main { padding: 22px 16px; border-radius: 16px; }
  .header-in { padding: 8px 12px 4px; }
  .sl-logo__mark { width: 42px; height: 42px; } .sl-logo__ja { font-size: 1.35rem; } .sl-logo__en { font-size: .6rem; letter-spacing: .26em; }
  .entry-title { font-size: 1.5rem; }
  .entry-content h2 { font-size: 1.28rem; margin-top: 2.4em; } .entry-content h3 { font-size: 1.14rem; }
  .sl-section__title { font-size: 1.18rem; } .sl-section__en { display: none; }
}
@media screen and (max-width: 600px) {
  #list.ect-vertical-card, .sl-grid { grid-template-columns: 1fr; }
  .sl-featured .sl-card:not(:first-child) { flex-direction: column; }
  .sl-featured .sl-card:not(:first-child) .sl-card__thumb { flex-basis: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .surume-post .check-list li, .surume-post .idea-list li { padding: 10px 12px 10px 36px; } .surume-post .idea-list li { padding-left: 14px; }
  .entry-content .surume-post .info-box, .entry-content .surume-post .alert-box, .entry-content .surume-post .success-box { margin: 20px 0; padding: 14px; }
  .surume-post .speech-bubble { max-width: 94%; padding: 13px 16px; }
  .surume-post .conversation-block, .surume-post .speech-bubble { --sl-badge: 36px; }
  .surume-post th, .surume-post td { padding: 8px 10px; }
  .surume-post table { font-size: .9em; }
  .surume-ai-manga-report h2 { font-size: 1.3rem; padding: 10px 14px; }
  .surume-post h1 { font-size: 1.45em; }
}
@media screen and (max-width: 480px) {
  .footer .navi-footer-in > .menu-footer { gap: 8px 6px; }
  .footer .navi-footer-in > .menu-footer li a { padding: 7px 12px; font-size: .84rem; }
  .home-entrance ul { gap: 8px; } .home-entrance a { padding: 6px 14px; font-size: .84rem; }
  .article .entry-content { font-size: 1rem; }
  .surume-post table { font-size: .8em; }
  .surume-ai-manga-report .surume-avatar-col { flex-basis: 52px; width: 52px; }
  .surume-ai-manga-report .surume-avatar-icon { width: 50px; height: 50px; }
  .sl-section__head { flex-wrap: wrap; row-gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .sl-card, .entry-card-wrap, .sl-links a { transition: none; } .sl-card:hover, .entry-card-wrap:hover, .sl-links a:hover { transform: none; } }