/* 꾸미기 담당 (CSS) - 휴대폰 화면에 딱 맞게! */

body {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: linear-gradient(180deg, #ffd86b, #ff9a3c, #ff6f91);
  min-height: 100vh;
  margin: 0;
  padding: 16px;
  text-align: center;
}

h1 {
  color: #ffffff;
  font-size: 34px;
  margin: 10px 0;
  text-shadow: 2px 3px 0 #b34700;
}

.소개글 {
  color: #fff6e5;
  font-size: 18px;
  margin-top: 0;
}

/* 메뉴 버튼들 */
.메뉴 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.메뉴버튼 {
  background: #ffffff;
  color: #d2691e;
  font-size: 18px;
  font-weight: bold;
  font-family: inherit;
  border: 3px solid #b34700;
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 0 #b34700;
}

/* 지금 보고 있는 메뉴 */
.메뉴버튼.켜짐 {
  background: #b34700;
  color: #ffffff;
}

.링크 {
  background: #4fc3f7;
  color: #ffffff;
  border-color: #0277bd;
  box-shadow: 0 4px 0 #0277bd;
}

/* 내용 칸: 기본은 숨김, 보임이 붙으면 나타나요 */
.칸 {
  display: none;
}

.칸.보임 {
  display: block;
}

/* 공략 카드 */
.카드 {
  background: #fffdf5;
  border: 4px solid #ffffff;
  border-radius: 20px;
  padding: 14px 18px;
  margin: 0 auto 14px auto;
  max-width: 420px;
  text-align: left;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.카드 h2 {
  font-size: 22px;
  color: #d2691e;
  margin: 4px 0;
}

.카드 p {
  font-size: 17px;
  color: #5a3d1e;
  margin: 4px 0;
}

.꼬리말 {
  color: #fff6e5;
  font-size: 16px;
  margin-top: 24px;
}