@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap");

/* ============================================================
   자율제작연구소 · CONTENTS LAB
   브랜드 아이덴티티 브리프 10번(비주얼)을 그대로 구현한다.
   · 네이비가 주인공(60~70%), 퍼플은 보조(20~30%), 골드는 포인트(5% 이하)
   · 히어로·푸터는 딥네이비, 본문은 화이트/크림 - 샌드위치 구조
   · 크림은 카드·섹션 배경으로만. 기본 배경으로 쓰지 않는다
   · 나눔고딕 단일. Bold/Regular 두 단계로 위계를 만든다
   페이지 HTML에는 style 속성을 쓰지 않는다.
   ============================================================ */

:root {
  --navy:       #1A2B5C;
  --navy-deep:  #0F1A3D;
  --navy-soft:  #2E4180;
  --purple:     #6B5B95;
  --purple-soft:#9C8BC4;
  --gold:       #C9A961;

  --cream:      #F8F6F0;
  --white:      #FFFFFF;

  --text:       #2C2C2C;
  --text-mid:   #555555;
  --text-light: #8A8A8A;
  --divider:    #E5E2D8;
  --line-navy:  #D8DCE8;

  --on-dark:      #FFFFFF;
  --on-dark-mid:  #C3CADF;
  --on-dark-soft: #8E99BC;

  --f: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;

  /* 간격 - 전부 4의 배수. 새 값을 만들지 말고 이 중에서 고른다 */
  --s1:  4px;   /* 붙은 요소 사이 */
  --s2:  8px;   /* 목록 항목 사이 */
  --s3: 12px;   /* 제목과 본문 사이 */
  --s4: 16px;
  --s5: 24px;   /* 카드 안쪽 여백 (기본) */
  --s6: 32px;   /* 카드 안쪽 여백 (큰 것) */
  --s7: 48px;   /* 섹션 머리 아래 */
  --s8: 64px;

  --w:      1120px;
  --w-read: 62ch;
  --r:      3px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.78;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

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

.skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--on-dark); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 0; }

/* ---------- 레이아웃 ---------- */
.container { max-width: var(--w); margin: 0 auto; padding: 0 24px; }
.narrow    { max-width: 760px; margin-left: auto; margin-right: auto; }

.section { padding: clamp(64px, 9vw, 108px) 0; }
.section--tint { background: var(--cream); }
.section--deep { background: var(--navy-deep); color: var(--on-dark-mid); }
.section--tight { padding: clamp(48px, 6vw, 72px) 0; }

.section--deep .sec-eyebrow { color: var(--purple-soft); }
.section--deep h2, .section--deep h3, .section--deep h4 { color: var(--on-dark); }
.section--deep .sec-lead, .section--deep p { color: var(--on-dark-mid); }

/* ---------- 타이포 ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; color: var(--navy); }

h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.32; font-weight: 800; }
h2 { font-size: clamp(24px, 3vw, 33px); line-height: 1.38; }
h3 { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; }
h4 { font-size: 16.5px; line-height: 1.55; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.sec-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--purple); margin: 0 0 13px; }
.sec-head { margin-bottom: clamp(30px, 4vw, 48px); max-width: 780px; }
.sec-lead { font-size: 17px; line-height: 1.85; color: var(--text-mid); margin: 16px 0 0; max-width: var(--w-read); }
.note { font-size: 14.5px; line-height: 1.75; color: var(--text-light); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1;
  padding: 15px 26px; border-radius: var(--r);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--navy); color: var(--on-dark); border-color: var(--navy); }
.btn--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-navy); }
.btn--ghost:hover { border-color: var(--navy); background: var(--cream); }
.btn--onDeep { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.btn--onDeep:hover { background: #D9BC7E; border-color: #D9BC7E; }
.section--deep .btn--ghost, .cta-band .btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,.38); background: transparent; }
.section--deep .btn--ghost:hover, .cta-band .btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.08); }
.btn--sm { font-size: 14px; padding: 11px 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- 헤더 ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--divider); }
.head-in { display: flex; align-items: center; gap: 28px; height: 70px; }
.brand { display: flex; flex-direction: column; text-decoration: none; flex: none; line-height: 1.2; }
.brand b { font-size: 16px; font-weight: 800; letter-spacing: .06em; color: var(--navy); }
.brand span { font-size: 12px; color: var(--text-light); }

.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--text-mid); font-size: 16px; font-weight: 700; padding: 9px 14px; border-radius: var(--r); }
.nav a:hover { color: var(--navy); background: var(--cream); }
.nav a[aria-current="page"] { color: var(--navy); }
.head-cta { flex: none; }

.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line-navy); border-radius: var(--r); width: 42px; height: 40px; cursor: pointer; align-items: center; justify-content: center; }
.burger span { display: block; width: 18px; height: 2px; background: var(--navy); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--navy); }
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

@media (max-width: 1000px) {
  .burger { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 70px; flex-direction: column; gap: 0; background: var(--white); border-bottom: 1px solid var(--divider); padding: 8px 16px 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 13px 8px; border-bottom: 1px solid var(--divider); }
  .nav .head-cta-m { display: block; margin-top: 12px; text-align: center; }
}
/* 좁아져서 로고·버튼·버거가 서로 밀기 시작하는 지점부터 버튼을 버거 안으로 넘긴다 */
@media (max-width: 620px) { .head-cta { display: none; } }
@media (min-width: 621px) { .nav .head-cta-m { display: none; } }
@media (min-width: 921px) { .nav .head-cta-m { display: none; } }

/* ---------- 히어로 : 샌드위치 위쪽 ---------- */
.hero { background: var(--navy-deep); color: var(--on-dark-mid); padding: clamp(56px, 8vw, 92px) 0; }
.hero h1 { color: var(--on-dark); }
.hero .sec-eyebrow { color: var(--purple-soft); }
.hero p.lead { font-size: clamp(17px, 1.8vw, 19px); line-height: 1.85; color: var(--on-dark-mid); max-width: var(--w-read); margin: 20px 0 0; }
.hero .sub { font-size: clamp(16px, 1.6vw, 18px); color: var(--gold); font-weight: 700; margin: 14px 0 0; }
.hero-price { font-size: 15px; color: var(--on-dark-soft); margin-top: 16px; }
.hero .btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,.38); }
.hero .btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.08); }
.hero .btn--primary { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.hero .btn--primary:hover { background: #D9BC7E; border-color: #D9BC7E; }

/* ---------- 사다리 ---------- */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.rung { background: var(--white); padding: calc(var(--s5) - 4px) var(--s5) var(--s5); display: flex; flex-direction: column; text-decoration: none; color: inherit; border-top: 4px solid var(--purple-soft); transition: background-color .15s ease, border-color .15s ease; }
.rung:nth-child(2) { border-top-color: var(--purple); }
.rung:nth-child(3) { border-top-color: var(--navy); }
.rung:hover { background: var(--cream); }
.rung .rung-step { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--text-light); margin-bottom: 10px; }
.rung h3 { margin-bottom: 6px; }
.rung .price { font-size: 16px; font-weight: 700; color: var(--purple); margin-bottom: 12px; }
.rung p { font-size: 15.5px; line-height: 1.8; color: var(--text-mid); margin: 0; }
.rung .go { margin-top: auto; padding-top: 18px; font-size: 15px; font-weight: 700; color: var(--navy); }
.rung .go::after { content: " >"; }
@media (max-width: 840px) { .ladder { grid-template-columns: 1fr; } }

/* ---------- 3단계 방법론 ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: st; }
.step { counter-increment: st; background: var(--cream); padding: calc(var(--s5) - 3px) var(--s5) var(--s5); border-top: 3px solid var(--navy); }
.step::before { content: counter(st); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--purple); color: var(--white); font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.step h3 { margin-bottom: 10px; }
.step p { font-size: 15.5px; line-height: 1.8; color: var(--text-mid); }
.step .out { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--divider); font-size: 14.5px; color: var(--text); }
.step .out b { display: block; font-size: 15.5px; color: var(--purple); font-weight: 700; margin-bottom: 5px; }
.steps--5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1060px) { .steps--5 { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 840px) { .steps, .steps--5 { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- 카드 그리드 ---------- */
.cards { display: grid; gap: 1px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--white); padding: var(--s5); }
.section--tint .card { background: var(--white); }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card h4 { margin-bottom: 6px; }
.card p { font-size: 15.5px; line-height: 1.8; color: var(--text-mid); margin: 0; }
.card .tag { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--white); background: var(--purple); padding: 4px 10px; border-radius: 2px; margin-bottom: 12px; }
@media (max-width: 980px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 840px) { .cards--3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .cards--2, .cards--4 { grid-template-columns: 1fr; } }

/* ---------- 두 갈래 ---------- */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.fit > div { background: var(--white); padding: var(--s5); }
.fit h3 { font-size: 18px; margin-bottom: 16px; }
.fit ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.fit li { font-size: 15.5px; line-height: 1.75; color: var(--text-mid); padding-left: 24px; position: relative; }
.fit--yes li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 9px; height: 5px; border-left: 2px solid var(--purple); border-bottom: 2px solid var(--purple); transform: rotate(-45deg); }
.fit--no li::before { content: ""; position: absolute; left: 3px; top: 13px; width: 10px; height: 2px; background: var(--line-navy); }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* ---------- 목록 ---------- */
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.checks li { font-size: 16px; line-height: 1.8; color: var(--text-mid); padding-left: 26px; position: relative; }
.checks li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 10px; height: 5px; border-left: 2px solid var(--purple); border-bottom: 2px solid var(--purple); transform: rotate(-45deg); }
.checks b { color: var(--navy); font-weight: 700; }

.scope { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.scope > div { background: var(--white); padding: var(--s5); }
.scope h4 { color: var(--purple); margin-bottom: 12px; }
.scope ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.scope li { font-size: 15px; line-height: 1.7; color: var(--text-mid); }
@media (max-width: 900px) { .scope { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .scope { grid-template-columns: 1fr; } }

/* ---------- 업종 ---------- */
.ind-group { margin-bottom: 32px; }
.ind-group:last-child { margin-bottom: 0; }
.ind-group > h4 { font-size: 14px; color: var(--purple); margin-bottom: 14px; }
.inds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; }
.ind { background: var(--white); padding: var(--s5); }
.ind b { display: block; font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.ind span { font-size: 14.5px; line-height: 1.7; color: var(--text-light); }

/* ---------- 가격 ---------- */
.prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }
.price-card { background: var(--white); padding: var(--s6); display: flex; flex-direction: column; }
.price-card--hi { background: var(--cream); }
.price-card .pname { font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.price-card .pnum { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); margin: 10px 0 4px; }
.price-card .punit { font-size: 14.5px; color: var(--text-light); }
.price-card ul { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.price-card li { font-size: 15.5px; line-height: 1.7; color: var(--text-mid); padding-left: 20px; position: relative; }
.price-card li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 8px; height: 4px; border-left: 2px solid var(--purple); border-bottom: 2px solid var(--purple); transform: rotate(-45deg); }
@media (max-width: 720px) { .prices { grid-template-columns: 1fr; } }

.rules { margin-top: 1px; background: var(--navy); color: var(--on-dark-mid); padding: var(--s5); display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rules div { font-size: 15.5px; line-height: 1.7; }
.rules b { display: block; font-size: 16.5px; color: var(--gold); font-weight: 700; margin-bottom: 8px; }
@media (max-width: 720px) { .rules { grid-template-columns: 1fr; gap: 16px; } }
/* 나눌 항목이 아니라 이어지는 설명일 때 - 한 칸으로 두고 글줄 길이만 잡아 준다 */
.rules--one { grid-template-columns: 1fr; }
.rules--one div { max-width: var(--w-read); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--divider); }
.faq details { border-bottom: 1px solid var(--divider); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.55; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 27px; width: 10px; height: 10px; border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple); transform: rotate(45deg); transition: transform .18s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 32px; }
.faq .ans { padding: 0 40px 22px 0; font-size: 16px; line-height: 1.85; color: var(--text-mid); max-width: var(--w-read); }

/* ---------- CTA 밴드 : 샌드위치 아래쪽으로 이어짐 ---------- */
.cta-band { background: var(--navy-deep); color: var(--on-dark-mid); }
.cta-band .container { padding-top: clamp(56px, 7vw, 82px); padding-bottom: clamp(56px, 7vw, 82px); }
.cta-band h2 { color: var(--on-dark); max-width: 22ch; }
.cta-band .sec-eyebrow { color: var(--purple-soft); }
.cta-band p { color: var(--on-dark-mid); max-width: var(--w-read); margin-top: 14px; }
.cta-band .contact-line { font-size: 14.5px; color: var(--on-dark-soft); margin-top: 24px; line-height: 1.95; }
.cta-band a.inline { color: var(--on-dark); }

/* ---------- 커뮤니티 배너 ---------- */
.banner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--cream); border-left: 4px solid var(--gold); padding: var(--s5); }
.banner .b-txt { flex: 1 1 320px; }
.banner h3 { font-size: 19px; margin-bottom: 6px; }
.banner p { font-size: 15.5px; color: var(--text-mid); margin: 0; }

/* ---------- 신청 폼 ---------- */
.form { display: grid; gap: 18px; max-width: 640px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 15px; font-weight: 700; color: var(--navy); }
.field label .req { color: var(--gold); margin-left: 3px; }
.field input, .field select, .field textarea { font-family: inherit; font-size: 16px; color: var(--text); background: var(--white); border: 1.5px solid var(--line-navy); border-radius: var(--r); padding: 13px 14px; width: 100%; }
.field textarea { min-height: 128px; resize: vertical; line-height: 1.75; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(26,43,92,.1); }
.field .hint { font-size: 14px; color: var(--text-light); }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-row label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1.5px solid var(--line-navy); border-radius: var(--r); padding: 11px 16px; font-size: 15px; font-weight: 400; color: var(--text-mid); }
.radio-row input { accent-color: var(--navy); margin: 0; }
.radio-row label:has(input:checked) { border-color: var(--navy); background: var(--cream); color: var(--navy); font-weight: 700; }
.agree { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--text-mid); line-height: 1.7; }
.agree input { accent-color: var(--navy); margin-top: 5px; flex: none; }
.form-msg { font-size: 15.5px; padding: 14px 16px; border-radius: var(--r); display: none; line-height: 1.7; }
.form-msg.ok  { display: block; background: var(--cream); color: var(--navy); border: 1px solid var(--divider); }
.form-msg.err { display: block; background: #FDF3F2; color: #9B2C22; border: 1px solid #F3D3CF; }
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---------- 표 ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line-navy); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15.5px; }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--divider); vertical-align: top; }
th { background: var(--cream); font-weight: 700; font-size: 14.5px; color: var(--navy); }
td { color: var(--text-mid); }
tr:last-child td { border-bottom: 0; }

/* ---------- 대표 프로필 ---------- */
.profile { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.profile .ph { aspect-ratio: 3/4; background: var(--cream); border: 1px solid var(--purple); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.profile .ph span { font-size: 13px; color: var(--text-light); text-align: center; padding: 16px; }
.profile .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.profile .nm { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.profile .ttl { font-size: 15px; color: var(--text-light); margin-top: 4px; }
.profile .creds { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.profile .creds li { font-size: 15.5px; color: var(--text-mid); padding-left: 22px; position: relative; }
.profile .creds li::before { content: ""; position: absolute; left: 0; top: 12px; width: 11px; height: 2px; background: var(--purple); }
.profile blockquote { margin: 24px 0 0; padding: 20px 24px; background: var(--cream); border-left: 3px solid var(--gold); font-size: 16.5px; line-height: 1.8; color: var(--text); }
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; gap: 26px; } .profile .ph { max-width: 240px; } }

/* ---------- 성과 숫자 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.stat { background: var(--white); padding: var(--s5); }
.stat b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); line-height: 1.2; }
.stat span { display: block; font-size: 15px; color: var(--text-mid); margin-top: 6px; }
.stats-cap { font-size: 14px; color: var(--text-light); margin-top: 14px; }
@media (max-width: 840px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 협력 파트너 ---------- */
.partners { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--divider); }
.partners li { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--divider); font-size: 16px; }
.partners b { font-weight: 700; color: var(--navy); min-width: 180px; }
.partners span { color: var(--text-light); font-size: 15px; }

/* ---------- 푸터 : 샌드위치 아래쪽 ---------- */
.site-foot { background: var(--navy-deep); color: var(--on-dark-soft); padding: clamp(48px, 6vw, 72px) 0; font-size: 15px; line-height: 1.9; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.12); }
.site-foot .brand b { color: var(--on-dark); }
.site-foot .brand span { color: var(--on-dark-soft); }
.foot-col h4 { color: var(--on-dark); font-size: 15px; margin-bottom: 12px; }
.foot-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.foot-col a { color: var(--on-dark-soft); text-decoration: none; }
.foot-col a:hover { color: var(--on-dark); }
.foot-biz { padding-top: 24px; font-size: 14px; color: var(--on-dark-soft); line-height: 1.95; }
.foot-biz p { margin: 0; }
.foot-sign { margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--on-dark); letter-spacing: .02em; }
@media (max-width: 840px) { .foot-top { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- 유틸 ---------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 16px; }
.mt-2 { margin-top: 28px; }
.mt-3 { margin-top: 44px; }
.hr { height: 1px; background: var(--divider); border: 0; margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 필수 항목 표시 - 별표 대신 글자로 (브리프 11-3: 장식용 별표 금지) */
.field label .req {
  font-size: 12px; font-weight: 700; color: var(--gold);
  background: rgba(201,169,97,.14); padding: 2px 7px; border-radius: 2px;
  margin-left: 6px; vertical-align: middle;
}


/* ---------- 브랜드 로고 ----------
   로고는 네이비 워드마크 + 보라 구체 두 색이라 단색으로 칠할 수 없다.
   밝은 배경용(logo-h.png)과 어두운 배경용(logo-h-white.png)을 각각 쓴다. */
.brand { gap: 4px; align-items: flex-start; }
.brand-logo { height: 26px; width: auto; }
.brand-ko { font-size: 11.5px; letter-spacing: .04em; color: var(--text-light); }
.site-foot .brand-ko { color: var(--on-dark-soft); }
@media (max-width: 1000px) { .brand-logo { height: 22px; } }

/* ---------- 현장 사진 ----------
   섹션 사이에 전폭으로 놓아 글만 이어지지 않게 한다. */
.shot { margin: 0; background: var(--navy-deep); }
.shot img {
  display: block; width: 100%; height: auto;
  max-height: 520px; object-fit: cover; object-position: center 42%;
}
@media (max-width: 760px) { .shot img { max-height: 300px; } }

/* ---------- 격자 칸의 실선 ----------
   컨테이너 배경을 틈으로 비추는 대신 칸마다 1px 테두리를 두른다.
   gap:1px 이라 이웃한 테두리가 같은 자리에 겹쳐 한 줄로 보이고,
   항목 수가 열 수의 배수가 아닐 때 생기던 빈 칸 회색 막대가 사라진다. */
.rung, .card, .fit > div, .scope > div, .ind, .price-card, .stat {
  box-shadow: 0 0 0 1px var(--line-navy);
}

/* ---------- 미션·비전·정의 ----------
   확정 문구를 나열이 아니라 정의 목록으로. 라벨은 작고 문장이 주인공이다. */
.creed { margin: 0; display: grid; grid-template-columns: 88px 1fr; gap: var(--s5) var(--s5); align-items: baseline; }
.creed dt { font-size: 14px; font-weight: 700; color: var(--purple); letter-spacing: .02em; }
.creed dd { margin: 0; font-size: 18px; line-height: 1.75; color: var(--text); }
@media (max-width: 620px) {
  .creed { grid-template-columns: 1fr; gap: var(--s1) 0; }
  .creed dd { margin-bottom: var(--s4); }
}

/* ---------- 핵심가치 흐름 ----------
   브리프 41·57행: 넷을 똑같은 카드 네 장으로 늘어놓으면 구조가 사라진다.
   고객(실재) → 우리(개방·동행) → 고객(자립) 의 주체 이동이 보여야 한다.
   그래서 주체별로 묶고, 고객 묶음은 네이비 / 우리 묶음은 퍼플로 색을 나눈다.
   SVG 대신 CSS 로 짠 이유 - 375px 에서 글자가 줄지 않고 그대로 읽힌다. */
.flow { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: var(--s5); align-items: stretch; }
.flow-g { background: var(--white); padding: var(--s5); border-top: 3px solid var(--navy); position: relative; }
.flow-g--client { border-top-color: var(--navy); }   /* 고객 쪽 - 실재, 자립 */
.flow-g--us { border-top-color: var(--purple); }     /* 우리 쪽 - 개방, 동행 */
.flow-who { font-size: 13px; font-weight: 700; color: var(--text-light); margin: 0 0 var(--s4); }
.flow-g--us .flow-who { color: var(--purple); }
.flow-v + .flow-v { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--divider); }
.flow-v h3 { font-size: 19px; color: var(--navy); margin-bottom: var(--s2); }
.flow-g--us .flow-v h3 { color: var(--purple); }
.flow-v p { font-size: 15.5px; line-height: 1.75; color: var(--text-mid); margin: 0; }
/* 묶음 사이의 진행 표시 - 화살표는 장식이므로 화면낭독기에서 감춘다 */
.flow-g + .flow-g::before {
  content: ""; position: absolute; left: calc(var(--s5) / -2 - 4px); top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-top: 2px solid var(--purple-soft); border-right: 2px solid var(--purple-soft);
  transform: rotate(45deg);
}
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; }
  .flow-g + .flow-g::before { left: 50%; top: calc(var(--s5) / -2 - 4px); margin: 0 0 0 -4px; transform: rotate(135deg); }
}

/* ---------- 대표 인사말 ----------
   400자가 넘는 글이라 본문 폭을 좁히고 행간을 넉넉히 준다. */
.letter { margin-top: var(--s7); padding-top: var(--s7); border-top: 1px solid var(--divider); max-width: var(--w-read); }
.letter p { font-size: 17px; line-height: 1.9; color: var(--text); margin: 0 0 var(--s5); }
.letter p:first-child { font-size: 20px; font-weight: 700; color: var(--navy); }
.letter-sign { font-size: 15.5px !important; color: var(--text-light) !important; margin-bottom: 0 !important; }

/* ---------- 조직도 ----------
   1인 법인이라 사람이 아니라 기능을 그린다. 인원수를 부풀리지 않는다. */
.org { display: flex; flex-direction: column; align-items: center; }
.org-top { background: var(--navy-deep); color: var(--on-dark); padding: var(--s5) var(--s6); text-align: center; }
.org-name { font-size: 20px; font-weight: 800; margin: 0; color: var(--on-dark); }
.org-role { font-size: 14px; margin: var(--s1) 0 0; color: var(--on-dark-mid); }
/* 대표에서 네 기능으로 내려가는 줄기 */
.org-row { position: relative; margin-top: var(--s7); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; width: 100%; }
.org-row::before { content: ""; position: absolute; left: 50%; top: calc(var(--s7) * -1); width: 1px; height: var(--s7); background: var(--line-navy); }
.org-unit { background: var(--white); padding: var(--s5); box-shadow: 0 0 0 1px var(--line-navy); }
.org-unit h3 { font-size: 17px; color: var(--navy); margin-bottom: var(--s2); }
.org-unit p { font-size: 15px; line-height: 1.75; color: var(--text-mid); margin: 0; }
@media (max-width: 860px) { .org-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .org-row { grid-template-columns: 1fr; } }

/* ---------- 업종 카드 이미지 ----------
   카드 안쪽 여백(--s5)만큼 음수 마진을 줘 사진만 카드 끝까지 채운다.
   글의 시작선은 다른 카드와 같은 자리에 그대로 남는다. */
.ind-img {
  display: block;
  width: calc(100% + var(--s5) * 2);
  margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s5);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}