/* =====================================================================
   CampusDown Design System v2 (2026-10-13, Grok Bot, "dsv2")
   ~70% Material Design 3 (tonal surfaces, state layers, elevation)
   ~30% Apple HIG (glass header, SF-like type rhythm, soft motion)
   Loaded LAST on every campusdown.com HTML page (Apache mod_substitute,
   /etc/apache2/cd-design-v2.conf). Visual-only: colours, radii, shadows,
   motion, focus. NO layout / size / position / text changes.
   Never touches ad containers (ins.adsbygoogle, .cd-prdad, .cd-adu,
   [data-cd-ad], .blog-ad, .cd-adrail, sponsor slots) nor psych-test
   theme colours (.psy-*).
   Rule: new pages MUST use these tokens (var(--ds-*)) instead of new
   hard-coded colours/shadows/radii.
   Rollback: remove the Include line for cd-design-v2.conf + reload apache.
   ===================================================================== */
:root{
  /* brand (refined from #4f6bed / #3874ff) */
  --ds-primary:#3d5cf0; --ds-primary-hover:#3350dc; --ds-primary-press:#2a44c4;
  --ds-on-primary:#fff;
  --ds-primary-container:#e6ebff; --ds-on-primary-container:#1a2a7a;
  --ds-accent:#7c5cff;           /* use sparingly */
  /* neutral tonal surfaces (M3) */
  --ds-bg:#f6f7fb;               /* soft off-white page */
  --ds-surface:#ffffff;          /* cards */
  --ds-surface-1:#f9fafd;        /* container lowest */
  --ds-surface-2:#f2f4f9;        /* container (inputs, tonal) */
  --ds-surface-3:#eceff6;        /* container high */
  --ds-outline:rgba(17,24,39,.10);
  --ds-outline-soft:rgba(17,24,39,.06);
  --ds-on-surface:#1b1f2a; --ds-on-surface-2:#4a5163; --ds-on-surface-3:#6b7285; /* AA on white */
  /* state layers */
  --ds-state-hover:rgba(61,92,240,.08); --ds-state-press:rgba(61,92,240,.14);
  --ds-state-neutral:rgba(17,24,39,.05);
  --ds-focus:0 0 0 3px rgba(61,92,240,.32);
  /* radii */
  --ds-r-xs:8px; --ds-r-sm:12px; --ds-r-md:16px; --ds-r-lg:20px; --ds-r-xl:24px; --ds-r-full:999px;
  /* elevation (soft, layered) */
  --ds-e0:none;
  --ds-e1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --ds-e2:0 2px 4px rgba(16,24,40,.04),0 4px 12px rgba(16,24,40,.07);
  --ds-e3:0 4px 8px rgba(16,24,40,.05),0 12px 28px rgba(16,24,40,.10);
  --ds-e4:0 8px 16px rgba(16,24,40,.06),0 24px 56px rgba(16,24,40,.16);
  /* spacing rhythm (4pt) – for new components */
  --ds-s1:4px; --ds-s2:8px; --ds-s3:12px; --ds-s4:16px; --ds-s5:20px; --ds-s6:24px; --ds-s8:32px; --ds-s10:40px;
  /* type */
  --ds-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",NanumGothic,sans-serif;
  --ds-lh:1.6; --ds-ls:-0.01em; --ds-ls-head:-0.022em;
  /* motion */
  --ds-ease:cubic-bezier(.2,0,0,1); --ds-ease-out:cubic-bezier(.05,.7,.1,1);
  --ds-t-fast:150ms; --ds-t:200ms; --ds-t-slow:250ms;
  /* legacy bridges (Phoenix/Bootstrap) */
  --phoenix-body-bg:var(--ds-bg);
}

/* ---------- base type ---------- */
body{font-family:var(--ds-font);letter-spacing:var(--ds-ls);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,.h1,.h2,.h3{font-weight:700;letter-spacing:var(--ds-ls-head)}
h4,h5,h6{letter-spacing:-0.015em}
/* comfortable reading line-height only in prose blocks (global body untouched -> no layout jump) */
.blog-article p,.blog-article li,.cdv-desc p,.cd-blogprose p,.article-body p,.wk-body p{line-height:var(--ds-lh)}
::selection{background:rgba(61,92,240,.18)}
a{transition:color var(--ds-t-fast) var(--ds-ease)}

/* ---------- focus-visible (global, a11y) ---------- */
:where(a,button,[role=button],input,select,textarea,summary,.btn,[tabindex]):focus-visible{outline:none;box-shadow:var(--ds-focus)}
:where(.btn,.form-control,.form-select):focus{box-shadow:var(--ds-focus)}

/* ---------- header: glassy sticky (HIG) ---------- */
header.navbar-top{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--ds-outline-soft),0 6px 20px rgba(16,24,40,.04);transition:background var(--ds-t) var(--ds-ease)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  header.navbar-top{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
  header.navbar-top .dual-nav-first-layer{background:transparent}
  header.navbar-top .navbar-top-collapse{background:transparent}
}
header.navbar-top .navbar-top-collapse{border-top-color:var(--ds-outline-soft)}
header.navbar-top .nav-link{border-radius:var(--ds-r-sm);transition:background-color var(--ds-t-fast) var(--ds-ease),color var(--ds-t-fast) var(--ds-ease)}
header.navbar-top .nav-link:hover{background-color:var(--ds-state-hover);color:var(--ds-primary)}
header.navbar-top .nav-link:active{background-color:var(--ds-state-press)}
header.navbar-top .navbar-nav-icons li a:hover{color:var(--ds-primary)}
header.navbar-top .nav_sub .nav_area{border-radius:var(--ds-r-md);box-shadow:var(--ds-e3);border-color:var(--ds-outline-soft)}
header.navbar-top .search-box input{background:var(--ds-surface-2);border-color:transparent;transition:background var(--ds-t) var(--ds-ease),box-shadow var(--ds-t) var(--ds-ease)}
header.navbar-top .search-box input:hover{background:var(--ds-surface-3)}
header.navbar-top .search-box input:focus{background:#fff;box-shadow:inset 0 0 0 1px rgba(61,92,240,.45),0 0 0 3px rgba(61,92,240,.14)}
header.navbar-top .search-box button{background:transparent;border-color:transparent;transition:background var(--ds-t-fast) var(--ds-ease)}
header.navbar-top .search-box button:hover{background:var(--ds-state-hover)}
.dropdown-menu{border-color:var(--ds-outline-soft);border-radius:var(--ds-r-md);box-shadow:var(--ds-e3)}
.dropdown-item{border-radius:var(--ds-r-xs);transition:background var(--ds-t-fast) var(--ds-ease)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--ds-state-hover)}

/* mobile bottom tab bar: glass */
.cd-tabbar{box-shadow:0 -1px 0 var(--ds-outline-soft),0 -6px 20px rgba(16,24,40,.05)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .cd-tabbar{background:rgba(255,255,255,.82)!important;-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
}
.cd-tab{transition:color var(--ds-t-fast) var(--ds-ease),transform var(--ds-t-fast) var(--ds-ease)}
.cd-tab:active{transform:scale(.94)}

/* ---------- buttons (filled / tonal / outlined) ---------- */
.btn{border-radius:var(--ds-r-sm);transition:background-color var(--ds-t) var(--ds-ease),border-color var(--ds-t) var(--ds-ease),color var(--ds-t) var(--ds-ease),box-shadow var(--ds-t) var(--ds-ease),transform var(--ds-t-fast) var(--ds-ease)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn.rounded-pill,.btn-pill{border-radius:var(--ds-r-full)}
.btn-primary{background-color:var(--ds-primary);border-color:var(--ds-primary);color:var(--ds-on-primary);box-shadow:0 1px 2px rgba(61,92,240,.25)}
.btn-primary:hover{background-color:var(--ds-primary-hover);border-color:var(--ds-primary-hover);box-shadow:0 4px 12px rgba(61,92,240,.28)}
.btn-primary:active{background-color:var(--ds-primary-press)!important;border-color:var(--ds-primary-press)!important}
.btn-light,.btn-secondary-tonal,.btn-phoenix-primary,.btn-subtle-primary{background-color:var(--ds-primary-container);border-color:transparent;color:var(--ds-on-primary-container)}
.btn-outline-primary{border-color:rgba(61,92,240,.45);color:var(--ds-primary)}
.btn-outline-primary:hover{background-color:var(--ds-state-hover);color:var(--ds-primary);border-color:var(--ds-primary)}
.btn-outline-secondary{border-color:var(--ds-outline);color:var(--ds-on-surface-2)}
.btn-outline-secondary:hover{background-color:var(--ds-state-neutral);border-color:rgba(17,24,39,.18);color:var(--ds-on-surface)}
.cdv-btn,.adv-btn,.srch-submit,.psy-start{transition:filter var(--ds-t) var(--ds-ease),box-shadow var(--ds-t) var(--ds-ease),transform var(--ds-t-fast) var(--ds-ease)}
.cdv-btn:hover,.adv-btn:hover,.srch-submit:hover{filter:brightness(1.04);box-shadow:var(--ds-e2)}
.cdv-btn:active,.adv-btn:active,.srch-submit:active,.psy-start:active{transform:scale(.97)}

/* ---------- chips / tabs / badges ---------- */
.cdh-chip,.sec-chip,.blog-chip,.wt-tab,.srch-sort,.srch-kw__list a,.adv-rot,.badge{transition:background-color var(--ds-t-fast) var(--ds-ease),color var(--ds-t-fast) var(--ds-ease),box-shadow var(--ds-t-fast) var(--ds-ease),transform var(--ds-t-fast) var(--ds-ease)}
.cdh-chip:hover,.sec-chip:hover,.blog-chip:hover,.wt-tab:hover,.srch-sort:hover,.srch-kw__list a:hover{box-shadow:inset 0 0 0 999px var(--ds-state-hover)}
.cdh-chip:active,.sec-chip:active,.blog-chip:active,.wt-tab:active,.srch-sort:active{transform:scale(.96)}
.badge{border-radius:var(--ds-r-full);font-weight:600;letter-spacing:0}
.nav-tabs .nav-link,.nav-pills .nav-link{transition:background-color var(--ds-t-fast) var(--ds-ease),color var(--ds-t-fast) var(--ds-ease)}
.nav-pills .nav-link.active{background-color:var(--ds-primary)}

/* ---------- cards (surface + soft elevation, no hard borders) ---------- */
.card,.cd-card,.sec-card,.blog-card,.adv-card,.cdh-card,.cd-kpi,.cd-panel,.cd-blogleft,.cd-hubleft,.wt-card,.srch-card,.cdv-front,.cd-best__item,.cd-feat{border-color:var(--ds-outline-soft);box-shadow:var(--ds-e1);transition:box-shadow var(--ds-t) var(--ds-ease),transform var(--ds-t) var(--ds-ease),border-color var(--ds-t) var(--ds-ease)}
.card{border-radius:var(--ds-r-md)}
a.card:hover,a.cd-card:hover,.sec-card:hover,.blog-card:hover,.wt-card:hover,.srch-card:hover,.cd-best__item:hover{box-shadow:var(--ds-e2);border-color:var(--ds-outline)}
@media (hover:hover){.blog-card:hover,.sec-card:hover,.wt-card:hover,.srch-card:hover{transform:translateY(-2px)}}

/* ---------- inputs / search ---------- */
.form-control,.form-select{border-color:var(--ds-outline);transition:border-color var(--ds-t) var(--ds-ease),box-shadow var(--ds-t) var(--ds-ease),background-color var(--ds-t) var(--ds-ease)}
.form-control:not(.rounded-pill),.form-select{border-radius:var(--ds-r-sm)}
.form-control:hover,.form-select:hover{border-color:rgba(17,24,39,.2)}
.form-control:focus,.form-select:focus{border-color:var(--ds-primary);box-shadow:0 0 0 3px rgba(61,92,240,.16)}
.form-control::placeholder{color:var(--ds-on-surface-3)}
.form-check-input:checked{background-color:var(--ds-primary);border-color:var(--ds-primary)}

/* ---------- lists ---------- */
.list-group{border-radius:var(--ds-r-md)}
.list-group-item{border-color:var(--ds-outline-soft);transition:background-color var(--ds-t-fast) var(--ds-ease)}
.list-group-item-action:hover{background-color:var(--ds-state-neutral)}
.cdv-doctoc__li,.cd-blogleft__item,.cd-refs__tx{transition:background-color var(--ds-t-fast) var(--ds-ease)}
.pagination .page-link{border-radius:var(--ds-r-xs);border-color:transparent;transition:background-color var(--ds-t-fast) var(--ds-ease)}
.pagination .page-link:hover{background:var(--ds-state-hover)}
.pagination .active>.page-link,.pagination .page-item.active .page-link{background:var(--ds-primary);border-color:var(--ds-primary)}

/* ---------- modals / toasts ---------- */
.modal-content{border:0;border-radius:var(--ds-r-xl);box-shadow:var(--ds-e4)}
.modal-header{border-bottom-color:var(--ds-outline-soft)}
.modal-footer{border-top-color:var(--ds-outline-soft)}
.modal.fade .modal-dialog{transition:transform var(--ds-t-slow) var(--ds-ease-out),opacity var(--ds-t-slow) var(--ds-ease-out)}
.modal-backdrop.show{opacity:.42}
.toast{border:0;border-radius:var(--ds-r-md);box-shadow:var(--ds-e3)}
.btn-close{border-radius:var(--ds-r-full);transition:background-color var(--ds-t-fast) var(--ds-ease)}
.btn-close:hover{background-color:var(--ds-state-neutral)}

/* ---------- footer ---------- */
footer.cd-ft{border-top-color:var(--ds-outline-soft)}
footer.cd-ft a{transition:color var(--ds-t-fast) var(--ds-ease)}
footer.cd-ft a:hover{color:var(--ds-primary)}

/* ---------- page groups ---------- */
/* product */
.cdv-crumb a:hover{color:var(--ds-primary)}
.cdv-badge{border-radius:var(--ds-r-full)}
.cdv-buy,.cdv-buybox{border-radius:var(--ds-r-lg);box-shadow:var(--ds-e2)}
/* blog / 캐쉬노트 / UP */
.blog-card__thumb img,.sec-card img{transition:transform var(--ds-t-slow) var(--ds-ease)}
@media (hover:hover){.blog-card:hover .blog-card__thumb img{transform:scale(1.03)}}
.cd-share__btn{transition:transform var(--ds-t-fast) var(--ds-ease),box-shadow var(--ds-t-fast) var(--ds-ease)}
.cd-share__btn:hover{box-shadow:var(--ds-e2)}
.cd-share__btn:active{transform:scale(.94)}
/* psych tests: only motion/focus, theme colours untouched */
.psy-card{transition:transform var(--ds-t) var(--ds-ease),box-shadow var(--ds-t) var(--ds-ease)}
@media (hover:hover){.psy-card:hover{transform:translateY(-2px)}}
/* webtoon */
.wt-tabs .wt-tab{border-radius:var(--ds-r-full)}
/* advertise */
.adv-card{border-radius:var(--ds-r-lg)}
/* login / mypage / cart (static pages under /page/html) */
.login_wrap .form-control,.member_wrap .form-control{background:var(--ds-surface-1)}

/* ---------- ad containers: explicitly neutral (no transform/shadow/size) ---------- */
ins.adsbygoogle,.cd-prdad,.cd-adu,[data-cd-ad],.blog-ad,.cd-adrail,.cd-cad{transform:none!important;transition:none!important}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn:active,.cd-tab:active,.cdh-chip:active,.sec-chip:active,.blog-chip:active,.wt-tab:active{transform:none!important}
  .blog-card:hover,.sec-card:hover,.wt-card:hover,.srch-card:hover,.psy-card:hover{transform:none!important}
}