/* ==============================================================
   ODDGO STAGE 2 · GLOBAL UI FOUNDATION
   --------------------------------------------------------------
   Goal
   - Keep WearScope v4.0.0 backend / DB / search logic untouched.
   - Customer desktop = wide search-engine web UI.
   - Customer mobile = app-specific chrome, not compressed desktop.
   - Admin routes keep the legacy operational shell.
   ============================================================== */

body.oddgo-customer-ui{
  --oddgo-black:#050505;
  --oddgo-ink:#111111;
  --oddgo-blue:#2145ff;
  --oddgo-blue-dark:#1637d9;
  --oddgo-bg:#fcfcfb;
  --oddgo-soft:#f6f6f3;
  --oddgo-line:#e7e7e3;
  --oddgo-muted:#777772;
  --oddgo-danger:#c84b45;
  --oddgo-success:#23805d;
  --navy:#111111;
  --navy2:#050505;
  --ink:#111111;
  --muted:#777772;
  --line:#e7e7e3;
  --bg:#fcfcfb;
  --card:#ffffff;
  --primary:#2145ff;
  --primary2:#1637d9;
  --green:#23805d;
  --red:#c84b45;
  --shadow:none;
  background:var(--oddgo-bg)!important;
  color:var(--oddgo-ink)!important;
}
body.oddgo-customer-ui,body.oddgo-customer-ui button,body.oddgo-customer-ui input,body.oddgo-customer-ui select,body.oddgo-customer-ui textarea{
  font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Noto Sans KR","Segoe UI",Arial,sans-serif;
}
body.oddgo-customer-ui .app-shell{min-height:100vh;background:var(--oddgo-bg)}
body.oddgo-customer-ui .sidebar{display:none!important}
body.oddgo-customer-ui .main-wrap{width:100%;min-width:0;margin-left:0!important;background:var(--oddgo-bg)}
body.oddgo-customer-ui .sidebar-backdrop{display:none!important}

/* ---------- Desktop global chrome ---------- */
body.oddgo-customer-ui .oddgo-global-header{
  position:sticky;top:0;z-index:80;
  width:100%;height:76px;padding:0 34px;
  border:0;border-bottom:1px solid var(--oddgo-line);
  background:rgba(252,252,251,.96);
  box-shadow:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.oddgo-desktop-chrome{
  display:grid;grid-template-columns:auto auto minmax(260px,520px) auto;
  align-items:center;gap:28px;width:min(1520px,100%);height:100%;margin:0 auto;
}
.oddgo-wordmark,.oddgo-mobile-wordmark{
  color:var(--oddgo-black);font-weight:950;letter-spacing:-.06em;line-height:1;text-decoration:none;
}
.oddgo-wordmark{font-size:26px}
.oddgo-desktop-nav{display:flex;align-items:center;gap:24px;white-space:nowrap}
.oddgo-desktop-nav a{position:relative;padding:29px 0 25px;color:#71716d;font-size:11px;font-weight:850;letter-spacing:.055em}
.oddgo-desktop-nav a:hover,.oddgo-desktop-nav a.active{color:var(--oddgo-black)}
.oddgo-desktop-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:19px;height:2px;background:var(--oddgo-blue)}
.oddgo-header-search{
  justify-self:stretch;display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;
  height:44px;padding:0 13px;border:1px solid #dcdcd7;border-radius:0;background:#fff;box-shadow:none;
}
.oddgo-header-search:focus-within{border-color:#111}
.oddgo-header-search svg,.oddgo-desktop-actions svg,.oddgo-mobile-actions svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.oddgo-header-search input{min-width:0;border:0;outline:0;background:transparent;color:#111;font-size:12px!important}
.oddgo-header-search input::placeholder{color:#9a9a95}
.oddgo-header-search kbd{border:0;background:transparent;color:#aaa;font-size:9px}
.oddgo-desktop-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.oddgo-desktop-actions>a{display:grid;place-items:center;width:38px;height:38px;border:1px solid transparent;border-radius:50%;color:#222}
.oddgo-desktop-actions>a:hover{border-color:#dededa;background:#fff}
.oddgo-account-link span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#050505;color:#fff;font-size:11px;font-weight:850}
.oddgo-mobile-chrome{display:none}

/* ---------- Customer content language ---------- */
body.oddgo-customer-ui .page-content{width:min(1520px,100%);max-width:1520px;margin:0 auto;padding:34px 42px 64px;background:var(--oddgo-bg)}
body.oddgo-customer-ui.ws-route-dashboard .page-content{width:100%;max-width:none}
body.oddgo-customer-ui .page-head{margin-bottom:28px}
body.oddgo-customer-ui .page-head h1{color:#080808;font-size:32px;letter-spacing:-.055em;font-weight:900}
body.oddgo-customer-ui .page-head p{color:var(--oddgo-muted);line-height:1.65}
body.oddgo-customer-ui .eyebrow{color:var(--oddgo-blue);font-size:9px;letter-spacing:.15em;font-weight:900}

body.oddgo-customer-ui .panel,
body.oddgo-customer-ui .metric-card,
body.oddgo-customer-ui .result-card,
body.oddgo-customer-ui .feature-card{
  border-color:var(--oddgo-line);box-shadow:none;
}
body.oddgo-customer-ui .panel{border-radius:12px;background:#fff}
body.oddgo-customer-ui .metric-card{border-radius:10px;background:#fff}
body.oddgo-customer-ui .panel-head{border-bottom-color:#efefec}
body.oddgo-customer-ui .panel-head h2{color:#111;font-weight:850}

body.oddgo-customer-ui .primary-button{
  border-color:var(--oddgo-blue);border-radius:8px;background:var(--oddgo-blue);color:#fff;box-shadow:none;
}
body.oddgo-customer-ui .primary-button:hover{background:var(--oddgo-blue-dark)}
body.oddgo-customer-ui .secondary-button{
  border-color:#dcdcd8;border-radius:8px;background:#fff;color:#111;box-shadow:none;
}
body.oddgo-customer-ui .ghost-button{border-radius:8px;background:#f4f4f1;color:#222}
body.oddgo-customer-ui input,body.oddgo-customer-ui select,body.oddgo-customer-ui textarea{accent-color:var(--oddgo-blue)}
body.oddgo-customer-ui .positive{color:var(--oddgo-success)!important}
body.oddgo-customer-ui .negative{color:var(--oddgo-danger)!important}

/* Remove the old dashboard/SaaS blue language from generic customer cards. */
body.oddgo-customer-ui .metric-icon,
body.oddgo-customer-ui .activity-icon{background:#f4f4f1!important;color:#111!important}
body.oddgo-customer-ui .mode-badge{border:1px solid var(--oddgo-line);background:#fff;color:#666}
body.oddgo-customer-ui .bar-track{background:#efefec}
body.oddgo-customer-ui .bar-track i{background:#111}
body.oddgo-customer-ui .insight-box{border-color:#e8e8e4;background:#f8f8f5}
body.oddgo-customer-ui .insight-box>span{color:var(--oddgo-blue)}

/* Search/list controls stay crisp and editorial, not ERP-like. */
body.oddgo-customer-ui .filter-chips a,
body.oddgo-customer-ui .filter-chips button,
body.oddgo-customer-ui .size-chips span,
body.oddgo-customer-ui .intel-badge{
  box-shadow:none;
}
body.oddgo-customer-ui .autocomplete-panel{border-color:var(--oddgo-line);box-shadow:0 18px 48px rgba(0,0,0,.09)}

/* Loading layers share the ODDGO palette without changing their logic. */
body.oddgo-customer-ui .search-loading-brand,
body.oddgo-customer-ui .watch-refresh-brand{color:#111}
body.oddgo-customer-ui .loading-spinner{border-color:#e2e2de;border-top-color:var(--oddgo-blue)}
body.oddgo-customer-ui .search-loading-bar{background:#eeeeea}
body.oddgo-customer-ui .search-loading-bar i{background:var(--oddgo-blue)}
body.oddgo-customer-ui .search-loading-steps li.active span,
body.oddgo-customer-ui .watch-refresh-steps li.active span{background:var(--oddgo-blue);color:#fff}
body.oddgo-customer-ui .compare-nav-loading-card,
body.oddgo-customer-ui .loading-card,
body.oddgo-customer-ui .watch-refresh-card{border-color:var(--oddgo-line);box-shadow:0 24px 70px rgba(0,0,0,.14)}

/* ---------- Mobile: independent app chrome ---------- */
@media (max-width:760px){
  :root{--oddgo-mobile-nav-h:70px}
  body.oddgo-customer-ui{background:#fff!important;padding-bottom:calc(var(--oddgo-mobile-nav-h) + env(safe-area-inset-bottom) + 16px)!important}
  body.oddgo-customer-ui.ws-route-shop-map{padding-bottom:0!important}
  body.oddgo-customer-ui .main-wrap{width:100%;min-height:100dvh}

  body.oddgo-customer-ui .oddgo-global-header{
    position:sticky!important;top:0!important;z-index:88!important;
    display:flex!important;width:100%!important;height:calc(58px + env(safe-area-inset-top))!important;
    padding:env(safe-area-inset-top) 15px 0!important;
    border-bottom:1px solid #ecece8!important;background:rgba(255,255,255,.97)!important;
    backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
  }
  .oddgo-desktop-chrome{display:none!important}
  .oddgo-mobile-chrome{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;width:100%;height:58px;gap:10px}
  .oddgo-mobile-wordmark{font-size:20px;letter-spacing:-.055em}
  .oddgo-mobile-context{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#999994;font-size:8px;font-weight:900;letter-spacing:.14em;text-align:left}
  .oddgo-mobile-actions{display:flex;align-items:center;gap:2px}
  .oddgo-mobile-actions a{display:grid;place-items:center;width:36px;height:36px;color:#111;border-radius:50%}

  body.oddgo-customer-ui .page-content{width:100%!important;max-width:none!important;padding:20px 16px 28px!important;background:#fff!important;overflow:visible!important}
  body.oddgo-customer-ui.ws-route-dashboard .page-content,
  body.oddgo-customer-ui.ws-route-shop-map .page-content{padding:0!important}

  body.oddgo-customer-ui .page-head{display:block!important;margin:0 0 18px!important}
  body.oddgo-customer-ui .page-head h1{margin:4px 0 6px!important;font-size:27px!important;line-height:1.08!important;letter-spacing:-.055em!important}
  body.oddgo-customer-ui .page-head p{font-size:12px!important;line-height:1.6!important}
  body.oddgo-customer-ui .eyebrow{font-size:8px!important;color:var(--oddgo-blue)!important}

  /* Mobile components deliberately do not mimic desktop card geometry. */
  body.oddgo-customer-ui:not(.ws-route-shop-map) .panel{border-radius:14px!important;border-color:#e9e9e5!important;background:#fff!important;box-shadow:none!important}
  body.oddgo-customer-ui .primary-button{min-height:44px;border-radius:10px!important;background:var(--oddgo-black)!important;border-color:var(--oddgo-black)!important}
  body.oddgo-customer-ui .secondary-button{min-height:44px;border-radius:10px!important;border-color:#ddddda!important;color:#111!important}

  /* New mobile nav: floating app dock. Stage 1 dashboard may override this locally. */
  body.oddgo-customer-ui .mobile-bottom-nav.ws-mobile-nav-v360.oddgo-mobile-nav{
    position:fixed!important;left:12px!important;right:12px!important;bottom:calc(9px + env(safe-area-inset-bottom))!important;z-index:96!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    width:auto!important;height:64px!important;padding:5px!important;
    border:1px solid #dededa!important;border-radius:21px!important;
    background:rgba(255,255,255,.97)!important;box-shadow:0 12px 36px rgba(0,0,0,.12)!important;
    backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
  }
  body.oddgo-customer-ui .mobile-bottom-nav.ws-mobile-nav-v360.oddgo-mobile-nav a{
    position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
    height:54px!important;padding:3px 2px!important;border:0!important;border-radius:16px!important;background:transparent!important;color:#8d8d88!important;
  }
  body.oddgo-customer-ui .mobile-bottom-nav.ws-mobile-nav-v360.oddgo-mobile-nav .ws-nav-icon{display:flex!important;width:22px!important;height:22px!important;align-items:center;justify-content:center}
  body.oddgo-customer-ui .mobile-bottom-nav.ws-mobile-nav-v360.oddgo-mobile-nav svg{width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round;stroke-linejoin:round}
  body.oddgo-customer-ui .mobile-bottom-nav.ws-mobile-nav-v360.oddgo-mobile-nav b{font-size:9px!important;font-weight:850!important;line-height:1!important}
  body.oddgo-customer-ui .mobile-bottom-nav.ws-mobile-nav-v360.oddgo-mobile-nav a.active{background:#050505!important;color:#fff!important}
  body.oddgo-customer-ui .mobile-bottom-nav.ws-mobile-nav-v360.oddgo-mobile-nav a.active::before{content:none!important}

  /* Shop map remains full-screen and will receive its page-specific ODDGO redesign in Stage 6. */
  body.oddgo-customer-ui.ws-route-shop-map .mobile-bottom-nav.ws-mobile-nav-v360.oddgo-mobile-nav{display:none!important}

  body.oddgo-customer-ui .toast{left:16px!important;right:16px!important;bottom:calc(86px + env(safe-area-inset-bottom))!important}
}

@media (min-width:761px){
  body.oddgo-customer-ui .mobile-bottom-nav{display:none!important}
}

/* ---------- Compact desktop ---------- */
@media (min-width:761px) and (max-width:1180px){
  body.oddgo-customer-ui .oddgo-global-header{padding:0 22px}
  .oddgo-desktop-chrome{grid-template-columns:auto auto minmax(220px,1fr) auto;gap:18px}
  .oddgo-desktop-nav{gap:15px}
  .oddgo-desktop-nav a{font-size:10px}
  .oddgo-header-search kbd{display:none}
  body.oddgo-customer-ui .page-content{padding-left:26px;padding-right:26px}
}