/* Public mobile layout. The archive previews keep their original styles. */
.public-shell .sidebar-mobile-nav, .public-shell .board-date-short { display: none; }
.public-shell .top_serch_btn svg { width: 20px; height: 20px; }
.public-shell .left_customer_box .lcb_img svg { width: 48px; height: 48px; color: #88c4ca; }
.public-shell .left_notice_title svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: middle; }
.public-shell .left_event_title svg { width: 24px; height: 24px; margin-right: 8px; vertical-align: middle; }
.public-shell .sidebar-backdrop[hidden] { display: none; }

@media (max-width: 1024px) {
  body.sidebar-open { overflow: hidden; }
  .public-shell .m_top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 12px; }
  .public-shell .m_top .m_logo { position: static; float: none; margin: 0; }
  .public-shell .m_top .noonting-lockup { display: block; width: 142px; height: auto; }
  .public-shell .sidebar-toggle:not([hidden]), .public-shell .sidebar-fallback,
  .public-shell .m_top_serch_btn, .public-shell .sidebar-close {
    position: static; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
    width: 44px; height: 44px; min-height: 44px; padding: 10px; margin: 0;
    border: 1px solid #45565d; border-radius: 10px; background: #232a2d; color: #c7e4e7;
    box-shadow: inset 0 1px #b8d1d126, 0 3px 6px #0005; cursor: pointer;
  }
  .public-shell .sidebar-toggle svg, .public-shell .m_top_serch_btn svg, .public-shell .sidebar-close svg { width: 22px; height: 22px; }
  .public-shell .sidebar-backdrop { position: fixed; inset: 0; z-index: 10010; background: #000a; }
  .public-shell .contents_box_left.sidebar-enhanced {
    display: block; position: fixed; inset: 0 auto 0 0; z-index: 10011;
    width: min(340px, calc(100vw - 32px)); height: 100dvh; max-height: none;
    padding: max(12px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom));
    margin: 0; overflow-y: auto; overscroll-behavior: contain;
    background: #171719; border: 0; border-right: 1px solid #45565d; border-radius: 0 16px 16px 0;
    box-shadow: 14px 0 40px #0008; transform: translateX(-105%); visibility: hidden;
    transition: transform .2s ease; scrollbar-width: thin;
  }
  .public-shell .contents_box_left.sidebar-enhanced.is-open { transform: translateX(0); visibility: visible; }
  .public-shell .contents_box_left:not(.sidebar-enhanced):target { display: block; }
  .public-shell .contents_box_left:not(.sidebar-enhanced) .sidebar-close { display: none; }
  .public-shell .sidebar-mobile-head { clear: both; margin-bottom: 12px; }
  .public-shell .sidebar-mobile-head strong { font-size: 18px; }
  .public-shell .sidebar-mobile-nav { clear: both; display: grid; width: 100%; gap: 14px; margin: 16px 0 20px; padding-top: 16px; }
  .public-shell .sidebar-nav-group { min-width: 0; }
  .public-shell .sidebar-nav-group p { color: #bdcdcf; margin: 0 0 6px; font-size: 12px; }
  .public-shell .sidebar-nav-group ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0; }
  .public-shell .sidebar-nav-group a { display: flex; align-items: center; min-height: 42px; padding: 8px 10px; border: 1px solid #394449; border-radius: 8px; background: #232a2d; color: #e2ecec; font-size: 13px; white-space: nowrap; }
  .public-shell .contents_box { gap: 0; }
  .public-shell .contents_wrap { margin-top: 0; padding-top: 16px; }
  .public-shell .mobile-content-page > .right_fix_zone { display: none; }
  .public-shell .mobile-content-page .content_box_title_box { margin-top: 0; }
  .public-shell .m_menu_fix { z-index: 1000; height: calc(64px + env(safe-area-inset-bottom)); background: #20272a; padding: 0 8px env(safe-area-inset-bottom); border-top: 1px solid #45565d; }
  .public-shell .m_menu_fix ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; height: 64px; }
  .public-shell .m_menu_fix li { float: none; width: auto; min-width: 0; }
  .public-shell .m_menu_fix li a { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; height: 64px; min-height: 44px; padding: 6px 0; color: #bdcdcf; font-size: 11px; line-height: 1.2; white-space: nowrap; text-decoration: none; }
  .public-shell .m_menu_fix li a svg { width: 23px; height: 23px; }
  .public-shell .m_menu_fix li a[aria-current="page"] { color: #9cd7dc; }
  .public-shell .m_menu_fix li:nth-child(3) a { position: static; transform: none; margin: 6px auto; width: 50px; height: 50px; padding: 0; border-radius: 16px; background: #171719; border: 1px solid #65969b; box-shadow: inset 0 1px #c5f7e533, 0 3px 6px #0007; }
  .public-shell .m_menu_fix li:nth-child(3) a img { width: 32px; height: 32px; margin: 0; border-radius: 7px; }
  .public-shell :is(.section-tabs, .category-tabs ul, .sort-tabs, .board-navigation) { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-block: 4px 8px; scrollbar-width: thin; scrollbar-color: #52636a transparent; }
  .public-shell :is(.section-tabs, .category-tabs, .sort-tabs, .board-navigation) a { flex: 0 0 auto; min-height: 42px; white-space: nowrap; }
  .public-shell .category-tabs li { flex: 0 0 auto; }
  .public-shell .broadcast-app .category-filter { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 4px 2px 10px; scrollbar-width: thin; }
  .public-shell .broadcast-app .category-button { flex: 0 0 78px; min-height: 72px; }
  .public-shell .broadcast-app .category-name { white-space: nowrap; }
  .public-shell :is(input, select, textarea) { scroll-margin-block: 80px; }
  .public-shell .sidebar-nav-group a:focus-visible, .public-shell .m_menu_fix a:focus-visible { outline: 2px solid #f6b86e; outline-offset: -3px; }
}

@media (max-width: 620px) {
  .public-shell .community-page .board-toolbar { padding: 10px 12px; }
  .public-shell .community-page .board-row { display: flex; flex-wrap: nowrap; gap: 8px; min-height: 42px; padding: 0 12px; }
  .public-shell .community-page .board-row-title,
  .public-shell .community-page .board-row.is-notice .board-row-title { flex: 1 1 0; min-width: 0; min-height: 42px; gap: 6px; padding: 0; }
  .public-shell .community-page .board-row-title > span:first-child { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; font-size: 14px; }
  .public-shell .community-page :is(.board-row-date, .board-row-views, .board-date-full) { display: none; }
  .public-shell .community-page .board-row-author { display: block; flex: 0 0 88px; min-width: 0; font-size: 11px; }
  .public-shell .community-page .board-date-short { display: inline; }
  .public-shell .community-page .board-row-date { flex: 0 0 36px; white-space: nowrap; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
  .public-shell .community-page .board-replies, .public-shell .community-page .board-recommends { flex-shrink: 0; gap: 3px; }
  .public-shell .community-page .board-heading { padding: 16px; }
  .public-shell .community-page .board-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px 14px; gap: 10px; }
  .public-shell .community-page .board-photo-card { display: block; height: 100%; }
  .public-shell .community-page .board-photo-frame { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .public-shell .community-page .board-photo-copy { min-width: 0; padding: 10px; }
  .public-shell .community-page .board-photo-copy h3 { font-size: 13px; }
  .public-shell .community-page .board-photo-copy p { flex-wrap: nowrap; margin-top: 5px; font-size: 11px; }
  .public-shell .community-page .board-photo-copy p > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .public-shell .community-page .board-photo-copy time { white-space: nowrap; }
  .public-shell .community-page .board-photo-empty { gap: 2px; font-size: 10px; }
  .public-shell .community-page .board-photo-empty > svg { width: 24px; height: 24px; }
  .public-shell .community-page .board-photo-count { right: 4px; bottom: 4px; font-size: 10px; padding: 2px 5px; }
  .public-shell .brand-feature { padding: 14px; min-height: 130px; }
  .public-shell .brand-feature-copy { min-width: 0; }
  .public-shell .brand-feature-copy strong { font-size: 16px; line-height: 1.6; }
  .public-shell .brand-feature-copy p { font-size: 12px; line-height: 1.7; }
  .public-shell .brand-feature img { width: 30%; max-width: 110px; height: auto; }
  .public-shell .service-tiles--primary { gap: 10px; }
  .matte-site .public-shell .service-tiles--primary a { min-height: 118px; padding: 14px 12px; gap: 10px; }
  .public-shell .service-tiles--primary a .tile-figure { width: 32px; height: 32px; flex-basis: 32px; }
  .public-shell .service-tiles--primary a strong { font-size: 16px; white-space: nowrap; }
  .public-shell .service-tiles--primary a small { font-size: 11px; }
  .public-shell .community-page .board-editor-fields { padding: 18px 12px; }
  .public-shell .community-page .board-editor :is(input[type="text"], textarea, select),
  .public-shell :is(.chat-compose input, .auth-input, .top_serch),
  .public-shell .login-form .login-field > input, .matte-site .auth-dialog :is(input, select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .public-shell .contents_box_left.sidebar-enhanced { transition: none; }
}