/* KOLMAR KOREA: official identity and media, shared across the site. */
:root {
  --lux-ink: #172c47;
  --lux-ink-2: #264568;
  --lux-muted: #617185;
  --lux-line: rgba(23, 64, 116, .15);
  --lux-rose: #216cb4;
  --lux-rose-deep: #174477;
  --lux-gold: #6eabc9;
  --lux-pearl: #fff;
  --lux-blush: #edf3f8;
  --lux-shadow: 0 24px 64px rgba(22, 53, 89, .09);
  --lux-soft-shadow: 0 12px 36px rgba(22, 53, 89, .06);
}

body { background: #fff !important; color: #172c47; }
body::before, body::after { display: none !important; }
.brand-name, .detail-title, .section-head h2, .contact-card h2,
.product-intro-head h2, .intro-title, .notice-title {
  font-family: "Noto Sans KR", sans-serif !important;
}
.kolmar-logo, .kolmar-admin-logo, .detail-company-logo { display: block; width: 160px; max-width: 100%; height: auto; object-fit: contain; }
.account-topbar .brand { gap: 14px; }
.kolmar-admin-logo { margin-inline: auto; }
.sidebar .brand { flex-wrap: wrap; justify-content: center; }
.sidebar .kolmar-admin-logo { flex: 0 0 150px; }
.login-view { background: #edf3f9 !important; }
.login-panel { background: #fff !important; }
.login-header h1 { font-family: "Noto Sans KR", sans-serif !important; color: #172c47 !important; font-size: clamp(22px, 5vw, 30px); }
.login-form button[type="submit"] { background: #174477 !important; box-shadow: none !important; }

#site .topbar { grid-template-columns: minmax(160px, 1fr) auto minmax(40px, 1fr) !important; height: 94px !important; min-height: 94px !important; padding-inline: 5vw !important; border-bottom: 1px solid rgba(255,255,255,.22) !important; }
#site .topbar.is-scrolled { height: 84px !important; min-height: 84px !important; }
#site .topbar .brand-logo-image { width: 176px !important; filter: none !important; }
#site .topbar.is-scrolled .brand-logo-image { content: url("./assets/kolmar/logo.png"); filter: none !important; }
#site .topbar .nav-links { gap: clamp(2rem, 5vw, 5rem) !important; }
#site .topbar .nav-links a { font-size: 15px !important; font-weight: 600 !important; letter-spacing: .03em !important; }
#site .topbar .brand::before { content: none !important; }

.hero.hero-generated { min-height: min(900px, 100svh) !important; background: #152438 !important; }
.hero.hero-generated .hero-media { height: min(900px, 100svh) !important; min-height: 620px !important; }
.hero.hero-generated .hero-brand-image img { transform: none !important; filter: none !important; }
.hero-brand-video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.hero.hero-generated .hero-brand-shade { background: linear-gradient(90deg, rgba(10,26,44,.64), rgba(10,26,44,.08) 80%), linear-gradient(180deg, rgba(8,23,40,.3), transparent 30%) !important; }
.hero.hero-generated .hero-video-slide .hero-brand-shade { background: linear-gradient(180deg, rgba(8,23,40,.65), transparent 28%, transparent 60%, rgba(8,23,40,.6)) !important; }
.hero.hero-generated .hero-brand-overlay { inset: 0 !important; width: 100% !important; transform: none !important; }
.hero.hero-generated .hero-brand-content { left: 8vw !important; top: 34% !important; width: 84vw !important; max-width: 900px !important; }
.hero.hero-generated .hero-brand-logo img { width: 165px !important; filter: none !important; }
.hero.hero-generated .hero-brand-copy { margin: 0; width: 100% !important; max-width: 100% !important; }
.hero.hero-generated .hero-brand-copy span { font-family: "Noto Sans KR", sans-serif !important; font-size: clamp(30px, 4.1vw, 62px) !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: -.035em !important; }
.hero.hero-generated .hero-brand-copy .hero-subtitle { margin-top: 24px; font-size: clamp(14px, 1.4vw, 20px) !important; font-weight: 400 !important; letter-spacing: .03em !important; }
.hero.hero-generated .hero-video-slide .hero-brand-content { top: auto !important; bottom: 105px !important; }
.hero.hero-generated .hero-video-slide .hero-brand-logo { display: none; }
.hero.hero-generated .hero-video-slide .hero-brand-copy span { font-size: clamp(17px, 2vw, 26px) !important; line-height: 1.5 !important; }
.hero.hero-generated .hero-brand-dots { bottom: 44px !important; gap: 12px !important; }
.hero.hero-generated .hero-brand-dot { position: relative; width: 34px !important; height: 4px !important; border-radius: 0 !important; background: rgba(255,255,255,.42) !important; }
.hero.hero-generated .hero-brand-dot::after { content: ""; position: absolute; inset: -18px -4px; }
.hero.hero-generated .hero-brand-dot.is-active { width: 60px !important; background: #fff !important; }
.hero-playback { position: absolute; right: 5vw; bottom: 28px; z-index: 8; min-height: 40px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.65); border-radius: 24px; background: rgba(9,27,48,.35); color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.hero-playback:hover, .hero-playback:focus-visible { background: #174477; }

#products { padding-top: 40px !important; }
.company-overview-panel h2 { color: #172c47; font-weight: 500; letter-spacing: -.025em; }
.company-overview-stage { background: linear-gradient(90deg, rgba(17,52,86,.84), rgba(17,52,86,.66)), url("./assets/kolmar/company-landscape.jpg") center / cover; }
.company-overview-card { background: transparent; border-color: rgba(255,255,255,.4); }
.company-overview-card strong { font-weight: 600; }
.product-matrix-block, .product-intro-block { background: transparent !important; border-color: #e1e9f1 !important; box-shadow: none !important; }
#products .product-matrix-card, #products .product-marquee-card { background: #fff !important; border: 1px solid #e1e9f1 !important; box-shadow: 0 10px 30px rgba(17,52,86,.04) !important; border-radius: 12px !important; }
#products .product-matrix-card { grid-template-rows: minmax(220px, 1fr) minmax(54px, auto) 44px !important; }
/* Opaque product photos sit on the same white canvas without a rectangular shadow. */
#products .product-matrix-media, #products .product-marquee-media { position: relative !important; background: #fff !important; border: 0 !important; box-shadow: none !important; border-radius: 6px !important; }
#products .product-matrix-grid .product-matrix-card img, #products .product-marquee-media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; padding: 5px !important; filter: none !important; mix-blend-mode: normal !important; }
#products .product-matrix-media::before, #products .product-matrix-media::after, #products .product-matrix-orbit { display: none !important; }
#products .product-matrix-name { color: #172c47 !important; font-weight: 600 !important; }
#products .product-matrix-buy-btn { background: #174477 !important; color: #fff !important; border: 0 !important; border-radius: 5px !important; box-shadow: none !important; }
.product-marquee-copy, .product-marquee-info { background: #fff !important; }
.tech-card.glass-panel, .contact-card.glass-panel { background: #f4f7fa !important; border: 1px solid #e0e7ee !important; box-shadow: none !important; border-radius: 12px !important; }
.tech-card h3 { color: #174477 !important; }
.section-kicker { color: #216cb4 !important; }
.contact-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.kolmar-contact-link { flex-shrink: 0; display: inline-flex; gap: 32px; padding: 15px 22px; border: 1px solid #174477; color: #174477; border-radius: 4px; }
.kolmar-contact-link:hover { background: #174477; color: #fff; }
.bottom-image-card { border: 1px solid #e0e7ee !important; background: #fff !important; border-radius: 10px !important; box-shadow: none !important; }
.bottom-image-title { color: #172c47 !important; }
.bottom-image-media { background: #eef3f8 !important; }
.bottom-image-media img { object-fit: cover !important; }
.kolmar-footer { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 44px max(5vw, 24px); border-top: 1px solid #e0e7ee; color: #617185; background: #f7f9fb; font-size: 13px; line-height: 1.9; }
.kolmar-footer p { margin: 0 0 10px; }
.kolmar-footer > a { flex-shrink: 0; color: #174477; }
.kolmar-footer img { height: auto; }
.auth-brand-panel { background: linear-gradient(140deg, rgba(9,34,60,.85), rgba(12,49,79,.6)), url("./assets/kolmar/hero-beauty.jpg") center / cover !important; }
body[data-auth-mode] .auth-brand-panel h2,
body[data-auth-mode] .auth-brand-panel > p,
body[data-auth-mode] .auth-proof-grid dt,
body[data-auth-mode] .auth-proof-grid dd { color: #fff !important; }
.btn-primary, .auth-link-btn, .order-btn,
.metric-option-btn.is-active, .metric-option-btn[aria-pressed="true"] { background: #174477 !important; color: #fff !important; box-shadow: 0 8px 22px rgba(23,68,119,.14) !important; }
.product-visual { background: #fff !important; box-shadow: none !important; }
.product-visual img { object-fit: contain !important; filter: none !important; mix-blend-mode: normal !important; }

@media (max-width: 760px) {
  #site .topbar, #site .topbar.is-scrolled { grid-template-columns: 1fr !important; grid-template-rows: 40px 38px !important; height: 100px !important; min-height: 100px !important; padding: 8px 20px !important; gap: 5px !important; }
  #site .topbar .brand { height: 40px !important; }
  #site .topbar .brand-logo-image { width: 132px !important; }
  #site .topbar .nav-links { height: 38px !important; gap: 0 !important; }
  #site .topbar .nav-links a { font-size: 13px !important; }
  #site .topbar .nav-links a::after { bottom: 1px !important; }
  .hero.hero-generated { min-height: 620px !important; }
  .hero.hero-generated .hero-media { height: 84svh !important; min-height: 620px !important; max-height: 780px !important; }
  .hero.hero-generated .hero-brand-content { left: 7vw !important; top: 35% !important; max-width: 86vw !important; }
  .hero.hero-generated .hero-brand-copy span { font-size: clamp(25px, 6.8vw, 43px) !important; }
  .hero.hero-generated .hero-brand-logo img { width: 135px !important; }
  .hero.hero-generated .hero-brand-copy .hero-subtitle { margin-top: 18px; font-size: 13px !important; }
  .hero.hero-generated .hero-video-slide .hero-brand-content { bottom: 125px !important; }
  .hero.hero-generated .hero-video-slide .hero-brand-copy span { font-size: 21px !important; }
  .hero.hero-generated .hero-brand-dots { bottom: 66px !important; }
  .hero-playback { bottom: 14px; right: 20px; min-height: 36px; padding: 6px 14px; }
  #products .product-matrix-card { grid-template-rows: 165px minmax(58px, auto) 36px !important; }
  #products .product-matrix-name { -webkit-line-clamp: 3 !important; max-height: none !important; font-size: 12px !important; }
  .contact-card { flex-direction: column; align-items: flex-start; }
  .kolmar-footer { flex-direction: column; gap: 22px; padding: 32px 24px; font-size: 12px; }
  .kolmar-logo { width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .hero-brand-slide, .hero-brand-copy span { animation: none !important; transition: none !important; }
}