/* 이더블케이 — 포트폴리오(portfolio) 전용 CSS
   디지털 스튜디오 포트폴리오와 동일한 디자인을 이식.
   dg / pf / in-d 계열 클래스는 디지털 base.css에서 가져왔고,
   디지털 전용 토큰(--gray·--bg2·--navy·--maxw 등)은 .dg-sect 범위로 스코프해
   이더블케이 전역 변수와 충돌하지 않게 한다. 리빌은 .ek-reveal(이더블케이 JS) 사용. */

/* ── 제목용 폰트(디지털과 동일: GmarketSans) ── */
@font-face {
    font-family: 'GmarketSans';
    font-weight: 500;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
}
@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
}
.font_g {
    font-family: 'GmarketSans', 'Pretendard', sans-serif;
}

/* ── 디지털 디자인 토큰(포트폴리오 범위로 스코프) ── */
.dg-sect {
    --blue: #2563eb;
    --blue2: #3699ff;
    --blue-d: #1b3aa3;
    --blue-l: #eef4ff;
    --navy: #181c32;
    --ink: #1b2733;
    --gray: #566177;
    --gray2: #7e8299;
    --line: #e7ecf4;
    --line2: #eef1f6;
    --bg2: #f5f8fc;
    --ok: #0f9d6e;
    --shadow: 0 10px 30px rgba(24, 28, 50, .07);
    --maxw: 1120px;
    padding: clamp(54px, 7vw, 88px) 0;
    color: var(--ink);
}

.dg-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── 목록 헤더 ── */
.dg-head {
    max-width: 760px;
    margin: 0 auto clamp(30px, 4vw, 44px);
    text-align: center;
}

.dg-eyebrow {
    display: inline-block;
    font-family: 'GmarketSans', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #2563eb;
    letter-spacing: .12em;
    margin-bottom: 12px;
}

.dg-h2 {
    font-family: 'GmarketSans', sans-serif;
    font-size: clamp(23px, 3.6vw, 34px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.32;
    margin: 0 0 14px;
    color: #1b2733;
}

/* 목록 페이지 타이틀(포트폴리오·인사이트·공지사항) — 프리텐다드 + 800 통일 */
.dg-head .dg-eyebrow, .dg-head .dg-h2 { font-family: 'Pretendard', Arial, sans-serif; }
.dg-head .dg-h2 { font-weight: 800; }

/* ── 목록 상단 히어로(포트폴리오·인사이트·공지사항 공용): 그라데이션 eyebrow + 대형 타이틀 ── */
.in-hero2 { padding: 66px 0 0; text-align: center; }
.in-eyebrow { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .12em; margin-bottom: 18px; background: linear-gradient(100deg, #3699ff 0%, #2563eb 55%, #1b3aa3 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.in-title { font-family: 'Pretendard', Arial, sans-serif; font-size: clamp(2.4rem, 6vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0 0 50px; color: #101828; }
.in-list { padding-top: clamp(34px, 4vw, 52px); }

/* ── 스튜디오 필터(인사이트·포트폴리오 공용 · 알약: 활성=컬러 채움, 비활성=연회색) ── */
.pf-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 auto; }
.pf-chip { --c: #2563eb; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: #475467; background: #f2f4f7; border: 0; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: .16s; }
.pf-chip:hover { background: #e9edf2; }
.pf-chip.on { background: var(--c); color: #fff; }

.dg-head-divider {
    display: block;
    width: 56px;
    height: 2px;
    margin: 22px auto 0;
    background: rgba(0, 0, 0, .18);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dg-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--blue);
    border: 1px solid var(--line);
    padding: 10px 17px;
    border-radius: 10px;
    transition: .15s;
    background: #fff;
}

.dg-more:hover {
    border-color: var(--blue);
    background: var(--blue-l);
}

/* ── 카드 그리드 ── */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 22px);
}

.pf-card {
    --c: #2563eb;               /* 카드별 스튜디오 색(인라인 style로 지정) · 기본 파랑 */
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(24, 28, 50, .04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.pf-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--c) 34%, #fff);   /* 스튜디오 색의 옅은 톤 */
}

.pf-card a {
    display: block;
    color: inherit;
}

.pf-thumb {
    position: relative;
    aspect-ratio: 4 / 4;
    overflow: hidden;
}

.pf-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pf-card-body {
    padding: 16px 18px 18px;
}

/* 제목 위 스튜디오 라벨(소프트 틴트 pill, 영문 · 포인트색은 인라인 color) */
.pf-card-studio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: 8px;
    background: color-mix(in srgb, currentColor 12%, #fff);
}

.pf-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -.01em;
    /* 길어지면 한 줄에서 말줄임(…) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-card-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #98a2b3;              /* 이더블케이 회색보다 한 톤 연하게 */
    transition: color .2s ease;
}

.pf-card-more i {
    transition: transform .2s ease;
}

/* 카드 호버 시 '자세히 보기' + 화살표 검정으로 */
.pf-card:hover .pf-card-more {
    color: #101828;
}

.pf-card:hover .pf-card-more i {
    transform: translateX(3px);
}

/* ── 페이지네이션(디지털 .pg 스타일) ── */
.pg {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: clamp(28px, 4vw, 40px);
}

.pg-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    transition: .15s;
}

.pg-arrow:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.pg-simple {
    gap: clamp(8px, 2vw, 12px);
}

.pg-simple .pg-arrow {
    gap: 5px;
    min-width: clamp(108px, 28vw, 124px);
    height: clamp(38px, 5vw, 42px);
    padding: 0 clamp(12px, 2vw, 16px);
}

.pg-simple .pg-arrow i {
    font-size: 1.1rem;
}

/* ── 상세: 뒤로가기 ── */
.pf-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray);
    margin-bottom: 22px;
    transition: .15s;
}

.pf-back:hover {
    color: var(--blue);
}

/* ── 상세 레이아웃 ── */
.dg-sect.in-d-sect {
    padding-top: clamp(20px, 3vw, 34px);
}

.in-d-col {
    max-width: 860px;
    margin: 0 auto;
}

.in-d-col .pf-back {
    background: #fff;
    border: 1px solid var(--line);
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 30px;
}

.in-d-col .pf-back:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: #fff;
}

.in-d-rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: clamp(22px, 3.5vw, 32px) 0;
}

.in-d-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.in-d-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray);
}

/* 상세 메타의 스튜디오명(스튜디오 포인트색은 인라인 color) */
.in-d-studio {
    font-weight: 700;
}

.in-d-bar .pf-share-btn {
    margin-top: 0;
    margin-left: auto;
    background: var(--bg2);
}

.pf-d-title {
    font-family: 'Pretendard', Arial, sans-serif;   /* 상세(포트폴리오·인사이트·공지사항) 타이틀 프리텐다드 */
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: 0 0 12px;
}

/* 상단 썸네일: 크롭 없이 원본 비율 그대로 */
.pf-d-hero-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    margin: clamp(24px, 4vw, 36px) 0;
}

.pf-d-hero {
    aspect-ratio: 16 / 8;
    border-radius: 18px;
    margin: clamp(24px, 4vw, 36px) 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pf-d-hero-mark {
    font-size: clamp(34px, 7vw, 60px);
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .06em;
}

.pf-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: clamp(26px, 4vw, 36px);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray);
    background: #fff;
    border: 1px solid var(--line);
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: .15s;
}

.pf-share-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}

/* ── 상세 본문 ── */
.in-d-content {
    margin-top: clamp(8px, 2vw, 16px);
}

/* Shadow DOM 격리 본문 호스트 — 내부 콘텐츠가 자체 <style>로 폭·배경·정렬을 스스로 결정. 사이트 CSS는 Shadow 경계를 못 넘는다. */
.in-d-shadow {
    display: block;
}

/* 완결형(Shadow DOM 격리) 본문은 PC 1132px 기준으로 작성 → 상세 컨테이너·컬럼을 1132px까지 확장.
   insights/notices/portfolio.php가 rich 상세에 dg-inner-wide/in-d-col-wide 를 직접 부여( :has 미의존 → 모든 브라우저 확실 ).
   전역 폭(--maxw 1120)은 유지하고 이 상세 본문만 넓힌다. 일반 텍스트 글은 860px 유지(가독성). */
.dg-inner.dg-inner-wide {
    max-width: 1180px;
}

.in-d-col.in-d-col-wide {
    max-width: 1132px;
}

.in-d-content-rich {
    position: relative;
    left: 50%;
    width: 1132px;
    max-width: none;
    margin-left: -566px;
}

.in-d-content:not(.in-d-content-rich) h2 {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    letter-spacing: -.01em;
    margin: clamp(28px, 4vw, 38px) 0 14px;
}

.in-d-content:not(.in-d-content-rich) h3 {
    font-size: clamp(17px, 2.4vw, 20px);
    font-weight: 700;
    margin: 26px 0 10px;
}

.in-d-content:not(.in-d-content-rich) p {
    font-size: clamp(15px, 2vw, 16.5px);
    color: var(--gray);
    line-height: 1.85;
    margin: 0 0 18px;
}

.in-d-content:not(.in-d-content-rich) p strong {
    color: var(--ink);
    font-weight: 600;
}

.in-d-content:not(.in-d-content-rich) ul,
.in-d-content:not(.in-d-content-rich) ol {
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.in-d-content:not(.in-d-content-rich) li {
    display: flex;
    gap: 10px;
    font-size: clamp(14.5px, 2vw, 16px);
    color: var(--ink);
    line-height: 1.7;
}

.in-d-content:not(.in-d-content-rich) li::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    margin-top: 9px;
}

.in-d-content:not(.in-d-content-rich) blockquote {
    margin: 0 0 18px;
    padding: 14px 18px;
    border-left: 3px solid var(--blue);
    background: var(--blue-l);
    border-radius: 0 10px 10px 0;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.7;
}

.in-d-content:not(.in-d-content-rich) img {
    width: 100%;
    border-radius: 12px;
    margin: 8px 0 18px;
}

.in-d-content:not(.in-d-content-rich) a {
    color: var(--blue);
    text-decoration: underline;
}

.in-d-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
}

.in-d-content td,
.in-d-content th {
    padding: 12px;
    border: 1px solid var(--line);
}

/* ── 상세: 사례 기반 문의 배너 (다른 프로젝트 위, 컨테이너 내 배너) ── */
.pf-cta-banner {
    position: relative;
    overflow: hidden;
    margin: clamp(30px, 5vw, 48px) 0 clamp(28px, 4vw, 40px);
    padding: clamp(34px, 5vw, 52px) clamp(24px, 4vw, 40px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
    color: #fff;
    /* 다크 잉크 베이스 + 이더블케이 블루 글로우 그라데이션 */
    background:
        radial-gradient(75% 120% at 18% 0%, rgba(37, 99, 235, .28), transparent 58%),
        radial-gradient(80% 130% at 100% 108%, rgba(37, 99, 235, .16), transparent 55%),
        linear-gradient(180deg, #16203a 0%, #0d1424 100%);
}

.pf-cta-band-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: #8db7ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    margin-bottom: 12px;
}

/* 발광 도트 + 펄스 (이더블케이 블루) */
.pf-cta-dot {
    position: relative;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4f8cff;
    box-shadow: 0 0 10px 2px rgba(79, 140, 255, .7);
}

.pf-cta-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #4f8cff;
    animation: pfDotPulse 2s ease-out infinite;
}

@keyframes pfDotPulse {
    0%   { transform: scale(1); opacity: .6; }
    100% { transform: scale(3); opacity: 0; }
}

.pf-cta-band-heading {
    margin: 0 0 10px;
    color: #fff;
    font-size: 2rem;
    line-height: 1.35;
}

.pf-cta-band-sub {
    margin: 0 0 28px;
    color: #bdcbe0;
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    line-height: 1.6;
}

.pf-cta-band-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 0 30px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: clamp(0.86rem, 1.8vw, 0.96rem);
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
    transition: transform .15s ease, box-shadow .25s ease, border-color .15s ease;
}

/* 텍스트·아이콘은 shine 위로 */
.pf-cta-band-btn span,
.pf-cta-band-btn i {
    position: relative;
    z-index: 1;
}

.pf-cta-band-btn i {
    font-size: 1.05em;
}

/* 빛이 스쳐 지나가는 shine 효과 */
.pf-cta-band-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-20deg);
    animation: pfCtaShine 3.6s ease-in-out infinite;
}

.pf-cta-band-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

@keyframes pfCtaShine {
    0%        { left: -75%; }
    60%, 100% { left: 130%; }
}

/* 모션 최소화 선호 시 애니메이션 끔 */
@media (prefers-reduced-motion: reduce) {
    .pf-cta-band-btn { animation: none; }
    .pf-cta-band-btn::before { display: none; }
    .pf-cta-dot::before { animation: none; }
}

/* ── 상세 하단: 다른 프로젝트(화살표 캐러셀) ── */
.pf-related-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.pf-related-head .dg-h2 {
    margin: 0;
    text-align: left;
    font-size: clamp(20px, 3vw, 26px);
}

.pf-related-wrap {
    position: relative;
}

/* 그리드 대신 가로 스크롤 트랙 */
.pf-grid.pf-related {
    display: flex;
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 4px 2px 12px;
    scrollbar-width: none;              /* Firefox */
}

.pf-grid.pf-related::-webkit-scrollbar {
    display: none;                     /* Chrome/Safari */
}

.pf-related .pf-card {
    flex: 0 0 calc((100% - 40px) / 3); /* 데스크톱: 3개 노출 */
    scroll-snap-align: start;
}

/* 좌우 화살표 */
.pf-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(24, 28, 50, .14);
    color: var(--ink);
    font-size: 22px;
    cursor: pointer;
    transition: .15s;
}

.pf-carousel-arrow:hover {
    border-color: var(--ink);
    transform: translateY(-50%) scale(1.05);
}

.pf-carousel-arrow.prev {
    left: -18px;
}

.pf-carousel-arrow.next {
    right: -18px;
}

/* ── 빈 상태 ── */
.pf-empty {
    --c: #2563eb;               /* 스튜디오별 포인트색(인라인 style로 지정) */
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 48px 30px;
    box-shadow: 0 2px 10px rgba(24, 28, 50, .04);
}

.pf-empty-ic {
    display: inline-flex;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--c) 12%, #fff);
    color: var(--c);
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
}

.pf-empty p {
    font-size: 15px;
    color: var(--gray);
    line-height: 1.7;
    margin: 0;
}

/* ── 반응형 ── */
@media (max-width: 980px) {
    .pf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-related .pf-card {
        flex: 0 0 calc((100% - 20px) / 2); /* 태블릿: 2개 노출 */
    }

    .in-d-content-rich {
        width: calc(100vw - 48px);
        margin-left: calc(-50vw + 24px);
    }
}

@media (max-width: 680px) {
    .pf-grid {
        grid-template-columns: 1fr;
    }

    .pf-cta-band-btn {
        width: 100%;
        max-width: 340px;
    }

    /* 모바일: 다른 프로젝트는 손가락 스와이프 → 화살표 숨김 */
    .pf-related .pf-card {
        flex: 0 0 78%;
    }

    .pf-carousel-arrow {
        display: none;
    }
}