/* =========================================================
   문의 — 대화식 판(/contact-chat, 2026-10-06, 참고: 폴센트 온보딩). 연한 파란 바탕의 대화 창,
   안내자(흰 풍선) ↔ 나(남색 풍선), 답은 칩·큰 버튼. 상단 띠는 /contact 와 같다. theme-a.css 뒤에 붙는다.
   ========================================================= */
.doc-theme.v-chat{--ink:#141827;--navy:#1b1f3a;--blue:#2e5bff;--blue2:#dfe6ff;--yellow:#f5b400;--soft:#f5f6fa;--line:#e4e6ee;--sub:#6b7080;
  --key:#2e5bff;--key-fill:#2e5bff;--key-on-fill:#fff;--red:#2e5bff;--accent:#2e5bff;--rule:#e4e6ee;--ease:cubic-bezier(.2,.7,.1,1)}
.v-chat .page-hero{position:relative;min-height:0;height:210px;display:flex;flex-direction:column;justify-content:center;padding:0;background:#131a30;color:#fff;text-align:center;overflow:hidden;border-bottom:0}
.v-chat .page-hero::before{content:"";position:absolute;inset:0;z-index:0;background:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/contact-band.webp') center 50%/cover no-repeat}
.v-chat .page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(45% 120% at 50% 50%,rgba(14,18,34,.55) 0,rgba(14,18,34,0) 100%)}
.v-chat .page-hero .wrap{position:relative;z-index:2;width:100%}
.v-chat .page-hero .eyebrow{color:rgba(255,255,255,.8);font-size:12px;font-weight:600;letter-spacing:.22em}
.v-chat .page-hero h1{margin-top:8px;font-size:30px;line-height:1.2;letter-spacing:-.02em;color:#fff}
.v-chat .page-hero h1 .r{display:inline;background:var(--yellow);color:var(--navy);padding:.04em .22em;border-radius:.22em;text-decoration:none}

/* ── 대화 창 */
.v-chat .cc{padding:120px 0 96px;background:#fff}
.v-chat .cc-wrap{max-width:680px}
.v-chat .cc-form{position:relative;padding:28px 24px 24px;border-radius:24px;background:#eef2fb}
.v-chat .cc-log{display:flex;flex-direction:column;gap:12px}
.v-chat .m{display:flex;align-items:flex-end;gap:10px;max-width:92%;animation:ccIn .35s var(--ease) both}
@keyframes ccIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.v-chat .m.g .av{flex:none;width:36px;height:36px;border-radius:50%;background:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/guide.webp') center/cover no-repeat #dfe6ff;border:2px solid #fff;box-shadow:0 2px 8px -3px rgba(20,24,39,.35)}
.v-chat .m.g .b{display:inline-block;padding:12px 16px;border-radius:18px;border-bottom-left-radius:6px;background:#fff;color:var(--ink);font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.45;box-shadow:0 2px 10px -6px rgba(20,24,39,.25)}
.v-chat .m.g .b small{display:block;margin-top:4px;font-size:12.5px;font-weight:500;color:var(--sub)}
.v-chat .m.u{align-self:flex-end;flex-direction:row-reverse;cursor:pointer}
.v-chat .m.u .b{display:inline-block;max-width:100%;padding:11px 16px;border-radius:18px;border-bottom-right-radius:6px;background:var(--blue);color:#fff;font-size:15px;font-weight:600;line-height:1.5}
.v-chat .m.u em{font-style:normal;font-size:12px;color:var(--sub);text-decoration:underline;text-underline-offset:3px;opacity:0;transition:opacity .2s}
.v-chat .m.u:hover em{opacity:1}
.v-chat .m.typing .b{padding:12px 14px;display:inline-flex;gap:5px;align-items:center}
.v-chat .m.typing b{width:7px;height:7px;border-radius:50%;background:#b9c0cd;animation:ccDot 1s infinite}
.v-chat .m.typing b:nth-child(2){animation-delay:.15s}.v-chat .m.typing b:nth-child(3){animation-delay:.3s}
@keyframes ccDot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}

/* ── 질문 패널 — JS 가 있으면 지금 것만 */
.v-chat .cc-step{margin-top:14px;padding:16px;border-radius:18px;background:#fff;box-shadow:0 10px 30px -22px rgba(20,24,39,.35)}
.cc-js .cc-step{display:none}
.cc-js .cc-step.on{display:block;animation:ccIn .35s var(--ease) both}
body:not(.cc-js) .v-chat .cc-step::before{content:attr(data-q);display:block;margin-bottom:12px;font-size:17px;font-weight:800}
.v-chat .cc-step.shake{animation:ccShake .45s}
@keyframes ccShake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.v-chat .cf-opts{display:flex;flex-wrap:wrap;gap:8px}
.v-chat .cf-opt{position:relative;display:inline-flex;align-items:center;margin:0;padding:10px 16px 10px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:14.5px;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .15s}
.v-chat .cf-opt:not(:has(.ic)){padding-left:16px}
.v-chat .cf-opt:hover{border-color:#b9c0cd;transform:translateY(-1px)}
.v-chat .cf-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.v-chat .cf-opt:has(input:checked){background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.v-chat .cf-opt:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
.v-chat .cf-opt .ic{width:26px;height:26px;margin:-4px 8px -4px -2px;object-fit:contain;flex:none}
.v-chat .cf-opt-wide{border-radius:14px;padding:12px 16px;font-size:14px}
.v-chat .cc-ok,.v-chat .cc-skip{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border:0;border-radius:14px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s,transform .15s}
.v-chat .cc-ok{width:100%;margin-top:14px;background:var(--navy);color:#fff}
.v-chat .cc-ok:hover{background:var(--blue);transform:translateY(-1px)}
.v-chat .cc-row{display:flex;gap:8px;margin-top:14px}
.v-chat .cc-row .cc-ok{flex:1;margin-top:0}
.v-chat .cc-skip{background:var(--soft);color:var(--sub)}
.v-chat .cc-skip:hover{color:var(--ink)}
.v-chat .cc-submit{height:56px;font-size:16px}
.v-chat .cf-q{margin-top:16px}
.v-chat .cf-q:first-child{margin-top:0}
.v-chat .cf-label{display:block;margin-bottom:8px;font-size:12.5px;font-weight:700;color:#3b4050;letter-spacing:0}
.v-chat .cf-req{margin-left:6px;font-size:11px;font-weight:700;color:var(--blue)}
.v-chat .cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.v-chat .cf-grid .cf-q{margin-top:0}
.v-chat .cf-grid .cf-q + .cf-q + .cf-q{margin-top:14px}
.v-chat .cf-in,.v-chat .cf-ta{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid #d7dbe6;border-radius:12px;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.v-chat .cf-in{padding:12px 14px}
.v-chat .cf-ta{padding:13px 14px;line-height:1.65;resize:vertical;min-height:120px}
.v-chat .cf-in:focus,.v-chat .cf-ta:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,91,255,.15)}
.v-chat .cf-eg{margin:0 0 10px;padding:11px 13px;border-radius:0;background:var(--soft);font-size:13px;line-height:1.6;color:#4a5060}
.v-chat .cf-eg .k{display:block;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--sub)}
.v-chat .cf-eg .k em{font-style:normal;color:var(--blue)}
.v-chat .cf-eg b{font-weight:600;color:#3f4653;transition:opacity .18s}
.v-chat .cf-eg.swap b{opacity:0}
.v-chat .cf-eg .multi{display:block;margin-top:6px;font-size:12px;color:var(--sub)}
.v-chat .cf-eg .multi[hidden]{display:none}
.v-chat .cf-file-in{font:inherit;font-size:14px;color:#4b5563;max-width:100%}
.v-chat .cf-file-in::file-selector-button{font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--navy);background:#fff;border:1.5px solid var(--navy);border-radius:999px;padding:8px 14px;margin-right:12px}
.v-chat .cf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.v-chat .cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.v-chat .cf-alert{margin:0 0 20px;padding:14px 18px;border-radius:14px;background:#fff1c2;color:var(--ink);font-size:14px;line-height:1.7}
.v-chat .cf-note{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--sub);text-align:center}
.v-chat .cf-note a{color:var(--sub);text-decoration:underline}
.v-chat .cc-tel{margin-top:28px;text-align:center;font-size:14px;color:var(--sub)}
.v-chat .cc-tel a{font-weight:700;color:var(--ink)}
@media (max-width:700px){
  .v-chat .page-hero{height:140px}
  .v-chat .page-hero h1{font-size:22px}
  .v-chat .cc{padding:20px 0 64px}
  .v-chat .cc-form{padding:18px 14px 16px;border-radius:18px}
  .v-chat .m{max-width:100%}
  .v-chat .cf-grid{grid-template-columns:1fr}
  .v-chat .cf-grid .cf-q + .cf-q{margin-top:12px}
}
@media (prefers-reduced-motion:reduce){.v-chat *{animation:none!important;transition:none!important}}

@media (max-width:768px){.v-chat .cc{padding:80px 0 72px}}   /* 띠 아래 64px — 휴대폰 */

/* 2026-10-08 머리 교체(.pg-head): 제목 아래 56px 에 대화 판 */
.v-chat .cc{padding-top:56px}
@media (max-width:768px){.v-chat .cc{padding-top:40px}}

/* 보기 단추가 끌리거나 글자가 잡히던 문제(2026-10-13 사장님 "버튼이 드래그 되는데"): 단추 안 그림·글자는 끌기·선택 대상에서 뺀다 */
.v-chat .cf-opt,.v-chat .cc-ok,.v-chat .cc-skip,.v-chat .m.u{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.v-chat .cf-opt img,.v-chat .cf-opt span{-webkit-user-drag:none;user-drag:none;pointer-events:none}

/* 참고 사례 카드(2026-10-18) — 사례 페이지 '유사한 … 문의하기'로 왔을 때 서식 위에 */
.v-chat .cc-ref{display:flex;align-items:center;gap:16px;margin:0 0 20px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -20px rgba(27,31,58,.45)}
.v-chat .cc-ref img{flex:none;width:120px;height:80px;object-fit:cover;border-radius:10px;background:var(--soft)}
.v-chat .cc-ref span{display:block;font-size:12.5px;font-weight:800;color:var(--blue)}
.v-chat .cc-ref b{display:block;margin-top:2px;font-size:17px;font-weight:800;color:var(--ink);word-break:keep-all}
.v-chat .cc-ref p{margin:4px 0 0;font-size:14px;color:var(--sub)}
@media (max-width:520px){.v-chat .cc-ref{gap:12px;padding:12px}.v-chat .cc-ref img{width:88px;height:59px}.v-chat .cc-ref b{font-size:15.5px}.v-chat .cc-ref p{font-size:13px}}