body {
    font-family: 'Noto Sans KR', sans-serif;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-orbitron {
    font-family: 'Orbitron', sans-serif;
}

.text-shadow-glow {
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.5), 0 0 15px rgba(56, 189, 248, 0.3), 0 0 25px rgba(56, 189, 248, 0.2);
}

#header {
    background-color: rgba(17, 24, 39, 0.7); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#header.scrolled {
    background-color: rgba(17, 24, 39, 0.9); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at center, rgba(10, 25, 47, 0.05) 0%, rgba(10, 25, 47, 0.7) 70%),
        linear-gradient(180deg, rgba(17,24,39,0) 0%, rgba(17,24,39,0.8) 80%, rgba(17,24,39,1) 100%);
    z-index: 1;
}


section {
    overflow: hidden; 
}

.ai-lab-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.ai-lab-card:hover {
    box-shadow: 0 10px 25px rgba(6, 182, 212, 0.25), 0 0 30px rgba(6, 182, 212, 0.15);
}

.purchase-button {
    background-color: #0ea5e9; /* sky-500 */
    color: white;
    font-weight: 600; /* semibold */
    padding: 0.65rem 1.25rem; /* Slightly smaller padding */
    border-radius: 0.375rem; /* rounded-md */
    transition: all 0.2s ease-in-out;
    display: inline-flex; /* For icon alignment */
    align-items: center;
    justify-content: center;
    border: 1px solid #0ea5e9; /* sky-500 */
}

.purchase-button:hover {
    background-color: #0284c7; /* sky-600 */
    border-color: #0284c7;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 3px 10px rgba(14, 165, 233, 0.3);
}

.purchase-button-other {
    background-color: #374151; /* gray-700 */
    border-color: #4b5563; /* gray-600 */
}
.purchase-button-other:hover {
    background-color: #4b5563; /* gray-600 */
    border-color: #525f71;
}


/* Custom scrollbar for AI Lab and other scrollable areas */
.styled-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.styled-scrollbar::-webkit-scrollbar-track {
    background: rgba(55, 65, 81, 0.5); /* gray-700 with opacity */
    border-radius: 3px;
}
.styled-scrollbar::-webkit-scrollbar-thumb {
    background: #0ea5e9; /* sky-500 */
    border-radius: 3px;
}
.styled-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #0284c7; /* sky-600 */
}

.styled-scrollbar-thin::-webkit-scrollbar {
    width: 4px;
}
.styled-scrollbar-thin::-webkit-scrollbar-track {
    background: rgba(55, 65, 81, 0.3); /* gray-700 with opacity */
    border-radius: 2px;
}
.styled-scrollbar-thin::-webkit-scrollbar-thumb {
    background: #38bdf8; /* sky-400 */
    border-radius: 2px;
}
.styled-scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #0ea5e9; /* sky-500 */
}


/* For AI Lab chat interface */
#ai-poet-output p {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    max-width: 85%;
    line-height: 1.6;
    word-break: keep-all;
}

#ai-poet-output p.user-message {
    background-color: #0ea5e9; /* sky-500 */
    color: white;
    margin-left: auto;
    text-align: left; /* For better readability in chat bubbles */
    border-bottom-right-radius: 2px;
}

#ai-poet-output p.ai-message {
    background-color: #374151; /* gray-700 */
    color: #e5e7eb; /* gray-200 */
    margin-right: auto;
    text-align: left;
    border-bottom-left-radius: 2px;
}
#ai-poet-output p.ai-message.error-message { /* This class might not be used now, but good to keep */
    background-color: #ef4444; /* red-500 */
    color: white;
}


/* For AI Lab story snippets */
.story-snippet-button {
    background-color: rgba(55, 65, 81, 0.7); /* gray-700 with opacity */
    color: #e5e7eb; /* gray-200 */
    padding: 0.6rem 1rem;
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #4b5563; /* gray-600 */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
    text-align: left;
    display: block;
    width: 100%;
    font-size: 0.875rem;
}

.story-snippet-button:hover {
    background-color: rgba(75, 85, 99, 0.8); /* gray-600 with opacity */
    border-color: #0ea5e9; /* sky-500 */
}
.story-snippet-button:active {
    transform: scale(0.98);
}


details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
details > summary .details-arrow {
    transition: transform 0.2s ease-in-out;
}
details[open] > summary .details-arrow {
    transform: rotate(180deg);
}

/* For smooth animation of details content */
details > div { /* Assuming the content wrapper is a div */
    overflow: hidden;
}


/* For placeholder text color in dark inputs */
input::placeholder, textarea::placeholder {
    color: #9ca3af; /* gray-400 */
    opacity: 0.8;
}

/* Simple pulse animation for Hero title */
.animate-pulse-slow {
  animation: pulse-slow 3s infinite ease-in-out;
}
@keyframes pulse-slow {
  0%, 100% { opacity: 1; }\n  50% { opacity: 0.85; }\n}

/* Short bounce for icons on hover */
@keyframes bounce-short {
  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-3px); }\n}
.animate-bounce-short {
  animation: bounce-short 0.5s ease-in-out;
}

/* AI Lab input focus styles */
#ai-lab input[type=\"text\"]:focus, #ai-lab textarea:focus, #ai-lab select:focus {
    border-color: #0ea5e9; /* sky-500 */
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3); /* sky-500 with opacity */
    outline: none;
}

#style-transformer-output {
    white-space: pre-wrap; /* Ensure newlines are rendered */
    font-family: 'Noto Sans KR', sans-serif; /* Consistent font */
}