/* ==========================================================================
   R/P : Talk Master — 공통 스타일 (common.css)
   --------------------------------------------------------------------------
   · 현재 서비스의 DOM 구조/클래스명을 그대로 유지한 채 디자인만 개선한 버전입니다.
   · 개선 포인트
     1) 명도대비 강화 : 본문 12:1 이상, 보조 텍스트 4.5:1 이상 (WCAG AA~AAA)
     2) 한쪽 면 컬러 라인(left-border) 장식 전면 제거 → 배경 틴트 + 얇은 전체 테두리
     3) 과한 그라데이션 카드 제거 → 절제된 틴트 + 아이콘 배지
     4) 터치 타깃 최소 44px, 키보드 포커스 링 전 요소 적용
     5) 모바일 우선 + 데스크톱 대응(콘텐츠 컬럼 고정, 넓은 화면에서 2단 리스트)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root {
  /* ── 배경 : GNB 그라데이션의 끝 색(라벤더-블루)과 이어지는 뉴트럴 ── */
  --bg-primary: #f9f9ff;        /* 페이지 배경 */
  --bg-secondary: #ffffff;      /* 카드/서피스 */
  --bg-subtle: #f7f6fc;         /* 서피스 위 한 단계 낮은 영역 */
  --bg-inset: #edecf7;          /* 입력/트랙 등 눌린 영역 */

  /* ── 텍스트 (괄호 = 흰 배경 대비 명도비) ── */
  --text-title: #16151f;        /* 17.5:1  제목 */
  --text-primary: #2c2b3a;      /* 13.7:1  본문 */
  --text-secondary: #57566b;    /*  7.0:1  보조 */
  --text-tertiary: #6c6b81;     /*  5.2:1  캡션(최소 기준) */
  --nav-inactive: #6f7285;      /*  4.8:1  하단탭 비활성 라벨 */
  --text-on-brand: #ffffff;

  /* ── 선 ── */
  --gray-divider: #eae9f3;
  --gray-border: #e3e2ef;
  --gray-border-strong: #cbc9dc;

  /* ── 브랜드 / 포인트 : GNB 로고의 바이올렛을 메인 액센트로 ── */
  --point-main: #16151f;
  --point-blue: #4457d6;        /* 흰 글자 대비 5.8:1 — 버튼 배경으로 안전 */
  --point-blue-strong: #3644b3;
  --point-blue-text: #3b4cc4;   /* 흰 배경 위 텍스트/링크용 7.0:1 */
  --blue-subtle: #ebedfd;
  --blue-ring: #c4cbf8;

  /* ── 시맨틱 ── */
  --point-green: #16755a;
  --green-subtle: #e4f2ed;
  --point-red: #b3261e;
  --red-subtle: #fdecea;
  --point-amber: #8a5a00;
  --amber-subtle: #fbf0dd;

  /* ── GNB 그라데이션 (참고 이미지) ── */
  --gh-gradient: linear-gradient(100deg,
      #fbeee2 0%, #f6ebef 26%, #e9e3f7 52%, #dde2f8 74%, #d8e9f6 100%);

  /* ── 브랜드 그라데이션 : 보라 → 파랑 (참고 이미지의 흐름)
     흰 글자 대비를 지키기 위해 세 정지점 모두 4.5:1 이상인 톤으로 잡았다
     (#7a5fd8 4.71 / #5b6ad9 4.66 / #3576bb 4.71) */
  --grad-brand: linear-gradient(105deg, #7a5fd8 0%, #5b6ad9 48%, #3576bb 100%);
  --grad-brand-hover: linear-gradient(105deg, #6d51cd 0%, #4f5ecf 48%, #2c69ab 100%);
  /* 같은 흐름을 채도만 한 단계 낮춘 버전 — 비활성이지만 회색처럼 죽어 보이지 않게
     (흰 아이콘 대비 3.1~3.6:1 · 그래픽 최소 기준 3:1 통과) */
  --grad-brand-muted: linear-gradient(105deg, #987ef3 0%, #6483e5 48%, #6797c6 100%);
  --grad-brand-shadow: 91, 106, 217;

  /* ── 형태 : 헤더의 부드러운 라운드에 맞춰 상향 ── */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ── 그림자 : 바이올렛 기 섞인 소프트 섀도 ── */
  --shadow-card: 0 1px 2px rgba(31, 54, 120, .06);
  --shadow-raised: 0 6px 20px rgba(31, 54, 120, .12);
  --shadow-sheet: 0 -10px 36px rgba(31, 54, 120, .18);

  /* ── 레이아웃 ── */
  --app-max: 560px;
  --gh-h: 60px;                 /* 공통 GNB 높이 */
  --header-h: 60px;             /* 페이지 헤더 높이 */
  --navbar-h: 92px;   /* 플로팅 탭바가 차지하는 세로 공간 */
  --gutter: 20px;
  /* 본문 상단 여백 (가이드)
     · 기본  : 제목·카드 등 '콘텐츠'가 먼저 오는 화면
     · tight : 탭 스트립처럼 헤더의 연장으로 읽히는 요소가 먼저 오는 화면
       (스크롤해서 탭이 헤더에 붙었을 때와 간격 차이가 크지 않도록 좁게 잡는다) */
  --content-top: 28px;
  --content-top-tight: 10px;

  /* ── 타이포 ── */
  --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
               "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
               system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. 리셋 / 기본
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { background: none; border: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   2-1. 인터랙션 (포커스 · 탭 · 눌림)
   --------------------------------------------------------------------------
   · 탭 하이라이트(모바일에서 요소 위에 깔리는 파란 사각형) 제거
   · 마우스/터치로 누를 때는 포커스 링을 그리지 않고, 키보드 이동일 때만 표시
     (기존에는 :focus-visible 에 border-radius:6px 가 걸려 있어 둥근 카드에도
      각진 파란 사각형이 씌워졌다 → 제거)
   · 눌림 피드백은 색이 아니라 미세한 축소로 준다
   -------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

:focus { outline: none; }

/* 키보드 포커스만 링 표시 — outline 은 요소의 border-radius 를 그대로 따라간다 */
:focus-visible {
  outline: 2px solid var(--point-blue);
  outline-offset: 3px;
}

button { -webkit-user-select: none; user-select: none; }

/* 공통 눌림 트랜지션 */
button, a { transition: transform .12s ease; }

/* 카드형 : 살짝 눌리는 정도 */
.btn:active,
.next-btn:active,
.submit-btn:active,
.scenario-card:active,
.mode-option:active,
.tip-card:active,
.quiz-card:active,
.shortcut-card:active,
.menu-card:active,
.option-btn:active,
.rank-item:active,
.filter-tabs button:active,
.tab-item:active,
.tab-btn:active,
.tab-group button:active { transform: scale(.985); }

/* 아이콘 버튼 : 더 또렷하게 */
.back-btn:active,
.close-btn:active,
.gnb-close:active,
.save-btn:active,
.logout-btn:active,
.finish-btn:active,
.action-btn:active,
.nav-btn:active,
.send-btn:active,
.voice-btn:active,
.history-toggle-btn:active,
.hint-toggle-btn:active,
.video-replay:active,
.source-toggle:active { transform: scale(.93); }

.gh-menu-btn:active span { transform: scaleX(.86); }
.app-navbar .nav-item:not(.fab):active { transform: scale(.94); }

/* 터치 기기 : 탭 후 hover 상태가 남지 않도록 이동 효과는 끈다 */
@media (hover: none) {
  .mode-option:hover .go { transform: none; }
  .app-navbar .nav-item.fab:hover .fab-icon { transform: none; }
  .shortcut-card:hover,
  .scenario-card:hover,
  .tip-card:hover { box-shadow: var(--shadow-card); }
}

/* --------------------------------------------------------------------------
   3. 레이아웃 셸
   -------------------------------------------------------------------------- */
.layout-default,
.layout-empty { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.container {
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

/* 본문 영역: 헤더/하단탭과 겹치지 않도록 여백 확보.
   상단 여백은 제목과 본문이 헤더에 붙어 보이지 않도록 넉넉히 준다. */
.contents {
  flex: 1;
  padding: var(--content-top) var(--gutter) calc(var(--navbar-h) + 32px);
}
/* 탭이 최상단인 화면 : 헤더와의 간격을 좁혀 한 덩어리로 읽히게 한다 */
.contents.tabs-top { padding-top: var(--content-top-tight); }
.contents.no-navbar { padding-bottom: 48px; }

/* 태블릿·PC : 콘텐츠 컬럼을 넓혀 여백만 남는 화면을 피한다.
   (목록 화면은 720px 이상에서 2단으로 전환되므로 폭이 넓어질수록 효율이 올라간다) */
@media (min-width: 768px) {
  :root { --app-max: 720px; }
  body { background: #e7e5f3; }
  .container {
    box-shadow: 0 0 0 1px var(--gray-border);
    background: var(--bg-primary);
  }
}
@media (min-width: 1280px) {
  :root { --app-max: 800px; }
}

/* --------------------------------------------------------------------------
   4-0. 공통 GNB (Global Header)
   --------------------------------------------------------------------------
   전 화면 공통. 좌측 = 로고 + 서비스명(RP), 우측 = 메뉴 버튼.
   -------------------------------------------------------------------------- */
.global-header {
  /* sticky 자체가 positioned 이므로 ::after 기준점 역할까지 겸한다.
     (position: relative 를 덧붙이면 sticky 가 덮어써져 스크롤 시 고정이 풀림) */
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  background: var(--gh-gradient);
  padding-top: env(safe-area-inset-top, 0);
}
.global-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 14px;
  background: linear-gradient(to bottom, rgba(228, 226, 245, .9), rgba(249, 249, 255, 0));
  pointer-events: none;
}
.gh-inner {
  height: var(--gh-h);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 로고 + 서비스명 */
/* 좌측 로고 = 항상 메인, 화면명 = 그 화면의 첫 페이지 (서로 다른 링크) */
.gh-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.gh-home {
  display: flex; align-items: center;
  min-height: 44px;
  padding: 0 5px; margin: 0 -5px;      /* 로고는 34px 이라 터치 영역을 44px 로 넓힌다 */
}
/* flex 컨테이너라 텍스트 사이 공백이 접히므로 gap 으로 간격을 준다 */
.gh-name { display: flex; align-items: center; gap: 5px; min-height: 44px; }
.gh-logo {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-size: 17px;
  box-shadow: 0 3px 10px rgba(var(--grad-brand-shadow), .34);
}
.gh-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-title);
  white-space: nowrap;
}
/* 현재 화면명을 브랜드 옆에 붙여 GNB 하나로 '어디에 있는지'까지 알린다.
   (별도 페이지 타이틀 줄을 두지 않아 첫 화면에서 콘텐츠가 더 많이 보인다) */
.gh-page { font-weight: 700; }

/* 햄버거 : 참고 이미지와 동일하게 짧은 2줄 + 라운드 처리 */
.gh-menu-btn {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  border-radius: var(--radius-md);
}
.gh-menu-btn span {
  display: block;
  width: 20px; height: 2.5px;
  border-radius: var(--radius-full);
  background: #8a8f99;
  transition: transform .22s ease, opacity .22s ease, background-color .15s ease;
}
.gh-menu-btn:hover span { background: var(--text-secondary); }
.gh-menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.gh-menu-btn[aria-expanded="true"] span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

/* 브레드크럼형 GNB : 'RP 실전 대화 > 자유 대화하기'
   상위 화면명은 링크로 두어, 뒤로가기 버튼 없이도 한 단계 위로 갈 수 있게 한다. */
.gh-trail { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.gh-trail .gh-brand { flex: 0 0 auto; }
.gh-crumb {
  min-width: 0;
  display: flex; align-items: center; gap: 2px;
  font-size: 15px; font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gh-crumb i { flex: 0 0 auto; font-size: 18px; color: var(--text-tertiary); }

/* 로그인 등 메뉴가 필요 없는 화면 */
.global-header.brand-only .gh-inner { justify-content: center; }

/* --------------------------------------------------------------------------
   4-0. 상세형 GNB (뒤로가기 + 화면명 + 액션)
   상세 화면에서 GNB 아래에 또 하나의 헤더 줄을 두면 상단이 무겁고
   콘텐츠 시작점이 아래로 밀리므로, 화면명과 액션을 GNB 한 줄로 합친다.
   -------------------------------------------------------------------------- */
.global-header.type-detail .gh-inner { gap: 6px; padding: 0 12px; }

.gh-back {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  color: var(--text-title);
  font-size: 26px;
}
.gh-back:hover { background: rgba(20, 23, 28, .06); }
.gh-back:active { transform: scale(.93); }

.gh-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gh-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* GNB 안에 들어가는 알약 버튼은 한 줄에 맞도록 조금 작게 */
.gh-actions .hint-toggle-btn,
.gh-actions .finish-btn,
.gh-actions .logout-btn {
  min-height: 34px;
  padding: 0 13px;
  font-size: 13px;
}
.gh-actions .gh-menu-btn { margin-left: 2px; }
.gh-actions .save-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  color: var(--text-title);
  font-size: 23px;
}
.gh-actions .save-btn:hover { background: rgba(20, 23, 28, .06); }
.gh-actions .save-btn[aria-pressed="true"] { color: var(--point-blue); }

/* --------------------------------------------------------------------------
   4-1. 전체 메뉴 드로어
   -------------------------------------------------------------------------- */
.gnb-drawer { position: fixed; inset: 0; z-index: 70; }
.gnb-drawer[hidden] { display: none; }
.gnb-overlay { position: absolute; inset: 0; background: rgba(30, 26, 62, .46); }
.gnb-panel {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: min(300px, 82vw);
  display: flex; flex-direction: column;
  background: var(--bg-secondary);
  box-shadow: -8px 0 32px rgba(38, 33, 78, .18);
  animation: gnb-in .22s ease;
}
@keyframes gnb-in { from { transform: translateX(16px); opacity: .4; } to { transform: none; opacity: 1; } }

.gnb-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--gh-h);
  padding: 0 12px 0 20px;
  padding-top: env(safe-area-inset-top, 0);
  border-bottom: 1px solid var(--gray-divider);
}
.gnb-panel-head .t { font-size: 16px; font-weight: 700; color: var(--text-title); }
.gnb-close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 22px;
}
.gnb-close:hover { background: var(--bg-inset); color: var(--text-primary); }

.gnb-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.gnb-list a {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  font-size: 16px; font-weight: 600;
  color: var(--text-primary);
}
.gnb-list a i { font-size: 20px; color: var(--text-tertiary); }
/* 하단 탭바와 같은 인라인 SVG 아이콘 */
.gnb-list a .nav-icon { flex: 0 0 22px; width: 22px; height: 22px; color: var(--text-tertiary); }
.gnb-list a:hover { background: var(--bg-subtle); }
.gnb-list a.active { color: var(--point-blue-text); background: var(--blue-subtle); }
.gnb-list a.active i,
.gnb-list a.active .nav-icon { color: var(--point-blue-text); }
.gnb-sep { height: 1px; margin: 8px 0; background: var(--gray-divider); }

/* 로그아웃 : 패널 맨 아래, 작고 낮은 대비로 */
.gnb-foot {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--gray-divider);
}
.gnb-logout {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
  font-size: 13px; font-weight: 500;
  color: var(--text-tertiary);
}
.gnb-logout i { font-size: 15px; color: var(--text-tertiary); }
.gnb-logout:hover { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   4-2. 페이지 헤더 (GNB 아래)
   -------------------------------------------------------------------------- */
.app-header {
  position: sticky;
  top: var(--gh-h);
  z-index: 30;
  background: var(--bg-primary);
  border-bottom: 1px solid transparent;
}
.app-header.is-scrolled { border-bottom-color: var(--gray-divider); }

.app-header .header-content {
  height: var(--header-h);
  padding: 4px var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.app-header .left,
.app-header .right { display: flex; align-items: center; gap: 8px; min-width: 0; }

.app-header .page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-title);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 상세형 헤더는 뒤로가기 + 제목 */
.app-header.type-detail .page-title { font-size: 18px; }

.back-btn {
  width: 44px; height: 44px;
  margin-left: -10px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  color: var(--text-title);
  font-size: 26px;
}
.back-btn:hover { background: rgba(20, 23, 28, .06); }

/* 알약형 버튼 — min-height 만으로는 글자가 위로 붙으므로 flex 로 중앙 정렬한다.
   (특히 <a> 로 쓰인 경우 block 이라 세로 중앙이 잡히지 않았다) */
.logout-btn,
.finish-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* 같은 이유로 중앙 정렬이 필요한 버튼들 (전 화면 공통 보정) */
.hint-toggle-btn,
.history-toggle-btn,
.tip-toggle,
.source-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tab-item,
.tab-btn,
.tab-group button,
.next-btn,
.submit-btn,
.filter-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.logout-btn {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--gray-border);
}
.logout-btn:hover { color: var(--text-primary); border-color: var(--gray-border-strong); }

.finish-btn { background: var(--point-red); color: #fff; }
.finish-btn:hover { background: #96201a; }

/* --------------------------------------------------------------------------
   5. 하단 탭바 — 플로팅 필(pill) + 센터 FAB
   --------------------------------------------------------------------------
   · 화면 하단에서 띄운 캡슐형. 가운데 '실전 대화'는 원형 FAB로 돌출.
   · 3열 그리드 + 아이콘 높이 24px 고정으로 라벨 베이스라인을 정확히 맞춤.
   -------------------------------------------------------------------------- */
.app-navbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  /* 메뉴가 3개뿐이라 본문 여백(--gutter)보다 한 단계 더 좁혀 잡는다.
     좁은 화면에서는 --gutter 여백까지만 줄어들도록 min() 으로 묶었다. */
  width: min(calc(100% - var(--gutter) * 2), 330px);
}

/* 하단 스크림 ─────────────────────────────────────────────────────────────
   플로팅 탭바는 화면 하단에서 20px 떠 있어, 스크롤 시 탭바 아래·좌우 틈으로
   본문이 그대로 비쳐 지저분해 보인다. 탭바 뒤에 화면 폭만큼의 레이어를 깔아
   본문이 하단으로 갈수록 흐려지며 배경색에 녹아들게 처리한다.
   · backdrop-filter : 뒤 콘텐츠를 흐리게
   · linear-gradient : 아래로 갈수록 페이지 배경색으로 덮음
   · mask-image      : 레이어 자체의 위쪽 경계를 부드럽게(선이 생기지 않도록)
   ------------------------------------------------------------------------ */
.app-navbar::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: var(--app-max);
  top: -34px;
  bottom: calc(-20px - env(safe-area-inset-bottom, 0px));
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--bg-primary) 26%,
    rgba(249, 249, 255, .74) 62%,
    rgba(249, 249, 255, 0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 48%, rgba(0, 0, 0, .55) 76%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0, #000 48%, rgba(0, 0, 0, .55) 76%, transparent 100%);
}

.app-navbar .navbar-content {
  position: relative;   /* 스크림 위로 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  padding: 10px 5px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, .8);
  /* 스크림 위에서도 캡슐이 확실히 떠 보이도록 그림자를 한 단계 강화 */
  box-shadow:
    0 12px 28px -6px rgba(31, 54, 120, .22),
    0 4px 10px -2px rgba(31, 54, 120, .10),
    0 1px 2px rgba(0, 0, 0, .06);
}

.app-navbar .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  color: var(--nav-inactive);
  font-weight: 500;
  transition: color .15s ease;
}
/* 아이콘 박스를 28px로 고정 → 3개 라벨이 같은 줄에 정확히 정렬됨
   (Remixicon 폰트 아이콘 · 시안에서 옮겨온 인라인 SVG 모두 동일 규격) */
.app-navbar .nav-item > i {
  display: block;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
}
.app-navbar .nav-item > .nav-icon {
  display: block;
  width: 28px;
  height: 28px;
}
.app-navbar .fab-icon .nav-icon { display: block; width: 31px; height: 31px; }
.app-navbar .nav-item .label { font-size: 13.5px; line-height: 1.25; white-space: nowrap; }
.app-navbar .nav-item:hover { color: var(--text-primary); }

.app-navbar .nav-item.active { color: var(--point-blue-text); }
.app-navbar .nav-item.active .label { font-weight: 700; }

/* 좌우 탭의 활성 표시 ──────────────────────────────────────────────────────
   FAB 이 원 + 글로우로 존재를 알리듯, 양옆 탭도 아이콘과 라벨을 한 덩어리로
   감싸는 알약 + 바깥으로 번지는 링을 갖는다. 셋 다 같은 언어를 쓰되,
   활성 탭은 언제나 하나뿐이라 화면이 시끄러워지지 않는다.
   · ::before 알약  — 진입할 때 한 번 톡 떠오른다
   · ::after  링    — 활성인 동안 천천히 바깥으로 번진다 */
.app-navbar .nav-item:not(.fab) { position: relative; }
.app-navbar .nav-item:not(.fab)::before,
.app-navbar .nav-item:not(.fab)::after {
  content: "";
  position: absolute;
  /* 가운데 FAB 과 같은 '원' 형태.
     아이콘 + 라벨 묶음의 정중앙에 놓이도록 top/left 를 50% 로 잡고
     반지름만큼 margin 으로 당긴다 (transform 은 팝 모션이 쓰므로 비워둔다) */
  top: 50%; left: 50%;
  width: 68px; height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  pointer-events: none;
}
.app-navbar .nav-item:not(.fab)::before {
  background: rgba(91, 106, 217, .1);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .26s cubic-bezier(.34, 1.4, .5, 1);
}
.app-navbar .nav-item:not(.fab).active::before {
  opacity: 1;
  transform: scale(1);
  animation: navPillPop .5s cubic-bezier(.34, 1.5, .5, 1);
}
/* 링은 알약 바깥으로만 번지므로 글자를 가리지 않는다 */
.app-navbar .nav-item:not(.fab).active::after {
  animation: navRipple 3s ease-out .45s infinite;
}
/* 아이콘·라벨이 알약 위로 오도록 */
.app-navbar .nav-item > i,
.app-navbar .nav-item > .nav-icon,
.app-navbar .nav-item .label { position: relative; z-index: 1; }

.app-navbar .nav-item:not(.fab).active .nav-icon,
.app-navbar .nav-item:not(.fab).active > i {
  animation: navIconRise .5s cubic-bezier(.34, 1.5, .5, 1);
}

@keyframes navPillPop {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes navIconRise {
  0%   { transform: translateY(3px) scale(.88); }
  60%  { transform: translateY(-1px) scale(1.04); }
  100% { transform: none; }
}
@keyframes navRipple {
  0%   { box-shadow: 0 0 0 0   rgba(91, 106, 217, .26); }
  70%  { box-shadow: 0 0 0 9px rgba(91, 106, 217, 0); }
  100% { box-shadow: 0 0 0 0   rgba(91, 106, 217, 0); }
}
/* 모션을 줄이도록 설정한 기기에서는 상태만 남기고 움직임은 뺀다 */
@media (prefers-reduced-motion: reduce) {
  .app-navbar .nav-item:not(.fab)::before { transition: none; }
  .app-navbar .nav-item:not(.fab).active::before,
  .app-navbar .nav-item:not(.fab).active::after,
  .app-navbar .nav-item:not(.fab).active .nav-icon,
  .app-navbar .nav-item:not(.fab).active > i,
  .app-navbar .nav-item.fab.active .fab-icon { animation: none; }
}

/* 센터 FAB
   · 60px 원형을 -44px 끌어올려 흐름상 24px만 차지 → 라벨 정렬 유지
   · 비활성도 같은 보라→파랑 흐름을 쓰되 채도를 낮춰 흐리게, 활성일 때 원색 + 글로우. */
.app-navbar .nav-item.fab .fab-icon {
  width: 60px;
  height: 60px;
  /* 흐름상 차지하는 높이(28px)는 그대로 두고 위·아래 margin 만 4px 씩 옮겨
     원을 살짝 아래로 내린다 → 라벨 세 개의 정렬은 유지된다. */
  margin: -36px 0 4px;   /* 원 60px - 36 + 아래 4 = 사이드 아이콘과 같은 28px 를 차지 */
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  /* 비활성 : --grad-brand 와 같은 색 순서를 채도만 낮춰 흐리게 쓴다.
     흰 아이콘 대비는 3.3~3.5:1 로 그래픽 최소 기준(3:1)을 넘긴다 */
  background: var(--grad-brand-muted);
  box-shadow: 0 10px 22px -6px rgba(110, 120, 175, .38);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), background .25s ease, box-shadow .2s ease;
}
/* 활성 : 브랜드 그라데이션 + 글로우 모션 */
.app-navbar .nav-item.fab.active .fab-icon {
  background: var(--grad-brand);
  box-shadow: 0 12px 24px -6px rgba(var(--grad-brand-shadow), .55), 0 0 0 0 rgba(var(--grad-brand-shadow), .35);
  animation: practiceGlow 2.8s ease-in-out infinite;
}
/* 주변으로 은은하게 번지는 글로우 (연습 유도 모션) */
@keyframes practiceGlow {
  0%, 100% { box-shadow: 0 12px 24px -6px rgba(91, 106, 217, .55), 0 0 0 0   rgba(91, 106, 217, .35); }
  50%      { box-shadow: 0 16px 30px -6px rgba(91, 106, 217, .60), 0 0 0 10px rgba(91, 106, 217, 0); }
}
.app-navbar .nav-item.fab:hover .fab-icon { transform: scale(1.05); }
.app-navbar .nav-item.fab:active .fab-icon { transform: scale(.95); }

/* FAB 라벨도 다른 탭과 동일한 활성/비활성 규칙을 따른다 */
.app-navbar .nav-item.fab .label { color: var(--nav-inactive); font-weight: 500; }
.app-navbar .nav-item.fab.active .label { color: var(--point-blue-text); font-weight: 700; }

/* --------------------------------------------------------------------------
   6. 공통 컴포넌트
   -------------------------------------------------------------------------- */

/* 6-1. 카드 : 라운드 + 얇은 전체 테두리 (한쪽 면 컬러 라인 금지) */
.card,
.surface {
  background: var(--bg-secondary);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* 6-2. 섹션 제목 */
.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-title);
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-title i { font-size: 18px; color: var(--text-secondary); }

/* 6-3. 배지 / 태그 */
.badge,
.p-tag,
.keyword,
.tag,
.category-badge,
.count-tag,
.date-tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.badge {
  padding: 4px 10px;
  background: var(--bg-inset);
  color: var(--text-secondary);
}
/* 대표 카테고리 태그 : 카테고리마다 색을 달리하면 카드마다 색이 튀어
   목록 전체가 산만해진다. 색은 '이게 대표 태그'라는 신호 하나만 담고,
   무엇인지는 텍스트 라벨이 말하도록 한 가지 색(앰버)으로 통일한다.
   (앰버 글자 5.25:1 — 배경 대비 AA 통과) */
.badge.category,
.badge.category.is-sales,
.badge.category.is-recruit { background: var(--amber-subtle); color: var(--point-amber); }

/* 6-3-1. 인사 : 화면을 열자마자 오늘 할 일을 한 줄로 (기초 학습·실전 대화 공통) */
.greeting { margin-bottom: 20px; }
.greeting .g-msg {
  font-size: 22px; font-weight: 800; line-height: 1.35;
  color: var(--text-title);
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.greeting .g-msg strong { color: var(--point-blue-text); font-weight: 800; }

/* 6-4. 필터 탭 : 텍스트만 남긴 언더라인 탭
   · 4개가 화면 폭을 정확히 4등분하도록 grid 로 깐다 (스크롤 없음)
   · 색은 검정(선택) / 회색(비선택) 두 가지만 쓴다 */
.filter-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 0;
  border-bottom: 1px solid var(--gray-divider);
}
.filter-tabs button {
  position: relative;
  min-height: 46px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-tertiary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.filter-tabs button:hover { color: var(--text-secondary); }
.filter-tabs button.active {
  color: var(--text-title);
  font-weight: 700;
}
/* 선택 표시 : 색·굵기에만 기대지 않도록 아래 짧은 선을 함께 둔다 */
.filter-tabs button.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-title);
}

/* 6-5. 버튼 */
.btn {
  min-height: 52px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--point-blue); color: #fff; }
.btn-primary:hover { background: var(--point-blue-strong); }
.btn-primary:disabled,
.btn-primary[disabled] {
  background: var(--bg-inset);
  color: var(--text-tertiary);
  cursor: not-allowed;
}
.btn-outline {
  background: var(--bg-secondary);
  border: 1px solid var(--gray-border-strong);
  color: var(--text-primary);
}
.btn-outline:hover { border-color: var(--text-secondary); }
.btn-block { display: flex; width: 100%; }

/* 6-6. 진행률 */
.progress-bar {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--bg-inset);
  overflow: hidden;
}
.progress-bar .fill,
.progress-bar .bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--point-blue);
}

/* 6-7. 빈 상태 */
.empty-state {
  padding: 72px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.empty-state i { font-size: 40px; color: var(--gray-border-strong); }
.empty-state p { color: var(--text-secondary); font-size: 15px; font-weight: 600; }

/* 6-8. 검색 */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-md);
}
.search-bar i { font-size: 20px; color: var(--text-tertiary); }
.search-bar input {
  flex: 1;
  border: 0;
  background: none;
  outline: none;
  font-size: 15px;
}
.search-bar input::placeholder { color: var(--text-tertiary); }
.search-bar:focus-within { border-color: var(--point-blue); box-shadow: 0 0 0 3px var(--blue-ring); }

/* 6-9. 바텀시트 */
.bottom-sheet-wrapper { position: fixed; inset: 0; z-index: 60; }
.bottom-sheet-wrapper[hidden] { display: none; }
.bottom-sheet-wrapper .bottom-sheet-overlay { animation: sheet-fade .2s ease; }
.bottom-sheet-wrapper .bottom-sheet-content { animation: sheet-up .26s cubic-bezier(.22,.9,.3,1); }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translate(-50%, 24px); opacity: .6; } to { transform: translate(-50%, 0); opacity: 1; } }
.bottom-sheet-overlay { position: absolute; inset: 0; background: rgba(30, 26, 62, .46); }
.bottom-sheet-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: var(--app-max);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-sheet);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-sheet-header { position: relative; padding: 14px var(--gutter) 8px; }
.drag-handle {
  width: 40px; height: 4px;
  margin: 0 auto 22px;   /* 제목이 시트 상단에 붙어 보이지 않도록 여유 */
  border-radius: var(--radius-full);
  background: var(--gray-border-strong);
}
.bottom-sheet-header .sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.sheet-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.4;
}
.close-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin: -6px -10px 0 0;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 24px;
}
.close-btn:hover { background: var(--bg-inset); color: var(--text-primary); }
.bottom-sheet-body { overflow-y: auto; padding: 0 var(--gutter) 20px; }

/* 6-10. 아코디언형 더보기 (출처·가이드는 기본 접힘) */
.tip-toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--point-blue-text);
  font-size: 14px;
  font-weight: 700;
}
.tip-toggle i { transition: transform .2s ease; }
.tip-toggle i.open { transform: rotate(180deg); }

/* 6-11. 본문 마크다운 */
.markdown-body { font-size: 15px; line-height: 1.7; color: var(--text-primary); }
.markdown-body p + p { margin-top: 10px; }
.markdown-body strong { font-weight: 700; color: var(--text-title); }
.markdown-body ul { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.markdown-body li { position: relative; padding-left: 14px; color: var(--text-secondary); }
.markdown-body li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gray-border-strong);
}

/* --------------------------------------------------------------------------
   7. 접근성 유틸
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}