* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  :root {
    --purple: #6D28D9; --purple-light: #EDE9FE; --purple-dark: #4C1D95;
    --purple-mid: #7C3AED;
    --green: #059669;  --green-light: #D1FAE5;
    --gray: #9CA3AF;   --gray-light: #F9FAFB; --gray-border: #F3F4F6;
    --text: #0F172A;   --text-sub: #64748B;
    --bg: #F8F7FF;     --white: #FFFFFF;
    --radius: 20px;    --radius-sm: 12px;
    --shadow-sm: 0 1px 3px rgba(109,40,217,0.08);
    --shadow-md: 0 4px 16px rgba(109,40,217,0.12);
  }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', sans-serif;
         background: #F4F0FF; color: var(--text); height: 100dvh;
         display: flex; flex-direction: column; overflow: hidden; }

  /* ── 헤더 ── */
  .header { background: var(--white); border-bottom: 1px solid var(--gray-border);
            padding: 10px 16px; display: flex; align-items: center; gap: 10px;
            min-height: 54px; box-shadow: var(--shadow-sm); }
  .header-back { font-size: 29px; cursor: pointer; color: var(--purple); padding: 2px 6px 2px 0; }
  .header-avatar { width: 38px; height: 38px; border-radius: 50%;
                   background: var(--purple-light); display: flex; align-items: center;
                   justify-content: center; font-size: 22px; flex-shrink: 0;
                   overflow: hidden; border: 2px solid var(--purple-light); }
  .header-info { flex: 1; min-width: 0; }
  .header-name { font-size: 18px; font-weight: 700; letter-spacing: -0.3px;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-sub  { font-size: 13px; color: var(--text-sub); margin-top: 1px; }
  .header-mode { margin-left: auto; flex-shrink: 0; }
  .mode-btn { border: 1.5px solid var(--purple); border-radius: 20px; padding: 5px 12px;
              font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s;
              background: var(--white); color: var(--purple); }
  .mode-btn.coach { background: var(--purple); color: var(--white); }

  /* ── 캐릭터 선택 화면 ── */
  #screen-select { flex: 1; overflow-y: auto; padding: 20px 16px 24px; flex-direction: column; }
  .select-title { font-size: 31px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.5px; color: #1E0A3C; }
  .select-sub   { font-size: 17px; color: var(--text-sub); margin-bottom: 20px; }
  .char-cards   { display: flex; flex-direction: column; gap: 10px; }
  .char-card    { background: var(--white); border: 1.5px solid var(--gray-border);
                  border-radius: var(--radius); padding: 14px 16px; cursor: pointer;
                  display: flex; align-items: center; gap: 14px; transition: all .2s;
                  box-shadow: var(--shadow-sm); }
  .char-card:active { transform: scale(.985); box-shadow: none; }
  .locked-card { opacity: 0.82; cursor: pointer; }
  .locked-card:active { transform: scale(.985); }
  .char-card.selected { border-color: var(--purple); border-width: 2px; background: #FAF5FF;
                         box-shadow: 0 0 0 4px rgba(109,40,217,0.15); }
  .char-emoji   { width: 56px; height: 56px; border-radius: 50%;
                  background: var(--gray-light); display: flex; align-items: center;
                  justify-content: center; flex-shrink: 0; overflow: hidden; }
  .char-info    { flex: 1; min-width: 0; }
  .char-name    { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; }
  .char-name-vi { font-size: 16px; color: var(--purple); font-weight: 600; margin-top: 1px; }
  .char-detail  { font-size: 14px; color: var(--text-sub); margin-top: 3px; }
  .start-btn    { width: 100%; margin-top: 16px; padding: 17px;
                  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
                  color: var(--white); border: none;
                  border-radius: var(--radius); font-size: 19px; font-weight: 700;
                  cursor: pointer; transition: opacity .15s; letter-spacing: -0.2px; }
  .start-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .start-btn:not(:disabled):active { opacity: 0.88; }

  /* ── 채팅 화면 ── */
  #screen-chat { flex: 1; display: none; flex-direction: column; overflow: hidden; }
  .chat-messages { flex: 1; overflow-y: auto; padding: 12px 16px;
                   display: flex; flex-direction: column; gap: 10px; }

  /* 말풍선 */
  .msg-row { display: flex; gap: 8px; align-items: flex-end; }
  .msg-row.user { flex-direction: row-reverse; }
  .msg-avatar   { width: 32px; height: 32px; border-radius: 50%; background: var(--purple-light);
                  display: flex; align-items: center; justify-content: center;
                  font-size: 18px; flex-shrink: 0; overflow: hidden;
                  border: 1.5px solid var(--purple-light); }
  .bubble { max-width: 75%; border-radius: 20px; padding: 11px 15px; font-size: 18px;
             line-height: 1.55; word-break: break-word; }
  .bubble.char  { background: var(--white); border: 1px solid var(--gray-border);
                  border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm); }
  .bubble.user  { background: linear-gradient(135deg, #8B5CF6, #6D28D9);
                  color: var(--white); border-bottom-right-radius: 5px; }
  .bubble-hint  { font-size: 13px; color: var(--text-sub); margin-top: 4px;
                  padding: 0 4px; }

  /* 코칭 카드 */
  .coach-card { background: var(--white); border: 1.5px solid var(--purple);
                border-radius: var(--radius); padding: 14px; margin: 4px 0; }
  .coach-vi   { font-size: 20px; font-weight: 600; color: var(--purple); }
  .coach-pron { font-size: 16px; color: var(--text-sub); margin-top: 4px; }
  .coach-ko   { font-size: 16px; margin-top: 4px; }
  .coach-tip  { font-size: 14px; color: var(--green); margin-top: 8px;
                background: var(--green-light); border-radius: 8px; padding: 6px 10px; }
  .coach-speak-btn { width: 100%; margin-top: 10px; padding: 10px;
                     background: var(--purple); color: var(--white); border: none;
                     border-radius: 10px; font-size: 17px; font-weight: 600; cursor: pointer; }

  /* 타이핑 인디케이터 */
  .typing { display: flex; gap: 4px; padding: 12px 16px; align-items: center; }
  .typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray);
                animation: bounce .8s infinite; }
  .typing-dot:nth-child(2) { animation-delay: .15s; }
  .typing-dot:nth-child(3) { animation-delay: .3s; }
  @keyframes bounce { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }

  /* ── 입력 영역 ── */
  .input-area { background: var(--white); border-top: 1px solid var(--gray-border);
                padding: 10px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom));
                box-shadow: 0 -2px 12px rgba(0,0,0,0.05); }

  /* 연습 모드 입력 */
  .practice-input { display: flex; gap: 8px; align-items: flex-end; }
  .text-input { flex: 1; border: 1.5px solid var(--gray-border); border-radius: 24px;
                padding: 11px 16px; font-size: 18px; outline: none; resize: none;
                max-height: 100px; font-family: inherit; background: var(--gray-light); }
  .text-input:focus { border-color: var(--purple); background: var(--white); }
  .icon-btn { width: 44px; height: 44px; border-radius: 50%; border: none;
              cursor: pointer; display: flex; align-items: center; justify-content: center;
              font-size: 22px; flex-shrink: 0; transition: all .2s; }
  .mic-btn  { background: var(--purple-light); color: var(--purple); }
  .mic-btn.recording { background: #FEE2E2; color: #DC2626; animation: pulse 1s infinite; }
  .send-btn { background: linear-gradient(135deg, #8B5CF6, #6D28D9); color: var(--white); }
  .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

  /* 코칭 모드 입력 */
  .coach-input { display: flex; flex-direction: column; gap: 8px; }
  .coach-prompt { font-size: 16px; color: var(--text-sub); text-align: center; }
  .coach-row    { display: flex; gap: 8px; }
  .coach-text   { flex: 1; border: 1.5px solid var(--purple); border-radius: 22px;
                  padding: 10px 16px; font-size: 17px; outline: none; font-family: inherit; }
  .coach-mic    { width: 42px; height: 42px; border-radius: 50%; background: var(--purple);
                  color: var(--white); border: none; font-size: 22px; cursor: pointer;
                  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .coach-mic.recording { background: #DC2626; animation: pulse 1s infinite; }
  .coach-go     { padding: 10px 20px; background: var(--green); color: var(--white);
                  border: none; border-radius: 22px; font-size: 17px; font-weight: 700;
                  cursor: pointer; }

  /* 크레딧 배지 */
  .credit-badge { background: var(--purple-light); color: var(--purple);
                  border-radius: 20px; padding: 3px 10px; font-size: 14px; font-weight: 600; }


  /* ── 스트릭 / XP / 레벨 ── */
  .hv-dash { padding:14px 16px 0; display:flex; flex-direction:column; gap:10px; }
  .hv-dash-row { display:flex; gap:10px; }
  .hv-stat-card { flex:1; background:#fff; border-radius:16px; border:1px solid #EDE9FE;
                  padding:12px 14px; display:flex; align-items:center; gap:10px; cursor:pointer; }
  .hv-stat-icon { font-size:26px; flex-shrink:0; }
  .hv-stat-val  { font-size:24px; font-weight:800; color:#1E0A3C; line-height:1; }
  .hv-stat-lbl  { font-size:13px; color:#9CA3AF; margin-top:2px; }
  .hv-xp-bar-wrap { background:#EDE9FE; border-radius:20px; height:8px; overflow:hidden; }
  .hv-xp-bar      { height:100%; background:linear-gradient(90deg,#8B5CF6,#6D28D9);
                     border-radius:20px; transition:width 0.6s ease; }
  .hv-level-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .hv-level-name { font-size:16px; font-weight:700; color:#6D28D9; }
  .hv-level-next { font-size:13px; color:#9CA3AF; }
  .pron-chart-wrap { background:#F9FAFB; border-radius:14px; padding:16px 14px; }


  /* ── 오늘의 미션 ── */
  .mission-card { background:#fff; border-radius:16px; border:1px solid #EDE9FE; overflow:hidden; }
  .mission-header { padding:12px 14px 8px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #F3F4F6; }
  .mission-title { font-size:16px; font-weight:700; color:#4C1D95; flex:1; }
  .mission-xp-total { font-size:13px; color:#9CA3AF; }
  .mission-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:0.5px solid #F9FAFB; cursor:pointer; transition:background .15s; }
  .mission-item:last-child { border-bottom:none; }
  .mission-item:active { background:#FAF5FF; }
  .mission-item.done { opacity:0.55; }
  .mission-check { width:22px; height:22px; border-radius:50%; border:2px solid #D1D5DB; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; }
  .mission-check.done { background:#7C3AED; border-color:#7C3AED; }
  .mission-desc { flex:1; font-size:16px; color:#1E0A3C; }
  .mission-reward { font-size:13px; font-weight:700; color:#8B5CF6; background:#EDE9FE; padding:2px 8px; border-radius:20px; white-space:nowrap; }
  .mission-progress { height:4px; background:#F3F4F6; }
  .mission-progress-bar { height:100%; background:linear-gradient(90deg,#8B5CF6,#6D28D9); border-radius:4px; transition:width 0.4s; }


  /* ── 공유 카드 모달 ── */
  #share-modal-overlay {
    display:none; position:fixed; inset:0; z-index:800;
    background:rgba(0,0,0,0.6); align-items:center; justify-content:center;
    padding:20px;
  }
  #share-modal-overlay.open { display:flex; }
  #share-modal {
    background:#fff; border-radius:24px; width:100%; max-width:340px;
    overflow:hidden;
  }
  #share-canvas-wrap { background:linear-gradient(160deg,#1E0A3C,#4C1D95,#7C3AED); padding:24px; }
  .share-actions { padding:16px 20px 20px; display:flex; flex-direction:column; gap:10px; }
  .share-btn-primary { width:100%; padding:14px; background:linear-gradient(135deg,#8B5CF6,#6D28D9); color:#fff; border:none; border-radius:14px; font-size:18px; font-weight:700; cursor:pointer; }
  .share-btn-secondary { width:100%; padding:12px; background:#F4F0FF; color:#6D28D9; border:none; border-radius:14px; font-size:17px; font-weight:600; cursor:pointer; }


  /* ── SRS 플래시카드 화면 ── */
  #screen-srs {
    display:none; position:fixed; inset:0; z-index:300;
    background:#F4F0FF; flex-direction:column; overflow:hidden;
  }
  #screen-srs.open { display:flex; }
  .srs-header { background:#fff; border-bottom:1px solid #EDE9FE;
                padding:12px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .srs-progress-wrap { height:4px; background:#EDE9FE; flex-shrink:0; }
  .srs-progress-bar  { height:100%; background:linear-gradient(90deg,#8B5CF6,#6D28D9); transition:width .4s; }
  .srs-card-area { flex:1; display:flex; align-items:center; justify-content:center; padding:20px 16px; }
  .srs-card {
    width:100%; max-width:360px; min-height:220px;
    background:#fff; border-radius:24px; border:1.5px solid #EDE9FE;
    box-shadow:0 4px 20px rgba(109,40,217,0.1);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:28px 24px; cursor:pointer; transition:transform .15s;
    text-align:center; position:relative;
  }
  .srs-card:active { transform:scale(.97); }
  .srs-card-front-label { font-size:13px; font-weight:700; color:#C4B5FD; letter-spacing:1px; margin-bottom:16px; }
  .srs-card-ko   { font-size:26px; font-weight:800; color:#1E0A3C; line-height:1.4; margin-bottom:8px; }
  .srs-card-hint { font-size:16px; color:#C4B5FD; }
  .srs-card-vi   { font-size:29px; font-weight:800; color:#6D28D9; line-height:1.4; margin-bottom:8px; }
  .srs-card-pron { font-size:17px; color:#7C3AED; margin-bottom:6px; }
  .srs-card-ko-small { font-size:16px; color:#64748B; }
  .srs-btns { padding:16px; display:flex; gap:10px; flex-shrink:0; }
  .srs-btn { flex:1; padding:14px 8px; border:none; border-radius:16px; font-size:16px; font-weight:700; cursor:pointer; transition:all .15s; }
  .srs-btn:active { transform:scale(.96); }
  .srs-btn-hard   { background:#FEE2E2; color:#DC2626; }
  .srs-btn-normal { background:#EDE9FE; color:#6D28D9; }
  .srs-btn-easy   { background:#D1FAE5; color:#059669; }
  .srs-done { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; text-align:center; }


  .goal-btn { width:100%; padding:14px 16px; background:#F5F3FF; border:1.5px solid #EDE9FE;
              border-radius:14px; font-size:17px; font-weight:600; color:#1E0A3C;
              cursor:pointer; text-align:left; transition:all .15s; font-family:inherit; }
  .goal-btn:active { background:#EDE9FE; transform:scale(.98); }


  /* ── 시나리오 화면 ── */
  #screen-scenario { display:none; position:fixed; inset:0; z-index:200;
    background:#F4F0FF; flex-direction:column; overflow:hidden; }
  #screen-scenario.open { display:flex; }
  .sc-header { background:#fff; border-bottom:1px solid #EDE9FE; padding:12px 16px;
               display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .sc-tabs { display:flex; gap:0; overflow-x:auto; background:#fff; border-bottom:1px solid #F3F4F6;
             padding:0 12px; scrollbar-width:none; flex-shrink:0; }
  .sc-tab { padding:10px 14px; border:none; background:none; font-size:16px; font-weight:600;
            color:#9CA3AF; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;
            font-family:inherit; transition:all .15s; }
  .sc-tab.active { color:#7C3AED; border-bottom-color:#7C3AED; }
  .sc-list { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
  .sc-card { background:#fff; border-radius:18px; border:1px solid #EDE9FE; padding:16px;
             cursor:pointer; transition:all .15s; }
  .sc-card:active { transform:scale(.98); background:#FAF5FF; }
  .sc-card-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .sc-card-emoji { font-size:34px; flex-shrink:0; }
  .sc-card-title { font-size:18px; font-weight:700; color:#1E0A3C; }
  .sc-card-sub   { font-size:14px; color:#9CA3AF; margin-top:2px; }
  .sc-card-preview { font-size:14px; color:#7C3AED; background:#F5F3FF;
                     border-radius:8px; padding:8px 10px; line-height:1.5; }
  .sc-card-tags { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
  .sc-tag { font-size:12px; padding:2px 8px; border-radius:20px; font-weight:600;
            background:#EDE9FE; color:#6D28D9; }

  /* ── 시나리오 상세(스크립트/역할극) ── */
  #screen-scenario-detail { display:none; position:fixed; inset:0; z-index:210;
    background:#F4F0FF; flex-direction:column; overflow:hidden; }
  #screen-scenario-detail.open { display:flex; }
  .scd-header { background:#fff; border-bottom:1px solid #EDE9FE; padding:12px 16px;
                display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .scd-mode-tabs { display:flex; gap:0; background:#EDE9FE; border-radius:14px;
                   padding:3px; margin:12px 16px; flex-shrink:0; }
  .scd-mode-btn { flex:1; padding:9px; border:none; background:none; border-radius:11px;
                  font-size:16px; font-weight:700; color:#7C3AED; cursor:pointer;
                  transition:all .2s; font-family:inherit; }
  .scd-mode-btn.active { background:#fff; color:#4C1D95; box-shadow:0 1px 4px rgba(0,0,0,0.1); }
  .scd-body { flex:1; overflow-y:auto; padding:0 16px 24px; }

  /* 스크립트 뷰 */
  .script-line { display:flex; gap:10px; padding:10px 0; border-bottom:0.5px solid #F3F4F6; }
  .script-line:last-child { border-bottom:none; }
  .script-who { font-size:13px; font-weight:700; padding:3px 8px; border-radius:20px;
                white-space:nowrap; flex-shrink:0; height:fit-content; margin-top:2px; }
  .script-who.me   { background:#EDE9FE; color:#6D28D9; }
  .script-who.them { background:#D1FAE5; color:#065F46; }
  .script-text { flex:1; }
  .script-vi   { font-size:18px; font-weight:600; color:#1E0A3C; margin-bottom:3px; }
  .script-pron { font-size:14px; color:#7C3AED; margin-bottom:2px; }
  .script-ko   { font-size:14px; color:#9CA3AF; }
  .script-speak-btn { font-size:22px; background:none; border:none; cursor:pointer;
                      padding:2px; flex-shrink:0; }


  /* ── 문법 설명 ── */
  .grammar-tip {
    display:flex; align-items:flex-start; gap:8px;
    background:#F0FDF4; border:1px solid #BBF7D0;
    border-radius:12px; padding:9px 12px; margin-top:6px;
    font-size:14px; color:#065F46; line-height:1.55;
    animation: fadeIn 0.3s ease;
  }
  .grammar-tip-icon { font-size:17px; flex-shrink:0; margin-top:1px; }
  @keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

  /* 스크롤바 숨김 */
  .chat-messages::-webkit-scrollbar { display: none; }

  /* ── 페이월 화면 ── */
  #screen-paywall {
    position: fixed; inset: 0; z-index: 500;
    display: none; flex-direction: column;
    background: #F4F0FF; overflow: hidden;
  }
  #screen-paywall.open { display: flex; }
  .pw-hero {
    background: linear-gradient(160deg, #1E0A3C 0%, #4C1D95 55%, #6D28D9 100%);
    padding: 48px 24px 28px; text-align: center; position: relative; flex-shrink: 0;
  }
  .pw-close-btn {
    position: absolute; top: 14px; right: 16px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.18); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff;
  }
  .pw-crown { font-size: 50px; margin-bottom: 10px; display: block; }
  .pw-hero-title { font-size: 29px; font-weight: 800; color: #fff; letter-spacing: -0.5px; line-height: 1.3; margin-bottom: 8px; }
  .pw-hero-sub { font-size: 16px; color: #C4B5FD; line-height: 1.6; }
  .pw-body { flex: 1; overflow-y: auto; padding: 18px 16px 32px; display: flex; flex-direction: column; gap: 12px; }
  .pw-tab-row { display: flex; background: #EDE9FE; border-radius: 14px; padding: 3px; }
  .pw-tab-btn { flex: 1; padding: 9px; border: none; background: none; border-radius: 11px;
                font-size: 16px; font-weight: 700; color: #7C3AED; cursor: pointer; transition: all .2s; font-family: inherit; }
  .pw-tab-btn.active { background: #fff; color: #4C1D95; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
  .pw-plans { display: flex; flex-direction: column; gap: 10px; }
  .pw-plan {
    background: #fff; border: 2px solid #E5E7EB; border-radius: 18px;
    padding: 16px; cursor: pointer; transition: all .2s; position: relative;
  }
  .pw-plan:active { transform: scale(.985); }
  .pw-plan.selected { border-color: #7C3AED; background: #FAF5FF; box-shadow: 0 0 0 4px rgba(109,40,217,0.12); }
  .pw-plan-badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #8B5CF6, #6D28D9); color: #fff;
    font-size: 13px; font-weight: 700; padding: 4px 14px; border-radius: 20px;
    white-space: nowrap; letter-spacing: 0.3px;
  }
  .pw-plan-row { display: flex; align-items: center; justify-content: space-between; }
  .pw-plan-label { font-size: 18px; font-weight: 700; color: #1E0A3C; }
  .pw-plan-desc { font-size: 14px; color: #64748B; margin-top: 3px; }
  .pw-plan-amount { font-size: 24px; font-weight: 800; color: #6D28D9; letter-spacing: -0.5px; text-align: right; }
  .pw-plan-period { font-size: 14px; color: #9CA3AF; font-weight: 400; text-align: right; }
  .pw-plan-save { font-size: 13px; color: #059669; font-weight: 700; background: #D1FAE5; border-radius: 6px; padding: 2px 8px; margin-top: 6px; display: inline-block; }
  .pw-features { background: #fff; border-radius: 18px; border: 1px solid #EDE9FE; padding: 16px 18px; }
  .pw-feat-title { font-size: 16px; font-weight: 700; color: #4C1D95; margin-bottom: 12px; }
  .pw-feat-list { display: flex; flex-direction: column; gap: 10px; }
  .pw-feat-item { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #0F172A; }
  .pw-feat-icon { width: 22px; height: 22px; border-radius: 50%; background: #EDE9FE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
  .pw-feat-locked { color: #9CA3AF; }
  .pw-feat-locked .pw-feat-icon { background: #F3F4F6; }
  .pw-cta-btn {
    width: 100%; background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: #fff; border: none; border-radius: 16px; padding: 17px;
    font-size: 19px; font-weight: 800; cursor: pointer; letter-spacing: -0.2px;
    transition: opacity .15s; font-family: inherit;
  }
  .pw-cta-btn:active { opacity: 0.88; }
  .pw-restore { font-size: 14px; color: #9CA3AF; text-align: center; cursor: pointer; padding: 6px; background: none; border: none; width: 100%; font-family: inherit; }
  .pw-terms { font-size: 13px; color: #B9A8D4; text-align: center; line-height: 1.6; }
  .pw-terms a { color: #8B5CF6; text-decoration: none; }

  /* ── 결과 이모티콘 — 깔딱 튀고 멈춤 ── */
  @keyframes result-pop {
    0%   { transform: translateY(0)     scale(1); }
    35%  { transform: translateY(-22px) scale(1.25); }
    65%  { transform: translateY(-6px)  scale(1.07); }
    100% { transform: translateY(0)     scale(1); }
  }
  @keyframes confetti-fall {
    0%   { transform: translateY(0px)   rotate(0deg);   opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(340px) rotate(600deg); opacity: 0; }
  }

  /* ── 내 카드 모달 ── */
  .custom-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.55); z-index: 200;
    align-items: flex-end; justify-content: center;
  }
  .custom-modal-overlay.open { display: flex; }
  .custom-modal-sheet {
    background: #fff; border-radius: 24px 24px 0 0; width: 100%;
    max-height: 88vh; overflow-y: auto;
    padding: 24px 20px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .custom-modal-sheet input,
  .custom-modal-sheet textarea {
    width: 100%; border: 1.5px solid #E5E7EB; border-radius: 12px;
    padding: 12px 14px; font-size: 18px; font-family: inherit;
    outline: none; display: block; box-sizing: border-box;
  }
  .custom-modal-sheet input:focus,
  .custom-modal-sheet textarea:focus { border-color: #7C3AED; }

  /* ── 실전대화 화면 ── */
  #screen-realtalk { flex: 1; display: none; flex-direction: column; overflow: hidden; }
  .rt-header { background: #fff; border-bottom: 1px solid #E5E7EB; padding: 12px 16px;
               display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .rt-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 16px;
             display: flex; flex-direction: column; gap: 14px; }
  /* 내가 한 말 — 오른쪽 정렬, 보라 계열 */
  .rt-user-card { flex-shrink: 0; background: #F5F3FF; border: 1.5px solid #C4B5FD;
                  border-radius: 16px; border-bottom-right-radius: 4px;
                  overflow: hidden; margin-left: 48px; }
  .rt-cols { display: grid; grid-template-columns: 1fr 1fr; }
  .rt-col-ko { padding: 12px 14px; border-right: 1px solid #DDD6FE; }
  .rt-col-vi { padding: 12px 14px; background: #EDE9FE; }
  .rt-col-label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: #9CA3AF; margin-bottom: 5px; }
  .rt-col-text  { font-size: 18px; font-weight: 600; color: #111827; line-height: 1.5; }
  /* 상대방 말 — 왼쪽 정렬, 흰색 계열 */
  .rt-char-bubble { flex-shrink: 0; background: #fff; border: 1.5px solid #E5E7EB; border-radius: 18px;
                    border-bottom-left-radius: 4px; padding: 14px 16px;
                    margin-right: 48px; }
  .rt-bottom { background: #fff; border-top: 1px solid #E5E7EB;
               padding: 12px 16px; flex-shrink: 0;
               max-height: 50vh; overflow-y: auto; }
  .rt-mic-large { width: 110px; height: 110px; border-radius: 50%;
                  border: none; cursor: pointer; font-size: 48px;
                  transition: all .15s; display: flex; flex-direction: column;
                  align-items: center; justify-content: center; gap: 4px;
                  box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
  .rt-mic-large:active { transform: scale(.94); }
  .rt-mic-ko { background: #7C3AED; color: #fff; box-shadow: 0 6px 24px #7C3AED44; }
  .rt-mic-vi { background: #059669; color: #fff; box-shadow: 0 6px 24px #05966944; }
  .rt-mic-large.recording { animation: pulse 1s infinite; }
  .rt-mic-ko.recording { background: #DC2626; box-shadow: 0 6px 24px #DC262655; }
  .rt-mic-vi.recording { background: #DC2626; box-shadow: 0 6px 24px #DC262655; }
  .rt-mic-large:disabled { opacity: 0.4; cursor: not-allowed; }
  .rt-mic-label { font-size: 16px; font-weight: 700; margin-top: 2px; }
  .rt-coach-opt { width: 100%; text-align: left; padding: 11px 14px;
                  background: #F5F3FF; border: 1.5px solid #C4B5FD;
                  border-radius: 12px; cursor: pointer; font-size: 17px;
                  font-weight: 600; color: #5B21B6; transition: all .15s;
                  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .rt-coach-opt:active { transform: scale(.98); background: #EDE9FE; }

  /* ── 온보딩 화면 ── */
  #screen-onboarding {
    position: fixed; inset: 0; z-index: 999;
    background: #0F0A1E;
    display: flex; flex-direction: column;
    align-items: center; overflow: hidden;
    height: 100%; width: 100%;
  }
  .ob-logo { font-size: 43px; margin-top: 16px; margin-bottom: 2px; flex-shrink: 0; text-align: center; width: 100%; }
  .ob-title { font-size: 31px; font-weight: 700; color: #fff; margin-bottom: 4px; text-align: center; width: 100%; flex-shrink: 0; }
  .ob-sub { font-size: 13px; color: #8B7BA8; margin-bottom: 8px; letter-spacing: 1px; flex-shrink: 0; text-align: center; width: 100%; }
  .ob-slides { width: 100%; flex: 1; overflow: hidden; position: relative; min-height: 0; }
  .ob-slide { display: none; flex-direction: column; align-items: stretch; width: 100%; height: 100%; }
  .ob-slide.active { display: flex; }
  .ob-char-img { width: calc(100% - 32px); flex: 1; overflow: hidden; position: relative;
    animation: ob-bounce 0.4s ease; min-height: 200px;
    margin: 0 16px; border-radius: 20px; }
  .ob-char-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; }
  .ob-char-info { position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(15,10,30,0.97) 0%, rgba(15,10,30,0.6) 60%, transparent 100%);
    padding: 24px 20px 16px; }
  .ob-char-caption { display: none; }
  
  .ob-bottom { width: 100%; padding: 12px 24px 24px; background: #0F0A1E; flex-shrink: 0; box-sizing: border-box; }
  @keyframes ob-bounce {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
  }
  .ob-char-name { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 2px; }
  .ob-char-name-vi { font-size: 14px; color: #A78BCA; margin-bottom: 8px; letter-spacing: 0.5px; }
  .ob-speech { font-size: 16px; color: #E2D9F3; line-height: 1.6; margin-bottom: 0; }
  .ob-speech-ko { display: none; }
  .ob-dots { display: flex; gap: 8px; margin-bottom: 24px; }
  .ob-dot { width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.3); transition: all .3s; }
  .ob-dot.active { background: #C084FC; width: 20px; border-radius: 3px; }
  .ob-btn-next { width: 100%; padding: 15px;
    background: linear-gradient(135deg, #9333EA, #6D28D9); color: #fff; border: none;
    border-radius: 14px; font-size: 19px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.5px; }
  .ob-btn-next:active { transform: scale(.97); }
  .ob-skip { font-size: 14px; color: #5B4A6B; margin-top: 10px; text-align: center;
    cursor: pointer; display: block; }

  /* ── 로그인 화면 ── */
  #screen-login {
    position: fixed; inset: 0; z-index: 998;
    background: linear-gradient(160deg, #1E0A3C 0%, #3B0764 50%, #1E0A3C 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 32px 24px;
  }
  .login-logo { font-size: 67px; margin-bottom: 8px; }
  .login-title { font-size: 38px; font-weight: 800; color: #fff; letter-spacing: 1px; margin-bottom: 6px; }
  .login-sub { font-size: 17px; color: #A78BCA; margin-bottom: 48px; text-align: center; line-height: 1.6; }
  .login-btn { width: 100%; max-width: 320px; padding: 16px; border: none; border-radius: 16px;
               font-size: 18px; font-weight: 700; cursor: pointer; display: flex;
               align-items: center; justify-content: center; gap: 10px;
               margin-bottom: 12px; transition: opacity .15s; }
  .login-btn:active { opacity: 0.85; }
  .login-btn-google { background: #fff; color: #1F1F1F; }
  .login-btn-email  { background: linear-gradient(135deg, #8B5CF6, #6D28D9); color: #fff; }
  .login-divider { display: flex; align-items: center; gap: 12px;
                   width: 100%; max-width: 320px; margin: 4px 0 16px; }
  .login-divider span { font-size: 14px; color: #6B4F8A; white-space: nowrap; }
  .login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:#3B1F5E; }
  #login-email-form { width: 100%; max-width: 320px; display: none; }
  .login-input { width: 100%; padding: 14px 16px; border: 1.5px solid #4C1D95;
                 border-radius: 14px; font-size: 18px; outline: none;
                 background: rgba(255,255,255,0.08); color: #fff;
                 margin-bottom: 10px; font-family: inherit; box-sizing: border-box; }
  .login-input::placeholder { color: #7C5CA8; }
  .login-input:focus { border-color: #8B5CF6; }
  .login-toggle { font-size: 16px; color: #A78BCA; text-align: center; margin-top: 12px; cursor: pointer; position: relative; z-index: 10; }
  .login-toggle span { color: #C084FC; text-decoration: underline; }
  .login-error { font-size: 16px; color: #F87171; text-align: center; margin-top: 6px; min-height: 20px; }

  /* ── 설정 바텀시트 ── */
  #screen-settings-overlay {
    position: fixed; inset: 0; z-index: 997;
    background: rgba(0,0,0,0.5); display: none;
    align-items: flex-end; justify-content: center;
  }
  #screen-settings {
    background: #F4F0FF; width: 100%; max-width: 480px;
    border-radius: 24px 24px 0 0; max-height: 88vh;
    overflow-y: auto; padding-bottom: 24px;
    animation: slideUp 0.3s ease;
  }
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .settings-header { background: #F4F0FF; padding: 14px 16px 8px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1; }
  .settings-handle { width: 36px; height: 4px; background: #D1D5DB;
    border-radius: 2px; margin: 8px auto 0; }
  .settings-section { padding: 16px 16px 8px;
    font-size: 13px; font-weight: 700; color: #9CA3AF; letter-spacing: 0.5px; }
  .settings-item { background: #fff; margin: 0 12px 2px;
    border-radius: 14px; padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: opacity .15s; }
  .settings-item:active { opacity: 0.7; }
  .settings-icon { font-size: 24px; width: 36px; height: 36px;
    background: #F4F0FF; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .settings-label { flex: 1; font-size: 18px; font-weight: 500; color: #1F2937; }
  .settings-sub { font-size: 14px; color: #9CA3AF; margin-top: 2px; }
  .settings-arrow { font-size: 19px; color: #D1D5DB; }
  .settings-item.danger .settings-label { color: #EF4444; }
  .settings-item.danger .settings-icon { background: #FEF2F2; }
  .msg-vi { font-size: 18px; color: #1E0A3C; line-height: 1.5; }
  .msg-ko { font-size: 16px; color: #4B5563; margin-top: 5px; line-height: 1.4; padding-top: 5px; border-top: 1px solid rgba(0,0,0,0.06); }
  .msg-ko:empty { display: none; }

  /* ── 반응형: 태블릿·데스크톱 ──────────────────────────── */
  /* 카테고리 탭 — 마우스 환경에선 폭과 무관하게 줄바꿈으로 전부 표시 */
  @media (hover: hover) and (pointer: fine) {
    #emg-tabs, #cat-tabs, .sc-tabs {
      flex-wrap: wrap !important;
      overflow-x: visible !important;
      row-gap: 6px;
    }
  }
  /* 좁은 화면 — 긴급표현 헤더 우측 힌트 숨김 */
  @media (max-width: 560px) {
    .emg-hint { display: none !important; }
  }
  @media (min-width: 768px) {
    body { background: #E7E0F8; align-items: center; }
    /* 일반 흐름 화면 — 가운데 앱 컬럼 */
    .header, #screen-select, #screen-chat, #screen-phrases, #screen-realtalk {
      width: 100%; max-width: 640px;
    }
    #screen-select, #screen-chat, #screen-phrases, #screen-realtalk {
      background: #F4F0FF;
      box-shadow: 0 0 48px rgba(30,10,60,0.16);
    }
    /* 전체화면 오버레이 — 같은 폭으로 중앙 정렬 */
    #screen-emergency, #screen-pron-stats, #screen-history,
    #screen-srs, #screen-scenario, #screen-scenario-detail,
    #screen-paywall, #screen-onboarding, #screen-login {
      left: 50% !important; right: auto !important;
      width: 100% !important; max-width: 640px !important;
      transform: translateX(-50%);
      box-shadow: 0 0 48px rgba(30,10,60,0.22);
    }
    /* 바텀시트 — 태블릿에선 더 넓게 */
    #screen-settings { max-width: 560px; border-radius: 24px; margin-bottom: 24px; }
  }
  @media (min-width: 1100px) {
    .header, #screen-select, #screen-chat, #screen-phrases, #screen-realtalk { max-width: 720px; }
    #screen-emergency, #screen-pron-stats, #screen-history,
    #screen-srs, #screen-scenario, #screen-scenario-detail,
    #screen-paywall, #screen-onboarding, #screen-login { max-width: 720px !important; }
  }