/* Shared responsive layer. Loaded after page-specific styles. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
*, *::before, *::after { box-sizing: border-box; }
body { min-width: 0; }
img, video, canvas { max-width: 100%; }
input, select, textarea { max-width: 100%; }
input[type="file"] { width: 100%; }
a, button, input, select, textarea { touch-action: manipulation; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand-500, #c74659); outline-offset: 4px;
}
button:disabled { cursor: not-allowed; opacity: .55; }
.container, .content, .main-content, .main-content-area, .main-container,
.mypage-container, .gym-container, .member-info-card, .member-edit-container,
.form-container, .payment-container { min-width: 0; max-width: 100%; }
.content, .main-content { overflow-wrap: anywhere; }
.member-info-card { width: 100%; }
.table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.table-scroll > table { margin-top: 0; }
.pagination, .pageNavi, .page-Navi, #pagination { flex-wrap: wrap; }
.mobile-menu-toggle { display: none; }
.header .menu-item { display: flex; align-items: center; }
.header .submenu-toggle {
  min-width: 32px; min-height: 44px; margin: 0; padding: 0 6px;
  background: transparent; color: var(--brand-900); box-shadow: none;
}
.header .submenu-toggle:hover { background: var(--brand-50); transform: none; }
.header .menu-item.is-open > .submenu {
  display: flex; visibility: visible; opacity: 1; transform: none;
}
.header:not(.navigation-ready) .menu-item:focus-within > .submenu { display: flex; visibility: visible; opacity: 1; transform: none; }
.header.navigation-ready .menu-item:not(.is-open) > .submenu { display: none; }
.header-actions { margin-left: auto; }
.container > .admin-sidebar { flex: 0 0 220px; }
.tab-menu { display: flex; overflow-x: auto; }
.tab-menu .tab { flex: 1 0 auto; text-align: center; }
.gym-info p, .review-content, .inquiry-content { overflow-wrap: anywhere; }
.member-form-table { width: 100%; table-layout: fixed; }
.member-form-table th { width: 105px; text-align: left; }
.member-form-table td { padding: 8px; }
.member-form-table input:not([type="button"]) { width: 100%; }
.mypage-container > .main-content > div, .mypage-container form { min-width: 0; max-width: 100%; }
.history-cards > div { flex-wrap: wrap; }
.history-cards > div > div { min-width: 0; max-width: 100%; }
.history-cards { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; }
.history-cards > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.growth-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; }
.growth-fields > p, .growth-date { grid-column: 1 / -1; }
.growth-fields label { display: grid; gap: 6px; }
.growth-fields input { width: 100%; }
.growth-record-panel { width: 100%; margin-top: 24px; }
.growth-record-panel .recordList { min-width: 520px; }
.growth-record-panel th { background: var(--brand-900); }

@media (max-width: 900px) {
  .header { position: relative; }
  .header .header-container { display: flex; flex-wrap: wrap; width: calc(100% - 32px); padding: 12px 0; gap: 10px; }
  .header #logo { margin-right: auto; }
  .header .mobile-menu-toggle:not([hidden]) {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
    margin: 0; padding: 8px 12px; background: var(--brand-50); color: var(--brand-900); box-shadow: none;
  }
  .header .header-actions { order: 2; width: 100%; justify-content: flex-end; margin: 0; }
  .header .header-primary { order: 3; flex: 0 0 100%; flex-direction: column; align-items: stretch; overflow: visible; gap: 0; }
  .header.navigation-ready:not(.menu-open) .header-primary { display: none; }
  .header .header-primary .menu-item { display: grid; grid-template-columns: 1fr 44px; width: 100%; padding: 6px 0; border-top: 1px solid var(--line); }
  .header .menu-item > a { min-height: 44px; font-size: 16px; }
  .header .submenu { display: flex; position: static; grid-column: 1 / -1; width: 100%; padding: 4px 12px; border: 0; box-shadow: none; transform: none; opacity: 1; visibility: visible; background: var(--surface-soft); }
  .header.navigation-ready .menu-item:not(.is-open) > .submenu { display: none; }
  .header .submenu a { min-height: 44px; }
  .container > .board-sidebar, .container > .sidebar { flex-basis: auto; width: 100%; min-width: 0; }
  .container .sidebar ul { display: flex; gap: 6px; overflow-x: auto; margin: 0; padding: 0; }
  .container .sidebar li { flex: none; }
  .sidebar a { min-height: 44px; }
}

@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  .content, .notice-content { padding: 22px 16px !important; }
  .container, .mypage-container, .main-container { margin-top: 20px; min-height: 0; }
  .mypage-container > .main-content { padding: 24px 16px; width: 100%; }
  .mypage-container > .sidebar, .main-container > .sidebar { padding: 18px 12px; }
  .welcome-box { padding: 18px; }
  .welcome-box > div { min-width: 0; width: 100%; }
  .history-cards > div { flex-direction: column; align-items: stretch !important; }
  .history-cards > div > div { min-width: 0; max-width: 100%; }
  .history-cards input { width: 100% !important; }
  .membership-container, .confirm-container { padding: 18px 12px; }
  .membership-option { flex-wrap: wrap; gap: 12px; padding: 12px; }
  .confirm-item { flex-wrap: wrap; overflow-wrap: anywhere; }
  .member-info-card, .member-edit-container, .form-container, .payment-container { padding: 20px 16px; }
  .member-form-table, .member-info-table:has(input), .member-edit-table { display: block; width: 100%; }
  .member-form-table tbody, .member-form-table tr, .member-form-table th, .member-form-table td,
  .member-info-table:has(input) tbody, .member-info-table:has(input) tr,
  .member-info-table:has(input) th, .member-info-table:has(input) td,
  .member-edit-table tbody, .member-edit-table tr, .member-edit-table th, .member-edit-table td { display: block; width: 100%; }
  .member-form-table th, .member-form-table td { padding: 5px 0; }
  .member-form-table input:not([type="button"]) { width: 100% !important; min-width: 0; }
  .member-form-table input[type="button"] { width: auto !important; }
  .info-table:has(input), .info-table:has(textarea), .notice-write-wrap .tbl:has(input) { display: block; min-width: 0; width: 100%; }
  .info-table:has(input) :is(tbody, tr, th, td), .info-table:has(textarea) :is(tbody, tr, th, td),
  .notice-write-wrap .tbl:has(input) :is(tbody, tr, th, td) { display: block; width: 100% !important; min-width: 0; }
  .info-table input:not([type="checkbox"]):not([type="radio"]), .info-table textarea { width: 100%; }
  .notice-write-wrap .tbl input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; }
  .member-form-table td:has(> p:empty), .member-form-table th:empty { display: none; }
  .member-form-table input, .member-info-table input, .member-edit-table input { max-width: 100%; }
  .member-form-table input[type="button"] { margin-top: 8px; }
  .withdraw-button, button#deleteBtn { position: static; margin-top: 24px; }
  .form-buttons, .form-actions, .member-info-button-wrapper { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .growth-fields { grid-template-columns: 1fr; }
  .growth-fields > p, .growth-date { grid-column: auto; }
  .comment-write { flex-direction: column; align-items: stretch; }
  .comment-write button { width: 100%; }
  .notice-write-wrap .tbl th { width: 76px; padding: 10px 6px; }
  .notice-write-wrap .tbl td { padding: 10px 6px; }
  .note-editor { max-width: 100%; }
  .note-toolbar { display: flex; flex-wrap: wrap; }
  .gym-container { width: calc(100% - 24px); margin: 20px auto; padding: 20px 16px; }
  .gym-header h1 { font-size: 26px; overflow-wrap: anywhere; }
  .gym-search-form { grid-template-columns: minmax(0, 1fr) 88px; }
  .gym-search-form input { grid-column: 1 / -1; }
  .footer-container > div { min-width: 0; overflow-wrap: anywhere; }
  .footer-links { gap: 10px 18px; }
  .site-footer { margin-top: 40px; padding: 32px 0; }
  .login-container { margin: 24px auto; }
  .auth-links, .links { flex-wrap: wrap; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}