@charset "utf-8";
/* ============================================================
   분석의뢰 — 글쓰기(.bo-frm) / 비밀번호 확인(.bo-pwd)

   시안: Figma  글쓰기 996:6855(PC) / 996:8312(MO)
                비번확인 997:8702(PC) / 997:9260(MO)
   10px = 1rem  ( html { font-size: 62.5%; } — public/css/common.css )

   * board.css 를 수정하지 않기 위해 이 폴더에 따로 둔다(SCOPE.md).
     페이지 골격(.ehboagal / .inner_title / .inner)은 board.css 것을 그대로 쓰고,
     여기서는 폼/카드만 정의한다.
   * 모든 규칙을 .ehboagal 아래로 한정한다. board.css 의
     `.ehboagal button { border:0; background:none }` 이 (0,1,1) 이라
     한정하지 않으면 버튼 배경/보더가 그 규칙에 밀린다.
   ============================================================ */

/* 상단 여백은 .ehboagal 의 padding(12rem) 이 담당한다.
   여기서 margin-top 을 주면 그 위에 더해져 서브비주얼과 카드가 너무 벌어진다. */
.ehboagal .bo-pwd { max-width: 40rem; margin: 0 auto; }

/* 라벨 — 시안상 카드 폭 기준 가운데 정렬 */
.ehboagal .bo-pwd__label {
  display: block; margin-bottom: 1rem;
  font-family: pretendard-600; font-weight: 600;
  font-size: 1.8rem; line-height: 3rem; color: #111;
  text-align: center;
}

/* 입력 — 기본은 회색 면, 포커스하면 흰 면 + 포인트 보더 (시안 2단 상태)
   letter-spacing 은 시안의 벌어진 마스킹 점(●●●●)을 맞추기 위한 것이라
   placeholder 에서는 해제한다. */
.ehboagal .bo-pwd__input {
  display: block; width: 100%; height: 5.6rem; padding: 0 2rem;
  background: #f8f8f8; border: 1px solid transparent; border-radius: .6rem;
  font-family: pretendard-400; font-weight: 400;
  font-size: 1.6rem; line-height: 2.6rem; color: #111;
  text-align: center; letter-spacing: .3em;
  transition: background-color .15s, border-color .15s;
}
.ehboagal .bo-pwd__input::placeholder { color: #999; letter-spacing: 0; }
/* outline 을 끄는 대신 보더 색 변화가 포커스 표시를 대신한다.
   시안에 기본 포커스 링이 없고, 청록 보더만으로 충분히 구분된다. */
.ehboagal .bo-pwd__input:focus { background: #fff; border-color: #22969c; outline: none; }

/* 버튼 2개 — 시안 5:5, gap 12px */
.ehboagal .bo-pwd__btns { display: flex; gap: 1.2rem; margin-top: 4rem; }
.ehboagal .bo-pwd__btn {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  height: 6rem; border-radius: .6rem;
  font-size: 1.8rem; line-height: 2.2rem; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ehboagal .bo-pwd__btn--back {
  background: #fff; border: 1px solid #111; color: #111;
  font-family: pretendard-500; font-weight: 500;
}
.ehboagal .bo-pwd__btn--back:hover { background: #111; color: #fff; }
.ehboagal .bo-pwd__btn--ok {
  background: #22969c; border: 1px solid #22969c; color: #fff;
  font-family: pretendard-600; font-weight: 600;
}
.ehboagal .bo-pwd__btn--ok:hover { background: #1b7b80; border-color: #1b7b80; }

/* ============================================================
   글쓰기 폼 (.bo-frm) — write.php
   PC 시안: 폼 폭 1080, 행 간격 30, 라벨 16/26 + 6, 입력 h56 r6 #f8f8f8
   ============================================================ */
.ehboagal .bo-frm { max-width: 108rem; margin: 0 auto; }

/* 행 — 기본 1열, --2 는 PC 에서만 2열 (작성자 이름 / 비밀번호) */
.ehboagal .bo-frm__row { margin-top: 3rem; }
.ehboagal .bo-frm__row:first-child { margin-top: 0; }
.ehboagal .bo-frm__row--2 { display: flex; gap: 3rem; }
.ehboagal .bo-frm__row--2 > * { flex: 1 1 0; min-width: 0; }

.ehboagal .bo-frm__label {
  display: block; margin-bottom: .6rem;
  font-family: pretendard-600; font-weight: 600;
  font-size: 1.6rem; line-height: 2.6rem; color: #111;
}
/* 필수 표시 — 시안의 주황 별표 */
.ehboagal .bo-frm__label em {
  font-style: normal; margin-left: .4rem;
  font-size: 1.6rem; color: #ef811b; vertical-align: -.1rem;
}

/* 입력 공통 */
.ehboagal .bo-frm__input,
.ehboagal .bo-frm__textarea {
  display: block; width: 100%;
  background: #f8f8f8; border: 1px solid transparent; border-radius: .6rem;
  font-family: pretendard-400; font-weight: 400;
  font-size: 1.6rem; line-height: 2.6rem; color: #111;
  transition: background-color .15s, border-color .15s;
}
.ehboagal .bo-frm__input { height: 5.6rem; padding: 0 2rem; }
.ehboagal .bo-frm__textarea { height: 20rem; padding: 1.5rem 2rem; resize: none; }
.ehboagal .bo-frm__input::placeholder,
.ehboagal .bo-frm__textarea::placeholder { color: #999; }
.ehboagal .bo-frm__input:focus,
.ehboagal .bo-frm__textarea:focus { background: #fff; border-color: #22969c; outline: none; }

/* 제목 — "비밀글입니다." 고정. 회색 면은 그대로, 글자만 본문색.
   readonly 라 포커스 강조를 주지 않는다. */
.ehboagal .bo-frm__input--fixed {
  font-family: pretendard-500; font-weight: 500; color: #111; cursor: default;
}
.ehboagal .bo-frm__input--fixed:focus { background: #f8f8f8; border-color: transparent; }

/* 분야 — 라디오(단일 선택)를 pill 로 */
.ehboagal .bo-frm__pills { display: flex; flex-wrap: wrap; gap: .8rem; }
.ehboagal .bo-frm__pill { position: relative; display: block; }
/* 접근성: 라디오는 화면에서만 감추고 포커스는 살린다 */
.ehboagal .bo-frm__pill input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.ehboagal .bo-frm__pill span {
  display: flex; align-items: center; justify-content: center;
  height: 5.6rem; padding: 0 2.4rem; border-radius: 4.6rem;
  background: #fff; border: 1px solid rgba(0,0,0,.1);
  font-family: pretendard-500; font-weight: 500;
  font-size: 1.6rem; line-height: 2.6rem; color: #999;
  white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ehboagal .bo-frm__pill:hover span { border-color: #22969c; color: #22969c; font-family: pretendard-700; font-weight: 700; }
.ehboagal .bo-frm__pill input:checked + span {
  background: #22969c; border-color: #22969c; color: #fff;
  font-family: pretendard-700; font-weight: 700;
}
.ehboagal .bo-frm__pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(34,150,156,.25); }

/* 연락처 — 3칸 균등. 앞자리 010 은 고정이라 채워진 모양(흰 면 + 진한 보더) */
.ehboagal .bo-frm__tel { display: flex; gap: 1rem; }
.ehboagal .bo-frm__tel > * { flex: 1 1 0; min-width: 0; text-align: center; }
.ehboagal .bo-frm__tel .bo-frm__input--head {
  background: #fff; border-color: #111; cursor: default;
}
.ehboagal .bo-frm__tel .bo-frm__input--head:focus { background: #fff; border-color: #111; }

/* 개인정보 동의 */
.ehboagal .bo-frm__agree {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.6rem; margin-top: 3rem;
}
.ehboagal .bo-frm__agree-label {
  display: flex; align-items: center; gap: .8rem; cursor: pointer;
  font-size: 1.6rem; line-height: 3.2rem; color: #444;
}
.ehboagal .bo-frm__agree-label input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0,0,0,0);
}
.ehboagal .bo-frm__agree-label i {
  flex: none; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: .4rem;
  background: #d9d9d9; transition: background-color .15s;
}
/* 체크 표시는 CSS 로 그린다(별도 이미지 없음) */
.ehboagal .bo-frm__agree-label i:before {
  content: ''; width: 1rem; height: .6rem;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0; transition: opacity .15s;
}
.ehboagal .bo-frm__agree-label input:checked + i { background: #22969c; }
.ehboagal .bo-frm__agree-label input:checked + i:before { opacity: 1; }
.ehboagal .bo-frm__agree-label input:focus-visible + i { box-shadow: 0 0 0 3px rgba(34,150,156,.25); }
.ehboagal .bo-frm__agree-more {
  flex: none; font-family: pretendard-600; font-weight: 600;
  font-size: 1.6rem; line-height: 3.2rem; color: #111; text-decoration: underline;
}

/* 등록하기 */
.ehboagal .bo-frm__submit {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 7rem; margin-top: 3rem;
  background: #22969c; border: 0; border-radius: .6rem;
  font-family: pretendard-600; font-weight: 600;
  font-size: 2rem; line-height: 2.6rem; color: #fff;
  transition: background-color .15s;
}
.ehboagal .bo-frm__submit:hover { background: #1b7b80; }
.ehboagal .bo-frm__submit:disabled { background: #9dc7c9; cursor: default; }
/* 봉투 아이콘 — 프로젝트에 해당 에셋이 없어 인라인 SVG 로 그린다.
   currentColor 를 쓰므로 버튼 글자색을 그대로 따라간다. */
.ehboagal .bo-frm__submit i {
  position: absolute; right: 3rem; top: 50%; transform: translateY(-50%);
  display: block; width: 2.2rem; height: 2.2rem;
}
.ehboagal .bo-frm__submit i svg { display: block; width: 100%; height: 100%; }

/* ============================================================
   작성글 상세 (.bo-det) — view.php
   PC 시안: 폭 1080, 제목 44/66, 라벨열 150, 행 padding 20, 답변 위 #111 구분선
   ============================================================ */
.ehboagal .bo-det { max-width: 108rem; margin: 0 auto; }

/* 제목 + 비밀글 자물쇠 */
.ehboagal .bo-det__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.ehboagal .bo-det__title {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: pretendard-700; font-weight: 700;
  font-size: 4.4rem; line-height: 6.6rem; color: #000; word-break: keep-all;
}
.ehboagal .bo-det__lock {
  flex: none; display: grid; place-items: center;
  width: 6.6rem; height: 6.6rem; border-radius: 50%; background: #f2fafa;
}
.ehboagal .bo-det__lock svg { display: block; width: 1.8rem; height: 1.8rem; }

/* 등록일 */
.ehboagal .bo-det__meta { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; }
.ehboagal .bo-det__meta dt { font-size: 1.4rem; line-height: 3.4rem; color: #888; }
.ehboagal .bo-det__meta dd {
  margin: 0; font-family: pretendard-600; font-weight: 600;
  font-size: 1.4rem; line-height: 3.4rem; color: #000;
}

/* 항목 표 */
.ehboagal .bo-det__list { margin: 4rem 0 0; border-top: 1px solid #eee; }
.ehboagal .bo-det__row { display: flex; padding: 2rem 0; border-bottom: 1px solid #eee; }
.ehboagal .bo-det__row dt {
  flex: none; width: 15rem;
  font-family: pretendard-600; font-weight: 600;
  font-size: 1.6rem; line-height: 2.6rem; color: #111;
}
.ehboagal .bo-det__row dd {
  flex: 1 1 0; min-width: 0; margin: 0;
  font-size: 1.6rem; line-height: 2.6rem; color: #111;
  word-break: break-word; white-space: pre-line;
}

/* 답변 — 위쪽 굵은(진한) 구분선으로 문의 내용과 구분한다 */
.ehboagal .bo-det__answer {
  display: flex; margin-top: 6rem; padding: 6rem 0;
  border-top: 1px solid #111; border-bottom: 1px solid #eee;
}
.ehboagal .bo-det__answer dt {
  flex: none; width: 15rem;
  font-family: pretendard-600; font-weight: 600;
  font-size: 1.6rem; line-height: 2.6rem; color: #111;
}
.ehboagal .bo-det__answer dd {
  flex: 1 1 0; min-width: 0; margin: 0;
  font-size: 1.6rem; line-height: 2.6rem; color: #111;
  word-break: break-word; white-space: pre-line;
}
/* 답변 대기 안내 */
.ehboagal .bo-det__answer dd.is-wait { color: #888; }

/* 하단 버튼 — 삭제는 form 으로 감싸므로 form 도 같이 flex 항목으로 둔다 */
.ehboagal .bo-det__btns { display: flex; justify-content: center; gap: .6rem; margin-top: 4rem; }
.ehboagal .bo-det__btns form { display: flex; margin: 0; }
.ehboagal .bo-det__btn {
  display: flex; align-items: center; justify-content: center;
  width: 15rem; height: 6.1rem; border-radius: 1rem;
  font-size: 1.8rem; line-height: 3.5rem; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ehboagal .bo-det__btn--list { background: #fff; border: 1px solid #111; color: #222; }
.ehboagal .bo-det__btn--list:hover { background: #111; color: #fff; }
.ehboagal .bo-det__btn--del { background: #f3f3f3; border: 1px solid #f3f3f3; color: #888; }
.ehboagal .bo-det__btn--del:hover { background: #e6e6e6; border-color: #e6e6e6; color: #666; }

/* ============ 모바일 (시안 MO 375) ============ */
@media (max-width: 768px) {
  .ehboagal .bo-pwd { max-width: none; }

  .ehboagal .bo-pwd__label { font-size: 1.5rem; line-height: 2.4rem; }

  .ehboagal .bo-pwd__input {
    height: 4.6rem; padding: 0 1.6rem;
    background: #f6f6f6; border-radius: .6rem;
    font-size: 1.3rem; line-height: 2.2rem;
  }

  .ehboagal .bo-pwd__btns { gap: 1rem; margin-top: 2rem; }
  .ehboagal .bo-pwd__btn { height: 4.4rem; font-size: 1.4rem; line-height: 2.2rem; }
  .ehboagal .bo-pwd__btn--back { font-family: pretendard-600; font-weight: 600; }
  .ehboagal .bo-pwd__btn--ok { font-family: pretendard-700; font-weight: 700; }

  /* --- 글쓰기 폼: 시안 MO 375 (콘텐츠 335, 행 간격 20) --- */
  .ehboagal .bo-frm { max-width: none; }

  .ehboagal .bo-frm__row { margin-top: 2rem; }
  /* PC 2열(작성자 이름 / 비밀번호)은 모바일에서 각각 한 행으로 내려온다 */
  .ehboagal .bo-frm__row--2 { display: block; }
  .ehboagal .bo-frm__row--2 > * + * { margin-top: 2rem; }

  .ehboagal .bo-frm__label { margin-bottom: .4rem; font-size: 1.3rem; line-height: 2rem; }
  .ehboagal .bo-frm__label em { font-size: 1.3rem; }

  .ehboagal .bo-frm__input,
  .ehboagal .bo-frm__textarea { font-size: 1.3rem; line-height: 2.2rem; }
  .ehboagal .bo-frm__input { height: 4.2rem; padding: 0 1.6rem; }
  .ehboagal .bo-frm__textarea { height: 24rem; padding: 1rem 1.6rem; }

  .ehboagal .bo-frm__pills { gap: .6rem; }
  .ehboagal .bo-frm__pill span { height: 4.2rem; padding: 0 1.6rem; font-size: 1.3rem; line-height: 2.2rem; }

  .ehboagal .bo-frm__tel { gap: .4rem; }

  .ehboagal .bo-frm__agree { margin-top: 2rem; gap: 1rem; }
  .ehboagal .bo-frm__agree-label { gap: .6rem; font-size: 1.2rem; line-height: 2rem; }
  .ehboagal .bo-frm__agree-label i { width: 2rem; height: 2rem; }
  .ehboagal .bo-frm__agree-more { font-size: 1.2rem; line-height: 2rem; }

  .ehboagal .bo-frm__submit { height: 5.2rem; margin-top: 2rem; font-size: 1.6rem; line-height: 2rem; }
  .ehboagal .bo-frm__submit i { right: 2rem; width: 1.8rem; height: 1.8rem; }

  /* --- 작성글 상세: 시안 MO 375 --- */
  .ehboagal .bo-det { max-width: none; }

  .ehboagal .bo-det__head { align-items: center; gap: 1rem; }
  .ehboagal .bo-det__title { font-size: 2.2rem; line-height: 3rem; }
  /* 모바일은 원형 배경 없이 자물쇠 글리프만 */
  .ehboagal .bo-det__lock { width: 3rem; height: 3rem; background: none; }
  .ehboagal .bo-det__lock svg { width: 1.6rem; height: 1.6rem; }

  .ehboagal .bo-det__meta { gap: .8rem; margin-top: .8rem; }
  .ehboagal .bo-det__meta dt,
  .ehboagal .bo-det__meta dd { font-size: 1.1rem; line-height: 1.8rem; }

  .ehboagal .bo-det__list { margin-top: 3rem; }
  /* 라벨을 값 위로 쌓는다 */
  .ehboagal .bo-det__row { display: block; padding: 1.5rem 0; }
  .ehboagal .bo-det__row dt { width: auto; margin-bottom: .4rem; font-size: 1.3rem; line-height: 2.2rem; }
  .ehboagal .bo-det__row dd { font-size: 1.4rem; line-height: 2.6rem; }

  .ehboagal .bo-det__answer { display: block; margin-top: 3rem; padding: 3rem 0; }
  .ehboagal .bo-det__answer dt { width: auto; margin-bottom: .4rem; font-size: 1.3rem; line-height: 2.2rem; }
  .ehboagal .bo-det__answer dd { font-size: 1.4rem; line-height: 2.6rem; }

  .ehboagal .bo-det__btns { gap: .5rem; margin-top: 3rem; }
  .ehboagal .bo-det__btns > *,
  .ehboagal .bo-det__btns form { flex: 1 1 0; min-width: 0; }
  .ehboagal .bo-det__btn {
    flex: 1 1 0; min-width: 0; width: auto;
    height: 4.3rem; border-radius: .8rem; font-size: 1.4rem; line-height: 2.3rem;
  }
  .ehboagal .bo-det__btn--del { color: #222; }
}