@charset "utf-8";
/* ================================================================
   자주묻는질문                              ★2026-08-27 확정본
   ----------------------------------------------------------------
   · 확정 색채계획 v5
       주 색 #1385B8 · 밝은 강조 #6CC3EE · 진한 강조 #0D6C9B
       배너 바탕 #EDF4FA · 옅은 구역 #EBF0F4 · 어두운 구역 #102838
   · 어두운 검색 띠(배너와 같은 360px)로 무게중심을 잡는다.
   · CSS 이름은 faq-* 로 따로 쓴다. 자료실(res-*)과 섞이지 않는다.
   · ★답변 안 글머리 기호를 되살리는 규칙이 아래에 있다.
     공통 CSS 가 list-style 을 없애 놓아 그냥 두면 점이 안 보인다.
   · ★이 파일이 사이트 디자인의 기준이다.
     자료실 · 인증현황 · 문의 목록도 순서 6~7번에서 여기 맞출 것.
   ================================================================ */

.faq-wrap{
    --faq-main:#1385B8; --faq-lt:#6CC3EE; --faq-dk:#0D6C9B;
    --faq-bnr:#EDF4FA;  --faq-soft:#EBF0F4; --faq-ink:#102838;
    --faq-line:#DCE4EA; --faq-gray:#7B858E; --faq-band-line:#2E4657;
    --faq-hover:#F5F9FC; --faq-bar-lt:#B5D0E0;
}
.faq-anchor{ display:block; height:0; }

/* 경로 띠 바로 아래에 검색 띠가 붙는다 */
#content.faq-wrap{ padding-top:0 !important; margin-top:0 !important; }

/* ================================================================
   1 · 어두운 검색 띠
   ★배너 높이 360px 에 맞춘다. 위 여백 100px 은 떠 있는 상단바 몫이다.
   ================================================================ */
.faq-band{
    height:360px; box-sizing:border-box;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    background:var(--faq-ink);
    /* 2026-10-01 : 위 100px 을 지워 띠 전체의 가운데에 놓음. 자료실과 같음.
       예전 값 padding:100px 20px 0; */
    padding:0 20px;
    text-align:center;
}
.faq-band-t1{
    margin:0 0 8px; font-size:30px; font-weight:600;
    color:#fff; letter-spacing:-.04em; line-height:1.35;
}
.faq-band-t2{
    margin:0 0 32px; font-size:15.5px; color:var(--faq-lt); letter-spacing:-.02em;
}

.faq-search{
    display:flex; max-width:560px; width:100%; margin:0 auto;
    background:#fff; border-radius:50px; overflow:hidden;
}
.faq-search input[type=text]{
    flex:1; height:58px; padding:0 28px; border:0; outline:none;
    font-size:16px; color:var(--faq-ink); background:transparent; letter-spacing:-.02em;
}
.faq-search input[type=text]::placeholder{ color:#A8B2BA; }
.faq-search button{
    height:58px; padding:0 38px; border:0; cursor:pointer;
    background:var(--faq-main); color:#fff;
    font-size:16px; font-weight:600; letter-spacing:-.02em;
    transition:background .25s;
}
.faq-search button:hover{ background:var(--faq-lt); }

.faq-hot{
    margin-top:24px; display:flex; align-items:center;
    justify-content:center; gap:9px; flex-wrap:wrap;
}
.faq-hot-label{ font-size:13px; color:var(--faq-gray); letter-spacing:-.02em; }
.faq-hot-btn{
    display:inline-block; padding:6px 15px; border-radius:40px;
    border:1px solid var(--faq-band-line); color:#B9C7D2;
    font-size:13px; letter-spacing:-.02em; transition:all .25s;
}
.faq-hot-btn:hover{
    border-color:var(--faq-main); background:var(--faq-main);
    color:#fff; transform:translateY(-2px);
}

/* ================================================================
   2 · 본문 바탕
   ================================================================ */
.faq-body{ background:var(--faq-soft); padding:36px 0 110px; }

/* ================================================================
   3 · 알약 탭
   ================================================================ */
.faq-tab{
    display:inline-flex; background:#fff; border-radius:40px;
    padding:5px; margin-bottom:28px;
}
.faq-tab-btn{
    display:block; padding:10px 26px; border-radius:40px;
    font-size:14.5px; color:var(--faq-gray); letter-spacing:-.02em;
    transition:all .25s;
}
.faq-tab-btn:hover{ color:var(--faq-ink); }
.faq-tab-btn.active{ background:var(--faq-ink); color:#fff; font-weight:600; }

/* ================================================================
   4 · 제품군 목록 — 가로 줄
   제품군은 넷뿐이라 격자보다 목록이 맞다.
   ================================================================ */
.faq-catlist{ background:#fff; border-radius:12px; overflow:hidden; }

.faq-catrow{
    position:relative;
    display:flex; align-items:center; gap:16px;
    padding:20px 26px;
    transition:background .25s, padding-left .25s;
}
.faq-catrow + .faq-catrow{ border-top:1px solid var(--faq-line); }
.faq-catrow::before{
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--faq-main);
    transform:scaleY(0); transform-origin:center; transition:transform .25s;
}
.faq-catrow:hover{ background:var(--faq-bnr); padding-left:32px; }
.faq-catrow:hover::before{ transform:scaleY(1); }

.faq-catrow-ico{
    flex-shrink:0; width:42px; height:42px; border-radius:50%;
    background:var(--faq-bnr); color:var(--faq-main);
    display:flex; align-items:center; justify-content:center; transition:all .25s;
}
.faq-catrow-ico svg{ width:21px; height:21px; }
.faq-catrow:hover .faq-catrow-ico{ background:var(--faq-main); color:#fff; }

.faq-catrow-name{
    flex:1; font-size:16.5px; font-weight:600;
    color:var(--faq-ink); letter-spacing:-.03em;
}
.faq-catrow:hover .faq-catrow-name{ color:var(--faq-dk); }
.faq-catrow-cnt{ flex-shrink:0; font-size:13px; color:var(--faq-gray); }

.faq-catrow-arrow{
    flex-shrink:0; width:9px; height:9px; margin-left:4px;
    border-right:2px solid #A8B2BA; border-bottom:2px solid #A8B2BA;
    transform:rotate(-45deg); transition:margin-left .25s, border-color .25s;
}
.faq-catrow:hover .faq-catrow-arrow{ border-color:var(--faq-main); margin-left:16px; }

/* ================================================================
   5 · 제품 카드 격자
   ================================================================ */
/* ★2026-08-28 — 자료실과 맞춘다. 한 줄에 다섯 */
.faq-grid{ display:grid; grid-template-columns:repeat(5,1fr); column-gap:16px; row-gap:28px; }

/* ★2026-08-28 — 자료실 카드와 같은 모양 */
.faq-card > a{
    display:block; background:#fff; border-radius:10px; overflow:hidden;
    border:1px solid #DFE6EB;
    transition:transform .25s, box-shadow .25s, border-color .25s;
}
.faq-card > a:hover{
    transform:translateY(-9px);
    border-color:var(--faq-main);
    box-shadow:0 14px 30px rgba(16,40,56,.20);
}
/* ★2026-08-28 — 자료실과 맞춘다. 카드 위 가로 띠를 쓰지 않는다. */
.faq-card-bar{ display:none; }

/* ★2026-08-28 — 자료실 카드와 같은 모양. 정사각 · 흰 바탕 */
.faq-card .img{
    position:relative; width:100%; padding-top:100%;
    background:#fff; overflow:hidden;
    transition:background .25s;
}
.faq-card > a:hover .img{ background:var(--faq-bnr); }
.faq-card .img .bg{
    position:absolute; inset:10px;
    background-size:contain; background-position:center;
    background-repeat:no-repeat; transition:transform .25s;
}
.faq-card > a:hover .img .bg{ transform:scale(1.10); }

.faq-card .text{ padding:17px 14px 20px; text-align:center; }
.faq-card-name{
    display:block; font-size:16px; font-weight:600;
    color:var(--faq-ink); letter-spacing:-.03em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.faq-card-cnt{ display:block; margin-top:8px; font-size:12.5px; color:var(--faq-main); }

/* ================================================================
   6 · 질문 목록
   ★상태 셋 — 평소 흰색 / 마우스 옅게 / 펼침 진하게
     왼쪽 선 색도 함께 달라진다. 색만으로는 티가 안 난다.
   ================================================================ */
.faq-list{ background:#fff; border-radius:12px; overflow:hidden; }
.faq-item + .faq-item{ border-top:1px solid var(--faq-line); }

.faq-q button{
    position:relative;
    display:flex; align-items:center; gap:14px;
    width:100%; padding:20px 58px 20px 26px;
    background:none; border:0; cursor:pointer; text-align:left;
    transition:background .25s, padding-left .25s;
}
.faq-q button::before{
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--faq-bar-lt);
    transform:scaleY(0); transform-origin:center; transition:transform .25s, background .25s;
}
.faq-q button:hover{ background:var(--faq-hover); padding-left:32px; }
.faq-q button:hover::before{ transform:scaleY(1); }

.faq-item.active .faq-q button{ background:var(--faq-bnr); padding-left:32px; }
.faq-item.active .faq-q button::before{ transform:scaleY(1); background:var(--faq-main); }

.faq-q-text{
    flex:1; padding-top:2px;
    font-size:16px; font-weight:500; line-height:1.6;
    color:var(--faq-ink); letter-spacing:-.03em;
}
.faq-item.active .faq-q-text{ color:var(--faq-dk); font-weight:600; }

.faq-arrow{
    position:absolute; right:26px; top:50%;
    width:10px; height:10px; margin-top:-8px;
    border-right:2px solid #A8B2BA; border-bottom:2px solid #A8B2BA;
    transform:rotate(45deg); transition:all .25s;
}
.faq-q button:hover .faq-arrow{ border-color:var(--faq-main); }
.faq-item.active .faq-arrow{
    margin-top:-3px; transform:rotate(-135deg); border-color:var(--faq-main);
}

/* Q · A 동그라미 */
.faq-qa{
    flex-shrink:0; width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700; letter-spacing:0;
    font-family:Arial, Helvetica, sans-serif; box-sizing:border-box;
    transition:all .25s;
}
.faq-qa-q{ background:var(--faq-main); color:#fff; border:2px solid var(--faq-main); }
.faq-item.active .faq-qa-q{ background:var(--faq-dk); border-color:var(--faq-dk); }
.faq-qa-a{ background:#fff; color:var(--faq-main); border:2px solid var(--faq-main); }

/* 어디 질문인지 알려 주는 딱지 — 검색 결과에만 쓴다 */
.faq-tag{
    flex-shrink:0; display:inline-block; min-width:78px;
    padding:5px 12px; border-radius:5px; text-align:center;
    font-size:12.5px; font-weight:600; letter-spacing:-.02em; white-space:nowrap;
}
.faq-tag.tag-product{ background:var(--faq-dk);   color:#fff; }
.faq-tag.tag-group{   background:var(--faq-main); color:#fff; }
.faq-tag.tag-common{  background:var(--faq-soft); color:var(--faq-gray); }

/* ================================================================
   7 · 답변
   ================================================================ */
.faq-a{ display:none; }
.faq-a-inner{
    position:relative;
    display:flex; align-items:flex-start; gap:14px;
    padding:22px 30px 26px 32px;
    background:var(--faq-bnr);
    border-top:1px solid #D3E1EC;
}
.faq-a-inner::before{
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--faq-main);
}
.faq-a-body{
    flex:1; padding-top:3px;
    font-size:15.5px; line-height:1.85; color:#3E4C57; letter-spacing:-.02em;
}
.faq-a-body p{ margin:0 0 10px; }
.faq-a-body p:last-child{ margin-bottom:0; }
.faq-a-body a{ color:var(--faq-main); text-decoration:underline; }
.faq-a-body b, .faq-a-body strong{ color:var(--faq-ink); font-weight:600; }

/* ★글머리 기호 되살리기 — 공통 CSS 가 list-style 을 없애 놓았다 */
.faq-a-body ul, .faq-a-body ol{ padding-left:24px !important; margin:10px 0 !important; }
.faq-a-body ul{ list-style:disc outside !important; }
.faq-a-body ol{ list-style:decimal outside !important; }
.faq-a-body ul li{ list-style:disc outside !important;    display:list-item !important; }
.faq-a-body ol li{ list-style:decimal outside !important; display:list-item !important; }
.faq-a-body ul ul{ list-style:circle outside !important; margin:0 !important; }
.faq-a-body ol ol{ margin:0 !important; }
/* ★들여쓰기하면 바깥 li 가 글자 없이 점만 남는다. 화면 JS 가 표시를 붙인다 */
.faq-a-body li.li-nomark{ list-style:none !important; }

.faq-a-body blockquote{
    margin:12px 0; padding:10px 0 10px 16px;
    border-left:3px solid var(--faq-lt); color:var(--faq-gray);
}
.faq-a-body table{ width:100%; margin:14px 0; border-collapse:collapse; font-size:14.5px; }
.faq-a-body table th, .faq-a-body table td{
    padding:9px 12px; border:1px solid var(--faq-line); background:#fff;
}
.faq-a-body table th{ font-weight:600; color:var(--faq-ink); }
.faq-a-body img{ max-width:100%; height:auto; }

/* ================================================================
   8 · 검색 결과 · 빈 화면
   ================================================================ */
.faq-result-head{
    margin-bottom:22px; font-size:16px; color:var(--faq-gray); letter-spacing:-.02em;
}
.faq-result-head strong{ color:var(--faq-ink); font-weight:600; }
.faq-result-head em{ font-style:normal; color:var(--faq-main); font-weight:700; }
.faq-search-reset{
    margin-left:14px; font-size:14px; color:var(--faq-main); text-decoration:underline;
}
.faq-empty{
    grid-column:1/-1; padding:80px 20px; text-align:center;
    background:#fff; border-radius:12px; font-size:15.5px; color:var(--faq-gray);
}

/* ================================================================
   9 · 되돌아가기 · 머리 상자 · 구역 제목
   ================================================================ */
.faq-back{
    display:inline-flex; align-items:center; gap:7px; margin-bottom:20px;
    font-size:14.5px; color:var(--faq-gray); transition:color .25s;
}
.faq-back:hover{ color:var(--faq-main); }
.faq-back i{ font-style:normal; font-size:16px; }

.faq-head{
    display:flex; align-items:center; gap:24px;
    margin-bottom:30px; padding:26px 30px;
    background:#fff; border-radius:12px;
}
.faq-head-img{
    flex-shrink:0; width:96px; height:96px; border-radius:10px;
    background:#F4F7F9; overflow:hidden; position:relative;
}
.faq-head-img .bg{
    position:absolute; inset:8px;
    background-size:contain; background-position:center; background-repeat:no-repeat;
}
.faq-head-text{ flex:1; }
.faq-head-name{
    display:block; font-size:24px; font-weight:700;
    color:var(--faq-ink); letter-spacing:-.04em;
}
.faq-head-sub{ display:block; margin-top:12px; font-size:14px; color:var(--faq-main); }

.faq-sec-head{ display:flex; align-items:baseline; gap:12px; margin:46px 0 16px; }
.faq-sec-head:first-of-type{ margin-top:0; }
.faq-sec-head strong{
    font-size:19px; font-weight:700; color:var(--faq-ink); letter-spacing:-.03em;
}
.faq-sec-head span{ font-size:13.5px; color:var(--faq-gray); }

/* ★머리 상자가 있는 화면은 그 안쪽 여백(30px)에 왼쪽 끝을 맞춘다.
   맞추지 않으면 세로선이 세 개로 보여 눈에 걸린다. */
.faq-head ~ .faq-sec-head{ padding-left:30px; }
.faq-head ~ .faq-grid{ padding-left:30px; padding-right:30px; }
.faq-head ~ .faq-list{ margin-left:30px; margin-right:30px; }
.faq-head ~ .faq-result-head{ padding-left:30px; }
.faq-head ~ .faq-empty{ margin-left:30px; margin-right:30px; }

/* ================================================================
   10 · 모바일
   ================================================================ */
@media all and (max-width:1024px){
    .faq-grid{ grid-template-columns:repeat(4,1fr); column-gap:14px; row-gap:22px; }
}
@media all and (max-width:768px){
    .faq-band{ height:auto; padding:120px 18px 40px; }
    .faq-band-t1{ font-size:22px; }
    .faq-band-t2{ font-size:13.5px; margin-bottom:22px; }
    .faq-search input[type=text]{ height:48px; padding:0 20px; font-size:15px; }
    .faq-search button{ height:48px; padding:0 24px; font-size:15px; }
    .faq-hot{ margin-top:18px; gap:7px; }
    .faq-hot-label{ width:100%; margin-bottom:3px; font-size:12px; }
    .faq-hot-btn{ font-size:12px; padding:5px 12px; }

    .faq-body{ padding:26px 0 70px; }
    .faq-tab{ margin-bottom:20px; padding:4px; }
    .faq-tab-btn{ padding:8px 17px; font-size:13.5px; }

    .faq-catrow{ padding:16px 18px; gap:13px; }
    .faq-catrow:hover{ padding-left:22px; }
    .faq-catrow-ico{ width:36px; height:36px; }
    .faq-catrow-ico svg{ width:18px; height:18px; }
    .faq-catrow-name{ font-size:15px; }
    .faq-catrow-cnt{ font-size:12px; }

    .faq-grid{ grid-template-columns:repeat(3,1fr); column-gap:11px; row-gap:18px; }
    .faq-card > a:hover{ transform:translateY(-5px); }
    .faq-card .text{ padding:13px 8px 16px; }
    .faq-card-name{ font-size:14px; }
    .faq-card-cnt{ font-size:11.5px; margin-top:6px; }

    .faq-q button{ padding:17px 42px 17px 18px; gap:10px; }
    .faq-q button:hover{ padding-left:24px; }
    .faq-item.active .faq-q button{ padding-left:24px; }
    .faq-q-text{ font-size:15px; }
    .faq-qa{ width:26px; height:26px; font-size:12.5px; }
    .faq-tag{ min-width:auto; font-size:11.5px; padding:4px 9px; }
    .faq-arrow{ right:16px; }

    .faq-a-inner{ padding:18px 18px 22px 24px; gap:10px; }
    .faq-a-body{ font-size:14.5px; }

    .faq-head{ gap:15px; padding:17px; margin-bottom:26px; }
    .faq-head-img{ width:70px; height:70px; }
    .faq-head-name{ font-size:19px; }
    .faq-head-sub{ margin-top:8px; }
    .faq-sec-head{ margin:34px 0 13px; }
    .faq-sec-head strong{ font-size:17px; }

    .faq-head ~ .faq-sec-head{ padding-left:17px; }
    .faq-head ~ .faq-grid{ padding-left:17px; padding-right:17px; }
    .faq-head ~ .faq-list{ margin-left:17px; margin-right:17px; }
    .faq-head ~ .faq-result-head{ padding-left:17px; }
    .faq-head ~ .faq-empty{ margin-left:17px; margin-right:17px; }
}