/**
 * a11y.css — 건너뛰기, 접근성 위젯, 사용자 설정
 */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-neutral-0, #fff);
  background: var(--color-brand-navy, #005eb8);
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transform: translateY(-120%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-brand-navy, #005eb8);
  outline-offset: 2px;
}

/* ----- 흑백 모드 (고대비: 순흑·순백, 노랑+흰 → 검정+흰) ----- */
html[data-grayscale="true"] {
  filter: grayscale(100%) contrast(1.9);

  --color-accent-yellow: #000000;
  --color-accent-lime: #000000;
  --color-accent-cyan: #ffffff;
  --color-brand-navy: #000000;
  --color-brand-teal: #000000;
  --color-neutral-0: #ffffff;
  --color-neutral-100: #ffffff;
  --color-neutral-300: #000000;
  --color-neutral-500: #000000;
  --color-neutral-700: #000000;
  --color-neutral-800: #000000;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text-primary: #000000;
  --color-text-secondary: #000000;
  --color-text: #000000;
  --color-text-muted: #000000;
  --color-border: #000000;
  --color-accent: #000000;
  --color-accent-strong: #000000;
  --color-focus-ring: #000000;
  --color-hero-ground: #000000;
  --gb-yellow: #000000;
  --gb-yellow-deep: #000000;
  --gb-blue: #ffffff;
  --gb-blue-soft: #ffffff;
  --gb-navy: #000000;
  --gb-footer-bg: #000000;
  --p5-green-dark: #000000;
  --p5-green-light: #000000;
  --p5-green-on-white: #000000;
}

html[data-grayscale="true"] body {
  background-color: #fff !important;
  color: #000 !important;
}

html[data-grayscale="true"] main,
html[data-grayscale="true"] section {
  border-color: #000;
}

/* 노랑·라임 면 → 검정 바탕 + 흰 글자 */
html[data-grayscale="true"] .hero-ground,
html[data-grayscale="true"] .story-map-section,
html[data-grayscale="true"] .story-map-pin,
html[data-grayscale="true"] .section3-panel5-outro,
html[data-grayscale="true"] .section3-panel5-outro__yellowfloor,
html[data-grayscale="true"] .section3-panel5-outro__disc,
html[data-grayscale="true"] .section3-panel5-outro__scene,
html[data-grayscale="true"] .section3-panel5-outro__pin,
html[data-grayscale="true"] .guestbook-particle--yellow,
html[data-grayscale="true"] .guestbook-modal__panel,
html[data-grayscale="true"] .process-header__fill {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* 흰+노랑 병치 구역의 흰 면 → 흰 바탕 + 검정 테두리·글자 */
html[data-grayscale="true"] .section3-p5-compare-card,
html[data-grayscale="true"] .section3-p5-green-employee-card,
html[data-grayscale="true"] .section3-p5-green__iris,
html[data-grayscale="true"] .time-intro__frame,
html[data-grayscale="true"] .guestbook-bubble--blue,
html[data-grayscale="true"] .guestbook-bubble--asset,
html[data-grayscale="true"] .guestbook-prelude,
html[data-grayscale="true"] .guestbook-hero,
html[data-grayscale="true"] .guestbook-bubbles,
html[data-grayscale="true"] .a11y-widget__panel {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}

/* 연한 파랑·회색 면 → 흰 바탕 + 검정 구분선 */
html[data-grayscale="true"] .time-intro,
html[data-grayscale="true"] .section3-section--time,
html[data-grayscale="true"] .section3-time-panel,
html[data-grayscale="true"] .section3-stat-card,
html[data-grayscale="true"] .time-carousel__slide,
html[data-grayscale="true"] .folded-panel,
html[data-grayscale="true"] .guestbook {
  background-color: #fff !important;
  color: #000 !important;
  outline: 1px solid #000;
  outline-offset: -1px;
}

/* 네이비·초록 면 → 순검정 */
html[data-grayscale="true"] .site-footer--impact,
html[data-grayscale="true"] .section3-p5-green,
html[data-grayscale="true"] .section3-p5-green__bg,
html[data-grayscale="true"] .section3-p5-green__bg-layer--dark,
html[data-grayscale="true"] .section3-p5-green__bg-layer--sweep,
html[data-grayscale="true"] .process-header__accent,
html[data-grayscale="true"] .time-carousel__tab.is-active {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #000 !important;
}

html[data-grayscale="true"] .section3-p5-green-employee-card__title,
html[data-grayscale="true"] .section3-p5-green-employee-card__value {
  color: #000 !important;
}

html[data-grayscale="true"] .section3-p5-green-employee__heading,
html[data-grayscale="true"] .section3-p5-green-employee__amount,
html[data-grayscale="true"] .section3-p5-green-center__lead,
html[data-grayscale="true"] .section3-p5-green-center__metric {
  color: #fff !important;
}

/* 텍스트·링크·아이콘 */
html[data-grayscale="true"] a,
html[data-grayscale="true"] button,
html[data-grayscale="true"] h1,
html[data-grayscale="true"] h2,
html[data-grayscale="true"] h3,
html[data-grayscale="true"] h4,
html[data-grayscale="true"] p,
html[data-grayscale="true"] li,
html[data-grayscale="true"] label,
html[data-grayscale="true"] span {
  text-shadow: none !important;
}

html[data-grayscale="true"] a:not(.guestbook-hero__cta):not(.process-header__link) {
  color: #000 !important;
  text-decoration-thickness: 2px;
}

html[data-grayscale="true"] .process-header__link {
  color: #000 !important;
}

html[data-grayscale="true"] .process-header__label {
  color: #666 !important;
}

html[data-grayscale="true"] .process-header__link[aria-current="true"] .process-header__label {
  color: #444 !important;
}

html[data-grayscale="true"] img,
html[data-grayscale="true"] video {
  opacity: 1;
}

html[data-grayscale="true"] hr,
html[data-grayscale="true"] [class*="divider"] {
  background-color: #000 !important;
  border-color: #000 !important;
  opacity: 1 !important;
}

html[data-grayscale="true"] *:focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000 !important;
}

/* ----- 흑백 모드 — 영역별 색 보정 ----- */

/* 인트로: 주변 공(lime·mint) 회색 톤 */
html[data-grayscale="true"] .hero-ball--lime img,
html[data-grayscale="true"] .hero-ball--mint img {
  filter: grayscale(100%) brightness(0.58) contrast(1.05);
}

html[data-grayscale="true"] .hero-balls-visual__media {
  filter: grayscale(100%) brightness(0.72);
}

/* 지도: 중앙 인트로·캡션·아웃트로 등 모든 텍스트 흰색 */
html[data-grayscale="true"] .story-map-intro,
html[data-grayscale="true"] .story-map-intro__line,
html[data-grayscale="true"] .story-map-caption,
html[data-grayscale="true"] .story-map-caption__line,
html[data-grayscale="true"] .story-map-caption__tw,
html[data-grayscale="true"] .story-map-outro__copy,
html[data-grayscale="true"] .story-map-outro__copy strong {
  color: #fff !important;
}

/* 변화: 씨앗~가능성 발견 문구 흰색 */
html[data-grayscale="true"] .section3-panel5-outro__final,
html[data-grayscale="true"] .section3-panel5-outro__final-line {
  color: #fff !important;
}

html[data-grayscale="true"] .section3-panel5-outro__edge {
  color: #fff !important;
}

/* 참여 전·후 표 하단 아이콘 3칸 — 검정 테두리 */
html[data-grayscale="true"] .section3-p5-compare-outcome {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}

html[data-grayscale="true"] .section3-p5-compare-outcome__label,
html[data-grayscale="true"] .section3-p5-compare-outcome__line {
  color: #000 !important;
}

/* 파이그래프(두산 차트) 카드 — 검정 배경 + 차트 흰색 타이틀 가독 */
html[data-grayscale="true"] .section3-p5-doosan-card {
  background-color: #000 !important;
  border: 2px solid #000 !important;
}

html[data-grayscale="true"] .section3-p5-doosan-card__img {
  filter: invert(1) grayscale(100%) contrast(1.12);
}

html[data-grayscale="true"] .section3-p5-tabs__body {
  background-color: #000 !important;
}

html[data-grayscale="true"] .section3-p5-tabs-panel,
html[data-grayscale="true"] .section3-p5-tabs-panel__lead,
html[data-grayscale="true"] .section3-p5-tabs-panel__quote,
html[data-grayscale="true"] .section3-p5-tabs-panel__text,
html[data-grayscale="true"] .section3-p5-doosan__lead,
html[data-grayscale="true"] .section3-p5-doosan__quote {
  color: #fff !important;
}

html[data-grayscale="true"] .section3-p5-tabs-panel__footnote {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* 응원메시지 작성 버튼 — 아이콘·텍스트 흰색 */
html[data-grayscale="true"] .guestbook-hero__cta {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
}

html[data-grayscale="true"] .guestbook-hero__cta-label {
  color: #fff !important;
}

html[data-grayscale="true"] .guestbook-hero__cta-icon svg path {
  fill: #fff !important;
}

/* 응원 텍스트 버블 — 흰 배경 + 검정 글씨 */
html[data-grayscale="true"] .guestbook-bubble--yellow,
html[data-grayscale="true"] .guestbook-bubble--blue,
html[data-grayscale="true"] .guestbook-bubble:not(.guestbook-bubble--asset) {
  background-color: #fff !important;
  border: 2px solid #000 !important;
}

html[data-grayscale="true"] .guestbook-bubble__text,
html[data-grayscale="true"] .guestbook-bubble__text--hand {
  color: #000 !important;
}

/* 응원메시지 모달 — 검정 배경 + 흰 필드·텍스트 */
html[data-grayscale="true"] .guestbook-modal {
  --gb-navy: #fff;
  --gb-navy-deep: #fff;
}

html[data-grayscale="true"] .guestbook-modal::backdrop {
  background: rgba(0, 0, 0, 0.88) !important;
}

html[data-grayscale="true"] .guestbook-modal__body,
html[data-grayscale="true"] .guestbook-modal__success {
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-grayscale="true"] .guestbook-modal__title,
html[data-grayscale="true"] .guestbook-modal__note,
html[data-grayscale="true"] .guestbook-modal__success-title,
html[data-grayscale="true"] .guestbook-modal__success-desc,
html[data-grayscale="true"] .guestbook-modal .guestbook-form__counter,
html[data-grayscale="true"] .guestbook-modal .guestbook-status,
html[data-grayscale="true"] .guestbook-modal__success-close {
  color: #fff !important;
}

html[data-grayscale="true"] .guestbook-modal .guestbook-form__textarea,
html[data-grayscale="true"] .guestbook-modal .guestbook-form__input {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  caret-color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-grayscale="true"] .guestbook-modal .guestbook-form__textarea::placeholder,
html[data-grayscale="true"] .guestbook-modal .guestbook-form__input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
}

html[data-grayscale="true"] .guestbook-modal .guestbook-form__textarea:focus,
html[data-grayscale="true"] .guestbook-modal .guestbook-form__input:focus {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

html[data-grayscale="true"] .guestbook-modal__close {
  background-color: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}

html[data-grayscale="true"] .guestbook-modal__close:hover,
html[data-grayscale="true"] .guestbook-modal__close:focus-visible {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: #fff !important;
  color: #fff !important;
  outline-color: #fff !important;
}

html[data-grayscale="true"] .guestbook-modal__close svg path {
  stroke: currentColor !important;
}

html[data-grayscale="true"] .guestbook-modal .guestbook-form__submit {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}

html[data-grayscale="true"] .guestbook-modal__success-close {
  background-color: transparent !important;
  border-color: #fff !important;
}

html[data-grayscale="true"] .guestbook-modal__success-close:hover,
html[data-grayscale="true"] .guestbook-modal__success-close:focus-visible {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: #fff !important;
  color: #fff !important;
  outline-color: #fff !important;
}

html[data-grayscale="true"] .guestbook-modal .guestbook-status.error {
  color: #fff !important;
}

html[data-grayscale="true"] .guestbook-modal__success-icon svg circle {
  fill: #fff !important;
}

html[data-grayscale="true"] .guestbook-modal__success-icon svg path {
  stroke: #000 !important;
}

/* ----- 접근성 위젯 (우측 하단) ----- */
.a11y-widget {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 49;
  font-family: var(--font-sans, "Pretendard Variable", Pretendard, sans-serif);
}

.a11y-widget__fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(0, 94, 184, 0.18);
  border-radius: 50%;
  background: #fff;
  color: var(--color-brand-navy, #005eb8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.a11y-widget__fab:hover {
  background: #f4f9ff;
}

.a11y-widget__fab:focus-visible {
  outline: 2px solid var(--color-brand-navy, #005eb8);
  outline-offset: 2px;
}

.a11y-widget__fab-icon {
  display: block;
}

.a11y-widget__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.65rem);
  width: min(17.5rem, calc(100vw - 2rem));
  padding: 0.85rem 0.9rem 0.95rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  color: #222;
}

.a11y-widget__title {
  margin: 0 0 0.65rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-brand-navy, #005eb8);
}

.a11y-widget__group + .a11y-widget__group {
  margin-top: 0.55rem;
}

.a11y-widget__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333;
  text-align: left;
  cursor: pointer;
}

.a11y-widget__toggle[aria-pressed="true"] {
  border-color: var(--color-brand-navy, #005eb8);
  background: #e8f4ff;
  color: var(--color-brand-navy, #005eb8);
  font-weight: 700;
}

.a11y-widget__toggle:focus-visible {
  outline: 2px solid var(--color-brand-navy, #005eb8);
  outline-offset: 1px;
}

.a11y-widget__toggle-label {
  flex: 1;
}

.a11y-widget__hint {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #666;
}

.a11y-widget__hint[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .a11y-widget {
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }

  .a11y-widget__fab {
    width: 2.75rem;
    height: 2.75rem;
  }
}