/* 대화하기(#/talk, 2026-10-29): 한 주제로 이야기 이어 가기 — 주제 고르기 · 보호자 확인 · 대화(별·받침 칩·힌트) · 정리 카드
   폰 320 ~ 태블릿 1366. 누르는 칸은 아이 터치(56) 이상. 색은 base.css 토큰(크림·민트·연보라) */
.tk{ max-width:880px; margin:0 auto; padding:var(--sp-3) 16px calc(var(--sp-6, 32px) + env(safe-area-inset-bottom, 0px)); color:var(--color-ink); }
.tk__top{ display:flex; justify-content:flex-start; margin-bottom:var(--sp-2); }
.tk__homebtn{ min-height:var(--touch-parent); width:auto; }
.tk__title{ margin:var(--sp-2) 0 var(--sp-1); font-family:var(--font-heading); font-size:var(--fs-hero); line-height:1.25; }
.tk__title:focus, .tk__name:focus, .tk__endtitle:focus, .tk__gq:focus{ outline:none; }
.tk__sub{ margin:0 0 var(--sp-3); color:var(--kid-guide); font-size:var(--fs-child-body); line-height:1.5; word-break:keep-all; }
.tk__h2{ margin:var(--sp-4) 0 var(--sp-2); font-size:var(--fs-section); }

/* 친구 고르기 */
.tk__friends{ display:flex; gap:var(--sp-2); overflow-x:auto; padding:4px 2px 8px; scroll-snap-type:x proximity; }
.tk__friend{ flex:none; width:104px; min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:#fff; border:3px solid var(--kid-border); border-radius:var(--radius-choice); box-shadow:var(--shadow-card); scroll-snap-align:start; padding:6px; }
.tk__friend[aria-pressed="true"]{ border-color:var(--color-mint); background:#EEF8F3; }
.tk__friend .ch-img{ width:72px; height:72px; object-fit:contain; }
.tk__fname{ font-weight:800; font-size:var(--fs-body); }
.tk__nopic{ display:inline-block; width:56px; height:56px; border-radius:50%; background:var(--kid-peach); }

/* 주제 판 */
.tk__topics{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:var(--sp-2); }
.tk__topic{ min-height:104px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:var(--sp-2);
  background:#fff; border:2px solid var(--kid-border-press); border-radius:var(--radius-choice); box-shadow:var(--shadow-card); text-align:center; }
.tk__topic--any{ background:#F3F0FF; border-color:var(--kid-purple); }
.tk__ticon{ font-size:40px; line-height:1; }
.tk__tname{ font-weight:800; font-size:var(--fs-body); line-height:1.3; word-break:keep-all; }
@media (max-width:359px){ .tk__topics{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .tk__ticon{ font-size:32px; } }

/* 보호자 확인 · 보호자 카드(연보라) */
.tk__guardcard{ margin:var(--sp-3) 0; padding:var(--sp-4); background:#F3F0FF; border:2px solid var(--kid-purple); border-radius:var(--radius-card); color:var(--parent-text, #334155); }
.tk__tag{ display:inline-block; margin:0 0 var(--sp-2); font-size:var(--fs-caption); font-weight:700; background:var(--kid-purple); color:var(--color-ink); border-radius:var(--radius-pill); padding:2px 10px; }
.tk__gq{ margin:0 0 var(--sp-1); font-size:var(--fs-title); }
.tk__gwhy{ margin:0; line-height:1.5; word-break:keep-all; }
.tk__row{ display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3); }
@media (min-width:600px){ .tk__row{ flex-direction:row; } .tk__row > *{ flex:1; } }

/* 대화 */
.tk--chat{ display:flex; flex-direction:column; min-height:calc(100dvh - 8px); }
.tk__head{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.tk__homeicon{ flex:none; }
.tk__who{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; flex:1 1 180px; }
.tk__who .ch-img{ width:56px; height:56px; object-fit:contain; flex:none; }
.tk__whotxt{ min-width:0; }
.tk__name{ margin:0; font-size:var(--fs-section); line-height:1.2; }
.tk__pill{ display:inline-block; margin:2px 0 0; padding:2px 10px; border-radius:var(--radius-pill); background:var(--kid-green); font-weight:700; font-size:var(--fs-small); }
.tk__meter{ flex:0 1 auto; text-align:right; }
.tk__meterlbl{ margin:0; font-size:var(--fs-caption); font-weight:700; color:var(--kid-guide); }
.tk__stars{ display:flex; gap:2px; justify-content:flex-end; }
.tk__star{ font-size:24px; line-height:1; color:#E7DCCF; transition:color var(--motion-normal) var(--ease-gentle), transform var(--motion-normal) var(--ease-gentle); }
.tk__star.is-on{ color:#F2B53A; transform:scale(1.08); }
.tk__stars--big{ justify-content:center; margin:var(--sp-2) 0; }
.tk__stars--big .tk__star{ font-size:40px; }
.tk__badge{ align-self:flex-start; margin:var(--sp-1) 0 0; }
.tk__log{ flex:1 1 auto; display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-3) 0; padding:var(--sp-2); min-height:160px; max-height:46dvh; overflow-y:auto;
  background:rgba(255,255,255,.55); border-radius:var(--radius-card); }
.tk__msg{ margin:0; padding:var(--sp-2) var(--sp-3); border-radius:18px; max-width:85%; font-size:var(--fs-child-body); line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
.tk__msg--friend{ align-self:flex-start; background:#fff; box-shadow:var(--shadow-card); border-bottom-left-radius:6px; }
.tk__msg--kid{ align-self:flex-end; background:var(--color-primary); border-bottom-right-radius:6px; }
.tk__wait{ margin:0; color:var(--kid-guide); font-size:var(--fs-small); }

/* 받침: 말 시작 칩 · 낱말 칩 · 힌트 */
.tk__help{ display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.tk__chips{ display:flex; gap:var(--sp-2); overflow-x:auto; padding:2px 2px 6px; -webkit-overflow-scrolling:touch; }
.tk__chip{ flex:none; min-height:var(--touch-child); width:auto; padding:0 var(--sp-3); white-space:nowrap; }
.tk__chip--st{ background:#EEF8F3; border-color:var(--color-mint); }
.tk__chip--w{ background:#fff; }
.tk__hintrow{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.tk__hint{ min-height:var(--touch-child); width:auto; flex:none; }
.tk__hintline{ margin:0; flex:1 1 200px; font-size:var(--fs-body); font-weight:700; line-height:1.4; word-break:keep-all; }
.tk__hintline:empty{ display:none; }

.tk__form{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.tk__input{ flex:1 1 200px; min-width:0; min-height:var(--touch-child); font:inherit; font-size:var(--fs-child-body); padding:0 var(--sp-3);
  border:2px solid var(--kid-border-press); border-radius:var(--radius-choice); background:#fff; color:var(--color-ink); }
.tk__input:focus-visible{ outline:3px solid var(--focus-kid); outline-offset:2px; }
.tk__send, .tk__micbtn{ min-height:var(--touch-child); flex:none; width:auto; }
.tk__mic:empty{ display:none; }
.tk__foot{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; justify-content:space-between; margin-top:var(--sp-3); }
.tk__stop{ min-height:var(--touch-child); width:auto; }
.tk__seeend{ width:auto; flex:1 1 220px; }
.tk__safety{ width:auto; }
@media (max-width:420px){ .tk__send{ flex:1 1 auto; } .tk__micbtn{ flex:1 1 auto; } .tk__meter{ flex-basis:100%; text-align:left; } .tk__stars{ justify-content:flex-start; } }

/* 몸통: 기본은 위아래 */
.tk__body{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.tk__side{ min-width:0; }
/* 넓은 태블릿 가로: 대화칸 왼쪽, 받침·입력 오른쪽 */
@media (min-width:1024px) and (orientation:landscape){
  .tk--chat{ max-width:1240px; }
  .tk__body{ flex-direction:row; align-items:flex-start; gap:var(--sp-4); }
  .tk__body > .tk__log{ flex:1.4 1 0; min-width:0; max-height:calc(100dvh - 200px); min-height:360px; }
  .tk__side{ flex:1 1 0; margin-top:var(--sp-3); }
  .tk__side .tk__chips{ flex-wrap:wrap; overflow:visible; }
}

/* 정리 */
.tk__endcard{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--sp-4); background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
.tk__endcard .ch-img{ width:96px; height:96px; object-fit:contain; }
.tk__endtitle{ margin:var(--sp-2) 0 0; font-size:var(--fs-title); line-height:1.3; word-break:keep-all; }
.tk__endlist{ list-style:none; margin:var(--sp-2) 0 0; padding:0; display:grid; gap:6px; font-size:var(--fs-child-body); font-weight:700; }
.tk__endlist li::before{ content:"✓ "; color:#2F6B4F; }
.tk__endnext{ margin:var(--sp-3) 0 0; color:var(--kid-guide); line-height:1.5; word-break:keep-all; }
.tk__gtitle{ margin:0; font-size:var(--fs-section); }
.tk__gmode{ margin:4px 0 var(--sp-2); font-size:var(--fs-small); color:var(--parent-muted, #6B7280); }
.tk__gnums{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:var(--sp-2); margin:0; }
.tk__gnum{ background:#fff; border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-3); }
.tk__gnum dt{ font-size:var(--fs-caption); line-height:1.35; word-break:keep-all; color:var(--parent-muted, #6B7280); }
.tk__gnum dd{ margin:2px 0 0; font-size:var(--fs-section); font-weight:800; color:var(--parent-text, #334155); }
.tk__gtip{ margin:var(--sp-3) 0 0; line-height:1.55; word-break:keep-all; }
.tk__gnote{ margin:var(--sp-2) 0 0; font-size:var(--fs-caption); color:var(--parent-muted, #6B7280); }
@media (prefers-reduced-motion: reduce){ .tk__star{ transition:none; } .tk__star.is-on{ transform:none; } }