/* DREALT v0.8.147 — mobile UI polish + desktop mobile-preview launcher */

/* Desktop-only shortcut for checking the current page at phone widths. */
.drealt-mobile-preview-launch-v08147{
  position:fixed;right:18px;bottom:18px;z-index:84;
  display:inline-flex;align-items:center;gap:7px;
  min-height:42px;padding:8px 12px;
  border:1px solid #45698b;border-radius:999px;
  background:rgba(8,24,42,.94);color:#dcecff;
  box-shadow:0 10px 34px rgba(0,0,0,.32);
  font:800 12px/1.2 system-ui,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  cursor:pointer;backdrop-filter:blur(10px)
}
.drealt-mobile-preview-launch-v08147:hover{background:#123354;border-color:#6c9ac0;color:#fff}
.drealt-mobile-preview-launch-v08147:focus-visible{outline:3px solid #9cacff;outline-offset:3px}

@media(max-width:1023px){
  .drealt-mobile-preview-launch-v08147{display:none!important}
}

@media(max-width:960px){
  /* Related-tool bars must scroll horizontally instead of squeezing Korean text vertically. */
  .tool-page-switcher>.section-switcher-nav .section-switcher-buttons,
  .tool-family-only>.section-switcher-nav .section-switcher-buttons,
  .image-tools-switcher .image-tools-tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 4px!important;
    scrollbar-width:none!important;
    scroll-snap-type:x proximity;
  }
  .tool-page-switcher>.section-switcher-nav .section-switcher-buttons::-webkit-scrollbar,
  .tool-family-only>.section-switcher-nav .section-switcher-buttons::-webkit-scrollbar,
  .image-tools-switcher .image-tools-tabs::-webkit-scrollbar{display:none}

  .tool-page-switcher>.section-switcher-nav .section-switcher-link,
  .tool-family-only>.section-switcher-nav .section-switcher-link,
  .image-tools-switcher .image-tools-tabs .section-switcher-link{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    min-height:42px!important;
    height:auto!important;
    margin:0!important;
    padding:8px 11px!important;
    white-space:nowrap!important;
    writing-mode:horizontal-tb!important;
    word-break:keep-all!important;
    line-height:1.35!important;
    scroll-snap-align:start;
  }

  /* Group labels work well in a side menu, but become awkward inside a swipe row. */
  .tool-family-only .section-switcher-group-label,
  .image-tools-switcher .image-tools-tabs .section-switcher-group-label{
    display:none!important;
  }
}

@media(max-width:700px){
  /* Keep horizontal related-tool navigation compact and leave more room for the actual tool. */
  .tool-page-switcher>.section-switcher-nav,
  .tool-family-only>.section-switcher-nav{
    min-width:0!important;
    padding:9px!important;
  }
  .tool-page-switcher>.section-switcher-nav .section-switcher-title,
  .tool-family-only>.section-switcher-nav .section-switcher-title{
    margin:0 0 7px!important;
    font-size:12px!important;
  }

  /* Prevent accidental sideways movement from very long control labels. */
  input,select,textarea,button{max-width:100%}
  .image-tools-page,.tool-standard-page,.useful-subpage{min-width:0}
}
@media(max-width:700px){
  /* Stand-alone controls that were visually too thin for touch. Inline text links are intentionally left as text. */
  .product-search input{min-height:42px!important}
  #siteReset{min-height:38px!important;padding:7px 10px!important}
  .wc-text-button,.wc-risk-legend button{min-height:36px!important;padding:6px 8px!important}
  .product-back{display:flex!important;align-items:center;min-height:40px!important;padding:8px 0!important}
}

/* v0.8.149 — move PC mobile-preview entry beside the footer DREALT logo. */
.drealt-mobile-preview-footer-v08149{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  margin-left:8px;
  padding:6px 11px;
  border:1px solid #2d506f;
  border-radius:999px;
  background:#0b1c30;
  color:#a9c9e6;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  line-height:1.2;
  white-space:nowrap;
  letter-spacing:0;
}
.drealt-mobile-preview-footer-v08149:hover{
  border-color:#6394bd;
  background:#12304d;
  color:#fff;
}
.drealt-mobile-preview-footer-v08149:focus-visible{
  outline:3px solid #9cacff;
  outline-offset:3px;
}
.drealt-mobile-preview-footer-v08149 .preview-icon-v08149{
  font-size:14px;
  line-height:1;
}
@media(max-width:960px){
  .drealt-mobile-preview-footer-v08149{display:none!important}
}