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

/* 폰트 */
@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);
    }
}


@font-face {
    font-family: 'JoyfulStory';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OTEnjoystoriesBA.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}




/* 컨텐츠 공통 — 스크롤 가능 영역은 유지하되 스크롤바는 표시하지 않음 (프로젝트 전역) */
* {
    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 */
}

.nav-mega-bg {
    background-color: #44444466;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}


@media (min-width: 1280px) {
    #siteHeader:has(.nav-desktop-hover-root:hover),
    #siteHeader:has(.nav-desktop-hover-root:focus-within) {
        background: linear-gradient(
                to bottom,
                #ffffff 0,
                #ffffff 130px,
                rgba(255, 255, 255, 0) 130px
            )
            !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    #siteHeader.is-scrolled {
        transition-property: box-shadow !important;
    }
}

#siteHeader:has(.nav-desktop-hover-root:hover) .nav-mega-bg,
#siteHeader:has(.nav-desktop-hover-root:focus-within) .nav-mega-bg {
    opacity: 1;
}


@media (min-width: 768px) {

    .main-media-post .group .media-hover-copy {
        transform: translateY(50%);
    }

    .group .media-hover-copy {
        transform: translateY(80%);
    }

    .group:hover .media-hover-copy,
    .group:focus-within .media-hover-copy {
        transform: translateY(0);
    }
}

@media (min-width: 1280px) {
    #siteHeader.is-scrolled .nav-desktop-hover-root .nav-col > a:not(:has(> img)) {
        color: #202020;
    }
    #siteHeader.is-scrolled .nav-desktop-hover-root [data-header-divider] {
        background-color: #202020;
    }
    #siteHeader.is-scrolled .nav-mega-strip a[data-header-contact] {
        border-color: transparent;
        background-color: transparent;
        background-image: linear-gradient(to right, #f9dc95, #f8c6a8);
        filter: brightness(1.03);
    }
    #siteHeader.is-scrolled .nav-desktop-hover-root .nav-col > a:has(> img) {
        opacity: 0.9;
    }
}

/* 모바일 상단바: 스크롤 시 CONTACT·햄버거 아이콘 대비 */
@media (max-width: 1279px) {
    #siteHeader.is-scrolled .xl\:hidden a[data-header-contact] {
        border-color: #202020;
        color: #202020;
    }
    #siteHeader.is-scrolled .xl\:hidden [data-mobile-nav-toggle] {
        color: #202020;
    }
}

/* 2줄 말줄임(라인 클램프) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 메인 투자개발: 꾸밈용 배경 이미지 */
.section-investment-dev {
    isolation: isolate;
}

.section-investment-dev::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/images/deco_bg_1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

/* HOW WE WORK: 꾸밈용 배경 이미지 (투자개발 섹션과 동일 규칙, 파일만 다름) */
.section-how-we-work {
    isolation: isolate;
}

.section-how-we-work::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/images/deco_bg_2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

/* 카드: 기본 노출 — --default-1=1번(투자자문), --default-3=3번(투자개발); 호버 시 해당 카드만 720px */
.expand-cards {
    --expand-card-width-duration: 220ms;
    /* 너비 끝난 뒤 상세·타이틀 페이드(등장만) */
    --expand-card-content-fade: 200ms;
}

.expand-cards .expand-card {
    width: 320px;
    transition: width var(--expand-card-width-duration) ease-out;
}
.expand-cards.expand-cards--default-1 .expand-card:first-child,
.expand-cards.expand-cards--default-3 .expand-card:nth-child(3) {
    width: 720px;
}
.expand-cards:has(.expand-card:hover) .expand-card {
    width: 320px;
}
.expand-cards:has(.expand-card:hover) .expand-card:hover {
    width: 720px;
}

/* lg+: 카드 간격 — 4.5%는 넓은 화면에서도 수십 px로 커짐(8px은 하한만). 뷰포트 기준 vw로 좁혀짐 */
@media (min-width: 1024px) {
    .expand-cards {
        --ec-gap: clamp(8px, 2vw, 3.75rem);
        gap: var(--ec-gap);
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .expand-cards .expand-card {
        width: min(
            320px,
            calc((100% - 2 * var(--ec-gap)) / 4.25)
        ) !important;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .expand-cards.expand-cards--default-1 .expand-card:first-child,
    .expand-cards.expand-cards--default-3 .expand-card:nth-child(3) {
        width: min(
            720px,
            calc((100% - 2 * var(--ec-gap)) / 4.25 * 2.25)
        ) !important;
    }

    .expand-cards:has(.expand-card:hover) .expand-card {
        width: min(
            320px,
            calc((100% - 2 * var(--ec-gap)) / 4.25)
        ) !important;
    }

    .expand-cards:has(.expand-card:hover) .expand-card:hover {
        width: min(
            720px,
            calc((100% - 2 * var(--ec-gap)) / 4.25 * 2.25)
        ) !important;
    }

    .expand-cards .expand-card .expand-card-content {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .expand-cards .expand-card .expand-card-details,
    .expand-cards .expand-card .expand-card-details ul {
        max-width: 100%;
        min-width: 0;
    }

}

/* 접힘(320px): 배경 이미지 흑백 / 열림(720px): 컬러 */
.expand-cards .expand-card > img {
    filter: grayscale(1);
    transition-property: transform, filter;
    transition-duration: 500ms, var(--expand-card-width-duration);
    transition-timing-function: ease-out, ease-out;
}
.expand-cards.expand-cards--default-1 .expand-card:first-child > img,
.expand-cards.expand-cards--default-3 .expand-card:nth-child(3) > img {
    filter: grayscale(0);
}
.expand-cards:has(.expand-card:hover) .expand-card > img {
    filter: grayscale(1);
}
.expand-cards:has(.expand-card:hover) .expand-card:hover > img {
    filter: grayscale(0);
}

/* 하위내용: 접힘 시 높이 0 — 등장·퇴장은 opacity 페이드만(세로 슬라이드 느낌 제거) */
.expand-cards .expand-card .expand-card-details {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
}

/* 한글 줄바꿈: 어절 단위(keep-all). anywhere는 글자 한 자씩 끊김 방지 */
.expand-cards .expand-card .expand-card-details ul,
.expand-cards .expand-card .expand-card-details li {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 기본 노출 카드 하위 «열림»: 스트립 무반응이거나 해당 카드만 호버 */
.expand-cards.expand-cards--default-1:not(:has(.expand-card:hover)) .expand-card:first-child .expand-card-details,
.expand-cards.expand-cards--default-1:has(.expand-card:hover) .expand-card:first-child:hover .expand-card-details,
.expand-cards.expand-cards--default-3:not(:has(.expand-card:hover)) .expand-card:nth-child(3) .expand-card-details,
.expand-cards.expand-cards--default-3:has(.expand-card:hover) .expand-card:nth-child(3):hover .expand-card-details {
    max-height: 300px;
    opacity: 1;
    margin-top: 12px;
}

/* 스트립 호버 없음: 너비 펼친 뒤 레이아웃 즉시, 글자만 페이드 인 */
.expand-cards.expand-cards--default-1:not(:has(.expand-card:hover)) .expand-card:first-child .expand-card-details,
.expand-cards.expand-cards--default-3:not(:has(.expand-card:hover)) .expand-card:nth-child(3) .expand-card-details {
    transition:
        max-height 0s linear var(--expand-card-width-duration),
        margin-top 0s linear var(--expand-card-width-duration),
        opacity 280ms ease-out var(--expand-card-width-duration);
}

/* 닫힐 때: 페이드 아웃 후 레이아웃 접기 */
.expand-cards:has(.expand-card:hover) .expand-card:not(:hover) .expand-card-details {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition:
        opacity 240ms ease-in,
        max-height 0s linear 240ms,
        margin-top 0s linear 240ms;
}

/* 기본 노출 카드: 다른 카드 호버로 닫힐 때 하위 내용 즉시 제거(너비 줄어드는 동안 글자가 남지 않게) */
.expand-cards.expand-cards--default-1:has(.expand-card:hover) .expand-card:first-child:not(:hover) .expand-card-details,
.expand-cards.expand-cards--default-3:has(.expand-card:hover) .expand-card:nth-child(3):not(:hover) .expand-card-details {
    transition: none;
}

.expand-cards:has(.expand-card:hover) .expand-card:hover .expand-card-details {
    max-height: 300px;
    opacity: 1;
    margin-top: 12px;
    transition:
        max-height 0s linear var(--expand-card-width-duration),
        margin-top 0s linear var(--expand-card-width-duration),
        opacity 280ms ease-out var(--expand-card-width-duration);
}

/* 타이틀 정렬: 접힘(320px)에서는 가운데, 열림(720px)에서는 왼쪽 */
.expand-cards .expand-card .expand-card-content {
    text-align: center;
}
.expand-cards.expand-cards--default-1 .expand-card:first-child .expand-card-content,
.expand-cards.expand-cards--default-3 .expand-card:nth-child(3) .expand-card-content {
    text-align: left;
}
.expand-cards:has(.expand-card:hover) .expand-card .expand-card-content {
    text-align: center;
}
.expand-cards:has(.expand-card:hover) .expand-card:hover .expand-card-content {
    text-align: left;
}

/* 타이틀 색상: 접힘(320px)=#F9CFA1, 열림(720px)=#F9DC95 */
.expand-cards .expand-card .expand-card-title {
    color: #F9CFA1;
    word-break: keep-all;
    overflow-wrap: break-word;
    transition: color 200ms ease-out;
}
.expand-cards.expand-cards--default-1 .expand-card:first-child .expand-card-title,
.expand-cards.expand-cards--default-3 .expand-card:nth-child(3) .expand-card-title {
    color: #F9DC95;
}
.expand-cards:has(.expand-card:hover) .expand-card .expand-card-title {
    color: #F9CFA1;
}
.expand-cards:has(.expand-card:hover) .expand-card:hover .expand-card-title {
    color: #F9DC95;
}

/* lg+: 너비 펼침(220ms) 끝난 뒤에 글자·상세가 한 번에 나타남 / 닫힐 때는 즉시 사라짐 */
@media (min-width: 1024px) {
    /* 닫힐 때: 너비 줄기 전에 글·레이아웃 즉시 제거 */
    .expand-cards .expand-card .expand-card-details,
    .expand-cards:has(.expand-card:hover) .expand-card:not(:hover) .expand-card-details,
    .expand-cards.expand-cards--default-1:has(.expand-card:hover) .expand-card:first-child:not(:hover) .expand-card-details,
    .expand-cards.expand-cards--default-3:has(.expand-card:hover) .expand-card:nth-child(3):not(:hover) .expand-card-details {
        transition:
            opacity 0s linear,
            max-height 0s linear,
            margin-top 0s linear !important;
    }

    /* 열릴 때: 너비 끝난 뒤 영역은 바로 잡고, 글자만 짧게 페이드인 */
    .expand-cards.expand-cards--default-1:not(:has(.expand-card:hover)) .expand-card:first-child .expand-card-details,
    .expand-cards.expand-cards--default-3:not(:has(.expand-card:hover)) .expand-card:nth-child(3) .expand-card-details,
    .expand-cards:has(.expand-card:hover) .expand-card:hover .expand-card-details {
        transition:
            max-height 0s linear var(--expand-card-width-duration),
            margin-top 0s linear var(--expand-card-width-duration),
            opacity var(--expand-card-content-fade) ease-out var(--expand-card-width-duration) !important;
    }

    /* 타이틀: 닫힐 때 색 즉시 */
    .expand-cards .expand-card .expand-card-title,
    .expand-cards:has(.expand-card:hover) .expand-card:not(:hover) .expand-card-title,
    .expand-cards.expand-cards--default-1:has(.expand-card:hover) .expand-card:first-child:not(:hover) .expand-card-title,
    .expand-cards.expand-cards--default-3:has(.expand-card:hover) .expand-card:nth-child(3):not(:hover) .expand-card-title {
        transition: color 0s linear !important;
    }

    /* 타이틀: 열릴 때 강조색도 너비 끝난 뒤 부드럽게 */
    .expand-cards.expand-cards--default-1:not(:has(.expand-card:hover)) .expand-card:first-child .expand-card-title,
    .expand-cards.expand-cards--default-3:not(:has(.expand-card:hover)) .expand-card:nth-child(3) .expand-card-title,
    .expand-cards:has(.expand-card:hover) .expand-card:hover .expand-card-title {
        transition:
            color var(--expand-card-content-fade) ease-out var(--expand-card-width-duration) !important;
    }
}

/* 확장 카드: 모바일·태블릿은 1열, 하위 내용 항상 노출(PC 호버 동작 비활성) */
@media (max-width: 1023px) {
    .expand-cards {
        flex-direction: column;
    }
    .expand-cards .expand-card {
        width: 100% !important;
        max-width: 100%;
        transition: none !important;
    }
    .expand-cards.expand-cards--default-1 .expand-card:first-child,
    .expand-cards.expand-cards--default-3 .expand-card:nth-child(3),
    .expand-cards:has(.expand-card:hover) .expand-card,
    .expand-cards:has(.expand-card:hover) .expand-card:hover {
        width: 100% !important;
    }
    .expand-cards .expand-card > img {
        filter: grayscale(0) !important;
        transition-property: transform !important;
    }
    .expand-cards .expand-card .expand-card-details {
        max-height: none !important;
        opacity: 1 !important;
        margin-top: 12px !important;
        transition: none !important;
    }
    .expand-cards:has(.expand-card:hover) .expand-card:not(:hover) .expand-card-details,
    .expand-cards.expand-cards--default-1:has(.expand-card:hover)
        .expand-card:first-child:not(:hover)
        .expand-card-details,
    .expand-cards.expand-cards--default-3:has(.expand-card:hover)
        .expand-card:nth-child(3):not(:hover)
        .expand-card-details {
        max-height: none !important;
        opacity: 1 !important;
        margin-top: 12px !important;
    }
    .expand-cards .expand-card .expand-card-content {
        text-align: left !important;
    }
    .expand-cards .expand-card .expand-card-title {
        color: #f9dc95 !important;
    }
}

/* 연혁 타임라인: 각 li의 ::after가 "위 마커 하단 ~ 아래 마커 상단" 점선
   - history.html: 모바일 py-4 + 연도 28px / 데스크탑 py-15 + 연도 60px (leading-none, items-center)
   - top: 마커 중심 + 반지름 (첫 원 아래에서 시작)
   - bottom: 다음 li에서 마커 상단까지 닿도록 음수로 확장 = -(py + rowHalf - radius)
*/
.history-timeline-item {
    position: relative;
    --history-py: calc(var(--spacing, 0.25rem) * 15);
    /* 연도 행 높이의 절반: lg:text-[60px] → 30px */
    --history-row-half: 30px;
    --history-timeline-radius: 14px;
    /* left padding(13px) + marker radius(14px) */
    --history-timeline-left: calc(13px + 14px);
}

@media (max-width: 1023px) {
    .history-timeline-item {
        /* py-4 와 동일 (1rem) */
        --history-py: calc(var(--spacing, 0.25rem) * 4);
        /* text-[28px] leading-none → 행 높이 28px, 절반 14px */
        --history-row-half: 14px;
        --history-timeline-radius: 10px;
        /* left padding(6px) + marker radius(10px) */
        --history-timeline-left: calc(6px + 10px);
    }
}

.history-timeline-item:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: var(--history-timeline-left);
    width: 2px;
    transform: translateX(-50%);
    top: calc(var(--history-py) + var(--history-row-half) + var(--history-timeline-radius));
    bottom: calc(-1 * (var(--history-py) + var(--history-row-half) - var(--history-timeline-radius)));
    background: repeating-linear-gradient(
        to bottom,
        #d68b58 0,
        #d68b58 5px,
        transparent 5px,
        transparent 11px
    );
}

@media (max-width: 1023px) {
    .history-timeline-item:not(:last-child)::after {
        width: 1px;
        left: calc(6px + 10px);
        background: repeating-linear-gradient(
            to bottom,
            #d68b58 0,
            #d68b58 5px,
            transparent 4px,
            transparent 9px
        );
    }
}



/* 다음(카카오) 우편 지도: 스크립트가 그리는 내부 박스가 사각이라 부모 rounded만으로는 모서리가 안 잘림 */
.location-daum-map,
.location-daum-map .root_daum_roughmap,
.location-daum-map [id^="daumRoughmapContainer"] {
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}
.location-daum-map iframe {
    border-radius: 10px;
    width: 100% !important;
    max-width: 100% !important;
}

/* 프로젝트 카드 배지 (목록·메인 공통) */
.project-badge {
    display: inline-flex;
    height: 29px;
    align-items: center;
    border-radius: 5px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 29px;
    color: #fff;
}
/* 건물유형 */
.project-badge--small-building {
    background-color: #3b82f6; /* 소규모 빌딩 */
}
.project-badge--complex {
    background-color: #2563eb; /* 주상복합 */
}
.project-badge--apt {
    background-color: #06b6d4; /* 공동주택 */
}
.project-badge--officetel {
    background-color: #14b8a6; /* 오피스텔 */
}

/* 진행상태 */
.project-badge--land-purchase {
    background-color: #f59e0b; /* 부지매입 */
}
.project-badge--pt {
    background-color: #f97316; /* PT기표 */
}
.project-badge--pm {
    background-color: #f87171; /* PM계약 */
}
.project-badge--permit-progress {
    background-color: #ef4444; /* 인허가 진행 */
}
.project-badge--permit-done {
    background-color: #dc2626; /* 인허가 완료 */
}
/* 채용공고 카드 배지 */
.recruit-badge {
    display: inline-flex;
    height: 37px;
    align-items: center;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 18px;
    font-weight: medium;
    line-height: 37px;
    color: #fff;
}
.recruit-badge--ing {
    background-color: #28af37;
}
.recruit-badge--off {
    background-color: #d54343;
}
.recruit-badge--pre {
    background-color: #f6a345;
}

@media (max-width: 1023px) {
    .recruit-badge {
        height: 30px;
        border-radius: 8px;
        padding: 0 12px;
        font-size: 14px;
        line-height: 30px;
    }
}


/* 탑 버튼 (#site-top-btn-root / components/top_menu.html) */
#site-top-btn-root .site-fab {
    width: clamp(2.5rem, 7.5vw, 3.5rem);
    height: clamp(2.5rem, 7.5vw, 3.5rem);
    min-width: 2.5rem;
    min-height: 2.5rem;
}
#site-top-btn-root .site-fab__chevron {
    width: clamp(1.15rem, 3.5vw, 1.5rem);
    height: clamp(1.15rem, 3.5vw, 1.5rem);
}
#site-top-btn-root .top-btn {
    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease;
}
#site-top-btn-root .top-btn--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
}
#site-top-btn-root .top-btn--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* index 등: 세로 라벨 — 1024px 미만은 항상 숨김(본문만) */
@media (max-width: 1023px) {
    .index-vertical-label {
        display: none !important;
    }
}

/* 프로젝트 목록: Masonry.js 레이아웃 */
.project-masonry {
    --project-masonry-gap: clamp(16px, 3.5vw, 40px);
}
.project-masonry::after {
    content: "";
    display: block;
    clear: both;
}
.project-masonry-sizer,
.project-masonry-item {
    width: 100%;
}
.project-masonry-gutter {
    width: 0;
}
.project-masonry-item {
    float: left;
    margin-bottom: clamp(28px, 4.5vw, 60px);
}
@media (min-width: 768px) {
    .project-masonry-sizer,
    .project-masonry-item {
        width: calc((100% - var(--project-masonry-gap)) / 2);
    }
    .project-masonry-gutter {
        width: var(--project-masonry-gap);
    }
}
@media (min-width: 1280px) {
    .project-masonry-sizer,
    .project-masonry-item {
        width: calc((100% - (var(--project-masonry-gap) * 2)) / 3);
    }
}

/*
 * FC STORY 뱃지: 안쪽은 슬라이드 위에만 섞이는 rgba(255,255,255,0.1).
 * 테두리 그라데이션은 ::before + mask로 링만 그림(background-clip/중첩 래퍼는 깨지거나 회색 덩어리로 보이기 쉬움).
 */
.fc-story-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.1);
}
.fc-story-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to right, #d7d7d7, #a6a6a6);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* 모바일(≤1023px): 본문·유동 텍스트는 clamp 최솟값 14px(0.875rem) 이상 권장 (index 반영) */