/* resources/css/style.css */

/* --- 1. 設計系統 & 全域變數 --- */
:root {
    --bg-color: #fdfbf7;
    --text-main: #4a4a4a;
    --primary-color: #7b9c98;
    --primary-dark: #5e7a76;
    --accent-color: #e09f7d;
    --radius: 12px;
    --shadow: 0 4px 12px rgba(0,0,0,0.05);
}

body {
    font-family: "Helvetica Neue", Helvetica, "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: center;
}

/* --- Header & Footer (RWD) --- */
header { width: 100%; padding: 15px 0; display: flex; justify-content: space-between; align-items: center; max-width: 1200px; box-sizing: border-box; padding-left: 20px; padding-right: 20px;}
.logo-group { display: flex; align-items: center; gap: 10px; }
.logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); text-decoration: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.back-btn { text-decoration: none; color: var(--text-main); font-weight: bold; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0; transition: all 0.2s; font-size: 1.2rem; }
.back-btn:hover { background: var(--primary-color); color: white; }
.header-actions { display: flex; gap: 10px; align-items: center; }

/* 贊助按鈕 & 語言切換 */
.btn-coffee { background-color: var(--accent-color); color: white; border: none; padding: 6px 15px; border-radius: 20px; font-size: 0.9rem; cursor: pointer; text-decoration: none; display: flex; align-items: center; gap: 5px; transition: transform 0.2s; }
.btn-coffee:hover { transform: translateY(-2px); background-color: #d68f6d; }

.lang-switch { display: flex; gap: 5px; }
.lang-switch button { background: none; border: 1px solid #e0e0e0; padding: 5px 12px; border-radius: 20px; cursor: pointer; color: var(--text-main); font-size: 0.9rem; transition: all 0.3s; outline: none; }
.lang-switch button.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }

/* Footer */
footer { text-align: center; padding: 30px; color: #888; font-size: 0.8rem; margin-top: auto; width: 100%; }

/* --- 通用 UI --- */
.ad-banner { width: 100%; max-width: 900px; height: 90px; background: #eee; margin: 20px auto; display: flex; justify-content: center; align-items: center; color: #aaa; border-radius: 8px; }

/* 使用說明區塊 */
.instructions {
    width: 100%; max-width: 800px; margin: 0 auto; 
    padding: 20px; background: white; 
    border-radius: var(--radius); box-shadow: var(--shadow);
    box-sizing: border-box;
}
.instructions h3 { margin-top: 0; margin-bottom: 10px; color: var(--primary-color); font-size: 1.1rem; }
.instructions ul { margin: 0; padding-left: 20px; }
.instructions li { margin-bottom: 5px; color: #666; line-height: 1.5; font-size: 0.95rem; }

/* --- 操作按鈕 & 輸入框樣式 (關鍵修正) --- */
.action-bar { margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 800px; }

.btn-action, .select-style, .input-style {
    padding: 10px 20px; 
    border-radius: 50px; 
    border: 1px solid var(--primary-color);
    color: var(--primary-color); 
    font-size: 0.95rem; 
    font-weight: bold;
    outline: none; cursor: pointer;
    background: white; 
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 5px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-decoration: none;
}

.btn-action:hover {
    background: var(--primary-color); 
    color: white; 
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 實心按鈕 (列印) */
.btn-print { background: var(--primary-color); color: white; }
.btn-print:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* 紅色按鈕 (重置) */
.btn-reset { border-color: #ff6b6b; color: #ff6b6b; }
.btn-reset:hover { background: #ff6b6b; color: white; border-color: #ff6b6b; }

/* 畫布區 */
.canvas-container { width: 100%; display: flex; justify-content: center; padding: 0 10px 40px 10px; box-sizing: border-box; }
.a4-paper { width: 100%; max-width: 210mm; min-height: 297mm; background: white; box-shadow: 0 0 20px rgba(0,0,0,0.1); padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; position: relative; }

/* Media Queries */
@media screen and (max-width: 600px) {
    header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .header-actions { width: 100%; justify-content: flex-end; }
}
@media screen and (min-width: 768px) { .a4-paper { padding: 40px 50px; } }
@media print {
    header, .action-bar, .ad-banner, .instructions, footer { display: none !important; }
    body { background: white; margin: 0; }
    .a4-paper { box-shadow: none; margin: 0; width: 100% !important; max-width: none !important; }
}

/* --- Article Section (Content SEO) --- */
.article-section {
    max-width: 900px;
    margin: 20px auto;
    padding: 30px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    line-height: 1.8;
    color: #444;
}

.article-section h2 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin: 0 0 15px 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.article-section h3 {
    color: var(--accent-color);
    font-size: 1.2rem;
    margin: 25px 0 10px 0;
}

.article-section p {
    margin-bottom: 15px;
    text-align: justify;
}