/*===========================================================================
	웹폰트
============================================================================*/

/* 폰트 */
@font-face {
    font-family: "Pretendard";
    font-weight: 100;
    font-style: normal;
    src: url("/fonts/Pretendard-Thin.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    font-weight: 200;
    font-style: normal;
    src: url("/fonts/Pretendard-ExtraLight.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    font-weight: 300;
    font-style: normal;
    src: url("/fonts/Pretendard-Light.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    font-weight: 400;
    font-style: normal;
    src: url("/fonts/Pretendard-Regular.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    font-weight: 500;
    font-style: normal;
    src: url("/fonts/Pretendard-Medium.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    font-weight: 600;
    font-style: normal;
    src: url("/fonts/Pretendard-SemiBold.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    font-weight: 700;
    font-style: normal;
    src: url("/fonts/Pretendard-Bold.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    font-weight: 800;
    font-style: normal;
    src: url("/fonts/Pretendard-ExtraBold.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    font-weight: 900;
    font-style: normal;
    src: url("/fonts/Pretendard-Black.woff2") format("woff2");
    font-display: swap;
}

/*===========================================================================
	CSS 초기화
============================================================================*/
@layer common {
    * {
        font-family: "Pretendard", sans-serif;
        /* font-family: "Noto Sans", sans-serif; */
        box-sizing: border-box;
    }
    *:not([class*="leading-"]) {
        line-height: 1.4;
    }
    html,
    body,
    div,
    span,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    em,
    img,
    strong,
    b,
    i,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    form,
    label,
    legend,
    caption,
    article,
    aside,
    footer,
    header,
    menu,
    nav,
    section,
    video,
    a {
        border: 0;
        outline: 0;
        line-height: 1;
        padding: 0;
        margin: 0;
        color: #494a4e;
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        line-height: 1;
        -ms-overflow-style: none;
        height: 100%;
    }
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }
    ul,
    ol,
    li {
        list-style: none;
    }
    strong {
        display: inline-block;
    }
    pre {
        font-family: "Pretendard", sans-serif;
        white-space: pre-line;
        line-height: 1.5;
    }
    form {
        display: contents;
    }
    input,
    select {
        vertical-align: middle;
        outline: 0;
        border: 0;
        background: none;
        font-family: "Pretendard", sans-serif;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type="file"],
    input[type="checkbox"],
    input[type="radio"] {
        display: none;
    }
    input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0;
        cursor: pointer;
    }

    input[type="date"] {
        position: relative;
    }
    select {
        appearance: none;
        background-image: url(../images/icon_arrow_down.png);
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 24px;
    }
    select option[value="disabled"][disabled] {
        display: none;
    }
    label {
        cursor: pointer;
    }
    button {
        cursor: pointer;
    }
    a {
        text-decoration: none;
        display: block;
    }
    textarea {
        border: 0;
        outline: 0;
        resize: none !important;
        font-family: "Pretendard", sans-serif;
    }
    span,
    strong,
    a,
    pre,
    i {
        color: inherit;
    }
    details summary {
        list-style: none;
    }
    details[open] summary svg {
        transform: rotate(180deg);
    }
}

/* 컨텐츠 공통 — 스크롤 가능 영역은 유지하되 스크롤바는 표시하지 않음 (프로젝트 전역) */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
}
*::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}
.no-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.site-btn-wrap {
    position: relative;
    height: 48px;
    /* transition: 0.3s; */
    overflow: hidden;
}

.site-btn-wrap .site-btn {
    /* transition: background 0.3s; */
    border-radius: 100%;
}
.site-btn-wrap.login-wrap {
    height: 40px;
}

.site-btn-wrap.active {
    overflow: visible;
    border-radius: 8px 8px 0 0;
}

.site-btn-wrap.footer-site-btn.active {
    border-radius: 24px 24px 0 0;
}
.footer-site-btn.active  .site-btn-list {
    border-top:none;
    box-shadow: -1px 0 0 0 white, 1px 0 0 0 white, 0 1.6px 0 0 white;
}

.site-btn-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    /* 버튼처럼 보더가 외부에 생기도록 box-shadow 사용 (좌/우/하단만) */
    box-shadow: -1.6px 0 0 0 white, 1px 0 0 0 white, 0 1.6px 0 0 white;
    border-radius: 0 0 8px 8px;
}

/* 로그인 페이지: 뒤에 글자 가려지도록 진한 배경 */
.site-btn-wrap.login-wrap .site-btn-list {
    background: rgba(0, 0, 0, 0.9);
}

/* 푸터 등: wrap에 배경색이 있는 경우 */
.site-btn-wrap:not(.login-wrap) .site-btn-list {
    background: #222222;
}

/* 푸터: rounded-[24px]에 맞춤 */
.site-btn-wrap.footer-site-btn .site-btn-list {
    border-radius: 0 0 24px 24px;
}

.site-btn .minus {
    display: none;
}

/* 오픈 시 버튼 배경색 (login-wrap: 로그인 페이지 등 진한 배경) */
.site-btn-wrap.login-wrap.active .site-btn {
    background: rgba(0, 0, 0, 0.9);
    border-radius: 8px 8px 0 0;
    
}


.login-wrap.active .site-btn-list {
    box-shadow: -1px 0 0 0 white, 1px 0 0 0 white, 0 1.6px 0 0 white;
}

.site-btn-wrap:not(.login-wrap).active .site-btn {
    background: #222222;
}

.site-btn-wrap.active .minus {
    display: block;
}

.site-btn-wrap.active .plus {
    display: none;
}

.site-btn-wrap.active .site-btn-list {
    display: block;
}



@media (max-width: 1024px) {

.site-btn-wrap {
    height: 40px;
}

.site-btn-wrap.footer-site-btn.active {
    border-radius: 8px 8px 0 0;
}

.site-btn-wrap.footer-site-btn .site-btn-list {
    border-radius: 0 0 8px 8px;
}

}

/* 커스텀 대시선 (피그마: dashes 2, 6 / border-width 1px) */
.dashed-border-custom {
    border-bottom: none !important;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 25%, transparent 25%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    background-position: bottom;
}
.dashed-border-custom:last-child {
    background-image: none;
}

/* 동일 대시선 — lg(1024px) 이상에서만 (모바일에서는 숨김) */
@media (min-width: 1024px) {
    .dashed-border-custom-lg {
        border-bottom: none !important;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 25%, transparent 25%);
        background-size: 8px 1px;
        background-repeat: repeat-x;
        background-position: bottom;
    }
    .dashed-border-custom-lg:last-child {
        background-image: none;
    }
}

/* [변경] 연구과제 성과지표별 진행바 (user_main.html, research_indicator_status.html)
 * 문서: docs/research_progress_bar.md
 * 3겹 구조 (트랙 100% + 목표% + 달성%)
 *
 * - 트랙(100%): #edf0ff, border-radius 6px, 보더 없음
 * - 목표율 .research-progress-target: rgba(0,0,0,0.2)
 * - 달성율 .research-progress-achievement: linear-gradient(90deg, #004FC0, #4981F9)
 * - width: HTML inline style (style="width: N%")
 */
.research-progress-track {
    position: relative;
    width: 100%;
    height: 8px;
    background-color: #edf0ff;
    border-radius: 6px;
    overflow: hidden;
}
.research-progress-target,
.research-progress-achievement {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 6px;
    transition: width 0.3s ease;
}
.research-progress-target {
    background-color: rgba(0, 0, 0, 0.2);
}
.research-progress-achievement {
    background: linear-gradient(90deg, #004fc0 0%, #4981f9 100%);
}

/* [변경] 성과 유형별 달성 건수 진행바 (total_overview.html)
 * 문서: docs/overview_type_progress.md
 *
 * - 트랙(바깥): 카드 내 가로 100%
 * - 목표 레이어(#edf0ff): (목표 / maxTarget) × 100%
 * - 실달성 레이어(그라데이션 #004FC0→#4981F9): (실달성 / maxTarget) × 100%
 * - 달성율 뱃지: (실달성 / 목표) × 100%, left = 목표 막대 끝 + 8px (JS)
 */
.overview-type-progress-track {
    position: relative;
    width: 100%;
    height: 24px;
    background-color: #ffffff;
    border-radius: 4px;
    overflow: hidden;
}
/* [변경] 목표 구간 — rgba(6,69,160,0.15) → #edf0ff */
.overview-type-progress-target {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: #edf0ff;
    border-radius: 4px;
    transition: width 0.3s ease;
    z-index: 1;
}
/* [변경] 실달성 구간 — 단색 #0645A0 → 그라데이션 #004FC0→#4981F9 */
.overview-type-progress-achievement {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, #004fc0 0%, #4981f9 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
    z-index: 2;
}

/* 필터 태그 버튼: 텍스트 수직 중앙 정렬 */
.filter-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 연구 로드맵 아코디언: 활성 시 Tailwind bg-[#0745A0]/8(color-mix) 틴트 제거 */
.roadmap-accordion-item.is-open {
    background-color: transparent !important;
}

/* 로드맵 아코디언 패널: 높이 부드럽게 펼침/접힘 (grid 0fr → 1fr) */
.roadmap-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.roadmap-accordion-item.is-open .roadmap-accordion-panel {
    grid-template-rows: 1fr;
}
@media (prefers-reduced-motion: reduce) {
    .roadmap-accordion-panel {
        transition: none;
    }
}

/* 회원가입: 전역 input/select 리셋(common @layer) + iOS Safari와 충돌 시 높이 40px 고정 */
form.sign-up-form input[type="text"],
form.sign-up-form input[type="password"],
form.sign-up-form input[type="email"],
form.sign-up-form select {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    min-height: 40px;
    height: 40px;
    line-height: 1.25;
}
/* 인풋 글자 크기: Tailwind text-* 가 전역 초기화와 겹칠 때 대비해 명시 */
form.sign-up-form input[type="text"],
form.sign-up-form input[type="password"],
form.sign-up-form input[type="email"] {
    font-size: 14px;
}
@media (min-width: 768px) {
    form.sign-up-form input[type="text"],
    form.sign-up-form input[type="password"],
    form.sign-up-form input[type="email"] {
        font-size: 16px;
    }
}
/* 커스텀 셀렉트: 전역 select 배경 화살표 제거 (페이지에서 img 사용) */
/* option에는 font-size가 대부분 적용되지 않으므로 select에 지정 */
form.sign-up-form select {
    background-image: none !important;
    font-size: 14px;
}
@media (min-width: 768px) {
    form.sign-up-form select {
        font-size: 16px;
    }
}

/* 회원가입: 모바일(<md)에서는 커스텀 대시선 제거 */
@media (max-width: 767px) {
    form.sign-up-form .dashed-border-custom {
        background-image: none !important;
        border-bottom: none !important;
    }
}

/* [변경] 연도별 성과 달성 건수 차트 — 범례·가로 스크롤 레이아웃 (indicator_demo_detail 등) */

/* [변경] 목표(선) 범례 — 기존 bg-[#829BFF] → #CFD9FF */
.chart-legend-target {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 2px;
    background-color: #cfd9ff;
}

/* [변경] 실달성(막대) 범례 — 기존 bg-[#0645A0] → 그라데이션 */
.chart-legend-bar {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #4981f9 0%, #004fc0 100%);
}

/* [변경] 차트 최외곽 — Y축 고정 + 가로 스크롤 body flex 배치 */
.achievement-count-chart-scroll {
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
}

/* [변경] Y축 고정 캔버스 (prepareScrollLayout이 동적 생성) */
.achievement-count-chart-y-axis {
    flex-shrink: 0;
    display: block;
    background: #fff;
}

/* [변경] 가로 스크롤·드래그 영역 (차트 canvas 포함) */
.achievement-count-chart-body {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: thin;
}

/* [변경] 드래그 스크롤 중 커서·선택 방지 */
.achievement-count-chart-body.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* [변경] 스크롤 body 내부 canvas 래퍼 높이 100% */
.achievement-count-chart-body > .relative {
    height: 100%;
}

/* 사업성과 지표별 달성율 범례(Indicator Status page) — 모바일/PC 크기 대응 */
#achievementChartLegend .achievement-legend-box {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
#achievementChartLegend .achievement-legend-text {
    font-size: 11px;
}
@media (min-width: 1140px) {
    #achievementChartLegend .achievement-legend-box {
        width: 8px;
        height: 8px;
    }
    #achievementChartLegend .achievement-legend-text {
        font-size: 12px;
    }
}



/* [변경] intro.html — 사업 현주소 프로세스 플로우 (docs/intro_page.md) */
.intro-process-flow {
    gap: 8px;
}
.intro-process-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.intro-process-card {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
}
.intro-process-card-tall {
    min-height: 56px;
}
.intro-process-num {
    display: flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.intro-process-label {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    word-break: keep-all;
}
.intro-process-label-multiline {
    line-height: 1.4;
}
.intro-process-arrow {
    flex-shrink: 0;
    width: 5px;
    height: 10px;
}
.intro-process-arrow-h {
    width: 5px;
    height: 10px;
}
.intro-process-arrow-v {
    transform: rotate(90deg);
}
.intro-process-arrow-left {
    transform: scaleX(-1);
}
.intro-process-arrow-cell {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}
.intro-process-arrow-gap {
    flex-shrink: 0;
    width: 5px;
}
@media (min-width: 1024px) {
    .intro-process-flow {
        gap: 12px;
    }
    .intro-process-row {
        gap: 12px;
    }
    .intro-process-card {
        gap: 12px;
        min-height: 56px;
        padding: 10px 16px;
    }
    .intro-process-card-tall {
        min-height: 74px;
    }
    .intro-process-num {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    .intro-process-label {
        font-size: 18px;
        line-height: 1.4;
    }
    .intro-process-arrow,
    .intro-process-arrow-h {
        width: 7px;
        height: 12px;
    }
    .intro-process-arrow-gap {
        width: 7px;
    }
}