/* ============================================================
   ArchiRevolution 랜딩 페이지 — styles.css
   Clean Trust: 화이트 바탕 + 블루 팔레트 포인트
   ============================================================ */

:root {
  --mint:   #B6FFFA;
  --sky:    #98E4FF;
  --peri:   #80B3FF;
  --indigo: #687EFF;
  --indigo-deep: #3f4fd6;

  --ink:     #0d1b17;   /* 본문 텍스트 */
  --ink-2:   #4a5a53;   /* 보조 텍스트 */
  --ink-3:   #8a968f;   /* 옅은 텍스트 */
  --line:    #eceeec;   /* 구분선 */
  --bg:      #ffffff;
  --bg-soft: #f7f8f7;

  --wrap: 920px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Pretendard", "Pretendard Variable", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 한글이 글자 단위로 쪼개지지 않고 띄어쓰기(단어) 단위로만 줄바꿈되게 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }

/* 묶어서 같은 줄에 유지 (단어가 줄바꿈으로 갈라지지 않게) */
.nowrap { white-space: nowrap; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: clamp(22px, 6vw, 64px);
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  padding: clamp(16px, 2.4vw, 26px) clamp(22px, 6vw, 64px);
  background: transparent;               /* 히어로 사진 위: 투명 */
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}
/* 스크롤하면 흰 배경 + 검은 글씨로 전환 */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 12px; }

/* ---------- 헤더 네비게이션 ---------- */
.site-nav {
  margin-left: auto;                     /* 오른쪽으로 밀기 */
  display: flex;
  gap: clamp(18px, 2.4vw, 36px);
  align-items: center;
}
.site-nav a {
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 16px);
  letter-spacing: -0.01em;
  color: #fff;                           /* 히어로 사진 위: 흰색 */
  transition: color 0.3s ease, opacity 0.2s ease;
}
.site-nav a:hover { opacity: 0.65; }
/* 스크롤 시(흰 배경) 어두운 글씨로 */
.site-header.scrolled .site-nav a { color: var(--ink); }
/* 현재 페이지 메뉴 강조 */
.site-nav a[aria-current="page"] { color: var(--indigo); }
.page-sub .site-nav a[aria-current="page"] { color: var(--indigo); }

/* ---------- 서브 페이지 공통(소개·서비스·뉴스) ---------- */
/* 서브페이지는 흰 바탕이므로 헤더를 항상 불투명 + 어두운 글씨로 고정 */
.page-sub .site-header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: var(--line);
}
.page-sub .site-header .brand-name,
.page-sub .site-nav a { color: var(--ink); }

.page-main {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(120px, 18vh, 190px) clamp(22px, 6vw, 64px) clamp(80px, 12vh, 140px);
  min-height: 72vh;
}
.page-kicker {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--indigo);
  margin-bottom: 14px;
}
.page-news .page-kicker,
.page-services .page-kicker {
  font-family: Pretendard, "Pretendard Variable", system-ui, -apple-system, sans-serif;
}
.page-title {
  font-size: clamp(30px, 6vw, 60px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 16px;
}
.page-lead {
  font-size: clamp(17px, 2vw, 22px);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 48px;
}
.page-body { color: var(--ink-2); line-height: 1.8; max-width: 680px; }
.page-body p + p { margin-top: 18px; }

/* ---------- About 영업 페이지 ---------- */
.about-main { overflow: hidden; }
.about-shell { width: min(1120px, calc(100% - clamp(44px, 12vw, 128px))); margin-inline: auto; }
.about-hero { padding: clamp(150px, 20vh, 210px) 0 clamp(90px, 13vh, 145px); background: radial-gradient(760px 400px at 88% 12%, rgba(152,228,255,.28), transparent 68%), linear-gradient(180deg,#fff 0%,#f7f9ff 100%); }
.about-hero h1 { max-width: 980px; font-size: clamp(40px,6.4vw,76px); line-height:1.1; letter-spacing:-.045em; }
.about-hero > .about-shell > p { max-width:720px; margin:26px 0 34px; color:var(--ink-2); font-size:clamp(17px,2vw,21px); line-height:1.75; }
.about-primary-link,.about-contact-link { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:54px; padding:14px 24px; border-radius:999px; background:var(--indigo-deep); color:#fff; font-size:14px; font-weight:800; transition:.2s ease; }
.about-primary-link:hover,.about-contact-link:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(63,79,214,.24); }
.about-reveal-delay-1 { transition-delay:.08s; }
.about-reveal-delay-2 { transition-delay:.16s; }
.about-reveal-delay-3 { transition-delay:.24s; }
.about-section { padding-block:clamp(90px,13vh,150px); }
.about-eyebrow { display:block; margin-bottom:16px; color:var(--indigo-deep); font:800 11px/1.2 Pretendard,"Pretendard Variable",system-ui,sans-serif; letter-spacing:.13em; }
.about-section h2,.about-contact h2 { max-width:900px; font-size:clamp(32px,5vw,58px); line-height:1.14; letter-spacing:-.04em; }
.about-intro { max-width:730px; margin-top:24px; color:var(--ink-2); font-size:clamp(16px,1.8vw,20px); line-height:1.75; }
.about-problem { background:#101c2a; color:#fff; }
.about-problem .about-eyebrow { color:var(--sky); }
.about-problem .about-intro { color:rgba(255,255,255,.68); }
.about-problem-grid,.about-method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(48px,7vh,76px); }
.about-problem-grid { background:rgba(255,255,255,.14); }
.about-problem-grid article,.about-method-grid article { min-height:250px; padding:clamp(26px,4vw,42px); }
.about-problem-grid article { background:#101c2a; }
.about-problem-grid span,.about-method-grid span { display:block; color:var(--sky); font-size:11px; font-weight:800; letter-spacing:.1em; }
.about-problem-grid strong,.about-method-grid strong { display:block; margin:34px 0 14px; font-size:clamp(21px,2.2vw,27px); }
.about-problem-grid p { color:rgba(255,255,255,.66); line-height:1.75; }
.about-comparison { margin-top:clamp(46px,7vh,72px); border-top:1px solid var(--line); }
.about-comparison > div { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,6vw,84px); padding:22px 24px; border-bottom:1px solid var(--line); text-align:center; }
.about-comparison span { color:var(--ink-2); }
.about-comparison strong { color:var(--indigo-deep); }
.about-comparison-head { text-align:center; background:#eef1ff; font-weight:800; color:var(--ink-3); font-size:12px; letter-spacing:.06em; border-top:1px solid #dce2ff; }
.about-comparison-head span { color:var(--ink-2); }
.about-comparison-head strong { color:var(--indigo-deep); }
.about-expertise { background:#f5f7ff; }
.about-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(42px,8vw,110px); align-items:start; }
.about-split-copy { padding-top:34px; color:var(--ink-2); font-size:clamp(16px,1.7vw,19px); line-height:1.8; }
.about-split-copy p + p { margin-top:22px; }
.about-principle { background:linear-gradient(145deg,#687eff,#3f4fd6); color:#fff; }
.about-principle .about-eyebrow { color:var(--mint); }
.about-principle-copy { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,7vw,90px); max-width:950px; margin-top:42px; color:rgba(255,255,255,.76); font-size:clamp(16px,1.6vw,19px); line-height:1.8; }
.about-method-grid { gap:16px; }
.about-method-grid article { border:1px solid var(--line); border-radius:20px; background:#fff; }
.about-method-grid span { color:var(--indigo-deep); }
.about-method-grid p { color:var(--ink-2); line-height:1.75; }
.about-contact { padding:clamp(90px,13vh,150px) 0; background:#0d1b17; color:#fff; text-align:center; }
.about-contact .about-eyebrow { color:var(--sky); }
.about-contact h2 { margin-inline:auto; }
.about-contact p { max-width:680px; margin:24px auto 34px; color:rgba(255,255,255,.7); font-size:17px; line-height:1.8; }
.about-contact-link { background:#fff; color:var(--indigo-deep); }

@media (hover: hover) and (pointer: fine) {
  .about-problem-grid article,.about-method-grid article,.about-comparison > div {
    transition:transform .24s var(--ease),background-color .24s ease,border-color .24s ease,box-shadow .24s ease;
  }
  .about-problem-grid article:hover { position:relative; z-index:1; transform:translateY(-6px); background:#16283a; box-shadow:0 20px 40px rgba(0,0,0,.2); }
  .about-method-grid article:hover { transform:translateY(-6px); border-color:rgba(104,126,255,.35); background:#fbfcff; box-shadow:0 18px 38px rgba(63,79,214,.12); }
  .about-comparison > div:not(.about-comparison-head):hover { transform:translateX(6px); background:#f7f9ff; }
  .about-comparison > div:not(.about-comparison-head):hover strong { color:#2637c6; }
}

@media (max-width: 760px) {
  .about-problem-grid,.about-method-grid,.about-split,.about-principle-copy { grid-template-columns:1fr; }
  .about-problem-grid article,.about-method-grid article { min-height:0; }
  .about-comparison > div { grid-template-columns:1fr; gap:7px; padding-inline:0; }
  .about-comparison-head { display:none !important; }
  .about-split-copy { padding-top:0; }
}

@media (prefers-reduced-motion: reduce) {
  .about-reveal-delay-1,.about-reveal-delay-2,.about-reveal-delay-3 { transition-delay:0s; }
  .about-problem-grid article,.about-method-grid article,.about-comparison > div { transition:none; }
}

/* ---------- Services 상세 페이지 ---------- */
.service-main { overflow: hidden; }
.service-shell { width: min(1120px, calc(100% - clamp(44px, 12vw, 128px))); margin-inline: auto; }
.service-hero { padding: clamp(150px, 20vh, 210px) 0 clamp(86px, 12vh, 140px); background: radial-gradient(700px 380px at 88% 8%, rgba(152,228,255,.25), transparent 68%), linear-gradient(180deg,#fff 0%,#f8faff 100%); }
.service-hero .page-title { max-width: 900px; font-size: clamp(38px, 6.4vw, 76px); }
.service-hero .page-lead { max-width: 720px; margin: 24px 0 34px; }
.service-hero-actions,.service-contact-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.service-primary-btn,.service-contact-actions button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:54px; padding:14px 24px; border:0; border-radius:999px; background:var(--indigo-deep); color:#fff; font:800 14px/1.6 Pretendard,"Pretendard Variable",system-ui,-apple-system,sans-serif; cursor:pointer; transition:.2s ease; }
.service-primary-btn:hover,.service-contact-actions button:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(63,79,214,.22); }
.service-text-link { color:var(--indigo-deep); font-size:14px; font-weight:800; padding:14px 10px; }
.service-proof { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; margin-top:clamp(54px,8vh,88px); border-top:1px solid var(--line); }
.service-proof li { padding:22px 24px 0 0; display:flex; flex-direction:column; gap:5px; }
.service-proof strong { font-size:15px; }
.service-proof span { font-size:13px; color:var(--ink-2); }
.service-section { padding-block:clamp(88px,13vh,150px); }
.service-eyebrow { display:block; margin-bottom:16px; color:var(--indigo-deep); font:800 11px/1.2 'Archivo Black',sans-serif; letter-spacing:.13em; }
.service-heading { max-width:790px; font-size:clamp(30px,4.8vw,56px); line-height:1.12; letter-spacing:-.035em; }
.service-intro { max-width:650px; margin-top:22px; color:var(--ink-2); font-size:clamp(16px,1.8vw,20px); line-height:1.75; }
.service-problem-section { background:#101c2a; color:#fff; }
.service-problem-section .service-heading { max-width:840px; }
.service-problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(46px,7vh,74px); background:rgba(255,255,255,.13); }
.service-problem-grid article { min-height:260px; padding:clamp(26px,4vw,42px); background:#101c2a; }
.service-problem-grid span,.service-demo-index { display:block; color:var(--sky); font-size:10px; font-weight:800; letter-spacing:.12em; }
.service-problem-grid strong { display:block; margin:28px 0 14px; font-size:clamp(20px,2.2vw,27px); line-height:1.3; }
.service-problem-grid p { color:rgba(255,255,255,.68); font-size:14px; line-height:1.75; }
.service-demo-list { display:grid; gap:clamp(60px,10vh,110px); margin-top:clamp(56px,9vh,96px); }
.service-demo-card { display:grid; grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr); gap:clamp(34px,7vw,84px); align-items:center; }
.service-demo-card--reverse .service-demo-copy { order:2; }
.service-demo-card--reverse .service-demo-frame { order:1; }
.service-demo-index { color:var(--indigo-deep); margin-bottom:12px; }
.service-demo-copy h3 { font-size:clamp(26px,3.5vw,40px); letter-spacing:-.03em; }
.service-demo-copy > p { margin:14px 0 26px; color:var(--ink-2); line-height:1.75; }
.service-demo-copy dl { border-top:1px solid var(--line); }
.service-demo-copy dl div { display:grid; grid-template-columns:100px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; }
.service-demo-copy dt { color:var(--ink-3); }
.service-demo-copy dd { color:var(--ink); font-weight:700; }
.service-demo-frame { width:100%; aspect-ratio:1.14/1; display:block; border:0; border-radius:22px; background:#f3f5f8; box-shadow:0 26px 60px rgba(13,27,23,.14); }
.service-process-section { background:#f5f7ff; }
.service-process-grid { display:grid; grid-template-columns:repeat(4,1fr); list-style:none; margin-top:clamp(50px,8vh,80px); counter-reset:process; }
.service-process-grid li { position:relative; min-height:230px; padding:28px 24px; border-top:2px solid var(--indigo); border-right:1px solid rgba(104,126,255,.2); }
.service-process-grid li:last-child { border-right:0; }
.service-process-grid span { color:var(--indigo-deep); font:700 12px 'Archivo Black',sans-serif; }
.service-process-grid strong { display:block; margin:38px 0 12px; font-size:20px; }
.service-process-grid p { color:var(--ink-2); font-size:14px; line-height:1.7; }
.service-split-heading { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:end; }
.service-split-heading .service-intro { margin:0; }
.service-tool-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:54px; }
.service-tool-grid article { min-height:220px; padding:32px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.service-tool-grid span { color:var(--indigo-deep); font:800 12px 'Archivo Black',sans-serif; letter-spacing:.08em; }
.service-tool-grid strong { display:block; margin:36px 0 10px; font-size:21px; }
.service-tool-grid p { color:var(--ink-2); font-size:14px; line-height:1.7; }
.service-comparison-section { background:#0d1b17; color:#fff; }
.service-comparison { margin-top:52px; border-top:1px solid rgba(255,255,255,.2); }
.service-comparison > div { display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:20px 24px; border-bottom:1px solid rgba(255,255,255,.14); text-align:center; }
.service-comparison-head { background:rgba(255,255,255,.08); font-weight:800; color:rgba(255,255,255,.62); font-size:11px; letter-spacing:.1em; }
.service-comparison span { color:rgba(255,255,255,.62); }
.service-comparison strong { color:var(--mint); }
.service-timeline-card { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,8vw,100px); align-items:center; padding:clamp(34px,6vw,70px); border-radius:28px; background:linear-gradient(135deg,#f0f3ff,#effcff); }
.service-timeline-card > div > p { margin-top:20px; color:var(--ink-2); line-height:1.75; }
.service-timeline-card ol { list-style:none; }
.service-timeline-card li { display:grid; grid-template-columns:80px 1fr; padding:16px 0; border-bottom:1px solid rgba(63,79,214,.15); font-weight:800; }
.service-timeline-card li span { color:var(--indigo-deep); font-size:10px; letter-spacing:.08em; }
.service-faq-section { background:#f7f8f7; }
.service-faq-list { margin-top:48px; border-top:1px solid #dfe4e1; }
.service-faq-list details { border-bottom:1px solid #dfe4e1; }
.service-faq-list summary { position:relative; padding:23px 48px 23px 0; cursor:pointer; list-style:none; font-size:clamp(16px,2vw,20px); font-weight:800; }
.service-faq-list summary::-webkit-details-marker { display:none; }
.service-faq-list summary::after { content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--indigo-deep); font-size:24px; }
.service-faq-list details[open] summary::after { content:'−'; }
.service-faq-list p { max-width:760px; padding:0 48px 24px 0; color:var(--ink-2); line-height:1.8; }
.service-contact-section { padding:clamp(86px,13vh,150px) 0; background:linear-gradient(145deg,#687eff,#3f4fd6); color:#fff; }
.service-contact-card { text-align:center; }
.service-contact-card .service-eyebrow { color:var(--mint); }
.service-contact-card h2 { font-size:clamp(34px,5.5vw,64px); line-height:1.12; letter-spacing:-.04em; }
.service-contact-card > p { margin:22px auto 32px; max-width:620px; color:rgba(255,255,255,.78); font-size:17px; }
.service-contact-actions { justify-content:center; }
.service-contact-actions button { background:#fff; color:var(--indigo-deep); }
.service-contact-actions button + button { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55); }
.service-contact-card > .service-copy-status { min-height:24px; margin:16px auto 0; color:#fff; font-size:14px; font-weight:700; }

.reveal.service-reveal-delay-1 { transition-delay: .08s; }
.reveal.service-reveal-delay-2 { transition-delay: .16s; }
.reveal.service-reveal-delay-3 { transition-delay: .24s; }
.reveal.service-reveal-delay-4 { transition-delay: .32s; }

@media (hover: hover) and (pointer: fine) {
  .service-problem-grid article,
  .service-demo-frame,
  .service-process-grid li,
  .service-tool-grid article,
  .service-comparison > div,
  .service-timeline-card li,
  .service-faq-list details {
    transition: translate .18s var(--ease), transform .18s var(--ease),
      background-color .18s ease, border-color .18s ease,
      box-shadow .18s ease, color .18s ease;
  }

  .service-problem-grid article:hover {
    position: relative;
    z-index: 1;
    translate: 0 -8px;
    background: #172a3a;
    box-shadow: 0 22px 46px rgba(0, 0, 0, .24);
  }
  .service-demo-card:hover .service-demo-frame {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 34px 74px rgba(13, 27, 23, .2);
  }
  .service-process-grid li:hover {
    z-index: 1;
    translate: 0 -7px;
    border-top-color: var(--indigo-deep);
    background: #fff;
    box-shadow: 0 18px 38px rgba(63, 79, 214, .13);
  }
  .service-tool-grid article:hover {
    translate: 0 -8px;
    border-color: rgba(104, 126, 255, .45);
    background: #fbfcff;
    box-shadow: 0 22px 46px rgba(63, 79, 214, .13);
  }
  .service-comparison > div:not(.service-comparison-head):hover {
    transform: translateX(8px);
    background: rgba(255, 255, 255, .06);
  }
  .service-comparison > div:not(.service-comparison-head):hover strong { color: #fff; }
  .service-timeline-card li:hover {
    transform: translateX(8px);
    color: var(--indigo-deep);
    background: rgba(255, 255, 255, .54);
  }
  .service-faq-list details:hover {
    transform: translateX(6px);
    border-bottom-color: rgba(104, 126, 255, .48);
    background: rgba(255, 255, 255, .72);
  }
  .service-faq-list details:hover summary { color: var(--indigo-deep); }
}

@media (max-width: 760px) {
  .service-proof,.service-problem-grid,.service-process-grid,.service-tool-grid { grid-template-columns:1fr; }
  .service-proof li { padding-top:16px; }
  .service-problem-grid article { min-height:0; }
  .service-demo-card { grid-template-columns:1fr; }
  .service-demo-card--reverse .service-demo-copy,.service-demo-card--reverse .service-demo-frame { order:initial; }
  .service-demo-frame { aspect-ratio:1/1; }
  .service-process-grid li { min-height:0; border-right:0; }
  .service-split-heading,.service-timeline-card { grid-template-columns:1fr; }
  .service-comparison > div { grid-template-columns:1fr; gap:7px; padding-inline:0; }
  .service-comparison-head { display:none !important; }
  .service-timeline-card { padding:28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-reveal-delay-1,.service-reveal-delay-2,.service-reveal-delay-3,.service-reveal-delay-4 { transition-delay: 0s; }
  .service-problem-grid article,.service-demo-frame,.service-process-grid li,.service-tool-grid article,
  .service-comparison > div,.service-timeline-card li,.service-faq-list details { transition: none; }
}

/* ---------- Blog / Insights ---------- */
.news-main {
  max-width: 1120px;
  padding-bottom: clamp(96px, 14vh, 160px);
}
.news-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(36px, 8vw, 96px);
  align-items: end;
  padding-bottom: clamp(56px, 9vh, 96px);
}
.news-hero .page-title { margin-bottom: 0; }
.news-hero .page-lead { margin: 0 0 4px; font-size: clamp(16px, 1.8vw, 20px); }
.news-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.news-section-head h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.news-section-head > span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
.news-section-head--bordered {
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}
.news-card--featured {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  min-height: 390px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(13, 27, 23, 0.08);
}
.news-card-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 340px;
  padding: clamp(24px, 4vw, 42px);
  color: #fff;
  background: var(--indigo-deep);
}
.news-card-visual .news-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-card-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(145deg, rgba(20, 31, 84, 0.82), rgba(63, 79, 214, 0.42) 58%, rgba(20, 178, 190, 0.34));
}
.news-card-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 230px;
  height: 230px;
  right: -70px;
  bottom: -70px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.05), 0 0 0 80px rgba(255, 255, 255, 0.04);
}
.news-visual-number { position: relative; z-index: 3; font-family: 'Archivo Black', sans-serif; font-size: clamp(82px, 12vw, 150px); line-height: 0.75; opacity: 0.92; }
.news-visual-line { position: relative; z-index: 3; width: 54px; height: 3px; background: var(--mint); }
.news-card--featured .news-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 6vw, 64px);
}
.news-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.news-category {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--indigo-deep);
  background: #eef0ff;
  font-size: 12px;
  font-weight: 700;
}
.news-meta time { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.news-card-title { color: var(--ink); font-weight: 800; letter-spacing: -0.025em; }
.news-card-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.news-card-title a:hover { color: var(--indigo-deep); text-decoration-color: currentColor; }
.news-card-title a:focus-visible { color: var(--indigo-deep); text-decoration-color: currentColor; outline: 2px solid var(--indigo); outline-offset: 4px; }
.news-card--featured .news-card-title { font-size: clamp(25px, 3.5vw, 40px); line-height: 1.25; }
.news-summary { color: var(--ink-2); line-height: 1.75; }
.news-card--featured .news-summary { margin-top: 20px; font-size: clamp(15px, 1.6vw, 17px); }
.news-archive { margin-top: clamp(80px, 13vh, 140px); }
.news-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(42px, 6vw, 72px) clamp(24px, 4vw, 42px);
}
.news-list .news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 0 30px;
  border-bottom: 1px solid var(--line);
}
.news-card-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 18px;
  background: #e9edeb;
}
.news-card-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-list .news-meta { margin-bottom: 14px; }
.news-list .news-card-title { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.38; }
.news-list .news-summary { margin-top: 14px; font-size: 14px; }
@media (max-width: 980px) {
  .news-hero { grid-template-columns: 1fr; gap: 22px; }
  .news-hero .page-lead { max-width: 560px; }
  .news-card--featured { grid-template-columns: 1fr; }
  .news-card-visual { min-height: 240px; }
  .news-visual-number { align-self: flex-end; }
}

@media (max-width: 760px) {
  .news-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .page-news .site-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 20px 14px;
  }
  .page-news .site-header .brand-name { display: none; }
  .page-news .site-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-self: stretch;
    width: min(260px, 100%);
    min-width: 0;
    margin-left: 0;
    gap: 16px;
    white-space: nowrap;
  }
  .page-news .site-nav a { text-align: center; font-size: 14px; }
  .news-main { padding-top: 145px; padding-inline: 20px; }
  .news-section-head { margin-bottom: 16px; }
  .news-card--featured { border-radius: 18px; }
  .news-card-visual { min-height: 200px; padding: 24px; }
  .news-visual-number { align-self: flex-start; font-size: 90px; }
  .news-card--featured .news-card-content { padding: 28px 24px 30px; }
  .news-list .news-card {
    display: block;
    padding: 0 0 26px;
  }
  .news-list .news-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .news-list .news-meta time { margin-top: 0; }
  .news-list .news-summary { margin-top: 12px; padding-right: 0; }
  .news-card-thumb-wrap { margin-bottom: 18px; border-radius: 14px; }
}

/* ---------- Blog 상세 글 템플릿 ---------- */
.post-main {
  max-width: 1380px;
  margin: 0 auto;
  padding: clamp(130px, 16vh, 180px) clamp(22px, 4vw, 56px) 120px;
}
.post-shell {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 760px) minmax(170px, 220px);
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.post-contents,
.post-aside { position: sticky; top: 120px; }
.post-contents > strong,
.post-side-title strong { font-size: 13px; letter-spacing: 0.02em; }
.post-contents ol { list-style: none; margin-top: 18px; }
.post-contents li + li { margin-top: 13px; }
.post-contents a { color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.post-contents a:hover { color: var(--indigo-deep); }
.post-header { margin-bottom: 36px; }
.post-back { display: inline-block; margin-bottom: 28px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.post-header .news-category { margin-bottom: 18px; }
.post-header h1 {
  max-width: 760px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.post-deck { margin-top: 24px; color: var(--ink-2); font-size: clamp(17px, 2vw, 21px); line-height: 1.75; }
.post-byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.post-byline div { display: grid; gap: 2px; }
.post-byline strong { font-size: 13px; }
.post-byline time { color: var(--ink-3); font-size: 12px; }
.post-cover { margin: 0 0 42px; }
.post-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; }
.post-cover figcaption { margin-top: 10px; color: var(--ink-3); font-size: 12px; }
.post-prose { color: #26332e; font-size: 17px; line-height: 1.9; }
.post-prose .post-intro { color: var(--ink); font-size: 19px; font-weight: 600; }
.post-prose section { scroll-margin-top: 110px; margin-top: 68px; }
.post-prose h2 { color: var(--ink); font-size: clamp(26px, 3vw, 36px); line-height: 1.3; letter-spacing: -0.025em; margin-bottom: 22px; }
.post-prose h3 { color: var(--ink); font-size: 22px; margin: 34px 0 14px; }
.post-prose p + p { margin-top: 18px; }
.post-callout { margin: 32px 0; padding: 28px; border-left: 4px solid var(--indigo); background: #f3f5ff; border-radius: 0 16px 16px 0; }
.post-callout > span,
.post-conclusion > span { display: block; margin-bottom: 10px; color: var(--indigo-deep); font-family: Pretendard, "Pretendard Variable", system-ui, -apple-system, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.post-callout strong { display: block; color: var(--ink); font-size: 21px; line-height: 1.55; }
.post-callout p { margin-top: 8px; color: var(--ink-2); font-size: 14px; }
.post-table-wrap { overflow-x: auto; margin-top: 26px; border: 1px solid var(--line); border-radius: 14px; }
.post-table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.post-table-wrap th,
.post-table-wrap td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; }
.post-table-wrap th { color: var(--ink); background: var(--bg-soft); }
.post-table-wrap tbody tr:last-child td { border-bottom: 0; }
.post-code { overflow: hidden; margin-top: 28px; border-radius: 16px; background: #111b2b; color: #d9e4ff; }
.post-code-head { display: flex; justify-content: space-between; padding: 12px 18px; color: #aebad0; border-bottom: 1px solid #29344a; font: 11px/1.4 ui-monospace, Menlo, monospace; }
.post-code pre { overflow-x: auto; padding: 22px; }
.post-code code { font: 13px/1.75 ui-monospace, Menlo, monospace; white-space: pre; }
.post-checklist { list-style: none; display: grid; gap: 12px; }
.post-checklist li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; }
.post-checklist li > span { color: var(--indigo); font: 700 12px/1.5 ui-monospace, Menlo, monospace; }
.post-checklist strong { color: var(--ink); }
.post-checklist p { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.post-faq details { border-top: 1px solid var(--line); }
.post-faq details:last-child { border-bottom: 1px solid var(--line); }
.post-faq summary { padding: 20px 4px; color: var(--ink); font-weight: 700; cursor: pointer; }
.post-faq details p { padding: 0 4px 20px; color: var(--ink-2); font-size: 15px; }
.post-conclusion { padding: 34px; border-radius: 20px; background: linear-gradient(145deg, #f4f5ff, #edfffc); }
.post-conclusion h2 { margin-bottom: 12px; }
.post-side-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.post-side-title a { color: var(--ink-3); font-size: 11px; }
.post-related { display: grid; grid-template-columns: 68px 1fr; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; line-height: 1.45; }
.post-related img { width: 68px; height: 50px; object-fit: cover; border-radius: 8px; }
.post-related small { display: block; margin-bottom: 3px; color: var(--indigo-deep); font-size: 10px; font-weight: 700; }
.post-contact { margin-top: 34px; padding: 22px; border-radius: 16px; color: #fff; background: var(--ink); }
.post-contact > span { color: var(--mint); font: 10px/1.4 ui-monospace, Menlo, monospace; letter-spacing: 0.1em; }
.post-contact strong { display: block; margin-top: 12px; font-size: 18px; line-height: 1.45; }
.post-contact p { margin-top: 10px; color: #bdc8c2; font-size: 12px; }
.post-contact a { display: block; margin-top: 18px; padding: 10px; border-radius: 999px; color: var(--ink); background: var(--mint); text-align: center; font-size: 12px; font-weight: 800; }
.post-bottom-nav { display: flex; justify-content: space-between; gap: 24px; max-width: 760px; margin: 80px auto 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }
.post-bottom-nav a { color: var(--indigo-deep); font-weight: 700; }

@media (max-width: 1100px) {
  .post-shell { grid-template-columns: minmax(0, 760px); }
  .post-contents,
  .post-aside { position: static; }
  .post-contents { padding: 22px; border: 1px solid var(--line); border-radius: 14px; }
  .post-contents ol { columns: 2; column-gap: 32px; }
  .post-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }
  .post-contact { margin-top: 0; }
}

@media (max-width: 620px) {
  .page-post .site-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 20px 14px;
  }
  .page-post .site-header .brand-name { display: none; }
  .page-post .site-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-self: start;
    width: min(260px, 100%);
    min-width: 0;
    margin-left: 0;
    gap: 16px;
    white-space: nowrap;
  }
  .page-post .site-nav a { text-align: center; font-size: 14px; }
  .post-main { padding: 145px 20px 80px; }
  .post-shell,
  .post-article,
  .post-prose { width: 100%; min-width: 0; }
  .post-contents { display: none; }
  .post-header h1 { font-size: 34px; }
  .post-header h1,
  .post-deck,
  .post-prose p { overflow-wrap: anywhere; }
  .post-deck { font-size: 17px; }
  .post-cover img { border-radius: 14px; }
  .post-prose { font-size: 16px; }
  .post-prose section { margin-top: 54px; }
  .post-callout,
  .post-conclusion { padding: 24px 20px; }
  .post-aside { grid-template-columns: 1fr; }
  .post-bottom-nav { display: grid; }
}

/* AR 모노그램 (Archivo Black, 기울여 겹친 A·R) */
.ar-mark {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  user-select: none;
}
.ar-mark .a,
.ar-mark .r { display: inline-block; transform-origin: 0 0; line-height: 1; }
.ar-mark .a { transform: skewX(-19.65deg); color: var(--indigo); margin-top: -0.1em; padding-left: 0.05em; }
.ar-mark .r { transform: skewX(9.65deg);  color: var(--indigo-deep); margin-left: -0.6em; margin-top: 0; }
.ar-mark--sm { font-size: 26px; }

.brand-name {
  font-weight: 800;
  font-size: clamp(16px, 1.5vw, 19px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* 히어로 위(미스크롤)에서는 회사명 흰색으로 (모노그램은 브랜드 컬러 유지) */
body:not(.page-sub) .site-header:not(.scrolled) .brand-name { color: #fff; }

/* ---------- 사이드 진행바 (오른쪽·점만) ---------- */
.progress-rail {
  position: fixed;
  top: 50%; right: clamp(16px, 2.4vw, 34px);
  transform: translateY(-50%);
  z-index: 40;
}
.progress-rail ul { list-style: none; display: flex; flex-direction: column; align-items: center; }
.progress-rail li { position: relative; }
.progress-rail li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 1px; height: 26px;
  background: #d7dbe6;
  transform: translateX(-50%);
}
.progress-rail li { padding-block: 13px; }
.dot {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c4cad8;
  transition: all 0.35s var(--ease);
}
.dot:hover { background: var(--peri); transform: scale(1.25); }
.dot.is-active {
  width: 12px; height: 12px;
  background: var(--indigo);
  box-shadow: 0 0 0 5px rgba(104, 126, 255, 0.16);
}

/* ---------- 공통 섹션 ---------- */
.section {
  padding-block: clamp(96px, 16vh, 190px);
  position: relative;      /* 고정된 히어로 위로 올라오도록 */
  z-index: 1;
  background: var(--bg);   /* 히어로가 비치지 않게 불투명 배경 (s02·s03은 각자 배경으로 덮어씀) */
}

.sec-index {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #a0aaa4;
  margin-bottom: 22px;
}
.sec-head {
  font-size: clamp(30px, 6vw, 62px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 26px;
}
.lead {
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
/* s05 리드 문구 강조색 (브랜드 인디고) */
#s05 .lead {
  color: var(--indigo);
}
.body {
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 620px;
  margin-top: 18px;
}

/* ---------- HERO ---------- */
.hero {
  position: sticky;   /* 상단에 고정 → 아래 섹션이 스크롤한 만큼 덮으며 올라옴 */
  top: 0;
  z-index: 0;         /* 콘텐츠 섹션(z-index:1)보다 아래 레이어 */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 건설 현장 사진 + 가독성용 어두운 스크림(왼쪽·하단 더 진하게) */
  background:
    linear-gradient(180deg, rgba(8, 12, 24, 0.25) 0%, rgba(8, 12, 24, 0.55) 100%),
    linear-gradient(100deg, rgba(8, 12, 24, 0.68) 0%, rgba(8, 12, 24, 0.20) 55%, rgba(8, 12, 24, 0) 100%),
    url("assets/hero-construction-silhouette.webp") center / cover no-repeat;
  padding-block: 120px 60px;
}
.hero-title {
  font-size: clamp(34px, 8.4vw, 92px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.accent-grad {
  background: linear-gradient(92deg, var(--indigo), var(--indigo-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin-top: clamp(18px, 2.4vw, 30px);
  font-size: clamp(15px, 1.8vw, 20px);
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
.scroll-hint {
  position: absolute;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.88);
}
.scroll-hint .arrow { animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- 01 ---------- */
.s01 {
  min-height: 100vh;   /* 스크롤해 도달했을 때 화면을 꽉 채움 */
  min-height: 100svh;
  padding-block: 0;    /* 사진이 위아래로 꽉 차도록 상하 여백 제거 */
  /* 3열: 왼쪽 사진 · 중앙 텍스트 · 오른쪽 사진 */
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--wrap)) 1fr;
  align-items: center;  /* 내용 세로 중앙 정렬 */
  column-gap: clamp(16px, 3vw, 48px);
  position: sticky;     /* 상단에 고정 → 다음 섹션(02)이 위로 덮으며 올라옴 */
  top: 0;
  overflow: hidden;     /* 화면 밖 사진이 삐져나오지 않게 클립 */
}

/* --- 01 좌/우 사진 패널 --- */
.s01-photo {
  align-self: stretch;              /* 그리드 행 높이(=100vh)만큼 세로로 꽉 */
  height: auto;
  border-radius: 0;                 /* 상하 풀블리드라 모서리 라운드 제거 */
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(13, 27, 23, 0.14);
  opacity: 0;                       /* 진입 전: 숨김 */
  will-change: transform, opacity;
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}
.s01-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 시작 위치: 왼쪽은 위에서, 오른쪽은 아래에서 */
.s01-photo--left  { transform: translateY(-115%); }
.s01-photo--right { transform: translateY(115%); }
/* 스크롤 진입 시 제자리로 슬라이드 인 */
.s01.is-photos-in .s01-photo { opacity: 1; transform: translateY(0); }

.s01 .wrap { position: relative; z-index: 1; }  /* 텍스트를 사진 위로 */

.s01 .beat {
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.75;
  max-width: 640px;
}
.s01 .beat-1 { font-weight: 700; color: var(--ink); font-size: clamp(17px, 2vw, 23px); }
.s01 .beat-2 { margin-top: 22px; color: #3a4a43; }
.s01 .beat-3 { margin-top: 14px; color: var(--ink-2); }
.s01 mark {
  background: none;
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -0.5em 0 rgba(104, 126, 255, 0.18);
  padding-bottom: 0.05em;
}

/* ---------- 02 : 문제진단 (어두운 위기 섹션) ---------- */
.s02 {
  background: #10151f;
  color: #e8ecf3;
  position: sticky;   /* 상단 고정 → 다음 섹션(03)이 위로 덮으며 올라옴 */
  top: 0;
}
.s02 .sec-index { color: #6b7688; }
.s02 .sec-head { color: #fff; text-align: center; }
.s02 .lead { color: #cdd4e0; margin-top: 4px; text-align: center; }
.s02 .body { color: #97a1b2; }

/* 통계 카운트업 블록 */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 60px);
  margin-block: clamp(38px, 6vh, 64px);
}
.stat { flex: 1 1 180px; min-width: 160px; }
.stat-num {
  display: block;
  white-space: nowrap;                 /* 숫자+단위를 항상 한 줄로 */
  font-size: clamp(40px, 6.4vw, 70px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #ff7a7a;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.stat-value { white-space: nowrap; }        /* 숫자는 절대 줄바꿈 안 됨 */
/* 단위(%, 조, 곳)는 숫자와 같은 줄에 베이스라인 맞춰 살짝 작게 */
.stat-unit,
.stat-unit-block {
  display: inline;
  margin-left: 0.06em;
  font-size: 0.5em;
  font-weight: 700;
}
.stat-label {
  display: block;
  margin-top: 14px;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.55;
  color: #8b95a7;
  max-width: 240px;
}

/* ---------- 03 : 풀 블루 블록 (ZERO OFFICE) ---------- */
/* 스크롤 트랙: 높이만큼 스크롤하는 동안 내부가 화면에 고정(sticky)되고
   스크롤 위치에 따라 스텝이 차례대로 넘어감. 스텝 수 = data-zo-steps.
   높이는 (스텝 수 + 여유 1) × 100vh 로 잡는다. */
.s03 {
  background: #ffffff;
  color: var(--ink);
  padding-block: 0;
  height: calc(var(--zo-track, 4) * 100vh);
}
.s03-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(72px, 11vh, 128px);
}
.s03 .sec-index { color: var(--indigo-deep); }
.s03 .sec-head { color: var(--ink); }
.s03 .lead { color: var(--indigo-deep); margin-top: 4px; }
.s03 .body { color: var(--ink-2); }

.s03-layout {
  display: block;
}

.s03-intro {
  width: 100%;
  text-align: left;
}

.s03-intro .body {
  max-width: 720px;
}

/* ---------- 03 : ZERO OFFICE 인터랙티브 스텝 ---------- */
.zo-stepper {
  display: flex;
  align-items: stretch;
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(28px, 4vh, 56px);
}

/* 왼쪽 스텝 리스트 */
.zo-steps {
  list-style: none;
  width: min(416px, 42%);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.zo-step {
  position: relative;
  padding: 12px 0 12px 24px;
}

/* 각 항목 왼쪽 세로 트랙 + 진행 채움 */
.zo-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: rgba(13, 27, 23, 0.12);
}

.zo-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--indigo);
  transform: scaleY(0);
  transform-origin: top;
}

.zo-step-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.zo-step-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 700;
  color: var(--ink-3);
  transition: color 0.35s ease;
}

.zo-step-icon {
  font-size: 1.15em;
  line-height: 1;
}

.zo-step.is-active .zo-step-title {
  color: var(--ink);
}

/* 설명: 활성 스텝에서만 펼쳐짐 (0fr → 1fr) */
.zo-step-desc {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.45s ease, opacity 0.35s ease, margin-top 0.35s ease;
}
.zo-step-desc > p {
  overflow: hidden;
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}
.zo-step.is-active .zo-step-desc {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 6px;
}

/* 오른쪽 이미지 패널 */
.zo-media {
  position: relative;
  flex: 0 1 500px;
  width: 100%;
  max-width: 500px;
  min-height: clamp(220px, 27vh, 250px);
  margin-left: auto;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #eef1f6, #e2e6ee);
  box-shadow: 0 24px 60px rgba(13, 27, 23, 0.14);
}

.zo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.zo-img.is-active {
  opacity: 1;
  transform: scale(1);
}
.zo-media iframe.zo-img {
  border: 0;
  background: #f6f7f9;
}
.zo-card-news {
  position: absolute;
  inset: 0;
  padding: 0;
  background: #f4f4f1;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.65s ease, transform 0.65s ease;
  pointer-events: none;
}
.zo-card-news.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.zo-report-sheet {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.7vw, 20px);
  border: 1px solid #d8dcd8;
  background: #fff;
}
.zo-report-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #1a2621;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.zo-report-sheet header b {
  font: 400 clamp(24px, 2.5vw, 30px)/1 'Archivo Black', sans-serif;
  color: var(--indigo-deep);
}
.zo-report-sheet blockquote {
  margin: clamp(9px, 1.3vh, 12px) 0;
  color: #14201b;
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 750;
  line-height: 1.28;
  letter-spacing: -.04em;
}
.zo-report-bottom {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #d8dcd8;
  display: block;
}
.zo-report-label {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-3);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.zo-report-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  max-width: none;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
}
.zo-report-flow i { color: var(--indigo); font-style: normal; }
.zo-report-conclusion {
  margin-top: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}
.zo-typewriter::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.08em;
  background: var(--indigo-deep);
  opacity: 0;
}
.zo-card-news.is-typing .zo-typewriter::after {
  opacity: 1;
  animation: zo-caret .62s steps(1) infinite;
}
.zo-card-news.is-animated .zo-report-sheet {
  animation: zo-sheet-in .48s var(--ease) both;
}
.zo-report-label,
.zo-report-flow > *,
.zo-report-conclusion {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .32s ease, transform .38s var(--ease);
}
.zo-card-news.is-complete .zo-report-label,
.zo-card-news.is-complete .zo-report-flow > *,
.zo-card-news.is-complete .zo-report-conclusion {
  opacity: 1;
  transform: none;
}
.zo-card-news.is-complete .zo-report-flow > :nth-child(1) { transition-delay: .08s; }
.zo-card-news.is-complete .zo-report-flow > :nth-child(2) { transition-delay: .14s; }
.zo-card-news.is-complete .zo-report-flow > :nth-child(3) { transition-delay: .20s; }
.zo-card-news.is-complete .zo-report-flow > :nth-child(4) { transition-delay: .26s; }
.zo-card-news.is-complete .zo-report-flow > :nth-child(5) { transition-delay: .32s; }
.zo-card-news.is-complete .zo-report-flow > :nth-child(6) { transition-delay: .38s; }
.zo-card-news.is-complete .zo-report-flow > :nth-child(7) { transition-delay: .44s; }
.zo-card-news.is-complete .zo-report-conclusion { transition-delay: .56s; }
@keyframes zo-caret { 50% { opacity: 0; } }
@keyframes zo-sheet-in {
  from { opacity: .65; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 공감 훅(혼잣말) → 답 헤드라인 구조 (03·04 공용) ---------- */
.hook {
  font-size: clamp(15px, 1.9vw, 20px);
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.sec-head .hl {
  color: var(--indigo-deep);
}

/* ---------- 04 : 하는 일 ---------- */

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.chips li {
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 600;
  background: #eef2ff;
  color: var(--indigo-deep);
  padding: 9px 16px;
  border-radius: 999px;
}

/* 맞춤 다이어그램: 회사마다 다른 업무 → 회사마다 다른 맞춤 툴 */
.fit-diagram {
  margin-top: clamp(48px, 7vh, 76px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.8vw, 34px);
  align-items: stretch;
}

/* ---- 미니멀 직사각형 카드 + 테두리 러닝 루프 ---- */
@property --fit-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.fit-col {
  --fit-accent: var(--indigo);
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 26px 24px 22px;
  background: var(--bg);
  border: 1px solid #e7eaf3;
  border-radius: 12px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.fit-col:nth-child(2) { --fit-accent: #5a6ef0; }
.fit-col:nth-child(3) { --fit-accent: var(--indigo-deep); }

/* 테두리를 따라 회전하는 하이라이트(러닝 보더) */
.fit-col::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--fit-angle),
              transparent 0deg,
              transparent 235deg,
              var(--fit-accent) 320deg,
              transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.5;
  animation: fit-border-loop 6s linear infinite;
  pointer-events: none;
}
@keyframes fit-border-loop {
  to { --fit-angle: 360deg; }
}
.fit-col:hover {
  transform: translateY(-6px);
  border-color: #d7ddf6;
  box-shadow: 0 18px 42px rgba(63, 79, 214, 0.13);
}
.fit-col:hover::before {
  opacity: 1;
  animation-duration: 2.4s;
}

/* 파일 인덱스 라벨 (미니멀 텍스트) */
.fit-tab {
  align-self: flex-start;
  padding: 0;
  font-family: "Pretendard", "Pretendard Variable", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fit-accent);
  background: none;
}

/* 카드 본문 (타이틀 → 설명 → 태그) */
.fit-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.fit-card-title {
  font-weight: 800;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.3;
  color: var(--ink);
}
/* 제목 아래 미니멀 액센트 라인 */
.fit-card-title::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--fit-accent);
}
.fit-card-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
/* 하단 태그 칩 (미니멀) */
.fit-card-tags {
  list-style: none;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #eef0f6;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fit-card-tags li {
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: #f5f6fb;
  border-radius: 6px;
  line-height: 1.4;
}

.service-detail-link {
  margin-top: 20px;
  min-height: 58px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--indigo-deep);
  background: #fff;
  border: 1px solid rgba(104, 126, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(104, 126, 255, 0.08);
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.25s var(--ease), border-color 0.25s ease, box-shadow 0.25s ease;
}
.service-detail-link:hover {
  transform: translateY(-3px);
  border-color: var(--indigo);
  box-shadow: 0 16px 34px rgba(104, 126, 255, 0.15);
}
.service-detail-link:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}
.service-detail-arrow {
  font-size: 20px;
  line-height: 1;
}

/* S04 다이어그램 스타일 */
.s04-diagram-container {
  margin-top: 60px;
}

.s04-diagram-wrapper {
  --wrap-pad: clamp(30px, 5vw, 50px);
  width: 100%;
  padding: var(--wrap-pad);
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 30px 60px -14px rgba(63, 79, 214, 0.22), 0 8px 22px rgba(13, 20, 40, 0.06);
  border: 1px solid rgba(104, 126, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* ---- 아코디언(가로 전개) : 박스를 꽉 채우는 full-bleed ---- */
.s04-accordion {
  position: relative;
  display: flex;
  gap: 0;
  height: clamp(400px, 52vw, 520px);
  /* 래퍼 안쪽 여백을 뚫고 상·하·좌·우 네 방향 모두 박스 끝까지 꽉 차게 */
  margin: calc(var(--wrap-pad) * -1);
  border-radius: inherit;   /* 박스의 둥근 모서리에 맞춰 클립 */
  overflow: hidden;
}

.s04-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  /* 두루마리 전개: 폭 변화를 부드럽게 */
  transition: flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 카드 사이 얇은 구분선 (붙어있되 경계 표시) */
.s04-card + .s04-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 4;
}

/* 사진이 박스 안으로 음푹 들어간 입체 이너 섀도(상·하단만 → 세로 이음새는 깔끔하게) */
.s04-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;               /* 사진 위, 텍스트(z-2) 아래 */
  pointer-events: none;
  box-shadow:
    inset 0 13px 28px rgba(13, 20, 40, 0.4),
    inset 0 -11px 26px rgba(13, 20, 40, 0.3);
}

.s04-card-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
  filter: grayscale(35%) brightness(0.85);
}

.s04-card-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(13, 20, 40, 0.15) 0%,
    rgba(13, 20, 40, 0.55) 55%,
    rgba(13, 20, 40, 0.85) 100%
  );
  transition: opacity 0.5s ease;
}

.s04-card-body {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: clamp(18px, 2vw, 28px);
  color: #fff;
}

/* 카드 텍스트: 접힘 = 전부 숨김 / 열림 = 전개 */
.s04-card-num,
.s04-card-title,
.s04-card-desc {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.s04-card-num {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #aeb9ff;
  margin: 0 0 10px;
}

.s04-card-title {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  word-break: keep-all;
  white-space: nowrap;
}

.s04-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  word-break: keep-all;
  max-width: 34ch;
  margin: 8px 0 0;
}

/* 전개 상태 (기본 활성 + 마우스 hover + 클릭 고정) */
.s04-card.is-active,
.s04-card.is-open {
  flex-grow: 4.2;
}
/* 마우스 올린 동안엔 hover가 우선: 나머지는 접히고 hover 카드만 전개 */
.s04-accordion:hover .s04-card:not(:hover) {
  flex-grow: 1;
}
.s04-accordion:hover .s04-card:hover {
  flex-grow: 4.2;
}

.s04-card.is-active .s04-card-media,
.s04-card.is-open .s04-card-media,
.s04-card:hover .s04-card-media {
  transform: scale(1);
  filter: grayscale(0%) brightness(1);
}

/* 열린 카드: 사진과 함께 텍스트 전개 (살짝 시차) */
.s04-card.is-active .s04-card-num,
.s04-card.is-open .s04-card-num,
.s04-card:hover .s04-card-num {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}
.s04-card.is-active .s04-card-title,
.s04-card.is-open .s04-card-title,
.s04-card:hover .s04-card-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.16s;
}
.s04-card.is-active .s04-card-desc,
.s04-card.is-open .s04-card-desc,
.s04-card:hover .s04-card-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}

/* 마우스 올린 동안 좁아진 카드는 다시 텍스트 숨김 */
.s04-accordion:hover .s04-card:not(:hover) .s04-card-num,
.s04-accordion:hover .s04-card:not(:hover) .s04-card-title,
.s04-accordion:hover .s04-card:not(:hover) .s04-card-desc {
  opacity: 0;
  transform: translateY(12px);
  transition-delay: 0s;
}

/* ---------- 05 하단 : 문의 유도 strip ---------- */
.s05-inquiry {
  margin-top: clamp(36px, 5vh, 56px);
  padding: clamp(26px, 3.4vw, 40px) clamp(28px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: linear-gradient(135deg, #f4f6ff 0%, #eef8ff 58%, #edfffb 100%);
  border: 1px solid rgba(104, 126, 255, 0.22);
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(104, 126, 255, 0.15);
}
.s05-inquiry-text {
  margin: 0;
  color: var(--ink);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
  line-height: 1.5;
}
.s05-inquiry-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--indigo-deep);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.s05-inquiry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(63, 79, 214, 0.25);
}
.s05-inquiry-btn:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}

/* ---------- footer ---------- */
.site-footer {
  position: relative;   /* 고정된 히어로 위 레이어 */
  z-index: 1;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding-block: clamp(16px, 2.5vh, 24px);
}
.site-footer .wrap {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 640px);
  max-width: none;
  margin: 0;
  padding-inline: clamp(20px, 3vw, 40px);
  text-align: right;
}
.footer-sitemap {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 18px;
  color: var(--ink-3);
  text-align: left;
}
.footer-sitemap a { transition: color 0.2s ease; }
.footer-sitemap a:hover { color: var(--ink); }
.site-footer .brand,
.site-footer .contact,
.site-footer .copyright { grid-column: 2; }
.site-footer .brand { justify-self: end; }
.site-footer .brand-name { font-size: 20px; }
.contact {
  margin-top: 14px;
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 32px;
  max-width: 640px;
  text-align: right;
}
.contact dt {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.contact dd { font-size: 11px; color: var(--ink-3); }
.copyright {
  margin-top: 18px;
  font-size: 10px;
  color: var(--ink-3);
  text-align: right;
}

@media (max-width: 560px) {
  .site-footer .wrap { grid-template-columns: 86px minmax(0, 1fr); }
  .contact { grid-template-columns: 1fr; }
}

/* ---------- reveal 애니메이션 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* 01 3박자 순차 등장 */
.s01 .beat-1.is-visible { transition-delay: 0.05s; }
.s01 .beat-2.is-visible { transition-delay: 0.25s; }
.s01 .beat-3.is-visible { transition-delay: 0.45s; }

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
  /* 01: 좁은 화면에선 사진을 숨기고 텍스트를 한 열로 (가독성 우선) */
  .s01 {
    display: flex;
    align-items: center;
  }
  .s01-photo { display: none; }

  /* 04: 맞춤 다이어그램 3열 → 1열 세로 스택 */
  .fit-diagram {
    grid-template-columns: 1fr;
  }
  .fit-arrow {
    margin-top: 4px;
  }

  /* 03: 좁은 화면에선 스크롤 고정을 끄고 일반 흐름으로 (스텝 모두 펼침) */
  .s03 {
    height: auto;
    padding-block: clamp(96px, 16vh, 190px);
  }
  .s03-sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: 0;
  }
  .zo-stepper {
    flex-direction: column;
    gap: 28px;
    margin-top: 40px;
  }
  .zo-steps {
    width: 100%;
  }
  .zo-media {
    min-height: 260px;
    order: -1; /* 이미지를 스텝 위로 */
  }
  /* 스크러빙이 없으므로 모든 설명을 펼치고 진행바는 채움 */
  .zo-step-desc {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 10px;
  }
  .zo-step .zo-progress {
    transform: scaleY(1) !important;
  }
  .zo-step-title {
    color: var(--ink);
  }
}

@media (max-width: 768px) {
  /* S04 아코디언 → 세로 스택 (사진+제목+설명 모두 표시) */
  .s04-accordion {
    flex-direction: column;
    height: auto;
    gap: 12px;
    margin: 0;               /* 모바일은 full-bleed 해제 → 여백 유지 */
    border-radius: 0;
    overflow: visible;
  }
  .s04-card {
    flex: none;
    height: 200px;
    border-radius: 14px;
  }
  .s04-card + .s04-card::before {
    display: none;
  }
  /* 모바일은 모든 카드를 전개 상태로 (사진+텍스트 모두 표시) */
  .s04-card .s04-card-media {
    transform: scale(1);
    filter: grayscale(0%) brightness(1);
  }
  .s04-card .s04-card-num,
  .s04-card .s04-card-title,
  .s04-card .s04-card-desc {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .s04-card .s04-card-title {
    white-space: normal;
  }
}

@media (max-width: 720px) {
  .progress-rail { display: none; }
  .section { padding-block: clamp(72px, 12vh, 110px); }
  .s05-inquiry {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .s05-inquiry-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 모션 최소화 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .s01-photo { opacity: 1; transform: none; transition: none; }
  .scroll-hint .arrow { animation: none; }
  .zo-card-news,
  .zo-report-sheet,
  .zo-report-label,
  .zo-report-flow > *,
  .zo-report-conclusion { animation: none !important; transition: none !important; }
  .fit-col::before { animation: none; }
}