/**
 * Japanese Design System
 * 日本語デザインシステム
 * 
 * 为日语站点提供符合日本用户习惯的设计系统
 * - 日文字体优化
 * - 排版规范
 * - 颜色系统
 * - 布局调整
 * 
 * @package Corporate_Theme
 * @since 1.0.0
 */

/* ========================================
   1. 日文字体系统
   ======================================== */

html[lang="ja-JP"],
html[lang="ja"],
html[lang="ja-JP"] body,
html[lang="ja"] body {
    /* 日文优先字体栈 */
    font-family: 
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Yu Gothic",
        "Meiryo",
        "MS PGothic",
        sans-serif;
    
    /* 优化日文渲染 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 标题字体 */
html[lang="ja-JP"] h1,
html[lang="ja-JP"] h2,
html[lang="ja-JP"] h3,
html[lang="ja-JP"] h4,
html[lang="ja-JP"] h5,
html[lang="ja-JP"] h6,
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] h4,
html[lang="ja"] h5,
html[lang="ja"] h6 {
    font-family: 
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Yu Gothic",
        "Meiryo",
        sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ========================================
   2. 排版优化
   ======================================== */

/* 行高优化 - 日文需要更大的行高 */
html[lang="ja-JP"] body,
html[lang="ja"] body {
    line-height: 1.8;
}

html[lang="ja-JP"] p,
html[lang="ja"] p {
    line-height: 1.9;
    margin-bottom: 1.5em;
}

/* 字间距优化 */
html[lang="ja-JP"] .site-title,
html[lang="ja"] .site-title {
    letter-spacing: 0.1em;
}

html[lang="ja-JP"] .page-title,
html[lang="ja"] .page-title {
    letter-spacing: 0.08em;
}

/* 段落首行缩进（可选，根据内容类型） */
html[lang="ja-JP"] .content-area p,
html[lang="ja"] .content-area p {
    text-indent: 0; /* 现代日文网页通常不使用首行缩进 */
}

/* ========================================
   3. 按钮和CTA优化
   ======================================== */

html[lang="ja-JP"] .btn,
html[lang="ja-JP"] .button,
html[lang="ja"] .btn,
html[lang="ja"] .button {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-radius: 4px;
}

/* 主要按钮 */
html[lang="ja-JP"] .btn-primary,
html[lang="ja"] .btn-primary {
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3);
}

html[lang="ja-JP"] .btn-primary:hover,
html[lang="ja"] .btn-primary:hover {
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
    box-shadow: 0 6px 16px rgba(30, 136, 229, 0.4);
    transform: translateY(-2px);
}

/* ========================================
   4. 导航菜单优化
   ======================================== */

html[lang="ja-JP"] .main-navigation a,
html[lang="ja"] .main-navigation a {
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.25rem;
}

html[lang="ja-JP"] .main-navigation .sub-menu a,
html[lang="ja"] .main-navigation .sub-menu a {
    font-size: 0.9rem;
    padding: 0.625rem 1rem;
}

/* ========================================
   5. 卡片和内容块优化
   ======================================== */

html[lang="ja-JP"] .card,
html[lang="ja-JP"] .content-card,
html[lang="ja"] .card,
html[lang="ja"] .content-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

html[lang="ja-JP"] .card:hover,
html[lang="ja-JP"] .content-card:hover,
html[lang="ja"] .card:hover,
html[lang="ja"] .content-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

html[lang="ja-JP"] .card-title,
html[lang="ja"] .card-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
}

html[lang="ja-JP"] .card-text,
html[lang="ja"] .card-text {
    font-size: 0.95rem;
    line-height: 1.8;
}

/* ========================================
   6. 表单优化
   ======================================== */

html[lang="ja-JP"] input[type="text"],
html[lang="ja-JP"] input[type="email"],
html[lang="ja-JP"] input[type="tel"],
html[lang="ja-JP"] textarea,
html[lang="ja-JP"] select,
html[lang="ja"] input[type="text"],
html[lang="ja"] input[type="email"],
html[lang="ja"] input[type="tel"],
html[lang="ja"] textarea,
html[lang="ja"] select {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    line-height: 1.6;
}

html[lang="ja-JP"] label,
html[lang="ja"] label {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
    letter-spacing: 0.03em;
}

html[lang="ja-JP"] ::placeholder,
html[lang="ja"] ::placeholder {
    color: #999;
    font-size: 0.9rem;
}

/* ========================================
   7. Banner 横幅优化
   ======================================== */

html[lang="ja-JP"] .page-banner h1,
html[lang="ja-JP"] .hero-banner h1,
html[lang="ja"] .page-banner h1,
html[lang="ja"] .hero-banner h1 {
    font-size: 2.5rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
    font-weight: 600;
}

html[lang="ja-JP"] .page-banner .banner-subtitle,
html[lang="ja-JP"] .hero-banner .banner-subtitle,
html[lang="ja"] .page-banner .banner-subtitle,
html[lang="ja"] .hero-banner .banner-subtitle {
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    line-height: 1.7;
}

/* ========================================
   8. 列表优化
   ======================================== */

html[lang="ja-JP"] ul,
html[lang="ja-JP"] ol,
html[lang="ja"] ul,
html[lang="ja"] ol {
    line-height: 1.9;
}

html[lang="ja-JP"] li,
html[lang="ja"] li {
    margin-bottom: 0.75em;
}

/* ========================================
   9. 颜色系统 - 日式配色
   ======================================== */

/* 主色调 - 使用更柔和的蓝色 */
html[lang="ja-JP"] .text-primary,
html[lang="ja"] .text-primary {
    color: #1e88e5;
}

html[lang="ja-JP"] .bg-primary,
html[lang="ja"] .bg-primary {
    background-color: #1e88e5;
}

/* 强调色 - 日式红色 */
html[lang="ja-JP"] .text-accent,
html[lang="ja"] .text-accent {
    color: #d32f2f;
}

/* 背景色 - 更柔和的灰色 */
html[lang="ja-JP"] .bg-light,
html[lang="ja"] .bg-light {
    background-color: #f8f9fa;
}

html[lang="ja-JP"] .bg-section,
html[lang="ja"] .bg-section {
    background-color: #fafafa;
}

/* ========================================
   10. 间距系统
   ======================================== */

html[lang="ja-JP"] section,
html[lang="ja"] section {
    padding: 4rem 0;
}

html[lang="ja-JP"] .section-title,
html[lang="ja"] .section-title {
    margin-bottom: 2.5rem;
    font-size: 2rem;
    letter-spacing: 0.08em;
}

html[lang="ja-JP"] .section-subtitle,
html[lang="ja"] .section-subtitle {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: #666;
}

/* ========================================
   11. 响应式优化
   ======================================== */

/* 移动端 */
@media (max-width: 768px) {
    html[lang="ja-JP"] body,
    html[lang="ja"] body {
        font-size: 15px;
        line-height: 1.75;
    }
    
    html[lang="ja-JP"] .page-banner h1,
    html[lang="ja-JP"] .hero-banner h1,
    html[lang="ja"] .page-banner h1,
    html[lang="ja"] .hero-banner h1 {
        font-size: 1.75rem;
        letter-spacing: 0.06em;
    }
    
    html[lang="ja-JP"] .section-title,
    html[lang="ja"] .section-title {
        font-size: 1.5rem;
    }
    
    html[lang="ja-JP"] .btn,
    html[lang="ja"] .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }
}

/* 平板端 */
@media (min-width: 769px) and (max-width: 1024px) {
    html[lang="ja-JP"] body,
    html[lang="ja"] body {
        font-size: 16px;
    }
    
    html[lang="ja-JP"] .page-banner h1,
    html[lang="ja-JP"] .hero-banner h1,
    html[lang="ja"] .page-banner h1,
    html[lang="ja"] .hero-banner h1 {
        font-size: 2.25rem;
    }
}

/* ========================================
   12. 特殊元素优化
   ======================================== */

/* 引用块 */
html[lang="ja-JP"] blockquote,
html[lang="ja"] blockquote {
    border-left: 4px solid #1e88e5;
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: normal;
    color: #555;
    line-height: 1.9;
}

/* 代码块 */
html[lang="ja-JP"] code,
html[lang="ja"] code {
    font-family: 'Courier New', Courier, monospace;
    background-color: #f5f5f5;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

/* 分隔线 */
html[lang="ja-JP"] hr,
html[lang="ja"] hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 2rem 0;
}

/* ========================================
   13. 动画和过渡
   ======================================== */

html[lang="ja-JP"] a,
html[lang="ja-JP"] button,
html[lang="ja-JP"] .btn,
html[lang="ja"] a,
html[lang="ja"] button,
html[lang="ja"] .btn {
    transition: all 0.3s ease;
}

/* 淡入动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html[lang="ja-JP"] .fade-in-up,
html[lang="ja"] .fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* ========================================
   14. 可访问性优化
   ======================================== */

html[lang="ja-JP"] :focus,
html[lang="ja"] :focus {
    outline: 2px solid #1e88e5;
    outline-offset: 2px;
}

html[lang="ja-JP"] a:focus,
html[lang="ja-JP"] button:focus,
html[lang="ja"] a:focus,
html[lang="ja"] button:focus {
    outline: 2px solid #1e88e5;
    outline-offset: 2px;
}

/* 跳过链接 */
html[lang="ja-JP"] .skip-link,
html[lang="ja"] .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #1e88e5;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

html[lang="ja-JP"] .skip-link:focus,
html[lang="ja"] .skip-link:focus {
    top: 0;
}

/* ========================================
   15. 打印样式
   ======================================== */

@media print {
    html[lang="ja-JP"] body,
    html[lang="ja"] body {
        font-size: 12pt;
        line-height: 1.6;
        color: #000;
    }
    
    html[lang="ja-JP"] a,
    html[lang="ja"] a {
        text-decoration: underline;
        color: #000;
    }
}