/* 添加字體定義 */
@font-face {
    font-family: 'Regular';
    src: url('/assets/fonts/Regular.ttf') format('truetype');
}

.bank-container {
    padding: 20px;
    display: flex;
    gap: 30px;
    font-family: 'Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    width: 100%;
    height: calc(100vh - 40px);
}

/* 左側預覽區域 */
.preview-area {
    flex: 1;                    /* 佔據一半空間 */
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-right: 1px solid #ddd;  /* 添加分隔線 */
}

.bank-preview {
    position: relative;
    width: 400px;
    margin: auto;
}

.template-image {
    width: 100%;
    height: auto;
    display: block;
}

.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-family: 'Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 帳號位置 */
.account-number {
    position: absolute;
    top: 12.5px;        /* 再往下調整到12.5px */
    right: -39px;       /* 保持水平位置不變 */
    font-size: 20px;
    color: #333;
    min-width: 100px;   /* 設置最小寬度 */
    text-align: left;   /* 文字左對齊 */
}

/* 日期位置 */
.date-value {
    position: absolute;
    top: 56px;         /* 再往上調整到56px */
    left: 20px;        /* 往左調整兩個文字距離 */
    font-size: 20px;   /* 放大字體到20px */
    color: #333;
}

/* 交易金額位置 - 紅色顯示 */
.amount-value {
    position: absolute;
    top: 65px;         /* 往下調整半個字的距離 */
    right: -10px;      /* 往左調整一個文字距離 */
    font-size: 22px;   /* 放大字體到22px */
    font-weight: bold; /* 加粗字體 */
    color: #D32F2F;    /* 改為紅色 */
}

/* 交易時間位置 */
.time-value {
    position: absolute;
    top: 130px;        /* 往下調整10px */
    left: 200px;       /* 保持水平位置不變 */
    font-size: 20px;   /* 放大字體 */
    color: #333;
}

/* 交易資訊位置 */
.type-value {
    position: absolute;
    top: 165px;        /* 往上調整5px */
    left: 200px;       /* 與交易時間對齊 */
    font-size: 20px;   /* 放大字體 */
    color: #333;
    text-transform: uppercase;
}

/* 附言位置 */
.remarks-value {
    position: absolute;
    top: 300px;
    left: 120px;
    font-size: 18px;
    color: #333;
}

/* 右側控制面板 */
.control-panel {
    flex: 1;                    /* 佔據一半空間 */
    background: white;
    padding: 20px;
    overflow-y: auto;          /* 內容過多時可滾動 */
}

/* 表單樣式 */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #007AFF;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.form-group input:focus {
    outline: none;
    border-color: #000;
}

/* 預覽區內容樣式 */
.bank-header {
    margin-bottom: 40px;  /* 增加間距 */
}

/* 跨行轉入標題 */
.transaction-title {
    font-size: 24px;     /* 加大字體 */
    color: #666;         /* 灰色文字 */
    margin-bottom: 40px; /* 增加間距 */
}

/* 分隔線 */
.divider {
    border-bottom: 1px solid #ddd;
    margin: 20px 0;
}

/* 資訊列樣式 */
.info-row {
    display: flex;
    margin-bottom: 30px;  /* 增加行間距 */
}

.info-row .label {
    width: 120px;        /* 增加標籤寬度 */
    color: #666;         /* 灰色文字 */
    font-size: 18px;     /* 加大字體 */
}

.info-row .value {
    flex: 1;
    font-size: 18px;     /* 加大字體 */
    color: #333;
}

/* 保存按鈕 */
#save-btn {
    width: 100%;
    padding: 10px;
    background: #007AFF;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 20px;
}

#save-btn:hover {
    background: #0056b3;
}