@charset "UTF-8";
/* ===========================================================
   GROUND AI — Design System
   Font : Paperlogy (페이퍼로지)
   =========================================================== */

/* ---------- 1. Webfont : Paperlogy ---------- */
@font-face{font-family:'Paperlogy';font-weight:100;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');}
@font-face{font-family:'Paperlogy';font-weight:200;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');}
@font-face{font-family:'Paperlogy';font-weight:300;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');}
@font-face{font-family:'Paperlogy';font-weight:400;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');}
@font-face{font-family:'Paperlogy';font-weight:500;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');}
@font-face{font-family:'Paperlogy';font-weight:600;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');}
@font-face{font-family:'Paperlogy';font-weight:700;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');}
@font-face{font-family:'Paperlogy';font-weight:800;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');}
@font-face{font-family:'Paperlogy';font-weight:900;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');}

/* ---------- 2. Tokens ---------- */
:root{
  --bg:#070809;
  --bg-soft:#0C0E10;
  --surface:#101315;
  --surface-2:#161A1D;
  --surface-3:#1D2226;

  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --fg:#F3F6F4;
  --fg-2:#AEB7B2;
  --fg-3:#828B86;

  /* 강조색 세 가지 — 변수 이름은 예전 것을 그대로 쓰고 값만 바꿨다.
     --lime  = 주 강조(민트그린) · 핵심 문구, 버튼, 로고
     --gold  = 보조 강조(테라코타) · 고객이 갖게 되는 것, 시장 흐름
     --amber = 구분 타이틀(앰버) · 모든 섹션의 머리 라벨 */
  --lime:#00D992;
  --lime-deep:#10B981;
  --lime-soft:rgba(0,217,146,.12);
  --gold:#D97757;
  --gold-soft:rgba(217,119,87,.12);
  --amber:#D97959;
  --amber-soft:rgba(217,121,89,.12);
  --danger:#E0574C;

  /* 같은 색을 반투명하게 겹칠 때 쓰는 채널값.
     밝은 모드에서는 이 일곱 개만 갈아끼우면 겹친 색이 전부 따라온다. */
  --bg-rgb:7 8 9;
  --ink-rgb:255 255 255;
  --shadow-rgb:0 0 0;
  --acc-rgb:0 217 146;
  --gold-rgb:217 119 87;
  --amber-rgb:217 121 89;
  --danger-rgb:224 87 76;

  --container:1280px;
  --radius-s:12px;
  --radius:18px;
  --radius-l:26px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:76px;
}

/* ---------- 2-1. 밝은 모드 ---------- */
/* <html data-theme="light"> 이면 지면이 뒤집힌다.
   값은 이미 검증해 둔 .section--light 것을 그대로 쓴다. */
:root[data-theme="light"]{
  /* 상자로 나누지 않고 선으로 나눈다. 그래서 지면과 면의 색 차이를 좁히고,
     대신 선을 눈에 보이게 만든다. 순백은 쓰지 않는다. */
  --bg:#F5F6F3;
  --bg-soft:#EEF0EB;
  --surface:#FAFBF8;
  --surface-2:#F1F2EE;
  --surface-3:#EAECE6;

  --line:rgba(14,20,19,.28);
  --line-2:rgba(14,20,19,.52);

  --fg:#0E1413;
  --fg-2:#141414;
  --fg-3:#525A57;

  --lime:#00704B;
  --lime-deep:#005A3D;
  --lime-soft:rgba(0,112,75,.10);
  --gold:#A64626;
  --gold-soft:rgba(166,70,38,.10);
  --amber:#AF4928;
  --amber-soft:rgba(175,73,40,.10);
  --danger:#A32A1E;

  --bg-rgb:245 246 243;
  --ink-rgb:14 20 19;
  --shadow-rgb:0 0 0;
  --acc-rgb:0 112 75;
  --gold-rgb:166 70 38;
  --amber-rgb:175 73 40;
  --danger-rgb:163 42 30;

  color-scheme:light;
}
/* 밝은 지면에서는 그림자가 훨씬 옅어야 자연스럽다 */
:root[data-theme="light"]{--shadow-strength:.14;}
:root{--shadow-strength:1;}

/* 홈 화면에서 뒤집히던 구역은 반대로 뒤집는다 —
   밝은 모드에서는 이쪽이 어두운 구역이 된다. */
:root[data-theme="light"] .section--light{
  --bg:#070809;
  --bg-soft:#0C0E10;
  --surface:#101315;
  --surface-2:#161A1D;
  --surface-3:#1D2226;

  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --fg:#F3F6F4;
  --fg-2:#AEB7B2;
  --fg-3:#828B86;

  --lime:#00D992;
  --lime-deep:#10B981;
  --lime-soft:rgba(0,217,146,.12);
  --gold:#D97757;
  --gold-soft:rgba(217,119,87,.12);
  --amber:#D97959;
  --amber-soft:rgba(217,121,89,.12);
  --danger:#E0574C;

  --bg-rgb:7 8 9;
  --ink-rgb:255 255 255;
  --acc-rgb:0 217 146;
  --gold-rgb:217 119 87;
  --amber-rgb:217 164 65;
  --danger-rgb:224 87 76;

  background:var(--bg);color:var(--fg);
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px;}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:'Paperlogy','Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  font-weight:400;font-size:17px;line-height:1.75;
  letter-spacing:.006em;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* hidden 은 body 를 스크롤 상자로 만들어 페이지의 모든 고정(sticky)을 죽인다.
     clip 은 가로만 잘라내고 스크롤 상자를 만들지 않는다. */
  overflow-x:hidden;   /* 아주 오래된 브라우저용 */
  overflow-x:clip;
}
img,svg,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,p,blockquote,figure{margin:0;}
table{border-collapse:collapse;width:100%;}
::selection{background:var(--lime);color:#04120C;}

/* ---------- 4. Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px);}
.container-narrow{max-width:900px;}
.section{padding-block:clamp(36px,4.75vw,76px);position:relative;}
.section--tight{padding-block:clamp(28px,3vw,48px);}
.section--soft{background:var(--bg-soft);}

.grid{display:grid;gap:clamp(16px,2vw,24px);}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr));}
@media(max-width:1000px){.g-4,.g-6{grid-template-columns:repeat(2,minmax(0,1fr));}.g-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:680px){.g-2,.g-3,.g-4,.g-6{grid-template-columns:minmax(0,1fr);}}

.stack-8{display:flex;flex-direction:column;gap:8px;}
.stack-12{display:flex;flex-direction:column;gap:12px;}
.stack-16{display:flex;flex-direction:column;gap:16px;}
.stack-24{display:flex;flex-direction:column;gap:24px;}

/* ---------- 5. Typography ---------- */
.eyebrow{
  display:inline-flex;align-items:center;
  font-size:.875rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);
}

.display{
  font-size:clamp(2.15rem,4.8vw,4.125rem);font-weight:800;line-height:1.12;
  letter-spacing:-.016em;
}
.h1{font-size:clamp(2rem,4.6vw,3.75rem);font-weight:800;line-height:1.18;letter-spacing:-.014em;}
.h2{font-size:clamp(1.75rem,3.4vw,3rem);font-weight:800;line-height:1.26;letter-spacing:-.012em;}
.h3{font-size:clamp(1.375rem,2.1vw,1.875rem);font-weight:800;line-height:1.34;letter-spacing:-.006em;}
.h4{font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:600;line-height:1.42;letter-spacing:-.002em;}
.h5{font-size:1.0625rem;font-weight:600;line-height:1.5;letter-spacing:0;}

.lead{font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.72;color:var(--fg-2);font-weight:400;}
.body{color:var(--fg-2);}
/* 형광펜으로 그은 듯한 강조 문단 — 줄이 바뀌어도 각 줄마다 칠해진다 */
.mark-para{font-weight:600;color:var(--fg);}
/* GROUND 방법론 — 앞 글자가 세로로 읽히는 목록 */
/* GROUND 방법론 — 화면 전체를 쓰는 배경 사진 */
.ground-section{position:relative;overflow:hidden;overflow:clip;}
.ground-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(.9) brightness(.75) contrast(1.04);
}
.ground-section::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 32% 38%,rgb(var(--bg-rgb) / .34) 0%,rgb(var(--bg-rgb) / 0) 72%),
    linear-gradient(180deg,rgb(var(--bg-rgb) / .70) 0%,rgb(var(--bg-rgb) / .50) 34%,rgb(var(--bg-rgb) / .54) 70%,rgb(var(--bg-rgb) / .80) 100%);
}
.ground-section > .container{position:relative;z-index:1;}
/* 사진 위라 설명문을 흰색으로 */
.ground-section .lead{color:var(--fg);}
.ground-map{margin-top:clamp(28px,3.4vw,44px);}
.ground-map svg{width:100%;height:auto;display:block;}
.ground-list{display:flex;flex-direction:column;gap:10px;margin-top:clamp(28px,3.4vw,44px);}
/* 넓은 화면에서는 도식만, 좁은 화면에서는 목록만 */
@media(min-width:901px){.ground-list{display:none;}}
@media(max-width:900px){.ground-map{display:none;}}
.ground-row{
  display:grid;grid-template-columns:clamp(50px,5vw,66px) 1fr;
  gap:clamp(16px,2.2vw,30px);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(14px,1.6vw,20px) clamp(16px,2vw,26px);
  transition:border-color .28s var(--ease),background-color .28s var(--ease);
}
.ground-row:hover{border-color:rgb(var(--acc-rgb) / .32);background:var(--surface-2);}
.ground-letter{
  font-size:clamp(2rem,3.4vw,2.75rem);font-weight:800;line-height:1;
  color:var(--lime);text-align:center;letter-spacing:-.02em;
}
.ground-tag{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.1em;color:var(--fg-3);margin-bottom:6px;}
.ground-do{font-size:clamp(1rem,1.3vw,1.125rem);font-weight:600;color:var(--fg);line-height:1.45;}
@media(max-width:560px){.ground-row{grid-template-columns:42px 1fr;gap:14px;}}
.mark-para .mark{
  background-image:linear-gradient(to top,rgb(var(--acc-rgb) / .26) 0,rgb(var(--acc-rgb) / .26) .46em,transparent .46em);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-repeat:no-repeat;
  background-size:100% 100%;
  padding:.04em .08em;
}
.small{font-size:.9375rem;line-height:1.7;color:var(--fg-3);}
.tiny{font-size:.8125rem;line-height:1.65;color:var(--fg-3);}
/* 자료 출처 — 위 내용 바로 아래 오른쪽에 작게 */
.source-note{font-size:12px;line-height:1.6;color:var(--fg-3);text-align:right;margin-top:10px;}
.mono{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;letter-spacing:0;}

.lime{color:var(--lime);}
.gold{color:var(--gold);}
.muted{color:var(--fg-3);}
.strike{color:var(--fg-3);text-decoration:line-through;text-decoration-color:rgb(var(--danger-rgb) / .55);}
.w900{font-weight:900;}.w800{font-weight:800;}.w700{font-weight:700;}
.w600{font-weight:600;}.w500{font-weight:500;}.w300{font-weight:300;}
.center{text-align:center;}
.balance{text-wrap:balance;}
.nowrap{white-space:nowrap;}

.section-head{max-width:900px;margin-bottom:clamp(40px,5vw,72px);}
.section-head .h2{margin-top:20px;}
.section-head .lead{margin-top:20px;}
.section-head--center{margin-inline:auto;text-align:center;}
.section-head--center .eyebrow{justify-content:center;}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;
  font-size:1rem;font-weight:600;letter-spacing:0;
  border:1px solid transparent;transition:.28s var(--ease);
  white-space:nowrap;cursor:pointer;
}
.btn svg{width:16px;height:16px;transition:transform .28s var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn-lime{background:var(--lime);color:#04120C;}
.btn-lime:hover{background:#2FD6A1;transform:translateY(-2px);box-shadow:0 10px 30px -12px rgb(var(--acc-rgb) / .55);}
.btn-ghost{border-color:var(--line-2);color:var(--fg);}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);background:var(--lime-soft);}
.btn-light{background:var(--fg);color:#0A0C0B;}
.btn-light:hover{background:#fff;transform:translateY(-2px);}
.btn-sm{padding:11px 22px;font-size:.9375rem;}
.btn-lg{padding:18px 38px;font-size:1.0625rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- 7. Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgb(var(--bg-rgb) / .82);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
}
.header-inner{display:flex;align-items:center;gap:clamp(20px,3vw,48px);width:100%;}
.brand{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;}
.brand-mark{height:16px;width:auto;flex-shrink:0;}
.brand-text{font-size:1.125rem;font-weight:800;letter-spacing:-.014em;line-height:1;}
.brand-text i{font-style:normal;color:var(--lime);}

.gnb{display:flex;align-items:center;gap:clamp(14px,2vw,34px);margin-left:auto;}
.gnb a{
  position:relative;font-size:.9688rem;font-weight:600;color:var(--fg);
  padding:6px 0;transition:color .25s var(--ease);
}
.gnb a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--lime);
  transition:width .3s var(--ease);
}
.gnb a:hover{color:var(--lime);}
.gnb a:hover::after{width:100%;}
/* 고른 항목은 밑줄 대신 색과 굵기로 표시한다 */
.gnb a.is-active{color:var(--lime);font-weight:800;}
.gnb a.is-active::after{width:0;}
.header-cta{margin-left:clamp(10px,1.5vw,20px);}   /* 배치는 50번 항목에서 이어받는다 */

.nav-toggle{display:none;width:44px;height:44px;margin-left:auto;position:relative;flex-shrink:0;}
.nav-toggle span{
  position:absolute;left:11px;width:22px;height:1.8px;background:var(--fg);border-radius:2px;
  transition:.3s var(--ease);
}
.nav-toggle span:nth-child(1){top:17px;}
.nav-toggle span:nth-child(2){top:24px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){top:21px;transform:rotate(-45deg);}

.mobile-nav{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:99;
  background:rgb(var(--bg-rgb) / .97);backdrop-filter:blur(20px);
  padding:32px clamp(20px,5vw,40px) 48px;
  display:flex;flex-direction:column;gap:4px;
  transform:translateY(-12px);opacity:0;pointer-events:none;visibility:hidden;
  transition:.32s var(--ease);overflow-y:auto;
}
.mobile-nav.is-open{transform:none;opacity:1;pointer-events:auto;visibility:visible;}
.mobile-nav a{
  font-size:1.5rem;font-weight:700;letter-spacing:-.008em;padding:16px 0;
  border-bottom:1px solid var(--line);
}
.mobile-nav .btn{margin-top:28px;align-self:flex-start;}
@media(max-width:1024px){
  .gnb,.header-cta{display:none;}
  .nav-toggle{display:block;}
}

/* ---------- 8. Hero ---------- */
.hero{
  position:relative;padding-top:calc(var(--header-h) + clamp(26px,4vw,55px));
  padding-bottom:clamp(64px,8vw,120px);overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-bg::before{
  content:"";position:absolute;left:50%;top:-28%;width:min(1180px,140%);aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%,rgb(var(--acc-rgb) / .13) 0%,rgb(var(--acc-rgb) / .045) 34%,transparent 66%);
}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 78%);
  opacity:.65;
}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,72px);align-items:start;}
@media(max-width:1024px){.hero-inner{grid-template-columns:minmax(0,1fr);}}
.hero-copy .display{margin-top:24px;}
.hero-copy .lead{margin-top:26px;max-width:34em;}
.hero-copy .btn-row{margin-top:38px;}

/* ---------- 9. AI chat mock ---------- */
.chat-mock{
  position:relative;border:1px solid var(--line-2);border-radius:var(--radius-l);
  background:linear-gradient(165deg,rgb(var(--ink-rgb) / .045),rgb(var(--ink-rgb) / .012));
  padding:clamp(18px,2.4vw,26px);
  box-shadow:0 40px 90px -50px rgb(var(--shadow-rgb) / .9),0 0 0 1px rgb(var(--ink-rgb) / .02) inset;
  backdrop-filter:blur(8px);
}
.chat-logos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.chat-logos span{
  font-size:.75rem;font-weight:600;color:var(--fg-2);letter-spacing:.004em;
  padding:6px 13px;border:1px solid var(--line-2);border-radius:999px;background:rgb(var(--ink-rgb) / .03);
}
.chat-q{
  margin-left:auto;max-width:88%;background:var(--surface-3);border:1px solid var(--line-2);
  border-radius:16px 16px 5px 16px;padding:13px 17px;font-size:.9375rem;color:var(--fg);
}
.chat-arrow{display:flex;justify-content:center;padding:14px 0;color:var(--lime);}
.chat-a{background:rgb(var(--ink-rgb) / .028);border:1px solid var(--line);border-radius:16px;padding:18px;}
.chat-a > p{font-size:.875rem;color:var(--fg-2);margin-bottom:14px;}
.chat-list{display:flex;flex-direction:column;gap:8px;}
.chat-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;
  background:rgb(var(--ink-rgb) / .035);border:1px solid var(--line);
}
.chat-item .rank{font-size:.75rem;color:var(--fg-3);width:12px;flex-shrink:0;}
.chat-item .nm{font-size:.9063rem;font-weight:600;}
.chat-item .st{margin-left:auto;font-size:.75rem;color:var(--gold);}
.chat-you{
  margin-top:12px;display:flex;align-items:center;gap:12px;padding:14px;
  border:1px dashed rgb(var(--acc-rgb) / .55);border-radius:11px;background:var(--lime-soft);
}
.chat-you .qm{
  width:26px;height:26px;border-radius:50%;background:rgb(var(--acc-rgb) / .2);color:var(--lime);
  display:grid;place-items:center;font-size:.8125rem;font-weight:700;flex-shrink:0;
}
.chat-you p{font-size:.875rem;font-weight:600;line-height:1.5;}

/* ---------- 10. Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,30px);transition:.32s var(--ease);position:relative;overflow:hidden;
}
.card:hover{border-color:var(--line-2);background:var(--surface-2);transform:translateY(-3px);}
.card--flat:hover{transform:none;}
.card--lime{border-color:rgb(var(--acc-rgb) / .32);background:linear-gradient(160deg,rgb(var(--acc-rgb) / .07),rgb(var(--acc-rgb) / .015));}
.card--gold{border-color:rgb(var(--gold-rgb) / .3);background:linear-gradient(160deg,rgb(var(--gold-rgb) / .07),rgb(var(--gold-rgb) / .015));}
/* 문제 상태 카드 — 틀은 완전히 중립으로, 붉은색은 글자와 아이콘에만 */
.card--danger{border-color:var(--line);background:var(--surface);}
.card .h4,.card .h3{margin-bottom:12px;}
.card .body,.card .small{margin-top:0;}
.card-num{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--lime);
  display:block;margin-bottom:16px;
}
/* 지난 방식을 가리키는 표시 — 라임보다 가라앉은 색 */
.card-num--past{color:#A8785F;}
.card-icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--lime-soft);border:1px solid rgb(var(--acc-rgb) / .25);color:var(--lime);
}
.card-icon svg{width:22px;height:22px;}
.card-icon--gold{background:var(--gold-soft);border-color:rgb(var(--gold-rgb) / .25);color:var(--gold);}
.card-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  font-size:.9063rem;font-weight:600;color:var(--lime);
}
.card-link svg{width:14px;height:14px;transition:transform .28s var(--ease);}
.card:hover .card-link svg{transform:translateX(4px);}

/* flex 로 두면 <strong> 과 그 뒤 설명이 서로 다른 칸이 되어,
   굵은 글씨가 먼저 접히고 설명이 옆에 따로 붙는다.
   글은 한 덩어리로 흐르게 두고, 표시만 왼쪽에 띄운다. */
.tick-list li,.cross-list li{
  position:relative;font-size:.9375rem;line-height:1.65;color:var(--fg-2);
  padding:7px 0 7px 28px;
}
.tick-list li::before{
  content:"";position:absolute;left:0;top:.75em;width:17px;height:17px;border-radius:50%;
  background:var(--lime-soft);border:1px solid rgb(var(--acc-rgb) / .4);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300D992' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:11px;background-position:center;background-repeat:no-repeat;
}
.cross-list li::before{
  content:"";position:absolute;left:0;top:.75em;width:17px;height:17px;border-radius:50%;
  background:rgb(var(--danger-rgb) / .08);border:1px solid rgb(var(--danger-rgb) / .24);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0574C' stroke-width='3.4' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  background-size:10px;background-position:center;background-repeat:no-repeat;
}
.dot-list li{
  position:relative;padding-left:16px;font-size:.9375rem;line-height:1.7;color:var(--fg-2);padding-block:4px;
}
.dot-list li::before{
  content:"";position:absolute;left:0;top:.85em;width:5px;height:5px;border-radius:50%;background:var(--fg-3);
}

/* ---------- 11. Stat ---------- */
.stat{padding:clamp(24px,2.6vw,34px) 0;}
.stat-num{
  font-size:clamp(2.5rem,4.6vw,3.75rem);font-weight:800;line-height:1;letter-spacing:-.022em;
  color:var(--fg);display:flex;align-items:baseline;gap:2px;
}
.stat-num em{font-style:normal;font-size:.45em;font-weight:700;color:var(--lime);}
.stat-num.is-lime{color:var(--lime);}
.stat-num.is-gold{color:var(--gold);}
.stat-label{margin-top:14px;font-size:.9375rem;font-weight:600;color:var(--fg);}
.stat-sub{margin-top:5px;font-size:.8125rem;color:var(--fg-3);}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
.stat-row > *{border-left:1px solid var(--line);padding-left:clamp(18px,2vw,28px);}
@media(max-width:900px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.stat-row{grid-template-columns:minmax(0,1fr);}}

/* ---------- 12. Split / compare ---------- */
.split{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.4vw,28px);align-items:stretch;}
.split-arrow{display:grid;place-items:center;color:var(--lime);}
.split-arrow svg{width:34px;height:34px;}
@media(max-width:900px){
  .split{grid-template-columns:minmax(0,1fr);}
  .split-arrow{padding:6px 0;}
  .split-arrow svg{transform:rotate(90deg);}
}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.pill{
  font-size:.8125rem;font-weight:500;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--fg-2);background:rgb(var(--ink-rgb) / .03);
}
.pill--lime{border-color:rgb(var(--acc-rgb) / .35);color:var(--lime);background:var(--lime-soft);}
.pill--gold{border-color:rgb(var(--gold-rgb) / .35);color:var(--gold);background:var(--gold-soft);}
.pill--danger{border-color:var(--line-2);color:var(--fg-2);background:transparent;}

/* ---------- 13. Table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);}
.table-wrap table{min-width:660px;}
.table-wrap th,.table-wrap td{
  padding:17px 20px;text-align:left;font-size:.9375rem;line-height:1.6;
  border-bottom:1px solid var(--line);vertical-align:top;
}
.table-wrap thead th{
  font-size:.8125rem;font-weight:700;letter-spacing:.03em;color:var(--fg);
  background:rgb(var(--ink-rgb) / .03);white-space:nowrap;
}
.table-wrap tbody th{font-weight:600;color:var(--fg);white-space:nowrap;width:1%;}
.table-wrap td{color:var(--fg-2);}
.table-wrap tr:last-child th,.table-wrap tr:last-child td{border-bottom:0;}
.table-wrap .col-hl{background:rgb(var(--acc-rgb) / .05);color:var(--fg);}
/* 좁은 칼럼 안에 들어가는 2열 표 — 최소폭을 풀어 가로 스크롤 방지 */
.table-wrap--compact table{min-width:0;}
.table-wrap--compact th,.table-wrap--compact td{padding:13px 14px;}
.table-wrap--compact tbody th{white-space:normal;width:auto;padding-right:18px;}
.table-wrap--compact thead th{white-space:normal;}
@media(max-width:560px){
  /* 좁은 화면에서는 한글 단어 중간 줄바꿈을 허용해 가로 스크롤을 없앰 */
  .table-wrap--compact th,.table-wrap--compact td{padding:11px 10px;font-size:.875rem;word-break:normal;overflow-wrap:break-word;}
}
.table-wrap thead .col-hl{background:rgb(var(--acc-rgb) / .1);color:var(--lime);}

/* ---------- 14. Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;}
@media(max-width:1100px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:640px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
.step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 18px;position:relative;transition:.3s var(--ease);
}
.step:hover{border-color:rgb(var(--acc-rgb) / .35);background:var(--surface-2);}
.step-no{
  font-size:.6875rem;font-weight:800;letter-spacing:.1em;color:var(--lime);
  display:block;margin-bottom:12px;
}
/* GROUND 방법론의 앞 글자만 크게 */
.step-no .ltr{font-size:1.5rem;line-height:0;vertical-align:-3px;letter-spacing:0;}
.step h4{font-size:1rem;font-weight:700;line-height:1.4;margin-bottom:10px;letter-spacing:-.004em;}
.step p{font-size:.8125rem;line-height:1.62;color:var(--fg-3);}
.step-tag{
  display:inline-block;margin-top:14px;font-size:.6875rem;font-weight:700;letter-spacing:.06em;
  padding:5px 10px;border-radius:6px;border:1px solid var(--line-2);color:var(--fg-2);
}

/* ---------- 15. Timeline ---------- */
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);}
@media(max-width:1000px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.timeline{grid-template-columns:minmax(0,1fr);}}
.tl-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.tl-head{
  padding:16px 20px;font-size:.9375rem;font-weight:700;letter-spacing:0;
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgb(var(--ink-rgb) / .03);
}
.tl-head span{font-size:.75rem;font-weight:600;color:var(--fg-3);}
.tl-body{padding:20px;display:flex;flex-direction:column;gap:18px;}
.tl-block > h5{
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime);margin-bottom:8px;
}
.tl-block p,.tl-block li{font-size:.8438rem;line-height:1.66;color:var(--fg-2);}
.tl-block li{position:relative;padding-left:13px;padding-block:2px;}
.tl-block li::before{content:"";position:absolute;left:0;top:.78em;width:4px;height:4px;border-radius:50%;background:var(--fg-3);}
.tl-col:nth-child(2) .tl-block > h5{color:#6EA8FF;}
.tl-col:nth-child(3) .tl-block > h5{color:#A78BFA;}
.tl-col:nth-child(4) .tl-block > h5{color:var(--gold);}

/* ---------- 16. Accordion ---------- */
.acc{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:26px 0;text-align:left;font-size:clamp(1.0625rem,1.5vw,1.25rem);font-weight:600;
  letter-spacing:-.004em;line-height:1.5;transition:color .25s var(--ease);
}
.acc-btn:hover{color:var(--lime);}
.acc-icon{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;position:relative;margin-top:3px;transition:.3s var(--ease);
}
.acc-icon::before,.acc-icon::after{
  content:"";position:absolute;background:var(--fg-2);transition:.3s var(--ease);
}
.acc-icon::before{width:11px;height:1.5px;}
.acc-icon::after{width:1.5px;height:11px;}
.acc-item.is-open .acc-icon{border-color:var(--lime);background:var(--lime-soft);}
.acc-item.is-open .acc-icon::before,.acc-item.is-open .acc-icon::after{background:var(--lime);}
.acc-item.is-open .acc-icon::after{transform:rotate(90deg);opacity:0;}
.acc-panel{overflow:hidden;height:0;transition:height .36s var(--ease);}
.acc-panel-inner{padding:0 46px 28px 0;color:var(--fg-2);font-size:.9688rem;line-height:1.8;}

/* ---------- 17. Page hero ---------- */
.page-hero{
  position:relative;padding-top:calc(var(--header-h) + clamp(46px,5.2vw,74px));
  padding-bottom:clamp(36px,4vw,60px);overflow:hidden;
}
.page-hero .hero-bg::before{top:-52%;opacity:.75;}
.page-hero-inner{position:relative;z-index:1;}
/* 아티클 페이지는 본문(820px) 칼럼에 맞춰 정렬 */
.page-hero-inner--article{max-width:820px;margin-inline:auto;}
.page-hero .h1{margin-top:22px;}
.page-hero-copy > :first-child,
.page-hero-inner > :first-child{margin-top:0;}
.page-hero .lead{margin-top:22px;max-width:58em;}
.breadcrumb{display:flex;align-items:center;gap:9px;font-size:.8125rem;color:var(--fg-3);margin-bottom:14px;}
.breadcrumb a:hover{color:var(--lime);}
.breadcrumb span{opacity:.5;}

/* ---------- 18. Anchor nav ---------- */
.anchor-nav{
  position:sticky;top:var(--header-h);z-index:50;
  background:rgb(var(--bg-rgb) / .88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.anchor-nav ul{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;}
.anchor-nav ul::-webkit-scrollbar{display:none;}
.anchor-nav a{
  display:block;padding:15px 16px;font-size:1rem;font-weight:600;color:var(--fg-2);
  white-space:nowrap;border-bottom:2px solid transparent;transition:.25s var(--ease);
}
.anchor-nav a:hover{color:var(--fg);}
.anchor-nav a.is-active{color:var(--lime);border-bottom-color:var(--lime);}

/* ---------- 19. Solution block ---------- */
.sol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:start;}
.sol:nth-child(even) .sol-visual{order:-1;}
@media(max-width:960px){
  .sol{grid-template-columns:minmax(0,1fr);gap:32px;}
  .sol:nth-child(even) .sol-visual{order:0;}
}
.sol + .sol{margin-top:clamp(64px,8vw,124px);padding-top:clamp(64px,8vw,124px);border-top:1px solid var(--line);}
.sol-copy .h2{margin-top:18px;}
.sol-copy .lead{margin-top:18px;}
.sol-copy .tick-list{margin-top:26px;}
/* 도식은 박스에 담지 않는다 — 테두리·배경 없이 지면에 그대로 놓는다 */
.sol-visual{position:relative;}
@media(min-width:961px){
  .sol-visual{align-self:center;}   /* 글과 그림의 무게중심을 맞춘다 */
}

/* schematic */
.schema{display:flex;flex-direction:column;gap:12px;}
.schema-row{display:flex;gap:10px;flex-wrap:wrap;}
.schema-box{
  flex:1;min-width:0;border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;
  background:rgb(var(--ink-rgb) / .035);
}
.schema-box b{display:block;font-size:.8438rem;font-weight:600;color:var(--fg);letter-spacing:0;}
.schema-box span{display:block;font-size:.75rem;color:var(--fg-3);margin-top:4px;line-height:1.5;}
.schema-box--lime{border-color:rgb(var(--acc-rgb) / .4);background:var(--lime-soft);}
.schema-box--lime b{color:var(--lime);}
.schema-box--gold{border-color:rgb(var(--gold-rgb) / .4);background:var(--gold-soft);}
.schema-box--gold b{color:var(--gold);}
.schema-core{
  border:1px solid rgb(var(--acc-rgb) / .5);border-radius:16px;padding:20px;text-align:center;
  background:radial-gradient(circle at 50% 50%,rgb(var(--acc-rgb) / .15),rgb(var(--acc-rgb) / .03));
}
.schema-core b{font-size:1rem;font-weight:800;letter-spacing:-.004em;color:var(--lime);display:block;}
.schema-core span{font-size:.75rem;color:var(--fg-2);margin-top:6px;display:block;}
.schema-arrow{display:grid;place-items:center;color:var(--fg-3);padding:2px 0;}
.schema-arrow svg{width:18px;height:18px;}

/* ---------- 20. Insight cards ---------- */
.post{
  display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.32s var(--ease);
}
.post:hover{border-color:var(--line-2);transform:translateY(-4px);background:var(--surface-2);}
.post-thumb{aspect-ratio:16/9;position:relative;overflow:hidden;border-bottom:1px solid var(--line);}
/* 사진마다 원래 비율이 달라 칸을 채우지 못하던 문제 — 잘라서라도 칸을 채운다 */
.post-thumb img{width:100%;height:100%;display:block;object-fit:cover;}
.post-thumb svg{width:100%;height:100%;}
.post-body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:12px;flex:1;}
.post-cat{font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--lime);text-transform:uppercase;}
.post-title{font-size:1.125rem;font-weight:700;line-height:1.46;letter-spacing:-.006em;}
.post-desc{font-size:.9063rem;line-height:1.68;color:var(--fg-3);}
.post-meta{margin-top:auto;padding-top:16px;font-size:.8125rem;color:var(--fg-3);display:flex;gap:12px;align-items:center;}

/* ---------- 21. Article ---------- */
.article{max-width:820px;margin-inline:auto;}
.article h2{
  font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;line-height:1.34;letter-spacing:-.012em;
  margin-top:clamp(52px,5.5vw,80px);margin-bottom:20px;padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--line);
}
.article h2:first-child{margin-top:0;border-top:0;padding-top:0;}
.article h3{
  font-size:clamp(1.125rem,1.7vw,1.375rem);font-weight:700;line-height:1.44;letter-spacing:-.006em;
  margin-top:40px;margin-bottom:14px;
}
.article p{margin-bottom:20px;color:var(--fg-2);line-height:1.86;}
.article strong{color:var(--fg);font-weight:600;}
.article ul,.article ol{margin-bottom:24px;display:flex;flex-direction:column;gap:9px;}
.article ul li{position:relative;padding-left:18px;color:var(--fg-2);line-height:1.78;}
.article ul li::before{content:"";position:absolute;left:2px;top:.82em;width:5px;height:5px;border-radius:50%;background:var(--lime);}
.article ol{counter-reset:ol;}
.article ol li{position:relative;padding-left:30px;color:var(--fg-2);line-height:1.78;counter-increment:ol;}
.article ol li::before{
  content:counter(ol);position:absolute;left:0;top:.28em;width:21px;height:21px;border-radius:50%;
  background:var(--lime-soft);border:1px solid rgb(var(--acc-rgb) / .35);color:var(--lime);
  font-size:.6875rem;font-weight:700;display:grid;place-items:center;
}
.article .table-wrap{margin-bottom:28px;}
.article blockquote{
  margin:0 0 28px;padding:24px 28px;border-left:2px solid var(--lime);
  background:var(--lime-soft);border-radius:0 var(--radius-s) var(--radius-s) 0;
}
.article blockquote p{margin:0;color:var(--fg);font-size:1.0625rem;font-weight:500;line-height:1.7;}
.article .callout{
  margin:0 0 28px;padding:24px 26px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--surface);
}
.article .callout h4{font-size:1rem;font-weight:700;margin-bottom:12px;letter-spacing:-.004em;}
.article .callout p:last-child,.article .callout ul:last-child{margin-bottom:0;}
.article-meta{
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;
  padding-bottom:28px;margin-bottom:clamp(36px,4vw,56px);border-bottom:1px solid var(--line);
  font-size:.875rem;color:var(--fg-3);
}
.article-refs{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);}
.article-refs li{font-size:.8125rem;line-height:1.7;color:var(--fg-3);padding-block:5px;word-break:break-all;}
.article-refs a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px;}
.article-refs a:hover{color:var(--lime);}

/* ---------- 22. Form ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
@media(max-width:680px){.form-grid{grid-template-columns:minmax(0,1fr);}}
.field{display:flex;flex-direction:column;gap:9px;}
.field--full{grid-column:1/-1;}
.field label{font-size:.875rem;font-weight:600;color:var(--fg);}
.field label .req{color:var(--lime);margin-left:3px;}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:var(--radius-s);
  background:var(--surface);border:1px solid var(--line-2);color:var(--fg);
  font-family:inherit;font-size:.9688rem;transition:.25s var(--ease);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.7;}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgb(var(--acc-rgb) / .13);background:var(--surface-2);
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23828B86' stroke-width='2' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px;}
.field select option{background:var(--surface);color:var(--fg);}
.check-row{display:flex;flex-wrap:wrap;gap:10px;}
.check{
  display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;
  border:1px solid var(--line-2);cursor:pointer;font-size:.875rem;color:var(--fg-2);transition:.25s var(--ease);
  user-select:none;
}
.check input{position:absolute;opacity:0;width:0;height:0;}
.check:has(input:checked){border-color:var(--lime);color:var(--lime);background:var(--lime-soft);}
.check:hover{border-color:var(--line-2);color:var(--fg);}
.consent{
  display:flex;gap:11px;align-items:flex-start;padding:18px;border:1px solid var(--line);
  border-radius:var(--radius-s);background:var(--surface);cursor:pointer;
}
.consent input{margin-top:4px;accent-color:var(--lime);width:16px;height:16px;flex-shrink:0;}
.consent span{font-size:.875rem;line-height:1.65;color:var(--fg-2);}
.form-note{font-size:.8125rem;color:var(--fg-3);line-height:1.7;}
.form-msg{
  display:none;padding:16px 18px;border-radius:var(--radius-s);font-size:.9375rem;
  border:1px solid rgb(var(--acc-rgb) / .4);background:var(--lime-soft);color:var(--lime);
}
.form-msg.is-on{display:block;}

/* ---------- 23. CTA ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  border:1px solid rgb(var(--acc-rgb) / .24);
  background:linear-gradient(140deg,rgb(var(--acc-rgb) / .1),rgb(var(--acc-rgb) / .02) 55%,transparent);
  padding:clamp(40px,6vw,84px) clamp(26px,5vw,72px);
}
.cta::before{
  content:"";position:absolute;right:-8%;top:-52%;width:min(620px,80%);aspect-ratio:1;
  background:radial-gradient(circle,rgb(var(--acc-rgb) / .16),transparent 66%);pointer-events:none;
}
.cta-inner{position:relative;max-width:760px;}
.cta .h2{margin-top:20px;}
.cta .lead{margin-top:20px;}
.cta .btn-row{margin-top:36px;}

/* ---------- 24. Footer ---------- */
.site-footer{background:var(--bg-soft);padding-block:clamp(52px,6vw,80px) 34px;}
/* 로고와 사업자 정보만 남긴다 — 위쪽 문의 블록이 이미 구분선을 갖고 있어 선을 겹치지 않는다 */
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:22px clamp(28px,4vw,56px);
  align-items:flex-end;justify-content:space-between;
}
.footer-info{display:flex;flex-direction:column;gap:10px;align-items:flex-end;text-align:right;}
@media(max-width:700px){.footer-info{align-items:flex-start;text-align:left;}}
.footer-bottom p,.footer-bottom li{font-size:.8125rem;color:var(--fg-3);}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:flex-end;}
@media(max-width:700px){.footer-legal{justify-content:flex-start;}}

/* ---------- 25. Utilities & motion ---------- */
/* transform 대신 translate 속성을 사용 — .reveal.is-in{transform:none}이
   .split-arrow 회전이나 .card:hover 상승을 덮어쓰던 문제를 방지 */
.reveal{
  opacity:0;translate:0 56px;
  /* 리빌 외에, 카드 등이 hover 시 쓰는 속성도 함께 남겨 둠 (shorthand 가 덮어쓰므로) */
  transition:opacity .68s var(--ease),translate .68s var(--ease),scale .68s var(--ease),
             transform .32s var(--ease),background-color .32s var(--ease),border-color .32s var(--ease);
}
.reveal.is-in{opacity:1;translate:none;scale:none;}
/* 옆에서 모여드는 등장 · 커지며 나타나는 등장 */
.reveal--l{translate:-72px 0;}
.reveal--r{translate:72px 0;}
.reveal--zoom{translate:0 24px;scale:.9;}
.reveal[data-d="1"]{transition-delay:.07s;}
.reveal[data-d="2"]{transition-delay:.14s;}
.reveal[data-d="3"]{transition-delay:.21s;}
.reveal[data-d="4"]{transition-delay:.28s;}
.reveal[data-d="5"]{transition-delay:.35s;}
.mt-8{margin-top:8px;}.mt-12{margin-top:12px;}.mt-16{margin-top:16px;}
.mt-20{margin-top:20px;}.mt-24{margin-top:24px;}.mt-32{margin-top:32px;}
.mt-40{margin-top:40px;}.mt-56{margin-top:56px;}
.max-w-900{max-width:900px;}
.mb-16{margin-bottom:16px;}.mb-24{margin-bottom:24px;}.mb-32{margin-bottom:32px;}
.divider{height:1px;background:var(--line);border:0;margin-block:clamp(40px,5vw,72px);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;
  background:var(--lime);color:#04120C;font-weight:600;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;translate:none;}
}

/* ---------- 26. Responsive grid variants (replaces inline templates) ---------- */
.steps--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.steps--5{grid-template-columns:repeat(5,minmax(0,1fr));}
@media(max-width:1100px){
  .steps--5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .steps--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  .steps--5{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:560px){
  .steps--2,.steps--4,.steps--5{grid-template-columns:minmax(0,1fr);}
}

.stat-row--2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:520px){.stat-row--2{grid-template-columns:minmax(0,1fr);}}

.contact-layout{
  display:grid;grid-template-columns:1.35fr .65fr;
  gap:clamp(32px,4.5vw,72px);align-items:start;
}
@media(max-width:980px){.contact-layout{grid-template-columns:minmax(0,1fr);}}

/* ---------- 27. Photography ---------- */
.figure{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid var(--line-2);background:var(--surface);
}
.figure img{
  width:100%;height:100%;display:block;object-fit:cover;
  filter:saturate(.9) brightness(.93) contrast(1.04);
}
.figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--bg-rgb) / .06) 0%,rgb(var(--bg-rgb) / .10) 55%,rgb(var(--bg-rgb) / .38) 100%);
}
.figure--21x9{aspect-ratio:21/9;}
.figure--16x9{aspect-ratio:16/9;}
.figure--3x2{aspect-ratio:3/2;}
.figure--4x3{aspect-ratio:4/3;}
@media(max-width:680px){
  .figure--21x9{aspect-ratio:16/9;}
  .figure--16x9{aspect-ratio:4/3;}
}
.figure-cap{margin-top:14px;font-size:.8125rem;line-height:1.65;color:var(--fg-3);}

/* 이미지가 상단에 들어가는 카드 */
.card--media{padding:0;overflow:hidden;display:flex;flex-direction:column;}
.card-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line);}
.card-media img{
  width:100%;height:100%;display:block;object-fit:cover;
  filter:saturate(.9) brightness(.92) contrast(1.04);
  transition:transform .6s var(--ease);
}
.card--media:hover .card-media img{transform:scale(1.045);}
.card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--bg-rgb) / .04) 0%,rgb(var(--bg-rgb) / .14) 50%,rgb(var(--bg-rgb) / .46) 100%);
}
.card--media .card-body{padding:clamp(22px,2.4vw,30px);flex:1;display:flex;flex-direction:column;}
.card--media .card-icon{margin-bottom:18px;}
/* 큰 단락 안에 딸린 작은 묶음 — 선 대신 여백으로 구분한다 */
.subsection{margin-top:clamp(56px,7vw,96px);max-width:52em;}
.subsection .h3{font-size:1.375rem;}
/* 한 줄로 천천히 흐르는 띠 — 양 끝은 서서히 사라지게 */
.flow{
  /* 화면 전체 폭을 쓰고 양옆은 가리지 않는다 — 그대로 화면 밖으로 흘러 나간다 */
  position:relative;width:100%;overflow:hidden;
  /* 마우스 오버로 카드가 3px 떠오를 자리 — 잘리지 않게 위아래를 비워 둔다 */
  padding-block:8px;
  margin-top:clamp(18px,2.6vw,30px);
}
.flow-track{display:flex;align-items:stretch;width:max-content;animation:flowSlide 64s linear infinite;}
.flow:hover .flow-track{animation-play-state:paused;}
.flow-set{display:flex;align-items:stretch;}
/* 간격은 gap 이 아니라 margin 으로 — 두 벌이 정확히 절반씩이라야 이음매가 안 보인다 */
.flow-item{
  flex-shrink:0;width:clamp(258px,25vw,330px);margin-right:clamp(14px,1.6vw,20px);
  display:flex;flex-direction:column;
  padding:clamp(20px,2.2vw,26px);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  transition:border-color .28s var(--ease),background-color .28s var(--ease),transform .28s var(--ease);
}
.flow-item:hover,.flow-item:focus-visible{
  border-color:rgb(var(--acc-rgb) / .42);background:var(--surface-2);transform:translateY(-3px);
}
/* 맨 아래에 붙는 '자세히 보기 →' */
.flow-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;
  font-size:.8438rem;font-weight:600;color:var(--fg-3);
  transition:color .28s var(--ease);
}
.flow-arrow{width:14px;height:14px;transition:transform .28s var(--ease);}
.flow-item:hover .flow-more,.flow-item:focus-visible .flow-more{color:var(--lime);}
.flow-item:hover .flow-arrow,.flow-item:focus-visible .flow-arrow{transform:translateX(4px);}
.flow-title{font-size:1.0625rem;font-weight:700;line-height:1.4;color:var(--amber);margin-bottom:10px;}
.flow-desc{font-size:.9063rem;line-height:1.7;color:var(--fg-3);}
.flow-desc strong{color:var(--fg-2);font-weight:600;}
@keyframes flowSlide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.flow-track{animation:none;}}

/* 히어로 배경 사진 위에 얹히는 채팅 목업 */
.hero-visual{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid var(--line-2);padding:clamp(16px,2.2vw,28px);
  box-shadow:0 40px 90px -50px rgb(var(--shadow-rgb) / .9);
}
.hero-visual > .hero-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(.85) brightness(.72) contrast(1.05);
}
.hero-visual::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(150deg,rgb(var(--bg-rgb) / .28) 0%,rgb(var(--bg-rgb) / .66) 55%,rgb(var(--bg-rgb) / .86) 100%);
}
.hero-visual > .chat-mock{position:relative;z-index:1;box-shadow:0 24px 60px -34px rgb(var(--shadow-rgb) / .95);}

/* 이미지가 오른쪽에 붙는 CTA */
.cta-grid{
  position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4vw,60px);align-items:center;
}
@media(max-width:900px){.cta-grid{grid-template-columns:minmax(0,1fr);}}
.cta-grid .cta-inner{max-width:none;}

/* 히어로가 1단으로 접히는 구간: 외곽 프레임 제거 — 사진이 얇은 테두리로만 남아 박스가 3중으로 겹치는 문제 */
@media(max-width:1024px){
  .hero-visual{
    border:0;padding:0;border-radius:0;box-shadow:none;overflow:visible;background:none;
  }
  .hero-visual > .hero-photo,
  .hero-visual::after{display:none;}
  .hero-visual > .chat-mock{box-shadow:0 26px 60px -34px rgb(var(--shadow-rgb) / .95);}
}

/* 모바일: 통계 숫자 옆에 한글 라벨을 가로 배치 — 세로로 길게 늘어지는 문제 해소 */
@media(max-width:520px){
  .stat{
    display:grid;grid-template-columns:minmax(78px,auto) minmax(0,1fr);
    column-gap:16px;align-items:center;padding-block:18px;
  }
  .stat-num{grid-row:1 / span 2;font-size:2.125rem;letter-spacing:-.026em;}
  .stat-num em{font-size:.42em;}
  .stat-label{margin-top:0;align-self:end;}
  .stat-sub{margin-top:3px;align-self:start;}

  /* 단일 열이 되면 좌측 세로선 대신 행 구분선 */
  .stat-row{gap:0;}
  .stat-row > *{border-left:0;border-top:1px solid var(--line);padding-left:0;}
  .stat-row > *:first-child{border-top:0;}
}

/* 모바일: 스키마 박스를 한 줄에 하나씩(4행) — 4개가 한 행에 들어가면 칸이 90px까지 좁아져 글자가 세로로 깨짐 */
@media(max-width:680px){
  .schema-row{flex-direction:column;gap:8px;}
  .schema-box{flex:1 1 auto;width:100%;}
}

/* 모바일: 2열 표를 "제목 위 / 설명 아래" 형태로 전환 — 제목이 '공식 답/변'처럼 두 줄로 깨지는 문제 해소 */
@media(max-width:560px){
  .table-wrap--stack table,
  .table-wrap--stack tbody,
  .table-wrap--stack tr,
  .table-wrap--stack th,
  .table-wrap--stack td{display:block;width:auto;}
  .table-wrap--stack tr{padding:14px 0;border-bottom:1px solid var(--line);}
  .table-wrap--stack tr:first-child{padding-top:0;}
  .table-wrap--stack tr:last-child{padding-bottom:0;border-bottom:0;}
  .table-wrap--stack th,
  .table-wrap--stack td{border-bottom:0;padding:0;white-space:normal;}
  .table-wrap--stack tbody th{color:var(--fg);font-weight:600;margin-bottom:5px;}
  .table-wrap--stack td{color:var(--fg-2);}
}

/* 어두운 톤 이미지: 밝은 사진용 보정(어둡게 + 하단 그라데이션)이 과해지므로 완화 */
.figure--dark img,
.card-media--dark img{filter:saturate(1.02) brightness(1.04) contrast(1.02);}
.figure--dark::after,
.card-media--dark::after{
  background:linear-gradient(180deg,rgb(var(--bg-rgb) / 0) 0%,rgb(var(--bg-rgb) / .06) 60%,rgb(var(--bg-rgb) / .16) 100%);
}

/* ---------- 28. 이미지 위에 통계를 얹는 블록 ---------- */
.stat-hero{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  border:1px solid var(--line-2);background:var(--surface);
  min-height:clamp(380px,32vw,480px);
  display:flex;align-items:flex-end;
  padding:clamp(24px,3vw,44px);
}
.stat-hero-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.stat-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--bg-rgb) / .12) 0%,rgb(var(--bg-rgb) / .42) 38%,rgb(var(--bg-rgb) / .86) 74%,rgb(var(--bg-rgb) / .95) 100%);
}
.stat-hero .stat-row{position:relative;z-index:1;width:100%;margin:0;}

/* 태블릿·모바일: 겹치지 않고 이미지 아래로 — 작은 화면에서 글자가 사진에 묻히는 것을 방지 */
@media(max-width:768px){
  .stat-hero{display:block;padding:0;min-height:0;align-items:stretch;}
  .stat-hero::after{display:none;}
  .stat-hero-bg{position:relative;height:auto;aspect-ratio:16/10;}
  .stat-hero .stat-row{padding:clamp(20px,4vw,28px);}
}

/* ---------- 29. 이미지 위에 비교 카드를 얹는 블록 ---------- */
.split-hero{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  border:1px solid var(--line-2);background:var(--surface);
  padding:clamp(22px,3vw,44px);
}
.split-hero .split{position:relative;z-index:1;}

/* 태블릿·모바일: 카드가 세로로 쌓이면 배경이 과하게 늘어나므로 이미지와 분리 */
@media(max-width:900px){
  .split-hero{padding:0;background:var(--surface);}
  .split-hero .split{padding:clamp(20px,4vw,28px);}
}

/* 3열 × 2줄로 크게 배치하는 스텝 (홈 Build process) */
.steps--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.steps--3 .step{padding:clamp(26px,2.6vw,36px) clamp(22px,2.2vw,30px);}
.steps--3 .step-no{font-size:.75rem;margin-bottom:18px;}
.steps--3 .step h4{font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.42;margin-bottom:14px;letter-spacing:-.004em;}
.steps--3 .step p{font-size:.9375rem;line-height:1.72;color:var(--fg-2);}
.steps--3 .step-tag{margin-top:22px;font-size:.75rem;padding:7px 13px;}
@media(max-width:900px){.steps--3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.steps--3{grid-template-columns:minmax(0,1fr);}}

/* ---------- 30. 4단계 검증 도식 ---------- */
.verify{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.verify-step{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  padding:clamp(24px,2.4vw,32px);
  transition:.32s var(--ease);
}
.verify-step:hover{border-color:rgb(var(--acc-rgb) / .34);background:var(--surface-2);}
/* 상단 진행 표시 — 단계가 진행될수록 진해짐 */
.verify-step::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--lime);
}
.verify-step:nth-child(1)::before{opacity:.28;}
.verify-step:nth-child(2)::before{opacity:.5;}
.verify-step:nth-child(3)::before{opacity:.74;}
.verify-step:nth-child(4)::before{opacity:1;}

.verify-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.verify-no{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--lime-soft);border:1px solid rgb(var(--acc-rgb) / .32);
  color:var(--lime);font-size:.75rem;font-weight:800;letter-spacing:.04em;
}
.verify-title{font-size:1.0625rem;font-weight:700;letter-spacing:-.004em;line-height:1.4;}
.verify-q{font-size:.9375rem;line-height:1.72;color:var(--fg-2);}
.verify-evi-label{
  margin-top:auto;padding-top:20px;
  font-size:.6875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);
}
.verify-evi{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.verify-evi li{
  font-size:.75rem;line-height:1.5;padding:5px 10px;border-radius:7px;
  background:rgb(var(--ink-rgb) / .04);border:1px solid var(--line);color:var(--fg-2);
}
@media(max-width:1100px){.verify{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.verify{grid-template-columns:minmax(0,1fr);}}

/* ---------- 31. 이미지를 배경으로 쓰는 CTA (텍스트는 좌측 여백에) ---------- */
.cta--image{
  display:flex;align-items:center;
  min-height:clamp(420px,36vw,560px);
  background:var(--surface);
}
.cta--image::before{display:none;}          /* 기본 CTA의 라임 글로우 제거 */
/* 사진 위 CTA 는 글을 가운데로 */
.cta--image .cta-inner{margin-inline:auto;text-align:center;}
.cta--image .eyebrow{justify-content:center;}
.cta--image .btn-row{justify-content:center;}
.cta-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 35%;
}
/* 왼쪽은 진하게, 오른쪽(인물 쪽)은 열어 두는 가로 스크림 */
.cta--image::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* 글이 가운데로 옮겨져 가림막도 가운데가 가장 짙게 */
  background:
    radial-gradient(ellipse 62% 78% at 50% 50%,rgb(var(--bg-rgb) / .42) 0%,rgb(var(--bg-rgb) / 0) 72%),
    linear-gradient(180deg,rgb(var(--bg-rgb) / .84) 0%,rgb(var(--bg-rgb) / .74) 44%,rgb(var(--bg-rgb) / .86) 100%);
}
.cta--image .cta-inner{position:relative;z-index:1;max-width:min(720px,92%);}

/* 태블릿·모바일: 이미지 위 / 텍스트 아래로 분리 */
@media(max-width:820px){
  .cta--image{display:block;padding:0;min-height:0;}
  .cta--image::after{display:none;}
  .cta-bg{position:relative;height:auto;aspect-ratio:16/10;}
  .cta--image .cta-inner{max-width:none;padding:clamp(28px,5vw,44px);}
}

/* ---------- 32. 좌우 스와이프 슬라이더 ---------- */
.swipe{position:relative;}
.swipe-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;
}
.swipe-count{font-size:.875rem;color:var(--fg-3);letter-spacing:.02em;}
.swipe-count b{color:var(--lime);font-weight:700;}
.swipe-nav{display:flex;gap:8px;}
.swipe-btn{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--line-2);background:var(--surface);color:var(--fg);
  display:grid;place-items:center;transition:.25s var(--ease);
}
.swipe-btn:hover:not(:disabled){border-color:var(--lime);color:var(--lime);background:var(--lime-soft);}
.swipe-btn:disabled{opacity:.3;cursor:not-allowed;}
.swipe-btn svg{width:18px;height:18px;}

.swipe-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  gap:clamp(14px,1.8vw,24px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.swipe-track::-webkit-scrollbar{display:none;}
.swipe-track:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:var(--radius);}

.swipe-slide{
  scroll-snap-align:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,40px);
}
.swipe-slide-no{
  display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--lime);
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
}
.swipe-slide-title{
  font-size:clamp(1.25rem,2vw,1.75rem);font-weight:700;letter-spacing:-.008em;line-height:1.34;
  margin:10px 0 18px;
}

.swipe-bar{height:2px;background:var(--line);border-radius:2px;margin-top:20px;overflow:hidden;}
.swipe-bar span{display:block;height:100%;width:25%;background:var(--lime);border-radius:2px;transition:width .35s var(--ease);}

@media(max-width:560px){
  .swipe-head{flex-direction:column;align-items:flex-start;gap:12px;}
  .swipe-btn{width:42px;height:42px;}
}

/* ---------- 33. 페이지 히어로 + 우측 이미지 ---------- */
.page-hero--split .page-hero-inner{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,4.5vw,64px);align-items:center;
}
.page-hero--split .page-hero-copy{min-width:0;}
.page-hero-figure{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  border:1px solid var(--line-2);aspect-ratio:16/10;
  box-shadow:0 40px 90px -55px rgb(var(--shadow-rgb) / .9);
}
.page-hero-figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.02) brightness(1.02) contrast(1.02);
}
.page-hero-figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--bg-rgb) / 0) 55%,rgb(var(--bg-rgb) / .24) 100%);
}
@media(max-width:900px){
  .page-hero--split .page-hero-inner{grid-template-columns:minmax(0,1fr);gap:28px;}
  .page-hero-figure{aspect-ratio:16/9;}
}

/* FAQ 아코디언: 컨테이너는 전체 폭, 답변 본문만 읽기 좋은 폭으로 제한 */
.acc--faq .acc-btn{padding-right:20px;}
.acc--faq .acc-panel-inner{max-width:62em;padding-right:0;}

/* ---------- 34. 화면 전체 폭 배경 블록 (full-bleed) ---------- */
/* section 의 직계 자식으로 두어 100vw(스크롤바 포함) 없이 화면 전체 폭 확보 */
.bleed{
  width:100%;max-width:none;margin-inline:0;
  border-radius:0;border-left:0;border-right:0;
}
/* 화면 전체를 쓰는 밴드는 위아래 실선을 두지 않는다 */
.stat-hero.bleed,.split-hero.bleed{border-top:0;border-bottom:0;}
/* 화면 전체 밴드로 끝나는 섹션은 푸터에 바로 붙인다 */
.section--flush{padding-block:0;}
/* 배경은 화면 전체로, 안의 내용은 본문 컨테이너 폭 유지 */
.bleed-inner{
  position:relative;z-index:1;          /* 스크림(::after) 위로 올라오도록 */
  width:100%;max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}
.stat-hero.bleed,
.split-hero.bleed,
.cta.bleed{padding-inline:0;}
.stat-hero.bleed{min-height:clamp(400px,30vw,520px);}
.cta--image.bleed{min-height:clamp(440px,34vw,600px);}

@media(max-width:768px){
  .stat-hero.bleed .bleed-inner,
  .split-hero.bleed .bleed-inner{padding-inline:clamp(20px,5vw,40px);}
}

/* ---------- 35. 이미지 배경 위에 섹션 내용을 얹는 밴드 ---------- */

/* 섹션 헤드를 품는 통계 밴드 — 상단까지 스크림을 올림 */
.stat-hero--head{align-items:stretch;flex-direction:column;justify-content:center;}
.stat-hero--head::after{
  background:linear-gradient(180deg,rgb(var(--bg-rgb) / .86) 0%,rgb(var(--bg-rgb) / .80) 34%,rgb(var(--bg-rgb) / .86) 68%,rgb(var(--bg-rgb) / .94) 100%);
}
.stat-hero--head{min-height:clamp(520px,42vw,680px);padding-block:clamp(48px,5vw,72px);}
.stat-hero--head .section-head{margin-bottom:clamp(32px,4vw,56px);}
@media(max-width:768px){
  .stat-hero--head{min-height:0;}
  .stat-hero--head .section-head{margin-bottom:28px;}
}

/* ---------- 36. 이미지를 배경으로 쓰는 페이지 히어로 ---------- */
.page-hero--image{
  /* 가운데 정렬이면 글 길이에 따라 시작점이 달라진다 — 위쪽 기준으로 고정 */
  display:flex;align-items:flex-start;
  min-height:clamp(400px,32vw,560px);
  padding-top:calc(var(--header-h) + clamp(46px,5.2vw,74px));
  padding-bottom:clamp(36px,4vw,60px);
}
.page-hero-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
/* 인물·장치가 오른쪽에 있는 이미지들 — 왼쪽은 진하게, 오른쪽은 열어 둠 */
.page-hero--image::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgb(var(--bg-rgb) / .94) 0%,rgb(var(--bg-rgb) / .90) 44%,rgb(var(--bg-rgb) / .80) 70%,rgb(var(--bg-rgb) / .42) 100%),
    linear-gradient(180deg,rgb(var(--bg-rgb) / .62) 0%,rgb(var(--bg-rgb) / .08) 34%,rgb(var(--bg-rgb) / .10) 66%,rgb(var(--bg-rgb) / .46) 100%);
}
.page-hero--image .page-hero-inner{position:relative;z-index:1;}
.page-hero--image .page-hero-copy{max-width:min(960px,80%);}
/* 제목은 넓게, 설명문은 읽기 좋은 폭으로 따로 잡는다 */
.page-hero--image .lead{max-width:700px;}

@media(max-width:900px){
  /* 좁은 화면에서는 가로 그라데이션으로는 부족하므로 전체를 고르게 어둡게 */
  .page-hero--image .page-hero-copy{max-width:none;}
  .page-hero--image::after{
    background:linear-gradient(180deg,rgb(var(--bg-rgb) / .78) 0%,rgb(var(--bg-rgb) / .72) 40%,rgb(var(--bg-rgb) / .86) 100%);
  }
}

/* ---------- 37. 섹션 배경 사진 + 프레임 없는 채팅 목업 ---------- */
.hero-bg-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 40%;
}
/* 프레임을 벗고 배경 위에 바로 놓이는 채팅 목업 */
.chat-mock--bare{
  border:0;background:none;padding:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.chat-mock--bare .chat-a{border:0;background:none;padding:0;}
.chat-mock--bare .chat-logos span{
  background:rgb(var(--bg-rgb) / .55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.chat-mock--bare .chat-q{background:rgba(29,34,38,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.chat-mock--bare .chat-item{background:rgb(var(--bg-rgb) / .52);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.chat-mock--bare .chat-you{background:rgb(var(--acc-rgb) / .16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}

/* ---------- 39. 아주 좁은 화면에서 버튼 글자가 잘리지 않도록 ---------- */
@media(max-width:400px){
  .btn-row{flex-direction:column;align-items:stretch;}
  .btn-row .btn{width:100%;white-space:normal;text-align:center;}
  .btn-lg{padding:16px 22px;font-size:1rem;}
}

/* ---------- 40. HERO — 미니멀 전면형 (1안) ---------- */
.hero.hero--mono{
  --hero-w:800;          /* 참고 사이트와 완전히 같은 무게를 원하면 900 */
  --hero-brk-gap:.12em;  /* 대괄호와 글자 사이 */

  position:relative;
  background:var(--bg);              /* 순검정. 사진 없음 → 대비가 계산으로 보장된다 */
  overflow:hidden;overflow:clip;     /* clip 은 스크롤 컨테이너를 안 만든다 */
  display:flex;align-items:center;
  min-height:min(78vh,735px);min-height:min(78svh,735px);
  padding-top:calc(var(--header-h) + clamp(28px,2vw,32px));
  padding-bottom:clamp(64px,6.4vw,92px);
}
@media(max-height:680px){.hero.hero--mono{min-height:0;}}
/* 세로가 짧은 노트북에서 버튼·메타까지 첫 화면 안에 들어오게 여백을 줄인다 */
@media(max-height:820px){
  .hero.hero--mono{
    padding-top:calc(var(--header-h) + clamp(20px,2vw,26px));
    padding-bottom:clamp(48px,4.4vw,64px);
  }
}

/* 왼쪽 위 라임 글로우. 최대 알파 .10 은 임의값이 아니라 계산 상한이다 —
   .13 이면 글로우 중심에서 --fg-3 대비가 4.47:1 로 AA 미달, .10 이면 4.83:1 로 통과. */
.hero-glow{
  position:absolute;z-index:0;pointer-events:none;
  left:clamp(-200px,-7vw,0px);top:calc(var(--header-h) * -1.1);
  width:min(1180px,132%);aspect-ratio:1;
  background:radial-gradient(circle at 36% 34%,
    rgb(var(--acc-rgb) / .10) 0%,rgb(var(--acc-rgb) / .034) 34%,transparent 66%);
}

.hero-mono-inner{position:relative;z-index:1;width:100%;}

.hero-h1{
  margin-top:clamp(18px,2vw,28px);
  font-size:clamp(3rem,6.95vw,6.125rem);     /* 48px … 6.95vw … 98px (PC 2줄) */
  font-weight:var(--hero-w);
  line-height:1.18;
  letter-spacing:-.03em;                     /* .display 의 -.016em 보다 조인다 */
  color:var(--fg);
}
.hero-h1-vis{display:block;}
.hl{display:block;}                          /* 한 줄 단위 */
.hp{display:inline;}                         /* PC: 한 줄 안에 두 조각이 나란히 */
.hp--slot{white-space:nowrap;}               /* [이름]에 는 절대 안 쪼개진다 */

.brk{display:inline-block;font-weight:200;color:var(--fg-2);}
.brk--l{margin-right:var(--hero-brk-gap);}
.brk--r{margin-left:var(--hero-brk-gap);}

/* min-width 라서, 만에 하나 폰트가 예상보다 넓어도 넘치지 않고 슬롯이 늘어난다 */
.typeslot{display:inline-block;text-align:left;}   /* 이름 길이만큼만 차지 → ]에 가 따라붙는다 */
.typed{color:var(--lime);}
.caret{
  display:inline-block;margin-left:.04em;
  font-weight:200;color:var(--lime);
  animation:heroCaret 1.05s steps(1,end) infinite;
}
/* 치거나 지우는 중에는 커서를 켜 두고, 멈춰 있을 때만 깜빡인다 */
.typeslot.is-typing .caret{animation:none;opacity:1;}
@keyframes heroCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

.hero-lead{
  margin-top:clamp(22px,2.6vw,34px);
  max-width:36em;
  font-size:clamp(1.0625rem,1.4vw,1.25rem);
  line-height:1.68;color:var(--fg-2);
}
.hero--mono .btn-row{margin-top:clamp(26px,3vw,40px);}

@media(prefers-reduced-motion:reduce){
  .caret{animation:none;opacity:0;}   /* JS 도 시작 전에 return → Perplexity 가 정지 상태로 남는다 */
}

/* 모바일: 네 줄로 나누고 글자를 더 키운다 (한 줄이 짧아진 만큼 여유가 생긴다) */
@media(max-width:767px){
  .hero-h1{font-size:clamp(2.125rem,11.5vw,3.875rem);line-height:1.22;}  /* 34px … 11.5vw … 62px */
  .hp{display:block;}
}

/* ---------- 41. ANSWER BAND — 히어로에서 나온 사진 + chat-mock ---------- */
.answer-band{
  position:relative;overflow:hidden;overflow:clip;
  /* 사진 띠 안쪽 여백을 Ground 띠와 같은 값으로 — 글이 띠 위쪽에 붙지 않게 */
  padding-block:clamp(52px,6vw,88px);
}
.answer-band-scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--bg-rgb) / .90) 0%,rgb(var(--bg-rgb) / .74) 30%,rgb(var(--bg-rgb) / .80) 70%,rgb(var(--bg-rgb) / .94) 100%),
             linear-gradient(90deg,rgb(var(--bg-rgb) / .62) 0%,rgb(var(--bg-rgb) / .20) 58%,rgb(var(--bg-rgb) / .34) 100%);
}
.answer-band-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,5vw,72px);align-items:start;
}
@media(max-width:1024px){.answer-band-inner{grid-template-columns:minmax(0,1fr);}}

/* 아주 좁은 화면에서 지정한 네 줄이 더 쪼개지지 않도록 한 단계 줄인다 */
@media(max-width:345px){
  .answer-copy h2{font-size:1.5rem;}
}

/* ---------- 42. 밝은 배경 구간 ---------- */
/* 페이지 아래쪽 분위기를 바꾸는 구간.
   색 변수만 갈아끼우면 대부분의 부품이 알아서 따라온다.
   구간 안의 부품은 이 값을 그대로 물려받는다. */
.section--light{
  --bg:#F2F4F3;
  --bg-soft:#E9EDEB;
  --surface:#FFFFFF;
  --surface-2:#F7F9F8;
  --surface-3:#EDF1EF;
  --fg:#0E1413;
  --fg-2:#141414;
  --fg-3:#525A57;
  --line:rgba(0,0,0,.10);
  --line-2:rgba(0,0,0,.17);
  /* 강조색은 밝은 바탕에서 읽히도록 어둡게 — 색상각은 그대로 */
  --lime:#00704B;      --lime-deep:#005A3D;  --lime-soft:rgba(0,112,75,.10);
  --amber:#AF4928;     --amber-soft:rgba(175,73,40,.10);
  --gold:#BA4E2A;      --gold-soft:rgba(186,78,42,.10);
  --bg-rgb:242 244 243; --ink-rgb:0 0 0;
  --acc-rgb:0 112 75; --gold-rgb:186 78 42; --amber-rgb:127 92 25; --danger-rgb:163 42 30;
  background:var(--bg);
  color:var(--fg);
  /* 등장 전 아래로 밀려난 요소가 다음 섹션을 침범해 사진에 덮이지 않도록 스스로 가린다.
     덕분에 콘텐츠가 섹션 경계 뒤에서 올라오는 모양이 된다 */
  overflow:hidden;
}
/* 값이 박혀 있어 변수로 안 따라오는 것들만 따로 */
.section--light .flow-item:hover,
.section--light .flow-item:focus-visible{border-color:rgba(0,112,75,.42);}
.section--light .tl-head{background:rgba(0,0,0,.03);}
.section--light .tl-col:nth-child(2) .tl-block > h5{color:#005EEB;}
.section--light .tl-col:nth-child(3) .tl-block > h5{color:#6B3BF7;}
/* 아래쪽 구간은 제목을 크게 키워 분위기를 바꾼다 */
.section--light .h2{font-size:clamp(2.125rem,4.9vw,4rem);font-weight:900;line-height:1.2;letter-spacing:-.02em;}
/* 64px 에서도 의도한 줄바꿈이 유지되도록 제목 칸을 넓히고, 설명문은 읽기 좋은 폭으로 되돌린다 */
.section--light .section-head{max-width:1120px;}
.section--light .section-head .lead{max-width:820px;}
.section--light .section-head--center .lead{margin-inline:auto;}

/* ---------- 43. 스크롤에 맞춰 제목이 채워지는 효과 ---------- */
/* 색이 아니라 투명도를 바꾼다 — 초록·테라코타 강조가 그대로 살아 있게 */
.fill-char{opacity:.15;transition:opacity .2s var(--ease);}
.fill-char.is-on{opacity:1;}
/* 밝은 구간은 더 멀리서 · 더 느리게 올라온다 — 장면이 바뀐 느낌 */
.section--light .reveal{
  translate:0 150px;
  transition:opacity .8s cubic-bezier(.25,.1,.25,1),translate .8s cubic-bezier(.25,.1,.25,1),
             scale .8s cubic-bezier(.25,.1,.25,1),
             transform .32s var(--ease),background-color .32s var(--ease),border-color .32s var(--ease);
}
.section--light .reveal--l{translate:-150px 0;}
.section--light .reveal--r{translate:150px 0;}
/* 위 두 줄과 .section--light .reveal 이 .reveal.is-in 과 순위가 같아
   등장이 끝나도 제자리로 안 돌아오던 문제 — 더 구체적인 규칙으로 확실히 되돌린다 */
.section--light .reveal.is-in{translate:none;scale:none;}
.section--light .reveal[data-d="1"]{transition-delay:.09s;}
.section--light .reveal[data-d="2"]{transition-delay:.18s;}
.section--light .reveal[data-d="3"]{transition-delay:.27s;}
.section--light .reveal[data-d="4"]{transition-delay:.36s;}
.section--light .reveal[data-d="5"]{transition-delay:.45s;}
@media(prefers-reduced-motion:reduce){
  .fill-char{opacity:1;}
  .reveal,.section--light .reveal{translate:none;scale:none;transition:none;}
}

/* 밝은 바탕으로 옮겨 온 부품 — 값이 박혀 있어 변수로 안 따라오는 초록을 어둡게 */
.section--light .card--lime{border-color:rgba(0,112,75,.34);}
.section--light .tick-list li::before{
  border-color:rgba(0,112,75,.45);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300704B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* ---------- 44. 하단 고정 블록 — 도입 문의 + 푸터 ---------- */
/* 모든 페이지 맨 아래에 같은 모양으로 들어간다.
   문의를 위에 두고 기존 푸터 내용을 이어 붙여 하나의 판으로 읽히게 한다. */
.site-footer{position:relative;overflow:hidden;overflow:clip;}
.site-footer::before{
  content:"";position:absolute;left:50%;top:-46%;width:min(980px,94%);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgb(var(--acc-rgb) / .11),transparent 64%);
}
.site-footer > .container{position:relative;z-index:1;}
.foot-band{
  padding-bottom:clamp(40px,4.6vw,64px);
  margin-bottom:clamp(40px,4.6vw,64px);
  border-bottom:1px solid var(--line);
}
.foot-band-inner{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,4.4vw,64px);align-items:start;
}
@media(max-width:900px){.foot-band-inner{grid-template-columns:minmax(0,1fr);}}
.foot-title{
  margin-top:14px;font-size:clamp(1.25rem,1.85vw,1.5rem);font-weight:600;
  line-height:1.42;letter-spacing:-.006em;color:var(--fg);
}
/* 「…않는다면,」 에서 줄이 넘어가도록 칸 폭을 맞췄다 (한 줄 후보 29.2em) */
.foot-lead{margin-top:12px;font-size:.9375rem;line-height:1.75;color:var(--fg-2);max-width:29.6em;}
.foot-tel{
  display:inline-block;margin-top:clamp(16px,1.8vw,22px);
  font-size:clamp(1.375rem,1.9vw,1.75rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.1;color:var(--fg);transition:color .22s var(--ease);
}
.foot-tel:hover{color:var(--lime);}
.foot-hours{margin-top:10px;font-size:.8125rem;color:var(--fg-3);line-height:1.7;}
/* 왼쪽 칸 아래 빈자리를 채우는 연락처 카드 — 안내용이라 색도 움직임도 없다 */
.foot-contact-t{
  margin-top:clamp(20px,2.2vw,26px);margin-bottom:12px;
  font-size:.6875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);
}
.foot-contact-list{display:flex;flex-wrap:wrap;gap:12px clamp(20px,2.4vw,32px);}
.foot-contact-list .tiny{font-size:.6875rem;margin-bottom:1px;}
.foot-contact-list .h5{font-size:.875rem;font-weight:400;line-height:1.5;}
.foot-contact-list .fc-row{flex:0 0 100%;}   /* 운영 시간은 한 줄 아래로 */
.foot-contact-list .h5 a{color:var(--fg-2);transition:color .22s var(--ease);}
.foot-contact-list .h5 a:hover{color:var(--lime);}
.foot-hours a{color:var(--fg-2);}
.foot-hours a:hover{color:var(--lime);}
.foot-form .form-grid{gap:16px;}
.foot-form .field textarea{min-height:104px;}
.foot-form-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-top:18px;
}
/* 보내기 버튼을 옆의 동의 체크박스와 같은 높이로 (60px → 46px) */
.foot-form-foot .btn{padding:10px 24px;font-size:.9375rem;}
/* 문의 폼이 이미 있는 페이지에서는 왼쪽 글만 가로로 편다 */
.foot-band--plain .foot-band-inner{grid-template-columns:minmax(0,1fr);}
.foot-band--plain .foot-band-copy{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px clamp(28px,4vw,56px);}
.foot-band--plain .foot-title,
.foot-band--plain .foot-tel,
.foot-band--plain .foot-hours{margin-top:0;}
.foot-band--plain .foot-lead{flex:0 0 100%;margin-top:0;max-width:none;}
.foot-band--plain .eyebrow{flex:0 0 100%;}   /* 라벨은 한 줄 차지, 나머지는 가로로 */

/* ---------- 45. 겹치며 올라오는 구축 프로세스 5단 ---------- */
/* 다섯 판이 모두 화면 위쪽에 붙어(sticky) 있고, 다음 판이 올라와 앞 판을 덮는다.
   판마다 배경·글자색을 통째로 바꿔서 장이 넘어가는 느낌을 준다. */
.stack{position:relative;}
.stack-panel{
  position:sticky;
  top:var(--header-h);
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:flex-start;   /* 내용 양이 달라도 시작점이 같도록 */
  padding-top:clamp(52px,6.2vw,96px);padding-bottom:clamp(36px,4.6vw,68px);
  background:var(--pbg);color:var(--pfg);
  border-top:1px solid var(--pline);
  border-radius:clamp(16px,2vw,28px) clamp(16px,2vw,28px) 0 0;
  box-shadow:0 -22px 54px -26px rgb(var(--shadow-rgb) / .72);
  overflow:hidden;
}
.stack-panel > .container{width:100%;}
.stack-panel .eyebrow{color:var(--plab);}
.stack-panel .h2,.stack-panel .h3,.stack-panel .h4,.stack-panel .h5{color:var(--pfg);}
.stack-panel .lead,.stack-panel .small,.stack-panel .tiny{color:var(--pfg2);}
.stack-panel .pacc{color:var(--pacc);}

/* 판 안쪽 항목 배치 */
.pgrid{
  display:grid;gap:1px;
  /* 선을 바탕색으로 깔면, 화면 배율에 따라 칸 오른쪽 끝이 반올림되면서
     맨 오른쪽에 한 픽셀짜리 세로선이 삐져나온다(100%에서 보이고 90%에서 사라짐).
     좌우 1px 을 비워 둔 그림으로 깔면 어느 배율에서도 안 새어 나온다. */
  background:linear-gradient(var(--pline),var(--pline)) no-repeat 1px 0 / calc(100% - 2px) 100%;
  border-top:1px solid var(--pline);border-bottom:1px solid var(--pline);
  margin-top:clamp(26px,3.2vw,42px);
}
.pgrid--6{grid-template-columns:repeat(6,minmax(0,1fr));}
.pgrid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.pgrid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.pgrid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:700px){.pgrid--2{grid-template-columns:minmax(0,1fr);}}
@media(max-width:900px){.pgrid--3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.pgrid--3{grid-template-columns:minmax(0,1fr);}}
@media(max-width:1100px){.pgrid--6{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:820px){.pgrid--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.pgrid--6{grid-template-columns:repeat(2,minmax(0,1fr));}}
.pitem{
  position:relative;overflow:hidden;background:var(--pbg);
  padding:clamp(22px,2.4vw,32px) clamp(16px,1.8vw,26px);
}
/* 단계가 한눈에 보이도록 큰 번호를 옅게 깔아 둔다 */
.pnum{
  position:absolute;right:8px;top:-4px;
  font-size:clamp(2.5rem,3.6vw,3.25rem);font-weight:800;line-height:1;
  letter-spacing:-.05em;color:var(--pacc);opacity:.18;pointer-events:none;
}
.pitem-no{
  display:block;font-size:.75rem;font-weight:800;letter-spacing:.1em;
  color:var(--plab);margin-bottom:12px;
}
.pitem-t{font-size:1.0625rem;font-weight:700;line-height:1.4;color:var(--pfg);}
.pitem-d{margin-top:9px;font-size:.875rem;line-height:1.65;color:var(--pfg2);}
.pitem-no b{font-size:1.5rem;line-height:0;vertical-align:-3px;letter-spacing:0;color:var(--pacc);}

/* 판마다 다른 색 */
.stack-panel--1{--pbg:#070809;--pfg:#F3F6F4;--pfg2:#AEB7B2;--pacc:#00D992;--plab:#D97959;--pline:rgba(255,255,255,.10);--pfill:rgba(255,255,255,.04);}
.stack-panel--2{--pbg:#E6E9E7;--pfg:#0E1413;--pfg2:#49514F;--pacc:#00704B;--plab:#AA4827;--pline:rgba(0,0,0,.12);--pfill:rgba(255,255,255,.6);--ink-rgb:0 0 0;}
.stack-panel--3{--pbg:#0F2B25;--pfg:#F3F6F4;--pfg2:#AFBDB7;--pacc:#4FE8B0;--plab:#DE8B6E;--pline:rgba(255,255,255,.12);--pfill:rgba(255,255,255,.05);}
.stack-panel--4{--pbg:#D9A441;--pfg:#171003;--pfg2:#2A1E06;--pacc:#0B4A33;--plab:#4A3610;--pline:rgba(23,16,3,.18);--pfill:rgba(255,255,255,.16);--ink-rgb:23 16 3;}
.stack-panel--5{--pbg:#161A1D;--pfg:#F3F6F4;--pfg2:#AEB7B2;--pacc:#00D992;--plab:#D97959;--pline:rgba(255,255,255,.12);--pfill:rgba(255,255,255,.05);}

/* 첫 판도 앞 단락(What we do) 위로 덮으며 올라오므로 그림자를 남긴다 */
@media(max-width:700px){
  .stack-panel{min-height:0;padding-block:clamp(44px,9vw,64px);border-radius:0;}
  .stack-panel{position:relative;top:auto;}   /* 좁은 화면에서는 그냥 차례대로 */
}
@media(prefers-reduced-motion:reduce){
  .stack-panel{position:relative;top:auto;min-height:0;}
}
/* 판마다 색이 달라서 버튼도 그 판의 색을 따라간다 */
.stack-panel .btn-ghost{color:var(--pfg);border-color:var(--pline);background:transparent;}
.stack-panel .btn-ghost:hover{color:var(--pacc);border-color:var(--pacc);background:transparent;}

/* ---------- 46. 선으로만 나눈 칸 (What we do 6개) ---------- */
/* 박스 대신 1px 틈을 두고 그 사이로 바탕색이 비치게 해서 선을 만든다.
   칸 수가 바뀌어도 선이 저절로 따라오므로 화면 폭마다 따로 손댈 필요가 없다. */
.linegrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:linear-gradient(var(--line),var(--line)) no-repeat 1px 0 / calc(100% - 2px) 100%;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:clamp(30px,3.6vw,48px);
}
@media(max-width:900px){.linegrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.linegrid{grid-template-columns:minmax(0,1fr);}}
.lg-item{
  display:flex;flex-direction:column;background:var(--bg);
  padding:clamp(26px,2.8vw,38px) clamp(18px,2vw,28px);
}
.lg-num{
  display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;
  color:var(--lime);margin-bottom:14px;
}
.lg-t{font-size:1.25rem;font-weight:600;line-height:1.42;letter-spacing:-.004em;color:var(--fg);}
.lg-d{margin-top:10px;margin-bottom:22px;font-size:.9375rem;line-height:1.7;color:var(--fg-2);}
.lg-icon{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  margin-top:auto;align-self:flex-end;
  background:var(--lime-soft);border:1px solid rgba(0,112,75,.28);color:var(--lime);
}
.lg-icon svg{width:19px;height:19px;}

/* ---------- 47. 앞 단락을 고정해 두고 다음 단락이 덮으며 올라오게 ---------- */
/* 스택과 같은 원리. 덮이는 쪽만 고정하고, 덮는 쪽은 평소대로 흐른다.
   고정된 요소는 위치가 잡힌 요소라 나중 형제보다 위에 그려지므로 z-index 순서를 명시한다. */
.coverwrap{position:relative;}
.cover-pin{
  position:sticky;top:var(--header-h);z-index:0;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;
}
.cover-pin > .split-hero{width:100%;}
/* 덮으며 올라오는 쪽 — 스택 판과 같은 모양으로 경계를 보여 준다.
   자기도 고정돼 있어야 다음 판이 이 위를 덮으며 올라올 수 있다. */
#mission{
  position:sticky;top:var(--header-h);z-index:1;
  border-radius:clamp(16px,2vw,28px) clamp(16px,2vw,28px) 0 0;
  box-shadow:0 -22px 54px -26px rgb(var(--shadow-rgb) / .72);
}
.stack-panel{z-index:2;}
#whynow{position:relative;z-index:3;}
@media(max-width:700px){
  .cover-pin{position:relative;top:auto;min-height:0;display:block;}
}
@media(prefers-reduced-motion:reduce){
  .cover-pin{position:relative;top:auto;min-height:0;display:block;}
}

/* 눌러서 넘어가는 항목 (구축 결과물 6종 → 솔루션 상세) */
.pitem--link{display:flex;flex-direction:column;transition:background-color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);}
.pitem--link:hover{border-color:var(--pacc);transform:translateY(-3px);}
.pitem-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;
  font-size:.8125rem;font-weight:600;color:var(--plab);transition:color .28s var(--ease);
}
.pitem-more svg{width:14px;height:14px;transition:transform .28s var(--ease);}
.pitem--link:hover .pitem-more{color:var(--pacc);}
.pitem--link:hover .pitem-more svg{transform:translateX(4px);}

/* ---------- 48. 개인정보 전문보기 팝업 ---------- */
.agree-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
/* 동의는 고르는 것이므로 네모칸을 실제로 보여 준다 — 알약 모양 대신 */
.agree-row .check{
  padding:0;border:0;border-radius:0;background:transparent;
  gap:9px;font-size:.875rem;color:var(--fg-2);
}
.agree-row .check::before{
  content:"";flex-shrink:0;width:18px;height:18px;border-radius:5px;
  border:1px solid var(--line-2);background:var(--surface-2);
  background-position:center;background-repeat:no-repeat;background-size:11px;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.agree-row .check:hover{color:var(--fg);}
.agree-row .check:hover::before{border-color:var(--lime);}
.agree-row .check:has(input:checked){background:transparent;border:0;color:var(--fg);}
.agree-row .check:has(input:checked)::before{
  background-color:var(--lime);border-color:var(--lime);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304120C' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
/* 키보드로 옮겨 왔을 때 어디에 있는지 보이게 */
.agree-row .check:has(input:focus-visible)::before{outline:2px solid var(--lime);outline-offset:2px;}
.btn-terms{
  font-size:.8125rem;font-weight:600;color:var(--fg-3);
  padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);background:transparent;
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.btn-terms:hover{color:var(--lime);border-color:var(--lime);}
.modal{
  border:0;padding:0;background:transparent;color:var(--fg);
  max-width:min(520px,92vw);width:100%;
}
.modal::backdrop{background:rgba(4,6,7,.72);backdrop-filter:blur(4px);}
.modal-box{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:clamp(22px,3vw,30px);
}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;}
.modal-x{
  width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;
  border-radius:9px;border:1px solid var(--line);color:var(--fg-3);background:transparent;
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.modal-x svg{width:16px;height:16px;}
.modal-x:hover{color:var(--fg);border-color:var(--line-2);}
.modal-list{display:flex;flex-direction:column;gap:14px;}
.modal-list > div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:start;}
.modal-list dt{font-size:.8125rem;font-weight:700;color:var(--fg-3);padding-top:1px;}
.modal-list dd{margin:0;font-size:.9063rem;line-height:1.65;color:var(--fg);}
.modal-note{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.8125rem;line-height:1.7;color:var(--fg-2);
}
.modal-foot{display:flex;justify-content:flex-end;margin-top:20px;}
@media(max-width:520px){
  .modal-list > div{grid-template-columns:minmax(0,1fr);gap:4px;}
}

/* ---------- 49. AI 노출 진단 화면 ---------- */
/* 헤더가 고정이라 첫 화면은 그만큼 내려서 시작한다 */
.dg-intro{padding-top:calc(var(--header-h) + clamp(44px,5vw,72px));}
.dg-intro-inner{max-width:880px;}   /* 설명문이 한 줄로 들어가는 폭 (필요 835px) */
.dg-form{display:flex;flex-wrap:wrap;gap:12px;}
.dg-field{
  flex:1 1 340px;display:flex;align-items:center;
  border:1px solid var(--line-2);border-radius:999px;background:var(--surface);
  padding:0 6px 0 20px;transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.dg-field:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px rgb(var(--acc-rgb) / .13);}
.dg-prefix{font-size:.9375rem;color:var(--fg-3);flex-shrink:0;}
.dg-field input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--fg);
  font:inherit;font-size:1rem;padding:16px 10px;outline:none;
}
.dg-field input::placeholder{color:var(--fg-3);}
.dg-note{margin-top:14px;font-size:.8125rem;line-height:1.7;color:var(--fg-3);}
.dg-form .btn{flex-shrink:0;}
.dg-form .btn[disabled]{opacity:.6;cursor:progress;}

/* 결과 머리 */
.dg-head{margin-bottom:clamp(24px,3vw,36px);}
.dg-checked{font-size:.9375rem;color:var(--fg-2);word-break:break-all;}
.dg-sample{
  margin-top:10px;font-size:.8125rem;color:var(--plab,var(--gold));
  border-left:2px solid currentColor;padding-left:12px;
}
.dg-top{
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  padding-bottom:clamp(28px,3.4vw,44px);border-bottom:1px solid var(--line);
}
@media(max-width:760px){.dg-top{grid-template-columns:minmax(0,1fr);}}
.dg-score{text-align:center;}
.dg-grade{
  display:grid;place-items:center;width:112px;height:112px;margin:0 auto;
  border-radius:50%;border:3px solid currentColor;
  font-size:3.25rem;font-weight:800;line-height:1;letter-spacing:-.04em;
}
.dg-grade[data-g="A"]{color:var(--lime);}
.dg-grade[data-g="B"]{color:var(--lime-deep);}
.dg-grade[data-g="C"]{color:var(--gold);}
.dg-grade[data-g="D"]{color:var(--danger);}
.dg-total{margin-top:16px;font-size:1.75rem;font-weight:800;letter-spacing:-.02em;color:var(--fg);}
.dg-total em{font-style:normal;font-size:.9375rem;font-weight:600;color:var(--fg-3);margin-left:4px;}
.dg-verdict{margin-top:8px;font-size:.875rem;line-height:1.6;color:var(--fg-2);}

/* 세 축 막대 */
.dg-axis{display:grid;grid-template-columns:78px minmax(0,1fr) 44px;gap:14px;align-items:center;}
.dg-axis + .dg-axis{margin-top:18px;}
.dg-axis-name{font-size:.9375rem;font-weight:700;color:var(--fg);}
.dg-axis-name span{display:block;font-size:.6875rem;font-weight:600;color:var(--fg-3);margin-top:2px;}
.dg-bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.dg-bar i{display:block;height:100%;border-radius:999px;background:var(--lime);transition:width .8s var(--ease);}
.dg-axis-num{font-size:1rem;font-weight:800;text-align:right;color:var(--fg);}

/* 항목 */
.dg-groups{margin-top:clamp(28px,3.4vw,44px);display:grid;gap:clamp(20px,2.6vw,32px);}
@media(min-width:900px){.dg-groups{grid-template-columns:repeat(3,minmax(0,1fr));}}
.dg-group h3{font-size:.75rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);margin-bottom:14px;}
.dg-item{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 0;border-top:1px solid var(--line);}
.dg-mark{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.6875rem;font-weight:800;margin-top:1px;}
.dg-mark[data-s="ok"]{background:var(--lime-soft);color:var(--lime);}
.dg-mark[data-s="half"]{background:var(--gold-soft);color:var(--gold);}
.dg-mark[data-s="no"]{background:rgb(var(--danger-rgb) / .10);color:var(--danger);}
.dg-label{font-size:.9063rem;font-weight:600;color:var(--fg);}
.dg-desc{display:block;margin-top:3px;font-size:.8125rem;line-height:1.6;font-weight:400;color:var(--fg-2);}
.dg-pts{font-size:.75rem;font-weight:700;color:var(--fg-3);white-space:nowrap;padding-top:2px;}

/* 로봇 */
.dg-bots,.dg-next{margin-top:clamp(32px,4vw,52px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line);}
.dg-h{font-size:1.125rem;font-weight:700;line-height:1.45;color:var(--fg);margin-bottom:8px;}
.dg-botlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.dg-botlist li{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.8125rem;font-weight:600;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--fg-2);
}
.dg-botlist li[data-ok="1"]{border-color:rgba(0,112,75,.32);color:var(--lime);}
.dg-botlist li[data-ok="0"]{border-color:rgb(var(--danger-rgb) / .34);color:var(--danger);}
/* 밝은 바탕에서는 초록 버튼 글자를 흰색으로 — 어두운 초록 위에 어두운 글자가 얹히던 문제 */
.section--light .btn-lime{color:#FFFFFF;}
.section--light .btn-lime:hover{background:var(--lime-deep);color:#FFFFFF;}
/* 밝은 바탕의 ✕ 표시도 짙게 */
.section--light .dg-mark[data-s="no"]{color:#A32A1E;}

/* ---------- 50. 헤더 버튼 두 개 ---------- */
/* 진단(노랑)과 문의(초록)를 나란히. 높이를 50px → 30px 로 낮췄다 */
.btn-xs{min-height:36px;padding:7px 16px;font-size:.8125rem;line-height:1.5;gap:6px;}
.btn-xs svg{width:13px;height:13px;}
.btn-amber{background:var(--amber);color:#171003;}
.btn-amber:hover{background:#E4B457;transform:translateY(-2px);box-shadow:0 10px 26px -12px rgb(var(--amber-rgb) / .55);}
.header-cta{display:flex;align-items:center;gap:8px;}

/* ---------- 51. 진단 항목 설명 ---------- */
/* 별도 단락이 아니라 입력칸에 딸린 안내 영역. 크기를 한 단계씩 낮춘다 */
.dg-how{
  margin-top:clamp(32px,4vw,52px);max-width:1040px;
  padding:clamp(24px,3vw,34px);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
}
.dg-how-lead{font-size:.9375rem;line-height:1.75;color:var(--fg-2);max-width:60em;}
.dg-how-grid{margin-top:clamp(22px,2.6vw,30px);display:grid;gap:clamp(20px,2.4vw,30px);}
@media(min-width:820px){.dg-how-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.dg-how-t{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:.8125rem;font-weight:600;line-height:1.4;color:var(--fg-3);
}
.dg-how-t span{font-size:.9375rem;font-weight:800;letter-spacing:0;color:var(--lime);}
.dg-how-list{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.dg-how-list li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:.8438rem;font-weight:500;line-height:1.5;color:var(--fg-2);
}
/* 항목마다 체크 표시 */
.dg-how-list li::before{
  content:"";flex-shrink:0;width:15px;height:15px;margin-top:2px;border-radius:5px;
  background-color:var(--lime-soft);border:1px solid rgb(var(--acc-rgb) / .30);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300D992' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:9px;background-position:center;background-repeat:no-repeat;
}
.dg-how-note{margin-top:8px;font-size:.8125rem;line-height:1.75;color:var(--fg-3);max-width:66em;}
/* 결과 예시를 펼치는 버튼 */
.dg-peek{margin-top:clamp(22px,2.6vw,30px);}
.dg-peek .btn svg{transition:transform .28s var(--ease);}
.dg-peek .btn:hover svg{transform:none;}
.dg-peek .btn.is-open svg{transform:rotate(180deg);}

/* ---------- 52. 솔루션 도식 ---------- */
/* 도식은 viewBox 로 그려서 폭에 맞춰 통째로 줄어든다.
   그래서 화면이 좁아지면 글자까지 같이 작아진다 — 290px 에서는 6px 이 되어 못 읽는다.
   좁은 화면에서는 줄이지 말고 가로로 넘겨 보게 한다. */
.sol-figure{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
.sol-figure svg{display:block;width:100%;height:auto;}
@media(max-width:820px){
  .sol-figure svg{min-width:440px;}   /* 13px 글자가 9.5px 로는 보인다 */
}
/* 넘길 수 있다는 것을 알 수 있게 얇은 스크롤바를 남긴다 */
.sol-figure::-webkit-scrollbar{height:4px;}
.sol-figure::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px;}
.sol-figure::-webkit-scrollbar-track{background:transparent;}

/* ---------- 53. 솔루션 등장 효과 ---------- */
/* 덩어리째 한 번에 뜨지 않는다.
   글은 위에서부터 한 줄씩, 도식은 선이 그어진 뒤 상자와 글자가 차례로 붙는다. */
@media(prefers-reduced-motion:no-preference){

  /* 부모는 통째로 움직이지 않는다 — 안의 요소가 차례를 맡는다 */
  .sol.reveal{opacity:1;translate:none;}

  /* --- 글 --- */
  .sol-copy > *,
  .sol-copy .tick-list li{opacity:0;translate:0 34px;}
  .sol.is-in .sol-copy > *,
  .sol.is-in .sol-copy .tick-list li{
    opacity:1;translate:none;
    transition:opacity .62s var(--ease),translate .68s var(--ease);
    /* 간격(--tstep)은 글 수에 맞춰 main.js 가 정한다 */
    transition-delay:calc(var(--i,0) * var(--tstep,110ms));
  }
  /* 목록 상자는 자리만 잡고, 안의 줄이 하나씩 뜬다 */
  .sol-copy .tick-list{opacity:1;translate:none;transition:none;}

  /* --- 도식 · 선은 그어진다 --- */
  .sol-figure [data-draw]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);}
  /* 도식은 글이 자리를 잡은 뒤에 그려진다 — 둘이 겹쳐서 뭉개지지 않도록 */
  .sol.is-in .sol-figure [data-draw]{
    stroke-dashoffset:0;
    transition:stroke-dashoffset .82s var(--ease);
    transition-delay:calc(420ms + var(--i,0) * var(--fstep,50ms));
  }

  /* --- 도식 · 면과 글자는 떠오른다 --- */
  .sol-figure [data-pop]{opacity:0;translate:0 10px;}
  .sol.is-in .sol-figure [data-pop]{
    opacity:1;translate:none;
    transition:opacity .5s var(--ease),translate .56s var(--ease);
    transition-delay:calc(420ms + var(--i,0) * var(--fstep,50ms));
  }
}

/* ---------- 54. 회사소개 ---------- */

/* --- 등장 폭을 더 크게 --- */
/* 이 페이지는 읽는 사람이 회사를 처음 만나는 자리다. 움직임을 더 크게 준다.
   .reveal.is-in 은 파일 앞쪽에 있으므로, 순위가 같으면 뒤에 쓴 이 규칙이 이긴다.
   그래서 is-in 도 여기서 다시 못 박아 둔다. */
[data-bold-reveal] .reveal{translate:0 88px;transition-duration:.9s;}
[data-bold-reveal] .reveal--l{translate:-110px 0;}
[data-bold-reveal] .reveal--r{translate:110px 0;}
[data-bold-reveal] .reveal--zoom{translate:0 40px;scale:.86;}
[data-bold-reveal] .reveal.is-in{translate:none;scale:none;}
[data-bold-reveal] .reveal[data-d="1"]{transition-delay:.11s;}
[data-bold-reveal] .reveal[data-d="2"]{transition-delay:.22s;}
[data-bold-reveal] .reveal[data-d="3"]{transition-delay:.33s;}
[data-bold-reveal] .reveal[data-d="4"]{transition-delay:.44s;}
[data-bold-reveal] .reveal[data-d="5"]{transition-delay:.55s;}

/* --- 6단계 도식 : 왼쪽부터 하나씩 --- */
@media(prefers-reduced-motion:no-preference){
  .ground-map.reveal{opacity:1;translate:none;}   /* 통째로 뜨지 않고 안의 요소가 차례로 */
  .ground-map [data-pop]{opacity:0;}
  .ground-map.is-in [data-pop]{
    opacity:1;
    transition:opacity .5s var(--ease);
    transition-delay:calc(var(--i,0) * 55ms);
  }
}

/* --- 차별성 : 질문 → 가져갈 정보 --- */
/* 표를 쓰면 고객의 질문이 자료처럼 읽힌다. 실제 묻는 말로 보이게 한다 */
.qmap{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.2vw,48px) clamp(24px,3vw,44px);
  margin-top:clamp(30px,3.6vw,48px);
}
@media(max-width:900px){.qmap{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.qmap{grid-template-columns:minmax(0,1fr);}}
.qmap-item{padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--line-2);}
.qmap-tag{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.1em;color:var(--amber);}
.qmap-q{
  margin-top:11px;font-size:clamp(1rem,1.35vw,1.1875rem);font-weight:600;
  color:var(--fg-2);line-height:1.45;word-break:keep-all;
}
.qmap-q::before{content:"\201C";}
.qmap-q::after{content:"\201D";}
.qmap-arrow{display:block;width:13px;height:22px;margin:13px 0 11px;color:var(--lime);}
.qmap-a{font-size:.9375rem;font-weight:600;color:var(--fg);line-height:1.5;word-break:keep-all;}

/* --- 전문성 : 박스 없이 지면에 --- */
.exp{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4.4vw,72px);align-items:start;
  margin-top:clamp(30px,3.6vw,48px);
}
@media(max-width:900px){.exp{grid-template-columns:minmax(0,1fr);gap:44px;}}
.exp-role{font-size:.6875rem;font-weight:800;letter-spacing:.12em;color:var(--gold);}
.exp-list{border-top:1px solid var(--line);}
.exp-list li{
  display:grid;grid-template-columns:minmax(90px,.4fr) 1fr;gap:clamp(12px,1.6vw,22px);
  padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.exp-list b{font-weight:700;color:var(--fg);letter-spacing:-.01em;}
.exp-list span{font-size:.9375rem;color:var(--fg-2);word-break:keep-all;}

/* ---------- 55. 기술 페이지 — 박스 없는 배치 ---------- */
/* 테두리와 배경으로 칸을 나누지 않는다. 가는 선과 여백으로만 나눈다. */

/* --- 옆에 색 줄 하나만 그은 문단 --- */
.note{border-left:2px solid var(--line-2);padding-left:clamp(16px,1.8vw,22px);}
.note + .note{margin-top:clamp(16px,1.8vw,22px);}
.note--lime{border-left-color:var(--lime);}
.note--danger{border-left-color:var(--danger);}
.note-t{font-size:1rem;font-weight:600;color:var(--fg);margin-bottom:7px;}
.note p{font-size:.9375rem;color:var(--fg-2);line-height:1.65;}
.note--lime p,.note--danger p{color:var(--fg);}
.note strong.lime{color:var(--lime);}

/* --- 층별 구성 : 위쪽 가는 선으로만 나눈다 --- */
.layers{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,52px) clamp(24px,3vw,44px);
  margin-top:clamp(30px,3.6vw,48px);
}
@media(max-width:900px){.layers{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.layers{grid-template-columns:minmax(0,1fr);}}
.layer{padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--line-2);}
.layer-no{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.12em;color:var(--amber);}
.layer-t{margin-top:10px;font-size:clamp(1.0625rem,1.4vw,1.25rem);font-weight:600;color:var(--fg);}
.layer p{margin-top:11px;font-size:.9375rem;color:var(--fg-2);line-height:1.6;word-break:keep-all;}
.layer .dot-list,.layer .tick-list{margin-top:12px;}
/* 강조 한 줄 — 알약 대신 색 줄 */
.layer-mark{
  margin-top:16px;padding-left:12px;border-left:2px solid var(--lime);
  font-size:.8125rem;font-weight:600;color:var(--fg-2);line-height:1.5;
}
.layer-mark--danger{border-left-color:var(--danger);}
.layer--key .layer-t{color:var(--lime);}

/* --- 단계 흐름 : 번호와 가는 선만 --- */
.flow{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(20px,2.4vw,36px);
  margin-top:clamp(30px,3.6vw,48px);
}
@media(max-width:900px){.flow{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.flow{grid-template-columns:minmax(0,1fr);}}
.flow-step{padding-top:clamp(14px,1.6vw,20px);border-top:1px solid var(--line-2);}
.flow-no{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.12em;color:var(--lime);}
.flow-t{margin-top:9px;font-size:1rem;font-weight:600;color:var(--fg);line-height:1.4;word-break:keep-all;}
/* .flow-t 도 <p> 라서 이 규칙에 덮여 제목이 옅은 회색이 됐다 — 빼 준다 */
.flow-step p:not(.flow-t){margin-top:8px;font-size:.8125rem;color:var(--fg-3);line-height:1.55;word-break:keep-all;}

/* --- 기술 스택 : 표 대신 가는 줄 목록 --- */
.stack-list{margin-top:clamp(30px,3.6vw,48px);border-top:1px solid var(--line);}
.stack-list li{
  display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,1.5fr) minmax(120px,1fr);
  gap:clamp(14px,2vw,28px);padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
@media(max-width:700px){
  .stack-list li{grid-template-columns:minmax(0,1fr);gap:5px;padding:15px 0;}
}
.stack-list b{font-weight:700;color:var(--fg);}
.stack-list span{font-size:.9375rem;color:var(--fg-2);word-break:keep-all;}
.stack-list em{font-style:normal;font-size:.9375rem;font-weight:600;color:var(--lime);}

/* --- 설계 원칙 : 지면에 크게 --- */
/* 이 페이지에는 순서가 이미 둘(시스템 구조 01~06, 업데이트 흐름 01~05) 있다.
   원칙까지 흐름으로 그리면 같은 모양이 세 번이라, 여기는 글로만 크게 놓는다. */
.rules{margin-top:clamp(30px,3.6vw,48px);border-top:1px solid var(--line);}
.rule{
  display:grid;grid-template-columns:clamp(52px,5vw,78px) 1fr;
  gap:clamp(16px,2.4vw,32px);align-items:baseline;
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
}
.rule-no{font-size:.75rem;font-weight:800;letter-spacing:.12em;color:var(--amber);}
.rule p{
  font-size:clamp(1.0625rem,1.7vw,1.4375rem);font-weight:600;
  color:var(--fg);line-height:1.45;word-break:keep-all;
}
@media(max-width:560px){.rule{grid-template-columns:minmax(0,1fr);gap:9px;}}

/* ---------- 56. 왼쪽 제목 고정, 오른쪽 내용 흐름 ---------- */
/* 단락이 시작되면 왼쪽 제목이 자리에 머물고 오른쪽 내용만 지나간다.
   오른쪽이 다 지나가야 다음 단락이 올라온다. */
/* 단락 사이를 넉넉히 둔다. 앞 단락이 완전히 지나간 뒤 다음이 올라와야 흐르는 느낌이 난다 */
.section--pin{padding-block:clamp(64px,9vw,150px);}
.pin{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,5vw,84px);align-items:start;
}
.pin-copy{position:sticky;top:calc(var(--header-h) + clamp(84px,15vh,190px));}
.pin-copy .section-head{margin-bottom:0;max-width:none;}
.pin-copy .h2{font-size:clamp(1.875rem,3.4vw,3rem);}   /* 넓은 화면에서 48px */
@media(max-width:900px){
  .pin{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,40px);}
  .pin-copy{position:static;}
  .pin-copy .h2{font-size:clamp(1.75rem,3.4vw,3rem);}
}

/* 오른쪽 칸은 한 단 좁으므로 열 수를 줄인다 */
.pin-body > *:first-child{margin-top:0;}
/* 오른쪽 내용은 하나씩 지나가야 눈이 따라온다 */
.pin-body .layers{gap:clamp(40px,5.4vw,88px) clamp(26px,3.2vw,50px);}
.pin-body .stepblock{padding:clamp(34px,4.2vw,60px) 0;}
.pin-body .rule{padding:clamp(26px,3.2vw,44px) 0;}
.pin-body .flow-step{padding:clamp(24px,3.2vw,42px) 0;}
.pin-body .stack-list li{padding:clamp(20px,2.6vw,34px) 0;}

/* 두 번째 단락부터는 순서를 만든다.
   카피가 먼저 나와 자리를 잡고 → 스크롤하면 그제야 내용이 올라오고 →
   내용이 다 지나간 뒤에도 잠시 카피만 남았다가 → 함께 올라간다.
   오른쪽 칸을 위아래로 밀어 두면 그 순서가 저절로 만들어진다.
   첫 단락은 히어로 바로 다음이라 그대로 둔다. */
/* 나갈 때는 모든 단락이 같다 — 내용이 먼저 사라지고, 간격을 둔 뒤 카피가 뒤따른다 */
.section--pin .pin-body{padding-bottom:clamp(380px,66vh,700px);}
/* 들어올 때는 두 번째 단락부터 — 카피가 먼저 나와 자리를 잡는다.
   첫 단락은 히어로 바로 다음이라 카피와 내용이 같이 시작한다. */
.section--pin ~ .section--pin .pin-body{padding-top:clamp(300px,68vh,700px);}
/* 단락과 단락 사이.
   앞 카피가 화면 위로 완전히 사라진 뒤에 다음 카피가 아래에서 올라오려면
   [화면 높이 - 앞 카피 높이] 만큼 비어 있어야 한다. 카피가 가장 낮은 곳 기준 792px. */
.section--pin + .section--pin{padding-top:clamp(340px,70vh,720px);}
@media(max-width:900px){
  .section--pin .pin-body{padding-bottom:0;}
  .section--pin ~ .section--pin .pin-body{padding-top:0;}
  .section--pin + .section--pin{padding-top:clamp(64px,9vw,150px);}
}

.pin-body .layers{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:1180px){.pin-body .layers{grid-template-columns:minmax(0,1fr);}}
.pin-body .flow{grid-template-columns:minmax(0,1fr);gap:0;}
.pin-body .flow-step{padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--line-2);}
.pin-body .flow-step:first-child{padding-top:0;border-top:0;}
.pin-body .flow-t{font-size:clamp(1.0625rem,1.4vw,1.1875rem);}
.pin-body .flow-step p:not(.flow-t){font-size:.875rem;color:var(--fg-2);}
.pin-body .stack-list li{grid-template-columns:minmax(100px,.85fr) minmax(0,1.3fr);}
.pin-body .stack-list em{grid-column:2;margin-top:4px;}
@media(max-width:700px){
  .pin-body .stack-list li{grid-template-columns:minmax(0,1fr);}
  .pin-body .stack-list em{grid-column:auto;margin-top:2px;}
}
.pin-body .rule{grid-template-columns:clamp(44px,4vw,62px) 1fr;}
.pin-body .rule p{font-size:clamp(1rem,1.35vw,1.1875rem);}

/* --- 펼쳐 둔 단계 (접히지 않는다) --- */
.stepblock{padding:clamp(24px,2.8vw,36px) 0;border-bottom:1px solid var(--line);}
.stepblock:first-child{padding-top:0;}
.stepblock-no{display:block;font-size:.75rem;font-weight:800;letter-spacing:.1em;color:var(--lime);}
.stepblock-t{
  margin-top:9px;margin-bottom:clamp(14px,1.6vw,20px);
  font-size:clamp(1.125rem,1.7vw,1.375rem);font-weight:600;color:var(--fg);line-height:1.35;
}

/* ---------- 57. 한 단락 안에 묶음이 여럿일 때 ---------- */
/* 원칙 · 업데이트 흐름 · 기술 스택을 한 단락으로 합쳤다.
   각 묶음이 이미 가는 선으로 나뉘어 있으므로, 안쪽 목록의 윗선과 여백을 덜어 낸다. */
.pin-body .stepblock .rules,
.pin-body .stepblock .stack-list{border-top:0;margin-top:clamp(14px,1.8vw,22px);}
.pin-body .stepblock .flow{margin-top:clamp(10px,1.4vw,16px);}
.pin-body .stepblock .rule{padding:clamp(15px,1.9vw,23px) 0;}
.pin-body .stepblock .rule:first-child{padding-top:0;}
.pin-body .stepblock .rule p{font-size:clamp(1rem,1.3vw,1.125rem);}
.pin-body .stepblock .flow-step{padding:clamp(15px,1.9vw,23px) 0;}
.pin-body .stepblock .stack-list li{padding:clamp(13px,1.7vw,20px) 0;}
.pin-body .stepblock .stack-list li:first-child{padding-top:0;}
.pin-body .stepblock > p{font-size:.9375rem;color:var(--fg-2);line-height:1.65;}
/* 목록 마지막 줄의 밑선과 묶음 구분선이 겹쳐 두 줄로 보인다 */
.pin-body .stepblock .rule:last-child,
.pin-body .stepblock .stack-list li:last-child,
.pin-body .stepblock .flow-step:last-child{border-bottom:0;padding-bottom:0;}

/* ---------- 58. 기술 페이지 — 글이 한 줄씩 뜬다 ---------- */
/* 묶음이 통째로 뜨지 않고, 그 안의 줄이 차례로 뜬다.
   차례(--i)는 main.js 가 매기고, 움직임은 여기서 맡는다. */
@media(prefers-reduced-motion:no-preference){
  .pin .reveal{opacity:1;translate:none;}       /* 덩어리째 뜨는 것을 끈다 */
  .pin [data-line]{opacity:0;translate:0 34px;}
  .pin .is-in > [data-line],
  .pin .is-in [data-line]{
    opacity:1;translate:none;
    transition:opacity .62s var(--ease),translate .7s var(--ease);
    /* 간격(--step)은 묶음의 줄 수에 맞춰 main.js 가 정한다 */
    transition-delay:calc(var(--i,0) * var(--step,120ms));
  }
}

/* ---------- 59. 밝은 화면 · 어두운 화면 바꾸기 ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex-shrink:0;
  border:1px solid var(--line-2);border-radius:999px;
  background:transparent;color:var(--fg-2);cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.theme-toggle:hover{color:var(--fg);border-color:var(--fg-3);background:rgb(var(--ink-rgb) / .05);}
.theme-toggle:focus-visible{outline:2px solid var(--lime);outline-offset:2px;}
.theme-toggle svg{width:17px;height:17px;}
/* 해와 달 — 지금 화면에 맞는 쪽만 보인다 */
.theme-toggle .t-moon{display:none;}
:root[data-theme="light"] .theme-toggle .t-sun{display:none;}
:root[data-theme="light"] .theme-toggle .t-moon{display:block;}
.mobile-nav .theme-toggle{width:auto;height:auto;border-radius:12px;padding:12px 18px;gap:9px;}
.mobile-nav .theme-toggle::after{content:"화면 밝기 바꾸기";font-size:.9375rem;font-weight:500;}

/* ---------- 60. 밝은 모드에서 손봐야 하는 것 ---------- */
/* 어두운 바탕을 전제로 잡아 둔 글자색 몇 개가 밝은 바탕에서 흐려진다.
   화면에서 대비를 재서 걸린 것만 고친다. */
:root[data-theme="light"] .btn-lime{color:#FFFFFF;}    /* 3.12 → 6.14 */
:root[data-theme="light"] .btn-amber{color:#FFFFFF;}   /* 3.10 → 6.09 */
:root[data-theme="light"] .card-num--past{color:#916450;}  /* 3.81 → 5.07 */

/* 뒤집힌 구역은 다시 어두운 바탕이므로 원래대로 되돌린다 */
:root[data-theme="light"] .section--light .btn-lime{color:#04120C;}
:root[data-theme="light"] .section--light .btn-amber{color:#171003;}
:root[data-theme="light"] .section--light .card-num--past{color:#A8785F;}
/* 4개월 로드맵의 달마다 다른 라벨색 — 밝은 바탕에서는 어두운 쪽으로 */
:root[data-theme="light"] .tl-col:nth-child(2) .tl-block > h5{color:#005EEB;}  /* 2.18 → 5.00 */
:root[data-theme="light"] .tl-col:nth-child(3) .tl-block > h5{color:#6B3BF7;}  /* 2.46 → 5.29 */
:root[data-theme="light"] .section--light .tl-col:nth-child(2) .tl-block > h5{color:#6EA8FF;}
:root[data-theme="light"] .section--light .tl-col:nth-child(3) .tl-block > h5{color:#A78BFA;}

/* ---------- 61. 밝은 모드의 사진 밴드 ---------- */
/* 사진이 어두워서, 어두운 모드용 막 농도(.80~.94)를 그대로 쓰면
   밝은 지면 위에 회색 판 하나가 얹힌 것처럼 보이고 단락이 둘로 갈라진다.
   위아래는 지면색과 거의 같게, 가운데만 살짝 비치게 해서 한 단락으로 이어 준다. */
:root[data-theme="light"] .stat-hero--head::after{
  background:linear-gradient(180deg,
    rgb(var(--bg-rgb) / .985) 0%,
    rgb(var(--bg-rgb) / .94)  30%,
    rgb(var(--bg-rgb) / .94)  70%,
    rgb(var(--bg-rgb) / .99)  100%);
}
:root[data-theme="light"] .stat-hero::after{
  background:linear-gradient(180deg,
    rgb(var(--bg-rgb) / .96) 0%,
    rgb(var(--bg-rgb) / .93) 40%,
    rgb(var(--bg-rgb) / .97) 78%,
    rgb(var(--bg-rgb) / .99) 100%);
}
/* 페이지 머리의 사진도 같은 이유로 옅게 */
:root[data-theme="light"] .page-hero--image .page-hero-bg{opacity:.34;}
/* 뒤집힌 어두운 구역 안에서는 원래대로 */
:root[data-theme="light"] .section--light .stat-hero--head::after{
  background:linear-gradient(180deg,
    rgb(var(--bg-rgb) / .86) 0%,
    rgb(var(--bg-rgb) / .80) 34%,
    rgb(var(--bg-rgb) / .86) 68%,
    rgb(var(--bg-rgb) / .94) 100%);
}

/* ---------- 62. 밝은 모드 — 선으로 나누는 배치 ---------- */
/* 상자와 그림자 대신 가는 선으로 칸을 나눈다. */

/* 단락과 단락 사이에 선을 하나 긋는다 */
:root[data-theme="light"] main > section + section:not(.section--light):not(#build){
  border-top:1px solid var(--line);
}
:root[data-theme="light"] main > .coverwrap + section:not(.section--light):not(#build){
  border-top:1px solid var(--line);
}

/* 카드 — 채움과 그림자를 걷고 선만 남긴다 */
:root[data-theme="light"] .card{
  background:transparent;border-color:var(--line-2);box-shadow:none;
}
:root[data-theme="light"] .card--flat{background:transparent;border-color:var(--line-2);}
:root[data-theme="light"] .card--lime{background:var(--lime-soft);border-color:rgb(var(--acc-rgb) / .34);}
:root[data-theme="light"] .card--danger{background:transparent;border-color:rgb(var(--danger-rgb) / .34);}

/* 머리·바로가기 띠도 선으로만 */
:root[data-theme="light"] .site-header{border-bottom:1px solid var(--line-2);}
:root[data-theme="light"] .anchor-nav{border-bottom:1px solid var(--line);}

/* 그림자는 밝은 지면에서 얼룩으로 보인다 */
:root[data-theme="light"] .stat-hero,
:root[data-theme="light"] .chat-mock,
:root[data-theme="light"] .hero-visual > .chat-mock{box-shadow:none;}

/* 입력칸도 선 위주로 */
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea{background:transparent;border-color:var(--line-2);}

/* 뒤집힌 어두운 구역에서는 원래대로 되돌린다 */
:root[data-theme="light"] .section--light .card{background:var(--surface);border-color:var(--line);}
:root[data-theme="light"] .section--light .card--flat{background:var(--surface-2);}
:root[data-theme="light"] .section--light .field input,
:root[data-theme="light"] .section--light .field select,
:root[data-theme="light"] .section--light .field textarea{background:var(--surface);border-color:var(--line-2);}

/* ---------- 63. 밝은 모드 — 선을 과감하게 ---------- */

/* 단락 구분선을 굵고 진하게. 참고 사이트처럼 지면 전체를 가로지른다 */
:root[data-theme="light"] main > section + section:not(.section--light):not(#build),
:root[data-theme="light"] main > .coverwrap + section:not(.section--light){
  border-top:1px solid rgb(var(--ink-rgb) / .42);
}
/* The difference 는 덮기 구역 안에 있어 위 규칙이 닿지 않는다 */
/* 선이 구역 경계보다 139px 아래에 떠 있어 빈 자리에 줄이 그어졌다.
   선은 구역이 실제로 갈리는 자리에 둔다. */
:root[data-theme="light"] .coverwrap{border-top:1px solid rgb(var(--ink-rgb) / .42);}
/* 제목 아래 선은 뺀다 — 여백만으로 나눈다 */

/* 사진 밴드의 빈 자리를 줄인다 — 사진이 옅어져 위아래가 죽은 공간으로 보인다 */
:root[data-theme="light"] .stat-hero--head{
  min-height:0;
  padding-block:clamp(40px,4.2vw,64px);
}
:root[data-theme="light"] .stat-hero{min-height:0;}

/* 겹쳐 올라오는 판 — 둥근 모서리를 없애고 선으로 경계를 만든다.
   밝은 모드에서는 그림자가 안 보여 덮는 느낌이 사라지기 때문이다. */
:root[data-theme="light"] .stack-panel,
:root[data-theme="light"] #mission{
  border-radius:0;                    /* 모서리는 각지게 — 선으로 나누는 디자인 */
  /* 배경이 모두 같으므로 한 장씩 올라오는 건 그림자가 보여 준다.
     넓고 옅은 층 + 경계 바로 위 짙은 층, 두 겹. */
  box-shadow:
    0 -16px 36px -20px rgb(0 0 0 / .34),
    0 -3px 10px -6px  rgb(0 0 0 / .20);
}
:root[data-theme="light"] .stack-panel{border-top:1px solid rgba(20,20,20,.45);}

/* ---------- 64. 밝은 모드 — 선과 경계를 같은 자리에 ---------- */
/* 전면 밴드로 시작하는 구역은 위 여백 때문에 구분선이 밴드보다 74~235px 위에 떨어져 있었다.
   선 하나, 색 바뀌는 자리 하나로 경계가 둘로 보인다. 여백을 없애 붙인다. */
:root[data-theme="light"] .section:has(> .stat-hero.bleed:first-child),
:root[data-theme="light"] .section:has(> .split-hero.bleed:first-child){padding-top:0;}

/* 밴드 자체는 지면과 같은 색으로 둔다 — 경계는 선이 만든다 */
:root[data-theme="light"] .split-hero{background:transparent;}
:root[data-theme="light"] .stat-hero{background:transparent;}

/* 덮기 구역은 붙임 배치라 밴드 아래 여백만 남긴다 */
:root[data-theme="light"] .cover-pin{padding-top:0;}

/* 뒤집힌 어두운 구역 안에서는 원래대로 */
:root[data-theme="light"] .section--light .split-hero,
:root[data-theme="light"] .section--light .stat-hero{background:var(--surface);}

/* ---------- 65. 밝은 모드 마무리 ---------- */

/* ① 겹쳐 올라오는 판 다섯 장을 밝은 모드에 맞게 뒤집는다.
   어두운 모드는 밝음·어두움이 번갈아 나와 한 장씩 덮는 게 보이는데,
   밝은 모드는 판이 그대로여서 What we do(검정)를 검정 판이 덮고 있었다.
   첫 판을 밝게 바꾸면 그 다음 판도 따라 뒤집어야 순서가 이어진다. */
/* 겹쳐 올라오는 판 다섯 장 — 배경은 모두 지면과 같게 두고 선으로만 나눈다.
   판이 올라오며 덮는 움직임이 선 하나로 보이는지 확인하기 위한 구성이다. */
:root[data-theme="light"] .stack-panel{
  --pbg:var(--bg);
  --pfg:#0E1413;--pfg2:#141414;--pacc:#00704B;--plab:#8C2F14;
  --pline:rgba(20,20,20,.22);--pfill:rgba(20,20,20,.03);--ink-rgb:20 20 20;
  border-top:1px solid rgba(20,20,20,.45);
}

/* ② 대화 화면의 질문 풍선이 어두운 색으로 박혀 있어
   밝은 모드에서 어두운 글자가 어두운 상자 위에 놓였다 */
:root[data-theme="light"] .chat-mock--bare .chat-q{
  background:rgb(var(--bg-rgb) / .94);
  border-color:var(--line-2);
}
:root[data-theme="light"] .section--light .chat-mock--bare .chat-q{
  background:rgba(29,34,38,.86);
  border-color:var(--line-2);
}

/* ---------- 66. GROUND 여섯 단계 그림 — 밝은 화면용 색 ---------- */
:root[data-theme="light"] .ground-map svg rect[fill="rgba(255,255,255,.055)"]{fill:rgba(14,20,19,.05);}
:root[data-theme="light"] .ground-map svg rect[fill="rgba(255,255,255,.025)"]{fill:rgba(14,20,19,.022);}
:root[data-theme="light"] .ground-map svg rect[stroke="rgba(255,255,255,.12)"]{stroke:rgba(14,20,19,.30);}
:root[data-theme="light"] .ground-map svg rect[stroke="rgba(255,255,255,.07)"]{stroke:rgba(14,20,19,.14);}
:root[data-theme="light"] .ground-map svg text[fill="#F3F6F4"]{fill:#0E1413;}
:root[data-theme="light"] .ground-map svg text[fill="#D8DEDA"]{fill:#141414;}
:root[data-theme="light"] .ground-map svg tspan[fill="#00D992"]{fill:#00704B;}
/* 뒤집혀 어두워진 구역 안에서는 원래 색 그대로 */
:root[data-theme="light"] .section--light .ground-map svg rect[fill="rgba(255,255,255,.055)"]{fill:rgba(255,255,255,.055);}
:root[data-theme="light"] .section--light .ground-map svg rect[fill="rgba(255,255,255,.025)"]{fill:rgba(255,255,255,.025);}
:root[data-theme="light"] .section--light .ground-map svg rect[stroke="rgba(255,255,255,.12)"]{stroke:rgba(255,255,255,.12);}
:root[data-theme="light"] .section--light .ground-map svg rect[stroke="rgba(255,255,255,.07)"]{stroke:rgba(255,255,255,.07);}
:root[data-theme="light"] .section--light .ground-map svg text[fill="#F3F6F4"]{fill:#F3F6F4;}
:root[data-theme="light"] .section--light .ground-map svg text[fill="#D8DEDA"]{fill:#D8DEDA;}
:root[data-theme="light"] .section--light .ground-map svg tspan[fill="#00D992"]{fill:#00D992;}

/* ---------- 67. 밝은 화면 푸터 ---------- */
/* 초록 번짐이 흰 바탕에서는 얼룩처럼 보인다 */
:root[data-theme="light"] .site-footer::before{display:none;}

/* ---------- 68. GROUND 구역 사진 ---------- */
/* 사진이 또렷해 글자와 도식을 방해한다. 이 구역만 흐리게 깐다. */
#ground.ground-section{overflow:hidden;overflow:clip;}
#ground .ground-bg{
  filter:saturate(.72) brightness(.74) contrast(1.02) blur(7px);
  transform:scale(1.06);          /* 흐려진 가장자리가 비치지 않도록 */
}
#ground.ground-section::after{
  background:
    radial-gradient(ellipse 60% 55% at 32% 38%,rgb(var(--bg-rgb) / .40) 0%,rgb(var(--bg-rgb) / 0) 72%),
    linear-gradient(180deg,rgb(var(--bg-rgb) / .84) 0%,rgb(var(--bg-rgb) / .70) 34%,rgb(var(--bg-rgb) / .74) 70%,rgb(var(--bg-rgb) / .90) 100%);
}

/* ---------- 69. 밝은 화면 푸터 경계 ---------- */
/* 마지막 구역이 푸터와 같은 색일 때가 있어 경계가 사라진다 */
:root[data-theme="light"] .site-footer{
  background:#E5E8E1;                 /* 지면보다 한 단계 짙게 */
  border-top:1px solid rgb(var(--ink-rgb) / .42);
}

/* 푸터 바탕이 짙어져 라벨이 4.46:1 로 떨어졌다 — 푸터 안에서만 한 톤 낮춘다 */
:root[data-theme="light"] .site-footer .eyebrow{color:#A64524;}

/* ---------- 70. 기술 화면 내용 영역 — 본문 18px ---------- */
/* 묶음마다 14 · 15 · 16px 로 제각각이라 읽는 크기가 들쭉날쭉했다.
   번호와 라벨, 제목은 그대로 두고 본문만 맞춘다. */
.pin-body p:not(.flow-t):not(.stepblock-t):not(.tiny),
.pin-body li,
.pin-body .note-t,
.pin-body .layer-mark,
.pin-body .note p,
.pin-body .stack-list em,
.pin-body .stack-list span,
.pin-body .rule p,
.pin-body .stepblock > p,
.pin-body .stepblock .rule p,
.pin-body .flow-step p:not(.flow-t){
  font-size:1.125rem;
  line-height:1.68;
}

/* ---------- 71. 형광펜이 그어진다 ---------- */
/* 글이 자리를 잡은 뒤(0.34초), 왼쪽에서 오른쪽으로 형광펜이 지나간다.
   줄마다 칠이 따로 잡히도록 box-decoration-break:clone 을 이미 쓰고 있어
   여러 줄이 나란히 그어진다. */
@media(prefers-reduced-motion:no-preference){
  .mark-para .mark{
    background-size:0 100%;
    transition:background-size 1.05s var(--ease) .34s;
  }
  .is-in .mark-para .mark,
  .mark-para.is-in .mark{background-size:100% 100%;}
}

/* ---------- 72. 겹쳐 올라오는 판 — 안쪽이 차례로 뜬다 ---------- */
/* 판이 올라오는 것만으로는 안이 멈춰 보인다.
   덩어리째 뜨는 것은 끄고, 안의 줄과 카드가 차례로 오르게 한다. */
@media(prefers-reduced-motion:no-preference){
  .stack-panel > .container.reveal{opacity:1;translate:none;}
  .stack-panel [data-cell]{opacity:0;translate:0 26px;}
  .stack-panel .is-in [data-cell]{
    opacity:1;translate:none;
    transition:opacity .55s var(--ease),translate .62s var(--ease);
    transition-delay:calc(var(--i,0) * var(--step,90ms));
  }
}


.hero--mono .hero-h1{font-size:clamp(2rem,5.2vw,5.5rem)}
.foot-bottom::before{content:none}

body,button,input,select,textarea,h1,h2,h3{font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif}.brand .official-logo{display:block;width:210px;height:auto;max-width:100%;object-fit:contain}.brand .official-light{display:none}:root[data-theme="light"] .brand .official-dark{display:none}:root[data-theme="light"] .brand .official-light{display:block}.brand-text{display:none}.brand{min-width:180px}.rich-note{font-size:14px;color:var(--fg-2);margin-top:26px}.rich-flow .pitem-t{font-size:1.125rem}.foot-bottom{flex-wrap:wrap;gap:20px}.foot-company-contact{font-size:13px;color:var(--fg-2)}.foot-company-contact a{margin-right:18px}.form-msg[data-state="error"]{color:var(--danger)}.form-msg[data-state="success"]{color:var(--lime)}@media(max-width:700px){.brand .official-logo{width:156px}.brand{min-width:0}.header-inner{gap:15px}.brand .official-logo{max-width:156px}}

/* Remove only backdrop opacity at render time; original logo files remain intact. */
.brand .official-dark{filter:url(#logo-dark-key)}.brand .official-light{filter:url(#logo-light-key)}

/* ---------- 모바일 플로팅 도입문의 버튼 ---------- */
.fab-cta{display:none;}
@media(max-width:768px){
  .header-cta .btn{display:none;}
  .fab-cta{
    display:inline-flex;position:fixed;z-index:98;
    left:50%;transform:translateX(-50%);
    bottom:calc(16px + env(safe-area-inset-bottom));
    padding:14px 26px;border-radius:999px;white-space:nowrap;
    box-shadow:0 12px 32px -10px rgb(0 0 0 / .55),0 0 0 1px rgb(var(--acc-rgb) / .35);
  }
  .fab-cta:hover{transform:translateX(-50%) translateY(-2px);}
  .site-footer{padding-bottom:calc(84px + env(safe-area-inset-bottom));}
}