/*
Theme Name: Lunelle
Theme URI:
Author: KKS
Author URI:
Description: Beautiful. Fast. Intelligent. The AI Native WordPress Theme. AI・SEO・ブログ収益化を支えるモジュール拡張基盤を内蔵したオリジナル WordPress テーマ。記事作成支援・公開前チェック・内部リンク提案・AI 分析など、ブログ運営を AI が一気通貫でサポートします。
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lunelle
Tags: blog, custom-colors, custom-logo, custom-menu, dark-mode, editor-style, featured-images, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, two-columns, wide-blocks
*/

/* =====================================================================
   1. Design Tokens（ライト/ダーク/グラスの3レイヤーをCSS変数で管理）
   ===================================================================== */
:root{
  /* ベースカラー（ライト） */
  --l-bg:        #FFFFFF;
  --l-surface:   #F5F5F7;
  --l-surface-2: #EDEDF0;
  --l-text:      #1D1D1F;
  --l-text-sub:  #6E6E73;
  --l-line:      rgba(0,0,0,.08);

  /* アクセント（テーマカラー：カスタマイザーで変更可能） */
  --l-accent-1:  #6366F1; /* indigo */
  --l-accent-2:  #8B5CF6; /* violet */
  --l-accent-solid: var(--l-accent-1);
  --l-accent-gradient: linear-gradient(135deg, var(--l-accent-1), var(--l-accent-2));
  --l-on-accent: #FFFFFF;

  /* 形状・余白・影 */
  --l-radius-lg:  20px;
  --l-radius-md:  14px;
  --l-radius-sm:  10px;
  --l-radius-pill: 999px;
  --l-shadow-sm:  0 4px 16px rgba(20,20,30,.06);
  --l-shadow-md:  0 12px 32px rgba(20,20,30,.10);
  --l-shadow-lg:  0 24px 64px rgba(20,20,30,.16);
  --l-max: 1180px;
  --l-max-article: 720px;

  /* ガラスエフェクト（既定OFF。カスタマイザー or body classでON） */
  --l-glass-bg: rgba(255,255,255,.7);
  --l-glass-blur: 18px;
  --l-glass-line: rgba(255,255,255,.4);

  --l-font-base: -apple-system, BlinkMacSystemFont, "Inter", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --l-font-display: -apple-system, BlinkMacSystemFont, "Inter", "Hiragino Sans", "Noto Sans JP", sans-serif;

  --l-anim-speed: .25s;
}

/* ダークモード（カスタマイザー設定 or 端末設定により html.l-dark が付与される） */
html.l-dark{
  --l-bg:        #0B0B0F;
  --l-surface:   #15151B;
  --l-surface-2: #1D1D24;
  --l-text:      #F5F5F7;
  --l-text-sub:  #9A9AA2;
  --l-line:      rgba(255,255,255,.10);
  --l-glass-bg:  rgba(21,21,27,.6);
  --l-glass-line: rgba(255,255,255,.08);
  --l-shadow-sm: 0 4px 16px rgba(0,0,0,.35);
  --l-shadow-md: 0 12px 32px rgba(0,0,0,.45);
  --l-shadow-lg: 0 24px 64px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark){
  html.l-mode-auto{
    --l-bg:#0B0B0F;--l-surface:#15151B;--l-surface-2:#1D1D24;--l-text:#F5F5F7;--l-text-sub:#9A9AA2;
    --l-line:rgba(255,255,255,.10);--l-glass-bg:rgba(21,21,27,.6);--l-glass-line:rgba(255,255,255,.08);
  }
}

/* グラデーション無効時（カスタマイザーでOFF）は単色アクセントへ統一 */
html.l-no-gradient{ --l-accent-gradient: var(--l-accent-solid); }

/* アニメーション無効時（カスタマイザー設定）／reduced-motion時 */
html.l-no-anim *,
html.l-no-anim *::before,
html.l-no-anim *::after{ transition:none !important; animation:none !important; }

/* =====================================================================
   2. Reset / Base
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html,body{max-width:100%;overflow-x:hidden;}
body{
  margin:0;background:var(--l-bg);color:var(--l-text);
  font-family:var(--l-font-base);line-height:1.75;font-size:16px;
  -webkit-font-smoothing:antialiased;transition:background var(--l-anim-speed) ease, color var(--l-anim-speed) ease;
}
h1,h2,h3,h4,h5{
  font-family:var(--l-font-display);font-weight:700;line-height:1.3;margin:0 0 .6em;letter-spacing:-.01em;
}
h1{font-size:clamp(28px,4.2vw,42px);}
h2{font-size:clamp(22px,3vw,28px);}
h3{font-size:clamp(18px,2.4vw,21px);}
p{margin:0 0 1.4em;}
a{color:var(--l-accent-solid);text-decoration:none;transition:color var(--l-anim-speed) ease;}
a:hover{opacity:.8;}
/* アクセシビリティ：本文中のリンクは色だけでなく下線でも識別できるようにする
   （ナビゲーション・ボタン・カード等の構造的に明確なリンクは対象外とする） */
.l-entry-content a:not(.l-btn):not(.l-btn-outline),
.l-faq-q a, .l-faq-a a,
.l-search-faq a{
  text-decoration:underline;text-decoration-color:rgba(99,102,241,.35);text-underline-offset:2px;
}
.l-entry-content a:hover,.l-entry-content a:focus-visible{text-decoration-color:currentColor;}
img,video,iframe,embed,object{max-width:100%;height:auto;}
ul,ol{padding-left:1.3em;}
.l-container{max-width:var(--l-max);margin:0 auto;padding:0 24px;width:100%;}
.visually-hidden{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* フォーカス可視化・スキップリンク（アクセシビリティ） */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--l-accent-solid);outline-offset:2px;border-radius:4px;
}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:8px;top:8px;background:var(--l-bg);color:var(--l-text);padding:10px 16px;z-index:9999;border-radius:var(--l-radius-sm);box-shadow:var(--l-shadow-md);}

/* 表組み・コード等の崩れ防止（グローバル共通） */
table{max-width:100%;width:100%;border-collapse:collapse;display:block;overflow-x:auto;margin:1.6em 0;}
table th,table td{padding:10px 14px;border:1px solid var(--l-line);font-size:14.5px;text-align:left;}
table th{background:var(--l-surface);}
pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word;background:#15151B;color:#F1F1F4;border-radius:var(--l-radius-sm);padding:18px;font-size:13.5px;}
code{font-size:.92em;background:var(--l-surface);padding:.15em .4em;border-radius:4px;}
pre code{background:none;padding:0;color:inherit;}

/* =====================================================================
   3. ユーティリティ：グラスエフェクト・グラデーションテキスト・ボタン
   ===================================================================== */
.l-glass{
  background:var(--l-glass-bg);
  -webkit-backdrop-filter:blur(var(--l-glass-blur)) saturate(160%);
  backdrop-filter:blur(var(--l-glass-blur)) saturate(160%);
  border:1px solid var(--l-glass-line);
}
.l-gradient-text{
  background:var(--l-accent-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.l-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--l-accent-gradient);color:var(--l-on-accent);border:none;border-radius:var(--l-radius-pill);
  padding:14px 28px;font-size:15px;font-weight:600;cursor:pointer;min-height:48px;line-height:1.2;
  transition:transform var(--l-anim-speed) ease, box-shadow var(--l-anim-speed) ease;
}
.l-btn:hover{transform:translateY(-2px);box-shadow:var(--l-shadow-md);opacity:1;}
.l-btn-outline{
  background:transparent;color:var(--l-text);border:1.5px solid var(--l-line);
}
.l-btn-outline:hover{border-color:var(--l-accent-solid);color:var(--l-accent-solid);}
.l-card{
  background:var(--l-surface);border:1px solid var(--l-line);border-radius:var(--l-radius-lg);
  transition:transform var(--l-anim-speed) ease, box-shadow var(--l-anim-speed) ease;
}
.l-card:hover{transform:translateY(-3px);box-shadow:var(--l-shadow-md);}

/* =====================================================================
   4. Header / Navigation
   ===================================================================== */
.l-header{
  position:sticky;top:0;z-index:200;background:var(--l-glass-bg);
  -webkit-backdrop-filter:blur(var(--l-glass-blur)) saturate(160%);
  backdrop-filter:blur(var(--l-glass-blur)) saturate(160%);
  border-bottom:1px solid var(--l-line);
}
.l-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;}
.l-branding{display:flex;align-items:center;gap:10px;}
.l-branding img{max-height:36px;width:auto;}
.l-site-title{font-size:20px;font-weight:800;margin:0;letter-spacing:-.02em;}
.l-site-title a{color:var(--l-text);}
.l-tagline{font-size:11px;color:var(--l-text-sub);margin:0;}

.l-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;}
.l-nav a{font-size:14.5px;font-weight:600;color:var(--l-text);}
.l-nav a:hover{color:var(--l-accent-solid);opacity:1;}

.l-nav-toggle{
  display:none;background:none;border:1px solid var(--l-line);border-radius:var(--l-radius-sm);
  width:44px;height:44px;cursor:pointer;position:relative;
}
.l-nav-toggle span{position:absolute;left:11px;right:11px;height:2px;background:var(--l-text);transition:var(--l-anim-speed) ease;}
.l-nav-toggle span:nth-child(1){top:15px;}
.l-nav-toggle span:nth-child(2){top:21px;}
.l-nav-toggle span:nth-child(3){top:27px;}
.l-nav-toggle[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg);}
.l-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.l-nav-toggle[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg);}

.l-mode-toggle{
  background:var(--l-surface);border:1px solid var(--l-line);border-radius:50%;
  width:40px;height:40px;cursor:pointer;font-size:15px;color:var(--l-text);
}

/* =====================================================================
   5. Hero
   ===================================================================== */
.l-hero{padding:clamp(56px,9vw,120px) 0;text-align:center;position:relative;overflow:hidden;}
.l-hero-badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:var(--l-radius-pill);
  font-size:12.5px;font-weight:700;margin-bottom:24px;
}
.l-hero h1{max-width:760px;margin:0 auto 20px;}
.l-hero p.l-hero-sub{max-width:560px;margin:0 auto 32px;color:var(--l-text-sub);font-size:17px;}
.l-hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* =====================================================================
   6. Sections / Cards grid
   ===================================================================== */
.l-section{padding:clamp(48px,7vw,96px) 0;}
.l-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:32px;gap:16px;flex-wrap:wrap;}
.l-section-head .l-more{font-size:13.5px;font-weight:700;}

.l-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.l-post-card{display:flex;flex-direction:column;overflow:hidden;}
.l-post-card .l-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--l-surface-2);border-radius:var(--l-radius-lg) var(--l-radius-lg) 0 0;}
.l-post-card .l-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.l-post-card:hover .l-thumb img{transform:scale(1.06);}
.l-post-card .l-body{padding:18px 20px 22px;}
.l-post-card .l-cat{font-size:11px;font-weight:700;color:var(--l-accent-solid);margin-bottom:8px;display:inline-block;}
.l-post-card h3{font-size:16.5px;margin-bottom:8px;}
.l-post-card h3 a{color:var(--l-text);}
.l-post-card .l-meta{font-size:12px;color:var(--l-text-sub);}

/* =====================================================================
   7. Footer
   ===================================================================== */
.l-footer{background:var(--l-surface);border-top:1px solid var(--l-line);margin-top:40px;padding:56px 0 28px;}
.l-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:36px;}
.l-footer-col h3{font-size:13px;letter-spacing:.05em;color:var(--l-text-sub);text-transform:uppercase;margin-bottom:14px;}
.l-footer-col ul{list-style:none;margin:0;padding:0;}
.l-footer-col li{margin-bottom:8px;font-size:13.5px;}
.l-footer-col a{color:var(--l-text);}
.l-footer-bottom{border-top:1px solid var(--l-line);padding-top:20px;text-align:center;font-size:12px;color:var(--l-text-sub);}

/* =====================================================================
   8. 記事ページ
   ===================================================================== */
.l-article{max-width:var(--l-max-article);margin:0 auto;padding:0 24px clamp(48px,7vw,96px);}
.l-eyecatch{border-radius:var(--l-radius-lg);overflow:hidden;margin-bottom:28px;aspect-ratio:16/9;background:var(--l-surface-2);}
.l-eyecatch img{width:100%;height:100%;object-fit:cover;}
.l-article-cat a{display:inline-block;background:var(--l-surface);color:var(--l-accent-solid);font-size:12px;font-weight:700;padding:5px 14px;border-radius:var(--l-radius-pill);margin-bottom:14px;}
.l-entry-meta{font-size:13px;color:var(--l-text-sub);margin-bottom:28px;display:flex;gap:16px;flex-wrap:wrap;}
.l-entry-content{font-size:16.5px;}
.l-entry-content h2{margin-top:2em;}
.l-entry-content blockquote{border-left:4px solid var(--l-accent-solid);margin:1.8em 0;padding:.6em 1.4em;background:var(--l-surface);border-radius:0 var(--l-radius-sm) var(--l-radius-sm) 0;font-style:italic;}

/* =====================================================================
   9. パンくず
   ===================================================================== */
.l-breadcrumbs{font-size:12.5px;color:var(--l-text-sub);padding:14px 0;}
.l-breadcrumbs a{color:var(--l-text-sub);}
.l-breadcrumbs a:hover{color:var(--l-accent-solid);}
.l-breadcrumbs .sep{margin:0 6px;}

/* =====================================================================
   10. サイドバー / ウィジェット
   ===================================================================== */
.l-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;max-width:var(--l-max);margin:0 auto;padding:clamp(48px,7vw,96px) 24px;}
.l-widget{padding:22px;margin-bottom:24px;border-radius:var(--l-radius-lg);}
.l-widget h2,.l-widget h3{font-size:13.5px;letter-spacing:.04em;margin-bottom:14px;color:var(--l-text-sub);text-transform:uppercase;}
.l-widget ul{list-style:none;margin:0;padding:0;}
.l-widget li{padding:9px 0;border-bottom:1px solid var(--l-line);font-size:13.5px;}
.l-widget li:last-child{border-bottom:none;}
.l-widget .search-form{display:flex;gap:8px;}
.l-widget .search-form input[type="search"]{flex:1;border:1px solid var(--l-line);border-radius:var(--l-radius-sm);padding:10px 12px;font-size:14px;min-height:44px;background:var(--l-bg);color:var(--l-text);}

/* =====================================================================
   11. 404 / 検索
   ===================================================================== */
.l-error{text-align:center;padding:clamp(48px,7vw,96px) 24px;max-width:600px;margin:0 auto;}
.l-error .l-code{font-size:72px;font-weight:900;}

/* =====================================================================
   12. レスポンシブ（320 / 375 / 390 / 414 / 768 / 1024）
   ===================================================================== */
@media (max-width:1024px){
  .l-layout{grid-template-columns:1fr;}
  .l-grid{grid-template-columns:repeat(2,1fr);}
  .l-footer-grid{grid-template-columns:1fr 1fr;}
  .l-nav{display:none;}
  .l-nav-toggle{display:block;}
  .l-header.is-nav-open .l-nav{
    display:block;position:absolute;top:100%;left:0;right:0;background:var(--l-bg);
    border-bottom:1px solid var(--l-line);box-shadow:var(--l-shadow-md);padding:18px 24px 24px;
  }
  .l-header.is-nav-open .l-nav ul{flex-direction:column;gap:4px;}
  .l-header.is-nav-open .l-nav a{display:block;padding:12px 4px;border-bottom:1px solid var(--l-line);}
}
@media (max-width:768px){
  .l-container,.l-article,.l-layout{padding-left:18px;padding-right:18px;}
  .l-grid{grid-template-columns:1fr 1fr;gap:16px;}
  .l-footer-grid{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:414px){
  body{font-size:15px;}
  .l-container,.l-article,.l-layout{padding-left:16px;padding-right:16px;}
  h1{font-size:clamp(24px,7vw,28px);}
  .l-grid{grid-template-columns:1fr;}
  .l-hero{padding:40px 0;}
  .l-site-title{font-size:17px;}
  .l-entry-content{font-size:15px;}
}
@media (max-width:320px){
  .l-container,.l-article,.l-layout{padding-left:12px;padding-right:12px;}
}

/* =====================================================================
   13. v1.1.0 追加：Micro Animation / Scroll Animation / Skeleton Loader
   ===================================================================== */

/* ページ全体のフェードイン（初回読み込み時）
   修正点：以前はhtmlの初期opacityを0にしてJSでクラスを付与後に表示する実装にしていたが、
   JSの読み込み・実行に失敗した場合（回線不良・スクリプトエラー・拡張機能による
   ブロック等）にページが永久に真っ白のまま表示されなくなる重大なリスクがあったため、
   CSSアニメーションのみで完結する方式に変更した。JSが一切実行されなくても
   bodyの最終状態は必ずopacity:1になる。 */
body{animation: l-page-fade-in .35s ease both;}
@keyframes l-page-fade-in{from{opacity:0;}to{opacity:1;}}
html.l-no-anim body{animation:none;}
@media (prefers-reduced-motion: reduce){
  body{animation:none;}
}

/* スクロールで要素をフェードイン */
.l-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease;}
.l-reveal.l-reveal-visible{opacity:1;transform:translateY(0);}
html.l-no-anim .l-reveal{opacity:1;transform:none;transition:none;}
@media (prefers-reduced-motion: reduce){
  html{opacity:1;}
  .l-reveal{opacity:1;transform:none;transition:none;}
}

/* カードの浮遊感（既存の .l-card:hover をベースに、影をやや強調） */
.l-card{will-change:transform;}
.l-card:hover{box-shadow:var(--l-shadow-lg);}

/* ボタンのマイクロアニメーション（押下時にわずかに縮む） */
.l-btn:active,.l-btn-outline:active{transform:scale(.97);}

/* Skeleton Loader（Ajaxページ遷移・ライブ検索の読込中に使用） */
.l-skeleton{
  position:relative;overflow:hidden;background:var(--l-surface-2);border-radius:var(--l-radius-sm);
}
.l-skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform:translateX(-100%);animation:l-skeleton-shine 1.4s infinite;
}
html.l-dark .l-skeleton::after{background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);}
@keyframes l-skeleton-shine{100%{transform:translateX(100%);}}
html.l-no-anim .l-skeleton::after{animation:none;display:none;}

/* =====================================================================
   14. WooCommerce 最低限の表示対応
   ===================================================================== */
.woocommerce, .woocommerce-page{
  max-width:var(--l-max);margin:0 auto;padding:clamp(32px,5vw,64px) 24px;
}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;list-style:none;padding:0;}
.woocommerce ul.products li.product{background:var(--l-surface);border:1px solid var(--l-line);border-radius:var(--l-radius-lg);padding:18px;}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--l-accent-gradient);color:#fff;border:none;border-radius:var(--l-radius-pill);
  padding:12px 22px;font-weight:600;cursor:pointer;
}
.woocommerce table.shop_table{width:100%;border-collapse:collapse;}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{border:1px solid var(--l-line);padding:10px;}
@media (max-width:480px){
  .woocommerce, .woocommerce-page{padding:24px 16px;}
}

/* =====================================================================
   15. ページネーション（paginate_links() の既定出力 .page-numbers に対応）
   ===================================================================== */
.l-pagination, nav.navigation.pagination{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:32px;
}
.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;border-radius:var(--l-radius-pill);border:1px solid var(--l-line);
  color:var(--l-text);font-size:14px;font-weight:600;text-decoration:none;
}
.page-numbers.current{background:var(--l-accent-gradient);color:#fff;border-color:transparent;}
.page-numbers:hover:not(.current){border-color:var(--l-accent-solid);color:var(--l-accent-solid);}
.page-numbers.dots{border:none;}