/* =========================================================
   고객센터(공지사항·FAQ)·문의하기(제품 문의·기술문의) 페이지 스타일 — layout support=true 일 때만 로드
   색은 사이트 변수(--text, --surface, --line, --accent, --grad …)만 사용 → 라이트/다크 자동
   ========================================================= */

/* ---------- 공통: 상단(히어로) ---------- */
.sp-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.sp-hero .ex-hero-in { align-items: end; }
.sp-hero h1 { margin-top: var(--s3); }



/* ---------- 공통: 본문 영역 ---------- */
.sp-body { padding-block: clamp(40px, 5vw, 72px); }
.sp-narrow { max-width: 920px; margin-inline: auto; }

/* 도구 막대: 분류 칩 + 검색 + 버튼 */
.sp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: var(--s5); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.sp-chip span { font-size: 12px; font-weight: 500; opacity: .75; }
.sp-chip:hover { color: var(--text); border-color: var(--text-2); }
.sp-chip[aria-pressed="true"], .sp-chip[aria-current] { background: var(--text); border-color: var(--text); color: var(--bg); }
.sp-search { position: relative; display: flex; flex: 0 1 320px; }
.sp-search input { width: 100%; height: 42px; padding: 0 44px 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.sp-search input::placeholder { color: var(--text-2); opacity: .8; }
.sp-search input:focus { outline: none; border-color: var(--text-2); box-shadow: 0 0 0 4px var(--surface-2); }
.sp-search button { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.sp-search button svg { width: 18px; height: 18px; }
.sp-search button:hover { color: var(--text); background: var(--surface-2); }
.sp-bar-r { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* 배지 */
.sp-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.sp-badge--news { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.sp-badge--done { background: color-mix(in srgb, #10b981 14%, transparent); color: #0e9f6e; }
.sp-badge--wait { background: var(--surface-2); color: var(--text-2); }
.sp-badge svg { width: 12px; height: 12px; }

/* 페이지 번호 */
.sp-pager { display: flex; justify-content: center; gap: 6px; margin-top: var(--s6); }
.sp-pager a, .sp-pager span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px; color: var(--text-2); font-weight: 600; font-size: 14px; text-decoration: none; }
.sp-pager a:hover { background: var(--surface-2); color: var(--text); }
.sp-pager [aria-current] { background: var(--text); color: var(--bg); }
.sp-pager .is-off { opacity: .35; pointer-events: none; }

.sp-empty { padding: 56px 16px; text-align: center; color: var(--text-2); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }

/* ---------- 공지사항 목록 ---------- */
.nt-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nt-item a { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.nt-item a:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.nt-date { display: grid; justify-items: center; gap: 2px; padding: 10px 0; border-right: 1px solid var(--line); padding-right: 20px; }
.nt-date b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.nt-date span { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nt-main { min-width: 0; }
.nt-main .sp-badge { margin-bottom: 8px; }
.nt-main h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.nt-main p { margin: 6px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nt-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--text-2); transition: background .2s, color .2s; }
.nt-item a:hover .nt-go { background: var(--text); color: var(--bg); border-color: var(--text); }
.nt-item--pin a { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; }

/* ---------- 상세 글 (공지·기술문의 공용) ---------- */
.sp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s5); color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.sp-back:hover { color: var(--text); }
.post-head { padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.post-head .sp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.post-head h1 { margin: 14px 0 12px; font-size: clamp(24px, 1.2rem + 1.2vw, 34px); line-height: 1.35; letter-spacing: -.02em; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: 14px; }
.post-meta li { display: inline-flex; align-items: center; gap: 6px; }
.post-meta svg { width: 15px; height: 15px; opacity: .7; }

/* 본문: 관리자 편집기에서 들어온 글꼴·크기 지정은 무시하고 사이트 글꼴로 */
.prose { padding-block: var(--s6); color: var(--text); font-size: 16px; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.prose *, .prose font { font-family: inherit !important; font-size: inherit !important; color: inherit; background-color: transparent !important; }
.prose p { margin: 0 0 .5em; text-align: left !important; }
.prose h2, .prose h3 { margin: 1.6em 0 .6em; font-size: 20px !important; line-height: 1.4; }
.prose img { max-width: 100%; height: auto; border-radius: 12px; }
.prose a { color: var(--accent); }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 15px !important; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); }
.prose pre, .prose--pre { white-space: pre-wrap; font-family: inherit; }
.prose ul, .prose ol { padding-left: 1.3em; }

.post-files { margin-top: var(--s2); padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-alt); }
.post-files h2 { margin: 0 0 10px; font-size: 14px; color: var(--text-2); }
.post-files ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.post-files a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; }
.post-files a:hover { text-decoration: underline; }
.post-files small { color: var(--text-2); font-weight: 400; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--s6); }
.post-nav a { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .2s; }
.post-nav a:hover { border-color: var(--text-2); }
.post-nav small { color: var(--text-2); font-size: 12px; font-weight: 600; }
.post-nav b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-nav .next { text-align: right; }
.post-nav .is-none { visibility: hidden; }
.post-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: var(--s5); }

/* 기술문의 상세: 답변 */
.qa-answer { margin-top: var(--s6); padding: 26px 28px; border-radius: var(--r-lg); background: var(--bg-alt); border: 1px solid var(--line); }
.qa-answer header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.qa-answer .av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--grad, var(--accent)); color: #fff; font-weight: 800; font-size: 14px; }
.qa-answer header b { display: block; font-size: 15px; }
.qa-answer header small { color: var(--text-2); font-size: 13px; }
.qa-answer .prose { padding: 0; }

/* ---------- FAQ ---------- */
.faq-search { max-width: 520px; margin-top: var(--s5); flex: none; }
.faq-search input { height: 54px; padding-left: 22px; font-size: 16px; box-shadow: var(--shadow); border-color: var(--line); }
.faq-search button { top: 8px; right: 8px; width: 38px; height: 38px; }
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.faq-list { display: grid; gap: 10px; }
.spq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.spq-item[open] { border-color: var(--line-strong); box-shadow: var(--shadow); }
.spq-item summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px; cursor: pointer; list-style: none; }
.spq-item summary::-webkit-details-marker { display: none; }
.spq-item .q { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); font-weight: 800; font-size: 14px; color: var(--text); }
.spq-item[open] .q { background: var(--grad, var(--accent)); color: #fff; }
.spq-item h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; }
.spq-item .cat { display: block; margin-bottom: 2px; color: var(--text-2); font-size: 12px; font-weight: 600; }
.spq-item .spq-chev { width: 20px; height: 20px; color: var(--text-2); transition: transform .25s; }
.spq-item[open] .chev { transform: rotate(180deg); }
.spq-item .prose { margin: 0 20px; padding: 18px 0 22px 44px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.8; color: var(--text-2); }
.faq-none { display: none; }
.faq-none.is-on { display: block; }

/* 오른쪽: 도움말 */
.sp-side { position: sticky; top: calc(var(--header-h, 72px) + 20px); display: grid; gap: 14px; }
.sp-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.sp-card h2 { margin: 0 0 6px; font-size: 17px; }
.sp-card p { margin: 0 0 14px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.sp-card .btn { width: 100%; }
.sp-card .btn + .btn { margin-top: 8px; }
.sp-card--grad { border: 0; background: var(--grad, var(--accent)); color: #fff; }
.sp-card--grad p { color: rgba(255, 255, 255, .85); }
.sp-card--grad .btn--primary { --btn-bg: #fff; --btn-fg: #111; }
.sp-card--grad .btn--secondary { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.sp-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sp-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 14px; text-decoration: none; }
.sp-links li:last-child a { border-bottom: 0; }
.sp-links a:hover { color: var(--accent); }
.sp-links small { color: var(--text-2); font-size: 12px; }

/* ---------- 자료실 (사용설명서 · API) ---------- */
.docs { padding-block: clamp(48px, 6vw, 88px); background: var(--bg-alt); }
.docs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: var(--s5); }
.docs-head h2 { margin: 6px 0 0; font-size: clamp(22px, 1.1rem + 1vw, 30px); letter-spacing: -.02em; }
.docs-head p { margin: 0; color: var(--text-2); font-size: 15px; }
.docs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.docs-grid li { display: grid; gap: 14px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.docs-grid .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--text); }
.docs-grid .ic svg { width: 22px; height: 22px; }
.docs-grid h3 { margin: 0; font-size: 17px; }
.docs-grid h3 small { display: block; margin-top: 2px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.docs-grid .lk { display: flex; flex-wrap: wrap; gap: 8px; }
.docs-grid .lk a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.docs-grid .lk a:hover { border-color: var(--text); }
.docs-grid .lk svg { width: 14px; height: 14px; }

/* ---------- 기술문의 목록 ---------- */
.qa-tips { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; margin-bottom: var(--s6); padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-alt); }
.qa-tips > p { margin: 0; padding: 8px 14px 8px 6px; align-self: center; font-size: 14px; font-weight: 700; line-height: 1.5; }
.qa-tips > p small { display: block; color: var(--text-2); font-weight: 500; font-size: 13px; }
.qa-tips li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; line-height: 1.45; }
.qa-tips li b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 13px; }
.qa-tips ol { display: contents; margin: 0; padding: 0; list-style: none; }
.qa-tips li small { display: block; margin-top: 2px; color: var(--text-2); font-size: 12.5px; font-weight: 500; }

.qa-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.qa-table thead th { padding: 12px 14px; border-bottom: 1px solid var(--line-strong); color: var(--text-2); font-size: 13px; font-weight: 600; text-align: left; }
.qa-table td { padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.qa-table .c-no { width: 80px; color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 14px; }
.qa-table .c-st { width: 104px; }
.qa-table .c-who { width: 120px; color: var(--text-2); font-size: 14px; }
.qa-table .c-date { width: 120px; color: var(--text-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.qa-table tbody tr { transition: background .15s; }
.qa-table tbody tr:hover { background: var(--bg-alt); }
.qa-t { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; text-decoration: none; }
.qa-t:hover { text-decoration: underline; }
.qa-t svg { flex: none; width: 15px; height: 15px; color: var(--text-2); }
.qa-new { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; }
.qa-re td { background: var(--bg-alt); }
.qa-re .qa-t { font-weight: 500; color: var(--text-2); padding-left: 4px; }
.qa-re .re { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 12px; font-weight: 700; }
.qa-re .who-b { color: var(--text); font-weight: 600; }

/* ---------- 폼 (기술문의 작성 · 제품 문의) ---------- */
.fm-card { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.fm-card + .fm-card { margin-top: 16px; }
.fm-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 18px; }
.fm-title .n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 13px; }
.fm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.fm-grid .full { grid-column: 1 / -1; }
.fm-f label, .fm-f .lb { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.fm-f .req { color: var(--accent); margin-left: 2px; }
.fm-f input[type=text], .fm-f input[type=email], .fm-f input[type=tel], .fm-f input[type=password], .fm-f textarea, .fm-f select { width: 100%; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.fm-f textarea { min-height: 220px; resize: vertical; line-height: 1.7; }
.fm-f input:focus, .fm-f textarea:focus { outline: none; border-color: var(--text-2); box-shadow: 0 0 0 4px var(--surface-2); }
.fm-f input::placeholder, .fm-f textarea::placeholder { color: var(--text-2); opacity: .7; }
.fm-hint { margin: 6px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.fm-count { float: right; font-weight: 500; color: var(--text-2); font-size: 12px; }

/* 둘 중 하나 고르기 (정품/평가판) */
.fm-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.fm-seg label { margin: 0; }
.fm-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fm-seg span { display: block; padding: 9px 18px; border-radius: 9px; color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.fm-seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.fm-seg input:focus-visible + span { outline: 2px solid var(--accent); }

/* 체크박스 */
.fm-check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1.5; }
.fm-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.fm-check small { display: block; color: var(--text-2); font-weight: 400; font-size: 13px; }

/* 개인정보 동의 */
.fm-agree summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.fm-agree summary::-webkit-details-marker { display: none; }
.fm-agree summary h2 { margin: 0; }
.fm-agree summary .more { color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.fm-agree[open] summary .more::after { content: " 접기"; }
.fm-agree:not([open]) summary .more::after { content: " 펼쳐 보기"; }
.fm-agree dl { display: grid; grid-template-columns: 180px minmax(0, 1fr); margin: 16px 0 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.65; }
.fm-agree dt, .fm-agree dd { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.fm-agree dt { color: var(--text-2); font-weight: 600; background: var(--bg-alt); }
.fm-agree .fm-check { margin-top: 16px; }
.fm-intro { margin: 6px 0 0; color: var(--text-2); font-size: 14px; }

/* 첨부파일 */
.fm-drop { display: grid; place-items: center; gap: 6px; padding: 26px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: var(--bg-alt); color: var(--text-2); font-size: 14px; text-align: center; cursor: pointer; }
.fm-drop:hover { border-color: var(--text-2); color: var(--text); }
.fm-drop svg { width: 26px; height: 26px; }
.fm-drop b { color: var(--text); }
.fm-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.fm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: var(--s5); }

/* ---------- 제품 문의 ---------- */
.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.ct-info { position: sticky; top: calc(var(--header-h, 72px) + 20px); display: grid; gap: 14px; }
.ct-info .sp-card dl { display: grid; gap: 14px; margin: 0; }
.ct-info .sp-card dl div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; }
.ct-info dt { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); }
.ct-info dt svg { width: 17px; height: 17px; }
.ct-info dd { margin: 0; font-size: 15px; line-height: 1.5; }
.ct-info dd small { display: block; color: var(--text-2); font-size: 12px; }
.ct-info dd a { color: var(--text); font-weight: 700; text-decoration: none; }
.ct-info dd a:hover { text-decoration: underline; }
.ct-map { overflow: hidden; padding: 0; }
.ct-map iframe { display: block; width: 100%; height: 240px; border: 0; }
.ct-map p { margin: 0; padding: 12px 16px; font-size: 13px; }
.ct-map p a { color: var(--text); font-weight: 600; }
.ct-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: s; }
.ct-steps li { counter-increment: s; padding: 14px 16px; border-radius: var(--r-md); background: var(--bg-alt); border: 1px solid var(--line); font-size: 13px; color: var(--text-2); line-height: 1.5; }
.ct-steps li::before { content: "STEP " counter(s); display: block; margin-bottom: 4px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.ct-steps b { display: block; color: var(--text); font-size: 15px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) {
  .docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-layout, .ct-layout { grid-template-columns: minmax(0, 1fr); }
  .sp-side, .ct-info { position: static; }
  .sp-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sp-hero .ex-hero-in { grid-template-columns: minmax(0, 1fr); }
  .qa-tips { grid-template-columns: 1fr; }
  .qa-tips > p { padding: 0 4px 4px; }
}
@media (max-width: 720px) {
  .sp-bar { align-items: stretch; }
  .sp-search { flex: 1 1 100%; }
  .sp-bar-r { width: 100%; }
  .sp-bar-r .sp-search { flex: 1 1 0; }
  .nt-item a { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 20px; }
  .nt-date { display: flex; justify-items: start; gap: 6px; padding: 0; border: 0; }
  .nt-date b { font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
  .nt-date b::after { content: "."; }
  .nt-go { display: none; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { text-align: left; }
  .sp-side, .ct-info { grid-template-columns: 1fr; }
  .docs-grid { grid-template-columns: 1fr; }
  .spq-item .prose { margin: 0 16px; padding-left: 0; }
  .spq-item summary { padding: 16px; gap: 12px; }
  .fm-grid { grid-template-columns: 1fr; }
  .fm-agree dl { grid-template-columns: 1fr; }
  .fm-agree dt { border-bottom: 0; padding-bottom: 4px; }
  .ct-steps { grid-template-columns: 1fr; }
  .fm-actions .btn { flex: 1 1 0; }
  /* 기술문의 표 → 카드형 줄 */
  .qa-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .qa-table, .qa-table tbody, .qa-table tr, .qa-table td { display: block; width: auto; }
  .qa-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 10px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .qa-table td { padding: 0; border: 0; }
  .qa-table .c-no { display: none; }
  .qa-table .c-t { grid-column: 1 / -1; grid-row: 1; }
  .qa-table .c-who, .qa-table .c-date { grid-row: 2; width: auto; align-self: center; font-size: 13px; }
  .qa-table .c-who { grid-column: 1; }
  .qa-table .c-date { grid-column: 1; justify-self: end; }
  .qa-re { padding-left: 14px !important; }
  .qa-re td { background: none; }
}
/* FAQ: 검색창은 본문 분류 버튼 위 (상단 높이를 다른 페이지와 같게) */
.faq-bar { flex-direction: column; align-items: stretch; }
.faq-bar .sp-search { flex: none; max-width: 520px; }
.faq-bar .sp-search input { height: 50px; font-size: 15px; }
.faq-bar .sp-search button { top: 6px; right: 6px; width: 38px; height: 38px; }
/* 입력칸 안의 체크박스 줄(비밀글): .fm-f label 의 block 지정을 덮어 체크박스와 글자를 한 줄로 */
.fm-f .fm-check { display: inline-flex; align-items: flex-start; margin-bottom: 0; }
.fm-check input { margin-top: 1px; }

/* ---------- 실제 게시판 연동용 ---------- */
/* 페이지 번호: 기존 macros.ftl(getPageLink·getPageLink2) 출력(ul.pagination)을 새 모양으로 */
.sp-pager-wrap { display: flex; justify-content: center; margin-top: var(--s6); }
.sp-pager-wrap .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-pager-wrap .page-link { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px; color: var(--text-2); font-weight: 600; font-size: 14px; text-decoration: none; }
.sp-pager-wrap .page-link:hover { background: var(--surface-2); color: var(--text); }
.sp-pager-wrap .active .page-link { background: var(--text); color: var(--bg); }
@media (max-width: 720px) { .sp-pager-wrap .page-link { min-width: 34px; height: 34px; padding: 0 6px; } }
.qa-pager-sm { display: none; }
@media (max-width: 720px) { .qa-pager-lg { display: none; } .qa-pager-sm { display: flex; } }

/* 확인 창 (support.js 가 Bootstrap modal 을 대신) */
.modal { display: none; position: fixed; inset: 0; z-index: 2000; place-items: center; padding: 16px; background: rgba(10, 12, 24, .55); backdrop-filter: blur(2px); }
.modal.is-open { display: grid; }
.modal-dialog { width: min(400px, 100%); margin: 0; }
.modal-content { padding: 26px 24px 20px; border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
.modal-header { padding: 0 0 12px; }
.modal-title { margin: 0; font-size: 18px; font-weight: 700; }
.modal-body { padding: 4px 0 18px; text-align: center; font-size: 15px; line-height: 1.7; word-break: keep-all; }
.modal-footer, .modal-content > .text-center { display: flex; justify-content: center; gap: 8px; padding: 0; }
.modal .form-control { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; }
.modal .form-control:focus { outline: none; border-color: var(--text-2); box-shadow: 0 0 0 4px var(--surface-2); }
.modal .btn { min-height: 42px; padding: 0 22px; font-size: 14px; }
body.modal-open { overflow: hidden; }
/* 기존 확인 창 버튼 클래스(btn-primary·btn-default·btn-danger)를 새 버튼 모양으로 */
.btn.btn-primary { background: var(--btn-bg, var(--accent)); color: var(--btn-fg, #fff); border-color: transparent; }
.btn.btn-default { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.btn.btn-danger { min-height: 32px; padding: 0 12px; font-size: 13px; background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.btn.btn-danger:hover { border-color: #e5484d; color: #e5484d; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* 입력 검증 메시지 (jquery.validation: span.help-block) */
/* 검증 플러그인은 입력칸 자체에도 help-block 클래스를 붙이므로 메시지(span)만 지정 */
.fm-f span.help-block { display: block; margin-top: 6px; color: #e5484d; font-size: 13px; font-weight: 600; }
.fm-f span.help-block:empty { display: none; }
.fm-f input.help-block, .fm-f textarea.help-block { border-color: #e5484d; }

/* 첨부파일 (jquery-file-upload) */
.fm-drop.fileinput-button { position: relative; overflow: hidden; }
.fm-drop.fileinput-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 200px; }
.fileupload-progress, .fileupload-process { display: none; }
.fm-files { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; }
.fm-files td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fm-files td:last-child, .fm-files td:nth-child(3) { text-align: right; white-space: nowrap; }
.fm-files label { margin: 0; font-weight: 600; }
.fm-files .size { color: var(--text-2); font-weight: 400; }
.fm-files a { color: var(--text); }
.fm-files .error { color: #e5484d; font-size: 13px; }

/* 제품 문의 접수 결과 알림 */
.ct-alert { display: none; margin-bottom: 16px; padding: 14px 18px; border-radius: 14px; font-size: 14px; line-height: 1.6; }
.ct-alert--ok { background: color-mix(in srgb, #10b981 12%, var(--surface)); border: 1px solid color-mix(in srgb, #10b981 35%, transparent); }
.ct-alert--fail { background: color-mix(in srgb, #e5484d 10%, var(--surface)); border: 1px solid color-mix(in srgb, #e5484d 35%, transparent); }

/* 공지 상세: 이전·다음 글 (제목 정보가 없어 방향만) */
.post-nav a b { white-space: normal; }
.post-nav .is-none { visibility: hidden; }
.sp-badge--reply { background: var(--text); color: var(--bg); }

/* 기술문의 목록: 띄어쓰기 없는 긴 제목이 표를 밀어내던 것 → 표 폭 고정, 제목은 한 줄로 줄임(…), 날짜는 줄바꿈 안 함 */
.qa-table { table-layout: fixed; }
.qa-table .c-t { white-space: nowrap; }
.qa-table .qa-t { display: inline-block; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.qa-table .qa-t svg { display: inline-block; margin-right: 6px; vertical-align: -2px; }
.qa-table .qa-t .re { margin-right: 6px; }
.qa-table .c-date, .qa-table .c-who { white-space: nowrap; }
.qa-new { vertical-align: middle; }
@media (max-width: 720px) {
  .qa-table { table-layout: auto; }
  .qa-table .qa-t { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
}
/* 상세 제목·본문도 긴 단어에서 줄바꿈 */
.post-head h1 { overflow-wrap: anywhere; }

/* 페이지 번호·분류·검색 후 목록 위치(#list)로 바로 이동 — 고정 헤더에 가리지 않게 */
#list { scroll-margin-top: var(--header-h, 72px); }
/* 목록 부분만 새로 불러오는 동안 (support.js spList) */
#list [data-sp-swap] { transition: opacity .15s ease; }
#list.is-loading [data-sp-swap] { opacity: .45; pointer-events: none; }
#list.is-loading { cursor: progress; }