/*
 * fx 문의(화면키 contact) — 얇은 어두운 머리 + 밝은 접수 폼·현황판·글 보기. 마크업은 옛 화면의 필드·data-*·id 를 그대로 두고(옛 contact.js 가 맡음)
 * 클래스 fq-*·fs-*(폼·핀) 에 새 모양만 입힌다 — 전부 .fx-ct 안에서만. 값은 --fx-* 토큰, 라임은 주 버튼·선택한 유형·작업 중 표시에만.
 * 구획: 1 머리 / 2 본문 틀 / 3 접수 폼 / 4 화면 핀 / 5 현황판(탭·행·배지·페이지) / 6 글 보기 / 7 빈 상태·완료 / 8 반응형
 */

.fx-ct{overflow-x:clip;background:var(--fx-bg);color:var(--fx-fg)}
.fx-ct-col{max-width:760px}
/* 본문 목록(현황판)은 컨테이너 폭 전체 — 머리와 같은 왼쪽 선. 접수 폼 패널만 읽기 폭 760 유지 */
.fx-ct-main .fx-ct-col{max-width:none}
/* 머리 열도 아래 목록과 같은 폭(왼쪽 기준선 공유). 설명문만 읽기 좋은 폭으로 제한 */
.fx-ct-head .fx-ct-col{max-width:none}
.fx-ct-main .fq-formpanel{max-width:760px}
/* 1024 이상: 접수 폼(760)을 목록 폭 안 가운데에(대표 결정 2026-10-22). 360·768 은 전체 폭 */
@media (min-width:1024px){.fx-ct-main .fq-formpanel{margin-inline:auto}}

/* ===== 1. 머리 (어둡게, 얇게) ===== */
.fx-ct-head{padding:124px 0 48px;background:var(--fx-s0)}
.fx-ct-h1{font-size:clamp(32px,5.2vw,56px);line-height:1.2;font-weight:700;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere}
/* 글 보기 제목만 작게(목록·다른 페이지 h1 은 그대로): 1280 에서 40px, 360 에서 28px */
.fx-ct-h1.fq-post__title{font-size:clamp(28px,calc(2.2vw + 12px),40px);line-height:1.25}
/* 글 보기 진행 단계 줄: 맞춤 제작 6단계 / 그 밖 4단계. 지난=라임 실선, 현재=이중 링+맥박, 남은=점선 */
.fx-ct-steps{display:flex;margin:var(--fx-sp-8) 0 0;padding:0;max-width:720px;list-style:none}
.fx-ct-steps__s{position:relative;flex:1 1 0%;display:grid;justify-items:start;align-content:start;gap:12px;min-width:0}
.fx-ct-steps__s:last-child{flex:0 0 auto}
.fx-ct-steps__s::before{content:"";position:absolute;left:24px;right:8px;top:7px;height:0;border-top:2px dashed var(--fx-edge-strong)}
.fx-ct-steps__s:last-child::before{display:none}
.fx-ct-steps__s--done::before{border-top-style:solid;border-top-color:var(--fx-brand)}
.fx-ct-steps__dot{position:relative;display:grid;place-items:center;width:16px;height:16px}
.fx-ct-steps__dot::before{content:"";width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--fx-edge-strong)}
.fx-ct-steps__s--done .fx-ct-steps__dot::before{width:12px;height:12px;background:var(--fx-brand);box-shadow:none}
.fx-ct-steps__s--now .fx-ct-steps__dot::before{width:16px;height:16px;background:radial-gradient(circle,var(--fx-brand) 0 3px,transparent 3.5px);box-shadow:inset 0 0 0 3px var(--fx-brand)}
.fx-ct-steps__s--now .fx-ct-steps__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--fx-brand);opacity:0;animation:fx-ct-steps-pulse 2.4s ease-out infinite}
@keyframes fx-ct-steps-pulse{0%{opacity:.45;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.4)}}
.fx-ct-steps__l{display:grid;gap:2px;padding-right:8px;font-size:15px;line-height:1.3;color:var(--fx-fg-3)}
.fx-ct-steps__no{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fx-fg-3)}
.fx-ct-steps__s--done .fx-ct-steps__l{color:var(--fx-fg-2)}
.fx-ct-steps__s--now .fx-ct-steps__l{font-weight:700;color:var(--fx-fg)}
.fx-ct-steps__s--now .fx-ct-steps__no{color:var(--fx-brand)}
.fx-ct-steps__sum{display:none;margin:var(--fx-sp-3) 0 0;font-size:14px;color:var(--fx-fg-2)}
.fx-ct-steps__sum b{color:var(--fx-fg);font-weight:700}
.fx-ct-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:639px){
.fx-ct-steps{margin-top:var(--fx-sp-6)}
.fx-ct-steps__s{gap:0}
.fx-ct-steps--six .fx-ct-steps__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx-ct-steps--six + .fx-ct-steps__sum{display:block}
.fx-ct-steps--four .fx-ct-steps__l{padding:12px 4px 0 0;font-size:14px}
.fx-ct-steps--four .fx-ct-steps__no{display:none}
}
@media (prefers-reduced-motion:reduce){.fx-ct-steps__s--now .fx-ct-steps__dot::after{animation:none;opacity:0}}
.fq-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--fx-sp-6) var(--fx-sp-8)}
.fq-head__text{flex:1 1 360px;min-width:0}
.fq-sub{margin-top:var(--fx-sp-4);max-width:560px;word-break:keep-all;text-wrap:balance;font-size:15px;line-height:1.7;color:var(--fx-fg-2)}
.fq-cta{flex:0 0 auto}
.fq-stats{display:flex;flex-wrap:wrap;gap:var(--fx-sp-2) var(--fx-sp-6);margin-top:var(--fx-sp-8);padding-top:var(--fx-sp-6);border-top:1px solid var(--fx-edge-ink);font-size:16px;color:var(--fx-fg-2)}
.fq-stats b{margin-left:6px;font-size:20px;font-weight:700;color:var(--fx-fg);font-variant-numeric:tabular-nums}
.fq-stats__ex{display:inline-flex;align-items:center;gap:var(--fx-sp-2)}
.fq-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;margin:0 0 var(--fx-sp-3) -4px;padding:0 4px;font-size:16px;font-weight:600;color:var(--fx-fg-2)}
.fq-back:hover{color:var(--fx-fg);text-decoration:underline;text-underline-offset:3px}

/* ===== 2. 본문 틀 ===== */
.fx-ct-main{padding:var(--fx-sp-8) 0 var(--fx-sp-24)}
.fq-board{scroll-margin-top:96px}

/* ===== 3. 접수 폼 — 문의하기를 누르면 목록 대신 펼쳐진다(보이기/숨기기는 옛 규칙 그대로) ===== */
.fq-formpanel{display:none;padding:var(--fx-sp-8);border-radius:var(--fx-radius-l);background:var(--fx-card);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);scroll-margin-top:96px}
.fq:not([data-js]) .fq-formpanel:target,.fq[data-view="form"] .fq-formpanel{display:block}
.fq[data-view="form"] .fq-board{display:none}
.fq-formbox__head{display:flex;align-items:center;justify-content:space-between;gap:var(--fx-sp-3)}
.fq-formbox__title{font-size:28px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
.fq-formbox__sub{margin:var(--fx-sp-2) 0 var(--fx-sp-8);font-size:16px;line-height:1.7;color:var(--fx-fg-2)}
.fq-close{min-height:44px;min-width:44px;padding:0 var(--fx-sp-3);border-radius:var(--fx-radius-s);font-size:16px;font-weight:600;color:var(--fx-fg-2);transition:background-color var(--fx-time-fast),color var(--fx-time-fast)}
.fq-close:hover{background:var(--fx-tint);color:var(--fx-fg)}

.fq-form{display:flex;flex-direction:column;gap:var(--fx-sp-6)}
.fs-field{margin:0}
.fs-field__label{display:block;margin-bottom:var(--fx-sp-2);font-size:14px;font-weight:600;color:var(--fx-fg)}
.fs-field__req{margin-left:2px;color:var(--fx-danger)}
.fs-field__hint{margin-top:var(--fx-sp-2);font-size:14px;line-height:1.6;color:var(--fx-fg-3)}
.fx-ct .fs-input{
  display:block;width:100%;min-height:52px;padding:0 16px;border:0;border-radius:var(--fx-radius-m);
  background:var(--fx-bg);color:var(--fx-fg);font:inherit;font-size:17px;line-height:1.4;
  box-shadow:inset 0 0 0 1px var(--fx-edge-paper-strong);
  transition:box-shadow var(--fx-time-fast) var(--fx-ease-std);
}
.fx-ct .fs-input::placeholder{color:var(--fx-fg-3);opacity:1}
.fx-ct .fs-input:hover{box-shadow:inset 0 0 0 1px var(--fx-fg-3)}
.fx-ct .fs-input:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px;box-shadow:inset 0 0 0 1px var(--fx-fg)}
.fx-ct .fs-input[aria-invalid="true"],.fx-ct .fs-input:user-invalid{box-shadow:inset 0 0 0 2px var(--fx-danger)}
.fx-ct .fs-textarea{min-height:152px;padding:14px 16px;resize:vertical}
.fx-ct select.fs-input{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4 7l5 5 5-5' stroke='%236b6b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.fs-formmsg{padding:12px 16px;border-radius:var(--fx-radius-m);background:rgba(180,35,24,.08);box-shadow:inset 0 0 0 1px rgba(180,35,24,.35);font-size:16px;line-height:1.6;color:var(--fx-danger)}
.fs-formmsg[hidden]{display:none}
.fs-honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* 유형 선택 — 선택한 한 칸만 라임 면 */
.fq-form__type{display:grid;grid-template-columns:1fr;gap:var(--fx-sp-3);min-width:0;margin:0;padding:0;border:0}
.fq-form__label{grid-column:1/-1;margin-bottom:var(--fx-sp-1);padding:0;font-size:16px;font-weight:600}
.fq-radio{position:relative;display:block;cursor:pointer}
.fq-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.fq-radio__box{display:flex;flex-direction:column;gap:4px;min-height:72px;padding:var(--fx-sp-4);border-radius:var(--fx-radius-m);background:var(--fx-bg);box-shadow:inset 0 0 0 1px var(--fx-edge-paper-strong);transition:box-shadow var(--fx-time-fast),background-color var(--fx-time-fast)}
.fq-radio__box b{font-size:17px;font-weight:700}
.fq-radio__box small{font-size:14px;line-height:1.5;color:var(--fx-fg-2)}
.fq-radio:hover .fq-radio__box{box-shadow:inset 0 0 0 1px var(--fx-fg-3)}
.fq-radio input:checked + .fq-radio__box{background:var(--fx-brand);color:var(--fx-brand-ink);box-shadow:inset 0 0 0 2px var(--fx-brand-ink)}
.fq-radio input:checked + .fq-radio__box small{color:var(--fx-brand-ink)}
.fq-radio input:focus-visible + .fq-radio__box{outline:2px solid var(--fx-ring);outline-offset:3px}

/* 개인정보 동의 — 44px 클릭 영역, 모양은 라벨 앞 상자 */
.fs-consent{position:relative;padding:4px 0}
.fs-consent input{position:absolute;left:-10px;top:0;width:44px;height:44px;margin:0;opacity:0;cursor:pointer;z-index:1}
.fs-consent label{position:relative;display:block;min-height:44px;padding:2px 0 0 36px;font-size:15px;line-height:1.65;color:var(--fx-fg-2);cursor:pointer}
.fs-consent label::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:6px;background:var(--fx-bg);box-shadow:inset 0 0 0 1.5px var(--fx-fg-3)}
.fs-consent input:checked + label::before{background:var(--fx-fg);box-shadow:none}
.fs-consent input:checked + label::after{content:"";position:absolute;left:7px;top:8px;width:8px;height:12px;border:solid var(--fx-bg);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(.75);transform-origin:center;margin-top:-4px}
.fs-consent input:focus-visible + label::before{outline:2px solid var(--fx-ring);outline-offset:3px}
.fs-consent label a{position:relative;z-index:2;display:inline-block;padding:10px 4px;margin:-10px 0;color:var(--fx-fg);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ===== 4. 화면에서 짚어서 보내기(캡처 → 핀) ===== */
.fq-screen{display:flex;flex-direction:column;gap:var(--fx-sp-6);padding:var(--fx-sp-6);border-radius:var(--fx-radius-m);background:var(--fx-bg);box-shadow:inset 0 0 0 1px var(--fx-edge-paper-strong)}
.fq-screen[hidden],.fq-form [data-fq-titlefield][hidden],.fq-form [data-fq-notereq][hidden]{display:none}
.fq-steps{display:grid;gap:var(--fx-sp-2)}
.fq-steps li{display:flex;align-items:center;gap:var(--fx-sp-3);font-size:16px;line-height:1.5;color:var(--fx-fg-2)}
.fq-steps b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--fx-fg);color:var(--fx-bg);font-size:14px;line-height:26px;text-align:center}
.fs-drop{border:2px dashed var(--fx-edge-paper-strong);border-radius:var(--fx-radius-m);background:var(--fx-card);transition:border-color var(--fx-time-fast),background-color var(--fx-time-fast)}
.fs-drop.is-over{border-color:var(--fx-fg);background:var(--fx-paper-2)}
.fs-drop.is-busy{opacity:.6;pointer-events:none}
.fs-drop[hidden]{display:none}
.fs-drop__inner{display:flex;flex-direction:column;align-items:center;gap:var(--fx-sp-2);padding:var(--fx-sp-12) var(--fx-sp-6);text-align:center;color:var(--fx-fg-3);cursor:pointer}
.fs-drop__inner:focus-within{outline:2px solid var(--fx-ring);outline-offset:2px}
.fs-drop__t{font-size:17px;font-weight:600;color:var(--fx-fg)}
.fs-drop__d{font-size:14px}
.fs-annot[hidden]{display:none}
.fs-annot{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--fx-sp-6);align-items:start}
.fs-annot__imgwrap{position:relative;overflow:hidden;border-radius:var(--fx-radius-s);box-shadow:inset 0 0 0 1px var(--fx-edge-paper-strong);cursor:crosshair;background:var(--fx-paper-2)}
.fs-annot__imgwrap img{display:block;width:100%}
.fs-annot__imgwrap img:not([src]),.fs-annot__imgwrap img[src=""]{display:none}
.fs-annot__hint{margin-top:var(--fx-sp-3);font-size:14px;line-height:1.6;color:var(--fx-fg-3)}
.fs-annot__title{margin-bottom:var(--fx-sp-3);font-size:16px;font-weight:700}
.fs-pin{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;border:2px solid #fff;border-radius:50%;background:var(--fx-k1);color:#fff;font:inherit;font-size:14px;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.fs-pin:hover{background:var(--fx-k2)}
.fs-pinlist{display:flex;flex-direction:column;gap:var(--fx-sp-3)}
.fs-pinitem{display:flex;gap:var(--fx-sp-3);align-items:flex-start}
.fs-pinitem__n{flex:none;display:grid;place-items:center;width:28px;height:28px;margin-top:12px;border-radius:50%;background:var(--fx-k1);color:#fff;font-size:14px;font-weight:700}
.fs-pinitem__note{min-height:72px}
.fq-linkbtn{margin-top:var(--fx-sp-2);min-height:44px;padding:0;font-size:15px;font-weight:600;color:var(--fx-fg-2);text-decoration:underline;text-underline-offset:3px}
.fq-linkbtn:hover{color:var(--fx-fg)}

/* ===== 5. 현황판 ===== */
.fq-board{margin-top:var(--fx-sp-8)}
.fq-formpanel + .fq-board{margin-top:var(--fx-sp-8)}
.fq-tabs{display:flex;flex-wrap:wrap;gap:var(--fx-sp-2);margin-bottom:var(--fx-sp-4)}
.fq-tab{display:inline-flex;align-items:center;gap:var(--fx-sp-2);min-height:44px;padding:0 18px;border-radius:var(--fx-radius-pill);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);font-size:14px;font-weight:600;line-height:1;color:var(--fx-fg-2);transition:background-color var(--fx-time-fast),color var(--fx-time-fast)}
.fq-tab span{font-weight:500;font-variant-numeric:tabular-nums;color:var(--fx-fg-3)}
.fq-tab:hover{background:var(--fx-tint);color:var(--fx-fg)}
.fq-tab[aria-pressed="true"],.fq-tab[aria-current="true"]{background:var(--fx-fg);color:var(--fx-bg);box-shadow:none}
.fq-tab[aria-pressed="true"] span,.fq-tab[aria-current="true"] span{color:var(--fx-bg);opacity:.75}

.fq-list{border-top:1px solid var(--fx-edge-strong)}
.fq-row{border-bottom:1px solid var(--fx-edge)}
.fq-row[hidden]{display:none}
.fq-row__a{display:block;margin:0 calc(var(--fx-sp-3) * -1);padding:var(--fx-sp-4) var(--fx-sp-3);border-radius:var(--fx-radius-s);transition:background-color var(--fx-time-fast)}
a.fq-row__a:hover{background:var(--fx-tint)}
a.fq-row__a:hover .fq-row__t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.fq-row__t{display:block;font-size:17px;font-weight:600;line-height:1.5;letter-spacing:-.01em;overflow-wrap:anywhere}
.fq-row__m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:var(--fx-sp-2);font-size:14px;line-height:1.5;color:var(--fx-fg-3)}
.fq-row__mine{padding:1px 8px;border-radius:6px;background:var(--fx-fg);color:var(--fx-bg);font-size:13px;font-weight:600}
.fq-filter-empty{margin:var(--fx-sp-8) 0;color:var(--fx-fg-3);text-align:center}
.fq-filter-empty[hidden]{display:none}
.fq-foot{margin-top:var(--fx-sp-12);font-size:16px;color:var(--fx-fg-2)}
.fq-foot a{display:inline-block;padding:10px 2px;margin:-10px 0;font-weight:600;color:var(--fx-fg);text-decoration:underline;text-underline-offset:3px}
.fq-sample{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--fx-fg-3);font-size:13px;font-weight:600;line-height:1;color:var(--fx-fg-2);white-space:nowrap}
.fq-head .fq-sample,.fq-stats .fq-sample{box-shadow:inset 0 0 0 1px var(--fx-fg-3);color:var(--fx-fg-2)}
.fq-sample-note{margin-top:var(--fx-sp-4);font-size:14px;line-height:1.6;color:var(--fx-fg-3)}

/* 상태 배지 — 점 + 글자(색만으로 전달하지 않는다). 작업 중은 라임 면 + 점 셋 */
.fq-badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:var(--fx-radius-pill);background:var(--fx-card-2);color:var(--fx-fg);font-size:13px;font-weight:700;line-height:1;white-space:nowrap}
.fq-badge--checking{background:transparent;box-shadow:inset 0 0 0 1.5px var(--fx-fg)}
.fq-badge--working{background:var(--fx-brand);color:var(--fx-brand-ink)}
.fq-badge--answered,.fq-badge--done{background:var(--fx-fg);color:var(--fx-bg)}
.fq-dots{display:inline-flex;align-items:center;gap:2px}
.fq-dots i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor;animation:fx-ct-dot 1.2s ease-in-out infinite}
.fq-dots i:nth-child(2){animation-delay:.15s}
.fq-dots i:nth-child(3){animation-delay:.3s}
@keyframes fx-ct-dot{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-2px)}}

/* 페이지 나눔(스크립트가 만든다) */
.fq-pager{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:var(--fx-sp-8)}
.fq-pager[hidden]{display:none}
.fq-pager__item{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 6px;border-radius:var(--fx-radius-s);font-size:14px;font-weight:600;line-height:1;color:var(--fx-fg-2);font-variant-numeric:tabular-nums;transition:background-color var(--fx-time-fast),color var(--fx-time-fast)}
.fq-pager__item:hover{background:var(--fx-tint);color:var(--fx-fg)}
.fq-pager__item--current,.fq-pager__item--current:hover{background:var(--fx-fg);color:var(--fx-bg);cursor:default}
.fq-pager__item--first,.fq-pager__item--last,.fq-pager__item--prev,.fq-pager__item--next{font-size:18px}

/* 진입: 스크립트가 .is-anim, 관찰자가 .is-in. 스크립트가 없으면 처음부터 보인다. */
.fq-list.is-anim .fq-row:not(.is-in){opacity:0}
.fq-list.is-anim .fq-row.is-in{animation:fx-ct-rise .28s ease-out backwards;animation-delay:var(--fq-d,0ms)}
@keyframes fx-ct-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== 6. 글 보기 ===== */
.fq-post{max-width:680px}
.fq-post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-2) var(--fx-sp-3);margin-bottom:var(--fx-sp-4);font-size:14px;color:var(--fx-fg-2)}
.fq-post .fq-post__meta{margin-bottom:0}
.fx-ct-head .fq-badge{background:var(--fx-s3);color:var(--fx-t1)}
.fx-ct-head .fq-badge--working{background:var(--fx-brand);color:var(--fx-brand-ink)}
.fx-ct-head .fq-badge--answered,.fx-ct-head .fq-badge--done{background:var(--fx-t1);color:var(--fx-k1)}
.fx-ct-head .fq-badge--checking{background:transparent;box-shadow:inset 0 0 0 1.5px var(--fx-t1)}
.fx-ct-head .fq-row__mine{background:var(--fx-t1);color:var(--fx-k1)}
.fx-ct-head .fq-sample{color:var(--fx-fg-2);box-shadow:inset 0 0 0 1px var(--fx-fg-3)}
.fq-note{margin:0 0 var(--fx-sp-4);padding:12px 16px;border-radius:var(--fx-radius-m);background:var(--fx-card-2);font-size:15px;line-height:1.6;color:var(--fx-fg-2)}
.fq-note--ok{background:var(--fx-brand);color:var(--fx-brand-ink);font-weight:600}
.fq-post__body{font-size:18px;line-height:1.8;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;color:var(--fx-fg)}
.fq-answer{margin-top:var(--fx-sp-12);padding-top:var(--fx-sp-6);border-top:1px solid var(--fx-edge)}
.fq-answer__t{margin-bottom:var(--fx-sp-3);font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--fx-fg-2)}
.fq-answer__b{font-size:18px;line-height:1.75;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere}
.fq-answer__d{margin-top:var(--fx-sp-3);font-size:14px;color:var(--fx-fg-3)}
/* 안내 캡션 — 상자·띠·아이콘 없이 본문보다 작고 옅은 한 줄 */
.fq-cap{margin:0 0 var(--fx-sp-3);font-size:14px;line-height:1.5;color:var(--fx-fg-3)}
.fq-post__by{margin:0 0 var(--fx-sp-3);font-size:14px;line-height:1.5;color:var(--fx-fg-3);overflow-wrap:anywhere}
/* 열람 권한이 없는 사람에게는 서버가 가짜 글만 내보낸다. 블러는 모양일 뿐(실제 글자는 HTML 에 없다) */
.fq-blur{filter:blur(6px);-webkit-user-select:none;user-select:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),#000 16%,#000 84%,rgba(0,0,0,.45));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),#000 16%,#000 84%,rgba(0,0,0,.45))}
.fq-admin{margin-top:var(--fx-sp-12);padding:var(--fx-sp-6);border-radius:var(--fx-radius-l);background:var(--fx-card-2)}
.fq-admin__t{margin-bottom:var(--fx-sp-3);font-size:16px;font-weight:700}
.fq-admin__contact{margin-bottom:var(--fx-sp-4);font-size:15px;color:var(--fx-fg-2);overflow-wrap:anywhere}
.fq-admin__contact span{color:var(--fx-fg-3)}
.fq-admin__form{display:flex;flex-direction:column;gap:var(--fx-sp-4)}

/* ===== 7. 빈 상태·완료 ===== */
.fq-empty{display:grid;justify-items:start;gap:var(--fx-sp-3);padding:var(--fx-sp-8);border-radius:var(--fx-radius-l);border:1px dashed var(--fx-edge-strong);background:var(--fx-tint)}
.fq-empty__t{font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.fq-empty__d{max-width:520px;font-size:17px;line-height:1.7;color:var(--fx-fg-2)}
.fq-done{max-width:520px;margin:0 auto;padding:var(--fx-sp-6) 0;text-align:center}
.fq-done[hidden]{display:none}
.fq-done:focus{outline:0}
.fq-done__title{font-size:26px;font-weight:700;letter-spacing:-.02em}
.fq-done__desc{margin-top:var(--fx-sp-2);font-size:17px;line-height:1.7;color:var(--fx-fg-2)}
.fq-done__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--fx-sp-3);margin-top:var(--fx-sp-6)}

/* ===== 8. 반응형 ===== */
@media (min-width:640px){
  .fq-form__type{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:768px){
  .fx-ct-head{padding-top:140px;padding-bottom:56px}
  .fs-annot{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
@media (max-width:767px){
  .fq-formpanel{padding:var(--fx-sp-6) var(--fx-sp-4)}
  .fx-ct .fs-btn{height:48px;padding:0 24px;font-size:15px}
}
@media (max-width:480px){
  .fq-pager{gap:2px}
  .fq-pager__item{min-width:44px;padding:0 2px}
}
@media (prefers-reduced-motion:reduce){
  .fq-dots i{animation:none;opacity:.7}
  .fq-list.is-anim .fq-row:not(.is-in){opacity:1}
  .fq-list.is-anim .fq-row.is-in{animation:none}
  .fq-tab,.fq-close,.fq-radio__box,.fq-row__a,.fq-pager__item,.fx-ct .fs-input{transition:none}
}

/* 2026-10-22 목록 다듬기: 행 전체가 눌리는 것이 보이게 오른쪽 화살표, 키보드 포커스, 탭·페이저 같은 둥근 톤 */
a.fq-row__a{position:relative;padding-right:calc(var(--fx-sp-3) + 28px)}
a.fq-row__a::after{content:"";position:absolute;right:var(--fx-sp-3);top:50%;width:8px;height:8px;border-top:2px solid var(--fx-fg-3);border-right:2px solid var(--fx-fg-3);transform:translateY(-50%) rotate(45deg)}
a.fq-row__a:hover::after,a.fq-row__a:focus-visible::after{border-color:var(--fx-fg)}
a.fq-row__a:focus-visible,.fq-tab:focus-visible,.fq-pager__item:focus-visible{outline:2px solid var(--fx-fg);outline-offset:2px}
.fq-pager__item{border-radius:var(--fx-radius-pill)}
@media (prefers-reduced-motion:no-preference){
  a.fq-row__a::after{transition:transform var(--fx-time-fast),border-color var(--fx-time-fast)}
  a.fq-row__a:hover::after{transform:translate(4px,-50%) rotate(45deg)}
}
