/* 탐구 코치 — 색·여백은 styles.css 토큰만. 넓으면 입력 한 줄 + 예시 카드 여러 열, 좁으면 위아래로 쌓임 */
.iq-in { display: grid; gap: 16px; margin: var(--gap-head) auto 0; width: 100%; max-width: 760px; }   /* 넓은 화면에서 입력창이 끝없이 길어지지 않게 */
.iq-box { position: relative; }
.iq-ta { display: block; width: 100%; height: 60px; border-radius: 999px; padding: 0 70px 0 26px; font-size: 1rem; }   /* 한 줄짜리 알약 입력창 */
.iq-go { position: absolute; right: 8px; top: 50%; margin-top: -22px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--inv-bg); color: var(--inv-text); cursor: pointer; transition: opacity .25s ease; }
.iq-go:disabled { opacity: .5; cursor: default; }
.iq-spin { width: 18px; height: 18px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: iqSpin .8s linear infinite; }
@keyframes iqSpin { to { transform: rotate(360deg); } }
.iq-err { margin: 0; color: var(--danger); font-size: .92rem; }
.iq-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--gap-card); margin-top: var(--gap-section); align-items: start; }
.iq-ex { position: relative; display: grid; gap: 22px; padding: clamp(22px, 2.4vw, 34px); border-radius: 24px; background: var(--surface); }
.iq-tag { display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: .8rem; }
.iq-t { margin: 0; font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 400; line-height: 1.4; letter-spacing: -.02em; word-break: keep-all; }
.iq-ex section { display: grid; gap: 8px; }
.iq-ex h4 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .85rem; font-weight: 500; color: var(--muted); }
.iq-ex h4 b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--text); font-size: .74rem; font-weight: 500; }
.iq-ex p { margin: 0; line-height: 1.65; word-break: keep-all; }
.iq-m { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 0 12px; align-items: baseline; } .iq-m em { color: var(--muted); font-style: normal; font-size: .85rem; }   /* 준비·정리: 이름 | 내용 두 칸이라 줄이 길어도 내용이 같은 줄에 맞춰 내려감 */
.iq-s { margin: 4px 0; padding-left: 1.4em; display: grid; gap: 8px; line-height: 1.6; word-break: keep-all; } .iq-s li::marker { color: var(--muted); }
.iq-foot { margin: var(--gap-head) 0 0; color: var(--muted); font-size: .85rem; }
.iq-cp { position: absolute; top: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px); display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); color: var(--text); cursor: pointer; transition: background-color .25s ease; } .iq-cp:hover, .iq-cp:focus-visible { background: var(--surface2); }
.iq-ex header { padding-right: 48px; }

/* 함께 읽어 볼 자료 */
.iq-rl { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.iq-rb { display: grid; gap: 2px; width: 100%; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s ease; }
.iq-rb:hover { background: var(--surface2); }
.iq-rt { line-height: 1.45; word-break: break-word; } .iq-rb small { color: var(--muted); font-size: .78rem; }
.iq-dlg { width: min(640px, calc(100vw - 24px)); } .iq-dlg h3 { margin: 0 0 6px; line-height: 1.4; } .iq-meta { margin: 0 0 14px; }
.iq-read { max-height: min(56dvh, 460px); overflow-y: auto; padding-right: 4px; line-height: 1.75; } .iq-read p { margin: 0 0 12px; }
.iq-dlg .row.end { margin-top: 16px; gap: 10px; }

/* 기다리는 동안: 흩어진 점(데이터)이 하나씩 찍히다가 한 줄(추세선)로 모이고, 끝에서 빛이 퍼지는 그림 + 4단계 안내 문구가 돌아가며 바뀜. 색은 토큰만 */
.iq-wait { display: grid; justify-items: center; gap: 14px; padding: 8px 0 2px; color: var(--muted); }
.iq-wg { width: min(280px, 80%); height: auto; overflow: visible; }
.iq-d { fill: var(--text); transform-box: fill-box; transform-origin: center; opacity: 0; }
.iq-ln { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 256; stroke-dashoffset: 256; animation: iqLn 7s ease-in-out infinite; }
.iq-ring { fill: none; stroke: var(--text); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: iqRing 7s ease-out infinite; }
@keyframes iqLn { 0%, 50% { stroke-dashoffset: 256; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes iqRing { 0%, 68% { opacity: 0; transform: scale(1); } 70% { opacity: .9; transform: scale(1); } 88% { opacity: 0; transform: scale(5); } 100% { opacity: 0; transform: scale(5); } }
.iq-wt { position: relative; height: 1.5em; width: 100%; text-align: center; font-size: .95rem; }
.iq-wt span { position: absolute; inset: 0; opacity: 0; animation: iqCap 12.8s ease-in-out infinite backwards; }
.iq-wt span:nth-child(2) { animation-delay: 3.2s; } .iq-wt span:nth-child(3) { animation-delay: 6.4s; } .iq-wt span:nth-child(4) { animation-delay: 9.6s; }
@keyframes iqCap { 0% { opacity: 0; transform: translateY(8px); } 5%, 21% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-8px); } }
.iq-d1 { animation: iqD1 7s ease-in-out infinite; }
@keyframes iqD1 { 0% { opacity: 0; transform: translateY(-13px) scale(0); } 4% { opacity: 1; transform: translateY(-13px) scale(1.5); } 7% { opacity: 1; transform: translateY(-13px) scale(1); } 46% { transform: translateY(-13px); } 62% { transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
.iq-d2 { animation: iqD2 7s ease-in-out infinite; }
@keyframes iqD2 { 0% { opacity: 0; transform: translateY(9px) scale(0); } 8% { opacity: 1; transform: translateY(9px) scale(1.5); } 11% { opacity: 1; transform: translateY(9px) scale(1); } 46% { transform: translateY(9px); } 62% { transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
.iq-d3 { animation: iqD3 7s ease-in-out infinite; }
@keyframes iqD3 { 0% { opacity: 0; transform: translateY(-7px) scale(0); } 12% { opacity: 1; transform: translateY(-7px) scale(1.5); } 15% { opacity: 1; transform: translateY(-7px) scale(1); } 46% { transform: translateY(-7px); } 62% { transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
.iq-d4 { animation: iqD4 7s ease-in-out infinite; }
@keyframes iqD4 { 0% { opacity: 0; transform: translateY(14px) scale(0); } 16% { opacity: 1; transform: translateY(14px) scale(1.5); } 19% { opacity: 1; transform: translateY(14px) scale(1); } 46% { transform: translateY(14px); } 62% { transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
.iq-d5 { animation: iqD5 7s ease-in-out infinite; }
@keyframes iqD5 { 0% { opacity: 0; transform: translateY(-10px) scale(0); } 20% { opacity: 1; transform: translateY(-10px) scale(1.5); } 23% { opacity: 1; transform: translateY(-10px) scale(1); } 46% { transform: translateY(-10px); } 62% { transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
.iq-d6 { animation: iqD6 7s ease-in-out infinite; }
@keyframes iqD6 { 0% { opacity: 0; transform: translateY(6px) scale(0); } 24% { opacity: 1; transform: translateY(6px) scale(1.5); } 27% { opacity: 1; transform: translateY(6px) scale(1); } 46% { transform: translateY(6px); } 62% { transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
.iq-d7 { animation: iqD7 7s ease-in-out infinite; }
@keyframes iqD7 { 0% { opacity: 0; transform: translateY(12px) scale(0); } 28% { opacity: 1; transform: translateY(12px) scale(1.5); } 31% { opacity: 1; transform: translateY(12px) scale(1); } 46% { transform: translateY(12px); } 62% { transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
.iq-d8 { animation: iqD8 7s ease-in-out infinite; }
@keyframes iqD8 { 0% { opacity: 0; transform: translateY(-8px) scale(0); } 32% { opacity: 1; transform: translateY(-8px) scale(1.5); } 35% { opacity: 1; transform: translateY(-8px) scale(1); } 46% { transform: translateY(-8px); } 62% { transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
@media (max-width: 480px) { .iq-ta { font-size: .86rem; padding-left: 20px; padding-right: 64px; } .iq-ta::placeholder { font-size: .8rem; } }   /* 폰: 긴 안내 문구가 잘리지 않게 글자를 조금 줄임(16px 이상 아니면 아이폰이 확대하므로 입력 글자는 .86rem 까지만) */
.iq-ta::placeholder { text-overflow: ellipsis; }   /* 아주 좁은 폰(320px)에서 문구가 길면 … 로 줄임 */
.iq-lv { justify-self: center; }   /* 가로로 넓은 화면에서 학생 수준 선택과 입력창이 가운데에 머묾(홈 "무엇을 도와드릴까요?"와 같은 느낌) */

/* 자료를 불러오거나 한국어로 옮기는 동안: 영어 원문 대신 귀여운 "A ↔ 가" 뒤집기 카드 + 통통 튀는 점 */
.iq-load { display: grid; justify-items: center; gap: 16px; padding: 34px 0 30px; text-align: center; }
.iq-flip { position: relative; width: 66px; height: 66px; perspective: 360px; }
.iq-flip b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; font-weight: 700; color: var(--text); background: var(--surface2); border: 3px solid var(--text); border-radius: 18px 22px 17px 21px / 21px 17px 22px 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: iq-f1 2.4s ease-in-out infinite; }
.iq-flip b + b { animation-name: iq-f2; }
@keyframes iq-f1 { 0%, 38% { transform: rotateY(0deg); } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes iq-f2 { 0%, 38% { transform: rotateY(180deg); } 50%, 88% { transform: rotateY(360deg); } 100% { transform: rotateY(540deg); } }
.iq-ld-t { margin: 0; color: var(--muted); font-size: .95rem; }
.iq-dots { display: inline-flex; gap: 4px; margin-left: 3px; vertical-align: middle; } .iq-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: iq-hop 1s ease-in-out infinite; } .iq-dots i:nth-child(2) { animation-delay: .15s; } .iq-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes iq-hop { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-6px); opacity: 1; } }

.iq-gl { position: absolute; left: 26px; right: 70px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--muted); font-size: .95rem; line-height: 1.3; pointer-events: none; }   /* 로그인 전: 입력창 안쪽 안내(입력을 시작하면 사라짐) */
.iq-gl .link { color: var(--text); white-space: nowrap; pointer-events: auto; }
.iq-ta:not(:placeholder-shown) ~ .iq-gl { display: none; }
@media (max-width: 480px) { .iq-gl { left: 20px; right: 64px; font-size: .8rem; } }