/* 자주 묻는 질문 (/faq) — 대담함은 한 곳: 첫 화면의 큰 검색 줄. 검색 · 분류는 Livewire(서버)가 거르고, 맞는 답을 펼쳐 찾은 말에 <mark> */
/* 답이 이 페이지의 본문 — 다른 페이지(15)보다 한 단계 크게 읽히게 17 (나이 있는 독자 고려) */
main .faq-list .a { font-size: var(--fs-m); line-height: 1.8; }
.faq-head { padding-bottom: clamp(48px, 6vw, 72px); }
.faq-head .lede { margin-top: 18px; }
.ask { position: relative; margin-top: clamp(32px, 4vw, 44px); max-width: 760px; }
.ask-ico { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--cobalt); pointer-events: none; }
.ask input { width: 100%; height: 72px; padding: 0 24px 0 62px; border: 0; border-radius: 20px; background: var(--white); color: var(--ink); font: 500 var(--fs-l)/1 var(--font); letter-spacing: -.03em; box-shadow: inset 0 0 0 1.5px var(--line), 0 18px 44px rgba(42, 75, 232, .08); -webkit-appearance: none; appearance: none; }
.ask input::placeholder { color: #8C94A6; font-weight: 500; }
.ask input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cobalt), 0 18px 44px rgba(42, 75, 232, .14); }
.ask input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; cursor: pointer; background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

.faq-sec { padding: clamp(24px, 3vw, 40px) 0 clamp(88px, 10vw, 128px); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8.4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cats { position: sticky; top: 104px; display: grid; gap: 2px; }
.cats button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: none; text-align: left; font-size: var(--fs-s); font-weight: 500; letter-spacing: -.02em; color: var(--ink-2); }
@media (hover: hover) { .cats button:hover { background: var(--mist); color: var(--ink); } }
.cats button span { font-size: var(--fs-xs); font-weight: 500; color: var(--slate); font-variant-numeric: tabular-nums; }
.cats button[aria-pressed="true"] { background: var(--tint); color: var(--cobalt); font-weight: 650; }
.cats button[aria-pressed="true"] span { color: var(--cobalt); }
.cats button.zero { color: #9AA2B3; } .cats button.zero span { color: #B3BAC7; }

.faq-main { scroll-margin-top: 104px; min-width: 0; }
.result { margin-bottom: 20px; font-size: var(--fs-s); color: var(--ink-2); }
.result b { color: var(--ink); font-weight: 650; }
.grp { margin-bottom: 64px; }
.grp h2 { font-size: var(--fs-xl); line-height: 1.3; font-weight: 750; letter-spacing: -.035em; }
.grp-desc { margin-top: 4px; font-size: var(--fs-s); color: var(--slate); }
.grp .faq-list { margin-top: 20px; }
.faq-list summary h3 { font: inherit; letter-spacing: inherit; }
@media (hover: hover) { .faq-list summary:hover h3 { color: var(--cobalt); } }
.faq-list details { scroll-margin-top: 104px; }
.faq-list .a { padding-right: 32px; }
mark { background: var(--peri-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

.empty { margin-bottom: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.empty p { font-size: var(--fs-m); color: var(--ink-2); max-width: 30em; }
.empty-acts { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.empty .btn { height: 44px; padding: 0 18px; font-size: var(--fs-s); }

.more { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; padding: clamp(26px, 3vw, 36px); border-radius: 22px; background: var(--mist); }
.more h2 { font-size: var(--fs-xl); line-height: 1.3; font-weight: 750; letter-spacing: -.035em; }
.more p { margin-top: 8px; font-size: var(--fs-s); color: var(--ink-2); max-width: 30em; }
.more .yt { margin-top: 12px; }
.more .yt .link { margin-left: 6px; }
.more .acts { display: grid; gap: 10px; }
.btn-kakao { gap: 8px; background: #FEE500; color: #191919; } @media (hover: hover) { .btn-kakao:hover { background: #F5DC00; } }

@media (max-width: 860px) {
    .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .cats { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
    .cats button { padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
    .cats button[aria-pressed="true"] { box-shadow: none; }
    .more { grid-template-columns: minmax(0, 1fr); }
    .faq-list .a { padding-right: 4px; }
}
.ask-hit, .m-more-row { display: none; }
/* 860px 이하 — 공용 CSS 가 html 에 scroll-padding-top(머리 캡슐 자리)을 주므로 여기선 틈만 */
@media (max-width: 860px) { .faq-main, .faq-list details { scroll-margin-top: 16px; } }
/* 모바일 덜어내기 */
@media (max-width: 760px) {
    .ask-hit:not([hidden]) { display: block; margin-top: 10px; padding-left: 4px; font-size: var(--fs-s); color: var(--ink-2); }
    .ask-hit b { color: var(--cobalt); font-weight: 650; }
    .result { display: none; }
    .faq-grid { gap: 20px; }
    .cats { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none; }
    .cats::-webkit-scrollbar { display: none; }
    .cats button { flex: none; }
    .grp { margin-bottom: 40px; }
    .grp-desc { display: none; }
    .grp .faq-list { margin-top: 10px; }
    .faq-list summary { padding: 18px 2px; }
    .m-more-row:not([hidden]) { display: block; border-bottom: 1px solid var(--line); }
    .m-more-row .m-more { width: 100%; min-height: 52px; justify-content: flex-start; padding: 0 2px; }
    .more { gap: 16px; }
}
@media (max-width: 560px) {
    .ask input { height: 60px; padding-left: 52px; font-size: var(--fs-m); border-radius: 16px; }
    .ask-ico { left: 18px; }
    .grp h2 { font-size: var(--fs-l); }
    .more .btn { width: 100%; }
}