/* ═══════════════════════════════════════════════════════════
   드림팩토리 솔루션 — 사이트 스타일

   방향: 무채색 기반의 어두운 톤. 채도를 낮추고 여백을 넓힌다.
   색으로 강조하지 않고 명도 차이와 얇은 선으로 구분한다.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* 바탕 — 완전한 검정을 쓰지 않는다. 미세하게 푸른 기가 도는 먹색 */
  --bg:#0d0f12;
  --bg-1:#131619;          /* 한 단계 올라온 면 */
  --bg-2:#191d21;          /* 카드·입력창 */

  /* 글자 — 순백은 눈이 아프다. 한 톤 내린 회백색 */
  --ink:#dfe3e7;
  --ink-2:#a4adb6;         /* 보조 */
  --ink-3:#6b737b;         /* 캡션·비활성 */

  /* 선 — 색이 아니라 얇은 선으로 구분한다 */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  /* 강조 — 채도를 크게 낮춘 세 가지. 면이 아니라 선으로만 쓴다 */
  --mfg:#7d97b3;
  --mkt:#6f9c96;
  --yt:#b08279;
  --accent:#c8d0d8;
  --gold:#c9a96e;          /* 드림팩토리 금색 로고에서 가져온 포인트 */
  --gold-2:#e8d5ab;
  --auto:#8f89c2;          /* AI 업무 자동화 */
  --bg-alt:#111419;        /* 섹션 교차 배경 */
  --head:#fff;             /* 제목·강조 글자 */
  --panel:#151a20;         /* 예시 화면 패널 */

  /* 음영 — 다크에서는 검정 그림자 + 위쪽 1px 하이라이트를 같이 써야 떠 보인다 */
  --lift-1:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 28px -18px rgba(0,0,0,.9);
  --lift-2:0 1px 0 rgba(255,255,255,.07) inset, 0 28px 56px -28px rgba(0,0,0,.95);
  --text-shadow:0 1px 2px rgba(0,0,0,.5);

  --radius:2px;            /* 둥근 모서리를 거의 쓰지 않는다 */
  --wrap:1180px;
  --head-h:76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg); }
body{
  margin:0;
  font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",
              "Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; font-weight:400; line-height:1.82;
  color:var(--ink); background:var(--bg);
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); }
::selection{ background:rgba(200,208,216,.22); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }

.skip{ position:absolute; left:-9999px; background:var(--bg-2); color:var(--ink); padding:12px 18px; z-index:100; }
.skip:focus{ left:12px; top:12px; }

/* ── 헤더 ─────────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(13,15,18,.82);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 32px -24px rgba(0,0,0,.9);
}
.head-inner{ display:flex; align-items:center; gap:32px; height:var(--head-h); }
.brand{ text-decoration:none; color:var(--ink); line-height:1.2; }
.brand strong{ display:block; font-size:1.02rem; font-weight:700; letter-spacing:-.01em; }
.brand span{
  display:block; margin-top:2px; font-size:.6rem; font-weight:400;
  color:var(--ink-3); letter-spacing:.22em; text-transform:uppercase; font-weight:500;
}

.site-nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.site-nav a{
  position:relative; text-decoration:none; color:var(--ink-2);
  font-size:.88rem; font-weight:500; letter-spacing:-.005em;
  padding:10px 16px; transition:color .25s ease;
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a.on{ color:var(--head); font-weight:600; }
.site-nav a.on::after{
  content:""; position:absolute; left:16px; right:16px; bottom:2px;
  height:1px; background:var(--line-2);
}
.site-nav a.nav-cta{
  margin-left:16px; padding:11px 24px; color:var(--head); font-weight:600;
  border:1px solid var(--line-2); transition:background .25s ease, border-color .25s ease;
}
.site-nav a.nav-cta:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); }
.site-nav a.nav-cta::after{ display:none; }
.navbtn{ display:none; margin-left:auto; font-size:1.35rem; color:var(--ink-2); cursor:pointer; padding:6px 10px; }

@media (max-width:900px){
  .navbtn{ display:block; }
  .site-nav{
    position:absolute; top:var(--head-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-1); border-bottom:1px solid var(--line);
    padding:10px 20px 20px; display:none;
  }
  #navtoggle:checked ~ .site-nav{ display:flex; }
  .site-nav a{ padding:15px 8px; border-bottom:1px solid var(--line); }
  .site-nav a.on::after{ display:none; }
  .site-nav a.nav-cta{ margin:16px 0 0; text-align:center; border-bottom:1px solid var(--line-2); }
}

/* ── 히어로 ───────────────────────────────────────────── */
/* 그라데이션을 쓰지 않는다. 위쪽 얇은 선 하나로만 사업축을 구분한다. */
.hero{
  position:relative; padding:140px 0 120px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--accent-line,transparent) 0%, transparent 62%);
  opacity:.55;
}
/* 아주 옅은 광원 — 화면 왼쪽 위에서 스미듯 */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(88% 66% at 6% -12%, rgba(255,255,255,.085) 0%, transparent 58%),
    linear-gradient(180deg, transparent 52%, rgba(0,0,0,.42) 100%);
}
.hero > .wrap{ position:relative; z-index:1; }
.hero--steel { --accent-line:var(--mfg); }
.hero--signal{ --accent-line:var(--mkt); }
.hero--alert { --accent-line:var(--yt);  }

.hero .eyebrow{
  margin:0 0 26px; font-size:.7rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-2);
}
.hero h1{
  margin:0; max-width:18ch;
  font-size:clamp(2.25rem,5vw,3.9rem); font-weight:700;
  line-height:1.28; letter-spacing:-.035em; color:var(--head);
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.hero-sub{
  margin:30px 0 0; max-width:50ch;
  font-size:1.05rem; font-weight:400; line-height:1.85; color:var(--ink-2);
  text-shadow:var(--text-shadow);
}
.btn{
  display:inline-block; margin-top:44px; padding:15px 38px;
  font-size:.92rem; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; color:var(--head);
  border:1px solid var(--line-2); box-shadow:var(--lift-1);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.btn--light{ background:transparent; }
.btn--light:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.32); }

/* ── 본문 ─────────────────────────────────────────────── */
.prose{ padding:96px 32px 120px; max-width:790px; }
.prose h1{
  font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:700;
  line-height:1.32; letter-spacing:-.035em; margin:0 0 32px; color:var(--head);
}
.prose h2{
  font-size:1.52rem; font-weight:700; letter-spacing:-.028em; color:var(--head);
  margin:88px 0 24px; padding-top:34px; border-top:1px solid var(--line);
}
.prose > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ font-size:1.1rem; font-weight:700; letter-spacing:-.02em; color:#f2f5f8; margin:44px 0 12px; }
.prose p{ margin:0 0 22px; color:var(--ink); font-weight:400; }
.prose strong{ font-weight:700; color:var(--head); }
.prose ul,.prose ol{ margin:0 0 22px; padding-left:1.2em; }
.prose li{ margin:10px 0; color:var(--ink); }
.prose li::marker{ color:var(--ink-3); }
.prose a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:1px; }
.prose a:hover{ border-bottom-color:var(--ink-2); }

.prose blockquote{
  margin:36px 0; padding:26px 30px;
  background:var(--bg-1); border:1px solid var(--line); border-left:2px solid var(--line-2);
  box-shadow:var(--lift-1);
  color:var(--ink-2); font-size:.96rem;
}
.prose blockquote p:last-child{ margin:0; }

.prose table{ width:100%; border-collapse:collapse; margin:36px 0; font-size:.92rem; }
.prose th,.prose td{ border-bottom:1px solid var(--line); padding:16px 14px; text-align:left; vertical-align:top; }
.prose th{ color:var(--ink-2); font-weight:600; font-size:.8rem; letter-spacing:.06em; border-bottom-color:var(--line-2); }
.prose tbody tr:last-child td{ border-bottom:0; }

.prose code{
  background:var(--bg-2); border:1px solid var(--line); padding:2px 7px;
  font-size:.86em; color:var(--ink-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.prose pre{ background:var(--bg-1); border:1px solid var(--line); padding:22px 24px; overflow-x:auto; }
.prose pre code{ background:none; border:0; padding:0; color:var(--ink-2); font-size:.85rem; line-height:1.8; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:64px 0; }

/* 자료 대기 자리 — 지어내지 않고 비워둔다 */
.placeholder{
  background:var(--bg-1); border:1px dashed var(--line-2);
  padding:40px 32px; color:var(--ink-3); font-size:.88rem;
  line-height:1.85; text-align:center;
}
.placeholder code{ background:var(--bg-2); }

/* ── 3사업 카드 ───────────────────────────────────────── */
.section-pillars{
  padding:0; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.022) 0%, transparent 100%);
}
.dfs-pillars{ display:grid; gap:1px; grid-template-columns:repeat(3,1fr); background:var(--line); border-left:1px solid var(--line); border-right:1px solid var(--line); }
@media (max-width:900px){ .dfs-pillars{ grid-template-columns:1fr; } }
.dfs-pillar{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--bg); padding:56px 38px 48px; min-height:296px;
  border-top:2px solid transparent;
  transition:background .35s ease, border-top-color .35s ease;
}
.dfs-pillar:hover{ background:var(--bg-1); box-shadow:var(--lift-2); }
.dfs-pillar--mfg:hover{ border-top-color:var(--mfg); }
.dfs-pillar--mkt:hover{ border-top-color:var(--mkt); }
.dfs-pillar--yt:hover { border-top-color:var(--yt); }
.dfs-pillar h3{ margin:0 0 16px; font-size:1.16rem; font-weight:700; letter-spacing:-.025em; color:var(--head); }
.dfs-pillar p{ margin:0 0 32px; color:var(--ink-2); font-size:.91rem; line-height:1.9; }
.dfs-pillar .more{ margin-top:auto; font-size:.8rem; font-weight:600; letter-spacing:.06em; color:var(--ink-2); transition:color .3s ease; }
.dfs-pillar:hover .more{ color:var(--ink); }

/* ── 자격 배지 ────────────────────────────────────────── */
.dfs-credentials{ display:flex; flex-wrap:wrap; gap:0; margin:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.dfs-credentials span{
  padding:16px 24px 16px 0; margin-right:24px;
  font-size:.84rem; font-weight:500; letter-spacing:.02em; color:var(--ink-2);
  border-right:1px solid var(--line);
}
.dfs-credentials span:last-child{ border-right:0; margin-right:0; }

/* ── 유튜브 ───────────────────────────────────────────── */
.dfs-channels{ display:grid; gap:28px; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); margin:36px 0; }
.dfs-video{ position:relative; padding-top:56.25%; overflow:hidden; background:#000; border:1px solid var(--line); }
.dfs-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-title{
  display:block; margin-top:14px; font-size:.9rem; font-weight:500;
  color:var(--ink-2); text-decoration:none; line-height:1.65; border:0;
}
.video-title:hover{ color:var(--ink); }

/* ── CTA ──────────────────────────────────────────────── */
.dfs-cta{
  background:linear-gradient(180deg, #171b1f 0%, #101316 100%);
  border:1px solid var(--line); box-shadow:var(--lift-2);
  padding:76px 40px; text-align:center; margin:88px 0 0;
}
.dfs-cta h2{
  margin:0 0 18px; font-size:1.65rem; font-weight:700;
  letter-spacing:-.032em; color:var(--head); border:0; padding:0;
}
.dfs-cta p{ margin:0 auto 40px; max-width:46ch; color:var(--ink-2); font-size:.95rem; }
.dfs-cta a.button{
  display:inline-block; padding:17px 46px;
  font-size:.92rem; font-weight:600; letter-spacing:-.005em;
  color:var(--head); text-decoration:none; border:1px solid var(--line-2);
  box-shadow:var(--lift-1);
  transition:background .3s ease, border-color .3s ease;
}
.dfs-cta a.button:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.32); }

/* ── 인사이트 목록 ────────────────────────────────────── */
.post-list{ list-style:none; margin:80px 0; padding:0; border-top:1px solid var(--line); }
.post-list li{ border-bottom:1px solid var(--line); }
.post-list a{ display:block; padding:36px 4px; text-decoration:none; color:inherit; border:0; transition:padding-left .35s ease; }
.post-list a:hover{ padding-left:16px; }
.post-list-meta{ display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.post-list strong{ display:block; font-size:1.2rem; font-weight:700; letter-spacing:-.028em; line-height:1.5; color:var(--head); }
.post-list-desc{ display:block; margin-top:12px; font-size:.9rem; color:var(--ink-2); line-height:1.8; }
.empty{ padding:120px 0; text-align:center; color:var(--ink-3); font-size:.92rem; }

.post-meta{ margin:0 0 20px; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.post-meta > *{ margin-right:14px; }
.post-tags{ margin:56px 0 0; padding-top:28px; border-top:1px solid var(--line); }
.tag{
  display:inline-block; padding:5px 14px; margin:0 6px 6px 0;
  font-size:.72rem; letter-spacing:.06em; color:var(--ink-2);
  border:1px solid var(--line);
}
.tag--draft{ color:#c4a15f; border-color:rgba(196,161,95,.4); }

/* ── 상담 폼 ──────────────────────────────────────────── */
.dfs-form{ margin:44px 0 0; }
.dfs-form .field{ margin:0 0 28px; }
.dfs-form label{ display:block; font-size:.79rem; font-weight:500; letter-spacing:.09em; color:var(--ink-2); margin-bottom:12px; }
.dfs-form .req{ color:var(--yt); }
.dfs-form input[type=text],
.dfs-form input[type=tel],
.dfs-form input[type=email],
.dfs-form textarea,
.dfs-form select{
  width:100%; padding:15px 16px; font:inherit; font-size:.98rem;
  background:var(--bg-1); border:1px solid var(--line); border-radius:0;
  color:var(--ink); transition:border-color .25s ease, background .25s ease;
}
/* 기본 화살표가 다크에서 보이지 않아 직접 그린다 */
.dfs-form select{
  appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a4adb6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.dfs-form select option{ background:var(--bg-2); color:var(--ink); }
.dfs-form textarea{ min-height:190px; resize:vertical; line-height:1.85; }
.dfs-form ::placeholder{ color:var(--ink-3); }
.dfs-form input:focus,.dfs-form textarea:focus,.dfs-form select:focus{
  outline:0; border-color:var(--line-2); background:var(--bg-2);
}
.dfs-form .consent{
  background:var(--bg-1); border:1px solid var(--line); box-shadow:var(--lift-1);
  padding:28px 30px; font-size:.85rem; color:var(--ink-2); line-height:1.85;
}
.dfs-form .consent label{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.92rem; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--ink); margin-bottom:0;
}
.dfs-form .consent input[type=checkbox]{
  margin-top:6px; width:16px; height:16px; flex:none;
  accent-color:#8b949e;
}
.dfs-form .consent strong{ color:var(--ink); font-weight:600; }
.dfs-form .consent a{ color:var(--ink); }
.dfs-form button{
  margin-top:36px; padding:18px 54px; box-shadow:var(--lift-1);
  background:transparent; color:var(--ink);
  border:1px solid var(--line-2); border-radius:0;
  font:inherit; font-size:.94rem; font-weight:600; letter-spacing:-.005em; cursor:pointer; color:var(--head);
  transition:background .3s ease, border-color .3s ease;
}
.dfs-form button:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.32); }
.formnote{ font-size:.8rem; font-weight:400; letter-spacing:0; color:var(--ink-3); line-height:1.8; }
.dfs-form label .formnote{ text-transform:none; }
.hp{ position:absolute; left:-9999px; }

.alert{ padding:20px 24px; margin:0 0 32px; font-size:.92rem; border:1px solid var(--line); }
.alert--ok{ background:rgba(111,156,150,.09); border-color:rgba(111,156,150,.35); color:#a9cfc9; }
.alert--err{ background:rgba(176,130,121,.09); border-color:rgba(176,130,121,.35); color:#d3a79f; }

/* ── 푸터 ─────────────────────────────────────────────── */
.site-foot{ margin-top:0; background:var(--bg); border-top:1px solid var(--line); padding:80px 0 0; }
.foot-inner{ display:flex; flex-wrap:wrap; gap:56px; justify-content:space-between; }
.foot-brand strong{ display:block; margin-bottom:14px; font-size:1.02rem; font-weight:700; letter-spacing:-.02em; color:var(--head); }
.foot-brand p{ margin:0; max-width:34ch; font-size:.82rem; line-height:1.9; color:var(--ink-3); }
.foot-nav{ display:grid; grid-template-columns:repeat(2,minmax(150px,auto)); gap:14px 48px; }
.foot-nav a{ color:var(--ink-2); text-decoration:none; font-size:.85rem; transition:color .25s ease; }
.foot-nav a:hover{ color:var(--ink); }
.foot-legal{ position:relative; margin-top:64px; padding-top:28px; padding-bottom:36px; }
.foot-legal::before{ content:""; position:absolute; top:0; left:32px; right:32px; height:1px; background:var(--line); }
.foot-legal small{ color:var(--ink-3); font-size:.75rem; letter-spacing:.04em; }

@media (max-width:640px){
  .wrap{ padding:0 22px; }
  .foot-legal::before{ left:22px; right:22px; }
  .hero{ padding:88px 0 76px; }
  .hero .eyebrow{ margin-bottom:20px; }
  .hero-sub{ margin-top:24px; }
  .btn{ margin-top:34px; }
  .prose{ padding:64px 22px 88px; }
  .prose h2{ margin-top:64px; padding-top:26px; }
  .dfs-pillar{ padding:38px 26px 34px; }
  .dfs-cta{ padding:52px 24px; margin-top:64px; }
  .dfs-credentials span{ padding:12px 18px 12px 0; margin-right:18px; font-size:.78rem; }
  .foot-nav{ grid-template-columns:1fr; }
  .foot-inner{ gap:40px; }
}

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

@media print{
  .site-head,.site-foot,.dfs-cta,.navbtn{ display:none; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .hero{ background:#fff; border-bottom:1px solid #ccc; }
  .hero h1,.prose h1,.prose h2,.prose h3{ color:#000; }
}


/* ═══════════════════════════════════════════════════════════
   2026-10-02 개편 — 상세형 랜딩 (예시 화면·STEP·번호 카드·FAQ)
   ═══════════════════════════════════════════════════════════ */

/* 공통 버튼 */
.btn-gold{
  display:inline-flex; align-items:center; gap:10px; padding:16px 30px;
  background:linear-gradient(180deg,var(--gold-2) 0%,var(--gold) 100%);
  color:#15120b; font-weight:700; font-size:.95rem; letter-spacing:-.01em;
  text-decoration:none; border-radius:2px;
  box-shadow:0 10px 30px -12px rgba(201,169,110,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-gold:hover{ transform:translateY(-1px); box-shadow:0 14px 34px -12px rgba(201,169,110,.7), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px; padding:15px 26px;
  color:var(--head); font-weight:600; font-size:.93rem; text-decoration:none;
  border:1px solid var(--line-2); background:rgba(255,255,255,.02); border-radius:2px;
  transition:background .25s ease, border-color .25s ease;
}
.btn-ghost:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.32); }

.pill{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 26px;
  padding:7px 14px; border:1px solid var(--line-2); border-radius:999px;
  background:rgba(255,255,255,.03); color:var(--ink-2);
  font-size:.78rem; font-weight:600; letter-spacing:.02em; text-transform:none;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); flex:none; }
.eyebrow-gold{ margin:0 0 14px; color:var(--gold); font-size:.76rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }

/* 격자 배경 — 히어로·마지막 CTA */
.hx-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 30% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 90% at 30% 0%, #000 0%, transparent 72%);
}

/* ── 홈 히어로 ───────────────────────────────────────── */
.hx{
  position:relative; overflow:hidden; padding:120px 0 64px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(201,169,110,.10) 0%, transparent 60%),
    radial-gradient(70% 80% at 0% 0%, rgba(125,151,179,.12) 0%, transparent 60%),
    var(--bg);
}
.hx-inner{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hx-title{
  margin:0; font-size:clamp(2.3rem,4.6vw,3.7rem); font-weight:800;
  line-height:1.22; letter-spacing:-.04em; color:var(--head);
  text-shadow:0 2px 28px rgba(0,0,0,.5);
}
.accent{
  background:linear-gradient(100deg,var(--gold-2) 10%,var(--gold) 60%,#a98549 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;
}
.hx-sub{ margin:28px 0 0; max-width:48ch; color:var(--ink-2); font-size:1.06rem; line-height:1.85; }
.hx-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
.hx-stats{
  position:relative; list-style:none; margin:72px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.hx-stats li{ background:rgba(13,15,18,.86); padding:22px 24px; }
.hx-stats strong{ display:block; color:var(--head); font-size:1.3rem; font-weight:800; letter-spacing:-.03em; }
.hx-stats span{ display:block; margin-top:6px; color:var(--ink-3); font-size:.82rem; line-height:1.6; }

/* ── 예시 화면(목업) 공통 ────────────────────────────── */
.mock{
  position:relative; background:linear-gradient(180deg,#171c23 0%,var(--panel) 100%);
  border:1px solid var(--line-2); border-radius:10px; padding:22px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.07) inset;
}
.mock-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }
.mock-eyebrow{ margin:0; color:var(--ink-3); font-size:.72rem; font-weight:600; letter-spacing:.02em; }
.mock-title{ margin:4px 0 0; color:var(--head); font-size:1.02rem; font-weight:700; letter-spacing:-.02em; }
.chip{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:5px 11px; border-radius:999px; border:1px solid var(--line-2);
  color:var(--ink-2); font-size:.72rem; font-weight:600; background:rgba(255,255,255,.03);
}
.chip-gold{ color:#15120b; background:var(--gold); border-color:var(--gold); }

.board-table{ display:grid; gap:9px; }
.board-row{ display:grid; grid-template-columns:84px repeat(4,1fr); gap:10px; align-items:center; }
.board-th span{ color:var(--ink-3); font-size:.7rem; font-weight:600; text-align:center; }
.board-name{ color:var(--ink-2); font-size:.8rem; font-weight:500; }
.bar{ display:block; height:8px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:99px; }
.bar i.ok { background:linear-gradient(90deg,#6f9c96,#8cc3b9); }
.bar i.mid{ background:linear-gradient(90deg,#a98549,var(--gold)); }
.bar i.low{ background:linear-gradient(90deg,#8c4f45,#b08279); }
.board-todo{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.board-todo ol{ margin:10px 0 0; padding-left:1.2em; color:var(--ink); font-size:.84rem; line-height:1.75; }
.board-todo li::marker{ color:var(--gold); font-weight:700; }

/* ── 섹션 ─────────────────────────────────────────────── */
.sec{ padding:120px 0; border-bottom:1px solid var(--line); }
.sec-alt{ background:var(--bg); }
.sec-head{ max-width:760px; margin:0 0 56px; }
.sec-head h2{ margin:0; color:var(--head); font-size:clamp(1.7rem,3vw,2.4rem); font-weight:800; line-height:1.32; letter-spacing:-.035em; }
.sec-head p:not(.eyebrow-gold){ margin:18px 0 0; color:var(--ink-2); font-size:1.02rem; line-height:1.85; }
.narrow{ max-width:860px; }
.lead{ color:var(--ink-2); font-size:1.03rem; line-height:1.85; margin:18px 0 26px; }

/* 번호 카드 6개 */
.why{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.why-card{
  position:relative; padding:34px 30px 30px; background:var(--bg-1);
  border:1px solid var(--line); border-radius:6px; box-shadow:var(--lift-1);
  transition:border-color .3s ease, transform .3s ease;
}
.why-card:hover{ border-color:rgba(201,169,110,.45); transform:translateY(-2px); }
.why-no{ display:block; color:var(--gold); font-size:.82rem; font-weight:800; letter-spacing:.08em; margin-bottom:18px; }
.why-card h3{ margin:0 0 12px; color:var(--head); font-size:1.14rem; font-weight:700; letter-spacing:-.025em; line-height:1.45; }
.why-card p{ margin:0 0 20px; color:var(--ink-2); font-size:.92rem; line-height:1.85; }
.why-card a{ color:var(--ink); font-size:.86rem; font-weight:600; text-decoration:none; border-bottom:1px solid var(--line-2); }
.why-card a:hover{ border-bottom-color:var(--gold); }

/* 사업 영역 4개 */
.areas{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.area{
  display:flex; flex-direction:column; padding:40px 30px 34px; background:var(--bg);
  text-decoration:none; color:inherit; border-top:2px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.area:hover{ background:var(--bg-1); box-shadow:var(--lift-2); }
.area--audit:hover{ border-top-color:var(--gold); }
.area--mfg:hover  { border-top-color:var(--mfg); }
.area--auto:hover { border-top-color:var(--auto); }
.area--mkt:hover  { border-top-color:var(--mkt); }
.area-tag{ color:var(--ink-3); font-size:.68rem; font-weight:700; letter-spacing:.2em; margin-bottom:18px; }
.area--audit .area-tag, .area--auto .area-tag{ color:var(--gold); }
.area h3{ margin:0 0 12px; color:var(--head); font-size:1.2rem; font-weight:800; letter-spacing:-.03em; }
.area p{ margin:0 0 20px; color:var(--ink-2); font-size:.9rem; line-height:1.85; }
.area ul{ list-style:none; margin:0 0 28px; padding:0; }
.area li{ position:relative; padding-left:16px; margin:7px 0; color:var(--ink); font-size:.86rem; }
.area li::before{ content:""; position:absolute; left:0; top:.72em; width:6px; height:1px; background:var(--gold); }
.area-more{ margin-top:auto; color:var(--ink-2); font-size:.82rem; font-weight:700; letter-spacing:.04em; }
.area:hover .area-more{ color:var(--head); }

/* STEP 흐름 */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s; }
.step{ position:relative; padding:30px 26px; background:var(--bg-1); border:1px solid var(--line); border-radius:6px; box-shadow:var(--lift-1); }
.step:not(:last-child)::after{
  content:"→"; position:absolute; right:-17px; top:34px; z-index:1;
  color:var(--gold); font-weight:700; font-size:1rem;
}
.step-no{ display:block; color:var(--gold); font-size:.74rem; font-weight:800; letter-spacing:.14em; margin-bottom:14px; }
.step h3{ margin:0 0 10px; color:var(--head); font-size:1.12rem; font-weight:800; letter-spacing:-.025em; }
.step p{ margin:0; color:var(--ink-2); font-size:.89rem; line-height:1.85; }
.loop{ margin:26px 0 0; padding:16px 20px; border:1px dashed var(--line-2); border-radius:6px; color:var(--ink-2); font-size:.9rem; text-align:center; }
.loop .loop-ic{ color:var(--gold); vertical-align:-2px; margin-right:6px; }
.quote{ margin:36px 0 0; padding:28px 32px; background:var(--panel); border:1px solid var(--line-2); border-left:3px solid var(--gold); border-radius:6px; box-shadow:var(--lift-2); }
.quote figcaption{ color:var(--gold); font-size:.76rem; font-weight:700; letter-spacing:.08em; margin-bottom:10px; }
.quote blockquote{ margin:0; color:var(--head); font-size:1.05rem; font-weight:500; line-height:1.85; }

/* 좌우 분할 */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split-copy h2{ margin:0; color:var(--head); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; line-height:1.32; letter-spacing:-.035em; }
.checks{ list-style:none; margin:0 0 32px; padding:0; }
.checks li{ position:relative; padding:12px 0 12px 30px; border-bottom:1px solid var(--line); color:var(--ink); font-size:.94rem; }
.checks li::before{ content:"✓"; position:absolute; left:2px; top:12px; color:var(--gold); font-weight:800; }

/* 현장 진단 카드 */
.photo{
  position:relative; height:170px; margin-bottom:14px; border-radius:6px; overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.04) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.04) 75%,transparent 75%) 0 0/22px 22px,
    linear-gradient(180deg,#232a33,#1a1f26);
  border:1px solid var(--line);
}
.photo-note{ position:absolute; right:12px; bottom:10px; color:var(--ink-3); font-size:.72rem; }
.mk{
  position:absolute; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--gold); color:#15120b; font-weight:800; font-size:.82rem;
  box-shadow:0 0 0 4px rgba(201,169,110,.25);
}
.mk-sm{ position:static; width:22px; height:22px; font-size:.72rem; box-shadow:none; flex:none; }
.finding{ padding:12px 0; border-top:1px solid var(--line); }
.finding-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.finding-head strong{ color:var(--head); font-size:.9rem; font-weight:700; }
.finding p{ display:grid; grid-template-columns:48px 1fr; margin:3px 0; color:var(--ink-2); font-size:.82rem; line-height:1.6; }
.finding em{ display:block; padding-top:1px; font-style:normal; color:var(--ink-3); font-size:.72rem; font-weight:700; }
.lvl{ margin-left:auto; padding:2px 9px; border-radius:99px; font-size:.7rem; font-weight:700; }
.lvl-hi { background:rgba(176,130,121,.18); color:#e0aea5; }
.lvl-mid{ background:rgba(201,169,110,.16); color:var(--gold-2); }
.lvl-lo { background:rgba(111,156,150,.16); color:#a9cfc9; }

/* AI 브리핑 */
.split--rev{ grid-template-columns:1fr 1fr; }
.brief-list{ list-style:none; margin:0; padding:0; }
.brief-list li{ display:flex; gap:12px; padding:13px 0; border-top:1px solid var(--line); color:var(--ink); font-size:.86rem; line-height:1.65; }
.btag{ flex:none; padding:2px 9px; height:fit-content; border-radius:4px; background:rgba(143,137,194,.18); color:#c9c4ef; font-size:.72rem; font-weight:700; }
.brief-foot{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.btn-mini{ padding:8px 14px; border:1px solid var(--line-2); border-radius:4px; color:var(--ink-2); font-size:.78rem; font-weight:600; }
.btn-mini--gold{ background:var(--gold); border-color:var(--gold); color:#15120b; }
.mini-points{ margin:0 0 32px; }
.mini-points div{ padding:14px 0; border-bottom:1px solid var(--line); }
.mini-points dt{ color:var(--head); font-weight:700; font-size:.96rem; margin-bottom:4px; }
.mini-points dd{ margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.75; }

/* 하지 않는 것 */
.nots{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.not{ padding:30px; border:1px solid var(--line); border-radius:6px; background:var(--bg); }
.not h3{ position:relative; margin:0 0 10px; padding-left:30px; color:var(--head); font-size:1.08rem; font-weight:700; letter-spacing:-.02em; }
.not h3::before{ content:"✕"; position:absolute; left:0; top:0; color:#b08279; font-weight:800; }
.not p{ margin:0; color:var(--ink-2); font-size:.92rem; line-height:1.85; }

/* FAQ */
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{
  display:flex; gap:14px; align-items:baseline; cursor:pointer; list-style:none;
  padding:24px 40px 24px 0; position:relative; color:var(--head); font-size:1.02rem; font-weight:600; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:6px; top:20px; color:var(--ink-3); font-size:1.4rem; font-weight:300; transition:transform .25s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); color:var(--gold); }
.faq .q{ color:var(--gold); font-weight:800; }
.faq details p{ margin:0 0 26px 30px; color:var(--ink-2); font-size:.94rem; line-height:1.9; }

/* 마지막 CTA */
.final{
  position:relative; overflow:hidden; padding:120px 0; text-align:center;
  background:radial-gradient(60% 90% at 50% 0%, rgba(201,169,110,.14) 0%, transparent 65%), var(--bg);
}
.final-inner{ position:relative; }
.final h2{ margin:0 auto; max-width:22ch; color:var(--head); font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800; line-height:1.3; letter-spacing:-.035em; }
.final p{ margin:20px auto 40px; max-width:52ch; color:var(--ink-2); font-size:1.02rem; line-height:1.85; }

/* ── 하위 페이지 히어로 ───────────────────────────────── */
.hero .pill{ margin-bottom:26px; }
.hero--audit{ --accent-line:var(--gold); background:radial-gradient(60% 80% at 90% 10%, rgba(201,169,110,.10) 0%, transparent 60%), var(--bg); }
.hero--mfg  { --accent-line:var(--mfg);  background:radial-gradient(60% 80% at 90% 10%, rgba(125,151,179,.12) 0%, transparent 60%), var(--bg); }
.hero--auto { --accent-line:var(--auto); background:radial-gradient(60% 80% at 90% 10%, rgba(143,137,194,.12) 0%, transparent 60%), var(--bg); }
.hero--mkt  { --accent-line:var(--mkt);  background:radial-gradient(60% 80% at 90% 10%, rgba(111,156,150,.12) 0%, transparent 60%), var(--bg); }
.hero .hx-cta{ margin-top:40px; }

/* 넓은 본문 — 랜딩 페이지 (카드·표를 넓게, 문단은 읽기 폭으로) */
.prose-wide{ max-width:1180px; }
.prose-wide > p, .prose-wide > ul, .prose-wide > ol, .prose-wide > blockquote{ max-width:760px; }
.prose-wide > h2{ max-width:none; }
.prose .why, .prose .steps, .prose .nots, .prose .areas{ margin:32px 0 8px; }
.prose .why-card h3, .prose .step h3, .prose .not h3, .prose .area h3{ margin-top:0; }
.prose .why-card a{ border-bottom:1px solid var(--line-2); }
.cards2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:32px 0 8px; }
.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:32px 0 8px; }
.card{ padding:30px 28px; background:var(--bg-1); border:1px solid var(--line); border-radius:6px; box-shadow:var(--lift-1); }
.card h3{ margin:0 0 10px !important; color:var(--head); font-size:1.08rem; }
.card p{ margin:0 0 10px; color:var(--ink-2); font-size:.92rem; line-height:1.85; }
.card p:last-child{ margin-bottom:0; }
.card .tag-line{ color:var(--gold); font-size:.72rem; font-weight:800; letter-spacing:.14em; margin-bottom:12px; display:block; }
a.card{ display:block; text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .3s ease, transform .3s ease; }
a.card:hover{ border-color:rgba(201,169,110,.45); transform:translateY(-2px); }
.prose a.card{ padding-bottom:30px; }
.note{ margin:28px 0; padding:18px 22px; border:1px solid rgba(201,169,110,.3); background:rgba(201,169,110,.06); border-radius:6px; color:var(--ink); font-size:.92rem; line-height:1.8; }
.note strong{ color:var(--gold-2); }

/* 푸터 3열 */
.foot-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.foot-cols .foot-nav{ display:flex; flex-direction:column; gap:12px; }
.foot-h{ margin:0 0 6px; color:var(--ink-3); font-size:.72rem; font-weight:700; letter-spacing:.16em; }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width:1080px){
  .hx-inner{ grid-template-columns:1fr; }
  .areas{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step:not(:last-child)::after{ display:none; }
  .split, .split--rev{ grid-template-columns:1fr; gap:44px; }
  .split--rev .mock{ order:2; }
}
@media (max-width:760px){
  .hx{ padding:84px 0 48px; }
  .hx-stats{ grid-template-columns:repeat(2,1fr); }
  .why, .cards3{ grid-template-columns:1fr; }
  .areas, .steps, .nots, .cards2{ grid-template-columns:1fr; }
  .sec{ padding:84px 0; }
  .sec-head{ margin-bottom:40px; }
  .board-row{ grid-template-columns:76px repeat(4,1fr); gap:6px; }
  .board-name{ font-size:.74rem; white-space:nowrap; letter-spacing:-.02em; }
  .mock{ padding:18px; }
  .foot-cols{ gap:36px; }
}

/* ── 2026-10-02 추가: 교육 띠 · 영상 · 무료 진단 ───────────────────── */
.edu-band{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px 28px;
  margin-top:20px; padding:26px 30px; border:1px solid var(--line); background:var(--bg-1);
  text-decoration:none; transition:border-color .25s ease, background .25s ease;
}
.edu-band:hover{ border-color:var(--line-2); background:var(--bg-2); }
.edu-band .area-tag{ margin:0; color:var(--gold); }
.edu-band strong{ color:var(--head); font-size:1.02rem; font-weight:800; letter-spacing:-.025em; }
.edu-items{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
.edu-items em{ font-style:normal; padding:5px 12px; border:1px solid var(--line-2); border-radius:99px; color:var(--ink-2); font-size:.8rem; }
.edu-band .area-more{ grid-column:3; grid-row:1; color:var(--ink-2); font-size:.84rem; font-weight:700; }

.vids{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vid{ margin:0; }
.vid-frame{ position:relative; aspect-ratio:16 / 9; background:#05080f; border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--lift-2); }
.vid-frame video{ display:block; width:100%; height:100%; object-fit:cover; background:#05080f; }
.vid figcaption{ display:grid; gap:6px; margin-top:16px; }
.vid figcaption strong{ color:var(--head); font-size:1rem; font-weight:800; letter-spacing:-.02em; }
.vid figcaption span{ color:var(--ink-2); font-size:.87rem; line-height:1.75; }
.prose .vid{ margin:28px 0 8px; }

.fdx{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; }
.fdx-copy h2{ margin:10px 0 0; color:var(--head); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; line-height:1.32; letter-spacing:-.035em; }
.fdx-sub{ margin:18px 0 0; color:var(--ink-2); font-size:.98rem; line-height:1.85; }
.fdx-steps{ list-style:none; margin:28px 0 32px; padding:0; border-top:1px solid var(--line); }
.fdx-steps li{ display:grid; grid-template-columns:64px 1fr; gap:2px 16px; padding:16px 0; border-bottom:1px solid var(--line); }
.fdx-steps span{ grid-row:span 2; color:var(--gold); font-size:.7rem; font-weight:800; letter-spacing:.14em; padding-top:3px; }
.fdx-steps strong{ color:var(--head); font-size:.98rem; font-weight:800; }
.fdx-steps em{ font-style:normal; color:var(--ink-2); font-size:.86rem; line-height:1.7; }
.fdx-report{ position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--lift-2); }
.rp{ padding:30px 28px; background:#f4f1ea; color:#2a2c30; filter:blur(3.2px); transform:scale(1.02); user-select:none; pointer-events:none; }
.rp-head{ display:grid; gap:4px; padding-bottom:16px; border-bottom:2px solid #2a2c30; }
.rp-label{ color:#8a6d3b; font-size:.7rem; font-weight:800; letter-spacing:.16em; }
.rp-head strong{ font-size:1.15rem; font-weight:800; }
.rp-meta{ color:#6b6e74; font-size:.74rem; }
.rp-sec{ margin-top:18px; }
.rp-h{ margin:0 0 10px; font-size:.84rem; font-weight:800; }
.rp-bars{ display:grid; grid-template-columns:70px 1fr; gap:8px 12px; align-items:center; font-size:.76rem; }
.rp-bars i{ display:block; height:9px; border-radius:2px; background:#5f8f7a; }
.rp-bars i.mid{ background:#c19a4b; } .rp-bars i.lo{ background:#b46b5e; }
.rp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.rp-grid b{ padding:10px 6px; background:#e6e1d6; text-align:center; font-size:.74rem; }
.rp-line{ margin:6px 0; font-size:.8rem; }
.rp-lock{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg, rgba(13,15,18,.15), rgba(13,15,18,.72)); text-align:center; padding:24px;
}
.rp-lock-ic{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--gold); color:#1a1408; box-shadow:0 10px 30px -8px rgba(201,169,110,.6); }
.rp-lock strong{ color:var(--head); font-size:1.05rem; font-weight:800; letter-spacing:-.02em; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.rp-lock > span:last-child{ color:var(--ink-2); font-size:.74rem; letter-spacing:.06em; }
.prose .fdx{ margin:56px 0 16px; padding-top:48px; border-top:1px solid var(--line); }
.prose .fdx-copy h2{ margin-top:10px; padding:0; border:0; }
@media (max-width:1080px){
  .fdx{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:760px){
  .vids{ grid-template-columns:1fr; }
  .edu-band{ grid-template-columns:1fr; padding:22px; }
  .edu-band .area-more{ grid-column:1; grid-row:auto; }
  .rp{ padding:22px 18px; }
  .rp-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ── 2026-10-02 추가: 실측 stats · 세 축 · 운영 수준 · 선택지 비교 ── */
.hx-stats strong small{ margin-left:3px; color:var(--gold); font-size:.62em; font-weight:700; }
.hx-stats strong{ font-size:1.9rem; line-height:1.1; }
.hx-note{ margin:12px 0 0; color:var(--ink-3); font-size:.74rem; letter-spacing:.06em; text-align:right; }

.axes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.axis{ padding:30px 28px; background:var(--bg-1); border:1px solid var(--line); border-top:2px solid var(--gold); border-radius:6px; box-shadow:var(--lift-1); }
.axis-tag{ color:var(--gold); font-size:.7rem; font-weight:800; letter-spacing:.18em; }
.axis h3{ margin:12px 0 10px; color:var(--head); font-size:1.25rem; font-weight:800; letter-spacing:-.03em; }
.axis p{ margin:0 0 18px; color:var(--ink-2); font-size:.9rem; line-height:1.8; }
.axis ul{ list-style:none; margin:0; padding:16px 0 0; border-top:1px solid var(--line); }
.axis li{ position:relative; padding-left:16px; margin:6px 0; color:var(--ink); font-size:.86rem; }
.axis li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--gold); }

.ai-layer{ margin-top:20px; padding:26px 28px; border:1px solid rgba(201,169,110,.35); border-radius:6px;
  background:linear-gradient(180deg, rgba(201,169,110,.08), rgba(201,169,110,.02)); }
.ai-layer-title{ margin:0 0 14px; color:var(--head); font-size:1.05rem; font-weight:800; letter-spacing:-.02em; }
.ai-layer ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ai-layer li{ padding:12px 14px; background:rgba(13,15,18,.6); border:1px solid var(--line); border-radius:4px; color:var(--ink); font-size:.85rem; }
.ai-layer-rule{ margin:14px 0 0; color:var(--gold-2); font-size:.86rem; }

.levels{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.levels li{ position:relative; padding:22px 22px 24px; border-right:1px solid var(--line); background:var(--bg); }
.levels li:last-child{ border-right:0; background:rgba(201,169,110,.07); }
.levels span{ display:block; color:var(--ink-3); font-size:.68rem; font-weight:800; letter-spacing:.16em; }
.levels li:nth-child(n+2) span{ color:var(--gold); }
.levels strong{ display:block; margin:8px 0 4px; color:var(--head); font-size:1rem; font-weight:800; }
.levels em{ font-style:normal; color:var(--ink-2); font-size:.82rem; line-height:1.6; }

.motto{ margin-top:28px; padding:28px 20px; text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.motto strong{ display:block; color:var(--head); font-size:clamp(1.2rem,2.4vw,1.6rem); font-weight:800; letter-spacing:-.02em; }
.motto span{ display:block; margin-top:8px; color:var(--ink-2); font-size:.88rem; }

.choice-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:6px; }
.choice{ width:100%; min-width:640px; border-collapse:collapse; font-size:.9rem; }
.choice th, .choice td{ padding:16px 18px; border-bottom:1px solid var(--line); text-align:left; color:var(--ink-2); }
.choice thead th{ color:var(--ink-3); font-size:.78rem; font-weight:700; letter-spacing:.04em; background:var(--bg-1); }
.choice tbody th{ color:var(--ink); font-weight:700; white-space:nowrap; }
.choice tr:last-child th, .choice tr:last-child td{ border-bottom:0; }
.choice .us{ color:var(--head); font-weight:800; background:rgba(201,169,110,.08); }
.choice thead .us{ color:var(--gold); }
.choice-note{ margin:12px 0 0; color:var(--ink-3); font-size:.76rem; }

@media (max-width:1080px){
  .axes{ grid-template-columns:1fr; }
  .ai-layer ul{ grid-template-columns:repeat(2,1fr); }
  .levels{ grid-template-columns:repeat(2,1fr); }
  .levels li:nth-child(2){ border-right:0; }
  .levels li:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
@media (max-width:760px){
  .hx-note{ text-align:left; }
  .ai-layer ul{ grid-template-columns:1fr; }
  .levels{ grid-template-columns:1fr; }
  .levels li{ border-right:0; border-bottom:1px solid var(--line); }
  .levels li:last-child{ border-bottom:0; }
}
.foot-brand p.foot-contact{ max-width:none; margin-top:10px; color:var(--ink-2); }
.foot-contact a{ color:inherit; text-decoration:none; } .foot-contact a:hover{ color:var(--head); }
.foot-biz{ margin:0 0 10px; color:var(--ink-3); font-size:.74rem; line-height:1.8; }


/* ═══ 2026-10-02 밝은 섹션 — 「홈이 너무 어둡다」 대표 의견 반영 ═══════════════
   히어로·마지막 CTA·푸터는 어두운 톤 유지, .sec-alt 섹션만 밝은 면으로 바꾼다.
   예시 화면(.mock)·영상·잠금 오버레이는 「화면」이므로 밝은 섹션 안에서도 어두운 값으로 되돌린다. */
.sec-alt{
  --bg:#f3f4f6; --bg-alt:#f3f4f6; --bg-1:#ffffff; --bg-2:#eceef1;
  --ink:#1c2127; --ink-2:#4a535e; --ink-3:#7a838e; --head:#0e1217;
  --line:rgba(14,22,32,.10); --line-2:rgba(14,22,32,.18);
  --gold:#a8843f; --gold-2:#7e6127;
  --lift-1:0 1px 2px rgba(14,22,32,.06), 0 10px 24px -16px rgba(14,22,32,.25);
  --lift-2:0 2px 4px rgba(14,22,32,.06), 0 24px 48px -24px rgba(14,22,32,.35);
  color:var(--ink);
}
.sec-alt a{ color:var(--ink); }
.sec-alt .mock, .sec-alt .vid-frame, .sec-alt .rp-lock{
  --bg:#0d0f12; --bg-1:#131619; --bg-2:#191d21;
  --ink:#dfe3e7; --ink-2:#a4adb6; --ink-3:#6b737b; --head:#fff;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --gold:#c9a96e; --gold-2:#e8d5ab;
  --lift-1:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 28px -18px rgba(0,0,0,.9);
  --lift-2:0 1px 0 rgba(255,255,255,.07) inset, 0 28px 56px -28px rgba(0,0,0,.95);
  color:var(--ink);
}
.sec-alt .mock{ box-shadow:0 30px 60px -30px rgba(14,22,32,.55); }
.sec-alt .btn-gold{ color:#1a1408; }
.sec-alt .ai-layer{ background:linear-gradient(180deg, rgba(168,132,63,.10), rgba(168,132,63,.03)); border-color:rgba(168,132,63,.35); }
.sec-alt .ai-layer li{ background:#fff; }
.sec-alt .levels li{ background:#fff; }
.sec-alt .levels li:last-child{ background:#f7f1e4; }
.sec-alt .area:hover, .sec-alt .edu-band:hover{ background:#fafbfc; }
.sec-alt .btn-gold{ background:linear-gradient(180deg,#e8d5ab 0%,#c9a96e 100%); }
.sec-alt .btn-ghost{ background:#fff; }
.sec-alt .btn-ghost:hover{ background:#f7f8fa; border-color:rgba(14,22,32,.32); }
.sec-alt .area{ background:#fff; }
.sec-alt .areas{ background:var(--line); }

/* ═══ 2026-10-02 밝은 톤 전환 (대표 지시 · AIMS 레퍼런스) ═══════════════════════
   바탕은 흰색·연회색, 카드는 둥근 흰 카드 + 부드러운 그림자 + 호버 시 떠오름.
   어두운 곳은 「화면」 역할만: 히어로 · 진행 단계 띠(.sec-dark) · 마지막 CTA · 푸터 · 예시 화면 · 영상. */
:root{
  --bg:#ffffff; --bg-alt:#f4f6f9; --bg-1:#ffffff; --bg-2:#f1f3f6; --panel:#ffffff;
  --ink:#1c2127; --ink-2:#4a535e; --ink-3:#7a838e; --head:#0e1217;
  --line:rgba(14,22,32,.09); --line-2:rgba(14,22,32,.16);
  --gold:#a8843f; --gold-2:#7e6127;
  --lift-1:0 1px 2px rgba(14,22,32,.05), 0 8px 24px -14px rgba(14,22,32,.18);
  --lift-2:0 2px 6px rgba(14,22,32,.05), 0 26px 50px -24px rgba(14,22,32,.30);
  --text-shadow:none;
  --r-card:14px;
}
.hx, .hero, .final, .sec-dark, .site-foot, .mock, .vid-frame, .rp-lock{
  --bg:#0c111a; --bg-alt:#0c111a; --bg-1:#121925; --bg-2:#19212e; --panel:#121925;
  --ink:#dfe3e7; --ink-2:#a7b0ba; --ink-3:#6f7883; --head:#ffffff;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --gold:#c9a96e; --gold-2:#e8d5ab;
  --lift-1:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 28px -18px rgba(0,0,0,.9);
  --lift-2:0 1px 0 rgba(255,255,255,.07) inset, 0 28px 56px -28px rgba(0,0,0,.95);
  color:var(--ink);
}
.sec{ background:#fff; }
.sec-alt{ background:var(--bg-alt); }
.sec-dark{ background:
  radial-gradient(60% 80% at 100% 0%, rgba(80,170,150,.14) 0%, transparent 60%),
  radial-gradient(70% 90% at 0% 0%, rgba(60,90,200,.22) 0%, transparent 60%),
  linear-gradient(180deg,#0b1222 0%,#0a0f19 100%); }
.sec-dark a{ color:var(--ink); }

/* 헤더 — 흰 바 */
.site-head{ background:rgba(255,255,255,.9); box-shadow:0 1px 0 var(--line), 0 10px 30px -24px rgba(14,22,32,.35); border-bottom:0; }
.site-nav a.nav-cta{ background:linear-gradient(180deg,#e8d5ab 0%,#c9a96e 100%); color:#1a1408; border:0; border-radius:999px; padding:11px 22px; }
.site-nav a.nav-cta:hover{ background:linear-gradient(180deg,#efdfba 0%,#d2b47a 100%); }
@media (max-width:900px){ .site-nav{ background:#fff; box-shadow:0 20px 40px -20px rgba(14,22,32,.3); } }

/* 히어로 — 깊은 남색 먹빛 + 금색·청색 광원 + 격자 */
.hx, .hero, .final{
  background:
    radial-gradient(55% 65% at 88% 28%, rgba(201,169,110,.20) 0%, transparent 60%),
    radial-gradient(70% 80% at 0% 0%, rgba(70,105,210,.30) 0%, transparent 62%),
    radial-gradient(60% 60% at 60% 110%, rgba(60,160,140,.16) 0%, transparent 60%),
    linear-gradient(165deg,#0b1222 0%,#0d1527 55%,#0a0f19 100%);
  border-bottom:0;
}
.hero::after{ background:radial-gradient(88% 66% at 6% -12%, rgba(255,255,255,.06) 0%, transparent 58%); }
.hx-stats{ border-radius:var(--r-card); overflow:hidden; }
.hx-stats li{ background:rgba(255,255,255,.04); backdrop-filter:blur(6px); }

/* 버튼 */
.btn-gold{ background:linear-gradient(180deg,#e8d5ab 0%,#c9a96e 100%); color:#1a1408; border-radius:999px; }
.btn-ghost{ border-radius:999px; background:#fff; }
.btn-ghost:hover{ background:#f6f7f9; border-color:rgba(14,22,32,.3); }
.hx .btn-ghost, .hero .btn-ghost, .final .btn-ghost, .sec-dark .btn-ghost{ background:rgba(255,255,255,.06); }
.hx .btn-ghost:hover, .hero .btn-ghost:hover, .sec-dark .btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); }
.dfs-cta a.button{ border-radius:999px; }

/* 카드 — 둥근 흰 카드 + 호버 떠오름 */
.card, .why-card, .axis, .step, .not, .vid-frame, .ai-layer, .edu-band, .choice-wrap, .node, .fdx-report, .dfs-cta{ border-radius:var(--r-card); }
.mock{ border-radius:18px; }
.card, .why-card, .axis, .not, .step, .edu-band{
  background:var(--bg-1); border:1px solid var(--line); box-shadow:var(--lift-1);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.card:hover, .why-card:hover, .axis:hover, .not:hover, .step:hover, a.card:hover, .edu-band:hover{
  transform:translateY(-6px); box-shadow:var(--lift-2); border-color:rgba(168,132,63,.35);
}
.sec-dark .step{ background:rgba(255,255,255,.04); }
.sec-dark .step:hover{ border-color:rgba(201,169,110,.5); }
.areas{ border-radius:var(--r-card); overflow:hidden; }
.area{ transition:background .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.area:hover{ background:#fbfaf7; }
.levels{ border-radius:var(--r-card); }
.levels li{ background:#fff; }
.levels li:last-child{ background:#f7f1e4; }
.ai-layer li{ background:#fff; border-radius:8px; }
.prose table{ border-radius:var(--r-card); }
.placeholder{ border-radius:var(--r-card); }
.note{ border-radius:10px; }

/* 히어로 아래 바로가기 아이콘 바 */
.quick{ position:relative; z-index:3; margin-top:-46px; }
.quick ul{ list-style:none; margin:0; padding:18px 12px; display:grid; grid-template-columns:repeat(8,1fr); gap:4px;
  background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 60px -30px rgba(14,22,32,.35); }
.quick a{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 4px; border-radius:12px; text-decoration:none; color:var(--ink); font-size:.84rem; font-weight:600; transition:background .25s ease, transform .3s ease; }
.quick a:hover{ background:#f6f4ee; transform:translateY(-3px); }
.quick .qi{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#f6f1e6; color:#8a6a2f; border:1px solid rgba(168,132,63,.25); }
.quick .qi svg{ width:22px; height:22px; }
.hx{ padding-bottom:110px; }
@media (max-width:900px){ .quick ul{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:480px){ .quick a{ font-size:.76rem; } .quick .qi{ width:40px; height:40px; } }

/* 진행 단계 — 아이콘 원 + 연결선 */
.sec-dark .steps{ position:relative; padding-top:64px; }
.sec-dark .steps::before{ content:""; position:absolute; top:22px; left:22px; right:22px; height:1px;
  background:linear-gradient(90deg, rgba(201,169,110,.7), rgba(80,170,150,.6) 60%, rgba(255,255,255,.08)); transform-origin:left; }
.sec-dark .step::before{ content:""; position:absolute; top:-64px; left:4px; width:44px; height:44px; border-radius:50%;
  background:#0b1222; border:1px solid rgba(201,169,110,.6); box-shadow:0 0 0 6px rgba(201,169,110,.08), 0 0 24px rgba(201,169,110,.25); }
.sec-dark .step::after{ display:none; }
.sec-dark .step .step-ic{ position:absolute; top:-52px; left:16px; width:20px; height:20px; color:var(--gold); }
@media (max-width:1080px){ .sec-dark .steps{ padding-top:0; } .sec-dark .steps::before, .sec-dark .step::before, .sec-dark .step .step-ic{ display:none; } }

/* 차트 */
.chart-mock{ margin-top:22px; }
.chart-body{ display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:10px 28px; align-items:center; }
.chart{ width:100%; height:auto; overflow:visible; }
.chart .grid{ stroke:rgba(255,255,255,.07); stroke-width:1; }
.chart .axis-l{ fill:#6f7883; font-size:11px; font-family:inherit; }
.chart .mark{ stroke:rgba(201,169,110,.35); stroke-dasharray:3 4; }
.chart .mark-l{ fill:#c9a96e; font-size:10px; font-weight:700; letter-spacing:.08em; }
.chart .cbar{ fill:rgba(125,151,179,.42); transform-box:fill-box; transform-origin:bottom; }
.chart .area{ fill:url(#none); fill:rgba(201,169,110,.10); stroke:none; }
.chart .line{ fill:none; stroke:#e0c48c; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 4px 10px rgba(201,169,110,.35)); }
.chart .pt{ fill:#0c111a; stroke:#e0c48c; stroke-width:2; }
.chart .pt.end{ fill:#e0c48c; stroke:#fff; stroke-width:2; }
.chart-legend{ grid-column:1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; color:var(--ink-3); font-size:.78rem; }
.lg-line{ width:18px; height:3px; border-radius:2px; background:#e0c48c; }
.lg-bar{ width:10px; height:10px; border-radius:2px; background:rgba(125,151,179,.6); margin-left:10px; }
.chart-kpis{ grid-column:2; grid-row:1 / span 2; list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.chart-kpis li{ padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03); }
.chart-kpis strong{ display:block; color:#fff; font-size:1.6rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.chart-kpis small{ margin-left:3px; color:var(--gold); font-size:.6em; }
.chart-kpis span{ color:var(--ink-3); font-size:.78rem; }
.chip.live .dot{ background:#5fd3a6; box-shadow:0 0 0 0 rgba(95,211,166,.6); animation:livePulse 1.8s ease-out infinite; }
@media (max-width:860px){ .chart-body{ grid-template-columns:1fr; } .chart-kpis{ grid-column:1; grid-row:auto; grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .chart-kpis{ grid-template-columns:1fr; } }

/* ── 움직임 (JS가 html.js 를 붙였을 때만 숨김 상태로 시작 → 처음부터 다 보이는 것이 기본) ── */
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(95,211,166,.55); } 100%{ box-shadow:0 0 0 10px rgba(95,211,166,0); } }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.hx .board{ animation:floatY 7s ease-in-out infinite; }
.hx .chip .dot{ animation:livePulse 2s ease-out infinite; }
.board .bar i{ transition:width 1.1s cubic-bezier(.2,.7,.2,1), background-color .6s ease; }
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); }
html.js .reveal.in{ opacity:1; transform:none; }
html.js [data-chart] .line{ stroke-dasharray:1; stroke-dashoffset:1; }
html.js [data-chart].in .line{ transition:stroke-dashoffset 2.2s cubic-bezier(.4,.1,.2,1) .2s; stroke-dashoffset:0; }
html.js [data-chart] .area{ opacity:0; }
html.js [data-chart].in .area{ transition:opacity 1.2s ease 1.4s; opacity:1; }
html.js [data-chart] .cbar{ transform:scaleY(0); }
html.js [data-chart].in .cbar{ transition:transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i) * 70ms); transform:scaleY(1); }
html.js [data-chart] .pt{ opacity:0; }
html.js [data-chart].in .pt{ transition:opacity .3s ease; transition-delay:calc(.25s + var(--i) * 170ms); opacity:1; }
html.js .sec-dark .steps::before{ transform:scaleX(0); }
html.js .sec-dark .steps.in::before{ transition:transform 1.6s cubic-bezier(.4,.1,.2,1); transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  .hx .board, .hx .chip .dot, .chip.live .dot{ animation:none; }
  html.js .reveal, html.js [data-chart] *, html.js .sec-dark .steps::before{ opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important; transition:none !important; }
}

.hx-stats strong .count, .chart-kpis strong .count{ display:inline; margin:0; font-size:inherit; color:inherit; line-height:inherit; }

/* ── 마케팅 실제 사례 (다광*) ─────────────────────────── */
.case{ margin-top:56px; padding:40px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg,#fbfaf7 0%,#ffffff 100%); box-shadow:var(--lift-1); }
.prose .case{ margin:40px 0; }
.case-head h3{ margin:8px 0 10px; color:var(--head); font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:800; letter-spacing:-.03em; }
.case-head p:not(.eyebrow-gold){ margin:0; max-width:62ch; color:var(--ink-2); font-size:.95rem; }
.case-body{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:36px; margin-top:28px; align-items:start; }
.case-phone{ margin:0; }
.phone{ position:relative; width:100%; max-width:300px; aspect-ratio:9 / 18.5; padding:12px; border-radius:38px; background:#0c111a; box-shadow:0 30px 60px -28px rgba(14,22,32,.55), inset 0 0 0 2px #2a3140; }
.phone::before{ content:""; position:absolute; top:18px; left:50%; width:84px; height:20px; transform:translateX(-50%); border-radius:12px; background:#0c111a; z-index:2; }
.phone-screen{ position:relative; height:100%; overflow:hidden; border-radius:28px; background:#fff; }
.phone-screen img{ width:100%; max-width:none; animation:phoneScroll 46s linear infinite alternate; }
.phone:hover .phone-screen img{ animation-play-state:paused; }
@keyframes phoneScroll{ 0%,4%{ transform:translateY(0); } 100%{ transform:translateY(calc(-100% + 520px)); } }
.case-phone figcaption, .case-ad figcaption{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:12px; color:var(--ink-2); font-size:.84rem; }
.case-phone figcaption strong{ color:var(--head); }
.case-ads{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
.case-ad{ margin:0; }
.case-ad .vid-frame{ position:relative; }
.ai-badge{ position:absolute; top:12px; left:12px; padding:4px 10px; border-radius:999px; background:rgba(12,17,26,.72); color:#e8d5ab; font-size:.72rem; font-weight:700; letter-spacing:.06em; border:1px solid rgba(232,213,171,.35); backdrop-filter:blur(4px); }
.sound-btn{ margin-left:auto; padding:4px 12px; border:1px solid var(--line-2); border-radius:999px; background:#fff; color:var(--ink); font:inherit; font-size:.76rem; cursor:pointer; }
.sound-btn:hover{ border-color:var(--gold); }
.case-facts{ grid-column:1 / -1; list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.case-facts li{ padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.case-facts strong{ display:block; color:var(--head); font-size:1.5rem; font-weight:800; letter-spacing:-.03em; }
.case-facts span{ color:var(--ink-3); font-size:.8rem; }
.case-flow{ padding:20px 22px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.case-flow-title{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 14px; color:var(--head); font-weight:700; font-size:.95rem; }
.case-flow-title span{ color:var(--ink-3); font-weight:500; font-size:.8rem; }
.case-flow ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; counter-reset:none; }
.case-flow li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border-radius:10px; background:#f6f7f9; color:var(--ink); font-size:.82rem; font-weight:600; text-align:center; }
.case-flow li b{ color:var(--gold); font-size:.74rem; font-weight:800; letter-spacing:.06em; }
.case-flow li:not(:last-child)::after{ content:"›"; position:absolute; right:-7px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-weight:700; z-index:1; }
@media (max-width:700px){ .case-flow ol{ grid-template-columns:repeat(4,minmax(0,1fr)); } .case-flow li::after{ display:none; } }
.case-note{ margin:22px 0 0; color:var(--ink-3); font-size:.78rem; }
@media (max-width:900px){ .case{ padding:24px; } .case-body{ grid-template-columns:1fr; } .case-phone{ display:grid; justify-items:center; } }
@media (max-width:560px){ .case-ads{ grid-template-columns:1fr; } .case-facts{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .phone-screen img{ animation:none; } }


/* ═══ 2026-10-02 가독성 — 「글씨가 얇고 흐리다」 대표 의견 ═══════════════
   Pretendard 를 사이트에 직접 넣고(assets/fonts), 본문 굵기·크기·명도를 올린다. */
body{ font-size:17px; font-weight:500; line-height:1.8; letter-spacing:-.01em; }
:root{ --ink:#151a20; --ink-2:#343c46; --ink-3:#5c6570; }
.hx, .hero, .final, .sec-dark, .site-foot, .mock, .vid-frame, .rp-lock{ --ink:#eef1f4; --ink-2:#c3cad2; --ink-3:#8e97a2; }
p, li, td, dd{ font-weight:500; }
h1, h2, h3, .hx-title{ font-weight:800; }
strong, b{ font-weight:700; }
.eyebrow-gold, .area-tag, .axis-tag, .step-no, .why-no, .tag-line, .mock-eyebrow{ font-weight:800; }
/* 너무 작은 글씨 하한 */
.hx-stats span, .chart-kpis span, .case-facts span, .levels em, .axis li, .area li, .fdx-steps em,
.choice td, .choice th, .edu-items em, .quick a, .case-note, .choice-note, .hx-note, figcaption span,
.foot-nav a, .foot-brand p, .foot-biz, .rp-lock > span:last-child{ font-size:.86rem; }
.hx-sub, .sec-head p, .fdx-sub, .split-copy p{ font-size:1.08rem; color:var(--ink-2); }
.why-card p, .axis p, .area p, .step p, .not p, .card p{ font-size:.95rem; line-height:1.8; color:var(--ink-2); }
.prose p, .prose li{ font-size:1.02rem; }
.site-nav a{ font-size:.93rem; font-weight:600; color:var(--ink); }


/* ── 강조 표시 (2026-10-02 「중요한 부분 하이라이트」) ─────────────────
   <mark> = 형광펜, 본문 **굵게** = 금색 밑줄 하이라이트. 어두운 면에서는 금색 글자. */
mark{ background:linear-gradient(transparent 58%, rgba(214,180,110,.42) 58%, rgba(214,180,110,.42) 92%, transparent 92%);
  color:var(--head); font-weight:700; padding:0 .08em; border-radius:2px; }
.hx mark, .hero mark, .final mark, .sec-dark mark, .mock mark{ background:none; color:#ecd7a6; }
.prose strong{ color:var(--head); font-weight:800;
  background:linear-gradient(transparent 62%, rgba(214,180,110,.30) 62%, rgba(214,180,110,.30) 94%, transparent 94%); }
.prose .card strong, .prose table strong, .prose .note strong, .prose .case strong, .prose figure strong, .prose .dfs-cta strong{ background:none; }
.why-card h3, .axis h3, .card h3, .not h3, .step h3{ color:var(--head); }
.faq details p mark{ font-weight:700; }

/* ── 로고 (2026-10-02: 밝은 배경 남색·보라 / 어두운 배경 흰색·금색) ── */
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:40px; height:40px; flex:none; }
.brand-text strong{ display:block; }
.foot-brand strong{ display:flex; align-items:center; gap:10px; }
.foot-brand .brand-mark{ width:34px; height:34px; }
@media (max-width:480px){ .brand-mark{ width:34px; height:34px; } }

/* ── AI 시스템 페이지: 화면 갤러리 · 모델공장 숫자 · 확대 보기 ── */
.shots{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:28px 0; }
.shot{ margin:0; min-width:0; }
.shot .zoom{ display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--lift-1); background:#f1f3f6; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; cursor:zoom-in; }
.shot .zoom:hover{ transform:translateY(-5px); box-shadow:var(--lift-2); }
.shot img{ display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top left; }
.shot figcaption{ margin-top:10px; color:var(--ink-2); font-size:.86rem; line-height:1.6; }
.shot figcaption b{ display:block; color:var(--head); font-size:.94rem; }
.prose .shot figcaption b{ background:none; }
.model-stats{ list-style:none; margin:24px 0 8px; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.model-stats li{ margin:0; padding:16px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--lift-1); }
.model-stats strong{ display:block; color:var(--head); font-size:1.35rem; font-weight:800; letter-spacing:-.03em; line-height:1.15; background:none !important; }
.model-stats .count{ display:inline; font-size:inherit; color:inherit; }
.model-stats small{ margin-left:2px; color:var(--gold); font-size:.62em; }
.model-stats li > span{ display:block; margin-top:4px; color:var(--ink-3); font-size:.8rem; line-height:1.45; }
.model-note{ margin:6px 0 24px !important; color:var(--ink-3) !important; font-size:.8rem !important; }
.lightbox{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; background:rgba(8,12,20,.86); backdrop-filter:blur(4px); cursor:zoom-out; }
.lightbox img{ max-width:min(1600px,100%); max-height:88vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox p{ margin:14px 0 0; color:#dfe3e7; font-size:.9rem; text-align:center; }
@media (max-width:1080px){ .model-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .shots{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .shots{ grid-template-columns:1fr; } .model-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.prose-wide > ul.model-stats, .prose-wide > ol.steps{ max-width:none; }
.prose > ol.steps{ padding-left:0; }
/* 메뉴 9개 — 줄바꿈 금지, 좁은 화면에서는 일찍 햄버거로 */
.site-nav a{ white-space:nowrap; }
@media (max-width:1240px){
  .site-nav a{ padding:10px 11px; font-size:.9rem; }
  .site-nav a.nav-cta{ margin-left:8px; padding:10px 18px; }
}
@media (max-width:1120px){
  .navbtn{ display:block; }
  .site-nav{ position:absolute; top:var(--head-h); left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:10px 20px 20px; display:none; box-shadow:0 20px 40px -20px rgba(14,22,32,.3); }
  #navtoggle:checked ~ .site-nav{ display:flex; }
  .site-nav a{ padding:15px 8px; border-bottom:1px solid var(--line); font-size:.98rem; }
  .site-nav a.on::after{ display:none; }
  .site-nav a.nav-cta{ margin:16px 0 0; text-align:center; }
}
/* 페이지 아래 상담 상자 — 히어로와 같은 남색 면 + 금색 버튼 */
.dfs-cta{
  --ink:#eef1f4; --ink-2:#c3cad2; --ink-3:#8e97a2; --head:#ffffff; --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.2);
  color:var(--ink); border:0; border-radius:22px;
  background:
    radial-gradient(55% 80% at 90% 10%, rgba(201,169,110,.22) 0%, transparent 60%),
    radial-gradient(70% 90% at 0% 0%, rgba(70,105,210,.30) 0%, transparent 62%),
    linear-gradient(165deg,#0b1222 0%,#0d1527 55%,#0a0f19 100%);
}
.prose .dfs-cta h2{ color:#fff; border:0; }
.dfs-cta a.button{ background:linear-gradient(180deg,#e8d5ab 0%,#c9a96e 100%); color:#1a1408 !important; border:0; font-weight:700; }
.dfs-cta a.button:hover{ background:linear-gradient(180deg,#efdfba 0%,#d2b47a 100%); }

/* ═══ 2026-10-02 헤더 2단 — 위 안내 띠 + 메뉴 드롭다운 ═══════════════════
   「헤더가 너무 심플하다」 대표 의견. 학원 사이트의 상단 띠·메가 메뉴 구성을 따른다. */
.topbar{ background:#0e1420; color:#c3cad2; font-size:.8rem; font-weight:500; border-bottom:1px solid rgba(255,255,255,.06); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:40px; }
.topbar a{ color:inherit; text-decoration:none; transition:color .2s ease; }
.topbar-news{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.topbar-tag{ flex:none; padding:3px 10px; border-radius:999px; background:linear-gradient(180deg,#e8d5ab,#c9a96e); color:#1a1408; font-size:.7rem; font-weight:800; }
.topbar-msg{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-go{ color:#e8d5ab; transition:transform .2s ease; }
.topbar-news:hover .topbar-msg{ color:#fff; }
.topbar-news:hover .topbar-go{ transform:translateX(3px); }
.topbar-right{ display:flex; gap:22px; flex:none; }
.topbar-right a:hover{ color:#fff; }
@media (max-width:900px){ .topbar-mail{ display:none; } }
@media (max-width:560px){ .topbar-msg{ display:none; } .topbar-inner{ height:36px; } }

.site-nav{ gap:2px; }
.nav-item{ position:relative; }
.site-nav .nav-link:hover{ color:var(--head); }
.has-sub > .nav-link{
  padding-right:24px !important;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a838e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 9px;
}
.has-sub::after{ content:""; position:absolute; left:-10px; right:-10px; top:100%; height:20px; }

.mega{
  position:absolute; top:calc(100% + 16px); left:50%; z-index:60;
  display:grid; grid-template-columns:210px minmax(0,1fr); width:640px;
  background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 34px 70px -28px rgba(14,22,32,.42), 0 2px 6px rgba(14,22,32,.05);
  opacity:0; visibility:hidden; transform:translate(-50%,8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.has-sub:hover > .mega, .has-sub:focus-within > .mega{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.mega-intro{ display:flex; flex-direction:column; padding:26px 22px; background:radial-gradient(120% 90% at 0% 0%, rgba(201,169,110,.18), transparent 60%), linear-gradient(160deg,#18233a,#0e1420); color:#c3cad2; }
.mega-title{ margin:0 0 10px; color:#fff; font-size:1.04rem; font-weight:800; letter-spacing:-.02em; white-space:normal; }
.mega-desc{ margin:0 0 20px; font-size:.82rem; line-height:1.65; white-space:normal; }
.site-nav .mega a{ padding:0; white-space:normal; font-size:inherit; font-weight:inherit; color:inherit; background:none; border:0; border-radius:0; }
.site-nav .mega a::after{ display:none; }
.site-nav .mega-all{ margin-top:auto; color:#e8d5ab; font-size:.8rem; font-weight:700; }
.site-nav .mega-all:hover{ color:#fff; }
.mega-list{ list-style:none; margin:0; padding:12px; }
.site-nav .mega-list a{ display:block; padding:12px 14px; border-radius:12px; transition:background .15s ease; }
.site-nav .mega-list a:hover, .site-nav .mega-list a.on{ background:#f4f6f9; }
.mega-list strong{ display:block; color:var(--head); font-size:.93rem; font-weight:700; letter-spacing:-.01em; }
.mega-list span{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; margin-top:3px; color:var(--ink-3); font-size:.78rem; line-height:1.5; }

@media (max-width:1120px){
  .nav-item{ width:100%; }
  .site-nav .nav-link{ display:block; }
  .has-sub > .nav-link{ background:none; }
  .has-sub::after{ display:none; }
  .mega{ position:static; display:block; width:auto; transform:none; opacity:1; visibility:visible;
         border:0; border-radius:0; box-shadow:none; background:transparent; }
  .mega-intro{ display:none; }
  .mega-list{ padding:0 0 8px 14px; }
  .site-nav .mega-list a{ padding:9px 8px; border-bottom:0; }
  .mega-list span{ display:none; }
  .mega-list strong{ font-size:.9rem; font-weight:600; color:var(--ink-2); }
}


/* ═══ 2026-10-02 대표 의견 — 굵은 글씨 크게 · 마지막 상담 상자 압축 ═════ */
.prose strong, .prose td strong, .card p strong{ font-size:1.07em; font-weight:800; color:var(--head); }

/* 상담 상자: 문구 왼쪽, 버튼 오른쪽 — 위아래 빈 공간을 줄인다 */
.dfs-cta{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 40px;
  padding:38px 44px; margin:64px 0 0; text-align:left;
}
.dfs-cta h2{ grid-column:1; margin:0 !important; padding:0; font-size:1.42rem; }
.dfs-cta p{ grid-column:1; margin:0 !important; max-width:none; }
.dfs-cta a.button{ grid-column:2; grid-row:1 / span 2; white-space:nowrap; padding:16px 34px; }
.prose:has(> .dfs-cta:last-child){ padding-bottom:72px; }
@media (max-width:700px){
  .dfs-cta{ grid-template-columns:1fr; text-align:center; padding:30px 22px; gap:10px; }
  .dfs-cta a.button{ grid-column:1; grid-row:auto; justify-self:center; margin-top:10px; }
}

/* 묶음 메뉴 — 하위 그룹이 둘이면 넓게 두 칸 */
.mega--wide{ width:860px; grid-template-columns:220px minmax(0,1fr); }
.mega-groups{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
.mega-group{ min-width:0; }
.mega--wide .mega-group + .mega-group{ border-left:1px solid var(--line); }
.site-nav .mega-gtitle{ display:block; margin:16px 26px 0; padding-bottom:8px; border-bottom:1px solid var(--line); color:var(--gold-dark,#a27f3f); font-size:.74rem; font-weight:800; letter-spacing:.08em; }
.site-nav .mega-gtitle:hover{ color:var(--head); }
.mega--wide .mega-list{ padding:8px 12px 12px; }
/* 오른쪽 끝 메뉴는 화면 밖으로 나가지 않게 오른쪽 정렬 */
.nav-item:nth-last-child(-n+3) > .mega--wide{ left:auto; right:-120px; transform:translate(0,8px); }
.nav-item:nth-last-child(-n+3).has-sub:hover > .mega--wide, .nav-item:nth-last-child(-n+3).has-sub:focus-within > .mega--wide{ transform:translate(0,0); }
@media (max-width:1120px){
  .mega-groups{ grid-auto-flow:row; }
  .mega--wide .mega-group + .mega-group{ border-left:0; }
  .site-nav .mega-gtitle{ margin:6px 0 0 14px; border:0; padding:0; }
}

/* 상담 문의 — 「이런 문의를 주로 받습니다」 분야별 블록 */
.ask-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:16px; margin:24px 0 8px; align-items:stretch; }
.ask{ display:flex; flex-direction:column; padding:24px 24px 20px; border:1px solid var(--line); border-radius:var(--r-card,18px); background:#fff; box-shadow:0 14px 30px -24px rgba(14,22,32,.35); border-top:3px solid var(--line); }
.ask--mfg{ border-top-color:#4669d2; } .ask--mkt{ border-top-color:#6f9c96; } .ask--edu{ border-top-color:var(--gold); }
.ask-tag{ margin:0 0 12px !important; color:var(--head); font-size:1rem; font-weight:800; letter-spacing:-.02em; }
.ask ul{ list-style:none; margin:0 0 18px; padding:0; }
.ask li{ position:relative; margin:0; padding:9px 0 9px 22px; border-bottom:1px dashed var(--line); color:var(--ink); font-size:.92rem; line-height:1.55; }
.ask li:last-child{ border-bottom:0; }
.ask li::before{ content:"✓"; position:absolute; left:0; top:9px; color:var(--gold); font-weight:800; }
.prose .ask-link{ margin-top:auto; align-self:flex-start; border:0; color:var(--head); font-size:.86rem; font-weight:700; }
.prose .ask-link:hover{ color:var(--gold); }
.prose > .ask-grid{ max-width:none; }
@media (max-width:900px){ .ask-grid{ grid-template-columns:1fr; } }
.ask-grid{ grid-template-columns:1fr 1fr; }
.ask--mfg{ grid-column:1 / -1; }
.ask--mfg ul{ columns:2; column-gap:28px; }
.ask--mfg li{ break-inside:avoid; }
@media (max-width:700px){ .ask-grid{ grid-template-columns:1fr; } .ask--mfg ul{ columns:1; } }
.ask .ask-link + .ask-link{ margin-top:6px; }

/* ═══ 2026-10-02 흰색·곤색 띠 + 넓은 본문 ═══════════════════════════════
   본문을 h2 단위 띠로 잘라(빌더 to_bands) 흰색·곤색을 번갈아 깐다. 좌우 여백을 줄이려 폭을 1180으로. */
.band{ position:relative; }
.band--light{ background:#fff; }
.band--light + .band--light{ border-top:1px solid var(--line); }
.band--navy{
  --ink:#e8ecf1; --ink-2:#c6cdd6; --ink-3:#9aa4af; --head:#ffffff;
  --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.24); --bg-1:rgba(255,255,255,.05);
  color:var(--ink);
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(201,169,110,.12) 0%, transparent 60%),
    radial-gradient(70% 100% at 0% 100%, rgba(70,105,210,.20) 0%, transparent 62%),
    linear-gradient(170deg,#0e1830 0%,#0b1324 100%);
}
.prose.prose-band{ max-width:var(--wrap); padding:84px 32px; }
.prose-band > p, .prose-band > ul, .prose-band > ol, .prose-band > blockquote, .prose-band > table{ max-width:none; }
.prose-band > h2:first-child{ margin-top:0; padding-top:0; border-top:0; font-size:1.7rem; }
.prose-band > h2:first-child::before{ content:""; display:block; width:36px; height:3px; margin-bottom:18px; border-radius:2px; background:var(--gold); }
.prose-title{ padding-bottom:0 !important; }
.bands > .band:first-child .prose-band{ padding-top:72px; }
.bands > .band:last-child .prose-band{ padding-bottom:96px; }

/* 곤색 띠 안의 부품 */
.band--navy .prose strong{ background:none; color:#f3e2bb; }
.band--navy .prose a{ color:#fff; border-bottom-color:rgba(255,255,255,.35); }
.band--navy .card, .band--navy .step, .band--navy .why-card, .band--navy .not{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); box-shadow:0 20px 40px -30px rgba(0,0,0,.6); }
.band--navy .card p, .band--navy .step p{ color:var(--ink-2); }
.band--navy .card .tag-line, .band--navy .step-no{ color:#e8d5ab; }
.band--navy a.card:hover{ border-color:rgba(232,213,171,.5); background:rgba(255,255,255,.09); }
.band--navy .prose table, .band--navy table{ background:transparent; }
.band--navy .note{ background:rgba(232,213,171,.08); border-color:rgba(232,213,171,.3); color:var(--ink); }
.band--navy .note strong{ color:#f3e2bb; }
.band--navy blockquote{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:var(--ink-2); }
.band--navy .dfs-cta{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); box-shadow:none; }
.band--navy code{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:var(--ink); }
/* 흰 면이 필요한 부품은 곤색 띠 안에서도 밝은 글자색을 되돌린다 */
.band--navy .case, .band--navy .fdx-report, .band--navy .choice-wrap, .band--navy .ask{
  --ink:#151a20; --ink-2:#343c46; --ink-3:#5c6570; --head:#0e1217; --line:rgba(14,22,32,.1); --line-2:rgba(14,22,32,.18);
  color:var(--ink);
}
.band--navy .case strong{ color:var(--head); }

@media (max-width:640px){ .prose.prose-band{ padding:60px 20px; } .prose-band > h2:first-child{ font-size:1.42rem; } }

/* 메뉴 드롭다운 — 한 목록을 두 칸으로, 사례 표시 */
.mega--wide .mega-group:only-child .mega-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 6px; }
.mega-tag{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:rgba(201,169,110,.16); color:#8a6a2f; font-style:normal; font-size:.66rem; font-weight:800; vertical-align:2px; }
@media (max-width:1120px){ .mega--wide .mega-group:only-child .mega-list{ display:block; } }

/* ═══ 2026-10-02 히어로 사진 — 오른쪽에 대표·현장 사진, 아래에 AI 제작 안내 ═══ */
.hero-split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; }
.hero-copy{ min-width:0; }
.hero--photo{ padding-top:96px; padding-bottom:88px; }
.hero-photo{ margin:0; position:relative; }
.hero-photo img{ display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:22px;
  box-shadow:0 40px 80px -36px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08); }
.hero-photo.is-portrait{ justify-self:center; width:min(100%,380px); }
.hero-photo.is-portrait img{ aspect-ratio:4 / 5; object-position:center 20%; }
.hero-photo figcaption{ margin-top:12px; color:rgba(226,232,240,.62); font-size:.74rem; font-weight:500; text-align:right; }
.hero-photo::before{ content:""; position:absolute; inset:-14px -14px auto auto; width:90px; height:90px; border-top:2px solid rgba(232,213,171,.55); border-right:2px solid rgba(232,213,171,.55); border-radius:0 22px 0 0; pointer-events:none; }
@media (max-width:1000px){
  .hero-split{ grid-template-columns:1fr; gap:36px; }
  .hero-photo, .hero-photo.is-portrait{ justify-self:stretch; width:auto; max-width:560px; }
  .hero-photo.is-portrait{ max-width:340px; }
  .hero-photo::before{ display:none; }
}

/* 금색 버튼은 어느 띠에서든 진한 글씨 (본문 링크 색 규칙에 덮이지 않게) */
.prose a.btn-gold, a.btn-gold{ color:#15120b !important; border-bottom:0 !important; }
.prose a.btn-ghost{ border-bottom:1px solid var(--line-2); }

/* ═══ 2026-10-02 「글씨가 아직 작다」 — 본문 한 단계 크게 ═══════════════ */
.prose p, .prose li, .prose-band > p, .prose-band li{ font-size:18.5px; line-height:1.85; }
.prose .card p, .card p, .why-card p, .step p, .not p, .ask li{ font-size:17px; line-height:1.8; }
.prose table, .prose td, .prose th{ font-size:16.5px; }
.prose th{ font-size:15px; }
.prose-band > h2, .prose-band > h2:first-child, .prose h2{ font-size:32px; letter-spacing:-.03em; }
.prose h3, .card h3, .step h3{ font-size:21px; }
.hero-sub, .hx-sub{ font-size:19px; line-height:1.8; }
.site-nav .nav-link{ font-size:16.5px; }
.mega-list strong{ font-size:16px; } .mega-list span{ font-size:13.5px; }
.note{ font-size:17px; }
figcaption span, .case-flow li{ font-size:15px; }
@media (max-width:640px){
  .prose p, .prose li, .prose-band > p, .prose-band li{ font-size:17px; }
  .prose-band > h2, .prose-band > h2:first-child, .prose h2{ font-size:26px; }
  .prose table, .prose td{ font-size:15px; }
  .hero-sub, .hx-sub{ font-size:17px; }
}

/* 무료 진단 — 「진단 후 받으시는 것」 단순 카드 (흐린 예시 보고서 대체) */
.fdx-get{ padding:34px 32px 28px; background:#fff; border:1px solid rgba(14,22,32,.08); border-radius:22px; box-shadow:0 40px 80px -40px rgba(0,0,0,.55); filter:none; }
.fdx-get-title{ margin:0 0 18px !important; color:#0e1217; font-size:20px !important; font-weight:800; letter-spacing:-.02em; }
.fdx-get-list{ list-style:none; margin:0; padding:0; }
.fdx-get-list li{ display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-top:1px solid rgba(14,22,32,.08); font-size:inherit !important; }
.fdx-get-list b{ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:linear-gradient(180deg,#e8d5ab,#c9a96e); color:#1a1408; font-size:14px; font-weight:800; }
.fdx-get-list strong{ display:block; color:#0e1217; font-size:18px; font-weight:800; background:none !important; }
.fdx-get-list span{ display:block; margin-top:3px; color:#4a535e; font-size:15.5px; line-height:1.6; }
.fdx-get-foot{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0 !important; }
.fdx-get-foot span{ padding:6px 12px; border-radius:999px; background:#f3f5f8; color:#343c46; font-size:13.5px !important; font-weight:700; }
.prose .fdx-report.fdx-get, .band--navy .prose .fdx-get{ background:#fff !important; opacity:1; filter:none; overflow:visible; }
.band--navy .prose .fdx-get-list strong, .prose .fdx-get-list strong{ color:#0e1217 !important; background:none !important; font-size:18px; }
.band--navy .prose .fdx-get-title{ color:#0e1217 !important; }
.band--navy .prose .fdx-get-list span{ color:#4a535e !important; }

/* 무료 진단 — 실제 진단 보고서 미리보기 (업체명·고객사명 가림) */
.fdx-rep{ padding:26px 26px 22px; background:#fff !important; border:1px solid rgba(14,22,32,.08); border-radius:22px; box-shadow:0 40px 80px -40px rgba(0,0,0,.55); }
.fdx-get-title span{ margin-left:8px; color:#7a838e; font-size:13px; font-weight:600; }
.fdx-rep figure{ margin:0; }
.fdx-rep a.zoom{ display:block; border:0 !important; cursor:zoom-in; }
.fdx-rep img{ display:block; width:100%; border:1px solid rgba(14,22,32,.12); border-radius:10px; background:#fff; transition:transform .2s ease, box-shadow .2s ease; }
.fdx-rep a.zoom:hover img{ transform:translateY(-2px); box-shadow:0 18px 30px -18px rgba(14,22,32,.45); }
.fdx-rep-main img{ height:360px; object-fit:cover; object-position:top; }
.fdx-rep-pages{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.fdx-rep-pages img{ height:150px; object-fit:cover; object-position:top; }
.fdx-rep figcaption{ margin-top:6px; color:#5c6570; font-size:13px !important; font-weight:600; }
.band--navy .prose .fdx-rep figcaption{ color:#5c6570 !important; }
/* 진단 보고서 — 흐리게 + 자물쇠 안내 (이미지 파일 자체를 흐리게 저장) */
.fdx-rep{ position:relative; }
.fdx-rep img{ cursor:default; }
.fdx-rep-lock{ position:absolute; left:26px; right:26px; top:64px; bottom:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
  background:radial-gradient(60% 50% at 50% 50%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.35) 70%, transparent 100%); border-radius:12px; pointer-events:none; }
.fdx-rep-lock .rp-lock-ic{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:linear-gradient(180deg,#e8d5ab,#c9a96e); color:#1a1408; box-shadow:0 12px 24px -12px rgba(0,0,0,.4); }
.fdx-rep-lock strong{ color:#0e1217 !important; font-size:19px; font-weight:800; background:none !important; }
.fdx-rep-lock > span:last-child{ color:#4a535e; font-size:13.5px; font-weight:600; }
.fdx-rep figcaption{ display:none; }
/* 자물쇠 안내 — 보고서를 덮지 않고 1쪽 아래에 작은 띠로 */
.fdx-rep-lock{ inset:auto 40px auto 40px; top:auto; bottom:226px; flex-direction:row; gap:10px; padding:10px 16px; border-radius:999px;
  background:rgba(14,18,28,.82); backdrop-filter:blur(2px); box-shadow:0 12px 24px -12px rgba(0,0,0,.5); }
.fdx-rep-lock .rp-lock-ic{ width:30px; height:30px; flex:none; box-shadow:none; }
.fdx-rep-lock .rp-lock-ic svg{ width:16px; height:16px; }
.fdx-rep-lock strong{ color:#fff !important; font-size:15px; }
.fdx-rep-lock > span:last-child{ display:none; }
@media (max-width:560px){ .fdx-rep-lock{ left:20px; right:20px; } .fdx-rep-lock strong{ font-size:13.5px; } }

/* 상담 문의 — 폼 대신 이메일·전화 (2026-10-02 대표 결정 B) */
.reach{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0 12px; }
.prose a.reach-card{ display:flex; flex-direction:column; gap:6px; padding:30px 30px 26px; border:1px solid var(--line); border-radius:22px; background:#fff;
  box-shadow:0 24px 50px -32px rgba(14,22,32,.45); text-decoration:none; border-bottom:1px solid var(--line); transition:transform .2s ease, box-shadow .2s ease; }
.prose a.reach-card:hover{ transform:translateY(-3px); box-shadow:0 30px 60px -30px rgba(14,22,32,.5); }
.reach-ic{ display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:linear-gradient(180deg,#e8d5ab,#c9a96e); color:#1a1408; font-size:22px; margin-bottom:8px; }
.reach-k{ color:#5c6570; font-size:15px; font-weight:700; }
.prose .reach-card strong{ color:#0e1217 !important; background:none !important; font-size:24px !important; font-weight:800; letter-spacing:-.02em; word-break:break-all; }
.reach-d{ color:#5c6570; font-size:15px; line-height:1.6; }
.reach-addr{ color:var(--ink-2); font-size:16px !important; }
.band--navy .prose a.reach-card{ border-color:rgba(255,255,255,.12); }
@media (max-width:760px){ .reach{ grid-template-columns:1fr; } .prose .reach-card strong{ font-size:20px !important; } }

/* 분야별 전체 보기 (hub) */
.hub-count{ margin-left:10px; padding:3px 12px; border-radius:999px; background:#f3f5f8; color:#5c6570; font-size:15px; font-weight:700; vertical-align:6px; }
.hub-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:28px; }
.prose a.hub-card{ display:flex; flex-direction:column; gap:8px; padding:26px 26px 22px; border:1px solid rgba(14,22,32,.1); border-radius:20px; background:#fff;
  text-decoration:none; box-shadow:0 22px 44px -32px rgba(14,22,32,.45); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.prose a.hub-card:hover{ transform:translateY(-3px); border-color:rgba(201,169,110,.6); box-shadow:0 30px 60px -32px rgba(14,22,32,.5); }
.prose a.hub-card.is-case{ background:linear-gradient(180deg,#fffaf0,#fff); border-color:rgba(201,169,110,.35); }
.hub-no{ display:flex; align-items:center; gap:8px; color:#a8843f; font-size:13px; font-weight:800; letter-spacing:.08em; }
.hub-no em{ padding:2px 9px; border-radius:999px; background:rgba(201,169,110,.18); color:#8a6a2f; font-style:normal; font-size:12px; letter-spacing:0; }
.prose .hub-card strong{ color:#0e1217 !important; background:none !important; font-size:21px !important; font-weight:800; letter-spacing:-.025em; line-height:1.35; }
.hub-sub{ color:#1c2127; font-size:16px; font-weight:700; line-height:1.5; }
.hub-desc{ color:#4a535e; font-size:15.5px; line-height:1.75; }
.hub-go{ margin-top:auto; padding-top:8px; color:#0e1217; font-size:15px; font-weight:800; }
.band--navy .prose .dfs-cta{ margin-top:0; }
@media (max-width:1080px){ .hub-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .hub-grid{ grid-template-columns:1fr; } }

/* 드롭다운 「전체 보기」 — 작은 글자 링크 → 금색 버튼 */
.site-nav .mega-all{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:stretch;
  margin-top:auto; padding:14px 18px; border-radius:999px;
  background:linear-gradient(180deg,#e8d5ab 0%,#c9a96e 100%); color:#1a1408 !important;
  font-size:16px !important; font-weight:800; letter-spacing:-.01em; white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(201,169,110,.7); transition:transform .15s ease, box-shadow .15s ease;
}
.site-nav .mega-all:hover{ color:#1a1408 !important; transform:translateY(-1px); box-shadow:0 14px 28px -12px rgba(201,169,110,.85); }
.mega-desc{ font-size:14px; }
.mega-title{ font-size:18px !important; }
/* 사례 카드 — 실제 화면 썸네일 */
.prose a.hub-card.has-img{ padding-top:0; overflow:hidden; }
.hub-img{ display:block; margin:0 -26px 14px; height:190px; overflow:hidden; background:#0e1420; border-bottom:1px solid rgba(14,22,32,.08); }
.hub-img img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .35s ease; }
.prose a.hub-card:hover .hub-img img{ transform:scale(1.04); }
.hub-cat{ align-self:flex-start; padding:3px 10px; border-radius:999px; background:#eef1f6; color:#3c4a63; font-size:12.5px; font-weight:800; }
.mega-tag{ display:none; }  /* 사례는 「사례」 메뉴에만 있으므로 표시 불필요 */

/* ═══ 사례 강조 — 상단 메뉴 금색 알약 + 드롭다운 항목 오른쪽 「사례」 표시 ═══ */
.site-nav .nav-link.nav-hl{ color:#8a6a2f; background:rgba(201,169,110,.16); border-radius:999px; font-weight:800; }
.site-nav .nav-link.nav-hl:hover{ color:#5e4719; background:rgba(201,169,110,.26); }
.site-nav .nav-link.nav-hl.on::after{ display:none; }
.has-sub > .nav-link.nav-hl{ background-color:rgba(201,169,110,.16); }

.mega-tag{ display:inline-block !important; position:absolute; right:14px; top:50%; transform:translateY(-50%); margin:0;
  padding:4px 12px; border-radius:999px; background:linear-gradient(180deg,#e8d5ab,#c9a96e); color:#1a1408;
  font-style:normal; font-size:12.5px; font-weight:800; letter-spacing:.02em; box-shadow:0 6px 14px -8px rgba(201,169,110,.9); }
.site-nav .mega-list a{ position:relative; }
.site-nav .mega-list a.is-case{ padding-right:74px; background:linear-gradient(90deg,#fffaf0 0%,#fff 100%); border-left:3px solid #c9a96e; }
.site-nav .mega-list a.is-case:hover{ background:linear-gradient(90deg,#fdf1d9 0%,#fffaf0 100%); }
@media (max-width:1120px){
  .site-nav .nav-link.nav-hl{ border-radius:10px; }
  .mega-tag{ position:static; transform:none; margin-left:8px; padding:2px 9px; font-size:11.5px; }
  .site-nav .mega-list a.is-case{ padding-right:8px; }
}
/* 오른쪽 끝 메뉴(사례·소개)의 드롭다운은 오른쪽 정렬 — 화면 밖으로 나가지 않게 */
@media (min-width:1121px){
  .nav-item:nth-last-child(-n+3) > .mega:not(.mega--wide){ left:auto; right:-60px; transform:translate(0,8px); }
  .nav-item:nth-last-child(-n+3).has-sub:hover > .mega:not(.mega--wide),
  .nav-item:nth-last-child(-n+3).has-sub:focus-within > .mega:not(.mega--wide){ transform:translate(0,0); }
}

/* 소개 — 주요 활동 블록 */
.acts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:20px 0 8px; }
.act{ display:flex; flex-direction:column; gap:8px; padding:24px 22px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.band--light .act{ background:#fff; border-color:rgba(14,22,32,.1); box-shadow:0 18px 36px -28px rgba(14,22,32,.4); }
.act-ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:linear-gradient(180deg,#e8d5ab,#c9a96e); font-size:22px; }
.prose .act strong{ background:none !important; color:var(--head) !important; font-size:19px !important; font-weight:800; }
.prose .act p{ margin:0; color:var(--ink-2); font-size:16px !important; line-height:1.65; }
@media (max-width:1000px){ .acts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .acts{ grid-template-columns:1fr; } }

/* 드롭다운 「전체 보기」 — 목록 블록 바로 아래 넓은 금색 버튼 (.mega a 규칙보다 우선) */
.mega-groups{ grid-auto-flow:row; }
.mega--wide .mega-groups{ grid-template-columns:repeat(var(--gcols,1),minmax(0,1fr)); }
.site-nav .mega a.mega-all--bottom{
  grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:10px;
  margin:4px 12px 14px; padding:14px 18px; border-radius:14px;
  background:linear-gradient(180deg,#e8d5ab 0%,#c9a96e 100%); color:#1a1408 !important;
  font-size:16px !important; font-weight:800; white-space:nowrap;
  box-shadow:0 12px 26px -14px rgba(201,169,110,.9); transition:transform .15s ease, box-shadow .15s ease;
}
.site-nav .mega a.mega-all--bottom:hover{ transform:translateY(-1px); box-shadow:0 16px 30px -14px rgba(201,169,110,1); }
@media (max-width:1120px){ .site-nav .mega a.mega-all--bottom{ margin:4px 0 10px 14px; padding:11px 14px; font-size:15px !important; } }
/* 버튼이 같은 칸에 들어오면서 :only-child 가 깨지므로 넓은 드롭다운 목록은 항상 두 칸 */
@media (min-width:1121px){ .mega--wide .mega-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 6px; } }

/* ═══ 전체 보기 — 장(章)으로 이어 붙인 긴 페이지 ═══════════════════════ */
.hub-toc{ position:sticky; top:var(--head-h,76px); z-index:40; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid rgba(14,22,32,.08); box-shadow:0 8px 20px -18px rgba(14,22,32,.5); }
.hub-toc-inner{ display:flex; gap:8px; overflow-x:auto; padding-top:10px; padding-bottom:10px; scrollbar-width:none; }
.hub-toc-inner::-webkit-scrollbar{ display:none; }
.hub-toc a{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1px solid rgba(14,22,32,.12); background:#fff; color:#1c2127; font-size:14.5px; font-weight:700; text-decoration:none; white-space:nowrap; }
.hub-toc a b{ color:#a8843f; font-size:12.5px; }
.hub-toc a:hover{ border-color:#c9a96e; background:#fffaf0; }
.chapter{ scroll-margin-top:140px; }
.chapter-head{ background:radial-gradient(60% 120% at 100% 0%, rgba(201,169,110,.22), transparent 60%), linear-gradient(160deg,#16213a,#0b1324); color:#e8ecf1; border-top:3px solid #c9a96e; }
.chapter-inner{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center; padding-top:56px; padding-bottom:56px; }
.chapter-no{ display:inline-block; margin-bottom:12px; color:#e8d5ab; font-size:14px; font-weight:800; letter-spacing:.12em; }
.chapter-head h2{ margin:0; color:#fff; font-size:38px; font-weight:800; letter-spacing:-.035em; line-height:1.25; }
.chapter-head p{ margin:12px 0 0; color:#c6cdd6; font-size:19px; line-height:1.7; }
.chapter-link{ display:inline-block; margin-top:18px; color:#e8d5ab; font-size:15.5px; font-weight:800; text-decoration:none; border-bottom:1px solid rgba(232,213,171,.4); }
.chapter-link:hover{ color:#fff; }
.chapter-img{ width:320px; height:200px; object-fit:cover; border-radius:18px; box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); }
.chapter .bands > .band:first-child .prose-band, .chapter > .band:first-of-type .prose-band{ padding-top:64px; }
@media (max-width:900px){ .chapter-inner{ grid-template-columns:1fr; } .chapter-img{ width:100%; height:180px; } .chapter-head h2{ font-size:28px; } }

/* ═══ 휴대폰 메뉴 — 화면보다 길면 메뉴 상자 안에서 스크롤 (2026-10-02 「탭 스크롤이 안 된다」) ═══ */
@media (max-width:1120px){
  .site-nav{
    max-height:calc(100vh - var(--head-h,76px) - 40px);
    max-height:calc(100dvh - var(--head-h,76px) - 40px);
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    padding-bottom:28px;
  }
  /* 메뉴가 열려 있는 동안 뒤 페이지는 고정 */
  body:has(#navtoggle:checked){ overflow:hidden; }
}

/* 휴대폰 메뉴 — 넓은 드롭다운(860px)이 그대로 남아 옆으로 밀리던 문제. 화면 폭에 맞추고 가로 스크롤 금지 */
@media (max-width:1120px){
  .site-nav{ overflow-x:hidden; }
  .site-nav .mega, .site-nav .mega--wide,
  .nav-item:nth-last-child(-n+3) > .mega, .nav-item:nth-last-child(-n+3) > .mega--wide{
    position:static !important; width:auto !important; max-width:100%; left:auto !important; right:auto !important;
    transform:none !important; display:block !important; box-shadow:none; border:0; background:transparent;
  }
  .site-nav .mega-groups, .site-nav .mega-list{ display:block !important; width:auto; }
  .site-nav .mega-list a, .site-nav .nav-link{ white-space:normal; }
  .site-nav .mega a.mega-all--bottom{ display:flex; width:auto; margin:6px 0 12px 14px; white-space:normal; text-align:center; }
}

/* 문의 폼 (SSL 발급 후 FORM_ON) — 흰 카드 */
.form-wrap{ margin:28px 0 8px; padding:32px 32px 26px; border:1px solid rgba(14,22,32,.1); border-radius:22px; background:#fff; box-shadow:0 24px 50px -32px rgba(14,22,32,.45); }
.form-title{ margin:0 0 6px !important; color:#0e1217; font-size:22px !important; font-weight:800; }
.form-title span{ margin-left:8px; color:#5c6570; font-size:15px; font-weight:600; }
.form-wrap .dfs-form label{ color:#343c46; font-size:15px; letter-spacing:0; }
.form-wrap .dfs-form input[type=text], .form-wrap .dfs-form input[type=tel], .form-wrap .dfs-form input[type=email],
.form-wrap .dfs-form select, .form-wrap .dfs-form textarea{ background:#f7f8fa; border:1px solid rgba(14,22,32,.14); border-radius:12px; color:#151a20; font-size:16.5px; }
.form-wrap .dfs-form input:focus, .form-wrap .dfs-form select:focus, .form-wrap .dfs-form textarea:focus{ background:#fff; border-color:#c9a96e; }
.form-wrap .dfs-form .consent{ background:#f7f8fa; border-color:rgba(14,22,32,.1); color:#4a535e; border-radius:14px; }
.form-wrap .dfs-form .consent label{ color:#151a20; }
.form-wrap .dfs-form button{ background:linear-gradient(180deg,#e8d5ab,#c9a96e); color:#1a1408; border:0; border-radius:999px; font-weight:800; font-size:17px; padding:16px 44px; }
.form-wrap .formnote{ color:#5c6570; }