@charset "utf-8";

/* ============================================================
   JOB OF BROTHERS — house style (main #222 / point lime)
   국문: Pretendard · 영문 디스플레이: Space Grotesk
============================================================ */

/* 색 설정 */
:root {
    --main-color: #222;
    --black-color: #111;
    --white-color: #fff;
    --gray-color: #8a8a8a;
    --line-color: #e9e9e9;
    --point-color: #4684ec;   /* 라임 포인트 */
    --dark-bg: #1a1a1a;
}

/* size (반응형 브레이크포인트 가이드)
@media screen and (max-width: 1250px) { }  // tablet
@media screen and (max-width: 1100px) { }  // nav → aside
@media screen and (max-width: 950px)  { }  // 중간
@media screen and (max-width: 650px)  { }  // mobile
*/

/* 스크롤바 / 드래그 커스텀 */
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-thumb { background-color: var(--main-color); border-radius: 10px; }
::selection { background-color: var(--point-color); color: #fff; }

/* default — 폰트/색 상속 */
* { font-size: inherit; font-weight: inherit; font-family: inherit; color: inherit; box-sizing: border-box; letter-spacing: inherit; line-height: inherit; }
body { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; letter-spacing: -0.04em; color: #222; background: #fff; line-height: 1.4; }
section { display: block; }
a { color: inherit; cursor: pointer; text-decoration: none; }
a:hover { color: inherit; text-decoration: none; }
p { word-break: keep-all; }
b { font-weight: 700; }
img { max-width: 100%; }

/* 영문 디스플레이 */
.en { font-family: 'Space Grotesk', 'Pretendard', sans-serif; letter-spacing: -0.02em; }

/* 레이아웃 컨테이너 — 넓고 유동적 (창 크기·줌 변화에도 항상 화면의 92% 비율 유지) */
.inner { width: min(92%, 1560px); margin: 0 auto; }
@media screen and (max-width: 650px) { .inner { width: 100%; padding: 0 5vw; } }

/* 포인트 텍스트 */
.point { color: var(--point-color); }
.gold  { color: var(--point-color); }

/* 헤더 offset (필요 페이지에서 본문 최상단 wrapper에 부여) */
.header-top { padding-top: 84px; }
@media screen and (max-width: 1000px) { .header-top { padding-top: 72px; } }
@media screen and (max-width: 650px)  { .header-top { padding-top: 64px; } }


/* ============================================================
   header
============================================================ */
/* Figma [JOB] 메인페이지 v2 의 header 그룹 기준 — 사각 칩 GNB + 아웃라인 CONTACT 박스.
   좌표 배치는 쓰지 않고 flex 로만 조립한다(position:absolute 미사용). */
header { --hd-point: #004EFB; transition: background .3s, padding .3s, border-radius .3s, top .3s; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; color: #fff; padding: 24px 0; }
header .inner { display: flex; align-items: center; gap: 20px; }
header .logo-link { display: flex; align-items: center; flex-shrink: 0; border: 1px solid transparent; border-radius: 2px; padding: 6px 0; max-width: 400px; overflow: hidden; transition: background .3s, border-color .3s, padding .3s, opacity .28s, max-width .32s cubic-bezier(.65,0,.35,1); }
header .logo-link .logo { height: 24px; width: auto; filter: invert(1); transition: filter .3s; /* 원본이 검정 로고 — invert 를 풀면 밝은 배경용 검정 로고가 된다 */ }

/* GNB — 로고 오른쪽에 붙는 사각 칩. 활성 항목만 포인트색으로 채운다 */
header nav { margin-left: 16px; }
header nav .menu-list { display: flex; align-items: center; gap: 6px; }
header nav .menu-list > li > a { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; background: #000; border: 1px solid rgba(255,255,255,.24); border-radius: 2px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.8); white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
header nav .menu-list > li > a:hover { border-color: rgba(255,255,255,.55); color: #fff; }
header nav .menu-list > li.active > a { background: var(--hd-point); border-color: var(--hd-point); color: #fff; }

/* 우측 CONTACT US — 화살표만 포인트색 */
header .btn-wrap { display: flex; align-items: center; gap: 14px; margin-left: auto; }
header .btn-wrap .contact-btn { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 22px; background: #000; border: 1px solid rgba(255,255,255,.32); border-radius: 2px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.92); white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
header .btn-wrap .contact-btn .arrow { font-family: 'Pretendard', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1; color: var(--hd-point); transition: color .25s; }
header .btn-wrap .contact-btn:hover { background: var(--hd-point); border-color: var(--hd-point); color: #fff; }
header .btn-wrap .contact-btn:hover .arrow { color: #fff; }
/* 햄버거 — .inner 의 직계 자식. 기본은 숨김(모바일에서만 노출) */
header .menu-btn { display: none; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; border: 1px solid transparent; border-radius: 2px; padding: 0; color: #fff; cursor: pointer; transition: background .25s, border-color .25s; }
header .menu-btn svg { width: 36px; height: 36px; }
header .menu-btn .ico-close { display: none; }

/* 스크롤 시 — 배경 패널 없이, GNB 를 접고 햄버거 버튼만 남긴다.
   패널이 사라지면 밝은 섹션 위에서 로고·햄버거가 안 보이므로, 둘에게 메뉴 칩과 같은 검정 칩을 입혀 가독성을 지킨다. */
header.on { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: 16px 0; }

header nav { transition: opacity .28s ease, transform .28s ease, max-width .32s cubic-bezier(.65,0,.35,1), margin-left .32s ease; max-width: 800px; overflow: hidden; }

/* 접힘 — 스크롤 내리면 GNB 가 왼쪽으로 말려들어가며 사라진다 */
header.on nav { opacity: 0; transform: translateX(-10px); max-width: 0; margin-left: 0; pointer-events: none; }
/* 펼침 — 햄버거를 누르면 같은 자리로 되돌아온다 */
header.on.nav-open nav { opacity: 1; transform: none; max-width: 800px; margin-left: 16px; pointer-events: auto; }

/* 로고도 같이 접힌다 — 스크롤 내리면 로고가 사라지고 그 자리(맨 왼쪽)를 햄버거가 대신한다 */
header.on .logo-link { opacity: 0; max-width: 0; padding: 0; margin: 0; border-color: transparent; pointer-events: none; }

/* 햄버거를 order:-1 로 맨 앞에 보내 로고 자리에 앉힌다. 배경은 브랜드 블루 */
header.on .menu-btn { order: -1; display: inline-flex; width: 42px; height: 40px; background: var(--hd-point); border-color: var(--hd-point); }
header.on .menu-btn svg { width: 22px; height: 22px; }
header.on .menu-btn:hover { background: #000; border-color: rgba(255,255,255,.24); }

/* 펼침 — GNB 만 돌아온다. 로고는 스크롤 이후 계속 숨긴 채로 둔다(햄버거가 그 자리를 대신하므로) */

/* 햄버거 ↔ X 아이콘 교체 */
header.nav-open .menu-btn .ico-open { display: none; }
header.nav-open .menu-btn .ico-close { display: block; }

/* ============================================================
   헤더 화이트 버전 (header.white)
   밝은 배경 위에 얹히는 페이지용. 배경은 기본형과 똑같이 투명하고,
   글자·보더·로고만 어두운 쪽으로 뒤집는다.
   ⭐ 로고 원본이 "검정" 파일이라 기본형은 filter:invert(1) 로 흰 로고를 만든다 —
      화이트 버전은 invert 를 풀면 그대로 검정 로고가 된다.
============================================================ */
header.white { color: #111; }
header.white .logo-link .logo { filter: none; }
header.white nav .menu-list > li > a { background: #fff; border-color: rgba(11,11,11,.16); color: rgba(11,11,11,.7); }
header.white nav .menu-list > li > a:hover { border-color: rgba(11,11,11,.45); color: #111; }
/* 활성·CTA 는 어느 버전에서든 포인트 블루 — 여기까지 뒤집으면 현재 위치를 못 읽는다 */
header.white nav .menu-list > li.active > a { background: var(--hd-point); border-color: var(--hd-point); color: #fff; }
header.white .btn-wrap .contact-btn { background: #fff; border-color: rgba(11,11,11,.2); color: rgba(11,11,11,.85); }
header.white .btn-wrap .contact-btn:hover { background: var(--hd-point); border-color: var(--hd-point); color: #fff; }
header.white .menu-btn { color: #111; }
/* 스크롤하면 버튼 배경이 포인트 블루로 깔린다 — 그 위 막대는 기본 버전과 같이 흰색이어야 읽힌다 */
header.white.on .menu-btn { color: #fff; }
header.white.on .menu-btn:hover { background: #fff; border-color: rgba(11,11,11,.16); color: #111; }
@media screen and (max-width: 1100px) {
    /* 좁은 화면 스크롤 상태의 로고 칩도 흰 배경으로 */
    header.white.on .logo-link { background: #fff; border-color: rgba(11,11,11,.16); }
}

@media screen and (max-width: 1250px) {
    header nav { margin-left: 10px; }
    header nav .menu-list > li > a { padding: 0 14px; font-size: 12px; letter-spacing: .06em; }
}
/* 스크롤 상태에서는 로고를 한 단계 줄인다 — 헤더가 얇아지는 만큼 로고도 같이 작아져야
   바가 낮아진 느낌이 난다(높이만 줄이고 로고가 그대로면 헤더가 꽉 낀 것처럼 보인다). */
header .logo-link .logo { height: 24px; transition: height .3s cubic-bezier(.65,0,.35,1), filter .3s; }
header.on .logo-link .logo { height: 18px; }

@media screen and (max-width: 1100px) {
    header nav { display: none; }
    header .btn-wrap .contact-btn { display: none; }
    /* 모바일은 예전 그대로 — 로고는 항상 보이고, 햄버거는 맨 오른쪽에서 드로어를 연다 */
    header .menu-btn { display: inline-flex; }
    header.on .menu-btn { order: 0; margin-left: auto; }
    header.on .logo-link { opacity: 1; max-width: 400px; padding: 5px 12px; background: #000; border-color: rgba(255,255,255,.24); pointer-events: auto; }
    header.on .logo-link .logo { height: 17px; }
}
@media screen and (max-width: 650px) {
    header { padding: 18px 0; }
    header.on { padding: 12px 0; }
    header .logo-link .logo { height: 20px; }
    header.on .logo-link .logo { height: 15px; }
}


/* ============================================================
   aside (모바일 슬라이드 메뉴)
============================================================ */
/* 드로어는 메인 톤(다크 #0B0B0B + 코발트 #1B4DFF)에 맞춘다.
   슬라이드는 right 가 아니라 transform 으로 — right 애니메이션은 매 프레임 레이아웃을
   다시 잡아 저사양 기기에서 끊긴다. */
.aside-section { display: none; position: fixed; z-index: 999; inset: 0;
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.aside-section.active { opacity: 1; visibility: visible; }
.aside-section .close-bg { position: absolute; inset: 0; background: rgba(0,0,0,.62);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.aside-section .menu-div { position: fixed; right: 0; top: 0; z-index: 1;
    width: 320px; max-width: 86%; height: 100%; background: #0B0B0B;
    border-left: 1px solid rgba(255,255,255,.1);
    display: flex; flex-direction: column; overflow-y: auto;
    transform: translateX(100%); transition: transform .42s cubic-bezier(.65,0,.35,1); }
.aside-section.active .menu-div { transform: none; }

.aside-section .btn-wrap { display: flex; justify-content: flex-end; padding: 20px 22px 6px; }
.aside-section .close-btn { width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.aside-section .close-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); transform: rotate(90deg); }

.aside-section .menu-list { flex: 1; display: flex; flex-direction: column; padding: 14px 22px 32px; }
.aside-section .menu-list .item { display: flex; align-items: center; gap: 12px;
    padding: 17px 2px; font-family: 'Archivo', sans-serif; font-size: 19px; font-weight: 700;
    letter-spacing: .01em; color: rgba(255,255,255,.92);
    border-bottom: 1px solid rgba(255,255,255,.09); transition: color .25s ease, padding-left .25s ease; }
.aside-section .menu-list .item:hover { color: #fff; padding-left: 8px; }
.aside-section .menu-list .item .num { margin: 0; font-family: 'Archivo', sans-serif;
    font-size: 11px; font-weight: 500; letter-spacing: .08em; color: #6F8FFF; }
/* 문의 버튼은 목록 아래로 밀어 붙인다(항목이 적어도 드로어 하단에 앉는다) */
.aside-section .menu-list .aside-contact { margin-top: auto; padding: 16px;
    display: flex; align-items: center; justify-content: center;
    background: #1B4DFF; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
    border-radius: 100px; transition: background .25s ease, transform .25s ease; }
.aside-section .menu-list .aside-contact:hover { background: #2E7BFF; transform: translateY(-2px); }

@media screen and (max-width: 1100px) { .aside-section { display: block; } }
@media screen and (max-width: 650px) {
    .aside-section .menu-div { width: 290px; }
    .aside-section .menu-list .item { font-size: 17px; padding: 15px 2px; }
}


/* ============================================================
   공통 타이틀류
============================================================ */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-color); }
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--point-color); flex-shrink: 0; }
.eyebrow.light { color: rgba(255,255,255,.65); }

.sec-title { font-weight: 800; font-size: 46px; line-height: 1.2; letter-spacing: -0.045em; color: #222; }
.sec-title.light { color: #fff; }
.sec-title .en { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.sec-desc { margin-top: 22px; font-size: 18px; line-height: 1.7; color: #666; word-break: keep-all; }
.sec-desc.light { color: rgba(255,255,255,.7); }

@media screen and (max-width: 1250px) { .sec-title { font-size: 38px; } }
@media screen and (max-width: 650px) {
    .sec-title { font-size: 28px; }
    .sec-desc { font-size: 16px; margin-top: 16px; }
    .eyebrow { font-size: 12px; }
}

/* 공통 버튼 */
.btn-line { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; padding: 15px 30px; border-radius: 100px; border: 1px solid #222; transition: background .25s, color .25s; }
.btn-line .arrow { transition: transform .25s; }
.btn-line:hover { background: #222; color: #fff; }
.btn-line:hover .arrow { transform: translateX(4px); }
.btn-line.light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-line.light:hover { background: var(--point-color); color: #fff; border-color: var(--point-color); }
.btn-fill { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; padding: 16px 34px; border-radius: 100px; background: var(--point-color); color: #fff; transition: transform .25s, box-shadow .25s; }
.btn-fill:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(70,132,236,.35); }
.btn-fill .arrow { transition: transform .25s; }
.btn-fill:hover .arrow { transform: translateX(4px); }
@media screen and (max-width: 650px) { .btn-line, .btn-fill { font-size: 14px; padding: 13px 26px; } }


/* ============================================================
   footer
============================================================ */
/* position/z-index 는 CTA 돔이 이 뒤로 숨기 위한 것이다(모션 정의 #399:31).
   배경이 반투명하면 숨은 돔이 비쳐 보이므로 반드시 불투명해야 한다. */
footer { position: relative; z-index: 2; background: var(--black-color); color: #8f8f8f; padding: 80px 0 50px; }
footer .foot-top { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
footer .foot-top .left .logo { height: 26px; filter: invert(1); /* brightness(0)까지 걸면 심볼 글리프가 사라져 흰 원만 남음 */ }
footer .foot-top .left .slogan { margin-top: 22px; font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.04em; line-height: 1.4; }
footer .foot-top .foot-menu { display: flex; gap: 60px; }
footer .foot-top .foot-menu .col .tit { font-family: 'Space Grotesk', sans-serif; font-size: 13px; letter-spacing: .05em; color: var(--point-color); margin-bottom: 16px; }
footer .foot-top .foot-menu .col a { display: block; color: #cfcfcf; font-size: 15px; padding: 5px 0; transition: color .2s; }
footer .foot-top .foot-menu .col a:hover { color: #fff; }
footer .foot-bottom { padding-top: 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
footer .foot-bottom .info-box { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
footer .foot-bottom .info-box .item { position: relative; }
footer .foot-bottom .copy-right { font-family: 'Space Grotesk', sans-serif; font-size: 13px; opacity: .6; }
@media screen and (max-width: 950px) {
    footer .foot-top { flex-direction: column; gap: 34px; }
    footer .foot-top .foot-menu { gap: 40px; }
}
@media screen and (max-width: 650px) {
    footer { padding: 50px 0 40px; }
    footer .foot-top .left .slogan { font-size: 20px; }
    footer .foot-top .foot-menu { gap: 26px; flex-wrap: wrap; }
    footer .foot-bottom { flex-direction: column; align-items: flex-start; }
    footer .foot-bottom .info-box { font-size: 12px; gap: 6px 16px; }
}


/* ============================================================
   quick / floating menu
============================================================ */
.quick-menu-section { position: fixed; right: 22px; bottom: 30px; z-index: 90; display: flex; flex-direction: column; gap: 10px; transition: bottom .4s ease; }
.quick-menu-section .q-item { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #222; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.18); transition: background .25s, color .25s, transform .25s; }
.quick-menu-section .q-item:hover { transform: translateY(-3px); background: var(--point-color); color: #fff; }
.quick-menu-section .q-item.top-btn { background: #fff; color: #222; border: 1px solid var(--line-color); }
.quick-menu-section .q-item.top-btn:hover { background: var(--point-color); }
.quick-menu-section .q-item svg { width: 22px; height: 22px; }
@media screen and (max-width: 650px) {
    .quick-menu-section { right: 14px; bottom: 18px; }
    .quick-menu-section .q-item { width: 46px; height: 46px; }
}


/* ============================================================
   HOME — hero
============================================================ */
.main .hero-section { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; background: radial-gradient(120% 90% at 80% 10%, #2b2b2b 0%, #161616 55%, #111 100%); color: #fff; padding: 140px 0 100px; }
.main .hero-section .bg-word { position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20vw; line-height: 1; color: rgba(255,255,255,.035); white-space: nowrap; pointer-events: none; letter-spacing: -0.04em; }
.main .hero-section .inner { position: relative; z-index: 2; }
.main .hero-section .hero-eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 15px; letter-spacing: .1em; color: var(--point-color); text-transform: uppercase; }
.main .hero-section .hero-title { margin-top: 26px; font-weight: 800; font-size: 78px; line-height: 1.12; letter-spacing: -0.05em; }
.main .hero-section .hero-title .stroke { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
.main .hero-section .hero-title em { font-style: normal; color: var(--point-color); }
.main .hero-section .hero-desc { margin-top: 34px; font-size: 20px; line-height: 1.7; color: rgba(255,255,255,.72); max-width: 560px; word-break: keep-all; }
.main .hero-section .hero-btns { margin-top: 46px; display: flex; align-items: center; gap: 14px; }
/* 회전 배지 */
@media screen and (max-width: 950px) {
}
@media screen and (max-width: 650px) {
    .main .hero-section { min-height: 90vh; padding: 120px 0 90px; }
    .main .hero-section .hero-title { font-size: 40px; }
    .main .hero-section .hero-eyebrow { font-size: 12px; letter-spacing: .08em; }
    .main .hero-section .hero-desc { font-size: 16px; margin-top: 24px; }
    .main .hero-section .hero-btns { gap: 8px; }
    .main .hero-section .hero-btns .btn-fill,
    .main .hero-section .hero-btns .btn-line { font-size: 13px; padding: 12px 18px; }
    .main .hero-section .scroll-ind { display: none; }
}


/* ============================================================
   HOME — about teaser
============================================================ */
/* overflow:hidden 은 스크롤 컨테이너를 만들어 안쪽 sticky 를 깨므로, 잘라내기는 clip-path 로 한다 */
.main .about-section { padding: 0; background: #fff; clip-path: inset(0); }
.main .about-pin { height: 220vh; }
.main .about-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.main .about-stage > .inner { width: 100%; }

/* 리드 — Figma "타이포 애니" 시안 기준 (Archivo Black 68px / 자간 -0.03em / 줄간격 92px / 단어간격 24px).
   폭에 따라 비례하도록 px 대신 clamp + em 을 쓴다(단어간격 0.353em = 24/68). */
.main .about-section .about-lead { text-align: center; max-width: 1280px; margin: 0 auto; }
.main .about-section .big { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: clamp(22px, 5.4vw, 68px); font-weight: 900; line-height: 1.353; letter-spacing: -0.03em; color: #0B0B0B; }
.main .about-section .big .line { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.353em; }

/* 단어단위 스크롤 리빌 — 초기엔 흐릿하게 위에 떠 있다가, 스크롤 진행에 따라
   단어가 하나씩 제자리로 내려오며 또렷해진다. 진행률은 script.js wordRevealHandler가 인라인으로 쓴다. */
/* 기본값은 '또렷한 상태' — JS가 동작할 때만 .is-ready 를 붙여 스크러브한다(JS 실패 시 문장이 사라지지 않도록) */
.main .about-section .big .w { display: inline-block; }
/* 출발 좌표(--dx/--dy/--rot/--scl)는 script.js 가 섹션 폭에 맞춰 심어준다.
   t=0 이면 섹션 여백에 흩어진 자리, t=1 이면 문장 속 제자리. */
/* 도착 전 연블루(rgba(27,77,255,.2)) → 도착 후 검정(#0B0B0B). 시안의 2색 상태를 t 로 보간한다 */
[data-word-reveal].is-ready .w { will-change: transform, opacity, filter;
    color: #1B4DFF;
    color: color-mix(in srgb, #1B4DFF, #0B0B0B calc(var(--t, 0) * 100%));
    opacity: calc(.2 + var(--t, 0) * .8);
    filter: blur(calc((1 - var(--t, 0)) * 5px));
    transform:
        translate3d(calc((1 - var(--t, 0)) * var(--dx, 0px)), calc((1 - var(--t, 0)) * var(--dy, 0px)), 0)
        rotate(calc((1 - var(--t, 0)) * var(--rot, 0deg)))
        scale(calc(1 + (1 - var(--t, 0)) * var(--scl, 0))); }

/* 모션 최소화 설정이면 스크러브 없이 바로 또렷하게 */
@media (prefers-reduced-motion: reduce) {
    [data-word-reveal].is-ready .w { color: #0B0B0B; opacity: 1; filter: none; transform: none; }
}

/* 지표 — 시안과 같은 언어로(흰 배경 · Archivo Black 숫자 · 단위만 블루 #1B4DFF).
   다크 밴드를 걷어내고 얇은 라인으로만 구획해 타이포가 계속 주역이 되게 한다 */
.main .about-section .stats-band { margin-top: 90px; padding-top: 42px; border-top: 1px solid #E5E5E5; display: grid; grid-template-columns: repeat(4, 1fr); }
.main .about-section .stats-band .item { position: relative; padding: 0 24px; text-align: center; }
.main .about-section .stats-band .item + .item::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: #E5E5E5; }
.main .about-section .stats-band .item .num { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 52px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: #1B4DFF; }
.main .about-section .stats-band .item .num .unit { color: #1B4DFF; }
.main .about-section .stats-band .item .label { margin-top: 15px; font-size: 15px; font-weight: 600; letter-spacing: -0.04em; color: #0B0B0B; }
.main .about-section .stats-band .item .sub { max-width: none; margin: 6px 0 0; font-size: 12.5px; font-weight: 400; line-height: 1.5; letter-spacing: -0.03em; color: #9A9A9A; }

/* .big 은 clamp 로 화면폭에 비례하므로 반응형에서 크기를 다시 지정하지 않는다 */
@media screen and (max-width: 1100px) {
    .main .about-section .stats-band .item { padding: 0 14px; }
    .main .about-section .stats-band .item .num { font-size: 38px; }
}
@media screen and (max-width: 950px) {
    .main .about-pin { height: 190vh; }
    .main .about-section .stats-band { margin-top: 48px; padding-top: 30px; grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
    .main .about-section .stats-band .item:nth-child(2n+1)::before { display: none; }
}
@media screen and (max-width: 650px) {
    .main .about-pin { height: 170vh; }
    .main .about-section .stats-band { margin-top: 36px; padding-top: 24px; row-gap: 24px; }
    .main .about-section .stats-band .item { padding: 0 8px; }
    .main .about-section .stats-band .item .num { font-size: 30px; }
    .main .about-section .stats-band .item .label { margin-top: 9px; font-size: 13px; }
    .main .about-section .stats-band .item .sub { font-size: 11px; }
}


/* ============================================================
   HOME / ABOUT — service
============================================================ */
/* ============================================================
   메인 — 브랜드 스토리 스크롤 연출 (J·B 교차 → 심볼 피어남, script.js가 스크럽)
============================================================ */
/* 배경은 다크로 시작해, 다음 팀 섹션이 20% 드러나면 팀 섹션과 같은 색으로 넘어간다.
   팀 섹션 배경은 #F3F5F9 → #E9EDF4 그라디언트인데, 맞닿는 윗변 색이 #F3F5F9 라 그 값으로 맞췄다
   (그라디언트는 background-color 트랜지션이 먹지 않아 단색이어야 부드럽게 넘어간다). */
.brand-story-section { position: relative; height: 280vh; background: #0B0B0B; transition: background-color .6s ease; }
.brand-story-section.is-light { background: #F3F5F9; }
.brand-story-section .bs-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.brand-story-section .bs-letter { position: absolute; z-index: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(150px, 24vw, 340px); line-height: 1; color: #FFFFFF; will-change: transform, opacity; }
/* 심볼 + 문구 묶음 — .bs-sticky 가 flex center 라 이 덩어리가 화면 정중앙에 선다 */
.brand-story-section .bs-center { position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(28px, 4.5vh, 60px); width: min(92%, 1100px); }
.brand-story-section .bs-symbol { position: relative; width: clamp(200px, 26vw, 320px); opacity: 0; will-change: transform, opacity; }
.brand-story-section .bs-symbol svg { width: 100%; height: auto; display: block; }
.brand-story-section .bs-typo { position: relative; width: 100%; display: grid; text-align: center; }
.brand-story-section .bs-typo > div { grid-area: 1 / 1; }
.brand-story-section .bs-typo p { font-size: clamp(24px, 2.6vw, 44px); font-weight: 700; line-height: 1.5; color: #fff; letter-spacing: -0.04em; word-break: keep-all;
    transition: color .6s ease; }
.brand-story-section .bs-t2 p { opacity: 0; }
/* 다크 상태에서는 심볼도 반전해 둔다(원 흰색 / 안쪽 어둡게) */
.brand-story-section .bs-letter { transition: color .6s ease; }
.brand-story-section .bs-symbol svg path { transition: fill .6s ease; }
.brand-story-section .bs-symbol svg path:first-child { fill: #fff; }
.brand-story-section .bs-symbol svg path:last-child { fill: #0B0B0B; }
/* 라이트로 넘어가면 글자·심볼을 원래 색으로 되돌린다 */
.brand-story-section.is-light .bs-typo p { color: #222; }
.brand-story-section.is-light .bs-letter { color: #111; }
.brand-story-section.is-light .bs-symbol svg path:first-child { fill: #111; }
.brand-story-section.is-light .bs-symbol svg path:last-child { fill: #fff; }
@media screen and (max-width: 950px) {
    .brand-story-section .bs-typo p { font-size: clamp(20px, 3.4vw, 30px); }
}
@media screen and (max-width: 767px) {
    .brand-story-section { height: 240vh; }
    .brand-story-section .bs-typo p { font-size: 19px; }
}

/* ============================================================
   메인 — 레시피 스크롤 연출 (재료 4종 → 그릇 → 꽃 완성, script.js가 스크럽)
============================================================ */
.recipe-section { position: relative; height: 320vh; background: #f7f6f2; }
.recipe-section .rc-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.recipe-section .rc-typo { position: absolute; left: 20px; right: 20px; top: 12%; display: grid; text-align: center; z-index: 5; }
.recipe-section .rc-typo > div { grid-area: 1 / 1; }
.recipe-section .rc-typo p { font-size: 22px; font-weight: 700; line-height: 1.7; color: #222; letter-spacing: -0.035em; word-break: keep-all; }
.recipe-section .rc-t2 p { opacity: 0; }
.recipe-section .rc-stage { position: absolute; inset: 0; }
.recipe-section .rc-shape { position: absolute; left: 50%; top: 40%; width: clamp(80px, 9vw, 120px); margin-left: calc(clamp(80px, 9vw, 120px) / -2); will-change: transform, opacity; opacity: 0; }
.recipe-section .rc-shape svg { width: 100%; height: auto; display: block; }
.recipe-section .rc-bowl { position: absolute; left: 50%; bottom: 18%; width: clamp(240px, 30vw, 420px); transform: translateX(-50%); will-change: transform, opacity; }
.recipe-section .rc-bowl svg { width: 100%; height: auto; display: block; }
.recipe-section .rc-flower { position: absolute; left: 50%; top: 50%; width: clamp(240px, 34vw, 460px); margin-left: calc(clamp(240px, 34vw, 460px) / -2); margin-top: calc(clamp(240px, 34vw, 460px) / -2); transform-origin: 50% 50%; transform: scale(0); will-change: transform, opacity; }
.recipe-section .rc-flower svg { width: 100%; height: auto; display: block; }
@media screen and (max-width: 767px) {
    .recipe-section { height: 280vh; }
    .recipe-section .rc-typo p { font-size: 16px; }
}

/* ============================================================
   Service (회사소개 sec3) — Figma "[JOB] 회사소개 페이지 > sec3" #447:47
   1920×1100 라이트 섹션. 상단 그라디언트 레일에 번호 노드 4개가 걸리고,
   그 아래 282×620 카드 4장이 붙는다. 카드 안 수치는 시안 y좌표를 그대로 옮긴 것이라
   (EN 92 / 제목 116 / 본문 214 / 태그 316 / 구분선 410 / PROCESS 428 / 단계 460·498·536·574)
   카드마다 글자 수가 달라도 같은 높이에서 줄이 맞도록 블록에 min-height 를 걸어 고정했다.
============================================================ */
.service-section { padding: 144px 0 88px; color: #0B0B0B;
    background: linear-gradient(180deg, #F3F5F9 0%, #E9EDF4 100%); }
.sv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.sv-title { max-width: 760px; font-size: 48px; font-weight: 700; line-height: 1.4; letter-spacing: -0.04em; color: #0B0B0B; }
.sv-lead { margin-top: 14px; max-width: 500px; font-size: 16px; line-height: 1.9; letter-spacing: -0.02em;
    text-align: right; color: #4A5261; word-break: keep-all; }

/* 레일 + 노드 — 노드 중심(y352)이 레일(y351, 2px) 위에 오도록 top 11px */
.sv-grid { position: relative; display: flex; gap: 24px; margin-top: 62px; }
.sv-rail { position: absolute; left: 0; right: 0; top: 11px; height: 2px;
    background: linear-gradient(90deg, #1B4DFF 0%, #7B5CFF 33%, #C05BFF 66%, #14B8A6 100%); }
/* 열을 세로 flex 로 두고 카드에 flex:1 을 주면, 한 행 안의 카드가 가장 긴 카드 높이로 함께 늘어난다
   (2열로 접히는 반응형에서 카드 높이가 제각각이 되는 걸 막는다 — 행 단위로 맞춰진다) */
.sv-col { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.sv-card { flex: 1 1 auto; }
.sv-node { flex: 0 0 auto; align-self: flex-start;
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: #EEF1F6; border: 1.5px solid var(--c); color: var(--c);
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; }

.sv-card { position: relative; overflow: hidden; margin-top: 28px; min-height: 620px;
    padding: 92px 24px 24px; border-radius: 20px;
    background: rgba(255,255,255,.86); border: 1px solid rgba(11,11,11,.06);
    box-shadow: 0 12px 30px -6px rgba(10,18,41,.08); }
.sv-glow { position: absolute; left: -120px; top: -150px; width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--c) 0%, rgba(255,255,255,0) 70%);
    opacity: .28; filter: blur(30px); pointer-events: none; }
/* 글로우 위로 올린다. ⚠ .sv-card > *:not(.sv-glow) 같은 넓은 선택자를 쓰면
   특정도(0,2,0)가 뒤의 .sv-go·.sv-no(0,1,0)를 이겨 absolute 를 relative 로 덮어쓴다 — 개별 지정할 것. */
.sv-en, .sv-tit, .sv-desc, .sv-tags, .sv-proc { position: relative; z-index: 1; }
.sv-go { position: absolute; top: 26px; left: 24px; z-index: 1;
    display: flex; align-items: center; justify-content: center; width: 58px; height: 30px;
    border: 1px solid rgba(11,11,11,.25); border-radius: 15px;
    font-size: 12px; font-weight: 600; color: #0B0B0B; transition: background .25s, border-color .25s; }
.sv-go:hover { background: var(--c); border-color: var(--c); color: #fff; }
.sv-no { position: absolute; top: 34px; right: 24px; z-index: 1; line-height: 1;
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c); }
.sv-en { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 11px; font-weight: 600; line-height: 12px; letter-spacing: .1em; color: var(--c); }
/* 제목·본문은 1~3줄로 들쭉날쭉 — 시안처럼 태그 줄을 맞추려면 높이를 고정해야 한다 */
.sv-tit { margin-top: 12px; min-height: 78px;
    font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; color: #0B0B0B; }
.sv-desc { margin-top: 20px; min-height: 78px;
    font-size: 14px; line-height: 1.85; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
.sv-tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; margin-top: 24px; min-height: 60px; }
.sv-tags span { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 13px;
    background: rgba(11,11,11,.04); border: 1px solid rgba(11,11,11,.14);
    background: color-mix(in srgb, var(--c) 8%, transparent); border-color: color-mix(in srgb, var(--c) 35%, transparent);
    font-size: 11.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--c); }

.sv-proc { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(11,11,11,.08); }
.sv-proc-label { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 10.5px; font-weight: 600; line-height: 11px; letter-spacing: .12em; color: rgba(11,11,11,.4); }
.sv-steps { position: relative; margin-top: 21px; }
/* 점과 점을 잇는 세로선 — 첫 점 중심(10px)에서 마지막 점 중심까지만 긋는다 */
.sv-steps::before { content: ''; position: absolute; left: 4.5px; top: 10px; bottom: 6px; width: 1px; background: rgba(11,11,11,.14); }
.sv-steps li { position: relative; height: 38px; padding-left: 22px;
    font-size: 13.5px; line-height: 16px; letter-spacing: -0.02em; color: #4A5261; }
.sv-steps li i { position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(11,11,11,.3); }
.sv-steps li:last-child { height: 16px; font-size: 13.5px; font-weight: 700; color: #0B0B0B; }
.sv-steps li.is-done i { background: var(--c); border-color: var(--c); }

/* ============================================================
   HOW WE WORK (회사소개 sec4) — Figma "회사소개-sec4" #478:176 (1920×960)
   카드 6장(186×?)이 왼쪽→오른쪽으로 34px 씩 높아지는 계단. 아랫변은 모두 y790 으로 맞춰지므로
   flex + align-items:flex-end 로 바닥을 맞추고 높이만 --i 로 키운다.
   ⚠ 메인(index.php)이 쓰는 .process-section / .pt-* 와 섞이면 안 돼서 .hw-* 로 따로 팠다.
============================================================ */
.hw-section { padding: 110px 0 170px; color: #0B0B0B;
    background: linear-gradient(180deg, #F3F5F9 0%, #E9EDF4 100%); }
.hw-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.hw-eyebrow { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 12px; font-weight: 600; line-height: 13px; letter-spacing: .12em; color: #1B4DFF; }
.hw-title { margin-top: 21px; font-size: 48px; font-weight: 700; letter-spacing: -0.04em; color: #0B0B0B; }
.hw-lead { margin-top: 40px; max-width: 500px; font-size: 16px; line-height: 1.9; letter-spacing: -0.02em;
    text-align: right; color: #4A5261; word-break: keep-all; }

.hw-grid { display: flex; align-items: flex-end; gap: 16.8px; margin-top: 119px; }
/* 카드 높이 = 300 + 34×순번. 등장 지연도 같은 --i 로 굴려 1→6 순서로 올라온다 */
.hw-card { position: relative; flex: 1 1 0; min-width: 0;
    height: calc(300px + var(--i) * 34px); padding: 22px 20px 62px; border-radius: 18px;
    background: rgba(255,255,255,.9); border: 1px solid rgba(11,11,11,.06);
    box-shadow: 0 14px 32px -8px rgba(10,18,41,.08); }
.hw-card.ani { transition-delay: calc(var(--i) * .08s); }
.hw-card.is-last { background: #1B4DFF; border-color: transparent;
    box-shadow: 0 14px 32px -8px rgba(10,18,41,.22); }

.hw-en { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 10.5px; font-weight: 600; line-height: 11px; letter-spacing: .14em; color: #1B4DFF; }
.hw-no { display: block; margin-top: 11px; font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 46px; font-weight: 700; line-height: 50px; letter-spacing: -0.04em; color: #1B4DFF; }
.hw-rule { display: block; width: 24px; height: 2px; margin-top: 12px; background: rgba(11,11,11,.8); }
.hw-tit { margin-top: 16px; font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; color: #0B0B0B; }
.hw-desc { margin-top: 17px; font-size: 13px; line-height: 1.75; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
/* 하단 "n / 6" 과 진행 바는 카드 높이와 무관하게 아랫변 기준으로 붙는다(시안 y738 · y760) */
.hw-count { position: absolute; left: 20px; right: 20px; bottom: 40px; line-height: 12px; text-align: right;
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 500; color: rgba(11,11,11,.55); }
.hw-bar { position: absolute; left: 20px; right: 20px; bottom: 27px; height: 3px; border-radius: 2px;
    background: rgba(11,11,11,.08); overflow: hidden; }
.hw-bar i { display: block; height: 100%; border-radius: 2px; background: #1B4DFF; }

.hw-card.is-last .hw-en { color: rgba(255,255,255,.8); }
.hw-card.is-last .hw-no, .hw-card.is-last .hw-tit { color: #fff; }
.hw-card.is-last .hw-rule { background: rgba(255,255,255,.7); }
.hw-card.is-last .hw-desc { color: rgba(255,255,255,.85); }
.hw-card.is-last .hw-count { color: rgba(255,255,255,.55); }
.hw-card.is-last .hw-bar { background: rgba(255,255,255,.3); }
.hw-card.is-last .hw-bar i { background: #fff; }

@media screen and (max-width: 1250px) {
    .hw-section { padding: 90px 0 120px; }
    .hw-title { font-size: 40px; }
    .hw-grid { gap: 10px; margin-top: 80px; }
    .hw-card { height: calc(276px + var(--i) * 28px); padding: 18px 14px 56px; }
    .hw-no { font-size: 38px; line-height: 42px; }
    .hw-tit { font-size: 17px; }
    .hw-count { left: 14px; right: 14px; }
    .hw-bar { left: 14px; right: 14px; }
}
@media screen and (max-width: 950px) {
    /* 계단은 6열이 한 줄로 설 때만 성립한다 — 접히면 높이를 풀고 행마다 같은 높이로 맞춘다 */
    .hw-section { padding: 70px 0 80px; }
    .hw-head { flex-direction: column; gap: 0; }
    .hw-title { font-size: 34px; }
    .hw-lead { max-width: none; text-align: left; margin-top: 18px; }
    .hw-grid { flex-wrap: wrap; align-items: stretch; gap: 16px; margin-top: 44px; }
    .hw-card { flex: 0 0 calc((100% - 32px) / 3); height: auto; min-height: 280px; padding: 20px 18px 58px; }
    .hw-count, .hw-bar { left: 18px; right: 18px; }
}
@media screen and (max-width: 650px) {
    .hw-section { padding: 56px 0 60px; }
    .hw-title { font-size: 27px; }
    .hw-lead { font-size: 15px; }
    .hw-lead br { display: none; }
    .hw-grid { gap: 12px; }
    .hw-card { flex: 0 0 calc((100% - 12px) / 2); min-height: 250px; }
}

@media screen and (max-width: 1250px) {
    .service-section { padding: 110px 0 80px; }
    .sv-title { font-size: 40px; }
    .sv-grid { gap: 16px; }
    .sv-card { padding: 84px 20px 22px; min-height: 0; }
    .sv-tit { font-size: 26px; min-height: 68px; }
}
@media screen and (max-width: 950px) {
    .service-section { padding: 90px 0 70px; }
    .sv-head { flex-direction: column; gap: 0; }
    .sv-title { font-size: 34px; }
    .sv-lead { max-width: none; text-align: left; margin-top: 18px; }
    /* 2열로 접히면 레일이 카드 사이를 가로지르게 돼 의미가 없다 — 숨기고 노드만 남긴다 */
    .sv-grid { flex-wrap: wrap; gap: 20px; margin-top: 44px; }
    .sv-rail { display: none; }
    .sv-col { flex: 0 0 calc(50% - 10px); }
    .sv-tit, .sv-desc, .sv-tags { min-height: 0; }
    .sv-card { margin-top: 14px; }
}
@media screen and (max-width: 650px) {
    .service-section { padding: 60px 0 50px; }
    .sv-title { font-size: 27px; }
    .sv-lead { font-size: 15px; }
    .sv-lead br { display: none; }
    .sv-col { flex: 0 0 100%; }
    .sv-tit { font-size: 24px; }
}


/* ============================================================
   HOME / ABOUT — process
============================================================ */
.process-section { padding: 130px 0; background: #fff; }
.process-section .sec-head { text-align: center; margin-bottom: 66px; display: flex; flex-direction: column; align-items: center; }
/* 가로 타임라인 — 링 점 + 점선 라인 + STEP 라벨 (브랜드 블루 톤) */
.process-timeline { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; padding-top: 4px; }
.process-timeline::before { content: ''; position: absolute; left: 0; right: 4px; top: 18px; height: 2px; background: repeating-linear-gradient(90deg, rgba(70,132,236,.55) 0 9px, transparent 9px 17px); }
.process-timeline::after { content: ''; position: absolute; right: -1px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--point-color); box-shadow: 0 0 0 5px rgba(70,132,236,.15); }
.pt-item { position: relative; }
.pt-dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--point-color); border: 2px solid var(--point-color); color: #fff; box-shadow: 0 0 0 5px rgba(70,132,236,.12); display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; }
.pt-head { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.pt-head b { font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--point-color); }
.pt-head .tit { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: #222; }
.pt-item .desc { margin-top: 14px; font-size: 14.5px; line-height: 1.75; color: #666; word-break: keep-all; }
@media screen and (max-width: 1250px) {
    .process-timeline { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; }
    .process-timeline::before, .process-timeline::after { display: none; }
    .pt-item::before { content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 2px; background: repeating-linear-gradient(90deg, rgba(70,132,236,.4) 0 9px, transparent 9px 17px); }
    .pt-dot { position: relative; }
}
@media screen and (max-width: 650px) {
    .process-timeline { grid-template-columns: 1fr; gap: 0; }
    .pt-item::before { left: 15px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(70,132,236,.4) 0 9px, transparent 9px 17px); }
    .pt-item { padding: 0 0 34px 48px; }
    .pt-item:last-child { padding-bottom: 0; }
    .pt-item .pt-dot { position: absolute; left: 0; top: 0; }
    .pt-head { margin-top: 2px; }
}
@media screen and (max-width: 950px) {
    .process-section { padding: 90px 0; }
}
@media screen and (max-width: 650px) {
    .process-section { padding: 60px 0; }
    .process-list .item .num b { font-size: 32px; }
    .process-list .item .tit { font-size: 19px; }
}


/* ============================================================
   HOME / PORTFOLIO — work grid
============================================================ */
.work-section { padding: 130px 0; background: #f4f4f2; }
.work-section .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 54px; }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
.work-grid.col3 { grid-template-columns: repeat(3, 1fr); }
.work-grid .item { display: block; }
.work-grid .item .thumb { background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 4/3; background: #ddd; }
.work-grid .item .thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 34px; color: rgba(255,255,255,.9); background-size: cover; background-position: center; transition: transform .5s; }
.work-grid .item:hover .thumb .ph { transform: scale(1.05); }
.work-grid .item .thumb .cat { position: absolute; left: 16px; top: 16px; z-index: 2; font-size: 12px; font-weight: 600; color: #fff; background: var(--point-color); padding: 6px 14px; border-radius: 100px; }
.work-grid .item .tit { margin-top: 22px; font-size: 22px; font-weight: 700; letter-spacing: -0.04em; }
.work-grid .item .meta { margin-top: 8px; font-size: 15px; color: #888; display: flex; gap: 8px; flex-wrap: wrap; }
.work-grid .item .meta span { position: relative; padding-right: 9px; }
.work-grid .item .meta span + span::before { content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: #ccc; }
@media screen and (max-width: 950px) {
    .work-section { padding: 90px 0; }
    .work-grid, .work-grid.col3 { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 650px) {
    .work-section { padding: 60px 0; }
    .work-grid, .work-grid.col3 { grid-template-columns: 1fr; gap: 30px; }
    .work-grid .item .tit { font-size: 19px; }
}


/* ============================================================
   HOME / INSIGHT — news cards
============================================================ */
.insight-section { padding: 130px 0; background: #fff; }
.insight-section .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 54px; }
.insight-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.insight-list .item { display: flex; flex-direction: column; border: 1px solid var(--line-color); border-radius: 10px; overflow: hidden; transition: box-shadow .3s, transform .3s; }
.insight-list .item:hover { box-shadow: 0 18px 40px rgba(0,0,0,.08); transform: translateY(-4px); }
.insight-list .item .thumb { width: 225px; height: 338px; margin: 30px auto 0; border-radius: 6px; box-shadow: 0 14px 30px rgba(0,0,0,.18); background: #222; background-size: cover; background-position: center; position: relative; } /* 책 표지 실물 비율 225×338px 고정 */
.insight-list .item .thumb .tag { position: absolute; left: 14px; top: 14px; font-size: 12px; font-weight: 600; background: #fff; color: #222; padding: 5px 12px; border-radius: 100px; }
.insight-list .item .body { flex: 1; display: flex; flex-direction: column; padding: 26px 24px 28px; }
.insight-list .item .body .tit { font-size: 19px; font-weight: 700; line-height: 1.45; letter-spacing: -0.04em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.insight-list .item .body .desc { margin-top: 12px; font-size: 15px; line-height: 1.6; color: #888; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.insight-list .item .body .date { margin-top: auto; padding-top: 20px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; color: #aaa; }
@media screen and (max-width: 950px) {
    .insight-section { padding: 90px 0; }
    .insight-list { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 650px) {
    .insight-section { padding: 60px 0; }
    .insight-list { grid-template-columns: 1fr; gap: 20px; }
}


/* ============================================================
   HOME / CONTACT — CTA banner
============================================================ */
/* Figma "cta-section" #410:2 / 모션 "[JOB] CTA 섹션 — 모션 정의" #399:2
   푸터 윗선을 지름으로 하는 반타원(돔). 평소엔 푸터 뒤에 숨어 있다가 솟아오른다.
   섹션 높이 = 돔 높이. overflow:hidden 이 곧 "수평선" 역할을 한다. */
/* overflow:hidden 대신 clip-path 를 쓴다.
   back.out 탄성은 목표보다 24px "위로" 더 올라갔다 내려오는데(모션 정의 #399:37),
   overflow:hidden 은 위쪽도 잘라서 그 순간 돔 꼭대기가 싹둑 잘린다.
   inset(-100vh 0 0 0) 은 아래·좌우만 자르고 위로는 넘치게 둔다. */
/* --dome-over: back.out(1.7) 의 오버슈트는 이동거리의 약 10% — 560px 기준 60px 남짓이다.
   여유분이 그보다 작으면 최고점에서 돔 아래에 밝은 틈이 보인다(실측 8.5px 났었다). */
.cta-section { --dome-w: 1700px; --dome-h: 560px; --dome-over: 88px;
    position: relative; height: var(--dome-h); clip-path: inset(-100vh 0 0 0);
    /* overflow-x:clip 은 가로만 자르고 세로는 넘치게 둔다(hidden 은 세로까지 잘라 오버슈트를 망친다) */
    overflow-x: clip;
    background: transparent; color: #fff; text-align: center; }
/* 메인에서는 돔 옆 여백을 바로 위 PARTNERS 섹션과 같은 색으로 이어붙인다.
   .main 으로 한정한 이유: 회사소개·포트폴리오에서도 이 CTA 를 쓰는데 그쪽 앞 섹션은 흰색이다. */
.main .cta-section { background: #EEF1F6; }
/* 회사소개는 바로 위 OUR CLIENTS 가 다크라 돔 옆 여백을 검정으로 이어붙인다 */
.page-about .cta-section { background: #000; }
/* 돔 바깥으로 번지는 큰 글로우 — 시안의 cta/dome-glow.
   너비를 100% 로 물려 구형 브라우저에서도 가로 스크롤이 생기지 않게 한다. */
.cta-section::before { content: ''; position: absolute; left: 50%; bottom: -60%;
    width: min(1860px, 100%); height: 1280px; transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(circle at 50% 70%, rgba(27,77,255,.22) 0%, rgba(27,77,255,0) 62%); }

/* 카드는 섹션보다 --dome-over 만큼 길다. 그 여분은 평소엔 잘려 안 보이다가,
   탄성으로 위로 튀어오른 순간 돔 아래에 생길 틈을 메운다.
   세로 반지름을 %가 아니라 --dome-h 로 고정해, 카드가 길어져도 돔 곡선은 그대로다. */
.cta-dome { position: relative; z-index: 1;
    width: min(var(--dome-w), 96%); height: calc(var(--dome-h) + var(--dome-over));
    margin: 0 auto; overflow: hidden;
    border-radius: 50% 50% 0 0 / var(--dome-h) var(--dome-h) 0 0;   /* 아랫변이 곧 푸터 윗선 */
    background: linear-gradient(180deg, #16287A 0%, #0D1646 46%, #070A1C 92%);
    /* 기준점을 아랫변에 둔다 — 가운데로 두면 scale 0.94 동안 아랫변이 위로 올라와
       푸터와의 사이에 밝은 틈이 보인다. 아랫변을 고정하면 수평선에서 자라나듯 솟는다. */
    transform-origin: 50% 100%;
    will-change: transform; }

/* ── 글로우 3개 (코발트·바이올렛·틸) ── */
.cta-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.cta-glow.g1 { left: 4.7%;  top: -21.4%; width: 44.7%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(27,77,255,.6) 0%, rgba(27,77,255,0) 70%); filter: blur(45px); }
.cta-glow.g2 { left: 52.9%; top: 21.4%;  width: 42.3%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(123,92,255,.44) 0%, rgba(123,92,255,0) 70%); filter: blur(50px); }
.cta-glow.g3 { left: 30.6%; top: 57.1%;  width: 36.5%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(20,184,166,.2) 0%, rgba(20,184,166,0) 70%); filter: blur(55px); }

/* ── 별 90개 — 3그룹이 서로 다른 주기로 깜빡인다 ── */
.cta-stars { position: absolute; inset: 0; pointer-events: none; }
.cta-stars i { position: absolute; border-radius: 50%; background: #fff; opacity: var(--o);
    animation: ctaTwinkle 2.6s ease-in-out infinite alternate; }
.cta-stars i[data-g="0"] { animation-duration: 1.8s; }
.cta-stars i[data-g="2"] { animation-duration: 3.4s; }
@keyframes ctaTwinkle { from { opacity: .25; } to { opacity: .85; } }
/* 돔이 가라앉아 있는 동안에는 깜빡임을 멈춘다(모션 정의 #399:43) */
.cta-section:not(.is-risen) .cta-stars i,
.cta-section:not(.is-risen) .cta-glow { animation-play-state: paused; }

/* ── 돔 상단 테두리 빛 ── */
.cta-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    padding: 2px;
    background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(140,224,255,.13) 30%, rgba(255,255,255,0) 50%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude; }

/* ── 내용 ── */
.cta-body { position: relative; z-index: 2; width: min(92%, 1200px); margin: 0 auto; padding-top: 104px; }
.cta-label { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: #8CE0FF; }
.cta-title { margin-top: 19px; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: clamp(38px, 5.4vw, 92px); line-height: 1.05; letter-spacing: -0.05em; color: #fff; }
.cta-title .word { display: inline-block; }
.cta-title .grad { background: linear-gradient(90deg, #5B9BFF 0%, #A78BFF 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-sub { margin-top: 36px; font-size: 17.5px; line-height: 1.9; letter-spacing: -0.02em; color: rgba(255,255,255,.72); }

.cta-btns { display: flex; justify-content: center; gap: 24px; margin-top: 40px; }
.cta-btn { display: inline-flex; align-items: center; justify-content: center;
    width: 270px; height: 64px; border-radius: 32px;
    font-size: 17px; letter-spacing: -0.02em;
    transition: background .3s, border-color .3s, box-shadow .3s; }
/* 1차 — 흰 버튼 + 코발트 원형 화살표 */
.cta-btn.primary { position: relative; background: #fff; color: #0B1433; font-weight: 700;
    padding-right: 60px; box-shadow: 0 10px 30px -6px rgba(26,77,255,.5); }
.cta-btn.primary .c { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; background: #1B4DFF; color: #fff;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px;
    transition: transform .3s cubic-bezier(.16,1,.3,1); }
.cta-btn.primary:hover { box-shadow: 0 16px 40px -6px rgba(26,77,255,.68); }
.cta-btn.primary:hover .c { transform: translateY(-50%) translateX(4px); }
/* 2차 — 글래스 */
.cta-btn.glass { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.32);
    -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); color: #fff; font-weight: 600; }
.cta-btn.glass:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); }

.cta-meta { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 46px; }
.cta-meta li { display: inline-flex; align-items: center; gap: 12px; }
.cta-meta li + li { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.2); }
.cta-meta b { font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: #8CE0FF; }
.cta-meta a, .cta-meta span { font-size: 14.5px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.88); }
.cta-meta a:hover { color: #fff; text-decoration: underline; }

@media screen and (max-width: 1250px) {
    .cta-section { --dome-h: 500px; }
    .cta-body { padding-top: 84px; }
    .cta-sub { margin-top: 28px; font-size: 16px; }
    .cta-btns { margin-top: 32px; }
    .cta-meta { margin-top: 34px; }
}
@media screen and (max-width: 950px) {
    .cta-section { --dome-h: 460px; }
    .cta-body { padding-top: 70px; }
    .cta-btn { width: 230px; height: 58px; font-size: 16px; }
    .cta-meta { flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; }
    .cta-meta li + li { padding-left: 18px; }
}
@media screen and (max-width: 650px) {
    /* 모바일: 카드 좌우 여백 16px · radius 24 (모션 정의 #399:49)
       높이는 내용 기준으로 잡는다 — 420 으로 두면 연락처 줄이 푸터 선 아래로 잘린다 */
    .cta-section { --dome-h: 540px; }
    .cta-dome { width: calc(100% - 32px); border-radius: 24px 24px 0 0; }
    .cta-body { width: 88%; padding-top: 52px; }
    .cta-label { font-size: 11px; }
    .cta-sub { margin-top: 20px; font-size: 14.5px; line-height: 1.75; }
    .cta-btns { flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; }
    .cta-btn { width: 100%; max-width: 280px; height: 52px; font-size: 15px; }
    .cta-meta { flex-direction: column; gap: 8px; margin-top: 22px; }
    .cta-meta li + li { padding-left: 0; border-left: 0; }
}
/* 모션 축소 — 튀어오름 생략, 처음부터 제자리(모션 정의 #399:49) */
@media (prefers-reduced-motion: reduce) {
    .cta-dome { transform: none !important; opacity: 1 !important; }
    .cta-stars i, .cta-glow { animation: none !important; }
}


/* ============================================================
   SUB — 공통 배너
============================================================ */
.sub .sub-visual { position: relative; overflow: hidden; padding: 200px 0 90px; background: radial-gradient(120% 120% at 80% 0%, #2b2b2b 0%, #161616 60%, #111 100%); color: #fff; }
.sub .sub-visual .bg-word { position: absolute; right: -1%; bottom: -18%; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15vw; color: rgba(255,255,255,.04); pointer-events: none; line-height: 1; }
.sub .sub-visual .inner { position: relative; z-index: 2; }
.sub .sub-visual .sv-eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 14px; letter-spacing: .12em; color: var(--point-color); text-transform: uppercase; }
.sub .sub-visual .sv-title { margin-top: 18px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 72px; letter-spacing: -0.03em; color: #fff; /* 회사소개 .sv-title(#0B0B0B)과 클래스명이 겹쳐 어두운 배경에 검정 글자로 나오던 문제 */ }
.sub .sub-visual .sv-desc { margin-top: 22px; font-size: 18px; color: rgba(255,255,255,.72); line-height: 1.7; max-width: 620px; word-break: keep-all; }
.sub .sub-visual .breadcrumb { margin-top: 26px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; color: rgba(255,255,255,.5); display: flex; gap: 8px; align-items: center; }
.sub .sub-visual .breadcrumb .sep { opacity: .5; }
@media screen and (max-width: 650px) {
    .sub .sub-visual { padding: 150px 0 60px; }
    .sub .sub-visual .sv-title { font-size: 42px; }
    .sub .sub-visual .sv-desc { font-size: 16px; }
}


/* ============================================================
   ABOUT page
============================================================ */
.sub .about-intro-section { padding: 120px 0; background: #fff; }
.sub .about-intro-section .grid { display: grid; grid-template-columns: 1fr; }
.sub .about-intro-section .txt { max-width: 860px; }
/* ============================================================
   about — 3D 심볼 + SYMBOL STORY (Figma "회사소개 - 로고" #479:177, 1920×1160)
   3D 심볼(iframe)은 .sym-track 안에 딱 하나만 두고, 스크롤에 따라
   logo3d 섹션의 출발 슬롯 → 심볼 스토리 섹션의 도착 슬롯(400×400)으로 날아간다.
   ⭐ iframe 을 DOM 상 옮기면 WebGL 이 재시작돼 마우스 회전·광원 모션이 끊긴다.
      그래서 JS(symbolFlyHandler)는 fixed 좌표만 바꾸고 DOM 은 건드리지 않는다.
============================================================ */
.sym-track { position: relative; }
.sub .logo3d-section { background: #111; min-height: 100vh; padding: 100px 0;
    display: flex; align-items: center; justify-content: center; }
.sub .logo3d-section .logo3d-slot { width: min(560px, 82vw); height: 560px; }

/* 날아다니는 심볼 — JS 가 .is-fly 를 붙이고 left/top/width/height 를 매 프레임 써준다.
   JS 가 죽어도 로고가 사라지면 안 되니, 기본값은 출발 섹션 한가운데에 붙어 있게 둔다. */
.sym-fly { position: absolute; left: 50%; top: 0; width: min(560px, 82vw); height: 560px;
    transform: translateX(-50%); z-index: 2; pointer-events: none; }
.sym-fly.is-fly { position: fixed; transform: none; }
.sym-fly iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: auto; }

.sym-section { padding: 120px 0 160px; color: #0B0B0B;
    background: linear-gradient(180deg, #F3F5F9 0%, #E9EDF4 100%); }
/* 좌 심볼 자리(400) / 우 카피(x880 → inner 기준 520) — 사이 간격 120 */
.sym-head { display: flex; align-items: flex-start; gap: 120px; }
.sym-stage { position: relative; flex: 0 0 400px; height: 400px; }
/* 헤일로·바닥그림자는 도착 지점의 연출이라 심볼이 도착하는 만큼(opacity = 진행률) 드러난다 */
.sym-halo { position: absolute; left: -60px; top: -60px; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(27,77,255,.18) 0%, rgba(27,77,255,0) 70%);
    filter: blur(25px); opacity: 0; }
/* 바닥 그림자 — 단색 타원 + blur 는 테두리가 균일해서 스티커처럼 보인다.
   가운데가 짙고 가장자리로 완전히 사라지는 방사형으로 깔고, 세로로 눌러 바닥에 닿은 느낌을 준다 */
.sym-shadow { position: absolute; left: 40px; top: 396px; width: 320px; height: 84px;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(11,11,11,.26) 0%, rgba(11,11,11,.13) 38%, rgba(11,11,11,.04) 62%, rgba(11,11,11,0) 78%);
    filter: blur(10px); opacity: 0; }

.sym-copy { flex: 1 1 auto; min-width: 0; padding-top: 75px; }
.sym-eyebrow { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 12px; font-weight: 600; line-height: 13px; letter-spacing: .12em; color: #1B4DFF; }
.sym-title { margin-top: 21px; font-size: 46px; font-weight: 700; letter-spacing: -0.04em; color: #0B0B0B; }
.sym-body { margin-top: 31px; max-width: 660px;
    font-size: 17px; line-height: 1.95; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
.sym-body + .sym-body { margin-top: 18px; }

.sym-cards { display: flex; gap: 24px; margin-top: 180px; }
.sym-card { position: relative; flex: 1 1 0; min-width: 0; min-height: 300px;
    padding: 30px 28px 28px; border-radius: 20px;
    background: rgba(255,255,255,.88); border: 1px solid rgba(11,11,11,.06);
    box-shadow: 0 12px 30px -6px rgba(10,18,41,.08); }
/* 카드 윗변에 얹힌 60×3 컬러 바 */
.sym-bar { position: absolute; left: 28px; top: 0; width: 60px; height: 3px; background: var(--c); }
.sym-letter { display: flex; align-items: flex-end; line-height: 70px;
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 64px; font-weight: 900; letter-spacing: -0.04em; color: #0B0B0B; }
.sym-letter i { flex: 0 0 auto; width: 12px; height: 12px; margin: 0 0 -2px 6px; border-radius: 50%; background: var(--c); }
.sym-tit { margin-top: 30px; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: #0B0B0B; }
.sym-desc { margin-top: 17px; font-size: 14px; line-height: 1.85; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }

@media screen and (max-width: 1250px) {
    .sym-section { padding: 90px 0 110px; }
    .sym-head { gap: 60px; }
    .sym-stage { flex: 0 0 320px; height: 320px; }
    .sym-halo { left: -48px; top: -48px; width: 416px; height: 416px; }
    .sym-shadow { left: 32px; top: 316px; width: 256px; height: 68px; filter: blur(8px); }
    .sym-copy { padding-top: 40px; }
    .sym-title { font-size: 38px; }
    .sym-cards { margin-top: 110px; gap: 16px; }
    .sym-card { padding: 26px 22px 24px; }
    .sym-bar { left: 22px; }
}
@media screen and (max-width: 950px) {
    /* 좁은 화면에선 심볼을 날리지 않는다(JS 가 진행률을 0 으로 묶는다) — 자리만 접는다 */
    .sub .logo3d-section { min-height: 0; padding: 70px 0; }
    .sub .logo3d-section .logo3d-slot { height: 360px; }
    .sym-fly { height: 360px; }
    .sym-section { padding: 70px 0 80px; }
    .sym-head { display: block; }
    .sym-stage { display: none; }
    .sym-copy { padding-top: 0; }
    .sym-title { font-size: 32px; }
    .sym-body { font-size: 16px; }
    .sym-cards { flex-wrap: wrap; margin-top: 48px; }
    .sym-card { flex: 0 0 100%; min-height: 0; }
}
@media screen and (max-width: 650px) {
    .sub .logo3d-section { padding: 56px 0; }
    .sub .logo3d-section .logo3d-slot { height: 280px; }
    .sym-fly { height: 280px; }
    .sym-title { font-size: 26px; }
    .sym-letter { font-size: 52px; line-height: 58px; }
}
.sub .about-intro-section .txt .sec-title { margin-top: 20px; }
.sub .about-intro-section .txt .quote { margin-top: 30px; font-size: 26px; font-weight: 700; line-height: 1.5; letter-spacing: -0.045em; color: #222; word-break: keep-all; }
.sub .about-intro-section .txt .quote em { font-style: normal; background: linear-gradient(transparent 60%, var(--point-color) 60%); }
.sub .about-intro-section .txt .desc { margin-top: 24px; font-size: 17px; line-height: 1.8; color: #666; word-break: keep-all; }
@media screen and (max-width: 950px) {
    .sub .about-intro-section { padding: 80px 0; }
    .sub .about-intro-section .grid { grid-template-columns: 1fr; gap: 40px; }
    .sub .about-intro-section .img-box { aspect-ratio: 16/10; }
}
@media screen and (max-width: 650px) {
    .sub .about-intro-section .txt .quote { font-size: 21px; }
    .sub .about-intro-section .txt .desc { font-size: 15px; }
}

/* team */
/* ============================================================
   about — ONE TEAM (Figma "one_team" #480:179, 1920×740)
   카드 3장 밑으로 세 갈래 선이 가운데로 모이고, 합류점에 ONE GOAL 알약이 놓인다.
============================================================ */
.sub .team-section { padding: 110px 0 74px; color: #0B0B0B;
    background: linear-gradient(180deg, #F3F5F9 0%, #E9EDF4 100%); }
.tm-eyebrow { text-align: center; font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 12px; font-weight: 600; line-height: 13px; letter-spacing: .12em; color: #1B4DFF; }
.tm-title { margin-top: 19px; text-align: center;
    font-size: 46px; font-weight: 700; letter-spacing: -0.04em; color: #0B0B0B; }

.tm-cards { display: flex; gap: 24px; margin-top: 63px; }
.tm-card { flex: 1 1 0; min-width: 0; min-height: 220px; padding: 32px 28px 28px; border-radius: 20px;
    background: rgba(255,255,255,.9); border: 1px solid rgba(11,11,11,.06);
    box-shadow: 0 10px 26px -6px rgba(10,18,41,.08); }
.tm-role { display: flex; align-items: center; gap: 8px; line-height: 14px;
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500; color: var(--c); }
.tm-role i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.tm-name { margin-top: 24px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: #0B0B0B; }
.tm-desc { margin-top: 19px; font-size: 14.5px; line-height: 1.85; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }

/* 합류 그래픽 — viewBox 1200×144 를 그대로 늘려 쓴다(카드 중심 192 / 600 / 1008 에 맞춰 그렸다) */
.tm-flow { position: relative; height: 144px; }
.tm-flow svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tm-glow { position: absolute; left: 50%; bottom: -100px; width: 360px; height: 160px; transform: translateX(-50%);
    border-radius: 50%; filter: blur(15px); pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(27,77,255,.28) 0%, rgba(27,77,255,0) 70%); }

.tm-goal { position: relative; display: block; width: 224px; height: 42px; margin: 0 auto; border-radius: 21px;
    background: #1B4DFF; color: #fff; text-align: center; line-height: 42px;
    font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

@media screen and (max-width: 1250px) {
    .sub .team-section { padding: 90px 0 64px; }
    .tm-title { font-size: 38px; }
    .tm-cards { gap: 16px; margin-top: 48px; }
    .tm-card { padding: 26px 22px 24px; min-height: 0; }
    .tm-name { font-size: 23px; margin-top: 20px; }
    .tm-flow { height: 118px; }
}
@media screen and (max-width: 950px) {
    /* 카드가 세로로 쌓이면 세 갈래가 가운데로 모이는 그림이 성립하지 않는다 — 통째로 숨긴다 */
    .sub .team-section { padding: 70px 0 60px; }
    .tm-title { font-size: 32px; }
    .tm-cards { flex-wrap: wrap; gap: 14px; margin-top: 36px; }
    .tm-card { flex: 0 0 100%; }
    .tm-flow { display: none; }
    .tm-goal { margin-top: 36px; }
}
@media screen and (max-width: 650px) {
    .tm-title { font-size: 26px; }
    .tm-name { font-size: 21px; }
    .tm-desc br { display: none; }
}


/* ============================================================
   CONTACT page — form
============================================================ */
.sub.contact .contact-section { padding: 110px 0; background: #fff; }
.sub.contact .contact-section .grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; }
.sub.contact .contact-section .info .sec-title { margin-top: 18px; }
.sub.contact .contact-section .info .desc { margin-top: 22px; font-size: 17px; line-height: 1.8; color: #666; word-break: keep-all; }
.sub.contact .contact-section .info .info-list { margin-top: 44px; display: flex; flex-direction: column; gap: 26px; }
.sub.contact .contact-section .info .info-list .row .lb { font-family: 'Space Grotesk', sans-serif; font-size: 13px; letter-spacing: .05em; color: var(--gray-color); text-transform: uppercase; }
.sub.contact .contact-section .info .info-list .row .val { margin-top: 6px; font-size: 20px; font-weight: 700; color: #222; letter-spacing: -0.03em; }
.sub.contact .contact-section .form-box { background: #f6f6f4; border-radius: 12px; padding: 48px; }
.contact-form { display: flex; flex-wrap: wrap; gap: 20px; }
.contact-form .field { width: 100%; }
.contact-form .field.half { width: calc(50% - 10px); }
.contact-form .field label { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 9px; }
.contact-form .field label .req { color: #e0533d; }
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea { width: 100%; background: #fff; border: 1px solid #e2e2e0; border-radius: 8px; padding: 15px 16px; font-size: 15px; color: #222; transition: border-color .2s; }
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder { color: #b5b5b5; }
.contact-form .field input:focus,
.contact-form .field select:focus,
.contact-form .field textarea:focus { outline: none; border-color: #222; }
.contact-form .field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.contact-form .agree { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #666; }
.contact-form .agree input { width: 18px; height: 18px; accent-color: #222; }
.contact-form .agree a { text-decoration: underline; }
.contact-form .submit-wrap { width: 100%; margin-top: 6px; }
.contact-form .submit-btn { width: 100%; border: none; cursor: pointer; background: #222; color: #fff; font-size: 17px; font-weight: 700; padding: 18px; border-radius: 100px; transition: background .25s; display: flex; align-items: center; justify-content: center; gap: 10px; }
.contact-form .submit-btn:hover { background: var(--point-color); color: #fff; }
@media screen and (max-width: 950px) {
    .sub.contact .contact-section .grid { grid-template-columns: 1fr; gap: 44px; }
}
@media screen and (max-width: 650px) {
    .sub.contact .contact-section { padding: 70px 0; }
    .sub.contact .contact-section .form-box { padding: 28px 20px; }
    .contact-form .field.half { width: 100%; }
}


/* PORTFOLIO page — filter */
.work-section .work-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 50px; }
.work-section .work-filter .f-btn { font-size: 15px; font-weight: 600; padding: 10px 22px; border-radius: 100px; border: 1px solid var(--line-color); background: transparent; color: #888; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.work-section .work-filter .f-btn:hover { border-color: #222; color: #222; }
.work-section .work-filter .f-btn.active { background: #222; color: #fff; border-color: #222; }
.work-grid .item.hide { display: none; }
.work-grid .item-wrap.hide { display: none; }
@media screen and (max-width: 650px) {
    .work-section .work-filter { margin-bottom: 30px; gap: 8px; }
    .work-section .work-filter .f-btn { font-size: 13px; padding: 8px 16px; }
}


/* ===== CONTACT 오시는 길 (location) ===== */
.sub.contact .location-section { padding: 20px 0 110px; background: #fff; }
.sub.contact .location-section .sec-head { margin-bottom: 38px; }
.sub.contact .location-section .sec-head .sec-title { margin-top: 14px; }
.sub.contact .location-section .loc-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: stretch; }
.sub.contact .location-section .loc-map { position: relative; border-radius: 10px; overflow: hidden; min-height: 400px; background: #eee; }
.sub.contact .location-section .loc-map iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; }
.sub.contact .location-section .loc-map .map-open { position: absolute; right: 12px; bottom: 12px; z-index: 2; background: #fff; color: #222; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 100px; box-shadow: 0 6px 16px rgba(0,0,0,.18); display: inline-flex; align-items: center; gap: 6px; transition: background .2s; }
.sub.contact .location-section .loc-map .map-open:hover { background: var(--point-color); }
.sub.contact .location-section .loc-info { display: flex; flex-direction: column; }
.sub.contact .location-section .loc-info .loc-logo { height: 24px; width: auto; align-self: flex-start; margin-bottom: 26px; }
.sub.contact .location-section .company-dl { border-top: 2px solid #222; }
.sub.contact .location-section .company-dl .row { display: flex; gap: 16px; padding: 15px 4px; border-bottom: 1px solid var(--line-color); }
.sub.contact .location-section .company-dl .row .k { flex-shrink: 0; width: 118px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: var(--gray-color); letter-spacing: .02em; padding-top: 2px; }
.sub.contact .location-section .company-dl .row .v { font-size: 15px; color: #222; font-weight: 500; line-height: 1.55; word-break: keep-all; }
.sub.contact .location-section .loc-btns { margin-top: auto; padding-top: 26px; display: flex; gap: 10px; }
.sub.contact .location-section .loc-btns a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 15px 12px; border-radius: 100px; font-weight: 700; font-size: 15px; transition: background .25s, color .25s, filter .2s; }
.sub.contact .location-section .loc-btns .call { background: #222; color: #fff; }
.sub.contact .location-section .loc-btns .call:hover { background: var(--point-color); color: #fff; }
.sub.contact .location-section .loc-btns .kakao { background: #FEE500; color: #3A1D1D; }
.sub.contact .location-section .loc-btns .kakao:hover { filter: brightness(0.96); }
.sub.contact .location-section .loc-btns svg { width: 18px; height: 18px; flex-shrink: 0; }
@media screen and (max-width: 950px) {
    .sub.contact .location-section { padding: 10px 0 80px; }
    .sub.contact .location-section .loc-grid { grid-template-columns: 1fr; gap: 24px; }
    .sub.contact .location-section .loc-map, .sub.contact .location-section .loc-map iframe { min-height: 320px; }
    .sub.contact .location-section .loc-btns { margin-top: 26px; }
}
@media screen and (max-width: 650px) {
    .sub.contact .location-section .company-dl .row { flex-direction: column; gap: 4px; }
    .sub.contact .location-section .company-dl .row .k { width: 100%; }
    .sub.contact .location-section .loc-btns { flex-direction: column; }
}


/* ============================================================
   INSIGHT page — board
============================================================ */
.board-section { padding: 130px 0; background: #fff; }
.sub.insight .board-section { padding: 130px 0; background: #fff; }
.board-section .board-tools .tab-list,
.sub.insight .board-section .tab-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }
.board-section .tab-list .tab,
.sub.insight .board-section .tab-list .tab { font-size: 15px; font-weight: 600; padding: 10px 22px; border-radius: 100px; border: 1px solid var(--line-color); background: transparent; color: #888; transition: all .2s; cursor: pointer; display: inline-flex; align-items: center; line-height: 1.2; white-space: nowrap; }
.board-section .tab-list .tab:hover,
.sub.insight .board-section .tab-list .tab:hover { border-color: #222; color: #222; }
.board-section .tab-list .tab.active,
.sub.insight .board-section .tab-list .tab.active { background: #222; color: #fff; border-color: #222; }
.sub.insight .board-section .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media screen and (max-width: 950px) {
    .board-section,
    .sub.insight .board-section { padding: 90px 0; }
    .sub.insight .board-section .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 650px) {
    .board-section,
    .sub.insight .board-section { padding: 60px 0; }
    .board-section .tab-list .tab,
    .sub.insight .board-section .tab-list .tab { font-size: 13px; padding: 8px 16px; }
    .sub.insight .board-section .news-grid { grid-template-columns: 1fr; gap: 20px; }
}


/* ============================================================
   게시판 / 상세 / 글쓰기 / 문의확인 공통 (board-wrap)
============================================================ */
.sub .board-wrap { padding: 100px 0 120px; background: #fff; }
@media screen and (max-width: 650px) { .sub .board-wrap { padding: 60px 0 80px; } }

/* 목록 상단 툴바 */
.board-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.board-tools .total { font-size: 15px; color: #888; }
.board-tools .total b { color: #222; font-weight: 700; }
.board-tools .right { display: flex; align-items: center; gap: 10px; }
.board-search { display: flex; align-items: center; border: 1px solid var(--line-color); border-radius: 100px; overflow: hidden; background: #fff; }
.board-search select { border: none; padding: 11px 14px; font-size: 14px; background: #fff; color: #444; }
.board-search input { border: none; padding: 11px 8px; font-size: 14px; width: 180px; }
.board-search input:focus { outline: none; }
.board-search button { border: none; background: #222; color: #fff; padding: 0 18px; align-self: stretch; cursor: pointer; display: flex; align-items: center; }
.board-search button svg { width: 16px; height: 16px; }
.board-write-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--point-color); color: #fff; font-weight: 700; font-size: 14px; padding: 11px 22px; border-radius: 100px; transition: transform .2s; }
.board-write-btn:hover { transform: translateY(-2px); }
@media screen and (max-width: 650px) {
    .board-tools { flex-direction: column; align-items: stretch; }
    .board-tools .right { justify-content: space-between; }
    .board-search input { width: 100%; }
    .board-search { flex: 1; }
}

/* 테이블 */
.board-table { width: 100%; border-top: 2px solid #222; border-collapse: collapse; table-layout: fixed; }
.board-table th { font-size: 14px; color: #888; font-weight: 600; padding: 16px 12px; border-bottom: 1px solid var(--line-color); }
.board-table td { font-size: 15px; padding: 20px 12px; border-bottom: 1px solid var(--line-color); color: #555; text-align: center; vertical-align: middle; }
.board-table th.col-subject-th,
.board-table td.subject { text-align: left; }
.board-table td.subject a { display: block; font-weight: 600; color: #222; transition: color .2s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-table td.subject a .new_icon{ color: var(--point-color); }
.board-table th.col-chk-th,
.board-table td.td_chk { width: 44px; padding-left: 8px; padding-right: 8px; }
.board-table th.col-chk-th input[type="checkbox"],
.board-table td.td_chk input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; vertical-align: middle; }
.board-table td.td_chk label { display: none; }
.board-table td.subject a:hover { color: #2c62c8; }
.board-table td.num { font-family: 'Space Grotesk', sans-serif; color: #aaa; }
.board-table tbody tr { cursor: pointer; transition: background .15s; }
.board-table tbody tr:hover { background: #fafafa; }
.board-table .col-chk { width: 44px; }
.board-table .col-num { width: 72px; }
.board-table .col-type { width: 128px; }
.board-table .col-subject { width: auto; }
.board-table .col-company { width: 150px; }
.board-table .col-status { width: 108px; }
.board-table .col-date { width: 118px; }
.st { display: inline-block; padding: 5px 13px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.st.wait { background: #fff2e0; color: #cf7a12; }
.st.ing { background: #e8f0ff; color: #2f5fb8; }
.st.done { background: #eaf7e0; color: #4a8a1f; }
.type-tag { display: block; font-weight: 600; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
@media screen and (max-width: 950px) {
    .board-table .hide-mo { display: none; }
    .board-table .col-company,
    .board-table .col-date { width: 0; }
    .board-table .col-type { width: 108px; }
    .board-table .col-status { width: 92px; }
}
@media screen and (max-width: 650px) {
    .board-table th, .board-table td { padding: 14px 8px; font-size: 13px; }
    .board-table td.subject a { font-size: 14px; }
    .board-table .col-num { width: 48px; }
    .board-table .col-type { width: 88px; }
    .board-table .col-status { width: 80px; }
    .board-table .st { padding: 4px 10px; font-size: 11px; }
}

/* 페이징 */
.paging { margin-top: 44px; display: flex; justify-content: center; gap: 6px; }
.paging a { min-width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-color); border-radius: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: #666; transition: all .2s; }
.paging a:hover { border-color: #222; color: #222; }
.paging a.active { background: #222; color: #fff; border-color: #222; }
.paging a.arrow { color: #bbb; }

/* 상세 이전/다음 + 목록 버튼 */
.detail-nav { margin-top: 56px; border-top: 1px solid var(--line-color); }
.detail-nav .row { display: flex; align-items: center; gap: 20px; padding: 20px 6px; border-bottom: 1px solid var(--line-color); }
.detail-nav .row .lb { flex-shrink: 0; width: 70px; font-size: 14px; font-weight: 600; color: #999; }
.detail-nav .row .subj { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.detail-nav .row:hover .subj { color: #2c62c8; }
.detail-btn-row { margin-top: 40px; text-align: center; }
@media screen and (max-width: 650px) { .detail-nav .row .lb { width: 52px; font-size: 13px; } }

/* ===== 인사이트 상세 (article) ===== */
.view-article { max-width: 860px; margin: 0 auto; }
.view-article .cat-row { display: flex; align-items: center; gap: 12px; }
.view-article .cat-row .tag { background: var(--point-color); color: #fff; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 100px; }
.view-article .cat-row .date { font-family: 'Space Grotesk', sans-serif; color: #999; font-size: 14px; }
.view-article .tit { margin-top: 22px; font-size: 40px; font-weight: 800; line-height: 1.3; letter-spacing: -0.045em; color: #222; word-break: keep-all; }
.view-article .cover { width: 225px; height: 338px; margin: 44px auto 0; border-radius: 6px; box-shadow: 0 14px 30px rgba(0,0,0,.18); background-size: cover; background-position: center; } /* 목록과 동일한 책 표지 225×338px */
.view-article .body { margin-top: 44px; font-size: 17px; color: #444; word-break: keep-all; }
/* .view-article .body p { margin-bottom: 24px; } */
.view-article .body h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.04em; color: #222; margin: 44px 0 16px; }
.view-article .body blockquote { border-left: 3px solid var(--point-color); padding: 4px 0 4px 22px; margin: 32px 0; font-size: 20px; font-weight: 600; color: #222; line-height: 1.6; }
.view-article .tags { margin-top: 44px; display: flex; gap: 8px; flex-wrap: wrap; }
.view-article .tags .tg { font-size: 14px; color: #666; background: #f4f4f2; padding: 8px 16px; border-radius: 100px; }
@media screen and (max-width: 650px) {
    .view-article .tit { font-size: 26px; }
    .view-article .body { font-size: 16px; margin-top: 32px; }
    .view-article .body h3 { font-size: 20px; }
    .view-article .body blockquote { font-size: 17px; }
}

/* ===== 포트폴리오 상세 ===== */
.pf-view .cover { border-radius: 12px; aspect-ratio: 16/9; background-size: cover; background-position: center; }
.pf-view .info-bar { margin-top: 50px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; border-top: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); padding: 34px 4px; }
.pf-view .info-bar .it .lb { font-family: 'Space Grotesk', sans-serif; font-size: 13px; color: #aaa; text-transform: uppercase; letter-spacing: .03em; }
.pf-view .info-bar .it .val { margin-top: 10px; font-size: 17px; font-weight: 700; color: #222; word-break: break-all; }
.pf-view .info-bar .it .val a { color: #2c62c8; }
.pf-view .overview { margin-top: 54px; max-width: 820px; }
.pf-view .overview .tit { margin-top: 16px; font-size: 30px; font-weight: 800; letter-spacing: -0.045em; color: #222; line-height: 1.35; }
.pf-view .overview .desc { margin-top: 22px; font-size: 17px; line-height: 1.85; color: #555; word-break: keep-all; }
.pf-view .gallery { margin-top: 50px; display: flex; flex-direction: column; gap: 20px; }
.pf-view .gallery .g { border-radius: 10px; overflow: hidden; }
.pf-view .gallery .g img { display: block; max-width: 100%; width: 100%; height: auto; }
.pf-view .tags { margin-top: 44px; display: flex; gap: 8px; flex-wrap: wrap; }
.pf-view .tags .tg { font-size: 14px; color: #666; background: #f4f4f2; padding: 8px 16px; border-radius: 100px; }
.pf-view .point-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pf-view .point-grid .pt { background: #f4f4f2; border-radius: 10px; padding: 34px 30px; }
.pf-view .point-grid .pt .num { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; color: #2c62c8; }
.pf-view .point-grid .pt .tit { margin-top: 16px; font-size: 20px; font-weight: 700; letter-spacing: -0.04em; color: #222; }
.pf-view .point-grid .pt .desc { margin-top: 12px; font-size: 15px; line-height: 1.7; color: #777; word-break: keep-all; }
@media screen and (max-width: 950px) { .pf-view .info-bar { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } }
@media screen and (max-width: 650px) {
    .pf-view .overview .tit { font-size: 22px; }
    .pf-view .overview .desc { font-size: 16px; }
    .pf-view .point-grid { grid-template-columns: 1fr; gap: 12px; }
    .pf-view .point-grid .pt { padding: 26px 22px; }
    .pf-view .point-grid .pt .tit { font-size: 18px; }
}

/* ===== 포트폴리오 상세 인터랙션 (진행바 / 풀페이지 패닝 / 팔레트 / 라이트박스, script.js가 활성화) ===== */
.pf-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--point-color); z-index: 101; }
/* .gif-cover — 히어로 움짤 (첨부 이미지 1장으로 교체 가능, 하단 placeholder 그라데이션 shorthand보다 우선) */
.pf-view .cover.gif-cover { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #122040; }
/* 섹션 텍스트 헤더 + 섹션 간 여백 확대 */
.pf-view .pf-sec { margin-top: 110px; }
.pf-view .pf-sec .tit { margin-top: 14px; font-size: 27px; font-weight: 800; letter-spacing: -0.045em; color: #222; line-height: 1.35; }
.pf-view .pf-sec .desc { margin-top: 10px; max-width: 640px; font-size: 16px; line-height: 1.7; color: #777; word-break: keep-all; }
.pf-view .pf-sec + .point-grid, .pf-view .pf-sec + .full-shot, .pf-view .pf-sec + .full-shot-wrap, .pf-view .pf-sec + .font-grid, .pf-view .pf-sec + .color-band, .pf-view .pf-sec + .logo-duo, .pf-view .pf-sec + .ui-grid, .pf-view .pf-sec + .credit-list { margin-top: 30px; }
/* 컬러 시스템 — 대형 색면 밴드 (개수 자유, 글자색·테두리는 script.js가 배경 밝기로 자동 결정) */
.pf-view .color-band { display: flex; flex-wrap: wrap; gap: 14px; }
.pf-view .color-band .cb { flex: 1 1 200px; min-height: 260px; border-radius: 10px; padding: 26px 30px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; color: #fff; }
.pf-view .color-band .cb.cb-light { color: #111; }
.pf-view .color-band .cb.cb-line { border: 1px solid var(--line-color); }
.pf-view .color-band .cb .nm { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.pf-view .color-band .cb .hex { font-size: 13px; letter-spacing: .05em; opacity: .72; }
/* 로고 2분할 */
.pf-view .logo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-view .logo-duo .ld { aspect-ratio: 16 / 9; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.pf-view .logo-duo .ld.light { background: #F7F7F5; border: 1px solid var(--line-color); }
.pf-view .logo-duo .ld.dark { background: #122040; }
.pf-view .logo-duo .ld img { height: 84px; width: auto; }
/* 풀블리드 브레이크 밴드 */
body.sub.portfolio { overflow-x: hidden; }
.pf-view .bleed-band { width: 100vw; margin: 110px calc(50% - 50vw) 0; padding: 100px 20px; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; background: radial-gradient(70% 90% at 80% 0%, rgba(221,167,73,.25) 0%, rgba(221,167,73,0) 55%), linear-gradient(135deg, #1B3055 0%, #122040 55%, #0C1730 100%); }
.pf-view .bleed-band .bb-logo { height: 64px; width: auto; }
.pf-view .bleed-band .bb-txt { color: rgba(255,255,255,.85); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; word-break: keep-all; }
/* 주요 화면 UI 그리드 */
.pf-view .ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 24px; background: #F4F4F2; border-radius: 12px; padding: 44px; }
.pf-view .ui-grid .ui .shot-img { aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid #e4e4e2; background-size: cover; background-position: top center; background-repeat: no-repeat; background-color: #111; box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.pf-view .ui-grid .ui .lb { margin-top: 13px; font-size: 15px; font-weight: 600; color: #555; }
/* 크레딧 */
.pf-view .credit-list { border-top: 2px solid #222; }
.pf-view .credit-list .cr { display: flex; align-items: center; gap: 20px; padding: 18px 6px; border-bottom: 1px solid var(--line-color); }
.pf-view .credit-list .cr .role { flex: 0 0 180px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-color); }
.pf-view .credit-list .cr .who { font-size: 16px; font-weight: 600; color: #222; }
@media screen and (max-width: 650px) {
    .pf-view .color-band { gap: 10px; }
    .pf-view .color-band .cb { flex-basis: 130px; min-height: 130px; border-radius: 12px; padding: 14px 16px; }
    .pf-view .color-band .cb .nm { font-size: 15px; }
    .pf-view .color-band .cb .hex { font-size: 11px; }
    .pf-view .logo-duo { grid-template-columns: 1fr; gap: 10px; }
    .pf-view .logo-duo .ld img { height: 52px; }
    .pf-view .bleed-band { margin-top: 60px; padding: 56px 20px; gap: 16px; }
    .pf-view .bleed-band .bb-logo { height: 44px; }
    .pf-view .bleed-band .bb-txt { font-size: 16px; }
    .pf-view .ui-grid { grid-template-columns: 1fr; gap: 26px; padding: 20px; border-radius: 10px; }
    .pf-view .ui-grid .ui .lb { margin-top: 9px; font-size: 13px; }
    .pf-view .credit-list .cr { padding: 13px 4px; gap: 12px; }
    .pf-view .credit-list .cr .role { flex-basis: 110px; font-size: 11px; }
    .pf-view .credit-list .cr .who { font-size: 14px; }
}
/* 서체 견본 (레퍼런스: 큰 글자 + 폰트명 + 웨이트) */
.pf-view .font-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 30px 0 10px; }
.pf-view .font-grid .fi .glyph { font-size: 92px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: #222; }
.pf-view .font-grid .fi .name { margin-top: 44px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #222; }
.pf-view .font-grid .fi .weights { margin-top: 14px; display: flex; gap: 26px; font-size: 17px; color: #888; }
.pf-view .font-grid .fi .weights span { font-weight: 400; }
.pf-view .font-grid .fi .weights b { font-weight: 700; color: #222; }
@media screen and (max-width: 950px) {
    .pf-view .font-grid .fi .glyph { font-size: 60px; }
    .pf-view .font-grid .fi .name { margin-top: 28px; font-size: 17px; }
}
@media screen and (max-width: 650px) {
    .pf-view .font-grid { grid-template-columns: 1fr; gap: 36px; padding: 10px 0 0; }
    .pf-view .font-grid .fi .glyph { font-size: 54px; }
    .pf-view .font-grid .fi .name { margin-top: 16px; font-size: 16px; }
    .pf-view .font-grid .fi .weights { margin-top: 8px; font-size: 14px; }
}
.pf-view .overview { margin-top: 80px; }
.pf-view .tags { margin-top: 90px; }
.pf-view .detail-nav { margin-top: 90px; }
@media screen and (max-width: 650px) {
    .pf-view .pf-sec { margin-top: 60px; }
    .pf-view .pf-sec .tit { font-size: 20px; }
    .pf-view .pf-sec .desc { font-size: 14px; }
    .pf-view .pf-sec + .point-grid, .pf-view .pf-sec + .full-shot, .pf-view .pf-sec + .full-shot-wrap { margin-top: 20px; }
    .pf-view .overview { margin-top: 50px; }
    .pf-view .tags { margin-top: 55px; }
    .pf-view .detail-nav { margin-top: 55px; }
}
/* 풀샷 — 스크롤 속도(등속)는 script.js가 캡처 길이에 맞춰 계산 */
.pf-view .full-shot { position: relative; margin-top: 50px; border-radius: 12px; aspect-ratio: 16 / 9; background-size: 100% auto; background-position: top center; background-repeat: no-repeat; background-color: #111; } /* 호버 스크롤은 script.js(rAF)가 등속 제어 — CSS transition 사용 안 함 */
.pf-view .full-shot.no-pan { background-size: cover; background-position: center; }
@media screen and (max-width: 650px) {
    .pf-view .full-shot { margin-top: 35px; border-radius: 12px; }
}
/* 풀샷 디바이스 목업 (노트북 + 태블릿 + 모바일, 정적) */
.pf-view .full-shot-wrap { margin-top: 60px; }
.pf-view .device-trio { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 50px 5%; max-width: 900px; margin: 0 auto; } /* 태블릿·모바일도 노트북 가로폭 안에 */
.pf-view .device-trio .laptop { flex: 0 0 100%; }
.pf-view .device-trio .tabframe { flex: 0 0 60%; padding: 18px; border-radius: 34px; background: #0A1226; box-shadow: 0 30px 60px rgba(0,0,0,.28), inset 0 0 0 1.5px rgba(255,255,255,.08); }
.pf-view .device-trio .tabframe .scr { aspect-ratio: 768 / 1024; border-radius: 16px; background-size: cover; background-position: top center; background-repeat: no-repeat; background-color: #111; }
.pf-view .device-trio .phoneframe { flex: 0 0 34%; position: relative; padding: 14px; border-radius: 48px; background: #0A1226; box-shadow: 0 30px 60px rgba(0,0,0,.3), inset 0 0 0 1.5px rgba(255,255,255,.09); }
.pf-view .device-trio .phoneframe .scr { aspect-ratio: 390 / 844; border-radius: 36px; background-size: cover; background-position: top center; background-repeat: no-repeat; background-color: #111; }
.pf-view .device-trio .phoneframe .notch { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 2; width: 38%; height: 22px; border-radius: 0 0 14px 14px; background: #0A1226; }
@media screen and (max-width: 650px) {
    .pf-view .device-trio { flex-wrap: wrap; gap: 24px 6%; }
    .pf-view .device-trio .laptop { flex: 0 0 100%; }
    .pf-view .device-trio .tabframe { flex: 0 0 55%; padding: 8px; border-radius: 14px; }
    .pf-view .device-trio .tabframe .scr { border-radius: 7px; }
    .pf-view .device-trio .phoneframe { flex: 1; padding: 6px; border-radius: 18px; }
    .pf-view .device-trio .phoneframe .scr { border-radius: 13px; }
    .pf-view .device-trio .phoneframe .notch { height: 9px; }
}
.pf-view .laptop { max-width: 900px; margin: 0 auto; }
.pf-view .laptop .screen { position: relative; border-radius: 22px 22px 0 0; background: #0A1226; padding: 18px 18px 24px; box-shadow: 0 40px 90px rgba(0,0,0,.28), inset 0 0 0 1.5px rgba(255,255,255,.08); }
.pf-view .laptop .screen::before { content: ''; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #2a3350; }
.pf-view .laptop .shot { position: relative; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; background-size: 100% auto; background-position: top center; background-repeat: no-repeat; background-color: #111; }
.pf-view .laptop .base { position: relative; height: 17px; margin: 0 -5.5%; background: linear-gradient(#E8EBEF 0%, #C4C9D1 70%, #AEB4BD 100%); border-radius: 2px 2px 15px 15px; box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.pf-view .laptop .base::after { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 130px; height: 7px; border-radius: 0 0 9px 9px; background: #A2A8B2; }
@media screen and (max-width: 650px) {
    .pf-view .full-shot-wrap { margin-top: 40px; }
    .pf-view .laptop .screen { padding: 8px 8px 12px; border-radius: 12px 12px 0 0; }
    .pf-view .laptop .shot { border-radius: 4px; }
    .pf-view .laptop .base { height: 10px; }
    .pf-view .laptop .base::after { width: 70px; height: 4px; }
}
.pf-view .tall .g-lb { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgba(17,17,17,.82); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; padding: 7px 15px; border-radius: 100px; backdrop-filter: blur(6px); }
.pf-view .tall .g-lb i { width: 6px; height: 6px; border-radius: 50%; background: var(--point-color); }
.pf-view .palette { margin-top: 30px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-view .palette .sw { position: relative; display: inline-block; width: 42px; height: 42px; border-radius: 50%; transition: transform .2s; box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.pf-view .palette .sw.line { border: 1px solid var(--line-color); box-shadow: none; }
.pf-view .palette .sw:hover { transform: translateY(-3px) scale(1.06); }
.pf-view .palette .sw::after { content: attr(data-hex); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: #111; color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: .04em; padding: 5px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.pf-view .palette .sw:hover::after { opacity: 1; }
.pf-view .resp-block { position: relative; overflow: hidden; margin-top: 110px; padding: 60px 56px 50px; border-radius: 12px; background: radial-gradient(120% 120% at 80% 0%, #2b2b2b 0%, #161616 60%, #111 100%); color: #fff; }
.pf-view .resp-block .bg-word { position: absolute; right: -2%; top: -8%; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 130px; line-height: 1; color: rgba(255,255,255,.04); pointer-events: none; letter-spacing: -0.02em; }
.pf-view .resp-block .tit { position: relative; margin-top: 16px; font-size: 30px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.35; }
.pf-view .resp-block .desc { position: relative; margin-top: 14px; max-width: 640px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.65); word-break: keep-all; }
.pf-view .resp-block .device-row { position: relative; margin-top: 46px; display: flex; align-items: flex-end; gap: 4%; }
.pf-view .resp-block .device { min-width: 0; }
.pf-view .resp-block .device.pc { flex: 0 0 54%; }
.pf-view .resp-block .device.tab { flex: 0 0 23%; }
.pf-view .resp-block .device.mo { flex: 1; }
.pf-view .resp-block .frame { border-radius: 10px; background: #000; padding: 9px; box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.pf-view .resp-block .device.pc .frame { padding: 0; overflow: hidden; }
.pf-view .resp-block .device.pc .bar { display: flex; gap: 6px; padding: 12px 14px; background: #1f1f1f; }
.pf-view .resp-block .device.pc .bar span { width: 9px; height: 9px; border-radius: 50%; }
.pf-view .resp-block .device.pc .bar span:nth-child(1) { background: #FF5F57; }
.pf-view .resp-block .device.pc .bar span:nth-child(2) { background: #FEBC2E; }
.pf-view .resp-block .device.pc .bar span:nth-child(3) { background: #28C840; }
.pf-view .resp-block .scr { background-size: cover; background-position: center; background-repeat: no-repeat; }
.pf-view .resp-block .device.pc .scr { aspect-ratio: 16 / 9; }
.pf-view .resp-block .device.tab .scr { aspect-ratio: 768 / 1024; border-radius: 8px; }
.pf-view .resp-block .device.mo .scr { aspect-ratio: 390 / 844; border-radius: 16px; }
.pf-view .resp-block .dv-lb { margin-top: 14px; text-align: center; font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.5); }
@media screen and (max-width: 950px) {
    .pf-view .resp-block { padding: 40px 30px 36px; }
    .pf-view .resp-block .tit { font-size: 24px; }
    .pf-view .resp-block .bg-word { font-size: 90px; }
}
@media screen and (max-width: 650px) {
    .pf-view .resp-block { margin-top: 60px; padding: 28px 20px 26px; border-radius: 10px; }
    .pf-view .resp-block .tit { font-size: 20px; }
    .pf-view .resp-block .desc { font-size: 14px; }
    .pf-view .resp-block .device-row { margin-top: 28px; flex-wrap: wrap; gap: 22px 5%; }
    .pf-view .resp-block .device.pc { flex: 0 0 100%; }
    .pf-view .resp-block .device.tab { flex: 0 0 52%; }
    .pf-view .resp-block .device.mo { flex: 1; }
    .pf-view .resp-block .dv-lb { margin-top: 10px; font-size: 10px; }
}
@media screen and (max-width: 650px) {
    .pf-view .tall .g-lb { left: 10px; top: 10px; font-size: 11px; padding: 6px 12px; }
    .pf-view .palette .sw { width: 36px; height: 36px; }
}

/* ===== 글쓰기 폼 (write-form) ===== */
.write-form { max-width: 860px; margin: 0 auto; }
.write-form .field { margin-bottom: 24px; }
.write-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.write-form label { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 9px; }
.write-form label .req { color: #e0533d; }
.write-form input, .write-form select, .write-form textarea { width: 100%; background: #fff; border: 1px solid #e2e2e0; border-radius: 8px; padding: 14px 16px; font-size: 15px; color: #222; transition: border-color .2s; }
.write-form input::placeholder, .write-form textarea::placeholder { color: #b5b5b5; }
.write-form input:focus, .write-form select:focus, .write-form textarea:focus { outline: none; border-color: #222; }
.write-form textarea { min-height: 340px; resize: vertical; line-height: 1.7; }
.write-form .file-drop { border: 1.5px dashed #cfcfcf; border-radius: 12px; padding: 42px 20px; text-align: center; color: #999; cursor: pointer; background: #fafafa; transition: border-color .2s, background .2s; }
.write-form .file-drop:hover { border-color: var(--point-color); background: #f0f5ff; }
.write-form .file-drop .ic { width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; background: #fff; border: 1px solid var(--line-color); display: flex; align-items: center; justify-content: center; }
.write-form .file-drop .ic svg { width: 20px; height: 20px; color: #888; }
.write-form .file-drop { display: block; }
.write-form .file-drop .t { display: block; font-size: 15px; font-weight: 600; color: #555; }
.write-form .file-drop .s { display: block; margin: 8px auto 0; font-size: 13px; color: #aaa; line-height: 1.6; max-width: 480px; word-break: keep-all; }
.write-form .file-drop .s.sz { margin-top: 3px; font-size: 12.5px; color: #b9b9b3; }
.write-form .field .file-drop + .file-drop,
.write-form .field input.frm_input + .file-drop,
.write-form .field .file_del + .file-drop { margin-top: 16px; }
.write-form .field .file-drop + input.frm_input { margin-top: 8px; }
.write-form .file-drop .file-name { display: none; margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: #fff; border: 1px solid #e2e2e0; font-size: 14px; font-weight: 600; color: #222; word-break: break-all; }
.write-form .file-drop .file-name:not(:empty)::before { content: '첨부됨 · '; color: var(--point-color); }
.write-form .file-drop .file-name:not(:empty) { display: block; }
.write-form .file-drop.is-selected { border-color: var(--point-color); border-style: solid; background: #f0f5ff; }
.write-form .btn-row { margin-top: 40px; display: flex; gap: 12px; justify-content: center; }
.write-form .btn-cancel { border: 1px solid #ddd; color: #666; background: #fff; padding: 16px 40px; border-radius: 100px; font-weight: 700; font-size: 16px; cursor: pointer; transition: all .2s; }
.write-form .btn-cancel:hover { border-color: #222; color: #222; }
.write-form .btn-submit { border: none; background: #222; color: #fff; padding: 16px 46px; border-radius: 100px; font-weight: 700; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background .25s, color .25s; }
.write-form .btn-submit:hover { background: var(--point-color); color: #fff; }

.write-form .file_del{ display: flex; align-items: center; gap: 5px; }
.write-form .file_del input[type="checkbox"]{ width: auto; }


@media screen and (max-width: 650px) {
    .write-form .grid2 { grid-template-columns: 1fr; gap: 0; }
    .write-form .grid2 .field { margin-bottom: 24px; }
    .write-form .btn-row { flex-direction: column-reverse; }
    .write-form .btn-cancel, .write-form .btn-submit { width: 100%; justify-content: center; }
}

/* ===== 문의 확인 (inquiry-view) ===== */
.inquiry-view { max-width: 820px; margin: 0 auto; }
.inquiry-view .iv-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 0; border-bottom: 2px solid #222; }
.inquiry-view .iv-head .type-tag { font-size: 18px; font-weight: 700; color: #222; }
.inquiry-view .iv-head .date { margin-left: auto; font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: #999; }
.inquiry-view .status-admin { display: flex; align-items: center; }
.inquiry-view .status-select.st { border: none; appearance: none; -webkit-appearance: none; padding: 5px 28px 5px 13px; border-radius: 100px; font-size: 12px; font-weight: 700; cursor: pointer; background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.board-view-tools { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.inquiry-view .dl .row { display: flex; border-bottom: 1px solid var(--line-color); }
.inquiry-view .dl .row .k { width: 160px; flex-shrink: 0; background: #fafafa; padding: 18px 20px; font-weight: 600; color: #333; font-size: 15px; }
.inquiry-view .dl .row .v { padding: 18px 20px; font-size: 15px; color: #444; word-break: break-all; }
.inquiry-view .msg { margin-top: 34px; }
.inquiry-view .msg .lb { font-weight: 700; font-size: 16px; color: #222; margin-bottom: 12px; }
.inquiry-view .msg .box { border: 1px solid var(--line-color); border-radius: 12px; padding: 26px; line-height: 1.8; color: #444; background: #fafafa; font-size: 15px; word-break: keep-all; }
.inquiry-view .answer { margin-top: 34px; }
.inquiry-view .answer textarea { width: 100%; border: 1px solid #e2e2e0; border-radius: 12px; padding: 18px; min-height: 160px; font-size: 15px; line-height: 1.7; resize: vertical; }
.inquiry-view .answer textarea:focus { outline: none; border-color: #222; }
.inquiry-view .answer .btn-row { margin-top: 16px; text-align: right; }
.inquiry-view .answer .btn-answer { border: none; background: #222; color: #fff; padding: 13px 30px; border-radius: 100px; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .25s, color .25s; }
.inquiry-view .answer .btn-answer:hover { background: var(--point-color); color: #fff; }
@media screen and (max-width: 650px) {
    .inquiry-view .dl .row { flex-direction: column; }
    .inquiry-view .dl .row .k { width: 100%; padding: 12px 16px; }
    .inquiry-view .dl .row .v { padding: 12px 16px; }
}


/* ============================================================
   하단 플로팅 문의 바 (script.js가 주입)
============================================================ */
.inquiry-bar { position: fixed; left: 20px; right: 20px; bottom: 22px; margin: 0 auto; max-width: 720px; z-index: 95; transform: translateY(230%); transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.inquiry-bar.show { transform: translateY(0); }
.inquiry-bar.closed { display: none; }
.inquiry-bar .ib-inner { background: #111; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 100px; padding: 11px 11px 11px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 16px 44px rgba(0,0,0,.3); }
.inquiry-bar .ib-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.inquiry-bar .ib-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--point-color); display: flex; align-items: center; justify-content: center; }
.inquiry-bar .ib-ic svg { width: 20px; height: 20px; color: #222; }
.inquiry-bar .ib-txt { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.inquiry-bar .ib-txt b { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; }
.inquiry-bar .ib-txt span { font-size: 13px; color: rgba(255,255,255,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inquiry-bar .ib-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.inquiry-bar .ib-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--point-color); color: #fff; font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: 100px; transition: transform .2s; white-space: nowrap; }
.inquiry-bar .ib-btn:hover { transform: translateY(-2px); }
.inquiry-bar .ib-btn .arrow { transition: transform .2s; }
.inquiry-bar .ib-btn:hover .arrow { transform: translateX(3px); }
.inquiry-bar .ib-close { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: transparent; border: none; color: rgba(255,255,255,.6); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.inquiry-bar .ib-close:hover { background: rgba(255,255,255,.1); color: #fff; }

@media screen and (max-width: 760px) {
    body.ib-visible .quick-menu-section { bottom: 92px; }
}
@media screen and (max-width: 650px) {
    .inquiry-bar { left: 12px; right: 12px; bottom: 12px; }
    .inquiry-bar .ib-inner { padding: 9px 9px 9px 16px; gap: 10px; border-radius: 10px; }
    .inquiry-bar .ib-ic { display: none; }
    .inquiry-bar .ib-txt b { font-size: 14px; }
    .inquiry-bar .ib-txt span { display: none; }
    .inquiry-bar .ib-btn { padding: 11px 16px; font-size: 13px; }
    .inquiry-bar .ib-close { width: 32px; height: 32px; font-size: 20px; }
    body.ib-visible .quick-menu-section { bottom: 84px; }
}


/* ============================================================
   우측 고정 퀵 문의 폼 (script.js가 주입)
============================================================ */
.quick-form { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 96; display: flex; align-items: center; transition: transform .42s cubic-bezier(.22,.61,.36,1); }
.quick-form.collapsed { transform: translateY(-50%) translateX(292px); }
.quick-form .qf-tab { flex-shrink: 0; width: 44px; padding: 20px 0; background: var(--point-color); color: #fff; border: none; cursor: pointer; border-radius: 12px 0 0 12px; writing-mode: vertical-rl; font-weight: 700; font-size: 14px; letter-spacing: .12em; box-shadow: -6px 8px 20px rgba(0,0,0,.18); }
.quick-form .qf-panel { width: 292px; background: #161616; color: #fff; padding: 24px 22px; box-shadow: -12px 20px 44px rgba(0,0,0,.3); }
.quick-form .qf-panel .qf-title { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px; }
.quick-form .qf-panel .qf-title::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--point-color); }
.quick-form .qf-panel .qf-sub { margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.55; }
.quick-form .qf-panel form { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.quick-form .qf-panel input, .quick-form .qf-panel textarea { width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 11px 13px; font-size: 13.5px; color: #fff; transition: border-color .2s; }
.quick-form .qf-panel input::placeholder, .quick-form .qf-panel textarea::placeholder { color: rgba(255,255,255,.4); }
.quick-form .qf-panel input:focus, .quick-form .qf-panel textarea:focus { outline: none; border-color: var(--point-color); }
.quick-form .qf-panel textarea { min-height: 74px; resize: none; line-height: 1.5; }
.quick-form .qf-panel .qf-agree { display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 11.5px; color: rgba(255,255,255,.5); cursor: pointer; }
.quick-form .qf-panel .qf-agree input { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--point-color); }
.quick-form .qf-panel .qf-agree a { color: rgba(255,255,255,.7); text-decoration: underline; }
.quick-form .qf-panel .qf-submit { margin-top: 6px; background: var(--point-color); color: #fff; border: none; font-weight: 700; font-size: 14px; padding: 12px; border-radius: 8px; cursor: pointer; transition: filter .2s; }
.quick-form .qf-panel .qf-submit:hover { filter: brightness(1.06); }
@media screen and (max-width: 950px) { .quick-form { display: none; } }


/* ============================================================
   개인정보 처리방침 모달 (script.js가 주입)
============================================================ */
body.modal-open { overflow: hidden; }
.privacy-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.privacy-modal.active { opacity: 1; visibility: visible; }
.privacy-modal .pm-dim { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.privacy-modal .pm-dialog { position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 86vh; background: #fff; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transform: translateY(16px); transition: transform .3s; }
.privacy-modal.active .pm-dialog { transform: translateY(0); }
.privacy-modal .pm-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; background: #111; color: #fff; }
.privacy-modal .pm-head .t { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: center; gap: 9px; }
.privacy-modal .pm-head .t::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--point-color); }
.privacy-modal .pm-close { background: transparent; border: none; color: rgba(255,255,255,.7); font-size: 26px; line-height: 1; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; transition: background .2s, color .2s; }
.privacy-modal .pm-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.privacy-modal .pm-body { overflow-y: auto; padding: 24px 30px 30px; }
.privacy-modal .pm-body .lead { font-size: 14px; color: #555; line-height: 1.75; word-break: keep-all; }
.privacy-modal .pm-body h4 { margin: 22px 0 8px; font-size: 15.5px; font-weight: 800; color: #222; letter-spacing: -0.03em; }
.privacy-modal .pm-body p { font-size: 13.5px; color: #555; line-height: 1.75; margin-bottom: 4px; word-break: keep-all; }
.privacy-modal .pm-body p b { color: #333; font-weight: 700; }
.privacy-modal .pm-body .st { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-color); font-size: 12.5px; color: #999; }
.privacy-modal .pm-body::-webkit-scrollbar { width: 8px; }
.privacy-modal .pm-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
@media screen and (max-width: 650px) {
    .privacy-modal { padding: 0; align-items: flex-end; }
    .privacy-modal .pm-dialog { max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
    .privacy-modal .pm-head { padding: 18px 20px; }
    .privacy-modal .pm-head .t { font-size: 17px; }
    .privacy-modal .pm-body { padding: 20px 20px 26px; }
}


/* ============================================================
   빠른 상담신청 팝업 — tail.php #qformModal, 퀵메뉴 '빠른 상담신청'이 연다.
   개인정보 모달(z 1000)이 이 위로 떠야 하므로 z 는 그보다 낮게 둔다.
============================================================ */
.qform-modal { position: fixed; inset: 0; z-index: 990; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.qform-modal.active { opacity: 1; visibility: visible; }
.qform-modal .qfm-dim { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.qform-modal .qfm-dialog { position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 16px; padding: 40px 36px 36px; box-shadow: 0 24px 60px rgba(0,0,0,.28); transform: translateY(16px); transition: transform .3s; }
.qform-modal.active .qfm-dialog { transform: translateY(0); }
.qform-modal .qfm-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; background: transparent; border: none; color: #999; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.qform-modal .qfm-close:hover { background: #f2f2f2; color: #111; }
.qform-modal .qfm-close svg { width: 20px; height: 20px; }
.qform-modal .qfm-en { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--point-color); }
.qform-modal .qfm-title { margin-top: 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.04em; color: #111; }
.qform-modal .qfm-sub { margin-top: 8px; font-size: 14px; color: #777; line-height: 1.6; word-break: keep-all; }
.qform-modal .qfm-form { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.qform-modal .qfm-field { display: flex; flex-direction: column; gap: 7px; }
.qform-modal .qfm-lb { font-size: 14px; font-weight: 700; color: #222; letter-spacing: -0.03em; }
.qform-modal .qfm-lb em { font-style: normal; color: #EB5757; }
.qform-modal .qfm-field input, .qform-modal .qfm-field textarea { width: 100%; background: #F5F5F5; border: 1px solid transparent; border-radius: 10px; padding: 13px 15px; font-size: 15px; color: #111; transition: border-color .2s, background .2s; }
.qform-modal .qfm-field input::placeholder, .qform-modal .qfm-field textarea::placeholder { color: #aaa; }
.qform-modal .qfm-field input:focus, .qform-modal .qfm-field textarea:focus { outline: none; background: #fff; border-color: var(--point-color); }
.qform-modal .qfm-field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.qform-modal .qfm-agree { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 13.5px; color: #666; cursor: pointer; }
.qform-modal .qfm-agree input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--point-color); }
.qform-modal .qfm-agree a { color: #222; text-decoration: underline; }
.qform-modal .qfm-submit { margin-top: 8px; height: 56px; background: var(--point-color); color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; transition: filter .2s; }
.qform-modal .qfm-submit:hover { filter: brightness(1.06); }
.qform-modal .qfm-submit:disabled { opacity: .6; cursor: default; }
@media screen and (max-width: 650px) {
    .qform-modal { padding: 0; align-items: flex-end; }
    .qform-modal .qfm-dialog { max-width: 100%; border-radius: 16px 16px 0 0; padding: 32px 20px 24px; }
    .qform-modal .qfm-title { font-size: 22px; }
    .qform-modal .qfm-field textarea { min-height: 100px; }
}


/* 닫기(X) 버튼 — 얇은 SVG 선 아이콘 */
.aside-section .close-btn, .privacy-modal .pm-close, .inquiry-bar .ib-close { display: flex; align-items: center; justify-content: center; }
.aside-section .close-btn svg { width: 24px; height: 24px; }
.privacy-modal .pm-close svg { width: 22px; height: 22px; }
.inquiry-bar .ib-close svg { width: 18px; height: 18px; }


/* ============================================================
   메인 — 프로젝트 키워드 검색 (검색바 + 마스코트 빼꼼)
============================================================ */
/* Figma "[JOB] 키워드 검색 섹션" #310:2 — 밑줄형 대형 입력 + 원형 검색 버튼 + 흰 pill 키워드 */
.pf-search-section { position: relative; padding: 93px 0 130px; background: #EEF1F6; overflow: hidden; }
.pf-search-section::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(11,11,11,.1); }
.pf-search-section .sec-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 0; }
/* 아이브로 — 코발트 점 + 영문 대문자 트래킹 */
.pf-search-section .eyebrow { display: inline-flex; align-items: center; gap: 11px;
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #1B4DFF; }
.pf-search-section .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #1B4DFF; }
.pf-search-section .sec-title { margin-top: 24px; font-size: clamp(32px, 3.6vw, 58px); font-weight: 700; line-height: 1.4; letter-spacing: -0.04em; color: #0B0B0B; }
.pf-search-section .sec-desc { margin-top: 12px; font-size: 16px; line-height: 1.8; letter-spacing: -0.02em; color: #4A5261; }

.pf-search-section .search-bar { position: relative; width: min(100%, 1032px); margin: 70px auto 0; }
.pf-search-section .search-bar input { width: calc(100% - 96px); height: 82px; border: none; border-bottom: 2px solid rgba(11,11,11,.16); border-radius: 0; background: transparent; padding: 0;
    font-size: clamp(22px, 2.6vw, 40px); font-weight: 700; letter-spacing: -0.03em; text-align: center; color: #0B0B0B; transition: border-color .25s ease; }
.pf-search-section .search-bar input::placeholder { color: rgba(11,11,11,.28); font-weight: 700; }
.pf-search-section .search-bar input:focus { outline: none; border-bottom-color: rgba(11,11,11,.16); }
/* 밑줄 위에 얹히는 코발트 활성 구간 — 포커스하면 좌우로 늘어난다 */
.pf-search-section .search-bar::after { content: ''; position: absolute; left: calc(50% - 48px); bottom: 0; width: 280px; height: 2px; margin-left: -140px;
    background: #1B4DFF; transition: width .35s cubic-bezier(.16,1,.3,1), margin-left .35s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.pf-search-section .search-bar:focus-within::after { width: 480px; margin-left: -240px; }
.pf-search-section .search-bar button { position: absolute; right: 0; top: 41px; transform: translateY(-50%); width: 64px; height: 64px; border: none; border-radius: 50%; background: #1B4DFF; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .25s ease, transform .25s ease; }
.pf-search-section .search-bar button:hover { background: #0B36CC; transform: translateY(-50%) scale(1.05); }
.pf-search-section .search-bar button svg { width: 26px; height: 26px; }
.pf-search-section .search-keywords { max-width: 1032px; margin: 98px auto 0; }
.pf-search-section .kw-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pf-search-section .kw-list a { display: inline-flex; align-items: center; gap: 11px; height: 42px; padding: 0 22px; border: 1px solid rgba(11,11,11,.08); border-radius: 21px; background: #fff;
    font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: rgba(11,11,11,.85);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
/* 첫 칩(가장 많은 분야)은 시안처럼 살짝 띄워 강조한다 */
.pf-search-section .kw-list a:first-child { border-color: rgba(11,11,11,.24); box-shadow: 0 12px 30px -6px rgba(10,18,41,.14); }
.pf-search-section .kw-list a:hover { border-color: rgba(27,77,255,.45); box-shadow: 0 12px 30px -6px rgba(10,18,41,.16); transform: translateY(-2px); }
@media screen and (max-width: 767px) {
    .pf-search-section { padding: 70px 0 84px; }
    .pf-search-section .search-bar { margin-top: 44px; }
    .pf-search-section .search-bar input { width: calc(100% - 66px); height: 62px; }
    .pf-search-section .search-bar button { width: 48px; height: 48px; top: 31px; }
    .pf-search-section .search-bar button svg { width: 20px; height: 20px; }
    .pf-search-section .search-bar::after { left: calc(50% - 33px); width: 180px; margin-left: -90px; }
    .pf-search-section .search-bar:focus-within::after { width: 280px; margin-left: -140px; }
    .pf-search-section .search-keywords { margin-top: 44px; }
    .pf-search-section .kw-list { gap: 8px; }
    .pf-search-section .kw-list a { height: 38px; padding: 0 16px; gap: 8px; font-size: 13px; }
}

/* 포트폴리오 — 검색 결과 안내 */
.search-note { margin: -18px 0 26px; font-size: 16px; color: #555; }
.search-note b { color: #222; }

/* 추천 키워드 건수 배지 */
.pf-search-section .kw-list a em { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #1B4DFF; }

/* 포트폴리오 목록 — 검색결과 헤드 / 결과 없음 */
.work-result-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid #e5e5e5; }
.work-result-head p { font-size: 17px; color: #666; letter-spacing: -0.03em; }
.work-result-head p strong { color: #222; font-weight: 800; }
.work-result-head p b { color: var(--point-color); font-weight: 800; }
.work-result-head .reset { flex-shrink: 0; font-size: 15px; font-weight: 600; color: #888; text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.work-result-head .reset:hover { color: var(--point-color); }
.work-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 90px 20px 100px; }
.work-empty svg { width: 46px; height: 46px; color: #c4ccd4; margin-bottom: 22px; }
.work-empty .tit { font-size: 24px; font-weight: 800; color: #222; letter-spacing: -0.04em; }
.work-empty .desc { margin-top: 10px; font-size: 16px; color: #777; line-height: 1.6; }
.work-empty .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.work-empty .btns a { display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border-radius: 100px; font-size: 16px; font-weight: 700; transition: background .25s, color .25s, border-color .25s; }
.work-empty .btns .btn-fill { background: var(--point-color); color: #fff; }
.work-empty .btns .btn-fill:hover { filter: brightness(.92); }
.work-empty .btns .btn-line { border: 1px solid #d5d5d5; color: #444; }
.work-empty .btns .btn-line:hover { border-color: var(--point-color); color: var(--point-color); }
@media screen and (max-width: 767px) {
    .work-result-head { margin-bottom: 20px; padding-bottom: 14px; }
    .work-result-head p { font-size: 15px; }
    .work-empty { padding: 60px 16px 70px; }
    .work-empty .tit { font-size: 20px; }
    .work-empty .desc { font-size: 14px; }
    .work-empty .btns a { height: 46px; padding: 0 20px; font-size: 14px; }
}

/* ============================================================
   메인 — 홈페이지 고민 섹션 (말풍선 마퀴 + 개구리 마스코트)
============================================================ */
.worry-section { padding: 120px 0 100px; background-color: #e7eef4; overflow: hidden; transition: background-color .8s ease; }
.worry-section .sec-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 54px; }
.worry-section .sec-desc { margin-top: 14px; font-size: 17px; color: #5f7183; }
.worry-rows { display: grid; gap: 16px; }
.clients-marquee.worry .track { gap: 16px; animation-duration: 38s; }
.worry-section .w-bubble { flex-shrink: 0; background: #fff; color: #222; font-size: 17px; font-weight: 600; letter-spacing: -0.03em; padding: 16px 28px; border-radius: 100px 100px 100px 8px; box-shadow: 0 8px 20px rgba(45, 75, 110, .08); white-space: nowrap; }
.clients-marquee.worry.reverse .w-bubble { border-radius: 100px 100px 8px 100px; }
.worry-hero { text-align: center; margin-top: 64px; }
.worry-hero .worry-answer { font-size: 26px; font-weight: 800; letter-spacing: -0.045em; color: #222; word-break: keep-all; }
.worry-hero .worry-answer b { background: linear-gradient(transparent 62%, var(--point-color) 62%); }
.worry-hero .btn-fill { margin-top: 26px; }
/* 고민하는 로봇 마스코트 — 둥둥 떠다니는 효과 + 바닥 그림자 연동 */
.worry-hero .mascot-wrap { position: relative; width: clamp(180px, 21vw, 300px); margin: 54px auto 0; padding-bottom: 26px; }
.worry-hero .mascot-wrap img { display: block; width: 100%; position: relative; z-index: 1; animation: mascot-float 3.6s ease-in-out infinite; }
.worry-hero .mascot-shadow { position: absolute; left: 50%; bottom: 4px; width: 72%; height: 18px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(45, 75, 110, .28), transparent 68%); border-radius: 50%; animation: mascot-shadow 3.6s ease-in-out infinite; }
@keyframes mascot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes mascot-shadow {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(.82); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) { .worry-hero .mascot-wrap img, .worry-hero .mascot-shadow { animation: none; } }
@media screen and (max-width: 767px) {
    .worry-section { padding: 80px 0 64px; }
    .worry-section .w-bubble { font-size: 14px; padding: 12px 20px; }
    .worry-hero { margin-top: 44px; }
    .worry-hero .worry-answer { font-size: 20px; }
    .worry-hero .mascot-wrap { width: 160px; margin-top: 40px; }
}

/* 고민 → 잡브의 답 (worry-solve) */
.worry-section a.w-bubble { text-decoration: none; transition: transform .25s, box-shadow .25s; }
.worry-section a.w-bubble:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(45, 75, 110, .16); }
.worry-solve { display: flex; gap: 56px; align-items: stretch; margin-top: 72px; }
.ws-lead { flex: 0 0 360px; }
.ws-lead .ws-answer { font-size: 30px; font-weight: 800; letter-spacing: -0.045em; color: #222; line-height: 1.35; word-break: keep-all; }
.ws-lead .ws-answer b { background: linear-gradient(transparent 62%, var(--point-color) 62%); }
.ws-stats { display: flex; gap: 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(45, 75, 110, .18); }
.ws-stats li { list-style: none; }
.ws-stats li b { display: block; font-size: 26px; font-weight: 800; color: #1d355f; }
.ws-stats li span { display: block; margin-top: 4px; font-size: 13px; color: #5f7183; letter-spacing: -0.02em; }
.ws-lead .btn-fill { margin-top: 30px; }
.ws-lead .mascot-wrap { position: relative; width: 170px; margin: 42px 0 0; padding-bottom: 22px; }
.ws-lead .mascot-wrap img { display: block; width: 100%; position: relative; z-index: 1; animation: mascot-float 3.6s ease-in-out infinite; }
.ws-lead .mascot-shadow { position: absolute; left: 50%; bottom: 2px; width: 72%; height: 15px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(45, 75, 110, .28), transparent 68%); border-radius: 50%; animation: mascot-shadow 3.6s ease-in-out infinite; }
/* 2x2 그리드 + 1fr 행 — 카드 블록 전체 높이를 좌측 리드(로봇 그림자 라인)와 맞춤 */
.ws-cards { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 20px; }
.ws-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: 32px 30px 30px; box-shadow: 0 10px 24px rgba(45, 75, 110, .08); transition: transform .35s ease, box-shadow .35s ease; }
.ws-card::after { content: ''; position: absolute; right: -46px; bottom: -46px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(45, 75, 110, .09), transparent 70%); transition: transform .5s ease; }
.ws-card:hover::after { transform: scale(1.35); }
.ws-card .ico { position: relative; z-index: 1; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef4fb, #dce9f7); color: #1d355f; transition: background .35s ease, color .35s ease, transform .35s ease; }
.ws-card .ico svg { width: 26px; height: 26px; }
.ws-card:hover .ico { background: linear-gradient(135deg, var(--point-color), #1d355f); color: #fff; transform: rotate(-6deg) scale(1.08); }
.ws-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--point-color), #1d355f); transition: width .5s ease; }
.ws-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(45, 75, 110, .16); }
.ws-card:hover::before { width: 100%; }
.ws-card .num { position: absolute; top: 18px; right: 22px; font-style: normal; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: rgba(29, 53, 95, .08); transition: color .35s ease, transform .35s ease; }
.ws-card:hover .num { color: rgba(29, 53, 95, .22); transform: translateY(-3px); }
.ws-card .q { position: relative; z-index: 1; font-size: 14px; font-weight: 600; color: #7b8ea0; letter-spacing: -0.03em; transition: color .35s ease; }
.ws-card:hover .q { color: #4e647c; }
.ws-card .a-title { position: relative; display: inline-block; margin-top: 12px; font-size: 19px; font-weight: 800; letter-spacing: -0.04em; color: #1d355f; }
.ws-card .a-title::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--point-color); transition: width .4s ease .1s; }
.ws-card:hover .a-title::after { width: 100%; }
.ws-card .a-desc { position: relative; z-index: 1; margin-top: 8px; font-size: 15px; line-height: 1.6; color: #555; letter-spacing: -0.03em; word-break: keep-all; }
.ws-card[data-front] { cursor: pointer; }
.ws-card .ws-more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 700; color: #1d355f; letter-spacing: -0.03em; }
.ws-card .ws-more b { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #1d355f; color: #fff; font-size: 14px; line-height: 1; transition: transform .35s ease, background .35s ease; }
.ws-card:hover .ws-more b { background: var(--point-color); transform: rotate(90deg); }

/* ------------------------------------------------------------
   worry-section 다크 → 라이트 반전
   위 WHAT WE DO(#07080C) 톤을 그대로 이어받아 어둡게 시작했다가,
   이 섹션이 화면의 40% 를 채우는 지점에서 원래의 밝은 톤으로 부드럽게 반전된다.
   .is-dark 는 마크업에 박아두고 script.js(worryThemeHandler)가 떼어낸다 —
   JS 가 늦거나 실패해도 깜빡임 없이 다크 상태로 온전히 보인다.
------------------------------------------------------------ */
.worry-section .sec-title, .worry-section .sec-desc, .worry-section .w-bubble,
.worry-section .worry-answer, .worry-section .ws-answer, .worry-section .ws-stats,
.worry-section .ws-stats li b, .worry-section .ws-stats li span, .worry-section .ws-card,
.worry-section .ws-card .num, .worry-section .ws-card .q, .worry-section .ws-card .a-title,
.worry-section .ws-card .a-desc, .worry-section .ws-card .ws-more, .worry-section .ws-card .ws-more b,
.worry-section .mascot-shadow {
    transition: background-color .8s ease, color .8s ease, border-color .8s ease, box-shadow .8s ease, background .8s ease;
}

.worry-section.is-dark { background-color: #07080C; }
.worry-section.is-dark .sec-title { color: #fff; }
.worry-section.is-dark .sec-desc { color: rgba(255,255,255,.58); }

.worry-section.is-dark .w-bubble { background-color: rgba(255,255,255,.07); color: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.worry-section.is-dark a.w-bubble:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 12px 26px rgba(0,0,0,.4); }

.worry-section.is-dark .worry-answer,
.worry-section.is-dark .ws-answer { color: #fff; }
.worry-section.is-dark .ws-stats { border-top-color: rgba(255,255,255,.16); }
.worry-section.is-dark .ws-stats li b { color: #fff; }
.worry-section.is-dark .ws-stats li span { color: rgba(255,255,255,.5); }
.worry-section.is-dark .mascot-shadow { background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 68%); }

.worry-section.is-dark .ws-card { background-color: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.worry-section.is-dark .ws-card:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 20px 40px rgba(0,0,0,.45); }
.worry-section.is-dark .ws-card::after { background: radial-gradient(circle, rgba(255,255,255,.07), transparent 70%); }
.worry-section.is-dark .ws-card .ico { background: rgba(255,255,255,.09); color: #fff; }
.worry-section.is-dark .ws-card .num { color: rgba(255,255,255,.1); }
.worry-section.is-dark .ws-card:hover .num { color: rgba(255,255,255,.22); }
.worry-section.is-dark .ws-card .q { color: rgba(255,255,255,.45); }
.worry-section.is-dark .ws-card:hover .q { color: rgba(255,255,255,.68); }
.worry-section.is-dark .ws-card .a-title { color: #fff; }
.worry-section.is-dark .ws-card .a-desc { color: rgba(255,255,255,.62); }
.worry-section.is-dark .ws-card .ws-more { color: #fff; }
.worry-section.is-dark .ws-card .ws-more b { background-color: rgba(255,255,255,.2); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .worry-section, .worry-section * { transition: none !important; }
}

/* ------------------------------------------------------------
   고민 카드 Y축 플립 — Figma "[JOB] 고민 카드 — 뒷면 · 회전 중"(#714:2) · 모션 정의(#715:2)
   래퍼(.ws-flip)에 원근, 안쪽(.ws-flip-in)이 rotateY 로 돈다. 앞면(.ws-card)이 높이를 잡고
   뒷면은 같은 자리에 겹쳐 두므로 뒤집혀도 그리드가 흔들리지 않는다.
   들림(translateZ 0→60→0)은 transform 과 따로 합성되는 translate 속성으로 준다.
------------------------------------------------------------ */
.ws-flip { position: relative; perspective: 1600px; }
/* 앞·뒷면을 같은 그리드 칸에 겹친다 — 더 긴 쪽이 카드 높이를 잡아 좁은 폭에서도 뒷면이 잘리지 않는다 */
.ws-flip-in { position: relative; z-index: 1; display: grid; height: 100%; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.66,0,.24,1); }
.ws-flip-in > .ws-card, .ws-flip-in > .ws-back { grid-area: 1 / 1; min-width: 0; }
.ws-flip .ws-card { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ws-flip.is-flipped .ws-card { pointer-events: none; }
.ws-flip.is-lift .ws-flip-in { animation: wsFlipLift .72s linear; }
@keyframes wsFlipLift {
    0%   { translate: 0 0 0; animation-timing-function: cubic-bezier(.33,1,.68,1); }   /* power2.out */
    50%  { translate: 0 0 60px; animation-timing-function: cubic-bezier(.32,0,.67,0); } /* power2.in */
    100% { translate: 0 0 0; }
}
/* 바닥 그림자 — 엣지(90°)에서 가장 넓고 진하다 */
.ws-flip-sh { position: absolute; left: 12.5%; right: 12.5%; bottom: -16px; z-index: 0; height: 40px; border-radius: 50%;
    background: #0a1233; opacity: .1; filter: blur(26px); pointer-events: none; }
.ws-flip.is-lift .ws-flip-sh { animation: wsFlipSh .72s ease-in-out; }
@keyframes wsFlipSh {
    50% { transform: scaleX(1.12); opacity: .3; filter: blur(40px); }
}

/* 뒷면 */
.ws-back { position: relative; display: flex; flex-direction: column; padding: 22px 32px 14px; overflow: hidden; border-radius: 18px;
    background: linear-gradient(154deg, #12172e 14.3%, #0a0d1c 53.6%, #07080f 85.7%); box-shadow: 0 26px 60px -14px rgba(10,18,51,.3);
    backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(180deg) translateZ(1px); /* z-파이팅 방지 */
    color: #fff; cursor: pointer; pointer-events: none; }
.ws-flip.is-flipped .ws-back { pointer-events: auto; }
.ws-back::before { content: ''; position: absolute; top: -170px; right: -200px; width: 400px; height: 360px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(27,77,255,.42), rgba(27,77,255,0)); pointer-events: none; }
.ws-back .wm { position: absolute; right: 22px; bottom: -22px; font-style: normal; font-size: 120px; font-weight: 700; line-height: 1; letter-spacing: -0.06em; color: rgba(255,255,255,.04); pointer-events: none; }
.ws-back .hd { position: relative; display: flex; justify-content: space-between; align-items: center; }
.ws-back .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 14px; border-radius: 11px; background: rgba(27,77,255,.22); font-size: 9px; font-weight: 600; letter-spacing: .1em; color: #8ce0ff; }
.ws-back .x { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: -2px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
    background: rgba(255,255,255,.06); cursor: pointer; transition: background .25s, border-color .25s; }
.ws-back .x svg { width: 8px; height: 8px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }
.ws-back .x:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.ws-back .t { position: relative; margin-top: 12px; font-size: 23px; font-weight: 700; line-height: 1.3; letter-spacing: -0.04em; color: #fff; }
/* 문장이 줄바꿈돼도 점·칩이 첫 줄에 붙도록 위 정렬, 세로선은 항목마다 다음 점까지 잇는다 */
.ws-back .steps { --gap: 18px; position: relative; display: flex; flex-direction: column; gap: var(--gap); margin: 18px 0 16px; padding: 0; }
.ws-back .steps li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding-left: 28px; list-style: none; }
.ws-back .steps li:not(:last-child)::after { content: ''; position: absolute; left: 7px; top: 11px; bottom: calc(-1 * var(--gap) - 11px); width: 1.5px; background: rgba(91,155,255,.3); }
.ws-back .steps li::before { content: ''; position: absolute; z-index: 1; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle, #5b9bff 0 3px, rgba(27,77,255,.28) 3.5px); box-shadow: 0 0 8px rgba(91,155,255,.45); }
.ws-back .steps b { flex-shrink: 0; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 4px; background: rgba(140,224,255,.1); font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em; color: #8ce0ff; }
.ws-back .steps span { padding-top: 2px; font-size: 12.5px; font-weight: 500; line-height: 1.45; letter-spacing: -0.02em; color: rgba(255,255,255,.88); word-break: keep-all; }
.ws-back .foot { position: relative; display: flex; align-items: center; gap: 24px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }
.ws-back .btn { display: inline-flex; align-items: center; justify-content: center; width: 152px; height: 36px; border-radius: 18px; background: #1b4dff;
    box-shadow: 0 6px 16px -2px rgba(26,77,255,.4); font-size: 12px; font-weight: 700; letter-spacing: -0.02em; color: #fff; transition: background .25s; }
.ws-back .btn:hover { background: #3a66ff; }
.ws-back .lk { font-size: 11.5px; font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,.6); transition: color .25s; }
.ws-back .lk span { margin-left: 6px; font-size: 11px; font-weight: 700; color: rgba(140,224,255,.8); }
.ws-back .lk:hover { color: #fff; }
/* 뒷면 내용 — 회전이 60% 지난 뒤(.43s) 차례로 올라온다. 회전과 동시에 보이면 글자가 거울처럼 읽힌다 */
.ws-back .rv { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.ws-flip.is-flipped .ws-back .rv { opacity: 1; transform: none; transition-duration: .3s; transition-delay: calc(.43s + var(--i, 0) * .04s); }
@media (prefers-reduced-motion: reduce) {
    .ws-flip.is-lift .ws-flip-in, .ws-flip.is-lift .ws-flip-sh { animation: none; }
}
@media screen and (max-width: 950px) {
    .worry-solve { flex-direction: column; gap: 36px; margin-top: 56px; }
    .ws-lead { flex: none; }
    .ws-lead .mascot-wrap { display: none; }
}
@media screen and (max-width: 650px) {
    .ws-cards { grid-template-columns: 1fr; }
    .ws-card { padding: 26px 24px 24px; }
    .ws-lead .ws-answer { font-size: 24px; }
    .ws-stats { gap: 20px; }
    .ws-stats li b { font-size: 22px; }
    .ws-back { padding: 20px 22px 16px; }
    .ws-back .t { font-size: 20px; }
    .ws-back .steps { --gap: 12px; }
    .ws-back .foot { gap: 18px; }
}
/* 아주 좁은 폭 — 칩을 문장 위로 올려 문장 폭을 확보하고, 버튼 줄은 넘치면 다음 줄로 */
@media screen and (max-width: 420px) {
    .ws-back { padding: 18px 18px 16px; }
    .ws-back .steps li { flex-direction: column; gap: 4px; }
    .ws-back .steps span { padding-top: 0; }
    .ws-back .foot { flex-wrap: wrap; row-gap: 10px; }
    .ws-back .btn { width: auto; padding: 0 20px; }
}
/* 768 미만 — 화면이 좁으면 원근이 과해 보여 perspective 를 줄인다 */
@media screen and (max-width: 767px) {
    .ws-flip { perspective: 1200px; }
}

/* ============================================================
   클라이언트 로고 (마퀴)
============================================================ */
.clients-section { padding: 90px 0; background: #fff; overflow: hidden; }
.clients-section.alt { background: #f4f4f2; }
.clients-section .sec-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 46px; }
.clients-marquee { position: relative; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clients-marquee .track { display: flex; align-items: center; gap: 72px; width: max-content; animation: clientsMarquee 32s linear infinite; }
.clients-marquee:hover .track { animation-play-state: paused; }
.clients-marquee.reverse .track { animation-direction: reverse; }
.clients-marquee .logo-item { flex-shrink: 0; font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: #c2c2c2; white-space: nowrap; transition: color .3s; }
.clients-marquee .logo-item:hover { color: #222; }

/* ============================================================
   about — OUR CLIENTS (Figma "partners" #484:181)
   다크 배경 위 흰 알약 칩(210×84, radius 42)이 두 줄로 반대 방향 흐른다.
   ⚠ .clients-marquee / .track 은 다른 섹션(worry·openfeed·bookshelf)도 쓰는 공용 부품이라
      여기서는 .cl-dark / .cl-band 스코프 안에서만 값을 덮어쓴다.
============================================================ */
.clients-section.cl-dark { padding: 110px 0 120px; background: #07080F; }
.cl-head { text-align: center; }
.cl-eyebrow { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 12px; font-weight: 600; line-height: 13px; letter-spacing: .12em; color: #5B9BFF; }
.cl-title { margin-top: 19px; font-size: 46px; font-weight: 700; letter-spacing: -0.04em; color: #fff; }
.cl-desc { margin-top: 17px; font-size: 16px; letter-spacing: -0.02em; color: rgba(255,255,255,.55); word-break: keep-all; }

/* 시안의 좌우 페이드(260/1920 ≈ 13%)를 마스크로 재현 — 배경색이 바뀌어도 따라온다 */
.cl-dark .cl-band { margin-top: 67px;
    -webkit-mask: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
            mask: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); }
.cl-dark .cl-band + .cl-band { margin-top: 24px; }
.cl-dark .cl-band .track { gap: 16px; animation-duration: 70s; }
.cl-chip { flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 210px; height: 84px; border-radius: 42px; background: #fff; }
.cl-chip img { max-width: 150px; max-height: 34px; width: auto; height: auto; object-fit: contain; display: block; }

@media screen and (max-width: 1250px) {
    .clients-section.cl-dark { padding: 90px 0 96px; }
    .cl-title { font-size: 38px; }
    .cl-dark .cl-band { margin-top: 52px; }
}
@media screen and (max-width: 950px) {
    .clients-section.cl-dark { padding: 70px 0 76px; }
    .cl-title { font-size: 32px; }
    .cl-desc { font-size: 15px; }
    .cl-dark .cl-band { margin-top: 40px; }
    .cl-dark .cl-band .track { gap: 12px; }
    .cl-chip { width: 168px; height: 68px; border-radius: 34px; }
    .cl-chip img { max-width: 120px; max-height: 28px; }
}
@media screen and (max-width: 650px) {
    .cl-title { font-size: 26px; }
    .cl-chip { width: 140px; height: 58px; border-radius: 29px; }
    .cl-chip img { max-width: 100px; max-height: 24px; }
}
@keyframes clientsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clients-marquee .track, .bookshelf .book-item { animation: none; } }


/* ============================================================
   FAQ 아코디언 (홈 미니 + CONTACT 전체)
============================================================ */
.faq-section { padding: 100px 0; background: #fff; scroll-margin-top: 90px; }
.faq-section.alt { background: #f4f4f2; }
.faq-section .sec-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 44px; }
.faq-list { max-width: 860px; margin: 0 auto; border-top: 2px solid #222; }
.faq-item { border-bottom: 1px solid var(--line-color); }
.faq-item .faq-q { width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; padding: 24px 6px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: #222; }
.faq-item .faq-q .q-txt { display: flex; align-items: baseline; gap: 10px; }
.faq-item .faq-q .q-mark { color: var(--point-color); font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.faq-item .faq-q .ico { flex-shrink: 0; width: 22px; height: 22px; color: #999; transition: transform .3s, color .3s; }
.faq-item.open .faq-q .ico { transform: rotate(45deg); color: #222; }
.faq-item .faq-a { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.faq-item.open .faq-a { max-height: 2600px; }
.faq-item .faq-a .inner-a { display: flex; gap: 10px; padding: 0 6px 26px; font-size: 16px; line-height: 1.8; color: #666; word-break: keep-all; }
.faq-item .faq-a .inner-a .a-mark { flex-shrink: 0; color: var(--point-color); font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.faq-item .faq-a .inner-a .hl { color: #222; font-weight: 700; }
.faq-more { text-align: center; margin-top: 36px; position: relative; }
/* FAQ 마스코트 — '전체 FAQ 보기' 버튼 오른쪽에서 질문 생각 중 */
.faq-more .faq-mascot { position: absolute; left: calc(50% + 105px); bottom: -6px; width: 108px; pointer-events: none; }
@media screen and (max-width: 767px) {
    .faq-more .faq-mascot { width: 74px; left: calc(50% + 84px); bottom: -4px; }
}
@media screen and (max-width: 650px) {
    .faq-section { padding: 60px 0; }
    .faq-item .faq-q { font-size: 16px; padding: 20px 4px; gap: 12px; }
    .faq-item .faq-q .ico { width: 20px; height: 20px; }
    .faq-item .faq-a .inner-a { font-size: 14px; padding-bottom: 22px; }
}
@media screen and (max-width: 650px) {
    .clients-section { padding: 60px 0; }
    .clients-marquee .track { gap: 44px; }
    .clients-marquee .logo-item { font-size: 22px; }
}


/* ============================================================
   인라인 스타일 → CSS 이관 (유지보수용) + 모바일 타이틀 축소
============================================================ */
/* 섹션 타이틀 상단 여백 */
.process-section .sec-head .sec-title,
.work-section .sec-head .sec-title,
.insight-section .sec-head .sec-title { margin-top: 16px; }
.clients-section .sec-head .sec-title,
.faq-section .sec-head .sec-title { margin-top: 14px; }

/* 섹션 설명 폭 */
.process-section .sec-desc { max-width: 620px; }
.clients-section .sec-desc,
.faq-section .sec-desc { max-width: 600px; margin: 16px auto 0; }

/* 서브 비주얼 타이틀 (게시판/상세형) */
.sub .sub-visual .sv-title.sm { font-size: 56px; }
.sub .sub-visual.slim { padding: 170px 0 70px; }
.board-wrap.tight-top { padding-top: 70px; }

/* 포트폴리오 리스트 흰 배경 */
.work-section.white { background: #fff; }

/* board-tools 간격 */
.work-section .board-tools,
.board-section .board-tools { margin-bottom: 44px; }
.board-tools .work-filter,
.board-tools .tab-list { margin-bottom: 0; }

/* contact 문의내역 버튼 / 답변 라벨 / 모달 보조문단 */
.sub.contact .contact-section .info .btn-line { margin-top: 34px; }
.inquiry-view .answer .lb { font-weight: 700; font-size: 16px; color: #222; margin-bottom: 12px; }
.privacy-modal .pm-body .mt8 { margin-top: 8px; }

/* 문의 목록 테이블 컬럼폭 — col 클래스로 관리 (board-table 공통) */

/* 플레이스홀더 썸네일 그라데이션 (실제 이미지로 교체 가능) */
.work-grid .item .ph { background: linear-gradient(135deg,#2b2b2b,#111); }
.work-grid .item-wrap:nth-child(9n+2) .ph { background: linear-gradient(135deg,#3a4a1f,#1a1a1a); }
.work-grid .item-wrap:nth-child(9n+3) .ph { background: linear-gradient(135deg,#1f3a3a,#111); }
.work-grid .item-wrap:nth-child(9n+4) .ph { background: linear-gradient(135deg,#333,#0d0d0d); }
.work-grid .item-wrap:nth-child(9n+5) .ph { background: linear-gradient(135deg,#4a3a1f,#1a1a1a); }
.work-grid .item-wrap:nth-child(9n+6) .ph { background: linear-gradient(135deg,#2b2b2b,#0d0d0d); }
.work-grid .item-wrap:nth-child(9n+7) .ph { background: linear-gradient(135deg,#1f2f4a,#111); }
.work-grid .item-wrap:nth-child(9n+8) .ph { background: linear-gradient(135deg,#3a1f3a,#111); }
.work-grid .item-wrap:nth-child(9n) .ph { background: linear-gradient(135deg,#2f2f2f,#111); }

.insight-list .item .thumb { background: linear-gradient(135deg,#2b2b2b,#111); }
.insight-list .item-wrap:nth-child(9n+2) .thumb { background: linear-gradient(135deg,#3a4a1f,#1a1a1a); }
.insight-list .item-wrap:nth-child(9n+3) .thumb { background: linear-gradient(135deg,#1f3a3a,#111); }
.insight-list .item-wrap:nth-child(9n+4) .thumb { background: linear-gradient(135deg,#333,#0d0d0d); }
.insight-list .item-wrap:nth-child(9n+5) .thumb { background: linear-gradient(135deg,#4a3a1f,#1a1a1a); }
.insight-list .item-wrap:nth-child(9n+6) .thumb { background: linear-gradient(135deg,#1f2f4a,#111); }
.insight-list .item-wrap:nth-child(9n+7) .thumb { background: linear-gradient(135deg,#3a1f3a,#111); }
.insight-list .item-wrap:nth-child(9n+8) .thumb { background: linear-gradient(135deg,#2f2f2f,#111); }
.insight-list .item-wrap:nth-child(9n) .thumb { background: linear-gradient(135deg,#1f3a2a,#111); }

/* 포트폴리오 상세 커버/갤러리 · 인사이트 상세 커버 */
.pf-view .cover { background: linear-gradient(135deg,#2b2b2b,#111); }
.view-article .cover { background: linear-gradient(135deg,#3a4a1f,#1a1a1a); }

/* 모바일 타이틀 전체 축소 */
@media screen and (max-width: 650px) {
    .sec-title { font-size: 24px; }
    .main .hero-section .hero-title { font-size: 26px; }
    .sub .sub-visual .sv-title { font-size: 34px; }
    .sub .sub-visual .sv-title.sm { font-size: 28px; }
    .cta-section .big { font-size: 27px; }
    .sub .about-intro-section .txt .quote { font-size: 18px; }
    .view-article .tit { font-size: 22px; }
    .pf-view .overview .tit { font-size: 20px; }
    .faq-item .faq-q { font-size: 15px; }
}


/* ============================================================
   WOW 인터랙션 (데스크톱 · 파인 포인터 전용, script.js가 활성화)
============================================================ */
/* 1) 커스텀 커서 */
.has-custom-cursor, .has-custom-cursor * { cursor: none !important; }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; }
.cursor-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--point-color); transition: opacity .2s; }
.cursor-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1.5px solid var(--point-color); transition: width .25s, height .25s, margin .25s, background-color .25s, opacity .2s; }
.cursor-hover .cursor-ring { width: 66px; height: 66px; margin: -33px 0 0 -33px; background-color: rgba(70,132,236,.14); }
.cursor-hover .cursor-dot { opacity: 0; }
.cursor-hidden .cursor-dot, .cursor-hidden .cursor-ring { opacity: 0; }

/* 2) 마그네틱 버튼 */
.hero-btns .btn-fill, .hero-btns .btn-line, .cta-section .btn-fill, header .contact-btn { transition: transform .3s cubic-bezier(.22,.61,.36,1), background .25s, color .25s, box-shadow .25s, border-color .25s; }

/* 3) 히어로 스포트라이트 + BROTHERS 패럴랙스 */
.main .hero-section::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(600px circle at var(--sx,82%) var(--sy,18%), rgba(70,132,236,.10), transparent 60%); }
.main .hero-section .bg-word { transition: transform .25s ease-out; }

/* 4) 카드 3D 틸트 + 광택 */
.work-grid .item { transition: transform .2s ease; transform-style: preserve-3d; will-change: transform; }
.insight-list .item { transform-style: preserve-3d; will-change: transform; }
.work-grid .item .thumb::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%); opacity: 0; transition: opacity .35s; }
.work-grid .item:hover .thumb::after { opacity: 1; }


/* ============================================================
   포트폴리오 상세 — 핸드폰 목업 화면 슬라이더 (script.js가 구동)
============================================================ */
.pf-view .pf-mobile { margin-top: 56px; padding: 56px 20px; border-radius: 12px; background: #f4f4f2; text-align: center; }
.pf-view .pf-mobile .eyebrow { justify-content: center; }
.pf-view .pf-mobile .pf-mobile-title { margin-top: 12px; margin-bottom: 40px; font-size: 26px; font-weight: 800; letter-spacing: -0.04em; color: #222; }
.device-phone { position: relative; width: 288px; max-width: 82vw; aspect-ratio: 288 / 560; margin: 0 auto; background: #0c0c0c; border-radius: 46px; padding: 13px; box-shadow: 0 26px 55px rgba(0,0,0,.28); }
.device-phone::before { content: ''; position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 118px; height: 24px; background: #0c0c0c; border-radius: 0 0 16px 16px; z-index: 3; }
.device-phone::after { content: ''; position: absolute; right: -2px; top: 132px; width: 3px; height: 54px; background: #0c0c0c; border-radius: 2px; }
.device-phone .screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #000; }
.device-phone .phone-track { display: flex; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.7,0,.2,1); }
.device-phone .phone-slide { flex: 0 0 100%; height: 100%; background-size: cover; background-position: top center; }
/* 목업 화면 UI (실제 스크린샷으로 교체 가능) */
.screen .scr { height: 100%; display: flex; flex-direction: column; background: #fff; }
.screen .scr-hero { height: 40%; display: flex; align-items: center; justify-content: center; }
.screen .scr-hero .scr-logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .06em; color: #fff; }
.screen .scr-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.screen .scr-h { width: 66%; height: 13px; border-radius: 4px; background: #222; }
.screen .scr-t { width: 100%; height: 8px; border-radius: 4px; background: #e4e4e4; }
.screen .scr-t.short { width: 55%; }
.screen .scr-cta { margin-top: 6px; width: 108px; height: 28px; border-radius: 100px; background: var(--point-color); }
.screen .scr-grid { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.screen .scr-grid i { height: 44px; border-radius: 8px; background: #f0f0f0; }
.phone-slide:nth-child(1) .scr-hero { background: linear-gradient(135deg,#2b2b2b,#111); }
.phone-slide:nth-child(2) .scr-hero { background: linear-gradient(135deg,#3a4a1f,#1a1a1a); }
.phone-slide:nth-child(3) .scr-hero { background: linear-gradient(135deg,#1f3a3a,#111); }
.phone-slide:nth-child(4) .scr-hero { background: linear-gradient(135deg,#333,#0d0d0d); }
.pf-view .phone-dots { margin-top: 26px; display: flex; gap: 8px; justify-content: center; }
.pf-view .phone-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: #cfcfcf; cursor: pointer; transition: width .3s, background .3s; }
.pf-view .phone-dots button.active { width: 24px; border-radius: 100px; background: #222; }
@media screen and (max-width: 650px) {
    .pf-view .pf-mobile { padding: 40px 14px; margin-top: 40px; }
    .pf-view .pf-mobile .pf-mobile-title { font-size: 21px; margin-bottom: 30px; }
}


/* ============================================================
   폰 목업 Swiper 카루셀 (peek + drag + loop) — script.js가 init
============================================================ */
.device-phone .screen { background-size: cover; background-position: top center; }
.screen .scr-hero { background: linear-gradient(135deg, #2b2b2b, #111); }   /* 목업 히어로 기본색 */

/* 폰은 가운데 하나 고정, 화면(이미지)만 슬라이드 — 이전/다음 화면은 프레임 밖으로 살짝 보임(peek) */
.pf-view .pf-mobile { overflow: hidden; }   /* 프레임은 넘어가되 회색 섹션 밖으로는 안 나가게 */
.pf-mobile .device-phone .screen { overflow: visible; }
.pf-mobile .device-phone .screen .phone-swiper { width: 100%; height: 100%; overflow: visible; }
.pf-mobile .phone-swiper .swiper-slide { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; transform: scale(.9); transition: transform .5s; }
.pf-mobile .phone-swiper .swiper-slide-active { transform: scale(1); }
@media screen and (max-width: 650px) {
    .pf-mobile .phone-swiper .swiper-slide { border-radius: 22px; }
}
.pf-mobile .swiper-pagination { position: static; margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.pf-mobile .swiper-pagination-bullet { width: 8px; height: 8px; background: #cfcfcf; opacity: 1; transition: width .3s, background .3s; }
.pf-mobile .swiper-pagination-bullet-active { width: 24px; border-radius: 100px; background: #222; }

/* ============================================================
   jb_system 테마 전용 — 게시판 관리자 UI / 로그인 (서버 스킨이 사용)
============================================================ */
.board-admin-btn-wrap{ display: flex; align-items: center; gap: 10px; }
.admin-div { padding: 0 0 20px; }
.admin-div label { margin-left: 8px; font-size: 14px; font-weight: 600; color: #555; cursor: pointer; }
.work-grid .item-wrap { position: relative; }
.work-grid .item-wrap .item-chk { position: absolute; left: 14px; top: 14px; z-index: 3; }
.work-grid .item-wrap .item-chk input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.work-grid .item-wrap .item-chk label span { display: none; }
.insight-list .item-wrap { position: relative; }
.insight-list .item-wrap .item-chk { position: absolute; left: 14px; top: 14px; z-index: 3; }
.insight-list .item-wrap .item-chk input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.insight-list .item-wrap .item-chk label span { display: none; }
.paging_box { margin-top: 50px; }

/* login */
.login_main{ display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 100px 0; background-color: rgba(0,0,0,.8); }
.login_main .inner{ padding: 0 20px; width: 100%; }
.login_main .login-box{ overflow: hidden; border-radius: 10px; margin: 0 auto; background-color: #fff; width: 100%; max-width: 620px; }
.login_main .login-box .login-title{ text-align: center; padding: 20px; background-color: #222; color: #fff; text-align: center; font-size: 22px; font-weight: 700; }
.login_main .login-box .login-content{ padding: 60px 20px 40px 20px; margin: 0 auto; max-width: 428px; }
.login_main .login-box .login-item + .login-item{ margin-top: 14px; }
.login_main .login-box .login-item .ipt{ background-repeat: no-repeat; background-position: left 30px center; font-size: 16px; padding: 20px; padding-left: 65px; border: 1px solid #F8F8F8; background-color: #F8F8F8; border-radius: 100px; }
.login_main .login-box .login-item .ipt::placeholder{ color: #afafaf; }
.login_main .login-box .login-item .ipt#login_id{ background-image: url('../img/login/id-icon.svg'); }
.login_main .login-box .login-item .ipt#login_pw{ background-image: url('../img/login/pw-icon.png'); }
.login_main .login-box .login-btn{ display: block; width: 100%; font-size: 16px; border-radius: 10px; border: none; margin-top: 13px; background-color: #222; color: #fff; text-align: center; padding: 20px 10px; }
.login_main .login-box .login-info{ line-height: 1.5em; margin-top: 14px; text-align: center; font-size: 14px; color: #7f7f7f; }
.login_main .login-box .login-info .blue{ color: #4475D9; }

@media screen and (max-width: 650px) {
    .login_main .login-box .login-title{ padding: 15px 10px; font-size: 18px; }
    .login_main .login-box .login-content{ padding: 30px 10px; }
    .login_main .login-box .login-item .ipt{ font-size: 14px; }
    .login_main .login-box .login-btn{ padding: 15px 10px; font-size: 14px; }
    .login_main .login-box .login-info{ font-size: 14px; }
}

/* ============================================================
   메인 — 오픈 현황 티커 (히어로 아래, 포트폴리오 최근 오픈 자동 피드)
============================================================ */
/* ============================================================
   인트로 — "완성된 생각이 아니어도 괜찮습니다 / 방향을 찾는 일부터 함께합니다"
   옅은 그레이 문장이 검정으로 채워지고(clip-path 좌→우),
   다 채워지면 로고가 떠올라 헤더 로고 자리로 날아가 앉으며 메인이 드러난다.
============================================================ */
/* 기본은 숨김. index.php 인라인 스크립트가 재생할 때만 .is-on 을 붙인다 */
.jb-intro { position: fixed; z-index: 9999; inset: 0; display: none; align-items: center; justify-content: center;
    background: #FFFFFF; overflow: hidden; transition: background-color .6s ease; }
.jb-intro.is-on { display: flex; }
/* 끝날 때 배경만 걷는다 — 로고는 그대로 둔 채 헤더 자리에서 한 번에 교체한다 */
.jb-intro.is-out { background-color: transparent; pointer-events: none; }

/* 문장과 로고를 같은 칸에 겹쳐 둬서 둘 다 화면 정중앙에 놓는다 */
.ji-center { display: grid; }
.ji-center > * { grid-area: 1 / 1; place-self: center; }

.ji-wrap { text-align: center; transition: opacity .53s ease, transform .65s cubic-bezier(.16,1,.3,1); }
.jb-intro.is-logo .ji-wrap { opacity: 0; transform: translateY(-12px); }

/* 타이포그래피로 읽히도록 크게. 한 줄 19자를 한 줄에 유지해야 하므로(nowrap)
   px 하한을 두지 않고 vw 로만 잡는다 — 어떤 폭에서도 넘치지 않으면서 넓은 화면에서 최대한 커진다. */
.ji-line { position: relative; margin: 0; font-weight: 700; letter-spacing: -0.045em; line-height: 1.32;
    font-size: min(4.7vw, 82px); white-space: nowrap; }
.ji-line + .ji-line { margin-top: .12em; }
.ji-gray { color: #DCDFE5; }
/* 같은 문장을 검정으로 한 벌 더 겹쳐두고 좌→우로 열어 "채워지는" 것처럼 보이게 한다 */
.ji-fill { position: absolute; left: 0; top: 0; width: 100%; color: #0B0B0B;
    clip-path: inset(0 100% 0 0); transition: clip-path 1.24s cubic-bezier(.5,0,.2,1); }
.jb-intro.is-fill .ji-l1 .ji-fill { clip-path: inset(0 0 0 0); }
.jb-intro.is-fill .ji-l2 .ji-fill { clip-path: inset(0 0 0 0); transition-delay: .59s; }

/* 로고 — 흰 배경에서는 원본(검정) 그대로, 헤더로 날아가는 동안 반전시켜
   다크한 히어로 위의 헤더 로고와 같은 톤으로 맞춘다 */
.ji-logo { opacity: 0; transform: scale(.94); transform-origin: center;
    transition: opacity .59s ease, transform 1.06s cubic-bezier(.65,0,.35,1), filter .71s ease; }
.jb-intro.is-logo .ji-logo { opacity: 1; transform: scale(1); }
.jb-intro.is-out .ji-logo { filter: invert(1); }
.ji-logo img { display: block; height: clamp(26px, 2.6vw, 44px); width: auto; }

/* 인트로 동안 스크롤 잠금. 헤더 로고는 숨겼다가 인트로가 그 자리에 앉으면 나타난다 */
.jb-intro-on, .jb-intro-on body { overflow: hidden; }
/* 스크롤바가 사라진 만큼 여백으로 메워 잠금 전후 레이아웃 폭을 똑같이 유지한다.
   header 는 position:fixed 라 화면 폭을 따로 쓰므로 본문과 별개로 한 번 더 채워줘야 한다. */
.jb-intro-on { padding-right: var(--jb-sb, 0px); }
.jb-intro-on header { padding-right: var(--jb-sb, 0px); }
.jb-intro-on header .logo-link { opacity: 0; }

@media screen and (max-width: 650px) {
    /* 모바일은 nowrap 을 풀고 두 줄로 흘린다 — 한 줄 유지하면 글자가 너무 작아져 타이포가 죽는다.
       채움 레이어는 같은 폭·같은 문장이라 줄바꿈 위치도 똑같이 맞는다. */
    .ji-line { white-space: normal; word-break: keep-all; font-size: 7.2vw; line-height: 1.42; }
    .ji-wrap { max-width: 86vw; }
    .ji-logo img { height: 26px; }
}

/* Figma "[JOB] 메인페이지 v2 — BLUE" 최상단 ticker 기준 — h40 · #1B4DFF · Archivo 12px/0.08em */
.open-feed { position: fixed; z-index: 101; left: 0; top: 0; width: 100%; height: 40px; display: flex; align-items: center; background: #1B4DFF; transition: transform .3s; }
/* 스크롤이 시작되면 헤더 애니메이션과 같은 타이밍으로 위로 걷힌다 */
.open-feed.on { transform: translateY(-100%); }

/* 전체 페이지 진행 바 — 티커와 헤더 사이(top 40px)에 있다가, 티커가 걷히면 top 0 으로 올라와 계속 남는다 */
.scroll-progress { position: fixed; z-index: 102; left: 0; top: 40px; width: 100%; height: 6px; background: rgba(255,255,255,.09); transition: top .3s; }
.scroll-progress.on { top: 0; }
.scroll-progress i { display: block; height: 100%; width: 0; background: #E1421F; transition: width .12s linear; }
.open-feed .clients-marquee.openfeed .track { gap: 40px; animation-duration: 44s; }
.open-feed .of-item { flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; font-family: 'Archivo', 'Pretendard', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.92); white-space: nowrap; transition: color .2s; }
.open-feed .of-item:hover { color: #fff; }
.open-feed .of-badge { background: #fff; color: #1B4DFF; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 3px 8px; border-radius: 2px; }
.open-feed .of-meta { color: rgba(255,255,255,.6); font-weight: 500; font-size: 11.5px; letter-spacing: .02em; }
/* 메인에서는 티커(40px)+진행바(3px) 아래에 헤더를 두고, 스크롤하면 진행바만 남으므로 3px 로 올라온다 */
body:not(.sub) header { top: 43px; }
body:not(.sub) header.on { top: 3px; }
@media screen and (max-width: 650px) {
    .open-feed { height: 34px; }
    .scroll-progress { top: 34px; }
    body:not(.sub) header { top: 37px; }
    .open-feed .of-item { font-size: 11px; gap: 7px; }
    .open-feed .of-meta { font-size: 10.5px; }
    .open-feed .of-badge { font-size: 9px; padding: 2px 6px; }
}

/* ============================================================
   메인 — 왜 잡오브브라더스 (차별점 5카드, FAQ 강점 재구성)
============================================================ */
.why-section { padding: 130px 0; background: #fff; }
/* 좌 타이틀 고정(sticky) + 우 카드 스크롤 패럴랙스 */
.why-section .inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px 90px; align-items: start; }
.why-section .sec-head { position: sticky; top: 150px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 0; }
.why-section .sec-head .sec-title { word-break: keep-all; }
.why-section .sec-desc { margin-top: 16px; font-size: 17px; color: #777; line-height: 1.7; word-break: keep-all; }
.why-list { display: flex; flex-direction: column; gap: 18px; }
.why-list .item { display: flex; align-items: flex-start; gap: 24px; background: #fff; border: 1px solid var(--line-color); border-radius: 12px; padding: 38px 40px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.why-list .item .why-tx { flex: 1 1 auto; min-width: 0; }
/* 아이콘 칩 — 번호와 같은 블루 */
.why-list .item .why-ico { flex: 0 0 auto; width: 56px; height: 56px; margin-top: 2px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center; color: #1B4DFF; background: rgba(27,77,255,.07);
    transition: background .3s, color .3s, transform .3s; }
.why-list .item .why-ico svg { width: 27px; height: 27px; }
.why-list .item:hover .why-ico { background: rgba(27,77,255,.13); transform: translateY(-2px); }
.why-list .item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(45,75,110,.08); border-color: #dfe6ec; }
.why-list .item .num { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; color: #1B4DFF; }
.why-list .item .tit { margin-top: 14px; font-size: 22px; font-weight: 700; letter-spacing: -0.04em; color: #222; }
.why-list .item .desc { margin-top: 12px; font-size: 15.5px; line-height: 1.75; color: #667583; word-break: keep-all; }
@media screen and (max-width: 950px) {
    .why-section { padding: 90px 0; }
    .why-section .inner { grid-template-columns: 1fr; gap: 44px; }
    .why-section .sec-head { position: static; }
}
@media screen and (max-width: 650px) {
    .why-section { padding: 60px 0; }
    .why-list { gap: 14px; }
    .why-list .item { padding: 28px 24px; gap: 16px; }
    .why-list .item .tit { font-size: 18px; }
    .why-list .item .why-ico { width: 46px; height: 46px; border-radius: 13px; }
    .why-list .item .why-ico svg { width: 23px; height: 23px; }
}

/* ============================================================
   화려함 레이어 — 무빙 그라데이션 / LIVE 피드 / 타이포 마퀴 / 글로우
============================================================ */
/* 1) 히어로 — 떠다니는 컬러 블롭 (라임·아이스블루·민트) */
.main .hero-section::before { content: ''; position: absolute; inset: -22%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 32% at 22% 30%, rgba(70,132,236,.16), transparent 70%),
        radial-gradient(30% 30% at 78% 22%, rgba(90,150,255,.13), transparent 70%),
        radial-gradient(36% 34% at 62% 80%, rgba(70,132,236,.10), transparent 70%);
    filter: blur(64px);
    animation: heroBlobs 16s ease-in-out infinite alternate; }
@keyframes heroBlobs {
    0%   { transform: translate3d(-3%,-2%,0) rotate(0deg) scale(1); }
    100% { transform: translate3d(3%,3%,0) rotate(8deg) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .main .hero-section::before { animation: none; } }

/* 2) 오픈 피드 — LIVE 라벨 + 펄스 */
.open-feed .of-wrap { display: flex; align-items: center; width: 100%; }
/* 블루 티커 위라 검정 pill 대신 반투명 흰 pill 로 */
.open-feed .of-live { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; margin: 0 22px 0 24px; padding: 4px 11px; border-radius: 100px; background: rgba(255,255,255,.16); color: #fff; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; }
.open-feed .of-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 50% { opacity: .5; box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
.open-feed .clients-marquee.openfeed { flex: 1; min-width: 0; }
@media screen and (max-width: 650px) { .open-feed .of-live { margin: 0 12px 0 14px; padding: 3px 9px; font-size: 9.5px; } }

/* 4) 버튼 글로우 + 샤인 스윕 */
.btn-fill { position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(70,132,236,.28); }
.btn-fill::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transition: left .55s ease; pointer-events: none; }
.btn-fill:hover { box-shadow: 0 14px 36px rgba(70,132,236,.55); }
.btn-fill:hover::after { left: 130%; }

/* 5) 메인 스탯 숫자 — 다크 밴드로 개편되어 그라데이션 텍스트 클립은 제거(흰 숫자 유지) */

/* ============================================================
   메인 히어로 — 배경 영상 (video + 다크 딤 오버레이)
============================================================ */
.main .hero-section .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.main .hero-section .hero-dim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(9,11,15,.82) 0%, rgba(9,11,15,.5) 55%, rgba(9,11,15,.62) 100%), linear-gradient(180deg, rgba(9,11,15,.3), rgba(9,11,15,.62)); }
.main .hero-section .bg-word { z-index: 1; }

/* ============================================================
   화이트 섹션 — 소프트 그라데이션 워시 (CSS 생성, 저작권 무관)
   은은한 웜 피치 + 쿨 블루 블러 — 소개·왜 잡오브브라더스·FAQ 3곳에 절제해서 사용
============================================================ */
/* about 섹션은 "타이포 애니" 시안대로 순백 — 웜피치 워시는 블루 타이포와 충돌해서 뺐다 */
.why-section { background:
    radial-gradient(55% 60% at 90% 30%, rgba(255,196,140,.15), transparent 70%),
    radial-gradient(40% 45% at 6% 85%, rgba(70,132,236,.06), transparent 70%),
    #fff; }
.main .faq-section { background:
    radial-gradient(55% 60% at 85% 75%, rgba(255,196,140,.14), transparent 70%),
    radial-gradient(40% 45% at 10% 10%, rgba(70,132,236,.06), transparent 70%),
    #fff; }

/* ============================================================
   메인 인사이트 소식 — 책 표지 무한 슬라이드
============================================================ */
.insight-section .clients-marquee.bookshelf { margin-top: 10px; padding: 20px 0 50px; }
.clients-marquee.bookshelf .track { gap: 34px; animation-duration: 38s; align-items: flex-start; }
.bookshelf .book-item:nth-child(even) { margin-top: 38px; } /* 홀짝 위아래 교차 */
.bookshelf .book-item { flex-shrink: 0; display: block; width: 225px; height: 338px; border-radius: 6px; box-shadow: 0 14px 30px rgba(0,0,0,.18); background-color: #222; background-size: cover; background-position: center; position: relative; transition: box-shadow .3s;
    animation: bookWave 4.6s ease-in-out infinite; will-change: transform; }
/* 물결처럼 — 카드마다 시작 시점을 조금씩 밀어 옆으로 흐르는 파도를 만든다 */
.bookshelf .book-item:nth-child(6n+1) { animation-delay: 0s; }
.bookshelf .book-item:nth-child(6n+2) { animation-delay: -.38s; }
.bookshelf .book-item:nth-child(6n+3) { animation-delay: -.76s; }
.bookshelf .book-item:nth-child(6n+4) { animation-delay: -1.14s; }
.bookshelf .book-item:nth-child(6n+5) { animation-delay: -1.52s; }
.bookshelf .book-item:nth-child(6n)   { animation-delay: -1.9s; }
/* 커서를 올리면 트랙과 함께 일렁임도 멈춘다(트랙 정지와 결을 맞춤) */
.bookshelf:hover .book-item { animation-play-state: paused; }
.bookshelf .book-item:hover { box-shadow: 0 22px 44px rgba(0,0,0,.24); }
@keyframes bookWave {
    0%, 100% { transform: translateY(-9px) rotate(-.6deg); }
    50%      { transform: translateY(9px)  rotate(.6deg); }
}
.bookshelf .book-item .tag { position: absolute; left: 14px; top: 14px; font-size: 12px; font-weight: 600; background: #fff; color: #222; padding: 5px 12px; border-radius: 100px; }
/* 정적 샘플용 플레이스홀더 (실이미지 지정 시 덮임) */
.bookshelf .book-item:nth-child(6n+1) { background-image: linear-gradient(160deg,#2b2b2b,#111); }
.bookshelf .book-item:nth-child(6n+2) { background-image: linear-gradient(160deg,#1f2f4a,#111); }
.bookshelf .book-item:nth-child(6n+3) { background-image: linear-gradient(160deg,#1f3a3a,#111); }
.bookshelf .book-item:nth-child(6n+4) { background-image: linear-gradient(160deg,#333,#0d0d0d); }
.bookshelf .book-item:nth-child(6n+5) { background-image: linear-gradient(160deg,#2c3a55,#10131a); }
.bookshelf .book-item:nth-child(6n) { background-image: linear-gradient(160deg,#2f2f2f,#111); }
@media screen and (max-width: 650px) {
    .clients-marquee.bookshelf .track { gap: 20px; }
    .bookshelf .book-item { width: 165px; height: 248px; }
    .bookshelf .book-item:nth-child(even) { margin-top: 26px; }
    .insight-section .clients-marquee.bookshelf { padding: 10px 0 24px; }
}


/* ============================================================
   모바일 간격 축소 (≤650) — 페이지 세로 길이 컴팩트화
   섹션 패딩 60→48, 타이틀 블록↔콘텐츠 54~66→30, 내부 큰 마진 축소
============================================================ */
@media screen and (max-width: 650px) {
    /* 섹션 상하 패딩 */
    .main .about-section, .service-section, .process-section, .work-section,
    .insight-section, .why-section, .faq-section, .clients-section { padding: 48px 0; }
    .worry-section { padding: 54px 0 44px; }
    .pf-search-section { padding: 54px 0; }
    /* .cta-section 은 높이로 잡는 돔이라 여기서 패딩을 주면 안 된다(위 CTA 블록 참고) */
    .sub .sub-visual { padding: 130px 0 48px; }
    .sub .about-intro-section { padding: 56px 0; }
    .board-section, .sub.insight .board-section { padding: 48px 0 64px; }
    .sub .board-wrap { padding: 48px 0 64px; }
    .sub.contact .contact-section { padding: 56px 0; }
    .sub.contact .location-section { padding: 6px 0 64px; }

    /* 타이틀 블록 ↔ 콘텐츠 */
    .process-section .sec-head, .work-section .sec-head,
    .insight-section .sec-head, .worry-section .sec-head, .pf-search-section .sec-head,
    .clients-section .sec-head, .faq-section .sec-head { margin-bottom: 30px; }

    /* 내부 큰 마진 */
    .main .about-section .big { margin-top: 0; }
    .main .about-section .stats-band { margin-top: 34px; padding: 26px 14px 24px; row-gap: 24px; }
    .pt-item { padding: 0 0 26px 44px; }
    .why-section .inner { gap: 26px; }
    .why-list .item { padding: 24px 22px; }
    .work-grid, .work-grid.col3 { gap: 24px; }
    .work-grid .item .tit { margin-top: 14px; }
    .work-section .work-filter { margin-bottom: 30px; }
    .board-section .tab-list, .sub.insight .board-section .tab-list { margin-bottom: 30px; }
    .pf-search-section .search-bar { margin-top: 24px; }
    .pf-search-section .search-keywords { margin-top: 18px; }
    /* .desc / .btn-wrap 는 옛 CTA 마크업. 지금은 .cta-sub / .cta-btns 를 쓴다 */
    .insight-list { gap: 16px; }
    .why-list { gap: 12px; }
}

/* ============================================================
   포폴 상세 — 통 상세이미지(.pf-long) + 글쓰기 크레딧 개별 입력(.credit-rows)
============================================================ */
/* .inner 밖으로 탈출해 화면 전체 폭으로 출력 (body.sub.portfolio overflow-x:hidden 전제) */
.pf-view .pf-long { margin-top: 110px; width: 100vw; margin-left: calc(50% - 50vw); }
.pf-view .pf-long img { display: block; width: 100%; height: auto; }
.write-form .credit-rows { display: flex; flex-direction: column; gap: 12px; }
.write-form .credit-rows .cr-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; }
@media screen and (max-width: 650px) {
    .pf-view .pf-long { margin-top: 64px; }
    .write-form .credit-rows .cr-row { grid-template-columns: 120px 1fr; }
}

/* ============================================================
   포폴 목록 무한 스크롤 — 센티널/로더 (list.skin.php)
============================================================ */
.work-section .grid-sentinel { height: 2px; }
.work-section .grid-loader { display: none; padding: 40px 0 8px; text-align: center; font-size: 14px; color: #999; }
.work-section .grid-loader.show { display: block; }
.work-section .grid-loader i { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-right: 9px; border: 2px solid #ddd; border-top-color: var(--point-color); border-radius: 50%; animation: gridLoaderSpin .8s linear infinite; }
@keyframes gridLoaderSpin { to { transform: rotate(360deg); } }

/* ============================================================
   bros 2026-09-09 히어로 렌더링 성능
   - ::before 컬러 블롭: 영상(hero-video)에 완전히 가려져 보이지 않는데
     64px 블러 + 16s 무한 애니메이션으로 매 프레임 GPU를 소모 → 비활성
   - 영상/BROTHERS 텍스트는 자체 합성 레이어로 고정해 리페인트 방지
============================================================ */
.main .hero-section::before { display: none; animation: none; }
.main .hero-section .hero-video { will-change: transform; transform: translateZ(0); }
.main .hero-section .bg-word { will-change: transform; }

/* ============================================================
   WHAT WE DO — 세로 행 리뉴얼
   Figma "[JOB] WHAT WE DO — 세로 행 리뉴얼" #270:2 실측 (1920 기준 · inner 1200)
   한 행 = 좌측 설명 360 + gap 100 + 일러스트 슬롯 740×416
   모션: 행이 아래에서 올라온 뒤, 내부 일러스트가 s1~s4 로 진행된다 (#271:2)
============================================================ */
.wwd-section { position: relative; background: #07080C; color: #fff; padding: 140px 0;
    --wwd-peri: 110,139,255; --wwd-purple: 167,139,250; --wwd-sky: 56,189,248; --wwd-emerald: 52,211,153; --wwd-pink: 244,114,182; }
.wwd-section::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: rgba(255,255,255,.08); }

/* 이 섹션의 콘텐츠 폭은 시안(1200) 기준. 사이트 공통 .inner 가 1560 이라 그대로 두면 왼쪽으로 쏠린다 */
.wwd-head, .wwd-rows { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* 헤드 */
.wwd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; padding-bottom: 92px; }
.wwd-eyebrow { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: #1B4DFF; }
.wwd-title { margin-top: 20px; font-size: 50px; line-height: 66px; font-weight: 700; letter-spacing: -0.04em; color: #fff; }
/* 오른쪽 블록은 오른쪽 정렬 */
.wwd-head-r { flex: 0 0 500px; padding-top: 46px; text-align: right; }
.wwd-lead { font-size: 17px; line-height: 30px; letter-spacing: -0.02em; color: rgba(255,255,255,.66); word-break: keep-all; }
.wwd-btn { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #fff; transition: background .25s, border-color .25s; }
.wwd-btn:hover { background: #1B4DFF; border-color: #1B4DFF; }

/* 행 — .wwd-row 는 스크롤 활주로, 그 안의 .wwd-pin 이 sticky 로 붙어 1~4단계 동안 화면에 고정된다 */
.wwd-rows { position: relative;}
.wwd-rows::after { content: ''; display: block; height: 1px; background: rgba(255,255,255,.1); }
/* 활주로 280vh + 핀 100vh(세로 중앙정렬) 조합이 행마다 화면 하나를 통째로 차지해
   상하 여백이 과해 보였다. 활주로를 줄이고 핀 높이를 내용만큼으로 바꿔
   앞뒤 행이 살짝 걸쳐 보이게 한다. */
.wwd-row { position: relative; height: 175vh; }
.wwd-pin { position: sticky; top: 14vh; height: auto; display: flex; align-items: flex-start; }
.wwd-row-in { position: relative; width: 100%; display: grid; grid-template-columns: 360px 1fr; column-gap: 100px; align-items: center; padding: 34px 0;
    opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.wwd-row-in::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: rgba(255,255,255,.1); }
.wwd-row.in .wwd-row-in { opacity: 1; transform: none; }

.wwd-row-en { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: #1B4DFF; }
.wwd-row-ko { margin-top: 13px; font-size: 38px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.2; color: #fff; }
.wwd-row-rule { display: block; width: 28px; height: 1px; margin-top: 23px; background: rgba(255,255,255,.32); }
.wwd-row-desc { margin-top: 19px; max-width: 320px; font-size: 17px; line-height: 30px; letter-spacing: -0.02em; color: rgba(255,255,255,.66); word-break: keep-all; }
.wwd-chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.wwd-chips span { padding: 7px 14px; border: 1px solid rgba(255,255,255,.26); border-radius: 14px; font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em; color: rgba(255,255,255,.82); white-space: nowrap; }

/* PROCESS 리스트 — 활성 항목이 일러스트 단계와 동기화된다 */
.wwd-process { margin-top: 32px; max-width: 360px; }
.wwd-process-label { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .12em; color: rgba(255,255,255,.38); }
.wwd-process ul { margin-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.wwd-process li { position: relative; display: flex; align-items: center; height: 42px; padding-left: 20px; border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 15.5px; letter-spacing: -0.02em; color: rgba(255,255,255,.5); transition: color .35s ease; }
.wwd-process li i { position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .35s ease, box-shadow .35s ease; }
.wwd-process li.is-on { color: #fff; font-weight: 600; }
.wwd-process li.is-on i { background: #1B4DFF; box-shadow: 0 0 0 4px rgba(27,77,255,.18); }

/* 일러스트 슬롯 — 740x416 고정 무대를 --k 배율로 줄인다 (비율·간격이 시안과 어긋나지 않게) */
.wwd-slot { position: relative; }
.wwd-stage { position: absolute; left: 0; top: 0; width: 740px; height: 416px; transform-origin: left top; transform: scale(var(--k, 1)); }

.wwd-wire { position: absolute; left: 0; top: 0; width: 740px; height: 416px; overflow: visible; }
.wwd-wire path { fill: none; stroke: rgba(var(--acc), .5); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wwd-wire .wl { stroke-dasharray: var(--len, 420); stroke-dashoffset: var(--len, 420); transition: stroke-dashoffset .85s cubic-bezier(.65,0,.35,1); }
.wwd-wire .wh { opacity: 0; transition: opacity .3s ease .6s; }
.wwd-row.s2 .w-split .wl, .wwd-row.s3 .w-merge .wl { stroke-dashoffset: 0; }
.wwd-row.s2 .w-split .wh, .wwd-row.s3 .w-merge .wh { opacity: 1; }

/* 노드 카드 */
.wwd-node { position: absolute; left: 0; border-radius: 12px; border: 1px solid rgba(var(--acc), .26);
    background: linear-gradient(127deg, rgba(var(--acc),.16) 0%, rgba(var(--acc),.05) 32%, rgba(var(--acc),.02) 68%), #0D0F14;
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1), background .45s ease, border-color .45s ease, box-shadow .45s ease; }
.wwd-node.n-top    { top: 0;     width: 740px; height: 96px; }
.wwd-node.n-left   { top: 160px; width: 358px; height: 96px; }
.wwd-node.n-right  { top: 160px; left: 382px; width: 358px; height: 96px; }
.wwd-node.n-bottom { top: 320px; width: 740px; height: 96px; }

.wwd-node .nd-ico { position: absolute; left: 22px; top: 22px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: rgba(var(--acc), .16); border: 1px solid rgba(var(--acc), .3); color: rgb(var(--acc)); transition: background .45s ease, border-color .45s ease, color .45s ease; }
.wwd-node .nd-ico svg { width: 22px; height: 22px; }
.wwd-node .nd-tit { position: absolute; left: 94px; top: 24px; font-size: 18px; font-weight: 600; line-height: 21px; letter-spacing: -0.02em; color: #fff; }
.wwd-node .nd-sub { position: absolute; left: 94px; top: 52px; font-size: 14.5px; line-height: 18px; letter-spacing: -0.02em; color: rgba(255,255,255,.66); }
.wwd-node .nd-badge { position: absolute; right: 22px; top: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap;
    background: rgba(var(--acc), .12); border: 1px solid rgba(var(--acc), .35); color: rgb(var(--acc)); transition: opacity .35s ease; }
.wwd-node .nd-badge svg { width: 14px; height: 14px; }

/* 분기 라벨 — 커넥터 가로선 위에 얹힌다 */
.wwd-branch { position: absolute; top: 128px; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap;
    background: #151A2E; background: color-mix(in srgb, rgb(var(--acc)) 13%, #0A0C12); border: 1px solid rgba(var(--acc), .4); color: rgb(var(--acc));
    opacity: 0; transform: translate(-50%, calc(-50% + 12px)); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.wwd-branch.b-a { left: 274.5px; }
.wwd-branch.b-b { left: 465.5px; }

/* 단계별 등장 */
.wwd-row.s1 .n-top,
.wwd-row.s2 .n-left, .wwd-row.s2 .n-right,
.wwd-row.s3 .n-bottom { opacity: 1; transform: none; }
.wwd-row.s2 .wwd-branch { opacity: 1; transform: translate(-50%, -50%); }

/* s4 — 하단 노드가 완료 상태로 교체된다 (아이콘 타일 블루 · 보더 블루 · 완료 배지) */
.wwd-node .bdg-done { opacity: 0; pointer-events: none; }
.wwd-node .bdg-run  { --acc: 245,158,11; }
.wwd-node .bdg-done { --acc: 143,166,255; }
.wwd-row.s4 .n-bottom { border-color: rgba(79,123,255,.9);
    background: linear-gradient(127deg, rgba(27,77,255,.3) 0%, rgba(124,92,255,.12) 36%, rgba(124,92,255,.04) 68%), #0D0F16;
    box-shadow: 0 12px 32px -8px rgba(27,77,255,.28); }
.wwd-row.s4 .n-bottom .nd-ico { background: linear-gradient(127deg, #1B4DFF 0%, #7C5CFF 68%); border-color: rgba(255,255,255,.18); color: #fff; }
.wwd-row.s4 .n-bottom .bdg-run { opacity: 0; }
.wwd-row.s4 .n-bottom .bdg-done { opacity: 1; }

@media screen and (max-width: 1250px) {
    /* 좌우 배치를 위아래로 — 일러스트가 눌리지 않게 폭을 다 쓴다.
       세로로 쌓으면 한 화면을 넘겨서 sticky 고정이 오히려 답답해지므로 핀을 푼다 */
    .wwd-row { height: auto; }
    .wwd-pin { position: static; height: auto; display: block; }
    .wwd-row-in { grid-template-columns: 1fr; row-gap: 48px; padding: 72px 0 76px; }
    /* 정적 표시 — 핀이 없어 "고정된 동안 단계가 넘어가는" 구간이 없으므로 완성 상태로 둔다.
       JS(in·s1~s4)가 붙든 안 붙든 보이도록 CSS 에서 직접 고정한다. */
    .wwd-row-in { opacity: 1 !important; transform: none !important; }
    .wwd-node { opacity: 1 !important; transform: none !important; }
    .wwd-branch { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
    .wwd-wire .wl { stroke-dashoffset: 0 !important; }
    .wwd-wire .wh { opacity: 1 !important; }
    .wwd-process li { opacity: 1 !important; }
    /* 정적 표시 구간이라 4단계가 모두 끝난 상태다 — 점 하나만 코발트이면 진행 중처럼
       보이므로 전부 같은 색으로 맞춘다 */
    .wwd-process li i { background: #1B4DFF; box-shadow: 0 0 0 4px rgba(27,77,255,.18); }
    /* 위아래로 쌓이면 740 무대가 넓은 슬롯 안에서 왼쪽에 붙으므로 슬롯 자체를 가운데로 */
    .wwd-slot { max-width: 740px; margin: 0 auto; width: 100%; }
    .wwd-process { max-width: 100%; }
    .wwd-row-desc { max-width: 560px; }
    .wwd-title { font-size: 42px; line-height: 56px; }
    .wwd-head { flex-direction: column; gap: 28px; padding-bottom: 64px; }
    .wwd-head-r { flex: none; padding-top: 0; text-align: left; }
}
@media screen and (max-width: 950px) {
    .wwd-section { padding: 90px 0; }
    .wwd-title { font-size: 34px; line-height: 46px; }
    .wwd-row-ko { font-size: 30px; }
}
@media screen and (max-width: 650px) {
    /* 모바일 — 노드를 세로 일렬로 풀면 "갈라졌다 다시 합쳐지는" 흐름이 사라진다.
       다이어그램(740×416) 형태를 그대로 두고 배율만 줄인다.
       ※ 예전엔 여기서 노드를 position:static 으로 풀었는데, 그러면 노드 안의
         .nd-ico(absolute)가 기준을 잃고 .wwd-slot 좌상단에 4개가 전부 겹쳐 쌓여
         아이콘이 통째로 사라져 보였다. 해체 규칙을 쓰지 않는 이유다. */
    .wwd-section { padding: 70px 0; }
    .wwd-row-in { padding: 48px 0 52px; row-gap: 32px; }
    /* 축소 후에도 읽히도록 무대 안 글자만 한 단계 키워 둔다(좌표계는 그대로) */
    .wwd-node .nd-tit { font-size: 22px; }
    .wwd-node .nd-sub { font-size: 17px; top: 54px; }
    .wwd-node .nd-badge { font-size: 15px; }
    .wwd-branch { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .wwd-row-in, .wwd-node, .wwd-branch, .wwd-wire .wl, .wwd-wire .wh { transition: none; }
    .wwd-row { height: auto; }
    .wwd-pin { position: static; height: auto; display: block; }
}

/* ------------------------------------------------------------
   WHAT WE DO 라이트 반전
   아래 worry-section 이 밝아지는 순간 이 섹션도 같이 밝은 톤으로 넘어간다
   (script.js worryThemeHandler 가 두 섹션을 한 번에 토글 — .is-light 를 붙인다).
   다크가 기본값이고 라이트가 덧입히는 상태라, 시안(#07080C) 원본은 그대로 남는다.
------------------------------------------------------------ */
.wwd-section { transition: background-color .8s ease; }
.wwd-section::before,
.wwd-title, .wwd-lead, .wwd-btn,
.wwd-row-in::before, .wwd-rows::after, .wwd-row-ko, .wwd-row-rule, .wwd-row-desc,
.wwd-chips span, .wwd-process-label, .wwd-process ul, .wwd-process li, .wwd-process li i,
.wwd-node, .wwd-node .nd-ico, .wwd-node .nd-tit, .wwd-node .nd-sub, .wwd-node .nd-badge,
.wwd-branch, .wwd-wire path {
    transition: background-color .8s ease, color .8s ease, border-color .8s ease, box-shadow .8s ease, background .8s ease, stroke .8s ease, opacity .5s ease;
}

.wwd-section.is-light { background-color: #e7eef4; }   /* worry-section 라이트 배경과 동일 */
.wwd-section.is-light::before { background: rgba(11,11,11,.1); }

.wwd-section.is-light .wwd-title { color: #0B0B0B; }
.wwd-section.is-light .wwd-lead { color: rgba(11,11,11,.62); }
.wwd-section.is-light .wwd-btn { border-color: rgba(11,11,11,.2); color: #0B0B0B; }
.wwd-section.is-light .wwd-btn:hover { background: #1B4DFF; border-color: #1B4DFF; color: #fff; }

.wwd-section.is-light .wwd-rows::after,
.wwd-section.is-light .wwd-row-in::before { background: rgba(11,11,11,.12); }
.wwd-section.is-light .wwd-row-ko { color: #0B0B0B; }
.wwd-section.is-light .wwd-row-rule { background: rgba(11,11,11,.3); }
.wwd-section.is-light .wwd-row-desc { color: rgba(11,11,11,.62); }
.wwd-section.is-light .wwd-chips span { border-color: rgba(11,11,11,.18); color: rgba(11,11,11,.74); }

.wwd-section.is-light .wwd-process-label { color: rgba(11,11,11,.4); }
.wwd-section.is-light .wwd-process ul { border-top-color: rgba(11,11,11,.1); }
.wwd-section.is-light .wwd-process li { border-bottom-color: rgba(11,11,11,.1); color: rgba(11,11,11,.46); }
.wwd-section.is-light .wwd-process li i { background: rgba(11,11,11,.18); }
.wwd-section.is-light .wwd-process li.is-on { color: #0B0B0B; }
.wwd-section.is-light .wwd-process li.is-on i { background: #1B4DFF; }

/* 노드 — 어두운 반투명 위 구성이라 라이트에서는 흰 카드 + 계열색 틴트로 바꾼다 */
.wwd-section.is-light .wwd-node { border-color: rgba(var(--acc), .32);
    background: linear-gradient(127deg, rgba(var(--acc),.13) 0%, rgba(var(--acc),.05) 32%, rgba(var(--acc),.02) 68%), #FFFFFF;
    box-shadow: 0 8px 22px rgba(20,32,64,.07); }
.wwd-section.is-light .wwd-node .nd-ico { background: rgba(var(--acc), .14); border-color: rgba(var(--acc), .36); }
.wwd-section.is-light .wwd-node .nd-tit { color: #0B0B0B; }
.wwd-section.is-light .wwd-node .nd-sub { color: rgba(11,11,11,.58); }
.wwd-section.is-light .wwd-node .nd-badge { background: rgba(var(--acc), .11); border-color: rgba(var(--acc), .4); }
.wwd-section.is-light .wwd-branch { background: color-mix(in srgb, rgb(var(--acc)) 11%, #FFFFFF); border-color: rgba(var(--acc), .45); }
.wwd-section.is-light .wwd-wire path { stroke: rgba(var(--acc), .62); }

/* s4 완료 노드 */
.wwd-section.is-light .wwd-row.s4 .n-bottom { border-color: rgba(79,123,255,.75);
    background: linear-gradient(127deg, rgba(27,77,255,.16) 0%, rgba(124,92,255,.07) 36%, rgba(124,92,255,.03) 68%), #FFFFFF;
    box-shadow: 0 12px 32px -8px rgba(27,77,255,.22); }

/* ============================================================
   HOW WE WORK — 6단계 가로 스크롤 프로세스
   Figma "[JOB] 메인페이지 v2 — BLUE" process-section #290:2 실측
   종료(접힘) 상태는 "[JOB] 프로세스 — 종료 상태(접힘)" #255:2
   .proc-stage 가 활주로, 그 안의 .proc-pin 이 sticky 로 고정된 동안
   트랙이 가로로 흐르고, 마지막에 .is-end 로 접힌다 (script.js processScrollHandler)
============================================================ */
.proc-section { background: #fff; padding: 0 0 130px; transition: background-color .7s ease; }
.proc-section .inner { max-width: 1200px; margin-left: auto; margin-right: auto; }
/* 활주로를 420 → 380vh 로 줄였다. 접힘(0.88) 이후 남는 구간이 짧아져
   "접힌 상태만 계속 보이는" 빈 스크롤이 줄어든다. */
.proc-stage { position: relative; height: 380vh; }
.proc-pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center;
    transition: min-height .75s cubic-bezier(.65,0,.35,1); }
/* width:100% 로 두면 기본 .inner 의 좌우 여백(92%)이 사라진다. 화면이 1200 보다 좁은
   순간(= 태블릿·모바일 전부) 콘텐츠가 화면 양 끝에 딱 붙고, .proc-view 가 overflow 로
   자르기 때문에 첫 스텝 왼쪽이 그대로 깎여 보였다 — 좌우 여백을 되살린다. */
.proc-pin > .inner { width: min(92%, 1200px); padding: 90px 0; transition: padding .75s cubic-bezier(.65,0,.35,1); }

/* 헤드 */
.proc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; }
.proc-eyebrow { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #1B4DFF; }
.proc-title { margin-top: 22px; font-size: 46px; line-height: 1.4; font-weight: 700; letter-spacing: -0.04em; color: #0B0B0B; }
.proc-lead { flex: 0 0 500px; padding-top: 50px; text-align: right; font-size: 15.5px; line-height: 1.9; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }

/* 가로 트랙 */
.proc-view { margin-top: 78px; overflow: hidden; }
.proc-track { position: relative; display: flex; width: 2520px; padding-top: 22px; }
.proc-section.is-end .proc-track { width: 100%; transform: none;
    transition: transform .75s cubic-bezier(.65,0,.35,1), width .75s cubic-bezier(.65,0,.35,1); }

.proc-rail { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: rgba(11,11,11,.12); }
.proc-rail i { display: block; width: 16.6667%; height: 100%; background: #1B4DFF; transition: width .45s ease; }

.proc-step { position: relative; flex: 0 0 420px; padding: 50px 40px 0 0;
    transition: flex-basis .75s cubic-bezier(.65,0,.35,1), padding .75s ease; }
.proc-step + .proc-step { padding-left: 32px; }
.proc-step + .proc-step::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 266px; background: rgba(11,11,11,.1); transition: height .6s ease; }

.ps-tick { position: absolute; left: 0; top: -3px; width: 8px; height: 8px; background: rgba(11,11,11,.22); transition: background .45s ease; }
.proc-step + .proc-step .ps-tick { left: 32px; }
.proc-step.is-on .ps-tick { background: #1B4DFF; }

/* 대형 고스트 번호는 왼쪽으로 물리지 않는다 — .proc-view 가 overflow 로 잘리고
   모바일에서는 가로 스크롤 컨테이너가 되어, 음수 위치는 어느 쪽이든 깎여 보인다.
   (예전엔 -6px 이었고 자르는 상자를 넓혀 버텼는데, 그 방식은 모바일에서 통하지 않는다) */
.ps-ghost { position: absolute; left: 0; top: 32px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 86px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: rgba(27,77,255,.07); transition: color .45s ease, opacity .5s ease, transform .5s ease; }
.proc-step + .proc-step .ps-ghost { left: 32px; }
.proc-step.is-on .ps-ghost { color: rgba(27,77,255,.13); }

.ps-num { display: none; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: rgba(27,77,255,.45); }
.proc-step.is-on .ps-num { color: #1B4DFF; }
.ps-step { position: relative; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: rgba(27,77,255,.45); transition: color .45s ease, opacity .5s ease; }
.proc-step.is-on .ps-step { color: #1B4DFF; }

.ps-tit { position: relative; margin-top: 12px; font-size: 27px; font-weight: 700; letter-spacing: -0.03em; color: rgba(11,11,11,.55); transition: color .45s ease, font-size .6s ease; }
.proc-step.is-on .ps-tit { color: #0B0B0B; }

.ps-desc { position: relative; margin-top: 20px; max-width: 366px; font-size: 14.5px; line-height: 1.8; letter-spacing: -0.02em; color: rgba(74,82,97,.55); word-break: keep-all; transition: color .45s ease, opacity .5s ease, transform .5s ease, margin .6s ease, max-height .6s ease; }
.proc-step.is-on .ps-desc { color: #4A5261; }

.ps-chips { position: relative; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; transition: opacity .5s ease, transform .5s ease, margin .6s ease, max-height .6s ease; }
.ps-chips span { padding: 6px 12px; border: 1px solid rgba(11,11,11,.11); border-radius: 13px; font-size: 11.5px; font-weight: 500; letter-spacing: -0.01em; color: rgba(11,11,11,.35); white-space: nowrap; transition: border-color .45s ease, color .45s ease; }
.proc-step.is-on .ps-chips span { border-color: rgba(11,11,11,.22); color: rgba(11,11,11,.72); }

/* 진행 바 */
.proc-bar { position: relative; margin-top: 56px; }
.pb-track { display: block; width: 100%; height: 2px; background: rgba(11,11,11,.12); }
.pb-track i { display: block; width: 0; height: 100%; background: #1B4DFF; }
.pb-label { margin-top: 18px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .16em; color: #8A92A0; }
.pb-label .l-done { display: none; color: #1B4DFF; font-weight: 700; }
.pb-count { position: absolute; right: 0; bottom: 0; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #1B4DFF; }

/* ── 종료 상태(접힘) — 서브 텍스트가 빠지고 타이틀만 한 줄로 압축된다 ── */
.proc-section.is-end { background-color: #EDF0F6; }
.proc-section.is-end .proc-step { flex: 1 1 0; padding-right: 20px; }
.proc-section.is-end .proc-step + .proc-step::before { height: 78px; }
.proc-section.is-end .ps-tick { background: #1B4DFF; }
.proc-section.is-end .ps-ghost { opacity: 0; transform: translateY(-14px); }
.proc-section.is-end .ps-step { display: none; }
.proc-section.is-end .ps-num { display: block; }
.proc-section.is-end .ps-tit { margin-top: 10px; font-size: 17px; color: #0B0B0B; }
.proc-section.is-end .ps-desc,
.proc-section.is-end .ps-chips { opacity: 0; max-height: 0; margin-top: 0; overflow: hidden; transform: translateY(-12px); pointer-events: none; }
.proc-section.is-end .proc-rail i { width: 100% !important; }
.proc-section.is-end .pb-track i { width: 100% !important; }
.proc-section.is-end .pb-label .l-scroll { display: none; }
.proc-section.is-end .pb-label .l-done { display: inline; }

/* ★ 프로세스 ↔ "기본으로 들어가는 것들" 사이 간격의 진짜 원인은 핀 박스다.
   .proc-perks 는 .proc-stage 바깥에 있고, .proc-pin 은 min-height:100vh 에 세로 중앙정렬이다.
   접히면 내용이 400px 남짓으로 줄어드는데 박스는 여전히 한 화면이라,
   그 아래 빈 절반이 통째로 "간격"으로 보인다. 접힘과 함께 박스 자체를 줄인다. */
.proc-section.is-end .proc-pin { min-height: 56vh; }
.proc-section.is-end .proc-pin > .inner { padding: 40px 0 24px; }

/* 접힘 상태에서는 펼침용 여백(트랙 상단 78 · 스텝 상단 50 · 진행바 56)도 과하다 */
.proc-section.is-end .proc-view { margin-top: 42px; }
.proc-section.is-end .proc-step { padding-top: 22px; }
.proc-section.is-end .proc-bar  { margin-top: 24px; }
.proc-perks { padding-top: 16px; }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 30px; }
.pp-head h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: #0B0B0B; }
.pp-head p { font-size: 14.5px; letter-spacing: -0.02em; color: #5A6270; }
.pp-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 18px; }
.pp-card { position: relative; padding: 26px 24px 24px; background: #fff; border: 1px solid rgba(11,11,11,.09); border-radius: 10px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.pp-card::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; border-radius: 2px; background: rgba(27,77,255,.85); }
.pp-card .n { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #1B4DFF; }
.pp-card .ar { position: absolute; right: 24px; top: 26px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 14px; color: rgba(27,77,255,.5); transition: transform .3s ease, color .3s ease; }
.pp-card .t { display: block; margin-top: 12px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; color: #0B0B0B; }
.pp-card .d { display: block; margin-top: 8px; font-size: 12.5px; letter-spacing: -0.02em; color: #5A6270; }
.pp-card:hover { transform: translateY(-4px); border-color: rgba(27,77,255,.35); box-shadow: 0 14px 30px rgba(20,32,64,.08); }
.pp-card:hover .ar { transform: translateX(4px); color: #1B4DFF; }

@media screen and (max-width: 1250px) {
    /* 핀 없이 손가락·트랙패드로 가로 스와이프 */
    .proc-stage { height: auto; }
    .proc-pin { position: static; min-height: 0; display: block; }
    .proc-pin > .inner { padding: 100px 0 0; }
    .proc-head { flex-direction: column; gap: 24px; }
    .proc-lead { flex: none; padding-top: 0; text-align: left; }
    .proc-title { font-size: 38px; }
    .proc-view { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .proc-view::-webkit-scrollbar { display: none; }
    .proc-track { width: max-content; transform: none !important; }
    .proc-step { flex: 0 0 330px; }
    .proc-step .ps-tick, .proc-step .ps-ghost, .proc-step .ps-step, .proc-step .ps-tit,
    .proc-step .ps-desc, .proc-step .ps-chips { opacity: 1 !important; }
    .proc-step .ps-ghost { color: rgba(27,77,255,.13); }
    .proc-step .ps-step { color: #1B4DFF; }
    .proc-step .ps-tit { color: #0B0B0B; }
    .proc-step .ps-desc { color: #4A5261; }
    .proc-step .ps-chips span { border-color: rgba(11,11,11,.22); color: rgba(11,11,11,.72); }
    .proc-step .ps-tick { background: #1B4DFF; }
    .pp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 950px) {
    .proc-section { padding-bottom: 90px; }
    .proc-title { font-size: 32px; }
}
@media screen and (max-width: 650px) {
    .proc-section { padding-bottom: 70px; }
    .proc-pin > .inner { padding-top: 70px; }
    .proc-title { font-size: 26px; }
    .proc-step { flex: 0 0 272px; padding-right: 24px; }
    .proc-step + .proc-step { padding-left: 24px; }
    .proc-step + .proc-step .ps-tick { left: 24px; }
    .proc-step + .proc-step .ps-ghost { left: 18px; }
    .ps-ghost { font-size: 62px; }
    .ps-tit { font-size: 22px; }
    .pp-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .proc-stage { height: auto; }
    .proc-pin { position: static; min-height: 0; display: block; }
    .proc-track, .proc-step, .ps-desc, .ps-chips, .ps-ghost { transition: none; }
}

/* ============================================================
   TRUST — Figma "추가섹션1" #343:4 / 모션 "추가섹션1 — 모션 정의" #342:2
   히어로 직후. 1200×560 카드가 스크롤에 따라 전폭으로 펼쳐진다.

   ⭐ 스펙의 핵심 : width·height·margin 은 건드리지 않는다.
      패널은 처음부터 전폭·전高 로 두고 clip-path 로 "잘라서" 보여준다
      (크기를 애니메이션하면 매 프레임 레이아웃이 재계산된다).
   진행률 --p (0~1) 은 JS 가 넣어주고, 여기서는 그 값으로 모양만 만든다.
   스펙은 GSAP pin 이지만, 이 사이트의 다른 구간(work·wwd·process)과 같은
   sticky 방식으로 맞췄다 — 커스텀 휠 스크롤과 pin-spacer 가 부딪히지 않게.
============================================================ */
/* 묶음 = TRUST(sticky) + 활주로 + WORK 스택.
   히어로를 덮지 않는다 — 히어로는 제 활주로가 끝나면 위로 흘러가고, TRUST 가
   그 자리를 흰 배경으로 이어받는다. 대신 TRUST 는 이 묶음 끝까지 깔려 있어서
   WORK 패널이 그 위를 덮으며 올라온다(예전 히어로가 하던 역할을 넘겨받았다). */
.trust-cover { position: relative; z-index: 2; }
.trust-section { position: sticky; top: 0; height: 100vh; overflow: hidden;
    background: #fff; --p: 0; }
.trust-runway { height: 90vh; pointer-events: none; }   /* 스펙 end '+=90%' */

/* 패널 — 항상 전폭. 보이는 범위만 clip 으로 넓힌다.
   시작 inset(170px 360px round 40px) → 끝 inset(0 round 0).
   좌우는 1920 기준 360px = 18.75% 라 폭에 물려 두고, 상하는 "이전·다음 섹션이
   살짝 보이는 틈"이라는 스펙 의도대로 px 로 잡는다(작은 화면에선 줄인다). */
.trust-panel { position: absolute; inset: 0; --gx: 18.75%; --gy: clamp(96px, 17vh, 170px);
    clip-path: inset(calc(var(--gy) * (1 - var(--p))) calc(var(--gx) * (1 - var(--p)))
               round calc(40px * (1 - var(--p)))); }

/* 배경 3겹 — 사진 + 스크림 + 코발트 틴트(시안 trust/bg-*) */
.trust-bg { position: absolute; inset: 0;
    background: url(../img/trust/trust-bg-1440.webp) center/cover no-repeat; }
.trust-bg::after { content: ''; position: absolute; inset: 0;
    background: rgba(7,10,22,.68); }
.trust-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, rgba(27,77,255,.26) 10%, rgba(27,77,255,.04) 90%); }
@media screen and (min-width: 1600px) {
    .trust-bg { background-image: url(../img/trust/trust-bg-1920.webp); }
}

/* 배경 글로우 — scale .7 → 1.15, opacity .12 → .26 (blur 120 고정) */
/* bros 2026-09-20 — blur(120px) 를 걷어내고 같은 모양을 radial-gradient 로 그린다.
   [왜] --p 는 스크롤할 때마다 script.js 가 새로 써 넣는 값이고, 그 값으로 이 원의
        transform:scale 이 매 프레임 바뀐다. filter 가 걸린 요소는 크기가 바뀔 때마다
        블러를 처음부터 다시 계산하므로, 760px 짜리 원에 120px 블러를 스크롤 내내
        다시 만들고 있었다. 사이트에서 가장 비싼 연산이었다.
   [어떻게] 단색 원에 블러를 먹인 결과는 결국 '가운데가 진하고 밖으로 사라지는 원'이다.
        canvas 에 실제 blur(120px) 를 그려 반경별 농도를 재고, 그 수치를 그대로 색 정지점에
        옮겼다. 알파 평균 차이 1.62/255 (최대 8) — 눈으로 구분되지 않는다.
        블러는 원 바깥으로 200px 번지므로 요소를 760 → 1160px 로 키우고 margin 도 맞췄다.
        gradient 는 그리기만 하면 되어 scale 이 바뀌어도 다시 계산하지 않는다.
   [되돌리려면] 아래 블록을 지우고 style.css.bak2_20260920 의 .trust-glow 를 쓰면 된다. */
.trust-glow { position: absolute; z-index: 1; left: 50%; top: 52%; width: 1160px; height: 1160px;
    margin: -580px 0 0 -580px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle closest-side,
        rgba(27,77,255,1) 0%, rgba(27,77,255,.99) 14%, rgba(27,77,255,.98) 21%,
        rgba(27,77,255,.957) 28%, rgba(27,77,255,.914) 34%, rgba(27,77,255,.843) 41%,
        rgba(27,77,255,.749) 48%, rgba(27,77,255,.631) 55%, rgba(27,77,255,.506) 62%,
        rgba(27,77,255,.377) 69%, rgba(27,77,255,.259) 76%, rgba(27,77,255,.161) 83%,
        rgba(27,77,255,.09) 90%, rgba(27,77,255,.043) 97%, rgba(27,77,255,0) 100%);
    opacity: calc(.12 + .14 * var(--p));
    transform: scale(calc(.7 + .45 * var(--p))); }

/* 콘텐츠 — scale .94 → 1. 텍스트가 같이 커져야 확장이 물리적으로 읽힌다 */
.trust-inner { position: relative; z-index: 2; width: min(92%, 1200px); margin: 0 auto;
    height: 100%; display: flex; flex-direction: column; justify-content: center;
    text-align: center; color: #fff;
    transform: scale(calc(.94 + .06 * var(--p))); }

/* 진입 — 진행률 0 → 0.35 구간에서 y+20 fade-up, 요소마다 --d 만큼 늦게(stagger .08) */
.trust-section .fade { --f: clamp(0, calc((var(--p) - var(--d, 0)) / .3), 1);
    opacity: var(--f); transform: translateY(calc(20px * (1 - var(--f)))); }

.trust-title { margin: 0; font-weight: 700; font-size: clamp(30px, 2.9vw, 56px);
    line-height: 1.4; letter-spacing: -0.04em; }
.trust-sub { margin: 6px 0 0; font-weight: 600; font-size: clamp(17px, 1.3vw, 25px);
    line-height: 1.6; letter-spacing: -0.03em; color: rgba(255,255,255,.76); }
.trust-rule { width: 40px; height: 2px; margin: 24px auto 0; background: #1B4DFF; }
.trust-lead { margin: 26px 0 0; font-size: clamp(14.5px, 0.9vw, 17px); line-height: 2;
    letter-spacing: -0.02em; color: rgba(255,255,255,.52); word-break: keep-all; }

/* 지표 카드 3장 — 380×252, 유리 카드(blur 11) */
.trust-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
    margin-top: clamp(40px, 5.6vh, 80px); }
.trust-card { position: relative; min-height: 252px; padding: 82px 28px 0; text-align: left;
    border: 1px solid rgba(255,255,255,.17); border-radius: 16px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); }
/* 우상단 링 — 3px 코발트 링 위에 8px 점이 얹힌다(시안 ring-g / ring-dot).
   지표가 %인 카드는 이 링이 곧 게이지다 — 카운트업과 같이 --v(0~100)가 올라가며
   12시부터 시계방향으로 채워진다. 점은 시작점 표시로 그대로 둔다.
   (게이지는 ::before 에 그린다 — 링 본체에 mask 를 걸면 바깥에 얹힌 점까지 잘린다) */
.tc-ring { --rw: 56px; position: absolute; right: 28px; top: 24px;
    width: var(--rw); height: var(--rw); }
.tc-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(#1B4DFF calc(var(--v, 0) * 1%), rgba(27,77,255,.32) 0);
    -webkit-mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--rw) / 2 - 3px), #000 calc(var(--rw) / 2 - 2.5px));
            mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--rw) / 2 - 3px), #000 calc(var(--rw) / 2 - 2.5px)); }
.tc-ring::after { content: ''; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px;
    margin-left: -4px; border-radius: 50%; background: #1B4DFF; }
.tc-num { display: flex; align-items: baseline; gap: 6px; margin: 0;
    font-size: clamp(46px, 3.9vw, 74px); line-height: 1.1; letter-spacing: -0.05em; }
.tc-num b { font-family: 'Archivo', sans-serif; font-weight: 900; color: #fff;
    font-variant-numeric: tabular-nums; }   /* 카운트업 중 폭이 흔들리지 않게 */
.tc-num em { font-style: normal; font-weight: 700; font-size: clamp(16px, 1.2vw, 23px);
    letter-spacing: -0.02em; color: #1B4DFF; }
.tc-label { margin: 21px 0 0; font-weight: 600; font-size: clamp(14px, 0.85vw, 16px);
    letter-spacing: -0.02em; color: rgba(255,255,255,.95); }
.tc-rule { display: block; height: 1px; margin-top: 13px; background: rgba(255,255,255,.14); }

/* ── 960 이하 : 핀 없음. 섹션이 보이면 한 번에 펼쳐지고 지표는 1열 3행(스펙 폴백) */
@media screen and (max-width: 960px) {
    .trust-section { position: relative; height: auto; }
    .trust-runway { height: 0; }
    .trust-panel { position: relative; inset: auto; --gx: 20px; --gy: 90px;
        clip-path: inset(calc(var(--gy) * (1 - var(--p))) calc(var(--gx) * (1 - var(--p)))
                   round calc(20px * (1 - var(--p))));
        transition: clip-path 1s cubic-bezier(.65,0,.35,1); }
    .trust-section.is-in { --p: 1; }
    .trust-inner { height: auto; padding: clamp(80px, 12vw, 130px) 0 clamp(70px, 11vw, 110px);
        transition: transform 1s cubic-bezier(.65,0,.35,1); }
    .trust-section .fade { transition: opacity .8s ease calc(var(--d, 0) * 2s),
                                       transform .8s cubic-bezier(.16,1,.3,1) calc(var(--d, 0) * 2s); }
    /* 세로로 쌓지 않고 1행 3열을 유지한다 — 대신 안쪽 요소를 한 단계씩 줄인다.
       (링은 카드 우상단 absolute 라 위 여백을 링 높이만큼 확보해야 숫자와 겹치지 않는다) */
    .trust-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .trust-card { min-height: 0; padding: 54px 16px 20px; }
    .tc-ring { --rw: 34px; right: 14px; top: 14px; }
    .tc-num { font-size: 38px; gap: 4px; }
    .tc-num em { font-size: 14px; }
    .tc-label { margin-top: 14px; font-size: 13px; line-height: 1.4; word-break: keep-all; }
    .tc-rule { margin-top: 10px; }
}
@media screen and (max-width: 650px) {
    .trust-panel { --gx: 12px; --gy: 56px; }
    .trust-lead br { display: none; }
    /* 3열을 유지하려면 카드 하나가 100px 남짓이다 — 링은 들어갈 자리가 없어 접는다 */
    .trust-cards { gap: 8px; }
    .trust-card { padding: 16px 10px 14px; border-radius: 12px; }
    .tc-ring { display: none; }
    .tc-num { font-size: 27px; gap: 2px; }
    .tc-num em { font-size: 11px; }
    .tc-label { margin-top: 9px; font-size: 11px; line-height: 1.35; letter-spacing: -0.03em; }
    .tc-rule { margin-top: 8px; }
}

/* 모션 최소화 — 핀·clip 생략, 처음부터 전폭 상태 */
@media (prefers-reduced-motion: reduce) {
    .trust-section { position: relative; height: auto; --p: 1 !important; }
    .trust-runway { height: 0; }
    .trust-panel { position: relative; inset: auto; clip-path: none; }
    .trust-inner { height: auto; padding: 120px 0 100px; transform: none; }
    .trust-section .fade { transition: opacity .6s ease; }
}

/* ============================================================
   WORK 스택 — Figma "portfolio" #295:225 / 모션 "4. WORK 스택" #295:246
   패널 5개가 sticky 로 쌓이며 이전 패널의 상단 80px 스트립만 남긴다.
   WORK 는 .trust-cover 안에서 TRUST 위를 덮으며 올라온다(히어로가 아니라 TRUST 가 뒤에 깔린다).
============================================================ */
.hero-cover { position: relative; }
.hero-cover .hero-section { position: sticky; top: 0; }

.work-stack { position: relative; z-index: 2; background: transparent; }
.work-stack .wk-in { width: min(92%, 1200px); margin: 0 auto; }

/* 패널 — sticky 로 쌓인다. 이전 패널을 "전부" 덮는다(스트립 자리를 남기지 않음) */
.wk-panel { position: sticky; top: 0; border-radius: 40px 40px 0 0; overflow: hidden; }

/* ── 스트립(80px) ── */
.wk-strip { position: relative; z-index: 2; height: 80px; transform: translateZ(0);
    background: rgba(var(--strip), var(--strip-a)); }
/* bros 2026-09-20 — 여기 있던 backdrop-filter: blur(12px) 를 뺐다.
   --strip-a 가 1(완전 불투명)이라 뒤가 비치지 않아 블러가 화면에 전혀 나타나지 않았는데,
   sticky 로 겹쳐 쌓인 패널 5장마다 배경 레이어를 따로 합성하느라 스크롤만 무거워지고 있었다.
   실측(1920x1080, WORK 구간): 프레임 118ms -> 88ms. 보이는 모습은 달라지지 않는다.
   (아래 .wk-all 의 blur 는 rgba(255,255,255,.1) 반투명 위라 실제로 보이므로 그대로 둔다)
   원본 백업: css/style.css.bak_20260920 */
.wk-strip .wk-in { display: flex; align-items: center; height: 80px; }
.wk-bar { flex: 0 0 4px; height: 40px; margin-right: 14px; background: rgba(255,255,255,.95); }
.wk-idx { flex: 0 0 40px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; color: #fff; }
.wk-name { flex: 0 0 308px; margin-left: 22px; display: flex; flex-direction: column; gap: 3px; }
.wk-name b { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.wk-name em { font-style: normal; font-size: 12px; letter-spacing: -0.01em; color: rgba(255,255,255,.68); }
.wk-div { flex: 0 0 1px; height: 32px; background: rgba(255,255,255,.24); }
.wk-chips { margin-left: 36px; display: flex; gap: 7px; }
.wk-chips span { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border: 1px solid rgba(255,255,255,.4); border-radius: 13px; font-size: 11.5px; letter-spacing: -0.01em; color: rgba(255,255,255,.88); white-space: nowrap; }
.wk-yr { margin-left: auto; margin-right: 44px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.wk-arrow { flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.8); transition: background .25s ease, color .25s ease, border-color .25s ease; }
.wk-arrow:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* ── 본문(820px) ── */
/* 패널 본문 — 스트립(80) + 본문이 정확히 한 화면이 되게 잡는다.
   본문을 그냥 100vh 로 두면 패널 전체가 100vh+80 이 되어 sticky 로 붙은 아래쪽이 잘린다. */
.wk-body { position: relative; height: calc(100vh - 80px); min-height: 560px;
    overflow: hidden; transform-origin: top center; will-change: transform; }
/* 덮일 때 어두워지는 처리 — filter: brightness 대신 오버레이 불투명도(합성만 하므로 훨씬 가볍다) */
.wk-body::after { content: ''; position: absolute; inset: 0; z-index: 3; background: #000; opacity: var(--dim, 0); pointer-events: none; will-change: opacity; }
.wk-img { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat;
    filter: brightness(.78) saturate(.5) contrast(1.14); }
/* 스크림 — 하단 그라디언트 + 좌→우 가로 그라디언트.
   글자는 우측에 모여 있으므로 오른쪽을 진하게 덮어 가독성을 지키고,
   왼쪽은 옅게 둬 배경 이미지가 살아나게 한다. */
.wk-scrim { position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(var(--scrim),0) 57%, rgba(var(--scrim),.94) 100%),
                linear-gradient(90deg, rgba(var(--scrim),.30) 0%, rgba(var(--scrim),.44) 40%, rgba(var(--scrim),.86) 100%); }
/* 본문 배치 — 예전엔 마크·정보·푸터를 전부 absolute 로 띄워 두고 top/bottom 을 vh 로
   맞췄는데, 폭이 좁아지면 서로 겹치고 세로가 늘어나면 푸터가 본문을 타고 올라왔다.
   세 덩어리를 세로 flex 로 쌓고 가운데(.wk-info)가 남는 높이를 먹게 한다. */
.wk-body > .wk-in { position: relative; height: 100%;
    display: flex; flex-direction: column;
    padding: clamp(26px, 4.2vh, 44px) 0 clamp(34px, 6vh, 70px); }

.wk-mark { flex: 0 0 auto; text-align: center; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .1em; color: rgba(255,255,255,.55); }

/* (영문 하이라이트 .wk-en 은 제거됨 — 좌측 카피 블록 자체를 걷어냈다) */

/* 우측 국문 블록 — 남는 높이를 먹고 그 안에서 세로 가운데·우측 정렬. y+24 fade-up */
.wk-info { flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    text-align: right;
    opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.wk-panel.in .wk-info { opacity: 1; transform: none; }
.wk-info h3 { max-width: 620px; font-size: clamp(27px, 3vw, 46px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.2; color: #fff; word-break: keep-all; }
.wk-cat { margin-top: 18px; max-width: 620px; font-size: clamp(15px, 1.2vw, 19px); letter-spacing: -0.02em; color: rgba(255,255,255,.7); word-break: keep-all; }
.wk-scope { margin-top: 17px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: clamp(13px, 1vw, 15px); font-weight: 500; color: rgba(255,255,255,.5); }
.wk-view { margin-top: 32px; flex: 0 0 auto; width: 128px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.55); border-radius: 24px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 500; color: #fff; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.wk-view:hover { border-color: #fff; background: rgba(255,255,255,.08); transform: translateX(2px); }

/* (대형 워터마크 .wk-big 도 제거됨) */

/* 하단 — 인덱스 + 글래스 버튼 */
.wk-foot { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.wk-nav b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.wk-nav > span { margin-top: 14px; display: flex; gap: 24px; }
.wk-nav i { font-style: normal; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: rgba(255,255,255,.32); }
.wk-nav i.on { font-weight: 700; color: #fff; }
/* bros 2026-09-20 — backdrop-filter: blur(14px) 를 뺐다. (대표 승인 후 적용)
   [왜] 이 버튼은 sticky 로 겹쳐 쌓인 패널 5장 안에 하나씩 들어 있다. backdrop-filter 는
        '자기 뒤에 깔린 것들을 합성한 결과'를 읽어 흐리게 만드는데, 패널이 겹쳐 있으니
        그 읽기가 연쇄로 일어난다. WORK 구간 프레임 34.1ms → 20.1ms (41% 개선) 측정됨.
        블러 반경만 줄이는 건(14→6→3px) 효과가 0% 였다. 개수와 겹침이 원인이기 때문이다.
   [겉보기] 유리처럼 뒤가 비쳐 보이던 효과가 사라진다. 대신 흰 반투명을 .1 → .16 으로
        올려 패널 느낌과 글자 가독성을 유지했다.
   [되돌리려면] 아래 background 를 rgba(255,255,255,.1) 로 되돌리고
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); 를 다시 넣으면 된다. */
.wk-all { width: 330px; height: 60px; display: flex; align-items: center; padding: 0 12px 0 28px; border: 1px solid rgba(255,255,255,.34); border-radius: 30px;
    background: rgba(255,255,255,.16); transition: background .3s ease, border-color .3s ease; }
.wk-all b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.wk-all em { margin-left: 22px; font-style: normal; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.45); transition: opacity .3s ease; }
.wk-all i { margin-left: auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.9); font-style: normal; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: #0B0B0B; transition: transform .3s ease; }
.wk-all:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.wk-all:hover em { color: rgba(255,255,255,.8); }
.wk-all:hover i { transform: translateX(3px); }

@media screen and (max-width: 1250px) {
    .wk-name { flex: 0 0 auto; }
    .wk-div, .wk-chips { display: none; }
    .wk-body { min-height: 520px; }
}
/* ── 950 이하 : 쌓임(sticky)은 데스크톱과 똑같이 유지한다.
   대신 본문이 반드시 한 화면(스트립 제외) 안에 들어가야 아래쪽이 잘리지 않는다 —
   여백과 글자를 줄여 높이를 맞추고, 라운드는 없앤다. */
@media screen and (max-width: 950px) {
    .wk-panel { border-radius: 0; }
    .wk-body { min-height: 0; }
    .wk-body > .wk-in { padding: 58px 0 44px; }
    .wk-mark { text-align: left; }
    .wk-view { margin-top: 24px; }
    .wk-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
    .wk-all { width: 248px; height: 48px; padding: 0 8px 0 18px; }
    .wk-all b { font-size: 14px; }
    .wk-all em { margin-left: 12px; }
    .wk-all i { width: 32px; height: 32px; }
}
@media screen and (max-width: 650px) {
    /* 스트립이 72px 로 줄었으니 본문 높이도 같이 맞춰야 패널이 정확히 한 화면이 된다 */
    .wk-strip { height: 72px; }
    .wk-strip .wk-in { height: 72px; }
    .wk-body { height: calc(100vh - 72px); min-height: 0; }
    .wk-idx { flex: 0 0 32px; font-size: 24px; }
    .wk-name { margin-left: 16px; min-width: 0; }
    .wk-name b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wk-name em { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wk-yr { display: none; }                        /* 연도까지 넣으면 브랜드명이 잘린다 */
    .wk-arrow { flex: 0 0 32px; width: 32px; height: 32px; font-size: 13px; margin-left: auto; }
    .wk-body > .wk-in { padding: 60px 0 48px; gap: 24px; }
    /* 좁은 화면은 글줄이 폭을 거의 다 먹으므로 왼쪽도 너무 밝히지 않는다 */
    .wk-scrim { background: linear-gradient(180deg, rgba(var(--scrim),0) 57%, rgba(var(--scrim),.94) 100%),
                linear-gradient(90deg, rgba(var(--scrim),.46) 0%, rgba(var(--scrim),.58) 40%, rgba(var(--scrim),.86) 100%); }
    .wk-cat { font-size: 15px; }
    .wk-view { margin-top: 22px; }
    .wk-all { width: 100%; max-width: 232px; height: 44px; padding: 0 6px 0 15px; }
    .wk-all b { font-size: 13px; }
    .wk-all em { margin-left: 9px; font-size: 10px; }
    .wk-all i { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-cover .hero-section { position: relative; }
    .wk-info { opacity: 1; transform: none; transition: none; }
    .wk-body { transform: none !important; }
    .wk-body::after { opacity: 0 !important; }
}

/* 터치 기기는 관성 스크롤이 이미 부드럽다 — 앵커 이동만 부드럽게 */
@media (hover: none) {
    html { scroll-behavior: smooth; }
}

/* ============================================================
   Why Us — 다크 버전 + 로고 심볼 3D
   위 라이트 배경(라디얼 그라디언트) 규칙을 여기서 덮는다.
============================================================ */
.why-section { background: #0B0B0B; color: #fff; }
.why-section .sec-title { color: #fff; }
.why-section .sec-desc { color: rgba(255,255,255,.6); }

.why-section .why-list .item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.why-section .why-list .item:hover { background: rgba(255,255,255,.06); border-color: rgba(27,77,255,.45); box-shadow: 0 18px 40px rgba(0,0,0,.42); }
.why-section .why-list .item .num { color: #1B4DFF; }
.why-section .why-list .item .why-ico { background: rgba(27,77,255,.16); color: #6D93FF; }
.why-section .why-list .item:hover .why-ico { background: rgba(27,77,255,.3); color: #A8C0FF; }
.why-section .why-list .item .tit { color: #fff; }
.why-section .why-list .item .desc { color: rgba(255,255,255,.62); }

/* 3D 캔버스 자리 — sec-head 텍스트 바로 아래 */
.why-3d { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1 / 1; margin-top: 40px; }
.why-3d canvas { display: block; width: 100% !important; height: 100% !important; }
/* 뒤에서 은은하게 받쳐주는 글로우 */
.why-3d::before { content: ''; position: absolute; left: 50%; top: 50%; width: 78%; height: 78%; transform: translate(-50%, -50%);
    border-radius: 50%; background: radial-gradient(circle, rgba(27,77,255,.18), transparent 68%); pointer-events: none; }

@media screen and (max-width: 1250px) {
    .why-3d { max-width: 300px; margin: 32px auto 0; }
}
@media screen and (max-width: 650px) {
    .why-3d { max-width: 240px; margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .why-3d::before { display: none; }
}




/* ============================================================
   메인 비주얼 — Figma "메인 비주얼 섹션-시안" #307:427 / 모션 #307:608

   width:100% + padding 유동 레이아웃. 색·서체·구성은 시안값 그대로.

   ★ 높이 예산이 이 섹션의 핵심 제약이다.
     히어로는 .hero-cover 안에서 sticky 로 고정되므로 화면 높이를 넘으면 아래가 잘려 영영 안 보인다.
     그래서 상단여백·타이틀·브라우저 높이를 vh 로 물려 두고, 슬롯은 6열x2행으로 눕혀
     브라우저를 "넓지만 낮게" 키웠다(4열x3행이면 세로가 넘쳐 잘린다).
     1920x1080 기준 합계 ≈ 1000px 로 여유를 둔다.
============================================================ */
.main .hero-section { min-height: 100vh; padding: 0; display: flex; align-items: center;
    background: #0E1423; color: #fff; overflow: hidden; }
.main .hero-section::before, .main .hero-section::after { display: none; }

/* 배경 그라디언트 4겹 — 시안 hero/grad-* */
.hv-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hv-bg i { position: absolute; display: block; }
.hv-grad-streak { left: 4.69%; top: 7.81%; width: 83.62%; height: 89.63%; filter: blur(70px);
    background: linear-gradient(180deg, rgba(46,123,255,0) 0%, rgba(46,123,255,.15) 50%, rgba(46,123,255,0) 100%); }
.hv-grad-b { left: 0; bottom: 0; width: 100%; height: 38.3%;
    background: linear-gradient(180deg, rgba(91,75,224,0) 0%, rgba(91,75,224,.05) 100%); }
.hv-grad-h { inset: 0; background: linear-gradient(90deg, rgba(46,123,255,0) 0%, rgba(46,123,255,.01) 50%, rgba(46,123,255,.05) 100%); }
.hv-grad-v { inset: 0; background: linear-gradient(180deg, rgba(27,77,255,.08) 0%, rgba(27,77,255,.03) 50%, rgba(27,77,255,0) 100%); }

/* 무대 — 고정폭 없이 전체 폭, 좌우 여백은 패딩이 잡는다.
   상단 패딩은 고정 헤더(티커 40 + 헤더 88)를 피하도록 넉넉히 준다. */
.hv-stage { position: relative; z-index: 1; width: 100%;
    /* 좌우 여백 = 다른 섹션 .inner(min(92%, 1560px))와 같은 폭이 남도록 계산한다.
       예전엔 본문 2단만 약 1160px 로 가운데 모여 있어 다른 섹션보다 좁아 보였다. */
    --hv-px: max(4%, calc((100% - 1560px) / 2));
    --hv-lw: 560px;
    --hv-gap: clamp(28px, 2.8vw, 58px);
    --hv-bw: clamp(400px, min(32vw, 50vh), 540px);
    padding: clamp(140px, 16vh, 220px) var(--hv-px) clamp(56px, 7vh, 100px); }

/* ── 헤드라인 (시안 80px 유지) */
/* 카피가 전부 국문이 되어 Archivo(영문 전용)를 쓰면 한글이 대체서체로 떨어진다 — 본문 서체로 돌린다 */
.hv-title { margin: 0 0 clamp(48px, 7vh, 120px); max-width: 20ch;
    font-weight: 800; font-size: clamp(34px, 4.2vw, 80px);
    line-height: 1.16; letter-spacing: -0.05em; color: #fff; }
.hv-title em { font-style: normal; color: #6F8FFF; }
.hv-ko-rule { position: absolute; top: clamp(190px, 21vh, 290px);
    right: var(--hv-px);
    width: min(500px, 24vw); height: 1px; background: rgba(255,255,255,.14); }

/* ── 본문 2단.
   space-between + 우측 여백 조합이 두 영역을 화면 좌우 끝으로 밀어내 사이가 텅 비어 보였다.
   묶음째 가운데로 모으고(justify-content: center) 사이 간격만 좁게 준다. */
/* 좌 카피는 콘텐츠 왼쪽 끝, 우 브라우저는 오른쪽 끝에 붙인다.
   사이가 비어 보이지 않도록 좌측은 720px 까지 늘어나고(버튼 줄이 같이 길어진다),
   남는 사이 공간은 칩이 흩어졌다 모이는 무대가 된다. */
.hv-body { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hv-gap); }
.hv-left { position: relative; flex: 1 1 var(--hv-lw); max-width: 720px; min-width: 0; padding-left: clamp(30px, 3.2vw, 58px); }
.hv-right { position: relative; flex: 0 0 auto; margin-right: 0; }

/* 좌측 스파인 · 눈금 · 세로 레일 */
.hv-spine { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: rgba(255,255,255,.13);
    transform-origin: top; transform: scaleY(0); transition: transform .9s cubic-bezier(.65,0,.35,1); }
.hero-section.is-in .hv-spine { transform: scaleY(1); }
.hv-tick { position: absolute; left: 0; width: 11px; height: 1px; background: rgba(255,255,255,.38);
    opacity: 0; transition: opacity .4s ease; }
.hero-section.is-in .hv-tick { opacity: 1; }
.hv-tick.t1 { top: 0; transition-delay: .30s; }
.hv-tick.t2 { top: 26%; transition-delay: .38s; }
.hv-tick.t3 { top: 52%; transition-delay: .46s; }
.hv-tick.t4 { top: 74%; transition-delay: .54s; }
.hv-tick.t5 { top: calc(100% - 1px); transition-delay: .62s; }
/* 90° 회전 — 원점 기준으로 돌리면 글자 띠가 왼쪽으로 빠지므로 줄높이만큼 되민다 */
.hv-rail { position: absolute; left: calc(-1 * clamp(30px, 3.2vw, 58px)); top: 10%; margin: 0;
    transform-origin: 0 0; transform: translateX(15px) rotate(90deg);
    font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: .16em;
    white-space: nowrap; color: rgba(255,255,255,.3); }

/* 카피 블록 — 왼쪽정렬 + 계단 구조 유지. 글자만 한 단계 키웠다. */
.hv-copy { padding-top: 2px; text-align: left; }
.hv-step1, .hv-step2 { position: relative; margin: 0; font-weight: 700; font-size: clamp(20px, 1.7vw, 32px);
    letter-spacing: -0.03em; color: #fff; word-break: keep-all; }
.hv-step2 { margin-top: 10px; padding-left: clamp(24px, 2.6vw, 54px); }
.hv-step2 em { font-style: normal; color: #6F8FFF; }
.hv-leader { position: absolute; left: calc(100% + 14px); top: 50%; width: clamp(24px, 3vw, 72px); height: 1px;
    background: rgba(255,255,255,.22); }
.hv-leader::before { content: ''; position: absolute; left: -11px; top: -3px; width: 7px; height: 7px; background: rgba(255,255,255,.5); }
.hv-en { margin: clamp(20px, 2.6vh, 38px) 0 0; padding-left: clamp(24px, 2.6vw, 54px);
    font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.42); }

/* ── 액션 2행 — 계단 구조 유지.
   평소엔 01 이 넓고 02 가 들여쓰여 있다가, 02 에 호버하면 둘의 폭이 맞바뀐다.
   (:has 미지원 브라우저에서는 폭 교체만 일어나지 않고 나머지 호버 효과는 그대로) */
.hv-acts { margin-top: clamp(30px, 4.4vh, 68px); --step: clamp(28px, 3.6vw, 74px); }
.hv-act { position: relative; display: block; height: 78px; border-top: 1px solid rgba(255,255,255,.22);
    text-decoration: none; overflow: hidden; margin-left: 0;
    transition: margin-left .45s cubic-bezier(.16,1,.3,1); }
.hv-act.is-sub { margin-left: var(--step); border-bottom: 1px solid rgba(255,255,255,.22); }
.hv-acts:has(.is-sub:hover) .hv-act.is-primary { margin-left: var(--step); }
.hv-acts:has(.is-sub:hover) .hv-act.is-sub { margin-left: 0; }
.hv-act::before { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
    transition: transform .35s cubic-bezier(.16,1,.3,1); }
.hv-act.is-primary { background: rgba(27,77,255,.1); }
.hv-act.is-primary::before { background: #1B4DFF; }
.hv-act.is-sub::before { background: rgba(255,255,255,.06); }
.hv-act:hover::before { transform: scaleX(1); }
.hv-act-bar { position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: #1B4DFF; z-index: 2;
    transform-origin: top; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.hv-act.is-sub .hv-act-bar { transform: scaleY(0); }
.hv-act.is-sub:hover .hv-act-bar { transform: scaleY(1); }
.hv-act .num { position: absolute; left: 22px; top: 24px; z-index: 2;
    font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .08em; color: #1B4DFF; transition: color .35s; }
.hv-act.is-sub .num { color: rgba(255,255,255,.4); }
.hv-act .tx { position: absolute; left: 58px; top: 19px; right: 66px; z-index: 2; display: block; }
.hv-act .tx strong { display: block; font-weight: 700; font-size: 19px; letter-spacing: -0.03em; color: #fff; transition: color .35s; }
.hv-act.is-sub .tx strong { color: rgba(255,255,255,.82); }
.hv-act .tx em { display: block; margin-top: 7px; font-style: normal;
    font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.35); transition: color .35s; }
.hv-act:hover .num, .hv-act:hover .tx strong, .hv-act:hover .tx em { color: #fff; }
.hv-act-circle { position: absolute; right: 20px; top: 21px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
    background: #1B4DFF; color: #fff; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px;
    display: flex; align-items: center; justify-content: center; transition: background .35s, color .35s; }
.hv-act.is-primary:hover .hv-act-circle { background: #fff; color: #1B4DFF; }
/* 02 의 화살표도 01 과 같은 원형 버튼으로. 평소엔 테두리만 있는 비활성,
   호버하면 포인트색으로 채워지며 활성화된다(글자색만 바뀌던 이전엔 변화가 안 읽혔다). */
.hv-act-arrow { position: absolute; right: 20px; top: 21px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.28); background: transparent; color: rgba(255,255,255,.55);
    font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px;
    transition: background .35s, border-color .35s, color .35s, transform .35s cubic-bezier(.16,1,.3,1); }
.hv-act.is-sub:hover .hv-act-arrow { background: #1B4DFF; border-color: #1B4DFF; color: #fff; transform: translateX(6px); }

/* ── 브라우저 — 시안 480px 보다 크게. 단, 슬롯을 4열x3행으로 되돌렸기 때문에
   세로가 금방 불어난다. 폭을 화면 높이(50vh)에도 물려 뷰포트를 넘지 않게 잡는다.
   1920x1080 기준 브라우저 약 534px → 히어로 전체 약 1065px 로 화면 안에 들어온다. */
.hv-browser { position: relative; width: var(--hv-bw); border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(143deg, rgba(16,27,49,.96) 16%, rgba(7,10,17,.96) 96%); }
.hv-chrome { position: absolute; left: 0; top: 0; width: 100%; height: 42px;
    border-radius: 11px 11px 0 0; background: rgba(255,255,255,.3); }
.hv-chrome .d { position: absolute; top: 17px; width: 8px; height: 8px; border-radius: 50%; }
.hv-chrome .d1 { left: 18px; background: rgba(255,103,103,.5); }
.hv-chrome .d2 { left: 36px; background: rgba(255,255,255,.22); }
.hv-chrome .d3 { left: 54px; background: rgba(0,255,0,.5); }
.hv-url { position: absolute; left: 96px; top: 12px; width: min(280px, 46%); height: 18px;
    border-radius: 9px; background: rgba(255,255,255,.06); padding-left: 12px;
    font-family: 'Archivo', sans-serif; font-size: 9px; line-height: 18px; color: rgba(255,255,255,.4); }
.hv-bdy { padding: 72px 28px 26px; }
.hv-badge { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .12em; color: #6F8FFF; }
.hv-lead { margin: 12px 0 0; font-weight: 700; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.5; letter-spacing: -0.03em; color: rgba(255,255,255,.94); word-break: keep-all; }
/* 슬롯 = 카드 도착 좌표. 화면에는 안 보이고 좌표 계산에만 쓴다(모션 스펙 "빈 슬롯").
   시안대로 4열x3행. 대신 브라우저 폭을 vh 에 물려 세로가 뷰포트를 넘지 않게 했다. */
.hv-slots { margin-top: clamp(24px, 3vh, 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hv-slot { display: block; aspect-ratio: 100 / 76; visibility: hidden; }
.hv-count { margin: clamp(20px, 2.6vh, 36px) 0 0; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.3); }
.hv-count b { color: #6F8FFF; }

/* ── 카드 칩 12개. 마크업은 브라우저 화면 안(.hv-bdy, 슬롯 바로 다음)에 있고,
   데스크톱에서는 absolute 로 떠서 브라우저 둘레에 흩어진다(기준 박스 = .hv-browser).
   띠는 브라우저 기준이되 "왼쪽으로는 거의 나가지 않는다" — 왼쪽은 카피(제목·본문·버튼)
   자리라 예전처럼 -22% 씩 물리면 글자를 덮는다. 대신 비어 있는 위·오른쪽·아래를 넓게 열어
   흩어질 공간을 벌었다(헤드라인은 max-width 20ch 라 브라우저 폭까지 오지 않는다).
   도착 좌표(--tx/--ty/--sc)는 JS 가 슬롯을 실측해 넣는다.
   스크롤 진행률에 묶지 않는다 — .is-assembled 가 붙으면 CSS 트랜지션이 제 속도로 한 번 돈다. */
/* 오른쪽 흩어짐 폭 -40% → -30% — 브라우저가 콘텐츠 오른쪽 끝까지 가서, 40% 면 칩이 화면 밖으로 잘린다 */
.hv-chips { position: absolute; inset: -42% -30% -20% -2%; pointer-events: none; z-index: 3; }
/* --w: 칩마다 크기를 조금씩 흔든다(자유분방한 인상). 수렴 배율은 JS 가 칩별로 실측하므로
   크기를 달리해도 전부 슬롯에 정확히 맞는다. */
.hv-chip { position: absolute; left: var(--x); top: var(--y);
    width: calc(clamp(72px, 4.6vw, 92px) * var(--w, 1)); aspect-ratio: 90 / 70; border-radius: 10px;
    transform-origin: 0 0; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    background: rgba(15,18,24,.86); border: 1px solid rgba(255,255,255,.24); font-style: normal;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    transform: rotate(var(--r));
    transition: transform 1s cubic-bezier(.65,0,.35,1) var(--d, 0s); }
.hero-section.is-assembled .hv-chip {
    transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(0deg) scale(var(--sc, 1)); }
/* 좌표를 재는 찰나에만 변형을 끈다 — 회전된 박스를 재면 출발 좌표가 틀어진다.
   같은 프레임 안에서 붙였다 떼므로 화면에는 보이지 않는다. */
.hero-section.is-measuring .hv-chip { transform: none !important; transition: none !important; }
/* 색 획득 — 날아가는 동안 회색 칩이 고유색 그라디언트·테두리를 얻는다 */
.hv-chip::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; opacity: 0;
    border: 1px solid rgba(var(--c), .58);
    background: linear-gradient(180deg, rgba(var(--c), .38) 0%, rgba(var(--c), .09) 100%);
    transition: opacity 1s ease var(--d, 0s); }
.hero-section.is-assembled .hv-chip::before { opacity: 1; }
.hv-chip > * { position: relative; z-index: 1; }
.hv-chip svg { width: 26px; height: 26px; color: #fff; opacity: .7; transition: opacity 1s ease var(--d, 0s); }
.hero-section.is-assembled .hv-chip svg { opacity: .96; }
.hv-chip b { font-weight: 600; font-size: 10px; letter-spacing: -0.02em; color: rgba(255,255,255,.8); white-space: nowrap; }
.hv-chip b.en { font-family: 'Archivo', sans-serif; letter-spacing: .06em; }
.hv-chip .n { position: absolute; left: 8px; top: 6px; z-index: 2; font-style: normal;
    font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 8px; letter-spacing: .08em; color: rgba(255,255,255,.3); }

/* 수렴 구간 — 진행률에 묶여있지 않으므로 "보여줄 시간"만 확보하는 용도 */
.hero-runway { height: 80vh; pointer-events: none; }

/* 진입 리빌 */
.hero-section .hv-title, .hero-section .hv-copy, .hero-section .hv-acts {
    opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.hero-section.is-in .hv-title { opacity: 1; transform: none; }
.hero-section.is-in .hv-copy { opacity: 1; transform: none; transition-delay: .26s; }
.hero-section.is-in .hv-acts { opacity: 1; transform: none; transition-delay: .5s; }

/* ── 1250 : 우측 여백을 회수하고 칩 띠를 좁힌다(카피와 겹치지 않도록) */
@media screen and (max-width: 1250px) {
    .hv-right { margin-right: 0; }
    .hv-stage { --hv-lw: 480px; --hv-bw: clamp(360px, min(36vw, 48vh), 500px); }
    .hv-chips { inset: -38% -28% -18% -2%; }
    .hv-left { max-width: 480px; }
}

/* ── 화면이 낮을 때 : 잘림 방지가 최우선이라 여백·크기를 먼저 줄인다 */
@media screen and (min-width: 961px) and (max-height: 860px) {
    .hv-stage { padding-top: clamp(118px, 15vh, 160px); padding-bottom: 56px; }
    .hv-title { margin-bottom: clamp(32px, 5vh, 58px); font-size: clamp(32px, 3.6vw, 62px); }
    .hv-ko-rule { top: clamp(150px, 18vh, 200px); }
    .hv-stage { --hv-bw: clamp(340px, min(32vw, 44vh), 470px); }
    .hv-act { height: 70px; }
    .hv-act .tx { top: 15px; }
    .hv-act .num, .hv-act-circle { top: 20px; }
    .hv-act-arrow { top: 17px; }
}

/* ── 960 : 2단을 풀고 세로로 쌓는다.
   칩이 흩어질 여백(브라우저 좌우·위아래)이 사라지므로 수렴 모션을 아예 돌리지 않고,
   "이미 다 모인" 정적 형태로 보여준다. 빈 슬롯을 치우고 그 자리에 칩 그리드를 그대로 앉힌다. */
@media screen and (max-width: 960px) {
    .main .hero-section { min-height: 0; display: block; }
    .hero-cover .hero-section { position: relative; }
    .hv-stage { padding: clamp(120px, 16vh, 165px) 4% 72px; }
    .hv-title { max-width: none; margin-left: 0; margin-bottom: 44px; font-size: clamp(32px, 6.2vw, 54px); }
    .hv-body { flex-direction: column; gap: 52px; }
    /* 세로 스택이면 flex-basis 가 "높이"로 해석된다 — 데스크톱의 560px 기준을 반드시 풀어야 한다 */
    .hv-left { flex: none; max-width: none; width: 100%; }
    .hv-right { flex: none; width: 100%; margin-right: 0; }
    .hv-browser { width: 100%; }
    .hv-rail, .hv-ko-rule { display: none; }
    .hv-slots { display: none; }                      /* 도착 슬롯은 필요 없다 — 칩이 직접 그 격자가 된다 */
    .hv-chips { position: static; inset: auto; display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
        margin-top: clamp(24px, 3vh, 40px); max-width: 560px; }
    /* 흩어짐·기울기·비행을 전부 끄고 제자리에 앉힌다. 색은 처음부터 입혀둔다(도착한 상태) */
    .hv-chip { position: static; width: auto; transform: none !important; transition: none !important; }
    .hv-chip::before { opacity: 1 !important; }
    .hv-chip svg { opacity: .96 !important; }
    .hero-runway { height: 0; }
}

/* ── 650 : 모바일 */
@media screen and (max-width: 650px) {
    .hv-stage { padding: 108px 4% 56px; }
    .hv-title { margin-bottom: 34px; font-size: clamp(27px, 7.6vw, 38px); }
    .hv-left { padding-left: 22px; }
    .hv-body { gap: 40px; }
    .hv-step2, .hv-en, .hv-act.is-sub { padding-left: 0; margin-left: 0; }
    .hv-act { height: 68px; }
    .hv-act .num { left: 14px; top: 20px; }
    .hv-act .tx { left: 44px; top: 14px; right: 54px; }
    .hv-act .tx strong { font-size: 16px; }
    .hv-act-circle { right: 12px; top: 16px; width: 32px; height: 32px; }
    .hv-act-arrow { right: 12px; top: 16px; width: 32px; height: 32px; font-size: 13px; }
    .hv-bdy { padding: 62px 18px 20px; }
    /* 4열이면 칩 하나가 70px대로 눌려 "카피라이팅" 같은 긴 라벨이 넘친다 — 3열로 푼다 */
    .hv-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hv-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hv-url { left: 88px; width: 42%; }
}

/* ============================================================
   덮어쓰기 — 스크롤 연출과 고정 헤더가 부딪히는 지점 정리
============================================================ */

/* 고정 헤더 깜빡임 —
   아래를 지나가는 .wk-strip 의 backdrop-filter 가 매 프레임 "헤더 뒤"까지 다시 합성하면서
   헤더가 깜빡인다. 헤더를 독립 합성 레이어로 올려두면 본문 리페인트에 끌려들지 않는다. */
header.scroll { transform: translateZ(0); backface-visibility: hidden; will-change: transform; }
/* 패널도 자기 레이어를 갖게 해 스트립 블러가 바깥으로 번지지 않게 가둔다 */
.wk-panel { transform: translateZ(0); isolation: isolate; }

/* 모바일 — 예전엔 여기서 950 이하의 쌓임을 풀었다(본문이 화면보다 커져 아래쪽 버튼에
   닿을 수 없었기 때문). 원인이던 absolute 푸터를 flex 로 바꿔 본문이 한 화면에 들어오므로
   쌓임은 데스크톱과 똑같이 유지한다.
   대신 모바일 브라우저의 100vh 는 주소창을 뺀 실제 보이는 높이보다 커서, 그대로 쓰면
   패널이 화면보다 높아져 sticky 가 "붙는 구간" 없이 그냥 흘러간다 — dvh 로 맞춘다. */
@supports (height: 100dvh) {
    .wk-body { height: calc(100dvh - 80px); }
    @media screen and (max-width: 650px) {
        .wk-body { height: calc(100dvh - 72px); }
    }
}

/* ============================================================
   퀵메뉴 — Figma "[JOB] 퀵메뉴" #336:2 실측
   캡슐(포트폴리오 · 전화상담 · 상담신청) + TOP + 말풍선.
   수치·색은 시안값 그대로. 우측 하단 고정, 스크롤 300px 이후 등장.
============================================================ */
/* 구버전 퀵메뉴·퀵폼은 이 블록으로 대체됐다 */
.quick-menu-section, .quick-form { display: none !important; }

.jq { position: fixed; right: 24px; bottom: 30px; z-index: 95;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility .4s, bottom .4s ease; }
.jq.is-on { opacity: 1; visibility: visible; transform: none; }
body.ib-visible .jq { bottom: 96px; }

/* ── 캡슐 */
.jq-cap { position: relative; width: 116px; padding: 26px 0 18px; border-radius: 40px;
    background: rgba(16,19,25,.92); border: 1px solid rgba(255,255,255,.13);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; flex-direction: column; align-items: center; }
/* 상단 하이라이트 선 */
.jq-cap::before { content: ''; position: absolute; left: 50%; top: 0; width: 56px; height: 1px;
    margin-left: -28px; background: rgba(255,255,255,.22); }

.jq-item { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%;
    padding: 4px 0 2px; text-decoration: none; }
.jq-ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    color: rgba(255,255,255,.92); transition: transform .25s cubic-bezier(.16,1,.3,1); }
.jq-ico svg { width: 100%; height: 100%; }
.jq-item span { font-weight: 600; font-size: 13.5px; letter-spacing: -0.02em; color: rgba(255,255,255,.92);
    transition: color .25s; }
.jq-item:hover .jq-ico { transform: translateY(-3px); }
.jq-item:hover span { color: #fff; }

.jq-div { width: 64px; height: 1px; margin: 22px 0; background: rgba(255,255,255,.12); }

/* ── 상담신청 CTA */
.jq-cta { position: relative; width: 92px; height: 92px; margin-top: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
    overflow: hidden; isolation: isolate; }
/* 4색 그라디언트 — 각도를 직접 애니메이션할 수 없으므로 원보다 큰 판을 돌려 같은 효과를 낸다 */
.jq-cta::before { content: ''; position: absolute; inset: -30%; z-index: 0;
    background: linear-gradient(143deg, #0E9E8F 16%, #1B4DFF 48%, #6B4BFF 76%, #A84DF0 96%);
    animation: jqSpin 8s linear infinite; }
/* 상단 소프트 하이라이트 */
.jq-cta::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 100%); }
.jq-cta-in { position: relative; z-index: 2; }
.jq-cta-in b { display: block; font-weight: 700; font-size: 16px; line-height: 1.32; letter-spacing: -0.03em;
    text-align: center; color: #fff; }
/* 뒤에서 번지는 글로우 — 2.4s 주기 맥동 */
.jq-glow { position: absolute; left: 50%; top: 50%; z-index: -1; width: 164px; height: 164px;
    margin: -82px 0 0 -82px; border-radius: 50%; filter: blur(32px); pointer-events: none;
    background: linear-gradient(135deg, rgba(27,77,255,.42) 8%, rgba(168,77,240,.42) 92%);
    animation: jqPulse 2.4s ease-in-out infinite; }
@keyframes jqSpin  { to { transform: rotate(360deg); } }
@keyframes jqPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ── TOP */
.jq-top { width: 64px; height: 64px; border-radius: 32px; background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    cursor: pointer; transition: background .25s, transform .25s; }
.jq-top:hover { background: rgba(255,255,255,.13); transform: translateY(-3px); }
.jq-top i { font-style: normal; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px;
    line-height: 1; color: rgba(255,255,255,.8); }
.jq-top em { font-style: normal; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 9px;
    letter-spacing: .1em; color: rgba(255,255,255,.5); }

/* ── 말풍선 — CTA 왼쪽에 붙고 꼬리가 캡슐을 가리킨다 */
/* bottom 값은 "상담신청 원의 세로 중심"에 맞춘 것 — 캡슐 하단 패딩 18 + 원 반지름 46 = 64,
   거기서 말풍선 높이의 절반(44)을 뺀다. TOP 버튼이 빠지면서 다시 계산했다. */
.jq-tip { position: absolute; right: calc(100% + 18px); bottom: 20px;
    /* 폭은 글자 길이에 맞춘다(고정 546px 이면 문구 뒤로 빈 공간이 크게 남았다).
       오른쪽 패딩 = 닫기 버튼 자리(26+24) + 글자와의 간격 16 */
    width: max-content; max-width: calc(100vw - 180px); height: 88px; border-radius: 44px;
    display: flex; align-items: center; gap: 22px; padding: 0 66px 0 28px;
    background: linear-gradient(90deg, #1B4DFF 0%, #2E7BFF 100%);
    box-shadow: 0 16px 40px -8px rgba(0,0,0,.4);
    opacity: 0; visibility: hidden; transform: translateX(12px) scale(.96); transform-origin: right center;
    transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility .45s; }
.jq-tip.is-on { opacity: 1; visibility: visible; transform: none; }
/* 꼬리 — 오른쪽 변에서 캡슐 쪽으로 뻗는 삼각형 */
.jq-tip::after { content: ''; position: absolute; left: 99.5%; top: 50%; margin-top: -12px;
    border: 12px solid transparent; border-left: 14px solid #2E7BFF; border-right: 0; }
.jq-tip-ico { flex: 0 0 40px; width: 40px; height: 40px; color: rgba(255,255,255,.9); }
.jq-tip-ico svg { width: 100%; height: 100%; }
.jq-tip-tx { min-width: 0; }
.jq-tip-tx em { display: block; font-style: normal; font-weight: 500; font-size: 15px; letter-spacing: -0.02em;
    color: rgba(255,255,255,.82); }
.jq-tip-tx b { display: block; margin-top: 5px; font-weight: 700; font-size: 22px; letter-spacing: -0.03em;
    color: #fff; white-space: nowrap; }
.jq-tip-x { position: absolute; right: 26px; top: 50%; margin-top: -12px; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer;
    color: rgba(255,255,255,.9); transition: transform .25s, color .25s; }
.jq-tip-x svg { width: 16px; height: 16px; }
.jq-tip-x:hover { transform: rotate(90deg); color: #fff; }

/* 좁은 화면에서는 퀵메뉴가 본문을 가리지 않게 단계적으로 줄인다 */
/* 1250 이하 — 약 84% 축소. 말풍선 bottom = 캡슐 하단 패딩 15 + 원 반지름 39 - 말풍선 높이 절반 38 = 16 */
@media screen and (max-width: 1250px) {
    .jq { right: 18px; bottom: 24px; gap: 18px; }
    body.ib-visible .jq { bottom: 90px; }
    .jq-cap { width: 96px; padding: 22px 0 15px; border-radius: 34px; }
    .jq-cap::before { width: 48px; margin-left: -24px; }
    .jq-item { gap: 10px; }
    .jq-item span { font-size: 12.5px; }
    .jq-ico { width: 26px; height: 26px; }
    .jq-div { width: 54px; margin: 18px 0; }
    .jq-cta { width: 78px; height: 78px; margin-top: 15px; }
    .jq-cta-in b { font-size: 14px; line-height: 1.3; }
    .jq-glow { width: 138px; height: 138px; margin: -69px 0 0 -69px; filter: blur(27px); }
    .jq-tip { right: calc(100% + 15px); bottom: 16px; max-width: calc(100vw - 150px);
        height: 76px; padding: 0 58px 0 22px; gap: 16px; border-radius: 38px; }
    .jq-tip::after { margin-top: -10px; border-width: 10px; border-left-width: 12px; border-right-width: 0; }
    .jq-tip-ico { flex-basis: 34px; width: 34px; height: 34px; }
    .jq-tip-tx em { font-size: 13.5px; }
    .jq-tip-tx b { margin-top: 4px; font-size: 19px; }
    .jq-tip-x { right: 22px; }
}
@media screen and (max-width: 950px) {
    .jq { right: 14px; bottom: 18px; gap: 12px; }
    body.ib-visible .jq { bottom: 84px; }
    .jq-cap { width: 82px; padding: 16px 0 12px; border-radius: 28px; }
    .jq-cap::before { width: 42px; margin-left: -21px; }
    .jq-item { gap: 8px; }
    .jq-item span { font-size: 11px; }
    .jq-ico { width: 22px; height: 22px; }
    .jq-div { width: 44px; margin: 13px 0; }
    .jq-cta { width: 66px; height: 66px; margin-top: 12px; }
    .jq-cta-in b { font-size: 12px; line-height: 1.28; }
    .jq-glow { width: 114px; height: 114px; margin: -57px 0 0 -57px; filter: blur(22px); }
    .jq-tip { right: calc(100% + 12px); bottom: 12px; max-width: calc(100vw - 124px);
        height: 64px; padding: 0 48px 0 17px; gap: 12px; border-radius: 32px; }
    .jq-tip::after { margin-top: -8px; border-width: 8px; border-left-width: 10px; border-right-width: 0; }
    .jq-tip-ico { flex-basis: 28px; width: 28px; height: 28px; }
    .jq-tip-tx em { font-size: 12px; }
    .jq-tip-tx b { margin-top: 3px; font-size: 15px; }
    .jq-tip-x { right: 18px; width: 20px; height: 20px; margin-top: -10px; }
    .jq-tip-x svg { width: 13px; height: 13px; }
}
@media screen and (max-width: 650px) {
    .jq { right: 10px; bottom: 14px; gap: 10px; }
    body.ib-visible .jq { bottom: 76px; }
    .jq-cap { width: 68px; padding: 13px 0 10px; border-radius: 24px; }
    .jq-cap::before { display: none; }
    .jq-item { gap: 7px; }
    .jq-item span { font-size: 10px; letter-spacing: -0.03em; }
    .jq-ico { width: 19px; height: 19px; }
    .jq-div { width: 36px; margin: 10px 0; }
    .jq-cta { width: 56px; height: 56px; margin-top: 10px; }
    .jq-cta-in b { font-size: 10.5px; line-height: 1.24; }
    .jq-glow { width: 92px; height: 92px; margin: -46px 0 0 -46px; filter: blur(18px); }
    /* 모바일에서는 말풍선을 아예 띄우지 않는다 — 좁은 화면에서 본문을 너무 많이 가린다.
       .is-on 이 붙어도 보이지 않게 !important 로 눌러둔다(JS 는 그대로 돌아간다). */
    .jq-tip { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .jq-cta::before, .jq-glow { animation: none; }
}

/* ============================================================
   AX — 자체 AI 전환 섹션
   Figma "추가섹션2" #352:60 / 모션 "[JOB] AX 섹션 — 모션 정의" #359:2
   상단은 중앙 정렬 오브제, 하단은 좌측 기준 지그재그 2행.
   ⭐ 회전하는 것은 링과 궤도 점뿐이다 — 오브제 이미지는 돌리지도 늘리지도 않는다
      (이미지가 도는 순간 생성물 티가 난다).
============================================================ */
.ax-section { --orb: 470px; position: relative; z-index: 2;
    padding: 108px 0 140px;
    background: linear-gradient(180deg, #05060C 0%, #080B18 50%, #05060C 100%);
    overflow: hidden; }
/* 세로 그리드 — 아주 옅게 깔아 다크 배경이 휑해 보이지 않게 한다 */
.ax-section::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 240px 100%; }
.ax-section::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.1); }
.ax-section > .inner { position: relative; z-index: 1; width: min(92%, 1200px); }

/* ── 헤드 ── */
.ax-head { text-align: center; }
/* 다크 배경에서 #1B4DFF 는 가라앉아 보여 한 단계 밝은 블루로 올렸다 */
.ax-eyebrow { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #5C8CFF; }
.ax-title { margin-top: 22px; font-size: clamp(30px, 3.4vw, 52px); font-weight: 700; line-height: 1.48; letter-spacing: -0.04em; color: #fff; word-break: keep-all; }
.ax-title em { font-style: normal; background: linear-gradient(90deg, #1B4DFF 0%, #7B5CFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── 오브제 무대 ── */
/* 무대 높이·여백은 시안의 오브제 중심(캔버스 y700)에 맞춰 잡았다.
   등장은 무대 통째로 올라온다 — 오브제·칩은 각자 transform 을 쓰고 있어
   개별로 .ani 를 걸면 중심 정렬·부유 값이 덮여버린다. */
.ax-stage { position: relative; height: calc(var(--orb) * 1.68); margin-top: 8px; }
.ax-stage.ani { transition-duration: .8s; }
.ax-orb-wrap { position: absolute; left: 50%; top: 50%; width: var(--orb); height: var(--orb); transform: translate(-50%, -50%); }
.ax-orb-wrap > span { position: absolute; left: 50%; top: 50%; border-radius: 50%; }

.ax-glow { width: calc(var(--orb) * 1.53); height: calc(var(--orb) * 1.53); transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(27,77,255,.5) 10%, rgba(123,92,255,.36) 54%, rgba(20,184,166,.12) 90%);
    filter: blur(65px); }
.ax-halo { width: calc(var(--orb) * 1.64); height: calc(var(--orb) * 1.64); transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(27,77,255,.46) 10%, rgba(123,92,255,.38) 50%, rgba(20,184,166,.18) 74%, rgba(20,184,166,0) 90%);
    filter: blur(55px); opacity: .8;
    animation: ax-halo 7s ease-in-out infinite; }              /* 오브제와 엇박으로 숨쉰다 */
/* 이미지 2겹 — 위 겹은 축소+블러(1.5px)·90% 로 중심부 밀도를 보강한다.
   ⭐ screen 블렌드는 쓰지 않는다 — 원본이 이미 원형으로 잘린 투명 PNG 라
      screen 을 걸면 시안에 있는 어두운 구체까지 날아가 소용돌이만 떠 보인다.
   호흡(scale)과 회전은 한 요소에 같이 걸 수 없어(둘 다 transform),
   껍데기는 호흡만 맡고 안쪽 ::before 가 이미지를 들고 천천히 돈다. */
.ax-orb { width: var(--orb); height: var(--orb); transform: translate(-50%, -50%);
    animation: ax-breathe 6s ease-in-out infinite; }
.ax-orb-core { width: calc(var(--orb) * .85); height: calc(var(--orb) * .85); transform: translate(-50%, -50%);
    filter: blur(1.5px); opacity: .9;
    animation: ax-breathe 6s ease-in-out infinite; }   /* 본체와 같은 주기로 같이 커졌다 작아진다 */
/* ⭐ 두 겹은 반드시 같은 속도로 돈다 — 속도가 다르면 흐린 겹이 선명한 본체 위를
      스치고 지나가 잔상처럼 겹쳐, 오브제 전체가 흐릿해 보인다. */
.ax-orb::before, .ax-orb-core::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: url('../img/ax/orb.webp') center/cover no-repeat;
    animation: ax-orb-spin 60s linear infinite; }
.ax-orb-feather { width: calc(var(--orb) * 1.09); height: calc(var(--orb) * 1.09); transform: translate(-50%, -50%);
    background: linear-gradient(180deg, rgba(5,6,12,0) 0%, rgba(5,6,12,0) 62%, rgba(5,6,12,.55) 100%); }

/* 궤도 링 — conic-gradient 를 mask 로 테두리만 남겨 그라디언트 스트로크를 만든다.
   실제로 도는 건 이 링이고, 점은 링의 자식이라 한 번의 회전으로 함께 돈다. */
.ax-ring { --ox: 0px; --oy: 0px;
    transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy)));
    animation: ax-spin linear infinite; }
.ax-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 140deg, rgba(123,92,255,.75), rgba(27,77,255,.38) 40%, rgba(11,26,107,.11) 70%, rgba(123,92,255,.75));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--w)), #000 calc(100% - var(--w)));
            mask: radial-gradient(farthest-side, transparent calc(100% - var(--w)), #000 calc(100% - var(--w))); }
.ax-ring.r1 { --w: 2.4px; width: calc(var(--orb) * .885); height: calc(var(--orb) * .885); animation-duration: 32s; }
.ax-ring.r2 { --w: 1.6px; --ox: calc(var(--orb) * .14); --oy: calc(var(--orb) * -.19);
    width: calc(var(--orb) * 1.367); height: calc(var(--orb) * 1.367); animation-duration: 46s; animation-direction: reverse; }
.ax-ring.r3 { --w: 1.2px; --ox: calc(var(--orb) * -.18); --oy: calc(var(--orb) * .14);
    width: calc(var(--orb) * 1.62); height: calc(var(--orb) * 1.62); animation-duration: 70s; }
.ax-ring.r2::before { background: conic-gradient(from 18deg, rgba(27,77,255,.42), rgba(56,214,255,.21) 45%, rgba(11,26,107,.06) 75%, rgba(27,77,255,.42)); }
.ax-ring.r3::before { background: conic-gradient(from 346deg, rgba(123,92,255,.22), rgba(27,77,255,.11) 45%, rgba(11,26,107,.03) 75%, rgba(123,92,255,.22)); }

/* 궤도 점 — 링 둘레에 백분율 좌표로 얹어 링이 작아져도 그대로 붙어 있다 */
.ax-ring .d { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); filter: blur(1.4px);
    animation: ax-dot 2.4s ease-in-out infinite; }
.ax-ring .d1 { left: 97%;  top: 67%; width: 9px; height: 9px; background: #8CE0FF; }
.ax-ring .d2 { left: 6.7%; top: 75%; width: 6px; height: 6px; background: #7B5CFF; animation-delay: .3s; }
.ax-ring .d3 { left: 6%;   top: 28%; width: 7px; height: 7px; background: #38D6FF; animation-delay: .6s; }
.ax-ring .d4 { left: 88%;  top: 18%; width: 5px; height: 5px; background: #C05BFF; animation-delay: .9s; }
.ax-ring .d5 { left: 72%;  top: 96%; width: 6px; height: 6px; background: #1B4DFF; animation-delay: 1.2s; }
.ax-ring .d6 { left: 28%;  top: 5%;  width: 5px; height: 5px; background: #8CE0FF; animation-delay: 1.5s; }

/* 부유 칩 4개 — 무대 기준이 아니라 "오브제 중심" 기준으로 띄운다(무대 중앙 = 오브제 중심).
   좌표는 시안 실측 오프셋을 오브제 지름(--orb)의 배수로 환산한 값이라 오브제가 줄어도 관계가 유지된다. */
.ax-chips { position: absolute; inset: 0; list-style: none; }
.ax-chip { position: absolute; left: calc(50% + var(--cx) * var(--orb)); top: calc(50% + var(--cy) * var(--orb));
    display: inline-flex; align-items: center; gap: 12px;
    height: 46px; padding: 0 22px; border: 1px solid rgba(255,255,255,.22); border-radius: 23px;
    background: rgba(255,255,255,.09); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    white-space: nowrap; transform: translate(-50%, -50%);
    transition: background .25s ease, border-color .25s ease;
    animation: ax-float 4.5s ease-in-out infinite; }
.ax-chip span { font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,.95); }
.ax-chip em { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-style: normal; font-size: 13px; font-weight: 700; color: #8CE0FF; transition: transform .25s ease; }
.ax-chip:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.ax-chip:hover em { transform: scale(1.2); }
.ax-chip.c1 { --cx: -.707; --cy: -.287; }
.ax-chip.c2 { --cx:  .586; --cy: -.172; animation-delay: .6s; }
.ax-chip.c3 { --cx: -.754; --cy:  .245; animation-delay: 1.2s; }
.ax-chip.c4 { --cx:  .633; --cy:  .347; animation-delay: 1.8s; }

/* ── 중간 선언 ── */
.ax-mid { margin-top: 30px; }
.ax-rule { display: block; height: 1px; background: rgba(255,255,255,.18); transform-origin: left center; }
.ax-rule.ani { opacity: 1; transform: scaleX(0); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.ax-rule.ani.on { transform: scaleX(1); }
.ax-mid-top { margin-top: 34px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.ax-mid-top h3 { font-size: clamp(24px, 2.4vw, 36px); font-weight: 700; letter-spacing: -0.04em; color: #fff; word-break: keep-all; }
.ax-mid-en { flex: 0 0 auto; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .1em; color: rgba(255,255,255,.4); }
.ax-mid-desc { margin-top: 24px; max-width: 700px; font-size: 16.5px; line-height: 1.95; letter-spacing: -0.02em; color: rgba(255,255,255,.55); word-break: keep-all; }
.ax-note { margin-top: 30px; display: inline-flex; align-items: center; height: 34px; padding: 0 22px;
    border: 1px solid rgba(140,224,255,.35); border-radius: 17px;
    font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; color: #8CE0FF; }

/* ── 지그재그 2행 ── */
.ax-rows { margin-top: 68px; display: flex; flex-direction: column; gap: 70px; }
.ax-row { display: flex; align-items: center; gap: 60px; }
.ax-row.rev { flex-direction: row-reverse; }

/* figure 는 브라우저 기본 margin(1em 40px)이 남아 있으므로 반드시 0 으로 눌러준다 */
.ax-panel { margin: 0; position: relative; flex: 0 0 700px; max-width: 700px; height: 380px;
    border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: #0C101C; overflow: hidden; }
.ax-panel-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; background: rgba(255,255,255,.05); }
.ax-panel-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.ax-panel-bar b { margin-left: 14px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.45); }
.ax-shot { position: absolute; left: 16px; right: 16px; top: 54px; bottom: 16px;
    background-position: top center; background-size: cover; border-radius: 8px; }

.ax-text { flex: 1 1 auto; min-width: 0; }
.ax-badge { display: inline-flex; align-items: center; height: 32px; padding: 0 22px; border-radius: 16px;
    background: linear-gradient(90deg, #1B4DFF 0%, #7B5CFF 100%);
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #fff; }
.ax-text h4 { margin-top: 26px; font-size: clamp(21px, 2vw, 28px); font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; color: #fff; word-break: keep-all; }
.ax-rr { display: block; width: 36px; height: 2px; margin-top: 26px; background: #1B4DFF; }
.ax-text p { margin-top: 26px; font-size: 15px; line-height: 1.95; letter-spacing: -0.02em; color: rgba(255,255,255,.52); word-break: keep-all; }
.ax-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 34px;
    font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: #8CE0FF; transition: gap .25s ease; }
.ax-more em { font-style: normal; }
.ax-more:hover { gap: 14px; color: #8CE0FF; }

@keyframes ax-spin    { to { transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))) rotate(360deg); } }
/* 회전과 별개로 크기만 천천히 오르내린다(회전은 안쪽 ::before 담당) */
@keyframes ax-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.985); } 50% { transform: translate(-50%, -50%) scale(1.045); } }
@keyframes ax-orb-spin { to { transform: rotate(360deg); } }
@keyframes ax-halo    { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; } 50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; } }
@keyframes ax-dot     { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* 칩은 중심 정렬 transform 을 쓰고 있으므로 부유 키프레임에도 그 값을 함께 담는다 */
@keyframes ax-float   { 0%, 100% { transform: translate(-50%, calc(-50% - 3px)); } 50% { transform: translate(-50%, calc(-50% + 3px)); } }

@media screen and (max-width: 1250px) {
    .ax-section { --orb: 380px; padding: 90px 0 110px; }
    .ax-panel { flex: 0 0 56%; max-width: 56%; height: 330px; }
    .ax-row { gap: 40px; }
    .ax-chip { height: 42px; padding: 0 18px; }
    .ax-chip span { font-size: 13.5px; }
}
@media screen and (max-width: 950px) {
    /* 오브제는 작게, 링은 1겹만, 칩은 오브제 아래 2×2 그리드로 고정한다 */
    .ax-section { --orb: 300px; padding: 76px 0 90px; }
    .ax-stage { height: auto; margin-top: 30px; }
    .ax-orb-wrap { position: relative; left: auto; top: auto; margin: 0 auto; transform: none; }
    .ax-ring.r2, .ax-ring.r3 { display: none; }
    .ax-chips { position: static; margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ax-chip { position: static; justify-content: center; transform: none; animation: none; }
    .ax-mid { margin-top: 56px; }
    .ax-mid-top { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ax-rows { margin-top: 54px; gap: 54px; }
    .ax-row, .ax-row.rev { flex-direction: column; align-items: stretch; gap: 28px; }
    .ax-panel { flex: 1 1 auto; max-width: 100%; height: 0; padding-bottom: 54%; }
}
@media screen and (max-width: 650px) {
    .ax-section { --orb: 240px; padding: 64px 0 76px; }
    .ax-chips { grid-template-columns: 1fr; }
    .ax-mid-desc { font-size: 15px; }
    .ax-shot { left: 10px; right: 10px; top: 48px; bottom: 10px; }
    .ax-panel-bar { padding: 0 12px; }
    .ax-rows { gap: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .ax-ring, .ax-orb, .ax-orb-core, .ax-orb::before, .ax-orb-core::before, .ax-halo, .ax-chip, .ax-ring .d { animation: none; }
    .ax-rule.ani { transform: none; }
}

/* ============================================================
   FEEDBACK — 고객후기
   Figma "고객후기" #384:397 / 모션 "[JOB] 고객후기 섹션 — 모션 정의" #387:2

   ⭐ 두 열 모두 같은 6장 전체를 담고, 같은 방향(위)·같은 속도로 흐른다.
      우열만 루프의 정확히 절반에서 출발한다(animation-delay 음수 = ½ 위상차).
      - 반대 방향으로 돌리면 같은 후기가 루프마다 반드시 같은 높이에서 스쳐 지나간다.
      - 속도가 조금이라도 다르면 위상차가 서서히 줄어 결국 겹친다. 그래서 duration 은 한 변수로 공유한다.
============================================================ */
/* overflow:hidden 은 섹션이 아니라 .fb-cols 가 진다.
   섹션에 걸어두면 그게 sticky 의 스크롤 기준이 돼버려서 .fb-pin 이 고정되지 않는다. */
/* overflow: clip — sticky 문구 안의 .fb-veil(700px)이 68vh 칸보다 커서 섹션 위아래로 삐져나오는 걸 자른다.
   hidden 은 스크롤 컨테이너가 돼 sticky 가 풀리지만 clip 은 그렇지 않다. */
.fb-section { --fb-dur: 92s; position: relative; z-index: 2; height: 1560px; overflow: clip;
    background: linear-gradient(180deg, #06070E 0%, #090C1A 50%, #06070E 100%); }
/* 카드 열은 흐름에서 빼 깔아두고, 그 위에 sticky 문구가 얹힌다 */
.fb-cols { position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: min(94%, 1500px); height: 100%; overflow: hidden;
    display: flex; align-items: flex-start; justify-content: space-between; }

/* ── 중앙 문구 고정 ──
   top 16vh + height 68vh = 내용이 화면 정중앙(50vh)에 온다.
   칸을 화면 전체(top:0/height:100vh)로 잡으면 섹션 끝 900px 을 남기고 일찍 풀려버린다.
   칸이 작을수록 고정 구간이 길어진다 — 이 값이면 1560 중 약 950px 을 붙어 있는다. */
.fb-pin { position: sticky; top: 16vh; z-index: 4;
    display: flex; align-items: center; justify-content: center;
    height: 68vh; pointer-events: none; }
.fb-pin > * { pointer-events: auto; }
/* ⭐ align-self: flex-start 가 없으면 열이 섹션 높이(1560)로 늘어나고,
      그 안의 카드 12장이 그 높이에 맞춰 짜부라진다(= 레이아웃 붕괴). */
.fb-col { flex: 0 0 560px; max-width: 560px; align-self: flex-start;
    display: flex; flex-direction: column; gap: 36px;
    animation: fbRoll var(--fb-dur) linear infinite; will-change: transform; }
/* 우열은 반대 방향(아래로) + 루프의 절반 지점에서 시작 */
.fb-col[data-fb-col="R"] { animation-direction: reverse; animation-delay: calc(var(--fb-dur) / -2); }
@keyframes fbRoll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* 카드 사이 gap 때문에 -50% 가 정확히 "원본 6장"이 되도록, 트랙 끝의 여분 간격을 보정한다 */
.fb-col > .fb-card:last-child { margin-bottom: 36px; }

/* ── 후기 카드 ── */
.fb-card { flex: 0 0 auto;                                  /* 세로로 눌리지 않게 고정 */
    position: relative; padding: 28px 30px 30px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px;
    background: rgba(255,255,255,.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    overflow: hidden; transition: background .3s ease, transform .3s ease; }
/* 좌상단 코너 글로우 + 상단 하이라이트 라인.
   ⭐ 끝 색은 transparent(=투명한 검정) 대신 같은 색의 알파 0 을 써야 회색으로 탁해지지 않는다. */
.fb-card::before { content: ''; position: absolute; left: -110px; top: -130px; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(closest-side circle, var(--tone-38) 0%, var(--tone-14) 55%, var(--tone-0) 100%);
    filter: blur(30px); opacity: .9; transition: opacity .3s ease; pointer-events: none; }
.fb-card::after { content: ''; position: absolute; left: 0; top: 0; width: 220px; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 100%); }
.fb-card:hover { background: rgba(255,255,255,.09); transform: translateY(-3px); }
.fb-card:hover::before { opacity: 1; }

.fb-head { display: flex; align-items: center; gap: 10px; position: static; width: auto; padding: 0; }
.fb-av { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--tone-18); font-size: 14px; font-weight: 700; color: var(--tone); }
.fb-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb-who b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,.95); }
.fb-who em { font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--tone-90); }
.fb-stars { margin-left: auto; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .28em; color: var(--tone); white-space: nowrap; }
.fb-body { margin-top: 26px; font-size: 15px; line-height: 1.94; letter-spacing: -0.02em; color: rgba(255,255,255,.84); word-break: keep-all; }

/* 카드별 포인트 색 — 시안 실측 */
.fb-card.tone-v { --tone: #7B5CFF; --tone-90: rgba(123,92,255,.9); --tone-38: rgba(123,92,255,.38); --tone-18: rgba(123,92,255,.18); --tone-14: rgba(123,92,255,.14); --tone-0: rgba(123,92,255,0); }
.fb-card.tone-b { --tone: #3E8CFF; --tone-90: rgba(62,140,255,.9); --tone-38: rgba(62,140,255,.38); --tone-18: rgba(62,140,255,.18); --tone-14: rgba(62,140,255,.14); --tone-0: rgba(62,140,255,0); }
.fb-card.tone-c { --tone: #1B4DFF; --tone-90: rgba(27,77,255,.9);  --tone-38: rgba(27,77,255,.38);  --tone-18: rgba(27,77,255,.18);  --tone-14: rgba(27,77,255,.14);  --tone-0: rgba(27,77,255,0); }
.fb-card.tone-t { --tone: #14B8A6; --tone-90: rgba(20,184,166,.9); --tone-38: rgba(20,184,166,.38); --tone-18: rgba(20,184,166,.18); --tone-14: rgba(20,184,166,.14); --tone-0: rgba(20,184,166,0); }
.fb-card.tone-m { --tone: #C05BFF; --tone-90: rgba(192,91,255,.9); --tone-38: rgba(192,91,255,.38); --tone-18: rgba(192,91,255,.18); --tone-14: rgba(192,91,255,.14); --tone-0: rgba(192,91,255,0); }
.fb-card.tone-i { --tone: #5B4BE0; --tone-90: rgba(91,75,224,.9);  --tone-38: rgba(91,75,224,.38);  --tone-18: rgba(91,75,224,.18);  --tone-14: rgba(91,75,224,.14);  --tone-0: rgba(91,75,224,0); }

/* ── 상·하단 페이드 + 중앙 베일 ── */
/* 카드가 잘려 보이지 않고 흐려지며 사라진다 */
.fb-section::before, .fb-section::after { content: ''; position: absolute; left: 0; right: 0; height: 220px; z-index: 3; pointer-events: none; }
.fb-section::before { top: 0; background: linear-gradient(180deg, rgba(6,7,14,.98) 0%, rgba(6,7,14,0) 100%); }
.fb-section::after { bottom: 0; background: linear-gradient(180deg, rgba(6,7,14,0) 0%, rgba(6,7,14,.98) 100%); }
/* 가운데 문구 뒤를 덮는 베일 — 박스가 가로로 긴 직사각형이라 circle 이 아니라 ellipse 여야
   구석까지 자연스럽게 퍼진다(circle 이면 동그란 얼룩처럼 보인다) */
.fb-veil { position: absolute; left: 50%; top: 50%; width: 860px; height: 700px; transform: translate(-50%, -50%); z-index: 2; pointer-events: none;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(6,7,14,1) 30%, rgba(6,7,14,.72) 62%, rgba(6,7,14,0) 100%); }

/* ── 중앙 블록 ── (.fb-pin 안에서 flex 로 가운데) */
.fb-center { position: relative; z-index: 4;
    width: min(88%, 460px); text-align: center; }
.fb-quote { display: block; margin-bottom: -46px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 170px; font-weight: 900; line-height: 1; color: rgba(27,77,255,.2); }
.fb-eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #5C8CFF; }
.fb-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #1B4DFF; }
.fb-title { margin-top: 24px; font-size: clamp(28px, 3vw, 46px); font-weight: 700; line-height: 1.46; letter-spacing: -0.04em; color: #fff; }
.fb-rule { display: block; width: 40px; height: 1px; margin: 26px auto 0; background: rgba(255,255,255,.32); }
.fb-desc { margin-top: 24px; font-size: 15.5px; line-height: 1.9; letter-spacing: -0.02em; color: rgba(255,255,255,.52); }
.fb-score { margin-top: 30px; }
.fb-score .s { display: block; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .38em; text-indent: .38em; color: #1B4DFF; }
.fb-score em { display: block; margin-top: 14px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .1em; color: rgba(255,255,255,.4); }
.fb-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; width: 220px; height: 44px; justify-content: center;
    border: 1px solid rgba(255,255,255,.3); border-radius: 22px;
    font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: #fff;
    transition: border-color .25s ease, background .25s ease, gap .25s ease; }
.fb-more em { font-style: normal; }
.fb-more:hover { border-color: #fff; background: rgba(255,255,255,.08); gap: 14px; color: #fff; }

@media screen and (max-width: 1250px) {
    .fb-section { height: 1320px; }
    .fb-col { flex: 0 0 46%; max-width: 46%; }
    .fb-card { padding: 22px 22px 24px; }
    .fb-body { margin-top: 20px; font-size: 14px; }
    .fb-quote { font-size: 130px; margin-bottom: -36px; }
    .fb-veil { width: 620px; }
}
/* ── 모바일·태블릿: 세로 무한 롤 대신 "손가락으로 넘기는 가로 슬라이더" ──
   좁은 화면에서 1,100px 짜리 세로 자동 스크롤은 읽기도, 멈추기도 어렵다.
   그래서 ① 문구를 맨 위로 올리고 ② 카드는 가로로 눕혀 스냅 스와이프로 바꾼다. */
@media screen and (max-width: 950px) {
    .fb-section { height: auto; padding: 76px 0 84px;
        display: flex; flex-direction: column; }          /* 순서를 바꿀 수 있게 flex 로 */
    /* 고정은 데스크톱에서만 — 좁은 화면에선 문구가 맨 위에 한 번 나오고 함께 스크롤된다 */
    .fb-pin { order: -1;                                  /* ⭐ 문구가 카드보다 먼저 */
        position: static; display: block; height: auto; }
    .fb-center { position: static; transform: none; width: min(92%, 560px); margin: 0 auto; }
    .fb-quote { font-size: 110px; margin-bottom: -30px; }
    .fb-veil { display: none; }
    .fb-section::before, .fb-section::after { display: none; }   /* 세로 페이드는 더 이상 필요 없다 */

    .fb-cols { position: relative; left: auto; transform: none;
        display: block; width: 100%; height: auto; margin-top: 44px;
        overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        /* 첫 카드는 본문과 같은 선에서 시작하고, 넘침은 오른쪽으로만 */
        padding: 4px 0 6px; scroll-padding-left: 4%; }
    .fb-cols::-webkit-scrollbar { display: none; }
    .fb-col { flex: none; max-width: none; align-self: auto;
        display: flex; flex-direction: row; align-items: stretch; gap: 14px;
        width: max-content; padding: 0 4%;
        animation: none; }                                 /* 자동 흐름 정지 — 손가락이 조종한다 */
    .fb-col[data-fb-col="R"] { display: none; }
    .fb-card[aria-hidden="true"] { display: none; }        /* 복제본은 루프용이라 여기선 불필요 */
    .fb-card { width: min(84vw, 420px); scroll-snap-align: start; padding: 24px 22px 26px; }
    .fb-col > .fb-card:last-child { margin-bottom: 0; }
    /* 카드 높이를 고르게 — 긴 후기는 12줄에서 끊는다 */
    .fb-body { margin-top: 20px; font-size: 14.5px; line-height: 1.86;
        display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; }
    .fb-card:hover { transform: none; }                    /* 터치에서 들뜸은 방해만 된다 */
}
@media screen and (max-width: 650px) {
    .fb-section { padding: 62px 0 70px; }
    .fb-quote { font-size: 92px; margin-bottom: -24px; }
    .fb-title { font-size: 26px; }
    .fb-desc { font-size: 14.5px; }
    .fb-cols { margin-top: 36px; }
    .fb-card { width: 86vw; padding: 22px 20px 24px; }
    .fb-body { -webkit-line-clamp: 14; }
}
@media (prefers-reduced-motion: reduce) {
    /* 루프 정지 — 복제본은 숨기고 원본 6장만 정적으로 보여준다 */
    .fb-col { animation: none; }
    .fb-card[aria-hidden="true"] { display: none; }
    .fb-section { height: auto; padding: 80px 0; display: flex; flex-direction: column; }
    .fb-cols { position: relative; left: auto; transform: none; height: auto; }
    .fb-pin { order: -1; position: static; display: block; height: auto; }
    .fb-center { position: static; transform: none; margin: 0 auto 56px; }
    .fb-veil { display: none; }
}


/* ============================================================
   FAQ — Figma "[JOB] FAQ 섹션" #310:58
   다크(#0A0B10) 위 1200 폭 아코디언.
   행 안에서 번호는 왼쪽 28px, 질문은 행 전체 기준 가운데,
   +/− 아이콘은 오른쪽 28px 에 절대배치한다(질문의 가운데 정렬을 지키려고).
   펼친 행 상단의 블루 2px 는 border 대신 inset box-shadow 로 넣어
   열고 닫을 때 2px 만큼 줄이 튀지 않게 했다.
============================================================ */
.faq-section.faq-dark { position: relative; z-index: 2; padding: 98px 0 120px;
    background: #0A0B10; scroll-margin-top: 90px; }
.faq-section.faq-dark::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.1); }
.faq-section.faq-dark > .inner { width: min(92%, 1200px); margin: 0 auto; }

/* ── 헤드 ── */
.faq-dark .faq-head { text-align: center; }
.faq-dark .faq-eyebrow { display: inline-flex; align-items: center; gap: 11px;
    font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #1B4DFF; }
.faq-dark .faq-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #1B4DFF; }
.faq-dark .faq-title { margin-top: 20px; font-size: clamp(30px, 3.6vw, 56px); font-weight: 700; line-height: 1.4; letter-spacing: -0.04em; color: #fff; word-break: keep-all; }
.faq-dark .faq-desc { margin-top: 12px; font-size: 16px; line-height: 1.8; letter-spacing: -0.02em; color: rgba(255,255,255,.5); word-break: keep-all; }

/* ── 리스트 ── */
.faq-dark .faq-list { max-width: none; margin: 75px 0 0; border-top: 1px solid rgba(255,255,255,.55); }
.faq-dark .faq-item { border-bottom: 1px solid rgba(255,255,255,.12); transition: background .3s; }
.faq-dark .faq-item:last-child { border-bottom-color: rgba(255,255,255,.35); }
.faq-dark .faq-item.open { background: rgba(255,255,255,.05); box-shadow: inset 0 2px 0 #1B4DFF; }

/* 질문 줄 */
.faq-dark .faq-item .faq-q { position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 96px; padding: 20px 66px; gap: 0;
    background: transparent; border: none; cursor: pointer; text-align: center; }
.faq-dark .faq-item .q-num { position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
    font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    color: rgba(27,77,255,.45); transition: color .3s; }
/* display:block 은 예전 라이트 FAQ 의 .q-txt{display:flex} 를 확실히 되돌리려고 명시한다 */
.faq-dark .faq-item .q-txt { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.5;
    color: rgba(255,255,255,.8); word-break: keep-all; transition: color .3s; }
/* +/− 아이콘 — 가로바(::before)는 항상, 세로바(::after)는 닫힘일 때만 보인다 */
.faq-dark .faq-item .q-ico { position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; }
.faq-dark .faq-item .q-ico::before,
.faq-dark .faq-item .q-ico::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,.45); transition: background .3s, transform .3s, opacity .3s; }
.faq-dark .faq-item .q-ico::before { width: 18px; height: 1.8px; transform: translate(-50%, -50%); }
.faq-dark .faq-item .q-ico::after  { width: 1.8px; height: 18px; transform: translate(-50%, -50%); }
.faq-dark .faq-item.open .q-ico::before,
.faq-dark .faq-item.open .q-ico::after { background: #fff; }
.faq-dark .faq-item.open .q-ico::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.faq-dark .faq-item.open .q-num { color: #1B4DFF; }
.faq-dark .faq-item.open .q-txt { color: #fff; }
/* 닫힌 행 hover — 아주 옅게만 들어온다 */
.faq-dark .faq-item:not(.open) .faq-q:hover { background: rgba(255,255,255,.025); }
.faq-dark .faq-item:not(.open) .faq-q:hover .q-txt { color: #fff; }
.faq-dark .faq-item:not(.open) .faq-q:hover .q-ico::before,
.faq-dark .faq-item:not(.open) .faq-q:hover .q-ico::after { background: rgba(255,255,255,.75); }

/* 답변 패널 */
.faq-dark .faq-item .faq-a { overflow: hidden; max-height: 0; transition: max-height .4s ease; }
.faq-dark .faq-item .faq-a .inner-a { display: block; padding: 0 28px 28px; text-align: center; font-size: inherit; color: inherit; }
.faq-dark .faq-item .a-rule { display: block; width: 40px; height: 1px; margin: 0 auto 26px; background: rgba(27,77,255,.7); }
.faq-dark .faq-item .a-txt { max-width: 900px; margin: 0 auto;
    font-size: 15.5px; line-height: 1.95; letter-spacing: -0.02em; color: rgba(255,255,255,.62); word-break: keep-all; }
.faq-dark .faq-item .a-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 280px; height: 44px; margin-top: 22px; border: 1px solid rgba(255,255,255,.28); border-radius: 22px;
    font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: #fff;
    transition: background .3s, border-color .3s; }
.faq-dark .faq-item .a-cta em { font-style: normal; transition: transform .3s; }
.faq-dark .faq-item .a-cta:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }
.faq-dark .faq-item .a-cta:hover em { transform: translateX(4px); }

/* ── 전체 보기 ── */
.faq-dark .faq-more { margin-top: 50px; text-align: center; }
.faq-dark .faq-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 200px; height: 52px; border: 1px solid rgba(255,255,255,.3); border-radius: 26px;
    font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; color: #fff;
    transition: background .3s, border-color .3s; }
.faq-dark .faq-more-btn em { font-style: normal; transition: transform .3s; }
.faq-dark .faq-more-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }
.faq-dark .faq-more-btn:hover em { transform: translateX(4px); }

/* ── 반응형 ── */
@media screen and (max-width: 1250px) {
    .faq-section.faq-dark { padding: 84px 0 100px; }
    .faq-dark .faq-item .faq-q { min-height: 88px; padding: 18px 60px; }
    .faq-dark .faq-item .q-txt { font-size: 19px; }
    .faq-dark .faq-list { margin-top: 62px; }
}
/* 950 이하 — 가운데 정렬을 버리고 왼쪽 정렬로 바꾼다.
   좁은 폭에서 질문이 두 줄로 접히면 가운데 정렬은 줄마다 읽는 시작점이 달라져 불편하다. */
@media screen and (max-width: 950px) {
    .faq-section.faq-dark { padding: 70px 0 84px; }
    .faq-dark .faq-title { margin-top: 16px; }
    .faq-dark .faq-desc { font-size: 15px; }
    .faq-dark .faq-list { margin-top: 44px; }
    .faq-dark .faq-item .faq-q { justify-content: flex-start; min-height: 78px; padding: 18px 34px 18px 38px; text-align: left; }
    .faq-dark .faq-item .q-num { left: 0; }
    .faq-dark .faq-item .q-txt { font-size: 17px; }
    .faq-dark .faq-item .q-ico { right: 0; width: 16px; height: 16px; }
    .faq-dark .faq-item .q-ico::before { width: 16px; }
    .faq-dark .faq-item .q-ico::after { height: 16px; }
    .faq-dark .faq-item .faq-a .inner-a { padding: 0 0 26px 38px; text-align: left; }
    .faq-dark .faq-item .a-rule { margin: 0 0 20px; }
    .faq-dark .faq-item .a-txt { font-size: 15px; line-height: 1.85; }
    .faq-dark .faq-item .a-cta { width: 100%; max-width: 280px; }
}
@media screen and (max-width: 650px) {
    .faq-section.faq-dark { padding: 56px 0 68px; }
    .faq-dark .faq-desc { font-size: 14px; line-height: 1.75; }
    .faq-dark .faq-list { margin-top: 32px; }
    .faq-dark .faq-item .faq-q { min-height: 68px; padding: 16px 28px 16px 32px; }
    .faq-dark .faq-item .q-num { font-size: 11px; }
    .faq-dark .faq-item .q-txt { font-size: 15.5px; line-height: 1.55; }
    .faq-dark .faq-item .q-ico { width: 14px; height: 14px; }
    .faq-dark .faq-item .q-ico::before { width: 14px; }
    .faq-dark .faq-item .q-ico::after { height: 14px; }
    .faq-dark .faq-item .faq-a .inner-a { padding: 0 0 22px 32px; }
    .faq-dark .faq-item .a-txt { font-size: 14px; }
    .faq-dark .faq-item .a-cta { height: 42px; font-size: 13.5px; }
    .faq-dark .faq-more { margin-top: 32px; }
    .faq-dark .faq-more-btn { width: 180px; height: 48px; font-size: 13.5px; }
}


/* ============================================================
   PARTNERS — Figma "[JOB] PARTNERS 섹션" #366:2
                모션 "[JOB] PARTNERS — 모션 정의" #315:2
   FAQ 의 다크 판이 끝나고 다시 밝아지는 섹션(#EEF1F6).
   로고 칩은 흰 알약(r34)이고, 테두리·그림자 색이 곧 업종이다 — 위 범례가 그 키.
   시안은 한 줄 6칩 × 9줄, 줄 안에서 위아래로 ±16px 어긋나 있다(회전은 없다).
   그 어긋남은 CSS 의 기본 상태로 두고 GSAP 은 거기까지 떨어뜨리기만 한다
   (gsap.from 이 현재 위치를 도착값으로 읽어간다).
============================================================ */
.partners-section { position: relative; z-index: 2; padding: 88px 0 106px;
    background: #EEF1F6; overflow: hidden; }
.partners-section::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(11,11,11,.1); }
.partners-section > .inner { position: relative; z-index: 1; width: min(92%, 1200px); margin: 0 auto; }

/* ── 헤드 ──
   클래스명이 .ptn- 인 이유: 프로세스 섹션이 이미 .pt-head / .pt-item / .pt-dot 을 쓰고 있다.
   그쪽 .pt-head 는 flex column + align-items:flex-start 라 그대로 두면 머릿글이 왼쪽으로 붙는다. */
.ptn-head { text-align: center; }
.pt-eyebrow { display: inline-flex; align-items: center; gap: 11px;
    font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #1B4DFF; }
.pt-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #1B4DFF; }
.pt-title { margin-top: 18px; font-size: clamp(28px, 3.2vw, 50px); font-weight: 700; line-height: 1.4; letter-spacing: -0.04em; color: #0B0B0B; word-break: keep-all; }
.pt-deck { margin-top: 14px; font-size: 16px; line-height: 1.8; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
/* 넓은 화면에선 한 줄로 두고, 줄바꿈은 모바일에서만 살린다 */
.pt-deck br { display: none; }

/* 업종 범례 — 점 8px + 라벨 13/600, 한 줄 가운데 정렬 */
.pt-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin-top: 13px; }
.pt-legend li { display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: rgba(11,11,11,.72); }
.pt-legend li i { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }

/* 업종 색 — 칩 테두리·그림자와 범례 점이 같은 값을 쓴다.
   시안이 테두리 22% / 그림자 16% 로 지정한 값을 그대로 옮겼다
   (color-mix 로 계산하면 구형 브라우저에서 통째로 빠져서 리터럴로 둔다) */
.pt-legend li[data-cat="law"],    .pt-chip[data-cat="law"]    { --cat: #1B4DFF; --cat-bd: rgba(27,77,255,.22);  --cat-sh: rgba(27,77,255,.16);  --cat-bdh: rgba(27,77,255,.45);  --cat-shh: rgba(27,77,255,.3); }
.pt-legend li[data-cat="public"], .pt-chip[data-cat="public"] { --cat: #2E7BFF; --cat-bd: rgba(46,123,255,.22); --cat-sh: rgba(46,123,255,.16); --cat-bdh: rgba(46,123,255,.45); --cat-shh: rgba(46,123,255,.3); }
.pt-legend li[data-cat="ent"],    .pt-chip[data-cat="ent"]    { --cat: #7B5CFF; --cat-bd: rgba(123,92,255,.22); --cat-sh: rgba(123,92,255,.16); --cat-bdh: rgba(123,92,255,.45); --cat-shh: rgba(123,92,255,.3); }
.pt-legend li[data-cat="part"],   .pt-chip[data-cat="part"]   { --cat: #5B4BE0; --cat-bd: rgba(91,75,224,.22);  --cat-sh: rgba(91,75,224,.16);  --cat-bdh: rgba(91,75,224,.45);  --cat-shh: rgba(91,75,224,.3); }
.pt-legend li[data-cat="manu"],   .pt-chip[data-cat="manu"]   { --cat: #14B8A6; --cat-bd: rgba(20,184,166,.22); --cat-sh: rgba(20,184,166,.16); --cat-bdh: rgba(20,184,166,.45); --cat-shh: rgba(20,184,166,.3); }
.pt-legend li[data-cat="edu"],    .pt-chip[data-cat="edu"]    { --cat: #3E8CFF; --cat-bd: rgba(62,140,255,.22); --cat-sh: rgba(62,140,255,.16); --cat-bdh: rgba(62,140,255,.45); --cat-shh: rgba(62,140,255,.3); }
.pt-legend li[data-cat="fnb"],    .pt-chip[data-cat="fnb"]    { --cat: #C05BFF; --cat-bd: rgba(192,91,255,.22); --cat-sh: rgba(192,91,255,.16); --cat-bdh: rgba(192,91,255,.45); --cat-shh: rgba(192,91,255,.3); }
.pt-legend li[data-cat="etc"],    .pt-chip[data-cat="etc"]    { --cat: #8A92A0; --cat-bd: rgba(138,146,160,.22); --cat-sh: rgba(138,146,160,.16); --cat-bdh: rgba(138,146,160,.45); --cat-shh: rgba(138,146,160,.3); }

/* ── 칩 판 ──
   .inner(1200) 밖으로 빼서 화면 폭을 거의 다 쓴다.
   flex 가 아니라 "텍스트처럼 흐르는" 블록이다 — 그래야 좌우 스페이서가 만든
   삼각형 빈자리를 칩이 타고 흐르면서 위는 좁고 아래는 넓게 쌓인다.
   (flex/grid 로는 줄마다 폭을 다르게 줄 수 없다) */
.pt-field { --pile: 520px;            /* 삼각형이 벌어지는 높이. 이 아래로는 전체 폭 */
    /* flow-root — 좌우 스페이서(float)를 판 안에 가둔다.
       그냥 block 이면 로고가 적어 내용이 짧아졌을 때 스페이서가 판 밖으로 삐져나온다. */
    display: flow-root; text-align: center; font-size: 0; /* inline-block 사이 공백 제거 */
    width: min(94%, 1780px); margin: 62px auto 0; }
/* 좌우 스페이서는 ::before/::after 가 아니라 실제 요소다.
   ::after 는 칩 뒤에 생성돼서 앞줄을 밀지 못한다 — 왼쪽만 먹혀 칩이 오른쪽으로 쏠린다. */
.pt-sp { display: block; width: 34%; height: var(--pile); }
.pt-sp.is-l { float: left;  shape-outside: polygon(0 0, 100% 0, 0 100%); }
.pt-sp.is-r { float: right; shape-outside: polygon(100% 0, 100% 100%, 0 0); }
/* 쏟아지는 동안만 칩 판 밖을 가린다 — 안 그러면 떨어지는 칩이 제목 위를 가로질러 지저분하다.
   착지 후에는 풀어야 칩 그림자가 판 가장자리에서 잘리지 않는다(JS 가 클래스를 떼준다). */
.pt-field.is-pouring { overflow: hidden; }
.pt-chip { --cat: #8A92A0; --cat-bd: rgba(138,146,160,.22); --cat-sh: rgba(138,146,160,.16);
    --cat-bdh: rgba(138,146,160,.45); --cat-shh: rgba(138,146,160,.3);
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    vertical-align: middle; margin: 5px 5.5px; font-size: 13px;
    height: 68px; padding: 0 26px; border-radius: 34px; background: #fff;
    border: 1px solid var(--cat-bd);
    box-shadow: 0 8px 24px -4px var(--cat-sh);
    transition: box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s;
    will-change: transform; }
/* 데스크톱에서는 width/height 속성(= 시안 실측 크기)을 그대로 쓴다.
   여기서 width:auto 를 주면 그 값이 무시돼 로고들이 전부 고만고만해진다.
   max-* 는 혹시 큰 파일이 들어왔을 때의 안전선일 뿐이다. */
/* flex:0 0 auto — 좁은 화면에서 flex 가 이미지를 가로로만 눌러 로고가 찌그러지는 걸 막는다.
   max-height 는 50px — 시안 로고는 대개 30px 이지만 세로로 긴 것이 46px 까지 있다.
   이걸 낮게 잡으면 높이만 잘리고 너비는 속성값 그대로라 그 로고들이 납작해진다. */
.pt-chip img { display: block; flex: 0 0 auto; max-width: 150px; max-height: 50px; object-fit: contain; }

/* 기울기 — 칩마다 값을 따로 주지 않고 6종만 두고 돌려쓴다(PHP 가 data-rot 을 붙인다).
   이미지에는 기울기를 굽지 않는다. 구우면 로고 원본이 틀어져서 다시 못 쓴다. */
.pt-chip[data-rot="1"] { transform: rotate(-3.2deg); }
.pt-chip[data-rot="2"] { transform: rotate(1.9deg); }
.pt-chip[data-rot="3"] { transform: rotate(-1.1deg); }
.pt-chip[data-rot="4"] { transform: rotate(2.8deg); }
.pt-chip[data-rot="5"] { transform: rotate(-2.4deg); }
.pt-chip[data-rot="6"] { transform: rotate(0.8deg); }

/* 위아래 어긋남도 5종만 두고 무작위로 뽑아 쓴다(PHP 가 data-off 을 붙인다).
   nth-child 로 돌리면 줄당 칩 수와 맞물려 지그재그가 규칙적으로 보인다. */
.pt-chip[data-off="1"] { margin-top: 13px; }
.pt-chip[data-off="2"] { margin-top: -3px; }
.pt-chip[data-off="3"] { margin-top: 7px; }
.pt-chip[data-off="4"] { margin-top: -9px; }
.pt-chip[data-off="5"] { margin-top: 2px; }

/* hover — 기울기를 펴면서 살짝 뜬다(모션 정의 #315:21).
   !important 인 이유: 착지 뒤에도 GSAP 이 남긴 인라인 transform 이 있을 수 있다. */
.pt-chip:hover { transform: rotate(0deg) translateY(-4px) !important; z-index: 2;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s;
    box-shadow: 0 16px 34px -6px var(--cat-shh);
    border-color: var(--cat-bdh); }

/* ── 반응형 ── */
@media screen and (max-width: 1250px) {
    .partners-section { padding: 76px 0 90px; }
    .pt-field { --pile: 460px; margin-top: 50px; }
    .pt-chip { height: 62px; padding: 0 22px; border-radius: 31px; margin: 4px 5px; }
    /* 좁은 화면부터는 width/height 속성을 풀고 비율대로 줄인다.
       max-width 만 걸면 높이는 속성값 그대로라 로고가 납작하게 눌린다. */
    .pt-chip img { width: auto; height: auto; max-width: 136px; max-height: 45px; }
}
@media screen and (max-width: 950px) {
    .partners-section { padding: 64px 0 74px; }
    .pt-title { margin-top: 14px; }
    .pt-deck { font-size: 15px; }
    .pt-legend { gap: 8px 14px; }
    .pt-legend li { font-size: 12px; gap: 6px; }
    .pt-legend li i { width: 7px; height: 7px; }
    /* 삼각형을 완만하게 — 좁은 화면에서 34% 씩 파먹으면 맨 위가 한 줄에 한 칩밖에 안 들어간다 */
    .pt-field { --pile: 380px; width: 96%; margin-top: 36px; }
    .pt-sp { width: 24%; }
    .pt-chip { height: 54px; padding: 0 17px; border-radius: 27px; margin: 4px 4px; }
    .pt-chip img { width: auto; height: auto; max-width: 119px; max-height: 39px; }
    /* 좁은 화면에서는 어긋남을 줄인다 — 그대로 두면 줄이 엉켜 보인다 */
    .pt-chip[data-off="1"] { margin-top: 7px; }
    .pt-chip[data-off="2"] { margin-top: -2px; }
    .pt-chip[data-off="3"] { margin-top: 4px; }
    .pt-chip[data-off="4"] { margin-top: -5px; }
    .pt-chip[data-off="5"] { margin-top: 1px; }
}
@media screen and (max-width: 650px) {
    .partners-section { padding: 52px 0 58px; }
    /* "법무법인부터 … 제조업까지," / "54곳과 함께했습니다." 두 줄로 끊는다 */
    .pt-deck { font-size: 14px; line-height: 1.75; }
    .pt-deck br { display: inline; }
    /* 모바일은 칩·로고를 두 단계 줄인다 — 한 줄에 세 개는 들어가야 더미로 보인다 */
    .pt-field { --pile: 260px; width: 96%; margin-top: 24px; }
    .pt-sp { width: 14%; }
    .pt-chip { height: 31px; padding: 0 9px; border-radius: 16px; margin: 2.5px 2.5px; }
    .pt-chip img { width: auto; height: auto; max-width: 68px; max-height: 21px; }
    .pt-chip[data-off="1"] { margin-top: 4px; }
    .pt-chip[data-off="2"] { margin-top: -1px; }
    .pt-chip[data-off="3"] { margin-top: 2px; }
    .pt-chip[data-off="4"] { margin-top: -3px; }
    .pt-chip[data-off="5"] { margin-top: 1px; }
}
/* 모션 축소 설정 — 낙하·어긋남을 걷어낸다(모션 정의 #315:23) */
@media (prefers-reduced-motion: reduce) {
    .pt-chip { transform: none !important; margin-top: 0 !important; }
    .pt-chip:hover { transform: none !important; }
}


/* ============================================================
   ABOUT 비주얼 — Figma "[JOB] 회사소개 페이지 > 회사소개-비주얼" #434:5
   1920×1080 다크 히어로. 제목 100px Bold ls -0.06em, 강조 단어는 알약 테두리로 감싼다.
   좌측 하단 타원(646×343)에 포트폴리오 사진이 페이드로 교체된다.
============================================================ */
.ab-hero { position: relative; overflow: hidden;
    min-height: 100vh; padding: 0 0 120px; background: #06070C; color: #fff; }
/* 시안의 콘텐츠 블록은 1920 안에서 x 360 / y 169 에서 시작한다 → 1200 inner 기준으로 환산 */
.ab-hero-in { width: min(92%, 1200px); margin: 0 auto; padding-top: clamp(120px, 15.6vh, 169px); }

.ab-label { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: clamp(16px, 1.25vw, 24px); font-weight: 600; letter-spacing: .12em; color: #5B9BFF; }

/* ── 제목 ── */
.ab-title { margin-top: 13px; font-weight: 700; letter-spacing: -0.06em; color: #fff; }
.ab-title .l { display: block; font-size: clamp(38px, 5.2vw, 100px); line-height: 1.19;
    white-space: nowrap; }
.ab-title .l + .l { margin-top: 6px; }
/* 알약 — 시안은 글자 높이 119 에 알약 127, 좌우 여백 30px */
.ab-title .pill { display: inline-block; font-style: normal;
    padding: 0 .3em; border: 1.5px solid rgba(255,255,255,.42); border-radius: 999px; }
.ab-title .pill.on { color: #5B9BFF; border-color: rgba(255,255,255,.5); }
/* 글자 채우기 — 처음엔 전부 그레이, 섹션이 보이면 한 글자씩 제 색으로 켜진다(JS 가 .ch 를 만들고 .is-on 을 붙인다) */
.ab-title .ch { transition: color .45s ease; color: rgba(255,255,255,.22); }
.ab-title .ch.is-on { color: #fff; }
.ab-title .pill.on .ch.is-on { color: #5B9BFF; }

/* ── 본문 2단: 좌 타원 / 우 설명 ── */
.ab-body { display: flex; align-items: flex-start; gap: clamp(40px, 5vw, 146px);
    margin-top: clamp(48px, 8.9vh, 96px); }

/* 타원 — 시안은 623×272 타원을 9도 시계방향으로 기울여 놓았다(기운 뒤 바운딩 646×343).
   ⭐ 기우는 건 타원 마스크뿐이고 안의 사진은 똑바로 서 있다 — 그래서 사진은 −9도로 되돌린다.
      되돌리면 모서리가 비므로 1.36배 키워 덮는다(9도 기준 필요 배율 1.35). */
/* --tilt 는 타원과 궤도선이 같이 써야 해서 래퍼에 둔다.
   --shot-scale 은 사진을 -tilt 로 되돌렸을 때 생기는 빈 모서리를 덮는 배율(기울기가 클수록 커진다). */
.ab-oval-w { position: relative; flex: 0 0 auto; width: clamp(300px, 33vw, 623px);
    --tilt: 4deg; --shot-scale: 1.2; }
.ab-oval { position: relative;
    width: 100%; aspect-ratio: 620 / 320;
    border-radius: 50%; overflow: hidden;
    transform: rotate(var(--tilt)); }
.ab-shot { position: absolute; inset: 0; background-size: cover; background-position: center;
    transform: rotate(calc(var(--tilt) * -1)) scale(var(--shot-scale));
    opacity: 0; transition: opacity .8s ease; }

/* 궤도선 3겹 — 전부 타원과 같은 중심(시안에서 네 도형의 중심이 모두 389.44 / 556.64 로 일치).
   크기는 타원 대비 비율로 환산했다. 타원과 같은 각도로 기울여야 "도는 궤도"로 읽힌다. */
.ab-orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--tilt)); }
/* l — 그라디언트 스트로크. 테두리에 그라디언트를 넣으려면 배경을 border-box 로 깔고 안쪽을 마스크로 도려낸다 */
.ab-orbit.o1 { width: 118.3%; height: 104.9%; border: 1.2px solid transparent;
    background: linear-gradient(90deg, rgba(91,155,255,.5) 0%, rgba(123,92,255,.12) 50%, rgba(91,155,255,.5) 100%) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; }
.ab-orbit.o2 { width: 120.6%; height: 140.7%; border: 1px solid rgba(255,255,255,.16); }
/* d — 시안은 4,8 점선. CSS dashed 는 길이를 지정할 수 없어 근사치로 간다 */
.ab-orbit.o3 { width: 109.8%; height: 112.3%; border: 1px dashed rgba(91,155,255,.45); }
.ab-shot.is-on { opacity: 1; }
.ab-oval-tint { position: absolute; inset: 0; background: rgba(27,77,255,.2); pointer-events: none; }
.ab-oval-ring { position: absolute; inset: 0; border-radius: 50%;
    box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.25); pointer-events: none; }

/* 우측 설명 — "what we do:" 는 왼쪽 열, 본문과 버튼은 오른쪽 열.
   grid 로 짜야 버튼 좌측선이 본문 좌측선과 정확히 맞는다(flex + padding 으로 맞추면 어긋난다). */
.ab-txt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 26px; padding-top: 28px; }
.ab-wwd { grid-column: 1; font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: clamp(15px, 1.05vw, 20px); color: rgba(255,255,255,.55); }
.ab-desc { grid-column: 2;
    font-size: clamp(15px, 1.05vw, 20px); line-height: 1.85; letter-spacing: -0.02em;
    color: rgba(255,255,255,.6); word-break: keep-all; }
.ab-btns { grid-column: 2; display: flex; gap: 8px; margin-top: clamp(28px, 4vh, 44px); }
.ab-btn { display: inline-flex; align-items: center; justify-content: center;
    min-width: 176px; height: 40px; padding: 0 18px; border-radius: 20px;
    background: #1B4DFF; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -0.02em;
    transition: background .25s, transform .25s cubic-bezier(.16,1,.3,1); }
.ab-btn:hover { background: #2E7BFF; transform: translateY(-2px); }
.ab-btn.is-play { min-width: 56px; padding: 0; font-size: 13px; font-weight: 700; }

/* ── SCROLL 인디케이터 ── */
.ab-scroll { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; }
.ab-scroll-track { display: block; width: 2px; height: 36px; background: rgba(255,255,255,.14); }
.ab-scroll-track i { display: block; width: 2px; height: 14px; background: #1B4DFF;
    animation: abScroll 1.9s ease-in-out infinite; }
@keyframes abScroll { 0% { transform: translateY(0); } 60% { transform: translateY(22px); } 100% { transform: translateY(22px); } }
.ab-scroll-circle { display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-top: 8px; border-radius: 50%;
    background: rgba(27,77,255,.5); color: #fff; font-size: 17px; font-weight: 700;
    transition: background .25s; }
.ab-scroll:hover .ab-scroll-circle { background: #1B4DFF; }
.ab-scroll-label { margin-top: 12px; font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .4em; text-indent: .4em; color: rgba(255,255,255,.55); }

/* ── 반응형 ── */
@media screen and (max-width: 1250px) {
    .ab-body { gap: 36px; }
    .ab-txt { padding-top: 10px; }
}
@media screen and (max-width: 950px) {
    .ab-hero { min-height: 0; padding: 0 0 92px; }
    .ab-hero-in { padding-top: 112px; }
    /* 좁은 화면에서는 한 줄에 다 안 들어간다 — 줄바꿈을 허용하고 알약도 같이 접힌다 */
    .ab-title .l { white-space: normal; }
    .ab-body { flex-direction: column; gap: 34px; }
    .ab-oval-w { width: 100%; }
    /* 좁은 화면에서는 "what we do:" 를 본문 위로 올린다 — 옆에 두면 본문 폭이 너무 좁아진다 */
    .ab-txt { grid-template-columns: 1fr; gap: 8px 0; padding-top: 0; }
    .ab-wwd, .ab-desc, .ab-btns { grid-column: 1; }
    .ab-scroll { display: none; }        /* 히어로가 더 이상 한 화면을 채우지 않는다 */
}
@media screen and (max-width: 650px) {
    .ab-hero { padding: 0 0 72px; }
    .ab-hero-in { padding-top: 96px; }
    .ab-title { margin-top: 10px; }
    .ab-title .l + .l { margin-top: 2px; }
    .ab-desc { line-height: 1.8; }
    .ab-btns { margin-top: 24px; }
    .ab-btn { min-width: 150px; height: 44px; font-size: 13.5px; }
    .ab-btn.is-play { min-width: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    .ab-shot { transition: none; }
    .ab-scroll-track i { animation: none; }
}


/* ============================================================
   ABOUT sec2 (WHO WE ARE) — Figma "회사소개-sec2" #434:44
   좌: 카피 / 우: 업종 분포 도넛 카드(600×440, radius 22, 흰 4% + 보더 18%).
   차트는 섹션이 보일 때 조각이 차례로 그려지고 가운데 숫자가 올라간다.
============================================================ */
.who-section { padding: 100px 0 117px; background: #06070C; color: #fff; }
.who-section > .inner { width: min(92%, 1200px); margin: 0 auto; }
.who-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 600px);
    gap: 40px; justify-content: space-between; align-items: start; }

/* ── 좌측 카피 ── */
.who-label { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 12px; font-weight: 600; letter-spacing: .12em; color: #5B9BFF; }
.who-title { margin-top: 21px; font-size: clamp(30px, 3.4vw, 48px); font-weight: 700;
    line-height: 1.4; letter-spacing: -0.04em; }
.who-hl { margin-top: 32px; font-size: clamp(17px, 1.45vw, 21px); font-weight: 700;
    line-height: 1.7; letter-spacing: -0.03em; }
/* 형광펜 — 시안은 두 번째 줄 앞부분에 10px 짜리 코발트 띠를 글자 뒤에 깔았다 */
.who-hl em { position: relative; font-style: normal; z-index: 0; }
.who-hl em::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 1px; z-index: -1;
    height: 10px; background: rgba(27,77,255,.55); }
.who-body { margin-top: 28px; font-size: 15.5px; line-height: 1.95; letter-spacing: -0.02em;
    color: rgba(255,255,255,.62); word-break: keep-all; }

/* ── 우측 카드 ── */
.who-card { padding: 26px 28px 28px; border-radius: 22px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.who-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.who-c-t { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 18px; font-weight: 500; line-height: 1.15; }
.who-c-y { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 11px; font-weight: 500; color: rgba(255,255,255,.5); }

/* margin-top 62 — 시안은 카드 제목과 차트 사이를 넉넉히 띄워 카드 높이가 440 이 된다 */
.who-chart { display: flex; align-items: center; gap: 40px; margin-top: 62px; }

/* 도넛 — dasharray 를 0 에서 실제 길이로 늘려 조각을 그린다.
   stroke-dasharray 는 값 개수가 같으면 브라우저가 보간해준다(0 C → len C-len). */
.who-donut { position: relative; flex: 0 0 auto; width: 250px; max-width: 46%; }
.who-donut svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.who-seg { stroke-dasharray: 0 590.62;
    transition: stroke-dasharray 1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
.who-section.is-on .who-seg { stroke-dasharray: var(--dash); }
.who-tot { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }
.who-tot b { display: block; font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.who-tot em { display: block; margin-top: 3px; font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: .12em; color: rgba(255,255,255,.5); }

/* 범례 — 색점 + % + 업종(오른쪽 정렬), 행마다 1px 구분선 */
.who-legend { flex: 1 1 auto; min-width: 0; }
/* 행 간격 34px — 시안의 범례 y 좌표가 128·162·196… 로 34 씩 떨어진다 */
.who-legend li { display: flex; align-items: center; gap: 10px; min-height: 34px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    opacity: 0; transform: translateY(6px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
.who-section.is-on .who-legend li { opacity: 1; transform: none; }
.who-legend i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.who-legend b { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9); }
.who-legend span { margin-left: auto; font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 11.5px; color: rgba(255,255,255,.55); }

/* ── 반응형 ── */
@media screen and (max-width: 1250px) {
    .who-section { padding: 84px 0 96px; }
    .who-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px; }
    .who-chart { gap: 28px; }
}
@media screen and (max-width: 950px) {
    .who-section { padding: 70px 0 80px; }
    /* 두 단이 나란히 갈 폭이 안 나온다 — 카피 위, 카드 아래로 쌓는다 */
    .who-grid { grid-template-columns: 1fr; gap: 40px; }
    .who-title { margin-top: 16px; }
    .who-hl { margin-top: 24px; }
    .who-body { margin-top: 22px; }
    .who-card { padding: 22px 22px 24px; }
}
@media screen and (max-width: 650px) {
    .who-section { padding: 56px 0 64px; }
    .who-body { font-size: 14.5px; line-height: 1.85; }
    /* 도넛과 범례를 위아래로 — 옆에 두면 둘 다 너무 좁아진다 */
    .who-chart { flex-direction: column; align-items: stretch; gap: 26px; margin-top: 26px; }
    .who-donut { width: 200px; max-width: 200px; margin: 0 auto; }
    .who-tot b { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    /* 그려지는 연출 없이 처음부터 완성된 차트를 보여준다 */
    .who-seg { transition: none; stroke-dasharray: var(--dash); }
    .who-legend li { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   PORTFOLIO 목록 (Figma "[JOB] 포트폴리오 페이지" #459:2, 1920×3007)
   히어로(390) → 좌 카테고리 + 우 3열 카드(880) → CTA → 푸터. 배경 전체 흰색.
   ⚠ .work-* / .sub-visual 은 다른 게시판도 쓰는 공용 클래스라 .pj-* 로 새로 팠다.
============================================================ */
/* 상단 스크롤 진행 바 — 시안 gnb/track 1920×3 */
.pj-progress { position: fixed; z-index: 101; left: 0; top: 0; width: 100%; height: 3px; background: rgba(11,11,11,.06); }
.pj-progress i { display: block; width: 0; height: 100%; background: #1B4DFF; transition: width .12s linear; }

.pj-hero { padding: 140px 0 0; background: #fff; color: #0B0B0B; }
.pj-hero .inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
    padding-bottom: 93px; border-bottom: 1px solid rgba(11,11,11,.08); }
.pj-eyebrow { font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 12px; font-weight: 600; line-height: 13px; letter-spacing: .12em; color: #1B4DFF; }
/* 시안의 Projects 는 Archivo Bold 120px — 좌측 사이드베어링 8px 을 음수 마진으로 걷어내 x360 에 맞춘다 */
.pj-display { margin: 13px 0 0 -8px; font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: clamp(56px, 6.3vw, 120px); font-weight: 700; line-height: 1.09; letter-spacing: -0.05em; color: #0B0B0B; }
.pj-lead { margin-top: 74px; max-width: 500px; text-align: right;
    font-size: 16px; line-height: 1.9; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }

.pj-index { padding: 80px 0 120px; background: #fff; }
.pj-tools { display: flex; justify-content: flex-end; }
.pj-body { display: flex; align-items: flex-start; gap: 0; }

/* 좌측 세로 카테고리 — 활성 항목만 20px 들여쓰고 4×28 파란 바가 붙는다(시안 cat-bar)
   스크롤 시 헤더(88px) 아래 128px 지점에 고정돼 카드 목록과 함께 따라온다 */
.pj-cats { flex: 0 0 320px; display: flex; flex-direction: column;
    position: -webkit-sticky; position: sticky; top: 128px; align-self: flex-start; }
.pj-cat { position: relative; padding: 0 0 0 20px; line-height: 58px;
    font-size: 38px; font-weight: 700; letter-spacing: -0.04em; color: rgba(11,11,11,.2);
    transition: color .25s, padding .25s; }
.pj-cat:hover { color: rgba(11,11,11,.55); }
.pj-cat.is-on { color: #0B0B0B; }
.pj-cat.is-on::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 28px;
    margin-top: -14px; border-radius: 2px; background: #1B4DFF; }

/* 우측 3열 — 282 카드 3장 + 17 거터 = 880 */
.pj-grid { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 24px 17px; }
.pj-cell { flex: 0 0 calc((100% - 34px) / 3); min-width: 0; }
.pj-card { display: block; }
.pj-thumb { position: relative; display: block; overflow: hidden; border-radius: 3px;
    aspect-ratio: 282 / 184; background-color: rgba(11,11,11,.05);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transition: box-shadow .3s; }
.pj-veil { position: absolute; inset: 0; background: rgba(11,13,22,.28); opacity: 0; transition: opacity .3s; }
.pj-go { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #0B0B0B;
    font-size: 15px; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.pj-card:hover .pj-thumb { box-shadow: 0 14px 30px -8px rgba(15,26,77,.2); }
.pj-card:hover .pj-veil { opacity: 1; }
.pj-card:hover .pj-go { opacity: 1; transform: none; }
.pj-tit { margin-top: 18px; font-size: 16.5px; font-weight: 700; line-height: 20px; letter-spacing: -0.03em; color: #0B0B0B;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .25s; }
.pj-card:hover .pj-tit { color: #1B4DFF; }
.pj-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; line-height: 16px;
    font-size: 13px; letter-spacing: -0.02em; color: #4A5261; }
.pj-meta i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 1.5px; background: #1B4DFF; }

/* 무한 스크롤 로딩 존 — 시안 load/skel·fade·track·bar (스켈레톤 282×184, 제목 150×12, 타입 96×10) */
.pj-more { position: relative; margin-left: 320px; padding-top: 24px; }
.pj-skel { display: flex; gap: 17px; }
.pj-skel span { position: relative; flex: 1 1 0; display: block; border-radius: 3px;
    aspect-ratio: 282 / 184; background: rgba(11,11,11,.05); }
.pj-skel span::before, .pj-skel span::after { content: ''; position: absolute; left: 0; border-radius: 3px; }
.pj-skel span::before { top: calc(100% + 22px); width: 150px; height: 12px; background: rgba(11,11,11,.07); }
.pj-skel span::after  { top: calc(100% + 48px); width: 96px;  height: 10px; background: rgba(11,11,11,.05); }
/* 아래로 갈수록 흰색으로 녹여 "계속 이어진다"는 인상을 준다(시안 load/fade) */
.pj-more::before { content: ''; position: absolute; left: -20px; right: -20px; top: 60px; height: 220px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%); pointer-events: none; }
.pj-more-bar { position: relative; z-index: 1; width: 120px; height: 2px; margin: 116px auto 0;
    border-radius: 1px; background: rgba(11,11,11,.1); overflow: hidden; }
.pj-more-bar i { display: block; width: 44px; height: 100%; border-radius: 1px; background: #1B4DFF; }
.pj-more.is-loading .pj-more-bar i { animation: pjMore 1.1s ease-in-out infinite; }
@keyframes pjMore { 0% { transform: translateX(-44px); } 100% { transform: translateX(120px); } }
.pj-more-txt { position: relative; z-index: 1; margin-top: 18px; text-align: center;
    font-size: 13px; letter-spacing: -0.02em; color: #4A5261; }

.pj-paging { margin-top: 64px; text-align: center; }
.pj-paging[hidden] { display: none; }

@media screen and (max-width: 1250px) {
    .pj-hero { padding-top: 120px; }
    .pj-hero .inner { padding-bottom: 64px; }
    .pj-lead { margin-top: 46px; }
    .pj-index { padding: 60px 0 90px; }
    .pj-cats { flex: 0 0 240px; }
    .pj-cat { font-size: 30px; line-height: 48px; }
}
@media screen and (max-width: 950px) {
    /* 세로 카테고리는 좌우 2단일 때만 성립한다 — 접히면 가로 스크롤 탭으로 바꾼다 */
    .pj-hero { padding-top: 104px; }
    .pj-hero .inner { flex-direction: column; gap: 0; padding-bottom: 44px; }
    .pj-lead { margin-top: 24px; max-width: none; text-align: left; }
    .pj-lead br { display: none; }
    .pj-body { display: block; }
    .pj-cats { position: static; display: flex; flex-direction: row; gap: 18px; margin-bottom: 36px;
        overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .pj-cats::-webkit-scrollbar { display: none; }
    .pj-cat { flex: 0 0 auto; padding: 0; line-height: 34px; font-size: 20px; }
    .pj-cat.is-on::before { display: none; }
    .pj-grid { gap: 22px 16px; }
    .pj-cell { flex: 0 0 calc((100% - 16px) / 2); }
    /* 좌측 카테고리가 위로 빠지므로 로딩 존의 들여쓰기도 푼다 */
    .pj-more { margin-left: 0; }
    .pj-skel { gap: 16px; }
    .pj-skel span:nth-child(3) { display: none; }
    .pj-more-bar { margin-top: 96px; }
}
@media screen and (max-width: 650px) {
    .pj-index { padding: 44px 0 70px; }
    .pj-cat { font-size: 17px; }
    .pj-cell { flex: 0 0 100%; }
    .pj-skel span:nth-child(2) { display: none; }
}

/* ============================================================
   INSIGHT 목록 (Figma "[JOB] 인사이트 — B 타임라인 인덱스" #497:2, 1920×3068)
   히어로(390, .pj-hero 공용) → 탭 줄 → 한 줄 한 글 타임라인 인덱스 → CTA → 푸터.
   모션은 "[JOB] 인사이트 목록 — 모션 정의" #501:2 — 커서를 따라오는 A4 포스터.
   ⚠ .board-section / .insight-list 는 공용·구버전 클래스라 .ins-* 로 새로 팠다.
============================================================ */
/* 시안 hero/rule 은 1920 풀폭 — 포트폴리오처럼 inner 안에 긋지 않는다 */
.ins-hero { border-bottom: 1px solid rgba(11,11,11,.08); }
.ins-hero .inner { border-bottom: 0; }

.ins-index { padding: 0 0 54px; background: #fff; }

/* 탭 줄 — 트랙 #F2F4F8 h60 r30, 활성 #1B4DFF h48 r24. 아래 1920 풀폭 1px 선(tab-rule) */
.ins-tabbar { padding: 48px 0 28px; border-bottom: 1px solid rgba(11,11,11,.08); }
.ins-tabbar .inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ins-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 30px; background: #F2F4F8; }
.ins-tab { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border-radius: 24px;
    font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: rgba(11,11,11,.55); white-space: nowrap;
    transition: background .25s, color .25s, box-shadow .25s; }
.ins-tab.en { font-family: 'Archivo', 'Space Grotesk', sans-serif; }
.ins-tab:hover { color: #0B0B0B; }
.ins-tab.is-on { background: #1B4DFF; color: #fff; box-shadow: 0 4px 12px -2px rgba(15,26,77,.28); }
.ins-count { flex-shrink: 0; font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: rgba(11,11,11,.4); }

/* 목록 머리 2px 선(list-top) — 행은 위아래 15px 여백 + 1px 구분선, 한 행 126px */
.ins-index .board-tools { display: flex; justify-content: flex-end; }
.ins-index .board-tools:empty { display: none; }
.ins-list { margin-top: 26px; border-top: 2px solid rgba(11,11,11,.5); }
.ins-row { position: relative; border-bottom: 1px solid rgba(11,11,11,.08);
    opacity: 0; transform: translateY(16px);
    transition: opacity .5s cubic-bezier(.45,0,.55,1), transform .5s cubic-bezier(.45,0,.55,1), background .25s;
    transition-delay: calc(var(--ins-i, 0) * .05s), calc(var(--ins-i, 0) * .05s), 0s; }
.ins-row.is-in { opacity: 1; transform: none; }
.ins-row .item-chk { position: absolute; z-index: 2; left: -34px; top: 50%; transform: translateY(-50%); }
.ins-link { display: flex; align-items: center; gap: 28px; padding: 15px 8px 15px 0; color: #0B0B0B; }

/* 68×96 포스터 썸네일 — 진입 시 scale .94 → 1 로 살짝 늦게 붙는다 */
.ins-thumb { position: relative; flex: 0 0 68px; height: 96px; border-radius: 3px; overflow: hidden; background: #F2F4F8;
    transform: scale(.94); transition: transform .6s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--ins-i, 0) * .05s + .08s); }
.ins-row.is-in .ins-thumb { transform: none; }
.ins-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-thumb.is-poster { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 25px 5px 0; text-align: center; color: #fff; }
.ins-thumb.is-poster::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 40px;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }
.ins-thumb.is-poster b { position: relative; font-size: 7.5px; font-weight: 700; line-height: 1.48; letter-spacing: -0.03em; word-break: keep-all; }
.ins-thumb.is-poster i { position: absolute; left: 20px; top: 63px; width: 27px; height: 1px; background: rgba(255,255,255,.5); }
.ins-thumb.is-poster em { position: absolute; left: 0; top: 75px; width: 100%; font-style: normal;
    font-family: 'Archivo', sans-serif; font-size: 4.5px; font-weight: 500; letter-spacing: .06em; color: rgba(255,255,255,.7); }

.ins-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ins-meta { display: flex; align-items: center; gap: 18px; }
.ins-no { min-width: 16px; font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgba(11,11,11,.3); transition: color .25s; }
.ins-cat { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px;
    background: rgba(27,77,255,.08); border: 1px solid rgba(27,77,255,.28);
    font-size: 11px; font-weight: 600; letter-spacing: -0.01em; color: #1B4DFF; white-space: nowrap; }
.ins-tit { margin-top: 13px; font-size: 22px; font-weight: 700; line-height: 26px; letter-spacing: -0.03em; color: #0B0B0B;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .25s; }
.ins-ex { margin-top: 8px; max-width: 840px; font-size: 13px; line-height: 16px; letter-spacing: -0.02em; color: rgba(74,82,97,.9);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 오른쪽 — 화살표 원은 행 가운데 */
.ins-side { position: relative; flex: 0 0 232px; align-self: stretch; }
.ins-go { position: absolute; right: 0; top: 50%; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; border: 1px solid rgba(11,11,11,.14);
    font-size: 13px; font-weight: 700; color: rgba(11,11,11,.5);
    transition: background .25s cubic-bezier(.22,1,.36,1), border-color .25s, color .25s, transform .25s cubic-bezier(.22,1,.36,1); }

/* 행 hover — 배경 코발트 4%, 제목 #1B4DFF, 번호 불투명, 화살표 원 코발트 채움 + scale 1.08 */
.ins-row:hover { background: rgba(27,77,255,.04); }
.ins-row:hover .ins-tit { color: #1B4DFF; }
.ins-row:hover .ins-no { color: #0B0B0B; }
.ins-row:hover .ins-go { background: #1B4DFF; border-color: #1B4DFF; color: #fff; transform: scale(1.08); }

.ins-empty { padding: 120px 0; text-align: center; font-size: 15px; color: rgba(11,11,11,.45); }

/* 로딩 존 — 트랙 120×2 + 44px 인디케이터, 불러오는 중에만 1.2s 왕복 */
.ins-more { display: flex; flex-direction: column; align-items: center; padding-top: 54px; }
.ins-more[hidden] { display: none; }
.ins-more-bar { position: relative; width: 120px; height: 2px; border-radius: 1px; background: rgba(11,11,11,.1); overflow: hidden; }
.ins-more-bar i { position: absolute; left: 0; top: 0; width: 44px; height: 100%; border-radius: 1px; background: #1B4DFF; }
.ins-more.is-loading .ins-more-bar i { animation: insBar 1.2s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes insBar { from { transform: translateX(0); } to { transform: translateX(76px); } }
.ins-more-txt { margin-top: 16px; font-size: 13px; letter-spacing: -0.02em; color: #4A5261; }
.ins-index .paging_box[hidden] { display: none; }

/* 커서를 따라오는 A4 포스터 — 폭 240(높이 340), r3, 그림자 0/24/52/-12. 위치·회전은 JS 가 transform 으로만 옮긴다 */
.ins-preview { position: fixed; z-index: 90; left: 0; top: 0; width: 240px; height: 340px; border-radius: 3px; overflow: hidden;
    pointer-events: none; opacity: 0; background: #F2F4F8; box-shadow: 0 24px 52px -12px rgba(11,11,11,.45); will-change: transform, opacity; }
.ins-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .ins-preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ins-row, .ins-thumb { opacity: 1; transform: none; transition: background .25s; }
}

@media screen and (max-width: 1250px) {
    .ins-side { flex-basis: 150px; }
}
@media screen and (max-width: 950px) {
    .ins-tabbar { padding: 36px 0 22px; }
    .ins-tabbar .inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .ins-tabs { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .ins-tabs::-webkit-scrollbar { display: none; }
    .ins-link { gap: 20px; }
    .ins-side { flex-basis: 44px; }
}
/* 모바일 — 소형 썸네일은 좌측 유지, 제목 18px, 요약 1줄 */
@media screen and (max-width: 650px) {
    .ins-tab { height: 40px; padding: 0 18px; font-size: 13px; }
    .ins-list { margin-top: 18px; }
    .ins-link { gap: 16px; padding: 14px 0; }
    .ins-thumb { flex-basis: 56px; height: 79px; }
    .ins-meta { gap: 10px; }
    .ins-tit { margin-top: 9px; font-size: 18px; line-height: 24px; }
    .ins-ex { margin-top: 6px; font-size: 12.5px; }
    .ins-side { display: none; }
}

/* ==========================================================================
   CONTACT — Figma [JOB] 컨택트 페이지 #514:2
   좌측 720(37.5%) 소개 패널은 sticky 로 스크롤을 따라오고, 우측은 01~07 질문 폼.
   ========================================================================== */
.ct { background: #07080F; color: #fff; }
.ct .pj-progress { background: rgba(255,255,255,.09); }
.ct .en { font-family: 'Archivo', 'Space Grotesk', sans-serif; }
.ct-wrap { display: flex; align-items: stretch; }

/* 좌·우 바깥 여백을 공통 .inner(min(92%, 1560px))의 좌우 끝과 맞춘다.
   패딩 % 는 부모(.ct-wrap = 화면 폭) 기준이라 4% = (100% - 92%) / 2 */
.ct-side, .ct-main { --ct-gut: max(4%, calc((100% - 1560px) / 2)); }

/* 좌측 — 배경 그라디언트는 패널 전체, 내용만 sticky. top 은 JS 가 패널 높이에 맞춰 --ct-top 으로 준다 */
.ct-side { position: relative; flex: 0 0 37.5%; padding: 160px 0 80px var(--ct-gut); border-right: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(180deg, #0E1430 0%, #090C1C 55%, #07080F 100%); }
.ct-side-in { position: sticky; top: var(--ct-top, 120px); padding-right: 60px; }
.ct-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: #5B9BFF; }
.ct-title { margin-top: 22px; font-size: 52px; font-weight: 700; line-height: 1.27; letter-spacing: -0.04em; color: #fff; }
.ct-title em { font-style: normal; color: #5B9BFF; }
.ct-desc { margin-top: 48px; font-size: 17px; line-height: 1.9; letter-spacing: -0.02em; color: rgba(255,255,255,.55); }
.ct-head { margin-top: 72px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: #5B9BFF; }
.ct-head + .ct-direct { margin-top: 18px; }
.ct-info + .ct-head { margin-top: 40px; }
.ct-info { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.ct-info .row { display: flex; padding: 17px 0; }
.ct-info .row + .row { border-top: 1px solid rgba(255,255,255,.08); }
.ct-info dt { flex: 0 0 104px; padding-top: 2px; font-size: 13px; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,.4); }
.ct-info dd { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; color: rgba(255,255,255,.95); }
.ct-info dd > a { transition: color .2s; }
.ct-info dd > a:hover { color: #5B9BFF; }
.ct-map { display: flex; width: max-content; align-items: center; gap: 8px; height: 34px; margin-top: 12px; padding: 0 14px;
    border: 1px solid rgba(91,155,255,.45); border-radius: 3px; background: rgba(255,255,255,.07);
    font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: rgba(255,255,255,.92); transition: background .25s, border-color .25s; }
.ct-map:hover { background: rgba(27,77,255,.25); border-color: #5B9BFF; }
.ct-direct li { border-top: 1px solid rgba(255,255,255,.1); }
.ct-direct li:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.ct-direct a { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; }
.ct-direct b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,.95); transition: color .25s; }
.ct-direct span { display: flex; align-items: center; gap: 12px; font-size: 12.5px; letter-spacing: -0.02em; color: rgba(255,255,255,.4); }
.ct-direct svg { color: #5B9BFF; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.ct-direct a:hover b { color: #5B9BFF; }
.ct-direct a:hover svg { transform: translate(2px,-2px); }
.ct-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 56px; }
.ct-pager p { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.35); }
.ct-pager b { font-size: 30px; letter-spacing: -0.03em; color: #5B9BFF; }
.ct-pager-bar { position: relative; width: 218px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.ct-pager-bar i { position: absolute; left: 0; top: 0; width: 14.2857%; height: 100%; border-radius: 2px; background: #1B4DFF;
    transition: width .45s cubic-bezier(.22,1,.36,1); }

/* 우측 — 번호 칼럼 72 + 폼 808 */
.ct-main { flex: 1; min-width: 0; padding: 148px var(--ct-gut) 78px 6.25%; }
.ct-form { max-width: none; }
.ct-qs { position: relative; margin: 0; padding: 0; list-style: none; }
.ct-qs::before { content: ''; position: absolute; left: 13px; top: 36px; bottom: 30px; width: 1px; background: rgba(255,255,255,.12); }
.ct-q { position: relative; padding-left: 72px; }
.ct-q + .ct-q { margin-top: 64px; }
.ct-no { position: absolute; z-index: 1; left: 0; top: 2px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: 1px solid rgba(255,255,255,.18); border-radius: 3px; background: #13151E;
    font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.5); transition: background .3s, border-color .3s, color .3s; }
.ct-en { font-size: 10px; font-weight: 600; letter-spacing: .1em; color: rgba(91,155,255,.55); transition: color .3s; }
.ct-q.on .ct-no { background: #1B4DFF; border-color: #1B4DFF; color: #fff; }
.ct-q.on .ct-en { color: #5B9BFF; }
.ct-t { margin-top: 9px; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; color: #fff; }
.ct-s { margin-top: 8px; font-size: 12.5px; letter-spacing: -0.02em; color: rgba(255,255,255,.4); }
.ct-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin-top: 24px; }
.ct-s + .ct-fields, .ct-s + .ct-opts { margin-top: 22px; }
.ct-fields .full { grid-column: 1 / -1; }
.ct-fields input, .ct-fields textarea { width: 100%; height: 56px; padding: 0 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 3px;
    background: rgba(255,255,255,.05); font-family: inherit; font-size: 14px; letter-spacing: -0.02em; color: #fff; transition: border-color .25s, background .25s; }
.ct-fields textarea { height: 150px; padding: 16px 18px; line-height: 1.8; resize: vertical; }
.ct-fields input::placeholder, .ct-fields textarea::placeholder { color: rgba(255,255,255,.35); }
.ct-fields input:focus, .ct-fields textarea:focus { outline: none; border-color: #5B9BFF; background: rgba(255,255,255,.07); }
.ct-fields .editor-wrap { background: #fff; border-radius: 3px; overflow: hidden; color: #222; }

/* 선택지 — 네모 체크 + 선택되면 코발트 채움 (.is-on 은 JS) */
.ct-opts { display: grid; gap: 12px; margin-top: 24px; }
.ct-opts.c2 { grid-template-columns: repeat(2, 1fr); }
.ct-opts.c3 { grid-template-columns: repeat(3, 1fr); }
.ct-opts.c4 { grid-template-columns: repeat(4, 1fr); }
.ct-opt { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.16); border-radius: 3px; background: rgba(255,255,255,.05); transition: background .25s, border-color .25s; }
.ct-opt input, .ct-agree input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ct-opt i, .ct-agree i { flex: none; width: 12px; height: 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 2px;
    background: transparent center / 8px no-repeat; transition: background-color .25s, border-color .25s; }
.ct-opt span { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,.8); transition: color .25s; }
.ct-opt:hover { border-color: rgba(91,155,255,.6); }
.ct-opt:focus-within { outline: 2px solid rgba(91,155,255,.5); outline-offset: 2px; }
.ct-opt.is-on { background: #1B4DFF; border-color: #1B4DFF; }
.ct-opt.is-on i { border-color: #fff; background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' fill='none' stroke='%231B4DFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3l2 2 4-4'/%3E%3C/svg%3E"); }
.ct-opt.is-on span { color: #fff; }

.ct-file { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.ct-file-btn { flex: none; width: 170px; height: 44px; border: 1px dashed rgba(255,255,255,.2); border-radius: 3px; background: none; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,.75); transition: border-color .25s, color .25s; }
.ct-file-btn span { margin-left: 6px; }
.ct-file-btn:hover { border-color: #5B9BFF; color: #fff; }
.ct-file-s { min-width: 0; font-size: 11.5px; letter-spacing: -0.01em; color: rgba(255,255,255,.3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-file.has-file .ct-file-s { color: rgba(255,255,255,.7); }

.ct-agree { display: flex; align-items: center; gap: 12px; margin: 62px 0 0 72px; }
.ct-agree label { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ct-agree i { width: 18px; height: 18px; border-color: rgba(255,255,255,.3); border-radius: 3px; background-color: rgba(255,255,255,.06); background-size: 10px; }
.ct-agree input:checked + i { border-color: #1B4DFF; background-color: #1B4DFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3l2 2 4-4'/%3E%3C/svg%3E"); }
.ct-agree input:focus-visible + i { outline: 2px solid rgba(91,155,255,.5); outline-offset: 2px; }
.ct-agree span { font-size: 13px; letter-spacing: -0.02em; color: rgba(255,255,255,.7); }
.ct-agree a { font-size: 13px; letter-spacing: -0.02em; color: #5B9BFF; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(91,155,255,.6); }
.ct-submit { position: relative; display: block; width: calc(100% - 72px); height: 72px; margin: 42px 0 0 72px; border: 0; border-radius: 3px; cursor: pointer;
    background: linear-gradient(90deg, rgba(27,77,255,.8) 0%, rgba(91,75,224,.8) 50%, rgba(155,92,255,.8) 100%);
    font-family: inherit; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: #fff; transition: filter .25s; }
.ct-submit span { position: absolute; right: 32px; top: 50%; margin-top: -12px; font-size: 18px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.ct-submit:hover { filter: brightness(1.15); }
.ct-submit:hover span { transform: translateX(6px); }
.ct-submit:disabled { opacity: .6; cursor: default; }

@media screen and (max-width: 1250px) {
    .ct-side { flex-basis: 40%; }
    .ct-side-in { padding-right: 32px; }
    .ct-title { font-size: 42px; }
    .ct-main { padding: 148px var(--ct-gut) 78px 48px; }
    .ct-opts.c4 { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 950px) {
    .ct-wrap { display: block; }
    .ct-side { padding: 120px var(--ct-gut) 56px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .ct-side-in { position: static; padding: 0; }
    .ct-desc { margin-top: 28px; }
    .ct-head { margin-top: 48px; }
    .ct-pager { display: none; }
    .ct-main { padding: 56px var(--ct-gut) 80px; }
}
@media screen and (max-width: 650px) {
    /* 공통 .inner 가 650 이하에서 좌우 5vw 패딩으로 바뀌는 것과 맞춘다 */
    .ct-side, .ct-main { --ct-gut: 5vw; }
    .ct-title { font-size: 34px; }
    .ct-desc { font-size: 15px; }
    .ct-q { padding-left: 44px; }
    .ct-q + .ct-q { margin-top: 48px; }
    .ct-t { font-size: 19px; }
    .ct-fields { grid-template-columns: 1fr; gap: 10px; }
    .ct-opts.c3, .ct-opts.c4 { grid-template-columns: repeat(2, 1fr); }
    .ct-opts.c2 { grid-template-columns: 1fr; }
    .ct-opt { gap: 8px; padding: 0 12px; }
    .ct-opt span { font-size: 13px; }
    .ct-file { flex-wrap: wrap; gap: 10px; }
    .ct-agree { margin: 44px 0 0; flex-wrap: wrap; }
    .ct-submit { width: 100%; height: 60px; margin: 28px 0 0; font-size: 16px; }
}

/* ==========================================================================
   SERVICE — Figma [JOB] 제작 서비스 페이지 #566:2
   히어로는 포트폴리오 .pj-hero 를 그대로 쓴다. 이 아래는 챕터별 .sv-* 블록.
   ========================================================================== */
.page-service { background: #fff; color: #0B0B0B; }
.page-service .en { font-family: 'Archivo', 'Space Grotesk', sans-serif; }
.sv-hero .inner { border-bottom: 0; }
.sv-ch { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .12em; color: rgba(11,11,11,.45); }
.sv-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.sv-h2 { margin-top: 19px; font-size: 46px; font-weight: 700; line-height: 1.2; letter-spacing: -0.05em; word-break: keep-all; }
.sv-h2.is-lg { font-size: 48px; }
.sv-head-d { flex: 0 0 auto; max-width: 500px; text-align: right; font-size: 15px; line-height: 1.9; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }

/* ── CH01 한 팀 — 위: 카피 + 사진(2:3) / 아래: 방법론 + 아이콘 목록 ── */
.sv-ch1 { padding: 110px 0 74px; border-top: 1px solid rgba(11,11,11,.08); background: linear-gradient(180deg, #EEF1F6 0%, #fff 100%); }
.sv-ch1-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; align-items: start; }
.sv-ch1-title { margin: 21px 0 0 -6px; font-size: 44px; font-weight: 700; line-height: 1.32; letter-spacing: -0.05em; }
.sv-ch1-desc { margin-top: 42px; max-width: 420px; font-size: 14.5px; line-height: 1.95; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
.sv-ch1-img { overflow: hidden; border-radius: 5px; aspect-ratio: 720 / 400; background: #E3E8F2; }
.sv-ch1-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sv-ch1-method { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; margin-top: 56px; }
.sv-ch1-mtitle { margin: 23px 0 0 -6px; font-size: 40px; font-weight: 700; line-height: 1.38; letter-spacing: -0.05em; }
/* 좌측 세로선(시안 ch1/vr) — 아이콘 열과 60px 띄운다 */
.sv-ch1-list { position: relative; padding: 14px 0 66px 60px; border-left: 1px solid rgba(11,11,11,.16); }
.sv-ico-row { display: flex; gap: 16px; align-items: flex-start; }
.sv-ico-row + .sv-ico-row { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(11,11,11,.12); }
/* 진입 — 섹션 top 75% 에서 순서대로(js 가 .is-in). scale .8 → 1, rotateY -40° → 0, 0.7s expo.out */
.sv-ico { flex: none; width: 44px; height: 44px; margin-top: 6px; overflow: visible;
    opacity: 0; transform: perspective(240px) rotateY(-40deg) scale(.8);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.sv-ico.is-in { opacity: 1; transform: none; }
.sv-ico path, .sv-ico circle, .sv-ico ellipse { transition: stroke-width .4s; }
.sv-ico-row:hover .sv-ico path, .sv-ico-row:hover .sv-ico circle, .sv-ico-row:hover .sv-ico ellipse { stroke-width: 1.6; }
.sv-ch1-item { flex: 1; min-width: 0; }
.sv-ch1-item h4 { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; }
.sv-ch1-item p { margin-top: 10px; max-width: 560px; font-size: 13.5px; line-height: 1.9; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }

/* ── CH02 구축 유형 — 섹션 높이 = pin 높이 + 가로 이동 거리(js). pin 이 붙어 있는 동안 track 이 옆으로 흐른다 ── */
.sv-types { position: relative; background: #fff; }
.sv-types-pin { position: sticky; top: 0; display: flex; align-items: center; min-height: 100vh; padding: 110px 0 80px; overflow: hidden; }
.sv-types-pin > .inner { display: grid; grid-template-columns: 400px minmax(0, 1fr); align-items: start; }
.sv-types-head { position: relative; z-index: 2; }
.sv-types-title { margin: 21px 0 0 -2px; font-size: 76px; font-weight: 700; line-height: 1.2; letter-spacing: -0.05em; }
.sv-types-count { margin-top: 40px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: rgba(11,11,11,.35); }
.sv-types-count b { color: #1B4DFF; }
/* 왼쪽은 잘라서 제목 밑으로 카드가 파고들지 않게, 오른쪽은 화면 끝까지 흘러넘친다 */
.sv-types-view { min-width: 0; clip-path: inset(-40px -100vw -40px 0); }
.sv-types-track { display: flex; margin: 0; padding: 0; list-style: none; will-change: transform; }
.sv-type { position: relative; flex: 0 0 290px; }
.sv-type + .sv-type { margin-left: 30px; }
.sv-type + .sv-type::before { content: ''; position: absolute; left: -15px; top: 0; bottom: 0; width: 1px; background: rgba(11,11,11,.12); }
.sv-type.ani { transition-delay: calc(var(--i) * .08s); }
.sv-type-top { position: relative; display: flex; align-items: center; gap: 9px; padding-top: 11px; border-top: 1px solid rgba(11,11,11,.5);
    font-size: 11px; font-weight: 600; letter-spacing: -0.01em; color: rgba(11,11,11,.5); }
.sv-type-top .mm { width: 9px; height: 9px; border: 1px solid rgba(11,11,11,.5); }
.sv-type-top b { margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; color: #1B4DFF; }
.sv-type-t { margin-top: 24px; font-size: 23px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; }
.sv-type-b { margin-top: 32px; max-width: 280px; min-height: 86px; font-size: 12px; line-height: 1.8; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
.sv-type-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid rgba(11,11,11,.12); }
.sv-type-n { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; }
.sv-type-s { margin-top: 8px; font-size: 11px; line-height: 1.7; letter-spacing: -0.01em; color: rgba(27,77,255,.85); }
.sv-type-illu { margin-top: 21px; overflow: hidden; border-radius: 6px; aspect-ratio: 290 / 200; background: #EEF2FA; }
.sv-type-illu img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.sv-type:hover .sv-type-illu img { transform: scale(1.04); }

/* ── CH03 + CH04 공용 배경 밴드 ── */
.sv-band { background: linear-gradient(180deg, #F4F6FC 0%, #EBEFF9 100%); padding-bottom: 100px; }

/* CH03 고민 카드 */
.sv-worry { padding: 100px 0 54px; }
.sv-worry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 21px; margin: 50px 0 0; padding: 0; list-style: none; }
.sv-worry-card { position: relative; display: flex; flex-direction: column; min-height: 240px; padding: 22px 26px 26px;
    border: 1.5px solid rgba(11,11,11,.16); border-radius: 14px; background: #fff; transition: border-color .3s, box-shadow .3s; }
.sv-worry-card.ani { transition-delay: calc(var(--i) * .06s); }
.sv-worry-card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.sv-worry-card .badge { display: inline-flex; align-items: center; height: 26px; padding: 0 14px; border-radius: 13px; background: #0B0B0B;
    font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.sv-worry-card .role { margin-top: 20px; font-size: 11.5px; letter-spacing: -0.01em; color: rgba(74,82,97,.8); }
.sv-worry-card .tit { margin: 10px 0 24px; font-size: 19px; font-weight: 700; line-height: 1.58; letter-spacing: -0.03em; word-break: keep-all; }
.sv-worry-card .track { position: relative; height: 5px; margin-top: auto; }
.sv-worry-card .track::before { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: rgba(11,11,11,.14); }
.sv-worry-card .track::after { content: ''; position: absolute; right: 0; top: 0; width: 5px; height: 5px; border-radius: 3px; background: rgba(11,11,11,.3); transition: background .3s; }
.sv-worry-card .track i { position: absolute; left: 0; top: 2px; width: 5px; height: 1px; background: #1B4DFF; transition: width .6s cubic-bezier(.22,1,.36,1); }
.sv-worry-card .track i::before { content: ''; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 3px; background: #1B4DFF; }
.sv-worry-card .foot { display: flex; justify-content: space-between; margin-top: 11px; font-size: 10.5px; letter-spacing: -0.01em; }
.sv-worry-card .key { color: #1B4DFF; }
.sv-worry-card .cat { color: rgba(11,11,11,.4); }
/* hover — 고민(왼쪽 점)에서 해결(오른쪽 점)까지 선이 이어진다 */
.sv-worry-card:hover { border-color: rgba(27,77,255,.45); box-shadow: 0 14px 34px -12px rgba(15,26,77,.18); }
.sv-worry-card:hover .track i { width: 100%; }
.sv-worry-card:hover .track::after { background: #1B4DFF; transition-delay: .4s; }
.sv-worry-note { margin-top: 36px; font-size: 13px; letter-spacing: -0.02em; color: rgba(74,82,97,.85); }

/* CH04 기본 포함 — 좌우 100px(1920 기준) 띄운 다크 박스 r100 */
.sv-basic { position: relative; overflow: hidden; margin: 0 5.2%; padding: 78px 0 54px; border-radius: 100px; color: #fff; text-align: center;
    background: linear-gradient(135deg, #12172E 10%, #0A0D1C 54%, #07080F 90%); }
.sv-basic-glow { position: absolute; left: 50%; top: 40px; width: 800px; height: 620px; margin-left: -400px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(27,77,255,.22) 0%, rgba(27,77,255,0) 70%); filter: blur(60px); pointer-events: none; }
.sv-basic .inner { position: relative; z-index: 1; }
.sv-basic-ch { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: rgba(255,255,255,.45); }
.sv-basic-sub { margin-top: 31px; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; }
.sv-basic-intro { margin-top: 19px; font-size: 14px; line-height: 1.9; letter-spacing: -0.02em; color: rgba(255,255,255,.45); word-break: keep-all; }
.sv-basic-st { margin-top: 56px; font-size: 46px; font-weight: 700; line-height: 1.5; letter-spacing: -0.04em; word-break: keep-all; }
.sv-basic-st em { font-style: normal; color: #5B9BFF; }
.sv-basic-cap { margin-top: 23px; font-size: 13.5px; letter-spacing: -0.02em; color: rgba(255,255,255,.4); }
.sv-basic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 64px 0 0; padding: 0; list-style: none; text-align: left; }
.sv-basic-box { min-height: 230px; padding: 34px 28px 28px; border-radius: 14px; background: #fff; color: #0B0B0B; }
.sv-basic-box.ani { transition-delay: calc(var(--i) * .08s); }
.sv-basic-box .n { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: #1B4DFF; }
.sv-basic-box h3 { margin-top: 17px; font-size: 21px; font-weight: 700; line-height: 1.45; letter-spacing: -0.03em; }
.sv-basic-box p { margin-top: 30px; font-size: 12.5px; line-height: 1.8; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
.sv-basic-box p b, .sv-step .card p b { font-weight: 600; color: #1B4DFF; }
.sv-basic-more { margin-top: 30px; font-size: 13px; letter-spacing: -0.02em; color: rgba(255,255,255,.35); }

/* ── CH05 배포 이후 — 큰 그라디언트 숫자 위에 흰 카드가 겹친다 ── */
.sv-after { padding: 100px 0 0; background: #fff; }
.sv-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 88px 0 0; padding: 0; list-style: none; }
.sv-step { position: relative; padding-left: 69px; }
.sv-step.ani { transition-delay: calc(var(--i) * .1s); }
.sv-step .num { position: absolute; left: -8px; top: 30px; font-size: 150px; font-weight: 700; line-height: 1.09; letter-spacing: -0.08em;
    background: linear-gradient(180deg, #D7E0FF 0%, #6179CF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-step .card { position: relative; min-height: 330px; padding: 94px 20px 30px 40px; border-left: 1px solid rgba(27,77,255,.3); background: #fff; }
.sv-step .card h3 { font-size: 20px; font-weight: 700; letter-spacing: .22em; }
.sv-step .card p { margin-top: 24px; max-width: 200px; font-size: 12.5px; line-height: 1.9; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
.sv-after-end { position: relative; padding: 64px 0 30px; text-align: center; }
.sv-after-end .glow { position: absolute; left: 50%; top: 30px; width: 760px; height: 340px; margin-left: -380px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(217,226,255,.85) 0%, rgba(217,226,255,0) 70%); filter: blur(45px); pointer-events: none; }
.sv-after-end .stem { position: relative; display: block; width: 1px; height: 44px; margin: 0 auto; background: linear-gradient(180deg, rgba(27,77,255,0), #1B4DFF); }
.sv-after-end .dot { position: relative; display: block; width: 8px; height: 8px; margin: 4px auto 0; border-radius: 50%; background: #1B4DFF; }
.sv-after-end .t { position: relative; margin-top: 22px; font-size: 28px; font-weight: 700; letter-spacing: -0.04em; }
.sv-after-end .s { position: relative; margin-top: 22px; font-size: 14px; letter-spacing: -0.02em; color: rgba(74,82,97,.9); word-break: keep-all; }
.sv-after-end .dot2 { position: relative; display: block; width: 6px; height: 6px; margin: 23px auto 0; border-radius: 50%; background: rgba(27,77,255,.35); }

/* ── 이어서 보기 ── */
.sv-next { padding: 80px 0 100px; background: #fff; }
.sv-next-label { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: #1B4DFF; }
.sv-next-title { margin-top: 20px; font-size: 36px; font-weight: 700; letter-spacing: -0.04em; }
.sv-next-list { margin: 39px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(11,11,11,.12); border-bottom: 2px solid rgba(11,11,11,.4); }
.sv-next-list li + li { border-top: 1px solid rgba(11,11,11,.12); }
.sv-next-list a { display: grid; grid-template-columns: 20% 25% minmax(0, 1fr) auto; align-items: center; height: 66px; }
.sv-next-list .e { font-size: 15px; font-weight: 500; letter-spacing: -0.02em; color: rgba(11,11,11,.3); transition: color .25s; }
.sv-next-list .k { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; transition: color .25s; }
.sv-next-list .d { font-size: 13px; letter-spacing: -0.02em; color: #4A5261; }
.sv-next-list .a { font-size: 16px; font-weight: 700; color: #1B4DFF; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.sv-next-list a:hover .k, .sv-next-list a:hover .e { color: #1B4DFF; }
.sv-next-list a:hover .a { transform: translateX(6px); }

@media screen and (max-width: 1250px) {
    .sv-ch1-title { font-size: 38px; }
    .sv-ch1-mtitle { font-size: 34px; }
    .sv-types-pin > .inner { grid-template-columns: 300px minmax(0, 1fr); }
    .sv-types-title { font-size: 60px; }
    .sv-worry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-basic { border-radius: 60px; }
    .sv-basic-st { font-size: 36px; }
    .sv-basic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* CH05 는 961px 이상에서 1행 4열 유지 — 칸이 좁아지는 만큼 숫자·카드 여백을 줄인다 */
    .sv-flow { gap: 16px; }
    .sv-step { padding-left: 44px; }
    .sv-step .num { font-size: 110px; }
    .sv-step .card { min-height: 300px; padding: 80px 14px 26px 22px; }
    .sv-step .card h3 { font-size: 18px; letter-spacing: .12em; }
}
@media screen and (max-width: 960px) {
    .sv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
    .sv-step { padding-left: 69px; }
    .sv-step .num { font-size: 150px; }
    .sv-step .card { min-height: 330px; padding: 94px 20px 30px 40px; }
    .sv-step .card h3 { font-size: 20px; letter-spacing: .22em; }
}
@media screen and (max-width: 950px) {
    .sv-hd { flex-direction: column; align-items: flex-start; gap: 18px; }
    .sv-head-d { text-align: left; }
    .sv-head-d br { display: none; }
    .sv-h2, .sv-h2.is-lg { font-size: 34px; }
    .sv-ch1 { padding: 80px 0 60px; }
    .sv-ch1-top, .sv-ch1-method { grid-template-columns: 1fr; gap: 36px; }
    .sv-ch1-desc { max-width: none; }
    .sv-ch1-list { padding: 0; border-left: 0; }
    /* 가로 흐름은 끄고 손가락으로 넘기는 가로 스크롤로 바꾼다 */
    .sv-types { height: auto !important; }
    .sv-types-pin { position: static; display: block; min-height: 0; padding: 80px 0; }
    .sv-types-pin > .inner { display: block; }
    .sv-types-title { font-size: 46px; }
    .sv-types-count { display: none; }
    .sv-types-view { clip-path: none; margin: 36px -4vw 0; padding: 0 4vw; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .sv-types-view::-webkit-scrollbar { display: none; }
    .sv-types-track { transform: none !important; width: max-content; }
    .sv-type { flex-basis: 260px; }
    .sv-band { padding-bottom: 60px; }
    .sv-worry { padding: 80px 0 44px; }
    .sv-basic { margin: 0 4vw; padding: 60px 0 44px; border-radius: 36px; }
    .sv-basic-st { font-size: 28px; }
    .sv-basic-st br, .sv-basic-intro br { display: none; }
    .sv-after { padding-top: 80px; }
    .sv-flow { margin-top: 50px; }
    .sv-next-list a { grid-template-columns: 30% minmax(0, 1fr) auto; }
    .sv-next-list .d { display: none; }
}
@media screen and (max-width: 650px) {
    .sv-ch1-title { font-size: 30px; }
    .sv-ch1-mtitle { font-size: 28px; }
    .sv-ico { width: 36px; height: 36px; }
    .sv-types-view { margin: 30px -5vw 0; padding: 0 5vw; }
    .sv-types-title { font-size: 38px; }
    .sv-worry-grid { grid-template-columns: 1fr; gap: 14px; }
    .sv-worry-card { min-height: 210px; }
    .sv-basic { margin: 0; border-radius: 28px; }
    .sv-basic-sub { font-size: 21px; }
    .sv-basic-st { font-size: 23px; }
    .sv-basic-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
    .sv-basic-box { min-height: 0; }
    .sv-basic-box p { margin-top: 16px; }
    .sv-flow { grid-template-columns: 1fr; row-gap: 24px; }
    .sv-step .num { font-size: 110px; top: 20px; }
    .sv-step .card { min-height: 0; padding: 60px 16px 26px 28px; }
    .sv-step .card p { max-width: none; }
    .sv-after-end .glow { width: 90vw; margin-left: -45vw; }
    .sv-after-end .t { font-size: 22px; }
    .sv-next-title { font-size: 28px; }
    .sv-next-list a { grid-template-columns: minmax(0, 1fr) auto; height: 58px; }
    .sv-next-list .e { display: none; }
    .sv-next-list .k { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-worry-card, .sv-worry-card .track i, .sv-type-illu img { transition: none; }
}

/* ============================================================
   SUPPORT(유지보수) — Figma "[JOB] 유지보수 페이지" #614:14 (1920×6465)
   접두어 mt- (maintenance). sv-ch / sv-hd / sv-h2 / sv-head-d / sv-next 는 서비스 페이지 것을 그대로 쓴다.
   ⚠ .sv- 는 메인 서비스 섹션과도 이름이 겹치므로 여기서 새로 만들지 않는다.
============================================================ */
.page-support { background: #fff; color: #0B0B0B; }
.page-support .en { font-family: 'Archivo', 'Space Grotesk', sans-serif; }
.mt-hero .inner { border-bottom: 0; }
.mt-ch { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .12em; color: rgba(11,11,11,.45); }
.mt-ch.is-c { text-align: center; }
.mt-ch.is-blue { color: #1B4DFF; }

/* ── CH01 같은 자리 — 풀블리드 사진 + 유리 띠 ── */
.mt-stay { position: relative; overflow: hidden; padding: 96px 0 84px; text-align: center; color: #fff; background: #050813; }
.mt-stay-bg { position: absolute; inset: 0; overflow: hidden; }
/* 배경 영상 + 그라디언트 스크림(영상 위) */
.mt-stay-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-stay-bg::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(5,8,19,.5) 0%, rgba(5,8,19,.2) 45%, rgba(5,8,19,0) 100%); }
.mt-stay .inner { position: relative; }
.mt-stay .mt-ch { color: rgba(255,255,255,.45); }
.mt-stay-pre { margin-top: 25px; font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: -0.05em; color: rgba(255,255,255,.34); word-break: keep-all; }
.mt-stay-title { margin-top: 11px; font-size: 52px; font-weight: 700; line-height: 1.2; letter-spacing: -0.05em; word-break: keep-all; }
.mt-stay-desc { max-width: 600px; margin: 28px auto 0; font-size: 16px; line-height: 1.95; letter-spacing: -0.02em; color: rgba(255,255,255,.72); word-break: keep-all; }
.mt-stay-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 72px 0 0; padding: 0; list-style: none; text-align: left;
    border-top: 2px solid rgba(255,255,255,.55); border-bottom: 1px solid rgba(255,255,255,.24);
    background: rgba(0,0,0,.1); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
.mt-stay-list li { position: relative; padding: 26px 40px 50px 20px; }
.mt-stay-list li:first-child { padding-left: 0; }
.mt-stay-list li + li::before { content: ''; position: absolute; left: 0; top: 19px; bottom: 20px; width: 1px; background: rgba(255,255,255,.22); }
.mt-stay-list .n { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #5B9BFF; }
.mt-stay-list h3 { margin-top: 14px; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.mt-stay-list p { max-width: 350px; margin-top: 14px; font-size: 13.5px; line-height: 1.9; letter-spacing: -0.02em; color: rgba(255,255,255,.62); word-break: keep-all; }
.mt-stay-note { margin-top: 39px; font-size: 13px; letter-spacing: -0.02em; color: rgba(255,255,255,.45); }

/* ── CH02 무상 / 별도 산정 카드 ── */
.mt-scope { padding: 100px 0; background: #fff; }
.mt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; margin-top: 73px; }
.mt-card { overflow: hidden; padding-bottom: 60px; border: 1px solid rgba(11,11,11,.1); border-radius: 4px; background: #fff; }
.mt-card.is-free { border-color: rgba(27,77,255,.3); box-shadow: 0 16px 40px -12px rgba(26,51,178,.09); }
.mt-card-head { height: 128px; padding: 34px 36px 0; background: #F5F7FB; }
.mt-card.is-free .mt-card-head { color: #fff; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(140,224,255,.22) 100%), #1B4DFF; }
.mt-card-head .t { display: flex; align-items: flex-start; gap: 16px; }
.mt-card-head .ic { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(11,11,11,.12); }
.mt-card-head .ic i { width: 11px; height: 2px; background: rgba(11,11,11,.38); }
.mt-card.is-free .mt-card-head .ic { border: 0; background: rgba(255,255,255,.2); color: #fff; }
.mt-card-head .ic svg { width: 12px; height: 9px; }
.mt-card-head .e { margin-top: 2px; font-size: 9.5px; font-weight: 600; line-height: 10px; letter-spacing: .12em; color: rgba(11,11,11,.4); }
.mt-card-head h3 { margin-top: 6px; font-size: 23px; font-weight: 700; line-height: 27px; letter-spacing: -0.04em; color: rgba(11,11,11,.82); }
.mt-card-head .b { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; padding-top: 9px; border-top: 1px solid rgba(11,11,11,.08); }
.mt-card-head .b span { font-size: 10.5px; line-height: 13px; letter-spacing: -0.01em; color: rgba(11,11,11,.38); }
.mt-card-head .b b { font-size: 12px; font-weight: 600; line-height: 14px; letter-spacing: -0.01em; color: rgba(11,11,11,.62); }
.mt-card.is-free .mt-card-head .e { color: rgba(255,255,255,.75); }
.mt-card.is-free .mt-card-head h3 { color: #fff; }
.mt-card.is-free .mt-card-head .b { border-top-color: rgba(255,255,255,.28); }
.mt-card.is-free .mt-card-head .b span { color: rgba(255,255,255,.6); }
.mt-card.is-free .mt-card-head .b b { color: #fff; }
.mt-card-list { margin: 15px 36px 0; padding: 0 0 18px; list-style: none; border-bottom: 1px solid rgba(11,11,11,.09); }
.mt-card.is-free .mt-card-list { border-bottom-color: rgba(27,77,255,.16); }
.mt-card-list li { display: flex; align-items: flex-start; padding: 9px 0 18px; }
.mt-card-list li + li { border-top: 1px solid rgba(11,11,11,.07); }
.mt-card.is-free .mt-card-list li + li { border-top-color: rgba(27,77,255,.12); }
.mt-card-list .n { flex: 0 0 34px; margin-top: 6px; font-size: 9.5px; font-weight: 600; line-height: 10px; letter-spacing: .06em; color: rgba(11,11,11,.28); }
.mt-card.is-free .mt-card-list .n { color: rgba(27,77,255,.75); }
.mt-card-list .x { flex: 1; min-width: 0; }
.mt-card-list .x b { display: block; font-size: 14.5px; font-weight: 600; line-height: 17px; letter-spacing: -0.02em; color: rgba(11,11,11,.7); }
.mt-card-list .x span { display: block; margin-top: 4px; font-size: 11px; line-height: 13px; letter-spacing: -0.01em; color: rgba(74,82,97,.6); }
.mt-card.is-free .mt-card-list .x b { color: rgba(11,11,11,.9); }
.mt-card.is-free .mt-card-list .x span { color: rgba(74,82,97,.8); }
.mt-card-list .st { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 47px; height: 22px; margin-top: 1px; padding: 0 14px;
    border: 1px solid rgba(11,11,11,.14); border-radius: 11px; font-style: normal; font-size: 10.5px; color: rgba(11,11,11,.45); }
.mt-card.is-free .mt-card-list .st { border: 0; background: rgba(27,77,255,.08); color: #1B4DFF; }
.mt-card-note { min-height: 68px; margin: 15px 36px 0; padding: 16px 22px; border-radius: 4px;
    background: rgba(11,11,11,.03); box-shadow: inset 3px 0 0 rgba(11,11,11,.2);
    font-size: 11.5px; line-height: 1.75; letter-spacing: -0.01em; color: rgba(11,11,11,.52); }
.mt-card.is-free .mt-card-note { background: rgba(27,77,255,.05); box-shadow: inset 3px 0 0 #1B4DFF; color: rgba(11,11,11,.72); }
/* 통이미지는 그림자 여백 포함(528x688, 본체 460x620이 좌34·상16 위치) → 음수 마진으로 본체 위치 맞춤 */
.mt-chat-img { display: block; flex: none; width: 528px; max-width: calc(100% + 68px); height: auto; margin: -16px -34px -52px; }
.mt-scope-foot { display: flex; justify-content: flex-end; align-items: center; gap: 30px; margin-top: 20px; padding-top: 28px; border-top: 1px solid rgba(11,11,11,.14); }
.mt-scope-foot .t { font-size: 26px; font-weight: 700; letter-spacing: -0.04em; word-break: keep-all; }
.mt-scope-foot .t em { font-style: normal; color: #1B4DFF; }
.mt-scope-foot .d { flex: none; font-size: 14px; letter-spacing: -0.02em; color: #4A5261; }

/* ── CH03 직접 대응 — 채팅 목업 + 처리 흐름 ── */
.mt-direct { padding: 100px 0 110px; background: linear-gradient(180deg, #F4F6FC 0%, #EBEFF9 100%); }
.mt-direct { overflow-x: clip; }
.mt-direct-body { display: grid; grid-template-columns: 460px minmax(0, 660px); justify-content: space-between; align-items: start; gap: 60px; margin-top: 50px; }
.mt-flow { padding-top: 10px; }
.mt-flow ol { margin: 7px 0 0; padding: 0; list-style: none; border-bottom: 2px solid #1B4DFF; }
.mt-flow li { display: flex; padding: 22px 0 26px; }
.mt-flow li + li { border-top: 1px solid rgba(11,11,11,.12); }
.mt-flow li.ani { transition-delay: calc(var(--i) * .08s); }
.mt-flow .n { flex: 0 0 48px; margin-top: 5px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: rgba(11,11,11,.3); }
.mt-flow h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.mt-flow p { margin-top: 8px; font-size: 13.5px; line-height: 1.9; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
.mt-flow li.is-last .n, .mt-flow li.is-last h3 { color: #1B4DFF; }
.mt-direct-note { margin-top: 40px; font-size: 13.5px; letter-spacing: -0.02em; color: rgba(74,82,97,.85); word-break: keep-all; }

.mt-chat { display: flex; flex-direction: column; width: 460px; max-width: 100%; height: 620px; overflow: hidden; border-radius: 12px;
    background: #A8BBD4; box-shadow: 0 18px 44px -10px rgba(15,26,77,.18); }
.mt-chat-top { flex: none; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 18px 0 16px; background: #92A8C4; color: #fff; }
.mt-chat-top .bk { flex: none; width: 6px; height: 12px; color: rgba(255,255,255,.9); }
.mt-chat-top b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.02em; }
.mt-chat-top span { display: block; margin-top: 3px; font-size: 10px; letter-spacing: -0.01em; color: rgba(255,255,255,.72); }
.mt-chat-top .dots { display: flex; gap: 6px; margin-left: auto; }
.mt-chat-top .dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.8); }
.mt-chat-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; overflow: hidden; }
.mt-chat-body .day { align-self: center; padding: 3px 28px; border-radius: 9px; background: rgba(0,0,0,.14); font-size: 9.5px; color: rgba(255,255,255,.85); }
.mt-chat-body .sys { align-self: center; padding: 4px 18px; border-radius: 10px; background: rgba(0,0,0,.12); font-size: 8.5px; color: rgba(255,255,255,.8); }
.mt-chat .msg { display: flex; align-items: flex-end; gap: 6px; }
.mt-chat .msg.is-in { align-items: flex-start; gap: 8px; }
.mt-chat .msg.is-out { justify-content: flex-end; }
.mt-chat .av { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
    background: #C9A227; font-size: 12px; font-weight: 600; color: #fff; }
.mt-chat .col { display: flex; flex-direction: column; gap: 10px; }
.mt-chat .who { margin-bottom: -5px; font-size: 10px; letter-spacing: -0.01em; color: rgba(59,74,95,.85); }
.mt-chat .row { display: flex; align-items: flex-end; gap: 6px; }
.mt-chat .bb { padding: 11px 14px; border-radius: 10px; background: #fff; font-size: 11.5px; line-height: 1.7; letter-spacing: -0.02em; color: rgba(11,11,11,.88); }
.mt-chat .msg.is-out .bb { background: #FEE500; }
.mt-chat time { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: 8.5px; line-height: 1.3; color: rgba(59,74,95,.6); }
.mt-chat time em { font-style: normal; color: #E8B800; }
.mt-chat .ph { position: relative; display: block; height: 62px; border-radius: 6px; background: #DDE4F0; color: #A9B7CE; }
.mt-chat .ph svg { position: absolute; left: 10px; bottom: 12px; width: 32px; height: 16px; }
.mt-chat .ph i { position: absolute; right: 18px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: #C1CCE0; }
.mt-chat .bb.is-file { width: 132px; padding: 6px; }
.mt-chat .bb.is-file small { display: block; margin-top: 4px; font-size: 8px; color: rgba(11,11,11,.42); }
.mt-chat .msg.is-link .bb.is-card { display: flex; align-items: center; gap: 10px; width: 208px; padding: 8px; background: #fff; }
.mt-chat .is-card .ph { flex: 0 0 44px; height: 44px; }
.mt-chat .is-card .ph svg { left: 13px; top: 17px; bottom: auto; width: 18px; height: 9px; }
.mt-chat .is-card b { display: block; font-size: 10px; font-weight: 600; color: rgba(11,11,11,.8); }
.mt-chat .is-card small { display: block; margin-top: 2px; font-size: 9px; color: rgba(11,11,11,.4); }
.mt-chat .is-card em { display: block; margin-top: 2px; font-style: normal; font-size: 8.5px; color: rgba(27,77,255,.9); }
.mt-chat-input { flex: none; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 18px 0 14px; background: #F4F6F9; }
.mt-chat-input .plus, .mt-chat-input .send { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; }
.mt-chat-input .plus { background: #E2E8F1; color: #8A9AB0; }
.mt-chat-input .plus svg { width: 14px; height: 14px; }
.mt-chat-input .send { background: #FEE500; color: rgba(59,46,0,.8); }
.mt-chat-input .send svg { width: 12px; height: 13px; }
.mt-chat-input .field { flex: 1; height: 28px; padding: 0 14px; border-radius: 14px; background: #fff; font-size: 11px; line-height: 28px; letter-spacing: -0.02em; color: rgba(11,11,11,.3); }

/* ── CH04 AI 운영 도구 — 다크 ── */
.mt-ai { padding: 92px 0 180px; color: #fff; background: linear-gradient(135deg, #12172E 10%, #0A0D1C 54%, #07080F 90%); }
.mt-ai .inner { display: grid; grid-template-columns: minmax(0, 1fr) 520px; align-items: start; gap: 60px; }
.mt-ai-ch { display: flex; align-items: center; gap: 35px; margin-top: 8px; }
.mt-ai-ch .mt-ch { color: #5B9BFF; }
.mt-ai-ch em { height: 24px; padding: 0 13px; border: 1px solid rgba(140,224,255,.5); border-radius: 12px;
    font-style: normal; font-size: 11px; font-weight: 600; line-height: 22px; letter-spacing: -0.01em; color: #8CE0FF; }
.mt-ai-title { margin-top: 22px; font-size: 48px; font-weight: 700; line-height: 1.4; letter-spacing: -0.05em; }
.mt-ai-desc { max-width: 500px; margin-top: 28px; font-size: 16px; line-height: 1.95; letter-spacing: -0.02em; color: rgba(255,255,255,.6); word-break: keep-all; }
.mt-ai-cols { display: flex; margin-top: 60px; }
.mt-ai-cols > div { width: 280px; }
.mt-ai-cols .lb { font-family: 'Archivo', 'Pretendard', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.4); }
.mt-ai-cols .is-ai .lb { color: #8CE0FF; }
.mt-ai-cols ul { margin: 23px 0 0; padding: 0; list-style: none; }
.mt-ai-cols li { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,.5); }
.mt-ai-cols li + li { margin-top: 22px; }
.mt-ai-cols li i { flex: none; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
    border: 1.2px solid rgba(255,255,255,.3); }
.mt-ai-cols .is-hu li i::after { content: ''; width: 7px; height: 1.5px; background: rgba(255,255,255,.45); }
.mt-ai-cols .is-ai li { color: rgba(255,255,255,.88); }
.mt-ai-cols .is-ai li i { border: 0; background: #1B4DFF; color: #fff; }
.mt-ai-cols .is-ai li i svg { width: 8px; height: 6px; }
.mt-ai-meta { display: flex; max-width: 560px; margin: 50px 0 0; padding-top: 23px; border-top: 1px solid rgba(255,255,255,.16); }
.mt-ai-meta > div { width: 190px; }
.mt-ai-meta dt { font-size: 11.5px; letter-spacing: -0.01em; color: rgba(255,255,255,.4); }
.mt-ai-meta dd { margin: 6px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #8CE0FF; }
.mt-ai-meta dd.w { color: #fff; }

.mt-app { display: flex; flex-direction: column; height: 620px; margin-top: 68px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
    background: #0D1226; box-shadow: 0 22px 54px -12px rgba(0,0,0,.42); }
.mt-app-top { flex: none; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); }
.mt-app-top .lg { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #1B4DFF; color: #fff; }
.mt-app-top .lg svg { width: 8px; height: 10px; }
.mt-app-top b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; }
.mt-app-top span { display: block; margin-top: 3px; font-size: 10px; letter-spacing: -0.01em; color: rgba(255,255,255,.45); }
.mt-app-top .on { display: flex; align-items: center; gap: 7px; margin-left: auto; font-size: 10px; color: #38D6C0; }
.mt-app-top .on i { width: 7px; height: 7px; border-radius: 50%; background: #38D6C0; }
.mt-app-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 0; overflow: hidden; }
.mt-app .u { align-self: flex-end; width: 300px; max-width: 86%; padding: 12px 16px; border-radius: 12px; background: #1B4DFF;
    font-size: 12.5px; line-height: 1.7; letter-spacing: -0.02em; }
.mt-app .file { align-self: flex-end; width: 180px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.1); }
.mt-app .file .ph { position: relative; display: block; height: 60px; border-radius: 6px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); }
.mt-app .file .ph svg { position: absolute; left: 18px; bottom: 16px; width: 30px; height: 14px; }
.mt-app .file .ph i { position: absolute; right: 26px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.3); }
.mt-app .file p { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; color: rgba(255,255,255,.5); }
.mt-app .file p span + span { color: rgba(255,255,255,.35); }
.mt-app .a { display: flex; align-items: flex-start; gap: 10px; }
.mt-app .a .av { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: rgba(27,77,255,.2); }
.mt-app .a .av i { width: 8px; height: 8px; border-radius: 50%; background: #1B4DFF; }
.mt-app .a .col { display: flex; flex-direction: column; gap: 10px; width: 282px; max-width: 100%; }
.mt-app .a .bb { padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 12.5px; line-height: 1.7; letter-spacing: -0.02em; color: rgba(255,255,255,.9); }
.mt-app .res { position: relative; padding: 18px 18px 14px; border: 1px solid rgba(56,214,192,.35); border-radius: 10px; background: rgba(255,255,255,.06); }
.mt-app .res .h { display: flex; align-items: flex-start; gap: 10px; }
.mt-app .res .h i { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #38D6C0; color: #07080F; }
.mt-app .res .h i svg { width: 8.4px; height: 6px; }
.mt-app .res .h b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -0.02em; }
.mt-app .res .h small { display: block; margin-top: 3px; font-size: 10.5px; color: rgba(255,255,255,.5); }
.mt-app .res dl { margin: 13px 0 0; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.14); }
.mt-app .res dl div { display: flex; font-size: 9.5px; }
.mt-app .res dl div + div { margin-top: 6px; }
.mt-app .res dt { width: 52px; color: rgba(255,255,255,.4); }
.mt-app .res dd { margin: 0; color: rgba(255,255,255,.45); }
.mt-app .res dd.new { color: #38D6C0; }
.mt-app .res .undo { position: absolute; right: 18px; bottom: 14px; height: 20px; padding: 0 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px;
    font-size: 9.5px; line-height: 18px; color: rgba(255,255,255,.7); }
.mt-app .a .bb.is-typing { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 22px; }
.mt-app .a .bb.is-typing i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: mtDots 1.2s ease-in-out infinite; }
.mt-app .a .bb.is-typing i:nth-child(2) { animation-delay: .15s; }
.mt-app .a .bb.is-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mtDots { 0%, 100% { opacity: .31; } 40% { opacity: .75; } }
.mt-app-input { flex: none; display: flex; align-items: center; gap: 12px; height: 44px; margin: 15px 20px 12px; padding: 0 8px 0 14px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.07); }
.mt-app-input .plus { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
    border: 1.2px solid rgba(255,255,255,.3); color: rgba(255,255,255,.5); }
.mt-app-input .plus svg { width: 10px; height: 10px; }
.mt-app-input .field { flex: 1; font-size: 12.5px; letter-spacing: -0.02em; color: rgba(255,255,255,.35); }
.mt-app-input .send { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #1B4DFF; color: #fff; }
.mt-app-input .send svg { width: 10px; height: 12px; }
/* AI 도구 목업 통이미지(img/support/mt-app.png, 604×704) — 그림자 여백(좌우 42·위 20·아래 64)만큼 당겨 창을 520×620 자리에 맞춤 */
.mt-app-img { display: block; width: 604px; max-width: calc(100% + 84px); height: auto; margin: 48px -42px -64px; }
.mt-ai { overflow-x: clip; }

/* ── CH05 자주 들어오는 요청 — 입력창 타이핑 (모션: #641:2) ── */
.mt-req { padding: 120px 0 100px; text-align: center; background: #fff; }
.mt-req-title { margin-top: 25px; font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: -0.05em; word-break: keep-all; }
.mt-req-desc { margin-top: 16px; font-size: 15px; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
.mt-req-box { max-width: 1100px; margin: 54px auto 0; text-align: left; }
.mt-req-bar { display: flex; align-items: center; height: 76px; padding: 0 16px 0 34px; border: 1px solid rgba(11,11,11,.1); border-radius: 38px;
    background: #fff; box-shadow: 0 10px 30px -6px rgba(15,26,77,.1); }
.mt-req-bar .plus { flex: none; width: 18px; height: 18px; margin-right: 34px; color: rgba(11,11,11,.35); }
.mt-req-bar .field { flex: 1; min-width: 0; display: flex; align-items: center; height: 28px; overflow: hidden; white-space: nowrap;
    font-size: 19px; letter-spacing: -0.03em; color: rgba(11,11,11,.85); }
/* 커서는 텍스트 바로 뒤 inline 요소 — absolute 로 두면 글자를 따라 밀리지 않는다(모션 정의 DOM 항목) */
.mt-req-bar .caret { flex: none; display: inline-block; width: 2px; height: 28px; margin-left: 2px; background: #1B4DFF;
    animation: mtCaret 1.06s steps(1) infinite; }
.mt-req-bar.is-typing .caret { animation: none; opacity: 1; }
@keyframes mtCaret { 0% { opacity: 1; } 50% { opacity: 0; } }
.mt-req-bar .badge { flex: none; height: 32px; margin-right: 16px; padding: 0 17px; border-radius: 16px; background: rgba(27,77,255,.09);
    font-size: 12.5px; font-weight: 600; line-height: 32px; letter-spacing: -0.01em; color: #1B4DFF;
    transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1); }
.mt-req-bar .send { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    background: #1B4DFF; color: #fff; box-shadow: 0 8px 20px -2px rgba(26,51,178,.3); }
.mt-req-bar .send svg { width: 12px; height: 15px; }
.mt-req-dd { margin-top: 10px; padding: 18px 36px 12px; border: 1px solid rgba(11,11,11,.08); border-radius: 22px;
    background: #fff; box-shadow: 0 12px 34px -8px rgba(15,26,77,.09); }
.mt-req-dd .lb { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; color: rgba(11,11,11,.38); }
.mt-req-dd ul { margin: 22px 0 0; padding: 0; list-style: none; }
.mt-req-dd li { display: flex; align-items: center; gap: 16px; padding: 14px 0;
    transition: opacity .4s ease, transform .4s cubic-bezier(.33,1,.68,1); transition-delay: calc(var(--i) * .06s); }
.mt-req-dd li + li { border-top: 1px solid rgba(11,11,11,.07); }
.mt-req-dd .ic { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    background: rgba(27,77,255,.1); color: rgba(27,77,255,.85); }
.mt-req-dd .ic svg { width: 9px; height: 7px; }
.mt-req-dd li.is-paid .ic { background: rgba(11,11,11,.06); color: rgba(11,11,11,.35); }
.mt-req-dd li div { flex: 1; min-width: 0; }
.mt-req-dd li b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: rgba(11,11,11,.85); }
.mt-req-dd li span { display: block; margin-top: 3px; font-size: 11.5px; letter-spacing: -0.01em; color: rgba(74,82,97,.75); }
.mt-req-dd li em { flex: none; height: 24px; padding: 0 16px; border-radius: 12px; background: rgba(27,77,255,.08);
    font-style: normal; font-size: 11.5px; font-weight: 600; line-height: 24px; letter-spacing: -0.01em; color: #1B4DFF; }
.mt-req-dd li.is-paid em { background: rgba(11,11,11,.05); color: rgba(11,11,11,.5); }
.mt-req-note { margin-top: 30px; font-size: 13px; letter-spacing: -0.02em; color: rgba(11,11,11,.4); word-break: keep-all; }
.mt-req-note.is-sub { margin-top: 8px; color: rgba(11,11,11,.55); }
/* 등장 전 상태는 스크립트가 .is-armed 를 붙였을 때만 — 스크립트가 안 돌면 처음부터 완성된 화면이 보인다 */
.mt-req.is-armed:not(.is-done) .mt-req-bar .badge { opacity: 0; transform: scale(.9); }
.mt-req.is-armed:not(.is-done) .mt-req-dd li { opacity: 0; transform: translateY(12px); }
.mt-req.is-done .mt-req-bar .send { animation: mtBump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes mtBump { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media screen and (max-width: 1250px) {
    .mt-stay-pre { font-size: 38px; }
    .mt-stay-title { font-size: 44px; }
    .mt-cards { gap: 30px; }
    .mt-card-head { padding: 34px 28px 0; }
    .mt-card-list, .mt-card-note { margin-left: 28px; margin-right: 28px; }
    .mt-direct-body { grid-template-columns: 400px minmax(0, 1fr); gap: 50px; }
    .mt-ai .inner { grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; }
    .mt-ai-title { font-size: 40px; }
    .mt-ai-cols > div { width: 50%; }
}
@media screen and (max-width: 950px) {
    .mt-stay { padding: 80px 0 60px; }
    .mt-stay-pre { font-size: 30px; }
    .mt-stay-title { font-size: 36px; }
    .mt-stay-list { grid-template-columns: 1fr; margin-top: 50px; }
    .mt-stay-list li, .mt-stay-list li:first-child { padding: 24px 20px 26px; }
    .mt-stay-list li + li::before { left: 20px; right: 20px; top: 0; bottom: auto; width: auto; height: 1px; }
    .mt-stay-list p { max-width: none; }
    .mt-scope { padding: 80px 0; }
    .mt-cards { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; }
    .mt-scope-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
    .mt-direct { padding: 80px 0; }
    .mt-direct-body { grid-template-columns: 1fr; gap: 50px; margin-top: 40px; }
    .mt-chat { margin: 0 auto; }
    .mt-ai { padding: 80px 0 90px; }
    .mt-ai .inner { grid-template-columns: 1fr; gap: 0; }
    .mt-ai-title { font-size: 34px; }
    .mt-app { width: 100%; max-width: 520px; margin: 50px auto 0; }
    .mt-app-img { width: 100%; max-width: 604px; margin: 30px auto -64px; }
    .mt-req { padding: 80px 0; }
    .mt-req-title { font-size: 34px; }
    .mt-req-box { margin-top: 40px; }
}
@media screen and (max-width: 650px) {
    .mt-stay-pre { font-size: 22px; }
    .mt-stay-title { margin-top: 8px; font-size: 27px; }
    .mt-stay-desc { font-size: 14.5px; }
    .mt-stay-desc br { display: none; }
    .mt-stay-list h3 { font-size: 18px; }
    .mt-card-head { height: auto; padding: 26px 20px 18px; }
    .mt-card-head h3 { font-size: 20px; }
    .mt-card-head .b { flex-direction: column; align-items: flex-start; gap: 4px; }
    .mt-card-list, .mt-card-note { margin-left: 20px; margin-right: 20px; }
    .mt-card-list .n { flex-basis: 26px; }
    .mt-card-list .x b { font-size: 14px; }
    .mt-scope-foot .t { font-size: 20px; }
    .mt-flow h3 { font-size: 18px; }
    .mt-flow .n { flex-basis: 38px; }
    .mt-chat { height: 580px; }
    .mt-ai-ch { gap: 16px; }
    .mt-ai-title { font-size: 28px; }
    .mt-ai-desc { font-size: 14.5px; }
    .mt-ai-cols { flex-direction: column; gap: 34px; margin-top: 44px; }
    .mt-ai-cols > div { width: auto; }
    .mt-ai-meta { flex-wrap: wrap; gap: 18px 0; }
    .mt-ai-meta > div { width: 50%; }
    .mt-app { height: 600px; }
    .mt-app-body { padding: 16px 14px 0; }
    .mt-app-input { margin: 12px 14px 10px; }
    .mt-req-title { font-size: 26px; }
    .mt-req-desc { font-size: 14px; }
    .mt-req-bar { height: 60px; padding: 0 8px 0 20px; }
    .mt-req-bar .plus { width: 15px; height: 15px; margin-right: 14px; }
    .mt-req-bar .field { height: 22px; font-size: 15px; }
    .mt-req-bar .caret { height: 22px; }
    .mt-req-bar .badge { display: none; }
    .mt-req-bar .send { width: 40px; height: 40px; }
    .mt-req-dd { padding: 16px 18px 8px; border-radius: 18px; }
    .mt-req-dd li { gap: 12px; }
    .mt-req-dd li b { font-size: 14px; }
    .mt-req-dd li em { padding: 0 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .mt-req-bar .caret { display: none; }
    .mt-req.is-armed:not(.is-done) .mt-req-bar .badge, .mt-req.is-armed:not(.is-done) .mt-req-dd li { transform: none; }
    .mt-req.is-done .mt-req-bar .send, .mt-app .a .bb.is-typing i { animation: none; }
}

/* ============================================================
   FAQ 페이지 — Figma "[JOB] FAQ 페이지 — A 인덱스형" #653:2 실측
   히어로는 공용 .pj-hero, 본문은 820 목록 + 100 간격 + 280 고정 패널(= 1200).
   시안이 1200 폭(x360~1560)이라 이 페이지만 .inner 를 1200 으로 좁힌다.
   ⚠ 메인에 .faq-section 이 있으므로 .fq- 접두어만 쓴다.
============================================================ */
.page-faq { background: #fff; color: #0B0B0B; }
.page-faq .en { font-family: 'Archivo', 'Space Grotesk', sans-serif; }
.page-faq .inner { width: min(92%, 1200px); }
.fq-hero .pj-lead { margin-top: 48px; }

.fq-body { padding: 80px 0 126px; }
.fq-body .inner { display: grid; grid-template-columns: minmax(0, 820px) 280px; justify-content: space-between; align-items: start; gap: 60px; }

/* ── 분류 */
.fq-group + .fq-group { margin-top: 88px; }
.fq-cat { padding-bottom: 17px; border-bottom: 2px solid rgba(11,11,11,.5);
    font-size: 9.5px; font-weight: 600; line-height: 11px; letter-spacing: .12em; color: #1B4DFF; }
.fq-group dl { margin: 0; }
.fq-item { padding-top: 30px; }
.fq-item + .fq-item { padding-top: 54px; }
.fq-list .fq-group:last-child { padding-bottom: 38px; border-bottom: 2px solid rgba(11,11,11,.5); }

/* ── 질문 — Q. 는 40px 칸에 걸고 밑줄은 질문 칸(780)에만 긋는다 */
.fq-item dt { position: relative; padding: 0 0 18px 40px;
    font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; color: #0B0B0B; word-break: keep-all; }
.fq-item dt::after { content: ''; position: absolute; left: 40px; right: 0; bottom: 0; height: 1px; background: rgba(11,11,11,.14); }
.fq-item dt .q { position: absolute; left: 0; top: 0; font-weight: 700; letter-spacing: -0.02em; }

/* ── 답변 */
.fq-item dd { position: relative; margin: 20px 0 0; padding-left: 40px; }
.fq-item dd .a { position: absolute; left: 0; top: 1px; font-size: 16px; font-weight: 700; line-height: 1.8; letter-spacing: -0.02em; color: #1B4DFF; }
.fq-item dd p { max-width: 720px; font-size: 15px; line-height: 1.95; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
.fq-item dd .fq-ref { display: flex; align-items: baseline; gap: 0; margin-top: 12px; font-size: 13px; line-height: 1.5; letter-spacing: -0.01em; color: rgba(27,77,255,.9); }
.fq-ref em { flex: none; width: 44px; font-style: normal; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; color: rgba(27,77,255,.7); }

/* ── 오른쪽 문의 패널 — 스크롤해도 따라온다 */
.fq-panel { position: sticky; top: 110px; padding: 32px 28px 28px; border-radius: 6px; background: #F7F9FD;
    box-shadow: 0 10px 26px -6px rgba(15,26,77,.2); }
.fq-panel .lb { font-size: 9.5px; font-weight: 600; line-height: 11px; letter-spacing: .12em; color: rgba(11,11,11,.4); }
.fq-panel .tit { margin-top: 13px; font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; color: #0B0B0B; }
.fq-panel .desc { margin-top: 11px; font-size: 12px; line-height: 1.75; letter-spacing: -0.01em; color: #4A5261; }
.fq-ch { margin-top: 33px; border-top: 1px solid rgba(11,11,11,.16); border-bottom: 1px solid rgba(11,11,11,.16); }
.fq-ch li + li { border-top: 1px solid rgba(11,11,11,.08); }
.fq-ch a { position: relative; display: block; padding: 15px 0 14px; text-decoration: none; }
.fq-ch span { display: block; font-size: 11px; font-weight: 500; letter-spacing: -0.01em; color: rgba(11,11,11,.4); }
.fq-ch b { display: block; margin-top: 5px; font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: rgba(11,11,11,.8); transition: color .25s; }
.fq-ch .is-main b { font-size: 14.5px; color: #1B4DFF; }
.fq-ch i { position: absolute; right: 0; bottom: 15px; font-style: normal; font-size: 13px; font-weight: 700; color: #1B4DFF; transition: transform .25s; }
.fq-ch a:hover b { color: #1B4DFF; }
.fq-ch a:hover i { transform: translateX(3px); }
.fq-meta { margin: 21px 0 0; }
.fq-meta div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fq-meta div + div { margin-top: 13px; }
.fq-meta dt { font-size: 11.5px; font-weight: 500; letter-spacing: -0.01em; color: rgba(11,11,11,.4); }
.fq-meta dd { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: rgba(11,11,11,.75); text-align: right; }
.fq-meta dd.is-blue { color: #1B4DFF; }
.fq-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 22px; border-radius: 23px;
    background: #0B0B0B; font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; color: #fff; text-decoration: none; transition: background .25s; }
.fq-btn:hover { background: #1B4DFF; color: #fff; }

/* ── 문의 띠 */
.fq-cta { background: #F4F6FA; }
.fq-cta .inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 200px; padding: 40px 0; }
.fq-cta .tit { font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -0.04em; color: #0B0B0B; word-break: keep-all; }
.fq-cta .desc { margin-top: 12px; font-size: 14px; line-height: 1.6; letter-spacing: -0.02em; color: #4A5261; word-break: keep-all; }
.fq-cta-btn { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 200px; height: 56px; border-radius: 28px;
    background: #1B4DFF; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: #fff; text-decoration: none; transition: background .25s; }
.fq-cta-btn:hover { background: #0B0B0B; color: #fff; }

@media screen and (max-width: 1250px) {
    .fq-body .inner { grid-template-columns: minmax(0, 1fr) 260px; gap: 50px; }
}
/* 950 이하 — 패널은 목록 아래로 내려 가로로 펼친다 */
@media screen and (max-width: 950px) {
    .fq-body { padding: 60px 0 90px; }
    .fq-body .inner { grid-template-columns: 1fr; gap: 60px; }
    .fq-panel { position: static; max-width: 520px; }
    .fq-group + .fq-group { margin-top: 72px; }
    .fq-cta .tit { font-size: 26px; }
}
@media screen and (max-width: 650px) {
    .page-faq .inner { width: 100%; }   /* 공용 650 규칙(100% + 5vw 패딩)으로 되돌린다 */
    .fq-hero .pj-lead { margin-top: 24px; }
    .fq-body { padding: 44px 0 70px; }
    .fq-group + .fq-group { margin-top: 60px; }
    .fq-item { padding-top: 24px; }
    .fq-item + .fq-item { padding-top: 40px; }
    .fq-item dt { padding: 0 0 14px 30px; font-size: 17px; }
    .fq-item dt::after { left: 30px; }
    .fq-item dd { margin-top: 16px; padding-left: 30px; }
    .fq-item dd .a { font-size: 15px; }
    .fq-item dd p { font-size: 14.5px; line-height: 1.85; }
    .fq-item dd .fq-ref { font-size: 12.5px; }
    .fq-ref em { width: 36px; }
    .fq-list .fq-group:last-child { padding-bottom: 30px; }
    .fq-panel { max-width: none; }
    .fq-cta .inner { flex-direction: column; align-items: flex-start; gap: 24px; min-height: 0; padding: 50px 5vw; }
    .fq-cta .tit { font-size: 22px; }
    .fq-cta .desc { font-size: 13px; }
    .fq-cta-btn { width: 100%; height: 52px; }
}

/* =========================================================
   인사이트 상세 — Figma "[JOB] 인사이트 상세 페이지"(#666:2)
   히어로(가운데 정렬 제목 + 세로 포스터) → 좌 "다른 글" 220 + 우 본문 760 → 이전·다음 카드 1200 → CTA
   본문(jb_content)은 관리자 에디터 내용 그대로라, 태그 단위(p·h2·img…)로만 서체를 입힌다.
   ========================================================= */
.iv-page { --iv-ink: #0b0b0b; --iv-blue: #1b4dff; --iv-tx: #4a5261; background: #fff; color: var(--iv-ink); }
.iv-page .en { font-family: 'Archivo', 'Space Grotesk', 'Pretendard', sans-serif; }
.iv-in { width: min(92%, 1200px); margin: 0 auto; }

/* ── 히어로 */
.iv-hero { position: relative; overflow: hidden; padding: 128px 0 0;
    background: linear-gradient(180deg, #fff 0%, #f7f8fc 55%, #fff 100%); }
.iv-hero-glow { position: absolute; left: 50%; top: 182px; width: 877px; height: 877px; margin-left: -438px; border-radius: 50%;
    background: radial-gradient(circle, rgba(27,77,255,.07) 0%, rgba(27,77,255,.025) 45%, rgba(27,77,255,0) 70%); pointer-events: none; }
.iv-hero .iv-in { position: relative; z-index: 1; padding-bottom: 40px; border-bottom: 1px solid rgba(11,11,11,.14); text-align: center; }
.iv-meta { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px;
    border-bottom: 1px solid rgba(11,11,11,.14); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; }
.iv-meta .kind { color: rgba(11,11,11,.45); }
.iv-meta .issue { color: var(--iv-blue); }
.iv-title { max-width: 1000px; margin: 54px auto 0; font-size: 60px; font-weight: 700; line-height: 1.37;
    letter-spacing: -0.05em; color: var(--iv-ink); word-break: keep-all; text-wrap: balance; }
.iv-poster { width: 400px; aspect-ratio: 3 / 4; margin: 52px auto 0; overflow: hidden; background: #f4f4f4; }
.iv-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iv-date { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 20px 0 0;
    font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: .04em; color: rgba(11,11,11,.4); }
/* 분류 — 시안엔 날짜만 있어 옅은 파란 알약 배지로 붙인다 */
.iv-date .cat { display: inline-flex; align-items: center; height: 28px; padding: 0 13px; border: 1px solid rgba(27,77,255,.18); border-radius: 14px;
    background: rgba(27,77,255,.06); font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--iv-blue); }

/* ── 본문 2단 (DOM 은 본문 → 사이드 순서. 모바일에서 사이드가 자연스럽게 아래로 간다) */
.iv-main { padding: 100px 0 0; }
.iv-grid { display: grid; grid-template-columns: 220px minmax(0, 760px); grid-template-areas: "side art";
    column-gap: 100px; align-items: start; }
.iv-article { grid-area: art; min-width: 0; }
.iv-side { grid-area: side; position: sticky; top: 120px; }
.iv-article .menuBox { padding: 0 0 20px; }

/* 본문 서체 — 에디터가 넣는 태그 그대로 */
.iv-body { counter-reset: iv-h; font-size: 15.5px; line-height: 2.05; letter-spacing: -0.02em; color: var(--iv-tx); word-break: keep-all; overflow-wrap: anywhere; }
.iv-body > *:first-child { margin-top: 0; }
.iv-body p { margin: 0 0 30px; }
.iv-body strong, .iv-body b { color: var(--iv-ink); font-weight: 600; }
.iv-body a { color: var(--iv-blue); text-decoration: underline; text-underline-offset: 3px; }
.iv-body h2 { counter-increment: iv-h; position: relative; margin: 66px 0 26px; padding: 17px 0 0 46px;
    border-top: 1px solid rgba(11,11,11,.14); font-size: 26px; font-weight: 700; line-height: 1.45; letter-spacing: -0.03em; color: var(--iv-ink); }
.iv-body h2::before { content: counter(iv-h, decimal-leading-zero); position: absolute; left: 0; top: 29px;
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--iv-blue); }
.iv-body h3 { margin: 44px 0 16px; font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; color: var(--iv-ink); }
.iv-body h4 { margin: 32px 0 12px; font-size: 17px; font-weight: 600; line-height: 1.6; color: var(--iv-ink); }
.iv-body img { max-width: 100%; height: auto !important; border-radius: 4px; }
.iv-body figure { margin: 30px 0; }
.iv-body figcaption { margin-top: 12px; font-size: 12px; line-height: 1.5; color: rgba(11,11,11,.42); }
.iv-body figcaption::before { content: '— '; color: rgba(11,11,11,.3); }
.iv-body ul, .iv-body ol { margin: 0 0 30px; padding-left: 1.3em; }
.iv-body ul { list-style: disc; }
.iv-body ol { list-style: decimal; }
.iv-body blockquote { margin: 30px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--iv-blue); color: var(--iv-ink); }
.iv-body table { width: 100%; margin: 0 0 30px; border-collapse: collapse; border-top: 1px solid rgba(11,11,11,.1); font-size: 13.5px; line-height: 1.8; }
.iv-body th, .iv-body td { padding: 17px 0; border-bottom: 1px solid rgba(11,11,11,.1); text-align: left; vertical-align: top; }
.iv-body th { width: 150px; font-size: 14.5px; font-weight: 600; color: rgba(11,11,11,.85); }
.iv-body hr { margin: 40px 0; border: 0; border-top: 1px solid rgba(11,11,11,.14); }
.iv-end { display: block; height: 2px; margin-top: 40px; background: rgba(11,11,11,.5); }

.iv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.iv-tags .tg { padding: 6px 12px; border-radius: 16px; background: #f4f5f9; font-size: 12.5px; color: rgba(11,11,11,.6); }

/* 사이드 — 다른 글 보기 */
.iv-side .eb { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .12em; color: var(--iv-blue); }
.iv-side .tt { margin: 14px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--iv-ink); }
.iv-side .list { margin: 16px 0 0; padding: 0; list-style: none; border-top: 2px solid rgba(11,11,11,.5); border-bottom: 2px solid rgba(11,11,11,.5); }
.iv-side .list li + li { border-top: 1px solid rgba(11,11,11,.1); }
.iv-side .list a { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; padding: 20px 0 12px; color: inherit; }
.iv-side .th { width: 72px; height: 54px; background: #f4f4f4 center / cover no-repeat; }
.iv-side .tx em { display: block; font-style: normal; font-size: 15px; font-weight: 600; color: rgba(27,77,255,.85); }
.iv-side .tx b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 4px;
    font-size: 15px; font-weight: 600; line-height: 1.58; letter-spacing: -0.02em; color: rgba(11,11,11,.85); transition: color .2s; }
.iv-side .ft { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.iv-side .ft .d { font-size: 15px; font-weight: 500; letter-spacing: .04em; color: rgba(11,11,11,.3); }
.iv-side .ft .ar { font-size: 15px; font-weight: 700; color: rgba(27,77,255,.55); transition: transform .2s; }
.iv-side .list a:hover .tx b { color: var(--iv-blue); }
.iv-side .list a:hover .ar { transform: translateX(3px); }
.iv-side .all { display: flex; justify-content: space-between; margin-top: 24px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--iv-blue); }

/* ── 이전·다음 카드 */
.iv-pn-wrap { padding: 100px 0; }
.iv-pn { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid rgba(11,11,11,.5); border-bottom: 2px solid rgba(11,11,11,.5); }
.iv-pn .col { position: relative; display: flex; flex-direction: column; min-height: 198px; padding: 28px 40px 22px 0; color: inherit; }
.iv-pn .col.is-next { padding: 28px 0 22px 40px; align-items: flex-end; text-align: right; }
.iv-pn .col.is-next::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: rgba(11,11,11,.12); }
.iv-pn .hd { display: flex; align-items: center; gap: 16px; font-size: 11.5px; color: rgba(11,11,11,.4); }
.iv-pn .hd b { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; color: rgba(27,77,255,.75); }
.iv-pn .is-next .hd { flex-direction: row-reverse; }
.iv-pn .card { display: flex; gap: 20px; margin-top: 22px; }
.iv-pn .is-next .card { flex-direction: row-reverse; }
.iv-pn .th { flex: 0 0 96px; height: 72px; background: #f4f4f4 center / cover no-repeat; }
.iv-pn .tx { min-width: 0; }
.iv-pn .tx em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: rgba(27,77,255,.8); }
.iv-pn .tx b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 4px;
    font-size: 19px; font-weight: 700; line-height: 1.52; letter-spacing: -0.03em; color: rgba(11,11,11,.88); transition: color .2s; }
.iv-pn .tx .d { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; color: rgba(11,11,11,.3); }
.iv-pn .ar { margin-top: auto; padding-top: 14px; font-size: 20px; font-weight: 700; line-height: 1; color: rgba(27,77,255,.5); transition: transform .2s, color .2s; }
.iv-pn a.col:hover .tx b, .iv-pn a.col:hover .ar { color: var(--iv-blue); }
.iv-pn a.is-prev:hover .ar { transform: translateX(-4px); }
.iv-pn a.is-next:hover .ar { transform: translateX(4px); }
.iv-list-btn { display: flex; justify-content: center; margin-top: 40px; }
.iv-list-btn a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 180px; height: 50px;
    border: 1px solid rgba(11,11,11,.2); border-radius: 25px; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--iv-ink);
    transition: background .2s, color .2s, border-color .2s; }
.iv-list-btn a:hover { background: var(--iv-ink); border-color: var(--iv-ink); color: #fff; }

/* ── 1250 */
@media screen and (max-width: 1250px) {
    .iv-hero { padding-top: 116px; }
    .iv-title { font-size: 50px; }
    .iv-poster { width: 340px; }
    .iv-grid { grid-template-columns: 200px minmax(0, 1fr); column-gap: 60px; }
}
/* ── 950 : 사이드가 본문 아래로 내려간다 */
@media screen and (max-width: 950px) {
    .iv-hero { padding-top: 100px; }
    .iv-title { margin-top: 40px; font-size: 40px; }
    .iv-poster { width: 300px; margin-top: 40px; }
    .iv-main { padding-top: 70px; }
    .iv-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "side"; row-gap: 80px; }
    .iv-side { position: static; }
    .iv-side .list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
    .iv-side .list li + li { border-top: 0; }
    .iv-side .list li:nth-child(n+3) { border-top: 1px solid rgba(11,11,11,.1); }
    .iv-pn-wrap { padding: 80px 0; }
    .iv-pn .col { padding-right: 24px; }
    .iv-pn .col.is-next { padding-left: 24px; }
    .iv-pn .tx b { font-size: 17px; }
}
/* ── 650 : 모바일 */
@media screen and (max-width: 650px) {
    .iv-hero { padding-top: 88px; }
    .iv-meta { font-size: 9.5px; }
    .iv-title { margin-top: 30px; font-size: 28px; }
    .iv-poster { width: 62%; margin-top: 30px; }
    .iv-date { gap: 10px; font-size: 12.5px; }
    .iv-date .cat { height: 24px; padding: 0 10px; font-size: 12px; }
    .iv-hero .iv-in { padding-bottom: 30px; }
    .iv-main { padding-top: 50px; }
    .iv-body { font-size: 15px; line-height: 1.95; }
    .iv-body p { margin-bottom: 24px; }
    .iv-body h2 { margin: 48px 0 20px; padding-left: 36px; font-size: 21px; }
    .iv-body h2::before { top: 25px; }
    .iv-body h3 { font-size: 18px; }
    .iv-body th { width: 100px; }
    .iv-side .list { display: block; }
    .iv-side .list li:nth-child(n+2) { border-top: 1px solid rgba(11,11,11,.1); }
    .iv-pn-wrap { padding: 60px 0; }
    .iv-pn { grid-template-columns: 1fr; }
    .iv-pn .col, .iv-pn .col.is-next { min-height: 0; padding: 22px 0; }
    .iv-pn .col.is-next { border-top: 1px solid rgba(11,11,11,.12); }
    .iv-pn .col.is-next::before { display: none; }
    .iv-pn .col.is-empty { display: none; }
    .iv-pn .th { flex-basis: 80px; height: 60px; }
    .iv-pn .tx b { font-size: 16px; }
}

/* ============================================================
   포트폴리오 상세 — Figma "[JOB] 포트폴리오 상세"(#737:2)
   히어로 → 컨셉 → 디자인 요소 → 디바이스 → 디자인 시스템 → 메인 → 서브 → 모바일 → 관리자 → 마무리(이전/다음)
   관리자 입력이 없는 영역은 마크업에 .is-ph 로 표시해 두었다(실제 내용이 생기면 교체).
============================================================ */
.pd { --pd-ink: #1a1a1a; --pd-gray: #6b6b6b; --pd-blue: #1b4dff; --pd-line: rgba(26,26,26,.1);
    overflow: hidden; overflow: clip; display: flow-root; background: #fafaf8; color: var(--pd-ink); } /* clip — hidden 이면 메인 페이지 섹션 sticky 고정이 안 걸린다 */
:where(.pd) ul, :where(.pd) ol { list-style: none; margin: 0; padding: 0; } /* :where — 아래 개별 margin 이 이기도록 우선순위 0 */
.pd-in { width: min(92%, 1200px); margin: 0 auto; }
.pd-wide { width: min(92%, 1360px); margin: 0 auto; }
.pd-ph-box { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    background: repeating-linear-gradient(135deg, #eceef1 0 12px, #e5e8ed 12px 24px); font-size: 13px; letter-spacing: -0.01em; color: rgba(26,26,26,.4); }
.pd-label { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(26,26,26,.4); }
.pd-tit { margin-top: 18px; font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -0.04em; }
.pd-desc { max-width: 700px; margin-top: 16px; font-size: 15px; line-height: 1.95; letter-spacing: -0.02em; color: var(--pd-gray); word-break: keep-all; }
.pd-sys-t { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.04em; }
.pd-sys-t + .pd-desc { margin-top: 12px; }
.pd-sys-h { margin: 50px 0 20px; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }

/* 히어로 — 하늘색 → 아이보리 그라디언트 위 중앙 정렬, 대표 이미지는 풀블리드 */
.pd-hero { position: relative; padding-top: 200px; text-align: center; background: linear-gradient(180deg, #eef4ff 0%, #f7f9fd 31%, #fafaf8 100%); }
.pd-hero .menuBox { position: absolute; top: 110px; right: 4%; padding: 0; }
.pd-hero-t { font-size: clamp(40px, 4.9vw, 94px); font-weight: 700; line-height: 1.19; letter-spacing: -0.05em; color: #0b0b0b; word-break: keep-all; }
.pd-hero-d { max-width: 800px; margin: 56px auto 0; font-size: 15px; line-height: 2.1; letter-spacing: -0.02em; color: #4a5261; word-break: keep-all; }
.pd-hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 50px; }
.pd-hero-tags li { display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border: 1px solid rgba(26,26,26,.12); border-radius: 18px;
    background: rgba(255,255,255,.7); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: rgba(26,26,26,.72); }
.pd-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 36px; margin: 28px 0 0; }
.pd-hero-meta > div { display: flex; align-items: baseline; gap: 10px; }
.pd-hero-meta dt { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(26,26,26,.4); }
.pd-hero-meta dd { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--pd-ink); }
.pd-hero-meta dd a { color: var(--pd-blue); }
.pd-hero-img { position: relative; margin-top: 62px; aspect-ratio: 1920 / 900; overflow: hidden; background: #e9edf3; }
.pd-hero-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 스크롤 확장 — --p(0→1)는 view.skin.php 스크립트가 넣는다. 0 일 때 좌우 --pdh-x · 위아래 --pdh-y 만큼 잘린 둥근 박스 */
.pd-hero-img { --pdh-x: 14%; --pdh-y: 6%;
    clip-path: inset(calc((1 - var(--p, 1)) * var(--pdh-y)) calc((1 - var(--p, 1)) * var(--pdh-x)) round calc((1 - var(--p, 1)) * 28px)); }
.pd-hero-img img { transform: scale(calc(1.12 - .12 * var(--p, 1))); transform-origin: center; }
@media screen and (max-width: 768px) {
    .pd-hero-img { --pdh-x: 6%; --pdh-y: 4%; }
}

/* 디자인 컨셉 */
.pd-concept { padding-top: 150px; text-align: center; }
.pd-concept-l { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .04em; color: rgba(11,11,11,.4); }
.pd-concept-t { margin-top: 26px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: clamp(36px, 4vw, 76px); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; color: #0b0b0b; }
.pd-concept-d { max-width: 800px; margin: 32px auto 0; font-size: 15px; line-height: 2.05; letter-spacing: -0.02em; color: #4a5261; word-break: keep-all; }

/* 디자인 요소 — 2px 굵은 선 사이 3행, 오른쪽 라인 아이콘 */
.pd-elem { padding-top: 150px; }
.pd-elem-list { margin-top: 26px; border-top: 2px solid var(--pd-ink); border-bottom: 2px solid var(--pd-ink); }
.pd-elem-list li { display: flex; align-items: flex-start; gap: 56px; padding: 38px 0 40px; }
.pd-elem-list li + li { border-top: 1px solid var(--pd-line); }
.pd-elem-list .n { flex: 0 0 16px; padding-top: 10px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: rgba(27,77,255,.75); }
.pd-elem-list .tx { flex: 1; min-width: 0; }
.pd-elem-list .k { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.pd-elem-list .d { max-width: 640px; margin-top: 22px; font-size: 14.5px; line-height: 1.95; letter-spacing: -0.02em; color: var(--pd-gray); word-break: keep-all; }
/* 디자인 요소 라인 아이콘 — 시안 #758:2/6/12, 모션 #798:2 (3D 회전은 view.skin.php 하단 스크립트) */
.pd-elem-list .ic { flex: 0 0 140px; width: 140px; height: 140px; overflow: visible; color: #1b4dff; transition: color .3s; }
.pd-elem-list .ic * { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pd-elem-list .ic .lt { stroke-opacity: .5; }
.pd-elem-list .ic .dk { stroke: rgba(26,26,26,.55); }
.pd-elem-list li:hover .ic { color: #6e9bff; }
@media (prefers-reduced-motion: reduce) {
    .pd-elem-list .ic[data-icon="sphere"] [data-r2] { transform: scaleX(.45); transform-origin: center; transform-box: fill-box; }
    .pd-elem-list .ic[data-icon="radial"] { transform: rotate(22deg); }
}

/* 디바이스 대응 — 1360 무대에 PC·태블릿·모바일을 겹쳐 둔다(좌표는 시안 비율 그대로) */
.pd-device { margin-top: 150px; padding: 90px 0 130px; background: linear-gradient(180deg, #fafaf8 0%, #eef3fb 100%); }
.pd-device-stage { position: relative; margin-top: 86px; aspect-ratio: 1360 / 779; }
.pd-device-stage .dv { position: absolute; padding: .43%; border-radius: 16px; background: #111; box-shadow: 0 30px 60px -20px rgba(15,23,51,.35); }
.pd-device-stage .dv .sc { width: 100%; height: 100%; overflow: hidden; border-radius: 11px; background: #222; }
.pd-device-stage .dv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-device-stage .dv-pc  { left: 0;      top: 0;     width: 86.03%; height: 84.55%; }
.pd-device-stage .dv-tab { left: 50.44%; top: 27.6%; width: 28.81%; height: 72.4%; padding: .36%; border-radius: 14px; }
.pd-device-stage .dv-mo  { left: 82.1%;  top: 44.5%; width: 17.9%;  height: 55.5%; padding: .3%;  border-radius: 14px; }
.pd-device-spec { display: grid; grid-template-columns: 670fr 380fr 243fr; column-gap: 2.4%; margin-top: 56px; }
.pd-device-spec li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; row-gap: 8px; padding-top: 20px; border-top: 2px solid rgba(26,26,26,.15); }
.pd-device-spec li.on { border-top: 3px solid var(--pd-blue); }
.pd-device-spec .en { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.pd-device-spec li.on .en { color: var(--pd-blue); }
.pd-device-spec .sz { text-align: right; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; color: rgba(26,26,26,.35); }
.pd-device-spec .ko { grid-column: 1 / -1; font-size: 15px; color: var(--pd-gray); }

/* 디자인 시스템 — 알약형 컬러 + 타이포 카드 2장 */
.pd-system { padding-top: 200px; }
.pd-colors { display: flex; gap: 22px; }
.pd-colors > div { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 100px; padding: 0 48px; border-radius: 50px; background: var(--c); color: #fff; }
.pd-colors .c-main { flex: 780 1 0; }
.pd-colors .c-sub { flex: 398 1 0; padding: 0 42px; }
.pd-colors b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.pd-colors span { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); }
.pd-swatch { display: flex; gap: 18px; margin-top: 20px; }
.pd-swatch li { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 96px; padding: 0 38px; border-radius: 48px; background: var(--c); color: var(--pd-ink); }
.pd-swatch li:last-child { border: 1px solid rgba(26,26,26,.12); }
.pd-swatch li.dk { color: #fff; }
.pd-swatch b { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; }
.pd-swatch span { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500; opacity: .8; }
.pd-type { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pd-type .tb { min-height: 460px; padding: 80px 44px 50px 56px; border-radius: 14px; background: #f5f5f5; }
.pd-type .nm { font-size: 38px; font-weight: 700; letter-spacing: -0.04em; }
.pd-type .nm span { margin-left: 22px; vertical-align: middle; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--pd-gray); }
.pd-type .sm { margin-top: 26px; font-size: 14px; line-height: 1.85; letter-spacing: .01em; color: rgba(26,26,26,.75); word-break: break-all; }
.pd-type .wb { display: inline-flex; align-items: center; height: 24px; margin-top: 56px; padding: 0 14px; border-radius: 12px; background: #bbb; font-size: 11.5px; color: #fff; }
.pd-type .ws { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; }
.pd-type .ws li { font-size: 15px; letter-spacing: -0.02em; color: rgba(26,26,26,.8); }
.pd-type .wn { margin-top: 22px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: .02em; color: rgba(26,26,26,.4); }

/* 메인 페이지 — 브라우저 창 안에서 전체 화면 이미지를 스크롤 */
.pd-main { padding-top: 180px; }
.pd-browser { position: relative; margin-top: 24px; overflow: hidden; border-radius: 6px; background: #e8e6e2; box-shadow: 0 24px 60px -12px rgba(26,20,15,.12); }
.pd-browser .bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; }
.pd-browser .bar i { flex: 0 0 10px; height: 10px; border-radius: 50%; background: rgba(26,26,26,.16); }
.pd-browser .bar .addr { flex: 1; min-width: 0; max-width: 1020px; height: 20px; margin-left: 16px; padding: 0 14px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.7);
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; line-height: 20px; color: rgba(26,26,26,.5); white-space: nowrap; text-overflow: ellipsis; }
.pd-browser .shot { height: min(820px, 68vw); overflow-y: auto; background: #fff; scrollbar-width: thin; }
.pd-browser .shot img { display: block; width: 100%; height: auto; }
.pd-browser .hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 16px;
    background: rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(26,20,15,.08); font-size: 13px; color: rgba(26,26,26,.6); white-space: nowrap; pointer-events: none; transition: opacity .3s; }
.pd-browser:hover .hint { opacity: 0; }
/* 스크롤 연동(모션 정의 #798:2 B) — 고정은 sticky, 캡처 이동·진행률은 view.skin.php 스크립트 */
.pd-browser .prog { display: none; position: absolute; top: 46px; right: 2px; bottom: 2px; width: 6px; pointer-events: none; }
.pd-browser .prog i { display: block; height: 40px; border-radius: 3px; background: #c1c1c1; will-change: transform; }
.pd-shot-link { display: none; position: absolute; inset: 44px 0 0; z-index: 2; }
.pd-main.is-pin .pd-in { position: sticky; }
.pd-main.is-pin .pd-browser .shot { height: min(820px, 68vw, calc(100vh - 140px)); overflow: hidden; overflow: clip; }
.pd-main.is-pin .pd-browser .shot img { will-change: transform; }
.pd-main.is-pin .pd-browser .prog { display: block; }
.pd-main.is-pin .pd-browser:hover .hint { opacity: 1; }
.pd-main.is-pin .pd-browser .hint.is-end { opacity: 0; }
.pd-main.is-touch .pd-browser .shot { height: 480px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pd-main.is-calm .pd-browser .shot { overflow: hidden; }
.pd-main.is-calm .pd-shot-link { display: block; }

/* 서브 페이지 — 남색 그라디언트, 3열 메이슨리 + 노트 카드 */
.pd-sub { margin-top: 160px; padding: 100px 0 110px; background: linear-gradient(133deg, #252739 14.3%, #353a64 53.6%, #252739 85.7%); color: #fff; }
.pd-sub .pd-label { color: rgba(255,255,255,.45); }
.pd-sub .pd-tit { color: #fff; }
.pd-sub .pd-desc { color: rgba(255,255,255,.6); }
.pd-sub-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.18); }
.pd-sub-hd .cnt { flex-shrink: 0; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pd-sub-grid { margin-top: 40px; columns: 3; column-gap: 24px; }
.pd-sub-grid .it { margin: 0 0 40px; break-inside: avoid; }
.pd-sub-grid .im { overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.06); }
.pd-sub-grid .im img { display: block; width: 100%; height: auto; }
.pd-sub-grid .im .pd-ph-box { aspect-ratio: 384 / 598; background: rgba(255,255,255,.06); color: rgba(255,255,255,.4); }
.pd-sub-grid figcaption { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; padding: 18px 2px 14px; border-bottom: 1px solid rgba(255,255,255,.18); }
.pd-sub-grid .e { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #c6d2ff; }
.pd-sub-grid .k { grid-column: 1; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,.9); }
.pd-sub-grid .no { grid-column: 2; grid-row: 1 / 3; align-self: end; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; color: rgba(255,255,255,.4); }
.pd-sub-grid .note { display: flex; flex-direction: column; min-height: 560px; padding: 40px 32px 32px; border-radius: 4px; background: rgba(255,255,255,.1); }
.pd-sub-grid .note .l { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pd-sub-grid .note .t { margin-top: 16px; font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; }
.pd-sub-grid .note .d { margin-top: 18px; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.65); word-break: keep-all; }
.pd-sub-grid .note dl { margin: auto 0 0; padding-top: 40px; }
.pd-sub-grid .note dl div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.pd-sub-grid .note dt { color: rgba(255,255,255,.5); }
.pd-sub-grid .note dd { margin: 0; color: #fff; text-align: right; }

/* 모바일 — 왼쪽 설명, 오른쪽 폰 2대 */
.pd-mobile { padding-top: 180px; }
.pd-mobile .pd-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; }
.pd-mb-tx { flex: 0 1 560px; min-width: 0; }
.pd-mobile .pd-sys-t, .pd-admin .pd-sys-t { font-size: 26px; }
.pd-mobile .pd-sys-h, .pd-admin .pd-sys-h { margin: 32px 0 12px; font-size: 15px; }
.pd-mb-pills { display: flex; gap: 12px; }
.pd-mb-pills .pp { flex: 230 1 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 72px; padding: 0 28px; border: 1px solid var(--pd-blue); border-radius: 36px; background: #fff; }
.pd-mb-pills .pp.on { flex: 310 1 0; background: var(--pd-blue); color: #fff; }
.pd-mb-pills b { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.pd-mb-pills span { font-size: 12px; color: rgba(26,26,26,.55); }
.pd-mb-pills .on span { color: rgba(255,255,255,.8); }
.pd-mb-opt { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-mb-opt li { padding: 24px; border-radius: 10px; background: #f2f2f0; }
.pd-mb-opt .v { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.pd-mb-opt .r { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; color: rgba(26,26,26,.5); }
.pd-mb-opt .r i { flex: 0 0 16px; font-style: normal; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; color: rgba(26,26,26,.35); }
.pd-mb-opt .r.mo { font-weight: 600; color: var(--pd-ink); }
.pd-mb-opt .r.mo i { color: var(--pd-blue); }
.pd-mb-ph { flex: 0 1 580px; display: flex; align-items: flex-end; gap: 30px; }
.pd-mb-ph .ph { margin: 0; }
.pd-mb-ph .ph-1 { flex: 250 1 0; }
.pd-mb-ph .ph-2 { flex: 300 1 0; }
.pd-mb-ph .sc { aspect-ratio: 250 / 525; padding: 7px; border-radius: 34px; background: #111; box-shadow: 0 30px 50px -20px rgba(15,23,51,.35); }
.pd-mb-ph .sc .pd-ph-box { border-radius: 28px; }
.pd-mb-ph figcaption { margin-top: 14px; font-size: 13px; font-weight: 600; color: rgba(26,26,26,.6); }

/* 관리자 — 연한 파랑 배경, 하단에 관리자 화면 콜라주 */
.pd-admin { margin-top: 180px; padding-top: 120px; background: #f0f5ff; }
.pd-ad-ed { display: flex; gap: 16px; }
.pd-ad-ed > div { flex: 484 1 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 84px; padding: 0 40px; border: 1px solid var(--pd-blue); border-radius: 42px; background: #fff; }
.pd-ad-ed > div.on { flex: 700 1 0; background: var(--pd-blue); color: #fff; }
.pd-ad-ed b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.pd-ad-ed span { font-size: 12.5px; color: rgba(0,0,0,.6); }
.pd-ad-ed .on span { color: rgba(255,255,255,.82); }
.pd-ad-fn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pd-ad-fn li { min-height: 168px; padding: 30px 28px; border-radius: 10px; background: #fff; }
.pd-ad-fn .n { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--pd-blue); }
.pd-ad-fn b { display: block; margin-top: 14px; font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.pd-ad-fn p { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--pd-gray); word-break: keep-all; }
.pd-ad-shots { margin-top: 60px; overflow: hidden; background: #dee9f3; }
.pd-ad-shots .pd-in { position: relative; aspect-ratio: 1200 / 787; }
.pd-ad-shots .s { position: absolute; width: 23.5%; overflow: hidden; border-radius: 10px; box-shadow: 0 0 10px rgba(15,23,51,.3); }
.pd-ad-shots .s .pd-ph-box { background: repeating-linear-gradient(135deg, #f4f6fa 0 12px, #e9eef5 12px 24px); }
.pd-ad-shots .s0 { left: 0;      top: 0;     height: 62.5%; }
.pd-ad-shots .s1 { left: 25.75%; top: 22.4%; height: 56.4%; }
.pd-ad-shots .s2 { left: 76.5%;  top: 11.3%; height: 57.3%; }
.pd-ad-shots .s3 { left: 51.25%; top: 52.2%; height: 50%; }
.pd-ad-shots .s4 { left: 51.25%; top: 0;     height: 48.9%; }
/* 관리자 화면 장수별 배치 — 위 s0~s4 는 5장(c5, 시안 그대로). 1~4장은 아래로 덮어쓴다 */
.pd-ad-shots.c1 .pd-in { aspect-ratio: 1200 / 720; }
.pd-ad-shots.c1 .s0 { left: 10%; top: 8%; width: 80%; height: 84%; }
.pd-ad-shots.c2 .pd-in { aspect-ratio: 1200 / 720; }
.pd-ad-shots.c2 .s0 { left: 3%;  top: 4%;  width: 45%; height: 78%; }
.pd-ad-shots.c2 .s1 { left: 52%; top: 18%; width: 45%; height: 78%; }
.pd-ad-shots.c3 .pd-in { aspect-ratio: 1200 / 760; }
.pd-ad-shots.c3 .s0 { left: 0;   top: 4%;  width: 57%; height: 88%; }
.pd-ad-shots.c3 .s1 { left: 60%; top: 0;   width: 40%; height: 45%; }
.pd-ad-shots.c3 .s2 { left: 60%; top: 50%; width: 40%; height: 45%; }
.pd-ad-shots.c4 .pd-in { aspect-ratio: 1200 / 820; }
.pd-ad-shots.c4 .s0 { left: 1%;  top: 0;   width: 47%; height: 45%; }
.pd-ad-shots.c4 .s1 { left: 52%; top: 7%;  width: 47%; height: 45%; }
.pd-ad-shots.c4 .s2 { left: 1%;  top: 49%; width: 47%; height: 45%; }
.pd-ad-shots.c4 .s3 { left: 52%; top: 56%; width: 47%; height: 44%; }
/* 기능 카드 — 입력한 개수만큼 칸을 맞춘다 */
.pd-ad-fn.n1 { grid-template-columns: 1fr; }
.pd-ad-fn.n2 { grid-template-columns: repeat(2, 1fr); }

/* 마무리 — Thanks for Watching + 이전/다음 2칸 */
.pd-end { padding: 100px 0 110px; text-align: center; }
.pd-end-t { font-size: clamp(36px, 3.1vw, 58px); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em; color: var(--pd-ink); }
.pd-end-t span { font-family: 'Archivo', 'Space Grotesk', sans-serif; letter-spacing: -0.04em; }
.pd-nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: 170px; border-top: 1px solid rgba(26,26,26,.25); border-bottom: 1px solid rgba(26,26,26,.25); text-align: left; }
.pd-nav .cell { display: block; min-width: 0; padding: 18px 24px 20px 0; }
.pd-nav .cell.next { padding: 18px 0 20px 24px; border-left: 1px solid rgba(26,26,26,.12); text-align: right; }
.pd-nav .lb { display: flex; align-items: center; gap: 14px; font-size: 11px; color: rgba(26,26,26,.35); }
.pd-nav .lb b { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: rgba(27,77,255,.8); }
.pd-nav .next .lb { flex-direction: row-reverse; }
.pd-nav .bd { display: flex; gap: 22px; margin-top: 18px; padding: 0 24px; }
.pd-nav .next .bd { flex-direction: row-reverse; }
.pd-nav .th { flex: 0 0 150px; height: 108px; overflow: hidden; border-radius: 3px; background: #e8e8e6; }
.pd-nav .th img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pd-nav .tx { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; }
.pd-nav .tx .c { font-size: 11px; color: rgba(27,77,255,.75); }
.pd-nav .tx .t { margin-top: 6px; overflow: hidden; font-size: 17px; font-weight: 700; letter-spacing: -0.03em; color: var(--pd-ink); white-space: nowrap; text-overflow: ellipsis; transition: color .25s; }
.pd-nav .tx .d { margin-top: 14px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: .02em; color: rgba(26,26,26,.3); }
.pd-nav a.cell:hover .t { color: var(--pd-blue); }
.pd-nav a.cell:hover .th img { transform: scale(1.05); }
.pd-nav .arw { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 16px 24px; border-top: 1px solid rgba(26,26,26,.12);
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 14px; color: rgba(26,26,26,.35); }
.pd-nav .arw a { transition: color .2s; }
.pd-nav .arw a:hover { color: var(--pd-blue); }
.pd-list-btn { margin-top: 40px; }
.pd-list-btn a { display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 46px; border: 1px solid rgba(26,26,26,.22); border-radius: 23px;
    font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--pd-ink); transition: background .25s, color .25s, border-color .25s; }
.pd-list-btn a:hover { border-color: var(--pd-ink); background: var(--pd-ink); color: #fff; }

@media screen and (max-width: 1250px) {
    .pd-hero { padding-top: 170px; }
    .pd-concept, .pd-elem { padding-top: 120px; }
    .pd-elem-list li { gap: 40px; }
    .pd-elem-list .ic { flex-basis: 110px; width: 110px; height: 110px; }
    .pd-device { margin-top: 120px; }
    .pd-system { padding-top: 160px; }
    .pd-main, .pd-mobile { padding-top: 150px; }
    .pd-sub, .pd-admin { margin-top: 140px; }
    .pd-type .tb { padding: 60px 36px 44px; }
    .pd-mobile .pd-in { gap: 40px; }
    .pd-nav { margin-top: 130px; }
}
@media screen and (max-width: 950px) {
    .pd-hero { padding-top: 150px; }
    .pd-hero-d { margin-top: 32px; }
    .pd-hero-tags { margin-top: 36px; }
    .pd-hero-img { margin-top: 48px; aspect-ratio: 16 / 10; }
    .pd-concept, .pd-elem { padding-top: 100px; }
    .pd-elem-list .ic { display: none; }
    .pd-device { margin-top: 100px; padding: 70px 0 90px; }
    .pd-device-stage { margin-top: 56px; }
    .pd-device-stage .dv { border-radius: 10px; }
    .pd-device-stage .dv .sc { border-radius: 7px; }
    .pd-system, .pd-main, .pd-mobile { padding-top: 120px; }
    .pd-sub, .pd-admin { margin-top: 120px; }
    .pd-colors { flex-direction: column; gap: 12px; }
    .pd-colors > div { flex: none !important; }
    .pd-swatch { flex-wrap: wrap; gap: 12px; }
    .pd-swatch li { flex: 1 1 calc(33.333% - 8px); }
    .pd-type { grid-template-columns: 1fr; }
    .pd-type .tb { min-height: 0; }
    .pd-sub-grid { columns: 2; }
    .pd-mobile .pd-in { flex-direction: column; align-items: stretch; }
    .pd-mb-tx { flex: none; }
    .pd-mb-ph { flex: none; width: min(100%, 520px); margin: 20px auto 0; }
    .pd-nav { margin-top: 100px; }
}
@media screen and (max-width: 650px) {
    .pd-hero { padding-top: 130px; }
    .pd-hero .menuBox { top: 84px; }
    .pd-hero-d { font-size: 14px; line-height: 1.9; }
    .pd-hero-tags { gap: 8px; }
    .pd-hero-tags li { height: 32px; padding: 0 14px; font-size: 12px; }
    .pd-hero-meta { gap: 6px 20px; }
    .pd-hero-img { aspect-ratio: 4 / 3; }
    .pd-concept-l { font-size: 13px; }
    .pd-concept-t { margin-top: 16px; }
    .pd-concept-d, .pd-desc { font-size: 14px; }
    .pd-concept-d br, .pd-desc br, .pd-elem-list .d br { display: none; }
    .pd-elem-list li { gap: 18px; padding: 28px 0 30px; }
    .pd-elem-list .k { font-size: 24px; }
    .pd-elem-list .d { margin-top: 12px; font-size: 14px; }
    .pd-tit { font-size: 26px; }
    .pd-sys-t, .pd-mobile .pd-sys-t, .pd-admin .pd-sys-t { font-size: 24px; }
    .pd-sys-h { margin: 36px 0 14px; font-size: 17px; }
    .pd-device-stage { margin-top: 40px; }
    .pd-device-stage .dv { border-radius: 6px; }
    .pd-device-stage .dv .sc { border-radius: 4px; }
    .pd-device-spec { grid-template-columns: 1fr; row-gap: 18px; margin-top: 36px; }
    .pd-device-spec .en { font-size: 17px; }
    .pd-system, .pd-main, .pd-mobile { padding-top: 90px; }
    .pd-sub, .pd-admin { margin-top: 90px; }
    .pd-colors > div { height: 80px; padding: 0 28px !important; }
    .pd-swatch { gap: 10px; }
    .pd-swatch li { flex-basis: calc(50% - 5px); height: 72px; padding: 0 24px; }
    .pd-type .tb { padding: 40px 24px 32px; }
    .pd-type .nm { font-size: 28px; }
    .pd-type .nm span { display: block; margin: 8px 0 0; }
    .pd-type .wb { margin-top: 32px; }
    .pd-browser .bar { padding: 0 14px; }
    .pd-browser .bar .addr { margin-left: 8px; }
    .pd-browser .hint { display: none; }
    .pd-sub { padding: 70px 0 70px; }
    .pd-sub-hd { flex-direction: column; align-items: flex-start; padding-bottom: 28px; }
    .pd-sub-grid { margin-top: 28px; column-gap: 12px; }
    .pd-sub-grid .it { margin-bottom: 24px; }
    .pd-sub-grid figcaption { padding: 12px 0 10px; }
    .pd-sub-grid .k { font-size: 13px; }
    .pd-sub-grid .note { min-height: 0; padding: 24px 18px; }
    .pd-sub-grid .note .t { font-size: 18px; }
    .pd-sub-grid .note .d { font-size: 13px; }
    .pd-mb-pills { flex-direction: column; }
    .pd-mb-pills .pp { flex: none !important; height: 66px; }
    .pd-mb-opt { gap: 10px; }
    .pd-mb-opt li { padding: 18px 16px; }
    .pd-mb-opt .r { gap: 8px; font-size: 11.5px; }
    .pd-mb-ph { gap: 16px; }
    .pd-mb-ph .sc { padding: 5px; border-radius: 24px; }
    .pd-mb-ph .sc .pd-ph-box { border-radius: 20px; }
    .pd-admin { padding-top: 80px; }
    .pd-ad-ed { flex-direction: column; gap: 10px; }
    .pd-ad-ed > div { flex: none !important; height: 76px; padding: 0 28px; }
    .pd-ad-fn, .pd-ad-fn.n2 { grid-template-columns: 1fr; gap: 10px; }
    .pd-ad-fn li { min-height: 0; padding: 24px 22px; }
    .pd-ad-shots { margin-top: 40px; }
    .pd-ad-shots .s { border-radius: 6px; }
    .pd-end { padding: 70px 0 80px; }
    .pd-nav { grid-template-columns: 1fr; margin-top: 70px; }
    .pd-nav .cell, .pd-nav .cell.next { padding: 16px 0 18px; }
    .pd-nav .cell.next { border-left: 0; border-top: 1px solid rgba(26,26,26,.12); }
    .pd-nav .bd { gap: 14px; padding: 0; }
    .pd-nav .th { flex-basis: 96px; height: 70px; }
    .pd-nav .tx { padding-top: 2px; }
    .pd-nav .tx .t { font-size: 15px; }
    .pd-nav .tx .d { margin-top: 8px; }
    .pd-nav .arw { padding: 14px 4px; }
}

/* ===== 포트폴리오 상세 — 관리자 입력 이미지(모바일 · 관리자 화면) ===== */
.pd-mb-ph .sc img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 28px; }
.pd-ad-shots .s img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; background: #fff; }
@media screen and (max-width: 650px) {
    .pd-mb-ph .sc img { border-radius: 20px; }
}

/* ===== 포트폴리오 글쓰기 — 상세 페이지 콘텐츠 입력 ===== */
.write-form .pd-form { margin: 48px 0 0; padding-top: 36px; border-top: 1px solid #e2e2e0; }
.write-form .pd-form.pd-form-first { margin-top: 0; padding-top: 0; border-top: 0; }
.write-form .pd-fs > summary small { margin-left: 6px; margin-right: auto; font-size: 12.5px; font-weight: 400; color: #999; }
.write-form .pd-form-hd { margin-bottom: 18px; font-size: 18px; font-weight: 700; color: #222; letter-spacing: -0.02em; }
.write-form .pd-form-hd span { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: #999; }
.write-form .pd-type { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 16px; padding: 18px 22px; border: 1px solid #e2e2e0; border-radius: 12px; background: #fff; }
.write-form .pd-type-lb { font-size: 15px; font-weight: 700; color: #333; }
.write-form .pd-type label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: #333; cursor: pointer; }
.write-form .pd-type input[type="radio"],
.write-form .pd-type input[type="checkbox"] { width: auto; margin: 0; padding: 0; accent-color: #222; }
.write-form .pd-admin-on { margin: 0 22px 16px; }
.write-form .pd-type-help { flex-basis: 100%; font-size: 12px; color: #999; }
.write-form .pd-fs { margin-bottom: 12px; border: 1px solid #e2e2e0; border-radius: 12px; background: #fff; }
.write-form .pd-fs > summary { padding: 18px 22px; font-size: 15px; font-weight: 700; color: #333; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.write-form .pd-fs > summary::-webkit-details-marker { display: none; }
.write-form .pd-fs > summary::after { content: '+'; font-size: 20px; font-weight: 400; color: #999; }
.write-form .pd-fs[open] > summary::after { content: '−'; }
.write-form .pd-fs[open] > summary { border-bottom: 1px solid #eee; }
.write-form .pd-fs > :not(summary) { margin-left: 22px; margin-right: 22px; }
.write-form .pd-fs > :nth-child(2) { margin-top: 22px; }
.write-form .pd-fs > :last-child { margin-bottom: 22px; }
.write-form .pd-fs .field { margin-bottom: 14px; }
.write-form .pd-fs label { font-size: 13px; margin-bottom: 7px; }
.write-form .pd-fs input, .write-form .pd-fs textarea { padding: 11px 14px; font-size: 14px; }
.write-form .pd-fs textarea { min-height: 0; }
.write-form .pd-sub-lb { margin: 22px 0 10px; font-size: 14px; font-weight: 700; color: #222; }
.write-form .pd-sub-lb span { margin-left: 6px; font-size: 12.5px; font-weight: 400; color: #999; }
.write-form .pd-help { margin-bottom: 14px; font-size: 13px; color: #888; line-height: 1.6; word-break: keep-all; }
.write-form .grid-kd { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.write-form .grid-c { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.write-form .grid3 { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 12px; }
.write-form .grid-ad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.write-form .pd-fs .grid2 { gap: 12px; }
.write-form .file-drop.sm { margin-top: 8px; padding: 18px 12px; }
.write-form .file-drop.sm .t { font-size: 13px; }
.write-form .file-drop.sm .file-name { margin-top: 8px; padding: 6px 8px; font-size: 12px; }
.write-form .pd-fs .file_del { margin-top: 6px; font-size: 12.5px; }
.write-form .pd-fs .file_del label { margin: 0; font-weight: 500; }
@media screen and (max-width: 650px) {
    .write-form .grid-kd, .write-form .grid-c, .write-form .grid3 { grid-template-columns: 1fr; gap: 0; }
    .write-form .grid-ad { grid-template-columns: repeat(2, 1fr); }
    .write-form .pd-fs > :not(summary) { margin-left: 16px; margin-right: 16px; }
}
/* 모바일 캡처가 3장일 때 */
.pd-mb-ph .ph-3 { flex: 250 1 0; }
.pd-mb-ph.is-3 { flex-basis: 720px; gap: 20px; }
@media screen and (max-width: 650px) {
    .pd-mb-ph.is-3 { gap: 10px; }
}

/* ============================================================
   SELECTED PROJECTS — 메인 포트폴리오 섹션 B
   Figma "[JOB] 메인 — 포트폴리오 섹션 B" #802:2 (1920×1240 실측)
   모션 "[JOB] 포트폴리오 섹션 B — 모션 정의" #808:2 → script.js workSelectedHandler
   --u = 시안 1px. 화면 폭(1920)·높이(1240) 중 더 빠듯한 쪽에 맞춰 통째로 줄어든다.
   세로 위치는 화면 가운데(시안 y 620)를 기준으로 잡는다.
   이전 WORK 스택(.wk-*) 규칙은 위에 남아 있지만 더 이상 쓰는 마크업이 없다. 백업 .bak_261001_wsb
============================================================ */
.work-sel { --u: clamp(.45px, min(calc(100vw / 1920), calc(100vh / 1240)), 1.2px);
    --ease-x: cubic-bezier(.16, 1, .3, 1);   /* expo.out */
    position: relative; z-index: 2; background: #07080F; color: #fff; }
.ws-pin { position: relative; height: 100vh; min-height: 600px; overflow: hidden;
    background: linear-gradient(135deg, #141A33 10%, #0A0D1C 50%, #07080F 90%); }
.work-sel.is-pinned .ws-pin { position: sticky; top: 0; }

.ws-glow { position: absolute; z-index: 0; width: calc(900 * var(--u)); height: calc(800 * var(--u)); border-radius: 50%; pointer-events: none; }
.ws-glow1 { left: calc(200 * var(--u)); top: calc(50% - 820 * var(--u));
    background: radial-gradient(closest-side, rgba(27,77,255,.34), rgba(27,77,255,0)); }
.ws-glow2 { left: calc(1150 * var(--u)); top: calc(50% - 190 * var(--u));
    background: radial-gradient(closest-side, rgba(123,92,255,.26), rgba(123,92,255,0)); }

/* 대형 타이포 — Archivo 128 / -0.04em. 헤더(고정)와 겹치지 않게 위쪽 하한을 둔다 */
.ws-typo { position: absolute; z-index: 1; margin: 0; font-family: 'Archivo', 'Space Grotesk', sans-serif;
    font-size: calc(128 * var(--u)); font-weight: 700; letter-spacing: -0.04em; line-height: 1.08;
    color: rgba(255,255,255,.95); white-space: nowrap; will-change: transform; pointer-events: none; }
.ws-typo-top { left: calc(40 * var(--u)); top: max(96px, calc(50% - 572 * var(--u))); }
.ws-typo-bot { right: calc(40 * var(--u)); top: calc(50% + 410 * var(--u)); }

.ws-all { position: absolute; z-index: 3; right: calc(30 * var(--u)); top: max(112px, calc(50% - 532 * var(--u)));
    display: flex; align-items: center; gap: 16px; }
.ws-all b { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.ws-all i { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: rgba(255,255,255,.12); font-style: normal; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700;
    transition: background .3s ease, transform .3s ease; }
.ws-all:hover i { background: rgba(255,255,255,.22); transform: translateX(3px); }

/* 레일 — 카드 묶음(높이 약 520 + 최대 오프셋 200)을 화면 가운데에 둔다 */
.ws-rail { position: absolute; z-index: 2; left: 0; right: 0; top: calc(50% - 360 * var(--u)); }
.ws-track { display: flex; align-items: flex-start; gap: calc(120 * var(--u)); width: max-content; margin: 30px 0;
    padding-left: calc(160 * var(--u)); will-change: transform; }

/* 카드 — 이미지 640×365 + 간격 60 + 정보 440 = 1140 (시안 911 → 요청으로 약 1.25배 확대) */
/* 클래스명 wsp-card — 고민 카드(.ws-card 흰 박스)와 이름이 겹쳐 흰 배경·패딩이 새어 들어오던 것을 분리 */
.wsp-card { position: relative; flex: 0 0 auto; margin-top: calc(var(--oy, 0) * var(--u));
    transition: opacity .7s var(--ease-x), transform .7s var(--ease-x); }
.work-sel.is-pinned .wsp-card:not(.is-in),
.work-sel.is-stacked .wsp-card:not(.is-in) { opacity: 0; transform: translateY(60px); }
.wsp-card.is-in:hover { transform: translateY(-8px); transition-duration: .5s; }
.ws-link { display: flex; align-items: flex-start; gap: calc(60 * var(--u)); color: inherit; }

.ws-media { flex: 0 0 auto; width: max(340px, calc(640 * var(--u))); }
.ws-img-box { position: relative; display: block; aspect-ratio: 500 / 285; border-radius: 4px; overflow: hidden;
    box-shadow: 0 22px 54px -11px rgba(0,0,0,.3); background: #11152A; }
.ws-img { position: absolute; inset: 0; background-position: center top; background-size: cover; background-repeat: no-repeat;
    transform: scale(1.08); transition: transform .9s var(--ease-x); }
.wsp-card.is-in .ws-img { transform: scale(1); }
.wsp-card.is-in:hover .ws-img { transform: scale(1.04); transition-duration: .6s; }

/* 고스트 번호 그룹 — 이미지 아래 왼쪽 */
.ws-ghost { margin-top: calc(56 * var(--u)); display: flex; align-items: flex-start; gap: max(24px, calc(40 * var(--u))); }
.ws-num { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: max(52px, calc(88 * var(--u))); font-weight: 700;
    letter-spacing: -0.04em; line-height: 1.08; color: rgba(255,255,255,.12); will-change: transform; }
.ws-type { margin-top: calc(15 * var(--u)); display: flex; flex-direction: column; gap: max(6px, calc(10 * var(--u))); }
.ws-type b { font-size: max(16px, calc(20 * var(--u))); font-weight: 500; letter-spacing: -0.01em; color: #fff; }
.ws-type em { font-style: normal; font-size: max(14px, calc(16 * var(--u))); font-weight: 500; letter-spacing: -0.01em; color: rgba(255,255,255,.5); }

/* 정보 */
.ws-info { flex: 0 0 auto; width: max(320px, calc(440 * var(--u))); margin-top: calc(14 * var(--u)); }
.ws-yr { display: flex; align-items: center; gap: 16px; }
.ws-yr span { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.35); }
.ws-yr i { flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.16); }
.ws-en { margin-top: max(10px, calc(12 * var(--u))); font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: rgba(91,155,255,.85); }
.ws-name { margin-top: max(10px, calc(14 * var(--u))); font-size: max(24px, calc(36 * var(--u))); font-weight: 700; letter-spacing: -0.04em; line-height: 1.2; color: #fff; word-break: keep-all; }
.ws-desc { margin-top: max(10px, calc(12 * var(--u))); font-size: max(15px, calc(18 * var(--u))); line-height: 1.85; letter-spacing: -0.02em; color: rgba(255,255,255,.5); word-break: keep-all; }
.ws-tags { margin-top: max(16px, calc(24 * var(--u))); display: flex; flex-wrap: wrap; gap: 8px; }
.ws-tags span { display: inline-flex; align-items: center; height: 26px; padding: 0 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px;
    font-size: 11px; font-weight: 500; letter-spacing: -0.01em; color: rgba(255,255,255,.6); white-space: nowrap; }
/* VIEW PROJECT — 위 구분선이 hover 때 좌→우로 파랗게 채워진다 */
.ws-view { position: relative; margin-top: max(16px, calc(24 * var(--u))); padding-top: max(14px, calc(17 * var(--u)));
    display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.16); }
.ws-view span { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.ws-arr { font-style: normal; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: #5B9BFF;
    transition: transform .4s var(--ease-x); }
.ws-line { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: #5B9BFF;
    transform: scaleX(0); transform-origin: left center; transition: transform .4s ease; }
.wsp-card:hover .ws-arr { transform: translateX(6px); }
.wsp-card:hover .ws-line { transform: scaleX(1); transition: transform .5s var(--ease-x); }

/* 진행 바 — 가로 진행률 1:1, 현재 카드 번호 (01 / 05) */
.ws-progress { position: absolute; z-index: 3; left: calc(40 * var(--u)); top: calc(50% + 500 * var(--u));
    display: flex; align-items: center; gap: 16px; }
.ws-count { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.4); }
.ws-count b { font-weight: 700; color: #fff; }
.ws-bar { position: relative; width: max(140px, calc(200 * var(--u))); height: 1px; background: rgba(255,255,255,.16); }
.ws-bar i { position: absolute; inset: 0; background: #5B9BFF; transform: scaleX(0); transform-origin: left center; }

/* ── 768 미만(.is-stacked) : pin 없이 1열 세로, 어긋남 제거, 정보는 이미지 아래 ── */
.work-sel.is-stacked .ws-pin { height: auto; min-height: 0; padding: 110px 20px 70px; }
.work-sel.is-stacked .ws-typo { position: relative; left: auto; right: auto; top: auto; font-size: clamp(44px, 12vw, 96px); line-height: 1; text-align: left; transform: none !important; }
/* 960 이하: SELECTED / PROJECTS 를 왼쪽 정렬로 붙여 한 덩어리 타이틀로 */
.work-sel.is-stacked .ws-typo-bot { margin-top: 4px; }
.work-sel.is-stacked .ws-all { position: relative; right: auto; top: auto; margin: 20px 0 36px; justify-content: flex-start; }
.work-sel.is-stacked .ws-rail { position: relative; top: auto; }
.work-sel.is-stacked .ws-track { flex-direction: column; align-items: stretch; gap: 64px; width: auto; padding: 0; transform: none !important; }
.work-sel.is-stacked .wsp-card { margin-top: 0; }
.work-sel.is-stacked .ws-link { flex-direction: column; gap: 20px; }
.work-sel.is-stacked .ws-media,
.work-sel.is-stacked .ws-info { width: 100%; margin-top: 0; }
.work-sel.is-stacked .ws-ghost { margin-top: 20px; }
.work-sel.is-stacked .ws-num { transform: none !important; }
.work-sel.is-stacked .ws-progress { display: none; }
.work-sel.is-stacked .ws-glow { width: 120vw; height: 90vw; }

/* ── 모션 최소화(.is-grid) : pin·scrub 해제, 768 이상은 2열 그리드, 진입은 fade 만 ── */
@media screen and (min-width: 768px) {
    .work-sel.is-grid .ws-pin { padding: 130px 40px 90px; }
    .work-sel.is-grid .ws-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px 60px; max-width: 1200px; margin: 0 auto; }
}
.work-sel.is-grid .wsp-card:not(.is-in) { transform: none; }
.work-sel.is-grid .wsp-card, .work-sel.is-grid .ws-img { transform: none !important; transition: opacity .6s ease; }