@charset "utf-8";
/*
 * 마이크로발란스 농업사업부
 *
 * 참고한 방향 (아이오크롭스 · 대흥)
 *  - 섹션 제목은 영문 라벨이 아니라 "…합니다" 로 끝나는 한국어 문장
 *  - 강조는 굵기가 아니라 문장 안의 색으로
 *  - 큰 글자를 굵기 400~500 으로 눌러 쓰고, 본문은 작고 가볍게
 *  - 어두운 밴드와 흰 밴드를 번갈아 배치
 */

@import url('../shared/fonts/pretendard/pretendard.css');

:root {
    --font: 'pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

    --ink: #151515;
    --ink-2: #3c3c3c;
    --ink-3: #616161;
    --paper: #ffffff;
    --paper-2: #fafafa;
    --dark: #151515;
    --dark-2: #202020;
    --on-dark: #fafafa;
    --on-dark-2: #b4b4b4;
    --line: #e4e4e4;
    --line-dark: #333333;

    /* 아이오크롭스가 문장 안에서 쓰는 방식대로, 강조 한 가지만 씁니다 */
    --leaf: #2a7a37;            /* 흰/회색 배경에서 AA 4.5:1 확보 */
    --leaf-on-dark: #6ed17e;

    --page: 1220px;
    --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
    --band: clamp(5rem, 3rem + 8vw, 10rem);
    --header-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
    font-family: var(--font);
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: -0.017em;
    color: var(--ink-2);
    background: var(--paper);
    word-break: keep-all;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }

.wrap { width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 999; padding: .8rem 1.2rem; background: var(--ink); color: #fff; }
.skip:focus { left: 0; }

/* ── 헤더 ────────────────────────────────────────── */
.hd {
    position: fixed; inset: 0 0 auto 0; z-index: 80;
    height: var(--header-h);
    display: flex; align-items: center;
    transition: background .3s ease, border-color .3s ease;
    border-bottom: 1px solid transparent;
}
.hd__in { width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; }
.hd__logo { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em; color: var(--on-dark); display: flex; align-items: baseline; gap: .55rem; }
.hd__logo span { font-size: .75rem; font-weight: 400; color: var(--on-dark-2); letter-spacing: 0; }
.hd__nav { margin-inline-start: auto; }
.hd__nav ul { display: flex; gap: clamp(.75rem, 2vw, 2.25rem); }
.hd__nav a { font-size: .9375rem; font-weight: 500; color: var(--on-dark); opacity: .82; transition: opacity .2s; }
.hd__nav a:hover { opacity: 1; }
.hd__btn { display: none; width: 38px; height: 38px; margin-inline-start: auto; }
.hd__btn span { display: block; width: 20px; height: 1.5px; background: var(--on-dark); margin: 4px auto; transition: background .3s; }

/* 첫 화면을 지나면 흰 배경으로 반전 */
.hd.is-solid { background: rgba(255, 255, 255, .96); border-bottom-color: var(--line); backdrop-filter: blur(8px); }
.hd.is-solid .hd__logo { color: var(--ink); }
.hd.is-solid .hd__logo span { color: var(--ink-3); }
.hd.is-solid .hd__nav a { color: var(--ink-2); }
.hd.is-solid .hd__btn span { background: var(--ink); }

@media (max-width: 880px) {
    .hd__btn { display: block; }
    .hd__nav {
        position: fixed; inset: var(--header-h) 0 auto 0;
        background: var(--paper); border-bottom: 1px solid var(--line);
        padding: .5rem var(--gutter) 1.5rem;
        display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
        transition: grid-template-rows .32s ease, opacity .32s ease, visibility .32s;
    }
    .hd__nav[data-open='true'] { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
    .hd__nav ul { flex-direction: column; gap: 0; overflow: hidden; }
    .hd__nav a { display: block; padding: 1rem 0; font-size: 1.0625rem; color: var(--ink); opacity: 1; border-bottom: 1px solid var(--line); }
}

/* ── 첫 화면 ─────────────────────────────────────── */
.hero {
    position: relative;
    min-height: min(88svh, 780px);
    display: flex; align-items: flex-end;
    padding-block: calc(var(--header-h) + 4rem) clamp(3rem, 2rem + 4vw, 5.5rem);
    background: var(--dark);
    color: var(--on-dark);
    overflow: hidden;
}
/* 배경 사진 — 원본이 460px 로 작아 크게 확대되므로, 어둡게 눌러 질감처럼 씁니다 */
.hero__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .34;
    filter: saturate(.85);
}
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(94deg, rgba(15, 15, 15, .92) 0%, rgba(15, 15, 15, .72) 48%, rgba(15, 15, 15, .42) 100%),
        radial-gradient(120% 80% at 78% 8%, rgba(110, 209, 126, .14), transparent 58%);
    pointer-events: none;
}
.hero__in { position: relative; z-index: 2; width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; }
.hero__title {
    font-size: clamp(2rem, 1.1rem + 3.6vw, 3.6rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.038em;
    max-width: 20ch;
}
.hero__title b { font-weight: 700; color: var(--leaf-on-dark); }
.hero__desc {
    margin-block-start: 1.75rem;
    font-size: clamp(.9375rem, .9rem + .3vw, 1.125rem);
    line-height: 1.8;
    color: var(--on-dark-2);
    max-width: 44ch;
}
.hero__facts {
    display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 4.5rem);
    margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    padding-block-start: 2rem;
    border-block-start: 1px solid var(--line-dark);
}
.hero__facts dt { font-size: .8125rem; color: var(--on-dark-2); }
.hero__facts dd { font-size: 1.125rem; font-weight: 600; color: var(--on-dark); margin-block-start: .35rem; letter-spacing: -0.02em; }

/* ── 밴드 ────────────────────────────────────────── */
.band { padding-block: var(--band); }
.band--gray { background: var(--paper-2); }
.band--dark { background: var(--dark); color: var(--on-dark); }
.band--dark .lede { color: var(--on-dark-2); }

/* 섹션 제목: 한국어 서술형 문장. 강조는 색으로만. */
.stitle {
    font-size: clamp(1.5rem, 1rem + 1.9vw, 2.5rem);
    font-weight: 500;
    line-height: 1.46;
    letter-spacing: -0.035em;
    color: var(--ink);
}
.band--dark .stitle { color: var(--on-dark); }
.stitle b { font-weight: 700; color: var(--leaf); }
.band--dark .stitle b { color: var(--leaf-on-dark); }

.lede {
    margin-block-start: 1.5rem;
    font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
    line-height: 1.9;
    color: var(--ink-3);
    max-width: 58ch;
}

/* ── 솔루션 격자 (아이오크롭스의 어두운 타일 배치) ── */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1px;
    margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    background: var(--line-dark);
    border: 1px solid var(--line-dark);
}
.tile { background: var(--dark); padding: clamp(1.75rem, 1rem + 2vw, 2.75rem); min-height: 260px; display: flex; flex-direction: column; }
.tile__no { font-size: .8125rem; color: var(--on-dark-2); letter-spacing: .06em; }
.tile__name { margin-block-start: 1.25rem; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.03em; color: var(--on-dark); }
.tile__desc { margin-block-start: auto; padding-block-start: 1.5rem; font-size: .875rem; line-height: 1.8; color: var(--on-dark-2); }

/* ── 사업분야 (대흥의 넓은 좌우 배치) ─────────────── */
.work + .work { margin-block-start: clamp(3rem, 2rem + 4vw, 6rem); padding-block-start: clamp(3rem, 2rem + 4vw, 6rem); border-block-start: 1px solid var(--line); }
.work { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); align-items: start; }
@media (min-width: 920px) { .work { grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, .8fr); } }
.work__no { font-size: .875rem; font-weight: 500; color: var(--leaf); letter-spacing: .04em; padding-block-start: .4rem; }
.work__name { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); font-weight: 600; line-height: 1.48; letter-spacing: -0.032em; color: var(--ink); }
.work__desc { margin-block-start: 1.25rem; font-size: .9375rem; line-height: 1.9; color: var(--ink-3); }
.work__items { margin-block-start: 1.75rem; }
.work__items li { position: relative; padding-inline-start: .9rem; font-size: .875rem; line-height: 2.1; color: var(--ink-2); }
.work__items li::before { content: ''; position: absolute; left: 0; top: 1.02em; width: 4px; height: 4px; border-radius: 50%; background: var(--leaf); }
.work__fig { aspect-ratio: 5 / 4; overflow: hidden; background: var(--paper-2); }
.work__fig img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.22,1,.36,1); }
.work:hover .work__fig img { scale: 1.04; }
.vz-l { fill: none; stroke: var(--leaf); stroke-width: 1.3; }
.vz-l--soft { stroke: var(--line); stroke-width: 1; }
.vz-f { fill: var(--leaf); }
.vz-f--soft { fill: var(--leaf); opacity: .2; }

/* ── 문장형 강조 배너 ────────────────────────────── */
.claim { text-align: center; }
.claim__text {
    font-size: clamp(1.375rem, .9rem + 2.1vw, 2.75rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.038em;
    color: var(--on-dark);
}
.claim__text b { font-weight: 600; color: var(--leaf-on-dark); }
.claim__sub { margin-block-start: 1.75rem; font-size: .9375rem; line-height: 1.9; color: var(--on-dark-2); }

/* ── 제품 ────────────────────────────────────────── */
.prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.prod__fig { aspect-ratio: 4 / 3; background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.prod__fig img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }
.prod__cat { margin-block-start: 1.25rem; font-size: .8125rem; color: var(--leaf); }
.prod__name { margin-block-start: .5rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.028em; color: var(--ink); }
.prod__desc { margin-block-start: .5rem; font-size: .875rem; line-height: 1.8; color: var(--ink-3); }

/* ── 소식 ────────────────────────────────────────── */
.news { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-block-start: 1px solid var(--line); }
.news li { border-block-end: 1px solid var(--line); }
.news a { display: grid; gap: .5rem; padding-block: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); transition: background .25s ease; }
@media (min-width: 760px) { .news a { grid-template-columns: 8rem minmax(0, 1fr) 5rem; gap: 2.5rem; align-items: baseline; } }
.news a:hover { background: var(--paper-2); }
.news__date { font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.news__ttl { font-size: 1.0625rem; font-weight: 600; line-height: 1.6; letter-spacing: -0.028em; color: var(--ink); }
.news__sum { display: block; margin-block-start: .5rem; font-size: .875rem; line-height: 1.8; color: var(--ink-3); }
.news__go { font-size: .8125rem; color: var(--leaf); }

/* ── 푸터 ────────────────────────────────────────── */
.ft { background: var(--dark); color: var(--on-dark-2); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2.5rem; }
.ft__top { display: grid; gap: 2.5rem; padding-block-end: 2.5rem; border-block-end: 1px solid var(--line-dark); }
@media (min-width: 820px) { .ft__top { grid-template-columns: 1.3fr 1fr 1fr; } }
.ft__logo { font-size: 1.1875rem; font-weight: 700; color: var(--on-dark); letter-spacing: -0.03em; }
.ft__tag { margin-block-start: .75rem; font-size: .875rem; line-height: 1.8; max-width: 28ch; }
.ft__h { font-size: .8125rem; color: #969696; margin-block-end: 1rem; }
.ft__list li + li { margin-block-start: .6rem; }
.ft__list a { font-size: .875rem; }
.ft__list a:hover { color: var(--leaf-on-dark); }
.ft__info div { display: flex; gap: .9rem; font-size: .875rem; line-height: 2; }
.ft__info dt { min-width: 3rem; color: #969696; }
.ft__copy { padding-block-start: 2rem; display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; font-size: .8125rem; color: #969696; }

/* ── 등장 ────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .rv { animation: rise linear both; animation-timeline: view(); animation-range: entry 4% cover 24%; }
    }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } }

/* ── 헤더 로고 (실제 로고 이미지) ──────────────────
   첫 화면은 어두워 흰 워드마크를, 스크롤 후 흰 헤더에서는 진한 워드마크를 씁니다.
   초록 사각형은 두 버전 모두 그대로 살아 있습니다. */
.hd__logo { gap: .7rem; }
.hd__logo-img { width: clamp(118px, 11vw, 150px); height: auto; display: block; }
.hd__logo-img--dark { display: none; }
.hd.is-solid .hd__logo-img--light { display: none; }
.hd.is-solid .hd__logo-img--dark { display: block; }
.ft__logo img { width: 150px; height: auto; }

/* 제품이 1~2개로 줄어도 카드 크기가 들쭉날쭉해지지 않도록 열 수를 고정합니다 */
.prods { grid-template-columns: 1fr; }
@media (min-width: 620px) { .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ══════════════════════════════════════════════════
   가로로 넘기는 제품 목록
   ══════════════════════════════════════════════════ */
.carousel { position: relative; margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2rem); }

.carousel__nav { display: flex; gap: .5rem; justify-content: flex-end; margin-block-end: 1rem; }
.carousel.is-static .carousel__nav { display: none; }
.carousel__btn {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-2);
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.carousel__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.carousel__btn:hover:not(:disabled) { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.carousel__btn:disabled { opacity: .32; cursor: default; }

.prods {
    --slides: 1;
    display: flex;
    gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-block-end: 4px;
    grid-template-columns: none;
}
.prods::-webkit-scrollbar { display: none; }
@media (min-width: 620px) { .prods { --slides: 2; } }
@media (min-width: 940px) { .prods { --slides: 3; } }

.prods > * {
    flex: 0 0 calc((100% - (var(--slides) - 1) * clamp(1.5rem, 1rem + 2vw, 2.75rem)) / var(--slides));
    scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) { .prods { scroll-behavior: auto; } }

/* ══════════════════════════════════════════════════
   하위 페이지 공통 (아이오크롭스 · 대흥식 구조)
   ══════════════════════════════════════════════════ */

/* ── 페이지 상단: 어두운 밴드에 서술형 문장 ─────── */
.phead {
    position: relative;
    padding-block: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 5.5rem)) clamp(3rem, 2rem + 3vw, 4.5rem);
    background: var(--dark);
    color: var(--on-dark);
    overflow: hidden;
    border-radius: 0 0 24px 24px;
}
.phead__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.phead::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(94deg, rgba(15,15,15,.92) 0%, rgba(15,15,15,.7) 50%, rgba(15,15,15,.42) 100%);
}
.phead__in { position: relative; z-index: 2; width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; }
.phead__ttl { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.875rem); font-weight: 500; line-height: 1.42; letter-spacing: -0.038em; max-width: 22ch; }
.phead__ttl b { font-weight: 700; color: var(--leaf-on-dark); }
.phead__desc { margin-block-start: 1.35rem; font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem); line-height: 1.85; color: var(--on-dark-2); max-width: 48ch; }

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--on-dark-2); margin-block-end: 1.5rem; }
.crumb li { display: flex; align-items: center; gap: .5rem; }
.crumb li + li::before { content: '/'; opacity: .45; }
.crumb a:hover { color: var(--on-dark); }
.crumb [aria-current] { color: var(--on-dark); }

/* ── 하위 탭 ─────────────────────────────────────── */
.subnav { border-bottom: 1px solid var(--line); background: var(--paper); }
.subnav__list { display: flex; gap: clamp(1rem, 3vw, 2.5rem); overflow-x: auto; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav a { display: block; position: relative; padding: 1.15rem .15rem; font-size: .9375rem; font-weight: 500; white-space: nowrap; color: var(--ink-3); transition: color .2s; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current='page'] { color: var(--ink); font-weight: 600; }
.subnav a[aria-current='page']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--leaf); }

/* ── 본문 블록 ───────────────────────────────────── */
.blk { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.blk + .blk { border-top: 1px solid var(--line); }
.blk--gray { background: var(--paper-2); border-top: 0 !important; }
.blk--dark { background: var(--dark); color: var(--on-dark); border-top: 0 !important; }
.blk--dark .lede { color: var(--on-dark-2); }

/* 좌우 2단 */
.split { display: grid; gap: clamp(1.75rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--rev > :first-child { order: 2; } }
.split__fig { overflow: hidden; background: var(--paper-2); }
.split__fig img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* 서술형 항목 목록 */
.plist { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--line); }
.plist > li { display: grid; gap: .75rem; padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .plist > li { grid-template-columns: 4rem minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
.plist__no { font-size: .875rem; font-weight: 600; color: var(--leaf); padding-block-start: .25rem; }
.plist__ttl { font-size: clamp(1.0625rem, 1rem + .45vw, 1.375rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.5; }
.plist__txt { margin-block-start: .8rem; font-size: .9375rem; line-height: 1.9; color: var(--ink-3); }

/* 연혁 */
.hist { border-top: 1px solid var(--line); margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); }
.hist > li { display: grid; gap: .75rem; padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .hist > li { grid-template-columns: 9rem minmax(0, 1fr); gap: 2.5rem; } }
.hist__year { font-size: 1.0625rem; font-weight: 600; color: var(--leaf); font-variant-numeric: tabular-nums; }
.hist__items > li { position: relative; padding-inline-start: .95rem; font-size: .9375rem; line-height: 2; color: var(--ink-2); }
.hist__items > li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 5px; height: 5px; border-radius: 50%; background: var(--leaf); }

/* 표 */
.tbl { overflow-x: auto; margin-block-start: 1.75rem; border: 1px solid var(--line); }
.tbl table { width: 100%; border-collapse: collapse; min-width: 620px; }
.tbl th, .tbl td { padding: 1.05rem 1.1rem; text-align: left; font-size: .9375rem; border-bottom: 1px solid var(--line); }
.tbl thead th { font-size: .8125rem; font-weight: 600; color: var(--ink-3); background: var(--paper-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .em { font-weight: 600; color: var(--ink); }

/* 정보 목록 · 지도 */
.info { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info > div { background: var(--paper); padding: 1.5rem 1.6rem; }
.info dt { font-size: .8125rem; color: var(--ink-3); }
.info dd { margin-block-start: .45rem; font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.7; }
.map { margin-block-start: 1.75rem; overflow: hidden; border: 1px solid var(--line); }
.map iframe { display: block; width: 100%; height: clamp(280px, 40vw, 430px); border: 0; }

/* 제품 상세 */
.pdetail { display: grid; gap: clamp(1.75rem, 1.5rem + 2vw, 3.5rem); }
@media (min-width: 900px) { .pdetail { grid-template-columns: 1fr 1fr; align-items: start; } }
.pdetail__fig { background: var(--paper-2); border: 1px solid var(--line); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.pdetail__fig img { width: 100%; height: 100%; object-fit: contain; padding: 2rem; }
.pdetail__cat { font-size: .8125rem; color: var(--leaf); }
.pdetail__name { margin-block-start: .6rem; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 600; letter-spacing: -0.035em; color: var(--ink); }
.pdetail__sum { margin-block-start: 1rem; font-size: 1rem; line-height: 1.9; color: var(--ink-3); }
.pdetail__spec { margin-block-start: 2rem; border-top: 1px solid var(--line); }
.pdetail__spec > div { display: grid; gap: .35rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
@media (min-width: 620px) { .pdetail__spec > div { grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; } }
.pdetail__spec dt { font-size: .875rem; color: var(--ink-3); }
.pdetail__spec dd { font-size: .9375rem; line-height: 1.85; color: var(--ink-2); }

/* 하위 페이지 헤더는 첫 화면이 어둡지 않으므로 처음부터 흰 배경입니다 */
.hd.is-solid { background: rgba(255,255,255,.96); }

/* ── 제품 목록 페이지용 격자 ──────────────────────
   .prods 는 메인의 가로 캐러셀용이라 flex + overflow-x 로 되어 있습니다.
   products.html 은 전체 목록을 한 화면에 보여주는 페이지라 격자가 맞아,
   격자 전용 수식어를 둡니다. (캐러셀 규칙 뒤에 와야 하므로 파일 맨 끝) */
.prods--grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
    overflow: visible;
    scroll-snap-type: none;
}
.prods--grid > * { flex: none; scroll-snap-align: none; }
@media (min-width: 620px) { .prods--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .prods--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 문장 안에 두는 짧은 텍스트 링크 ──────────────
   "목록으로 돌아가기", "안내 보기" 처럼 버튼을 쓰기엔 무겁고
   밑줄 없는 링크로는 눌리는지 알 수 없는 자리에 씁니다. */
.tlink {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-block-start: 1.75rem;
    padding-block-end: .15rem;
    font-size: .9375rem; font-weight: 500;
    color: var(--leaf);
    border-block-end: 1px solid currentColor;
    transition: opacity .2s ease;
}
.tlink:hover { opacity: .72; }
.blk--dark .tlink, .band--dark .tlink { color: var(--leaf-on-dark); }

/* 어두운 블록(.blk--dark) 안의 제목·본문 색.
   .band--dark 에만 규칙이 있어 하위 페이지에서 검은 글자가 검은 배경에 묻히던 것을 막습니다. */
.blk--dark .stitle { color: var(--on-dark); }
.blk--dark .stitle b { color: var(--leaf-on-dark); }
.blk--dark .lede,
.blk--dark .plist__txt { color: var(--on-dark-2); }
.blk--dark .plist__ttl,
.blk--dark .hist__year { color: var(--on-dark); }
.blk--dark .plist > li,
.blk--dark .hist > li { border-color: var(--line-dark); }
.blk--dark .plist,
.blk--dark .hist { border-top-color: var(--line-dark); }