/* Hand-maintained styles. Load after base CSS; never use as SCSS output. */

/* Hand-maintained header styles. Load after style.css; do not generate from SCSS. */
.gnb .gnb-menu-label { font: inherit; color: inherit; }
.gnb .gnb-menu-icon,
.gnb .gnb-menu-toggle,
.gnb .gnb-drawer,
.gnb .gnb-drawer-backdrop { display: none; }
.gnb [hidden] { display: none !important; }

/* Preserve the original desktop header dimensions and typography. */
@media (min-width: 1480px) {
  .gnb { height:85px; padding:0 45px; column-gap:55px; }
  .gnb > .menu > li > button { font-size:20px; }
}

@media (max-width: 1479.98px) {
  .gnb {
    position: relative;
    gap: calc(55px - 43px * var(--gnb-fit, 0));
    padding-inline: calc(45px - 29px * var(--gnb-fit, 0));
  }
  .gnb > .menu { flex:1; min-width:0; width:auto; }
  .gnb > .menu > li { flex-shrink:0; padding-inline:calc(25px - 17px * var(--gnb-fit, 0)); }
  .gnb > .menu > li:first-child { padding-left:0; }
  .gnb > .menu > li:last-child { padding-right:0; }
  .gnb > .menu > li > button { font-size:calc(20px - 4px * var(--gnb-fit, 0)); white-space:nowrap; }
  .gnb.gnb-compact > .info { display:none; }
  .gnb.gnb-compact .gnb-menu-toggle {
    display:block; flex-shrink:0; margin-left:auto; width:44px; height:44px;
    padding:10px; border:1px solid var(--border); border-radius:10px;
    background:#fff; color:#393342;
  }
  .gnb .gnb-menu-toggle > span { display:block; height:2px; margin:4px 0; background:currentColor; }
  .gnb.gnb-compact .gnb-drawer-backdrop:not([hidden]) {
    display:block; position:fixed; inset:0; z-index:101; background:rgb(24 20 34 / 45%);
  }
  .gnb.gnb-compact .gnb-drawer:not([hidden]) {
    box-sizing:border-box; display:flex; flex-direction:column; position:fixed;
    inset:0 0 0 auto; z-index:102; width:min(86vw, 350px);
    padding:20px 18px; background:#fff; color:#302c3b;
    box-shadow:-12px 0 36px rgb(24 20 34 / 15%);
  }
  .gnb .gnb-drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-shrink:0; }
  .gnb .gnb-drawer-head strong { font-size:18px; }
  .gnb .gnb-drawer-close { width:36px; height:36px; border:0; border-radius:12px; background:#f5f5f7; color:#827d8d; font-size:28px; }
  .gnb .gnb-drawer-user { display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:16px; border:1px solid #e3d7ff; border-radius:17px; background:linear-gradient(120deg,#f7f3ff,#fff); flex-shrink:0; }
  .gnb .gnb-drawer-avatar { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; border-radius:13px; background:#803fe1; color:#fff; font-size:20px; font-weight:700; }
  .gnb .gnb-drawer-name { display:block; font-size:14px; overflow-wrap:anywhere; }
  .gnb .gnb-drawer-user small { display:block; margin-top:4px; color:#8a8496; font-size:11px; }
  .gnb.gnb-compact .gnb-drawer .menu {
    display:block; position:static; flex:1; min-height:0; width:100%; height:auto;
    max-width:none; max-height:none; padding:0; margin:0; border:0; border-radius:0;
    box-shadow:none; overflow-y:auto; overscroll-behavior:contain;
  }
  .gnb.gnb-compact .gnb-drawer .menu li { box-sizing:border-box; display:block; position:relative; width:100%; min-width:0; height:auto; padding:0; border:0; }
  .gnb.gnb-compact .gnb-drawer .menu li > button {
    box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;
    width:100%; max-width:100%; min-height:46px; margin:0; padding:10px;
    border:0; border-radius:12px; background:transparent; color:#393342;
    font-size:14px; font-weight:600; text-align:left; white-space:normal; cursor:pointer;
  }
  .gnb.gnb-compact .gnb-drawer .menu > li > button { display:grid; grid-template-columns:28px minmax(0,1fr) 12px; gap:10px; }
  .gnb.gnb-compact .gnb-drawer .gnb-menu-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#f5efff; color:#803fe1; }
  .gnb.gnb-compact .gnb-drawer .gnb-menu-icon svg { width:18px; height:18px; color:inherit; }
  .gnb.gnb-compact .gnb-drawer .menu li.has-submenu > button::after { content:'›'; margin:0; color:#93899f; font-size:19px; }
  .gnb.gnb-compact .gnb-drawer .menu li.accordion-open > button::after { transform:rotate(90deg); }
  .gnb.gnb-compact .gnb-drawer .menu li.accordion-open > button,
  .gnb.gnb-compact .gnb-drawer .menu button:hover { background:#f5f0ff; color:#803fe1; }
  .gnb.gnb-compact .gnb-drawer .menu li > ul {
    display:none; position:static; width:100%; transform:none; margin:0;
    border:0; border-radius:0; box-shadow:none; background:transparent;
  }
  .gnb.gnb-compact .gnb-drawer .menu li.accordion-open > ul { display:block; }
  .gnb.gnb-compact .gnb-drawer .menu > li > ul { padding:3px 0 8px 25px; }
  .gnb.gnb-compact .gnb-drawer .menu > li > ul > li > ul { padding-left:10px; }
  .gnb.gnb-compact .gnb-drawer .menu > li > ul > li > button { font-size:13px; }
  .gnb.gnb-compact .gnb-drawer .menu > li > ul > li ul li button { font-size:13px; font-weight:400; }
  .gnb .gnb-drawer-footer { flex-shrink:0; padding-top:14px; }
  .gnb .gnb-drawer-footer button { display:block; width:100%; min-height:44px; padding:10px; border:0; border-top:1px solid #eee8f7; background:#fff; color:#82788e; text-align:left; font-size:14px; }
}

@media (max-width:600px) {
  .gnb { gap:8px; padding-inline:12px; }
  .gnb .logo img { height:38px; }
}

/* Reservation styles maintained independently of SCSS output. */
.container .conditions .reservation .calendar > ul > li:not(.yoil) {
    cursor: pointer;
}

.container .conditions .reservation .calendar > ul > li .day {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: min(60px, 100%);
    height: 60px;
    margin-inline: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.container .conditions .reservation .calendar > ul > li .day.today {
    background: var(--color1_bg, #f4f1ff);
    color: var(--color1, #803fe1);
    font-weight: 700;
}

.container .conditions .reservation .calendar > ul > li.active .day {
    background: var(--color1, #803fe1);
    color: #fff;
    font-weight: 700;
    opacity: 1;
}

.container .conditions .reservation .calendar:not(.other-date-selected) > ul > li .day.today {
    background: var(--color1, #803fe1);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .container .conditions .reservation .calendar > ul > li .day { transition: none; }
}

/* Reservation detail: customer/vehicle lookup panel. */
#reservation_layer .reservation-customer-search {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #e3d7ff;
    border-radius: 8px;
    background: #faf8ff;
}

#reservation_layer .customer-lookup-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

#reservation_layer .customer-lookup-controls .customer-keyword {
    flex: 1;
    width: 0;
    min-width: 0;
    height: 36px;
    background: #fff;
}

#reservation_layer .customer-lookup-btn {
    flex: 0 0 64px;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 5px;
    background: var(--color1, #803fe1);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

#reservation_layer .customer-lookup-results {
    display: grid;
    gap: 6px;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    color: #666;
}

#reservation_layer .customer-lookup-results:not(:empty) {
    margin-top: 10px;
}

#reservation_layer .customer-lookup-results > button {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid #e3d7ff;
    border-radius: 5px;
    background: #fff;
    color: #333;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

#reservation_layer .customer-lookup-results > button:hover,
#reservation_layer .customer-lookup-results > button:focus-visible {
    border-color: var(--color1, #803fe1);
    background: var(--color1_bg, #f4f1ff);
}

/* Shared PC/mobile customer lookup table. */
#reservation-form #reservation-customer-search {
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #e3d7ff;
    border-radius: 10px;
    background: #faf8ff;
}

#reservation-customer-search > .reservation-input-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px;
    align-items: stretch;
    gap: 8px;
}

#reservation-form #reservation-customer-keyword {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #fff;
    font-size: 14px;
}

#reservation-customer-search #reservation-customer-search-button {
    width: 60px;
    min-height: 42px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: #803fe1;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

#reservation-customer-results:not(:empty) {
    margin-top: 10px;
    border-radius: 5px;
}

#reservation_layer .customer-lookup-results,
#reservation-customer-results {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

:is(#reservation_layer, #reservation-customer-results) .reservation-customer-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
}

:is(#reservation_layer, #reservation-customer-results) .reservation-customer-table th,
:is(#reservation_layer, #reservation-customer-results) .reservation-customer-table td {
    padding: 4px 8px;
    border: 1px solid #e5def0;
    text-align: center;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
}

:is(#reservation_layer, #reservation-customer-results) .reservation-customer-table th {
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f1ff;
    color: #5d2ca5;
    font-weight: 700;
}

:is(#reservation_layer, #reservation-customer-results) .reservation-customer-table tbody tr {
    cursor: pointer;
}

:is(#reservation_layer, #reservation-customer-results) .reservation-customer-table tbody tr:hover,
:is(#reservation_layer, #reservation-customer-results) .reservation-customer-table tbody tr:focus-within {
    background: #f8f5ff;
}

:is(#reservation_layer, #reservation-customer-results) .reservation-customer-table td button {
    display: block;
    width: 100%;
    min-height: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #803fe1;
    text-align: center;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Desktop notice controls */

.notice-hide-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.notice-hide-controls button { padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; background: #fff; cursor: pointer; }

/* Mobile notice dialog */

.main-notice-dialog { box-sizing: border-box; width: calc(100% - 32px); max-width: 640px; max-height: 85dvh; margin: auto; padding: 20px; border: 0; border-radius: 16px; color: #242434; background: #fff; overflow-y: auto; }
.main-notice-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.main-notice-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.main-notice-dialog button { min-height: 44px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; background: #f6f2ff; color: #52269b; cursor: pointer; }
.main-notice-dialog header button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; min-height: 32px; padding: 0; font-size: 20px; line-height: 1; }
.main-notice-dialog h2 { font-size: 18px; margin: 18px 0; overflow-wrap: anywhere; }
.main-notice-content { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.main-notice-files { display: grid; gap: 10px; margin-top: 18px; overflow-wrap: anywhere; }
.main-notice-dialog footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.main-notice-dialog footer button { flex: 1; }

/* Dynamic board attachments and links */
#board_write_layer .input-form li.files { align-items: flex-start; }
#board_write_layer .input-form li.files .search-wrap { flex: 1; min-width: 0; flex-direction: column; }
#board_write_layer .layer-container .input-form li.files .search-wrap .file-wrap { width: 100%; }
#board_write_layer .file-wrap[hidden] { display: none !important; }
#board_write_layer .add-file { flex-shrink: 0; width: 32px; height: 32px; margin-left: 6px; background: #803fe1; color: #fff; border-radius: 4px; font-size: 20px; }
#board_write_layer .add-file:disabled { opacity: .4; cursor: default; }
#board_write_layer .remove-file { font-size: 20px; }
.board-content-link { display: block; width: fit-content; max-width: 100%; margin-top: 16px; white-space: normal; overflow-wrap: anywhere; color: #803fe1; text-decoration: underline; }

/* Use an inner block because min-height is not reliable on table cells. */
#board_view_layer td.content { vertical-align: top; }
#board_view_layer .board-view-content { height: 200px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

#board_view_layer td.files .board-file-download, .main-notice-files .board-file-download { display: inline-flex; align-items: center; gap: 8px; text-align: left; overflow-wrap: anywhere; color: #803fe1; cursor: pointer; }
.board-file-download > i, .board-file-download > svg { flex-shrink: 0; }
.board-file-download:disabled { opacity: .6; cursor: wait; }

/* Separate download action from the filename preview link. */
.board-file-row { display: flex; align-items: center; gap: 4px; }
#board_view_layer td.files .board-file-download, .main-notice-files .board-file-download { flex: 0 0 18px; justify-content: center; width: 18px; min-height: 20px; padding: 0; border: 0; background: transparent; }
.board-file-preview { min-width: 0; overflow-wrap: anywhere; color: inherit; text-decoration: none; }
.board-file-preview:hover { text-decoration: underline; }

#board_view_layer table .files .wrap { gap: 2px 0; }
#board_view_layer table .files .wrap .board-file-download i { margin-right: 0; }
.main-notice-files { gap: 2px; }

/* Base card label styles must not override the vehicle thumbnail layout. */
.mobile-vehicle-search .vehicle-identity > .vehicle-thumbnail { display: flex; align-items: center; justify-content: center; }
.mobile-vehicle-search .vehicle-thumbnail > svg { display: block; flex-shrink: 0; margin: 0; }
.mobile-vehicle-search .vehicle-thumbnail > img { object-position: center; }