* { margin:0; padding:0; box-sizing:border-box; }
ul, li { list-style:none; }
a { text-decoration:none; color:inherit; }
img { vertical-align:middle; border:0; }
input, select, button { font-family:'Pretendard', sans-serif; border:0; outline:0; background:none; }

body { overflow-x: auto !important; min-width: 100%; background:#000; }
#wrap { width:100%; min-width: 1240px; position:relative; }

#header_sensor { position: fixed; top: 0; left: 0; width: 100%; height: 50px; z-index: 999; background: transparent; }
#header_wrap { width:100%; height:100px; background:rgba(0,0,0,0.5); position:fixed; top:0; left:0; z-index:1000; transition: transform 0.4s ease-in-out; }
#header_wrap.hide { /* transform: translateY(-100%); */ }
#header_wrap:hover { transform: translateY(0) !important; }

.header_inner_1700 { width:1700px; max-width:95%; height:100%; margin:0 auto; display:flex; align-items:center; }
.logo { flex-shrink:0; }
.logo img { width:240px; height:74px; cursor:pointer; }
.nav_menu { flex:1; display:flex; justify-content:center; }
.nav_menu ul { display:flex; gap:50px; }
.nav_menu ul li a { font-size:20px; color:#fff; transition:0.3s; }
.nav_menu ul li a:hover { color:#ff0000; }
.nav_menu ul li a.shop_link { color:#22ac38; font-weight:600; }
.header_call { flex-shrink:0; }
.header_call a { display:flex; align-items:center; justify-content:center; gap:15px; width:240px; height:50px; background:#ff0000; }
.header_call span { font-weight:600; font-size:24px; color:#fff; }

.section_page { width:100%; height:100vh; min-height:950px; position:relative; overflow:hidden; min-width: 1750px; }
#section_05 { height: 950px !important; min-height: 950px !important; }
.inner_1440 { width:1440px; height:100%; margin:0 auto; position:relative; }
.section_flex { width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding-top:0; }
.visual_bg { position:absolute; top:0; left:0; width:100%; height:100%; background:url('../images/main_img_01.jpg') no-repeat center / cover; z-index:-1; }
.sub_copy { font-family:'KoPubWorldBatang_Medium'; font-size:40px; color:#fff; text-align:center; }
.main_copy { font-family:'KoPubWorldBatang_Bold'; font-size:80px; color:#fff; line-height:1.3; text-align:center; }
.yellow_txt { color:#fff263; }

.brand_wrap_1920 { width:1920px; height:100%; margin:0 auto; display:flex; }
.brand_item { flex:1; height:100%; position:relative; overflow:hidden; display:block; }
.brand_bg { width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; transition: transform 0.6s ease; }
.brand_item:hover .brand_bg { transform: scale(1.05); }
.hover_content { position:absolute; top:50%; left:50%; transform:translate(-50%, -40%); width:300px; height:300px; opacity:0; transition: all 0.5s ease; display:flex; align-items:center; justify-content:center; }
.hover_content img { width:300px; height:300px; object-fit:contain; }
.brand_item:hover .hover_content { opacity:1; transform:translate(-50%, -50%); }

.menu_page_bg { background: url('../images/m_bg_img.jpg') no-repeat center / cover !important; }
.m_content_1920 { width:1920px; height:100%; margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-bottom: 70px; }
.m_top_title { display:flex; align-items:center; gap:20px; padding-bottom: 50px; }
.m_logo_img { width:220px; height:auto; }
.m_main_tit { font-family:'JejuHallasan'; font-size:66px; color:#fff; }
.m_card_list { display:flex; justify-content:center; gap:70px; width:1700px; }
.m_card_item { width:300px; height:600px; background-size:100% 100%; background-repeat:no-repeat; position:relative; flex-shrink: 0; transition: transform 0.4s ease; }
.m_card_item:hover { transform: scale(1.03); z-index: 10; }
.m_txt_area { position:absolute; bottom:0; left:0; width:300px; height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 20px; }
.m_item_top_tit { font-family:'JejuHallasan'; font-size:20px; color:#000; margin-bottom:5px; }
.m_item_name { font-family:'JejuHallasan'; font-size:40px; color:#000; margin-bottom:15px; line-height:1; }
.m_item_desc { font-family:'Pretendard'; font-weight:200; font-size:24px; color:#000; line-height:1.2; margin-bottom:15px; }
.m_item_sub { font-family:'Pretendard'; font-weight:600; font-size:24px; color:#000; line-height:1; }
.col_934c00 { color:#934c00; } .col_21ac42 { color:#21ac42; } .col_fab14a { color:#fab14a; }
.grad_ganjang { background: linear-gradient(180deg, #6d3f00 0%, #b98000 50%, #e0a400 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display:inline-block; }
.grad_bul { background: linear-gradient(90deg, #facc22 0%, #f83600 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display:inline-block; }

.startup_page { background: #fff; }
.b_top_visual { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; background: url('../images/bh_img_02.jpg') no-repeat center / cover; }
.b_main_tit { font-family: 'JejuHallasan'; font-size: 60px; color: #fff; }
.b_content_inner { height: calc(100% - 200px); padding-bottom: 100px; display: flex; align-items: center; justify-content: center; }
.b_step_grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 60px; }
.b_step_item { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
.b_txt_box { display: flex; align-items: flex-start; gap: 20px; }
.b_num { font-family: 'Pretendard'; font-size: 70px; font-weight: 600; color: #df0011; line-height: 0.9; width: 60px; display: inline-block; text-align: left; }
.b_step_tit { font-family: 'Pretendard'; font-size: 30px; font-weight: 600; color: #000; margin-bottom: 5px; }
.b_step_sub { font-family: 'Pretendard'; font-size: 20px; font-weight: 400; color: #000; }
.b_img_box { width: 300px; height: 100px; overflow: hidden; border-radius: 0; }
.b_img_box img { width: 100%; height: 100%; object-fit: contain; }

/* ------------------------------------------------------------------ */
/* [수정] 5페이지 Store (시안에 맞춘 1440x680 내부 패널 레이아웃 적용) */
/* ------------------------------------------------------------------ */
.store_page_bg { background: url('../images/map_bg_img.jpg') no-repeat center / cover; }
.store_main_tit { font-family: 'JejuHallasan'; font-size: 50pt; color: #fff; text-align: center; padding: 60px 0 40px; }

.map_wrapper { 
    width: 1440px; height: 680px; margin: 0 auto 30px; 
    position: relative; border-radius: 10px; overflow: hidden; 
    box-shadow: 0 0 20px rgba(0,0,0,0.5); 
}
#naver_map_container { width: 100%; height: 100%; }

/* 지도 안 좌측 검색 & 결과 패널 */
.map_left_panel { 
    position: absolute; top: 0; left: 0; 
    width: 380px; height: 100%; background: #fff; 
    display: flex; flex-direction: column; z-index: 100; 
    border-right: 1px solid #ccc;
}
.map_search_area { 
    width: 100%; border-bottom: 2px solid #222; 
}
.map_sel_row { 
    display: flex; width: 100%; border-bottom: 1px solid #222; 
}
.map_sel { 
    flex: 1; height: 50px; border: 0; border-right: 1px solid #222; 
    font-family: 'Pretendard', sans-serif; font-size: 16px; padding: 0 15px; 
    outline: none; appearance: none; 
    background: #fff url('../images/map_arrow.png') no-repeat right 15px center; 
    background-size: 12px 8px; cursor: pointer; 
}
.map_sel:last-child { border-right: 0; }

.map_input_row { 
    display: flex; width: 100%; height: 50px; align-items: center; 
}
.map_input_row input { 
    flex: 1; height: 100%; border: 0; padding: 0 15px; 
    font-family: 'Pretendard', sans-serif; font-size: 16px; outline: none; 
}
#map_search_btn { 
    width: 50px; height: 50px; border: 0; border-left: 1px solid #222; 
    background: #fff url('../images/map_s.png') no-repeat center / 20px auto; 
    cursor: pointer; 
}

.map_result_area { 
    flex: 1; overflow-y: auto; background: #fff; 
}
.store_list_item { 
    padding: 20px 15px; border-bottom: 1px solid #eee; 
    display: flex; flex-direction: column; gap: 8px; font-family: 'Pretendard', sans-serif;
}
.st_top, .st_bot { display: flex; justify-content: space-between; align-items: center; }
.st_name { font-size: 16px; font-weight: 600; color: #000; }
.st_time { font-size: 14px; font-weight: 400; color: #333; }
.st_addr { font-size: 14px; font-weight: 400; color: #666; }
.st_tel { font-size: 14px; font-weight: 400; color: #333; }
.no_result_txt { padding: 30px; text-align: center; font-size: 15px; color: #666; }

/* 하단 문의 고정 바 & 사이드 내비게이션 */
#inquiry_fixed_bar { width:100%; height:100px; background:#000; position:fixed; bottom:0; left:0; z-index:1100; }
.inquiry_inner_1440 { width:1440px; height:100%; margin:0 auto; display:flex; align-items:center; justify-content: flex-start; }
.inquiry_left { display:flex; align-items:center; gap:20px; flex-shrink:0; margin-right: 20px; } 
.inquiry_logo img { width:220px; height:auto; }
.inquiry_tit { font-family:'Pretendard'; font-weight:600; font-size:36px; color:#fff; }
.inquiry_right { display:flex; align-items:center; gap:20px; }
.in_box { background:#fff; height:60px; display:flex; align-items:center; }
.in_box input { width:100%; height:100%; padding:0 20px; font-size:22px; color:#000; }
.name_box { width:180px; } .tel_box { width:250px; } .select_box { width:250px; background:#fff url('../images/arrow_03.png') no-repeat right 15px center; }
.select_box select { width:100%; height:100%; padding:0 20px; font-size:22px; color:#9b9b9b; appearance:none; cursor:pointer; }
.agree_area { display:flex; align-items:center; gap:12px; }
.agree_area label { font-size:14px; color:#fff; font-weight:600; cursor:pointer; line-height:1.2; }
.agree_link { text-decoration: underline; text-underline-position: under; }
.btn_inquiry_submit { width:130px; height:60px; background:#ff0000; color:#fff; font-weight:600; font-size:20px; cursor:pointer; border:0; }
.top_btn_wrap { position:absolute; left:50%; top:-35px; transform:translateX(-50%); z-index:1200; }
.btn_top_click img { width:70px; height:35px; display:block; cursor:pointer; }

.side_nav_fixed { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:1750px; height:0; pointer-events:none; z-index:1500; }
.side_nav_inner { position:absolute; right:0; top:0; transform:translateY(-50%); pointer-events:auto; }
.side_nav_fixed ul { display:flex; flex-direction:column; gap:35px; }
.side_nav_fixed li { width:16px; height:16px; border:2px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.side_nav_fixed li span { display:none; width:8px; height:8px; background:#df0011; border-radius:50%; }
.side_nav_fixed li.on span { display:block; }

/* ===================================================================== */
/* --- 6페이지, 7페이지, 푸터, 팝업 관련 추가 CSS --- */
/* ===================================================================== */

/* 6페이지 (소식) */
.news_page_bg { background: url('../images/news_bg_img.jpg') no-repeat center / cover !important; }
.news_inner_wrapper { width: 1440px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 80px; }
.news_top_row { display: flex; align-items: center; justify-content: center; gap: 50px; margin-bottom: 30px; width: 1440px; }
.news_logo_img { width: 220px; height: 63px; object-fit: contain; }

.news_frame_box { width: 730px; height: 140px; background: #fff; border: 1px solid #000; border-radius: 0 0 30px 30px; padding: 15px 30px; overflow: hidden; }
.news_frame_box ul { height: 100%; display: flex; flex-direction: column; justify-content: space-around; }
.news_frame_box ul li { display: flex; align-items: center; font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 300; color: #000; }
.red_dot { width: 10px; height: 10px; background: #ff0000; border-radius: 50%; margin-right: 15px; flex-shrink: 0; }
.news_frame_box ul li a { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.news_frame_box ul li a:hover { color: #df0011; font-weight: 600; text-decoration: underline; }
.news_date_txt { width: 90px; text-align: right; color: #666; font-size: 15px; }

.news_gallery_wrap { position: relative; width: 1440px; height: 600px; margin: 0 auto; }
.gallery_title_box { position: absolute; top: 0; left: 0; z-index: 10; width: 720px; height: 100px; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; gap: 20px; }
.gal_logo_img { width: 138px; height: 40px; object-fit: contain; }
.gal_title_text { font-family: 'Pretendard', sans-serif; font-size: 30px; font-weight: 600; color: #fff; }

.gallery_contents { display: flex; width: 1440px; height: 600px; }
.gal_left_box { width: 720px; height: 600px; }
.gal_right_grid { width: 720px; height: 600px; display: grid; grid-template-columns: 360px 360px; grid-template-rows: 300px 300px; }

.gal_item { overflow: hidden; cursor: pointer; width: 100%; height: 100%; position: relative; }
.gal_item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gal_item:hover img { transform: scale(1.05); }

/* 모달 팝업 */
.modal_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; display: none; align-items: center; justify-content: center; }
.modal_content { position: relative; width: 85vw; height: 85vh; display: flex; align-items: center; justify-content: center; }
.modal_content img { width: 100%; height: 100%; object-fit: contain; }
.modal_close { position: fixed; top: 30px; right: 50px; color: #fff; font-size: 50px; cursor: pointer; font-weight: 200; font-family: sans-serif; line-height: 1; z-index: 10000; }

/* 7페이지 (SHOP) - 정중앙 및 빈공간 해결 */
#section_07 { height: calc(100vh - 200px) !important; min-height: 700px !important; }
.shop_page_bg { background: url('../images/shop_bg_img.jpg') no-repeat center center / cover !important; }

.shop_content { width: 1440px; height: 100%; margin: 0 auto; position: relative; display: flex; justify-content: center; align-items: center; }
.shop_left { width: 445px; height: 100%; position: absolute; left: 50px; top: 0; display: flex; align-items: flex-end; }
.shop_people { width: 100%; max-height: 95%; object-fit: contain; object-position: bottom center; }

.shop_right { margin-left: 500px; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-bottom: 20px; }
.shop_top_imgs { display: flex; align-items: center; gap: 30px; margin-bottom: 30px; }
.jo_logo { width: 202px; height: 70px; object-fit: contain; }
.pack_imgs { display: flex; gap: 15px; }
.pack_imgs img { width: 124px; height: 163px; object-fit: contain; }

.shop_mid_text { margin-bottom: 30px; }
.shop_mid_text p { font-family: 'Pretendard', sans-serif; font-size: 50px; font-weight: 600; color: #fff; line-height: 1.3; }

.shop_bot_area { display: flex; align-items: center; gap: 20px; }
.shop_store_text p { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 600; color: #fff; line-height: 1.2; text-align: left; }

.shop_btn { display: block; width: 150px; height: 50px; background: #22ac38; padding: 2px; text-decoration: none; }
.btn_border { width: 100%; height: 100%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn_border span { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 600; color: #fff; }
.btn_border img { height: 14px; object-fit: contain; }

/* 하단 푸터 (Footer) */
#footer_wrap { width: 100%; height: 200px; background: #000; display: flex; align-items: center; justify-content: center; }
.footer_inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.f_logos { display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 2px; }
.f_logos img { width: 120px; height: 30px; object-fit: contain; }
.f_info { text-align: center; }
.f_info p, .f_policy { font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 400; color: #fff; line-height: 1.4; text-decoration: none; margin: 0; padding: 0; }
.f_policy { display: inline-block; margin-bottom: 4px; text-decoration: underline; text-underline-position: under; cursor: pointer; }
.f_info .f_tel { font-weight: 600; margin: 4px 0; font-size: 13px; }

/* 개인정보처리방침 팝업 전용 CSS */
.privacy_content { width: 600px; background: #fff; border-radius: 10px; padding: 40px; position: relative; max-height: 80vh; overflow-y: auto; }
.privacy_close { position: absolute; top: 20px; right: 20px; font-size: 30px; color: #000; cursor: pointer; }
.privacy_content h3 { font-size: 24px; font-weight: 600; margin-bottom: 20px; text-align: center; color: #000; }
.privacy_text { font-size: 14px; line-height: 1.8; color: #333; }
.privacy_text hr { margin: 20px 0; border: 0; border-top: 1px solid #eee; }

/* 선택된 매장명의 빨간색 강조 */
.store_list_item.on .st_name {
    color: #ff0000 !important;
    font-weight: bold;
}

/* 전화번호 링크 스타일 */
.st_tel_link {
    color: inherit;
    text-decoration: underline;
}

/* 주소 터치 강조 스타일 */
.st_addr_copy:active {
    background-color: #f0f0f0;
}


/* ─────────────────────────────────────────────────────────────
   서브페이지: 브랜드 소개 (dpinfo.html) - 비주얼 섹션 수정
   ───────────────────────────────────────────────────────────── */

/* 1. 비주얼 섹션 배경 (1920*900) */
#sub_brand_visual {
    position: relative;
    width: 100%;
    height: 900px;
    background: url('../images/sub_dp_bg_01.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

/* [수정] 2. 우측 빗금 배경 - 각도 반전 및 컬러/투명도 적용 */
.visual_bg_obj {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%; /* 해상도 대응을 위해 넉넉히 설정 */
    height: 100%;
    
    /* 검은색 투명도 50% */
    background: rgba(0, 0, 0, 0.5); 
    
    /* [수정] 각도 반대: 위쪽은 0에서 시작하고 아래쪽을 300px 밀어낸 형태 (/) */
    /* 300px 수치를 조절하여 사선의 기울기를 맞출 수 있습니다 */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 300px 100%);
    
    z-index: 1;
}

/* 3. 1440px 가이드 내부 정렬 */
#sub_brand_visual .inner_1440 {
    position: relative;
    width: 1440px;
    height: 100%;
    margin: 0 auto;
    z-index: 2;
}

/* 4. 타이틀 이미지 (755*345) - 1440 기준 최우측 정렬 */
.visual_title {
    position: absolute;
    top: 50%;
    right: 0; /* 1440px 라인의 가장 오른쪽에 고정 */
    transform: translateY(-50%);
    width: 700px;
    height: 300px;
    background: url('../images/sub_dp_title.png') no-repeat center center;
    background-size: contain;
}

/* 서브페이지 전용: 우측 고정 네비게이션 가림 */
.dpinfo_page .side_nav_fixed { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   서브페이지: 브랜드 스토리 (Section 02) - 위치 및 간격 수정
   ───────────────────────────────────────────────────────────── */

#sub_brand_story {
    display: flex;
    width: 100%;
    height: 900px;
    overflow: hidden;
}

/* 왼쪽 960px 영역 */
.story_left {
    width: 50%;
    height: 100%;
    background: #e7ecee;
    display: flex;
    
    /* 1. 카피 위치를 위로 올리기 위해 상단 정렬로 변경하고 여백 부여 */
    align-items: flex-start; 
    padding-top: 230px; /* 900px 높이 중 상단에서 약 1/4 지점에 배치 */
    
    /* 2. 1440px 가이드라인 좌측 끝에서 20px 안쪽으로 들여쓰기 */
    /* 수식 설명: 50vw(화면절반) - 720px(가이드절반) + 20px(여유공간) = 50vw - 700px */
    padding-left: calc(50vw - 700px); 
    
    box-sizing: border-box;
}

.story_since { margin-bottom: 50px; } /* 상단 뭉치와 본문 사이 간격 미세 조정 */
.story_since p { 
    font-family: 'KoPubWorldBatang_Light', serif; 
    font-size: 30px; 
    color: #000; 
    margin-bottom: 10px; 
}
.black_bar { 
    width: 50px; 
    height: 10px; 
    background: #000; 
}

.story_main_copy p { 
    font-family: 'KoPubWorldBatang_Light', serif; 
    font-size: 30px; 
    color: #000; 
    line-height: 1.6; 
}
.red_point { color: #ff0000; }

/* 오른쪽 960px 영역 */
.story_right {
    width: 50%;
    height: 100%;
    background: url('../images/sub_dp_bg_03.jpg') no-repeat center center;
    background-size: cover;
}

/* ─────────────────────────────────────────────────────────────
   서브페이지: 대표 메뉴 (Section 03) - 카드 크기 축소 및 간격 최적화
   ───────────────────────────────────────────────────────────── */

#sub_brand_menu {
    width: 100%;
    height: 1000px; 
    background: #fff;
    display: flex;
    align-items: flex-start;
    padding-top: 50px; /* 상단 여백을 살짝 늘려 전체 콘텐츠를 위로 배치 */
    box-sizing: border-box;
}

#sub_brand_menu .inner_1440 {
    height: auto;
    margin: 0 auto;
}

/* 타이틀 정렬 */
.sub_menu_title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px; /* 타이틀과 카드 사이 여백 */
}

.sub_menu_title img {
    width: 260px; /* 로고 크기 살짝 축소 */
    height: auto;
    object-fit: contain;
}

.sub_menu_title span {
    font-family: 'JejuHallasan';
    font-size: 50px; /* 폰트 크기 살짝 축소 */
    color: #000;
    margin-left: 15px;
    line-height: 1;
}

/* 메뉴 그리드 레이아웃: 카드 크기 축소 반영 */
.menu_grid_wrap {
    display: grid;
    /* 카드 너비를 230px -> 200px로 축소 */
    grid-template-columns: repeat(4, 200px);
    /* 카드 높이를 330px -> 286px로 축소 */
    grid-template-rows: repeat(2, 286px);
    gap: 30px 50px; /* 상하 30px, 좌우 50px로 간격 조정 */
    justify-content: center;
}

/* 메뉴 카드: 크기 축소 및 직각 유지 */
.menu_card {
    width: 200px;
    height: 286px;
    overflow: hidden;
    background: #fff;
    border-radius: 0 !important;
    
    /* 그림자 농도 조절 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); 
    
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

/* 호버 효과: 카드 크기가 작아졌으므로 솟구치는 높이와 확대 비율도 재조정 */
.menu_card:hover {
    transform: translateY(-15px) scale(1.08); /* 위로 15px 이동, 8% 확대 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 
    z-index: 10;
}

.menu_card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────
   서브페이지: 등뼈가 4 POINT (Section 04) - 서클 이미지 위치 수정
   ───────────────────────────────────────────────────────────── */

#sub_brand_point {
    width: 100%;
    height: 1000px; 
    background: #e7ecee;
    display: flex;
    align-items: center; /* 전체 콘텐츠는 중앙에 유지 */
    justify-content: center;
}

#sub_brand_point .inner_1440 {
    height: auto;
    margin: 0 auto;
}

/* 1. 타이틀 영역 */
.point_title_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}
.point_title_wrap img { width: 300px; height: 80px; object-fit: contain; }
.point_title_text { display: flex; align-items: baseline; }
.point_num { font-family: 'Pretendard', sans-serif; font-size: 70px; color: #de0010; font-weight: 700; margin-right: 5px; }
.point_txt { font-family: 'Pretendard', sans-serif; font-size: 60px; color: #000; font-weight: 700; }

/* 2. 포인트 콘텐츠 영역 */
.point_contents {
    display: flex;
    justify-content: center;
    width: 1440px; 
    height: 750px; 
    margin: 0 auto;
}

.point_item {
    position: relative;
    width: 360px; 
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 3. 메뉴 박스: 위치 고정 */
.point_menu_box {
    width: 300px;
    height: 400px;
    padding-top: 50px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

/* 컬러 설정 유지 */
.item01 .point_menu_box { background: rgba(106, 57, 28, 0.5); }
.item02 .point_menu_box { background: rgba(86, 98, 56, 0.5); }
.item03 .point_menu_box { background: rgba(64, 34, 15, 0.5); }
.item04 .point_menu_box { background: rgba(119, 42, 46, 0.5); }

.point_menu_box h4 { font-family: 'KoPubWorldBatang_Medium', serif; font-size: 40px; color: #efe7c5; margin-bottom: 10px; }
.point_line { width: 260px; height: 2px; background: #fff; margin-bottom: 20px; }
.point_menu_box p { font-family: 'KoPubWorldBatang_Medium', serif; font-size: 20px; color: #fff; line-height: 1.5; }

/* 4. 원형 이미지: [수정] 박스는 그대로 두고 이미지만 100px 위로 */
.point_circle_img {
    position: absolute;
    /* 바닥에서 0이 아닌 100px을 주어 서클 이미지만 위로 올립니다 */
    bottom: 100px; 
    width: 360px;
    height: 360px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.point_circle_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─────────────────────────────────────────────────────────────
   서브페이지: 삼백돼지국밥 (sbinfo.html) PC 전용
   ───────────────────────────────────────────────────────────── */

/* [섹션 01] 비주얼 영역 (1920*900) */
#sub_sb_visual {
    position: relative;
    width: 100%;
    height: 900px;
    background: url('../images/sub_sb_bg_01.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

/* 좌측 빗금 배경: 검정색 투명도 50% */
.sb_visual_bg_obj {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%; /* 로고 크기에 맞춰 너비 소폭 조정 */
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    /* 등뼈가와 반대 방향의 빗금 각도 적용 (/) */
    clip-path: polygon(0 0, 100% 0, calc(100% - 300px) 100%, 0 100%);
    z-index: 1;
}

/* 1440px 중앙 가이드 */
#sub_sb_visual .inner_1440 {
    position: relative;
    width: 1440px;
    height: 100%;
    margin: 0 auto;
    z-index: 2;
}

/* 타이틀 로고: 1440px 안에서 왼쪽 정렬 */
.sb_visual_title {
    position: absolute;
    top: 50%;
    left: 0; /* 1440px 영역의 가장 왼쪽에 배치 */
    transform: translateY(-50%);
    width: 650px;
    height: 540px;
    background: url('../images/sub_sb_bg_02.png') no-repeat center center;
    background-size: contain;
}


/* ─────────────────────────────────────────────────────────────
   서브페이지: 삼백돼지국밥 (섹션 02 브랜드 스토리) PC 전용
   ───────────────────────────────────────────────────────────── */

#sub_sb_story {
    display: flex;
    width: 100%;
    height: 900px;
    background: #fff;
    overflow: hidden;
}

/* 왼쪽 이미지 박스 (960*900) */
.sb_story_left {
    width: 50%;
    height: 100%;
    background: url('../images/sub_sb_bg_03.jpg') no-repeat center center;
    background-size: cover;
}

/* 오른쪽 텍스트 박스 (960*900 / 화이트) */
.sb_story_right {
    width: 50%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    
    /* [핵심] 1440px 컨텐츠 기준 우측 끝에 붙이기 */
    /* 계산법: 화면 절반(50vw)에서 가이드 절반(720px)을 뺀 나머지를 우측 여백으로 설정 */
    padding-right: calc(50vw - 720px); 
    justify-content: flex-end; /* 텍스트 뭉치를 오른쪽으로 밀착 */
    
    box-sizing: border-box;
}

/* 텍스트 스타일 설정 */
.sb_story_txt_wrap p {
    font-family: 'KoPubWorldBatang_Medium', serif;
    font-size: 35px;
    color: #000;
    line-height: 1.5;
    text-align: right; /* 카피 자체는 중앙 정렬 */
}

/* 강조 텍스트 컬러 (#e60012) */
.sb_red_point {
    color: #e60012;
    font-weight: inherit;
}

/* ─────────────────────────────────────────────────────────────
   서브페이지: 삼백돼지국밥 (섹션 03 대표메뉴) PC 전용
   ───────────────────────────────────────────────────────────── */

#sub_sb_menu {
    width: 100%;
    height: 900px;
    background: url('../images/sub_sb_bg_04.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

/* 1. 상단 헤더 영역 (1920*150) */
.sb_menu_header_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: rgba(0, 0, 0, 0.5); /* 블랙 투명도 50% */
    z-index: 10;
}

.header_flex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.header_flex img {
    width: 250px;
    height: 80px;
    object-fit: contain;
}

.sb_menu_main_tit {
    font-family: 'Jeongmeokbawi', sans-serif; /* 요청 폰트 */
    font-size: 60px;
    color: #fff;
    margin-left: 20px; /* 로고와 타이틀 간격 20px */
}

/* 2. 메뉴 카드 레이아웃 (1440 가이드라인 적용) */
.sb_menu_grid {
    display: flex;
    width: 1440px;
    height: 900px;
    margin: 0 auto;
}

.sb_card {
    width: 480px; /* 480 * 3 = 1440 */
    height: 900px;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* 카드별 배경 이미지 */
.sb_item01 { background-image: url('../images/sb_menu_01.jpg'); }
.sb_item02 { background-image: url('../images/sb_menu_02.jpg'); }
.sb_item03 { background-image: url('../images/sb_menu_03.jpg'); }

/* 3. 호버 오버레이 (블랙 투명도 50%) */
.sb_card_hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 블랙 투명도 50% */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* 기본 상태는 숨김 */
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* 마우스 호버 시 노출 */
.sb_card:hover .sb_card_hover {
    opacity: 1;
}

/* 4. 카드 텍스트 스타일 (Jeongmeokbawi 폰트) */
.sb_card_txt .sub_txt {
    font-family: 'Jeongmeokbawi', sans-serif;
    font-size: 50px;
    color: #fff;
    margin-bottom: 15px;
}

.sb_card_txt .main_txt {
    font-family: 'Jeongmeokbawi', sans-serif;
    font-size: 70px;
    color: #fff;
    line-height: 1.2;
}


/* ─────────────────────────────────────────────────────────────
   서브페이지: 삼백돼지국밥 (섹션 04 3 POINT) PC 전용
   ───────────────────────────────────────────────────────────── */

#sub_sb_point {
    width: 100%;
    height: 900px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* 1. 상단 타이틀 영역 */
.sb_point_title_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 30px;
    margin-bottom: 30px;
}
.sb_point_title_wrap img { width: 250px; height: 80px; object-fit: contain; }
.sb_point_tit_txt { display: flex; align-items: baseline; }
.num_3 { font-family: 'Pretendard', sans-serif; font-size: 70px; font-weight: 700; color: #e60012; margin-right: 5px; }
.txt_point { font-family: 'Pretendard', sans-serif; font-size: 60px; font-weight: 600; color: #000; }

/* 2. 포인트 콘텐츠 레이아웃 (3열 배치) */
.sb_point_contents {
    display: flex;
    justify-content: space-between;
    width: 1440px;
    margin: 0 auto;
}

.sb_point_item {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 3. 텍스트 박스 및 배경 숫자 설정 */
.sb_point_txt_box {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 30px; /* 설명카피와 이미지 간격 50px */
}

/* 배경에 깔리는 큰 숫자 (190px, e60012, 15%) */
.bg_num {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    font-family: 'Pretendard', sans-serif;
    font-size: 220px;
    font-weight: 700;
    color: #e60012;
    opacity: 0.15;
    z-index: 1;
}

.sb_point_txt_box p {
    position: relative;
    z-index: 2; /* 숫자보다 위에 배치 */
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    color: #000;
    line-height: 1.4;
}

.sb_red { color: #e60012; font-weight: 600; }

/* 4. 서클 이미지 박스 (400*400) */
.sb_point_img_box {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    bottom: -470px; /* 전체 섹션 바닥에서 100px 띄우기 위한 위치 조정 */
    /* 수식: 섹션높이(900) - padding(80) - 타이틀(80+50) - 텍스트(200) - 간격(50) - 이미지(400) = 40px 여유 */
}

/* 바닥에서 100px 고정을 위해 point_item의 구조적 위치 재조정 */
.sb_point_contents { height: 700px; position: relative; }
.sb_point_img_box {
    position: absolute;
    bottom: 0; /* sb_point_contents 바닥 기준 */
    margin-bottom: 50px; /* 하단 여백 조절 */
}

/* 정밀 위치 조정을 위한 아이템 스타일 수정 */
.sb_point_item { height: 100%; justify-content: flex-start; }
.sb_point_img_box {
    width: 400px;
    height: 400px;
    position: absolute;
    bottom: 20px; /* 섹션 하단 여백 100px을 맞추기 위한 수치 (900px 기준) */
}

.sb_point_img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}




/* =============================================================
   E. 푸드윈 메인 (fwinfo.html) 전용 스타일 전체
============================================================= */
.fw_page { font-family: 'Pretendard', sans-serif; background-color: #fff; }

/* ── 1. 헤더 영역 (1920*100) ── */
.fw_header {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    position: relative;
    z-index: 1000;
}

/* 1240px 컨텐츠 중앙 정렬 및 로고-메뉴 간격(60px) 통일 */
.fw_header_inner {
    width: 1240px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px; 
}

.fw_logo {
    width: 180px;
    height: 46px;
    flex-shrink: 0;
}
.fw_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fw_gnb {
    display: flex;
    align-items: center;
    gap: 60px; 
    height: 100px;
}
.fw_gnb > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.fw_main_link {
    font-size: 18px;
    color: #000;
    font-weight: 500;
}

/* ── 2. 소메뉴 영역 (1440*165 / Black 50%) ── */
.fw_sub_bg {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 1440px;
    height: 0; 
    background-color: rgba(0, 0, 0, 0.5);
    transition: height 0.3s ease;
    z-index: 998;
}

.fw_sub {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; 
    padding-top: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 999;
}
.fw_sub li a {
    font-size: 16px; /* 12pt */
    color: #fff;
    font-weight: 400;
    transition: color 0.2s ease;
}

/* 소메뉴 마우스 호버 시 빨간색 변경 */
.fw_sub li a:hover {
    color: #df0011 !important;
}

/* 헤더 호버 시 전체 소메뉴 슬라이드 다운 */
.fw_header:hover .fw_sub_bg { height: 165px; }
.fw_header:hover .fw_sub { opacity: 1; visibility: visible; }


/* ── 3. 메인 비주얼 섹션 (1920*800) ── */
.fw_visual_sec {
    width: 100%;
    min-width: 1920px;
    display: flex;
    flex-direction: column;
}

.fw_visual_img {
    width: 100%;
    height: 500px;
    background-image: url('../images/fw_bg_img.jpg');
    background-size: cover;
    background-position: center;
}

.fw_visual_copy_box {
    width: 100%;
    height: 300px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fw_main_copy {
    font-size: 50px;
    font-weight: 500;
    color: #000;
    letter-spacing: -1px;
}

.fw_point_color {
    color: #007130;
    font-weight: 700;
}


/* =============================================================
   E. 푸드윈 메인 (fwinfo.html) 전용 스타일 전체 (최종 수정본)
============================================================= */
.fw_page { font-family: 'Pretendard', sans-serif; background-color: #fff; line-height: 1.2; }

/* ── 1. 헤더 영역 (1920*100) ── */
.fw_header {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    position: relative;
    z-index: 1000;
}

.fw_header_inner {
    width: 1240px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px; /* 로고와 좌우 메뉴 묶음 간격 통일 */
}

.fw_logo {
    width: 180px;
    height: 46px;
    flex-shrink: 0;
}
.fw_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fw_gnb {
    display: flex;
    align-items: center;
    gap: 60px; 
    height: 100px;
}
.fw_gnb > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.fw_main_link {
    font-size: 18px;
    color: #000;
    font-weight: 500;
    text-decoration: none;
}

/* ── 2. 소메뉴 영역 (1440*165 / Black 50%) ── */
.fw_sub_bg {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 1440px;
    height: 0; 
    background-color: rgba(0, 0, 0, 0.5);
    transition: height 0.3s ease;
    z-index: 998;
}

.fw_sub {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; 
    padding-top: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 999;
}
.fw_sub li a {
    font-size: 16px; 
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 소메뉴 마우스 호버 시 빨간색 변경 */
.fw_sub li a:hover {
    color: #df0011 !important;
}

.fw_header:hover .fw_sub_bg { height: 180px; }
.fw_header:hover .fw_sub { opacity: 1; visibility: visible; }


/* ── 3. 메인 비주얼 섹션 (1920*800) ── */
.fw_visual_sec {
    width: 100%;
    min-width: 1920px;
}

.fw_visual_img {
    width: 100%;
    height: 500px;
    background-image: url('../images/fw_bg_img.jpg');
    background-size: cover;
    background-position: center;
}

.fw_visual_copy_box {
    width: 100%;
    height: 300px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fw_main_copy {
    font-size: 50px;
    font-weight: 500;
    color: #000;
    letter-spacing: -1px;
}

.fw_point_color {
    color: #007130;
    font-weight: 700;
}


/* ── 4. 영상 섹션 (1440*675 영상 + 하단 여백 100px) ── */
.fw_video_sec {
    width: 100%;
    height: 775px; /* 영상(675) + 하단 여백(100) */
    background-color: #000;
    position: relative;
    z-index: 1;
}

/* 중앙 1440px 컨테이너 */
.fw_video_inner {
    width: 1440px;
    height: 675px; 
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.fw_main_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* [필독] 중앙 재생 버튼 스타일 - 외곽선 강화 */
.fw_play_btn_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1100;
    transition: 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#btn_vid_play { background: none; border: none; cursor: pointer; }

.play_icon {
    width: 120px;
    height: 120px;
    /* 외곽선: 흰색 2px 실선으로 확실하게 고정 */
    border: 2px solid #ffffff !important; 
    border-radius: 50%;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    box-sizing: border-box;
    transition: all 0.3s;
    display: block;
}

.play_icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 55%;
    transform: translate(-50%, -50%);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid #fff;
}

.play_txt {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 20px;
    display: block;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#btn_vid_play:hover .play_icon {
    background: #fff;
    transform: scale(1.05);
}
#btn_vid_play:hover .play_icon::after { border-left-color: #000; }

/* 하단 컨트롤 바 (영상 하단 끝에서 30px 위로 조정) */
.fw_video_controls {
    position: absolute;
    bottom: 30px; 
    right: 40px;
    display: flex;
    gap: 15px;
    z-index: 1100;
    opacity: 0;
    transition: 0.3s;
}

.fw_video_sec.is_playing .fw_play_btn_wrap { opacity: 0; visibility: hidden; }
.fw_video_sec.is_playing .fw_video_controls { opacity: 1; }

/* 컨트롤 버튼 공통 */
.fw_video_controls button {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.fw_video_controls button:hover { background: #fff; }

/* 일시정지 아이콘 */
#btn_vid_pause::before, #btn_vid_pause::after { content: ''; width: 3px; height: 16px; background: #fff; margin: 0 3px; }
#btn_vid_pause:hover::before, #btn_vid_pause:hover::after { background: #000; }

#btn_vid_pause.paused::before { display: none; }
#btn_vid_pause.paused::after {
    border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #fff;
    background: none; width: 0; height: 0; margin-left: 4px;
}

/* 전체화면 아이콘 (정중앙 정렬) */
#btn_vid_full::before {
    content: '⛶';
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
#btn_vid_full:hover::before { color: #000; }

.fw_video_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); pointer-events: none; z-index: 10; }



/* ─────────────────────────────────────────────────────────────
   서브페이지: 회사연혁 (fw_com.html) 지그재그 레이아웃
   ───────────────────────────────────────────────────────────── */
.fw_history_section {
    width: 100%; /* 1920px 고정 대신 100%로 변경 */
    background-color: #fff;
    padding-top: 50px;
    padding-bottom: 100px;
}

/* 1. 회사연혁 타이틀 (300*80 / cbcbcb / r39) 
   [수정됨] 하단 마진(margin-bottom)을 0으로 변경하여 바(bar)와 밀착시킴 */
.history_title_box {
    width: 300px;
    height: 80px;
    background-color: #cbcbcb;
    border-radius: 39px;
    margin: 0 auto 0; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.history_title_box h2 {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #000;
}

/* 2. 컨텐츠 중앙 영역 (1440px) 
   [수정됨] 상단 패딩(padding-top)을 0으로 변경하여 바(bar)와 밀착시킴 */
.history_inner_1440 {
    width: 100%; /* 화면이 1440보다 작아지면 화면에 꽉 참 */
    max-width: 1440px; /* 하지만 1440보다는 커지지 않음 */
    margin: 0 auto;
    position: relative;
    padding-top: 0; 
    border-top: 1px solid transparent;
    box-sizing: border-box; /* 패딩이 넓이에 영향을 주지 않도록 추가 */
}

/* 중앙 타임라인 바 (bar.png) */
.center_bar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* 3. 좌우 지그재그 배치 설정 */
.history_row {
    position: relative;
    width: 100%;
    z-index: 2;
    margin-bottom: 80px;
    display: flex;
}

/* 좌측/우측 박스 정렬 */
.history_row.left { justify-content: flex-start; }
.history_row.right { justify-content: flex-end; }

/* 내부 컨텐츠 박스 (절반 크기 차지) */
.row_content {
    width: 50%;
    box-sizing: border-box;
}

/* 좌/우측 텍스트 정렬 */
.history_row.left .row_content { text-align: right; }
.history_row.right .row_content { text-align: left; }

/* 4. 로고와 연도 묶음 그룹 */
.top_group {
    display: flex;
    align-items: flex-end !important; /* 중앙(center)에서 하단(flex-end) 정렬로 변경 */
    gap: 50px; 
}
/* 2005년 특수 레이아웃 (텍스트 좌측, 이미지 우측) */
.flex_row {
    display: flex;
    align-items: flex-end !important; /* 하단(flex-end) 정렬로 변경 */
    gap: 50px;
}
.history_row.left .top_group { justify-content: flex-end; }
.history_row.right .top_group { justify-content: flex-start; }

/* 2005년 특수 레이아웃 (텍스트 좌측, 이미지 우측) */
.flex_row {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}
.history_row.right .flex_row {
    justify-content: flex-start;
    text-align: left;
}

/* 5. 폰트 설정 */
.year_num {
    font-family: 'Pretendard', sans-serif;
    font-size: 40px;
    font-weight: 400;
    color: #326649;
    line-height: 1;
}
.copy_txt {
    font-family: 'KoPubWorldBatang_Light', serif;
    font-size: 20px;
    color: #000;
    line-height: 1.5;
    margin-top: 10px; 
}

/* 정렬 보조 클래스 */
.d_block { display: block; margin-bottom: 10px; }
.text_right { text-align: right; }
.text_left { text-align: left; }

/* 6. 이미지 개별 규격 */
.logo_2002 { width: 250px; height: 78px; object-fit: contain; }
.img_2005 { width: 295px; height: 200px; object-fit: cover; }
.logo_2008 { width: 178px; height: 68px; object-fit: contain; }
.logo_2010 { width: 476px; height: 78px; object-fit: contain; }
.logo_2019 { width: 320px; height: 78px; object-fit: contain; }
.logo_2020 { width: 117px; height: 88px; object-fit: contain; }
.logo_2023 { width: 78px; height: 78px; object-fit: contain; }

/* =============================================================
   7. 회사연혁: 개별 높낮이 및 좌우 간격 조절 코드 (사용자 설정 반영)
============================================================= */

/* 2002년 (좌측) */
.item_2002 { margin-top: 35px !important; }
.history_row.left.item_2002 .row_content { padding-right: 50px !important; }

/* 2005년 (우측) */
.item_2005 { margin-top: -50px !important; }
.history_row.right.item_2005 .row_content { padding-left: 50px !important; }

/* 2008년 (좌측) */
.item_2008 { margin-top: -60px !important; }
.history_row.left.item_2008 .row_content { padding-right: 50px !important; }

/* 2010년 (우측) */
.item_2010 { margin-top: -40px !important; }
.history_row.right.item_2010 .row_content { padding-left: 50px !important; }

/* 2018년 (좌측) */
.item_2018 { margin-top: 120px !important; }
.history_row.left.item_2018 .row_content { padding-right: 50px !important; }

/* 2019년 (우측) */
.item_2019 { margin-top: 90px !important; }
.history_row.right.item_2019 .row_content { padding-left: 50px !important; }

/* 2020년 (좌측) */
.item_2020 { margin-top: -25px !important; }
.history_row.left.item_2020 .row_content { padding-right: 50px !important; }

/* 2022년 (우측) */
.item_2022 { margin-top: 0px !important; }
.history_row.right.item_2022 .row_content { padding-left: 50px !important; }

/* 2023년 (좌측) */
.item_2023 { margin-top: -35px !important; }
.history_row.left.item_2023 .row_content { padding-right: 50px !important; }




/* ─────────────────────────────────────────────────────────────
   서브페이지: 제품소개 (fw_pro.html)
   ───────────────────────────────────────────────────────────── */

.fw_pro_section {
    width: 100%;
    min-width: 1920px;
    height: 900px;
    background-color: #fff;
    padding-top: 50px;
    position: relative;
}

/* 1. 타이틀 박스 */
.pro_title_box {
    width: 300px;
    height: 80px;
    background-color: #cbcbcb;
    border-radius: 39px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pro_title_box h2 {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #000;
}

/* 2. 제품 컨텐츠 영역 (1440px 균등 배치) */
.pro_inner_1440 {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* 균등 배치 */
    align-items: flex-start;
    position: absolute;
    bottom: 250px; /* 바닥에서 150px 높이 */
    left: 50%;
    transform: translateX(-50%);
}

/* 3. 개별 제품 카드 */
.pro_card {
    width: 260px; /* 선 사이즈에 맞춰 조정 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 제품 이미지 */
.pro_img_box {
    width: 233px;
    height: 210px;
    margin-bottom: 20px;
}
.pro_img_box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 제품 라벨 (200*35) */
.pro_label {
    width: 200px;
    height: 35px;
    border-radius: 17px;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* 라벨 개별 컬러 */
.label_kimchi { background-color: #a62224; }
.label_ugeoji { background-color: #b95c32; }
.label_sunsal { background-color: #e8be83; }
.label_chueo  { background-color: #917044; }
.label_gukbab { background-color: #b4b0aa; }

/* 스펙 정보 */
.pro_specs {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    color: #878989;
    line-height: 1.5;
    margin-bottom: 13px;
}

/* 구분선 */
.pro_line {
    width: 260px;
    height: 1px;
    background-color: #000;
    margin-bottom: 13px;
}

/* 제품 설명 */
.pro_desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────
   서브페이지: 오시는 길 (fw_road.html) - 정렬 및 간격 완벽 교정
   ───────────────────────────────────────────────────────────── */

.fw_road_section {
    width: 100%;
    min-width: 1920px;
    height: 1800px;
    background-color: #fff;
    padding-top: 50px;
}

/* 1. 타이틀 박스 */
.road_title_box {
    width: 300px;
    height: 80px;
    background-color: #cbcbcb;
    border-radius: 39px;
    margin: 0 auto 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.road_title_box h2 {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #000;
}

/* 2. 메인 카피 슬로건 */
.road_slogan_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}
.q_icon { width: 47px; height: 40px; object-fit: contain; }
.slogan_text { text-align: center; }
.slogan_text p {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #000;
    line-height: 1.3;
}
.bold_green { font-weight: 600; color: #376649; }

/* 3. 컨텐츠 레이아웃 (1440px 가이드) */
.road_inner_1440 {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

/* 상단 정보 행: 아래 지도와 틈새 없이 밀착 */
.road_top_row {
    display: flex;
    width: 100%;
    margin-bottom: 0 !important; 
}

/* [교정] 왼쪽 회사정보 박스: 글자 간격 완벽 배분 */
.road_info_box {
    width: 720px;
    height: 500px;
    background-color: #d5d5d5;
    padding: 60px 50px;
    align-items: center;
    box-sizing: border-box;
}
.info_grid {
    display: grid;
    /* '사업자등록번호' 7글자에 딱 맞는 공간(170px)을 부여하여 억지 여백을 차단 */
    grid-template-columns: 170px 1fr; 
    gap: 15px 30px;
}
.info_label {
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #000;
    
    /* [핵심] 짧은 단어(회사명 등)를 170px 공간 안에서 정확히 균등하게 벌려줌 */
    text-align: justify;
    text-align-last: justify; 
    position: relative;
}
/* 콜론(:)을 일괄적으로 우측에 생성하여 오차 없는 수직선을 완성 */
.info_label::after {
    content: ':';
    position: absolute;
    right: -20px;
    top: 0;
}
.info_val {
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 200;
    color: #000;
    line-height: 1.3;
}

/* [교정] 오른쪽 봉계공장 박스 */
.road_fac_box {
    width: 720px;
    height: 500px;
    padding-left: 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.fac_img { 
    width: 720px; 
    height: 250px; 
    margin-bottom: 5px; 
    margin-left: -50px; /* 1440 가이드 우측 끝에 맞춤 */
}
.fac_img img { width: 100%; height: 100%; object-fit: cover; }

/* [핵심] ▲봉계 공장 문구만 오른쪽 끝 정렬 */
.fac_cap {
    width: 720px;
    margin-top: 10px;
    margin-left: -50px;
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #000;
    text-align: right; 
    margin-bottom: 20px;
}

/* 부지, 건축 등 정보는 다시 왼쪽 정렬 */
.fac_detail {
    width: 100%;
    text-align: left;
}
.fac_detail p { margin-bottom: 5px; display: flex; align-items: flex-start; }
.fac_tit {
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #000;
    width: 80px;
    flex-shrink: 0;
}
.fac_val {
    font-family: 'KoPubWorldBatang_Light', serif;
    font-size: 24px;
    color: #000;
    line-height: 1.2;
}
.invisible { visibility: hidden; }

/* 4. 하단 지도/로드뷰 행: 상단 정보 박스와 수직으로 딱 붙음 */
.road_bottom_row {
    display: flex;
    width: 100%;
}
.road_map_img, .road_view_img { width: 720px; height: 730px; overflow: hidden; }
.road_map_img img, .road_view_img img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; /* 이미지 하단 미세 틈새 제거 */
}



/* ─────────────────────────────────────────────────────────────
   서브페이지: 품질관리 (fw_qua.html) - 이미지 보더 제거본
   ───────────────────────────────────────────────────────────── */

/* 1. 섹션 전체 레이아웃 */
.fw_qua_section {
    width: 100%;
    min-width: 1920px;
    height: 4000px;
    background-color: #fff;
    padding-top: 50px;
    box-sizing: border-box;
}

/* 2. 타이틀 및 인트로 영역 */
.qua_title_area {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main_title {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #000;
    margin-bottom: 50px;
    line-height: 1.2;
}
.main_title span { font-weight: 400; }

.frame_label {
    width: 150px;
    height: 50px;
    border: 2px solid #000;
    border-radius: 25px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    margin-bottom: 30px;
}

.haccp_text, .process_intro {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    line-height: 1.5;
    margin-bottom: 50px;
}
.bold_800 { font-weight: 800; }

/* 3. 컨텐츠 컨테이너 (1440px 가이드) */
.qua_inner_1440 {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 4. 개별 아이템 (카드) */
.qua_item {
    width: 100%;
    height: 280px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.qua_txt_box {
    width: 600px;
    height: 100%;
    position: relative; /* 숫자가 이 박스를 기준으로 배치됨 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0; /* 불필요한 패딩 제거 */
}

/* 5. 배경 거대 숫자 (투명도 20%) */
.bg_num {
    position: absolute;
    top: 50%;
    /* [수정] 왼쪽으로 살짝 밀어내어 제목(h3)과 자연스럽게 겹치게 설정 */
    left: -40px; 
    transform: translateY(-50%);
    
    font-family: 'Pretendard', sans-serif;
    font-size: 200px;
    font-weight: 800;
    opacity: 0.2; /* 가독성을 위해 투명도 20%로 조정 */
    z-index: 1;
    pointer-events: none;
    line-height: 1;
}
.item_red .bg_num { color: #af1e25; }
.item_green .bg_num { color: #007130; }

.qua_txt_box h3 {
    position: relative;
    z-index: 2; /* 숫자보다 앞으로 나옴 */
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
    /* 텍스트가 숫자와 너무 붙지 않게 왼쪽 여백 살짝 부여 */
    padding-left: 10px; 
}

.qua_txt_box p {
    position: relative;
    z-index: 2;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 200;
    color: #000;
    line-height: 1.4;
    padding-left: 10px;
}

/* 6. [교정] 공장 이미지: 보더(라운드) 완전 제거 */
.qua_img_box {
    width: 720px;
    height: 280px;
    border-radius: 0; /* 라운드 삭제 */
    overflow: hidden;
}
.qua_img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gap_150 { height: 150px; }



/* ─────────────────────────────────────────────────────────────
   서브페이지: 매장찾기 (fw_map.html)
   ───────────────────────────────────────────────────────────── */

.fw_map_section {
    width: 100%;
    min-width: 1920px;
    height: 900px;
    background-color: #fff; /* 배경색 화이트 */
    padding-top: 50px;
    box-sizing: border-box;
}

/* 매장찾기 타이틀 설정 */
.fw_map_title {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 600;
    color: #000;
    text-align: center;
    margin-bottom: 40px;
}

/* 지도 래퍼 규격 및 기존 스타일 재활용 */
.fw_map_section .map_wrapper {
    width: 1440px;
    height: 600px; /* 섹션 높이에 맞춰 조정 */
    margin: 0 auto;
    border: 1px solid #ddd;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

/* 기존 style.css의 .map_left_panel, .map_search_area 등의 
   스타일이 이미 정의되어 있으므로 그대로 적용됩니다. */




/* ─────────────────────────────────────────────────────────────
   서브페이지: 사회공헌 (fw_good.html)
   ───────────────────────────────────────────────────────────── */

.fw_good_section {
    width: 100%;
    min-width: 1920px;
    height: 1700px;
    background-color: #fff; /* 배경색 화이트 */
    padding-top: 50px;      /* 탑에서 50px 간격 */
    box-sizing: border-box;
}

/* [1] 타이틀 및 라벨 영역 */
.good_title_area {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;    /* 아래 간격 50px */
}

.good_frame_label {
    width: 150px;
    height: 50px;
    border: 2px solid #000;  /* 선 굵기 2 / 선 컬러 블랙 */
    border-radius:30px;     /* 보더 라운드 17 */
    background-color: transparent; /* 내부컬러 없음 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;         /* 크기 20 */
    font-weight: 400;        /* 굵기 400 */
    color: #000;             /* 컬러 블랙 */
}

/* [2] 뉴스 이미지 영역 */
.good_news_img {
    width: 830px;
    height: 830px;
    margin: 0 auto 50px;     /* 가운데 정렬 및 아래 간격 50px */
}

.good_news_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;     /* 원본 비율 유지 */
}

/* [3] 후원 텍스트 프레임 (1920x200 풀사이즈 배경) */
.good_sponsor_box {
    width: 100%;
    height: 200px;
    background-color: #e0e0e0; /* 컬러 e0e0e0 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;      /* 아래 간격 100px */
}

.good_sponsor_txt {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;         /* 크기 30 */
    font-weight: 400;        /* 굵기 400 */
    color: #000;             /* 컬러 블랙 */
    text-align: center;
    line-height: 1.5;
}

/* [4] 후원기관 로고 영역 */
.good_logo_area {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;    /* 아래 간격 100px */
}

.good_logo_img {
    width: 1280px;           /* 사이즈 1280x125 */
    height: 125px;
    object-fit: contain;
}


/* ─────────────────────────────────────────────────────────────
   서브페이지: 공지사항 (fw_news.html) - 최종 수정본
   ───────────────────────────────────────────────────────────── */
.sub_notice_page {
    width: 100%;
    background-color: #fff;
    padding: 50px 0 200px;
}

/* 1. 공지사항 타이틀 */
.sub_notice_page .board_main_title {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;       
    font-weight: 600;      
    color: #000;           
    text-align: center;
    margin-bottom: 60px;
}

/* 2. 게시판 래퍼 및 테이블 */
.sub_notice_page .board_wrapper { 
    width: 1240px; 
    margin: 0 auto; 
}

.sub_notice_page .news_table { 
    width: 100%; 
    border-top: 2px solid #000; 
    border-collapse: collapse; 
}

.sub_notice_page .news_table th { 
    background-color: #f9f9f9; 
    padding: 20px 0; 
    border-bottom: 1px solid #ddd; 
    font-family: 'Pretendard', sans-serif;
    font-size: 18px; 
    font-weight: 500;
    text-align: center; /* 기본은 중앙 */
}

/* [수정] 제목 헤더(th)와 데이터(td)를 왼쪽으로 정렬하여 dp_news와 맞춤 */
.sub_notice_page .news_table .th_title,
.sub_notice_page .news_table .td_title { 
    text-align: left !important; 
    padding-left: 40px !important; 
}

.sub_notice_page .news_table td { 
    padding: 20px 0; 
    border-bottom: 1px solid #eee; 
    text-align: center; 
    font-family: 'Pretendard', sans-serif;
    font-size: 16px; 
    color: #333; 
}

.sub_notice_page .news_table tr:hover td { 
    background-color: #fcfcfc; 
}

/* 3. 페이지네이션 */
.sub_notice_page .pagination { 
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    margin-top: 50px; 
}

.sub_notice_page .page_btn { 
    width: 40px; 
    height: 40px; 
    border: 1px solid #ddd; 
    background: #fff; 
    cursor: pointer; 
    transition: 0.3s;
    font-size: 16px; 
}

.sub_notice_page .page_btn.active { 
    background-color: #af1e25; 
    color: #fff; 
    border-color: #af1e25; 
}

/* 4. [추가] 팝업 배경 (모달 오버레이) */
.modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 어두운 배경 */
    display: none; /* 기본 숨김 */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 최상단 배치 */
}

/* 5. 모달 창 본체 */
.news_detail_content { 
    background: #fff; 
    width: 800px; 
    max-width: 90%; 
    padding: 50px 40px; 
    border-radius: 10px; 
    position: relative; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#fw_view_title { 
    font-family: 'Pretendard', sans-serif;
    font-size: 28px; 
    font-weight: 600; 
    margin-bottom: 15px; 
    text-align: left;
}

#fw_view_date { 
    color: #666; 
    font-size: 15px; 
    display: block;
    text-align: left;
    margin-bottom: 20px;
}


/* ─────────────────────────────────────────────────────────────
   서브페이지: 사업비전 (fw_vis.html) - 최종 통합 스타일 (정렬 및 간격 완벽 교정)
   ───────────────────────────────────────────────────────────── */

/* 1. 페이지 전체 배경 및 기본 설정 */
.fw_vis_page { background-color: #fff !important; }

.vis_content_wrap {
    width: 100%;
    min-width: 1240px;
    padding: 100px 0 200px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2. 타이틀 프레임 */
.vis_title_frame {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #000;
    border-radius: 30px;
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #000;
    background-color: transparent;
    box-sizing: border-box;
}

.frame_230 { width: 230px; height: 50px; margin-bottom: 50px; }
.frame_400 { width: 400px; height: 50px; margin-bottom: 100px; }
.frame_200 { width: 200px; height: 50px; margin-bottom: 0px; } 

/* 매출현황 하단 안내 문구 */
.sales_info_text {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    margin-top: 30px;
    margin-bottom: 100px;
    text-align: center;
}

/* 3. 운영시스템 이미지 박스 (1000 * 566) */
.vis_img_box { 
    width: 1000px; 
    height: 566px; 
    margin-bottom: 100px; 
    overflow: hidden; 
}
.vis_img_box img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    display: block; 
}

/* 4. 온-오프라인 통합 비전 카피 영역 */
.vision_copy_container {
    width: 1440px;
    margin-bottom: 100px;
}

.copy_box {
    width: 100%;
    height: 200px;
    background-color: #efeded;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.copy_left {
    padding-left: 100px;
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #af1f26;
}

.copy_right {
    padding-right: 100px;
    text-align: right;
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #000;
    line-height: 1.5;
}

/* 5. 매출현황 그래프 영역 */
.sales_graph_wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.graph_inner {
    width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 그래프 상단(바) 영역 - 패딩 통일 */
.graph_bars_area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 40px; /* 연도 영역과 동일하게 설정 */
    box-sizing: border-box;
}

/* ★ 정렬 핵심: 바 영역과 연도 영역의 너비를 80px로 완전 동일하게 고정 ★ */
.bar_unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px; 
}

/* 일반 수치 텍스트 (64억 등) */
.bar_val {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #b6c9bd; 
    margin-bottom: 20px;
    white-space: nowrap; /* 글자가 줄바꿈 되지 않도록 방어 */
}

/* 그래프 막대 (폭 30) */
.bar {
    width: 30px;
    background-color: #b6c9bd; 
}

/* --- 2024년 목표치 특수 스타일 --- */
.bar_unit.active .target_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ★ 100억과 그래프 탑 사이의 간격을 벌리는 부분 ★ */
    margin-bottom: 30px !important; 
}

.target_txt {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #AF1F26;
    margin-bottom: 5px;
}

.bar_unit.active .bar_val {
    font-size: 30px;
    font-weight: 800; /* 굵기 800 */
    color: #AF1F26;
    margin-bottom: 0 !important; 
}

.bar_unit.active .bar {
    width: 30px;
    height: 450px !important;
    background-color: #AF1F26;
}

/* 바닥선 (두께 10px) */
.graph_base_line {
    width: 100%; /* 1200px 안에서 100% 꽉 채움 */
    height: 10px;
    background-color: #000;
}

/* 연도 영역 (상단 그래프 영역과 패딩 완벽 일치) */
.graph_years_area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 40px; 
    margin-top: 20px; /* 바닥선과 년도 간격 20px */
    box-sizing: border-box;
}

/* ★ 정렬 핵심: 연도 텍스트 상자 너비를 상단 bar_unit과 동일한 80px로 강제 고정 ★ */
.graph_years_area span {
    display: inline-block;
    width: 80px; 
    text-align: center;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

/* 2024년 연도 강조 */
.active_year {
    font-weight: 500;
}


/* ─────────────────────────────────────────────────────────────
   SEO 및 접근성을 위한 텍스트 숨김 처리 (Blind)
   ───────────────────────────────────────────────────────────── */
.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    overflow: hidden;
    margin: -1px;
    white-space: nowrap;
}


.store_addr {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 모바일 클릭 시 하이라이트 잔상 제거 */
}