/* Shared approved design; calendar date cells and reservation blocks are not controls. */
.symbol-button {
  --symbol-color: var(--accent);
  --symbol-icon-color: var(--symbol-color);
  --symbol-size: 36px;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--symbol-size) + 48px);
  padding-left: calc(var(--symbol-size) + 12px) !important;
  background: linear-gradient(to right, transparent 0, transparent calc(var(--symbol-size) * .5), var(--symbol-color) calc(var(--symbol-size) * .5), var(--symbol-color) 100%) !important;
  border: 0 !important;
  border-radius: 11px;
  color: white !important;
  text-decoration: none;
  vertical-align: middle;
  isolation: isolate;
  height: var(--symbol-size);
  flex-shrink: 0;
  white-space: nowrap;
}
.symbol-button.secondary, .symbol-button.tab, .symbol-button.page-number { --symbol-color: #e4e9f1; --symbol-icon-color: var(--ink); color: var(--ink) !important; }
.symbol-button.danger { --symbol-color: var(--danger); --symbol-icon-color: var(--symbol-color); color: white !important; }
.symbol-button.tab.active, .symbol-button.page-number.active { --symbol-color: var(--accent); --symbol-icon-color: var(--symbol-color); color: white !important; }
/* Match the compact management navigation without enlarging existing small controls. */
.symbol-button:is(.button, .tab):where(:not(.rental-add, .rental-remove, .schedule-remove, .page-number, .modal-close)):where(:not(.admin-nav *, .calendar-head *, .timeline-actions *)) {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 18px;
  font-size: 14px;
  line-height: 20px;
}
.symbol-button::before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  width: var(--symbol-size);
  height: 100%;
  border: calc(var(--symbol-size) * .06) solid var(--symbol-color);
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}
.symbol-button::after {
  content: '';
  position: absolute;
  left: calc(var(--symbol-size) * .25);
  top: 25%;
  width: calc(var(--symbol-size) * .5);
  height: 50%;
  background: var(--symbol-icon-color);
  mask: var(--symbol-image) center / contain no-repeat;
  -webkit-mask: var(--symbol-image) center / contain no-repeat;
  pointer-events: none;
}
.symbol-button:focus-visible { outline: 3px solid rgba(30,94,255,.35); outline-offset: 3px; }
.symbol-button.modal-close {
  --symbol-color: #e4e9f1;
  --symbol-icon-color: var(--ink);
  --symbol-size: 28px;
  position: absolute;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0 !important;
  font-size: 0;
  border-radius: 9px;
}
.symbol-button.reservation-type { --symbol-color: #f7f9fc; --symbol-icon-color: var(--ink); color: var(--ink) !important; display: block !important; }
.reservation-type.symbol-button::before, .reservation-type.symbol-button::after { margin-top: 0; }
.reservation-type.symbol-button:hover { --symbol-color: #eef3ff; }
.symbol-button.reservation-type { min-height: 72px; padding-top: 10px; padding-bottom: 10px; padding-right: 20px; }
.rental-add.symbol-button { --symbol-size: 26px; padding: 3px 14px; }
.rental-row .rental-remove.symbol-button, #monthlyForm .monthly-schedule-row .schedule-remove.symbol-button { --symbol-size: 30px; height: 30px; min-height: 30px; padding: 5px 14px; }
.page-number.symbol-button { min-height: 30px; padding-top: 5px; padding-bottom: 5px; padding-right: 14px; font-size: 13px; line-height: 20px; }
.timeline-actions .symbol-button {
  --symbol-size: 24px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0 !important;
  font-size: 0;
  border-radius: 8px;
}
.staff-timeline-event .timeline-actions { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; gap: 8px; }
.staff-timeline-event .timeline-actions .symbol-button {
  --symbol-size: 30px;
  width: auto;
  min-width: 88px;
  height: 30px;
  padding: 4px 12px 4px 40px !important;
  font-size: 13px;
  line-height: 20px;
  border-radius: 11px;
}
.staff-timeline-event .timeline-actions .symbol-button .button-hit-area { inset: 0; }
.permission-user-list>.permission-user-card>.toolbar>.symbol-button,
#monthlyList .monthly-item-actions>.symbol-button,
.permission-audit-table .audit-delete.symbol-button {
  --symbol-size: 30px;
  width: auto;
  min-width: 88px;
  height: 30px;
  padding: 4px 12px 4px 40px !important;
  font-size: 13px;
  line-height: 20px;
  border-radius: 11px;
}
/* Stable, shared dimensions; never feed measured heights back into text width. */
.symbol-button.reservation-type { --symbol-size: 96px; height: 96px; min-height: 96px; white-space: normal; }
.reservation-type-grid { grid-auto-rows: 1fr; }
.reservation-type.symbol-button > .button-hit-area { display: none; }
.symbol-button .button-hit-area { position: absolute; inset: 0; margin: 0; padding: 0; }
.request-pagination .page-number.symbol-button {
  --symbol-size: 36px; width: 36px; min-width: 36px; height: 36px;
  padding: 0 !important; display: inline-flex !important;
}
.page-number.symbol-button::before, .page-number.symbol-button::after { display: none; }
.page-number.symbol-button { background: var(--symbol-color) !important; }
.calendar-head .symbol-button { --symbol-size: 30px; height: 30px; min-height: 30px; }
.admin-page-header .admin-nav .symbol-button { --symbol-size: 34px; height: 34px; }
@media (max-width: 750px) {
  .admin-page-header .admin-nav .symbol-button { --symbol-size: 40px; height: 40px; white-space: nowrap; }
  .permission-user-card .toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .permission-user-card .toolbar .symbol-button { min-width: 0; width: 100%; }
  .permission-user-card .toolbar .symbol-button:first-child:nth-last-child(3) { grid-column: 1/-1; }
  .symbol-button:where(.rental-add, .rental-remove, .schedule-remove, .modal-close) .button-hit-area {
    top: 50%; bottom: auto; height: 44px; transform: translateY(-50%);
  }
  .timeline-actions .symbol-button .button-hit-area { inset: -10px; }
  .timeline-actions { gap: 22px; }
  .public-header-actions { grid-template-columns: 1fr; gap: 10px; }
  .public-header-actions .symbol-button { width: 100%; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .admin-page-header .admin-nav { grid-template-columns: 1fr; }
  .symbol-button.reservation-type { --symbol-size: 112px; height: 112px; min-height: 112px; }
  .reservation-type strong { font-size: 16px; line-height: 22px; }
  .reservation-type span:not(.button-hit-area) { font-size: 12px; line-height: 1.35; }
}
.admin-nav .symbol-button { padding-right: 12px; }
.admin-page-header .admin-nav .symbol-button { min-height: 34px; padding-top: 8px; padding-bottom: 8px; line-height: 18px; }
.calendar-head .symbol-button { min-height: 30px; padding-top: 6px; padding-bottom: 6px; padding-right: 14px; }
@media (min-width: 751px) and (max-width: 1100px) { .admin-nav { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 750px) {
  .public-header-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .public-header-actions .symbol-button { height: 36px; padding-top: 2px; padding-bottom: 2px; padding-right: 6px; font-size: 12px; line-height: 16px; white-space: normal; }
  .admin-page-header .admin-nav .symbol-button { min-height: 40px; padding-top: 4px; padding-bottom: 4px; line-height: 16px; white-space: normal; }
  .form-actions, .monthly-actions { flex-wrap: wrap; }
  .symbol-button.reservation-type { padding-right: 12px; }
}
@media (max-width: 750px) {
  .public-header-actions { grid-template-columns: 1fr; }
  .public-header-actions .symbol-button { font-size: 13px; white-space: nowrap; }
  .admin-page-header .admin-nav .symbol-button { white-space: nowrap; }
  .request-pagination .button { min-width: 76px; padding-right: 8px; font-size: 12px; }
  .modal-close.symbol-button .button-hit-area { width:44px; left:50%; transform:translate(-50%,-50%); }
}
@media (max-width: 380px) {
  .request-pagination .page-number:not(.active) { display: none !important; }
}
/* Compact booking management controls, including narrow-screen navigation. */
#choosePhoneInquiry strong,#openInquiry strong{font-size:17px;font-weight:700;line-height:1.4}
#choosePhoneInquiry,#openInquiry{font-weight:400}
#choosePhoneInquiry span,#openInquiry span{font-size:13px;font-weight:400;line-height:1.45}
body.booking-requests-page .symbol-button:is(.button,.tab,.page-number):not(.modal-close),
.admin-request .admin-request-actions>.symbol-button {
  --symbol-size: 30px;
  height: 30px;
  min-height: 30px;
  padding: 4px 12px 4px 40px !important;
  font-size: 13px;
  line-height: 20px;
}
body.booking-requests-page .request-pagination .page-number.symbol-button {
  width: 30px;
  min-width: 30px;
  padding: 4px !important;
}
body .admin-page-header .admin-nav .button.symbol-button {
  justify-content: center;
  text-align: center;
  padding-left: calc(var(--symbol-size) + 8px) !important;
  padding-right: 8px !important;
}
.admin-page-header .admin-nav .notification-link .nav-badge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* Five remaining admin links fill the row without a vacant sixth column. */
@media(min-width:751px){body .admin-page-header .admin-nav{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin-inline:auto}body .admin-page-header .admin-nav>.button{flex:1 1 150px;min-width:0}}
/* Nonhyeon: keep logos and page groups on a shared center axis. */
html{scrollbar-gutter:stable both-edges}
body .shell{margin-inline:auto}
body .admin-page-header{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
body .admin-page-header>div:has(.admin-page-logo){width:100%;display:flex;justify-content:center}
body .admin-page-header .admin-page-logo{margin-inline:auto;align-self:center}
body .admin-page-header .admin-nav{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin-inline:auto}
body .admin-page-header .admin-nav>.button{flex:1 1 150px;min-width:0}
body .shell>.top:not(.admin-page-header):has(.admin-welcome){flex-direction:column;align-items:center;text-align:center}
body .top:has(.admin-welcome) .reception-controls{justify-content:center;width:100%}
body .public-calendar-card .calendar-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
body .public-calendar-card .calendar-head>:first-child{justify-self:start}
body .public-calendar-card .calendar-head>h2{justify-self:center}
body .public-calendar-card .calendar-head>:last-child{justify-self:end}
@media(max-width:750px){body .admin-page-header .admin-nav>.button{flex:1 1 calc(50% - 8px)}body .top:has(.admin-welcome) .reception-controls .booking-availability-control{width:auto;max-width:100%}}