/* ───────── 그누보드 컨테이너 강제 해제 (showcase 전용) ───────── */
html { width: 100% !important; overflow-x: hidden !important; scrollbar-gutter: stable; }
body { width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; margin: 0 !important; background: #fff; }
#hd, #ft, #wrapper, #container_wr, #container, #hd_wr, #ft_wr { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; height: auto !important; }
#container_title, #skip_to_container { display: none !important; }

/* ───────── Showcase: 공통 레이아웃 ───────── */
.showcase-page { background: #fff; color: #111; margin: 0; padding-top: 263px; }
.project-container { position: relative; width: 100%; margin-bottom: 0; padding-bottom: 80px; border-bottom: 1px solid #eee; }

/* 공통 섹션/그리드 스타일 */
.case-title { width: 94%; margin: 0 auto 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.case-title .logo { display: flex; align-items: center; overflow: hidden; min-height: clamp(72px, 9vw, 130px); line-height: 1; }
.case-title .logo img { height: clamp(72px, 9vw, 130px); width: auto; object-fit: contain; display: block; }
.case-title .logo .fallback { font-weight: 900; font-size: clamp(56px, 8vw, 110px); letter-spacing: -.03em; color: #000; line-height: 1; display: block; white-space: nowrap; will-change: transform, opacity; }
.case-title .meta-top { display: flex; gap: 22px; font-family: 'Inter', sans-serif; text-transform: uppercase; font-size: 11px; letter-spacing: .25em; font-weight: 600; color: #555; }
.case-title .meta-top span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; background: #F85A03; border-radius: 50%; margin-right: 22px; transform: translateX(-11px); vertical-align: middle; }

.case-banner { position: relative; width: 94%; margin: 0 auto; height: calc(75vh + 128px); border-radius: 30px; overflow: hidden; background: #0b0b0d; transform: translateZ(0); isolation: isolate; }
.case-banner .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; will-change: transform; background: #000; pointer-events: none; }
.case-video-full video { pointer-events: none; }
.case-banner .mask { position: absolute; top: 50%; left: 78px; transform: translateY(-50%); width: 140px; height: 140px; z-index: 2; object-fit: cover; background: #fff; display: block; pointer-events: none; }
.case-banner .side-text { position: absolute; top: 50%; left: 250px; transform: translateY(-50%); z-index: 3; text-align: left; color: #fff; font-family: 'Inter', sans-serif; }
.case-banner .side-text h2 { font-size: 3.5vw; font-weight: 700; margin-bottom: 15px; letter-spacing: 0.05em; line-height: 1.2; }
.case-banner .side-text p { font-size: 1vw; font-weight: 300; letter-spacing: 0.2em; opacity: 0.9; }
.case-banner .bottom { position: absolute; left: 32px; right: 32px; bottom: 28px; z-index: 5; display: flex; justify-content: space-between; align-items: flex-end; color: rgba(255,255,255,.85); font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; }
.case-banner .scroll-hint { display: flex; align-items: center; gap: 12px; }
.case-banner .scroll-hint::after { content: ''; display: inline-block; width: 1px; height: 36px; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)); animation: scrollPulse 2.2s ease-in-out infinite; }
@keyframes scrollPulse { 0% { transform: scaleY(0); transform-origin: top; opacity: .9; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } }

.case-section { width: 94%; max-width: 1480px; margin: 0 auto; padding: 120px 0; }
.case-section:first-of-type { border-top: 0; padding-top: 120px; }
.case-full-img {
    width: 94%;
    max-width: 1480px;
    margin: 100px auto 20px;
    border-radius: 30px;
    overflow: hidden;
    position: relative; /* 겹침 시 라운드 보존을 위해 추가 */
    z-index: 2;         /* 이전 섹션보다 위에 오도록 설정 */
}
.case-full-img img { width: 100%; height: auto; display: block; }
.case-video-full { width: 94%; max-width: 860px; margin: 80px auto 140px; overflow: hidden; background: #000; }
.case-video-full video { width: 100%; height: auto; display: block; }
.case-caption { width: 94%; max-width: 1480px; margin: 0 auto 0px; font-family: 'Inter', sans-serif; font-size: 12px; color: #999; text-align: right; letter-spacing: 0.02em; }
.case-img-grid { width: 94%; max-width: 1480px; margin: 40px auto; display: grid; grid-template-columns: 7fr 3fr; gap: 30px; }
.case-img-grid.reverse { grid-template-columns: 6.5fr 3.5fr; margin-bottom: 20px; }
.case-img-grid .img-item { border-radius: 30px; overflow: hidden; height: clamp(400px, 45vw, 800px); }
.case-img-grid .img-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-img-grid .text-item { padding: 0 0 0 40px; display: flex; flex-direction: column; justify-content: center; font-family: 'Inter', 'Noto Sans KR', sans-serif; }
.case-img-grid .text-item .tag { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #F85A03; font-weight: 700; margin-bottom: 20px; }
.case-img-grid .text-item h4 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.3; font-weight: 700; color: #000; margin-bottom: 22px; }
.case-img-grid .text-item p { font-size: 18px; line-height: 1.7; color: #333; margin-bottom: 24px; }
.case-img-grid .text-item .small { font-size: 16px; color: #666; line-height: 1.85; }

.approach-bullets { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; border-top: 1px solid #e9e9ec; padding-top: 32px; }
.approach-bullets b { display: block; font-size: 17px; font-weight: 700; color: #000; margin-bottom: 8px; }
.approach-bullets b::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #F85A03; border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.approach-bullets span { font-size: 14px; color: #666; padding-left: 15px; display: block; }

.case-img-grid-3 { width: 94%; max-width: 1480px; margin: 0 auto 100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-img-grid-3 .img-item { border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4; }
.case-img-grid-3 .img-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.case-grid { display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start; }
.col-label .label-tag { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: #888; font-weight: 600; position: sticky; top: 120px; display: inline-block; }
.col-body { font-family: 'Inter', 'Noto Sans KR', sans-serif; color: #1a1a1c; line-height: 1.7; font-size: 17px; }
.col-body .lead { font-size: clamp(20px, 2vw, 28px); line-height: 1.55; font-weight: 400; color: #111; margin: 0; }
.block-title { font-family: 'Inter', 'Noto Sans KR', sans-serif; font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.25; margin: 0 0 22px; color: #000; }

.case-block.alt { width: 100%; max-width: none; background: #fff; padding: 120px 0; }
.case-block.alt .case-grid { width: 94%; max-width: 1480px; margin: 0 auto; }

.meta-table { margin-top: 80px; border-top: 1px solid #e9e9ec; }
.meta-row { display: grid; grid-template-columns: 220px 1fr; gap: 60px; padding: 22px 0; border-bottom: 1px solid #e9e9ec; font-family: 'Inter', sans-serif; font-size: 15px; }
.meta-row .k { color: #888; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; padding-top: 4px; }
.meta-row .v { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.meta-row .v em { font-style: normal; color: #1a1a1c; }
.meta-row .v em::before { content: ''; display: inline-block; width: 4px; height: 4px; background: #F85A03; border-radius: 50%; margin-right: 8px; vertical-align: middle; }

.case-quote { text-align: center; padding: 160px 0; border-top: 1px solid #e9e9ec; }
.case-quote blockquote { font-family: 'Inter', 'Noto Serif KR', serif; font-weight: 300; font-size: clamp(28px, 4vw, 56px); line-height: 1.35; margin: 0; color: #111; }
.case-quote .hl { color: #F85A03; font-weight: 500; }
.case-quote cite { display: block; margin-top: 28px; font-style: normal; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: #888; }

.deliv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.deliv-grid li { display: flex; gap: 22px; padding: 28px 0; border-top: 1px solid #e9e9ec; }
.deliv-grid .num { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px; color: #F85A03; width: 44px; flex-shrink: 0; padding-top: 4px; }
.deliv-grid b { display: block; font-size: 22px; font-weight: 700; color: #000; margin-bottom: 10px; }
.deliv-grid p { margin: 0; font-size: 16px; color: #555; line-height: 1.65; }

.project-link { margin-bottom: 24px; }
.project-link .domain { font-size: 16px; font-weight: 600; color: #F85A03; text-decoration: none; border-bottom: 1px solid rgba(248, 90, 3, 0.3); padding-bottom: 4px; }
.btn-wrap { margin-top: 50px; }
.btn-more { display: inline-flex; align-items: center; gap: 12px; background: #000; color: #fff; padding: 20px 40px; border-radius: 40px; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0.1em; transition: all 0.4s cubic-bezier(.22,.6,.18,1); }
.btn-more svg { width: 18px; height: 18px; transition: transform 0.4s ease; }
.btn-more:hover { background: #F85A03; transform: translateY(-4px); box-shadow: 0 15px 30px rgba(248, 90, 3, 0.2); }
.btn-more:hover svg { transform: translateX(5px); }

/* 초기 상태 리빌용 (라운드 값 유지) */
.case-title .logo .fallback, .case-title .meta-top span { opacity: 0; visibility: hidden; }
.case-banner { clip-path: inset(100% 0 0 0 round 30px); -webkit-clip-path: inset(100% 0 0 0 round 30px); }
.case-banner .bottom { opacity: 0; visibility: hidden; }

@media (max-width: 768px) {
    .showcase-page { padding-top: 110px; }
    .case-title { width: 92%; margin-bottom: 22px; }
    .case-title .logo { min-height: 0; height: auto; line-height: 1.15; }
    .case-title .logo .fallback {
        font-size: clamp(22px, 6.2vw, 34px);
        white-space: normal;
        line-height: 1.18;
        letter-spacing: -.02em;
    }
    .case-title .logo .fallback span { display: inline; font-size: inherit; }
    .case-title .meta-top {
        flex-wrap: wrap;
        gap: 6px 10px;
        font-size: 5px;
        letter-spacing: .18em;
    }
    .case-title .meta-top span + span::before {
        margin-right: 10px;
        transform: translateX(-5px);
        width: 3px;
        height: 3px;
    }
    .case-grid { grid-template-columns: 1fr; gap: 22px; }
    .approach-bullets { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; margin-top: 24px; }
    .case-quote blockquote { font-size: clamp(18px, 4.6vw, 22px); line-height: 1.4; }
    .deliv-grid { grid-template-columns: 1fr; gap: 0; }
    .deliv-grid li { padding: 18px 0; gap: 14px; }
    .deliv-grid b { font-size: 17px; margin-bottom: 6px; }
    .deliv-grid p { font-size: 14px; line-height: 1.55; }
    .deliv-grid .num { font-size: 15px; width: 32px; padding-top: 2px; }
    .case-banner .mask { width: 72px; height: 72px; left: 18px; }
    .case-img-grid-3 { grid-template-columns: 1fr !important; gap: 16px; margin-bottom: 60px; }
    .case-img-grid-3 .img-item { aspect-ratio: 4 / 3; }
    .col-label .label-tag { position: static; }
    .meta-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
    .case-section { padding: 80px 0; }
}