/* BASIC css start */
.cw-faqtitle { display: flex; align-items: center; justify-content: space-between; font-weight: 700; padding-top: var(--cw-size-60); font-size: var(--cw-size-24); line-height: var(--cw-size-32); color: var(--cw-heading-color); }
.cw-faqsearch .search-keywords { display: grid; grid-template-columns: var(--cw-size-120) var(--cw-size-540); align-items: center; justify-content: center; gap: var(--cw-size-10) var(--cw-size-12); margin: var(--cw-size-40) 0 var(--cw-size-48); }
.cw-faqsearch .search-keywords :where(dt, dd) { display: flex; align-items: center; min-height: var(--cw-size-40); font-size: var(--cw-size-14); }
.cw-faqsearch .search-keywords dd:first-of-type { border-bottom: 1px solid var(--cw-color-30); }
.cw-faqsearch .search-keywords dd:nth-of-type(2) { display: flex; flex-wrap: wrap; gap: var(--cw-size-6); }
.cw-faqsearch .search-keywords .cw-select-box { width: 100%; padding-left: 0; border: 0; border-bottom: 1px solid var(--cw-color-30); border-radius: 0; }
.cw-faqsearch .search-keywords .cw-textfield { width: var(--cw-size-500); border: 0; }
.cw-faqsearch .search-keywords .btn-search { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--cw-size-40); height: var(--cw-size-40); vertical-align: top; }
.cw-faqsearch .search-keywords .btn-search img { width: var(--cw-size-24); height: var(--cw-size-24); }
.cw-faqsearch .search-keywords .keyword { display: inline-flex; align-items: center; height: var(--cw-size-24); padding: 0 var(--cw-size-10); font-size: var(--cw-size-12); color: var(--cw-heading-color); border: 1px solid var(--cw-color-30); border-radius: var(--cw-size-20); }
.cw-faqtab { display: flex; flex-wrap: wrap; row-gap: var(--cw-size-10); align-items: center; min-height: var(--cw-size-28); margin-bottom: var(--cw-size-12); }
.cw-faqtab a { padding-right: var(--cw-size-16); color: var(--cw-color-80); font-size: var(--cw-size-14); line-height: var(--cw-size-20); }
.cw-faqtab a.on { color: var(--cw-heading-color); font-weight: 700; }
.cw-faqtab a:not(:first-child)::before { content: ''; display: inline-block; width: 1px; height: var(--cw-size-12); margin-right: var(--cw-size-16); background-color: var(--cw-color-30); vertical-align: middle; }
.cw-faqlist { border-top: 1px solid var(--cw-heading-color); }
.cw-faqlist .question { position: relative; display: flex; align-items: center; padding: var(--cw-size-16) 0; border-bottom: 1px solid var(--cw-color-30); color: var(--cw-color-80); font-size: var(--cw-size-14); cursor: pointer; }
.cw-faqlist .question span { color: var(--cw-heading-color); margin-right: var(--cw-size-6); }
.cw-faqlist .question.on { border-bottom: 0; }
.cw-faqlist .question::after { content: ""; display: inline-block; width: var(--cw-size-20); height: var(--cw-size-20); background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_cheveron_down.svg') no-repeat center center; background-size: contain; transition: transform 0.3s; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(0deg); }
.cw-faqlist .question.on::after { transform: translateY(-50%) rotate(180deg); }
.cw-faqlist .answer { display: none; padding: var(--cw-size-24); color: var(--cw-heading-color); font-size: var(--cw-size-14); line-height: var(--cw-size-20); border-bottom: 1px solid var(--cw-color-30); background-color: var(--cw-color-10); white-space: pre-line; }
.cw-faqlist .answer.on { display: block; }
.cw-paging { padding-top: var(--cw-size-20); }

@media (max-width: 991.98px) {
    .cw-faqtitle { justify-content: end; padding-top: var(--cw-size-20); }
    .cw-faqtitle > span { display: none; }
    .cw-faqsearch .search-keywords { grid-template-columns: var(--cw-size-120) 1fr; margin-top: var(--cw-size-20); }
    .cw-faqsearch .search-keywords .cw-textfield { width: 100%; }
}
@media (max-width: 767.98px) {
    .cw-faqsearch .search-keywords { margin-bottom: var(--cw-size-40); }
    .cw-faqsearch .search-keywords :where(dt:nth-of-type(2), dd:nth-of-type(2)) { min-height: auto; }
    .cw-faqsearch .search-keywords dd:nth-of-type(2) { grid-column: 1 / -1; }
    .cw-faqtab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; height: auto; margin-bottom: var(--cw-size-24); border-top: 1px solid var(--cw-color-30); border-left: 1px solid var(--cw-color-30); }
    .cw-faqtab:not(:has(.category_2)) { grid-template-columns: repeat(2, 1fr); }
    .cw-faqtab a { display: flex; align-items: center; justify-content: center; height: var(--cw-size-40); padding: 0; font-size: var(--cw-size-13); border-right: 1px solid var(--cw-color-30); border-bottom: 1px solid var(--cw-color-30); }
    .cw-faqtab a:not(:first-child)::before { display: none; }
    .cw-faqlist :where(.question, .answer) { font-size: var(--cw-size-13) !important; line-height: var(--cw-size-18) !important; }
    .cw-faqlist .question { display: grid; row-gap: var(--cw-size-6); }
    .cw-faqlist .question::after { width: var(--cw-size-16); height: var(--cw-size-16); }
    .cw-faqlist .answer { padding: var(--cw-size-16); }
}

/* ── 세인트크로익스 FAQ 덧칠 · 2026-09-04 ──
   HTML·JS 는 손대지 않는다. 아코디언(.answer 의 display)도 건드리지 않는다. */
.faq-wrapper{
  max-width:var(--sc-max);
  padding:var(--sc-s8) var(--sc-pad) clamp(56px,9vw,140px);
  color:var(--sc-txt);
  font-size:15px;
  line-height:1.75;
}

/* 제목 */
.faq-wrapper .cw-faqtitle{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sc-s4);
  margin:0 0 var(--sc-s6);
  padding:0 0 var(--sc-s5);
  border-bottom:1px solid var(--sc-ink);
}
.faq-wrapper .cw-faqtitle > span{
  font-size:clamp(28px,3.4vw,44px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--sc-ink);
}
.faq-wrapper .cw-faqtitle > span::before{
  content:"Help";
  display:block;
  margin-bottom:var(--sc-s2);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sc-gold);
}
.faq-wrapper .cw-faqtitle .btn{
  flex:none;
  border-radius:0;
  border:1px solid var(--sc-ink);
  background:#fff;
  color:var(--sc-ink);
  font-weight:700;
}
.faq-wrapper .cw-faqtitle .btn:hover{background:var(--sc-tile)}

/* 검색 */
.faq-wrapper .cw-faqsearch{
  padding:var(--sc-s6) var(--sc-s5);
  background:var(--sc-tile);
  border:0;
}
.faq-wrapper .cw-faqsearch .search-keywords :where(dt,dd){
  color:var(--sc-sub);
  font-size:13px;
}
.faq-wrapper .cw-faqsearch :where(input[type=text],select){
  height:48px;
  padding:0 14px;
  border:1px solid var(--sc-line);
  border-radius:0;
  background:#fff;
  color:var(--sc-ink);
  font-size:14px;
}
.faq-wrapper .cw-faqsearch :where(input,select):focus{
  outline:0;
  border-color:var(--sc-ink);
  box-shadow:none;
}
.faq-wrapper .cw-faqsearch .keyword{
  height:28px;
  padding:0 12px;
  border:1px solid var(--sc-line);
  border-radius:0;
  background:#fff;
  color:var(--sc-txt);
  font-size:12px;
  text-decoration:none;
}
.faq-wrapper .cw-faqsearch .keyword:hover{
  background:var(--sc-ink);
  border-color:var(--sc-ink);
  color:#fff;
}

/* 분류 줄 */
.faq-wrapper .cw-faqtab{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sc-s1) var(--sc-s5);
  margin:var(--sc-s6) 0 var(--sc-s5);
  padding:0 0 var(--sc-s3);
  border-bottom:1px solid var(--sc-line);
}
.faq-wrapper .cw-faqtab a{
  position:relative;
  padding:6px 0;
  color:var(--sc-sub);
  font-size:15px;
  text-decoration:none;
}
.faq-wrapper .cw-faqtab a::before{content:none !important}
.faq-wrapper .cw-faqtab a:hover{color:var(--sc-ink)}
.faq-wrapper .cw-faqtab a.on{
  color:var(--sc-ink);
  font-weight:700;
  box-shadow:inset 0 -2px 0 0 var(--sc-gold-br);
}

/* 질문 목록 */
.faq-wrapper .cw-faqlist{
  border-top:1px solid var(--sc-ink);
}
.faq-wrapper .cw-faqlist .question{
  padding:var(--sc-s5) 44px var(--sc-s5) 0;
  border-bottom:1px solid var(--sc-line);
  color:var(--sc-ink);
  font-size:16px;
  font-weight:600;
  line-height:1.5;
  transition:background .15s;
}
.faq-wrapper .cw-faqlist .question:hover{background:var(--sc-tile)}
.faq-wrapper .cw-faqlist .question.on{
  background:var(--sc-tile);
  border-bottom-color:var(--sc-ink);
}
.faq-wrapper .cw-faqlist .question::after{right:8px}

/* 답변 */
.faq-wrapper .cw-faqlist .answer{
  padding:var(--sc-s6) 44px var(--sc-s7) var(--sc-s3);
  border-bottom:1px solid var(--sc-line);
  background:#fff;
  color:var(--sc-txt);
  font-size:15px;
  line-height:1.9;
  border-left:2px solid var(--sc-gold-br);
}

/* 쪽번호 */
.faq-wrapper .cw-paging{
  display:flex;
  gap:4px;
  justify-content:center;
  margin:var(--sc-s7) 0 0;
}
.faq-wrapper .cw-paging a{
  min-width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--sc-line);
  background:#fff;
  color:var(--sc-txt);
  font-size:14px;
  text-decoration:none;
}
.faq-wrapper .cw-paging a.active,
.faq-wrapper .cw-paging a:hover{
  background:var(--sc-ink);
  border-color:var(--sc-ink);
  color:#fff;
}

@media (max-width:768px){
  .faq-wrapper{padding-top:var(--sc-s6)}
  .faq-wrapper .cw-faqtitle{flex-direction:column;align-items:flex-start;gap:var(--sc-s3)}
  .faq-wrapper .cw-faqtitle > span{font-size:24px}
  .faq-wrapper .cw-faqtab{gap:var(--sc-s1) var(--sc-s4)}
  .faq-wrapper .cw-faqtab a{font-size:14px}
  .faq-wrapper .cw-faqlist .question{font-size:15px;padding-right:36px}
  .faq-wrapper .cw-faqlist .answer{padding:var(--sc-s5) var(--sc-s3) var(--sc-s6)}
}

/* BASIC css end */

