/* ============================================================
   lang.css — 외국어 회화코치(구 외국어 탐험대) 전용 층 (트랙 B, 2026-09-16)

   실리는 순서
     ds-fallback.css → ds/v1 fonts · yuja.css · themes/student.css → lang.css
     그 뒤에 tw.css (Tailwind 정적 빌드 — 트랙 D1 전에는 CDN 이 런타임에 같은 자리에 끼워 넣었다)

   이 파일이 지키는 제약 — 읽고 고칠 것
     1) 이 앱은 마크업 대부분을 JS 가 만든다. 트랙 B 는 <script> 를 고치지 않으므로
        yj- 클래스를 붙일 수 없다. 대신 **기존 클래스를 훅 삼아 DS 값을 입힌다.**
        새 yj- 이름을 여기서 짓지 않는다 (DS 이름공간과 조용히 충돌한다).
     2) Tailwind(tw.css) 는 이 파일보다 늦게 실린다. 같은 특이도(0,1,0)면 Tailwind 가 이긴다.
        그래서 Tailwind 유틸리티와 겹치는 곳은 id 나 부모 선택자로 특이도를 올렸다.
     3) 인라인 style="" 은 !important 로만 이긴다. !important 는 그 경우에만 쓴다.
     4) app-safe-area.css 에는 손대지 않는다 (사본 3개가 각자 포크됨).
        이겨야 할 때만 여기서 특이도를 한 단계 올려 덮는다.
   ============================================================ */


/* ── 0. 옛 토큰 → DS 토큰 ─────────────────────────────────────
   인라인 style="" 과 JS 템플릿 문자열이 --color-* 를 직접 부른다(수십 곳).
   그 문자열은 이 트랙에서 고칠 수 없으므로 이름은 두고 값만 DS 로 돌린다.
   student 테마에서 --yj-amber 는 리프 그린이다 — '지금 누를 것·선택됨'의 색. */
:root {
  --color-yuja-forest:      var(--yj-forest);
  --color-yuja-forest-mid:  var(--yj-forest);
  --color-yuja-lemon:       var(--yj-orange);
  --color-yuja-lemon-amber: var(--yj-amber);
  --color-yuja-lemon-tint:  var(--yj-amber-tint);
  --color-leaf-green:       var(--yj-leaf);
  --color-leaf-green-mid:   var(--yj-leaf-ink);
  --color-leaf-green-deep:  var(--yj-leaf-press);
  --color-leaf-green-light: var(--yj-leaf-tint);
  --color-leaf-green-tint:  var(--yj-leaf-tint);
  --color-canvas:           var(--yj-canvas);
  --color-canvas-cream:     var(--yj-cream);
  --color-surface:          var(--yj-surface);
  --color-hairline:         var(--yj-hairline);
  --color-hairline-strong:  var(--yj-hairline-strong);
  --color-ink-deep:         var(--yj-ink-deep);
  --color-ink:              var(--yj-ink);
  --color-charcoal:         var(--yj-ink);
  --color-slate:            var(--yj-slate);
  --color-steel:            var(--yj-steel);
  --color-on-dark:          var(--yj-on-dark);
  --color-on-dark-muted:    var(--yj-slate);   /* 유일한 사용처(헤더 부제)가 흰 바탕으로 옮겨 왔다 */

  /* 모서리 6종 → DS 4종. 선택 카드는 '소형 카드'라 8px 이다. */
  --radius-xs:   var(--yj-r-xs);
  --radius-sm:   var(--yj-r-sm);
  --radius-md:   var(--yj-r-sm);
  --radius-lg:   var(--yj-r-sm);
  --radius-xl:   var(--yj-r-lg);
  --radius-full: var(--yj-r-full);

  --shadow-card:   var(--yj-sh-card);
  --shadow-subtle: none;
  --font-primary:  var(--yj-font-ui);

  /* DS 에 스크림 토큰이 없다. ds/v1 .yj-scrim 과 같은 값을 여기 한 곳에만 둔다. */
  --lang-scrim: rgba(10, 12, 8, .40);

  /* 아이콘 — 이모지 대신. 마스크로 쓰므로 획 색은 무엇이든 되고, 실제 색은 currentColor 다.
     규격: viewBox 24 · stroke 1.6 · round cap/join · fill none */
  --lang-i-chat:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.6 8.6 0 0 1-3.8-.9L3 20.5l1.6-4.6A8.4 8.4 0 1 1 21 11.5Z'/%3E%3C/svg%3E");
  --lang-i-mic:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E");
  --lang-i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.6a3.5 3.5 0 0 1 0 6.8M18.5 14a6.5 6.5 0 0 1 3 6'/%3E%3C/svg%3E");
  --lang-i-bulb:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2V16h5v-.1c0-.8.4-1.5 1-2A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
  /* 트랙 C — 남은 이모지 자리 */
  --lang-i-skip:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7l5 5-5 5M13 7l5 5-5 5'/%3E%3C/svg%3E");
  --lang-i-cafe:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h12v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V9Z'/%3E%3Cpath d='M16 11h1.5a2.5 2.5 0 0 1 0 5H16M8 3.5v2M12 3.5v2'/%3E%3C/svg%3E");
  --lang-i-work:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12.5h18'/%3E%3C/svg%3E");
  --lang-i-scale:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M5 7h14M5 7l-3 6a3 3 0 0 0 6 0L5 7ZM19 7l-3 6a3 3 0 0 0 6 0l-3-6Z'/%3E%3C/svg%3E");
  --lang-i-scroll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h10a2 2 0 0 1 2 2v2h-4M8 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8M8 4a2 2 0 0 1 2 2v2H6M10 12h5M10 16h5'/%3E%3C/svg%3E");
  --lang-i-globe:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}


/* ── 1. 바탕 ─────────────────────────────────────────────── */

/* Tailwind min-h-screen 은 100vh 다. 모바일 주소창만큼 넘친다. */
body.min-h-screen { min-height: 100dvh; }

/* 앱 카드 — 인라인 그림자 리터럴을 DS 그림자로 */
body > .lg\:max-w-3xl { box-shadow: var(--yj-sh-card) !important; }


/* ── 2. 상단바 ───────────────────────────────────────────────
   Forest 그라데이션 전면 헤더 → 흰색 2단 바.
   1단은 DS 헤더 높이 56px 그대로다(어사문·되받쓰·SDGs 와 같은 첫인상).
   2단(태그라인)은 DS 의 .yj-shell--stacked 와 같은 발상 — 정보를 지우지 않는다. */
body .header-wave {
  padding: 0 var(--yj-s4) var(--yj-s3);
  background: var(--yj-canvas);
  border-bottom: 1px solid var(--yj-hairline);
  border-radius: var(--yj-r-lg) var(--yj-r-lg) 0 0;
}

/* 흰 바탕에서는 보이지도 않으면서 저사양 기기에서 blur 를 계산하게 만든다 */
body .header-wave > .blur-3xl { display: none; }

body .header-wave > h1 {
  height: var(--yj-dock-h);
  margin: 0 !important;
  padding: 0 calc(var(--yj-tap) + var(--yj-s3));
  font-family: var(--yj-font-disp);
  font-size: var(--yj-t-h2) !important;
  color: var(--yj-ink-deep) !important;
  letter-spacing: -.02em !important;
}
body .header-wave > h1 > img { height: 24px !important; }

/* 320px 폰에서 제목이 "외국어 탐험/대"로 쪼개져 56px 바를 넘쳤다(트랙 D4 실측).
   글자를 줄이지 않고 장식 그림을 뺀다. 낱말 단위로만 줄바꿈. */
body .header-wave > h1 { white-space: nowrap; word-break: keep-all; }
@media (max-width: 360px) {
  body .header-wave > h1 > img { display: none; }
}

/* 배움터 홈 버튼 — 인라인 스타일 덩어리라 전부 !important */
body .header-wave > a[href="../index.html"] {
  top: calc((var(--yj-dock-h) - var(--yj-tap)) / 2) !important;
  left: var(--yj-s2) !important;
  height: var(--yj-tap) !important;
  min-width: var(--yj-tap);
  justify-content: center;
  padding: 0 var(--yj-s3) !important;
  border: 0 !important;
  border-radius: var(--yj-r-full) !important;
  background: var(--yj-surface) !important;
  color: var(--yj-ink) !important;
  font-size: var(--yj-t-cap) !important;
  transition: filter var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease) !important;
}
body .header-wave > a[href="../index.html"]:hover { filter: brightness(.96); }
body .header-wave > a[href="../index.html"] > img { width: 20px !important; height: 20px !important; }

/* 좁은 화면에서는 라벨이 제목과 겹쳤다(실측). 아이콘만 남긴다.
   접근 이름은 링크의 title 이 준다. — 디자인통일_작업계획서 §3 모바일 규격 */
@media (max-width: 479px) {
  body .header-wave > a[href="../index.html"] { width: var(--yj-tap); padding: 0 !important; }
  body .header-wave > a[href="../index.html"] > span { display: none; }
}

/* 2단 — Yuja-Global 태그 + 태그라인 */
body .header-wave > h1 + div { gap: var(--yj-s2) !important; flex-wrap: wrap; }
body .header-wave > h1 + div > span {
  padding: 0 var(--yj-s2) !important;
  border-radius: var(--yj-r-xs) !important;
  background: var(--yj-amber-tint) !important;
  color: var(--yj-amber-ink) !important;
  font-size: var(--yj-t-label) !important;
  font-weight: 700 !important;
  line-height: 20px;
}
body .header-wave > h1 + div > p { font-size: var(--yj-t-cap) !important; }

/* 앱 모드에서 app-safe-area.css 가 헤더에 노치 여백을 한 번 더 준다.
   body 가 이미 같은 여백을 받으므로 이중이다. 특이도를 한 단계 올려 덮는다. */
@media (display-mode: standalone) {
  body .header-wave { padding-top: 0 !important; }
}

#pwa-install-btn {
  display: none;               /* JS 가 .visible 로 켠다 */
  position: absolute;
  top: calc((var(--yj-dock-h) - var(--yj-tap)) / 2);
  right: var(--yj-s2);
  align-items: center;
  gap: var(--yj-s1);
  height: var(--yj-tap);
  min-height: var(--yj-tap);
  margin-top: 0 !important;
  padding: 0 var(--yj-s3);
  border: 0;
  border-radius: var(--yj-r-full);
  background: var(--yj-amber-tint);
  color: var(--yj-amber-ink);
  font-family: var(--yj-font-ui);
  font-size: var(--yj-t-cap);
  font-weight: 700;
  cursor: pointer;
  z-index: 20;
  transition: filter var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
#pwa-install-btn.visible { display: inline-flex; }
#pwa-install-btn:hover  { filter: brightness(.96); }
#pwa-install-btn:active { transform: scale(.97); }
#pwa-install-btn svg    { flex-shrink: 0; }
@media (max-width: 479px) {
  #pwa-install-btn { width: var(--yj-tap); padding: 0 !important; justify-content: center; }
  #pwa-install-btn > span { display: none; }
}


/* ── 3. 퍼널 단계 ─────────────────────────────────────────── */

/* 펼침 동작은 JS 가 .active 로 켠다 — 값만 DS 모션으로 바꿨다 */
.step-container {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(var(--yj-s3));
  transition: opacity var(--yj-m-slow) var(--yj-ease),
              transform var(--yj-m-slow) var(--yj-ease),
              max-height var(--yj-m-slow) var(--yj-ease),
              background-color var(--yj-m-slow) var(--yj-ease),
              box-shadow var(--yj-m-slow) var(--yj-ease);
  pointer-events: none;
  scroll-margin-top: var(--yj-s6);
}
.step-container.active {
  opacity: 1;
  max-height: 2400px;
  overflow: visible;
  transform: none;
  pointer-events: auto;
  margin-bottom: var(--yj-s6);
}

/* 단계 제목 — 18곳에 teal 잔재(text-teal-900)가 남아 있었다 */
.step-container h2 {
  gap: var(--yj-s2) !important;
  font-family: var(--yj-font-ui) !important;
  font-size: var(--yj-t-h2) !important;
  font-weight: 700 !important;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--yj-ink-deep) !important;
  word-break: keep-all;
}
.step-container > .justify-between { gap: var(--yj-s3); }
@media (max-width: 360px) {
  .step-container h2 { font-size: var(--yj-t-body) !important; }
}

/* 단계 번호 — 리프 위 흰 글자는 13px 에서 대비가 모자란다. 잉크를 올린다(DS primary 와 같은 조합). */
.step-header-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--yj-r-full);
  background: var(--yj-amber);
  color: var(--yj-ink-deep);
  font-size: var(--yj-t-cap);
  font-weight: 800;
}

.skip-btn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--yj-s3);
  border: 0;
  border-radius: var(--yj-r-sm);
  background: transparent;
  color: var(--yj-slate);
  font-family: var(--yj-font-ui);
  font-size: var(--yj-t-cap);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
.skip-btn::after { content: ""; position: absolute; inset: -4px 0; }   /* 보이는 36px, 눌리는 44px */
.skip-btn:hover  { background: var(--yj-surface); }
.skip-btn:active { transform: scale(.97); }


/* ── 4. 선택 카드 ────────────────────────────────────────────
   4종(item-btn · lang-card · level-card · chatmode-btn)은 같은 일을 한다 — '하나 고르기'.
   같은 일은 같은 모양으로. 선택 표시는 테두리 굵기를 바꾸지 않고 안쪽 링으로
   그려서, 누르는 순간 카드가 1px 밀리는 흔들림을 없앴다. */
.item-btn,
.lang-card,
.level-card,
.chatmode-btn {
  min-height: var(--yj-tap);
  border: 1px solid var(--yj-hairline-strong);
  border-radius: var(--yj-r-sm);
  background: var(--yj-canvas);
  box-shadow: none;
  color: var(--yj-ink-deep);
  font-family: var(--yj-font-ui);
  word-break: keep-all;
  cursor: pointer;
  transition: background-color var(--yj-m-fast) var(--yj-ease),
              box-shadow var(--yj-m-fast) var(--yj-ease),
              filter var(--yj-m-fast) var(--yj-ease),
              transform var(--yj-m-mid) var(--yj-ease);
}
:is(.item-btn, .lang-card, .level-card, .chatmode-btn):hover  { filter: brightness(.96); }
:is(.item-btn, .lang-card, .level-card, .chatmode-btn):active { transform: scale(.97); }
:is(.item-btn, .lang-card, .level-card, .chatmode-btn).selected {
  border-color: transparent;
  background: var(--yj-amber-tint);
  box-shadow: inset 0 0 0 2px var(--yj-amber);
}

.item-btn {
  padding: var(--yj-s3) var(--yj-s4);
  font-size: var(--yj-t-body);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;             /* Tailwind text-center 가 붙은 카드는 그쪽이 이긴다 — 의도대로 */
}
.item-btn .item-desc {
  display: block;
  margin-top: var(--yj-s1);
  font-size: var(--yj-t-cap);
  font-weight: 400;
  line-height: 1.45;
  color: var(--yj-slate);
}
.item-btn.selected .item-desc { color: var(--yj-amber-ink); }

.lang-card {
  padding: var(--yj-s3);
  text-align: center;
  font-weight: 700;
}
.lang-card > div:last-child { font-size: var(--yj-t-body) !important; line-height: 1.3; }

.level-card { text-align: left; }
.level-card .level-card-title {          /* Tailwind text-[15px] 를 이기려고 두 단계 */
  display: flex;
  align-items: center;
  gap: var(--yj-s2);
  font-size: var(--yj-t-body);
  font-weight: 700;
  color: var(--yj-ink-deep);
}

/* 레벨 정보(i) — 28px 원이 카드 모서리에 붙어 있었다. 44px 로 키우고 세로 가운데로. */
.info-trigger-btn {
  position: absolute;
  top: 50%;
  right: var(--yj-s1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--yj-tap);
  height: var(--yj-tap);
  border: 0;
  border-radius: var(--yj-r-full);
  background: transparent;
  box-shadow: none;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color var(--yj-m-fast) var(--yj-ease);
}
.info-trigger-btn:hover { background: var(--yj-surface); }

.chatmode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--yj-s3);
}
.chatmode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--yj-s2);
  padding: var(--yj-s4);
  text-align: center;
}
/* 🎭 💬 → 선 아이콘. 글자는 남기되(보조기술용) 크기를 0 으로. */
.chatmode-btn-icon {
  width: 28px;
  height: 28px;
  font-size: 0;
  color: var(--yj-amber-ink);
  background: currentColor;
  -webkit-mask: var(--lang-i-users) center / contain no-repeat;
          mask: var(--lang-i-users) center / contain no-repeat;
}
#chatmode-free .chatmode-btn-icon {
  -webkit-mask-image: var(--lang-i-chat);
          mask-image: var(--lang-i-chat);
}
.chatmode-btn-label {
  font-size: var(--yj-t-body);
  font-weight: 700;
  color: var(--yj-ink-deep);
}

/* 가로 스크롤 줄 (모바일) → 격자 (640px~) */
.mobile-x-scroll {
  display: flex;
  overflow-x: auto;
  gap: var(--yj-s3);
  padding-top: var(--yj-s2);      /* 선택 링·눌림 효과가 위에서 잘리지 않게 */
  padding-bottom: var(--yj-s3);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.mobile-x-scroll::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .mobile-x-scroll { display: grid; overflow-x: visible; padding-bottom: 0; }
}

/* 답변 길이 3칸 — 17px 로 올리면 좁은 폰에서 라벨이 두 줄로 부서진다.
   DS 처방대로 글자를 줄이지 않고 배치를 바꾼다. */
@media (max-width: 479px) {
  #grid-length { grid-template-columns: 1fr; }
}


/* ── 5. 세그먼트 · 제안 태그 ─────────────────────────────── */
.scenario-cat-btn {
  min-height: 36px;
  padding: 0 var(--yj-s3);
  border: 0;
  border-radius: var(--yj-r-sm);
  background: var(--yj-surface-2);
  color: var(--yj-slate);
  font-family: var(--yj-font-ui);
  font-size: var(--yj-t-cap);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--yj-m-fast) var(--yj-ease), color var(--yj-m-fast) var(--yj-ease),
              filter var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
.scenario-cat-btn:hover  { filter: brightness(.96); }
.scenario-cat-btn:active { transform: scale(.97); }
.scenario-cat-btn.active { background: var(--yj-amber-tint); color: var(--yj-amber-ink); }

.free-topic-example {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yj-s2);
  margin-top: var(--yj-s3);
}
.free-topic-tag {
  min-height: 36px;
  padding: 0 var(--yj-s3);
  border: 0;
  border-radius: var(--yj-r-sm);
  background: var(--yj-leaf-tint);
  color: var(--yj-leaf-ink);
  font-family: var(--yj-font-ui);
  font-size: var(--yj-t-cap);
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
.free-topic-tag:hover  { filter: brightness(.96); }
.free-topic-tag:active { transform: scale(.97); }


/* ── 6. 입력 ─────────────────────────────────────────────── */
.ai-select {
  width: 100%;
  height: 48px;
  padding: 0 var(--yj-s7) 0 var(--yj-s3);     /* 오른쪽은 화살표 자리 */
  border: 1.5px solid var(--yj-hairline-strong);
  border-radius: var(--yj-r-sm);
  background-color: var(--yj-canvas);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6E69' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--yj-s3) center;
  background-size: 20px;
  font-family: var(--yj-font-ui);
  font-size: var(--yj-t-body);
  font-weight: 500;
  color: var(--yj-ink);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color var(--yj-m-fast) var(--yj-ease), box-shadow var(--yj-m-fast) var(--yj-ease);
}
/* 입력 포커스는 DS 에서 주황의 역할이다 */
.ai-select:focus { border-color: var(--yj-orange); box-shadow: 0 0 0 3px var(--yj-orange-tint); }

/* 직접 입력칸 4곳 — 둘은 인라인 스타일, 셋은 teal Tailwind(border-teal-100)였다 */
.step-container .relative > input[type="text"] {
  height: 48px;
  padding: 0 104px 0 var(--yj-s3) !important;
  border: 1.5px solid var(--yj-hairline-strong) !important;
  border-radius: var(--yj-r-sm) !important;
  background: var(--yj-canvas) !important;
  font-family: var(--yj-font-ui) !important;
  font-size: var(--yj-t-body) !important;
  font-weight: 500 !important;
  color: var(--yj-ink) !important;
  transition: border-color var(--yj-m-fast) var(--yj-ease), box-shadow var(--yj-m-fast) var(--yj-ease);
}
.step-container .relative > input[type="text"]::placeholder { color: var(--yj-steel); font-size: 15px; }
.step-container .relative > input[type="text"]:focus {
  outline: none;
  border-color: var(--yj-orange) !important;
  box-shadow: 0 0 0 3px var(--yj-orange-tint);
}

/* 입력칸 안의 확인·직접입력·바로직행 — Forest·teal 채움 → secondary(틴트) */
.step-container .relative > input + button {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  padding: 0 var(--yj-s3) !important;
  border: 0 !important;
  border-radius: var(--yj-r-sm) !important;
  background: var(--yj-amber-tint) !important;
  color: var(--yj-amber-ink) !important;
  font-family: var(--yj-font-ui) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: filter var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
.step-container .relative > input + button:hover  { filter: brightness(.96); }
.step-container .relative > input + button:active { transform: scale(.97); }

/* "💡 입력 시 중간 선택 스텝을 모두 건너뜁니다!" — teal 12px */
.step-container p.text-teal-600 {
  margin-top: var(--yj-s2);
  font-size: var(--yj-t-cap);
  font-weight: 500;
  color: var(--yj-slate);
}


/* ── 7. 하단 실행 영역 ───────────────────────────────────── */
#selection-summary { box-shadow: none !important; }

#selection-summary .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--yj-r-full);
  background: var(--yj-leaf);
}
#selection-summary .pulse-dot + span {
  font-size: var(--yj-t-label) !important;
  color: var(--yj-leaf-ink) !important;
}

/* 트랙 C6 — 칩은 이제 버튼이다(누르면 그 단계로). 긴 직접입력은 한 줄에서 줄임표로. */
.summary-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 36px;
  padding: 0 var(--yj-s2);
  border: 0;
  border-radius: var(--yj-r-xs);
  background: var(--yj-amber-tint);
  color: var(--yj-amber-ink);
  font-family: var(--yj-font-ui);
  font-size: var(--yj-t-cap);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: filter var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
.summary-chip:hover  { filter: brightness(.96); }
.summary-chip:active { transform: scale(.97); }

/* 칩으로 돌아온 단계를 잠깐 표시 */
.step-container.is-jump-target {
  border-radius: var(--yj-r-sm);
  background: var(--yj-amber-tint);
  box-shadow: 0 0 0 var(--yj-s2) var(--yj-amber-tint);
}

/* 채팅 대화 = 화면의 유일한 primary. 라이브 대화 = secondary.
   둘이 같은 무게였다 — 초등학생에게 '제일 진한 알약을 누르면 된다'가 성립하지 않았다.
   id 로 시작하는 건 Tailwind text-[14px] 를 이기기 위해서다. */
#selection-summary .generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yj-s2);
  height: 52px;
  padding: 0 var(--yj-s4);
  border: 0;
  border-radius: var(--yj-r-full);
  background: var(--yj-grad);
  box-shadow: var(--yj-sh-card);
  color: var(--yj-ink-deep);            /* 브랜드색 위 흰 글자 금지 */
  font-family: var(--yj-font-ui);
  font-size: var(--yj-t-body);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
#selection-summary .generate-btn:hover  { filter: brightness(.96); }
#selection-summary .generate-btn:active { transform: scale(.97); }
#selection-summary .generate-btn.live-mode {
  border-radius: var(--yj-r-sm);
  background: var(--yj-amber-tint);
  box-shadow: none;
  color: var(--yj-amber-ink);
}
/* 💬 ✨ → 말풍선 · 마이크. 라이브는 '반짝임'이 아니라 '말하기'다. */
#selection-summary .generate-btn > span:first-child {
  flex: none;
  width: 20px;
  height: 20px;
  font-size: 0;
  background: currentColor;
  -webkit-mask: var(--lang-i-chat) center / contain no-repeat;
          mask: var(--lang-i-chat) center / contain no-repeat;
}
#selection-summary .generate-btn.live-mode > span:first-child {
  -webkit-mask-image: var(--lang-i-mic);
          mask-image: var(--lang-i-mic);
}

.info-box {
  padding: var(--yj-s3);
  border: 0;
  border-radius: var(--yj-r-sm);
  background: var(--yj-orange-tint);
}
#bottom-live-guide > span:first-child {
  flex: none;
  width: 20px;
  height: 20px;
  font-size: 0 !important;
  color: var(--yj-orange-ink);
  background: currentColor;
  -webkit-mask: var(--lang-i-bulb) center / contain no-repeat;
          mask: var(--lang-i-bulb) center / contain no-repeat;
}
#bottom-live-guide > p {
  font-size: var(--yj-t-cap) !important;          /* 10px 이었다 */
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: var(--yj-ink) !important;
}


/* ── 8. 토스트 ───────────────────────────────────────────── */
#toast {
  bottom: var(--yj-float-gap);
  padding: var(--yj-s3) var(--yj-s4);
  border-radius: var(--yj-r-lg);
  background: var(--yj-forest);
  box-shadow: var(--yj-sh-toast);
  color: var(--yj-on-dark);
  font-size: 15px;
  font-weight: 600;
  transition: opacity var(--yj-m-slow) var(--yj-ease), transform var(--yj-m-slow) var(--yj-ease);
}
.toast-show {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}


/* ── 9. 레벨 정보 모달 ───────────────────────────────────── */
#level-info-modal {
  -webkit-backdrop-filter: none;      /* Tailwind backdrop-blur-sm — 교실 저사양 기기에서 금지 */
          backdrop-filter: none;
  transition: opacity var(--yj-m-slow) var(--yj-ease);
}
#level-info-modal.show { display: flex !important; opacity: 1; }
#level-info-modal > div {
  border: 0;
  border-radius: var(--yj-r-lg);
  box-shadow: var(--yj-sh-sheet);
  transition: transform var(--yj-m-slow) var(--yj-ease);
}
#level-info-modal.show > div { transform: scale(1); }
#level-info-modal > div > button:first-child {
  top: var(--yj-s2);
  right: var(--yj-s2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--yj-tap);
  height: var(--yj-tap);
  border-radius: var(--yj-r-full);
  color: var(--yj-slate);
  transition: background-color var(--yj-m-fast) var(--yj-ease);
}
#level-info-modal > div > button:first-child:hover { background: var(--yj-surface) !important; }
#modal-content > div:last-child { font-size: var(--yj-t-cap) !important; line-height: 1.6 !important; }


/* ── 10. iOS 홈 화면 추가 안내 시트 ─────────────────────── */
#ios-install-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 var(--yj-safe-b);
  background: var(--lang-scrim);      /* backdrop-filter 제거 */
}
#ios-install-modal.show { display: flex; }

.ios-modal-sheet {
  width: 100%;
  max-width: 480px;
  padding: var(--yj-s5) var(--yj-s5) var(--yj-s6);
  border-radius: var(--yj-r-lg) var(--yj-r-lg) 0 0;
  background: var(--yj-canvas);
  box-shadow: var(--yj-sh-sheet);
  animation: slideUpSheet var(--yj-m-slow) var(--yj-ease) both;
}
@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.ios-modal-handle {
  width: 36px;
  height: 4px;
  margin: 0 auto var(--yj-s5);
  border-radius: var(--yj-r-full);
  background: var(--yj-hairline-strong);
}
.ios-modal-sheet > div:nth-child(2) p      { font-size: var(--yj-t-label) !important; }
.ios-modal-sheet h3                          { font-size: var(--yj-t-h2) !important; }
.ios-modal-sheet > div:nth-child(2) > button { width: var(--yj-tap) !important; height: var(--yj-tap) !important; }
.ios-modal-sheet > p:last-child              { font-size: var(--yj-t-cap) !important; }

.ios-step {
  display: flex;
  align-items: flex-start;
  gap: var(--yj-s3);
  padding: var(--yj-s3);
}
.ios-step + .ios-step { border-top: 1px solid var(--yj-hairline); }
.ios-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--yj-r-full);
  background: var(--yj-amber);
  color: var(--yj-ink-deep);
  font-size: var(--yj-t-cap);
  font-weight: 800;
}
.ios-step p             { word-break: keep-all; }   /* "버튼입니/다" 처럼 낱말이 쪼개졌다 */
.ios-step p:first-child { font-size: var(--yj-t-body) !important; line-height: 1.45; }
.ios-step p + p         { font-size: var(--yj-t-cap) !important; }


/* ── 11. 스크롤바 ────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--yj-hairline-strong); border-radius: var(--yj-r-full); }


/* ── 12. 프롬프트 미리보기 시트 (트랙 C1) ───────────────────
   위치·배치는 여기서 갖는다. 버튼만 DS 클래스(yj-btn)를 빌린다.
   ds/v1 이 막혀 컴포넌트 규칙이 없어도 시트가 화면 아래에 붙어 있게. */
html.lang-sheet-open { overflow: hidden; }

.lang-sheet__scrim {
  position: fixed;
  inset: 0;
  z-index: 18;
  background: var(--lang-scrim);
}
.lang-sheet__panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 19;
  display: flex;
  flex-direction: column;
  gap: var(--yj-s3);
  max-width: 560px;
  max-height: 92dvh;
  margin: 0 auto;
  padding: var(--yj-s2) var(--yj-s4) calc(var(--yj-safe-b) + var(--yj-s4));
  border-radius: var(--yj-r-lg) var(--yj-r-lg) 0 0;
  background: var(--yj-canvas);
  box-shadow: var(--yj-sh-sheet);
  animation: slideUpSheet var(--yj-m-slow) var(--yj-ease) both;
}
.lang-sheet__panel .yj-sheet__grab { margin: var(--yj-s1) auto 0; }

.lang-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--yj-s3);
}
.lang-sheet__kicker { margin: 0 0 var(--yj-s1); color: var(--yj-amber-ink); }

.lang-sheet__notice {
  margin: 0;
  padding: var(--yj-s3);
  border-radius: var(--yj-r-sm);
  background: var(--yj-orange-tint);
  color: var(--yj-ink);
  font-size: var(--yj-t-cap);
  line-height: 1.55;
  word-break: keep-all;
}

/* 원문 보기 — 읽기 본문이 아니라 '무엇이 나가는지' 확인하는 보조 화면이라 보조 크기(13px) */
.lang-sheet__text {
  flex: 1 1 auto;
  width: 100%;
  min-height: 160px;
  max-height: 40dvh;
  padding: var(--yj-s3);
  border: 1px solid var(--yj-hairline-strong);
  border-radius: var(--yj-r-sm);
  background: var(--yj-cream);
  color: var(--yj-ink);
  font-family: var(--yj-font-ui);
  font-size: var(--yj-t-cap);
  line-height: 1.6;
  resize: none;
}

.lang-sheet__status {
  margin: 0;
  font-size: var(--yj-t-cap);
  font-weight: 600;
  color: var(--yj-leaf-ink);
  word-break: keep-all;
}
.lang-sheet__status.is-error { color: var(--yj-error); }

.lang-sheet__actions { display: grid; gap: var(--yj-s2); }


/* ── 13. 지난번 설정으로 이어서 (트랙 C5) ─────────────────── */
.lang-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--yj-s3);
  margin-bottom: var(--yj-s5);
  padding: var(--yj-s3) var(--yj-s4);
  border-radius: var(--yj-r-lg);
  background: var(--yj-grad-soft);
}
.lang-resume[hidden] { display: none; }     /* display:flex 가 hidden 속성을 이기지 않게 */
.lang-resume__title {
  margin: 0;
  font-size: var(--yj-t-body);
  font-weight: 700;
  color: var(--yj-ink-deep);
  word-break: keep-all;
}
.lang-resume__desc {
  margin: var(--yj-s1) 0 0;
  font-size: var(--yj-t-cap);
  color: var(--yj-slate);
}
.lang-resume__actions { display: flex; gap: var(--yj-s2); }



/* ── 14. 남은 이모지 → 선 아이콘 (트랙 C) ──────────────────
   정적 버튼의 이모지는 span.lang-emoji 로 감싸 두었다(버튼 글자는 그대로).
   기본은 숨김. 뜻을 더해 주는 자리만 아이콘으로 바꾼다. */
.lang-emoji { display: none; }

.lang-emoji--skip,
.lang-emoji--cafe,
.lang-emoji--work,
.lang-emoji--debate,
.lang-emoji--history {
  display: inline-block;
  flex: none;
  font-size: 0;
  background: currentColor;
  -webkit-mask: var(--lang-i) center / contain no-repeat;
          mask: var(--lang-i) center / contain no-repeat;
}
.lang-emoji--skip    { --lang-i: var(--lang-i-skip);   width: 16px; height: 16px; margin-right: 2px; }
.lang-emoji--cafe    { --lang-i: var(--lang-i-cafe); }
.lang-emoji--work    { --lang-i: var(--lang-i-work); }
.lang-emoji--debate  { --lang-i: var(--lang-i-scale); }
.lang-emoji--history { --lang-i: var(--lang-i-scroll); }
.lang-emoji--cafe,
.lang-emoji--work,
.lang-emoji--debate,
.lang-emoji--history {
  width: 20px;
  height: 20px;
  margin-right: var(--yj-s1);
  vertical-align: middle;      /* font-size:0 인 인라인 블록은 기준선이 아래 끝이라 음수 px 는 한 줄만큼 끌어내린다(실측) */
  color: var(--yj-amber-ink);
}

/* '기타 언어' 카드 — 🌐 👇 대신 */
.lang-other-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto var(--yj-s1);
  color: var(--yj-slate);
  background: currentColor;
  -webkit-mask: var(--lang-i-globe) center / contain no-repeat;
          mask: var(--lang-i-globe) center / contain no-repeat;
}