/* Flatsome's native mobile sidebar only. No replacement links or interaction code. */
body.cw-mobile-menu #main-menu {
  --cw-menu-primary: var(--cw-primary);
  --cw-menu-button-radius: var(--cw-button-radius);
  --cw-menu-ink: var(--cw-text);
  --cw-menu-muted: var(--cw-text-muted);
  --cw-menu-line: var(--cw-border);
  box-sizing: border-box;
  min-height: 100%;
  padding: max(32px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom));
  background: var(--cw-surface);
  color: var(--cw-menu-ink);
}
body.cw-mobile-menu .mfp-wrap:has(#main-menu) .mfp-content {
  width: min(340px, calc(100vw - 56px));
  max-width: calc(100vw - 56px);
  background: var(--cw-surface);
  box-shadow: var(--cw-menu-shadow);
}
body.cw-mobile-menu .mfp-bg.main-menu-overlay { background: var(--cw-text); opacity: .42; }
body.cw-mobile-menu .mfp-wrap:has(#main-menu) .mfp-close {
  width: 44px;
  height: 44px;
  top: max(12px, env(safe-area-inset-top));
  right: max(6px, env(safe-area-inset-right));
  padding: 0;
  border-radius: 50%;
  background: var(--cw-surface);
  color: var(--cw-primary);
  opacity: 1;
}
body.cw-mobile-menu #main-menu::before {
  content: 'CALLIWISH';
  display: block;
  margin: 0 0 6px;
  color: var(--cw-menu-primary);
  font-size: 25px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.8px;
}
body.cw-mobile-menu #main-menu .sidebar-menu { padding: 0; }
body.cw-mobile-menu #main-menu .sidebar-menu::before {
  content: '당신의 그림이 특별해지는 곳';
  display: block;
  margin-bottom: 26px;
  color: var(--cw-menu-muted);
  font-size: 13px;
  line-height: 1.6;
}
body.cw-mobile-menu #main-menu .nav-sidebar { margin: 0; padding: 0; }
body.cw-mobile-menu #main-menu .nav-sidebar > li { border: 0; margin: 0 0 12px; }
body.cw-mobile-menu #main-menu .header-search-form { padding: 0 0 12px; }
body.cw-mobile-menu #main-menu .searchform .flex-row {
  align-items: stretch;
  border: 1px solid var(--cw-menu-line);
  border-radius: var(--cw-menu-button-radius);
  background: var(--cw-bg);
}
body.cw-mobile-menu #main-menu .searchform .flex-grow { min-width: 0; }
body.cw-mobile-menu #main-menu input.search-field {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--cw-menu-button-radius) 0 0 var(--cw-menu-button-radius);
  background: transparent;
  box-shadow: none;
  color: var(--cw-menu-ink);
  font-size: 16px;
}
body.cw-mobile-menu #main-menu input.search-field::placeholder { color: var(--cw-placeholder); }
body.cw-mobile-menu #main-menu button.ux-search-submit {
  width: 50px;
  min-width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 var(--cw-menu-button-radius) var(--cw-menu-button-radius) 0;
  background: var(--cw-menu-primary);
  color: var(--cw-surface);
  box-shadow: none;
}
body.cw-mobile-menu #main-menu .nav-sidebar > li:not(.html) > a {
  box-sizing: border-box;
  min-height: 56px;
  padding: 16px;
  border: 1px solid var(--cw-menu-line);
  border-radius: 16px;
  background: var(--cw-menu-card);
  color: var(--cw-menu-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}
body.cw-mobile-menu #main-menu .nav-sidebar > li.account-item > a {
  width: 100%;
  padding-right: 54px;
  background: var(--cw-soft);
  border-color: var(--cw-menu-border);
  color: var(--cw-menu-primary);
}
body.cw-mobile-menu #main-menu .nav-sidebar > li > a > i { color: var(--cw-menu-primary); opacity: 1; }
body.cw-mobile-menu #main-menu .nav-sidebar > li > .toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 12px;
  color: var(--cw-menu-primary);
  opacity: 1;
}
body.cw-mobile-menu #main-menu .nav-sidebar .children { padding: 8px 0 4px; }
body.cw-mobile-menu #main-menu .nav-sidebar .children li a {
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 12px;
  color: var(--cw-menu-muted);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
body.cw-mobile-menu #main-menu .nav-sidebar .children li.active > a,
body.cw-mobile-menu #main-menu .nav-sidebar .children a:hover,
body.cw-mobile-menu #main-menu .nav-sidebar > li > a:hover {
  background: var(--cw-soft);
  color: var(--cw-menu-primary);
}
body.cw-mobile-menu #main-menu .header-social-icons { padding: 12px 0 0; }
body.cw-mobile-menu #main-menu .social-icons { display: flex; flex-wrap: wrap; gap: 10px; }
body.cw-mobile-menu #main-menu .social-icons a.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid var(--cw-menu-line);
  border-radius: 50%;
  background: var(--cw-surface);
  color: var(--cw-menu-primary);
  font-size: 19px;
  line-height: 1;
}
body.cw-mobile-menu #main-menu .social-icons a:hover { background: var(--cw-soft); }
body.cw-mobile-menu #main-menu :is(a, button, input):focus-visible,
body.cw-mobile-menu .mfp-wrap:has(#main-menu) .mfp-close:focus-visible {
  outline: 2px solid var(--cw-primary);
  outline-offset: 3px;
}
@media (max-width: 359px) {
  body.cw-mobile-menu #main-menu { padding-left: 16px; padding-right: 16px; }
  body.cw-mobile-menu #main-menu::before { font-size: 23px; }
}