/*
 * Hephaestusによるお守りメーカーの美の法典 Ver. 2.0 (真・完全無欠版)
 */
.omamori-container { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: flex-start; }
@media(max-width: 900px) { .omamori-container { grid-template-columns: 1fr; } }

.form-step { margin-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
.form-step summary { font-size: 1.5em; color: var(--primary-color); font-weight: bold; padding: 15px 10px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; transition: background-color 0.2s; }
.form-step summary::-webkit-details-marker { display: none; }
.form-step summary:hover { background-color: #f7fafc; }
.form-step summary h3 { display: flex; align-items: center; gap: 12px; margin: 0; }
.form-step summary::after { content: '▼'; font-size: 0.7em; transition: transform 0.3s; }
.form-step[open] summary::after { transform: rotate(180deg); }

.form-content { background: #fff; border-radius: 0 0 12px 12px; padding: 25px; border: 1px solid #e2e8f0; border-top:none; display: flex; flex-direction: column; gap: 20px;}
.form-group, .form-group-full { display: flex; flex-direction: column; gap: 8px; }
.form-group label, .form-group-full label { font-weight: bold; color: #4a5568; }
.form-group input, .form-group select, .form-group-full input, .form-group-full textarea { padding: 12px 15px; font-size: 1.05em; border-radius: 8px; border: 1px solid #cbd5e0; width: 100%; box-sizing: border-box; }
.form-group input:focus, .form-group select:focus { outline:none; border-color:var(--secondary-color); box-shadow:0 0 0 3px rgba(0,85,165,0.2); }

.omamori-character-column { position: sticky; top: 120px; }
.commentary{display:flex;align-items:flex-start;gap:15px;margin-bottom:20px;transition:opacity 0.5s;}.commentary img{width:60px;height:auto;flex-shrink:0}.commentary .bubble{padding:18px 22px;border-radius:18px;position:relative;line-height:1.8;font-size:1.1em;width:100%}.chisamaru-comment .bubble{background-color:#ebf8ff;color:#2c5282;border-bottom:3px solid #63b3ed}.chisamaru-comment .bubble::before{content:'';position:absolute;top:20px;left:-8px;border:9px solid transparent;border-right-color:#ebf8ff}.correct-comment{flex-direction:row-reverse}.correct-comment .bubble{background-color:#f7fafc;color:#4a5568;border-bottom:3px solid #a0aec0}.correct-comment .bubble::before{content:'';position:absolute;top:20px;right:-8px;border:9px solid transparent;border-left-color:#f7fafc}

.action-button-container { text-align: center; margin-top: 25px; }
.omamori-button { display: inline-flex; align-items:center; justify-content:center; gap:10px; padding: 15px 40px; font-size: 1.2em; font-weight: bold; color: #fff; background-color: var(--accent-color); border-radius: 50px; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(255,121,0, 0.2); border: none; cursor: pointer; }
.omamori-button:hover { background-color: #dd6b20; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,121,0, 0.3); }

.modal-content.omamori-preview { max-width: 900px; width: 95%; height: 90vh; display: flex; flex-direction: column; }
.modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:1px solid #e2e8f0;}.modal-header h3{margin:0;font-size:1.5em;color:var(--primary-color);}
.preview-area{flex-grow:1;border:1px solid #ccc;margin:15px 0;}.preview-area iframe{width:100%;height:100%;border:none;}
.modal-footer{text-align:center;}
.omamori-button.print { background-color: #2f855a; box-shadow: 0 4px 15px rgba(47, 133, 90, 0.2); }
.omamori-button.print:hover { background-color: #276749; box-shadow: 0 8px 20px rgba(47, 133, 90, 0.3); }