/**
 * HR ZIP — 공개 페이지 공통 반응형
 * Desktop ≥1200 / Tablet 768–1199 / Mobile <768 / Small ≤480
 * 페이지별 동일 규칙 반복 금지. 이 파일이 마지막에 로드되어야 한다.
 */

/* —— Shared tokens —— */
@media (max-width: 1199px) {
  :root {
    --page-pad-x: 24px;
    --touch-min: 44px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-pad-x: 16px;
    --header-h: 64px;
    --hero-min-h: 0px;
    --hero-lead-min-h: 0px;
    --hero-pad-top: 18px;
    --hero-pad-bottom: 18px;
    --hero-h1-size: clamp(26px, 7.2vw, 30px);
    --hero-lead-size: 14px;
    --search-max: 100%;
    --search-ph-size: 14px;
    --main-pad-top: 16px;
    --main-pad-bottom: 28px;
    --section-gap: 12px;
  }
}

@media (max-width: 480px) {
  :root {
    --page-pad-x: 16px;
    --hero-h1-size: 26px;
  }
}

/* ============================================================
   Header — tablet/mobile: 로고 | 쪽지·알림·프로필·햄버거
   ============================================================ */
@media (max-width: 1199px) {
  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  .header__inner > .logo {
    min-width: 0;
    flex: 0 1 auto;
  }

  .header__inner > .nav {
    display: none;
  }

  .header__inner > .nav.is-open {
    display: flex;
  }

  .header__actions {
    margin-left: auto;
    gap: 6px;
    flex: 0 0 auto;
  }

  .header__member {
    gap: 4px;
  }

  .header .btn {
    min-height: 36px;
  }
}

@media (max-width: 767px) {
  .header .logo__mark {
    font-size: 24px;
  }

  .header__member--guest .btn--ghost,
  .header__member--guest .btn--primary {
    display: inline-flex;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .header__member--checking,
  .header__member--error {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .header__member--guest .btn--ghost {
    display: none;
  }

  .header__actions {
    gap: 4px;
  }
}

/* ============================================================
   Hero — 공통. 페이지 override 금지
   ============================================================ */
@media (max-width: 767px) {
  .page-hero {
    min-height: 0;
    padding-top: var(--hero-pad-top);
    padding-bottom: var(--hero-pad-bottom);
  }

  .page-hero__title,
  .page-hero .page-hero__title {
    min-height: 0;
    font-size: var(--hero-h1-size);
    line-height: 1.3;
  }

  .page-hero__lead,
  .page-hero .page-hero__lead {
    min-height: 0;
    font-size: var(--hero-lead-size);
  }

  .page-hero__search,
  .page-hero form.page-hero__search,
  .hero .search,
  .hero form.search {
    width: 100%;
    max-width: 100%;
  }

  .page-hero__input,
  .page-hero__search input[type="search"],
  .page-hero__search input[name="q"],
  .hero .search input {
    padding-left: 16px;
    padding-right: 58px;
    font-size: var(--search-ph-size);
  }

  .page-hero__search--clear .page-hero__input,
  .page-hero__search--clear input[type="search"] {
    padding-right: 96px;
  }

  .hero h1 {
    font-size: clamp(26px, 7.2vw, 32px);
  }

  .hero__lead {
    min-height: 0;
    font-size: 14px;
  }
}

/* ============================================================
   Typography / buttons / forms
   ============================================================ */
@media (max-width: 767px) {
  .section__head h2,
  .tools-board__head h2,
  .mp-panel__head h1,
  .msg-list-panel__head h1,
  .login-card__head h2,
  .signup-promo h1 {
    font-size: clamp(20px, 5.5vw, 24px);
  }

  button,
  .btn,
  .icon-btn,
  .hrzip-filter-toggle,
  .hrzip-filter-select,
  .hrzip-filter-reset,
  .page-size select,
  .pagination button {
    min-height: 40px;
  }

  .icon-btn {
    min-width: 40px;
  }

  .ask-fab,
  .board-write,
  .news-write,
  .prec-write,
  .signup-submit,
  .login-card .btn--primary,
  .tools-suggest a {
    min-height: var(--touch-min, 44px);
  }

  .signup__inner,
  .login-signup,
  .field-row,
  .form-grid,
  .write-grid,
  .contract-grid,
  .tools-form,
  .bw-grid {
    grid-template-columns: 1fr;
  }

  input,
  select,
  textarea {
    max-width: 100%;
  }
}

/* ============================================================
   List pages — sidebar 재배치
   Tablet: 본문 우선 1열, 위젯은 아래
   Mobile: Q&A/게시판 지정 순서 + 카테고리 chip
   ============================================================ */
@media (max-width: 1199px) {
  .qna-main__inner,
  .board-main__inner,
  .news-main__inner,
  .forms-main__inner,
  .prec-main__inner,
  .tools-main__inner,
  .search-main__inner,
  .msg-main__inner,
  .mp-main__inner,
  .detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .qna-widgets,
  .board-side,
  .news-side,
  .forms-side,
  .mp-side,
  .detail-side,
  .qna-filterbar,
  .news-filterbar,
  .forms-filterbar,
  .board-filterbar,
  .prec-filterbar,
  .tools-filterbar {
    position: static;
  }
}

@media (max-width: 767px) {
  .qna-main__inner,
  .board-main__inner,
  .news-main__inner,
  .forms-main__inner {
    display: flex;
    flex-direction: column;
  }

  .qna-widgets,
  .board-side,
  .news-side,
  .forms-side {
    display: contents;
  }

  .page-qna .expert-card {
    order: 1;
  }

  .page-qna .qna-filters {
    order: 2;
  }

  .page-qna .qna-list-panel {
    order: 3;
  }

  .page-qna .qna-widgets .widget,
  .page-qna .hz-top5 {
    order: 4;
  }

  .page-board .board-write {
    order: 1;
  }

  .page-board .board-nav {
    order: 2;
  }

  .page-board .board-list-panel {
    order: 3;
  }

  .page-board .board-top,
  .page-board .hz-top5 {
    order: 4;
  }

  .page-news .news-filters {
    order: 1;
  }

  .page-news .news-list-panel {
    order: 2;
  }

  .page-news .news-side .side-box,
  .page-news .hz-top5 {
    order: 3;
  }

  .page-forms .forms-filters {
    order: 1;
  }

  .page-forms .forms-list-panel {
    order: 2;
  }

  .page-forms .forms-side .side-box,
  .page-forms .side-cta {
    order: 3;
  }

  /* 카테고리 → horizontal chips */
  .qna-filters,
  .news-filters,
  .forms-filters,
  .prec-filters,
  .board-nav,
  .tools-catlist,
  .msg-nav {
    padding: 12px;
  }

  .qna-filters h2,
  .news-filters h2,
  .forms-filters h2,
  .prec-filters h2,
  .board-nav h2,
  .msg-nav h2 {
    margin-bottom: 8px;
  }

  .cat-list,
  .board-nav__list,
  .tools-catlist,
  .msg-nav__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cat-list::-webkit-scrollbar,
  .board-nav__list::-webkit-scrollbar,
  .tools-catlist::-webkit-scrollbar,
  .msg-nav__list::-webkit-scrollbar {
    display: none;
  }

  .cat-list li,
  .board-nav__list a,
  .tools-catlist button,
  .msg-nav__list a {
    flex: 0 0 auto;
  }

  .cat-list button,
  .board-nav__list a,
  .tools-catlist button,
  .msg-nav__list a {
    width: auto;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #e4eaf2;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    white-space: nowrap;
  }

  .cat-list button.is-on,
  .board-nav__list a.is-on,
  .tools-catlist button.is-on,
  .msg-nav__list a.is-on {
    box-shadow: none;
  }

  .expert-card {
    border-radius: 12px;
  }

  .expert-card div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
  }

  .expert-card p {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }

  .expert-card a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--navy-deep);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
  }
}

/* ============================================================
   Tables → cards (목록 테이블을 360에 억지로 넣지 않음)
   ============================================================ */
@media (max-width: 767px) {
  .qna-table-wrap,
  .board-table-wrap,
  .forms-table-wrap,
  .prec-table-wrap,
  .mp-table-wrap {
    overflow: visible;
  }

  .qna-table,
  .board-table,
  .forms-table,
  .prec-table,
  .mp-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
  }

  .qna-table thead,
  .board-table thead,
  .forms-table thead,
  .prec-table thead,
  .mp-table thead {
    display: none;
  }

  .qna-table tbody,
  .board-table tbody,
  .forms-table tbody,
  .prec-table tbody,
  .mp-table tbody {
    display: block;
  }

  .qna-table tbody tr,
  .board-table tbody tr,
  .forms-table tbody tr,
  .prec-table tbody tr,
  .mp-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 14px 14px 12px;
    margin: 0;
    background: #fff;
    border: 1px solid var(--line, #e6ebf2);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(28, 55, 90, 0.04);
  }

  .qna-table tbody tr:hover,
  .board-table tbody tr:hover,
  .forms-table tbody tr:hover,
  .prec-table tbody tr:hover,
  .mp-table tbody tr:hover,
  .qna-table tbody tr.is-pin,
  .board-table tbody tr.is-pin {
    background: #fff;
  }

  .qna-table th,
  .qna-table td,
  .board-table th,
  .board-table td,
  .forms-table th,
  .forms-table td,
  .prec-table th,
  .prec-table td,
  .mp-table th,
  .mp-table td {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    text-align: left !important;
    overflow: visible;
    white-space: normal;
  }

  .qna-table .col-check,
  .board-table .col-check,
  .forms-table .col-check,
  .mp-table .col-check,
  .prec-table .col-no {
    display: none;
  }

  .qna-table .col-cat,
  .board-table .col-cat,
  .forms-table .col-cat,
  .prec-table .col-type {
    grid-column: 1 / -1;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef3fb;
    color: #3b5b8c;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
  }

  .qna-table .col-title,
  .board-table .col-title,
  .forms-table .col-name,
  .forms-table .col-title,
  .prec-table .col-title,
  .mp-table .col-title {
    grid-column: 1 / -1;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.4;
  }

  .qna-table .qna-title,
  .board-table .board-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .qna-table .qna-title a,
  .board-table .col-title a,
  .prec-table .col-title a,
  .mp-table .col-title a {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-weight: 700;
  }

  .board-table .col-title .b-tag {
    display: none;
  }

  .qna-table .col-author,
  .board-table .col-author,
  .forms-table .col-type,
  .prec-table .col-author,
  .mp-table .col-author {
    grid-column: 1;
    display: inline;
    color: #64748b;
    font-size: 12.5px;
  }

  .qna-table .col-date,
  .board-table .col-date,
  .forms-table .col-date,
  .prec-table .col-date,
  .mp-table .col-date {
    grid-column: 2;
    justify-self: end;
    color: #64748b;
    font-size: 12.5px;
  }

  .qna-table .col-author::after,
  .board-table .col-author::after,
  .prec-table .col-author::after {
    content: " ·";
    color: #94a3b8;
  }

  .qna-table .col-views,
  .board-table .col-view,
  .board-table .col-like,
  .board-table .col-reply,
  .prec-table .col-view,
  .prec-table .col-like,
  .mp-table .col-view,
  .mp-table .col-reply,
  .forms-table .col-file {
    grid-column: auto;
    display: inline;
    color: #8b93a0;
    font-size: 12px;
  }

  .qna-table .col-views::before {
    content: "조회 ";
  }

  .board-table .col-view::before,
  .prec-table .col-view::before,
  .mp-table .col-view::before {
    content: "조회 ";
  }

  .board-table .col-like::before,
  .prec-table .col-like::before {
    content: "좋아요 ";
  }

  .board-table .col-reply::before,
  .mp-table .col-reply::before {
    content: "댓글 ";
  }

  .qna-table .col-views,
  .board-table .col-view,
  .board-table .col-like,
  .board-table .col-reply,
  .prec-table .col-view,
  .prec-table .col-like {
    grid-row: 5;
  }

  .qna-table tr.content-empty-row,
  .board-table tr.content-empty-row,
  .prec-table tr.content-empty-row,
  .mp-table tr.content-empty-row,
  .forms-table tr.content-empty-row {
    display: block;
    padding: 36px 16px;
    text-align: center;
  }

  .qna-table tr.content-empty-row td,
  .board-table tr.content-empty-row td,
  .prec-table tr.content-empty-row td,
  .mp-table tr.content-empty-row td,
  .forms-table tr.content-empty-row td {
    display: block;
    width: 100%;
  }
}

/* ============================================================
   Grid / cards
   ============================================================ */
@media (max-width: 1199px) {
  .tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .boards__grid {
    grid-template-columns: 1fr 1fr;
  }

  .guide-cards,
  .myhr-banner__inner,
  .tools-bottom__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .tools-grid,
  .tool-grid {
    grid-template-columns: 1fr 1fr;
  }

  .boards__grid,
  .boards__grid .panel:last-child,
  .news-item,
  .result-list,
  .guide-cards {
    grid-template-columns: 1fr;
  }

  .tool-card,
  .news-item,
  .result-item,
  .file-card {
    min-width: 0;
    max-width: 100%;
  }

  .news-item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .news-item__thumb {
    width: 72px;
    height: 72px;
  }

  .myhr-banner__inner {
    margin-left: var(--page-pad-x);
    margin-right: var(--page-pad-x);
    padding: 20px 16px;
  }
}

@media (max-width: 480px) {
  .tool-card strong,
  .tool-card__text strong {
    font-size: 13px;
  }

  .tool-card > span:last-child,
  .tool-card__text small {
    font-size: 11.5px;
  }
}

/* ============================================================
   Search results
   ============================================================ */
@media (max-width: 767px) {
  .hrzip-filter-toggle,
  .search-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  .hrzip-filter-controls {
    display: none;
    flex-direction: column;
    align-items: stretch;
  }

  .hrzip-filter-controls.is-open {
    display: flex;
  }

  .hrzip-filter-select,
  .hrzip-filter-date,
  .hrzip-filter-reset {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .search-tabs {
    gap: 0;
  }

  .search-tabs button {
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }
}

/* ============================================================
   Messages — 목록 → 상세 전환
   ============================================================ */
@media (max-width: 767px) {
  .msg-back {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  body:not(.msg-chat-open) .msg-chat {
    display: none;
  }

  body.msg-chat-open .msg-list-panel,
  body.msg-chat-open .msg-nav {
    display: none;
  }

  .msg-list-panel,
  .msg-chat {
    min-height: min(68vh, 560px);
  }
}

/* ============================================================
   Detail / write / mypage / auth
   ============================================================ */
@media (max-width: 767px) {
  .question-card,
  .answer-card,
  .comment-card,
  .bd-article,
  .form-detail,
  .login-card,
  .signup-card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .question-card__top,
  .question-card__actions,
  .mp-panel__head,
  .list-panel-head,
  .news-list-panel__head,
  .prec-list-panel__head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .mp-side {
    grid-template-columns: 1fr;
  }

  .signup-promo h1 {
    font-size: clamp(26px, 7vw, 30px);
  }
}

/* ============================================================
   Promo banner — 모바일에서 축소
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --jsl-promo-h: 58px;
    --jsl-promo-inset: 10px;
  }

  .jsl-promo {
    width: calc(100% - 20px);
    height: var(--jsl-promo-h);
    gap: 8px;
    padding: 0 8px 0 10px;
    border-radius: 16px;
  }

  .jsl-promo__divider,
  .jsl-promo__name,
  .jsl-promo__desc,
  .jsl-promo__copy {
    display: none;
  }

  .jsl-promo__logo {
    width: 32px;
    height: 32px;
  }

  .jsl-promo__cta {
    height: 34px;
    padding: 0 12px;
    font-size: 12.5px;
  }

  .jsl-promo__cta-label {
    display: none;
  }

  .jsl-promo__cta::after {
    content: "문의";
  }

  .jsl-promo__close {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  :root {
    --jsl-promo-h: 52px;
  }
}

/* ============================================================
   Overflow / media / footer
   ============================================================ */
@media (max-width: 767px) {
  .footer .footer__inner,
  .qna-footer .footer__inner,
  .mp-footer .footer__inner,
  .prec-footer .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  video,
  iframe,
  embed,
  object,
  table {
    max-width: 100%;
  }

  .hero__visual,
  .qna-hero__visual,
  .tools-hero__visual,
  .forms-hero__visual,
  .news-hero__visual,
  .prec-hero__visual,
  .board-hero__visual,
  .search-hero__visual {
    display: none;
  }
}

/* ============================================================
   Admin — hamburger drawer + 테이블 가로스크롤
   ============================================================ */
@media (max-width: 1199px) {
  .admin {
    grid-template-columns: 1fr;
  }

  .admin .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 40;
    width: 260px;
    height: 100%;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }

  body.sidebar-open .admin .sidebar,
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .admin .sidebar-backdrop,
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 30;
  }

  .sidebar-backdrop[hidden] {
    display: none;
  }

  .sidebar-toggle {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
  }

  .admin .topbar,
  .admin .dashboard {
    padding-left: 16px;
    padding-right: 16px;
  }

  .admin table,
  .admin-table,
  .members-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) {
  .admin .stat-grid,
  .admin .mid-grid,
  .admin .bottom-grid,
  .admin .side-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .admin .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
}