@charset "utf-8";
/* ===== sub03 (아카이브) page styles ===== */

/* FONT:AUTO dcon01 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.dcon01__search-input {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.4;
    color: #8a8a8a;
}

.dcon01__board-head {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.67;
    color: #000000;
}

.dcon01__row-content {
    font-family: var(--font-pretendard);
}

.dcon01__row-title {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.67;
    color: #000000;
}

.dcon01__row-date {
    font-size: var(--bodyS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 2.14;
    color: #b2b2b2;
}

.dcon01__row {
    font-family: var(--font-pretendard);
}

.dcon01__row-num {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.67;
    color: #000000;
}

.dcon01__pager {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: 1.5em;
    line-height: 1.67;
}

.dcon01__page-link.dcon01__page-link--current {
    color: #ffffff;
}

.dcon01__page-link {
    color: #000000;
}
/* /FONT:AUTO dcon01 */

/* IMG:AUTO dcon01 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.dcon01__search-btn-img {
    width: calc(var(--px)*53);
    aspect-ratio: 53 / 53;
}

.dcon01__notice-mark {
    width: calc(var(--px)*24);
    aspect-ratio: 24 / 22;
}
/* /IMG:AUTO dcon01 */

/* ===== dcon01 레이아웃 ===== */
.dcon01 {
    padding: calc(var(--px)*109) 0 calc(var(--px)*144);
}

.dcon01__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: calc(var(--px)*1320);
    margin-inline: auto;
}

/* 검색 pill — 안쪽 여백 좌43/우10 이 input·버튼 위치를 전부 만든다 */
.dcon01__search {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: calc(var(--px)*801);
    height: calc(var(--px)*71);
    padding: 0 calc(var(--px)*10) 0 calc(var(--px)*43);
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: calc(var(--px)*35.5);
}

.dcon01__search-input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
}

.dcon01__search-input::placeholder {
    color: #8a8a8a;
}

.dcon01__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(var(--px)*53);
    height: calc(var(--px)*53);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.dcon01__board {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    margin-top: calc(var(--px)*30);
    border-top: 1px solid #000000;
}

.dcon01__board-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    height: calc(var(--px)*71);
    background: #f1f1f1;
    border-bottom: 1px solid #dddddd;
}

/* 번호칸 — 헤더 라벨과 본문 셀(숫자 텍스트/공지 마크)이 같은 폭·중앙정렬 계약을 공유.
   공지행은 이 셀이 이미지(.dcon01__notice-mark)를 직접 감싸므로 폭은 width 가 아니라
   flex-basis 로 낸다 — 관리 이미지 래퍼의 수동 width 차단을 회피하기 위함 */
.dcon01__head-num,
.dcon01__row-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 calc(var(--px)*89);
    box-sizing: border-box;
}

.dcon01__head-content,
.dcon01__row-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1 1 auto;
    height: 100%;
    box-sizing: border-box;
}

/* 헤더 '제목' 라벨만 표 중앙(952)에 오도록 padding-left71 + 중앙정렬 —
   본문 제목열과 열 폭 계약은 같지만 라벨 자체의 표기 위치가 다르다 */
.dcon01__head-title {
    flex: 1 1 auto;
    box-sizing: border-box;
    padding-left: calc(var(--px)*71);
    text-align: center;
}

.dcon01__head-date,
.dcon01__row-date {
    flex-shrink: 0;
    box-sizing: border-box;
    width: calc(var(--px)*160);
    text-align: center;
}

.dcon01__board-list {
    margin: 0;
    padding: 0;
}

.dcon01__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    height: calc(var(--px)*71.4);
    border-bottom: 1px solid #dddddd;
}

.dcon01__row-title {
    /* 긴 제목이 작성일 칸을 밀어내지 않도록 한 줄에서 자른다(dcon02 카드 제목과 같은 방식).
       flex 자식은 min-width:auto 라 min-width:0 이 없으면 줄지 않고 그대로 넘친다 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding-left: calc(var(--px)*107);
}

.dcon01__pager,
.dcon02__pager {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: calc(var(--px)*6);
}

.dcon01__pager {
    margin-top: calc(var(--px)*78);
}

.dcon02__pager {
    margin-top: calc(var(--px)*65);
}

.dcon01__page-link,
.dcon02__page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--px)*32);
    height: calc(var(--px)*32);
    border-radius: 50%;
    text-decoration: none;
    /* FONT:AUTO 상속 자간(1.5em)은 .dcon0N__pager 의 배치 수단(gap 대신 자간으로 벌린 원본 레이어) —
       링크 하나당 글자 1개뿐이라 그대로 두면 숫자가 중앙에서 밀린다. 무력화한다 */
    letter-spacing: normal;
}

.dcon01__page-link--current,
.dcon02__page-link--current {
    background: #0d9c8c;
}

/* 블록 이동 화살표 — 시안엔 없지만 페이지가 블록(6칸)을 넘어가면 유일한 통로다.
   숫자 링크와 같은 원형 32 규격을 공유하고, 꺾쇠만 border 로 그린다(전용 자산 없음) */
.dcon01__page-link--arrow::before,
.dcon02__page-link--arrow::before {
    content: "";
    box-sizing: border-box;
    width: calc(var(--px)*9);
    height: calc(var(--px)*9);
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
}

/* 꺾쇠는 회전시키면 시각 중심이 한쪽으로 쏠린다 — 회전축 보정으로 원 중앙에 맞춘다 */
.dcon01__page-link--prev::before,
.dcon02__page-link--prev::before {
    transform: translateX(calc(var(--px)*2)) rotate(-135deg);
}

.dcon01__page-link--next::before,
.dcon02__page-link--next::before {
    transform: translateX(calc(var(--px)*-2)) rotate(45deg);
}

/* FONT:AUTO dcon02 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.dcon02__card-info {
    font-family: var(--font-pretendard);
}

.dcon02__card-title {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.67;
    color: #000000;
}

.dcon02__card-date {
    font-size: var(--bodyS);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 2.14;
    color: #b2b2b2;
}

.dcon02__pager {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: 1.5em;
    line-height: 1.67;
}

.dcon02__page-link.dcon02__page-link--current {
    color: #ffffff;
}

.dcon02__page-link {
    color: #000000;
}
/* /FONT:AUTO dcon02 */

/* ===== dcon02 레이아웃 ===== */
.dcon02 {
    padding: calc(var(--px)*84) 0 calc(var(--px)*102);
}

.dcon02__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: calc(var(--px)*1320);
    margin-inline: auto;
}

.dcon02__card-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: calc(var(--px)*27);
    row-gap: calc(var(--px)*33);
    width: 100%;
    margin: 0;
    padding: 0;
}

.dcon02__card {
    flex: 0 0 calc((100% - var(--px)*27*2) / 3);
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: calc(var(--px)*30);
    overflow: hidden;
}

.dcon02__card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dcon02__card-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 420 / 260;
    background-color: #b2b2b2;
    border-bottom: 1px solid #dddddd;
    overflow: hidden;
}

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

.dcon02__card-info {
    display: flex;
    flex-direction: column;
    /* 시안의 제목/날짜 line-height 박스(1.67em·2.14em)가 서로 겹치도록 배치돼 있어
       center 로는 두 줄을 동시에 맞출 수 없다 — 부모가 padding 으로 시작점을 소유한다 */
    justify-content: flex-start;
    align-items: center;
    height: calc(var(--px)*95);
    padding-top: calc(var(--px)*22);
    box-sizing: border-box;
}

.dcon02__card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    width: 100%;
    text-align: center;
    word-break: keep-all;
}

.dcon02__card-date {
    /* 제목의 line-height 박스와 5px 겹치는 시안 배치 (layout-spec t_date y393 = t_title y368 + 30 − 5) */
    margin-top: calc(var(--px)*-5);
}

/* ===== dcon03 레이아웃 ===== */
.dcon03__slider {
    padding: calc(var(--px)*106) 0 calc(var(--px)*101);
    overflow: hidden;
}

.dcon03__card {
    width: calc(var(--px)*358);
    height: calc(var(--px)*646);
    border-radius: calc(var(--px)*30);
    overflow: hidden;
    /* iOS Safari: overflow:hidden + border-radius 가 video 모서리를 안 자르는 버그 우회 */
    isolation: isolate;
}

/* 유튜브 카드 = 썸네일만 깔린 파사드. 중앙에 오면 animation.js 가 같은 자리에 iframe 을
   꽂는다(카드 수만큼 유튜브 플레이어를 미리 로드하지 않기 위해). mp4 카드의 <video> 는
   library.css 전역 규칙(width/height 100% · object-fit:cover)이 이미 채워 준다.
   가로 영상이 들어오면 유튜브가 알아서 위아래 여백을 두므로 바탕은 .bg-black 유틸로 깐다. */
.dcon03__card-media--yt {
    position: relative;
    width: 100%;
    height: 100%;
}

.dcon03__card-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* iframe 이 실제로 뜬 뒤에만 썸네일을 내린다(animation.js 가 load 시점에 클래스를 붙임) */
.dcon03__card-media--playing .dcon03__card-thumb {
    display: none;
}

/* ★ iframe 은 object-fit 이 안 먹는다 — 카드(358x646)에 그대로 채우면 유튜브가 폭에 맞춰
   16:9 로 축소해 세로 가운데 띠처럼 작게 들어가고 위아래가 검게 빈다. 그래서 카드 "높이"를
   채우는 크기로 키우고 중앙 크롭한다(video 의 object-fit:cover 를 손으로 재현).
   가로 영상은 좌우가 잘리는 대신 카드가 꽉 차고, 세로 쇼츠는 유튜브가 만드는 좌우 검은
   여백이 화면 밖으로 밀려나 결과적으로 딱 맞는다. 겸사겸사 제목·공유 같은 오버레이 UI 도
   카드 밖으로 나간다. */
.dcon03__card-media--yt iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    min-width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    pointer-events: none;   /* 카드 자체가 슬라이드라 드래그를 iframe 이 가로채지 않게 */
}

.dcon03__nav {
    top: calc(var(--px)*394);
    width: calc(var(--px)*86);
    height: calc(var(--px)*86);
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

.dcon03__nav--prev {
    left: calc(var(--px)*714);
}

.dcon03__nav--next {
    left: calc(var(--px)*1106);
}

.dcon03__nav--next .dcon03__nav-arrow {
    transform: scaleX(-1);
}

/* IMG:AUTO dcon03 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.dcon03__nav-arrow {
    width: calc(var(--px)*86);
    aspect-ratio: 86 / 86;
}
/* /IMG:AUTO dcon03 */

/* ===== 페이지 탭 (tab-nav) — 공용 .sub-tabs 재사용 + sub03 시안차 2건만 오버라이드 =====
   크롭 실측: 탭 중심 800.5 / 951.5 / 1100.5 (간격 150) · 활성 밑줄 x877~1026(w150) · 밑줄 두께 3
   sub01·sub02(셀 133 · 밑줄 5)와 여기서만 갈린다 */
.sub-tabs--sub03 .sub-tabs__item {
    width: calc(var(--px)*150);
}

.sub-tabs--sub03 .sub-tabs__item--active::after {
    height: calc(var(--px)*3);
}

/* ===================================================================
 * MOBILE (max-width:599px)
 * =================================================================== */
@media (max-width: 599px) {

    /* ----- 페이지 탭 — 3탭이라 sub-common 의 모바일 50% 도, PC 150 셀도 안 맞는다.
       PC 룰 `.sub-tabs--sub03 .sub-tabs__item` 이 구체성으로 sub-common 을 이겨
       모바일에서도 29.5px 셀이 남아 라벨이 서로 겹쳤다. 3등분으로 되돌린다 ----- */
    .sub-tabs--sub03 .sub-tabs__item {
        width: 33.333%;
    }

    /* ----- dcon01 (소식 게시판) — 카드형 2행 스택 ----- */
    .dcon01 {
        padding: 8vw 0 12vw;
    }

    .dcon01__inner {
        max-width: none;
        width: 100%;
        padding-inline: 4vw;
        box-sizing: border-box;
    }

    .dcon01__search {
        width: 100%;
        height: 11.7vw;
        padding: 0 1.6vw 0 4.5vw;
        border-radius: 5.9vw;
    }

    .dcon01__search-btn {
        width: 8.5vw;
        height: 8.5vw;
    }

    .dcon01__search-btn-img {
        width: 8.5vw !important;
    }

    .dcon01__board {
        margin-top: 6.4vw;
    }

    /* 헤더행 숨김 — 목업 확정 */
    .dcon01__board-head {
        display: none;
    }

    .dcon01__notice-mark {
        width: 6.4vw !important;
    }

    .dcon01__row {
        height: auto;
        align-items: flex-start;
        padding: 3.2vw 0;
    }

    .dcon01__row-num {
        flex: 0 0 9vw;
    }

    .dcon01__row-content {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        row-gap: 0.8vw;
    }

    .dcon01__row-title {
        padding-left: 0;
        /* 세로 스택이라 부모가 폭을 안 늘려준다 — 한 줄 자르기 기준선을 행 폭으로 준다 */
        max-width: 100%;
    }

    .dcon01__row-date {
        width: auto;
        text-align: left;
    }

    .dcon01__pager {
        margin-top: 10.6vw;
        gap: 1.6vw;
    }

    .dcon01__page-link,
    .dcon02__page-link {
        width: 8.5vw;
        height: 8.5vw;
    }

    /* 원이 vw 로 커지므로 꺾쇠도 같은 축으로 — PC 의 --px 값 그대로면 혼자 작게 남는다 */
    .dcon01__page-link--arrow::before,
    .dcon02__page-link--arrow::before {
        width: 2.4vw;
        height: 2.4vw;
    }

    .dcon01__page-link--prev::before,
    .dcon02__page-link--prev::before {
        transform: translateX(0.5vw) rotate(-135deg);
    }

    .dcon01__page-link--next::before,
    .dcon02__page-link--next::before {
        transform: translateX(-0.5vw) rotate(45deg);
    }

    /* ----- dcon02 (포트폴리오 게시판) — 3열 → 1열 스택 ----- */
    .dcon02 {
        padding: 8vw 0 10vw;
    }

    .dcon02__inner {
        max-width: none;
        width: 100%;
        padding-inline: 4vw;
        box-sizing: border-box;
    }

    .dcon02__card-list {
        flex-direction: column;
        gap: 4vw;
    }

    .dcon02__card {
        flex: 0 0 auto;
        width: 100%;
        border-radius: var(--size-24);
    }

    .dcon02__card-info {
        height: auto;
        padding-top: var(--size-18);
        padding-bottom: var(--size-14);
    }

    .dcon02__card-date {
        margin-top: calc(var(--size-4) * -1);
    }

    .dcon02__pager {
        margin-top: 8vw;
        gap: 1.6vw;
    }

    /* ----- dcon03 (미디어 세로카드 Swiper) — 목업 확정 2026-08-05 ----- */
    .dcon03__slider {
        padding: 5.6vw 0;
    }

    /* 세로카드는 헤더(약 15vw)+탭바(16vw) 아래 한 화면에 담겨야 한다. 폭 기준으로만 잡으면
       (84vw → 비율환산 151.6vw) iPhone SE(667)에서 섹션 610 > 가용 551 로 위아래가 잘렸다.
       그래서 높이를 뷰포트에 캡하고 폭을 비율로 파생시킨다 — 실측 SE 482/551 · XR 637/768.
       dvh 여야 한다(vh 는 모바일 브라우저 UI 를 뺀 실제 가용을 못 따라간다). */
    .dcon03__card {
        flex: 0 0 auto;
        width: auto;
        max-width: 84vw;
        height: min(151.6vw, 66dvh);
        aspect-ratio: 358 / 646;
        /* PC 30px → 카드 폭 배율(315/358≈0.88) 스케일 근사 */
        border-radius: 7vw;
    }
}