/* 지페 · 문의 (body.pg-contact): 마스코트 말풍선 · 떠오르는 라벨 양식 · 성공 장면 · 전화 카드(맥박 · 상담 시간) */

/* ── 히어로: 생각하는 마스코트 + 주제 말풍선 ──────────── */
.pg-contact .pg-hero__vis{display:block;place-items:stretch;position:relative;align-self:stretch;min-height:clamp(380px,35vw,620px);padding:0;overflow:hidden;border-radius:var(--r4);background:#fff}
.cth{position:absolute;inset:0}
.cth__m{position:absolute;right:7%;bottom:0;width:auto;height:88%;max-width:none;transform-origin:50% 100%;rotate:var(--lk,0deg);translate:var(--lt,0px) 0;transition:rotate .6s var(--spring),translate .6s var(--spring);animation:cbreath 5s ease-in-out infinite alternate}
.cth[data-look] .cth__m{--lk:-3.5deg;--lt:-10px}
@keyframes cbreath{from{transform:scale(1)}to{transform:scale(1.014,1.02)}}
.cth__b{position:absolute;left:clamp(16px,4.5%,40px);top:clamp(24px,8%,56px);display:grid;gap:clamp(10px,1vw,16px);justify-items:start;max-width:66%}
.cth__b li:nth-child(even){margin-left:clamp(10px,5%,40px)}
.cth__bub{display:inline-flex;align-items:center;gap:.55em;padding:.78em 1.15em;border-radius:20px 20px 20px 6px;background:var(--mist);color:var(--ink);font-size:clamp(15px,1.2vw,19px);font-weight:800;letter-spacing:-.025em;line-height:1.3;white-space:nowrap;box-shadow:inset 0 0 0 1.5px transparent;transition:background .25s,color .25s,transform .35s var(--spring),box-shadow .25s;animation:cfloat 5.6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.cth__bub::after{content:"";flex:none;width:.5em;height:.5em;margin-left:.15em;border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;transform:translateX(-3px) rotate(45deg);opacity:.35;transition:transform .3s var(--out),opacity .3s}
.cth__bub:hover,.cth__bub:focus-visible{background:var(--blue);color:#fff;transform:translateX(4px) scale(1.03)}
.cth__bub:hover::after,.cth__bub:focus-visible::after{transform:translateX(0) rotate(45deg);opacity:1}
.cth__bub:active{transform:scale(.97)}
.cth__bub:hover,.cth__bub:focus-visible{animation-play-state:paused}
.cth.is-off .cth__bub,.cth.is-off .cth__m{animation-play-state:paused}
@keyframes cfloat{from{translate:0 -4px}to{translate:0 5px}}

/* ── 양식: 주제 칩 · 떠오르는 라벨 · 실시간 힌트 ──────── */
.topics{min-width:0;margin:0;padding:0;border:0}
.topics legend{padding:0;margin-bottom:10px;color:var(--ink2);font-size:14px;font-weight:800}
.topics__row{display:flex;flex-wrap:wrap;gap:8px}
.topic{position:relative}
.topic input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.topic span{display:inline-flex;align-items:center;height:42px;padding:0 17px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink2);font-size:15px;font-weight:800;letter-spacing:-.02em;transition:background .25s,color .25s,box-shadow .25s,transform .3s var(--spring)}
.topic:hover span{box-shadow:inset 0 0 0 1.5px var(--ink3);color:var(--ink)}
.topic input:checked+span{background:var(--ink);box-shadow:none;color:#fff;animation:cpop .45s var(--spring)}
.topic input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
@keyframes cpop{0%{transform:scale(.92)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

.cform__fields{display:grid;grid-template-rows:1fr;transition:grid-template-rows .65s var(--out),opacity .4s ease}
.cform__fin{display:grid;gap:18px;min-height:0}
.cform__fin>*{min-width:0}
.fw{position:relative}
.pg-contact .cform .field{position:relative;display:block}
.pg-contact .cform .field input,.pg-contact .cform .field textarea{display:block;min-height:60px;padding:1.5em 2.8em .42em 1em;line-height:1.4}
.pg-contact .cform .field textarea{min-height:176px;padding-top:1.75em;line-height:1.6}
.pg-contact .cform .field>span{position:absolute;left:1.05em;top:1.15em;z-index:1;max-width:calc(100% - 3.4em);overflow:hidden;color:var(--ink2);font-size:16px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;transform-origin:left top;transition:transform .28s var(--out),color .2s}
.pg-contact .cform .field>span em{color:#d9484b}
.pg-contact .cform .field input:focus+span,.pg-contact .cform .field textarea:focus+span,
.pg-contact .cform .field input:not(:placeholder-shown)+span,.pg-contact .cform .field textarea:not(:placeholder-shown)+span,
.pg-contact .cform .fw.is-peek .field>span{transform:translateY(-.78em) scale(.78);font-weight:800}
.pg-contact .cform .field input:focus+span,.pg-contact .cform .field textarea:focus+span{color:var(--blue)}
.pg-contact .cform .field input::placeholder,.pg-contact .cform .field textarea::placeholder{color:transparent;transition:color .25s}
.pg-contact .cform .field input:focus::placeholder,.pg-contact .cform .field textarea:focus::placeholder,.pg-contact .cform .fw.is-peek .field :is(input,textarea)::placeholder{color:var(--ink3)}
.pg-contact .cform .fw.is-bad .field input,.pg-contact .cform .fw.is-bad .field textarea{box-shadow:0 0 0 2px #e5484d}
.pg-contact .cform .fw.is-bad .field>span{color:#b3261e}
.fw__ok{position:absolute;right:15px;top:19px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#18a86b;opacity:0;transform:scale(.4);transition:opacity .25s,transform .4s var(--spring);pointer-events:none}
.fw__ok svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20}
.fw.is-valid .fw__ok{opacity:1;transform:none}
.fw.is-valid .fw__ok svg{stroke-dashoffset:0;transition:stroke-dashoffset .4s .12s var(--out)}
.fw.is-shake .field{animation:cshake .42s var(--out)}
@keyframes cshake{0%,100%{transform:none}20%{transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
.fh{display:grid;grid-template-rows:0fr;margin:0;color:var(--ink2);font-size:13.5px;font-weight:600;line-height:1.45;transition:grid-template-rows .3s var(--out)}
.fh>span{display:block;min-height:0;overflow:hidden;padding:0 4px}
.fh.has{grid-template-rows:1fr}
.fh.has>span{padding-top:7px}
.fw.is-bad .fh{color:#b3261e}
.fw__foot{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fw__foot .fh{flex:1;min-width:0}
.fc{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--ink2);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fc svg{width:20px;height:20px;rotate:-90deg}
.fc circle{fill:none;stroke-width:2.6}
.fc .trk{stroke:#d5dae1}
.fc .prg{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--pc,0));transition:stroke-dashoffset .3s var(--out),stroke .3s}
.fc.is-warn .prg{stroke:#e08a00}
.fc b{color:var(--ink);font-weight:800}
.fc i{font-style:normal}

/* 보내기 */
.cform__btn{min-width:9em}
.cform__btn:disabled::before{content:"";width:1em;height:1em;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:fxspin .7s linear infinite}
.cform.is-err-shake .cform__btn{animation:cshake .42s var(--out)}

/* ── 전송 성공: 체크가 그려지고 마스코트가 끄덕여요 ──── */
.cform__done{display:grid;justify-items:center;gap:14px;padding:clamp(8px,1.4vw,22px) 0 4px;text-align:center}
.cform__done[hidden]{display:none}
.cdone__vis{position:relative;width:min(100%,270px);height:clamp(140px,12vw,176px)}
.cdone__chk{position:absolute;left:4%;top:6%;width:clamp(78px,6.5vw,96px);height:auto;overflow:visible}
.cdone__chk circle{fill:#e3f5ec;stroke:#18a86b;stroke-width:2.4;stroke-dasharray:151;stroke-dashoffset:151}
.cdone__chk path{fill:none;stroke:#18a86b;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.cdone__m{position:absolute;right:2%;bottom:0;width:auto;height:92%;max-width:none;transform-origin:50% 100%}
.is-sent .cdone__chk{animation:cpop2 .6s .1s var(--spring) both}
.is-sent .cdone__chk circle{animation:cdraw .7s .1s var(--out) forwards}
.is-sent .cdone__chk path{animation:cdraw .45s .62s var(--out) forwards}
.is-sent .cdone__m{animation:cnod 1.1s .7s var(--out) 2,center .6s .1s var(--out) both}
.is-sent .cdone__t{animation:center .6s .45s var(--out) both}
.is-sent .cdone__again{animation:center .6s .75s var(--out) both}
.cdone__t{font-size:clamp(22px,1.9vw,30px);font-weight:800;letter-spacing:-.04em}
@keyframes cdraw{to{stroke-dashoffset:0}}
@keyframes cpop2{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes cnod{0%,100%{transform:none}30%{transform:translateY(7px) rotate(-3deg)}60%{transform:translateY(-2px) rotate(1.5deg)}}
@keyframes center{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cform.is-sent .cform__fields{grid-template-rows:0fr;opacity:0;pointer-events:none}
.cform.is-sent .cform__fin{overflow:hidden;visibility:hidden;transition:visibility 0s .65s}
.cform.is-sent .cform__btn{display:none}
.cform.is-sent .cform__p{display:none}

/* ── 전화 카드: 맥박 · 번호 복사 · 상담 시간 ───────── */
.pg-contact .cinfo__tel{position:relative;gap:.2em;overflow:hidden}
.pg-contact .cinfo__num b{font-size:clamp(34px,3.5vw,62px)}
.cinfo__num{display:block;width:fit-content;color:inherit}
.cinfo__num::after{content:"";position:absolute;inset:0;z-index:1}
.cinfo__num:focus-visible{outline:0}
.cinfo__num:focus-visible::after{outline:3px solid var(--wave);outline-offset:-6px;border-radius:var(--r3)}
.cinfo__ph{position:absolute;right:clamp(20px,2.2vw,36px);top:clamp(20px,2.2vw,34px);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,216,77,.16)}
.cinfo__ph svg{width:22px;height:22px;fill:none;stroke:var(--wave);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 60%;animation:crng 5.5s ease-in-out infinite}
.cinfo__ph i{position:absolute;inset:0;border:2px solid var(--wave);border-radius:50%;opacity:0;animation:cpulse 3s ease-out infinite}
.cinfo__ph i+i{animation-delay:1.3s}
.cinfo__tel:hover .cinfo__ph i,.cinfo__tel.is-off .cinfo__ph i,.cinfo__tel.is-off .cinfo__ph svg{animation-play-state:paused}
@keyframes cpulse{0%{opacity:.55;transform:scale(1)}80%,100%{opacity:0;transform:scale(2.1)}}
@keyframes crng{0%,82%,100%{transform:none}86%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}94%{transform:rotate(-8deg)}97%{transform:rotate(4deg)}}
.cinfo__copy{position:relative;z-index:2;justify-self:start;height:38px;margin-top:12px;padding:0 16px;border:0;border-radius:11px;background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s,transform .2s var(--out)}
.cinfo__copy:hover{background:rgba(255,255,255,.24)}
.cinfo__copy[hidden]{display:none}
.cinfo__copy.is-done{background:var(--wave);color:var(--ink)}
.cinfo__copy:focus-visible{outline-color:#fff}
.chrs{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.chrs[hidden]{display:none}
.chrs__s{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;color:#fff;font-size:15px}
.chrs__dot{flex:none;width:10px;height:10px;border-radius:50%;background:#9aa6c4}
.pg-contact .chrs__s b{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.4}
.chrs__s span{color:#c3cad6;font-size:14px;font-weight:600}
.chrs__bar{position:relative;height:8px;border-radius:8px;background:rgba(255,255,255,.14)}
.chrs__a,.chrs__b{position:absolute;top:0;bottom:0;border-radius:8px;background:rgba(61,220,151,.6)}
.chrs__a{left:9.09%;width:22.73%}
.chrs__b{left:40.91%;width:50%}
.chrs__now{position:absolute;top:50%;left:var(--now,0%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22);transition:left .8s var(--out),opacity .3s}
.chrs__lb{position:relative;height:16px;color:#b6bfd3;font-size:12px;font-weight:700}
.chrs__lb span{position:absolute;left:var(--l);transform:translateX(-50%);white-space:nowrap}
.chrs[data-state="open"] .chrs__dot{background:#3ddc97;animation:cblink 2.2s ease-in-out infinite}
.chrs[data-state="lunch"] .chrs__dot{background:#ffb84d}
.chrs[data-state="closed"] :is(.chrs__a,.chrs__b){opacity:.4}
.chrs[data-state="weekend"] :is(.chrs__a,.chrs__b){opacity:.25}
.chrs[data-state="weekend"] .chrs__now,.chrs[data-state="off"] .chrs__now{opacity:0}
.cinfo__tel.is-off .chrs__dot{animation-play-state:paused}
@keyframes cblink{0%,100%{box-shadow:0 0 0 0 rgba(61,220,151,.6)}60%{box-shadow:0 0 0 7px rgba(61,220,151,0)}}

/* ── 좁은 화면 · 모션 줄이기 ───────────────────────── */
@media (max-width:1023px){
  .pg-contact .pg-hero__vis{min-height:clamp(330px,52vw,460px)}
}
@media (max-width:640px){
  .pg-contact .pg-hero__vis{display:flex;flex-direction:column;align-items:center;min-height:0;padding:22px 16px 0}
  .cth{position:static;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
  .cth__b{position:static;max-width:none;width:100%;justify-items:stretch}
  .cth__b li:nth-child(even){margin-left:0}
  .cth__bub{display:flex;width:100%;justify-content:space-between;animation:none}
  .cth__m{position:static;height:210px;margin-top:2px}
  .pg-contact .cform .field input,.pg-contact .cform .field textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .cth__m,.cth__bub,.cinfo__ph svg,.cinfo__ph i{animation:none}
  .cinfo__ph i{display:none}
  .is-sent .cdone__chk circle,.is-sent .cdone__chk path{stroke-dashoffset:0}
  .is-sent .cdone__chk,.is-sent .cdone__t,.is-sent .cdone__again,.is-sent .cdone__m{animation:none}
}