/* Auto-generated arbitrary Tailwind values fallback */
.-left-\[11px\]{left:-11px}
.-mt-\[44px\]{margin-top:-44px}
.aspect-\[16\/9\]{aspect-ratio:16/9}
.aspect-\[3\/4\]{aspect-ratio:3/4}
.aspect-\[4\/3\]{aspect-ratio:4/3}
.bg-\[linear-gradient(to_right,\#0B2C5C_0%,\#0B2C5C_40%,rgba(11,44,92,0\.6)_60%,rgba(11,44,92,0)_85%)\]{background:linear-gradient(to right,#0B2C5C 0%,#0B2C5C 40%,rgba(11,44,92,0.6) 60%,rgba(11,44,92,0) 85%)}
.bg-\[linear-gradient(to_right,\#0B2C5C_0%,\#0B2C5C_42%,rgba(11,44,92,0\.6)_60%,rgba(11,44,92,0)_85%)\]{background:linear-gradient(to right,#0B2C5C 0%,#0B2C5C 42%,rgba(11,44,92,0.6) 60%,rgba(11,44,92,0) 85%)}
.grid-cols-\[60px_60px_1fr_110px_70px_50px\]{grid-template-columns:60px 60px 1fr 110px 70px 50px}
.h-\[120px\]{height:120px}
.h-\[155px\]{height:155px}
.h-\[170px\]{height:170px}
.h-\[200px\]{height:200px}
.h-\[260px\]{height:260px}
.h-\[420px\]{height:420px}
.h-\[56px\]{height:56px}
.h-\[88px\]{height:88px}
.leading-\[1\.15\]{line-height:1.15}
.leading-\[1\.18\]{line-height:1.18}
.leading-\[1\.75\]{line-height:1.75}
.leading-\[1\.7\]{line-height:1.7}
.leading-\[1\.85\]{line-height:1.85}
.max-h-\[380px\]{max-height:380px}
.max-w-\[1000px\]{max-width:1000px}
.max-w-\[1100px\]{max-width:1100px}
.max-w-\[440px\]{max-width:440px}
.max-w-\[560px\]{max-width:560px}
.max-w-\[640px\]{max-width:640px}
.max-w-\[720px\]{max-width:720px}
.max-w-\[760px\]{max-width:760px}
.max-w-\[900px\]{max-width:900px}
.max-w-\[920px\]{max-width:920px}
.min-h-\[100px\]{min-height:100px}
.min-h-\[130px\]{min-height:130px}
.min-h-\[200px\]{min-height:200px}
.min-h-\[42px\]{min-height:42px}
.text-\[\#FFB547\]{color:#FFB547}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-\[12\.5px\]{font-size:12.5px}
.text-\[12px\]{font-size:12px}
.text-\[13px\]{font-size:13px}
.text-\[140px\]{font-size:140px}
.text-\[14px\]{font-size:14px}
.text-\[15px\]{font-size:15px}
.text-\[16px\]{font-size:16px}
.text-\[17px\]{font-size:17px}
.text-\[18px\]{font-size:18px}
.text-\[20px\]{font-size:20px}
.text-\[22px\]{font-size:22px}
.text-\[24px\]{font-size:24px}
.text-\[26px\]{font-size:26px}
.text-\[28px\]{font-size:28px}
.text-\[32px\]{font-size:32px}
.text-\[36px\]{font-size:36px}
.text-\[42px\]{font-size:42px}
.text-\[48px\]{font-size:48px}
.text-\[9px\]{font-size:9px}
.w-\[125px\]{width:125px}
.w-\[140px\]{width:140px}
.w-\[200px\]{width:200px}
.w-\[340px\]{width:340px}
.w-\[55%\]{width:55%}
.w-\[58px\]{width:58px}
.w-\[60%\]{width:60%}
.w-\[80%\]{width:80%}
@media (min-width:768px){
.md\:text-\[32px\]{font-size:32px}
.md\:text-\[42px\]{font-size:42px}
}
@media (min-width:1024px){
.lg\:grid-cols-\[1fr_1\.1fr_360px\]{grid-template-columns:1fr 1.1fr 360px}
.lg\:grid-cols-\[1fr_2fr\]{grid-template-columns:1fr 2fr}
.lg\:grid-cols-\[1fr_320px\]{grid-template-columns:1fr 320px}
.lg\:grid-cols-\[1fr_360px\]{grid-template-columns:1fr 360px}
.lg\:grid-cols-\[1fr_400px\]{grid-template-columns:1fr 400px}
.lg\:grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}
.lg\:grid-cols-\[260px_1fr\]{grid-template-columns:260px 1fr}
.lg\:grid-cols-\[2fr_1fr\]{grid-template-columns:2fr 1fr}
.lg\:grid-cols-\[300px_1fr\]{grid-template-columns:300px 1fr}
.lg\:grid-cols-\[420px_1fr\]{grid-template-columns:420px 1fr}
.lg\:h-\[148px\]{height:148px}
.lg\:text-\[17px\]{font-size:17px}
.lg\:text-\[48px\]{font-size:48px}
.lg\:text-\[56px\]{font-size:56px}
}

/* 2026-07-14 핵심가치 확대 + 연혁 연도 칸 */
.w-24{width:6rem}
.h-24{height:6rem}
.p-9{padding:2.25rem}
.leading-\[1\.8\]{line-height:1.8}
.border-2{border-width:2px}
.border-brand-200{border-color:#bfdbfe}
.border-emerald-200{border-color:#a7f3d0}
.border-amber-200{border-color:#fde68a}
.bg-brand-50\/30{background-color:rgba(239,246,255,.3)}
.bg-emerald-50\/30{background-color:rgba(236,253,245,.3)}
.bg-amber-50\/30{background-color:rgba(255,251,235,.3)}
@media (min-width:1024px){.lg\:py-7{padding-top:1.75rem;padding-bottom:1.75rem}}
.py-4{padding-top:1rem;padding-bottom:1rem}
@media (min-width:1024px){.lg\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}}
@media (min-width:1024px){.lg\:py-4{padding-top:1rem;padding-bottom:1rem}.lg\:text-\[40px\]{font-size:40px}}
.mt-8{margin-top:2rem}

/* 2026-07-21 lucide 아이콘이 flex 버튼 안에서 shrink-0 누락 시 2px로 찌그러지는 것 방지 (전역) */
svg.lucide { flex-shrink: 0; }

.text-\[19px\]{font-size:19px}

/* 2026-07-22 히어로 다이나믹 — 진입 페이드업 · 강조어 은은한 글로우 · 네트워크 노드 반짝임 (reduced-motion 존중) */
@keyframes tkbHeroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes tkbGlow{0%,100%{text-shadow:0 2px 12px rgba(0,0,0,.55)}50%{text-shadow:0 0 22px rgba(255,181,71,.7),0 2px 12px rgba(0,0,0,.55)}}
@keyframes tkbTwinkle{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion: no-preference){
  .tkb-hero .tkb-h-line{opacity:0;animation:tkbHeroUp .85s cubic-bezier(.2,.7,.2,1) forwards}
  .tkb-hero .tkb-h-2{animation-delay:.18s}
  .tkb-hero .tkb-sub{opacity:0;animation:tkbHeroUp .85s cubic-bezier(.2,.7,.2,1) .42s forwards}
  .tkb-hero .tkb-accent{animation:tkbGlow 3s ease-in-out .9s infinite}
  .tkb-hero .tkb-node{animation:tkbTwinkle 3.2s ease-in-out infinite}
  .tkb-hero .tkb-node:nth-of-type(2){animation-delay:.5s}
  .tkb-hero .tkb-node:nth-of-type(3){animation-delay:1s}
  .tkb-hero .tkb-node:nth-of-type(4){animation-delay:1.5s}
  .tkb-hero .tkb-node:nth-of-type(5){animation-delay:.8s}
  .tkb-hero .tkb-node:nth-of-type(6){animation-delay:1.3s}
}


/* 2026-07-22 (v2) 배경 네트워크 강화 — 노드 펄스 확대 + 연결선 흐름 + 레이더 핑 */
@keyframes tkbNodePulse{0%,100%{opacity:.45;r:2.6}50%{opacity:1;r:4.6}}
@keyframes tkbFlow{to{stroke-dashoffset:-28}}
@keyframes tkbPing{0%{r:3;opacity:.75;stroke-width:1.6}100%{r:30;opacity:0;stroke-width:.3}}
@media (prefers-reduced-motion: no-preference){
  .tkb-hero .tkb-node{animation:tkbNodePulse 2.8s ease-in-out infinite}
  .tkb-hero .tkb-node:nth-of-type(2){animation-delay:.3s}
  .tkb-hero .tkb-node:nth-of-type(3){animation-delay:.6s}
  .tkb-hero .tkb-node:nth-of-type(4){animation-delay:.9s}
  .tkb-hero .tkb-node:nth-of-type(5){animation-delay:1.2s}
  .tkb-hero .tkb-node:nth-of-type(6){animation-delay:1.5s}
  .tkb-hero .tkb-node:nth-of-type(7){animation-delay:.5s}
  .tkb-hero .tkb-node:nth-of-type(8){animation-delay:1.1s}
  .tkb-hero .tkb-node:nth-of-type(9){animation-delay:.8s}
  .tkb-hero .tkb-node:nth-of-type(10){animation-delay:1.7s}
  .tkb-hero .tkb-link{stroke-dasharray:5 7;animation:tkbFlow 1.1s linear infinite}
  .tkb-hero .tkb-link:nth-of-type(even){animation-duration:1.7s}
  .tkb-hero .tkb-link:nth-of-type(3n){animation-duration:1.4s}
  .tkb-hero .tkb-ping{animation:tkbPing 2.6s ease-out infinite}
  .tkb-hero .tkb-ping:nth-of-type(2){animation-delay:.9s}
  .tkb-hero .tkb-ping:nth-of-type(3){animation-delay:1.7s}
}

/* 2026-07-22 (v3) 북두칠성 별자리 + 차례차례 등장 */
.tkb-hero .tkb-net{opacity:.5}
.tkb-hero .tkb-dipper .tkb-cline{stroke:#BCD8FF;stroke-width:1.5;stroke-linecap:round}
.tkb-hero .tkb-dipper .tkb-star{fill:#EAF4FF;filter:drop-shadow(0 0 5px rgba(150,196,245,.95));transform-box:fill-box;transform-origin:center}
@keyframes tkbNetIn{from{opacity:0}to{opacity:.5}}
@keyframes tkbStarIn{0%{opacity:0;transform:scale(0)}55%{opacity:1;transform:scale(1.6)}100%{opacity:1;transform:scale(1)}}
@keyframes tkbStarTw{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes tkbDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: no-preference){
  .tkb-hero .tkb-net{opacity:0;animation:tkbNetIn 1.2s ease .2s forwards}
  /* 별: 차례차례 팝인 → 이후 은은히 반짝 */
  .tkb-hero .tkb-dipper .tkb-star{opacity:0;animation:tkbStarIn .6s cubic-bezier(.2,.8,.3,1) both, tkbStarTw 3.6s ease-in-out infinite}
  .tkb-hero .tkb-dipper .tkb-star:nth-of-type(1){animation-delay:.5s,2.6s}
  .tkb-hero .tkb-dipper .tkb-star:nth-of-type(2){animation-delay:.72s,2.9s}
  .tkb-hero .tkb-dipper .tkb-star:nth-of-type(3){animation-delay:.94s,2.7s}
  .tkb-hero .tkb-dipper .tkb-star:nth-of-type(4){animation-delay:1.16s,3.1s}
  .tkb-hero .tkb-dipper .tkb-star:nth-of-type(5){animation-delay:1.38s,2.8s}
  .tkb-hero .tkb-dipper .tkb-star:nth-of-type(6){animation-delay:1.6s,3.2s}
  .tkb-hero .tkb-dipper .tkb-star:nth-of-type(7){animation-delay:1.82s,2.5s}
  /* 별자리 선: 두 별이 켜진 뒤 이어짐 (스트로크 드로우) */
  .tkb-hero .tkb-dipper .tkb-cline{stroke-dasharray:160;stroke-dashoffset:160;animation:tkbDraw .65s ease forwards}
  .tkb-hero .tkb-dipper .tkb-cline:nth-of-type(1){animation-delay:.78s}
  .tkb-hero .tkb-dipper .tkb-cline:nth-of-type(2){animation-delay:1s}
  .tkb-hero .tkb-dipper .tkb-cline:nth-of-type(3){animation-delay:1.22s}
  .tkb-hero .tkb-dipper .tkb-cline:nth-of-type(4){animation-delay:1.44s}
  .tkb-hero .tkb-dipper .tkb-cline:nth-of-type(5){animation-delay:1.66s}
  .tkb-hero .tkb-dipper .tkb-cline:nth-of-type(6){animation-delay:1.88s}
  .tkb-hero .tkb-dipper .tkb-cline:nth-of-type(7){animation-delay:2.1s}
}

/* 2026-07-22 (v4) 네트워크 노드를 북두칠성으로 통합 — 별 차례차례 등장 + 별자리 선 순차 연결 */
.tkb-hero .tkb-net .tkb-star{fill:#EAF4FF;filter:drop-shadow(0 0 5px rgba(150,196,245,.95));transform-box:fill-box;transform-origin:center}
.tkb-hero .tkb-net .tkb-cline{stroke:#BCD8FF}
@media (prefers-reduced-motion: no-preference){
  .tkb-hero .tkb-net .tkb-star{opacity:0;animation:tkbStarIn .6s cubic-bezier(.2,.8,.3,1) both, tkbStarTw 3.6s ease-in-out infinite}
  .tkb-hero .tkb-net .tkb-star:nth-of-type(1){animation-delay:.5s,2.6s}
  .tkb-hero .tkb-net .tkb-star:nth-of-type(2){animation-delay:.72s,2.9s}
  .tkb-hero .tkb-net .tkb-star:nth-of-type(3){animation-delay:.94s,2.7s}
  .tkb-hero .tkb-net .tkb-star:nth-of-type(4){animation-delay:1.16s,3.1s}
  .tkb-hero .tkb-net .tkb-star:nth-of-type(5){animation-delay:1.38s,2.8s}
  .tkb-hero .tkb-net .tkb-star:nth-of-type(6){animation-delay:1.6s,3.2s}
  .tkb-hero .tkb-net .tkb-star:nth-of-type(7){animation-delay:1.82s,2.5s}
  .tkb-hero .tkb-net .tkb-cline{stroke-dasharray:200;stroke-dashoffset:200;animation:tkbDraw .65s ease forwards}
  .tkb-hero .tkb-net .tkb-cline:nth-of-type(1){animation-delay:.78s}
  .tkb-hero .tkb-net .tkb-cline:nth-of-type(2){animation-delay:1s}
  .tkb-hero .tkb-net .tkb-cline:nth-of-type(3){animation-delay:1.22s}
  .tkb-hero .tkb-net .tkb-cline:nth-of-type(4){animation-delay:1.44s}
  .tkb-hero .tkb-net .tkb-cline:nth-of-type(5){animation-delay:1.66s}
  .tkb-hero .tkb-net .tkb-cline:nth-of-type(6){animation-delay:1.88s}
  .tkb-hero .tkb-net .tkb-cline:nth-of-type(7){animation-delay:2.1s}
  .tkb-hero .tkb-net .tkb-amb{animation:tkbStarTw 3s ease-in-out infinite}
  .tkb-hero .tkb-net .tkb-amb:nth-of-type(2){animation-delay:.8s}
  .tkb-hero .tkb-net .tkb-amb:nth-of-type(3){animation-delay:1.5s}
  .tkb-hero .tkb-net .tkb-amb:nth-of-type(4){animation-delay:.4s}
  .tkb-hero .tkb-net .tkb-amb:nth-of-type(5){animation-delay:1.1s}
}

/* 2026-07-22 프리미엄 디테일 — 스크롤 등장·밴드 광택·로고 컬러리빌·카드 리프트 */
.reveal{transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
html.reveal-on .reveal{opacity:0;transform:translateY(26px)}
html.reveal-on .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.reveal-on .reveal{opacity:1;transform:none}}
.tkb-band{position:relative}
.tkb-band::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.16) 45%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.16) 55%,transparent 100%);
  transform:skewX(-18deg)}
@media (prefers-reduced-motion: no-preference){.tkb-band::after{animation:tkbSheen 7s ease-in-out 1.2s infinite}}
@keyframes tkbSheen{0%{left:-60%}55%,100%{left:130%}}
.tkb-plogo{transition:transform .35s ease}
.group:hover .tkb-plogo{transform:scale(1.05)}
.card-hover{transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease}
.card-hover:hover{transform:translateY(-4px);box-shadow:0 16px 36px -12px rgba(11,44,92,.28)}


/* 2026-07-22 사옥 히어로 이미지 — 느린 줌(Ken Burns) */
@keyframes tkbKen{0%{transform:scale(1)}100%{transform:scale(1.09)}}
@media (prefers-reduced-motion: no-preference){ .tkb-hero .tkb-kb{transform-origin:right center;animation:tkbKen 20s ease-in-out infinite alternate} }

/* 2026-10-19 첫화면: 최근활동(2칸)+시도민회 현황(1칸)을 위 3컬럼(공지·행사·캘린더)과 세로줄 맞춤 */
@media (min-width:1024px){ .tkb-row-align{grid-template-columns:repeat(3,minmax(0,1fr))} .tkb-row-align>:first-child{grid-column:span 2/span 2} }
