/*
Theme Name: Lys Étoilé
Description: 法式レース復古 × 淡藍巧克力 — 星と百合の便箋テーマ
Author: mitsuki
Version: 1.3.0
Text Domain: lys-etoile
*/

/* ========================================
   1. CSS 変数システム
   ======================================== */
:root {
    /* カラー（設計トークン）— cream は装飾素材の地色と厳密一致させる */
    --lys-cream: #FCF3E6;
    --lys-cream-card: #FFFDF8;
    --lys-cream-deep: #F3EADA;
    --lys-blue: #AFC5D8;
    --lys-blue-deep: #8FA9C0;
    /* Lettre 三期 — 阅读页左カラムの実色底（--lys-blue より一段浅い、渐变不使用） */
    --lys-aside-blue: #C2D1E0;
    --lys-cocoa: #6E573F;
    --lys-line: #A9957A;
    --lys-text: #4A3C2E;
    --lys-text-muted: #8C7B66;
    /* 文章カード紙色輪番（百宝拼贴・Lettre 二期）— 三色ともΔEはごく小さく、切手等の白台紙素材と喧嘩しない範囲 */
    --lys-paper-parchment: #FAF3E8;
    --lys-paper-blue: #F4F7FA;

    /* スペーシング */
    --lys-space-xs: 4px;
    --lys-space-sm: 8px;
    --lys-space-md: 16px;
    --lys-space-lg: 24px;
    --lys-space-xl: 40px;
    --lys-space-2xl: 64px;

    /* 角丸（方正寄り） */
    --lys-radius: 4px;

    /* フォント */
    --lys-font-body: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
    --lys-font-display: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
    --lys-font-sm: 13px;
    --lys-font-base: 15px;
    --lys-font-md: 17px;
    --lys-font-lg: 20px;
    --lys-font-xl: 28px;
    --lys-font-2xl: clamp(2rem, 4vw, 3rem);

    /* トランジション */
    --lys-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --lys-transition-fast: 0.15s;
    --lys-transition-base: 0.25s;
    --lys-transition-slow: 0.4s;

    /* レイアウト */
    --lys-container-width: 1100px;
    --lys-content-width: 720px;
    --lys-content-wide: 900px;
    --lys-sidebar-width: 280px;
    --lys-navbar-height: 64px;
}

/* ========================================
   2. リセット & ベース
   ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--lys-font-body);
    font-size: var(--lys-font-base);
    line-height: 1.8;
    color: var(--lys-text);
    background-color: var(--lys-cream);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

a {
    color: var(--lys-cocoa);
    text-decoration: none;
    transition: color var(--lys-transition-fast) var(--lys-ease-out);
}
a:hover { color: var(--lys-blue-deep); }

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

:focus-visible {
    outline: 2px solid var(--lys-blue-deep);
    outline-offset: 2px;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(110, 87, 63, 0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(110, 87, 63, 0.3); }

::selection {
    background: rgba(175, 197, 216, 0.45);
    color: var(--lys-cocoa);
}

/* ========================================
   3. 導航バー
   ======================================== */
.lys-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--lys-navbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--lys-space-lg);
    background: rgba(251, 243, 230, 0.72);
    z-index: 1000;
    border-bottom: 1px solid var(--lys-line);
    transition: background var(--lys-transition-base) var(--lys-ease-out), box-shadow var(--lys-transition-base);
}

/* 信箋様式 — 底辺の二本線 */
.lys-navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1px;
    background: var(--lys-line);
    opacity: 0.6;
}

.lys-navbar.is-scrolled {
    background: var(--lys-cream);
    box-shadow: 0 2px 12px rgba(110, 87, 63, 0.08);
}

.lys-navbar-brand {
    font-size: 20px;
    color: var(--lys-cocoa) !important;
    text-decoration: none;
}

.lys-navbar-title {
    font-family: var(--lys-font-display);
    font-size: var(--lys-font-md);
    font-weight: 400;
    color: var(--lys-cocoa);
    letter-spacing: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.lys-navbar-actions {
    display: flex;
    gap: var(--lys-space-sm);
}

.lys-navbar-btn {
    background: transparent;
    border: none;
    color: var(--lys-cocoa);
    cursor: pointer;
    padding: var(--lys-space-sm);
    border-radius: var(--lys-radius);
    transition: color var(--lys-transition-fast);
    font-size: 16px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lys-navbar-btn:hover { color: var(--lys-blue-deep); }

/* 記事ページでは沉浸ナビに切替 */
body.single .lys-navbar { display: none; }

/* 検索オーバーレイ */
.lys-search-overlay[hidden] { display: none !important; }

.lys-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(74, 60, 46, 0.92);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lys-search-inner {
    width: 90%;
    max-width: 500px;
    position: relative;
}

.lys-search-inner input {
    width: 100%;
    padding: var(--lys-space-md) var(--lys-space-lg);
    font-family: var(--lys-font-body);
    font-size: var(--lys-font-lg);
    background: rgba(255, 253, 248, 0.08);
    border: 1px solid rgba(255, 253, 248, 0.25);
    border-radius: var(--lys-radius);
    color: #FFFDF8;
    outline: none;
}
.lys-search-inner input:focus {
    border-color: var(--lys-blue);
    box-shadow: 0 0 0 3px rgba(175, 197, 216, 0.25);
}
.lys-search-inner input::placeholder { color: rgba(255, 253, 248, 0.45); }

.lys-search-close {
    position: absolute;
    right: var(--lys-space-md);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 253, 248, 0.6);
    font-size: 18px;
    cursor: pointer;
    padding: var(--lys-space-sm);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--lys-transition-fast);
}
.lys-search-close:hover { color: var(--lys-blue); }

/* ========================================
   4. Banner
   ======================================== */

/* ホーム — C 図式「便箋の頭書き」レイアウト：上辺蕾丝帯 + リボン + 紋章 + 花体題字 + 入口行
   banner-lys.webp（礼盒盖イラスト）は不使用（Lettre 二期・ファイルは磁盘に残す） */
.lys-banner-home {
    position: relative;
    margin-top: var(--lys-navbar-height);
    padding-bottom: var(--lys-space-2xl);
    background: var(--lys-cream);
    text-align: center;
}

/* 上辺の蓝蕾丝帯 — laceband-flip.webp（蓝が上・蕾丝が下に垂れる版）。
   固定 navbar のすぐ下、banner 領域の最上部に敷く（navbar 自体は現状維持） */
.lys-banner-topedge {
    width: 100%;
    height: clamp(90px, 9vw, 140px);
    background-image: url('images/laceband-flip.webp');
    background-repeat: repeat-x;
    background-position: top;
    background-size: auto 100%;
}

/* 手書き文字の余白装飾（任意層）— 独立 div にして一行 display:none で丸ごと外せるようにしてある。
   darken は同じ stacking context 内の cream 背景に届かせる必要があるため、
   position/transform/opacity<1 を持つ祖先を挟まない（.lys-banner-home 自身に直接載せる） */
.lys-banner-margins {
    position: absolute;
    top: clamp(90px, 9vw, 140px);
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('images/handwriting.webp'), url('images/handwriting.webp');
    background-repeat: no-repeat, no-repeat;
    background-position: left -20px center, right -20px center;
    background-size: 220px auto, 220px auto;
    mix-blend-mode: darken;
    opacity: 0.55;
    pointer-events: none;
}
/* 視覚チェックで「脏く見える」場合はこの一行で丸ごと消せる */
@media (max-width: 899px) {
    .lys-banner-margins { display: none; }
}

.lys-banner-caption {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--lys-space-lg);
}

/* リボン — 蕾丝帯の下沿に軽く食い込ませて「上から下がっている」座りにする（目測値・実機調整対象） */
.lys-banner-ribbon {
    display: block;
    width: clamp(80px, 8vw, 120px);
    height: auto;
    margin: calc(-1 * clamp(26px, 3.4vw, 40px)) auto 0;
}

.lys-banner-crest {
    display: block;
    width: clamp(64px, 6vw, 90px);
    height: auto;
    margin: var(--lys-space-sm) auto var(--lys-space-md);
}

.lys-banner-script {
    font-family: 'Great Vibes', 'Cormorant Garamond', cursive;
    font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.15;
    color: var(--lys-cocoa);
    margin: 0;
}

.lys-banner-subtitle {
    font-family: var(--lys-font-display);
    font-variant: small-caps;
    font-weight: 500;
    font-size: clamp(0.78rem, 1.5vw, 0.92rem);
    letter-spacing: 3px;
    color: var(--lys-text-muted);
    margin-top: var(--lys-space-sm);
}

/* 入口行 — 首頁 + トップレベルカテゴリー、✦ 区切り。カテゴリー数が増えても wrap を許す */
.lys-banner-entry {
    margin-top: var(--lys-space-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 6px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.lys-banner-entry a {
    color: var(--lys-text-muted);
    padding: 4px 8px;
}
.lys-banner-entry a:hover { color: var(--lys-blue-deep); }
.lys-banner-entry-sep {
    font-size: 8px;
    color: var(--lys-line);
    margin: 0 2px;
}

/* 彩蛋：微かに瞬く金棕小星（純 CSS） — 位置は .lys-banner-home 自身を基準にする */
.lys-twinkle {
    position: absolute;
    color: var(--lys-line);
    font-size: 12px;
    opacity: 0.35;
    animation: lys-twinkle 4s ease-in-out infinite;
    pointer-events: none;
}
.lys-twinkle-1 { top: 8%;  left: 18%;  animation-delay: 0s; }
.lys-twinkle-2 { top: 14%; right: 16%; animation-delay: 1.1s; }
.lys-twinkle-3 { top: 30%; left: 10%;  animation-delay: 2.2s; }
.lys-twinkle-4 { top: 24%; right: 9%;  animation-delay: 0.6s; }

@keyframes lys-twinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.85); }
    50%      { opacity: 0.65; transform: scale(1); }
}

/* 非ホーム — 矮条：標題 + divider のみ */
.lys-banner-slim {
    margin-top: var(--lys-navbar-height);
    padding: var(--lys-space-xl) var(--lys-space-lg) var(--lys-space-md);
    text-align: center;
    background: var(--lys-cream);
}

.lys-banner-slim-title {
    font-family: var(--lys-font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: 3px;
    color: var(--lys-cocoa);
    margin-bottom: var(--lys-space-sm);
}

.lys-banner-slim-divider {
    display: block;
    width: min(320px, 60%);
    height: auto;
    margin: 0 auto;
    opacity: 0.9;
    mix-blend-mode: darken;
}

/* ========================================
   5. メインレイアウト
   ======================================== */
.lys-container {
    max-width: var(--lys-container-width);
    margin: 0 auto;
    padding: 0 var(--lys-space-lg);
}

.lys-container.is-single {
    max-width: none;
    padding: 0;
}

.lys-main {
    display: grid;
    grid-template-columns: 1fr var(--lys-sidebar-width);
    gap: var(--lys-space-xl);
    padding: var(--lys-space-xl) 0;
}

@media (max-width: 768px) {
    .lys-main { grid-template-columns: 1fr; }
    .lys-sidebar { display: none; }
}

/* ========================================
   6. 文章カード（「信纸叠」概念 — 卓上に散らばる手紙）
   ======================================== */
.lys-card {
    position: relative;
    margin-bottom: 32px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(24px) rotate(0deg);
    transition: opacity 0.6s var(--lys-ease-out), transform 0.6s var(--lys-ease-out);
}

/* 顔面層 — 背景・枠線はここに描く。.lys-card 自身は常に transform を持ち
   stacking context を作るため、root 背景は負 z-index の子より先に塗られてしまう
   （＝紙叠・信封が顔面の上に浮く）。通常フローの face はその後に塗られるので安全 */
.lys-card-face {
    position: relative;
    display: flow-root;
    background: var(--lys-cream-card);
    border: 1px solid var(--lys-line);
    border-radius: var(--lys-radius);
    box-shadow: 0 1px 3px rgba(110, 87, 63, 0.08);
    transition: box-shadow var(--lys-transition-base) var(--lys-ease-out);
}

/* 紙色三色輪番（百宝拼贴） — 邮票/邮戳素材の白台紙はどの紙色の上でも
   「貼り付けた白紙の切手」として自然に見える範囲のΔEに収めてあるため無処理でよい（task-phase2 検討済み） */
.lys-card-face--parchment { background: var(--lys-paper-parchment); }
.lys-card-face--blue { background: var(--lys-paper-blue); }

/* 奇数/偶数で左右に僅かに振り分け — 卓上に無造作に置かれた便箋の趣 */
.lys-post-list .lys-card:nth-of-type(odd)  { --lys-card-tilt: -0.6deg; }
.lys-post-list .lys-card:nth-of-type(even) { --lys-card-tilt: 0.6deg; }

.lys-card.is-visible { opacity: 1; transform: translateY(0) rotate(var(--lys-card-tilt, 0deg)); }

/* JS 無効時 */
.no-js .lys-card { opacity: 1; transform: rotate(var(--lys-card-tilt, 0deg)); }

.lys-card:hover {
    transform: translateY(-4px) rotate(0deg);
}
.lys-card:hover .lys-card-face {
    box-shadow: 0 16px 32px rgba(110, 87, 63, 0.16), 0 4px 10px rgba(110, 87, 63, 0.1);
}

/* 背後にもう二枚の便箋が覗く紙叠 — 同色紙+細線、僅かにずれて回転
   ⚠️ z-index:-1 は .lys-card 自身の transform が作るローカル stacking context 内に閉じる（ページ全体へは漏れない） */
.lys-card::before,
.lys-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--lys-cream-card);
    border: 1px solid var(--lys-line);
    border-radius: var(--lys-radius);
    z-index: -1;
}
.lys-card::before { transform: rotate(-1.3deg) translate(-3px, 3px); }
.lys-card::after  { transform: rotate(1deg) translate(4px, 2px); opacity: 0.85; }

/* 信封 — 便箋の背後から角だけ覗く（底色=ページ地色なので紙叠より更に奥へ） */
.lys-card-envelope {
    position: absolute;
    z-index: -3;
    width: 118px;
    right: 9%;
    bottom: -20px;
    transform: rotate(-7deg);
    pointer-events: none;
}
.lys-card-envelope img { display: block; width: 100%; height: auto; }

/* 差し込み写真 — 大判バナーではなく「同封の一枚」を模した小さな白縁ポラロイド */
.lys-card-thumb {
    display: block;
    float: left;
    width: 128px;
    /* rotate は float の Layout Box を変えないため、視覚エッジが本文を擦らないよう右・下に容差を足す */
    margin: var(--lys-space-lg) calc(var(--lys-space-md) + 6px) calc(var(--lys-space-sm) + 6px) var(--lys-space-lg);
    padding: 6px 6px 16px;
    background: #FFFFFF;
    box-shadow: 0 4px 10px rgba(74, 60, 46, 0.18);
    transform: rotate(-3deg);
    position: relative;
}
.lys-card-thumb img { display: block; width: 100%; height: 108px; object-fit: cover; }

/* 邮票 + 邮戳 — 同じ台紙(.lys-card-stamp)の中で共に傾く。
   postmark はここでは兄弟要素の stamp-img と同じローカル context に留め、その上にのみ焼き付ける */
.lys-card-stamp {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 68px;
    z-index: 1;
    transform: rotate(5deg);
    pointer-events: none;
    /* drop-shadow は不透明白底の img には矩形の影が出るので使わない — 素材に焼き込み済みの紙影で足りる */
}
.lys-card-stamp-img { display: block; width: 100%; height: auto; }
.lys-card-postmark {
    position: absolute;
    width: 78%;
    left: -20%;
    bottom: 2%;
    mix-blend-mode: darken;
    pointer-events: none;
}

/* 右側は邮票の帯（68px+余白）分だけ広めに空ける — 便箋の余白に切手が座る構図 */
.lys-card-body { padding: var(--lys-space-lg); padding-right: 104px; }

.lys-card-title {
    font-size: var(--lys-font-md);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: var(--lys-space-sm);
}
.lys-card-title a { color: var(--lys-text); }
.lys-card-title a:hover { color: var(--lys-blue-deep); }

/* 信頭の日付行 — タイトルの上に置く「レターヘッド」書式 */
.lys-card-meta {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lys-text-muted);
    margin-bottom: 6px;
}

.lys-card-sep {
    margin: 0 6px;
    font-size: 8px;
    vertical-align: middle;
    color: var(--lys-line);
}

.lys-card-excerpt {
    font-size: var(--lys-font-base);
    color: var(--lys-text-muted);
    line-height: 1.7;
    margin-bottom: var(--lys-space-md);
}

.lys-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lys-space-sm);
    clear: both;
}

.lys-tag {
    font-size: 12px;
    padding: 3px 10px;
    background: var(--lys-cream-deep);
    border: 1px solid var(--lys-line);
    border-radius: var(--lys-radius);
    color: var(--lys-cocoa);
    transition: all var(--lys-transition-fast);
}
.lys-tag:hover {
    background: var(--lys-blue);
    border-color: var(--lys-blue-deep);
    color: #fff;
}

/* 百宝拼贴の装飾（4 種輪番） — すべて .lys-card-face の直接子。
   face は position:relative のみで z-index を持たないため独自の stacking context を作らない。
   ＝ここに置いた要素の mix-blend-mode は face 自身の背景（cream/parchment/blue）に正しく届く。
   逆に face の外（.lys-card の上端より上）へはみ出す配置は、.lys-card の transform が作る
   stacking context の中で「何も塗られていない」領域に対して blend することになり、
   素材の白台紙がそのまま矩形に浮いて見える危険があるため今回は採用していない（PHP 側コメント参照） */
.lys-card-deco {
    position: absolute;
    pointer-events: none;
}
.lys-card-deco img { display: block; width: 100%; height: auto; }

/* 0: 回形針 — 左上角、8deg、darken */
.lys-card-deco--paperclip {
    top: 2px;
    left: 8px;
    width: 24px;
    transform: rotate(8deg);
    mix-blend-mode: darken;
}
/* 1: 铃兰押花 — タグ行右側、-10deg、darken */
.lys-card-deco--sprig {
    bottom: 6px;
    right: 10px;
    width: 72px;
    transform: rotate(-10deg);
    mix-blend-mode: darken;
}
/* 2: 白蕾丝三角角饰 — 左下貼角、真透明のため blend 不要 */
.lys-card-deco--corner {
    bottom: 0;
    left: 0;
    width: 104px;
    opacity: 0.92;
}
/* 3: 麻绳蝴蝶结 — タイトル行の少し上・左前方、darken */
.lys-card-deco--twine {
    top: 44px;
    left: -2px;
    width: 44px;
    mix-blend-mode: darken;
}

/* 装飾と本文の衝突回避 — 該当コーナーのテキストにだけ僅かな余白を足す（目測値・実機で微調整） */
.lys-card--d0 .lys-card-meta { padding-left: 20px; }
.lys-card--d3 .lys-card-title { padding-left: 20px; }
.lys-card--d1 .lys-card-tags { padding-right: 80px; }
.lys-card--d2 .lys-card-tags { padding-left: 96px; }

/* ========================================
   7. サイドバー — 楕円浮彫カメオ額
   （黄铜×レースの profile-frame.webp を丸ごと背景に、内容は %+cqw で重ねる。
    容器幅 240〜340px の間で破綻しないことを確認済みの工法：整図不裁+叠层内容+cqw）
   ======================================== */
.lys-cameo {
    position: sticky;
    top: calc(var(--lys-navbar-height) + var(--lys-space-lg));
    width: 100%;
    aspect-ratio: 761 / 1390;
    background-image: url('images/cameo-arch.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    container-type: inline-size;
}

/* 頭像 — 拱窗の星空上部に収める（拱内 x25-75.6% / y10-69%、頭像中心は約 24%） */
.lys-cameo-avatar {
    position: absolute;
    top: 24%;
    left: 50%;
    width: 34%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--lys-cream), 0 0 0 3px var(--lys-cocoa);
}
.lys-cameo-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 站点名・问候语 — 青地の上なので cocoa 文字 + cream の淡い縁取りで可読性を確保（渐变は使わない）
   二行とも独立 absolute だと文字拡大時に衝突するため、一つの流し込みコンテナに同居させる（task-009 星璇指摘） */
.lys-cameo-text {
    position: absolute;
    top: 48%;
    left: 50%;
    width: 74%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.lys-cameo-name {
    font-family: var(--lys-font-display);
    font-weight: 500;
    letter-spacing: 1px;
    font-size: clamp(12px, 5.6cqw, 19px);
    color: var(--lys-cocoa);
    margin-bottom: 2.4cqw;
    text-shadow: 0 0 3px var(--lys-cream), 0 0 3px var(--lys-cream), 0 1px 1px var(--lys-cream);
}

.lys-cameo-greeting {
    font-size: clamp(9px, 3.8cqw, 13px);
    color: var(--lys-cocoa);
    text-shadow: 0 0 3px var(--lys-cream), 0 0 3px var(--lys-cream);
}

/* 三列統計 — 拱窗内の cream 牌匾（x 19-81% / y 65-78%、百合の侵入する下縁は避けて上寄せ） */
.lys-cameo-stats {
    position: absolute;
    top: 65%;
    left: 20%;
    width: 60%;
    height: 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lys-cameo-stat { text-align: center; flex: 1; }
.lys-cameo-stat-num {
    display: block;
    font-size: clamp(11px, 4.5cqw, 15px);
    font-weight: 600;
    color: var(--lys-cocoa);
}
.lys-cameo-stat-label {
    font-size: clamp(7px, 2.85cqw, 9.5px);
    color: var(--lys-text-muted);
}

/* ========================================
   8. カテゴリページ — 作品カード壁 + 章節リスト + 画廊
   ======================================== */
.lys-category-main {
    display: block;
    max-width: var(--lys-container-width);
    margin: 0 auto;
    padding: var(--lys-space-xl) var(--lys-space-lg) 120px;
}

.lys-work-header {
    text-align: center;
    margin-bottom: var(--lys-space-xl);
    padding: var(--lys-space-xl) 0;
}

.lys-work-header-parent {
    font-size: var(--lys-font-sm);
    margin-bottom: var(--lys-space-sm);
}
.lys-work-header-parent a {
    color: var(--lys-text-muted);
    letter-spacing: 2px;
}

.lys-work-header-title {
    font-family: var(--lys-font-body);
    font-size: var(--lys-font-xl);
    font-weight: 600;
    color: var(--lys-cocoa);
    margin-bottom: var(--lys-space-md);
}

/* 竪書きタイトル */
.lys-vertical-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: inline-block;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    letter-spacing: 0.15em;
    line-height: 1.8;
    margin: var(--lys-space-lg) auto;
    padding: var(--lys-space-md) var(--lys-space-sm);
    border-right: 1px solid var(--lys-line);
    border-left: 1px solid var(--lys-line);
}

.lys-work-header-meta {
    font-size: var(--lys-font-sm);
    color: var(--lys-text-muted);
    margin-bottom: var(--lys-space-sm);
}

.lys-work-header-desc {
    font-size: var(--lys-font-base);
    color: var(--lys-text-muted);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

.lys-work-card-sep {
    margin: 0 6px;
    color: var(--lys-text-muted);
}

/* 作品カード壁 */
.lys-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--lys-space-lg);
}

.lys-work-card {
    display: block;
    background: var(--lys-cream-card);
    border: 1px solid var(--lys-line);
    border-radius: var(--lys-radius);
    padding: var(--lys-space-xl) var(--lys-space-lg);
    text-align: center;
    color: var(--lys-text);
    transition: transform var(--lys-transition-base) var(--lys-ease-out),
                box-shadow var(--lys-transition-base) var(--lys-ease-out),
                border-color var(--lys-transition-base);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px);
}
.lys-work-card.is-visible { opacity: 1; transform: translateY(0); }
.no-js .lys-work-card { opacity: 1; transform: none; }

.lys-work-card:hover {
    transform: translateY(-3px);
    border-color: var(--lys-blue-deep);
    box-shadow: 0 12px 26px rgba(110, 87, 63, 0.12);
    color: var(--lys-text);
}

.lys-work-card-deco {
    font-size: 20px;
    color: var(--lys-line);
    margin-bottom: var(--lys-space-md);
}

.lys-work-card-title {
    font-size: var(--lys-font-lg);
    font-weight: 600;
    margin-bottom: var(--lys-space-sm);
    color: var(--lys-cocoa);
}

.lys-work-card-desc {
    font-size: var(--lys-font-sm);
    color: var(--lys-text-muted);
    margin-bottom: var(--lys-space-md);
    line-height: 1.6;
}

.lys-work-card-stats {
    font-size: var(--lys-font-sm);
    color: var(--lys-blue-deep);
    font-weight: 500;
}

/* Tab 切替 */
.lys-work-tabs {
    display: flex;
    justify-content: center;
    gap: var(--lys-space-lg);
    margin-bottom: var(--lys-space-lg);
    border-bottom: 1px solid var(--lys-line);
    padding-bottom: var(--lys-space-md);
}

.lys-work-tab {
    background: none;
    border: none;
    font-family: var(--lys-font-body);
    font-size: var(--lys-font-base);
    color: var(--lys-text-muted);
    cursor: pointer;
    padding: var(--lys-space-sm) var(--lys-space-md);
    position: relative;
    transition: color var(--lys-transition-fast);
}

.lys-work-tab.active {
    color: var(--lys-cocoa);
    font-weight: 600;
}

.lys-work-tab.active::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--lys-space-md) - 1px);
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lys-blue-deep);
}

.lys-tab-panel { display: none; }
.lys-tab-panel.active { display: block; }

/* 章節リスト */
.lys-chapter-list {
    max-width: 700px;
    margin: 0 auto;
}

.lys-chapter-item {
    display: flex;
    align-items: center;
    padding: var(--lys-space-md);
    border-bottom: 1px solid var(--lys-cream-deep);
    color: var(--lys-text);
    transition: background var(--lys-transition-fast);
    gap: var(--lys-space-md);
}
.lys-chapter-item:hover { background: var(--lys-cream-deep); }
.lys-chapter-item:first-child { border-top: 1px solid var(--lys-cream-deep); }

.lys-chapter-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--lys-text-muted);
    background: var(--lys-cream);
    border: 1px solid var(--lys-line);
    border-radius: 50%;
    flex-shrink: 0;
}

.lys-chapter-title {
    flex: 1;
    font-size: var(--lys-font-base);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lys-chapter-meta {
    font-size: var(--lys-font-sm);
    color: var(--lys-text-muted);
    display: flex;
    gap: var(--lys-space-md);
    flex-shrink: 0;
}

/* 画廊グリッド */
.lys-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--lys-space-md);
}

.lys-gallery-item {
    border-radius: var(--lys-radius);
    overflow: hidden;
    background: var(--lys-cream-card);
    border: 1px solid var(--lys-line);
    transition: transform var(--lys-transition-base) var(--lys-ease-out),
                box-shadow var(--lys-transition-base) var(--lys-ease-out);
    opacity: 0;
    transform: translateY(24px);
}
.lys-gallery-item.is-visible { opacity: 1; transform: translateY(0); }
.no-js .lys-gallery-item { opacity: 1; transform: none; }

.lys-gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(110, 87, 63, 0.14);
}

.lys-gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.lys-gallery-title {
    padding: var(--lys-space-sm) var(--lys-space-md);
    font-size: var(--lys-font-sm);
    color: var(--lys-text-muted);
    text-align: center;
}

@media (max-width: 768px) {
    .lys-vertical-title {
        writing-mode: horizontal-tb;
        border-right: none;
        border-left: none;
        border-bottom: 1px solid var(--lys-line);
        padding: 0 0 var(--lys-space-sm);
    }
    .lys-works-grid { grid-template-columns: 1fr; }
    .lys-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================
   9. 記事ページ（沉浸読書モード）
   ======================================== */

/* 沉浸ナビ — 常に奶油底・可可字（スクロールで下辺線と影のみ変化） */
.lys-immersive-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 var(--lys-space-lg);
    z-index: 1000;
    background: var(--lys-cream);
    border-bottom: 1px solid transparent;
    transition: border-color var(--lys-transition-base), box-shadow var(--lys-transition-base);
}

.lys-immersive-nav.is-scrolled {
    border-bottom-color: var(--lys-line);
    box-shadow: 0 2px 10px rgba(110, 87, 63, 0.06);
}

.lys-immersive-home {
    font-size: 18px;
    color: var(--lys-cocoa) !important;
}

/* 記事ヘッダー — 奶油底・可可字・divider 飾線（渐变禁止のため深蓝グラデーション区は不採用） */
.lys-article-header {
    background: var(--lys-cream-deep);
    /* ≤1024px は左カラムが消え「粉蓝」が失われるため、頂部に細い蓝帯+蕾丝で基因を残す（task-010 終検） */
    padding: calc(52px + var(--lys-space-2xl)) var(--lys-space-lg) var(--lys-space-xl);
    text-align: center;
    position: relative;
    width: 100vw;
}

/* 隅に淡く押された邮戳 — .lys-article-header の直下の子に留めることで
   mix-blend-mode が親の cream-deep 背景まで届く（同じ理由で下の inner には position を足さない） */
.lys-article-header-postmark {
    position: absolute;
    top: 70px;
    right: 6%;
    width: 104px;
    height: auto;
    opacity: 0.85;
    mix-blend-mode: darken;
    transform: rotate(-8deg);
    pointer-events: none;
}

/* 注意: ここに position/z-index を足すと stacking context が生まれ、
   divider の mix-blend-mode が背景色に届かなくなる */
.lys-article-header-inner {
    max-width: var(--lys-content-wide);
    margin: 0 auto;
}

/* Lettre 三期 — 行1「✦ 第N話 ✦」（連載でなければ最深分類名にフォールバック、single.php 側で判定） */
.lys-article-deco {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--lys-line);
    margin-bottom: var(--lys-space-sm);
}
.lys-article-deco-star { font-size: 10px; }

/* 行2: 大見出し */
.lys-article-title {
    font-family: var(--lys-font-body);
    font-size: clamp(1.75rem, 2.6vw, 2rem);
    font-weight: 600;
    color: var(--lys-cocoa);
    line-height: 1.5;
    margin: var(--lys-space-md) 0;
}

/* 行3: 日付・分類（.lys-article-meta）＋ 字数（lys_get_work_info_header 既存出力）を1行にまとめる */
.lys-article-subline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: var(--lys-space-md);
}
.lys-article-subline-sep { color: var(--lys-line); opacity: 0.7; margin: 0 4px; }

.lys-article-meta {
    font-size: var(--lys-font-sm);
    color: var(--lys-text-muted);
}
.lys-article-meta a { color: var(--lys-text-muted); }
.lys-article-meta a:hover { color: var(--lys-blue-deep); }

.lys-work-info {
    font-size: var(--lys-font-sm);
    color: var(--lys-text-muted);
}
.lys-work-info a { color: var(--lys-text-muted); }
.lys-work-info a:hover { color: var(--lys-blue-deep); }
.lys-info-sep { margin: 0 6px; opacity: 0.5; }

/* 字号選択 */
.lys-font-size {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--lys-space-sm);
    margin: var(--lys-space-md) 0;
}

.lys-font-size button {
    background: transparent;
    border: none;
    color: var(--lys-text-muted);
    font-family: var(--lys-font-body);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: var(--lys-radius);
    transition: all var(--lys-transition-fast);
}
.lys-font-size button:hover { color: var(--lys-cocoa); }
.lys-font-size button.active { color: var(--lys-blue-deep); font-weight: 600; }
.lys-font-size span { color: var(--lys-line); }

.lys-article-header-divider {
    display: block;
    width: min(360px, 70%);
    height: auto;
    margin: var(--lys-space-md) auto 0;
    opacity: 0.9;
    mix-blend-mode: darken;
}

/* 正文 — Lettre 三期: 読書エリア全体を cream-card 底に統一（信纸面板と地色を合わせる） */
.lys-article-content {
    max-width: var(--lys-content-width);
    margin: 0 auto;
    padding: var(--lys-space-xl) var(--lys-space-lg) var(--lys-space-2xl);
    background-color: var(--lys-cream-card);
}

@media (min-width: 1200px) {
    .lys-article-content { max-width: var(--lys-content-wide); }
}

/* 正文を信纸面板に包む — cream-card 底+舒适内边距+極輕い紙辺影。
   フォント切替 JS は #lys-article-body に直接 fontSize を書き込むだけなので、
   ここに padding/background を足しても字号切替ロジックには影響しない */
.lys-article-body {
    position: relative;
    /* z-index:0 を明示して独自の stacking context を作る（position:relative 単体では作られない）。
       ::before(z-index:-1) がこの中で「自分の背景より上・本文より下」に収まるようにするため */
    z-index: 0;
    font-size: var(--lys-font-md);
    line-height: 2;
    color: var(--lys-text);
    background: var(--lys-cream-card);
    padding: var(--lys-space-xl) var(--lys-space-lg);
    border-radius: var(--lys-radius);
    box-shadow: 0 2px 14px rgba(110, 87, 63, 0.07), 0 1px 2px rgba(110, 87, 63, 0.05);
}

/* 羊皮紙の質感層 — 「図ではなく質感だけ」を狙い opacity は極薄。
   pointer-events:none + z-index:-1 で選択/クリックを一切妨げない */
.lys-article-body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('images/parchment.webp');
    background-repeat: repeat;
    background-size: 512px 512px;
    opacity: 0.04;
    pointer-events: none;
    border-radius: inherit;
}

.lys-article-body p { margin-bottom: 1.5em; }

.lys-article-body h2, .lys-article-body h3, .lys-article-body h4 {
    font-weight: 600;
    color: var(--lys-cocoa);
    margin: 2em 0 0.8em;
    font-family: var(--lys-font-body);
}

.lys-article-body hr {
    border: none;
    text-align: center;
    margin: 2em 0;
    font-size: 12px;
    color: var(--lys-line);
    line-height: 1;
}
.lys-article-body hr::after {
    content: '✦  ·  ✦  ·  ✦';
}

.lys-article-body blockquote {
    border-left: 3px solid var(--lys-blue);
    padding: var(--lys-space-md) var(--lys-space-lg);
    margin: 1.5em 0;
    background: var(--lys-cream-deep);
    border-radius: 0 var(--lys-radius) var(--lys-radius) 0;
    font-style: italic;
    color: var(--lys-text-muted);
}

.lys-article-body img {
    border-radius: var(--lys-radius);
    margin: 1.5em auto;
}

/* 文末収信区 — 火漆印+署名で手紙の結び（Lettre 三期: 右下に拼贴を追加、モバイルは縦積みで縮小） */
.lys-letter-closing {
    position: relative;
    text-align: center;
    margin-top: 2.5em;
    padding-top: 1.5em;
}
.lys-letter-closing-seal {
    /* 火漆+署名のラッパー。デスクトップで拼贴と「同排」にする際の中央寄せグリッド用アンカー */
}
.lys-letter-seal {
    width: 88px;
    height: auto;
    margin: 0 auto var(--lys-space-sm);
    /* 底色は記事面板と同一 #FFFDF8 なので影は素材焼き込み分のみ（drop-shadow は矩形影になるため不可） */
}
.lys-letter-signature {
    font-family: var(--lys-font-display);
    font-style: italic;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--lys-text-muted);
}

/* 右下拼贴（青紙片+長尾夾）— 星璇 task-010 風険点対応:
   絶対配置+pointer-events:none+z-index を抑え、正文列（段落テキスト）には一切重ねない。
   モバイルは ~120px に縮小して署名の下に中央寄せで積む（安全区、字に絶対かからない） */
.lys-letter-collage {
    /* position:relative のみ（z-index は持たせない）— .lys-card-deco と同じ理屈で
       独自の stacking context を作らず、binder-clip の darken が blue-scrap まで正しく届くようにする。
       白カードの外＝羊皮紙の上に在り、負 margin で便箋の右下縁に跨る（紙の重なり·task-010 終検） */
    position: relative;
    width: 120px;
    margin: var(--lys-space-lg) auto 0;
    pointer-events: none;
}
@media (min-width: 1025px) {
    /* 便箋パネル（.lys-article-body=positioned）を錨に、右下へ悬出して紙の重なりを出す */
    .lys-letter-collage {
        position: absolute;
        width: 180px;
        right: -28px;
        bottom: -36px;
        margin: 0;
        z-index: 2;
    }
}
.lys-letter-collage-scrap {
    display: block;
    width: 100%;
    height: auto;
    transform: rotate(6deg);
}
.lys-letter-collage-clip {
    position: absolute;
    width: 44%;
    height: auto;
    top: -6%;
    left: 30%;
    transform: rotate(-4deg);
    mix-blend-mode: darken;
}

/* ========================================
   10. 章節ナビゲーション
   ======================================== */
/* 「上一封/下一封」細枠ナビ — thin brass 边框（--lys-line）で D 図の便箋らしさを再現 */
.lys-chapter-nav {
    margin-top: var(--lys-space-xl);
    border: 1px solid var(--lys-line);
    border-radius: var(--lys-radius);
    overflow: hidden;
    background: var(--lys-cream-card);
    box-shadow: 0 1px 2px rgba(110, 87, 63, 0.06);
}

.lys-nav-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--lys-cream-deep);
}

.lys-nav-item {
    flex: 1;
    text-align: center;
    padding: var(--lys-space-lg) var(--lys-space-md);
    transition: background var(--lys-transition-fast);
}
.lys-nav-item:not(:last-child) { border-right: 1px solid var(--lys-line); }
.lys-nav-item:hover { background: var(--lys-cream-deep); }

/* 前の話・次の話 — 片側寄せでレター風に */
.lys-nav-prev { text-align: left; }
.lys-nav-next { text-align: right; }
.lys-nav-prev .lys-nav-title::before { content: '‹ '; color: var(--lys-line); }
.lys-nav-next .lys-nav-title::after  { content: ' ›'; color: var(--lys-line); }

/* 目次 — 中央の小さな装飾符入りバッジ（::before と a を縦積みの flex 子として扱う）
   Lettre 三期: 视觉升级で拱窗铃兰線飾（arch-ornament.webp）を背後に薄く挿入。
   lys_get_chapter_nav() の出力 HTML 構造は不変・この CSS のみで完結する */
.lys-nav-index {
    position: relative;
    z-index: 0; /* ::after(z-index:-1) をこのバッジ自身の背景より上・文字より下に収める */
    flex: 0 0 92px;
    background: var(--lys-cream-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.lys-nav-index::before {
    content: '✦';
    font-size: 12px;
    color: var(--lys-line);
}
/* 拱窗铃兰線飾 — バッジ中央に薄く沈める装飾（目測値・実機で微調整対象） */
.lys-nav-index::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 52px;
    z-index: -1;
    background: url('images/arch-ornament.webp') no-repeat center / contain;
    opacity: 0.85;
    mix-blend-mode: darken;
    pointer-events: none;
}

.lys-nav-label {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lys-text-muted);
    margin-bottom: 2px;
}

.lys-nav-title {
    display: block;
    font-family: var(--lys-font-display);
    font-style: italic;
    font-size: var(--lys-font-sm);
    color: var(--lys-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lys-nav-chapter {
    font-size: var(--lys-font-base);
    font-weight: 600;
    color: var(--lys-blue-deep);
}

.lys-nav-item a {
    display: block;
    color: inherit;
}

/* 全話一覧 */
.lys-toc-section { border-top: 1px solid var(--lys-cream-deep); }

.lys-toc-toggle {
    width: 100%;
    padding: var(--lys-space-sm) var(--lys-space-md);
    background: transparent;
    border: none;
    font-family: var(--lys-font-body);
    font-size: var(--lys-font-sm);
    color: var(--lys-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lys-space-sm);
    transition: color var(--lys-transition-fast);
}
.lys-toc-toggle:hover { color: var(--lys-cocoa); }

.lys-toc-list {
    max-height: 300px;
    overflow-y: auto;
}

.lys-toc-item {
    display: flex;
    align-items: center;
    padding: var(--lys-space-sm) var(--lys-space-md);
    border-top: 1px solid var(--lys-cream-deep);
    color: var(--lys-text);
    transition: background var(--lys-transition-fast);
}
.lys-toc-item:hover { background: var(--lys-cream-deep); }
.lys-toc-item.is-current { background: var(--lys-cream-deep); font-weight: 600; }

.lys-toc-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--lys-text-muted);
    background: var(--lys-cream);
    border: 1px solid var(--lys-line);
    border-radius: 50%;
    margin-right: var(--lys-space-md);
    flex-shrink: 0;
}
.lys-toc-item.is-current .lys-toc-num {
    background: var(--lys-blue-deep);
    color: #fff;
    border-color: var(--lys-blue-deep);
}

/* ========================================
   11. コメント
   ======================================== */
.lys-comments-section {
    margin-top: var(--lys-space-xl);
    background: var(--lys-cream-card);
    border: 1px solid var(--lys-line);
    border-radius: var(--lys-radius);
    padding: var(--lys-space-lg);
}

.lys-comments-title {
    font-size: var(--lys-font-md);
    margin-bottom: var(--lys-space-lg);
    color: var(--lys-cocoa);
    font-family: var(--lys-font-display);
}

.lys-comment-list { list-style: none; }

.lys-comment-list .comment {
    padding: var(--lys-space-md) 0;
    border-bottom: 1px solid var(--lys-cream-deep);
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
    width: 100%;
    padding: var(--lys-space-sm) var(--lys-space-md);
    font-family: var(--lys-font-body);
    font-size: var(--lys-font-base);
    background: var(--lys-cream);
    border: 1px solid var(--lys-line);
    border-radius: var(--lys-radius);
    color: var(--lys-text);
    transition: border-color var(--lys-transition-fast);
}
.comment-respond input:focus,
.comment-respond textarea:focus {
    border-color: var(--lys-blue-deep);
    outline: none;
    box-shadow: 0 0 0 3px rgba(175, 197, 216, 0.25);
}

.comment-respond .submit {
    background: var(--lys-cocoa);
    color: var(--lys-cream);
    border: none;
    padding: var(--lys-space-sm) var(--lys-space-xl);
    font-family: var(--lys-font-body);
    font-size: var(--lys-font-base);
    border-radius: var(--lys-radius);
    cursor: pointer;
    transition: background var(--lys-transition-fast);
}
.comment-respond .submit:hover { background: var(--lys-blue-deep); }

/* ========================================
   12. ページネーション
   ======================================== */
.lys-pagination {
    text-align: center;
    padding: var(--lys-space-xl) 0;
}

.lys-pagination .page-numbers {
    display: inline-block;
    padding: var(--lys-space-sm) 12px;
    margin: 0 2px;
    font-size: var(--lys-font-base);
    color: var(--lys-text-muted);
    border-radius: var(--lys-radius);
    transition: all var(--lys-transition-fast);
}
.lys-pagination .page-numbers:hover { color: var(--lys-cocoa); }
.lys-pagination .page-numbers.current {
    background: var(--lys-cocoa);
    color: var(--lys-cream);
}

/* ========================================
   13. フッター（上半分＝cream 地の文字エリア、下半分＝蓝蕾丝版权带）
   footer-trim.webp は Lettre 二期で不使用（ファイルは磁盘に残す・laceband.webp に置換）
   ======================================== */
.lys-footer {
    position: relative;
    background-color: var(--lys-cream);
    text-align: center;
}

.lys-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    height: 1px;
    background: var(--lys-line);
    opacity: 0.6;
}

.lys-footer-content {
    position: relative;
    z-index: 2;
    padding: var(--lys-space-xl) var(--lys-space-lg) var(--lys-space-lg);
}
.lys-footer-star { font-size: 16px; color: var(--lys-line); margin-bottom: var(--lys-space-sm); }
.lys-footer-title {
    color: var(--lys-cocoa);
    font-size: var(--lys-font-sm);
    letter-spacing: 1px;
    margin-bottom: var(--lys-space-sm);
    font-family: var(--lys-font-display);
}
.lys-footer-nav { margin-bottom: var(--lys-space-sm); }
.lys-footer-nav a { color: var(--lys-text-muted); font-size: var(--lys-font-sm); }
.lys-footer-nav a:hover { color: var(--lys-blue-deep); }
.lys-footer-sep { color: var(--lys-line); margin: 0 8px; }

/* 蓝蕾丝版权带 — laceband.webp（上沿 cream → 白蕾丝扇边 → 粉蓝星々帯）。
   ページの最下端要素：.lys-footer に下方向の padding/margin を足さないことで body 底辺と零缝を保つ */
.lys-footer-band {
    position: relative;
    width: 100%;
    height: clamp(150px, 16vw, 237px);
    background-image: url('images/laceband.webp');
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: auto 100%;
}

/* 帯内の文字は蕾丝扇边より下＝青地の星空エリアに落とす。
   % 基準の絶対配置にしてあるので、clamp() で帯の実高さが変わっても位置比率は崩れない */
.lys-footer-band-inner {
    position: absolute;
    left: 50%;
    top: 64%;
    transform: translate(-50%, -50%);
    width: 90%;
    color: #FFFDF8;
    text-shadow: 0 1px 2px rgba(110, 87, 63, 0.65), 0 0 6px rgba(110, 87, 63, 0.3);
}
.lys-footer-band-thanks {
    font-family: var(--lys-font-display);
    font-style: italic;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.lys-footer-band-copy {
    font-size: 12px;
    letter-spacing: 0.5px;
    opacity: 0.95;
}

/* ========================================
   14. 404
   ======================================== */
.lys-404 {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--lys-space-xl);
}

.lys-404-illustration img {
    width: 100%;
    max-width: 360px;
    height: auto;
    margin-bottom: var(--lys-space-lg);
    mix-blend-mode: darken;
}

.lys-404-deco { font-size: 24px; color: var(--lys-line); margin-bottom: var(--lys-space-md); }
.lys-404 h1 { font-size: var(--lys-font-2xl); color: var(--lys-cocoa); font-family: var(--lys-font-display); }
.lys-404 p { color: var(--lys-text-muted); margin: var(--lys-space-sm) 0 var(--lys-space-lg); }

.lys-404-actions { display: flex; gap: var(--lys-space-md); }

.lys-btn {
    padding: var(--lys-space-sm) var(--lys-space-xl);
    font-family: var(--lys-font-body);
    font-size: var(--lys-font-base);
    border-radius: var(--lys-radius);
    cursor: pointer;
    transition: all var(--lys-transition-fast);
    border: none;
    text-decoration: none;
    display: inline-block;
}
.lys-btn-cocoa { background: var(--lys-cocoa); color: var(--lys-cream); }
.lys-btn-cocoa:hover { background: var(--lys-blue-deep); color: #fff; }
.lys-btn-outline { background: transparent; border: 1px solid var(--lys-cocoa); color: var(--lys-cocoa); }
.lys-btn-outline:hover { border-color: var(--lys-blue-deep); color: var(--lys-blue-deep); }

/* ========================================
   15. 空状態 & 検索ヘッダー
   ======================================== */
.lys-empty {
    text-align: center;
    padding: var(--lys-space-2xl) var(--lys-space-lg);
    color: var(--lys-text-muted);
}
.lys-empty-star { font-size: 36px; margin-bottom: var(--lys-space-md); opacity: 0.5; color: var(--lys-line); }
.lys-empty p { font-size: var(--lys-font-base); }

.lys-search-header h1 {
    font-size: var(--lys-font-lg);
    font-weight: 500;
    color: var(--lys-text);
    margin-bottom: var(--lys-space-lg);
    font-family: var(--lys-font-display);
}

/* ========================================
   16. 庭園深処メッセージ
   ======================================== */
.lys-garden-deep {
    text-align: center;
    padding: 30px 20px 10px;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}
.lys-garden-deep.is-visible { opacity: 1; transform: translateY(0); }
.no-js .lys-garden-deep { opacity: 1; transform: none; }
.lys-garden-deep span {
    font-family: var(--lys-font-display);
    font-size: 14px;
    font-style: italic;
    letter-spacing: 2px;
    color: var(--lys-text-muted);
    opacity: 0.7;
}

/* ========================================
   17. ページ（固定ページ）
   ======================================== */
.lys-page-content { max-width: var(--lys-content-wide); margin: 0 auto; }

.lys-page-title {
    font-size: var(--lys-font-xl);
    font-weight: 600;
    margin-bottom: var(--lys-space-lg);
    color: var(--lys-cocoa);
    font-family: var(--lys-font-display);
}

.lys-page-body {
    font-size: var(--lys-font-base);
    line-height: 1.9;
}

.lys-list-divider { text-align: center; padding: var(--lys-space-lg) 0; }
.lys-list-divider img { width: min(320px, 60%); height: auto; margin: 0 auto; }

/* ========================================
   18. ページ遷移オーバーレイ
   ======================================== */
.lys-page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: var(--lys-cream);
    opacity: 0;
}

/* ========================================
   19. prefers-reduced-motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .lys-card, .lys-work-card, .lys-gallery-item, .lys-garden-deep {
        opacity: 1 !important;
        transform: none !important;
    }
    .lys-twinkle { opacity: 0.3 !important; }
}

/* ========================================
   20. モバイル対応
   ======================================== */
@media (max-width: 768px) {
    .lys-navbar-title { display: none; }

    .lys-banner-home { padding-bottom: var(--lys-space-xl); }
    .lys-banner-caption { padding: 0 var(--lys-space-md); }
    .lys-banner-subtitle { font-size: 0.72rem; }
    .lys-banner-entry { font-size: 10px; letter-spacing: 1.5px; }
    .lys-twinkle { display: none; }

    .lys-container { padding: 0 var(--lys-space-md); }
    .lys-article-content { padding: var(--lys-space-lg) var(--lys-space-md); }

    /* padding 簡写は右の切手余白を潰すので必ず個別で戻す（task-009 星璇指摘） */
    .lys-card-body { padding: var(--lys-space-md); padding-right: 84px; }
    .lys-card-stamp { width: 56px; top: 10px; right: 12px; }
    .lys-card-thumb { width: 100px; margin: var(--lys-space-md) var(--lys-space-sm) var(--lys-space-xs) var(--lys-space-md); }
    .lys-card-thumb img { height: 84px; }
    .lys-card-envelope { width: 92px; bottom: -14px; }

    .lys-article-header-postmark { width: 76px; top: 62px; right: 4%; }
    .lys-article-body { padding: var(--lys-space-lg) var(--lys-space-md); }

    .lys-404-actions { flex-direction: column; width: 100%; }
}

/* 便箋の装飾（邮票・信封）は正文を圧迫しないよう、狭幅では縮小/非表示に切り替える */
@media (max-width: 560px) {
    /* 標題区メタ行 — 375-390px で不可控折行するため、日付行とタグ行を縦積みに（task-010 終検） */
    .lys-article-subline { flex-direction: column; gap: 3px; }
    .lys-article-subline-sep { display: none; }

    .lys-card-envelope { display: none; }
    .lys-card-stamp { width: 48px; }
    .lys-card-body { padding-right: 72px; }
    .lys-card-thumb { float: none; width: 88px; margin: var(--lys-space-md) auto var(--lys-space-sm); }
    .lys-article-header-postmark { display: none; }

    /* 百宝拼贴装飾：sprig/lace-corner は非表示、paperclip/twine は 70% に縮小 */
    .lys-card-deco--sprig,
    .lys-card-deco--corner { display: none; }
    .lys-card-deco--paperclip { width: 17px; }
    .lys-card-deco--twine { width: 31px; }
}

/* 1:1 方屏 */
@media (aspect-ratio: 1/1), (max-aspect-ratio: 1/1) {
    /* padding 簡写は right の切手余白を潰すので個別指定で戻す */
    .lys-card-body { padding: var(--lys-space-md); padding-right: 72px; }
}

/* ワイドスクリーン */
@media (min-width: 1600px) {
    .lys-article-content { max-width: 1100px; }
}

/* ========================================
   21. Lettre 三期 — 阅读页二欄レイアウト（デスクトップ ≥1025px）
   星璇 task-010 評審に基づく。single.php + functions.php(lys_get_chapter_index 抽出) と対
   ======================================== */

/* 外枠 — モバイル/タブレット(≤1024px)は単欄のまま（既存の検証済み表現を維持） */
.lys-letter-page {
    display: block;
}

/* 左カラム — デスクトップのみ描画。モバイルは丸ごと非表示 */
.lys-letter-aside {
    display: none;
}

.lys-letter-main {
    display: block;
    width: 100%;
}

@media (min-width: 1025px) {
    /* 沉浸ナビは左カラムがナビを兼ねるため非表示（星璇冲突点対応） */
    .lys-immersive-nav { display: none; }

    .lys-letter-page {
        display: flex;
        align-items: stretch;
        min-height: 100vh;
    }

    .lys-letter-aside {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 240px;
        width: 240px;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        padding: var(--lys-space-2xl) var(--lys-space-lg) var(--lys-space-xl);
        background: var(--lys-aside-blue);
    }

    /* 右縁の蕾丝隔断 — aside は sticky(=positioned) なのでラッパー不要、::after を直接載せる */
    /* 蕾丝隔断は main 側の左縁に掛ける — aside は overflow:auto のため、
       負 right ではみ出す子を持たせると水平スクロールバーが出る（実機で踏んだ） */
    .lys-letter-main::before {
        content: '';
        position: absolute;
        top: 0;
        left: -22px;
        width: 44px;
        height: 100%;
        background: url('images/laceband-vert.webp') repeat-y;
        background-size: 100% auto;
        pointer-events: none;
        z-index: 2;
    }

    .lys-letter-aside-crest { margin-bottom: var(--lys-space-xl); }
    .lys-letter-aside-crest img {
        display: block;
        width: 72px;
        height: auto;
        margin: 0 auto;
    }

    .lys-letter-aside-nav {
        display: flex;
        flex-direction: column;
        gap: var(--lys-space-lg);
        width: 100%;
    }
    .lys-letter-aside-nav a,
    .lys-letter-aside-search {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--lys-font-body);
        font-size: var(--lys-font-sm);
        color: var(--lys-cocoa);
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        text-align: left;
        transition: opacity var(--lys-transition-fast);
    }
    .lys-letter-aside-nav a:hover,
    .lys-letter-aside-search:hover { opacity: 0.65; color: var(--lys-cocoa); }
    .lys-letter-aside-icon { flex-shrink: 0; stroke: var(--lys-cocoa); }

    /* 引用句 — CJK は斜体を使わず、普通排+字距で「引用らしさ」を出す（task 指定） */
    .lys-letter-aside-quote {
        font-family: var(--lys-font-body);
        font-style: normal;
        font-size: 12px;
        line-height: 1.9;
        letter-spacing: 1.5px;
        color: var(--lys-cocoa);
        opacity: 0.6;
        text-align: center;
        margin: var(--lys-space-xl) 0 0;
    }

    /* 押花 — 常に底に固定し、長文でも下端が空洞化しないようにする（星璇 風険点1対応） */
    .lys-letter-aside-sprig {
        width: 90px;
        height: auto;
        margin-top: auto;
        padding-top: var(--lys-space-xl);
        mix-blend-mode: darken;
        pointer-events: none;
    }

    .lys-letter-main {
        flex: 1;
        min-width: 0;
        position: relative; /* ::before 蕾丝隔断の錨 */
    }

    /* 記事ヘッダーは元々 width:100vw で全幅ブリードしていたが、二欄化後は main 列に収める。
       沉浸ナビが非表示になるためその分の上余白補正（52px）も不要 */
    .lys-letter-main .lys-article-header {
        width: 100%;
        padding-top: var(--lys-space-2xl);
    }

    /* 文末収信区 — 火漆(中央)と拼贴(右)を同じ行に。拼贴は正文列に侵入しない範囲で右端に寄せる
       （星璇 風険点: the_content 後の収尾区域内に収め、絶対配置は pointer-events:none） */
    .lys-letter-closing {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .lys-letter-closing-seal { flex: 0 0 auto; }
    .lys-letter-collage {
        position: absolute;
        right: 0;
        bottom: -6px;
        width: 180px;
        margin: 0;
    }
}

/* ≤1024px — 左カラム消失時も改版の核心色を残す：沉浸ナビ自身に蓝帯+蕾丝を着せる
   （標題区に別レイヤを敷く案は不透明ナビ条に隠れて無意味＝実機で確認済み·task-010 終検・低） */
@media (max-width: 1024px) {
    body.single .lys-immersive-nav {
        background-color: var(--lys-blue);
        background-image: url('images/laceband-flip.webp');
        background-repeat: repeat-x;
        background-position: top;
        background-size: auto 130%;
    }
    body.single .lys-immersive-nav .lys-immersive-home { color: #FFFDF8; text-shadow: 0 1px 2px rgba(110,87,63,.5); }
}