/* 한국어 줄바꿈 — 어절 단위. 어색한 중간 꺾임 방지 (사이트 전역) */
body { word-break: keep-all; overflow-wrap: break-word; }

/* SF 마케팅 포탈 — 페이지 스타일.
   색·타입·간격 토큰은 Offering DS(_ds/…/colors_and_type.css), 공용 컴포넌트는 portal.css.
   이 파일은 페이지 레벨 스타일(히어로 / 목록 행 / 필터 / 표 / 관리 화면)을 담는다. */

/* ── 사내 전용 표시 ── */
.pill-internal { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
  border-radius: 999px; background: var(--ink-50); border: 1px solid var(--ink-100);
  font-size: 11.5px; font-weight: 600; color: var(--ink-500); letter-spacing: 0.02em; }

/* ── 히어로 ── */
.hero { background: var(--ink-900); color: var(--paper); }
.hero .inner { padding: 104px 0 88px; }
.t-eyebrow.on-dark { color: var(--accent-on-dark-ink); }
.hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(44px, 6.5vw, 76px);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; color: var(--paper);
  text-wrap: balance; max-width: 900px; }
.hero .sub { margin: 32px 0 0; font-size: 20px; line-height: 1.55; color: var(--ink-200); max-width: 640px; }
.hero .row { display: flex; align-items: center; gap: 16px; margin-top: 44px; flex-wrap: wrap; }
.hero .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 80px; max-width: 880px; }
.hero .stat { border-top: 1px solid rgba(250,250,247,0.22); padding-top: 16px; }
.hero .stat .v { font-family: var(--font-display); font-size: 34px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--paper); }
.hero .stat .l { margin-top: 6px; font-size: 13px; color: var(--ink-300); line-height: 1.4; }
@media (max-width: 860px) { .hero .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 520px) { .hero .stats { grid-template-columns: 1fr; gap: 18px; } }

/* ── 필터 pill ── */
.toolbar { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px 24px; padding: 40px 0 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  background: var(--paper-pure); color: var(--ink-500); border: 1px solid var(--ink-200);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.pill:hover { border-color: var(--ink-400); }
.pill.active { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.pill .n { font-family: var(--font-mono); font-size: 12px; opacity: 0.5; }
.count { font-size: 13px; color: var(--ink-400); }
.count b { font-family: var(--font-display); color: var(--accent-ink); font-weight: 700; }

/* ── 솔루션 행 + 자료 링크 3열 ── */
.sol-list { padding-bottom: 8px; }
.sol-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 176px 232px 148px; gap: 24px;
  align-items: start; border-top: 1px solid var(--border); padding: 36px 0; }
.sol-row:hover { background: rgba(242,241,236,0.45); }
.sol-row[hidden] { display: none; }
.sol-row .num { font-family: var(--font-mono); font-size: 13px; color: var(--ink-300); padding-top: 10px; }
.sol-row h2 { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sol-row .summary { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-400); max-width: 560px; }
.sol-row .cell { padding-top: 12px; }
.sol-row .cell-head { display: none; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-300); margin-bottom: 8px; }
.cols { display: grid; grid-template-columns: 64px minmax(0, 1fr) 176px 232px 148px; gap: 24px;
  padding: 28px 0 12px; border-bottom: 2px solid var(--ink-700); }
.cols span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-300); font-weight: 600; }
@media (max-width: 1080px) {
  .cols { display: none; }
  .sol-row { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 20px; padding: 30px 0; }
  .sol-row .cell { grid-column: 2; padding-top: 18px; }
  .sol-row .cell-head { display: block; }
}

/* ── 자료 링크 ── */
.lk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500;
  color: var(--accent-ink); }
.lk .ic { font-size: 11px; opacity: 0.75; }
.vlist { display: flex; flex-direction: column; gap: 8px; }
.vlist .line { display: flex; align-items: baseline; gap: 8px; }
.vlist .d { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }
.na { font-size: 13px; color: var(--ink-300); }
.na::before { content: '—'; margin-right: 6px; color: var(--ink-200); }
.refkey { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-300); }

/* ── 상태 태그 (portal.css .tag 확장) ── */
.tag-cust  { background: var(--positive-soft); color: var(--positive-ink); }
.tag-int   { background: var(--critical-soft); color: var(--critical-ink); }
.tag-ready { background: var(--positive-soft); color: var(--positive-ink); }
.tag-plan  { background: var(--paper-pure); color: var(--ink-300); border: 1px dashed var(--ink-200); }
.tag-ext   { background: var(--warning-soft); color: var(--warning-ink); }
.tag-dup   { background: var(--warning-soft); color: var(--warning-ink); }
.tag-prod  { background: var(--accent); color: #fff; }
.tag-sol   { background: var(--ink-900); color: var(--paper); }
.tag-asset { background: var(--paper-pure); color: var(--ink-500); border: 1px solid var(--ink-200); }

/* ── 안내 박스 ── */
.notice { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 24px 26px;
  border-radius: var(--r-lg); background: var(--warning-soft); border: 1px solid #D8CCEC; margin-top: 36px; }
.notice .ico { width: 28px; height: 28px; border-radius: 999px; background: var(--warning); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.notice h4 { margin: 3px 0 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--warning-ink); }
.notice ul { margin: 12px 0 0; padding-left: 20px; }
.notice li { font-size: 14px; line-height: 1.75; color: var(--ink-500); }
.notice li b { color: var(--warning-ink); }

/* ══════════════ 링크 관리 화면 ══════════════ */

.banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: var(--r-md); margin-top: 24px;
  background: var(--accent-soft); border: 1px solid #E8CBD5; font-size: 13.5px; color: var(--accent-ink); }
.banner b { font-weight: 700; }

.board-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 32px 0 18px; }
.board-bar .grow { flex: 1; }
.search { display: flex; align-items: center; gap: 8px; }
.search input, .search select { height: 44px; padding: 0 12px; border-radius: var(--r-md);
  border: 1px solid var(--ink-200); background: var(--paper-pure);
  font-family: var(--font-body); font-size: 14px; color: var(--ink-700); }
.search input { width: 280px; }
.search input:focus, .search select:focus { outline: none; border-color: var(--ink-900); }

.board { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14.5px; }
.board th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-300);
  padding: 12px 10px; border-bottom: 2px solid var(--ink-700); white-space: nowrap; }
.board td { padding: 14px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.board { table-layout: fixed; width: 100%; }  /* 고정 폭 열이 공간을 선점해 제목 열이 짜부라지는 문제 방지 — 제목 열(유일한 가변 열)이 잔여 폭을 전부 가져간다 */
.board .c-title { word-break: keep-all; overflow-wrap: break-word; }
.board tbody tr:hover { background: var(--ink-50); cursor: pointer; }
.board tbody tr.edited { box-shadow: inset 3px 0 0 var(--accent); }
.board .c-no { width: 52px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-300); }
.board .c-title { font-weight: 500; color: var(--ink-900); }
.board .c-title .k { display: block; margin-top: 4px; font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-300); font-weight: 400; }
.board .c-url { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-400);
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .c-mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-400); white-space: nowrap; }
.board .c-act { text-align: right; white-space: nowrap; }
.board .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.board .empty { padding: 64px 0; text-align: center; color: var(--ink-300); font-size: 14px; }
/* ── 좁은 폭 표 대응 ───────────────────────────────────────────────────────
   .board 는 table-layout:fixed + 고정 px 열 조합이라, 잔여 폭이 음수가 되면
   유일한 가변 열인 제목 열이 0px 로 눌려 글자가 한 글자씩 세로로 떨어지고
   삭제 버튼이 화면 밖으로 나갔다(문서 가로 넘침 동반).
     ① 761px 이상 : 열을 줄이고 min-width 로 제목 열 폭을 확보. .board-scroll 은
                    안전망(폰트 대체 등으로 넓어질 때만 가로 스크롤이 생긴다)
     ② 760px 이하 : 행을 카드로 전환 — 가로 스크롤 0, '수정·삭제'가 항상 화면 안
   열 숨김 경계는 1000px → 1240px. 창 1016(1024×768) 처럼 실제로 쓰이는 폭에서
   1px 차로 미발동해 제목이 8줄로 분해되던 문제를 없앤다.
   .wrap 이 .sec .inner 로 좌우 패딩 0 이 되므로 표의 컨테이너 폭 = min(뷰포트, 1160). */
.board-scroll, .doc-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

@media (max-width: 1240px) {
  /* 링크 관리(10열) — URL·갱신·등록자는 상세에서 확인. 고정 558 + 제목 142 이상 */
  .board-links th:nth-child(4), .board-links td:nth-child(4),
  .board-links th:nth-child(7), .board-links td:nth-child(7),
  .board-links th:nth-child(8), .board-links td:nth-child(8) { display: none; }
  .board-links { min-width: 700px; }
  /* 고객 대장(8열) — 가변 열이 둘(고객사·검토 솔루션)이라 고정 662 + 여유.
     이전에는 위 nth-child 규칙을 공유해 상태·갱신·'수정/삭제' 열까지 사라졌다. */
  .board-accts { min-width: 880px; }
}
@media (max-width: 1000px) {
  /* 고객 대장 — 881px 밑에서는 min-width 880 이 스크롤을 만들므로 갱신 열을 접고
     최소폭을 낮춘다 (고정 558 + 가변 2열 × 101 이상) */
  .board-accts th:nth-child(7), .board-accts td:nth-child(7) { display: none; }
  .board-accts { min-width: 760px; }
}

@media (max-width: 760px) {
  /* 행 = 카드. thead 를 숨기므로 열 이름을 ::before 로 붙인다 —
     열 순서는 templates/admin.html · templates/accounts-admin.html 의 thead 와
     1:1 로 맞춘 것이므로 열을 옮기면 아래 nth-child 도 함께 고쳐야 한다. */
  .board-scroll { overflow-x: visible; }
  .board, .board tbody, .board tr, .board td { display: block; }
  .board { min-width: 0; width: 100%; table-layout: auto; margin-top: 14px; font-size: 14px; }
  .board thead { display: none; }
  .board tbody tr { border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--paper-pure); padding: 13px 15px; margin: 0 0 10px; }
  .board tbody tr:hover { background: var(--ink-50); }
  .board td { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    width: auto; border-bottom: none; padding: 2px 0; }
  .board td::before { flex: none; min-width: 62px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-300); }
  /* 행 번호는 라벨 없이 카드 머리의 작은 서수로 (.c-no 의 width:52px 도 해제) */
  .board td:first-child, .board .c-no { display: block; width: auto; padding: 0 0 1px;
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }
  .board .c-title { display: block; font-size: 15.5px; font-weight: 600;
    padding: 2px 0 7px; color: var(--ink-900); }
  .board .c-title::before { content: none; }
  /* 잘려 78% 가 숨던 URL — 카드에서는 전문을 접어서 보여준다 (title 속성은 유지) */
  .board .c-url { max-width: none; white-space: normal; overflow: visible;
    text-overflow: clip; overflow-wrap: anywhere; }
  .board .c-mono { white-space: normal; }
  .board .c-act { display: flex; justify-content: flex-end; gap: 8px; text-align: left;
    white-space: normal; margin-top: 9px; padding-top: 10px;
    border-top: 1px dashed var(--border); }
  .board .empty { padding: 40px 0; }

  .board-links td:nth-child(2)::before { content: '유형'; }
  .board-links td:nth-child(4)::before { content: 'URL'; }
  .board-links td:nth-child(5)::before { content: '배포'; }
  .board-links td:nth-child(6)::before { content: '참조'; }
  .board-links td:nth-child(7)::before { content: '갱신'; }
  .board-links td:nth-child(8)::before { content: '등록자'; }
  .board-links td:nth-child(9)::before { content: '상태'; }
  .board-accts td:nth-child(3)::before { content: '산업'; }
  .board-accts td:nth-child(4)::before { content: '상태'; }
  .board-accts td:nth-child(5)::before { content: '담당'; }
  .board-accts td:nth-child(6)::before { content: '솔루션'; }
  .board-accts td:nth-child(7)::before { content: '갱신'; }
  /* 카드 모드에서는 열 숨김을 되돌린다 — 세로 공간은 넉넉하다 */
  .board-links th:nth-child(4), .board-links td:nth-child(4),
  .board-links th:nth-child(7), .board-links td:nth-child(7),
  .board-links th:nth-child(8), .board-links td:nth-child(8),
  .board-accts th:nth-child(7), .board-accts td:nth-child(7) { display: flex; }
}

/* 검색·필터 줄 — 입력 280px 고정 + select 2개가 min-content 하한(약 536px)을
   만들어, 표를 고친 뒤 새 가로 넘침이 되는 것을 막는다 */
@media (max-width: 760px) {
  .board-bar { gap: 10px; }
  .board-bar .grow { display: none; }
  .search { flex-wrap: wrap; width: 100%; }
  .search input { width: auto; flex: 1 1 100%; min-width: 0; }
  .search select { flex: 1 1 140px; min-width: 0; }
}

.paging { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 32px 0 8px;
  flex-wrap: wrap; }
.paging button { min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--ink-200); background: var(--paper-pure); color: var(--ink-500);
  font-family: var(--font-mono); font-size: 13px; cursor: pointer; }
.paging button:hover:not(:disabled) { border-color: var(--ink-400); }
.paging button[aria-current='true'] { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper); }
.paging button:disabled { opacity: 0.35; cursor: default; }

.view { display: none; }
.view.on { display: block; }
.detail { border-top: 2px solid var(--ink-700); }
.detail h3 { margin: 0; padding: 28px 0 6px; font-family: var(--font-display);
  font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); }
.detail .sub { display: flex; gap: 16px; flex-wrap: wrap; padding-bottom: 22px;
  border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; color: var(--ink-300); }
.drow { display: grid; grid-template-columns: 150px 1fr; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.drow dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-300); padding-top: 3px; }
.drow dd { margin: 0; color: var(--ink-700); word-break: break-all; }
.drow dd a { color: var(--accent-ink); }
.detail .acts { display: flex; gap: 10px; padding: 28px 0 0; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) { .drow { grid-template-columns: 1fr; gap: 6px; } }

.form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.form label { min-width: 0; }
.form label code { overflow-wrap: anywhere; font-family: var(--font-mono);
  font-size: 11.5px; }  /* raw monospace 는 한글 글리프가 없어 지저분 (적대 검사 #6) */
@media (max-width: 1080px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form .wide { grid-column: 1 / -1; } }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.form label > input, .form label > select { margin-top: auto; }  /* 힌트 유무와 무관하게 같은 행 컨트롤 상단 정렬 (적대 검사 #5) */
.form label { display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-300); }
.form input, .form select { height: 40px; padding: 0 12px; border-radius: var(--r-md);
  border: 1px solid var(--ink-200); background: var(--paper-pure);
  font-family: var(--font-body); font-size: 14px; color: var(--ink-700); }
.form input:focus, .form select:focus { outline: none; border-color: var(--ink-900); }
.form input:disabled { background: var(--ink-50); color: var(--ink-400); }
.form .wide { grid-column: span 2; }
@media (max-width: 860px) { .form { grid-template-columns: 1fr; } .form .wide { grid-column: span 1; } }

.msg { font-size: 13px; align-self: center; }
.msg.err { color: var(--critical-ink); }
.msg.ok { color: var(--positive-ink); }

/* ── 엑셀 일괄 등록 ── */
.upload { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; margin-top: 32px; }
@media (max-width: 900px) { .upload { grid-template-columns: 1fr; } }
.upcard { background: var(--paper-pure); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px; }
.upcard .n { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); }
.upcard h3 { margin: 12px 0 0; font-family: var(--font-display); font-size: 19px;
  font-weight: 600; color: var(--ink-900); }
.upcard p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-400); }
.upcard .acts { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; align-items: center; }

.dropzone { margin-top: 18px; padding: 28px; border: 1.5px dashed var(--ink-200);
  border-radius: var(--r-md); background: var(--paper); text-align: center; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .big { font-size: 14px; font-weight: 600; color: var(--ink-700); }
.dropzone .small { margin-top: 6px; font-size: 12.5px; color: var(--ink-300); }
.dropzone input { display: none; }

.sums { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.sum { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px;
  border-radius: var(--r-md); background: var(--ink-50); border: 1px solid var(--border); }
.sum b { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink-900); }
.sum span { font-size: 12.5px; color: var(--ink-400); }
.sum.new { background: var(--positive-soft); border-color: #BFDDD8; }
.sum.mod { background: var(--accent-soft); border-color: #E8CBD5; }
.sum.del { background: var(--critical-soft); border-color: #EBD3C7; }
.sum.err { background: var(--critical-soft); border-color: var(--critical); }

.preview { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 13.5px; }
.preview th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-300);
  padding: 10px 10px; border-bottom: 2px solid var(--ink-700); white-space: nowrap; }
.preview td { padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.preview td.r { font-family: var(--font-mono); font-size: 12px; color: var(--ink-300); width: 48px; }
.preview td.k { font-family: var(--font-mono); font-size: 12px; color: var(--ink-700); width: 190px; }
.preview td.j { width: 92px; }
.preview .diff { font-size: 12.5px; line-height: 1.7; color: var(--ink-500); }
.preview .diff .f { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }
.preview .diff .from { color: var(--ink-300); text-decoration: line-through; word-break: break-all; }
.preview .diff .to { color: var(--ink-900); word-break: break-all; }
.preview .why { margin-top: 4px; font-size: 12.5px; line-height: 1.6; }
.preview .why.e { color: var(--critical-ink); }
.preview .why.w { color: var(--warning-ink); }
.preview tr.row-err td { background: var(--critical-soft); }
.preview tr.row-same td { color: var(--ink-300); }

/* ── 검증 요약 ── */
.checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.check { background: var(--paper-pure); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.check.bad { border-color: var(--critical); background: var(--critical-soft); }
.check.warn { border-color: #D8CCEC; background: var(--warning-soft); }
.check .v { font-family: var(--font-display); font-size: 32px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink-900); }
.check .l { margin-top: 6px; font-size: 13px; color: var(--ink-400); }
@media (max-width: 860px) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══ 통합 브로슈어 — 판형 카드, 카드 안에서 국문·영문 구분 ══ */
.bro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
@media (max-width: 860px) { .bro-grid { grid-template-columns: 1fr; } }

.bro-card { background: var(--paper-pure); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 30px 32px; display: flex; flex-direction: column; }
.bro-card[hidden] { display: none; }
.bro-card .bro-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bro-card .bro-head .no { font-size: 12px; color: var(--ink-300); }
.bro-card h3 { margin: 14px 0 0; font-family: var(--font-display); font-size: 24px; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-900);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bro-card .sum { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-400); }
.bro-card .langs { margin-top: auto; }

/* 국문 · 영문 — 카드 안에서 가로로 나란히 */
.bro-card .langs { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0;
  margin-top: 22px; border-top: 1px solid var(--border); }
.bro-card .lang { display: flex; flex-direction: column; gap: 8px; padding: 18px 0 2px; min-width: 0; }
/* slot 은 span 이라 기본 인라인 — 안에 링크·메타(블록)가 섞이면 겹쳐 보인다. 세로 flex 로 고정 */
.bro-card .lang .slot { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.bro-card .lang .lk { word-break: keep-all; }
.bro-card .lang .meta { margin: 0; }
.bro-card .lang + .lang { padding-left: 18px; border-left: 1px solid var(--border); }
.bro-card .lang .lb { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-300); }
.bro-card .lang .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bro-card .lang .meta .d { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-300); }
.bro-card .lang .na { font-size: 13px; }

/* ══ 동영상 · 데모사이트 목록 (4열) ══ */
.cols-media, .sol-row { grid-template-columns: 64px minmax(0, 1fr) 268px 176px; }
@media (max-width: 1080px) {
  .sol-row { grid-template-columns: 44px minmax(0, 1fr); }
}


/* ── 접힌 메타(AI 요약·MD 정본)·상세 페이지 ─────────────────────── */
.more { margin-top: 10px; }
.more summary { cursor: pointer; font-size: 12px; color: var(--ink-300); user-select: none; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { color: var(--accent-ink); }
.more-body { margin-top: 8px; padding: 12px 14px; background: var(--ink-50);
  border: 1px solid var(--border); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 7px; max-width: 640px; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tagchip { font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: var(--paper-pure); border: 1px solid var(--border); color: var(--ink-400); }
.ai-sum { font-size: 12.5px; color: var(--ink-400); line-height: 1.55; }
.ai-sum .k { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); margin-right: 7px; }
.srcline { font-size: 12px; color: var(--ink-300); }
.srcline a { color: var(--accent-ink); }
.sol-row h2 a { color: inherit; }
.sol-row h2 a:hover { color: var(--accent-ink); }

.detail-hero .backlink { display: inline-block; margin-bottom: 26px; font-size: 13px; color: var(--ink-400); }
.detail-hero .backlink:hover { color: var(--accent-ink); }
.detail-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ai-banner { margin-top: 18px; padding: 11px 15px; border: 1px dashed var(--border-strong);
  border-radius: var(--r-md); background: var(--paper-pure); font-size: 13px; color: var(--ink-400); }
.md-body { max-width: 720px; }
.md-body h3 { margin: 30px 0 10px; font-size: 18px; letter-spacing: -0.01em; color: var(--ink-900); }
.md-body ul { margin: 0; padding-left: 18px; }
.md-body li { font-size: 15px; line-height: 1.7; color: var(--ink-500); margin: 4px 0; }
.md-body p { font-size: 15px; line-height: 1.7; color: var(--ink-500); }
.detail-assets { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px; max-width: 720px; }
@media (max-width: 700px) { .detail-assets { grid-template-columns: 1fr; } }

.specline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.specline .specnum { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); margin-left: 4px; }
.detail-hero .specline { margin-top: 14px; }

/* 미리보기 — 판형(세로/가로) 비율과 무관하게 동일 크기 박스, 표지 상단 기준 크롭 */
/* 미리보기 — 세로형: 첫 3페이지 한 줄 / 가로형(thumb-grid): 첫 4페이지 2x2 */
.bro-card .thumb { margin: 12px 0 4px; display: flex; gap: 6px; align-items: stretch; }
.bro-card .thumb img { display: block; height: 170px; flex: 1 1 0; min-width: 0;
  object-fit: cover; object-position: top center;
  border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow-sm); }
.bro-card .thumb.thumb-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.bro-card .thumb.thumb-grid img { width: 100%; height: auto; max-width: none; }
.bro-card .thumb .thumb-note { display: none; }
.bro-card .thumb .thumb-note { position: absolute; right: 8px; bottom: 8px; font-size: 10.5px;
  padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.92);
  border: 1px solid var(--border); color: var(--ink-300); }

/* 좁은 폭 — 세로형 미리보기는 height:170px 고정 + 내재비율(480×694) 때문에
   img 한 장의 min-content 가 117.6px(테두리 포함 119.6px)이다. 3장+gap+카드 패딩이
   카드 min-content 를 436.7px 로 밀어올려, .bro-grid 의 1fr(=minmax(auto,1fr)) 하한을 통해
   320~436px 구간에서 문서 가로 넘침(최대 117px)을 만들었다. min-width:0 으로는 막히지 않는다.
   → 장수를 줄여 하한 자체를 없앤다. 가로형 2×2(.thumb-grid)는 minmax(0,1fr)로 하한이
   없으므로 건드리지 않는다. 데스크톱(1440·1280)은 이 구간에 들어오지 않는다.
   하한: 3장 437px / 2장 311px / 1장 186px — 경계는 각 하한보다 30px 이상 여유를 둔다. */
@media (max-width: 470px) {
  .bro-card .thumb:not(.thumb-grid) img:nth-child(n+3) { display: none; }  /* 3장 → 2장 */
}
@media (max-width: 360px) {
  .bro-card .thumb:not(.thumb-grid) img:nth-child(n+2) { display: none; }  /* 2장 → 1장 */
}

/* AI 요약 — <span class="d"> 가 인라인이라 "…정식 판본.AI 요약 · 32p" 로 붙어 읽혔다.
   라벨을 별도 줄로 내린다. 생성부: tools/build.py _bro_ai_line */
.bro-ai .d { display: block; margin-top: 5px; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-300); }

/* ── 통합 웹 브로슈어 ─────────────────────────────────────────── */
.bro-card-web { border: 1px solid var(--accent-soft); background: var(--paper-pure); }
.bro-card-web .langs { margin-top: 14px; }
.bro-toc { margin-top: 34px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px 32px; max-width: 760px; }
.bro-toc a { display: flex; gap: 10px; align-items: baseline; padding: 7px 4px; font-size: 14px;
  color: var(--ink-500); border-bottom: 1px solid var(--ink-50); }
.bro-toc a:hover { color: var(--accent-ink); }
.bro-toc .t-mono { font-size: 11px; color: var(--ink-300); }
.bro-toc .toc-d { margin-left: auto; font-size: 11.5px; color: var(--ink-300); }
.bro-page { padding: 44px 0; border-top: 1px solid var(--border); max-width: 760px; }
.bro-page:first-child { border-top: none; padding-top: 8px; }
.bro-page header .summary { margin: 10px 0 0; font-size: 15px; color: var(--ink-400); }
@media (max-width: 700px) { .bro-toc { grid-template-columns: 1fr; } }

@media print {
  .no-print, .site-header, .site-nav, .contact, .bro-toc, .more, .backlink { display: none !important; }
  .bro-page { border-top: none; padding: 0 0 24px; page-break-after: always; }
  .bro-page:last-child { page-break-after: auto; }
  .md-body h3 { page-break-after: avoid; }
  body { font-size: 12px; }
  .tag, .tagchip { border: 1px solid #ccc; }

  /* 표 인쇄 — 행이 페이지 경계에서 쪼개지지 않게, 머리글은 페이지마다 반복.
     조작용 UI(수정·삭제 버튼, 검색줄, 페이지 넘김)는 .no-print 가 붙어 있지 않으므로
     여기서 제외한다. */
  .board tr, .preview tr { page-break-inside: avoid; break-inside: avoid; }
  .board thead { display: table-header-group; }
  .board .c-act, .board th:last-child,
  .board-bar, .paging, .search { display: none !important; }
  /* 스크롤 컨테이너·최소폭은 인쇄에서 내용을 잘라먹을 수 있으므로 해제 */
  .board-scroll { overflow: visible !important; }
  .board-links, .board-accts { min-width: 0 !important; }
}

/* width:100% + border:1px 은 content-box 라 컨테이너보다 2px 넓어져
   좁은 폭에서 문서 가로 넘침(예: 웹 브로슈어 하위 페이지에서 627 vs 625)을 만든다.
   데스크톱 렌더를 건드리지 않도록 컨테이너 최대폭(760·720px)보다 좁은 구간에만 적용. */
@media (max-width: 800px) {
  .wb-fig img, .v2-fig img, .slide-page img, .vthumb img,
  .bro-card .thumb.thumb-grid img { box-sizing: border-box; }
}

/* ── 고객 대장 ─────────────────────────────────────────────── */
.acct-list { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; }
.acct-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 26px;
  background: var(--paper-pure); box-shadow: var(--shadow-sm); }
.acct-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.acct-card h3 { margin: 4px 0 0; font-size: 19px; letter-spacing: -0.01em; }
.acct-meta { display: flex; align-items: center; gap: 12px; }
.acct-meta .owner { font-size: 13px; color: var(--ink-400); }
.acct-meta .d { font-size: 11px; color: var(--ink-300); }
.acct-sols { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.acct-sol { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.acct-sol .note { font-size: 12.5px; color: var(--ink-400); }
.acct-sol .assets { margin-left: auto; font-size: 12.5px; }
.acct-sol .assets a { color: var(--accent-ink); }
.acct-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ink-50);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.acct-log { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-400); }
.acct-log .t-mono { font-size: 11px; color: var(--ink-300); margin-right: 8px; }
.acct-diag { font-size: 12.5px; }
.acct-diag a { color: var(--accent-ink); }
/* box-sizing 필수 — 없으면 width:100% + 패딩 24px + 테두리 2px = 셀보다 26px 넓어져
   4열 그리드에서 옆 열 textarea 를 침범하고(gap 16px 초과분 10px 겹침),
   .wide 가 전폭이 되는 ≤1080px 에서는 문서가 26px 가로로 넘친다 (2026-08-24 실측). */
.form textarea { box-sizing: border-box; width: 100%; resize: vertical;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--ink-200); font-family: var(--font-mono); font-size: 12.5px; }

.slides { margin: 26px 0 8px; max-width: 720px; }
.slide-page { margin: 0 0 14px; }
.slide-page img { display: block; width: 100%; border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--shadow-md); }
.slide-note { font-size: 12px; color: var(--ink-300); }

/* 고객 대장 목록 조회 */
.acct-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.acct-toolbar input[type=search] { height: 40px; padding: 0 14px; min-width: 260px;
  border: 1px solid var(--ink-200); border-radius: var(--r-md); }
.a-status-quick { height: 30px; border: 1px solid var(--ink-200); border-radius: var(--r-sm);
  font-size: 12px; background: var(--paper-pure); }

.acct-stats { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 28px; padding: 18px 22px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--paper-pure); }
.acct-stats .stat .v { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.acct-stats .stat .l { font-size: 12px; color: var(--ink-400); margin-top: 2px; }
.mail-import { margin-top: 10px; padding: 12px; border: 1px dashed var(--border-strong);
  border-radius: var(--r-md); background: var(--ink-50); }
.mail-import textarea { box-sizing: border-box; width: 100%; min-height: 90px; font-size: 12px; }
.mail-import .hint { font-size: 11.5px; color: var(--ink-300); margin: 6px 0; }

.acct-card h3 a { color: inherit; }
.acct-card h3 a:hover { color: var(--accent-ink); }

.vthumb { display: block; position: relative; margin-bottom: 10px; max-width: 320px; }
.vthumb img { display: block; width: 100%; border-radius: var(--r-sm); border: 1px solid var(--border); }
.vthumb .play { position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; }
.vthumb:hover img { filter: brightness(1.05); }

.board .c-title > a { color: inherit; }
.board .c-title > a:hover { color: var(--accent-ink); }

/* 컨설팅 시연 키트 */
.kit-steps { margin-top: 30px; display: flex; flex-direction: column; }
.kit-step { display: flex; gap: 22px; align-items: center; padding: 20px 0;
  border-top: 1px solid var(--border); }
.kit-step .kit-no { font-size: 13px; color: var(--ink-300); width: 34px; }
.kit-step .kit-body { flex: 1; min-width: 0; }
.kit-step h3 { margin: 0 0 4px; font-size: 16.5px; letter-spacing: -0.01em; }
.kit-step p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-400); }
.kit-caution { margin-top: 26px; padding: 12px 16px; border: 1px dashed var(--critical-ink);
  border-radius: var(--r-md); font-size: 13px; color: var(--critical-ink); }
@media (max-width: 640px) { .kit-step { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* 로고·타이틀 = 홈 링크 (기존 .brand 내부 배치 유지) */
.brand .brand-home { display: inline-flex; align-items: center; gap: inherit; color: inherit; text-decoration: none; }
.brand .brand-home > * + * { margin-left: 12px; }
.brand .brand-home:hover .label { color: var(--accent-ink); }

/* 웹 브로슈어 — 챕터 구성 */
.wb-toc { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .wb-toc { grid-template-columns: 1fr; } }
.wb-toc-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--paper-pure);
  color: inherit; box-shadow: var(--shadow-sm); }
.wb-toc-card:hover { border-color: var(--accent-ink); }
.wb-toc-card .no { font-size: 12px; color: var(--ink-300); }
.wb-toc-card h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.wb-toc-card .go { font-size: 12.5px; color: var(--accent-ink); margin-top: auto; }
.wb-body { max-width: 760px; margin-top: 6px; }
.wb-body h3 { margin: 34px 0 10px; font-family: var(--font-display); font-size: 21px; letter-spacing: -0.015em; }
.wb-fig { margin: 20px auto; }
.wb-fig img { display: block; width: 100%; border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.wb-fig figcaption { margin-top: 7px; font-size: 12px; color: var(--ink-300); text-align: center; }
.wb-idx { margin: 20px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.wb-idx-row { display: flex; gap: 16px; align-items: baseline; }
.wb-idx-row .t-eyebrow { width: 120px; flex: none; }
.wb-idx-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.wb-idx-links a { color: var(--ink-700); border-bottom: 1px solid var(--ink-200); }
.wb-idx-links a:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.wb-nav { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; flex-wrap: wrap; }

/* 연속 슬라이드 — 2열 나란히 */
.wb-fig-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; margin: 20px 0; }
.wb-fig-row .wb-fig { margin: 0; max-width: none; }
@media (max-width: 700px) { .wb-fig-row { grid-template-columns: 1fr; } }

/* 웹 우선 재배치 — 원본 슬라이드는 접기로 강등 */
.wb-fold { margin: 18px 0; }
.wb-fold summary { cursor: pointer; font-size: 13px; color: var(--ink-400);
  padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  user-select: none; list-style: none; display: inline-block; }
.wb-fold summary::before { content: "▸ "; color: var(--ink-300); }
.wb-fold[open] summary::before { content: "▾ "; }
.wb-fold summary:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.wb-fold[open] { display: block; }
.wb-body h4 { margin: 26px 0 8px; font-size: 16px; letter-spacing: -0.01em; color: var(--ink-900); }
.wb-body ul + h4 { margin-top: 30px; }

/* ── 솔루션 v2 (14요소 · Type A/B/C) ─────────────────────────── */
.v2-cat { margin-top: 44px; }
.v2-cat-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border); }
.v2-cat-head .n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }
.v2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
@media (max-width: 1000px) { .v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .v2-grid { grid-template-columns: 1fr; } }
.v2-card { display: flex; flex-direction: column; gap: 9px; padding: 20px 22px; color: inherit;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--paper-pure);
  box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast) var(--ease-out); }
.v2-card:hover { border-color: var(--accent-ink); }
.v2-card h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.v2-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-400); }
.v2-card .go { margin-top: auto; font-size: 12.5px; color: var(--accent-ink); }
.v2-lead { font-size: 17px; color: var(--ink-500); max-width: 700px; }
.v2-question { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-400); }
.v2-metrics { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.v2-metric { min-width: 150px; padding: 16px 20px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--paper-pure); }
.v2-metric .v { font-family: var(--font-display); font-size: 26px; font-weight: 700;
  color: var(--accent-ink); letter-spacing: -0.02em; }
.v2-metric .l { margin-top: 3px; font-size: 12.5px; color: var(--ink-400); }
.v2-body { max-width: 760px; }
.v2-sec { padding-top: 8px; }
.v2-sec h3 { margin: 34px 0 10px; font-family: var(--font-display); font-size: 20px;
  letter-spacing: -0.015em; }
.v2-fig { margin: 16px 0; }
.v2-fig img { display: block; width: 100%; border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.v2-fig figcaption { margin-top: 6px; font-size: 12px; color: var(--ink-300); }
.v2-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 16px; margin: 12px 0; }
.v2-kv dt { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.v2-kv dd { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-500); }
.v2-res { list-style: none; margin: 8px 0 0; padding: 0; }
.v2-res li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--ink-50); font-size: 14px; }
.v2-res .d { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }
.v2-contact { margin-top: 14px; font-size: 13.5px; color: var(--ink-400); }
.v2-gap { margin-top: 34px; }
.v2-gap summary { cursor: pointer; font-size: 12.5px; color: var(--ink-300); list-style: none; }
.v2-gap summary:hover { color: var(--accent-ink); }
.v2-gap ul { margin: 10px 0 4px; font-size: 13px; color: var(--ink-400); }
.v2-gap .d { font-size: 12px; color: var(--ink-300); }

/* v2x — 솔루션 v2 시각 톤 (lgcns.com 기준: 밝은 주조 · 파스텔 틴트 · 탭 내비)
   ------------------------------------------------------------------------
   참조: lgcns.com/kr/service/smart-factory/* — 풀블리드 히어로, eyebrow+초대형 제목,
   가로 탭 내비, 흰색 광폭 본문, 좌 파스텔 카드 / 우 제목+문단 반복행, 하단 상담 CTA.
   다크 밴드는 쓰지 않는다. 액센트는 사이트 정체성(LG 레드 --accent)을 유지한다. */

.v2x-hero { padding: 72px 0 44px; background: linear-gradient(135deg, #F7F4FB 0%, #FBF1F4 52%, #F3F6FC 100%);
  border-bottom: 1px solid var(--border); }
.v2x-back { display: inline-block; margin-bottom: 22px; font-size: 13px; color: var(--ink-400); }
.v2x-back:hover { color: var(--accent-ink); }
.v2x-eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-400); }
.v2x-title { margin: 12px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 60px); line-height: 1.08; letter-spacing: -0.03em; color: var(--ink-900); }
.v2x-tagline { margin: 18px 0 0; max-width: 860px; font-size: clamp(17px, 2vw, 23px); line-height: 1.5;
  font-weight: 600; color: var(--accent-ink); }
.v2x-meta { margin: 16px 0 0; font-size: 13px; color: var(--ink-400); }
.v2x-hero .row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 26px; }  /* gap 없이는 버튼 3개가 간격 0 으로 융합 (적대 검사 #4) */
.v2x-stats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 34px; }
.v2x-stats .s .v { font-family: var(--font-display); font-size: 30px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--ink-900); }
.v2x-stats .s .l { margin-top: 2px; font-size: 12.5px; color: var(--ink-400); }

/* 탭 내비 — 스티키 */
.v2x-tabs { position: sticky; top: 0; z-index: 20; background: #fff;  /* 비침 제거 (검증 LOW) */
  border-bottom: 1px solid var(--border); }
.v2x-tabs .wrap { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.v2x-tabs a { flex: 0 0 auto; padding: 15px 0 13px; font-size: 14px; font-weight: 600;
  color: var(--ink-400); border-bottom: 2px solid transparent; white-space: nowrap; }
.v2x-tabs a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* 섹션 — 흰색 / 연한 틴트 교차 */
.v2x-sec { padding: 66px 0; border-bottom: 1px solid var(--ink-50); scroll-margin-top: 58px; }
.v2x-sec--tint { background: #FAFAFB; }
.v2x-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px 44px; }
.v2x-grid > .h h2 { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.25; letter-spacing: -0.02em; color: var(--ink-900); }
.v2x-grid > .h .sub { margin: 8px 0 0; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--ink-300); }
.v2x-c { min-width: 0; }
.v2x-c > p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.78; color: var(--ink-500); }
.v2x-c > ul { margin: 0 0 14px; padding-left: 20px; }
.v2x-c > ul li { margin: 7px 0; font-size: 15.5px; line-height: 1.72; color: var(--ink-500); }
.v2x-c > dl { margin: 0; }
/* v2 상세의 정의형은 .v2-kv(2열 그리드)와 아래 dt 괘선 규칙이 겹쳐 dt 가 자기
   dd 보다 13px 아래로 밀렸다 (적대 검사 #3). v2x 안에서는 라벨 위/본문 아래의
   블록 배치로 통일한다 — lgcns.com 의 볼드 소제목+문단 문법. */
.v2x-c > dl.v2-kv { display: block; }
.v2x-c > dl > dt { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ink-50);
  font-size: 16px; font-weight: 700; color: var(--ink-900); }
.v2x-c > dl > dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.v2x-c > dl > dd { margin: 7px 0 0; font-size: 15px; line-height: 1.75; color: var(--ink-500); }

/* 파스텔 틴트 이미지 카드 */
.v2x-shot { margin: 0 0 22px; padding: 22px; border-radius: 14px; }
.v2x-shot.t1 { background: linear-gradient(135deg, #EFEBFB, #F7EEF8); }
.v2x-shot.t2 { background: linear-gradient(135deg, #F9EDF3, #F1EFFB); }
.v2x-shot.t3 { background: linear-gradient(135deg, #EAF0FB, #F5EEF7); }
.v2x-shot img { display: block; width: 100%; height: auto; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(17,17,17,0.07); background: #fff; }
.v2x-shot figcaption { margin: 12px 2px 0; font-size: 12px; color: var(--ink-400); }
.v2x-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 34px;
  align-items: center; }
.v2x-row .v2x-shot { margin: 0; }

/* 정량 효과 — 틴트 밴드 + 큰 숫자 */
.v2x-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 20px; }
.v2x-num { padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.v2x-num .v { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 40px); font-weight: 700;
  letter-spacing: -0.03em; color: var(--accent-ink); }
.v2x-num .l { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-500); }

/* 기능 카드 그리드 */
.v2x-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.v2x-card { padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.v2x-card .n { font-family: var(--font-mono); font-size: 11px; color: var(--accent-ink); }
.v2x-card h4 { margin: 8px 0; font-size: 16px; letter-spacing: -0.01em; color: var(--ink-900); }
.v2x-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-500); }

/* 인용 (Proof) */
.v2x-quote { margin: 0; padding: 28px 30px; background: var(--accent-soft); border-radius: 14px; }
.v2x-quote p { margin: 0 0 10px; font-size: 17px; line-height: 1.65; font-weight: 600; color: var(--ink-900); }
.v2x-quote cite { font-style: normal; font-size: 13px; color: var(--ink-400); }

/* 자료 목록 */
.v2x-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px;
  list-style: none; margin: 0; padding: 0; }
.v2x-res li { padding: 18px 20px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.v2x-res .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-300); }
.v2x-res a { display: block; margin: 6px 0; font-size: 15px; font-weight: 600; color: var(--ink-900); }
.v2x-res a:hover { color: var(--accent-ink); }
.v2x-res .d { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }
.v2x-res .s { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-400); }

/* 하단 상담 CTA */
.v2x-cta { padding: 62px 0; background: linear-gradient(135deg, #F7F4FB, #FBF1F4); }
.v2x-cta h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.025em; color: var(--ink-900); }
.v2x-cta p { margin: 0 0 24px; max-width: 640px; font-size: 15.5px; line-height: 1.7; color: var(--ink-500); }

/* ── 허브: 계층 트리 ── */
.v2x-root { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px;
  background: var(--ink-900); color: #fff; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.v2x-tree { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(216px, 100%), 1fr)); gap: 16px;
  margin-top: 22px; }
.v2x-tcol { padding: 20px; border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(180deg, #FBF7FE 0%, #fff 42%); }
.v2x-tcol:nth-child(2) { background: linear-gradient(180deg, #FDF3F6 0%, #fff 42%); }
.v2x-tcol:nth-child(3) { background: linear-gradient(180deg, #F2F6FD 0%, #fff 42%); }
.v2x-tcol:nth-child(4) { background: linear-gradient(180deg, #FBF4F3 0%, #fff 42%); }
.v2x-tcol:nth-child(5) { background: linear-gradient(180deg, #F4F8FB 0%, #fff 42%); }
.v2x-tcol > .cat { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px;
  border-bottom: 2px solid var(--accent); }
.v2x-tcol > .cat b { font-size: 15.5px; color: var(--ink-900); }
.v2x-tcol > .cat span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-300); }
.v2x-tgrp { margin-top: 14px; }
.v2x-tgrp > .g { font-size: 12px; font-weight: 700; color: var(--ink-400); }
.v2x-tgrp ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 10px; border-left: 1px solid var(--ink-100); }
.v2x-tgrp li { padding: 3px 0; }
.v2x-tgrp a { font-size: 13.5px; color: var(--ink-700); }
.v2x-tgrp a:hover { color: var(--accent-ink); }
.v2x-tgrp .ty { margin-left: 5px; font-family: var(--font-mono); font-size: 10px; color: var(--accent-ink); }

/* ── 허브: 카테고리 상세 ── */
.v2x-catsec { padding: 44px 0; border-bottom: 1px solid var(--ink-50); scroll-margin-top: 58px; }
.v2x-catsec--tint { background: #FAFAFB; }
.v2x-cathead { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px 44px;
  margin-bottom: 30px; }
.v2x-cathead .n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }
.v2x-cathead h2 { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(24px, 3vw, 33px);
  letter-spacing: -0.025em; color: var(--ink-900); }
.v2x-cathead p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--ink-500); max-width: 720px; }
.v2x-grps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(236px, 100%), 1fr));
  gap: 20px 16px; align-items: start; }  /* 1064px 에서 4축 한 줄 — DX 섹션 길이 완화 */
.v2x-grp { min-width: 0; }
.v2x-grp > .gh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  min-height: 30px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.v2x-grp > .gh b { font-size: 16px; color: var(--ink-900); }
.v2x-grp > .gh .tree { font-size: 11.5px; letter-spacing: 0; color: var(--ink-300); white-space: nowrap; }
.v2x-grp > .gd { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-400); }
.v2x-slist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.v2x-scard { display: flex; flex-direction: column; gap: 4px; padding: 11px 14px; color: inherit;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  height: 108px; overflow: hidden;   /* 균일 높이 — 좌우 열의 카드 행이 맞물린다 */
  transition: border-color .15s, box-shadow .15s; }
.v2x-scard .foot { margin-top: auto; display: flex; align-items: baseline; gap: 8px;
  justify-content: space-between; min-width: 0; }
.v2x-scard .foot .assets { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2x-scard .foot .go { flex: 0 0 auto; }
a.v2x-scard:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(17,17,17,0.06); }
.v2x-scard .top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v2x-scard h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; color: var(--ink-900); }
.v2x-scard .ty { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent-ink); }
.v2x-scard .lead { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-500); }
/* ⚠️ 카드 안에서 .hero 를 쓰면 안 된다 — site.css 의 전역 .hero 가 다크 배경을 준다 */
.v2x-scard .assets { margin: 0; font-size: 12px; color: var(--ink-400); }
.v2x-scard .go { font-size: 12px; color: var(--accent-ink); }

@media (max-width: 900px) {
  .v2x-grid, .v2x-cathead { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .v2x-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .v2x-sec, .v2x-catsec { padding: 46px 0; }
  .v2x-hero { padding: 48px 0 34px; }
}
.v2x-scard .assets.none { color: var(--ink-300); }

/* 히어로 2단 — hero 도해가 있을 때만 (좌 텍스트 / 우 이미지 카드) */
.v2x-hero .wrap.v2x-herogrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px; align-items: center; }
.v2x-herotext { min-width: 0; }
.v2x-herofig { margin: 0; padding: 14px; background: rgba(255,255,255,0.62); border-radius: 14px; }
.v2x-herofig img { display: block; width: 100%; height: auto; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(17,17,17,0.10); background: #fff; }
.v2x-herofig figcaption { margin: 10px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-400); }

/* 카테고리 밴드 이미지 — 글자를 겹치지 않는다 (판독성 우선) */
.v2x-catband { margin: 0 0 30px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.v2x-catband img { display: block; width: 100%; height: 168px; object-fit: cover; object-position: center;
  background: #fff; }

@media (max-width: 900px) {
  .v2x-hero .wrap.v2x-herogrid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .v2x-catband img { height: 120px; }
}

/* 넓은 도해(원본이 두 면에 걸친 스프레드 등) — 본문 폭 760px 를 넘겨 펼친다.
   .wrap 의 콘텐츠 폭(뷰포트-96px, 최대 1064px)까지만 넓히므로 문서 넘침이 없다.
   1000px 미만에서는 넓히지 않는다 (좌우 여백이 줄어 넘칠 수 있다). */
@media (min-width: 1000px) {
  .wb-fig--wide { width: min(1064px, calc(100vw - 96px)); max-width: none; }
}

/* 출처 표기 — 웹 판이 어느 원본의 몇 면에서 왔는지 작게 남긴다 (추적성 목적) */
.wb-src { margin: 44px 0 0; padding-top: 14px; border-top: 1px solid var(--ink-100);
  font-size: 11.5px; line-height: 1.7; color: var(--ink-300); }
.wb-src a { color: var(--ink-400); text-decoration: underline; text-underline-offset: 2px; }
.wb-src a:hover { color: var(--accent-ink); }
.v2x-cta .wb-src { margin-top: 30px; }
@media print { .wb-src { color: #555; } }

/* 폼 컨트롤 서체 상속 — UA 기본(Arial)이라 /accounts/ 검색창의 한글 placeholder 가
   주변과 다른 서체로 렌더됐다 (적대 검사 #7). */
input, select, textarea, button { font-family: inherit; }

/* v2 스티키 탭 — 넘칠 때 스크롤 단서가 없어 마지막 탭이 잘린 것처럼 보임 (적대 검사 #9).
   우측 페이드로 "더 있음"을 표시. */
.v2x-tabs { position: sticky; }
.v2x-tabs::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
  pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95)); }

/* ── v2m — 오퍼링 Landscape 맵 (가로 Lv1 × 세로 Lv2) ── */
.v2m-scroll { overflow-x: auto; }
.v2m { display: flex; flex-direction: column; gap: 6px; min-width: 880px; }
.v2m-row { display: grid; grid-template-columns: 168px repeat(var(--cols, 5), minmax(132px, 1fr));
  gap: 6px; border-radius: 14px; }
.v2m-corner { }
.v2m-lv1 { padding: 12px 14px; background: var(--ink-900); color: #fff; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: center; line-height: 1.35; }
.v2m-lv2 { padding: 10px 6px; display: flex; flex-direction: column; gap: 1px;
  align-items: center; justify-content: center; border-bottom: 2px solid var(--ink-900); }
.v2m-lv2 b { font-size: 13.5px; color: var(--ink-900); letter-spacing: -0.01em; }
.v2m-lv2 .sub { font-size: 11px; color: var(--ink-300); }
.v2m-cell { padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: #FAFAFB; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.v2m-cell.empty { display: flex; align-items: center; justify-content: center;
  color: var(--ink-200); background: transparent; border-style: dashed; font-size: 12px; }
.v2m-chip { display: inline-block; padding: 4px 9px; border-radius: 6px; font-size: 12px;
  line-height: 1.35; background: #fff; border: 1px solid var(--ink-100);
  color: var(--ink-400); }
.v2m-chip.has { border-color: var(--ink-900); color: var(--ink-900); font-weight: 600; }
a.v2m-chip.has:hover { background: var(--ink-900); color: #fff; }
.v2m-chip.ext { border-style: dashed; color: var(--ink-300); }
a.v2m-chip.ext { color: var(--ink-400); }
.v2m-legend { margin: 14px 2px 0; display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-300); }
.v2x-scard.pend { border-style: dashed; }
.v2x-scard .ty.ext { background: var(--ink-50); color: var(--ink-400); }

/* Live Demo 목록 — 다중 솔루션 데모 */
.demo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 12px; margin-bottom: 26px; }
.demo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.demo-row b { font-size: 15px; color: var(--ink-900); }