* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic Pro", sans-serif;
    background-color: #f5f5f5;
    padding: 20px;
}

.container {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 30px;
    max-width: 1480px;
    margin: 0 auto;
    height: calc(100vh - 40px);
    overflow: hidden;
}

/* Editor Panel */
.editor-panel {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: 100%;
    overflow-y: auto;
}

.editor-panel h1 {
    font-size: 24px;
    margin-bottom: 25px;
    color: #333;
}

.form-section {
    margin-bottom: 25px;
}

.form-section label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #555;
}

.form-section h3 {
    font-size: 16px;
    margin-bottom: 12px;
    color: #333;
}

.ingredients-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ingredients-header h3 {
    margin-bottom: 0;
}

.servings-control {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.servings-control label {
    margin-bottom: 0;
    font-weight: normal;
}

.servings-control input[type="number"] {
    padding: 5px;
    text-align: center;
    margin-bottom: 0;
}

input[type="text"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 10px;
}

textarea {
    resize: vertical;
    min-height: 80px;
}

.ingredient-row,
.instruction-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: start;
    cursor: grab;
    transition: background-color 0.2s;
}

.ingredient-row:active,
.instruction-row:active {
    cursor: grabbing;
}

.ingredient-row.dragging,
.instruction-row.dragging {
    opacity: 0.5;
    background-color: #f0f0f0;
}

.drag-handle {
    color: #999;
    font-size: 18px;
    cursor: grab;
    user-select: none;
    padding: 5px;
    line-height: 1;
}

.drag-handle:active {
    cursor: grabbing;
}

.ingredient-row input {
    flex: 1;
    margin-bottom: 0;
}

.ingredient-row input.symbol-input {
    flex: 0.15;
    text-align: center;
}

.ingredient-row input:nth-of-type(3) {
    flex: 0.6;
}

.instruction-row textarea {
    flex: 1;
    margin-bottom: 0;
}

.remove-btn {
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-size: 20px;
    flex-shrink: 0;
}

.remove-btn:hover {
    background: #cc0000;
}

.add-btn {
    width: 100%;
    padding: 10px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.add-btn:hover {
    background: #45a049;
}

input[type="file"] {
    margin-top: 5px;
}

.button-group {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.generate-btn,
.clear-btn {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.generate-btn {
    background: #2196F3;
    color: white;
}

.generate-btn:hover {
    background: #0b7dda;
}

.clear-btn {
    background: #757575;
    color: white;
}

.clear-btn:hover {
    background: #616161;
}

.import-section {
    border: 2px dashed #ddd;
    padding: 20px;
    border-radius: 5px;
    background: #fafafa;
}

.import-section label {
    font-weight: bold;
    color: #555;
}

.import-section small {
    display: block;
    color: #666;
    margin-top: -5px;
    margin-bottom: 10px;
}

.import-section small a {
    color: #2196F3;
    text-decoration: none;
}

.import-section small a:hover {
    text-decoration: underline;
}

.import-btn {
    width: 100%;
    padding: 12px;
    background: #FF9800;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 5px;
}

.import-btn:hover {
    background: #F57C00;
}

.import-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

#importStatus {
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
}

/* Preview Panel */
.preview-panel {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.preview-panel h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333;
    width: 100%;
    text-align: left;
}

/* Pages Container for vertical layout */
.pages-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 210mm;
}

/* Recipe Page Layout */
.recipe-page {
    width: 210mm;
    height: 297mm;
    background: white;
    padding: 15mm 15mm 20mm 15mm;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8mm;
    padding-bottom: 3mm;
    border-bottom: 1px solid #e0e0e0;
}

.page-number {
    font-size: 10pt;
    color: #666;
}

.recipe-tag {
    background: #000;
    color: white;
    padding: 8px 12px;
    font-size: 9pt;
    writing-mode: vertical-rl;
    text-align: center;
    line-height: 1.4;
}

.recipe-category-wrapper {
    margin-bottom: 3mm;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recipe-category {
    font-size: 10pt;
    color: #666;
    font-weight: normal;
}

.recipe-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8mm;
    padding-bottom: 5mm;
    border-bottom: 2px solid #333;
}

.recipe-no {
    font-size: 22pt;
    font-weight: bold;
    color: #333;
}

.recipe-title {
    font-size: 22pt;
    font-weight: bold;
    color: #333;
}

.ingredients-section {
    margin-bottom: 8mm;
}

.ingredients-section h3 {
    font-size: 11pt;
    font-weight: bold;
    margin-bottom: 5mm;
    padding-bottom: 2mm;
    border-bottom: 1px solid #333;
}

.ingredients-list {
    font-size: 9.5pt;
    line-height: 1.8;
}

/* 材料が多い時は2カラムに */
.ingredients-section.split-columns .ingredients-list {
    columns: 2;
    column-gap: 8mm;
}

.ingredients-section.split-columns .ingredient-item {
    break-inside: avoid;
}

.ingredient-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px dotted #ddd;
}

.ingredient-name {
    flex: 1;
}

.ingredient-symbol {
    display: inline-block;
    width: 1em;
    text-align: center;
    margin-right: 3px;
}

.ingredient-amount {
    text-align: right;
    white-space: nowrap;
    margin-left: 10px;
}

.instructions-section {
    margin-bottom: 8mm;
}

.instructions-section h3 {
    font-size: 11pt;
    font-weight: bold;
    margin-bottom: 5mm;
    padding-bottom: 2mm;
    border-bottom: 1px solid #333;
}

.instructions-content {
    display: grid;
    gap: 5mm;
}

/* Dynamic layout based on content - 最大2カラムまで */
.instructions-content.layout-2col {
    grid-template-columns: 1fr 1fr;
    column-gap: 8mm;
}



.instruction-item {
    font-size: 9pt;
    line-height: 1.6;
}

.instruction-title {
    font-weight: bold;
    margin-bottom: 2mm;
}

.instruction-text {
    text-align: justify;
}

.tips-section {
    background: #f9f9f9;
    padding: 5mm;
    border: 1px solid #ddd;
    border-radius: 3mm;
}

.tips-section h3 {
    font-size: 11pt;
    font-weight: bold;
    margin-bottom: 3mm;
}

.tips-section p {
    font-size: 9pt;
    line-height: 1.6;
    text-align: justify;
}

/* 追加ページのスタイル */
.recipe-page-extra {
    margin-left: 0;
}

.extra-content {
    flex: 1;
}

/* ページ番号インジケーター */
.page-number-indicator {
    font-size: 9pt;
    color: #999;
    font-weight: normal;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .container {
        grid-template-columns: 400px 1fr;
    }
}

@media (max-width: 1200px) {
    .container {
        grid-template-columns: 1fr;
    }
    
    .editor-panel {
        position: relative;
        top: 0;
    }
}

@media print {
    body {
        background: white;
    }
    
    .editor-panel,
    .preview-panel h2 {
        display: none;
    }
    
    .preview-panel {
        padding: 0;
        box-shadow: none;
    }
    
    .recipe-page {
        box-shadow: none;
        margin: 0;
    }
}