/* 술술 운세 종합 화면 ([life_fortune])
   - 운세 버튼 줄과 고른 운세의 영역만 그린다. 입력창·결과 카드는 각 도구 CSS(tojeong.css 등)가 그린다
   - 색은 tojeong.css 와 같은 팔레트. data-theme="auto"(기본)는 사이트 html[data-theme]를 따르고 없으면 다크
   - 테마 CSS 가 덮지 않도록 선택자에 .sulsul-fortune 을 앞에 붙인다 */

.sulsul-fortune {
  --sf-ink: #2b2a28;
  --sf-muted: #5c5953;
  --sf-line: #d6d1c8;
  --sf-page-bg: #ebe7e0;
  --sf-picker-button-line: #858077;
  --sf-button-bg: #fbf9f5;
  --sf-button-line: #8a857c;
  --sf-accent: #1d5592;
  --sf-on-accent: #ffffff;
  --sf-error: #9c2620;

  box-sizing: border-box;
  width: 100%;
  margin: 0 0 1.5em;
  color: var(--sf-ink);
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

html:not([data-theme="light"]) .sulsul-fortune:not([data-theme="light"]),
.sulsul-fortune[data-theme="dark"] {
  --sf-ink: #f2f2f2;
  --sf-muted: #c8c8c8;
  --sf-line: #444444;
  --sf-page-bg: #1f1f1f;
  --sf-picker-button-line: #8a8a8a;
  --sf-button-bg: #1f1f1f;
  --sf-button-line: #8a8a8a;
  --sf-accent: #6cb4ff;
  --sf-on-accent: #1f1f1f;
  --sf-error: #ff9d96;
}

.sulsul-fortune *,
.sulsul-fortune *::before,
.sulsul-fortune *::after {
  box-sizing: border-box;
}

/* 운세 버튼 블록: 안내 문구 + 버튼만. 바탕은 페이지 바탕색, 테두리는 구분선 색 */
.sulsul-fortune .sulsul-fortune__picker {
  margin: 0 0 16px;
  padding: 16px;
  background: var(--sf-page-bg);
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  /* 블록 바탕 위 버튼 테두리 3:1 (라이트 #858077, 다크는 기존 값). 고른 버튼·마우스 올림·초점은 강조색 그대로 */
  --sf-button-line: var(--sf-picker-button-line);
}

.sulsul-fortune .sulsul-fortune__hint {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--sf-ink);
}

/* 운세 고르기 그림 카드 (지시서 14): 화면 폭 600px 미만 3열, 이상 4열. 카드 하나가 버튼 하나 */
.sulsul-fortune .sulsul-fortune__tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

@media (min-width: 600px) {
  .sulsul-fortune .sulsul-fortune__tools {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

.sulsul-fortune button.sulsul-fortune__tool {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--sf-ink);
  background: var(--sf-button-bg);
  border: 1px solid var(--sf-button-line);
  border-radius: 10px;
  cursor: pointer;
}

/* 그림 칸: 3:2. 그림이 없는 카드는 같은 크기의 빈 칸 */
.sulsul-fortune .sulsul-fortune__tool-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.sulsul-fortune .sulsul-fortune__tool-img--empty {
  background: var(--sf-line);
}

/* 이름 칸: 두 줄 높이로 고정해 카드 높이를 맞춘다. 폰에서도 13px 아래로 줄이지 않는다 */
.sulsul-fortune .sulsul-fortune__tool-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2 * 1.3em + 12px);
  padding: 6px 4px;
  font-size: max(13px, 0.9em);
}

/* 아주 좁은 폰(카드 폭 약 70px)에서도 "성격 5요인 검사"가 두 줄에 들도록 */
@media (max-width: 359px) {
  .sulsul-fortune .sulsul-fortune__tool-name {
    padding: 6px 2px;
    font-size: 13px;
    letter-spacing: -0.02em;
  }
}

.sulsul-fortune button.sulsul-fortune__tool:hover {
  border-color: var(--sf-accent);
}

.sulsul-fortune button.sulsul-fortune__tool[aria-pressed="true"] {
  color: var(--sf-on-accent);
  background: var(--sf-accent);
  border-color: var(--sf-accent);
}

.sulsul-fortune button.sulsul-fortune__tool:focus-visible {
  outline: 2px solid var(--sf-accent);
  outline-offset: 2px;
}

/* 고른 운세 */
.sulsul-fortune .sulsul-fortune__panel[hidden] {
  display: none;
}

.sulsul-fortune .sulsul-fortune__title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--sf-ink);
}

.sulsul-fortune .sulsul-fortune__title:focus {
  outline: none;
}

.sulsul-fortune .sulsul-fortune__lead {
  margin: 0 0 12px;
  color: var(--sf-muted);
}

.sulsul-fortune .sulsul-fortune__reading {
  margin: 0 0 8px;
}

.sulsul-fortune .sulsul-fortune__reading-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--sf-ink);
}

.sulsul-fortune .sulsul-fortune__reading ul {
  margin: 0;
  padding-left: 1.2em;
}

.sulsul-fortune .sulsul-fortune__reading a {
  color: var(--sf-accent);
}

.sulsul-fortune .sulsul-fortune__empty,
.sulsul-fortune .sulsul-fortune__error {
  margin: 0;
}

.sulsul-fortune .sulsul-fortune__error {
  font-weight: 700;
  color: var(--sf-error);
}

/* 더 읽어 볼 글(지시서 18): 서버가 운세 화면 바로 아래에 그리는 일반 링크 목록. 글자색·링크색은 사이트 테마를 따른다. */
.sulsul-fortune-reading-all {
  margin: 28px 0 0;
}

.sulsul-fortune-reading-all h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.sulsul-fortune-reading-all ul {
  margin: 0;
  padding-left: 1.2em;
}

.sulsul-fortune-reading-all li {
  margin: 0 0 6px;
}