/* =========================================================================
   디자인 2 — "듣는 신문" (The Listening Paper) · 2026-10-17
   body.kt-d2 일 때만 적용(미리보기 ?kt_design=2). 섹션 색 --sec 은 inc/kt-design.php 가 넣음.
   ① 머리 띠: 짙은 청록 + 로고 그라데이션 선(청록→연두)   ② 섹션 제목 앞 '음파' 표시
   ③ 섹션마다 뜻이 있는 색(환경=ESG 초록 …)               ④ 둥근 조약돌 입력칸·알약 버튼·초점 빛무리
   ⑤ 사진 카드 둥근 모서리·떠오름                          ⑥ 기사 읽기 진행 줄(섹션 색)
   ⑦ 페이지 넘김 전환(지원 브라우저만)                      ⑧ 움직임 줄이기 설정 존중
   ========================================================================= */
body.kt-d2 {
	--kt-brand: #0C7673; --kt-brand-2: #12A3A3; --kt-lime: #8CC63F;
	--kt-deep: #07383A; --kt-deep-2: #0B4F4D;
	--kt-wave: linear-gradient(90deg, #0C7673 0%, #12A3A3 45%, #8CC63F 100%);
	--kt-accent: #0C7673; --kt-link: #0A6B96; --kt-dark: #07383A;
	--sec: var(--kt-brand);
	--kt-r: 14px; --kt-r-s: 10px;
}
@view-transition { navigation: auto; }
body.kt-d2 ::selection { background: #c9ecdf; color: #062b2c; }
body.kt-d2 a:focus-visible, body.kt-d2 button:focus-visible { outline: 3px solid color-mix(in srgb, var(--sec) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

/* ① 머리 띠 ------------------------------------------------------------ */
body.kt-d2 .kt-util { background: linear-gradient(100deg, var(--kt-deep) 0%, var(--kt-deep-2) 62%, #1c5a37 100%); color: #d6ece7; position: relative; }
body.kt-d2 .kt-util::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--kt-wave); }
body.kt-d2 .kt-util a { color: #e8f5f2; }
body.kt-d2 .kt-util a:hover { color: #fff; text-shadow: 0 0 12px rgba(140,198,63,.6); }
body.kt-d2 .kt-util-date { color: #a9cfc8; }
body.kt-d2 .kt-lang-btn { border-color: rgba(232,245,242,.35); background: rgba(255,255,255,.06); }
body.kt-d2 .kt-lang-btn:hover { background: rgba(255,255,255,.14); }
body.kt-d2 .kt-lang-quick a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 var(--kt-lime); }

/* 제호: 구호 아래 작은 음파 */
body.kt-d2 .kt-mast { padding: 26px 0 18px; position: relative; }
body.kt-d2 .kt-mast::after { content: ""; display: block; width: 44px; height: 12px; margin: 10px auto 0; opacity: .9;
	background:
		linear-gradient(var(--kt-brand), var(--kt-brand)) 0 50% / 4px 6px no-repeat,
		linear-gradient(var(--kt-brand-2), var(--kt-brand-2)) 10px 50% / 4px 12px no-repeat,
		linear-gradient(#5fb86a, #5fb86a) 20px 50% / 4px 8px no-repeat,
		linear-gradient(var(--kt-lime), var(--kt-lime)) 30px 50% / 4px 12px no-repeat,
		linear-gradient(var(--kt-lime), var(--kt-lime)) 40px 50% / 4px 5px no-repeat;
	height: 14px; border-radius: 2px; animation: kt-voice 3.6s ease-in-out infinite; }   /* 2026-10-17: 2.4초 → 3.6초(더 천천히, 사용자 요청) */
/* 음파가 말하듯 오르내림(2026-10-17 요청 — "살아있는 느낌"). 막대마다 다른 박자, 움직임 줄이기 설정이면 멈춤(아래) */
@keyframes kt-voice {
	0%, 100% { background-size: 4px 6px, 4px 12px, 4px 8px, 4px 12px, 4px 5px; }
	15%      { background-size: 4px 10px, 4px 7px, 4px 13px, 4px 6px, 4px 9px; }
	30%      { background-size: 4px 5px, 4px 14px, 4px 6px, 4px 11px, 4px 6px; }
	45%      { background-size: 4px 12px, 4px 9px, 4px 14px, 4px 7px, 4px 12px; }
	60%      { background-size: 4px 7px, 4px 13px, 4px 9px, 4px 14px, 4px 6px; }
	75%      { background-size: 4px 11px, 4px 6px, 4px 12px, 4px 9px, 4px 10px; }
	88%      { background-size: 4px 5px, 4px 11px, 4px 7px, 4px 13px, 4px 5px; }
}
body.kt-d2 .kt-mast:hover::after { animation-duration: 1.8s; }   /* 로고에 마우스를 올리면 조금 더 힘차게 */

/* 섹션 메뉴 */
body.kt-d2 .kt-nav { border-top: 0; box-shadow: 0 1px 0 var(--kt-line), 0 6px 18px -14px rgba(7,56,58,.45); backdrop-filter: saturate(1.4) blur(10px); background: rgba(255,255,255,.9); }
body.kt-d2 .kt-nav::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--kt-wave); }
body.kt-d2 .kt-nav li a { position: relative; transition: color .18s; }
body.kt-d2 .kt-nav li a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--sec); transform: scaleX(0); transition: transform .22s ease; }
body.kt-d2 .kt-nav li a:hover, body.kt-d2 .kt-nav li.on a { color: var(--sec); }
body.kt-d2 .kt-nav li a:hover::after, body.kt-d2 .kt-nav li.on a::after { transform: scaleX(1); }
body.kt-d2 .kt-nav li.on a { box-shadow: none; }
body.kt-d2 .kt-ico-btn { border-radius: 999px; }
body.kt-d2 .kt-ico-btn:hover { background: #e7f4f1; color: var(--kt-brand); }

/* 코너 줄: 카드처럼 */
body.kt-d2 .kt-corners { border-bottom: 0; padding-top: 10px; padding-bottom: 4px; }   /* 좌우 여백(kt-wrap)은 그대로 — 전엔 0 이라 1440 에서 본문보다 넓어 날개에 붙고 390 에서 화면 끝에 붙었다 */
body.kt-d2 .kt-corners ul { gap: 8px; }
body.kt-d2 .kt-corners li + li { border-left: 0; }
body.kt-d2 .kt-corners a { border-radius: var(--kt-r); background: #f4f8f7; transition: background .18s, transform .18s; }
body.kt-d2 .kt-corners a:hover { background: #e3f2ee; transform: translateY(-2px); }
body.kt-d2 .kt-corners b { color: var(--kt-deep-2); }

/* ② 섹션 제목 + 음파 표시 ------------------------------------------------ */
body.kt-d2 .kt-h { color: var(--sec, var(--kt-ink)); align-items: center; }
body.kt-d2 .kt-h:not([data-sec]) { color: var(--kt-ink); }
body.kt-d2 .kt-h::before { content: ""; flex: none; order: -1; width: 22px; height: 18px; margin-right: -2px;
	background:
		linear-gradient(var(--sec), var(--sec)) 0 50% / 3px 8px no-repeat,
		linear-gradient(var(--sec), var(--sec)) 6px 50% / 3px 18px no-repeat,
		linear-gradient(var(--sec), var(--sec)) 12px 50% / 3px 12px no-repeat,
		linear-gradient(var(--sec), var(--sec)) 18px 50% / 3px 6px no-repeat; opacity: .9; }
body.kt-d2 .kt-h { justify-content: flex-start; }
body.kt-d2 .kt-h a.more { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sec, var(--kt-brand)) 9%, #fff); color: var(--sec, var(--kt-sub)); font-weight: 600; }
body.kt-d2 .kt-h a.more:hover { background: var(--sec, var(--kt-brand)); color: #fff; }

/* ③ 키커(섹션 이름) — 섹션 색 + 점 */
body.kt-d2 .kt-kick { color: var(--sec, var(--kt-brand)); letter-spacing: .01em; }
body.kt-d2 .kt-kick::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 2px; }
body.kt-d2 .kt-titles li::before { color: var(--kt-brand); }

/* ⑤ 사진·카드 */
body.kt-d2 .kt-ph { border-radius: var(--kt-r-s); }
body.kt-d2 .kt-lead .kt-ph, body.kt-d2 .kt-mid .kt-ph { border-radius: var(--kt-r); }
body.kt-d2 a:hover > .kt-ph, body.kt-d2 a:hover .kt-ph { box-shadow: 0 10px 28px -16px rgba(7,56,58,.55); }
body.kt-d2 .kt-ph { transition: box-shadow .25s; }
body.kt-d2 a:hover .kt-t { color: var(--kt-deep-2); }

/* 많이 본 기사: 숫자에 로고 그라데이션 */
body.kt-d2 .kt-rank li::before { background: var(--kt-wave); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 기사제보 카드 */
body.kt-d2 .kt-tipcard { border-radius: var(--kt-r); background: linear-gradient(135deg, #eef8f5, #f4f9ec); border: 1px solid #d9ece5; }

/* ④ 버튼·입력칸 -------------------------------------------------------- */
body.kt-d2 .kt-btn,
body.kt-d2 .kt-search button, body.kt-d2 .kt-sfind button,
body.kt-d2 .kt-page .kt-art-body form :is(button, input[type=submit]) {
	border-radius: 999px; background: linear-gradient(120deg, var(--kt-brand), #0f8f7f 60%, #4f9e3a); color: #fff; box-shadow: 0 6px 16px -10px rgba(12,118,115,.9); transition: transform .15s, box-shadow .15s, filter .15s; }
body.kt-d2 .kt-btn:hover,
body.kt-d2 .kt-search button:hover, body.kt-d2 .kt-sfind button:hover,
body.kt-d2 .kt-page .kt-art-body form :is(button, input[type=submit]):hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 20px -10px rgba(12,118,115,.9); }
/* :is() 로 묶으면 안의 가장 무거운 선택자(기사 안 양식 칸) 무게가 검색칸에도 붙어 아래 알약 규칙을 이겼다(R11-7) → 선택자 목록으로 풀어 각자 제 무게 */
body.kt-d2 .kt-search input, body.kt-d2 .kt-sfind input, body.kt-d2 .kt-cmt textarea, body.kt-d2 .kt-cmt input[type=text], body.kt-d2 .kt-cmt input[type=email], body.kt-d2 .kt-page .kt-art-body form :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=date], select, textarea) {
	border: 1.5px solid #d3e1de; border-radius: var(--kt-r); background: #fbfdfc; transition: border-color .15s, box-shadow .2s, background .15s; }
body.kt-d2 :is(.kt-search input, .kt-sfind input) { border-radius: 999px; padding-inline: 18px; }
body.kt-d2 :is(.kt-search input, .kt-sfind input, .kt-cmt textarea, .kt-cmt input, .kt-page .kt-art-body form :is(input, select, textarea)):focus {
	outline: none; border-color: var(--kt-brand); background: #fff; box-shadow: 0 0 0 4px rgba(18,163,163,.16), 0 6px 18px -12px rgba(12,118,115,.6); }
body.kt-d2 .kt-search { background: linear-gradient(180deg, #f2f8f6, #fff); }
body.kt-d2 .kt-tabs { border-bottom-color: var(--sec); }
body.kt-d2 .kt-tabs a { transition: background .15s, color .15s, border-color .15s; }
body.kt-d2 .kt-tabs a:hover { border-color: var(--sec); color: var(--sec); }
body.kt-d2 .kt-tabs a[aria-current] { background: var(--sec); border-color: var(--sec); }
body.kt-d2 .kt-float-share a, body.kt-d2 .kt-float-share button { transition: background .15s, color .15s, transform .15s; }
body.kt-d2 .kt-float-share a:hover, body.kt-d2 .kt-float-share button:hover { background: var(--sec); border-color: var(--sec); color: #fff; transform: scale(1.06); }   /* 흰 아이콘(R11-6: 남색 위 청록 글자로 안 보이던 것) */

/* 섹션 화면 머리 */
body.kt-d2 .kt-sec-head h1 { color: var(--sec); display: flex; align-items: center; gap: 12px; }
body.kt-d2 .kt-sec-head h1::before { content: ""; flex: none; width: 30px; height: 26px;
	background:
		linear-gradient(var(--sec), var(--sec)) 0 50% / 4px 11px no-repeat,
		linear-gradient(var(--sec), var(--sec)) 8px 50% / 4px 26px no-repeat,
		linear-gradient(var(--sec), var(--sec)) 16px 50% / 4px 17px no-repeat,
		linear-gradient(var(--sec), var(--sec)) 24px 50% / 4px 8px no-repeat; }
body.kt-d2 .kt-sec-head:not(:has(.kt-tabs)) { border-bottom-color: var(--sec); }

/* 기사 화면 */
body.kt-d2 .kt-art-meta { border-top-color: var(--sec); }
body.kt-d2 .kt-crumb a { color: var(--sec); }
body.kt-d2 .kt-art-body a { color: var(--kt-link); text-decoration-color: color-mix(in srgb, var(--sec) 45%, transparent); text-underline-offset: 3px; }
/* ⑥ 읽기 진행 줄 */
body.kt-d2 .kt-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--sec), color-mix(in srgb, var(--sec) 55%, var(--kt-lime))); pointer-events: none; }
body.admin-bar.kt-d2 .kt-progress { top: 32px; }

/* 꼬리말 */
body.kt-d2 .kt-foot { background: linear-gradient(180deg, var(--kt-deep), #052628); color: #b9d6d0; position: relative; }
body.kt-d2 .kt-foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--kt-wave); }
body.kt-d2 .kt-foot a:hover { color: #fff; }
body.kt-d2 .kt-foot-h { color: #9fc9c1; border-bottom-color: rgba(185,214,208,.16); }   /* FOOT-1 */
body.kt-d2 .kt-foot-h::after { background: var(--kt-wave); width: 28px; }
body.kt-d2 .kt-foot-top { border-bottom-color: rgba(185,214,208,.16); }
body.kt-d2 .kt-foot-em a { color: #c5ea8f; }
html.kt-dark body.kt-d2 .kt-foot-h { color: #8fb9b2; }

/* 페이지 번호 */
body.kt-d2 .kt-pages :is(a, span) { border-radius: 999px; }
body.kt-d2 .kt-pages .current { background: var(--sec); border-color: var(--sec); color: #fff; }

/* 빈 화면(404·결과 없음) */
body.kt-d2 .kt-empty { border-radius: var(--kt-r); }

/* 좁은 화면(휴대폰) */
@media (max-width: 600px) {
	body.kt-d2 .kt-mast { padding: 16px 0 10px; }   /* 첫 화면에 기사가 더 보이게(머리 약 200px → 170px) */
	body.kt-d2 .kt-mast::after { margin-top: 6px; }
	body.kt-d2 .kt-h { flex-wrap: wrap; row-gap: 2px; }
	body.kt-d2 .kt-h small { order: 3; flex-basis: 100%; margin-inline-start: 26px; }   /* 건수(11,967 articles)는 둘째 줄로 — 제목이 두 줄로 꺾이지 않게 */
	body.kt-d2 .kt-corners ul { scroll-padding-inline: 16px; }
}

/* ⑧ 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	body.kt-d2 .kt-mast::after, body.kt-d2 .kt-h::before, body.kt-d2 .kt-sec-head h1::before { animation: none !important; }
	body.kt-d2 * { transition: none !important; }
	body.kt-d2 .kt-progress { display: none; }
}
@media print { body.kt-d2 .kt-progress { display: none; } }

/* 섹션 머리글 음파도 은은하게(2026-10-17 사용자 요청 — "살아있는 느낌")
   · 움직임 폭 ±2~3px, 5.2초로 느리게, 머리글마다 박자를 어긋나게(--vd, kt-design2.js)
   · 화면에 보이는 머리글만 움직임(.kt-live, IntersectionObserver) — 안 보이는 것은 멈춰 배터리·성능 아낌
   · 움직임 줄이기 설정이면 멈춤(위 @media) */
@keyframes kt-voice-h {
	0%, 100% { background-size: 3px 8px, 3px 18px, 3px 12px, 3px 6px; }
	25%      { background-size: 3px 11px, 3px 15px, 3px 15px, 3px 8px; }
	50%      { background-size: 3px 7px, 3px 18px, 3px 10px, 3px 10px; }
	75%      { background-size: 3px 10px, 3px 14px, 3px 13px, 3px 6px; }
}
@keyframes kt-voice-h1 {
	0%, 100% { background-size: 4px 11px, 4px 26px, 4px 17px, 4px 8px; }
	25%      { background-size: 4px 15px, 4px 22px, 4px 21px, 4px 11px; }
	50%      { background-size: 4px 9px, 4px 26px, 4px 14px, 4px 14px; }
	75%      { background-size: 4px 14px, 4px 20px, 4px 19px, 4px 8px; }
}
body.kt-d2 .kt-h::before { animation: kt-voice-h 5.2s ease-in-out infinite; animation-delay: var(--vd, 0s); animation-play-state: paused; }
body.kt-d2 .kt-sec-head h1::before { animation: kt-voice-h1 5.2s ease-in-out infinite; animation-delay: var(--vd, 0s); animation-play-state: paused; }
body.kt-d2 .kt-h.kt-live::before, body.kt-d2 .kt-sec-head h1.kt-live::before { animation-play-state: running; }