/* ===== 추가 필드 ===== */
.board-meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 44px;
  margin:20px 0 32px;
  padding:0 0 20px;
  background:none;
  border:0;
  border-bottom:1px solid var(--c-line);
  border-radius:0;
}

.board-meta__row{
  display:inline-flex;align-items:center;gap:8px;
  margin:0;padding:0;
  border:0;
}

.board-meta__label{
  display:inline-flex;align-items:center;
  margin:0;padding:5px 12px;
  font-size:12px;font-weight:700;line-height:1;
  letter-spacing:-.01em;
  color:#fff;
  background:var(--c-primary);
  border-radius:999px;
  white-space:nowrap;
}

.board-meta__value{
  margin:0;
  font-size:var(--fs-sm);font-weight:600;
  color:var(--c-text);
  white-space:nowrap;
}
.board-meta__value a{color:var(--c-primary);text-decoration:underline}


/* ===== 상세 문의 — 버튼 박스 ===== */
.board-inq{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;
  margin:0 0 32px;
  padding:22px 26px;
  background:var(--c-bg-alt);
  border-radius:var(--radius-lg);
}
.board-inq__title{
  font-family:var(--f-head);
  font-size:var(--fs-h3);font-weight:var(--fw-head);
  color:var(--c-text);
}
.board-inq__desc{
  margin-top:6px;
  font-size:var(--fs-sm);
  color:var(--c-text-sub);
}
.board-inq__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;
  font-size:var(--fs-sm);font-weight:700;
  color:#fff;background:var(--c-primary);
  border:0;border-radius:999px;
  cursor:pointer;
  transition:background var(--tr),gap var(--tr);
}
.board-inq__btn svg{width:17px;height:17px;transition:transform var(--tr)}
.board-inq__btn:hover{background:var(--c-primary-d);gap:12px}
.board-inq__btn:hover svg{transform:translateX(2px)}


/* ===== 상세 문의 — 모달 ===== */
.board-inq__modal{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.board-inq__modal[hidden]{display:none}
.board-inq__dim{position:absolute;inset:0;background:rgba(0,0,0,.55)}

/*
 * ⚠️ dvh — 모바일 주소창이 접히고 펴져도 실제 보이는 높이를 따라간다.
 *    vh 는 주소창을 무시해서 패널 위가 화면 밖으로 잘린다.
 *    dvh 를 모르는 구형 브라우저를 위해 vh 를 먼저 쓴다.
 */
.board-inq__panel{
  position:relative;
  display:flex;flex-direction:column;
  width:100%;max-width:460px;
  max-height:86vh;
  max-height:86dvh;
  overflow:hidden;
  background:var(--c-bg);
  border-radius:var(--radius-lg);
}

.board-inq__head{
  position:relative;
  flex:0 0 auto;
  margin:0;
  padding:26px 28px 18px;
  border-bottom:1px solid var(--c-line);
}
.board-inq__form-name{
  font-family:var(--f-head);
  font-size:var(--fs-h3);font-weight:var(--fw-head);
  color:var(--c-text);
  letter-spacing:-.02em;
}
.board-inq__ref{
  display:inline-flex;align-items:center;
  margin-top:8px;
  padding:5px 12px;
  font-size:12px;font-weight:700;line-height:1;
  color:#fff;background:var(--c-primary);
  border-radius:999px;
}

.board-inq__x{
  position:absolute;top:20px;right:20px;
  width:32px;height:32px;
  font-size:30px;line-height:1;
  color:var(--c-text-mute);
  background:none;border:0;cursor:pointer;
}
.board-inq__x:hover{color:var(--c-text)}

/*
 * ⚠️ scrollbar-gutter — 스크롤바 자리를 항상 비워 둔다.
 *    없으면 내용 길이에 따라 스크롤바가 나타났다 사라지며
 *    본문이 좌우로 5px 씩 흔들린다.
 */
.board-inq__body{
  flex:1 1 auto;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:24px 28px 30px;
  scrollbar-width:thin;
  scrollbar-color:var(--c-line) transparent;
}


.board-inq__body::-webkit-scrollbar{width:5px}
.board-inq__body::-webkit-scrollbar-track{background:transparent}
.board-inq__body::-webkit-scrollbar-thumb{background:var(--c-line);border-radius:99px}

/* 모달 안에서는 한 줄에 한 항목 */
.board-inq__body .sec-contact__grid{grid-template-columns:1fr}
.board-inq__body .sec-contact__row--full{grid-column:auto}
.board-inq__body .sec-contact__textarea{min-height:90px;height:90px}
/*
 * ⚠️ date · datetime-local 은 브라우저 기본 폭이 있어 width:100% 를 무시한다.
 *    그래서 컨테이너보다 넓어지고, 모달이 가로로 흔들린다.
 *    min-width:0 이 있어야 flex/grid 안에서 실제로 줄어든다.
 */
.board-inq__body input,
.board-inq__body select,
.board-inq__body textarea{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
/*
 * 날짜 필드.
 *
 * ⚠️ iOS Safari(= iOS 크롬)는 input[type=date] 에 최소 폭을 강제해
 *    width:100% 를 무시한다. appearance:none 이라야 뚫린다.
 *
 * ⚠️ line-height 를 주지 않는다. .sec-contact__input 이 line-height 없이
 *    padding:13px 16px 만으로 높이를 만들기 때문에, 여기서 값을 주면 어긋난다.
 *
 * ⚠️ ::-webkit-date-and-time-value 에 width 를 주지 않는다.
 *    iOS 에서 터치 영역이 깨져 달력이 안 열린다.
 */
.board-inq__body input[type="date"],
.board-inq__body input[type="datetime-local"],
.board-inq__body input[type="time"]{
  -webkit-appearance:none;
  appearance:none;

  min-width:0;
  max-width:100%;

  /* 아이콘 자리만큼만 오른쪽을 더 준다. 나머지는 .sec-contact__input 그대로 */
  padding-right:44px;
   /*
   * ⚠️ iOS 는 값이 비었을 때 내용 높이를 0 으로 잡아 필드가 납작해진다.
   *    날짜를 고르면 정상으로 돌아오는 게 그 증거다.
   *    빈 줄 하나 높이를 최소로 깔아 둔다. 값이 있으면 이 값은 무시된다.
   */
  min-height:calc(1.5em + 26px + 2px);

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:18px 18px;
}

/* iOS — 값 영역이 제 폭을 주장하지 않게. width 는 주지 않는다 */
.board-inq__body input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
  margin:0;
}

/*
 * 기본 아이콘을 투명하게 만들어 필드 전체에 깔아 둔다.
 *
 * ⚠️ 기본값은 아이콘 크기만큼만 차지해서 그 좁은 영역을 눌러야 달력이 열린다.
 *    절대배치로 필드 전체를 덮으면 어디를 눌러도 열린다.
 *    우리가 그린 배경 아이콘은 그 아래에 그대로 보인다.
 */
.board-inq__body input[type="date"],
.board-inq__body input[type="datetime-local"],
.board-inq__body input[type="time"]{
  position:relative;
}

.board-inq__body input[type="date"]::-webkit-calendar-picker-indicator,
.board-inq__body input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.board-inq__body input[type="time"]::-webkit-calendar-picker-indicator{
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  opacity:0;
  cursor:pointer;
}
@media (max-width:768px){
  .board-meta{gap:10px 18px;margin:16px 0 24px;padding-bottom:16px}
  .board-meta__label{padding:4px 10px;font-size:11px}
  .board-meta__value{white-space:normal}

  .board-inq{padding:18px 20px}
  .board-inq__btn{width:100%;justify-content:center}
  /* 모달 여백도 줄여 실사용 높이를 확보한다 */
  .board-inq__modal{padding:12px}
  .board-inq__panel{max-height:92vh;max-height:92dvh}
  .board-inq__head{padding:18px 16px 14px}
  .board-inq__body{padding:16px 16px 22px}
}