/* Reportric mobile-only navigation overrides.
   768px and above always keeps the desktop/laptop sidebar.
   767px and below uses the mobile header + off-canvas menu. */

/* Desktop / laptop restore for widths that legacy responsive CSS previously treated as mobile. */
@media (min-width: 768px) and (max-width: 1040px) {
  body.mobile-nav-open { overflow: auto !important; }
  .app { display: block !important; min-height: 100vh !important; }

  .mobile-site-header,
  .mobile-nav-backdrop { display: none !important; }

  .side {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 236px !important;
    height: 100vh !important;
    z-index: 45 !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 26px 18px !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
  }

  .side .brand {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 8px 27px !important;
  }
  .side .account-switcher {
    min-width: 0 !important;
    margin: -12px 0 16px !important;
  }
  .side .account-menu {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }
  .side .nav-title,
  .side .side-foot { display: block !important; }
  .side .nav-link,
  .side .nav {
    display: block !important;
    white-space: normal !important;
  }
  .side .nav {
    margin: 3px 0 !important;
    padding: 11px 12px !important;
  }

  main {
    width: auto !important;
    max-width: none !important;
    margin: 0 0 0 236px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .top {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* Mobile only */
@media (max-width: 767px) {
  body.mobile-nav-open { overflow: hidden !important; }

  .app { display: block !important; min-height: 100vh; }

  .mobile-site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    height: 68px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: linear-gradient(135deg,#0e223d,#113c5b);
    color: #fff;
    box-shadow: 0 4px 18px rgba(15,39,71,.12);
  }
  .mobile-site-brand { min-width: 0; }
  .mobile-site-brand b { display:block;font-size:22px;line-height:1.1;letter-spacing:-.5px; }
  .mobile-site-brand small { display:block;margin-top:5px;font-size:8px;letter-spacing:1.15px;color:#a9bed0; }
  .mobile-menu-toggle {
    width: 46px;height:46px;flex:0 0 auto;border:1px solid rgba(255,255,255,.2);border-radius:13px;
    background:rgba(255,255,255,.08);display:grid;place-content:center;gap:5px;padding:0;cursor:pointer;
  }
  .mobile-menu-toggle span { width:22px;height:2px;border-radius:10px;background:#fff;display:block;transition:.18s; }
  body.mobile-nav-open .mobile-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.mobile-nav-open .mobile-menu-toggle span:nth-child(2){opacity:0}
  body.mobile-nav-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .side {
    position: fixed !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: min(82vw, 320px) !important; height: 100dvh !important;
    z-index: 140 !important; display: block !important; overflow-y: auto !important; overflow-x: hidden !important;
    padding: 22px 16px 30px !important; transform: translateX(-104%); transition: transform .22s ease;
    box-shadow: 18px 0 45px rgba(2,12,27,.24);
  }
  body.mobile-nav-open .side { transform: translateX(0); }
  .side .brand { width:auto !important;min-width:0 !important;margin:0 8px 24px !important;font-size:22px !important; }
  .side .brand small { font-size:9px !important; }
  .side .account-switcher { min-width:0 !important;margin:0 0 16px !important; }
  .side .account-menu { left:0 !important;right:0 !important;width:auto !important; }
  .side .nav-title { display:block !important;margin:18px 10px 8px !important;font-size:11px !important; }
  .side .nav-link { display:block !important;white-space:normal !important; }
  .side .nav { display:block !important;margin:3px 0 !important;padding:12px !important;font-size:14px !important;white-space:normal !important; }
  .side .side-foot { display:block !important; }

  .mobile-nav-backdrop {
    position: fixed; inset: 0; z-index: 130; border: 0; padding: 0; margin: 0;
    background: rgba(5,18,33,.48); opacity: 0; visibility: hidden; transition: .2s; cursor:pointer;
  }
  body.mobile-nav-open .mobile-nav-backdrop { opacity:1;visibility:visible; }

  main { margin:0 !important;padding-left:15px !important;padding-right:15px !important; }

  .card,.summary-hero,.dashboard-client-card,.ppt-options-panel,.inquiry-performance-panel,.inquiry-breakdown-wrap,.inquiry-trend-wrap,.inquiry-judgement,.comparison-infographic,.group-filter-panel,.region-control-card,.region-map-card,.region-ranking-card,.region-table-card,.timeday-control-card,.timeday-panel,.timeday-insight-card,.install-guide,.creative-preview-card { padding-left:10px !important;padding-right:10px !important; }
  .client-identity,.client-status-item,.client-report-brief,.ppt-check-group,.hero-metric,.cost-overview-card,.media-detail-group,.media-detail-toolbar,.mini-kpi,.comparison-mini,.insight,.frow,.platform,.verify-box>div,.period-trigger-range,.period-range-card,.period-input-group,.period-summary-strip>div,.period-calendar-help,.period-ready,.region-kpi,.region-selected-card,.region-insight-list>div,.timeday-kpi { padding-left:9px !important;padding-right:9px !important; }
  .inquiry-stage { padding-left:9px !important;padding-right:9px !important; }
  .inquiry-conversion-strip { padding-left:10px !important;padding-right:10px !important; }
  .media-summary-metrics>div { padding-left:7px !important;padding-right:7px !important; }
  .table th,.table td { padding-left:6px !important;padding-right:6px !important; }
  .card-head,.section-title,.section-title-row,.product-detail-head,.group-filter-head,.media-detail-summary,.inquiry-performance-head { gap:8px !important; }
  .client-copy,.period-trigger-copy,.media-summary-title,.inquiry-efficiency-copy,.creative-copy-cell { min-width:0 !important; }
}

@media (max-width: 520px) {
  .mobile-site-header { height:64px;padding:9px 12px; }
  .mobile-site-brand b { font-size:20px; }
  .mobile-menu-toggle { width:44px;height:44px; }
  .side { width:min(86vw,300px) !important; }
  main { padding-left:12px !important;padding-right:12px !important; }
  .card,.summary-hero,.dashboard-client-card,.ppt-options-panel,.inquiry-performance-panel,.comparison-infographic,.group-filter-panel,.install-guide { padding-left:8px !important;padding-right:8px !important; }
}

@media (min-width: 768px) {
  .mobile-site-header,.mobile-nav-backdrop { display:none !important; }
}

/* Agency report: place the existing agency-logo delete action at the upload area's top-right. */
body[data-reportric-mode="agency"] #agencyLogoCard {
  position: relative;
}
body[data-reportric-mode="agency"] #agencyLogoCard > .actions {
  position: absolute;
  top: 102px;
  right: 32px;
  z-index: 3;
  margin: 0 !important;
}
body[data-reportric-mode="agency"] #agencyLogoRemove {
  border: 1px solid #fecdd3 !important;
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
}
@media (max-width: 767px) {
  body[data-reportric-mode="agency"] #agencyLogoCard > .actions {
    top: 96px;
    right: 20px;
  }
}

/* Tracker install guide: one item per row. */
.install-guide .install-steps,
.install-guide .platform-grid,
.install-guide .verify-box {
  grid-template-columns: 1fr !important;
}
.install-guide .install-steps {
  gap: 8px !important;
}
.install-guide .install-step {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  padding: 13px 14px !important;
}
.install-guide .install-step .step-no {
  margin: 0 !important;
}
.install-guide .install-step > div {
  min-width: 0;
}
.install-guide .install-step p {
  margin-top: 4px !important;
}
.install-guide .platform {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
}
.install-guide .platform b,
.install-guide .platform span {
  margin: 0 !important;
}
.install-guide .verify-box > div {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 14px !important;
  padding: 12px 14px !important;
}
.install-guide .verify-box b,
.install-guide .verify-box span {
  margin: 0 !important;
}
@media (max-width: 767px) {
  .install-guide .install-step {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 11px 10px !important;
  }
  .install-guide .platform,
  .install-guide .verify-box > div {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 10px !important;
  }
}

/* Sidebar: keep scrolling, hide scrollbar. */
.side {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.side::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Inquiry insight card: fluidly scale its contents with the card width before mobile reflow. */
.inquiry-judgement {
  container-type: inline-size;
  min-width: 0 !important;
}
.inquiry-judgement .inquiry-insight-heading {
  font-size: clamp(12px, 3.2cqi, 15px) !important;
  margin-bottom: clamp(8px, 2.7cqi, 13px) !important;
}
.inquiry-judgement .inquiry-insight-main {
  font-size: clamp(16px, 5.1cqi, 23px) !important;
  line-height: 1.48 !important;
}
.inquiry-judgement > span {
  font-size: clamp(9.5px, 2.7cqi, 12px) !important;
  line-height: 1.55 !important;
}
.inquiry-judgement .inquiry-insight-art {
  width: clamp(82px, 31cqi, 150px) !important;
  height: auto !important;
  right: clamp(8px, 3.2cqi, 16px) !important;
  top: clamp(36px, 10cqi, 43px) !important;
}
.inquiry-judgement .inquiry-insight-metrics {
  grid-template-columns: minmax(0,1fr) clamp(24px,8cqi,42px) minmax(0,1fr) minmax(0,1.12fr) !important;
  min-width: 0 !important;
}
.inquiry-judgement .inquiry-insight-metrics > div:not(.vs) {
  min-width: 0 !important;
  padding: clamp(7px, 2.3cqi, 11px) clamp(4px, 1.7cqi, 8px) !important;
}
.inquiry-judgement .inquiry-insight-metrics small {
  font-size: clamp(7.5px, 2.25cqi, 10px) !important;
  line-height: 1.25 !important;
  word-break: keep-all !important;
}
.inquiry-judgement .inquiry-insight-metrics strong {
  font-size: clamp(14px, 4.9cqi, 22px) !important;
  line-height: 1.08 !important;
  margin-top: clamp(2px,1cqi,4px) !important;
  white-space: nowrap !important;
}
.inquiry-judgement .inquiry-insight-metrics em {
  font-size: clamp(7px, 2cqi, 9px) !important;
  line-height: 1.3 !important;
  word-break: keep-all !important;
}
.inquiry-judgement .inquiry-insight-metrics .vs {
  font-size: clamp(9px, 2.7cqi, 12px) !important;
  min-width: 0 !important;
}
.inquiry-judgement .inquiry-cpa-compare {
  grid-template-columns: minmax(0,1fr) clamp(24px,7cqi,36px) minmax(0,1fr) !important;
  padding: clamp(5px,1.7cqi,7px) clamp(5px,2cqi,9px) !important;
}
.inquiry-judgement .inquiry-cpa-compare span {
  font-size: clamp(7.5px,2cqi,9px) !important;
}
.inquiry-judgement .inquiry-cpa-compare b {
  font-size: clamp(11px,3.2cqi,14px) !important;
  white-space: nowrap !important;
}
.inquiry-judgement .inquiry-cpa-compare i {
  font-size: clamp(14px,4cqi,18px) !important;
}
.inquiry-judgement .inquiry-cpa-formula {
  font-size: clamp(7.5px,2cqi,9px) !important;
}

/* Keep the existing composition as long as there is enough card width. */
@container (max-width: 430px) {
  .inquiry-judgement .inquiry-insight-main { max-width: 68% !important; }
  .inquiry-judgement > span { max-width: 70% !important; }
}

/* Only at genuinely narrow card widths do we let the illustration yield more text space. */
@container (max-width: 350px) {
  .inquiry-judgement .inquiry-insight-art { width: 72px !important; opacity: .82 !important; }
  .inquiry-judgement .inquiry-insight-main { max-width: 72% !important; }
  .inquiry-judgement > span { max-width: 74% !important; }
}

/* 2026-08-31: inquiry cards — use the available card width before stacking. */
.inquiry-judgement .inquiry-insight-heading{
  font-size:clamp(15px,3.3cqi,20px)!important;
  margin-bottom:clamp(12px,2.8cqi,18px)!important;
}
.inquiry-judgement .inquiry-insight-main{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  column-gap:clamp(14px,4cqi,34px)!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 clamp(12px,2.8cqi,18px)!important;
  font-size:0!important;
  line-height:1.1!important;
}
.inquiry-judgement .inquiry-insight-main br{display:none!important}
.inquiry-judgement .inquiry-insight-main em{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  font-size:clamp(24px,5.2cqi,36px)!important;
  line-height:1.1!important;
  font-style:normal!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.inquiry-judgement .inquiry-insight-main em:before,
.inquiry-judgement .inquiry-insight-main em:after{
  color:#fff!important;
  font-size:.58em!important;
  font-weight:900!important;
  vertical-align:.12em!important;
}
.inquiry-judgement .inquiry-insight-main em:first-of-type:before{content:'광고비 '!important}
.inquiry-judgement .inquiry-insight-main em:nth-of-type(2):before{content:'문의 전환 '!important}
.inquiry-judgement .inquiry-insight-main em.up:after{content:' 증가'!important}
.inquiry-judgement .inquiry-insight-main em.down:after{content:' 감소'!important}
.inquiry-judgement>span{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 clamp(14px,3cqi,20px)!important;
  padding:0!important;
  font-size:clamp(12px,2.35cqi,14px)!important;
  line-height:1.68!important;
  letter-spacing:-.15px!important;
  color:#eef7fc!important;
  word-break:keep-all!important;
}
.inquiry-judgement .inquiry-insight-art{
  width:clamp(72px,17cqi,108px)!important;
  top:clamp(10px,2.8cqi,18px)!important;
  right:clamp(10px,2.8cqi,18px)!important;
  opacity:.9!important;
}
.inquiry-judgement .inquiry-insight-metrics{
  margin-top:auto!important;
  grid-template-columns:minmax(0,1fr) clamp(30px,7cqi,44px) minmax(0,1fr) minmax(0,1.15fr)!important;
}
.inquiry-judgement .inquiry-insight-metrics>div:not(.vs){padding:clamp(10px,2.3cqi,14px) clamp(6px,1.8cqi,10px)!important}
.inquiry-judgement .inquiry-insight-metrics small{font-size:clamp(10px,2.15cqi,12px)!important}
.inquiry-judgement .inquiry-insight-metrics strong{font-size:clamp(20px,4.6cqi,28px)!important}
.inquiry-judgement .inquiry-insight-metrics em{font-size:clamp(9px,1.95cqi,11px)!important;margin-top:5px!important}
.inquiry-judgement .inquiry-insight-metrics .vs{font-size:clamp(11px,2.3cqi,14px)!important}
.inquiry-judgement .inquiry-cpa-compare{margin-top:10px!important;padding:clamp(9px,2cqi,12px) clamp(8px,2.2cqi,12px)!important}
.inquiry-judgement .inquiry-cpa-compare span{font-size:clamp(10px,2.05cqi,12px)!important}
.inquiry-judgement .inquiry-cpa-compare b{font-size:clamp(16px,3.7cqi,22px)!important;margin-top:4px!important}
.inquiry-judgement .inquiry-cpa-compare i{font-size:clamp(18px,4cqi,24px)!important}
.inquiry-judgement .inquiry-cpa-formula{font-size:clamp(9px,1.9cqi,11px)!important;margin-top:8px!important}

/* 문의 행동 구성: donut centered on top, action list below in two columns. */
.inquiry-breakdown-wrap .inquiry-breakdown-visual{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto!important;
  align-items:start!important;
  gap:clamp(14px,2.8vw,24px)!important;
}
.inquiry-breakdown-wrap .inquiry-donut{
  width:min(225px,48%)!important;
  margin:0 auto!important;
}
.inquiry-breakdown-wrap .inquiry-breakdown{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0 clamp(10px,1.4vw,20px)!important;
  align-items:stretch!important;
}
.inquiry-breakdown-wrap .inquiry-breakdown>div{
  grid-template-columns:9px minmax(0,1fr) auto!important;
  gap:6px!important;
  min-width:0!important;
  padding:8px 2px!important;
}
.inquiry-breakdown-wrap .inquiry-breakdown span{font-size:clamp(10px,.8vw,12px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.inquiry-breakdown-wrap .inquiry-breakdown b{font-size:clamp(12px,1vw,15px)!important;white-space:nowrap!important}
.inquiry-breakdown-wrap .inquiry-breakdown em{display:none!important}

@media(max-width:760px){
  .inquiry-judgement .inquiry-insight-main{column-gap:12px!important}
  .inquiry-judgement .inquiry-insight-main em{font-size:clamp(20px,6.8cqi,30px)!important}
  .inquiry-breakdown-wrap .inquiry-donut{width:min(210px,62%)!important}
  .inquiry-breakdown-wrap .inquiry-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Fix: keep every inquiry action label visible inside the existing two-row layout. */
.inquiry-breakdown-wrap .inquiry-breakdown>div{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  gap:7px!important;
}
.inquiry-breakdown-wrap .inquiry-breakdown>div i{
  flex:0 0 9px!important;
}
.inquiry-breakdown-wrap .inquiry-breakdown span{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  word-break:keep-all!important;
  line-height:1.3!important;
}
.inquiry-breakdown-wrap .inquiry-breakdown b{
  flex:0 0 auto!important;
  margin-left:auto!important;
}