/* =========================================================
   SAMJIN C&I — Sub-page design system (loads AFTER styles.css)
   Components: subhero / breadcrumb / LNB / sections / cards /
   feature rows / timeline / accordion / tables / forms / board
   Uses tokens from styles.css (:root).
   ========================================================= */

/* ---------- Sub hero (dark stage echo of the main raking-light identity) ---------- */
.subhero {
  position: relative;
  background: var(--navy-950);
  color: #fff;
  padding-top: calc(var(--header-h) + clamp(56px, 9vw, 104px));
  padding-bottom: clamp(48px, 7vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
.subhero::before {                     /* raking beam from upper-left — brand thread */
  content: "";
  position: absolute; inset: -20% -10%;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(21,142,206,.28), transparent 55%),
    linear-gradient(115deg, rgba(124,196,232,.10) 0%, transparent 38%),
    radial-gradient(90% 120% at 88% 120%, rgba(12,98,147,.20), transparent 60%);
  z-index: -2;
}
.subhero::after {                      /* faint blueprint grid */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(124,196,232,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,196,232,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(110% 100% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(110% 100% at 50% 0%, #000 30%, transparent 78%);
  z-index: -1;
}
.subhero__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(.78rem, 1.1vw, .9rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-300);
  margin: 0 0 14px;
}
.subhero__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* 상한 3.4rem 은 1183px 에서 이미 소진돼 1440 이상은 활자가 동결됐다 — 초광폭에서
     제목이 뷰포트 대비 쪼그라들지 않게 상한만 올린다(하한·vw 항 그대로 = 회귀 없음). */
  font-size: clamp(2rem, 4.6vw, 4.2rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}
.subhero__title .grad {
  background: linear-gradient(92deg, #fff 10%, var(--brand-300) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subhero__lead {
  max-width: 640px;
  font-size: clamp(.98rem, 1.4vw, 1.13rem);
  line-height: 1.75;
  color: rgba(233, 242, 250, .82);
  margin: 0;
}

/* ---------- Breadcrumb ---------- */
.crumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: rgba(233,242,250,.55);
  margin-bottom: clamp(22px, 4vw, 40px);
}
.crumb a { color: rgba(233,242,250,.55); text-decoration: none; transition: color .15s ease; }
.crumb a:hover { color: #fff; }
.crumb > * + *::before { content: "/"; margin-right: 10px; color: rgba(233,242,250,.28); }
.crumb strong { color: var(--brand-300); font-weight: 600; }

/* ---------- LNB (sticky section nav) ---------- */
/* 순백 유리 + 가는 밑줄 조합이 "AI 티가 난다"는 지적(2026-08-11)으로 재작업.
   활성 표시를 밑줄 대신 **골드 칩**으로 — 제품 카테고리 칩(.pcard__cat/.pd-cat)과
   같은 어법이라 사이트 언어에 새 것을 들이지 않는다. 배경도 순백 대신 웜 크림.
   ⚠️ premium.css:107 이 .lnb 배경을 다시 칠하므로 그쪽도 같은 값으로 맞춰야 한다. */
.lnb {
  /* 헤더가 fixed(z100)라 top:0 이면 stuck 순간 헤더 뒤에 통째로 숨는다(실측).
     헤더는 스크롤 시 76→62px 로 줄고 사라지지 않으므로 그 아래에 붙인다.
     배경 알파 .92→.97: 어두운 밴드 위를 지날 때 활성 칩 대비 4.15:1 로 떨어지던 것 보강. */
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(250,246,239,.97);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
          backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(201,146,46,.16);
}
/* 스크롤 후(헤더 62px 축소) 정확히 그 아래에 붙는다 — main.js 가 html 에도 is-scrolled 를 단다. */
html.is-scrolled .lnb { top: 62px; }
.lnb__inner {
  display: flex; align-items: center; gap: clamp(6px, 1.2vw, 10px);
  padding-block: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lnb__inner::-webkit-scrollbar { display: none; }
.lnb a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 38px;
  padding: 7px clamp(13px, 1.6vw, 18px);
  border: 1px solid transparent; border-radius: 999px;
  font-size: .92rem; font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.lnb a:hover { color: var(--ink); background: rgba(201,146,46,.07); }
.lnb a.is-active {
  color: #8A5E12;
  background: rgba(201,146,46,.1);
  border-color: rgba(201,146,46,.3);
}

/* ---------- In-page anchor pills (3-depth) ---------- */
.pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0; list-style: none;
}
.pills a {
  display: inline-flex; align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .88rem; font-weight: 600;
  color: var(--gray-600); text-decoration: none;
  transition: all .18s var(--ease);
}
.pills a:hover { border-color: var(--brand-400); color: var(--brand-600); transform: translateY(-1px); }
.pills a.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

/* ---------- Sub sections ---------- */
.sub-section { padding-block: clamp(64px, 9vw, 110px); background: var(--bg); }
.sub-section--tint { background: var(--gray-50); }
.sub-section--dark { background: var(--navy-950); color: #fff; }
.sub-section--dark .section-title, .sub-section--dark .section-lead { color: inherit; }
.sub-section--dark .section-lead { color: rgba(233,242,250,.75); }
.sub-section--dark .eyebrow { color: var(--brand-300); }
.anchor-target { scroll-margin-top: calc(var(--header-h) + 70px); }

/* ---------- Lede (intro split) ---------- */
.lede-grid {
  display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.lede-grid > .lede-sticky { position: sticky; top: calc(var(--header-h) + 76px); }
.lede-body p { font-size: clamp(.98rem, 1.25vw, 1.08rem); line-height: 1.85; color: var(--gray-600); margin: 0 0 1.2em; }
.lede-body p strong { color: var(--ink); font-weight: 700; }
.lede-body .sign { margin-top: 34px; font-size: .95rem; color: var(--gray-500); }
.lede-body .sign strong { display: block; margin-top: 6px; font-size: 1.18rem; color: var(--ink); font-weight: 800; letter-spacing: .02em; }

/* ---------- Icon cards ---------- */
.icard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.icard-grid--4 { grid-template-columns: repeat(4, 1fr); }
.icard-grid--2 { grid-template-columns: repeat(2, 1fr); }
.icard {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.icard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10,20,36,.10); border-color: var(--brand-300); }
.icard__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(21,142,206,.12), rgba(21,142,206,.04));
  color: var(--brand-600);
  margin-bottom: 18px;
}
.icard__ico svg { width: 26px; height: 26px; }
.icard h3 { font-size: 1.08rem; font-weight: 800; margin: 0 0 10px; color: var(--ink); }
.icard p { font-size: .93rem; line-height: 1.7; color: var(--gray-600); margin: 0; }
.icard ul { margin: 12px 0 0; padding: 0; list-style: none; }
.icard ul li {
  position: relative; padding-left: 16px;
  font-size: .9rem; line-height: 1.65; color: var(--gray-600);
}
.icard ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-400); }
.sub-section--dark .icard { background: rgba(255,255,255,.045); border-color: rgba(124,196,232,.16); }
.sub-section--dark .icard h3 { color: #fff; }
.sub-section--dark .icard p, .sub-section--dark .icard ul li { color: rgba(233,242,250,.72); }
.sub-section--dark .icard:hover { box-shadow: 0 18px 40px rgba(0,0,0,.5); border-color: rgba(124,196,232,.4); }

/* ---------- Feature rows (text + media, alternating) ---------- */
.frow {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(28px, 5vw, 72px);
  /* stretch (not center): the media panel matches the text column's height, so a
     photo panel never sits shorter than its copy (owner request 2026-07-21). */
  align-items: stretch;
  padding-block: clamp(34px, 5vw, 56px);
}
.frow + .frow { border-top: 1px solid var(--line); }
.sub-section--dark .frow + .frow { border-top-color: rgba(124,196,232,.14); }
.frow--flip > .frow__media { order: 2; }
.frow__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: 14px;
}
.sub-section--dark .frow__kicker { color: var(--brand-300); }
.frow h2, .frow h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; line-height: 1.3; margin: 0 0 14px; letter-spacing: -0.01em; }
.frow p { font-size: .97rem; line-height: 1.8; color: var(--gray-600); margin: 0 0 14px; }
.sub-section--dark .frow p { color: rgba(233,242,250,.72); }
.frow__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  border: 1px solid rgba(124,196,232,.14);
  min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  /* 여백을 변수로 둔다 — 전체를 덮는 .frow-photo 만 아래에서 이 값을 상쇄한다. */
  --fm-pad: clamp(20px, 3vw, 40px);
  padding: var(--fm-pad);
}
.frow__media img { max-width: 78%; max-height: 300px; object-fit: contain; filter: drop-shadow(0 24px 34px rgba(0,0,0,.45)); }
.frow__media--light { background: linear-gradient(160deg, #fff, var(--gray-100)); border-color: var(--line); }
/* product cutouts on the light plate: the heavy dark-stage shadow reads dirty on white */
.frow__media--light img { filter: drop-shadow(0 18px 30px rgba(31,26,18,.22)); }
.frow__media svg { width: 100%; height: auto; max-height: 320px; }

/* ---------- Chips / spec tags ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips span {
  display: inline-flex; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--gray-50);
  font-size: .8rem; font-weight: 600; color: var(--gray-600);
}
.sub-section--dark .chips span { background: rgba(255,255,255,.06); border-color: rgba(124,196,232,.2); color: rgba(233,242,250,.8); }
.chips span.chip--blue { background: rgba(21,142,206,.1); border-color: rgba(21,142,206,.35); color: var(--brand-600); }
/* one-line chip row (owner request 2026-07-21): keep every chip on a single line on
   desktop — slightly smaller so four fit the half-width column; phones wrap again. */
.chips--row { flex-wrap: nowrap; gap: 6px; }
.chips--row span { font-size: .74rem; padding: 5px 10px; letter-spacing: -0.01em; }
/* 901~1150px(아이패드 가로 등)에선 frow 반폭 컬럼이 좁아 4칩이 넘친다 → 랩 허용 경계 1150 */
@media (max-width: 1150px) { .chips--row { flex-wrap: wrap; } }

/* 얕은 스트립 섹션(숫자 밴드만 등)용 컴팩트 여백 — 전 섹션 동일 여백의 메트로놈 리듬을 끊는다 */
.sub-section--compact { padding-block: clamp(40px, 6vw, 72px); }

/* ---------- 인사말 '사업 영역 바로가기' — icard 전체를 링크로 (2026-07-21 IA 재정리) ---------- */
a.icard { color: inherit; display: flex; flex-direction: column; align-items: flex-start; }
.icard__more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 14px;
  font-size: .88rem; font-weight: 700; color: #8A5E12;
}
a.icard--nav:hover .icard__more { text-decoration: underline; }

/* ---------- Emphasis (partnership blue per sitemap) ---------- */
.em-blue { color: var(--brand-600); font-weight: 700; }
.sub-section--dark .em-blue, .subhero .em-blue { color: var(--brand-300); }

/* ---------- Stat band ---------- */
.sband {
  /* minmax 하한이 180px 이면 1024px 컨테이너(콘텐츠 574px)에서 3트랙(601px)이 안 들어가
     2+1 고아 행이 됐다 — 150px 로 낮춰 3열을 지킨다. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: clamp(16px, 3vw, 32px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-card);
  background: linear-gradient(150deg, var(--navy-900), var(--navy-950));
  border: 1px solid rgba(124,196,232,.16);
  color: #fff;
}
/* Flex column so captions can pin to the cell bottom: grid stretches every cell
   in a row to the tallest, so when one value wraps to 2 lines (e.g. "Samsung QMS"
   vs the 1-line Korean values) the shorter cells kept their caption riding high
   and the row's baselines broke. margin-top:auto pushes every caption to the same
   bottom edge; rows where all values are one line are unaffected (no gap to fill). */
.sband__item { display: flex; flex-direction: column; }
.sband__item strong {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff 6%, var(--brand-300) 128%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 6px;
}
.sband__item span { margin-top: auto; font-size: .88rem; color: rgba(233,242,250,.66); }

/* ---------- Timeline (history) ---------- */
.tl { position: relative; margin: 0; padding: 0 0 0 clamp(24px, 4vw, 40px); list-style: none; }
.tl::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--brand-400), rgba(124,196,232,.12));
}
.tl > li { position: relative; padding: 0 0 clamp(30px, 4.5vw, 48px) clamp(18px, 3vw, 30px); }
.tl > li::before {
  content: ""; position: absolute; left: calc(-1 * clamp(24px, 4vw, 40px) + 1px); top: 7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--navy-950);
  border: 3px solid var(--brand-400);
  box-shadow: 0 0 0 4px rgba(21,142,206,.15);
}
.tl__year {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700; color: var(--brand-300);
  letter-spacing: .01em;
  margin: 0 0 10px;
}
.tl__item { margin: 0 0 8px; }
.tl__item strong { display: block; font-size: 1.02rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.tl__item span { font-size: .9rem; line-height: 1.65; color: rgba(233,242,250,.62); }
.tl__badge {
  display: inline-flex; margin-left: 8px; padding: 3px 10px; border-radius: 999px;
  background: rgba(21,142,206,.16); border: 1px solid rgba(21,142,206,.4);
  color: var(--brand-300); font-size: .72rem; font-weight: 700; vertical-align: 2px;
}

/* ---------- Accordion (FAQ) — <details> based, JS-free ---------- */
.acc { border-top: 2px solid var(--ink); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex; align-items: baseline; gap: 16px;
  padding: clamp(18px, 2.6vw, 26px) 8px;
  cursor: pointer; list-style: none;
  font-size: clamp(.98rem, 1.4vw, 1.08rem); font-weight: 700; color: var(--ink);
  transition: color .15s ease;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--brand-600); }
.acc summary .q {
  font-family: var(--font-display); font-weight: 700; color: var(--brand-500);
  flex: 0 0 auto; width: 1.6em;
}
.acc summary::after {
  content: "+"; margin-left: auto;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--gray-400);
  transition: transform .25s var(--ease);
}
.acc details[open] summary::after { transform: rotate(45deg); color: var(--brand-500); }
.acc .acc__a {
  padding: 4px 8px clamp(20px, 3vw, 28px) calc(1.6em + 16px + 8px);
  font-size: .95rem; line-height: 1.8; color: var(--gray-600);
}
.acc .acc__a a { color: var(--brand-600); }
/* smooth height animation (main.js WAAPI) needs the panel to clip while collapsing */
.acc .acc__a { overflow: hidden; }
/* 답변 본문에 줄길이 상한이 없어 1280 에서 한 줄이 1088px(영문 90자+)로 흘렀다.
   같은 시스템의 .subhero__lead(640px)·.section-lead(62ch)와 어법을 맞춘다. */
.acc .acc__a { max-inline-size: 74ch; }

/* ============================================================
   MOTIONSITES PASS (2026-07-15) — SVG schematic line-draw (rnd/quality)
   Strokes draw themselves in when the diagram scrolls into view.
   Uses the existing .reveal → .is-visible IntersectionObserver (no new JS).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .frow__media--stage svg path,
  .frow__media--stage svg line,
  .frow__media--stage svg polyline,
  .frow__media--stage svg circle {
    stroke-dasharray: 2000; stroke-dashoffset: 2000;
  }
  .frow__media--stage.is-visible svg path,
  .frow__media--stage.is-visible svg line,
  .frow__media--stage.is-visible svg polyline,
  .frow__media--stage.is-visible svg circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.5s cubic-bezier(.6,.05,.2,.95);
  }
}

/* (.dlt 다운로드 표 삭제 2026-08-13 — 자료실이 게시판 구조(.board/.bv-*)로 바뀌어 무참조) */

/* ============================================================
   TABLE TEXT ALIGNMENT (2026-07-15) — 상황에 맞는 정렬
   ============================================================ */
/* 게시판: 헤더를 셀 정렬과 일치(제목=좌측, 번호=가운데); 등록일은 기존 규칙이 가운데 */
.board thead th.th-title { text-align: left; }
.board thead th.b-no { text-align: center; }
.dl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-ctrl);
  border: 1px solid var(--line); background: #fff;
  font-size: .82rem; font-weight: 700; color: var(--ink); text-decoration: none;
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.dl-btn:hover { border-color: var(--brand-400); color: var(--brand-600); background: rgba(21,142,206,.05); }
.dl-btn svg { width: 14px; height: 14px; }

/* ---------- Forms (1:1 inquiry) ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 10px 40px rgba(10,20,36,.05);
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
/* 제보 폼의 '이름 + 연락처' 줄. 마크업(.form-row)만 있고 규칙이 저장소 어디에도 없어
   태블릿·데스크톱에서 두 칸이 세로로 쌓이며 입력창 하나가 1054px 까지 늘어났다(실측). */
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: .86rem; font-weight: 700; color: var(--ink); }
.form-field label .req { color: #C81E22; margin-left: 3px; }
.form-field input, .form-field select, .form-field textarea {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-200); border-radius: var(--r-ctrl);
  background: #fff;
  font: inherit; font-size: .94rem; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* appearance:none 이 네이티브 드롭다운 화살표를 지운다 → 화살표를 직접 그려 준다.
   이 규칙이 문의 페이지 인라인에만 있던 탓에 제보 폼(hotline)의 '신고 유형'은
   선택 상자인지 알 수 없는 맨 입력창으로 보였다(실측). 공용 규칙으로 올린다. */
.form-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 40px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(21,142,206,.15);
}
.form-field textarea { min-height: 170px; resize: vertical; }
.form-agree {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: var(--r-ctrl);
  background: var(--gray-50); border: 1px solid var(--line);
  font-size: .86rem; color: var(--gray-600);
}
.form-agree input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--brand-500); }
.form-actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }

/* ---------- Board (notice list) ---------- */
.board { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); font-size: .93rem; }
.board th, .board td { padding: 15px 12px; border-bottom: 1px solid var(--line); }
.board thead th { font-size: .82rem; font-weight: 700; color: var(--gray-500); background: var(--gray-50); }
.board td.b-no { width: 64px; text-align: center; color: var(--gray-400); font-family: var(--font-display); }
.board td.b-title { text-align: left; }
.board td.b-title a { color: var(--ink); font-weight: 600; text-decoration: none; }
.board td.b-title a:hover { color: var(--brand-600); text-decoration: underline; }
.board td.b-date, .board th.b-date { width: 110px; text-align: center; color: var(--gray-500); font-size: .86rem; }
.b-badge {
  display: inline-flex; padding: 2px 9px; margin-right: 8px; border-radius: 999px;
  background: rgba(21,142,206,.08); color: var(--brand-700);
  font-size: .72rem; font-weight: 700; vertical-align: 1px;
}
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 30px; }
.pager a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 6px;
  border-radius: var(--r-ctrl); border: 1px solid transparent;
  font-size: .88rem; font-weight: 600; color: var(--gray-500); text-decoration: none;
}
.pager a:hover { border-color: var(--line); color: var(--ink); }
.pager a.is-active { background: var(--navy-900); color: #fff; }

/* ---------- Location ---------- */
.map-frame {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line); background: var(--gray-100);
  aspect-ratio: 16 / 7; min-height: 300px;
  /* Required: once min-height wins on a narrow screen, aspect-ratio back-solves
     the WIDTH from that height (300px -> 686px) and pushes the whole page into
     horizontal scroll at 360-390px. The cap keeps the box inside the column and
     lets it fall back to 300px-tall; the SVG uses preserveAspectRatio="slice",
     so it crops instead of distorting. */
  max-width: 100%;
}
.map-frame iframe, .map-frame > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.addr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: clamp(20px, 3vw, 32px); }
.addr-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-med); padding: 22px 24px; }
.addr-card h3 { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 800; margin: 0 0 10px; color: var(--ink); }
.addr-card h3 svg { width: 18px; height: 18px; color: var(--brand-500); }
.addr-card p { font-size: .9rem; line-height: 1.7; color: var(--gray-600); margin: 0; }

/* ---------- Partner logo wall ---------- */
.plogo-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 20px); }
.plogo {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-med);
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--gray-500);
  letter-spacing: .02em; text-align: center;
  transition: all .2s var(--ease);
}
.plogo:hover { border-color: var(--brand-300); color: var(--brand-600); transform: translateY(-2px); }
.plogo img { max-height: 34px; max-width: 70%; object-fit: contain; }
/* 로고월 실로고 교체(2026-07-21 "각 회사 로고로 갈음") — 로고는 풀컬러 원칙 */
.plogo .plogo-thingsone { filter: brightness(.5) saturate(.7); }  /* 다크배경용 크림 워드마크 → 라이트 타일 가독 확보 */
.plogo .ft-naver { display: inline-flex; align-items: center; gap: 7px; }
.plogo .ft-naver b { font-family: var(--font-en); font-weight: 800; font-size: 1.12rem; letter-spacing: .04em; color: #03C75A; line-height: 1; }
.plogo .ft-naver img { border-radius: 4px; }

/* ---------- Bottom CTA band ---------- */
.cta-band { background: var(--navy-950); color: #fff; padding-block: clamp(56px, 8vw, 90px); position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 50% 130%, rgba(21,142,206,.25), transparent 65%);
}
.cta-band .container { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
.cta-band p { margin: 0; color: rgba(233,242,250,.7); font-size: .95rem; }

/* ---------- Contact quick cards (A/S) ---------- */
/* 3열 고정이면 카드가 2개일 때(A/S·윤리신고) 오른쪽 한 칸이 비어 레이아웃이 어긋난다
   (2026-07-28 사장님 지적). 카드 수에 맞춰 균등 분배되도록 auto-fit 으로 바꾼다.
   min(100%, 260px) 은 좁은 화면에서 트랙이 컨테이너를 넘지 않게 하는 가드다. */
.qc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 2vw, 24px); }
.qc {
  text-align: center; padding: clamp(26px, 3.4vw, 40px) 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
}
.qc__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(21,142,206,.14), rgba(21,142,206,.04));
  color: var(--brand-600); margin-bottom: 16px;
}
.qc__ico svg { width: 26px; height: 26px; }
.qc h3 { font-size: .95rem; font-weight: 700; color: var(--gray-500); margin: 0 0 8px; }
.qc strong { display: block; font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 700; color: var(--ink); letter-spacing: .01em; }
/* 아이콘 플레이트도 <span class="qc__ico"> 라 이 규칙(특정도 0,1,1)이 .qc__ico(0,1,0)의
   display:inline-flex 를 이겨 아이콘이 원 중앙에 오지 않았다(2026-07-28 실측: SVG 가 16px 위로).
   설명 텍스트용 규칙이므로 아이콘 span 은 제외한다. */
.qc span:not(.qc__ico) { display: block; margin-top: 8px; font-size: .84rem; color: var(--gray-500); }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 20px); counter-reset: step; }
/* 3-step variant (aiot.php "How it works", inquiry.php "Process"). Shared here
   rather than repeated in each page's <style>. Its responsive steps live in the
   media blocks below, next to .steps', so the two can't drift apart. */
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.step {
  position: relative; padding: 24px 22px 26px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-med);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display); font-size: .9rem; font-weight: 700;
  color: var(--brand-500); margin-bottom: 12px; letter-spacing: .08em;
}
.step h3 { font-size: .98rem; font-weight: 800; margin: 0 0 8px; color: var(--ink); }
.step p { font-size: .87rem; line-height: 1.65; color: var(--gray-600); margin: 0; }
.step:not(:last-child)::after {
  content: "→"; position: absolute; top: 50%; right: -17px; transform: translateY(-50%);
  color: var(--gray-300); font-size: 1rem; z-index: 1;
}

/* ---------- Responsive ---------- */
/* ★ 분기점을 1024 → 900 으로 내린 이유(2026-08-12 태블릿 실측): (max-width:1024px) 는
   '이하 포함'이라 정확히 1024px(아이패드 프로 12.9" 세로, 1024×768 가로)에서 태블릿 중
   가장 적은 열수·가장 큰 카드가 됐다. 인사말 아이콘카드 3장이 2열이 되어 오른쪽 아래에
   454×213 빈 칸이 생기고, 제품 카드·단계 카드는 454px 로 늘어나 안쪽 여백이 45% 남았다.
   1112px 에서 4열로 또렷하던 것이 1024 에서만 성겨지는 역전이었다. */
@media (max-width: 900px) {
  .icard-grid, .icard-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:not(:last-child)::after { display: none; }
  /* .steps--3 holds its 3 columns down to 901 (only 3 cards, they still fit), so
     it must restate both the columns — the .steps rule above would otherwise win
     on source order — and the connector, which is meaningful while the row is
     intact. Without this the flow rendered as three unlinked cards. */
  .steps--3 { grid-template-columns: repeat(3, 1fr); }
  .steps--3 .step:not(:last-child)::after { display: block; }
  /* .addr-grid used to jump straight from 3 columns to 1 at 768, so between 769
     and 1024 its cards held a 179px text column — ~12 Korean characters a line,
     5 lines deep. It now steps 3 -> 2 -> 1 like its siblings above. */
  .addr-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 지표 4개짜리 밴드(인사말·파트너십·품질)는 태블릿에서 3열이 되어 네 번째 지표만
   둘째 줄에 홀로 남았다 — 2×2 로 못박는다. :has 미지원 브라우저는 기존 auto-fit 유지. */
@media (min-width: 561px) and (max-width: 900px) {
  .sband:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 로고월 8칸: 3열이면 3+3+2 로 오른쪽 아래 한 칸이 구멍처럼 빈다(흰 타일+테두리라
   눈에 띈다). 1025~1180 은 4열(4+4)로 두고, 900 이하에서 2열(2×4)로 내린다. */
@media (max-width: 900px) {
  .plogo-wall { grid-template-columns: repeat(2, 1fr); }
  /* .steps--3 가 3열에서 곧장 1열로 떨어져, 768/834 에서 카드 3장이 712~751px 전폭
     막대가 되고(문구는 30자 한 줄) 오른쪽 60%가 비었다. 4단계짜리 .steps 는 같은 폭에서
     2열인데 단계가 적은 쪽이 더 잘게 쌓이는 역전이었다 — 2열 단계를 넣는다. */
  .steps--3 { grid-template-columns: repeat(2, 1fr); }
  .steps--3 .step:not(:last-child)::after { display: none; }
}
/* ★ 768 → 700: (max-width:768px) 가 '이하 포함'이라 아이패드 미니·구형 아이패드 세로
   (정확히 768px)가 폰 레이아웃을 그대로 받았다. 문의 폼 입력창이 한 칸에 649px,
   오시는길 주소 카드가 712px 짜리 한 줄이 되는 식으로 834px 화면과 완전히 달라졌다. */
@media (max-width: 700px) {
  .lede-grid { grid-template-columns: 1fr; }
  .lede-grid > .lede-sticky { position: static; }
  .frow { grid-template-columns: 1fr; gap: 24px; }
  .frow--flip > .frow__media { order: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .addr-grid { grid-template-columns: 1fr; }
  .qc-grid { grid-template-columns: 1fr; }
  .board .b-no { display: none; }
  .board td.b-no { display: none; }
}
@media (max-width: 560px) {
  .icard-grid, .icard-grid--4, .icard-grid--2 { grid-template-columns: 1fr; }
  .plogo-wall { grid-template-columns: repeat(2, 1fr); }
  .steps, .steps--3 { grid-template-columns: 1fr; }
  .subhero { padding-top: calc(var(--header-h) + 44px); }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .icard, .plogo, .pills a, .dl-btn { transition: none; }
}

/* ---------- v2: subhero concept photo layer (dark-overlaid for white-text contrast) ---------- */
.subhero__photo { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.subhero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .55; }
.subhero__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,8,14,.94) 0%, rgba(5,8,14,.78) 42%, rgba(5,8,14,.42) 100%),
    linear-gradient(0deg, rgba(5,8,14,.9) 0%, rgba(5,8,14,.15) 55%, transparent 100%);
}
@media (max-width: 768px) {
  .subhero__photo img { opacity: .4; }
  .subhero__photo::after { background: linear-gradient(0deg, rgba(5,8,14,.95), rgba(5,8,14,.55) 60%, rgba(5,8,14,.35)); }
}

/* ---------- v3: section background photos (cta-band + frow media) ---------- */
.cta-band {
  background-image:
    linear-gradient(90deg, rgba(5,8,14,.9) 0%, rgba(5,8,14,.74) 50%, rgba(5,8,14,.55) 100%),
    linear-gradient(0deg, rgba(5,8,14,.82), rgba(5,8,14,.35) 70%),
    url("../img/sections/cta-contact.webp");
  background-size: cover; background-position: center;
}
.cta-band::before { z-index: 0; }
.cta-band .container { position: relative; z-index: 1; }
.frow__media > img.frow-photo {
  /* absolute 의 inset 은 padding box 기준이라, 패널 여백만큼 음수로 빼야 전체를 덮는다. */
  position: absolute; top: calc(-1 * var(--fm-pad)); left: calc(-1 * var(--fm-pad));
  width: calc(100% + 2 * var(--fm-pad)); height: calc(100% + 2 * var(--fm-pad));
  /* max-* MUST be reset: the generic .frow__media img rule caps images at 78% × 300px,
     which left the panel's dark background showing as a black band beside the photo
     (reported 2026-07-21). A full-bleed photo owns the whole panel. */
  max-width: none; max-height: none;
  object-fit: cover; display: block;
}
.frow__media > svg { padding: clamp(20px, 3vw, 40px); }

/* Diagram-on-photo stage: a real dark tech photo backs the technical SVG,
   filling the void while the diagram stays the legible foreground. */
.frow__media--stage { background: var(--navy-950); }
.frow__media--stage > img.frow-photo { z-index: 0; opacity: .82; }
.frow__media--stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(135% 125% at 50% 42%, rgba(5,8,14,.12), rgba(5,8,14,.78) 100%),
    linear-gradient(180deg, rgba(5,8,14,.30), rgba(5,8,14,.46));
}
.frow__media--stage > svg { position: relative; z-index: 2; }

/* title/body wrapping now lives in the shared typography system (styles.css) — no per-file duplicates */

/* ============================================================
   BOARD POST VIEW (support/board.php?id=) — component styles,
   replaces the inline style= attributes that bypassed the system.
   ============================================================ */
.board-view { margin-top: clamp(24px, 3.5vw, 40px); border-top: 2px solid var(--ink); }
.bv-head { padding: clamp(22px, 3vw, 32px) 0 clamp(18px, 2.4vw, 24px); border-bottom: 1px solid var(--line); }
.bv-head .b-badge { margin-bottom: 12px; display: inline-flex; }
.bv-title { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 800; line-height: 1.35; color: var(--ink); letter-spacing: -.02em; }
.bv-date { margin-top: 10px; font-family: var(--font-display); font-size: .9rem; color: var(--gray-500); }
.bv-body { padding: clamp(24px, 3.4vw, 38px) 2px; font-size: 1rem; line-height: 1.9; color: var(--gray-700); white-space: pre-line; }
.bv-empty { color: var(--gray-400); font-style: italic; }
/* prev/next post navigation */
.bv-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(20px, 3vw, 30px); }
.bv-nav__item { display: flex; flex-direction: column; gap: 5px; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-med); background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s; min-width: 0; }
.bv-nav__item:not(.is-off):hover { border-color: var(--brand-400); box-shadow: 0 10px 26px -16px rgba(27,23,18,.28); transform: translateY(-2px); }
.bv-nav__item--next { text-align: right; align-items: flex-end; }
.bv-nav__lab { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-400); }
.bv-nav__item b { font-weight: 600; font-size: .95rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bv-nav__item.is-off { background: var(--gray-50); }
.bv-nav__item.is-off b { color: var(--gray-400); font-weight: 500; }
@media (max-width: 560px) { .bv-nav { grid-template-columns: 1fr; } .bv-nav__item--next { text-align: left; align-items: flex-start; } }
.bv-foot { padding-top: clamp(18px, 2.4vw, 24px); margin-top: clamp(20px, 3vw, 30px); border-top: 1px solid var(--line); }
.bv-back { font-weight: 700; color: var(--brand-600); }

/* (INQUIRY LOOKUP RESULT .lk-* 컴포넌트 삭제 2026-07-18 — 공개 문의조회 제거로 무참조) */

/* accent word color on light body titles (grad was tuned white->blue for dark hero only) */
.section-title .grad, .section-title .accent {
  background: none; -webkit-text-fill-color: currentColor; color: var(--brand-600);
}
.sub-section--dark .section-title .grad, .sub-section--dark .section-title .accent { color: var(--brand-300); }

/* same-tone section divider: hairline only when two light sections of the SAME tone are adjacent (keeps rhythm without tonal jump) */
.sub-section--tint + .sub-section--tint,
.sub-section:not(.sub-section--tint):not(.sub-section--dark) + .sub-section:not(.sub-section--tint):not(.sub-section--dark) {
  border-top: 1px solid var(--line);
}

/* ===================== 게시판 강화: 검색·조회·첨부·리치본문 (2026-07-18) ===================== */
/* 검색창 */
.bd-search { display: flex; align-items: center; gap: 8px; margin: clamp(20px, 3vw, 30px) 0 4px; position: relative; }
.bd-search__ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-400); display: inline-flex; pointer-events: none; }
.bd-search__inp { flex: 1; min-width: 0; height: 46px; padding: 0 14px 0 42px; border: 1px solid var(--line); border-radius: var(--r-med); background: #fff; font: inherit; font-size: .95rem; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.bd-search__inp:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(201,146,46,.14); }
.bd-search__inp::placeholder { color: var(--gray-400); }
.bd-search__btn { height: 46px; padding: 0 20px; border: 0; border-radius: var(--r-med); background: var(--navy-900); color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; transition: filter .15s; white-space: nowrap; }
.bd-search__btn:hover { filter: brightness(1.12); }
.bd-search__clear { align-self: center; font-size: .86rem; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.bd-search__clear:hover { color: var(--ink); text-decoration: underline; }
.bd-result { margin: 14px 0 0; font-size: .92rem; color: var(--gray-600); }
.bd-result b { color: var(--ink); font-weight: 700; }
.bd-empty { padding: clamp(38px, 6vw, 60px) 0; text-align: center; }

/* 목록 조회수·첨부 클립 */
.board th.b-views, .board td.b-views { width: 76px; text-align: center; color: var(--gray-500); font-size: .86rem; font-family: var(--font-display); }
.b-clip { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--gray-400); }
.board td.b-title a:hover + .b-clip { color: var(--brand-600); }

/* 상세: 메타(등록일·조회수) */
/* 자료실 상세는 등록일·조회수에 제품·버전 태그까지 붙어 좁은 폭에서 한 줄을 넘긴다 — 접히게 둔다. */
.bv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.bv-meta .bv-date { margin-top: 0; }
.bv-views { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: .88rem; color: var(--gray-500); }
.bv-views svg { color: var(--gray-400); }

/* 상세: 리치 본문 — pre-line 해제하고 실제 블록 렌더 */
.bv-body--rich { white-space: normal; }
.bv-body--rich p { margin: 0 0 1.05em; }
.bv-body--rich p:last-child { margin-bottom: 0; }
.bv-body--rich h3 { font-size: 1.24rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; margin: 1.5em 0 .55em; line-height: 1.4; }
.bv-body--rich h4 { font-size: 1.08rem; font-weight: 800; color: var(--ink); margin: 1.35em 0 .5em; }
.bv-body--rich h5 { font-size: .98rem; font-weight: 700; color: var(--ink); margin: 1.2em 0 .45em; }
/* ★ list-style 을 반드시 되살린다 — styles.css 의 전역 리셋(`ul, ol { list-style: none }`)이
   여기까지 내려와 불릿·번호가 통째로 사라진다. padding-left 와 ::marker 색까지 잡아 놓고도
   마커 자체가 없어서 "- 항목" 세 줄이 그냥 들여쓴 문장 세 줄로 보였다(2026-08-13 발견).
   기존 게시판·FAQ 글에 목록 문법을 쓴 것이 하나도 없어 지금까지 드러나지 않았을 뿐이다. */
.bv-body--rich ul, .bv-body--rich ol { margin: 0 0 1.05em; padding-left: 1.45em; }
.bv-body--rich ul { list-style: disc; }
.bv-body--rich ol { list-style: decimal; }
.bv-body--rich li { margin: .3em 0; padding-left: .15em; }
.bv-body--rich ul li::marker { color: var(--brand-500); }
.bv-body--rich ol li::marker { color: var(--gray-400); font-family: var(--font-display); }
.bv-body--rich a { color: var(--brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.bv-body--rich a:hover { color: var(--brand-700, var(--brand-600)); }
.bv-body--rich strong { color: var(--ink); font-weight: 800; }
.bv-body--rich em { font-style: italic; }
.bv-body--rich code { font-family: var(--font-mono, ui-monospace, monospace); font-size: .88em; background: var(--gray-50); border: 1px solid var(--line); border-radius: 5px; padding: .08em .38em; color: var(--ink); }

/* KO/EN 본문 토글 — main.js 가 <html data-lang> 를 갱신, 순수 CSS 로 전환(서식 보존) */
.bv-body--rich[data-lang-body="en"] { display: none; }
html[data-lang="en"] .bv-body--rich[data-lang-body="ko"] { display: none; }
html[data-lang="en"] .bv-body--rich[data-lang-body="en"] { display: block; }

/* 상세: 첨부파일 카드 */
.bv-attach { margin-top: clamp(18px, 2.6vw, 26px); padding-top: clamp(16px, 2.2vw, 22px); border-top: 1px dashed var(--line); }
.bv-attach__lab { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 9px; }
.bv-attach__file { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--r-med); background: #fff; color: var(--ink); font-weight: 600; font-size: .93rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bv-attach__file:hover { border-color: var(--brand-400); box-shadow: 0 10px 26px -16px rgba(27,23,18,.28); transform: translateY(-1px); }
.bv-attach__ico { display: inline-flex; color: var(--brand-600); flex: none; }
.bv-attach__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-attach__size { color: var(--gray-400); font-size: .82rem; font-family: var(--font-display); flex: none; }

.pager__nav { font-family: var(--font-display); }

@media (max-width: 560px) {
  .bd-search { flex-wrap: wrap; }
  .bd-search__btn { flex: 1; }
  .board th.b-views, .board td.b-views { display: none; }
}

/* ===== Baby & Pet Monitoring 기능 아이콘 행 + 사진 (2026-08-13) ==============
   씽즈원 Baby & Pet Monitoring 페이지와 "완전 똑같이" 만들라는 지시로 그쪽 v2.css 규칙을
   그대로 옮겨 왔다. 값(간격·크기·라운드)은 씽즈원 원본과 동일하고, 색만 이 사이트 토큰
   (--ink / --gray-*)으로 바꿨다 — 두 사이트가 색 변수 이름이 다르다.
   아이콘을 이미지로 굽지 않고 인라인 SVG 로 두는 이유도 씽즈원과 같다:
   확대해도 안 깨지고, 영문 전환 시 라벨이 번역되고, 스크린리더가 읽는다. */
.feat-icons {
  display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(18px, 3.4vw, 54px);
  margin: clamp(18px, 2.6vw, 34px) auto clamp(4px, 1vw, 10px);
  padding: 0; list-style: none; max-width: 1080px;
}
.feat-icons li { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 64px; }
.feat-ico {
  display: grid; place-items: center; width: clamp(52px, 5.4vw, 64px); aspect-ratio: 1;
  border-radius: 14px; background: var(--gray-100); color: var(--gray-600);
}
.feat-ico svg { width: 58%; height: 58%; }
.feat-ico-lab { font-size: clamp(12px, 1.05vw, 13.5px); font-weight: 600; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
@media (max-width: 520px) {
  /* 4개가 한 줄에 다 들어가야 한다 — 두 줄로 접히면 시안의 리듬이 깨진다(씽즈원 주석 그대로) */
  .feat-icons { gap: 12px; justify-content: space-between; }
  .feat-icons li { flex: 1 1 0; min-width: 0; gap: 8px; }
  .feat-ico { width: clamp(46px, 13vw, 56px); border-radius: 12px; }
  .feat-ico-lab { font-size: 11.5px; white-space: normal; text-align: center; word-break: keep-all; }
}
.feature-photo {
  margin: clamp(20px, 2.8vw, 38px) auto 0; max-width: 1080px;
  border-radius: var(--r-card); overflow: hidden; line-height: 0;
  box-shadow: 0 34px 66px -38px rgba(64,52,36,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.feature-photo img { width: 100%; height: auto; display: block; }
.feature-photo figcaption {
  margin: 12px auto 0; max-width: 1080px; font-size: 13px; line-height: 1.6;
  color: var(--gray-500); text-align: center;
}

/* ===== PC 한 줄 강제 (2026-08-13 사장님 지시) ==============================
   "피시에선 한줄로" 요청을 받은 문장에만 붙인다.
   .section-head(760px) · .subhero__lead(640px) · figcaption span(64ch) 의 폭 상한은
   읽기 좋은 줄길이를 위해 일부러 건 값이라 전역으로 풀지 않는다 — 해당 자리에만 푼다.
   ★ 1200px 미만에는 절대 걸지 말 것. 좁은 화면에서 상한을 풀면 글자가 화면을 넘는데
     body{overflow-x:clip} 때문에 가로 스크롤조차 안 돼 잘린 부분을 볼 방법이 없다.
   ★ white-space:nowrap 은 쓰지 않는다(2026-08-13 스윕이 잡음). 영문 문구가 한글보다 길어
     폭을 넘으면 nowrap 은 줄바꿈 대신 **잘라 버린다** — 실제로 영문 파트너십 제목이
     1440~2560px 에서 잘렸다. 폭 상한만 풀고 줄바꿈은 브라우저에 맡긴다.
     폭이 충분하면 자연히 한 줄이고, 모자라면(영문 등) 잘리지 않고 두 줄로 접힌다.
   ★ text-wrap 도 함께 풀어야 한다. styles.css 가 제목엔 balance, 본문엔 pretty 를 거는데
     둘 다 "한 줄에 들어가도 일부러 균형 있게 쪼개는" 규칙이라 폭만 넓혀서는 계속 두 줄로
     나온다. 여기서는 한 줄이 목적이므로 기본 wrap 으로 되돌린다. */
@media (min-width: 1200px) {
  .sh--wide   { max-width: min(1300px, 100%); }
  .pc-1line   { max-width: none; text-wrap: wrap; }
}

/* 게시판 '자료' 유형 배지 (2026-07-18) — 공지(파랑)와 구분되는 중립 톤 */
.b-badge--data { background: var(--gray-100); color: var(--gray-600); }

/* ===== 자료실 게시판형 전환 (2026-08-13) =====================================
   자료실이 파일 다운로드 표 → 게시판 구조(목록/상세)로 바뀌면서 필요해진 조각들.
   목록·상세 뼈대는 게시판(.board / .board-view / .bv-*)을 그대로 쓴다. */

/* '펌웨어' 배지 — 매뉴얼(파랑 기본)과 구분되는 골드 톤.
   글자가 .72rem 로 작아 제목용 #C9922E 대신 대비를 확보한 #8A5E12 를 쓴다. */
.b-badge--fw { background: rgba(201,146,46,.10); color: #8A5E12; }

/* 아직 내용이 없는 자료 — 링크 없이 제목만 흐리게 + '준비 중' 꼬리표 */
.board tr.is-soon td { color: var(--gray-400); }
.b-soon-title { color: var(--gray-400); font-weight: 600; }
.b-soon {
  display: inline-flex; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--gray-100); color: var(--gray-500);
  font-size: .72rem; font-weight: 700; vertical-align: 1px; white-space: nowrap;
}

/* 상세 메타의 제품·버전·형식 태그.
   제품명은 관리자에서 최대 60자까지 들어온다 — 좁은 화면에서 태그가 뷰포트를 넘지 않도록
   max-width 로 가두고 넘치는 부분은 …으로 줄인다(잘려서 안 보이는 것보다 낫다). */
.bv-tag {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: .78rem; font-weight: 600; color: var(--gray-600);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* 본문 삽입 이미지 — cni_richtext 의 ![대체텍스트](assets/uploads/…).
   폭을 100% 로 늘리지 않는다: 아이콘처럼 작은 그림까지 확대돼 뭉개진다.
   max-width 만 걸어 큰 사진은 줄이고 작은 그림은 원본 크기로 둔다. */
.bv-body--rich .rt-fig { margin: 1.6em 0; text-align: center; }
.bv-body--rich .rt-img {
  max-width: 100%; height: auto; border-radius: var(--r-med);
  border: 1px solid var(--line); background: var(--gray-50);
}
.bv-body--rich .rt-fig figcaption {
  margin-top: 10px; font-size: .86rem; line-height: 1.6; color: var(--gray-500);
}
/* 문단 안에 끼워 넣은 이미지는 글줄 높이를 깨지 않게 작게 */
.bv-body--rich p .rt-img { vertical-align: middle; border-radius: 6px; }

/* FAQ 답변 리치텍스트(마크다운-라이트) + KO/EN 토글 (2026-07-18, 관리자화) */
.acc__a-lang p { margin: 0 0 .8em; } .acc__a-lang p:last-child { margin-bottom: 0; }
/* FAQ 답변도 같은 리치텍스트 엔진을 쓴다 — 전역 리셋 때문에 마커가 사라지는 문제가 동일하다. */
.acc__a-lang ul, .acc__a-lang ol { margin: .3em 0 .8em; padding-left: 1.35em; }
.acc__a-lang ul { list-style: disc; }
.acc__a-lang ol { list-style: decimal; }
.acc__a-lang li { margin: .25em 0; }
.acc__a-lang a { color: var(--brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.acc__a-lang strong { color: var(--ink); font-weight: 700; }
.acc__a-lang code { font-size: .88em; background: var(--gray-50); border: 1px solid var(--line); border-radius: 5px; padding: .06em .34em; }
.acc__a-en { display: none; }
html[data-lang="en"] .acc__a-lang[data-lang-body="ko"] { display: none; }
html[data-lang="en"] .acc__a-en { display: block; }

/* FAQ/게시판 빈 상태 안내 (2026-07-18 감사수정 — .acc-empty 미정의였음) */
.acc-empty { padding: clamp(28px, 5vw, 48px) 0; text-align: center; color: var(--gray-500); font-size: .95rem; }