/* ============================================
   Roundstone App - 
   作者: Roundstone
   日期: 2025.11.29 
   ============================================ */
   
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap');
/* Noto Serif 支持中日韓,是Google設計來「和諧共存」的字體家族 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap');

:root {
    /* ============================================
       色彩系統 Color System 
       ============================================ */
    --stone-green: #a5b09f;
    --stone-green-light: #cfd5cc;
    --warm-yellow: #E6C79C;
    --warm-yellow-light: #e6ebe4;
    --text-primary: #868b79;
    --text-secondary: #7b8074;
    --text-tertiary: #999999;
    --text-quaternary: #CCCCCC;
    --bg-primary: #fdfdf3;
    --bg-secondary: #f9f7f2;
    --bg-tertiary: #EFEFE8;
    --paper-color: #fffcf6;
    --paper-line: rgba(122, 155, 142, 0.15);
    --paper-shadow: rgba(0, 0, 0, 0.05);
    --today-mark: #d6c6b6;
    --grid-line: rgba(153, 153, 153, 0.08);
    --whisper-color: #9A8F8F;
    --whisper-color-light: #D3CACA;

    --night-bg-primary: #1A1A1A;
    --night-bg-secondary: #2a2928;
    --night-bg-tertiary: #2A2A2A;
    --night-paper-color: #2d2c2b;
    --night-text-primary: #E8E8E8;
    --night-text-secondary: #B0B0B0;
    --night-text-tertiary: #808080;
    --night-paper-line: rgba(122, 155, 142, 0.15);
    --night-paper-shadow: rgba(0, 0, 0, 0.3);
    --night-grid-line: rgba(153, 153, 153, 0.1);
    --night-whisper-color: #B8A9A9;
    --night-whisper-color-light: #706767;

        /* 文學經典風格變量 */
    --dazai-line-height: 2.0;
    --dazai-letter-spacing: 0.05em;
    --dazai-paragraph-spacing: 1.5em;
    --dazai-font-weight: 400; /* 細字重更有質感 */

    /* ============================================
       多語言字體系統 Multilingual Typography System
       
       核心原則:
       1. 英文優先顯示襯線字體(EB Garamond)保持優雅
       2. CJK字符fallback到Noto Serif保證可讀性
       3. 根據語言調整字重,因為CJK需要更細的筆畫才不顯得笨重
       4. 不同語言使用不同的line-height和letter-spacing
       ============================================ */
    

        /* 新增：職人級字體細分 */
    --font-zh-tw-classic: "Noto Serif TC", "標楷體", "細明體", serif;
    --font-zh-cn-classic: "Noto Serif SC", "宋體", "SimSun", serif;
    --font-ja-classic: "Noto Serif JP", "游明朝", "YuMincho", "HG明朝E", serif;

    /* 書法級字重控制 */
    --font-weight-cjk-print: 350; /* 相當於五號字的墨色濃度 */
    --font-weight-cjk-heading: 420; /* 標題需要的骨力 */

    /* 和文組版特調 */
    :lang(ja) {
        text-combine-upright: digits 2; /* 縱中橫 */
        font-size: 0.95em; /* 假名視覺補正 */
        line-height: 1.78; /* 傳統「文行」間距 */
    }

    /* 漢文直排預備 */
    .vertical-writing {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        /* 直排時假名不旋轉 */
    }
    /* === 英文為主的字體棧 === */
    --font-en-base: "EB Garamond", "Noto Serif TC", "Noto Serif JP", "Noto Serif SC", Georgia, "Times New Roman", serif;
    --font-en-display: "EB Garamond", Georgia, serif;
    
    /* === 中文(繁體)為主的字體棧 === */
    --font-zh-tw-base: "Noto Serif TC", "EB Garamond", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
    --font-zh-tw-display: "Noto Serif TC", "PingFang TC", "LiHei Pro", serif;
    
    /* === 中文(簡體)為主的字體棧 === */
    --font-zh-cn-base: "Noto Serif SC", "EB Garamond", "PingFang SC", "Microsoft YaHei", "SimHei", sans-serif;
    --font-zh-cn-display: "Noto Serif SC", "PingFang SC", "STHeiti", serif;
    
    /* === 日文為主的字體棧 === */
    --font-ja-base: "Noto Serif JP", "EB Garamond", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
    --font-ja-display: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", serif;
    
    /* === 混合內容(默認) - 兼顧三種語言 === */
    --font-mixed-base: "EB Garamond", "Noto Serif TC", "Noto Serif JP", "Noto Serif SC", "PingFang TC", "Hiragino Sans", Georgia, sans-serif;
    
    /* === 等寬字體(代碼/數據顯示) === */
    --font-mono: "SF Mono", "Consolas", "Menlo", "Monaco", "Courier New", monospace;
    --font-mono-cjk: "Noto Sans Mono CJK TC", "SF Mono", "Consolas", monospace;

    /* ============================================
       字重系統 - 針對不同語言優化
       
       為什麼要分開:
       - 英文在400-700之間都很好看
       - CJK字符在500以上會顯得過於厚重,300-500是最佳範圍
       - 日文假名比漢字需要更細的筆畫
       ============================================ */
    
    /* 英文字重 */
    --font-weight-en-light: 400;
    --font-weight-en-regular: 500;
    --font-weight-en-medium: 600;
    --font-weight-en-bold: 700;
    
    /* 中文字重 */
    --font-weight-zh-light: 300;
    --font-weight-zh-regular: 400;
    --font-weight-zh-medium: 500;
    --font-weight-zh-bold: 600;
    
    /* 日文字重 */
    --font-weight-ja-light: 300;
    --font-weight-ja-regular: 400;
    --font-weight-ja-medium: 500;
    --font-weight-ja-bold: 600;

    /* ============================================
       行高系統 Line Height System
       
       為什麼不同:
       - 英文字母有明顯的ascender/descender,需要較小行高(1.5-1.6)
       - 中文方塊字沒有上下延伸,需要更大行高(1.7-1.9)避免擁擠
       - 日文混合假名和漢字,需要中間值(1.6-1.75)
       ============================================ */
    --line-height-en-tight: 1.4;
    --line-height-en-base: 1.6;
    --line-height-en-relaxed: 1.8;
    
    --line-height-zh-tight: 1.6;
    --line-height-zh-base: 1.8;
    --line-height-zh-relaxed: 2.0;
    
    --line-height-ja-tight: 1.5;
    --line-height-ja-base: 1.7;
    --line-height-ja-relaxed: 1.9;
    
    /* 混合內容使用中庸值 */
    --line-height-mixed: 1.75;

    /* ============================================
       字距系統 Letter Spacing
       
       關鍵差異:
       - 英文襯線字體通常不需要額外字距,甚至負值更優雅
       - 中文在小字號(≤16px)時需要微量正字距(0.02-0.05em)
       - 日文假名密度高,需要稍大字距(0.03-0.08em)
       ============================================ */
    --letter-spacing-en-tight: -0.01em;
    --letter-spacing-en-base: 0em;
    --letter-spacing-en-relaxed: 0.02em;
    
    --letter-spacing-zh-tight: 0.01em;
    --letter-spacing-zh-base: 0.03em;
    --letter-spacing-zh-relaxed: 0.06em;
    
    --letter-spacing-ja-tight: 0.02em;
    --letter-spacing-ja-base: 0.05em;
    --letter-spacing-ja-relaxed: 0.08em;

    /* ============================================
       字體大小系統 Font Size System
       
       基準邏輯:
       - 使用rem單位統一縮放
       - CJK字符視覺上比英文「更大」,同樣16px中文看起來像18px英文
       - 因此針對純CJK內容可以降低0.875-0.9倍
       ============================================ */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    
    /* CJK專用尺寸(比英文小10%) */
    --font-size-cjk-sm: 0.8125rem;   /* ~13px */
    --font-size-cjk-base: 1.2375rem; /* ~15px */
    --font-size-cjk-lg: 1.0625rem;   /* ~17px */

    /* ============================================
       間距系統 Spacing System (保持不變)
       ============================================ */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* ============================================
       安全區域 Safe Area Insets (保持不變)
       ============================================ */
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);

    /* ============================================
       過渡動畫 Transitions (保持不變)
       ============================================ */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   全局重置與基礎優化
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* 基礎字體大小 - 保持16px便於計算rem */
    font-size: 16px;
    
    /* 平滑滾動 */
    scroll-behavior: smooth;
    
    /* 字體渲染優化 - 關鍵! */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    
    /* CJK字體專用優化 */
    font-feature-settings: "palt" 1; /* 日文假名比例調整 */
    font-kerning: auto; /* 自動字距調整 */
}

body {
    /* 默認使用混合字體棧 - 適配多語言混排場景 */
    font-family: var(--font-mixed-base);
    font-weight: var(--font-weight-zh-regular);
    line-height: var(--line-height-mixed);
    letter-spacing: var(--letter-spacing-zh-base);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    
    /* 文字換行優化 - 對CJK尤其重要 */
    word-break: break-word;
    overflow-wrap: break-word;
    /* 日文專用斷行規則 */
    line-break: strict;
    /* 避免孤字 */
    widows: 2;
    orphans: 2;
}

/* ============================================
   語言特定樣式 Language-Specific Styles
   
   使用方法:
   <div lang="zh-TW">繁體中文內容</div>
   <div lang="zh-CN">简体中文内容</div>
   <div lang="ja">日本語コンテンツ</div>
   <div lang="en">English content</div>
   ============================================ */

/* === 繁體中文 Traditional Chinese === */
:lang(zh-TW),
:lang(zh-Hant),
[lang="zh-TW"],
[lang="zh-Hant"],
.lang-zh-tw {
    font-family: var(--font-zh-tw-base);
    font-weight: var(--font-weight-zh-regular);
    line-height: var(--line-height-zh-base);
    letter-spacing: var(--letter-spacing-zh-base);
    /* 繁體中文標點符號優化 */
    hanging-punctuation: first last;
}

/* === 簡體中文 Simplified Chinese === */
:lang(zh-CN),
:lang(zh-Hans),
[lang="zh-CN"],
[lang="zh-Hans"],
.lang-zh-cn {
    font-family: var(--font-zh-cn-base);
    font-weight: var(--font-weight-zh-regular);
    line-height: var(--line-height-zh-base);
    letter-spacing: var(--letter-spacing-zh-base);
}

/* === 日文 Japanese === */
:lang(ja),
[lang="ja"],
.lang-ja {
    font-family: var(--font-ja-base);
    font-weight: var(--font-weight-ja-regular);
    line-height: var(--line-height-ja-base);
    letter-spacing: var(--letter-spacing-ja-base);
    /* 日文專用特性 */
    font-feature-settings: "palt" 1, "pkna" 1;
    /* pkna: 假名比例優化 */
}

/* === 英文 English === */
:lang(en),
[lang="en"],
.lang-en {
    font-family: var(--font-en-base);
    font-weight: var(--font-weight-en-regular);
    line-height: var(--line-height-en-base);
    letter-spacing: var(--letter-spacing-en-base);
    /* 英文連字優化 */
    font-feature-settings: "liga" 1, "kern" 1;
}

/* ============================================
   字體階層 Typography Hierarchy
   針對不同語言優化標題和正文
   ============================================ */

/* === 標題系統 === */
h1, h2, h3, h4, h5, h6,
.entry-title,
.diary-header {
    font-family: var(--font-mixed-base);
    font-weight: var(--font-weight-zh-medium);
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
}

/* 英文標題 */
h1:lang(en), h2:lang(en), h3:lang(en),
h4:lang(en), h5:lang(en), h6:lang(en) {
    font-family: var(--font-en-display);
    font-weight: var(--font-weight-en-medium);
    letter-spacing: var(--letter-spacing-en-tight);
}

/* 中文標題 */
h1:lang(zh-TW), h2:lang(zh-TW), h3:lang(zh-TW),
h1:lang(zh-CN), h2:lang(zh-CN), h3:lang(zh-CN) {
    font-weight: var(--font-weight-zh-medium);
    letter-spacing: var(--letter-spacing-zh-relaxed);
}

/* 日文標題 */
h1:lang(ja), h2:lang(ja), h3:lang(ja) {
    font-family: var(--font-ja-display);
    font-weight: var(--font-weight-ja-medium);
    letter-spacing: var(--letter-spacing-ja-relaxed);
}

/* === 正文系統 === */
.diary-entry,
.conversation-area,
.monthly-entries,
p, article {
    font-family: var(--font-mixed-base);
    line-height: var(--line-height-mixed);
}

/* 正文語言優化 */
p:lang(zh-TW), article:lang(zh-TW),
p:lang(zh-CN), article:lang(zh-CN) {
    text-indent: 2em; /* 中文段落首行縮進 */
    text-align: justify; /* 兩端對齊 */
    text-justify: inter-ideograph; /* CJK專用對齊方式 */
}

p:lang(ja), article:lang(ja) {
    text-indent: 1em;
    text-align: justify;
}

/* === 手寫風格(保持統一) === */
.whisper-entry,
.handwriting-style {
    font-family: var(--font-mixed-base);
    font-style: italic;
    font-weight: var(--font-weight-zh-light);
}

/* === 等寬字體區域 === */
code, pre, .mono {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-en-regular);
    letter-spacing: 0;
}

/* CJK代碼內容 */
code:lang(zh-TW), code:lang(zh-CN), code:lang(ja),
pre:lang(zh-TW), pre:lang(zh-CN), pre:lang(ja) {
    font-family: var(--font-mono-cjk);
}

/* ============================================
   性能優化核心區 Performance Core
   (保持原有優化,無需修改)
   ============================================ */
.diary-entry,
.roundstone-response,
.whisper-entry,
.whisper-content,
.entry-item {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.conversation-area,
.monthly-entries,
.diary-section,
.calendar-section {
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
    contain: layout style paint;
    transform: translateZ(0);
}

/* ============================================
   響應式字體縮放 Responsive Typography
   根據設備優化基礎字號
   ============================================ */

/* 桌面端 - 標準大小 */
@media (min-width: 1025px) {
    html {
        font-size: 16px;
    }
    
    /* 英文內容可以稍小 */
    body:lang(en) {
        font-size: 15px;
    }
}

/* 平板端 */
@media (min-width: 769px) and (max-width: 1024px) {
    html {
        font-size: 15px;
    }
    
    /* CJK在平板上保持可讀性 */
    :lang(zh-TW), :lang(zh-CN), :lang(ja) {
        font-size: 1.05rem;
    }
}

/* 手機端 */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    /* 手機上中文需要稍大 */
    :lang(zh-TW), :lang(zh-CN), :lang(ja) {
        font-size: 1.1rem; /* ~15.4px */
        letter-spacing: 0.06em; /* 增加字距避免擁擠 */
    }
}

/* 小屏手機 */
@media (max-width: 480px) {
    html {
        font-size: 16px;
    }
    
    /* 確保小屏上CJK仍然清晰 */
    :lang(zh-TW), :lang(zh-CN), :lang(ja) {
        font-size: 1.25rem; /* ~14.95px */
        line-height: 1.85; /* 增加行高 */
    }
}

/* ============================================
   無障礙性優化 Accessibility
   ============================================ */

/* 用戶偏好：減少動畫 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* 用戶偏好：高對比度 */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #000000;
        --text-secondary: #333333;
        --paper-line: rgba(0, 0, 0, 0.4);
    }
    
    /* 高對比度下增加字重 */
    body {
        font-weight: var(--font-weight-zh-medium);
    }
}

/* ============================================
   實用工具類 Utility Classes
   讓開發者可以快速切換語言樣式
   ============================================ */

/* 強制使用特定語言字體 */
.force-en { 
    font-family: var(--font-en-base) !important;
    line-height: var(--line-height-en-base) !important;
}

.force-zh-tw { 
    font-family: var(--font-zh-tw-base) !important;
    line-height: var(--line-height-zh-base) !important;
}

.force-zh-cn { 
    font-family: var(--font-zh-cn-base) !important;
    line-height: var(--line-height-zh-base) !important;
}

.force-ja { 
    font-family: var(--font-ja-base) !important;
    line-height: var(--line-height-ja-base) !important;
}

/* 混合內容優化 */
.mixed-content {
    font-family: var(--font-mixed-base);
    line-height: var(--line-height-mixed);
    letter-spacing: 0.02em;
}

/* 純文本塊(無樣式) */
.plain-text {
    font-family: sans-serif;
    letter-spacing: 0;
    text-indent: 0;
}

/* ============================================
   DEBUG MODE - 開發時可視化語言邊界
   使用方法: 在 <html> 標籤加上 class="debug-lang"
   ============================================ */
html.debug-lang :lang(zh-TW),
html.debug-lang [lang="zh-TW"] {
    outline: 2px solid #ff6b6b;
    outline-offset: 2px;
}

html.debug-lang :lang(zh-CN),
html.debug-lang [lang="zh-CN"] {
    outline: 2px solid #4ecdc4;
    outline-offset: 2px;
}

html.debug-lang :lang(ja),
html.debug-lang [lang="ja"] {
    outline: 2px solid #ffe66d;
    outline-offset: 2px;
}

html.debug-lang :lang(en),
html.debug-lang [lang="en"] {
    outline: 2px solid #a8dadc;
    outline-offset: 2px;
}

/* 文學經典排版類 */
.literary-classic,
.dazai-style {
  font-family: var(--font-ja-classic); /* 你已定義的日文經典字體 */
  font-weight: var(--dazai-font-weight);
  line-height: var(--dazai-line-height);
  letter-spacing: var(--dazai-letter-spacing);
  
  /* 段落間距 */
  margin-bottom: var(--dazai-paragraph-spacing);
  
  /* 首行縮進 (日文傳統1em) */
  text-indent: 1em;
  
  /* 兩端對齊 */
  text-align: justify;
  text-justify: inter-ideograph;
  
  /* 避免孤字 */
  widows: 2;
  orphans: 2;
  
  /* 日文專用特性 */
  font-feature-settings: "palt" 1, "pkna" 1;
  
  /* 顏色稍淡,模擬紙張印刷 */
  color: #3a3a3a;
}

/* 標題 - 《人間失格》風格 */
.dazai-style h1,
.dazai-style h2,
.dazai-style h3 {
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em; /* 標題字距更大 */
  margin-top: 2em;
  margin-bottom: 1em;
  text-align: center; /* 傳統日文標題居中 */
}

/* 引用/旁白 - 太宰治常用的內心獨白 */
.dazai-style blockquote {
  border-left: none;
  padding-left: 2em;
  font-style: italic;
  opacity: 0.85;
  line-height: 2.2; /* 引用部分行距更大 */
}

/* 章節分隔 */
.dazai-style hr {
  border: none;
  text-align: center;
  margin: 3em 0;
}

.dazai-style hr::before {
  content: "※ ※ ※";
  letter-spacing: 1em;
  color: var(--text-tertiary);
}

/* 手機上行距稍小 */
@media (max-width: 768px) {
  .dazai-style {
    line-height: 1.85;
    font-size: 0.95rem;
  }
}

/* 大屏幕上更接近印刷品 */
@media (min-width: 1200px) {
  .dazai-style {
    line-height: 2.1;
    max-width: 680px; /* 限制行寬,模擬書籍 */
    margin: 0 auto;
  }
}

/* 语言检测和自动适配 */
[lang] {
    /* 所有有lang属性的元素都会自动应用相应字体 */
}

/* 如果元素没有指定语言，继承父级语言设置 */
body[lang] > *:not([lang]) {
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

/* 混合内容优化 */
.mixed-content {
    font-family: var(--font-mixed-base);
    line-height: var(--line-height-mixed);
    letter-spacing: 0.02em;
    text-align: justify;
}