/* Ensure the full height and width for the page */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  /* font-family: 'Noto Sans KR', sans-serif; */
  font-family: 'NanumGothic';

  overflow: hidden;
  /* Ensure the font is applied */
}

.hidden {
  display: none;
}

/* General settings for smooth transitions */
* {
  transition: all 0.3s ease-in-out;
  /* Smoother transition with less bouncing */
}

div#main-content {
  width: 100%;
  height: 100%;
}

.key-explain-one {
  margin: 10px;
  height: auto;
}


.detailed-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Style for the top-section */
.top-section {
  height: 40px;
  width: 100%;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.bottom-section {
  height: calc(100% - 40px);
}

/* Ensure the menu button keeps the same width when sidebar is expanded */
.top-section button {
  height: 100%;
  width: 250px;
  /* Fixed width for the button */
  border: none;
  background-color: #69a8ec;
  color: white;
  padding: 0;
  font-size: 1.2rem;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}

/* White box around the top-bar text */
.top-bar {
  background-color: white;
  padding: 5px 20px;
  border-radius: 5px;
  font-size: 1.2rem;
  color: #333;
  margin: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  flex-grow: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

#sidebar {
  width: 250px;
  min-width: 250px;
  background-color: #f8f9fa;
  overflow-y: auto;

}

/* Main button */
.sidebar-btn-main,
.sidebar-btn-normal,
.sidebar-btn-small {
  display: block;
  /* Full width block */
  transition: all 0.3s ease-in-out;
}

.sidebar-btn-main {
  color: #212529;
  /* Dark text color */
  font-weight: bold;
  /* Bold text */
  font-size: 1.5rem;
  /* Larger font size */
  padding: 14px 24px;
  /* Adjust padding for larger size */
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  /* Rounded corners */
  margin: 10px 15px;
  /* Margin for spacing */
  border: 2px solid #212529;
  /* Dark border to make button visible */
}

.sidebar-btn-main:hover {
  background-color: #f8f9fa;
  /* Light gray background on hover */
  border-color: #ced4da;
  /* Subtle border on hover */
}

/* Normal button */
.sidebar-btn-normal {
  color: #212529;
  /* Dark text color */
  background-color: #ffffff;
  /* White background */
  font-size: 0.9rem;
  /* Regular font size */
  padding: 5px 15px;
  /* Normal padding */
  text-align: center;
  text-decoration: none;
  font-size: 1.2rem;

  border-radius: 4px;
  /* Rounded corners */
  margin: 5px 15px;
  /* Margin for spacing */
  border: 1px solid #dee2e6;
  /* Subtle border */
}

.sidebar-btn-normal:hover {
  background-color: #f8f9fa;
  /* Light gray on hover */
  border-color: #ced4da;
  /* Border color on hover */
}

/* Small button */
.sidebar-btn-small {
  color: #212529;
  /* Dark text color */
  background-color: #ffffff;
  /* White background */
  font-size: 0.8rem;
  /* Smaller font size */
  padding: 6px 12px;
  /* Smaller padding */
  text-align: left;
  text-decoration: none;
  border-radius: 3px;
  /* Rounded corners */
  margin: 3px 15px;
  /* Smaller margin */
  border: 1px solid #dee2e6;
  /* Subtle border */
}

.sidebar-btn-small:hover {
  background-color: #f8f9fa;
  /* Light gray on hover */
  border-color: #ced4da;
  /* Border color on hover */
}

.sidebar-btn-small.extra-small{
  font-size:0.5rem;
}


/* User info */
.user-info {
  padding: 15px 20px;
  /* Padding added for spacing */
  text-align: center;
  background-color: #e9ecef;
  /* Light gray background */
  border-top: 1px solid #dee2e6;
  /* Weak top border */
  margin-top: auto;
  /* Push to bottom */
  white-space: nowrap;
  /* Prevent text wrapping */
  overflow: hidden;
  font-size: 1rem;
  font-weight: bold;
  transition: background-color 0.3s;
}


.sidebar-section-title {
  padding: 10px 20px;
  /* Padding added for spacing */
  font-size: 0.9rem;
  font-weight: bold;
  /* Bold font for section titles */
  color: #495057;
  /* Dark gray color */
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  background-color: #f8f9fa;
  /* Match sidebar background */
  margin-top: 10px;
  /* Spacing above each section title */
  border-bottom: 1px solid #dee2e6;
  /* Weak bottom border */
  overflow: hidden;
  /* Hide overflow */
}

/* mobile view (0px - 767px) */
@media (max-width: 1199.98px) {
  .top-section {
    height: 40px;
  }

  .top-section button {
    width: 80px;
    font-size: 1rem;

  }

  .bottom-section {
    height: calc(100% - 40px);
  }

  #sidebar {
    width: 100%;
    min-width: 100%;
  }



  .top-bar {
    font-size: 1rem;
  }
}

/* test page */
/* test page */
/* test page */
/* test page */
/* test page */
/* test page */

/* General container for the study page */
.study-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Row 1: Top area and log area for PC */
.row-top {
  display: flex;
  flex-grow: 1;
  min-height: calc(100% - 320px);
  max-height: calc(100% - 320px);
  margin: 0;
  /* Fixed height for log area on PC */
  border-bottom: 1px solid;
  width: 100%;
}

/* Top Area */
.top-area {
  flex-grow: 2;
  background-color: #ffffff;
  padding: 20px 10px;
  overflow-y: auto;
  /* Ensure content doesn't overflow */
  height: 100%;
  text-indent: 8px;
}

.top-area>h6 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}


.top-area>p {
  font-size: 16px;
  max-width: 40em;
  padding: 20px;
  border: solid 1px;
  text-align: justify;
  margin: 0 20px;
}

.bottom-area>h6 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}


/* Log Area (Hidden on mobile) */
.log-area {
  /* min-width: 853px; */
  /* max-width: 853px; */
  /* Fixed width for log area */
  width: 100%;
  padding: 0;
  background-color: #e9ecef;
  overflow-y: auto;
  /* Allow scrolling if content exceeds height */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  height: 100%;
}

/* Row 2: Bottom area and button area (Fills remaining height) */
.row-bottom {
  display: flex;
  margin: 0;
  flex-grow: 1;
  /* Fill remaining height */

  /* Ensure row-bottom expands fully */
  max-height: 320px;
  width: 100%;
  max-width: 100%;
}

/* Bottom Area */
.bottom-area {
  flex-grow: 3;
  /* Ensure this area expands to fill available space */
  background-color: #ffffff;
  padding: 20px 10px;
  height: 100%;
  /* Forces bottom area to stretch fully */
  overflow-y: auto;
  /* Prevent content from expanding area */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  text-indent: 8px;
}

/* Button Area */
.button-area {
  max-width: 200px;
  /* Fixed width for button area on PC */
  background-color: #a0b9d3;
  padding: 10px;
  color: white;
  height: 100%;
  /* Forces button area to stretch fully */
  overflow: hidden;
  display: flex;
  /* Prevent content overflow */
  /* justify-content: center; */
}

.key-explain {
  max-height: 70px;
  background: #f8f9fa;
  color: black;
  border-radius: .3rem;
  padding: 5px 10px;
  margin: auto;
  margin-bottom: 5px;
  width: auto;
  margin-right: 5px;
}

.button-area>.container {
  margin-top: auto;
}

.bottom-area>* {
  max-width: 70em;
  padding-left: 20px;
  padding-right: 20px;
  text-align: justify;
  font-size: 15px;
}

.bottom-area>h4 {
  font-size: 20px;
}

p.prop-index {
  padding-left: 20px;
}

.bottom-area>p.prop-text {
  max-width: 40em;
  padding: 20px;
  font-size: 20px;
  /* text-indent: -30px; */
  line-height: 30px;
  border: 1px solid black;
  margin-left: 30px;
  /* font-weight: bold; */
}

/* Mobile Styles */
@media (max-width: 1199.98px) {


  .top-area>h6 {
    font-size: 15px;
  }

  /* Top Area for mobile (Full width) */
  .row-top {
    flex-direction: column;
    min-height: calc(100% - 94px);
    max-height: calc(100% - 94px);
    flex-grow: 1;
    /* Assign 30% height for row-top */
  }

  .top-area,
  .bottom-area {
    width: 100%;
    padding: 10px;
    overflow-y: auto;
    /* Prevent content from expanding area */
    border-bottom: 2px solid lightblue;
  }

  .top-area>h6 {
    font-size: 15px;
    margin-bottom: 10px;
    padding-left: 20px;
  }

  .top-area>p {
    font-size: 15px;
    line-height: 22.5px;
    border: none;
    padding: 0 20px 0 0;
  }

  .bottom-area>h6.prop-index {
    font-size: 16px;
    margin-left: 0;
    padding: 0;
    padding-left: 20px;
    margin-bottom: 10px;
  }

  .bottom-area>p.prop-text {
    font-size: 15px;
    line-height: 22.5px;
    border: none;
    padding: 0px 20px 0 20px;
    margin: 0;
    max-width: 100%;
  }

  /* Hide log area on mobile */
  .log-area {
    display: none;
  }

  /* Bottom Area for mobile */
  .row-bottom {
    flex-direction: column;
    flex-grow: 2;
    /* Ensure row-bottom fills remaining height */
    /* Fixed 70% height for row-bottom */
    width: 100%;
    max-height: 94px;
  }

  .button-area {
    flex-basis: auto;
    height: 100px;
    max-width: 100%;
    /* Fixed height for button area on mobile */
    width: 100%;
    overflow: hidden;
    /* Prevent content overflow */
  }

  .key-explain {
    display: none;
  }
}

.log {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  padding: 0;
  border-bottom: 1px solid #000000;
  font-size: 14px;
  height: 24px;
  width: 100%;
}


/* Remove margin and padding between buttons */
.container .row.no-gutters {
  margin: 0;
  /* Remove the row's margin */
  padding: 0;
  /* Remove the row's padding */
  width: 100%;
}

.button-area>.container {
  padding: 0;
  /* Remove padding for the container */
  justify-items: center;
  /* flex-direction: column; */
}

.container .row.no-gutters>[class*='col-'] {
  padding-left: 0;
  padding-right: 0;
}

.container.button-container {
  padding: 0;
}

/* Ensure buttons fill the entire space without margin */
.btn-block {
  margin: 0 5px;
  /* Add 5px space between buttons */
  padding: 0.75rem 1rem;

  /* Ensure consistent padding inside the button */
}

/* Adjust the height for a more compact layout */
.btn-lg {
  height: 74px;
  /* Set the button height to 84px */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
}

.btn-answer{
  background-color: #69a8ec;
}

.container .row.no-gutters>[class*='col-'] {
  /* margin-right: 10px; */
  padding: 5px 5px 5px 0;
  margin: 0 5px 0 -5px;
}


/* Media query for screens smaller than 1200px (mobile view) */
@media (max-width: 1199.98px) {
  .btn-block {
    padding: 0.5rem 0.75rem;
    margin: 0 10px;
    /* Ensure 5px space between buttons on mobile */
  }

  .button-area {
    max-height: 94px;
    padding: 0;
  }

  .key-explain-one>p {
    display: none;
  }



  .btn-lg {
    font-size: 1.5rem;
    /* Reduce font size for smaller screens */
    padding: 0.5rem 1rem;
    height: 74px;
    margin-top: auto;
    margin-bottom: auto;
    /* Keep the height at 84px on mobile as well */
  }

  .button-area>.container {
    max-width: 360px;
    width: 100%;
    padding-right: 20px;
    margin-left: auto;
    margin-right: 0;
    /* padding-bottom: 10px; */
  }

  .container .row.no-gutters>[class*='col-'] {
    padding: 0 0 10px 10px;
  }

  .no-gutters>.col-md-6 {
    width: 40%;
  }
  .no-gutters>.col-md-4 {
    width: 30%;
  }


  .no-gutters>.col-md-3 {
    width: 29%;
  }
  .no-gutters>.col-md-2{
    width: 19%;
  }

  .btn-lg.next-button {
    margin-bottom: 10px;
  }

  .btn-answer {
    height: 74px;
  }
}

/* Style for the log area */
.log.right {
  /* lightgreen for right answer  */
  background-color: rgb(210, 253, 210);
}

.log.wrong {
  /* lightcoral for wrong answer */
  background-color: rgb(255, 198, 198);
}

.log>span.log-ox {
  max-width: 72px;
  min-width: 72px;
  padding-right: 5px;
  padding-left: 10px;
  text-align: left;
}

.log>span {
  border-right: 1px solid;
  padding-left: 5px;
}

.log>span.log-time {
  /* Time */
  font-size: 14px;
  min-width: 100px;
  max-width: 100px;
  text-align: left;
}

.log>span.log-question {
  /* Question */
  font-size: 14px;
  min-width: 170px;
  max-width: 170px;
  text-align: left;
}

.log>span.log-proposition {
  /* overflown text to ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  /* single line */
  white-space: nowrap;
  flex-grow: 1;
  /* max-width: calc(100% - 300px); */
}

.popup {
  position: absolute;
  top: 40px;
  left: 10px;
  bottom: 30px;
  max-width: 500px;
  width: calc(100% - 20px);
  background-color: white;
  border: 2px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.hidden {
  display: none;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
  margin-bottom: 0;
}

.popup-close {
  cursor: pointer;
  background-color: transparent;
  border: none;
  font-size: 18px;
  line-height: 30px;
}

.popup-content {
  flex-grow: 1;
  /* padding-top: 20px; */
  text-align: left;

  /* Text starts from the left */
  justify-content: flex-start;
  /* Start content at the top */
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  white-space: normal;
  overflow-y: auto;
  /* Ensure normal white space handling, like new lines */
}

#show-info-popup {
  margin-left: auto;
  /* Pushes the button to the right */
}

.statistic>h4 {
  margin-top: 10px;
}

.statistic>h5 {
  margin-top: 10px;
}

.popup.last-answer{
  max-width: calc(100% - 210px);
}

.last-answer>.popup-content {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.popup-content>.popup-proposition {
  display: flex;
  align-items: baseline;
  padding: 10px;
  /* border-bottom: 1px solid #ccc; */
  border-right : 1px solid #ccc;
  /* flex-grow: 2; */
  height : 100%;
  flex-direction: column;
  width: 40%;
}

.popup-content>.popup-answer{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: baseline;
  padding: 10px;
  /* border-bottom: 1px solid #ccc; */
  /* flex-grow: 3; */
  height:100%;
  width: 60%;
}

/* mobile screen for last-answer popup */
@media (max-width: 1199.98px) {
  .popup.last-answer {
    max-width: calc(100% - 20px);
    padding: 5px;
    bottom: 5px;
  }

  .last-answer>.popup-content {
    flex-direction: column;
    height:auto;
    margin-top:5px;
    padding: 0;
  }

  .popup-content>.popup-proposition{
    border: 1px solid #ccc;
    overflow: auto;
    width:100%;
  }
  .popup-content>.popup-answer{
    border: 1px solid #ccc;
    overflow-y: auto;
    width: 100%;
  }


}

/* Styles for landscape orientation on mobile devices only */
@media only screen and (max-width: 1199.98px) and (max-height: 500px) and (orientation: landscape) {
  /* Apply your styles for mobile landscape view */
/* Style for log-area to cover the entire window with 20px margin inside */
  .log-area {
    display: block;
    position: fixed;
    top: 5vh;
    left: 5vw;
    width: 90vw;
    height: 300px;
    padding: 0;
    box-sizing: border-box;
    background-color: #f0f0f0;
    overflow-y: auto;
    z-index: 1;
    border: 3px solid;
  }
}

/* table style with border */
table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 2px solid #000000;
}
td {
  border: 1px solid #ccc;
  text-align: center;
}
tr.tr1 {
  border-top : 2px solid #000000;
}