/* ===== Reset & Base ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (max-width: 768px) { html { scroll-padding-top: 60px; } }
body {
    /* --site-font-family is set inline by heroFontHead() from the admin's
       "사이트 전체 글씨체" choice; falls back to the original body font. */
    font-family: var(--site-font-family, 'Noto Sans KR', sans-serif);
    color: #333;
    line-height: 1.7;
    background: #fff;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
ul { list-style: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ===== Header =====
   At top of page (over hero) the header is fully transparent so the hero image
   reads as one continuous background; nav/logo turn white with a soft drop
   shadow to stay legible against any image. Once the user scrolls past the
   hero (.scrolled toggled by main.js), the original translucent-white glass
   look returns so dark nav text is readable on the white body. */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.site-header.scrolled {
    background: rgba(255,255,255,0.85);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
/* The glass blur lives on a pseudo-element, NOT on .site-header itself.
   Applying backdrop-filter directly to .site-header makes it the containing
   block for its position:fixed descendants, which clipped the mobile menu
   (.main-nav) to the 60px header box once the user had scrolled — the menu
   toggled open but had ~0 visible height. ::before is a child, not an
   ancestor of .main-nav, so the blur no longer traps the fixed menu. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    transition: opacity 0.3s;
}
.site-header.scrolled::before { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header.scrolled { background: rgba(255,255,255,0.95); }
}
.header-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 30px; height: 80px;
}
.logo a { display: flex; flex-direction: column; align-items: flex-start; }
.logo-text {
    font-size: 1.6rem; font-weight: 900; color: #fff; letter-spacing: -1px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.45);
    transition: color 0.3s, text-shadow 0.3s;
}
.logo-sub {
    font-size: 0.65rem; color: rgba(255,255,255,0.85); letter-spacing: 3px;
    font-weight: 400; margin-top: -2px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    transition: color 0.3s, text-shadow 0.3s;
}
.logo-img { max-height: 45px; width: auto; display: block; }
.site-header.scrolled .logo-text { color: #1a5276; text-shadow: none; }
.site-header.scrolled .logo-sub  { color: #7f8c8d; text-shadow: none; }

/* Language Switcher */
.lang-switcher { display: flex; gap: 4px; margin-left: 15px; align-items: center; }
.lang-switcher a {
    display: block; padding: 4px 10px; font-size: 0.75rem; font-weight: 600;
    color: #fff; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.55); border-radius: 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
    transition: all 0.3s;
}
.lang-switcher a:hover { color: #fff; border-color: #fff; }
.lang-switcher a.active { color: #fff; background: #1a5276; border-color: #1a5276; text-shadow: none; }
.site-header.scrolled .lang-switcher a { color: #7f8c8d; border-color: #ddd; text-shadow: none; }
.site-header.scrolled .lang-switcher a:hover { color: #1a5276; border-color: #1a5276; }
.site-header.scrolled .lang-switcher a.active { color: #fff; background: #1a5276; border-color: #1a5276; }

/* Navigation */
.nav-list { display: flex; gap: 0; }
.nav-item { position: relative; }
.nav-item > a {
    display: block; padding: 28px 24px;
    font-weight: 500; font-size: 1rem; color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    transition: color 0.3s, text-shadow 0.3s, opacity 0.3s;
}
.nav-item > a:hover { opacity: 0.8; }
.site-header.scrolled .nav-item > a { color: #2c3e50; text-shadow: none; opacity: 1; }
.site-header.scrolled .nav-item > a:hover { color: #1a5276; opacity: 1; }
.nav-item.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown {
    position: absolute; top: 100%; left: 0;
    background: #fff; min-width: 200px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border-radius: 0 0 8px 8px;
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
}
.dropdown li a {
    display: block; padding: 12px 20px;
    font-size: 0.9rem; color: #555;
    transition: all 0.2s;
    border-bottom: 1px solid #f5f5f5;
}
.dropdown li:last-child a { border-bottom: none; }
.dropdown li a:hover { background: #f8f9fa; color: #1a5276; padding-left: 26px; }

/* Mobile Toggle */
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; }
.mobile-toggle span {
    display: block; width: 24px; height: 2px; background: #fff;
    margin: 5px 0; transition: 0.3s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.site-header.scrolled .mobile-toggle span { background: #333; box-shadow: none; }

/* ===== Hero Section ===== */
.hero-section {
    position: relative;
    /* Hero now extends to the top of the viewport so the image fills the
       entire space behind the (translucent) fixed header. The header overlap
       zone is exactly the header's height (80px desktop / 60px mobile), so
       padding-top reserves that space for the centred content. Height scales
       with viewport width: 35.4vw = 680px at 1920px wide (= 600px visible
       below the 80px header — same visible area as before the redesign). */
    width: 100%;
    height: clamp(320px, 35.4vw, 680px);
    margin-top: 0;
    padding-top: 80px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1a5276 0%, #2980b9 50%, #1a5276 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-sizing: border-box;
}
.hero-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.45);
}
.hero-content {
    position: relative; z-index: 1;
    text-align: center; color: #fff;
    padding: 20px 24px;
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
}
.hero-content h1 {
    font-size: clamp(1.6rem, 4.5vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 10px; letter-spacing: -1px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    line-height: 1.25;
    word-break: keep-all;
}
.hero-content p {
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
    font-weight: 300;
    opacity: 0.9;
    line-height: 1.6;
    word-break: keep-all;
}

/* ===== Page Content ===== */
.page-content { padding: 80px 0; }
.page-content .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.section-title {
    text-align: center; margin-bottom: 50px;
}
.section-title h2 {
    font-size: 2rem; font-weight: 700; color: #1a5276;
    margin-bottom: 10px;
}
.section-title p { color: #7f8c8d; font-size: 1rem; }
.section-title .bar {
    display: block; width: 50px; height: 3px;
    background: #1a5276; margin: 15px auto 0;
}

/* ===== CEO Greeting ===== */
.ceo-section { display: flex; gap: 60px; align-items: flex-start; }
.ceo-photo { flex: 0 0 300px; }
.ceo-photo .photo-placeholder {
    width: 100%; max-width: 300px;
    aspect-ratio: 15/19;
    background: #ecf0f1; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #bdc3c7; font-size: 0.9rem;
    overflow: hidden;
}
.ceo-photo .photo-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ceo-text { flex: 1; }
.ceo-text h3 { font-size: 1.6rem; color: #1a5276; margin-bottom: 20px; }
.ceo-text p { margin-bottom: 16px; color: #555; line-height: 1.9; }
.ceo-text .ceo-name { margin-top: 30px; text-align: right; font-weight: 700; color: #1a5276; font-size: 1.1rem; }

/* Image-free CEO greeting: a single centered column. The paragraphs carry
   .reveal so each one slides up + fades in as it scrolls into view, giving
   the letter a gentle "rising from below" feel the further you read down. */
.ceo-section--solo { display: block; }
.ceo-section--solo .ceo-text { flex: none; max-width: 720px; margin: 0 auto; text-align: center; }
.ceo-section--solo .ceo-text h3 { margin-bottom: 36px; line-height: 1.5; }
.ceo-section--solo .ceo-text p {
    color: #44474a;
    text-align: left;
    font-size: 1.05rem;
    line-height: 2.05;
    margin-bottom: 22px;
    letter-spacing: -0.01em;
    word-break: keep-all;
}
/* Lead paragraph — the opening greeting reads clearly larger, darker and
   lighter-weight, like the intro line of a letter. Kept a clear step above
   the body so the short opening line never reads as smaller than the longer
   body paragraphs (noticeable on phones, esp. zoomed-out 'PC version'). */
.ceo-section--solo .ceo-text p:first-of-type {
    font-size: 1.35rem;
    line-height: 1.95;
    color: #2c3e50;
    font-weight: 500;
    margin-bottom: 30px;
}
.ceo-section--solo .ceo-text .ceo-name {
    text-align: right;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid #e3e8ec;
}
/* Signature: title small + muted on its own line, name large below it. */
.ceo-section--solo .ceo-name .ceo-name-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: #6b7177;
    margin-bottom: 8px;
    letter-spacing: 0;
}
.ceo-section--solo .ceo-name .ceo-name-person {
    display: block;
    font-size: 1.5rem;
    color: #1a5276;
    letter-spacing: 0.08em;
}

/* 'PC 버전으로 보기'(body.pc-view)에서는 카카오톡·네이버 등 인앱 브라우저가
   강제 viewport(width=1200)를 무시하거나 모바일 미디어쿼리를 섞어 적용하더라도
   CEO 인사말이 항상 PC(데스크탑) 글씨 위계로 보이도록 강제한다. 이렇게 하면
   짧은 도입부 인사말이 본문보다 작게 표기되던 문제가 기기에 상관없이 해결된다.
   .pc-view(클래스)가 미디어쿼리 규칙보다 우선순위가 높아 항상 적용된다. */
body.pc-view .ceo-text h3 { font-size: 1.6rem; }
body.pc-view .ceo-section--solo .ceo-text { max-width: 720px; }
body.pc-view .ceo-section--solo .ceo-text p {
    font-size: 1.05rem;
    line-height: 2.05;
}
body.pc-view .ceo-section--solo .ceo-text p:first-of-type {
    font-size: 1.35rem;
    line-height: 1.95;
}

/* ===== History — Year-grouped Timeline =====
   Each year folds into a <details> block so a long history doesn't drown
   the page; the three most recent groups open by default (server-side
   `open` attribute), older years are one click away. Inside each open
   group the original symmetric timeline (center rail, alternating left/
   right cards, dot marker per row) is preserved, so the page keeps the
   "company milestone" feel even after many entries pile up. Items rise
   into view as the user scrolls (handled by .reveal in main.js), and the
   same animation re-fires when a previously-closed group is expanded. */
.timeline-grouped { padding: 10px 0 40px; max-width: 920px; margin: 0 auto; }

.year-group { margin-bottom: 18px; }
.year-group:last-child { margin-bottom: 0; }

.year-group-summary {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: #fff;
    border: 1px solid #e5e9ee;
    border-radius: 999px;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.year-group-summary::-webkit-details-marker { display: none; }
.year-group-summary::marker { content: ''; }
.year-group-summary:hover {
    border-color: #1a5276;
    box-shadow: 0 6px 18px -10px rgba(26, 82, 118, 0.35);
}
.year-group-summary:focus-visible { outline: 2px solid #2980b9; outline-offset: 2px; }
.year-group[open] .year-group-summary {
    background: linear-gradient(135deg, #1a5276 0%, #2980b9 100%);
    border-color: transparent;
    box-shadow: 0 8px 22px -12px rgba(26, 82, 118, 0.55);
}
.year-group-year {
    font-size: 1.3rem; font-weight: 800; color: #1a5276;
    letter-spacing: -0.5px;
    transition: color 0.25s;
}
.year-group[open] .year-group-year { color: #fff; }
.year-group-chevron {
    margin-left: auto;
    color: #95a5a6; font-size: 0.9rem;
    transition: transform 0.3s ease, color 0.25s;
}
.year-group[open] .year-group-chevron { transform: rotate(180deg); color: #fff; }

/* Each group is its own self-contained mini-timeline. The rail sits at the
   left edge (not centered), so the year label + body of every entry reads
   left-to-right rather than alternating across a center line. Soft gradient
   fades at the top/bottom of the rail keep the line from looking abruptly
   cut where it meets the year header above. */
.year-group-items {
    position: relative;
    padding: 26px 0 8px;
}
.year-group-items::before {
    content: '';
    position: absolute;
    left: 28px; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
        transparent 0%, #dde1e3 14%, #dde1e3 86%, transparent 100%);
}

.timeline-item {
    display: flex; align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
    padding-left: 60px;
    position: relative;
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before {
    content: ''; position: absolute; left: 28px; top: 10px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #1a5276; border: 3px solid #fff;
    box-shadow: 0 0 0 2px #1a5276;
    transform: translateX(-50%); z-index: 1;
}
.timeline-year {
    flex: 0 0 90px;
    text-align: left;
    font-size: 1rem; font-weight: 700; color: #2980b9;
    padding-top: 4px;
    white-space: nowrap;
}
.timeline-content {
    flex: 1; min-width: 0;
    color: #555; line-height: 1.8;
    text-align: left;
}

/* Scroll-reveal: each row fades + slides up as it enters the viewport.
   The center dot scales in with a slight delay so it lands after the
   row's content, giving a subtle "pop". The same .is-visible class is
   applied by main.js when a closed year group is expanded, so the
   animation re-fires for items the user wasn't able to see at load. */
.timeline-item.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.timeline-item.reveal::before {
    transform: translateX(-50%) scale(0.4);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
                opacity 0.3s ease-out 0.15s;
}
.timeline-item.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.timeline-item.reveal.is-visible::before {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .timeline-item.reveal,
    .timeline-item.reveal::before { opacity: 1; transform: none; transition: none; }
    .timeline-item.reveal::before { transform: translateX(-50%); }
    .year-group-summary, .year-group-year, .year-group-count,
    .year-group-chevron { transition: none; }
}

/* ===== Certifications Grid ===== */
.cert-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}
.cert-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden; transition: transform 0.3s;
}
.cert-card:hover { transform: translateY(-5px); }
.cert-card-img {
    /* Certificates are portrait (A4) documents, so use a tall box and
       object-fit:contain — the whole certificate shows larger without being
       cropped. White background + padding frames it like a document. */
    aspect-ratio: 3/4; background: #fff;
    display: flex; align-items: center; justify-content: center; color: #bdc3c7;
    overflow: hidden; padding: 12px;
}
.cert-card-img img { width: 100%; height: 100%; object-fit: contain; }
.cert-card-body { padding: 20px; text-align: center; }
.cert-card-body h4 { font-size: 1.12rem; color: #2c3e50; margin-bottom: 8px; }
.cert-card-body p { font-size: 0.92rem; color: #7f8c8d; }
a.cert-card-link { text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
a.cert-card-link:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.cert-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cert-description { font-size: 0.85rem; color: #555; line-height: 1.8; }
.cert-description table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.85rem; }
.cert-description table th, .cert-description table td { border: 1px solid #ddd; padding: 8px 10px; text-align: center; }
.cert-description table th { background: #f0f4f8; color: #1a5276; font-weight: 600; }
.cert-description table tr:nth-child(even) { background: #fafafa; }
.cert-description ul, .cert-description ol { padding-left: 20px; margin: 8px 0; }
.cert-description p { margin-bottom: 8px; }

/* ===== Notices / Board ===== */
.board-table { width: 100%; border-collapse: collapse; }
.board-table thead { background: #1a5276; color: #fff; }
.board-table th { padding: 14px 16px; font-weight: 500; font-size: 0.9rem; }
.board-table td { padding: 14px 16px; border-bottom: 1px solid #eee; font-size: 0.9rem; }
.board-table tbody tr:hover { background: #f8f9fa; }
.board-table .col-no { width: 80px; text-align: center; }
.board-table .col-title { text-align: left; }
.board-table .col-date { width: 120px; text-align: center; }
.board-table .col-views { width: 80px; text-align: center; }

.board-title-link { color: #2c3e50; transition: color 0.2s; }
.board-title-link:hover { color: #1a5276; }

.board-view { background: #fff; border-radius: 12px; box-shadow: 0 2px 20px rgba(0,0,0,0.06); overflow: hidden; }
.board-view-header { padding: 30px; border-bottom: 1px solid #eee; }
.board-view-header h2 { font-size: 1.4rem; color: #2c3e50; margin-bottom: 10px; }
.board-view-meta { color: #999; font-size: 0.85rem; }
.board-view-body { padding: 30px; line-height: 1.9; color: #555; min-height: 200px; }

/* Notice attachments */
.attachment-box {
    margin: 0 30px 30px;
    padding: 18px 22px;
    background: #f8fafc;
    border: 1px solid #e5e9ee;
    border-radius: 10px;
}
.attachment-head {
    font-size: 0.88rem; font-weight: 700; color: #1a2e40;
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.attachment-head i { color: #1a5276; }
.attachment-head .att-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px;
    background: #1a5276; color: #fff;
    border-radius: 11px; font-size: 0.72rem;
}
.attachment-list { list-style: none; padding: 0; margin: 0; }
.attachment-list li { margin-bottom: 8px; }
.attachment-list li:last-child { margin-bottom: 0; }
.attachment-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e5e9ee;
    border-radius: 8px;
    text-decoration: none;
    color: #2c3e50;
    transition: all .2s;
}
.attachment-link:hover {
    border-color: #1a5276;
    background: #f4f8fb;
    transform: translateX(2px);
}
.attachment-link > i:first-child {
    font-size: 1.5rem; color: #1a5276; width: 32px; text-align: center; flex-shrink: 0;
}
.attachment-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.92rem; font-weight: 500;
}
.attachment-size {
    font-size: 0.78rem; color: #95a5a6;
    flex-shrink: 0;
}
.attachment-dl {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: #eaf4fb; color: #1a5276;
    flex-shrink: 0; transition: all .2s;
}
.attachment-link:hover .attachment-dl { background: #1a5276; color: #fff; }

@media (max-width: 600px) {
    .attachment-box { margin: 0 16px 24px; padding: 14px 16px; }
    .attachment-link { padding: 10px 12px; gap: 10px; }
    .attachment-name { font-size: 0.85rem; }
    .attachment-size { display: none; }
}

.pagination { display: flex; justify-content: center; gap: 5px; margin-top: 30px; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px;
    font-size: 0.9rem; color: #555; border: 1px solid #ddd;
    transition: all 0.2s;
}
.pagination a:hover { background: #1a5276; color: #fff; border-color: #1a5276; }
.pagination .current { background: #1a5276; color: #fff; border-color: #1a5276; }

/* ===== Products ===== */
.products-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
}
.product-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden; transition: transform 0.3s;
}
.product-card:hover { transform: translateY(-5px); }
.product-card-img {
    aspect-ratio: 4/3; background: #ecf0f1;
    display: flex; align-items: center; justify-content: center; color: #bdc3c7;
    overflow: hidden;
}
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card-body { padding: 20px; }
.product-card-body h4 { font-size: 1rem; color: #2c3e50; margin-bottom: 6px; }
.product-card-body .category { font-size: 0.8rem; color: #1a5276; margin-bottom: 8px; }
.product-card-body p { font-size: 0.85rem; color: #7f8c8d; }
/* 텍스트 전용 카드 (수거 가능 품목 — 사진 없이 글만 표시) */
.waste-item-card { border-top: 3px solid #1a5276; }
.waste-item-card .product-card-body h4 i { color: #1a5276; margin-right: 6px; }

/* ===== Business Pages ===== */
.business-content { line-height: 1.9; color: #555; }
.inquiry-cta { margin-top: 40px; padding: 28px 24px; background: #f4f8fb; border: 1px solid #e1ebf2; border-radius: 12px; text-align: center; }
.inquiry-cta p { margin-bottom: 16px; font-size: 1.05rem; color: #1a2e40; font-weight: 500; }
.business-content h3 { font-size: 1.4rem; color: #1a5276; margin: 30px 0 15px; }
.business-content p { margin-bottom: 16px; }
.business-content ul { padding-left: 20px; margin-bottom: 16px; }
.business-content ul li { position: relative; padding-left: 15px; margin-bottom: 8px; }
.business-content ul li::before {
    content: ''; position: absolute; left: 0; top: 10px;
    width: 6px; height: 6px; border-radius: 50%; background: #1a5276;
}

.feature-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px; margin: 40px 0;
}
/* Compact 6-up variant (e.g. WDF treatment process). Forces a single row of
   6 cards on wide screens, then gracefully steps down on narrower viewports.
   Card padding/icon size shrinks slightly to keep them readable at width. */
.feature-grid--six {
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}
.feature-grid--six .feature-card { padding: 26px 14px 22px; }
.feature-grid--six .feature-card i { font-size: 2rem; margin-bottom: 14px; }
.feature-grid--six .feature-card h4 { font-size: 0.98rem; word-break: keep-all; }
.feature-grid--six .feature-card p  { font-size: 0.82rem; }
.feature-grid--six .feature-card-img-icon { width: 56px; height: 56px; margin-bottom: 14px; }
@media (max-width: 1100px) {
    .feature-grid--six { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .feature-grid--six { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .feature-grid--six .feature-card { padding: 22px 10px 18px; }
}
.feature-card {
    text-align: center; padding: 40px 25px;
    background: #fff; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.3s;
}
.feature-card:hover { transform: translateY(-5px); }
.feature-card i { font-size: 2.5rem; color: #1a5276; margin-bottom: 20px; }
.feature-card h4 { font-size: 1.1rem; color: #2c3e50; margin-bottom: 10px; }
.feature-card p { font-size: 0.9rem; color: #7f8c8d; }
.feature-card-img-icon { width: 72px; height: 72px; object-fit: contain; margin: 0 auto 20px; display: block; }

a.product-card-link { text-decoration: none; color: inherit; display: block; }
a.product-card-link:hover .product-card { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }

/* ===== Product Detail Page (editorial) ===== */
.pd { padding: 80px 0 100px; color: #1a2430; }
.pd a { color: inherit; }

/* Breadcrumb */
.pd-crumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 0.78rem; color: #8a97a3; letter-spacing: 0.2px;
    padding-bottom: 28px; margin-bottom: 60px;
    border-bottom: 1px solid #eceff3;
}
.pd-crumbs a { text-decoration: none; color: #8a97a3; transition: color .2s; }
.pd-crumbs a:hover { color: #1a2430; }
.pd-crumbs span { color: #cdd4db; }
.pd-crumbs em { color: #1a2430; font-style: normal; font-weight: 500; }

/* Head block */
.pd-head {
    display: grid; grid-template-columns: 1fr; gap: 40px;
    margin-bottom: 70px;
}
@media (min-width: 900px) {
    .pd-head { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 72px; align-items: center; }
}
.pd-head-figure {
    margin: 0; background: #f5f6f8;
    aspect-ratio: 4/3; overflow: hidden;
    position: relative;
}
.pd-head-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-figure-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #b5bcc5; font-size: 0.85rem; letter-spacing: 1.5px;
}

.pd-head-body { display: flex; flex-direction: column; }
.pd-eyebrow {
    display: inline-block;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 2.5px;
    text-transform: uppercase; color: #6b7886;
    margin-bottom: 22px;
}
.pd-title {
    font-size: clamp(1.9rem, 4.2vw, 2.8rem);
    font-weight: 700; line-height: 1.2;
    color: #0f1a24; margin: 0 0 28px;
    letter-spacing: -0.8px; word-break: keep-all;
}
.pd-lead {
    font-size: 1.02rem; line-height: 1.85;
    color: #4a5663; margin: 0 0 32px;
    padding-top: 28px; border-top: 1px solid #eceff3;
}
.pd-inline-link {
    display: inline-flex; align-items: center; gap: 10px;
    align-self: flex-start;
    font-size: 0.88rem; font-weight: 600; color: #0f1a24;
    text-decoration: none; padding: 4px 0;
    border-bottom: 1px solid #0f1a24;
    transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
.pd-inline-link span { transition: transform .25s ease; }
.pd-inline-link:hover { gap: 14px; color: #1a5276; border-color: #1a5276; }
.pd-inline-link:hover span { transform: translateX(3px); }

/* Spec strip */
.pd-specs {
    display: grid; grid-template-columns: repeat(2, 1fr);
    margin: 0 0 90px; padding: 36px 0;
    border-top: 1px solid #eceff3;
    border-bottom: 1px solid #eceff3;
    gap: 24px 0;
}
@media (min-width: 768px) {
    .pd-specs { grid-template-columns: repeat(4, 1fr); gap: 0; }
}
.pd-specs > div {
    padding: 0 28px;
    border-left: 1px solid #eceff3;
}
.pd-specs > div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 767px) {
    .pd-specs > div { border-left: 0; padding: 0 8px; }
    .pd-specs > div:nth-child(3) { padding-top: 20px; border-top: 1px solid #eceff3; }
    .pd-specs > div:nth-child(4) { padding-top: 20px; border-top: 1px solid #eceff3; }
}
.pd-specs dt {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 1.8px;
    text-transform: uppercase; color: #8a97a3;
    margin-bottom: 10px;
}
.pd-specs dd {
    margin: 0; font-size: 1rem; font-weight: 600; color: #0f1a24;
    line-height: 1.4;
}

/* Article */
.pd-article {
    display: grid; grid-template-columns: 1fr; gap: 36px;
    margin-bottom: 90px;
}
@media (min-width: 900px) {
    .pd-article { grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); gap: 72px; }
}
.pd-article-aside { position: relative; }
@media (min-width: 900px) {
    .pd-article-aside { position: sticky; top: 100px; align-self: start; }
}
.pd-article-aside h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 700; color: #0f1a24; line-height: 1.3;
    margin: 0 0 18px; letter-spacing: -0.4px;
}
.pd-aside-note {
    font-size: 0.86rem; line-height: 1.75; color: #6b7886;
    margin: 0; padding-top: 18px; border-top: 1px solid #eceff3;
    max-width: 320px;
}

.pd-article-body { min-width: 0; }

/* Prose — restrained editorial */
.pd-prose {
    font-size: 1rem; line-height: 1.95; color: #3a4653;
    max-width: 720px;
}
.pd-prose > *:first-child { margin-top: 0; }
.pd-prose > *:last-child { margin-bottom: 0; }
.pd-prose h1, .pd-prose h2, .pd-prose h3, .pd-prose h4 {
    color: #0f1a24; font-weight: 700;
    letter-spacing: -0.3px; line-height: 1.4;
}
.pd-prose h1 { font-size: 1.55rem; margin: 44px 0 16px; }
.pd-prose h2 {
    font-size: 1.32rem; margin: 48px 0 18px;
    padding-bottom: 14px; border-bottom: 1px solid #eceff3;
}
.pd-prose h3 { font-size: 1.1rem; margin: 36px 0 14px; color: #1a2430; }
.pd-prose h4 { font-size: 1rem; margin: 28px 0 10px; color: #1a2430; }
.pd-prose p { margin: 0 0 20px; }
.pd-prose strong { color: #0f1a24; font-weight: 600; }
.pd-prose em { color: #1a2430; }
.pd-prose a {
    color: #0f1a24; text-decoration: none;
    border-bottom: 1px solid #1a2430;
    transition: color .2s, border-color .2s;
}
.pd-prose a:hover { color: #1a5276; border-color: #1a5276; }
.pd-prose ul, .pd-prose ol { margin: 0 0 22px; padding: 0; }
.pd-prose ul { list-style: none; }
.pd-prose ul li {
    position: relative; padding-left: 22px; margin-bottom: 10px;
}
.pd-prose ul li::before {
    content: ''; position: absolute; left: 2px; top: 14px;
    width: 8px; height: 1px; background: #1a2430;
}
.pd-prose ol { counter-reset: pdol; padding-left: 0; }
.pd-prose ol li {
    counter-increment: pdol; position: relative;
    padding-left: 32px; margin-bottom: 10px;
}
.pd-prose ol li::before {
    content: counter(pdol, decimal-leading-zero);
    position: absolute; left: 0; top: 1px;
    font-size: 0.78rem; font-weight: 600; color: #8a97a3;
    letter-spacing: 0.5px;
}
.pd-prose blockquote {
    margin: 28px 0; padding: 0 0 0 24px;
    border-left: 2px solid #1a2430;
    color: #4a5663; font-style: italic;
    font-size: 1.05rem; line-height: 1.8;
}
.pd-prose blockquote p:last-child { margin-bottom: 0; }
.pd-prose hr { border: 0; border-top: 1px solid #eceff3; margin: 36px 0; }
.pd-prose img {
    max-width: 100%; height: auto; display: block;
    margin: 28px 0;
}
.pd-prose table {
    width: 100%; border-collapse: collapse; margin: 24px 0;
    font-size: 0.93rem;
}
.pd-prose table th,
.pd-prose table td {
    padding: 14px 18px; text-align: left;
    border-bottom: 1px solid #eceff3;
}
.pd-prose table th {
    color: #0f1a24; font-weight: 600;
    border-bottom: 2px solid #1a2430;
    font-size: 0.82rem; letter-spacing: 0.5px;
    text-transform: uppercase;
}
.pd-prose table tr:last-child td { border-bottom: 0; }

.pd-prose-empty { color: #8a97a3; }
.pd-prose-empty a { color: #1a5276; border-bottom-color: #1a5276; }

/* Foot navigation */
.pd-foot {
    border-top: 1px solid #eceff3; padding-top: 30px;
}
.pd-foot-nav {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 16px;
}
@media (max-width: 767px) {
    .pd-foot-nav { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
    .pd-foot-all { grid-column: 1 / -1; order: -1; padding-bottom: 20px; margin-bottom: 4px; border-bottom: 1px solid #eceff3; }
}
.pd-foot-link {
    display: flex; flex-direction: column; gap: 6px;
    text-decoration: none; color: #0f1a24;
    padding: 6px 0; min-width: 0;
    transition: transform .25s ease;
}
.pd-foot-link.pd-foot-next { text-align: right; align-items: flex-end; }
.pd-foot-link:hover { transform: translateY(-1px); }
.pd-foot-dir {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; color: #8a97a3;
}
.pd-foot-link strong {
    font-size: 0.95rem; font-weight: 600; color: #0f1a24;
    line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}
.pd-foot-disabled { cursor: default; color: #c2c9d1; }
.pd-foot-disabled .pd-foot-dir { color: #c2c9d1; }
.pd-foot-disabled em { font-style: normal; color: #c2c9d1; font-size: 0.9rem; }
.pd-foot-disabled:hover { transform: none; }

.pd-foot-all {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; color: #0f1a24;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.8px;
    padding: 10px 18px; border: 1px solid #e2e6eb; border-radius: 999px;
    transition: all .25s ease;
    justify-self: center;
}
.pd-foot-all:hover { background: #0f1a24; color: #fff; border-color: #0f1a24; }
.pd-foot-all svg { display: block; }

/* Mobile tweaks */
@media (max-width: 768px) {
    .pd { padding: 50px 0 70px; }
    .pd-crumbs { margin-bottom: 36px; padding-bottom: 20px; }
    .pd-head { margin-bottom: 50px; gap: 32px; }
    .pd-specs { margin-bottom: 60px; padding: 26px 0; }
    .pd-article { margin-bottom: 60px; gap: 30px; }
}

@media (max-width: 600px) {
    .feature-card { padding: 30px 18px; }
    .feature-card i { font-size: 2rem; margin-bottom: 14px; }
    .feature-card-img-icon { width: 60px; height: 60px; margin-bottom: 14px; }
    .feature-grid { gap: 20px; margin: 25px 0; }
    .products-grid { gap: 20px; }
}

/* ===== Inquiry Form ===== */
.inquiry-form { max-width: 800px; margin: 0 auto; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 500; color: #2c3e50; margin-bottom: 6px; font-size: 0.95rem; }
.form-group label .required { color: #e74c3c; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 12px 16px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 0.95rem; font-family: inherit;
    transition: border-color 0.3s;
}
.form-group input:focus, .form-group textarea:focus {
    outline: none; border-color: #1a5276;
}
.form-group textarea { min-height: 180px; resize: vertical; }
.btn { display: inline-block; padding: 12px 40px; background: #1a5276; color: #fff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background 0.3s; font-family: inherit; }
.btn:hover { background: #154360; }
.btn-sm { padding: 8px 20px; font-size: 0.85rem; }
.btn-danger { background: #e74c3c; }
.btn-danger:hover { background: #c0392b; }
.btn-outline { background: transparent; color: #1a5276; border: 1px solid #1a5276; }
.btn-outline:hover { background: #1a5276; color: #fff; }
/* Inline POST form (actionForm helper) used for delete/toggle actions that
   used to be GET <a> links. Keeps the button flowing inline next to the
   remaining navigational .btn anchors (수정/보기 등) with no extra gap. */
.inline-action { display: inline-block; margin: 0; padding: 0; border: 0; }
.btn-center { text-align: center; margin-top: 30px; }

.alert { padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ===== Home Page ===== */
/* Home hero overrides .hero-section to fill the entire viewport on first
   paint. Uses 100dvh so mobile browser chrome (URL bar) doesn't push content
   off-screen; falls back to 100vh on older browsers. The ::after gradient
   creates a soft fade from the dark hero into the light section underneath
   so the boundary doesn't read as a hard horizontal line. */
.home-hero {
    background: linear-gradient(135deg, #0d3b66 0%, #1a5276 30%, #2980b9 70%, #1a5276 100%);
    height: 100vh;
    height: 100dvh;
    min-height: 560px;
    max-height: 1080px;
}
.home-hero .hero-content h1 {
    font-size: clamp(1.9rem, 5.5vw, 3.2rem);
    /* --hero-font-family is set inline by heroFontHead() based on the admin's
       chosen font; falls back to the body sans when no setting is present. */
    font-family: var(--hero-font-family, 'Noto Sans KR', sans-serif);
    letter-spacing: -0.5px;
}
.home-hero .hero-content p {
    font-size: clamp(1rem, 2.6vw, 1.3rem);
    margin-top: 10px;
    font-family: var(--hero-font-family, 'Noto Sans KR', sans-serif);
}
.home-hero .hero-content {
    transition: opacity 0.15s linear;
    will-change: opacity, transform;
}
.home-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 160px;
    /* Light, gradual fade so the boundary into the body section softens
       without obscuring the dots or scroll button beneath it. */
    background: linear-gradient(to bottom, rgba(248,249,250,0) 0%, rgba(248,249,250,0.25) 70%, rgba(248,249,250,0.65) 100%);
    z-index: 2;
    pointer-events: none;
}
/* Move dots up so they don't collide with the scroll-down chevron. */
.home-hero .hero-dots { bottom: 96px; }

/* Scroll-down chevron — glass-style circle that reads against both dark hero
   imagery and the lighter fade band at the bottom. */
.hero-scroll-down {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: rgba(26,82,118,0.55);
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 50%;
    transition: background 0.2s, border-color 0.2s;
    animation: heroScrollBounce 2.2s ease-in-out infinite;
}
.hero-scroll-down:hover { background: rgba(26,82,118,0.85); border-color: rgba(255,255,255,0.65); }
@keyframes heroScrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
    50%      { transform: translateX(-50%) translateY(10px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-down { animation: none; }
}

/* Reveal-on-scroll: content blocks slide up + fade in as they enter view. */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

.home-section { padding: 80px 0; }
.home-section:nth-child(even) { background: #f8f9fa; }

.home-intro {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.home-intro-text h2 { font-size: 1.8rem; color: #1a5276; margin-bottom: 20px; }
.home-intro-text p { color: #555; line-height: 1.9; margin-bottom: 16px; }
.home-intro-img {
    height: 350px; background: #ecf0f1; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; color: #bdc3c7;
}

.home-services {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
}

.stats-section {
    background: #1a5276; padding: 60px 0; color: #fff;
}
.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
    max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align: center;
}
.stat-item h3 { font-size: 2.5rem; font-weight: 700; margin-bottom: 5px; }
.stat-item p { font-size: 0.95rem; opacity: 0.8; }

/* ===== Footer ===== */
.site-footer {
    background: #1a252f; color: #aab7c4; padding: 50px 0 0;
}
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.footer-logo { margin: 0; }
.footer-logo .logo-text { font-size: 1.4rem; font-weight: 700; color: #fff; }
.footer-logo .logo-sub { font-size: 0.6rem; color: #7f8c8d; letter-spacing: 3px; display: block; margin-top: 2px; }
/* Icon as a fixed-width column so a long address that wraps keeps its
   continuation lines aligned under the text (not under the icon). */
.footer-details p { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 0.95rem; line-height: 1.6; color: #b4c0cc; }
.footer-details i { flex: none; width: 18px; text-align: center; margin-top: 3px; color: #1a5276; }
.footer-bottom {
    margin-top: 30px; padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem; text-align: center;
}
.footer-bottom .footer-copyright { margin: 0; padding: 0; border: none; }
/* 'PC 버전으로 보기' / '모바일 버전으로 보기' 전환 링크.
   PC 화면에서는 숨기고, 모바일(반응형) 또는 PC강제(.pc-view) 상태에서만 노출. */
.footer-viewmode { display: none; margin-top: 10px; }
.footer-viewmode a {
    color: rgba(255,255,255,0.5); font-size: 0.78rem;
    text-decoration: none; letter-spacing: 0.02em;
}
.footer-viewmode a:hover { color: rgba(255,255,255,0.85); text-decoration: underline; }
body.pc-view .footer-viewmode { display: block; }
@media (max-width: 768px) { .footer-viewmode { display: block; } }
.footer-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-link-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; font-size: 0.85rem; color: #fff;
    background: rgba(41,128,185,0.18);
    border: 1px solid rgba(41,128,185,0.35);
    border-radius: 999px; transition: background .15s, border-color .15s, transform .15s;
}
.footer-link-pill:hover { background: #2980b9; border-color: transparent; transform: translateY(-1px); }
.footer-link-text { font-size: 0.85rem; color: #aab7c4; transition: color .15s; }
.footer-link-text:hover { color: #fff; text-decoration: underline; }
@media (max-width: 600px) {
    .footer-top { flex-direction: column; align-items: flex-start; }
    .footer-links { width: 100%; }
}

/* ===== Privacy policy doc ===== */
.privacy-doc { max-width: 900px; margin: 0 auto; padding: 10px 0 40px; }
.privacy-doc h3 {
    font-size: 1.05rem; color: #1a5276; margin: 30px 0 12px;
    padding-bottom: 8px; border-bottom: 2px solid #e8eef3;
}
.privacy-doc h3:first-child { margin-top: 0; }
.privacy-doc p { font-size: 0.95rem; color: #4a5568; line-height: 1.85; margin-bottom: 14px; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .header-inner { height: 60px; padding: 0 15px; }
    .logo-text { font-size: 1.3rem; }
    .main-nav { display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 999; overflow-y: auto; }
    .main-nav.active { display: block; }
    .nav-list { flex-direction: column; }
    /* The mobile menu is always a white panel, so the top-level links must be
       dark regardless of the header's scrolled state — otherwise the default
       white-over-hero text is invisible (white-on-white) before scrolling. */
    .main-nav .nav-item > a {
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
        color: #2c3e50;
        text-shadow: none;
        opacity: 1;
    }
    .main-nav .nav-item > a:hover { color: #1a5276; opacity: 1; }
    .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: #f8f9fa; }
    .dropdown li a { padding-left: 40px; }
    .lang-switcher { margin-left: auto; margin-right: 10px; }
    .mobile-toggle { display: block; }
    .mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .mobile-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* Mobile header is 60px, not 80px — reserve that space inside the hero. */
    .hero-section { margin-top: 0; padding-top: 60px; }
    .hero-content { padding: 16px 20px; }

    /* Mobile main-page hero text a touch smaller than the clamp() base. */
    .home-hero .hero-content h1 { font-size: clamp(1.45rem, 5vw, 2rem); }
    .home-hero .hero-content p  { font-size: clamp(0.85rem, 2.6vw, 1.05rem); }

    /* The home hero photos are 3.2:1 panoramas with the plant tower on the
       right; a center crop on the tall, narrow mobile viewport cuts the tower
       off and shows only mountains. Shift the focal point right so the tower
       stays framed (with a little mountain backdrop) on phones. */
    .home-hero .hero-slide { background-position: 68% center; }

    .home-intro { grid-template-columns: 1fr; gap: 30px; }
    /* Smaller intro-section title on mobile. */
    .home-intro-text h2 { font-size: clamp(1.3rem, 4.6vw, 1.6rem); }
    /* Show the intro-section image on mobile too, but as a low, banner-style
       accent under the text rather than a tall photo that dominates the
       viewport — keeps it in harmony with the intro copy above it. */
    .home-intro-img { height: clamp(170px, 45vw, 230px); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ceo-section { flex-direction: column; gap: 30px; }
    /* Smaller CEO greeting title on mobile. */
    .ceo-text h3 { font-size: clamp(1.2rem, 4.4vw, 1.45rem); }

    /* Image-free CEO greeting on mobile: full-width column, scaled-down
       type and tighter rhythm so the letter stays clean on small screens. */
    .ceo-section--solo .ceo-text { max-width: 100%; }
    .ceo-section--solo .ceo-text h3 { margin-bottom: 26px; }
    .ceo-section--solo .ceo-text p {
        font-size: 1rem;
        line-height: 1.9;
        margin-bottom: 18px;
    }
    .ceo-section--solo .ceo-text p:first-of-type {
        font-size: 1.22rem;
        line-height: 1.85;
        margin-bottom: 24px;
    }
    .ceo-section--solo .ceo-text .ceo-name { margin-top: 34px; padding-top: 22px; }
    .ceo-section--solo .ceo-name .ceo-name-person { font-size: 1.35rem; }
    .year-group-summary { padding: 12px 18px; gap: 10px; }
    .year-group-year { font-size: 1.1rem; }
    .year-group-items { padding: 20px 0 6px; }
    .year-group-items::before { left: 20px; }
    .timeline-item {
        flex-direction: column;
        gap: 4px;
        padding-left: 44px;
        margin-bottom: 20px;
    }
    .timeline-item::before { left: 20px; top: 6px; }
    .timeline-year {
        flex: none; width: auto;
        font-size: 0.9rem; padding-top: 0;
    }
    .timeline-content { flex: 1; }
    .form-row { grid-template-columns: 1fr; }
    .page-content { padding: 50px 0; }
}

/* ===== Hero Carousel ===== */
.hero-carousel { position: relative; }
.hero-carousel .hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1s ease-in-out;
    will-change: opacity;
}
.hero-slide.is-active { opacity: 1; }
.hero-carousel .hero-overlay,
.hero-carousel .hero-content { position: relative; z-index: 2; }
.hero-carousel .hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #fff; border: 1px solid rgba(255,255,255,0.35);
    font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
    transition: background .2s, transform .2s;
}
.hero-nav:hover { background: rgba(255,255,255,0.32); }
.hero-prev { left: 24px; }
.hero-next { right: 24px; }
.hero-dots {
    position: absolute; left: 50%; bottom: 24px;
    transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 3;
}
.hero-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,0.45); border: 0; cursor: pointer;
    transition: all .25s;
}
.hero-dot.is-active { width: 28px; border-radius: 6px; background: #fff; }
@media (max-width: 600px) {
    .hero-nav { width: 36px; height: 36px; font-size: 1.3rem; }
    .hero-prev { left: 10px; } .hero-next { right: 10px; }
}

/* ===== Facility Page — Gallery & Process Flow ===== */
.facility-section-title {
    font-size: 1.4rem;
    color: #1a5276;
    margin: 50px 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.facility-section-title i { font-size: 1.1rem; color: #2980b9; }

.facility-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
@media (max-width: 768px) {
    .facility-gallery {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
    }
}

/* Horizontal-scroll variant: shown when 4+ gallery photos exist so the row
   stays single-line and the user can flick through left/right instead of
   wrapping into a second row. JS adds the surrounding .facility-gallery-wrap
   and the prev/next buttons. */
.facility-gallery-wrap { position: relative; }
.facility-gallery--scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    gap: 24px;
    padding: 6px 4px 18px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.facility-gallery--scroll::-webkit-scrollbar { height: 8px; }
.facility-gallery--scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
.facility-gallery--scroll::-webkit-scrollbar-track { background: transparent; }
.facility-gallery--scroll .facility-photo {
    flex: 0 0 360px;
    scroll-snap-align: start;
}
@media (max-width: 1024px) {
    .facility-gallery--scroll .facility-photo { flex: 0 0 320px; }
}
@media (max-width: 768px) {
    .facility-gallery--scroll { gap: 16px; padding-bottom: 14px; }
    .facility-gallery--scroll .facility-photo { flex: 0 0 78%; }
}

.facility-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.96);
    color: #1a5276;
    border: 1px solid #e5e9ee;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: opacity 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}
.facility-gallery-nav:hover {
    background: #1a5276;
    color: #fff;
    transform: translateY(-50%) scale(1.06);
}
.facility-gallery-nav[disabled] {
    opacity: 0;
    pointer-events: none;
}
.facility-gallery-prev { left: -22px; }
.facility-gallery-next { right: -22px; }
@media (max-width: 1024px) {
    .facility-gallery-prev { left: 6px; }
    .facility-gallery-next { right: 6px; }
}
@media (max-width: 768px) {
    .facility-gallery-nav { width: 40px; height: 40px; font-size: 0.9rem; }
}
.facility-photo {
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #ecf0f1;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
    cursor: zoom-in;
}
.facility-photo:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.16);
}
.facility-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}
.facility-photo:hover img { transform: scale(1.05); }
.facility-photo-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 16px 14px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
}

/* Facility inventory table — used on the Facility page below the gallery.
   Wrapped in a horizontal scroller so it stays readable on narrow phones
   without crushing the columns. */
.asset-table-wrap {
    overflow-x: auto;
    margin: 8px 0 12px;
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.06);
    background: #fff;
}
.asset-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}
.asset-table thead th {
    background: linear-gradient(135deg, #1a5276 0%, #2980b9 100%);
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 14px 18px;
    letter-spacing: 0.2px;
    font-size: 0.88rem;
    white-space: nowrap;
}
.asset-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f6;
    color: #2c3e50;
    vertical-align: top;
}
.asset-table tbody tr:last-child td { border-bottom: 0; }
.asset-table tbody tr:nth-child(even) td { background: #fafbfc; }
.asset-table tbody tr:hover td { background: #f1f7fb; }
.asset-table thead .asset-col-name,
.asset-table thead .asset-col-spec,
.asset-table thead .asset-col-qty { color: #fff; }
.asset-table thead .asset-col-qty { text-align: right; white-space: nowrap; width: 1%; }
.asset-table tbody .asset-col-name { font-weight: 600; color: #1a2e40; min-width: 140px; }
.asset-table tbody .asset-col-spec { color: #5a6c7d; }
.asset-table tbody .asset-col-qty  { text-align: right; white-space: nowrap; color: #1a5276; font-variant-numeric: tabular-nums; width: 1%; }
@media (max-width: 640px) {
    .asset-table thead th,
    .asset-table tbody td { padding: 11px 12px; font-size: 0.85rem; }
}

/* Process flow — numbered step cards */
.process-flow {
    list-style: none;
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 22px;
    padding: 0;
    margin: 0;
}
.process-step {
    counter-increment: step;
    position: relative;
    padding: 36px 20px 24px;
    background: #fff;
    border: 1px solid #e5e9ee;
    border-radius: 14px;
    text-align: center;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.process-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(26,82,118,0.12);
    border-color: #cfdce6;
}
.process-step-num {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1a5276, #2980b9);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1px;
    padding: 4px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(26,82,118,0.3);
}
.process-step-num::before { content: 'STEP ' counter(step, decimal-leading-zero); }
.process-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #eaf2f8;
    color: #1a5276;
    font-size: 1.5rem;
    margin-bottom: 14px;
}
.process-step h4 {
    font-size: 1.1rem;
    color: #1a2e40;
    margin-bottom: 10px;
}
.process-step p {
    font-size: 0.88rem;
    color: #5a6c7d;
    line-height: 1.65;
    word-break: keep-all;
}
/* 폐유기용제 수거(사업분야) 수거 절차 카드: 글씨 한 단계 축소 */
.process-flow--compact .process-step h4 { font-size: 1rem; }
.process-flow--compact .process-step p { font-size: 0.82rem; }

@media (max-width: 600px) {
    .process-flow { grid-template-columns: 1fr; gap: 26px; }
    .facility-section-title { font-size: 1.2rem; margin: 40px 0 18px; }
}

/* ===== Lightbox (used by .facility-photo[data-lightbox]) ===== */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(10,15,20,0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 30px;
    animation: lightboxFadeIn 0.2s ease-out;
}
.lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 82vh;
    cursor: default;
}
.lightbox-stage img {
    max-width: 92vw;
    max-height: 82vh;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    object-fit: contain;
    display: block;
    animation: lightboxImgIn 0.18s ease-out;
}
.lightbox-caption {
    color: #fff;
    margin-top: 18px;
    font-size: 0.95rem;
    max-width: 800px;
    text-align: center;
    line-height: 1.5;
}
.lightbox-counter {
    color: rgba(255,255,255,0.75);
    margin-top: 8px;
    font-size: 0.82rem;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.lightbox-close,
.lightbox-nav {
    position: absolute;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 0;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    backdrop-filter: blur(4px);
}
.lightbox-close { top: 20px; right: 24px; }
.lightbox-nav  { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 1.4rem; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-close:hover { background: rgba(255,255,255,0.26); }
.lightbox-nav:hover {
    background: rgba(255,255,255,0.26);
    transform: translateY(-50%) scale(1.05);
}
@media (max-width: 768px) {
    .lightbox-nav  { width: 44px; height: 44px; font-size: 1.1rem; }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
    .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
    .lightbox-stage img { max-width: 96vw; max-height: 72vh; }
}
@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lightboxImgIn {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===== Inquiry Page — Contact Persons Section ===== */
.inquiry-contacts {
    margin-bottom: 50px;
    padding: 36px 32px;
    background: #f8fafc;
    border: 1px solid #e5e9ee;
    border-radius: 14px;
}
.inquiry-contacts-head { text-align: center; margin-bottom: 24px; }
.inquiry-contacts-head h3 { font-size: 1.4rem; color: #1a5276; margin-bottom: 8px; }
.inquiry-contacts-head p { color: #5a6c7d; font-size: 0.95rem; margin: 0; }
.inquiry-divider {
    margin-top: 28px;
    text-align: center;
    position: relative;
    color: #95a5a6;
    font-size: 0.85rem;
}
.inquiry-divider::before {
    content: '';
    position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: #dde4ea;
}
.inquiry-divider span {
    position: relative;
    background: #f8fafc;
    padding: 0 14px;
}
@media (max-width: 600px) {
    .inquiry-contacts { padding: 24px 18px; }
}
.contact-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px; margin-top: 30px;
}
.contact-card {
    display: flex; gap: 18px; align-items: flex-start;
    padding: 24px; background: #fff; border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #eef2f6;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.contact-photo {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #1a5276, #2980b9);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; flex-shrink: 0; overflow: hidden;
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-info { flex: 1; min-width: 0; }
.contact-dept { font-size: 0.75rem; color: #1a5276; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 4px; text-transform: uppercase; }
.contact-name { font-size: 1.05rem; color: #2c3e50; margin: 0 0 10px; font-weight: 700; }
.contact-name .contact-pos { font-size: 0.85rem; color: #7f8c8d; font-weight: 500; margin-left: 4px; }
.contact-channels { list-style: none; padding: 0; margin: 0; }
.contact-channels li { font-size: 0.88rem; color: #555; margin-bottom: 6px; line-height: 1.5; }
.contact-channels li:last-child { margin-bottom: 0; }
.contact-channels i { width: 18px; color: #1a5276; margin-right: 6px; }
.contact-channels a { color: #555; transition: color .2s; }
.contact-channels a:hover { color: #1a5276; text-decoration: underline; }

/* ===== Admin Styles ===== */
.admin-wrap { display: flex; min-height: 100vh; margin-top: 0; }
.admin-sidebar {
    width: 250px; background: #1a252f; color: #aab7c4;
    padding: 20px 0; flex-shrink: 0;
}
.admin-sidebar h2 { text-align: center; padding: 10px 20px 30px; color: #fff; font-size: 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 10px; }
.admin-sidebar a {
    display: block; padding: 12px 25px; color: #aab7c4;
    font-size: 0.9rem; transition: all 0.2s; border-left: 3px solid transparent;
}
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,0.05); color: #fff; border-left-color: #2980b9; }
.admin-sidebar a i { width: 25px; }
.admin-sidebar-group {
    padding: 18px 25px 6px; margin-top: 6px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 1px;
    color: #6c7a89; text-transform: uppercase;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.admin-main { flex: 1; padding: 30px; background: #f4f6f9; }
.admin-main h1 { font-size: 1.5rem; color: #2c3e50; margin-bottom: 25px; }

.admin-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 25px; margin-bottom: 20px; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { background: #f8f9fa; padding: 12px 15px; text-align: left; font-size: 0.85rem; color: #555; border-bottom: 2px solid #eee; }
.admin-table td { padding: 12px 15px; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; }
.admin-table tr:hover { background: #f8f9fa; }

.admin-form .form-group { margin-bottom: 18px; }
.admin-form label { font-size: 0.9rem; font-weight: 500; }
.admin-form input, .admin-form textarea, .admin-form select { font-size: 0.9rem; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.admin-stat-card { background: #fff; border-radius: 8px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); text-align: center; }
.admin-stat-card h3 { font-size: 2rem; color: #1a5276; }
.admin-stat-card p { font-size: 0.85rem; color: #7f8c8d; margin-top: 5px; }

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f4f6f9; }
.login-box { background: #fff; padding: 50px 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
.login-box h2 { text-align: center; color: #1a5276; margin-bottom: 30px; }

/* Badge */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; }
.badge-new { background: #e8f5e9; color: #2e7d32; }
.badge-read { background: #e3f2fd; color: #1565c0; }
.badge-replied { background: #f3e5f5; color: #7b1fa2; }

.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mr-10 { margin-right: 10px; }