/* nedabah.bundle.css — auto-generated by _build/css_bundle.py */
/* DO NOT EDIT manually — edit source files in assets/ instead. */
/* Source order: cobalt-tokens-v1.css -> v3.css -> global-fonts.css -> global-nav.css -> nav-right.css -> deck-toggle.css -> back-to-top.css -> typography-v4.css -> mobile-v1.css -> warm-tone-v1.css -> compact-v1.css -> cobalt-overrides.css -> snap-deck-v1.css -> perspective-pager.css -> a11y-fixes-v1.css */


/* === cobalt-tokens-v1.css === */

/* cobalt-tokens-v1.css — 코발트 단일 진실 원천 + 별칭 (2026-05-01, F6)
   목적: 변수명 'copper'(이름)와 값 #1E40AF(코발트) 충돌 해소.
   전략: --c-cobalt-* 를 단일 진실 원천으로 두고, 기존 --copper·--c-copper는 별칭으로.
   기존 코드 안 깨고 새 코드는 --c-cobalt-* 사용 권장.
   2026-04-30 사용자 영구 결정: 강조색 = 코발트 블루 #1E40AF.
*/

:root {
  /* === 단일 진실 원천 (Single Source of Truth) === */
  --c-cobalt:        #1E40AF;          /* 기본 강조 */
  --c-cobalt-deep:   #1E3A8A;          /* hover · 진한 강조 */
  --c-cobalt-soft:   #3B82F6;          /* 보조 강조 · 아이콘 */
  --c-cobalt-bg:     #EFF4FB;          /* 강조 영역 옅은 배경 */
  --c-cobalt-tint:   rgba(30, 64, 175, .08);
  --c-cobalt-line:   #C7D2FE;          /* 분리선 */

  /* === 별칭 (deprecated, 점진 마이그레이션) === */
  --copper:          var(--c-cobalt);
  --copper-d:        var(--c-cobalt-deep);
  --c-copper:        var(--c-cobalt);
  --bronze:          var(--c-cobalt-soft);
}

/*
   사용 가이드:
   - 신규 코드: var(--c-cobalt) 권장
   - 기존 코드: var(--copper) 그대로 유지 (별칭이 자동 코발트로 매핑)
   - 다음 디자인 작업 시 --copper → --c-cobalt 점진 교체
*/


/* === v3.css === */

/* 네다바웨이 v3 — 디자인 시스템
   잉크블랙·구리·오프화이트 / Noto Serif KR + Pretendard / 여백 고급감 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700;800;900&display=swap');

:root {
  /* 2026-04-30 코발트블루 컨셉 */
  --c-cobalt: #1E40AF;
  --c-cobalt-deep: #1E3A8A;
  --c-cobalt-soft: #3B82F6;
  --c-cobalt-bg: #EFF4FB;
  --c-cobalt-tint: rgba(30, 64, 175, .08);
  --c-cobalt-line: #C7D2FE;
  --c-ink: #1A1A1A;
  --c-copper: #1E40AF;
  --c-bg: #FAFAF7;
  --c-surface: #FFFFFF;
  --c-line: #E8E6E0;
  --c-line2: #D6D3CA;
  --c-mute: #6B6B6B;
  --c-mute2: #9A9A9A;
  --c-green: #10803D;
  --ff: 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --ff-serif: 'Noto Serif KR', Georgia, serif;
  --w-max: 1180px;
  --w-narrow: 820px;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--ff);
  background: var(--c-bg);
  color: var(--c-ink);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-copper); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

/* 네비 */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 247, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.nav__inner {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.nav__logo {
  font-family: var(--ff-serif);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.nav__links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav__link {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--c-mute);
  position: relative;
  padding: 6px 0;
}
.nav__link:hover, .nav__link--active {
  color: var(--c-ink);
}
.nav__link--active::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--c-copper);
}
.nav__cta {
  font-size: 0.84rem;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-bg);
  font-weight: 600;
}
.nav__cta:hover { background: var(--c-copper); color: #fff; }
.nav__toggle { display: none; font-size: 1.4rem; }
@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--c-bg); border-bottom: 1px solid var(--c-line);
    padding: 20px 28px; gap: 18px;
  }
  .nav__toggle { display: block; }
}

/* 마스트헤드 (페이지 헤더) */
.masthead {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 80px 28px 40px;
  border-bottom: 1px solid var(--c-line);
}
.kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: 18px;
}
.h1 {
  font-family: var(--ff-serif);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  color: var(--c-ink);
}
.h1 em { font-style: italic; color: var(--c-copper); font-weight: 700; }
.lead {
  color: var(--c-mute);
  max-width: 680px;
  font-size: 1.05rem;
  line-height: 1.85;
}

/* 섹션 */
.wrap {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 64px 28px;
}
.wrap--narrow {
  max-width: var(--w-narrow);
}
.section {
  padding: 80px 0;
  border-bottom: 1px solid var(--c-line);
}
.section:last-child { border-bottom: none; }
.section__head {
  margin-bottom: 36px;
}
.section__title {
  font-family: var(--ff-serif);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.section__hint {
  color: var(--c-mute);
  font-size: 1rem;
  max-width: 580px;
}

/* 통계 바 (KLC식) */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 28px 32px;
  margin: 24px 0;
}
.stats__cell { text-align: center; }
.stats__num {
  font-family: var(--ff-serif);
  font-size: 2rem;
  font-weight: 800;
  color: var(--c-ink);
}
.stats__num em {
  color: var(--c-copper);
  font-style: normal;
}
.stats__label {
  font-size: 0.78rem;
  color: var(--c-mute);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* 카드 그리드 */
.grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 960px) { .grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; } }

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 28px 26px;
  transition: all 0.22s;
  display: block;
  position: relative;
  overflow: hidden;
}
.card:hover {
  border-color: var(--c-line2);
  transform: translateY(-2px);
  color: inherit;
}
.card__abbr {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-copper);
  margin-bottom: 10px;
}
.card__title {
  font-family: var(--ff-serif);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.card__desc {
  font-size: 0.92rem;
  color: var(--c-mute);
  line-height: 1.75;
  margin-bottom: 16px;
}
.card__more {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-copper);
}

/* 신뢰 로고 (익명 분야 표기) */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.logo {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 22px 18px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--c-mute);
  font-weight: 500;
  transition: border-color 0.2s;
}
.logo:hover { border-color: var(--c-copper); color: var(--c-ink); }
.logo strong {
  display: block;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-ink);
  margin-bottom: 4px;
}

/* 버튼 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid transparent;
  transition: all 0.18s;
  cursor: pointer;
}
.btn--primary { background: var(--c-ink); color: var(--c-bg); }
.btn--primary:hover { background: var(--c-copper); color: #fff; }
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line2);
}
.btn--ghost:hover { border-color: var(--c-ink); }
.btn--copper { background: var(--c-copper); color: #fff; }
.btn--copper:hover { background: var(--c-ink); }

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* CTA 블록 (페이지 하단) */
.cta {
  background: var(--c-ink);
  color: var(--c-bg);
  padding: 80px 28px;
  text-align: center;
}
.cta__title {
  font-family: var(--ff-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
.cta__sub {
  color: var(--c-mute2);
  margin-bottom: 28px;
  font-size: 1rem;
}
.cta .btn--primary { background: var(--c-copper); color: #fff; }
.cta .btn--primary:hover { background: #fff; color: var(--c-ink); }
.cta .btn--ghost { color: var(--c-bg); border-color: var(--c-mute); }
.cta .btn--ghost:hover { color: #fff; border-color: #fff; }

/* 인용·강조 박스 */
.callout {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-copper);
  padding: 22px 26px;
  border-radius: 10px;
  margin: 28px 0;
}
.callout__title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 1rem;
}

/* 본문 글 */
.prose h2 {
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 48px 0 18px;
  letter-spacing: -0.01em;
}
.prose h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 30px 0 12px;
}
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 16px 0 16px 24px; }
.prose li { margin-bottom: 8px; }
.prose blockquote {
  border-left: 3px solid var(--c-copper);
  padding-left: 18px;
  margin: 24px 0;
  color: var(--c-mute);
  font-style: italic;
}
.prose a { color: var(--c-copper); text-decoration: underline; text-underline-offset: 3px; }
.prose code {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.86em;
}

/* 폼 */
.form {
  display: grid;
  gap: 20px;
  max-width: 640px;
  margin: 32px 0;
}
.form__field {
  display: grid;
  gap: 6px;
}
.form__label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-ink);
}
.form__input, .form__textarea, .form__select {
  font: inherit;
  padding: 12px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  color: var(--c-ink);
  font-size: 0.95rem;
}
.form__input:focus, .form__textarea:focus, .form__select:focus {
  outline: none;
  border-color: var(--c-copper);
}
.form__textarea { resize: vertical; min-height: 140px; }
.form__hint {
  font-size: 0.78rem;
  color: var(--c-mute);
}

/* 리스트 (블로그 카드용) */
.entry {
  display: grid;
  gap: 4px;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-line);
}
.entry:hover .entry__title { color: var(--c-copper); }
.entry__date {
  font-size: 0.78rem;
  color: var(--c-mute);
  letter-spacing: 0.05em;
}
.entry__title {
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.entry__excerpt {
  color: var(--c-mute);
  font-size: 0.92rem;
  margin-top: 6px;
}

/* 푸터 */
.foot {
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  padding: 50px 28px 40px;
  font-size: 0.86rem;
  color: var(--c-mute);
}
.foot__inner {
  max-width: var(--w-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) {
  .foot__inner { grid-template-columns: 2fr 1fr 1fr; }
}
.foot__brand {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-ink);
  margin-bottom: 8px;
}
.foot__col h4 {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 12px;
}
.foot__col a {
  display: block;
  padding: 4px 0;
  font-size: 0.86rem;
}
.foot__copy {
  max-width: var(--w-max);
  margin: 30px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--c-mute2);
}


/* === global-fonts.css === */

/* global-fonts.css — 사이트 전체 폰트 컨셉 통일 (v1, 2026-04-30)
   사용자 영구 지시: "글씨체 컨셉도 통일하라"

   3-tier 시스템:
   --ff       (sans, 본문)   : Pretendard Variable → Pretendard → Apple SD Gothic Neo → system
   --ff-serif (serif, 제목·인용): Noto Serif KR → Georgia → serif
   --ff-mono  (mono, 메타·코드): ui-monospace → SF Mono → JetBrains Mono → monospace

   기존 27종 흩어진 font-family 선언은 모두 이 변수 체계로 수렴.
*/

/* ① 폰트 로드 — Pretendard CDN, Noto Serif KR, JetBrains Mono */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ② 변수 박기 */
:root{
  --ff: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Malgun Gothic', sans-serif;
  --ff-serif: 'Noto Serif KR', 'Apple SD Gothic Neo', Georgia, serif;
  --ff-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* ③ 글로벌 적용 — 본문 = Pretendard sans */
html, body{
  font-family: var(--ff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ④ 제목·인용 = Noto Serif KR */
h1, h2, h3, h4,
.h1, .h2, .h3,
blockquote,
.quote, .quote-serif,
.iden-result__quote,
.book-card__title,
.chapter-card__title{
  font-family: var(--ff-serif);
  letter-spacing: -.01em;
}

/* ⑤ 메타·라벨·코드 = mono */
.kicker,
.foot--mini__build,
code, pre, kbd, samp,
.meta--mono{
  font-family: var(--ff-mono);
}

/* ⑥ 폼·버튼은 본문 폰트 강제 (브라우저 기본 폰트 차단) */
button, input, select, textarea{
  font-family: var(--ff);
}

/* ⑦ 한국어 가독성 최적화 (typography-v4 보강) */
body{
  font-feature-settings: "tnum","kern","ss01";
  word-break: keep-all;
  overflow-wrap: break-word;
}


/* === global-nav.css === */

/* global-nav.css — 모든 페이지 통일 네비게이션 (v1, 2026-04-30)
   사용자 영구 지시: "모든페이지의 네이게이션 통일하라"
*/
.gnav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid #E2E8F0;
  font-family: var(--ff, 'Pretendard Variable', sans-serif);
}
.gnav__inner{
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  gap: 16px;
}
.gnav__logo{
  font-family: var(--ff-serif, 'Noto Serif KR', serif);
  font-size: 17px; font-weight: 700; color: #1A1A1A;
  text-decoration: none; letter-spacing: -.01em;
  flex-shrink: 0;
}
.gnav__logo:hover{ color: #a4541a; }
.gnav__links{
  display: flex; gap: 18px; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.gnav__link{
  font-size: 14px; font-weight: 500; color: #475569;
  text-decoration: none; padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.gnav__link:hover{ color: #a4541a; border-bottom-color: #a4541a; }
.gnav__link.is-active{ color: #a4541a; border-bottom-color: #a4541a; }
.gnav__cta{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background:#a4541a; padding: 8px 14px; border-radius: 6px;
  text-decoration: none; transition: background .15s;
  white-space: nowrap;
}
.gnav__cta:hover{ background: #7a4317; }
.gnav__toggle{
  display: none;
  background: transparent; border: 1px solid #C7D2FE;
  width: 36px; height: 36px; border-radius: 6px;
  font-size: 18px; cursor: pointer; line-height: 1;
}
@media(max-width: 760px){
  .gnav__toggle{ display: inline-flex; align-items: center; justify-content: center; }
  .gnav__links{
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid #E2E8F0;
    padding: 14px 20px; gap: 4px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: all .18s ease;
  }
  .gnav__links.is-open{ transform: translateY(0); opacity: 1; pointer-events: auto; }
  .gnav__link{ padding: 10px 0; font-size: 15px; border-bottom: 1px solid #f0ead9; }
  .gnav__link:last-of-type{ border-bottom: none; }
  .gnav__cta{ margin-top: 8px; justify-content: center; }
}

/* 옛 nav 자동 숨김 (글로벌 nav와 중복 방지) — 2026-04-30
   레거시 페이지나 자동화로 박혀 있는 <nav class="nav"> 블록을 시각적으로 차단.
   .gnav가 같은 페이지에 있을 때만 옛 .nav를 숨김. .gnav 없는 페이지는 옛 nav 보존. */
body:has(> nav.gnav) > nav.nav { display: none !important; }



/* === nav-right.css === */

/* nav-right.css — 메뉴를 우측으로 모두 모으기 (2026-04-30 사용자 지시)
   기존 global-nav.css는 손대지 않고, 이 파일로 정렬만 보강.
   - 로고는 좌측 고정
   - 메뉴 링크 + CTA는 모두 오른쪽 끝에 정렬
*/

/* gnav 형식 — 메뉴/CTA 우측 정렬 */
.gnav__inner {
  /* space-between → 로고는 좌, 메뉴는 우측에 자동 모임 */
  justify-content: flex-start;
}
.gnav__inner > .gnav__links {
  margin-left: auto;            /* 우측 끝으로 밀기 */
}
.gnav__inner > .gnav__toggle {
  margin-left: auto;
}

/* CTA(강의 의뢰)는 메뉴 안에 있을 때 살짝 간격 */
.gnav__links > .gnav__cta {
  margin-left: 6px;
}

/* CTA가 ul 바깥에 따로 있을 때(레거시 패턴 호환) */
.gnav__inner > .gnav__cta {
  margin-left: 8px;
}

/* 옛 .nav 형식 (구 디자인 잔존 페이지 호환) */
.nav__inner {
  justify-content: flex-start;
}
.nav__inner > .nav__links {
  margin-left: auto;
}
.nav__inner > .nav__cta {
  margin-left: 8px;
}

/* 모바일 — 햄버거 토글만 우측, 펼친 메뉴는 풀폭 */
@media (max-width: 760px) {
  .gnav__inner > .gnav__links {
    margin-left: 0;
  }
  .nav__inner > .nav__links {
    margin-left: 0;
  }
}


/* === deck-toggle.css === */

/* deck-toggle.css — 긴 페이지에서 가로 데크 모드로 가는 진입 배지 (2026-04-30)
   - 우측 하단 back-to-top 위쪽에 결잡음 */
.deck-toggle {
  position: fixed;
  right: 18px;
  bottom: 74px;     /* back-to-top(46) + 여백 */
  background: #fff;
  color: #1E40AF;
  border: 1px solid #C7D2FE;
  border-radius: 24px;
  padding: 8px 14px 8px 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(30, 64, 175, .15), 0 1px 3px rgba(0,0,0,.06);
  z-index: 79;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Pretendard Variable', 'Apple SD Gothic Neo', sans-serif;
  transition: background .15s, transform .15s;
}
.deck-toggle:hover {
  background: #1E40AF;
  color: #fff;
  border-color: #1E40AF;
  transform: translateY(-1px);
}
.deck-toggle__icon { font-size: 14px; line-height: 1; }
.deck-toggle__label { white-space: nowrap; }

@media (max-width: 640px) {
  .deck-toggle {
    right: 14px;
    bottom: 64px;
    padding: 7px 12px 7px 10px;
    font-size: 12px;
  }
  .deck-toggle__label { display: none; }   /* 좁은 폰에선 아이콘만 */
  .deck-toggle__icon { font-size: 16px; }
}

/* 데크 모드에선 자기 자신 안 보임 */
body.deck-mode .deck-toggle { display: none !important; }


/* === back-to-top.css === */

/* back-to-top.css — 우측 하단 "맨 위로" 아이콘 (2026-04-30 사용자 지시)
   - 스크롤 다운 시 표시, 처음·맨위에서는 숨김
   - 데크(가로 스크롤) 페이지에서는 자동 비표시
*/
.btt {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #1E40AF;        /* 코발트 블루 */
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 18px rgba(30, 64, 175, .28), 0 1px 3px rgba(0,0,0,.08);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 80;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  user-select: none;
}
.btt.is-visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.btt:hover {
  background: #1E3A8A;
}
.btt:active {
  transform: translateY(0) scale(0.96);
}
.btt:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .btt {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
}

/* 데크 모드(가로 스크롤)에서는 숨김 — 페이지 점·화살표가 그 역할 */
body.deck-mode .btt {
  display: none !important;
}

/* 모션 감소 환경 */
@media (prefers-reduced-motion: reduce) {
  .btt { transition: opacity .01s; transform: none; }
}


/* === typography-v4.css === */

/* typography-v4.css — 사이트 전체 문장 품질 + no-orphan 강제
   2026-04-29 사용자 영구 지시: "문장의 1,2개 단어만 다른 줄로 내려가는 것 주의하라.
   마지막 문장은 홈페이지 모든 페이지에 적용하자."
   적용 대상: index/about/programs/ai/magazine/contact/work/story/company,
              /magazine/{code}/, /magazine/{code}/{ch}/, /blog/perspective/, /resources/.
   기존 v3.css는 손대지 않고 이 파일을 import 추가. */

/* === 1. 한국어 어절 단위 줄바꿈 + orphan/widow 자동 균형 === */
p,
li,
dd,
.prose,
.prose p,
.prose li,
.lead,
.kicker,
.foot p,
.foot__col a,
.cta__sub,
.card__body,
.card p,
blockquote,
figcaption {
  word-break: keep-all;
  overflow-wrap: break-word;
  /* Chrome 117+/Safari 17.4+/Edge 117+ : 마지막 줄 1~2어절 단독 낙하 자동 보정 */
  text-wrap: pretty;
  /* 본문은 'pretty' (꼬리 균형), 제목은 아래 'balance' */
  hanging-punctuation: first last;
}

/* === 2. 제목·소제목은 더 강한 자동 균형 === */
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.section__title,
.cta__title,
.masthead h1,
.card__title,
.book-card__title,
.chapter-card__title {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
  hanging-punctuation: first last;
}

/* === 3. 짧은 줄(narrow) 본문일수록 더 안전한 max-width === */
.prose,
.lead {
  /* 한 줄 어절 수 약 12~16개 유지 → 마지막 줄 단어 1~2개 단독 낙하 빈도 급감 */
  max-width: 64ch;
}
.prose--wide {
  max-width: 78ch;
}

/* === 4. 단락 간 호흡 통일 === */
.prose p + p,
.prose ul,
.prose ol {
  margin-top: 14px;
}
.prose p + h2,
.prose p + h3 {
  margin-top: 36px;
}

/* === 5. 인용문 (성경 본문 raw_transcript 등 세리프 톤) === */
.quote-serif,
blockquote.quote-serif,
.observatory blockquote {
  font-family: var(--ff-serif, 'Noto Serif KR', Georgia, serif);
  font-size: 1.06rem;
  line-height: 1.85;
  border-left: 3px solid var(--c-copper, #C2410C);
  padding: 14px 22px;
  margin: 22px 0;
  background: rgba(194, 65, 12, 0.03);
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* === 6. 마지막 어절 강제 묶기용 유틸리티 === */
/* 사용법: <h2>긴 제목 <span class="nowrap-tail">한 묶음</span></h2> */
.nowrap-tail {
  white-space: nowrap;
}
/* 또는 마지막 어절 앞에 &nbsp; 직접 삽입 가능 */

/* === 7. 작은 글씨 (kicker/메타)도 동일 룰 === */
.kicker,
.meta,
.book-card__meta,
.chapter-card__meta,
.foot__copy span {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* === 8. 모바일에서 더 짧은 줄 길이 → orphan 자연 감소 === */
@media (max-width: 640px) {
  .prose,
  .lead {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.75;
  }
  h1,
  .h1 {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }
  h2,
  .h2,
  .section__title {
    font-size: clamp(1.3rem, 4.6vw, 1.8rem);
  }
}

/* === 9. 인쇄 시에도 유지 === */
@media print {
  p, li, h1, h2, h3 {
    text-wrap: pretty;
    word-break: keep-all;
  }
}

/* === 10. 폴백 (text-wrap 미지원 브라우저) — 순수 keep-all로도 한국어는 충분히 안전 === */
@supports not (text-wrap: pretty) {
  p, li, .prose, .lead {
    /* keep-all + max-width 64ch 조합으로 폴백 */
  }
}


/* === mobile-v1.css === */

/* mobile-v1.css — 네다바웨이 모바일 UX 보강 (2026-04-30)
   기존 v3.css·typography-v4.css는 손대지 않고, 모바일 한정 미디어쿼리만 추가.
   사용자 영구 지시: "모든 페이지마다 간격이나 여백 등 고객 편리한지 확인하라"
   적용 원칙
   - 360~430px 폰: 가로 패딩 28→18px, section 80→52px, 카드/버튼 터치 타깃 강화
   - 600px 이하 : 본문 행간/폰트 안전 보강 (typography-v4.css 와 충돌 없음)
   - 769px 이상 데스크톱은 영향 0 */

/* ===== 1) 모바일 일반(≤640px) — 가로 여백·세로 호흡 ===== */
@media (max-width: 640px) {
  :root {
    --w-narrow: 100%;
  }

  /* 사이트 전체 가로 패딩 통일 */
  .nav__inner,
  .masthead,
  .wrap,
  .foot,
  .cta {
    padding-left: 18px;
    padding-right: 18px;
  }

  .nav__inner { padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .nav__logo  { font-size: 1.06rem; }

  /* 햄버거 패널 — 터치 타깃 확대 */
  .nav__links.is-open {
    padding: 16px 18px 22px;
    gap: 4px;
  }
  .nav__links.is-open .nav__link {
    padding: 13px 4px;
    font-size: 0.98rem;
    border-bottom: 1px solid var(--c-line);
  }
  .nav__links.is-open .nav__link:last-child { border-bottom: none; }
  .nav__cta {
    padding: 11px 18px;
    font-size: 0.92rem;
  }

  /* 마스트헤드 — 모바일에서 위 60 / 아래 28 */
  .masthead {
    padding-top: 56px;
    padding-bottom: 28px;
  }
  .h1 { margin-bottom: 16px; }
  .lead { font-size: 1rem; line-height: 1.8; }

  /* 본문 wrap — 64 / 28 정도가 모바일 표준 */
  .wrap { padding-top: 48px; padding-bottom: 48px; }
  .wrap--narrow { padding-top: 40px; padding-bottom: 40px; }

  /* 섹션 호흡 — 80→52 */
  .section { padding: 52px 0; }
  .section__head { margin-bottom: 24px; }

  /* 통계 바 — 모바일 1열·여백 축소 */
  .stats {
    gap: 18px;
    padding: 22px 20px;
    border-radius: 12px;
    margin: 18px 0;
  }
  .stats__num { font-size: 1.7rem; }

  /* 카드 — 모바일 패딩 22 / 20 */
  .card { padding: 22px 20px; border-radius: 12px; }
  .card__title { font-size: 1.12rem; }
  .card__desc { font-size: 0.92rem; line-height: 1.7; }

  /* 카드 그리드 — 모바일 gap 축소 */
  .grid { gap: 16px; }

  /* 버튼·액션 — 가로 폭 확보 */
  .btn {
    padding: 13px 22px;
    font-size: 0.95rem;
    min-height: 44px; /* iOS HIG 권장 터치 타깃 */
  }
  .actions { gap: 10px; margin-top: 22px; }
  .actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }

  /* CTA 블록 — 80 / 28 → 56 / 18 */
  .cta { padding-top: 56px; padding-bottom: 56px; }
  .cta__title { margin-bottom: 14px; }
  .cta__sub { font-size: 0.96rem; margin-bottom: 22px; }

  /* 푸터 — 50→34 / 가로 18 */
  .foot { padding-top: 34px; padding-bottom: 30px; }
  .foot__inner { gap: 22px; }
  .foot__col h4 { margin-bottom: 8px; }
  .foot__col a { padding: 6px 0; font-size: 0.92rem; min-height: 32px; line-height: 1.4; }
  .foot__copy {
    margin-top: 22px;
    padding-top: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.76rem;
  }

  /* 콜아웃 — 모바일 좁은 공간 보정 */
  .callout { padding: 18px 18px; margin: 22px 0; border-radius: 10px; }

  /* 폼 — 모바일에서 입력 영역 확대(기본 12→13, 글자 16px로 iOS 자동 확대 방지) */
  .form { gap: 16px; margin: 24px 0; }
  .form__input,
  .form__textarea,
  .form__select {
    padding: 13px 14px;
    font-size: 1rem; /* 16px 미만이면 iOS Safari가 자동 확대 — 16px 강제 */
    border-radius: 8px;
  }
  .form__textarea { min-height: 120px; }

  /* 블로그 entry 리스트 호흡 */
  .entry { padding: 18px 0; }
  .entry__title { font-size: 1.12rem; }

  /* 로고 그리드 — 모바일 gap 축소 */
  .logos { gap: 12px; margin-top: 22px; }
  .logo { padding: 18px 14px; font-size: 0.84rem; }

  /* 본문 prose — 헤딩 사이 여백 모바일 보정 */
  .prose h2 { margin: 36px 0 14px; font-size: 1.35rem; }
  .prose h3 { margin: 24px 0 10px; font-size: 1.05rem; }
  .prose blockquote { padding-left: 14px; margin: 18px 0; }
}

/* ===== 2) 작은 폰(≤390px) — 추가 미세 조정 ===== */
@media (max-width: 390px) {
  .nav__inner,
  .masthead,
  .wrap,
  .foot,
  .cta {
    padding-left: 14px;
    padding-right: 14px;
  }
  .stats { padding: 20px 16px; }
  .card  { padding: 20px 16px; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
}

/* ===== 3) 가로 스크롤 차단 (모바일 안전판) ===== */
@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, iframe, table, pre { max-width: 100%; }
}

/* ===== 4) 터치 인터랙션 명료화 ===== */
@media (hover: none) and (pointer: coarse) {
  .card:hover { transform: none; } /* 모바일 hover lift 제거(잔상 방지) */
  .btn, .nav__link, .nav__cta, .card, .logo, .entry {
    -webkit-tap-highlight-color: rgba(194, 65, 12, 0.12);
  }
}

/* ===== 5) 다크모드 대응 — 시스템 환경 따름(가독성 최소 보정) ===== */
@media (prefers-color-scheme: dark) and (max-width: 640px) {
  /* 사이트 자체는 라이트톤 고정이라 큰 변경 없음. 단 모바일 OLED 눈부심 완화 */
  body { -webkit-text-size-adjust: 100%; }
}

/* ===== 6) 모션 줄이기 환경 ===== */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* === warm-tone-v1.css === */

/* warm-tone-v1.css — 사이트 전체 따뜻한 페이퍼 톤 통일 (v1, 2026-04-30)
   사용자 영구 지시: "홈페이지 너무 밝을 필요 없다. 따뜻함이 느껴지게. 노란색 쓰지마."

   팔레트:
   --paper      페이지 배경      #f7f3ec
   --paper-2    섹션 배경        #efe7d6
   --paper-3    카드 배경        #fdfaf3
   --ink        본문 텍스트      #2a241c
   --ink-2      보조 텍스트      #6b6155
   --line       구분선          #d8cdb8
   --copper     강조선·포인트    #a4541a
   --copper-d   진한 카퍼        #7a4317
   --bronze     보조 포인트      #6e5a3e
   --sage       부드러운 강조    #8a9a7a
   --rose       경고·안내        #c89b7e
*/

:root{
  --paper: #f7f3ec;
  --paper-2: #efe7d6;
  --paper-3: #fdfaf3;
  --ink: #2a241c;
  --ink-2: #6b6155;
  --line: #d8cdb8;
  --copper: #a4541a;
  --copper-d: #7a4317;
  --bronze: #6e5a3e;
  --sage: #8a9a7a;
  --rose: #c89b7e;
  /* 코발트 변수는 기존 호환만 유지 (사용 자제) */
  --c-cobalt: #a4541a;
  --c-cobalt-deep: #7a4317;
  --c-cobalt-soft: #6e5a3e;
  --c-cobalt-bg: #efe7d6;
  --c-cobalt-tint: rgba(164, 84, 26, .08);
  --c-cobalt-line: #d8cdb8;
  /* v3 호환 변수 갱신 */
  --c-bg: var(--paper);
  --c-line: var(--line);
  --c-line2: #c4b88f;
  --c-mute: var(--ink-2);
  --c-copper: var(--copper);
}

/* 전역 배경·텍스트 — 너무 밝지 않게 */
html, body{
  background: var(--paper);
  color: var(--ink);
}

/* 메인 헤더(masthead)도 페이퍼 톤 */
.masthead{
  background: var(--paper);
}

/* 섹션 카드·박스가 흰색이면 모두 cream 톤으로 */
.iden-form,
.iden-result__detail,
.ai-coach,
.iden-next__card{
  background: var(--paper-3) !important;
}

/* 회색 톤 배경(여러 곳) → oat */
.iden-domains,
.iden-form__input{
  background: var(--paper) !important;
}
.iden-form__input:focus{
  background: var(--paper-3) !important;
  border-color: var(--copper) !important;
}

/* 결과 카드 main 결 — 검은 배경을 따뜻한 짙은 잉크로 */
.iden-result__main{
  background:linear-gradient(135deg,#a4541a 0%,#7a4317 100%)!important;
}

/* 도메인 칩 */
.iden-domain{
  background: var(--paper-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.iden-domain:hover{
  border-color: var(--copper) !important;
  color: var(--copper) !important;
}
.iden-domain.active{
  background: var(--copper) !important;
  border-color: var(--copper) !important;
  color: #fff !important;
}

/* 폼 버튼 */
.iden-form__btn .btn--primary,
.btn--primary{
  background: var(--copper) !important;
}
.iden-form__btn .btn--primary:hover,
.btn--primary:hover{
  background: var(--copper-d) !important;
}

/* 진행 막대 — 노랑 → 카퍼 그라디언트 */
.iden-progress__seg.is-on{
  background: linear-gradient(90deg, var(--copper), var(--copper-d)) !important;
}
.iden-progress__seg.is-on--3{
  background: linear-gradient(90deg, var(--copper), var(--copper-d), var(--rose)) !important;
}
.iden-progress__txt.is-full{
  color: var(--copper) !important;
}

/* 코어 hero (보라 그라디언트 → 따뜻한 카퍼·브론즈 그라디언트) */
.iden-core__hero{
  background: linear-gradient(135deg, #6e5a3e 0%, #8a6f3a 100%) !important;
}

/* AI 코치 카드 상단 가는 줄 */
.ai-coach::before{
  background: linear-gradient(90deg, var(--copper), var(--rose)) !important;
}
.ai-coach__cta{
  background: var(--copper) !important;
  color: #fdfaf3 !important;
}
.ai-coach__cta:hover{
  background: var(--copper-d) !important;
}

/* 다음 동선 카드 호버 */
.iden-next__card:hover{
  border-color: var(--copper) !important;
  box-shadow: 0 12px 28px rgba(164,84,26,.12) !important;
}
.iden-next__card:hover .arrow{
  color: var(--copper) !important;
}

/* footer 미니 */
.foot--mini{
  background: var(--paper-2) !important;
  border-top-color: var(--line) !important;
  color: var(--ink-2) !important;
}
.foot--mini a:hover{
  color: var(--copper) !important;
  border-color: var(--copper) !important;
}

/* 글로벌 nav — 페이퍼 톤 */
.gnav{
  background: rgba(247,243,236,.92) !important;
  border-bottom-color: var(--line) !important;
}
.gnav__logo:hover,
.gnav__link:hover,
.gnav__link.is-active{
  color: var(--copper) !important;
  border-bottom-color: var(--copper) !important;
}
.gnav__cta{
  background: var(--copper) !important;
  color: #fdfaf3 !important;
}
.gnav__cta:hover{
  background: var(--copper-d) !important;
}

/* 자동 타이핑 좌표 미리보기 — 검정 0. 카퍼 배경 + 크림 텍스트 */
.typed-quote{
  background: linear-gradient(135deg,#a4541a 0%,#7a4317 100%) !important;
  color: #fdfaf3 !important;
  border-left-color: #fdfaf3 !important;
}
.typed-quote__label{
  color: #fdfaf3 !important;
  opacity: .75;
}
.typed-quote__cursor{
  background: #fdfaf3 !important;
}

/* SBM 안내 카드 — 이미 따뜻한 톤이지만 통일 */
.sbm-intro{
  background: var(--paper-2) !important;
  border-color: var(--line) !important;
}
.sbm-intro__btn--primary{
  background: var(--copper) !important;
  border-color: var(--copper) !important;
  color: #fdfaf3 !important;
}
.sbm-intro__btn--primary:hover{
  background: var(--copper-d) !important;
  border-color: var(--copper-d) !important;
}

/* AI 코치 kicker 라벨 (검정 → oat 페이퍼) */
.ai-coaches__kicker{
  background: var(--paper-2) !important;
  color: var(--copper) !important;
}

/* iden hero pill 강조 (yellow rgba 대체 곳도 페이퍼 톤으로) */
.iden-core__stage .pill{
  background: rgba(253,250,243,.18) !important;
}

/* 매니페스토 강조 색상 — 보라 → 카퍼 */
.manifesto__title em{
  color: var(--copper) !important;
}
.manifesto__row--cta{
  background: var(--paper-2) !important;
}

/* 5S 박스 */
.iden-result__step__name{
  color: var(--copper) !important;
}

/* 결과 따옴표 */
.iden-result__quote{
  border-left-color: var(--copper) !important;
}

/* 너무 밝은 텍스트 라이트 그레이 → 따뜻한 그레이 */
.iden-form__hint,
.iden-result__sig,
.foot--mini__build{
  color: var(--ink-2) !important;
}

/* === 카퍼 배경 위 텍스트 강제 가독성 (#a4541a / #7a4317 위에 흰색 톤) === */
.iden-result__main,
.iden-result__main *,
.typed-quote,
.typed-quote *,
.ai-coach__cta,
.gnav__cta,
.sbm-intro__btn--primary,
.iden-domain.active,
.iden-form__num,
.iden-progress__seg.is-on,
.iden-progress__seg.is-on--3{
  /* 자식 요소가 inherit 못 가져갈 때를 대비해 fallback */
}
.iden-result__main{ color: #fdfaf3 !important; }
.iden-result__main .iden-result__label{ color: rgba(253,250,243,.85) !important; }
.iden-result__main .iden-result__quote{
  background: rgba(253,250,243,.16) !important;
  color: #fdfaf3 !important;
  border-left-color: #fdfaf3 !important;
}
.iden-result__main .iden-result__sig{ color: rgba(253,250,243,.78) !important; font-style: italic; }
.iden-result__main .iden-result__copy-btn{
  background: rgba(253,250,243,.18) !important;
  border: 1px solid rgba(253,250,243,.32) !important;
  color: #fdfaf3 !important;
}
.iden-result__main .iden-result__copy-btn:hover{
  background: rgba(253,250,243,.28) !important;
}

/* AI 코치 kicker — 같은 색 텍스트/배경 같은 결 차단 */
.ai-coaches__kicker{
  background: var(--paper-2) !important;
  color: var(--copper-d) !important;
  border: 1px solid var(--line);
}

/* iden hero (브론즈 그라디언트) 위 텍스트 */
.iden-core__hero{ color: #fdfaf3 !important; }
.iden-core__hero .iden-core__title,
.iden-core__hero .iden-core__sub,
.iden-core__hero .iden-core__kicker,
.iden-core__hero .pill{ color: #fdfaf3 !important; }
.iden-core__hero .iden-core__sub{ color: rgba(253,250,243,.92) !important; }

/* 결과 카드 main 안 모든 텍스트 inherit 흰색 */
.iden-result__main *:not(.iden-sparkles):not(.iden-sparkles span){
  color: inherit;
}
.iden-result__main .iden-result__copy-btn{ color: #fdfaf3 !important; }

/* 도메인 칩 active — 카퍼 배경에 흰 글자 강제 */
.iden-domain.active{ color: #fdfaf3 !important; }

/* 폼 번호 원 */
.iden-form__num{ color: #fdfaf3 !important; }

/* 폼 input hint — 너무 밝은 회색은 잘 안 보임 → 톤 다운 */
.iden-form__hint{ color: var(--ink-2) !important; }

/* SBM intro 호버 색이 검정으로 가던 결 */
.sbm-intro__btn--primary:hover{
  background: var(--copper-d) !important;
  color: #fdfaf3 !important;
}

/* === [최종 가독성 보증] 본문 텍스트 강제 (2026-04-30) === */
/* 페이지 본문 색이 어디선가 흰색으로 가는 자리 영구 차단 */
html, body{
  color: #2a241c !important;
  background: #f7f3ec !important;
}
p, li, dd, dt, span, td, th, dl, ol, ul, blockquote, figcaption, label{
  color: inherit;
}
/* 카드·박스 안 본문은 잉크 톤 강제 (단, 카퍼/브론즈 배경 위 자식은 예외) */
.iden-form, .iden-form *,
.iden-next__card, .iden-next__card *,
.ai-coach, .ai-coach *,
.rf-item, .rf-item *,
.manifesto, .manifesto *,
.sbm-intro__bullets li, .sbm-intro__bullets li *,
.sbm-intro__lead, .sbm-intro__title,
.home-hero, .home-hero *,
.home-bento .cap, .home-bento .cap *{
  color: #2a241c;
}
/* 단, hint·sub·meta는 보조 톤 유지 */
.iden-form__hint, .ai-coach__hint, .rf-item .excerpt,
.iden-next__card .sub, .iden-next__card .arrow,
.home-hero .lead, .home-bento .cell .core,
.foot--mini, .foot--mini *{
  color: #6b6155;
}
/* 카퍼 배경 자식은 위 강제를 다시 override (크림으로) */
.iden-result__main, .iden-result__main *,
.typed-quote, .typed-quote *,
.ai-coach__cta, .ai-coach__cta *,
.gnav__cta, .gnav__cta *,
.sbm-intro__btn--primary, .sbm-intro__btn--primary *,
.iden-domain.active, .iden-domain.active *,
.iden-form__num, .iden-form__num *,
.iden-core__hero, .iden-core__hero *{
  color: #fdfaf3 !important;
}
/* footer 미니 안 a는 카퍼 hover만 */
.foot--mini a{ color: #3a322a !important }
.foot--mini a:hover{ color: #a4541a !important }
/* gnav link 색 강제 */
.gnav__link{ color: #3a362e !important }
.gnav__link:hover, .gnav__link.is-active{ color: #a4541a !important }
.gnav__logo{ color: #1f1d18 !important }


/* === compact-v1.css === */

/* compact-v1.css — 메인 페이지 수직 스크롤 압박 해소 (v1, 2026-04-30)
   사용자 영구 지시: '스크롤 압박이 너무 심하다. 구조 바꿔라.'

   전략:
   - 모든 큰 padding (64px·48px) → 32px 이하
   - margin-bottom 60~80px → 32~40px
   - 매니페스토 세로 누적 → 데스크톱 3컬럼 그리드
   - IDEN core hero(보라 큰 카드) → 슬림 1줄 kicker
   - 폼 3입력 → 데스크톱 3컬럼 한 행
   - AI 코치·SBM 큰 padding 축소
*/

/* === 1. 전역 섹션 padding 축소 === */
.home-hero{ padding: 32px 24px 16px !important }
.home-hero .lead{ margin-bottom: 18px !important }
.home-hero__stats{ padding-top: 14px !important }
.home-hero__cta{ margin-top: 16px !important; padding-top: 14px !important }

.home-bento{ padding: 8px 24px 24px !important }
.home-bento h2{ margin-bottom: 10px !important }

.iden-core{ margin: 16px auto 32px !important }
.iden-core__hero{ display:none !important }  /* 보라 큰 hero 카드 자체 숨김 — 폼 안에 슬림 kicker로 대체 */

.iden-form{ padding: 22px 24px !important; border-radius: 12px !important }

/* === 2. 매니페스토 3행 → 데스크톱 3컬럼 가로 그리드 === */
.masthead{ padding: 8px 24px 16px !important; max-width: 1080px; margin: 0 auto }
.masthead > .kicker{ margin-bottom: 4px !important }
.masthead > h2{ margin-bottom: 14px !important }
.manifesto{
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  max-width: 100% !important;
  margin: 12px 0 24px !important;
}
.manifesto__row{
  background: #fdfaf3 !important;
  border: 1px solid #d8cdb8 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  grid-template-columns: 24px 1fr !important;
  gap: 10px !important;
  align-items: flex-start;
}
.manifesto__num{
  width: 22px !important; height: 22px !important;
  font-size: 11px !important;
  margin-top: 1px !important;
}
.manifesto__title{
  font-size: 14px !important;
  margin-bottom: 4px !important;
}
.manifesto__body{
  font-size: 12.5px !important;
  line-height: 1.6 !important;
}
.manifesto__row--cta{
  grid-column: 1 / -1 !important;
  background: #efe7d6 !important;
  margin-top: 0 !important;
  padding: 12px 16px !important;
}
@media(max-width: 760px){
  .manifesto{ grid-template-columns: 1fr !important }
  .manifesto__row--cta{ grid-column: auto !important }
}

/* === 3. IDEN 폼 슬림 kicker 1줄로 hero 대체 === */
.iden-form::before{
  content: "⚡ 핵심 활동 · 5분이면 됩니다 · 3개 칸으로 진로 좌표 한 줄";
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #a4541a; background: #efe7d6; border: 1px solid #d8cdb8;
  padding: 6px 12px; border-radius: 4px;
  margin-bottom: 16px;
  text-align: center;
}

/* === 4. IDEN 폼 3입력 한 행 그리드 (데스크톱) === */
@media(min-width: 880px){
  .iden-form__step{
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .iden-form__num{
    width: 22px !important; height: 22px !important;
    font-size: 11px !important;
  }
  .iden-form__hint{ font-size: 11.5px !important; margin-bottom: 4px !important }
  .iden-form__label{ font-size: 13px !important; margin-bottom: 2px !important }
  .iden-form__input{ padding: 10px 12px !important; font-size: 14px !important }
}

/* === 5. 도메인 칩 라벨 1줄 압축 === */
.iden-domains{ padding-bottom: 12px !important; margin-bottom: 16px !important }
.iden-domains__label{ margin-bottom: 6px !important; font-size: 11.5px !important }
.iden-domain{ padding: 6px 12px !important; font-size: 12.5px !important }

/* === 6. 진행 막대 콤팩트 === */
.iden-progress{ margin: 4px 0 14px !important }

/* === 7. 결과 카드 padding 축소 + 5S 박스 콤팩트 === */
.iden-result__main{ padding: 22px 24px 18px !important }
.iden-result__detail{ padding: 18px 24px !important }
.iden-result__step{ padding: 8px 4px !important }
.iden-result__step__line{ font-size: 10.5px !important; min-height: 28px !important }
.iden-result__quote{ font-size: 20px !important; padding: 10px 14px !important }
.iden-result__sig{ margin-top: 10px !important }
.iden-result__copy-row{ margin-top: 12px !important }

/* === 8. 다음 동선 카드 콤팩트 === */
.iden-next{ margin-top: 14px !important; gap: 10px !important }
.iden-next__card{ padding: 14px 16px !important }

/* === 9. AI 코치·SBM·Recent Flow padding 축소 === */
.ai-coaches{ margin: 0 auto 32px !important; padding: 0 24px !important }
.ai-coaches__head{ margin-bottom: 18px !important }
.ai-coaches__title{ font-size: 22px !important; margin-bottom: 6px !important }
.ai-coaches__grid{ gap: 14px !important; margin-top: 16px !important }
.ai-coach{ padding: 20px 22px !important }
.ai-coach__icon{ font-size: 26px !important; margin-bottom: 8px !important }
.ai-coach__name{ font-size: 17px !important; margin-bottom: 6px !important }
.ai-coach__desc{ margin-bottom: 12px !important }
.ai-coach__steps{ padding: 10px 12px !important; margin-bottom: 12px !important }

.recent-flow{ padding: 32px 24px 24px !important }
.rf-grid{ gap: 24px !important }

.sbm-intro{ padding: 32px 20px !important }
.sbm-intro__inner{ gap: 18px !important }
.sbm-intro__title{ font-size: 1.5rem !important; margin-bottom: 8px !important }
.sbm-intro__lead{ margin-bottom: 12px !important; font-size: .96rem !important }
.sbm-intro__bullets{ margin-bottom: 14px !important; gap: 10px !important }
.sbm-intro__bullets li{ padding: 12px 14px !important; font-size: .88rem !important }

/* === 10. footer 사이 여백 축소 === */
.foot--mini{ padding: 14px 20px !important }

/* === 11. Hero h1 모바일 보강 === */
@media(max-width: 680px){
  .home-hero h1{ font-size: 26px !important; line-height: 1.2 !important }
  .home-hero .lead{ font-size: 14.5px !important }
  .home-hero__stats{ gap: 14px !important; font-size: 12px !important }
  .home-hero__stats strong{ font-size: 18px !important }
}


/* === cobalt-overrides.css === */

/* cobalt-overrides.css — 비활성화 (2026-04-30)
   사용자 새 지시: '배경과 글씨 전부 변경으로 글씨 안보임. 홈페이지 전부 검수해라.'
   이전 코발트 지시는 따뜻 카퍼 톤·검정 본문과 가독성 충돌을 일으켜 비활성화함.
   외부 자동화가 이 파일을 다시 로드해도 효력 없도록 빈 상태로 유지. */


/* === snap-deck-v1.css === */

/* snap-deck-v1.css — 가로 스크롤 스냅 페이지 데크 + 하단 도트 네비
   2026-04-30 v2: 책 넘기듯 좌→우 가로 전환.
   적용: <body class="snap-deck-on">  +  <main class="deck"> <section class="deck-page">…</section> … </main>
*/

/* 데크 활성 시 페이지 자체는 일반 흐름이 아니라 가로 스냅 컨테이너 */
html.snap-deck-html, body.snap-deck-on{
  height:100vh;
  height:100dvh;
  margin:0;
  overflow:hidden;
}

/* main.deck = 가로 스크롤 컨테이너 */
body.snap-deck-on main.deck{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  width:100vw;
  height:100vh;
  height:100dvh;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  /* 위로는 nav 결, 아래는 도트 결 */
  padding-top:56px;
  padding-bottom:88px;
  box-sizing:border-box;
  background:#EFF4FB;
}

/* 글로벌 nav 고정 */
body.snap-deck-on .gnav{
  position:fixed;top:0;left:0;right:0;z-index:60;
}

/* 각 deck-page = 한 화면 한 페이지 */
.deck-page{
  flex:0 0 100vw;
  width:100vw;
  height:calc(100vh - 56px - 88px);
  height:calc(100dvh - 56px - 88px);
  scroll-snap-align:center;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px clamp(20px, 6vw, 80px);
  box-sizing:border-box;
  overflow-y:auto;  /* 콘텐츠가 길면 페이지 안에서만 세로 스크롤 */
  position:relative;
}

/* 페이지 사이 책 넘김 그림자 — 좌측 페이지 우측에 살짝 그라데이션 */
.deck-page::after{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;
  width:18px;
  background:linear-gradient(to right, transparent, rgba(0,0,0,0.04));
  pointer-events:none;
}
.deck-page:last-child::after{display:none}

/* 페이지 안 컨텐츠 */
.deck-page__inner{
  width:100%;
  max-width:880px;
  margin:0 auto;
}
.deck-page .prose{
  max-width:760px;
  margin:0 auto;
}
.deck-page h2{
  font-family:'Noto Serif KR',serif;
  font-weight:700;
  margin-top:0;
}

/* 페이지 번호 (우상단 작게) */
.deck-page__num{
  position:absolute;
  top:14px;right:22px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.1em;
  color:#1E40AF;
  opacity:.7;
}

/* 하단 도트 네비 (가로 정렬) */
.deck-dots{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:60;
  display:flex;
  flex-direction:row;
  gap:14px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.deck-dots__btn{
  width:11px;height:11px;
  border-radius:50%;
  border:1.5px solid #3B82F6;
  background:transparent;
  cursor:pointer;
  padding:0;
  transition:.18s;
  position:relative;
  flex:0 0 auto;
}
.deck-dots__btn:hover{
  background:#c4a87a;
  border-color:#1E40AF;
}
.deck-dots__btn.is-active{
  background:#1E40AF;
  border-color:#1E40AF;
  transform:scale(1.3);
}
/* 호버 시 라벨 (위로 뜬다) */
.deck-dots__btn::after{
  content:attr(data-label);
  position:absolute;
  bottom:22px;left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#1E40AF;color:#fff;
  padding:5px 10px;border-radius:6px;
  font-size:11px;letter-spacing:.04em;
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:.18s;
}
.deck-dots__btn:hover::after,
.deck-dots__btn:focus::after{
  opacity:1;transform:translateX(-50%) translateY(0);
}

/* 좌·우 화살표 버튼 (도트 양옆) */
.deck-arrow{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:55;
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#1E40AF;
  transition:.15s;
}
.deck-arrow:hover{
  background:#1E40AF;color:#fff;border-color:#1E40AF;
}
.deck-arrow--prev{left:18px}
.deck-arrow--next{right:18px}
.deck-arrow:disabled{opacity:.3;cursor:not-allowed}

/* 페이지 진행 표시 (도트 옆 텍스트) */
.deck-progress{
  position:fixed;
  left:50%;
  bottom:62px;
  transform:translateX(-50%);
  z-index:60;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;
  letter-spacing:.08em;
  color:#3B82F6;
  pointer-events:none;
}

/* 모바일 */
@media (max-width:680px){
  body.snap-deck-on main.deck{
    padding-top:52px;
    padding-bottom:74px;
  }
  .deck-page{
    height:calc(100vh - 52px - 74px);
    height:calc(100dvh - 52px - 74px);
    padding:16px 18px;
  }
  .deck-dots{gap:10px;padding:8px 14px;bottom:14px}
  .deck-dots__btn{width:9px;height:9px}
  .deck-arrow{width:38px;height:38px;font-size:15px}
  .deck-arrow--prev{left:8px}
  .deck-arrow--next{right:8px}
  .deck-progress{bottom:48px;font-size:10px}
  .deck-page__num{top:10px;right:14px;font-size:10px}
}

/* 사용자가 모션 줄이기 선호 시 스냅 해제 */
@media (prefers-reduced-motion: reduce){
  body.snap-deck-on main.deck{scroll-snap-type:none;scroll-behavior:auto}
  .deck-page{scroll-snap-align:none}
}

/* footer는 데크 모드에서 숨김 (마지막 페이지에 통합되거나 별도 페이지로) */
body.snap-deck-on > .foot--mini{
  display:none;
}


/* === perspective-pager.css === */

/* perspective-pager.css — 글 페이지 가로 슬라이드 네비
   100편(또는 그 이상) 어디서든 ←/→로 이전·다음 글로 책 넘김처럼 이동.
   작성: 2026-04-30 */

.psp-pager{
  position:fixed; inset:auto 0 0 0; z-index:90;
  pointer-events:none; /* 화살표 영역만 받기 */
}
.psp-pager__btn{
  position:fixed; top:50%; transform:translateY(-50%);
  width:48px; height:72px; border-radius:8px;
  background:rgba(250,250,247,.92); backdrop-filter:blur(8px);
  border:1px solid #d8cdb8; color:#3a322a;
  display:flex; align-items:center; justify-content:center;
  font-family:'Pretendard','Noto Serif KR',serif; font-size:24px; font-weight:700;
  cursor:pointer; pointer-events:auto;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  transition:all .15s ease;
  text-decoration:none; line-height:1;
}
.psp-pager__btn:hover{ border-color:#a4541a; color:#a4541a; background:#fff; }
.psp-pager__btn--prev{ left:18px; }
.psp-pager__btn--next{ right:18px; }
.psp-pager__btn[aria-disabled="true"]{ opacity:.25; cursor:not-allowed; }

.psp-pager__hover{
  position:absolute; top:-94px; padding:10px 14px; background:#fff;
  border:1px solid #d8cdb8; border-radius:8px; font-size:12px; color:#3a322a;
  white-space:nowrap; max-width:280px; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 8px 24px rgba(0,0,0,.10); display:none; pointer-events:none;
}
.psp-pager__btn--prev .psp-pager__hover{ left:0; }
.psp-pager__btn--next .psp-pager__hover{ right:0; }
.psp-pager__btn:hover .psp-pager__hover{ display:block; }

/* 진행 막대 + 인덱스 표시 */
.psp-progress{
  position:fixed; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,.5); z-index:88; pointer-events:none;
}
.psp-progress__bar{
  height:100%; background:#a4541a; width:0;
  transition:width .35s cubic-bezier(.6,.05,.3,1);
}
.psp-meta{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:rgba(250,250,247,.94); backdrop-filter:blur(8px);
  border:1px solid #d8cdb8; border-radius:999px;
  padding:7px 16px; font-size:12px; color:#3a322a;
  font-family:'Pretendard',-apple-system,sans-serif; font-weight:600;
  letter-spacing:-.01em; z-index:90; pointer-events:auto;
  box-shadow:0 4px 14px rgba(0,0,0,.06); white-space:nowrap;
  text-decoration:none;
}
.psp-meta__idx{ color:#a4541a; font-family:ui-monospace,Menlo,Consolas,monospace; }
.psp-meta__sep{ color:#d8cdb8; margin:0 6px; }
.psp-meta__back{ color:#3a322a; }
.psp-meta:hover{ background:#fff; border-color:#a4541a; }

/* 모바일: 화살표 살짝 작고 안쪽 */
@media (max-width:760px){
  .psp-pager__btn{ width:40px; height:56px; font-size:20px; }
  .psp-pager__btn--prev{ left:8px; }
  .psp-pager__btn--next{ right:8px; }
  .psp-pager__hover{ display:none !important; }
  .psp-meta{ font-size:11px; padding:6px 13px; bottom:12px; }
}

/* 본문이 화살표에 가려지지 않게 약간의 여백 보장 */
@media (min-width:1080px){
  .wrap{ padding-bottom:120px !important; }
}


/* === a11y-fixes-v1.css === */

/* a11y-fixes-v1.css — WCAG AA 색 대비 수정 (2026-05-01)
   진단 결과 4건의 색 대비 위반(<4.5:1)을 보정.
   기존 토큰을 덮어쓰는 마지막 로드 CSS로 사용.

   수정 내역:
   - --c-mute / --ink-2 #6b6155 → #5a5048 (4.5:1 이상 확보)
   - 카드 텍스트 색상 강화
   - 배지·라벨 색상 진하게
*/

:root {
  /* WCAG AA 통과 색상으로 갱신 */
  --c-mute: #5a5048;       /* 기존 #6b6155 → 4.5:1+ */
  --ink-2: #5a5048;
  --copper-text: #7a3f15;   /* 배경 #efe7d6 위 4.5:1+ */
  --c-text-secondary: #4a4038;
}

/* 본문 보조 텍스트 색 대비 강화 */
body .text-mute,
body .lead,
body .meta,
body .footnote,
body .footer-note,
body .caption,
body small {
  color: var(--c-mute) !important;
}

/* 카드 안 텍스트 */
.card .meta,
.card small,
.cat .desc,
.cat .meta {
  color: var(--c-text-secondary);
}

/* 배지·라벨 — 따뜻한 배경 위에서 충분한 대비 */
.badge,
.tag,
.chip,
.label {
  color: var(--copper-text);
}

/* 링크 색상 — 강조 시 충분한 대비 */
a:not(.btn):not(.cta) {
  color: #1A3A8A;  /* 기존 #1E40AF보다 약간 진하게 */
}

a:not(.btn):not(.cta):hover {
  color: #0F2A6E;
}

/* 보조 정보 색상 강화 */
.subtitle,
.subhead,
.eyebrow {
  color: #4a4038;
}

/* 폼 placeholder 가독성 */
input::placeholder,
textarea::placeholder {
  color: #6b6155;  /* 입력 영역은 흰 배경이라 4.5:1 통과 */
}

/* 키보드 포커스 스타일 강화 (WCAG 2.4.7) */
*:focus-visible {
  outline: 3px solid #1E40AF;
  outline-offset: 2px;
  border-radius: 2px;
}

/* 스킵 링크 (스크린리더용) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  background: #1E40AF;
  color: #fff;
  padding: .75rem 1.25rem;
  text-decoration: none;
  border-radius: 4px;
  z-index: 10000;
}
.skip-link:focus {
  left: 1rem;
}