body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
    color: #333;
}

.simulator-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Ensure container takes full width of parent */
    min-height: calc(100vh - 80px); /* Adjust based on header height */
    padding: 20px;
    box-sizing: border-box;
    max-width: 720px; /* Constrain entire simulator width */
    margin: 0 auto; /* Center the entire simulator */
    gap: 16px; /* Spacing between main sections */
}

/* Mandatory font bug fix styles */
.simulator-container,
.simulator-container * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
}

/* Text readability and layout fixes for Korean text */
.simulator-container h1,
.simulator-container h2,
.simulator-container h3,
.simulator-container p,
.simulator-container ul li,
#question-text,
.reaction-text,
.modal-content h2,
.modal-content p {
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.6; /* Increased slightly for better readability */
}


.card {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 0; /* Let parent gap handle spacing */
    width: 100%;
    max-width: 720px; /* Adjusted from 500px to 720px as per user request */
    text-align: center;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}

/* Result Area Specific Layout */
#result-area {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Stretch children to fill available width */
    gap: 14px; /* Gap between sections */
    width: 100%; /* Take full width of parent */
    max-width: 720px; /* Max width for result content */
    margin: 0 auto; /* Center the result card */
    
    /* Ensure no multi-column layout */
    columns: auto;
    column-count: 1;
    column-width: auto;
    
    /* Inherit/override from .card for background, padding etc. */
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Ensure individual result sections fill their container */
#result-area h2,
#result-area p,
#result-area h3,
#result-area ul,
#result-area ul li,
.result-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box; /* Include padding/border in width */
}


.progress-container {
    width: 100%;
    max-width: 720px; /* Align max-width with the card */
    margin-bottom: 0; /* Let parent gap handle spacing */
    text-align: center;
    font-size: 1.1em;
    color: #555;
}

.progress-bar-outline {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

#progress-bar {
    height: 100%;
    width: 0%;
    background-color: #6a82fb; /* Blue gradient color */
    border-radius: 4px;
    transition: width 0.3s ease-in-out;
}

/* Quiz area container for strict 1-column stack */
#simulator-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px; /* Consistent spacing between quiz elements */
}

#question-text {
    font-size: 1.4em;
    margin-bottom: 0; /* Let parent gap handle spacing */
    min-height: 80px; /* To prevent layout shift */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Ensure text is centered horizontally within its flex container */
}

.reaction-text {
    font-size: 1em;
    color: #777;
    margin-top: 0; /* Let parent gap handle spacing */
    margin-bottom: 0; /* Let parent gap handle spacing */
    min-height: 20px;
}

.choices-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.choice-button, .action-button, #close-modal, .nav-button {
    background-color: #6a82fb; /* Primary button color */
    color: white;
    padding: 15px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.choice-button:hover, .action-button:hover, #close-modal:hover, .nav-button:hover {
    background-color: #4a67d9; /* Darker shade on hover */
}

.choice-button:active, .action-button:active, #close-modal:active, .nav-button:active {
    background-color: #3a52c0; /* Even darker on active */
    transform: translateY(1px);
}

.navigation-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 720px; /* Aligned max-width with card */
    margin-top: 0; /* Let parent gap handle spacing */
    background: none; /* Ensure no gray background for the panel */
    padding: 0; /* Ensure no extra padding creates a 'panel' */
    box-shadow: none; /* Ensure no shadow for the panel */
}

#back-button {
    background-color: #ccc;
    color: #333;
    width: auto; /* Allow button to fit content */
    max-width: fit-content;
    padding: 10px 20px;
}

#back-button:hover {
    background-color: #bbb;
}

#result-area h2 {
    color: #6a82fb;
    font-size: 1.8em;
    margin-bottom: 10px;
}

#result-area p {
    font-size: 1.1em;
    margin-bottom: 20px;
}

#result-area h3 {
    color: #555;
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 1.3em;
}

#result-area ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

#result-area ul li {
    background: #e9ecef;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
    text-align: left;
    color: #444;
}

.result-actions {
    margin-top: 30px;
    display: flex;
    flex-direction: row; /* Buttons should be horizontal */
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Modal Styles */
.modal {
    display: flex; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 30px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-content h2 {
    color: #6a82fb;
    margin-bottom: 15px;
}

.modal-content p {
    margin-bottom: 10px;
    font-size: 1.1em;
}

/* Animations */
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0;
}
/* === FORCE SINGLE COLUMN LAYOUT (Fix 2-column look) === */
.simulator-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  
  /* simulator / result should never create side columns */
  #simulator-area,
  #result-area {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  
  /* ensure internal blocks fill width */
  .progress-container,
  #question-card,
  .navigation-buttons,
  .result-actions {
    width: 100% !important;
    max-width: 720px !important;
    box-sizing: border-box !important;
  }
  
  /* back button should be normal below the card */
  .navigation-buttons {
    display: flex !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* remove any accidental multi-column behavior */
  #result-area,
  #result-area * {
    columns: auto !important;
    column-count: auto !important;
  }