:root{
  /* color — 15번 디자인가이드 17절 토큰 블록 */
  --navy:#0C2141;    /* 제목·본문·어두운 섹션 */
  --brand:#0040C8;   /* 주 CTA·로고·링크 */
  --bright:#246BFE;  /* 호버·어두운 배경 위 링크 */
  --pale:#EAF1FF;    /* 강조 블록·배지 */
  --surface:#F7F8FA; /* 교차 섹션 배경 */
  --muted:#5A6478;   /* 보조 설명 */
  --line:#D5DCE8;    /* 구분선·입력창 테두리 */
  --error:#C8102E;   /* 폼 오류 전용 */
  --ground:#FFFFFF;
  /* type */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --fs-hero:clamp(40px,6.4vw,104px);   /* 페이지당 1회 */
  --fs-display:clamp(38px,5.4vw,72px);
  --fs-section:clamp(28px,3.4vw,40px);
  --fs-section-lg:clamp(32px,5.12vw,83px);  /* 히어로의 80% — 섹션 대제목 */
  --fs-body:20px;
  --fs-small:16px;
  --lh-body:1.75;
  --fs-label:13px;                     /* 가장 작은 글씨 */
  /* space */
  --sp-section:clamp(96px,11vw,160px);
  --sp-edge:clamp(20px,5vw,72px);
  --w-max:1180px;                      /* 카드·표·사례 */
  --w-read:620px;                      /* 글·문의 폼 */
  --h-btn:72px;
  --h-field:60px;
  --r-btn:10px;   /* 참고 템플릿의 둥근 버튼 */
  --r-card:20px;  /* 참고 템플릿의 둥근 카드 */
  /* 이전 이름 — 남아 있는 규칙이 계속 동작하도록 */
  --panel:var(--surface); --ink:var(--navy); --ink-2:var(--muted); --rule:var(--line);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--navy);font-family:var(--sans);
  font-size:var(--fs-body);line-height:var(--lh-body);word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--bright);outline-offset:3px}

/* ── 헤더 : 커버 동안 숨어 있다가 마지막에 내려온다 ── */
.hd{position:fixed;inset:0 0 auto 0;height:80px;z-index:60;display:flex;align-items:center;
  gap:28px;padding:0 clamp(20px,5vw,72px);background:var(--ground);box-shadow:0 1px 0 var(--rule);
  opacity:0;transform:translateY(-14px);pointer-events:none;will-change:opacity,transform}
.hd.on{pointer-events:auto}
.hd .lg{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;
  letter-spacing:-.04em;color:var(--ink)}
.hd .lg svg{width:28px;height:auto;display:block;color:var(--brand)}
.hd nav{display:flex;gap:26px;margin-left:auto;font-size:var(--fs-body);font-weight:500}
.hd nav a{color:var(--ink-2)}
.hd nav a:hover{color:var(--ink)}
.hd .cta{height:52px;padding:0 24px;display:grid;place-items:center;border-radius:3px;
  font-size:17px;font-weight:600;background:var(--brand);color:#fff;white-space:nowrap}
/* ── 햄버거 — 좁은 화면에서만 나온다 ── */
.burger{display:none;margin-left:auto;width:44px;height:44px;padding:0;border:0;
  background:transparent;color:var(--navy);cursor:pointer;
  align-items:center;justify-content:center;border-radius:var(--r-btn)}
.burger__ico{position:relative;display:block;width:24px;height:24px}
.burger__ico i{position:absolute;left:1px;right:1px;height:1.5px;background:currentColor;
  transition:transform .18s ease,opacity .18s ease,top .18s ease}
.burger__ico i:nth-child(1){top:6px}
.burger__ico i:nth-child(2){top:11.25px}
.burger__ico i:nth-child(3){top:16.5px}
.burger[aria-expanded="true"] .burger__ico i:nth-child(1){top:11.25px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__ico i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__ico i:nth-child(3){top:11.25px;transform:rotate(-45deg)}

/* ── 모바일 메뉴 패널 ── */
.mnav{position:fixed;inset:64px 0 auto 0;z-index:59;background:var(--ground);
  box-shadow:0 1px 0 var(--line);padding:8px var(--sp-edge) 28px;
  display:flex;flex-direction:column}
.mnav[hidden]{display:none}
.mnav nav{display:flex;flex-direction:column}
.mnav nav a{padding:18px 0;font-size:22px;font-weight:500;color:var(--navy);
  border-bottom:1px solid var(--line)}
.mnav__cta{margin-top:24px;height:var(--h-btn);display:grid;place-items:center;
  border-radius:var(--r-btn);font-size:18px;font-weight:600;background:var(--brand);color:#fff}
body.menu-open{overflow:hidden}

@media (max-width:760px){
  .hd{height:64px}
  .hd nav{display:none}
  .hd .cta{display:none}   /* CTA 자리는 햄버거가 쓰고, CTA 는 패널 안으로 옮긴다 */
  .hd .lg svg{width:24px}
  .burger{display:flex}
}
@media (min-width:761px){ .mnav{display:none} }

/* 커버가 끝난 뒤부터는 스크롤 방향에 따라 헤더가 오르내린다 */
.hd.auto{transition:opacity .26s ease,transform .26s ease}
.hd.auto.up{opacity:1;transform:translateY(0)}
.hd.auto.down{opacity:0;transform:translateY(-100%)}

/* ── 맨 위로 버튼 ── */
.top{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:70;
  width:56px;height:56px;display:grid;place-items:center;border:0;border-radius:50%;
  background:var(--brand);color:#fff;cursor:pointer;padding:0;
  box-shadow:0 6px 20px rgba(12,33,65,.24);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .26s ease,transform .26s ease,background .16s ease}
.top.on{opacity:1;transform:translateY(0);pointer-events:auto}
.top:hover{background:var(--bright)}
.top svg{width:22px;height:22px;display:block}
@media (max-width:760px){ .top{width:48px;height:48px} }

/* ── 커버 ── */
.cover{position:relative;height:400vh;background:var(--brand)}
/* 섹션 1이 무대 뒤에 붙어 있다가, 무대가 흐려지면 글자까지 그대로 드러난다.
   마지막 100vh는 섹션 1을 머물러 보는 구간이다. */
.stage{position:sticky;top:0;height:100dvh;overflow:hidden;background:var(--brand);
  margin-top:-100dvh;will-change:opacity;z-index:2}
.mark{position:absolute;inset:0;color:#fff}
.mark svg{width:100%;height:100%;display:block}
/* 로고는 삼각형 조각으로 나뉘어 있고, 조각마다 따로 움직인다.
   같은 색 실선으로 조각 사이 머리카락 틈을 메워, 가만히 있을 땐 하나의 마크로 보인다 */
.mark polygon{fill:currentColor;stroke:currentColor;stroke-width:.45;stroke-linejoin:round}

.lines{position:absolute;inset:0;color:var(--navy);pointer-events:none}
.sl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22em;text-align:center;opacity:0;will-change:opacity}
/* 좁은 화면에서는 한 줄을 짧게 끊어 세로로 긴 직사각형 덩어리가 되게 한다 */
@media (max-width:760px){ .sl{width:7em} }
.sl i{font-style:normal;font-weight:300;line-height:1.24;letter-spacing:-.04em}
.sl i.b{font-weight:700}

/* 진행 표시 — 아주 얇은 선 하나 */
.prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:rgba(255,255,255,.55);
  will-change:width,opacity}

/* ── 히어로 ── */
/* 섹션 1 — 화면을 가득 채우는 풀블리드 배경 */
.hero{position:sticky;top:0;z-index:1;
  height:100dvh;display:grid;align-content:center;
  padding:clamp(96px,12vh,150px) clamp(20px,5vw,72px);overflow:hidden;color:#fff}

/* 배경 층 — 사진을 바꾸려면 .hero__bg img 의 src 만 갈아끼우면 됩니다 */
.hero__bg{position:absolute;inset:0;background:var(--brand)}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center}
/* 사진이 깔리면 추상 비주얼은 물러난다 */
.hero__bg.has-photo{background:var(--brand)}
.hero__bg.has-photo .hero__art{display:none}
/* 사진이 없는 동안 쓰는 추상 비주얼 */
.hero__art{position:absolute;inset:0;overflow:hidden}
.hero__art svg{position:absolute;right:-8%;top:50%;transform:translateY(-50%);
  height:132%;width:auto;color:#fff;opacity:.07}
.hero__grid{position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:clamp(80px,9vw,140px) 100%}
.hero__glow{position:absolute;right:8%;top:42%;width:52vmax;height:52vmax;
  transform:translate(0,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(36,107,254,.55),transparent 62%)}
/* 글자가 읽히도록 왼쪽을 덮는 막 */
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,64,200,.94) 0%,rgba(0,64,200,.78) 42%,rgba(0,64,200,.30) 100%)}
/* 사진 자체가 네이비라 막을 옅게 둬도 글자가 읽힌다 — 대신 그림이 살아난다 */
.hero__bg.has-photo .hero__scrim{
  background:linear-gradient(90deg,rgba(0,64,200,.78) 0%,rgba(0,64,200,.46) 46%,rgba(0,64,200,.08) 100%)}
/* 세로 화면에서는 글자가 사진 위로 올라오므로 아래에서 위로 덮는다 */
@media (max-width:760px){
  .hero__bg.has-photo .hero__scrim{
    background:linear-gradient(180deg,rgba(0,64,200,.55) 0%,rgba(0,64,200,.84) 46%,rgba(0,64,200,.92) 100%)}
}

.hero .in{position:relative;max-width:max(1180px,var(--w-max));margin:0 auto;width:100%}
.hero .eyebrow{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.hero h1{margin-top:24px;font-size:var(--fs-hero);font-weight:300;
  line-height:1.1;letter-spacing:-.055em;max-width:13em;text-wrap:balance}
.hero h1 b{font-weight:700}
.hero p{margin-top:24px;max-width:var(--w-read);font-size:var(--fs-body);color:rgba(255,255,255,.78)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.btn{display:inline-flex;align-items:center;height:var(--h-btn);padding:0 40px;border-radius:var(--r-btn);
  font-size:18px;font-weight:600;transition:background .16s ease,color .16s ease}
.btn.p{background:#fff;color:var(--brand)}
.btn.p:hover{background:var(--pale)}
.btn.s{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);color:#fff}
.btn.s:hover{background:rgba(255,255,255,.12)}
.hero .hint{margin-top:24px;font-size:var(--fs-small);color:rgba(255,255,255,.62)}

/* ── 본문 섹션 공통 ── */
.sec{position:relative;z-index:2;background:var(--ground);
  padding:var(--sp-section) var(--sp-edge);scroll-margin-top:96px}
.sec.alt{background:var(--surface)}
.sec .in{max-width:var(--w-max);margin:0 auto}
.sec .eyebrow{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* 제목과 설명 문단은 읽기 폭(620px) 안에 둔다 — 가이드 05 */
.sec h3{margin-top:24px;font-size:var(--fs-section-lg);font-weight:300;
  letter-spacing:-.055em;line-height:1.1;max-width:13em;text-wrap:balance}
.sec h3 b{font-weight:700}
.sec .lead{margin-top:24px;max-width:var(--w-read);color:var(--muted);font-size:var(--fs-body)}

/* 02 문제 — 네 줄 */
.pain{margin-top:clamp(40px,5vw,64px);display:grid;gap:0 clamp(24px,4vw,64px);
  grid-template-columns:1fr}
@media (min-width:761px){ .pain{grid-template-columns:1fr 1fr} }
.pain li{list-style:none;padding:26px 0;border-top:1px solid var(--line);
  font-size:var(--fs-body);line-height:1.6}
@media (min-width:761px){ .pain li{padding-right:44px} }

/* 03 서비스 — 카드 네 장 */
.cards{margin-top:clamp(40px,5vw,64px);display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:761px){ .cards{gap:16px;grid-template-columns:1fr 1fr} }
.card{background:var(--ground);border:1px solid var(--line);border-radius:var(--r-card);
  padding:22px;transition:border-color .18s ease}
@media (min-width:761px){ .card{padding:32px} }
.card:hover{border-color:var(--navy)}   /* 확대·그림자 없이 테두리만 — 가이드 12 */
.card .kicker{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.card h4{margin:12px 0 0;font-size:22px;font-weight:700;letter-spacing:-.015em}
.card>p{margin-top:14px;color:var(--muted);font-size:var(--fs-body)}
.card details{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.card summary{cursor:pointer;list-style:none;font-size:var(--fs-small);font-weight:600;
  color:var(--brand);display:flex;align-items:center;gap:8px}
.card summary::-webkit-details-marker{display:none}
.card summary::after{content:"+";font-family:var(--mono);font-weight:400;margin-left:auto}
.card details[open] summary::after{content:"−"}
.card dl{margin:18px 0 0;font-size:var(--fs-small);line-height:1.65}
.card dt{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:14px}
.card dt:first-child{margin-top:0}
.card dd{margin:6px 0 0}
.card .fit{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:var(--fs-small);color:var(--muted)}
.card .fit b{color:var(--navy);font-weight:600}

/* 04 진행 방식 — 다섯 단계 */
.steps{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.steps li{list-style:none;display:grid;gap:8px 32px;padding:26px 0;
  border-bottom:1px solid var(--line);grid-template-columns:64px 1fr}
@media (min-width:861px){ .steps li{grid-template-columns:64px 200px 1fr;align-items:baseline} }
.steps .no{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;color:var(--brand)}
.steps h4{margin:0;font-size:22px;font-weight:700;letter-spacing:-.015em}
.steps p{color:var(--muted);font-size:var(--fs-body)}
.steps + .note{margin-top:26px;max-width:var(--w-read);color:var(--muted);font-size:var(--fs-small)}

/* 05 프로젝트 — 사례 세 건 */
.works{margin-top:clamp(40px,5vw,64px);display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
@media (min-width:761px){ .works{gap:16px} }
.work{background:var(--ground);border:1px solid var(--line);border-radius:var(--r-card);
  padding:22px;display:flex;flex-direction:column;transition:border-color .18s ease}
@media (min-width:761px){ .work{padding:32px} }
.work:hover{border-color:var(--navy)}
/* 배지는 팔레트 안의 색만 쓴다 — 라임·핑크 등 A안 밖 색 금지 */
.badge{align-self:flex-start;font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.1em;padding:6px 10px;border-radius:var(--r-btn);
  background:var(--pale);color:var(--brand)}
.badge.own{background:var(--surface);color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
.badge.mock{background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.work .name{margin-top:20px;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted)}
.work h4{margin:10px 0 0;font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.35}
.work p{margin-top:16px;color:var(--muted);font-size:var(--fs-body)}
.work .meta{margin-top:auto;padding-top:24px;font-family:var(--mono);font-size:var(--fs-label);
  color:var(--muted);letter-spacing:.04em}

/* 06 대표 */
.founder{background:var(--brand);color:#fff}
.founder .eyebrow{color:rgba(255,255,255,.6)}
.founder h3{color:#fff}
.founder p{margin-top:24px;max-width:var(--w-read);color:rgba(255,255,255,.8);font-size:var(--fs-body)}
.founder .fine{margin-top:28px;font-size:var(--fs-small);color:rgba(255,255,255,.55)}


/* 07 문의 */
.form{margin-top:clamp(40px,5vw,64px);max-width:var(--w-read);display:grid;gap:32px}
.f label,.f legend{display:block;font-size:var(--fs-body);font-weight:600;padding:0}
.f .req{color:var(--brand)}
.f .help{margin-top:8px;font-size:var(--fs-small);color:var(--muted)}
.f textarea{margin-top:14px;width:100%;font:inherit;font-size:var(--fs-small);color:var(--navy);
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-btn);background:#fff;
  min-height:120px;resize:vertical}
/* 연락처는 테두리 없는 밑줄로 가볍게 — 가이드 10 */
.grid2 input{width:100%;font:inherit;font-size:var(--fs-small);color:var(--navy);
  height:var(--h-field);padding:0 2px;border:0;border-bottom:1px solid var(--line);
  border-radius:0;background:transparent}
.f textarea:focus,.grid2 input:focus{outline:3px solid var(--pale);outline-offset:0;
  border-color:var(--brand)}
/* 칩 — 여러 개 선택 */
.opts{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.opts label{display:inline-flex;align-items:center;gap:9px;font-weight:400;font-size:var(--fs-small);
  padding:11px 16px;border:1px solid var(--line);border-radius:var(--r-btn);background:#fff;
  cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease}
.opts label:hover{border-color:var(--navy)}
.opts label:has(:checked){border-color:var(--brand);color:var(--brand);background:var(--pale)}
.opts label:focus-within{outline:3px solid var(--pale)}
.opts input{accent-color:var(--brand)}
.grid2{display:grid;gap:22px 24px;grid-template-columns:1fr;margin-top:14px}
@media (min-width:641px){ .grid2{grid-template-columns:1fr 1fr} }
.agree{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-small)}
.agree input{margin-top:6px;accent-color:var(--brand)}
.agree a{color:var(--brand);border-bottom:1px solid currentColor}
.submit{display:inline-flex;align-items:center;height:var(--h-btn);padding:0 40px;border:0;
  border-radius:var(--r-btn);font:inherit;font-size:18px;font-weight:600;
  background:var(--brand);color:#fff;cursor:pointer;transition:background .16s ease}
.submit:hover{background:var(--bright)}
.submit[disabled]{background:var(--line);color:var(--muted);cursor:not-allowed}
.reply{margin-top:16px;font-size:var(--fs-small);color:var(--muted)}
.alt-contact{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);
  max-width:var(--w-read);font-size:var(--fs-small);color:var(--muted)}
.alt-contact a{color:var(--navy);border-bottom:1px solid var(--line)}

/* 푸터 */
.ft{position:relative;z-index:2;background:var(--brand);color:rgba(255,255,255,.72);
  padding:clamp(56px,7vw,84px) var(--sp-edge);font-size:var(--fs-small);line-height:1.9}
.ft .in{max-width:var(--w-max);margin:0 auto}
.ft .lg{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;
  letter-spacing:-.04em;color:#fff}
.ft .lg svg{width:24px;height:auto;display:block;color:#fff}
.ft .links{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 20px}
.ft a{color:rgba(255,255,255,.86);border-bottom:1px solid rgba(255,255,255,.28)}
.ft .biz{margin-top:26px}
.ft .copy{margin-top:26px;font-size:var(--fs-label);color:rgba(255,255,255,.45)}
.ft a{border-bottom-color:rgba(255,255,255,.28)}


/* 섹션 등장 — 페이드 + 8px 위로, 1회만 */
.rv{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.rv.in-view{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .cover{height:100dvh}
  .stage{display:none}
  .hd{opacity:1!important;transform:none!important;pointer-events:auto!important}
  .hd.auto,.top{transition:none}
  .prog{display:none}
  html{scroll-behavior:auto}
}

/* ── 서브 페이지 ─────────────────────────────────────────── */
/* 커버가 없으므로 헤더를 처음부터 보인 채로 둔다 */
.hd--static{opacity:1;transform:none;pointer-events:auto}

.page{position:relative;z-index:2;background:var(--brand);color:#fff;
  padding:calc(80px + var(--sp-section)) var(--sp-edge) var(--sp-section)}
.page .in{max-width:var(--w-max);margin:0 auto}
.page .eyebrow{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.page h1{margin-top:24px;font-size:var(--fs-hero);font-weight:300;letter-spacing:-.055em;
  line-height:1.1;max-width:13em;text-wrap:balance}
.page h1 b{font-weight:700}
.page .lead{margin-top:24px;max-width:var(--w-read);font-size:var(--fs-body);
  color:rgba(255,255,255,.78)}
@media (max-width:760px){ .page{padding-top:calc(64px + var(--sp-section))} }

/* 섹션 아래에서 해당 페이지로 넘어가는 링크 */
.more{display:inline-flex;align-items:center;gap:8px;margin-top:32px;
  font-size:var(--fs-body);font-weight:600;color:var(--brand);
  border-bottom:1px solid currentColor;padding-bottom:2px}
.more:hover{color:var(--bright)}

/* 페이지 끝의 문의 유도 */
.cta-band{position:relative;z-index:2;background:var(--pale);
  padding:clamp(64px,8vw,110px) var(--sp-edge)}
.cta-band .in{max-width:var(--w-max);margin:0 auto}
.cta-band h2{font-size:var(--fs-section);font-weight:300;letter-spacing:-.035em;
  line-height:1.3;max-width:var(--w-read)}
.cta-band h2 b{font-weight:700}
.cta-band p{margin-top:20px;max-width:var(--w-read);color:var(--muted)}
.cta-band .btn{margin-top:32px;background:var(--brand);color:#fff}
.cta-band .btn:hover{background:var(--bright)}

/* ── 개인정보처리방침 ── */
.doc{position:relative;z-index:2;background:var(--ground);
  padding:var(--sp-section) var(--sp-edge)}
.doc .in{max-width:var(--w-read);margin:0 auto}
.doc .meta{display:grid;gap:10px 24px;grid-template-columns:auto 1fr;
  padding-bottom:28px;border-bottom:1px solid var(--line);font-size:var(--fs-small)}
.doc .meta dt{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.doc .meta dd{margin:0}
.doc .intro{margin-top:28px;color:var(--muted)}
.doc h2{margin-top:56px;font-size:24px;font-weight:700;letter-spacing:-.015em;
  display:flex;gap:14px;align-items:baseline}
.doc h2 span{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;color:var(--brand)}
.doc h2 + *{margin-top:18px}
.doc p{margin-top:18px}
.doc ul{margin:18px 0 0;padding:0}
.doc li{list-style:none;padding-left:18px;position:relative;margin-top:10px}
.doc li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1.5px;
  background:var(--brand)}
.doc table{width:100%;margin-top:18px;border-collapse:collapse;font-size:var(--fs-small)}
.doc th,.doc td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);
  vertical-align:top}
.doc th{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:var(--surface);white-space:nowrap}
.doc .note{margin-top:18px;font-size:var(--fs-small);color:var(--muted)}
.doc .foot{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);
  font-size:var(--fs-small);color:var(--muted)}
.doc a{color:var(--brand);border-bottom:1px solid currentColor}
/* 아직 정해지지 않은 값 — 게시 전에 반드시 채워야 합니다 */
.todo{background:#FFF3C4;color:#6B4E00;padding:1px 7px;border-radius:2px;
  font-weight:600;white-space:nowrap}

/* 서브 페이지 본문 문단 */
.prose{max-width:var(--w-read)}
.prose p{margin-top:24px;font-size:var(--fs-body)}
.prose p:first-child{margin-top:0}
.prose .fine{margin-top:32px;font-size:var(--fs-small);color:var(--muted)}
/* 어두운 섹션 위의 "자세히 보기" */
.more--light{color:#fff}
.more--light:hover{color:var(--pale)}

/* ── 메인 원페이지 — 섹션이 화면을 가득 채우게 ────────────── */
/* 서비스 섹션은 카드 4장이라 화면보다 길어질 수 있어 제외합니다. */
/* 내용이 짧은 섹션만 채웁니다 — .sec--full 이 붙은 섹션.
   서비스·진행 방식·포트폴리오·문의는 내용이 화면보다 길어 제외합니다. */
html.onepage{scroll-snap-type:y proximity}
html.onepage .sec--full{
  min-height:100dvh;display:grid;align-content:center;
  scroll-snap-align:start;scroll-margin-top:0}
html.onepage .sec--full > .in{width:100%}
@media (prefers-reduced-motion:reduce){
  html.onepage{scroll-snap-type:none}
}

/* ── 섹션 배경 이미지 ─────────────────────────────────────
   그림은 뒤로 물리고 글자 쪽에는 섹션 바탕색 막을 덮어 대비를 지킵니다.
   카드·입력창은 불투명 흰색이라 그대로 읽힙니다. */
.sec--bg{position:relative;overflow:hidden}
.sec--bg::before,.sec--bg::after{content:"";position:absolute;inset:0;pointer-events:none}
.sec--bg::before{                      /* 원형으로 잘라낸 사진 */
  inset:auto calc(-1 * clamp(90px,10vw,170px)) auto auto;top:50%;transform:translateY(-50%);
  width:clamp(260px,34vw,520px);height:clamp(260px,34vw,520px);border-radius:50%;
  background-image:var(--bg-img);background-size:cover;
  background-position:var(--bg-pos,center);opacity:var(--bg-op,.9)}
/* 사분원 — 화면 모서리를 무는 큰 도형 */
.sec--bg::after{inset:auto auto -18% -12%;width:min(38vw,420px);height:min(38vw,420px);
  border-radius:50%;background:var(--brand);opacity:.10}
.sec--bg > .in{position:relative;z-index:1}
/* 좌 텍스트 / 우 원형 — 원이 차지하는 오른쪽 띠만큼 본문 자리를 비운다 */
@media (min-width:761px){ .sec--bg > .in{padding-right:clamp(120px,26vw,380px)} }
/* 내용이 가로를 다 쓰는 섹션 — 원은 모서리 장식으로 물린다 */
@media (min-width:761px){ .sec--bg.wide > .in{padding-right:0} }
.sec--bg.wide::before{inset:auto calc(-1 * clamp(140px,16vw,280px)) calc(-1 * clamp(80px,10vw,180px)) auto;
  top:auto;transform:none}

/* 좁은 화면 — 원은 위쪽 구석으로 물리고 옅게 깐다 */
@media (max-width:760px){
  .sec--bg::before{inset:-12% -30% auto auto;top:auto;transform:none;
    width:min(78vw,420px);height:min(78vw,420px);opacity:.30}
  .sec--bg::after{inset:auto auto -10% -24%;width:70vw;height:70vw}
}

.bg-problem {--bg-img:url(bg-problem.jpg);  --bg-op:.85; --bg-pos:70% center}
.bg-services{--bg-img:url(bg-services.jpg); --bg-op:.80; --bg-pos:center center}
.bg-process {--bg-img:url(bg-process.jpg);  --bg-op:.85; --bg-pos:72% center}
.bg-work    {--bg-img:url(bg-work.jpg);     --bg-op:.90; --bg-pos:68% center}
.bg-contact {--bg-img:url(bg-contact.jpg);  --bg-op:.85; --bg-pos:78% center}

/* ── 서브 페이지 본문 블록 ─────────────────────────────── */
.blk{margin-top:clamp(56px,7vw,88px)}
.blk:first-child{margin-top:0}
.blk h2{font-size:clamp(24px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;
  line-height:1.35;max-width:var(--w-read)}
.blk .sub{margin-top:16px;max-width:var(--w-read);color:var(--muted);font-size:var(--fs-body)}

.tbl{width:100%;margin-top:28px;border-collapse:collapse;font-size:var(--fs-small)}
.tbl th,.tbl td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.6}
.tbl th{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:var(--surface);white-space:nowrap}
.tbl td:first-child{font-weight:600;color:var(--navy);white-space:nowrap}
@media (max-width:640px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{padding:18px 0;border-bottom:1px solid var(--line)}
  .tbl td{border:0;padding:2px 0}
  .tbl td:first-child{margin-bottom:6px}
  .tbl td[data-l]::before{content:attr(data-l) " — ";font-family:var(--mono);
    font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
}

/* 정의 묶음 — 약속·원칙처럼 제목 + 한 줄 설명이 반복되는 곳 */
.defs{margin-top:28px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
@media (min-width:761px){ .defs{grid-template-columns:1fr 1fr} }
.defs > div{background:var(--ground);padding:26px}
.defs h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em}
.defs p{margin-top:10px;color:var(--muted);font-size:var(--fs-small)}

/* 단계 표시 — Discover / Build / Automate / Operate */
.phases{margin-top:28px;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:761px){ .phases{grid-template-columns:repeat(4,1fr)} }
.phase{border:1px solid var(--line);border-radius:var(--r-card);padding:24px;background:var(--ground)}
.phase .k{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand)}
.phase h3{margin:12px 0 0;font-size:20px;font-weight:700;letter-spacing:-.015em}
.phase p{margin-top:10px;color:var(--muted);font-size:var(--fs-small)}

/* 제공 상태 배지 */
.state{display:inline-flex;align-items:center;font-family:var(--mono);font-size:var(--fs-label);
  font-weight:500;letter-spacing:.08em;padding:5px 10px;border-radius:var(--r-btn);
  background:var(--pale);color:var(--brand);white-space:nowrap}
.state.check{background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}

/* 목록 */
.list{margin:24px 0 0;padding:0;max-width:var(--w-read)}
.list li{list-style:none;position:relative;padding-left:20px;margin-top:14px;font-size:var(--fs-body)}
.list li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1.5px;background:var(--brand)}

/* 게이트 — 순서가 있는 목록 */
.gates{margin:28px 0 0;padding:0;border-top:1px solid var(--line);max-width:var(--w-read)}
.gates li{list-style:none;display:grid;grid-template-columns:64px 1fr;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.gates .no{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;color:var(--brand)}
.gates p{font-size:var(--fs-small)}

.callout{margin-top:28px;max-width:var(--w-read);background:var(--pale);
  border-radius:var(--r-card);padding:26px}
.callout p{color:var(--navy);font-size:var(--fs-small)}
.callout p + p{margin-top:12px}

/* ── 문제 — 네 장의 카드 ── */
.pain{gap:12px}
@media (min-width:761px){ .pain{gap:16px} }
.pain li{border:1px solid var(--line);border-radius:var(--r-card);background:var(--ground);
  padding:26px;display:flex;gap:16px;align-items:flex-start;
  font-size:var(--fs-small);line-height:1.6;transition:border-color .18s ease}
.pain li:hover{border-color:var(--navy)}
.pain li::before{content:"";flex:none;width:36px;height:36px;border-radius:50%;
  background:var(--pale);box-shadow:inset 0 0 0 1.5px var(--brand);margin-top:2px}

/* ── 진행 방식 — 가로 타임라인 ── */
@media (min-width:1000px){
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;border:0;margin-top:64px}
  .steps li{display:block;padding:0;border:0;position:relative}
  .steps li::before{content:"";position:absolute;left:0;right:0;top:23px;height:1.5px;
    background:var(--line)}
  .steps li:first-child::before{left:50%}
  .steps li:last-child::before{right:50%}
  .steps .no{position:relative;z-index:1;display:grid;place-items:center;
    width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff;
    font-size:var(--fs-label)}
  .steps h4{margin-top:22px}
  .steps p{margin-top:10px}
}

/* ── 회사 소개 — 좌 텍스트 / 우 원형 마크 ── */
.sec--mark{position:relative;overflow:hidden}
.sec--mark::before{content:"";position:absolute;pointer-events:none;
  inset:auto calc(-1 * clamp(60px,7vw,120px)) auto auto;top:50%;transform:translateY(-50%);
  width:clamp(240px,32vw,480px);height:clamp(240px,32vw,480px);border-radius:50%;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.sec--mark .medal{position:absolute;pointer-events:none;
  right:calc(-1 * clamp(60px,7vw,120px));top:50%;transform:translateY(-50%);
  width:clamp(240px,32vw,480px);height:clamp(240px,32vw,480px);
  display:grid;place-items:center}
.sec--mark .medal svg{width:38%;height:auto;color:#fff;opacity:.9;display:block}
.sec--mark > .in{position:relative;z-index:1}
@media (min-width:761px){ .sec--mark > .in{padding-right:clamp(120px,26vw,360px)} }
@media (max-width:760px){
  .sec--mark::before,.sec--mark .medal{inset:-10% -26% auto auto;top:auto;transform:none;
    width:min(70vw,360px);height:min(70vw,360px)}
}

/* ── 서비스 카드 — 파랑 바탕 ────────────────────────────── */
.card{background:var(--brand);border-color:transparent;color:#fff}
.card:hover{border-color:transparent;background:var(--bright)}
.card .kicker{color:rgba(255,255,255,.72)}
.card h4{color:#fff}
.card > p{color:rgba(255,255,255,.84)}
.card details{border-top-color:rgba(255,255,255,.28)}
.card summary{color:#fff}
.card dt{color:rgba(255,255,255,.66)}
.card dd{color:rgba(255,255,255,.92)}
.card .fit{border-top-color:rgba(255,255,255,.28);color:rgba(255,255,255,.78)}
.card .fit b{color:#fff}
.card summary:focus-visible{outline-color:#fff}

/* ── PC 에서는 화면 가로폭의 80% 를 콘텐츠 폭으로 쓴다 ──────
   1200px 미만에서는 종전대로 남은 폭을 채웁니다. */
@media (min-width:1200px){
  :root{--w-max:80vw}
}

/* ── 배경 이미지를 섹션에 가득 채우는 변형 ────────────────── */
.sec--bg.full::before{
  inset:0;transform:none;width:auto;height:auto;border-radius:0;
  background-size:cover;background-position:var(--bg-pos,center);opacity:1}
/* 글자가 읽히도록 왼쪽을 더 눌러 덮는다 */
.sec--bg.full::after{
  inset:0;width:auto;height:auto;border-radius:0;opacity:1;
  background:linear-gradient(90deg,
    rgba(255,255,255,.86) 0%, rgba(255,255,255,.50) 44%, rgba(255,255,255,.18) 100%)}
.sec--bg.full.alt::after{
  background:linear-gradient(90deg,
    rgba(247,248,250,.93) 0%, rgba(247,248,250,.70) 46%, rgba(247,248,250,.42) 100%)}
@media (max-width:760px){
  .sec--bg.full::before{inset:0;width:auto;height:auto;opacity:1}
  .sec--bg.full::after{inset:0;width:auto;height:auto;
    background:linear-gradient(180deg,
      rgba(255,255,255,.90) 0%, rgba(255,255,255,.80) 50%, rgba(255,255,255,.90) 100%)}
  .sec--bg.full.alt::after{background:linear-gradient(180deg,
      rgba(247,248,250,.90) 0%, rgba(247,248,250,.80) 50%, rgba(247,248,250,.90) 100%)}
}

/* ── 서브 페이지 상단 — 파란 단색 대신 이미지 ────────────── */
.page{position:relative;overflow:hidden}
.page > .in{position:relative;z-index:1}
.page--img::before,.page--img::after{content:"";position:absolute;inset:0;pointer-events:none}
.page--img::before{background-image:var(--bg-img);background-size:cover;
  background-position:var(--bg-pos,center)}
/* 흰 글자가 읽히도록 브랜드 블루 막을 덮는다 */
.page--img::after{background:linear-gradient(90deg,
  rgba(0,64,200,.94) 0%, rgba(0,64,200,.80) 46%, rgba(0,64,200,.38) 100%)}
@media (max-width:760px){
  .page--img::after{background:linear-gradient(180deg,
    rgba(0,64,200,.72) 0%, rgba(0,64,200,.90) 55%, rgba(0,64,200,.95) 100%)}
}

/* ── 사례 카드 썸네일 ─────────────────────────────────────
   비율 16:10 고정 — 카드가 들쭉날쭉해지지 않게 (가이드 09절) */
.work{padding:0;overflow:hidden}
.work__thumb{position:relative;aspect-ratio:16/10;background:var(--pale);
  display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.work__thumb img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;display:block}
/* 화면을 쓸 수 없을 때 — pale 바탕에 마크를 옅게 */
.work__thumb svg{width:26%;height:auto;color:var(--brand);opacity:.16;display:block}
.work__thumb .why{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.04em;
  color:var(--muted);background:rgba(255,255,255,.82);text-align:center}
.work__body{padding:22px;display:flex;flex-direction:column;flex:1}
@media (min-width:761px){ .work__body{padding:28px} }
.work .name{margin-top:16px}

/* ── 소리 켜기·끄기 ── */
.snd{width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--navy);
  cursor:pointer;display:grid;place-items:center;border-radius:var(--r-btn);flex:none}
.snd svg{width:22px;height:22px;display:block}
.snd .off{display:none}
.snd[aria-pressed="false"] .on{display:none}
.snd[aria-pressed="false"] .off{display:block}
.snd:hover{color:var(--brand)}
/* 로고 바로 오른쪽 — nav 의 margin-left:auto 가 나머지를 오른쪽으로 민다 */
.snd{margin-left:6px}

/* 어두운 사진 위에 흰 글자를 올리는 섹션 — 왼쪽만 살짝 눌러준다.
   (블루 섹션배경 01 은 왼쪽이 비어 있어 강한 막이 필요 없습니다) */
.sec--bg.full.dark::after{background:linear-gradient(90deg,
  rgba(13,35,64,.55) 0%, rgba(13,35,64,.20) 44%, transparent 72%)}
@media (max-width:760px){
  .sec--bg.full.dark::after{background:linear-gradient(180deg,
    rgba(13,35,64,.60) 0%, rgba(13,35,64,.78) 55%, rgba(13,35,64,.86) 100%)}
}
.bg-founder{--bg-img:url(bg-founder.jpg); --bg-pos:center center}
@media (max-width:760px){ .bg-founder{--bg-pos:62% center} }

/* ── 커버 위에 얹히는 헤더 — 배경 없이 흰 글자 ────────────── */
.hd--over{background:transparent;box-shadow:none;color:#fff}
.hd--over .lg{color:#fff}
.hd--over .lg svg{color:#fff}
.hd--over nav a{color:rgba(255,255,255,.78)}
.hd--over nav a:hover{color:#fff}
.hd--over .cta{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.hd--over .cta:hover{background:rgba(255,255,255,.14)}
.hd--over .burger,.hd--over .snd{color:#fff}
.hd--over .snd:hover{color:rgba(255,255,255,.7)}

/* ── 어두운 배경 위의 섹션 — 글자와 카드 색을 뒤집는다 ────── */
.sec.on-dark h3{color:#fff}
.sec.on-dark .eyebrow{color:rgba(255,255,255,.62)}
.sec.on-dark .more{color:#fff}
.sec.on-dark .more:hover{color:var(--pale)}
/* 파란 카드가 파란 배경에 묻히지 않게 테두리광을 준다 */
.sec.on-dark .card{box-shadow:0 0 0 1px rgba(255,255,255,.24),0 18px 44px rgba(4,16,40,.38)}
.sec.on-dark .card:hover{box-shadow:0 0 0 1px rgba(255,255,255,.55),0 18px 44px rgba(4,16,40,.44)}

/* ── 히어로 오른쪽 썸네일 ─────────────────────────────────
   히어로가 화면에 머무는 동안 스크롤에 맞춰 위로 올라갑니다. */
.hero__thumbs{display:none}
@media (min-width:1024px){
  .hero__thumbs{display:grid;position:absolute;z-index:1;
    right:clamp(24px,6vw,110px);top:50%;transform:translateY(-50%);
    width:min(54vw,700px);height:100%;
    grid-template-columns:1fr 1fr;gap:24px;pointer-events:none;overflow:hidden}
  .ht-col{display:grid;gap:24px;align-content:start;will-change:transform}
  .ht-col:last-child{padding-top:80px}
  .ht{margin:0;border-radius:var(--r-card);overflow:hidden;
    box-shadow:0 18px 44px rgba(4,16,40,.34);background:var(--navy)}
  .ht img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
  .ht:nth-child(1){aspect-ratio:4/5}
  .ht:nth-child(2){aspect-ratio:1/1}
  .ht:nth-child(3){aspect-ratio:4/5}
  .ht-col:last-child .ht:nth-child(1){aspect-ratio:1/1}
  .ht-col:last-child .ht:nth-child(2){aspect-ratio:4/5}
  /* 위아래 가장자리를 부드럽게 잘라 잘린 느낌을 줄인다 */
  .hero__thumbs{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 7%,#000 24%,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,transparent 7%,#000 24%,#000 86%,transparent 100%)}
  /* 글자가 썸네일에 닿지 않게 왼쪽에 자리를 잡아준다 */
  .hero .in{padding-right:min(56vw,730px);position:relative;z-index:2}
}
@media (prefers-reduced-motion:reduce){ .ht-col{transform:none!important} }