/* HAO 기본 브랜드 오버라이드 — Pretendard 폰트 + 하오 오렌지 포인트(#e83817) */
html, body, button, input, select, textarea { font-family: 'Pretendard', 'SUIT', sans-serif; }
* { font-family: 'Pretendard', 'SUIT', sans-serif; }
.mont, .prog-num, .prog-total { font-family: 'Pretendard', 'SUIT', sans-serif; }

/* 포인트 컬러 보강(혹시 남은 곳) */
.text-point { color: #e83817 !important; }

/* HAO 헤더 상태별 글자색 보정 */
.header .nav a { color: var(--ink); }                       /* 흰 헤더(스크롤 시): 진한 잉크 */
.header .nav a.nav__center { color: var(--accent); }         /* 센터 링크: 하오 오렌지 */
.header.on-dark:not(.is-stuck) .nav a { color: rgba(255,255,255,.92); }        /* 히어로 위(투명): 흰 글씨 */
.header.on-dark:not(.is-stuck) .nav a.nav__center { color: #ffd9cf; }

/* ===== 한큐 차별화: 색·모티프·모션 살짝 틀기 ===== */
/* 1) 화이트 팔레트 (깨끗한 화이트 느낌) */
body { background: #ffffff; }
.wrapper { background: #ffffff !important; }   /* 한큐 .wrapper 검은배경 → 흰색(검은 비침 방지) */

/* ===== 풀 화이트 테마: 다크 섹션 전부 흰 배경 + 어두운 글씨 ===== */
/* 헤더: 히어로가 흰색이므로 처음부터 흰 헤더 고정 */
.header.on-dark:not(.is-stuck) { background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--line) !important; box-shadow: 0 1px 0 var(--line); }
.header.on-dark:not(.is-stuck) .nav a { color: var(--ink) !important; }
.header.on-dark:not(.is-stuck) .nav a.nav__center { color: var(--accent) !important; }
.header.on-dark:not(.is-stuck) .nav__div { background: var(--line) !important; }
.header.on-dark:not(.is-stuck) .burger span { background: var(--ink) !important; }

/* 기존 영상 히어로 숨김 (GROOVE 스타일 새 히어로로 대체) */
.mVisual { display: none !important; }
/* ★ 한큐는 "히어로 완료 후 섹션 표시"(#main>section:not(.mVisual){opacity:0;visibility:hidden}) 구조라,
   mVisual을 숨기면 트리거가 끊겨 전 섹션이 안 보임 → 섹션을 항상 표시로 강제 */
#main > section { opacity: 1 !important; visibility: visible !important; }
/* 텍스트/카드/포폴 콘텐츠도 항상 표시 (스크롤 리빌 트리거가 히어로 교체로 불안정 → 정적 표시) */
#main .tit-box b, #main .tit-box h3, #main .fill-text, #main .count,
#main .ani_items, #main .ani_items1,
#main .projects-img, #main .portfolio-item, #main .story-item, #main .imgbox li,
#main .card_wrapper .txt-wrap, #main .it-wrap, #main .section6 .list,
#main .section7 .tit-box, #main .section7 .img-area .img {
  opacity: 1 !important; visibility: visible !important;
}
/* 헤딩·카피류는 위치 이동 리빌도 제거(정적) — 단 카드스택/파트너 3D는 제외 */
#main .tit-box b, #main .tit-box h3, #main .fill-text, #main .count,
#main .tit-area .ani_items, #main .tit-box .ani_items {
  transform: none !important;
}

/* ===== GROOVE 스타일 히어로 (하오 오렌지) ===== */
.ghero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 170px 24px 96px; overflow: hidden; box-sizing: border-box;
  background: linear-gradient(180deg, #ffffff 0%, #fff7f3 48%, #ffece4 100%); }
.ghero__bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 14%, rgba(232,56,23,.12), transparent 72%),
    radial-gradient(70% 60% at 84% 104%, rgba(255,170,140,.45), transparent 70%),
    radial-gradient(60% 60% at 8% 0%, rgba(255,210,195,.5), transparent 65%); }
.ghero__bg::after { content:''; position:absolute; inset:0;
  background: radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.0) 60%, rgba(255,255,255,.6) 100%); }
/* groove식 광택 곡선(아크) 빛줄기 */
.ghero__bg::before { content:''; position:absolute; inset:-25% -15%; pointer-events:none; transform: rotate(-10deg);
  background:
    radial-gradient(closest-side at 72% 52%, transparent 60%, rgba(255,255,255,.55) 61%, transparent 64%),
    radial-gradient(closest-side at 80% 46%, transparent 51%, rgba(255,255,255,.40) 52%, transparent 55%),
    radial-gradient(closest-side at 64% 60%, transparent 70%, rgba(255,255,255,.35) 71%, transparent 74%); }
.ghero__inner { position: relative; z-index: 1; max-width: 1120px; }
.ghero__eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--accent); background:rgba(232,56,23,.08); border:1px solid rgba(232,56,23,.18); padding:9px 18px; border-radius:999px; margin-bottom:30px; }
.ghero__eyebrow b { width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; }
.ghero__title { font-size: clamp(38px, 6.4vw, 104px); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; color: #16140f; margin: 0; }
.ghero__ac { color: var(--accent); }
/* 롤링 단어 (groove식 세로 슬라이드 교체) */
.ghero__roll { color: var(--accent); display: inline-block; vertical-align: bottom; overflow: hidden; }
.ghero__roll-word { display: inline-block; will-change: transform, opacity; }
.ghero__roll-word.is-out { transform: translateY(-0.52em); opacity: 0; transition: transform .36s cubic-bezier(.5,0,.5,1), opacity .36s ease; }
.ghero__roll-word.is-in { animation: ghRollIn .48s cubic-bezier(.22,.85,.25,1); }
@keyframes ghRollIn { from { transform: translateY(0.55em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ghero__sub { margin: 34px auto 0; max-width: 760px; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.72; color: #6e6a60; font-weight: 500; }
.ghero__cta { margin-top: 52px; display: inline-flex; align-items: center; gap: 16px; background: #fff; border-radius: 999px; padding: 12px 12px 12px 32px; box-shadow: 0 20px 54px -20px rgba(23,21,15,.32); font-weight: 700; font-size: clamp(16px,1.2vw,19px); color: #16140f !important; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ghero__cta span { color: #16140f !important; }
.ghero__cta:hover { transform: translateY(-3px); box-shadow: 0 28px 64px -18px rgba(232,56,23,.42); }
.ghero__cta i { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 21px; font-style: normal; transition: transform .3s var(--ease); }
.ghero__cta:hover i { transform: rotate(45deg); }
@media (max-width: 760px){ .ghero { padding: 130px 18px 70px; } .ghero__sub br { display:none; } }
.mVisual .visual-title p { color: #6e6a60 !important; }
.mVisual .visual-image .progress-num .prog-total,
.mVisual .visual-image .progress-num .prog-num { color: #16140f !important; }
.mVisual .visual-image .progress-num .bullet { background-color: #16140f !important; }
.mVisual .visual-arr { filter: invert(1) brightness(.25); }

/* 솔루션(section5) / Who We Are(section7): 흰 배경 + 어두운 글씨 */
#main .section5, #main .section7 { background-color: #fff !important; }
#main .section5 .txt h3, #main .section5 .txt p,
#main .section7 .tit-box h3, #main .section7 .tit-box p { color: #16140f !important; }
#main .section7 .img-area:after { background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 45%, rgba(255,255,255,.45) 55%, rgba(255,255,255,.85) 100%) !important; }

/* 파트너(section6): 흰 배경 + 검은 페이드 제거 + 어두운 로고명 */
#main .section6 { background-color: #fff !important; }
#main .section6 .gradient .top, #main .section6 .gradient .bottom { display: none !important; }
#main .section6 .list p { color: #16140f !important; }

/* 다크 섹션의 fill-text도 잉크로 (이미 잉크↔웜그레이 트위스트 적용됨) */
#main .section5 .fill-text, #main .section7 .fill-text { -webkit-text-fill-color: transparent; }
/* keyword cloud 중앙 원: 화이트테마에 맞춰 오렌지로 복귀 */
#main .section4 .main-txt .circle-wrap .circle { background-color: var(--accent) !important; }

/* 2) 시그니처 모티프 교체: 떠있는 동그란 점 → 길쭉한 라운드 바(언더라인 틱) */
/* 제목 밑 주황색 바 장식 제거 (사용자 요청) */
#main .tit-circle::after { display: none !important; }
#main .section4 .main-txt .circle-wrap .circle { background-color: #16120e !important; }  /* 중앙 원: 오렌지 → 차콜(오렌지 글씨 대비) */

/* 3) fill-text 모션 트위스트 (회→흰 대신 웜그레이→잉크, 더 빠르고 다른 이징) */
.tit-box p span.fill-text {
  background: linear-gradient(to right, var(--ink) 0%, var(--ink) 50%, #d2cabd 50%, #d2cabd 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  background-size: 200% 100% !important;
  transition: background-position cubic-bezier(.22,.7,.2,1) 1.1s !important;
}

/* 4) 이미지 라운드 코너 — 한큐의 각진 풀스퀘어와 확실히 다른 느낌 */
.projects-img img,
.portfolio-item .img, .portfolio-item .img img,
.imgbox li .img, .imgbox li .img img,
.section7 .img-area .img, .section7 .img-area .img img { border-radius: 16px !important; overflow: hidden; }
.section3 .imgbox li .img { border-radius: 18px !important; }
/* section7 떠다니는 이미지 = 하오 실제 포폴 촬영컷 (프레임 크기 지정, 원본은 자연크기라 반드시 필요) */
#main .section7 .img-area .img img { width:100% !important; height:100% !important; object-fit:cover; object-position:top center; display:block; }
#main .section7 .img-area .img.item1 { width:clamp(240px,26vw,380px); aspect-ratio:16/10; }
#main .section7 .img-area .img.item2 { width:clamp(300px,32vw,450px); aspect-ratio:16/10; }
#main .section7 .img-area .img.item3 { width:clamp(240px,25vw,360px); aspect-ratio:16/10; }
#main .section7 .img-area .img.item4 { width:clamp(290px,31vw,430px); aspect-ratio:16/10; }

/* 한큐 커스텀 커서 제거 → 네이티브 마우스 복구 */
.theBall-outer, ._cursor, ._cursor2 { display: none !important; }
* { cursor: auto !important; }
a, button, [onclick], [role="button"], .morecursor, .card_wrapper, .more-portfolio,
.nav a, .header__cta, .fab__btn, .burger, label, select, .visual-arr,
.projects-img, .portfolio-item, .story-item, .imgbox li, .swiper-slide { cursor: pointer !important; }
input[type="text"], input[type="tel"], input[type="email"], textarea { cursor: text !important; }
#main .section6 p, #main .section8 .story-list .story-item span { cursor: pointer !important; }

/* HAO 헤더 스케일 업 — 한큐 CSS가 html을 62.5%(1rem=10px)로 잡아 rem이 작아지므로 px로 고정 */
.header { padding: 30px clamp(28px, 4.2vw, 70px); }
.header.is-stuck { padding-top: 18px; padding-bottom: 18px; }
.header .brand__logo { height: 58px; }
.header.is-stuck .brand__logo { height: 46px; transition: height .3s var(--ease); }
.header .nav { gap: clamp(24px, 2.4vw, 44px); }
.header .nav a { font-size: 19px; font-weight: 600; }
.header .nav__div { height: 22px; }
.header .header__cta { font-size: 18px; padding: 16px 38px; }
/* 중간 폭: 메뉴가 많아 풀사이즈로는 ~1700px 아래서 두 줄로 넘침 → gap·폰트·패딩을 압축해 한 줄 유지 (버거 전환폭 1380px까지) */
@media (max-width: 1700px){
  .header { padding: 24px clamp(18px, 2.2vw, 38px); }
  .header.is-stuck { padding-top: 15px; padding-bottom: 15px; }
  .header .brand__logo { height: 48px; }
  .header.is-stuck .brand__logo { height: 40px; }
  .header .nav { gap: clamp(14px, 1.5vw, 24px); }
  .header .nav a { font-size: 16px; }
  .header .nav__div { height: 18px; }
  .header .header__cta { font-size: 16px; padding: 12px 26px; }
}
@media (max-width: 1200px){
  .header { padding: 16px 20px; }
  .header .brand__logo { height: 40px; }
  .header .nav a { font-size: 17px; }
}

/* ===== 가시성 보정: 흰 배경에 묻히던 글자 고정 표시 =====
   - .count(412+): 원본은 흰 글씨 → 흰 배경에서 안 보임
   - .fill-text: 스크롤 채움 효과의 쉬는 상태가 옅은 회색 + 트리거 불안정 → 안 보임
   둘 다 잉크색으로 정적 표시(다른 요소들도 이미 정적 표시 처리됨) */
#main .count {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background-image: none !important;
}
#main .fill-text {
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}
/* 포트폴리오 카드 제목도 동일 이슈(옅은 회색 채움) → 잉크 고정 */
#main .portfolio-list li .txt span:first-child {
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}

/* ===== 흰 글자 일괄 보정 (다크→화이트 테마 전환 잔여, 흰 배경에 묻힘) =====
   ※ 어두운 배경 위 흰 글자(카드 사진/검정 태그/검정 원·버튼)는 그대로 둠 */
/* 섹션 제목 h3 (text-point b 주황은 유지) */
#main .tit-box h3 { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
/* Our Projects 이미지 캡션 */
#main .projects-img span { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
/* Our Centers 센터명/설명 */
#main .section3 .imgbox li .txt b,
#main .section3 .imgbox li .txt em { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
/* 키워드클라우드 상단 카피(검정 원 안 "최적의 디자인"은 흰색 유지) */
#main .section4 .main-txt > strong { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
/* 솔루션 스와이퍼 진행 숫자 */
#main .section5 .prog-num, #main .section5 .prog-total { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
#main .section5 .progress-num .bar { background: var(--ink) !important; }
/* 헤더 센터링크 화살표(주황 톤 유지) */
.header .nav a.nav__center i { color: inherit !important; }
/* 상담 폼 셀렉트 드롭다운(nice-select) 글자 */
#quoteForm .nice-select, #quoteForm .nice-select .current,
#quoteForm .nice-select .list .option,
#quoteForm select, #quoteForm option { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }

/* ============================================================
   GROOVE-WEB 동일 히어로 — 블루 글로시 + 롤링 헤드라인 (최종)
   ============================================================ */
.ghero{
  display:flex !important; align-items:center !important; justify-content:center !important;  /* 스크롤 후 block 전환 방지 */
  min-height:100vh !important;
  padding:180px 24px 120px !important;
  background:linear-gradient(155deg,#fffaf8 0%,#fff1ea 30%,#ffe1d5 64%,#ffcebd 100%) !important;
}
/* 부드러운 빛 덩어리 (웜) */
.ghero__bg{
  background:
    radial-gradient(52% 46% at 15% 8%, rgba(255,255,255,.92), transparent 60%),
    radial-gradient(60% 58% at 97% 24%, rgba(255,182,152,.5), transparent 64%),
    radial-gradient(85% 78% at 84% 114%, rgba(255,150,110,.52), transparent 60%) !important;
}
/* groove식 광택 곡선(아크) — 겹치는 큰 원호 빛줄기 */
.ghero__bg::before{
  inset:-32% -22% !important; transform:rotate(-12deg);
  background:
    radial-gradient(closest-side at 80% 46%, transparent 61%, rgba(255,255,255,.62) 62%, transparent 66%),
    radial-gradient(closest-side at 88% 39%, transparent 52%, rgba(255,255,255,.46) 53%, transparent 57%),
    radial-gradient(closest-side at 71% 58%, transparent 71%, rgba(255,255,255,.40) 72%, transparent 76%),
    radial-gradient(closest-side at 58% 30%, transparent 80%, rgba(255,255,255,.34) 81%, transparent 84%) !important;
}
.ghero__bg::after{
  background:radial-gradient(135% 96% at 50% -28%, rgba(255,255,255,0) 52%, rgba(255,255,255,.42) 100%) !important;
}
/* eyebrow — 박스/라인 제거, "6년 연속" 블루 강조, 글자 키움 */
.ghero__eyebrow{
  background:none !important; border:0 !important; box-shadow:none !important; backdrop-filter:none !important;
  padding:0 !important; margin-bottom:28px !important;
  color:#46566e !important; font-size:20px !important; font-weight:600 !important; letter-spacing:.01em !important;
  gap:8px !important;
}
.ghero__eyebrow b{
  display:inline !important; width:auto !important; height:auto !important; border-radius:0 !important;
  background:none !important; color:#e83817 !important; font-weight:800 !important;
}
/* 타이포 — groove 실제값 그대로 (weight 600, clamp 86px, #0d213e) */
.ghero__title.gw-hero{
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  margin:0; font-weight:600 !important; letter-spacing:0 !important;
}
.ghero .ghero__inner{ max-width:1480px !important; margin-left:auto !important; margin-right:auto !important; }   /* 히어로만 넓게 + 무조건 중앙(flex/block 무관) */
.gw-hero .hero-line{
  font-size:clamp(28px,4.6vw,66px) !important; font-weight:600 !important;
  line-height:1.2 !important; letter-spacing:-.04em !important;
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;
  text-align:center; color:#241a14 !important; white-space:nowrap;
}
@media (max-width:760px){ .gw-hero .hero-line{ flex-wrap:wrap; white-space:normal; } }
/* 롤링 (inline-grid 겹침 + active/exit, groove 동일) */
.gw-hero .rolling-words{ display:inline-grid; overflow:hidden; vertical-align:bottom; text-align:left; }
.gw-hero .word{
  grid-area:1/1; color:#e83817 !important; opacity:0; white-space:nowrap;
  transform:translateY(100%);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.gw-hero .word.active{ opacity:1; transform:translateY(0); }
.gw-hero .word.exit{ opacity:0; transform:translateY(-100%); }
/* 전체 줄 롤링: "하오가 디자인하는 + 단어"를 통째로 롤 → 매 줄 통째 중앙정렬(빈칸·치우침 없음) */
.gw-hero .rolling-lines{ display:grid; overflow:hidden; justify-items:center; }
.gw-hero .rline{
  grid-area:1/1; white-space:nowrap;
  font-size:clamp(32px,6vw,86px); font-weight:600; line-height:1.2; letter-spacing:-.04em; color:#241a14;
  opacity:0; transform:translateY(100%);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.gw-hero .rline.active{ opacity:1; transform:translateY(0); }
.gw-hero .rline.exit{ opacity:0; transform:translateY(-100%); }
.gw-hero .rline em{ color:#e83817; font-style:normal; }
@media (max-width:760px){ .gw-hero .rline{ white-space:normal; text-align:center; } }
.ghero__sub{
  color:#7a6a60 !important; font-size:clamp(16px,1.32vw,21px) !important;
  margin-top:36px !important; line-height:1.75 !important;
}
/* CTA: 흰 알약 + 오렌지 원형 화살표 */
.ghero__cta{
  margin-top:56px !important; color:#241a14 !important;
  box-shadow:0 24px 64px -22px rgba(36,26,20,.42) !important;
}
.ghero__cta span{ color:#241a14 !important; }
.ghero__cta i{ background:#e83817 !important; }
.ghero__cta:hover{ box-shadow:0 32px 74px -18px rgba(232,56,23,.5) !important; }
/* 헤더: 글로시 배경이 비치도록 투명(스크롤 시 흰 헤더로 복귀) */
.header.on-dark:not(.is-stuck){
  background:transparent !important; border-bottom-color:transparent !important; box-shadow:none !important;
}

/* ============================================================
   Our Projects(section1) 카드 리디자인 — 스크롤 모션은 유지, '느낌'만 변경
   (타사 시그니처 호버: 알약변형+흑백+캡션중앙확대 → 둥근카드+줌+하단캡션+오렌지워시)
   ============================================================ */
#main .section1 .projects-img{
  border-radius:22px !important; overflow:hidden;
  box-shadow:0 20px 44px -24px rgba(36,26,20,.5);
  transition:transform .5s cubic-bezier(.22,.7,.2,1), box-shadow .5s ease !important;
}
@media (min-width:960px){
  #main .section1 .projects-img:hover{
    border-radius:22px !important;                 /* 알약 변형 제거 */
    transform:translateY(-6px) scale(1.018);
    box-shadow:0 30px 64px -20px rgba(232,56,23,.42);
  }
  #main .section1 .projects-img:hover > a img{ mix-blend-mode:normal !important; transform:scale(1.08); }  /* 흑백 제거 */
  #main .section1 .projects-img:hover > a span{   /* 캡션 중앙확대 제거 → 하단 유지 */
    left:24px !important; top:auto !important; bottom:28px !important; transform:none !important;
    font-size:1.7rem !important;
  }
}
/* 항상 은은한 하단 그라디언트, 호버 시 브랜드 오렌지 워시 */
#main .section1 .projects-img > a::before{
  background:linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(20,12,8,.74) 100%) !important;
  opacity:1 !important; z-index:1 !important;
}
#main .section1 .projects-img:hover > a::before{
  background:linear-gradient(180deg, rgba(232,56,23,.14) 0%, rgba(20,12,8,.84) 100%) !important;
}
#main .section1 .projects-img > a::after{ display:none !important; }   /* 회색 베이스 제거 */
/* 캡션: 이미지 위 흰 글씨, 항상 하단 좌측 */
#main .section1 .projects-img > a span{
  left:24px !important; bottom:22px !important; top:auto !important; transform:none !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  font-size:1.55rem !important; font-weight:600 !important; z-index:3 !important;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}

/* 섹션4·5·6 삭제로 Our Centers(section3) ↔ Who We Are(section7) 간격이 붙음 → 위 여백 더 확보 */
#main .section7{ padding-top:clamp(96px,12vh,170px) !important; }
#main .section3{ padding-bottom:clamp(40px,5vh,80px) !important; }

/* ============================================================
   메인 스케일 다운 — 섹션 과대(200px 패딩 + 큰 타입)로 한 화면에 안 들어옴 (2026-06-30)
   2차: 본문 타입(36/32px)·카운트·여백 추가 축소
   ============================================================ */
#main .section { padding-top: 96px; }                 /* 공통 섹션 위패딩 200→96 (section1은 .pt-0 !important로 0 유지) */
#main .section8 .section-row { padding: 90px 0; }     /* 칼럼 행 패딩 160→90 */
#main .section1 .count { font-size: 72px !important; line-height: 1.04 !important; }  /* Our Projects 412+ 120→72 */
#main .fs120 { font-size: clamp(40px, 5vw, 64px) !important; line-height: 1.08 !important; letter-spacing: -.02em !important; }  /* 섹션 대제목(바우처 칼럼/We are HAO 등) 120→64 */
#main .fs36 { font-size: 28px !important; line-height: 1.06 !important; }  /* 섹션 라벨·타이틀 36→28 */
#main .fs32 { font-size: 24px !important; }                                /* 본문 리드 문장 32→24 */
/* Our Centers(section3): 큰 세로 이미지(513px) 캡 + 스태거 절반 → 카드 높이 축소 */
/* Our Centers(section3) — 카드형(컴팩트): 이미지 300px 캡 + 은은한 스태거 */
#main .section3 .imgbox li .img { height: 300px; }
#main .section3 .imgbox li .img img { width: 100%; height: 100%; object-fit: cover; }
#main .section3 .imgbox li:nth-child(1){ margin-top: 24px !important; }
#main .section3 .imgbox li:nth-child(2){ margin-top: 0 !important; }
#main .section3 .imgbox li:nth-child(3){ margin-top: 48px !important; }
#main .section3 .imgbox li:nth-child(4){ margin-top: 24px !important; }

/* ============================================================
   바우처 칼럼(section8) — 칼럼 게시판 카드 그리드
   ============================================================ */
/* 한 줄 슬라이더: 뷰포트(클립) + 트랙(flex, translateX) + 좌우 화살표 */
#main .section8 .board-slider{ position:relative; margin:clamp(48px,6vh,84px) 0 0; }
#main .section8 .board-viewport{ overflow:hidden; padding:10px 2px 30px; }
#main .section8 .column-board{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:nowrap; gap:36px;
  transition:transform .5s cubic-bezier(.4,.05,.2,1); will-change:transform;
}
#main .section8 .board-card{
  flex:0 0 calc((100% - 72px)/3); box-sizing:border-box;
  cursor:pointer; background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 16px 42px -26px rgba(36,26,20,.42);
  transition:transform .35s ease, box-shadow .35s ease;
}
#main .section8 .board-nav{
  position:absolute; top:38%; transform:translateY(-50%); z-index:6;
  width:54px; height:54px; border-radius:50%; background:#fff;
  border:1px solid rgba(36,26,20,.10); box-shadow:0 14px 34px -14px rgba(36,26,20,.4);
  display:flex; align-items:center; justify-content:center; color:#241a14;
  cursor:pointer; transition:background .25s ease, color .25s ease, opacity .25s ease, box-shadow .25s ease;
}
#main .section8 .board-nav:hover{ background:var(--accent); color:#fff; box-shadow:0 18px 38px -14px rgba(232,56,23,.5); }
#main .section8 .board-nav--prev{ left:-22px; }
#main .section8 .board-nav--next{ right:-22px; }
#main .section8 .board-nav:disabled{ opacity:.28; cursor:default; box-shadow:0 8px 20px -12px rgba(36,26,20,.3); }
#main .section8 .board-nav:disabled:hover{ background:#fff; color:#241a14; }
#main .section8 .board-card:hover{ transform:translateY(-6px); box-shadow:0 28px 58px -22px rgba(232,56,23,.32); }
#main .section8 .board-thumb{ aspect-ratio:16/10; overflow:hidden; }
#main .section8 .board-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
#main .section8 .board-card:hover .board-thumb img{ transform:scale(1.06); }
#main .section8 .board-body{ padding:24px 26px 30px; }
#main .section8 .board-tag{ display:inline-block; font-size:13px; font-weight:700; color:#e83817; background:rgba(232,56,23,.1); padding:5px 13px; border-radius:999px; }
#main .section8 .board-title{
  font-size:22px; font-weight:700; line-height:1.42; color:#241a14; margin:15px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#main .section8 .board-desc{ font-size:15px; color:#8a7d72; margin:10px 0 0; font-weight:500; }
@media (max-width:1240px){ #main .section8 .board-nav--prev{ left:-8px; } #main .section8 .board-nav--next{ right:-8px; } }
@media (max-width:960px){ #main .section8 .column-board{ gap:24px; } #main .section8 .board-card{ flex-basis:calc((100% - 24px)/2); } }
@media (max-width:600px){ #main .section8 .column-board{ gap:18px; } #main .section8 .board-card{ flex-basis:100%; } #main .section8 .board-nav{ width:46px; height:46px; } }

/* ============================================================
   포트폴리오(section9) — 기울어진 사진 카드 + 웨이브 라인
   ============================================================ */
#main .section9{ background:linear-gradient(180deg,#ffffff 0%,#fff6f2 100%) !important; }
#main .section9 .tit-box h3{ color:#241a14 !important; -webkit-text-fill-color:#241a14 !important; }
#main .section9 .tit-box .fill-text{ color:#7a6a60 !important; -webkit-text-fill-color:#7a6a60 !important; }
/* Our Portfolios(section9) — 스튜디오센터식 풀블리드 무간격 그리드 (호버 오버레이) */
#main .section9 .pf-stage{ position:relative; margin-top:clamp(40px,5vh,72px); width:100vw; margin-left:calc(50% - 50vw); }
#main .section9 .pf-wheel{ position:static; width:auto; height:auto; transform:none; animation:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
#main .section9 .pf-card{ position:relative; width:auto; transform:none !important; cursor:pointer; overflow:hidden; }
#main .section9 .pf-img{ border-radius:0; overflow:hidden; aspect-ratio:4/5; box-shadow:none; }
#main .section9 .pf-img img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s ease; }
#main .section9 .pf-card:hover .pf-img img{ transform:scale(1.06); }
/* 캡션: 평소 숨김 → 호버 시 어둡게 + 카테고리·제목 (좌하단) */
#main .section9 .pf-cap{ position:absolute; inset:0; z-index:2; border-radius:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:10px; text-align:left; padding:clamp(20px,1.8vw,30px);
  background:linear-gradient(180deg, rgba(20,12,8,0) 32%, rgba(20,12,8,.82) 100%);
  opacity:0; transition:opacity .4s ease; pointer-events:none; }
#main .section9 .pf-card:hover .pf-cap{ opacity:1; }
#main .section9 .pf-cat{ display:inline-block; font-size:13px; font-weight:700; color:#fff; background:rgba(232,56,23,.95); padding:5px 13px; border-radius:999px; }
#main .section9 .pf-title{ display:block; font-size:clamp(16px,1.15vw,20px); font-weight:700; color:#fff !important; -webkit-text-fill-color:#fff !important; line-height:1.35; }
#main .section9 .pf-card::after{ content:"↗"; position:absolute; top:14px; right:16px; z-index:3; font-size:22px; font-weight:700; color:#fff; opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease; }
#main .section9 .pf-card:hover::after{ opacity:1; transform:translateY(0); }
@media (max-width:1024px){ #main .section9 .pf-wheel{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ #main .section9 .pf-wheel{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   문의 폼(#contact) — 디자인센터 스타일 이식
   ============================================================ */
#main #contact .contact{ padding:clamp(40px,6vh,90px) clamp(20px,4vw,54px) clamp(60px,9vh,120px); max-width:1240px; margin:0 auto; }
#main #contact .contact__panel{ position:relative; overflow:hidden; border-radius:28px;
  background:linear-gradient(135deg,#f25b35 0%,#e83817 55%,#e63d0d 100%); color:#fff; padding:clamp(34px,5vw,70px);
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,70px); align-items:center;
  box-shadow:0 50px 100px -50px rgba(232,56,23,.55); }
#main #contact .contact__panel::after{ content:""; position:absolute; right:-14%; bottom:-38%; width:56%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none; }
#main #contact .contact__tag{ font-size:.78rem; letter-spacing:.25em; font-weight:700; color:rgba(255,255,255,.85); margin-bottom:18px; }
#main #contact .contact__title{ font-size:clamp(2rem,4.6vw,3.4rem); font-weight:800; letter-spacing:-.035em; line-height:1.15; color:#fff !important; -webkit-text-fill-color:#fff !important; }
#main #contact .contact__desc{ margin-top:20px; color:rgba(255,255,255,.85); line-height:1.7; }
#main #contact .contact__rows{ margin-top:36px; display:grid; gap:12px; list-style:none; padding:0; }
#main #contact .contact__rows li{ display:flex; align-items:baseline; gap:14px; font-weight:600; }
#main #contact .contact__rows span{ font-size:.7rem; letter-spacing:.18em; font-weight:800; color:rgba(255,255,255,.7); min-width:44px; }
#main #contact .contact__rows a{ font-size:1.12rem; color:#fff; }
#main #contact .contact__spin{ position:absolute; top:clamp(18px,3vw,34px); right:clamp(18px,3vw,34px); width:clamp(90px,11vw,130px); height:clamp(90px,11vw,130px); animation:spinSlow 16s linear infinite; pointer-events:none; }
#main #contact .contact__spin text{ fill:rgba(255,255,255,.85); font-size:10.5px; font-weight:700; letter-spacing:.14em; }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
#main #contact .cform--card{ display:grid; grid-template-columns:1fr 1fr; gap:14px; background:#fff; border-radius:20px; padding:clamp(22px,3vw,34px); box-shadow:0 30px 60px -36px rgba(0,0,0,.45); max-width:none; width:auto; flex-wrap:nowrap; }
#main #contact .cfield--full{ grid-column:1 / -1; }
#main #contact .cform input, #main #contact .cform select, #main #contact .cform textarea{
  width:100%; font-family:inherit; font-size:.98rem; color:#17150f; -webkit-text-fill-color:#17150f; background:#f6f4f0; border:1.5px solid transparent; border-radius:12px; padding:14px 16px; transition:border-color .25s, background .25s, box-shadow .25s; resize:vertical; box-sizing:border-box; }
#main #contact .cform select{ color:#8a7d72 !important; -webkit-text-fill-color:#8a7d72 !important; appearance:none; }
#main #contact .cform option{ color:#000 !important; -webkit-text-fill-color:#000 !important; }
#main #contact .cform input::placeholder, #main #contact .cform textarea::placeholder{ color:#8a7d72; -webkit-text-fill-color:#8a7d72; }
#main #contact .cform input:focus, #main #contact .cform select:focus, #main #contact .cform textarea:focus{ outline:none; border-color:#e83817; background:#fff; box-shadow:0 0 0 4px rgba(232,56,23,.12); }
#main #contact .btn-round{ grid-column:1 / -1; display:inline-flex; align-items:center; justify-content:center; gap:14px; border:1px solid #e83817; background:#e83817; color:#fff; border-radius:14px; padding:16px 26px; font-weight:600; font-size:1rem; margin-top:6px; cursor:pointer; transition:background .35s, border-color .35s; }
#main #contact .btn-round span{ color:#fff !important; }
#main #contact .btn-round svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .35s; }
#main #contact .btn-round:hover{ background:#17150f; border-color:#17150f; }
#main #contact .btn-round:hover svg{ transform:translateX(5px); }
#main #contact .cnote{ grid-column:1 / -1; text-align:center; color:#e83817; -webkit-text-fill-color:#e83817; font-size:.92rem; min-height:1em; }
@media (max-width:980px){ #main #contact .contact__panel{ grid-template-columns:1fr; } #main #contact .contact__spin{ display:none; } }
/* (구 회전 휠 모바일 규칙·흰색 캡션 제거 — 위 정렬 그리드로 대체) */

/* ============================================================
   What We Do(section2) — 핀 카드스택 → 가로 슬라이더(Swiper)
   ============================================================ */
#main .section2 .card_list_wrapper{ overflow:visible !important; }
#main .section2 .cards-swiper{ position:relative; overflow:hidden; padding:12px 0 8px; }
/* 슬라이드 카드: 절대배치 해제 → 일반 카드 */
#main .section2 .cards-swiper .card_wrapper{
  position:relative !important; top:auto !important; left:auto !important;
  height:clamp(440px,64vh,640px) !important;   /* 세로로 더 길게 (width는 Swiper가 계산) */
  border-radius:24px !important; overflow:hidden; box-sizing:border-box;
  box-shadow:0 24px 54px -26px rgba(36,26,20,.5);
}
/* 가독성 스크림 */
#main .section2 .cards-swiper .card_wrapper::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(20,12,8,.18) 0%, rgba(20,12,8,.58) 100%);
}
#main .section2 .cards-swiper .card_wrapper .txt-wrap{ z-index:1; }
/* 카드 내 타이포 슬라이드 크기에 맞춤 */
#main .section2 .cards-swiper .card_wrapper .txt-wrap h4{ font-size:clamp(44px,4.6vw,82px) !important; margin-top:10px !important; }
#main .section2 .cards-swiper .card_wrapper .txt-wrap p{ font-size:clamp(19px,1.5vw,26px) !important; }
#main .section2 .cards-swiper .card_wrapper .txt-wrap em{ font-size:clamp(15px,1.15vw,19px) !important; line-height:1.6; margin-top:18px !important; padding:0 26px; }
/* 활성(중앙) 카드만 크게·선명, 양옆은 작게·흐리게 */
#main .section2 .cards-swiper .swiper-slide{ transition:transform .5s ease, opacity .5s ease; opacity:.35; transform:scale(.82); }
#main .section2 .cards-swiper .swiper-slide-active{ opacity:1; transform:scale(1); }
/* 페이지네이션 */
#main .section2 .cards-pagination{ position:static; margin-top:30px; display:flex; justify-content:center; gap:8px; }
#main .section2 .cards-pagination .swiper-pagination-bullet{ background:#241a14; opacity:.22; width:9px; height:9px; margin:0 !important; transition:all .3s; }
#main .section2 .cards-pagination .swiper-pagination-bullet-active{ background:#e83817; opacity:1; width:28px; border-radius:5px; }
/* 화살표 */
#main .section2 .cards-arr{ position:absolute; top:calc(50% - 20px); transform:translateY(-50%); z-index:5; width:56px; height:56px; border-radius:50%; background:#fff; box-shadow:0 12px 28px -12px rgba(0,0,0,.45); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .25s ease; }
#main .section2 .cards-arr:hover{ transform:translateY(-50%) scale(1.08); }
#main .section2 .cards-prev{ left:14px; }
#main .section2 .cards-next{ right:14px; }
#main .section2 .cards-arr::before{ content:''; width:12px; height:12px; border-top:2.5px solid #241a14; border-right:2.5px solid #241a14; }
#main .section2 .cards-prev::before{ transform:rotate(-135deg); margin-left:5px; }
#main .section2 .cards-next::before{ transform:rotate(45deg); margin-right:5px; }

/* ── section2 배경: CI 오렌지 그라데이션 일렁임(또렷·크게) ── */
#main .section2{ position:relative; overflow:hidden; padding-bottom:clamp(110px,15vh,180px); }
#main .section2 > .section-body{ position:relative; z-index:1; }
#main .section2::before,
#main .section2::after{
  content:""; position:absolute; inset:-30%; z-index:0; pointer-events:none; will-change:transform; filter:blur(46px);
}
#main .section2::before{
  background:
    radial-gradient(34% 38% at 24% 30%, rgba(255,142,61,.52), transparent 60%),
    radial-gradient(30% 34% at 74% 22%, rgba(232,56,23,.40), transparent 60%),
    radial-gradient(36% 40% at 58% 82%, rgba(255,177,77,.48), transparent 62%);
  animation:s2flowA 13s ease-in-out infinite alternate;
}
#main .section2::after{
  background:
    radial-gradient(32% 36% at 78% 70%, rgba(242,91,53,.44), transparent 60%),
    radial-gradient(30% 32% at 16% 74%, rgba(255,160,90,.40), transparent 60%),
    radial-gradient(28% 30% at 44% 18%, rgba(232,56,23,.32), transparent 62%);
  animation:s2flowB 17s ease-in-out infinite alternate;
}
@keyframes s2flowA{
  0%{ transform:translate(-9%,-5%) scale(.88) rotate(-6deg); }
  50%{ transform:translate(8%,-9%) scale(1.28) rotate(8deg); }
  100%{ transform:translate(-4%,7%) scale(1.06) rotate(-3deg); }
}
@keyframes s2flowB{
  0%{ transform:translate(8%,6%) scale(1.22) rotate(5deg); }
  50%{ transform:translate(-9%,-4%) scale(.9) rotate(-10deg); }
  100%{ transform:translate(6%,-8%) scale(1.3) rotate(9deg); }
}
@media (prefers-reduced-motion:reduce){
  #main .section2::before, #main .section2::after{ animation:none; }
}