:root {
    --content-bg: #f2f2f1;
    --content-text: #111;
    --content-muted: #777;
    --content-blue: #1477df;
    --content-line: rgba(17, 17, 17, .13);
}

.content-section,
.content-section * { box-sizing: border-box; }

.content-section {
    position: relative;
    overflow: hidden;
    padding: 185px 0 210px;
    background: var(--content-bg);
    color: var(--content-text);
    font-family: "Pretendard Variable", Pretendard, sans-serif;
}

.content-section__inner {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 10vw), 1460px);
    margin: 0 auto;
}

.content-section__header {
    position: relative;
    z-index: 2;
    max-width: 660px;
    margin-bottom: 82px;
}

.content-section__label {
    margin: 0;
    color: var(--content-blue);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .045em;
}

.content-section__accent-line {
    display: block;
    width: 1px;
    height: 16px;
    margin: 20px 0 26px;
    background: var(--content-blue);
}

.content-section__title {
    margin: 0;
    color: #0f1012;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(78px, 7vw, 102px);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.035em;
}

.content-section__description {
    max-width: 520px;
    margin: 27px 0 0;
    color: var(--content-muted);
    font-size: 15px;
    line-height: 1.8;
}

.content-section__watermark {
    position: absolute;
    z-index: 0;
    top: 42px;
    right: 7vw;
    color: #111;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(170px, 22vw, 350px);
    font-weight: 400;
    line-height: 1;
    opacity: .032;
    pointer-events: none;
    user-select: none;
}

.content-gallery {
    --content-columns: 5;
    --content-gap: 20px;
    display: grid;
    grid-template-columns: repeat(var(--content-columns), minmax(0, 1fr));
    gap: var(--content-gap);
    align-items: start;
}

.content-gallery-reveal {
    --content-collapsed-height: 980px;
    position: relative;
}

.content-gallery-viewport {
    position: relative;
    overflow: visible;
}

.content-gallery-reveal.is-reveal-ready.is-collapsible .content-gallery-viewport {
    overflow: hidden;
    max-height: var(--content-collapsed-height);
    transition: max-height .82s cubic-bezier(.22, .75, .2, 1);
}

.content-gallery-toggle[hidden] {
    display: none !important;
}

.content-gallery-toggle {
    display: flex;
    gap: 11px;
    align-items: center;
    justify-content: center;
    width: min(100%, 220px);
    min-height: 56px;
    margin: 30px auto 0;
    padding: 0 24px;
    border: 1px solid rgba(20, 20, 20, .11);
    background: transparent;
    color: #36393e;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.content-gallery-toggle__label {
    display: inline-flex;
    align-items: center;
    padding-left: .16em;
}

.content-gallery-toggle__arrow {
    display: grid;
    flex: 0 0 11px;
    place-items: center;
    transform: translateY(-2px);
    transition: transform .35s ease;
}

.content-gallery-toggle__arrow::before {
    width: 9px;
    height: 9px;
    border-right: 1px solid var(--content-blue);
    border-bottom: 1px solid var(--content-blue);
    content: "";
    transform: rotate(45deg);
    transition: transform .35s ease;
}

.content-gallery-toggle:hover,
.content-gallery-toggle:focus-visible {
    color: var(--content-blue);
    border-color: rgba(20, 20, 20, .2);
    background: rgba(255, 255, 255, .28);
}

.content-gallery-toggle:focus-visible {
    outline: 1px solid rgba(20, 119, 223, .55);
    outline-offset: 5px;
}

.content-gallery-reveal.is-expanded .content-gallery-toggle__arrow::before {
    transform: rotate(225deg);
}

.content-gallery-reveal.is-expanded .content-gallery-toggle__arrow {
    transform: translateY(2px);
}

.content-column {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    min-width: 0;
}

.content-card {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #dededc;
    color: #fff;
    cursor: pointer;
}

.content-card--square { aspect-ratio: 1 / 1; }
.content-card--portrait { aspect-ratio: 4 / 5; }
.content-card--tall { aspect-ratio: 3 / 5; }

.content-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .65, .3, 1);
}

.content-card__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(7, 10, 13, 0);
    opacity: 0;
    transition: opacity .3s ease, background-color .3s ease;
}

.content-card__zoom {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    color: #fff;
    transform: scale(.86);
    transition: transform .3s ease;
}

.content-card__zoom svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.content-card:hover img,
.content-card:focus-visible img { transform: scale(1.02); }

.content-card:hover .content-card__overlay,
.content-card:focus-visible .content-card__overlay {
    opacity: 1;
    background: rgba(7, 10, 13, .3);
}

.content-card:hover .content-card__zoom,
.content-card:focus-visible .content-card__zoom { transform: scale(1); }

.content-card:focus-visible {
    outline: 2px solid rgba(20, 119, 223, .85);
    outline-offset: 4px;
}

.content-section__empty {
    display: grid;
    place-content: center;
    min-height: 340px;
    border-top: 1px solid var(--content-line);
    border-bottom: 1px solid var(--content-line);
    color: #888;
    text-align: center;
}

.content-section__empty span { color: var(--content-blue); font-size: 12px; letter-spacing: .15em; }
.content-section__empty p { margin: 14px 0 0; font-size: 13px; }

/* Shared portfolio lightbox: single long Content image mode */
.ai-lightbox.is-scroll-image-mode .ai-lightbox__dialog {
    align-items: stretch;
    padding: 56px 76px 45px;
}

.ai-lightbox.is-scroll-image-mode .ai-lightbox__figure {
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    padding: 18px 28px 55px;
    overscroll-behavior: contain;
    text-align: center;
    scrollbar-color: rgba(77, 163, 255, .45) rgba(255, 255, 255, .08);
}

.ai-lightbox.is-scroll-image-mode .ai-lightbox__image {
    width: auto;
    max-width: min(100%, 1100px);
    max-height: none;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.ai-lightbox.is-scroll-image-mode .ai-lightbox__caption {
    position: fixed;
}

/* Re-entry reveal motion */
.content-section.is-motion-ready .content-section__label,
.content-section.is-motion-ready .content-section__accent-line,
.content-section.is-motion-ready .content-section__title,
.content-section.is-motion-ready .content-section__description,
.content-section.is-motion-ready .content-card {
    opacity: 0;
    transform: translateY(18px);
}

.content-section.is-motion-ready.is-visible .content-section__label,
.content-section.is-motion-ready.is-visible .content-section__accent-line,
.content-section.is-motion-ready.is-visible .content-section__title,
.content-section.is-motion-ready.is-visible .content-section__description,
.content-section.is-motion-ready.is-visible .content-card {
    opacity: 1;
    transform: translateY(0);
}

.content-section.is-motion-ready .content-section__label { transition: opacity .55s ease, transform .58s ease; }
.content-section.is-motion-ready .content-section__accent-line { transition: opacity .55s ease .04s, transform .58s ease .04s; }
.content-section.is-motion-ready .content-section__title { transition: opacity .68s ease .08s, transform .7s cubic-bezier(.22, .75, .2, 1) .08s; }
.content-section.is-motion-ready .content-section__description { transition: opacity .6s ease .16s, transform .65s ease .16s; }
.content-section.is-motion-ready .content-card { transition: opacity .55s ease, transform .62s cubic-bezier(.22, .75, .2, 1); }
.content-section.is-motion-ready .content-card:nth-child(2) { transition-delay: .06s; }
.content-section.is-motion-ready .content-card:nth-child(3) { transition-delay: .1s; }
.content-section.is-motion-ready .content-card:nth-child(n+4) { transition-delay: .14s; }

@media (max-width: 1279px) {
    .content-section { padding: 145px 0 165px; }
    .content-section__inner { width: min(calc(100% - 8vw), 1120px); }
    .content-section__header { margin-bottom: 70px; }
    .content-gallery { --content-columns: 3; --content-gap: 18px; }
    .content-gallery-reveal { --content-collapsed-height: 860px; }
}

@media (max-width: 767px) {
    .content-section { padding: 105px 0 120px; }
    .content-section__inner { width: auto; margin: 0 18px; }
    .content-section__header { margin-bottom: 52px; padding-right: 24px; }
    .content-section__label { font-size: 11px; }
    .content-section__accent-line { margin: 17px 0 22px; }
    .content-section__title { font-size: clamp(50px, 15vw, 62px); }
    .content-section__description { margin-top: 22px; font-size: 13px; line-height: 1.75; }
    .content-section__watermark { top: 28px; right: 0; font-size: 40vw; }
    .content-gallery { --content-columns: 2; --content-gap: 12px; }
    .content-gallery-reveal { --content-collapsed-height: 720px; }
    .content-gallery-toggle {
        width: min(100%, 220px);
        min-height: 54px;
        margin-top: 24px;
        padding: 0 22px;
    }
    .content-card { border-radius: 8px; }
    .content-card__zoom { width: 42px; height: 42px; }

    .ai-lightbox.is-scroll-image-mode .ai-lightbox__dialog {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        padding: 54px 6px 46px;
    }
    .ai-lightbox.is-scroll-image-mode .ai-lightbox__figure { padding: 10px 4px 40px; }
}

@media (max-width: 360px) {
    .content-gallery { --content-columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .content-section *,
    .content-card img { transition-duration: .01ms !important; animation: none !important; }
    .content-card:hover img,
    .content-card:focus-visible img { transform: none; }
}