@charset "UTF-8";
/* =============================================================
   오아시스 5asys.kr 리뉴얼 시안
   레이아웃: 원페이지 스크롤. 좌측 정렬 영문 대제목 + 한글 본문.
             섹션 구분은 선이 아니라 배경 대비(종이흰 ↔ 딥네이비 ↔ 안개회색).
   ============================================================= */

/* -------- 색상 토큰 : A안 (현행 레드 포인트 유지) ------------ */
:root{
  --ink:        #0c1a2b;   /* 딥네이비 - 본문/다크 섹션 배경 */
  --ink-2:      #16293f;   /* 딥네이비 밝은 단계 */
  --ink-3:      #4a5f78;   /* 보조 텍스트(네이비 쪽으로 기운 회색) */
  --paper:      #ffffff;
  --paper-2:    #f2f5f8;   /* 살짝 푸른 기운의 안개회색 */
  --line:       #dde4ec;
  /* 포인트 색 — 큰 제목·장식은 파스텔 코랄, 작은 글씨·버튼은 진한 톤.
     파스텔만 쓰면 흰 바탕의 작은 글씨가 흐려져 읽기 어렵다. */
  --accent:     #e0655d;   /* 파스텔 코랄 (기존 #e41e26 에서 톤다운) */
  --accent-ink: #c0463f;   /* 작은 글씨·버튼용 */
  --accent-dk:  #a63b35;   /* 버튼 눌림/호버 */
  --accent-soft:#fdeeed;

  --font-en: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ko: "Pretendard Variable", Pretendard, "Noto Sans KR",
             -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --wrap: 1280px;
  --gut: 24px;
  --r: 4px;
}

/* -------- 색상 토큰 : B안 (차분한 딥틸 포인트) ----------------
   B안으로 보시려면 아래 블록의 주석을 풀고 위 --accent 3줄을 지우세요.
:root{
  --accent:     #0f7a8c;
  --accent-dk:  #0a5c6a;
  --accent-soft:#e6f3f5;
}
--------------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-ko);
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  word-break:keep-all;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px;
}
.skip:focus{ left:0; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ===================== 공통 요소 ===================== */
/* 그누보드 기본 css 에 a.btn{height:35px;line-height:35px;padding:0 10px} 가 있어
   .btn 하나로는 눌린다. a.btn·button.btn 까지 함께 적어 같은 세기로 맞춘다. */
.btn, a.btn, button.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:17px 32px; border-radius:var(--r);
  font-weight:700; font-size:16px; letter-spacing:-0.01em;
  height:auto; line-height:1.25;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-accent{ background:var(--accent-ink); color:#fff; }
.btn-accent:hover{ background:var(--accent-dk); }
.btn-ghost{ border:1px solid rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.btn-line{ border:1px solid var(--ink); color:var(--ink); }
.btn-line:hover{ background:var(--ink); color:#fff; }
.btn-sm, a.btn-sm{ padding:11px 20px; font-size:15px; }
.btn-block{ width:100%; }

.eyebrow{
  font-family:var(--font-en); font-weight:700; font-size:13px;
  letter-spacing:.22em; color:var(--accent); margin-bottom:18px;
}
.sec-title{
  font-size:clamp(28px, 3.6vw, 46px);
  line-height:1.28; font-weight:800; letter-spacing:-0.025em;
  text-wrap:balance;
}
.sec-desc{
  margin-top:20px; max-width:62ch;
  color:var(--ink-3); font-size:17px; line-height:1.85;
}
.sec-head{ margin-bottom:56px; }
.sec-head-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px; align-items:end;
}
.sec-head-row .sec-desc{ margin-top:0; }

/* ===================== 헤더 ===================== */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{
  display:flex; align-items:center; gap:28px;
  height:76px;
}
.brand{ display:flex; align-items:baseline; gap:10px; flex:none; }
.brand-mark{
  font-family:var(--font-en); font-weight:900; font-size:24px;
  letter-spacing:.02em;
}
.brand-mark::after{ content:"."; color:var(--accent-ink); }
.brand-ko{ font-size:14px; color:var(--ink-3); font-weight:600; }

.gnb{ display:flex; gap:30px; margin-inline:auto; }
.gnb a{
  font-weight:600; font-size:16px; padding:6px 0;
  border-bottom:2px solid transparent;
}
.gnb a:hover{ border-bottom-color:var(--accent); }

.head-cta{ display:flex; align-items:center; gap:18px; flex:none; }
.tel-link{ display:flex; flex-direction:column; line-height:1.25; }
.tel-label{ font-size:11px; letter-spacing:.14em; color:var(--ink-3); font-weight:700; }
.tel-link strong{ font-family:var(--font-en); font-size:19px; font-weight:700; }

.nav-toggle{ display:none; width:44px; height:44px; flex:none; }
.nav-toggle .bar{
  display:block; width:22px; height:2px; margin:5px auto;
  background:var(--ink); transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mnav{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line); background:var(--paper);
}
.mnav[hidden]{ display:none; }
.mnav a{
  padding:16px var(--gut); font-weight:600;
  border-bottom:1px solid var(--line);
}
.mnav-tel{ background:var(--ink); color:#fff; font-family:var(--font-en); }

/* ===================== HERO ===================== */
.hero{
  background:var(--ink); color:#fff;
  position:relative; overflow:hidden;
}
.hero-in{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:48px; align-items:center;
  padding-block:clamp(44px, 5vw, 78px);
}
.badge{
  display:inline-block;
  font-family:var(--font-en); font-size:12px; font-weight:700;
  letter-spacing:.2em; padding:9px 16px;
  border:1px solid rgba(255,255,255,.35); border-radius:999px;
  margin-bottom:28px;
}
.hero-title{
  font-family:var(--font-en); font-weight:900;
  font-size:clamp(34px, 7.4vw, 104px);
  line-height:.98; letter-spacing:-0.035em;
}
.hero-title .line{ display:block; }
.hero-title .outline{
  color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.55);
}
.hero-lead, h1.hero-lead{
  margin-top:30px; font-size:clamp(20px, 2.4vw, 28px);
  font-weight:700; letter-spacing:-0.02em;
}
.hero-lead::before{
  content:""; display:block; width:54px; height:4px;
  background:var(--accent); margin-bottom:22px;
}
.hero-desc{
  margin-top:16px; max-width:52ch;
  color:rgba(255,255,255,.76); font-size:17px; line-height:1.85;
}
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }

.hero-visual{
  position:relative; max-width:100%;
  min-height:300px;        /* 넓은 화면의 실제 높이는 JS 가 카드에 맞춰 정한다 */
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:46px 46px;
}
/* ---- 제작 사례 카드 덱 (책장 넘기기) ----
   카드가 비스듬히 쌓여 있다가, 맨 앞 카드가 왼쪽 모서리를 축으로
   책장처럼 넘어가고 뒤 카드가 한 칸씩 앞으로 나온다. */
.hero-visual{ perspective:1250px; perspective-origin:62% 48%; }
/* 덱의 세로 위치·높이는 JS 가 왼쪽 큰 글씨(LOCAL) 윗줄에 맞춰 잡는다 */
.deck{
  position:absolute; left:0; right:0; top:0;
  height:100%;
  transform-style:preserve-3d;
}
.deck-card{
  position:absolute; left:2%; top:50%;
  width:94%; margin:0;
  border-radius:8px; overflow:hidden;
  background:var(--ink-2);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  transform-origin:left center;
  backface-visibility:hidden;
  transform:translate3d(0,-50%,0);
  transition:transform 1.4s cubic-bezier(.45,.02,.25,1), opacity .9s ease;
}
.deck-card img{ width:100%; height:auto; display:block; }
.deck-card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:baseline; gap:8px;
  padding:26px 16px 12px;
  background:linear-gradient(transparent, rgba(6,14,24,.88));
  color:#fff; font-size:14px; font-weight:700; letter-spacing:-0.01em;
}
.deck-card figcaption span{
  font-size:11px; font-weight:600; letter-spacing:.06em;
  color:rgba(255,255,255,.62);
}
.deck-card.no-anim{ transition:none; }

/* 쌓인 순서 */
.deck-card[data-pos="0"]{ transform:translate3d(0,-50%,0) rotateY(-14deg);       opacity:1;   z-index:5; }
.deck-card[data-pos="1"]{ transform:translate3d(7%,-48%,-90px) rotateY(-14deg);   opacity:1;   z-index:4; }
.deck-card[data-pos="2"]{ transform:translate3d(14%,-46%,-180px) rotateY(-14deg); opacity:.92; z-index:3; }
.deck-card[data-pos="3"]{ transform:translate3d(21%,-44%,-270px) rotateY(-14deg); opacity:.6;  z-index:2; }
.deck-card[data-pos="4"]{ transform:translate3d(27%,-42%,-360px) rotateY(-14deg); opacity:0;   z-index:1; }
/* 넘어가는 중 */
.deck-card[data-pos="out"]{
  transform:translate3d(0,-50%,60px) rotateY(-108deg);
  opacity:0; z-index:6;
}

.deck-note{
  position:absolute; right:2%; bottom:-4px;
  font-family:var(--font-en); font-size:11px; letter-spacing:.18em;
  color:rgba(255,255,255,.4);
}

@media (prefers-reduced-motion: reduce){
  .deck-card{ transition:none; }
}
@media (max-width: 1024px){
  /* 카드와 겹쳐서 모바일에서는 숨긴다 */
  .deck-note{ display:none; }
}

/* ===================== 히어로 안 실적 지표 ===================== */
.hero-right{ display:flex; flex-direction:column; gap:26px; min-width:0; }
.hero-stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px 10px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero-stats li{ min-width:0; }
.num{
  font-family:var(--font-en); font-weight:800;
  font-size:clamp(26px, 2.6vw, 38px); line-height:1;
  letter-spacing:-0.03em; color:#fff;
  font-variant-numeric:tabular-nums;
}
.num-text{ font-family:var(--font-ko); font-size:clamp(20px, 2vw, 28px); }
.unit{ font-size:14px; font-weight:700; margin-left:3px; color:rgba(255,255,255,.8); }
.stat-label{
  display:block; margin-top:7px;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.6);
}

/* 서비스 머리말 — 배경을 한 톤 깔아 히어로·첫 서비스와 떼어 놓는다 */
.services{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding-block:clamp(72px, 8vw, 120px) clamp(56px, 6vw, 86px);
}

/* ===================== 서비스 (4개 독립 섹션) =====================
   서비스마다 자기 섹션을 갖고, 그 안에 사례 가로 아코디언을 둔다.
   밝은 섹션과 어두운 섹션이 번갈아 나와 경계를 만든다. */
.svc-sec{ padding-block:clamp(56px, 6.5vw, 92px); }
#svc-homepage{ padding-top:clamp(76px, 8vw, 120px); }
.svc-light{ background:var(--paper); }
.svc-dark{ background:var(--ink); color:#fff; }

.svc-head{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:16px 48px; align-items:end;
  margin-bottom:38px;
}
/* 섹션 영문 제목 — 윗줄은 꽉 찬 글씨, 아랫줄은 테두리만 (ONGOING PROJECT 와 같은 꼴) */
.svc-en, .big-en{
  font-family:var(--font-en); font-weight:900;
  font-size:clamp(30px, 3.8vw, 54px); line-height:.98;
  letter-spacing:-0.035em; color:var(--accent);
}
.svc-en{ grid-column:1; grid-row:1; }
.svc-en span, .big-en span{ display:block; }
.svc-en .outline, .big-en .outline{
  color:transparent;
  -webkit-text-stroke:2px rgba(12,26,43,.26);
}
.svc-dark .svc-en .outline{ -webkit-text-stroke-color:rgba(255,255,255,.32); }
.portfolio .big-en{ margin-bottom:18px; }
.contact .big-en{ margin-bottom:20px; }

/* 'OUR SERVICES' 는 크기는 그대로 두고 색과 밑줄로 구분한다.
   각 서비스 제목(HOMEPAGE DESIGN)은 코랄, 이 머리말은 네이비 + 코랄 테두리. */
.services .big-en{ color:var(--ink); margin-bottom:20px; }
.services .big-en .outline{ -webkit-text-stroke:2px var(--accent); }
.services .sec-head{ margin-bottom:0; }

/* 머리말 + 목차 2단 */
.svc-intro{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:48px; align-items:start;
}
.svc-intro-l{ min-width:0; }
.svc-intro .sec-desc{ margin-top:22px; }

.svc-index{ border-top:2px solid var(--ink); }
.svc-index a{
  position:relative;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:4px 16px; align-items:center;
  padding:18px 6px;
  border-bottom:1px solid var(--line);
  transition:padding-left .3s ease, background .25s ease;
}
.si-no{
  grid-row:1 / span 2;
  font-family:var(--font-en); font-weight:800; font-size:13px;
  color:var(--ink-3); letter-spacing:.06em;
}
.si-en{
  grid-column:2; grid-row:1; justify-self:start;
  font-family:var(--font-en); font-weight:800; font-size:19px;
  letter-spacing:-0.02em; color:var(--ink);
}
.si-ko{ grid-column:2; grid-row:2; justify-self:start; font-size:14px; color:var(--ink-3); }
.si-go{
  grid-column:3; grid-row:1 / span 2; font-size:17px; color:var(--ink-3);
  opacity:0; transform:translateX(-6px);
  transition:opacity .25s ease, transform .3s ease;
}
@media (hover: hover){
  .svc-index a:hover{ padding-left:18px; background:var(--paper-2); }
  .svc-index a:hover .si-en{ color:var(--accent-ink); }
  .svc-index a:hover .si-go{ opacity:1; transform:none; color:var(--accent-ink); }
}
@media (max-width: 900px){
  .svc-intro{ grid-template-columns:1fr; gap:30px; }
}
.svc-ko{
  grid-column:1; grid-row:2;
  font-size:clamp(20px, 2vw, 26px); font-weight:800;
  letter-spacing:-0.025em;
}
.svc-desc{
  grid-column:2; grid-row:1 / span 2;
  max-width:52ch; line-height:1.85; font-size:16px;
  color:var(--ink-3);
}
.svc-dark .svc-desc{ color:rgba(255,255,255,.74); }
.svc-ko::after{
  content:""; display:block; width:40px; height:3px;
  margin-top:14px; background:var(--accent);
}

/* ---- 사례 가로 아코디언 ---- */
.cpanels{
  position:relative;
  display:flex; gap:8px;
  height:clamp(300px, 34vw, 420px);
}
.cpanel{
  position:relative; flex:1 1 0%; min-width:0;
  border-radius:6px; overflow:hidden;
  background:var(--ink-2);
  /* 짧은 전환이라야 끌리지 않고 부드럽게 열린다.
     flex 단축 속성에 will-change 를 걸면 값이 반영되지 않아 flex-grow 만 바꾼다. */
  transition:flex-grow .34s ease-in-out;
}
.cpanel.is-open{ flex-grow:3; }
.cpanel > a, .cpanel.cpanel-empty{
  display:block; width:100%; height:100%; position:relative;
}
.cpanel > a > img{          /* 평면 썸네일만. 노트북 속 캡처(.lt-shot)는 제외 */
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(.5) brightness(.72);
  transform:scale(1.02);
  transition:filter .34s ease-in-out, transform 7s ease;
}
.cpanel.is-open > a > img{ filter:grayscale(0) brightness(.88); transform:scale(1.07); }

/* ---- 기기 목업 (노트북 · 태블릿 · 아이폰 · 갤럭시) ----
   화면 안에서 긴 캡처가 천천히 내려간다. 틀은 전부 CSS 로 그려 이미지를 더 쓰지 않는다.
   스마트폰 칸에는 모바일 화면 캡처를 넣는다. 캡처가 없는 사례는 평면 썸네일 그대로. */
/* 기기가 놓인 카드 배경 — 네 가지를 번갈아 쓴다.
   ① 밝은 책상  ② 원목 테이블  ③ 흰 스튜디오  ④ 짙은 데스크
   사진을 쓰지 않아 저작권 걱정이 없고 용량도 늘지 않는다. */
.cpanel:has(.device)::before{          /* 책상 모서리 하이라이트 */
  content:""; position:absolute; left:0; right:0; top:62%;
  height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
.cpanel:has(.device)::after{           /* 기기 아래 접지 그림자 */
  content:""; position:absolute; left:50%; top:66%;
  width:72%; height:26px; z-index:0;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(20,34,52,.32), transparent 72%);
  filter:blur(3px);
}
.cpanel .device{ z-index:2; }

/* ① 밝은 책상 */
.cpanel:has(.device):nth-child(4n+1){
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.5) 0 2px, rgba(0,0,0,.012) 2px 7px)
      0 62% / 100% 38% no-repeat,
    linear-gradient(180deg, #f7f9fc 0%, #eef3f8 40%, #e4ebf3 62%,
                            #d3dce7 62.4%, #c3cedc 85%, #b7c3d3 100%);
}
/* ② 원목 테이블 */
.cpanel:has(.device):nth-child(4n+2){
  background:
    repeating-linear-gradient(88deg,
      rgba(255,255,255,.14) 0 3px, rgba(60,32,14,.10) 3px 11px) 0 60% / 100% 40% no-repeat,
    linear-gradient(180deg, #f2ece4 0%, #e7ded2 38%, #dcd0bf 60%,
                            #a97a4e 60.4%, #8d6239 84%, #7a5330 100%);
}
.cpanel:has(.device):nth-child(4n+2)::before{ top:60%; }
.cpanel:has(.device):nth-child(4n+2)::after{ top:64%; }
/* ③ 흰 스튜디오 */
.cpanel:has(.device):nth-child(4n+3){
  background:radial-gradient(90% 70% at 50% 28%, #ffffff 0%, #f3f6fa 52%, #e3e9f1 100%);
}
.cpanel:has(.device):nth-child(4n+3)::before{ opacity:0; }
/* ④ 짙은 데스크 */
.cpanel:has(.device):nth-child(4n+4){
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.045) 0 2px, transparent 2px 8px)
      0 62% / 100% 38% no-repeat,
    linear-gradient(180deg, #2b3b50 0%, #223044 42%, #1b283a 62%,
                            #141f2e 62.4%, #0e1722 100%);
}
.cpanel:has(.device):nth-child(4n+4)::before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.cpanel:has(.device):nth-child(4n+4)::after{
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%);
}

/* 이름표 — 밝은 배경은 어두운 글씨, 짙은 배경은 흰 글씨 */
.cpanel:has(.device) .cp-label{
  background:linear-gradient(transparent, rgba(255,255,255,.7) 45%, rgba(255,255,255,.95));
  color:var(--ink);
}
.cpanel:has(.device) .cp-label em{ color:var(--ink-3); }
.cpanel:has(.device):nth-child(4n+4) .cp-label{
  background:linear-gradient(transparent, rgba(8,15,24,.88));
  color:#fff;
}
.cpanel:has(.device):nth-child(4n+4) .cp-label em{ color:rgba(255,255,255,.62); }
.device{
  position:absolute; left:50%; top:45%;
  transform:translate(-50%,-50%);
}
.lt-screen{
  display:block; position:relative; overflow:hidden;
  background:#060d16;
  border-style:solid; border-color:#2b3d55;
  box-shadow:0 18px 36px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
.lt-shot{
  position:absolute; top:0; left:0;
  width:100%; height:auto;
  aspect-ratio:auto; object-fit:fill;
  transform:translateY(0);
}

/* 노트북 */
.dev-laptop{
  width:86%; max-width:430px;
  perspective:1000px;            /* 덮개가 3D 로 열리도록 */
  transform-style:preserve-3d;
}
.dev-laptop .lt-screen{
  aspect-ratio:16/10;
  border-width:6px; border-bottom-width:10px;   /* 아래쪽이 경첩 */
  border-radius:9px 9px 2px 2px;
  transform-origin:center bottom;               /* 경첩을 축으로 회전 */
  transform:rotateX(-6deg);                     /* 기본값: 열린 상태 */
  will-change:transform;
}
.dev-laptop::after{            /* 펼쳐 놓은 키보드 데크 (앞쪽이 넓은 사다리꼴) */
  content:""; display:block;
  width:132%; height:38px; margin:0 -16%;
  clip-path:polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  background:
    /* 트랙패드 */
    linear-gradient(#9fadc0, #9fadc0) center 26px / 17% 7px no-repeat,
    /* 자판 세 줄 */
    repeating-linear-gradient(90deg, #67778c 0 13px, transparent 13px 18px) center 7px / 68% 4px no-repeat,
    repeating-linear-gradient(90deg, #6b7b90 0 15px, transparent 15px 20px) center 13px / 72% 4px no-repeat,
    repeating-linear-gradient(90deg, #6f7f94 0 17px, transparent 17px 22px) center 19px / 76% 4px no-repeat,
    /* 바닥판 */
    linear-gradient(#dde5ee 0%, #b4c1d1 48%, #8b9bb0 100%);
  border-radius:0 0 7px 7px;
  box-shadow:0 14px 24px rgba(0,0,0,.4);
}
.dev-laptop::before{           /* 앞쪽 손잡이 홈 */
  content:""; position:absolute; left:50%; bottom:2px; z-index:2;
  width:18%; height:3px; transform:translateX(-50%);
  background:rgba(0,0,0,.2); border-radius:0 0 4px 4px;
}

/* 태블릿 */
.dev-tablet{ width:66%; max-width:330px; }
.dev-tablet .lt-screen{
  aspect-ratio:4/3;
  border-width:11px; border-radius:16px;
}
.dev-tablet::before{           /* 전면 카메라 */
  content:""; position:absolute; top:4px; left:50%; z-index:2;
  width:4px; height:4px; transform:translateX(-50%);
  background:#4a5f7a; border-radius:50%;
}

/* 아이폰 — 다이나믹 아일랜드 */
.dev-iphone{ width:32%; max-width:160px; }
.dev-iphone .lt-screen{
  aspect-ratio:9/19.5;
  border-width:6px; border-color:#38485f; border-radius:26px;
}
.dev-iphone::before{
  content:""; position:absolute; top:12px; left:50%; z-index:3;
  width:32%; height:9px; transform:translateX(-50%);
  background:#06090e; border-radius:999px;
}

/* 갤럭시 — 펀치홀, 모서리가 조금 각짐 */
.dev-galaxy{ width:32%; max-width:160px; }
.dev-galaxy .lt-screen{
  aspect-ratio:9/19.5;
  border-width:4px; border-color:#1d2a3a; border-radius:16px;
}
.dev-galaxy::before{
  content:""; position:absolute; top:9px; left:50%; z-index:3;
  width:7px; height:7px; transform:translateX(-50%);
  background:#06090e; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}

/* 아래까지 내려갔다가 다시 위로 올라오기를 반복한다 */
@keyframes shotScroll{
   0%  { transform:translateY(0); }
  46%  { transform:translateY(var(--shift, 0px)); }
  50%  { transform:translateY(var(--shift, 0px)); }
  96%  { transform:translateY(0); }
 100%  { transform:translateY(0); }
}
@media (prefers-reduced-motion: no-preference){
  .cpanel.is-open .lt-shot{
    animation:shotScroll 15s ease-in-out infinite;
  }
}

/* 좁은 화면에서는 기기를 조금 줄여 책상 위 소품이 보이게 한다 */
@media (max-width: 768px){
  .dev-laptop{ width:64%; }
  .dev-tablet{ width:46%; }
  .dev-iphone, .dev-galaxy{ width:24%; }
  .device{ top:42%; }
}

.cp-label{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:3px;
  padding:40px 16px 16px;
  background:linear-gradient(transparent, rgba(6,14,24,.9));
  color:#fff;
}
.cp-label strong{
  font-size:15px; font-weight:700; letter-spacing:-0.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cp-label em{
  font-style:normal; font-size:11px; font-weight:600;
  letter-spacing:.08em; color:rgba(255,255,255,.6);
}
.cpanel-empty{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(125,145,170,.45); background:transparent;
}
.cpanel-empty .cp-ph{ color:#8fa2b8; font-size:13px; }
.cpanel-empty .cp-label{ background:none; }
.svc-light .cpanel-empty .cp-label strong{ color:var(--ink-3); }
.svc-light .cpanel-empty .cp-label em{ color:#9aa8b8; }

/* 모바일 점 표시 (넓은 화면에서는 숨김) */
.acc-dots{ display:none; }

@media (prefers-reduced-motion: reduce){
  .cpanel, .cpanel img{ transition:none; }
}

/* ---- 좁은 화면: 사례를 한 건씩 넘겨 본다 ---- */
@media (max-width: 768px){
  .svc-head{ grid-template-columns:1fr; gap:12px; margin-bottom:28px; }
  .svc-en, .svc-ko, .svc-desc{ grid-column:1; }
  .svc-en{ grid-row:auto; } .svc-ko{ grid-row:auto; } .svc-desc{ grid-row:auto; }

  /* 좁은 화면에서는 한 장씩 위에서 아래로 */
  .cpanels{
    flex-direction:column;
    height:auto; gap:14px;
  }
  .cpanel{
    flex:none; width:100%;
    height:clamp(270px, 72vw, 330px);   /* 세로형 폰 목업이 들어갈 높이 */
  }
  .cpanel.is-open{ flex-grow:0; }
  .cpanel > a > img{ filter:grayscale(0) brightness(.85); transform:none; }

  /* 세로로 다 보이므로 점 표시는 필요 없다 */
  .acc-dots{ display:none; }

  /* 네 칸이 모두 보이므로 전부 움직이되, 시작 시점을 어긋나게 한다 */
  @media (prefers-reduced-motion: no-preference){
    .cpanel .lt-shot{ animation:shotScroll 15s ease-in-out infinite; }
    .cpanel:nth-child(2) .lt-shot{ animation-delay:-5s; }
    .cpanel:nth-child(3) .lt-shot{ animation-delay:-10s; }
    .cpanel:nth-child(4) .lt-shot{ animation-delay:-15s; }
  }
}


/* ===================== PORTFOLIO ===================== */
.portfolio{
  background:var(--paper-2);
  padding-block:clamp(72px, 9vw, 128px);
}
.pf-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px;
}
.pf a{ display:block; }
.pf-img{
  display:block; overflow:hidden; border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line);
}
.pf-img > img:first-child{
  width:100%; aspect-ratio:35/25; object-fit:cover;
  transition:transform .35s ease;
}
.pf a:hover .pf-img img{ transform:scale(1.05); }
.pf strong{
  display:block; margin-top:12px; font-size:15px; font-weight:700;
  letter-spacing:-0.01em;
}
.pf-more{ margin-top:52px; text-align:center; }

/* ===================== WORKFLOW ===================== */
.workflow{
  background:var(--ink); color:#fff;
  padding-block:clamp(72px, 9vw, 128px);
}
.workflow .sec-desc{ color:rgba(255,255,255,.7); }
.flow{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);
}
.flow-step{ background:var(--ink); padding:36px 28px; }
.flow-no{
  font-family:var(--font-en); font-weight:800; font-size:14px;
  letter-spacing:.14em; color:var(--accent);
}
.flow-en{
  margin-top:14px; font-family:var(--font-en); font-weight:800;
  font-size:clamp(19px, 1.7vw, 24px); letter-spacing:-0.02em;
}
.flow-list{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.flow-list li{
  position:relative; padding-left:16px;
  font-size:15px; color:rgba(255,255,255,.78); line-height:1.6;
}
.flow-list li::before{
  content:""; position:absolute; left:0; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}

/* ===================== 지역 ===================== */
.local{ padding-block:clamp(72px, 9vw, 128px); }
.local-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px;
}
.loc a{
  display:block; height:100%; padding:40px 34px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.loc a:hover{
  border-color:var(--ink);
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(12,26,43,.09);
}
.loc-en{
  font-family:var(--font-en); font-weight:800; font-size:13px;
  letter-spacing:.2em; color:var(--accent);
}
.loc-ko{ margin-top:14px; font-size:23px; font-weight:800; letter-spacing:-0.025em; }
.loc-desc{ margin-top:14px; color:var(--ink-3); font-size:15px; line-height:1.8; }
.loc-go{
  display:inline-block; margin-top:26px;
  font-size:14px; font-weight:700;
  border-bottom:2px solid var(--accent); padding-bottom:3px;
}

/* ===================== CONTACT ===================== */
.contact{ background:var(--paper-2); padding-block:clamp(72px, 9vw, 128px); }
.contact-in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:56px; align-items:start;
}
.contact-list{
  margin-top:40px; display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--line);
}
.contact-list > div{
  display:grid; grid-template-columns:120px minmax(0,1fr);
  gap:16px; padding:15px 0; border-bottom:1px solid var(--line);
}
.contact-list dt{
  font-family:var(--font-en); font-size:12px; font-weight:700;
  letter-spacing:.14em; color:var(--ink-3); padding-top:4px;
}
.contact-list dd{ font-size:16px; font-weight:600; }
.contact-list a:hover{ color:var(--accent); }

.quote{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(26px, 3vw, 40px);
}
.quote-title{ font-size:20px; font-weight:800; margin-bottom:24px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field label{ font-size:14px; font-weight:700; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper); line-height:1.6;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--ink); outline-offset:1px;
}
.field textarea{ resize:vertical; min-height:104px; }
.field input::placeholder,.field textarea::placeholder{ color:#9aa8b8; }

.agree{ display:flex; gap:10px; align-items:flex-start; margin:22px 0 24px; }
.agree input{ margin-top:5px; width:17px; height:17px; flex:none; accent-color:var(--accent); }
.agree label{ font-size:14px; line-height:1.6; }
.agree-sub{ display:block; margin-top:4px; font-size:12.5px; color:var(--ink-3); }
.quote-note{ margin-top:14px; text-align:center; font-size:14px; color:var(--ink-3); }
.quote-note a{ font-weight:700; color:var(--accent-ink); }

/* ===================== 푸터 ===================== */
.site-foot{ background:var(--ink); color:rgba(255,255,255,.72); }
.foot-in{ padding-block:56px; }
.foot-brand{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.site-foot .brand-mark{ color:#fff; font-size:22px; }
.foot-tag{ font-size:14px; }
.foot-nav{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  margin-top:26px; padding-block:22px;
  border-block:1px solid rgba(255,255,255,.14);
  font-size:14px; font-weight:600;
}
.foot-nav a:hover{ color:#fff; }
.foot-info{
  margin-top:24px; font-style:normal; font-size:14px; line-height:1.95;
}
.copy{
  margin-top:20px; font-family:var(--font-en);
  font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.45);
}

/* ===================== 플로팅 버튼 ===================== */
.floating{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:flex; flex-direction:column; gap:8px;
}
.float-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:66px; height:66px; border-radius:50%;
  box-shadow:0 10px 26px rgba(12,26,43,.28);
  transition:transform .18s ease;
}
.float-btn:hover{ transform:translateY(-3px); }
.float-tel{ background:var(--ink); color:#fff; }
.float-quote{ background:var(--accent-ink); color:#fff; }
.float-ico{ font-family:var(--font-en); font-weight:800; font-size:17px; line-height:1; }
.float-txt{ font-size:11px; font-weight:700; margin-top:3px; }

/* ===================== 스크롤 등장 ===================== */
/* 기본값은 "다 보이는 상태". JS 가 .js 를 붙였을 때만 숨겼다가 올린다.
   스크립트가 막히거나 꺼져 있어도 내용은 전부 읽힌다. */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  .js .reveal{
    opacity:0; transform:translateY(18px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1);
    transition-delay:calc(var(--i, 0) * 70ms);
  }
  .js .reveal.is-in{ opacity:1; transform:none; }
}

/* ---- 줄 마스크 등장 (영문 대제목) ---- */
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero-title .line-in{ display:block; }
@media (prefers-reduced-motion: no-preference){
  .js .rise .line-in{
    transform:translateY(108%);
    transition:transform .9s cubic-bezier(.16,.84,.3,1);
  }
  .js .rise .line:nth-child(2) .line-in{ transition-delay:.12s; }
  .js .rise.is-in .line-in{ transform:none; }
}

/* ---- 읽은 분량 표시 바 ---- */
.scroll-prog{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:transparent; pointer-events:none;
}
.scroll-prog span{
  display:block; height:100%; width:0;
  background:var(--accent);
  transform-origin:left center;
}

/* ---- 헤더 축소 ---- */
.site-head{ transition:box-shadow .25s ease; }
.site-head.is-stuck{ box-shadow:0 6px 24px rgba(12,26,43,.08); }
.site-head.is-stuck .head-in{ height:62px; }
.head-in{ transition:height .25s ease; }

/* ---- 썸네일 생동감 ----
   화면에 들어오면 이미지가 아주 느리게 확대·이동한다.
   data-src 에 영상 경로를 넣으면 같은 자리에서 무음 영상이 재생된다. */
.pf-img, .case a{ position:relative; }
.shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .4s ease;
  pointer-events:none; border-radius:var(--r);
}
.shot.is-playing{ opacity:1; }

@media (prefers-reduced-motion: no-preference){
  .pf-img > img:first-child{
    transition:transform 7s linear, opacity .4s ease;
  }
  .pf.is-live .pf-img > img:first-child{ transform:scale(1.07); }
  .pf a:hover .pf-img > img:first-child{ transition:transform .5s ease; transform:scale(1.07); }
}

/* ---- 사례 사이트 롱샷 ----
   제작한 사이트를 세로로 길게 캡처해 두고, 카드가 화면에 들어오면
   위에서 아래로 천천히 훑어 내려간다. 사이트를 실제로 스크롤하는 것처럼 보인다.
   영상이 아니라 이미지 1장이라 용량이 작고 어느 브라우저에서나 돈다. */
.pf-img{ overflow:hidden; }
.longshot{
  position:absolute; top:0; left:0;
  width:100%; height:auto;
  aspect-ratio:auto; object-fit:fill;   /* 카드 비율에 눌리지 않게 */
  opacity:0; transition:opacity .45s ease;
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .pf.is-live .longshot{ opacity:1; }
  .pf.is-live .pf-img > img:first-child{ transform:none; }
  .longshot{
    transform:translateY(0);
    transition:opacity .45s ease, transform 9s linear;
  }
  .pf.is-live .longshot{ transform:translateY(var(--shift, 0px)); }
  /* 마우스를 올리면 끝까지 빠르게 */
  .pf a:hover .longshot{ transition:opacity .3s ease, transform 2.4s ease-out; }
}
@media (prefers-reduced-motion: reduce){
  /* 움직임을 끈 사용자에게는 첫 화면만 정지 상태로 보여준다 */
  .pf.is-live .longshot{ opacity:1; transform:none; }
}

/* ===================== 반응형 ===================== */
@media (max-width: 1180px){
  .gnb{ gap:20px; }
  .head-cta .tel-link{ display:none; }
}

@media (max-width: 1024px){
  :root{ --gut:20px; }
  .gnb, .head-cta{ display:none; }
  .nav-toggle{ display:block; margin-left:auto; }
  .hero-in{ grid-template-columns:1fr; gap:40px; }
  .hero-visual{ order:-1; aspect-ratio:16/9; min-height:0; }
  .sec-head-row{ grid-template-columns:1fr; align-items:start; }
  .svc{ grid-template-columns:1fr; gap:28px; padding-block:40px; }
  .pf-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .flow{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .contact-in{ grid-template-columns:1fr; gap:40px; }
}

@media (max-width: 768px){
  .stats-in{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px 16px; }
  .pf-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .local-grid{ grid-template-columns:1fr; }
  .sec-head{ margin-bottom:40px; }
}

@media (max-width: 520px){
  body{ font-size:15.5px; }
  .head-in{ height:64px; }
  .case-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .flow{ grid-template-columns:1fr; }
  .flow-step{ padding:28px 22px; }
  .contact-list > div{ grid-template-columns:92px minmax(0,1fr); gap:12px; }
  .btn{ padding:15px 24px; }
  .hero-btns .btn{ width:100%; }
  .floating{ right:12px; bottom:12px; flex-direction:row; }
  .float-btn{ width:58px; height:58px; }
}

/* ---- 모바일 카드 배경: 책과 필기구가 놓인 책상 ----
   직접 그린 벡터(SVG)를 data URI 로 넣는다. 파일 요청이 없고 확대해도 선명하다.
   nth-child 로 나뉜 네 가지 배경을 좁은 화면에서는 이 하나로 통일한다. */
@media (max-width: 768px){
  .cpanel:has(.device):nth-child(n){
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22wall%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f7f9fc%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e6ecf4%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23wall%29%22%2F%3E%3Crect%20y%3D%22196%22%20width%3D%22400%22%20height%3D%22104%22%20fill%3D%22%23c7ae8c%22%2F%3E%3Crect%20y%3D%22194%22%20width%3D%22400%22%20height%3D%223%22%20fill%3D%22%23efe3d2%22%2F%3E%3Cg%3E%3Crect%20x%3D%2218%22%20y%3D%22168%22%20width%3D%2286%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22%232f4a6d%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%22168%22%20width%3D%2286%22%20height%3D%224%22%20%20rx%3D%222%22%20fill%3D%22%2344608a%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%22156%22%20width%3D%2278%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22%23b5483f%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%22156%22%20width%3D%2278%22%20height%3D%224%22%20%20rx%3D%222%22%20fill%3D%22%23cc6055%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%22144%22%20width%3D%2283%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22%23e0dbd0%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%22144%22%20width%3D%2283%22%20height%3D%224%22%20%20rx%3D%222%22%20fill%3D%22%23f1ece3%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%22172%22%20width%3D%2222%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%239fb3cc%22%20opacity%3D%22.7%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%22160%22%20width%3D%2220%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%23f0bdb6%22%20opacity%3D%22.8%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20x%3D%22112%22%20y%3D%22118%22%20width%3D%2214%22%20height%3D%2262%22%20rx%3D%222%22%20fill%3D%22%233c6b63%22%2F%3E%3Crect%20x%3D%22112%22%20y%3D%22118%22%20width%3D%224%22%20%20height%3D%2262%22%20rx%3D%222%22%20fill%3D%22%234e867c%22%2F%3E%3Crect%20x%3D%22117%22%20y%3D%22132%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221%22%20fill%3D%22%23cfe3dd%22%20opacity%3D%22.85%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20x%3D%22322%22%20y%3D%22120%22%20width%3D%227%22%20height%3D%2254%22%20rx%3D%222%22%20fill%3D%22%23e8b84b%22%20transform%3D%22rotate%287%20325%20150%29%22%2F%3E%3Cpolygon%20points%3D%22322%2C120%20329%2C120%20325.5%2C110%22%20fill%3D%22%23f0d9a7%22%20transform%3D%22rotate%287%20325%20150%29%22%2F%3E%3Crect%20x%3D%22334%22%20y%3D%22114%22%20width%3D%226%22%20height%3D%2260%22%20rx%3D%222%22%20fill%3D%22%232f4a6d%22%20transform%3D%22rotate%28-6%20337%20150%29%22%2F%3E%3Crect%20x%3D%22334%22%20y%3D%22128%22%20width%3D%226%22%20height%3D%225%22%20fill%3D%22%238fa6c2%22%20transform%3D%22rotate%28-6%20337%20150%29%22%2F%3E%3Crect%20x%3D%22345%22%20y%3D%22124%22%20width%3D%226%22%20height%3D%2252%22%20rx%3D%222%22%20fill%3D%22%23b5483f%22%20transform%3D%22rotate%2814%20348%20150%29%22%2F%3E%3Cpath%20d%3D%22M316%20166%20h44%20l-5%2032%20a4%204%200%200%201%20-4%203%20h-26%20a4%204%200%200%201%20-4%20-3%20z%22%20fill%3D%22%235b7390%22%2F%3E%3Cpath%20d%3D%22M316%20166%20h44%20l-1.4%209%20h-41.2%20z%22%20fill%3D%22%236e88a7%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20x%3D%22252%22%20y%3D%22170%22%20width%3D%2254%22%20height%3D%2214%22%20rx%3D%222%22%20fill%3D%22%23f3f0e8%22%2F%3E%3Crect%20x%3D%22252%22%20y%3D%22170%22%20width%3D%2254%22%20height%3D%224%22%20%20rx%3D%222%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20x%3D%22256%22%20y%3D%22178%22%20width%3D%2230%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%23c9c3b6%22%2F%3E%3Ccircle%20cx%3D%22238%22%20cy%3D%22182%22%20r%3D%223.2%22%20fill%3D%22none%22%20stroke%3D%22%239aa7b8%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%22.22%22%20stroke%3D%22%238b6f4c%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20214%20H400%22%2F%3E%3Cpath%20d%3D%22M0%20232%20H400%22%2F%3E%3Cpath%20d%3D%22M0%20252%20H400%22%2F%3E%3Cpath%20d%3D%22M0%20274%20H400%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center bottom / cover no-repeat;
  }
  .cpanel:has(.device):nth-child(n)::before{ opacity:0; }
  .cpanel:has(.device):nth-child(n)::after{
    top:58%; background:radial-gradient(50% 50% at 50% 50%, rgba(70,50,28,.3), transparent 72%);
  }
  .cpanel:has(.device):nth-child(n) .cp-label{
    background:linear-gradient(transparent, rgba(255,255,255,.78) 45%, rgba(255,255,255,.96));
    color:var(--ink);
  }
  .cpanel:has(.device):nth-child(n) .cp-label em{ color:var(--ink-3); }
}

/* ===================== ONGOING PROJECT =====================
   목록에 마우스를 올리면 그 사이트 캡처가 커서를 따라다니며 뜬다.
   캡처는 사례 카드에 쓰는 파일을 그대로 재활용한다. */
.ongoing{
  position:relative; overflow:hidden;
  background:var(--paper-2);
  padding-block:clamp(64px, 8vw, 110px);
}
.ongoing-in{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:48px; align-items:start;
}
.og-title{
  font-family:var(--font-en); font-weight:900;
  font-size:clamp(34px, 5vw, 70px); line-height:.98;
  letter-spacing:-0.035em;
}
.og-title span{ display:block; }
.og-title .outline{
  color:transparent; -webkit-text-stroke:2px rgba(12,26,43,.28);
}
.og-desc{ margin-top:24px; max-width:40ch; color:var(--ink-3); line-height:1.85; }
.og-note{ margin-top:14px; font-size:13px; color:#9aa8b8; }

.og-list{ border-top:1px solid var(--line); }
.og-row{
  position:relative; z-index:2;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px; align-items:center;
  padding:22px 8px;
  border-bottom:1px solid var(--line);
  transition:padding-left .3s ease, background .3s ease;
}
.og-row::before{            /* 왼쪽에서 자라는 포인트 선 */
  content:""; position:absolute; left:0; top:50%; width:0; height:2px;
  background:var(--accent); transform:translateY(-50%);
  transition:width .3s ease;
}
.og-date{
  font-family:var(--font-en); font-size:14px; font-weight:700;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
  transition:color .25s ease;
}
.og-txt{
  font-size:17px; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.og-txt strong{ font-weight:700; }
.og-go{
  font-size:18px; color:var(--ink-3);
  opacity:0; transform:translateX(-6px);
  transition:opacity .25s ease, transform .3s ease;
}
.og-more{ margin-top:34px; text-align:right; }

@media (hover: hover){
  .og-row:hover{ padding-left:26px; background:rgba(255,255,255,.7); }
  .og-row:hover::before{ width:14px; }
  .og-row:hover .og-date{ color:var(--accent-ink); }
  .og-row:hover .og-go{ opacity:1; transform:none; color:var(--accent-ink); }
  /* 다른 줄은 한 톤 흐리게 */
  .og-list:hover .og-row{ opacity:.45; transition:opacity .25s ease; }
  .og-list:hover .og-row:hover{ opacity:1; }
}
.og-row:focus-visible{ padding-left:26px; }

/* 커서를 따라다니는 미리보기 */
.og-peek{
  position:absolute; top:0; left:0; z-index:5;
  width:280px; pointer-events:none;
  opacity:0; transform:translate3d(0,0,0) scale(.94);
  transition:opacity .25s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.og-peek.is-on{ opacity:1; }
.og-peek-screen{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:16/10;
  border:5px solid #2b3d55; border-bottom-width:7px;
  border-radius:8px 8px 3px 3px;
  background:#060d16;
  box-shadow:0 22px 44px rgba(12,26,43,.34);
}
.og-peek img{
  position:absolute; top:0; left:0;
  width:100%; height:auto; aspect-ratio:auto; object-fit:fill;
}

@media (prefers-reduced-motion: reduce){
  .og-peek{ transition:opacity .2s ease; }
}

@media (max-width: 900px){
  .ongoing-in{ grid-template-columns:1fr; gap:32px; }
  .og-peek{ display:none; }              /* 터치 화면에는 미리보기 없음 */
  .og-row{ grid-template-columns:auto minmax(0,1fr); padding:18px 2px; }
  .og-go{ display:none; }
  .og-txt{ white-space:normal; font-size:15.5px; }
  .og-more{ text-align:center; }
}

/* ---- 섹션별 포인트 색 ----
   같은 밝기대의 따뜻한 색을 조금씩 옮겨가며 쓴다. 섹션이 바뀌는 게 느껴지되
   다른 사이트처럼 보이지는 않을 만큼만 차이를 둔다. */
#svc-homepage{ --accent:#e0655d; --accent-ink:#c0463f; --accent-dk:#a63b35; }  /* 코랄 */
#svc-shop    { --accent:#e3895f; --accent-ink:#c66a3c; --accent-dk:#a95733; }  /* 살구 */
#svc-hosting { --accent:#d9647b; --accent-ink:#bb4459; --accent-dk:#9e394b; }  /* 로즈 */
#svc-care    { --accent:#c76e94; --accent-ink:#a94d74; --accent-dk:#8f4162; }  /* 모브 */
.portfolio   { --accent:#e0655d; --accent-ink:#c0463f; }
.ongoing     { --accent:#d9647b; --accent-ink:#bb4459; }

/* ===================== 폰트 비교 도구 (시안 전용) =====================
   정식 오픈 전 이 블록과 fontlab.js, index.html 의 해당 블록을 지우면 됩니다. */
.fontlab{
  position:fixed; left:16px; bottom:16px; z-index:95;
  display:flex; align-items:flex-end; gap:8px;
  font-family:var(--font-ko);
}
.fl-toggle{
  flex:none; width:42px; height:42px; border-radius:50%;
  background:var(--ink); color:#fff;
  font-family:var(--font-en); font-weight:800; font-size:15px;
  box-shadow:0 8px 20px rgba(12,26,43,.3);
}
.fl-body{
  background:rgba(255,255,255,.97);
  border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; width:260px;
  box-shadow:0 14px 32px rgba(12,26,43,.16);
  backdrop-filter:blur(8px);
}
.fontlab.is-min .fl-body{ display:none; }
.fl-title{
  font-size:13px; font-weight:800; margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
}
.fl-title span{
  font-size:10px; font-weight:700; letter-spacing:.06em;
  color:#fff; background:var(--ink-3);
  padding:2px 6px; border-radius:3px;
}
.fl-label{
  font-size:11px; font-weight:700; color:var(--ink-3);
  letter-spacing:.08em; margin:10px 0 6px;
}
.fl-row{ display:flex; flex-wrap:wrap; gap:5px; }
.fl-btn{
  font-size:12px; font-weight:600; line-height:1;
  padding:7px 9px; border-radius:4px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.fl-btn:hover{ border-color:var(--ink-3); }
.fl-btn.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }

@media (max-width: 768px){
  .fontlab{ left:10px; bottom:10px; }
  .fl-body{ width:min(66vw, 240px); padding:12px; }
}

/* ===================== 서브페이지 (서비스 상세) ===================== */
.sub-hero{ padding-block:clamp(48px, 6vw, 86px) clamp(44px, 5vw, 72px); }
.sub-hero.svc-light{ background:var(--paper-2); border-bottom:1px solid var(--line); }
.crumb{ font-size:13px; color:var(--ink-3); margin-bottom:22px; }
.crumb a:hover{ color:var(--accent-ink); text-decoration:underline; }
.svc-dark .crumb{ color:rgba(255,255,255,.6); }
.sub-hero .big-en{ color:var(--accent); margin-bottom:16px; }
.svc-dark .big-en .outline{ -webkit-text-stroke-color:rgba(255,255,255,.32); }
.sub-title{
  font-size:clamp(26px, 3.4vw, 42px); font-weight:800;
  letter-spacing:-0.03em; line-height:1.25; text-wrap:balance;
}
.sub-lead{ margin-top:18px; max-width:58ch; font-size:17px; line-height:1.85; color:var(--ink-3); }
.svc-dark .sub-lead{ color:rgba(255,255,255,.76); }
.sub-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }

.sub-sec{ padding-block:clamp(50px, 6vw, 84px); }
.sub-tint{ background:var(--paper-2); }
.sub-h2{
  font-size:clamp(20px, 2.2vw, 28px); font-weight:800;
  letter-spacing:-0.025em; margin-bottom:30px;
}
.sub-h2::after{
  content:""; display:block; width:36px; height:3px;
  margin-top:14px; background:var(--accent);
}
.svc-dark .sub-h2{ color:#fff; }

/* 무엇을 해드리나 */
.scope{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px 28px; }
.scope li{ min-width:0; border-top:1px solid var(--line); padding-top:18px; }
.scope h3{ font-size:17px; font-weight:800; letter-spacing:-0.02em; }
.scope p{ margin-top:9px; font-size:15px; line-height:1.8; color:var(--ink-3); }

/* 진행 방식 */
.steps{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.steps li{ background:var(--paper-2); padding:26px 20px; min-width:0; }
.sub-tint .steps li{ background:var(--paper); }
.st-no{ font-family:var(--font-en); font-weight:800; font-size:13px; letter-spacing:.14em; color:var(--accent); }
.steps h3{ margin-top:12px; font-size:16px; font-weight:800; letter-spacing:-0.02em; }
.steps p{ margin-top:9px; font-size:14px; line-height:1.75; color:var(--ink-3); }

/* 포함 / 불포함 */
.inout{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
.io{ border:1px solid var(--line); border-radius:6px; padding:26px 24px; }
.io h3{ font-size:16px; font-weight:800; margin-bottom:16px; }
.io-in h3{ color:var(--accent-ink); }
.io-ex h3{ color:var(--ink-3); }
.io li{ position:relative; padding-left:18px; font-size:15px; line-height:1.9; }
.io li::before{
  content:""; position:absolute; left:0; top:13px;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.io-ex li::before{ background:var(--line); }

/* 자주 묻는 것 */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 34px 20px 2px;
  font-size:16px; font-weight:700; letter-spacing:-0.015em; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--font-en); font-size:19px; color:var(--accent-ink);
}
.faq details[open] summary::after{ content:"−"; }
.faq p{ margin:0; padding:0 34px 22px 2px; font-size:15px; line-height:1.85; color:var(--ink-3); }

/* 다른 서비스 */
.other-svc{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.other-svc a{
  display:block; padding:24px 22px; border:1px solid var(--line); border-radius:6px;
  background:var(--paper); transition:border-color .2s ease, transform .2s ease;
}
.other-svc a:hover{ border-color:var(--ink); transform:translateY(-3px); }
.other-svc span{
  display:block; font-family:var(--font-en); font-weight:800; font-size:13px;
  letter-spacing:.14em; color:var(--accent);
}
.other-svc strong{ display:block; margin-top:8px; font-size:17px; font-weight:800; letter-spacing:-0.02em; }

/* 맺음 */
.sub-cta{ background:var(--ink); color:#fff; padding-block:clamp(52px, 6vw, 84px); text-align:center; }
.sub-cta h2{ font-size:clamp(20px, 2.4vw, 30px); font-weight:800; letter-spacing:-0.025em; text-wrap:balance; }
.sub-cta p{ margin-top:14px; color:rgba(255,255,255,.72); }
.sub-cta .sub-btns{ justify-content:center; }

.sub-cases .case-acc{ margin-top:4px; }
.sub-cases .acc-dots:empty{ display:none; }

@media (max-width: 1024px){
  .scope{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .other-svc{ grid-template-columns:1fr; }
}
@media (max-width: 680px){
  .scope{ grid-template-columns:1fr; gap:20px; }
  .steps{ grid-template-columns:1fr; }
  .inout{ grid-template-columns:1fr; }
  .sub-btns .btn{ width:100%; }
}

.svc-more{ margin-top:18px; }
.svc-more a{
  font-size:15px; font-weight:700;
  border-bottom:2px solid var(--accent); padding-bottom:3px;
}
.svc-more a:hover{ color:var(--accent-ink); }

/* ===================== 서브페이지 연출 ===================== */

/* ① 오른쪽 목차 */
.sub-nav{
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  z-index:60; opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.sub-nav.is-shown{ opacity:1; pointer-events:auto; }
.sub-nav ol{ display:flex; flex-direction:column; gap:2px; }
.sub-nav a{
  display:flex; align-items:center; gap:10px; justify-content:flex-end;
  padding:7px 2px; font-size:12.5px; font-weight:600; color:var(--ink-3);
  transition:color .2s ease;
}
.sub-nav a::after{
  content:""; width:18px; height:2px; background:var(--line);
  transition:width .25s ease, background .2s ease;
}
.sub-nav a span{ opacity:0; transform:translateX(6px); transition:opacity .2s ease, transform .25s ease; }
.sub-nav a:hover{ color:var(--ink); }
.sub-nav a:hover::after{ width:28px; background:var(--ink-3); }
.sub-nav a.is-on{ color:var(--accent-ink); }
.sub-nav a.is-on::after{ width:34px; background:var(--accent); }

/* ② 고객사 롤링 띠 */
.roll{
  overflow:hidden; background:var(--ink); color:#fff;
  padding-block:18px; border-block:1px solid rgba(255,255,255,.12);
}
.roll-track{ display:flex; width:max-content; }
.roll-row{
  display:flex; align-items:center; gap:0;
  padding-right:28px; white-space:nowrap;
  font-family:var(--font-ko); font-size:15px; font-weight:700; letter-spacing:-0.01em;
}
.roll-row span{ padding:0 18px; color:rgba(255,255,255,.88); }
.roll-row i{ font-style:normal; color:var(--accent); }
@media (prefers-reduced-motion: no-preference){
  @keyframes rollMove{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .roll-track{ animation:rollMove 46s linear infinite; }
  .roll:hover .roll-track{ animation-play-state:paused; }
}

/* ③ 순차 등장 — JS 가 붙었을 때만 숨긴다 */
.subfx .rise-up{
  opacity:0; transform:translateY(34px) scale(.97);
  transition:opacity .5s ease, transform .7s cubic-bezier(.16,1.05,.3,1);
}
.subfx .rise-up.is-in{ opacity:1; transform:none; }

/* ④ FAQ 부드럽게 */
.faq details p{ overflow:hidden; transition:height .28s ease, opacity .28s ease; }

@media (max-width: 1400px){
  .sub-nav{ display:none; }     /* 자리가 좁으면 목차는 숨긴다 */
}

/* 좌우에서 날아 들어오기 — 멀리서, 비스듬히, 흐릿하게 출발해 제자리에 꽂힌다 */
.inout{ perspective:1200px; }
.subfx .rise-up.from-l{
  transform:translateX(-160px) rotateY(22deg) scale(.9);
  filter:blur(6px);
}
.subfx .rise-up.from-r{
  transform:translateX(160px) rotateY(-22deg) scale(.9);
  filter:blur(6px);
}
.subfx .rise-up.from-l, .subfx .rise-up.from-r{
  transform-origin:center center;
  /* 끝에서 살짝 지나쳤다 돌아오는 곡선 */
  transition:opacity .5s ease,
             filter .5s ease,
             transform .9s cubic-bezier(.16,1.12,.28,1);
}
.subfx .rise-up.from-r{ transition-delay:.12s; }
.subfx .rise-up.from-l.is-in, .subfx .rise-up.from-r.is-in{
  transform:none; filter:none;
}
/* 날아 들어오는 동안 가로 스크롤이 생기지 않게 막아 둔다 */
.inout{ overflow-x:clip; }
@media (max-width: 680px){
  .subfx .rise-up.from-l{ transform:translateX(-70px) rotateY(14deg) scale(.94); }
  .subfx .rise-up.from-r{ transform:translateX(70px) rotateY(-14deg) scale(.94); }
}

/* =====================================================================
   서브페이지 확장 — 회사소개 · 제작과정 · 포트폴리오 · 지역 · 견적 · FAQ · 약관
   ===================================================================== */

/* ---------- 머리말: 서비스 펼침 메뉴 ---------- */
.gnb-has{ position:relative; display:inline-flex; }
.gnb-sub{
  position:absolute; top:100%; left:50%; transform:translate(-50%, 8px);
  display:grid; min-width:176px; padding:10px 0;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 40px rgba(16,28,45,.14);
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:30;
}
.gnb-has:hover .gnb-sub,
.gnb-has:focus-within .gnb-sub{ opacity:1; visibility:visible; transform:translate(-50%, 2px); }
.gnb-sub a{
  padding:9px 18px; font-size:14px; font-weight:600; white-space:nowrap;
  border-bottom:0; color:var(--ink-2);
}
.gnb-sub a:hover{ color:var(--accent-ink); background:var(--paper-2); }

/* ---------- 꼬리말: 세 묶음으로 ---------- */
.foot-nav{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px 30px;
  margin-top:30px; padding-block:28px;
  border-block:1px solid rgba(255,255,255,.14);
  font-size:14px; font-weight:500;
}
.fn-col{ display:grid; gap:9px; align-content:start; }
.fn-col h3{
  font-family:var(--font-en); font-size:12px; letter-spacing:.14em;
  color:rgba(255,255,255,.42); margin-bottom:3px;
}
.fn-col a{ color:rgba(255,255,255,.74); }
.fn-col a:hover{ color:#fff; }
.copy{ line-height:2; }
.copy a{ color:rgba(255,255,255,.6); text-decoration:underline; text-underline-offset:3px; }
.copy a:hover{ color:#fff; }
@media (max-width: 680px){
  .foot-nav{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ---------- 머리말 배경이 느리게 따라온다 ---------- */
.sub-hero[data-para]{ position:relative; overflow:hidden; }
.sub-hero[data-para]::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:160%;
  transform:translate3d(0, var(--para, 0px), 0);
  background:
    radial-gradient(42% 46% at 14% 18%, rgba(224,101,93,.16), rgba(224,101,93,0) 70%),
    radial-gradient(38% 40% at 88% 8%, rgba(32,52,82,.10), rgba(32,52,82,0) 72%);
  pointer-events:none;
}
.sub-hero > .wrap{ position:relative; z-index:1; }

/* ---------- 제목 한 줄씩 올라오기 ---------- */
.linefx .line-rise{ overflow:hidden; }
.linefx .line-rise span{
  opacity:0; transform:translateY(100%) skewY(3deg);
  transition:opacity .5s ease, transform .76s cubic-bezier(.16,1,.3,1);
}
.linefx .line-rise.is-in span{ opacity:1; transform:none; }

/* ---------- 숫자로 보면 ---------- */
.big-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.big-stats li{
  position:relative; padding:30px 24px 26px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px;
  display:grid; align-content:start;
}
.big-stats li{ border-top:3px solid var(--accent); }
.big-stats .cnt, .big-stats .cnt-text{
  font-family:var(--font-en); font-weight:900; line-height:1;
  font-size:clamp(38px, 4.4vw, 56px); color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.big-stats .cnt-text{ font-family:var(--font-ko); font-size:clamp(28px, 3vw, 38px); }
.big-stats .unit{
  display:inline-block; margin-top:6px; font-size:15px; font-weight:700; color:var(--accent-ink);
}
.big-stats .stat-label{ margin-top:10px; font-size:15px; color:var(--ink-2); }
@media (max-width: 820px){ .big-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ---------- 정보 표 ---------- */
.info-table{ border-top:2px solid var(--ink); font-size:16px; }
.info-table > div{
  display:grid; grid-template-columns:180px 1fr; gap:0 20px;
  padding:18px 4px; border-bottom:1px solid var(--line);
}
.info-table dt{ font-weight:700; color:var(--ink); }
.info-table dd{ color:var(--ink-2); line-height:1.8; }
.info-table a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }
@media (max-width: 680px){
  .info-table > div{ grid-template-columns:1fr; gap:6px; }
}

/* ---------- 세로 타임라인 ---------- */
.tline{ position:relative; padding-left:54px; }
.tline-rail{
  position:absolute; left:17px; top:10px; bottom:10px; width:2px;
  background:var(--line); border-radius:2px; overflow:hidden;
}
.svc-dark .tline-rail{ background:rgba(255,255,255,.18); }
.tline-bar{
  position:absolute; inset:0; transform:scaleY(0); transform-origin:top;
  background:linear-gradient(180deg, var(--accent), var(--accent-dk));
  will-change:transform;
}
.tline ol{ display:grid; gap:34px; }
.tline-step{ position:relative; }
.tline-dot{
  position:absolute; left:-45px; top:4px; width:16px; height:16px; border-radius:50%;
  background:var(--paper); border:2px solid var(--line);
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.svc-dark .tline-dot{ background:var(--ink); border-color:rgba(255,255,255,.28); }
.tline-step.is-on .tline-dot{ background:var(--accent); border-color:var(--accent); transform:scale(1.18); }
.tline-no{
  display:block; font-family:var(--font-en); font-size:12px; font-weight:800;
  letter-spacing:.14em; color:var(--ink-3); margin-bottom:6px;
}
.svc-dark .tline-no{ color:rgba(255,255,255,.45); }
.tline-step.is-on .tline-no{ color:var(--accent-ink); }
.svc-dark .tline-step.is-on .tline-no{ color:var(--accent); }
.tline-step h3{ font-size:clamp(19px, 2vw, 23px); font-weight:800; color:var(--ink); }
.svc-dark .tline-step h3{ color:#fff; }
.tline-cols{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 24px; margin-top:12px;
}
.tline-cols p{
  padding:16px 18px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:12px; font-size:15px; line-height:1.8; color:var(--ink-2);
}
.svc-dark .tline-cols p{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.76);
}
.tline-cols b{
  display:block; font-size:12px; letter-spacing:.06em; color:var(--accent-ink); margin-bottom:5px;
}
.svc-dark .tline-cols b{ color:var(--accent); }
/* 아직 지나지 않은 단계는 살짝 물러나 있다 */
.subfx .tline-step{
  opacity:.34; transform:translateY(16px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.subfx .tline-step.is-on{ opacity:1; transform:none; }
@media (max-width: 680px){
  .tline{ padding-left:36px; }
  .tline-rail{ left:9px; }
  .tline-dot{ left:-33px; width:14px; height:14px; }
  .tline-cols{ grid-template-columns:1fr; }
}

/* ---------- 포트폴리오 거르기 ---------- */
.pf-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.pf-filter button{
  padding:9px 18px; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:14px; font-weight:700; color:var(--ink-2); cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.pf-filter button:hover{ border-color:var(--accent); color:var(--accent-ink); }
.pf-filter button.is-on{
  background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-1px);
}
.pf-cards{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; }
.pf-card{ transition:opacity .34s ease, transform .34s ease; }
.pf-card.is-off{
  opacity:0; transform:scale(.94); pointer-events:none;
  position:absolute; visibility:hidden;
}
.pf-card a{ display:grid; gap:10px; }
.pfc-img{
  display:block; position:relative; overflow:hidden; aspect-ratio:4/3;
  border-radius:14px; border:1px solid var(--line); background:var(--paper-2);
}
.pfc-img img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.pf-card a:hover .pfc-img img{ transform:scale(1.06); }
.pf-card strong{ font-size:16px; font-weight:700; color:var(--ink); }
.pf-card em{
  display:inline-block; justify-self:start; font-style:normal;
  font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-ink);
}
.pf-note{ margin-top:28px; font-size:15px; color:var(--ink-3); }
.pf-more{ margin-top:14px; }
@media (max-width: 1024px){ .pf-cards{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px){ .pf-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } }

/* ---------- 지도 ---------- */
.map-box{
  padding:34px; border:1px dashed var(--line); border-radius:18px; background:var(--paper-2);
}
.map-note{ font-size:15px; line-height:1.9; color:var(--ink-2); margin-bottom:20px; }

/* ---------- 약관 · 방침 ---------- */
.legal-note{
  padding:14px 18px; margin-bottom:28px; border-radius:10px;
  background:var(--accent-soft); color:var(--accent-ink); font-size:14px; font-weight:600;
}
.legal{ display:grid; gap:26px; max-width:860px; }
.legal .art h3{ font-size:17px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.legal .art p{ font-size:15px; line-height:1.95; color:var(--ink-2); }
.legal-date{ margin-top:34px; font-size:14px; color:var(--ink-3); }

.muted{ font-size:15px; color:var(--ink-3); }

/* ---------- 움직임을 줄이고 싶다는 설정은 존중 ---------- */
@media (prefers-reduced-motion: reduce){
  .linefx .line-rise span,
  .subfx .tline-step,
  .pf-card,
  .pfc-img img{ transition:none !important; transform:none !important; opacity:1 !important; }
  .sub-hero[data-para]::before{ transform:none !important; }
}

/* 어두운 머리말 위의 선 버튼은 흰 선으로 */
.svc-dark .btn-line{ border-color:rgba(255,255,255,.4); color:#fff; }
.svc-dark .btn-line:hover{ background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }
.svc-dark .legal-note,
.svc-dark .map-note{ color:#fff; }

/* ---------- 지역 페이지: 이런 고민 / 왜 오아시스인가 ---------- */
.sec-lead{
  margin:-10px 0 28px; font-size:16px; line-height:1.85; color:var(--ink-2); max-width:62ch;
}
.hero-hours{
  margin-top:16px; font-size:14px; font-weight:600; color:var(--ink-3);
}
.svc-dark .hero-hours{ color:rgba(255,255,255,.6); }

.worry{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.worry li{
  position:relative; padding:28px 24px 26px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.worry li:hover{
  transform:translateY(-4px); border-color:var(--accent);
  box-shadow:0 16px 36px rgba(16,28,45,.09);
}
.wr-no{
  display:block; font-family:var(--font-en); font-size:13px; font-weight:800;
  letter-spacing:.12em; color:var(--accent); margin-bottom:12px;
}
.worry h3{
  font-size:17px; font-weight:800; color:var(--ink); line-height:1.5; margin-bottom:8px;
}
.worry h3::before{ content:"\201C"; margin-right:2px; color:var(--accent); }
.worry h3::after{ content:"\201D"; margin-left:2px; color:var(--accent); }
.worry p{ font-size:15px; line-height:1.8; color:var(--ink-2); }
@media (max-width: 900px){ .worry{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .worry{ grid-template-columns:1fr; } }

.why-list li p{ max-width:68ch; }

/* =====================================================================
   견적 문의 페이지
   ===================================================================== */
.req-hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  padding-block:clamp(54px, 7vw, 100px) clamp(48px, 6vw, 86px);
}
.req-hero::before{
  content:""; position:absolute; inset:-40% -20% auto -20%; height:180%;
  background:
    radial-gradient(44% 48% at 12% 14%, rgba(224,101,93,.26), rgba(224,101,93,0) 70%),
    radial-gradient(40% 44% at 90% 0%, rgba(90,130,190,.18), rgba(90,130,190,0) 72%);
  pointer-events:none;
}
.req-hero > .wrap{ position:relative; z-index:1; }
.req-hero .crumb{ color:rgba(255,255,255,.55); }
.req-hero .crumb a:hover{ color:#fff; }
.req-hero .big-en{ color:var(--accent); margin-bottom:20px; }
.req-hero .big-en .outline{ -webkit-text-stroke-color:rgba(255,255,255,.3); }
.req-title{
  font-size:clamp(26px, 3.4vw, 44px); font-weight:800; line-height:1.38;
  letter-spacing:-.02em; color:#fff;
}
.req-title span{ display:block; }
.req-en{
  margin-top:18px; font-family:var(--font-en); font-size:clamp(11px, 1.1vw, 13px);
  font-weight:600; letter-spacing:.1em; line-height:1.7; color:rgba(255,255,255,.4);
}
.req-lead{
  margin-top:24px; max-width:60ch;
  font-size:clamp(15px, 1.4vw, 17px); line-height:1.95; color:rgba(255,255,255,.76);
}

/* ---------- 본문 두 칸 ---------- */
.req-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:start;
}
@media (max-width: 1000px){
  .req-grid{ grid-template-columns:1fr; gap:40px; }
}

/* ---------- 입력 양식 ---------- */
.req-step{
  display:flex; align-items:center; gap:12px;
  margin:44px 0 20px; font-size:17px; font-weight:800; color:var(--ink);
}
.req-step:first-child{ margin-top:0; }
.req-step span{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-family:var(--font-en); font-size:12px; font-weight:800;
}
.req-step::after{
  content:""; flex:1; height:1px; background:var(--line);
}

.rf-row{ display:grid; gap:18px; margin-bottom:18px; }
.rf-row.two{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width: 640px){ .rf-row.two{ grid-template-columns:1fr; } }

.rf{ display:grid; gap:8px; margin-bottom:18px; border:0; padding:0; }
.rf-label{
  font-size:14px; font-weight:700; color:var(--ink);
}
.rf-label b{ color:var(--accent); margin-left:2px; }
.rf-label em{
  font-style:normal; font-weight:500; font-size:13px; color:var(--ink-3); margin-left:8px;
}
.req-form input[type="text"],
.req-form input[type="tel"],
.req-form input[type="email"],
.req-form input[type="url"],
.req-form select,
.req-form textarea{
  width:100%; padding:14px 16px;
  border:1px solid var(--line); border-radius:11px; background:#fff;
  font-family:inherit; font-size:15px; color:var(--ink); line-height:1.6;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.req-form textarea{ resize:vertical; min-height:170px; }
.req-form input:focus,
.req-form select:focus,
.req-form textarea:focus{
  outline:0; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.req-form input::placeholder,
.req-form textarea::placeholder{ color:#a9b6c6; }
.req-form .is-bad{ border-color:var(--accent-ink) !important; background:#fff7f6; }

.rf-count{
  justify-self:end; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums;
}

/* 고르기 */
.chk-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chk{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; }
.chk input{ position:absolute; opacity:0; width:0; height:0; }
.chk-row .chk span{
  display:inline-block; padding:10px 18px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:14px; font-weight:600; color:var(--ink-2);
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.chk-row .chk:hover span{ border-color:var(--accent); color:var(--accent-ink); }
.chk-row .chk input:checked + span{
  background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-1px);
}
.chk-row .chk input:focus-visible + span{ box-shadow:0 0 0 3px var(--accent-soft); }

/* 파일 */
.rf-file{ margin-top:8px; }
.rf-file input[type="file"]{ position:absolute; opacity:0; width:0; height:0; }
.file-drop{
  display:grid; place-items:center; padding:30px 20px;
  border:1px dashed var(--line); border-radius:14px; background:var(--paper-2);
  font-size:14px; font-weight:600; color:var(--ink-3); cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.rf-file:hover .file-drop{ border-color:var(--accent); color:var(--accent-ink); }
.rf-file.is-over .file-drop{
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);
}
.file-list{ display:grid; gap:8px; margin:12px 0 22px; }
.file-list li{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border:1px solid var(--line); border-radius:10px; background:#fff;
  font-size:14px;
}
.fl-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.fl-size{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
.fl-del{
  border:0; background:none; cursor:pointer; padding:2px 4px;
  font-size:13px; font-weight:700; color:var(--accent-ink); text-decoration:underline;
  text-underline-offset:3px;
}

/* 동의 */
.chk-agree{
  margin-top:10px; padding:16px 18px;
  border:1px solid var(--line); border-radius:12px; background:var(--paper-2);
  font-size:15px; font-weight:600; color:var(--ink);
}
.chk-agree input{ position:static; opacity:1; width:18px; height:18px; accent-color:var(--accent); }
.chk-agree b{ color:var(--accent-ink); }
.chk-agree.is-bad{ border-color:var(--accent-ink); background:#fff7f6; }
.agree-note{ margin-top:10px; font-size:13px; color:var(--ink-3); }
.agree-note a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }

.btn-lg, a.btn-lg{ padding:18px 36px; font-size:16px; }
.req-submit{ width:100%; margin-top:26px; }
.req-done{
  margin-top:18px; padding:16px 18px; border-radius:12px;
  font-size:15px; line-height:1.8; font-weight:600;
}
.req-done.is-ok{ background:var(--accent-soft); color:var(--accent-ink); }
.req-done.is-bad{ background:#fff2f1; color:var(--accent-dk); }

/* ---------- 오른쪽 안내 ---------- */
.req-side{ display:grid; gap:20px; position:sticky; top:96px; }
@media (max-width: 1000px){ .req-side{ position:static; } }

.rs-card{
  padding:30px 26px; border-radius:18px; background:var(--ink); color:#fff;
}
.rs-en{
  font-family:var(--font-en); font-size:12px; font-weight:800; letter-spacing:.16em;
  color:var(--accent); margin-bottom:10px;
}
.rs-card h2{ font-size:19px; font-weight:800; color:#fff; }
.rs-tel{ margin-top:14px; }
.rs-tel a{
  font-family:var(--font-en); font-size:clamp(26px, 2.4vw, 31px); font-weight:900;
  color:#fff; letter-spacing:-.01em;
}
.rs-tel a:hover{ color:var(--accent); }
.rs-sub{ margin-top:8px; font-size:13px; color:rgba(255,255,255,.55); }
.rs-hours{ margin-top:4px; font-size:13px; color:rgba(255,255,255,.55); }
.rs-card .btn-block{ margin-top:20px; }   /* .btn 의 display 는 건드리지 않는다 */
.rs-card .btn-line{ border-color:rgba(255,255,255,.4); color:#fff; font-size:14px; }
.rs-card .btn-line:hover{ background:rgba(255,255,255,.1); border-color:#fff; }

.rs-list{ display:grid; gap:2px; }
.rs-list li{
  padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.rs-list h3{ font-size:15px; font-weight:800; color:var(--ink); margin-bottom:6px; }
.rs-list h3::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-right:8px; vertical-align:middle;
}
.rs-list p{ font-size:14px; line-height:1.8; color:var(--ink-2); }

.rs-help{
  padding:20px; border-radius:14px; background:var(--paper-2); border:1px solid var(--line);
}
.rs-help h3{ font-size:15px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.rs-help p{ font-size:14px; line-height:1.9; color:var(--ink-2); }
.rs-help a{ color:var(--accent-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ---------- 그누보드 기본 페이지(게시판·로그인 등) 바깥 틀 ---------- */
.bbs-main{
  padding-block:clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px);
  background:var(--paper);
}
.bbs-main .crumb{ margin-bottom:14px; }
.bbs-title{
  font-size:clamp(26px, 3vw, 38px); font-weight:800; letter-spacing:-.02em;
  color:var(--ink); margin-bottom:28px;
  padding-bottom:18px; border-bottom:2px solid var(--ink);
}
.bbs-body{ min-height:240px; }

/* 그누보드 스킨 안의 버튼은 그누보드 모양 그대로 둔다 */
.bbs-body .btn_b01, .bbs-body .btn_b02, .bbs-body .btn_b03,
.bbs-body .btn_submit, .bbs-body .btn_cancel, .bbs-body .btn_admin{
  height:auto; line-height:1.4;
}
.bbs-body a{ color:inherit; }
.bbs-body a:hover{ color:var(--accent-ink); }

/* 갤러리 목록은 좁은 화면에서 칸 수를 줄인다 (그누보드 스킨은 3단 고정) */
@media (max-width: 900px){
  #bo_gall .gall_li.col-gn-3{ width:50%; }
}
@media (max-width: 560px){
  #bo_gall .gall_li.col-gn-3{ width:100%; }
}

/* ---------- 갤러리 썸네일을 포트폴리오 페이지와 같은 모양으로 ---------- */
/* 카드 전체를 감싸던 각진 네모 선은 없앤다 */
#bo_gall .gall_box{ border:0; }
#bo_gall .gall_img{
  overflow:hidden; border-radius:14px;
  border:1px solid var(--line); background:var(--paper-2);
}
/* 제목·분류는 사진 아래에 여백을 두고 */
#bo_gall .gall_text_href{ margin-top:12px; }
#bo_gall .gall_img a{ display:block; overflow:hidden; border-radius:inherit; }
#bo_gall .gall_img img{
  display:block; width:100%; height:auto;
  border-radius:inherit;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
#bo_gall .gall_img a:hover img{ transform:scale(1.06); }

/* 꼬리말 OASYS 의 O 에 숨겨 둔 관리자 바로가기 — 겉보기는 그대로 */
.foot-adm{ color:inherit; cursor:pointer; }
.foot-adm:hover{ color:var(--accent); }

/* ---------- 견적 문의: '무엇을 적을지 모르겠다면' 상자 ---------- */
.rs-help-lead{ font-size:14px; line-height:1.8; color:var(--ink-2); margin-bottom:12px; }
.rs-help-list{ display:grid; gap:0; border-top:1px solid var(--line); }
.rs-help-list li{ border-bottom:1px solid var(--line); }
.rs-help-list a{
  display:grid; gap:2px; padding:11px 2px;
  color:var(--ink); text-decoration:none;
  transition:padding-left .2s ease, color .2s ease;
}
.rs-help-list a:hover{ padding-left:6px; color:var(--accent-ink); }
.rs-help-list b{ font-size:15px; font-weight:700; }
.rs-help-list b::after{
  content:"›"; margin-left:6px; color:var(--accent); font-weight:800;
}
.rs-help-list span{ font-size:13px; color:var(--ink-3); }

/* ---------- 새 로고 ---------- */
.brand{ display:inline-flex; align-items:center; }
.brand-logo{
  display:block; width:auto; height:48px;
  transition:opacity .2s ease;
}
.brand:hover .brand-logo{ opacity:.82; }
@media (max-width: 680px){ .brand-logo{ height:36px; } }

/* 꼬리말 로고에는 옛 글자 로고의 마침표가 붙지 않게 */
.foot-logo::after{ content:none; }

/* 꼬리말 (어두운 바탕) */
.foot-logo{ margin:0; line-height:0; }
.foot-logo .foot-adm{ display:inline-block; }
.foot-logo img{
  display:block; width:auto; height:38px;
  opacity:.95; transition:opacity .2s ease;
}
.foot-logo .foot-adm:hover img{ opacity:1; }
@media (max-width: 680px){ .foot-logo img{ height:32px; } }

/* ---------- 히어로 큰 글씨가 칸을 넘어 잘리던 것 ----------
   글자 크기를 화면 폭(vw)에 맞춰 두었더니 글이 놓이는 칸(약 545px)보다
   커져서 'LOCAL PA / RTNER' 처럼 단어 가운데가 끊겼다.
   칸 폭을 기준으로 크기를 정하고, 한 줄로 두어 끊기지 않게 한다. */
.hero-copy{ container-type:inline-size; }
.hero-title{
  font-size:clamp(30px, 6.1vw, 61px);
  white-space:nowrap;
}
@supports (container-type: inline-size){
  .hero-title{ font-size:clamp(30px, 11.2cqw, 72px); }
}
.hero-title .line{ overflow:visible; }
@media (prefers-reduced-motion: no-preference){
  /* 글자가 아래에서 올라오는 연출은 그대로 두되 잘림만 칸 안에서 */
  .hero-title .line{ overflow:hidden; }
}

/* ---------- 꼬리말 상호 줄 세로 맞춤 ---------- */
.foot-brand{ align-items:center; gap:16px; }
.foot-tag{ color:rgba(255,255,255,.62); }