/* Local-only prototype: Naver-inspired HSE portal UI. */
:root {
  --hse-green: #08a65c;
  --hse-green-strong: #078a4e;
  --hse-green-soft: #e9f8f0;
  --hse-ink: #1e1e23;
  --hse-muted: #6b7078;
  --hse-line: #e5e8eb;
  --hse-surface: #ffffff;
  --hse-canvas: #f5f6f7;
}

/*
 * AdSense Auto ads: improve only the space surrounding filled in-page ads.
 * The Google creative/iframe itself is intentionally left untouched.
 */
.google-auto-placed {
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.google-auto-placed:has(ins.adsbygoogle[data-ad-status="filled"]) {
  margin-block: 28px !important;
  padding-block: 12px !important;
  border-radius: 14px !important;
  background: #edf5f1 !important;
  box-shadow:
    inset 0 1px #d9e9e0,
    inset 0 -1px #d9e9e0 !important;
}

/* The lead home ad spans the category + article columns; its creative stays centered. */
body.home #main .google-auto-placed.hse-auto-ad--full-grid {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--hse-auto-ad-grid-width) !important;
  max-width: none !important;
  margin-left: var(--hse-auto-ad-grid-offset) !important;
  margin-right: 0 !important;
  padding-block: 12px !important;
  text-align: center !important;
}

body.home #main .google-auto-placed.hse-auto-ad--full-grid > ins.adsbygoogle {
  align-self: center !important;
  margin-inline: auto !important;
}

body.single-post article.post .entry-content .google-auto-placed:has(ins.adsbygoogle[data-ad-status="filled"]) {
  margin-block: 40px !important;
}

body.home #main .google-auto-placed:has(ins.adsbygoogle[data-ad-status="filled"]),
body.archive #main .google-auto-placed:has(ins.adsbygoogle[data-ad-status="filled"]),
body.search #main .google-auto-placed:has(ins.adsbygoogle[data-ad-status="filled"]) {
  margin-block: 24px !important;
}

body.home #main .google-auto-placed.hse-auto-ad--full-grid:has(ins.adsbygoogle[data-ad-status="filled"]) {
  margin-block: 18px !important;
}

html,
body {
  background: var(--hse-canvas) !important;
  color: var(--hse-ink) !important;
  font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#header.ct-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--hse-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) !important;
}

#header .ct-container {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  min-height: 72px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

#header .site-title-container::before {
  width: 44px !important;
  height: 44px !important;
  margin-right: 12px !important;
  border: 1px solid #edf0f2 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#header .site-title {
  color: var(--hse-ink) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}

#header .site-title a:hover,
#header .ct-header-search:hover {
  color: var(--hse-green) !important;
}

#header .ct-header-search {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--hse-line) !important;
  border-radius: 50% !important;
  background: #fff !important;
}

#header .hse-tools-hub-link {
  min-height: 40px !important;
  padding: 7px 10px 7px 12px !important;
  border: 1px solid #dcefe5 !important;
  border-radius: 12px !important;
  background: var(--hse-green-soft) !important;
  box-shadow: none !important;
}

#header .hse-tools-hub-link__spark {
  color: var(--hse-green-strong) !important;
}

#header .hse-tools-hub-link__cue {
  color: #fff !important;
}

.hse-portal-hero {
  padding: 34px 20px 28px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--hse-line) !important;
}

.hse-portal-hero__inner {
  width: min(760px, 100%) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.hse-portal-hero__eyebrow {
  margin: 0 0 8px !important;
  color: var(--hse-green-strong) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.hse-portal-hero__title {
  margin: 0 0 20px !important;
  color: var(--hse-ink) !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 1.28 !important;
}

.hse-portal-search {
  display: flex !important;
  align-items: center !important;
  height: 60px !important;
  padding: 5px 6px 5px 22px !important;
  border: 3px solid var(--hse-green) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(8, 166, 92, 0.10) !important;
}

.hse-portal-search input {
  flex: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--hse-ink) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}

.hse-portal-search input::placeholder {
  color: #9aa0a6 !important;
}

.hse-portal-search button {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--hse-green) !important;
  color: #fff !important;
  font-size: 21px !important;
  cursor: pointer !important;
}

.hse-portal-categories {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: min(1000px, calc(100vw - 40px)) !important;
  max-width: none !important;
  margin: 16px 50% 0 !important;
  transform: translateX(-50%) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.hse-portal-categories::-webkit-scrollbar {
  display: none !important;
}

.hse-portal-categories a {
  flex: 0 0 auto !important;
  padding: 8px 12px !important;
  border: 1px solid var(--hse-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #4d5156 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.hse-portal-categories a:hover {
  border-color: #bfe8d1 !important;
  background: var(--hse-green-soft) !important;
  color: var(--hse-green-strong) !important;
}

.ct-trending-block {
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--hse-line) !important;
  background: #fff !important;
}

.ct-trending-block > .ct-container {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

.ct-trending-block .ct-module-title {
  color: var(--hse-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.ct-trending-block-item {
  min-height: 68px !important;
  padding: 8px !important;
  border: 1px solid var(--hse-line) !important;
  border-radius: 12px !important;
  background: var(--hse-surface) !important;
}

.ct-trending-block-item .ct-media-container {
  border-radius: 8px !important;
}

#main.site-main {
  padding-block: 32px 48px !important;
  background: var(--hse-canvas) !important;
}

#main > .ct-container {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  gap: 24px !important;
}

/* Compact, clearly labelled search results heading. */
body.search #main.site-main {
  padding-top: 18px !important;
}

body.search #main > .ct-container {
  padding-top: 0 !important;
}

body.search #main .hero-section {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

body.search #main .hero-section .entry-header {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 20px 26px !important;
  border: 1px solid var(--hse-line) !important;
  border-left: 5px solid var(--hse-green) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(30, 30, 35, 0.03) !important;
}

body.search #main .hero-section .page-title {
  margin: 0 !important;
  color: var(--hse-ink) !important;
  font-size: clamp(25px, 2.3vw, 31px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.04em !important;
  word-break: keep-all !important;
}

body.search #main .hero-section .hse-search-query {
  color: var(--hse-green-strong) !important;
  font-weight: 900 !important;
}

@media (min-width: 769px) {
  body.home #main.site-main {
    padding-top: 24px !important;
  }

  body.home #main > .ct-container {
    padding-top: 24px !important;
  }
}

#sidebar .ct-sidebar {
  padding: 10px !important;
  border: 1px solid var(--hse-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#sidebar .ct-widget {
  border-color: var(--hse-line) !important;
}

#sidebar .wp-block-heading {
  color: var(--hse-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

#sidebar .cat-item {
  min-height: 40px !important;
  border-radius: 9px !important;
  border-bottom: 0 !important;
}

#sidebar .cat-item:hover {
  background: var(--hse-green-soft) !important;
}

#sidebar .cat-item:hover a,
#sidebar .current-cat a {
  color: var(--hse-green-strong) !important;
}

.entries[data-layout="simple"] {
  gap: 14px !important;
}

.entries[data-layout="simple"] .entry-card {
  min-height: 190px !important;
  border: 1px solid var(--hse-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.entries[data-layout="simple"] .entry-card:hover {
  transform: translateY(-2px) !important;
  border-color: #cdd2d7 !important;
  box-shadow: 0 10px 28px rgba(30, 30, 35, 0.07) !important;
}

.entries[data-layout="simple"] .entry-card .ct-media-container {
  width: 286px !important;
  border: 0 !important;
  border-radius: 15px 0 0 15px !important;
  background: #e7ecf0 !important;
  box-shadow: inset -1px 0 #d8e0e6 !important;
}

.entries[data-layout="simple"] .entry-card .ct-media-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.entries[data-layout="simple"] .entry-card .card-content {
  padding: 20px 22px !important;
}

.entries[data-layout="simple"] .entry-card .meta-categories a {
  --hse-tag-bg: #f1f4f6;
  --hse-tag-fg: #5b6672;
  --hse-tag-ring: #e0e5e9;
  padding: 5px 9px !important;
  border-radius: 7px !important;
  background: var(--hse-tag-bg) !important;
  color: var(--hse-tag-fg) !important;
  box-shadow: inset 0 0 0 1px var(--hse-tag-ring) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

.entries[data-layout="simple"] .entry-card .meta-categories a:hover {
  background: var(--hse-tag-bg) !important;
  color: var(--hse-tag-fg) !important;
  box-shadow:
    inset 0 0 0 1px var(--hse-tag-ring),
    0 2px 7px rgba(31, 41, 55, 0.08) !important;
  transform: translateY(-1px) !important;
}

/* Low-chroma semantic tag palette: one warm accent among calm, cool families. */
.entries[data-layout="simple"] .meta-categories a[href*="/category/kosha-guide/"] {
  --hse-tag-bg: #edf8f2;
  --hse-tag-fg: #267454;
  --hse-tag-ring: #d5ecdf;
}

.entries[data-layout="simple"] .meta-categories a[href*="/category/serious-accident/"] {
  --hse-tag-bg: #fbf0ed;
  --hse-tag-fg: #99513f;
  --hse-tag-ring: #f0d7d0;
}

.entries[data-layout="simple"] .meta-categories a[href*="/category/safety-standards-rule/"] {
  --hse-tag-bg: #eff5fa;
  --hse-tag-fg: #416b88;
  --hse-tag-ring: #dbe8f1;
}

.entries[data-layout="simple"] .meta-categories a[href*="/category/safety-policy-trends/"] {
  --hse-tag-bg: #f4f1f8;
  --hse-tag-fg: #6f5f83;
  --hse-tag-ring: #e5dff0;
}

.entries[data-layout="simple"] .meta-categories a[href*="/category/hse-case-study/"] {
  --hse-tag-bg: #faf5e9;
  --hse-tag-fg: #80672f;
  --hse-tag-ring: #eee2c8;
}

.entries[data-layout="simple"] .meta-categories a[href*="/category/iso45001/"],
.entries[data-layout="simple"] .meta-categories a[href*="/category/jsa/"] {
  --hse-tag-bg: #eef7f7;
  --hse-tag-fg: #397071;
  --hse-tag-ring: #d9ebeb;
}

.entries[data-layout="simple"] .meta-categories a[href*="/category/etto-safety-system/"],
.entries[data-layout="simple"] .meta-categories a[href*="/category/safety-manager-vibe-coding/"] {
  --hse-tag-bg: #f2f3f7;
  --hse-tag-fg: #5d6479;
  --hse-tag-ring: #e1e3eb;
}

.entries[data-layout="simple"] .entry-card .entry-title {
  margin-bottom: 8px !important;
  color: var(--hse-ink) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}

.entries[data-layout="simple"] .entry-card .entry-title a:hover {
  color: var(--hse-green-strong) !important;
}

.entries[data-layout="simple"] .entry-card .entry-excerpt p {
  color: var(--hse-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.entries[data-layout="simple"] .entry-card .entry-meta[data-id="meta_2"] {
  border-top-color: #f0f2f4 !important;
}

@media (min-width: 769px) {
  /* Keep two-line titles useful without making every desktop row feel tall. */
  .entries[data-layout="simple"] .entry-card {
    min-height: 176px !important;
  }

  .entries[data-layout="simple"] .entry-card .card-content {
    padding: 14px 20px !important;
  }

  .entries[data-layout="simple"] .entry-card .entry-meta[data-id="meta_1"] {
    margin-bottom: 4px !important;
  }

  .entries[data-layout="simple"] .entry-card .entry-title {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    margin-bottom: 5px !important;
    line-height: 1.34 !important;
  }

  .entries[data-layout="simple"] .entry-card .entry-excerpt {
    margin-bottom: 8px !important;
  }

  .entries[data-layout="simple"] .entry-card .entry-meta[data-id="meta_2"] {
    padding-top: 7px !important;
  }
}

.ct-pagination .page-numbers.current,
.ct-pagination .next {
  border-color: var(--hse-green) !important;
  background: var(--hse-green) !important;
  color: #fff !important;
}

#footer.ct-footer {
  border-top: 1px solid var(--hse-line) !important;
  background: #fff !important;
}

#footer a:hover {
  color: var(--hse-green-strong) !important;
}

@media (min-width: 769px) and (max-width: 1120px) {
  #header .site-title {
    font-size: 16px !important;
  }

  #header .hse-tools-hub-link {
    min-height: 40px !important;
    padding: 7px 47px 7px 11px !important;
  }

  #header .hse-tools-hub-link__desc {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .google-auto-placed:has(ins.adsbygoogle[data-ad-status="filled"]) {
    margin-block: 12px !important;
    padding-block: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Auto ads injected into the padded home hero must use the full content width. */
  body.home .hse-portal-hero > .google-auto-placed:has(ins.adsbygoogle[data-ad-status="filled"]) {
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  body.single-post article.post .entry-content .google-auto-placed:has(ins.adsbygoogle[data-ad-status="filled"]) {
    margin-block: 28px !important;
  }

  #header .ct-container {
    width: calc(100% - 28px) !important;
    min-height: 58px !important;
  }

  #header .site-title-container::before {
    width: 36px !important;
    height: 36px !important;
    margin-right: 8px !important;
    border-radius: 10px !important;
  }

  #header .site-title {
    font-size: 14px !important;
  }

  #header .hse-tools-hub-link__desc {
    display: none !important;
  }

  .hse-portal-hero {
    padding: 24px 16px 22px !important;
  }

  .hse-portal-hero__title {
    margin-bottom: 16px !important;
    font-size: 25px !important;
  }

  .hse-portal-search {
    height: 54px !important;
    padding-left: 16px !important;
    border-width: 2px !important;
    border-radius: 15px !important;
  }

  .hse-portal-search input {
    font-size: 15px !important;
  }

  .hse-portal-search button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  .hse-portal-categories {
    justify-content: flex-start !important;
    padding-bottom: 3px !important;
  }

  #main.site-main {
    padding-block: 18px 28px !important;
  }

  body.search #main.site-main {
    padding-top: 12px !important;
  }

  body.search #main .hero-section {
    margin-bottom: 14px !important;
  }

  body.search #main .hero-section .entry-header {
    min-height: 0 !important;
    padding: 16px 17px !important;
    border-left-width: 4px !important;
    border-radius: 13px !important;
  }

  body.search #main .hero-section .page-title {
    font-size: 21px !important;
    line-height: 1.4 !important;
  }

  #main > .ct-container {
    width: calc(100% - 24px) !important;
  }

  .entries[data-layout="simple"] {
    gap: 12px !important;
  }

  .entries[data-layout="simple"] .entry-card {
    min-height: 0 !important;
    border-radius: 14px !important;
  }

  .entries[data-layout="simple"] .entry-card .ct-media-container {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 13px 13px 0 0 !important;
    box-shadow: inset 0 -1px #d8e0e6 !important;
  }

  .entries[data-layout="simple"] .entry-card .card-content {
    padding: 15px 16px 16px !important;
  }

  .entries[data-layout="simple"] .entry-card .entry-title {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .entries[data-layout="simple"] .entry-card .entry-excerpt p {
    font-size: 13px !important;
  }
}

/* Desktop sticky header: keep the whole header section as one 90px sticky block. */
@media (min-width: 1000px) {
  #header.ct-header {
    position: sticky !important;
    top: 0 !important;
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border-bottom: 0 !important;
    box-shadow: inset 0 -1px var(--hse-line) !important;
    transition: none !important;
  }

  #header [data-device="desktop"],
  #header [data-device="desktop"] .ct-sticky-container,
  #header [data-device="desktop"] [data-sticky],
  #header [data-device="desktop"] [data-row],
  #header [data-device="desktop"] [data-row] > .ct-container {
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    transition: none !important;
  }

  #header [data-device="desktop"] [data-sticky] {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  #header [data-device="desktop"] [data-row] > .ct-container,
  #header [data-device="desktop"] [data-column],
  #header [data-device="desktop"] [data-items] {
    align-items: center !important;
  }

  #header .hse-tools-hub-link {
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
  }
}

/* Keep archive pagination visible and in the document flow on phones. */
@media screen and (max-width: 768px) {
  body:is(.home, .blog, .archive, .search) .ct-pagination[data-pagination="simple"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  body:is(.home, .blog, .archive, .search) .ct-pagination[data-pagination="simple"] > div {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
  }

  body:is(.home, .blog, .archive, .search) .ct-pagination[data-pagination="simple"] > div .page-numbers {
    flex: 0 0 auto;
    width: auto;
    min-width: 40px !important;
    height: 44px !important;
    margin: 0;
    padding: 0 8px !important;
  }

  body:is(.home, .blog, .archive, .search) .ct-pagination[data-pagination="simple"] > a:is(.prev, .next) {
    position: static !important;
    transform: none !important;
    grid-row: 2;
    min-height: 44px;
    padding: 0 16px !important;
  }

  body:is(.home, .blog, .archive, .search) .ct-pagination[data-pagination="simple"] > a.prev {
    grid-column: 1;
    justify-self: start;
  }

  body:is(.home, .blog, .archive, .search) .ct-pagination[data-pagination="simple"] > a.next {
    grid-column: 2;
    justify-self: end;
  }
}