/* ── COMMON SECTION ── */
.sec { padding: 80px 0; }
.sec-off { background: var(--bg-off); }
.sec-grey { background: var(--bg-grey); }
.sec-dark { background: var(--bg-dark); }
.sec-in { max-width: 1300px; margin: 0 auto; padding: 0 40px; }

.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--green); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; }
.kicker::before { content:''; width:18px; height:2px; background: var(--green); }
.kicker-w { color: rgba(255,255,255,.5); }
.kicker-w::before { background: rgba(255,255,255,.4); }

.sh { font-family: var(--sans); font-weight: 900; font-size: clamp(26px, 3vw, 40px); color: var(--charcoal); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px; }
.sh-w { color: #fff; }
.slead { font-size: 14.5px; color: var(--muted); line-height: 1.82; max-width: 540px; }
.slead-w { color: rgba(255,255,255,.58); }

/* ── PILLAR ── */
.pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); margin-top: 48px; }
.pillar { background: #fff; padding: 28px 30px; border-top: 3px solid transparent; transition: border-color .25s, box-shadow .25s; }
.pillar:hover { border-top-color: var(--green); box-shadow: 0 6px 32px rgba(0,0,0,.07); }
.pillar-icon { width: 42px; height: 42px; color: var(--green); margin-bottom: 18px; }
.pillar-num { font-size: 11px; color: #ccc; letter-spacing: .2em; margin-bottom: 8px; font-family: var(--cond); }
.pillar-ttl { font-weight: 700; font-size: 18px; margin-bottom: 10px; letter-spacing: -.01em; }
.pillar-body { font-size: 13.5px; color: var(--muted); line-height: 1.85; max-width: none; }

/* ── PRODUCT CARD ── */
.pg { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); }
.pc { background: #fff; cursor: pointer; transition: box-shadow .25s; display: flex; flex-direction: column; overflow: hidden; }
.pc:hover { box-shadow: 0 8px 32px rgba(0,0,0,.11); z-index: 1; }
.pc-img { height: 190px; background-size: cover; background-position: center; filter: brightness(.8) saturate(.65); transition: filter .4s, transform .5s; }
.pc:hover .pc-img { filter: brightness(.9) saturate(.85); transform: scale(1.04); }
.pc-body { padding: 20px 22px 24px; flex: 1; border-top: 3px solid transparent; transition: border-color .25s; }
.pc:hover .pc-body { border-top-color: var(--green); }
.pc-cat { font-size: 10px; color: var(--green); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 4px; }
.pc-name { font-weight: 700; font-size: 17px; margin-bottom: 4px; letter-spacing: -.01em; }
.pc-origin { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.pc-desc { font-size: 12.5px; color: var(--muted); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-cta { font-size: 12px; color: var(--green); font-weight: 700; margin-top: 12px; opacity: 0; transform: translateY(4px); transition: all .25s; }
.pc:hover .pc-cta { opacity: 1; transform: translateY(0); }

/* ── CAPABILITY ── */
.cap-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; margin-top: 52px; }
.cap-diagram { background: #fff; border: 1px solid var(--border); padding: 30px; box-shadow: 0 2px 16px rgba(0,0,0,.05); }
.fd-row { display: flex; align-items: stretch; width: 100%; }
.fd-node { flex: 1; border: 1px solid var(--border); padding: 16px 10px; text-align: center; background: var(--bg-grey); }
.fd-node.hub { background: var(--green); border-color: var(--green); }
.fd-node.hub .fdn-t { color: #fff; }
.fd-node.hub .fdn-s { color: rgba(255,255,255,.75); }
.fdn-t { font-weight: 700; font-size: 13px; color: var(--charcoal); }
.fdn-s { font-size: 10px; color: var(--muted); margin-top: 3px; letter-spacing: .05em; }
.fd-arr { display: flex; align-items: center; padding: 0 6px; color: var(--green); font-size: 18px; }
.diag-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; width: 100%; }
.diag-cell { background: var(--green-pale); border: 1px solid rgba(43,140,60,.18); padding: 11px; text-align: center; }
.diag-lbl { font-size: 9.5px; color: var(--green); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; }
.diag-val { font-size: 12px; color: var(--mid); font-weight: 500; }
.diag-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; width: 100%; }
.diag-kv-item .diag-lbl { text-align: left; }
.diag-kv-item .diag-val { font-family: var(--cond); font-size: 16px; font-weight: 700; text-align: left; }

.cap-list { display: flex; flex-direction: column; gap: 0; }
.cap-item { padding: 22px 0 22px 22px; border-left: 3px solid var(--border-lt); border-bottom: 1px solid var(--border-lt); transition: border-left-color .2s; }
.cap-item:last-child { border-bottom: none; }
.cap-item:hover { border-left-color: var(--green); }
.cap-ttl { font-weight: 700; font-size: 16px; margin-bottom: 6px; letter-spacing: -.01em; }
.cap-body { word-break: keep-all; font-size: 13.5px; color: var(--muted); line-height: 1.82; }

/* ── NETWORK ── */
.net-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 52px; align-items: start; margin-top: 48px; }
.net-map { border: 1px solid var(--border); height: 500px; border-radius: 4px; overflow: hidden; }

.map-pulse { animation: mp 2.5s ease-in-out infinite; }
@keyframes mp { 0%,100%{opacity:.5} 50%{opacity:1} }
.region-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); }
.rrow { background: #fff; display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; transition: background .2s; cursor: default; }
.rrow:hover { background: var(--green-pale); }
.rdot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: 6px; }
.rname { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.rrole { font-size: 10.5px; color: var(--green); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 1px; }
.rgoods { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.55; }


/* 스크롤 등장 — .rv는 reveal.js가 부여하고 .vis로 해제 */
.rv { opacity: 0; transform: translateY(14px); }
.rv.vis { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.25,.46,.45,.94); }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.vis { opacity: 1; transform: none; transition: none; }
}