/* ============================================================
   P&W International — 빠른 상담 신청 (2026 리뉴얼 · 12_tel)
   팝업(dialog.qk-dialog) / 단독 페이지(/contact/quick/) 공용.
   좌표: 시안 1920×1080, 원점 = 좌측 제목 블록 좌상단(시안 x380, y155).
   ============================================================ */
.qk-dialog, .qk-page{ /* renewal.css 를 안 쓰는 페이지(메인 등)에서도 동작하도록 토큰 자체 정의 */
  --u: min(1px, calc(100vw / 1920));
  --ab-sans: 'Pretendard Variable', Pretendard, var(--sans);
  --ab-serif: 'Sandoll MyeongjoNeo1', var(--serif);
}
.qk{
  --qk-ink:#1e1a15; --qk-gray:#606060; --qk-line:#d1d1d1; --qk-point:#c65938;
  position:relative; display:grid; grid-template-columns:calc(529 * var(--u)) calc(613.5 * var(--u)); column-gap:calc(62.5 * var(--u)); align-items:start;
  width:calc(1205 * var(--u)); min-height:calc(757 * var(--u)); color:var(--qk-ink);
  font-family:var(--ab-sans, 'Pretendard Variable', Pretendard, sans-serif);
}

/* ---- 좌측: 제목 + 후기 ---- */
.qk__intro{ min-width:0; }
.qk__title{ margin-top:calc(95.7 * var(--u)); font-family:var(--ab-serif); font-weight:500; font-size:max(26px, calc(56 * var(--u))); line-height:calc(72 / 56); white-space:nowrap; }
.qk__lead{ margin-top:calc(30.7 * var(--u)); font-family:var(--ab-serif); font-size:max(14px, calc(22 * var(--u))); line-height:calc(32 / 22); white-space:nowrap; }

.qk-review{
  position:relative; margin-top:calc(58.6 * var(--u)); width:calc(529 * var(--u)); height:calc(288.6 * var(--u));
  border:1px solid var(--qk-line); border-radius:calc(15 * var(--u)); background:rgba(255,255,255,.8);
  box-shadow:calc(7 * var(--u)) calc(7 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.2);
}
.qk-review__top{ position:absolute; left:calc(43 * var(--u)); right:calc(55 * var(--u)); top:calc(38 * var(--u)); height:calc(30 * var(--u)); display:flex; align-items:center; }
.qk-review__count{ font-weight:300; font-size:max(12px, calc(18 * var(--u))); letter-spacing:.1em; color:var(--qk-gray); white-space:nowrap; }
.qk-review__count b{ font-weight:600; color:var(--qk-ink); }
.qk-review__rule{ width:calc(71 * var(--u)); height:1px; margin-left:calc(21 * var(--u)); background:var(--qk-gray); opacity:.6; }
.qk-review__btn{
  display:grid; place-items:center; width:max(24px, calc(30 * var(--u))); aspect-ratio:1; margin-left:calc(15 * var(--u));
  border:1px solid var(--qk-gray); border-radius:50%; background:transparent; color:var(--qk-ink);
  font-weight:500; font-size:max(11px, calc(17 * var(--u))); line-height:1; transition:background-color .25s var(--ease), color .25s var(--ease);
}
.qk-review__btn[data-dir="-1"]{ margin-left:auto; }
.qk-review__btn:hover{ background:var(--qk-ink); color:#fff; border-color:var(--qk-ink); }
.qk-review__list{ list-style:none; margin:0; padding:0; }
.qk-review__list li{ position:absolute; left:calc(44 * var(--u)); right:calc(30 * var(--u)); top:calc(91.9 * var(--u)); opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; }
.qk-review__list li.is-active{ opacity:1; visibility:visible; }
.qk-review blockquote{ margin:0; font-family:var(--ab-serif); font-size:max(13px, calc(22 * var(--u))); line-height:calc(34 / 22); color:var(--qk-gray); white-space:nowrap; }
.qk-review__who{ margin-top:calc(29 * var(--u)); font-weight:300; font-size:max(12px, calc(18 * var(--u))); letter-spacing:.1em; color:var(--qk-gray); }
.qk-review__who b{ font-weight:600; }

/* ---- 우측: 연락처 폼 ---- */
.qk-form{
  position:relative; margin-top:calc(0.7 * var(--u)); min-height:calc(756.4 * var(--u));
  padding:calc(48 * var(--u)) calc(70 * var(--u)) calc(40 * var(--u)) calc(52.5 * var(--u));
  border-radius:calc(15 * var(--u)); background:#fff; box-shadow:calc(7 * var(--u)) calc(7 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.2);
}
.qk-form__eyebrow{ display:flex; align-items:center; gap:calc(24 * var(--u)); font-weight:300; font-size:max(11px, calc(18 * var(--u))); line-height:1.2; letter-spacing:.2em; color:var(--qk-gray); }
.qk-form__eyebrow::after{ content:""; width:calc(131 * var(--u)); height:1px; background:var(--qk-gray); opacity:.6; }
.qk-form__title{ margin-top:calc(41 * var(--u)); font-weight:600; font-size:max(22px, calc(42 * var(--u))); line-height:1.2; }
.qk-form__desc{ margin-top:calc(11 * var(--u)); font-size:max(13px, calc(24 * var(--u))); line-height:calc(34 / 24); color:var(--qk-gray); }
.qk-form__label{ display:block; margin-top:calc(29 * var(--u)); padding-left:calc(6 * var(--u)); font-weight:600; font-size:max(14px, calc(24 * var(--u))); line-height:1.2; }
.qk-form__input{
  display:block; width:100%; height:calc(67.8 * var(--u)); min-height:44px; margin-top:calc(10 * var(--u)); padding:0 calc(17 * var(--u));
  border:1px solid var(--qk-line); border-radius:calc(6.24 * var(--u)); background:#fff; color:var(--qk-ink);
  font-family:inherit; font-weight:500; font-size:max(16px, calc(28 * var(--u)));
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.qk-form__input::placeholder{ color:#a8a8a8; opacity:1; }
.qk-form__input:focus{ outline:none; border-color:var(--qk-point); box-shadow:0 0 0 1px var(--qk-point); }
.qk-form__input.is-invalid{ border-color:#b50000; }
.qk-form__err{ margin-top:calc(8 * var(--u)); padding-left:calc(6 * var(--u)); font-size:max(12px, calc(17 * var(--u))); color:#b50000; }

.qk-agree{ margin-top:calc(47 * var(--u)); }
.qk-check{ display:flex; align-items:center; gap:calc(15 * var(--u)); padding-left:calc(6 * var(--u)); cursor:pointer; font-size:max(13px, calc(22 * var(--u))); line-height:1.2; color:var(--qk-gray); }
.qk-check input{
  appearance:none; -webkit-appearance:none; flex:none; width:max(18px, calc(24.86 * var(--u))); aspect-ratio:1; margin:0;
  border:1px solid var(--qk-line); border-radius:calc(3 * var(--u)); background:#fff; cursor:pointer; display:grid; place-items:center;
}
.qk-check input:checked{ background:var(--qk-point); border-color:var(--qk-point); }
.qk-check input:checked::after{ content:""; width:28%; height:52%; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-12%) rotate(45deg); }
.qk-check input:focus-visible{ outline:2px solid var(--qk-point); outline-offset:2px; }
.qk-check--all{ padding-bottom:calc(14 * var(--u)); border-bottom:1px solid var(--qk-line); font-weight:600; font-size:max(14px, calc(24 * var(--u))); color:var(--qk-ink); }
.qk-agree__row{ display:flex; align-items:center; justify-content:space-between; margin-top:calc(13 * var(--u)); }
.qk-check--all + .qk-agree__row{ margin-top:calc(21 * var(--u)); }
.qk-agree__view{ padding:0; line-height:1.2; background:none; font-size:max(13px, calc(22 * var(--u))); color:var(--qk-gray); text-decoration:underline; text-underline-offset:.2em; }
.qk-agree__view:hover{ color:var(--qk-ink); }
.qk-agree__text{ margin:calc(8 * var(--u)) 0 calc(4 * var(--u)) calc(46 * var(--u)); padding:calc(12 * var(--u)) calc(14 * var(--u)); background:#f6f4f1; font-size:max(12px, calc(16 * var(--u))); line-height:1.6; color:var(--qk-gray); }

.qk-form__submit{
  display:flex; align-items:center; justify-content:center; gap:.4em; width:100%; height:calc(67.8 * var(--u)); min-height:48px; margin-top:calc(47 * var(--u));
  border-radius:calc(6.24 * var(--u)); background:var(--qk-point); color:#fff; font-family:inherit; font-weight:500; font-size:max(16px, calc(28 * var(--u)));
  transition:background-color .3s var(--ease);
}
.qk-form__submit:hover{ background:#b04b2c; }
.qk-form__submit[disabled]{ opacity:.6; cursor:wait; }
.qk-form__note{ margin-top:calc(18.6 * var(--u)); text-align:center; font-size:max(12px, calc(18 * var(--u))); line-height:1.4; color:var(--qk-gray); }
.qk-form__note.is-done{ color:#214463; }
.qk-form__note.is-error{ color:#b50000; }

/* ---- 팝업 ---- */
.qk-dialog{
  width:calc(1325 * var(--u)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:calc(60 * var(--u));
  margin:auto; border:0; border-radius:calc(20 * var(--u)); background:#e7e1db; overflow:auto; overscroll-behavior:contain;
}
.qk-dialog::backdrop{ background:rgba(30,26,21,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.qk-dialog[open]{ animation:qk-in .4s var(--ease, ease) both; }
@keyframes qk-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.qk-dialog__close{
  position:absolute; right:calc(22 * var(--u)); top:calc(22 * var(--u)); z-index:2; width:max(36px, calc(48 * var(--u))); aspect-ratio:1;
  border-radius:50%; background:transparent; color:var(--qk-ink, #1e1a15); font-size:max(22px, calc(32 * var(--u))); line-height:1;
}
.qk-dialog__close:hover{ background:rgba(30,26,21,.08); }
html.qk-lock, html.qk-lock body{ overflow:hidden; }

/* ---- 단독 페이지 ---- */
.qk-page{ display:flex; justify-content:center; min-height:calc(var(--hdr-h) + 1080 * var(--u)); padding:calc(var(--hdr-h) + 155 * var(--u)) 0 calc(160 * var(--u)); background:#e7e1db; }
.qk-page .qk{ margin-left:calc(45 * var(--u)); } /* 시안: 콘텐츠 x380~1585 → 중앙보다 22.5px 오른쪽 */

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:900px){
  .qk{ width:auto; min-height:0; display:flex; flex-direction:column; align-items:stretch; gap:24px; } /* 261015: 폼 카드도 전폭 (grid용 align-items:start 해제) */
  .qk__intro{ display:contents; }
  .qk__title, .qk__lead, .qk-review, .qk-form, .qk-review__top, .qk-review__list li{ position:static; }
  .qk__title{ order:0; margin-top:0; font-size:26px; white-space:normal; }
  .qk__lead{ order:1; margin-top:-10px; font-size:14px; line-height:1.6; white-space:normal; }
  .qk__lead br, .qk-review blockquote br, .qk-form__desc br{ display:none; }
  .qk-form{ order:2; margin-top:0; width:auto; min-height:0; padding:28px 20px 24px; border-radius:14px; }
  .qk-review{ order:3; margin-top:0; width:auto; height:auto; padding:20px 20px 22px; border-radius:14px; }
  .qk-review__top{ height:auto; }
  .qk-review__list{ display:grid; margin-top:14px; }
  .qk-review__list li{ grid-area:1 / 1; }
  .qk-review blockquote{ white-space:normal; font-size:14.5px; line-height:1.7; }
  .qk-review__who{ margin-top:12px; }
  .qk-form__eyebrow{ gap:14px; }
  .qk-form__title{ margin-top:18px; }
  .qk-form__desc{ font-size:14px; line-height:1.6; }
  .qk-form__label{ margin-top:20px; padding-left:0; }
  .qk-agree{ margin-top:24px; }
  .qk-check{ gap:10px; padding-left:0; }
  .qk-check--all{ padding-bottom:12px; }
  .qk-agree__row, .qk-check--all + .qk-agree__row{ margin-top:12px; }
  .qk-agree__text{ margin-left:28px; }
  .qk-form__submit{ margin-top:24px; }
  .qk-form__note{ margin-top:12px; }

  .qk-dialog{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:56px var(--pad-x, 20px) 32px; border-radius:0; }
  .qk-dialog__close{ right:10px; top:10px; }
  .qk-page{ min-height:0; padding:calc(var(--hdr-h) + 40px) var(--pad-x) 56px; }
  .qk-page .qk{ margin-left:0; width:100%; }
}