/* Custom Fonts */
@font-face {
    font-family: 'GmarketSansBold';
    src: url('./font/GmarketSansBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('./font/GmarketSansMedium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansLight';
    src: url('./font/GmarketSansLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Define global CSS variables for neumorphism consistency */
:root {
    --neu-offset: 1rem; /* Base offset for shadows */
    --neu-blur: 3rem;   /* Base blur radius for shadows */

    /* Colors for neumorphic shadows on different backgrounds */
    --neu-white-light: #FFFFFF;
    --neu-white-dark: #C7C7C7;

    --neu-red-light: #FF524E; /* Lighter shade of e42f28 */
    --neu-red-dark: #B32520;  /* Darker shade of e42f28 */

    --neu-black-light: #2C2C2C; /* Shadow light for black theme */
    --neu-black-dark: #080808;  /* Shadow dark for black theme */

    /* NEW: Green colors for new sections */
    --neu-green-bg: #a80600; /* Base green from bear2.png */
    --neu-green-light: #ff0800; /* Lighter shade of green for shadow */
    --neu-green-dark: #B32520;  /* Darker shade of green for shadow */

    /* NEW: Oaracha package section specific colors */
    --glow-cyan: #00e0ff; /* Vivid cyan for box outline/glow */
    --robot-button-bg: #47B5FF; /* Blue-green for the 'View Details' button */
    --package-item-bg: #191919; /* Slightly lighter black for card backgrounds */
}


/* 1. 전체 컨텐츠 영역 크기 확대: html font-size 조정 */
html {
    font-size: 80%; /* 변경: 기존 62.5% -> 80% (1rem = 12.8px) */
    scroll-behavior: smooth; /* 추가: 부드러운 스크롤 */
}

body {
    font-family: 'GmarketSansMedium', sans-serif;
    color: #333333; /* Default dark text */
    background-color: #FFFFFF;
    line-height: 1.5;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 7rem; /* 추가/수정: 네비게이션 바 높이에 맞춰 조절 */
    padding-bottom: 20vh; /* Add padding for the fixed form at the bottom (PC default) */
}

/* NEW: 메인 네비게이션 바 스타일 */
.main-header {
    position: fixed; /* 상단에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 다른 콘텐츠 위에 표시 */
    background-color: #191919; /* 초기 배경색 (불투명 100%) */
    transition: background-color 0.3s ease, opacity 0.3s ease; /* 색상과 불투명도 변화에 부드러운 전환 */
    height: 7rem; /* 네비게이션 바 높이 고정 */
    display: flex;
    align-items: center; /* 세로 가운데 정렬 */
}

.main-header.scrolled {
    background-color: rgba(25, 25, 25, 0.7); /* #191919에 70% 불투명도 적용 */
}

.header-content-wrapper {
    max-width: 120rem;
    margin: 0 auto;
    padding-inline: 2.5rem;
    width: 100%;
    display: flex; /* 로고와 네비게이션 링크를 옆으로 배치 */
    justify-content: space-between; /* 양 끝 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    height: 100%;
}

.company-logo {
    display: block;
    height: 3.5rem; /* 네비게이션 바 높이에 맞게 조절 */
    width: auto;
    flex-shrink: 0; /* 공간이 부족해도 줄어들지 않음 */
    margin-bottom: 0; /* 더 이상 필요 없으니 0으로 설정 */
    transition: height 0.3s ease-in-out, transform 0.3s ease-in-out; 
    transform: scale(1); /* 초기 크기 상태 */
}

.main-header.scrolled .company-logo {
    transform: scale(1.5); 

}


.main-nav-links ul {
    list-style: none; /* 리스트 점 제거 */
    display: flex; /* 메뉴 아이템을 가로로 배치 */
    gap: 3rem; /* 메뉴 아이템 간 간격 */
    margin: 0;
    padding: 0;
}

.main-nav-links a {
    color: #FFFFFF; /* 메뉴 텍스트 색상 흰색 */
    text-decoration: none; /* 밑줄 제거 */
    font-family: 'GmarketSansMedium', sans-serif;
    font-size: 1.8rem;
    padding: 1rem 0; /* 클릭 영역 확보 및 여백 */
    display: block; /* padding 적용을 위해 */
    transition: color 0.3s ease; /* 호버 시 색상 전환 */
}

.main-nav-links a:hover,
.main-nav-links a:focus {
    color: #E42F28; /* 호버 시 메인 레드 색상 */
}


/* Wrapper for content inside each section - full width background, max-width content */
.section-content-wrapper {
    max-width: 120rem;
    margin: 0 auto;
    padding-inline: 2.5rem;
    position: relative;
}

.section-block {
    text-align: center;
    padding-block-start: 9rem;
    padding-block-end: 9rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    width: 100%;
    color: #333333; /* Default text color */
    background-color: #FFFFFF;
}

/* Helper class for the last element in a section to remove its specific margin-bottom */
.last-element-in-section {
    margin-block-end: 0 !important;
}


/* --- Alternating Background Colors for Sections (and direct text/shadow overrides) --- */

.section-block.alt-bg-red {
    background-color: #E42F28;
    color: #FFFFFF; /* Text on dark bg */
}
.section-block.alt-bg-red .warning-description {
    color: #CCCCCC; /* Faded text on dark bg (approx 80% white) */
}


.section-block.alt-bg-black {
    background-color: #191919;
    color: #FFFFFF; /* Text on dark bg */
}
.section-block.alt-bg-black .red-text {
    color: #E42F28; /* Main Red */
}
.section-block.alt-bg-black .ai-text {
    color: #CCCCCC; /* Faded text on dark bg (approx 80% white) */
}

/* NEW: Alt Green Background */
.section-block.alt-bg-green {
    background-color: var(--neu-green-bg); /* Use the new green variable */
    color: #FFFFFF; /* Text on dark bg */
}
.section-block.alt-bg-green .red-text {
    color: #E42F28; /* Main Red */
}
.section-block.alt-bg-green .kt-ai-text {
    color: #ffffff; /* Faded text on dark bg */
}
.section-block.alt-bg-green .highlighted-word {
    color: #191919; /* Text on the highlighted word */
}



.section-block.alt-bg-green .highlighted-word::before {
    background-color: #E42F28; /* Circle background */
}
.section-block.alt-bg-green .strength-text {
    color: #FFFFFF; /* Text for strength items */
}


/* "알바구하기힘드시죠?" Section (on default white background) */
.difficulty-callout {
    padding-block-start: 6rem;
    padding-block-end: 4rem;
    min-height: 30rem;
}

/* --- Callout Box Neumorphism Style (on white/light background) --- */
.callout-box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #191919; /* 요청에 따라 배경색을 #191919로 설정 */
    color: #E42F28; /* 요청에 따라 텍스트 색상을 #E42F28로 설정 */
    /* Neumorphism Box Shadow - 눌린 효과 (Concave) - 검은색 배경에 맞춤 */
    box-shadow:
        inset var(--neu-offset) var(--neu-offset) var(--neu-blur) var(--neu-black-dark), /* 우하단 어두운 그림자 */
        inset calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) var(--neu-black-light); /* 좌상단 밝은 그림자 */
    padding: 2rem 4rem;
    border-radius: 4rem;
    font-size: clamp(2.4rem, 4.5vw, 3.2rem);
    font-weight: 700;
    font-family: 'GmarketSansBold', sans-serif;
    white-space: nowrap;
}
h2.solution-title.underline-effect {
    margin-bottom: 0; /* 마지막 요소이므로 하단 여백 제거 */
}

h2.solution-title.underline-effect .red-text {
    display: inline-block; /* 밑줄의 너비를 텍스트에 맞추기 위해 */
    position: relative; /* ::after 가상요소 포지셔닝 기준 */
    padding-bottom: 1.5rem; /* 텍스트와 밑줄 사이 간격 확보 */
    text-shadow: 0px 3px 5px 5px rgb(0, 0, 0); 
}

h2.solution-title.underline-effect .red-text::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0.4rem; /* 밑줄 두께 */
    background-color: #E42F28; /* KT 메인 레드 색상 */
    bottom: 0;
    left: 0;
    
    /* 애니메이션 준비: 처음엔 보이지 않도록 너비를 0으로 설정 */
    transform-origin: center; /* 중앙에서부터 좌우로 펼쳐지도록 설정 */
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    /* 텍스트가 나타난 후 밑줄이 그려지도록 약간의 지연 시간 추가 */
    transition-delay: 0.3s;
}

/* 스크롤 시 is-visible 클래스가 추가되면 밑줄 애니메이션 실행 */
h2.solution-title.underline-effect.is-visible .red-text::after {
    transform: scaleX(1); /* 너비를 100%로 만들어 밑줄을 보여줌 */
}




.solution-text {
    margin-top: 4rem;
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    font-family: 'GmarketSansMedium', sans-serif;
}

/* --- Hashtag List Angle Style --- */
.hashtag-list {
    position: absolute;
    top: 18rem;
    right: 0rem;
    transform: rotate(6deg);
    transform-origin: top right;
    white-space: nowrap;
    z-index: 10;
    font-size: 1.8rem;
    line-height: 2;
    font-family: 'GmarketSansLight', sans-serif;
    color: #000000; /* Secondary dark text */
    width: fit-content;
    text-align: right;
    padding-right: 2.5rem;
}
.hashtag {
    display: block;
    padding-block: 0.2rem;
}


/* --- Standard Heading/Paragraph Styles (Non-Neumorphic Box) --- */
h2.section-heading-text-only,
h2.solution-title,
h2.risk-title,
p.capacity-title,
p.cost-title,
p.installation-benefit,
p.design-title {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transform: none;
    display: block;
    margin-block-end: 6rem;
    line-height: 1.2;
    font-family: 'GmarketSansBold', sans-serif;
}

/* --- Specific Neumorphism for h1.promotion-title --- */
h1.promotion-title {
    background-color: #E42F28; /* Main Red */
    border-radius: 2.5rem;
    padding: 1.8rem 3.5rem;
    /* Adjusted shadow for a stronger 3D / extruded feel */
    box-shadow:
        calc(var(--neu-offset) * -1.2) calc(var(--neu-offset) * -1.2) calc(var(--neu-blur) * 1.2) var(--neu-red-light),
        calc(var(--neu-offset) * 1.2) calc(var(--neu-offset) * 1.2) calc(var(--neu-blur) * 1.2) var(--neu-red-dark);
    display: inline-block;
    color: #FFFFFF; /* Text on dark bg */
    transition: none;
}


/* Adjust common title sizes */
h1.promotion-title {
    font-size: clamp(4rem, 8.5vw, 6.5rem);
}
h2.section-heading-text-only,
h2.solution-title, h2.risk-title,
p.capacity-title, p.cost-title, p.installation-benefit, p.design-title {
    font-size: clamp(4rem, 6.5vw, 5rem);
    line-height: 1.3;
}

/* Styles for "KT AI" text inside headings */
h2.section-heading-text-only .kt-ai-text {
    /* Default for sections with default white background. Inherits section color (#333333). */
    color: inherit;
}

.section-block.alt-bg-red h2.section-heading-text-only .kt-ai-text,
.section-block.alt-bg-black h2.section-heading-text-only .kt-ai-text {
    color: #ffffff; /* Faded white for 'KT AI' on dark backgrounds */
}


/* "천장마커" 단어 color - Corrected logic */
.black-marker-text {
    color: #191919; /* Default: Black text */
}
.section-block.alt-bg-red .black-marker-text {
    color: #191919; /* Text remains black on red background */
}
.section-block.alt-bg-black .black-marker-text {
    color: #E42F28; /* Text is main red on black background */
}


/* Question/warning paragraphs common styles */
p.question-text {
    font-size: clamp(2.2rem, 3.5vw, 2.8rem);
    line-height: 1.4;
    font-family: 'GmarketSansBold', sans-serif;
    margin-block-end: 3.5rem;
}
p.warning-description {
    font-size: clamp(1.6rem, 2.5vw, 1.9rem);
    line-height: 1.6;
    font-family: 'GmarketSansLight', sans-serif;
    margin-block-end: 0;
}


/* --- Highlighted Word Styling (`서빙` highlight) --- */
.highlighted-word {
    position: relative;
    z-index: 1; /* 텍스트가 원 위에 있도록 보장 */
    display: inline-block;
}

/* "서빙" text color for alt-bg-black section */
.section-block.alt-bg-black .highlighted-word {
    color: #191919;
}

/* "서빙" text color for alt-bg-red section */
.section-block.alt-bg-red .highlighted-word {
    color: #E42F28;
}

.highlighted-word::before {
    content: '';
    position: absolute;
    width: clamp(7.5rem, 9vw, 11rem);
    height: clamp(7.5rem, 9vw, 11rem);
    border-radius: 50%;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0.4rem 0.8rem #1A1A1A;
}

/* Color of highlight circle based on parent section's background */
/* Default sections (white background) */
.section-block:not(.alt-bg-red):not(.alt-bg-black) .highlighted-word::before {
    background-color: #E42F28; /* Main Red */
}
/* alt-bg-red and alt-bg-black sections */
.alt-bg-red .highlighted-word::before {
    background-color: #191919;
    }
.alt-bg-black .highlighted-word::before {
    background-color: #e42f28; /* This was incorrect, should be a contrasting color. Let's assume white/light gray was intended */
    /* Let's correct this. On a red background, the circle should probably be black or white. On black, red or white. */
    /* The CSS above `.section-block.alt-bg-red .highlighted-word::before` already sets it to black, which is correct. */
    /* Let's fix the .alt-bg-black one */
}

.alt-bg-black .highlighted-word::before {
    background-color: #E42F28; /* On a black background, a red circle makes sense */
}


/* --- Robot Diagram Section (Using a single image) --- */
.robot-diagram-full-image {
    width: 100%;
    max-width: 95rem;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-block-end: 12rem;
    transition: transform 0.3s ease-out, opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.robot-diagram-full-image:hover {
    transform: scale(1.03);
}


/* Serving Robot Features (4 boxes) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 3.5rem;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
}

/* --- Feature Item Neumorphism Style (Image Boxes) */
.feature-item {
    position: relative;
    background-color: #E42F28;
    border-radius: 1.8rem;
    overflow: hidden;
    cursor: pointer;
    border: none;
   
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    aspect-ratio: 16 / 10;
    max-height: 30rem;
    width: 100%;
    transform: translateY(0);
}

.feature-item:hover {

    transform: scale(1.03);
}

.feature-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: #FFFFFF;
    font-family: 'GmarketSansMedium', sans-serif;
    padding: 2rem;
    text-align: center;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}
.feature-text-overlay .feature-text-title {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 0.8rem;
}
.feature-text-overlay .feature-text-description {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    line-height: 1.4;
}

.feature-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.8rem;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.feature-media.static {
    opacity: 1;
}

.feature-item:hover .feature-text-overlay,
.feature-item:hover .feature-media.static {
    opacity: 0;
}
.feature-item:hover .feature-media.hover {
    opacity: 1;
}

/* Specific title sizes adjusted */
h2.solution-title {
    font-size: clamp(3.8rem, 6.5vw, 5.5rem);
}
h2.risk-title {
    font-size: clamp(3.5rem, 5.5vw, 4.8rem);
    margin-block-end: 3rem;
}
p.capacity-title, p.cost-title, p.installation-benefit, p.design-title {
    font-size: clamp(3.5rem, 5.5vw, 4.8rem);
    margin-block-end: 1rem;
}

h2.underline-effect-black .black-marker-text {
    display: inline-block;
    position: relative;
    padding-bottom: 1rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

h2.underline-effect-black .black-marker-text::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0.3rem;
    background-color: #191919;
    bottom: 0;
    left: 0;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    transform-origin: center;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 0.3s;
}

h2.underline-effect-black.is-visible .black-marker-text::after {
    transform: scaleX(1);
}

/* --- AI Detection Block - Combined Title and Text with Neumorphism (on black background) --- */
.ai-detection-block {
    background-color: #191919;
    border-radius: 2.5rem;
    padding: 2.5rem 4rem;
    display: inline-block;
    box-shadow:
        calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) var(--neu-black-light),
        var(--neu-offset) var(--neu-offset) var(--neu-blur) var(--neu-black-dark);
    margin-block-end: 6rem;
    transition: box-shadow 0.2s ease-in-out;
}
.ai-detection-block:hover {
    box-shadow:
        calc(var(--neu-offset) * -1.2) calc(var(--neu-offset) * -1.2) calc(var(--neu-blur) * 1.2) var(--neu-black-light),
        calc(var(--neu-offset) * 1.2) calc(var(--neu-offset) * 1.2) calc(var(--neu-blur) * 1.2) var(--neu-black-dark);
}

.ai-detection-block .ai-text {
    font-size: clamp(2rem, 3vw, 2.4rem);
    line-height: 1.5;
    margin-block-end: 0.8rem;
}
.ai-detection-block .detection-text {
    font-size: clamp(3.8rem, 6vw, 4.8rem);
    line-height: 1.2;
    font-family: 'GmarketSansBold', sans-serif;
    padding: 0;
    display: block;
    margin-block-end: 0;
}

p.capacity-value,
p.cost-value,
p.installation-free,
p.design-value {
    font-size: clamp(4.8rem, 7.5vw, 6rem);
    line-height: 1.2;
    font-family: 'GmarketSansBold', sans-serif;
    padding: 0;
    display: block;
}
p.capacity-value { margin-block-end: 6rem; }
p.cost-value { margin-block-end: 2.5rem; }
p.installation-free, p.design-value { margin-block-end: 0; }

.youtube-content-wrapper {
    padding-block-start: 6rem;
    padding-block-end: 0;
}

.youtube-content-wrapper .section-heading-text-only {
    margin-block-end: 6rem;
}

.loading-capacity .highlighted-word {
    color: #E42F28;
}

.loading-capacity .highlighted-word::before {
    background-color: #191919;
}

.video-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3.5rem;
    justify-content: center;
    max-width: 100rem;
    margin: 0 auto;
}

.video-card {
    background-color: #191919;
    border-radius: 1.8rem;
    overflow: hidden;
    cursor: pointer;
    flex-grow: 1;
    flex-basis: calc(33.33% - (2 * 3.5rem / 3));
    min-width: 28rem;
    box-sizing: border-box;
    padding: 3rem;
    box-shadow:
        calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) var(--neu-black-light),
        var(--neu-offset) var(--neu-offset) var(--neu-blur) var(--neu-black-dark);
    transition: all 0.6s ease-in-out;
    position: relative;
    z-index: 2;
}

.video-card:hover:not([data-state="expanded"]):not([data-state="minimized"]) {
    transform: translateY(-0.5rem);
    box-shadow:
        calc(var(--neu-offset) * -1.2) calc(var(--neu-offset) * -1.2) calc(var(--neu-blur) * 1.2) var(--neu-black-light),
        calc(var(--neu-offset) * 1.2) calc(var(--neu-offset) * 1.2) calc(var(--neu-blur) * 1.2) var(--neu-black-dark);
}

.video-grid .video-card[data-state="expanded"] {
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 90rem;
    margin: 0 auto 3.5rem auto;
    opacity: 1;
    transform: scale(1);
    order: -1;
    z-index: 10;
    box-shadow:
        0px 0px 40px rgba(0, 0, 0, 0.4),
        calc(var(--neu-offset) * -1.5) calc(var(--neu-offset) * -1.5) calc(var(--neu-blur) * 1.5) var(--neu-black-light),
        calc(var(--neu-offset) * 1.5) calc(var(--neu-offset) * 1.5) calc(var(--neu-blur) * 1.5) var(--neu-black-dark);
}

.video-grid .video-card[data-state="minimized"] {
    flex-basis: calc(50% - (3.5rem / 2));
    opacity: 0.3;
    transform: scale(0.9);
    pointer-events: none;
    box-shadow: none;
    z-index: 1;
    margin-bottom: 0;
}

.video-card[data-state="minimized"] .video-title,
.video-card[data-state="minimized"] .video-hashtags {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}


.video-card .video-title {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(2.4rem, 3.5vw, 3rem);
    color: #FFFFFF;
    margin-bottom: 1.5rem;
    text-align: center;
    transition: opacity 0.3s ease-in-out;
}

.video-card .video-hashtags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
    transition: opacity 0.3s ease-in-out;
}

.video-card .hashtag {
    font-family: 'GmarketSansLight', sans-serif;
    font-size: clamp(1.4rem, 2vw, 1.6rem);
    color: #CCCCCC;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    white-space: nowrap;
}

.video-card .video-embed-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 1rem;
}

.video-card .video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


.promotion-button-section {
    padding-block-end: 9rem;
}

@keyframes button-pulse-animation {
    0% {
        box-shadow:
            calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) #3B3D42,
            var(--neu-offset) var(--neu-offset) var(--neu-blur) #191A1D;
    }
    50% {
        box-shadow:
            inset var(--neu-offset) var(--neu-offset) var(--neu-blur) #191A1D,
            inset calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) #3B3D42;
    }
    100% {
        box-shadow:
            calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) #3B3D42,
            var(--neu-offset) var(--neu-offset) var(--neu-blur) #191A1D;
    }
}

.promotion-button {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(2.8rem, 4.5vw, 3.5rem);
    padding: 2.2rem 7rem;
    border: none;
    border-radius: 5rem;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    background-color: #26282B;
    color: #FFFFFF;
}


.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.animate-on-scroll.is-visible.promotion-button {
    animation: button-pulse-animation 2s infinite alternate ease-in-out;
}

.kt-floating-background-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'GmarketSansBold', sans-serif;
    font-size: 60rem;
    text-transform: uppercase;
    z-index: -10;
    pointer-events: none;
    white-space: nowrap;
    color: transparent;
    text-shadow: none;
    transition: text-shadow 0.5s ease-in-out;
    user-select: none;
}


/*------------------------------------------------------------------ 이미지 슬라이드-------------------------------------------------------------------*/
:root {
  --size: clamp(10rem, 1rem + 40vmin, 30rem);
  --gap: calc(var(--size) / 14);
  --duration: 60s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: rgb(255, 255, 255);
    --color-bg: rgb(0, 0, 0);
    --color-bg-accent: #111111 ; 
  }
}

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 10%,
    hsl(0 0% 0% / 1) 90%,
    hsl(0 0% 0% / 0)
  );
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll-x var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__group {
    animation-play-state: paused;
  }
}

.marquee__group > svg {
  box-shadow: -5px -5px 35px -5px #000
}
.marquee--vertical {
  --mask-direction: to bottom;
}

.marquee--vertical,
.marquee--vertical .marquee__group {
  flex-direction: column;
}

.marquee--vertical .marquee__group {
  animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: -3s;
}

@keyframes scroll-x {
  from { transform: translateX(var(--scroll-start)); }
  to { transform: translateX(var(--scroll-end)); }
}

@keyframes scroll-y {
  from { transform: translateY(var(--scroll-start)); }
  to { transform: translateY(var(--scroll-end)); }
}

.marquee svg {
  display: grid;
  place-items: center;
  width: var(--size);
  fill: var(--color-text);
  background: var(--color-bg-accent);
  aspect-ratio: 16/9;
  border-radius: 0.5rem;
   overflow: hidden;
}

.wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: auto;
  max-width: 100vw;
}

/* --- 이미지 박스 (튀어나온 효과) --- */
.image-box-concave {
    position: relative;
    border-radius: 1.8rem;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F0F0F0;
    box-shadow:
        calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) var(--neu-white-light),
        var(--neu-offset) var(--neu-offset) var(--neu-blur) var(--neu-white-dark);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.image-box-concave img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.image-box-concave:hover {
    transform: scale(1.03);
    box-shadow:
        calc(var(--neu-offset) * -1.2) calc(var(--neu-offset) * -1.2) calc(var(--neu-blur) * 1.2) var(--neu-white-light),
        calc(var(--neu-offset) * 1.2) calc(var(--neu-offset) * 1.2) calc(var(--neu-blur) * 1.2) var(--neu-white-dark);
}

.section-block.alt-bg-red .image-box-concave {
    background-color: #E42F28;
    box-shadow:
        calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) var(--neu-red-light),
        var(--neu-offset) var(--neu-offset) var(--neu-blur) var(--neu-red-dark);
}
.section-block.alt-bg-red .image-box-concave:hover {
    box-shadow:
        calc(var(--neu-offset) * -1.2) calc(var(--neu-offset) * -1.2) calc(var(--neu-blur) * 1.2) var(--neu-red-light),
        calc(var(--neu-offset) * 1.2) calc(var(--neu-offset) * 1.2) calc(var(--neu-blur) * 1.2) var(--neu-red-dark);
}

.section-block.alt-bg-black .image-box-concave {
    background-color: #191919;
    box-shadow:
        calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) var(--neu-black-light),
        var(--neu-offset) var(--neu-offset) var(--neu-blur) var(--neu-black-dark);
}
.section-block.alt-bg-black .image-box-concave:hover {
    box-shadow:
        calc(var(--neu-offset) * -1.2) calc(var(--neu-offset) * -1.2) calc(var(--neu-blur) * 1.2) var(--neu-black-light),
        calc(var(--neu-offset) * 1.2) calc(var(--neu-offset) * 1.2) calc(var(--neu-blur) * 1.2) var(--neu-black-dark);
}


/* --- 마케팅 주요 강점 섹션 스타일 (가로 3칸 배치, 튀어나온 입체 효과) --- */
.marketing-features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3.5rem;
    justify-content: center;
    max-width: 100rem;
    margin: 0 auto;
    margin-block-end: 9rem;
}

.marketing-feature-card {
    position: relative;
    overflow: hidden;
    flex-grow: 1;
    flex-basis: calc(33.33% - (2 * 3.5rem / 3));
    min-width: 25rem;
    aspect-ratio: 3 / 5;
    background-color: #FFFFFF;
    border-radius: 1.8rem;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow:
        calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) var(--neu-white-light),
        var(--neu-offset) var(--neu-offset) var(--neu-blur) var(--neu-white-dark);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.marketing-feature-card .card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    z-index: 1;
}

.marketing-feature-card .card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    z-index: 2;
    padding: 3.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0) 100%);
}

.marketing-feature-card .card-title {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(2.2rem, 3.5vw, 2.8rem);
    line-height: 1.3;
    color: #FFFFFF;
    margin-bottom: 1rem;
}

.marketing-feature-card .card-description {
    font-family: 'GmarketSansMedium', sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 1.9rem);
    line-height: 1.6;
    color: #EEEEEE;
    margin-bottom: 0;
}

.marketing-feature-card:hover {
    transform: scale(1.02);
    box-shadow:
        calc(var(--neu-offset) * -1.2) calc(var(--neu-offset) * -1.2) calc(var(--neu-blur) * 1.2) var(--neu-white-light),
        calc(var(--neu-offset) * 1.2) calc(var(--neu-offset) * 1.2) calc(var(--neu-blur) * 1.2) var(--neu-white-dark);
}

.section-block.alt-bg-black .marketing-feature-card {
    background-color: #191919;
    box-shadow:
        calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) var(--neu-black-light),
        var(--neu-offset) var(--neu-offset) var(--neu-blur) var(--neu-black-dark);
}
.section-block.alt-bg-black .marketing-feature-card .card-description {
    color: #CCCCCC;
}
.section-block.alt-bg-black .marketing-feature-card:hover {
    box-shadow:
        calc(var(--neu-offset) * -1.2) calc(var(--neu-offset) * -1.2) calc(var(--neu-blur) * 1.2) var(--neu-black-light),
        calc(var(--neu-offset) * 1.2) calc(var(--neu-offset) * 1.2) calc(var(--neu-blur) * 1.2) var(--neu-black-dark);
}

/* --- 인터랙티브 이미지 그리드 스타일 --- */
.interactive-image-grid {
    display: flex;
    width: 100%;
    max-width: 120rem;
    margin: 6rem auto 9rem auto;
    gap: 1.5rem;
    height: 50vh;
    min-height: 40rem;
    align-items: center;
    justify-content: center;
}

.image-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 1.8rem;
    height: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    transition: flex-basis 0.6s ease-in-out, opacity 0.6s ease-in-out;
    box-shadow:
        calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-black-light),
        var(--neu-offset) var(--neu-offset) calc(var(--neu-blur) * 0.5) var(--neu-black-dark);
}

.image-card .card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.6s ease-in-out;
}

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

.image-card .card-text-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    z-index: 2;
    padding: 2.5rem;
    box-sizing: border-box;
    color: #FFFFFF;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

.image-card .card-title {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(1.8rem, 2vw, 2.4rem);
    margin-bottom: 0.8rem;
}

.image-card .card-description {
    font-family: 'GmarketSansMedium', sans-serif;
    font-size: clamp(1.4rem, 1.5vw, 1.6rem);
    line-height: 1.5;
}

.image-card[data-state="expanded"] {
    flex-basis: 50%;
    opacity: 1;
}

.image-card[data-state="minimized"] {
    flex-basis: 5%;
    opacity: 0.5;
}

.image-card[data-state="minimized"] .card-text-content {
    opacity: 0;
}

.image-card .detail-link {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 3;
    background-color: #E42F28;
    color: #FFFFFF;
    font-family: 'GmarketSansBold', sans-serif;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 0.8rem 1.6rem;
    border-radius: 5rem;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
    transition: opacity 0.4s 0.2s ease, transform 0.4s 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.image-card[data-state="expanded"] .detail-link {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.image-card .detail-link:hover {
    background-color: #FFFFFF;
    color: #E42F28;
}

/* --- FAQ 섹션 스타일 (수정됨) */
.faq-section {
    background-color: #F8F9FA;
}

.faq-section .section-heading-text-only {
    color: #333;
    margin-bottom: 5rem;
}

.faq-container {
    max-width: 80rem;
    margin: 0 auto;
    border: 1px solid #DEE2E6;
    border-radius: 1rem;
    overflow: hidden;
}

.faq-item {
    border-bottom: 1px solid #DEE2E6;
}

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

.faq-question {
    width: 100%;
    background-color: #FFFFFF;
    border: none;
    text-align: left;
    padding: 2rem 2.5rem;
    cursor: pointer;
    font-family: 'GmarketSansMedium', sans-serif;
    font-size: clamp(1.6rem, 2vw, 1.9rem);
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.faq-question:hover {
    background-color: #F8F9FA;
}

.faq-question .faq-icon {
    font-family: sans-serif;
    font-size: 2.5rem;
    font-weight: 300;
    color: #E42F28;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.faq-item.active .faq-question .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    background-color: #F8F9FA;
    padding: 0; 
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}
.faq-answer-content {
    padding: 2.5rem; /* 여기에 padding을 적용합니다. */
}
.faq-answer p {
    font-family: 'GmarketSansLight', sans-serif;
    font-size: clamp(1.4rem, 1.8vw, 1.6rem);
    line-height: 1.7;
    color: #555555;
    margin: 0;
}


/* --- NEW STYLES FOR AI-ROBOT.HTML --- */

/* Robot Intro Section (bear1.png) */
.robot-intro {
    padding-block-start: 6rem;
    padding-block-end: 6rem;
}

.robot-model-title {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(4.5rem, 9vw, 7rem);
    line-height: 1.2;
    color: #FFFFFF;
    margin-bottom: 4rem;
    text-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
}
.robot-model-title .red-text {
    color: #F0F0F0; /* Lighter white for "KT AI 서빙로봇" on red background */
}

.robot-intro-image {
    width: 100%;
    max-width: 90rem;
    height: auto;
    display: block;
    margin: 0 auto;
    box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.3); /* Soft shadow for image */
    border-radius: 1.5rem;
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.robot-intro-image.is-visible {
    transform: translateY(0);
}


/* Robot Features Diagram Section (bear2.png) */
.robot-features-diagram {
    padding-block-start: 9rem;
    padding-block-end: 9rem;
}

.robot-diagram-image-container {
    position: relative;
    width: 100%;
    max-width: 80rem; /* Adjust max-width for the diagram */
    margin: 0 auto;
    aspect-ratio: 1 / 1; /* Approximate aspect ratio of the image */
    background-color: var(--neu-white-light); /* Match section background */
    border-radius: 1.5rem;
    box-shadow:
        calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) var(--neu-green-light),
        var(--neu-offset) var(--neu-offset) var(--neu-blur) var(--neu-green-dark);
}

.robot-diagram-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the whole image is visible */
    z-index: 1;
    top: 0;
    left: 0;
    /* This image already has a transparent background, so it will blend with the green box */
}

.diagram-label {
    position: absolute;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent background for labels */
    color: #FFFFFF;
    padding: 0.8rem 1.5rem;
    border-radius: 1rem;
    text-align: center;
    font-family: 'GmarketSansMedium', sans-serif;
    backdrop-filter: blur(5px); /* Optional: slight blur effect */
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}
.diagram-label .label-title {
    display: block;
    font-size: clamp(1.6rem, 2.2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.3;
}
.diagram-label .label-description {
    display: block;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    line-height: 1.3;
    opacity: 0.8;
}

/* Positioning for individual labels */
.diagram-label.top-center {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}
.diagram-label.mid-right-top {
    top: 20%;
    right: 5%;
}
.diagram-label.mid-right-bottom {
    top: 45%;
    right: 5%;
}
.diagram-label.bottom-right {
    bottom: 5%;
    right: 5%;
}
.diagram-label.mid-left-top {
    top: 20%;
    left: 5%;
}
.diagram-label.mid-left-bottom {
    top: 45%;
    left: 5%;
}

/* Robot Specifications Section (bear3.png) */
.robot-specs-section {
    padding-block-start: 9rem;
    padding-block-end: 9rem;
    background-color: #F8F9FA; /* Light background for this section */
    color: #333333;
}
.robot-specs-section .section-heading-text-only .kt-ai-text {
    color: #333333; /* Dark text for 'KT AI' on light background */
}
.robot-specs-section .highlighted-word {
    color: #FFFFFF; /* Text on highlighted word */
}
.robot-specs-section .highlighted-word::before {
    background-color: #E42F28; /* Red circle for highlight */
}

.robot-specs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    justify-content: center;
    align-items: flex-start;
    max-width: 100rem;
    margin: 0 auto;
    background-color: #FFFFFF;
    border-radius: 1.8rem;
    padding: 4rem;
    box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.1);
}

.specs-details {
    flex: 1 1 40%; /* Allows it to grow/shrink, starting at 40% width */
    min-width: 30rem; /* Minimum width before wrapping */
    text-align: left;
}
.specs-details dl {
    display: grid;
    grid-template-columns: auto 1fr; /* First column auto, second takes rest */
    gap: 1.5rem 2.5rem;
    margin-bottom: 3rem;
}
.specs-details dt {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(1.8rem, 2.2vw, 2.2rem);
    color: #E42F28; /* Highlight spec titles in red */
    white-space: nowrap;
}
.specs-details dd {
    font-family: 'GmarketSansMedium', sans-serif;
    font-size: clamp(1.6rem, 2vw, 1.9rem);
    color: #333333;
    margin: 0; /* Remove default dd margin */
    line-height: 1.4;
}

.tray-options {
    margin-top: 3rem;
}
.tray-options h3 {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(2rem, 2.5vw, 2.4rem);
    color: #E42F28;
    margin-bottom: 2rem;
    text-align: center;
}
.tray-option-item {
    display: inline-flex; /* Use inline-flex to keep them in a row with wrapping */
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 1rem 1.5rem; /* Spacing between items */
    vertical-align: top; /* Align items to the top if height differs */
}
.tray-option-item img {
    width: clamp(6rem, 8vw, 9rem);
    height: auto;
    margin-bottom: 0.8rem;
    border-radius: 0.8rem;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
}
.tray-option-item span {
    font-family: 'GmarketSansMedium', sans-serif;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    line-height: 1.3;
    color: #555555;
}

.tray-options-images {
    flex: 1 1 40%; /* Allows it to grow/shrink, starting at 40% width */
    max-width: 40rem; /* Max width for the image */
    height: auto;
    object-fit: contain;
    margin: 0 auto; /* Center image if there's extra space */
    border-radius: 1.5rem;
    box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.15);
}

/* Robot Strengths Section (bear4.png) */
.robot-strengths-section {
    padding-block-start: 9rem;
    padding-block-end: 9rem;
}

.strength-grid {
    display: grid;
    /* 5칸 배치를 위해 minmax 값을 17rem으로 조정했습니다. */
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 3.5rem;
    max-width: 100rem;
    margin: 0 auto;
}

.strength-item {
    background-color: var(--neu-green-bg); /* Match section background */
    border-radius: 1.8rem;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow:
        calc(var(--neu-offset) * -0.7) calc(var(--neu-offset) * -0.7) calc(var(--neu-blur) * 0.7) var(--neu-green-light),
        calc(var(--neu-offset) * 0.7) calc(var(--neu-offset) * 0.7) calc(var(--neu-blur) * 0.7) var(--neu-green-dark);
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.strength-item:hover {
    transform: translateY(-0.5rem);
    box-shadow:
        calc(var(--neu-offset) * -1) calc(var(--neu-offset) * -1) var(--neu-blur) var(--neu-green-light),
        calc(var(--neu-offset) * 1) calc(var(--neu-offset) * 1) var(--neu-blur) var(--neu-green-dark);
}

.strength-item img {
    width: clamp(7rem, 10vw, 10rem);
    height: auto;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0.2rem 0.5rem rgba(0, 0, 0, 0.2)); /* Add subtle shadow to icons */
}
.strength-item .strength-text {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(2rem, 2.5vw, 2.4rem);
    color: #FFFFFF;
    line-height: 1.3;
}


/* --- Media Queries --- */
@media (max-width: 1024px) {
    html { font-size: 65%; }
    .section-content-wrapper { max-width: 90rem; padding-inline: 2rem; }
    .section-block { padding-block-start: 7rem; padding-block-end: 7rem; }

    .callout-box { padding: 1.5rem 3.5rem; font-size: clamp(2rem, 4vw, 2.8rem); }
    .solution-text { margin-top: 3.5rem; font-size: clamp(1.8rem, 3vw, 2.4rem); }
    .hashtag-list { top: 16rem; font-size: 1.6rem; }

    h1.promotion-title { font-size: clamp(3.5rem, 7vw, 5.5rem); border-radius: 2rem; padding: 1.5rem 3rem; }
    h2.section-heading-text-only, h2.solution-title, h2.risk-title, p.capacity-title, p.cost-title, p.installation-benefit, p.design-title {
        font-size: clamp(3.5rem, 5.5vw, 4.5rem); margin-block-end: 5rem;
    }
    p.question-text { font-size: clamp(2rem, 3vw, 2.5rem); margin-block-end: 3rem; }
    p.warning-description { font-size: clamp(1.5rem, 2vw, 1.8rem); }

    .ai-detection-block { padding: 2rem 3rem; margin-block-end: 7rem; }
    .ai-detection-block .ai-text { font-size: clamp(1.8rem, 2.5vw, 2.2rem); }
    .ai-detection-block .detection-text { font-size: clamp(3.2rem, 5vw, 4rem); }

    p.capacity-value, p.cost-value, p.installation-free, p.design-value { font-size: clamp(4rem, 6vw, 5rem); }

    .robot-diagram-full-image { max-width: 85rem; margin-block-end: 10rem; }
    .feature-grid { max-width: 60rem; gap: 3rem; }
    .feature-item { max-height: 25rem; border-radius: 1.5rem; }
    .feature-media { border-radius: 1.5rem; }
    .feature-text-overlay { padding: 1.5rem; }
    .feature-text-overlay .feature-text-title { font-size: clamp(1.8rem, 3vw, 2.2rem); }
    .feature-text-overlay .feature-text-description { font-size: clamp(1.2rem, 2vw, 1.5rem); }

    .promotion-button { padding: 2rem 5rem; font-size: clamp(2.4rem, 4vw, 3rem); }

    .kt-floating-background-text { font-size: 45rem; }
    body { padding-top: 6rem; }
    .main-header { height: 6rem; }
    .company-logo { height: 3rem; }
    .main-nav-links ul { gap: 2.5rem; }
    .main-nav-links a { font-size: 1.6rem; padding: 0.8rem 0; }

    .youtube-content-wrapper { padding-block-start: 5rem; }
    .video-grid { gap: 3rem; }
    .video-card { flex-basis: calc(50% - (3rem / 2)); min-width: 25rem; padding: 2.5rem; }
    .video-card[data-state="expanded"] { width: 100%; flex-basis: auto; }
    .video-card[data-state="minimized"] { flex-basis: calc(50% - (3rem / 2)); }
    .video-card .video-title { font-size: clamp(2rem, 3vw, 2.5rem); }
    .video-card .hashtag { font-size: clamp(1.2rem, 1.8vw, 1.4rem); }
    
    .marketing-features-grid { gap: 3rem; }
    .marketing-feature-card { flex-basis: calc(50% - 1.5rem); } /* 2열 */
    .marketing-feature-card .card-content-overlay { padding: 3rem; }
    .marketing-feature-card .card-title { font-size: clamp(2rem, 3vw, 2.5rem); }
    .marketing-feature-card .card-description { font-size: clamp(1.5rem, 2vw, 1.8rem); }
    
    .interactive-image-grid { height: 45vh; min-height: 35rem; }
    .image-card[data-state="expanded"] { flex-basis: 60%; }
    .image-card[data-state="minimized"] { flex-basis: 4%; }

    /* NEW: ai-robot.html elements - Tablet */
    .robot-model-title {
        font-size: clamp(4rem, 8vw, 6rem);
        margin-bottom: 3.5rem;
    }
    .robot-intro-image {
        max-width: 80rem;
    }

    .robot-diagram-image-container {
        max-width: 70rem;
        aspect-ratio: 1 / 1.15; /* Adjusted for smaller screens */
    }
    .diagram-label {
        padding: 0.7rem 1.2rem;
    }
    .diagram-label .label-title {
        font-size: clamp(1.5rem, 2vw, 1.8rem);
    }
    .diagram-label .label-description {
        font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    }

    .robot-specs-container {
        padding: 3rem;
        gap: 4rem;
    }
    .specs-details {
        min-width: 25rem;
    }
    .specs-details dl {
        gap: 1.2rem 2rem;
        margin-bottom: 2.5rem;
    }
    .specs-details dt {
        font-size: clamp(1.6rem, 2vw, 1.9rem);
    }
    .specs-details dd {
        font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    }
    .tray-options h3 {
        font-size: clamp(1.8rem, 2.2vw, 2.1rem);
        margin-bottom: 1.8rem;
    }
    .tray-option-item img {
        width: clamp(5rem, 7vw, 8rem);
        margin-bottom: 0.6rem;
    }
    .tray-option-item span {
        font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    }
    .tray-options-images {
        max-width: 35rem;
    }

    .strength-grid {
        /* 태블릿에서는 4칸 배치가 되도록 유지 (또는 5칸도 가능) */
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: 3rem;
    }
    .strength-item {
        padding: 2rem;
    }
    .strength-item img {
        width: clamp(6rem, 8vw, 9rem);
        margin-bottom: 1.2rem;
    }
    .strength-item .strength-text {
        font-size: clamp(1.8rem, 2.2vw, 2.1rem);
    }

    /* New section for oaracha package on tablet */
    .oaracha-package-section .package-items-container {
        gap: 2.5rem; /* Slightly smaller gap on tablet */
    }
    .oaracha-package-section .package-item {
        height: 25rem; /* Fixed height for small items */
        padding: 2rem;
    }
    .oaracha-package-section .package-item-large {
        height: 35rem; /* Larger height for large item */
    }
    .oaracha-package-section .package-item img {
        width: clamp(6rem, 8vw, 9rem);
    }
    .oaracha-package-section .item-title {
        font-size: clamp(2rem, 3vw, 2.4rem);
    }
    .oaracha-package-section .item-discount {
        font-size: clamp(2.4rem, 3.5vw, 2.8rem);
    }
    .oaracha-package-section .view-details-button {
        font-size: clamp(1.4rem, 2vw, 1.6rem);
        padding: 0.8rem 2rem;
    }
}

@media (max-width: 768px) {
    html { font-size: 60%; }
    .section-content-wrapper { padding-inline: 1.5rem; max-width: 100%; }
    .section-block { padding-block-start: 5rem; padding-block-end: 5rem; }

    .callout-box { padding: 1.2rem 2.5rem; font-size: clamp(1.8rem, 5vw, 2.4rem); }
    .solution-text { margin-top: 3rem; font-size: clamp(1.6rem, 3.5vw, 2rem); }
    .hashtag-list { position: static; transform: none; top: auto; right: auto; margin-top: 2rem; text-align: center; padding-right: 0; width: 100%; }
    .hashtag { text-align: center; }

    h1.promotion-title { font-size: clamp(3rem, 10vw, 4.5rem); border-radius: 1.5rem; padding: 1.2rem 2rem; }
    h2.section-heading-text-only, h2.solution-title, h2.risk-title, p.capacity-title, p.cost-title, p.installation-benefit, p.design-title {
        margin-block-end: 4rem; font-size: clamp(2.5rem, 5.5vw, 4rem);
    }
    p.question-text { font-size: clamp(1.8rem, 3.5vw, 2.2rem); margin-block-end: 2.5rem; }
    p.warning-description { font-size: clamp(1.4rem, 2.5vw, 1.7rem); }

    .ai-detection-block { padding: 1.5rem 2rem; margin-block-end: 4rem; }
    .ai-detection-block .ai-text { font-size: clamp(1.6rem, 2.5vw, 2rem); }
    .ai-detection-block .detection-text { font-size: clamp(2.5rem, 5vw, 3.5rem); }

    p.capacity-value, p.cost-value, p.installation-free, p.design-value { font-size: clamp(3.5rem, 7vw, 5rem); }

    .highlighted-word::before { width: clamp(5.5rem, 7vw, 7.5rem); height: clamp(5.5rem, 7vw, 7.5rem); }
    .robot-diagram-full-image { max-width: 95vw; margin-block-end: 8rem; }
    .feature-grid { max-width: 30rem; gap: 2rem; }
    .feature-item { max-height: 20rem; border-radius: 1rem; }
    .feature-media { border-radius: 1rem; }
    .feature-text-overlay { padding: 1.5rem; }
    .feature-text-overlay .feature-text-title { font-size: clamp(1.8rem, 3vw, 2rem); }
    .feature-text-overlay .feature-text-description { font-size: clamp(1.2rem, 2vw, 1.4rem); }

    .promotion-button { padding: 1.2rem 3rem; font-size: clamp(1.8rem, 3.5vw, 2.5rem); }

    .kt-floating-background-text { font-size: 30rem; }
    body { padding-top: 5rem; }
    .main-header { height: 5rem; }
    .company-logo { height: 2.8rem; }
    .main-nav-links ul { gap: 1.8rem; }
    .main-nav-links a { font-size: 1.5rem; padding: 0.6rem 0; }

    .youtube-content-wrapper { padding-block-start: 4rem; }
    .video-grid { gap: 2.5rem; }
    .video-card { flex-basis: 100%; min-width: unset; padding: 2rem; } /* 1열로 변경 */
    .video-card[data-state="minimized"] { flex-basis: 100%; }
    .video-card .video-title { font-size: clamp(1.8rem, 3.5vw, 2.2rem); }
    .video-card .hashtag { font-size: clamp(1.1rem, 2vw, 1.3rem); padding: 0.3rem 0.6rem; }

    .marketing-features-grid { gap: 2.5rem; }
    .marketing-feature-card { flex-basis: 100%; min-width: unset; } /* 1열 */
    .marketing-feature-card .card-content-overlay { padding: 2.5rem; }
    .marketing-feature-card .card-title { font-size: clamp(1.8rem, 3.5vw, 2.2rem); }
    .marketing-feature-card .card-description { font-size: clamp(1.4rem, 2.5vw, 1.7rem); }

    .interactive-image-grid { flex-direction: column; height: 80vh; min-height: 60rem; gap: 1rem; }
    .image-card { width: 100%; transition: height 0.6s ease-in-out, opacity 0.6s ease-in-out; }
    .image-card[data-state="expanded"] { height: 60%; flex-basis: auto; }
    .image-card[data-state="minimized"] { height: 8%; flex-basis: auto; }
    .image-card .card-text-content { padding: 2rem; }
    .image-card .detail-link { font-size: 1.3rem; padding: 0.6rem 1.2rem; bottom: 2rem; right: 2rem; }

    .faq-question { padding: 1.8rem 2rem; font-size: clamp(1.5rem, 2.5vw, 1.8rem); }
    .faq-question .faq-icon { font-size: 2.2rem; }

    /* NEW: ai-robot.html elements - Mobile */
    .robot-model-title {
        font-size: clamp(3.5rem, 9vw, 5rem);
        margin-bottom: 3rem;
    }
    .robot-intro-image {
        max-width: 95vw;
    }

    .robot-diagram-image-container {
        max-width: 95%;
        aspect-ratio: 1 / 1.2; /* Adjusted for mobile */
    }
    .diagram-label {
        padding: 0.6rem 1rem;
        font-size: clamp(1.4rem, 2vw, 1.6rem); /* Adjust base font size */
    }
    .diagram-label .label-title {
        font-size: clamp(1.4rem, 2vw, 1.6rem);
    }
    .diagram-label .label-description {
        font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    }
    /* Reposition labels for smaller screens if they overlap */
    .diagram-label.top-center { top: 3%; }
    .diagram-label.mid-right-top { top: 15%; right: 2%; }
    .diagram-label.mid-right-bottom { top: 40%; right: 2%; }
    .diagram-label.bottom-right { bottom: 2%; right: 2%; }
    .diagram-label.mid-left-top { top: 15%; left: 2%; }
    .diagram-label.mid-left-bottom { top: 40%; left: 2%; }


    .robot-specs-section {
        padding-block-start: 5rem;
        padding-block-end: 7rem;
    }
    .robot-specs-container {
        flex-direction: column; /* Stack vertically on mobile */
        gap: 3rem;
        padding: 2.5rem;
        max-width: 95%; /* Adjust max-width for small screens */
    }
    .specs-details {
        min-width: unset; /* Remove min-width when stacking */
        width: 100%; /* Take full width */
    }
    .specs-details dl {
        grid-template-columns: 1fr; /* Single column layout for definition list */
        row-gap: 1rem;
    }
    .specs-details dt, .specs-details dd {
        width: 100%; /* Ensure they take full width */
        font-size: clamp(1.5rem, 3vw, 1.8rem);
    }
    .specs-details dd {
        margin-left: 1.5rem; /* Indent definition for readability */
        padding-left: 0.5rem;
        border-left: 2px solid rgba(255,255,255,0.3); /* Visual separation for stacked items */
        border-color: rgba(0,0,0,0.15); /* Darker border on light bg */
    }
    .tray-options h3 {
        font-size: clamp(1.6rem, 2.5vw, 2rem);
        margin-bottom: 1.5rem;
    }
    .tray-option-item img {
        width: clamp(4.5rem, 6vw, 7rem);
        margin-bottom: 0.6rem;
    }
    .tray-option-item span {
        font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    }
    .robot-specs-container .tray-options-images {
        max-width: 70%; /* Limit image size on small screens */
        aspect-ratio: 1 / 1.1; /* Maintain aspect ratio */
        margin: 0 auto; /* Center image when stacked */
    }

    .strength-grid {
        /* 작은 태블릿/큰 모바일에서는 3-4칸 배치가 되도록 유지 */
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: 2.5rem;
    }
    .strength-item {
        padding: 1.8rem;
    }
    .strength-item img {
        width: clamp(5.5rem, 7vw, 8rem);
        margin-bottom: 1.2rem;
    }
    .strength-item .strength-text {
        font-size: clamp(1.6rem, 2.2vw, 1.9rem);
    }

    .section-block.promotion-button-section {
        padding-block-start: 5rem;
        padding-block-end: 7rem;
    }

    /* New section for oaracha package on mobile */
    .oaracha-package-section .package-items-container {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 2rem; /* Slightly smaller gap on mobile */
    }
    .oaracha-package-section .package-item {
        height: auto; /* Allow height to adjust */
        min-height: 20rem; /* Minimum height to keep consistent card size */
        padding: 1.5rem;
    }
    .oaracha-package-section .package-item-large {
        min-height: 25rem; /* Ensure large item stays large */
    }
    .oaracha-package-section .package-item img {
        width: clamp(5rem, 10vw, 8rem);
        margin-bottom: 1rem;
    }
    .oaracha-package-section .item-title {
        font-size: clamp(1.8rem, 4vw, 2.2rem);
    }
    .oaracha-package-section .item-discount {
        font-size: clamp(2.2rem, 5vw, 2.6rem);
    }
    .oaracha-package-section .view-details-button {
        font-size: clamp(1.3rem, 3vw, 1.5rem);
        padding: 0.6rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .kt-floating-background-text { font-size: 20rem; }
    .youtube-content-wrapper { padding-block-start: 3rem; }
    .video-grid { gap: 2rem; }
    .video-card { flex-basis: 100%; padding: 1.8rem; }
    .video-card[data-state="minimized"] { flex-basis: 100%; }
    .video-card .video-title { font-size: clamp(1.6rem, 4vw, 2rem); }
    .video-card .hashtag { font-size: clamp(1rem, 3.5vw, 1.2rem); padding: 0.3rem 0.6rem; }
    
    .marketing-features-grid { gap: 2rem; }
    .marketing-feature-card .card-content-overlay { padding: 2rem; }
    .marketing-feature-card .card-title { font-size: clamp(1.6rem, 4vw, 2.0rem); }
    .marketing-feature-card .card-description { font-size: clamp(1.3rem, 3.5vw, 1.6rem); }
    
    .faq-question { padding: 1.5rem; }
    .faq-answer { padding-left: 1.5rem; padding-right: 1.5rem; }

    /* NEW: ai-robot.html elements - Small Mobile */
    .robot-model-title {
        font-size: clamp(3rem, 10vw, 4.5rem);
        margin-bottom: 2.5rem;
    }
    .robot-diagram-image-container {
        aspect-ratio: 1 / 1.3; /* Even more vertical on smallest screens */
    }
    .diagram-label {
        padding: 0.5rem 0.8rem;
    }
    .diagram-label .label-title {
        font-size: clamp(1.3rem, 1.8vw, 1.5rem);
    }
    .diagram-label .label-description {
        font-size: clamp(1.0rem, 1.3vw, 1.2rem);
    }
    /* Adjust positioning slightly more */
    .diagram-label.top-center { top: 2%; }
    .diagram-label.mid-right-top { top: 12%; right: 1%; }
    .diagram-label.mid-right-bottom { top: 38%; right: 1%; }
    .diagram-label.bottom-right { bottom: 1%; right: 1%; }
    .diagram-label.mid-left-top { top: 12%; left: 1%; }
    .diagram-label.mid-left-bottom { top: 38%; left: 1%; }

    .robot-specs-container {
        padding: 2rem;
        gap: 2.5rem;
    }
    .specs-details dt, .specs-details dd {
        font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    }
    .tray-options h3 {
        font-size: clamp(1.5rem, 2.8vw, 1.8rem);
        margin-bottom: 1.2rem;
    }
    .tray-option-item img {
        width: clamp(4rem, 5vw, 6rem);
    }
    .tray-option-item span {
        font-size: clamp(1.0rem, 1.3vw, 1.2rem); /* Smallest font size */
    }

    .strength-grid {
        /* 작은 모바일에서는 2칸 배치가 되도록 minmax를 조정했습니다. */
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        gap: 2rem;
    }
    .strength-item {
        padding: 1.5rem;
    }
    .strength-item img {
        width: clamp(5rem, 6vw, 7rem);
        margin-bottom: 0.8rem;
    }
    .strength-item .strength-text {
        font-size: clamp(1.5rem, 2.5vw, 1.8rem);
    }

    .section-block.promotion-button-section {
        padding-block-start: 5rem;
        padding-block-end: 7rem;
    }
}


/* --- Floating Contact Form Styles (Adjusted for requirements) --- */
.fixed-contact-form {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: stretch; /* Make children fill height */
    max-height: 20vh; /* PC height constraint */
    overflow: hidden; /* Crucial: hide any content that truly overflows */
    transition: max-height 0.3s ease-in-out;
    background-color: #191919; /* Default background for whole form to cover empty spaces */
}

.fixed-contact-form__wrapper {
    display: flex;
    width: 100%;
    max-width: 120rem; /* Consistent max-width */
    height: 100%;
    position: relative;
    background-color: #191919; /* Unified background for the full wrapper area */
}

.fixed-contact-form__left,
.fixed-contact-form__right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* PC: Center content vertically within section */
    /* Scaled padding, e.g., (1.5rem / 1.3) = ~1.15rem -> clamp(1.1rem, 1.5vh, 1.9rem) */
    padding: clamp(0.9rem, 1.3vh, 1.5rem) clamp(1.5rem, 2.0vw, 2.2rem); /* Further reduced padding */
    box-sizing: border-box;
    height: 100%; /* Ensure sections take their allocated height */
    overflow: hidden; /* Hide any internal overflow (unlikely after adjustments) */
}

.fixed-contact-form__left {
    background-color: #191919;
    color: #FFFFFF;
    align-items: flex-start; /* PC: LEFT ALIGNMENT */
    text-align: left; /* PC: LEFT ALIGNMENT */
    position: relative;
    z-index: 10;

    /* Mobile specific: background image to replace robot_inquiry.png */
    /* By default not applied, applied in mobile media query */
    background-image: none; /* Reset for PC view if a prior rule had it */
    background-repeat: no-repeat;
    background-position: right center; /* Center vertically, align to right */
    background-size: auto 90%; /* Adjust size, e.g., 90% of container height */
}

/* PC Left Box Text Spacing & Vertical Alignment */
.fixed-contact-form__left .left-subtitle {
    font-family: 'GmarketSansMedium', sans-serif;
    font-size: clamp(0.8rem, 1.1vw, 1.0rem); /* Scaled for 1.3x smaller */
    margin-bottom: 0.8rem; /* Adjusted for more space */
    line-height: 1.2;
    white-space: nowrap; /* Prevent line breaks on title */
}

.fixed-contact-form__left .left-phone {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(1.7rem, 2.5vw, 2.8rem); /* Scaled for 1.3x smaller */
    color: #E42F28;
    margin-bottom: 0.8rem; /* Adjusted for more space */
    line-height: 1; /* Tight line-height */
    white-space: nowrap; /* Prevent phone number from wrapping */
}

.fixed-contact-form__left .left-description {
    font-family: 'GmarketSansLight', sans-serif;
    font-size: clamp(0.7rem, 1.0vw, 1.0rem); /* Scaled for 1.3x smaller */
    line-height: 1.4; /* Slightly more space */
    color: #DDDDDD;
}

.fixed-contact-form__robot-image {
    position: relative;
    width: clamp(15rem, 22vw, 27rem); /* Adjusted for 1.3x smaller */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    /* align-items: center;  // 이미지를 absolute로 배치할 경우 이 속성은 더 이상 영향을 미치지 않습니다. */
    z-index: 20;
    background-color: #191919;
    /* 중요: overflow: hidden; 속성을 제거하거나 visible로 변경 */
    overflow: visible; /* 자식 요소가 컨테이너 밖으로 나갈 수 있도록 허용 */
}

.fixed-contact-form__robot-image img {
    /* 이미지를 부모 높이의 110%로 만듭니다 (10% 더 큼) */
    height: 100%; /* PC: Make image fill the container's height + 10% */
    width: auto; /* PC: Allow width to scale proportionally based on height */
    max-width: 100%; /* Ensure it doesn't overflow its own div's width */
    object-fit: contain; /* Ensure the whole image is visible within the space while maintaining aspect ratio */
    object-position: center top; /* NEW: PC 이미지 상단 정렬 */
    display: block; /* Ensure the image itself is displayed */
    top: -20%; /* 부모 높이의 10%만큼 위로 이동시킵니다 */
    left: 50%; /* 가로 중앙에 위치시키기 위해 왼쪽에서 50% 지점으로 이동 */
    transform: translateX(-50%); /* 정확한 가로 중앙 정렬 (자기 너비의 절반만큼 왼쪽으로 다시 이동) */
}

.fixed-contact-form__right {
    background-color: #E42F28;
    color: #FFFFFF;
    padding: clamp(0.9rem, 1.3vh, 1.5rem) clamp(1.5rem, 2.0vw, 2.2rem) clamp(0.6rem, 0.9vh, 1.2rem); /* Scaled and reduced bottom padding */
    text-align: left;
    position: relative;
    z-index: 10;
}

.fixed-contact-form__right .right-title {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(1.0rem, 1.7vw, 1.7rem); /* Scaled for 1.3x smaller */
    color: #000000;
    margin-bottom: clamp(0.5rem, 0.7vh, 0.9rem); /* Scaled for 1.3x smaller */
    white-space: nowrap;
    display: block; /* PC: Ensure title is visible by default */
}

.fixed-contact-form__right form {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.5vh, 0.6rem); /* Scaled for 1.3x smaller */
    height: 100%;
    justify-content: space-between; /* Adjusted to fill available height well */
}

.fixed-contact-form__right input[type="text"],
.fixed-contact-form__right input[type="tel"] {
    padding: clamp(0.6rem, 0.9vh, 1.0rem) clamp(0.8rem, 1.2vw, 1.2rem); /* Scaled for 1.3x smaller */
    border: none;
    border-radius: 0.3rem; /* Slightly smaller border-radius */
    font-family: 'GmarketSansMedium', sans-serif;
    font-size: clamp(0.9rem, 1.1vw, 1.1rem); /* Scaled for 1.3x smaller */
    background-color: #FFFFFF;
    color: #333333;
    outline: none;
    transition: box-shadow 0.2s ease;
}

.fixed-contact-form__right input[type="text"]::placeholder,
.fixed-contact-form__right input[type="tel"]::placeholder {
    color: #888888;
}

.fixed-contact-form__right input[type="text"]:focus,
.fixed-contact-form__right input[type="tel"]:focus {
    box-shadow: 0 0 0 0.2rem #000000;
}

/* New wrapper for checkbox and button */
.form-bottom-actions {
    display: flex;
    justify-content: space-between;
    align-items: center; /* ALIGN TO SAME HEIGHT */
    margin-top: clamp(0.2rem, 0.3vh, 0.4rem); /* Scaled for 1.3x smaller */
}

/* Checkbox and label */
.fixed-contact-form__right .checkbox-group {
    display: flex;
    align-items: center;
    gap: clamp(0.3rem, 0.4vw, 0.5rem); /* Scaled for 1.3x smaller */
    flex-grow: 1; /* Allow checkbox group to take available space */
}

.fixed-contact-form__right input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: clamp(0.9rem, 1.2vh, 1.1rem); /* Scaled for 1.3x smaller */
    height: clamp(0.9rem, 1.2vh, 1.1rem); /* Scaled for 1.3x smaller */
    border: 1px solid #FFFFFF;
    border-radius: 0.2rem; /* Slightly smaller radius */
    background-color: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.fixed-contact-form__right input[type="checkbox"]:checked {
    background-color: #000000;
    border-color: #000000;
}

.fixed-contact-form__right input[type="checkbox"]:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: clamp(0.7rem, 0.9vh, 0.9rem); /* Scaled for 1.3x smaller */
    font-weight: bold;
}

.fixed-contact-form__right .checkbox-group label {
    font-family: 'GmarketSansLight', sans-serif;
    font-size: clamp(0.8rem, 1.0vw, 1.0rem); /* Scaled for 1.3x smaller */
    color: #FFFFFF;
    cursor: pointer;
    line-height: 1.1; /* Keep line tight */
}

.fixed-contact-form__right .submit-button {
    background-color: #191919;
    color: #FFFFFF;
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(1.0rem, 1.2vw, 1.2rem); /* Scaled for 1.3x smaller */
    padding: clamp(0.5rem, 0.8vh, 0.9rem) clamp(1.0rem, 1.5vw, 1.7rem); /* Scaled for 1.3x smaller */
    border: none;
    border-radius: 5rem;
    cursor: pointer;
    flex-shrink: 0; /* Prevent button from shrinking */
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.fixed-contact-form__right .submit-button:hover {
    background-color: #000000;
}


/* Mobile Responsiveness for Fixed Contact Form - ENHANCED for full content visibility */
@media (max-width: 768px) {
    body {
        padding-bottom: 30vh; /* Mobile: Increased padding for the new form height */
    }

    .fixed-contact-form {
        height: 30vh; /* MOBILE: Enforce total height to 30vh */
        max-height: 30vh; /* Safety */
    }

    .fixed-contact-form__wrapper {
        flex-direction: column; /* Stack sections vertically */
        height: 100%; /* Wrapper fills its 30vh parent */
    }

    .fixed-contact-form__left {
        /* Mobile height: 17% of 30vh */
        height: calc(17 / 30 * 100%); /* Approximately 56.67% of 30vh */
        padding: clamp(0.4rem, 0.5vh, 0.6rem) clamp(0.7rem, 1.0vw, 1.2rem); /* Keep small padding */
        align-items: flex-start; /* MOBILE: LEFT ALIGNMENT */
        text-align: left; /* MOBILE: LEFT ALIGNMENT */
        justify-content: center; /* Center content vertically within its 17% height */

        /* Mobile specific: background image change + fill */
        background-image: url('./images/robot_model/b2.png'); /* CHANGE TO NEW ROBOT IMAGE */
        background-repeat: no-repeat;
        background-position: right center; /* Center vertically, align to right */
        background-size: auto calc(100% - clamp(1rem, 1.5vh, 1.5rem)); /* Changed: Auto width, fill height minus padding, ensures text clear */
        background-color: #191919; /* Ensure background color even with image */
    }
    .fixed-contact-form__right {
        /* Mobile height: 13% of 30vh */
        height: calc(13 / 30 * 100%); /* Approximately 43.33% of 30vh */
        padding: clamp(0.4rem, 0.5vh, 0.6rem) clamp(0.7rem, 1.0vw, 1.2rem); /* Keep small padding */
        justify-content: center; /* Center content vertically within its 13% height */
    }

    .fixed-contact-form__robot-image {
        display: none; /* Hide PC robot image div on mobile */
    }

    .fixed-contact-form__right .right-title {
        display: none; /* MOBILE: HIDE TITLE */
    }

    .fixed-contact-form__right form {
        gap: clamp(0.2rem, 0.3vh, 0.4rem); /* Scaled for 1.3x smaller, very tight on mobile */
        height: 100%;
        justify-content: space-evenly; /* Distribute fields vertically */
        flex-wrap: nowrap;
    }

    .form-bottom-actions {
        margin-top: clamp(0.1rem, 0.2vh, 0.2rem); /* Small margin-top */
        display: flex;
        justify-content: space-between;
        align-items: center; /* ALIGN TO SAME HEIGHT (Important for mobile) */
    }

    /* Font sizes for mobile (768px down) - more aggressive clamps */
    .fixed-contact-form__left .left-subtitle {
        font-size: clamp(0.9rem, 1.3vw, 1.2rem); /* Increased 1.3x */
        margin-bottom: 0.5rem; /* Increased spacing for readability */
    }
    .fixed-contact-form__left .left-phone {
        font-size: clamp(1.8rem, 2.8vw, 2.3rem); /* Increased 1.3x */
        margin-bottom: 0.5rem; /* Increased spacing */
    }
    .fixed-contact-form__left .left-description {
        font-size: clamp(0.8rem, 1.1vw, 1.1rem); /* Increased 1.3x */
        line-height: 1.4; 
        /* To prevent text overlapping the mobile background image, we can add a right padding: */
        padding-right: 38%; /* Adjusted to 38% for `b2.png` if it scales height-wise, and to ensure text clarity */
    }

    .fixed-contact-form__right input[type="text"],
    .fixed-contact-form__right input[type="tel"] {
        font-size: clamp(0.7rem, 1.0vw, 0.9rem); /* Scaled for 1.3x smaller */
        padding: clamp(0.3rem, 0.4vh, 0.5rem); /* Scaled for 1.3x smaller */
    }
    .fixed-contact-form__right input[type="checkbox"] {
        width: clamp(0.6rem, 0.8vh, 0.7rem); /* Scaled for 1.3x smaller */
        height: clamp(0.6rem, 0.8vh, 0.7rem); /* Scaled for 1.3x smaller */
    }
    .fixed-contact-form__right input[type="checkbox"]:checked::after {
        font-size: clamp(0.5rem, 0.6vh, 0.6rem);
    }
    .fixed-contact-form__right .checkbox-group label {
        font-size: clamp(0.6rem, 0.8vw, 0.8rem); /* Scaled for 1.3x smaller */
    }
    .fixed-contact-form__right .submit-button {
        font-size: clamp(0.7rem, 1.0vw, 0.9rem); /* Scaled for 1.3x smaller */
        padding: clamp(0.3rem, 0.5vh, 0.6rem) clamp(0.6rem, 1.0vw, 0.8rem); /* Scaled for 1.3x smaller */
    }
}

/* Further refinement for extremely small mobile devices (e.g., width < 400px) */
@media (max-width: 400px) {
    .fixed-contact-form__left,
    .fixed-contact-form__right {
        padding: clamp(0.3rem, 0.4vh, 0.5rem) clamp(0.5rem, 0.8vw, 0.9rem); /* Even tighter padding */
    }
    .fixed-contact-form__left .left-subtitle {
        font-size: clamp(0.7rem, 1.1vw, 0.9rem); /* Increased 1.3x */
        margin-bottom: 0.3rem; /* Slightly reduced for smaller screens */
    }
    .fixed-contact-form__left .left-phone {
        font-size: clamp(1.6rem, 2.3vw, 2.0rem); /* Increased 1.3x */
        margin-bottom: 0.3rem; /* Slightly reduced */
    }
    .fixed-contact-form__left .left-description {
        font-size: clamp(0.6rem, 0.9vw, 0.8rem); /* Increased 1.3x */
        padding-right: 40%; /* Adjust as needed */
    }

    .fixed-contact-form__right input[type="text"],
    .fixed-contact-form__right input[type="tel"] {
        font-size: clamp(0.6rem, 0.8vw, 0.7rem);
    }
    .fixed-contact-form__right .checkbox-group label {
        font-size: clamp(0.5rem, 0.7vw, 0.6rem);
    }
    .fixed-contact-form__right .submit-button {
        font-size: clamp(0.6rem, 0.8vw, 0.7rem);
        padding: clamp(0.2rem, 0.4vh, 0.5rem) clamp(0.4rem, 0.7vw, 0.6rem);
    }
}


/* NEW SECTION: 소상공인 결합할인 으랏차차 패키지 Styles */
.oaracha-package-section {
    padding-block-start: 8rem; /* Adjusted from 9rem */
    padding-block-end: 8rem; /* Adjusted from 9rem */
    background-color: #191919;
    color: #FFFFFF;
}

.oaracha-package-section .section-content-wrapper {
    text-align: center;
    max-width: 100rem; /* Broader content wrapper */
    margin-bottom: 5rem;
}

.oaracha-package-section .package-title {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(3.5rem, 6.5vw, 5rem);
    line-height: 1.2;
    margin-bottom: 3.5rem;
}

.oaracha-package-section .package-title .red-text {
    color: #E42F28;
}

.oaracha-package-section .package-description.main {
    font-family: 'GmarketSansMedium', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.5;
    margin-bottom: 2rem;
}

.oaracha-package-section .package-description.main .highlight-cyan {
    color: var(--glow-cyan); /* Using new cyan color for highlight */
    font-family: 'GmarketSansBold', sans-serif; /* Bold for emphasis */
}

.oaracha-package-section .package-description.sub {
    font-family: 'GmarketSansLight', sans-serif;
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    color: #BBBBBB; /* Lighter grey for subtle text */
    line-height: 1.5;
    margin-bottom: 5rem; /* Space before the grid items */
}

.oaracha-package-section .package-items-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Default 2 columns for PC */
    gap: 3.5rem; /* Gap between cards */
    max-width: 80rem; /* Adjusted for image grid size */
    margin: 0 auto;
    justify-items: center; /* Center items in the grid */
    align-items: center; /* Align items vertically */
}

.oaracha-package-section .package-item {
    background-color: var(--package-item-bg); /* Dark background for cards */
    border-radius: 1.8rem;
    /* padding: 3rem;  -- PADDING REMOVED HERE, MOVED TO .package-content-overlay */
    display: flex; /* REMOVED FLEX PROPERTIES FROM HERE, NOW HANDLED BY POSITION ABSOLUTE FOR CHILDREN */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
    text-align: center;
    min-height: 28rem; /* Ensure consistent height for small cards */
    aspect-ratio: 1/1.2; /* A little taller than square, if design image requires */
    width: 100%; /* Take full width of its grid column */
    box-sizing: border-box; /* Include padding in width/height */
    cursor: pointer;
    position: relative; /* REQUIRED FOR ABSOLUTELY POSITIONED CHILDREN */
    overflow: hidden; /* Ensure rounded corners clip children */

    /* Glow effect and subtle neumorphic lift on black */
    box-shadow:
        0 0 0 2px var(--glow-cyan), /* Thin glow border */
        0 0 15px 0 rgba(0,224,255, 0.4), /* Outer glow from cyan */
        5px 5px 15px rgba(0,0,0,0.4), /* Bottom-right dark shadow */
        -5px -5px 15px rgba(44,44,44,0.1); /* Top-left subtle light shadow */
    
    transition: all 0.3s ease;
}

.oaracha-package-section .package-item:hover {
    transform: translateY(-0.5rem) scale(1.02); /* Slight lift and scale on hover */
    box-shadow:
        0 0 0 3px var(--glow-cyan), /* Slightly thicker glow on hover */
        0 0 20px 0 rgba(0,224,255, 0.6), /* Stronger glow on hover */
        8px 8px 20px rgba(0,0,0,0.6), /* Stronger shadow on hover */
        -8px -8px 20px rgba(44,44,44,0.2); /* Stronger light shadow on hover */
}

.oaracha-package-section .package-item img {
    /* 기존 flex 배치에서 absolute 배치로 변경 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 이미지를 부모 박스에 꽉 채움 */
    height: 100%; /* 이미지를 부모 박스에 꽉 채움 */
    object-fit: cover; /* 이미지가 박스 비율과 다르면 잘리거나 늘어남 (중요!) */
    border-radius: inherit; /* 부모의 둥근 모서리 상속 */
    z-index: 1; /* 텍스트 오버레이 뒤에 위치 */
    /* filter는 유지 */
    filter: brightness(1.1) drop-shadow(0 0.5rem 1rem rgba(0,0,0,0.3)); 
    /* margin-bottom은 absolute로 변경되면서 제거 (없으면 0으로 자동 처리) */
    transition: transform 0.3s ease-out; /* 마우스 오버시 이미지 확대 효과 등 (기존 유사한 효과) */
}
/* 추가: package-item에 hover시 내부 이미지를 확대 */
.oaracha-package-section .package-item:hover img {
    transform: scale(1.05); /* 박스 hover 시 이미지도 확대 */
}


.oaracha-package-section .package-content-overlay {
    /* 기존의 컨텐츠 오버레이가 이미지를 덮도록 absolute로 변경 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* 이미지 위에 위치 */
    padding: 3rem; /* 카드 내부의 패딩을 이 오버레이에 적용 */
    box-sizing: border-box; /* 패딩을 너비/높이에 포함 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 수직 중앙 정렬 */
    align-items: center; /* 수평 중앙 정렬 */
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.1) 100%); /* 텍스트 가독성을 위한 배경 그라데이션 */
    transition: background 0.3s ease-in-out;
}

.oaracha-package-section .item-title {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(2.2rem, 3.5vw, 2.8rem);
    color: #FFFFFF;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    z-index: 3; /* Ensure text is on top of gradient too */
}

.oaracha-package-section .item-discount {
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(2.8rem, 4.5vw, 3.5rem);
    line-height: 1;
    margin-bottom: 0;
    color: #E42F28; /* <-- 요청하신 빨간색으로 변경 */
    z-index: 3; /* Ensure text is on top of gradient too */
}

/* Specific styling for the large AI Serving Robot card */
.oaracha-package-section .package-item-large {
    grid-column: 1 / -1; /* Span all columns */
    min-height: 38rem; /* Make it significantly taller */
    /* padding-bottom: 5rem; <-- REMOVED FROM HERE, NOW ON .package-content-overlay */
    position: relative; /* For button positioning */
    aspect-ratio: 1.8 / 1; /* Broader aspect ratio */
}

/* package-item-large 내부에 있는 img 에도 fullfill 적용 */
.oaracha-package-section .package-item-large img {
    /* 큰 카드 이미지도 전체를 채우도록 설정 (여전히 아이콘이면 왜곡됨 주의) */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    margin-top: 0; /* 절대 위치이므로 마진 제거 */
    margin-bottom: 0; /* 절대 위치이므로 마진 제거 */
}

/* package-item-large의 오버레이 컨텐츠 패딩은 상황에 따라 조정 */
.oaracha-package-section .package-item-large .package-content-overlay {
    padding-bottom: 5rem; /* 버튼을 위해 하단 패딩 조정 */
    justify-content: flex-end; /* 컨텐츠를 아래쪽으로 정렬 */
}

.oaracha-package-section .package-item-large .view-details-button {
    display: inline-flex; /* Use flex to align text and arrow */
    justify-content: center;
    align-items: center;
    background-color: var(--robot-button-bg); /* Distinct blue-green background */
    color: #191919; /* Dark text for button */
    font-family: 'GmarketSansBold', sans-serif;
    font-size: clamp(1.6rem, 2.2vw, 1.9rem);
    text-decoration: none;
    padding: 1.2rem 3.5rem;
    border-radius: 5rem;
    margin-top: 2.5rem; /* Space below discount text */
    box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.4);
    transition: all 0.2s ease-in-out;
    z-index: 3; /* Ensure button is on top */
}

.oaracha-package-section .package-item-large .view-details-button:hover {
    background-color: var(--glow-cyan); /* Slightly different hover color */
    transform: translateY(-0.2rem);
    box-shadow: 0 0.6rem 1rem rgba(0,0,0,0.5);
}

/* Responsive adjustments for the new section */
@media (max-width: 768px) {
    .oaracha-package-section {
        padding-block-start: 6rem;
        padding-block-end: 6rem;
    }

    .oaracha-package-section .package-title {
        font-size: clamp(2.8rem, 7vw, 4rem);
        margin-bottom: 2.5rem;
    }

    .oaracha-package-section .package-description.main {
        font-size: clamp(1.6rem, 3.5vw, 2.2rem);
        margin-bottom: 1.5rem;
    }

    .oaracha-package-section .package-description.sub {
        font-size: clamp(1.3rem, 2.5vw, 1.6rem);
        margin-bottom: 4rem;
    }

    .oaracha-package-section .package-items-container {
        grid-template-columns: 1fr; /* Single column on mobile */
        max-width: 45rem; /* Restrict max-width for stacked cards */
        gap: 2.5rem;
    }
    
    .oaracha-package-section .package-item {
        min-height: 25rem; /* Slightly smaller min-height on mobile */
        /* padding: 2.5rem; -- MOVED TO OVERLAY */
    }
    .oaracha-package-section .package-item img {
        width: 100%; /* Mobile도 꽉 채우기 */
        height: 100%; /* Mobile도 꽉 채우기 */
        margin-bottom: 0; /* absolute이므로 제거 */
    }
    .oaracha-package-section .package-content-overlay {
        padding: 2.5rem; /* 모바일 오버레이 패딩 */
    }
    .oaracha-package-section .item-title {
        font-size: clamp(2rem, 4.5vw, 2.6rem);
    }
    .oaracha-package-section .item-discount {
        font-size: clamp(2.4rem, 6vw, 3.2rem);
    }
    .oaracha-package-section .package-item-large {
        min-height: 30rem; /* Adjusted larger item height */
    }
    .oaracha-package-section .package-item-large img {
        width: 100%; /* Mobile도 꽉 채우기 */
        height: 100%; /* Mobile도 꽉 채우기 */
        margin-top: 0;
        margin-bottom: 0;
    }
    .oaracha-package-section .package-item-large .view-details-button {
        font-size: clamp(1.4rem, 3vw, 1.7rem);
        padding: 1rem 3rem;
        margin-top: 2rem;
    }
}

@media (max-width: 480px) {
    .oaracha-package-section .package-item {
        min-height: 20rem; /* 더 작은 모바일에서도 최소 높이 유지 */
    }
    .oaracha-package-section .package-content-overlay {
        padding: 1.5rem; /* 더 작은 모바일 오버레이 패딩 */
    }
    .oaracha-package-section .package-item img {
        width: 100%; /* 작은 모바일도 꽉 채우기 */
        height: 100%; /* 작은 모바일도 꽉 채우기 */
    }
    .oaracha-package-section .item-title {
        font-size: clamp(1.8rem, 4vw, 2.2rem);
    }
    .oaracha-package-section .item-discount {
        font-size: clamp(2.2rem, 5vw, 2.6rem);
    }
    .oaracha-package-section .package-item-large {
        min-height: 25rem; /* 큰 카드도 적절히 조절 */
    }
    .oaracha-package-section .package-item-large img {
        width: 100%;
        height: 100%;
    }
    .oaracha-package-section .package-item-large .view-details-button {
        font-size: clamp(1.3rem, 3vw, 1.5rem);
        padding: 0.8rem 2.5rem;
    }
}