@charset "utf-8";
/* support — 제품문의 · 판매처 안내.

   내용이 통째로 달라져 쓰지 않는다. 두 페이지 모두 여기에서 처음부터 잡는다.
   읽는 순서: theme.css -> base-index.css -> support.css */

/* ---------- 공통 ----------
   크기·간격은 theme.css 의 변수를 쓴다. 다른 메뉴와 리듬을 맞추기 위해서다. */
/* 아래 여백은 #contents 한 곳에서 준다(theme.js 가 skin-*.css 뒤에 붙이는 규칙). */
.support .titleArea{ padding:var(--sp-page-top) 0 var(--sp-page-gap); text-align:center; }
.support .titleArea .en_main_title_L{
  font-size:var(--fs-page); font-weight:700; letter-spacing:-0.1rem; color:var(--btnBlack); line-height:1;
}
.support .titleArea .sub_tit{
  margin-top:1.8rem; font-size:var(--fs-body); letter-spacing:.06em; color:var(--subColor); font-weight:500;
}
.support_inner{ max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad); }
.support .sec_tit{
  font-size:var(--fs-sec); font-weight:700; color:var(--btnBlack);
  padding-bottom:1.8rem; border-bottom:1px solid var(--border); margin-bottom:var(--sp-tit);
}
.support .badge{
  display:inline-block; padding:.5rem 1.1rem; border-radius:.3rem;
  font-size:1.2rem; font-weight:700; line-height:1; white-space:nowrap;
}
/* .badge.done(답변완료)은 문의 목록에서만 쓰던 것이라 같이 걷어냈다. */
.support .badge.wait{ background:var(--tint, #EAFBFF); color:var(--subColor); }

/* ---------- 제품문의: 안내 3칸 ---------- */
.support .guide_box{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); margin-bottom:var(--sp-section);
}
.support .guide_item{ background:var(--white); padding:4rem 3rem; text-align:center; }
.support .guide_item .label{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.18em; color:var(--subColor); margin-bottom:1.6rem;
}
.support .guide_item .value{ font-size:var(--fs-h3); font-weight:700; color:var(--btnBlack); }
.support .guide_item .value.tel{ font-size:2.8rem; letter-spacing:-0.05rem; }
.support .guide_item .value a{ color:var(--btnBlack); }
.support .guide_item .value a:hover{ color:var(--subColor); text-decoration:underline; }
.support .guide_item .desc{ margin-top:1.4rem; font-size:var(--fs-xs); line-height:1.7; color:var(--muted); }

/* ---------- 제품문의: 접수 폼 ----------
   입력칸이 페이지 폭(132rem)만큼 늘어나면 한 줄이 너무 길어 쓰기 불편하다. 가운데로 좁힌다. */
.support .qna_form{ max-width:88rem; margin:0 auto var(--sp-section); }
/* 폼이 페이지의 마지막 덩어리면 섹션 간격이 페이지 아래 여백 위에 또 쌓인다. */
.support_inner > *:last-child{ margin-bottom:0; }
.support .form .row{ margin-bottom:2.2rem; }
.support .form .row.half{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:2.2rem; }
.support .form .row.half > div{ margin:0; }
.support .form label{
  display:block; font-size:var(--fs-sm); font-weight:500; color:var(--btnBlack); margin-bottom:.9rem;
}
.support .form label em{ color:var(--subColor); font-style:normal; }
.support .form input[type="text"],
.support .form input[type="tel"],
.support .form input[type="email"],
.support .form select,
.support .form textarea{
  width:100%; border:1px solid var(--border); border-radius:.3rem;
  padding:0 1.6rem; height:5.4rem; font-size:1.5rem; color:var(--fontColor);
  background:var(--white); font-family:inherit;
}
.support .form textarea{ height:auto; padding:1.6rem; line-height:1.7; resize:vertical; }
.support .form input:focus,
.support .form select:focus,
/* outline 을 지우지 않는다. 키보드로 들어온 경우의 포커스 테두리는
   theme.js 가 붙이는 :focus-visible 규칙이 그린다. */
.support .form textarea:focus{ border-color:var(--subColor); }
.support .form .agree{ display:flex; align-items:flex-start; gap:1rem; margin:1rem 0 3rem; }

.support .form .agree input[type="checkbox"]{
  -webkit-appearance:checkbox; appearance:checkbox;
  margin-top:.3rem; width:1.7rem; height:1.7rem; flex:none;
  accent-color:var(--subColor); border:0; padding:0; background:none; opacity:1; position:static;
}
.support .form .agree label{ margin:0; font-size:1.3rem; font-weight:400; line-height:1.7; color:var(--muted); }
.support .form .agree label a{ color:var(--subColor); text-decoration:underline; }
.support .form .btn_row{ text-align:center; }
.support .form .btn_submit{
  min-width:24rem; height:6rem; border:0; border-radius:.3rem; cursor:pointer;
  background:var(--subColor); color:var(--white); font-size:1.6rem; font-weight:700;
  font-family:inherit; transition:background .3s;
}
.support .form .btn_submit:hover{ background:var(--btnBlack); }
.support .form_note{ margin-top:2rem; text-align:center; font-size:1.3rem; color:var(--muted); }

/* ---------- 판매처 안내 ---------- */
.support .store_lead{ text-align:center; margin-bottom:var(--sp-section); }
.support .store_lead .lead{
  font-size:var(--fs-sec); font-weight:700; letter-spacing:-0.08rem; color:var(--btnBlack); line-height:1.4;
}
.support .store_lead .lead_desc{
  margin-top:2rem; font-size:var(--fs-body); line-height:1.85; color:var(--fontProDesc);
}
.support .ch_group{ margin-bottom:var(--sp-section); }
.support .ch_group_tit{
  font-size:2rem; font-weight:700; color:var(--btnBlack); margin-bottom:2.4rem;
  padding-left:1.4rem; border-left:3px solid var(--mainColor); line-height:1.2;
}
.support .ch_list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-block); }
.support .ch_item{
  border:1px solid var(--border); border-radius:.4rem; padding:3rem 2.6rem;
  background:var(--white); transition:border-color .3s;
}
.support .ch_item:hover{ border-color:var(--mainColor); }
.support .ch_head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.support .ch_name{ font-size:var(--fs-h3); font-weight:700; color:var(--btnBlack); }
.support .ch_desc{ font-size:var(--fs-sm); line-height:1.75; color:var(--fontProDesc); }

.support .store_contact{ margin-top:var(--sp-section); background:var(--tint, #EAFBFF); padding:6rem 5rem; border-radius:.4rem; }
.support .store_contact .sec_tit{ border-bottom-color:rgba(0,137,199,.25); }
.support .store_contact .contact_desc{ font-size:var(--fs-body); line-height:1.8; color:var(--fontProDesc); margin-bottom:3.4rem; }
.support .contact_list{ display:grid; gap:1.4rem; margin-bottom:3.6rem; }
.support .contact_list > div{ display:flex; gap:2rem; font-size:1.5rem; line-height:1.6; }
.support .contact_list dt{ width:8rem; flex:none; font-weight:700; color:var(--btnBlack); }
.support .contact_list dd{ color:var(--fontProDesc); }
.support .contact_list dd a{ color:var(--subColor); text-decoration:underline; }
.support .btn_inquiry{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20rem; height:5.6rem; border-radius:.3rem;
  background:var(--subColor); color:var(--white); font-size:1.5rem; font-weight:700;
  transition:background .3s;
}
.support .btn_inquiry:hover{ background:var(--btnBlack); }

/* 제출 결과 안내. role="status" + aria-live 가 걸려 있어 화면 낭독기에도 읽힌다.
   빈 상태에서는 자리를 차지하지 않는다. */
.support .form_msg:empty{ display:none; }
.support .form_msg{
  margin-top:1.6rem; text-align:center; font-size:var(--fs-sm); line-height:1.7;
  color:var(--subColor);
}
.support .form_msg.is_error{ color:#C2382F; }

/* ==================== 휴대폰 ==================== */
@media (max-width:1023px){
  /* 제목 위아래 여백이 PC 기준(9rem/4rem)이라 첫 화면이 제목만으로 찬다. */
  .support .titleArea{ padding-top:5rem; padding-bottom:3.4rem; }
  .support .titleArea .en_main_title_L{ font-size:var(--fs-page); }
  /* 좌우 여백은 .sub_page 가 한 번만 준다. 여기서 또 주면 두 배가 된다. */
  .support_inner{ padding-left:0; padding-right:0; }

  /* 안내 3칸 → 세로 */
  .support .guide_box{ grid-template-columns:1fr; }
  .support .guide_item{ padding:2.8rem 2rem; }
  .support .guide_item .value.tel{ font-size:2.4rem; }

  /* 폼 — 이름·연락처를 한 줄에 두기엔 좁다 */
  .support .qna_form{ max-width:none; }
  .support .form .row.half{ grid-template-columns:1fr; gap:0; }
  .support .form .row.half > div + div{ margin-top:2.2rem; }
  .support .form input[type="text"],
  .support .form input[type="tel"],
  .support .form input[type="email"],
  .support .form select,
  .support .form textarea{
    /* 16px 보다 작으면 iOS 가 입력할 때 화면을 확대한다 */
    height:5rem; font-size:16px;
  }
  .support .form textarea{ height:auto; }
  .support .form .btn_submit{ width:100%; min-width:0; height:5.4rem; }

  /* 판매처 카드 */
  .support .ch_list{ grid-template-columns:1fr; }
  .support .ch_item{ padding:2.2rem 2rem; }
  .support .ch_head{ flex-wrap:wrap; gap:.6rem; }
  .support .store_contact{ padding:3.4rem 2rem 4rem; }
  .support .contact_list > div{ display:block; }
  .support .contact_list dt{ width:auto; margin-bottom:.4rem; }
  .support .btn_inquiry{ width:100%; min-width:0; }
}

/* ==================== 태블릿 (768 ~ 1023px) ==================== */
@media (min-width:768px) and (max-width:1023px){
  .support .guide_box{ grid-template-columns:repeat(3,1fr); }
  .support .ch_list{ grid-template-columns:repeat(2,1fr); }
  .support .form .row.half{ grid-template-columns:1fr 1fr; gap:2rem; }
  .support .form .row.half > div + div{ margin-top:0; }
  .support .form .btn_submit{ width:auto; min-width:24rem; }
}