/**
 * landscape.css — AI 밸류체인 지형도 (사이트 레이아웃 편입판, 2026-08-17)
 *
 * 별도 페이지 시절의 자체 팔레트를 버리고 사이트 토큰(_variables.css)에 별칭으로 접속한다.
 * 규율: 이모지 0 · 화살표 0 · border-left 0 · 무채 + 액센트 1색 · 역할은 선 스타일로.
 */

.ls-root {
    --bg: var(--bg-primary);
    --surface: var(--bg-card);
    --line: var(--border);
    --line2: var(--border);
    --ink: var(--text-primary);
    --mute: var(--text-secondary);
    --sub: var(--text-tertiary);
    --warm: var(--accent);
    --warm-bg: var(--accent-dim);
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    line-height: 1.75;
}

.ls-root .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.ls-root h1 { font-size: var(--fs-lg); line-height: 1.4; margin: 2px 0 8px; font-weight: 700; letter-spacing: -.01em; }
.ls-root .lede { font-size: var(--fs-sm); color: var(--mute); max-width: 60ch; }
.ls-root .lang { font-family: var(--mono); font-size: var(--fs-2xs); padding: 4px 11px; border-radius: 14px; border: 1px solid var(--line); color: var(--mute); text-decoration: none; white-space: nowrap; }
.ls-root .lang:hover { border-color: var(--warm); color: var(--warm); }
.ls-root .meta { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--mute); margin: 12px 0 4px; display: flex; gap: 14px; }
.ls-root .meta b { color: var(--ink); }

/* 섹션 헤더 — 경제리포트 .sech 규격 */
.ls-root .sech { font-size: var(--fs-xs); font-weight: 600; color: var(--warm); margin: 26px 0 10px; letter-spacing: .02em; display: flex; gap: 10px; align-items: baseline; }
.ls-root .sech .sub { font-family: var(--mono); font-size: var(--fs-3xs); color: var(--sub); font-weight: 400; }

/* 거시 국면 — 정본은 홈 현황판, 여기선 참조용 한 줄 배너 */
.ls-root .regime-mini { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .15s; }
.ls-root .regime-mini:hover { border-color: var(--warm); }
.ls-root .regime-mini__k { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .06em; text-transform: uppercase; color: var(--warm); }
.ls-root .regime-mini__ln { font-size: var(--fs-sm); font-weight: 600; }
.ls-root .regime-mini__d { font-family: var(--mono); font-size: var(--fs-3xs); color: var(--sub); margin-left: auto; }

/* 서버 렌더 기본형 격자 (JS 미가동 시) */
.ls-root .terrain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; }
.ls-root .tier .th { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--sub); letter-spacing: .06em; text-transform: uppercase; padding-bottom: 7px; margin-bottom: 9px; border-bottom: 1px solid var(--line); }
.ls-root .cell { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 9px; margin-bottom: 9px; cursor: pointer; color: inherit; font: inherit; transition: border-color .15s, background .15s; }
.ls-root .cell:hover { border-color: var(--warm); }
.ls-root .cell[aria-selected="true"] { border-color: var(--warm); background: var(--warm-bg); }
.ls-root .cell .nm { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.01em; }
.ls-root .cell .ct { font-family: var(--mono); font-size: var(--fs-3xs); color: var(--sub); margin-left: 5px; }
.ls-root .cell .fl { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 1080px) { .ls-root .terrain { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .ls-root .terrain { grid-template-columns: 1fr; } }

/* 기업 칩 — 국적은 라벨, 역할은 선 스타일 */
.ls-root .chip { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--mono); font-size: var(--fs-2xs); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--mute); white-space: nowrap; }
.ls-root .chip .cc { font-size: .82em; letter-spacing: .06em; color: var(--sub); }
.ls-root .chip[data-r="primary"] { color: var(--ink); border-color: var(--text-tertiary); }
.ls-root .chip[data-r="partial"] { border-style: dashed; }
.ls-root .chip[data-r="entering"] { border-style: dotted; color: var(--sub); }

/* 도식 컨테이너 */
.ls-root .map-wrap { position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px; overflow: hidden; }
.ls-root .map-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-2xs); color: var(--sub); margin-top: 9px; }
.ls-root .map-legend b { color: var(--mute); font-weight: 600; }
.ls-root .map-note { font-size: var(--fs-xs); color: var(--mute); margin: 8px 0 0; max-width: 74ch; line-height: 1.7; }

/* 상세 */
.ls-root .detail { scroll-margin-top: 16px; }
.ls-root .detail .hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 3px; }
.ls-root .detail h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.ls-root .detail .path { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--sub); }
.ls-root .detail .dd { font-size: var(--fs-sm); color: var(--mute); margin-bottom: 14px; }
.ls-root .firm { padding: 13px 0; border-top: 1px solid var(--line2); }
.ls-root .firm:first-of-type { border-top: 0; }
.ls-root .firm .r1 { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ls-root .firm .tk { font-family: var(--mono); font-size: var(--fs-md); font-weight: 600; }
.ls-root .firm .cn { font-size: var(--fs-sm); color: var(--mute); }
.ls-root .firm .rl { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--sub); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
.ls-root .firm .fcf { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--sub); }
.ls-root .firm .st { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--mute); border: 1px dashed var(--line); border-radius: 4px; padding: 0 6px; }
.ls-root .firm .why { font-size: var(--fs-sm); color: var(--mute); margin-top: 5px; max-width: 74ch; }
.ls-root .firm .why em { font-family: var(--mono); font-size: var(--fs-3xs); color: var(--sub); font-style: normal; letter-spacing: .04em; text-transform: uppercase; margin-right: 7px; }
.ls-root .firm .ana { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-family: var(--mono); font-size: var(--fs-2xs); color: var(--sub); }
.ls-root .firm .ana .tag { border: 1px solid var(--line2); border-radius: 4px; padding: 1px 6px; }
.ls-root .firm .ana .tag b { color: var(--mute); font-weight: 600; }
.ls-root .firm .go { font-size: var(--fs-2xs); color: var(--warm); text-decoration: none; border-bottom: 1px solid transparent; }
.ls-root .firm .go:hover { border-bottom-color: var(--warm); }
.ls-root .hint { font-size: var(--fs-sm); color: var(--sub); }
.ls-root .foot { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-2xs); color: var(--sub); max-width: 74ch; line-height: 1.7; }

/* ── 인터랙션 레이어 (lsx) — 파급·흐름·팬줌 (2026-08-17) ─────────────
   orthomap 의 is-dim/is-hot 과 독립인 자체 클래스. 색을 더하지 않고
   투명도·선 굵기·움직임으로만 말한다. */

/* 파급 모드: 관련 없는 것은 가라앉는다 */
.ls-root .lsx-mode .amn  { transition: opacity .28s ease; transition-delay: var(--lsxd, 0s); }
.ls-root .lsx-mode .ame,
.ls-root .lsx-mode .amel { transition: opacity .28s ease; transition-delay: var(--lsxd, 0s); }
.ls-root .lsx-mode .amn:not(.lsx-keep)  { opacity: .13; }
.ls-root .lsx-mode .ame:not(.lsx-on)    { opacity: .07; }
.ls-root .lsx-mode .amel:not(.lsx-on)   { opacity: .07; }
.ls-root .lsx-mode .amn.lsx-src rect { stroke-width: 2.5; }

/* 흐름 애니메이션 — 방향은 색이 아니라 움직임으로 */
.ls-root .ame.lsx-on { stroke-dasharray: 9 7; animation: lsx-flow .85s linear infinite; }
@keyframes lsx-flow { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) {
    .ls-root .ame.lsx-on { animation: none; stroke-dasharray: none; }
    .ls-root .lsx-mode .amn, .ls-root .lsx-mode .ame, .ls-root .lsx-mode .amel { transition: none; }
}

/* 팬·줌 컨트롤 — 좌하단 mono 버튼 3개 */
.ls-root .lsx-ctl { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; z-index: 5; }
.ls-root .lsx-ctl button { font-family: var(--mono); font-size: var(--fs-xs); line-height: 1; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--mute); cursor: pointer; }
.ls-root .lsx-ctl button:hover { border-color: var(--warm); color: var(--warm); }
.ls-root .lsx-hintbar { position: absolute; right: 14px; bottom: 14px; font-family: var(--mono); font-size: var(--fs-3xs); color: var(--sub); pointer-events: none; z-index: 5; }
.ls-root .map-wrap.lsx-panning { cursor: grabbing; }
.ls-root .map-wrap .ammap__svg { touch-action: pan-y; }
@media (max-width: 720px) { .ls-root .lsx-hintbar { display: none; } }

/* ── 칸 모달 — 해설 · 흐름 위치 · 기업 · 최신 동향 (2026-08-17) ───────── */

.ls-root .ls-modal { position: fixed; inset: 0; margin: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); padding: 0; width: min(720px, calc(100vw - 32px)); height: fit-content; max-height: min(84vh, 880px); font-family: var(--sans); box-shadow: 0 24px 64px rgba(26, 24, 20, .18); display: flex; flex-direction: column; }
.ls-root .ls-modal:not([open]) { display: none; }
.ls-root .ls-modal::backdrop { background: rgba(26, 24, 20, .45); backdrop-filter: blur(2px); }

/* 헤드 — 계층(아이브로) / 이름 / 해설. 스크롤 중에도 상단 고정 */
.ls-root .ls-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); background: var(--surface); border-radius: 14px 14px 0 0; flex: 0 0 auto; }
.ls-root .ls-modal__eyebrow { display: block; font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .08em; text-transform: uppercase; color: var(--warm); margin-bottom: 3px; }
.ls-root .ls-modal__head h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.ls-root .ls-modal__desc { font-size: var(--fs-sm); color: var(--mute); margin-top: 5px; line-height: 1.6; max-width: 52ch; }
.ls-root .ls-modal__close { font-family: var(--mono); font-size: var(--fs-2xs); padding: 5px 13px; border: 1px solid var(--line); border-radius: 14px; background: none; color: var(--mute); cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.ls-root .ls-modal__close:hover { border-color: var(--warm); color: var(--warm); }

/* 본문 — 스크롤바는 숨기되 스크롤은 산다 */
.ls-root .ls-modal__body { padding: 16px 22px 22px; overflow-y: auto; flex: 1 1 auto; line-height: 1.75; scrollbar-width: none; }
.ls-root .ls-modal__body::-webkit-scrollbar { display: none; }
.ls-root .ls-modal__sech { margin: 20px 0 10px; }

/* 요약 스트립 — 숫자는 mono, 라벨은 낮게 */
.ls-root .ls-modal__stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--fs-2xs); color: var(--sub); padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.ls-root .ls-modal__stats b { font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink); font-weight: 600; margin-right: 2px; }

/* 흐름 3열 — 받는 곳 · 이 칸 · 보내는 곳. 방향은 자리가 말한다(화살표 ❌) */
.ls-root .ls-flow3 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin: 12px 0 4px; align-items: start; }
.ls-root .ls-flow3__col { min-width: 0; }
.ls-root .ls-flow3__col em { display: block; font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .07em; text-transform: uppercase; color: var(--sub); font-style: normal; margin-bottom: 6px; }
.ls-root .ls-flow3__col--here { text-align: center; padding: 0 6px; }
.ls-root .ls-flow3__here { display: inline-block; font-size: var(--fs-sm); font-weight: 700; padding: 6px 14px; border: 1.5px solid var(--warm); border-radius: 10px; color: var(--ink); background: var(--warm-bg); white-space: nowrap; }
.ls-root .ls-flow3__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ls-root .ls-flow3__none { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--sub); }
.ls-root .ls-flow__chip { font-family: var(--mono); font-size: var(--fs-2xs); padding: 3px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--mute); cursor: pointer; text-align: left; }
.ls-root .ls-flow__chip span { color: var(--sub); font-size: .85em; }
.ls-root .ls-flow__chip:hover { border-color: var(--warm); color: var(--warm); }
@media (max-width: 560px) { .ls-root .ls-flow3 { grid-template-columns: 1fr; } .ls-root .ls-flow3__col--here { text-align: left; } }

/* 모달 안 기업 행은 '줄'이 아니라 '카드' — 위계가 보이게 */
.ls-root .ls-modal .firm { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 13px 15px; margin-bottom: 9px; border-top: 1px solid var(--line); }
.ls-root .ls-modal .firm .why { margin-top: 7px; }
.ls-root .ls-modal .firm .rc { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line2); }

/* 최신 동향 — 기업 행 하단 */
.ls-root .firm .rc { margin-top: 7px; display: grid; gap: 3px; font-size: var(--fs-xs); }
.ls-root .firm .rc em { font-family: var(--mono); font-size: var(--fs-3xs); color: var(--sub); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.ls-root .firm .rc-a { color: var(--mute); text-decoration: none; border-bottom: 1px solid transparent; line-height: 1.55; }
.ls-root .firm .rc-a:hover { color: var(--warm); border-bottom-color: var(--warm); }
.ls-root .firm .rc-d { font-family: var(--mono); font-size: var(--fs-3xs); color: var(--sub); }
.ls-root .firm .rc--none { font-size: var(--fs-2xs); color: var(--sub); }
.ls-root .firm .rc-note { display: block; font-size: var(--fs-xs); line-height: 1.65; color: var(--mute); }
.ls-root .firm .rc-pos { display: block; margin-top: 4px; font-size: var(--fs-2xs); line-height: 1.55; color: var(--sub); }

/* ── 도식(SVG) 글자 상향 (2026-08-17 주인님 "지형도 글씨 너무 작음") ──────
   viewBox 축소 렌더로 12.5px 가 화면에선 ~9px 로 보인다. vendor(orthomap.css)는
   성신DP 공유 자산이라 무수정 — 여기서 스코프 오버라이드만 한다. */
.ls-root .amn__t  { font-size: 15.5px; }
.ls-root .amn__s  { font-size: 11.5px; }
.ls-root .amn__m  { font-size: 11px; }
.ls-root .amel__t { font-size: 11px; }
.ls-root .amel__t.is-cash { font-size: 12px; }
.ls-root .amb__t  { font-size: 13px; }
.ls-root .ammap__hint { font-size: var(--fs-2xs); }
.ls-root .ammap__btn  { font-size: var(--fs-2xs); }