@charset "utf-8";

/* 자주하시는 질문 스킨.

   시안(FAQ-개선시안.html)의 1b "헬프센터 패널" 을 뼈대로 하고, 분류만 1a
   "에디토리얼 리스트" 의 가로 칩 줄을 쓴다. 치수는 시안에서 그대로 재 왔고
   — 카드 16px, 칩 36px/반경 99px, 컨트롤 9~10px, 행 안쪽 18px — 색만
   사이트 팔레트로 바꾼다.

   시안은 크림 계열(#faf8f4 · #ece7dd · #4a4640)인데 화이트톤으로 옮겨
   달라고 해서 --clarity-* 토큰으로 적는다. 그러면 다크도 함께 따라온다.

        시안 #fff               ->  --clarity-surface
        시안 #ddd6c9            ->  --clarity-border
        시안 #ece7dd · #f0ece4  ->  --faq-line (테두리보다 옅은 안쪽 선)
        시안 #fbfaf7 · #faf8f4  ->  --clarity-surface-soft
        시안 oklch(.55 .14 250) ->  --clarity-primary

   선택자가 왜 이렇게 긴가. 이 파일은 테마 CSS 보다 **먼저** 실리고 테마는
   id 를 낀 선택자를 쓴다. 클래스만으로 적으면 뒤에 오는 테마가 이긴다.
   그래서 루트에 .faq-skin 표식을 달고 한 단계 올린다. */

body.clarity-page #faq_wrap.faq-skin {
    --faq-line: color-mix(in oklch, var(--clarity-border) 55%, var(--clarity-surface));

    margin: 0;
    overflow: hidden;
    border: 1px solid var(--clarity-border);
    border-radius: 16px;
    background: var(--clarity-surface);
}

/* 제목 옆 검색칸. 마크업은 테마 머리줄이 낸다(head.layout.php 의 faq 분기).
   그래서 #faq_wrap 밖이라 :has() 로 이 화면에서만 잡는다. */
body.clarity-page:has(#faq_wrap.faq-skin) .clarity-faq-search {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 330px;
    max-width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--clarity-border);
    border-radius: 10px;
    background: var(--clarity-surface-soft);
}
body.clarity-page:has(#faq_wrap.faq-skin) .clarity-faq-search input[type="text"] {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--clarity-text);
    font-size: 14px;
}
/* 막대가 자기 포커스 표시를 가지므로 안의 입력에 걸리는 테마의 범용 규칙을
   끈다. 그대로 두면 링이 안팎으로 겹쳐 두 겹이 된다. */
body.clarity-page:has(#faq_wrap.faq-skin) .clarity-faq-search input[type="text"]:focus { box-shadow: none !important; }
body.clarity-page:has(#faq_wrap.faq-skin) .clarity-faq-search input[type="text"]:focus-visible { outline: 0; }
body.clarity-page:has(#faq_wrap.faq-skin) .clarity-faq-search:focus-within {
    border-color: var(--clarity-primary);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--clarity-primary) 22%, transparent);
}
body.clarity-page:has(#faq_wrap.faq-skin) .clarity-faq-search button {
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--clarity-muted);
    cursor: pointer;
}
body.clarity-page:has(#faq_wrap.faq-skin) .clarity-faq-search button:hover { color: var(--clarity-primary); }

/* ── 분류 줄 ───────────────────────────────────────────────────

   시안 1a 의 가로 칩. 왼쪽 기둥(1b)으로 세우면 분류가 하나뿐일 때 210px 이
   빈 채로 남는다. 칩은 몇 개든 줄을 채우고 넘치면 다음 줄로 접힌다.

   지금 분류는 채워 그리고 나머지는 테두리만 둔다. 파랑은 '질문 추가' 가
   가져가므로 켜진 칩은 글자색으로 채운다 — 시안도 그렇게 나눈다. */
body.clarity-page #faq_wrap.faq-skin .faq-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 24px;
}
body.clarity-page #faq_wrap.faq-skin .faq-cats-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* nav 는 자리만 내주고 칩은 바깥 flex 에 그대로 얹힌다. */
body.clarity-page #faq_wrap.faq-skin .faq-chips { display: contents; }
body.clarity-page #faq_wrap.faq-skin .faq-chips > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* 테마는 분류 목록을 테두리 있는 상자로 감싼다(default.css:344 —
   #bo_cate ul). 시안 1a 는 칩이 맨바닥에 나란히 놓인 모습이라 그 상자를
   걷는다. 앞선 규칙이 border 를 아예 적지 않아 테마 것이 그대로 남아
   있었다 — 특이도가 높아도 선언하지 않은 속성은 물려받는다. */
body.clarity-page #faq_wrap.faq-skin .faq-chips ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    list-style: none;
}
body.clarity-page #faq_wrap.faq-skin .faq-chips li { display: block; padding: 0; }
body.clarity-page #faq_wrap.faq-skin .faq-chips a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 17px;
    border: 1px solid var(--clarity-border);
    border-radius: 99px;
    background: var(--clarity-surface);
    box-shadow: none;
    color: var(--clarity-text-soft);
    font-size: 13.5px;
    font-weight: 400;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
body.clarity-page #faq_wrap.faq-skin .faq-chips a:hover { border-color: var(--clarity-text); color: var(--clarity-text); }
body.clarity-page #faq_wrap.faq-skin .faq-chips #bo_cate_on {
    border-color: var(--clarity-text);
    background: var(--clarity-text);
    color: var(--clarity-surface);
    font-weight: 600;
}
/* 분류 관리는 지금 있는 것이 아니라 더하는 자리라 점선으로 구분한다. */
body.clarity-page #faq_wrap.faq-skin .faq-chip-manage {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px dashed var(--clarity-border-strong);
    border-radius: 99px;
    background: transparent;
    color: var(--clarity-muted);
    font-size: 13px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
body.clarity-page #faq_wrap.faq-skin .faq-chip-manage:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }
body.clarity-page #faq_wrap.faq-skin .faq-btn-add {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 15px;
    border: 1px solid var(--clarity-primary);
    border-radius: 9px;
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
body.clarity-page #faq_wrap.faq-skin .faq-btn-add:hover { background: var(--clarity-primary); color: var(--clarity-primary-ink); }

/* ── 목록 쪽 ───────────────────────────────────────────────────── */

body.clarity-page #faq_wrap.faq-skin .faq-main { padding: 20px 28px 32px; }

/* 공통 버튼 */
body.clarity-page #faq_wrap.faq-skin :is(.faq-btn-quiet, .faq-btn-outline) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.clarity-page #faq_wrap.faq-skin .faq-btn-quiet {
    height: 28px;
    padding: 0 11px;
    border-radius: 7px;
    border-color: var(--clarity-border);
    background: var(--clarity-surface);
    color: var(--clarity-muted);
    font-weight: 500;
}
body.clarity-page #faq_wrap.faq-skin .faq-btn-quiet:hover { border-color: var(--clarity-border-strong); color: var(--clarity-text); }
body.clarity-page #faq_wrap.faq-skin .faq-btn-outline {
    height: 38px;
    padding: 0 18px;
    border-radius: 9px;
    border-color: var(--clarity-text);
    color: var(--clarity-text);
    font-size: 13.5px;
}
body.clarity-page #faq_wrap.faq-skin .faq-btn-outline:hover { background: var(--clarity-text); color: var(--clarity-surface); }
body.clarity-page #faq_wrap.faq-skin .faq-btn-plain {
    padding: 0;
    border: 0;
    background: none;
    color: var(--clarity-text-soft);
    font-size: 12.5px;
    cursor: pointer;
}
body.clarity-page #faq_wrap.faq-skin .faq-btn-plain:hover { color: var(--clarity-text); }

/* 목록 위 줄 */
body.clarity-page #faq_wrap.faq-skin .faq-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 6px;
}
body.clarity-page #faq_wrap.faq-skin .faq-count { margin: 0; color: var(--clarity-muted); font-size: 12.5px; }
body.clarity-page #faq_wrap.faq-skin .faq-count strong { color: var(--clarity-text); font-weight: 600; }
body.clarity-page #faq_wrap.faq-skin .faq-toolbar-actions { display: flex; align-items: center; gap: 8px; }

/* 질문 목록 */
body.clarity-page #faq_wrap.faq-skin #faq_con > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.clarity-page #faq_wrap.faq-skin #faq_con ol { margin: 0; padding: 0; list-style: none; }
body.clarity-page #faq_wrap.faq-skin #faq_con li {
    position: static;
    border: 0;
    border-top: 1px solid var(--faq-line);
    background: transparent;
}
body.clarity-page #faq_wrap.faq-skin #faq_con h3 { min-height: 0; margin: 0; padding: 0; }

/* 질문 줄. 줄 전체가 여닫는 단추다. */
body.clarity-page #faq_wrap.faq-skin .faq-q {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    text-align: left;
    cursor: pointer;
}
body.clarity-page #faq_wrap.faq-skin .faq-q:hover { background: var(--clarity-surface-soft); }
body.clarity-page #faq_wrap.faq-skin .faq-q:focus-visible { outline: 2px solid var(--clarity-primary); outline-offset: -2px; }
body.clarity-page #faq_wrap.faq-skin .faq-num {
    flex: none;
    width: 22px;
    color: var(--clarity-muted);
    font-family: var(--clarity-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
body.clarity-page #faq_wrap.faq-skin .faq-q-text {
    flex: 1;
    min-width: 0;
    color: var(--clarity-text);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.5;
    text-wrap: pretty;
}
/* 검색해서 들어왔을 때 코어가 씌우는 표식. 배경만 옅게 깔아 눈에 띄게 한다. */
body.clarity-page #faq_wrap.faq-skin .sch_word {
    padding: 0 2px;
    border-radius: 3px;
    background: color-mix(in oklch, var(--clarity-primary) 16%, transparent);
    color: inherit;
}
/* 펼침 표시. 글자가 아니라 도형이라 글꼴에 기대지 않는다. */
body.clarity-page #faq_wrap.faq-skin .faq-chev {
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 1.5px solid var(--clarity-muted);
    border-bottom: 1.5px solid var(--clarity-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease, border-color .2s ease;
}
body.clarity-page #faq_wrap.faq-skin .faq-q[aria-expanded="true"] .faq-chev {
    border-color: var(--clarity-primary);
    transform: rotate(-135deg) translate(-2px, -2px);
}
body.clarity-page #faq_wrap.faq-skin .faq-q[aria-expanded="true"] .faq-q-text { color: var(--clarity-primary); }

/* 답변 */
body.clarity-page #faq_wrap.faq-skin .con_inner { display: block; padding: 0; }
body.clarity-page #faq_wrap.faq-skin .con_inner[hidden] { display: none; }
body.clarity-page #faq_wrap.faq-skin .faq-a {
    margin: 0 6px 18px 36px;
    padding: 18px 20px;
    border: 1px solid var(--faq-line);
    border-radius: 12px;
    background: var(--clarity-surface-soft);
    color: var(--clarity-text-soft);
    font-size: 14.5px;
    letter-spacing: -.01em;
    line-height: 1.8;
    text-wrap: pretty;
}
body.clarity-page #faq_wrap.faq-skin .faq-a > :first-child { margin-top: 0; }
body.clarity-page #faq_wrap.faq-skin .faq-a img { max-width: 100%; height: auto; border-radius: var(--clarity-radius-sm); }
body.clarity-page #faq_wrap.faq-skin .faq-a-admin {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--faq-line);
}

/* 빈 목록 */
body.clarity-page #faq_wrap.faq-skin .faq-empty {
    padding: 56px 24px;
    border-top: 1px solid var(--faq-line);
    text-align: center;
}
body.clarity-page #faq_wrap.faq-skin .faq-empty strong { display: block; color: var(--clarity-text); font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
body.clarity-page #faq_wrap.faq-skin .faq-empty span { display: block; margin-top: 6px; color: var(--clarity-muted); font-size: 13.5px; }

/* 페이지 넘김 */
body.clarity-page #faq_wrap.faq-skin .pg_wrap { margin: 20px 0 0; padding: 0; }

/* 못 찾았을 때 갈 곳 */
body.clarity-page #faq_wrap.faq-skin .faq-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--faq-line);
}
body.clarity-page #faq_wrap.faq-skin .faq-more p { margin: 0; color: var(--clarity-text-soft); font-size: 13.5px; line-height: 1.6; }

/* 위·아래 여분 영역은 관리자가 넣었을 때만 자리를 차지한다. */
body.clarity-page :is(#faq_hhtml, #faq_thtml):empty { display: none; }
body.clarity-page :is(#faq_himg, #faq_timg) img { max-width: 100%; height: auto; }

/* ── 좁은 화면 ─────────────────────────────────────────────────── */

@media (max-width: 47.9375rem) {
    body.clarity-page:has(#faq_wrap.faq-skin) .clarity-faq-search { width: 100%; }
    /* 분류가 많으면 접히는 대신 가로로 굴린다. 좁은 화면에서 칩이 세 줄쯤
       쌓이면 정작 질문이 화면 밖으로 밀린다. */
    body.clarity-page #faq_wrap.faq-skin .faq-cats { margin-bottom: 16px; }
    body.clarity-page #faq_wrap.faq-skin .faq-cats-list { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
    body.clarity-page #faq_wrap.faq-skin .faq-chips ul { flex-wrap: nowrap; }
    body.clarity-page #faq_wrap.faq-skin :is(.faq-chips a, .faq-chip-manage) { white-space: nowrap; }

    body.clarity-page #faq_wrap.faq-skin .faq-main { padding: 16px 16px 24px; }
    body.clarity-page #faq_wrap.faq-skin .faq-q { gap: 10px; padding: 16px 2px; }
    body.clarity-page #faq_wrap.faq-skin .faq-q-text { font-size: 14.5px; }
    body.clarity-page #faq_wrap.faq-skin .faq-a { margin-left: 0; padding: 14px 16px; font-size: 14px; }
}