/* ============================================================
   1. 기본 초기화 및 레이아웃
   ============================================================ */
body { 
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 20px 0px; 
    background-color: #fff;
    color: #333;
    line-height: 1.6;
    /* text-align: center;  <-- 이 줄을 삭제하거나 아래처럼 변경 */
    text-align: left; 
}


   /* 차트 컨테이너 스타일 */
   .chart-section {
       width: 1000px;
       max-width: 100%;
       margin: 20px auto;
       padding: 10px;
       background: #fff;
       box-sizing: border-box;
       text-align: center; /* 차트 하단의 버튼들이 중앙에 오도록 유지 */
       margin-top: 10px;
   }

   /* PC/모바일 가변 높이 설정 */
   .canvas-wrapper {
       position: relative;
       width: 100%;
       height: 300px; /* PC 기본 높이 */
   }

   @media (max-width: 768px) {
   .canvas-wrapper {
       height: 200px; /* 모바일 그래프 높이 적정 수준 유지 */
   }
   
   #btnContainer {
       gap: 6px; /* 버튼 사이 간격 확대 */
       padding: 0 0px;
   }

   .square-btn {
       /* 한 줄에 버튼 2개씩 배치하여 글자 공간 확보 (3개에서 2개로 변경 제안) */
       flex: 1 1 calc(50% - 10px); 
       
       /* 글자 크기를 구별 가능하도록 12px~13px로 상향 */
       font-size: 13px !important; 
       font-weight: 500;
       
       /* 터치하기 편하도록 높이와 패딩 상향 */
       padding: 12px 3px !important;
       min-height: 45px; 
       
       /* 글자가 길어질 경우 생략되지 않고 다 보이도록 설정 */
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
}

/* 선택된 버튼의 가독성을 위해 더 진하게 표시 */
.square-btn.active {
   background: #333;
   color: #fff;
   border-color: #333;
   font-weight: bold;
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

   .square-btn {
       padding: 6px 10px;
       font-size: 11px;
       background: #fff;
       border: 1px solid #eee;
       cursor: pointer;
       border-radius: 0px; 
       transition: all 0.2s;
       color: #888;
       min-width: 80px;
       text-align: center;
   }
   .square-btn.active {
       background: #444;
       color: #fff;
       border-color: #444;
       font-weight: bold;
   }



 /* fw_style.css 에 추가 */
.directory-container {
    font-family: 'Courier New', Courier, monospace; /* 도면 느낌을 위한 고정폭 글꼴 */
    line-height: 1.6;
    background: #fff;
    padding: 20px;
    border: 1px solid #ddd;
}

.tree-root, .tree-root ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree-root ul { margin-left: 20px; } /* 계층 간격 */

.tree-root li {
    position: relative;
    padding-left: 20px;
    border-left: 1px solid #888; /* 수직선 */
}

.tree-root li:last-child {
    border-left: none; /* 마지막 요소는 수직선을 끊음 */
}

.tree-root li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 12px;
    border-bottom: 1px solid #888; /* ㅡ 모양 선 */
}

/* 마지막 요소의 └─ 모양을 위한 처리 */
.tree-root li:last-child::before {
    border-left: 1px solid #888;
    height: 12px;
}

.node-name { font-weight: bold; color: #007bff; }
.node-category { color: #333; }
.node-material { color: #666; font-size: 0.95em; }

/* 도면 스타일 트리 CSS */
.directory-container {
    font-family: 'Courier New', monospace;
    padding: 20px;
    line-height: 1.5;
}

.tree-root, .tree-root ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tree-root ul {
    margin-left: 20px; /* 계층 간격 */
}

.tree-root li {
    position: relative;
    padding-left: 20px;
    border-left: 1px solid #aaa; /* 수직선 */
}

/* 마지막 항목은 수직선을 짧게 끊음 */
.tree-root li:last-child {
    border-left: none;
}

/* 하단 꺾쇠(└─) 모양 구현 */
.tree-root li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-bottom: 1px solid #aaa;
}

.tree-root li:last-child::before {
    border-left: 1px solid #aaa;
}

.node-name { font-weight: bold; color: #2c3e50; }
.node-category { color: #e67e22; font-weight: bold; }
.node-material { color: #7f8c8d; }

/* 헤더 전체 컨테이너 */
.header-container {
    display: flex;
    flex-direction: column;    /* 요소를 위아래(수직)로 배치 */
    align-items: center;       /* 가로축 중앙 정렬 */
    justify-content: center;
    padding: 40px 20px 20px;   /* 위쪽 여백을 넉넉히 주어 고급스럽게 */
    background-color: #fff;
}

/* 로고 스타일 조절 */
.logo-area {
    margin-bottom: 20px;       /* 로고와 아래 버튼 사이 간격 */
}

.main-logo {
    height: 100px;              /* 로고 높이를 기존보다 키움 (적당한 크기) */
    width: auto;               /* 비율 유지 */
    display: block;
    transition: transform 0.3s ease;
}

.main-logo:hover {
    transform: scale(1.02);    /* 마우스 올렸을 때 살짝 커지는 효과 */
}

/* 유저 메뉴(로그인/회원가입) 스타일 */
.user-menu {
    text-align: center;
}

.auth-links {
    font-size: 14px;           /* 글자 크기 살짝 키움 */
    color: #999;
}

.auth-links a {
    text-decoration: none;
    color: #666;
    font-weight: 500;
    padding: 5px 10px;
    transition: color 0.2s;
}

.auth-links a:hover {
    color: #333;               /* 호버 시 더 진하게 */
}

.divider {
    color: #eee;               /* 구분선 색상을 연하게 */
    margin: 0 5px;
}

.welcome-msg {
    margin: 0;
    font-size: 14px;
    color: #444;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .header-container {
        padding: 30px 15px 15px;
    }
    .main-logo {
        height: 100px;          /* 모바일에서는 약간 작게 조정 */
    }
}
✨ 디자인 포인트

/* 푸터 기본 설정 */
footer {
    width: 100%;
    padding: 40px 100px;
    margin-top: 300px;          /* 차트 영역과의 간격 */
    border-top: 1px solid #eee; /* 상단 구분선 */
    background-color: #f9f9f9;  /* 아주 연한 회색 배경 */
}

/* 푸터 텍스트 레이아웃 */
.footer-text {
    max-width: 1000px;         /* 상단 헤더/차트 폭과 통일 */
    margin: 0 auto;
    text-align: center;        /* 푸터 내용은 중앙 정렬이 안정적임 */
    font-size: 12px;
    color: #888;
    line-height: 1.8;
}

/* 브랜드명 강조 (HIDDEN PROCESS) */
.footer-brand {
    display: block;            /* 한 줄을 다 차지하게 해서 제목처럼 표시 */
    font-weight: 800;
    letter-spacing: 2px;       /* 글자 간격 넓게 */
    color: #333;
    margin-bottom: 5px;
}
.footer-address {
    font-weight: 400;
    letter-spacing: 2px;       /* 글자 간격 넓게 */
    color: #333;
    margin-bottom: 5px;
}


/* 연락처 이메일 강조 */
.footer-text a {
    color: #666;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    transition: all 0.2s;
}

.footer-text a:hover {
    color: #333;
    border-bottom-color: #333;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    footer {
        padding: 30px 15px;
        margin-top: 40px;
    }
}

/* 소개 문구 섹션 전체 */
.intro-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3단 나누기 */
    gap: 30px;
    max-width: 1000px;         /* 너무 퍼지지 않게 폭 제한 */
    margin: 20px auto 40px;   /* 위아래 여백 */
    padding: 20px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

/* 각 칸의 스타일 */
.intro-item {
    text-align: center;
}

.intro-item h3 {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.intro-item p {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all; /* 단어 단위로 줄바꿈되어 깔끔함 */
}

/* 모바일 대응 (3단 -> 1단 세로 배치) */
@media (max-width: 768px) {
    .intro-section {
        grid-template-columns: 1fr; /* 세로로 한 줄씩 */
        gap: 20px;
        padding: 20px 15px;
        margin-bottom: 30px;
    }
    
    .intro-item h3 {
        margin-bottom: 5px;
    }
}

.chart-section {
    width: 1000px;
    max-width: 100%;
    /* 상단 마진을 10px로 줄여 로고와 가깝게, 하단 마진을 80px로 늘려 푸터와 멀게 설정 */
    margin: 10px auto 80px; 
    padding: 10px;
    background: #fff;
    box-sizing: border-box;
}

/* 푸터 상단 여백 및 선 스타일 */
footer {
    width: 100%;
    padding: 50px 20px;        /* 내부 상하 여백 확대 */
    border-top: 1px solid #f0f0f0; /* 구분선을 더 연하게 변경 */
    background-color: #fafafa;
    /* 만약 푸터가 그래프에 너무 붙어 보인다면 아래 margin-top 추가 */
    margin-top: 20px; 
}

/* (참고) 이전 단계에서 추가한 소개 문구(intro-section)의 하단 여백이 너무 크다면 조정 */
.intro-section {
    margin: 20px auto 20px; /* 하단 마진을 40px -> 20px로 축소 */
}

@media (max-width: 768px) {
    .chart-section {
        margin: 5px auto 40px; /* 모바일에서는 하단 간격을 40px 정도로 적당히 조절 */
    }
    footer {
        padding: 40px 15px;
    }
}

/* 소개 섹션 핵심 키워드 스타일 */
.intro-item h3 {
    /* 폰트 크기를 기존 14px에서 20px로 확대 */
    font-size: 20px; 
    font-weight: 800;         /* 더 두껍게 설정하여 강조 */
    color: #222;              /* 조금 더 선명한 검정색 */
    margin-bottom: 12px;
    letter-spacing: -0.8px;   /* 글자 간격을 좁혀서 단단한 느낌 부여 */
    line-height: 1.3;
}

.intro-item p {
    font-size: 13px;
    color: #777;
    line-height: 1.8;      /* 가독성을 위해 줄 간격을 살짝 넓힘 */
    margin: 0;
    
    /* 핵심: 양끝 맞춤 설정 */
    text-align: justify;   /* 텍스트 양끝 정렬 */
    text-justify: inter-word; /* 단어 사이 간격을 조절하여 정렬 */
    word-break: break-all; /* 한글 줄바꿈 시 끝부분을 빈틈없이 채움 */
    
    /* 시각적 균형을 위한 여백 */
    padding: 0 5px;
}


/* 첫 번째 컬럼(제목)은 중앙 정렬 유지 */
.intro-item:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-item h3 {
    font-size: 22px;       /* 폰트 크기 강조 */
    font-weight: 800;
    color: #222;
    text-align: center;
    line-height: 1.3;
    word-break: keep-all;  /* 제목은 단어가 깨지지 않게 설정 */
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .intro-section {
        grid-template-columns: 1fr; /* 모바일은 1단으로 */
        gap: 25px;
    }
    
    .intro-item p {
        font-size: 14px;   /* 모바일에서는 가독성을 위해 폰트를 살짝 키움 */
        padding: 0;        /* 모바일 여백 최적화 */
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 패딩이 너비에 영향을 주지 않도록 설정 */
}

body {
    width: 100%;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}