/* ══════════════════════════════════════════════════════════════════════
   이야기 레이어 — 각 페이지의 작은 게시판 ([08 §C-45])

   Threads/X 결의 타임라인. 100% 풀스크린이고 뎁스가 없다.
   색은 서비스 토큰을 그대로 쓴다(#1a7a4a 계열).
   ══════════════════════════════════════════════════════════════════════ */

/* ── 말풍선 FAB ── */
/*  발견 장치는 이것 하나다. 본문 중간에 '이야기 스트립'을 끼우는 안도 있었으나
    목록을 가려서 뺐다 — 대신 필 안에 글 수를 적어 눌러볼 이유를 준다. */
.tpfab-talk {
  height: 50px; padding: 0 17px; border: 0; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: #15211b; color: #fff; font-family: inherit; font-size: 14px; font-weight: 800;
  box-shadow: 0 8px 20px rgba(16, 33, 27, .32);
  transition: transform .18s, box-shadow .18s;
  position: relative;
}
.tpfab-talk:hover { transform: translateY(-2px); box-shadow: 0 11px 26px rgba(16, 33, 27, .4); }
.tpfab-talk i { font-size: 17px; }
.tpfab-talk .cnt {
  background: #2ecc71; color: #0d241a; font-size: 12px; font-weight: 800;
  border-radius: 999px; padding: 1px 8px; min-width: 20px;
}
/*  글이 없으면 숫자를 붙이지 않는다 — 0 을 띄우면 '비어 있다'를 광고하는 꼴이다 */
.tpfab-talk .cnt[hidden] { display: none; }
/*  내 글 새 답글 — 초록 숫자(글 수)와 달리 '나에게 온 소식'이라 빨간 점.
    숫자를 안 붙인다: 점 하나로 충분하고, 개수는 눌러 들어가면 글마다 보인다. */
.tpfab-talk .dot {
  position: absolute; top: -3px; right: -1px; width: 12px; height: 12px;
  border-radius: 50%; background: #ff3b30; border: 2px solid #fff;
}
.tpfab-talk .dot[hidden] { display: none; }
@media (max-width: 768px) { .tpfab-talk { height: 46px; padding: 0 15px; font-size: 13.5px; } }

/* ── 레이어 ── */
.tl-ov {
  position: fixed; inset: 0; z-index: 20000; display: none;
  background: rgba(12, 22, 17, .5);
}
.tl-ov.on { display: block; }
.tl-panel {
  position: absolute; inset: 0; margin: 0 auto; max-width: 620px;
  background: #fff; display: flex; flex-direction: column;
  animation: tlUp .2s ease;
}
@keyframes tlUp { from { transform: translateY(22px); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tl-panel { animation: none; } }

.tl-hd {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 8px;
  padding-top: calc(12px + env(safe-area-inset-top));
}
.tl-back {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #f2f5f3; color: #3a463f; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.tl-back:hover { background: #e7ece9; }
/* 브레드크럼 = 현재 위치. 스택이 아니라 상태다 — 상위를 누르면 그 레벨까지
   필터가 풀릴 뿐이고, ← 는 여전히 닫기다. 깊이는 최대 3. */
/*  ⚠️ 가로 스크롤을 두지 않는다(2026-08-18) — 스크롤 안에 숨은 단계는
    **없는 것과 같다.** 대신 글자를 줄이고, 자리가 모자라면 **마지막 칸만**
    말줄임한다. 앞 단계(커뮤니티 › 방)는 언제나 온전히 보인다 —
    거기가 눌러서 넓히는 자리라 안 보이면 기능이 사라진다. */
.tl-crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px;
            white-space: nowrap; overflow: hidden; }
.tl-crumb i { flex: none; font-size: 9px; color: #b9c4be; }
.tl-cr { flex: none; border: 0; background: none; padding: 2px 0; cursor: pointer;
         font-family: inherit; font-size: 11.5px; font-weight: 700; color: #7d8b83; text-decoration: none; }
.tl-cr:hover { color: #1a7a4a; text-decoration: underline; }
.tl-cr-now { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 800;
             letter-spacing: -.02em; color: #15211b;
             overflow: hidden; text-overflow: ellipsis; }
/* ✕ — ← 와 같은 일을 한다. 오른쪽 끝이 '닫기'의 관습 자리다. */
.tl-x {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: #7b8a83; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.tl-x:hover { background: #f2f5f3; color: #3a463f; }

/* ── 타임라인 ── */
.tl-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tl-post { display: flex; gap: 11px; padding: 13px 16px 11px; border-bottom: 1px solid #f0f2f1; }
.tl-ava {
  flex: none; width: 37px; height: 37px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; background: #eef1ef; color: #8a968f; object-fit: cover;
}
/*  아바타는 회원만 브랜드색. 이름 색은 익명·회원이 같다(2026-08-17). */
.tl-ava.member { background: #1a7a4a; color: #fff; }
.tl-body { flex: 1; min-width: 0; }
.tl-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/* 익명도 회원과 같은 색을 쓴다(2026-08-17 되돌림). 구분은 이름 색이 아니라
   **회원에게 붙는 인증마크**가 한다 — 익명을 흐리게 두면 2등 시민처럼 보인다. */
.tl-name { font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: #15211b;
           max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 인증마크 = '가입했다'는 사실 표시지 등급이 아니다(절대원칙 2 — 점수·등급 없음).
   회원이면 활동량과 무관하게 똑같이 붙고, 단계·색 변화는 두지 않는다. */
.tl-verified { flex: none; font-size: 12px; color: #1a7a4a; margin-left: -2px; }
/* 운영자 배지 — 절대 원칙 5 확장(2026-08-21). 운영자가 아이디를 바꿔가며 쓴 글을
   실유저 글과 구분하지 못하던 상태를 끝낸다. ⚠️ 실유저에는 배지가 없다. */
.tl-op { flex: none; font-size: 9.5px; font-weight: 800; line-height: 1;
  padding: 3px 5px; border-radius: 4px; margin-left: 2px;
  background: rgba(26, 122, 74, .10); color: #1a7a4a; letter-spacing: -.02em; }
.tl-time { font-size: 12.5px; color: #98a39d; }
/* `대회 영월동강배` 처럼 방 > 앵커를 함께 보여준다. 방 이름은 옅게,
   앵커는 진하게 — 좁은 폭에서 무엇이 핵심인지 바로 읽힌다. */
.tl-tag {
  margin-left: auto; flex: none; border: 0; font-family: inherit; cursor: pointer;
  padding: 2px 9px; border-radius: 999px; background: #e9f4ee; color: #6a9b83;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.tl-tag b { color: #1a7a4a; font-weight: 800; }
.tl-tag:hover { background: #d9ece2; }
.tl-tx { margin: 3px 0 7px; font-size: 14.5px; line-height: 1.55; color: #232e28;
         word-break: keep-all; white-space: pre-wrap; }
.tl-acts { display: flex; gap: 16px; align-items: center; color: #8a968f; font-size: 12.5px; font-weight: 600; }
.tl-acts a { color: inherit; text-decoration: none; }
.tl-acts i { margin-right: 3px; }
/* 좋아요·답글은 읽던 자리에서 바로 — 링크처럼 보이되 페이지를 떠나지 않는다 */
.tl-like, .tl-thread-toggle {
  border: 0; padding: 0; background: none; cursor: pointer;
  color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit;
}
.tl-like.on { color: #d64545; }
.tl-thread-toggle[aria-expanded="true"] { color: #1a7a4a; }

/* ── 답글 쓰레드 — 모양도 한 곳에서 (talk_layer.js 의 tpTalkThread 와 짝) ──
   커뮤니티 타임라인과 이야기 레이어가 **같은 마크업**을 쓴다. 예전에는
   커뮤니티가 `.cm-th-*` 사본을 따로 갖고 있어서, 답글을 고칠 때마다 두 벌을
   고쳐야 했다(2026-08-19 합침). 담는 상자의 여백만 화면마다 다르다. */
.tp-thread { display: none; }
.tp-thread.on { display: block; }
/*  레이어 줄은 이미 아바타(37px)만큼 들여쓰여 있다 — 여기서 또 크게 들이면
    320px 화면에서 답글 입력칸이 126px 까지 줄어든다(실측). 12px 만 준다. */
.tl-thread { padding: 2px 0 4px 12px; }
.tp-th-row { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid #eef1ef; }
.tp-th-ava {
  flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; background: #eef1ef; color: #8a968f;
}
.tp-th-ava.member { background: #1a7a4a; color: #fff; }
.tp-th-body { flex: 1; min-width: 0; }
.tp-th-head { display: flex; align-items: center; gap: 5px; }
.tp-th-name { font-size: 12.5px; font-weight: 800; color: #15211b; }
/* 인증마크 = '가입했다'는 사실 표시지 등급이 아니다(절대원칙 2) */
.tp-th-verified { flex: none; font-size: 11px; color: #1a7a4a; }
.tp-th-time { font-size: 11.5px; color: #98a39d; }
.tp-th-tx { margin-top: 2px; font-size: 13.5px; line-height: 1.55; color: #3d4d44;
            white-space: pre-wrap; word-break: keep-all; }
.tp-th-empty { padding: 9px 0; font-size: 12.5px; color: #98a39d; }
/* 답글은 삭제만 — 고치기는 없다(한 줄 대화라 지우고 다시 다는 게 낫다) */
.tp-th-del { margin-left: auto; border: 0; background: none; padding: 0 2px; cursor: pointer;
  color: #98a39d; font-family: inherit; font-size: 11.5px; font-weight: 700; }
.tp-th-del:hover { color: #d64545; }
.tp-th-form { display: flex; gap: 6px; padding: 9px 0 2px; border-top: 1px solid #eef1ef; }
/* ⚠️ `min-width:0` 이 없으면 남기기 버튼이 화면 밖으로 밀린다([08 §C-56]).
   입력창의 min-width:auto 는 size 속성(기본 20자) 기준 고유폭(실측 238px)이다. */
.tp-th-form input {
  flex: 1; min-width: 0; height: 36px; border: 1px solid #e3e8e5; border-radius: 999px;
  background: #f8faf9; padding: 0 13px; font-size: 16px; font-family: inherit;
  color: #15211b; outline: none;
}
.tp-th-form input:focus { border-color: #1a7a4a; background: #fff; }
.tp-th-form button {
  flex: none; padding: 0 14px; border-radius: 999px; border: 0; background: #1a7a4a;
  color: #fff; font-size: 12.5px; font-weight: 800; font-family: inherit; cursor: pointer;
}

/* ── 내 글 고치기·지우기 ──
   내 글에만 뜬다. 눈에 띌 이유가 없어 회색이고, 지우기만 빨갛게 반응한다. */
.tl-own { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; }
.tl-own button {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: #a3aca7; font-family: inherit; font-size: 12px; font-weight: 700;
}
.tl-own button:hover { color: #3d4d44; }
.tl-own .tl-del:hover { color: #d64545; }
.tl-edit-field {
  width: 100%; min-height: 78px; margin: 2px 0 7px; padding: 9px 11px; box-sizing: border-box;
  border: 1px solid #dfe5e2; border-radius: 10px; background: #fff; resize: vertical;
  font-family: inherit; font-size: 14.5px; line-height: 1.55; color: #232e28; outline: none;
}
.tl-edit-field:focus { border-color: #1a7a4a; }
.tl-edit-acts { display: flex; justify-content: flex-end; gap: 7px; }
.tl-edit-acts button {
  border: 0; border-radius: 8px; padding: 6px 13px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 800;
}
.tl-edit-cancel { background: #f1f4f2; color: #5c6b63; }
.tl-edit-save { background: #1a7a4a; color: #fff; }

.tl-empty { padding: 46px 30px; text-align: center; color: #8a968f; font-size: 13px; line-height: 1.7; }
.tl-empty b { display: block; margin-bottom: 4px; color: #3d4d44; font-size: 14.5px; }
.tl-loading { padding: 34px; text-align: center; color: #b0bab4; font-size: 13px; }

/* ── 입력 ── */
.tl-input {
  flex: none; border-top: 1px solid #eef1ef; background: #fff;
  padding: 10px 14px 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
/* 추천 질문 — **읽는 것** 위주다(2026-08-17 2차). 한 줄씩 3행,
   질문답게 Q 마크를 달아 가독성을 챙긴다. 누르면 입력창에 넣어주긴 하지만
   그게 목적이 아니다. 풀은 크고 날짜로 로테이션돼 매일 조금씩 바뀐다. */
/* 소재 — 2행 2열 (2026-08-18 운영자 요청).
   세로 4줄은 입력창을 밀어내고, 3개는 마지막 줄이 비어 어정쩡했다.
   ⚠️ 격자가 유지되려면 문구가 **짧아야 한다**(서버 `TALK_PROMPT_MAX_LEN`).
      길면 두 줄로 접혀 칸 높이가 제각각이 된다 — 그래서 한 줄로 자른다. */
.tl-asks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 9px; }
.tl-ask {
  display: flex; align-items: center; gap: 6px; text-align: left; min-width: 0;
  border: 1px solid #e7ecea; border-radius: 9px; background: #fbfcfb;
  padding: 8px 10px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: #4a5b52; cursor: pointer; line-height: 1.4;
}
.tl-ask > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-ask::before {
  content: "Q"; flex: none; width: 15px; height: 15px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e9f4ee; color: #1a7a4a; font-size: 9.5px; font-weight: 800;
}
.tl-ask:hover { border-color: #bcd6c8; background: #f3f8f5; color: #1a7a4a; }

/* 사진 첨부 — 회원 전용. 비회원이 누르면 로그인으로 안내한다. */
.tl-imgbtn {
  flex: none; width: 32px; height: 32px; border: 1px solid #e3e8e5; border-radius: 9px;
  background: #fff; color: #6f7f76; cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tl-imgbtn:hover { border-color: #1a7a4a; color: #1a7a4a; }
.tl-imgbtn.busy { opacity: .5; cursor: default; }
.tl-imgrow { display: flex; gap: 6px; margin-bottom: 8px; }
.tl-imgrow[hidden] { display: none; }
.tl-imgthumb { position: relative; width: 52px; height: 52px; border-radius: 9px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.08); }
.tl-imgthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-imgthumb button { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
  border: 0; border-radius: 50%; background: rgba(12,22,17,.65); color: #fff; font-size: 9px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }

.tl-inbar { display: flex; }
/* 세 줄이 기본이다. 한 줄짜리 칸은 "한마디만 쓰라"는 압박이 되고, 실제로
   쓰려던 사람도 짧게 끊게 만든다. */
.tl-field {
  flex: 1; min-height: 64px; max-height: 150px; resize: none; outline: none;
  border: 1.5px solid #e3e8e5; border-radius: 14px; background: #f8faf9;
  padding: 11px 13px; font: inherit; font-size: 16px; color: #1c2620; line-height: 1.5;
}
.tl-field:focus { border-color: #1a7a4a; background: #fff; }
/* 지금 누구로 쓰는가 — 익명이 자기 이름을 쓰기 전에 아는 유일한 자리.
   회색이라 눈에 안 들어왔다 → 초록 필로 올렸다(2026-08-18 운영자 요청).
   ⚠️ 보내기 줄과 **같은 줄**이다. 자리가 모자라면 이름이 말줄임될 뿐
      보내기 버튼을 밀지 않는다 — 버튼이 밀리면 글을 못 올린다. */
.tl-me {
  display: flex; align-items: center; gap: 5px;
  min-width: 0; flex: 0 1 auto; overflow: hidden;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid #cfe6da; background: #eaf5ef; color: #1a7a4a;
  font-size: 11.5px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.tl-me[hidden] { display: none; }
.tl-me i { flex: none; color: #1a7a4a; font-size: 11.5px; }
.tl-me b { min-width: 0; overflow: hidden; text-overflow: ellipsis;
           color: #14603a; font-weight: 800; }
/*  좁은 폭에서는 설명을 접는다 — 이름이 먼저다 */
.tl-me small { color: #6a9b83; font-weight: 600; font-size: 11px; }
@media (max-width: 520px) { .tl-me small { display: none; } }

.tl-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 9px; font-size: 11.5px; color: #98a39d;
}
.tl-foot-right { display: flex; align-items: center; gap: 10px; flex: none; }
.tl-foot #tlCount { font-variant-numeric: tabular-nums; flex: none; }
.tl-send {
  flex: none; border: 0; border-radius: 999px; padding: 9px 17px;
  background: #1a7a4a; color: #fff; cursor: pointer; opacity: .4;
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 6px; transition: opacity .15s;
}
.tl-send.ready { opacity: 1; }
.tl-send:disabled { cursor: default; }

/* ── 쓰기 전용 시트 (커뮤니티 화면) ────────────────────────────────
   커뮤니티는 화면 자체가 목록이다. 그 위에 같은 목록을 또 띄우지 않고,
   **쓰는 칸만** 아래에서 올라온다. 남는 것은 셋 —
   뎁스(커뮤니티 › 테니스픽 이야기) · 추천 주제 · 입력줄(사진·남기기).
   레이어를 하나 더 만들지 않았다: 같은 DOM 에 모드만 다르다. */
.tl-ov.compose .tl-panel {
  top: auto; bottom: 0; height: auto; max-height: 88vh;
  border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(12, 22, 17, .18);
  animation: tlSheet .22s ease;
}
@keyframes tlSheet { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tl-ov.compose .tl-panel { animation: none; } }
/*  목록 자리는 통째로 접는다 — 높이 0 이 아니라 display:none 이라야
    `flex:1` 이 남은 자리를 먹지 않는다. */
.tl-ov.compose .tl-scroll { display: none; }
.tl-ov.compose .tl-hd { padding-bottom: 10px; border-bottom: 1px solid #eef1ef; }
.tl-ov.compose .tl-input { border-top: 0; }

/* 익명 이름 안내 — 처음 남긴 그 순간에만. 읽으러 온 사람에게는 안 보인다. */
.tl-notice {
  flex: none; margin: 0 14px 8px; padding: 11px 14px;
  border: 1px solid #dcebe2; border-radius: 13px; background: #f4faf6;
  color: #1a7a4a; font-size: 13px; line-height: 1.5;
  transition: opacity .4s;
}
.tl-notice b { font-size: 14.5px; }
.tl-notice small { color: #6f7f76; font-size: 11.5px; }
.tl-notice.out { opacity: 0; }