/* =====================
   CSS Variables
===================== */
:root { /* DARK THEME DEFAULT - Mature & Luxurious */
    --bg-primary: #17171F; /* Deep charcoal */
    --bg-secondary: #252530; /* Slightly lighter charcoal */
    --text-primary: #E0E0E0; /* Soft off-white */
    --text-secondary: #A0A0A0; /* Muted gray */
    --accent-color-1: #6A6AFF; /* Deep, slightly desaturated purple-blue */
    --accent-color-2: #4EE0A6; /* Muted teal-green */

    --primary-heading-gradient: linear-gradient(90deg, #8A8AFF, #6A6AFF, #4EE0A6); /* Softer, richer gradient */
    --button-bg-gradient: linear-gradient(135deg, #6A6AFF, #4EE0A6); /* Muted button gradient */
    --button-shadow-1: rgba(106, 106, 255, 0.25); /* Softer, deeper shadow */
    --button-shadow-2: rgba(78, 224, 166, 0.4); /* Softer, deeper shadow */

    --card-bg: linear-gradient(160deg, #252530, #17171F); /* Subtle card gradient */
    --card-border: rgba(120, 120, 150, 0.2); /* Very subtle border */
    --card-shadow: rgba(0, 0, 0, 0.4); /* Deeper, diffused shadow */

    --subtle-text: #858590; /* Even more subtle text */
    --card-text: #C5C5D0; /* Slightly richer card text */
    --name-gradient: linear-gradient(90deg, #A88BFA, #4EE0A6); /* Subtler name gradient */
    --footer-text: #6A6A75; /* Deeper footer text */
    --theme-toggle-bg: rgba(255,255,255,0.06); /* More subtle toggle bg */
    --star-opacity: 0.2; /* Slightly less opaque stars */
    --header-gap: 24px; /* Increased header gap */
    --header-padding: 70px 20px 30px; /* More generous header padding */
}

body.light-mode { /* LIGHT THEME - Mature & Luxurious */
    --bg-primary: #F4F4F9; /* Soft, warm light gray */
    --bg-secondary: #FFFFFF; /* Clean white */
    --text-primary: #303030; /* Darker, but soft black */
    --text-secondary: #707070; /* Muted gray */
    --accent-color-1: #5C6BC0; /* Sophisticated blue */
    --accent-color-2: #66BB6A; /* Fresh, muted green */

    --primary-heading-gradient: linear-gradient(90deg, #5C6BC0, #66BB6A, #9575CD); /* Refined light gradient */
    --button-bg-gradient: linear-gradient(135deg, #5C6BC0, #66BB6A); /* Muted button gradient */
    --button-shadow-1: rgba(92, 107, 192, 0.15); /* Softer shadow */
    --button-shadow-2: rgba(102, 187, 106, 0.25); /* Softer shadow */

    --card-bg: #FFFFFF; /* White card background */
    --card-border: rgba(220, 220, 230, 0.8); /* Subtle border */
    --card-shadow: rgba(0, 0, 0, 0.08); /* Very light, diffused shadow */

    --subtle-text: #909090;
    --card-text: #555555;
    --name-gradient: linear-gradient(90deg, #AB47BC, #66BB6A); /* Subtler name gradient */
    --footer-text: #A0A0A0;
    --theme-toggle-bg: rgba(0,0,0,0.03); /* More subtle toggle bg */
    --star-opacity: 0;
}


/* =====================
   Global
===================== */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Changed to 100vh for full viewport height */
    font-family: 'Noto Sans KR', sans-serif; /* Applied new font */
    background: var(--bg-primary); /* Use new variable */
    color: var(--text-primary); /* Use new variable */
    overflow-x: hidden;
    transition: background 0.5s, color 0.5s;
    line-height: 1.6; /* Improved readability */
}

/* =====================
   Star Background (retained for dark mode)
===================== */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 80% 60%, #fff, transparent),
        radial-gradient(1px 1px at 50% 80%, #fff, transparent);
    opacity: var(--star-opacity);
    pointer-events: none;
    transition: opacity 0.5s;
    z-index: -1; /* Ensure stars are behind content */
}

/* =====================
   Header
===================== */
header {
    display: flex;
    flex-direction: column; /* Changed to column for better stacking on mobile */
    justify-content: center;
    align-items: center;
    gap: var(--header-gap); /* Use new variable */
    text-align: center;
    padding: var(--header-padding); /* Use new variable */
    position: relative; /* For absolute positioning of toggle */
}

header h1 {
    font-size: 3.2rem; /* More prominent */
    margin: 0;
    background: var(--primary-heading-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background 0.5s;
    letter-spacing: -0.04em; /* Tighter letter spacing for elegance */
}

#theme-toggle {
    position: absolute; /* Position in corner */
    top: 20px;
    right: 20px;
    padding: 8px 18px; /* Adjusted padding for text */
    font-size: 0.95rem; /* Adjusted font size for text */
    background: var(--theme-toggle-bg);
    color: var(--text-primary);
    border: 1px solid var(--card-border); /* Use card border for consistency */
    border-radius: 10px; /* Rectangular with rounded corners */
    cursor: pointer;
    /* Removed line-height: 1; as it's less relevant for text buttons */
    transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Subtle shadow */
    display: flex;
    align-items: center;
    justify-content: center;
}

#theme-toggle:hover {
    background: var(--theme-toggle-bg); /* Keep consistent on hover */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Slightly more pronounced shadow */
}

/* =====================
   Language Switcher
===================== */
#language-switcher {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 8px;
    z-index: 10; /* Ensure it's above other elements */
}

.lang-btn {
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--theme-toggle-bg);
    color: var(--text-secondary);
    border: 1px solid var(--card-border);
    border-radius: 15px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.lang-btn:hover {
    background: rgba(255,255,255,0.15);
    color: var(--text-primary);
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

body.light-mode .lang-btn:hover {
    background: rgba(0,0,0,0.08);
}

.lang-btn.active {
    background: var(--accent-color-2);
    color: #fff;
    border-color: var(--accent-color-2);
    box-shadow: 0 0 10px rgba(52, 211, 246, 0.4);
    font-weight: 700;
}

.lang-btn.active:hover {
    box-shadow: 0 0 15px rgba(52, 211, 246, 0.6);
}

/* =====================
   Country Filters
===================== */
#country-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0 20px;
}

.country-filter-btn {
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    background: var(--theme-toggle-bg);
    color: var(--text-secondary);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.country-filter-btn:hover {
    background: rgba(255,255,255,0.15);
    color: var(--text-primary);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

body.light-mode .country-filter-btn:hover {
    background: rgba(0,0,0,0.08);
}

.country-filter-btn.active {
    background: var(--accent-color-1);
    color: #fff;
    border-color: var(--accent-color-1);
    box-shadow: 0 0 15px rgba(107, 114, 238, 0.4);
    font-weight: 700;
}

.country-filter-btn.active:hover {
    box-shadow: 0 0 20px rgba(107, 114, 238, 0.6);
}

/* =====================
   AdSense Container
===================== */
.adsense-container {
    max-width: 1000px;
    margin: 40px auto; /* Centered with vertical spacing */
    padding: 25px; /* Ample padding */
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: 0 0 30px var(--card-shadow);
    text-align: center;
    color: var(--subtle-text);
    font-size: 0.9rem;
    overflow: hidden; /* Ensure ad content doesn't overflow */
}

.adsense-placeholder {
    margin: 0;
    padding: 20px 0;
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 500;
}

/* =====================
   Button
===================== */
.action-area {
    text-align: center;
    margin: 40px 0;
}

#recommend-btn {
    padding: 20px 55px; /* Larger padding for a premium feel */
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-primary); /* Use text-primary for consistency */
    background: var(--button-bg-gradient);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 0 25px var(--button-shadow-1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.5s, color 0.3s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Subtle text shadow */
}

#recommend-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 45px var(--button-shadow-2);
}

/* =====================
   Result Area
===================== */
#result {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Force 3 columns on larger screens */
    gap: 28px; /* Increased gap */
}

/* =====================
   Stock Card
===================== */
.stock-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 25px; /* Slightly more rounded */
    padding: 32px; /* More generous padding */
    box-shadow: 0 0 45px var(--card-shadow); /* Deeper, more diffused shadow */
    animation: fadeUp 0.9s ease forwards;
    transition: background 0.5s, border 0.5s, box-shadow 0.5s, transform 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space out content */
    cursor: default; /* Not interactive, so default cursor */
}

.stock-card:hover {
    transform: translateY(-10px); /* Slightly more pronounced lift effect */
    box-shadow: 0 10px 50px var(--card-shadow); /* More pronounced shadow */
}

.market {
    font-size: 0.95rem; /* Slightly larger */
    color: var(--subtle-text);
    letter-spacing: 0.06em; /* Slightly increased letter spacing */
    font-weight: 600;
    margin-bottom: 10px; /* Increased margin */
    text-transform: uppercase; /* Uppercase for market */
    position: relative;
    padding-left: 30px; /* Increased padding */
}
.market::before {
    content: '📈'; /* Icon for market */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
}

.name {
    font-size: 1.8rem; /* Larger font size */
    font-weight: 700; /* Bolder */
    margin-top: 5px; /* Adjusted margin */
    background: var(--name-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.25; /* Improved line height */
}

.reason {
    margin-top: 20px; /* Adjusted margin */
    line-height: 1.8; /* Improved line height for readability */
    font-size: 1rem; /* Slightly larger font size */
    color: var(--card-text);
    flex-grow: 1; /* Allow reason to take available space */
    position: relative;
    padding-left: 30px; /* Increased padding */
}
.reason::before {
    content: '💡'; /* Icon for reason */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
}

.price-info {
    margin-top: 25px; /* Adjusted margin to provide spacing */
}

.previous-day-price {
    font-size: 0.95rem; /* Slightly smaller for previous day price */
    color: var(--subtle-text); /* More subtle color */
    position: relative;
    padding-left: 30px;
    margin-bottom: 5px; /* Small space between previous day price and target */
}

.previous-day-price::before {
    content: '📊'; /* Icon for previous day price */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
}

.target {
    font-size: 1.25rem; /* Larger font size */
    font-weight: bold;
    color: var(--accent-color-1); /* Use accent-color-1 for consistency and sophistication */
    position: relative;
    padding-left: 30px; /* Increased padding */
}
.target::before {
    content: '🎯'; /* Icon for target */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
}

/* =====================
   Footer
===================== */
footer {
    text-align: center;
    font-size: 0.85rem; /* Slightly larger */
    color: var(--footer-text);
    padding-bottom: 40px;
    margin-top: 40px;
}


/* =====================
   Animation
===================== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================
   Mobile Adjust
===================== */
@media (max-width: 768px) { /* Adjust for tablets */
    #result {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }
}

@media (max-width: 480px) {
    header {
        padding: 40px 15px 20px; /* Adjusted padding */
    }
    header h1 {
        font-size: 2.2rem; /* Adjusted font size */
    }
    #recommend-btn {
        width: 90%; /* Wider on mobile */
        max-width: none;
    }
    #result {
        grid-template-columns: repeat(1, 1fr); /* 1 column on mobile */
        padding: 0 15px; /* Adjusted padding */
    }
    .stock-card {
        padding: 20px; /* Adjusted padding */
    }
    #theme-toggle {
        top: 15px; /* Adjust for smaller screens */
        right: 15px;
    }
}