/* 연습 흐름(2026-10-29): 설명 카드 · 근거 단서 갈래 · 녹음 판 · 낱말 만들기 · 반응 영상 · 친구랑 더 이야기하기 · 보호자와 함께 */

/* ── 설명 카드: 그림 + 굵은 제목 + 한 줄 + [자세히] ── */
.play-icard{ display:flex; gap:var(--sp-3); align-items:flex-start; margin:var(--sp-2) 0; padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-card); border:2px solid transparent; background:#fff; box-shadow:var(--shadow-card); color:var(--color-ink); text-align:left; }
.play-icard--feel{ background:#FFF0EC; border-color:var(--kid-pink); }
.play-icard--clue{ background:#EEF8EA; border-color:var(--kid-green); }
.play-icard--rule{ background:#FFF7DD; border-color:var(--color-primary); }
.play-icard--guide{ background:#F3F0FF; border-color:var(--kid-purple); }
.play-icard__pic{ flex:none; width:44px; height:44px; border-radius:50%; background:#fff; display:grid; place-items:center; overflow:hidden; }
.play-icard__pic > img, .play-icard__pic > *{ max-width:100%; max-height:100%; }
.play-icard__pic--svg{ color:var(--color-ink); }
.play-icard__body{ min-width:0; flex:1; }
.play-icard__head{ margin:0; font-size:var(--fs-child-body); font-weight:800; line-height:1.35; display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.play-icard__tag{ font-size:var(--fs-caption); font-weight:700; background:var(--kid-purple); color:var(--color-ink); border-radius:var(--radius-pill); padding:2px 8px; }
.play-icard__line{ margin:2px 0 0; font-size:var(--fs-body); line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
.play-icard__more{ margin-top:var(--sp-1); font-size:var(--fs-small); }
.play-icard__more > summary{ cursor:pointer; display:inline-flex; align-items:center; min-height:32px; font-weight:700; color:var(--kid-guide); }
.play-icard__more > summary:focus-visible{ outline:3px solid var(--focus-kid); outline-offset:2px; border-radius:6px; }
.play-icard__morebody p{ margin:var(--sp-1) 0 0; line-height:1.55; word-break:keep-all; }

/* ── 단서 갈래 그림·이름 ── */
.play-clue__ic{ display:inline-grid; place-items:center; width:26px; height:26px; margin-right:6px; vertical-align:middle; flex:none; }
.play-clue__tag{ font-size:var(--fs-caption); font-weight:700; border-radius:var(--radius-pill); padding:1px 8px; margin-right:6px; background:rgba(255,255,255,.75); }
.play-clue--face .play-clue__ic, .play-clue--body .play-clue__ic{ color:#2F6B4F; }
.play-clue--voice .play-clue__ic{ color:#4B4FA8; }
.play-clue--place .play-clue__ic{ color:#8A5A1E; }

/* ── 녹음 판 ── */
.rec{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); padding:var(--sp-4); margin:var(--sp-2) 0;
  background:var(--kid-surface); border:2px solid var(--kid-border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
.rec__stage{ position:relative; width:min(100%, 320px); display:grid; place-items:center; }
.rec__preview, .rec--video .rec__play{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-choice); background:#000; }
.rec--audio .rec__play{ width:100%; }
.rec__mirror{ transform:scaleX(-1); }
.rec__mic{ width:96px; height:96px; border-radius:50%; background:var(--kid-pink); }
.rec.is-recording .rec__mic{ animation:rec-pulse 2s ease-in-out infinite; }
.rec__msg{ margin:0; text-align:center; font-size:var(--fs-body); color:var(--kid-guide); word-break:keep-all; }
.rec__bar{ display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; width:100%; }
.rec__btn{ min-height:var(--touch-child); min-width:120px; }
.rec__btn--go, .rec__btn--stop{ background:#E8604C; color:#fff; border-color:#E8604C; }
.rec-ring{ position:absolute; inset:auto; width:120px; height:120px; display:grid; place-items:center; pointer-events:none; }
.rec--video .rec-ring{ top:8px; right:8px; width:84px; height:84px; }
.rec-ring__svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.rec-ring__bg{ fill:rgba(255,255,255,.85); stroke:#F4D9D2; stroke-width:8; }
.rec-ring__fg{ fill:none; stroke:#E8604C; stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .2s linear; }
.rec-ring__num{ position:relative; font-size:40px; font-weight:800; color:#B23A28; }
.rec--video .rec-ring__num{ font-size:30px; }
@keyframes rec-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }

/* ── 말해 보기: 녹음 단추 · 낱말 만들기 · 되짚기 ── */
.play-rec-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-2) 0; }
.play-rec-btn{ flex:1 1 140px; min-height:var(--touch-child); }
.play-compose{ margin:var(--sp-2) 0; padding:var(--sp-3); background:#FFFBF2; border:2px dashed var(--kid-border); border-radius:var(--radius-card); }
.play-compose__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.play-compose__ask{ margin:0; font-weight:700; word-break:keep-all; }
.play-compose__strip{ min-height:var(--touch-child); display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; margin:var(--sp-2) 0;
  padding:var(--sp-2); background:#fff; border:2px solid var(--kid-border-press); border-radius:var(--radius-choice); }
.play-compose__empty{ color:var(--kid-guide); font-size:var(--fs-small); }
.play-compose__keys{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.play-compose__key, .play-compose__tok{ min-height:var(--touch-child); }
.play-compose__tok{ background:var(--color-primary); }
.play-compose__say{ margin-top:var(--sp-2); width:100%; }
.play-hint-btn{ flex:none; }
.play-keycheck{ margin:var(--sp-2) 0; text-align:center; }
.play-keycheck__q{ margin:0 0 var(--sp-2); font-weight:700; }
.play-keycheck__keys{ display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; margin-bottom:var(--sp-2); }
.play-keycheck__key{ padding:4px 12px; border-radius:var(--radius-pill); background:var(--kid-green); font-weight:700; }
.play-keycheck__btns{ display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; }
.play-keytry{ margin:var(--sp-2) 0; padding:var(--sp-3); border-radius:var(--radius-card); background:#FFF7DD; }
.play-keytry__lead{ margin:0; font-size:var(--fs-small); color:var(--kid-guide); }
.play-keytry__model{ margin:2px 0 0; font-weight:800; word-break:keep-all; }

/* ── 반응 영상 ── */
.play-rx{ position:relative; }
.play-rx__video{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-card); background:#000; display:block; }
.play-rx__again{ position:absolute; right:8px; top:8px; }
.play-rx__say{ display:flex; gap:var(--sp-2); align-items:center; margin-top:var(--sp-2); padding:var(--sp-2) var(--sp-3); background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
.play-rx__say p{ margin:0; word-break:keep-all; }
.play-rx__say img{ width:44px; height:44px; object-fit:contain; flex:none; }

/* ── 친구랑 더 이야기하기 ── */
.play-talk__row{ display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3); }
.play-talk__who{ display:flex; align-items:center; gap:var(--sp-3); }
.play-talk__name{ margin:0; font-weight:800; font-size:var(--fs-section); }
.play-talk__log{ display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-3) 0; max-height:42vh; overflow-y:auto; }
.play-talk__msg{ margin:0; padding:var(--sp-2) var(--sp-3); border-radius:18px; max-width:85%; line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
.play-talk__msg--friend{ align-self:flex-start; background:#fff; box-shadow:var(--shadow-card); }
.play-talk__msg--kid{ align-self:flex-end; background:var(--color-primary); }
.play-talk__wait{ margin:0; color:var(--kid-guide); font-size:var(--fs-small); }
.play-talk__form{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.play-talk__input{ flex:1 1 180px; min-height:var(--touch-child); font:inherit; padding:0 var(--sp-3); border:2px solid var(--kid-border-press); border-radius:var(--radius-choice); }
.play-talk__send, .play-talk__micbtn{ min-height:var(--touch-child); flex:none; width:auto; }
.play-guard-badge{ margin-left:auto; margin-right:var(--sp-2); align-self:center; font-size:var(--fs-caption); font-weight:700; background:var(--kid-purple); color:var(--color-ink); border-radius:var(--radius-pill); padding:4px 10px; white-space:nowrap; }

@media (prefers-reduced-motion: reduce){
  .rec.is-recording .rec__mic{ animation:none; }
  .rec-ring__fg{ transition:none; }
}

/* ── 장면 영상 소리 듣기(영상 속 아이 말 한 번) ── */
.scene__hear{ position:absolute; left:8px; bottom:8px; z-index:3; width:var(--touch-child); height:var(--touch-child); border-radius:50%;
  border:2px solid #fff; background:rgba(90,62,43,.72); color:#fff; display:grid; place-items:center; cursor:pointer; }
.scene__hear.is-on{ background:#E8604C; }
.scene__hear:focus-visible{ outline:3px solid var(--focus-kid); outline-offset:2px; }

/* 돋보기 놀이 칩의 단서 갈래 꼬리표 */
.g-clue-tag{ font-size:var(--fs-caption); font-weight:700; border-radius:var(--radius-pill); padding:1px 8px; margin:0 6px; background:rgba(255,255,255,.8); color:var(--color-ink); white-space:nowrap; }
.g-clue-tag--face, .g-clue-tag--body{ background:#EEF8EA; }
.g-clue-tag--voice{ background:#EEF0FF; }
.g-clue-tag--place{ background:#FFF4DE; }