/* ============================================================
   dmain_v3 — main stylesheet
   ============================================================ */

/* ─── Custom Properties ──────────────────────────────────── */
:root {
    --spacing-x:  24px;
    --spacing-y:  28px;
    --font-base:  'Pretendard Variable', Pretendard, -apple-system,
                  BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --color-white: #ffffff;
    --color-dim:   rgba(255, 255, 255, 0.2);
    --color-muted: rgba(255, 255, 255, 0.6);
    --transition-fade: opacity 0.8s ease;
    --transition-ui:   0.3s ease;
}

@media (min-width: 768px) {
    :root { --spacing-x: 40px; --spacing-y: 32px; }
}

@media (min-width: 1280px) {
    :root { --spacing-x: 80px; --spacing-y: 80px; }
}

/* ─── Reset / Base ───────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: var(--font-base);
    background: #000;
    color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;          /* fullscreen slider */
}

a   { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ─── Site Header ────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-y) var(--spacing-x);
    pointer-events: none;        /* only children are interactive */
}
.site-header::after{
    content:"";
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:180px;
    z-index: 0;
    pointer-events: none;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.8) 64%, rgba(0, 0, 0, 0) 100%);
}

body.home .site-header::after,
body.front-page .site-header::after,
body.single .site-header::after,
body.page .site-header::after {
    display: none;
}

.site-header:has(.site-hamburger.is-open)::after {
    display: none;
}

.site-logo,
.site-hamburger {
    position: relative;
    z-index: 1;
    pointer-events: all;
}

.site-logo img {
    width: auto;
    height: 40px;
    transition: filter 0.5s ease;
}

@media (max-width: 767px) {
    .site-logo img { width: 64px; }
}

.site-hamburger {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 0;
    width: 40px;
    height: 39px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.site-hamburger::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 0;
}

.site-hamburger::after {
    content: '';
    position: absolute;
    inset: -30px;
}

.site-hamburger span {
    display: block;
    width: 40px;
    height: 7px;
    background: var(--color-white);
    border-radius: 0;
    transform-origin: center;
    position: relative;
    z-index: 1;
    transition: transform    0.4s cubic-bezier(0.4, 0, 0.2, 1),
                width        0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity      0.25s ease,
                background   0.4s ease;
}

@keyframes hamburger-pop {
    0%   { transform: translate(-50%, -50%) scale(0); }
    60%  { transform: translate(-50%, -50%) scale(1.125); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes hamburger-pop-out {
    0%   { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(0); }
}

.site-hamburger:not(.is-open):hover::before {
    animation: hamburger-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.site-hamburger.is-leaving::before {
    animation: hamburger-pop-out 0.22s ease-in forwards;
}

.site-hamburger:not(.is-open):hover span {
    background: #000;
}

/* 햄버거 오픈 상태 — X 형태 */
.site-hamburger.is-open span:nth-child(1) {
    width: 48px;
    transform: translateX(-6px) translateY(16px) rotate(45deg);
}

.site-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.site-hamburger.is-open span:nth-child(3) {
    width: 48px;
    transform: translateX(-6px) translateY(-16px) rotate(-45deg);
}
/* ─── Header Dark Mode (single pages) ────────────────── */
/* 히어로가 스크롤로 사라진 이후 로고 + 햄버거 검정으로 전환 */
.site-header.is-dark .site-logo img {
    filter: invert(1);
}

.site-header.is-dark .site-hamburger span {
    background: #000;
}

/* 네비 오픈 중에는 검정 남 패널 위에서 흰색으로 */
.site-header.is-dark .site-hamburger.is-open span {
    background: var(--color-white);
}

/* 다크 모드 호버: 어두운 버블 + 흰 막대 */
.site-header.is-dark .site-hamburger::before {
    background: rgba(0, 0, 0, 0.08);
}

.site-header.is-dark .site-hamburger:not(.is-open):hover span {
    background: var(--color-white);
}
/* ─── Site Main ──────────────────────────────────────────── */
.site-main { position: relative; }

/* ─── Slider ─────────────────────────────────────────────── */
.slider {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    cursor: pointer;
}

/* Gradient overlays for readability */
.slider::before,
.slider::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    z-index: 10;
    pointer-events: none;
}

.slider::before {
    top: 0;
    height: 30%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 100%);
}

.slider::after {
    bottom: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
}

/* Slides wrapper */
.slides-wrapper {
    position: absolute;
    inset: 0;
}

.slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transition: var(--transition-fade);
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide video,
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Click Overlay ──────────────────────────────────────── */
.slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-ui), visibility var(--transition-ui);
}

.slide-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.slide-link-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    transition: transform 0.25s ease;
}

.slide-link-circle:hover {
    transform: scale(1.07);
}

.slide-link-circle span {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    line-height: 1.5;
    word-break: keep-all;
}

@media (max-width: 767px) {
    .slide-link-circle {
        width: 140px;
        height: 140px;
    }
    .slide-link-circle span { font-size: 13px; }
}

/* ─── Bottom UI ──────────────────────────────────────────── */
.slider-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 40;
    padding: 0 var(--spacing-x) var(--spacing-y);
}

.slider-bottom-left {
    display: flex;
    flex-direction: column;
}

/* Nav items */
.nav-items {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding-bottom: 72px; /* 메타 absolute 공간 확보 */
}

@media (max-width: 767px) {
    .nav-items { gap: 20px; }
}

.nav-item {
    position: relative;
    cursor: pointer;
    opacity: 0.2;
    transition: opacity 0.4s ease;
    pointer-events: all;
}

.nav-item.active {
    opacity: 1;
}

.nav-title {
    display: block;
    font-size: 24px;
    line-height: 40px;
    font-weight: 700;
    color: var(--color-white);
    white-space: nowrap;
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .nav-title { font-size: 13px; }
}

.progress-bar {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.progress {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--color-white);
}

/* Slide meta — nav-item 안에 absolute 배치 */
.nav-item .slide-meta {
    position: absolute;
    top: calc(100% + 20px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    white-space: nowrap;
    pointer-events: none;
    /* 사라질 때: 0.2s, 위로 */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-item.active .slide-meta {
    pointer-events: auto;
    /* 나타날 때: 0.5s ease-out, 위→아래 */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.slide-info {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--color-white);
    letter-spacing: 0.01em;
}

.slide-tags {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: var(--color-muted);
    letter-spacing: 0.06em;
}

.copyright {
    position: fixed;
    bottom: var(--spacing-y);
    right: var(--spacing-x);
    z-index: 95;
    font-size: 20px;
    font-weight: 400;
    color: var(--color-muted);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.1em;
}

body.home.nav-open .copyright,
body.front-page.nav-open .copyright {
    z-index: 125;
}

/* Mobile bottom layout */
@media (max-width: 767px) {
    .slider-bottom {
        padding: 0 var(--spacing-x) 120px; /* 메타 공간 확보 */
    }
}

/* ─── Nav Panel ──────────────────────────────────────────── */
.nav-panel {
    position: fixed;
    top: 0; right: 0;
    width: 32%;
    height: 100vh;
    background: #000;
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.2s ease-in; /* 닫힐 때: ease-in, 절반 속도 */
    padding: var(--spacing-y) var(--spacing-x);
    overflow-y: auto;
    overscroll-behavior: contain;
}

html.nav-open,
body.nav-open {
    overflow: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 115;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.34s ease;
}

body.nav-open::before {
    opacity: 1;
    pointer-events: auto;
}

body.nav-open .site-header {
    z-index: 130;
}

body.nav-open .site-logo {
    opacity: 0.38;
    pointer-events: none;
}

.nav-panel.is-open {
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0, 0, 0.2, 1); /* 열릴 때: ease-out */
}

/* PDF 다운로드 버튼 */
.nav-pdf-btn {
    position: absolute;
    top: var(--spacing-y);
    left: var(--spacing-x);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #fff;
    padding: 8px 20px;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    background: transparent;
    color: #fff;
    transition: background var(--transition-ui), color var(--transition-ui);
    white-space: nowrap;
}

.nav-pdf-btn:hover {
    background: #fff;
    color: #000;
}

/* 메뉴 리스트 */
.nav-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    width: 100%;
}

.nav-menu > li {
    position: relative;
    width: 100%;
    text-align: center;
}

.nav-menu > li > a {
    font-size: 48px;
    line-height: 1;
    letter-spacing: 0.28em;
    text-indent:8px;
    font-weight: 300;
    color: var(--color-white);
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 20px;
    transition: font-weight 0.3s ease;
}

.nav-menu > li > a:hover {
    font-weight: 800;
}

/* Active — 전체 폭 가로 1px 선 */
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-parent > a,
.nav-menu > li.current-menu-ancestor > a {
    font-weight: 800;
    background: #000;
    padding: 0 28px;
}

.nav-menu > li.current-menu-item::before,
.nav-menu > li.current-menu-parent::before,
.nav-menu > li.current-menu-ancestor::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--spacing-x));
    right: calc(-1 * var(--spacing-x));
    top: 50%;
    height: 1px;
    background: #fff;
    z-index: 0;
}

@media (max-width: 767px) {
    .nav-panel {
        width: 100vw;
    }
    .nav-menu {
        gap: 48px;
    }
    .nav-menu > li > a {
        font-size: 36px;
    }
    .nav-pdf-btn {
        right: calc(var(--spacing-x) + 48px);
        font-size: 12px;
        padding: 8px 14px;
    }
}

/* ─── Single Post ────────────────────────────────────────── */

/* \uc0c1\uc138 \ud398\uc774\uc9c0 \uc2a4\ud06c\ub864 \ud5c8\uc6a9 */
body.single,
body.page {
    overflow: auto;
    height: auto;
}

/* \u2500\u2500 Hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.single-hero {
    position: relative;
    width: 100%;
    height: 56vh;
    min-height: 320px;
    max-height: 720px;
    overflow: hidden;
    background: #111;
}

.single-hero__img {
    position: absolute;
    left: 0;
    right: 0;
    top: -25%;
    height: 150%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

.single-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(132, 113, 61, 0.4) 16%, rgba(132, 113, 61, 0) 38%),
        linear-gradient(142deg, rgba(0, 0, 0, 0.15) 24%, rgba(0, 0, 0, 0) 55%);
}

.single-header {
    background: #fff;
    color: #000;
    padding: 80px var(--spacing-x) 0;
}

.single-header__inner {
    max-width: 1224px;
    margin: 0 auto;
}

.single-header__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 64px;
    color: #000;
    margin-bottom: 32px;
    word-break: keep-all;
}

.single-header__meta {
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.single-header__logo img {
    height: 30px;
    width: auto;
    display: block;
}

.single-header__client-name {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.single-header__divider {
    width: 1px;
    height: 48px;
    background: #000;
    flex-shrink: 0;
}

.single-header__date {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 3.84px;
    color: #000;
    white-space: nowrap;
}

.single-header__line {
    width: 73px;
    height: 1px;
    background: #000;
    flex-shrink: 0;
}

.single-header__tags {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    opacity: 0.5;
    white-space: nowrap;
}

.single-header__tag {
    font-weight: 400;
}

.single-header__tag--category {
    font-weight: 700;
    text-transform: uppercase;
}

.single-header__tag--tag {
    text-transform: lowercase;
}

.single-content {
    background: #fff;
    color: #000;
    padding: 64px var(--spacing-x) 80px;
}

.single-content__inner {
    max-width: 1224px;
    margin: 0 auto;
}

.single-content .edit-link {
    display: block;
    margin-top: 40px;
    font-size: 14px;
    opacity: 0.5;
}

/* ── Gutenberg 블록 스타일 (front-end) ───────────────── */

/* 헤딩 */
.single-content__inner h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    color: #000;
    margin-top: 64px;
    margin-bottom: 32px;
}

.single-content__inner h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: #000;
    margin-top: 48px;
    margin-bottom: 24px;
}

/* 첫 번째 헤딩: 상단 여백 없음 */
.single-content__inner > h2:first-child,
.single-content__inner > .wp-block-heading:first-child {
    margin-top: 0;
}

/* 콜럼 내부 헤딩: 섹션 레벨 상단 여백 없음 */
.single-content__inner .wp-block-column h2,
.single-content__inner .wp-block-column .wp-block-heading {
    margin-top: 0;
}

/* 단락 */
.single-content__inner p {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    color: #585858;
    margin-top: 0;
    margin-bottom: 0;
}

/* 이미지 */
.single-content__inner .wp-block-image {
    margin-top: 0;
    margin-bottom: 24px;
}

.single-content__inner .wp-block-image img {
    width: 100%;
    height: auto;
}

/* 목록 */
.single-content__inner ul {
    list-style: disc;
    padding-left: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
}

.single-content__inner ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
}

.single-content__inner li {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    color: #585858;
    margin-bottom: 8px;
}

.single-content__inner li:last-child { margin-bottom: 0; }

/* 콜럼 */
.single-content__inner .wp-block-columns {
    gap: 24px;
}

/* 단락 다음에 콜럼이 올 때 64px 간격 */
.single-content__inner > p + .wp-block-columns,
.single-content__inner > .wp-block-paragraph + .wp-block-columns {
    margin: 64px 0;
}

/* 버튼 영역 */
.single-content__inner > .wp-block-buttons {
    margin-top: 64px;
    justify-content: center;
}

.single-content__inner > .wp-block-heading + .wp-block-buttons {
    margin-top: 0;
}

/* 기본 버튼 스타일 (Figma: 투명 배경 + 검정 테두리) */
.single-content__inner .wp-block-button__link:not([style*="background-color"]) {
    background: transparent;
    border: 1px solid #000;
    border-radius: 0;
    color: #000;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.333;
    padding: 24px 64px;
    transition: background 0.2s ease, color 0.2s ease;
}

.single-content__inner .wp-block-button__link:not([style*="background-color"]):hover {
    background: #000;
    color: #fff;
}

/* 결과 박스 블록 스타일 */
.single-content__inner .wp-block-group.is-style-result-box {
    border: 1px solid #000;
    border-radius: 24px;
    padding: 32px 48px;
}

.single-content__inner .wp-block-group.is-style-result-box p {
    color: #333;
}

/* Responsive */
@media (max-width: 1024px) {
    .single-content__inner h2 { font-size: 26px; }
    .single-content__inner .wp-block-columns { flex-wrap: wrap; }
}

@media (max-width: 767px) {
    .single-content__inner h2 {
        font-size: 20px;
        margin-top: 40px;
        margin-bottom: 20px;
    }
    .single-content__inner h3 { font-size: 18px; margin-top: 32px; margin-bottom: 24px; }
    .single-content__inner p,
    .single-content__inner li { font-size: 16px; }
    .single-content__inner .wp-block-buttons { margin-top: 40px; }
    .single-content__inner .wp-block-button__link:not([style*="background-color"]) {
        font-size: 18px;
        padding: 16px 32px;
    }
    .single-content__inner .wp-block-group.is-style-result-box {
        padding: 24px;
    }
}

.single-related {
    background: #E0E0E0;
    padding: 100px var(--spacing-x);
}

.single-related__inner {
    max-width: 1224px;
    margin: 0 auto;
}

.single-related__heading {
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    color: #000;
    margin-bottom: 32px;
}

.single-related__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.single-related__item {
    display: block;
    text-decoration: none;
}

.single-related__thumb {
    aspect-ratio: 8 / 10;
    overflow: hidden;
    background: #e8e8e8;
    border-radius: 4px;
}

.single-related__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.single-related__item:hover .single-related__thumb img {
    transform: scale(1.04);
}

/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@media (max-width: 1024px) {
    .single-header__title { font-size: 36px; line-height: 48px; }
    .single-related__grid { grid-template-columns: repeat(2, 1fr); }
    .single-related__heading { font-size: 24px; }
}

@media (max-width: 767px) {
    .single-hero { height: 50vw; min-height: 200px; max-height: 400px; }
    .single-header { padding-top: 48px; }
    .single-header__title { font-size: 22px; line-height: 32px; margin-bottom: 16px; }
    .single-header__meta { gap: 12px; padding-bottom: 40px; }
    .single-header__divider { height: 32px; }
    .single-header__line { width: 40px; }
    .single-header__date { letter-spacing: 1px; }
    .single-header__tags { font-size: 12px; }
    .single-content { padding: 40px var(--spacing-x) 60px; }
    .single-related { padding: 60px var(--spacing-x); }
    .single-related__heading { font-size: 20px; margin-bottom: 20px; }
    .single-related__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── Works Archive ───────────────────────────────────── */
body.category-works {
    --works-grid-half: min(calc((100vw - (var(--spacing-x) * 2)) / 2), 612px);
    background: #000;
    color: #fff;
    overflow: auto;
    height: auto;
}

body.category-works .site-header .site-logo img {
    filter: none;
}

body.category-works .site-header .site-hamburger span {
    background: #fff;
}

body.category-works .site-header .site-hamburger:not(.is-open):hover span {
    background: #000;
}

.works-archive {
    position: relative;
    min-height: 100vh;
    padding: 200px var(--spacing-x) 80px;
    background: #000;
    overflow: hidden;
}

body.admin-bar.category-works .works-archive {
    padding-top: 232px;
}

.works-filter {
    position: fixed;
    left: 50%;
    top: 72px;
    z-index: 110;
    display: flex;
    align-items: center;
    gap: 48px;
    transform: translateX(-50%);
}

body.nav-open .works-filter {
    z-index: 80;
    pointer-events: none;
}

body.admin-bar.category-works .works-filter {
    top: 114px;
}

.works-filter__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #fff;
}

.works-filter__item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -11px;
    width: 100%;
    height: 3px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
}

.works-filter__item.is-active::after {
    animation: works-active-line 0.44s ease 0.56s forwards;
}

.works-filter__label {
    font-size: 24px;
    font-weight: 400;
    font-variation-settings: 'wght' 400;
    line-height: 40px;
    white-space: nowrap;
}

.works-filter__item.is-active .works-filter__label {
    font-weight: 900;
    animation: works-filter-weight 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.works-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    font-size: 12px;
    font-weight: 900;
    line-height: 12px;
    color: #fff;
}

.works-filter__item.is-active .works-filter__count {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.works-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 1224px;
    margin: 0 auto;
}

.work-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #191919;
    color: #fff;
    opacity: 0;
    transform: translateY(34px);
    animation: works-card-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.work-card:nth-child(4n + 1) { animation-delay: 0.42s; }
.work-card:nth-child(4n + 2) { animation-delay: 0.50s; }
.work-card:nth-child(4n + 3) { animation-delay: 0.58s; }
.work-card:nth-child(4n + 4) { animation-delay: 0.66s; }

.work-card__media {
    position: absolute;
    inset: 0;
}

.work-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
}

.work-card:hover .work-card__media img {
    transform: scale(1.05);
}

.work-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.72) 100%);
}

.work-card__body {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    z-index: 2;
}

.work-card__client {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 900;
    line-height: 24px;
    color: #fff;
}

.work-card__title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 900;
    line-height: 32px;
    color: #fff;
}

.work-card__meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 6px;
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #fff;
}

.work-card__meta::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.6);
}

.work-card__meta-year,
.work-card__meta-category {
    color: inherit;
}

.work-card__meta-category {
    font-weight: 400;
    opacity: 0.8;
}

.work-card__meta-separator {
    color: rgba(255, 255, 255, 0.64);
}

.work-card__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
}

.work-card__tags b {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.64);
}

.work-card__tags .work-card__tag--category {
    font-weight: 700;
    text-transform: uppercase;
}

.work-card__tags span {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.48);
}

.works-archive__side {
    position: fixed;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(96px, 12.5vw, 240px);
    pointer-events: none;
    opacity: 0;
}

.works-archive__side span {
    display: block;
    font-family: var(--font-base);
    font-size: clamp(96px, 12.5vw, 240px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
    font-variation-settings: 'wght' 900;
    text-rendering: geometricPrecision;
    white-space: nowrap;
}

.works-archive__side--left {
    left: calc(50% - var(--works-grid-half) + 38px);
    top: 707px;
    height: 902px;
    transform: translate(-100%, -50%) translateX(-42px);
    animation: works-side-left 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.96s forwards;
}

.works-archive__side--left span {
    transform: rotate(-90deg);
}

.works-archive__side--right {
    right: calc(50% - var(--works-grid-half) - 302px);
    top: 707px;
    height: 902px;
    transform: translateY(-50%) translateY(24px);
    animation: works-side-right 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.12s forwards;
}

.works-archive__side--right span {
    position: absolute;
    top: 0;
    left: 50%;
    transform-origin: 0 0;
    transform: rotate(90deg);
}

body.admin-bar.category-works .works-archive__side--left,
body.admin-bar.category-works .works-archive__side--right {
    margin-top: 32px;
}

.works-loader {
    max-width: 1224px;
    margin: 48px auto 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.works-sentinel {
    height: 1px;
}

body.category-works .single-footer {
    background: #000;
    color: #fff;
}

body.category-works .single-footer__inner {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

body.category-works .single-footer__logo img {
    filter: invert(1);
}

body.category-works .single-footer__address,
body.category-works .single-footer__copy {
    color: #fff;
}

@keyframes works-filter-weight {
    from {
        font-weight: 400;
        font-variation-settings: 'wght' 400;
    }
    to {
        font-weight: 900;
        font-variation-settings: 'wght' 900;
    }
}

@keyframes works-active-line {
    to { transform: scaleX(1); }
}

@keyframes works-card-enter {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes works-side-left {
    to { opacity: 1; transform: translate(-100%, -50%) translateX(0); }
}

@keyframes works-side-right {
    to { opacity: 1; transform: translateY(-50%) translateY(0); }
}

@media (max-width: 1279px) {
    .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .works-archive__side { display: none; }
}

@media (max-width: 767px) {
    .works-archive { padding-top: 144px; }
    body.admin-bar.category-works .works-archive { padding-top: 190px; }
    .works-filter {
        left: var(--spacing-x);
        right: var(--spacing-x);
        top: 88px;
        justify-content: flex-start;
        gap: 28px;
        overflow-x: auto;
        transform: none;
        scrollbar-width: none;
    }
    body.admin-bar.category-works .works-filter { top: 134px; }
    .works-filter::-webkit-scrollbar { display: none; }
    .works-filter__label { font-size: 18px; line-height: 32px; }
    .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .work-card__body { left: 18px; right: 18px; bottom: 18px; }
    .work-card__client { font-size: 12px; line-height: 18px; }
    .work-card__title { font-size: 18px; line-height: 28px; }
    .work-card__meta { font-size: 12px; line-height: 18px; }
    .work-card__tags { display: none; }
}

/* ── Single Footer ───────────────────────────────────── */
.single-footer {
    background: #fff;
    color: #000;
    padding: 0 var(--spacing-x) 80px;
}

.single-footer__inner {
    max-width: 1224px;
    margin: 0 auto;
}

.single-footer__bottom {
    display: flex;
    align-items: center;
    gap: 128px;
    padding-top: 64px;
}

.single-footer__logo img {
    height: 40px;
    width: auto;
    display: block;
}

.single-footer__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.single-footer__address {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
    font-style: normal;
}

.single-footer__address a {
    color: inherit;
    text-decoration: none;
}

.single-footer__address a:hover {
    text-decoration: underline;
}

.single-footer__copy {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #585858;
}

@media (max-width: 767px) {
    .single-footer {
        padding-bottom: 60px;
    }
    .single-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding-top: 40px;
    }
    .single-footer__address {
        font-size: 13px;
        line-height: 22px;
    }
}

/* ──────────────────────────────────────────────── */
/* ── WordPress Admin Bar 대응 ────────────────────────────── */
/* 아래 헤더/네비게이션 유지 (수정 불필요) */
/* ─── WordPress Admin Bar 대응 ───────────────────────────── */
/* 데스크탑: admin bar 32px */
body.admin-bar .site-header {
    top: 32px;
}

body.admin-bar .nav-panel {
    top: 32px;
    height: calc(100vh - 32px);
}

/* 모바일: admin bar 46px (≤782px) */
@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }

    body.admin-bar .nav-panel {
        top: 46px;
        height: calc(100vh - 46px);
    }
}