@import url('modern-master.css');

/* -- Ä÷¯ ÆÈ·¹Æ® (Çö´ëÀûÀÎ ´ÙÅ© Å׸¶·Î µ¿±âÈ­) -- */
:root {
    --background-color: #030303;
    --background-color2: #050505;
    --background-color3: #0a0a0a;

    --aurora-blue: var(--m-blue);
    --aurora-pink: var(--m-pink);

    --neumo-shadow-dark: rgba(0, 0, 0, 0.5);
    --neumo-shadow-light: rgba(255, 255, 255, 0.05);
    --primary-blue: var(--m-blue);
    --primary-blue-dark: #18116a;

    --text-color-dark: #ffffff;
    --text-color-light: var(--m-dim);
    --border-radius-main: var(--radius-xl);
    --transition-speed: 0.3s ease;

    --glass-bg: rgba(0, 0, 0, 0.65);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-blur: 20px;

    --shadow-elev-1: var(--shadow-liquid-out);
    --shadow-neumo-out: var(--shadow-liquid-out);
}

.glass-card,
.card,
.recommendation-app .card,
.recommendation-app .field-option-box,
.recommendation-app .media-option-box,
.recommendation-app .budget-option-box {
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-elev-1);
    color: var(--m-white);
}

/* °íÁ¤(¶Ç´Â ¹Ý°íÁ¤) ·¹À̾ƿôÀÇ ±Û¶ó½º °øÅë º£À̽º */
.glass-fixed,
.recommendation-app .result-area-wrapper {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--glass-border);
}


.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none
}

.circle {
    position: absolute;
    /* ¡å¡å¡å [¼öÁ¤] mix-blend-mode Ãß°¡·Î »ö»ó È¥ÇÕÀ» ÀÚ¿¬½º·´°Ô ¡å¡å¡å */
    mix-blend-mode: screen;
    /* screen ¶Ç´Â overlay Ãßõ */
    border-radius: 100%;
    /* ±âº»°ª */
    filter: blur(var(--aurora-blur));
    opacity: 0.9;
    will-change: transform;
}

.circle.blue {
    width: 80vmax;
    height: 60vmax;
    /* ¡å¡å¡å [¼öÁ¤] ±×¶óµ¥ÀÌ¼Ç ¹üÀ§¸¦ 50%·Î ÁÙ¿© °¡ÀåÀÚ¸®¸¦ ´õ ºÎµå·´°Ô ¡å¡å¡å */
    background: radial-gradient(circle, var(--aurora-blue) 0%, rgba(0, 34, 255, 0.001) 55%);
    /* ¡å¡å¡å [Ãß°¡] ¾Ö´Ï¸ÞÀ̼ǿ¡ border-radius Ãß°¡ ¡å¡å¡å */
    animation: aurora-blue-anim 20s ease-in-out infinite alternate;
}

.circle.pink {
    width: 60vmax;
    height: 80vmax;
    /* ¡å¡å¡å [¼öÁ¤] ±×¶óµ¥ÀÌ¼Ç ¹üÀ§¸¦ 50%·Î ÁÙ¿© °¡ÀåÀÚ¸®¸¦ ´õ ºÎµå·´°Ô ¡å¡å¡å */
    background: radial-gradient(circle, var(--aurora-pink) 0%, rgba(192, 0, 255, 0.001) 55%);
    /* ¡å¡å¡å [Ãß°¡] ¾Ö´Ï¸ÞÀ̼ǿ¡ border-radius Ãß°¡ ¡å¡å¡å */
    animation: aurora-pink-anim 4.5s ease-in-out infinite alternate;
    animation-delay: 20.5s;
}

@keyframes aurora-blue-anim {
    0% {
        transform: translate(5vw, -10vh) scale(1);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    33% {
        transform: translate(30vw, 30vh) scale(1.2);
        border-radius: 50% 50% 30% 70% / 60% 40% 80% 40%;
    }

    66% {
        transform: translate(-20vw, 70vh) scale(0.9);
        border-radius: 70% 30% 60% 40% / 50% 70% 40% 50%;
    }

    to {
        transform: translate(15vw, 5vh) scale(1.1);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
}

@keyframes aurora-pink-anim {
    0% {
        transform: translate(90vw, 80vh) scale(1.1);
        border-radius: 60% 40% 80% 40% / 50% 50% 30% 70%;
    }

    33% {
        transform: translate(40vw, 10vh) scale(1);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    66% {
        transform: translate(70vw, 60vh) scale(1.3);
        border-radius: 50% 50% 30% 70% / 60% 40% 80% 40%;
    }

    to {
        transform: translate(85vw, 75vh) scale(1.1);
        border-radius: 60% 40% 80% 40% / 50% 50% 30% 70%;
    }
}

.main-title {
    font-size: 2.2em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: .05em;
    color: #ffffff !important; /* ¼±¸íÇÑ È­ÀÌÆ®·Î ÅëÀÏ */
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important; /* ´Ü¼øÇÏ°í ¸íÈ®ÇÑ ±×¸²ÀÚ */
}

@keyframes shine-effect {
    0% {
        background-position: 200% center
    }

    to {
        background-position: -200% center
    }
}

/* --- ¡å¡å¡å ¸ÞÀÎ ÆäÀÌÁö ½ºÅ¸ÀÏ (½Å±Ô/¼öÁ¤) ¡å¡å¡å --- */
.home-content {
    width: 100%;
    max-width: 1200px; margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.typing-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 4.5em;
    font-size: 1.2em;
    color: var(--text-color-light);
    line-height: 1.6;
    margin-bottom: 40px
}

#typedText {
    border-right: 2px solid transparent
}

#typedText.typing {
    animation: none;
    border-right-color: var(--text-color-dark)
}

#typedText:not(.typing) {
    animation: blinkCursor .75s infinite step-end
}

@keyframes blinkCursor {

    0%,
    to {
        border-color: transparent
    }

    50% {
        border-color: var(--text-color-dark)
    }
}

.static-suffix {
    font-weight: 700;
    color: var(--m-blue); /* ºí·ç Åæ À¯Áö */
}

.intro-statement,
.marketing-highlight-statement {
    text-align: center
}

.intro-statement {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-color-light);
    line-height: 1.6;
    margin: 30px 0 25px
}

.marketing-highlight-statement {
    font-size: 1.3em;
    font-weight: 700;
    color: #e0f2ff; /* ¿¬ÇÑ ºí·ç È­ÀÌÆ® */
    line-height: 1.7;
    margin-bottom: 40px;
    padding: 30px 40px; /* ÀÔü ¹Ú½º¿¡ ¸Â°Ô ¿©À¯ ÀÖ´Â Æеù */
    /* ºí·¢ ¹è°æ¿ë ³×¿Â ±Û·Î¿ì ¼¨µµ¿ì */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.9);
    /* ¹è°æ, º¸´õ, ¼¨µµ¿ì´Â .neu-card Ŭ·¡½º¿¡¼­ ´ã´ç */
}

.home-category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 60px;
    width: 100%;
}

@media (min-width: 768px) {
    .home-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .home-category-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 1. Ä«Å×°í¸® ¼½¼Ç: neu-card ½ºÅ¸ÀÏÀ» ±âº»À¸·Î »ç¿ëÇϵµ·Ï ¿À¹ö¶óÀ̵å Á¦°Å */
.category-section {
    /* ¹è°æ, º¸´õ, ¼¨µµ¿ì´Â modern-master.cssÀÇ .neu-card¿¡¼­ ´ã´çÇÔ */
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 450px;
    /* ¾Ö´Ï¸ÞÀÌ¼Ç ¼Ó¼º: transform, filter, opacity¸¦ ºÎµå·´°Ô Àüȯ */
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.4s ease,
        opacity 0.4s ease,
        min-height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, filter, opacity;
    /* ºê¶ó¿ìÀú ·»´õ¸µ ÃÖÀûÈ­ */
}

/* ¸¶¿ì½º ¿Ã·ÈÀ» ¶§ Ä¿Áö´Â ¹Ú½º */
.category-section.hover-active {
    transform: scale(1.1);
    /* 1.3¹è´Â ³Ê¹« Å©¹Ç·Î 1.1¹è·Î Á¶Á¤ */
    z-index: 10;
    opacity: 1;
    filter: none;
}

/* ¸¶¿ì½º ¿Ã·ÈÀ» ¶§ ÀÛ¾ÆÁö´Â ´Ù¸¥ ¹Ú½ºµé */
.category-section.hover-inactive {
    transform: scale(0.9);
    /* 0.8¹è´Â ³Ê¹« ÀÛÀ¸¹Ç·Î 0.9¹è·Î Á¶Á¤ */
    opacity: 0.6;
    filter: blur(1px);
    /* È帲 È¿°ú·Î ÁýÁßµµ Çâ»ó */
}

.category-section.is-expanded-parent {
    min-height: 650px;
}

.category-title {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--m-blue); /* Å׸¶ Ä÷¯ ºí·ç Àû¿ë */
    text-align: center;
    margin-bottom: 15px;
    /* °í´ëºñ ºí·ç ±Û·Î¿ì ¼¨µµ¿ì */
    text-shadow: 0 0 12px rgba(135, 206, 250, 0.6), 0 2px 3px rgba(0, 0, 0, 1);
}


/* °³º° ¸µÅ© ¹Ú½º ½ºÅ¸ÀÏ (À¯¸® Á¶°¢ ½ºÅ¸ÀÏ·Î °íµµÈ­) */
.nav-button {
    text-decoration: none;
    color: var(--m-white); /* ÅؽºÆ® Èò»öÀ¸·Î °íÁ¤ */
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    /* ¹öÆ° ÅؽºÆ® °¡µ¶¼º Çâ»ó */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    text-align: center;
    /* transform ¼Ó¼ºÀº À¯ÁöÇϵÇ, rotate³ª translateZ´Â Á¦°Å */
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s ease,
        height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    overflow: hidden;
    position: relative;
    /* ÅøÆÁ °øÅë ±âÁØÁ¡ */
}


.nav-button:hover {
    transform: scale(1.1);
    /* ¹öÆ° ÀÚüµµ »ì¦ Ä¿Áö´Â È¿°ú */
    background-color: linear-gradient(to bottom right, var(--background-color2)50%, var(--background-color3));
    color: #8400ff;
    /* nav-button hover È¿°ú¿Í ÁßøµÉ ¼ö ÀÖÀ¸´Ï transform µîÀº À¯Áö */
    box-shadow: inset 10px 10px 15px var(#b8daff), -8px -8px 15px var(#000000);
}


.nav-button.expanded {
    transform: scale(1.1);
    width: 100%;
    /* ºÎ¸ð(.category-section) ³Êºñ¿¡ ²Ë Â÷µµ·Ï ¸í½Ã */

    height: auto;
    min-height: 200px;
    flex-direction: column;
    justify-content: flex-start;
    padding: 25px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ÀÔ·Â ±×·ì °£°Ý À¯Áö */
.input-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-button-icon,
.nav-button-text-content {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.nav-button.expanded .nav-button-icon,
.nav-button.expanded .nav-button-text-content {
    opacity: 1;
}

.nav-button-icon {
    font-size: 2em;
    color: var(--primary-blue-dark);
    margin-bottom: 15px;
    display: block;
}

.nav-button-text-content {

    width: 100%;
}




.nav-button-description {
    font-size: 0.9em;
    color: var(--text-color-light);
    line-height: 1.5;
    white-space: normal;
    /* ??? [°¡Àå Áß¿ä] ÀÚµ¿ ÁٹٲÞÀ» °­Á¦ÇÕ´Ï´Ù! ??? */
    text-align: center;
    /* ? [Ãß°¡] ¿©·¯ ÁÙÀÏ °æ¿ì º¸±â ÁÁ°Ô Áß¾Ó Á¤·ÄÇÕ´Ï´Ù. */
    word-break: keep-all;
    /* ? [Ãß°¡] ÇÑ±Û ´Ü¾î°¡ À߸®Áö ¾Ê°Ô ÇÕ´Ï´Ù. */
    margin: 0;
}


.nav-button-title-expanded {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.admin-only-button {
    background: rgba(90, 90, 90, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* -- ±âº» HTML/Body ½ºÅ¸ÀÏ (µÎ ¾Û¿¡ °øÅë Àû¿ë) -- */
body {
    font-family: 'GmarketSans', sans-serif;
    /* ¹è°æ À̹ÌÁö¿Í ±×¶óµ¥ÀÌ¼Ç Á¶ÇÕ: ·Î°í´Â À¯Áö, ±×¶óµ¥À̼ÇÀº ¿ø·¡ »ö»óÀ¸·Î º¹¿ø */
    background-image:
        url('images/majung-logo.png'),
        /* ·Î°í À̹ÌÁö (À¯Áö) */

        linear-gradient(to bottom right, var(--background-color2)50%, var(--background-color3));
    /* ¹è°æ ±×¶óµ¥ÀÌ¼Ç ¿ø·¡ »ö»óÀ¸·Î º¹¿ø */
    /* ·Î°í À§Ä¡: ¿ìÃø ÇÏ´Ü, ±×¶óµ¥ÀÌ¼Ç À§Ä¡: Àüü (0 0) */
    /* ±× ¾Æ·¡¿¡ ±ò¸± ¸ÞÀÎ ¹è°æ À̹ÌÁö */
    background-position:
        right bottom,
        0 0,
        0 0;
    /* ·Î°í Å©±â: È­¸é ³ôÀÌÀÇ 50% (³Êºñ ÀÚµ¿), ±×¶óµ¥ÀÌ¼Ç Å©±â: Àüü */
    background-size:
        auto 90vh,
        /* ·Î°í Å©±â: ³ôÀÌ 90vh, ³Êºñ ÀÚµ¿ (º¸Åë ÀÌ ¼ø¼­·Î »ç¿ëÇÕ´Ï´Ù) */
        cover,
        /* ¸ÞÀÎ ¹è°æ: È­¸é Àüü¸¦ µ¤µµ·Ï cover·Î ¼³Á¤ÇÏ´Â °ÍÀÌ ÀϹÝÀûÀÔ´Ï´Ù. */
        100% 100%;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;
    /* ¹è°æÀÌ ½ºÅ©·ÑµÉ ¶§ °íÁ¤µÇµµ·Ï ¼³Á¤ */
    background-attachment:
        fixed,
        /* 1. ·Î°í´Â È­¸é¿¡ °íÁ¤ */
        scroll,
        /* 2. bg2.jpg´Â ÆäÀÌÁö ½ºÅ©·ÑÀ» µû¶ó ¿òÁ÷ÀÓ */
        fixed;
    /* 3. ±×¶óµ¥À̼ÇÀº È­¸é¿¡ °íÁ¤ */

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* ÄÁÅÙÃ÷ »ó´Ü Á¤·Ä ¹× ÀÚ½Ä ¿ä¼Ò 100% ³Êºñ È®º¸ */
    min-height: 100vh;
    /* ÃÖ¼Ò È­¸é ³ôÀÌ */
    margin: 0;
    padding: 0;
    /* paddingÀº °¢ ¾ÛÀÇ ·¡ÆÛ¿¡¼­ °ü¸® */
    box-sizing: border-box;
    /* Æеù, º¸´õ°¡ ³Êºñ/³ôÀÌ¿¡ Æ÷ÇԵǵµ·Ï */
    color: var(--text-color-dark);
    /* ±âº» ÅؽºÆ® »ö»ó */
    padding-top: 70px;
    /* °íÁ¤ ¸Þ´º¹Ù ³ôÀ̸¸Å­ °ø°£ È®º¸ */
}

/* --- »ó´Ü °íÁ¤ ¸Þ´º¹Ù ½ºÅ¸ÀÏ (»õ·Î Ãß°¡) --- */
.global-header {
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-elev-1-soft);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    /* ´Ù¸¥ ¸ðµç ÄÜÅÙÃ÷ À§¿¡ ¿Àµµ·Ï */
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    /* ³×ºñ°ÔÀ̼ÇÀ» Áß¾Ó¿¡ Á¤·Ä */
    align-items: center;
}

.main-nav {
    display: flex;
    gap: 20px;
    max-width: 900px;
    /* º»¹® ³»¿ë°ú À¯»çÇÏ°Ô ÃÖ´ë ³Êºñ ¼³Á¤ */
    width: 100%;
    justify-content: flex-start;
    /* ¸µÅ©µéÀ» ¿ÞÂÊ¿¡ Á¤·Ä */
    flex-wrap: wrap;
    /* NEW: ¹öÆ°µéÀÌ È­¸é¿¡ ¸Â°Ô ´ÙÀ½ ÁÙ·Î ³Ñ¾î°¡µµ·Ï ÇÔ */
}

.nav-button {
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-color-dark);
    font-weight: 700;
    background-color: var(--background-color);
    box-shadow: 5px 5px 10px var(--neumo-shadow-dark), -5px -5px 10px var(--neumo-shadow-light);
    /* º¼·ÏÇÑ µðÀÚÀÎ */
    transition: all var(--transition-speed);
    white-space: nowrap;
    /* ¹öÆ° ÅؽºÆ® ÁÙ¹Ù²Þ ¹æÁö */
    flex-shrink: 1;
    /* NEW: °ø°£ÀÌ ºÎÁ·ÇÏ¸é ¹öÆ° ³Êºñ¸¦ ÁÙÀÏ ¼ö ÀÖµµ·Ï ÇÔ */
    min-width: 0;
    /* NEW: ³Ê¹« ÀÛ¾ÆÁöÁö ¾Êµµ·Ï ÃÖ¼Ò ³Êºñ¸¦ 0À¸·Î ¼³Á¤ÇÏ¿© ÇÊ¿ä ½Ã ÃÖ´ëÇÑ ÁÙ¾îµéµµ·Ï ÇÔ */
    margin: 5px;


}



.nav-button:active,
.nav-button.active {
    /* 'active' Ŭ·¡½º´Â ÇöÀç ÆäÀÌÁö¸¦ ³ªÅ¸³¿ */
    transform: translateY(1px);
    box-shadow: inset 5px 5px 10px var(--selected-neumo-shadow-dark), inset -5px -5px 10px var(--selected-neumo-shadow-light);
    background-color: var(--primary-blue-dark);
    color: white;
}

/* --- ¸ÞÀΠȨ ÆäÀÌÁö ½ºÅ¸ÀÏ (»õ·Î Ãß°¡) --- */
.home-content {
    text-align: center;
    padding: 40px 20px;
    max-width: 800px;
    width: 100%;
    margin: 50px auto 0;
    /* ¸Þ´º¹Ù ¾Æ·¡·Î ³»¸² */
}

.home-content h1 {
    font-size: 3em;
    color: var(--primary-blue-dark);
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.home-content p {
    font-size: 1.2em;
    color: var(--text-color-light);
    line-height: 1.6;
    margin-bottom: 40px;
}

.home-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
}

.home-links .nav-button {
    width: 250px;
    text-align: center;
    font-size: 1.2em;
}


/* --- 1. ¸¶ÄÉÆà ¸Åü Ãßõ °è»ê±â ½ºÅ¸ÀÏ (.recommendation-app ½ºÄÚÇÁ) --- */
.recommendation-app {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recommendation-app .main-calculator-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 80px;
    width: 100%;
    max-width: 1400px;
    /* Àüü ·¡ÆÛÀÇ ÃÖ´ë ³Êºñ */
    padding: 20px;
    box-sizing: border-box;
    padding-bottom: var(--sticky-footer-height);
    /* ǪÅÍ ³ôÀ̸¸Å­ ¹Ù´Ú ¿©¹é Ãß°¡ */
}

.recommendation-app .input-area-wrapper {
    flex: 1;
    min-width: 0;
    /* NEW: ºÎ¸ð°¡ Ãà¼ÒµÉ ¶§ ÀÌ ¿µ¿ªµµ À¯¿¬ÇÏ°Ô Ãà¼ÒµÉ ¼ö ÀÖµµ·Ï ÇÔ */
    max-width: 800px;
    /* Ä«µå¸¦ Æ÷ÇÔÇÏ´Â ·¡ÆÛÀÇ ÃÖ´ë ³Êºñ */
    width: 100%;
}

.recommendation-app .result-area-wrapper {
    position: fixed;
    /* È­¸é ÇÏ´Ü¿¡ °íÁ¤ */
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--sticky-footer-height);
    /* height·Î °íÁ¤ÇÏ¿© ǪÅÍ ³ôÀÌ °ü¸® */
    padding: 20px 30px;
    /* ³»ºÎ ¿©¹é */
    border-radius: var(--border-radius-main);

    transition: opacity var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    /* ¼¼·Î·Î Ç׸ñµé ½×À½ */
    justify-content: space-between;
    /* ¿ä¼Òµé °£ °£°Ý ºÐ¹è */
    align-items: center;
    /* ÀÚ½Ä result-content-container¸¦ °¡¿îµ¥ Á¤·Ä */
    padding: 0;
    /* ³»ºÎ result-content-container¿¡¼­ ÆеùÀ» °¡Áü */
    box-sizing: border-box;
    transition: all var(--transition-speed);
}

.recommendation-app .result-content-container {
    /* ǪÅÍ ³» ÄÜÅÙÃ÷ ¿µ¿ª (ÃÖ´ë ³Êºñ 800px Áß¾Ó Á¤·Ä) */
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    /* Áß¾Ó Á¤·Ä */
    display: flex;
    flex-direction: column;
    /* ³»ºÎ ¿ä¼Ò´Â ¼¼·Î·Î ½×ÀÓ */
    justify-content: space-between;
    /* ³»ºÎ ÄÜÅÙÃ÷ (°á°úÄ«µå, ¿øÇü, ǪÅ;׼Ç) »çÀÌ °ø°£ ºÐ¹è */
    align-items: center;
    /* ³»ºÎ ÄÜÅÙÃ÷ °¡¿îµ¥ Á¤·Ä (result-summary-section, footer-actions-container¸¦ °¡¿îµ¥ Á¤·Ä) */
    height: 100%;
    /* ºÎ¸ð result-area-wrapperÀÇ ³ôÀÌ »ó¼Ó */
    box-sizing: border-box;
    /* ÆеùÀÌ ³Êºñ¿¡ Æ÷ÇԵǵµ·Ï */
    position: relative;
    /* PC¿¡¼­ ¿øÇü ±×·¡ÇÁ absolute ¹èÄ¡ÀÇ ±âÁØ */
    padding: 5px 20px;
    /* ³»ºÎ »óÇÏÁÂ¿ì ¿©¹é - ÅؽºÆ® °ãħ ¹æÁö¸¦ À§ÇØ »óÇÏ ¿©¹é ÀçÁ¶Á¤ */
    min-height: 0;
    /* flex ÀÚ½ÄÀÌ ÁÙ¾îµé ¶§ ÄÁÅ×ÀÌ³Ê ÃÖ¼Ò ³ôÀÌ°¡ ¾øµµ·Ï */
}

.recommendation-app .result-summary-section {
    /* °á°ú ÅؽºÆ®¿Í ¿øÇü ±×·¡ÇÁ¸¦ ¹­´Â ÄÁÅ×ÀÌ³Ê */
    width: 100%;
    display: flex;
    flex-direction: column;
    /* ¸ð¹ÙÀÏ ±âº»: ¼¼·Î Á¤·Ä */
    justify-content: flex-start;
    align-items: flex-start;
    /* ÀÚ½Ä ¿ä¼ÒµéÀ» ¿ÞÂÊ Á¤·Ä (¸ð¹ÙÀÏ¿¡¼­´Â ¿øÇü ±×·¡ÇÁ°¡ ÀÚ±â È¥ÀÚ Áß¾ÓÁ¤·Ä µÊ) */
    flex-grow: 1;
    /* ³²Àº °ø°£ Â÷Áö */
    box-sizing: border-box;
    min-height: 0;
    /* flex ÀÚ½ÄÀÌ ÁÙ¾îµé ¶§ ÄÁÅ×ÀÌ³Ê ÃÖ¼Ò ³ôÀÌ°¡ ¾øµµ·Ï */
}

.recommendation-app .result-card {
    background-color: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(var(--glass-blur));
    /* ºí·¯ °­µµ ÃÖ´ë·Î */
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    width: 100%;
    /* result-summary-section ³»¿¡¼­ 100% */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* ÅؽºÆ®´Â ÁÂÃø Á¤·Ä */
    gap: 0px;
    /* °á°ú Ç׸ñµé °£ °£°ÝÀº result-item line-height ¹× marginÀ¸·Î Á¦¾î */
    margin: 0;
    text-align: left;
    flex-grow: 1;
    /* ³²Àº °ø°£ Â÷Áö (»ó´Ü¿¡ À§Ä¡) */
    min-height: 0;
    /* flex ÄÁÅ×À̳ʿ¡¼­ ³»¿ëÀÌ ³ÑÄ¡´Â °æ¿ì Ãà¼Ò¸¦ Çã¿ë */
}

.recommendation-app .result-card h2 {
    display: none;
}

.recommendation-app .result-card .icon-wrapper {
    display: none;
}

.recommendation-app .result-item {
    font-size: 0.7em;
    /* ÆùÆ® »çÀÌÁî Á¶Á¤ (°¡µ¶¼º À¯ÁöÇÏ¸ç °ãħ ¹æÁö) */
    line-height: 1.15;
    /* ÁÙ°£°Ý Á¶Á¤ */
    margin-bottom: 0;
    /* °¢ ¾ÆÀÌÅÛÀÇ ±âº» ÇÏ´Ü ¸¶Áø Á¦°Å */
    color: var(--text-color-light);
    font-weight: 500;
    white-space: nowrap;
    /* ÅؽºÆ® ÁÙ¹Ù²Þ ¹æÁö */
    min-height: 0;
    /* flex ÀÚ½ÄÀÌ ÁÙ¾îµé ¶§ ÃÖ¼Ò ³ôÀÌ ¾øµµ·Ï */
}

.recommendation-app .result-value {
    font-size: 0.8em;
    /* ÆùÆ® »çÀÌÁî Á¶Á¤ */
    font-weight: 700;
    color: var(--text-color-dark);
    margin-left: 4px;
    /* ¸¶Áø Á¶Á¤ */
}

.recommendation-app .result-item.highlight-total {
    font-size: 1.0em;
    /* ÃÑ°è ÆùÆ® »çÀÌÁî Á¶Á¤ */
    line-height: 1.15;
    font-weight: 700;
    color: var(--primary-blue-dark);
    margin-top: 1px;
    /* ¸¶Áø Á¶Á¤ */
    margin-bottom: 1px;
    /* ¸¶Áø Á¶Á¤ */
}

.recommendation-app .result-item.highlight-total .result-value.red-text {
    font-size: 1.0em;
    color: var(--alert-red);
}

.recommendation-app .calculator-title {
    font-size: 2.2em;
    font-weight: 700;
    color: var(--text-color-dark);
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

.recommendation-app .hidden {
    display: none !important;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity var(--transition-speed), transform var(--transition-speed);
}

.recommendation-app .card {
    position: relative;
    padding: 20px 30px;
    /* ³»ºÎ ¿©¹é */
    border-radius: var(--border-radius-main);

    transition: opacity var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
    transition: all var(--transition-speed);
    margin-bottom: 40px;
    /* °¢ Ä«µå ÇÏ´Ü °£°Ý */
    transition: opacity var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
    padding: 60px 30px 40px 30px;
    /* top, right, bottom, left */
    width: 100%;
    /* Ä«µå ³Êºñ */
    max-width: 800px;
    /* Ä«µåÀÇ ÃÖ´ë ³Êºñ (input-area-wrapperÀÇ max-width¿Í µ¿ÀÏÇÏ°Ô ¸ÂÃã) */
    box-sizing: border-box;
    /* ÆеùÀÌ ³Êºñ¿¡ Æ÷ÇԵǵµ·Ï ¸í½ÃÀûÀ¸·Î ÁöÁ¤ (´Ù¸¥ ¿ä¼Ò¿Í Ãæµ¹ ¹æÁö) */
    min-width: 0;
    /* NEW: Ä«µå°¡ ³»¿ëº¸´Ù ÀÛ¾ÆÁú ¼ö ÀÖµµ·Ï ÃÖ¼Ò ³Êºñ¸¦ 0À¸·Î ¼³Á¤ */

}


.recommendation-app .card:hover {
    transform: translateY(-2px);
    box-shadow:
        -10px -10px 20px var(--neumo-shadow-light),
        10px 10px 20px var(--neumo-shadow-dark);
}

/*
  [ÃÖÀûÈ­]
  @keyframes shake-horizontal¿Í @keyframes mixture-shake-horizontal´Â ³»¿ëÀÌ 100% µ¿ÀÏÇÏ¿©
  shake-horizontal·Î ÅëÇÕÇÏ°í, mixture-app¿¡¼­ À̸¦ »ç¿ëÇϵµ·Ï ¼öÁ¤Çß½À´Ï´Ù.
*/
@keyframes shake-horizontal {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-3px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(3px);
    }
}

.recommendation-app .card.shake-card {
    animation: shake-horizontal 0.4s ease-in-out forwards;
    transform-origin: center center;
    box-shadow:
        inset 0 0 10px rgba(255, 0, 0, 0.3),
        -7px -7px 10px var(--neumo-shadow-light),
        7px 7px 10px var(--neumo-shadow-dark);
}

/* "ºÐ¾ß¸¦ ¸ÕÀú ¼±ÅÃÇØÁÖ¼¼¿ä!" ¸Þ½ÃÁö ½ºÅ¸ÀÏ */
.recommendation-app .please-select-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 15px 25px;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--danger-red);
    /* °æ°í »ö»ó (»¡°£»ö °è¿­) */
    z-index: 100;
    /* Ä«µå ³»¿ë À§·Î ¿Àµµ·Ï */
    opacity: 0;
    /* ±âº»ÀûÀ¸·Î ¼û±è */
    pointer-events: none;
    /* ¸Þ½ÃÁö°¡ ¾Æ·¡ ¿ä¼ÒÀÇ Å¬¸¯À» ¹æÇØÇÏÁö ¾Êµµ·Ï */
    transition: opacity 0.3s ease-in-out;
    white-space: normal;
    /* ÅؽºÆ® ÁÙ¹Ù²Þ °¡´ÉÇϵµ·Ï ¼öÁ¤ */
    max-width: calc(100% - 40px);
    /* ºÎ¸ð Ä«µå ³Êºñ¿¡ ¸ÂÃç Áٹٲ޵ǵµ·Ï ¿©À¯ °ø°£ È®º¸ */
    text-align: center;
    box-shadow:
        -5px -5px 10px var(--neumo-shadow-light),
        5px 5px 10px var(--neumo-shadow-dark);
    backdrop-filter: blur(2px);
    /* ¼±ÅûçÇ×: ¹è°æ È帲 È¿°ú */
}

/* Èçµé¸± ¶§ ¸Þ½ÃÁö º¸ÀÌ°Ô Çϱâ */
.recommendation-app .card.shake-card .please-select-message {
    opacity: 1;
}

/* 
  [ÃÖÀûÈ­]
  .recommendation-app°ú .mixture-app¿¡¼­ »ç¿ëµÈ card-initial-wrapper¿Í card-initial Ŭ·¡½º´Â
  ³»¿ëÀÌ 100% µ¿ÀÏÇÏ¿© ¾Æ·¡¿Í °°ÀÌ Çϳª·Î ÅëÇÕÇß½À´Ï´Ù.
*/
.recommendation-app .card-initial-wrapper,
.mixture-app .card-initial-wrapper {
    position: absolute;
    top: -20px;
    left: 20px;
    z-index: 10;
}

.recommendation-app .card-initial,
.mixture-app .card-initial {
    font-size: 3.5em;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-blue-dark);
    filter: drop-shadow(2px 2px 5px rgba(13, 0, 88, 0.3));
}


/* card-contentÀÇ »ó´Ü ¿©¹é Á¦°Å (padding-topÀÌ ¿ªÇÒÀ» ´ë½Å) */
.recommendation-app .card-content {
    margin-top: 0;

}

/* h2 ½ºÅ¸ÀÏ */
.recommendation-app .card h2 {
    font-size: 1.2em;
    font-weight: 500;
    color: var(--text-color-dark);
    margin-top: 10px;
    margin-bottom: 15px;
    padding-left: 5px;
}

/* ==================== °øÅë ¾ÆÀÌÄÜ ½ºÅ¸ÀÏ (½ºÄÚÇÁ È®Àå) ==================== */
/* ¾ÆÀÌÄÜ ·¡ÆÛ */
.icon-wrapper {
    text-align: center;
    margin-bottom: 15px;
}

/* ƯÁ¤ GIF ¾ÆÀÌÄܵéÀÇ ±âº» ½ºÅ¸ÀÏ */
.good-gif,
.marketing-gif,
.work-gif,
.budget-gif,
.list1-gif,
.list2-gif,
.Success-gif {
    display: inline-block;
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-top: -5px;
    text-align: center;
}

/* ÀϹÝÀûÀÎ ¾ÆÀÌÄÜ ¿ä¼Ò ½ºÅ¸ÀÏ (ÆùÆ®¾î½æ µî, GIF¿¡´Â Á÷Á¢ÀûÀ¸·Î Å« ¿µÇâ ¾øÀ½) */
.icon {
    font-size: 2.5em;
    color: var(--text-color-light);
    opacity: 0.8;
}

/* ====================================================================== */

/* ¿É¼Ç ÄÁÅ×À̳ʵé */
.recommendation-app .field-options-container,
.recommendation-app .media-options-container,
.recommendation-app .budget-options-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* ±âº» Á¤·Ä */
    gap: 10px;
    margin-top: 20px;
}

/* ¿¹»ê ¿É¼Ç ÄÁÅ×À̳ʴ ¸ð¹ÙÀÏ¿¡¼­ 2ÁÙ Á¤·ÄÀ» À§ÇØ space-around »ç¿ë */
.recommendation-app .budget-options-container {
    justify-content: space-around;
}


/* ¿É¼Ç ¹Ú½ºµé - flex ¼Ó¼º ¼öÁ¤ ¹× ³Êºñ ÀçÁ¤ÀÇ */
.recommendation-app .field-option-box,
.recommendation-app .media-option-box,
.recommendation-app .budget-option-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 15px;
    cursor: pointer;

    padding: 20px 30px;
    /* ³»ºÎ ¿©¹é */
    border-radius: var(--border-radius-main);

    transition: opacity var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
    flex-grow: 1;
    /* NEW: °ø°£ÀÌ ³²À¸¸é ä¿ì°í */
    flex-shrink: 1;
    /* NEW: °ø°£ÀÌ ºÎÁ·Çϸé Ãà¼ÒÇϵµ·Ï ÇÔ */
    flex-basis: calc(50% - 5px);
    /* NEW: ±âº» 2¿­ (ÃÑ 10pxÀÇ gapÀ» °í·ÁÇÑ calc) */
    max-width: 150px;
    /* °¢ ¿É¼Ç ¹Ú½ºÀÇ ÃÖ´ë ³Êºñ Á¦ÇÑ */
    height: 90px;
    box-sizing: border-box;
    text-align: center;
    min-width: 0;
    /* NEW: ¾ÆÀÌÅÛ ÀÚü°¡ ÁÙ¾îµé ¼ö ÀÖµµ·Ï ÃÖ¼Ò ³Êºñ 0À¸·Î ¼³Á¤ */
}

/* ¸Åü ¼±Åà ¿É¼ÇÀº 7°³À̹ǷΠ2¿­ÀÌ Àß ÀÛµ¿Çϵµ·Ï width ¸í½Ã */
.recommendation-app .media-option-box {
    flex-basis: calc(50% - 5px);
}

/* ¿¹»ê ¼±Åà ¿É¼ÇÀº 4°³À̹ǷΠ2¿­ÀÌ Àß ÀÛµ¿Çϵµ·Ï width ¸í½Ã */
.recommendation-app .budget-option-box {
    flex-basis: calc(50% - 5px);
}


.recommendation-app .field-option-box:hover:not(.selected-option),
.recommendation-app .media-option-box:hover:not(.selected-option),
.recommendation-app .budget-option-box:hover:not(.selected-option) {
    transform: translateY(1px);
    box-shadow:
        inset 3px 3px 6px var(--neumo-shadow-dark),
        inset -3px -3px 6px var(--neumo-shadow-light);
    background-color: var(--background-color);
}

.recommendation-app .field-option-box:active:not(.selected-option),
.recommendation-app .media-option-box:active:not(.selected-option),
.recommendation-app .budget-option-box:active:not(.selected-option) {
    transform: translateY(1px);
    box-shadow:
        inset 4px 4px 8px var(--neumo-shadow-dark),
        inset -4px -4px 8px var(--neumo-shadow-light);
    background-color: var(--background-color);
}

.recommendation-app .field-option-box.selected-option,
.recommendation-app .media-option-box.selected-option,
.recommendation-app .budget-option-box.selected-option {
    background-color: var(--primary-blue-dark);
    box-shadow:
        inset 5px 5px 10px var(--selected-neumo-shadow-dark),
        inset -5px -5px 10px var(--selected-neumo-shadow-light);
    transform: translateY(1px);
    color: white;
}

/* °³º° ¹Ú½º ³»ºÎ ¿ä¼Ò ½ºÅ¸ÀÏ Á¶Á¤ */
.recommendation-app .field-option-box span,
.recommendation-app .media-option-box span,
.recommendation-app .budget-option-box span {
    font-size: 1.0em;
    font-weight: 500;
    transition: color var(--transition-speed);
    color: var(--text-color-dark);
}

.recommendation-app .field-option-box.selected-option span,
.recommendation-app .media-option-box.selected-option span,
.recommendation-app .budget-option-box.selected-option span {
    color: white;
}

/* ==================== Ãßõ ¸ñ·Ï ·¹À̾ƿô ==================== */
.recommendation-app .recommendation-list {
    display: flex;
    flex-direction: column;
    /* ¸ð¹ÙÀÏ: ±âº» 1¿­ Á¤·Ä */
    flex-wrap: wrap;
    /* NEW: °¡·Î Á¤·Ä ½Ã ÇÊ¿ä */
    justify-content: flex-start;
    /* ¸ð¹ÙÀÏÀº ¿ÞÂÊ Á¤·Ä */
    gap: 15px;
    margin-top: 25px;
    padding-left: 5px;
    padding-right: 5px;
    /* ¸ð¹ÙÀÏ È­¸é ÁÂ¿ì ¿©¹é È®º¸ */
    box-sizing: border-box;
    /* ÆеùÀÌ ³Êºñ °è»ê¿¡ Æ÷ÇԵǵµ·Ï */
}

.recommendation-app .recommended-item {
    background-color: var(--background-color);
    border-radius: 15px;
    box-shadow:
        inset 4px 4px 8px var(--neumo-shadow-dark),
        inset -4px -4px 8px var(--neumo-shadow-light);
    padding: 15px 20px;
    transition: all var(--transition-speed);
    width: 100%;
    /* ¸ð¹ÙÀÏ: ±âº» Àüü ³Êºñ */
    box-sizing: border-box;
    /* Áß¿ä: flex ¾ÆÀÌÅÛ ³Êºñ °è»ê¿¡ Æеù/º¸´õ Æ÷ÇÔ */
    min-width: 0;
    /* NEW: Ç׸ñ ÀÚü°¡ ÁÙ¾îµé ¼ö ÀÖµµ·Ï ÃÖ¼Ò ³Êºñ 0À¸·Î ¼³Á¤ */
}

.recommendation-app .recommended-item:hover {
    box-shadow:
        inset 3px 3px 6px var(--neumo-shadow-dark),
        inset -3px -3px 6px var(--neumo-shadow-light);
    transform: scale(0.99);
}

.recommendation-app .recommended-item-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--primary-blue-dark);
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.3;
}

.recommendation-app .recommended-item-description {
    font-size: 0.9em;
    font-weight: 400;
    color: var(--text-color-dark);
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
}

/* ==================== ÁøÇà Ç¥½Ã (¿øÇü) ==================== */
/* ¸ð¹ÙÀÏ ±âº»: result-summary-sectionÀÇ È帧 ³»¿¡¼­ Áß¾Ó Á¤·Ä (Àý´ë À§Ä¡ ¾Æ´Ô) */
.recommendation-app .circular-progress {
    position: static;
    margin: 1px auto 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.recommendation-app .circular-chart {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.recommendation-app .circle-bg {
    stroke: var(--neumo-shadow-dark);
    stroke-width: 3.8;
    fill: none;
}

.recommendation-app .circle {
    stroke: var(--primary-blue-dark);
    stroke-width: 2.8;
    fill: none;
    transition: stroke-dasharray 0.7s ease-out;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

.recommendation-app .step-count {
    position: absolute;
    /* ¿ø ¾ÈÀ¸·Î Áß¾Ó Á¤·ÄÇϱâ À§ÇÑ ¼Ó¼º Ãß°¡ */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-weight: 700;
    font-size: 0.9em;
    color: var(--primary-blue-dark);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

/* ==================== ÇÏ´Ü ¾×¼Ç ¹öÆ°µé ¹× ÄÁÅ×ÀÌ³Ê ==================== */
.recommendation-app .footer-actions-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: auto;
    box-sizing: border-box;

}

.recommendation-app .disclaimer-text {
    width: 100%;
    text-align: center;
    font-size: 0.6em;
    line-height: 1.05;
    color: var(--text-color-light);
    font-style: italic;
    box-sizing: border-box;
    margin-bottom: 1px;
    padding: 0;
}

.recommendation-app .action-buttons {
    display: flex;
    gap: 4px;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

.recommendation-app .action-button {
    padding: 3px 8px;
    border-radius: 25px;
    background-color: var(--primary-blue-dark);
    box-shadow:
        inset 5px 5px 10px var(--selected-neumo-shadow-dark),
        inset -5px -5px 10px var(--selected-neumo-shadow-light);
    border: none;
    cursor: pointer;
    color: white;
    font-weight: 500;
    font-size: 0.65em;
    transition: all var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
    flex-grow: 1;
    max-width: var(--action-button-width);
    min-width: 0;
    /* NEW: ¹öÆ°µµ ÇÊ¿äÇϸé Ãà¼ÒµÉ ¼ö ÀÖµµ·Ï ÇÔ */
}

.recommendation-app .action-button:hover {
    box-shadow:
        inset 3px 3px 6px var(--selected-neumo-shadow-dark),
        inset -3px -3px 6px var(--selected-neumo-shadow-light);
    transform: translateY(1px);
}

.recommendation-app .action-button:active {
    box-shadow:
        inset 6px 6px 12px var(--selected-neumo-shadow-dark),
        inset -6px -6px 12px var(--selected-neumo-shadow-light);
    transform: translateY(2px);
}


/* ==================== ¹ÝÀÀÇü ¹Ìµð¾î Äõ¸® (¸¶ÄÉÆà °è»ê±â) ==================== */

@media (min-width: 480px) {

    /* NEW: ÀÛÀº ½º¸¶Æ®Æù¿¡¼­µµ 2¿­ ¹èÄ¡ °¡´ÉÇϵµ·Ï Ãß°¡ */
    .recommendation-app .field-option-box,
    .recommendation-app .media-option-box,
    .recommendation-app .budget-option-box {
        flex-basis: calc(50% - 5px);
        /* 2¿­ À¯Áö */
    }
}


@media (min-width: 600px) {
    .recommendation-app :root {
        --sticky-footer-height: 165px;
        --action-button-width: 150px;
    }

    .recommendation-app .calculator-title {
        font-size: 2.5em;
    }

    .recommendation-app .card-grid {
        gap: 30px;
    }

    .recommendation-app .card h2 {
        font-size: 1.3em;
    }

    .recommendation-app .card-initial {
        font-size: 4em;
    }


    /* ÅÂºí¸´: ºÐ¾ß/¸Åü´Â 3¿­, ¿¹»êÀº 2¿­ */
    .recommendation-app .field-options-container,
    .recommendation-app .media-options-container {
        gap: 20px;
    }

    .recommendation-app .field-option-box,
    .recommendation-app .media-option-box {
        flex-basis: calc(33.33% - 40px/3);
        /* 3¿­ ¹èÄ¡ (20px gap °í·Á) */
        min-width: 100px;
        max-width: 160px;
        height: 100px;
    }

    /* ¿¹»ê ¼±Åà (4°³) ÅÂºí¸´: 2¿­ À¯Áö */
    .recommendation-app .budget-options-container {
        gap: 20px;
        justify-content: space-around;
    }

    .recommendation-app .budget-option-box {
        flex-basis: calc(50% - 10px);
        /* 2¿­ À¯Áö (20px gap °í·Á) */
        max-width: 200px;
        height: 100px;
    }


    .recommendation-app .field-option-box span,
    .recommendation-app .media-option-box span,
    .recommendation-app .budget-option-box span {
        font-size: 1.1em;
    }

    .recommendation-app .result-item {
        font-size: 0.85em;
        line-height: 1.25;
    }

    .recommendation-app .result-value {
        font-size: 0.95em;
    }

    .recommendation-app .result-item.highlight-total {
        font-size: 1.15em;
        line-height: 1.25;
    }

    .recommendation-app .result-item.highlight-total .result-value.red-text {
        font-size: 1.0em;
    }


    .recommendation-app .disclaimer-text {
        font-size: 0.75em;
        line-height: 1.2;
        text-align: center;
        margin-bottom: 0;
    }

    /* result-summary-section ÅÂºí¸´ºÎÅÍ´Â °¡·Î ¹è¿­ */
    .recommendation-app .result-summary-section {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        flex-shrink: 0;
        flex-grow: 0;
        width: 100%;
    }

    .recommendation-app .result-card {
        flex-grow: 1;
        padding-right: 10px;
        min-height: auto;
        height: 100%;
        justify-content: center;
        gap: 2px;
    }

    /* ¿øÇü ÁøÇà¹Ù (ÅÂºí¸´ ÀÌ»ó: result-summary-section ³»¿¡¼­ Á¤Àû À§Ä¡) */
    .recommendation-app .circular-progress {
        position: static;
        margin: 0;
        flex-shrink: 0;
        width: 45px;
        height: 45px;
    }

    .recommendation-app .step-count {
        font-size: 1.3em;
    }

    /* ÇÏ´Ü ÇªÅÍ ¾×¼Ç ¹öÆ° ÄÁÅ×ÀÌ³Ê (ÅÂºí¸´ ÀÌ»ó: °¡·Î ¹è¿­) */
    .recommendation-app .footer-actions-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        padding-top: 10px;
        padding-bottom: 10px;
        gap: 15px;
    }

    .recommendation-app .action-buttons {
        width: auto;
        justify-content: flex-end;
    }

    .recommendation-app .action-button {
        flex-grow: 0;
        width: auto;
        padding: 8px 16px;
        font-size: 0.9em;
        gap: 6px;
    }

    /* Ãßõ ¸ñ·Ï 2¿­ Á¤·Ä */
    .recommendation-app .recommendation-list {
        flex-direction: row;
        /* °¡·Î Á¤·Ä·Î º¯°æ */
        flex-wrap: wrap;
        /* ¿©·¯ ÁÙ·Î °¨½ÎÁöµµ·Ï Çã¿ë */
        justify-content: space-between;
        /* Ç׸ñµé »çÀÌ¿¡ °ø°£À» ±ÕµîÇÏ°Ô ºÐ¹è */
        gap: 20px;
        /* Ç׸ñ °£ÀÇ °¡·Î/¼¼·Î °£°Ý */
        padding-left: 0;
        /* ±âÁ¸ ¿ÞÂÊ Æеù Á¦°ÅÇÏ¿© Á¤È®ÇÑ ³Êºñ °è»ê */
        padding-right: 0;
        /* ±âÁ¸ ¿À¸¥ÂÊ Æеù Á¦°ÅÇÏ¿© Á¤È®ÇÑ ³Êºñ °è»ê */
    }

    .recommendation-app .recommended-item {
        flex: 1 1 calc(50% - 10px);
        /* 50%¿¡¼­ gap Àý¹Ý(20px/2 = 10px)À» »©¼­ 2¿­ ¹èÄ¡ */
        max-width: calc(50% - 10px);
        /* Ç׸ñÀÌ ³Ê¹« Ä¿ÁöÁö ¾Êµµ·Ï ÃÖ´ë ³Êºñ Á¦ÇÑ */
    }
}

@media (min-width: 992px) {
    .recommendation-app :root {
        --sticky-footer-height: 185px;
        --action-button-width: 160px;
    }

    .recommendation-app body {
        align-items: center;
    }

    .recommendation-app .main-calculator-wrapper {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 20px;
        min-height: calc(100vh - 80px - var(--sticky-footer-height));
        padding-bottom: 40px;
        gap: 80px;
    }

    .recommendation-app .result-card {
        gap: 8px;
    }

    /* PC: ºÐ¾ß/¸Åü´Â 3¿­, ¿¹»êÀº 4¿­ */
    .recommendation-app .field-options-container,
    .recommendation-app .media-options-container {
        gap: 30px;
    }

    .recommendation-app .field-option-box,
    .recommendation-app .media-option-box {
        flex-basis: 160px;
        /* PC¿¡¼­´Â °íÁ¤ ³Êºñ¸¦ ÁÖ°í flex-grow/shrink·Î °ø°£ Á¶Àý */
        height: 110px;
    }

    /* PC: ¿¹»êÀº 4¿­ Á¤·Ä */
    .recommendation-app .budget-options-container {
        gap: 30px;
        justify-content: center;
    }

    .recommendation-app .budget-option-box {
        flex-basis: calc(25% - 22.5px);
        /* 4¿­ (30px gap °í·Á) */
        max-width: 180px;
        height: 110px;
    }

    .recommendation-app .field-option-box span,
    .recommendation-app .media-option-box span,
    .recommendation-app .budget-option-box span {
        font-size: 1.2em;
    }


    .recommendation-app .calculator-title {
        font-size: 3em;
        margin-bottom: 50px;
    }

    .recommendation-app .card {
        padding: 80px 30px 50px 30px;
        margin-bottom: 60px;
    }

    .recommendation-app .card-initial {
        font-size: 4.5em;
    }

    .recommendation-app .disclaimer-text {
        font-size: 0.85em;
        line-height: 1.3;
    }

    /* ¿øÇü ÁøÇà¹Ù (PC¿¡¼­ Àý´ë À§Ä¡ - À̹ÌÁö¿¡ ¸ÂÃã) */
    .recommendation-app .circular-progress {
        position: absolute;
        top: 15px;
        right: 20px;
        width: 50px;
        height: 50px;
        margin: 0;
    }

    .recommendation-app .step-count {
        font-size: 1.5em;
    }

    .recommendation-app .footer-actions-container {
        padding-bottom: 20px;
    }

    .recommendation-app .action-button {
        font-size: 1.0em;
    }

    /* PC¿¡¼­µµ Ãßõ ¸ñ·Ï 2¿­ Á¤·Ä À¯Áö */
    .recommendation-app .recommendation-list {
        gap: 30px;
        /* PC¿¡¼­´Â Á» ´õ ³ÐÀº °£°Ý */
    }

    .recommendation-app .recommended-item {
        flex: 1 1 calc(50% - 15px);
        /* 50%¿¡¼­ gap Àý¹Ý(30px/2 = 15px)À» »©¼­ 2¿­ À¯Áö */
        max-width: calc(50% - 15px);
    }
}


/* --- 2. Å°¿öµå Á¶Çձ⠽ºÅ¸ÀÏ (.mixture-app ½ºÄÚÇÁ) --- */
.mixture-app {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    /* ¸ÞÀÎ ·¡ÆÛ Æеù */
}

/* -- ¸ÞÀÎ ÄÁÅ×ÀÌ³Ê ·¡ÆÛ (¸ðµç Ä«µåµéÀ» ¼öÁ÷À¸·Î ´ãÀ½) -- */
.mixture-app .main-container-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 800px;
    /* Ãßõ±â Ä«µå max-width¿¡ ¸ÂÃç ÅëÀÏ */
    padding: 0;
    box-sizing: border-box;
}

/* 
  [ÃÖÀûÈ­]
  .mixture-app .main-title¿Í .media-converter-app .main-titleÀº ³»¿ëÀÌ 100% µ¿ÀÏÇÏ¿©
  ¾Æ·¡¿Í °°ÀÌ Çϳª·Î ÅëÇÕÇß½À´Ï´Ù.
*/
.mixture-app .main-title,
.media-converter-app .main-title {
    font-size: 2.2em;
    font-weight: 700;
    color: var(--text-color-dark);
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}


/* -- Ä«µå °øÅë ½ºÅ¸ÀÏ (¿À¸ñÇÑ µðÀÚÀÎ) -- */
.mixture-app .card {
    position: relative;
    border-radius: var(--border-radius-main);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    /* ºí·¯ °­µµ ÃÖ´ë·Î */
    box-shadow:
        inset 7px 7px 10px var(--neumo-shadow-dark),
        inset -7px -7px 10px var(--neumo-shadow-light);
    transition: opacity var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
    padding: 60px 30px 40px 30px;
    box-sizing: border-box;
    width: 100%;
    max-width: 800px;
    /* 'A' ¹Ú½º(Ä«µå) Æø ÅëÀÏ */
    min-width: 0;
    /* NEW: Ä«µå°¡ ³»¿ëº¸´Ù ÀÛ¾ÆÁú ¼ö ÀÖµµ·Ï ÃÖ¼Ò ³Êºñ¸¦ 0À¸·Î ¼³Á¤ */

    /* ÆäÀÌÁö ·Îµå ½Ã Ä«µå µîÀå ¾Ö´Ï¸ÞÀÌ¼Ç Ãʱ⠻óÅ */
    opacity: 0;
    transform: translateY(20px);
}

/* ÆäÀÌÁö ·Îµå ½Ã Ä«µå µîÀå ¾Ö´Ï¸ÞÀÌ¼Ç ÃÖÁ¾ »óÅ */
.mixture-app .card.show {
    opacity: 1;
    transform: translateY(0);
}

.mixture-app .card:hover {
    transform: translateY(0);
    box-shadow:
        inset 4px 4px 8px var(--neumo-shadow-dark),
        inset -4px -4px 8px var(--neumo-shadow-light);
}

/* "Èçµé¸®´Â" Ä«µå °æ°í ¸Þ½ÃÁö */
.mixture-app .card.shake-card {
    animation: shake-horizontal 0.4s ease-in-out forwards;
    /* ÅëÇÕµÈ ¾Ö´Ï¸ÞÀÌ¼Ç À̸§ »ç¿ë */
    transform-origin: center center;
    box-shadow:
        inset 0 0 10px rgba(255, 0, 0, 0.3),
        var(--shadow-neumo-in);
}

.mixture-app .please-select-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(229, 231, 243, 0.9);
    border-radius: 10px;
    padding: 15px 25px;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--danger-red);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    white-space: normal;
    /* ÅؽºÆ® ÁÙ¹Ù²Þ °¡´ÉÇϵµ·Ï ¼öÁ¤ */
    max-width: calc(100% - 40px);
    /* ºÎ¸ð Ä«µå ³Êºñ¿¡ ¸ÂÃç Áٹٲ޵ǵµ·Ï ¿©À¯ °ø°£ È®º¸ */
    text-align: center;
    box-shadow: var(--shadow-elev-1-soft), -5px -5px 10px rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
}

.mixture-app .card.shake-card .please-select-message {
    opacity: 1;
}

/* -- Ä«µå Á¦¸ñ A,B,C, Btn (º¼·ÏÇÑ µðÀÚÀÎ) -- */
/* .card-initial-wrapper, .card-initial Àº »ó´Ü recommendation-app ºÎºÐ¿¡¼­ ÅëÇÕ Á¤ÀÇµÊ */

.mixture-app .card-content {
    margin-top: 0;
    padding-left: 0;
}

.mixture-app .card-content h2 {
    font-size: 1.2em;
    font-weight: 500;
    color: var(--text-color-dark);
    margin-top: 10px;
    margin-bottom: 15px;
    padding-left: 0;
}

.mixture-app .section-description {
    font-size: 0.9em;
    color: var(--text-color-light);
    margin-bottom: 20px;
    line-height: 1.4;
    text-align: left;
}

/* -- A ¹Ú½º: Ä«Å×°í¸® ÀÔ·Â ¿µ¿ª (`#categoryInputsContainer`) -- */
.mixture-app .input-sections-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;

    margin-bottom: 20px;
    border: none;
    border-radius: 10px;
    padding: 15px;
    background-color: var(--background-color);
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    min-width: 0;
    /* NEW: ÄÁÅ×ÀÌ³Ê ÀÚüµµ Ãà¼ÒµÉ ¼ö ÀÖµµ·Ï */
}

.mixture-app .input-group {
    flex-grow: 1;
    /* NEW: °ø°£ÀÌ ³²À¸¸é ä¿ì°í */
    flex-shrink: 1;
    /* NEW: °ø°£ÀÌ ºÎÁ·Çϸé Ãà¼ÒÇϵµ·Ï ÇÔ */
    flex-basis: 100%;
    /* NEW: ±âº»Àº 1¿­·Î ½ÃÀÛ (ÀÛÀº ¸ð¹ÙÀÏ È­¸é ´ëÀÀ) */
    /* min-width: 280px;  ÀÌÀü ¹®Á¦ÀÇ ¿øÀÎÀ̾ú´ø °íÁ¤ min-width »èÁ¦µÊ */
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 0;
}

/* ´ÜÀÏ input-groupÀÌ ÀÖÀ» ¶§ Àüü ³Êºñ¸¦ »ç¿ëÇϵµ·Ï */
.mixture-app .input-sections-container:has(> .input-group:only-child) .input-group {
    flex-basis: 100%;
}

.mixture-app .input-group label {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text-color-dark);
    font-size: 0.9em;
}

.mixture-app .input-group textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    min-height: 100px;
    resize: vertical;
    transition: all var(--transition-speed);
    background-color: var(--background-color);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    color: var(--text-color-dark);
    box-sizing: border-box;
    min-width: 0;
    /* NEW: ÅؽºÆ®¿¡¾î¸®¾î ÀÚüµµ Ãà¼ÒµÉ ¼ö ÀÖµµ·Ï ÇÔ */
}

.mixture-app .input-group textarea:focus {
    outline: none;
    box-shadow: inset 2px 2px 5px var(--selected-neumo-shadow-dark), inset -2px -2px 5px var(--selected-neumo-shadow-light),
        var(--focus-ring);
}

/* -- Ä«Å×°í¸® 'X' ¹Ú½º (º¼·ÏÇÑ µðÀÚÀÎÀ¸·Î °­Á¶) -- */
.mixture-app .remove-category-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--danger-bg);
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
    z-index: 1;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.9);
}

.mixture-app .remove-category-btn:hover {
    background-color: var(--danger-bg-hover);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4), -4px -4px 10px rgba(255, 255, 255, 1);
}

.mixture-app .remove-category-btn:disabled {
    background-color: var(--disabled-gray);
    cursor: not-allowed;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), -1px -1px 2px rgba(255, 255, 255, 0.3);
    transform: none;
}

.mixture-app .category-actions {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

/* Å°¿öµå Á¶ÇÕ±â ÀÏ¹Ý ¹öÆ° (.action-button) */
.mixture-app .action-button {
    padding: 15px 30px;
    font-size: 1.1em;
    font-weight: 700;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all var(--transition-speed);
    background-color: var(--background-color);
    /* ±âº» ¹è°æ»ö: Èò»ö (³×¿À¸ðÇÇÁò º£À̽º) */
    color: var(--text-color-dark);
    /* ±âº» ±ÛÀÚ»ö: ³²»ö */
    box-shadow: 5px 5px 10px var(--neumo-shadow-dark), -5px -5px 10px var(--neumo-shadow-light);
    /* º¼·ÏÇÑ È¿°ú */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 0;
    /* NEW: ¹öÆ°µµ ÇÊ¿äÇϸé Ãà¼ÒµÉ ¼ö ÀÖµµ·Ï ÇÔ */
}

.mixture-app .action-button:hover {
    transform: translateY(1px);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    /* ¿À¸ñÇÑ È¿°ú */
    background-color: var(--background-color);
    /* È£¹ö ½Ã ¹è°æ»ö À¯Áö */
    color: var(--text-color-dark);
    /* È£¹ö ½Ã ±ÛÀÚ»ö À¯Áö */
}

.mixture-app .action-button:active {
    transform: translateY(1px);
    /* nav-button:active¿Í µ¿ÀÏÇÏ°Ô 1px·Î À̵¿ °Å¸® Á¶Á¤ */
    box-shadow: inset 5px 5px 10px var(--selected-neumo-shadow-dark), inset -5px -5px 10px var(--selected-neumo-shadow-light);
    /* Ŭ¸¯ ½Ã ¹è°æ »ö»ó¿¡ ¸Â´Â Àμ ȿ°ú */
    background-color: var(--primary-blue-dark);
    /* Ŭ¸¯ ½Ã ¹è°æ»ö ³²»öÀ¸·Î º¯°æ */
    color: white;
    /* Ŭ¸¯ ½Ã ±ÛÀÚ»ö Èò»öÀ¸·Î º¯°æ */
}

.mixture-app .action-button:disabled {
    background-color: var(--background-color);
    color: var(--text-color-light);
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    transform: none;
    cursor: not-allowed;
}


/* -- B ¹Ú½º: Á¶ÇÕ ¼ø¼­ ¼±Åà ¿µ¿ª (`#orderCheckboxesContainer`) -- */
.mixture-app .order-checkboxes-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;

    max-height: 250px;
    overflow-y: auto;
    padding: 15px;
    border: none;
    border-radius: 10px;
    background-color: var(--background-color);
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    min-width: 0;
    /* NEW: ÄÁÅ×ÀÌ³Ê ÀÚüµµ Ãà¼ÒµÉ ¼ö ÀÖµµ·Ï */
}

/* »õ·Î¿î ±×·ì Á¦¸ñ (¿¹: "1°³ Á¶ÇÕ") */
.mixture-app .order-group-heading {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--primary-blue-dark);
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
    padding-left: 5px;
}

/* ù ¹ø° ±×·ì Á¦¸ñÀÇ À§ÂÊ ¿©¹éÀº ÇÊ¿ä ¾øÀ½ */
.mixture-app .order-group-heading:first-of-type {
    margin-top: 0;
}

/* °¢ Á¶ÇÕ °¹¼öº° üũ¹Ú½º¸¦ ´ã´Â ³»ºÎ ±×¸®µå ÄÁÅ×ÀÌ³Ê */
.mixture-app .order-checkbox-group-inner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    /* minmax·Î ÃÖ¼Ò 100pxÀ» À¯ÁöÇ쵂 °¡¿ë °ø°£¿¡ ¸Â°Ô ÁÙ ¹Ù²Þ */
    gap: 8px;
    flex-shrink: 0;
}

.mixture-app .order-checkbox-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    background-color: var(--background-color);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all var(--transition-speed);
    color: var(--text-color-dark);
    padding: 10px;
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    flex-grow: 0;
    /* °íÁ¤ Å©±â Ç׸ñÀº flex-grow¸¦ 0À¸·Î À¯Áö */
    flex-shrink: 1;
    /* NEW: ÇÊ¿äÇÑ °æ¿ì Ãà¼ÒµÇµµ·Ï Çã¿ë */
    min-width: 0;
    /* NEW: Ç׸ñ ÀÚü°¡ ÁÙ¾îµé ¼ö ÀÖµµ·Ï ÃÖ¼Ò ³Êºñ 0À¸·Î ¼³Á¤ */
    text-wrap: nowrap;
    /* üũ¹Ú½º ÅؽºÆ®°¡ Áٹٲ޵Ǵ °ÍÀ» ¹æÁö (³ÑÄ¡´Â ÅؽºÆ®¿¡´Â flex-shrink Àû¿ë) */
    min-height: 40px;
    /* Àû´çÇÑ ³ôÀÌ È®º¸ (¿¹: µÎ ÁÙ ±ÛÀÚ¸¦ À§ÇÑ) */
    align-content: center;
    /* NEW: ³»¿ëÀÌ ÇÑÁÙ·Î Àß µé¾î°¡Áö ¾ÊÀ» ¶§ ¼öÁ÷ Á¤·Ä */
}

.mixture-app .order-checkbox-item:hover {
    transform: translateY(0);
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
}

.mixture-app .order-checkbox-item input[type="checkbox"] {
    display: none;
}

.mixture-app .order-checkbox-item label {
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    font-weight: 500;
    min-width: 0;
    flex-grow: 1;
}

.mixture-app .order-checkbox-item label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background-color: var(--background-color);
    box-shadow: inset 2px 2px 4px var(--neumo-shadow-dark), inset -2px -2px 4px var(--neumo-shadow-light);
    transition: all var(--transition-speed);
}

.mixture-app .order-checkbox-item input[type="checkbox"]:checked+label::before {
    background-color: var(--primary-blue-dark);
    box-shadow: inset 2px 2px 4px var(--selected-neumo-shadow-dark), inset -2px -2px 4px var(--selected-neumo-shadow-light);
}

.mixture-app .order-checkbox-item input[type="checkbox"]:checked+label::after {
    content: '\2713';
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: white;
}

.mixture-app .checkbox-controls {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Å°¿öµå Á¶ÇÕ±â ÀÛÀº ¹öÆ° (.action-button-small) */
.mixture-app .action-button-small {
    padding: 8px 15px;
    font-size: 0.9rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-speed);
    background-color: var(--background-color);
    /* ±âº» ¹è°æ»ö: Èò»ö (³×¿À¸ðÇÇÁò º£À̽º) */
    color: var(--text-color-dark);
    /* ±âº» ±ÛÀÚ»ö: ³²»ö */
    box-shadow: 5px 5px 10px var(--neumo-shadow-dark), -5px -5px 10px var(--neumo-shadow-light);
    /* º¼·ÏÇÑ È¿°ú */
    white-space: nowrap;
    flex-shrink: 1;
    /* NEW: °ø°£ÀÌ ºÎÁ·ÇÏ¸é ¹öÆ° ³Êºñ¸¦ ÁÙÀÏ ¼ö ÀÖµµ·Ï ÇÔ */
    min-width: 0;
    /* NEW: ¹öÆ°µµ ÇÊ¿äÇϸé Ãà¼ÒµÉ ¼ö ÀÖµµ·Ï ÇÔ */
}

.mixture-app .action-button-small:hover {
    transform: translateY(1px);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    /* ¿À¸ñÇÑ È¿°ú */
    background-color: var(--background-color);
    /* È£¹ö ½Ã ¹è°æ»ö À¯Áö */
    color: var(--text-color-dark);
    /* È£¹ö ½Ã ±ÛÀÚ»ö À¯Áö */
}

.mixture-app .action-button-small:active {
    transform: translateY(1px);
    /* nav-button:active¿Í µ¿ÀÏÇÏ°Ô 1px·Î À̵¿ °Å¸® Á¶Á¤ */
    box-shadow: inset 4px 4px 8px var(--selected-neumo-shadow-dark), inset -4px -4px 8px var(--selected-neumo-shadow-light);
    /* Ŭ¸¯ ½Ã ¹è°æ »ö»ó¿¡ ¸Â´Â Àμ ȿ°ú */
    background-color: var(--primary-blue-dark);
    /* Ŭ¸¯ ½Ã ¹è°æ»ö ³²»öÀ¸·Î º¯°æ */
    color: white;
    /* Ŭ¸¯ ½Ã ±ÛÀÚ»ö Èò»öÀ¸·Î º¯°æ */
}

.mixture-app .action-button-small:disabled {
    background-color: var(--background-color);
    color: var(--text-color-light);
    box-shadow: inset 1px 1px 3px var(--neumo-shadow-dark), inset -1px -1px 3px var(--neumo-shadow-light);
    transform: none;
    cursor: not-allowed;
}



/* -- ¹öÆ° ¹Ú½º (`.main-controls-card`) -- */
.mixture-app .main-controls-card {
    padding: 30px;
}

.mixture-app .main-controls-card .card-content {
    text-align: center;
}

.mixture-app .main-controls-buttons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
}


/* -- C ¹Ú½º: °á°ú Ç¥½Ã ¿µ¿ª (`.results-display-card`) -- */
.mixture-app .results-output-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    background-color: var(--background-color);
    border: none;
    border-radius: 10px;
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    min-width: 0;
    /* NEW: ÄÁÅ×ÀÌ³Ê ÀÚüµµ Ãà¼ÒµÉ ¼ö ÀÖµµ·Ï */
}

.mixture-app .results-output-grid p {
    background-color: var(--background-color);
    border: none;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 0.95em;
    word-break: break-all;
    margin: 0;
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    transition: all var(--transition-speed);
    color: var(--text-color-dark);
    min-width: 0;
    /* NEW: p ÅÂ±× ³»¿ëÀÌ ±æ¾îÁ®µµ Ãà¼ÒµÉ ¼ö ÀÖµµ·Ï ÇÔ */
}

.mixture-app .results-output-grid p:hover {
    transform: translateY(0);
    box-shadow: inset 1px 1px 3px var(--neumo-shadow-dark), inset -1px -1px 3px var(--neumo-shadow-light);
}

.mixture-app .no-results {
    text-align: center;
    color: var(--text-color-light);
    font-style: italic;
    padding: 20px;
    grid-column: 1 / -1;
    box-shadow: none;
}


/* --- 3. Àç°í »ý¼º±â ½ºÅ¸ÀÏ (.inventory-app ½ºÄÚÇÁ) --- */
.inventory-app .results-output-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    background-color: var(--background-color);
    border: none;
    border-radius: 10px;
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    min-height: 150px;
    text-align: left;
}

.inventory-app .results-output-list p {
    margin: 0;
    padding: 2px 5px;
    font-size: 0.9em;
    word-break: break-all;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.inventory-app .results-output-list p:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.inventory-app .results-output-list .no-results {
    text-align: center;
    color: var(--text-color-light);
    font-style: italic;
    padding: 20px;
    box-shadow: none;
    align-self: center;
    margin: auto;
}


/* -- ¹ÝÀÀÇü À¥ µðÀÚÀÎ (Å°¿öµå Á¶ÇÕ±â) -- */
/* ÀÛÀº ½º¸¶Æ®Æù (¿¹: 480px) À̻󿡼­´Â 2¿­ ¹èÄ¡ °¡´ÉÇϵµ·Ï Ä«Å×°í¸® ÀÔ·Ââ Á¶Á¤ */
@media (min-width: 480px) {
    .mixture-app .input-group {
        flex-basis: calc(50% - 10px);
        /* 2¿­ ¹èÄ¡ (20px gap °í·Á) */
    }
}

@media (min-width: 600px) {
    .mixture-app .main-title {
        font-size: 2.5em;
    }

    .mixture-app .card h2 {
        font-size: 1.3em;
    }

    .mixture-app .card-initial {
        font-size: 4em;
    }

    .mixture-app .card {
        padding: 80px 40px 50px 40px;
    }

    .mixture-app .input-sections-container {
        gap: 30px;
        padding: 20px;
    }

    /* ÅÂºí¸´ Å©±âºÎÅÍ´Â Ä«Å×°í¸® ÀÔ·Ââ 2¿­ ·¹À̾ƿô À¯Áö */
    .mixture-app .input-group {
        flex-basis: calc(50% - 15px);
        /* 2¿­ (30px gap °í·Á) */
    }

    .mixture-app .action-button {
        padding: 12px 25px;
        font-size: 1.1em;
    }

    .mixture-app .action-button-small {
        padding: 10px 18px;
        font-size: 1.0em;
    }

    .mixture-app .results-output-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

.inspector-app .input-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin-bottom: 25px;
}

.inspector-app .input-container input[type="url"] {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    transition: all var(--transition-speed);
    background-color: var(--background-color);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    color: var(--text-color-dark);
    box-sizing: border-box;
}

.inspector-app .input-container input[type="url"]:focus {
    outline: none;
    box-shadow: inset 2px 2px 5px var(--selected-neumo-shadow-dark), inset -2px -2px 5px var(--selected-neumo-shadow-light),
        0 0 0 3px rgba(0, 123, 255, 0.25);
}

.inspector-app .platform-checkboxes-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.inspector-app .platform-checkbox-item input[type="checkbox"] {
    display: none;
}

.inspector-app .platform-checkbox-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background-color: var(--background-color);
    box-shadow: 5px 5px 10px var(--neumo-shadow-dark), -5px -5px 10px var(--neumo-shadow-light);
    cursor: pointer;
    transition: all var(--transition-speed);
    font-weight: 500;
}

.inspector-app .platform-checkbox-item label:hover {
    transform: translateY(-2px);
}

.inspector-app .platform-checkbox-item input[type="checkbox"]:checked+label {
    background-color: var(--primary-blue-dark);
    color: white;
    box-shadow: inset 5px 5px 10px var(--selected-neumo-shadow-dark), inset -5px -5px 10px var(--selected-neumo-shadow-light);
    transform: translateY(1px);
}

.inspector-app .platform-checkbox-item label img {
    width: 24px;
    height: 24px;
}

.inspector-app .status-message {
    padding: 20px;
    border-radius: 8px;
    background-color: var(--background-color);
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    font-style: italic;
    text-align: center;
    font-weight: 500;
}

.inspector-app .status-message.error {
    color: var(--danger-red);
    font-weight: 700;
}

.inspector-app .status-message.loading::after {
    content: '...';
    animation: dots 1.4s infinite;
    display: inline-block;
}

@keyframes dots {

    0%,
    20% {
        content: '.';
    }

    40% {
        content: '..';
    }

    60%,
    100% {
        content: '...';
    }
}


/* °á°ú ºí·Ï ½ºÅ¸ÀÏ */
#resultContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.result-block {
    border-radius: 15px;
    background-color: var(--background-color);
    box-shadow: 7px 7px 10px var(--neumo-shadow-dark), -7px -7px 10px var(--neumo-shadow-light);
    overflow: hidden;
    transition: all var(--transition-speed);
}

.result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-speed);
}

.result-block.found .result-header:hover {
    background-color: var(--border-light);
}

.result-header img {
    width: 32px;
    height: 32px;
}

.result-header h3 {
    margin: 0;
    font-size: 1.2em;
    flex-grow: 1;
}

.result-header .status-found,
.result-header .status-not-found {
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.9em;
}

.result-header .status-found {
    background-color: var(--success-green);
    color: white;
}

.result-header .status-not-found {
    background-color: var(--muted-gray);
    color: white;
}

.code-wrapper {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, padding 0.5s ease-in-out;
    padding: 0 20px;
}

.result-block.expanded .code-wrapper {
    max-height: 1000px;
    /* ÃæºÐÈ÷ Å« °ª */
    opacity: 1;
    padding: 0 20px 20px 20px;
}

.result-block.not-found .result-header {
    cursor: default;
}


.result-block pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    text-align: left;
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.4);
    margin-top: 0;
    margin-bottom: 10px;
}

.result-block code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85em;
    white-space: pre-wrap;
    word-break: break-all;
}

@media (min-width: 600px) {
    .inspector-app .platform-checkboxes-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* style.css ÆÄÀÏÀÇ analyzer-app °ü·Ã ½ºÅ¸ÀÏÀ» ¾Æ·¡ ÄÚµå·Î ´ëü */

/* --- 5. ¹®Àå ºÐ¼®±â ½ºÅ¸ÀÏ (.analyzer-app ½ºÄÚÇÁ) --- */
.analyzer-app .input-group.full-width {
    flex-basis: 100%;
}

.analyzer-app .input-group.half-width {
    flex-basis: 100%;
    /* ¸ð¹ÙÀÏ¿¡¼­´Â 100% */
}

.analyzer-app .input-card .card-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

}

.analyzer-app .input-group {
    flex-grow: 1;
}

.analyzer-app .input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.analyzer-app .input-group textarea, 
.analyzer-app .input-group input[type="text"], 
.analyzer-app .input-group input[type="number"], 
.analyzer-app .input-group select {
    /* glass-input ½ºÅ¸ÀÏ Àû¿ë */
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    color: var(--text-color-dark);
    font-size: 1rem;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.analyzer-app .input-group textarea:focus, 
.analyzer-app .input-group input[type="text"]:focus, 
.analyzer-app .input-group input[type="number"]:focus, 
.analyzer-app .input-group select:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-blue-dark);
}

.analyzer-result-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.analyzer-result-container .result-item {
    padding: 20px;
    border-radius: 12px;
    background-color: var(--background-color);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
}

.analyzer-result-container .result-label {
    display: block;
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 12px;
    color: var(--primary-blue-dark);
}

.analyzer-result-container .result-value {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--success-green);
}

.analyzer-result-container .result-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* °£°Ý Á¶Á¤ */
}

.analyzer-result-container .result-list.scrollable {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
}

.analyzer-result-container .result-list .placeholder {
    font-style: italic;
    color: var(--text-color-light);
    text-align: center;
    padding: 10px 0;
}

/* ±ÛÀÚ¼ö °á°ú ¾ÆÀÌÅÛ */
.char-count-item {
    font-size: 1.1em;
    font-weight: 500;
    margin: 0;
}

/* ¶ç¾î¾²±â/ºÙ¿©¾²±â °á°ú ¾ÆÀÌÅÛ */
.phrase-count-item {
    font-size: 1.1em;
    margin: 0;
}

.phrase-count-item .phrase-emphasis {
    font-weight: bold;
    color: var(--text-color-dark);
}

.phrase-count-item .count-value {
    font-weight: 700;
    color: var(--success-green);
}

.phrase-count-item .count-value.not-found {
    color: var(--muted-gray);
    /* ȸ»öÀ¸·Î Ç¥½Ã */
    font-style: italic;
}

/* »óÀ§ ´Ü¾î ¾ÆÀÌÅÛ */
.top-word-item {
    background: var(--chip-bg);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 1.1em;
    margin: 0;
}

.top-word-item .top-word {
    font-weight: 700;
    color: var(--text-color-dark);
}

.top-word-item .top-word-count {
    font-weight: 700;
    color: var(--alert-red);
}

/* Àüü ºóµµ¼ö ¸ñ·Ï ¾ÆÀÌÅÛ */
.frequency-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-light);
    margin: 0;
    font-size: 1em;
}

.frequency-item:last-child {
    border-bottom: none;
}

.frequency-item .freq-word {
    font-weight: 500;
    color: var(--text-color-dark);
    word-break: break-all;
    margin-right: 10px;
}

.frequency-item .freq-count {
    font-weight: 700;
    color: var(--primary-blue-dark);
    white-space: nowrap;
}

/* °á°ú Çì´õ (ÇÊÅÍ ÀÔ·Ââ Æ÷ÇÔ) */
.result-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.filter-input {
    padding: 6px 10px;
    border-radius: 6px;
    border: none;
    background-color: var(--chip-bg);
    box-shadow: inset 2px 2px 4px var(--neumo-shadow-dark), inset -2px -2px 4px var(--neumo-shadow-light);
    width: 120px;
}

@media (min-width: 600px) {
    .analyzer-app .input-group.half-width {
        flex-basis: calc(50% - 10px);
    }
}



/* --- 6. ¸¶ÄÉÆà Æ۳Π½Ã°¢È­ ½ºÅ¸ÀÏ (.funnel-app ½ºÄÚÇÁ) --- */
.funnel-app {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.funnel-app .intro-text {
    font-size: 1.1em;
    color: var(--text-color-dark);
    margin-bottom: 40px;
    line-height: 1.6;
    text-align: center;
    max-width: 700px;
    font-weight: 500;
}


.funnel-stages-container {
    display: flex;
    flex-direction: column;
    /* ¼¼·Î Á¤·Ä */
    align-items: center;
    gap: 20px;
    /* Ä«µå¿Í Ä¿³ØÅÍ °£ÀÇ °£°Ý */
    width: 100%;
    max-width: 700px;
    /* Àüü ÄÁÅ×ÀÌ³Ê ÃÖ´ë ³Êºñ */
}

.funnel-app .funnel-stage-card {
    /* ±âÁ¸ .card ¹× .mixture-app .card ½ºÅ¸ÀÏÀ» »ó¼Ó */
    /* .card, .mixture-app .cardÀÇ padding ¹× box-shadow¸¦ ÀçÁ¤ÀÇ */
    padding: 25px 25px 25px 25px;
    /* ¸ðµç ÆеùÀ» ÀÏ°ü¼º ÀÖ°Ô Á¶Àý */
    margin-bottom: 0;
    /* Æ۳ΠÈ帧»ó °¢ Ä«µå »çÀÌ ¸¶Áø ºÒÇÊ¿ä */
    cursor: pointer;
    overflow: hidden;
    /* È®Àå ½Ã ÄÜÅÙÃ÷°¡ ³ÑÄ¡Áö ¾Êµµ·Ï */
}

.funnel-app .funnel-stage-card .card-initial-wrapper {
    /* Ä«µå ÀÌ´Ï¼È À§Ä¡´Â À¯ÁöÇϵÇ, ÄÁÅÙÃ÷¿ÍÀÇ Á¤·Ä Á¶Á¤ */
    top: 5px;
    /* Ãʱâ 'A','B'º¸´Ù ¾à°£ ¾Æ·¡·Î Á¶Àý */
    left: 20px;
}

.funnel-app .funnel-stage-card .card-initial {
    font-size: 2.8em;
    /* Ä«µå ¹øÈ£ Å©±â ¾à°£ ÁÙÀÓ */
    color: var(--primary-blue-dark);
}

.funnel-app .funnel-stage-card .card-content {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    /* ÀÌ´Ï¼È '1', '2' µî°úÀÇ °£°Ý Á¶Á¤ */
}

.funnel-app .funnel-stage-card .stage-header {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.funnel-app .funnel-stage-card .icon-wrapper {
    /* Æ۳Πīµå Çì´õ ¾ÆÀÌÄÜ */
    flex-shrink: 0;
    margin-bottom: 0;
}

.funnel-app .funnel-stage-card .icon-wrapper img {
    width: 40px;
    /* ¾ÆÀÌÄÜ Å©±â Á¶Àý */
    height: 40px;
    margin-top: 0;
}

.funnel-app .funnel-stage-card .stage-title {
    flex-grow: 1;
    font-size: 1.3em;
    font-weight: 700;
    color: var(--text-color-dark);
    margin: 0;
    /* h2ÀÇ ±âº» ¸¶Áø Á¦°Å */
    white-space: nowrap;
    /* Á¦¸ñ ÁÙ¹Ù²Þ ¹æÁö */
}

.funnel-app .funnel-stage-card .stage-summary-text {
    font-size: 0.9em;
    color: var(--text-color-light);
    margin: 0;
    /* pű×ÀÇ ±âº» ¸¶Áø Á¦°Å */
    flex-basis: 100%;
    /* ´ÙÀ½ ÁÙ·Î ³Ñ¾î°¡µµ·Ï */
    padding-left: 55px;
    /* ¾ÆÀÌÄÜ ¹× Á¦¸ñ¿¡ ¸ÂÃç µé¿©¾²±â */
    margin-top: 5px;
    /* ¿ä¾à ÅؽºÆ®¿Í Á¦¸ñ °£°Ý */
    white-space: normal;
    /* ¿ä¾à ÅؽºÆ® ÁÙ¹Ù²Þ Çã¿ë */
}


.funnel-app .funnel-stage-card .expand-icon {
    font-size: 1.2em;
    color: var(--text-color-light);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 10px;
}

.funnel-app .funnel-stage-card.expanded .expand-icon {
    transform: rotate(180deg);
}

/* »ó¼¼ ³»¿ë ¿µ¿ª */
.funnel-app .funnel-stage-card .stage-details-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.4s ease-out;
    /* max-height, opacity ¾Ö´Ï¸ÞÀÌ¼Ç */
    opacity: 0;
    /* Ãʱ⠼û±è »óÅ */
    padding-top: 0;
    /* ±âº»ÀûÀ¸·Î ¼û±è */
}

.funnel-app .funnel-stage-card.expanded .stage-details-content {
    opacity: 1;
    max-height: 1000px;
    /* ÃæºÐÈ÷ Å« °ªÀ¸·Î ¼³Á¤ÇÏ¿© ³»¿ë Àüü°¡ º¸À̵µ·Ï */
    padding-top: 20px;
    /* È®Àå ½Ã »ó´Ü ¿©¹é Ãß°¡ */
}

.funnel-app .funnel-stage-card .stage-details-description p {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--text-color-dark);
    margin-bottom: 10px;
    text-align: left;
    /* ÅؽºÆ® Á¤·Ä */
}

.funnel-app .funnel-stage-card .stage-details-description p:last-child {
    margin-bottom: 0;
}

.funnel-app .funnel-stage-card .stage-details-description b {
    color: var(--primary-blue-dark);
    font-weight: 700;
}

.funnel-app .funnel-stage-card .stage-details-description p.outcome {
    color: var(--success-green);
    /* ¼º°ú °­Á¶ */
    font-weight: 600;
}

/* Æ۳ΠĿ³ØÅÍ (´Ü°è »çÀÌ È­»ìÇ¥) */
.funnel-connector {
    color: var(--text-color-light);
    font-size: 2.5em;
    /* È­»ìÇ¥ Å©±â */
    text-align: center;
    margin: 0;
    /* À§¾Æ·¡ Ä«µå¿ÍÀÇ °£°Ý Á¶Àý */
    height: 30px;
    /* È­»ìÇ¥ ³ôÀÌ È®º¸ */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* Ãʱ⠼û±è */
    transform: translateY(-20px);
    /* ¾Ö´Ï¸ÞÀ̼ÇÀ» À§ÇÑ Ãʱâ À§Ä¡ */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ·Îµå ½Ã ¾Ö´Ï¸ÞÀÌ¼Ç */
.funnel-app .funnel-stage-card.hidden {
    opacity: 0;
    transform: translateY(20px);
}

.funnel-app .funnel-stage-card.show {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}


/* --- ¹ÝÀÀÇü À¥ µðÀÚÀÎ (.funnel-app) --- */
@media (min-width: 600px) {
    .funnel-app .main-title {
        font-size: 2.5em;
    }

    .funnel-app .funnel-stage-card {
        padding: 30px 40px 30px 40px;
    }

    .funnel-app .funnel-stage-card .card-initial {
        font-size: 3.2em;
    }

    .funnel-app .funnel-stage-card .icon-wrapper img {
        width: 50px;
        height: 50px;
    }

    .funnel-app .funnel-stage-card .stage-title {
        font-size: 1.5em;
    }

    .funnel-app .funnel-stage-card .stage-summary-text {
        padding-left: 65px;
        font-size: 1.0em;
    }

    .funnel-app .funnel-stage-card .stage-details-description p {
        font-size: 1.0em;
    }

    .funnel-connector {
        font-size: 3.5em;
        height: 40px;
    }

    .funnel-app .intro-text {
        font-size: 1.2em;
    }

    /* ÅÂºí¸´/PC¿¡¼­ stage-header ¾ÆÀÌÄÜ°ú ÅؽºÆ®°¡ ´õ À¯¿¬ÇÏ°Ô Á¤·ÄµÇµµ·Ï */
    .funnel-app .funnel-stage-card .stage-header {
        flex-wrap: wrap;
        /* Á¦¸ñ°ú ¿ä¾à ÅؽºÆ®°¡ Áٹٲ޵ǵµ·Ï */
    }

    .funnel-app .funnel-stage-card .stage-title {
        flex-basis: auto;
        /* Áٹٲ޵ǾúÀ» ¶§ ÇÊ¿äÇÑ °ø°£¸¸Å­¸¸ Â÷Áö */
        flex-grow: 1;
        /* ¿©ÀüÈ÷ È®Àå °¡´É */
    }

    .funnel-app .funnel-stage-card .expand-icon {
        margin-left: auto;
        /* ¾ÆÀÌÄÜÀ» ¿À¸¥ÂÊ ³¡À¸·Î */
    }

}

@media (min-width: 992px) {
    .funnel-app .main-title {
        font-size: 3em;
        margin-bottom: 50px;
    }

    .funnel-app .intro-text {
        font-size: 1.3em;
    }

    .funnel-stages-container {
        gap: 30px;
        /* PC¿¡¼­´Â °£°Ý ´õ ³Ð°Ô */
        max-width: 800px;
        /* Àüü ÄÁÅ×ÀÌ³Ê ³Êºñ ´Ã¸² */
    }

    .funnel-app .funnel-stage-card {
        padding: 40px 50px 40px 50px;
        /* PC Æеù ´õ Å©°Ô */
    }

    .funnel-app .funnel-stage-card .card-initial {
        font-size: 3.5em;
    }

    .funnel-app .funnel-stage-card .icon-wrapper img {
        width: 60px;
        height: 60px;
    }

    .funnel-app .funnel-stage-card .stage-title {
        font-size: 1.6em;
    }

    .funnel-app .funnel-stage-card .stage-summary-text {
        padding-left: 75px;
        font-size: 1.1em;
    }

    .funnel-app .funnel-stage-card .stage-details-description p {
        font-size: 1.05em;
    }

    .funnel-connector {
        font-size: 4em;
        height: 50px;
    }

}


/* --- ŸÀÌÇÎ È¿°ú¸¦ À§ÇÑ ½ºÅ¸ÀÏ Ãß°¡ --- */
.home-content .typing-container {
    display: flex;
    /* ¶Ç´Â inline-flex */
    align-items: baseline;
    /* Ä¿¼­°¡ ÅؽºÆ® º£À̽º¶óÀο¡ ¸ÂÃçÁöµµ·Ï */
    justify-content: center;
    flex-wrap: wrap;
    /* °ø°£ÀÌ ºÎÁ·Çϸé ÅؽºÆ®¿Í Á¢¹Ì»ç°¡ Áٹٲ޵ǵµ·Ï */
    gap: 0px;
    /* ÅؽºÆ®¿Í Á¢¹Ì»ç »çÀÌ¿¡ Á÷Á¢ÀûÀÎ °£°Ý ¾øÀ½ */
    min-height: 4.5em;
    /* ´ë·« 3ÁÙ ÅؽºÆ®°¡ µé¾î°¥ Á¤µµÀÇ ÃÖ¼Ò ³ôÀÌ È®º¸ */
    font-size: 1.2em;
    /* home-content pÀÇ ÆùÆ® »çÀÌÁî À¯Áö */
    color: var(--text-color-light);
    /* home-content pÀÇ ÅؽºÆ® »ö»ó À¯Áö */
    line-height: 1.6;
    /* home-content pÀÇ ÁÙ °£°Ý À¯Áö */
    margin-bottom: 40px;
    /* ±âÁ¸ home-content pÀÇ ÇÏ´Ü ¸¶Áø À¯Áö */
}

#typedText {
    /* Ãʱâ Åõ¸íÇÑ º¸´õ (Ä¿¼­ ÀÚ¸®) */
    border-right: 2px solid transparent;
    transition: border-color 0.2s ease-in-out;
    /* ºÎµå·¯¿î ÀüȯÀ» À§ÇØ Ãß°¡ */
}

/* .typing Ŭ·¡½º (½ºÅ©¸³Æ®¿¡¼­ ŸÀÌÇÎ/Áö¿ì±â ÁßÀÏ ¶§ Àû¿ë) */
#typedText.typing {
    animation: none;
    /* ŸÀÌÇÎ Áß¿¡´Â ±âº» blinkCursor ¾Ö´Ï¸ÞÀÌ¼Ç ²û */
    border-right-color: var(--text-color-dark);
    /* ŸÀÌÇÎ Áß¿¡´Â Ä¿¼­ º¸ÀÌ°Ô */
}

/* ŸÀÌÇÎÀÌ ³¡³µ°Å³ª ½ÃÀÛ ÀüÀÏ ¶§ÀÇ Ä¿¼­ ¾Ö´Ï¸ÞÀÌ¼Ç */
#typedText:not(.typing) {
    animation: blinkCursor 0.75s infinite step-end;
}

@keyframes blinkCursor {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: var(--text-color-dark);
    }
}

.static-suffix {
    font-weight: 700;
    /* ¾îµð¾ø³ª? °­Á¶ */
    color: var(--primary-blue-dark);
    /* Ȩ H1°ú °°Àº »ö»óÀ¸·Î ÀÏ°ü¼º */
}

/* --- ŸÀÌÇÎ È¿°ú¸¦ À§ÇÑ ½ºÅ¸ÀÏ ³¡ --- */

/* --- NEW: Ȩ ÆäÀÌÁö ÀÎÆ®·Î ¹®±¸ ½ºÅ¸ÀÏ °³¼± --- */
.home-content .intro-statement {
    font-size: 1.1em;
    /* ±âÁ¸º¸´Ù ¾à°£ À۰ųª µ¿ÀÏ, Â÷ºÐÇÑ ´À³¦ */
    font-weight: 500;
    /* Medium ÆùÆ® µÎ²² */
    color: var(--text-color-light);
    /* ±âÁ¸ ¹àÀº ȸ»ö À¯Áö */
    line-height: 1.6;
    margin-top: 30px;
    /* ŸÀÌÇÎ È¿°ú¿ÍÀÇ °£°Ý È®º¸ */
    margin-bottom: 25px;
    /* °­Á¶ ¹®±¸¿ÍÀÇ °£°Ý È®º¸ */
    text-align: center;
    /* Áß¾Ó Á¤·Ä À¯Áö */
}

.home-content .marketing-highlight-statement {
    font-size: 1.3em;
    /* ´«¿¡ ¶ç°Ô Å« ±Û¾¾ */
    font-weight: 700;
    /* Bold ÆùÆ® µÎ²²·Î °­Á¶ */
    color: var(--primary-blue-dark);
    /* ¸ÞÀÎ °­Á¶ »ö»ó (³²»ö) */
    line-height: 1.7;
    margin-top: 25px;
    /* ÀÎÆ®·Î ¹®±¸¿ÍÀÇ °£°Ý È®º¸ */
    margin-bottom: 40px;
    /* ÇÏ´Ü ¸µÅ©¿ÍÀÇ °£°Ý È®º¸ */
    padding: 20px 30px;
    /* ³»ºÎ ¿©¹é */
    border-radius: var(--border-radius-main);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    /* ºí·¯ °­µµ ÃÖ´ë·Î */
    box-shadow:
        7px 7px 10px var(--neumo-shadow-dark),
        -7px -7px 10px var(--neumo-shadow-light);
    transition: opacity var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
    text-align: center;
    /* Áß¾Ó Á¤·Ä À¯Áö */
    transition: all var(--transition-speed);
    /* ºÎµå·¯¿î Àüȯ È¿°ú */
}

/* È£¹ö È¿°ú (¼±Åà »çÇ×) */
.home-content .marketing-highlight-statement:hover {
    transform: translateY(0);
    /* ¿òÁ÷ÀÓ ¾øÀ½ */
    box-shadow:
        inset 3px 3px 6px var(--neumo-shadow-dark),
        /* È£¹ö ½Ã ±×¸²ÀÚ »ì¦ º¯°æ */
        inset -3px -3px 6px var(--neumo-shadow-light);
}





/* --- 7. Áö¿ª ¼±Åñ⠽ºÅ¸ÀÏ (.location-selector-app ½ºÄÚÇÁ) --- */
/* mixture-app Ŭ·¡½º¸¦ ÇÔ²² »ç¿ëÇϹǷÎ, .location-selector-app °íÀ¯ ½ºÅ¸Àϸ¸ Á¤ÀÇ */
.location-selector-app .section-description {
    margin-bottom: 25px;
    /* ¼³¸í ÅؽºÆ® ÇÏ´Ü °£°Ý Á¶Á¤ */
    text-align: center;
    /* ¼³¸í ÅؽºÆ® °¡¿îµ¥ Á¤·Ä */
}

.mobile-break {
    display: none;
    /* ±âº»ÀûÀ¸·Î´Â ¼û±è */
}

@media (max-width: 600px) {

    /* ¸ð¹ÙÀÏ È­¸é¿¡¼­¸¸ º¸À̱â */
    .mobile-break {
        display: block;
    }
}

/* ¹Ú½º °£ ¸¶Áø (¼öÁ¤µÊ: B¹Ú½ºµµ ¸¶Áø °¡Áöµµ·Ï) */
.location-selector-app .card {
    margin-bottom: 40px;
}


/* Áö¿ª ¸ñ·Ï ÄÁÅ×ÀÌ³Ê (±×¸®µå -> Ç÷º½º º¯°æ) */
.location-selector-app .regions-grid {
    display: flex;
    /* flexbox »ç¿ë */
    flex-wrap: wrap;
    /* ³»¿ëÀÌ ³ÑÄ¡¸é ´ÙÀ½ ÁÙ·Î */
    justify-content: center;
    /* °¡¿îµ¥ Á¤·Ä */
    align-items: center;
    /* Ç׸ñ ³ôÀ̸¦ ÅëÀÏ (°¡Àå ³ôÀº Ç׸ñ¿¡ ¸ÂÃã) */
    gap: 10px;
    /* Ç׸ñ °£ °£°Ý */
    margin-bottom: 0;
    padding: 15px;
    background-color: var(--background-color);
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    border-radius: 10px;
    min-width: 0;
    max-height: 450px;
    /* ½ºÅ©·Ñ¹Ù°¡ »ý±æ ¼ö ÀÖµµ·Ï ÃÖ´ë ³ôÀÌ ¼³Á¤ */
    overflow-y: auto;
    /* ³»¿ëÀÌ ³ÑÄ¡¸é ¼¼·Î ½ºÅ©·Ñ¹Ù »ý¼º */
    padding-right: 5px;
    /* ½ºÅ©·Ñ¹Ù °í·ÁÇÏ¿© Æеù Á¶Á¤ */
}

/* === °³º° Áö¿ª Ç׸ñ (¸ðµç ¹Ú½º¿¡ °øÅë Àû¿ë) === */
.location-selector-app .region-item {
    display: flex;
    align-items: center;
    /* °¡·Î Áß¾Ó Á¤·Ä */
    justify-content: center;
    /* ¼¼·Î Áß¾Ó Á¤·Ä */
    padding: 8px 10px;
    /* Æеù Á¶Á¤ */
    border-radius: 15px;
    cursor: pointer;
    background-color: var(--background-color);
    box-shadow:
        5px 5px 10px var(--neumo-shadow-dark),
        -5px -5px 10px var(--neumo-shadow-light);
    /* º¼·ÏÇÑ µðÀÚÀÎ */
    transition: all var(--transition-speed);
    color: var(--text-color-dark);
    font-weight: 500;
    text-align: center;

    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(20% - 8px);
    /* 5¿­ ±âÁØ (10px gap °¡Á¤) */
    min-height: 60px;
    /* ÃÖ¼Ò ³ôÀÌ ¼³Á¤ (ÅؽºÆ®°¡ µÎ ÁÙ µÇ¾îµµ ¹Ú½º ¹ÛÀ¸·Î ¾È ³ª°¡µµ·Ï) */
    max-width: 140px;
    /* PC¿¡¼­µµ ³Ê¹« Ä¿ÁöÁö ¾Ê°Ô Á¦ÇÑ */
    word-break: break-word;
    /* ±ä ´Ü¾î °­Á¦ ÁÙ¹Ù²Þ */
    white-space: normal;
    /* ÁÙ¹Ù²Þ Çã¿ë */
    font-size: 0.95em;
    /* ±âº» ÆùÆ® Å©±â ¼³Á¤ */
    box-sizing: border-box;
    /* ÆеùÀÌ ³Êºñ/³ôÀÌ¿¡ Æ÷ÇԵǵµ·Ï */
}

/* °¢ ŸÀÔº° ÅؽºÆ® ½ºÅ¸ÀÏ */
.location-selector-app .primary-region-item {
    font-weight: 700;
    font-size: 1.05em;
    /* ½Ã/µµ´Â Á¶±Ý ´õ Å©°Ô */
    color: var(--primary-blue-dark);
}

.location-selector-app .city_gu-region-item {
    font-size: 1.0em;
    font-weight: 600;
    color: var(--text-color-dark);
}

/* È£¹ö/¾×Ƽºê È¿°ú */
.location-selector-app .region-item:hover:not(.selected) {
    transform: translateY(1px);
    box-shadow:
        inset 3px 3px 6px var(--neumo-shadow-dark),
        inset -3px -3px 6px var(--neumo-shadow-light);
    background-color: var(--background-color);
}

.location-selector-app .region-item:active:not(.selected) {
    transform: translateY(1px);
    box-shadow:
        inset 4px 4px 8px var(--neumo-shadow-dark),
        inset -4px -4px 8px var(--neumo-shadow-light);
    background-color: var(--background-color);
}

/* --- ¼±ÅÃµÈ »óÅ ½ºÅ¸ÀÏ (finalSelectedRegions¿¡ ÀÖ´Â °æ¿ì) --- */
.location-selector-app .region-item.selected {
    /* ¿Ïº®ÇÏ°Ô ¸ðµç ÇÏÀ§ µ¿±îÁö ¼±ÅÃµÈ °æ¿ì */
    box-shadow: inset 5px 5px 10px var(--selected-neumo-shadow-dark), inset -5px -5px 10px var(--selected-neumo-shadow-light);
    background-color: var(--primary-blue-dark);
    /* ¹è°æ»ö ÁøÇÑ ÆĶû */
    color: white;
    /* ÅؽºÆ® Èò»ö */
    transform: translateY(1px);
}

.location-selector-app .region-item.partially-selected {
    /* ÀϺθ¸ ¼±ÅÃµÈ °æ¿ì */

    box-shadow: 0px 0px 8px rgba(76, 79, 255, 0.4);
    /* ÀºÀºÇÑ ÆĶõ»ö ¿ÜºÎ ±×¸²ÀÚ Ãß°¡ */
    background-color: #f0f2fb;
    /* ¾à°£ ¹àÀº ¹è°æ */
    color: var(--primary-blue-dark);
    /* °­Á¶ ÆĶû»ö */
}

/* ¼±ÅÃµÈ Áö¿ª Ãâ·Â ±×¸®µå (C ¹Ú½º ¾Æ·¡) - º¯°æ ¾øÀ½ */
.location-selector-app .selected-regions-output-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-height: 250px;
    overflow-y: auto;
    padding: 15px;
    background-color: var(--background-color);
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    border-radius: 10px;
    min-width: 0;
}

.location-selector-app .selected-regions-output-grid p {
    background-color: var(--background-color);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9em;
    word-break: break-all;
    margin: 0;
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    color: var(--text-color-dark);
    text-align: center;
}

.location-selector-app .selected-regions-output-grid p:hover {
    transform: translateY(0);
    box-shadow: inset 1px 1px 3px var(--neumo-shadow-dark), inset -1px -1px 3px var(--neumo-shadow-light);
}

.location-selector-app .selected-regions-output-grid .no-results {
    grid-column: 1 / -1;
}


/* ¹ÝÀÀÇü À¥ µðÀÚÀÎ */
@media (min-width: 480px) {
    .location-selector-app .region-item {
        flex-basis: calc(20% - 8px);
        max-width: 140px;
        font-size: 1.0em;
        min-height: 65px;
    }

    .location-selector-app .primary-region-item {
        font-size: 1.1em;
    }

    .location-selector-app .city_gu-region-item {
        font-size: 1.05em;
    }

    .location-selector-app .selected-regions-output-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        font-size: 0.95em;
    }

    .location-selector-app .regions-grid {
        max-height: 500px;
        gap: 10px;
    }
}

@media (min-width: 600px) {
    .location-selector-app .region-item {
        flex-basis: calc(20% - 12px);
        max-width: 160px;
        font-size: 1.05em;
        min-height: 75px;
    }

    .location-selector-app .primary-region-item {
        font-size: 1.15em;
    }

    .location-selector-app .city_gu-region-item {
        font-size: 1.1em;
    }

    .location-selector-app .selected-regions-output-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        font-size: 1.0em;
    }

    .location-selector-app .regions-grid {
        gap: 15px;
        max-height: 550px;
    }
}

@media (min-width: 992px) {
    .location-selector-app .region-item {
        flex-basis: calc(16.66% - 16.66px);
        /* 6¿­ */
        max-width: 170px;
        font-size: 1.1em;
        min-height: 85px;
    }

    .location-selector-app .primary-region-item {
        font-size: 1.25em;
    }

    .location-selector-app .city_gu-region-item {
        font-size: 1.15em;
    }

    .location-selector-app .selected-regions-output-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        font-size: 1.05em;
    }

    .location-selector-app .regions-grid {
        gap: 20px;
        max-height: 600px;
    }
}

/* --- New: A ¹Ú½º È°¼ºÈ­µÈ ½Ã/µµ °­Á¶ ½ºÅ¸ÀÏ --- */
.location-selector-app .region-item.active-primary-selection {
    box-shadow: inset 4px 4px 8px var(--selected-neumo-shadow-dark), inset -4px -4px 8px var(--selected-neumo-shadow-light);
    background-color: var(--primary-blue-dark);
    /* °­Á¶ ¹è°æ»ö */
    color: white !important;
    /* ÅؽºÆ® »ö»ó */
    border: 2px solid var(--primary-blue-dark);
    /* ÁøÇÑ Å׵θ® */
}

.location-selector-app .region-item.active-primary-selection:hover {
    transform: translateY(1px);
    /* ¾×Ƽºê ½Ã µ¿ÀÏ */
}

/* A¹Ú½º ¼±Åà ¾ÆÀÌÅÛ ³» active-primary-selectionÀÌ finalSelectedRegionsÀÇ active¿Í °ãÄ¥ °æ¿ì ó¸® */
.location-selector-app .region-item.active-primary-selection.selected {
    box-shadow: inset 6px 6px 12px var(--selected-neumo-shadow-dark), inset -6px -6px 12px var(--selected-neumo-shadow-light);
    border-color: white;
    /* ¿ÏÀüÈ÷ ¼±ÅõǾúÀ» ¶§´Â Å׵θ® Èò»ö */
}

/* B ¹Ú½º ¹öÆ° ¼û±è ó¸® (±âÁ¸ .hidden Ŭ·¡½º¿Í µ¿ÀÏ ±â´É) */
.main-controls-buttons-container .hidden {
    display: none !important;
}

/* ... ±âÁ¸ style.css ³»¿ë ... */

/* --- 8. ±Û¾²±â ÇÁ·ÒÇÁÆ® »ý¼º±â ½ºÅ¸ÀÏ (.prompt-generator-app ½ºÄÚÇÁ) --- */
/* .mixture-app ½ºÅ¸ÀÏÀ» ´ëºÎºÐ ÀçÈ°¿ëÇϹǷÎ, ƯȭµÈ ºÎºÐ¸¸ Ãß°¡Çϰųª ¼öÁ¤ÇÕ´Ï´Ù. */

/*
  [ÃÖÀûÈ­]
  ¿©·¯ ÇÁ·ÒÇÁÆ® »ý¼º±â ¾ÛÀÇ .input-sections-container ½ºÅ¸ÀÏÀÌ µ¿ÀÏÇÏ¿©
  ¾Æ·¡¿Í °°ÀÌ Çϳª·Î ÅëÇÕÇß½À´Ï´Ù.
*/
.prompt-generator-app .input-sections-container,
.youtube-prompt-app .input-sections-container,
.reverse-scenario-prompt-app .input-sections-container {
    display: flex;
    flex-direction: column;
    /* ÀÔ·Â Çʵ带 ¼¼·Î·Î ½×À½ */
    gap: 20px;
    /* °¢ ÀÔ·Â ±×·ì °£ °£°Ý */
    margin-bottom: 20px;
    /* Ä«Å×°í¸® Ãß°¡ ¹öÆ° ¿µ¿ª°úÀÇ °£°Ý */
}

/*
  [ÃÖÀûÈ­]
  ¿©·¯ ÇÁ·ÒÇÁÆ® »ý¼º±â ¾ÛÀÇ .input-group label ½ºÅ¸ÀÏÀÌ µ¿ÀÏÇÏ¿©
  ¾Æ·¡¿Í °°ÀÌ Çϳª·Î ÅëÇÕÇß½À´Ï´Ù.
*/
.prompt-generator-app .input-group label,
.youtube-prompt-app .input-group label,
.reverse-scenario-prompt-app .input-group label,
.naver-blog-prompt-app .input-group label {
    display: block;
    /* ·¹À̺íÀÌ input À§¿¡ ¿Àµµ·Ï */
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text-color-dark);
}


.prompt-generator-app .input-group input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    background-color: var(--background-color);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    color: var(--text-color-dark);
    box-sizing: border-box;
}

.prompt-generator-app .input-group input[type="text"]:focus {
    outline: none;
    box-shadow: inset 2px 2px 5px var(--selected-neumo-shadow-dark), inset -2px -2px 5px var(--selected-neumo-shadow-light),
        0 0 0 3px rgba(0, 123, 255, 0.25);
}

/*
  [ÃÖÀûÈ­]
  ¸ðµç ÇÁ·ÒÇÁÆ® »ý¼º±â ¾ÛÀÇ °á°ú Ãâ·Ââ(textarea) ½ºÅ¸ÀÏÀÌ µ¿ÀÏÇÏ¿©
  ¾Æ·¡¿Í °°ÀÌ ÇϳªÀÇ ±×·ìÀ¸·Î ÅëÇÕÇß½À´Ï´Ù.
*/
.prompt-generator-app .results-display-card textarea,
.youtube-prompt-app .results-display-card textarea,
.reverse-scenario-prompt-app .results-display-card textarea,
.naver-blog-prompt-app .results-display-card textarea,
.video-prompt-maker-app .results-display-card textarea#resultPrompt {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    border: none;
    font-size: 0.9em;
    /* ÇÁ·ÒÇÁÆ® ÅؽºÆ® Å©±â Á¶Àý */
    line-height: 1.5;
    /* °¡µ¶¼º Çâ»ó */
    background-color: var(--background-color);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    color: var(--text-color-dark);
    box-sizing: border-box;
    resize: vertical;
    /* ¼¼·Î Å©±â Á¶Àý¸¸ Çã¿ë */
    min-height: 200px;
    /* ÃÖ¼Ò ³ôÀÌ */
    font-family: 'GmarketSans', sans-serif;
    /* º»¹® ÆùÆ® Àû¿ë */
}

/*
  [ÃÖÀûÈ­]
  ¸ðµç ÇÁ·ÒÇÁÆ® »ý¼º±â ¾ÛÀÇ °á°ú Ãâ·Ââ Æ÷Ä¿½º ½ºÅ¸ÀÏÀÌ µ¿ÀÏÇÏ¿©
  ¾Æ·¡¿Í °°ÀÌ ÇϳªÀÇ ±×·ìÀ¸·Î ÅëÇÕÇß½À´Ï´Ù.
*/
.prompt-generator-app .results-display-card textarea:focus,
.youtube-prompt-app .results-display-card textarea:focus,
.reverse-scenario-prompt-app .results-display-card textarea:focus,
.naver-blog-prompt-app .results-display-card textarea:focus,
.video-prompt-maker-app .results-display-card textarea#resultPrompt:focus {
    outline: none;
    box-shadow: inset 2px 2px 5px var(--selected-neumo-shadow-dark), inset -2px -2px 5px var(--selected-neumo-shadow-light),
        0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* ... ±âÁ¸ style.css ³»¿ë ... */

/* --- 9. À¯Æ©ºê ´ëº» ÇÁ·ÒÇÁÆ® »ý¼º±â ½ºÅ¸ÀÏ (.youtube-prompt-app ½ºÄÚÇÁ) --- */
/* .prompt-generator-app ¹× .mixture-app ½ºÅ¸ÀÏÀ» ´ëºÎºÐ ÀçÈ°¿ëÇÕ´Ï´Ù. */

.youtube-prompt-app .input-sections-container {
    gap: 20px;
    /* ÀÔ·Â ±×·ì °£ÀÇ °£°Ý Áõ°¡ */
}

.youtube-prompt-app .input-group input[type="url"],
/* type="url"·Î º¯°æ */
.youtube-prompt-app .input-group textarea#textInputForYoutube {
    /* »õ·Î¿î textarea¿¡ ´ëÇÑ ID ¼±ÅÃÀÚ */
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    background-color: var(--background-color);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    color: var(--text-color-dark);
    box-sizing: border-box;
    font-family: 'GmarketSans', sans-serif;
    /* ´Ù¸¥ ÀÔ·Â Çʵå¿Í ÆùÆ® ÅëÀÏ */
}

.youtube-prompt-app .input-group textarea#textInputForYoutube {
    resize: vertical;
    /* ¼¼·Î Å©±â Á¶Àý¸¸ Çã¿ë */
    min-height: 80px;
    /* ±âº» ÃÖ¼Ò ³ôÀÌ (rows="5"¿¡ ¸ÂÃã) */
}


.youtube-prompt-app .input-group input[type="url"]:focus,
.youtube-prompt-app .input-group textarea#textInputForYoutube:focus {
    outline: none;
    box-shadow: inset 2px 2px 5px var(--selected-neumo-shadow-dark), inset -2px -2px 5px var(--selected-neumo-shadow-light),
        0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* °á°ú Ãâ·Â textarea ½ºÅ¸ÀÏÀº »ó´Ü¿¡¼­ ÅëÇÕ Á¤ÀÇµÊ */


/* --- 10. ¹ÝÀü ½Ã³ª¸®¿À ÇÁ·ÒÇÁÆ® »ý¼º±â ½ºÅ¸ÀÏ (.reverse-scenario-prompt-app ½ºÄÚÇÁ) --- */
/* .youtube-prompt-app, .prompt-generator-app, .mixture-app ½ºÅ¸ÀÏÀ» ´ëºÎºÐ ÀçÈ°¿ëÇÕ´Ï´Ù. */

.reverse-scenario-prompt-app .input-group input[type="text"] {
    /* ÁÖÁ¦¾î ÀԷ¿ë */
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    background-color: var(--background-color);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    color: var(--text-color-dark);
    box-sizing: border-box;
}

.reverse-scenario-prompt-app .input-group input[type="text"]:focus {
    outline: none;
    box-shadow: inset 2px 2px 5px var(--selected-neumo-shadow-dark), inset -2px -2px 5px var(--selected-neumo-shadow-light),
        0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* °á°ú Ãâ·Â textarea ½ºÅ¸ÀÏÀº »ó´Ü¿¡¼­ ÅëÇÕ Á¤ÀÇµÊ */


/* --- 11. ºí·Î±× ±Û¾²±â ÇÁ·ÒÇÁÆ® ¾Û ½ºÅ¸ÀÏ (.naver-blog-prompt-app ½ºÄÚÇÁ) --- */
/* .youtube-prompt-app, .prompt-generator-app, .mixture-app ½ºÅ¸ÀÏÀ» ´ëºÎºÐ ÀçÈ°¿ëÇÕ´Ï´Ù. */

.naver-blog-prompt-app .input-sections-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* ÀÔ·Â ±×·ì °£ÀÇ °£°Ý ¾à°£ Á¶Á¤ */
    margin-bottom: 20px;
}

.naver-blog-prompt-app .input-group input[type="url"],
.naver-blog-prompt-app .input-group input[type="text"],
.naver-blog-prompt-app .input-group textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    background-color: var(--background-color);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    color: var(--text-color-dark);
    box-sizing: border-box;
    font-family: 'GmarketSans', sans-serif;
}

.naver-blog-prompt-app .input-group textarea#sourceTextInput {
    /* ID·Î ƯÁ¤ textarea ÁöÁ¤ */
    resize: vertical;
    min-height: 80px;
}

.naver-blog-prompt-app .input-group input[type="url"]:focus,
.naver-blog-prompt-app .input-group input[type="text"]:focus,
.naver-blog-prompt-app .input-group textarea:focus {
    outline: none;
    box-shadow: inset 2px 2px 5px var(--selected-neumo-shadow-dark), inset -2px -2px 5px var(--selected-neumo-shadow-light),
        0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* °á°ú Ãâ·Â textarea ½ºÅ¸ÀÏÀº »ó´Ü¿¡¼­ ÅëÇÕ Á¤ÀÇµÊ */

/* --- Ȩ ÆäÀÌÁö Ä«Å×°í¸® ¸µÅ© ±×¸®µå (½Å±Ô Ãß°¡) --- */
.home-category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Ä«Å×°í¸® ¼½¼Ç °£ÀÇ °£°Ý (¸ð¹ÙÀÏ ±âÁØ) */
    margin-top: 60px;
    /* ŸÀÌÇÎ È¿°ú ¾Æ·¡ ¹®±¸¿ÍÀÇ °£°Ý */
    justify-content: center;
}

/*
  [ÃÖÀûÈ­]
  .category-sectionÀÌ µÎ ºÎºÐÀ¸·Î ³ª´µ¾î ¼±¾ðµÇ¾î ÀÖ¾î ÇϳªÀÇ ºí·ÏÀ¸·Î º´ÇÕÇß½À´Ï´Ù.
  ³ªÁß¿¡ ¼±¾ðµÈ ½ºÅ¸ÀÏ °ªÀ» ¿ì¼±À¸·Î Àû¿ëÇß½À´Ï´Ù.
*/
.category-section {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px 30px;
    border-radius: var(--border-radius-main);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    box-shadow: inset 7px 7px 10px var(--neumo-shadow-dark), inset -7px -7px 10px var(--neumo-shadow-light);
    transition: opacity var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed), filter 0.4s ease, min-height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    min-width: 260px;
    min-height: 320px;
    /* µ¥½ºÅ©Å¾ ±âÁØ ³ôÀÌ·Î ¼³Á¤ */
    box-sizing: border-box;
    margin: 15px;
    will-change: transform, filter, opacity;
}

.category-title {
    font-size: 1.4em;
    /* Á¦¸ñ Å©±â */
    font-weight: 700;
    color: var(--primary-blue-dark);
    margin-bottom: 8px;
    /* ¹öÆ°µé°úÀÇ °£°Ý */
    text-align: center;
    width: 100%;
}

/* Ä«Å×°í¸® ¼½¼Ç ³»ÀÇ nav-button ½ºÅ¸ÀÏ */
.category-section .nav-button {
    width: 100%;
    /* ¼½¼Ç ³»ºÎ¿¡¼­ ²Ë Â÷°Ô */
    max-width: 280px;
    /* ¹öÆ° ÃÖ´ë ³Êºñ Á¦ÇÑ */
    text-align: center;
    font-size: 1.05em;
    /* ±âÁ¸ Ȩ ¹öÆ°º¸´Ù ¾à°£ ÀÛ°Ô */
    padding: 10px 15px;
    /* Æеù Á¶Á¤ */
    /* ±âÁ¸ .nav-buttonÀÇ º¼·ÏÇÑ ½ºÅ¸ÀÏ »ó¼Ó */
}

/* °ü¸®ÀÚ Àü¿ë ¹öÆ° ½ºÅ¸ÀÏ (³ë¶õ»ö ¹è°æ) */
.admin-only-button {
    background-color: var(--admin-btn-bg) !important;
    /* ºÎµå·¯¿î ³ë¶õ»ö, important·Î ¿ì¼±¼øÀ§ */
    color: #ffffff !important;
    /* ¾îµÎ¿î ³ë¶õ»ö °è¿­ ÅؽºÆ® */
    /* box-shadow´Â .nav-button °ÍÀ» À¯ÁöÇϸ鼭 ¹è°æ/±ÛÀÚ»ö¸¸ º¯°æ */
}

.admin-only-button:hover {
    background-color: var(--admin-btn-hover-bg) !important;
    color: #ffffff !important;
    /* nav-button hover È¿°ú¿Í ÁßøµÉ ¼ö ÀÖÀ¸´Ï transform µîÀº À¯Áö */
    transform: translateY(-2px);
    box-shadow: 8px 8px 15px var(--neumo-shadow-dark), -8px -8px 15px var(--neumo-shadow-light) !important;
}

.admin-only-button:active,
.admin-only-button.active {
    background-color: var(--admin-btn-active-bg) !important;
    color: var(--admin-btn-active-text) !important;
    transform: translateY(1px);
    box-shadow: inset 5px 5px 10px var(--selected-neumo-shadow-dark), inset -5px -5px 10px var(--selected-neumo-shadow-light) !important;
}

.ai-only-button {
    background-color: var(--ai-btn-bg) !important;
    color: #6f00ff !important;
}

.ai-only-button:hover {
    background-color: var(--ai-btn-hover-bg) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 8px 8px 15px var(--neumo-shadow-dark), -8px -8px 15px var(--neumo-shadow-light) !important;
}

.ai-only-button:active,
.ai-only-button.active {
    background-color: var(--ai-btn-active-bg) !important;
    color: var(--ai-btn-active-text) !important;
    transform: translateY(1px);
    box-shadow: inset 5px 5px 10px var(--selected-neumo-shadow-dark), inset -5px -5px 10px var(--selected-neumo-shadow-light) !important;
}















/* Å« È­¸é¿¡¼­ÀÇ ±×¸®µå ·¹À̾ƿô */
@media (min-width: 768px) {

    /* ÅÂºí¸´ */
    .home-category-grid {
        gap: 25px;
        /* ¼½¼Ç °£ °£°Ý ¾à°£ ³Ð°Ô */
    }

    .category-section {
        flex: 1 1 calc(50% - 12.5px);
        /* 2¿­, gap °í·Á */
        max-width: calc(50% - 12.5px);
    }
}

@media (min-width: 1024px) {

    /* µ¥½ºÅ©Å¾, À̹ÌÁö¿Í À¯»çÇÑ ·¹À̾ƿô */
    .home-category-grid {
        gap: 20px;
        /* µ¥½ºÅ©Å¾¿¡¼­ gap ¾à°£ ÁÙÀÓ (4°³°¡ ÇÑ ÁÙ¿¡ Àß µé¾î°¡µµ·Ï) */
        flex-wrap: nowrap;
        /* ADDED: ÀÚ½Ä ¿ä¼ÒµéÀÌ Áٹٲ޵ÇÁö ¾Êµµ·Ï ¼³Á¤ */
    }

    .category-section {
        flex: 1 1 calc(25% - 15px);
        /* 4°³ÀÇ ¾ÆÀÌÅÛÀÌ ÇÑ ÁÙ¿¡ µé¾î°¡µµ·Ï. gap (20px) °í·ÁÇÏ¿© ³Êºñ ¼³Á¤ */
        max-width: calc(25% - 15px);
        /* ÃÖ´ë ³Êºñµµ µ¿ÀÏÇÏ°Ô ¼³Á¤ */
        justify-content: flex-start;
        /* ³»ºÎ ¾ÆÀÌÅÛµéÀ» À§¿¡¼­ºÎÅÍ Á¤·Ä */
    }

    .category-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .category-section .nav-button {
        font-size: 1.1em;
    }
}

.category-icon {
    width: 100px;
    /* ¾ÆÀÌÄÜ ³Êºñ (Á¶±Ý Å°¿ì´Â °ÍÀ» Ãßõ) */
    height: 100px;
    /* ¾ÆÀÌÄÜ ³ôÀÌ */
    margin-bottom: 8px;
    /* ¾ÆÀÌÄÜ°ú ÅؽºÆ® »çÀÌÀÇ °£°Ý */
}




@media (min-width: 768px) {
    .main-nav {
        gap: 20px;
        /* ÅÂºí¸´ À̻󿡼­ °£°Ý º¹¿ø */
        overflow-x: visible;
        /* °¡·Î ½ºÅ©·Ñ ºÒÇÊ¿ä */
        padding-bottom: 0;
    }



}


@media (min-width: 768px) {
    .nav-button {
        padding: 10px 20px;
        /* ÅÂºí¸´ À̻󿡼­ Æеù º¹¿ø */
        font-size: 1em;
        /* ÆùÆ® Å©±â º¹¿ø */
    }
}

/* --- SEO ºÐ¼® °á°ú ¸Þ½ÃÁö¿¡ ´ëÇÑ ½ºÅ¸ÀÏ Ãß°¡ --- */

/* ´©¶ôµÈ ´Ü¾î°¡ ÀÖÀ» ¶§ (»¡°£»ö) */
.seo-content .missing-words {
    color: var(--danger-red);
    /* »¡°£»ö °è¿­ */
    font-weight: bold;
}

/* ¸ðµç ´Ü¾î°¡ Æ÷ÇԵǾúÀ» ¶§ (³ì»ö) */
.seo-content .all-present {
    color: #5cb85c;
    /* ³ì»ö °è¿­ */
    font-weight: bold;
}

/* Á¦¸ñ ´Ü¾î Ç¥½Ã ºÎºÐ (±âÁ¸¿¡ ¼³Á¤µÇ¾î ÀÖ´Ù¸é ±×´ë·Î À¯Áö, ÇÊ¿ä½Ã »ö»ó ÀÏÄ¡ ½ÃÅ°¼¼¿ä) */
.seo-content .phrase-emphasis {
    color: #0275d8;
    /* ÆĶõ»ö °è¿­ */
    font-weight: bold;
}

/* ȸ¼ö Ç¥½Ã ºÎºÐ */
.seo-content .count-value {
    color: #337ab7;
    /* ÁøÇÑ ÆĶõ»ö °è¿­ */
    font-weight: bold;
}

/* °³º° SEO °á°ú Ç׸ñÀÇ ÇÏ´Ü ¸¶Áø Á¶Á¤ (ÇÊ¿ä½Ã) */
.seo-content p {
    margin-bottom: 8px;
    /* °¢ ¹®Àå °£ °£°Ý */
}


/* --- AI ¹ÝÀÚµ¿È­ ¹× »ç¶÷ÀÇ ¼Õ±æ °­Á¶ ¼½¼Ç ½ºÅ¸ÀÏ --- */
.ai-automation-section {
    margin-top: 30px;
    /* ±âÁ¸ ¼½¼Ç°úÀÇ °£°Ý */
    margin-bottom: 40px;
    /* ´ÙÀ½ ¼½¼Ç°úÀÇ °£°Ý */
    display: flex;
    justify-content: center;
    /* °¡¿îµ¥ Á¤·Ä */
    perspective: 1000px;
    /* 3D º¯È¯À» À§ÇÑ ¿ø±Ù°¨ ¼³Á¤ (±íÀÌ°¨ Ç¥Çö¿ë) */
}

.ai-automation-box {
    /* 1. ¹è°æ ¹× Å׵θ® (±âÁ¸ÀÇ ³×¿À¸ðÇÇÁò º£À̽º À¯Áö) */
    background: var(--background-color);
    /* ±âº» ¹è°æ»ö */
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* ¾à°£ÀÇ ¹àÀº Å׵θ® */
    border-radius: 15px;
    /* ´õ µÕ±Ù ¸ð¼­¸® */
    padding: 20px 30px;
    /* ³»ºÎ ¿©¹é */
    border-radius: var(--border-radius-main);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    /* ºí·¯ °­µµ ÃÖ´ë·Î */
    box-shadow:
        7px 7px 10px var(--neumo-shadow-dark),
        -7px -7px 10px var(--neumo-shadow-light);
    transition: opacity var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);

    /* 3. ³Êºñ, Á¤·Ä ¹× ·¹À̾ƿô */
    width: 100%;
    max-width: 768px;
    /* ÄÜÅÙÃ÷ ³Êºñ Á¦ÇÑ */
    text-align: center;
    /* ³»ºÎ ÅؽºÆ® °¡¿îµ¥ Á¤·Ä */

    /* 4. Æ®·£Áö¼Ç ¹× 3D º¯È¯ °ü·Ã */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* ºÎµå·¯¿î Àüȯ È¿°ú */
    transform-style: preserve-3d;
    /* ÀÚ½Ä ¿ä¼ÒÀÇ 3D º¯È¯À» À¯Áö */
}

.ai-automation-box:hover {
    /* È£¹ö ½Ã ÀÔü°¨ °­È­: »ì¦ À§·Î ¶ç¿ì°í ZÃàÀ¸·Î ³ª¿À°Ô ÇÔ */
    transform: translateY(-8px) translateZ(20px);
    /* È£¹ö ½Ã ±×¸²ÀÚ °­Á¶ */
    box-shadow:
        10px 10px 20px rgba(55, 0, 255, 0.18),
        /* ´õ Å©°í ÁøÇÑ ±×¸²ÀÚ */
        -10px -10px 20px rgba(255, 255, 255, 0.6),
        inset 5px 5px 20px rgba(55, 0, 255, 0.18),
        /* ³»ºÎ ±×¸²ÀÚµµ °­È­ */
        inset -5px -5px 20px rgba(55, 0, 255, 0.18);
}

/* AI ¾ÆÀÌÄÜ ½ºÅ¸ÀÏ */
.ai-icon {
    font-size: 56px;
    /* ¾ÆÀÌÄÜ Å©±â Áõ°¡ */
    color: var(--primary-blue-dark);
    /* ¸¶ÄÉÆà Áß½ÉÀÇ °­Á¶»ö */
    margin-bottom: 25px;
    /* ¾ÆÀÌÄÜ¿¡ ÀºÀºÇÑ ºû È¿°ú Ãß°¡ */
    text-shadow: 0 0 15px rgba(0, 54, 112, 0.5),
        /* ÁÖ °­Á¶»öÀÇ ºû È¿°ú */
        0 0 5px rgba(0, 77, 157, 0.7);
    /* ´õ ÀÛÀº ¹üÀ§ÀÇ ºû È¿°ú */
}

/* Á¦¸ñ ½ºÅ¸ÀÏ */
.ai-automation-box h3 {
    font-size: 26px;
    /* Á¦¸ñ ±ÛÀÚ Å©±â Áõ°¡ */
    color: var(--text-color-dark);
    /* ±âº» ÅؽºÆ® »ö»ó */
    margin-bottom: 18px;
    line-height: 1.5;
    font-weight: 700;
    /* ±½Àº ±Û¾¾ */
}

/* º»¹® ¹®´Ü ½ºÅ¸ÀÏ */
.ai-automation-box p {
    font-size: 16.5px;
    /* º»¹® ±ÛÀÚ Å©±â »ì¦ Á¶Á¤ */
    color: var(--text-color-light);
    /* º¸Á¶ ÅؽºÆ® »ö»ó */
    line-height: 1.8;
    margin-bottom: 12px;
}

.ai-automation-box p:last-child {
    margin-bottom: 0;
    /* ¸¶Áö¸· ¹®´ÜÀÇ ÇÏ´Ü ¿©¹é Á¦°Å */
}

/* ¹ÝÀÀÇü Á¶Á¤: ¸ð¹ÙÀÏ¿¡¼­´Â 3D È¿°ú¸¦ ÃÖ¼ÒÈ­ÇÏ°í ±×¸²ÀÚ¸¦ ´Ü¼øÈ­ */
@media (max-width: 768px) {
    .ai-automation-box {
        padding: 25px;
        max-width: 90%;
        /* ÀÛÀº È­¸é¿¡¼­´Â ³Êºñ ºñÀ² Á¶Á¤ */

        /* ¸ð¹ÙÀÏ¿¡¼­´Â 3D º¯È¯ È¿°ú Á¦°Å */
        transform: none;
        perspective: none;
        /* ºÎ¸ðÀÇ perspectiveµµ Á¦°Å */

        /* ¸ð¹ÙÀÏ¿¡¼­´Â ±×¸²ÀÚ¸¦ ´Ü¼øÈ­ÇÏ¿© °úÇÑ ´À³¦ ¹æÁö */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        /* ±âº» ±×¸²ÀÚ */
    }

    .ai-automation-box:hover {
        transform: none;
        /* ¸ð¹ÙÀÏ¿¡¼­´Â È£¹ö È¿°ú Á¦°Å */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        /* È£¹ö ½Ã ±×¸²ÀÚ¸¸ ¾à°£ °­È­ */
    }

    .ai-icon {
        font-size: 48px;
        text-shadow: none;
        /* ¸ð¹ÙÀÏ¿¡¼­´Â ÅؽºÆ® ±×¸²ÀÚ Á¦°Å */
    }

    .ai-automation-box h3 {
        font-size: 22px;
    }

    .ai-automation-box p {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .ai-automation-box {
        padding: 20px;
    }

    .ai-icon {
        font-size: 40px;
    }

    .ai-automation-box h3 {
        font-size: 20px;
    }
}




/* --- NEW: Ȩ ÆäÀÌÁöÀÇ ¸¶ÄÉÆà ¼­ºñ½º ¸µÅ© ¼½¼Ç ½ºÅ¸ÀÏ --- */
.marketing-services-section {
    margin-top: 70px;
    /* Çì´õ¿ÍÀÇ °£°Ý */
    margin-bottom: 40px;
    /* ǪÅͳª ´Ù¸¥ ¿ä¼Ò¿ÍÀÇ °£°Ý */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ¼½¼Ç ³»ºÎ ³»¿ëÀ» Áß¾Ó Á¤·Ä */
    padding: 0 20px;
    /* Á¿ì Æеù */
    box-sizing: border-box;
    /* ÆеùÀÌ ³Êºñ¿¡ Æ÷ÇԵǵµ·Ï */
}

.marketing-services-section .section-title {
    font-size: 2.2em;
    /* ¼½¼Ç Á¦¸ñ Å©±â */
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 15px;
    letter-spacing: 0.05em;
    text-align: center;
}

.marketing-services-section .section-description {
    font-size: 1.1em;
    /* ¼³¸í ÅؽºÆ® Å©±â */
    color: var(--text-color-light);
    /* º¸Á¶ ÅؽºÆ® »ö»ó */
    line-height: 1.7;
    margin-bottom: 40px;
    /* ¼½¼Ç ¼³¸í ¾Æ·¡ °£°Ý */
    text-align: center;
    max-width: 700px;
    /* ¼³¸í ³Êºñ Á¦ÇÑ */
}

.services-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    /* °¢ Ä«Å×°í¸® ¹Ú½ºÀÇ ÃÖ¼Ò ³Êºñ 260px */
    gap: 25px;
    /* Ä«Å×°í¸® ¹Ú½ºµé »çÀÌ °£°Ý */
    width: 100%;
    max-width: 1200px; margin: 0 auto;
    /* ±×¸®µå ¿µ¿ª ÃÖ´ë ³Êºñ */
    justify-content: center;
    /* Áß¾Ó Á¤·Ä */
}

.service-category {
    background-color: var(--background-color);
    /* Ä«Å×°í¸® ¹Ú½º ¹è°æ */
    border-radius: var(--border-radius-main);
    /* µÕ±Ù ¸ð¼­¸® */
    padding: 25px;
    /* ³»ºÎ ¿©¹é */
    box-shadow:
        7px 7px 10px var(--neumo-shadow-dark),
        -7px -7px 10px var(--neumo-shadow-light);
    /* ³×¿À¸ðÇÇÁò º¼·Ï È¿°ú */
    display: flex;
    flex-direction: column;
    /* Ç׸ñµéÀ» ¼¼·Î·Î Á¤·Ä */
    align-items: center;
    /* ³»¿ëÀ» Áß¾Ó Á¤·Ä */
    min-height: 300px;
    /* °¢ Ä«Å×°í¸® ¹Ú½ºÀÇ ÃÖ¼Ò ³ôÀÌ */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-category:hover {
    transform: translateY(-5px);
    box-shadow: 10px 10px 15px var(--neumo-shadow-dark), -10px -10px 15px var(--neumo-shadow-light);
    /* È£¹ö ½Ã ±×¸²ÀÚ °­Á¶ */
}

.service-category h3 {
    font-size: 1.5em;
    /* ¼½¼Ç Á¦¸ñ Å©±â */
    color: var(--primary-blue-dark);
    /* ¸ÞÀÎ °­Á¶ »ö»ó */
    font-weight: 700;
    margin-bottom: 15px;
    /* Á¦¸ñ°ú ¸µÅ© »çÀÌ °£°Ý */
    text-align: center;
    width: 100%;
    /* ³Êºñ¸¦ ²Ë ä¿ò */
    display: flex;
    /* ¾ÆÀÌÄÜ°ú ÅؽºÆ® °°ÀÌ ¹èÄ¡ */
    align-items: center;
    justify-content: center;
    /* ¾ÆÀÌÄÜ ¹× ÅؽºÆ® Áß¾Ó Á¤·Ä */
    gap: 10px;
    /* ¾ÆÀÌÄÜ°ú ÅؽºÆ® °£ °£°Ý */
}

.service-category h3 i {
    /* ¼­ºñ½º ¼½¼Ç ³» ¾ÆÀÌÄÜ ½ºÅ¸ÀÏ */
    color: var(--primary-blue-dark);
    /* ¾ÆÀÌÄÜ »ö»ó */
    font-size: 0.8em;
    /* ¾ÆÀÌÄÜ Å©±â ÅؽºÆ® ´ëºñ Á¶Á¤ */
}

.service-category .nav-button {
    width: 100%;
    /* ÄÁÅ×À̳ʿ¡ ¸ÂÃã */
    max-width: 250px;
    /* ¹öÆ° ÃÖ´ë ³Êºñ */
    text-align: center;
    font-size: 1.05em;
    /* ÆùÆ® Å©±â */
    padding: 12px 18px;
    /* ¹öÆ° Æеù */
    margin-top: 10px;
    /* °¢ ¸µÅ© »çÀÌ °£°Ý */
    background-color: var(--background-color);
    /* ±âÁ¸ ¹öÆ° ½ºÅ¸ÀÏ »ó¼Ó */
    color: var(--text-color-dark);
    box-shadow:
        5px 5px 10px var(--neumo-shadow-dark),
        -5px -5px 10px var(--neumo-shadow-light);
}

.service-category .nav-button:hover {
    transform: translateY(-1px);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
}

/* .nav-button.active ½ºÅ¸ÀÏÀº À¯ÁöµÇ¾î¾ß ÇÔ */

/* °ü¸®ÀÚ Àü¿ë ¹öÆ° ½ºÅ¸ÀÏ */
.service-category .admin-only-button {
    background-color: var(--disabled-gray) !important;
    /* ±âº» ȸ»ö (´Ù¸¥ ¿¹½Ã: #d8d8d8) */
    color: white !important;
    border: none;
    /* ±âº» º¸´õ Á¦°Å */
}

.service-category .admin-only-button:hover {
    background-color: #707070 !important;
    /* È£¹ö ½Ã ´õ ¾îµÎ¿î ȸ»ö */
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    /* ±âÁ¸ È£¹ö È¿°ú Àû¿ë */
    transform: translateY(-1px);
}

/* ¹ÝÀÀÇü: ´õ ÀÛÀº È­¸é¿¡¼­´Â Ä«Å×°í¸® ¹Ú½º Çϳª¾¿ º¸À̵µ·Ï Á¶Á¤ */
@media (max-width: 768px) {
    .services-category-grid {
        grid-template-columns: 1fr;
        /* ÇÑ Ä÷³ */
        gap: 20px;
    }

    .service-category {
        max-width: 100%;
        /* ¸ð¹ÙÀÏ¿¡¼­ ³Êºñ 100% */
        flex: none;
        /* flex ¼Ó¼º Á¦°Å */
    }

    .service-category .nav-button {
        max-width: 200px;
        /* ¸ð¹ÙÀÏ¿¡¼­ ¹öÆ° ³Êºñ ÁÙÀÓ */
    }
}

/* (optional) ´Ù¸¥ ½ºÅ¸ÀϵéÀ» `style.css`¿¡ Àß ÅëÇÕÇÏ´Â °ÍÀÌ Áß¿äÇÕ´Ï´Ù. */


/* style.css ÆÄÀÏ ÇÏ´Ü¿¡ Ãß°¡ */
/* style.css ÆÄÀÏ ÇÏ´Ü¿¡ Ãß°¡Çϼ¼¿ä. */

/* --- ¸¶¿ì½º È£¹ö ½Ã ¼³¸í ÅøÆÁ ½ºÅ¸ÀÏ --- */
/* Áߺ¹µÈ .nav-button Á¤ÀÇ ÅëÇÕ: À§ ºí·Ï¿¡ Æ÷ÇÔµÊ */

/* --- ¸¶¿ì½º È£¹ö ½Ã ¼³¸í ÅøÆÁ ½ºÅ¸ÀÏ (¼öÁ¤µÈ ¹öÀü) --- */
.nav-button .tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    /* === ÇÙ½É ¼öÁ¤ »çÇ× (¿©±âºÎÅÍ) === */
    /* 1. ÀÚµ¿ ÁÙ ¹Ù²Þ Çã¿ë */
    white-space: normal;
    /* 2. ³»¿ë¿¡ µû¶ó ³Êºñ°¡ Á¤ÇØÁöµÇ, ÃÖ´ë ³Êºñ¸¦ ÁöÁ¤ÇÏ¿© ÁÙ ¹Ù²Þ À¯µµ */
    width: max-content;
    /* ³»¿ëÀÌ ÂªÀ¸¸é ³Êºñµµ ÀÛ°Ô */
    max-width: 280px;
    /* ÅøÆÁÀÌ ÀÌ ³Êºñº¸´Ù Ä¿Áö¸é ÁÙ ¹Ù²Þ ½ÃÀÛ (°ª Á¶Àý °¡´É) */
    /* 3. °¡µ¶¼ºÀ» À§ÇÑ Á¤·Ä ¹× ÁÙ ¹Ù²Þ ±ÔÄ¢ (¼±Åà »çÇ×) */
    text-align: center;
    /* ÅؽºÆ®¸¦ °¡¿îµ¥ Á¤·ÄÇÏ¿© º¸±â ÁÁ°Ô */
    word-break: keep-all;
    /* ÇÑ±Û ´Ü¾î°¡ À߸®Áö ¾Êµµ·Ï ´Ü¾î ´ÜÀ§·Î ÁÙ ¹Ù²Þ */
    /* === (¿©±â±îÁö) === */
    background-color: rgba(196, 190, 255, 0.5);
    color: #180070;
    font-size: 0.85em;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* ¸µÅ©¿¡ È£¹ö ½Ã ÅøÆÁ º¸ÀÌ°Ô Çϱâ */
.nav-button:hover .tooltip,
.nav-button:active .tooltip,
/* .active Ŭ·¡½ºÀÏ ¶§µµ º¸À̵µ·Ï Ãß°¡ */
.nav-button.active .tooltip {
    /* ÇöÀç ÆäÀÌÁö¸¦ ³ªÅ¸³»´Â .active Ŭ·¡½ºÀÏ ¶§µµ º¸À̵µ·Ï Ãß°¡ */
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    /* À§Ä¡¸¦ ´Ù½Ã Á¶Á¤ÇÏ¿© º¸ÀÌ°Ô ÇÔ */
}

/* ÅøÆÁ È­»ìÇ¥ ½ºÅ¸ÀÏ (¼±Åà »çÇ×) */
.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    /* ÅøÆÁ ¹Ù·Î ¾Æ·¡ */
    left: 50%;
    margin-left: -5px;
    /* »ï°¢Çü ³ÊºñÀÇ Àý¹Ý */
    border-width: 5px;
    border-style: solid;
    border-color: rgba(76, 0, 253, 0.8) transparent transparent transparent;
    /* À§Âʸ¸ »ö»ó Àû¿ë */
}



/* È®ÀåµÈ ¹öÆ° ¾ÈÀÇ ¾ÆÀÌÄÜ(PNG) Å©±â Á¶Àý */
.nav-button.expanded .nav-button-icon {
    width: 50px;
    /* ¿øÇÏ´Â °¡·Î Å©±â (±âÁ¸ÀÇ Àý¹Ý ¿¹½Ã) */
    height: 50px;
    /* ¿øÇÏ´Â ¼¼·Î Å©±â (±âÁ¸ÀÇ Àý¹Ý ¿¹½Ã) */
    object-fit: contain;
    /* À̹ÌÁö ºñÀ²À» À¯ÁöÇϸ鼭 Å©±â Á¶Àý */
}


/* style.css ÆÄÀÏ ÇÏ´Ü¿¡ Ãß°¡Çϼ¼¿ä. */
/* --- ÄÚµå ºÐ¼®±â - °á°ú Ç׸ñ ½ºÅ¸ÀÏ --- */
.code-analyzer-app .analysis-result-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.code-analyzer-app .analysis-result-container .result-item {
    border-radius: 12px;
    padding: 15px 20px;
    background-color: var(--background-color);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    transition: all var(--transition-speed);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* °á°ú ¼º°ø ½Ã (°ªÀÌ ÀÖÀ» ¶§) */
.code-analyzer-app .analysis-result-container .result-item.success .result-value {
    color: var(--success-green);
    /* ¿¬µÎ»ö °è¿­ */
    font-weight: 700;
}

/* °á°ú ½ÇÆÐ ½Ã (°ªÀÌ ¾øÀ» ¶§) */
.code-analyzer-app .analysis-result-container .result-item.error .result-value {
    color: var(--danger-red);
    /* »¡°£»ö °è¿­ */
    font-weight: 700;
}

.code-analyzer-app .result-item.error .placeholder {
    /* ¿À·ù ¸Þ½ÃÁöµµ »¡°£»ö */
    color: var(--danger-red);
}

.code-analyzer-app .result-label {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--primary-blue-dark);
}

.code-analyzer-app .result-value {
    font-size: 1.05em;
}

/* Á¦¸ñ, ¼³¸í µî ±ÇÀå»çÇ× ¹®±¸ Æ÷ÇÔ ½Ã ½ºÅ¸ÀÏ */
.code-analyzer-app .result-item:has(.result-label > strong) .result-value {
    font-size: 1em;
    font-weight: 400;
    word-break: break-word;
    line-height: 1.5;
}

.code-analyzer-app .recommendation-text {
    /* Ãßõ ¹®±¸ ½ºÅ¸ÀÏ */
    font-size: 0.85em;
    color: var(--muted-gray);
    margin-left: 8px;
    font-weight: 500;
}

/* ¸ñ·Ï (ul) °ü·Ã ½ºÅ¸ÀÏ */
.code-analyzer-app .item-list {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}

.code-analyzer-app .item-content {
    margin-bottom: 5px;
    word-break: break-all;
    /* ³»¿ëÀÌ ±æ¸é ÁÙ¹Ù²Þ */
}

/* Ç÷¹À̽ºÈ¦´õ ÅؽºÆ® ½ºÅ¸ÀÏ */
.code-analyzer-app .placeholder {
    font-style: italic;
    color: var(--text-color-light);
    text-align: center;
    padding: 15px 0;
}


/* style.css ÆÄÀÏÀÇ °¡Àå ¸¶Áö¸· ºÎºÐ¿¡ ´ÙÀ½ ½ºÅ¸ÀÏÀ» Ãß°¡Çϼ¼¿ä. */

/* --- index.html ÆäÀÌÁö ÇÏ´Ü °íÁ¤ ¾×¼Ç ¹öÆ° ½ºÅ¸ÀÏ --- */
.footer-actions-container-index {
    position: fixed;
    /* È­¸é ÇÏ´Ü¿¡ °íÁ¤ */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    /* ¹öÆ°µéÀ» ´ãÀ» ÃæºÐÇÑ ³ôÀÌ */
    background-color: rgba(255, 255, 255, 0.2);
    /* ¹ÝÅõ¸í ¹è°æ */
    backdrop-filter: blur(5px);
    /* ºí·¯ È¿°ú */
    display: flex;
    justify-content: center;
    /* ¹öÆ°µéÀ» Áß¾Ó¿¡ ¹èÄ¡ */
    align-items: center;
    /* ¹öÆ°µéÀ» ¼öÁ÷ Áß¾Ó¿¡ ¹èÄ¡ */
    padding: 0 20px;
    /* Á¿ì Æеù */
    box-sizing: border-box;
    z-index: 1001;
    /* ´Ù¸¥ ÄÜÅÙÃ÷ À§¿¡ ¿Àµµ·Ï */
    box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.05);
    /* À§ÂÊ¿¡ ¹Ì¼¼ÇÑ ±×¸²ÀÚ */
}

/* ¹öÆ°µéÀ» °¨½Î´Â ·¡ÆÛ (°¡·Î Á¤·Ä ¹× ¹ÝÀÀÇü Á¶Á¤À» À§ÇØ Ãß°¡) */
.button-wrapper {
    display: flex;
    /* °¡·Î ¹èÄ¡ */
    justify-content: center;
    /* ±âº»ÀûÀ¸·Î Áß¾Ó Á¤·Ä */
    align-items: center;
    /* ¼¼·Î Áß¾Ó Á¤·Ä */
    gap: 15px;
    /* ¹öÆ°µé »çÀÌ °£°Ý */
    width: 100%;
    /* ºÎ¸ð ÄÁÅ×À̳ʿ¡ ¸ÂÃã */
    max-width: 800px;
    /* ÃÖ´ë ³Êºñ Á¦ÇÑ (ÄÜÅÙÃ÷ ³Êºñ¿¡ ¸ÂÃç Á¶Àý) */
}

/* index.html ÆäÀÌÁöÀÇ ¾×¼Ç ¹öÆ° °øÅë ½ºÅ¸ÀÏ */
.action-button {
    padding: 12px 25px;
    /* ¹öÆ° ³»ºÎ Æеù */
    border-radius: 25px;
    /* ¸Å¿ì µÕ±Ù ¸ð¼­¸® */
    font-size: 1em;
    /* ÆùÆ® Å©±â */
    font-weight: 700;
    /* ±½Àº ±Û¾¾ */
    border: none;
    /* Å׵θ® ¾øÀ½ */
    cursor: pointer;
    transition: all var(--transition-speed);
    /* ºÎµå·¯¿î Àüȯ È¿°ú */
    display: flex;
    align-items: center;
    /* ¾ÆÀÌÄÜ°ú ÅؽºÆ® ¼öÁ÷ Áß¾Ó Á¤·Ä */
    justify-content: center;
    /* ¹öÆ° ³»¿ë Áß¾Ó Á¤·Ä */
    gap: 8px;
    /* ¾ÆÀÌÄÜ°ú ÅؽºÆ® »çÀÌ °£°Ý */
    color: rgb(74, 87, 209);
    /* ±ÛÀÚ »ö»ó */

    /* ¹öÆ° ³Êºñ¸¦ 50%·Î ¼³Á¤ÇÏ°í flex ¾ÆÀÌÅÛÀÇ ¼Ó¼ºÀ» ÁöÁ¤ÇÕ´Ï´Ù. */
    flex: 0 0 calc(50% - 7.5px);
    /* flex-grow: 0, flex-shrink: 0, flex-basis: calc(50% - gap/2) */
    /* gapÀÌ 15pxÀ̹ǷΠ15px/2 = 7.5px */
    max-width: calc(50% - 7.5px);
    /* ÃÖ´ë ³Êºñµµ 50%·Î Á¦ÇÑ */
    box-sizing: border-box;
    /* ÆеùÀÌ ³Êºñ¿¡ Æ÷ÇԵǵµ·Ï */
    min-width: 0;
    /* È­¸éÀÌ Á¼¾ÆÁ®µµ ¹öÆ° ³Êºñ°¡ ÁÙ¾îµé ¼ö ÀÖµµ·Ï ÇÔ */
}

/* ½Ç½Ã°£ Äݼ¾ÅÍ ¹öÆ° ½ºÅ¸ÀÏ */
.call-button {
    background-color: rgba(186, 151, 250, 0.2);
    backdrop-filter: blur(5px);
    /* ºí·¯ °­µµ ÃÖ´ë·Î */
    box-shadow:
        7px 7px 10px var(--neumo-shadow-dark),
        -7px -7px 10px var(--neumo-shadow-light);
    transition: opacity var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}

.call-button:hover {

    color: rgb(255, 255, 255);
    /* ±ÛÀÚ »ö»ó */
    background-color: #003874;
    /* ¾à°£ ´õ ÁøÇÑ »ö»ó */
    box-shadow: inset 3px 3px 6px rgba(0, 37, 75, 0.3), inset -3px -3px 6px rgba(0, 77, 157, 0.3);
    /* Àμ ±×¸²ÀÚ */
    transform: translateY(1px);
}

.call-button:active {
    transform: translateY(2px);
    box-shadow: inset 5px 5px 10px rgba(0, 37, 75, 0.3), inset -5px -5px 10px rgba(0, 77, 157, 0.3);
}

/* Ä«Ä«¿ÀÅå »ó´ã ¹öÆ° ½ºÅ¸ÀÏ */
.consult-button {
    background-color: rgba(186, 151, 250, 0.2);
    backdrop-filter: blur(5px);
    /* ºí·¯ °­µµ ÃÖ´ë·Î */
    box-shadow:
        7px 7px 10px var(--neumo-shadow-dark),
        -7px -7px 10px var(--neumo-shadow-light);
    transition: opacity var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}

.consult-button:hover {
    background-color: #ffd248;
    /* È£¹ö ½Ã ¾à°£ ´õ ÁøÇÑ ³ë¶õ»ö */
    color: rgb(0, 63, 134);
    /* ±ÛÀÚ »ö»ó */
    box-shadow: inset 3px 3px 6px rgba(255, 218, 106, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
    transform: translateY(1px);
}

.consult-button:active {
    transform: translateY(2px);
    box-shadow: inset 5px 5px 10px rgba(255, 218, 106, 0.3), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
}

/* ¾ÆÀÌÄÜ ½ºÅ¸ÀÏ (Font Awesome »ç¿ë ½Ã) */
.action-button .fas {
    font-size: 1.1em;
    /* ¾ÆÀÌÄÜ Å©±â */
}

/* --- ¸ð¹ÙÀÏ È¯°æ¿¡¼­ ¹öÆ° ·¹À̾ƿô º¯°æ --- */
@media (max-width: 600px) {
    .footer-actions-container-index {
        height: 120px;
        /* ¸ð¹ÙÀÏ¿¡¼­´Â ³ôÀ̸¦ ´Ã·Á µÎ ¹öÆ°ÀÌ ¼¼·Î·Î ½×ÀÏ °ø°£ È®º¸ */
        padding: 10px 20px;
        /* Æеù Á¶Á¤ */
    }

    .button-wrapper {
        flex-direction: column;
        /* ¸ð¹ÙÀÏ¿¡¼­´Â ¹öÆ°À» ¼¼·Î·Î ½×À½ */
        gap: 10px;
        /* ¹öÆ° »çÀÌ °£°Ý ÁÙÀÓ */
        width: 100%;
        /* ºÎ¸ð ³Êºñ 100% Â÷Áö */
        align-items: center;
        /* ¼¼·Î·Î ½×À» ¶§´Â ³Êºñ 100%¸¦ Â÷ÁöÇϵµ·Ï º¯°æ */
    }

    .action-button {
        width: 100%;
        /* ¸ð¹ÙÀÏ¿¡¼­´Â ¹öÆ°ÀÌ ºÎ¸ð ³Êºñ¸¦ ²Ë ä¿ìµµ·Ï */
        max-width: none;
        /* ÃÖ´ë ³Êºñ Á¦ÇÑ ÇØÁ¦ */
        flex: none;
        /* flex ¼Ó¼ºÀ» ÇØÁ¦ÇÏ¿© width: 100%°¡ Á¦´ë·Î ÀÛµ¿ÇÏ°Ô ÇÔ */
        padding: 10px 20px;
        /* ¹öÆ° Æеù ÁÙÀÓ */
        font-size: 0.9em;
        /* ÆùÆ® Å©±â ÁÙÀÓ */
    }

    .action-button .fas {
        font-size: 1em;
        /* ¾ÆÀÌÄÜ Å©±â »ó´ëÀûÀ¸·Î À¯Áö */
    }
}


/* index.html ÆäÀÌÁöÀÇ ¾×¼Ç ¹öÆ° °øÅë ½ºÅ¸ÀÏ Á¾·á*/


/* --- 9. ¹Ìµð¾î º¯È¯±â ½ºÅ¸ÀÏ (.media-converter-app ½ºÄÚÇÁ) --- */
.media-converter-app {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.media-converter-app .main-container-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 800px;
    padding: 0;
    box-sizing: border-box;
}

.media-converter-app .card {
    /* .mixture-app .card ÀçÈ°¿ë */
    margin-bottom: 0;
    /* Æ۳Π¾Û°ú ´Þ¸® ÆäÀÌÁö¿¡ ÇϳªÀÇ Ä«µå µ¢¾î¸®À̹ǷΠÇÏ´Ü ¸¶ÁøÀº wrapper¿¡¼­ °ü¸® */
}

/* ÆÄÀÏ ¾÷·Îµå ¿µ¿ª */
.media-converter-app .file-upload-area {
    margin-top: 20px;
    margin-bottom: 20px;
    border: none;
    border-radius: 10px;
    padding: 15px;
    background-color: var(--background-color);
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    width: 100%;
    box-sizing: border-box;
}

.media-converter-app .drop-zone {
    border: 3px dashed var(--primary-blue);
    /* ±âº»ÀûÀ¸·Î ÆĶõ»ö Á¡¼± Å׵θ® */
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    color: var(--primary-blue);
    cursor: pointer;
    transition: border-color var(--transition-speed), background-color var(--transition-speed);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: 700;
}

.media-converter-app .drop-zone i {
    font-size: 3em;
    margin-bottom: 15px;
    opacity: 0.8;
}

/* ÆÄÀÏÀ» µå·¡±×ÇßÀ» ¶§ È¿°ú */
.media-converter-app .drop-zone.drag-over {
    border-color: var(--primary-blue-dark);
    /* µå·¡±× ¿À¹ö ½Ã ´õ ÁøÇÑ ÆĶõ»ö */
    background-color: rgba(0, 56, 116, 0.1);
    /* ¾à°£ÀÇ ÆĶõ ¹è°æ */
    color: var(--primary-blue-dark);
}

/* ¼û°ÜÁø ÆÄÀÏ ÀÔ·Â Çʵå */
.media-converter-app .drop-zone input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    /* µå·¡±× Á¦½ºÃ³¸¦ À§ÇØ ¿µ¿ª Àüü¿¡ °ÉÄ¡°Ô ÇÔ */
}

/* º¯È¯ °á°ú ¸ñ·Ï */
.media-converter-app .conversion-results-list {
    margin-top: 20px;
    padding: 15px;
    background-color: var(--background-color);
    box-shadow: inset 2px 2px 5px var(--neumo-shadow-dark), inset -2px -2px 5px var(--neumo-shadow-light);
    border-radius: 10px;
    max-height: 500px;
    /* ½ºÅ©·ÑÀ» À§ÇØ ÃÖ´ë ³ôÀÌ ÁöÁ¤ */
    overflow-y: auto;
    /* ³»¿ëÀÌ ³ÑÄ¥ °æ¿ì ½ºÅ©·Ñ */
    min-width: 0;
}

.media-converter-app .conversion-results-list .result-item {
    display: flex;
    flex-wrap: wrap;
    /* ³»¿ëÀÌ ±æ °æ¿ì ÁÙ¹Ù²Þ */
    justify-content: space-between;
    /* Ç׸ñÀ» ¾çÂÊ ³¡À¸·Î Á¤·Ä */
    align-items: center;
    /* ¼¼·Î Áß¾Ó Á¤·Ä */
    padding: 12px 15px;
    margin-bottom: 8px;
    /* °¢ Ç׸ñ »çÀÌ °£°Ý */
    background-color: var(--background-color);
    /* ¾ÆÀÌÅÛ ¹è°æ */
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    /* ³×¿À¸ðÇÇÁò È¿°ú */
    border-radius: 8px;
    font-size: 0.95em;
    color: var(--text-color-dark);
    transition: all var(--transition-speed);
    width: 100%;
    /* ÄÁÅ×À̳ʿ¡ ²Ë Â÷°Ô */
    box-sizing: border-box;
}

.media-converter-app .conversion-results-list .result-item:last-child {
    margin-bottom: 0;
}

.media-converter-app .conversion-results-list .result-item .file-info {
    flex-grow: 1;
    /* ÆÄÀÏ À̸§, ¿ë·® µîÀÌ Â÷ÁöÇÏ´Â °ø°£À» ´Ã¸² */
    margin-right: 15px;
    /* ¹öÆ°°úÀÇ °£°Ý */
    word-break: break-all;
    /* ³Ê¹« ±æ¸é ÀÚµ¿À¸·Î ÁÙ¹Ù²Þ */
}

.media-converter-app .conversion-results-list .result-item .file-name {
    font-weight: 700;
    margin-bottom: 5px;
    /* ÆÄÀÏ À̸§°ú ¿ë·® »çÀÌ °£°Ý */
    display: block;
    /* »õ·Î¿î ÁٷΠǥ½Ã */
}

.media-converter-app .conversion-results-list .result-item .file-sizes {
    font-size: 0.9em;
    color: var(--text-color-light);
}

.media-converter-app .conversion-results-list .result-item .convert-btn {
    /* º¯È¯ ÈÄ ¹öÆ° */
    flex-shrink: 0;
    /* ¹öÆ° ³Êºñ°¡ ÁÙ¾îµéÁö ¾Êµµ·Ï */
    margin-left: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background-color: var(--primary-blue);
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.media-converter-app .conversion-results-list .result-item .convert-btn:hover {
    background-color: var(--primary-blue-dark);
    transform: translateY(-1px);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

.media-converter-app .conversion-results-list .result-item .convert-btn.processing {
    background-color: #aaa;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ÆÄÀÏ º¯È¯ »óÅ¿¡ µû¸¥ ¸Þ½ÃÁö */
.media-converter-app .conversion-status {
    font-size: 0.9em;
    color: var(--text-color-light);
    font-style: italic;
    white-space: nowrap;
    margin-left: 10px;
}

.media-converter-app .conversion-status.success {
    color: var(--success-green);
    /* ¼º°ø ½Ã ³ì»ö */
    font-weight: 500;
}

.media-converter-app .conversion-status.error {
    color: var(--danger-red);
    /* ¿À·ù ½Ã »¡°£»ö */
    font-weight: 700;
}

/* ÁøÇà ¹Ù */
.media-converter-app .progress-bar-container {
    width: 100%;
    background-color: var(--background-color);
    border-radius: 8px;
    overflow: hidden;
    height: 8px;
    margin-top: 5px;
    /* ¾Æ·¡ ÆÄÀÏ Á¤º¸¿ÍÀÇ °£°Ý */
}

.media-converter-app .progress-bar {
    height: 100%;
    background-color: var(--primary-blue);
    width: 0%;
    /* Ãʱ⠻óÅ */
    transition: width 0.2s ease-in-out;
}

/* ´Ù¿î·Îµå ¸µÅ© ½ºÅ¸ÀÏ */
.media-converter-app .download-link {
    display: inline-block;
    /* ¶Ç´Â blockÀ¸·Î ÇÊ¿äÇÑ °æ¿ì */
    color: var(--primary-blue);
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
}

.media-converter-app .download-link:hover {
    color: var(--primary-blue-dark);
}


/* ¹ÝÀÀÇü Á¶Á¤: ÆÄÀÏ °á°ú ¸ñ·ÏÀÇ °æ¿ì */
@media (max-width: 768px) {
    .media-converter-app .drop-zone {
        padding: 30px;
    }

    .media-converter-app .conversion-results-list .result-item {
        flex-direction: column;
        /* ÀÛÀº È­¸é¿¡¼­´Â ¿­ ¹æÇâÀ¸·Î Á¤·Ä */
        align-items: flex-start;
        /* ¿ÞÂÊ Á¤·Ä */
        margin-bottom: 12px;
    }

    .media-converter-app .conversion-results-list .result-item .file-info {
        margin-right: 0;
        width: 100%;
        /* ºÎ¸ð ³Êºñ¿¡ ¸ÂÃã */
        margin-bottom: 10px;
    }

    .media-converter-app .conversion-results-list .result-item .file-name {
        margin-bottom: 5px;
        /* ÆÄÀÏ À̸§°ú ¿ë·® °£ °£°Ý */
    }

    .media-converter-app .conversion-results-list .result-item .file-sizes {
        font-size: 0.85em;
    }

    .media-converter-app .conversion-results-list .result-item .convert-btn {
        margin-left: 0;
        width: 100%;
        /* ¹öÆ°µµ ³Êºñ¸¦ ²Ë ä¿ìµµ·Ï */
        text-align: center;
    }
}

/* --- 10. ¹Ìµð¾î º¯È¯±â ½ºÅ©¸³Æ® --- */
/* .media-converter-app .main-title (ÀÌ Å¬·¡½º¸¸ Àû¿ëÇϸé style.css¿¡ Ãß°¡ ÇÊ¿ä ¾øÀ½) */

/* ³ª¸ÓÁö CSS´Â style.css¿¡ .mixture-app µîÀÇ ±âÁ¸ ±ÔÄ¢µéÀÌ Àû¿ëµË´Ï´Ù. */

/* --- 12. °£Æí Á¦¾È¼­ ¸¸µé±â ½ºÅ¸ÀÏ (¼¼·Î ¹èÄ¡ ¼öÁ¤ ¹öÀü) --- */
.proposal-generator-app .proposal-flex-container {
    display: flex;
    flex-direction: column;
    /* Ç×»ó ¼¼·Î(¼öÁ÷) Á¤·ÄÀ» À¯ÁöÇÕ´Ï´Ù. */
    gap: 40px;
    width: 100%;
    align-items: center;
    /* Ä«µåµéÀ» Áß¾Ó Á¤·ÄÇÕ´Ï´Ù. */
}

.proposal-generator-app .card {
    width: 100%;
    max-width: 800px;
    /* Ä«µåÀÇ ÃÖ´ë ³Êºñ¸¦ ÁöÁ¤ÇÏ¿© ³Ê¹« ³Ð¾îÁöÁö ¾Ê°Ô ÇÕ´Ï´Ù. */
    margin-bottom: 0;
}

/* A. ÀÔ·Â ¹× ¼±Åà īµå */


.proposal-generator-app .input-selection-card .subsection-title {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--primary-blue-dark);
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--background-color2);
}

.proposal-generator-app .services-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.proposal-generator-app .service-option-box {
    padding: 15px;
    border-radius: 12px;
    background-color: var(--background-color);
    box-shadow: 5px 5px 10px var(--neumo-shadow-dark), -5px -5px 10px var(--neumo-shadow-light);
    cursor: pointer;
    transition: all var(--transition-speed);
    text-align: center;
}

.proposal-generator-app .service-option-box:hover {
    transform: translateY(-2px);
}

.proposal-generator-app .service-option-box.selected {
    background-color: var(--primary-blue-dark);
    color: white;
    box-shadow: inset 5px 5px 10px var(--selected-neumo-shadow-dark), inset -5px -5px 10px var(--selected-neumo-shadow-light);
    transform: translateY(1px);
}

.proposal-generator-app .service-option-box .service-name {
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
    font-size: 1.05em;
}

.proposal-generator-app .service-option-box.selected .service-name {
    color: white;
}

.proposal-generator-app .service-option-box .service-price {
    font-size: 0.9em;
    color: var(--text-color-light);
}

.proposal-generator-app .service-option-box.selected .service-price {
    color: #e0e0e0;
}

/* B. °á°ú Ä«µå */


.proposal-generator-app .proposal-output-area {
    padding: 20px;
    border-radius: 12px;
    background-color: var(--background-color);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    margin-bottom: 30px;
}

.proposal-generator-app .proposal-main-title {
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
    color: var(--primary-blue-dark);
    margin-bottom: 10px;
}

.proposal-generator-app .proposal-intro-text {
    font-size: 1em;
    color: var(--text-color-dark);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 25px;
}

.proposal-generator-app .proposal-services-list .proposal-service-item {
    margin-bottom: 20px;
}

.proposal-generator-app .proposal-services-list h4 {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 8px;
}

.proposal-generator-app .proposal-services-list p {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--text-color-light);
    margin: 0;
}

/* °ßÀû¼­ Å×À̺í */
.proposal-generator-app .quotation-output-area {
    margin-top: 20px;
}

.proposal-generator-app .quotation-table-wrapper {
    overflow-x: auto;
}

.proposal-generator-app #quotationTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.proposal-generator-app #quotationTable th,
.proposal-generator-app #quotationTable td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
}

.proposal-generator-app #quotationTable th {
    background-color: var(--chip-bg);
    font-weight: 700;
}

.proposal-generator-app #quotationTable td:last-child {
    text-align: center;
    font-weight: 500;
}

.proposal-generator-app #quotationTable tfoot td {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--primary-blue-dark);
    border-bottom: none;
}

.proposal-generator-app #quotationTable tfoot td:last-child {
    color: var(--alert-red);
}

.proposal-generator-app .vat-notice {
    text-align: center;
    font-size: 0.8em;
    color: var(--text-color-light);
    margin-top: 8px;
    font-style: italic;
}




/* --- AI ¿µ»ó ÇÁ·ÒÇÁÆ® »ý¼º±â: °á°úâÀ» 'ÀÔ·Ââ'°ú µ¿ÀÏÇÑ µðÀÚÀÎÀ¸·Î º¯°æ --- */
/* °á°úâ textarea ½ºÅ¸ÀÏÀº »ó´Ü ÇÁ·ÒÇÁÆ® »ý¼º±â ¼½¼Ç¿¡¼­ ÅëÇÕ Á¤ÀǵǾú½À´Ï´Ù. */


/* --- ½ºÅ©·Ñ¹Ù µðÀÚÀÎ (¹àÀº Å׸¶¿¡ ¸Â°Ô ¼öÁ¤) --- */
.video-prompt-maker-app .results-display-card textarea#resultPrompt::-webkit-scrollbar {
    width: 10px;
}

.video-prompt-maker-app .results-display-card textarea#resultPrompt::-webkit-scrollbar-track {
    background: var(--background-color);
    /* ¹è°æ»ö°ú µ¿ÀÏÇÏ°Ô */
    border-radius: 10px;
}

.video-prompt-maker-app .results-display-card textarea#resultPrompt::-webkit-scrollbar-thumb {
    background-color: #b3bada;
    /* ¾îµÎ¿î ±×¸²ÀÚ »ö»óÀ¸·Î ÇÚµé */
    border-radius: 10px;
    border: 2px solid var(--background-color);
    /* Æ®·¢°ú ºÐ¸®µÇ´Â ´À³¦À» À§ÇÑ Å׵θ® */
}

.video-prompt-maker-app .results-display-card textarea#resultPrompt::-webkit-scrollbar-thumb:hover {
    background-color: #9a9dd1;
}



/* H1 Á¦¸ñ¿¡ ºû³ª´Â ÅؽºÆ® ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú Ãß°¡ */
.funnel-app .main-title,
.analyzer-app .main-title,
.code-app .main-title,
.image-prompt-maker-app .main-title,
.inventory-app .main-title,
.location-selector-app .main-title,
.naver-blog-prompt-app .main-title,
.prompt-generator-app .main-title,
.proposal-generator-app .main-title,
.recommendation-app .main-title,
.reverse-scenario-prompt-app .main-title,
.shape-image-prompt-maker-app .main-title,
.shorts-prompt-app .main-title,
.topic-prompt-app .main-title,
.video-prompt-maker-app .main-title,
.youtube-prompt-app .main-title {
    /* 1. ¹è°æ ±×¶óµ¥À̼ÇÀ» ÅؽºÆ® ¸ð¾çÀ¸·Î À߶ó³À´Ï´Ù. */
    background-clip: text;
    -webkit-background-clip: text;
    /* À¥Å¶ ºê¶ó¿ìÀú(Å©·Ò, »çÆĸ® µî) ȣȯ¼ºÀ» À§ÇÔ */

    /* 2. ÅؽºÆ®ÀÇ ½ÇÁ¦ »ö»óÀº Åõ¸íÇÏ°Ô ¸¸µé¾î ¹è°æÀÌ º¸À̵µ·Ï ÇÕ´Ï´Ù. */
    color: transparent;

    /* 3. ¹è°æ¿¡ ±×¶óµ¥ÀÌ¼Ç À̹ÌÁö¸¦ Àû¿ëÇÕ´Ï´Ù. */
    background-image: linear-gradient(90deg,
            /* ±×¶óµ¥ÀÌ¼Ç ¹æÇâ: ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î */
            var(--selected-neumo-shadow-dark),
            /* ½ÃÀÛ »ö»ó (#00254B) */
            var(--selected-neumo-shadow-m),
            /* ºû³ª´Â »ö»ó (#004D9D) */
            var(--selected-neumo-shadow-dark)
            /* ´Ù½Ã ½ÃÀÛ »ö»óÀ¸·Î µ¹¾Æ¿È */
        );

    /* 4. ¹è°æ À̹ÌÁöÀÇ Å©±â¸¦ 2¹è·Î ´Ã·Á ¿òÁ÷ÀÏ °ø°£À» È®º¸ÇÕ´Ï´Ù. */
    background-size: 200% auto;

    /* 5. 'shine-effect' ¾Ö´Ï¸ÞÀ̼ÇÀ» 3ÃÊ ÁÖ±â·Î ¹«ÇÑ ¹Ýº¹½Ãŵ´Ï´Ù. */
    animation: shine-effect 8s linear infinite;
}


@keyframes shadow-effect {

    /* ½ÃÀÛ ½ÃÁ¡: ±×¸²ÀÚ°¡ ¿À¸¥ÂÊ ´õ ¸Õ °÷(250%)¿¡ À§Ä¡ */
    0% {
        /* background-positionÀÇ µÎ ¹ø° °ªÀÌ µÎ ¹ø° ¹è°æ(±×¸²ÀÚ)¿¡ ÇØ´çÇÕ´Ï´Ù. */
        background-position: 200% center, 250% center;
    }

    /* Á¾·á ½ÃÁ¡: ±×¸²ÀÚ°¡ ¿ÞÂÊ ´õ ¸Õ °÷(-150%)À¸·Î À̵¿ ¿Ï·á */
    100% {
        background-position: -200% center, -150% center;
    }
}


/* --- ¸ðµç ÆäÀÌÁö ÇÏ´Ü °íÁ¤ ǪÅÍ °ãħ ¹æÁö --- */
.home-content,
.recommendation-app,
.mixture-app,
.inventory-app,
.analyzer-app,
.funnel-app,
.location-selector-app,
.prompt-generator-app,
.youtube-prompt-app,
.reverse-scenario-prompt-app,
.naver-blog-prompt-app,
.word-finder-app,
.media-converter-app,
.proposal-generator-app,
.video-prompt-maker-app,
.shape-image-prompt-maker-app,
.shorts-prompt-app,
.topic-prompt-app,
.code-analyzer-app,
.inspector-app {
    padding-bottom: 140px;
    /* ¸ð¹ÙÀÏ ÇªÅÍ ³ôÀÌ(120px) + ¿©À¯ °ø°£ 20px */
}

/* µ¥½ºÅ©Å¾ È­¸é (601px ÀÌ»ó)¿¡¼­´Â ǪÅÍ ³ôÀÌ°¡ ´Ù¸£¹Ç·Î ¿©¹é Á¶Á¤ */
@media (min-width: 601px) {

    .home-content,
    .recommendation-app,
    .mixture-app,
    .inventory-app,
    .analyzer-app,
    .funnel-app,
    .location-selector-app,
    .prompt-generator-app,
    .youtube-prompt-app,
    .reverse-scenario-prompt-app,
    .naver-blog-prompt-app,
    .word-finder-app,
    .media-converter-app,
    .proposal-generator-app,
    .video-prompt-maker-app,
    .shape-image-prompt-maker-app,
    .shorts-prompt-app,
    .topic-prompt-app,
    .code-analyzer-app,
    .inspector-app {
        padding-bottom: 100px;
        /* µ¥½ºÅ©Å¾ ǪÅÍ ³ôÀÌ(80px) + ¿©À¯ °ø°£ 20px */
    }
}


/* --- 12. ¼îÇθô ¼ÕÀͺб⠰è»ê±â ½ºÅ¸ÀÏ (.shopping-mall-app ½ºÄÚÇÁ) --- */
/* mixture-app, proposal-generator-appÀÇ ½ºÅ¸ÀÏÀ» ÀϺΠÀçÈ°¿ëÇÕ´Ï´Ù. */

.shopping-mall-app .subsection-title {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--primary-blue-dark);
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--background-color2);
}

.shopping-mall-app .services-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
}

/* Ç÷§Æû ¼±Åà ¹Ú½º ±âº» ½ºÅ¸ÀÏ */
.shopping-mall-app .service-option-box {
    padding: 15px;
    border-radius: 12px;
    background-color: var(--background-color);
    box-shadow: 5px 5px 10px var(--neumo-shadow-dark), -5px -5px 10px var(--neumo-shadow-light);
    cursor: pointer;
    transition: all var(--transition-speed);
    text-align: center;
}

.shopping-mall-app .service-option-box:hover {
    transform: translateY(-2px);
}

/* Ç÷§Æû ¼±Åà ½Ã Àû¿ëµÉ ½ºÅ¸ÀÏ (°¡Àå Áß¿äÇÑ ºÎºÐ) */
.shopping-mall-app .service-option-box.selected {
    background-color: var(--primary-blue-dark);
    color: white;
    box-shadow: inset 5px 5px 10px var(--selected-neumo-shadow-dark), inset -5px -5px 10px var(--selected-neumo-shadow-light);
    transform: translateY(1px);
}

.shopping-mall-app .service-option-box .service-name {
    font-weight: 700;
    font-size: 1.05em;
}

.shopping-mall-app .service-option-box.selected .service-name {
    color: white;
}

/* °á°úâ ½ºÅ¸ÀÏ */
.shopping-mall-app .analyzer-result-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.shopping-mall-app .result-item {
    padding: 15px 20px;
    border-radius: 12px;
    background-color: var(--background-color);
    box-shadow: inset 3px 3px 6px var(--neumo-shadow-dark), inset -3px -3px 6px var(--neumo-shadow-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shopping-mall-app .result-label {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--primary-blue-dark);
}

.shopping-mall-app .result-value {
    font-size: 1.1em;
    font-weight: 700;
}

.shopping-mall-app .result-item.success .result-value {
    color: var(--success-green);
    /* ¼º°ø/ÈæÀÚ */
}

.shopping-mall-app .result-item.error .result-value {
    color: var(--danger-red);
    /* ¿À·ù/ÀûÀÚ */
}

/* --- ¼îÇθô °è»ê±â: °è»ê °úÁ¤ ¼³¸í ½ºÅ¸ÀÏ --- */
.shopping-mall-app .result-item>div {
    display: flex;
    flex-direction: column;
}

.shopping-mall-app .calculation-breakdown {
    display: block;
    font-size: 0.75em;
    color: var(--text-color-light);
    font-style: italic;
    margin-top: 5px;
}
/* ??? ???? ?????? ?¢¯? ??? (Bootstrap ????? ??u) */
#footer .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-right: -15px;
    margin-left: -15px;
}

#footer .footer-contact,
#footer .footer-links {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 15px;
}

/* PC ??? ??????? 50%?? ?¢¯? ???? */
@media (min-width: 768px) {
    #footer .footer-contact,
    #footer .footer-links {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ??? ??????? ???? ???? ???? (?¥æ??? ????? ??????) */
#footer {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* Designed by majung ???? ???? ???? */
#footer .footer-bottom {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
    margin-top: 20px;
}