@charset "utf-8";

/**
 * 기술 체계 띠 — 핵심 기술 지면(PC #tech · 모바일 /mobile/sub/content0102.php) 공용.
 * 화면은 sub/_techmap_view.php, 동작은 js/dair-techmap.js, 데이터는 sub/_techmap.php (자동 생성).
 *
 * 색·구도는 ../about 의 체계도(웹판)와 같다. 최종 기술 → 전용 기술 → 공통 층 → 기반 기술 순으로 쌓고,
 * 아래 층이 위 층의 기반이 된다. 값을 이 파일에 모아 두었다 — 지면별 스타일이 갈라지지 않게.
 *
 * 상세 설명은 접어 두고 이름만 보인다 (사용자 지시 2026-10-27). 마우스를 올리거나 누르면 그 상자가 펼쳐진다.
 *   · 올림(hover:hover) · 키보드 초점(:focus-visible) — CSS. 누름(터치) — js/dair-techmap.js 가 .is-open 을 바꾼다.
 *   · 접힌 설명은 display:none 이 아니라 높이 0 + visibility 로 접는다 — 펼침에 움직임을 주고, 스크립트가 없어도 올림으로 펼쳐진다.
 *   · 상자는 두 단계다 (data-tm-box="1" 층·묶음·카드, "2" 그 안의 기술). 가장 안쪽 상자만 펼쳐진다 — 칩에 올렸을 때 묶음 설명까지 열리지 않게.
 *
 * 이름표(왼쪽 칸)는 오른쪽 정렬이다 (사용자 지시 2026-10-27) — 글자와 막대가 내용 칸 가장자리에 붙는다.
 *
 * 폭 규칙 : 1140px 이하는 이름표를 내용 위로 올려 왼쪽 정렬로 하고, 1080px 이하는 카드·묶음을 두 칸·한 칸씩 쌓고, 560px 이하는 최종 기술도 한 칸이다.
 * 영어·독일어처럼 긴 언어도 칸이 늘어나게 grid minmax(0,…) 와 줄바꿈을 허용한다.
 */

.tm {
	--tm-navy: #152c4e;
	--tm-gold: #b8862b;
	--tm-band: #f4f5f7;
	--tm-domain: #f7f3ec;
	--tm-base: #eceef1;
	--tm-border: #d8dde4;
	--tm-hover: #7cc9e6;
	--tm-ink: #1f2937;
	--tm-soft: #4a5560;
	--tm-faint: #667080;
	color: var(--tm-ink);
	font-size: 16px;
	line-height: 1.6;
}
.tm *, .tm *:before, .tm *:after { box-sizing: border-box; }
/* 초기화는 특이도 0 으로 둔다 — 아래 규칙의 padding·margin 이 이것에 덮이지 않게 */
:where(.tm) :where(p, ul, ol, h4) { margin: 0; padding: 0; }
:where(.tm) :where(ul, ol) { list-style: none; }
.tm [id] { scroll-margin-top: 110px; }

/* 머리 문장 */
.tm-lead { font-size: 18px; line-height: 1.75; color: var(--tm-soft); word-break: keep-all; margin-bottom: 10px; }
.tm-lead { margin-bottom: 26px; }

/* ── 층 한 줄 — 왼쪽 이름표(오른쪽 정렬), 오른쪽 내용 ─────────────── */
.tm-band { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.tm-label { position: relative; align-self: center; padding: 2px 14px 2px 0; text-align: right; }
.tm-label:before { content: ''; position: absolute; right: 0; top: 50%; width: 3px; height: 34px; margin-top: -17px;
	border-radius: 2px; background: var(--tm-navy); }
.tm-label-t { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--tm-navy); word-break: keep-all;
	/* 독일어처럼 긴 합성어는 이름표 칸(200px)보다 길 수 있다 — 낱말 중간에서 어색하게 끊기지 않게 하이픈으로 나눈다 */
	-webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.tm-label-en { display: block; margin-top: 2px; font-size: 12px; color: var(--tm-faint); }
.tm-body { min-width: 0; padding: 12px; border-radius: 10px; background: var(--tm-band); }

/* ── 펼치는 단추 — 상자 안의 이름 글자가 단추다 ───────────────────── */
.tm-toggle { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit;
	font: inherit; text-align: inherit; line-height: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tm-toggle:focus-visible { outline: 2px solid var(--tm-gold); outline-offset: 2px; border-radius: 4px; }
[data-tm-box] { cursor: pointer; }
/* 펼칠 수 있다는 표식 — 아래로 향한 꺾쇠, 펼치면 위로 */
.tm-final-t .tm-toggle:after, .tm-tile-t .tm-toggle:after, .tm-group-t .tm-toggle:after,
.tm-label-t:before, .tm-item > .tm-toggle:after { content: ''; display: inline-block; width: 7px; height: 7px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .65;
	transform: translateY(-3px) rotate(45deg); transition: transform .25s ease; }
.tm-item > .tm-toggle:after { width: 5px; height: 5px; margin-left: 7px; border-width: 1.5px; }
.tm-label-t:before { margin-right: 9px; }
.tm-label:not(:has(.tm-toggle)) .tm-label-t:before { display: none; }   /* 펼치지 않는 이름표에는 꺾쇠가 없다 */
.tm-final-t .tm-toggle:after, .tm-tile-t .tm-toggle:after, .tm-group-t .tm-toggle:after { margin-left: 9px; }

/* ── 접힌 설명 ─────────────────────────────────────────────────── */
.tm-more { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
	transition: grid-template-rows .28s ease, opacity .2s ease, visibility 0s linear .28s; }
.tm-more-in { min-height: 0; overflow: hidden; }

/* 1단계 상자의 설명 — 누름(.is-open) · 키보드 초점 · (마우스 기기에서) 올림. 올림은 가장 안쪽 상자만 받는다 */
[data-tm-box="1"].is-open .tm-more.tm-lv1,
[data-tm-box="1"]:has(.tm-toggle.tm-lv1:focus-visible) .tm-more.tm-lv1 { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
/* 2단계 상자(기술 하나)의 설명 */
[data-tm-box="2"].is-open > .tm-more,
[data-tm-box="2"]:has(> .tm-toggle:focus-visible) > .tm-more { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
@media (hover: hover) {
	[data-tm-box="1"]:hover:not(:has([data-tm-box="2"]:hover)) .tm-more.tm-lv1,
	[data-tm-box="2"]:hover > .tm-more { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
}
/* 펼친 상자의 꺾쇠는 위로 — 올림으로 펼쳤을 때도 같이 돌아간다 (의사 요소는 :is() 안에 넣을 수 없어 풀어 쓴다) */
[data-tm-box="1"].is-open .tm-toggle.tm-lv1:after, [data-tm-box="1"].is-open .tm-label-t:before,
[data-tm-box="1"]:has(.tm-toggle.tm-lv1:focus-visible) .tm-toggle.tm-lv1:after,
[data-tm-box="1"]:has(.tm-toggle.tm-lv1:focus-visible) .tm-label-t:before,
[data-tm-box="2"].is-open > .tm-toggle:after,
[data-tm-box="2"]:has(> .tm-toggle:focus-visible) > .tm-toggle:after { transform: translateY(1px) rotate(-135deg); }
@media (hover: hover) {
	[data-tm-box="1"]:hover:not(:has([data-tm-box="2"]:hover)) .tm-toggle.tm-lv1:after,
	[data-tm-box="1"]:hover:not(:has([data-tm-box="2"]:hover)) .tm-label-t:before,
	[data-tm-box="2"]:hover > .tm-toggle:after { transform: translateY(1px) rotate(-135deg); }
}
@media (prefers-reduced-motion: reduce) { .tm-more, .tm-toggle:after, .tm-label-t:before { transition: none; } }
@media print { .tm-more { grid-template-rows: 1fr; opacity: 1; visibility: visible; } }

/* ── 최종 기술 — 이름(남색 머리) 아래에 용도 ─────────────────────── */
.tm-top .tm-body { padding: 0; background: none; }
/* 카드가 펼쳐져도 이름표는 머리 줄 높이에 둔다 — 안 그러면 펼칠 때마다 이름표가 아래로 끌려 내려간다 */
.tm-top .tm-label { align-self: start; margin-top: 22px; }
.tm-finals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tm-s2 { grid-column: span 2; }
.tm-final { overflow: hidden; border: 1px solid var(--tm-border); border-radius: 10px; background: #fff;
	box-shadow: 0 3px 0 rgba(21, 44, 78, .12); transition: border-color .2s, box-shadow .2s; }
.tm-final-t { background: var(--tm-navy); color: #fff; }
.tm-final-t .tm-toggle { position: relative; display: flex; align-items: center; justify-content: center; min-height: 84px;
	padding: 16px 10px 30px; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.3; word-break: keep-all;
	-webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* 꺾쇠는 글자 옆이 아니라 카드 아래 가운데에 둔다 — 좁은 카드에서 긴 이름(독일어 「Photovoltaikmodulen」)이 폭을 다 쓰게 */
.tm-final-t .tm-toggle:after { position: absolute; left: 50%; bottom: 13px; margin-left: -4px; }
:lang(de) .tm-final-t .tm-toggle { font-size: 16.5px; }  /* 「Photovoltaikmodulen」이 한 칸(192px)에 들어가게 */
.tm-final-d { padding: 14px; font-size: 15px; line-height: 1.7; word-break: keep-all; }

/* ── 전용 기술 — 최종 기술과 같은 다섯 칸에 놓는다 ────────────────── */
.tm-domain .tm-body { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; background: var(--tm-domain); align-items: start; }
.tm-tile { padding: 12px 14px; border: 1px solid var(--tm-border); border-radius: 6px; background: #fff; text-align: center;
	transition: border-color .2s; }
.tm-tile-t { font-size: 16px; font-weight: 700; line-height: 1.4; word-break: keep-all; }
.tm-tile-d { padding-top: 8px; font-size: 14px; line-height: 1.55; color: var(--tm-soft); word-break: keep-all; }
.tm-tile-s { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--tm-faint); word-break: keep-all; }
.tm-tile-d + .tm-tile-s { margin-top: 6px; }

/* ── 공통 층 — 이름표를 펼치면 용도 한 줄, 그 아래 기술 이름 ──────── */
.tm-layer .tm-body { transition: background .2s; }
.tm-purpose { padding-bottom: 8px; font-size: 14px; line-height: 1.55; color: var(--tm-soft); word-break: keep-all; }
.tm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: start; }
.tm-tile-li { border: 1px solid var(--tm-border); border-radius: 6px; background: #fff; transition: border-color .2s; }
.tm-tile-li > .tm-toggle { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px;
	text-align: center; font-size: 15.5px; line-height: 1.4; word-break: keep-all; }
.tm-item-d { padding: 0 12px 12px; font-size: 13.5px; line-height: 1.6; color: var(--tm-soft); word-break: keep-all; }

/* ── 기반 기술 — 묶음마다 이름·(펼치면 용도)·기술 칩 ─────────────── */
.tm-groups { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; background: var(--tm-base); align-items: start; }
/* 다섯 묶음을 3 + 2 로 놓는다 — 앞 셋은 기술이 적어 좁고, 소프트웨어 개발(12)과 통신·데이터는 넓게 */
.tm-group { grid-column: span 2; min-width: 0; padding: 12px; border: 1px solid var(--tm-border); border-radius: 6px;
	background: #fff; transition: border-color .2s; }
#tm-sw, #tm-comm { grid-column: span 3; }
.tm-group-t { font-size: 15px; font-weight: 700; color: var(--tm-navy); }
.tm-group-d { padding-top: 2px; font-size: 13.5px; line-height: 1.55; color: var(--tm-soft); word-break: keep-all; }
.tm-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; align-items: start; margin-top: 10px; }
.tm-chip { border: 1px solid transparent; border-radius: 4px; background: var(--tm-band); transition: border-color .2s; }
.tm-chip > .tm-toggle { padding: 5px 10px; text-align: center; font-size: 14px; line-height: 1.4; }
.tm-chip .tm-item-d { padding: 0 10px 9px; font-size: 13px; line-height: 1.55; }
/* 한국어보다 낱말이 긴 언어는 칩 칸을 넓힌다 — 좁은 칸에서 낱말이 중간에 끊기지 않게 (독일어 「Punktwolkenregistrierung」 등).
   분철 사전이 있는 브라우저는 하이픈으로 나누고, 없으면 칸이 넓어 한 줄에 들어간다 */
.tm-chip > .tm-toggle, .tm-tile-li > .tm-toggle { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.tm-final-d, .tm-tile-d, .tm-item-d, .tm-group-d, .tm-purpose { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
:lang(de) .tm-chips, :lang(fr) .tm-chips, :lang(es) .tm-chips, :lang(pt) .tm-chips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 184px), 1fr)); }

/* 올리면 테두리가 옅은 하늘색으로 — 어느 상자가 펼쳐지는지 보이게 */
@media (hover: hover) {
	.tm-final:hover, .tm-tile:hover, .tm-group:hover, .tm-item:hover { border-color: var(--tm-hover); }
	.tm-layer:hover:not(:has(.tm-item:hover)) .tm-body { background: #eaf0f6; }
}
.tm-final.is-open, .tm-tile.is-open, .tm-group.is-open, .tm-item.is-open { border-color: var(--tm-hover); }
.tm-layer.is-open .tm-body { background: #eaf0f6; }

/* 읽는 법 */
.tm-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 18px;
	font-size: 13.5px; color: var(--tm-faint); }
.tm-legend-t { display: inline-flex; align-items: center; gap: 10px; }
.tm-up { position: relative; display: inline-block; width: 2px; height: 14px; background: var(--tm-gold); }
.tm-up:before { content: ''; position: absolute; left: -4px; top: -2px; border: 5px solid transparent;
	border-top: 0; border-bottom: 7px solid var(--tm-gold); }

/* 5대 핵심 기술에서 이 띠로 건너오는 연결 (.tm 밖에서도 쓴다) */
.tm-links { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e2e8f0; font-size: 15px; line-height: 1.5; }
.tm-links-t { display: inline-block; margin: 0 10px 6px 0; font-weight: 700; color: #4a5560; }
.tm-links a { display: inline-block; margin: 0 6px 6px 0; padding: 4px 12px; border-radius: 999px; background: #eef6fb;
	color: #086a94; font-weight: 600; text-decoration: none; }
.tm-links a:hover, .tm-links a:focus-visible { background: #dcedf7; text-decoration: underline; }

/* ── 좁은 폭 ─────────────────────────────────────────────────── */
/* 1140px 이하 — 이름표(200px 칸)를 내용 위로 올린다. 내용이 한 줄 전체 폭을 쓰니 다섯 칸 카드가 좁아지지 않는다.
   (이름표가 위로 올라오면 오른쪽 정렬이 어색하다 — 왼쪽 정렬로 되돌리고 막대도 왼쪽에 둔다) */
@media (max-width: 1140px) {
	.tm-band { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.tm-label, .tm-top .tm-label { align-self: start; margin-top: 0; padding: 2px 0 2px 14px; text-align: left; }
	.tm-label:before { right: auto; left: 0; }
}
@media (max-width: 1080px) {  /* 5칸 카드는 이보다 좁으면 독일어 낱말이 안 들어간다 (측정 2026-10-27) */
	.tm-finals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tm-s2 { grid-column: span 2; }
	.tm-domain .tm-body { grid-template-columns: minmax(0, 1fr); }
	.tm-domain .tm-tile { grid-column: auto !important; grid-row: auto !important; }  /* 칸 배치는 PC 만 */
	.tm-lead { font-size: 17px; }
	.tm-groups { grid-template-columns: minmax(0, 1fr); }
	.tm-group, #tm-sw, #tm-comm { grid-column: auto; }
}
@media (max-width: 560px) {
	.tm-finals { grid-template-columns: minmax(0, 1fr); }
	.tm-s2 { grid-column: auto; }
	.tm-final-t .tm-toggle { min-height: 0; padding: 14px 10px 30px; }
	.tm-tiles { grid-template-columns: minmax(0, 1fr); }
}