/* ==================== 기본 스타일 ==================== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    -webkit-user-select: none; /* 텍스트 드래그 방지 */
    -moz-user-select: none; /* 텍스트 드래그 방지 */
    -ms-user-select: none; /* 텍스트 드래그 방지 */
    user-select: none; /* 텍스트 드래그 방지 */
}

/* ==================== 헤더 스타일 ==================== */
header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    margin: 0;
    font-size: 1.6rem;
}

@media (max-width: 480px) {
    header h1 {
	margin-top: 3px;
	font-size: 1.4rem;
    }
}

/* 추가할 스타일 */
.version-info {
    position: absolute; /* 헤더 내에서 절대 위치로 배치 */
    top: 5px; /* 상단에서 5px 떨어진 위치 (더 작게) */
    right: 15px; /* 오른쪽에서 15px 떨어진 위치 (더 작게) */
    font-size: 0.7rem; /* 글자 크기 조정 (더 작게) */
    color: rgba(255, 255, 255, 0.6); /* 살짝 더 투명한 흰색으로 설정 */
    white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 방지 */

    /* 모바일에서 겹치지 않도록 조절 */
    @media (max-width: 600px) { /* 필요에 따라 breakpoint 조절 */
        right: 8px; /* 모바일에서는 좀 더 안쪽으로 */
        font-size: 0.6rem; /* 모바일에서 더 작게 */
        top: 4px;
    }
}

/* ==================== 메인 컨테이너 ==================== */
.container {
    width: 80%;
    margin: auto;
    margin-top: 0;
    overflow: hidden;
    padding: 0 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding-bottom: 10px;
}

/* ==================== 제목 스타일 ==================== */
h2,
h3,
h4 {
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #777;
    padding-bottom: 5px;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
    color: #555;
}

h4 {
    font-size: 1rem;
    color: #666;
    border-bottom: 1px dashed #ccc;
}

/* ==================== 카드 그리드 레이아웃 ==================== */

/* 메이저 아르카나 카드, 코트 카드 그리드 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .card-button {
        font-size: 0.9rem !important;
        padding: 10px 8px !important;
    }
}

/* 마이너 아르카나 카드 그리드 */
.minor-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

/* 마이너 아르카나 반응형 (모바일 480px 이하) */
@media (max-width: 480px) {
  .minor-card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .minor-card-grid .card-button {
    font-size: 0.9rem !important;
    padding: 10px 2px !important;
  }
}

@media (max-width: 350px) {
  .minor-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==================== 카드 버튼 스타일 ==================== */

// 메이저 아르카나
.card-button {
    background: #5a67d8;
    color: #fff;
    border: none;
    padding: 12px 15px;
    text-align: center;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-button:hover {
    background: #434190;
    transform: translateY(-2px);
}

// 마이너 아르카나
.suit-section {
    margin-bottom: 30px;
    padding: 3px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #f9f9f9;
}*/

/* ==================== 카드 세부 섹션 ==================== */

.card-detail-content section {
    margin-bottom: 25px;
}

.card-detail-content h2 {
    font-size: 1.6rem;
    color: #333;
    border-bottom: 2px solid #5a67d8;
}

.card-detail-content p,
.card-detail-content div p {
    font-size: 1rem;
    color: #555;
}

#card-advice strong {
    color: #333;
    font-weight: bold;
}

/* ==================== 네비게이션 버튼 ==================== */
.navigation-buttons {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.navigation-buttons button {
    background: #666;
    color: #fff;
    border: none;
    padding: 10px 20px;
    text-align: center;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 15px;
    margin-bottom: 10px;
}

.navigation-buttons button:hover {
    background: #444;
}

.navigation-buttons-card-detail {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.navigation-buttons-card-detail button {
    background: #666;
    color: #fff;
    border: none;
    padding: 10px 20px;
    text-align: center;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 5px;
    margin-bottom: 20px;
}

.navigation-buttons-card-detail button:hover {
    background: #444;
}

/* ==================== 입력 필드 ==================== */
textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    font-size: 1rem;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
}

/* ==================== 탭 시스템 ==================== */
.tabs {
    display: flex;
    width: 80%;
    justify-content: stretch;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    background: #fff;
    margin: 0 auto;
}

.tab-button {
    flex: 1;
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-bottom: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background-color: #f0f0f0;
    color: #555;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
}

.tab-button:hover {
    background-color: #e2e2e2;
}

.tab-button.active {
    background-color: #fff;
    border-color: #5a67d8;
    color: #5a67d8;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.tab-content {
    display: none;
    padding: 20px 0;
    width: 100%;
    box-sizing: border-box;
}

.tab-content.active {
    display: block;
}

/* ==================== 프롬프트 생성기 탭 ==================== */
#prompt-generator-tab-content .card-button {
    display: inline-block;
    padding: 8px 12px; /* 기존 패딩 유지 */
    margin: 2px; /* 기존 마진 유지 */
    border: none; /* 깔끔함을 위해 기본 테두리 제거 */
    border-radius: 8px; /* 통일성을 위해 더 둥근 모서리 */
    background: #f8f8f8; /* 아주 밝은 배경색 */
    cursor: pointer;
    font-size: 0.9rem; /* 기존 폰트 크기 유지 */
    text-align: center;
    user-select: none;
    color: #555; /* 부드러운 회색 텍스트 색상 */
    transition: all 0.3s ease; /* 모든 속성에 부드러운 전환 효과 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), /* 은은한 그림자 */
                0 0 0 1px rgba(0, 0, 0, 0.05) inset; /* 아주 미묘한 내부 테두리 효과 */
}

#prompt-generator-tab-content .card-button:hover {
    background: #e9e9e9; /* 호버 시 살짝 더 어두운 배경 */
    transform: translateY(-1px); /* 호버 시 살짝 위로 이동 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), /* 호버 시 그림자 강조 */
                0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

#prompt-generator-tab-content .card-button:active {
    transform: translateY(0); /* 클릭 시 제자리로 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* 클릭 시 그림자 초기화 */
    background: #e0e0e0; /* 클릭 시 더 어두운 배경 */
}

#prompt-generator-tab-content .card-button.selected {
    background: linear-gradient(145deg, #6a7ad3, #4a57b8); /* 이전에 사용한 그라데이션 적용 */
    color: #fff;
    border: none; /* 선택 시 테두리 제거 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), /* 선택 시 그림자 강조 */
                0 0 0 1px rgba(255, 255, 255, 0.3) inset; /* 밝은 내부 테두리 */
    transform: none; /* 선택 시 이동 효과 방지 */
}

#prompt-generator-tab-content .card-button.selected:hover {
    background: linear-gradient(145deg, #5c6bc0, #3e4b97); /* 선택된 상태에서 호버 시 더 진한 그라데이션 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
/* ==================== 사전 탭 ==================== */
#dictionary-tab-content .card-button {
    background: linear-gradient(145deg, #6a7ad3, #4a57b8); /* 부드러운 그라데이션 배경 */
    color: #fff;
    border: none;
    padding: 12px 15px; /* 기존 크기 유지 */
    text-align: center;
    font-size: 0.9rem; /* 기존 크기 유지 */
    cursor: pointer;
    border-radius: 8px; /* 모서리 좀 더 둥글게 */
    transition: all 0.3s ease; /* 모든 속성에 부드러운 전환 효과 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), /* 그림자 더 깊게 */
                0 0 0 1px rgba(255, 255, 255, 0.2) inset; /* 내부 테두리 효과로 입체감 */
}

#dictionary-tab-content .card-button:hover {
    background: linear-gradient(145deg, #5c6bc0, #3e4b97); /* 호버 시 그라데이션 변화 */
    transform: translateY(-3px); /* 호버 시 살짝 더 올라오게 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), /* 호버 시 그림자 더 강조 */
                0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

#dictionary-tab-content .card-button:active {
    transform: translateY(0); /* 클릭 시 제자리로 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 클릭 시 그림자 초기화 */
    background: #4a57b8; /* 클릭 시 단색으로 */
}

/* ==================== 프롬프트 영역 ==================== */
.prompt-area {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 20px;
}

.prompt-output {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f9f9f9;
    white-space: pre-line;
    min-height: 100px;
}

.section-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}
@media (max-width: 480px) {
.section-group {
    grid-template-columns: repeat(2, 1fr);}
}
.minor-section-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}
@media (max-width: 480px) {
.minor-section-group {
    grid-template-columns: repeat(3, 1fr);}
}

.result-buttons button {
    padding: 8px 14px;
    font-size: 0.9rem;
    min-height: 120px;
}


/* 스프레드 알아보기 링크 스타일 */
.note a {
    display: inline-block; /* 링크를 인라인 블록 요소로 만들어 너비와 패딩 조절 가능하게 함 */
    background-color: #5a67d8; /* 버튼과 유사한 배경색 */
    color: #fff; /* 흰색 텍스트 */
    padding: 3px 8px; /* 내부 여백 조절 */
    border-radius: 5px; /* 모서리 둥글게 */
    text-decoration: none; /* 밑줄 제거 */
    font-weight: bold; /* 글씨를 굵게 */
    font-size: 0.9em; /* 글씨 크기 조절 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* 호버 효과를 위한 전환 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 은은한 그림자 */
    margin-left: 5px; /* 앞 텍스트와의 간격 */
}

.note a:hover {
    background-color: #434190; /* 호버 시 배경색 변경 */
    transform: translateY(-1px); /* 호버 시 살짝 위로 이동 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 강조 */
}

.note a:active {
    transform: translateY(0); /* 클릭 시 원래 위치로 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 클릭 시 그림자 약하게 */
}

/* ==================== 알림 토스트 ==================== */
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #333;
    color: #fff;
    padding: 12px 18px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(20px);
    z-index: 9999;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== AI 서비스 버튼 ==================== */
#service-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.service-btn {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none; /* 텍스트 드래그 방지 (전체 body에 정의되지 않았다면 추가) */

    padding: 10px 0; /* 기존 패딩 유지 */
    font-size: 1rem; /* 기존 폰트 크기 유지 */

    background: linear-gradient(145deg, #E65100, #BF360C); /* 약간 어두운 주황색 그라데이션 배경 */
    color: #fff; /* 흰색 텍스트 */
    border: none; /* 테두리 제거 */
    border-radius: 8px; /* 다른 버튼들과 일관된 둥근 모서리 */
    transition: all 0.3s ease; /* 모든 속성에 부드러운 전환 효과 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), /* 깊은 그림자 */
                0 0 0 1px rgba(255, 255, 255, 0.2) inset; /* 미묘한 내부 테두리 효과 */
}

.service-btn:hover {
    background: linear-gradient(145deg, #FF6F00, #E65100); /* 호버 시 살짝 밝아지는 주황색 그라데이션 */
    transform: translateY(-3px); /* 호버 시 위로 살짝 떠오르는 효과 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), /* 호버 시 그림자 강조 */
                0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

.service-btn:active {
    transform: translateY(0); /* 클릭 시 제자리로 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 클릭 시 그림자 초기화 */
    background: #BF360C; /* 클릭 시 가장 어두운 주황색 */
}

/* 미디어 쿼리 (모바일 환경에 맞게) */
@media (max-width: 480px) {
    #service-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .service-btn {
        font-size: 0.85rem;
        padding: 10px 12px;
    }
}
/* ==================== 스프레드 가이드 테이블 ==================== */
#spread-guide-tab-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

#spread-guide-tab-content th,
#spread-guide-tab-content td {
    border: 1px solid #e0e0e0;
    padding: 12px 15px;
    text-align: left;
    vertical-align: top;
    font-size: 0.95rem;
}

#spread-guide-tab-content th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333;
    font-size: 1.05em;
    text-align: center;
}

#spread-guide-tab-content td.center {
    text-align: center;
}

#spread-guide-tab-content td ul {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc;
}

#spread-guide-tab-content td ul li {
    margin-bottom: 5px;
    line-height: 1.5;
}

#spread-guide-tab-content strong {
    color: #5a67d8;
}

.note {
    font-size: 0.95em;
    color: #555;
    margin-top: 20px;
    padding: 10px 10px;
    border-left: 5px solid #5a67d8;
    background-color: #f0f3ff;
    border-radius: 4px;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.note ol { /* .note 안에 있는 ol (목록 전체)에 적용 */
    padding-left: 0;        /* ol의 왼쪽 패딩을 0으로 설정하여 전체 목록을 왼쪽으로 당깁니다. */
    margin-left: 0;         /* ol의 왼쪽 마진을 0으로 설정합니다. */
    list-style-type: none;  /* ol의 기본 목록 스타일도 제거 (li에 이미 적용했지만, ol에도 명시적으로 적용하는 것이 좋음) */
    margin-top: 10px; /* ol 위에 공간을 추가 (필요에 따라 조절) */
    margin-bottom: 0px; /* ol 아래 공간을 추가 (필요에 따라 조절) */
}

.note ol li { /* .note 안에 있는 ol의 li (각 항목)에 적용 */
    margin-bottom: 5px; /* 각 항목 아래 공간을 10px에서 5px로 줄임 */
    line-height: 1.3; /* li 내부 줄 간격 (필요에 따라 조절) */
}

/* ==================== 스프레드 선택 영역 ==================== */
.spread-selection-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

#spreadInputGroup {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

#spreadSelect {
    flex-grow: 0;
    padding: 6px 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: 40px;
}

/* ==================== '나의 타로카드 뽑기' 버튼 ==================== */

.pick-card-button {
    background: linear-gradient(90deg, #ff8c00 0%, #8a2be2 50%, #ff8c00 100%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: #fff;
    border: none;
    padding: 8px 12px;
    font-size: 1.2rem !important;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    transition: all 0.5s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    height: 50px;
    width: 150px;
    flex-shrink: 0;
    animation: gradientFlow 2s ease infinite alternate;
}

.pick-card-button:hover {
    background-position: 100% 0%;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    animation-play-state: paused;
}

.pick-card-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }
}


/* 스프레드 카드형 리스트 (모바일용) */
.spread-cards {
  display: none;
  margin-top: 20px;
}

.spread-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.spread-card h3 {
  margin-top: 0;
  font-size: 1.2rem;
  color: #5a67d8;
}

.spread-card p {
  margin: 5px 0;
  font-size: 0.95rem;
  color: #555;
}

.spread-card ul {
  margin: 0;
  padding-left: 18px;
}

.spread-card li {
  margin-bottom: 5px;
  line-height: 1.4;
}

/* 카드 hover 효과 */
.spread-card:hover {
  transform: translateY(-3px);
}

/* 반응형: 768px 이하일 때 */
@media (max-width: 768px) {
  #spread-guide-tab-content table {
    display: none;
  }
  .spread-cards {
    display: block;
  }
}


/* ==================== 푸터 ==================== */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 5px;
    color: #777;
    font-size: 0.9rem;
}

/* ==================== 푸터 배너 ==================== */
.banner-footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 0;
    margin-bottom: 15px;
    flex-wrap: nowrap;
}

.banner-footer-container img {
    border: none;
    display: block;
}

.banner-footer-container a,
.banner-footer-container img {
    outline: none;
}

.banner-footer-container a {
    text-decoration: none;
}

footer a {
    text-decoration: none;
    outline: none;
    color: inherit;
}

footer img {
    border: none;
    outline: none;
    display: block;
}

@media (max-width: 480px) {
  .banner-footer-container {
    gap: 5px;
  }
}






/* index.html 전용 스타일 */
.welcome-content {
    text-align: center;
    padding: 40px 20px;
}

.service-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.service-link {
    background: linear-gradient(145deg, #6a7ad3, #4a57b8);
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.service-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}