/* CSS 가이드: 한 줄로 작성 및 rem 단위 적용 (PC 1rem=16px) */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:'Pretendard', sans-serif; background-color:#F8FAFC; color:#1E293B; line-height:1.5; overflow-x:hidden; font-size:1rem; }
ul, li { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input { font-family:inherit; outline:none; }
.material-symbols-outlined { font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; display:inline-block; vertical-align:middle; }
.main_header { display:flex; flex-direction:column; gap:1rem; margin-bottom:2.5rem; }
.main_header h2 { font-size:2.25rem; font-weight:800; color:#1E1B4B; letter-spacing:-0.03em; }
.main_header p { font-size:0.9375rem; color:#64748B; font-weight:500; }
/* PC Header */
.pc_nav { display:block; background:rgba(255, 255, 255, 0.95); backdrop-filter:blur(8px); border-bottom:1px solid #DBEAFE; position:sticky; top:0; z-index:50; width:100%; }
.pc_nav .inner { max-width:1440px; margin:0 auto; padding:0 2rem; height:5rem; display:flex; align-items:center; justify-content:space-between; }
.pc_nav .logo_group { display:flex; align-items:center; gap:0.75rem; cursor:pointer; }
.pc_nav .logo_group .icon_bg { background:#3B82F6; padding:0.5rem; border-radius:0.5rem; display:flex; align-items:center; }
.pc_nav .logo_group .text_group h1 { font-size:1.25rem; color:#1E1B4B; font-weight:800; font-style:italic; line-height:1; text-transform:uppercase; }
.pc_nav .logo_group .text_group p { color:#3B82F6; font-size:0.8125rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-top:0.125rem; }
.pc_nav .gnb { display:flex; align-items:center; gap:2.5rem; height: 100%; flex:1; justify-content:center; min-width:0; }
.pc_nav .gnb .gnb_item { position: relative; height: 100%; display: flex; align-items: center; }
.pc_nav .gnb .gnb_item > button { font-size:0.9375rem; font-weight:500; color:#64748B; transition:0.2s; height: 100%; padding: 0 0.5rem; }
.pc_nav .gnb .gnb_item > button.active { color:#3B82F6; font-weight:700; border-bottom:2px solid #3B82F6; }
.pc_nav .gnb .gnb_item .sub_menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #E2E8F0; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); padding: 0.5rem 0; min-width: 10rem; z-index: 100; }
.pc_nav .gnb .gnb_item:hover .sub_menu { display: block; }
.pc_nav .gnb .gnb_item .sub_menu button { width: 100%; text-align: left; padding: 0.625rem 1.25rem; font-size: 0.875rem; color: #475569; font-weight: 500; transition: 0.2s; white-space: nowrap; }
.pc_nav .gnb .gnb_item .sub_menu button:hover { background: #F8FAFC; color: #3B82F6; }
.pc_nav .gnb .gnb_item .sub_menu button.active { color: #3B82F6; font-weight: 700; background: #EFF6FF; }
.pc_nav .util { display:flex; align-items:center; gap:1rem; position:relative; }
.pc_nav .util .btn_guide { font-size:0.875rem; font-weight:600; color:#475569; padding:0.4rem 0.875rem; border-radius:0.5rem; border:1px solid #E2E8F0; background:#F8FAFC; transition:0.2s; white-space:nowrap; }
.pc_nav .util .btn_guide:hover { background:#EFF6FF; color:#3B82F6; border-color:#BFDBFE; }
.pc_nav .util .btn_bell { position:relative; color:#94A3B8; padding:0.5rem; }
.pc_nav .util .btn_bell .dot { position:absolute; top:0.5rem; right:0.5rem; width:0.375rem; height:0.375rem; background:#EF4444; border-radius:50%; border:1px solid #fff; }
.pc_nav .util .user_avatar { width:2.25rem; height:2.25rem; border-radius:50%; background:#2563EB; display:flex; align-items:center; justify-content:center; color:#fff; }
/* 통화 선택 버튼 */
.currency_select_wrap .currency_btn { display:flex; align-items:center; gap:0.3rem; padding:0.375rem 0.625rem; border-radius:0.5rem; border:1px solid #E2E8F0; background:#F8FAFC; font-size:0.75rem; font-weight:700; color:#475569; transition:0.2s; white-space:nowrap; }
.currency_select_wrap .currency_btn:hover { background:#EFF6FF; color:#3B82F6; border-color:#BFDBFE; }
.currency_dropdown .curr-code { font-size:0.6875rem; font-weight:800; color:#9ca3af; width:2rem; flex-shrink:0; }
.currency_dropdown button.active { color:#2563eb; background:#eff6ff; }
/* Dropdown */
.dropdown { display:none; position:absolute; top:3.5rem; right:0; width:14rem; background:#fff; border-radius:1rem; box-shadow:0 10px 15px -3px rgba(0,0,0,0.1); border:1px solid #F1F5F9; padding:0.75rem 0; z-index:100; animation:fadeIn 0.3s ease; }
.dropdown.show { display:block; }
.dropdown .header { padding:0.5rem 1rem; border-bottom:1px solid #F8FAFC; margin-bottom:0.5rem; }
.dropdown .header .label { font-size:0.8125rem; color:#94A3B8; font-weight:700; text-transform:uppercase; }
.dropdown .header .email { font-size:0.875rem; color:#1E1B4B; font-weight:700; }
.dropdown button { width:100%; display:flex; align-items:center; gap:0.75rem; padding:0.5rem 1rem; font-size:0.875rem; font-weight:500; color:#475569; border:none; background:none; cursor:pointer; text-align:left; }
.dropdown button svg { stroke:#475569; }
.dropdown button:hover { background:#F8FAFC; color:#3B82F6; }
.dropdown button:hover svg { stroke:#3B82F6; }
.dropdown .logout { color:#EF4444; font-weight:700; border-top:1px solid #F8FAFC; margin-top:0.5rem; padding-top:0.75rem; }
.dropdown .logout svg { stroke:#EF4444; }
/* Mobile Top Nav */
.mobile_nav { display:none; background:rgba(255, 255, 255, 0.95); backdrop-filter:blur(10px); border-bottom:1px solid #EFF6FF; position:sticky; top:0; z-index:50; width:100%; height:4rem; align-items:center; justify-content:space-between; padding:0 1.25rem; box-shadow:0 2px 10px rgba(0,0,0,0.02); }
.mobile_nav .logo_group { display:flex; align-items:center; gap:0.625rem; }
.mobile_nav .logo_group .icon_bg { background:#3B82F6; padding:0.375rem; border-radius:0.5rem; display:flex; align-items:center; }
.mobile_nav .logo_group h1 { font-size:1.125rem; font-weight:900; color:#1E1B4B; font-style:italic; letter-spacing:-0.03em; }
.mobile_nav .util { display:flex; align-items:center; gap:0.25rem; position:relative; }
/* bottom_nav */
.bottom_nav { display:none; position:fixed; bottom:0; left:0; width:100%; height:4.5rem; background:#fff; border-top:1px solid #E2E8F0; z-index:60; align-items:center; justify-content:space-around; box-shadow:0 -4px 12px rgba(0,0,0,0.05); }
.bottom_nav button { display:flex; flex-direction:column; align-items:center; gap:0.25rem; color:#94A3B8; transition:0.2s; }
.bottom_nav button svg { stroke:#94A3B8; transition:0.2s; } /* 기본 아이콘 색상 */
.bottom_nav button.active span { color:#3B82F6; } /* 활성 글자 색상 */
.bottom_nav button.active svg { stroke:#3B82F6; } /* 활성 아이콘 색상 */
.bottom_nav button span { font-size:0.75rem; font-weight:700; color:#94A3B8; }
/* footer */
.footer { display:block; background:#fff; border-top:1px solid #E2E8F0; padding:4rem 2rem 3rem; margin-top:5rem; width:100%; }
.footer .inner { max-width:1440px; margin:0 auto; display:grid; grid-template-columns:repeat(12, 1fr); gap:60px; }
.footer .company_info { grid-column:span 5; }
.footer .company_info .f_logo h2 { font-size:1.375rem; font-weight:700; color:#1E1B4B; font-style:italic; }
.footer .company_info .f_logo p { font-size:0.8125rem; color:#3B82F6; font-weight:700; letter-spacing:0.1em; }
.footer .company_info .desc { font-size:0.875rem; color:#64748B; line-height:1.7; margin:1.5rem 0; max-width:23.75rem; }
.footer .company_info .copy { font-size:0.8125rem; color:#94A3B8; font-weight:500; }
.footer .company_info .biz { font-size:0.8125rem; color:#94A3B8; margin-top:0.5rem; font-weight:500; }
.footer .link_grid { grid-column:span 7; display:grid; grid-template-columns:repeat(3, 1fr); gap:2.5rem; }
.footer .link_grid .title { font-size:0.9375rem; font-weight:700; color:#0F172A; margin-bottom:1.25rem; text-decoration:underline; text-underline-offset:6px; text-decoration-color:#DBEAFE; }
.footer .link_grid ul li { margin-bottom:0.75rem; }
.footer .link_grid ul li a { font-size:0.875rem; color:#64748B; font-weight:500; text-decoration:none; transition:0.2s; }
.footer .link_grid ul li a:hover { color:#3B82F6; }
.footer .link_grid .office { font-size:0.8125rem; color:#64748B; line-height:1.5; font-weight:500; }

/* [커스텀] 달력 공통 스타일 (기존 UI 흐름 방해 금지) */
.container .date_picker_group { display:flex; align-items:center; gap:0.5rem; }
.container .custom_date_container { position:relative; display:inline-block; }
.container .custom_date_trigger { height:2.625rem; position:relative; display:inline-flex; align-items:center; gap:0.5rem; padding:0 1rem; background:#fff; border:1px solid #E2E8F0; border-radius:0.75rem; font-size:0.875rem; font-weight:700; color:#1E1B4B; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.05); min-width:140px; justify-content:space-between; transition: 0.2s; }
.container .custom_date_trigger:hover { border-color: #3B82F6; }
.container .custom_date_trigger span img { width:20px; }
.container .calendar_popup { display:none; position:absolute; top:calc(100% + 10px); left:0; width:280px; background:#fff; border-radius:1.25rem; border:1px solid #E2E8F0; box-shadow:0 15px 35px -5px rgba(0,0,0,0.15); z-index:1001; padding:1.25rem; animation:fadeIn 0.2s ease; }
.container .calendar_popup.show { display:block; }
.container .calendar_popup.month_only { width: 240px; }
.container .calendar_popup.right_align { left: auto; right: 0; }
.container .calendar_popup .cal_header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.container .calendar_popup .cal_header .cur_val { font-size:1rem; font-weight:800; color:#1E1B4B; }
.container .calendar_popup .cal_grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; text-align:center; }
.container .calendar_popup .cal_grid span { font-size:0.75rem; font-weight:600; color:#94A3B8; padding:8px 0; }
.container .calendar_popup .cal_grid button { aspect-ratio:1; border-radius:8px; font-size:0.8125rem; font-weight:600; color:#475569; }
.container .calendar_popup .cal_grid button:hover:not(:disabled) { background:#EFF6FF; color:#3B82F6; }
.container .calendar_popup .cal_grid button.active { background:#3B82F6!important; color:#fff!important; }
.container .calendar_popup .cal_grid button.other { color:#CBD5E1; }
.container .calendar_popup .month_grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.container .calendar_popup .month_grid button { padding:12px 0; border-radius:10px; font-size:0.875rem; font-weight:700; color:#475569; }
.container .calendar_popup .month_grid button:hover { background:#EFF6FF; color:#3B82F6; }
.container .calendar_popup .month_grid button.active { background:#3B82F6; color:#fff; }
.container .dashboard_row .report_card .top_row .date_picker_group .search_btn { width:2.625rem; height:2.625rem; background:#1E1B4B; border-radius:0.5rem; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.container .dashboard_row .report_card .top_row .date_picker_group .search_btn img { width:22px; }

@media only screen and (max-width: 768px) {
    html { font-size:15px; }
    body { font-size:1rem; }
    .main_header { margin-bottom:2rem; }
    .main_header h2 { font-size:1.5rem; }
    .pc_nav { display:none; }
    .mobile_nav { display:flex; }
    .mobile_nav .logo_group { display:flex; align-items:center; gap:0.625rem; }
    .mobile_nav .logo_group .icon_bg { background:#3B82F6; padding:0.375rem; border-radius:0.5rem; display:flex; align-items:center; box-shadow:0 2px 8px rgba(59, 130, 246, 0.2); }
    .mobile_nav .logo_group h1 { font-size:1.125rem; font-weight:900; color:#1E1B4B; font-style:italic; letter-spacing:-0.03em; }
    .mobile_nav .util { display:flex; align-items:center; gap:0.25rem; position:relative; }
    .mobile_nav .util .btn_guide { font-size:0.8125rem; font-weight:600; color:#475569; padding:0.3rem 0.625rem; border-radius:0.375rem; border:1px solid #E2E8F0; background:#F8FAFC; white-space:nowrap; }
    .mobile_nav .util .btn_bell { position:relative; color:#94A3B8; padding:0.5rem; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .mobile_nav .util .btn_bell .dot { position:absolute; top:0.5rem; right:0.5rem; width:0.3125rem; height:0.3125rem; background:#EF4444; border-radius:50%; border:1px solid #fff; }
    .mobile_nav .util .user_avatar { width:2.125rem; height:2.125rem; border-radius:50%; background:#2563EB; display:flex; align-items:center; justify-content:center; color:#fff; border:none; cursor:pointer; margin-left:0.375rem; box-shadow:0 2px 6px rgba(37, 99, 235, 0.15); }
    .mobile_nav .util .dropdown { display:none; position:absolute; top:3.25rem; right:0; width:11.25rem; background:#fff; border-radius:0.75rem; box-shadow:0 10px 15px -3px rgba(0,0,0,0.1); border:1px solid #F1F5F9; padding:0.5rem 0; z-index:100; animation:fadeIn 0.3s ease; }
    .mobile_nav .util .dropdown.show { display:block; }
    .mobile_nav .util .dropdown button { width:100%; display:flex; align-items:center; gap:0.625rem; padding:0.625rem 1rem; font-size:0.8125rem; font-weight:600; color:#475569; border:none; background:none; cursor:pointer; }

    .bottom_nav { display:flex; }
    .bottom_nav button span { font-size:0.75rem; }

    .footer { display:none; }
}
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }