@charset "utf-8";


#ctt_con {
    /* =========================
     Typography tokens
  ========================= */

    /* 기본 글꼴/렌더링(선택) */
    --c-font: var(--font-main);
    --c-body: 16px;
    --c-body-lg: 17px;
    --c-small: 13px;

    /* 제목 스케일 */
    --c-title-xl: clamp(26px, 2.2vw + 14px, 34px);
    --c-title-lg: clamp(20px, 1.6vw + 12px, 26px);
    --c-title-md: clamp(17px, 1.0vw + 12px, 20px);

    /* 라인하이트 */
    --c-lh: 1.65;
    --c-lh-tight: 1.25;

    /* 텍스트 컬러 */
    --c-muted: rgba(23, 50, 72, .62);
    --c-text: var(--t-ink, #222);

    /* 섹션 간격 */
    --space-block: 24px;
}



#ctt_con {
    /* ===== Theme (map to existing site variables) ===== */
    --t-ink: var(--color-text, #222);
    --t-ink-soft: var(--color-muted, #777);

    /* 배경 계열(사이트에 맞춰 매핑) */
    --t-bg-0: var(--color-bg, #fff);
    --t-bg-1: var(--color-bg2, #f7f7f7);
    --t-bg-2: var(--color-bg3, #f1f9ff);

    /* 포인트 컬러(기존 메인 컬러 그대로) */
    --t-accent-1: var(--color-main, #0477BF);
    --t-accent-2: var(--color-sub-2, var(--color-main, #0477BF));

    /* 알파(투명도) 버전도 “기존 포인트” 기반으로 */
    --t-accent-a12: color-mix(in srgb, var(--color-main) 12%, transparent);
    --t-accent-a18: color-mix(in srgb, var(--color-main) 18%, transparent);
    --t-accent-a35: color-mix(in srgb, var(--color-main) 35%, transparent);

    /* 텍스트 계열 알파 */
    --t-ink-a10: rgba(0, 0, 0, .10);
    --t-ink-a12: rgba(0, 0, 0, .12);

    /* ===== Shape ===== */
    --r-node: 14px;
    --r-icon: 10px;

    /* ===== Spacing & Size ===== */
    --node-py: 14px;
    --node-px: 16px;
    --node-minh: 56px;

    --icon-box: 32px;
    --icon-size: 20px;

    /* ===== Typography ===== */
    --fw-node: 800;
    --ls-node: -0.2px;
    --lh-tight: 1.25;

    /* ===== Shadow (keep as-is) ===== */
    --sh-node: 0 14px 34px rgba(0, 0, 0, .08),
        0 2px 8px rgba(0, 0, 0, .06);
    --sh-node-hover: 0 20px 46px rgba(0, 0, 0, .10),
        0 4px 12px rgba(0, 0, 0, .08);

    /* ===== Org Chart Line ===== */
    --org-line-w: 2px;
    --org-line-style: dashed;
    --org-line-color: rgba(20, 110, 166, .35);

    /* (선택) dashed 패턴 제어 */
    --dash-on: 8px;
    --dash-off: 10px;
}


#ctt_con {
    /* ===== Premium Neutral + Blue ===== */
    --p-ink: var(--color-text);
    --p-ink-muted: rgba(23, 50, 72, .62);

    --p-surface: var(--color-surface-soft-2);
    /* 배경 */
    --p-card: #ffffff;
    /* 카드 */
    --p-tint: var(--color-surface-soft);
    /* 은은한 베이지 틴트 */

    --p-accent: var(--color-main);
    /* 블루 포인트(채도 낮춘 편) */
    --p-accent-2: var(--color-sub-1);
    /* 라이트 블루 */
    --p-accent-a: rgba(20, 110, 166, .22);

    --p-line: rgba(23, 50, 72, .10);
    --p-line-2: rgba(20, 110, 166, .14);

    --r-card: 18px;
    --r-pill: 999px;

    --sh-1: 0 10px 30px rgba(23, 50, 72, .06);
    --sh-2: 0 18px 50px rgba(23, 50, 72, .10);

    /* 조직도 라인 */
    --org-line-w: 1px;
    /* 2px → 1px로 섬세하게 */
    --org-line-style: dashed;
    --org-line-color: rgba(20, 110, 166, .35);
    /* 더 은은 */
}

#ctt_con {
    /* ...기존 premium 토큰들... */

    /* ===== Tones (4-step) =====
     - surface: 카드 배경 그라데이션에 쓰는 톤
     - border: 테두리 톤
     - accent: 포인트 바/하이라이트 톤
  */
    --tone-main-s1: #ffffff;
    --tone-main-s2: var(--color-surface-soft);
    --tone-main-border: rgba(20, 110, 166, .18);
    --tone-main-accent: var(--color-title-line);

    --tone-sub1-s1: #ffffff;
    --tone-sub1-s2: var(--color-surface-soft);
    /* 조금 더 웜 */
    --tone-sub1-border: rgba(20, 110, 166, .14);
    --tone-sub1-accent: rgba(20, 110, 166, .10);

    --tone-sub2-s1: #ffffff;
    --tone-sub2-s2: var(--color-surface-soft);
    /* 조금 더 뉴트럴 */
    --tone-sub2-border: rgba(23, 50, 72, .10);
    --tone-sub2-accent: rgba(23, 50, 72, .06);

    --tone-sub3-s1: #ffffff;
    --tone-sub3-s2: var(--color-surface-soft-2);
    /* 아주 은은 */
    --tone-sub3-border: rgba(20, 110, 166, .12);
    --tone-sub3-accent: rgba(20, 110, 166, .08);
}

/* =========================
   Volunteer Page
========================= */
#ctt_con{
    font-size: var(--c-body);
    line-height: var(--c-lh);
    color: var(--p-ink, var(--color-text));
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* =========================
   Business Page
========================= */
#ctt_con .c-businessIntro,
#ctt_con .c-section{
    margin-bottom: 50px;
}

#ctt_con .c-businessIntro > h2,
#ctt_con .c-section > h2{
    display: inline-block;
    width: fit-content;
    position: relative;
    margin: var(--space-block, 24px) 0 14px;
    padding-bottom: 12px;
    line-height: var(--c-lh-tight, 1.25);
    color: var(--p-ink, var(--color-text));
    letter-spacing: -0.4px;
    font-size: var(--c-title-lg, 26px);
    font-weight: 800;
}

#ctt_con .c-businessIntro > h2::after,
#ctt_con .c-section > h2::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--color-title-line);
    opacity: .95;
}

#ctt_con .c-businessHero{
    position: relative;
    overflow: hidden;
    padding: 70px;
    border-radius: var(--r-card, 18px);
    box-shadow: var(--sh-1, 0 10px 30px rgba(23, 50, 72, .06));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#ctt_con .c-businessHero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--content-hero-overlay);
    z-index: 0;
}

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

#ctt_con .c-businessHero--health{
    background-image: url("./img/health-hero-bg.jpg");
}

#ctt_con .c-businessHero__eyebrow{
    margin-bottom: 8px;
    font-size: var(--c-small, 13px);
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--p-ink-muted, rgba(23, 50, 72, .64));
}

#ctt_con .c-businessHero__title{
    font-size: clamp(24px, 2vw + 12px, 34px);
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--p-ink, var(--color-text));
}

#ctt_con .c-businessLead{
    margin-top: 18px;
    padding: 20px 22px;
    border: 1px solid var(--tone-sub1-border, rgba(20, 110, 166, .14));
    border-radius: var(--r-card, 18px);
    background: linear-gradient(180deg, #fff 0%, var(--color-surface-soft-2) 160%);
    box-shadow: var(--sh-1, 0 10px 30px rgba(23, 50, 72, .06));
}

#ctt_con .c-businessLead p{
    margin: 0;
    line-height: 1.85;
    color: var(--p-ink, var(--color-text));
}

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

#ctt_con .c-serviceCard{
    position: relative;
    padding: 22px 20px 20px;
    border: 1px solid var(--tone-sub2-border, rgba(23, 50, 72, .10));
    border-radius: var(--r-card, 18px);
    background: linear-gradient(180deg, var(--tone-sub2-s1, #fff) 0%, var(--tone-sub2-s2, var(--color-surface-soft)) 150%);
    box-shadow: var(--sh-1, 0 10px 30px rgba(23, 50, 72, .06));
    overflow: hidden;
}

#ctt_con .c-serviceCard::before{
    content: "";
    position: absolute;
    left: 18px;
    bottom: 0;
    width: calc(100% - 36px);
    height: 5px;
    border-radius: 999px 999px 0 0;
    background: var(--color-title-line);
}

#ctt_con .c-serviceCard__num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 30px;
    padding: 0 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(20, 110, 166, .10);
    color: var(--color-main);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
}

#ctt_con .c-serviceCard__title{
    margin-bottom: 12px;
    color: var(--p-ink, var(--color-text));
    font-size: var(--c-body-lg, 17px);
    font-weight: 900;
    line-height: 1.45;
}

#ctt_con .c-serviceList{
    margin: 0;
    padding: 0;
    list-style: none;
}

#ctt_con .c-serviceList li{
    position: relative;
    padding-left: 16px;
    color: var(--p-ink, var(--color-text));
    line-height: 1.8;
}

#ctt_con .c-serviceList li + li{
    margin-top: 6px;
}

#ctt_con .c-serviceList li::before{
    content: "";
    position: absolute;
    left: 0;
    top: .8em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-main);
}

@media (max-width: 768px){
    #ctt_con .c-businessHero{
        padding: 42px 16px;
    }

    #ctt_con .c-businessHero__title{
        font-size: clamp(22px, 4vw, 28px);
    }

    #ctt_con .c-businessLead{
        padding: 16px;
    }

    #ctt_con .c-serviceGrid{
        grid-template-columns: 1fr;
    }

    #ctt_con .c-serviceCard{
        padding: 20px 16px 18px;
    }
}

#ctt_con .c-flowSteps{
    display: grid;
    gap: 12px;
    padding: 20px;
}

#ctt_con .c-flowStep{
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--tone-sub3-border, rgba(20, 110, 166, .12));
    border-radius: 16px;
    background: linear-gradient(180deg, var(--tone-sub3-s1, #fff) 0%, var(--tone-sub3-s2, var(--color-surface-soft-2)) 140%);
}

#ctt_con .c-flowStep__num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--color-sub-1), var(--color-main));
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
}

#ctt_con .c-flowStep__text{
    color: var(--p-ink, var(--color-text));
    font-size: var(--c-body, 16px);
    font-weight: 700;
    line-height: 1.6;
}

@media (max-width: 768px){
    #ctt_con .c-flowSteps{
        padding: 16px;
    }

    #ctt_con .c-flowStep{
        grid-template-columns: 52px 1fr;
        gap: 12px;
        padding: 12px 14px;
    }

    #ctt_con .c-flowStep__num{
        height: 36px;
        font-size: 12px;
    }
}

#ctt_con .c-contactList{
    display: grid;
    gap: 14px;
    margin-bottom: 30px;
}

#ctt_con .c-contactItem{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--tone-sub2-border, rgba(23, 50, 72, .10));
    border-radius: 16px;
    background: linear-gradient(180deg, var(--tone-sub2-s1, #fff) 0%, var(--tone-sub2-s2, var(--color-surface-soft)) 140%);
    box-shadow: var(--sh-1, 0 10px 30px rgba(23, 50, 72, .06));
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#ctt_con a.c-contactItem:hover{
    transform: translateY(-1px);
    box-shadow: var(--sh-2, 0 18px 50px rgba(23, 50, 72, .10));
    border-color: rgba(20, 110, 166, .24);
}

#ctt_con .c-contactItem__icon{
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--color-sub-1), var(--color-main));
    color: #fff;
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(20, 110, 166, .20);
}

#ctt_con .c-contactItem__body{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#ctt_con .c-contactItem__label{
    font-size: var(--c-small, 13px);
    font-weight: 800;
    color: var(--p-ink-muted, rgba(23, 50, 72, .64));
    letter-spacing: .04em;
}

#ctt_con .c-contactItem__value{
    font-size: var(--c-body-lg, 17px);
    font-weight: 900;
    color: var(--p-ink, var(--color-text));
    line-height: 1.6;
    word-break: keep-all;
}

@media (max-width: 768px){
    #ctt_con .c-contactItem{
        padding: 16px;
        gap: 14px;
    }

    #ctt_con .c-contactItem__icon{
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    #ctt_con .c-contactItem__value{
        font-size: 16px;
    }
}

#ctt_con .c-processGrid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}

#ctt_con .c-processCard{
    position: relative;
    padding: 22px 20px 20px;
    border: 1px solid var(--tone-sub2-border, rgba(23, 50, 72, .10));
    border-radius: var(--r-card, 18px);
    background: linear-gradient(180deg, var(--tone-sub2-s1, #fff) 0%, var(--tone-sub2-s2, var(--color-surface-soft)) 150%);
    box-shadow: var(--sh-1, 0 10px 30px rgba(23, 50, 72, .06));
    text-align: center;
    overflow: hidden;
}

#ctt_con .c-processCard::before{
    content: "";
    position: absolute;
    left: 18px;
    top: 0;
    width: calc(100% - 36px);
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--color-title-line);
}

#ctt_con .c-processCard__num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 30px;
    padding: 0 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(20, 110, 166, .10);
    color: var(--color-main);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
}

#ctt_con .c-processCard__icon{
    width: 66px;
    height: 66px;
    margin: 0 auto 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--color-sub-1), var(--color-main));
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 20px rgba(20, 110, 166, .18);
}

#ctt_con .c-processCard__title{
    margin-bottom: 8px;
    color: var(--p-ink, var(--color-text));
    font-size: var(--c-body-lg, 17px);
    font-weight: 900;
    line-height: 1.45;
}

#ctt_con .c-processCard__desc{
    color: var(--p-ink, var(--color-text));
    font-size: var(--c-body, 16px);
    line-height: 1.75;
}

@media (max-width: 768px){
    #ctt_con .c-processGrid{
        grid-template-columns: 1fr;
    }

    #ctt_con .c-processCard{
        padding: 20px 16px 18px;
    }

    #ctt_con .c-processCard__icon{
        width: 58px;
        height: 58px;
        font-size: 22px;
    }
}

#ctt_con .c-guideBanner{
    margin-top: 28px;
    border-radius: var(--r-card, 18px);
    overflow: hidden;
    box-shadow: var(--sh-1, 0 10px 30px rgba(23, 50, 72, .06));
}

#ctt_con .c-guideBanner img{
    display: block;
    width: 100%;
    height: auto;
}