/* Support.dc.html 에서 만듦 — 손으로 고치지 않는다(node portal/build.js) */
body{margin:0;background:#ffffff;font-family:'Pretendard Variable','Pretendard',sans-serif}
/* 고객센터 · 상담하기 — 이 파일은 make_support.js 가 만든다(틀은 content/support/Support.tpl.html).
   대화창 안은 지금 사이트 chat.js 가 그린 화면 구조 그대로이고 모양은 chat.css 에 있다. 여기는 페이지 틀(왼쪽 제목 · 안내)만. */
/* 배치(2026.11.05 사용자): 로그인 · 회원가입처럼 왼쪽 제목 · 안내, 오른쪽 대화창.
   대화창 왼쪽 끝 = 헤더 [고객센터] 메뉴 글자 시작(1440 에서 x 579), 오른쪽 끝 = 로그인 박스와 같은 1320.
   왼쪽 칸 395 + 사이 64 = 헤더 로고 108 + 48 + 메뉴 셋(102 · 38 · 55) + 사이 36 × 3. 헤더 메뉴가 바뀌면 같이 고친다. */
.sup-body{padding-top:var(--hero-top);padding-bottom:128px}
.sup-grid{display:grid;grid-template-columns:395px minmax(0,1fr);gap:64px;align-items:start}
.sup-left{display:flex;flex-direction:column;min-width:0}
.sup-left h1{font-size:clamp(32px,4.4vw,48px);line-height:1.25;font-weight:800;letter-spacing:-0.03em;color:var(--ink)}
.sup-left .sub{margin-top:var(--hero-gap-sub);font-size:20px;line-height:1.6;color:var(--mut);text-wrap:pretty;word-break:keep-all}
/* 시간 · 괄호가 줄 끝에서 갈라지지 않게 */
.sup-left .sub .nw{white-space:nowrap}
.sup-side{display:flex;flex-direction:column;gap:48px;margin-top:var(--hero-gap-act)}
/* 대화창 높이 = 왼쪽 칸 높이(질문을 모두 닫은 상태) — 양쪽 아래 끝을 맞춘다 */
.sup-chat{height:687px}
.sup-h{font-size:19px;line-height:1.4;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
/* 직접 문의(2026.11.05 사용자): 아이콘 + 내용 알약 버튼 셋 한 줄(카카오톡 · 전화번호 · 이메일 — 주소는 title · 읽기용 글). 상담 시간은 제목 아래 설명에 있다 */
.sup-pills{display:flex;gap:8px;margin-top:16px}
.sup-pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 6px;border-radius:99px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;transition:box-shadow .2s ease,transform .2s var(--ease)}
.sup-pill:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sup-pill:active{transform:scale(.97)}
.sup-pill:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.sup-pill .num{font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:15px;font-weight:600;letter-spacing:.01em}
.sup-tile{width:30px;height:30px;flex:none;border-radius:99px;display:grid;place-items:center;background:var(--tint);color:var(--pri-d)}
.sup-tile.kakao{background:#fee500;color:#191919}
.sup-faq-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sup-faq-head a{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 14px;border-radius:99px;background:#ffffff;font-size:14px;font-weight:700;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s ease,transform .2s var(--ease)}
.sup-faq-head a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sup-faq-head a:active{transform:scale(.97)}
.sup-faq-head a:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.sup-faq-list{margin-top:8px}
/* 업데이트 목록(2026.11.05 사용자): 자주 묻는 질문 목록 마지막 줄 — 노션 새 창 */
.sup-faq-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5;font-weight:700;color:var(--ink);transition:color .2s ease}
.sup-faq-link svg{flex:none;color:var(--mut);transition:color .2s ease}
.sup-faq-link:hover,.sup-faq-link:hover svg{color:var(--pri-d)}
.sup-faq-link:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:8px}
.sup-faq details{border-top:1px solid var(--line)}
.sup-faq details:first-child{border-top:0}
.sup-faq summary{word-break:keep-all;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 0;font-size:16px;line-height:1.5;font-weight:700;color:var(--ink);cursor:pointer;transition:color .2s ease}
.sup-faq summary:hover{color:var(--pri-d)}
.sup-faq summary:hover svg{color:var(--pri-d)}
.sup-faq summary::-webkit-details-marker{display:none}
.sup-faq summary svg{flex:none;margin-top:2px;color:var(--mut);transition:transform .25s var(--ease)}
.sup-faq details[open] summary svg{transform:rotate(45deg)}
.sup-faq summary:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:8px}
.sup-faq .ans{padding-bottom:18px}
.sup-faq .ans p{font-size:15px;line-height:1.7;color:var(--mut);word-break:keep-all}
.sup-faq .ans p + p{margin-top:8px}
/* 이 화면이 상담 자체라 플로팅 [AI 상담] 은 숨기고, 카카오톡도 직접 문의에 있어 겹치지 않게 숨긴다(2026.11.05) */
.fab .f-ai,.fab .f-kakao{display:none}
/* 1080 이하: 한 줄로 — 제목 → 대화창 → 자주 묻는 질문(+ 업데이트 목록) → 직접 문의 */
@media (max-width:1080px){
.sup-grid{grid-template-columns:minmax(0,1fr);gap:0}
.sup-left,.sup-side{display:contents}
.sup-left h1{order:1}
.sup-left .sub{order:2}
.sup-chat{order:3;margin-top:var(--hero-gap-act);height:720px}
.sup-side .sup-faq{order:4;margin-top:56px}
.sup-side .sup-ask{order:5;margin-top:48px}
}
@media (max-width:640px){
.sup-body{padding-top:var(--hero-top);padding-bottom:88px}
.sup-left .sub{font-size:16px}
.sup-chat{margin-top:28px;height:min(680px,calc(100svh - 96px))}
.sup-side .sup-faq{margin-top:48px}
.sup-side .sup-ask{margin-top:40px}
.sup-pills{flex-wrap:wrap}
/* 휴대폰: 떠 있는 버튼이 입력창을 가리지 않게 숨긴다(카카오톡은 아래 안내에 있다) */
.fab{display:none}
}