@charset "utf-8";

/* =========================================================
   삼정원 미션·비전 콘텐츠 스킨
   - 제공된 참고 페이지의 여백, 카드, 섹션 구성을 반영
   - 그누보드 내용관리 영역에만 적용되도록 #ctt_con 내부로 제한
========================================================= */

#ctt {
    margin: 0;
    padding: 0;
    background: #fff;
}

#ctt.c-missionPage {
    padding-bottom: 90px;
}

#ctt .ctt_admin {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 20px 0;
    text-align: right;
}

#ctt header > h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#ctt_con {
    --mission-primary: var(--color-main, #119bd1);
    --mission-primary-dark: #0d769f;
    --mission-secondary: var(--color-sub-1, #7cc8bf);
    --mission-accent: #a9ca63;
    --mission-ink: var(--color-text, #263943);
    --mission-muted: #6f7e86;
    --mission-line: #dde5e8;
    --mission-soft: #f7f9fa;
    --mission-soft-blue: #eef8fc;
    --mission-radius: 18px;
    --mission-shadow: 0 14px 36px rgba(31, 70, 88, .07);

    max-width: 1180px;
    margin: 0 auto;
    padding: 58px 20px 0;
    color: var(--mission-ink);
    font-size: 16px;
    line-height: 1.65;
    word-break: keep-all;
}

#ctt_con *,
#ctt_con *::before,
#ctt_con *::after {
    box-sizing: border-box;
}

#ctt_con img {
    max-width: 100%;
    height: auto;
}

#ctt_con p,
#ctt_con ol,
#ctt_con ul {
    margin-top: 0;
}

/* MISSION / VISION */
#ctt_con .c-statementSection {
    margin-top: 44px;
}

#ctt_con > .c-statementSection:first-of-type {
    margin-top: 0;
}

#ctt_con .c-sectionLabel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: #384950;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.025em;
}

#ctt_con .c-sectionLabel > span {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    background: #9ea8ad;
}

#ctt_con .c-statementBox {
    position: relative;
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 38px 50px;
    border: 1px solid var(--mission-line);
    border-radius: var(--mission-radius);
    background: linear-gradient(135deg, #fbfcfc 0%, #f7f9fa 100%);
    box-shadow: 0 2px 0 rgba(22, 54, 68, .02);
    text-align: center;
}

#ctt_con .c-statementBox::before {
    content: "";
    position: absolute;
    left: -60px;
    bottom: -92px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(17, 155, 209, .035);
}


#ctt_con .c-statementBox p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #343f44;
    font-size: clamp(23px, 2.2vw, 32px);
    line-height: 1.45;
    font-weight: 800;
    letter-spacing: -.045em;
}

#ctt_con .c-statementBox strong,
#ctt_con .c-statementBox em {
    font-style: normal;
    font-weight: 900;
}

#ctt_con .c-statementBox--mission em,
#ctt_con .c-statementBox--mission strong {
    color: var(--mission-primary);
}

#ctt_con .c-statementBox--vision {
    background: linear-gradient(135deg, #fbfcfc 0%, #f5faf9 100%);
}

#ctt_con .c-statementBox--vision::before {
    background: rgba(124, 200, 191, .06);
}

#ctt_con .c-statementBox--vision em {
    color: #3ea998;
}

/* 단계 연결 화살표: 아래 단계가 위 단계의 방향으로 이어지는 구조 */
#ctt_con .c-flowArrow {
    width: 76px;
    height: 30px;
    margin: 24px auto 0;
    background: linear-gradient(180deg, #e8ecee 0%, #dce2e5 100%);
    clip-path: polygon(50% 0, 100% 42%, 69% 42%, 69% 100%, 31% 100%, 31% 42%, 0 42%);
}

#ctt_con .c-flowArrow + .c-statementSection,
#ctt_con .c-flowArrow + .c-coreSection,
#ctt_con .c-flowArrow + .c-strategySection {
    margin-top: 22px;
}

/* 핵심가치 */
#ctt_con .c-coreSection {
    margin-top: 74px;
    text-align: center;
}

#ctt_con .c-pillTitle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 146px;
    min-height: 48px;
    margin: 0 auto 24px;
    padding: 10px 28px;
    border-radius: 999px;
    color: #fff;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -.035em;
    background: linear-gradient(100deg, var(--mission-primary) 0%, #20afd3 100%);
    box-shadow: 0 10px 24px rgba(17, 155, 209, .18);
}

#ctt_con .c-coreGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#ctt_con .c-coreGrid li {
    position: relative;
    min-height: 225px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px 26px 28px;
    border: 1px solid var(--mission-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(31, 70, 88, .05);
}

#ctt_con .c-coreGrid__number {
    position: absolute;
    left: 18px;
    top: -13px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    background: #35464e;
    box-shadow: 0 6px 14px rgba(31, 53, 63, .18);
}

#ctt_con .c-coreGrid img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    margin-bottom: 16px;
    image-rendering: auto;
    filter: drop-shadow(0 8px 16px rgba(31, 70, 88, .08));
}

#ctt_con .c-coreGrid strong {
    display: block;
    color: #33454d;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: -.035em;
}

/* 전략목표 및 전략과제 */
#ctt_con .c-strategySection {
    margin-top: 54px;
    padding: 44px 38px 38px;
    border: 1px solid var(--mission-line);
    border-radius: 20px;
    background: linear-gradient(180deg, #fbfcfc 0%, #f7f9fa 100%);
    box-shadow: var(--mission-shadow);
}

#ctt_con .c-strategySection__head {
    text-align: center;
}

#ctt_con .c-strategySection__head > span {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--mission-primary);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .16em;
}

#ctt_con .c-strategySection__head h3 {
    margin: 0;
    color: #273940;
    font-size: clamp(25px, 2.5vw, 34px);
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: -.045em;
}

#ctt_con .c-strategySection__head p {
    margin: 11px 0 0;
    color: var(--mission-muted);
    font-size: 15px;
}

#ctt_con .c-strategyGroup {
    margin-top: 32px;
}

#ctt_con .c-strategyGroup__title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 128px;
    min-height: 44px;
    margin: 0 auto 18px;
    padding: 8px 24px;
    border: 1px solid rgba(17, 155, 209, .22);
    border-radius: 999px;
    background: #fff;
    color: var(--mission-primary-dark);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -.035em;
    box-shadow: 0 6px 18px rgba(31, 70, 88, .06);
}

#ctt_con .c-strategyGroup--tasks {
    margin-top: 20px;
}

#ctt_con .c-strategyGroup--tasks .c-strategyGroup__title {
    border-color: rgba(210, 170, 61, .32);
    color: #8c6b17;
    background: #fffdf7;
}

#ctt_con .c-strategyGoals,
#ctt_con .c-strategyTasks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

#ctt_con .c-strategyGoal,
#ctt_con .c-strategyTask {
    overflow: hidden;
    border: 1px solid #e1e7e9;
    border-radius: 15px;
    background: #fff;
}

#ctt_con .c-strategyGoal {
    position: relative;
    isolation: isolate;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 18px;
    color: #243a44;
    text-align: center;
    background: linear-gradient(145deg, #eef8fc 0%, #f7fbfc 100%);
}

#ctt_con .c-strategyGoal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--strategy-image, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: .08;
    pointer-events: none;
}

#ctt_con .c-strategyGoal > * {
    position: relative;
    z-index: 1;
}

#ctt_con .c-strategyGoal:nth-child(2) {
    background: linear-gradient(145deg, #f0faf8 0%, #f8fbfa 100%);
}

#ctt_con .c-strategyGoal:nth-child(3) {
    background: linear-gradient(145deg, #f4f9ed 0%, #fafcf7 100%);
}

#ctt_con .c-strategyGoal:nth-child(4) {
    background: linear-gradient(145deg, #fff8e8 0%, #fdfbf5 100%);
}

#ctt_con .c-strategyGoal span {
    display: block;
    margin-bottom: 10px;
    color: var(--mission-primary);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
}

#ctt_con .c-strategyGoal strong {
    display: block;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 900;
    letter-spacing: -.035em;
}

#ctt_con .c-strategyTask {
    min-height: 178px;
    box-shadow: 0 7px 20px rgba(31, 70, 88, .045);
}

#ctt_con .c-strategyTask ul {
    margin: 0;
    padding: 12px 20px;
    list-style: none;
}

#ctt_con .c-strategyTask li {
    position: relative;
    margin: 0;
    padding: 13px 0 13px 21px;
    border-bottom: 1px dashed #e0e6e8;
    color: #4c5a60;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
}

#ctt_con .c-strategyTask li:last-child {
    border-bottom: 0;
}

#ctt_con .c-strategyTask li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 20px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mission-primary);
    box-shadow: 0 0 0 4px rgba(17, 155, 209, .08);
}

#ctt_con .c-strategyTask:nth-child(2) li::before {
    background: #59b8aa;
    box-shadow: 0 0 0 4px rgba(89, 184, 170, .09);
}

#ctt_con .c-strategyTask:nth-child(3) li::before {
    background: #91b456;
    box-shadow: 0 0 0 4px rgba(145, 180, 86, .10);
}

#ctt_con .c-strategyTask:nth-child(4) li::before {
    background: #d2aa3d;
    box-shadow: 0 0 0 4px rgba(210, 170, 61, .10);
}

#ctt_con .c-flowArrow--strategy {
    margin-top: 24px;
}

/* 반응형 */
@media (max-width: 1024px) {
    #ctt_con {
        padding-top: 48px;
    }

    #ctt_con .c-strategyGoals,
    #ctt_con .c-strategyTasks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #ctt.c-missionPage {
        padding-bottom: 68px;
    }

    #ctt_con {
        padding: 38px 16px 0;
        font-size: 15px;
    }

    #ctt_con .c-sectionLabel {
        margin-bottom: 14px;
        font-size: 19px;
    }

    #ctt_con .c-statementBox {
        min-height: 150px;
        padding: 30px 30px;
    }


    #ctt_con .c-statementBox p {
        font-size: 22px;
        line-height: 1.55;
    }

    #ctt_con .c-coreSection {
        margin-top: 58px;
    }

    #ctt_con .c-coreGrid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    #ctt_con .c-coreGrid li {
        min-height: 175px;
    }

    #ctt_con .c-strategySection {
        margin-top: 42px;
        padding: 34px 20px 24px;
    }

    #ctt_con .c-strategyGoals,
    #ctt_con .c-strategyTasks {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #ctt_con .c-strategyGoal {
        min-height: 126px;
    }

    #ctt_con .c-strategyTask {
        min-height: 0;
    }

    #ctt_con .c-flowArrow {
        width: 62px;
        height: 25px;
        margin-top: 20px;
    }

}

@media (max-width: 480px) {
    #ctt_con .c-statementBox p br {
        display: none;
    }

    #ctt_con .c-statementBox {
        min-height: 142px;
        padding: 28px 20px;
        border-radius: 14px;
    }

    #ctt_con .c-statementBox p {
        font-size: 20px;
    }

    #ctt_con .c-pillTitle {
        min-width: 130px;
        min-height: 44px;
        font-size: 19px;
    }

    #ctt_con .c-strategySection {
        border-radius: 16px;
    }

    #ctt_con .c-strategySection__head h3 {
        font-size: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ctt_con [data-aos] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* 첫 콘텐츠 상단 여백: status / org_chart와 동일한 시각 간격 */
#ctt.c-missionPage > #ctt_con {
    padding-top: 54px;
}