/* css/responsive.css
   Responsive overrides: @media 1180px / 900px / 640px (loaded last so they win).
   Split from styles.css (Phase 4, boundary-corrected); linked in source order to preserve the cascade. */
@media (max-width: 1180px) {
  .desktop-nav {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .campus-link,
  .nav-secondary-link {
    display: none;
  }

  /* 상담 CTA는 모바일에서도 헤더에 남긴다 — 우하단 플로팅에서 상담 버튼을
     내렸기 때문에, 여기까지 숨기면 모바일에 상담 진입점이 사라진다. */
  .nav-actions > .btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .hero-grid,
  .service-lens,
  .service-lens__panel,
  .program-layout,
  .diagnosis-layout,
  .field-story-grid,
  .case-showcase,
  .service-hero-grid,
  .approach-grid,
  .campus-panel,
  .headhunt-grid,
  .about-hero-grid,
  .inquiry-status-layout,
  .featured-layout,
  .course-card--large,
  .course-detail-layout,
  .board-policy-panel,
  .visit-best-layout,
  .newsletter-panel,
  .location-grid,
  .founder-grid,
  .timeline-layout {
    /* minmax(0,1fr) 로 둔다. 그냥 1fr 은 최소 크기가 min-content 라, 안에
       지도 패널처럼 잘 안 줄어드는 내용이 있으면 트랙이 컨테이너보다 커진다
       (360px에서 .location-grid 트랙이 351px로 부풀어 화면 밖으로 잘렸다). */
    grid-template-columns: minmax(0, 1fr);
  }

  /* 신청 패널이 본문 아래로 내려가는 폭부터 첫 화면용 CTA를 켠다. */
  .course-detail-quick {
    display: grid;
    gap: 12px;
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface-2);
  }

  .course-detail-quick > div > span {
    color: var(--muted);
    font-size: 12px;
  }

  .course-detail-quick > div > strong {
    display: block;
    margin-top: 2px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
  }

  .course-detail-quick .btn {
    width: 100%;
    min-height: 52px;
  }

  .course-detail-quick .course-cta-note {
    justify-self: center;
  }

  .approach-copy,
  .diagnosis-copy,
  .diagnosis-result,
  .service-process-copy,
  .inquiry-status-form,
  .timeline-copy {
    position: static;
  }

  /* 대표 섹션: 스택 시 flex 단일 컬럼으로 DOM 순서 흐름(grid-area 무시) →
     제목·약력 → 사진·이름 → 회사소개 더보기 */
  .founder-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* 스택 시 미디어(사진+이름)가 컬럼 폭을 채우도록 — align-self:center(데스크탑용)가
     모바일에서 shrink-wrap을 유발해 사진이 한 줄로 찌그러지던 문제 방지 */
  .founder-media {
    align-self: stretch;
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .service-lens {
    height: auto;
    min-height: 0;
    /* 데스크탑 행 고정을 해제 — 모바일은 탭/스테이지가 세로로 쌓여 각자 높이를 가진다 */
    grid-template-rows: none;
  }

  .service-lens__stage {
    overflow: visible;
  }

  .service-lens__panel {
    height: auto;
  }

  .service-lens__tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    grid-auto-columns: minmax(250px, 1fr);
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }

  .service-lens__tabs::-webkit-scrollbar {
    display: none;
  }

  .service-lens__tab {
    min-height: 96px;
  }

  .service-lens__image {
    height: auto;
    min-height: 360px;
    aspect-ratio: 16 / 10;
  }

  .diagnosis-board {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .purpose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-guide-grid--roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .container,
  .container-wide {
    width: min(100% - 32px, 100%);
  }

  .trust-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .trust-stat {
    padding: 22px 16px;
  }

  .topbar__meta {
    display: none;
  }

  .section,
  .hero {
    padding: 64px 0;
  }

  .section--mypage {
    padding-top: 44px;
  }

  .hero h1 {
    font-size: clamp(28px, 4.6vw, 38px);
  }

  .section-title h2,
  .title-row h2,
  .diagnosis-copy h2,
  .field-story-copy h2,
  .approach-copy h2,
  .service-process-copy h2,
  .service-hero h1,
  .page-hero h1,
  .philosophy-section h2,
  .timeline-copy h2,
  .location-grid h2,
  .final-cta h2,
  .visit-best-copy h2,
  .headhunt-grid h2 {
    font-size: 36px;
  }

  .title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-card,
  .service-card:nth-last-child(-n + 2) {
    grid-column: span 12;
  }

  .problem-grid,
  .diagnosis-board,
  .service-output-showcase,
  .service-review-grid,
  .purpose-grid,
  .mypage-shell,
  .mypage-panel-head,
  .mypage-profile-summary,
  .course-guide-grid,
  .course-problem-list,
  .axis-grid,
  .field-gallery,
  .case-grid,
  .diagnostic-grid,
  .process-grid,
  .other-services,
  .values-grid,
  .team-lead-grid,
  .team-area-grid,
  .legacy-gallery,
  .article-grid,
  .article-layout,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-lens__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-lens__content {
    padding: 34px 28px;
  }

  .service-lens__content h3 {
    font-size: 34px;
  }

  .service-lens__image {
    min-height: 320px;
    aspect-ratio: 16 / 10;
  }

  .service-output-item,
  .service-output-item.is-featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .service-diagnosis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 제목 200px 고정 열은 좁아지면 글자가 두세 줄로 접힌다 — 번호 옆에 제목,
     아래에 설명으로 접는다. */
  .service-process-step {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px 18px;
    align-items: start;
  }

  .service-process-step p {
    grid-column: 2;
  }

  .diagnosis-board {
    gap: 16px;
  }

  .program-copy {
    max-width: none;
  }

  .field-story-band {
    padding: 76px 0;
  }

  .field-gallery {
    grid-auto-rows: 220px;
  }

  .axis-flow::before {
    left: 28px;
  }

  .axis-step {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 22px;
  }

  .axis-step > span {
    grid-column: 2;
  }

  .axis-step div {
    grid-column: 2;
  }

  .case-showcase {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-feature__visual {
    min-height: 300px;
  }

  .values-grid,
  .team-area-grid {
    gap: 1px;
  }

  .value-card {
    min-height: 0;
  }

  .value-card p {
    min-height: 0;
  }

  .team-area-grid div {
    padding: 18px 0;
    border-left: 0;
    border-top: 1px solid #2e2b25;
  }

  .team-area-grid div:first-child {
    border-top: 0;
  }

  .team-pool__head,
  .insights-hero-copy,
  .board-hero-copy,
  .filter-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .course-grid,
  .education-hub-grid,
  .visit-program-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .visual-slot--course-large {
    min-height: auto;
  }

  .course-apply-panel {
    position: static;
  }

  .course-player-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-lead-card {
    grid-template-columns: 112px minmax(0, 1fr);
    padding: 24px;
  }

  .timeline-list article {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .process-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .process-card:last-child {
    border-bottom: 0;
  }

  .campus-panel {
    padding: 38px 24px;
  }

  .contact-modal {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-hero {
    padding-top: 72px;
  }

  .article-hero__copy h1 {
    font-size: 38px;
  }

  .article-body {
    font-size: 17px;
    line-height: 1.82;
  }

  .article-body h2 {
    margin-top: 42px;
    font-size: 28px;
    line-height: 1.35;
  }

  .article-body blockquote {
    margin: 28px 0 0;
    padding: 22px 24px;
    font-size: 20px;
    line-height: 1.62;
  }

  .article-cover {
    aspect-ratio: 4 / 3;
  }

  .article-aside {
    position: static;
  }

  .contact-modal__side {
    display: none;
  }

  .contact-form {
    min-height: 0;
  }

  .field-grid,
  .chip-grid,
  .radio-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sticky-cta {
    right: 16px;
    left: 16px;
    bottom: 16px;
  }

  .sticky-row {
    justify-content: flex-end;
  }

  .sticky-card {
    width: min(100%, 330px);
  }

  .legacy-gallery figure {
    min-height: 220px;
  }

  .scroll-popup {
    right: 16px;
    left: 16px;
    bottom: 92px;
    width: auto;
  }

  .visit-best-list li {
    grid-template-columns: 62px minmax(0, 1fr);
    padding-right: 22px;
  }

  .visit-best-list li::after {
    display: none;
  }
}

@media (max-width: 640px) {
  /* 모바일 가독성 하한 12px. 데스크탑의 10~11px 라벨·메타가 폰에서 너무 작았다.
     main 은 #app 이라 ID로 스코프한다 — `main small`(클래스 0개)은
     `.insight-foot small`(클래스 1개) 같은 규칙에 우선순위로 밀린다. */
  #app small,
  #app figcaption,
  #app .badge,
  #app .course-status,
  #app .course-card__category,
  #app .notice-row__category,
  #app .notice-row__pin,
  #app .course-role-card__mark,
  #app .course-problem-row__index,
  #app .headhunt-badge,
  #app .course-chip span,
  #app .filter-row button span,
  #app .visual-slot span,
  #app .team-pool__head span,
  #app .home-branch__card > span,
  #app .team-lead-card b {
    font-size: 12px;
  }

  /* 터치 타깃 최소 44px 확보 — 헤더 로그인·breadcrumb·찜하기가 36/35/39px라
     손가락으로 누르기 빠듯했다. 레이아웃은 그대로 두고 탭 영역만 키운다. */
  .user-auth-link {
    height: 44px;
    padding: 0 10px;
  }

  .course-wishlist-button {
    flex: none;
    width: 44px;
    min-width: 44px;
  }

  .service-diagnosis-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-diagnosis-card,
  .service-process-step {
    padding: 20px;
  }

  /* 필터 칩이 줄바꿈으로 쌓이면 목록이 밀리므로 축별 1줄 가로 스크롤로 둔다. */
  .course-filters__group {
    align-items: center;
  }

  /* 그리드/플렉스 아이템의 기본 min-width:auto 는 "내용보다 작아지지 않음"이라,
     칩 줄이 부모(358px)를 넘어 609px로 부풀고 화면 밖 칩이 잘려 닿지 않았다.
     group(그리드 아이템)과 chips(플렉스 아이템) 양쪽에 0을 줘야 안에서 스크롤된다. */
  .course-filters__group {
    min-width: 0;
  }

  .course-filters__chips {
    min-width: 0;
    flex: 1 1 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .course-filters__chips::-webkit-scrollbar {
    display: none;
  }

  .course-chip {
    flex: none;
  }

  .nav-shell {
    height: 64px;
  }

  .logo small {
    display: none;
  }

  .logo-image {
    height: 32px;
    max-width: 200px;
  }

  .hero h1 {
    font-size: 28px;
  }

  /* 폰 폭에서는 한 줄이 통째로 안 들어간다 — 줄바꿈을 허용한다. */
  .hero-title__line {
    white-space: normal;
  }

  .section-title h2,
  .title-row h2,
  .diagnosis-copy h2,
  .field-story-copy h2,
  .approach-copy h2,
  .service-process-copy h2,
  .campus-panel h2,
  .board-hero-copy h1,
  .visit-best-copy h2,
  .visit-process-head h2,
  .headhunt-grid h2 {
    font-size: 30px;
  }

  .partner-logo-only {
    width: 154px;
    flex-basis: 154px;
    min-height: 78px;
    padding: 14px;
  }

  .partner-logo-only__mark {
    height: 44px;
  }

  .partner-logo-only__mark img {
    max-height: 44px;
  }

  .board-hero-copy h1 {
    max-width: 100%;
    line-height: 1.25;
  }

  .course-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .course-meta small {
    text-align: left;
  }

  .course-catalog-intro {
    padding-top: 56px;
    background: var(--surface-2);
  }

  .title-row--compact {
    margin-top: 38px;
  }

  .course-role-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 116px;
    align-items: center;
    gap: 12px;
    padding: 16px;
  }

  .course-role-card .course-guide-count {
    margin-top: 0;
  }

  .course-guide-copy strong {
    font-size: 18px;
  }

  .course-problem-row {
    grid-template-columns: 34px minmax(0, 1fr) auto 12px;
    gap: 11px;
    padding: 15px;
  }

  .course-problem-row .course-guide-copy strong {
    font-size: 17px;
  }

  .course-guide-count strong {
    font-size: 23px;
  }

  .service-lens {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    width: calc(100% + 32px);
    margin-left: -16px;
  }

  .service-lens__tabs {
    grid-auto-columns: minmax(220px, 82vw);
  }

  .service-lens__tab {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 88px;
    padding: 18px;
  }

  .service-lens__tab-no {
    width: 34px;
    height: 34px;
  }

  .service-lens__content {
    padding: 28px 20px 32px;
  }

  .service-lens__content h3 {
    font-size: 29px;
  }

  .service-lens__content p {
    font-size: 15px;
  }

  .service-lens__image {
    min-height: 240px;
  }

  .service-output-item,
  .service-output-item.is-featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-output-item figure,
  .service-output-item.is-featured figure {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .service-output-item > div,
  .service-output-item.is-featured > div {
    padding: 22px;
  }

  .service-output-item h3,
  .service-output-item.is-featured h3 {
    font-size: 25px;
  }

  .service-review-card__body,
  .service-review-card--text .service-review-card__body {
    min-height: 0;
    padding: 22px;
  }

  .service-review-card__body h3 {
    font-size: 24px;
  }

  .service-review-card--text .service-review-card__body p {
    font-size: 20px;
  }

  .service-process-step {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 22px;
    transform: none;
  }

  .service-process-step.is-active {
    transform: none;
  }

  .service-process-step h3 {
    font-size: 24px;
  }

  .diagnosis-option {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 18px;
  }

  .diagnosis-option__body strong {
    font-size: 18px;
  }

  .diagnosis-result {
    padding: 24px;
  }

  .diagnosis-result > strong {
    font-size: 24px;
  }

  .purpose-card {
    min-height: 0;
    padding: 22px;
  }

  .program-copy h2 {
    font-size: 30px;
  }

  .program-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .program-card img {
    min-height: 190px;
  }

  .field-gallery {
    grid-auto-rows: 190px;
  }

  .field-gallery__item--large {
    grid-row: span 1;
  }

  .axis-step {
    transform: none;
  }

  .axis-step.is-active {
    transform: none;
  }

  .case-feature__body {
    padding: 26px 22px;
  }

  .case-feature__body h3 {
    font-size: 27px;
  }

  .case-strip {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 18px;
  }

  .final-cta--image {
    background-image:
      linear-gradient(180deg, rgba(17, 20, 17, 0.86), rgba(17, 20, 17, 0.72)),
      var(--cta-image);
  }

  .hero .button-row .btn,
  .final-cta .button-row .btn,
  .board-policy-panel .button-row .btn,
  .course-card__actions .btn,
  .course-apply-panel .btn,
  .entry-popup .button-row .btn {
    width: 100%;
  }

  .entry-popup .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entry-popup {
    width: min(100%, 420px);
    max-height: calc(100vh - 24px);
  }

  /* 모바일에서는 카드 여백 없이 화면 폭에 딱 맞춘 스와이프 캐러셀 */
  .entry-popup__carousel {
    padding: 0;
  }

  .entry-popup__carousel .entry-popup-card {
    height: var(--entry-popup-card-height, auto);
    border: none;
    border-radius: 0;
  }

  /* 모바일에서는 좌우 화살표 대신 스와이프 사용 */
  .entry-popup__nav {
    display: none;
  }

  .entry-popup-card__image {
    aspect-ratio: var(--entry-popup-image-ratio);
    border-radius: 0;
  }

  .entry-popup-card__poster {
    flex: none;
    aspect-ratio: var(--entry-popup-poster-ratio);
    width: 100%;
  }

  .entry-popup-card__poster img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
  }

  .entry-popup-card__poster-cta {
    width: calc(100% - 32px);
    margin: auto 16px 16px;
  }

  .entry-popup-card__body {
    flex: 1 1 auto;
    gap: 6px;
    padding: 12px 20px 14px;
  }

  .entry-popup-card h3 {
    font-size: 17px;
    line-height: 1.3;
  }

  .entry-popup-card p {
    font-size: 13px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
  }

  .entry-popup__meta {
    font-size: 11px;
    margin: 0;
  }

  .entry-popup__meta span {
    padding: 4px 7px;
  }

  .entry-popup__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 4px 0 12px;
  }

  .entry-popup__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--line-strong, #d4d4d4);
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
  }

  .entry-popup__dot.is-active {
    background: var(--brand, var(--accent));
    transform: scale(1.3);
  }

  .entry-popup__footer {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 20px 16px;
  }

  .entry-popup__footer .small-check {
    margin-top: 0;
  }

  .metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .micro-strip,
  .class-item {
    display: block;
  }

  .course-card__body,
  .course-card--large .course-card__body {
    padding: 22px;
  }

  .course-card h3,
  .course-card--large h3 {
    font-size: 24px;
  }

  .course-detail-title {
    margin: 12px 0;
    font-size: 24px;
    line-height: 1.26;
    overflow-wrap: anywhere;
  }

  .course-detail-crumb {
    padding-top: 20px;
  }

  .course-detail-section {
    padding-top: 16px;
  }

  .course-detail-lead {
    font-size: 13px;
    line-height: 1.58;
    overflow-wrap: anywhere;
  }

  .course-detail-figure {
    margin-top: 22px;
  }

  .course-detail-quick > div > strong {
    font-size: 24px;
  }

  .course-detail-main .course-body {
    margin-top: 26px;
  }

  .refund-policy-contact {
    grid-template-columns: minmax(0, 1fr);
  }

  .refund-policy-contact .button-row {
    justify-content: stretch;
  }

  .course-apply-panel,
  .education-hub-grid a,
  .visit-program-grid article,
  .visit-best-list li,
  .visit-process-list article {
    padding: 22px;
  }

  .course-apply-panel__price strong {
    font-size: 28px;
  }

  .course-apply-panel dl > div {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .course-detail-block {
    margin-top: 40px;
  }

  .course-detail-block__title {
    font-size: 20px;
  }

  .course-refund-notice {
    padding: 20px;
  }

  .course-refund-notice dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .course-outcome-item {
    padding: 14px 16px;
    font-size: 15px;
  }

  .visit-best-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
  }

  .course-curriculum article,
  .visit-process-list article {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .class-thumb {
    margin-bottom: 10px;
  }

  .modal-backdrop {
    padding: 12px;
  }

  .contact-form {
    padding: 48px 22px 24px;
  }

  .auth-modal {
    padding: 38px 20px 24px;
  }

  .profile-info-form {
    padding: 34px 18px 22px;
  }

  .auth-modal__head h2 {
    font-size: 30px;
  }

  .auth-modal__head p,
  .auth-modal__google {
    font-size: 16px;
  }

  .contact-strip {
    display: grid;
  }

  .brand-card,
  .team-pool,
  .location-list,
  .insight-card--large .insight-card__body {
    padding: 24px;
  }

  .brand-parts,
  .inquiry-status-meta,
  .mypage-course-meta,
  .mypage-payment-details dl,
  .newsletter-form,
  .location-list div,
  .timeline-list article {
    grid-template-columns: minmax(0, 1fr);
  }

  .inquiry-status-card__head,
  .inquiry-status-auth,
  .mypage-course-card__head,
  .mypage-class-card,
  .inquiry-status-reply div {
    align-items: flex-start;
    flex-direction: column;
  }

  .mypage-class-card {
    display: flex;
  }

  .mypage-class-progress,
  .mypage-class-actions {
    width: 100%;
  }

  .mypage-class-actions {
    justify-content: stretch;
  }

  .mypage-class-actions .btn {
    flex: 1 1 160px;
  }

  .inquiry-status-auth .btn {
    width: 100%;
  }

  .mypage-sidebar {
    position: static;
  }

  .mypage-panel {
    min-height: 0;
    padding: 24px;
  }

  .mypage-hero__who strong {
    font-size: 20px;
  }

  .mypage-payment-details {
    flex: 1 1 100%;
  }

  .mypage-course-card__actions .btn,
  .mypage-payment-details summary {
    width: 100%;
    justify-content: center;
  }

  .mypage-empty {
    padding: 32px 20px;
  }

  .mypage-panel-head > strong {
    justify-self: start;
  }

  .team-lead-card {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .team-lead-card h3 {
    margin-top: 4px;
    font-size: 22px;
  }

  .team-lead-card b {
    font-size: 12px;
  }

  .brand-parts {
    gap: 12px;
  }

  .timeline-list article {
    gap: 12px;
    padding-left: 24px;
  }

  .map-panel,
  .visual-slot--map {
    min-height: 260px;
  }

  .visual-slot--map {
    aspect-ratio: 1.35 / 1;
  }

  .visual-slot--map img {
    padding: 10px;
  }

  .article-cover,
  .article-body-image {
    width: calc(100% + 32px);
    margin-right: -16px;
    margin-left: -16px;
    border-radius: 0;
  }

  .article-cover {
    aspect-ratio: auto;
  }

  .article-cover img,
  .article-body-image img {
    width: 100%;
    height: auto;
  }

  .article-body {
    font-size: 16px;
    line-height: 1.8;
  }

  .article-body > * + * {
    margin-top: 22px;
  }

  .article-body h2 {
    margin-top: 34px;
    font-size: 23px;
    line-height: 1.38;
  }

  .article-body blockquote {
    width: calc(100% + 24px);
    margin: 22px -12px 0;
    padding: 18px 18px 18px 20px;
    border-left-width: 3px;
    border-radius: 0 8px 8px 0;
    font-size: 16px;
    line-height: 1.68;
  }

  .site-footer {
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-action-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 32px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    background:
      linear-gradient(180deg, rgba(23, 23, 19, 0), rgba(23, 23, 19, 0.92) 32%, var(--ink) 72%);
    opacity: 1;
    transition:
      bottom 260ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 180ms ease;
    pointer-events: none;
  }

  .mobile-action-dock.is-tucked {
    bottom: calc(-132px - env(safe-area-inset-bottom, 0px));
    opacity: 0;
  }

  .mobile-action-dock.is-tucked .sticky-cta,
  .mobile-action-dock.is-tucked .ai-chat {
    pointer-events: none;
  }

  .mobile-action-dock .sticky-cta,
  .mobile-action-dock .ai-chat {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    pointer-events: auto;
  }

  .mobile-action-dock .ai-chat {
    order: 1;
    flex: 0 0 auto;
  }

  .mobile-action-dock .sticky-cta {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    justify-items: stretch;
  }

  .sticky-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
    width: 100%;
  }

  .sticky-toggle {
    display: inline-flex;
  }

  .sticky-row .btn {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    font-size: 13px;
    box-shadow: var(--shadow-lg);
  }

  .kakao-fab {
    width: 52px;
    height: 52px;
    font-size: 10px;
  }

  .sticky-card {
    position: absolute;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: min(330px, calc(100vw - 24px));
  }

  body.is-chat-open {
    overflow: hidden;
  }

  .ai-chat.is-open {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: block;
    overflow: hidden;
  }

  .ai-chat__toggle {
    width: 52px;
    height: 52px;
  }

  .ai-chat.is-open .ai-chat__toggle {
    display: none;
  }

  .ai-chat__panel {
    position: fixed;
    top: var(--chat-viewport-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: var(--chat-viewport-height, 100dvh);
    max-height: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .ai-chat__head {
    padding: calc(16px + env(safe-area-inset-top)) 18px 16px;
  }

  .ai-chat__head span {
    font-size: 11px;
  }

  .ai-chat__head strong {
    font-size: 23px;
  }

  .ai-chat__head button {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .ai-chat__messages {
    min-height: 0;
    max-height: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px;
  }

  .ai-message {
    max-width: 92%;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.68;
  }

  .ai-message--bot {
    max-width: 94%;
  }

  .ai-message__paragraph + .ai-message__paragraph,
  .ai-message__paragraph + .ai-message__list,
  .ai-message__list + .ai-message__paragraph {
    margin-top: 10px;
  }

  .ai-message__list {
    gap: 8px;
    padding-left: 1.3rem;
  }

  .ai-chat__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 12px 16px;
    background: var(--surface);
  }

  .ai-chat.is-keyboard-open .ai-chat__chips,
  .ai-chat.is-open:focus-within .ai-chat__chips {
    display: none;
  }

  .ai-chat__chips button {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-align: left;
    white-space: normal;
  }

  .ai-chat__form {
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
  }

  .ai-chat__form input {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px;
  }

  .ai-chat__form button {
    min-width: 62px;
    font-size: 14px;
  }
}

@media (max-width: 1180px) {
  /* 컨설팅 영역 5칸은 좁아지면 3칸 → 모바일 1칸으로 */
  .practice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .home-branch {
    grid-template-columns: minmax(0, 1fr);
  }

  .practice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-branch__card {
    padding: 26px 22px;
  }

  .home-branch__card strong {
    font-size: 22px;
  }
}

@media (max-width: 640px) {
  .practice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  /* 배지·제목·날짜 3열은 좁아지면 제목 칸이 먼저 뭉개진다 — 날짜를 배지 옆으로. */
  .notice-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    padding: 20px;
  }

  .notice-row__body {
    grid-column: 1 / -1;
  }

  .notice-row__date {
    text-align: right;
  }
}

@media (max-width: 1180px) {
  .headhunt-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .headhunt-timeline-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .headhunt-value-grid,
  .headhunt-signup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .headhunt-timeline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .headhunt-signup-head h2,
  .headhunt-timeline-title {
    font-size: 30px;
  }

  .headhunt-signup-card {
    padding: 26px;
  }

  .headhunt-signup-card strong {
    font-size: 24px;
  }
}

@media (max-width: 640px) {
  .headhunt-timeline-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .headhunt-signup-card .btn {
    width: 100%;
  }
}

/* ── 모바일 터치·가독성 보정 (손가락 기준 40px, 최소 글자 11px) ───────────── */
@media (max-width: 900px) {
  /* 푸터 메뉴는 14px 글자에 패딩이 없어 높이가 22px뿐이었다. */
  .footer-grid a,
  .footer-grid button {
    min-height: 40px;
    display: flex;
    align-items: center;
    margin-top: 2px;
  }

  /* 브레드크럼은 inline 이라 높이가 글자 그대로(14px)였다. 레이아웃을 밀지 않게
     패딩만큼 음수 마진으로 되돌리고 터치 영역만 넓힌다. */
  .breadcrumb a {
    display: inline-block;
    padding: 14px 6px;
    margin: -14px -6px;
  }

  /* 카드 주 CTA가 36px이라 손가락으로 누르기 빠듯했다. */
  .course-card__actions .btn,
  .course-grid--paged .course-card__actions .btn {
    min-height: 44px;
    font-size: 14px;
  }

  /* 10px은 폰에서 읽기 어렵다. 모바일 하한 12px 기준에 맞춘다. */
  .other-card small,
  .legacy-gallery figcaption,
  .brand-parts small,
  .value-card small {
    font-size: 12px;
  }

  /* 카드 제목 링크는 폰에서 유일한 상세 진입점이라 줄 높이만큼만으론 좁다. */
  .course-card h3 a,
  .notice-row__body h2 a {
    display: inline-block;
    padding: 4px 0;
  }
}

@media (max-width: 900px) {
  .courses-head {
    padding: 28px 0 22px;
  }

  .courses-head h1 {
    font-size: 28px;
  }

  .course-results-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}