/* 일벗 제품 카탈로그 — home.css 위에 얹는 카탈로그 전용 요소. 인쇄(PDF) 규칙은 맨 아래. */
.catalog {
  --live:#1f6b47;
  --live-soft:#e1ede4;
  --custom:#8a5a14;
  --custom-soft:#f3e8d4;
  --next:#b74720;
  --next-soft:#f6e1d6;
  --dark:#2b3329}

/* 상태 배지 */
.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  font:500 11px/1.5 var(--mono);
  letter-spacing:.02em;
  border-radius:3px;
  white-space:nowrap}
.badge::before {
  content:'';
  width:6px;
  height:6px;
  border-radius:100%;
  background:currentColor}
.badge-live {background:var(--live-soft);color:var(--live)}
.badge-custom {background:var(--custom-soft);color:var(--custom)}
.badge-next {background:var(--next-soft);color:var(--next)}

.legend {
  display:grid;
  grid-template-columns:auto auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:10px 14px;
  padding:18px 0;
  margin-top:28px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:13px;
  color:var(--muted)}
.legend .mono {color:var(--ink);margin-right:10px}

/* 화면 캡처 틀 — 캡처 전에는 자리표시, 캡처 후 img 로 채운다 */
.shot {
  margin:0;
  background:#e7e8df;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 18px 40px -28px rgba(36,39,31,.45)}
.shot::before {
  content:'';
  display:block;
  height:22px;
  background:#dcded4 radial-gradient(circle at 12px 11px,#b8bbb0 3px,transparent 3.5px) no-repeat,
    radial-gradient(circle at 24px 11px,#b8bbb0 3px,transparent 3.5px) no-repeat,
    radial-gradient(circle at 36px 11px,#b8bbb0 3px,transparent 3.5px) no-repeat;
  background-color:#dcded4}
.shot img {width:100%;height:auto}
.shot-frame {
  display:grid;
  place-items:center;
  aspect-ratio:16 / 10;
  background:repeating-linear-gradient(135deg,#eceee6 0 12px,#e6e8df 12px 24px)}
.shot-label {font:400 11px/1.5 var(--mono);color:var(--muted);letter-spacing:.06em}
.shot-hero {margin-top:10px}
.shot-hero .shot-frame {aspect-ratio:16 / 8}
.shot-wide {margin-top:40px}
.shot-wide .shot-frame {aspect-ratio:16 / 7}

/* 01 AI Work OS 3층 */
.os-stack {display:grid;gap:10px;margin-top:50px}
.os-layer {
  display:grid;
  grid-template-columns:300px 1fr;
  gap:40px;
  padding:32px 36px;
  border-radius:5px}
.os-ax {background:var(--dark);color:#fff}
.os-link {background:#eceee6}
.os-dx {background:#e3e5da}
.os-head .mono {color:var(--orange)}
.os-ax .os-head .mono {color:#eab989}
.os-head h3 {font-size:24px;font-weight:600;margin:8px 0 6px}
.os-head p {font-size:14px;color:var(--muted)}
.os-ax .os-head p {color:#c3c8ba}
.os-items {display:grid;gap:0}
.os-items li {
  display:grid;
  grid-template-columns:170px 1fr auto;
  gap:16px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #56604f;
  font-size:14px}
.os-items li:last-child {border-bottom:0}
.os-items b {font-weight:600;font-size:15px}
.os-items span:not(.badge) {color:#c3c8ba}
.os-chips {display:flex;flex-wrap:wrap;gap:8px;align-content:center}
.os-chips li {
  padding:8px 14px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  font-size:14px;
  font-weight:550}

/* 02 지금 되는 AI */
.cat-ax {background:#eceee6}
.flow {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:50px;
  border-top:1px solid var(--ink)}
.flow li {padding:22px 22px 22px 0;position:relative}
.flow li+li {padding-left:22px;border-left:1px solid #cacdc3}
.flow li:not(:last-child)::after {
  content:'→';
  position:absolute;
  right:-9px;
  top:18px;
  background:#eceee6;
  color:var(--orange);
  font-size:16px;
  padding:0 2px}
.flow .mono {color:var(--orange);font-size:11px}
.flow b {display:block;font-size:19px;font-weight:600;margin:6px 0 6px}
.flow p {font-size:13px;color:var(--muted);line-height:1.6}
.ax-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.ax-card {padding:34px 36px;background:var(--paper);border-radius:5px;display:flex;flex-direction:column}
.ax-top {display:flex;justify-content:space-between;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #cacdc3}
.ax-top h3 {font-size:24px;font-weight:600}
.ax-card>p {font-size:15px;color:var(--muted)}
.checks {margin:20px 0 26px;display:grid;gap:8px;font-size:14px}
.checks li::before {content:'↳';color:var(--orange);margin-right:10px}
.ax-card .shot {margin-top:auto}

/* 03 다음 AI */
.next-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.next-grid article {padding-top:22px;border-top:1px solid var(--ink)}
.next-grid h3 {font-size:21px;font-weight:600}
.next-grid .ax-top {border-bottom:0;margin-bottom:6px;padding-bottom:0}
.next-grid p {font-size:14px;color:var(--muted);margin-top:10px}
.next-grid .note {
  font:400 11px/1.6 var(--mono);
  letter-spacing:.02em;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line)}

/* 04 업무 기반 */
.cat-dx .section-lead .badge {vertical-align:1px}
.dx-grid {display:grid;grid-template-columns:1fr 1fr;gap:56px 40px;margin-top:50px}
.dx-card {display:flex;flex-direction:column;padding-top:22px;border-top:1px solid var(--ink)}
.dx-card>.mono {color:var(--orange);font-size:11px}
.dx-card h3 {font-size:24px;font-weight:600;margin:6px 0 10px}
.dx-card>p {font-size:15px;color:var(--muted)}
.tags {display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 22px}
.tags li {font:400 11px/1.5 var(--mono);padding:4px 9px;border:1px solid var(--line);border-radius:3px;color:var(--muted)}
.dx-card .shot {margin-top:auto}

/* 05 보안·운영 */
.trust-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:45px;border-top:1px solid var(--ink)}
.trust-grid article {padding:26px 0;border-bottom:1px solid var(--line)}
.trust-grid .mono {color:var(--orange);font-size:11px}
.trust-grid h3 {font-size:19px;font-weight:600;margin:8px 0 8px}
.trust-grid p {font-size:14px;color:var(--muted)}

.cat-process .process {margin-top:45px}
.site-footer p {font-size:12px}

@media(max-width:1024px) {
  .os-layer {grid-template-columns:1fr;gap:20px}
  .os-items li {grid-template-columns:140px 1fr auto}
  .ax-grid,.dx-grid {grid-template-columns:1fr}
  .next-grid,.trust-grid {grid-template-columns:1fr 1fr}
  .legend {grid-template-columns:auto 1fr;}
  .legend .mono {grid-column:1/-1}
}
@media(max-width:640px) {
  .os-layer {padding:24px 20px}
  .os-items li {grid-template-columns:1fr auto;gap:4px 12px}
  .os-items li span:not(.badge) {grid-column:1;grid-row:2;font-size:13px}
  .os-items li .badge {grid-row:1/3;grid-column:2}
  .flow {grid-template-columns:1fr 1fr}
  .flow li:nth-child(3) {padding-left:0;border-left:0}
  .flow li:nth-child(2)::after {display:none}
  .ax-card {padding:24px 22px}
  .next-grid,.trust-grid {grid-template-columns:1fr}
  .dx-grid {gap:40px}
  .main-nav {display:none}
}

/* 인쇄(PDF 브로슈어, A4 가로) */
@page {size:A4 landscape;margin:12mm 14mm}
@media print {
  .catalog {background:#fff}
  .site-header,.mobile-menu,.skip-link,.text-link,.contact .btn {display:none!important}
  .wrap {width:100%}
  .section {padding:10mm 0 0}
  .hero {padding-top:0}
  .page {break-before:page}
  .cat-hero {break-before:auto}
  .cat-ax,.os-link,.os-dx,.os-ax,.ax-card,.badge,.shot,.process {-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .shot {box-shadow:none}
  .dx-grid {grid-template-columns:1fr 1fr;gap:10mm 10mm}
  .dx-card {break-inside:avoid}
  .dx-card:nth-child(4n+1) {break-before:page}
  .ax-card,.os-layer,.trust-grid article,.next-grid article {break-inside:avoid}
  .contact {break-before:page}
  .hero h1 {font-size:48px}
  .section h2 {font-size:34px}
}

/* 실제 캡처 */
.shot figcaption {padding:10px 14px;font:400 11px/1.5 var(--mono);letter-spacing:.02em;color:var(--muted);background:#f1f1ea;border-top:1px solid var(--line)}
.dx-text {padding-bottom:10px}
.text-link-pdf {margin-left:28px}
@media(max-width:640px){.text-link-pdf{margin-left:0;display:flex;width:max-content}}
@media print {
  .site-footer {break-inside:avoid;padding:6mm 0 0}
  .biz-info {padding-top:3mm}
  .biz-info a {text-decoration:none}
}