.jumbotron-img {
  background-image: url("/assets/images/minecraft_main.png");
  background-size: cover;
  background-position: center;
}

.nazo-img {
    width: 100%;
    max-width: 700px;
}

.nazo-main-img {
    width: 100%;
}

.nazo-sub-img {
    min-width: 30%;
    max-width: 50%;
    margin-right: 8px;
    flex: 1;
}
.nazo-sub-img:last-child {
    margin: 0;
}

.download-btn {
    padding: 12px 36px;
}

.minecraft-hint-modal .modal-body {
    height: calc(100vh - 200px);
    overflow: scroll;
}

.minecraft-hint-modal .modal-footer {
    justify-content: center;
}

.minecraft-hint-container {
    padding: 8px 4px;
}

.minecraft-hint-subject {
    font-size: 24px;
}

.details {
	height: 64px;
	transition: all ease-in-out .3s;
	border-left: 2px solid #00a5a0;
	border-right: 2px solid #00a5a0;
	box-sizing: border-box;
}

.minecraft-hint:last-child {
    border-bottom: 2px solid #00a5a0;
}
.details[open] {
	height: fit-content;
	padding-bottom: 10px;
	background-color: #bee1de;
}
.details-summary {
	display: block;
	padding: 16px 20px;
	border-top: 1px solid #00a5a0;
	font-size: 20px;
	font-weight: bold;
	transition: all ease-in-out .3s;
}
.details-summary:hover {
    cursor: pointer;
    background-color: #bee1de;
}
.details-summary::-webkit-details-marker {
	display: none;
}
.details-content {
	margin: 0 20px 20px;
	padding: 20px;
	overflow: hidden;
	overflow-y: auto;
	background-color: #fff;
}

.details[open] .details-content {
  	animation: fadeIn .3s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.yaml-editor-container {
  position: relative;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.yaml-editor {
  background: transparent;
  padding: 12px;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  resize: vertical;
  width: 100%;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  tab-size: 2;
  position: relative;
  z-index: 2;
}

.yaml-editor:focus {
  outline: none;
}

.yaml-editor-container:focus-within {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* インデントガイドライン用のキャンバス */
.indent-guide-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

/* プレビューエリアのスタイル */
#hint-preview {
  max-height: 400px;
  overflow-y: auto;
  background-color: #f8f9fa;
}

#hint-preview h2 {
  color: #495057;
  border-bottom: 2px solid #dee2e6;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* エラー表示用 */
.yaml-error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 8px 12px;
  border-radius: 4px;
  margin-top: 8px;
}

/* 行番号表示用 */
.yaml-editor-with-lines {
  display: flex;
}

.line-numbers {
  background-color: #e9ecef;
  color: #6c757d;
  padding: 12px 8px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  min-width: 40px;
  border-right: 1px solid #dee2e6;
  white-space: pre;
  user-select: none;
}