html,
body,
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
}

/* 폼 요소는 폰트를 상속하지 않으므로 전역 폰트 강제 */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* 공통 컨테이너 — 최대 1280px 중앙 프레임.
   히어로·푸터의 풀블리드와 우측 캐릭터 밀착은 이 프레임 기준
   (창이 더 넓으면 프레임 밖은 --page-bg 여백) */
#MainContainer {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  height: 100vh;
  overflow: hidden;
  background-color: var(--page-bg);
}

/* 캐릭터 컨테이너 (상위 레이어) */
#AITalkContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
  pointer-events: none;
  /* Let clicks pass through to report */
}

.AITalk_group {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  /* 그룹 자체는 클릭 통과, 자식은 auto */
  z-index: 10;
}

.AITalk_group>* {
  pointer-events: auto;
}

.AITalk_group.left {
  left: 0;
  transform: none;
}

.AITalk_group.center {
  left: 50%;
  transform: translateX(-50%);
}

.AITalk_group.right {
  right: 0;
  transform: none;
}

.AITalk_floating {
  /* position:absolute 제거 -> flex item으로 동작 */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 캐릭터 겹침 효과: JS에서 margin-left로 gap 제어 */
/* 첫 번째 요소는 겹칠 대상이 없으므로 마진 제거 */
.AITalk_group>.AITalk_floating:first-child {
  margin-left: 0 !important;
}

/* 기존 위치 클래스는 그룹 시스템으로 대체되므로 제거하거나 무시됩니다 */
/* 호환성을 위해 남겨둘 경우, 그룹 내부에서는 의미가 없어짐 */
.AITalk_character {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  transition: transform 0.22s;
  /* 좌우 미러링 제어 */
  --scaleX: 1;
  transform: scaleX(var(--scaleX));
  display: flex;
  /* Prevent tap/click highlight on supported browsers */
  /* On some mobile browsers, interactive elements like images and
      divs show a gray overlay when tapped. Setting the tap highlight
      color to fully transparent disables this default shading so
      clicking the character does not produce a dimming effect. */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Remove default outline that can appear on click/focus */
  outline: none;
}

.AITalk_character .AITalk_char-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.AITalk_character.AITalk_reflect {
  --scaleX: -1;
}

.AITalk_character.AITalk_shake {
  animation: AITalk_shake 0.38s;
}

.AITalk_character.AITalk_jump {
  animation: AITalk_jump 0.56s;
}

.AITalk_speech-bubble {
  position: absolute;
  /* Default positioning (Top is standard) handled by specific classes or default fallbacks if needed */
  background: var(--paper);
  border: 1px solid var(--brand-line);
  border-radius: 18px;
  padding: 18px 26px;
  font-size: 1.0em;
  color: var(--ink);
  min-width: 130px;
  max-width: 90vw;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 14px 32px var(--brand-shadow);
  pointer-events: none;
  white-space: pre-line;
  overflow-wrap: break-word;
  text-align: center;
  z-index: 100;
  /* Ensure above character if overlapping */
}

/* 말풍선 꼬리 — 캐릭터를 향하는 방향(위치 변형 클래스)에 맞춰 표시 */
.AITalk_speech-bubble::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--paper);
  transform: rotate(45deg);
}

.AITalk_bubble_left::after {
  /* 캐릭터가 오른쪽 → 꼬리는 오른쪽 가장자리 */
  right: -8px;
  top: 50%;
  margin-top: -7px;
  border-top: 1px solid var(--brand-line);
  border-right: 1px solid var(--brand-line);
}

.AITalk_bubble_right::after {
  left: -8px;
  top: 50%;
  margin-top: -7px;
  border-bottom: 1px solid var(--brand-line);
  border-left: 1px solid var(--brand-line);
}

.AITalk_bubble_top::after {
  bottom: -8px;
  left: 50%;
  margin-left: -7px;
  border-right: 1px solid var(--brand-line);
  border-bottom: 1px solid var(--brand-line);
}

.AITalk_bubble_bottom::after {
  top: -8px;
  left: 50%;
  margin-left: -7px;
  border-top: 1px solid var(--brand-line);
  border-left: 1px solid var(--brand-line);
}

/* Position Variants */
/* Position Variants */
.AITalk_bubble_top {
  bottom: 100%;
  left: 50%;
  right: auto;
  top: auto;
  transform: translateX(-50%);
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}

.AITalk_bubble_bottom {
  top: 100%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  margin-top: 20px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

.AITalk_bubble_left {
  right: 100%;
  top: 50%;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  margin-right: -10px;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.AITalk_bubble_right {
  left: 100%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translateY(-50%);
  margin-left: -10px;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.AITalk_speech-bubble.AITalk_show {
  opacity: 1;
  pointer-events: auto;
}

/* 시선 유도 말풍선 — 캐릭터 머리 위, 둥실둥실 떠다니며 관심을 끈다.
   대사 말풍선(.AITalk_show)이 뜨면 JS가 .AITalk_attention-hidden을 붙여 숨긴다. */
.AITalk_attention {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--brand);
  color: var(--paper);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 22px var(--brand-shadow);
  pointer-events: none;
  z-index: 90;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: AITalk_attention-float 2.4s ease-in-out infinite;
}

.AITalk_attention::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -7px;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  background: var(--brand);
  transform: rotate(45deg);
}

.AITalk_attention.AITalk_attention-hidden {
  opacity: 0;
  animation-play-state: paused;
}

@keyframes AITalk_attention-float {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-12px);
  }
}

/* 전체 재생 중지 버튼 — 말풍선 아래에 떠 있는 알약 버튼
   (말풍선의 자식이라 말풍선이 숨겨지면 함께 사라짐) */
.ai-playback-stop-btn {
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--brand-shadow);
}

.ai-playback-stop-btn:hover {
  background: var(--alert-tint);
  border-color: var(--alert-soft);
  color: var(--alert);
}

/* Legacy alignment overrides removed to prevent conflict with explicit bubblePosition */

/* Ensure text is always centered as requested */
.AITalk_speech-bubble-text {
  flex: 1;
  text-align: center;
}

@keyframes AITalk_shake {
  0% {
    transform: translateX(-36px) scaleX(var(--scaleX));
  }

  50% {
    transform: translateX(36px) scaleX(var(--scaleX));
  }

  100% {
    transform: translateX(0) scaleX(var(--scaleX));
  }
}

@keyframes AITalk_jump {
  0% {
    transform: translateY(0) scaleX(var(--scaleX));
  }

  28% {
    transform: translateY(-55px) scaleX(var(--scaleX));
  }

  62% {
    transform: translateY(0) scaleX(var(--scaleX));
  }

  100% {
    transform: translateY(0) scaleX(var(--scaleX));
  }
}

/* 테스트용 UI 레이아웃 -> 보고서 레이아웃으로 변경 */
.sample-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: white;
  /* 상단: 헤더 바(72px) + 여백 40px */
  padding: 112px 20px 40px;
  /* 좌우 패딩 추가 */
  /* Remove center float style */
  transform: none;
  border-radius: 0;
  box-shadow: none;
  z-index: 1;
  /* AITalk 아래 */
  font-family: var(--font);
  user-select: text !important;
}

/* Content centering wrapper within sample-controls using direct child selection or just modifying children */
.sample-controls>div {
  max-width: 1000px;
  margin: 0 auto 30px auto;
  /* Center and add bottom spacing */
}

/* Force allow selection on all children overriding global * { user-select: none } */
.sample-controls * {
  user-select: text !important;
  pointer-events: auto;
  /* Ensure tooltip works */
}

.report-header {
  border-bottom: 2px solid #000;
  margin-bottom: 30px;
  padding-bottom: 20px;
  text-align: center;
}

.report-header h1 {
  font-size: 28px;
  margin-bottom: 10px;
}

.report-header p {
  font-size: 14px;
  color: #666;
}

.report-section {
  margin-bottom: 30px;
}

.report-section h3 {
  font-size: 18px;
  border-left: 4px solid #000;
  padding-left: 10px;
  margin-bottom: 15px;
  color: #333;
}

.report-section .content {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  text-align: justify;
}

.report-section .highlight {
  font-weight: bold;
  color: #000;
  background: #f7f7f7;
  padding: 2px 5px;
}

/* 스크롤바 커스텀 (스크롤 동작 시에만 표시 via JS) */
.sample-controls::-webkit-scrollbar {
  width: 8px;
}

.sample-controls::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.3s;
}

.sample-controls.show-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
}

.sample-controls::-webkit-scrollbar-track {
  background: transparent;
}

/* Report Interaction Styles */

/* Message Link (본문 앵커) — 캐노니컬 정의는 interaction.css.
   여기서는 동일한 값을 유지해 로드 순서와 무관하게 일관되도록 한다 */
.ai-msg-link {
  background-color: transparent;
  color: var(--anchor-text);
  font-weight: 500;
  padding: 0 2px;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  border-bottom: 1.5px dashed var(--brand);
  transition: background-color 0.2s, border-color 0.2s;
  text-decoration: none;
}

.ai-msg-link:hover {
  background-color: var(--brand-tint);
  border-bottom-style: solid;
  color: var(--brand-dark);
}

/* Modal Overlay */
.ai-msg-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-out;
}

/* Modal Box */
.ai-msg-modal {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  width: 420px;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform-origin: center;
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ai-msg-modal h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #343a40;
  font-weight: 700;
}

.ai-msg-modal textarea {
  width: 100%;
  height: 120px;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  resize: none;
  font-family: var(--font);
  font-size: 1rem;
  color: #495057;
  transition: border-color 0.2s;
}

.ai-msg-modal textarea:focus {
  outline: none;
  border-color: #4dabf7;
}

.ai-msg-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.ai-msg-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.ai-msg-btn-cancel {
  background-color: #f1f3f5;
  color: #495057;
}

.ai-msg-btn-cancel:hover {
  background-color: #e9ecef;
}

.ai-msg-btn-save {
  background-color: #228be6;
  color: white;
  box-shadow: 0 4px 12px rgba(34, 139, 230, 0.3);
}

.ai-msg-btn-save:hover {
  background-color: #1c7ed6;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(34, 139, 230, 0.4);
}

/* AITalk Specific Styles */
.intro-container {
  background-color: white !important;
  /* pro-landing: 대상 사이트처럼 페이지 전체가 흰 바탕 (카드 박스 없음) */
  width: 100% !important;
  /* Ensure full width for scrollbar */
  max-width: none !important;
  /* Reset conflicting max-width */
}

/* pro-landing 콘텐츠 스타일 (대상 사이트 기준):
   카드 박스 없이 흰 바탕에 플랫하게 흐르는 섹션 + 중앙 정렬 섹션 헤더 */
.intro-section {
  max-width: 1000px;
  margin: 0 auto 130px auto;
  padding: 0 6px;
}

/* 아울렛 직계 자식용 레거시 규칙(.sample-controls>div, 30px)이 위 간격을 덮어쓰므로
   같은 경로에 더 높은 특이도로 섹션 간격을 다시 선언 */
.sample-controls > .intro-section {
  margin-bottom: 130px;
}

/* 텍스트 정렬 유틸리티 — 콘텐츠 조각에서 재사용.
   h1/h3 등 기본 정렬 규칙(중앙 정렬 등)을 의도적으로 덮어써야 하므로 !important 사용 */
.intro-section .text-left { text-align: left !important; }
.intro-section .text-center { text-align: center !important; }
.intro-section .text-right { text-align: right !important; }

/* 본문 중간에 자유롭게 삽입하는 이미지(카드/히어로 전용 슬롯이 아닌 경우) */
.intro-section .content-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
  border-radius: 8px;
}

/* 게시판·폼 페이지(무료상담·문의하기·질문기록)의 섹션 간격 축소 규칙은
   asset/style/search.css로 옮겼다 — renderApplyPage()가 조각을 .ask-reveal로 감싸
   주입해 실제 부모 경로가 ".sample-controls > ..."(직계 자식)이 아니라
   ".intro-container .ask-reveal .intro-section"(후손)이라 이 파일의 직계 자식
   선택자로는 애초에 매칭되지 않는다(과거 동일한 실수로 두 번 헛수고한 이력 있음 —
   2026-08). 여기서 다시 만들지 말고 search.css의
   "body.ask-result .intro-container .intro-section[id^=...]" 규칙을 고칠 것. */

/* 페이지 제목 — 중앙 정렬 대형 타이틀 (브랜드 밑줄 카드 스타일 제거) */
.intro-section h1 {
  font-size: 34px;
  margin: 0 0 14px;
  color: var(--ink);
  text-align: center;
}

/* 클릭형 페이지 제목 (id="btn-play-all"을 h1에 부여하는 관행) — 현재는 커서 스타일만
   남은 장식용 규칙 (과거 전체 재생 기능은 제거됨) */
.intro-section h1.page-title {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.intro-section h1.page-title:hover {
  color: var(--brand);
}

.intro-section h1.page-title::after {
  content: '▶';
  font-size: 13px;
  vertical-align: middle;
  margin-left: 10px;
  color: var(--brand);
  opacity: 0.45;
}

/* 클릭형 장식을 걷어낸 일반 제목 (문의하기 PAGE-HEAD 등) — .page-title과 함께 사용,
   순수 텍스트만 보이도록 화살표 장식·호버 색상 변화도 함께 제거.
   위 기본 규칙과 클래스 특이도가 같으므로(양쪽 다 클래스 2개+h1) 반드시 뒤에 와야
   캐스케이드 순서로 이긴다 — 순서를 앞으로 옮기면 다시 화살표가 보인다. */
.intro-section h1.page-title--plain {
  cursor: default;
}

.intro-section h1.page-title--plain:hover {
  color: var(--ink);
}

.intro-section h1.page-title--plain::after {
  content: none;
}

/* 섹션 제목 — 중앙 정렬 */
.intro-section h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 26px;
  text-align: center;
}

/* 하나의 .intro-section 안에 여러 소주제(카드 그룹)를 이어 붙일 때 쓰는 가운데 정렬 소제목 —
   페이지를 쪼개지 않고 한 섹션에 압축한 제품 소개(예: 3_1_concierge)에서 사용. 일반 h4는
   기본값(좌측 정렬)을 유지해야 하므로(예: 활용 시나리오의 소상공인/관광지 서브 헤더) 이 클래스를
   붙인 h4에만 적용한다. */
.intro-section h4.content-subtitle {
  text-align: center;
  color: var(--ink);
  font-size: 20px;
  margin: 46px 0 8px;
}

.intro-section p {
  margin-bottom: 15px;
  color: #555;
  line-height: 1.8;
}

/* 섹션 리드 문단(최상위 p) — 좁은 폭 중앙 정렬 */
.intro-section > p {
  max-width: 680px;
  margin: 0 auto 24px;
  text-align: center;
}

/* 680px 폭에서 줄바꿈되면 안 되는 한 줄 요약 리드 문단(예: 회사개요)에 부여 —
   섹션 자체 폭(1000px) 안에서 여유 있게 확장 */
.intro-section > p.lead-wide {
  max-width: 860px;
}

.intro-section ul {
  margin-left: 20px;
  color: #555;
}

/* 최상위 목록 — 본문 폭으로 중앙 배치 (텍스트는 좌측 정렬 유지) */
.intro-section > ul {
  max-width: 680px;
  margin: 0 auto 20px;
  padding-left: 20px;
}

.intro-section ul li {
  margin-bottom: 10px;
}

/* Button Group for Intro */
.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.ai-btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  transition: all 0.2s;
}

.ai-btn:hover {
  background: var(--brand-tint);
  transform: translateY(-2px);
}

.image-demo-area {
  margin-top: 20px;
  text-align: center;
  background: #f1f3f5;
  padding: 20px;
  border-radius: 12px;
}

.image-demo-area img {
  width: 100%;
  border-radius: 8px;
  transition: opacity 0.5s;
}

.image-demo-area p {
  margin-top: 10px;
}

/* Play All Button in Header */
.btn-play-all {
  background-color: var(--brand);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s;
  vertical-align: middle;
  margin-left: 20px;
  /* Space from title */
  float: right;
  /* Quick align right if container is block */
}

.btn-play-all:hover {
  background-color: var(--brand-dark);
}

@keyframes ai-blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

/* [강조:ID] 대상 강조 — 박스/링 대신 제목 텍스트 자체가 점멸.
   (이전의 scale(1.1)+빨간 배경 채움, 그 다음의 링 펄스는 모두 텍스트 주변이 산란돼 보이는 문제가 있었음) */
.highlight-active {
  animation: ai-hlt-blink 1.6s ease-in-out infinite;
}

/* [강조:ID] 대상이 버튼(.ai-btn)일 때는 텍스트 색 점멸(.highlight-active 기본값)만으론 버튼 배경
   위에서 잘 안 보여서, 폼 필수입력 강조(.field-alert)와 동일한 빨간 테두리 링 펄스로 대체한다. */
.ai-btn.highlight-active {
  animation: field-alert-pulse 0.6s ease-in-out 3;
  box-shadow: 0 0 0 2px var(--alert-soft);
}

@keyframes ai-hlt-blink {

  0%,
  100% {
    color: var(--ink);
    opacity: 1;
  }

  50% {
    color: var(--brand);
    opacity: 0.55;
  }
}
/* === Intro helpers (extracted from index.html inline styles) === */
.button-group-label {
  margin: 10px 0 5px;
  font-size: 0.9em;
  color: #666;
  text-align: center;
}

.button-group-label + .button-group {
  margin-top: 0;
  margin-bottom: 15px;
}

.charts-row {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.charts-row .chart-card {
  width: 48%;
}

/* === 셸 헤더 바 (#ai-site-header — 로고 + 메뉴 + CTA, 대상 레이아웃의 상단 바) === */
#ai-site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  z-index: 9000;
  /* 콘텐츠(1) 위, 캐릭터 레이어(10001) 아래 */
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(4px);
}

.site-brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.25;
  flex: 0 0 auto;
}

.site-brand-kr {
  font-size: 17px;
  font-weight: 800;
  color: var(--brand);
}

.site-brand-en {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #888;
}

/* 로고를 영문 NCLAW만 표시할 때 (브랜드 워드마크) */
.site-brand-logo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--brand);
}

.site-header-cta {
  flex: 0 0 auto;
  background: var(--brand);
  color: white !important;
  padding: 9px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}

.site-header-cta:hover {
  background: var(--brand-dark);
}

/* 모바일 GnB 딤 스크림 — 데스크톱에서는 숨김 (열림 중 리사이즈 대비) */
#ai-nav-scrim {
  display: none;
}

/* 햄버거 토글 — 모바일 전용 (데스크톱은 숨김, 미디어쿼리에서 표시) */
#ai-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px;
  background: none;
  border: 0;
  cursor: pointer;
}

#ai-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transition: transform 0.2s, opacity 0.2s;
}

#ai-site-header.menu-open #ai-nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#ai-site-header.menu-open #ai-nav-toggle span:nth-child(2) {
  opacity: 0;
}

#ai-site-header.menu-open #ai-nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* === SPA 페이지 네비게이션 (#ai-page-nav — 헤더 안 텍스트 메뉴, Router가 manifest에서 렌더) === */
#ai-page-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  overflow: hidden;
}

#ai-page-nav a {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #556;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

#ai-page-nav a:hover {
  color: var(--brand);
}

#ai-page-nav a.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ==========================================================
   부트 로딩 오버레이 (#ai-boot-overlay)
   캐릭터 레이어(#AITalkContainer, z-index 10001) 바로 아래에 깔려
   로딩 중에도 캐릭터 말풍선이 오버레이 위로 보인다.
   ========================================================== */
#ai-boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--page-bg);
  transition: opacity 0.4s ease;
}

#ai-boot-overlay.hide {
  opacity: 0;
  pointer-events: none;
}

.ai-boot-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #d7dce3;
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ai-boot-spin 0.9s linear infinite;
}

.ai-boot-text {
  font-size: 15px;
  font-weight: bold;
  color: #6b7684;
  letter-spacing: 1px;
  animation: ai-boot-pulse 1.4s ease-in-out infinite;
}

/* 말줄임표 점 애니메이션 */
.ai-boot-text::after {
  content: '...';
  display: inline-block;
  width: 1.5em;
  text-align: left;
  animation: ai-boot-dots 1.4s steps(4, end) infinite;
}

@keyframes ai-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ai-boot-pulse {

  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@keyframes ai-boot-dots {
  0% {
    content: '';
  }

  25% {
    content: '.';
  }

  50% {
    content: '..';
  }

  75% {
    content: '...';
  }
}

/* === 변리사 콘텐츠 페이지 공통 (patent-service / patent-procedure / cost / apply) === */

/* 차별화 포인트 카드 그리드 */
.point-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.point-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 18px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.point-card .point-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
}

.point-card h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 16px;
}

.point-card p {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* 절차 단계 리스트 */
.step-list {
  list-style: none;
  margin: 20px 0 0 0 !important;
  padding: 0;
}

.step-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: flex-start;
}

.step-item:last-child {
  border-bottom: none;
}

.step-num {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  font-weight: bold;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-body h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 16px;
}

.step-body p {
  margin: 0 !important;
  font-size: 14px;
  color: #666;
}

.step-period {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 12px;
  font-weight: bold;
}

/* 비용 카드 */
.pricing-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 24px;
}

.pricing-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 20px 20px;
  text-align: center;
  background: white;
  position: relative;
}

.pricing-card--featured {
  border: 2px solid var(--brand);
  background: var(--surface);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 12px;
  border-radius: 12px;
  white-space: nowrap;
}

.pricing-name {
  margin: 0 0 12px;
  font-size: 17px;
  color: var(--ink);
}

.pricing-price {
  font-size: 26px;
  font-weight: bold;
  color: var(--brand);
}

.pricing-sub {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
}

/* 안내 표 */
.info-table {
  width: 100%;
  max-width: 760px;
  border-collapse: collapse;
  margin: 15px auto 0;
  display: table;
  font-size: 14px;
}

.info-table th {
  background: var(--surface);
  color: var(--brand);
  padding: 12px;
  border-bottom: 2px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.info-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
}

/* 신청 폼 */
.apply-form {
  max-width: 900px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  font-size: 14px;
  font-weight: bold;
  color: var(--ink);
}

/* 입력 항목 제목 옆 도움말 아이콘(ⓘ) — 이모지 대신 심플한 유니코드 문자로,
   .ai-msg-link의 점선 밑줄만 살리고 크기는 라벨보다 한 단계 작게 */
.field-help {
  margin-left: 3px;
  font-size: 12px;
  font-weight: 400;
}

.form-row input,
.form-row select,
.form-row textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  background: #fff;
  color: #333;
}

.form-row textarea {
  min-height: 120px;
  resize: vertical;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--brand);
}

.form-submit {
  background: var(--brand);
  color: white;
  border: none;
  font-weight: bold;
  font-size: 15px;
  padding: 14px;
}

.form-submit:hover {
  background: var(--brand-dark);
}

/* 무료상담 폼 — 개인정보 동의 행 */
.apply-agree-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: #555;
  cursor: pointer;
}

.apply-agree-row input {
  margin-top: 2px;
  accent-color: var(--brand);
}

/* 필수 입력 강조 — 상담신청/미팅신청 폼에서 필수값 누락으로 제출이 막힐 때 캐릭터 발화와 함께
   해당 입력 요소 자체(체크박스·인풋·셀렉트·텍스트영역)에 직접 붙는 붉은 링. 영역(행) 전체가 아니라
   문제의 요소 하나만 짚어야 어디를 고쳐야 하는지 바로 보이므로, 감싸는 행이 아니라 요소 자체에
   건다(.highlight-active의 은은한 텍스트 색 점멸만으로는 눈에 잘 띄지 않아 별도로 둔 강한 강조). */
.field-alert {
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--alert-soft);
  animation: field-alert-pulse 0.6s ease-in-out 3;
}

@keyframes field-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--alert-soft); }
  50% { box-shadow: 0 0 0 5px var(--alert); }
}

/* 무료상담 폼 — 전송 상태 문구 */
.apply-status {
  margin: 0;
  font-size: 13px;
  color: #666;
}

.apply-status--err {
  color: var(--alert);
}

/* 문의하기 — 상담 신청 / 미팅 신청 탭 (각 50%) */
.apply-tabs {
  display: flex;
  max-width: 900px;
  margin: 4px auto 0;
  border-bottom: 1px solid var(--line);
}

.apply-tab-btn {
  flex: 1 1 50%;
  padding: 12px 8px;
  text-align: center;
  font-family: var(--font);
  font-size: 15px;
  font-weight: bold;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
  cursor: pointer;
}

.apply-tab-btn:hover {
  color: var(--ink);
}

/* 선택된 탭 — 검은 배경 + 흰 텍스트로 반전해 선택 상태를 명확히 표시 */
.apply-tab-btn.is-active,
.apply-tab-btn.is-active:hover {
  background: var(--brand-dark);
  color: #fff;
  border-bottom-color: var(--brand-dark);
}

/* 미팅 신청 — 좌측 달력 + 우측 신청폼 (모바일은 세로 스택) */
.meeting-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 40px auto 0;
  align-items: start;
}

.meeting-calendar {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}

.meeting-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.meeting-cal-title {
  font-weight: bold;
  font-size: 14px;
  color: var(--ink);
}

.meeting-cal-nav {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.meeting-cal-nav:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
}

.meeting-cal-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.meeting-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.meeting-cal-dow {
  font-size: 12px;
  color: var(--ink-muted);
  padding: 4px 0 8px;
}

.meeting-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.meeting-cal-day:hover:not(:disabled) {
  background: var(--brand-tint);
}

.meeting-cal-day:disabled {
  color: #ccc;
  cursor: default;
}

.meeting-cal-day--empty {
  visibility: hidden;
}

/* 예약이 하나라도 있는 날 — 회색 배경으로 표시(전부 예약되면 :disabled로 선택 자체가 막힘) */
.meeting-cal-day.has-booking {
  background: var(--surface);
}

.meeting-cal-day.has-booking:hover:not(:disabled) {
  background: var(--brand-tint);
}

.meeting-cal-day.is-today {
  box-shadow: inset 0 0 0 1px var(--brand-line);
}

.meeting-cal-day.is-selected {
  background: var(--brand);
  color: #fff;
  font-weight: bold;
}

.meeting-slots {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.meeting-slots-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: bold;
  color: var(--ink);
}

.meeting-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.meeting-slot-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}

.meeting-slot-btn:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
}

.meeting-slot-btn:disabled {
  background: var(--surface);
  color: var(--ink-muted);
  cursor: default;
}

.meeting-slot-btn.is-selected {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* 이미 예약된 시간 — 회색 상자로 사용 불가능한 버튼처럼 보이게(실제로는 본인 확인용으로
   여전히 클릭 가능 — 비밀번호 확인 후 수정/삭제 화면으로 연결된다) */
.meeting-slot-btn.is-booked {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-muted);
}

.meeting-slot-btn.is-booked:hover {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-muted);
}

.meeting-slot-time {
  font-size: 12px;
}

.meeting-slot-badge {
  font-size: 10px;
}

.meeting-form-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}

.meeting-form-empty {
  margin: 0;
  padding: 60px 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-muted);
}

.meeting-form-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-muted);
  white-space: pre-line;
}

.meeting-admin-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--ok-tint);
  color: var(--ok-dark);
  font-size: 11px;
  font-weight: bold;
}

.meeting-existing-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.meeting-existing-actions .form-submit {
  flex: 1 1 auto;
}

.meeting-btn-danger {
  flex: 1 1 auto;
  padding: 14px;
  border: 1px solid var(--alert-soft);
  border-radius: 8px;
  background: #fff;
  color: var(--alert);
  font-family: var(--font);
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
}

.meeting-btn-danger:hover {
  background: var(--alert-tint);
}

@media (max-width: 700px) {
  .meeting-layout {
    grid-template-columns: 1fr;
  }
}

/* 연결 카드 (절차/업무 흐름/연혁) — 대상 사이트처럼 가로 스텝 구성:
   카드 상단 중앙에 번호(연도) 노드 + 노드들을 잇는 가로 라인.
   카드에 .ai-msg-link를 함께 주면 클릭 시 캐릭터 설명이 재생됨 (아래 오버라이드 참조) */
.flow-cards {
  list-style: none;
  max-width: 1000px;
  margin: 34px auto 0 !important;
  padding: 44px 0 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  /* 세로 간격은 노드(카드 밖 위)가 윗줄 카드와 겹치지 않도록 넉넉히, 가로는 14px */
  gap: 52px 14px;
  align-items: stretch;
}

/* 노드(번호)는 카드 밖(위)으로 나오고, 그 중심 높이(y=20px)를 지나는 가로 커넥터가 노드들을 잇는다 */
.flow-cards::before {
  content: '';
  position: absolute;
  left: 40px;
  right: 40px;
  top: 19px;
  height: 2px;
  background: var(--brand-line);
}

.flow-card {
  position: relative;
  margin: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 16px 20px;
  text-align: center;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 기간 배지(.step-period)는 카드 높이가 달라도 항상 카드 맨 아래에 정렬 */
.flow-card .step-period {
  margin-top: auto;
}

/* 본문(p)과 하단 기간 배지 사이 최소 여백 확보 (가로형 절차 카드 — 내용이 길어도 붙지 않게) */
.flow-cards:not(.flow-cards--vertical) .flow-card p {
  margin-bottom: 18px !important;
}

/* 번호(연도) 노드 (data-step 속성 값 표시) — 카드 밖(위) 중앙에 띄워 커넥터 라인 위에 올림 */
.flow-card::before {
  content: attr(data-step);
  position: absolute;
  left: 50%;
  top: -44px;
  transform: translateX(-50%);
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 20px;
  background: var(--brand);
  color: white;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--brand-tint);
  box-sizing: border-box;
  white-space: nowrap;
}

.flow-card h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 16px;
}

.flow-card p {
  margin: 0 !important;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 세로형 로드맵/타임라인 — 좌측 세로 연결선 + 시점 마커(도트) + 좌측 날짜축 + 우측 카드.
   시점(data-step)은 카드 왼쪽 날짜 열에, 각 카드는 연결선의 도트로 이어진다. */
.flow-cards--vertical {
  display: block;
  position: relative;
  max-width: 820px;
  margin: 34px auto 0 !important;
  padding: 0 0 0 88px;
}

/* 세로 연결선 (첫 도트~마지막 도트) */
.flow-cards--vertical::before {
  display: block;
  content: '';
  position: absolute;
  left: 72px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  height: auto;
  right: auto;
  background: var(--brand-line);
}

.flow-cards--vertical .flow-card,
.flow-cards--vertical .flow-card.ai-msg-link {
  align-items: flex-start;
  text-align: left;
  padding: 16px 20px;
  margin: 0 0 16px 0;
}

.flow-cards--vertical .flow-card:last-child {
  margin-bottom: 0;
}

/* 날짜 축 — 카드 왼쪽 고정 열에 연도/시점 표시 (연결선 쪽으로 우측 정렬) */
.flow-cards--vertical .flow-card::before {
  position: absolute;
  left: -88px;
  top: 15px;
  transform: none;
  width: 58px;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--brand);
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
  justify-content: flex-end;
  text-align: right;
}

/* 연결선 위 시점 마커(도트) */
.flow-cards--vertical .flow-card::after {
  content: '';
  position: absolute;
  left: -22px;
  top: 19px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
}

/* 같은 연도 항목을 드롭다운으로 묶는 타임라인 그룹 카드 — 날짜축/도트는 .flow-card 그대로 쓰고
   펼침은 네이티브 <details>에 맡긴다(.faq-list와 동일하게 ::marker만 브랜드 색으로 tint).
   하위 항목(.flow-subitem)은 아래 공용 카드 오버라이드 그룹에 합류해 메인 카드와 같은
   테두리·배경·hover·재생중 효과를 그대로 받는다 — 크기만 한 단계 작은 카드. */
.flow-card--group > details {
  width: 100%;
}

.flow-card--group > details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.flow-card--group > details > summary::marker {
  color: var(--brand);
}

.flow-subitems {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flow-subitem-date {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 2px;
}

/* === .ai-msg-link가 카드에 붙었을 때의 공통 오버라이드 ===
   기본 .ai-msg-link(점선 밑줄 인라인)는 본문 구절용이므로
   블록형 요소에서는 카드 형태를 유지하고 💬 힌트는 h4::after로 표시.
   새 카드형 컴포넌트를 만들면 이 그룹 셀렉터에 추가할 것 */
.flow-card.ai-msg-link,
.point-card.ai-msg-link,
.img-card.ai-msg-link,
.review-card.ai-msg-link,
.flow-subitem.ai-msg-link,
.stat-item.ai-msg-link,
.stage-item.ai-msg-link {
  display: block;
  background: white;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-weight: normal;
  cursor: pointer;
}


/* 카드형 컴포넌트의 display 오버라이드가 UA [hidden] 규칙을 이기지 않도록 —
   카테고리 필터(칩)가 hidden 속성으로 카드를 숨기는 데 필요 */
[hidden] {
  display: none !important;
}

/* .ai-msg-link의 padding:0 4px 복원 — 카드별 기본 패딩.
   위 그룹의 display:block 을 flow-card에 한해 flex 로 되돌려(기간 배지 하단 정렬 유지).
   번호 노드는 카드 밖(위)으로 나오므로 상단 패딩은 크지 않게 둔다 */
.flow-card.ai-msg-link {
  padding: 26px 16px 20px;
  display: flex;
}

.point-card.ai-msg-link {
  padding: 26px 18px;
}

.review-card.ai-msg-link {
  padding: 20px;
  border-radius: 14px;
  text-align: left;
}

.flow-subitem.ai-msg-link {
  padding: 14px 16px;
  text-align: left;
  border-radius: 10px;
}

.stat-item.ai-msg-link {
  padding: 24px 12px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

/* FEATURED 카드는 오버라이드 뒤에도 틴트 배경 유지 */
.review-card--featured.ai-msg-link {
  background: var(--brand-tint);
  border-color: var(--brand-line);
}

.flow-card.ai-msg-link:hover,
.point-card.ai-msg-link:hover,
.img-card.ai-msg-link:hover,
.review-card.ai-msg-link:hover,
.flow-subitem.ai-msg-link:hover,
.stat-item.ai-msg-link:hover,
.stage-item.ai-msg-link:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px var(--brand-shadow);
}

/* 재생 중 강조 — 텍스트 앵커와 같은 브랜드 톤 펄스 (카드 형태 유지) */
.flow-card.ai-msg-link.ai-playing,
.point-card.ai-msg-link.ai-playing,
.img-card.ai-msg-link.ai-playing,
.review-card.ai-msg-link.ai-playing,
.flow-subitem.ai-msg-link.ai-playing,
.stat-item.ai-msg-link.ai-playing,
.stage-item.ai-msg-link.ai-playing {
  background-color: var(--brand-tint) !important;
  color: inherit !important;
  transform: none !important;
  border-color: var(--brand) !important;
  animation: ai-anchor-pulse 1.2s ease-in-out infinite;
}

/* 이미지에 .ai-msg-link를 붙일 때도 동일하게 형태 유지 */
img.ai-msg-link {
  background: none;
  padding: 0;
  border-bottom: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

img.ai-msg-link:hover {
  background: none;
  box-shadow: 0 4px 12px var(--brand-shadow-strong);
}

img.ai-msg-link.ai-playing {
  background: none !important;
  transform: none !important;
  border-color: var(--brand);
  animation: ai-anchor-pulse 1.2s ease-in-out infinite;
}

/* CTA 배너 */
.cta-banner {
  margin-top: 24px;
  padding: 20px;
  border-radius: 12px;
  background: var(--brand-tint);
  text-align: center;
}

.cta-banner p {
  margin: 0 0 12px;
  color: var(--ink);
  font-weight: bold;
  white-space: pre-line;
}

.cta-link {
  display: inline-block;
  background: var(--brand);
  color: white !important;
  padding: 10px 24px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  transition: background 0.2s;
}

.cta-link:hover {
  background: var(--brand-dark);
}

/* ============================================================
   .iq-* 폼 유틸리티 (원래 문의하기 게시판용으로 작성 — 게시판 자체는 제거됨)
   일부 클래스(.iq-hp 허니팟, .iq-status-text 등)는 5_0_contact.html이
   계속 재사용 중이라 이 블록 전체를 지우면 안 됨 — 정말 안 쓰이는 규칙만
   추리려면 asset/pages/*.html 전체에서 각 .iq-* 클래스 사용처를 먼저 확인할 것
   ============================================================ */

/* 허니팟 필드 — 사람 눈에는 보이지 않고 봇만 채우는 스팸 트랩 */
.iq-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 목록 상태 문구 (로딩/빈 목록/오류) */
.iq-status-text {
  color: var(--ink);
  opacity: 0.55;
  font-size: 14px;
  padding: 16px 4px;
}

/* 로컬 모드 안내 */
.iq-notice {
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 12px;
}

/* 목록 테이블 */
.inquiry-table .iq-col-no {
  width: 56px;
  text-align: center;
  color: var(--ink);
  opacity: 0.6;
}

.inquiry-table .iq-col-author {
  width: 110px;
  white-space: nowrap;
}

.inquiry-table .iq-col-date {
  width: 140px;
  white-space: nowrap;
  font-size: 13px;
}

.iq-title-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.iq-title-btn:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

/* 답변완료 배지 (파란 버블) — 클릭 시 캐릭터가 요약 낭독 (요약 없으면 안내 멘트) */
.iq-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: none;
  border-radius: 10px;
  background: var(--brand);
  color: var(--paper);
  font-family: var(--font);
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
}

.iq-badge-play {
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.iq-badge-play:hover {
  background: var(--brand-dark);
  transform: scale(1.08);
}

/* 목록 하단 툴바 (작성하기 버튼 — 가운데 정렬) */
.iq-toolbar {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.iq-write-btn {
  padding: 12px 22px;
}

/* 페이저 */
.iq-pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.iq-page-btn {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.iq-page-btn:hover:not(:disabled):not(.active) {
  background: var(--brand-tint);
  border-color: var(--brand-line);
}

.iq-page-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--paper);
  font-weight: bold;
  cursor: default;
}

.iq-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 인라인 뷰 헤더 (← 목록으로 + 뷰 제목) */
.iq-view-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.iq-back-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.iq-back-btn:hover {
  background: var(--brand-tint);
  border-color: var(--brand-line);
}

.iq-view-title {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}

/* 상세 뷰 */
.iq-detail-head h3 {
  margin: 0 0 4px;
  color: var(--ink);
}

.iq-detail-meta {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.6;
}

.iq-detail-content {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
}

/* 답변 박스 */
.iq-answer-box {
  margin-top: 14px;
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
}

.iq-answer-box .iq-detail-content {
  background: var(--paper);
}

.iq-answer-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: bold;
  color: var(--brand-dark);
}

/* 답변 요약 박스 — 답변 박스와 동일 구조, 녹색 계열 */
.iq-summary-box {
  border-left-color: var(--ok);
  background: var(--ok-tint);
}

.iq-summary-box .iq-answer-label {
  color: var(--ok-dark);
}

/* 보기 ↔ 편집 전환형 박스 (관리자 답변/요약) */
.iq-box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.iq-box-head .iq-answer-label {
  margin: 0;
}

.iq-box-edit-btn {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.iq-box-edit-btn:hover {
  background: var(--brand-tint);
  border-color: var(--brand-line);
}

.iq-box-empty {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.55;
  line-height: 1.5;
}

.iq-box-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 90px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
}

.iq-box-textarea:focus {
  outline: none;
  border-color: var(--brand);
}

.iq-box-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.iq-box-actions .form-submit {
  padding: 8px 16px;
  font-size: 13px;
}

.iq-hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink);
  opacity: 0.55;
  line-height: 1.5;
}

.iq-error {
  margin: 0;
  font-size: 13px;
  color: var(--alert-soft);
  font-weight: bold;
}

.iq-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.iq-detail-actions .form-submit {
  flex: 1;
}

/* 보조 버튼 (취소 등) */
.iq-secondary-btn {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}

.iq-secondary-btn:hover {
  background: var(--brand-tint);
}

/* 위험 버튼 (삭제) + 인라인 확인 무장 상태 */
.iq-danger-btn {
  background: var(--alert-soft);
}

.iq-danger-btn:hover,
.iq-danger-btn.iq-armed {
  background: var(--alert);
}

.iq-pw-form {
  max-width: 420px;
}

/* ==========================================================
   pro-landing 템플릿 섹션 (docs/DESIGN_TEMPLATE.md §4)
   ========================================================== */

/* HERO — 좌 슬로건/스탯 + 우 간편 상담 카드. 배경 없는 라이트 콘텐츠 블록.
   (2026-07 개편: 메인 앱은 페이지 이동형 SPA가 아니라 AI가 섹션을 골라 스트림에
   이어 붙이는 방식이라, 이 섹션도 스트림 중간에 카드처럼 등장한다 — 예전처럼
   풀블리드 네이비 배너로 만들면 스트림 흐름을 끊는 이질적인 "판"이 되어 버린다.
   그래서 배경·풀블리드를 없애고 다른 .intro-section과 같은 톤의 라이트 콘텐츠로 둔다.
   색상은 전부 theme.css 변수라 향후 다크모드 토글([data-theme="dark"])에도 자동 대응한다.) */
.intro-section.hero-section {
  /* 과거의 풀블리드 오버라이드(-112px 네거티브 마진 등)를 제거해 일반 .intro-section과
     동일하게 동작한다 — 이 클래스는 이제 사실상 마커용(콘텐츠 조각의 첫 섹션 표시)이다. */
}

.hero-band {
  padding: 4px 0 0;
}

.hero-inner {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-topline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.hero-topline h1 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand-dark);
  background: var(--brand-tint);
  border-radius: 14px;
  padding: 4px 12px;
}

.hero-band .hero-title {
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.35;
  color: var(--ink);
  /* h1로 승격되며 .intro-section h1의 중앙 정렬을 물려받으므로 좌측 고정 */
  text-align: left;
}

.hero-band .hero-sub {
  margin: 0 0 24px;
  max-width: 580px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* PAGE-HEAD — 서브페이지 상단 도입부 (브레드크럼 + 영문 아이브로 + 제목 + 설명).
   HERO와 동일한 이유로 배경 없는 라이트 콘텐츠로 둔다 (2026-07 개편). */
.page-head {
  padding: 4px 0 0;
}

.page-head-inner {
  max-width: 1060px;
  margin: 0 auto;
}

.page-crumb {
  font-size: 12px;
  color: var(--ink-muted);
}

.page-crumb a {
  color: var(--ink-muted);
  text-decoration: none;
}

.page-crumb a:hover {
  color: var(--brand);
}

.page-eyebrow {
  display: block;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand);
}

.page-head h1 {
  margin: 10px 0 12px;
  font-size: 34px;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
}

.page-head .page-desc {
  margin: 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* PAGE-HEAD 가운데 정렬 변형 — 브레드크럼 없이 아이브로/제목/설명만 중앙에 배치 (문의하기 등) */
.page-head--center .page-head-inner {
  text-align: center;
}

.page-head--center .page-eyebrow {
  margin-top: 0;
}

.page-head--center h1 {
  text-align: center;
}

.page-head--center .page-desc {
  margin-left: auto;
  margin-right: auto;
}

/* 섹션 영문 아이브로 라벨 (h3 위) */
.sec-eyebrow {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand);
  margin-bottom: 8px;
}

/* 섹션 내부 하위 그룹 라벨 — h3 아래 별도 카드 그룹에 붙이는 부제(예: 회사개요 안 '회사현황') */
.section-subhead {
  margin: 36px 0 14px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

/* 옅은 밴드 배경(교차 배경) 제거 — 스트리밍 스트림에서 미세한 회색 배경이 산만하다는 피드백.
   과거의 풀블리드 오버라이드(네거티브 마진 등)도 함께 제거해 일반 .intro-section과
   동일하게 동작한다 — 이 클래스는 이제 사실상 마커용이다. */
.intro-section.band {
}

.intro-section.band > * {
}

/* 카테고리 필터 칩 (사례소개 등 — index.js 위임 클릭이 data-cat 카드를 필터) */
.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}

.chip {
  border: 1px solid var(--line);
  background: white;
  border-radius: 18px;
  padding: 7px 16px;
  font-size: 13px;
  color: #556;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.chip--on {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}

/* 대표(FEATURED) 사례 카드 — 그리드 전체 폭 */
.review-card--featured {
  grid-column: 1 / -1;
  border-color: var(--brand-line);
  background: var(--brand-tint);
}

.featured-badge {
  display: inline-block;
  background: var(--brand);
  color: white;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  border-radius: 12px;
  padding: 3px 12px;
  margin-right: 8px;
}

/* 업무분야 카드 → 서브페이지 링크 카드 */
a.point-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

a.point-card--link:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 10px 24px var(--brand-shadow);
}

.point-card .point-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
}

/* 히어로 하단 미니 스탯 */
.hero-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.hero-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
}

.hero-stat-label {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* 히어로 우측 간편 상담 카드 — 배경 있는 콘텐츠(HERO)가 아니므로 카드 자체가
   다른 카드 컴포넌트(.point-card 등)와 같은 톤의 은은한 그림자로 존재감을 낸다 */
.hero-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.hero-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--ink);
}

.hero-card .hero-card-desc {
  margin: 0 0 14px;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

.hero-card ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.hero-card ul li {
  padding: 6px 0;
  font-size: 13px;
  color: #444;
  border-bottom: 1px dashed var(--line);
}

.hero-card ul li:last-child {
  border-bottom: none;
}

.hero-card .cta-link {
  display: block;
  text-align: center;
  background: var(--brand);
  color: white !important;
}

.hero-card .cta-link:hover {
  background: var(--brand-dark);
}

/* STATS — 신뢰 숫자 나열 */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.stat-item {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 12px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.stat-value {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--brand);
}

.stat-label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}

/* REVIEWS — 고객후기 카드 */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.review-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.review-card h4 {
  margin: 6px 0 8px;
  font-size: 15px;
  color: var(--ink);
}

.review-quote {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

.review-meta {
  margin-top: 12px;
  font-size: 12px;
  color: #888;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* 고객후기 관리자 승인(moderation) — 승인 대기 카드 + 관리자 컨트롤 */
.review-card--pending {
  border: 1px dashed var(--ok-dark);
  background: var(--ok-tint);
}

.review-badge-pending {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ok-dark);
  background: var(--paper);
  border: 1px solid var(--ok-dark);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 8px;
}

.review-admin {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.review-admin-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--ok);
  background: var(--ok);
  color: var(--paper);
}

.review-admin-btn.danger {
  border-color: var(--alert-soft);
  background: var(--paper);
  color: var(--alert);
}

/* FAQ — 접이식 Q&A (<details> 기반) */
.faq-list {
  max-width: 760px;
  margin: 20px auto 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list details:last-child {
  border-bottom: none;
}

.faq-list summary {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.faq-list summary::marker {
  color: var(--brand);
}

.faq-list details[open] summary {
  background: var(--brand-tint);
}

.faq-list .faq-a {
  margin: 0;
  padding: 12px 18px 16px;
  font-size: 14px;
  color: #555;
  line-height: 1.7;
}

/* 안심 문구 나열 (CTA 배너 하단 등) */
.assure-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 13px;
  color: #666;
}

/* 셸 푸터 (#ai-site-footer — index.html 템플릿을 Router가 아울렛 끝에 부착)
   대상 레이아웃: 다크 네이비 풀블리드 + 3단 컬럼(브랜드/사이트맵/고객지원) + 하단 바 */
#ai-site-footer {
  margin: 80px -20px -40px;
  /* 아울렛 좌우·하단 패딩 상쇄 → 풀블리드로 페이지 끝까지 */
  background: var(--footer-bg);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

#ai-site-footer .footer-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 44px 24px 28px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 30px;
}

#ai-site-footer .footer-brand {
  font-size: 17px;
  font-weight: 800;
  color: white;
}

#ai-site-footer .footer-brand-en {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}

#ai-site-footer .footer-slogan {
  margin: 12px 0 0;
  line-height: 1.6;
}

#ai-site-footer .footer-tel {
  display: inline-block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  color: white;
  text-decoration: none;
}

#ai-site-footer .footer-col h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: white;
}

#ai-site-footer .footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#ai-site-footer .footer-col ul li {
  margin: 0 0 8px;
}

#ai-site-footer .footer-col ul a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.15s;
}

#ai-site-footer .footer-col ul a:hover {
  color: white;
}

#ai-site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 1060px;
  margin: 0 auto;
  padding: 16px 24px 20px;
  display: flex;
  flex-direction: column;
  /* 세로 스택 좌측 정렬 — 우측 하단 캐릭터에 가리지 않도록 */
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================
   반응형 (모바일 / 태블릿)
   ----------------------------------------------------------
   브레이크포인트: 768px(모바일·태블릿 세로) / 480px(소형폰)

   ※ 캐릭터·말풍선 크기는 AITalk.js가 인라인 px로 지정하므로
     (config.width / bubbleWidth — 설정 모달에서 변경 가능)
     모바일에서는 !important로 눌러 "고정 레이아웃"으로 만든다.
     PC 설정값을 바꿔도 모바일 표시는 영향받지 않는다.
   ========================================================== */

@media (max-width: 768px) {

  /* 캐릭터 표시 크기 — :root에 두어야 콘텐츠(.sample-controls)에서도 참조 가능
     (#AITalkContainer에 선언하면 형제인 아울렛으로 상속되지 않는다) */
  :root {
    --m-char-size: min(24vh, 190px);
  }

  /* --- 셸: 주소창 때문에 100vh가 화면보다 커지는 문제 --- */
  #MainContainer {
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
  }

  /* --- 콘텐츠 아울렛 --- */
  .sample-controls {
    /* 상단: 1단 헤더 바(브랜드 + 햄버거, 실측 ~58px) + 여백
       하단: 캐릭터가 마지막 콘텐츠를 영구히 가리지 않도록 */
    padding: 76px 14px calc(var(--m-char-size) + 40px);
  }

  /* flex/grid 자식의 기본 min-width:auto 로 인한 밀림 방지 */
  .sample-controls * {
    min-width: 0;
  }

  .sample-controls p,
  .sample-controls li,
  .sample-controls td {
    overflow-wrap: anywhere;
  }

  /* --- 셸 헤더: 1단 (브랜드 + 우상단 햄버거) + 열림 시 드롭다운 GnB --- */
  #ai-site-header {
    height: auto;
    flex-wrap: wrap;
    gap: 0;
    padding: 9px 14px;
  }

  #ai-nav-toggle {
    display: flex;
    order: 1;
    margin-left: auto;
  }

  /* --- 페이지 네비게이션: 드롭다운 세로 목록 (닫힘 = 숨김) --- */
  #ai-page-nav {
    display: none;
    order: 2;
    flex: 1 0 100%;
    flex-direction: column;
    gap: 0;
    margin: 9px -14px 0;
    padding: 4px 14px 0;
    border-top: 1px solid var(--line);
    overflow: visible;
  }

  #ai-site-header.menu-open #ai-page-nav {
    display: flex;
  }

  /* 열림 시 헤더 아래 페이지를 딤 처리 — GnB에 시선 집중.
     스크림(#ai-nav-scrim)은 index.js가 열림 시 body 자식으로 런타임 생성.
     (헤더 자식으로 두면 헤더의 backdrop-filter가 fixed 기준 블록이 되어
     뷰포트를 못 덮는다) z-index는 콘텐츠 위·헤더(9000) 아래.
     실제 요소라 클릭이 아래 콘텐츠로 관통하지 않는다 (클릭 = 닫기) */
  #ai-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 8990;
    background: var(--scrim);
  }

  #ai-page-nav a {
    padding: 13px 4px;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
    line-height: 1.3;
    text-align: center;
  }

  #ai-page-nav a:last-child {
    border-bottom-color: transparent;
  }

  #ai-page-nav a.active {
    border-bottom-color: var(--line);
  }

  #ai-page-nav a.active:last-child {
    border-bottom-color: transparent;
  }

  /* --- CTA: 모바일에서는 미표시 (네비의 무료상담 메뉴로 대체) --- */
  .site-header-cta {
    display: none;
  }

  .page-head h1 {
    font-size: 26px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .hero-band .hero-title {
    font-size: 26px;
  }

  #ai-site-footer {
    /* 하단: 캐릭터 여백 패딩을 상쇄해 페이지 끝까지 확장하되,
       푸터 내부 패딩으로 캐릭터에 가리지 않는 공간을 되살린다 */
    margin: 60px -14px calc(-1 * (var(--m-char-size) + 40px));
    padding-bottom: calc(var(--m-char-size) + 20px);
  }

  #ai-site-footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 18px 20px;
  }

  /* --- 캐릭터: 중앙 고정 + 축소 --- */
  /* 정렬(left/center/right) 설정과 무관하게 항상 중앙 */
  .AITalk_group,
  .AITalk_group.left,
  .AITalk_group.center,
  .AITalk_group.right {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .AITalk_character,
  .AITalk_floating {
    width: var(--m-char-size) !important;
  }

  .AITalk_character {
    height: var(--m-char-size) !important;
  }

  /* --- 말풍선: bubblePosition 설정과 무관하게 항상 캐릭터 위 --- */
  .AITalk_speech-bubble,
  .AITalk_bubble_top,
  .AITalk_bubble_bottom,
  .AITalk_bubble_left,
  .AITalk_bubble_right {
    /* width:auto 로 두면 안 된다 — 말풍선의 컨테이닝 블록은 좁아진
       .AITalk_floating(=캐릭터 폭)이라, left:50% 기준 shrink-to-fit
       가용폭이 ~77px로 줄어 텍스트가 세로로 쪼개진다.
       max-content 로 내용 기준 폭을 잡고 뷰포트로 클램프한다. */
    width: max-content !important;
    min-width: 0;
    max-width: calc(100vw - 28px);
    left: 50% !important;
    right: auto !important;
    bottom: 100% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 0 14px 0 !important;
    padding: 12px 16px;
    font-size: 0.92rem;
    border-radius: 14px;
  }

  /* 꼬리도 항상 아래쪽 중앙 (위치 변형 클래스별 꼬리 무효화) */
  .AITalk_bubble_top::after,
  .AITalk_bubble_bottom::after,
  .AITalk_bubble_left::after,
  .AITalk_bubble_right::after {
    top: auto;
    right: auto;
    bottom: -8px;
    left: 50%;
    margin: 0 0 0 -7px;
    border: 0;
    border-right: 1px solid var(--brand-line);
    border-bottom: 1px solid var(--brand-line);
  }

  .AITalk_attention {
    padding: 8px 14px;
    font-size: 0.76rem;
    margin-bottom: 10px;
  }

  /* 모바일은 말풍선 바로 아래가 캐릭터 얼굴이므로 중지 버튼을 말풍선 위로 올린다 */
  .ai-playback-stop-btn {
    bottom: auto;
    top: -42px;
    font-size: 0.75rem;
    padding: 5px 14px;
  }

  /* --- 문의 게시판 목록: 4열 테이블 → 카드형 목록 ---
     PC의 고정 폭(번호 56 + 작성자 110 + 작성일 140 = 306px)이 모바일 폭보다 넓어
     가장 중요한 제목 열이 58px까지 눌리고 한글이 글자당 한 줄로 쪼개졌다.
     모바일에서는 행을 카드로 바꿔 제목 + 답변완료 배지를 주인공으로 올리고,
     번호·작성자·작성일은 아래 메타 한 줄로 내린다. */
  .inquiry-table,
  .inquiry-table tbody,
  .inquiry-table tr,
  .inquiry-table td {
    display: block;
    width: auto;
  }

  .inquiry-table thead {
    display: none;
    /* 카드에는 열 머리글이 필요 없다 */
  }

  .inquiry-table {
    margin-top: 8px;
  }

  .inquiry-table tr {
    padding: 14px 2px;
    border-bottom: 1px solid var(--line);
  }

  .inquiry-table td {
    padding: 0;
    border: none;
  }

  /* 제목 = 카드의 주인공 (전체 폭 + 본문보다 큰 글자) */
  .inquiry-table .iq-col-title {
    margin-bottom: 6px;
  }

  .inquiry-table .iq-title-btn {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* 답변완료 배지 — 제목 아래 줄에서 확실히 보이도록 */
  .inquiry-table .iq-col-title .iq-badge {
    margin: 8px 0 0;
    padding: 4px 12px;
    font-size: 12px;
  }

  /* 번호·작성자·작성일 = 보조 정보 한 줄 */
  .inquiry-table .iq-col-no,
  .inquiry-table .iq-col-author,
  .inquiry-table .iq-col-date {
    display: inline;
    width: auto;
    font-size: 12px;
    color: var(--ink);
    opacity: 0.55;
    text-align: left;
  }

  .inquiry-table .iq-col-author::before,
  .inquiry-table .iq-col-date::before {
    content: '·';
    margin: 0 6px;
  }

  /* 카드형에서는 가로 스크롤이 필요 없다 (래퍼는 테이블의 부모) */
  .table-responsive:has(.inquiry-table) {
    overflow-x: visible;
  }

  /* 작성하기 버튼 — 전체 폭으로 터치 타겟 확보 */
  .iq-write-btn {
    width: 100%;
  }

  .iq-toolbar {
    margin-top: 18px;
  }
}

@media (max-width: 480px) {

  :root {
    --m-char-size: min(22vh, 155px);
  }

  .sample-controls {
    padding-left: 12px;
    padding-right: 12px;
  }

  #ai-site-footer {
    margin-left: -12px;
    margin-right: -12px;
  }
}

/* === NCLAW 이미지 카드 (img-card) ===
   이모지 아이콘 대신 이미지가 보이는 콘텐츠 카드.
   - .img-card-grid  : 가로 그리드형 — 카드 4장 이하일 때 사용 (권장 이미지 800×450, 16:9)
   - .img-card-stack : 세로 리스트형 — 카드 5장 이상일 때 사용, 이미지 좌측 (권장 이미지 460×345, 4:3)
   이미지 파일: asset/images/*.jpg(사진)·*.svg(아이콘형) — 카드마다 서로 다른 파일 사용 */
.img-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

/* 반응형 열 규칙(2026-08 재정의): PC 최대 4열 / 태블릿 최대 3열(카드 4장 이상이면 2열로 묶어서
   표시) / 모바일 1열. PC는 위 auto-fit(minmax 210px)이 .intro-section 폭(1000px) 안에서
   이미 4열이 최대이므로 그대로 둔다. 태블릿은 auto-fit만으로는 "카드 개수가 4장 이상일 때만
   2열"을 표현할 수 없어(auto-fit은 폭만 보고 개수는 모름 — 그대로 두면 4장일 때 3+1로 어색하게
   쪼개짐) :has()로 4번째 카드 존재 여부를 감지해 강제로 2열로 덮어쓴다. --fixed3/--fixed4/
   --single 수정자가 붙은 그리드는 페이지별로 열 수를 의도적으로 고정한 예외이므로
   :not()으로 제외해 이 재정의의 영향을 받지 않게 한다(§ 위 --fixed3/--fixed4/--single 주석 참고).
   태블릿 구간은 모바일과 겹치지 않도록 min-width:701px로 하한을 둔다 — max-width:1024px만
   쓰면 700px 이하에서도 이 블록이 함께 활성화되어 :has() 규칙의 특이도가 아래 모바일 1열
   규칙보다 높아지는 바람에 모바일에서 카드 4장이 2열로 잘못 나오는 문제가 있었다(실제로 겪은
   버그). */
@media (min-width: 701px) and (max-width: 1024px) {
  .img-card-grid:not(.img-card-grid--fixed3):not(.img-card-grid--fixed4):not(.img-card-grid--single) {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .img-card-grid:not(.img-card-grid--fixed3):not(.img-card-grid--fixed4):not(.img-card-grid--single):has(.img-card:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .img-card-grid:not(.img-card-grid--fixed3):not(.img-card-grid--fixed4):not(.img-card-grid--single) {
    grid-template-columns: 1fr;
  }
}

/* 카드 6장을 화면설계서(NC-H-0001)의 3×2 고정 그리드로 안내해야 하는 예외 케이스 전용
   (예: 1_2_brochure의 제품·서비스별 소개자료). 기본 auto-fit은 컨테이너 폭에 따라 3~4열을
   오가므로, 열 수를 디자인대로 고정해야 할 때만 이 수정자를 함께 붙인다. 700px 미만에서는
   .img-card-stack과 동일한 기준으로 1열로 접는다. */
.img-card-grid--fixed3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 700px) {
  .img-card-grid--fixed3 {
    grid-template-columns: 1fr;
  }
}

/* 카드 4장을 1×4(한 줄 4열) 고정 그리드로 안내해야 하는 경우 전용(예: 3_1_concierge의 특장점).
   기본 auto-fit도 폭이 넉넉하면 결국 4열로 떨어지지만, 컨테이너 폭에 따라 3~4열을 오갈 수 있어
   반응형 경계가 애매한 폭에서는 열 수를 디자인대로 고정해야 할 때 이 수정자를 쓴다. 700px 미만에서는
   다른 fixed 수정자와 동일하게 1열로 접는다. */
.img-card-grid--fixed4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 700px) {
  .img-card-grid--fixed4 {
    grid-template-columns: 1fr;
  }
}

/* 카드가 1장뿐인 경우 전용(예: 3_1_2_kiosk의 제공 타입 — 유형이 하나뿐인 제품).
   기본 auto-fit(minmax(210px,1fr))은 카드가 1장이면 남는 트랙을 접어 그 1fr 트랙이 섹션 폭
   전체(약 1000px)까지 늘어나 버려, 16:9 이미지가 거대한 배너처럼 보인다(실제로 겪은 문제).
   이 수정자는 열 폭 자체를 리스트 카드 권장폭(§8-1, 460px)으로 캡해 일반 카드 크기를 유지하고
   `justify-content: center`로 섹션 안에서 가운데 배치한다. */
.img-card-grid--single {
  grid-template-columns: minmax(210px, 460px);
  justify-content: center;
}

/* 회사소개서 소개자료 카드(화면설계서 NC-H-0001) — 제목·설명·이미지는 카드 안에 함께 두고
   (캐릭터 클릭 이벤트는 .img-card 전체에 부착), 다운로드/이동 버튼 2개는 카드 밖에 전체 폭
   스택으로 배치한다. 카드 텍스트는 일반 .img-card-body보다 한 단계 더 강조. */
.brochure-feature {
  display: flex;
  flex-direction: column;
}

/* 카드 높이가 카드마다 달라지는 원인은 설명 문구가 1줄/2줄로 다르게 줄바꿈되는 것 —
   이미지는 aspect-ratio(16:9)로 이미 고정폭 기준 고정 높이라 흔들리지 않는다(원본 이미지의
   실제 픽셀 크기가 서로 달라도 object-fit:cover가 항상 이 비율대로 잘라 채우므로 안전).
   그래서 본문 쪽만 항상 2줄 분량의 최소 높이를 확보해 두면 카드 전체 높이가 저절로
   동일해진다 — flex-grow로 이미지를 늘리는 방식(2026-08 시도)은 그리드 행의 자동 높이
   계산에 이미지가 기여하지 않게 되어 오히려 이미지가 통째로 사라지는 회귀가 있었다. */
.brochure-feature-card {
  flex: 0 0 auto;
}

.brochure-feature-card .img-card-body h4 {
  font-size: 21px;
  font-weight: 700;
}

.brochure-feature-card .img-card-body p {
  font-size: 14px;
  opacity: 0.7;
  min-height: calc(1.8em * 2);
}

.brochure-feature-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-start;
}

.brochure-feature-actions .ai-btn,
.brochure-feature-actions .cta-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.img-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  text-align: left;
}

.img-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--brand-tint-strong);
}

.img-card-body {
  padding: 16px 18px 18px;
}

.img-card-body h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 16px;
}

.img-card-body p {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.65;
  line-height: 1.55;
}

/* 보조 메타 (뉴스 날짜·출처, 제품 배지 등) */
.img-card-meta {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--anchor-text);
}

/* 세로 리스트형 — 이미지 좌측 + 본문 우측 */
.img-card-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 20px;
}

.img-card-stack .img-card {
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: stretch;
}

/* 과거엔 데스크톱(height:100%로 행 높이에 맞춤, 텍스트 길이마다 비율이
   달라짐)과 모바일(16:9 고정)의 비율이 서로 달라 반응형 구간마다 다르게
   보였다 — 4:3으로 고정해 모든 화면 폭에서 동일한 비율로 렌더링되게 한다
   (모바일 전용값은 아래 700px 미디어쿼리, 권장 원본: CONTENT_PAGE_GUIDE.md §8-1). */
.img-card-stack .img-card-media {
  aspect-ratio: 4 / 3;
}

.img-card-stack .img-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 서브페이지 링크 카드 (a 태그) */
a.img-card--link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

a.img-card--link:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 10px 24px var(--brand-shadow);
}

.img-card .point-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
}

/* 카드 + 카드 바깥 "바로가기" 버튼 조합 — 인증/수상 갤러리(.award-card-unit)처럼 버튼을 카드
   박스(테두리·그림자) 안쪽 패딩이 아니라 카드 바깥의 형제 요소로 둔다. .award-card-unit과 달리
   호버해야만 나타나는 방식은 아니고 항상 노출한다(터치 기기에서도 항상 눌러야 하므로). 카드 자체
   클릭은 .ai-msg-link의 캐릭터 대사를, 버튼 클릭은 실제 페이지 이동(질문 치환)을 맡아 서로 다른
   동작을 하므로 클릭 대상이 겹치지 않게 카드 밖에 둔 것도 같은 이유(§ CONTENT_PAGE_GUIDE.md). */
.img-card-unit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.img-card-unit > .button-group {
  margin-top: 0;
}

/* 카드 밖 "바로가기" 버튼 — 인증서 갤러리(.award-card-btn)와 동일한 시각 스타일(카드와 같은
   가로폭, 검정 배경/흰 텍스트, 호버 시 반전)을 쓰되, 그쪽처럼 호버해야만 나타나는 방식이 아니라
   항상 노출된다(§ CONTENT_PAGE_GUIDE.md §7-1). */
.img-card-unit > .button-group {
  display: block;
}

.img-card-unit > .button-group .ai-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  transform: none;
}

.img-card-unit > .button-group .ai-btn:hover {
  background: var(--paper);
  color: var(--ink);
  transform: none;
}

/* .ai-msg-link 부착 시 카드 패딩 오버라이드 (미디어가 카드에 밀착되도록) */
.img-card.ai-msg-link {
  padding: 0;
}

/* 세로 리스트형은 ai-msg-link의 display:block 오버라이드보다 그리드 유지 */
.img-card-stack .img-card.ai-msg-link {
  display: grid;
}

@media (max-width: 700px) {
  .img-card-stack .img-card,
  .img-card-stack .img-card.ai-msg-link {
    grid-template-columns: 1fr;
  }
}

/* === 인증/수상 갤러리 (1_5_awards) — 세로형 포스터 카드, .carousel-item 안에서 사용.
   평상시엔 이미지만 보이고(테두리 없음), 유닛(.award-card-unit)에 호버·포커스 시에만 위쪽 제목·
   아래쪽 "자세히보기"가 나타나며 이미지가 확대된다. 제목·버튼은 카드 바깥의 별개 형제 요소라
   두 클릭 대상(이미지/버튼)이 서로 겹치지 않아 이벤트 충돌 여지가 없다:
   - .award-card(이미지) 클릭 → search.js가 캐릭터 대사(data-script) 재생
   - .award-card-btn("자세히보기") 클릭 → .ai-msg-modal-overlay 재사용해 이미지+상세 설명 모달 */
.award-card-unit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  height: 100%;
}

.award-card-title-ext {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.2s;
}

/* 호버 반응 트리거는 :focus-within이 아니라 :has(:focus-visible)를 쓴다 — :focus-within은
   마우스 클릭으로 버튼에 포커스가 잡혀도(캐릭터 대사 재생 클릭 등) 계속 참이 되어, 마우스가
   벗어나도 다른 곳을 클릭하기 전까지 확대·노출 상태가 "고정"되는 버그가 있었다. :focus-visible은
   키보드 포커스에만 반응하므로 마우스 클릭 후에는 자동으로 꺼지고, Tab 키 접근성은 그대로 유지된다. */
.award-card-unit:hover .award-card-title-ext,
.award-card-unit:has(:focus-visible) .award-card-title-ext {
  opacity: 1;
}

.award-card {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: var(--brand-tint-strong);
  padding: 0;
  cursor: pointer;
}

.award-card-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.award-card-unit:hover .award-card-media,
.award-card-unit:has(:focus-visible) .award-card-media {
  transform: scale(1.08);
}

/* 카드 아래 "자세히보기" — 이미지와 같은 폭, 기본 검정 배경 · 호버 시 흰 배경으로 반전 */
.award-card-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.15s, color 0.15s;
}

.award-card-unit:hover .award-card-btn,
.award-card-unit:has(:focus-visible) .award-card-btn {
  opacity: 1;
}

.award-card-btn:hover {
  background: var(--paper);
  color: var(--ink);
}

.award-card-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* 연도별 네비게이션 — 카드가 10개 이상으로 늘어난 캐러셀에서 원하는 시기로 바로 스크롤 이동하는
   보조 이동 UI (search.js의 문서 위임 클릭이 해당 연도 첫 카드로 스크롤 + active 토글 처리) */
.award-year-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 22px;
}

.award-year-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.award-year-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.award-year-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--paper);
}

/* 인증/수상 캐러셀은 세로형 카드에 맞춰 아이템 폭을 기본 캐러셀보다 좁게 */
.carousel--awards .carousel-item {
  flex: 0 0 200px;
}

/* 인증서/특허증 확대보기 모달 — 오버레이는 .ai-msg-modal-overlay(관리자 패널 등과 공유하는 셸)를
   재사용하되, 이 모달만 어두운 회색 대신 흰 배경 딤(dim)을 쓰도록 search.js가 추가하는
   .cert-modal-overlay 클래스로 범위를 좁혀 오버라이드한다(다른 모달 배경엔 영향 없음).
   .ai-msg-modal-overlay.cert-modal-overlay로 두 클래스를 함께 걸어 특이도를 올린 것 —
   interaction.css가 style.css보다 나중에 로드되어 단일 클래스 선택자로는 특이도가 같아도
   후순위인 interaction.css 쪽이 이겨버리기 때문(로드 순서에 의존하지 않도록 명시적으로 방지). */
.ai-msg-modal-overlay.cert-modal-overlay {
  background: var(--paper);
}

/* 인증서/특허증 확대보기 모달 박스 (search.js가 런타임 생성) */
.cert-modal-box {
  background: var(--paper);
  border-radius: 14px;
  padding: 16px;
  width: 720px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.25s ease-out;
}

.cert-modal-box img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 8px;
  background: var(--paper);
}

/* 제목 자리에 취득/등록일(YYYY.MM)을 먼저 보여주고, 그 아래 제목·설명을 가운데 정렬로 배치 */
.cert-modal-caption {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 0 30px;
}

.cert-modal-date {
  align-self: flex-start;
  text-align: left;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.02em;
}

.cert-modal-caption h4 {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}

.cert-modal-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.7;
  line-height: 1.5;
}

.cert-modal-close {
  position: absolute;
  top: -6px;
  right: -6px;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: #888;
  padding: 2px 6px;
}

.cert-modal-close:hover {
  color: var(--ink);
}

/* === 협력사/도입사례 로고 갤러리 (1_6_partners) — 가로형 로고 카드, .carousel-item 안에서 사용.
   인증/수상 갤러리(.award-card)와 동일한 상호작용 패턴(호버 시 제목·"자세히보기" 노출)이지만
   세로 포스터가 아닌 가로 로고 톤(32:11 비율, object-fit:contain)이라 별도 클래스로 둔다.
   - .biz-card(로고 이미지) 클릭 → search.js가 캐릭터 대사(data-script) 재생
   - .biz-card-btn("자세히보기") 클릭 → .biz-modal-overlay로 설명 + (URL 있으면) 홈페이지 바로가기 */
.biz-card-unit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  height: 100%;
}

.biz-card-title-ext {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.2s;
}

.biz-card-unit:hover .biz-card-title-ext,
.biz-card-unit:has(:focus-visible) .biz-card-title-ext {
  opacity: 1;
}

.biz-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 32 / 11;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s;
}

.biz-card-unit:hover .biz-card,
.biz-card-unit:has(:focus-visible) .biz-card {
  border-color: var(--brand);
}

.biz-card-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.biz-card-unit:hover .biz-card-media,
.biz-card-unit:has(:focus-visible) .biz-card-media {
  transform: scale(1.05);
}

.biz-card-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.15s, color 0.15s;
}

.biz-card-unit:hover .biz-card-btn,
.biz-card-unit:has(:focus-visible) .biz-card-btn {
  opacity: 1;
}

.biz-card-btn:hover {
  background: var(--paper);
  color: var(--ink);
}

.biz-card-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* 주요 협력사 캐러셀(640x220 권장 로고) — 뷰포트에 3장 정도 노출되도록 넓은 카드 폭
   (아울렛 최대폭 988px 기준 300px*3+gap(16px*2)=932px로 3장 + 다음 카드 일부가 보임) */
.carousel--partners .carousel-item {
  flex: 0 0 300px;
}

/* 도입사례 캐러셀(320x110 권장 로고) — 좁은 카드 폭 */
.carousel--cases .carousel-item {
  flex: 0 0 170px;
}

/* 협력사/도입사례 상세 모달 — cert-modal과 완전히 동일한 구성 순서
   (좌측 정렬 날짜줄→제목→내용→이미지)를 따른다. .biz-modal-date는 협력사는 "협력 시작",
   도입사례는 "도입" 시기를 좌측 정렬로 보여준다(.cert-modal-date와 동일 스타일).
   .biz-modal-link는 .biz-modal-caption이 아닌 .biz-modal-box의 형제로 이미지 바로 아래
   배치되며, 박스 폭을 꽉 채우는 버튼이다(cert-modal에는 없는 biz 모달만의 차이점). */
.ai-msg-modal-overlay.biz-modal-overlay {
  background: var(--paper);
}

.biz-modal-box {
  background: var(--paper);
  border-radius: 14px;
  padding: 16px;
  width: 560px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.25s ease-out;
}

.biz-modal-box img {
  max-width: 100%;
  max-height: 40vh;
  object-fit: contain;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.biz-modal-caption {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 0 30px;
}

.biz-modal-date {
  align-self: flex-start;
  text-align: left;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.02em;
}

.biz-modal-caption h4 {
  margin: 0;
  font-size: 17px;
  color: var(--ink);
}

.biz-modal-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.7;
  line-height: 1.5;
}

.biz-modal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.biz-modal-link:hover {
  background: var(--paper);
  color: var(--brand);
}

.biz-modal-link[hidden] {
  display: none;
}

.biz-modal-close {
  position: absolute;
  top: -6px;
  right: -6px;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: #888;
  padding: 2px 6px;
}

.biz-modal-close:hover {
  color: var(--ink);
}

/* === 회사소개 '찾아오시는 길' 지도 — 정적 Google 지도 iframe embed === */
.about-map {
  margin: 22px 0 0;
}

.about-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}

.about-map-frame iframe,
.about-map-frame img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.about-map-loading {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  opacity: 0.5;
  font-size: 14px;
}

.about-map-cap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.8;
}

.about-map-open {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}

.about-map-open:hover {
  text-decoration: underline;
}

/* === 회사소개 '회사개요' — CEO 인사말을 eyebrow 톤으로 승격, 앞뒤 여백으로 구획 분리 === */
.ceo-msg-title {
  margin-top: 30px;
  margin-bottom: 12px;
}

/* === 회사소개 '회사개요' — 좌측 사옥 이미지 + 우측 정보 표 === */
.overview-row {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}

/* 과거엔 height:auto(원본 비율 그대로)라 데스크톱 320px 고정폭에서는 원본
   비율대로, 모바일에서는 max-height:220px 크롭으로 서로 다른 비율이 됐다 —
   aspect-ratio를 고정해 모든 화면 폭에서 동일한 비율로 보이게 한다. */
.overview-media {
  flex: 0 0 320px;
  width: 320px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 24px var(--brand-shadow);
}

/* about-hq.webp 원본에 좌우 여백(레터박스)이 박혀 있어 기본 cover 크롭만으로는
   가장자리에 얇은 여백 띠가 남는다 — .overview-media를 div 프레임으로 쓰고
   내부 img를 살짝 확대해 그 여백을 완전히 밀어낸다(다른 .overview-media 이미지
   사용처는 img에 직접 클래스를 붙이므로 영향 없음). */
.overview-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
}

.overview-row .info-table {
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
}

/* .overview-row 좌측에 사옥 이미지(.overview-media) 대신 지도(.about-map-frame)를 둘 때
   (예: 1_4_location) — .about-map-frame 기본값(width:100%)은 단독 전체폭용이라
   overview-row의 유동 폭 flex 아이템으로 재정의 */
.overview-row .about-map-frame {
  flex: 1 1 460px;
  width: auto;
  min-width: 0;
  aspect-ratio: 4 / 3;
}

/* .overview-row 우측에 표(.info-table) 대신 일반 텍스트+버튼을 둘 때 (예: 1_2_brochure 표지) */
.overview-row .overview-copy {
  flex: 1 1 auto;
}

/* .intro-section h3 기본값은 가운데 정렬(섹션 제목용) — 이미지 옆 좌측 정렬 텍스트 컬럼
   안에서는 h4 서브헤드와 같은 기준선에 맞춰 좌측 정렬로 재정의 */
.overview-row .overview-copy h3 {
  margin: 0 0 10px;
  text-align: left;
}

.overview-row .overview-copy p {
  margin: 0 0 16px;
}

.overview-row .info-table th,
.overview-row .info-table td {
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 720px) {
  .overview-row {
    flex-direction: column;
  }

  .overview-media {
    width: 100%;
    flex: 0 0 auto;
  }

  .overview-row .about-map-frame {
    width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
  }
}

/* === 감정 엔진(3_1_3_feature1) — 항목(1~3번)마다 반복되는 .overview-row 3개.
   PC에서만 이미지를 공용 320px보다 조금 작게 줄이고(모바일은 기존처럼 전체 폭 유지),
   버튼 그룹을 좌측 정렬하고, 행 사이 간격을 넉넉히 준다. */
.overview-media--sm {
  flex: 0 0 240px;
  width: 240px;
}

@media (max-width: 720px) {
  .overview-media--sm {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* === 감정 엔진(3_1_3_feature1) 인라인 SVG 일러스트 색상 유틸리티 ===
   같은 사진(AI_sp_03.webp)을 세 항목에 재사용하던 것을 각 항목 전용 인라인 SVG로 교체하며 추가.
   .feature-svg로 스코프해 색상값을 전부 theme.css 토큰에 위임한다(hex 직접 사용 금지 원칙). */
.feature-svg .fev-bg { fill: var(--surface); }
.feature-svg .fev-line { stroke: var(--line); fill: none; }
.feature-svg .fev-brand { stroke: var(--brand); fill: none; }
.feature-svg .fev-brand-fill { fill: var(--brand); }
.feature-svg .fev-muted { stroke: var(--ink-muted); fill: none; }
.feature-svg .fev-muted-fill { fill: var(--ink-muted); }
.feature-svg .fev-ink-fill { fill: var(--ink); }
/* 디지털 트윈 캐릭터(머리+몸통) 전용 — 채움과 테두리를 한 클래스로 함께 지정 */
.feature-svg .fev-figure { fill: var(--brand-tint); stroke: var(--brand); }
.feature-svg .fev-alert { stroke: var(--alert); fill: none; }
.feature-svg .fev-alert-fill { fill: var(--alert); }

/* 세로 카드형(이미지 위 + 본문 아래) 3장을 가로 그리드로 배치 — 항목마다 버튼 개수가 다르다 보니
   (9개/2개/2개) 세로로 하나씩 쌓아두면 폭 넓은 카드에 작은 아이콘만 덩그러니 있는 모양이 더
   어색했다. .img-card-grid와 동일하게 auto-fit 그리드로 나란히 배치하고(카드 4장 이하 규칙),
   각 카드에 .img-card와 같은 톤(paper 배경·라운드·그림자)을 입혀 세 개가 나란히 있어도 서로
   구분되는 카드로 읽히게 한다. */
.feature-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
  gap: 20px;
  margin-top: 20px;
}

/* 그리드가 세 카드를 같은 행 높이로 늘려주므로(기본 align-items:stretch) 카드 세로 크기는
   저절로 맞춰진다 — 이미지는 .img-card-media처럼 카드 상단에 여백 없이 꽉 채우고(패딩은
   overview-copy에만 주고 overflow:hidden으로 상단 모서리를 카드 라운드에 맞춰 클리핑).
   본문은 위에서부터 자연스럽게 쌓고(제목·문단·버튼 모두 상단 정렬) 버튼 개수가 달라 생기는
   여분 높이는 카드 맨 아래 빈 공간으로 남긴다 — 버튼을 하단에 고정했더니 카드마다 버튼 시작
   위치가 들쭉날쭉해 보였다는 피드백으로 상단 정렬로 바꿈. */
.overview-row--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.overview-row--stacked .overview-media--sm {
  width: 100%;
  flex: 0 0 auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.overview-row--stacked .overview-copy {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* .intro-section h4.content-subtitle 기본 margin(46px 0 8px)은 앞선 문단과 멀찍이 띄우는
   독립 소제목용 — 여기서는 바로 위가 카드 이미지라 그대로 쓰면 이미지-제목 간격이 66px(패딩
   20 + 마진 46)까지 벌어진다. 카드 안에서는 패딩만으로 충분하므로 0으로 줄인다. */
.overview-row--stacked .overview-copy h4.content-subtitle {
  margin-top: 0;
}

.overview-row--stacked .overview-copy .button-group {
  justify-content: center;
}

/* 정사각형 비교 이미지를 표와 나란히 배치할 때 (예: 2_1_AI솔루션 차별점).
   기본 .overview-media(사옥 사진용)는 16px 라운드 + 브랜드톤 그림자로 사진을
   "떠 있는" 느낌으로 강조하는데, 같은 페이지 안에 .img-card 카드형 이미지
   (도입 효과 등)가 나란히 쓰이면 두 프레임이 서로 다른 톤으로 보인다 —
   .img-card와 동일한 라운드·그림자로 맞춰 같은 카드 패밀리로 읽히게 한다. */
.overview-media--square {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

/* AI_Solution2.webp 원본은 600×600 정사각 캔버스인데 실제 인물 사진은 위아래
   76px씩 투명 여백(레터박스)이 박혀 있다(세로 448px만 불투명) — 정사각형
   프레임에 그대로 채우면(object-fit: cover는 원본과 프레임 비율이 같아 크롭이
   전혀 안 일어남) 그 투명 띠가 배경색 그대로 카드 위아래에 빈 공간으로
   드러난다. about-hq.webp(좌우 여백)와 같은 이유로 같은 해결책(확대해 크롭)을
   쓰되, 이 이미지는 위아래 여백이라 더 큰 배율이 필요해 전용으로 오버라이드.

   단, 이 transform은 반드시 <img>가 아니라 .media-card 래퍼(위 HTML의
   .overview-media--square.media-card)에 걸어야 한다 — search.js의
   collectAskObjects()가 렌더 직후 모든 콘텐츠 오브젝트(이미지/카드)에 등장
   디졸브를 붙이는데, class에 "card"가 없는 순수 <img>는 img 자신이 오브젝트로
   잡혀 ask-dissolve 애니메이션(@keyframes ask-dissolve-in의 `to { transform:
   scale(1) }`)이 재생 직후 이 확대 crop을 스케일(1)로 되돌려버린다(실제로 겪은
   버그 — 처음엔 <img>에 직접 걸었다가 dissolve가 끝나자마자 여백이 다시 보였음).
   "-card"로 끝나는 클래스를 래퍼 div에 붙이면 dissolve가 div 단위로 잡혀
   (isAskObjectRoot의 ASK_OBJECT_CLASS_RE) img 자체는 애니메이션 대상에서
   빠지고 이 transform이 그대로 유지된다. */
.overview-media--square.media-card .overview-media-img {
  transform: scale(1.35);
}

.overview-copy .button-group {
  justify-content: flex-start;
}

.overview-row + .overview-row {
  margin-top: 40px;
}

/* 감정 엔진(3_1_3_feature1) 카드 3장은 이제 .feature-demo-grid 안에 나란히 놓인 형제라
   위 인접 형제 규칙(세로 스택 시절 카드 사이 여백용)이 그대로 걸려 카드2·3만 40px 아래로
   밀리고, 그 결과 grid stretch가 채워준 높이에서 40px를 까먹어 카드1보다 짧아 보였다
   (2·3 클래스 결합으로 특이도를 위 규칙과 맞추고 이 블록을 더 뒤에 둬 우선 적용). */
.feature-demo-grid .overview-row + .overview-row {
  margin-top: 0;
}

/* === 회사소개서 표지(1_2_brochure) — 공용 overview-media보다 작게, 텍스트와 간격 확보.
   렌더 시 섹션 id가 런타임에 접미사(--sN)로 바뀌므로 id가 아닌 전용 클래스로 스코프한다.
   .overview-copy가 flex:1 1 auto라 부모(.intro-section, 최대 1000px) 폭을 그대로 채워버려
   이미지(160px)만 좌측에 붙고 텍스트가 과도하게 넓게 퍼지는 문제가 있었음 — 행 자체의 폭을
   좁혀 중앙에 놓는다. */
.overview-row--brochure {
  gap: 48px;
  max-width: 620px;
  margin: 16px auto 0;
}

/* 공용 .overview-media는 사옥 사진용 3:2 가로 비율이 기본값인데, 회사소개서 표지
   원본(brochure-cover.webp, 700×900 세로형)에 그대로 적용하면 object-fit: cover가
   표지 중간의 좁은 가로 띠만 잘라내 보여줘 찌그러진 것처럼 보인다 — 원본 비율(7:9)로
   재정의해 표지 전체가 보이게 한다. */
.overview-media--brochure {
  flex: 0 0 160px;
  width: 160px;
  aspect-ratio: 7 / 9;
}

/* nclaw_p.webp(NClaw 플랫폼 핵심 성과 이미지) — 옆 표(.info-table)와 높이를 항상
   똑같이 맞춰야 하는데, 표 높이는 셀 줄바꿈에 따라 계속 바뀔 수 있어(실제로 겪은
   문제 — 특정 aspect-ratio 값으로 고정해뒀더니 표 내용이 늘어나며 높이가 어긋났다)
   고정 비율 대신 .overview-row(flex)의 교차축 stretch로 표 높이를 그대로 따라가게
   한다: aspect-ratio를 끄고 align-self: stretch만 주면 폭은 기존 320px 그대로,
   높이만 행의 실제 높이(=표 높이)에 자동으로 맞춰진다 — 표 내용이 나중에 늘거나
   줄어도 다시 손댈 필요가 없다. object-fit: cover(공용 .overview-media 기본값)가
   그 높이에 맞춰 중앙 기준으로 크롭하므로 위아래 여백도 생기지 않는다. 카드형
   테두리·그림자·라운드도 이 이미지에서는 빼서 표와 같은 평평한 톤으로 맞췄다. */
.overview-media--kiosk {
  aspect-ratio: auto;
  align-self: stretch;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* 배경이 회색(--brand-tint-strong)으로 보이는 건 카드 이미지(webp)에 투명 여백이 있어
   16:9 프레임에서 남는 부분에 .img-card-media 기본 배경색이 비쳐서다 — 이 페이지 카드는
   흰 배경(카드 본체와 동일한 --paper)으로 보이길 원하므로 여기서만 덮어쓴다. */
.brochure-feature-card .img-card-media {
  background: var(--paper);
}

/* 마우스 오버 시 공용 .img-card 규칙(background: var(--brand-tint))이 카드 전체에 걸리는데,
   이미지 영역(.img-card-media)은 위에서 항상 흰 배경으로 고정해 뒀으니 텍스트 영역(.img-card-body,
   자체 배경 없음)만 회색으로 바뀌어 카드가 위/아래 이색으로 갈라져 보인다. 이 카드는 호버에도
   흰 배경을 유지해 테두리·그림자·살짝 뜨는 효과만으로 반응을 표시한다(.img-card.ai-msg-link:hover와
   동일 특이도라 선언 순서상 이 규칙이 이긴다). */
.brochure-feature-card.ai-msg-link:hover {
  background: var(--paper);
}

@media (max-width: 720px) {
  .overview-row--brochure {
    max-width: none;
  }

  .overview-media--brochure {
    width: 160px;
    max-height: none;
    margin: 0 auto;
  }

  /* 상단 회사소개서 다운로드 버튼도 카드 하단 버튼들과 동일하게 모바일에서 가로 꽉 차게 */
  .overview-row--brochure .cta-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* === 제품 상세 페이지 히어로 이미지 ===
   과거엔 width:100% + max-height:340px만 있어서 고정 비율이 없었다 — 뷰포트
   폭에 따라 노출 비율이 모바일 1.43:1(원본 그대로, 크롭 없음)부터 PC 2.91:1
   (세로 약 51% 크롭)까지 제각각으로 바뀌어 반응형 구간마다 다르게 보이는
   문제가 있었다(직접 측정: 모바일 331×232, 태블릿 720×340, PC 988×340).
   aspect-ratio를 고정해 모든 화면 폭에서 항상 같은 비율로 렌더링되게 한다
   (권장 원본: docs/CONTENT_PAGE_GUIDE.md §8-1). */
.product-hero {
  display: block;
  width: 100%;
  aspect-ratio: 2.9 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-top: 4px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px var(--brand-shadow);
}

/* === MEDIA-MAP: 이미지 위 클릭형 안내 마커 (미디어 안내 데모, 3_1_4_feature2) ===
   product-hero처럼 aspect-ratio+object-fit:cover로 크롭하면 마커의 %좌표가 원본 이미지 기준이라
   크롭된 영역과 어긋난다 — 원본 이미지를 크롭 없이 그대로 보여주는 전용 래퍼가 필요해 신설.
   마커는 이미지 위 절대좌표(%)이므로 컨테이너 폭만 반응형으로 줄어들면 위치가 그대로 따라간다. */
.media-map {
  position: relative;
  display: block;
  line-height: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 4px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px var(--brand-shadow);
  scroll-margin-top: 76px;
}

.media-map img {
  display: block;
  width: 100%;
  height: auto;
}

.media-map-pin.ai-msg-link {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(22px, 4vw, 32px);
  height: clamp(22px, 4vw, 32px);
  border-radius: 50%;
  background: var(--brand);
  color: var(--paper);
  border: 2px solid var(--paper);
  padding: 0;
  font-size: clamp(11px, 1.6vw, 13px);
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 6px var(--brand-shadow-strong);
  transition: transform 0.15s, background-color 0.15s;
}

/* color를 명시하지 않으면 interaction.css의 .ai-msg-link:hover{color:var(--brand-dark)}가
   동일 특이도(0,2,0)에서 로드 순서상 나중이라 이겨버려, 배경(var(--brand-dark))과 글자색이
   똑같아져 번호가 안 보이는 문제가 있었다 — 여기서 직접 지정해(특이도 0,3,0) 항상 이기게 한다. */
.media-map-pin.ai-msg-link:hover,
.media-map-pin.ai-msg-link:focus-visible {
  transform: translate(-50%, -50%) scale(1.2);
  background: var(--brand-dark);
  color: var(--paper);
  border-bottom: 2px solid var(--paper);
}

/* 편의시설 마커(주차장 P·화장실 T) — 콘텐츠 마커(번호)와 구분되도록 경고 톤(빨강)으로 차별화 */
.media-map-pin--facility.ai-msg-link {
  background: var(--alert);
}

.media-map-pin--facility.ai-msg-link:hover,
.media-map-pin--facility.ai-msg-link:focus-visible {
  background: var(--alert-soft);
  color: var(--paper);
}

/* 하단 범례(설명글) 클릭 시 [강조:id]로 지도 위 해당 마커를 짚어준다 — 기본 .highlight-active(제목
   텍스트 점멸)는 작은 원형 배지 위에서 잘 안 보여서 .ai-btn과 동일한 링 펄스로 대체 */
.media-map-pin.highlight-active {
  animation: field-alert-pulse 0.6s ease-in-out 3;
}

/* 마지막으로 강조한 마커를 계속 짚어주는 화살표 — .highlight-active의 링 펄스는 1.8초면 끝나버려
   방문객이 지도를 훑어보는 사이 "방금 설명한 위치"를 놓치기 쉽다. 다음 마커가 강조되기 전까지
   (search.js의 pointMediaMapPin) 계속 붙어 둥실둥실 떠 있어 최근 위치를 알려준다. */
/* 빨간 삼각형 하나로는 지도 배경(초록·회색 톤)에 묻혀 잘 안 보여서, 진한 테두리(::before, 크게)
   위에 흰 채움(::after, 작게)을 같은 지점에 겹쳐 쌓아 "흰 화살표 + 검은 테두리"로 만든다. 두
   삼각형 모두 bottom:100%(마진 없이)로 꼭짓점을 마커 상단에 정확히 맞춰 겹치게 한다. */
.media-map-pin.media-map-pin--pointed::before,
.media-map-pin.media-map-pin--pointed::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 6px;
  width: 0;
  height: 0;
  animation: media-map-pin-arrow-float 1.2s ease-in-out infinite;
  pointer-events: none;
}

.media-map-pin.media-map-pin--pointed::before {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 13px solid var(--ink);
  filter: drop-shadow(0 2px 3px var(--brand-shadow-strong));
}

.media-map-pin.media-map-pin--pointed::after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid var(--paper);
}

@keyframes media-map-pin-arrow-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

/* 지도 마커의 이름 목록(범례) — 카테고리별 4열, 각 항목도 마커와 동일한 data-script로 재생 가능 */
.pin-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 14px 0 0;
  padding: 16px;
  background: var(--surface);
  border-radius: 12px;
}

.pin-legend-group h5 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-muted);
}

.pin-legend-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pin-legend-item.ai-msg-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px;
  border-bottom: 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 400;
}

.pin-legend-item.ai-msg-link:hover,
.pin-legend-item.ai-msg-link:focus-visible {
  color: var(--brand-dark);
  background: var(--brand-tint);
  border-radius: 6px;
}

.pin-legend-num {
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-legend-num--facility {
  background: var(--alert);
}

@media (max-width: 700px) {
  .pin-legend {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* 3_1_4_feature2 지도 데모 마커 좌표 — 인라인 스타일 금지 규칙 때문에 위치별 전용 클래스로 분리 */
.adv2-pin-1 { left: 44%; top: 10%; }
.adv2-pin-2 { left: 55%; top: 14%; }
.adv2-pin-3 { left: 48%; top: 19%; }
.adv2-pin-4 { left: 42%; top: 20%; }
.adv2-pin-5 { left: 62%; top: 17%; }
.adv2-pin-6 { left: 59%; top: 21%; }
.adv2-pin-7 { left: 65%; top: 25%; }
.adv2-pin-8 { left: 37%; top: 29%; }
.adv2-pin-9 { left: 48%; top: 30%; }
.adv2-pin-10 { left: 49%; top: 50%; }
.adv2-pin-11 { left: 45%; top: 55%; }
.adv2-pin-12 { left: 48%; top: 59%; }
.adv2-pin-13 { left: 64%; top: 55%; }
.adv2-pin-p1 { left: 64.2%; top: 47.7%; }
.adv2-pin-p2 { left: 4.7%; top: 58.7%; }
.adv2-pin-t1 { left: 51.3%; top: 11.4%; }
.adv2-pin-t2 { left: 48.7%; top: 39%; }
.adv2-pin-t3 { left: 69.5%; top: 57.6%; }

/* 아이콘 없는 포인트 카드(제품 상세의 기능/적용분야 목록) — 좌측 정렬로 가독성 확보 */
.point-card.point-card--plain {
  text-align: left;
}

.point-card.point-card--plain h4 {
  position: relative;
  padding-left: 14px;
}

.point-card.point-card--plain h4::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 2px;
  background: var(--brand);
}

/* ==========================================================
   확장 패턴 라이브러리 (purselly.com 구조 분석 — 문장/이미지/로고 미차용,
   레이아웃 아이디어만 참고. 카탈로그+예시: docs/PATTERN_CATALOG.html)
   ========================================================== */

/* ---------- PAIN-BAND: 문제 제기 섹션 ----------
   일반 `.intro-section.band`(마커용, 배경 없음)로 감싸고 내부에 .pain-grid 또는
   .pain-cols(2단 GROUP)를 배치. 고객이 겪는 불안을 인용구 카드로 나열한다.
   (2026-07 개편: 다크 배너 모디파이어 `.band--dark`를 폐기하고 라이트 콘텐츠로 전환 —
   HERO/PAGE-HEAD/HERO-PROOF와 같은 이유. 예전처럼 톤을 반전시키는 예외는 두지 않는다.) */
.pain-grid {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.pain-grid.g2 {
  grid-template-columns: repeat(2, 1fr);
}

.pain-grid.g3 {
  grid-template-columns: repeat(3, 1fr);
}

.pain-cell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
  transition: background 0.2s, border-color 0.2s;
}

.pain-cell:hover {
  background: var(--brand-tint);
  border-color: var(--brand-line);
}

.pain-cell .pain-group-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand);
  margin-bottom: 10px;
}

.pain-cell .pain-quote {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
}

/* 2단 GROUP (예: 대행형 / 셀프서브형처럼 문의 유형을 나눠 보여줄 때) */
.pain-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pain-col {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
}

.pain-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand);
}

.pain-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.pain-col-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--brand-tint);
  color: var(--brand-dark);
}

/* 카드 안에 중첩되는 인용구 셀 — 바깥 .pain-col(흰 면)과 구분되도록 옅은 면으로 */
.pain-col .pain-cell {
  background: var(--surface);
  margin-bottom: 12px;
}

.pain-col .pain-cell:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {

  .pain-grid.g2,
  .pain-grid.g3,
  .pain-cols {
    grid-template-columns: 1fr;
  }
}

/* ---------- TRACK-COMPARE: 2가지 선택지 비교 카드 ----------
   호버 시 나머지 카드가 흐려지는 포커스 효과 (:has() 활용).
   대행형/자체운영형처럼 두 갈래 선택지를 나란히 제시할 때 사용. */
.track-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.track-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.track-card--featured {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

.track-compare:has(.track-card:hover) .track-card {
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.track-compare:has(.track-card:hover) .track-card:hover {
  opacity: 1;
  border-color: var(--brand);
  box-shadow: 0 16px 36px -18px var(--brand-shadow-strong), 0 0 0 1px var(--brand);
  transform: translateY(-4px);
}

.track-card .track-kind {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 14px;
}

.track-card .track-kind .track-new {
  background: var(--brand);
  color: white;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10px;
  text-transform: none;
}

.track-card h4 {
  margin: 0 0 10px;
  font-size: 19px;
  color: var(--ink);
}

.track-card .track-desc {
  margin: 0 0 18px;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.track-card ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.track-card ul li {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  padding-left: 18px;
  position: relative;
}

.track-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
}

.track-card .track-go {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

.track-card--featured .track-go {
  color: var(--brand);
}

@media (max-width: 700px) {
  .track-compare {
    grid-template-columns: 1fr;
  }
}

/* ---------- HERO-PROOF: 히어로 옆 실시간 트래킹 프루프 카드 ----------
   .hero-inner 안에서 .hero-card 대신 사용하는 라이트 톤 대시보드 미리보기 카드.
   보안 관제·트래킹 데모처럼 "지금 작동 중"인 느낌을 전달할 때 사용.
   (2026-07 개편: 다크 카드 → 라이트 카드로 전환. 색상은 전부 theme.css 변수라
   향후 다크모드 토글([data-theme="dark"])에서 카드째로 자동 반전된다.) */
.hero-proof {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.hero-proof-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.hero-proof-top .hp-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.hp-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: hp-pulse 1.8s infinite;
}

@keyframes hp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(39, 161, 95, 0.5);
  }

  70% {
    box-shadow: 0 0 0 7px rgba(39, 161, 95, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(39, 161, 95, 0);
  }
}

.hero-proof-flow {
  display: flex;
  align-items: stretch;
}

.hp-step {
  flex: 1;
  text-align: center;
  padding: 4px;
}

.hp-step .hp-lab {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.hp-step .hp-num {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hp-step .hp-num.hp-accent {
  color: var(--brand);
}

.hp-arrow {
  display: flex;
  align-items: center;
  color: var(--line);
  font-size: 14px;
  padding-bottom: 4px;
}

.hero-proof-bar {
  margin: 18px 0;
  height: 1px;
  background: var(--line);
}

.hero-proof-stats {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.hero-proof-stats .hp-k {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 600;
}

.hero-proof-stats .hp-v {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hero-proof-stats .hp-roas {
  text-align: right;
}

.hero-proof-stats .hp-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ok-dark);
  background: var(--ok-tint);
  padding: 3px 9px;
  border-radius: 6px;
  margin-bottom: 5px;
}

.hero-proof-spark {
  margin-top: 16px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
}

.hero-proof-spark span {
  flex: 1;
  background: linear-gradient(180deg, var(--brand), var(--brand-tint));
  border-radius: 3px 3px 0 0;
}

/* ---------- COMPARE (AS-IS / TO-BE): 도입 전후 2열 비교 ---------- */
.compare-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
}

.compare-col {
  border-radius: 16px;
  padding: 28px;
  border: 1px solid var(--line);
}

.compare-col--before {
  background: var(--surface);
}

.compare-col--after {
  background: linear-gradient(165deg, var(--paper), var(--brand-tint));
  border-color: var(--brand-line);
}

.compare-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: 7px;
  margin-bottom: 18px;
}

.compare-col--before .compare-tag {
  background: var(--line);
  color: #666;
}

.compare-col--after .compare-tag {
  background: var(--brand);
  color: white;
}

.compare-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.compare-col li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.compare-col li .compare-ic {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-top: 1px;
}

.compare-col--before li .compare-ic {
  background: var(--surface);
  color: #aaa;
}

.compare-col--after li .compare-ic {
  background: var(--brand-tint);
  color: var(--brand);
}

.compare-col li .compare-tt {
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 2px;
  color: var(--ink);
}

.compare-col li .compare-dd {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .compare-cols {
    grid-template-columns: 1fr;
  }
}

/* ---------- CERT-CARDS + LOGO-MARQUEE: 인증뱃지 카드 · 고객사 로고 캐러셀 ----------
   로고 마퀴는 자연스러운 무한 스크롤을 위해 마크업에서 로고 목록을
   2벌 반복해 넣어야 한다 (도록: docs/PATTERN_CATALOG.html 참고). */
.cert-cards {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

.cert-card {
  width: 220px;
  max-width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.cert-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.cert-card .cert-badge {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

.cert-card .cert-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}

.logo-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee-track {
  display: flex;
  width: max-content;
  animation: logo-marquee-scroll 32s linear infinite;
}

.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}

@keyframes logo-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.logo-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  min-width: 140px;
  margin: 0 7px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-weight: 800;
  font-size: 15px;
  color: #667;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .cert-card {
    width: 100%;
    max-width: 300px;
  }

  .logo-chip {
    height: 52px;
    min-width: 120px;
    font-size: 13px;
    padding: 0 18px;
  }
}

/* ---------- STAGE-LINE: 화살표로 연결된 가로형 단계 카드 ----------
   기존 .flow-cards(세로 커넥터+번호 노드)의 대안 — 화살표 연결을
   시각적으로 강조하고 싶을 때 사용. */
.stage-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 30px;
  position: relative;
}

.stage-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 20px;
  position: relative;
}

.stage-item--key {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

.stage-item .stage-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ink);
  color: white;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 14px;
}

.stage-item--key .stage-num {
  background: var(--brand);
}

.stage-item .stage-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.stage-item h4 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--ink);
}

.stage-item p {
  margin: 0 0 12px !important;
  font-size: 13px;
  color: #666;
  line-height: 1.55;
}

.stage-item .stage-kw {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.stage-item .stage-kw span {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  background: var(--surface);
  padding: 3px 8px;
  border-radius: 6px;
}

.stage-item .stage-conn {
  position: absolute;
  top: 40px;
  right: -22px;
  color: var(--line);
  font-size: 18px;
  z-index: 1;
}

.stage-item:last-child .stage-conn {
  display: none;
}

@media (max-width: 880px) {
  .stage-line {
    grid-template-columns: repeat(2, 1fr);
  }

  .stage-item .stage-conn {
    display: none;
  }
}

@media (max-width: 500px) {
  .stage-line {
    grid-template-columns: 1fr;
  }
}

/* ---------- BRANCH-TREE: 세로 분기 흐름도 (카드형 노드 + 라인 연결) ----------
   조건에 따라 절차가 갈라지는 흐름(프리필터 매치 여부, 캐싱 적용 여부 등)을 표현할 때 사용.
   순수 CSS 트리 기법 — 각 li가 자기 폭의 절반만 가로선을 그리고, 인접 li의 반쪽 선과 맞물려
   하나의 가로 커넥터처럼 보인다(li는 inline-block + 부모 ul의 white-space:nowrap으로 줄바꿈
   방지). 비대칭 분기(한쪽은 바로 끝나고 다른 쪽만 더 깊이 갈라지는 구조)도 중첩 ul/li만으로
   그대로 표현된다. 노드는 STAGE-LINE(§style.css)과 같은 카드 톤(둥근 모서리·그림자·호버 리프트)을
   쓰고, 결과 카드는 금액 배지를 카드 안에 통합해 "칩+뱃지"가 붙은 카드처럼 보이게 한다. 모바일에서는
   가지치기 시각을 포기하고 각 노드를 문서 순서 그대로 세로 스택 + 단순 연결선으로 접는다(다른
   절차형 패턴과 동일한 반응형 붕괴 원칙). */
/* overflow-x: auto만 지정하면 스펙상 overflow-y도 암묵적으로 'auto'가 되어(둘 중 하나만
   visible이 아니면 나머지도 visible일 수 없음), 카드 하나에만 있는 호버 리프트/그림자가
   트리 상자의 위쪽 경계를 넘는 순간 "세로 오버플로"로 잡혀 트리 전체에 스크롤바가
   생기고(특히 위쪽 여백이 없는 최상단 "질문 입력" 카드가 위로 잘림) 그 결과 가로
   스크롤바까지 함께 나타나 보였다. 카드 쪽 호버 폭(리프트량·그림자 번짐)을 줄이고, 그
   보다 넉넉한 안쪽 여백을 상자에 둬서 어떤 카드가 호버돼도 실제 오버플로가 발생하지
   않게 한다 — 그래야 좁은 화면에서 필요한 가로 스크롤만 조용히 남고 스크롤바가
   호버할 때마다 깜빡이지 않는다. */
.branch-tree {
  max-width: 920px;
  margin: 44px auto 0 !important;
  padding: 16px 10px 20px;
  overflow-x: auto;
}

.branch-tree ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 40px 0 0;
  position: relative;
  text-align: center;
  white-space: nowrap;
}

.branch-tree > ul {
  padding-top: 0;
}

.branch-tree li {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 40px 24px 0;
  position: relative;
  vertical-align: top;
}

.branch-tree li::before,
.branch-tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 40px;
  border-top: 2px solid var(--brand-line);
}

.branch-tree li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid var(--brand-line);
}

.branch-tree li:only-child {
  padding-top: 0;
}

.branch-tree li:only-child::before,
.branch-tree li:only-child::after {
  display: none;
}

.branch-tree li:first-child::before,
.branch-tree li:last-child::after {
  border: 0 none;
}

.branch-tree li:last-child::before {
  border-right: 2px solid var(--brand-line);
  border-radius: 0 8px 0 0;
}

.branch-tree li:first-child::after {
  border-radius: 8px 0 0 0;
}

.branch-tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 40px;
  border-left: 2px solid var(--brand-line);
}

.branch-node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
  max-width: 236px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 17px 13px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  white-space: normal;
  cursor: default;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 14px 28px rgba(0, 0, 0, 0.07);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.branch-node-title {
  display: block;
}

/* 금액·보조 설명은 이제 카드 안 마지막 자식(칩/배지)으로 붙는다 — 흐름 밖에 흩어진
   캡션이 아니라 카드 자체의 결론(비용)을 보여주는 한 덩어리로 읽히게 한다 */
.branch-node-title + .branch-cost,
.branch-node-title + .branch-note {
  margin-top: 8px;
}

.branch-cost,
.branch-note {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  background: var(--surface);
  color: var(--ink-muted);
}

.branch-note {
  font-size: 12px;
}

.branch-cost--save {
  background: var(--ok-tint);
  color: var(--ok-dark);
}

.branch-cost--free {
  background: var(--ok-tint);
  color: var(--ok-dark);
}

/* .ai-msg-link의 공용 텍스트-앵커 스타일(본문 속 점선 밑줄 링크용 — padding: 0 2px,
   투명 배경, 회색 텍스트, font-weight 500 등, interaction.css)이 style.css보다 나중에
   로드되어 카드 쪽 padding/배경/텍스트까지 조용히 덮어쓰고 있었다(패딩을 아무리 키워도
   화면엔 반영되지 않던 원인). 2클래스 결합 선택자로 특이도를 올려 카드 스타일을 전부
   다시 못박는다 — 로드 순서와 무관하게 항상 이긴다. */
.branch-node.ai-msg-link {
  padding: 17px 13px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.branch-node.ai-msg-link:hover {
  border-color: var(--brand);
  border-radius: 18px;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06), 0 8px 16px var(--brand-shadow);
}

/* 분기 카드는 위 결합 선택자와 같은 특이도(2클래스)라 소스 순서상 이 뒤에 와야
   테두리색·배경 오버라이드가 실제로 적용된다(둘 다 .branch-node를 공유하므로) */
.branch-node.branch-node--decision {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand);
}

.branch-node.ai-msg-link.ai-playing {
  border-color: var(--brand) !important;
  border-radius: 18px !important;
  background: var(--brand-tint-strong) !important;
  animation: ai-anchor-pulse 1.2s ease-in-out infinite;
}

@media (max-width: 640px) {
  .branch-tree ul {
    padding-top: 0;
  }

  .branch-tree li {
    display: block;
    padding: 0;
  }

  .branch-tree li::after,
  .branch-tree ul ul::before {
    display: none !important;
  }

  .branch-tree li::before {
    display: block !important;
    content: '';
    position: static;
    width: 2px;
    height: 28px;
    margin: 0 auto 10px;
    border: 0 none;
    background: var(--brand-line);
  }

  .branch-tree > ul > li::before {
    display: none !important;
  }

  .branch-node {
    display: flex;
    max-width: 320px;
    margin: 0 auto 22px;
  }
}

/* ---------- CAROUSEL: 가로 스크롤 캐러셀 (2026-07 신설) ----------
   카드가 5개 이상이라 그리드/스택으로 펼치면 너무 길어지는 콘텐츠(대표 후기,
   고객사·인증 카드, 제품 라인업 등)를 가로로 넘겨보게 한다. 트랙은 스크롤 스냅이라
   터치·트랙패드 스와이프가 별도 JS 없이 동작하고, 좌우 버튼/점(dot)은 마우스 사용자를
   위한 보조 내비게이션이다 — 버튼·점 클릭 동작은 메인 앱(asset/js/app/search.js)의
   문서 위임 클릭 핸들러가 처리한다(조각 파일에는 <script> 금지 규칙 유지, §CONTENT_PAGE_GUIDE
   참고). 카드 내용 자체는 기존 .img-card/.point-card/.cert-card 등을 그대로 .carousel-item
   안에 넣어 재사용한다. */
.carousel {
  position: relative;
}

.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-item {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

.carousel-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.carousel-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.carousel-btn:hover {
  background: var(--brand-tint);
  border-color: var(--brand-line);
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.carousel-dot.active {
  background: var(--brand);
  transform: scale(1.3);
}

@media (max-width: 600px) {
  .carousel-item {
    flex-basis: 220px;
  }
}

/* --- 시나리오 플레이 데모(3_1_5_feature3) — 1/3 이미지 + 2/3 편집 가능한 메세지 목록.
   드래그 재정렬·토글 편집(수정/적용)·전체재생 로직은 조각에 <script>를 못 넣으므로 search.js의
   문서 위임 핸들러가 담당(위 캐러셀과 동일한 이유) — 이 CSS는 시각 표현만 맡는다. */
.scenario-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: stretch; /* 이미지가 옆 메세지 목록과 같은 높이로 늘어남 */
  gap: 28px;
  margin-top: 18px;
}

/* img에 height:100%로 옆 목록과 같은 높이를 맞추려 했으나 — 그리드 셀(.scenario-media)의
   높이 자체가 align-items:stretch로 "내용에 따라" 정해지는 상황에서 그 내용인 img가 다시
   height:100%로 부모 높이를 요구하는 순환 참조가 생겨, 브라우저에 따라 stretch를 포기하고
   img가 원본 비율(4:5)대로 auto-height로 렌더링해버리는 경우가 있었다(PC 폭에서 이미지가
   카드 목록보다 길게 삐져나오는 실제 버그로 확인됨, 2026-08). img를 position:absolute로 빼서
   부모의 패딩 박스에 딱 맞춰 채우면 이 순환 참조 자체가 사라진다 — .scenario-media는 grid
   stretch로만 높이가 결정되고, img는 그 결과값을 그대로 따라가기만 하면 되므로 항상 카드
   목록과 정확히 같은 높이로 잘린다. */
.scenario-media {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  min-height: 220px;
}

.scenario-media img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scenario-player {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scenario-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 한 줄 카드: [드래그 핸들] [텍스트] [수정/적용 버튼] */
.scenario-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--paper);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.scenario-item.scenario-dragging {
  opacity: 0.4;
}

.scenario-drag-handle {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
}

.scenario-drag-handle:hover {
  background: var(--brand-tint);
  color: var(--ink);
  border-color: var(--brand);
}

.scenario-drag-handle:active {
  cursor: grabbing;
}

/* 선택자 특이도 주의: .intro-section p { margin-bottom:15px; line-height:1.8; color:#555; }
   (style.css 상단, 본문 문단 공통 스타일)가 클래스 1개+태그 1개(0,1,1)라 .scenario-item-text
   단독(클래스 1개, 0,1,0)보다 특이도가 높아 margin-bottom/line-height를 그대로 덮어써버린다 —
   실제로 이 때문에 텍스트 박스 아래쪽에만 15px 여백이 남아 드래그 핸들·수정 버튼과 세로
   중앙이 안 맞아 보였다(2026-08). .scenario-item으로 한 단계 더 감싸 특이도(0,2,0)를 확실히
   더 높여 해결 — 이 페이지의 다른 .scenario-item-text 규칙(§아래)도 동일 이유로 전부 이 형태로
   맞춘다. */
.scenario-item .scenario-item-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  outline: none;
  white-space: normal;
  word-break: break-word;
}

/* contenteditable 중 Enter가 새 <div>/<p>로 새어 들어가는 경우(특히 한글 IME 조합 확정 시
   beforeinput의 insertParagraph를 못 잡는 예외 상황) 대비 — 안에 어떤 블록 요소가 끼어들어도
   inline으로 강제해 카드 한 줄 레이아웃이 깨지지 않게 한다(search.js가 beforeinput으로도
   막지만 이중 방어). */
.scenario-item .scenario-item-text div,
.scenario-item .scenario-item-text p {
  display: inline;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

.scenario-item-text[contenteditable="true"] {
  background: var(--brand-tint);
  box-shadow: 0 0 0 2px var(--brand-line);
  cursor: text;
}

.scenario-edit-toggle {
  flex: 0 0 auto;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 0 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.scenario-edit-toggle:hover {
  border-color: var(--brand);
  color: var(--ink);
}

.scenario-edit-toggle.is-editing {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* 재생 중 강조 — 다른 컴포넌트의 .ai-playing(브랜드 톤 펄스)과 동일한 시각 언어 재사용 */
.scenario-item.ai-playing {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: 0 0 0 2px var(--brand-tint-strong);
  animation: ai-anchor-pulse 1.2s ease-in-out infinite;
}

.scenario-player-actions {
  display: flex;
  margin-top: 2px;
}

/* 카드와 가로폭을 맞춘 검정 배경/흰 텍스트 버튼, 활성(hover) 시 반전 —
   .ai-btn 기본(연한 배경)보다 우선하도록 클래스 두 개를 함께 건 선택자로 특이도를 높임 */
.scenario-play-all.ai-btn {
  width: 100%;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.scenario-play-all.ai-btn:hover:not(:disabled) {
  background: var(--paper);
  color: var(--ink);
  transform: none;
}

.scenario-play-all:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 700px) {
  .scenario-layout {
    grid-template-columns: 1fr;
  }

  /* 1열로 쌓이면 이미지 높이를 옆 목록에서 물려받을 수 없으므로 다시 고정 비율로 —
     img가 position:absolute라 자기 콘텐츠로 부모 높이를 만들 수 없으므로, 비율은
     부모(.scenario-media) 쪽에 직접 지정한다(img 쪽에 두면 부모 높이가 0으로 붕괴됨). */
  .scenario-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}