/* --- 主题定制区 --- */
:root {
    --primary-color: #1C9B9C; /* 主色调 */
	--secondary-color: #8A8A8A; /* 灰色 */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --page-bg-color: #f7f9fc;
    --document-bg-color: #ffffff;
    --text-color: #777;
    --header-footer-color: #999;
	--border-color: #e9ecef;
}
/* --- 主题定制区结束 --- */

body {
	/* --- 背景图片设置 --- */
    background-image: url('background.jpg'); 
    background-size: cover;          /* 让背景图铺满整个屏幕，不变形 */
    background-position: center;     /* 图片居中显示 */
    background-attachment: fixed;    /* 滚动页面时，背景图固定不动 */
    background-repeat: no-repeat;    /* 防止图片平铺重复 */
	
    background-color: var(--page-bg-color);
    font-family: var(--font-family);
    color: var(--text-color);
    margin: 0;
    display: flex;
    justify-content: center;
    padding: 30px 15px;
    box-sizing: border-box;
    min-height: 100vh;
}
/* 新增：为背景添加一个半透明的遮罩层，让问卷内容更突出 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0); /* 半透明白色遮罩，可调整透明度 */
    z-index: -1; /* 将遮罩层放在body内容之下，背景图之上 */
}

.document-container {
    background: var(--document-bg-color);
    width: 100%;
    max-width: 850px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    border-top: 5px solid var(--primary-color);
    display: flex;
    flex-direction: column;
}
/* 主标题版本样式 */
.version-tag {
    font-size: 0.6em; /* 字体大小为主标题的60% */
    color: #777;
    font-weight: 400; /* 非粗体 */
    margin-left: 15px; /* 与主标题拉开距离 */
    vertical-align: middle; /* 垂直居中对齐 */
}
/* 页眉页脚样式 */
.page-header, .page-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.page-footer { border-top: 1px solid var(--border-color); border-bottom: none; font-size: 0.9em; color: var(--header-footer-color); }
.logo { height: 45px; }
.pagend { height:75px; }
.header-text { font-size: 0.9em; color: var(--header-footer-color); }

/* 主内容区 */
.page-content { padding: 20px 40px; flex-grow: 1; }
.title-section { text-align: center; margin-bottom: 30px; }
.title-section h2 { font-size: 1.6em; font-weight: 600; color: var(--primary-color); margin: 0 0 10px; }
.title-section .subtitle { font-size: 1.0em; color: #777; max-width: 600px; margin: 0 auto; line-height: 1.6; }

/* 表单分区 */
.form-section {
    background-color: #f9fcfd;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 30px;
}

.form-section h2 { 
    font-size: 1.35em; 
    color: var(--primary-color); 
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 25px;
}
/* 公司信息栏 */
.question-item1 { margin-bottom: 25px; 
	background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 30px;
	}

	
/* 问题项 */
.question-item { margin-bottom: 25px; }
.question-item h4 { font-size: 1.05em; margin-bottom: 12px; font-weight: 600; color: var(--text-color); }

/* 回答区域 */
.answer-area { 
    /* 默认使用 flex 布局，为响应式做准备 */
    display: flex; 
    flex-direction: column; /* 默认垂直排列 */
    gap: 10px; 
	 padding-left: 25px; /* 轻微缩进，与主问题形成层级关系 */
}
.answer-area input[type="text"], .answer-area textarea {
    padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em;
    font-family: var(--font-family); box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.answer-area input[type="text"]:focus, .answer-area textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(19, 141, 144, 0.15);
    outline: none;
}
.answer-area textarea { width: 100%; resize: vertical; }
.answer-area .sub-label { font-weight: bold; margin: 10px 0 5px; color: #888; }

/* 布局辅助 - 统一并简化布局类 */
.layout-columns,
.layout-grid {
    display: flex;
    flex-wrap: wrap; /* 允许换行，这是响应式的关键 */
    flex-direction: row; /* PC端默认水平排列 */
    align-items: center;
    gap: 15px 25px; /* 行间距 和 列间距 */
}

.inline-field { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.inline-field label { flex-shrink: 0; margin-bottom: 0; }

.inline-field span { color: #666; white-space: nowrap; }

.separator-text { text-align: center; font-weight: bold; color: #999; margin: 5px 0; }

/* 选项样式 */
.answer-area label { display: flex; align-items: center; cursor: pointer; gap: 8px;}
.answer-area input[type="checkbox"], .answer-area input[type="radio"] {
    margin-right: 8px; width: 1.1em; height: 1.1em; accent-color: var(--primary-color);
}
.answer-area .inline-field input[type="text"] { margin-left: 5px; }

/* 条件显示区域 */
.conditional-area { display: none; padding: 15px; margin-top: 10px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid var(--border-color); }
.conditional-area .inline-field { margin-bottom: 10px; }
.conditional-area .inline-field:last-child { margin-bottom: 0; }

/* 宽度工具类 - */
.input-full { width: 100%; }
.input-large { width: 100%; max-width: 400px; }
.input-medium { width: 100%; max-width: 250px; }
.input-short { width: 100px; } /* 在PC上给一个固定值 */

/* 提交按钮 */
.submission-section { text-align: center; margin: 40px 0 20px; }
#submit-btn {
    background: var(--primary-color); color: white; border: none; padding: 15px 45px;
    border-radius: 50px; font-size: 1.2em; font-weight: bold; cursor: pointer;
    transition: all 0.3s ease; display: inline-flex; align-items: center;
    box-shadow: 0 4px 15px rgba(19, 141, 144, 0.2);
}
#submit-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(19, 141, 144, 0.3); background-color: #167a7b;}
#submit-btn:disabled { background-color: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }
#submit-btn .btn-icon {
    width: 20px; height: 20px; margin-right: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

#status-message { margin-top: 15px; padding: 10px; border-radius: 4px; display: none; }
#status-message.success { display: block; background-color: #e8f5e9; color: #2e7d32; }
#status-message.error { display: block; background-color: #fce4e4; color: #c62828; }

#thank-you-message { text-align: center; padding: 60px 0; }

/* 问题1的特殊网格布局 */
.dimension-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC端默认两列 */
    gap: 15px 30px;
    width: 100%;
}

.dimension-grid .separator-text {
    grid-column: 1 / -1; /* 横跨所有列 */
    text-align: center;
    font-weight: bold;
    color: #888;
    margin: 5px 0;
}

/* 输入框提示文字样式 */
::placeholder { color: #cccccc; opacity: 1; }
::-moz-placeholder { color: #cccccc; opacity: 1; }
:-moz-placeholder { color: #cccccc; opacity: 1; }
:-ms-input-placeholder { color: #cccccc; }

/* 条件显示和子问题样式 */
.conditional-area {
    display: none;
    margin-top: 15px;
    padding-left: 20px;
    border-left: 2px solid #e0e0e0;
}
.sub-question {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #f0f0f0;
}
.sub-question:last-of-type { border-bottom: none; padding-bottom: 0; }

/* “重新提交”按钮样式 */
.submit-btn-style {
    background: var(--primary-color); color: white; border: none; padding: 15px 45px;
    border-radius: 50px; font-size: 1.1em; font-weight: bold; cursor: pointer;
    transition: all 0.3s ease; display: inline-flex; align-items: center;
    box-shadow: 0 4px 15px rgba(19, 141, 144, 0.2);
}
.submit-btn-style:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(19, 141, 144, 0.3);background-color: #167a7b; }
.btn-icon-reset {
    width: 20px; height: 20px; margin-right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; background-position: center;
}


/* ================================================================= */
/* ============= 响应式布局媒体查询 ============= */
/* ================================================================= */
@media (max-width: 768px) {
    /* 调整整体布局，使其在手机上更紧凑 */
    body {
        padding: 0;
    }
    .document-container {
        padding: 0;
        border-radius: 0;
        max-width: 100%;
        box-shadow: none;
    }
    .page-header, .page-content, .page-footer {
        padding: 15px 20px;
    }
    .page-header {
        flex-direction: column;
        gap: 15px;
    }
    .logo, .pagend {
        height: 35px;
    }
    .title-section h2 {
        font-size: 1.4em;
    }

    /* 核心：将所有并排布局改为垂直堆叠 */
    .layout-columns, 
    .layout-grid {
        flex-direction: column;
        align-items: flex-start; /* 左对齐所有项 */
    }

    /* 确保并排布局中的label和输入框能正常显示 */
    .layout-columns > label,
    .layout-columns > .inline-field,
    .layout-grid > .inline-field {
        width: 100%; /* 占据整行 */
        flex-basis: 100%;
    }

    /* 问题1的网格布局，在小屏上变为单列垂直排列 */
    .dimension-grid {
        grid-template-columns: 1fr; /* 强制变为单列 */
    }
    
    /* 让所有输入框宽度适应小屏幕 */
    .answer-area input[type="text"] {
        width: 100%; /* 默认宽度占满 */
    }
    /* 但对于有特定类名的短输入框，可以给一个最大宽度 */
    .input-short {
        max-width: 150px;
    }
    .input-medium {
        max-width: 200px;
    }

    /* 修复 inline-field 在flex容器中的表现 */
    .inline-field input[type="text"] {
        flex-grow: 1; /* 在flex容器里自动伸展 */
        width: 0; /* flex-grow 生效的技巧 */
    }
    /* 如果inline-field本身不是flex布局的子项，确保不会太宽 */
    .inline-field.short {
        max-width: 250px;
    }
}

/* 新增：用于子问题组的容器 */
.sub-question-group {
    padding-left: 20px; /* 轻微缩进，表示层级关系 */
    border: none !important; /* 去掉它自己的边框 */
    padding-bottom: 0 !important;
    margin-bottom: 10px !important;
}

/* 新增：用于并排子问题的容器 */
.sub-question-inline {
    display: flex;
    align-items: center;
    gap: 10px; /* 标题和输入框之间的距离 */
    border: none !important; /* 去掉它自己的边框 */
    padding-bottom: 0 !important;
    margin-bottom: 10px !important;
}
.sub-question-inline .answer-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 新增：子问题标题样式 */
.sub-question-title {
    font-weight: normal !important; /* 使用正常字重，区别于主问题 */
    font-size: 1.05em !important;
    color: #555 !important;
    margin: 0 !important;
    white-space: nowrap; /* 防止标题换行 */
}

/* 新增：分隔符样式 */
.separator-text-container {
    text-align: center;
    margin: 15px 0;
}

/* 更新响应式设计，使其也支持新结构 */
@media (max-width: 768px) {
    .sub-question-inline {
        flex-direction: column; /* 在手机上，子问题标题和输入框垂直排列 */
        align-items: flex-start;
        gap: 5px;
    }
}

/* ========================================= */
/*       问题1和问题5的样式优化         */
/* ========================================= */

/* 主问题中副标题的样式 */
.question-subtitle {
    font-weight: normal;
    color: #888;
    font-size: 0.9em;
    margin-left: 8px;
}

/* “按米”和“按跨”两个区域的容器样式 */
.dimension-section {
     padding-left: 25px; /*轻微缩进，与主问题形成层级关系 */
    margin-top: 15px;
}
.dimension-section .answer-area {
    display: flex;
    flex-direction: column; /* 默认垂直堆叠 */
    gap: 10px; /* 长度和宽度之间的垂直间距 */
	padding-left: 0px; /*轻微缩进，与主问题形成层级关系 */
}

/* “按米：”和“按跨：”标题的样式 */
.dimension-title {
    font-size: 0.9em;
    font-weight: 550;
    color: #888;
    margin: 0 0 10px 0;
}

/* 输入行内元素的容器 */
.inline-field {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    flex-wrap: wrap; /* 允许在小屏幕上换行 */
    gap: 8px; /* 元素之间的水平间距 */
}
.inline-field label {
    font-weight: normal;
    margin-bottom: 0;
    /*width: 50px;  固定标签宽度，实现输入框左对齐 */
}

/* 分隔符“或”的样式 */
.separator-text-container {
    text-align: center;
    margin: 20px 0;
    color: #888;
    font-weight: bold;
	font-size: 0.9em;
}
.separator-text {
    display: inline-block;
    position: relative;
		
}
/* 用伪元素在“或”两边画出横线 */
.separator-text::before,
.separator-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 80px; /* 横线长度 */
    height: 1px;
    background-color: #ddd;
}


.separator-text::before {
    right: 100%;
    margin-right: 15px;
}
.separator-text::after {
    left: 100%;
    margin-left: 15px;
}

/* 响应式调整：确保在手机上也能良好显示 */
@media (max-width: 768px) {
    .dimension-section {
        padding-left: 0; /* 在手机上取消缩进 */
    }

    .separator-text::before,
    .separator-text::after {
        width: 50px; /* 在手机上缩短分隔线 */
    }
}

    .btn {
        background-color: #1c9b9c;
        color: white;
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1em;
		width: 15%;
    }
    .btn:hover {
        background-color: #167a7b;
    }
	
	.file-item {
        display: inline-block;
        background-color: #e9e9e9;
        border: 1px solid #ccc;
        border-radius: 15px;
        padding: 3px 8px;
        margin: 2px 5px;
        font-size: 0.9em;
    }
    .remove-file {
        color: red;
        font-weight: bold;
        cursor: pointer;
        margin-left: 5px;
    }
    .remove-file:hover {
        color: darkred;
    }