/*
  [DEV:RESPONSIVE] PC 기본값에 대한 반응형 보정 (2026-08-28, 주석만 정리).
  components.css와 이 파일 모두 미디어쿼리가 있으므로 같은 선택자의 최종 적용값을 함께 확인한다.
  홈 로드 순서: foundation.css → components.css → responsive.css → promotion.css.
  [DEV:FONT] 푸터 제외 최소 14px / 홀수 px는 위 짝수 / 14px 문구 행간 22px. 반복 정책 주석을 통합.
  모바일 타이틀·본문의 후속 개별 요청값과 예외는 유지했다. 전체에 새 값을 일괄 덮어쓰지 않는다.
  미디어쿼리별 실제 백업 대비 차이와 현재 소스 위치: docs/STYLE_CHANGES.md
*/
/* 드롭다운 현재 항목 버튼 — 와이드(가로 네비)에서는 숨김 */
.page-navi__current { display: none; }

/* 햄버거 버튼·드로어 — 와이드에서는 숨김 (마크업은 각 HTML 에 정적으로 있음) */
.gnb__burger { display: none; }
.gnb-drawer { display: none; }

/* 가로 스크롤 힌트(←/→) — 스타일이 전부 ≤1024 블록 안에만 있어서, 이 기본 숨김이 없으면
   와이드에서 화살표 이미지가 스타일 없이 그대로 문서 흐름에 노출된다. ≤1024 에서 display:flex 로 켜짐. */
.hscroll-hint { display: none; }

/* ----------------------------------------------------------------------------
   공통 유틸 — 패드(≤1024)부터만 보이는 요소들
     .br-pad     : 그 지점에서만 줄바꿈되는 <br>
     .hero-cloud : KV 장식 구름
   -------------------------------------------------------------------------- */
.br-pad { display: none; }
/* 모바일에서도 줄바꿈을 유지할 <br> — 일괄 br 숨김 규칙의 예외 */
.br-keep { display: inline !important; }
/* 폰(≤480)에서만 줄을 나누는 <br> — 데스크톱 문구 흐름은 건드리지 않는다 */
.br-mo { display: none; }
/* 반대 — PC(≥769)에서만 줄을 나누는 <br>. 좁은 화면에서는 자동 줄바꿈에 맡긴다 */
.br-pc { display: inline; }
.hero-cloud { display: none; }          /* 패드 전용 구름 — 아래 미디어쿼리에서 노출 */

/* ----------------------------------------------------------------------------
   ~1240px : 페이지 네비 — 플로팅 필 → 헤더에 딱 붙는 드롭다운
   (1200 필 + 여백이 안 들어가는 지점부터)
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  /* ── 스크롤 성능 ────────────────────────────────────────────────────────
     position:fixed + backdrop-filter 조합은 스크롤 매 프레임마다 "요소 뒤의 배경"을
     다시 블러해야 해서, 모바일 GPU 에서 스크롤이 끈적하게 느껴지는 가장 큰 원인이다.
     여기 걸리는 고정 요소는 스크롤 헤더(.is-scrolled)와 페이지 네비(.page-navi) 둘.
     블러를 빼고 불투명도만 올려서 같은 톤을 유지한다. */
  .is-scrolled,
  .page-navi {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* 스크롤 헤더·페이지 네비 — 모바일은 반투명 말고 완전 불투명 흰색.
     뒤 콘텐츠가 비쳐 지저분해지지 않고, 블러 없이도 경계가 또렷하다. */
  .is-scrolled,
  .page-navi { background: #fff; }

  /* 축소된 GNB 높이 — 페이지 네비 top 과 한 값으로 묶어 항상 헤더 바로 아래 붙게 한다
     (≤768 에서 이 값만 다시 낮추면 네비도 따라 올라온다) */
  :root { --gnb-scrolled-h: 56px; }

  .page-navi {
    top: var(--gnb-scrolled-h);                /* 축소된 GNB 바로 아래 밀착 */
    background: #fff;                          /* 반투명 금지 — 위 .is-scrolled 와 같은 톤 */
    border-bottom: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
    transform: translateY(-8px);
  }
  /* 드롭다운 모드 — 안쪽 줄을 세로로 펼친다 (가운데 몰기 해제) */
  .page-navi__inner {
    max-width: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0;
    overflow: visible;
  }
  .page-navi.is-show { transform: none; }

  /* 현재 섹션 표시줄 — 클릭하면 목록이 아래로 펼쳐짐 */
  .page-navi__current {
    display: flex; align-items: center; justify-content: space-between;
    height: 56px;                              /* 48 → 56 : 손가락으로 누르기 편한 높이 */
    padding: 0 var(--container-pad);           /* 헤더(.gnb)와 동일한 좌우 여백 */
    font-family: var(--font-round); font-weight: var(--weight-bold);   /* GNB 링크와 동일 준위 */
    font-size: var(--font-label-3); line-height: var(--lh-label-3);
    color: var(--text-primary);                /* 드롭다운 모드에선 컬러 강조 없음 */
  }
  /* 화살표 — 헤더 햄버거와 세로선을 맞춘다.
     햄버거는 40px 박스라 중심이 오른쪽 끝에서 20(패딩)+20 = 40px 지점에 온다.
     이 아이콘은 20px 이라 그대로 두면 중심이 30px 이 되어 10px 어긋나므로 그만큼 밀어준다. */
  .page-navi__current img {
    width: 20px; height: 20px;
    margin-right: 10px;
    transition: transform .15s ease;
  }
  .page-navi.is-open .page-navi__current img { transform: rotate(180deg); }

  /* 탭 목록 — 접힘 기본, is-open일 때 세로로 펼침 */
  .page-navi__tab { display: none; }
    .page-navi.is-open .page-navi__tab {
    display: flex; align-items: center;
    height: 56px; padding: 0 var(--container-pad);   /* 표시줄과 같은 높이·여백으로 터치영역 확보 */
    border-radius: 0; text-align: left;
    border-top: 0;                                   /* 구분선 제거 — 여백만으로 나눈다 */
    /* 목록은 표시줄(현재 섹션)보다 한 단 아래 정보라 작게 + 색 위계도 낮춘다 */
    font-size: 14px; line-height: 22px;
    color: var(--text-tertiary);                     /* 비활성 = 3순위 톤 */
  }
  /* 활성 항목만 컬러로 올려 구분 */
  .page-navi.is-open .page-navi__tab.is-active { color: var(--color-sky-400); }
  /* 활성 도트 — 세로 목록에서는 텍스트 오른쪽에 */
  .page-navi__tab.is-active::after {
    position: static; transform: none;
    margin-left: var(--space-8);
  }
}


/* ============================================================================
   ≤1280 — 작은 모니터: 컬럼이 뷰포트에 딱 붙기 시작. 여백·정렬만 손봄
   ========================================================================== */
@media (max-width: 1280px) {
  .gnb__nav { margin-left: 40px; gap: var(--space-28); }

  /* [섹션 폭 20260819 반영] 상단 SVG와 같은 가용 폭을 쓰도록 중복 좌우 패딩을 제거한다. */
  .grow-cards { gap: var(--space-20); padding-inline: 0; }
  .grow-card { width: auto; flex: 1 1 0; min-width: 0; }

  /* 진단 다이어그램(400) + 페르소나 맵(740) 합이 1180 — 1280 이하에선 세로 적층.
     둘 다 디자인 px 캔버스지만 --dc-u / --pm-u 로 남는 폭에 딱 맞게 환산되므로
     넘치지 않는다 (zoom·transform 미사용 → 1px 테두리·점선이 그대로 살아있음). */
  .diagnosis { flex-direction: column; gap: var(--space-32); }
  .persona-col { align-self: center; }
  .diag-circle { align-self: center; }

  /* [Figma 20260817 반영] 독서 성향 박스 — 맵(740) + 안내패널(342) 합이 좁은 화면에서 세로 적층 */
  .persona-box { flex-direction: column; align-items: center; }
  .persona-box__note { width: 100%; max-width: 740px; padding-top: var(--space-40); }
  .persona-box__note::before { display: none; }
  /* [DEV:COMPARE] 진단 비교 카드의 글자·추천 띠·모바일 두 열 및 여백. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
  .krs-compare__col { max-width: none; }
}

/* ============================================================================
   ≤1024 — 패드 가로: 3열 카드 축소 · 다이어그램 세로 적층 · 타입 1단계 다운
   ========================================================================== */
@media (max-width: 1024px) {
  /* [레벨 모바일 Swiper 20260819 반영] 기존 overflow-x 스크롤을 제거하고 Swiper wrapper/slide 규격으로 전환한다. */
  .level-con-wrap {
    align-self: stretch; min-width: 0;
    overflow: visible; padding: 0; margin: 0;
  }
  /* 레벨 바와 카드가 같은 좌표로 움직이도록 한 장의 880px 슬라이드 안에 함께 둔다. */
  .level-con-slide {
    width: calc(880px + (var(--container-pad) * 2));
    padding-inline: var(--container-pad);
  }
  .level__stage-visual, .stage-cards { min-width: 880px; }

  /* 가로 스크롤 힌트 — 양쪽 페이드 + 작은 화살표.
     처음(.is-start)에는 좌측을, 끝(.is-end)에는 우측을 숨기고,
     스크롤/터치 중(.is-touching)에는 양쪽 다 잠시 감춘다 */
  /* 스크롤 영역을 화면 끝까지 넓혀 페이드·화살표가 가장자리에 붙게 (컨테이너 패딩 상쇄) */
  .level-scroll {
    position: relative;
    align-self: stretch;
    margin-inline: calc(var(--container-pad) * -1);
    margin-top: -7vw;
  }
  .level-scroll::before,
  .level-scroll::after {
    content: ''; position: absolute; top: 0; bottom: 0;
    width: 44px; pointer-events: none; z-index: 2;
    transition: opacity .2s ease;
  }
  .level-scroll::before { left: 0;  background: linear-gradient(90deg,  var(--bg-primary) 10%, rgba(255,255,255,0) 100%); }
  .level-scroll::after  { right: 0; background: linear-gradient(270deg, var(--bg-primary) 10%, rgba(255,255,255,0) 100%); }
  .hscroll-hint {
    position: absolute; top: 50%; transform: translateY(-50%);   /* 세로 위치는 --hint-top 으로 조절 */
    z-index: 3; pointer-events: auto; cursor: pointer;
    width: 28px; height: 28px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .10);
    transition: opacity .2s ease;
  }
  .hscroll-hint img { width: 15px; height: 15px; opacity: .55; }
  .hscroll-hint--next { right: 6px; animation: hscroll-next 1.4s ease-in-out infinite; }
  .hscroll-hint--prev { left: 6px;  animation: hscroll-prev 1.4s ease-in-out infinite; }
  @keyframes hscroll-next {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-50%) translateX(3px); }
  }
  @keyframes hscroll-prev {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-50%) translateX(-3px); }
  }
  /* 상태별 노출 */
  .level-scroll.is-end::after,
  .level-scroll.is-end .hscroll-hint--next,
  .level-scroll.is-start::before,
  .level-scroll.is-start .hscroll-hint--prev,
  .level-scroll.is-touching::before,
  .level-scroll.is-touching::after,
  .level-scroll.is-touching .hscroll-hint { opacity: 0; }
  /* [레벨 모바일 Swiper 20260819 반영] Swiper가 끝으로 판정한 방향의 버튼은 클릭도 막는다. */
  .level-scroll .hscroll-hint.swiper-button-disabled { opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) { .hscroll-hint { animation: none; } }

  /* ── 히어로 ──────────────────────────────────────────────────────────
     패드부터는 좌우 2단 → 세로 1단: 카피가 위, 영상이 아래.
     영상은 풀폭(16:9 = 56.25vw)으로 깔고 카피는 일반 흐름으로 올린다. */
  /* 영상 영역 높이 — 이 값 하나로 조절 (화면 폭 대비 비율).
     16:9 원본을 가로 175%로 확대해 쓰므로 0.5625보다 키워야 위아래가 덜 잘린다.
     완전히 안 잘리게 하려면 0.98 (= 0.5625 × 1.75) */
  .hero { --hero-video-h: 78vw; }
  .hero { min-height: 0; padding: 128px 0 var(--hero-video-h); }
  /* 콘페티 원점 — 패드·모바일은 영상이 화면 아래 블록으로 내려가므로,
     화면 중앙(58%)이 아니라 그 영상 블록 안 캐릭터 얼굴 높이에 맞춘다. */
  .kv-burst {
    left: 50%;
    top: auto;
    bottom: calc(var(--hero-video-h) * .58);
  }

  .hero__video {
    right: 0; left: 0; bottom: 0; top: auto;
    width: 100%; height: var(--hero-video-h);
    justify-content: center;
    background-position: center bottom;
    background-size: 175% auto;
  }
  .hero__video-el {
    width: 175%;                      /* 가로로 확대해 양옆을 잘라냄 — 캐릭터 크게 */
    max-width: none; flex: none;
    object-fit: cover;
    object-position: center 62%;      /* 아래(책 밑동)를 살리고 위쪽 하늘을 잘라냄 */
    /* 세로 배치에서는 위쪽(카피와 만나는 쪽)만 길게 페이드 */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
    margin:0;
  }
  /* 콘페티 — 모바일은 영상 추종을 버리고 크롭 없이 % 로만 배치한다.
     (PC 는 영상과 같은 cover 크롭으로 캐릭터를 따라가지만, 모바일은 영상이 175% 로
      확대·크롭돼 소용돌이가 화면 밖으로 밀린다. 여기서는 화면 기준으로 놓는 게 낫다.)
     손잡이는 셋뿐 — width(크기) · bottom(높이) · translateX(좌우).
     translateX 의 -66% = 중앙정렬 -50% + 소용돌이 보정 -16%
     (SVG 안에서 소용돌이 중심이 가로 66% 지점이라 그만큼 더 당겨야 화면 중앙에 온다) */
  .hero__confetti {
    width: 240%; max-width: none;
    height: auto;                     /* 비율 유지 — 크롭 없음 */
    bottom: -24%;                     /* width 를 키우면 그림도 같이 커지므로 세로만 되돌린다
                                         (규칙: width 를 +10%p 하면 bottom 을 약 -1.3%p) */
    margin: 0;
    transform: translateX(-66%);
  }
  /* KV 장식 별 — PC 전용 (좁은 화면에서는 영상이 175% 로 확대돼 별이 캐릭터와 겹친다) */
  .hero__stage--deco { display: none; }
  .hero__stage {
    /* 1920 캔버스를 화면 폭에 맞춰 축소 — JS(--stage-scale) 없이 CSS 만으로.
       transform:scale 이 아니라 캔버스 단위(--kv-u)를 줄이는 방식이라 레이아웃 크기도 같이 줄고,
       JS 가 써 넣은 값이 어긋나서 스테이지가 통째로 쭈그러드는 사고가 원천적으로 없다. */
    --kv-u: min(1px, calc(100vw / 1920));
    top: auto; bottom: 0; left: 0;
    transform: none;
  }
  .hero__copy {
    /* static 이면 z-index(20)가 무시돼서 딤(.hero::before, z-index:1)이 글자 위로 올라온다.
       relative 로 스택 순서만 살리되, base 의 top/left 오프셋은 반드시 함께 해제해야 한다.
       (static 일 땐 무시되던 left 가 relative 가 되는 순간 살아나 카피가 20px 밀린다) */
    position: relative; top: auto; left: auto;
    width: auto; max-width: none;
    padding-inline: var(--container-pad);
    transform: none;
    align-items: center; text-align: center;
    gap: var(--space-32);
  }
  .hero__actions { justify-content: center; flex-wrap: wrap; }

  /* 패드부터 보이는 유틸 */
  .br-pad { display: inline; }
  .hero-cloud--pc { display: none; }     /* PC 전용 구름은 숨김 */
  .hero-cloud {
    display: block; position: absolute; z-index: 3;
    pointer-events: none; user-select: none;
    mix-blend-mode: luminosity;   /* 명도 — PC 구름(.hero-cloud--pc)과 동일 처리 */
  }
  /* A — 영상 좌측 상단 경계에 반쯤 걸치게 (hero 기준) */
  .hero-cloud--a { 
    width: 42vw;
        left: -26vw;
        bottom: 57vw;
    animation: cloud-in 1s ease .85s both, cloud-bob 5.5s ease-in-out .85s infinite;
  }
  /* B — 아이브로우와 타이틀 사이 (카피 블록 기준) */
  .hero-cloud--b { 
    width: 24vw;
        right: -26vw;
        top: -8vw;
    animation: cloud-in 1s ease 1.05s both, cloud-bob 7s ease-in-out -2.2s infinite;   /* 시작 시점을 어긋내 따로 놀게 */
  }
  /* 둥둥 — 이동량은 화면 폭 비례(vw). 오르내리며 좌우로도 아주 살짝 흐른다 */
  @keyframes cloud-bob {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(0.8vw, -2.4vw); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-cloud { animation: none !important; }
  }

  /* GNB — 중앙 링크·계정은 햄버거(드로어) 안으로 넘기고, CTA 2개만 헤더에 남긴다.
     버튼·드로어는 HTML 에 정적으로 있고, 보이고 숨기는 건 전부 이 미디어쿼리가 담당한다.
     (≤768 에서는 CTA 를 아래 하단 고정 바로 다시 내보낸다) */
  .gnb__nav, .gnb__account { display: none; }
  /* space-between 이면 CTA 가 로고와 햄버거 사이 한가운데로 떠버린다.
     왼쪽 정렬 + margin-left:auto 로 CTA 를 햄버거 바로 왼쪽에 붙인다. */
  .gnb { justify-content: flex-start; }
  .gnb__right { margin-left: auto; gap: var(--space-8); }
  /* 헤더에 들어가는 축소판 CTA — 폭 고정(120) 해제하고 높이·글자도 한 단 내림 */
  .gnb__cta { display: flex; gap: 6px; }
  .gnb__cta .btn {
        width: auto; min-width: 0;
    height: 32px; padding-inline: 10px;
    font-size: 14px; line-height: 22px;
    border-radius: var(--radius-8);
  }
  .gnb__burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0;
  }
  .gnb__burger span {
    width: 20px; height: 2px; border-radius: 2px;
    background: var(--text-primary);
    transition: transform .2s ease, opacity .2s ease;
  }
  .gnb--on-hero .gnb__burger span { background: #fff; }
  .is-scrolled .gnb--on-hero .gnb__burger span { background: var(--text-primary); }
  .gnb__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .gnb__burger.is-open span:nth-child(2) { opacity: 0; }
  .gnb__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .gnb-drawer {
    /* flex — 계정 영역을 order 로 맨 위에 올리기 위해 (마크업은 nav → account → cta 순서) */
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; right: 0; z-index: 79;   /* 헤더(80) 바로 아래 */
    padding: 72px var(--container-pad) var(--space-24);   /* 헤더가 접히면 44px 까지 내려가므로 상단 여백도 축소 */
    background: #fff;                                    /* 반투명·블러 제거 — 뒤 콘텐츠가 비쳐 지저분했고 스크롤도 무거웠다 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
    transform: translateY(-102%);
    transition: transform .25s ease;
  }

  /* 메뉴가 열린 동안 — 뒤 배경을 덮는 스크림 + 본문 스크롤 잠금.
     스크림이 있어야 "지금은 메뉴가 주인공"이라는 게 읽히고, 바깥을 눌러 닫을 수 있다.
     별도 마크업 없이 body 가상요소로 만든다 (4개 페이지에 태그를 넣지 않아도 되도록). */
  body.drawer-open { overflow: hidden; }
  body.drawer-open::after {
    content: '';
    position: fixed; inset: 0; z-index: 78;             /* 드로어(79) 아래 · 하단 CTA 바(77) 위 */
    background: rgba(26, 26, 26, .42);
  }
  /* 하단 CTA 바 — 헤더(z-index:80)의 자손이라 z-index 를 낮춰도 스크림(78) 아래로 못 내려간다.
     반투명으로 물러나게 했더니 스크림 위에 유령처럼 비쳐서 오히려 깨져 보였다.
     메뉴가 열린 동안은 드로어가 유일한 조작 대상이므로 그냥 감춘다. */
  body.drawer-open .gnb__cta { display: none; }

  /* 히어로 위 흰 로고·햄버거는 흰 드로어와 겹치면 안 보인다 → 열려 있는 동안 다크 톤으로.
     filter:brightness(0) 은 로고를 납작한 순검정으로 뭉개므로, 어두운 로고 파일로 바꿔 끼운다. */
  body.drawer-open .gnb--on-hero .gnb__logo--light { display: none; }
  body.drawer-open .gnb--on-hero .gnb__logo--dark { display: block; }
  body.drawer-open .gnb--on-hero .gnb__burger span { background: var(--text-primary); }
  .gnb-drawer.is-open { transform: none; }
  .gnb-drawer__nav {
    display: flex; flex-direction: column;
    font-family: var(--font-round); font-weight: var(--weight-bold);
    font-size: var(--font-label-3); line-height: var(--lh-label-3);
    color: var(--text-primary);
  }
  .gnb-drawer__nav a { display: flex; align-items: center; height: 52px; }
  /* 로그인·회원가입(또는 로그인 후 유저 메뉴) — 드로어 안에서 노출 */
  /* 계정 영역 — 메뉴(미리 체험하기·고객지원) 아래, 구분선 밑에 놓는다.
     마크업 순서(nav → account → cta) 그대로 흐르게 두고 order 는 쓰지 않는다.
     로그인 전: 로그인 / 회원가입 두 버튼을 나란히, 로그인을 주 버튼으로
     로그인 후: 마이페이지 / 로그아웃 을 그대로 펼침 (아래 :has 규칙) */
  .gnb-drawer__account {
    display: flex; align-items: center; gap: var(--space-8);
    height: auto;
    padding-top: var(--space-20);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-gray-150);   /* 메뉴와 계정을 가르는 선 */
    border-bottom: 0;
    font-family: var(--font-round); font-weight: var(--weight-bold);
    font-size: var(--font-label-3); line-height: var(--lh-label-3);
    color: var(--text-secondary);
  }
  .gnb-drawer__account > span { display: none; }        /* 로그인 | 회원가입 사이 구분자 제거 */
  .gnb-drawer__account > [data-auth="login"],
  .gnb-drawer__account > [data-auth="signup"] {
        flex: 1;
    height: 46px;
    border-radius: var(--radius-10);
    font-weight: var(--weight-extrabold);
    font-size: 16px; line-height: 20px;
  }
  /* 로그인·회원가입 같은 준위 — 둘 다 .btn--outline 과 같은 형태(흰 바탕 + 얇은 테두리)로.
     둘 중 하나만 검게 채우면 드로어 맨 아래 상담신청/바로구매(주 CTA)와 위계가 겹친다. */
  .gnb-drawer__account > [data-auth="login"],
  .gnb-drawer__account > [data-auth="signup"] {
    background: var(--bg-primary); color: var(--text-primary);
    border: 1px solid var(--color-gray-300);
  }
  /* 로그인 상태의 드로어 계정 영역 — 사람 아이콘을 눌러 드롭다운을 여는 구조가 아니라
     마이페이지·로그아웃을 그대로 펼쳐 보여준다. 이미 햄버거를 눌러 연 화면이라
     같은 정보를 보려고 한 번 더 누르게 할 이유가 없다.
     (마크업은 renderAuth()가 PC 와 공용으로 찍으므로 여기서 CSS 로만 형태를 바꾼다) */
  .gnb-drawer__account:has(.gnb__user) { height: auto; display: block; }
  .gnb-drawer__account .gnb__user { position: static; width: 100%; }
  .gnb-drawer__account .gnb__userBtn { display: none; }        /* 아이콘 트리거 제거 */
  .gnb-drawer__account .gnb__userMenu,
  .gnb-drawer__account .gnb__userMenu[hidden] {                /* hidden 속성 무시하고 항상 노출 */
    display: flex;
    position: static;
    min-width: 0; padding: 0;
    background: none; border-radius: 0; box-shadow: none;
  }
  .gnb-drawer__account .gnb__userMenu button {
    height: 52px; padding: 0;
    border-radius: 0;
    color: var(--text-primary);
  }
  .gnb-drawer__cta { display: flex; gap: var(--space-12); margin-top: var(--space-16); }
  .gnb-drawer__cta .btn { flex: 1; width: auto; }

  /* 코어 쇼케이스 — 앱 목업(576 고정)을 유동폭으로, 텍스트는 아래로 */
  /* [DEV:SHOWCASE] 홈 메뉴 패드 이미지·롤링·오른쪽 실제 텍스트/내비게이션 정렬. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
  .core-showcase { flex-direction: column; gap: var(--space-32); }
  .core-showcase__app { width: 100%; max-width: 576px; padding-inline: var(--container-pad); }
  /* 안쪽 요소마다 따로 주지 말고 여기서 한 번에 (스와이퍼가 풀폭이라 좌우 여백 필요) */
  .core-showcase__text { width: 80%; margin-inline: auto; padding-inline: var(--container-pad); gap: var(--space-16); }
    .core-showcase__list { gap: var(--space-4); font-size: 14px; line-height: 22px; }
  .core-highlight { gap: var(--space-12); padding: var(--space-12) var(--space-12); }
  .core-highlight img { width: 24px; height: 24px; }
    .core-highlight span { font-size: 14px; line-height: 22px; }
  /* 좌우 화살표 — 세로로 쌓이는 구간에서는 앱 목업 중앙(JS 가 --core-nav-top 주입)에 맞추고,
     컨테이너 밖으로 나가지 않게 안쪽으로 붙인다 */
  .core-nav { width: 44px; height: 44px; }
  .core-nav img { width: 18px; height: 18px; }
  .core-nav--prev { left: 4px; }
  .core-nav--next { right: 4px; }

  /* K1~K12 바 — 12칸이라 이 폭부터 한 칸이 40px 대로 좁아진다.
     글자·여백을 같이 줄여야 'K12' 가 칸 안에 한 줄로 들어간다 */
  .level-bar { gap: var(--space-12); padding: 5px var(--space-12); }
  .level-bar__chip { font-size: 16px; line-height: 20px; padding: 8px var(--space-8); }

  /* 성장 리포트 — 코어 쇼케이스와 같은 위계로
     (캡션 '우리 아이의 ~' = 하이라이트 '읽을 수 있다는 ~' 과 동일 14px) */
  .report-audience { gap: var(--space-20); }
  .report-audience--child { margin-top: var(--space-28); }
  /* [DEV:REPORT-PARENT] 성장 리포트 공통 슬라이드. 부모/아이의 등장 감지는 HTML/JS에서 분리. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
  .report-slide { gap: var(--space-12); }
    .report-slide__caption {
    padding: var(--space-12) var(--space-16);
    font-size: 14px; line-height: 22px;
    border-radius: var(--radius-12);
  }
  .report-slide__caption small { font-size: 14px;  line-height: 22px; }
  /* [성장 리포트 캡션-이미지 간격 통일 20260824 반영] 모바일에서도 아이 영역 전용 80px 높이를 제거하고 부모 영역과 동일한 공통 캡션 규칙을 사용한다. */

  :root {
    --font-display-3: 36px; --lh-display-3: 48px;
    --font-display-2: 28px; --lh-display-2: 38px;
    --font-display-1: 26px; --lh-display-1: 36px;
  }
  .hero__title { font-size: 52px; }
  .sec-title, .page-title { font-size: 26px; }

  .section--pad { padding-block: var(--space-48); }
  .section__inner + .section__inner { margin-top: 80px; }
  .grow { padding-block: 80px; }

  /* 고민 카드 3장 — 고정 400px → 균등 유동폭 (기울기·겹침 해제) */
  /* [DEV:INTRO] 우려 카드의 메인 강조/서브 제목/본문/상세 인용은 별도 크기와 행간을 사용. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
  .concern-cards { gap: var(--space-12); }
  .concern-card { width: auto; flex: 1 1 0; min-width: 0; --rot: 0deg; }   /* 디자인 기울기만 해제(0deg) — GSAP 인라인 transform 은 살려둠 */
  .concern-card--lilac { margin-inline: 0; }

  /* [섹션 폭 20260819 반영] 소개 카드도 상단 SVG와 같은 좌우 기준선을 유지한 채 유동폭으로 축소 */
  .grow-cards { gap: var(--space-20); padding-inline: 0; }
  .grow-card { width: auto; flex: 1 1 0; min-width: 0; }

  /* 통계 — 간격만 축소 */
  .stat-row { gap: var(--space-32); flex-wrap: wrap; }
    .stat__cap { font-size: 14px; line-height: 22px; }

  /* 입체 진단 — 크기 계산은 components.css 의 --pm-u / --dc-u (cqw 기반)가 전담한다.
     컨테이너 폭에 자동으로 반응하므로 여기(그리고 ≤768·≤480)에 따로 쓸 게 없다. */

  /* 성장 카드 3열 → 줄바꿈 허용 */
  /* 줄바꿈 금지 — 3장이 2+1 로 접히면 위 화살표 위의 호랑이가 카드 태그를 따라
     엉뚱한 자리로 가서 화살표와 어긋난다 (호랑이 x 좌표 = 태그 중앙) */
  .growth-cards { flex-wrap: nowrap; gap: var(--space-24); }
  .growth-card { min-width: 0; }

  /* 관리 카드 2열 → 1열 */
  .manage-cards { flex-direction: column; }
  /* [전문 코칭 장점 카드 반응형 20260824 반영] 태블릿에서는 한 열로 내려 문구 좌측·장면 우측 구성을 유지한다. */
  /* [DEV:COACHING] 코칭 효과 4개 카드. 실제 이미지 비율·하단 기준 정렬·텍스트 간격을 유지. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
  .coaching-benefits { grid-template-columns: 1fr; gap: var(--space-20); }
  /* [코칭 장점 카드 높이 20260824 수정] 태블릿에서도 공통 최소 높이 180px을 유지한다. */
  .coaching-benefit { min-height: 180px; }

  /* CTA 배너 장식 축소 + 배너 안에서 클립 (페이지 가로 밀림 방지) */
  .cta-banner { overflow: hidden; }
  .cta-banner__chars { width: 320px; right: 0; }

  /* 프로모 배너 — 높이 고정 해제(내용 기준) · 장식은 비율만 축소 */
  .cta-banner.cta-banner--promo { height: auto; padding: var(--space-28) var(--space-40); }
  .cta-banner__art--graph  { right: 0;    top: -10px; width: 280px; }
  .cta-banner__art--report { right: -50px; top: -46px; width: 300px; }
  .cta-banner__art--pen    { left: 0;     top: -74px; width: 215px; }
  .cta-banner__glow--l { left: 90px; width: 200px; }

  /* 추천사 — 사진이 컨테이너 밖으로 빠져나가면 가로 스크롤이 생기므로 안으로 넣고 축소 */
  /* [DEV:RECOMM] 추천 메시지와 교수 프로필의 PC/모바일 배치 및 말풍선 연결. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
  .recomm__quote { padding: var(--space-40) var(--space-28); }
  .recomm__lead { font-size: 16px; line-height: 26px; }
  .recomm__point { font-size: 18px; line-height: 28px; }
  /* [반응형 수정: recomm__photo] 폭/여백을 여기서 고정값으로 한 번에 바꾸면 1024px 경계에서
     사진 크기가 뚝 끊겨 점프한다. components.css의 .recomm__photo / .recomm__body가 이제
     clamp()로 뷰포트 폭에 비례해 연속적으로 줄어들므로, 이 브레이크포인트 전용 고정값은
     제거(주석)하고 그 계산에 맡긴다.
  .recomm__photo { width: 320px; left: -24px; top: 40px; }
  .recomm__body { padding-left: 316px; }
  */
  .recomm__career { gap: var(--space-24); }
}

/* ============================================================================
   ≤768 — 패드 세로: 1열 적층 · 히어로 축소 · 타입 2단계 다운
   ========================================================================== */
@media (max-width: 768px) {
  body { overflow-x: clip; }   /* 모바일 안전망 — 단일 컬럼이라 부작용 없음 */
  /* [개발자 확인 20260826] 260825 요청서의 MO 문단 띄어쓰기를 데스크톱보다 넉넉한 16px로 적용한다. */
  .concern-intro-title__paragraph { margin-top: var(--space-16); }
  /* [개발자 확인 20260828] 모바일 고민 말풍선은 아이콘과 문구를 같은 인라인 흐름으로 가운데 정렬한다.
     기존 flex의 별도 아이콘 열을 없애 두 줄 문구에서도 캐릭터가 왼쪽 끝에 떨어지지 않도록 한다.
     PC·글자/아이콘 크기·슬라이드 전환은 유지하고, 여러 줄일 때 높이는 내용에 맞춘다. */
  .worry-swiper,
  .worry-swiper .swiper-slide { height: auto; }
  .worry-swiper .worry-chip {
    display: block;
    height: auto;
    min-height: 72px;
    align-content: center;
    text-align: center;
  }
  .worry-swiper .worry-chip__icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--space-8);
  }
  .worry-swiper .worry-chip > span { display: inline; }
  /* [개발자 확인 20260827] 손가락 강조 요소 삭제에 맞춰 모바일 전용 위치 보정도 함께 제거했다. */
  /* body 의 word-break:keep-all 은 한국어 가독성 때문에 유지하되, 여기서는 못 줄어드는 구절 때문에
     문서 최소 폭이 뷰포트보다 커지는 걸 막는다. overflow-wrap:anywhere 는 자리가 있을 땐 keep-all 을
     그대로 지키고 정 안 들어갈 때만 끊으며, break-word 와 달리 min-content 폭 계산에도 반영된다. */
  body { overflow-wrap: anywhere; }
  /* 좌우로 붙어 늘어나는 flex 줄들 — 좁아지면 줄바꿈 허용 */
  .footer__top, .footer__links, .footer__legal { flex-wrap: wrap; min-width: 0; }

  :root {
    --font-display-3: 30px; --lh-display-3: 40px;
    --font-display-2: 24px; --lh-display-2: 34px;
    --font-display-1: 22px; --lh-display-1: 32px;
    --font-title-6: 22px;   --lh-title-6: 30px;
    --font-body-5: 18px;    --lh-body-5: 28px;
  }
  .hero__title { font-size: 44px; }
    .hero__lead { font-size: 14px; line-height: 22px; margin-top: var(--space-20); }
  /* 아이브로우는 타이틀 위 보조 문구 — 아래 리드(14)보다 확실히 작게 둬서 위계를 잡는다 */
  .hero__eyebrow { font-size: 14px; line-height: 22px; }
  .sec-title, .page-title { font-size: 24px; }
  .grow-card__title { font-size: 16px; line-height: 24px; }
  .process-step__title { font-size: 18px; line-height: 24px; }

  /* GNB — 중앙 링크 간격 축소 · 로고도 한 단 축소 (헤더에 CTA 가 빠져 여백이 생김) */
  .gnb__nav { margin-left: var(--space-24); gap: var(--space-20); }
  .gnb__logo { height: 44px; }

  /* ── 스크롤하면 헤더를 더 납작하게 ────────────────────────────────────────
     하단에 CTA 바가 생겨 화면 위아래가 모두 눌리므로, 상단은 최대한 얇게 접어
     본문 볼 영역을 돌려준다. 60 → 48px (기본 대비 20% 축소).
     로고·햄버거도 같이 줄여야 헤더 안에서 비율이 유지된다. */
  :root { --gnb-scrolled-h: 48px; }
  .is-scrolled .gnb { height: var(--gnb-scrolled-h); }
  .is-scrolled .gnb__burger { width: 32px; height: 32px; gap: 4px; }
  .is-scrolled .gnb__burger span { width: 17px; }
  /* 햄버거 X 변형도 줄어든 간격(4px)에 맞춰 이동량 재계산 */
  .is-scrolled .gnb__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .is-scrolled .gnb__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ── CTA 를 헤더에서 화면 하단 고정 바로 ─────────────────────────────────
     핸드폰 한 손 조작에서 우상단은 엄지가 가장 안 닿는 자리다. 상담신청·바로구매는
     이 페이지의 핵심 전환 동선이라 항상 보이고 누르기 쉬운 하단에 둔다.
     마크업은 헤더의 .gnb__cta 를 그대로 재배치하는 방식이라 페이지마다 따로 넣을 게 없다.
     드로어에도 같은 CTA 클론이 있으므로 중복 노출을 막기 위해 그쪽은 숨긴다. */
  .gnb__cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 78;   /* 헤더(80)·드로어(79) 아래 */
    gap: var(--space-8);
    padding: 10px var(--container-pad) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
  }
  .gnb__cta .btn {
        flex: 1; width: auto; min-width: 0;
    height: 48px;                                  /* 권장 탭 타깃(44+) 확보 */
    padding-inline: var(--space-12);
    font-size: 16px; line-height: 20px;
    border-radius: var(--radius-10);
  }
  .gnb-drawer__cta { display: none; }
  /* 하단 바가 콘텐츠(푸터 등)를 가리지 않게 그만큼 아래 여백 확보 */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

  /* 맨 위로 — 모바일에서는 기본 숨김. 위로 올리는 동작을 할 때만 스윽 나타난다.
     (index.html 이 스크롤 방향을 보고 .is-up 을 붙였다 뗀다)
     하단 CTA 바에 가리지 않게 바 위쪽으로 띄운다. */
  /* [개발자 확인 20260828] 모바일 플로팅 두 버튼을 56px로 통일한다. PC 크기와 기존 중앙 정렬은 유지한다. */
  .fab-top {
    width: 56px; height: 56px; right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .fab-top img { width: 28px; height: 28px; }
  .fab-top.is-up { opacity: 1; visibility: visible; transform: none; }

  /* [KRS 이용권 구매 아이콘 SVG 교체 20260824 반영] PC와 동일한 전달 SVG를 버튼 크기에 맞춰 비례 축소한다.
     항상 떠있되, 자리는 맨 위로 버튼의 노출 여부를 따라간다:
     - 기본(맨 위로 숨김 상태) — 맨 위로 자리(하단 CTA 바로 위)를 그대로 차지
     - 맨 위로가 뜨면(.is-up, index.html이 토글) — 그 위로 12px 띄워 겹치지 않게 이동 */
  .fab-diag {
    width: 56px; height: 56px; right: 16px;
    padding: 0; background: transparent; border-radius: var(--radius-full);
    box-shadow: none;
    bottom: calc(80px + env(safe-area-inset-bottom));
    transition: bottom .2s ease;
  }
  /* [KRS 이용권 구매 모바일 아이콘-only 20260824] 모바일에서는 문구 포함 아트워크를 숨기고 아이콘 전용 SVG만 노출한다. */
  .fab-diag__art { width: 100%; height: 100%; }
  .fab-diag__art--desktop { display: none; }
  .fab-diag__art--mobile { display: block; }
  /* [개발자 확인 20260828] 맨 위로 버튼 56px + 간격 12px: 기본 하단 80px에서 148px로 이동한다. */
  .fab-diag.is-stacked { bottom: calc(148px + env(safe-area-inset-bottom)); }

  /* 히어로 — 스케일 규칙은 1024 구간 공통, 상단 여백만 축소 */
  .hero { padding-top: 116px; }

  .br-pc { display: none !important; }      /* PC 전용 줄바꿈 해제 */

  /* 게시판 상단 — 검색창이 300px 고정이라 폰에서 총 건수를 밀어냈다.
     검색은 한 줄을 다 쓰고, 총 건수는 그 위 오른쪽으로 올린다 */
  .board-top { flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-12); }
  .board-search { flex: 1 1 100%; max-width: none; }
  .input--search {
        width: 100%; max-width: none; height: 40px;
    padding-left: 36px; padding-right: 34px;
    font-size: 14px; border-radius: 10px;
    line-height: 22px;
  }
  .board-search__icon  { left: var(--space-12); width: 16px; height: 16px; }
  .board-search__clear { right: var(--space-8); width: 22px; height: 22px; }
  .board-search__clear img { width: 14px; height: 14px; }
  /* 총 건수는 공지·FAQ 모두 왼쪽. 공지는 [총 N건] … [분류 select] 한 줄 그대로,
     FAQ 는 검색이 한 줄을 다 쓰므로 총 건수만 그 위 왼쪽으로 올라간다 */
  .board-count { font-size: 14px; line-height: 22px; }
  .select--filter { width: 116px; height: 40px; font-size: 14px;  line-height: 22px; }

  /* 좌우 화살표 — 폰에서는 한 단 더 축소 */
  .core-nav { width: 34px; height: 34px; }
  .core-nav img { width: 14px; height: 14px; }
  .core-nav--prev { left: 2px; }
  .core-nav--next { right: 2px; }

  /* K1~K12 바 — 여기서는 여백을 거의 없애야 12칸이 버틴다 */
  .level-bar { gap: var(--space-8); padding: 4px var(--space-8); }
    .level-bar__chip { font-size: 14px; line-height: 22px; padding: 6px 2px; }

  /* ── 독서 성장 시스템 ────────────────────────────────────────────────
     곡선은 카드 뒤 배경으로 깔고, 카드는 [아이콘+태그 | 내용] 좌우 2단으로 */
  .growth { position: relative; }
  /* 예전에는 화살표를 카드 뒤 배경(absolute inset:0)으로 깔았는데,
     세로로 긴 카드 묶음 위에 5:1 짜리 가로 화살표를 늘리는 구조라
     화면 밖으로 삐져나가고 K1·K12 위치도 어긋났다.
     지금은 카드 위에 짧고 통통한 전용 화살표를 한 줄로 얹는다. */
  .growth__stage {
    position: relative; inset: auto; z-index: 0;
    height: auto; margin-bottom: var(--space-20);
  }
  /* ※ PC↔모바일 화살표 교체와 K1·K12 뱃지 좌표는 index.html 의 <style> 안에 있다.
     그 <style> 이 이 파일보다 뒤에 오므로, 같은 특이도면 여기 써봐야 덮이지 않는다. */
  .growth__stage::before, .growth__stage::after { display: none; }
  .growth__tiger { display: none; }          /* 아이콘은 카드 안으로 이동 */

  .growth-cards {
    position: relative; z-index: 1;
    flex-direction: column; gap: var(--space-28);
    width: 100%;
  }
  .growth-card {
    position: relative;
    flex-direction: row; align-items: center; gap: var(--space-16);
    width: 100%;
  }
  /* 단계 사이 화살표 — 아이콘+태그 열(폭 92) 중앙에 연한 블루로, 위아래로 살짝 움직임 */
  .growth-card:not(:last-child)::after {
    content: '';
    position: absolute; left: 46px; bottom: calc(var(--space-28) * -1);
    transform: translate(-50%, 50%);
    width: 20px; height: 20px;
    background: var(--color-sky-400); opacity: .38;
    -webkit-mask: url("/etc/krs/assets/icons/icon-arrow-down.svg") no-repeat center / contain;
    mask: url("/etc/krs/assets/icons/icon-arrow-down.svg") no-repeat center / contain;
    animation: growth-arrow 1.6s ease-in-out infinite;
  }
  @keyframes growth-arrow {
    0%, 100% { transform: translate(-50%, calc(50% - 3px)); }
    50%      { transform: translate(-50%, calc(50% + 3px)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .growth-card:not(:last-child)::after { animation: none; }
  }
  .growth-card__side {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
    flex: none; width: 92px;
  }
  .growth-card__icon { display: block; width: 68px; height: auto; }
    .growth-card__tag { height: 32px; padding-inline: var(--space-12); font-size: var(--font-body-2); line-height: 22px; }
  .growth-card__box { flex: 1; min-width: 0; align-items: flex-start; text-align: left; padding: var(--space-16) var(--space-20); }
  .growth-card__title { font-size: 16px; line-height: 1.4; }    /* 이해하며 읽기로 전환 등 */
    .growth-card__list  { font-size: 14px; line-height: 22px; }

  /* 카드류 전부 1열 */
  .concern-cards, .grow-cards, .growth-cards { flex-direction: column; align-items: center; }
  .concern-card, .grow-card { width: 95%; max-width: 480px; }
  /* [모바일 반응형 20260819 반영] grow 카드도 상단 SVG와 동일하게 콘텐츠 폭 100%를 사용한다. */
  .grow-card { width: 100%; }
  /* [통이미지 코드화 20260819 반영] PC와 동일한 HTML 카드를 모바일에서 아이콘→문구 순서의 1열로 재배치한다. */
  .grow-basis-code {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; margin-top: var(--space-40); gap: var(--space-12);
  }
  .grow-basis-code__card {
    width: 100%; height: auto; min-height: 0;
    flex-direction: column; align-items: center; gap: 0;
    padding: var(--space-24) var(--space-20);
    border-radius: var(--radius-20); text-align: center;
  }
  /* [원본 SVG 아이콘 반응형 20260819 반영] PC 고정 좌표용 여백을 제거하고 전달받은 원본 아이콘을 모바일 카드 중앙에 배치한다. */
  .grow-basis-code__card--traditional .grow-basis-code__icon,
  .grow-basis-code__card--tech .grow-basis-code__icon { align-self: auto; width: 72px; height: 72px; margin: 0; }
  .grow-basis-code__card--traditional .grow-basis-code__body,
  .grow-basis-code__card--tech .grow-basis-code__body { margin-left: 0; }
  .grow-basis-code__body { width: 100%; align-items: center; gap: var(--space-12); margin-top: var(--space-16); }
  /* [타이틀 폰트 통일 20260819 반영] 모바일에서도 `.grow-card__title`과 같은 Neo ExtraBold·16/24 규격을 유지한다. */
  .grow-basis-code__title { font-size: 16px; line-height: 24px; }
    .grow-basis-code__desc { font-size: 14px; line-height: 22px; }
  .grow-basis-code__plus {
    align-self: center;
    /* [플러스 표시 20260819 반영] PC와 같은 단순 + 기호를 방향/형태 변경 없이 사용한다. */
    width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
  }

  /* [STEP 완성형 SVG 전환 20260819 반영] PC와 동일한 전체 SVG 카드를 모바일에서 아래 방향으로 1열 적층한다. */
  /* [DEV:DIAG] 진단 단계 이미지·본문 한 카드 구성, 첫 카드 교차 페이드와 단계별 노출. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
  .diag3-code { display: flex; flex-direction: column; align-items: center; width: 100%; gap: var(--space-12); }
  /* [STEP 완성형 SVG 전환 20260819 반영] 모바일에서도 완성형 SVG가 카드 단위로 아래로 쌓이도록 기존 세로 플로우를 유지한다. */
  .diag3-code__card { width: 100%; max-width: 480px; }
  /* [STEP 하단 문구 복원 20260819 반영] 모바일의 단계 제목과 설명은 기존 모바일 글자 크기로 표시한다. */
  .diag3-code__title { font-size: 18px; }
    .diag3-code__desc { font-size: 14px; line-height: 22px; }
  .diag3-code__arrow {
    /* [모바일 화살표 원본 크기 복원 20260819 반영] PC와 같은 24×120 원본 크기를 사용하고 방향만 아래쪽으로 회전한다.
       회전 전 레이아웃 높이 때문에 생기는 과도한 공백은 상하 음수 여백으로 상쇄한다. */
    width: 24px; height: 120px; margin-block: -48px; transform: rotate(90deg);
  }
  .krs-compare { flex-direction: column; }
  .krs-compare-section { gap: var(--space-32); }
  .krs-compare__col, .krs-compare__col--wide { flex: none; max-width: 480px; width: 100%; gap: var(--space-12); }
  .krs-compare__card--generic { height: 288px; padding-top: 40px; }
  .krs-compare__icon { width: 120px; height: 128px; }
  .krs-compare__generic-desc { font-size: 22px; line-height: 32px; }
  .krs-compare__arrow {
    width: 200px;
    height: 200px;
    margin-block: -60px;
    transform: rotate(90deg);
  }
  /* [개발자 확인 20260827] 모바일 KRS 진단 카드 배치 변경
     민준이·서연이 카드를 세로 1단으로 쌓지 않고 2열로 나란히 유지한다.
     좁은 화면에서도 내용이 잘리지 않도록 카드 내부 사진·타이포·추천 바를 함께 축소한다. */
  .krs-compare__persons {
    --krs-person-photo-size: clamp(68px, 14vw, 88px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
  }
  .krs-compare__persons .krs-compare__card {
    min-width: 0;
    /* [개발자 확인 20260828] 모바일 2열은 유지하되 고정 높이·절대 배치를 해제한다.
       줄바꿈만큼 카드가 늘어나 상세 글과 추천 바가 겹치지 않으며 두 카드 높이는 동일하게 맞춘다. */
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    height: auto;
    padding-top: var(--space-24);
  }
  .krs-compare__persons .krs-compare__photo {
    position: static;
    transform: none;
    margin-inline: auto;
    width: var(--krs-person-photo-size);
    height: var(--krs-person-photo-size);
  }
  .krs-compare__persons .krs-compare__name {
        /* [개발자 확인 20260828] 사진 아래 8px, 이름 아래 16px의 자연스러운 흐름으로 배치한다. */
    position: static;
    margin: var(--space-8) 0 var(--space-16);
    padding-inline: var(--space-8);
    font-size: clamp(16px, 3.2vw, 20px);
    line-height: 1.35;
  }
  .krs-compare__persons .krs-compare__detail {
    /* [개발자 확인 20260828] 글 묶음 전체는 중앙, 항목·내용은 좌측 정렬한다.
       좌우 12px / 구분선 아래 16px / 추천 바 위 24px 여백을 확보하고 좁은 화면에서는 내용만 줄바꿈한다. */
    position: static;
    display: grid;
    grid-template-columns: max-content minmax(0, max-content);
    justify-content: center;
    align-content: start;
    margin-inline: var(--space-12);
    gap: var(--space-8);
    padding: var(--space-16) 0 var(--space-24);
    align-items: baseline;
    text-align: left;
  }
  .krs-compare__persons .krs-compare__detail div {
    /* 각 행을 같은 열에 정렬하여 레벨·취향·기질의 시작 위치를 통일한다. */
    display: contents;
  }
  .krs-compare__persons .krs-compare__detail dt {
        width: auto;
    font-size: clamp(14px, 2.4vw, 16px);
    line-height: 22px;
  }
  .krs-compare__persons .krs-compare__detail dd {
        flex: 0 1 auto;
    font-size: clamp(14px, 2.4vw, 16px);
    line-height: 22px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .krs-compare__persons .krs-compare__recommendation {
        /* [개발자 확인 20260828] 추천 바도 일반 흐름에 두고 상하 12px 여백으로 문구가 가장자리에 붙지 않게 한다. */
    position: static;
    min-height: 52px;
    height: auto;
    padding: var(--space-12) var(--space-8);
    gap: var(--space-4);
    font-size: clamp(14px, 2.4vw, 16px);
    line-height: 22px;
    text-align: center;
  }
  .krs-compare__persons .krs-compare__check {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
  }
  /* [배지-설명 간격 20260819 반영] 모바일도 배지 아래 32px 간격을 하단 패딩 32px과 맞추고 좌우 16px은 유지한다. */
  /* [DEV:LEVEL] 레벨 안내 박스·팝업 CTA 및 작은 화면 스와이프. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
  .level-box { padding: 60px var(--space-16) var(--space-32); } /* 배지 실제 높이를 포함하면 설명까지 정확히 32px */

  /* 프로세스 — 세로 타임라인: 왼쪽 아이콘 열 + 오른쪽 텍스트, 아이콘 사이를 선이 잇는다 */
  .process { flex-direction: column; gap: 0; }
  .process-step {
    flex: none; width: 100%;
    flex-direction: row; align-items: flex-start;
    gap: var(--space-16);
    padding: var(--space-12) 0;
    text-align: left;
  }
  .process-step__icon { flex: none; width: 52px; height: 52px; border-width: 3px; }
  .process-step__icon img { width: 30px; height: 30px; }
  .process-step__body {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--space-4); flex: 1; min-width: 0;
    padding-top: var(--space-4);
  }
  .process-step__no    { font-size: 14px; line-height: 22px; }
  .process-step__title { font-size: 16px; line-height: 22px; }
    .process-step__desc  { font-size: 14px; line-height: 22px; }
  .process-step__desc br { display: none; }

  /* 관리 서비스 구성도 — 모바일에서는 [왼쪽 이미지 | 오른쪽 문구] 흰색 카드로 전환 */
  /* [DEV:SERVICE] 서비스 구성 이미지의 공통 크기·모바일 순서 및 화살표. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
  .service-ecosystem {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    aspect-ratio: auto;
    width: calc(100% + (var(--container-pad) * 2));
    margin: var(--space-20) calc(var(--container-pad) * -1) 0;
    padding: var(--space-32) var(--container-pad);
    background: var(--bg-slate-primary);
  }
  .service-ecosystem__circle,
  .service-ecosystem__logo { display: none; }
  .service-ecosystem__item,
  .service-ecosystem__item--platform,
  .service-ecosystem__item--diagnosis,
  .service-ecosystem__item--coaching,
  .service-ecosystem__item--books {
    position: relative;
    inset: auto;
    transform: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-height: 116px;
    margin: 0;
    padding: var(--space-16);
    background: var(--bg-primary);
    border-radius: var(--radius-20);
    gap: var(--space-16);
  }
  /* [코어리딩북 배송 이미지 교체 20260820 반영] 새 SVG는 옆 서비스 이미지와 동일한 모바일 너비를 공유한다. */
  .service-ecosystem__item > img {
    flex: none;
    width: 120px;
  }
  .service-ecosystem__item > img {
    height: 76px;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: var(--radius-8);
  }
  .service-ecosystem__item figcaption {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
  }

  /* 연결선 — 아이콘 열 정중앙에 세로로. JS 가 top/height 를 계산해 채운다.
     아이콘 중앙 = .process-step 의 좌측 패딩 + 아이콘 폭의 절반.
     좌측 패딩은 index.html 인라인 <style> 의 `.process-step { padding: var(--space-16) }` 에서 오고
     (그 규칙이 CSS 링크보다 뒤라 여기 padding 선언을 덮는다), 예전엔 이 16px 을 빼먹어
     선이 아이콘보다 16px 왼쪽으로 밀려 있었다. 두 값을 변수로 묶어 같이 움직이게 한다. */
  .process { --step-pad-x: var(--space-16); --step-icon: 52px; }
  .process__line {
    display: block;
    top: auto; right: auto;
    left: calc(var(--step-pad-x) + var(--step-icon) / 2);
    width: 3px; height: auto;
    transform: translateX(-50%);
  }
  .process__line-fill { left: 0; right: 0; top: 0; bottom: auto; width: 100% !important; }

  /* 관리 카드 — 아이콘 위 세로 구성 · 텍스트와 버튼 모두 중앙 */
  .manage-card { flex-direction: column; align-items: center; text-align: center; }
  .manage-card__icon { width: 48px; height: 48px; }
  .manage-card__text { align-items: center; gap: var(--space-8); }
  .manage-card__text .btn { align-self: center; }
  .manage-card__title { font-size: 16px; line-height: 22px; }
    .manage-card__desc  { font-size: 14px; line-height: 22px; }

  /* [코칭 장점 카드 높이 모바일 20260824 수정] 가장 긴 카드의 y값을 기준으로 모든 Grid 행을 1fr로 맞춰 네 카드 높이를 동일하게 유지한다. */
  .coaching-benefits { grid-auto-rows: 1fr; align-items: stretch; }

  /* [전문 코칭 장점 카드 모바일 20260824 하단 정렬] 전달 PNG의 bottom을 0으로 유지해 모바일에서도 카드 하단 끝에 붙인다. */
  .coaching-benefit {
    /* [코칭 장점 카드 높이 20260824 수정] 모바일 최소 높이도 180px로 통일한다. */
    min-height: 180px; height: 100%;
    /* [코칭 장점 문구·이미지 간격 모바일 20260824 수정] 이미지 영역과 문구 사이 24px을 확보하고 남은 폭에서 자연스럽게 줄바꿈한다. */
    padding: var(--space-24) calc(43% + 24px) var(--space-24) var(--space-20);
    border-radius: var(--radius-20);
  }
  /* [개발자 확인 20260824] 모바일도 PC와 같은 네 카드 동일 높이 원칙을 유지하고 기존 상·하단 반응형 이미지 영역을 사용한다. */
  .coaching-benefit__art { width: calc(43% - 8px); height: auto; top: 10px; right: 10px; bottom: 0; background-size: 135% auto; background-position: center bottom; border-radius: var(--radius-16); }
  .coaching-benefit__heading { gap: var(--space-8); margin-bottom: var(--space-12); }
    .coaching-benefit__number { width: 24px; height: 24px; flex-basis: 24px; font-size: 14px; line-height: 22px; }
  .coaching-benefit h3 { font-size: 20px; line-height: 1.3; }
  /* [코칭 장점 본문 모바일 20260824 수정] 데스크톱과 동일한 secondary·bold 스타일과 24px 행간을 유지한다. */
    .coaching-benefit p { font-size: 14px; line-height: 22px; color: var(--text-secondary); font-weight: var(--weight-bold); }

  /* 리포트 탭 줄바꿈 */
  /* 탭 묶음 ↔ 아래 스와이퍼 사이 간격 (데스크톱 40 → 20) */
  .core-block { gap: var(--space-20); }
  /* 탭 — 줄바꿈 대신 가로 스크롤. 기본은 가운데 정렬이고, 폭이 모자라 넘칠 때만
     safe 키워드가 알아서 왼쪽부터 붙인다 (그냥 center 면 넘친 왼쪽이 스크롤로 안 잡힌다).
     360 미만에서는 파일 끝에서 명시적으로 왼쪽 정렬한다. */
  .tabs {
    flex-wrap: nowrap;
    justify-content: safe center;
    overflow-x: auto; scrollbar-width: none;
    align-self: stretch;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    gap: var(--space-4);
  }
  .tabs::-webkit-scrollbar { display: none; }
  /* [개발자 확인 20260828] 모바일 탭도 PC와 같은 16px로 변경. 기존 행간 22px과 높이·여백은 유지한다. */
  .tab {
    flex: none;
    height: 34px; padding-inline: var(--space-12);
    font-size: 16px; line-height: 22px;
  }

  /* CTA 박스 버튼(w200 고정) — 줄바꿈 허용 */
  .cta-box__actions { flex-wrap: wrap; gap: var(--space-12); }
  .cta-box { padding: var(--space-20) var(--space-20); gap: var(--space-12); }
  .cta-box__title { font-size: 18px; line-height: 1.45; }
  /* 버튼 공통 — 크기·폰트·화살표를 한 번에 통일 (풀폭 대신 적당한 고정폭) */
    .btn { height: 40px; font-size: 14px; line-height: 22px; }
  .btn__arrow { width: 18px; height: 18px; }
  .btn--w200, .btn--w220, .btn--w120 { width: auto; }
  .cta-box__actions { justify-content: center; }
  /* 본문 안 버튼 공용 크기 — 페이지가 달라도 같은 위계면 같은 크기여야 한다 */
  /* [DEV:TRIAL] 미리 체험하기 대표 카드. 모바일 이미지 폭/가운데 정렬/24px 패딩과 외곽 8px 라운드 확인. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
  .cta-box__actions .btn,
  .app-install__btn,
  .hero__actions .btn,
  .manage-card .btn,
  .entry-card__actions .btn{ margin-top: 12px;}
  .entry-card__actions .btn,
  .diag-circle__btn { width: 180px; height: 40px; min-width: 0; padding-inline: var(--space-12); font-size: 14px;  line-height: 22px; }
  .sec-eyebrow { font-size: 14px; line-height: 22px; height: 38px; padding-inline: var(--space-16); gap: var(--space-8); }
  .sec-eyebrow__icon { width: 26px; height: 26px; }
  .review-card__stars img { width: 16px; height: 16px; }
  /* 후기 카드 — 제목 15 · 본문 13 · 작성자 12 */
  .review-card__title  { font-size: 16px; line-height: 1.45; }
  .review-card__text   { font-size: 14px; line-height: 22px; }
  .review-card__author { font-size: 14px; line-height: 22px; }
  .review-card { gap: var(--space-16); box-shadow: none; }
  .review-card__body { gap: var(--space-12); }

  /* 후기 마퀴 — 네이티브 가로 스크롤(overflow-x:auto)을 쓰지 않는다.
     중첩 스크롤 컨테이너가 페이지 세로 스크롤과 충돌해 스크롤이 튀었고,
     CSS 애니메이션과 위치를 다퉈 끝에 빈 구간이 보였다.
     지금은 index.html 의 rAF 가 transform 만 움직이고 터치 드래그도 거기서 처리한다.
     touch-action: pan-y — 세로 제스처는 페이지에 그대로 넘긴다. */
  .reviews-marquee { touch-action: pan-y; }
  .cta-box__actions .btn__arrow { width: 20px; height: 20px; }

  /* 통계 3개 — 2열 랩 */
  .stat { width: 45%; }

  /* CTA 배너 — 높이·타이포 축소 */
  .cta-banner { height: 240px; border-radius: var(--radius-20); }
  .cta-banner__text { font-size: 22px; }

  /* 프로모 배너 — 버튼 줄바꿈 허용 · 장식은 양끝으로 더 빼고 축소 */
  .cta-banner.cta-banner--promo { height: auto; padding: var(--space-24) var(--space-20); }
  .cta-banner__title { font-size: 18px; line-height: 1.45; }
  .cta-banner__actions { flex-wrap: wrap; gap: var(--space-12); }
  .cta-banner__art { opacity: .55; }
  .cta-banner__art--graph  { right: -40px; top: 10px;  width: 200px; }
  .cta-banner__art--report { right: -70px; top: -20px; width: 210px; }
  .cta-banner__art--pen    { left: -46px;  top: -50px; width: 160px; }
  .cta-banner__glow--l { left: 20px; width: 150px; }
  /* [개발자 확인 20260827] 진단 안내 문구를 PC·모바일 공통 14px / 22px로 통일. */
  .cta-promo__note { font-size: 14px; line-height: 22px; }

  /* FAQ — 카테고리 칩을 질문 위로 (좁은 폭에서 80px 열이 낭비) */
  /* FAQ — [태그 / 질문] 왼쪽 정렬 세로 스택 + 토글 버튼은 오른쪽 고정 */
  .faq-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "cat  btn"
                         "q    btn";
    align-items: start;
    gap: var(--space-4) var(--space-12);
    padding: var(--space-14, 14px) var(--space-4);
  }
  .faq-item__cat {
        grid-area: cat; width: auto; text-align: left;
    font-size: 14px; line-height: 22px; color: var(--text-tertiary);
  }
    .faq-item__q {
    grid-area: q; flex: none; text-align: left;
    font-size: 14px; line-height: 22px; opacity: 1;
  }
  .faq-item__toggle { grid-area: btn; align-self: center; width: 16px; height: 16px; }
  .faq-answer {
        padding: var(--space-16); padding-left: var(--space-16);   /* 데스크톱의 120px 들여쓰기 해제 */
    font-size: 14px; line-height: 22px;
  }
  .faq__head { gap: var(--space-12); }
  .faq__title { font-size: 18px; }
  /* [전체보기] — 제목 옆 보조 액션이라 버튼 면 없이 작은 텍스트 + 바짝 붙인 화살표로 */
  .faq__head .btn {
        height: 32px; padding-inline: 0; gap: 2px;
    font-size: 14px; line-height: 22px;
    background: transparent;
  }
  .faq__head .btn__arrow { width: 16px; height: 16px; }

  /* 서브페이지 공통 — 상하 여백 축소 */
  .subpage { padding-block: 48px 80px; }

  /* 마이페이지 — 자녀 카드 패널/행 세로 적층 */
  .my-panel { min-width: 0; flex: 1 1 100%; }
  .my-panel + .my-panel { border-left: 0; border-top: 1px solid var(--bg-tertiary); }
  .my-panel--row { flex-direction: column; align-items: flex-start; }
  .my-row { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .my-row__label { width: auto; }
  .my-row__value { flex-wrap: wrap; }
  .my-card { padding: var(--space-20); }
  .my-card__head { flex-wrap: wrap; }

  /* 팝업 — 768 부터 형태가 바뀐다
       · 기본 / --wide (내용 많은 팝업) → 풀스크린
       · --sm          (안내·확인 등 내용 적은 팝업) → 바텀시트
     오버레이 패딩은 두 경우 모두 0 이고, 세로 정렬만 :has() 로 갈라준다. */
  .modal-overlay { padding: 0; }
  .modal {
    width: 100%; max-width: none;
    height: 100%; max-height: none;
    border-radius: 0;
  }
  /* 바텀시트 — 화면 하단에 붙고 위쪽만 라운드. 높이는 내용만큼(최대 88%) */
  .modal-overlay:has(.modal--sm) { align-items: flex-end; }
  .modal--sm {
    height: auto;
    max-height: 88vh;
    max-height: 88dvh;                 /* 주소창 접힘까지 반영 (미지원 브라우저는 위 vh 사용) */
    border-radius: var(--radius-24) var(--radius-24) 0 0;
  }
  /* 홈 인디케이터(제스처 바)에 버튼이 가리지 않게 */
  .modal--sm .modal__foot { padding-bottom: calc(var(--space-24) + env(safe-area-inset-bottom)); }

  /* --full — 데스크톱 크기는 그대로 두고(예: --sm 이면 480) 모바일에서만 풀스크린으로.
     로그인·인증처럼 단계가 이어지고 입력이 있는 팝업용:
       · 단계마다 내용 높이가 달라 바텀시트면 시트가 널뛴다
       · 키보드가 올라오면 시트 높이 안에서 입력칸이 가려진다
     --sm 규칙보다 뒤에 둬야 같은 특정도에서 이겨서 시트 설정을 되돌린다. */
  .modal-overlay:has(.modal--full) { align-items: stretch; }
  .modal--full {
    width: 100%; max-width: none;
    height: 100%; max-height: none;
    border-radius: 0;
  }
  .modal--full .modal__foot { padding-bottom: calc(var(--space-24) + env(safe-area-inset-bottom)); }

  /* --alert — 한두 줄 알리는 팝업(“앱은 출시 준비 중이에요” 같은 것).
     내용이 짧은데 바텀시트로 올라오면 화면 아래 절반이 비어 과한 연출이 된다.
     OS 기본 알림창처럼 폭을 좁혀 화면 정중앙에 띄운다.
     --sm/--full 규칙보다 뒤에 둬야 같은 특정도에서 이겨 시트/풀스크린 설정을 되돌린다. */
  .modal-overlay:has(.modal--alert) {
    align-items: center; justify-content: center;
    padding: var(--space-24);
  }
  .modal--alert {
    width: min(320px, 100%);
    max-width: none;
    height: auto;
    max-height: calc(100vh - 48px);
    border-radius: var(--radius-24);
  }
  .modal--alert .modal__head { min-height: 52px; padding: var(--space-12) 48px; }
  .modal--alert .modal__close { right: var(--space-8); width: 36px; height: 36px; }
  .modal--alert .modal__close img { width: 24px; height: 24px; }
  .modal--alert .modal__body { padding: var(--space-8) var(--space-20) var(--space-20); }
  .modal--alert .modal__question { font-size: 16px; line-height: 24px; text-align: center; }
  .modal--alert .modal__sub { font-size: 14px; line-height: 22px; text-align: center; }
  .modal--alert .modal__title { font-size: 16px; line-height: 22px; text-align: center; }
  /* 상단 없는 완료 안내(로그인/로그아웃 완료 등) — 더 가볍게 */
  .modal--alert.modal--nohead .modal__body { padding-top: var(--space-24); }
  .modal--alert .modal__foot {
    padding: 0 var(--space-20) var(--space-20);
  }
  .modal--alert .modal__foot .btn { width: 100%; height: 46px; font-size: 16px; }

  .modal__body { padding-inline: var(--space-24); }
  .modal__foot { padding-inline: var(--space-24); }
  .modal__foot .btn { min-width: 0; flex: 1; }
  /* head 좌우 패딩 = 닫기 버튼이 차지하는 폭과 정확히 일치시킨다 (right 16 + 버튼 40 = 56).
     예전엔 패딩 56 인데 close 가 right:24 라 8px 겹쳐 긴 타이틀을 침범했다. */
  .modal__head { padding-inline: 56px; min-height: 60px; }
  .modal__close { right: var(--space-16); }

  /* KRS 레벨 팝업 — 공용 모바일 팝업처럼 풀스크린, 본문만 한 열로 재배치 */
  .level-modal__body { gap: var(--space-32); padding: var(--space-16) var(--space-24) var(--space-32); }
  .level-modal__intro { gap: var(--space-24); }
  .level-modal__heading { gap: var(--space-12); }
  .level-modal__heading h3 { font-size: 24px; line-height: 36px; }
  .level-modal__heading > p { font-size: 16px; line-height: 26px; }
  .level-modal__heading > p br { display: none; }
  .level-modal__stats { flex-direction: column; align-items: stretch; gap: var(--space-24); padding: var(--space-16) 0; }
  .level-modal__stats::before,
  .level-modal__stats::after { display: none; }
  .level-modal__stat { flex-basis: auto; padding-bottom: var(--space-24); }
  .level-modal__stat + .level-modal__stat::before {
    content: ''; position: absolute; left: 10%; top: -12px;
    display: block; width: 80%; height: 1px; background: #dedede;
  }
  .level-modal__stat-value { font-size: 34px; line-height: 38px; }
  .level-modal__stat-value small { font-size: 26px; line-height: 38px; }
  .level-modal__stat p br { display: none; }
  .level-modal__table { font-size: 16px; line-height: 24px; }
  .level-modal__table th { padding: var(--space-12); }
  .level-modal__table td { padding: var(--space-16) var(--space-8); }
  .level-modal__cards { grid-template-columns: 1fr; gap: var(--space-24); }
  .level-modal__cards .dcard__top { height: 180px; }
  .level-modal__cards .dcard__body { min-height: 0; }

  /* 게시판(공지) — 번호·조회수 열 숨기고 제목 중심으로 */
  .notice-col-no, .notice-col-views, .notice-item__no, .notice-item__views { display: none; }
  .notice-col-cat, .notice-item__badge { width: 84px; }
  .notice-col-date, .notice-item__date { width: 92px; }
  .notice-item__title { padding-inline: var(--space-12); }
  .board-top { flex-wrap: wrap; gap: var(--space-12); }

  /* 체험 진입 카드 3장 — 가로 3열(flex, wrap 없음)이라 폰에서 한 자씩 끊겨 읽혔다. 세로 1열로. */
  .entry-cards { flex-direction: column; gap: var(--space-20); margin-top: 0; }

  /* [개발자 확인 20260828] 모바일 카드 제목 3종을 번호와 함께 한 줄로 중앙 정렬한다.
     번호·제목 열은 내용 너비(max-content)를 확보하고 양옆 여유 열만 줄인다.
     이미지·설명·버튼의 기존 세로 배치와 24px 패딩, PC 레이아웃은 유지한다. */
  .entry-card {
    display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "heading"
    "mock"
    "desc1"
    "desc2"
    "act";
    column-gap: 0;
    row-gap: var(--space-8);
    align-items: start;
    /* [개발자 확인 20260824] 모바일 카드 중앙 정렬 및 상하좌우 패딩을 모두 24px로 통일한다. */
    padding: var(--space-24);
    text-align: center;
    cursor: pointer;
  }
  /* [개발자 확인 20260828] 번호와 제목을 공통 래퍼 한 행에 배치하고 모바일 카드 중앙에 정렬한다. */
  .entry-card__heading {
    grid-area: heading;
    justify-self: center;
  }
  .entry-card__num {
    align-self: center;
    margin-right: 0;
    width: 20px; height: 20px; font-size: 14px;   /* [개발자 확인 20260827] 숫자도 최소 14px 적용; 원형 배지 크기와 중앙 정렬은 유지. */
    /* [개발자 확인 20260828] 제목의 최종 행간(32px)에 관계없이 배지를 세로 중앙에 맞춘다. */
    margin-top: 0;
    line-height: 22px;
  }
  .entry-card__title {
    white-space: nowrap; /* [개발자 확인 20260828] 코어 리딩북·교과 스키마북·AI 추천픽 제목의 중간 줄바꿈 방지. */
    margin-top: 0;
    padding-left: 0;
    font-size: 16px; line-height: 1.5;
  }
  .entry-card__mock {
    grid-area: mock;
    /* [개발자 확인 20260824] 모바일 미리 체험하기 이미지를 전달 기준인 280px로 확대한다. */
    width: 280px;
    max-width: 100%;
    margin: 12px auto;
  }
  .entry-card__desc:not(.entry-card__desc--strong) { grid-area: desc1; }
  .entry-card__desc--strong { grid-area: desc2; margin-top: -4px; }   /* 앞 문단과 한 덩어리로 */
  .entry-card__actions { grid-area: act; margin-top: 0; padding-top: 0; display: flex; justify-content: center; }
  .entry-card__desc  { margin-top: 0; font-size: 14px; line-height: 22px; text-align: center; }
  /* [상세보기] — 클래스(btn--tertiary/--icon-right/--w200)는 이미 메인 본문 버튼과 같다.
     폭만 여기서 100% 로 달랐어서, 아래 공용 규칙(200px)에 합류시켜 크기까지 통일한다. */

  /* 진단 뷰어 이력 패널 — 미리 체험하기 뷰어와 똑같이 상단 드롭다운으로.
     마크업이 .trial-menu 를 그대로 쓰므로 위 트라이얼 규칙 대부분이 그대로 먹고,
     여기서는 라이트 톤과 위치 기준만 잡아준다. */
  .diag-viewer__main { flex-direction: column; position: relative; }
  .diag-viewer__history {
    width: 100%; flex: none;
    padding: 0;
    overflow: visible;
    border-bottom: 1px solid var(--color-gray-300);
  }
  .diag-viewer__history .trial-menu__current { color: var(--text-primary); }
  .diag-viewer__history .trial-menu__current img { filter: none; }   /* 라이트 배경이라 화살표 반전 불필요 */
  /* 펼치면 본문 전체를 덮는다 — 배경은 흰색(라이트 변형) */
  /* .trial-menu.is-open (다크 배경) 보다 특정도를 높여야 라이트 톤이 유지된다 */
  .diag-viewer__history.trial-menu.is-open {
    position: absolute; inset: 0; z-index: 85;
    background: var(--bg-primary);
    padding: 0 0 var(--space-16);
    max-height: none; overflow-y: auto;
  }
  .diag-viewer__history .trial-menu__item--sub.is-active {
    background: var(--bg-slate-primary);
    color: var(--text-primary);
  }
  .diag-viewer__history .trial-menu__item--sub.is-active::before { background: var(--text-primary); }
  .diag-viewer__foot .btn { min-width: 0; width: 100%; }

  /* 후기 카드 폭 축소 */
  .review-card, .reviews-track .review-card { width: 340px; }

  /* 페르소나 맵 — 크기는 ≤1024 의 --pm-u 가 그대로 이어받아 폭에 맞게 줄어든다.
     인디케이터 라벨은 맵이 좁아지면 서로 겹치므로 이 구간부터 숨김. */
  .persona span { display: none; }

  /* CTA 배너 — 말풍선만 축소, 캐릭터는 유지 */
  .cta-banner__balloon { width: 220px; top: -28px; }
  .cta-banner__chars { width: 260px; right: -12px; }

  /* 앱 설치 — 세로 중앙 정렬 */
  .app-install__inner { flex-direction: column; text-align: center; gap: var(--space-8); }

  /* 푸터 — 좌우 2단 → 세로 */
  .footer__top { flex-direction: column; gap: var(--space-28); }
  .footer__right { flex-direction: column; gap: var(--space-24); }


  .dcards{
    flex-direction: column;
    gap: var(--space-20);
  }
  /* 카드 상단 — 높이를 크게 줄이고 안쪽 타이포도 축소 */
  .dcard__top { height: 120px; padding: var(--space-16) var(--space-20); gap: var(--space-4); }
  .dcard__eyebrow { font-size: 14px; line-height: 22px; }
  .dcard__en { font-size: 18px; line-height: 1.3; }
  .dcard__body { padding: var(--space-20); gap: var(--space-8); }
  .dcard__lead { font-size: 16px; line-height: 1.45; }
  .dcard__desc { font-size: 14px; line-height: 22px; }

  /* 말풍선 — worry-chip 과 동일 규격 (padding 12/20 · 15px/1.45 · min-height 56) */
  .level-callout {
        display: flex; align-items: center; justify-content: center; text-align: center;
    max-width: 100%; min-height: 56px;
    padding: 12px 20px;
    font-size: 16px; line-height: 1.45;
    margin-bottom: var(--space-12);
  }
  .level-callout::after { border-width: 9px; bottom: -9px; }
  /* 캐릭터 — 화면 폭 100% (레벨 바·카드만 가로 스크롤) */
  .level-chars {
    width: 100%; height: auto;
    margin: var(--space-8) 0 calc(var(--space-16) * -1);
  }
  .level-chars img { width: 100%; height: auto; max-width: 100%; }
    html {
    scrollbar-gutter: auto;
  }
  .core-highlight img{
    width: 20px;
    height: 20px;
  }
}

/* ============================================================================
   ≤480 — 핸드폰: 최소 타입 스케일 · 풀폭 버튼 · 장식 정리
   ========================================================================== */
@media (max-width: 480px) {
  :root {
    --font-display-3: 26px; --lh-display-3: 34px;
    --font-display-2: 22px; --lh-display-2: 30px;
    --font-display-1: 20px; --lh-display-1: 28px;
    --font-title-6: 20px;   --lh-title-6: 28px;
    --font-title-5: 20px;   --lh-title-5: 28px;
    --font-title-4: 18px;   --lh-title-4: 26px;
    --font-body-5: 16px;    --lh-body-5: 24px;
    --font-body-4: 16px;    --lh-body-4: 24px;
  }
  .hero__title { font-size: 32px; }
  .hero__lead { font-size: var(--font-body-3); line-height: 1.5; }
  .sec-title, .page-title { font-size: 18px; line-height: 1.6; }
  /* [강조 타이틀 행간 20260819 반영] 모바일 공통 제목 1.6보다 highlighted 제목의 요청값 1.7을 우선 적용한다. */
  .sec-title--highlighted { line-height: 1.7; }
  .sec-title__highlight {
    display: inline;
    height: auto;
    padding: 4px 10px;
    line-height: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .krs-compare-section .sec-title { line-height: 1.7; } /* 20260819: 동일 영역 강조 타이틀 행간 통일 */
  .krs-compare-section .sec-title__highlight {
    padding: 4px 10px;
    line-height: inherit;
  }
  /* 섹션 라벨 — 알약·아이콘 한 단계 더 축소 */
  .sec-eyebrow { font-size: 14px; height: 32px; padding-inline: var(--space-12); gap: var(--space-4);  line-height: 22px; }
  .sec-eyebrow__icon { width: 20px; height: 20px; }
  .stat__num { font-size: 26px; line-height: 32px; }
  .app-install__text { font-size: var(--font-body-4); }

  /* GNB — 높이만 축소 (링크·CTA는 1024부터 햄버거) */
  .gnb { height: 60px; }

  /* 히어로 — 더 컴팩트 */
  .hero { padding-top: 96px; }
  .hero__copy { gap: var(--space-24); }
  .hero__actions { width: 100%; flex-direction: column; align-items: center; }
  .hero__actions .btn { width: 200px; }
  .hero__eyebrow { font-size: 14px; line-height: 22px; }   /* 리드(16)보다 작게 유지 */

  /* 섹션 여백 최소화 */
  .section--pad { padding-block: var(--space-60); }
  .section__inner + .section__inner { margin-top: var(--space-60); }
  .grow { padding-block: var(--space-60); }

  /* 프로세스 — 1열 */
  .process-step { padding: var(--space-8) 0; }

  /* 페르소나 맵 — --pm-u 가 자동으로 0.45 근처까지 내려온다. 이 폭에선 네 모서리
     설명(칭찬받으며 차곡차곡 등)이 인디케이터와 겹쳐 읽히지 않으므로 숨김. */
  .persona-map__corner { display: none; }
  .persona-map__note { min-height: 36px; padding: 8px 10px; font-size: 14px;  line-height: 22px; }

  /* 후기 카드 — 화면 안에 들어오게 */
  .review-card, .reviews-track .review-card { width: 280px; padding: var(--space-20) var(--space-16);margin-right: 12px;}

  /* CTA 배너 — 장식 제거 */
  .cta-banner__balloon, .cta-banner__cloud { display: none; }
  .cta-banner__chars { width: 200px; right: -20px; }

  /* CTA 박스 버튼 — 세로 풀폭 (btn--w200 고정폭이 화면을 밀던 원인) */
  /* 세로로 쌓이는 CTA 묶음 — 간격 8 은 오탭이 나기 쉬워 12 로 벌리고,
     앱 설치 버튼 묶음(.app-install__actions)과 같은 값으로 통일한다. */
  .cta-box__actions { flex-direction: column; align-items: center; width: 100%; gap: var(--space-12); }
  .cta-box__title { font-size: 16px; margin-bottom: 12px; }
  .cta-box { padding: var(--space-24) var(--space-16); }

  /* 프로모 배너 — 버튼 세로 스택 · 장식은 모서리에만 살짝 (텍스트와 겹치지 않게 더 흐리게) */
  .cta-banner.cta-banner--promo { height: auto; padding: var(--space-24) var(--space-16); border-radius: var(--radius-20); }
  .cta-banner__title { font-size: 16px; }
  .cta-banner__inner { width: 100%; gap: var(--space-12); }
  .cta-banner__actions { flex-direction: column; align-items: center; width: 100%; }
  .cta-banner__actions .btn { width: 200px; }
  .cta-banner__art { opacity: .4; }
  .cta-banner__art--graph  {         right: -56px;
        bottom: -13px;
        width: 150px;
        top: unset;}
  .cta-banner__art--report { right: -66px; top: -6px;  width: 150px; }
  .cta-banner__art--pen    { left: -56px;  top: -34px; width: 120px; }
  .cta-banner__glow--l { display: none; }
  /* [개발자 확인 20260827] 진단 안내 문구를 PC·모바일 공통 14px / 22px로 통일. */
  .cta-promo__note { font-size: 14px; line-height: 22px; }

  /* 앱 설치 — 버튼 풀폭. gap 은 0 (버튼 자체 여백만으로 붙인다) */
  .app-install__actions { width: 100%; flex-direction: column; align-items: center; gap: 0; }
  .app-install__btn { width: 200px; }

  /* [개발자 확인 20260828] 작은 모바일의 42px 축소 규칙을 제거한다.
     두 플로팅 버튼 모두 ≤768px 공통의 56px 크기와 12px 사이 간격을 유지한다. */

  /* 페이지 네비 드롭다운 — 행 높이 소폭 축소 */
  .page-navi__current, .page-navi.is-open .page-navi__tab { height: 44px; }

  /* 통계 — 1열 · 항목 사이 간격 확보 */
  .stat-row { flex-direction: column; gap: var(--space-44); }
  .stat { width: 100%; gap: var(--space-12); }
    .stat__cap { font-size: 14px; line-height: 22px; }

  /* 고민 카드 내부 — 모바일 여백 축소 */
  .concern-card { padding: var(--space-32) var(--space-20) var(--space-20); gap: var(--space-20); }
  /* [고민 카드 모바일 아이콘 복원 20260819 반영] 60px 축소와 좌측 정렬을 해제하고 PC 원본 120px 크기로 카드 중앙에 배치한다. */
  .concern-card__icon {
    width: 120px; height: 120px;
    margin-inline: auto;
  }

  /* 소개 카드 아이콘 */
  .grow-card__icon { width: 60px; height: 60px; margin-top: 12px; }

  /* CTA 배너 — 더 낮게 */
  .cta-banner { height: 190px; }
  .cta-banner__text { font-size: 18px; }

  /* 성장 카드 박스 여백 */
  .growth-card__box { padding: var(--space-20); }

  /* 관리 카드 여백 */
  .manage-card { padding: var(--space-20); gap: var(--space-16); }

  /* 서브페이지 */
  .subpage { padding-block: 32px 60px; }

  /* 팝업 — 형태(풀스크린/바텀시트)는 ≤768 에서 이미 정해졌고, 여기선 내부 여백만 더 줄인다.
     오버레이 패딩·max-height 를 다시 주면 그 형태가 깨지므로 건드리지 않는다. */
  .modal__body { padding: var(--space-20) var(--space-16); }
  .modal__foot { padding: var(--space-12) var(--space-16) var(--space-16); }
  .modal__foot { flex-direction: column; }
  /* flex:0 0 auto 필수 — 768 블록의 `.modal__foot .btn { flex:1 }`이 남아 있으면
     세로 배치에서 flex-basis:0이 주축 크기가 되어 height:48px를 무시하고 눌린다 */
  .modal__foot .btn { flex: 0 0 auto; width: 100%; height: 48px; }
  .modal__actions { flex-direction: column-reverse; }   /* 주요 액션이 위로 */
  .modal--sm .modal__foot { padding-bottom: calc(var(--space-16) + env(safe-area-inset-bottom)); }
  /* head 패딩도 닫기 버튼 폭(right 12 + 40)에 맞춰 축소 */
  .modal__head { padding-inline: 52px; }
  .modal__close { right: var(--space-12); }

  /* 마이페이지 버튼 — 폭 고정 해제 */
  .btn--my,.btn--my-link{ min-width: 0; width: 100%; }
  .btn--my,.btn--my-link { width: auto; min-width: 120px; height: 40px;}
  /* 본문 안 버튼 — 폰에서는 높이를 40 으로 통일.
     헤더 CTA(32)·팝업 푸터(48)는 각자 규격이 따로 있으므로 제외한다. */
  .cta-box__actions .btn,
  .app-install__btn,
  .hero__actions .btn,
  .manage-card .btn,
  .entry-card__actions .btn,
  .diag-circle__btn,
  .btn--my { height: 40px; }

  /* 링크형 보조 액션 중 폭까지 글자에 맞춰야 하는 것(회원탈퇴).
     위 .btn--my-link 규칙이 min-width 120 을 걸어 밑줄이 글자보다 길게 늘어나므로 해제하고,
     좌우 패딩도 없애 밑줄이 딱 글자 길이만 되게 한다. (위아래 패딩=탭 영역은 유지) */
  .btn--my-link-s {
    width: fit-content;
    min-width: 0;
    padding-inline: 0;
  }

  /* 구독/결제 팝업 행 — 라벨·값 세로 */
  .sub-row { flex-direction: column; align-items: flex-start; gap: var(--space-4); min-height: 0; }
  .sub-row--link { flex-direction: row; align-items: center; justify-content: space-between; }
  .sub-plan { flex-direction: column; align-items: flex-start; gap: var(--space-12); }
  .sub-plan__right { text-align: left; }

  /* 게시판 — 카테고리도 숨기고 제목 + 날짜만 */
  .notice-col-cat, .notice-item__badge { display: none; }
  .notice-col-date, .notice-item__date { width: 76px; font-size: var(--font-body-1);  line-height: 22px; }
  .notice-item { min-height: 56px; }

  /* 앱 설치 문구 줄간격 */
  .app-install__inner { padding-block: var(--space-28); }

  /* 아래쪽 섹션 폰트 — 값은 이 블록 뒤쪽(838~) 한 곳으로 모았다 (같은 구간 중복 선언 제거) */
  .stage-card__desc    { font-size: 14px; line-height: 22px; }
  .stage-card__body    { padding: var(--space-12); gap: var(--space-8); }
  .grow-card__title    { font-size: 16px; line-height: 24px; }
  .core-showcase__title{ font-size: 16px; line-height: 1.4; }
  /* 코어 쇼케이스 — 폰에서는 슬라이드가 이미 컨테이너 패딩 안에 들어와 있어
     여기서 좌우 패딩을 또 주면 이중으로 들어가 폭이 과하게 좁아진다. 해제. */
  .core-showcase__app,
  .core-showcase__text { padding-inline: 8px; width:100%;}
  .my-profile__name, .my-plan__name, .trial-head__title { font-size: 18px; }
  .auth-welcome        { font-size: 18px; }
  .auth-welcome-sub    { font-size: 16px; }
  .footer__hours       { font-size: 12px; }

  /* 말풍선 — 480 에서도 worry-chip 과 동일 */
    .level-callout { font-size: 14px; line-height: 22px; padding: 12px 20px; min-height: 52px; }
  .level-bar{border-radius: var(--radius-8);}
  /*고민카드*/
    .worry-chip{font-size: 14px;line-height: 22px;}
  .worry-chip__icon{width: 24px;height: 24px;}
  .worry-swiper{
    max-width:100%;
    margin-bottom:20px;
  }
  /* 고민 블록 — 슬라이드↔화살표↔카드 간격 축소 */
  .concern-group { gap: var(--space-16); }

  /* 섹션 설명문 — 전부 15px 로 통일하고, 좁은 폭에서는 강제 줄바꿈 해제 */
  /* 제목 바로 아래 붙는 보조 문구 — 위 여백도 가장 작은 값(8)으로 통일 */
  .sec-desc, .sec-subtitle, .grow__sub, .page-sub {
        font-size: 16px; line-height: 1.55;
    margin-top: var(--space-8);
  }
  /* 위 일괄 숨김의 예외 — 폰 전용 줄바꿈은 살린다 (뒤에 와야 이긴다) */
  .core-showcase__title br{display: none !important;}
  .sec-desc br{display: none !important;}
  .br-mo { display: inline !important; }
  
  /* 아래쪽 섹션 하드코딩 폰트 정리 (px 로 박혀 있어 토큰 축소가 안 먹는 것들)
     ※ .level-bar__chip / .stage-card__* 는 이 블록 위쪽에도 중복 선언돼 있었다.
        같은 구간에 두 번 쓰면 뒤엣것만 살아 헷갈려서 값은 여기 한 곳으로 모았다. */
  /* K1~K12 — 칩이 flex:1 로 균등 분할되므로 패딩 없이도 폭이 유지된다.
     좁은 화면에서 패딩까지 있으면 12칸이 밀려 글자가 눌리므로 전부 뺀다. */
  .level-bar__chip     { font-size: 14px; line-height: 22px; padding: 0; }
    .stage-card__head    { font-size: 14px; line-height: 22px; padding: 9px var(--space-12); border-radius: var(--radius-10); }   /* 기초 단계 · 유창성 단계 */
  .stage-card__level   { font-size: 20px; line-height: 24px; }
  .stage-card__grade   { font-size: 14px; line-height: 22px; }
  .stage-card__desc    { font-size: 14px; line-height: 22px; }                                  /* 글자와 소리를 연결하고~ */
  .stage-card__body    { padding: var(--space-16); gap: var(--space-12); }
  .stage-cards         { gap: var(--space-12); }
    .grow-card__chip     { font-size: 14px; line-height: 22px; }
  .grow-card__title    { font-size: 16px; line-height: 24px; margin-top: var(--space-16); }
  .grow-card__desc     { margin-top: var(--space-16); }
  .grow-card__icon     { width: 60px; height: 60px; margin-top: var(--space-16); }
  .core-showcase__title{ font-size: 16px; line-height: 1.4; }
  .my-profile__name, .my-plan__name, .trial-head__title { font-size: 18px; }
  .auth-welcome        { font-size: 20px; }
  .auth-welcome-sub    { font-size: 18px; }
  .concern-arrow { width: 28px; height: 28px; margin-top: -20px; }

  /* 고민 칩 — 문구가 두 줄이 되므로 컨테이너 높이도 함께 풀어야 한다.
     (72px 고정인 채 칩만 줄이면 슬라이드 안에서 어긋나고,
      두 줄에 pill(999px) 라운드를 쓰면 타원처럼 찌그러져 보임) */
  .worry-swiper { height: auto; }
  .worry-swiper .swiper-slide { height: auto; border-radius: 24px; }
  .worry-swiper .worry-chip{
        height: auto; min-height: 56px;
    padding: 12px 4px;
    border-radius: 999px;
    
    gap: var(--space-8);
    font-size: 16px; line-height: 1.45;
  }
  .worry-chip__icon { width: 24px; height: 24px; }

  /* 1열이라 카드끼리 높이를 맞출 필요 없음 — 내용 높이대로 */
  .concern-cards { align-items: flex-start; }
  .concern-card { height: auto; }
  .concern-card__body { flex: 0 0 auto; }
  .concern-card__body{gap: var(--space-8);}
  .concern-card__title{
    font-size: 18px; line-height: 1.5;
  }
  /* [고민 카드 모바일 하이라이트 글자 복원 20260819 반영] 하이라이트된 첫 줄은 PC와 같은 28px, 둘째 줄은 기존 모바일 18px을 유지한다. */
  .concern-card__title-main { font-size: 28px; }
  .concern-card__title-sub { font-size: 18px; }
  /* [개발자 확인 20260827] 모바일의 20px 덮어쓰기를 제거해 components.css의 공통 18px을 사용한다. 기존 행간 비율 1.5는 유지한다. */
  .concern-card__desc{
    line-height: 1.5;
  }
  /* [개발자 확인 20260827] 모바일 출처도 공통 글자 크기 14px / 행간 22px을 사용한다. */
    .concern-card__cite{
    line-height: 22px;
  }
  .grow-cards{
        margin-top: 40px;
                padding-inline: 0;
  }
  .grow-card__title{
    font-size: 16px; line-height: 1.4;
  }
    .grow-card__desc{
    font-size: 14px; line-height: 22px;
  }
  .grow__logo { width: 124px; margin-bottom: var(--space-12); }
  .grow__sub{
        margin-top: 8px;
    font-size: 16px; line-height: 1.5;
  }
    .grow-card__chip{
    height: 28px;
        font-size: 14px; line-height: 22px;
  }
  .grow-card__desc br{
    display: none;
  }
}

/* ============================================================================
   ≥1025 — PC 전용 (min-width 로 잡아 ≤1024 / ≤768 / ≤480 에 손대지 않는다)
   ========================================================================== */
@media (min-width: 1025px) {
  /* 캐릭터와 레벨 바 사이 간격 축소 — 캐릭터가 바 뒤에 더 바짝 서 있게.
     .level-chars 는 z-index 1, .level-bar 는 2 라 겹쳐도 캐릭터가 바 뒤로 들어간다. */
  .level-chars { margin-bottom: -60px; }
}

/* ============================================================================
   ≤768 — 미리 체험하기 뷰어: 좌측 사이드 메뉴(220px 고정) → 상단 드롭다운
   인덱스 page-navi 와 같은 방식: [현재 항목 표시줄]을 누르면 목록이 아래로 펼쳐진다.
   좁은 화면에서 220px 을 세로로 물고 있으면 본문이 150px 밖에 안 남는다.
   ========================================================================== */
@media (max-width: 768px) {
  .trial-body { flex-direction: column; }

  .trial-menu {
    width: 100%; flex: none;
    padding: 0;
    overflow: visible;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  /* 표시줄 — 데스크톱에서는 숨김(기본), 이 구간에서만 노출 */
  .trial-menu__current {
        display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 48px;
    padding: 0 var(--space-16);
    font-family: var(--font-round); font-weight: var(--weight-extrabold);
    font-size: 16px; line-height: 20px;
    color: var(--text-inverse);
  }
  .trial-menu__current img {
    width: 20px; height: 20px;
    /* 헤더 닫기(X)는 right:16 + 버튼40 이라 아이콘 중심이 우측 끝에서 36px.
       표시줄은 padding-inline 16 + 아이콘 20 이라 중심이 26px → 10px 어긋난다. 그만큼 당긴다. */
    margin-right: 10px;
    filter: brightness(0) invert(1);          /* 다크 배경이라 화살표를 흰색으로 */
    transition: transform .15s ease;
  }
  .trial-menu.is-open .trial-menu__current img { transform: rotate(180deg); }

  /* 목록 — 접힘이 기본, 표시줄을 눌러야 펼쳐진다 */
  .trial-menu__group,
  .trial-menu__divider { display: none; }
  .trial-menu.is-open .trial-menu__group { display: flex; }
  .trial-menu.is-open .trial-menu__divider { display: block; }
  /* 펼치면 뷰어 본문 전체를 덮는다 — 항목이 길어서 반쯤 걸치면 스크롤이 두 겹으로 겹치고
     뒤 콘텐츠와 섞여 읽기 어렵다. 표시줄은 패널 맨 위에 그대로 남아 바로 닫을 수 있다.
     (.trial-body 가 position:relative 라 inset:0 이 본문 영역에 딱 맞는다) */
  .trial-menu.is-open {
    position: absolute; inset: 0;
    /* 90 — 본문 위를 완전히 덮는다. 좌우 이동 화살표(.trial-arrow)가 80, 스플래시가 70 이라
       그보다 낮으면 콘텐츠가 메뉴를 뚫고 올라온다. */
    z-index: 90;
    /* 불투명 배경 필수 — 다크모드 기본값이 rgba(0,0,0,.25) 반투명이라
       덮어도 뒤 콘텐츠가 그대로 비쳐 글자가 겹쳐 읽혔다. */
    background: var(--color-slate-900);
    padding: 0 0 var(--space-16);
    max-height: none; overflow-y: auto;
  }
  .trial-menu__item { padding: 12px var(--space-16); }
  .trial-menu__icon { width: 18px; height: 18px; }   /* 24 → 18, 표시줄 톤에 맞춰 축소 */
  /* 대분류 = 표시줄(선택된 항목)과 같은 준위로 */
  .trial-menu__item--major { font-size: 16px; line-height: 20px; }
  .trial-menu__item--sub { padding-left: 42px; font-size: 14px; line-height: 22px; }

  /* 드롭다운에서 고른 항목 표시 — 서브도 배경까지 준다.
     데스크톱은 사이드 메뉴가 늘 펼쳐져 있어 색 변화(+방점)만으로 충분하지만,
     모바일은 목록이 길고 고른 뒤 바로 접히므로 색만으로는 어디를 골랐는지 안 읽힌다.
     components.css 의 `.trial-ov--dark .trial-menu__item--sub.is-active { background: none }`
     보다 뒤에 오므로 같은 특정도에서 이긴다. */
  .trial-menu__item--sub.is-active,
  .trial-ov--dark .trial-menu__item--sub.is-active {
    background: var(--bg-alpha-white-20);
    color: var(--text-inverse);
  }
  .trial-menu__item--sub.is-active::before { background: var(--text-inverse); }
}

/* ============================================================================
   ≤480 — 마이페이지 타입·여백 한 단 축소
   데스크톱 스케일(본문 16 · 카드 패딩 20 · 아바타 56)이 그대로 내려와 전체적으로 커 보였다.
   지금까지 잡아온 모바일 위계(본문 14 · 보조 12~13 · 제목 16~20)에 맞춘다.
   버튼 높이(44)는 탭 타깃이라 건드리지 않는다.
   ========================================================================== */
@media (max-width: 480px) {
  .support-block { gap: var(--space-12); }
  .support-block__title { font-size: 16px; line-height: 1.4; }

  .my-card { padding: var(--space-16); }
  .my-card__head { gap: var(--space-12); }
  .my-avatar { width: 44px; height: 44px; }
  .my-avatar img { width: 22px; height: 22px; }
  .my-profile__name { font-size: 16px; line-height: 22px; }
  .my-profile__meta { font-size: 14px; line-height: 22px; }

  /* 라벨-값 목록 — 한 줄 정보라 본문보다 한 단 작게 */
  .my-rows { gap: var(--space-12); }
  .my-row { gap: var(--space-4); }
  .my-row__label { font-size: 14px; line-height: 22px; color: var(--text-tertiary); }
    .my-row__value { font-size: 14px; line-height: 22px; }

  /* 자녀 카드 안 패널 */
  .my-panel { padding: var(--space-12); }
  .my-panel__label { font-size: 14px; line-height: 22px; }
  .my-panel__value { font-size: 16px; line-height: 22px; }
  .my-panel__tip {
    align-self: center;
    max-width: 100%;
    margin-top: var(--space-12);
    padding-inline: 10px;
    font-size: 12px;
    line-height: 18px;
  }

  .btn--my { font-size: 14px;  line-height: 22px; }
}

/* ============================================================================
   ≤768 — 미리 체험하기 뷰어 (모바일 팝업 규격에 맞춤)
   뷰어는 사실상 풀스크린 팝업이므로 헤더 스펙을 .modal__head 와 동일하게 가져간다.
   ========================================================================== */
@media (max-width: 768px) {
  /* 헤더 — 모달과 같은 높이·패딩·타이틀 크기.
     좌우 패딩 56 = 닫기 버튼이 차지하는 폭(right 16 + 버튼 40)과 정확히 일치시켜 겹치지 않게. */
  .trial-head { min-height: 60px; padding: var(--space-16) 56px; }
  .trial-head__title { font-size: 18px; line-height: 24px; }
  .trial-head__close { right: var(--space-16); width: 40px; height: 40px; }
  .trial-head__close img { width: 28px; height: 28px; }

  /* 좌우 이동 화살표 — 48px 글래스 버튼이 좁은 화면에서 본문을 덮을 만큼 컸다 */
  .trial-arrow { width: 36px; height: 36px; }
  .trial-arrow img { width: 16px; height: 16px; }
  .trial-arrow--left  { left: var(--space-12); }
  .trial-arrow--right { right: var(--space-12); }

  /* 이미지 캡션 — [라벨 | 설명] 가로 배치는 폭이 부족해 설명이 잘게 끊긴다. 위아래로. */
  .trial-img-caption {
    flex-direction: column; align-items: flex-start;
    gap: var(--space-8);
  }
  .trial-img-caption__label { font-size: 14px; line-height: 22px; padding: 4px 12px; }
    .trial-img-caption__desc  { font-size: 14px; line-height: 22px; }

  /* 푸터(이전/다음) — 모바일 팝업 푸터(.modal__foot)와 동일 규격.
     패딩 12/16/16 · 버튼 높이 48 · radius 10. 다만 이전↔다음은 성격상 세로로 쌓지 않고
     좌우로 반씩 나눠 페이저로 둔다(모달의 풀폭 버튼과 같은 무게감). */
  .trial-detail__foot {
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom));
  }
  .trial-detail__foot .btn {
        flex: 1; min-width: 0;
    height: 48px;
    border-radius: var(--radius-10);
    font-size: 16px;
  }
}

/* ≤480 — 헤더 좌우 패딩도 모달(52 / close right 12)과 동일하게 한 단 더 */
@media (max-width: 480px) {
  .trial-head { padding-inline: 52px; }
  .trial-head__close { right: var(--space-12); }
}

/* ============================================================================
   ≤768 — KRS 리포트 뷰어(.diag-viewer, 라이트)
   미리 체험하기 뷰어(.trial-*, 다크)와 UI·준위가 같은 화면이라 모바일 규격도 같이 간다.
   기준은 양쪽 공통으로 모바일 팝업(.modal__head / .modal__foot).
   ========================================================================== */
@media (max-width: 768px) {
  /* 결과지 미리보기 역시 KRS 레벨 팝업과 동일하게 모바일에서는 풀스크린 */
  .diag-viewer--preview { align-items: stretch; padding: 0; }
  .diag-viewer--preview .diag-viewer__card {
    width: 100%; max-width: none;
    height: 100%; max-height: none;
    border-radius: 0; box-shadow: none;
  }

  /* 헤더 — 모달과 동일: 높이 60 · 좌우 패딩은 닫기 버튼 폭(16+40=56)과 일치 · 타이틀 18 */
  .diag-viewer__head {
    min-height: 60px;
    padding: var(--space-16) 56px;
    justify-content: center;
  }
  .diag-viewer__title { font-size: 18px; line-height: 24px; text-align: center; }
  .diag-viewer__close { right: var(--space-16); width: 40px; height: 40px; }
  .diag-viewer__close img { width: 28px; height: 28px; }
  .diag-viewer--preview .diag-viewer__head {
    min-height: 60px;
    padding: var(--space-16) 56px;
  }
  .diag-viewer--preview .diag-viewer__title { font-size: 18px; line-height: 24px; }
  .diag-viewer--preview .diag-viewer__close { right: var(--space-16); }

  /* 본문 여백 축소 */
  .diag-viewer__body { padding: var(--space-12); }

  /* 푸터 — 모달 푸터 규격 (패딩 12/16/16 · 버튼 높이 48 · radius 10) */
  .diag-viewer__foot {
    padding: var(--space-12) var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom));
  }
  .diag-viewer__foot .btn {
        flex: 1; min-width: 0; width: auto;
    height: 48px;
    border-radius: var(--radius-10);
    font-size: 16px;
  }
}

/* ≤480 — 헤더 좌우 패딩도 모달(52 / close right 12)과 동일하게 한 단 더 */
@media (max-width: 480px) {
  .diag-viewer__head { padding-inline: 52px; }
  .diag-viewer__close { right: var(--space-12); }
  .diag-viewer--preview .diag-viewer__head { padding-inline: 52px; }
  .diag-viewer--preview .diag-viewer__close { right: var(--space-12); }
}

/* ============================================================================
   ≤768 — 미리 체험하기: 시작 스플래시 · 가이드 말풍선
   ========================================================================== */
@media (max-width: 768px) {
  /* 스플래시 — 화면 가운데 떠 있는 카드가 아니라 팝업 바디를 꽉 채운다.
     좁은 화면에서 카드가 둥둥 떠 있으면 뒤 콘텐츠와 섞여 읽히고, 좌우 여백만 낭비된다. */
  /* 스플래시 — 형태는 알림 팝업(.modal--alert)과 동일한 "가운데 좁은 카드".
     다만 딤이 화면 전체가 아니라 팝업 바디 안에만 갇히도록, trial.js 가 이 요소를
     .trial-detail__body 에 붙이고 여기서 그 박스를 위치 기준으로 삼는다. */
  .trial-detail__body { position: relative; }
  .trial-splash {
    align-items: center; justify-content: center;
    padding: var(--space-20);
    background: rgba(26, 26, 26, .55);            /* 딤 유지 — 바디 영역에만 깔린다 */
    z-index: 85;                                  /* 좌우 화살표(80) 위 — 딤 위로 화살표가 삐져나오면 안 됨 */
  }
  .trial-splash__card {
    width: min(320px, 100%);
    max-width: none;
    padding: var(--space-24) var(--space-20);
    border-radius: var(--radius-24);              /* 알림 팝업과 동일 */
    box-shadow: var(--shadow-100);
    text-align: center;
  }
  .trial-splash__icon { width: 32px; height: 32px; }
  .trial-splash__title { font-size: 16px; line-height: 24px; }
  .trial-splash__desc  { font-size: 14px; line-height: 22px; }
  .trial-splash__ok {
        margin-top: var(--space-20);
    width: 100%; max-width: none;
    height: 46px; border-radius: var(--radius-10);
    font-size: 16px;
  }

  /* 가이드 말풍선 — 좁은 폭에서 한 줄로 두면 화면 밖으로 나간다. 줄바꿈 허용 + 폭 제한.
     위치는 trial.js 가 left:50% 로 주므로 여기서 가운데로 당긴다. */
  .trial-toast {
        max-width: calc(100vw - 40px);
    white-space: normal;
    text-align: center;
    font-size: 14px; line-height: 22px;
    padding: 10px 16px;
    border-radius: var(--radius-16);
  }
  /* 메뉴 안내 — 상단 드롭다운 "아래"에 뜨고 꼬리는 위(메뉴)를 가리킨다 */
  .trial-toast--menu { transform: translate(-50%, -8px); }
  .trial-toast--menu.is-show { transform: translate(-50%, 0); }
  .trial-toast--menu::before {
    left: 50%; top: -6px; right: auto; bottom: auto;
    transform: translateX(-50%);
    border-top: 0;
    border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(244, 246, 252, .92);
  }
  /* 이전/다음 안내 — 가운데 정렬 (꼬리는 아래 그대로) */
  .trial-toast--nav { transform: translate(-50%, 8px); }
  .trial-toast--nav.is-show { transform: translate(-50%, 0); }

  /* 문구 스왑 — PC 문구 숨기고 모바일 문구 노출 */
  .trial-toast__pc { display: none; }
  .trial-toast__mo { display: inline; }
}

/* ============================================================================
   ≤768 — 푸터 접기/펼치기
   푸터가 길어 모바일에서 화면을 크게 잡아먹는다. 기본은 [로고 + 화살표 + 고객센터 + 저작권]만
   보이고, 화살표를 누르면 주소·패밀리사이트·SNS·약관 링크가 펼쳐진다.
   (웅진씽크빅 본사 푸터의 mbFooterOpen 과 같은 패턴)
   ========================================================================== */
@media (max-width: 768px) {
  /* 순서 재배치 — [로고 + 화살표] / 고객센터 / 저작권 / (펼치면) 주소·패밀리·SNS·약관.
     copy 는 .footer__left 안, cs 는 .footer__right 안이라 컨테이너를 넘어 섞어야 한다.
     display:contents 로 두 래퍼를 걷어내 자식들을 .footer__top 의 직접 아이템으로 만든 뒤 order 로 세운다. */
  .footer__top {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: var(--space-12);
    text-align: center;
  }
  .footer__left, .footer__right { display: contents; }
  .footer__brand    { order: 1; }                    /* 로고 + 화살표 (한 덩어리) */
  .footer__cs       { order: 3; flex-basis: 100%; }
  .footer__copy     { order: 4; flex-basis: 100%; }
  .footer__addr     { order: 5; flex-basis: 100%; }
  .footer__util     { order: 6; flex-basis: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); }

  /* 로고 줄 — 로고 오른쪽에 화살표 버튼 (.footer__brand 가 flex 로 나란히 세운다) */
  .footer__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; flex: none;
    border-radius: var(--radius-full);
    background: var(--bg-slate-primary);
    vertical-align: middle;
  }
  .footer__toggle img { width: 16px; height: 16px; transition: transform .2s ease; }
  .footer.is-open .footer__toggle img { transform: rotate(180deg); }

  /* 접힘 기본 — 펼치면 보이는 것들 */
  .footer__addr,
  .footer__util,
  .footer__links { display: none; }
  .footer.is-open .footer__addr { display: block; }
  .footer.is-open .footer__util { display: flex; }
  .footer.is-open .footer__links { display: flex; }

  /* 항상 보이는 것 — 고객센터 박스 + 저작권 */
  .footer__cs {
    align-items: center; text-align: center;
    padding: var(--space-16);
    border: 1px solid var(--color-gray-150);
    border-radius: var(--radius-12);
  }
  .footer__copy { text-align: center; }
  .footer__sns { justify-content: center; }
  .footer__family { margin-inline: auto; }
}

/* ============================================================================
   추천사 (Figma: recomand) — 패드·모바일
   PC 는 [사진 | 프로필] 좌우 배치. 폭이 줄면 사진이 프로필을 밀어내므로
   ≤768 부터 세로로 쌓고, ≤480 에서는 약력을 1열로 편다.
   ========================================================================== */
@media (max-width: 768px) {
  /* [추천사 말풍선 모바일 연결 20260820 반영] 인용 박스 테두리를 없애고 PC용 꼭지는 숨긴다. */
  .recomm__quote {
    padding: var(--space-32) var(--space-20);
    border: 0;
  }
  .recomm__quote::after { display: none; }
  /* [추천사 말풍선 모바일 방향 보정 20260820 반영] 회색 밴드 상단 중앙에서 교수 사진 방향인 아래쪽을 향하도록 꼭지를 반전한다. */
  .recomm__band { margin-top: 58px; }
  .recomm__band::after {
    content: '';
    position: absolute; top: 0; bottom: auto; left: 50%;
    width: 96px; height: 42px;
    transform: translateX(-50%);
    background: url('../assets/index/recomm-quote-tail-mobile-down.svg') center / contain no-repeat;
    z-index: 2;
    pointer-events: none;
  }
    .recomm__lead  { font-size: 14px; line-height: 22px; }
  .recomm__point { font-size: 16px; line-height: 26px; margin-top: var(--space-20); }
  .recomm__glow  { left: 20px; bottom: -40px; width: 130px; }

  /* [반응형 수정: recomm__photo]
     사진 아래 프로필 — 사진은 흐름 배치로 되돌려 가운데.
     ※ PC/패드에서 사진을 absolute 로 띄우며 준 padding-left 를 반드시 0 으로 되돌려야 한다.
        (안 풀면 390px 화면에 316px 여백이 남아 내용이 전부 화면 밖으로 밀린다)
     PC의 absolute/flex 겹침 레이아웃을 완전히 해제하고 1열(세로) 배치로 전환한다.
     DOM 순서가 이미 [인용구 박스] → [.recomm__photo] → [프로필 텍스트] 이므로,
     display:block + position:relative만으로 그 순서 그대로 세로로 쌓인다. */
  .recomm__body {
    display: block;
    padding-left: 0;
    text-align: center;
  }
  /* [반응형 수정: recomm__photo]
     모바일 — 원형 프레임은 문서 흐름에 두고, 사진만 내부에서 확대·중앙 크롭한다.
     PC의 height:100% + object-fit:contain을 해제해야 전신으로 다시 축소되지 않는다. */
  .recomm__photo {
    position: relative;
    left: auto; bottom: auto;              /* PC용 absolute 좌표값 무효화 */
    width: 200px; height: 200px;
    max-width: 100%;
    /* [추천사 모바일 말풍선·사진 간격 확대 20260820 반영] 42px 꼭지 아래 간격을 16px → 24px로 늘려 교수 사진과 여유 있게 분리한다. */
    margin: 66px auto 0;                  /* 42px 꼭지 + 24px 간격 · 좌우 auto = 가운데 정렬 */
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-slate-primary);
  }
  .recomm__photo img {
    position: absolute;
    top: -30px;
    left: 50%;
    width: 360px;
    height: auto;
    max-width: none;
    transform: translateX(-50%);
    object-fit: initial;
    object-position: initial;
  }
  /* [반응형 수정: recomm__photo] 프로필 텍스트 — 모바일 간격/크기 축소 */
  .recomm__profile {
    width: 100%;
    padding-top: var(--space-24);
    padding-bottom: var(--space-40);
  }
  .recomm__name { font-size: 20px; line-height: 26px; }
  /* [추천사 이름 밑줄 정렬 20260819 반영] 모바일 별도 중앙 정렬을 제거하고 이름 요소 자체의 공통 밑줄 위치를 사용한다. */
  /* [개발자 확인 20260827] 소속·경력의 글자 크기는 공통 14px을 상속하고 모바일 간격만 조정한다. */
  .recomm__role { margin-top: var(--space-16); }
  .recomm__career { gap: var(--space-20); text-align: left; margin-top: var(--space-16); }
    .recomm__career li { line-height: 22px; }
  /* [추천사 PC·모바일 하이픈 통일 20260819 반영] 하이픈 위치·들여쓰기는 공통 components.css 규칙을 그대로 사용한다. */
  /* 좁은 폭에서는 Figma 의 강제 줄바꿈이 오히려 어색해 흐르게 둔다 */
  .recomm__career li br { display: none; }
}

@media (max-width: 480px) {
  .recomm__quote { padding: var(--space-24) var(--space-16); }
  .recomm__lead  { font-size: 14px; line-height: 22px; }
    .recomm__point { font-size: 14px; line-height: 22px; }
  .recomm__lead br { display: none; }        /* 4줄 고정 줄바꿈 → 자연 흐름 */
  /* 작은 모바일에서도 동일한 얼굴 중심과 확대 비율 유지 */
  .recomm__photo { width: 160px; height: 160px; }
  .recomm__photo img { top: -24px; width: 288px; }
  .recomm__name  { font-size: 20px; line-height: 26px; }
  /* [개발자 확인 20260827] 480px 이하에서도 소속 문구를 13px로 축소하지 않고 공통 14px을 유지한다. */
  .recomm__role  { margin-top: var(--space-16); }
  .recomm__career { flex-direction: column; gap: var(--space-8); }
}

/* ============================================================================
   고객지원(support.html) 모바일 정리
   측정(390px): 탭 16 · 공지 제목 16 · 페이지네이션 16 → 모바일 기준으로 과함.
   폭/레이아웃은 건드리지 않고 타이포와 정렬만 조정한다 (가로 넘침 유발 없음).
   ========================================================================== */
@media (max-width: 480px) {
  .tabbar { gap: var(--space-24); }
  .tabbar__item { font-size: 16px; line-height: 20px; }

  /* 헤더 라벨은 가운데, 본문 제목은 왼쪽이라 어긋나 보였다 — 같은 기준으로 맞춘다.
     .notice-thead span (0,1,1) 이 이미 center 를 걸고 있어 특정성을 한 단계 올려야 한다. */
  .notice-thead { font-size: 14px;  line-height: 22px; }
  .notice-thead .notice-col-title { text-align: left; padding-inline: var(--space-12); }

    .notice-item__title { font-size: 14px; line-height: 22px; }
  .notice-item__date  { font-size: 14px;  line-height: 22px; }
  .select--filter { font-size: 14px;  line-height: 22px; }

    .pagination__btn { font-size: 14px; line-height: 22px; }

  /* FAQ 탭 — 질문/카테고리도 한 단계 낮춘다 */
  .faq-item__q   { font-size: 14px; line-height: 22px; }
  .faq-item__cat { font-size: 14px;  line-height: 22px; }
  .faq-answer    { font-size: 14px; line-height: 22px; }
}

/* 추천사 장식 — 1024 이하에서는 열기구(구름 포함 이미지)를 통째로 숨긴다.
   좁은 폭에서는 카드 위로 올라타 텍스트를 가린다. */
@media (max-width: 1024px) {
  /* .recomm__deco img (0,1,1) 가 display:block 을 걸고 있어 클래스 하나(0,1,0)로는 못 이긴다 */
  .recomm__deco .recomm__deco-balloon,
  .recomm__deco .recomm__deco-cloud { display: none; }
  .recomm__deco .recomm__deco-cloud2 { left: 12px; top: -26px; width: 68px; }
}

/* 탭 — 360 미만에서는 가운데 정렬을 포기하고 왼쪽부터 붙여 가로 스크롤 */
@media (max-width: 359px) {
  .tabs { justify-content: flex-start; }
}

/* ============================================================================
   PDF 수정 요청 20260818 — 신규 강조/혜택/연결 요소 반응형 보정
   ========================================================================== */
@media (max-width: 768px) {
  /* [진단 출발점 문구 스타일 통일 20260819 반영] 모바일에서도 독서력 설명과 같은 크기를 유지한다. */
  .level-intro-title small { font-size: var(--font-body-5); line-height: 1.5; }
  /* [통이미지 코드화 20260819 반영] 코드화한 독서력 설명은 모바일 폭에서 자연스럽게 줄바꿈한다. */
  .level-box__desc-code { max-width: 100%; }
  /* [독서력 설명 폰트 통일 20260819 반영] 모바일에서도 `.persona-outer__lead`와 같은 20px/1.5 규격을 유지한다. */
  .level-box__summary { font-size: var(--font-body-5); line-height: 1.5; letter-spacing: var(--letter-spacing-tighter); }
    .level-box__criteria { font-size: 14px; line-height: 22px; }
  /* [버튼 패딩 20260819 반영] 모바일 전역 .btn 높이 40px보다 우선해 동일한 16px 사방 패딩을 유지한다. */
  /* [개발자 확인 20260828] 모바일 공통 .btn 축소 규칙보다 우선하여 레벨 안내 버튼도 16px을 유지한다. */
  .level-box__cta { width: auto; height: auto; padding: var(--space-16); font-size: 16px; }
  /* [개발자 확인 20260827] 모바일 관리 서비스는 1단 적층 대신 2×2 그리드로 표시한다.
     공통 파란 화살표를 이용해 진단(1) → 플랫폼(2) ↓ 도서 배송(3) → 전문 코칭(4)의
     지그재그 진행 순서가 한눈에 이어지도록 카드와 화살표의 grid 위치를 고정한다. */
  .service-ecosystem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
    grid-template-rows: auto 20px auto;
    gap: var(--space-8);
    align-items: stretch;
  }
  .service-ecosystem__item,
  .service-ecosystem__item--platform,
  .service-ecosystem__item--diagnosis,
  .service-ecosystem__item--coaching,
  .service-ecosystem__item--books {
    width: 100%;
    min-height: 180px;
    padding: var(--space-12);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-8);
  }
  /* [개발자 확인 20260827] 첨부된 최종 개발자 도구 값에 맞춰 이미지 너비를 110%로 확대한다.
     `height:auto`가 각 파일의 고유 비율을 다시 적용하지 않도록 동일한 8:5 프레임 규칙은 유지한다. */
  .service-ecosystem__item > img {
    width: 110%;
    max-width: 200px;
    height: min(125px, calc(31.25vw - 26.25px));
    min-height: 80px;
    aspect-ratio: 8 / 5;
    object-fit: cover;
  }
  /* [개발자 확인 20260827] 플랫폼 PNG만 캔버스를 끝까지 채워 SVG 3종보다 크게 보이므로,
     모바일 표시 크기만 90%로 보정해 네 이미지의 실제 보이는 면적을 통일한다. */
  .service-ecosystem__item--platform > img {
    transform: scale(.9);
  }
  .service-ecosystem__item figcaption {
        flex: none;
    font-size: clamp(14px, 3vw, 16px);
    line-height: 22px;
    text-align: center;
  }
  .service-ecosystem__item--diagnosis { grid-column: 1; grid-row: 1; }
  .service-ecosystem__item--platform  { grid-column: 3; grid-row: 1; }
  .service-ecosystem__item--books     { grid-column: 3; grid-row: 3; }
  .service-ecosystem__item--coaching  { grid-column: 1; grid-row: 3; }
  /* [개발자 확인 20260827] 기존 파란 그라데이션 화살표의 형태·방향은 유지하고 12×56px에서 16×80px로 조금 확대한다. */
  .service-ecosystem__flow {
    display: block;
    align-self: center;
    justify-self: center;
    width: 16px;
    height: 80px;
    object-fit: contain;
    pointer-events: none;
  }
  .service-ecosystem__flow--12 { grid-column: 2; grid-row: 1; }
  .service-ecosystem__flow--23 { grid-column: 3; grid-row: 2; transform: rotate(90deg); }
  .service-ecosystem__flow--34 { grid-column: 2; grid-row: 3; transform: rotate(180deg); }

  /* [전문 코칭 패널 모바일 좌우 여백 20260819 반영] 화면 양끝에서 컨테이너 패딩만큼 띄워 라운드 박스 외곽이 모두 보이게 한다. */
  .coaching-panel {
    width: calc(100% - (var(--container-pad) * 2));
    margin-inline: var(--container-pad);
    padding: 56px var(--container-pad) var(--space-32);
    border-radius: var(--radius-20);
  }
}

/* [개발자 확인 20260828] 359px 이하도 위의 자동 높이를 사용한다. 기존 320px 고정 높이는 제거하여 줄바꿈 시 잘림을 방지한다. */

@media (max-width: 480px) {
  /* [진단 제목 모바일 마커 이탈 수정 20260819 반영] block 요소가 인라인 마커를 빈 줄로 밀어내던 문제를 막고 각 문구 뒤에 직접 마커를 그린다. */
  .diag3-title__highlight { background: none; padding: 0; }
  .diag3-title__only,
  .diag3-title__rest {
    background: linear-gradient(90deg, #C7E4FF 0%, #92B8FF 100%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .diag3-title__only {
    display: table;
    margin: 0 auto var(--space-4);
    padding: 4px 10px;
    font-size: 1.3em;
  }
  .diag3-title__rest { padding: 4px 10px; }
  .reward-roll { border-radius: var(--radius-12); }
  .report-slide .reward-roll img { border-radius: var(--radius-12); }
}

/* [개발자 확인 20260828] 추천사 'AI 시대…'와 '지금 우리 아이들은…' 두 문단을 모바일 16px로 통일.
   480px 이하의 기존 14px 규칙도 덮어쓴다. 같은 16px 카드 본문들과 행간을 24px로 맞추며,
   PC·Bold/ExtraBold·마커·교수 프로필 및 14px 안내 문구의 행간 22px은 유지한다. */
@media (max-width: 768px) {
  .recomm__lead,
  .recomm__point {
    font-size: 16px;
    line-height: 24px;
  }
}

/* [개발자 확인 20260828] 요청에 따라 .sec-title 및 .faq__title의 모바일 크기를 24px에서 20px로 변경.
   480px 이하의 기존 18px 축소 규칙보다 뒤에 배치한다. PC 크기, 기존 행간·줄바꿈·강조 스타일은 유지한다.
   보조 설명·탭·푸터는 제외하며, '국내 유일,'은 아래 별도 규칙으로 크기를 지정한다. */
@media (max-width: 768px) {
  .sec-title,
  .faq__title {
    font-size: 20px;
  }

  /* [개발자 확인 20260828] 모바일 진단 제목 중 '국내 유일,'만 24px로 강조한다.
     나머지 제목은 20px을 유지하며 PC·기존 마커·행간·줄바꿈은 변경하지 않는다. */
  .sec-title .diag3-title__only {
    font-size: 24px;
  }

  /* [개발자 확인 20260828] 진단 비교 영역의 두 제목을 모바일에서 24px로 표시한다.
     PC 크기와 기존 행간·굵기·색상·가운데 정렬은 유지한다. */
  .krs-compare__label {
    font-size: 24px;
  }

  /* [개발자 확인 20260828] '아이가 글자를…' 제목과 '부모 중심의 읽기가 아닌…' 내용 문구는
     모바일에서 모두 20px로 표시한다. PC 크기와 기존 굵기·행간·문단 간격은 유지한다. */
  .sec-title.concern-intro-title {
    font-size: 20px;
  }
}

/* [개발자 확인 20260828] 제목+본문으로 구성된 콘텐츠 카드의 모바일 타이포그래피 통일.
   소개/고민/진단 STEP/성장/도서 슬라이드/관리·코칭/미리보기 카드에만 적용한다.
   요청한 11개 제목 선택자의 모바일 크기를 24px에서 20px로 변경하고, 본문은 16px을 유지한다.
   기존 480px 이하 축소 규칙보다 뒤에 두어 작은 모바일에서도 동일하게 적용한다.
   줄바꿈 시 겹치지 않도록 제목 행간 32px, 본문 행간 24px을 사용하며 PC·색상·굵기·마커는 유지한다.
   버튼, 탭, 숫자 배지, 프로필 표, 인용·출처 및 안내 주석, 푸터는 변경 대상에서 제외한다. */
@media (max-width: 768px) {
  .grow-basis-code__title,
  .grow-card__title,
  .concern-card__title,
  .concern-card__title-sub,
  .diag3-code__title,
  .growth-card__title,
  .core-showcase__title,
  .process-step__title,
  .coaching-benefit h3,
  .manage-card__title,
  .entry-card__title {
    font-size: 20px;
    line-height: 32px;
  }

  /* [개발자 확인 20260828] 요청에 따라 고민 카드 3개의 하이라이트 문구를 모바일 28px에서 24px로 변경하고 행간 40px은 유지한다.
     긴 문구는 카드 너비 안에서 자연스럽게 줄바꿈하며, 아래 '아이 탓이 아니에요.'는 위 공통 규칙의 20px·32px을 사용한다.
     PC 및 기존 마커 색상·굵기는 변경하지 않는다. */
  .concern-card__title-main {
    font-size: 24px;
    line-height: 40px;
  }

  /* [개발자 확인 20260828] 모바일 성장 리포트 캡션과 CTA 배너 내부 버튼의 글자 크기를 16px로 변경.
     기존 행간·여백·PC 스타일은 유지하며, 캡션의 small 안내 문구는 기존 14px을 유지한다. */
  .report-slide__caption,
  .cta-banner__actions .btn {
    font-size: 16px;
  }

  /* [개발자 확인 20260828] CTA 배너 제목은 모바일 전 구간에서 20px로 통일한다.
     기존 행간·줄바꿈·PC 크기는 유지하며, 480px 이하의 16px 규칙보다 우선 적용한다. */
  .cta-banner__title {
    font-size: 20px;
  }

  .grow-basis-code__desc,
  .grow-card__desc,
  .concern-card__desc,
  .diag3-code__desc,
  .growth-card__list,
  .core-showcase__list,
  .process-step__desc,
  .coaching-benefit p,
  .manage-card__desc,
  .entry-card__desc {
    font-size: 16px;
    line-height: 24px;
  }
}
/* ==========================================================================
   개인정보 처리방침 반응형
   ========================================================================== */

/* 작은 PC */
@media (max-width: 1800px) {
    .policy-page .policywrap .layoutWrap {
        width: 100%;
        max-width: 1720px;
        padding: 0 40px;
        margin: 0 auto;
        box-sizing: border-box;
    }
}

/* 태블릿 */
@media (max-width: 1024px) {
    /* policy.html에 작성된 body padding: 48px 덮어쓰기 */
    .policy-page {
        padding: 32px 24px;
        overflow-x: hidden;
    }

    .policy-page .policywrap {
        width: 100%;
        min-width: 0;
    }

    .policy-page .policywrap .layoutWrap {
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .policy-page .policywrap .contBody {
        width: 100%;
        min-width: 0;
    }

    /* 제목 */
    .policy-page .policywrap .Title-wrap {
        margin-bottom: 32px;
    }

    .policy-page .policywrap .hd3 {
        font-size: 28px;
    }

    /* 개인정보 처리방침 선택창 */
    .policy-page .policywrap .sortArea {
        width: 100%;
    }

    .policy-page .policywrap #cateForm {
        width: 100%;
    }

    .policy-page .policywrap .sortArea .select_basic {
        width: 100%;
        max-width: 600px;
    }

    .policy-page .policywrap .boxMarginS {
        margin-bottom: 40px;
    }

    /* 도입 문장 */
    .policy-page .policywrap .contBody .sentence {
        margin-top: 24px;
        font-size: 16px;
        line-height: 1.7;
    }

    /* 개인정보 항목 아이콘 */
    .policy-page .policywrap .contBody .labelWrap {
        width: 100%;
        padding: 30px 0;
        margin: 24px 0;
    }

    .policy-page .policywrap .contBody .labelTable {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .policy-page .policywrap .contBody .labelArea {
        min-width: 0;
    }

    .policy-page .policywrap .contBody .label {
        padding: 16px;
    }

    .policy-page .policywrap .contBody .label img {
        width: 80%;
        max-width: 150px;
    }

    /* 본문 섹션 */
    .policy-page .policywrap .contBody .sectionBlock {
        margin: 64px 0 0 !important;
    }

    .policy-page .policywrap .contBody .sectionBlock:first-of-type {
        margin-top: 40px !important;
    }

    .policy-page .policywrap .contBody .subsectionThis {
        margin-top: 0;
        font-size: 20px;
        line-height: 1.5;
    }

    /* ----------------------------------------------------------
       표 전체를 화면 너비 안에 표시
       ---------------------------------------------------------- */
    .policy-page .policywrap .contBody .tableThis {
        display: table;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 14px 0;
        border-collapse: collapse;
        table-layout: fixed;
        overflow: visible;
    }

    .policy-page .policywrap .contBody .tableThis thead,
    .policy-page .policywrap .contBody .tableThis tbody,
    .policy-page .policywrap .contBody .tableThis tr {
        width: auto;
    }

    .policy-page .policywrap .contBody .tableThis th,
    .policy-page .policywrap .contBody .tableThis td {
        min-width: 0;
        padding: 8px 6px;
        font-size: 12px;
        line-height: 1.5;
        letter-spacing: -0.5px;
        white-space: normal;
        word-break: break-all !important;
        overflow-wrap: anywhere;
        vertical-align: middle;
    }

    .policy-page .policywrap .contBody .tableThis th:first-child,
    .policy-page .policywrap .contBody .tableThis td:first-child {
        min-width: 0;
    }

    .policy-page .policywrap .contBody .tableThis p {
        margin-bottom: 5px;
        font-size: inherit;
        line-height: inherit;
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    .policy-page .policywrap .contBody .tableThis p:last-child {
        margin-bottom: 0;
    }
}

/* 모바일 */
@media (max-width: 768px) {
    .policy-page {
        padding: 24px 16px;
        overflow-x: hidden;
    }

    .policy-page .policywrap {
        text-align: left;
    }

    /* 페이지 제목 */
    .policy-page .policywrap .Title-wrap {
        margin-bottom: 24px;
        text-align: center;
    }

    .policy-page .policywrap .hd3 {
        font-size: 24px;
        line-height: 1.4;
    }

    /* 개인정보 처리방침 선택창 */
    .policy-page .policywrap .sortArea {
        width: 100%;
        height: auto;
    }

    .policy-page .policywrap #cateForm {
        width: 100%;
    }

    .policy-page .policywrap .sortArea .select_basic {
        width: 100%;
        max-width: none;
        height: 46px;
        margin: 0;
        padding: 0 40px 0 14px;
        font-size: 14px;
        box-sizing: border-box;
    }

    .policy-page .policywrap .boxMarginS {
        margin-bottom: 30px;
    }

    /* 본문 기본 글자 */
    .policy-page .policywrap .contBody,
    .policy-page .policywrap .contBody p {
        font-size: 14px;
    }

    .policy-page .policywrap .contBody .sentence {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.7;
    }

    /* 개인정보 항목 아이콘 */
    .policy-page .policywrap .contBody .labelWrap {
        padding: 20px 0;
        margin: 20px 0;
    }

    .policy-page .policywrap .contBody .labelTable {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .policy-page .policywrap .contBody .label {
        min-height: 110px;
        padding: 12px 8px;
    }

    .policy-page .policywrap .contBody .label img {
        width: 90%;
        max-width: 120px;
    }

    .policy-page .policywrap .contBody .labelTxt {
        height: auto;
        min-height: 48px;
        padding: 8px 6px;
        font-size: 13px;
        line-height: 1.4;
    }

    /* 본문 섹션 */
    .policy-page .policywrap .contBody .sectionBlock {
        margin: 50px 0 0 !important;
    }

    .policy-page .policywrap .contBody .sectionBlock:first-of-type {
        margin-top: 30px !important;
    }

    .policy-page .policywrap .contBody .subsectionThis {
        margin-top: 0;
        margin-bottom: 14px;
        padding-bottom: 10px;
        font-size: 18px;
        line-height: 1.5;
        word-break: keep-all;
    }

    .policy-page .policywrap .contBody p {
        margin-bottom: 10px;
        line-height: 1.7;
        word-break: keep-all;
    }

    /* 모바일 표 */
    .policy-page .policywrap .contBody .tableThis {
        display: table;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 14px 0;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .policy-page .policywrap .contBody .tableThis thead,
    .policy-page .policywrap .contBody .tableThis tbody,
    .policy-page .policywrap .contBody .tableThis tr {
        width: auto;
    }

    .policy-page .policywrap .contBody .tableThis th,
    .policy-page .policywrap .contBody .tableThis td {
        min-width: 0;
        padding: 7px 4px;
        font-size: 11px;
        line-height: 1.45;
        letter-spacing: -0.6px;
        white-space: normal;
        word-break: break-all !important;
        overflow-wrap: anywhere;
        vertical-align: middle;
    }

    .policy-page .policywrap .contBody .tableThis th:first-child,
    .policy-page .policywrap .contBody .tableThis td:first-child {
        min-width: 0;
    }

    .policy-page .policywrap .contBody .tableThis p {
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.45;
        letter-spacing: -0.6px;
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    .policy-page .policywrap .contBody .tableThis p:last-child {
        margin-bottom: 0;
    }

    /* 긴 링크 줄바꿈 */
    .policy-page .policywrap .contBody a {
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    /* 브라우저 설정 안내 */
    .policy-page .policywrap .contBody .browserSection {
        margin: 20px 0;
        padding-left: 0;
    }

    .policy-page .policywrap .contBody .policyItem {
        gap: 8px;
    }

    .policy-page .policywrap .contBody .indentText {
        padding-left: 1em;
        text-indent: -1em;
    }
}

/* 작은 모바일 */
@media (max-width: 480px) {
    .policy-page {
        padding: 20px 12px;
    }

    .policy-page .policywrap .hd3 {
        font-size: 22px;
    }

    .policy-page .policywrap .contBody .sentence {
        font-size: 14px;
    }

    /* 아이콘 영역 */
    .policy-page .policywrap .contBody .label {
        min-height: 96px;
        padding: 10px 6px;
    }

    .policy-page .policywrap .contBody .label img {
        max-width: 100px;
    }

    .policy-page .policywrap .contBody .labelTxt {
        min-height: 46px;
        padding: 7px 4px;
        font-size: 12px;
    }

    /* 섹션 제목 */
    .policy-page .policywrap .contBody .subsectionThis {
        font-size: 17px;
    }

    /* 작은 모바일 표 */
    .policy-page .policywrap .contBody .tableThis {
        width: 100%;
        table-layout: fixed;
    }

    .policy-page .policywrap .contBody .tableThis th,
    .policy-page .policywrap .contBody .tableThis td {
        min-width: 0;
        padding: 6px 3px;
        font-size: 10px;
        line-height: 1.4;
        letter-spacing: -0.7px;
        word-break: break-all !important;
        overflow-wrap: anywhere;
    }

    .policy-page .policywrap .contBody .tableThis p {
        margin-bottom: 3px;
        font-size: 10px;
        line-height: 1.4;
        letter-spacing: -0.7px;
    }
}