@charset "UTF-8";
/* ============================================================================
   바푸 오버레이 — 화면을 바꾸지 않고 그 위에 얹힌다
   ----------------------------------------------------------------------------
   왜 오버레이인가
     기존 마법사(sub3_1_nd.jsp)는 잘 돌아간다. 문제는 화면이 아니라 **아무도
     옆에서 알려주지 않는다는 것**이다. 그래서 화면은 한 글자도 안 바꾸고,
     바푸가 그 위에 서서 지금 눌러야 할 곳을 짚어 준다.

     이 파일과 bapu-overlay.js 두 줄만 빼면 화면은 원래대로 돌아간다.
     기존 id(#link_general·#link_food·#select_category1…)를 읽기만 하고
     고치지 않는다. 마법사의 동작에는 손대지 않는다.

   색·서체는 nd 셸(#04101B / #0EA5E9 / Archivo + Pretendard)에서 그대로 가져왔다.
   ========================================================================== */

.bp-root {
  --bp-ink:   #04101B;
  --bp-ink2:  #0B2A42;
  --bp-sky:   #0EA5E9;
  --bp-skyd:  #0284C7;
  --bp-skyl:  #7FD6F7;
  --bp-line:  rgba(11, 42, 66, .14);
  --bp-mist:  #F3F7FB;
  --bp-body:  rgba(11, 27, 40, .82);
  --bp-muted: rgba(11, 42, 66, .55);
  --bp-en: 'Archivo', sans-serif;
  --bp-kr: 'Pretendard Variable', 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
  font-family: var(--bp-kr);
  word-break: keep-all;
}
.bp-root *, .bp-root *::before, .bp-root *::after { box-sizing: border-box; }
.bp-root button { font-family: inherit; }

/* ── 스포트라이트 ─────────────────────────────────────────────────────
   대상만 남기고 나머지를 어둡게 덮는다. 구멍을 뚫는 대신 아주 큰 그림자를
   써서 사각형 바깥을 채운다 — 이렇게 하면 덮개가 클릭을 가로채지 않는다.
   손님은 밝아진 그 버튼을 그대로 누를 수 있다. 안내가 길을 막으면 안 된다. */
/* 층위 — 12종 모달이 z-index:100 이다. 그 위에 서야 한다.
   가장 헷갈리는 3단계(12종 고르기)에서 바푸가 모달 뒤로 숨으면
   정작 필요할 때 안 보인다. 실제로 그랬다. */
.bp-spot {
  position: fixed; z-index: 110; pointer-events: none;
  border: 2px solid var(--bp-sky);
  box-shadow: 0 0 0 9999px rgba(4, 16, 27, .55), 0 0 0 4px rgba(14, 165, 233, .25);
  transition: top .3s cubic-bezier(.2,.8,.3,1), left .3s cubic-bezier(.2,.8,.3,1),
              width .3s cubic-bezier(.2,.8,.3,1), height .3s cubic-bezier(.2,.8,.3,1),
              opacity .2s ease;
}
.bp-spot.off { opacity: 0; }
/* 모달이 열렸을 땐 모달 자체가 이미 어둡게 덮고 있다. 여기에 같은 세기로
   또 덮으면 목록 글씨가 안 읽힌다. 그래서 덧칠을 줄인다. */
.bp-spot.in-modal { box-shadow: 0 0 0 9999px rgba(4, 16, 27, .3), 0 0 0 4px rgba(14, 165, 233, .3); }

/* 짚는 손가락 — 대상 모서리에서 깜박인다 */
.bp-pin {
  position: fixed; z-index: 112; pointer-events: none;
  width: 13px; height: 13px; border-radius: 50%; background: var(--bp-sky);
  box-shadow: 0 0 0 0 rgba(14, 165, 233, .55);
  animation: bp-pulse 1.7s ease-out infinite;
  transition: top .3s cubic-bezier(.2,.8,.3,1), left .3s cubic-bezier(.2,.8,.3,1), opacity .2s ease;
}
.bp-pin.off { opacity: 0; }
@keyframes bp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(14, 165, 233, .5); }
  70%  { box-shadow: 0 0 0 18px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

/* ── 바푸가 서 있는 자리 ──────────────────────────────────────────── */
.bp-dock {
  position: fixed; right: 22px; bottom: 22px; z-index: 130;
  display: flex; align-items: flex-end; gap: 12px;
}
@media (max-width: 640px) { .bp-dock { right: 12px; bottom: 12px; left: 12px; } }

.bp-char {
  flex: none; width: 108px; cursor: pointer; background: none; border: 0; padding: 0;
  position: relative; line-height: 0;
  /* fill-mode 를 both 로 두면 안 된다. both 는 애니메이션이 시작되기 전까지
     첫 프레임(opacity:0)을 붙잡고 있어서, 애니메이션이 안 도는 상황 —
     배경 탭, 절전 모드, 축소 애니메이션 설정 — 에서는 바푸가 영영 투명해진다.
     실제로 배경 탭에서 그렇게 됐다. 평소 모습은 아래 기본값이 책임지고,
     애니메이션은 있으면 좋은 장식으로만 둔다. */
  opacity: 1;
  animation: bp-in .5s cubic-bezier(.2,.9,.3,1);
}
.bp-body { display: block; transform-origin: 50% 92%; }
.bp-char img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 14px rgba(4,16,27,.22)); }

/* ── 바푸가 움직인다 ────────────────────────────────────────────────
   가만히 있으면 그림 한 장이다. 숨 쉬듯 조금 움직이면 사람이 보고 있는
   것처럼 읽힌다. 다만 장식으로 흔들지 않는다 — 평소엔 아주 느리게,
   뜻이 있을 때만(답할 때 · 모를 때) 한 번 반응한다.

   움직임은 span(.bp-body)에 건다. 단추(.bp-char)에는 들어올 때 움직임이
   이미 걸려 있어서, 한 요소에 둘을 걸면 뒤엣것이 transform 을 통째로
   가져가 앞엣것이 사라진다. */
.bp-body { animation: bp-bob 2.8s ease-in-out infinite; }
@keyframes bp-bob {
  0%, 100% { transform: translateY(0)     rotate(0)      scale(1); }
  25%      { transform: translateY(-10px) rotate(-2.4deg) scale(1.015); }
  50%      { transform: translateY(-3px)  rotate(0)      scale(1); }
  75%      { transform: translateY(-12px) rotate(2.4deg) scale(1.015); }
}
/* 답할 때 — 한 번 끄덕인다 */
.bp-root.nod .bp-body { animation: bp-nod .62s cubic-bezier(.2,.9,.3,1); }
@keyframes bp-nod {
  0%   { transform: translateY(0)     rotate(0); }
  28%  { transform: translateY(-11px) rotate(-4.5deg); }
  56%  { transform: translateY(3px)   rotate(2.5deg); }
  100% { transform: translateY(0)     rotate(0); }
}
/* 모른다고 할 때 — 도리도리 */
.bp-root.shake .bp-body { animation: bp-shake .66s ease-in-out; }
@keyframes bp-shake {
  0%, 100% { transform: rotate(0)     translateX(0); }
  20%      { transform: rotate(-5deg) translateX(-4px); }
  45%      { transform: rotate(4.5deg) translateX(4px); }
  70%      { transform: rotate(-3deg) translateX(-2px); }
}
/* 손이 올라가면 잠깐 멈춘다 — 누르려는데 흔들리면 겨냥이 어렵다 */
.bp-char:hover .bp-body { animation-play-state: paused; }

/* 움직임을 줄여 달라고 설정하신 분께는 전부 멈춘다.
   멀미·전정기관 문제로 정말 필요한 설정이다. */
@media (prefers-reduced-motion: reduce) {
  .bp-body,
  .bp-root.nod .bp-body,
  .bp-root.shake .bp-body { animation: none; }
}
.bp-char:hover img { transform: translateY(-3px); }
.bp-char img { transition: transform .2s ease, opacity .22s ease; }
.bp-char.swap img { opacity: 0; }
@keyframes bp-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* 접혔을 때 — 작게 대기한다. 손님이 부르면 다시 편다. */
.bp-root.mini .bp-char { width: 62px; }
.bp-root.mini .bp-bubble { display: none; }
.bp-badge {
  position: absolute; top: -4px; right: -4px; width: 20px; height: 20px;
  display: none; align-items: center; justify-content: center;
  background: var(--bp-sky); color: #fff; font-size: 11px; font-weight: 700;
  font-family: var(--bp-en); border-radius: 50%;
}
.bp-root.mini .bp-badge { display: flex; }

/* ── 말풍선 ───────────────────────────────────────────────────────── */
.bp-bubble {
  position: relative; width: 408px; max-width: calc(100vw - 170px);
  background: #FFFFFF; border: 1px solid var(--bp-line);
  border-left: 3px solid var(--bp-sky);
  box-shadow: 0 14px 40px rgba(4, 16, 27, .18);
  opacity: 1;   /* 말풍선도 같은 이유로 both 를 쓰지 않는다 */
  animation: bp-in .42s cubic-bezier(.2,.9,.3,1);
}
@media (max-width: 640px) { .bp-bubble { width: auto; flex: 1 1 auto; max-width: none; } }
/* 꼬리 — 바푸 쪽을 가리킨다 */
.bp-bubble::after {
  content: ""; position: absolute; right: -8px; bottom: 26px;
  width: 14px; height: 14px; background: #FFFFFF;
  border-right: 1px solid var(--bp-line); border-top: 1px solid var(--bp-line);
  transform: rotate(45deg);
}
.bp-bubble .head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px 10px; border-bottom: 1px solid var(--bp-line); background: var(--bp-mist);
}
.bp-bubble .head .en {
  font-family: var(--bp-en); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bp-skyd);
}
.bp-x {
  width: 24px; height: 24px; flex: none; border: 1px solid var(--bp-line);
  background: none; color: var(--bp-muted); font-size: 13px; line-height: 1; cursor: pointer;
}
.bp-x:hover, .bp-x:focus-visible { border-color: var(--bp-sky); color: var(--bp-skyd); }

.bp-say { padding: 16px 18px 4px; margin: 0; font-size: 18.6px; line-height: 1.66; color: var(--bp-ink2); }
.bp-say b { color: var(--bp-skyd); }
.bp-sub { padding: 0 18px; margin: 9px 0 0; font-size: 15.8px; color: var(--bp-muted); line-height: 1.6; }

.bp-acts { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 16px 15px; }
.bp-btn {
  padding: 9px 15px; border: 1px solid var(--bp-sky); background: var(--bp-sky);
  color: #FFFFFF; font-size: 14.2px; font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.bp-btn:hover, .bp-btn:focus-visible { background: var(--bp-skyd); border-color: var(--bp-skyd); color: #fff; }
.bp-btn.ghost { background: none; color: var(--bp-muted); border-color: var(--bp-line); }
.bp-btn.ghost:hover, .bp-btn.ghost:focus-visible { border-color: var(--bp-sky); color: var(--bp-skyd); background: none; }

/* ── 대화 ─────────────────────────────────────────────────────────── */
.bp-chat { display: none; border-top: 1px solid var(--bp-line); }
.bp-root.chatting .bp-chat { display: block; }
.bp-root.chatting .bp-bubble { width: 456px; }
.bp-log {
  max-height: 46vh; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 11px;
}
.bp-msg { font-size: 16.2px; line-height: 1.72; }
.bp-msg.me { align-self: flex-end; max-width: 84%; background: var(--bp-ink); color: #EAF3F9; padding: 9px 13px; }
.bp-msg.bapu { align-self: flex-start; max-width: 92%; color: var(--bp-body); }
.bp-msg.bapu .src {
  display: inline-block; margin-bottom: 5px; padding: 2px 7px; background: var(--bp-skyd);
  color: #fff; font-family: var(--bp-en); font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
}
.bp-msg.bapu .txt { white-space: pre-wrap; }
.bp-msg.bapu .more { display: block; margin-top: 6px; font-size: 13.6px; color: var(--bp-skyd); font-weight: 600; }
/* 표에서 집어 온 줄 — 표를 쏟지 않고 물으신 유형의 줄만 보여준다.
   업종이 다르면 주기도 다르므로 걸리는 줄이 둘 이상일 수 있다. */
.bp-msg .rows { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bp-msg .row {
  padding: 9px 11px; background: var(--bp-mist); border-left: 2px solid var(--bp-sky);
}
.bp-msg .row .what {
  display: block; font-size: 13.5px; color: var(--bp-muted); margin-bottom: 3px;
}
.bp-msg .row b { display: block; font-size: 16.6px; color: var(--bp-ink2); line-height: 1.55; }
.bp-msg .row a {
  display: inline-block; margin-top: 5px; font-size: 12px; color: var(--bp-skyd); font-weight: 600;
}

/* 애매하게 맞은 답임을 밝히는 줄 — 확신에 찬 얼굴로 내밀지 않는다 */
.bp-msg .note.weak { color: var(--bp-warn); border-left-color: rgba(180, 83, 10, .4); }

/* 손님 말을 바꿔 찾았을 때 그 사실을 밝히는 줄 */
.bp-msg .note {
  display: block; margin: 0 0 6px; font-size: 13px; color: var(--bp-muted);
  padding-left: 8px; border-left: 2px solid var(--bp-line);
}

/* 못 찾았을 때 권하는 비슷한 이름들 — 눌러서 바로 다시 묻는다 */
.bp-msg .near { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.bp-msg .near button {
  padding: 6px 11px; background: #FFFFFF; border: 1px solid var(--bp-line);
  font-size: 14.8px; color: var(--bp-ink2); cursor: pointer; font-weight: 600;
}
.bp-msg .near button:hover, .bp-msg .near button:focus-visible {
  border-color: var(--bp-sky); color: var(--bp-skyd);
}

/* 바푸가 화면을 실제로 조작하는 버튼 — 말로만 끝나지 않게 한다 */
.bp-msg .do {
  display: inline-block; margin-top: 9px; padding: 8px 14px;
  border: 1px solid var(--bp-sky); background: var(--bp-sky); color: #fff;
  font-size: 13.8px; font-weight: 700; cursor: pointer;
}
.bp-msg .do:hover, .bp-msg .do:focus-visible { background: var(--bp-skyd); border-color: var(--bp-skyd); }

.bp-typing { display: flex; gap: 4px; padding: 4px 0; }
.bp-typing i { width: 6px; height: 6px; background: rgba(11,42,66,.35); border-radius: 50%; animation: bp-blink 1.2s infinite; }
.bp-typing i:nth-child(2) { animation-delay: .18s; }
.bp-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes bp-blink { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }

.bp-ask { display: flex; border-top: 1px solid var(--bp-line); }
.bp-ask input {
  flex: 1 1 auto; min-width: 0; padding: 12px 14px; border: 0; background: #fff;
  font-family: inherit; font-size: 14px; color: var(--bp-ink2);
}
.bp-ask input:focus { outline: 2px solid var(--bp-sky); outline-offset: -2px; }
.bp-ask button {
  flex: none; padding: 12px 17px; border: 0; background: var(--bp-sky); color: #fff;
  font-size: 13.2px; font-weight: 700; cursor: pointer;
}
.bp-ask button:hover, .bp-ask button:focus-visible { background: var(--bp-skyd); }

.bp-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px 14px; }
.bp-chips button {
  padding: 6px 11px; background: #fff; border: 1px solid var(--bp-line);
  font-size: 13.4px; color: var(--bp-body); cursor: pointer;
}
.bp-chips button:hover, .bp-chips button:focus-visible { border-color: var(--bp-sky); color: var(--bp-skyd); }

/* 12종 목록에 한 줄 설명을 끼워 넣는다 (원래 마크업은 안 건드리고 붙이기만)
   원래 <a> 가 display:flex 라 여기에 display:block 을 줘도 무시된다 —
   설명이 이름 아래가 아니라 옆에 붙어 목록이 찌그러졌다. 그래서 줄바꿈을
   허용하고 설명에 100% 폭을 줘서 제 줄로 내린다. order 로 화살표(:after)
   보다 뒤에 놓아 첫 줄은 [이름 ... →], 둘째 줄은 설명이 된다. */
.online_chk_cate li a { flex-wrap: wrap; }
/* 검사 이름 아래 한 줄. 부모(a)가 flex-wrap 이라야 아래로 내려간다 —
   아니면 이름 옆에 그대로 달라붙어 글자가 겹쳐 보인다(실제로 그랬다). */
.bp-hint {
  display: block; width: 100%; margin-top: 6px;
  /* 카드 이름이 19.5px 이라 설명도 같이 올린다. 너무 벌어지면 설명이
     주석처럼 보여 안 읽힌다. */
  font-size: 14.6px; font-weight: 400; color: var(--bp-muted); line-height: 1.55;
}
.online_chk_cate li a:hover .bp-hint { color: rgba(255, 255, 255, .82); }
.online_chk_cate li a.bp-lit {
  background: #04101B; border-color: #04101B; color: #fff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .4);
}
.online_chk_cate li a.bp-lit .bp-hint { color: rgba(255, 255, 255, .8); }

@media (prefers-reduced-motion: reduce) {
  .bp-root *, .bp-spot, .bp-pin { animation: none !important; transition: none !important; }
}

/* ── 바푸의 유형 찾기칸 ────────────────────────────────────────────
   검사화면의 유형 목록이 식품 104개다. 대화를 열지 않고 말풍선에서 바로
   치게 한다. 유형 고르는 단계에서만 보인다(.seeking). */
.bp-seek{ display:none; }
.bp-root.seeking .bp-seek{
  /* 좌우 여백을 윗 문장(.bp-say/.bp-sub 의 18px)과 맞춤다.
     0 으로 두면 찾기칸과 못찾음 안내가 혼자 가장자리에 붙어 줄이 어긋난다.
     가르는 선(border-top)은 padding 밖에 그려져 폭은 그대로 살아 있다. */
  display:block; margin:12px 0 4px; padding:12px 18px 0; border-top:1px solid var(--bp-line,#DCE9F5);
}
.bp-seek input{
  width:100%; box-sizing:border-box; padding:10px 12px;
  border:1px solid var(--bp-line,#DCE9F5); background:#fff;
  font-size:15.4px; font-family:inherit; color:#04101B;
}
.bp-seek input:focus{ outline:none; border-color:#0EA5E9; box-shadow:0 0 0 2px rgba(14,165,233,.18); }
.bp-seek .n{ display:inline-block; margin-top:7px; font-size:13.4px; color:#0284C7; font-weight:700; }
.bp-seek .why{ display:block; margin-top:3px; font-size:13.4px; color:#5b6b7a; line-height:1.6; }
.bp-seek.none input{ border-color:#F0A868; }   /* 틀린 게 아니라 '더 볼 곳이 있다' */

/* 찾은 줄을 반짝인다. 화면의 것을 지우지 않는다 — 클래스만 붙인다.
   3초쯤 눈에 띄었다가 잔잔한 표시로 남는다(계속 깜빡이면 읽기 힘들다). */
.chk_hm_list li.bp-glow{
  animation: bpGlow 1s ease-in-out 0s 3;
  background:#EAF3F9; outline:2px solid #0EA5E9; outline-offset:2px; border-radius:2px;
}
@keyframes bpGlow{
  0%,100%{ background:#EAF3F9; outline-color:#0EA5E9; }
  50%    { background:#7FD6F7; outline-color:#0284C7; }
}
@media (prefers-reduced-motion: reduce){
  .chk_hm_list li.bp-glow{ animation:none; }
}

/* ── 못 찾았을 때 ──────────────────────────────────────────────────
   빨간 "못 찾음" 한 줄로 끝내면 손님을 막다른 곳에 세운다. 게다가 손님은
   잘못한 게 없다 — '삼겹살' 은 옳은 말이고 목록이 법정 식품유형으로만
   되어 있을 뿐이다.

   답은 손님 책상 위에 있다. 품목제조보고서·영업등록(신고)증에 식품유형이
   그대로 적혀 있다. 그래서 그 종이를 작게 그려 어느 줄을 보라고 짚는다.
   설명 세 줄보다 이 그림 하나가 빠르다. */
.bp-miss{ display:block; margin-top:8px; }
.bp-miss .t{
  display:block; font-size:15.2px; font-weight:700; color:#04101B; line-height:1.5;
}
.bp-miss .d{
  display:block; margin-top:4px; font-size:13.8px; color:#5b6b7a; line-height:1.65;
}
.bp-miss .d b, .bp-miss .a b{ color:#0284C7; font-weight:700; }

/* 손님이 갖고 계신 그 종이 */
.bp-miss .doc{
  display:block; margin:10px 0 9px; padding:9px 10px 8px;
  background:#FBFCFD; border:1px solid #DCE9F5;
  box-shadow:0 1px 0 #DCE9F5, 0 4px 10px -8px rgba(4,16,27,.5);
}
.bp-miss .doc .h{
  display:block; font-size:10.5px; letter-spacing:.05em; color:#8496a6;
  padding-bottom:6px; margin-bottom:6px; border-bottom:1px solid #EAF3F9;
}
.bp-miss .doc .r{
  display:flex; align-items:center; gap:8px; padding:3px 4px; border-radius:2px;
}
.bp-miss .doc .r i{
  flex:none; width:58px; font-style:normal; font-size:11.5px; color:#5b6b7a;
}
/* 값이 적혀 있을 자리. 값을 지어내지 않는다 — 자리만 보인다. */
.bp-miss .doc .r u{
  flex:1 1 auto; height:1px; background:repeating-linear-gradient(
    to right, #C9D8E4 0 5px, transparent 5px 9px);
  text-decoration:none;
}
.bp-miss .doc .r.on{ background:#EAF3F9; box-shadow:inset 2px 0 0 #0EA5E9; }
.bp-miss .doc .r.on i{ color:#0284C7; font-weight:700; }
.bp-miss .doc .r.on u{ background:repeating-linear-gradient(
    to right, #7FD6F7 0 5px, transparent 5px 9px); }
.bp-miss .doc .r.on em{
  flex:none; font-style:normal; font-size:10.5px; font-weight:700;
  color:#0284C7; letter-spacing:.04em;
}
.bp-miss .a{
  display:block; font-size:13.8px; color:#04101B; line-height:1.65;
}

/* 최종제출 버튼 안내 - 마지막 줄 깜빡임 (2026-08-31) */
.bp-say .bp-blink { color:#d0342a; font-weight:700; animation: bpBlink 1.2s ease-in-out infinite; }
@keyframes bpBlink { 0%,100%{opacity:1} 50%{opacity:.35} }