/* ─────────────────────────────────────────────
   components.css — 버튼 · 로딩 막 · 그레인 · 진행바 · 커서 · 폼
   ───────────────────────────────────────────── */

/* ── BUTTONS ── */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 28px; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  transition: color .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .6s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  transform: translateY(102%); transition: transform .7s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn--lg { height: 62px; padding: 0 34px; font-size: 16px; }

.btn--dark { color: #fff; background: var(--ink); box-shadow: 0 14px 34px -18px rgba(20, 20, 18, .55); }
.btn--dark::before { background: var(--gold); }

.btn--line { color: var(--text); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .5); }
.btn--line::before { background: var(--ink); }
.btn--line:hover { color: #fff; border-color: var(--ink); }

/* 카카오톡 — 한국 손님이 가장 편해하는 통로라 눈에 띄게 둔다 */
.btn--kakao { margin-top: 30px; color: #191600; background: #FEE500; box-shadow: 0 14px 30px -18px rgba(180, 160, 0, .8); }
.btn--kakao::before { background: #191600; }
.btn--kakao:hover { color: #FEE500; }
.btn--kakao svg { width: 20px; height: 20px; }
/* 텔레그램 — 카톡 다음 메신저 통로. 색 규칙상 테두리 버튼(.btn--line)과 같이 쓴다 */
.btn--tg svg { width: 18px; height: 18px; }
.kakao-float {
  position: fixed; right: clamp(16px, 4vw, 28px); bottom: clamp(16px, 4vw, 28px); z-index: 75;
  width: 56px; height: 56px; border-radius: 50%; display: none; place-items: center;
  background: #FEE500; color: #191600; box-shadow: 0 12px 28px -10px rgba(20, 20, 18, .35);
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.kakao-float svg { width: 26px; height: 26px; }
.kakao-float.is-on { opacity: 1; transform: none; }
@media (max-width: 1023px) { .kakao-float { display: grid; } }

/* ── SCROLL PROGRESS ── */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 80; pointer-events: none; }
.progress span { position: absolute; inset: 0; background: var(--gold-grad); transform: scaleX(0); transform-origin: left center; }

/* ── FORM ── */
.chips { border: 0; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chips legend { width: 100%; padding: 0; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--text-2); font-size: 14.5px;
  transition: background-color .45s var(--ease), color .45s, border-color .45s;
  cursor: pointer;
}
.chips label:hover span { border-color: var(--gold-deco); color: var(--text); }
.chips input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.chips input:focus-visible + span { outline: 1px solid var(--gold); outline-offset: 3px; }
.chips--sm span { height: 38px; padding: 0 15px; font-size: 14px; }

.field { position: relative; margin-bottom: 14px; }
.field input, .field textarea {
  width: 100%; display: block;
  padding: 28px 0 12px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0;
  background: transparent; color: var(--text);
  font: inherit; font-size: 17px; letter-spacing: -.01em;
  outline: none; transition: border-color .4s;
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.7; }
.field label {
  position: absolute; left: 0; top: 28px;
  color: var(--text-3); font-size: 16px; pointer-events: none; transform-origin: left top;
  transition: transform .5s var(--ease), color .4s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-24px) scale(.78); color: var(--gold-ink); }
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform .7s var(--ease);
}
.field--area::after { bottom: 7px; }
.field:focus-within::after { transform: scaleX(1); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--warn); }
.field.is-invalid label { color: var(--warn); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.agree { display: flex; gap: 12px; align-items: flex-start; margin: 26px 0 34px; font-size: 13.5px; line-height: 1.65; color: var(--text-3); cursor: pointer; }
.agree input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 18px; height: 18px; margin: 1px 0 0; border: 1px solid var(--line-2); border-radius: 4px; background: #fff;
  display: grid; place-items: center; transition: background-color .3s, border-color .3s;
  cursor: pointer;
}
.agree input::after { content: ""; width: 9px; height: 5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .3s var(--ease); }
.agree input:checked { background: var(--ink); border-color: var(--ink); }
.agree input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.agree.is-invalid input { border-color: var(--warn); }
.agree.is-invalid span { color: var(--warn); }
.agree a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }

.form__status { min-height: 1.7em; margin-top: 18px; font-size: 14.5px; color: var(--gold-ink); }
.form__status.is-error { color: var(--warn); }

/* 메일 앱이 없을 때를 위한 복사용 상자 */
.form__fallback { display: none; margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #FBFAF7; }
.form__fallback.is-on { display: block; }
.form__fallback-title { font-size: 13.5px; color: var(--text-2); margin-bottom: 12px; }
.form__fallback pre { max-height: 190px; overflow: auto; margin: 0; padding: 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-family: var(--f-sans); font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.form__fallback-act { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.form__fallback-act button { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13.5px; font-weight: 600; transition: background-color .4s, color .4s, border-color .4s; }
.form__fallback-act button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.form__fallback-act span { font-size: 13.5px; color: var(--text-2); }

/* ── 움직임 줄이기 ── */
@media (prefers-reduced-motion: reduce) {
  .show { animation: none; }
  html { scroll-behavior: auto; }
}