@font-face {
  font-family: 'DungGeunMo'; /* 폰트 이름을 파일명과 비슷하게 정해줍니다 */
  src: url('/fonts/DungGeunMo.ttf') format('truetype'); /* 경로와 파일명을 실제와 똑같이! */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 1. 초기화 및 기본 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Color - Dark */
:root {
  --brand-white: #F8F9FAFF;
  --brand-black: #010203FF;
  --brand-primary: #FF4E0FFF;
  --brand-light-orange: #FEEDEBFF;
  --brand-light-blue: #D2EFFFFF;
  --status-success: #00FD54FF;
  --status-info: #1933FCFF;
  --status-warning: #FFD900FF;
  --status-critical: #FF0048FF;
  --status-offline: #4D4E4FFF;
  --bg-base: var(--CN-5);
  --bg-header: var(--CN-10);
  --bg-input: var(--CN-10);
  --bg-highlight-20: #FF004833;
  --text-primary: var(--CN-97);
  --text-normal: var(--CN-98);
  --text-sub: var(--CN-96);
  --text-disabled: var(--CN-60);
  --border-default: var(--CN-30);
  --border-subtle: var(--CN-60);
  --border-active: var(--brand-primary);
  --icon-primary: var(--text-primary);
  --icon-subtle: var(--text-disabled);
  --icon-active: var(--brand-primary);
  --bg-hover: var(--CN-98-10p);
  --graph-active-00: #B4EB00FF;
  --graph-active-01: #00B4FFFF;
  --graph-active-02: #E2B500FF;
  --graph-active-03: #FF4747FF;
  --graph-comparison-01: #AEB0B6FF;
  --graph-comparison-02: #12B6FFFF;
  --graph-item-01: #73F980FF;
  --graph-item-02: #12B6FFFF;
}

/* Primitive - Mode 1 */
:root {
  --CN-99: #F7F7F8FF;
  --CN-98: #F4F4F5FF;
  --CN-98-10p: #F4F4F51A;
  --CN-97: #EAEBECFF;
  --CN-96: #E1E2E4FF;
  --CN-95: #DBDCDFFF;
  --CN-90: #C2C4C8FF;
  --CN-80: #AEB0B6FF;
  --CN-70: #989BA2FF;
  --CN-60: #878A93FF;
  --CN-50: #70737CFF;
  --CN-40: #5A5C63FF;
  --CN-30: #46474CFF;
  --CN-25: #37383CFF;
  --CN-23: #333438FF;
  --CN-22: #2E2F33FF;
  --CN-20: #292A2DFF;
  --CN-17: #212225FF;
  --CN-15: #1B1C1EFF;
  --CN-10: #171719FF;
  --CN-7: #141415FF;
  --CN-5: #0F0F10FF;
}

:root {
    --font-main: 'Pretendard', sans-serif;
    --font-pixel: 'DungGeunMo', monospace; 
    
    /* 2. 폰트 사이즈 (1rem = 16px 기준 변환) */
    --main-title: 10rem;  /* 약 155px */
    --sub-title: 1.5rem;     /* 20px */
    --size-sub-title: 1.125rem; /* 18px */
    
    /* 3. 폰트 굵기 */
    --weight-bold: 600;
    --weight-medium: 400;
    --weight-light: 300;    
    
    /* 4. 줄 간격 */
    --line-height-tight: 1.1;
    --line-height-normal: 1.6;  
}

body {
  background-color: var(--bg-base);
  color: var(--text-main);
  font-family: 'Pretendard', sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

/* 2. 전체 그리드 도화지 */
.main-container {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-rows: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,0.25fr);
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,0.50fr) minmax(0,0.50fr);
}
/* =========================================
   3. 웰컴 섹션 (상대 위치 Grid 배치)
========================================= */
.main-container .card-item.welcome {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto;
    grid-template-rows: auto 1fr;
    grid-row: 1 / span 2;
    grid-column: 1 / span 2;
    width: 100%;
    height: 100%;
    align-self: stretch;
    justify-self: stretch;

    padding: 2rem 2rem; 
    align-items: end; /* 기본적으로 바닥 정렬 */
    background-color: var(--bg-base); 
    transition: background-color 0s; 
    cursor: default; /* 클릭 요소가 아니므로 기본 커서 */
}

.main-container .card-item.welcome:hover {
    background-color: var(--bg-base); 
}

/* 텍스트 영역 (좌측) */
.main-container .card-item.welcome .sub-text {
    grid-column: 1 / span 2; /* 텍스트가 길어질 경우를 대비 */
    grid-row: 1;
    align-self: start;
    margin: 0;
}

.main-container .card-item.welcome .main-title {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}

/* 캐릭터 영역 (우측) */
.main-container .card-item.welcome .flo-group {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-right: 2rem;
}

/* 말풍선 애니메이션 */
.main-container .card-item.welcome .hi-icon {
    width: 5.5rem;
    margin-bottom: 0.5rem;
    margin-left: 12rem;
    transform-origin: bottom center; 
}

.main-container .card-item.welcome:hover .hi-icon {
    animation: swayHi 1.5s ease-in-out infinite; 
}

@keyframes swayHi {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(7deg); }
    75% { transform: rotate(-7deg); }
}

/* 캐릭터 본체 박스 (실제 공간 차지) */
.main-container .card-item.welcome .flo {
    position: relative;          
    width: 12rem;   
}

.main-container .card-item.welcome .flo .default-icon { 
    position: relative; /* 자리를 차지하는 기준 요소 */
    display: block;
    width: 100%;
    opacity: 1; 
    transition: opacity 0.3s ease; 
}

.main-container .card-item.welcome .flo .hover-icon { 
    position: absolute; /* default-icon 위에 겹치기 */
    bottom: 0; left: 0;
    width: 100%;
    opacity: 0; 
    transition: opacity 0.3s ease; 
}

.main-container .card-item.welcome:hover .flo .default-icon { opacity: 0; }
.main-container .card-item.welcome:hover .flo .hover-icon { opacity: 1; }


.main-title {
    width: 100%;            /* 반응형을 위해 100%로 변경 */
    max-width: 50rem;       /* 800px 이상 커지지 않게 제한 */
    color: var(--brand-white);
    font-family: var(--font-pixel);
    font-size: var(--main-title);
    font-weight: var(--weight-medium);
    line-height: var(--line-height-tight);
}

.sub-text {
    font-family: var(--font-main);
    font-size: var(--size-sub-title);
    line-height: var(--line-height-normal);
    color: var(--brand-primary);
}

/* 4. 개별 카드 버튼 (공통) */
.card-item {
    position: relative;
    background-color: var(--bg-default);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    justify-content: flex-start; 
    gap: 0.625rem;          /* 10px */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: var(--text-sub);
    outline: none;
    padding: 0.625rem;      /* 10px */
}

.card-title {
    color: var(--CN-30);
    font-family: var(--font-main);
    font-size: var(--sub-title);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-normal);
}


.card-sub-text {
    position: absolute;        
    top: 3.2rem;
    left: 0.625rem;
    width: calc(100% - 1.25rem);
    
    color: var(--CN-10);
    font-family: var(--font-main);
    font-size: var(--size-sub-title);   
    line-height: var(--line-height-tight);
    text-align: left;
    font-weight: var(--weight-medium);

    opacity: 0;
    visibility: hidden;
    
    transition: all 0.3s ease-in-out;
}

.card-item:hover .card-sub-text {
    opacity: 1;
    visibility: visible;
    color: var(--brand-light-orange);
}




.card-item:hover .card-title {
    color: var(--brand-white); 
}

/* 3. 카드 자체의 호버 효과 */
.card-item:hover {
    background-color: var(--brand-primary);
}

/* 5. 개별 카드 위치 */
.product    { grid-row: 3; grid-column: 1; }
.operator   { grid-row: 3; grid-column: 2; }
.developer  { grid-row: 3; grid-column: 3 / span 2; }
.diagnosis  { grid-row: 2; grid-column: 3 / span 2; }
.forum      { grid-row: 1; grid-column: 3; }
.tech    { grid-row: 1; grid-column: 4; }

/* [미션 3] 개별 카드 디폴트 배경색 차별화 (피그마 색상에 맞게 헥스코드 수정) */
.product   { background-color: var(--CN-10); } /* 예시: 가장 어두운 톤 */
.operator  { background-color: var(--CN-7); }
.developer { background-color: var(--CN-5); }
.diagnosis { background-color: var(--CN-15); } /* 예시: 살짝 밝은 톤 */
.forum     { background-color: var(--CN-17); }
.tech   { background-color: var(--CN-20); }

.icon {
    position: relative; 
    width: 5rem;        /* 80px */
    height: 5rem;       /* 80px */
    margin: auto;
}

.icon img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.3s ease; 
}

.hover-icon { opacity: 0; }
.card-item:hover .default-icon { opacity: 0; }
.card-item:hover .hover-icon { opacity: 1; }

.footer {
    grid-row: 4;            
    grid-column: 1 / span 4; 
    display: flex;          
    /* FAB 규칙: 우하단은 챗봇 전용 안전 영역 — 관련 사이트를 로고 옆(좌측)으로.
       (2026-07-05 겹침 실측, space-between → flex-start) */
    justify-content: flex-start;
    gap: 1.5rem;
    align-items: center;    
    padding: 0 1.5rem;      /* 24px */
    background-color: var(--bg-base); 
}

/* 푸터 로고 스타일 */
.footer-logo {
    font-size: 1.125rem;    /* 18px */
    font-weight: bold;
    color: var(--text-main);
}

/* 관련 사이트 버튼 스타일 */
.related-sites {
    border: 1px solid var(--CN-30);
    background: var(--bg-base);
    color: var(--CN-60);
    width: 100%;            /* 반응형 변경 */
    max-width: 19.375rem;   /* 310px */
    padding: 0.75rem;       /* 12px */
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.625rem;    
    font-size: 14px;
}

/* [미션 4] 드롭다운 메뉴 스타일 */
.dropdown-container {
    position: relative; /* 자식 메뉴의 기준점 */
    width: 250px;
}



.dropdown-list {
    display: none;      /* 평소에는 숨김 */
    position: absolute;
    bottom: 100%;       /* 버튼 바로 위로 올라오게 설정 */
    left: 0;            /* 좌측 배치에 맞춰 전개 기준점도 좌측 */
    width: 250px;
    border: 1px solid var(--CN-30, #46474C);
    background: var(--bg-base, #0F0F10);
    font-size: 14px;
    list-style: none;
    padding: 0.75rem;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

.dropdown-list.show {
    display: block;     /* JS로 클릭 시 보이게 만듦 */
}

.dropdown-list li a {
    display: block;
    padding: 0.5rem 0 ;
    text-decoration: none;
    color: var(--CN-60);
    font-weight: 500;
}

.dropdown-list li a:hover {
    color: var(--CN-80);
}



/* =========================================
   📱 [공통] 모바일 전용 UI 기본 숨김 (데스크탑에서는 안 보임)
========================================= */
.mobile-header { display: none; }
.mobile-menu-overlay { display: none; }

/* =========================================
   💻 중간 사이즈 (태블릿: 가로 1024px 이하)
========================================= */
@media screen and (max-width: 1024px) {
    /* 1. 폰트 축소 */
    :root {
        --main-title: 6rem; /* 10rem -> 6rem으로 축소 */
    }

    /* 2. 기존 4칸짜리 그리드를 2칸짜리로 줄여서 카드가 찌그러지지 않게 방어 */
    .main-container {
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: minmax(400px, 1.5fr) auto auto auto auto;
    }

    /* 3. 웰컴 카드 (그리드 배치 및 내부 속성 통합) */
    .main-container .card-item.welcome {
        grid-row: 1; 
        grid-column: 1 / span 2;
        grid-template-columns: 1fr auto; /* minmax 제거 */
        padding: 2.5rem; 
    }

    /* 4. 텍스트 강제 줄바꿈 허용 */
    .main-container .card-item.welcome .main-title {
        white-space: normal; /* 강제 한 줄(nowrap) 해제 */
        word-break: keep-all; /* 단어 단위로 예쁘게 줄바꿈 */
        line-height: 1.1;
    }
    
    /* 5. 나머지 카드 및 푸터 배치 */
    .main-container .product   { grid-row: 2; grid-column: 1 / span 2; }
    .main-container .operator  { grid-row: 3; grid-column: 1; }
    .main-container .developer { grid-row: 3; grid-column: 2; } /* 가로 꽉 채우기 */
    .main-container .diagnosis { grid-row: 4; grid-column: 1 / span 2; }
    .main-container .forum     { grid-row: 5; grid-column: 1; }
    .main-container .tech      { grid-row: 5; grid-column: 2; } /* 가로 꽉 채우기 */
    .main-container .footer    { grid-row: 6; grid-column: 1 / span 2; }
}
/* =========================================
   📱 모바일 사이즈 (스마트폰: 가로 768px 이하)
========================================= */
@media screen and (max-width: 768px) {
    
    body { overflow-y: auto; overflow-x: hidden; }
    :root { --main-title: 3.5rem; }

    /* --- 1. 전체 도화지 설정 --- */
    .main-container {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        grid-auto-rows: auto;
        height: auto;
        padding-bottom: 6rem;
        
    }

    .main-container .card-item {
        grid-row: auto; 
        position: relative; 
    }

    .main-container .card-item.welcome { grid-column: 1 / span 2; } 
    .main-container .product           { grid-column: 1 / span 2; } 
    .main-container .operator          { grid-column: 1; }          
    .main-container .developer         { grid-column: 2; }          
    .main-container .diagnosis         { grid-column: 1 / span 2; } 
    .main-container .forum             { grid-column: 1; }          
    .main-container .tech              { grid-column: 2; }          

    .main-container .card-item.welcome {
        display: flex; /* Grid에서 Flex로 변경하여 세로 배치 */
        flex-direction: column;
        align-items: flex-start;
        padding: 2.5rem 1.5rem;
        gap: 2.5rem;
        height: auto;
    }

    /* Flexbox의 order를 사용해 자연스럽게 위아래 순서 변경 */
    .main-container .card-item.welcome .sub-text { 
        order: 1; 
    }
    
    .main-container .card-item.welcome .flo-group { 
        order: 2; 
        margin-top: 5rem;
        width: 8.5rem;
        /* margin: 0 auto; */
    }

    .main-container .card-item.welcome .main-title { 
        order: 3; 
    }

    /* 💥 2. 모바일 캐릭터 및 말풍선 교정 💥 */
    .main-container .card-item.welcome .flo {
        width: 100%;
    }

    /* 모바일에서는 호버 없이 hover-icon만 고정 노출 */
    .main-container .card-item.welcome .flo .default-icon {
        display: none;
    }

    .main-container .card-item.welcome .flo .hover-icon {
        position: relative; /* absolute 해제하여 제자리 차지 */
        display: block;
        opacity: 1;
    }

    /* 말풍선을 모바일에 맞게 캐릭터 중앙 위로 재배치 */
    .main-container .card-item.welcome .hi-icon {
        position: absolute;
        bottom: 100%;
        left: 100%;
        transform: translateX(-50%);
        margin: 0 0 0.5rem 0; /* 기존 margin 초기화 */
    }

    /* --- 3. 나머지 카드 설정 (서브 노출 및 아이콘 우측 하단) --- */
    .main-container .card-item .card-title { 
        color: var(--brand-white); 
    }

    /* 🔥 [핵심 수정 2] 하단 버튼들 세로폭 시원하게 늘리기 */
    .main-container .card-item:not(.welcome) {
        height: auto; 
        min-height: 240px; /* 👈 180px에서 240px로 훌쩍 늘려서 아이콘과 거리 벌림 */
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
    }

    .main-container .card-sub-text {
        display: block; 
        position: relative;
        top: 0; left: 0; width: 100%;
        opacity: 1; visibility: visible; 
        font-size: 0.8rem;               
        color: var(--CN-70);             
        margin-top: 0.5rem;
        line-height: 1.4;
    }

    /* 픽셀 아이콘 우측 하단 딱 붙이기 */
    .main-container .icon {
        position: absolute;
        bottom: 1.25rem; right: 1.25rem; 
        width: 3.5rem; height: 3.5rem;
        margin: 0;
    }

    /* 모바일 호버 효과 제거 및 터치 애니메이션 */
    .main-container .card-item:not(.welcome) .default-icon { opacity: 1; }
    .main-container .card-item:not(.welcome) .hover-icon   { opacity: 0; }
    
    .main-container .card-item:not(.welcome):active {
        background-color: var(--brand-primary);
        transform: scale(0.98); 
        transition: transform 0.1s;
    }
    .card-item .icon .default-icon {
        display: none !important; /* 모바일에서 기본 회색 아이콘 숨김 */
    }
    .card-item .icon .hover-icon {
        display: block !important; /* 모바일에서 호버 색상 아이콘 보여줌 */
        opacity: 1 !important;    /* 불투명도를 1로 설정하여 확실히 보이게 함 */
    }

    /* --- 4. 하단 고정 푸터 --- */
    .footer {
        position: fixed;
        bottom: 0; left: 0; width: 100%;
        z-index: 1000;
        background-color: var(--bg-base);
        border-top: 1px solid var(--CN-30);
        display: flex;
        /* FAB 규칙: 우하단은 챗봇 FAB 전용 안전영역. 관련 사이트를 좌측(로고 옆)에
           배치해 FAB와 겹치지 않게 한다(데스크톱 flex-start 원칙을 모바일에도 일관 적용).
           우측 여백(FAB 폭+간격)을 확보해 마지막 요소가 FAB 아래로 들어가지 않게 함. */
        justify-content: flex-start;
        gap: 1rem;
        align-items: center;
        padding: 1rem 1.5rem;
        padding-right: 5rem; /* FAB(우하단) 안전영역 */
    }

    .footer-logo { display: block; flex-shrink: 0; height: 1.25rem; }
    .footer .dropdown-container { width: auto; }
    .footer .related-sites { width: auto; min-width: 120px; padding: 0.5rem 1rem; margin: 0; }
    /* 관련 사이트가 좌측에 있으므로 드롭다운도 좌측 기준 전개(B2: base left:0 유지, right 해제). */
    .footer .dropdown-list { left: 0; right: auto; width: 200px; }
}