/* ============================================================
   TOKENS
============================================================ */
:root {
    --green:        #2E7D52;
    --green-l:      #3D9966;
    --green-pale:   #E8F5EE;
    --navy:         #1E3A5F;
    --navy-d:       #142847;
    --gold:         #C9982A;
    --gold-l:       #E5B444;
    --dark:         #191f28;
    --mid:          #6b7684;
    --light:        #b0b8c1;
    --bg:           #f9fafb;
    --white:        #ffffff;
    --border:       #e5e8eb;
    --font:         'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
    --radius-sm:    10px;
    --radius:       16px;
    --radius-lg:    24px;
    --shadow:       0 4px 24px rgba(0,0,0,0.07);
    --shadow-lg:    0 16px 60px rgba(0,0,0,0.12);
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font); color:var(--dark); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* ============================================================
   LAYOUT HELPERS
============================================================ */
.wrap      { max-width:1160px; margin:0 auto; padding:0 24px; }
section    { padding:120px 24px; }
.s-gray    { background:var(--bg); }
.s-dark    { background:var(--dark); }
.s-white   { background:var(--white); }

/* ============================================================
   TYPOGRAPHY SCALE  (Toss-size)
============================================================ */
.eyebrow {
    display:inline-block;
    font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--green); margin-bottom:16px;
}
.eyebrow.w    { color:rgba(255,255,255,0.5); }
.eyebrow.navy { color:var(--navy); }

.display {
    font-size:clamp(32px,4.5vw,52px);
    font-weight:700; line-height:1.15; letter-spacing:-1px;
    color:var(--dark);
}
.display.w { color:var(--white); }

.heading {
    font-size:clamp(24px,3.2vw,40px);
    font-weight:700; line-height:1.25; letter-spacing:-0.5px;
    color:var(--dark);
}
.heading.w { color:var(--white); }

.subhead {
    font-size:clamp(15px,1.6vw,17px);
    font-weight:400; color:var(--mid); line-height:1.8;
    margin-top:16px; max-width:560px;
}
.subhead.w { color:rgba(255,255,255,0.55); }
.center { text-align:center; }
.center .subhead { margin-left:auto; margin-right:auto; }

em { font-style:normal; color:var(--green); }
.gold-em { color:var(--gold-l); }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 30px; border-radius:var(--radius-sm);
    font-size:15px; font-weight:700; font-family:var(--font);
    cursor:pointer; border:none; transition:all 0.22s;
    white-space:nowrap;
}
.btn-green  { background:var(--green); color:#fff; }
.btn-green:hover { background:var(--green-l); transform:translateY(-2px); box-shadow:0 10px 30px rgba(46,125,82,0.35); }
.btn-outline { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,0.4); }
.btn-outline:hover { background:rgba(255,255,255,0.12); transform:translateY(-2px); }
.btn-kakao { background:#FEE500; color:#191919; }
.btn-kakao:hover { background:#F5DC00; transform:translateY(-2px); box-shadow:0 10px 30px rgba(254,229,0,0.35); color:#191919; }
.btn-navy { background:var(--navy); color:#fff; }
.btn-navy:hover { background:var(--navy-d); transform:translateY(-2px); box-shadow:0 10px 30px rgba(30,58,95,0.3); }
.btn-ghost { background:var(--white); color:var(--green); border:2px solid var(--green); }
.btn-ghost:hover { background:var(--green); color:#fff; }

/* ============================================================
   HEADER
============================================================ */
#header {
    position:fixed; top:0; left:0; right:0; z-index:900;
    height:68px;
    background:linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 70%, transparent 100%);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid transparent;
    transition:background 0.4s, border-color 0.3s, box-shadow 0.3s, backdrop-filter 0.4s;
}
#header.scrolled {
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-color:var(--border);
    box-shadow:0 2px 20px rgba(0,0,0,0.06);
}
.header-inner {
    max-width:1160px; margin:0 auto; padding:0 24px;
    height:100%; display:flex; align-items:center; justify-content:space-between;
}
.logo { display:flex; align-items:center; gap:10px; }
.logo-icon {
    width:38px; height:38px; border-radius:10px;
    background:linear-gradient(135deg,var(--green),#1a5c3a);
    display:flex; align-items:center; justify-content:center; font-size:20px;
}
.logo-text { font-size:16px; font-weight:700; color:#fff; transition:color 0.4s; text-shadow:0 1px 8px rgba(0,0,0,0.4); }
.logo-sub   { font-size:10px; color:rgba(255,255,255,0.85); font-weight:400; display:block; transition:color 0.4s; text-shadow:0 1px 6px rgba(0,0,0,0.35); }
#header.scrolled .logo-text { color:var(--dark); text-shadow:none; }
#header.scrolled .logo-sub { color:var(--light); text-shadow:none; }

nav { display:flex; align-items:center; gap:36px; }
nav a {
    font-size:14px; font-weight:500; color:rgba(255,255,255,0.85);
    transition:color 0.3s; position:relative; padding-bottom:2px;
}
#header.scrolled nav a { color:var(--mid); }
nav a::after {
    content:''; position:absolute; bottom:-1px; left:0; right:0;
    height:2px; background:var(--green); transform:scaleX(0); transition:transform 0.2s;
}
nav a:hover { color:#fff; }
#header.scrolled nav a:hover { color:var(--dark); }
nav a:hover::after { transform:scaleX(1); }

.btn-nav {
    padding:9px 20px; background:var(--green); color:#fff;
    border-radius:var(--radius-sm); font-size:13px; font-weight:700;
    transition:background 0.2s;
}
.btn-nav:hover { background:var(--green-l); color:#fff; }

.menu-toggle { display:none; background:none; border:none; cursor:pointer; padding:6px; }
.menu-toggle span {
    display:block; width:22px; height:2px; background:#fff;
    margin:5px 0; border-radius:2px; transition:all 0.3s;
}
#header.scrolled .menu-toggle span { background:var(--dark); }

/* Mobile menu */
.mobile-menu {
    display:none; position:fixed; top:68px; left:0; right:0; bottom:0;
    background:var(--white); z-index:800; flex-direction:column; padding:32px 24px; gap:8px;
    overflow-y:auto;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
    font-size:18px; font-weight:600; color:var(--dark);
    padding:16px 0; border-bottom:1px solid var(--border);
}
.mobile-menu a:last-child { border:none; }

/* ============================================================
   HERO  ── full-screen photo + parallax
============================================================ */
#hero {
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex; align-items:flex-end;
    padding-bottom:0;
}
.hero-bg {
    position:absolute; inset:0;
}
#heroVideo {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    transform:scale(1.05);
}
.hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(
        to bottom,
        rgba(10,25,18,0.28) 0%,
        rgba(10,25,18,0.52) 50%,
        rgba(8,20,14,0.82) 100%
    );
}
.hero-inner {
    position:relative; z-index:2;
    width:100%; max-width:1160px; margin:0 auto; padding:0 24px 100px;
}
.hero-badge {
    display:inline-flex; align-items:center; gap:10px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.25);
    backdrop-filter:blur(12px);
    color:rgba(255,255,255,0.88);
    padding:9px 20px; border-radius:100px;
    font-size:13px; font-weight:600;
    margin-bottom:32px;
    animation:fadeUp 0.8s ease both;
}
.hero-dot {
    width:8px; height:8px; background:var(--gold-l); border-radius:50%;
    animation:pulse 2s infinite;
}
@keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.4; transform:scale(1.5); }
}
.hero-title {
    font-size:clamp(34px,5vw,62px);
    font-weight:700; color:#fff; line-height:1.18;
    letter-spacing:-1px; margin-bottom:24px;
    animation:fadeUp 0.8s 0.1s ease both;
    text-shadow:0 2px 16px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
}
.hero-title .accent { color:var(--gold-l); }
.hero-desc {
    font-size:clamp(15px,1.8vw,19px);
    color:rgba(255,255,255,0.85);
    max-width:560px; line-height:1.85; margin-bottom:48px;
    font-weight:400;
    animation:fadeUp 0.8s 0.2s ease both;
    text-shadow:0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.35);
}
.hero-desc strong { color:#fff; font-weight:600; }
.hero-ctas {
    display:flex; gap:14px; flex-wrap:wrap;
    animation:fadeUp 0.8s 0.3s ease both;
}
.hero-stats {
    display:flex; gap:0; margin-top:80px;
    border-top:1px solid rgba(255,255,255,0.14);
    animation:fadeUp 0.8s 0.4s ease both;
}
.hero-stat {
    flex:1; padding:32px 24px;
    border-right:1px solid rgba(255,255,255,0.1);
}
.hero-stat:last-child { border-right:none; }
.hs-num {
    font-size:32px; font-weight:700; color:#fff;
    line-height:1; letter-spacing:-1px;
    text-shadow:0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
}
.hs-num .unit { font-size:16px; font-weight:400; margin-left:2px; }
.hs-label { font-size:13px; color:rgba(255,255,255,0.7); margin-top:6px; text-shadow:0 1px 8px rgba(0,0,0,0.4); }

/* Scroll hint */
.scroll-hint {
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2;
    animation:fadeIn 1s 1s ease both;
}
.scroll-hint span { font-size:11px; color:rgba(255,255,255,0.4); letter-spacing:1px; }
.scroll-line {
    width:1px; height:48px; background:rgba(255,255,255,0.25);
    animation:scrollDrop 1.6s 1.2s ease-in-out infinite;
}
@keyframes scrollDrop {
    0%   { transform:scaleY(0); transform-origin:top; }
    50%  { transform:scaleY(1); transform-origin:top; }
    51%  { transform:scaleY(1); transform-origin:bottom; }
    100% { transform:scaleY(0); transform-origin:bottom; }
}

/* ============================================================
   STORY  ── 2-col photo + text
============================================================ */
#story { background:var(--white); }
.story-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.story-photo {
    position:relative; border-radius:var(--radius-lg); overflow:hidden;
    height:560px;
}
.story-photo img {
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.6s ease;
}
.story-photo:hover img { transform:scale(1.04); }
.story-photo-badge {
    position:absolute; bottom:24px; left:24px;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(12px);
    border-radius:var(--radius);
    padding:20px 24px;
    box-shadow:var(--shadow-lg);
    min-width:200px;
}
.spb-label { font-size:11px; font-weight:700; color:var(--light); text-transform:uppercase; letter-spacing:0.8px; }
.spb-val { font-size:22px; font-weight:700; color:var(--dark); margin-top:4px; }
.spb-sub { font-size:12px; color:var(--mid); margin-top:2px; }
.story-photo-badge2 {
    position:absolute; top:24px; right:24px;
    background:var(--green);
    border-radius:var(--radius);
    padding:16px 20px;
    color:#fff;
}
.spb2-label { font-size:10px; font-weight:700; letter-spacing:0.8px; opacity:0.7; }
.spb2-val   { font-size:18px; font-weight:700; margin-top:4px; }

.story-text .heading { margin-top:8px; margin-bottom:24px; }
.story-text p {
    font-size:16px; color:var(--mid); line-height:1.95; margin-bottom:20px;
}
.story-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:32px; }
.pill {
    display:inline-block; padding:8px 16px; border-radius:100px;
    font-size:13px; font-weight:600;
}
.pill-green { background:var(--green-pale); color:var(--green); }
.pill-navy  { background:rgba(30,58,95,0.08); color:var(--navy); }
.pill-out   { background:var(--white); border:1.5px solid var(--border); color:var(--mid); }

/* ============================================================
   GALLERY  ── mosaic with all 3 photos
============================================================ */
#gallery { background:var(--bg); padding-bottom:120px; }
.gallery-mosaic {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    grid-template-rows:280px 280px;
    gap:14px; border-radius:var(--radius-lg); overflow:hidden;
}
.gm-cell {
    position:relative; overflow:hidden; cursor:pointer;
}
.gm-cell img {
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.5s ease;
}
.gm-cell:hover img { transform:scale(1.06); }
.gm-main { grid-row:span 2; }
.gm-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
    display:flex; align-items:flex-end; padding:22px;
    opacity:0; transition:opacity 0.3s;
}
.gm-cell:hover .gm-overlay { opacity:1; }
.gm-label { color:#fff; font-size:15px; font-weight:700; }

/* extra cells using tinted gradient for cells 4,5 */
.gm-fill {
    background:linear-gradient(135deg,#c8e6c9,#a5d6a7);
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:8px;
}
.gm-fill span { font-size:48px; }
.gm-fill p { font-size:13px; font-weight:600; color:rgba(30,80,50,0.55); }

/* ============================================================
   VALUES  ── large cards row
============================================================ */
#values { background:var(--white); }
.values-row { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.val-card {
    border-radius:var(--radius-lg); padding:32px 28px;
    position:relative; overflow:hidden;
    transition:transform 0.3s, box-shadow 0.3s;
    border:1px solid rgba(0,0,0,0.04);
}
.val-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.val-card::before {
    content:''; position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0.10;
    transition:opacity 0.4s, transform 0.6s;
    transform:scale(1.05);
}
.val-card:hover::before { opacity:0.18; transform:scale(1.12); }
.val-card::after {
    content:''; position:absolute; inset:0;
    pointer-events:none;
}
.vc-1 { background:var(--green-pale); }
.vc-1::before { background-image:url('copy_image/4.png'); }
.vc-1::after  { background:linear-gradient(160deg, rgba(232,245,233,0.85) 0%, rgba(232,245,233,0.4) 50%, rgba(165,214,167,0.6) 100%); }
.vc-2 { background:rgba(30,58,95,0.06); }
.vc-2::before { background-image:url('copy_image/5.png'); }
.vc-2::after  { background:linear-gradient(160deg, rgba(30,58,95,0.08) 0%, rgba(30,58,95,0.02) 50%, rgba(30,58,95,0.10) 100%); }
.vc-3 { background:rgba(201,152,42,0.08); }
.vc-3::before { background-image:url('copy_image/6.png'); }
.vc-3::after  { background:linear-gradient(160deg, rgba(201,152,42,0.10) 0%, rgba(201,152,42,0.03) 50%, rgba(201,152,42,0.12) 100%); }
.val-ico { font-size:36px; margin-bottom:16px; position:relative; z-index:1; }
.val-card h3 { font-size:22px; font-weight:700; margin-bottom:10px; position:relative; z-index:1; }
.val-card p  { font-size:16px; color:var(--mid); line-height:1.8; position:relative; z-index:1; }
.val-num {
    position:absolute; right:28px; top:28px; z-index:1;
    font-size:72px; font-weight:800; opacity:0.09; line-height:1;
    color:var(--dark);
    letter-spacing:-2px;
}
.vc-1 .val-num { color:var(--green); opacity:0.13; }
.vc-2 .val-num { color:var(--navy); opacity:0.10; }
.vc-3 .val-num { color:var(--gold); opacity:0.13; }
.val-card h3::after {
    content:''; display:block; width:28px; height:3px; border-radius:2px;
    margin-top:10px;
}
.vc-1 h3::after { background:var(--green); }
.vc-2 h3::after { background:var(--navy); }
.vc-3 h3::after { background:var(--gold); }

/* ============================================================
   CORE STRENGTHS (핵심 역량)
============================================================ */
#strengths { background:var(--navy-d); position:relative; overflow:hidden; }
#strengths::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 20% 50%, rgba(46,125,82,0.15) 0%, transparent 60%),
               radial-gradient(ellipse at 80% 50%, rgba(201,152,42,0.10) 0%, transparent 60%);
    pointer-events:none;
}
#strengths > .wrap { max-width:1400px; }
.str-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
    position:relative; z-index:1;
}
.str-card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-lg);
    padding:28px 24px 24px;
    position:relative; overflow:hidden;
    transition:transform 0.35s, background 0.35s, border-color 0.35s;
}
.str-card:hover {
    transform:translateY(-6px);
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.16);
}
.str-num {
    display:none;
}
.str-ico {
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; margin-bottom:16px;
    background:linear-gradient(135deg, rgba(46,125,82,0.25), rgba(46,125,82,0.08));
    border:1px solid rgba(46,125,82,0.2);
    position:relative; z-index:1;
}
.str-card:nth-child(2) .str-ico { background:linear-gradient(135deg, rgba(30,58,95,0.35), rgba(30,58,95,0.10)); border-color:rgba(100,160,255,0.2); }
.str-card:nth-child(3) .str-ico { background:linear-gradient(135deg, rgba(201,152,42,0.25), rgba(201,152,42,0.08)); border-color:rgba(201,152,42,0.2); }
.str-card:nth-child(4) .str-ico { background:linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)); border-color:rgba(255,255,255,0.15); }
.str-card h3 {
    font-size:19px; font-weight:700; color:#fff;
    margin-bottom:13px; line-height:1.3;
    position:relative; z-index:1;
}
.str-card p {
    font-size:14.5px; color:rgba(255,255,255,0.55);
    line-height:1.75;
    position:relative; z-index:1;
}
.str-line {
    width:32px; height:2px; border-radius:1px;
    background:var(--green-l); margin-bottom:12px;
    transition:width 0.3s;
}
.str-card:hover .str-line { width:48px; }
.str-card:nth-child(2) .str-line { background:#6ba0e0; }
.str-card:nth-child(3) .str-line { background:var(--gold-l); }
.str-card:nth-child(4) .str-line { background:rgba(255,255,255,0.5); }
.str-bg-num {
    position:absolute; right:24px; top:24px;
    font-size:72px; font-weight:800; line-height:1;
    color:rgba(255,255,255,0.06); letter-spacing:-2px;
    pointer-events:none;
    transition:color 0.35s;
}
.str-card:hover .str-bg-num {
    color:rgba(255,255,255,0.10);
}

/* ============================================================
   PRODUCTS (사업 영역)
============================================================ */
#products { background:var(--bg); }
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.prod-card {
    background:var(--white); border-radius:var(--radius-lg);
    border:1px solid var(--border); overflow:hidden;
    transition:all 0.3s;
}
.prod-card:hover {
    transform:translateY(-6px); box-shadow:var(--shadow-lg);
    border-color:transparent;
}
.prod-thumb {
    height:160px; overflow:hidden;
}
.prod-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.prod-card:hover .prod-thumb img { transform:scale(1.06); }
.prod-body { padding:28px 24px; }
.prod-cat { font-size:11px; font-weight:700; color:var(--green); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.prod-body h3 { font-size:18px; font-weight:600; margin-bottom:10px; }
.prod-body p  { font-size:14px; color:var(--mid); line-height:1.8; margin-bottom:18px; }
.spec-list { display:flex; gap:6px; flex-wrap:wrap; }
.spec { background:var(--bg); border:1px solid var(--border); color:var(--mid); padding:4px 12px; border-radius:6px; font-size:12px; font-weight:500; }

/* ============================================================
   SMARTSTORE
============================================================ */
#smartstore {
    background:var(--white);
    position:relative; overflow:hidden;
}
.ss-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.ss-photo {
    border-radius:var(--radius-lg); overflow:hidden; height:480px; position:relative;
}
.ss-photo img { width:100%; height:100%; object-fit:cover; }
.ss-badge {
    position:absolute; bottom:24px; right:24px;
    background:rgba(255,255,255,0.95); backdrop-filter:blur(12px);
    border-radius:var(--radius); padding:18px 22px;
    box-shadow:var(--shadow-lg);
}
.ss-badge-label { font-size:11px; font-weight:700; color:var(--light); text-transform:uppercase; letter-spacing:0.8px; }
.ss-badge-val   { font-size:18px; font-weight:700; color:var(--dark); margin-top:4px; }
.ss-features { display:flex; flex-direction:column; gap:16px; margin:32px 0; }
.ss-feat {
    display:flex; align-items:flex-start; gap:14px;
    padding:16px 20px; background:var(--bg);
    border-radius:var(--radius-sm); border:1px solid var(--border);
    transition:all 0.22s;
}
.ss-feat:hover { border-color:var(--green); background:var(--green-pale); }
.ss-feat-ico { font-size:24px; flex-shrink:0; margin-top:2px; }
.ss-feat-title { font-size:15px; font-weight:700; color:var(--dark); margin-bottom:3px; }
.ss-feat-desc  { font-size:13px; color:var(--mid); line-height:1.6; }
.btn-ss {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 36px; border-radius:var(--radius-sm);
    background:#FF6633; color:#fff;
    font-size:15px; font-weight:700; font-family:var(--font);
    transition:all 0.22s; border:none; cursor:pointer;
}
.btn-ss:hover { background:#e85520; transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,102,51,0.35); color:#fff; }

/* ============================================================
   PRODUCT CATALOG (제품소개)
============================================================ */

/* Preview grid */
.preview-grid {
    display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.preview-card {
    background:var(--white); border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--border); transition:all 0.3s; display:block;
}
.preview-card:hover {
    transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent;
}
.preview-img {
    height:180px; overflow:hidden; position:relative;
    background:linear-gradient(135deg,var(--green-pale),#c8e6c9);
}
.preview-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.preview-card:hover .preview-img img { transform:scale(1.06); }
.preview-placeholder {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:48px;
}
.preview-info { padding:16px; text-align:center; }
.preview-cat {
    display:block; font-size:11px; font-weight:700; color:var(--green);
    letter-spacing:1.2px; text-transform:uppercase; margin-bottom:4px;
}
.preview-name { display:block; font-size:15px; font-weight:600; color:var(--dark); }

/* ============================================================
   PROCUREMENT ITEMS (조달청 품목 테이블)
============================================================ */
#procurement-items { background:var(--bg); }

.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
.proc-table { width:100%; border-collapse:collapse; font-size:14px; }
.proc-table thead tr { background:var(--navy); color:#fff; }
.proc-table th { padding:14px 18px; text-align:left; font-size:13px; font-weight:600; white-space:nowrap; }
.proc-table td { padding:12px 18px; border-bottom:1px solid var(--border); color:var(--mid); vertical-align:middle; }
.proc-table tbody tr:last-child td { border-bottom:none; }
.proc-table tbody tr:hover td { background:var(--green-pale); }
.proc-table .no  { width:48px; text-align:center; color:var(--light); font-size:13px; }
.proc-table .iname { color:var(--dark); font-size:13px; line-height:1.6; }
.delivery-table td { font-size:13px; }
.proc-table .iid { font-family:var(--font); font-size:12px; color:var(--light); white-space:nowrap; }

/* Search bar */
.proc-search-wrap { margin-bottom:24px; }
.proc-search {
    width:100%; padding:14px 18px 14px 44px; border:1.5px solid var(--border);
    border-radius:var(--radius-sm); font-size:15px; font-family:var(--font);
    color:var(--dark); background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23b0b8c1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cline x1='12' y1='12' x2='16' y2='16'/%3E%3C/svg%3E") 16px center no-repeat;
    outline:none; transition:border-color 0.2s;
}
.proc-search:focus { border-color:var(--navy); }
.proc-search::placeholder { color:var(--light); }
.proc-count { font-size:13px; color:var(--light); margin-top:8px; }
.proc-no-result { text-align:center; padding:32px 16px; color:var(--light); font-size:14px; display:none; }

/* Expand toggle */
/* Pagination */
.proc-expand-btn {
    display:none; width:100%; margin-top:16px;
    background:none; border:none; padding:0; cursor:default;
}
.proc-pager {
    display:flex; justify-content:center; align-items:center; gap:4px; flex-wrap:wrap;
}
.pg-btn {
    min-width:38px; height:38px; padding:0 10px;
    border:1.5px solid var(--border); border-radius:8px;
    background:var(--white); color:var(--mid);
    font-size:14px; font-weight:600; font-family:var(--font);
    cursor:pointer; transition:all 0.2s;
}
.pg-btn:hover:not(:disabled):not(.active) { border-color:var(--navy); color:var(--navy); }
.pg-btn.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.pg-btn:disabled { opacity:0.35; cursor:default; }
.pg-dot { color:var(--light); font-size:14px; padding:0 2px; }

.g2b-btn-wrap { text-align:center; margin-top:32px; }

/* ============================================================
   PROCUREMENT (G2B 안내)
============================================================ */
#procurement {
    background:linear-gradient(135deg,var(--navy-d) 0%,var(--navy) 100%);
}
.proc-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.proc-content .heading { margin:10px 0 20px; }
.proc-content p { font-size:16px; color:rgba(255,255,255,0.65); line-height:1.9; margin-bottom:32px; }
.check-list { list-style:none; display:flex; flex-direction:column; gap:14px; }
.check-list li { display:flex; align-items:flex-start; gap:12px; font-size:15px; color:rgba(255,255,255,0.85); line-height:1.55; }
.chk { width:22px; height:22px; background:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; font-weight:700; flex-shrink:0; margin-top:1px; }
.proc-cards { display:flex; flex-direction:column; gap:14px; }
.proc-info-card {
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
    border-radius:var(--radius); padding:22px 26px; backdrop-filter:blur(10px);
}
.pic-label { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:6px; }
.pic-val   { font-size:18px; font-weight:700; color:#fff; }
.pic-val .hl { color:var(--gold-l); }

/* ============================================================
   WHY US  (숫자 카운터)
============================================================ */
#why { background:var(--white); }
.why-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.why-card {
    text-align:center; padding:44px 20px;
    border:1px solid var(--border); border-radius:var(--radius-lg);
    background:var(--bg); transition:all 0.3s;
}
.why-card:hover {
    background:var(--white); border-color:var(--green);
    transform:translateY(-6px); box-shadow:0 16px 40px rgba(46,125,82,0.1);
}
.why-num {
    font-size:44px; font-weight:700; color:var(--navy);
    line-height:1; letter-spacing:-2px; margin-bottom:8px;
}
.why-num sup { font-size:22px; font-weight:700; vertical-align:super; }
.why-num sub { font-size:22px; font-weight:600; }
.why-label { font-size:15px; font-weight:700; color:var(--dark); margin-bottom:8px; }
.why-sub   { font-size:13px; color:var(--light); line-height:1.65; }

/* ============================================================
   TEAM
============================================================ */
#team { background:var(--bg); }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.team-card {
    background:var(--white); border-radius:var(--radius-lg);
    border:1px solid var(--border); padding:36px 20px; text-align:center;
    transition:all 0.3s;
}
.team-card:hover {
    transform:translateY(-6px);
    box-shadow:0 16px 48px rgba(46,125,82,0.12);
    border-color:var(--green);
}
.team-av {
    width:88px; height:88px; border-radius:50%;
    margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center;
}
.team-ico {
    font-size:36px; line-height:1;
}
.av1 { background:linear-gradient(135deg,var(--green-pale),#d4edda); }
.av2 { background:linear-gradient(135deg,#e8eef5,#d4dfed); }
.av3 { background:linear-gradient(135deg,#fdf6e3,#f5ecd0); }
.av4 { background:linear-gradient(135deg,#f0e6f6,#e2d4ed); }
.team-pos  { font-size:11px; font-weight:700; color:var(--green); letter-spacing:1.2px; text-transform:uppercase; margin-bottom:6px; }
.team-name { font-size:17px; font-weight:600; color:var(--dark); margin-bottom:10px; }
.team-desc { font-size:13px; color:var(--mid); line-height:1.75; }

/* ============================================================
   CTA  ── photo background
============================================================ */
#cta {
    position:relative; overflow:hidden;
    padding:160px 24px; text-align:center;
}
.cta-bg {
    position:absolute; inset:0;
    background:url('copy_image/3.png') center center / cover no-repeat;
}
.cta-overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(8,20,14,0.9) 0%,rgba(30,58,95,0.88) 100%);
}
.cta-inner { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.cta-inner .display { margin:10px 0 20px; }
.cta-inner p { font-size:17px; color:rgba(255,255,255,0.65); margin-bottom:48px; line-height:1.8; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   CONTACT
============================================================ */
#contact { background:var(--white); }
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:64px; }
.contact-info h3 { font-size:20px; font-weight:600; margin-bottom:28px; }
.ci-list { display:flex; flex-direction:column; gap:22px; }
.ci-item { display:flex; gap:16px; align-items:flex-start; }
.ci-ico {
    width:46px; height:46px; background:var(--green-pale); border-radius:12px;
    display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
}
.ci-lbl { font-size:11px; font-weight:700; color:var(--light); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:3px; }
.ci-val { font-size:14px; color:var(--dark); font-weight:500; line-height:1.65; }

.contact-form {
    background:var(--bg); border-radius:var(--radius-lg); padding:44px;
    border:1px solid var(--border);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fg { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.fg label { font-size:13px; font-weight:600; color:var(--dark); }
.fg input,
.fg select,
.fg textarea {
    border:1.5px solid var(--border); border-radius:var(--radius-sm);
    padding:12px 16px; font-size:14px; font-family:var(--font);
    color:var(--dark); outline:none; background:var(--white); transition:border-color 0.2s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--green); }
.fg textarea { resize:vertical; min-height:120px; }
.btn-submit {
    width:100%; background:var(--green); color:#fff;
    border:none; padding:17px; border-radius:var(--radius-sm);
    font-size:15px; font-weight:700; cursor:pointer;
    font-family:var(--font); transition:all 0.22s;
}
.btn-submit:hover { background:var(--green-l); transform:translateY(-1px); box-shadow:0 8px 24px rgba(46,125,82,0.3); }

/* ============================================================
   FOOTER
============================================================ */
footer { background:var(--dark); color:rgba(255,255,255,0.55); padding:72px 24px 32px; }
.foot-inner { max-width:1160px; margin:0 auto; }
.foot-top {
    display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px;
    padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.07);
}
.foot-brand .fn  { color:#fff; font-size:17px; font-weight:600; margin-bottom:6px; }
.foot-brand .fs  { font-size:11px; color:rgba(255,255,255,0.3); margin-bottom:16px; }
.foot-brand p    { font-size:13px; line-height:1.9; margin-bottom:18px; }
.foot-badge {
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(46,125,82,0.18); border:1px solid rgba(46,125,82,0.38);
    padding:8px 16px; border-radius:100px; font-size:12px; color:rgba(255,255,255,0.7);
}
.foot-col h4 { color:#fff; font-size:14px; font-weight:700; margin-bottom:16px; }
.foot-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.foot-col ul a { font-size:13px; color:rgba(255,255,255,0.45); transition:color 0.2s; }
.foot-col ul a:hover { color:#fff; }
.foot-bottom {
    padding-top:28px; display:flex; justify-content:space-between;
    align-items:center; flex-wrap:wrap; gap:10px;
}
.foot-bottom p { font-size:12px; }

/* ============================================================
   LOCATION (오시는 길)
============================================================ */
#location { background:var(--bg); }
.loc-map {
    border-radius:var(--radius-lg); overflow:hidden;
    height:480px; border:1px solid var(--border);
    transition:box-shadow 0.3s;
}
.loc-map:hover { box-shadow:var(--shadow-lg); }
.loc-naver-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--green); color:#fff;
    padding:14px 28px; border-radius:var(--radius);
    font-size:14px; font-weight:600;
    transition:background 0.2s;
}
.loc-naver-btn:hover { background:var(--green-l); }

/* ============================================================
   SCROLL ANIMATIONS
============================================================ */
/* Base state */
.reveal {
    opacity:0;
    transform:translateY(40px);
    transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* Stagger variants */
.reveal.d1 { transition-delay:0.05s; }
.reveal.d2 { transition-delay:0.12s; }
.reveal.d3 { transition-delay:0.19s; }
.reveal.d4 { transition-delay:0.26s; }
.reveal.d5 { transition-delay:0.33s; }
.reveal.d6 { transition-delay:0.40s; }

/* Fade from left/right */
.reveal-l { opacity:0; transform:translateX(-40px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal-r { opacity:0; transform:translateX(40px);  transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal-l.visible,
.reveal-r.visible { opacity:1; transform:translateX(0); }

/* Scale in */
.reveal-s { opacity:0; transform:scale(0.93); transition:opacity 0.6s ease,transform 0.6s ease; }
.reveal-s.visible { opacity:1; transform:scale(1); }

/* Keyframes for hero */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(28px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1024px) {
    .str-grid { grid-template-columns:repeat(2,1fr); }
    .story-grid,.proc-grid,.ss-grid { grid-template-columns:1fr; gap:44px; }
    .story-photo { height:360px; }
    .ss-photo { height:360px; }
    .foot-top { grid-template-columns:1fr 1fr; }
    .team-grid { grid-template-columns:repeat(2,1fr); }
    .why-row   { grid-template-columns:repeat(2,1fr); }
    .products-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
    section { padding:64px 16px; }
    .wrap { padding:0 16px; }
    nav,.btn-nav { display:none; }
    .menu-toggle { display:block; }

    /* Hero */
    #hero { min-height:100svh; }
    .hero-inner { padding:0 20px 60px; }
    .hero-badge { margin-top:24px; }
    .hero-title { font-size:clamp(24px,6.5vw,38px); line-height:1.3; word-break:keep-all; }
    .hero-desc { font-size:14px; line-height:1.75; margin-bottom:32px; word-break:keep-all; }
    .hero-desc br { display:none; }
    .hero-ctas { gap:10px; }
    .hero-ctas .btn { width:100%; justify-content:center; padding:16px 24px; font-size:15px; }
    .hero-stats { flex-direction:row; flex-wrap:wrap; margin-top:48px; }
    .hero-stat { flex:1 1 50%; border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); padding:20px 16px; }
    .hero-stat:nth-child(odd) { border-right:1px solid rgba(255,255,255,0.1); }
    .hero-stat:nth-child(n+3) { border-bottom:none; }
    .hs-num { font-size:26px; }
    .hs-label { font-size:12px; }
    .scroll-hint { display:none; }

    /* Story */
    .story-photo { height:280px; }
    .story-photo-badge { padding:14px 18px; min-width:auto; }
    .spb-val { font-size:18px; }
    .story-photo-badge2 { padding:12px 16px; }
    .story-text .heading { font-size:24px; }

    /* Gallery */
    .gallery-mosaic {
        grid-template-columns:1fr 1fr;
        grid-template-rows:200px 200px 200px;
    }
    .gm-main { grid-row:span 1; }
    .gm-overlay { opacity:1; }

    /* Values */
    .values-row { grid-template-columns:1fr; gap:12px; }
    .loc-map { height:320px; }
    .val-card { padding:32px 24px; }

    /* Products */
    .products-grid { grid-template-columns:repeat(2,1fr); }
    .prod-thumb { height:140px; }

    /* Preview grid */
    .preview-grid { grid-template-columns:repeat(3,1fr); gap:12px; }
    .preview-img { height:140px; }
    .preview-name { font-size:14px; }
    .preview-info { padding:12px; }

    /* Smartstore */
    .ss-photo { height:260px; }
    .ss-features { gap:10px; }
    .btn-ss { width:100%; justify-content:center; }

    /* Catalog tabs */

    /* Contact */
    .contact-grid { grid-template-columns:1fr; gap:36px; }
    .contact-form { padding:20px 16px; border-radius:var(--radius); margin:0 -4px; }
    .form-row { grid-template-columns:1fr; }
    .fg input, .fg select, .fg textarea { font-size:16px; padding:14px 16px; }
    .fg label { font-size:14px; }
    .proc-search { font-size:16px; }

    /* CTA */
    #cta { padding:100px 20px; }
    .cta-btns { flex-direction:column; }
    .cta-btns .btn { width:100%; justify-content:center; }

    /* Footer */
    .foot-top { grid-template-columns:1fr; gap:28px; }
    .foot-bottom { flex-direction:column; text-align:center; }

    /* Mobile menu enhancements */
    .mobile-menu a { font-size:16px; padding:14px 0; }

    /* Buttons general - bigger touch targets */
    .btn { padding:14px 28px; font-size:15px; min-height:48px; }
    .btn-submit { min-height:52px; font-size:16px; }

    /* Table → card layout on mobile */
    .table-wrap { border:none; border-radius:0; }
    .proc-table thead { display:none; }
    .proc-table, .proc-table tbody, .proc-table tr, .proc-table td {
        display:block; width:100%;
    }
    .proc-table tr {
        background:var(--white);
        border:1px solid var(--border);
        border-radius:var(--radius-sm);
        padding:14px 16px;
        margin-bottom:10px;
    }
    .proc-table td { border-bottom:none; padding:4px 0; font-size:13px; }
    .proc-table td.no { display:none; }
    .proc-table td::before {
        content:attr(data-label);
        font-size:10px; font-weight:700; color:var(--light);
        letter-spacing:0.5px; text-transform:uppercase;
        display:block; margin-bottom:1px;
    }
    .proc-table tbody tr:hover td { background:transparent; }

    /* 페이지네이션 줄바꿈 방지 */
    .proc-pager { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .pg-btn { min-width:34px; height:34px; font-size:12px; padding:0 8px; flex-shrink:0; }
    .pg-dot { flex-shrink:0; }

    /* 상품상세 카드: 라벨+값 가로 배치 */
    #procTable tr {
        display:flex; flex-wrap:wrap; gap:0;
        padding:14px 16px;
    }
    #procTable td {
        display:flex; align-items:center; gap:6px;
    }
    #procTable td.no { display:none !important; }
    #procTable td::before {
        display:inline; margin-bottom:0;
        font-size:11px; font-weight:700; color:var(--navy);
        background:rgba(30,58,95,0.08); padding:2px 8px; border-radius:4px;
        white-space:nowrap; flex-shrink:0;
    }
    #procTable td.iname { width:100%; font-size:13px; line-height:1.7; }
    #procTable td.iid { width:100%; font-size:12px; }

    /* 납품현황 카드: 라벨+값 가로 배치 */
    .delivery-table tr {
        display:flex; flex-wrap:wrap; gap:0;
        padding:14px 16px;
    }
    .delivery-table td {
        display:flex; align-items:center; gap:6px;
        padding:4px 0;
    }
    .delivery-table td::before {
        display:inline; margin-bottom:0;
        font-size:11px; font-weight:700; color:var(--green);
        background:var(--green-pale); padding:2px 8px; border-radius:4px;
        white-space:nowrap; flex-shrink:0;
    }
    .delivery-table td:nth-child(2) { width:100%; }
    .delivery-table td:nth-child(3) { width:100%; }
    .delivery-table td:nth-child(4) { width:100%; }

    /* Procurement */
    .check-list li { font-size:14px; }
    .proc-info-card { padding:18px 20px; }
    .pic-val { font-size:16px; }

    /* Why / Team */
    .why-row { grid-template-columns:repeat(2,1fr); gap:10px; }
    .why-card { padding:28px 14px; }
    .why-num { font-size:34px; }
    .team-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .team-card { padding:28px 16px; }

    /* Heading sizes */
    .heading { font-size:clamp(22px,5vw,32px); }
    .display { font-size:clamp(26px,6vw,40px); }
    .subhead { font-size:15px; }
}
@media (max-width:480px) {
    section { padding:52px 14px; }
    .wrap { padding:0 14px; }
    .str-grid { grid-template-columns:1fr; gap:12px; }
    .str-card { padding:24px 20px; }
    .str-ico { width:40px; height:40px; font-size:18px; margin-bottom:14px; }
    .str-card h3 { font-size:17px; margin-bottom:8px; }
    .str-card p { font-size:15px; line-height:1.7; }
    .str-line { margin-bottom:12px; }
    .str-bg-num { font-size:56px; right:16px; top:16px; }
    .why-row   { grid-template-columns:1fr; }
    .team-grid { grid-template-columns:1fr; }
    .gallery-mosaic {
        grid-template-columns:1fr;
        grid-template-rows:repeat(5,180px);
        gap:8px;
    }
    .preview-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .preview-img { height:120px; }
    .preview-placeholder { font-size:36px; }
    .hero-stats { flex-direction:column; }
    .hero-stat { flex:1 1 100%; border-right:none !important; border-bottom:1px solid rgba(255,255,255,0.1); }
    .hero-stat:last-child { border-bottom:none; }
    .hero-title { letter-spacing:-1px; }
    .story-photo { height:220px; }
    .values-row { gap:10px; }
    .val-card { padding:28px 20px; }
    #cta { padding:72px 16px; }
    .contact-form { padding:16px 12px; margin:0 -2px; }
    .products-grid { grid-template-columns:1fr; }
    .prod-body { padding:20px 18px; }

    /* Header compact */
    #header { height:56px; }
    .logo-icon { width:32px; height:32px; font-size:16px; }
    .logo-text { font-size:14px; }
    .mobile-menu { top:56px; }

    /* Footer */
    .foot-bottom p { font-size:11px; }
}