@charset "utf-8";

/* =========================================================
   sub.css : 서브페이지 공통 (서브 비주얼 / 탭 / 타이틀) + COMPANY 페이지
   - Figma C&M 씨앤앰글로벌_회사소개 / 인사말 / 조직 및 전문가 / 자격등록 및 파트너십 / 오시는 길
   - 서브 콘텐츠 폭 1440 (메인 1300 과 다름)
   - 태블릿 / 모바일 시안이 없어 메인 반응형 기준(1023 / 767 / 최소 360)으로 구성
   ========================================================= */

:root {
    --sub-inner-width: 1440px;
    --color-navy: #111821;
    --color-body: #505050;
    --color-line-light: #e0e0e0;
}

.sub-inner {
    width: 100%;
    max-width: calc(var(--sub-inner-width) + var(--inner-padding) * 2);
    margin: 0 auto;
    padding: 0 var(--inner-padding);
}

/* ---------- 서브 비주얼 + 탭 ---------- */
.sub-visual {
    position: relative;
    height: 406px;
    padding-top: 167px;
    background: #e3e3e3 url('/resource/user/images/company/sub_visual.jpg') no-repeat 50% 60% / cover;
    text-align: center;
}

.sub-visual.works {
    background-image: url('/resource/user/images/works/sub_visual.jpg');
    background-position: 50% 45%;
}

/* 그림자 : Figma COMMUNITY_Banner 타이틀 기준 (모든 서브 공통) */
.sub-visual-title {
    font-size: 60px;
    font-weight: 800;
    line-height: 72px;
    color: #fff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .12);
}

/* 탭 : 화면 폭보다 길어지면 가로 스크롤 (모든 해상도 공통, 스크롤바는 숨김) */
.sub-tab {
    position: absolute;
    left: 50%;
    bottom: 0;
    max-width: 100%;
    transform: translateX(-50%);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--color-navy);
}

.sub-tab::-webkit-scrollbar {
    display: none;
}

.sub-tab ul {
    display: flex;
    width: max-content;
    min-width: 100%;
}

/* 4칸 같은 폭 탭 (WORKS) */
.sub-tab.col4 a {
    justify-content: center;
    width: 289px;
    padding: 0 24px;
}

.sub-tab a {
    display: flex;
    align-items: center;
    height: 65px;
    padding: 0 65px;
    font-size: 20px;
    font-weight: 500;
    color: #d3d3d3;
    white-space: nowrap;
    transition: color .2s;
}

.sub-tab a:hover,
.sub-tab a:focus-visible {
    color: #fff;
}

.sub-tab .is-active a {
    background: #fff;
    font-weight: 700;
    color: var(--color-primary);
}

/* ---------- 브레드크럼 + 페이지 타이틀 ---------- */
.sub-head {
    padding-top: 172px;
    text-align: center;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    color: #919191;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumb li + li::before {
    content: '';
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 6 6 6-6 6' fill='none' stroke='%23dfdfdf' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / 24px;
}

.breadcrumb .home {
    display: block;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 10.2V21h6.5v-6h5v6H21V10.2z' fill='%23919191'/%3E%3C/svg%3E") no-repeat center / 24px;
}

.sub-title {
    margin-top: 20px;
    font-size: 60px;
    font-weight: 800;
    line-height: 72px;
    color: var(--color-navy);
}

.sub-content {
    padding: 147px 0 240px;
}

/* ---------- 공통 요소 ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--color-bg-gray);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-text);
    text-transform: uppercase;
}

/* 가운데 정렬 섹션 헤딩 (pill + 타이틀 + 설명) */
.sec-head {
    text-align: center;
}

.sec-head .pill + .sec-tit {
    margin-top: 24px;
}

.sec-tit {
    font-size: 48px;
    font-weight: 700;
    line-height: 58px;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.sec-desc {
    margin-top: 20px;
    font-size: 22px;
    line-height: 33px;
    color: var(--color-body);
}

/* =========================================================
   회사소개
   ========================================================= */
.intro-overview {
    display: flex;
    gap: 128px;
}

.intro-overview .text {
    flex: 0 0 582px;
    padding-top: 70px;
}

.intro-overview .headline {
    margin-top: 27px;
    font-size: 48px;
    font-weight: 800;
    line-height: 72px;
    color: var(--color-text);
}

.intro-overview .headline em {
    color: var(--color-primary);
}

.intro-overview .desc {
    margin-top: 27px;
    font-size: 22px;
    line-height: 39.6px;
    color: var(--color-body);
}

.intro-overview .info {
    flex: 1;
    min-width: 0;
}

.info-tit {
    font-size: 32px;
    font-weight: 800;
    line-height: 48px;
    color: var(--color-text);
}

.info-table {
    width: 100%;
    margin-top: 26px;
    border-top: 1px solid #111;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    text-align: left;
}

.info-table th,
.info-table td {
    padding: 23px 0;
    border-bottom: 1px solid #e5e5e5;
    font-weight: 500;
    vertical-align: top;
}

.info-table th {
    width: 167px;
    color: var(--color-text);
}

.info-table td {
    color: #877466;
    word-break: break-all;
}

/* 3가지 핵심 약속 */
.intro-promise {
    margin-top: 200px;
}

.intro-promise .sec-tit,
.intro-number .sec-tit {
    font-size: 42px;
    font-weight: 800;
    line-height: 63px;
    letter-spacing: 0;
}

.promise-list {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 59px;
    margin-top: 125px;
}

.promise-list > li {
    display: flex;
    flex-direction: column;
    flex: 0 1 403px;
    min-height: 530px;
    padding: 46px 37px;
    border-radius: 30px;
    background: #fdfdfd;
    box-shadow: 3px 4px 20px rgba(0, 0, 0, .22);
}

.promise-list > li:nth-child(2) {
    margin-top: 130px;
}

.promise-list .num {
    font-size: 64px;
    font-weight: 800;
    line-height: 64px;
    color: var(--color-primary);
}

.promise-list .tit {
    margin-top: 23px;
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    color: var(--color-primary);
}

.promise-list .sub {
    margin-top: 9px;
    padding-bottom: 17px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    color: var(--color-text);
}

.promise-list .txt {
    margin-top: 17px;
    font-size: 18px;
    line-height: 27px;
    color: var(--color-body);
}

.promise-list .tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin-top: auto;
    padding: 0 16px;
    border-radius: 30px;
    background: #edf1f7;
    font-size: 18px;
    color: var(--color-navy);
    text-align: center;
}

.promise-list .txt + .tag {
    margin-top: 23px;
}

/* 숫자로 증명하는 역량 */
.intro-number {
    margin-top: 200px;
}

.number-list {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin-top: 125px;
}

.number-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 1 328px;
    height: 199px;
    padding: 0 16px;
    border-radius: 22px;
    background: #111c2f;
    text-align: center;
}

.number-list strong {
    font-size: 64px;
    font-weight: 900;
    line-height: 77px;
    color: #fff;
}

.number-list span {
    font-size: 16px;
    font-weight: 300;
    line-height: 19px;
    color: #a5deff;
}

/* 하단 배너 */
.intro-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 136px;
    padding: 44px 60px;
    border-radius: 30px;
    background: #002a7d url('/resource/user/images/company/intro_cta_bg.jpg') no-repeat 50% 74% / cover;
    background-blend-mode: soft-light;
    color: #fff;
}

.intro-cta .tit {
    font-size: 32px;
    font-weight: 800;
    line-height: 48px;
}

.intro-cta .desc {
    margin-top: 12px;
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
}

.intro-cta .badge {
    flex-shrink: 0;
    padding: 20px 30px;
    border-radius: 20px;
    background: #2e6bc2;
    font-weight: 700;
    text-align: center;
}

.intro-cta .badge strong {
    display: block;
    font-size: 32px;
    line-height: 48px;
}

.intro-cta .badge span {
    display: block;
    font-size: 18px;
    line-height: 27px;
}

/* =========================================================
   인사말
   ========================================================= */
.greeting {
    display: flex;
    align-items: flex-start;
    gap: 120px;
}

.greeting-img {
    flex: 0 0 600px;
    aspect-ratio: 600 / 760;
    overflow: hidden;
    border-radius: 24px;
}

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

.greeting-msg {
    flex: 1;
    min-width: 0;
}

.greeting-msg .headline {
    margin-top: 28px;
    font-size: 48px;
    font-weight: 700;
    line-height: 62.4px;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.greeting-msg .lead {
    margin-top: 28px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--color-line-light);
    font-size: 22px;
    font-weight: 500;
    line-height: 28.6px;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.greeting-msg .body {
    margin-top: 48px;
}

.greeting-msg .body p {
    font-size: 18px;
    line-height: 32.4px;
    color: var(--color-body);
}

.greeting-msg .body p + p {
    margin-top: 24px;
}

.greeting-msg .sign {
    margin-top: 48px;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/* =========================================================
   조직 및 전문가
   ========================================================= */
.org-chart {
    margin-top: 130px;
}

.org-top {
    position: relative;
    display: flex;
    justify-content: center;
}

.org-ceo,
.org-advisory {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 16px;
    text-align: center;
}

.org-ceo span,
.org-advisory span {
    font-size: 12px;
    font-weight: 600;
    line-height: 14.5px;
    letter-spacing: 0.08em;
}

.org-ceo {
    position: relative;
    width: 320px;
    height: 96px;
    background: var(--color-primary);
    color: #fff;
}

.org-ceo span {
    opacity: .72;
}

.org-ceo strong {
    font-size: 24px;
    font-weight: 600;
    line-height: 29px;
}

/* 대표이사 → 팀 세로선 */
.org-ceo::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 72px;
    background: #c2c2c2;
}

.org-advisory {
    position: absolute;
    top: 8px;
    left: calc(50% + 320px);
    width: 240px;
    height: 80px;
    border: 1px solid var(--color-line-light);
    background: #fff;
}

/* 대표이사 → 기술고문 가로선 */
.org-advisory::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 160px;
    height: 1px;
    background: #c2c2c2;
}

.org-advisory span {
    color: var(--color-gray-light);
}

.org-advisory strong {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color-text);
}

.org-teams {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin-top: 72px;
    padding-top: 48px;
}

/* 팀 연결 가로선 : 첫 팀 중앙 ~ 마지막 팀 중앙 */
.org-teams::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc((100% - 96px) / 8);
    right: calc((100% - 96px) / 8);
    height: 1px;
    background: #c2c2c2;
}

.org-team {
    position: relative;
    padding: 28px;
    border-radius: 24px;
    background: var(--color-bg-gray);
}

.org-team::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 48px;
    background: #c2c2c2;
}

.org-team .pill {
    background: #fff;
    color: var(--color-primary);
}

.org-team .name {
    margin-top: 10px;
    font-size: 24px;
    font-weight: 600;
    line-height: 29px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.org-team .en {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: var(--color-gray-light);
}

.org-team ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.org-team li {
    padding: 16px 20px;
    border: 1px solid var(--color-line-light);
    border-radius: 12px;
    background: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--color-text);
}

/* =========================================================
   자격등록 및 파트너십
   ========================================================= */
.cert {
    display: flex;
    gap: 80px;
    margin-top: 130px;
    padding: 64px;
}

.cert-list {
    flex: 0 0 533px;
}

.cert-tit {
    margin-top: 16px;
    font-size: 32px;
    font-weight: 600;
    line-height: 39px;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

.cert-rows {
    margin-top: 32px;
}

.cert-rows li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 70px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-line-light);
}

.cert-rows li::before {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23002870'/%3E%3Cpath d='m7.5 12.2 3 3 6-6.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 24px;
}

.cert-rows .org {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color-text);
}

.cert-rows .role {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: var(--color-body);
}

.cert-thumbs {
    display: flex;
    gap: 16px;
    flex: 1;
    min-width: 0;
    padding-top: 140px;
}

.cert-thumbs li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    aspect-ratio: 221 / 313;
    padding: 6%;
    border: 1px solid var(--color-line-light);
    border-radius: 16px;
    background: #fff;
}

.cert-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.partner {
    margin-top: 130px;
}

.partner .sec-desc {
    font-size: 18px;
    line-height: 22px;
}

.partner-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 64px;
}

.partner-list li {
    padding: 40px;
    border-radius: 24px;
    background: var(--color-bg-gray);
}

.partner-list .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.partner-list .cate {
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    color: var(--color-primary);
}

.partner-list .num {
    font-size: 32px;
    font-weight: 700;
    line-height: 39px;
    letter-spacing: 0.04em;
    color: var(--color-gray-light);
}

.partner-list .org {
    margin-top: 20px;
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.partner-list .person {
    margin-top: 10px;
    font-size: 17px;
    line-height: 21px;
    color: var(--color-body);
}

/* =========================================================
   오시는 길
   ========================================================= */
.location-map {
    position: relative;
    height: 600px;
    margin-top: 120px;
    overflow: hidden;
    border-radius: 32px;
    background: var(--color-bg-gray);
}

.map-canvas {
    width: 100%;
    height: 100%;
}

/* 지도 API 미설정 / 인증 실패 시 */
.map-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 24px 0 520px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-gray-light);
    text-align: center;
}

.office-card {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 10;
    width: 440px;
    padding: 36px;
    border-radius: 24px;
    background: #238cfa;
    color: #fff;
}

.office-card .pill {
    height: 31px;
    font-size: 12px;
}

.office-card .name {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 600;
    line-height: 31.5px;
    letter-spacing: -0.01em;
}

.office-card .addr {
    margin-top: 10px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    font-size: 16px;
    line-height: 27.2px;
    color: #e4e4e4;
}

.office-card .btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.btn-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 24px;
    border: 1px solid var(--color-line-light);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    transition: background-color .2s, color .2s, border-color .2s;
}

.btn-round.dark {
    border-color: var(--color-text);
    background: var(--color-text);
    color: #fff;
}

.btn-round:hover,
.btn-round:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.btn-round.is-done {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.location-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 120px;
}

.location-info li {
    padding: 40px;
    border-radius: 24px;
    background: var(--color-bg-gray);
}

.location-info .ico {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff no-repeat center / 24px;
}

.location-info .ico.addr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002870' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.6-7-11.5a7 7 0 0 1 14 0C19 15.4 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}

.location-info .ico.tel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002870' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

.location-info .ico.mail {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002870' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

.location-info dt {
    margin-top: 32px;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 0.04em;
    color: var(--color-gray-light);
}

.location-info dd {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    color: var(--color-text);
    word-break: break-all;
}

.location-info dd a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* =========================================================
   소형 PC (1024 ~ 1279)
   ========================================================= */
@media (max-width: 1279px) {
    .sub-tab a,
    .sub-tab.col4 a {
        width: auto;
        padding: 0 40px;
        font-size: 18px;
    }

    .sub-head {
        padding-top: 120px;
    }

    .sub-content {
        padding: 120px 0 200px;
    }

    .intro-overview {
        gap: 64px;
    }

    .intro-overview .text {
        flex-basis: 46%;
    }

    .intro-overview .headline {
        font-size: 40px;
        line-height: 60px;
    }

    .promise-list {
        gap: 24px;
    }

    .promise-list > li {
        padding: 40px 28px;
    }

    .promise-list .num {
        font-size: 52px;
        line-height: 52px;
    }

    .promise-list .tit {
        font-size: 26px;
        line-height: 38px;
    }

    .number-list strong {
        font-size: 52px;
        line-height: 64px;
    }

    .greeting {
        gap: 64px;
    }

    .greeting-img {
        flex-basis: 42%;
    }

    .greeting-msg .headline {
        font-size: 40px;
        line-height: 54px;
    }

    .org-advisory {
        left: calc(50% + 240px);
        width: 200px;
    }

    .org-advisory::before {
        width: 80px;
    }

    .org-team {
        padding: 24px 20px;
    }

    .org-team li {
        padding: 14px 16px;
        font-size: 16px;
    }

    .cert {
        gap: 48px;
        padding: 0;
    }

    .cert-list {
        flex-basis: 48%;
    }

    .cert-thumbs {
        padding-top: 100px;
    }

    .location-info li {
        padding: 32px;
    }

    .location-info dd {
        font-size: 18px;
        line-height: 29px;
    }
}

/* =========================================================
   태블릿 (768 ~ 1023)
   ========================================================= */
@media (max-width: 1023px) {
    .sub-visual {
        height: 300px;
        padding-top: 96px;
    }

    .sub-visual-title {
        font-size: 48px;
        line-height: 58px;
    }

    /* 탭 : 화면 전체 폭, 남으면 균등 분배 / 넘치면 가로 스크롤 */
    .sub-tab {
        left: 0;
        right: 0;
        transform: none;
    }

    .sub-tab li {
        flex: 1 0 auto;
    }

    .sub-tab a,
    .sub-tab.col4 a {
        justify-content: center;
        height: 56px;
        padding: 0 28px;
        font-size: 17px;
    }

    .sub-head {
        padding-top: 80px;
    }

    .sub-title {
        margin-top: 12px;
        font-size: 44px;
        line-height: 54px;
    }

    .sub-content {
        padding: 80px 0 120px;
    }

    .sec-tit,
    .intro-promise .sec-tit,
    .intro-number .sec-tit {
        font-size: 34px;
        line-height: 46px;
    }

    .sec-desc {
        margin-top: 16px;
        font-size: 18px;
        line-height: 29px;
    }

    .sec-desc br {
        display: none;
    }

    /* 회사소개 */
    .intro-overview {
        flex-direction: column;
        gap: 56px;
    }

    .intro-overview .text {
        flex-basis: auto;
        padding-top: 0;
    }

    .intro-overview .headline {
        margin-top: 20px;
        font-size: 36px;
        line-height: 52px;
    }

    .intro-overview .desc {
        margin-top: 20px;
        font-size: 18px;
        line-height: 31px;
    }

    .info-tit {
        font-size: 28px;
        line-height: 40px;
    }

    .info-table {
        margin-top: 20px;
        font-size: 17px;
    }

    .info-table th,
    .info-table td {
        padding: 18px 0;
    }

    .info-table th {
        width: 140px;
    }

    .intro-promise,
    .intro-number {
        margin-top: 120px;
    }

    .promise-list {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-top: 56px;
    }

    .promise-list > li {
        flex: none;
        width: 100%;
        max-width: 640px;
        min-height: 0;
        padding: 36px 32px;
    }

    .promise-list > li:nth-child(2) {
        margin-top: 0;
    }

    .promise-list .num {
        font-size: 44px;
        line-height: 44px;
    }

    .promise-list .tit {
        margin-top: 18px;
        font-size: 26px;
        line-height: 36px;
    }

    .promise-list .tit br {
        display: none;
    }

    .promise-list .sub {
        font-size: 18px;
        line-height: 27px;
    }

    .promise-list .txt {
        font-size: 16px;
        line-height: 26px;
    }

    .promise-list .tag {
        height: 46px;
        font-size: 16px;
    }

    .number-list {
        gap: 16px;
        margin-top: 56px;
    }

    .number-list li {
        flex: 1 1 0;
        height: 160px;
    }

    .number-list strong {
        font-size: 40px;
        line-height: 48px;
    }

    .number-list span {
        font-size: 14px;
        line-height: 18px;
    }

    .intro-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        margin-top: 80px;
        padding: 40px;
        border-radius: 24px;
    }

    .intro-cta .tit {
        font-size: 28px;
        line-height: 40px;
    }

    .intro-cta .desc {
        font-size: 18px;
        line-height: 28px;
    }

    .intro-cta .badge {
        padding: 16px 24px;
        border-radius: 16px;
        text-align: left;
    }

    .intro-cta .badge strong {
        font-size: 24px;
        line-height: 34px;
    }

    .intro-cta .badge span {
        font-size: 16px;
        line-height: 24px;
    }

    /* 인사말 */
    .greeting {
        flex-direction: column;
        gap: 48px;
    }

    .greeting-img {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .greeting-msg .headline {
        margin-top: 20px;
        font-size: 34px;
        line-height: 46px;
    }

    .greeting-msg .lead {
        margin-top: 20px;
        padding-bottom: 36px;
        font-size: 19px;
        line-height: 29px;
    }

    .greeting-msg .body {
        margin-top: 36px;
    }

    .greeting-msg .body p {
        font-size: 17px;
        line-height: 30px;
    }

    .greeting-msg .sign {
        margin-top: 36px;
        font-size: 26px;
        line-height: 32px;
    }

    /* 조직 : 대표이사 + 기술고문 가로 배치, 팀 2열 */
    .org-chart {
        margin-top: 72px;
    }

    .org-top {
        align-items: center;
        gap: 48px;
    }

    .org-ceo {
        width: 280px;
        height: 88px;
    }

    .org-ceo::after {
        display: none;
    }

    .org-advisory {
        position: relative;
        top: auto;
        left: auto;
        width: 200px;
        height: 76px;
    }

    .org-advisory::before {
        width: 48px;
    }

    .org-teams {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-top: 40px;
        padding-top: 0;
    }

    .org-teams::before,
    .org-team::before {
        display: none;
    }

    /* 자격등록 */
    .cert {
        flex-direction: column;
        gap: 40px;
        margin-top: 80px;
    }

    .cert-list {
        flex-basis: auto;
    }

    .cert-tit {
        font-size: 28px;
        line-height: 36px;
    }

    .cert-thumbs {
        padding-top: 0;
    }

    .partner {
        margin-top: 100px;
    }

    .partner .sec-desc {
        font-size: 17px;
        line-height: 27px;
    }

    .partner-list {
        gap: 20px;
        margin-top: 48px;
    }

    .partner-list li {
        padding: 28px;
        border-radius: 20px;
    }

    .partner-list .num {
        font-size: 26px;
        line-height: 32px;
    }

    .partner-list .org {
        font-size: 22px;
        line-height: 30px;
    }

    .partner-list .person {
        font-size: 15px;
    }

    /* 오시는 길 */
    .location-map {
        height: 480px;
        margin-top: 72px;
        border-radius: 24px;
    }

    .map-fallback {
        padding-left: 400px;
    }

    .office-card {
        top: 24px;
        left: 24px;
        width: 360px;
        padding: 28px;
        border-radius: 20px;
    }

    .office-card .name {
        font-size: 22px;
        line-height: 28px;
    }

    .office-card .addr {
        font-size: 15px;
        line-height: 25px;
    }

    .btn-round {
        height: 42px;
        padding: 0 18px;
        font-size: 13px;
    }

    .location-info {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 72px;
    }

    .location-info li {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 24px;
        padding: 28px 32px;
    }

    .location-info .ico {
        grid-row: span 2;
    }

    .location-info dt {
        margin-top: 0;
    }

    .location-info dd {
        margin-top: 8px;
    }
}

/* =========================================================
   모바일 (~ 767) : 최소 360
   ========================================================= */
@media (max-width: 767px) {
    .sub-visual {
        height: 220px;
        padding-top: 62px;
    }

    .sub-visual-title {
        font-size: 32px;
        line-height: 40px;
    }

    .sub-tab a,
    .sub-tab.col4 a {
        height: 48px;
        padding: 0 18px;
        font-size: 15px;
    }

    .sub-head {
        padding-top: 48px;
    }

    .breadcrumb {
        gap: 2px;
        font-size: 12px;
    }

    .breadcrumb li {
        gap: 2px;
    }

    .breadcrumb li + li::before,
    .breadcrumb .home {
        width: 20px;
        height: 20px;
        background-size: 20px;
    }

    .sub-title {
        margin-top: 8px;
        font-size: 30px;
        line-height: 38px;
    }

    .sub-content {
        padding: 48px 0 80px;
    }

    .pill {
        height: 28px;
        padding: 0 12px;
        font-size: 11px;
    }

    .sec-head .pill + .sec-tit {
        margin-top: 16px;
    }

    .sec-tit,
    .intro-promise .sec-tit,
    .intro-number .sec-tit {
        font-size: 24px;
        line-height: 34px;
    }

    .sec-desc,
    .partner .sec-desc {
        margin-top: 12px;
        font-size: 15px;
        line-height: 25px;
    }

    /* 회사소개 */
    .intro-overview {
        gap: 40px;
    }

    .intro-overview .headline {
        margin-top: 16px;
        font-size: 26px;
        line-height: 38px;
    }

    .intro-overview .desc {
        margin-top: 16px;
        font-size: 15px;
        line-height: 26px;
    }

    .intro-overview .desc br {
        display: none;
    }

    .info-tit {
        font-size: 22px;
        line-height: 32px;
    }

    .info-table {
        margin-top: 16px;
        font-size: 14px;
        line-height: 22px;
    }

    .info-table th,
    .info-table td {
        padding: 14px 0;
    }

    .info-table th {
        width: 84px;
    }

    .intro-promise,
    .intro-number {
        margin-top: 80px;
    }

    .promise-list {
        margin-top: 32px;
        gap: 16px;
    }

    .promise-list > li {
        padding: 28px 24px;
        border-radius: 20px;
        box-shadow: 2px 3px 14px rgba(0, 0, 0, .14);
    }

    .promise-list .num {
        font-size: 36px;
        line-height: 36px;
    }

    .promise-list .tit {
        margin-top: 14px;
        font-size: 21px;
        line-height: 30px;
    }

    .promise-list .sub {
        margin-top: 6px;
        padding-bottom: 14px;
        font-size: 15px;
        line-height: 23px;
    }

    .promise-list .txt {
        margin-top: 14px;
        font-size: 14px;
        line-height: 23px;
    }

    .promise-list .txt + .tag {
        margin-top: 18px;
    }

    .promise-list .tag {
        height: 42px;
        font-size: 14px;
    }

    .number-list {
        flex-direction: column;
        gap: 12px;
        margin-top: 32px;
    }

    .number-list li {
        flex: none;
        height: 120px;
        border-radius: 16px;
    }

    .number-list strong {
        font-size: 36px;
        line-height: 44px;
    }

    .intro-cta {
        gap: 24px;
        margin-top: 56px;
        padding: 32px 24px;
        border-radius: 20px;
    }

    .intro-cta .tit {
        font-size: 21px;
        line-height: 31px;
    }

    .intro-cta .desc {
        margin-top: 8px;
        font-size: 14px;
        line-height: 22px;
    }

    .intro-cta .badge {
        width: 100%;
        padding: 14px 20px;
        border-radius: 14px;
        text-align: center;
    }

    .intro-cta .badge strong {
        font-size: 20px;
        line-height: 30px;
    }

    .intro-cta .badge span {
        font-size: 14px;
        line-height: 21px;
    }

    /* 인사말 */
    .greeting {
        gap: 32px;
    }

    .greeting-img {
        aspect-ratio: 4 / 3;
        border-radius: 16px;
    }

    .greeting-msg .headline {
        margin-top: 16px;
        font-size: 24px;
        line-height: 34px;
    }

    .greeting-msg .lead {
        margin-top: 16px;
        padding-bottom: 28px;
        font-size: 16px;
        line-height: 26px;
    }

    .greeting-msg .body {
        margin-top: 28px;
    }

    .greeting-msg .body p {
        font-size: 15px;
        line-height: 27px;
    }

    .greeting-msg .body p + p {
        margin-top: 16px;
    }

    .greeting-msg .sign {
        margin-top: 28px;
        font-size: 21px;
        line-height: 28px;
    }

    /* 조직 : 대표이사 → 기술고문 세로 배치, 팀 1열 */
    .org-chart {
        margin-top: 48px;
    }

    .org-top {
        flex-direction: column;
        gap: 24px;
    }

    .org-ceo {
        width: 100%;
        max-width: 280px;
        height: 80px;
    }

    .org-ceo strong {
        font-size: 21px;
        line-height: 26px;
    }

    .org-advisory {
        width: 100%;
        max-width: 200px;
        height: 68px;
    }

    .org-advisory::before {
        top: auto;
        bottom: 100%;
        right: auto;
        left: 50%;
        width: 1px;
        height: 24px;
    }

    .org-advisory strong {
        font-size: 16px;
    }

    .org-teams {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 32px;
    }

    .org-team {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .org-team .name {
        font-size: 21px;
        line-height: 26px;
    }

    .org-team ul {
        margin-top: 18px;
    }

    .org-team li {
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 15px;
        line-height: 20px;
    }

    /* 자격등록 */
    .cert {
        gap: 28px;
        margin-top: 56px;
    }

    .cert-tit {
        margin-top: 12px;
        font-size: 21px;
        line-height: 28px;
    }

    .cert-rows {
        margin-top: 16px;
    }

    .cert-rows li {
        gap: 10px;
        min-height: 0;
        padding: 14px 0;
    }

    .cert-rows li::before {
        width: 20px;
        height: 20px;
        background-size: 20px;
    }

    .cert-rows .org {
        font-size: 15px;
        line-height: 20px;
    }

    .cert-rows .role {
        font-size: 12px;
    }

    .cert-thumbs {
        gap: 8px;
    }

    .cert-thumbs li {
        border-radius: 10px;
    }

    .partner {
        margin-top: 72px;
    }

    .partner-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 32px;
    }

    .partner-list li {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .partner-list .cate {
        padding: 5px 12px;
        font-size: 12px;
        line-height: 15px;
    }

    .partner-list .num {
        font-size: 22px;
        line-height: 28px;
    }

    .partner-list .org {
        margin-top: 14px;
        font-size: 19px;
        line-height: 26px;
    }

    .partner-list .person {
        margin-top: 6px;
        font-size: 14px;
    }

    /* 오시는 길 : 지도 아래로 사무실 카드 배치 */
    .location-map {
        height: auto;
        margin-top: 40px;
        border-radius: 16px;
    }

    .map-canvas {
        height: 280px;
    }

    .map-fallback {
        height: 280px;
        padding: 0 20px;
        font-size: 14px;
        line-height: 22px;
    }

    .office-card {
        position: static;
        width: auto;
        padding: 24px 20px;
        border-radius: 0;
    }

    .office-card .name {
        font-size: 20px;
        line-height: 26px;
    }

    .office-card .addr {
        padding-bottom: 20px;
        font-size: 14px;
        line-height: 23px;
    }

    .office-card .btns {
        margin-top: 20px;
    }

    .btn-round {
        flex: 1 1 auto;
    }

    .location-info {
        margin-top: 40px;
        gap: 12px;
    }

    .location-info li {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 16px;
        padding: 20px;
        border-radius: 16px;
    }

    .location-info .ico {
        width: 40px;
        height: 40px;
        background-size: 20px;
    }

    .location-info dt {
        font-size: 12px;
        line-height: 15px;
    }

    .location-info dd {
        margin-top: 6px;
        font-size: 15px;
        line-height: 24px;
    }
}

/* =========================================================
   WORKS 공통 (Figma C&M 씨앤앰글로벌_WORKS_도시계획 / 재건축재개발 / 리모델링)
   ========================================================= */
.works-sec + .works-sec {
    margin-top: 160px;
}

/* 페이지 상단 소개 : 왼쪽 타이틀 + 오른쪽 리드 */
.page-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 80px;
}

.page-intro .title {
    flex: 0 1 760px;
}

.page-intro .headline {
    margin-top: 24px;
    font-size: 56px;
    font-weight: 700;
    line-height: 70px;
    letter-spacing: -0.025em;
    color: var(--color-text);
}

.page-intro .lead {
    flex: 0 1 600px;
    font-size: 22px;
    line-height: 33px;
    color: var(--color-body);
}

.page-intro .lead.md {
    font-size: 19px;
    line-height: 34.2px;
}

.page-intro .lead.sm {
    font-size: 18px;
    line-height: 32.4px;
}

.page-intro .lead strong {
    font-weight: 700;
    color: var(--color-text);
}

.page-intro .lead strong.c-navy {
    color: var(--color-primary);
}

/* 왼쪽 정렬 섹션 헤딩 (+ 오른쪽 범례) */
.head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
}

.sec-head-left .sec-tit {
    margin-top: 16px;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.02em;
}

.sec-head-left .sec-desc {
    margin-top: 16px;
    font-size: 22px;
    line-height: 37.4px;
}

.works-body {
    margin-top: 48px;
}

/* 범례 : li 의 --dot(색) / --dot-line(테두리) */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: var(--color-body);
}

.legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend li::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dot, #141414);
}

.legend.square li::before {
    width: 14px;
    height: 14px;
    border: 1px solid var(--dot-line, transparent);
    border-radius: 4px;
}

/* =========================================================
   도시계획
   ========================================================= */
.term-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
}

.term-list li {
    min-height: 288px;
    padding: 28px;
    border-radius: 24px;
    background: var(--color-bg-gray);
}

.term-list .step {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

.term-list .term {
    margin-top: 16px;
    font-size: 24px;
    font-weight: 600;
    line-height: 29px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.term-list .desc {
    margin-top: 16px;
    font-size: 18px;
    line-height: 30.6px;
    color: var(--color-body);
}

.term-list .is-dark {
    background: #111c2f;
}

.term-list .is-dark .step {
    color: #8fa3c8;
}

.term-list .is-dark .term {
    color: #fff;
}

.term-list .is-dark .desc {
    color: #c8c8c8;
}

/* 용도지역별 용적률 */
.zone-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.zone-list > li {
    padding: 40px 44px;
    border: 1px solid var(--color-line-light);
    border-radius: 24px;
    background: #fff;
}

.zone-list .top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.zone-list .chip {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--color-bg-gray);
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: var(--color-body);
}

.zone-list .name {
    margin-top: 10px;
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.zone-list .cap {
    flex-shrink: 0;
    text-align: right;
}

.zone-list .cap span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: var(--color-gray-light);
}

.zone-list .cap strong {
    display: block;
    margin-top: 2px;
    font-size: 48px;
    font-weight: 700;
    line-height: 58px;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

/* 막대 : 300% 를 전체 길이로 보고 style="--w" 로 구간 폭 지정 */
.zone-bar {
    display: flex;
    height: 16px;
    margin-top: 36px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-bg-gray);
}

.zone-bar i {
    width: var(--w);
    background: #141414;
}

.zone-bar .add {
    background: var(--color-primary);
}

.zone-bar .max {
    background: #8fa3c8;
}

.zone-list dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 36px;
}

.zone-list dt {
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: var(--color-gray-light);
}

.zone-list dd {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.zone-list dd.add {
    color: var(--color-primary);
}

.zone-list dd.none {
    color: var(--color-gray-light);
}

/* 허용용적률 인센티브 */
.incentive {
    display: flex;
    gap: 24px;
}

.incentive-sum {
    display: flex;
    flex-direction: column;
    flex: 0 0 440px;
    padding: 44px;
    border-radius: 24px;
    background: #238cfa url('/resource/user/images/works/urban_incentive_bg.jpg') no-repeat center / cover;
    background-blend-mode: color-burn;
    color: #fff;
}

.incentive-sum .chip {
    align-self: flex-start;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
}

.incentive-sum .label {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: #e5e5e5;
}

.incentive-sum .big {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 12px;
    font-size: 24px;
    font-weight: 600;
    line-height: 29px;
}

.incentive-sum .big strong {
    font-size: 88px;
    font-weight: 700;
    line-height: 106px;
}

.incentive-sum .note {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: 16px;
    line-height: 27.2px;
}

.incentive-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.incentive-list li {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    padding: 24px 32px;
    border-radius: 20px;
    background: var(--color-bg-gray);
}

.incentive-list .num {
    flex-shrink: 0;
    width: 40px;
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    color: var(--color-gray-light);
}

.incentive-list .txt {
    flex: 1;
    min-width: 0;
}

.incentive-list .tit {
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    color: var(--color-text);
}

.incentive-list .note {
    margin-top: 6px;
    font-size: 15px;
    line-height: 24px;
    color: var(--color-gray-light);
}

.incentive-list .val {
    flex-shrink: 0;
    max-width: 240px;
    text-align: right;
}

.incentive-list .val strong {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    color: var(--color-text);
}

.incentive-list .val strong.sm {
    font-size: 22px;
    line-height: 27px;
    color: var(--color-primary);
}

.incentive-list .val span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: var(--color-gray-light);
}

/* 정비사업 진행 순서 */
.timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.timeline > li {
    position: relative;
    display: flex;
    flex-direction: column;
}

.timeline .node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #141414;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

/* 다음 단계로 이어지는 선 (점 오른쪽 ~ 카드 끝) */
.timeline > li::before {
    content: '';
    position: absolute;
    top: 19px;
    left: 52px;
    right: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--color-line-light);
}

.timeline > li:last-child::before {
    display: none;
}

.timeline > li:last-child .node {
    background: var(--color-primary);
}

.timeline .card {
    flex: 1;
    margin-top: 24px;
    padding: 28px 24px;
    border-radius: 24px;
    background: var(--color-bg-gray);
}

.timeline .stage {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

.timeline .name {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 600;
    line-height: 31.5px;
    color: var(--color-text);
}

.timeline .en {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: var(--color-gray-light);
}

.timeline .steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.timeline .steps li {
    padding: 16px 18px;
    border-radius: 14px;
    background: #fff;
}

.timeline .steps .tag {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    color: #fff;
}

.timeline .steps .tit {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-text);
}

.timeline .steps .note {
    margin-top: 8px;
    font-size: 14px;
    line-height: 22.4px;
    color: var(--color-gray-light);
}

.timeline .is-done .card {
    background: #0070f9;
}

.timeline .is-done .stage,
.timeline .is-done .name {
    color: #fff;
}

.timeline .is-done .en {
    color: #dfdfdf;
}

.timeline .is-done .steps li {
    background: rgba(255, 255, 255, .38);
}

.timeline .is-done .steps .tit {
    color: #fff;
}

/* =========================================================
   재건축/재개발
   ========================================================= */
.compare-list,
.path-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.compare-list > li {
    padding: 48px;
    border-radius: 28px;
    background: var(--color-bg-gray);
}

.compare-list .top,
.req-list .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.compare-list .chip {
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

.compare-list .num {
    font-size: 32px;
    font-weight: 700;
    line-height: 39px;
    letter-spacing: 0.04em;
    color: var(--color-gray-light);
}

.compare-list .name {
    margin-top: 40px;
    font-size: 36px;
    font-weight: 700;
    line-height: 44px;
    color: var(--color-text);
}

.compare-list .desc {
    margin-top: 16px;
    font-size: 18px;
    line-height: 32.4px;
    color: var(--color-gray-light);
}

.compare-list dl {
    margin-top: 40px;
}

.compare-list dl div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--color-line-light);
    font-size: 16px;
    line-height: 19px;
}

.compare-list dt {
    flex-shrink: 0;
    font-weight: 500;
    color: var(--color-gray-light);
}

.compare-list dd {
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
}

.compare-list .is-blue {
    background: #0070f9;
}

.compare-list .is-blue .chip {
    border: 1px solid rgba(255, 255, 255, .24);
    background: transparent;
    color: #fff;
}

.compare-list .is-blue .num,
.compare-list .is-blue .name {
    color: #fff;
}

.compare-list .is-blue .desc,
.compare-list .is-blue dt,
.compare-list .is-blue dd {
    color: #f3f3f3;
}

.compare-list .is-blue dl div {
    border-color: rgba(255, 255, 255, .16);
}

/* 개발사업 지정요건 */
.path-list > li {
    padding: 44px;
    border: 1px solid var(--color-line-light);
    border-radius: 28px;
    background: #fff;
}

.path-list .label {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

.path-list .name {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
    color: var(--color-text);
}

.path-list .metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 32px;
}

.metric {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color-gray-light);
}

.metric strong {
    font-size: 48px;
    font-weight: 700;
    line-height: 58px;
    color: var(--color-text);
}

.path-list .or {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--color-bg-gray);
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: var(--color-body);
}

.path-list .desc {
    margin-top: 32px;
    font-size: 16px;
    line-height: 28.8px;
    color: var(--color-body);
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}

.chip-list li {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-bg-gray);
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: var(--color-text);
}

/* 사업지정요건 */
.req-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.req-list > li {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 36px;
    border-radius: 24px;
    background: var(--color-bg-gray);
}

.req-list .badge {
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    color: var(--color-primary);
}

.req-list .label {
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: var(--color-gray-light);
}

.req-list .metric {
    margin-top: 40px;
    font-size: 20px;
    line-height: 24px;
}

.req-list .metric strong {
    font-size: 56px;
    line-height: 68px;
}

.req-list .desc {
    margin-top: 12px;
    font-size: 18px;
    line-height: 30.6px;
    color: var(--color-gray-light);
}

.req-list .is-note {
    background: #0070f9;
    color: #fff;
}

.req-list .is-note .pill {
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, .24);
    background: transparent;
    color: #fff;
}

.req-list .is-note p {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
}

.req-list .is-note .btn-round {
    align-self: flex-start;
    margin-top: auto;
    border-color: #fff;
    font-size: 15px;
}

/* 노후·불량건축물 판정 기준 */
.aging {
    padding: 40px;
    border-radius: 28px;
    background: var(--color-bg-gray);
}

.aging-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 8px;
}

.type-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

.aging-head .name {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 600;
    line-height: 31.5px;
    color: var(--color-text);
}

.aging-head .note {
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: var(--color-gray-light);
}

.aging-row {
    display: grid;
    grid-template-columns: 220px repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.aging-row .row-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 8px;
}

.aging-row .row-label strong {
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    color: var(--color-text);
}

.aging-row .row-label span {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    color: var(--color-gray-light);
}

.cri-cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-height: 180px;
    padding: 32px;
    border-radius: 20px;
    background: #fff;
}

.cri-cell .cond {
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    color: var(--color-gray-light);
}

.cri-cell .years {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    color: var(--color-gray-light);
}

.cri-cell .years strong {
    font-size: 48px;
    font-weight: 700;
    line-height: 58px;
    color: #0070f9;
}

.cri-cell .formula {
    font-size: 26px;
    font-weight: 600;
    line-height: 31.5px;
    color: var(--color-text);
}

.aging-other {
    display: grid;
    grid-template-columns: 400px repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.aging-other .type-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 200px;
    padding: 40px;
    border-radius: 28px;
    background: #111c2f;
}

.aging-other .type-label {
    color: #a9b8d6;
}

.aging-other .type-box p {
    font-size: 26px;
    font-weight: 600;
    line-height: 36.4px;
    color: #fff;
}

.aging-other .cri-cell {
    min-height: 200px;
    padding: 40px;
    border-radius: 28px;
    background: var(--color-bg-gray);
}

/* =========================================================
   리모델링
   ========================================================= */
.fact-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 64px;
}

.fact-list li {
    min-height: 230px;
    padding: 36px;
    border-radius: 24px;
    background: var(--color-bg-gray);
}

.fact-list .label {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

.fact-list strong {
    display: block;
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    color: var(--color-text);
}

.fact-list p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 27.2px;
    color: var(--color-body);
}

.fact-list .is-dark {
    background: #111c2f;
}

.fact-list .is-dark .label {
    color: #a9b8d6;
}

.fact-list .is-dark strong {
    color: #fff;
}

.fact-list .is-dark p {
    color: #c8c8c8;
}

/* 노후 공동주택 문제 */
.issue-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.issue-list > li {
    padding: 24px 24px 40px;
    border-radius: 28px;
    background: var(--color-bg-gray);
}

.issue-list .img {
    height: 300px;
    overflow: hidden;
    border-radius: 20px;
    background: #e6e6e6;
}

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

.issue-list .text {
    margin-top: 32px;
    padding: 0 16px;
}

.issue-list .title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.issue-list .title .chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    color: var(--color-primary);
}

.issue-list .title strong {
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    color: var(--color-text);
}

.issue-list .desc {
    margin-top: 16px;
    font-size: 17px;
    line-height: 30.6px;
    color: var(--color-body);
}

.issue-list .chip-list {
    margin-top: 16px;
}

.issue-list .chip-list li {
    border: 1px solid var(--color-line-light);
    background: #fff;
}

/* 리모델링 진행 순서 */
.step-type {
    padding: 40px;
    border-radius: 32px;
    background: #fff;
}

.step-type + .step-type {
    margin-top: 48px;
}

.step-type .name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
}

.step-type .name {
    font-size: 32px;
    font-weight: 700;
    line-height: 39px;
    color: var(--color-text);
}

.step-type .info {
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    color: var(--color-primary);
}

.step-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.step-list li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    min-height: 148px;
    padding: 24px;
    border: 1px solid var(--color-line-light);
    border-radius: 20px;
    background: #fff;
}

.step-list .top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-list .num {
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.04em;
    color: var(--color-gray-light);
}

.step-list .add {
    padding: 0 8px;
    border-radius: 999px;
    background: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: #fff;
}

/* 오른쪽 화살표 */
.step-list .top::after {
    content: '';
    width: 20px;
    height: 20px;
    margin-left: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b1b8bc' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M12 6l4 4-4 4'/%3E%3C/svg%3E") no-repeat center / 20px;
}

.step-list .tit {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/* 안전진단·검토 */
.step-list .is-safety {
    border-color: #c9d3e6;
    background: #edf1f7;
}

.step-list .is-safety .num,
.step-list .is-safety .tit {
    color: var(--color-primary);
}

/* 인허가 */
.step-list .is-permit {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.step-list .is-permit .num {
    color: #a9b8d6;
}

.step-list .is-permit .top::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M12 6l4 4-4 4'/%3E%3C/svg%3E");
}

/* 완료 */
.step-list .is-done {
    border-color: #111c2f;
    background: #111c2f;
}

.step-list .is-done .num {
    color: #f3f3f3;
}

.step-list .is-done .top::after {
    display: none;
}

.step-list .is-permit .tit,
.step-list .is-done .tit {
    color: #fff;
}

/* =========================================================
   WORKS : 소형 PC (1024 ~ 1279)
   ========================================================= */
@media (max-width: 1279px) {
    .works-sec + .works-sec {
        margin-top: 120px;
    }

    .page-intro {
        gap: 48px;
    }

    .page-intro .headline {
        font-size: 44px;
        line-height: 56px;
    }

    .page-intro .lead {
        font-size: 18px;
        line-height: 30px;
    }

    .sec-head-left .sec-tit {
        font-size: 34px;
        line-height: 44px;
    }

    .term-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .zone-list > li {
        padding: 32px;
    }

    .zone-list .cap strong {
        font-size: 40px;
        line-height: 48px;
    }

    .incentive-sum {
        flex-basis: 360px;
        padding: 36px;
    }

    .incentive-sum .big strong {
        font-size: 72px;
        line-height: 88px;
    }

    .timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .timeline > li::before {
        display: none;
    }

    .compare-list > li,
    .path-list > li {
        padding: 36px;
    }

    .req-list .metric strong {
        font-size: 46px;
        line-height: 56px;
    }

    .aging-row {
        grid-template-columns: 160px repeat(2, minmax(0, 1fr));
    }

    .aging-other {
        grid-template-columns: 300px repeat(2, minmax(0, 1fr));
    }

    .cri-cell .formula {
        font-size: 22px;
        line-height: 30px;
    }

    .fact-list strong {
        font-size: 32px;
        line-height: 40px;
    }

    .step-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* =========================================================
   WORKS : 태블릿 (768 ~ 1023)
   ========================================================= */
@media (max-width: 1023px) {
    .works-sec + .works-sec {
        margin-top: 96px;
    }

    .page-intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .page-intro .title,
    .page-intro .lead {
        flex: none;
    }

    .page-intro .headline {
        margin-top: 20px;
        font-size: 38px;
        line-height: 50px;
    }

    .page-intro .lead,
    .page-intro .lead.md,
    .page-intro .lead.sm {
        font-size: 17px;
        line-height: 29px;
    }

    .page-intro .lead br {
        display: none;
    }

    .head-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .sec-head-left .sec-tit {
        font-size: 30px;
        line-height: 40px;
    }

    .sec-head-left .sec-desc {
        margin-top: 12px;
        font-size: 17px;
        line-height: 28px;
    }

    .works-body {
        margin-top: 32px;
    }

    .term-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .term-list li {
        min-height: 0;
        padding: 24px;
        border-radius: 20px;
    }

    .term-list .term {
        font-size: 21px;
    }

    .term-list .desc {
        font-size: 16px;
        line-height: 27px;
    }

    .zone-list,
    .compare-list,
    .path-list,
    .issue-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .incentive {
        flex-direction: column;
        gap: 16px;
    }

    .incentive-sum {
        flex: none;
        padding: 32px;
    }

    .incentive-sum .note {
        margin-top: 32px;
    }

    .incentive-list li {
        padding: 22px 24px;
    }

    .timeline {
        gap: 32px 16px;
    }

    .timeline .card {
        margin-top: 16px;
        border-radius: 20px;
    }

    .timeline .name {
        font-size: 22px;
        line-height: 28px;
    }

    .compare-list > li,
    .path-list > li {
        padding: 32px;
        border-radius: 24px;
    }

    .compare-list .name {
        margin-top: 28px;
        font-size: 30px;
        line-height: 38px;
    }

    .compare-list dl {
        margin-top: 28px;
    }

    .req-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .req-list > li {
        min-height: 240px;
        padding: 28px;
    }

    .req-list .metric strong {
        font-size: 42px;
        line-height: 52px;
    }

    .req-list .desc {
        font-size: 16px;
        line-height: 27px;
    }

    .aging {
        padding: 28px;
        border-radius: 24px;
    }

    .aging-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .aging-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aging-row .row-label {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 12px;
        padding: 8px 0 0;
    }

    .aging-row .row-label strong {
        font-size: 22px;
        line-height: 28px;
    }

    .aging-row .row-label span {
        margin-top: 0;
    }

    .cri-cell {
        min-height: 150px;
        padding: 24px;
    }

    .cri-cell .years strong {
        font-size: 40px;
        line-height: 48px;
    }

    .cri-cell .formula {
        font-size: 19px;
        line-height: 27px;
    }

    .aging-other {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 32px;
    }

    .aging-other .type-box {
        grid-column: 1 / -1;
        min-height: 0;
        padding: 28px;
        border-radius: 24px;
    }

    .aging-other .type-box br {
        display: none;
    }

    .aging-other .cri-cell {
        min-height: 150px;
        padding: 28px;
        border-radius: 24px;
    }

    .fact-list {
        gap: 16px;
        margin-top: 40px;
    }

    .fact-list li {
        min-height: 0;
        padding: 24px;
        border-radius: 20px;
    }

    .fact-list strong {
        margin-top: 14px;
        font-size: 24px;
        line-height: 32px;
    }

    .fact-list p {
        margin-top: 12px;
        font-size: 15px;
        line-height: 25px;
    }

    .fact-list p br {
        display: none;
    }

    .issue-list .img {
        height: 280px;
    }

    .issue-list .title strong {
        font-size: 26px;
        line-height: 32px;
    }

    .step-type {
        padding: 0;
    }

    .step-type .name {
        font-size: 26px;
        line-height: 34px;
    }

    .step-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 24px;
    }

    .step-list li {
        min-height: 120px;
        padding: 20px;
        border-radius: 16px;
    }

    .step-list .tit {
        font-size: 17px;
        line-height: 24px;
    }
}

/* =========================================================
   WORKS : 모바일 (~ 767) : 최소 360
   ========================================================= */
@media (max-width: 767px) {
    .works-sec + .works-sec {
        margin-top: 72px;
    }

    .page-intro .headline {
        margin-top: 16px;
        font-size: 28px;
        line-height: 38px;
    }

    .page-intro .lead,
    .page-intro .lead.md,
    .page-intro .lead.sm {
        font-size: 15px;
        line-height: 26px;
    }

    .sec-head-left .sec-tit {
        margin-top: 12px;
        font-size: 23px;
        line-height: 32px;
    }

    .sec-head-left .sec-desc {
        font-size: 15px;
        line-height: 25px;
    }

    .legend {
        gap: 6px 14px;
        font-size: 12px;
    }

    .works-body {
        margin-top: 24px;
    }

    .term-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .term-list li {
        padding: 22px 20px;
        border-radius: 16px;
    }

    .term-list .term {
        margin-top: 10px;
        font-size: 19px;
        line-height: 26px;
    }

    .term-list .desc {
        margin-top: 8px;
        font-size: 15px;
        line-height: 25px;
    }

    .zone-list,
    .compare-list,
    .path-list,
    .issue-list {
        gap: 12px;
    }

    .zone-list > li {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .zone-list .chip {
        padding: 4px 10px;
        font-size: 12px;
        line-height: 15px;
    }

    .zone-list .name {
        font-size: 17px;
        line-height: 23px;
    }

    .zone-list .cap span {
        font-size: 12px;
    }

    .zone-list .cap strong {
        font-size: 30px;
        line-height: 36px;
    }

    .zone-bar {
        height: 12px;
        margin-top: 24px;
    }

    .zone-list dl {
        margin-top: 20px;
    }

    .zone-list dt {
        font-size: 12px;
    }

    .zone-list dd {
        font-size: 16px;
        line-height: 20px;
    }

    .incentive-sum {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .incentive-sum .big {
        font-size: 18px;
    }

    .incentive-sum .big strong {
        font-size: 56px;
        line-height: 68px;
    }

    .incentive-sum .note {
        margin-top: 24px;
        padding-top: 16px;
        font-size: 14px;
        line-height: 23px;
    }

    .incentive-list {
        gap: 10px;
    }

    /* 번호 | 내용, 값은 내용 아래 */
    .incentive-list li {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 12px;
        padding: 18px 16px;
        border-radius: 16px;
    }

    .incentive-list .num {
        width: auto;
        font-size: 18px;
        line-height: 27px;
    }

    .incentive-list .tit {
        font-size: 15px;
        line-height: 24px;
    }

    .incentive-list .note {
        font-size: 13px;
        line-height: 21px;
    }

    .incentive-list .val {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 6px;
        grid-column: 2;
        max-width: none;
        margin-top: 8px;
        text-align: left;
    }

    .incentive-list .val strong,
    .incentive-list .val strong.sm {
        display: inline;
        font-size: 20px;
        line-height: 26px;
    }

    .incentive-list .val span {
        display: inline;
        margin-top: 0;
        font-size: 12px;
    }

    .timeline {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .timeline .node {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .timeline .card {
        margin-top: 12px;
        padding: 22px 18px;
        border-radius: 16px;
    }

    .timeline .name {
        font-size: 20px;
        line-height: 26px;
    }

    .timeline .steps {
        margin-top: 16px;
    }

    .timeline .steps li {
        padding: 14px 16px;
        border-radius: 12px;
    }

    .timeline .steps .tit {
        font-size: 15px;
        line-height: 23px;
    }

    .timeline .steps .note {
        font-size: 13px;
        line-height: 21px;
    }

    .compare-list > li,
    .path-list > li {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .compare-list .chip {
        padding: 6px 12px;
        font-size: 12px;
        line-height: 15px;
    }

    .compare-list .num {
        font-size: 24px;
        line-height: 30px;
    }

    .compare-list .name {
        margin-top: 20px;
        font-size: 24px;
        line-height: 32px;
    }

    .compare-list .desc {
        margin-top: 10px;
        font-size: 15px;
        line-height: 26px;
    }

    .compare-list dl {
        margin-top: 20px;
    }

    .compare-list dl div {
        padding: 12px 0;
        font-size: 14px;
        line-height: 20px;
    }

    .path-list .name {
        font-size: 22px;
        line-height: 28px;
    }

    .path-list .metrics {
        margin-top: 20px;
    }

    .metric {
        font-size: 15px;
    }

    .metric strong {
        font-size: 34px;
        line-height: 42px;
    }

    .path-list .desc {
        margin-top: 20px;
        font-size: 15px;
        line-height: 26px;
    }

    .chip-list {
        gap: 6px;
        margin-top: 20px;
    }

    .chip-list li {
        padding: 6px 12px;
        font-size: 13px;
        line-height: 16px;
    }

    .req-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .req-list > li {
        min-height: 0;
        padding: 24px 20px;
        border-radius: 16px;
    }

    .req-list .metric {
        margin-top: 24px;
        font-size: 16px;
    }

    .req-list .metric strong {
        font-size: 38px;
        line-height: 46px;
    }

    .req-list .desc {
        margin-top: 8px;
        font-size: 15px;
        line-height: 25px;
    }

    .req-list .is-note p {
        font-size: 17px;
        line-height: 27px;
    }

    .req-list .is-note .btn-round {
        margin-top: 24px;
    }

    .aging {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .aging-head .name {
        font-size: 20px;
        line-height: 27px;
    }

    .aging-head .note {
        font-size: 12px;
    }

    .aging-row,
    .aging-other {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .aging-row .row-label strong {
        font-size: 19px;
        line-height: 25px;
    }

    .aging-row .row-label span {
        font-size: 13px;
    }

    .cri-cell,
    .aging-other .cri-cell {
        gap: 12px;
        min-height: 0;
        padding: 20px;
        border-radius: 14px;
    }

    .cri-cell .cond {
        font-size: 13px;
        line-height: 18px;
    }

    .cri-cell .years {
        font-size: 13px;
    }

    .cri-cell .years strong {
        font-size: 32px;
        line-height: 38px;
    }

    .cri-cell .formula {
        font-size: 17px;
        line-height: 25px;
    }

    .aging-other {
        margin-top: 24px;
    }

    .aging-other .type-box {
        padding: 22px 20px;
        border-radius: 16px;
    }

    .aging-other .type-box p {
        font-size: 20px;
        line-height: 28px;
    }

    .fact-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 32px;
    }

    .fact-list li {
        padding: 22px 20px;
        border-radius: 16px;
    }

    .issue-list > li {
        padding: 12px 12px 24px;
        border-radius: 16px;
    }

    .issue-list .img {
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }

    .issue-list .text {
        margin-top: 20px;
        padding: 0 8px;
    }

    .issue-list .title strong {
        font-size: 21px;
        line-height: 28px;
    }

    .issue-list .desc {
        margin-top: 10px;
        font-size: 15px;
        line-height: 26px;
    }

    .step-type .name {
        font-size: 21px;
        line-height: 28px;
    }

    .step-type .info {
        font-size: 12px;
    }

    .step-type + .step-type {
        margin-top: 40px;
    }

    .step-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 16px;
    }

    .step-list li {
        gap: 10px;
        min-height: 96px;
        padding: 16px 14px;
        border-radius: 14px;
    }

    .step-list .num {
        font-size: 13px;
    }

    .step-list .top::after {
        width: 16px;
        height: 16px;
        background-size: 16px;
    }

    .step-list .tit {
        font-size: 15px;
        line-height: 21px;
    }
}

/* =========================================================
   PROJECT : 목록 (시안 없음 - 메인 사업실적 카드 + 목록 필터 / 페이징)
   ========================================================= */
/* Figma PROJECT_Banner > Frame 254 */
.sub-visual.project {
    background-image: url('/resource/user/images/project/sub_visual.jpg');
    background-position: 50% 50%;
}

/* 목록 필터 : 왼쪽 카테고리 / 오른쪽 검색 */
.list-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.list-search {
    display: flex;
    gap: 8px;
}

.form-select {
    height: 46px;
    padding: 0 40px 0 16px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23707070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
    font-size: 15px;
    color: var(--color-text);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.list-filter .category {
    min-width: 180px;
}

.list-search .form-select {
    min-width: 110px;
}

.form-input {
    width: 280px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 15px;
    color: var(--color-text);
}

.form-input::placeholder {
    color: #a0a0a0;
}

.form-select:focus-visible,
.form-input:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

.btn-search {
    flex-shrink: 0;
    width: 80px;
    height: 46px;
    border-radius: 4px;
    background: var(--color-primary);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    transition: background-color .2s;
}

.btn-search:hover,
.btn-search:focus-visible {
    background: #001a4a;
}

/* 프로젝트 목록 : 메인 사업실적 카드와 동일 */
.project-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 20px;
    margin-top: 40px;
}

/* 개발 : 등록된 프로젝트가 없을 때 */
.project-list .empty {
    grid-column: 1 / -1;
    padding: 80px 0;
    text-align: center;
    font-size: 16px;
    color: var(--color-gray-light);
}

.project-list a {
    display: block;
}

.project-list .thumb {
    aspect-ratio: 419 / 223;
    overflow: hidden;
    background: var(--color-bg-gray);
}

.project-list .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.project-list .tit {
    margin-top: 16px;
    overflow: hidden;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: var(--color-black);
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .2s;
}

.project-list a:hover .thumb img,
.project-list a:focus-visible .thumb img {
    transform: scale(1.05);
}

.project-list a:hover .tit,
.project-list a:focus-visible .tit {
    color: var(--color-primary);
}

/* 페이징 */
.paging {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 80px;
}

.paging a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    transition: border-color .2s, color .2s;
}

.paging a:hover,
.paging a:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.paging a.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.paging .prev,
.paging .next {
    background: #fff no-repeat center / 16px;
}

.paging .prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23141414' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 3-5 5 5 5'/%3E%3C/svg%3E");
}

.paging .next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23141414' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 3 5 5-5 5'/%3E%3C/svg%3E");
}

.paging .is-disabled {
    opacity: .4;
    pointer-events: none;
}

/* =========================================================
   PROJECT : 태블릿 (768 ~ 1023)
   ========================================================= */
@media (max-width: 1023px) {
    .project-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 16px;
        margin-top: 32px;
    }

    .project-list .tit {
        margin-top: 12px;
        font-size: 17px;
        line-height: 26px;
    }

    .paging {
        margin-top: 56px;
    }
}

/* =========================================================
   PROJECT : 모바일 (~ 767) : 최소 360
   ========================================================= */
@media (max-width: 767px) {
    /* 카테고리 1줄 / 검색 1줄 (wrap 이면 줄 폭이 내용 폭을 따라가 넘치므로 nowrap) */
    .list-filter {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
    }

    .list-filter .category {
        width: 100%;
    }

    .form-select,
    .form-input,
    .btn-search {
        height: 44px;
        font-size: 14px;
    }

    .list-search {
        gap: 6px;
    }

    .list-search .form-select {
        flex-shrink: 0;
        min-width: 0;
        width: 88px;
        padding: 0 30px 0 12px;
        background-position: right 10px center;
    }

    .form-input {
        flex: 1;
        width: auto;
        min-width: 0;
        padding: 0 12px;
    }

    .btn-search {
        width: 60px;
    }

    .project-list {
        gap: 24px 12px;
        margin-top: 24px;
    }

    .project-list .thumb {
        aspect-ratio: 162 / 108;
    }

    .project-list .tit {
        display: -webkit-box;
        margin-top: 10px;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: -0.01em;
        color: var(--color-text);
        white-space: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .paging {
        gap: 6px;
        margin-top: 40px;
    }

    .paging a {
        min-width: 38px;
        height: 38px;
        font-size: 14px;
    }
}

@media (max-width: 374px) {
    .project-list .tit {
        font-size: 13px;
        line-height: 20px;
    }
}

/* =========================================================
   PROJECT : 상세 (참고 : http://kcmotor.ga-test.kr/kr/product/view/2)
   ========================================================= */
.view-top {
    display: grid;
    grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
    gap: 40px;
}

/* 이미지 : 대표 이미지 + 썸네일 */
.view-gallery .main-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg-gray);
}

.view-gallery .main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.view-gallery .thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.view-gallery .thumbs button {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--color-bg-gray);
    opacity: .6;
    transition: border-color .2s, opacity .2s;
}

.view-gallery .thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.view-gallery .thumbs button:hover,
.view-gallery .thumbs button:focus-visible {
    opacity: 1;
}

.view-gallery .thumbs .is-active {
    border-color: var(--color-primary);
    opacity: 1;
}

/* 정보 */
.view-info {
    width: 100%;
    border-top: 2px solid var(--color-text);
    font-size: 16px;
    line-height: 27px;
    text-align: left;
}

.view-info th,
.view-info td {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: top;
}

.view-info th {
    width: 160px;
    font-weight: 600;
    color: var(--color-text);
}

.view-info td {
    color: var(--color-body);
}

.view-info tr:first-child td {
    font-weight: 600;
    color: var(--color-text);
}

.btn-inquiry {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    margin-top: 32px;
    border-radius: 4px;
    background: var(--color-primary);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    transition: background-color .2s;
}

.btn-inquiry:hover,
.btn-inquiry:focus-visible {
    background: #001a4a;
}

/* 상세정보 탭 + 내용 */
.view-detail {
    margin-top: 80px;
}

.view-tab {
    display: flex;
    border-bottom: 1px solid var(--color-text);
}

.view-tab li {
    margin-bottom: -1px;
}

.view-tab span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 60px;
    padding: 0 24px;
    border: 1px solid var(--color-text);
    border-bottom-color: #fff;
    background: #fff;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
}

.view-content {
    margin-top: 24px;
    padding: 40px;
    border: 1px solid var(--color-line-light);
    font-size: 17px;
    line-height: 30px;
    color: var(--color-body);
}

.view-content img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.view-content p + img,
.view-content img + p {
    margin-top: 24px;
}

.view-btns {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

/* =========================================================
   PROJECT 상세 : 소형 PC (1024 ~ 1279)
   ========================================================= */
@media (max-width: 1279px) {
    .view-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
    }

    .view-info th {
        width: 130px;
    }

    .view-info th,
    .view-info td {
        padding: 18px 16px;
    }
}

/* =========================================================
   PROJECT 상세 : 태블릿 (768 ~ 1023)
   ========================================================= */
@media (max-width: 1023px) {
    .view-top {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .view-detail {
        margin-top: 64px;
    }

    .view-content {
        padding: 28px;
    }
}

/* =========================================================
   PROJECT 상세 : 모바일 (~ 767) : 최소 360
   ========================================================= */
@media (max-width: 767px) {
    .view-top {
        gap: 24px;
    }

    .view-gallery .thumbs {
        gap: 8px;
        margin-top: 8px;
    }

    .view-info {
        font-size: 14px;
        line-height: 23px;
    }

    .view-info th {
        width: 84px;
    }

    .view-info th,
    .view-info td {
        padding: 14px 10px;
    }

    .btn-inquiry {
        height: 52px;
        margin-top: 24px;
        font-size: 16px;
    }

    .view-detail {
        margin-top: 48px;
    }

    .view-tab span {
        min-width: 140px;
        height: 48px;
        font-size: 15px;
    }

    .view-content {
        margin-top: 16px;
        padding: 20px 16px;
        font-size: 15px;
        line-height: 26px;
    }

    .view-btns {
        margin-top: 40px;
    }
}

/* =========================================================
   COMMUNITY : 게시판 목록 / 보기, 상담문의 (시안 없음)
   - 게시판 참고 : http://kcmotor.ga-test.kr/kr/board/notice/list
   - 상담문의 참고 : https://ga0001.gabia.io/inquiry
   ========================================================= */
/* Figma COMMUNITY_Banner > Frame 254 */
.sub-visual.community {
    background-image: url('/resource/user/images/community/sub_visual.jpg');
    background-position: 50% 50%;
}

.list-filter.right {
    justify-content: flex-end;
}

/* 게시판 목록 */
/* fixed : 긴 제목(말줄임)이 표 폭을 늘리지 않도록 */
.board-list {
    width: 100%;
    margin-top: 24px;
    border-top: 2px solid var(--color-text);
    table-layout: fixed;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

.board-list th {
    height: 64px;
    border-bottom: 1px solid #d9d9d9;
    font-weight: 600;
    color: var(--color-text);
}

.board-list td {
    height: 68px;
    padding: 0 16px;
    border-bottom: 1px solid #e5e5e5;
    color: var(--color-body);
}

.board-list .num {
    width: 100px;
}

.board-list .date {
    width: 160px;
}

.board-list .hit {
    width: 100px;
}

.board-list td.subject {
    text-align: left;
}

.board-list td.subject a {
    display: block;
    overflow: hidden;
    color: var(--color-text);
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .2s;
}

.board-list td.subject a:hover,
.board-list td.subject a:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

/* 공지 글 */
.board-list .is-notice td {
    background: #f7f8fa;
}

.board-list .is-notice .num {
    font-weight: 700;
    color: var(--color-primary);
}

.board-list .is-notice .subject a {
    font-weight: 600;
}

.board-list .meta {
    display: none;
}

/* 개발 : 등록된 게시물이 없을 때 */
.board-list td.empty {
    height: 160px;
    text-align: center;
    color: var(--color-gray-light);
}

/* 게시판 보기 */
.board-view {
    border-bottom: 1px solid #e5e5e5;
}

.board-view-head {
    padding-bottom: 28px;
    border-bottom: 2px solid var(--color-text);
}

.board-view-head .tit {
    font-size: 32px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.board-view-head .info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
    font-size: 15px;
    line-height: 22px;
    color: #919191;
}

.board-view-head .info li + li::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 12px;
    border-radius: 50%;
    background: #c8c8c8;
    vertical-align: middle;
}

.board-view-head .info .writer {
    font-weight: 600;
    color: var(--color-text);
}

/* 첨부파일 · 파일명 */
.board-view-head .file {
    display: flex;
    align-items: baseline;
    margin-top: 8px;
    font-size: 15px;
    line-height: 22px;
}

.board-view-head .file .label {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--color-text);
}

.board-view-head .file .label::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 12px;
    border-radius: 50%;
    background: #c8c8c8;
    vertical-align: middle;
}

.board-view-head .file ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    min-width: 0;
}

.board-view-head .file a {
    color: var(--color-body);
    word-break: break-all;
    transition: color .2s;
}

.board-view-head .file a:hover,
.board-view-head .file a:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.board-view-body {
    min-height: 320px;
    padding: 40px 0 60px;
    font-size: 17px;
    line-height: 30px;
    color: var(--color-body);
}

.board-view-body img {
    max-width: 100%;
    height: auto;
}

.board-view-body p + p,
.board-view-body p + img,
.board-view-body img + p {
    margin-top: 20px;
}

/* 상담문의 */
.form-guide {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray-light);
    text-align: right;
}

.req {
    color: #e0312b;
}

.form-table {
    width: 100%;
    margin-top: 12px;
    border-top: 2px solid var(--color-text);
    font-size: 16px;
    text-align: left;
}

.form-table th,
.form-table td {
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
}

.form-table th {
    width: 220px;
    padding: 0 24px;
    background: #f8f8f8;
    font-weight: 600;
    color: var(--color-text);
}

.form-table td {
    padding: 12px 20px;
}

.form-table .form-input {
    width: 100%;
}

.form-table textarea {
    display: block;
    width: 100%;
    height: 240px;
    padding: 14px 16px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 15px;
    line-height: 24px;
    color: var(--color-text);
    resize: vertical;
}

.form-table textarea::placeholder {
    color: #a0a0a0;
}

.form-table textarea:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.form-row + .form-row {
    margin-top: 8px;
}

.form-table .form-row .form-input {
    flex: 1;
    width: auto;
    min-width: 0;
}

.form-table .form-input.zip {
    flex: 0 0 160px;
}

.form-row .at {
    color: var(--color-gray-light);
}

.form-row .form-select {
    flex: 0 0 200px;
}

.btn-form {
    flex-shrink: 0;
    height: 46px;
    padding: 0 20px;
    border: 1px solid var(--color-text);
    border-radius: 4px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    transition: background-color .2s, color .2s;
}

.btn-form:hover,
.btn-form:focus-visible {
    background: var(--color-text);
    color: #fff;
}

/* 체크박스 */
.check-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
}

.check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    line-height: 22px;
    color: var(--color-text);
    cursor: pointer;
}

.check input {
    position: absolute;
    opacity: 0;
}

.check span::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    background: #fff no-repeat center / 14px;
    vertical-align: -6px;
    transition: background-color .2s, border-color .2s;
}

.check input:checked + span::before {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 7 3 3 6-6'/%3E%3C/svg%3E");
}

.check input:focus-visible + span::before {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* 개인정보 동의 */
.agree-box {
    margin-top: 48px;
}

.agree-box .tit {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    color: var(--color-text);
}

.agree-box .terms {
    height: 180px;
    margin-top: 12px;
    padding: 20px 24px;
    overflow-y: auto;
    border: 1px solid #d9d9d9;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-body);
}

.agree-box .terms p + p {
    margin-top: 12px;
}

.agree-box .check {
    margin-top: 16px;
    font-size: 15px;
    font-weight: 600;
}

.form-btns {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

/* 남색 기본 버튼 (상담문의 등록, 게시판 보기 목록으로) */
.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 56px;
    padding: 0 32px;
    border-radius: 4px;
    background: var(--color-primary);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    transition: background-color .2s;
}

.btn-submit:hover,
.btn-submit:focus-visible {
    background: #001a4a;
}

/* =========================================================
   COMMUNITY : 태블릿 (768 ~ 1023)
   ========================================================= */
@media (max-width: 1023px) {
    .board-list .num,
    .board-list .hit {
        width: 72px;
    }

    .board-list .date {
        width: 120px;
    }

    .board-list {
        font-size: 15px;
    }

    .board-view-head .tit {
        font-size: 26px;
        line-height: 36px;
    }

    .form-table th {
        width: 160px;
        padding: 0 16px;
    }
}

/* =========================================================
   COMMUNITY : 모바일 (~ 767) : 최소 360
   ========================================================= */
@media (max-width: 767px) {
    /* 목록 : 표 → 제목 + (날짜 · 조회) 리스트 */
    .board-list,
    .board-list tbody,
    .board-list tr,
    .board-list td {
        display: block;
    }

    .board-list {
        margin-top: 16px;
        font-size: 15px;
    }

    .board-list thead,
    .board-list td.num,
    .board-list td.date,
    .board-list td.hit {
        display: none;
    }

    .board-list tr {
        padding: 16px 4px;
        border-bottom: 1px solid #e5e5e5;
    }

    .board-list .is-notice {
        background: #f7f8fa;
    }

    .board-list td {
        height: auto;
        padding: 0;
        border: 0;
        background: none !important;
    }

    .board-list td.subject a {
        display: -webkit-box;
        white-space: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .board-list .meta {
        display: block;
        margin-top: 6px;
        font-size: 13px;
        line-height: 18px;
        color: #919191;
    }

    .board-list .meta .notice {
        margin-right: 8px;
        font-weight: 700;
        color: var(--color-primary);
    }

    .board-view-head {
        padding-bottom: 20px;
    }

    .board-view-head .tit {
        font-size: 21px;
        line-height: 30px;
    }

    .board-view-head .info {
        margin-top: 10px;
        font-size: 13px;
    }

    .board-view-head .info li + li::before {
        margin: 0 8px;
    }

    .board-view-body {
        min-height: 200px;
        padding: 28px 0 40px;
        font-size: 15px;
        line-height: 26px;
    }

    /* 상담문의 : 항목명 위 / 입력 아래 */
    .form-table,
    .form-table tbody,
    .form-table tr,
    .form-table th,
    .form-table td {
        display: block;
        width: 100%;
    }

    .form-table th {
        padding: 14px 0 0;
        border-bottom: 0;
        background: none;
        font-size: 15px;
    }

    .form-table td {
        padding: 8px 0 14px;
    }

    .form-table .form-input.zip {
        flex: 1 1 auto;
    }

    .form-row .form-select {
        flex: 1 1 100%;
    }

    .form-table textarea {
        height: 200px;
        font-size: 14px;
    }

    .btn-form {
        height: 44px;
        padding: 0 14px;
        font-size: 14px;
    }

    .check-list {
        gap: 10px 20px;
    }

    .check {
        font-size: 15px;
    }

    .agree-box {
        margin-top: 32px;
    }

    .agree-box .tit {
        font-size: 16px;
    }

    .agree-box .terms {
        height: 160px;
        padding: 16px;
        font-size: 13px;
        line-height: 22px;
    }

    .agree-box .check {
        align-items: flex-start;
        font-size: 14px;
    }

    .form-btns {
        margin-top: 40px;
    }

    .btn-submit {
        width: 100%;
        height: 52px;
        font-size: 16px;
    }
}

/* 게시판 보기 첨부파일 : 모바일 */
@media (max-width: 767px) {
    .board-view-head .file {
        margin-top: 6px;
        font-size: 13px;
        line-height: 20px;
    }

    .board-view-head .file .label::after {
        margin: 0 8px;
    }
}

/* =========================================================
   COMPANY : 개인정보처리방침 (Figma C&M 씨앤앰글로벌_개인정보처리방침)
   - 서브 비주얼 없이 브레드크럼 + 타이틀
   - PC : 좌측 목차(sticky) 280 + 본문 1080
   - 태블릿 / 모바일 : 목차를 헤더 아래 가로 스크롤 바(sticky)로 변경
   ========================================================= */
.sub-head.no-visual {
    padding-top: 100px;
}

.sub-content.privacy {
    padding: 80px 0 260px;
}

.privacy-intro {
    padding: 40px 48px;
    border-radius: 28px;
    background: var(--color-bg-gray);
}

.privacy-intro .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.privacy-intro .pill {
    background: #fff;
    color: var(--color-text);
}

.privacy-intro .date {
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    color: var(--color-primary);
}

.privacy-intro .date time {
    margin-left: 4px;
}

.privacy-intro .txt {
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--color-body);
    word-break: keep-all;
}

.privacy-main {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    margin-top: 64px;
}

/* 목차 */
.privacy-toc {
    position: sticky;
    top: calc(var(--header-height) + 40px);
    flex-shrink: 0;
    width: 280px;
    padding: 28px 24px;
    border: 1px solid var(--color-line-light);
    border-radius: 24px;
    background: #fff;
}

.privacy-toc .toc-head {
    padding: 0 12px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: 0.1em;
    color: var(--color-gray-light);
}

.privacy-toc ol {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.privacy-toc a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: var(--color-body);
    word-break: keep-all;
    transition: background-color .2s, color .2s;
}

.privacy-toc .num {
    flex-shrink: 0;
    min-width: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gray-light);
    transition: color .2s;
}

.privacy-toc a:hover {
    color: var(--color-primary);
}

.privacy-toc li.is-active a {
    background: #edf1f7;
    font-weight: 600;
    color: var(--color-primary);
}

.privacy-toc li.is-active .num {
    color: var(--color-primary);
}

/* 본문 */
.privacy-body {
    flex: 1;
    min-width: 0;
}

.policy-article {
    padding: 56px 0;
    border-top: 1px solid var(--color-line-light);
}

.policy-article:first-child {
    padding-top: 0;
    border-top: 0;
}

.policy-article:last-child {
    padding-bottom: 0;
}

.policy-article > * + * {
    margin-top: 24px;
}

.policy-tit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.01em;
    color: var(--color-text);
    word-break: keep-all;
}

.policy-tit .num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin-top: 3px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--color-text);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #fff;
}

.policy-txt {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-body);
    word-break: keep-all;
}

/* 번호 목록 */
.policy-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.policy-list li {
    display: flex;
    gap: 12px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-body);
    word-break: keep-all;
}

.policy-list .marker {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #edf1f7;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
}

/* 카드 */
.policy-cards {
    display: grid;
    gap: 16px;
}

.policy-cards.col3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.policy-cards.col2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.policy-cards li {
    padding: 28px;
    border-radius: 20px;
    background: var(--color-bg-gray);
}

.policy-cards .label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

.policy-cards .tit {
    display: block;
    margin-top: 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    color: var(--color-text);
    word-break: keep-all;
}

.policy-cards .desc {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-body);
    word-break: keep-all;
}

/* 항목 / 내용 표 */
.policy-table {
    overflow: hidden;
    border: 1px solid var(--color-line-light);
    border-radius: 20px;
    background: #fff;
}

.policy-table .head {
    padding: 16px 24px;
    background: var(--color-bg-gray);
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    color: var(--color-text);
}

.policy-table .row {
    display: flex;
    gap: 24px;
    padding: 18px 24px;
    font-size: 15px;
}

.policy-table .row + .row {
    border-top: 1px solid var(--color-line-light);
}

.policy-table dt {
    flex-shrink: 0;
    width: 160px;
    font-weight: 600;
    line-height: 25px;
    color: var(--color-text);
    word-break: keep-all;
}

.policy-table dd {
    flex: 1;
    min-width: 0;
    line-height: 25px;
    color: var(--color-body);
    word-break: keep-all;
}

/* 보호책임자 / 담당부서 */
.policy-contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.policy-contacts .contact {
    padding: 32px 32px 24px;
    border-radius: 24px;
    background: var(--color-bg-gray);
}

.policy-contacts .label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

.policy-contacts .tit {
    display: block;
    margin-top: 6px;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.policy-contacts dl {
    margin-top: 20px;
}

.policy-contacts .row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--color-line-light);
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
}

.policy-contacts dt {
    flex-shrink: 0;
    color: var(--color-gray-light);
}

.policy-contacts dd {
    min-width: 0;
    text-align: right;
    color: var(--color-text);
    word-break: break-all;
}

/* 개인정보처리방침 : 소형 PC */
@media (max-width: 1279px) {
    .sub-head.no-visual {
        padding-top: 80px;
    }

    .sub-content.privacy {
        padding: 64px 0 200px;
    }

    .privacy-main {
        gap: 40px;
    }

    .privacy-toc {
        width: 240px;
        padding: 24px 16px;
    }

    .policy-cards.col3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 개인정보처리방침 : 태블릿 - 목차를 헤더 아래 가로 스크롤 바로 */
@media (max-width: 1023px) {
    .sub-head.no-visual {
        padding-top: 64px;
    }

    .sub-content.privacy {
        padding: 48px 0 120px;
    }

    .privacy-intro {
        padding: 32px;
        border-radius: 24px;
    }

    .privacy-intro .txt {
        margin-top: 20px;
        font-size: 16px;
    }

    .privacy-main {
        display: block;
        margin-top: 40px;
    }

    .privacy-toc {
        top: var(--header-height);
        z-index: 10;
        width: auto;
        margin: 0 calc(var(--inner-padding) * -1) 40px;
        padding: 10px var(--inner-padding);
        overflow-x: auto;
        border: 0;
        border-bottom: 1px solid var(--color-line-light);
        border-radius: 0;
        scrollbar-width: none;
    }

    .privacy-toc::-webkit-scrollbar {
        display: none;
    }

    .privacy-toc .toc-head {
        display: none;
    }

    .privacy-toc ol {
        flex-direction: row;
        width: max-content;
    }

    .privacy-toc a {
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .policy-article {
        padding: 48px 0;
    }

    .policy-tit {
        gap: 12px;
        font-size: 22px;
        line-height: 30px;
    }

    .policy-tit .num {
        margin-top: 2px;
    }

    .policy-cards.col3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 개인정보처리방침 : 모바일 */
@media (max-width: 767px) {
    .sub-head.no-visual {
        padding-top: 48px;
    }

    .sub-content.privacy {
        padding: 32px 0 80px;
    }

    .privacy-intro {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .privacy-intro .date {
        font-size: 14px;
    }

    .privacy-intro .txt {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.7;
    }

    .privacy-main {
        margin-top: 32px;
    }

    .privacy-toc {
        margin-bottom: 32px;
        padding: 8px var(--inner-padding);
    }

    .privacy-toc a {
        padding: 7px 12px;
        font-size: 13px;
        line-height: 20px;
    }

    .privacy-toc .num {
        min-width: 0;
        font-size: 12px;
    }

    .policy-article {
        padding: 40px 0;
    }

    .policy-article > * + * {
        margin-top: 20px;
    }

    .policy-tit {
        gap: 10px;
        font-size: 19px;
        line-height: 26px;
    }

    .policy-tit .num {
        height: 22px;
        margin-top: 2px;
        padding: 0 9px;
        font-size: 12px;
    }

    .policy-txt,
    .policy-list li {
        font-size: 15px;
        line-height: 1.7;
    }

    .policy-list {
        gap: 10px;
    }

    .policy-list li {
        gap: 10px;
    }

    .policy-list .marker {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .policy-cards.col2,
    .policy-contacts {
        grid-template-columns: minmax(0, 1fr);
    }

    .policy-cards {
        gap: 12px;
    }

    .policy-cards li {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .policy-cards .tit {
        margin-top: 8px;
        font-size: 17px;
        line-height: 25px;
    }

    .policy-cards .desc {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.7;
    }

    .policy-table {
        border-radius: 16px;
    }

    .policy-table .head {
        padding: 14px 20px;
        font-size: 14px;
    }

    .policy-table .row {
        flex-direction: column;
        gap: 6px;
        padding: 16px 20px;
        font-size: 14px;
    }

    .policy-table dt {
        width: auto;
        line-height: 20px;
    }

    .policy-table dd {
        line-height: 23px;
    }

    .policy-contacts .contact {
        padding: 24px 20px 16px;
        border-radius: 20px;
    }

    .policy-contacts .tit {
        font-size: 18px;
    }

    .policy-contacts dl {
        margin-top: 16px;
    }

    .policy-contacts .row {
        padding: 12px 0;
        font-size: 14px;
    }
}