/* 상담 신청: 오른쪽 빠른 버튼 + 신청 패널(넓은 화면은 오른쪽, 모바일은 아래 시트) + 맨 아래 신청 섹션.
   박성호 2026-10-23 "문의는 PC에서 우측 퀵, 모바일에서는 계속 따라다니는 무언가로" */

/* 빠른 버튼: 모바일은 하단 바가 맡으므로 숨긴다 */
.quick { display: none; }
@media (min-width: 861px) {
  .quick {
    position: fixed;
    right: 20px;
    top: 50%;
    z-index: 30;
    display: grid;
    gap: 8px;
    transform: translateY(-50%);
  }
  .quick__btn {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    width: 80px;
    height: 80px;
    padding: 0;
    border: 1px solid #2f2f2f;
    border-radius: 50%;
    background: rgba(22, 22, 22, .92);
    color: var(--ink-text);
    font: 800 15px/1.25 var(--font-body);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6);
    transition: transform .2s ease, border-color .2s ease;
  }
  .quick__btn:hover { transform: translateY(-2px); border-color: #555; }
  .quick__btn--main { width: 88px; height: 88px; background: var(--blue); border-color: var(--blue); color: #fff; font-size: 17px; }
  .quick__btn .ico { width: 20px; height: 20px; }
  .quick__btn .ico--kakao { width: 24px; height: 24px; }
  .quick__btn--top { font-size: 13px; color: var(--ink-sub); }
}
/* 본문 오른쪽 여백이 좁은 PC에서는 오른쪽 아래 버튼 하나만 */
@media (min-width: 861px) and (max-width: 1359px) {
  .quick { top: auto; bottom: 24px; transform: none; }
  .quick__btn:not(.quick__btn--main) { display: none; }
}

/* 신청 패널 */
.inq {
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}
.inq::backdrop { background: rgba(10, 10, 10, .45); }
.inq[open] { animation: inq-in-side .32s cubic-bezier(.2, .8, .2, 1); }
.inq.is-closing { animation: inq-out-side .22s ease forwards; }
@keyframes inq-in-side { from { transform: translateX(100%); } }
@keyframes inq-out-side { to { transform: translateX(100%); } }
@media (min-width: 861px) {
  .inq { position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); height: 100vh; max-height: 100vh; max-width: none; box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .5); }
}
@media (max-width: 860px) {
  .inq { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 90vh; border-radius: 20px 20px 0 0; }
  .inq[open] { animation-name: inq-in-up; }
  .inq.is-closing { animation-name: inq-out-up; }
  @keyframes inq-in-up { from { transform: translateY(100%); } }
  @keyframes inq-out-up { to { transform: translateY(100%); } }
}
html.inq-open { overflow: hidden; }

.inq__body { position: relative; padding: 40px 32px calc(32px + env(safe-area-inset-bottom)); }
.inq__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #eeebe3; cursor: pointer; }
.inq__close::before, .inq__close::after { content: ""; position: absolute; left: 12px; right: 12px; top: 19px; height: 2px; background: var(--ink); transform: rotate(45deg); }
.inq__close::after { transform: rotate(-45deg); }
.inq__kicker { margin: 0 0 10px; font-weight: 700; font-size: 15px; color: var(--blue); }
.inq__title { margin: 0; font-family: var(--font-head); font-weight: 900; font-size: 30px; line-height: 1.28; letter-spacing: -0.035em; }
.inq__lead { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: #4a4a46; }

.inq__form { margin-top: 24px; }
.inq__field { display: block; margin: 0 0 14px; padding: 0; border: 0; }
.inq__field > span, .inq__field legend { display: block; margin-bottom: 7px; padding: 0; font-weight: 800; font-size: 16px; }
.inq__field b { margin-left: 4px; font-weight: 700; font-size: 13px; color: var(--pen); }
.inq__field small { margin-left: 4px; font-weight: 500; font-size: 13px; color: var(--paper-sub); }
.inq__field input, .inq__field textarea {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1.5px solid #c9c4b8;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
}
.inq__field textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.inq__field input:focus, .inq__field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 91, 255, .16); }
.inq__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inq__chips legend { width: 100%; }
.inq__chips label { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border: 1.5px solid #c9c4b8; border-radius: 999px; background: #fff; font-weight: 700; font-size: 16px; cursor: pointer; }
.inq__chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.inq__chips label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
.inq__chips label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.inq__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inq__agree { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; font-size: 15px; line-height: 1.5; }
.inq__agree input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.inq__agree b { font-size: 13px; color: var(--pen); }
.inq__agree small { font-size: 13px; color: var(--paper-sub); }
.inq__agree--opt { margin-top: 10px; }
.inq__more { margin: 6px 0 0 30px; font-size: 15px; color: var(--paper-sub); }
.inq__more summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; width: max-content; }
.inq__more dl { margin: 8px 0 0; }
.inq__more div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 4px 0; }
.inq__more dt { font-weight: 700; color: #4a4a46; }
.inq__more dd { margin: 0; }
.inq__error { margin: 12px 0 0; font-weight: 700; font-size: 15px; color: var(--pen); }
.inq__submit { width: 100%; height: 60px; margin-top: 18px; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font: 800 19px var(--font-body); cursor: pointer; }
.inq__submit:hover { background: #2349e0; }
.inq__submit:disabled { opacity: .7; cursor: default; }
.inq__done { margin: 14px 0 0; padding: 14px 16px; border-radius: 10px; background: #eaf0ff; font-weight: 700; font-size: 16px; line-height: 1.6; }
.inq__alt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--paper-line); }
.inq__alt p { grid-column: 1 / -1; margin: 0 0 4px; font-weight: 700; font-size: 15px; color: #4a4a46; }
.inq__alt a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); font-weight: 800; font-size: 17px; text-decoration: none; }
.inq__alt a:hover { background: var(--ink); color: #fff; }

/* 10. 맨 아래 신청 */
.closing { padding: clamp(88px, 11vw, 150px) var(--gutter) clamp(96px, 12vw, 170px); background: var(--ink); color: var(--ink-text); text-align: center; }
.closing__inner { max-width: 760px; margin: 0 auto; }
.closing__title { margin: 0; font-family: var(--font-head); font-weight: 900; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.22; letter-spacing: -0.04em; text-wrap: balance; }
.closing__lead { margin: 18px 0 0; font-size: 19px; color: #c9c9c4; }
.closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.closing__main { height: 66px; padding: 0 40px; border: 0; border-radius: 14px; background: var(--blue); color: #fff; font: 800 19px var(--font-body); cursor: pointer; }
.closing__main:hover { background: #2349e0; }
.closing__sub { display: inline-flex; align-items: center; gap: 10px; height: 66px; padding: 0 30px; border: 1.5px solid #555; border-radius: 14px; font-weight: 800; font-size: 19px; text-decoration: none; }
.closing__sub:hover { border-color: #666; }
@media (max-width: 860px) {
  .closing__main, .closing__sub { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .inq[open], .inq.is-closing { animation: none; }
}
.quick, .dock { transition: transform .25s ease, opacity .25s ease; }
.at-closing .quick { opacity: 0; pointer-events: none; }
@media (max-width: 860px) { .at-closing .dock { transform: translateY(110%) !important; } }