/* ── K-POP INSIGHT: 홈페이지 섹션 + /insight 페이지 공통 ── */
.ins-scope { --c-chart: #ffb020; --c-industry: #3d8bff; --c-artist: #ff2d3d; --c-global: #22c3ee; --c-production: #a46bff; --c-ai: #00e0a4; }
.ins-scope:not([data-lang="ko"]) .l-ko, .ins-scope[data-lang="ko"] .l-en { display: none; }

/* 상단 조작부: 발행일 LCD + 언어 전환 + 아카이브 */
.ins-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 26px; padding: 14px 18px; border-radius: 12px;
  background: linear-gradient(180deg, #0e0e11, #070709); border: 1px solid #26262b; box-shadow: inset 0 2px 10px rgba(0,0,0,.7); }
.ins-lcd { flex: 1 1 260px; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 14px; border-radius: 8px;
  background: linear-gradient(180deg, #1a0709, #0c0304); border: 1px solid #3a1015; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: #ff6b76;
  text-shadow: 0 0 8px rgba(255, 45, 61, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-lcd small { color: rgba(255, 107, 118, .55); font-size: 10px; }
.ins-lcd .led { background: var(--c-ai); box-shadow: 0 0 10px var(--c-ai); animation: blink 2.4s ease-in-out infinite; }
.ins-lang { display: inline-flex; padding: 3px; border-radius: 999px; background: #050506; border: 1px solid #2a2a30; }
.ins-lang button { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .14em; padding: 7px 14px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(245, 243, 243, .55); cursor: pointer; transition: background .2s, color .2s; }
.ins-lang button[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #3e3e46, #16161a); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 14px rgba(164, 107, 255, .35); }
.ins-more { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-decoration: none; padding: 9px 16px; border-radius: 999px;
  color: var(--ink); border: 1px solid rgba(245, 243, 243, .3); transition: border-color .2s, box-shadow .2s; white-space: nowrap; }
.ins-more:hover { border-color: #fff; box-shadow: 0 0 16px rgba(255, 255, 255, .2); }

/* 기사 목록: 트랙리스트처럼 한 줄씩 단순하게 */
.ins-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #24242a; }
.ins-item { --cc: var(--c-artist); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 18px; align-items: start; padding: 18px 6px; border-bottom: 1px solid #24242a; }
.ins-item[data-cat="CHART"] { --cc: var(--c-chart); }
.ins-item[data-cat="INDUSTRY"] { --cc: var(--c-industry); }
.ins-item[data-cat="GLOBAL"] { --cc: var(--c-global); }
.ins-item[data-cat="PRODUCTION"] { --cc: var(--c-production); }
.ins-item[data-cat="AI MUSIC"] { --cc: var(--c-ai); }
.ins-no { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-top: 3px; }
.ins-main { min-width: 0; }
.ins-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.ins-tag { font-size: 10px; letter-spacing: .14em; color: var(--cc); }
.ins-item h3 { margin: 4px 0 0; font-family: var(--sans); font-weight: 700; font-size: 17px; line-height: 1.45; color: var(--ink); }
.ins-item h3 a { text-decoration: none; }
.ins-item h3 a:hover { text-decoration: underline; text-decoration-color: var(--cc); text-underline-offset: 3px; }
.ins-sum { margin: 4px 0 0; font-size: 14px; line-height: 1.65; color: #b9b4b6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ins-link { align-self: center; font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-decoration: none; color: var(--ink);
  padding: 8px 14px; border-radius: 999px; border: 1px solid #34343a; white-space: nowrap; transition: border-color .2s; }
.ins-link:hover { border-color: var(--cc); }
.ins-empty h3 { color: var(--muted); }
.ins-note { margin: 16px 0 0; font-size: 12px; color: var(--muted); }

@media (max-width: 760px) {
  .ins-bar { padding: 10px 12px; gap: 10px; margin-bottom: 14px; }
  .ins-lcd { flex-basis: 100%; font-size: 11px; padding: 8px 12px; }
  .ins-item { grid-template-columns: 26px minmax(0, 1fr); padding: 14px 2px; }
  .ins-item h3 { font-size: 15.5px; }
  .ins-sum { font-size: 13.5px; }
  .ins-link { grid-column: 2; justify-self: start; margin-top: 8px; padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) { .ins-lcd .led { animation: none; } }

/* ── /insight 전용 페이지 ── */
body.ins-page { color-scheme: dark; --night: #0a0a0c; --ink: #f5f3f3; --muted: #a9a3a6; --violet: #b3121d; --pink: #ff2d3d;
  --holo: linear-gradient(115deg, #ffffff 0%, #b9b9c0 22%, #ff3b4a 40%, #ffffff 55%, #8e8e96 78%, #ffffff 100%);
  --display: "Unbounded", "Black Han Sans", "Malgun Gothic", sans-serif; --sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "Space Mono", ui-monospace, Consolas, monospace; }
@keyframes holo { to { background-position: 200% 0; } }
@keyframes blink { 50% { opacity: .3; } }
body.ins-page { margin: 0; min-height: 100vh; background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.035) 1px, transparent 1.6px) 0 0 / 14px 14px, var(--night); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.7; overflow-x: hidden; }
.ins-page a { color: inherit; }
.ins-page .led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff2d3d; box-shadow: 0 0 10px #ff2d3d; flex: none; animation: blink 2.4s ease-in-out infinite; }
.ins-page .wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.ins-top { position: sticky; top: 0; z-index: 10; background: rgba(10,10,12,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(179,18,29,.25); }
.ins-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 14px; }
.ins-logo { font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: .02em; text-decoration: none; background: var(--holo); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo 6s linear infinite; }
.ins-top nav { display: flex; gap: 8px; flex-wrap: wrap; }
.ins-top nav a { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-decoration: none; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, #2a2a30, #0d0d10); }
.ins-top nav a:hover, .ins-top nav a[aria-current] { border-color: var(--c-ai); box-shadow: 0 0 14px rgba(0, 224, 164, .3); }
.ins-hero { padding-block: 56px 8px; }
.ins-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; color: var(--pink); display: flex; align-items: center; gap: 10px; }
.ins-hero h1 { margin: 14px 0 10px; font-family: var(--display); font-weight: 900; font-size: clamp(38px, 7vw, 76px); line-height: .95; letter-spacing: -.02em; }
.ins-hero h1 em { font-style: normal; -webkit-text-stroke: 1.5px var(--violet); color: transparent; }
.ins-hero p { margin: 0; max-width: 40em; color: var(--muted); }
.ins-panel { position: relative; margin-top: 36px; padding: 30px clamp(16px, 3vw, 36px); border-radius: 18px; background: linear-gradient(180deg, #1b1b1f, #0f0f12);
  border: 1px solid #2a2a30; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px rgba(0,0,0,.55); }
.ins-panel h2 { margin: 0 0 20px; font-family: var(--display); font-weight: 900; font-size: clamp(22px, 3.4vw, 32px); letter-spacing: -.01em; }
.ins-panel h2 small { display: block; margin-top: 6px; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.ins-pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.ins-archive { display: grid; gap: 22px; }
.ins-archive h3 { margin: 0 0 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--pink); }
.ins-archive ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ins-archive li a { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: baseline; padding: 10px 14px; border-radius: 10px; text-decoration: none;
  background: #0c0c0f; border: 1px solid #222228; transition: border-color .2s; }
.ins-archive li a:hover { border-color: var(--pink); }
.ins-archive time { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.ins-archive span { font-size: 14px; color: #c9c4c6; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-archive em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
/* 큐레이터 소개 + 음악 듣기 */
.ins-promo { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; }
.ins-promo img { width: 150px; height: 150px; border-radius: 12px; object-fit: cover; box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 0 1px #2a2a30; }
.ins-promo p { margin: 6px 0 14px; color: #c9c4c6; }
.ins-promo .k { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--pink); }
.ins-promo b { font-family: var(--display); font-size: 22px; }
.ins-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ins-btns a, .ins-btns button { cursor: pointer; background: transparent; color: var(--ink); font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-decoration: none; padding: 9px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pc, #fff) 60%, transparent); }
.ins-btns a:hover, .ins-btns button:hover { background: color-mix(in srgb, var(--pc, #fff) 16%, transparent); }
.ins-btns .primary { background: linear-gradient(90deg, var(--pink), var(--violet)); border-color: transparent; color: #fff; }
.ins-page footer { padding: 48px 20px 40px; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
@media (max-width: 760px) {
  .ins-hero { padding-block: 30px 0; }
  .ins-panel { margin-top: 22px; padding: 22px 16px; }
  .ins-archive li a { grid-template-columns: 1fr auto; }
  .ins-archive li a span { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .ins-promo { grid-template-columns: 92px 1fr; gap: 14px; }
  .ins-promo img { width: 92px; height: 92px; }
}