/* =========================================
   이음 문의내역 — 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}

/* ---------- 문의 대화 — 이제 제 페이지다 (app/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}
.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) 사용 */

/* ---------- 아직 안 보낸 새 문의 (.is-compose) ----------
   고택을 고르는 줄은 걷어냈다 — 문의는 고택 상세·예약 상세에서 걸고, 문의내역은 보관함이다.
   여기서는 머리 모양만 바뀐다: 배지가 없고 제목이 가운데로 온다. */
.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) 사용 */