/* ===========================================
   Home Page Styles
   =========================================== */
.home-hero {
    position: relative;
    height: 20rem;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 2rem;
    background: 
        /* 오행 색상 그라데이션 - 명리학 전통 색상 */
        radial-gradient(circle at 10% 20%, var(--color-wood-light) 0%, transparent 40%),
        radial-gradient(circle at 90% 30%, var(--color-fire-light) 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, var(--color-earth-light) 0%, transparent 40%),
        radial-gradient(circle at 30% 60%, var(--color-metal-light) 0%, transparent 40%),
        radial-gradient(circle at 70% 10%, var(--color-water-light) 0%, transparent 40%),
        /* 기본 배경 */
        linear-gradient(135deg, rgba(15, 20, 25, 0.95) 0%, rgba(45, 27, 78, 0.90) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.home-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(139, 127, 245, 0.03) 2px, rgba(139, 127, 245, 0.03) 4px),
        repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(245, 200, 66, 0.03) 2px, rgba(245, 200, 66, 0.03) 4px);
    opacity: 0.6;
    pointer-events: none;
}

.home-hero::after {
    content: '☯';
    position: absolute;
    top: 20%;
    right: 15%;
    font-size: 3rem;
    opacity: 0.2;
    animation: float 6s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(139, 127, 245, 0.3));
}

/* 명리학 아이콘 데코레이션 */
.home-hero .element-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.15;
}

.home-hero .element-icon {
    position: absolute;
    font-size: 2rem;
    animation: float 8s ease-in-out infinite;
}

.home-hero .element-icon.wood {
    top: 15%;
    left: 10%;
    color: var(--color-wood);
    animation-delay: 0s;
}

.home-hero .element-icon.fire {
    top: 25%;
    right: 15%;
    color: var(--color-fire);
    animation-delay: 1.5s;
}

.home-hero .element-icon.earth {
    bottom: 20%;
    left: 15%;
    color: var(--color-earth);
    animation-delay: 3s;
}

.home-hero .element-icon.metal {
    top: 50%;
    left: 5%;
    color: var(--color-metal);
    animation-delay: 4.5s;
}

.home-hero .element-icon.water {
    bottom: 15%;
    right: 10%;
    color: var(--color-water);
    animation-delay: 6s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.home-hero h1 { 
    font-size: 3rem; 
    font-weight: 600; 
    margin-bottom: 1rem; 
    color: white; 
    line-height: 1.1; 
    letter-spacing: -0.5px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.home-hero h1 .highlight {
    color: var(--color-gold);
    text-shadow: 0 0 20px rgba(245, 200, 66, 0.5);
}

.home-hero p { 
    font-size: 1.125rem; 
    color: rgba(255, 255, 255, 0.85); 
    line-height: 1.6; 
    font-weight: 300;
    max-width: 24rem;
    margin-bottom: 2rem;
}

.hero-cta {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    z-index: 1;
    position: relative;
}

.btn-hero {
    font-size: 1.125rem;
    padding: 1rem 2.5rem;
    min-width: 280px;
    min-height: 56px; /* 모바일 터치 최적화 - 44px 이상 확보 */
    animation: pulse 2s ease-in-out infinite;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(245, 200, 66, 0.4);
    }
    50% {
        box-shadow: 0 8px 32px rgba(245, 200, 66, 0.6);
    }
}

/* ===========================================
   사주팔자 인포그래픽 섹션
   =========================================== */
.saju-infographic {
    margin: 3rem 0;
    padding: 2rem;
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.saju-infographic .section-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.75rem;
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.infographic-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.infographic-item {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border-dark);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.infographic-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(139, 127, 245, 0.2);
}

.infographic-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.infographic-item h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-dark);
}

.infographic-item p {
    font-size: 0.875rem;
    color: var(--color-text-muted-dark);
    line-height: 1.5;
}

/* 오행 시각화 */
.five-elements-visual {
    margin-top: 2rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 1rem;
    border: 1px solid var(--color-border-dark);
}

.elements-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--color-text-dark);
}

.elements-circle {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.element-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.element-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    transition: opacity 0.3s ease;
}

.element-item.wood {
    border-color: var(--color-wood);
    background: var(--color-wood-light);
}

.element-item.wood::before {
    background: var(--color-wood);
}

.element-item.fire {
    border-color: var(--color-fire);
    background: var(--color-fire-light);
}

.element-item.fire::before {
    background: var(--color-fire);
}

.element-item.earth {
    border-color: var(--color-earth);
    background: var(--color-earth-light);
}

.element-item.earth::before {
    background: var(--color-earth);
}

.element-item.metal {
    border-color: var(--color-metal);
    background: var(--color-metal-light);
}

.element-item.metal::before {
    background: var(--color-metal);
}

.element-item.water {
    border-color: var(--color-water);
    background: var(--color-water-light);
}

.element-item.water::before {
    background: var(--color-water);
}

.element-item:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.element-item:hover::before {
    opacity: 0.2;
}

.element-symbol {
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    color: var(--color-text-dark);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.element-name {
    font-size: 0.75rem;
    color: var(--color-text-muted-dark);
    font-weight: 500;
}

/* ===========================================
   Onboarding Guide Section
   =========================================== */
.onboarding-guide {
    margin: 2rem 0;
    padding: 2rem;
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border-dark);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    position: relative;
}

.step-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-primary);
    border-radius: 0 0.5rem 0.5rem 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.step-item.active {
    background: rgba(139, 127, 245, 0.1);
    border-color: var(--color-primary);
}

.step-item.active::before {
    opacity: 1;
}

.step-item.completed {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.step-item.completed::before {
    background: #22c55e;
    opacity: 1;
}

.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(139, 127, 245, 0.3);
    position: relative;
    transition: all 0.3s ease;
}

.step-number::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-wood), var(--color-fire), var(--color-earth), var(--color-metal), var(--color-water));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.step-item.active .step-number::before {
    opacity: 0.3;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.step-item.active .step-number {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(139, 127, 245, 0.4);
}

.step-item.completed .step-number {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

.step-content {
    flex: 1;
}

.step-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text-dark);
}

.step-content p {
    font-size: 0.875rem;
    color: var(--color-text-muted-dark);
    line-height: 1.5;
    margin: 0;
}

.step-status {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-check {
    display: none;
    font-size: 1.5rem;
    color: #22c55e;
    font-weight: bold;
}

.step-item.completed .step-check {
    display: block;
}

.onboarding-progress {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border-dark);
}

.progress-bar {
    width: 100%;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: 0.25rem;
    transition: width 0.5s ease;
    width: 0%;
}

.progress-text {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted-dark);
    margin: 0;
    font-weight: 500;
}

/* ===========================================
   Login & Welcome Sections
   =========================================== */
.login-section {
    margin-top: 2rem;
}

.login-card {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.login-card p {
    color: var(--color-text-muted-dark);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

.welcome-section {
    margin-top: 2rem;
}

.welcome-card {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.welcome-icon {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: 50%;
    color: white;
}

.welcome-icon svg {
    width: 2rem;
    height: 2rem;
}

.welcome-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text-dark);
}

.welcome-content p {
    color: var(--color-text-muted-dark);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

/* ===========================================
   Page Headers
   =========================================== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
}

/* ===========================================
   Empty States
   =========================================== */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

.empty-state-description {
    color: var(--color-text-muted-dark);
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
}

.empty-state-action {
    margin-top: 1.5rem;
}

/* ===========================================
   Fortune Display Pages
   =========================================== */
.fortune-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.fortune-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    color: var(--color-text-muted-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
}

.fortune-tab:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
}

.fortune-tab.active {
    background: var(--color-gold);
    color: #1a1a1a;
    border-color: var(--color-gold);
}

.tab-icon {
    font-size: 1rem;
}

.fortune-content {
    margin-bottom: 2rem;
}

.fortune-tab-content {
    display: none;
}

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

.fortune-result-card {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.fortune-card-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.fortune-card-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

.fortune-card-content p {
    color: var(--color-text-muted-dark);
    line-height: 1.6;
    font-size: 1rem;
}

/* ===========================================
   Lucky Numbers Section
   =========================================== */
.lucky-numbers-section {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-top: 2rem;
}

.lucky-numbers-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lucky-numbers-icon {
    font-size: 1.5rem;
}

.lucky-numbers-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-dark);
}

.lucky-numbers {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.lucky-number {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: 50%;
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
    box-shadow: 0 4px 12px rgba(139, 127, 245, 0.3);
}

.lucky-numbers-description {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted-dark);
    font-size: 0.875rem;
}

.lucky-numbers-icon-small {
    font-size: 1rem;
}

/* ===========================================
   Lotto Suggestion Section
   =========================================== */
.lotto-suggestion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 0.75rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lotto-suggestion-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.lotto-suggestion-text {
    color: var(--color-text-dark);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

/* ===========================================
   Subscription Page
   =========================================== */
.subscription-status-card {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 2rem;
}

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

.status-icon {
    font-size: 1.5rem;
}

.status-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
}

.status-description {
    color: var(--color-text-muted-dark);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.status-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.status-detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(139, 127, 245, 0.1);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-dark);
}

.status-detail-icon {
    font-size: 1rem;
}

/* 구독 토글 섹션 */
.subscription-toggle-section {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 2rem;
}

.toggle-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-dark);
}

.toggle-input {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 3rem;
    height: 1.5rem;
    background: var(--color-border-dark);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.toggle-input:checked + .toggle-slider {
    background: var(--color-primary);
}

.toggle-input:checked + .toggle-slider::before {
    transform: translateX(1.5rem);
}

.toggle-description {
    color: var(--color-text-muted-dark);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

/* 알림 시간 섹션 */
.notification-time-section {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
}

.time-input-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.time-label {
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: 1rem;
}

.time-input {
    width: 200px;
    padding: 0.75rem;
    border: 1px solid var(--color-border-dark);
    border-radius: 0.5rem;
    background: var(--color-background-dark);
    color: var(--color-text-dark);
    font-size: 1rem;
}

.time-description {
    color: var(--color-text-muted-dark);
    font-size: 0.875rem;
    margin: 0;
}

/* 알림 설정 섹션 */
.notification-preferences-section {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 2rem;
}

.preferences-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.preference-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preference-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-dark);
}

.preference-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-primary);
}

.preference-description {
    color: var(--color-text-muted-dark);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

/* 알림 권한 섹션 */
.notification-permission-section {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 2rem;
}

.permission-status {
    margin-bottom: 1.5rem;
}

.permission-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* 구독 관리 섹션 */
.subscription-management-section {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.management-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}


/* ===========================================
   Saju Info Pages
   =========================================== */
.saju-basic-info {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 2rem;
}

.saju-basic-content {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-dark);
}

.saju-analysis-tabs {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 2rem;
}

.analysis-tab-header {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border-dark);
    padding-bottom: 1rem;
}

.analysis-tab {
    background: transparent;
    border: 1px solid var(--color-border-dark);
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    color: var(--color-text-muted-dark);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    text-align: center;
}

.analysis-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-dark);
}

.analysis-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.analysis-tab-content {
    display: none;
    padding: 1rem 0;
}

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

.analysis-tab-content h3 {
    color: var(--color-text-dark);
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.analysis-tab-content p {
    color: var(--color-text-muted-dark);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.analysis-tab-content ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.analysis-tab-content li {
    color: var(--color-text-muted-dark);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.analysis-tab-content li:last-child {
    border-bottom: none;
}

/* 사주 정보 한글 표시 스타일 */
.saju-basic-content h3 {
    color: var(--color-text-dark);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5rem;
}

.saju-basic-content p {
    color: var(--color-text-muted-dark);
    line-height: 1.8;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.saju-basic-content strong {
    color: var(--color-primary);
    font-weight: 600;
}

/* 한자와 한글 표시 스타일 */
.saju-basic-content .korean-reading {
    color: var(--color-gold);
    font-weight: 500;
    font-size: 0.9em;
}

/* 사주팔자 표시 개선 */
.saju-pillar-info {
    background: rgba(139, 127, 245, 0.1);
    border: 1px solid var(--color-primary);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1rem 0;
}

.saju-pillar-info h4 {
    color: var(--color-text-dark);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem 0;
}

.saju-pillar-info p {
    color: var(--color-text-muted-dark);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.saju-pillar-display {
    text-align: center;
}

.saju-pillar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.saju-pillar-icon {
    font-size: 1.5rem;
}

.saju-pillar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.saju-pillar-row {
    display: contents;
}

.saju-pillar-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}

.pillar-label {
    font-size: 0.75rem;
    color: var(--color-text-muted-dark);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.pillar-stamp {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: 0.5rem;
    padding: 0.75rem;
    color: white;
}

.stamp-content {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    text-align: center;
    line-height: 1.2;
}

.stamp-element {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-left: 0.5rem;
    font-weight: 500;
}

.saju-analysis-card {
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.analysis-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.analysis-icon {
    font-size: 1.5rem;
}

/* 일주 기본 성격 분석 스타일 */
.day-pillar-personality-analysis {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--color-primary);
}

.day-pillar-personality-analysis h2 {
    color: var(--color-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.day-pillar-personality-analysis h2:first-child {
    margin-top: 0;
}

.day-pillar-personality-analysis h3 {
    color: var(--color-text-dark);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    margin-top: 1.25rem;
}

.day-pillar-personality-analysis p {
    color: var(--color-text-muted-dark);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.day-pillar-personality-analysis ul,
.day-pillar-personality-analysis ol {
    color: var(--color-text-muted-dark);
    line-height: 1.8;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.day-pillar-personality-analysis li {
    margin-bottom: 0.5rem;
}

.analysis-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.analysis-section {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
}

.section-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0;
}

.toggle-btn {
    background: none;
    border: none;
    color: var(--color-text-muted-dark);
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.toggle-btn.active {
    transform: rotate(180deg);
}

.section-content {
    padding: 1rem 1.5rem;
    display: none;
}

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

.trait-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: var(--color-text-muted-dark);
    font-size: 0.875rem;
}

.trait-icon {
    color: var(--color-primary);
    font-weight: bold;
}

.personality-chart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chart-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.chart-label {
    width: 4rem;
    font-size: 0.875rem;
    color: var(--color-text-muted-dark);
    font-weight: 500;
}

.chart-bar {
    flex: 1;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    overflow: hidden;
}

.chart-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: 0.25rem;
    transition: width 0.3s ease;
}

.chart-value {
    width: 3rem;
    text-align: right;
    font-size: 0.875rem;
    color: var(--color-text-dark);
    font-weight: 600;
}

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

.aptitude-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.aptitude-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.aptitude-icon {
    font-size: 1.5rem;
}

/* ===========================================
   Today's Saju Page - Date Display
   =========================================== */

/* 오늘 날짜 표시 */
.today-date-display {
    background: linear-gradient(135deg, rgba(139, 127, 245, 0.1), rgba(59, 130, 246, 0.1));
    border: 1px solid var(--color-primary);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: center;
}

.date-display {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.date-korean {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-dark);
    line-height: 1.4;
}

.date-chinese {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-gold);
    font-family: var(--font-body);
    letter-spacing: 0.05em;
}

.aptitude-item span {
    font-size: 0.875rem;
    color: var(--color-text-dark);
    font-weight: 500;
}

/* ===========================================
   Saju Info Page Styles
   =========================================== */

/* 사주팔자 기본 정보 */
.saju-basic-info {
    background: linear-gradient(135deg, rgba(139, 127, 245, 0.1), rgba(59, 130, 246, 0.1));
    border: 1px solid var(--color-primary);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.saju-basic-info .section-header {
    margin-bottom: 1rem;
}

.saju-basic-info .section-header h3 {
    color: var(--color-text-dark);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.saju-basic-content {
    color: var(--color-text-dark);
    line-height: 1.6;
}

.saju-basic-content h2 {
    color: var(--color-gold);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem 0;
}

.saju-basic-content strong {
    color: var(--color-primary);
    font-weight: 600;
}

/* 사주팔자 박스 레이아웃 */
.saju-box-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.saju-box-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.saju-box-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* 헤더 행 */
.saju-box-header {
    background-color: rgba(200, 200, 200, 0.2);
    padding: 0.75rem 0.5rem;
    border-radius: 0.5rem;
}

.saju-box-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 0.25rem;
}

.saju-box-label-chinese {
    font-size: 1rem;
    color: var(--color-text-dark);
    font-weight: 500;
    margin-bottom: 0.125rem;
}

.saju-box-label-korean {
    font-size: 0.875rem;
    color: var(--color-text-dark);
    font-weight: normal;
    opacity: 0.8;
}

/* 충 정보 행 */
.saju-box-clash {
    background-color: rgba(255, 255, 200, 0.3);
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.saju-box-clash-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-dark);
    text-align: center;
}

/* 십신 정보 행 */
.saju-box-tengods {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.saju-box-tengods-text {
    font-size: 0.875rem;
    color: var(--color-text-dark);
    text-align: center;
}

.saju-tengods-day {
    color: #4a90e2;
    font-weight: 600;
}

/* 사주팔자 박스 행 */
.saju-box-pillars {
    gap: 0.5rem;
}

.saju-box-cell {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    border: 3px solid #000;
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 생시가 없을 때 시주 박스 스타일 */
.saju-box-empty-cell {
    opacity: 0.5;
    border-style: dashed;
    font-size: 1.5rem;
    color: #999 !important;
}

.saju-box-empty .saju-box-label-chinese {
    color: #999;
    font-size: 0.875rem;
}

/* 반응형 */
@media (max-width: 768px) {
    .saju-box-cell {
        font-size: 1.5rem;
        border-width: 2px;
    }
    
    .saju-box-label-korean {
        font-size: 0.75rem;
    }
    
    .saju-box-label {
        font-size: 0.75rem;
    }
    
    .saju-box-label-chinese {
        font-size: 0.875rem;
    }
    
    .saju-box-clash-text,
    .saju-box-tengods-text {
        font-size: 0.75rem;
    }
}

/* 사주 분석 탭 */
.saju-analysis-tabs {
    background: linear-gradient(135deg, rgba(139, 127, 245, 0.05), rgba(59, 130, 246, 0.05));
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 2rem;
}

.analysis-tab-header {
    display: flex;
    background: linear-gradient(135deg, rgba(139, 127, 245, 0.1), rgba(59, 130, 246, 0.1));
    border-bottom: 1px solid var(--color-border);
}

.analysis-tab {
    flex: 1;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--color-text-muted-dark);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-right: 1px solid var(--color-border);
}

.analysis-tab:last-child {
    border-right: none;
}

.analysis-tab:hover {
    background: rgba(139, 127, 245, 0.1);
    color: var(--color-text-dark);
}

.analysis-tab.active {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
}

.saju-analysis-content {
    padding: 1.5rem;
}

.analysis-tab-content {
    display: none;
    color: var(--color-text-dark);
    line-height: 1.6;
}

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

.analysis-tab-content h2 {
    color: var(--color-gold);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.analysis-tab-content strong {
    color: var(--color-primary);
    font-weight: 600;
}

.analysis-tab-content li {
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

/* ===========================================
   Profile Page Styles
   =========================================== */

/* ===========================================
   공통 로그인 프롬프트 스타일 (통일된 디자인)
   =========================================== */

/* 로그인 프롬프트 기본 스타일 - 모든 페이지에서 동일 */
.login-prompt {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: 2rem;
    text-align: center;
}

.login-prompt-content {
    text-align: center;
    max-width: 400px;
    padding: 2rem;
    background: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-prompt-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.login-prompt-title {
    color: var(--color-text-dark);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.login-prompt-description {
    color: var(--color-text-muted-dark);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* 로그인 프롬프트 버튼 스타일 - 모든 페이지에서 동일 */
.login-prompt .btn {
    min-width: 150px;
    padding: 0.875rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    /* btn-primary 클래스가 우선 적용되도록 함 */
}

.login-prompt .btn.btn-primary {
    /* btn-primary 스타일이 이미 정의되어 있으므로 추가 스타일만 적용 */
    min-width: 150px;
    padding: 0.875rem 1.5rem;
}

/* Empty State 스타일도 동일하게 적용 */
.empty-state .login-prompt {
    min-height: 300px;
    padding: 2rem;
}

.empty-state .login-prompt-content {
    max-width: 400px;
    margin: 0 auto;
}

/* ===========================================
   Profile Form Improvements
   =========================================== */

/* 선택사항 배지 */
.optional-badge {
    font-size: 0.75rem;
    color: var(--color-text-muted-dark);
    font-weight: normal;
    margin-left: 0.25rem;
}

/* 도움말 및 안내 스타일 */
.form-help-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted-dark);
    line-height: 1.4;
}

.help-icon {
    font-size: 0.875rem;
    opacity: 0.7;
}

.help-link {
    display: inline-block;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.help-link:hover {
    color: var(--color-primary-light);
    border-bottom-color: var(--color-primary-light);
}

.help-link:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.help-tooltip {
    display: none;
    margin-top: 0.75rem;
    padding: 1rem;
    background: rgba(139, 127, 245, 0.1);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-dark);
    max-width: 100%;
}

.help-tooltip.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

.help-tooltip p {
    margin: 0.5rem 0;
}

.help-tooltip p:first-child {
    margin-top: 0;
}

.help-tooltip p:last-child {
    margin-bottom: 0;
}

.help-tooltip strong {
    color: var(--color-primary);
    font-weight: 600;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.calendar-help {
    margin-bottom: 0.75rem;
}

/* 에러 메시지 스타일 */
.form-error-message {
    display: none;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--color-error);
    line-height: 1.4;
}

.form-error-message.show {
    display: block;
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.form-control.error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.1);
}

.form-control.error:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.2);
}

/* 생시 입력 컨테이너 */
.birth-hour-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 생시 버튼 그리드 */
.birth-hour-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.hour-btn {
    padding: 0.75rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    color: var(--color-text-dark);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.4;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hour-btn:hover {
    background: rgba(139, 127, 245, 0.1);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(139, 127, 245, 0.2);
}

.hour-btn.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(139, 127, 245, 0.4);
}

.hour-btn .hour-time {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
    font-weight: normal;
}

.hour-btn.active .hour-time {
    opacity: 0.9;
}

/* 생시 모름 체크박스 */
.birth-hour-unknown {
    margin-top: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--color-text-dark);
    font-size: 0.875rem;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.checkbox-label:hover {
    color: var(--color-primary);
}

/* 양력/음력 토글 스위치 */
.calendar-toggle-container {
    margin: 1rem 0;
}

.calendar-toggle {
    display: flex;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--color-border-dark);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    position: relative;
}

.calendar-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.calendar-toggle-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-text-dark);
    font-weight: 500;
    min-height: 80px;
}

.calendar-toggle-label:hover {
    background: rgba(139, 127, 245, 0.1);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.calendar-toggle-input:checked + .calendar-toggle-label {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(139, 127, 245, 0.4);
}

.calendar-toggle-icon {
    font-size: 2rem;
    line-height: 1;
}

.calendar-toggle-text {
    font-size: 1rem;
    font-weight: 600;
}

/* 반응형: 생시 버튼 */
@media (max-width: 768px) {
    .birth-hour-buttons {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .hour-btn {
        padding: 0.625rem 0.375rem;
        font-size: 0.8125rem;
        min-height: 55px;
    }
    
    .hour-btn .hour-time {
        font-size: 0.6875rem;
    }
    
    .calendar-toggle-label {
        padding: 1rem 0.75rem;
        min-height: 70px;
    }
    
    .calendar-toggle-icon {
        font-size: 1.5rem;
    }
    
    .calendar-toggle-text {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .birth-hour-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .calendar-toggle {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .calendar-toggle-label {
        min-height: 60px;
    }
}

/* 폼 제출 섹션 */
.form-submit-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-dark);
}

.form-submit-hint {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(139, 127, 245, 0.1);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-text-dark);
    line-height: 1.5;
    display: none;
}

.form-submit-hint.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

.form-submit-hint .hint-icon {
    margin-right: 0.5rem;
    font-size: 1rem;
}

/* 모바일 최적화: 날짜 선택기 */
input[type="date"] {
    min-height: 44px; /* 터치 영역 확대 */
    font-size: 1rem; /* 모바일에서 텍스트 크기 확대 */
    -webkit-appearance: none;
    appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 0.5rem;
    margin-left: 0.5rem;
}

/* 모바일 최적화: 입력 필드 터치 영역 (기존 .form-control 스타일 확장) */
.form-control {
    min-height: 44px; /* 터치 영역 확대 */
    font-size: 1rem; /* 모바일에서 텍스트 크기 확대 */
    padding: 0.875rem; /* 패딩 증가 */
}

@media (max-width: 768px) {
    .form-section-card {
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }
    
    .form-section-title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .form-control {
        font-size: 16px; /* iOS에서 자동 줌 방지 */
        min-height: 48px;
    }
    
    input[type="date"] {
        font-size: 16px; /* iOS에서 자동 줌 방지 */
        min-height: 48px;
    }
    
    .btn {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
    }
}