/* 빠른상담 레이어 - 다크/화이트 테마 지원 (PC/모바일 반응형)
   QuickFormUser::renderFields() 마크업(qc-row, qc-row-타입, qc-required, qc-help-btn, qc-help)에 맞춘 CSS.
   모든 클래스는 qc- 접두어를 사용해 사이트 CSS 와 충돌하지 않게 했습니다. */
/* ===== 색상 테마: .qc 의 data-theme="dark"(기본) | "light" =====
   색은 모두 아래 변수로만 지정합니다. 새 테마가 필요하면 .qc[data-theme="이름"] 블록을 추가하세요. */
.qc,.qc[data-theme="dark"]{--qc-surface:#1b262b;--qc-head:#202e34;--qc-input:#1e2a30;--qc-ink:#f4f7f8;--qc-muted:#a9b7c0;--qc-line:#34434a;--qc-soft:#26353b;--qc-border:#2c3b42;
  --qc-accent:#18a58a;--qc-accent2:#1fbf9f;--qc-accent-text:#1fbf9f;--qc-warn:#ff7a6b;--qc-ok:#5fd4b6;--qc-caution:#f0b04a;
  --qc-placeholder:#7f909a;--qc-check:#4a5c64;--qc-help-bg:#162025;--qc-close-hover:#31444b;--qc-handle:#46585f;
  --qc-scrim:rgba(6,12,15,.36);--qc-scrim-m:rgba(6,12,15,.6);--qc-shadow:0 24px 70px rgba(4,10,12,.6);--qc-toggle-shadow:0 10px 28px rgba(8,20,24,.45)}
.qc[data-theme="light"]{--qc-surface:#fff;--qc-head:#f5f8fa;--qc-input:#f6f8fa;--qc-ink:#1d2b32;--qc-muted:#66767f;--qc-line:#dde4e9;--qc-soft:#eaeff3;--qc-border:#e1e7eb;
  --qc-accent-text:#0e8a72;--qc-warn:#d6402f;--qc-ok:#0e8a72;--qc-caution:#b76e00;
  --qc-placeholder:#98a5ad;--qc-check:#b6c3ca;--qc-help-bg:#f4f7f9;--qc-close-hover:#dde5ea;--qc-handle:#cdd7dd;
  --qc-scrim:rgba(16,28,34,.32);--qc-scrim-m:rgba(16,28,34,.5);--qc-shadow:0 24px 60px rgba(20,42,52,.2);--qc-toggle-shadow:0 10px 26px rgba(20,60,50,.3)}

.qc{--qc-btn:56px;--qc-gap:24px;
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:14px;line-height:1.5;color:var(--qc-ink);text-align:left}
.qc *,.qc *::before,.qc *::after{box-sizing:border-box}
html.qc-lock{overflow:hidden}

/* 열기/닫기 버튼: 우측 하단 고정 알약형 */
.qc-toggle{position:fixed;z-index:9999;right:var(--qc-gap);bottom:calc(var(--qc-gap) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:10px;height:var(--qc-btn);margin:0;padding:0 22px 0 16px;border:0;border-radius:999px;
  background:linear-gradient(135deg,var(--qc-accent2),#12907a);color:#fff;font-family:inherit;font-size:15px;font-weight:700;line-height:1;letter-spacing:-.2px;cursor:pointer;
  box-shadow:var(--qc-toggle-shadow),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .15s,filter .2s,opacity .2s}
.qc-toggle:hover{filter:brightness(1.08)}
.qc-toggle:active{transform:scale(.96)}
.qc-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.qc:not(.is-open) .qc-toggle::before{content:"";position:absolute;inset:0;border-radius:inherit;animation:qcPulse 2.8s ease-out infinite}
@keyframes qcPulse{0%{box-shadow:0 0 0 0 rgba(24,165,138,.55)}70%,100%{box-shadow:0 0 0 18px rgba(24,165,138,0)}}
.qc-toggle__icon{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2)}
.qc-toggle__icon svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s,transform .25s}
.qc-toggle .i-x{opacity:0;transform:rotate(-90deg)}
.qc.is-open .i-chat{opacity:0;transform:rotate(90deg)}
.qc.is-open .i-x{opacity:1;transform:none}

/* 배경 어둡게 */
.qc-scrim{position:fixed;inset:0;z-index:9997;background:var(--qc-scrim);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.qc.is-open .qc-scrim{opacity:1;visibility:visible;transition:opacity .25s}

/* 패널 */
.qc-panel{position:fixed;z-index:9998;right:var(--qc-gap);bottom:calc(var(--qc-gap) + var(--qc-btn) + 14px + env(safe-area-inset-bottom,0px));
  width:400px;max-width:calc(100vw - var(--qc-gap) * 2);max-height:calc(100vh - var(--qc-gap) * 2 - var(--qc-btn) - 14px);max-height:calc(100dvh - var(--qc-gap) * 2 - var(--qc-btn) - 14px);
  overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--qc-border);border-radius:20px;
  background:linear-gradient(180deg,var(--qc-head) 0,var(--qc-surface) 130px);box-shadow:var(--qc-shadow);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transform-origin:bottom right;transition:opacity .22s,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s}
.qc.is-open .qc-panel{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .28s cubic-bezier(.2,.8,.2,1)}
.qc-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 22px 16px 24px;background:var(--qc-head);border-bottom:1px solid var(--qc-line)}
.qc-title{margin:0;padding:0;border:0;font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.5px;color:var(--qc-ink)}
.qc-title::after{content:"";display:block;width:26px;height:3px;margin-top:9px;border-radius:2px;background:var(--qc-accent)}
.qc-sub{margin:9px 0 0;font-size:12.5px;color:var(--qc-muted)}
.qc-close{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;background:var(--qc-soft);color:var(--qc-ink);cursor:pointer;transition:background .2s}
.qc-close:hover{background:var(--qc-close-hover)}
.qc-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.qc-form{margin:0;padding:20px 24px 24px}

/* 항목 (라벨 위 / 입력 아래) */
.qc-row{display:flex;flex-direction:column;gap:7px;margin:0 0 15px;padding:0}
.qc-row > label:first-child{margin:0;padding:0;font-size:13px;font-weight:700;line-height:1.3;color:var(--qc-ink)}
.qc-row.qc-required:not(.qc-row-checkbox) > label:first-child::after{content:" *";color:var(--qc-warn)}
.qc-row input[type=text],.qc-row input[type=tel],.qc-row select,.qc-row textarea{display:block;width:100%;min-height:48px;margin:0;padding:12px 14px;border:1px solid var(--qc-line);border-radius:12px;
  background:var(--qc-input);color:var(--qc-ink);font-family:inherit;font-size:15px;line-height:1.4;outline:0;transition:border-color .15s,box-shadow .15s}
.qc-row textarea{min-height:108px;resize:vertical}
.qc-row input[type=text]:focus,.qc-row input[type=tel]:focus,.qc-row select:focus,.qc-row textarea:focus{border-color:var(--qc-accent);box-shadow:0 0 0 3px rgba(24,165,138,.2)}
.qc ::placeholder{color:var(--qc-placeholder);opacity:1}
.qc-select{position:relative;display:block}
.qc-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:42px;background-image:none}
.qc-select::after{content:"";position:absolute;top:50%;right:18px;width:8px;height:8px;margin-top:-6px;border:solid var(--qc-muted);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.qc-row select option{background:var(--qc-input);color:var(--qc-ink)}

/* 동의 체크박스 */
.qc-row.qc-row-checkbox{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px}
.qc-row.qc-row-checkbox > label:first-child{display:flex;flex:1 1 auto;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--qc-ink);cursor:pointer}
.qc-row-checkbox > label::after{font-size:12px;font-weight:700;color:var(--qc-muted)}
.qc-row-checkbox.qc-required > label::after{content:"(필수)";color:var(--qc-accent-text)}
.qc-row-checkbox:not(.qc-required) > label::after{content:"(선택)"}
.qc-row-checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-content:center;width:20px;height:20px;margin:0;padding:0;border:1px solid var(--qc-check);border-radius:6px;background:var(--qc-input);cursor:pointer;transition:background .15s,border-color .15s}
.qc-row-checkbox input[type=checkbox]::after{content:"";width:5px;height:10px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .12s}
.qc-row-checkbox input[type=checkbox]:checked{background:var(--qc-accent);border-color:var(--qc-accent)}
.qc-row-checkbox input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1)}
.qc-row-checkbox input[type=checkbox]:focus-visible{outline:2px solid var(--qc-accent2);outline-offset:2px}
.qc-help-btn{flex:none;margin:0;padding:4px 2px;border:0;background:none;color:var(--qc-accent-text);font-family:inherit;font-size:12.5px;line-height:1.2;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qc-help{flex:1 0 100%;max-height:140px;overflow:auto;padding:12px 14px;border:1px solid var(--qc-line);border-radius:10px;background:var(--qc-help-bg);color:var(--qc-muted);font-size:12.5px;line-height:1.7}
.qc-help[hidden]{display:none}

/* 전송 버튼 / 안내 */
.qc-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;margin:18px 0 0;padding:0;border:0;border-radius:12px;
  background:linear-gradient(135deg,var(--qc-accent2),#12907a);color:#fff;font-family:inherit;font-size:16px;font-weight:700;line-height:1;cursor:pointer;
  box-shadow:0 8px 22px rgba(24,165,138,.28);transition:filter .2s,transform .15s}
.qc-submit svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.qc-submit:hover{filter:brightness(1.08)}
.qc-submit:hover svg{transform:translateX(3px)}
.qc-submit:disabled{opacity:.65;cursor:default}
.qc-notice{margin:12px 0 0;min-height:20px;text-align:center;font-size:12.5px;line-height:1.6;color:var(--qc-caution);white-space:pre-line}
.qc-notice.is-ok{color:var(--qc-ok)}
.qc-notice.is-error{color:var(--qc-warn)}
.qc-fine{margin:6px 0 0;text-align:center;font-size:11px;color:var(--qc-placeholder)}

/* 모바일: 하단 시트 */
@media (max-width:640px){
  .qc{--qc-gap:16px}
  .qc-scrim{background:var(--qc-scrim-m)}
  .qc-panel{left:0;right:0;bottom:0;width:auto;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:24px 24px 0 0;transform:translateY(105%);transform-origin:bottom center;padding-bottom:env(safe-area-inset-bottom,0px)}
  .qc-head{padding:24px 18px 14px 20px;border-radius:24px 24px 0 0}
  .qc-head::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:var(--qc-handle)}
  .qc-form{padding:18px 20px 22px}
  .qc.is-open .qc-toggle{opacity:0;pointer-events:none;transform:scale(.9)}
  .qc-row input[type=text],.qc-row input[type=tel],.qc-row select,.qc-row textarea{font-size:16px} /* iOS 자동 확대 방지 */
}
@media (prefers-reduced-motion:reduce){.qc-panel,.qc-toggle,.qc-scrim{transition:none}.qc:not(.is-open) .qc-toggle::before{animation:none}}