/* 상품문의 페이지 전용 스타일 — 2026.10 리뉴얼
   회사소개(introduce/company.css)와 같은 색·글꼴·여백 기준. 색은 변수로만 씀(나중에 다크 모드는 값만 바꿈) */
:root{
  --primary:#0085f5; --primary-h:#006ecb; --primary-off:#9fcfff; --weak-bg:#e8f3ff; --weak-fg:#0067c2;
  --title:#111; --fg:#191f28; --body:#4e5968; --muted:#8b95a1; --hint:#b0b8c1;
  --canvas:#fff; --soft:#f7f8fa; --card:#fff; --border:#e5e8eb; --input:#d1d6db;
  --danger:#e5484d;
  --r:8px; --rc:16px;
  --font:"Pretendard Variable","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
}

/* ===== 사이트 공통 CSS(basic.css · supportBasic.css)와 함께 쓰기 위한 보정 ===== */
#header{height:56px!important;margin-bottom:0!important}               /* 옛 서브페이지 배너(366px) 없이 상단 메뉴 바만 */
#header{position:sticky!important;top:0;z-index:1000;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
#header.hd-up{transform:translateY(-100%)}                              /* 아래로 스크롤하면 숨고 위로 올리면 나타남 (js/qna-fx.js) */
:where(#cp),:where(#cp) *,:where(#cp) *::before,:where(#cp) *::after{box-sizing:border-box}
:where(#cp) a{display:inline;width:auto;height:auto;color:inherit;text-decoration:none}
:where(#cp) h1{position:relative;left:auto;top:auto;z-index:auto}       /* supportBasic.css 의 h1(로고용) 위치 무력화 */
:where(#cp) :is(h1,h2,h3,h4,p,ul,li){margin:0;padding:0}
:where(#cp) :is(h1,h2,h3,h4){font-size:inherit;font-weight:inherit}
:where(#cp) li{list-style:none}
#cp{background:var(--canvas);text-align:left;color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:clip}
#cp :focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.w{max-width:1280px;margin:0 auto;padding-inline:40px}
.m-br{display:none}
/* Lenis 부드러운 스크롤 */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}

/* ===== 히어로: 흰색 → 연파랑, 폼이 빨리 보이도록 낮게 ===== */
.qh{position:relative;background:var(--canvas)}   /* 20261105: 그라데이션 → 흰 단색 */

.qh-in{position:relative;z-index:1;padding-block:96px 64px}
.qh-lab{font-size:16px;font-weight:500;color:var(--body);letter-spacing:-.02em;margin-bottom:14px!important}
.qh-t{font-size:48px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--title)}
.qh-s{margin-top:18px!important;font-size:22px;font-weight:400;line-height:1.5;color:var(--body)}
/* 문구 등장 (js가 html.qfx → html.qfx-in 을 붙임. 스크립트가 없으면 처음부터 보임) */
.qfx .qh-t,.qfx .qh-s{opacity:0;translate:0 16px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1)}
.qfx .qh-s{transition-delay:.12s}
.qfx-in .qh-t,.qfx-in .qh-s{opacity:1;translate:0 0}

/* ===== 본문: PC는 왼쪽 연락처(따라옴) / 오른쪽 폼, 1024px 이하는 1단 ===== */
.qb{padding-bottom:120px}
.qc-t{font-size:18px;font-weight:700;color:var(--title);margin-bottom:16px!important}
.qc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.qc-i{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:var(--rc);background:var(--soft)}
.qc-n{font-size:15px;font-weight:600;color:var(--body)}
.qc-tel{margin-top:6px;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--title);font-variant-numeric:tabular-nums}
.qc-em{font-size:13px;color:var(--muted);word-break:break-all;transition:color .2s}
.qc-tel:not([href]),.qc-em:not([href]){cursor:text;user-select:text}   /* PC에서는 링크를 빼서 일반 글자 (js/qna-fx.js) */
.qc-time{margin-top:14px!important;font-size:14px;color:var(--muted)}
.qf{margin-top:56px}
@media(min-width:1025px){
  .qb{display:grid;grid-template-columns:340px minmax(0,1fr);gap:64px;align-items:start}
  .qc{position:sticky;top:96px}
  .qc-list{grid-template-columns:1fr;gap:0;border-top:2px solid var(--fg)}
  .qc-i{padding:22px 4px;border-radius:0;background:none;border-bottom:1px solid var(--border)}
  .qc-n{font-size:15px}
  .qc-tel{font-size:24px}
  .qc-em{font-size:15px}
  .qf{margin-top:0}
}

/* ===== 폼: 회사소개 표처럼 선으로 나눈 행 (왼쪽 항목명 / 오른쪽 입력) ===== */
.q-grp+.q-grp{margin-top:56px}
.q-gt{display:flex;align-items:baseline;padding-bottom:14px;border-bottom:2px solid var(--fg);font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--title)}
.q-opt{margin-left:8px;font-size:14px;font-weight:500;color:var(--muted)}
.q-reqnote{margin-left:auto;font-size:13px;font-weight:400;color:var(--muted)}
.req{color:var(--primary);font-weight:700}
.q-f{min-width:0}
.q-grp .q-f{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border)}
.q-grp .q-f>:not(.q-lab){grid-column:2}
.q-lab{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 4px;margin:0;font-size:15px;font-weight:600;color:var(--fg)}
.q-hint{flex-basis:100%;font-size:12px;font-weight:500;color:var(--muted)}
.q-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.q-full{grid-column:1/-1}
.q-grp .q-f:has(.q-ta){align-items:start}
.q-grp .q-f:has(.q-ta)>.q-lab{padding-top:14px}

/* 입력칸 */
.q-in{display:block;width:100%;height:48px;padding:0 16px;border:1px solid var(--input);border-radius:var(--r);background:var(--card);font:inherit;font-size:16px;color:var(--fg);transition:border-color .2s,box-shadow .2s}
.q-in::placeholder{color:var(--hint)}
.q-in:hover{border-color:var(--muted)}
.q-in:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,133,245,.15)}
.q-ta{height:160px;padding:14px 16px;line-height:1.6;resize:vertical}
.q-sel{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b95a1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center/12px no-repeat}

/* 체크박스: 테두리 상자 없이 네모 체크 + 글자 (실제 체크박스는 그대로 두고 화면에서만 감춤) */
.q-prd{display:flex;flex-direction:column;gap:10px}
.q-cat{display:grid;grid-template-columns:80px 1fr;gap:16px;align-items:start}
.q-cat-n{padding-top:2px!important;font-size:13px;font-weight:500;color:var(--muted)}
.q-chips{display:flex;flex-wrap:wrap;gap:10px 20px}
.checkform,.q-chk{position:relative}
.checkform input,.q-chk input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.checkform label,.q-chk label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:400;color:var(--fg);cursor:pointer;user-select:none}
.checkform label::before,.q-chk label::before{content:"";flex:0 0 auto;width:18px;height:18px;border-radius:4px;border:1.5px solid var(--input);background:#fff center/12px no-repeat;transition:background-color .2s,border-color .2s}
.checkform input:checked+label{font-weight:600}
.checkform input:checked+label::before,.q-chk input:checked+label::before{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.checkform input:focus-visible+label,.q-chk input:focus-visible+label{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
@media(hover:hover) and (pointer:fine){.checkform label:hover::before,.q-chk label:hover::before{border-color:var(--muted)}}

/* 개인정보 동의 */
.q-agree{margin-top:32px}
.q-policy{display:block;width:100%;height:180px;border:1px solid var(--border);border-radius:var(--r);background:var(--soft)}
.q-chk{margin-top:14px}
.q-chk+.q-chk{margin-top:10px}
.q-chk label{display:inline-flex;gap:10px}

/* 입력 안내(오류): 팝업 대신 해당 칸 아래 빨간 글씨 */
.q-err{margin-top:8px!important;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--danger)}
.q-err::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--danger);color:#fff;font-size:11px;font-weight:700}
.is-err .q-in,.is-err .q-in:hover,.is-err .q-policy{border-color:var(--danger)}
.is-err .q-in:focus{box-shadow:0 0 0 3px rgba(229,72,77,.15)}
.is-err .checkform label::before{border-color:var(--danger)}

/* 보안 확인 + 상담 신청 버튼: 처음부터 보이고, 보안 확인(Turnstile)이 끝나면 파란색(.is-ready) */
.q-send{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:16px}
.q-send .q-err{justify-content:center}
#crinity-verify-area:empty{display:none}
.q-btn{display:block!important;width:100%!important;max-width:360px;height:56px!important;line-height:56px;border-radius:var(--r);background:var(--primary-off);color:#fff!important;font-size:17px;font-weight:700;text-align:center;cursor:default;transition:background .2s,transform .1s}
.q-btn.is-ready{background:var(--primary);cursor:pointer}
.q-btn.is-ready:hover{background:var(--primary-h)}
.q-btn.is-ready:active{transform:scale(.99)}

/* 전송 중 화면 */
.mask{position:fixed;inset:0;z-index:2000;display:none;background:rgba(17,24,39,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.mask>div{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(88vw,340px);padding:32px 24px;border-radius:var(--rc);background:#fff;box-shadow:0 20px 50px rgba(17,24,39,.2);text-align:center;font-family:var(--font)}
.mask>div>img{display:block;width:72px;height:auto;margin:0 auto 12px}
.mask>div>p{font-size:16px;font-weight:600;line-height:1.6;color:var(--fg)}

/* ===== 반응형 ===== */
@media(hover:hover) and (pointer:fine){.qc-tel[href]:hover,.qc-em[href]:hover{color:var(--primary)}}
@media(max-width:1279px){.q-grid{grid-template-columns:1fr}}
/* 오른쪽에 떠 있는 공통 퀵메뉴(약 60px)가 폼 끝을 가리지 않도록 */
@media(min-width:1025px) and (max-width:1439px){.qb{padding-right:88px}}
@media(max-width:1024px){
  .qh-in{padding-block:72px 48px}
  .qh-t{font-size:36px}.qh-s{font-size:18px}
}
@media(max-width:700px){
  .w{padding-inline:16px}
  .m-br{display:inline}
  .qh-in{padding-block:48px 32px}
  .qh-lab{font-size:14px;margin-bottom:8px!important}
  .qh-t{font-size:clamp(26px,7.4vw,32px)}
  .qh-s{margin-top:12px!important;font-size:16px;line-height:1.55}
  .qb{padding-bottom:72px}
  .qc-t{font-size:16px;margin-bottom:10px!important}
  .qc-list{grid-template-columns:1fr;gap:8px}
  .qc-i{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 12px;padding:16px 18px;border-radius:12px}
  .qc-n{grid-column:1;font-size:14px}
  .qc-tel{grid-column:2;grid-row:1/3;margin-top:0;font-size:17px}
  .qc-em{grid-column:1}
  .qc-time{margin-top:10px!important;font-size:13px}
  .qf{margin-top:40px}
  .q-grp+.q-grp{margin-top:44px}
  .q-grp .q-f{grid-template-columns:1fr;row-gap:8px;padding:14px 0}
  .q-grp .q-f>:not(.q-lab){grid-column:1}
  .q-grp .q-f:has(.q-ta)>.q-lab{padding-top:0}
  .q-hint{flex-basis:auto;margin-left:6px}
  .q-cat{grid-template-columns:1fr;gap:6px}
  .checkform label{font-size:14px}
  .q-policy{height:160px}
  .q-chk label{font-size:14px;align-items:flex-start}
  .q-chk label::before{margin-top:1px}
  .q-btn{max-width:none}
}
@media(prefers-reduced-motion:reduce){#header{transition:none}#cp *{transition:none!important}}