/* VERO SHOP — contact / inquiries page styling. */

/* ── floating label ──────────────────────────────────────────────────
   .field--floating 만 영향. 일반 .field 는 main.css 의 stacked layout 유지.
   동작
     - 휴식 상태: 라벨이 입력 영역 내부 중앙에 자리.
     - 포커스 또는 값 채워짐: 라벨이 위로 올라가며 작은 캡스로 축약.
   요구
     - 입력에 placeholder=" "(공백 한 칸) 필요. :not(:placeholder-shown) 가
       사용자의 입력 여부를 판별하기 위함. 보이는 placeholder 가 떠 있으면
       라벨과 겹치므로 공백을 권장.
     - <select> 는 항상 값을 갖기에 floating 으로 두지 않는다. 일반 .field
       유지 또는 .field--floating.field--filled 로 영구 raised 상태.
   브라우저
     - :has() 사용 — Safari 15.4+, Chrome 105+, Firefox 121+. 2026 기준 OK.
*/
.field--floating {
  position: relative;
  display: block;
  padding: 0;
}
.field--floating .field__label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  margin: 0;
  padding: 0 6px;
  background: var(--paper-2);
  font: 500 13px/1 var(--font-sans);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gray-500);
  transition:
    top var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)),
    transform var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)),
    font-size var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)),
    letter-spacing var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)),
    color var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
/* textarea 는 첫 줄 위에 라벨이 앉도록 — 세로중앙 X. */
.field--floating:has(.field__area) .field__label {
  top: 18px;
  transform: none;
}
/* raised — focus 또는 값이 있을 때 (placeholder 가 더 이상 보이지 않을 때). */
.field--floating:has(.field__input:focus) .field__label,
.field--floating:has(.field__input:not(:placeholder-shown)) .field__label,
.field--floating:has(.field__area:focus) .field__label,
.field--floating:has(.field__area:not(:placeholder-shown)) .field__label,
.field--floating.field--filled .field__label {
  top: 0;
  transform: translateY(-50%);
  font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
/* textarea 의 raised 도 동일 위치 — translateY(-50%) 로 입력 테두리에 걸침. */
.field--floating:has(.field__area:focus) .field__label,
.field--floating:has(.field__area:not(:placeholder-shown)) .field__label {
  top: 0;
}

/* placeholder 자체는 라벨이 가리는 동안 보이면 안 됨 — 투명 처리. */
.field--floating .field__input::placeholder,
.field--floating .field__area::placeholder {
  color: transparent;
}
.field--floating .field__input:focus::placeholder,
.field--floating .field__area:focus::placeholder {
  color: var(--gray-400);
}

/* prefers-reduced-motion — 즉시 정착. */
@media (prefers-reduced-motion: reduce) {
  .field--floating .field__label {
    transition: none;
  }
}


.contact__modes {
  display: inline-flex; gap: 4px;
  border: var(--rule);
  padding: 4px;
  background: var(--paper-2);
}
.contact__mode {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-600);
  cursor: pointer;
  border-radius: 0;
}
.contact__mode.is-active {
  background: var(--ink); color: var(--paper-2);
}

.contact__row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .contact__row2 { grid-template-columns: 1fr; }
}

.contact__filebox {
  display: flex; flex-direction: column; gap: 8px;
}
.contact__attachList {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.contact__attachList .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  font: 500 12px/1 var(--font-mono);
  color: var(--ink);
}
.contact__attachList .pill button {
  appearance: none;
  border: 0; background: transparent;
  color: var(--gray-500); cursor: pointer;
  padding: 0; font-size: 14px; line-height: 1;
}

.contact__consent {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  cursor: pointer;
}
.contact__consent input[type=checkbox] {
  margin-top: 3px;
  width: 16px; height: 16px;
}
.contact__consent b { font-weight: 700; }

.contact__err {
  min-height: 20px;
  font: 500 12px/1.4 var(--font-mono);
  color: #A83131;
}

/* History list */
.contact__historyList {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.contact__hRow {
  display: grid;
  grid-template-columns: 110px 80px 80px 1fr 140px;
  gap: 12px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  background: transparent;
  text-align: left;
  appearance: none;
  border-left: 0; border-right: 0; border-top: 0;
  color: var(--ink);
}
.contact__hRow:hover { background: var(--paper-2); }
.contact__hRow--answered { color: var(--gray-500); }
.contact__hRow .num { font: 700 11px/1 var(--font-mono); }
.contact__hRow .status {
  display: inline-block; padding: 2px 6px;
  border: 1px solid var(--line);
  font: 700 10px/1.4 var(--font-mono);
  background: var(--paper-2);
}
.contact__hRow .status--pending  { background: #FFF8E6; border-color: #D8B985; color: #6A4A1F; }
.contact__hRow .status--answered { color: var(--gray-500); }
.contact__hRow .type { font: 500 11px/1.3 var(--font-sans); color: var(--gray-600); }
.contact__hRow .title { font: 500 14px/1.4 var(--font-sans); }
.contact__hRow .date { font: 500 11px/1 var(--font-mono); color: var(--gray-500); text-align: right; }

/* Detail panel (inline expand) */
.contact__hDetail {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper-2);
  display: flex; flex-direction: column; gap: 12px;
}
.contact__hDetail h4 {
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin: 0;
}
.contact__hDetail p { white-space: pre-wrap; margin: 0; font: 500 13px/1.5 var(--font-sans); }
.contact__hDetail .ans { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.contact__hDetail .att {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.contact__hDetail .att a {
  display: inline-flex; padding: 4px 8px;
  border: 1px solid var(--line); background: var(--paper);
  font: 500 11px/1 var(--font-mono); color: var(--ink);
  text-decoration: none;
}

.empty {
  padding: 32px 16px; text-align: center;
  color: var(--gray-500);
  font: 500 13px/1.5 var(--font-sans);
}