/* =========================================
   이음 문의내역 — Figma node 254:12445 (+ 작성 시트)
   공통 리셋·헤더·탭·배지·아이콘·입력·GNB 는 tokens.css 사용
========================================= */
.app{background:var(--white);padding-bottom:calc(40px + env(safe-area-inset-bottom))}

/* ---------- 문의 리스트 (카드형) ---------- */
.clist{display:flex;flex-direction:column}
.crow{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;padding:16px;border-bottom:1px solid var(--g100);background:var(--white)}
.crow:active{background:var(--g50)}
/* 텍스트는 공통 .fs-* (tokens.css) 사용 — 배치 보정만 유지 */
.crow__top{display:flex;align-items:center;gap:8px}
.crow__top>.badge{flex-shrink:0}
.crow__cat{color:var(--g600)}
.crow__title{font-weight:700;color:var(--g900);line-height:1.4;letter-spacing:-.4px}
.crow__meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.crow__place{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow__place i{flex:none}
.crow__time{flex-shrink:0}

/* ---------- 문의 상세: 전체화면 채팅 스레드 (partner/inquiry.html 참고) ---------- */
.cthread{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;max-width:var(--app-max);z-index:50;
  background:var(--white);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;
  transition:transform .28s cubic-bezier(.32,.72,0,1),visibility 0s .28s}
.cthread.on{transform:translateX(0);visibility:visible;transition:transform .28s cubic-bezier(.32,.72,0,1)}
.cthread__head{flex:none;display:flex;align-items:center;gap:10px;height:calc(56px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 12px 0;border-bottom:1px solid var(--g91);background:var(--white)}
.cthread__back{width:32px;height:32px;display:grid;place-items:center;color:var(--g900);flex-shrink:0}
.cthread__user{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
/* 아바타는 공통 .icirc .icirc--36 (tokens.css) 사용 */
.cthread__meta{min-width:0}
.cthread__name{font-size:15px;font-weight:700;color:var(--g900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cthread__sub{margin-top:2px;font-size:12px;color:var(--g500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cthread__head .badge{flex-shrink:0}

.cmsgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--g50)}
.cmsg{display:flex;flex-direction:column;max-width:78%}
.cmsg--me{align-self:flex-end;align-items:flex-end}
.cmsg--them{align-self:flex-start;align-items:flex-start}
.cfrom{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--g500);letter-spacing:-.3px;margin-bottom:6px}
/* 아바타는 공통 .icirc .icirc--20 .icirc--solid (tokens.css) 사용 */
.cbubble{padding:10px 14px;border-radius:14px;font-size:14px;line-height:20px;letter-spacing:-.35px;white-space:pre-line;word-break:break-word}
.cmsg--me .cbubble{background:var(--blue-500);color:var(--white);border-top-right-radius:4px}
.cmsg--them .cbubble{background:var(--white);border:1px solid var(--g200);color:var(--g900);border-top-left-radius:4px}
.ctime{font-size:12px;color:var(--g400);margin-top:4px;letter-spacing:-.3px}

.cinput{flex:none;display:flex;align-items:center;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--g100);background:var(--white)}
.cinput__field{flex:1;height:44px;border:1px solid var(--g200);border-radius:9999px;padding:0 16px;font-size:14px;color:var(--g900);background:var(--white)}
.cinput__field::placeholder{color:var(--g400)}
.cinput__field:focus{outline:none;border-color:var(--blue-500)}
/* 전송 버튼은 공통 .icirc .icirc--44 .icirc--solid (tokens.css) 사용 */

/* ---------- 새 문의 컴포즈 바 (스레드 상단, 컴포즈 모드에서만) ---------- */
.ccompose{flex:none;display:none;flex-direction:column;gap:16px;padding:16px;
  border-bottom:1px solid var(--g100);background:var(--white)}
.cthread.is-compose .ccompose{display:flex}
.cthread.is-compose #threadBadge{display:none}
/* 새 문의(컴포즈) 헤더 — 페이지 헤더(.shead)와 동일 스타일: 20px 뒤로가기 + 18px 중앙 제목 */
.cthread.is-compose .cthread__head{gap:0;padding:env(safe-area-inset-top) 16px 0;border-bottom:0}
.cthread.is-compose .cthread__back{width:20px;height:20px}
.cthread.is-compose .cthread__user{justify-content:center}
.cthread.is-compose .cthread__name{font-size:18px;letter-spacing:-.45px;line-height:26px;text-align:center}
.cthread.is-compose .cthread__head::after{content:'';width:20px;flex:none} /* 뒤로가기와 대칭 우측 스페이서 → 제목 중앙정렬 */
/* 필드 레이아웃은 공통 .field (tokens.css) 사용 */
/* 컴포즈 안내(빈 메시지 영역) */
.cmsgs__hint{margin:auto;display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--g400);text-align:center;padding:24px}
.cmsgs__hint i{font-size:44px;color:var(--g300)}
.cmsgs__hint p{font-size:14px;line-height:1.5;letter-spacing:-.35px}

/* 빈 상태는 공통 .empty (tokens.css) 사용 */

/* ---------- 플로팅 + 버튼 ---------- */
.fabwrap{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:var(--app-max);height:0;pointer-events:none;z-index:40}
.fab{position:absolute;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:9999px;background:var(--blue-500);
  color:var(--white);display:grid;place-items:center;pointer-events:auto;
  box-shadow:0 8px 24px rgba(17,17,17,.12),0 2px 6px rgba(17,17,17,.06)}

/* 컴포즈 유형 칩(공통 .chip.chip--pick) 줄바꿈 그룹 */
.wchips{display:flex;flex-wrap:wrap;gap:8px}
.wfield__opt{color:var(--g400);font-weight:400}