@import 'toast.css';

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    /* 합성 한 프레임 비침 시 흰 화면보다 덜 튀도록 (배경은 여전히 고정 레이어가 담당) */
    background-color: #1a1428;
}

body {
    font-family: 'Noto Sans KR', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background: transparent;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    
    /* 텍스트 복사 및 커서 방지 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard */
}

/* 고정 배경: Safari는 큰 WebP를 background-image:url()로 쓸 때 디코딩 전 검은 프레임이 잦아 <img>로 그립니다. */
.app-section-backdrop {
    position: fixed;
    inset: 0;
    --backdrop-fade-ms: 220ms;
    width: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 0;
    pointer-events: none;
    background-color: #1a1428;
    overflow: hidden;
    /* Chrome: fixed 레이어 합성 안정화(스크롤 시 배경이 잠깐 비는 현상 완화) */
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.app-section-backdrop__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    opacity: 0;
    transition: opacity var(--backdrop-fade-ms, 220ms) ease;
}

.app-section-backdrop__img.is-active {
    opacity: 1;
}

.app-section-backdrop__img--next {
    /* marker class for second backdrop layer */
}

.app-section-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

html.scroll-locked,
body.scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.en {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 입력 필드는 텍스트 선택 및 수정이 가능하도록 예외 처리 */
input, textarea, select {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

/* 모든 이미지 복사(드래그) 방지 */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    /* user-drag: none; is not a standard property but good for some engines */
}

/* 모든 영문 버튼 텍스트 */
body.en .btn,
body.en .draw-button,
body.en .try-again-button,
body.en .filter-btn,
body.en .redirect-btn {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 카드 이름 */
body.en .card-name,
body.en .detail-card-name,
body.en .card-item h4 {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 입력 요소 */
body.en input,
body.en textarea,
body.en select {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 결과 텍스트 */
body.en .answer-result,
body.en .card-meaning,
body.en .card-interpretation {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 모달 텍스트 */
body.en .legal-modal-content,
body.en .card-detail-content {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 섹션 제목과 설명 */
body.en .section-title,
body.en .section-description,
body.en .position-label,
body.en .step-content,
body.en .article-content {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 네비게이션 */
body.en .nav-link,
body.en .nav-logo,
body.en .lang-toggle,
body.en .sound-toggle {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 푸터 */
body.en .footer,
body.en .footer-links .footer-link,
body.en .footer-description,
body.en .footer-bottom {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 서비스 카드 */
body.en .service-card h3,
body.en .service-card p {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 히어로 섹션 */
body.en .hero-title-main,
body.en .hero-title-sub,
body.en .hero-description {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 로딩 텍스트 */
body.en .loading-spinner p {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 플레이스홀더 */
body.en ::placeholder {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 리스트 */
body.en ul,
body.en ol,
body.en li {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 테이블 */
body.en table,
body.en th,
body.en td {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 폼 라벨 */
body.en label {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 헤딩 */
body.en h1,
body.en h2,
body.en h3,
body.en h4,
body.en h5,
body.en h6 {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* 모든 영문 문단 */
body.en p {
    font-family: 'IM Fell English SC', 'Times New Roman', serif !important;
}

/* Keep the decorative English site font, but use a readable face for Cats & Magic long-form episodes. */
body.en .cats-magic-reader,
body.en .cats-magic-reader *,
body.en .cats-magic-episode-modal-body,
body.en .cats-magic-episode-modal-body * {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    letter-spacing: normal;
}

/* body.en에서 이미 폰트를 상속하므로 div/span 전역 규칙은 두지 않음
   (모든 레이아웃 노드에 웹폰트를 강제하면 about 등 긴 스크롤에서 깜빡임·합성 부담이 커짐) */

/* 본문 건너뛰기 — 키보드 포커스 시에만 표시 */
.skip-to-main {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    z-index: 10002;
}

.skip-to-main:focus {
    position: fixed;
    left: max(1rem, env(safe-area-inset-left, 0px));
    top: max(1rem, env(safe-area-inset-top, 0px));
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.65rem 1.1rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: #5a67d8;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    outline: none;
}

.skip-to-main:focus-visible {
    outline: 3px solid #c7d2fe;
    outline-offset: 3px;
}

/* Navigation */
.nav {
    /* Chrome: 상단 fixed + backdrop-filter 는 긴 스크롤 시 뷰 전체가 깜빡이는 원인이 되는 경우가 많아 제거(사파리는 상대적으로 무난) */
    background: rgba(255, 255, 255, 0.98);
    padding: 1rem 0;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 max(1rem, env(safe-area-inset-left, 0px)) 0 max(1rem, env(safe-area-inset-right, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.8rem;
    font-weight: bold;
    color: #667eea;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 150px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.45rem;
    align-items: center;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
    max-width: none;
    padding: 0.5rem 0;
}

.nav-link {
    color: #333;
    text-decoration: none;
    padding: 0.32rem 0.65rem;
    border-radius: 20px;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 0.8rem;
    border: 2px solid transparent;
    min-width: fit-content;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.nav-link:hover,
.nav-link.active {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.nav-link.echoes-link {
    background: linear-gradient(135deg, #6a4c93, #4a148c);
    color: white;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.nav-link.echoes-link:hover {
    background: linear-gradient(135deg, #7b5aa6, #5e35b1);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(106, 76, 147, 0.4);
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-toggle,
.sound-toggle {
    background: #667eea;
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    min-width: 40px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.lang-toggle:hover,
.sound-toggle:hover {
    background: #5a6fd8;
    transform: translateY(-2px);
}

.sound-toggle.muted {
    background: #ff6b6b;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 3px;
    padding: 5px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-menu-btn span {
    width: 20px;
    height: 2px;
    background: #667eea;
    transition: all 0.3s ease;
}

/* Main Content */
.main-container {
    position: relative;
    z-index: 1;
    margin-top: calc(80px + env(safe-area-inset-top, 0px));
    min-height: calc(100vh - 80px - env(safe-area-inset-top, 0px));
    min-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px));
    margin-bottom: 0;
}

/* Sections */
.section {
    display: none;
    min-height: calc(100vh - 80px - env(safe-area-inset-top, 0px));
    min-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px));
    padding: 2rem;
    padding-left: max(2rem, env(safe-area-inset-left, 0px));
    padding-right: max(2rem, env(safe-area-inset-right, 0px));
    position: relative;
    /* 고정 배경은 #appSectionBackdrop (전역 레이어)에서 처리합니다. */
}

/* 배경은 #appSectionBackdrop 한 곳에서만 그림 (전역 고정) */
.section::after,
.section::before {
    display: none !important;
}

.section.active {
    display: block;
}

.section-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
    border-radius: 20px;
    padding: 2rem;
}

/* Section Backgrounds */
/* 각 섹션은 CSS 변수로 배경을 전달하여 VRAM 과부하 없이 고정 효과를 냅니다. */
#home,
.home-section {
    --bg-image: url('/assets/images/Catarot_Home_Theme.webp');
    --bg-size: cover;
}

.daily-section {
    --bg-image: url('/assets/images/Catarot theme 1-10.webp');
}

.yesno-section {
    --bg-image: url('/assets/images/Catarot theme 2.webp');
}

.love-section {
    --bg-image: url('/assets/images/Catarot theme 3.webp');
}

.problem-section {
    --bg-image: url('/assets/images/Catarot theme 4.webp');
}

.cards-section {
    --bg-image: url('/assets/images/Catarot theme 5.webp');
}

.library-section {
    --bg-image: url('/assets/images/Catarot theme 6.webp');
}

.guide-section {
    --bg-image: url('/assets/images/Catarot theme 7.webp');
}

.about-section {
    --bg-image: url('/assets/images/Catarot theme 8.webp');
}

.stories-section {
    --bg-image: url('/assets/images/Catarot theme 9.webp');
}

.cats-magic-section {
    --bg-image: url('/assets/images/Cats%20and%20Magic.webp');
}

.cats-magic-section-header {
    text-align: center;
}

h2.cats-magic-section-title.section-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    text-align: center;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.cats-magic-title-text {
    flex: 0 1 auto;
}

.cats-magic-secret-trigger {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-size: inherit;
    line-height: 0;
    cursor: default !important;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
}

.cats-magic-secret-trigger:hover,
.cats-magic-secret-trigger:active,
.cats-magic-secret-trigger:focus,
.cats-magic-secret-trigger:focus-visible {
    outline: none;
    box-shadow: none;
    transform: none;
    filter: none;
    opacity: 1;
}

.cats-magic-title-cat-img {
    display: block;
    width: auto !important;
    height: 1.05em !important;
    max-width: 52px !important;
    max-height: 46px !important;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    transform: none !important;
    filter: none !important;
}

.cats-magic-affiliate-wrap {
    margin: 1.05rem auto 1.65rem;
    max-width: 760px;
    padding: 0.8rem 1rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}

.cats-magic-affiliate-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.cats-magic-affiliate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.58rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: linear-gradient(120deg, rgba(253, 246, 184, 0.95), rgba(246, 197, 132, 0.95));
    color: #1a1733;
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    box-shadow: 0 9px 22px rgba(8, 8, 16, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}

.cats-magic-affiliate-btn--ko {
    background: linear-gradient(120deg, rgba(253, 246, 184, 0.95), rgba(246, 197, 132, 0.95));
    color: #1a1733;
}

.cats-magic-affiliate-btn--en {
    background: linear-gradient(120deg, rgba(187, 218, 255, 0.95), rgba(154, 183, 255, 0.95));
    color: #102042;
}

.cats-magic-affiliate-btn--ali {
    background: linear-gradient(120deg, rgba(201, 248, 210, 0.95), rgba(174, 230, 220, 0.95));
    color: #102d2a;
}

.cats-magic-affiliate-btn--ali-en,
.cats-magic-affiliate-btn--ali-ja {
    display: none;
}

body.en .cats-magic-affiliate-btn--ali-ko,
body.ja .cats-magic-affiliate-btn--ali-ko {
    display: none;
}

body.en .cats-magic-affiliate-btn--ali-en,
body.ja .cats-magic-affiliate-btn--ali-ja {
    display: inline-flex;
}

.cats-magic-affiliate-btn:hover,
.cats-magic-affiliate-btn:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 13px 26px rgba(8, 8, 16, 0.38);
    filter: brightness(1.03);
    border-color: rgba(255, 255, 255, 0.62);
    outline: none;
}

.cats-magic-affiliate-btn:active {
    transform: translateY(0);
    box-shadow: 0 7px 16px rgba(8, 8, 16, 0.28);
}

.cats-magic-affiliate-note {
    margin: 0.58rem 0 0;
    font-size: 0.73rem;
    line-height: 1.45;
    text-align: center;
    color: rgba(238, 241, 255, 0.88);
}

body.en .cats-magic-affiliate-btn--ko,
body.ja .cats-magic-affiliate-btn--ko {
    display: none;
}

.cats-magic-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.4);
}

.cats-magic-admin-modal[hidden] {
    display: none !important;
}

.cats-magic-admin-modal:not([hidden]) {
    display: flex;
}

.cats-magic-admin-dialog {
    width: 100%;
    max-width: 320px;
    padding: 1.25rem 1.35rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    color: #1e1b4b;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.cats-magic-admin-prompt {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.cats-magic-admin-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(30, 27, 75, 0.25);
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.cats-magic-admin-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.cats-magic-admin-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid rgba(30, 27, 75, 0.2);
    background: #f8fafc;
    color: #1e1b4b;
    cursor: pointer;
}

.cats-magic-admin-btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: transparent;
}

.cats-magic-admin-panel {
    margin-bottom: 1.5rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
}

.cats-magic-admin-panel[hidden] {
    display: none !important;
}

.cats-magic-admin-panel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.cats-magic-admin-badge {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fde047;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cats-magic-admin-signout-btn {
    font-size: 0.82rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
}

.cats-magic-admin-signout-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.cats-magic-admin-label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.45rem;
    color: rgba(255, 255, 255, 0.92);
}

.cats-magic-admin-label--sub {
    font-size: 0.82rem;
    margin-bottom: 0.3rem;
    color: rgba(255, 255, 255, 0.82);
}

.cats-magic-admin-hint {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.68);
}

.cats-magic-hero-alt-block {
    margin-bottom: 0.25rem;
}

.cats-magic-admin-draft {
    width: 100%;
    box-sizing: border-box;
    min-height: 8rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.95);
    color: #1e1b4b;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
}

.cats-magic-admin-note {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
}

.cats-magic-admin-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.9rem;
}

.cats-magic-admin-episode-list-wrap {
    margin-bottom: 0.8rem;
}

.cats-magic-admin-episode-list-title {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.cats-magic-admin-episode-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.cats-magic-admin-episode-item {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.28);
}

.cats-magic-admin-episode-cover {
    aspect-ratio: 16 / 9;
    background: rgba(30, 27, 75, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.cats-magic-admin-episode-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cats-magic-admin-episode-body {
    padding: 0.55rem 0.6rem 0.65rem;
}

.cats-magic-admin-episode-title {
    margin: 0 0 0.22rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
}

.cats-magic-admin-episode-slug {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    word-break: break-word;
}

.cats-magic-admin-edit-btn {
    width: 100%;
}

.cats-magic-admin-delete-btn {
    width: 100%;
    margin-top: 0.4rem;
    border-color: rgba(255, 160, 160, 0.55);
    color: #ffd3d3;
    background: rgba(120, 20, 20, 0.28);
}

.cats-magic-admin-delete-btn:hover {
    background: rgba(145, 24, 24, 0.4);
}

.cats-magic-composer-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(6, 8, 18, 0.82);
    backdrop-filter: blur(8px);
    padding: clamp(0.75rem, 2.2vw, 1.5rem);
    overflow-y: auto;
}

.cats-magic-composer-modal[hidden] {
    display: none !important;
}

.cats-magic-composer-dialog {
    width: min(1320px, 100%);
    min-height: min(88vh, 980px);
    margin: 0;
    border-radius: 16px;
    background: rgba(5, 8, 18, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.56);
    backdrop-filter: blur(14px);
    padding: clamp(0.95rem, 2vw, 1.3rem);
    overflow: auto;
}

.cats-magic-episode-rail {
    margin-bottom: 1.25rem;
}

.cats-magic-episode-rail-heading {
    margin: 0 0 0.55rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.02em;
}

.cats-magic-episode-rail-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
}

.cats-magic-episode-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.22);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cats-magic-episode-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 245, 210, 0.6);
    box-shadow:
        0 0 0 1px rgba(255, 250, 230, 0.22),
        0 10px 22px rgba(0, 0, 0, 0.26);
}

.cats-magic-episode-card.is-active {
    border-color: rgba(192, 210, 255, 0.85);
    box-shadow: 0 0 0 2px rgba(192, 210, 255, 0.35);
}

.cats-magic-episode-card-cover {
    aspect-ratio: 16 / 9;
    background: rgba(30, 27, 75, 0.5);
    position: relative;
    overflow: hidden;
}

.cats-magic-episode-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cats-magic-episode-card-cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.cats-magic-episode-card-caption {
    padding: 0.62rem 0.75rem 0.72rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.cats-magic-episode-card-title {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
}

/* Safari can keep JP headlines as a single unbreakable run with keep-all. */
body.ja .cats-magic-episode-card-title {
    word-break: normal;
    overflow-wrap: anywhere;
}

.cats-magic-episode-card-slug {
    font-size: 0.65rem;
    opacity: 0.72;
    word-break: break-all;
}

.cats-magic-episode-card-excerpt {
    font-size: 0.68rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 760px) {
    .cats-magic-episode-rail-scroll {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .cats-magic-affiliate-wrap {
        margin: 1rem auto 1.5rem;
        padding: 0.75rem 0.8rem 0.65rem;
    }

    .cats-magic-affiliate-btn {
        width: 100%;
    }
}

.cats-magic-reader-wrap {
    margin-bottom: 1.25rem;
}

.cats-magic-reader {
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.96);
}

.cats-magic-reader-header {
    margin-bottom: 1rem;
}

.cats-magic-reader-title {
    margin: 0 0 0.5rem;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.cats-magic-reader-title a.cats-magic-reader-title-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.cats-magic-reader-title a.cats-magic-reader-title-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cats-magic-reader-meta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cats-magic-reader-time {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

.cats-magic-reader-figure {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    max-width: 100%;
}

.cats-magic-reader-figure img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.cats-magic-reader-excerpt {
    margin: 0.35rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.cats-magic-reader-body {
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.94);
}

.cats-magic-reader-body p {
    margin: 0 0 0.85rem;
}

.cats-magic-reader-body h2 {
    margin: 1.55rem 0 0.85rem;
    font-size: 1.2rem;
    color: #fef9c3;
}

.cats-magic-reader-body a {
    color: #c4d4ff;
    text-decoration: underline;
}

.cats-magic-reader-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.cats-magic-seo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 0.65rem;
}

.cats-magic-field {
    flex: 1 1 200px;
    min-width: 0;
}

.cats-magic-field--grow {
    flex: 2 1 260px;
}

.cats-magic-locale-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1rem 0;
}

.cats-magic-locale-block {
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cats-magic-locale-heading {
    margin: 0 0 0.65rem;
    font-size: 1rem;
    color: #fde047;
}

.cats-magic-rtoolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.35rem 0 0.45rem;
}

.cats-magic-rtoolbar-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    margin-right: 0.25rem;
}

.cats-magic-rtool-btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
}

.cats-magic-rtool-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.cats-magic-composer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cats-magic-admin-draft--short {
    min-height: 4rem;
}

.cats-magic-admin-draft--json {
    min-height: 6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    background: rgba(15, 23, 42, 0.92);
    color: #e2e8f0;
}

/* Home Section Redundancy Cleanup */
.section.home-section,
section#home.section.home-section {
    --bg-image: url('/assets/images/Catarot_Home_Theme.webp');
    --bg-size: cover;
    background-color: transparent !important;
}

.hero-container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 4rem 0;
    color: white;
}

.hero-title {
    margin-bottom: 2rem;
}

.hero-title-main {
    display: block;
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #fff, #f0f0f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-title-sub {
    display: block;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
}

.hero-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3rem;
    line-height: 1.8;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 4rem;
}

.btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Service Cards */
.services-preview {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    border-radius: 20px;
    padding: 3rem;
    margin-top: 2rem;
}

.services-preview h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-weight: bold;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.service-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.service-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.48);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.service-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    min-height: 56px;
    margin: 0 auto 1rem;
    overflow: visible;
}

.service-menu-icon-img {
    width: auto !important;
    height: auto !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
    display: block;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
    transition: filter 0.25s ease, transform 0.25s ease;
}

.service-card:hover .service-menu-icon-img {
    filter: brightness(1.12) saturate(1.08) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.38));
    transform: scale(1.1);
}

.tarot-card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.tarot-icon-img {
    width: 40px;
    height: 60px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.25s ease;
}

.service-card:hover .tarot-icon-img {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.cute-cat-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.cute-cat-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    transition: box-shadow 0.25s ease;
}

/* 고양이와 마법: 넓은 얼굴 일러스트는 원형(border-radius:50%)이 귀를 잘라내므로 각만 살짝 둥글게 */
.magic-menu-cat-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    min-height: 3.5rem;
    overflow: visible;
    box-sizing: border-box;
}

.magic-menu-cat-img--home {
    width: 56px;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
    border-radius: 12px;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.3));
    transition: filter 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover .magic-menu-cat-img--home {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.service-card:active .magic-menu-cat-img--home {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28));
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.magic-menu-cat-img--feature {
    width: 56px;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
    border-radius: 12px;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28));
    transition: filter 0.25s ease;
}

.feature-item:hover .magic-menu-cat-img--feature {
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.38));
}

.service-card:hover .cute-cat-img {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.service-card.echoes-service-card {
    background: linear-gradient(135deg, rgba(106, 76, 147, 0.1), rgba(74, 20, 140, 0.1));
    border: 2px solid rgba(106, 76, 147, 0.3);
    position: relative;
    overflow: hidden;
}

.service-card.echoes-service-card:hover {
    background: linear-gradient(135deg, rgba(106, 76, 147, 0.1), rgba(74, 20, 140, 0.1));
    border-color: #6a4c93;
    box-shadow: 0 15px 30px rgba(106, 76, 147, 0.2);
}

.service-card.echoes-service-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: opacity 0.35s ease;
    opacity: 0;
    pointer-events: none;
}

/* shimmer 애니 제거: 은은한 광택만 페이드 (합성·페인트 부담 감소) */
.service-card.echoes-service-card:hover::before {
    opacity: 0.35;
}

.echoes-icon {
    background: linear-gradient(135deg, #6a4c93, #4a148c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 3.5rem !important;
    text-shadow: 0 0 20px rgba(106, 76, 147, 0.3);
}

.service-card.echoes-service-card h3 {
    background: none;
    -webkit-text-fill-color: #c4a3ff;
    color: #c4a3ff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    font-weight: 600;
}

.service-card p {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    font-weight: 500;
}

/* Touch / pressed (:active): same cues as :hover — pure CSS, one paint on press, negligible cost */
.service-card:active {
    transform: translateY(-2px) scale(1.008);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

.service-card:active .service-menu-icon-img {
    filter: brightness(1.08) saturate(1.05) drop-shadow(0 5px 12px rgba(0, 0, 0, 0.34));
    transform: scale(1.06);
}

.service-card:active .tarot-icon-img {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.service-card:active .cute-cat-img {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.service-card.echoes-service-card:active {
    background: linear-gradient(135deg, rgba(106, 76, 147, 0.1), rgba(74, 20, 140, 0.1));
    border-color: #6a4c93;
    box-shadow: 0 15px 30px rgba(106, 76, 147, 0.25);
}

.service-card.echoes-service-card:active::before {
    opacity: 0.35;
}

.nav-logo:active {
    filter: brightness(0.92);
    transform: scale(0.98);
}

.nav-link:active {
    filter: brightness(0.92);
    transform: translateY(0);
}

.nav-link.echoes-link:active {
    filter: brightness(0.93);
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(106, 76, 147, 0.45);
}

.lang-toggle:active,
.sound-toggle:active {
    background: #5a6fd8;
    transform: scale(0.96);
}

.sound-toggle.muted:active {
    background: #e85a5a;
}

.mobile-menu-btn:active span {
    opacity: 0.65;
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    filter: brightness(0.94);
}

.card-back:active {
    box-shadow:
        0 15px 35px rgba(102, 126, 234, 0.4),
        inset 0 0 25px rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.card-back:active::after {
    opacity: 0.92;
    animation: none;
}

.card-deck:active .card-back {
    transform: scale(1.05);
}

.card-deck:active .card-back::after {
    opacity: 0.92;
    animation: none;
}

.daily-card-area:active .draw-prompt {
    opacity: 0.65;
}

.draw-button:active:not(:disabled),
.try-again-button:active:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(0.9);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}

.draw-button:active:not(:disabled) .button-shine,
.try-again-button:active:not(:disabled) .button-shine {
    left: 100%;
}

.result-card-image:active,
.result-card-item img:active {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    filter: brightness(0.95);
}

.card-slot:active {
    transform: scale(1.05);
}

.cards-collection-cta:active {
    transform: translateY(0);
    filter: brightness(0.9);
    box-shadow: 0 5px 16px rgba(55, 38, 92, 0.42);
}

.filter-btn:active {
    transform: scale(0.97);
    filter: brightness(0.92);
}

.filter-btn.active:active {
    filter: brightness(0.88);
}

.card-item:active {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
    filter: brightness(0.97);
}

.card-item:active img {
    transform: scale(1.05) !important;
}

.card-item:active h4 {
    color: #667eea;
    font-weight: 600;
}

.mindset-item:active {
    background: rgba(255, 255, 255, 0.12);
}

.guide-notice-link:active {
    color: #f0c060;
}

.interpretation-item:active {
    background: rgba(255, 255, 255, 0.08);
}

.stories-title:active .stories-cat-img {
    transform: scale(1.08);
}

.redirect-btn:active {
    transform: translateY(-1px);
    filter: brightness(0.92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.footer-links .footer-link:active,
.footer-section ul li a:active {
    filter: brightness(1.12);
    transform: scale(0.98);
}

.close-legal-modal:active {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(0.96);
}

.close-modal:active {
    transform: scale(0.96);
    filter: brightness(0.9);
}

.detail-card-img:active {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(102, 126, 234, 0.2);
}

.lang-dropbtn:active {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0.97);
}

.lang-dropdown-content a:active {
    background-color: rgba(102, 126, 234, 0.18);
}

.feature-item:active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.social-icon:active {
    transform: scale(1.05);
}

.sitemap-link:active {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    transform: translateY(-1px);
}

.moon-cat-icon:active {
    transform: scale(1.08);
    opacity: 1;
}

.card-float:active {
    z-index: 10;
}

.card-float:not(.flipped):active .card-inner {
    transform: scale(1.12);
    filter: brightness(1.12);
}

.card-float:not(.flipped):active .card-front {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.48), 0 0 28px rgba(102, 126, 234, 0.85), 0 0 52px rgba(118, 75, 162, 0.45);
}

/* 키보드·스위치 포커스: :focus-visible (모바일·태블릿·데스크톱 공통, 브라우저가 키보드식 포커스일 때만 표시) */
.nav-link:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 2px;
}

.nav-link.echoes-link:focus-visible {
    outline-color: #e9d5ff;
}

.nav-logo:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 3px;
    border-radius: 8px;
}

.btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}

.service-card:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
}

.service-card.echoes-service-card:focus-visible {
    outline-color: #e9d5ff;
}

.draw-button:focus-visible:not(:disabled),
.try-again-button:focus-visible:not(:disabled) {
    outline: 3px solid #fde047;
    outline-offset: 3px;
}

.sound-toggle:focus-visible,
.lang-dropbtn:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 2px;
}

.mobile-menu-btn:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 4px;
    border-radius: 4px;
}

.filter-btn:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 2px;
}

.filter-btn.active:focus-visible {
    outline-color: #fde047;
}

.cards-collection-cta:focus-visible {
    outline: 3px solid #fde047;
    outline-offset: 3px;
}

.card-item:focus-visible {
    outline: 3px solid #4338ca;
    outline-offset: 2px;
}

.footer-links .footer-link:focus-visible,
.footer-section ul li a:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.lang-dropdown-content a:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: -2px;
}

.redirect-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
}

.close-modal:focus-visible,
.close-legal-modal:focus-visible {
    outline: 3px solid #fde047;
    outline-offset: 2px;
}

.detail-card-img:focus-visible {
    outline: 3px solid #4338ca;
    outline-offset: 3px;
}

.sitemap-link:focus-visible {
    outline: 2px solid #fde047;
    outline-offset: 2px;
}

.social-icon:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 4px;
    border-radius: 4px;
}

.feature-item:focus-visible {
    outline: 2px solid #fde047;
    outline-offset: 2px;
}

.package-buy-button:focus-visible {
    outline: 3px solid #0f172a;
    outline-offset: 3px;
}

.guide-notice-link:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

.result-card-image:focus-visible,
.result-card-item img:focus-visible {
    outline: 3px solid #fde047;
    outline-offset: 4px;
}

/* Section Titles */
.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem 2rem;
    border-radius: 15px;
    backdrop-filter: blur(5px);
}

.section-title.has-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.45rem, 1.2vw, 0.75rem);
}

.section-title-icon-img {
    width: auto !important;
    height: 1.05em !important;
    max-width: 52px !important;
    max-height: 46px !important;
    object-fit: contain;
    flex: 0 0 auto;
    display: block;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.45));
}

.section-title-text {
    min-width: 0;
}

.section-description {
    text-align: center;
    font-size: 1.1rem;
    color: white;
    margin-bottom: 3rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.2);
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    backdrop-filter: blur(3px);
}

/* Card Display */
.daily-content,
.yesno-content,
.love-content,
.problem-content {
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    padding: 2rem;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    transform: translateZ(0);
}

.daily-card-area,
.yesno-card-area {
    margin: 2rem 0;
}

.card-deck {
    width: 200px;
    height: 300px;
    margin: 0 auto 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* 글로우: box-shadow를 매 프레임 바꾸지 않고 ::after의 opacity만 펄스 → 크롬 페인트 부담 감소, 외형은 동일 계열 */
.card-back {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    background-image: url('/assets/images/Cat_Tarot_Card_Back.jpg?v=1.1');
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 0 20px rgba(102, 126, 234, 0.4),
        0 0 40px rgba(102, 126, 234, 0.2),
        0 0 60px rgba(102, 126, 234, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateZ(0);
}

.card-back::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 0 30px rgba(102, 126, 234, 0.6),
        0 0 50px rgba(102, 126, 234, 0.3),
        0 0 80px rgba(102, 126, 234, 0.2),
        inset 0 0 25px rgba(255, 255, 255, 0.15);
    opacity: 0.5;
    animation: cardGlowPulse 3s ease-in-out infinite;
    z-index: 1;
}

.card-back:hover {
    box-shadow:
        0 15px 35px rgba(102, 126, 234, 0.4),
        inset 0 0 25px rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.card-back:hover::after {
    opacity: 0.92;
    animation: none;
}

.card-deck:hover .card-back {
    transform: scale(1.05);
}

.card-deck:hover .card-back::after {
    opacity: 0.92;
    animation: none;
}

@keyframes cardGlowPulse {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.95;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-back::after {
        animation: none;
        opacity: 0.72;
    }

    .card-back:hover::after,
    .card-deck:hover .card-back::after,
    .card-back:active::after,
    .card-deck:active .card-back::after {
        animation: none;
        opacity: 0.85;
    }

    .card-back:hover,
    .card-back:active,
    .card-deck:hover .card-back,
    .card-deck:active .card-back {
        transform: none;
    }
}

.daily-card-area:hover .draw-prompt {
    opacity: 0.8; /* Just a slight dimming if anything */
}

.draw-button,
.try-again-button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 1rem 0.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.draw-button:hover,
.try-again-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.draw-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.result-screenshot-actions {
    display: flex;
    justify-content: center;
    margin: 1.25rem auto 0;
    padding: 0 1rem;
}

.result-screenshot-actions[hidden] {
    display: none !important;
}

.result-screenshot-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 46px;
    padding: 0.72rem 1.45rem;
    border: 1px solid rgba(255, 244, 204, 0.42);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 214, 107, 0.96), rgba(255, 159, 67, 0.96));
    color: #2b1c08;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: 0 9px 22px rgba(255, 159, 67, 0.3);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.result-screenshot-button:hover,
.result-screenshot-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(255, 159, 67, 0.4);
    filter: brightness(1.03);
    outline: none;
}

.result-screenshot-button:disabled {
    opacity: 0.68;
    cursor: wait;
    transform: none;
}

.is-capturing-screenshot .result-screenshot-actions,
.is-capturing-screenshot .try-again-button,
.is-capturing-screenshot .draw-button,
.is-capturing-screenshot .mobile-spread-scroll-hint {
    display: none !important;
}

.is-capturing-screenshot .spread-result {
    overflow: visible !important;
}

.button-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.draw-button:hover .button-shine {
    left: 100%;
}



/* Card Results */
.card-result {
    margin-top: 2rem;
}

.result-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.result-card-image {
    width: 200px;
    height: 300px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.result-card-image:hover {
    transform: scale(1.05) !important;
    box-shadow: 
        0 15px 35px rgba(102, 126, 234, 0.4),
        inset 0 0 25px rgba(255, 255, 255, 0.2);
}

/* Ensure hover works with reversed cards - combining scale and rotation */
.result-card-image.reversed-card:hover,
.result-card-item img.reversed-card:hover {
    transform: scale(1.05) rotate(180deg) !important;
}

.card-info {
    text-align: center;
}

.card-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    backdrop-filter: blur(3px);
}

.card-meaning {
    font-size: 1rem;
    color: white;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

/* 오늘의 캐타로: 정·역 접두사만 타이틀보다 연한 톤으로 강조 */
.card-meaning .daily-meaning-prefix {
    font-weight: 700;
    margin-right: 0.15em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.card-meaning .daily-meaning-prefix--reversed {
    color: #f0b070;
}

.card-meaning .daily-meaning-prefix--upright {
    color: #9ef0b0;
}

.card-meaning .daily-meaning-body {
    font-weight: 400;
    color: inherit;
}

.card-interpretation {
    font-size: 1.1rem;
    color: white;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.cat-interpretation-image {
    width: clamp(54px, 8vw, 70px) !important;
    height: clamp(54px, 8vw, 70px) !important;
    max-width: 70px !important;
    max-height: 70px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 0.85rem !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.45));
    transform: none !important;
    cursor: default !important;
    pointer-events: none;
    user-select: none;
}

.cat-interpretation-text {
    display: block;
}

.result-card-item .cat-interpretation-image,
.result-card-item .cat-interpretation-image:hover,
.result-card-item .cat-interpretation-image:active,
.result-card-item .cat-interpretation-image:focus {
    width: clamp(54px, 8vw, 70px) !important;
    height: clamp(54px, 8vw, 70px) !important;
    max-width: 70px !important;
    max-height: 70px !important;
    transform: none !important;
    box-shadow: none !important;
    cursor: default !important;
}

.daily-limit-banner {
    margin: 1rem auto 0;
    padding: 0.85rem 1rem;
    max-width: 760px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.38);
    color: #f1c40f;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

/* Reversed Card Indicator */
.reversed-card {
    transform: rotate(180deg) !important;
    transition: transform 0.3s ease;
}

.reversed-text {
    color: #f39c12 !important;
    font-weight: bold;
}

.upright-text {
    color: #4ade80 !important;
    font-weight: bold;
}

.result-card-image.reversed-card,
.result-card-item img.reversed-card {
    transform: rotate(180deg) !important;
    border: 2px solid #f39c12;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.result-card-image.upright-card,
.result-card-item img.upright-card {
    border: 2px solid #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
}

/* Reversed Cat Icon Style - moved to end or specific section if needed, but here we just prepare for a move */
/* Deleting from here to move it lower for better override power */


/* Card flip animation for reversed cards */
@keyframes cardFlipReversed {
    0% {
        transform: rotateY(0deg) rotate(0deg);
    }

    50% {
        transform: rotateY(90deg) rotate(0deg);
    }

    100% {
        transform: rotateY(0deg) rotate(180deg);
    }
}

.card-flip-reversed {
    animation: cardFlipReversed 0.8s ease-in-out;
}

/* Question Input */
.question-input {
    margin-bottom: 2rem;
}

.question-input textarea {
    width: 100%;
    max-width: 500px;
    height: 120px;
    padding: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    /* backdrop-filter: blur(5px); 제거 (중첩 블러로 인한 크롬 렉 방지) */
    transform: translateZ(0);
}

.question-input textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.question-input textarea:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 2px;
}

.char-count {
    text-align: right;
    font-size: 0.9rem;
    color: white;
    margin-top: 0.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.2);
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    /* backdrop-filter: blur(3px); 제거 (투명도는 유지하면서 렌더링 렉 방지) */
}

/* Answer Result */
.answer-result {
    font-size: 2rem;
    font-weight: bold;
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 15px;
}

.answer-result.yes {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
}

.answer-result.no {
    background: linear-gradient(135deg, #f44336, #da190b);
    color: white;
}

.answer-result.maybe {
    background: linear-gradient(135deg, #FFC107, #FF9800);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Spread Layout */
.spread-layout {
    margin: 2rem 0;
}

.spread-positions {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.card-position {
    text-align: center;
}

.position-label {
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    backdrop-filter: blur(3px);
}

.card-slot {
    width: 150px;
    height: 225px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    cursor: default;
    transition: all 0.3s ease;
}

.card-slot:hover {
    transform: scale(1.05);
}

.card-slot .card-back {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* Spread Results */
.spread-result {
    margin-top: 2rem;
}

.result-cards {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.result-card-item {
    text-align: center;
    max-width: 200px;
}

.result-card-item img {
    width: 150px;
    height: 225px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.result-card-item img:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.result-card-item h4 {
    margin-bottom: 1rem;
    color: white;
    font-size: 1.1rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    backdrop-filter: blur(3px);
}

.result-card-item .card-name {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    backdrop-filter: blur(3px);
}

.result-card-item .card-interpretation {
    background: rgba(0, 0, 0, 0.4);
    padding: 1rem;
    border-radius: 10px;
    line-height: 1.6;
    color: white;
    font-size: 0.9rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.love-section .result-cards,
.problem-section .result-cards {
    margin-bottom: 0.55rem;
}

.love-section .result-card-item,
.problem-section .result-card-item {
    width: min(100%, 240px);
    box-sizing: border-box;
}

.spread-result-cat-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.25rem 0 0.6rem;
    pointer-events: none;
}

.spread-result-cat-image {
    width: clamp(58px, 7vw, 76px) !important;
    height: clamp(58px, 7vw, 76px) !important;
    max-width: 76px !important;
    max-height: 76px !important;
    object-fit: contain;
    display: block;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
    transform: none !important;
    user-select: none;
}

.spread-position-labels {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 0 0 0.75rem;
}

.spread-position-labels h4 {
    width: min(100%, 240px);
    box-sizing: border-box;
    margin: 0;
    color: white;
    font-size: 1.1rem;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    backdrop-filter: blur(3px);
}

.spread-interpretations {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 0 0 2rem;
}

.spread-interpretations .card-interpretation {
    width: min(100%, 240px);
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    padding: 1rem;
    border-radius: 10px;
    line-height: 1.6;
    color: white;
    font-size: 0.9rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.mobile-spread-scroll-hint {
    display: none;
}

/* Cards Grid */
.cards-collection-cta-wrap {
    margin: 1.6rem 0 2.3rem;
    display: flex;
    justify-content: center;
}

.cards-collection-cta {
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.92), rgba(118, 75, 162, 0.92));
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.75rem 1.8rem;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    box-shadow: 0 8px 24px rgba(55, 38, 92, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.cards-collection-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 12px 28px rgba(55, 38, 92, 0.45);
}

.cards-filter {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.5rem 1.5rem;
    border: 2px solid #667eea;
    background: rgba(255, 255, 255, 0.9);
    color: #667eea;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.filter-btn.active,
.filter-btn:hover {
    background: #667eea;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.card-item {
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    /* backdrop-filter: blur(5px); Removed to fix hover disappearance issue */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* Card package page */
.package-page-section {
    min-height: 100vh;
}

.package-page-section .section-container {
    max-width: 980px;
}

.package-intro-card,
.package-content-card,
.package-print-tips-card,
.package-copyright-card {
    background: rgba(17, 12, 33, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    padding: 1.5rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.package-intro-text {
    color: #fff;
    line-height: 1.8;
    font-size: 1.04rem;
}

.package-buy-button {
    margin-top: 1rem;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: clamp(0.7rem, 2.2vw, 0.85rem) clamp(1rem, 4vw, 1.6rem);
    font-size: clamp(0.88rem, 3.1vw, 1rem);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    min-height: 2.75rem;
    background: linear-gradient(135deg, #ffd66b, #ff9f43);
    color: #2b1c08;
    box-shadow: 0 8px 18px rgba(255, 159, 67, 0.35);
    cursor: pointer;
    opacity: 0.95;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.package-buy-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(255, 159, 67, 0.42);
}

.package-buy-button:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(255, 159, 67, 0.32);
}

.package-download-device-note {
    max-width: 580px;
    margin: 0.72rem 0 0;
    color: #ffb347;
    font-size: clamp(0.82rem, 2.6vw, 0.94rem);
    font-weight: 600;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.package-download-reveal {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.package-download-reveal[hidden] {
    display: none !important;
}

.package-download-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: stretch;
}

.package-download-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    border-radius: 999px;
    padding: clamp(0.65rem, 2vw, 0.8rem) clamp(1rem, 3.5vw, 1.35rem);
    font-size: clamp(0.85rem, 2.9vw, 0.98rem);
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: break-word;
    color: #2b1c08;
    background: linear-gradient(135deg, #ffd66b, #ff9f43);
    box-shadow: 0 6px 16px rgba(255, 159, 67, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.package-download-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(255, 159, 67, 0.38);
}

.package-download-link:focus-visible {
    outline: 2px solid #fff6d6;
    outline-offset: 3px;
}

.package-donation-block {
    margin-top: 1.15rem;
    padding: 1rem 1rem 1.05rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.package-donation-text {
    margin: 0 0 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    line-height: 1.75;
}

.package-kofi-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff6b8a, #ff5e5f);
    box-shadow: 0 6px 14px rgba(255, 94, 95, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.package-kofi-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(255, 94, 95, 0.42);
}

.package-kofi-link:focus-visible {
    outline: 2px solid #ffc9d4;
    outline-offset: 3px;
}

.package-content-title,
.package-copyright-title {
    color: #ffe4a6;
    font-size: 1.15rem;
    margin-bottom: 0.65rem;
}

.package-content-list,
.package-copyright-list {
    margin: 0;
    padding-left: 1.2rem;
    color: #f7f7f7;
    line-height: 1.8;
}

.package-image-gallery {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.package-image-gallery img {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

img {
    max-width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.card-item img {
    width: 100%;
    max-width: 120px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.card-item:hover img {
    transform: scale(1.05) !important;
}

.card-item h4 {
    font-size: 0.9rem;
    color: #333;
    transition: all 0.3s ease;
}

.card-item:hover h4 {
    color: #667eea;
    font-weight: 600;
}

/* Library Content */
.library-article {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.3);
    padding: 2rem;
    border-radius: 15px;
    backdrop-filter: blur(5px);
}

.library-article h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.article-content {
    line-height: 1.8;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.article-content p {
    margin-bottom: 1.5rem;
}

/* Guide Content */
.guide-steps {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.3);
    padding: 2rem;
    border-radius: 15px;
    backdrop-filter: blur(5px);
}

.guide-step {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: flex-start;
}

.step-number {
    background: #667eea;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.step-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.step-content p {
    color: white;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* ═══════════════════════════════════════════════
   NEW BEGINNER GUIDE STYLES
   ═══════════════════════════════════════════════ */

/* Guide Part (numbered sections) */
.guide-part {
    max-width: 860px;
    margin: 0 auto 2.5rem;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 20px;
    padding: 2rem 2.2rem;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-part-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.guide-part-number {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.guide-part-title {
    font-size: 1.45rem;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    margin: 0;
}

.guide-part-intro {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

/* Mindset Grid (2×2) */
.mindset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.mindset-item {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease;
}

.mindset-item:hover {
    background: rgba(255, 255, 255, 0.12);
}

.mindset-icon {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
}

.goal-mindset-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.guide-mindset-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.story-mindset-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.stories-section .story-mindset-icon-img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}

.guide-section .guide-mindset-icon-img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}

.about-section .goal-mindset-icon-img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}

.mindset-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #d4b896;
    margin: 0 0 0.4rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.mindset-content p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Step Block (1단계 / 2단계 / 3단계) */
.guide-step-block {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.step-block-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.8rem;
}

.step-block-badge {
    background: linear-gradient(135deg, #764ba2, #667eea);
    color: white;
    padding: 0.25rem 0.8rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(118, 75, 162, 0.4);
}

.step-block-title {
    font-size: 1.15rem;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    margin: 0;
}

.step-block-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.93rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    margin-bottom: 1rem;
}

/* Shuffle Steps */
.shuffle-steps {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.shuffle-step {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 0.7rem 1rem;
}

.shuffle-num {
    font-size: 1.2rem;
    flex-shrink: 0;
    color: #c29a4a;
    font-weight: bold;
    min-width: 24px;
}

.shuffle-content {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    line-height: 1.5;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.shuffle-content strong {
    color: #d4b896;
    margin-right: 0.4rem;
}

/* Spread Table */
.spread-table-wrapper {
    overflow-x: auto;
    margin-bottom: 1.2rem;
    border-radius: 12px;
}

.spread-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.88rem;
}

.spread-table thead tr {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.5), rgba(118, 75, 162, 0.5));
}

.spread-table th {
    color: #fff;
    font-weight: 700;
    padding: 0.75rem 1rem;
    text-align: left;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.spread-table td {
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    vertical-align: middle;
    line-height: 1.5;
}

.spread-table tbody tr:last-child td {
    border-bottom: none;
}

.spread-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

.spread-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.spread-badge.one {
    background: linear-gradient(135deg, #667eea, #9b59b6);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
}

.spread-badge.three {
    background: linear-gradient(135deg, #764ba2, #f093fb);
    color: white;
    box-shadow: 0 2px 8px rgba(118, 75, 162, 0.35);
}

/* Spread Positions Guide */
.spread-positions-guide {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.positions-guide-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #d4b896;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin: 0 0 0.8rem;
}

.position-flow {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.position-flow-card {
    flex: 1;
    min-width: 140px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.position-flow-num {
    font-size: 0.78rem;
    font-weight: 700;
    color: #c29a4a;
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
}

.position-flow-card p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    line-height: 1.5;
    margin: 0;
}

.position-flow-arrow {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    flex-shrink: 0;
    align-self: center;
}

/* Guide Notice (tip/reference box) */
.guide-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(194, 154, 74, 0.15);
    border: 1px solid rgba(194, 154, 74, 0.35);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin-top: 0.8rem;
}

.guide-notice-cat {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.guide-notice-icon-img {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain;
    display: block;
}

.guide-notice p {
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.guide-notice-link {
    color: #c29a4a;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(194, 154, 74, 0.5);
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.guide-notice-link:hover {
    color: #f0c060;
}

/* Interpretation Grid (2×2) */
.interpretation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-top: 0.5rem;
}

.interpretation-item {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s ease;
}

.interpretation-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.interpretation-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
}

.guide-interpretation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
}

.guide-section .guide-interpretation-icon-img {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}

.interpretation-content h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #d4b896;
    margin: 0 0 0.35rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.interpretation-content p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}


/* About Content */
.about-story {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.3);
    padding: 2rem;
    border-radius: 15px;
    backdrop-filter: blur(5px);
}

.about-section .about-story,
.about-section .guide-part {
    backdrop-filter: none;
}

.about-section .guide-part {
    background: rgba(0, 0, 0, 0.42);
}

.about-section .about-ai-insight-list {
    margin: 1rem 0 0;
    padding-left: 1.35rem;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.6;
}

.about-section .about-ai-insight-list li {
    margin-bottom: 0.85rem;
    padding-left: 0.15rem;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.88rem;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    word-break: keep-all;
}

body.ja .about-section .about-ai-insight-list li {
    word-break: normal;
    overflow-wrap: anywhere;
}

.about-section .about-ai-insight-list li::marker {
    color: #d4b896;
}

/* about: translateZ/contain: paint는 고정 배경(img)과 겹칠 때 크롬에서 전체 화면이 잠깐 회색으로 깜빡이는 현상을 유발할 수 있어 사용하지 않음 */

.about-section .feature-item {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.about-section .feature-item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.about-section .magic-menu-cat-img--feature,
.about-section .feature-item:hover .magic-menu-cat-img--feature {
    filter: none;
    transition: none;
}

/* Stories Content */
.stories-redirect {
    text-align: center;
}

.redirect-card {
    background: rgba(0, 0, 0, 0.4);
    padding: 3rem;
    border-radius: 20px;
    max-width: 500px;
    margin: 0 auto;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.redirect-card h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.redirect-card p {
    margin-bottom: 2rem;
    color: white;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.stories-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.stories-cat-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.stories-title:hover .stories-cat-img {
    transform: scale(1.1);
}

.stories-title h3 {
    margin: 0;
}

.redirect-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.redirect-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.btn-arrow {
    font-size: 1.2rem;
}

/* Loading Spinner */
.loading-spinner {
    display: none;
    text-align: center;
    margin: 2rem 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}

.loading-spinner.active {
    display: block;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Footer — 본문·백드롭보다 위에 두어 스크롤 시에도 푸터가 가려지지 않게 */
.footer {
    position: relative;
    z-index: 3;
    background: #2c3e50;
    color: white;
    padding: 2rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 max(2rem, env(safe-area-inset-left, 0px)) 0 max(2rem, env(safe-area-inset-right, 0px));
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.footer-section h4 {
    margin-bottom: 1rem;
    color: #ecf0f1;
    font-size: 1.2rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.footer-logo-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.footer-logo-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ecf0f1;
}

.footer-description {
    color: #bdc3c7;
    line-height: 1.6;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

.footer-links .footer-link {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.footer-links .footer-link:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
}

.footer-links .footer-kofi-link {
    color: #ffd6a5;
    background: rgba(255, 111, 97, 0.13);
    border-color: rgba(255, 214, 165, 0.3);
    box-shadow: 0 3px 10px rgba(255, 111, 97, 0.1);
}

.footer-links .footer-kofi-link:hover {
    color: #ffe8c7;
    background: rgba(255, 111, 97, 0.22);
    border-color: rgba(255, 214, 165, 0.48);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.footer-section ul li a:hover {
    color: #667eea;
}

.footer-bottom {
    text-align: center;
    padding-top: 0;
    color: #95a5a6;
}

.footer-bottom p {
    margin-bottom: 0.5rem;
}

/* Particles */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffd700;
    border-radius: 50%;
    animation: particle-float 3s ease-out forwards;
}

@keyframes particle-float {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-100px) scale(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .particles {
        display: none !important;
    }

    .particle {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* Floating Elements */
.hero-visual {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
}

.floating-cards {
    position: relative;
    width: 100%;
    height: 100%;
}

.card-float {
    position: absolute;
    width: 80px;
    height: 120px;
    perspective: 1000px;
    cursor: pointer;
    pointer-events: auto;
    animation: float 6s ease-in-out infinite;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.card-float:hover {
    z-index: 10;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s, box-shadow 0.3s ease, filter 0.3s ease;
    transform-style: preserve-3d;
}

.card-float:not(.flipped):hover .card-inner {
    transform: scale(1.15);
    filter: brightness(1.2);
}

.card-float:not(.flipped):hover .card-front {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(102, 126, 234, 0.9), 0 0 60px rgba(118, 75, 162, 0.5);
}

.card-float.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 126, 234, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.card-front {
    background-image: url('/assets/images/Cat_Tarot_Card_Back.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card-back-face {
    background: linear-gradient(135deg, #2c3e50, #4ca1af);
    color: white;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.card-back-face.win {
    background: linear-gradient(135deg, #f1c40f, #e67e22);
}

.card-back-face.lose {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.card-float.flipped:hover .card-back-face.lose,
.card-float.flipped:active .card-back-face.lose {
    border-color: rgba(255, 140, 0, 0.95);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(255, 140, 0, 0.85),
        0 0 42px rgba(255, 94, 0, 0.55);
}

/* 홈 미니게임: 당첨(노란) 카드에 커서 올릴 때 은은한 노란 글로우 */
.card-float.flipped:hover .card-back-face.win,
.card-float.flipped:active .card-back-face.win {
    border-color: rgba(255, 248, 200, 0.95);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.42),
        0 0 22px rgba(255, 230, 120, 0.7),
        0 0 44px rgba(255, 200, 60, 0.4);
}

.card-back-face.lang-ja {
    font-size: 1rem;
}

.bonus-game-hint {
    position: absolute;
    left: calc(78% - 19px);
    top: calc(52% + 11px);
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-width: 230px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #f1c40f;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    border: 0;
    box-shadow: none;
    pointer-events: none;
    z-index: 4;
}

.card-1 {
    top: 20%;
    right: 20%;
    animation-delay: 0s;
}

.card-2 {
    top: 50%;
    right: 40%;
    animation-delay: 2s;
}

.card-3 {
    top: 70%;
    right: 10%;
    animation-delay: 4s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

.mystical-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: twinkle 2s ease-in-out infinite;
}

.star-1 {
    top: 30%;
    left: 20%;
    animation-delay: 0s;
}

.star-2 {
    top: 60%;
    left: 70%;
    animation-delay: 1s;
}

.star-3 {
    top: 80%;
    left: 30%;
    animation-delay: 2s;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

.moon {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f4f4f4, #e0e0e0);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2);
    animation: moonGlow 3s ease-in-out infinite, moonPulse 6s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    pointer-events: auto;
}

.moon-cat-icon {
    width: 80%;
    height: 80%;
    object-fit: contain;
    opacity: 0.8;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.moon-cat-icon:hover {
    transform: scale(1.1);
    opacity: 1;
}

@keyframes moonGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), 0 0 80px rgba(255, 255, 255, 0.4);
    }
}

@keyframes moonPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
    }

    25% {
        transform: scale(1.05);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    75% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Responsive Design */
@media (min-width: 1400px) {
    .nav-container {
        max-width: 1600px;
    }

    .nav-menu {
        gap: 0.55rem;
    }

    .nav-link {
        padding: 0.4rem 0.85rem;
        font-size: 0.85rem;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .nav-menu {
        gap: 0.4rem;
    }

    .nav-link {
        padding: 0.35rem 0.72rem;
        font-size: 0.82rem;
    }
}

@media (max-width: 1024px) {
    .nav-menu {
        overflow-x: auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        scrollbar-color: #667eea transparent;
    }

    .nav-menu::-webkit-scrollbar {
        height: 4px;
    }

    .nav-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-menu::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 2px;
    }

    .hero-visual {
        display: block;
        position: relative;
        width: 100%;
        height: 320px;
        margin-top: 1.5rem;
        right: auto;
        top: auto;
    }

    .floating-cards {
        pointer-events: none;
    }

    .card-float {
        width: 74px;
        height: 110px;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }

    .card-float:not(.flipped):active .card-inner {
        transform: scale(1.1);
        filter: brightness(1.22);
    }

    .card-float:not(.flipped):active .card-front {
        box-shadow: 0 10px 34px rgba(0, 0, 0, 0.52), 0 0 34px rgba(102, 126, 234, 0.95), 0 0 70px rgba(118, 75, 162, 0.55);
    }

    .card-1 {
        top: 12%;
        right: 34%;
    }

    .card-2 {
        top: 44%;
        right: 58%;
    }

    .card-3 {
        top: 62%;
        right: 26%;
    }

    .bonus-game-hint {
        left: calc(68% - 19px);
        top: calc(50% + 11px - 3mm);
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        max-width: min(260px, 82vw);
        font-size: 0.92rem;
        padding: 0;
    }

    .moon {
        top: 4%;
        right: 16%;
    }

    .hero-container {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .footer-links {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .footer-links .footer-link {
        text-align: center;
        min-width: 200px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        max-width: none;
        overflow-x: visible;
        gap: 0.5rem;
    }

    .nav-menu.active {
        display: flex;
        max-height: calc(100vh - 5.5rem);
        max-height: calc(100dvh - 5.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .mobile-menu-btn {
        display: flex;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    .sound-toggle,
    .lang-dropbtn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-link {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-controls {
        gap: 0.5rem;
    }

    .daily-content,
    .yesno-content,
    .love-content,
    .problem-content {
        padding: 1.25rem 1rem;
    }

    .section-title {
        font-size: 1.65rem;
        padding: 0.85rem 1rem;
    }

    .section-description {
        font-size: 1rem;
        padding: 0.65rem 1rem;
        margin-bottom: 2rem;
    }

    .card-meaning,
    .card-interpretation {
        font-size: 1.05rem;
        line-height: 1.55;
        overflow-wrap: break-word;
    }

    .question-input textarea {
        font-size: 16px;
    }

    .result-card {
        max-width: 100%;
    }

    .hero-title-main {
        font-size: 2.5rem;
    }

    .hero-title-sub {
        font-size: 1.2rem;
    }

    .section-container {
        padding: 2rem 1rem;
    }

    .spread-positions {
        flex-direction: column;
        align-items: center;
    }

    .result-cards {
        flex-direction: column;
        align-items: center;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .cards-collection-cta-wrap {
        margin: 1.2rem 0 1.8rem;
    }

    .cards-collection-cta {
        font-size: 0.95rem;
        padding: 0.72rem 1.35rem;
    }

    .package-intro-card,
    .package-content-card,
    .package-print-tips-card,
    .package-copyright-card {
        padding: 1.2rem;
    }

    .package-intro-text {
        font-size: 0.98rem;
    }

    .package-buy-button {
        width: 100%;
        max-width: 100%;
        min-height: 3rem;
    }

    .package-download-link,
    .package-kofi-link {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .guide-step {
        flex-direction: column;
        text-align: center;
    }

    /* New guide responsive */
    .guide-part {
        padding: 1.4rem 1.2rem;
    }

    .guide-part-title {
        font-size: 1.15rem;
    }

    .mindset-grid {
        grid-template-columns: 1fr;
    }

    .interpretation-grid {
        grid-template-columns: 1fr;
    }

    .position-flow {
        flex-direction: column;
    }

    .position-flow-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    .spread-table th,
    .spread-table td {
        padding: 0.55rem 0.7rem;
        font-size: 0.8rem;
    }

    .guide-step-block {
        padding: 1rem 1.1rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .section {
        padding: 1rem;
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }

    .section-container {
        padding: 1.5rem 1rem;
    }

    .hero-title-main {
        font-size: 2rem;
    }

    .hero-visual {
        height: 292px;
    }

    .card-float {
        width: 68px;
        height: 102px;
    }

    .bonus-game-hint {
        left: calc(72% - 19px);
        top: calc(53% + 11px - 3mm);
        bottom: auto;
        font-size: 0.86rem;
        max-width: min(240px, 84vw);
    }

    .moon {
        width: 52px;
        height: 52px;
        right: 14%;
    }

    .btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        min-height: 48px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .draw-button,
    .try-again-button {
        width: calc(100% - 0.5rem);
        max-width: 22rem;
        min-height: 48px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-container {
        padding: 2.25rem 1rem 3rem;
    }

    .card-deck {
        width: 150px;
        height: 225px;
    }

    .card-slot {
        width: 120px;
        height: 180px;
    }

    .result-card-image,
    .result-card-item img {
        width: 120px;
        height: 180px;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cardFlip {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(90deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

.slide-in {
    animation: slideIn 0.6s ease-out;
}

.card-flip {
    animation: cardFlip 0.8s ease-in-out;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

/* Legal Modals */
.legal-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.legal-modal.show {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.legal-modal-content {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    max-width: 800px;
    max-height: 90vh;
    width: 90%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    transition: all 0.3s ease;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.legal-modal.show .legal-modal-content {
    transform: scale(1);
}

.legal-modal-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
}

.legal-modal-header h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
}

.close-legal-modal {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-legal-modal:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.legal-modal-body {
    padding: 2rem;
    overflow-y: auto;
    max-height: calc(90vh - 100px);
    color: #333;
    line-height: 1.7;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.legal-modal-body h3 {
    color: #667eea;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
}

.legal-modal-body h3:first-child {
    margin-top: 0;
}

.legal-modal-body p {
    margin-bottom: 1rem;
    text-align: justify;
}

.legal-modal-body ul {
    margin: 1rem 0;
    padding-left: 2rem;
}

.legal-modal-body li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.legal-content-ko,
.legal-content-en {
    font-size: 0.95rem;
}

/* 기본적으로 영어 콘텐츠 숨김 */
.legal-content-en {
    display: none;
}

/* 영어 모드일 때 한글 콘텐츠 숨김 */
body.en .legal-content-ko {
    display: none;
}

/* 영어 모드일 때 영어 콘텐츠 표시 */
body.en .legal-content-en {
    display: block;
}

/* Mobile Responsive for Legal Modals */
@media (max-width: 768px) {
    .legal-modal-content {
        width: 95%;
        max-height: 95vh;
        margin: 1rem;
    }

    .legal-modal-header {
        padding: 1rem 1.5rem;
    }

    .legal-modal-header h2 {
        font-size: 1.5rem;
    }

    .legal-modal-body {
        padding: 1.5rem;
        max-height: calc(95vh - 80px);
    }

    .legal-modal-body h3 {
        font-size: 1.2rem;
    }

    .legal-content-ko,
    .legal-content-en {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {

    .nav,
    .footer,
    .loading-spinner {
        display: none !important;
    }

    .section {
        background: white !important;
        color: black !important;
        page-break-inside: avoid;
    }

    .section-container {
        background: white !important;
        box-shadow: none !important;
    }
}

/* Card Detail Modal — backdrop-filter 제거: Chrome에서 fixed + 내부 긴 스크롤 시 전체 화면 깜빡임(회색 플래시) 유발. 불투명도로만 딤 처리. */
.card-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: clamp(10px, 2.2vh, 22px);
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(72, 88, 168, 0.94), rgba(88, 54, 128, 0.94));
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-detail-modal.show {
    opacity: 1;
    visibility: visible;
}

.card-detail-content {
    --modal-header-overlay-h: 78px;
    background: linear-gradient(145deg, #fdfefe, #f4f6fb);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 900px;
    max-height: min(90dvh, 90vh);
    width: 90%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.card-detail-modal.show .card-detail-content {
    transform: scale(1);
}

/* 보너스 당첨 모달: 참(Charm) 제목을 좌측 카드 위에 배치 (ko/en/ja 동일 레이아웃) */
#bonusWinModal .bonus-win-charm-title {
    margin: 0 0 0.85rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #667eea;
    line-height: 1.35;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
}

#bonusWinModal .charm-title-icon {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain;
    display: inline-block;
    flex: 0 0 28px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

#bonusWinModal .charm-section-heading {
    gap: 0.55rem;
}

#bonusWinModal .charm-section-icon {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain;
    display: inline-block;
    flex: 0 0 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.16));
}

#bonusWinModal .charm-section-heading span,
#bonusWinModal .bonus-win-charm-title span {
    min-width: 0;
}

#bonusWinModal .charm-download-btn {
    display: block;
    margin-top: 10px;
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 20px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

#bonusWinModal .charm-download-btn:hover {
    filter: brightness(1.05);
}

#bonusWinModal .charm-download-btn.is-disabled {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.2);
}

#bonusWinModal .charm-luck {
    margin-top: 1.25rem;
    padding: 1.35rem 1.45rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(118, 75, 162, 0.1), rgba(255, 214, 102, 0.12));
    border: 1px solid rgba(118, 75, 162, 0.16);
    position: relative;
    overflow: hidden;
}

#bonusWinModal .charm-luck::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(135deg, #764ba2, #f6ad55);
    border-radius: 0 3px 3px 0;
}

#bonusWinModal .charm-luck-title {
    color: #6b46c1;
    margin-top: 0;
}

#bonusWinModal .charm-luck-title::before {
    background: linear-gradient(135deg, #764ba2, #f6ad55);
}

#bonusWinModal .charm-luck-text {
    color: #4a3a24;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.75;
    margin: 0;
}

#bonusWinModal .lucky-tip {
    margin-top: 1.25rem;
    padding: 1.15rem 1.25rem;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 14px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

#bonusWinModal .charm-tip-title {
    color: #f39c12;
    margin-top: 0;
}

#bonusWinModal .charm-tip-title::before {
    background: linear-gradient(135deg, #f39c12, #f6e05e);
}

#bonusWinModal .charm-tip-text {
    color: #b7791f;
    font-weight: 700;
    line-height: 1.65;
    margin: 0;
}

.card-detail-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--modal-header-overlay-h);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(252, 253, 255, 0.88));
    padding: 0.55rem 0.85rem;
    border-radius: 24px 24px 0 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.05);
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    pointer-events: none;
    z-index: 3;
}

.card-detail-header .close-modal {
    pointer-events: auto;
}

.close-modal {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.close-modal:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a5acd);
    transform: scale(1.05) rotate(90deg);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.card-package-modal-content {
    max-width: 720px;
}

#cardPackageModal {
    transform: translateZ(0);
    backface-visibility: hidden;
}

#cardPackageModal .card-package-modal-content {
    transform: none;
    transition: opacity 0.2s ease;
    will-change: auto;
}

#cardPackageModal.show .card-package-modal-content {
    transform: none;
}

#cardPackageModal .card-package-modal-body {
    isolation: isolate;
    overflow-anchor: none;
    scrollbar-gutter: stable;
    contain: layout style;
}

.cats-magic-episode-modal-content {
    max-width: 980px;
}

.cats-magic-episode-modal-body {
    flex: 1 1 auto;
    padding: calc(var(--modal-header-overlay-h) + 0.2rem) 1.5rem 2rem;
    color: #1f2937;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 0.5rem;
}

.cats-magic-episode-modal-title {
    margin: 0 0 0.45rem;
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 800;
    color: #312e81;
}

.cats-magic-episode-modal-date {
    margin: 0 0 0.9rem;
    font-size: 0.88rem;
    color: #6b7280;
}

.cats-magic-episode-modal-figure {
    margin: 0 0 1rem;
    border-radius: 12px;
    overflow: hidden;
}

.cats-magic-episode-modal-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.cats-magic-episode-modal-excerpt {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
}

.cats-magic-episode-modal-article {
    font-size: 1.03rem;
    line-height: 1.82;
    color: #111827;
    white-space: pre-line;
}

.cats-magic-episode-modal-article p {
    margin: 0 0 0.9rem;
}

.cats-magic-episode-modal-article h2 {
    margin: 1.55rem 0 0.9rem;
    font-size: 1.3rem;
    color: #111827;
}

.cats-magic-episode-modal-article h3 {
    margin: 1rem 0 0.45rem;
    font-size: 1.16rem;
    color: #111827;
}

.cats-magic-episode-modal-article a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cats-magic-episode-modal-article a:hover {
    color: #1d4ed8;
}

.cats-magic-episode-modal-article img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.cats-magic-related {
    margin-top: 1.15rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(17, 24, 39, 0.12);
}

.cats-magic-related-heading {
    margin: 0 0 0.6rem;
    font-size: 0.96rem;
    font-weight: 700;
    color: #111827;
}

.cats-magic-related-list {
    display: grid;
    gap: 0.45rem;
}

.cats-magic-related-link {
    display: block;
    padding: 0.58rem 0.72rem;
    border-radius: 10px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    background: rgba(17, 24, 39, 0.03);
    color: #1f2937;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.35;
    transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.cats-magic-related-link:hover,
.cats-magic-related-link:focus-visible {
    transform: translateY(-1px);
    background: rgba(17, 24, 39, 0.08);
    border-color: rgba(17, 24, 39, 0.22);
    outline: none;
}

.card-package-modal-body {
    flex: 1 1 auto;
    padding: calc(var(--modal-header-overlay-h) + 0.2rem) 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.card-package-modal-headline {
    text-align: center;
    margin: 0.25rem 0 0.5rem;
}

.card-package-modal-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: #2d3748;
    margin: 0 0 0.4rem;
    line-height: 1.25;
}

.card-package-modal-subtitle {
    font-size: 1rem;
    color: #4a5568;
    margin: 0;
    line-height: 1.45;
}

.card-detail-body {
    flex: 1 1 auto;
    padding: calc(var(--modal-header-overlay-h) + 1rem) 2rem 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: start;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 0.5rem;
}

.card-detail-image {
    text-align: center;
    position: sticky;
    top: 120px;
}

.detail-card-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 20px;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(102, 126, 234, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-card-img:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(102, 126, 234, 0.2);
}

.card-detail-info {
    color: #333;
}

.detail-card-name {
    font-size: 2.8rem;
    font-weight: bold;
    margin: 0 0 2.5rem;
    text-align: center;
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    padding-bottom: 1rem;
}

.detail-card-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 2px;
}

.detail-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    position: relative;
    padding-left: 1rem;
}

.detail-section-title-icon {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain;
    flex: 0 0 24px;
    display: inline-block;
}

.detail-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 2px;
}

.detail-section-title.upright {
    color: #38a169;
}

.detail-section-title.upright::before {
    background: linear-gradient(135deg, #38a169, #68d391);
}

.detail-section-title.reversed {
    color: #ed8936;
}

.detail-section-title.reversed::before {
    background: linear-gradient(135deg, #ed8936, #fbb040);
}

.card-symbols {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.05));
    padding: 2rem;
    border-radius: 20px;
    margin-bottom: 2.5rem;
    border: 1px solid rgba(102, 126, 234, 0.1);
    position: relative;
    overflow: hidden;
}

.card-symbols::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 0 3px 3px 0;
}

.symbols-text {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #555;
    font-weight: 400;
}

.cat-description {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 235, 59, 0.05));
    padding: 2rem;
    border-radius: 20px;
    margin-bottom: 2.5rem;
    border: 1px solid rgba(255, 193, 7, 0.2);
    position: relative;
    overflow: hidden;
}

.cat-description::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(135deg, #ffc107, #ffeb3b);
    border-radius: 0 3px 3px 0;
}

.cat-text {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #555;
    font-style: italic;
    font-weight: 400;
}

.card-meanings {
    display: grid;
    gap: 2rem;
}

.upright-meaning {
    background: linear-gradient(135deg, rgba(56, 161, 105, 0.08), rgba(104, 211, 145, 0.05));
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(56, 161, 105, 0.2);
    position: relative;
    overflow: hidden;
}

.upright-meaning::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(135deg, #38a169, #68d391);
    border-radius: 0 3px 3px 0;
}

.reversed-meaning {
    background: linear-gradient(135deg, rgba(237, 137, 54, 0.08), rgba(251, 176, 64, 0.05));
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(237, 137, 54, 0.2);
    position: relative;
    overflow: hidden;
}

.reversed-meaning::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(135deg, #ed8936, #fbb040);
    border-radius: 0 3px 3px 0;
}

.meaning-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    font-weight: 400;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .card-detail-modal {
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    }

    .card-detail-content {
        --modal-header-overlay-h: 64px;
        width: 95%;
        max-height: min(95dvh, 95vh);
        border-radius: 20px;
    }

    .card-detail-body {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: calc(var(--modal-header-overlay-h) + 0.85rem) 1.5rem 1.5rem;
    }

    .card-detail-image {
        position: static;
    }

    .detail-card-img {
        max-width: 250px;
    }

    #bonusWinModal .charm-download-btn {
        width: min(100%, 250px);
        max-width: 250px;
        margin: 10px auto 0;
        box-sizing: border-box;
    }

    .detail-card-name {
        font-size: 2.2rem;
        margin-bottom: 2rem;
    }

    .card-symbols,
    .cat-description,
    .upright-meaning,
    .reversed-meaning,
    #bonusWinModal .charm-luck,
    #bonusWinModal .lucky-tip {
        padding: 1.5rem;
    }

    .detail-section-title {
        font-size: 1.2rem;
    }

    #bonusWinModal .bonus-win-charm-title {
        font-size: 1.28rem;
    }

    #bonusWinModal .charm-title-icon {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        flex-basis: 24px;
    }

    #bonusWinModal .charm-section-icon {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        flex-basis: 22px;
    }

    #bonusWinModal .charm-luck-text,
    #bonusWinModal .charm-tip-text {
        font-size: 1rem;
        line-height: 1.65;
    }
}

/* Daily Limit Notice */
.section-notice {
    color: white;
    text-align: center;
    margin-top: 10px;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* About Section Features */
.about-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 15px;
    text-align: center;
    cursor: default;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.about-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 1rem;
}

.about-section .about-feature-icon-img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain;
    object-position: center;
    border-radius: 6px;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28));
}

.feature-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.8rem;
    color: #ffd700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.feature-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e0e0e0;
    word-break: keep-all;
}

body.ja .feature-desc {
    word-break: break-all;
}

/* Footer Enhancements */
.social-links {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}

.social-icon {
    font-size: 1.5rem;
    text-decoration: none;
    transition: transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.social-icon:hover {
    transform: scale(1.2);
}

.footer-disclaimer {
    margin: 1.15rem 0 0;
    padding-top: 1rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(189, 195, 199, 0.95);
}

/* Sitemap Modal */
.sitemap-container {
    padding: 2rem;
    text-align: center;
}

.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.sitemap-link {
    display: block;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.sitemap-link:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    transform: translateY(-3px);
}

/* Toast Message */
.toast-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    z-index: 2000;
    animation: fadeInOut 3s ease-in-out forwards;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -20px);
    }

    10% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    90% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
}

/* Mobile Optimization for Spreads */
@media (max-width: 768px) {

    .spread-positions,
    .result-cards {
        gap: 1.5rem !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .card-slot {
        width: 120px !important;
        height: 180px !important;
    }

    .card-position {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    .result-card-item {
        max-width: 200px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .result-card-item img {
        width: 120px !important;
        height: 180px !important;
    }

    .position-label {
        font-size: 1rem !important;
        padding: 0.4rem 0.8rem !important;
        width: auto !important;
        min-width: 120px !important;
    }

    .result-card-item h4 {
        font-size: 1rem !important;
        padding: 0.4rem 0.8rem !important;
        width: auto !important;
        min-width: 120px !important;
    }

    .result-card-item .card-name {
        font-size: 1.1rem !important;
    }
}

/* Love/Problem spreads: match the single-card reading size while keeping mobile rules separate. */
@media (min-width: 769px) {
    .love-section .card-slot,
    .problem-section .card-slot {
        width: 200px !important;
        height: 300px !important;
        border-radius: 15px !important;
    }

    .love-section .result-card-item,
    .problem-section .result-card-item {
        width: min(100%, 240px) !important;
        max-width: 240px !important;
    }

    .love-section .result-card-item > img.result-card-image,
    .problem-section .result-card-item > img.result-card-image {
        width: 200px !important;
        height: 300px !important;
        border-radius: 15px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .love-section .card-slot,
    .problem-section .card-slot {
        width: 200px !important;
        height: 300px !important;
        border-radius: 15px !important;
    }

    .love-section .result-card-item,
    .problem-section .result-card-item {
        width: min(100%, 240px) !important;
        max-width: 240px !important;
    }

    .love-section .result-card-item > img.result-card-image,
    .problem-section .result-card-item > img.result-card-image {
        width: 200px !important;
        height: 300px !important;
        border-radius: 15px !important;
    }

    .love-section .position-label,
    .problem-section .position-label,
    .love-section .result-card-item h4,
    .problem-section .result-card-item h4 {
        min-width: 200px !important;
    }

    .love-section .spread-interpretations,
    .love-section .spread-position-labels,
    .problem-section .spread-interpretations,
    .problem-section .spread-position-labels {
        gap: 1.1rem !important;
    }

    .love-section .spread-interpretations .card-interpretation,
    .love-section .spread-position-labels h4,
    .problem-section .spread-interpretations .card-interpretation,
    .problem-section .spread-position-labels h4 {
        width: min(100%, 240px) !important;
    }
}

@media (max-width: 480px) {
    .love-section .card-slot,
    .problem-section .card-slot {
        width: 150px !important;
        height: 225px !important;
        border-radius: 12px !important;
    }

    .love-section .result-card-item,
    .problem-section .result-card-item {
        width: min(100%, 220px) !important;
        max-width: 220px !important;
    }

    .love-section .result-card-item > img.result-card-image,
    .problem-section .result-card-item > img.result-card-image {
        width: 150px !important;
        height: 225px !important;
        border-radius: 12px !important;
    }

    .love-section .position-label,
    .problem-section .position-label,
    .love-section .result-card-item h4,
    .problem-section .result-card-item h4 {
        min-width: 150px !important;
    }

    .love-section .spread-interpretations,
    .love-section .spread-position-labels,
    .problem-section .spread-interpretations,
    .problem-section .spread-position-labels {
        gap: 1rem !important;
    }

    .love-section .spread-interpretations .card-interpretation,
    .love-section .spread-position-labels h4,
    .problem-section .spread-interpretations .card-interpretation,
    .problem-section .spread-position-labels h4 {
        width: min(100%, 220px) !important;
    }

    .love-section .spread-result-cat-image,
    .problem-section .spread-result-cat-image {
        width: 62px !important;
        height: 62px !important;
    }
}

/* Mobile-only horizontal 3-card spreads for Love and Problem sections. */
@media (max-width: 768px) {

    .love-section .mobile-spread-scroll-hint,
    .problem-section .mobile-spread-scroll-hint {
        display: block;
        width: fit-content;
        max-width: calc(100vw - 2rem);
        margin: 0 auto 0.85rem;
        padding: 0.42rem 0.85rem;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.42);
        color: #fff4cc;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.35;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }

    .love-section .mobile-spread-scroll-hint[hidden],
    .problem-section .mobile-spread-scroll-hint[hidden] {
        display: none !important;
    }

    .love-section .result-mobile-spread-scroll-hint,
    .problem-section .result-mobile-spread-scroll-hint {
        margin: 1.25rem auto 0.85rem;
    }

    .love-section .spread-layout,
    .problem-section .spread-layout,
    .love-section .spread-result,
    .problem-section .spread-result {
        position: relative;
    }

    .love-section .spread-positions,
    .problem-section .spread-positions {
        --spread-mobile-card-col: 220px;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 1rem !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        margin: 0 -1rem 1.5rem !important;
        padding: 0.15rem 1rem 0.8rem !important;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 244, 204, 0.75) transparent;
    }

    .love-section .spread-positions::-webkit-scrollbar,
    .problem-section .spread-positions::-webkit-scrollbar,
    .love-section .spread-result::-webkit-scrollbar,
    .problem-section .spread-result::-webkit-scrollbar {
        height: 6px;
    }

    .love-section .spread-positions::-webkit-scrollbar-track,
    .problem-section .spread-positions::-webkit-scrollbar-track,
    .love-section .spread-result::-webkit-scrollbar-track,
    .problem-section .spread-result::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.12);
        border-radius: 999px;
    }

    .love-section .spread-positions::-webkit-scrollbar-thumb,
    .problem-section .spread-positions::-webkit-scrollbar-thumb,
    .love-section .spread-result::-webkit-scrollbar-thumb,
    .problem-section .spread-result::-webkit-scrollbar-thumb {
        background: rgba(255, 244, 204, 0.78);
        border-radius: 999px;
    }

    .love-section .card-position,
    .problem-section .card-position {
        flex: 0 0 var(--spread-mobile-card-col) !important;
        width: var(--spread-mobile-card-col) !important;
        max-width: var(--spread-mobile-card-col) !important;
        scroll-snap-align: center;
    }

    .love-section .position-label,
    .problem-section .position-label {
        width: min(100%, 200px) !important;
        margin: 0 auto 0.85rem !important;
    }

    .love-section .spread-result[style*="block"],
    .problem-section .spread-result[style*="block"] {
        --spread-mobile-result-col: 220px;
        display: grid !important;
        grid-template-columns: repeat(3, var(--spread-mobile-result-col));
        column-gap: 1rem;
        row-gap: 0.75rem;
        justify-content: flex-start;
        align-items: start;
        overflow-x: auto !important;
        overflow-y: visible !important;
        margin: 1.25rem -1rem 0;
        padding: 0.15rem 1rem 1rem;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 244, 204, 0.75) transparent;
    }

    .love-section .spread-result > .mobile-spread-scroll-hint,
    .problem-section .spread-result > .mobile-spread-scroll-hint {
        grid-column: 1 / -1;
        position: sticky;
        left: 50%;
        justify-self: start;
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
        box-sizing: border-box;
        margin: 0 0 0.15rem;
        transform: translateX(-50%);
        z-index: 3;
    }

    .love-section .spread-result .result-cards,
    .love-section .spread-result .spread-position-labels,
    .love-section .spread-result .spread-interpretations,
    .problem-section .spread-result .result-cards,
    .problem-section .spread-result .spread-position-labels,
    .problem-section .spread-result .spread-interpretations {
        display: contents !important;
    }

    .love-section .spread-result .result-card-item,
    .problem-section .spread-result .result-card-item {
        grid-row: 2;
        width: var(--spread-mobile-result-col) !important;
        max-width: var(--spread-mobile-result-col) !important;
        scroll-snap-align: center;
    }

    .love-section .spread-result .spread-result-cat-divider,
    .problem-section .spread-result .spread-result-cat-divider {
        grid-column: 1 / -1;
        grid-row: 3;
        position: sticky;
        left: 50%;
        justify-self: start;
        width: max-content;
        max-width: max-content;
        box-sizing: border-box;
        margin: 0.05rem 0;
        transform: translateX(-50%);
        z-index: 2;
    }

    .love-section .spread-result .spread-position-labels h4,
    .problem-section .spread-result .spread-position-labels h4 {
        grid-row: 4;
        width: var(--spread-mobile-result-col) !important;
        max-width: var(--spread-mobile-result-col) !important;
        scroll-snap-align: center;
    }

    .love-section .spread-result .spread-interpretations .card-interpretation,
    .problem-section .spread-result .spread-interpretations .card-interpretation {
        grid-row: 5;
        width: var(--spread-mobile-result-col) !important;
        max-width: var(--spread-mobile-result-col) !important;
        scroll-snap-align: center;
    }
}

@media (max-width: 480px) {

    .love-section .spread-positions,
    .problem-section .spread-positions {
        --spread-mobile-card-col: 180px;
    }

    .love-section .spread-result[style*="block"],
    .problem-section .spread-result[style*="block"] {
        --spread-mobile-result-col: 220px;
    }
}

/* Language Dropdown */
.lang-dropdown {
    position: relative;
    display: inline-block;
}

.lang-dropbtn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: #667eea;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.lang-dropbtn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.lang-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: rgba(255, 255, 255, 0.98);
    min-width: 120px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 1001;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-top: 5px;
}

.lang-dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.lang-dropdown-content a:hover {
    background-color: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.lang-dropdown.show .lang-dropdown-content {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

/* Japanese Font Support */
body.ja {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
}

body.ja .hero-title-main {
    font-family: 'Cinzel', serif;
    /* Keep English title font */
}

/* FINAL OVERRIDE: Reversed Cat Icon Style - must be tiny and match font size */
.card-name img.reversed-icon,
.result-card-item .card-name img.reversed-icon {
    height: 1em !important;
    width: auto !important;
    max-width: 1em !important;
    max-height: 1em !important;
    vertical-align: middle !important;
    margin: 0 0 0 5px !important;
    display: inline-block !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    background: none !important;
    padding: 0 !important;
}

/* UI 개선: 타로 결과 페이지 및 헤더에서 텍스트 커서(I-빔) 제거 */
.section-title,
.section-description,
.section-notice,
.card-name,
.card-meaning,
.card-interpretation,
.answer-result,
.position-label,
.result-card-item h3,
.result-card-item h4,
.draw-prompt,
.hero-title-main,
.hero-title-sub,
.hero-description {
    cursor: default !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}