/* ==========================================================================
   연합회 소개 — bbs/ttodrak-union-intro.php
   Zeplin PC (Web 1280): https://app.zeplin.io/project/621705fa11c4f4941702a483/screen/69e98f24e8bf62cf82efd3c0
   Zeplin MO (360): https://app.zeplin.io/project/621705fa11c4f4941702a483/screen/69e9a7aed0fc68c0895050f8
   회장 인사말 PC: https://app.zeplin.io/project/621705fa11c4f4941702a483/screen/6a0d5c5b2a8a725029f928a3
   회장 인사말 MO: https://app.zeplin.io/project/621705fa11c4f4941702a483/screen/6a0d5c5d94dcc730f9bb6fa9
   폰트: Pretendard Variable · 태그라인 Zeplin GalaxyXOwnglyph_sumii-Rg (자체 호스팅 + Noto Serif KR 폴백)
   PC: 뷰포트 기준 가운데 정렬, 최대폭 1280px, 본문 컬럼 1036 + 좌우 인셋 122
   MO: 본문 max-width 328px 가운데 정렬(Zeplin 컬럼) · 임원 3열 그리드
   ========================================================================== */

/*
 * Zeplin 텍스트 스타일 postscriptName: GalaxyXOwnglyph_sumii-Rg (갤럭시X온글잎 숨이체)
 * → theme/basic/fonts/ 에 파일 배치 · @font-face url 은 CSS와 같은 basic 폴더 기준 fonts/ (../fonts 아님)
 */
@font-face {
    font-family: "GalaxyXOwnglyph_sumii";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("GalaxyXOwnglyph_sumii-Rg"),
        local("GalaxyXOwnglyph_sumii Rg"),
        url("fonts/GalaxyXOwnglyph_sumii-Rg.woff2") format("woff2"),
        url("fonts/GalaxyXOwnglyph_sumii.woff2") format("woff2"),
        url("fonts/GalaxyXOwnglyph_sumii-Rg.woff") format("woff"),
        url("fonts/GalaxyXOwnglyph_sumii.woff") format("woff"),
        url("fonts/GalaxyXOwnglyph_sumii-Rg.ttf") format("truetype"),
        url("fonts/GalaxyXOwnglyph_sumii.ttf") format("truetype");
}

/*
 * 그누 default.css — body.ttdr-home-body 미적용 시에도 본문 노출
 */
body:has(.tt6-page--union) #hd,
body:has(.tt6-page--union) #wrapper,
body:has(.tt6-page--union) #ft {
    min-width: 0 !important;
    max-width: 100%;
}

body:has(.tt6-page--union) #wrapper {
    background: #fff !important;
}

body:has(.tt6-page--union) #container_wr {
    width: 100% !important;
    max-width: 100% !important;
}

body:has(.tt6-page--union) #container {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 페이지 프레임: PC 최대 1280 (Zeplin artboard) */
.tt6-page.tt6-page--union {
    --ttl-union-tagline-ff: "GalaxyXOwnglyph_sumii", "GalaxyXOwnglyph_sumii-Rg", "Noto Serif KR", Georgia, "Apple SD Gothic Neo", serif;
    /* 제플린 Web 1280: Rectangle 2464·2465·2466·2477 (screen 69e98f24…) */
    --ttl-union-panel-radius: 48px;
    --ttl-union-hero-bg: #e2f0d9;
    --ttl-union-cream: #fef5e4;
    --ttl-union-mint: #bff4f4;
    --ttl-union-pink: #fee4ed;
    --ttl-union-portrait-ring: rgb(254 152 103);
    --ttl-union-hero-wash-top: rgb(218 243 195);
    --ttl-union-hero-wash-bottom: rgb(208 243 184 / 0);
    box-sizing: border-box;
    width: 100%;
    max-width: 1920px !important;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    overflow-x: clip;
    font-family: Pretendard, "PretendardVariable", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tt6-page--union + .ttdr-home__footer {
    margin-top: 0;
}

/* 연합회 게시판(B61·B66): 서브헤드만 — 본문은 #bo_list·#bo_v */
.tt6-page--union-board-subhd {
    max-width: none !important;
    margin-bottom: 0;
}

body.ttdr-home-body #container:has(.tt6-page--union-board-subhd) {
    padding-top: 0;
}

body.ttdr-home-body #container:has(.tt6-page--union-board-subhd) #bo_list,
body.ttdr-home-body #container:has(.tt6-page--union-board-subhd) #bo_v,
body.ttdr-home-body #container:has(.tt6-page--union-board-subhd) #bo_w {
    box-sizing: border-box;
    width: 100%;
    max-width: 1036px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Component 49 (PC 1280×130) / Component 50 (MO 360×100) ── */
.tt6-page--union .tt6-subhd {
    box-sizing: border-box;
    width: 100%;
    min-height: 130px;
    background: #e1f9fe;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tt6-page--union .tt6-subhd__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px max(16px, env(safe-area-inset-left, 0px)) 24px max(16px, env(safe-area-inset-right, 0px));
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    text-align: center;
    min-width: 0;
}

.tt6-page--union .tt6-subhd__brand {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    min-width: 0;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

.tt6-page--union .tt6-subhd__brand:hover,
.tt6-page--union .tt6-subhd__brand:focus-visible {
    text-decoration: none;
}

.tt6-page--union .tt6-subhd__brand:focus-visible {
    outline: 2px solid rgb(13, 175, 222);
    outline-offset: 3px;
    border-radius: 4px;
}

.tt6-page--union .tt6-subhd__logo {
    flex-shrink: 0;
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.tt6-page--union .tt6-page-title {
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 28px;
    line-height: 33px;
    font-weight: 400;
    color: #000;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 1068~1279: 1036 컬럼 중앙 유지 */
@media (min-width: 1068px) and (max-width: 1279px) {
    .tt6-page--union .tt6-subhd__inner {
        padding-left: max(16px, calc((100% - 1036px) / 2));
        padding-right: max(16px, calc((100% - 1036px) / 2));
    }
}

@media (min-width: 1280px) {
    .tt6-page--union .tt6-subhd__inner {
        padding-left: 122px;
        padding-right: 122px;
    }
}

@media (min-width: 768px) and (max-width: 1067px) {
    .tt6-page--union .tt6-page-title {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* ── 본문 래퍼: 서브헤더 하단→패널 상단 80px (y 319→399), 하단 100px ── */
.tt6-page--union .ttl-union {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 80px max(16px, calc((100% - 1036px) / 2)) 100px;
}

.tt6-page--union .ttl-union__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1036px;
    margin: 0 auto;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

@media (min-width: 768px) {
    .tt6-page--union .ttl-union-hero {
        border-radius: var(--ttl-union-panel-radius) var(--ttl-union-panel-radius) 0 0;
        overflow: hidden;
    }

    .tt6-page--union .ttl-union-album {
        border-radius: 0 0 var(--ttl-union-panel-radius) var(--ttl-union-panel-radius);
    }
}

.tt6-page--union .ttl-union-hero {
    width: 100%;
}

.tt6-page--union .ttl-union-hero__stack {
    box-sizing: border-box;
    margin: 0 auto 20px;
    padding: 0;
    text-align: center;
}

/* Zeplin 상단: 원형 엠블럼 + 한 줄 제목 — 또는 brand-bar 합성 PNG */
.tt6-page--union .ttl-union-hero__brand {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.tt6-page--union .ttl-union-hero__brand--stack {
    margin: 0 auto 18px;
    max-width: 100%;
}

.tt6-page--union .ttl-union-hero__brand--stack.ttl-union-hero__brand--bar-only {
    margin-bottom: 22px;
}

.tt6-page--union .ttl-union-hero__emblem {
    display: block;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: contain;
}

.tt6-page--union .ttl-union-hero__brand-title {
    margin: 0;
    max-width: 684px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #10100b;
    word-break: keep-all;
}

.tt6-page--union .ttl-union-hero__brand-title--stack {
    text-align: center;
    max-width: min(332px, 100%);
}

.tt6-page--union .ttl-union-hero__brand-bar {
    display: block;
    width: min(300px, 100%);
    height: auto;
    margin: 0 auto;
}

.tt6-page--union .ttl-union-hero__logo {
    margin: 0;
}

.tt6-page--union .ttl-union-hero__logo--stack {
    margin: 0 auto 8px;
    max-width: 215px;
}

.tt6-page--union .ttl-union-hero__logo--stack .ttl-union-hero__logo-img {
    display: block;
    width: 100%;
    height: auto;
}

.tt6-page--union .ttl-union-hero__tagline--stack {
    margin: 0 auto 12px;
    max-width: 292px;
    font-family: var(--ttl-union-tagline-ff);
    font-size: 24px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: -0.48px;
    color: #333;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.tt6-page--union .ttl-union-hero__lead--stack.ttl-union-hero__lead--mo {
    margin: 0 auto;
    max-width: 288px;
    font-family: Pretendard, "PretendardVariable", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #5c754f;
    text-align: center;
}

.tt6-page--union .ttl-union-hero__stage {
    position: relative;
    width: 100%;
    max-width: 1036px;
    margin: 0 auto;
}

.tt6-page--union .ttl-union-hero__visual {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 328px;
    margin: 0 auto;
    overflow: hidden;
    aspect-ratio: 328 / 340;
    background: rgb(229 229 229);
}

.tt6-page--union .ttl-union-hero__visual .ttl-union-hero__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.tt6-page--union .ttl-union-hero__photo--empty {
    min-height: 200px;
    height: 100%;
    background: linear-gradient(145deg, #daf3c3 0%, #e8f5e0 40%, #dceee0 100%);
}

/* Zeplin Rectangle 2477: linear #daf3c3 → transparent #d0f3b8 */
.tt6-page--union .ttl-union-hero__wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        var(--ttl-union-hero-wash-top) 0%,
        var(--ttl-union-hero-wash-bottom) 100%
    );
}

.tt6-page--union .ttl-union-hero__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 16px;
    pointer-events: none;
}

.tt6-page--union .ttl-union-hero__brand--overlay,
.tt6-page--union .ttl-union-hero__tagline--overlay,
.tt6-page--union .ttl-union-hero__lead--overlay {
    display: none;
}

/* Zeplin 히어로 pill — PC https://app.zeplin.io/project/621705fa11c4f4941702a483/screen/69e98f24e8bf62cf82efd3c0 · MO https://app.zeplin.io/project/621705fa11c4f4941702a483/screen/69e9a7aed0fc68c0895050f8 */
.tt6-page--union .ttl-union-hero__nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: auto;
}

.tt6-page--union .ttl-union-hero__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-width: 132px;
    min-height: 48px;
    padding: 0 14px;
    border: 2px solid #9da983;
    border-radius: 24px;
    background: #fff;
    color: #47452a !important;
    font-family: Pretendard, "PretendardVariable", "Pretendard Variable", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    text-decoration: none !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tt6-page--union .ttl-union-hero__pill--yt {
    font-size: 14px;
    line-height: 16px;
}

.tt6-page--union .ttl-union-hero__pill-ico {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.tt6-page--union .ttl-union-hero__pill-txt {
    flex: 0 0 auto;
}

.tt6-page--union .ttl-union-hero__pill--yt:hover,
.tt6-page--union .ttl-union-hero__pill--yt:focus-visible {
    border-color: transparent;
    background: #474747;
    color: #fff !important;
}

@media (min-width: 768px) {
    .tt6-page--union .ttl-union-hero {
        background: var(--ttl-union-hero-bg);
    }

    .tt6-page--union .ttl-union-hero__stack {
        display: none;
    }

    .tt6-page--union .ttl-union-hero__visual {
        max-width: 1036px;
        margin: 0 auto;
        aspect-ratio: 1036 / 621;
        border-radius: var(--ttl-union-panel-radius) var(--ttl-union-panel-radius) 0 0;
    }

    /* Zeplin PC: 브랜드 y≈74·태그↔리드 22px·리드↔YT 20px (히어로 top 기준) */
    .tt6-page--union .ttl-union-hero__overlay {
        inset: 0;
        bottom: auto;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 74px 20px 32px;
    }

    .tt6-page--union .ttl-union-hero__brand--overlay {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 0 0 34px;
        max-width: 720px;
    }

    .tt6-page--union .ttl-union-hero__brand--overlay.ttl-union-hero__brand--bar-only {
        gap: 0;
    }

    .tt6-page--union .ttl-union-hero__brand--overlay .ttl-union-hero__brand-bar {
        width: min(332px, 86vw);
    }

    .tt6-page--union .ttl-union-hero__brand-title--overlay {
        margin: 0;
        text-align: left;
    }

    .tt6-page--union .ttl-union-hero__tagline--overlay {
        display: block;
        margin: 0 0 22px;
        max-width: 684px;
        font-family: var(--ttl-union-tagline-ff);
        font-size: 36px;
        font-weight: 400;
        line-height: 44px;
        letter-spacing: -0.02em;
        text-align: center;
        color: #333;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .tt6-page--union .ttl-union-hero__lead--overlay.ttl-union-hero__lead--pc {
        display: block;
        margin: 0 auto 20px;
        max-width: 684px;
        font-family: Pretendard, "PretendardVariable", "Pretendard Variable", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        color: #5c754f;
    }

    .tt6-page--union .ttl-union-hero__nav {
        gap: 8px;
    }

    .tt6-page--union .ttl-union-hero__pill {
        min-width: 196px;
        padding: 0 28px;
        border-color: #838c66;
        color: #333 !important;
        font-size: 18px;
        line-height: 21px;
    }

    .tt6-page--union .ttl-union-hero__pill--yt {
        font-size: 18px;
        line-height: 21px;
    }
}

/* ── 임원 — 크림 · Zeplin Rectangle 2464 (1036×436, 슬롯 gap 10) ── */
.tt6-page--union .ttl-union-board {
    margin-top: 0;
    padding: 60px 0 60px;
    background: var(--ttl-union-cream);
    box-sizing: border-box;
}

.tt6-page--union .ttl-union-board__h2 {
    margin: 0 0 20px;
    font-family: "Pretendard Variable", Pretendard, "PretendardVariable", sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 29px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #333;
}

.tt6-page--union .ttl-union-board__slider {
    max-width: 100%;
}

.tt6-page--union .ttl-union-board__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.tt6-page--union .ttl-union-board__viewport::-webkit-scrollbar {
    display: none;
}

.tt6-page--union .ttl-union-board__viewport--fit {
    overflow-x: hidden;
}

.tt6-page--union .ttl-union-board__grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0 2px;
    box-sizing: border-box;
}

.tt6-page--union .ttl-union-board__page {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

.tt6-page--union .ttl-union-board__page-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

.tt6-page--union .ttl-union-board__grid--center {
    justify-content: center;
}

.tt6-page--union .ttl-union-board__nav-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.tt6-page--union .ttl-union-board__nav {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    line-height: 0;
}

.tt6-page--union .ttl-union-board__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Zeplin SVG: 기본·hover img 겹침 (theme URL — CSS background 상대경로 이슈 회피) */
.tt6-page--union .ttl-union-board__nav-ico {
    display: block;
    width: 48px;
    height: 48px;
}

.tt6-page--union .ttl-union-board__nav-ico--hover {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tt6-page--union .ttl-union-board__nav:has(.ttl-union-board__nav-ico--hover):not(:disabled):hover .ttl-union-board__nav-ico--default,
.tt6-page--union .ttl-union-board__nav:has(.ttl-union-board__nav-ico--hover):not(:disabled):focus-visible .ttl-union-board__nav-ico--default {
    opacity: 0;
}

.tt6-page--union .ttl-union-board__nav:has(.ttl-union-board__nav-ico--hover):not(:disabled):hover .ttl-union-board__nav-ico--hover,
.tt6-page--union .ttl-union-board__nav:has(.ttl-union-board__nav-ico--hover):not(:disabled):focus-visible .ttl-union-board__nav-ico--hover {
    opacity: 1;
}

.tt6-page--union .ttl-union-board__nav-fallback {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-sizing: border-box;
}

.tt6-page--union .ttl-union-board__nav-fallback--prev {
    background: #fff;
    border: 1px solid #dfdfdf;
    position: relative;
}

.tt6-page--union .ttl-union-board__nav-fallback--prev::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    margin-left: -3px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
}

.tt6-page--union .ttl-union-board__nav-fallback--next {
    background: #fff;
    border: 1px solid #dfdfdf;
    position: relative;
}

.tt6-page--union .ttl-union-board__nav-fallback--next::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    margin-left: -7px;
    border-right: 2px solid #333;
    border-top: 2px solid #333;
    transform: rotate(45deg);
    transition: border-color 0.15s ease;
}

.tt6-page--union .ttl-union-board__nav--prev:not(:disabled):hover .ttl-union-board__nav-fallback,
.tt6-page--union .ttl-union-board__nav--prev:not(:disabled):focus-visible .ttl-union-board__nav-fallback,
.tt6-page--union .ttl-union-board__nav--next:not(:disabled):hover .ttl-union-board__nav-fallback,
.tt6-page--union .ttl-union-board__nav--next:not(:disabled):focus-visible .ttl-union-board__nav-fallback {
    background: #ff5151;
    border-color: #ff5151;
}

.tt6-page--union .ttl-union-board__nav--prev:not(:disabled):hover .ttl-union-board__nav-fallback--prev::after,
.tt6-page--union .ttl-union-board__nav--prev:not(:disabled):focus-visible .ttl-union-board__nav-fallback--prev::after,
.tt6-page--union .ttl-union-board__nav--next:not(:disabled):hover .ttl-union-board__nav-fallback--next::after,
.tt6-page--union .ttl-union-board__nav--next:not(:disabled):focus-visible .ttl-union-board__nav-fallback--next::after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    border-right-color: #fff;
    border-top-color: #fff;
}

.tt6-page--union .ttl-union-board__portrait {
    box-sizing: border-box;
    border: 2px solid var(--ttl-union-portrait-ring);
    overflow: hidden;
    background: rgb(217 221 225);
    flex-shrink: 0;
}

.tt6-page--union .ttl-union-board__portrait-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PC: 셀 132px · 페이지 래퍼 display:contents · 스냅 · 뷰포트 5명 폭 · 초상/텍스트 */
@media (min-width: 768px) {
    .tt6-page--union .ttl-union-board__page,
    .tt6-page--union .ttl-union-board__page-grid {
        display: contents;
    }

    .tt6-page--union .ttl-union-board__cell {
        flex: 0 0 auto;
        min-width: 100px;
        max-width: 160px;
        width: 132px;
        text-align: center;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    .tt6-page--union .ttl-union-board__viewport {
        max-width: calc(132px * 5 + 10px * 4);
        margin-left: auto;
        margin-right: auto;
    }

    .tt6-page--union .ttl-union-board__portrait {
        width: 132px;
        height: 132px;
        margin: 0 auto 12px;
        border-radius: 50%;
    }

    .tt6-page--union .ttl-union-board__role {
        display: block;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: #333;
        margin-bottom: 6px;
    }

    .tt6-page--union .ttl-union-board__name {
        display: block;
        font-size: 16px;
        font-weight: 600;
        line-height: 19px;
        color: #000;
    }

    .tt6-page--union .ttl-union-board__foot {
        margin-top: 28px;
        text-align: center;
    }
}

/* Zeplin Component 100/103 — 공지·앨범·임원 더보기 pill */
.tt6-page--union .ttl-union-board__more {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 156px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 24px;
    border: 1px solid rgb(223 223 223);
    background: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: #333;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* ── 공지 — Zeplin Rectangle 2465 (#bff4f4) · 제목 → 목록 → 더보기(PC) ── */
.tt6-page--union .ttl-union-notice {
    margin-top: 0;
    padding: 60px max(16px, calc((100% - 684px) / 2)) 60px;
    box-sizing: border-box;
    background: var(--ttl-union-mint);
}

.tt6-page--union .ttl-union-notice__foot {
    margin: 0;
    padding: 0;
}

.tt6-page--union .ttl-union-notice__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #111;
}

.tt6-page--union .ttl-union-notice__h2 {
    margin: 0;
    font-family: "Pretendard Variable", Pretendard, "PretendardVariable", sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 29px;
    letter-spacing: -0.02em;
    color: #333;
}

.tt6-page--union .ttl-union-notice__more {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 156px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 24px;
    border: 1px solid rgb(223 223 223);
    background: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: #333;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tt6-page--union .ttl-union-notice__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tt6-page--union .ttl-union-notice__row {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
    font-family: Pretendard, "PretendardVariable", "Pretendard Variable", sans-serif;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.tt6-page--union .ttl-union-notice__row:last-child {
    border-bottom: none;
}

.tt6-page--union .ttl-union-notice__ttl-link {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    color: #000;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
}

.tt6-page--union .ttl-union-notice__ttl-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tt6-page--union .ttl-union-notice__ttl-link:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(11, 124, 140, 0.35);
    border-radius: 4px;
    text-decoration: none;
}

.tt6-page--union .ttl-union-notice__date {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #000;
}

@media (min-width: 768px) {
    .tt6-page--union .ttl-union-notice__head {
        display: block;
        margin-bottom: 46px;
        padding-bottom: 0;
        border-bottom: none;
        text-align: center;
    }

    .tt6-page--union .ttl-union-notice__h2 {
        text-align: center;
    }

    .tt6-page--union .ttl-union-notice__list {
        width: 100%;
        max-width: 684px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .tt6-page--union .ttl-union-notice__foot {
        margin-top: 28px;
        text-align: center;
    }

    .tt6-page--union .ttl-union-notice__more {
        border-radius: 24px;
    }
}

/* ── 앨범 — 핑크 톤 · 더보기는 공지와 동일(흰 pill·회색 테두리) ── */
.tt6-page--union .ttl-union-album {
    margin-top: 0;
    padding: 60px max(16px, calc((100% - 684px) / 2)) 56px;
    background: var(--ttl-union-pink);
    box-sizing: border-box;
}

.tt6-page--union .ttl-union-album__h2 {
    margin: 0 0 20px;
    font-family: "Pretendard Variable", Pretendard, "PretendardVariable", sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 29px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #333;
}

.tt6-page--union .ttl-union-album__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tt6-page--union .ttl-union-album__item {
    min-width: 0;
}

.tt6-page--union .ttl-union-album__link {
    display: block;
    text-decoration: none;
    color: inherit;
    outline: none;
}

.tt6-page--union .ttl-union-album__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 156px;
    margin: 0 auto 16px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #c9c9c9;
    box-sizing: border-box;
}

/* aspect-ratio 박스 + 자식 height:% 는 WebKit 등에서 0 높이로 깨질 수 있음 → 채우기는 absolute */
.tt6-page--union .ttl-union-album__thumb-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tt6-page--union .ttl-union-album__cap {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    color: #000;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s ease;
}

/* accent 데이터는 마크업에 남겨도 기본 색은 본문과 동일 · 빨강은 hover/focus 시에만 */
.tt6-page--union .ttl-union-album__cap--accent {
    color: #000;
}

@media (hover: hover) and (pointer: fine) {
    .tt6-page--union .ttl-union-album__item:hover .ttl-union-album__cap {
        color: #ff5151;
    }
}

.tt6-page--union .ttl-union-album__item:focus-within .ttl-union-album__cap {
    color: #ff5151;
}

.tt6-page--union .ttl-union-album__date {
    margin: 0;
    font-size: 13px;
    line-height: 15px;
    color: #000;
    transition: color 0.15s ease;
}

.tt6-page--union .ttl-union-album__foot {
    margin-top: 28px;
    text-align: center;
}

.tt6-page--union .ttl-union-album__more {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 156px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 24px;
    border: 1px solid rgb(223 223 223);
    background: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: #333;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* pill CTA hover — 회장 인사말·공지/앨범 더보기 */
.tt6-page--union .ttl-union-hero__pill:not(.ttl-union-hero__pill--yt):hover,
.tt6-page--union .ttl-union-hero__pill:not(.ttl-union-hero__pill--yt):focus-visible,
.tt6-page--union .ttl-union-board__more:hover,
.tt6-page--union .ttl-union-board__more:focus-visible,
.tt6-page--union .ttl-union-notice__more:hover,
.tt6-page--union .ttl-union-notice__more:focus-visible,
.tt6-page--union .ttl-union-album__more:hover,
.tt6-page--union .ttl-union-album__more:focus-visible {
    border-color: transparent;
    background: #ff5151;
    color: #fff !important;
    text-decoration: none !important;
}

/* MO: 비미디어·PC 미디어 규칙 뒤에 두어 max-width 767에서 우선 적용 */
@media (max-width: 767px) {
    .tt6-page--union .tt6-subhd {
        min-height: 100px;
    }

    /* Zeplin Component 50: 바 100px · 제목 1줄 20px — 가로 전폭 사용 */
    .tt6-page--union .tt6-subhd__inner {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 36px max(12px, env(safe-area-inset-left, 0px)) 35px max(12px, env(safe-area-inset-right, 0px));
        justify-content: center;
        gap: 8px 10px;
        text-align: center;
    }

    .tt6-page--union .tt6-subhd__brand {
        flex-wrap: nowrap;
        max-width: 100%;
        gap: 6.5px;
    }

    .tt6-page--union .tt6-page-title {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.4px;
        text-align: center;
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
    }

    /* 맨 위 히어로 카드: 위·아래 꼭지 소량 라운드 (시안) */
    .tt6-page--union {
        --ttl-union-mo-hero-radius: 12px;
    }

    /* Zeplin: 본문 마지막 핑크(Rect 2489) 하단 y2464 ~ 푸터(Component 3) y2544 = 80px */
    .tt6-page--union .ttl-union {
        /* 서브헤드 하단(y204) → 2486 상단(y264) = 60px */
        padding: 20px max(20px, env(safe-area-inset-left, 0px)) 80px max(20px, env(safe-area-inset-right, 0px));
        box-sizing: border-box;
    }

    .tt6-page--union .ttl-union__inner {
        box-sizing: border-box;
        width: 100%;
        max-width: 328px;
        margin-left: auto;
        margin-right: auto;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    .tt6-page--union .ttl-union-album {
        border-radius: 0;
    }

    /* Zeplin MO: Rectangle 2486 — linear #dcf4c6 → #cfe5ba (41.839%) → 투명, 328×540, 텍스트 20px 인셋·사진 전폭 */
    .tt6-page--union .ttl-union-hero {
        border-radius: 0;
        position: relative;
        overflow: visible;
        background: #fff;
        padding: 0;
        box-sizing: border-box;
    }

    /* 패널 뒤 Rectangle 2486: Zeplin 스톱 동일 · 지원 브라우저는 oklab 보간으로 더 부드럽게 */
    .tt6-page--union .ttl-union-hero::before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
        transform: none;
        top: 40px;
        height: 540px;
        border-radius: var(--ttl-union-mo-hero-radius) var(--ttl-union-mo-hero-radius) 0 0;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgb(220 244 198) 0%,
            rgb(207 229 186) 41.839%,
            rgb(214 237 192 / 0) 100%
        );
        background: linear-gradient(
            180deg in oklab,
            rgb(220 244 198) 0%,
            rgb(207 229 186) 41.839%,
            rgb(214 237 192 / 0) 100%
        );
    }

    .tt6-page--union .ttl-union-hero > .ttl-union-hero__stack {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        /* 맨 위 영역 패딩은 hero 가 아닌 stack 부터 (상 40px · 좌우 20px) */
        padding: 80px max(20px, env(safe-area-inset-left, 0px)) 0 max(20px, env(safe-area-inset-right, 0px));
    }

    .tt6-page--union .ttl-union-hero > .ttl-union-hero__stage {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        /* 사진 하단 y804 = 크림(Rect 2487) 상단 — 추가 간격 없음 */
        padding-bottom: 0;
    }

    .tt6-page--union .ttl-union-hero__brand--stack {
        margin-bottom: 16px;
    }

    .tt6-page--union .ttl-union-hero__brand--stack.ttl-union-hero__brand--bar-only {
        margin-bottom: 16px;
    }

    .tt6-page--union .ttl-union-hero__brand-bar {
        width: min(215px, 100%);
    }

    .tt6-page--union .ttl-union-hero__tagline--stack {
        margin-bottom: 16px;
        max-width: 248px;
    }

    /* 리드 하단 − 사진 상단 82px 겹침: Zeplin은 2486 아래에 bg_연합회배경(2476+#e5e5e5 + 사진) — 상단만 살짝 비워 2486과 자연스럽게 이어지게 */
    .tt6-page--union .ttl-union-hero__visual {
        margin-top: -82px;
        z-index: 1;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) 10%,
            rgba(0, 0, 0, 0.92) 22%,
            #000 28%,
            #000 100%
        );
        mask-image: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) 10%,
            rgba(0, 0, 0, 0.92) 22%,
            #000 28%,
            #000 100%
        );
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    /* 마스크로 2486이 드러난 구간은 워시를 약하게 — 사진 본만 살짝 녹조 보정 */
    .tt6-page--union .ttl-union-hero__wash {
        background: linear-gradient(
            180deg,
            rgb(220 244 198 / 0.22) 0%,
            rgb(207 229 186 / 0.08) 30%,
            rgb(214 237 192 / 0) 55%
        );
        background: linear-gradient(
            180deg in oklab,
            rgb(220 244 198 / 0.22) 0%,
            rgb(207 229 186 / 0.08) 30%,
            rgb(214 237 192 / 0) 55%
        );
    }

    /* 사진 하단(y804) − YT 버튼 하단(y622) = 182 */
    .tt6-page--union .ttl-union-hero__overlay {
        bottom: 182px;
        z-index: 3;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    /* Rect 2487: 3열(92·열간8)·가로 슬라이드, 네비 Component 101/102 40×40 y1241 간격8·위쪽 여백 32 */
    .tt6-page--union .ttl-union-board {
        margin-top: 0;
        padding: 40px 18px 56px;
    }

    .tt6-page--union .ttl-union-board__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .tt6-page--union .ttl-union-board__viewport::-webkit-scrollbar {
        display: none;
    }

    .tt6-page--union .ttl-union-board__viewport--fit {
        overflow-x: hidden;
    }

    .tt6-page--union .ttl-union-board__viewport--fit + .ttl-union-board__nav-row {
        display: none;
    }

    /* 가로로 페이지(li.__page) 나열 → 뷰포트 너비(--ttl-board-mo-page)마다 스냅 */
    .tt6-page--union .ttl-union-board__grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0;
        width: max-content;
        max-width: none;
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
    }

    .tt6-page--union .ttl-union-board__grid--center {
        justify-content: center;
    }

    .tt6-page--union .ttl-union-board__page {
        flex: 0 0 var(--ttl-board-mo-page, 100%);
        min-width: 0;
        box-sizing: border-box;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    .tt6-page--union .ttl-union-board__page-grid {
        display: grid;
        grid-template-columns: repeat(3, 92px);
        column-gap: 8px;
        row-gap: 20px;
        justify-content: center;
        align-items: start;
        width: 100%;
        box-sizing: border-box;
    }

    .tt6-page--union .ttl-union-board__cell {
        display: flex;
        flex-direction: column;
        width: 92px;
        min-width: 0;
        max-width: 92px;
        margin: 0 auto;
        text-align: center;
    }

    /* Zeplin: 초상 → 이름 — 직함 */
    .tt6-page--union .ttl-union-board__portrait {
        order: 1;
        width: 92px;
        height: 92px;
        margin: 0 auto 11px;
        border-radius: 50%;
        border: none;
    }

    .tt6-page--union .ttl-union-board__name {
        order: 2;
        margin-bottom: 4px;
    }

    .tt6-page--union .ttl-union-board__role {
        order: 3;
        margin-bottom: 0;
    }

    .tt6-page--union .ttl-union-board__nav-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 32px;
    }

    .tt6-page--union .ttl-union-board__nav-ico {
        width: 40px;
        height: 40px;
    }

    .tt6-page--union .ttl-union-board__nav-fallback {
        width: 40px;
        height: 40px;
    }

    .tt6-page--union .ttl-union-board__h2,
    .tt6-page--union .ttl-union-album__h2 {
        font-size: 20px;
        line-height: 24px;
        font-weight: 800;
        letter-spacing: -0.4px;
        color: #333;
    }

    /* 타이틀 하단(y868) → 첫 Portrait(y909) = 41 */
    .tt6-page--union .ttl-union-board__h2 {
        margin-bottom: 41px;
    }

    .tt6-page--union .ttl-union-album__h2 {
        margin-bottom: 30px;
    }

    .tt6-page--union .ttl-union-board__role {
        font-size: 14px;
        font-weight: 700;
        line-height: 24px;
        color: #47452a;
    }

    .tt6-page--union .ttl-union-board__name {
        font-size: 14.5px;
        font-weight: 400;
        line-height: 24px;
        color: #47452a;
    }

    /* Zeplin MO: 네비(y1241) → 더보기 간격 · Component 103 156×44 */
    .tt6-page--union .ttl-union-board__foot {
        margin-top: 20px;
        text-align: center;
    }

    .tt6-page--union .ttl-union-board__more {
        min-width: 156px;
        min-height: 44px;
        border-radius: 22px;
        font-size: 16px;
        line-height: 19px;
    }

    /* Rect 2488: y1337·h519 → 제목 y1377 = 40px · 목록~더보기·단 y1856 맞춤 하단 56px */
    .tt6-page--union .ttl-union-notice {
        position: relative;
        margin-top: 0;
        padding: 40px 18px 56px;
        background: var(--ttl-union-mint);
    }

    /* Zeplin MO: 공지사항 제목만 상단 가운데 · Component 103 흰 pill은 목록 하단 가운데(y1756, 상단 마지막 행+20) */
    .tt6-page--union .ttl-union-notice__head {
        position: static;
        display: block;
        text-align: center;
        margin-bottom: 30px;
        padding: 0;
        border-bottom: none;
    }

    .tt6-page--union .ttl-union-notice__h2 {
        text-align: center;
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.4px;
        color: #333;
    }

    .tt6-page--union .ttl-union-notice__foot {
        position: static;
        margin-top: 20px;
        padding: 0;
        text-align: center;
    }

    .tt6-page--union .ttl-union-notice__row {
        margin: 0 0 13px;
        padding: 0 0 12px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        border-bottom: 1px solid #93dede;
    }

    .tt6-page--union .ttl-union-notice__row:last-child {
        margin-bottom: 0;
        border-bottom: none;
    }

    .tt6-page--union .ttl-union-notice__ttl-link {
        flex: none;
        width: 100%;
    }

    .tt6-page--union .ttl-union-notice__date {
        flex: none;
        margin-top: 0;
        font-size: 12px;
        line-height: 14px;
        color: #000;
    }

    .tt6-page--union .ttl-union-notice__list {
        border-top: none;
        padding-top: 0;
    }

    .tt6-page--union .ttl-union-notice__more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-width: 156px;
        min-height: 44px;
        padding: 0 20px;
        border: 1px solid rgb(223 223 223);
        border-radius: 22px;
        background: #fff;
        font-size: 16px;
        font-weight: 600;
        line-height: 19px;
        color: #333;
        text-decoration: none !important;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    /* Rect 2489: y1856·h608 → 제목 y1896 = 40px · 더보기 하단~섹션 끝 = 56px */
    .tt6-page--union .ttl-union-album {
        margin-top: 0;
        padding: 40px 18px 56px;
    }

    /* Zeplin Mask 130×130 · 열간 20px — (292−280)/2 가운데 */
    .tt6-page--union .ttl-union-album__grid {
        display: grid;
        grid-template-columns: 130px 130px;
        gap: 20px;
        justify-content: center;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .tt6-page--union .ttl-union-album__thumb {
        max-width: 130px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 16px;
        border-radius: 0;
    }

    .tt6-page--union .ttl-union-album__cap {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
    }

    .tt6-page--union .ttl-union-album__date {
        font-size: 12px;
        line-height: 14px;
        text-align: left;
    }

    .tt6-page--union .ttl-union-album__foot {
        margin-top: 20px;
    }

    .tt6-page--union .ttl-union-album__more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-width: 156px;
        min-height: 44px;
        padding: 0 20px;
        border: 1px solid rgb(223 223 223);
        border-radius: 22px;
        background: #fff;
        font-size: 16px;
        font-weight: 600;
        line-height: 19px;
        color: #333;
        text-decoration: none !important;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .tt6-page--union .ttl-union-album__item {
        text-align: left;
    }
}

/* ==========================================================================
   회장 인사말 — bbs/ttodrak-union-president-greeting.php
   Zeplin PC: screen/6a0d5c5b2a8a725029f928a3 · MO: screen/6a0d5c5d94dcc730f9bb6fa9
   PC 본문 645px · 타이틀 열 704px · 녹색 밴드 상단 radius 20px
   ========================================================================== */

/* 회장 인사말·조직 및 임원소개 공통 타이틀 밴드 토큰 */
.tt6-page--union-greeting,
.tt6-page--union-org {
    --ttl-greeting-ff: Pretendard, "PretendardVariable", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
        system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --ttl-greeting-band-bg: #dcf3c6;
    --ttl-greeting-text: #333;
}

.tt6-page--union-greeting {
    --ttl-greeting-copy-pc: 645px;
    --ttl-greeting-title-pc: 704px;
    --ttl-greeting-profile-pc: 176px;
    --ttl-greeting-col-gap-pc: 39px;
    --ttl-greeting-layout-mo: 328px;
    --ttl-greeting-layout-pc: calc(
        var(--ttl-greeting-profile-pc) + var(--ttl-greeting-col-gap-pc) + var(--ttl-greeting-title-pc)
    );
}

.tt6-page--union-greeting .ttl-union--greeting,
.tt6-page--union-org .ttl-union--org {
    padding-top: 80px;
    padding-bottom: 100px;
    font-family: var(--ttl-greeting-ff);
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--ttl-greeting-text);
}

.tt6-page--union-greeting .ttl-union-greeting__band,
.tt6-page--union-org .ttl-union-greeting__band {
    box-sizing: border-box;
    width: 100%;
    max-width: 1036px;
    margin: 0 auto 40px;
    padding: 0;
    background: var(--ttl-greeting-band-bg);
    border-radius: 20px 20px 0 0;
    text-align: center;
}

/* MO: 밴드·소제목 ExtraBold 18/21 · 본문 Regular 14/20 */
.tt6-page--union-greeting .ttl-union-greeting__band-title,
.tt6-page--union-org .ttl-union-greeting__band-title {
    margin: 0;
    padding: 37px 16px;
    font-family: var(--ttl-greeting-ff);
    font-size: 18px;
    font-weight: 800;
    font-style: normal;
    line-height: 21px;
    letter-spacing: -0.36px;
    text-align: center;
    color: var(--ttl-greeting-text);
}

.tt6-page--union-greeting .ttl-union-greeting__layout {
    box-sizing: border-box;
    width: fit-content;
    max-width: min(100%, var(--ttl-greeting-layout-mo));
    margin-left: auto;
    margin-right: auto;
}

/* Zeplin Group 3972(MO 140×276) · 3973(PC 176×357) — 사진~이름 통이미지 */
.tt6-page--union-greeting .ttl-union-greeting__profile {
    margin: 0 auto 42px;
    padding: 0;
    width: 140px;
    max-width: 100%;
}

.tt6-page--union-greeting .ttl-union-greeting__profile-img {
    display: block;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    vertical-align: top;
}

/* MO·PC 통이미지 분리 출력 — picture 대신 CSS 전환 */
.tt6-page--union-greeting .ttl-union-greeting__profile-img--mo,
.tt6-page--union-greeting .ttl-union-greeting__profile-img--pc {
    display: block;
}

.tt6-page--union-greeting .ttl-union-greeting__profile-img--mo + .ttl-union-greeting__profile-img--pc {
    display: none;
}

.tt6-page--union-greeting .ttl-union-greeting__profile-img--empty {
    width: 140px;
    height: 276px;
    margin: 0 auto;
    background: #d9dde1;
}

.tt6-page--union-greeting .ttl-union-greeting__article {
    box-sizing: border-box;
    width: min(100%, var(--ttl-greeting-layout-mo));
    min-width: 0;
}

.tt6-page--union-greeting .ttl-union-greeting__lead-title {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--ttl-greeting-ff);
    font-size: 18px;
    font-weight: 800;
    font-style: normal;
    line-height: 21px;
    letter-spacing: -0.36px;
    text-align: left;
    color: var(--ttl-greeting-text);
    word-break: keep-all;
}

.tt6-page--union-greeting .ttl-union-greeting__body {
    font-family: var(--ttl-greeting-ff);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
    color: var(--ttl-greeting-text);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.tt6-page--union-greeting .ttl-union-greeting__body p {
    margin: 0 0 1.25em;
}

.tt6-page--union-greeting .ttl-union-greeting__body p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .tt6-page--union-greeting .ttl-union-greeting__band {
        margin-bottom: 70px;
    }

    /* PC: 밴드·소제목 Bold · 본문 SemiBold 16.5/28 */
    .tt6-page--union-greeting .ttl-union-greeting__band-title,
    .tt6-page--union-org .ttl-union-greeting__band-title {
        padding: 52px 24px;
        font-size: 30px;
        font-weight: 700;
        line-height: 35px;
        letter-spacing: -1.2px;
    }

    .tt6-page--union-greeting .ttl-union-greeting__layout {
        display: grid;
        grid-template-columns: var(--ttl-greeting-profile-pc) var(--ttl-greeting-title-pc);
        column-gap: var(--ttl-greeting-col-gap-pc);
        row-gap: 0;
        align-items: start;
        justify-content: start;
        width: fit-content;
        max-width: min(100%, var(--ttl-greeting-layout-pc));
        margin-left: auto;
        margin-right: auto;
    }

    .tt6-page--union-greeting .ttl-union-greeting__profile {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: var(--ttl-greeting-profile-pc);
        margin: 0;
    }

    .tt6-page--union-greeting .ttl-union-greeting__profile-img--mo {
        display: none;
    }

    .tt6-page--union-greeting .ttl-union-greeting__profile-img--mo + .ttl-union-greeting__profile-img--pc,
    .tt6-page--union-greeting .ttl-union-greeting__profile-img--pc {
        display: block;
    }

    .tt6-page--union-greeting .ttl-union-greeting__article {
        grid-column: 2;
        width: var(--ttl-greeting-title-pc);
        max-width: var(--ttl-greeting-title-pc);
    }

    .tt6-page--union-greeting .ttl-union-greeting__lead-title {
        width: 100%;
        max-width: var(--ttl-greeting-title-pc);
        margin-bottom: 24px;
        font-size: 28px;
        font-weight: 700;
        line-height: 36px;
        letter-spacing: -1.12px;
    }

    .tt6-page--union-greeting .ttl-union-greeting__body {
        width: 100%;
        max-width: var(--ttl-greeting-copy-pc);
        font-size: 16.5px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: -0.5775px;
    }

    .tt6-page--union-greeting .ttl-union-greeting__body p {
        font-weight: inherit;
    }
}

@media (max-width: 767px) {
    .tt6-page--union-greeting .ttl-union--greeting,
    .tt6-page--union-org .ttl-union--org {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .tt6-page--union-greeting .ttl-union-greeting__band,
    .tt6-page--union-org .ttl-union-greeting__band {
        max-width: 100%;
        margin-bottom: 40px;
        border-radius: 20px 20px 0 0;
    }

    .tt6-page--union-greeting .ttl-union-greeting__article {
        width: min(100%, var(--ttl-greeting-layout-mo));
    }
}

/* ==========================================================================
   조직 및 임원소개 — bbs/ttodrak-union-organization.php
   Zeplin PC: screen/6a0eb40926539fa406a936d2 · MO: screen/6a0ec202b4e537834f73e2dc
   레이아웃: 3열(MO)·6열(PC) 그리드 · 사진 94×130 중앙 — 시안 타이포만 선택 반영
   ========================================================================== */

.tt6-page--union-org {
    --ttl-org-ff: var(--ttl-greeting-ff, Pretendard, "PretendardVariable", "Pretendard Variable", sans-serif);
    --ttl-org-text: #333;
    --ttl-org-accent: #2c5273;
    --ttl-org-role: #ff5151;
    --ttl-org-content-pc: 860px;
    --ttl-org-content-mo: 328px;
}

.tt6-page--union-org .ttl-union-org__body {
    box-sizing: border-box;
    width: 100%;
    max-width: min(100%, var(--ttl-org-content-mo));
    margin: 0 auto;
    padding: 0;
    font-family: var(--ttl-org-ff);
    color: var(--ttl-org-text);
}

.tt6-page--union-org .ttl-union-org__section {
    margin: 0 0 48px;
}

.tt6-page--union-org .ttl-union-org__section:last-child {
    margin-bottom: 0;
}

.tt6-page--union-org .ttl-union-org__section-title {
    position: relative;
    margin: 0 0 20px;
    padding: 0 0 0 18px;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.8px;
    color: var(--ttl-org-text);
}

.tt6-page--union-org .ttl-union-org__section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ttl-org-accent);
}

/* 고문 조직표 — Zeplin Group 3997(MO)·Rectangle 2575–2577(PC) */
.tt6-page--union-org .ttl-union-org__chart {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ttl-org-content-pc);
    margin: 0 auto;
    border: solid #e2e2e2;
    border-width: 1px 0;
    border-bottom-color: #838383;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: -0.64px;
}

.tt6-page--union-org .ttl-union-org__chart-head,
.tt6-page--union-org .ttl-union-org__chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 40px;
}

.tt6-page--union-org .ttl-union-org__chart-head {
    min-height: 35px;
    background: #333;
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.64px;
}

.tt6-page--union-org .ttl-union-org__chart-row {
    background: #fff;
    border-top: 1px solid #e2e2e2;
}

/* 2번째 데이터 행(교육자원부 부장)만 회색 — 시안 Rectangle 2576 / 2627 */
.tt6-page--union-org .ttl-union-org__chart-row:nth-child(3) {
    background: #f2f2f2;
}

.tt6-page--union-org .ttl-union-org__chart-col {
    box-sizing: border-box;
    padding: 8px 16px;
    text-align: center;
}

.tt6-page--union-org .ttl-union-org__chart-col--role {
    border-right: 1px solid #e2e2e2;
}

.tt6-page--union-org .ttl-union-org__chart-head .ttl-union-org__chart-col--role {
    border-right-color: #0f0f0f;
}

/* 카드 그리드 */
.tt6-page--union-org .ttl-union-org__grid {
    display: grid;
    gap: 16px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 지도위원 — Zeplin PC 268×130·MO 328×133 가로 카드, 배경 #f8f8f8 */
.tt6-page--union-org .ttl-union-org__grid--advisors {
    grid-template-columns: 1fr;
    gap: 20px;
}

.tt6-page--union-org .ttl-union-org__grid--advisors .ttl-union-org__card {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 20px;
    row-gap: 0;
    align-items: stretch;
    text-align: left;
    padding: 0;
    background: #f8f8f8;
    min-height: 133px;
}

.tt6-page--union-org .ttl-union-org__grid--advisors .ttl-union-org__card-photo {
    grid-row: 1 / -1;
    align-self: stretch;
    width: 96px;
    height: 133px;
    margin: 0;
    aspect-ratio: auto;
}

/* 임원명단 — 카드 100px 고정 · 영역 너비에 따라 열 수 자동 · 그리드·카드 내용 가운데 정렬 */
.tt6-page--union-org .ttl-union-org__grid--officers {
    grid-template-columns: repeat(auto-fill, 100px);
    column-gap: 14px;
    row-gap: 20px;
    justify-content: center;
    justify-items: center;
}

.tt6-page--union-org .ttl-union-org__grid--officers .ttl-union-org__card {
    width: 100px;
    max-width: 100%;
    min-height: 213px;
    padding: 0 0 8px;
    box-sizing: border-box;
    background: #f8f8f8;
    text-align: center;
}

.tt6-page--union-org .ttl-union-org__grid--officers .ttl-union-org__card-photo {
    width: 100px;
    height: 130px;
    margin: 0 auto 8px;
}

.tt6-page--union-org .ttl-union-org__card {
    box-sizing: border-box;
    text-align: center;
}

.tt6-page--union-org .ttl-union-org__card-photo {
    width: 94px;
    max-width: 100%;
    height: 130px;
    margin: 0 auto 12px;
    overflow: hidden;
    background: #d9dde1;
}

.tt6-page--union-org .ttl-union-org__card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.tt6-page--union-org .ttl-union-org__card-name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    letter-spacing: -0.48px;
    color: #000;
}

.tt6-page--union-org .ttl-union-org__card--advisor .ttl-union-org__card-name {
    margin: 0 0 4px;
    padding-top: 41px;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.6px;
    color: var(--ttl-org-text);
}

/* Zeplin: 직책·협의회장 등 강조색 #ff5151 */
.tt6-page--union-org .ttl-union-org__card-role {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    letter-spacing: -0.48px;
    color: var(--ttl-org-role);
}

.tt6-page--union-org .ttl-union-org__card-synod,
.tt6-page--union-org .ttl-union-org__card-church,
.tt6-page--union-org .ttl-union-org__card-meta {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--ttl-org-text);
}

.tt6-page--union-org .ttl-union-org__card--advisor .ttl-union-org__card-meta {
    font-size: 13.5px;
    line-height: 16px;
    letter-spacing: -0.405px;
}

.tt6-page--union-org .ttl-union-org__card-church {
    margin-top: 2px;
}

/* 임원 카드 본문 — Zeplin: 직책 16/19 center · 이름·노회·교회 12/17 center (행간 17px) */
.tt6-page--union-org .ttl-union-org__card--officer .ttl-union-org__card-role {
    margin: 0 0 5px;
    text-align: center;
}

.tt6-page--union-org .ttl-union-org__card--officer .ttl-union-org__card-name,
.tt6-page--union-org .ttl-union-org__card--officer .ttl-union-org__card-synod,
.tt6-page--union-org .ttl-union-org__card--officer .ttl-union-org__card-church {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: -0.36px;
    text-align: center;
    color: var(--ttl-org-text);
}

.tt6-page--union-org .ttl-union-org__card--officer .ttl-union-org__card-church {
    margin-top: 0;
}

.tt6-page--union-org .ttl-union-org__card-tel {
    margin: 6px 0 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.405px;
    color: var(--ttl-org-role);
}

.tt6-page--union-org .ttl-union-org__card--advisor .ttl-union-org__card-tel {
    margin: 16px 0 16px;
    color: var(--ttl-org-text);
}

.tt6-page--union-org .ttl-union-org__card-tel-label {
    color: var(--ttl-org-role);
}

@media (min-width: 768px) {
    .tt6-page--union-org .ttl-union-org__body {
        max-width: min(100%, var(--ttl-org-content-pc));
    }

    .tt6-page--union-org .ttl-union-org__section {
        margin-bottom: 60px;
    }

    .tt6-page--union-org .ttl-union-org__section-title {
        margin-bottom: 24px;
    }

    .tt6-page--union-org .ttl-union-org__grid--advisors {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 16px;
    }

    .tt6-page--union-org .ttl-union-org__grid--advisors .ttl-union-org__card {
        grid-template-columns: 94px 1fr;
        column-gap: 16px;
        min-height: 130px;
    }

    .tt6-page--union-org .ttl-union-org__grid--advisors .ttl-union-org__card-photo {
        width: 94px;
        height: 130px;
    }

    /* Zeplin PC: 카드 상단→이름 42px · 이름↔직함 4px · 직함↔Tel 16px · 하단 12px */
    .tt6-page--union-org .ttl-union-org__card--advisor .ttl-union-org__card-name {
        padding-top: 42px;
        margin-bottom: 4px;
    }

    .tt6-page--union-org .ttl-union-org__card--advisor .ttl-union-org__card-tel {
        margin: 16px 0 12px;
    }

    /* Zeplin PC: 100px 카드 · 열간격 52px · 행간격 37px · 열 수는 콘텐츠 폭에 따라 auto-fill */
    .tt6-page--union-org .ttl-union-org__grid--officers {
        column-gap: 52px;
        row-gap: 37px;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    /* Zeplin MO 360: 화면 좌우 16px — 본문·고문표·지도위원·임원 그리드가 그 안을 전폭 사용(328px) */
    .tt6-page--union-org .ttl-union {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .tt6-page--union-org .ttl-union__inner {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .tt6-page--union-org .ttl-union-greeting__band {
        width: 100%;
        max-width: none;
    }

    .tt6-page--union-org .ttl-union-org__body {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .tt6-page--union-org .ttl-union-org__section-title {
        padding-left: 15px;
    }

    .tt6-page--union-org .ttl-union-org__section-title::before {
        left: 0;
    }

    .tt6-page--union-org .ttl-union-org__chart {
        width: 100%;
        max-width: none;
    }

    .tt6-page--union-org .ttl-union-org__grid--officers {
        width: 100%;
        max-width: none;
        margin: 0;
        justify-content: center;
    }

    .tt6-page--union-org .ttl-union-org__grid--advisors {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .tt6-page--union-org .ttl-union-org__grid--advisors .ttl-union-org__card {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 767px) {
    /* Zeplin MO 360: 연합회 소개 — 화면 좌우 16px, 본문 전폭(328px) · 열·행 간격 유지·셀 비율 스케일 */
    .tt6-page--union:not(.tt6-page--union-org):not(.tt6-page--union-greeting) .ttl-union {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .tt6-page--union:not(.tt6-page--union-org):not(.tt6-page--union-greeting) .ttl-union__inner {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .tt6-page--union:not(.tt6-page--union-org):not(.tt6-page--union-greeting) .ttl-union-board,
    .tt6-page--union:not(.tt6-page--union-org):not(.tt6-page--union-greeting) .ttl-union-notice,
    .tt6-page--union:not(.tt6-page--union-org):not(.tt6-page--union-greeting) .ttl-union-album {
        padding-left: 0;
        padding-right: 0;
    }

    .tt6-page--union:not(.tt6-page--union-org):not(.tt6-page--union-greeting) .ttl-union-board__page-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tt6-page--union:not(.tt6-page--union-org):not(.tt6-page--union-greeting) .ttl-union-board__cell {
        width: 100%;
        max-width: none;
    }

    .tt6-page--union:not(.tt6-page--union-org):not(.tt6-page--union-greeting) .ttl-union-board__portrait {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        margin-bottom: 11.96%;
    }

    .tt6-page--union:not(.tt6-page--union-org):not(.tt6-page--union-greeting) .ttl-union-album__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        width: 100%;
        max-width: none;
    }

    .tt6-page--union:not(.tt6-page--union-org):not(.tt6-page--union-greeting) .ttl-union-album__thumb {
        width: 100%;
        max-width: none;
        aspect-ratio: 1;
        height: auto;
    }
}