/* 메타키움 AI 상담 위젯 — 토큰은 site.css :root (DESIGN.md) */
.mk-chat {
  --mk-chat-gap: 24px;
  --mk-chat-bottom: var(--mk-chat-gap);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mk-ink, #111);
}
.mk-chat *,
.mk-chat *::before,
.mk-chat *::after {
  box-sizing: border-box;
}

/* ---------- 여는 버튼 ---------- */
.mk-chat-launcher {
  position: fixed;
  right: var(--mk-chat-gap);
  bottom: var(--mk-chat-bottom);
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: 28px;
  background: var(--mk-accent, #ed6d08);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(237, 109, 8, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.mk-chat-launcher:hover {
  background: var(--mk-accent-hover, #d85f00);
  transform: translateY(-2px);
}
.mk-chat.is-open .mk-chat-launcher {
  display: none;
}

/* ---------- 상담 창 ---------- */
.mk-chat-panel {
  position: fixed;
  right: var(--mk-chat-gap);
  bottom: var(--mk-chat-bottom);
  z-index: 10005;
  display: flex;
  flex-direction: column;
  width: 380px;
  height: min(640px, calc(100vh - 48px));
  height: min(640px, calc(100dvh - 48px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.mk-chat-panel[hidden] {
  display: none;
}

/* 시안 A(화이트 클린): 홈페이지 흰 헤더와 같은 톤 — 로고, 얇은 선, 주황은 행동 버튼에만 */
.mk-chat-head {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 10px 18px;
  background: #fff;
  color: var(--mk-ink, #111);
  border-bottom: 1px solid var(--mk-line, #e4e4e4);
}
.mk-chat-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mk-chat-logo {
  display: block;
  width: auto;
  height: 20px;
}
.mk-chat-sep {
  width: 1px;
  height: 14px;
  background: var(--mk-line, #e4e4e4);
}
.mk-chat-head h2 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.mk-chat-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #0b7a42;
  white-space: nowrap;
}
.mk-chat-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #18b464;
}
.mk-chat-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mk-ink, #111);
  cursor: pointer;
}
.mk-chat-icon:hover {
  background: var(--mk-surface, #f5f5f3);
}

.mk-chat-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.mk-chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 대화가 길어져도 메시지 칸이 줄어들어 글이 다음 칸과 겹치지 않게(대신 목록이 스크롤된다) */
.mk-chat-log > * {
  flex-shrink: 0;
}
.mk-chat-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.mk-chat-msg p,
.mk-chat-msg ul {
  margin: 0;
}
.mk-chat-msg p + p,
.mk-chat-msg p + ul,
.mk-chat-msg ul + p {
  margin-top: 8px;
}
.mk-chat-msg ul {
  padding-left: 18px;
  list-style: disc;
}
.mk-chat-msg li {
  list-style: disc;
}
.mk-chat-msg li + li {
  margin-top: 2px;
}
.mk-chat-msg a {
  color: var(--mk-accent-strong, #c45500);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 답변: 말풍선 없이 로고 아이콘 옆에 문서처럼 */
.mk-chat-bot {
  position: relative;
  align-self: stretch;
  max-width: none;
  min-height: 28px;
  padding: 3px 0 0 38px;
  border-radius: 0;
}
.mk-chat-bot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--mk-line, #e4e4e4);
  border-radius: 7px;
  background: #fff url("/img/logo2.png") 3px 3px / auto 20px no-repeat;
}
/* 질문: 옅은 회색 말풍선 */
.mk-chat-user {
  align-self: flex-end;
  max-width: 82%;
  padding: 9px 14px;
  background: var(--mk-surface, #f5f5f3);
  color: var(--mk-ink, #111);
  border-radius: 14px 14px 4px 14px;
}
.mk-chat-bot.is-error .mk-chat-text {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff8f2;
  border: 1px solid #f0c8a8;
}

/* 생각 시간 표시: 기다리는 동안 "생각하는 중 · N초", 답변이 시작되면 "N초 동안 생각함" */
.mk-chat-think {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  color: var(--mk-muted, #6b6b6b);
}
.mk-chat-msg .mk-chat-think.is-done {
  margin: 0 0 6px;
  font-size: 12.5px;
}
.mk-chat-think.is-done::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mk-accent, #ed6d08);
  opacity: 0.7;
}
.mk-chat-dots {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}
.mk-chat-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mk-accent, #ed6d08);
  animation: mk-chat-dot 1.2s infinite ease-in-out;
}
.mk-chat-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.mk-chat-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
.mk-chat-text:empty {
  display: none;
}
/* 글자를 쓰는 동안 끝에서 깜빡이는 커서 */
.mk-chat-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--mk-accent, #ed6d08);
  animation: mk-chat-blink 1s steps(1) infinite;
}
@keyframes mk-chat-blink {
  50% { opacity: 0; }
}
.mk-chat-retry {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid var(--mk-accent, #ed6d08);
  border-radius: 18px;
  background: #fff;
  color: var(--mk-accent-strong, #c45500);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mk-chat-retry:hover {
  background: var(--mk-accent, #ed6d08);
  color: #fff;
}

/* 위로 올려 읽는 중 새 글자가 오면 나타나는 '최신 답변' 버튼 */
.mk-chat-jump {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 4px 14px 4px 10px;
  border: 0;
  border-radius: 17px;
  background: var(--mk-ink, #111);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.mk-chat-jump[hidden] {
  display: none;
}
@keyframes mk-chat-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.mk-chat-suggest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: -4px;
  padding-left: 38px;
}
.mk-chat-suggest button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--mk-line, #e4e4e4);
  border-radius: 20px;
  background: #fff;
  color: var(--mk-ink, #111);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.mk-chat-suggest button:hover {
  border-color: var(--mk-accent, #ed6d08);
  color: var(--mk-accent-strong, #c45500);
}

/* 하단 연락 버튼 두 개(전화 상담 요청하기 / 바로 전화걸기)를 같은 폭으로 */
.mk-chat-actions {
  gap: 8px;
}
.mk-chat-actions a.mk-chat-cta,
.mk-chat-actions a.mk-chat-call {
  flex: 1 1 0;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
}
.mk-chat-actions a.mk-chat-call {
  border-color: var(--mk-ink, #111);
  color: var(--mk-ink, #111);
}
.mk-chat-actions a.mk-chat-call:hover {
  background: var(--mk-ink, #111);
  color: #fff;
}
.mk-chat-call small {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.75;
}
@media screen and (max-width: 360px) {
  .mk-chat-call small {
    display: none;
  }
}

/* 전화 상담 요청: 바로가기 줄의 강조 버튼과 창 안 양식 */
.mk-chat-actions a.mk-chat-cta {
  border-color: var(--mk-accent, #ed6d08);
  background: var(--mk-accent, #ed6d08);
  color: #fff;
}
.mk-chat-actions a.mk-chat-cta:hover {
  border-color: var(--mk-accent-hover, #d85f00);
  background: var(--mk-accent-hover, #d85f00);
  color: #fff;
}
.mk-chat-msg a[href="#callback"] {
  color: var(--mk-accent-strong, #c45500);
}
.mk-chat-callback {
  padding-right: 2px;
}
.mk-cb-title {
  margin: 0 0 4px !important;
  font-size: 15px;
  font-weight: 700;
}
.mk-cb-desc {
  margin: 0 0 12px !important;
  font-size: 13.5px;
  color: var(--mk-ink-2, #3d3d3d);
}
.mk-cb-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--mk-line, #e4e4e4);
  border-radius: 12px;
  background: #fff;
}
.mk-cb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}
.mk-cb-field b,
.mk-cb-times b {
  color: var(--mk-accent-strong, #c45500);
}
.mk-cb-field input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  font: inherit;
  font-size: 16px; /* iOS 확대 방지 */
  font-weight: 400;
  color: var(--mk-ink, #111);
}
.mk-cb-field input:focus,
.mk-cb-times input:focus-visible + span,
.mk-cb-consent input:focus-visible + span {
  outline: none;
  border-color: var(--mk-accent, #ed6d08);
  box-shadow: 0 0 0 3px rgba(237, 109, 8, 0.18);
}
.mk-cb-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}
.mk-cb-times legend {
  margin-bottom: 4px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}
.mk-cb-times label {
  position: relative;
  cursor: pointer;
}
.mk-cb-times input {
  position: absolute;
  opacity: 0;
}
.mk-cb-times span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--mk-line, #e4e4e4);
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mk-ink-2, #3d3d3d);
}
.mk-cb-times input:checked + span {
  border-color: var(--mk-ink, #111);
  background: var(--mk-ink, #111);
  color: #fff;
}
.mk-cb-consent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.mk-cb-consent label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  cursor: pointer;
}
.mk-cb-consent input {
  width: 18px;
  height: 18px;
  accent-color: var(--mk-accent, #ed6d08);
}
.mk-cb-more {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--mk-muted, #6b6b6b);
  text-decoration: underline;
  cursor: pointer;
}
.mk-cb-note {
  margin: -4px 0 0 !important;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mk-muted, #6b6b6b);
}
.mk-cb-terms {
  max-height: 160px;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--mk-surface, #f5f5f3);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--mk-ink-2, #3d3d3d);
}
.mk-cb-terms[hidden] {
  display: none;
}
.mk-cb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.mk-cb-error {
  margin: 0 !important;
  font-size: 13px;
  font-weight: 600;
  color: #c0392b;
}
.mk-cb-error:empty {
  display: none;
}
.mk-cb-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.mk-cb-buttons button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.mk-cb-cancel {
  border: 1px solid var(--mk-line, #e4e4e4);
  background: #fff;
  color: var(--mk-ink-2, #3d3d3d);
}
.mk-cb-submit {
  border: 0;
  background: var(--mk-accent, #ed6d08);
  color: #fff;
}
.mk-cb-submit:disabled {
  background: #c9c9c9;
  cursor: wait;
}

/* 답변 아래 '이어서 물어보기' 후속 질문 */
.mk-chat-follow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -6px;
  padding-left: 38px;
}
.mk-chat-follow-label {
  flex: 0 0 100%;
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mk-muted, #6b6b6b);
}
.mk-chat-follow button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--mk-line, #e4e4e4);
  border-radius: 17px;
  background: #fff;
  color: var(--mk-ink, #111);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.mk-chat-follow button:hover {
  border-color: var(--mk-accent, #ed6d08);
  color: var(--mk-accent-strong, #c45500);
}

.mk-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 0;
  background: #fff;
  border-top: 1px solid var(--mk-line, #e4e4e4);
}
.mk-chat-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--mk-line, #e4e4e4);
  border-radius: 16px;
  background: #fff;
  color: var(--mk-ink-2, #3d3d3d);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.mk-chat-actions a:hover {
  border-color: var(--mk-ink, #111);
  color: var(--mk-ink, #111);
}

.mk-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 6px 16px;
  background: #fff;
}
.mk-chat-form textarea {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 120px;
  padding: 11px 14px;
  border: 1px solid #cfcfcf;
  border-radius: 22px;
  font: inherit;
  font-size: 16px; /* iOS 확대 방지 */
  line-height: 1.4;
  resize: none;
  /* 스크롤바는 글이 최대 높이(120px)를 넘을 때만 chat.js autosize()가 켠다 */
  overflow-y: hidden;
  scrollbar-width: thin;
  color: var(--mk-ink, #111);
  background: #fff;
}
.mk-chat-form textarea:focus {
  outline: none;
  border-color: var(--mk-accent, #ed6d08);
  box-shadow: 0 0 0 3px rgba(237, 109, 8, 0.18);
}
.mk-chat-send {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--mk-accent, #ed6d08);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.mk-chat-send:hover {
  background: var(--mk-accent-hover, #d85f00);
}
.mk-chat-send.is-stop {
  background: var(--mk-ink, #111);
}
.mk-chat-send:disabled {
  background: #c9c9c9;
  cursor: wait;
}
.mk-chat-count {
  margin: 0;
  padding: 0 16px 4px;
  background: #fff;
  font-size: 12px;
  text-align: right;
  color: var(--mk-muted, #6b6b6b);
}
.mk-chat-count[hidden] {
  display: none;
}
.mk-chat-count.is-full {
  color: var(--mk-accent-strong, #c45500);
  font-weight: 600;
}

/* 처음 방문 안내 말풍선 */
.mk-chat-teaser {
  position: fixed;
  right: var(--mk-chat-gap);
  bottom: calc(var(--mk-chat-bottom) + 68px);
  z-index: 9991;
  display: flex;
  align-items: flex-start;
  max-width: 260px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
  animation: mk-chat-in 0.25s ease-out;
}
.mk-chat-teaser[hidden],
.mk-chat.is-open .mk-chat-teaser {
  display: none;
}
.mk-chat-teaser::after {
  content: "";
  position: absolute;
  right: 34px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.05);
}
.mk-chat-teaser-open {
  flex: 1 1 auto;
  padding: 12px 4px 12px 16px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  color: var(--mk-ink-2, #3d3d3d);
  cursor: pointer;
}
.mk-chat-teaser-open strong {
  color: var(--mk-ink, #111);
}
.mk-chat-teaser-close {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 4px 4px 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mk-muted, #6b6b6b);
  cursor: pointer;
}
.mk-chat-teaser-close svg {
  width: 16px;
  height: 16px;
}

/* 열릴 때 부드럽게 */
.mk-chat-panel:not([hidden]) {
  animation: mk-chat-in 0.2s ease-out;
}
@keyframes mk-chat-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.mk-chat-note {
  margin: 0;
  padding: 0 16px 12px;
  background: #fff;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mk-muted, #6b6b6b);
}
.mk-chat-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 휴대폰: 하단 퀵메뉴 바 위에 버튼, 상담 창은 전체 화면 */
@media screen and (max-width: 820px) {
  .mk-chat {
    --mk-chat-gap: 16px;
    --mk-chat-bottom: calc(var(--mk-bar-h, 64px) + 16px + env(safe-area-inset-bottom));
  }
  .mk-chat-launcher {
    height: 52px;
    padding: 0 18px 0 14px;
    font-size: 15px;
  }
  .mk-chat-panel {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* 상담 창이 전체 화면일 때 뒤 페이지가 같이 스크롤되지 않게 */
  html.mk-chat-lock,
  html.mk-chat-lock body {
    overflow: hidden;
  }
  .mk-chat-teaser {
    max-width: 230px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-chat-launcher,
  .mk-chat-dots i,
  .mk-chat-caret,
  .mk-chat-panel:not([hidden]),
  .mk-chat-teaser {
    transition: none;
    animation: none;
  }
}