/* FAQ 문답 목록 스타일 — 랜딩과 요금제 페이지가 함께 쓴다(시안 rev1.4, #318).
 * 템플릿: templates/core/_faq_list.html. 규칙은 모두 #faq 아래로 범위를 잡고, 색 변수도
 * #faq 안에서 정의한다(--fq-*) — 요금제 페이지는 랜딩 CSS 를 불러오지 않는다.
 */
#faq{
  --fq-surface:#ffffff; --fq-fg:#161a23; --fq-muted:#5f6878; --fq-line:#dfe3ea; --fq-well:#f3f5f9; --fq-well-line:#d3d8e2;
  --fq-blue:#2c62f5; --fq-blue-fg:#ffffff; --fq-blue-soft:#e8eefe; --fq-blue-line:#a9c0fb;
  --fq-amber:#8a4d0a; --fq-amber-soft:#fdeedd; --fq-amber-line:#efc78f;
  --fq-f-pdf:#d93a3f; --fq-f-txt:#5f6877; --fq-f-doc:#2c62f5; --fq-f-csv:#14934f; --fq-f-hwp:#0b8398; --fq-f-fg:#ffffff;
  --fq-shadow:0 2px 10px rgba(30,40,70,.05);
  --fq-font:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
#faq .faq-body{display:flex;flex-direction:column;gap:14px;font-family:var(--fq-font);color:var(--fq-fg);font-size:15px;line-height:1.6;text-align:left}
#faq .list{display:flex;flex-direction:column;gap:12px}
#faq details{background:var(--fq-surface);border-radius:14px;box-shadow:var(--fq-shadow);border:1px solid transparent;min-width:0}
#faq details[open]{border-color:var(--fq-blue-line)}
#faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:14px}
#faq summary::-webkit-details-marker{display:none}
#faq summary:focus-visible{outline:3px solid var(--fq-blue);outline-offset:2px}
#faq .bar{display:flex;justify-content:flex-end}
#faq .allbtn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px 0 12px;border-radius:99px;border:1px solid var(--fq-well-line);background:var(--fq-surface);color:var(--fq-fg);
  font:700 14px/1 var(--fq-font);cursor:pointer}
#faq .allbtn:hover{color:var(--fq-blue);border-color:var(--fq-blue-line);background:var(--fq-blue-soft)}
#faq .allbtn:focus-visible{outline:3px solid var(--fq-blue);outline-offset:2px}
#faq .allbtn[aria-expanded="true"]{color:var(--fq-blue);border-color:var(--fq-blue-line);background:var(--fq-blue-soft)}
#faq .allbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#faq .allbtn .i-none{display:none}
#faq .allbtn[aria-expanded="true"] .i-all{display:none}
#faq .allbtn[aria-expanded="true"] .i-none{display:inline}
#faq .q{flex:none;font-size:13px;font-weight:900;color:var(--fq-blue);background:var(--fq-blue-soft);border-radius:8px;padding:2px 9px;margin-top:2px;letter-spacing:.04em}
#faq .qt{flex:1;min-width:0;font-size:17px;font-weight:700;line-height:1.5;text-wrap:balance}
#faq .chev{flex:none;width:9px;height:9px;margin-top:9px;border-right:2px solid var(--fq-muted);border-bottom:2px solid var(--fq-muted);transform:rotate(45deg);transition:transform .15s}
#faq details[open] .chev{transform:rotate(-135deg);margin-top:13px}
@media (prefers-reduced-motion:reduce){
#faq .chev{transition:none}
}
#faq .a{padding:0 20px 22px 68px;display:flex;flex-direction:column;gap:12px;color:var(--fq-fg)}
#faq .a p{margin:0}
#faq .a b{font-weight:700}
#faq .a ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
#faq .a ul ul{margin-top:6px}
#faq .a li::marker{color:var(--fq-muted)}
#faq .note{font-size:13.5px;color:var(--fq-muted)}
#faq .note a,#faq .a a.go{color:var(--fq-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#faq .box{background:var(--fq-well);border:1px solid var(--fq-well-line);border-radius:10px;padding:14px 16px;font-size:14px;display:flex;flex-direction:column;gap:10px}
#faq .box .lbl{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--fq-muted)}
#faq .chips{display:flex;flex-wrap:wrap;gap:6px}
#faq .chips span{font-size:13px;font-weight:700;padding:2px 10px;border-radius:6px;background:var(--fq-surface);color:var(--fq-muted);text-decoration:line-through;text-decoration-thickness:1px;border:1px solid var(--fq-line)}
#faq .chips span.hit{background:var(--fq-blue-soft);color:var(--fq-blue);text-decoration:none;border-color:var(--fq-blue-line)}
#faq .warn{background:var(--fq-amber-soft);border:1px solid var(--fq-amber-line);color:var(--fq-amber);border-radius:10px;padding:12px 16px;font-size:14px;display:flex;gap:10px}
#faq .warn i{flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--fq-amber);color:var(--fq-amber-soft);display:grid;place-items:center;font-style:normal;font-weight:900;font-size:12px}
#faq .warn b{font-weight:900}
#faq .files{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
#faq .file{--c:var(--fq-f-txt);position:relative;width:48px;height:60px;border:1.5px solid var(--c);border-radius:6px;background:var(--fq-surface);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
#faq .file::before{content:"";position:absolute;top:0;right:0;width:13px;height:13px;background:linear-gradient(225deg,var(--fq-surface) 50%,var(--c) 50%);border-bottom-left-radius:3px}
#faq .file::after{content:"";position:absolute;left:7px;top:19px;width:calc(100% - 14px);height:14px;
  background:repeating-linear-gradient(180deg,var(--c) 0 2px,transparent 2px 5px);opacity:.35;border-radius:2px}
#faq .file b{position:relative;z-index:1;background:var(--c);color:var(--fq-f-fg);font-size:10px;font-weight:900;letter-spacing:.03em;text-align:center;padding:3px 0 4px}
#faq .file.pdf{--c:var(--fq-f-pdf)}
#faq .file.doc{--c:var(--fq-f-doc)}
#faq .file.csv{--c:var(--fq-f-csv)}
#faq .file.hwp{--c:var(--fq-f-hwp)}
#faq .tags{display:flex;flex-wrap:wrap;gap:8px}
#faq .tag{font-size:14px;font-weight:900;letter-spacing:.04em;padding:6px 14px;border-radius:8px;background:var(--fq-blue);color:var(--fq-blue-fg);box-shadow:0 2px 6px rgba(44,98,245,.25)}
#faq .scroll{overflow-x:auto;border:1px solid var(--fq-well-line);border-radius:10px}
#faq table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;line-height:1.55}
#faq th,#faq td{padding:11px 14px;text-align:center;border-bottom:1px solid var(--fq-line);font-variant-numeric:tabular-nums}
#faq th:first-child,#faq td:first-child{text-align:left;font-weight:700;white-space:nowrap}
#faq thead th{background:var(--fq-well);font-weight:900}
#faq tbody tr:last-child td{border-bottom:0}
#faq td.free{color:var(--fq-muted)}
#faq .contact{text-align:center;color:var(--fq-muted);font-size:14px;display:flex;flex-direction:column;gap:2px}
#faq .contact b{color:var(--fq-fg)}
@media (max-width:560px){
#faq summary{padding:16px 14px;gap:10px}
#faq .a{padding:0 14px 20px 14px}
#faq .qt{font-size:16px}
}
/* 흰 배경에서 카드를 테두리로 구분한다(시안 "통일 보정"). */
#faq details{border-color:var(--fq-line)}
#faq details[open]{border-color:var(--fq-blue-line)}
/* 넓은 표(Q1)가 목록 폭을 넓히지 않고 상자 안에서만 스크롤되게 한다. */
#faq details,#faq .a{min-width:0}