*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --bg: #0a0a0a;
      --white: #f0f0f0;
      --gray-1: #888;
      --gray-2: #444;
      --border: rgba(255,255,255,0.08);
      --px: 48px;   /* horizontal padding — overridden on mobile */
    }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--white);
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      overflow-x: hidden;
      cursor: none;
    }
    a { text-decoration: none; color: inherit; }
    ::-webkit-scrollbar { width: 3px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: #333; }

    /* ══ CURSOR (desktop only) ══ */
    .cursor {
      width: 8px; height: 8px;
      background: var(--white);
      border-radius: 50%;
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: width 0.3s cubic-bezier(0.16,1,0.3,1),
                  height 0.3s cubic-bezier(0.16,1,0.3,1);
      mix-blend-mode: difference;
    }
    .cursor.expand { width: 52px; height: 52px; }

    /* ══ NAV ══ */
    nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex; justify-content: space-between; align-items: center;
      padding: 28px var(--px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    nav.pf-hidden {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
    }
    .nav-logo { font-size: 18px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--white); font-weight:800;}
    .nav-links { display: none; }

    /* hamburger — always visible (desktop + mobile) */
    .nav-hamburger {
      display: flex;
      flex-direction: column;
      gap: 10px;
      cursor: pointer;
      padding: 4px;
      background: none; border: none;
    }
    .nav-hamburger span {
      display: block; width: 44px; height:4px;
      background: var(--white);
      transition: transform 0.35s ease, opacity 0.35s ease;
    }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(16px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-11.5px) rotate(-45deg); }

    /* mobile nav drawer */
    .nav-drawer {
      position: fixed; inset: 0;
      background: #0a0a0a;
      z-index: 99;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 88px var(--px) 48px;   /* 88px = nav 높이만큼 상단 여백 */
      visibility: hidden;
      opacity: 0;
      transform: translateY(-24px);
      transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
    }
    .nav-drawer.open {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0s;
    }
    .nav-drawer > a {
      display: flex;
      align-items: baseline;
      gap: 16px;
      font-size: clamp(32px, 9vw, 48px);
      font-weight: 700;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      color: var(--white);
      padding: 14px 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      width: 100%;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s;
    }
    /* 열릴 때 */
    .nav-drawer.open > a { opacity: 1; transform: translateY(0); }
    .nav-drawer.open > a:nth-child(1) { transition-delay: 0.07s; }
    .nav-drawer.open > a:nth-child(2) { transition-delay: 0.13s; }
    .nav-drawer.open > a:nth-child(3) { transition-delay: 0.19s; }
    .nav-drawer.open > a:nth-child(4) { transition-delay: 0.25s; }
    .nav-drawer.open > a:nth-child(5) { transition-delay: 0.31s; }
    /* 닫힐 때 */
    .nav-drawer.closing > a { opacity: 0; transform: translateY(16px); }
    .nav-drawer.closing > a:nth-child(1) { transition-delay: 0s; }
    .nav-drawer.closing > a:nth-child(2) { transition-delay: 0.04s; }
    .nav-drawer.closing > a:nth-child(3) { transition-delay: 0.08s; }
    .nav-drawer.closing > a:nth-child(4) { transition-delay: 0.12s; }
    .nav-drawer.closing > a:nth-child(5) { transition-delay: 0.16s; }
    .nav-drawer > a:hover { color: rgba(255,255,255,0.4); }
    /* 연락처 블럭 — Blog 바로 아래 */
    .drawer-info {
      display: flex; gap: 0; flex-wrap: nowrap;
      margin-top: 0;
      border-top: none;
      opacity: 0;
      transition: opacity 0.4s ease 0.35s;
    }
    .nav-drawer.open .drawer-info { opacity: 1; }
    .nav-drawer.closing .drawer-info { opacity: 0; transition-delay: 0s; }
    .drawer-info-col {
      display: flex; flex-direction: column; gap: 5px;
      padding: 16px 32px 16px 0;
      width:50%;
    }
    .drawer-info-col:last-child { border-right: none; margin-right: 0; }
    .drawer-info-label {
      font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--gray-2);
    }
    .drawer-info-val {
      font-size: 13px; color: rgba(255,255,255,0.55);
      transition: color 0.2s;
    }
    a.drawer-info-val:hover { color: var(--white); }
    .drawer-num {
      font-size: 10px;
      letter-spacing: 0.25em;
      color: var(--gray-2);
      font-weight: 400;
      min-width: 20px;
    }

    /* ══ HERO ══ */
    .hero-block {
      position: relative; height: 100vh;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; background: var(--bg);
    }
    .img-clip {
      position: absolute; inset: 0;
      clip-path: inset(18% 30% 18% 30%);
      will-change: clip-path;
    }
    .img-clip .img-placeholder {
      position: absolute;
      inset: -8%; width: 116%; height: 116%;
      object-fit: cover; will-change: transform;
    }
    .img-placeholder   { background: linear-gradient(160deg, #2a2a2a 0%, #111 100%); }
    .img-placeholder-2 { background: linear-gradient(160deg, #1a1a2e 0%, #0d0d0d 100%); }

    .hero-text { position: absolute; z-index: 10; pointer-events: none; }
    .hero-text-br { bottom: 10%; right: 6%; text-align: right; }
    .hero-title-word {
      font-size: clamp(56px, 14vw, 200px);
      font-weight: 900; letter-spacing: -0.04em; line-height: 0.85;
      text-transform: uppercase; color: var(--white);
      mix-blend-mode: difference; display: block; overflow: hidden;
    }
    .hero-title-word span {
      display: block; transform: translateY(110%); opacity: 0;
      animation: slideUp 1s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    .hero-title-word:nth-child(1) span { animation-delay: 0.6s; }
    .hero-title-word:nth-child(2) span {
      animation-delay: 0.8s;
      -webkit-text-stroke: 1px rgba(255,255,255,0.5); color: transparent;
    }
    .hero-eyebrow {
      position: absolute; top: 50%; left: 6%;
      transform: translateY(-50%);
      writing-mode: vertical-rl; text-orientation: mixed;
      font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
      color: var(--gray-1); opacity: 0;
      animation: fadeIn 1s ease 1.2s forwards;
    }
    .scroll-hint {
      position: absolute; bottom: 36px; left: 50%;
      transform: translateX(-50%); z-index: 20;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      opacity: 0; animation: fadeIn 1s ease 1.5s forwards;
    }
    .scroll-hint span { font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gray-2); }
    .scroll-hint::after {
      content: ''; width: 1px; height: 48px;
      background: linear-gradient(to bottom, var(--gray-2), transparent);
      animation: linePulse 2s ease-in-out infinite;
    }

    /* ══ MARQUEE ══ */
    .marquee-wrap {
      overflow: hidden;
      /*border-top: 1px solid var(--border); */
      border-bottom: 1px solid var(--border);
      padding: 13px 0; background: var(--bg);
    }
    .marquee-track { display: flex; white-space: nowrap; animation: marquee 22s linear infinite; }
    .marquee-track span { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color:#ffffff; padding: 0 32px; }
    .marquee-track span.dot { color: var(--gray-1); padding: 0 2px; }

    /* ══ SECTION COMMON ══ */
    .section-label { font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gray-1); padding: 0 var(--px); margin-bottom: 40px; }

    /* ══ PROJECTS ══ */
    #work { background: var(--bg); padding: 80px 0 0; }
    
    .project-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 24px var(--px);
      border-bottom: 1px solid var(--border); cursor: pointer;
      transition: padding-left 0.35s ease; position: relative; overflow: hidden;
    }
    
    .project-num { font-size: 11px; color: var(--gray-2); width: 40px; flex-shrink: 0; }
    .project-info { flex: 1; margin-left: 24px; }
    .project-name {
      font-size: clamp(24px, 5vw, 64px);
      font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase;
      color: var(--white); transition: color 0.3s; line-height: 1;
    }
    .project-item:hover .project-name { color: rgba(255,255,255,0.5); }
    .project-sub { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-1); margin-top: 4px; }
    .project-tags { display: flex; gap: 8px; margin-right: 16px; flex-shrink: 0; }
    .project-tags span { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-2); border: 1px solid var(--border); padding: 3px 10px; }
    .project-arrow { font-size: 16px; color: var(--gray-2); flex-shrink: 0; transition: transform 0.3s, color 0.3s; }
    .project-item:hover .project-arrow { transform: translateX(8px); color: var(--white); }

    /* ══ SERVICES — FULLSCREEN STACK ══
       구조:
       - #services = 4 × 100vh 높이 (스크롤 공간)
       - .svc-wrap = position:sticky, top:0, height:100vh (뷰포트 고정)
       - .svc-panel × 4 = absolute, inset:0 (각 패널 풀스크린)
       - 패널 2~4는 translateY(-100%)로 위에 대기
       - 스크롤 진행에 따라 순차 translateY(0)으로 내려옴
    ══ */
    #services {
      position: relative;
      height: 400vh;   /* 4 panels × 100vh */
    }
    .svc-wrap {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    .svc-panel {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 var(--px) 72px;
      will-change: transform;
    }
    /* panel 1 = 항상 바닥에 */
    #svcPanel1 { transform: translateY(0%);    z-index: 1; }
    /* panel 2~4 = 위에서 대기 */
    #svcPanel2 { transform: translateY(-100%); z-index: 2; }
    #svcPanel3 { transform: translateY(-100%); z-index: 3; }
    #svcPanel4 { transform: translateY(-100%); z-index: 4; }

    /* 패널 배경 레이어 */
    .svc-panel-bg {
      position: absolute; inset: 0; z-index: 0;
      overflow: hidden;
    }
    .svc-panel-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      transform: scale(1.05);
      transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
      will-change: transform;
    }
    .svc-panel.in .svc-panel-bg img {
      transform: scale(1);
    }

    /* 어두운 그라디언트 오버레이 — 텍스트 가독성 */
    .svc-panel::after {
      content: '';
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.4) 40%,
        rgba(0,0,0,0.2) 100%
      );
      pointer-events: none;
    }

    /* 콘텐츠 */
    .svc-panel-content {
      position: relative; z-index: 2;
    }
    .svc-num {
      font-size: 11px; letter-spacing: 0.35em;
      text-transform: uppercase; color: rgba(255,255,255,0.4);
      margin-bottom: 20px; display: block;
    }
    .svc-title {
      font-size: clamp(64px, 13vw, 180px);
      font-weight: 900; letter-spacing: -0.04em; line-height: 0.85;
      text-transform: uppercase; color: var(--white);
      margin-bottom: 36px; display: block;
    }
    .svc-meta {
      display: flex; align-items: flex-end;
      justify-content: space-between; flex-wrap: wrap; gap: 24px;
      max-width: 900px;
    }
    .svc-desc {
      font-size: 14px; line-height: 1.85;
      color: rgba(255,255,255,0.5); max-width:auto;
    }
    .svc-tags { display: flex; gap: 8px; flex-wrap: wrap; }
    .svc-tags span {
      font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      border: 1px solid rgba(255,255,255,0.12); padding: 5px 14px;
    }

    /* 우측 하단 큰 번호 */
    .svc-big-num {
      position: absolute; bottom: 64px; right: var(--px);
      z-index: 2;
      font-size: clamp(100px, 18vw, 240px);
      font-weight: 900; letter-spacing: -0.05em; line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,0.1);
      pointer-events: none; user-select: none;
    }

    /* 상단 진행 바 */
    .svc-progress {
      position: absolute; top: 0; left: 0; right: 0;
      height: 1px; z-index: 10;
      background: rgba(255,255,255,0.06);
    }
    .svc-progress-fill {
      height: 100%; width: 0%;
      background: rgba(255,255,255,0.4);
    }

    /* 패널 번호 인디케이터 — 좌상단 */
    .svc-indicator {
      position: absolute; top: 100px; left: var(--px);
      z-index: 2;
      display: flex; flex-direction: column; gap: 6px;
    }
    .svc-dot {
      width: 24px; height: 1px;
      background: rgba(255,255,255,0.2);
      transition: width 0.4s ease, background 0.4s ease;
    }
    .svc-dot.on { width: 40px; background: rgba(255,255,255,0.7); }

    /* 콘텐츠 진입 애니메이션 */
    .svc-panel-content,
    .svc-big-num {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease 0.2s, transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.2s;
    }
    .svc-panel.in .svc-panel-content,
    .svc-panel.in .svc-big-num {
      opacity: 1; transform: translateY(0);
    }
    /* 패널 1은 처음부터 보임 */
    #svcPanel1 .svc-panel-content,
    #svcPanel1 .svc-big-num { opacity: 1; transform: translateY(0); }

    @media (max-width: 768px) {
      .svc-title { font-size: clamp(48px, 16vw, 100px); }
      .svc-big-num { font-size: clamp(80px, 22vw, 140px); bottom: 48px; }
      .svc-meta { flex-direction: column; align-items: flex-start; }
      .svc-indicator { top: 80px; }
    }

    /* ══ PROCESS ══ */
    #process { padding: 80px 0; background: var(--bg); /*border-top: 1px solid var(--border);*/ }
    .process-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /*border-left: 1px solid var(--border);*/
      margin: 0 auto;
      width:96%;
    }
    .process-item {
      padding: 56px var(--px) 56px calc(var(--px) * 0.75);
      border-right: 1px solid var(--border);
      /*border-top: 1px solid var(--border);*/
      opacity: 0; transform: translateY(24px);
      transition: opacity 0.75s ease, transform 0.75s ease;
    }
    .process-item.visible { opacity: 1; transform: translateY(0); }
    .process-item:nth-child(2) { transition-delay: 0.12s; }
    .process-item:nth-child(3) { transition-delay: 0.24s; border-right:none;}
    .process-big-num {
      display: block;
      font-size: clamp(56px, 7vw, 100px); font-weight: 900; line-height: 1;
      color: rgba(255,255,255,0.06);
      transition: color 0.3s; user-select: none;
      margin-bottom: 24px;
    }
    .process-item:hover .process-big-num { color: rgba(255,255,255,0.14); }
    .process-title { font-size: clamp(22px, 2.8vw, 36px); font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
    .process-desc { font-size: 14px; line-height: 1.85; color: var(--gray-1); }

    /* ══ ABOUT ══ */
    #about { padding: 80px 0; background: var(--bg); /*border-top: 1px solid var(--border);*/ }
    .about-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 48px; padding: 0 var(--px); margin-bottom: 80px;
    }
    .about-text-main { font-size: clamp(15px, 1.8vw, 20px); line-height: 1.8; color: rgba(255,255,255,0.8); }
    .about-text-sub { font-size: clamp(14px, 1.5vw, 17px); line-height: 1.8; color: var(--gray-1); margin-top: 24px; }

    /* ══ PORTFOLIO — ACCORDION UNFOLD ══
       이미지 레퍼런스: 1장 펼침 + 나머지 오른쪽에 얇게 겹침
       스크롤 시 한 장씩 펼쳐지며 왼쪽으로 밀림
    ══════════════════════════════════════════ */
    #portfolio {
      background: var(--bg);
      /*border-top: 1px solid var(--border);*/
    }
    /* 스크롤 공간: 카드 한 장당 80vh */
    .pf-scroll-space {
      height: calc(100vh + 7 * 80vh);
    }
    .pf-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
    }

    /* 상단 헤더 바 */
    .pf-header-bar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--px);
      border-bottom: 1px solid var(--border);
      z-index: 200;
      background: rgba(10,10,10,0.95);
      backdrop-filter: blur(12px);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .pf-header-bar.pf-bar-visible {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
    }
    .pf-header-left {
      display: flex; align-items: baseline; gap: 32px;
    }
    .pf-header-title {
      font-size: clamp(13px, 1.5vw, 17px);
      font-weight: 900; letter-spacing: -0.02em;
      text-transform: uppercase; color: var(--white);
    }
    .pf-header-sub {
      font-size: 11px; letter-spacing: 0.15em;
      color: var(--gray-2); text-transform: uppercase;
    }
    .pf-counter {
      font-size: 11px; letter-spacing: 0.2em;
      color: var(--gray-2);
    }
    .pf-counter span { color: var(--white); }
    .pf-header-right {
      display: flex; align-items: center; gap: 28px;
    }
    .pf-view-all {
      font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
      color: var(--gray-1); border: 1px solid var(--border);
      padding: 8px 20px;
      transition: color 0.3s, border-color 0.3s, background 0.3s;
      white-space: nowrap;
    }
    .pf-view-all:hover {
      color: var(--bg); background: var(--white); border-color: var(--white);
    }
    .pf-view-all span { margin-left: 4px; }

    /* 카드 무대 — 헤더 아래 전체 */
    .pf-stage {
      position: absolute;
      top: 72px; left: 0; right: 0; bottom: 0;
    }

    /* 개별 카드 */
    .pf-card {
      position: absolute;
      top: 0; bottom: 0;
      overflow: hidden;
      cursor: pointer;
      will-change: left, width;
    }
    .pf-card-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
    }
    .pf-card:hover .pf-card-img { transform: scale(1.04); }
    .pf-card-bg { position: absolute; inset: 0; }

    .pf-grad-1 { background: linear-gradient(160deg, #1c1c2e 0%, #0d0d18 100%); }
    .pf-grad-2 { background: linear-gradient(160deg, #2a1a10 0%, #160e08 100%); }
    .pf-grad-3 { background: linear-gradient(160deg, #0e1a0e 0%, #09100a 100%); }
    .pf-grad-4 { background: linear-gradient(160deg, #1a0e0e 0%, #120909 100%); }
    .pf-grad-5 { background: linear-gradient(160deg, #0d0d1c 0%, #09090f 100%); }
    .pf-grad-6 { background: linear-gradient(160deg, #1a1810 0%, #110f09 100%); }
    .pf-grad-7 { background: linear-gradient(160deg, #101a1a 0%, #090f0f 100%); }
    .pf-grad-8 { background: linear-gradient(160deg, #1a1020 0%, #110a14 100%); }

    .pf-overlay {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
    }

    /* 펼쳐진 카드 info */
    .pf-info {
      position: absolute; bottom: 0; left: 0; right: 0;
      z-index: 3; padding: clamp(20px, 3vh, 40px) clamp(20px, 3vw, 40px);
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .pf-card.pf-open .pf-info { opacity: 1; }

    .pf-category {
      font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase;
      color: rgba(255,255,255,0.45); margin-bottom: 10px;
    }
    .pf-name {
      font-size: clamp(16px, 5vw, 32px);
      font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase;
      color: var(--white); line-height: 1.0;
    }
    .pf-year-open {
      font-size: 10px; letter-spacing: 0.2em;
      color: rgba(255,255,255,0.35); margin-top: 12px;
      display: block;
    }

    /* 겹쳐진 카드 — 세로 제목 */
    .pf-sliver-info {
      position: absolute;
      top: 0; left: 0; bottom: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: clamp(16px, 2.5vh, 32px) 0 clamp(16px, 2.5vh, 32px) clamp(10px, 1.5vw, 18px);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .pf-card.pf-stacked .pf-sliver-info { opacity: 1; }
    .pf-sliver-name {
      font-size: clamp(9px, 1vw, 12px);
      font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      white-space: nowrap;
    }
    .pf-sliver-num {
      font-size: 9px; letter-spacing: 0.1em;
      color: rgba(255,255,255,0.25);
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      margin-bottom: 8px;
    }

    /* ── 데스크탑 전용: 수평 아코디언 ── */
    @media (min-width: 769px) {
      .pf-card-mobile-only { display: none; }
      .nav-hamburger {
            display: flex;
            flex-direction: column;
            gap: 10px;
            cursor: pointer;
            padding: 4px;
            background: none;
            border: none;
      }

      .nav-hamburger span {
            display: block;
            width: 32px;
            height: 2px;
            background: var(--white);
            transition: transform 0.35s ease, opacity 0.35s ease;
      }

      .nav-hamburger.open span:nth-child(1) {transform: translateY(12.5px) rotate(45deg);}
      .nav-hamburger.open span:nth-child(2) {opacity: 0;transform: scaleX(0);}
      .nav-hamburger.open span:nth-child(3) {transform: translateY(-11.5px) rotate(-45deg);}
    }

    /* ── 모바일: 세로 스택 ── */
    @media (max-width: 768px) {
      /* 스크롤 공간: 카드 8장 × 100vh */
      .nav-logo {font-size:16px;}
      .nav-hamburger {
           display: flex;
           flex-direction: column;
           gap:7px;
           cursor: pointer;
           padding: 4px;
           background: none;
           border: none;
      }
      .nav-hamburger span {
           display: block;
           width: 32px;
           height: 2px;
           background: var(--white);
           transition: transform 0.35s ease, opacity 0.35s ease;
      }
      .nav-hamburger.open span:nth-child(1) {transform: translateY(12.5px) rotate(45deg);}
      .nav-hamburger.open span:nth-child(2) {opacity: 0;transform: scaleX(0);}
      .nav-hamburger.open span:nth-child(3) {transform: translateY(-6.5px) rotate(-45deg);}
      .nav-drawer > a {font-size: clamp(20px, 9vw, 18px);}
      .pf-scroll-space {height: calc(100vh + 7 * 80vh);}
      .pf-header-bar {height: 56px;position: fixed;}
      .pf-header-sub {display: none;}
      /* 무대: sticky, 헤더 아래 꽉 채움 */
      .pf-stage {top: 56px;}
      /* 카드: 무대 100% 풀스크린, 아래서 올라오는 방식 */
      .pf-card {
           width: 100% !important;
           left: 0 !important;
           top: 0 !important;
           height: 100% !important;
           transform: translateY(100%) !important;
           transition: none;
           will-change: transform;
      }
      /* 활성 카드 */
      .pf-card.pf-mobile-active {transform: translateY(0) !important;}
      /* 이미 지나간 카드 */
                .pf-card.pf-mobile-past {
                    transform: translateY(0) !important;
                }
            /* 모바일에서 슬라이버 텍스트 숨기고 info 항상 표시 */
            .pf-sliver-info {
                display: none;
            }

            .pf-info {
                opacity: 1 !important;
                padding: 32px 24px;
            }

            .pf-name {
                font-size: clamp(28px, 8vw, 48px);
            }

            .pf-overlay {
                background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
            }
        }

    /* ── About 버튼 ── */
    .about-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 40px;
      padding: 14px 32px;
      border: 1px solid rgba(255,255,255,0.25);
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--white);
      cursor: pointer;
      background: transparent;
      transition: background 0.3s, border-color 0.3s, color 0.3s;
    }
    .about-btn:hover {
      background: var(--white);
      color: var(--bg);
      border-color: var(--white);
    }
    .about-btn svg { transition: transform 0.3s; }
    .about-btn:hover svg { transform: translate(3px, -3px); }
    #contact {
      min-height: 100vh;
      background: var(--bg);
      /*border-top: 1px solid var(--border);*/
      display: flex; flex-direction: column; justify-content: space-between;
    }
    .contact-top { padding: 64px var(--px) 0; }
    .contact-cta { padding: 0 var(--px) 40px; }
    .contact-cta > a { display: block; line-height: 0.85; }
    .contact-word {
      font-size: clamp(60px, 14vw, 200px); font-weight: 900;
      letter-spacing: -0.04em; text-transform: uppercase; display: block;
      transition: color 0.4s, -webkit-text-stroke 0.4s;
    }
    .cw1 { color: var(--white); }
    .cw2 { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.18); }
    .contact-cta > a:hover .cw1 { color: rgba(255,255,255,0.45); }
    .contact-cta > a:hover .cw2 { color: rgba(255,255,255,0.04); -webkit-text-stroke: 2px rgba(255,255,255,0.55); }
    .contact-email { font-size: 12px; letter-spacing: 0.22em; color: var(--gray-1); display: block; margin-top: 28px; transition: color 0.3s; }
    .contact-email:hover { color: var(--white); }
    footer {
      padding: 20px var(--px); border-top: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px;
    }
    footer span { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gray-2); }
    .footer-links { display: flex; gap: 20px; }
    .footer-links a { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-2); transition: color 0.3s; }
    .footer-links a:hover { color: var(--white); }

    /* ══ REVEAL ══ */
    .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s ease, transform 0.8s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ══ KEYFRAMES ══ */
    @keyframes slideUp  { to { transform: translateY(0); opacity: 1; } }
    @keyframes fadeIn   { to { opacity: 1; } }
    @keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes linePulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

    /* ════════════════════════════════════════
       RESPONSIVE — TABLET  (max 1024px)
    ════════════════════════════════════════ */
    @media (max-width: 1024px) {
      :root { --px: 36px; }
      .about-grid { grid-template-columns: 1fr; }
      .about-grid > div:first-child { display: none; } /* hide empty col */
    }

    /* ════════════════════════════════════════
       RESPONSIVE — MOBILE  (max 768px)
    ════════════════════════════════════════ */
    @media (max-width: 768px) {
      :root { --px: 24px; }

      /* hide desktop cursor on touch */
      body { cursor: auto; }
      .cursor { display: none; }

      /* nav — mobile padding */
      nav { padding: 20px var(--px); }

      /* hero text smaller */
      .hero-eyebrow { display: none; }
      .hero-title-word { font-size: clamp(48px, 16vw, 100px); }
      .scroll-hint { bottom: 24px; }

      /* projects — hide tags on very small, shrink padding */
      .project-item { padding: 20px var(--px); }
      .project-item:hover { padding-left: calc(var(--px) + 8px); }
      .project-tags { display: none; }
      .project-num { width: 32px; }
      .project-info { margin-left: 16px; }

      /* services — tighter */
      #services { padding: 60px 0; }
      .service-row { padding: 0 var(--px); gap: 10px; }

      /* process */
      #process { padding: 60px 0; }
      .process-grid { grid-template-columns: 1fr; border-left: none; }
      .process-item { padding: 40px var(--px); border-right: none; border-bottom: 1px solid var(--border); }
      .process-item:last-child { border-bottom: none; }
      .process-big-num { font-size: 56px; margin-bottom: 16px; }

      /* about */
      #about { padding: 60px 0; }
      .about-grid { grid-template-columns: 1fr; margin-bottom: 48px; }
      .about-grid > div:first-child { display: none; }

      /* team — single column on mobile */
      .team-grid { grid-template-columns: 1fr; }
      .team-card { border-right: none; border-bottom: 1px solid var(--border); aspect-ratio: 4/3; }
      .team-card:last-child { border-bottom: none; }

      /* contact */
      .contact-top { padding-top: 48px; }
      .contact-cta { padding-bottom: 32px; }
      footer { padding: 20px var(--px); }
      .footer-links { gap: 16px; }
    }

    /* ════════════════════════════════════════
       RESPONSIVE — SMALL MOBILE  (max 480px)
    ════════════════════════════════════════ */
    @media (max-width: 480px) {
      :root { --px: 20px; }
      .hero-title-word { font-size: clamp(42px, 18vw, 80px); }
      .project-name { font-size: clamp(22px, 7vw, 40px); }
      .service-name { font-size: clamp(38px, 13vw, 80px); }
      footer { flex-direction: column; align-items: flex-start; gap: 16px; }
    }