/* Server guide: dark archive cards */
.guide-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 38px 0 20px;
}
.guide-tab {
  min-height: 88px;
  padding: 17px 22px;
  text-align: center;
  border: 1px solid #4d4248;
  border-radius: 12px;
  background: linear-gradient(120deg, #171216, #0e0c0f);
  color: #f1e9e5;
  font: 700 18px "Noto Sans KR", sans-serif;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.guide-tab::before {
  content: "BLOOD GUIDE";
  display: block;
  margin-bottom: 7px;
  color: #b98289;
  font: 700 10px Georgia, serif;
  letter-spacing: .2em;
}
.guide-tab:hover {
  transform: translateY(-3px);
  border-color: #d45b69;
  background: linear-gradient(120deg, #351820, #161015);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .26);
}
.guide-tab[aria-selected="true"] {
  border-color: #f06b7b;
  background: linear-gradient(120deg, #701420, #2b1117);
  box-shadow: inset 0 0 22px rgba(230, 67, 86, .18), 0 12px 28px rgba(0, 0, 0, .3);
}
.guide-tab[aria-selected="true"]::before { color: #ffe0e4; }
.guide-hint {
  margin: 15px 0 22px;
  color: #d9ccca;
  font-size: 14px;
}
.guide-pane { padding-top: 14px; }
.guide-pane[hidden] { display: none; }
.guide-pane-title {
  margin: 0 0 8px;
  color: #fff8f5;
  font-size: 27px;
}
.guide-pane-description {
  margin: 0 0 20px;
  color: #cdc1bf;
}

.guide-pane .post {
  margin: 14px 0;
  border: 1px solid rgba(231, 218, 216, .18);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(110deg, #151014, #0f0d10);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.guide-pane .post:hover {
  transform: translateY(-2px);
  border-color: rgba(239, 99, 118, .78);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .26);
}
.guide-pane .post summary {
  display: flex;
  align-items: center;
  gap: 17px;
  height: 150px;
  padding: 18px 28px;
  list-style: none;
  color: #fff8f5;
  font-size: 21px;
  font-weight: 700;
  cursor: pointer;
}
.guide-pane .post summary::-webkit-details-marker { display: none; }
.guide-pane .post summary::before {
  content: "›";
  color: #ef5e72;
  font-size: 34px;
  line-height: 1;
  transition: transform .2s ease;
}
.guide-pane .post[open] summary::before { transform: rotate(90deg); }
.guide-pane .post summary img {
  order: 2;
  width: 118px;
  height: 82px;
  margin-left: auto;
  object-fit: cover;
  border: 1px solid rgba(232, 201, 190, .5);
  box-shadow: 0 7px 16px rgba(0, 0, 0, .38);
}
.guide-pane .post-body {
  padding: 30px 34px 36px;
  border-top: 1px solid rgba(240, 113, 133, .34);
  background:
    radial-gradient(circle at top right, rgba(125, 23, 43, .42), transparent 48%),
    linear-gradient(120deg, #34131e, #190e14 68%, #110b0f);
  color: #f4e9e6;
  line-height: 1.9;
}
.guide-pane .post-body h2,
.guide-pane .post-body h3 { color: #ffc2b3; }
.guide-pane .post-body strong { color: #ffb9a9; text-shadow: 0 0 16px rgba(255, 82, 110, .18); }
.guide-pane .post-body img {
  display: block;
  width: min(100%, 680px);
  height: auto;
  margin: 30px auto 0;
  border: 1px solid rgba(224, 187, 137, .56);
  box-shadow: 0 15px 34px rgba(0, 0, 0, .42);
}

@media (max-width: 850px) {
  .guide-tabs { grid-template-columns: 1fr; }
  .guide-tab { min-height: 72px; font-size: 16px; }
  .guide-pane-title { font-size: 22px; }
  .guide-pane .post summary {
    height: 104px;
    padding: 14px 16px;
    font-size: 17px;
  }
  .guide-pane .post summary img {
    width: 80px;
    height: 58px;
  }
  .guide-pane .post-body { padding: 22px 18px 26px; }
  .guide-pane .post { border-radius: 14px; }
  .guide-pane .post-body img { width: 100%; max-width: 520px; }
}