/* HN26HIS 20261009 : 주요연혁 타임라인 (서브 .hn26s 토큰 사용, 다크모드 자동) */
.hnh{--h-bg:var(--bg,#F2F5FA);--h-sf:var(--surface,#fff);--h-sf2:var(--surface-2,#E9EFF8);--h-ink:var(--ink,#0F1827);--h-ink2:var(--ink-2,#47566B);--h-ink3:var(--ink-3,#7C8AA0);--h-line:var(--line,#DBE3EF);--h-blue:var(--blue,#0F4FE0);--h-wash:var(--blue-wash,#E6EEFF);--h-grad:var(--grad,linear-gradient(102deg,#0F4FE0 0%,#1E7BF0 46%,#00B36B 100%));
  font-family:var(--ff,'Pretendard Variable',Pretendard,system-ui,sans-serif);color:var(--h-ink);margin-top:8px}
.hnh *,.hnh *::before,.hnh *::after{box-sizing:border-box}
.hnh ol,.hnh ul{list-style:none;margin:0;padding:0}
.hnh p{margin:0}

/* 요약 */
.hnh__sum{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:30px 34px;border-radius:20px;background:var(--h-grad);color:#fff;box-shadow:0 22px 44px -28px rgba(15,79,224,.6)}
.hnh__sum::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;border:38px solid rgba(255,255,255,.08)}
.hnh__since{position:relative;z-index:1;line-height:1}
.hnh__since span{display:block;font-size:12px;font-weight:700;letter-spacing:.24em;opacity:.75}
.hnh__since strong{display:block;margin-top:8px;font-size:56px;font-weight:800;letter-spacing:-.04em}
.hnh__stat{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap}
.hnh__stat li{min-width:118px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.hnh__stat strong{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.hnh__stat small{font-size:14px;font-weight:700;margin-left:2px}
.hnh__stat span{display:block;margin-top:4px;font-size:12.5px;opacity:.82}

/* 연대 바로가기 */
.hnh__dec{position:sticky;top:84px;z-index:5;display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 8px;padding:8px 0;background:var(--h-bg)}
.hnh__dec a{padding:7px 14px;border-radius:999px;border:1px solid var(--h-line);background:var(--h-sf);font-size:13px;font-weight:700;color:var(--h-ink2);text-decoration:none;transition:.2s}
.hnh__dec a:hover{border-color:var(--h-blue);color:var(--h-blue)}

/* 타임라인 */
.hnh__tl{position:relative;margin-top:22px}
.hnh__tl::before{content:"";position:absolute;left:150px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--h-line)}
.hnh__yr{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);scroll-margin-top:150px}
.hnh__yr + .hnh__yr{margin-top:34px}
.hnh__yhead{position:sticky;top:140px;align-self:start;padding-right:26px;text-align:right}
.hnh__year{display:block;font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--h-ink)}
.hnh__yhead em{display:inline-block;margin-top:8px;font-style:normal;font-size:12px;font-weight:600;color:var(--h-ink3)}
.hnh__yr.is-latest .hnh__year{background:var(--h-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 연도 점 */
.hnh__yr::before{content:"";position:absolute;left:144px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--h-sf);border:3px solid var(--h-blue);box-shadow:0 0 0 5px var(--h-bg);z-index:1}
.hnh__yr.is-latest::before{background:var(--h-blue);box-shadow:0 0 0 5px var(--h-bg),0 0 0 9px var(--h-wash)}

.hnh__ev{display:flex;flex-direction:column;gap:10px;padding-left:30px}
.hnh__card{display:flex;align-items:flex-start;gap:16px;padding:16px 18px;border-radius:14px;background:var(--h-sf);border:1px solid var(--h-line);transition:transform .25s cubic-bezier(.2,.7,.25,1),box-shadow .25s,border-color .25s}
.hnh__card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--h-blue) 40%,var(--h-line));box-shadow:0 14px 30px -22px rgba(15,24,39,.45)}
.hnh__m{flex:none;min-width:52px;padding:4px 10px;border-radius:999px;background:var(--h-wash);color:var(--h-blue);font-size:13px;font-weight:800;text-align:center;line-height:1.5}
.hnh__txt{flex:1;min-width:0}
.hnh__txt p{font-size:15.5px;line-height:1.65;color:var(--h-ink);word-break:keep-all}
.hnh__img{flex:none;display:block;width:132px;border-radius:10px;overflow:hidden;background:var(--h-sf2)}
.hnh__img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s}
.hnh__img:hover img{transform:scale(1.05)}

/* 관리자 */
.hnh__adm{display:flex;gap:12px;margin-top:6px;font-size:12px;color:var(--h-ink3)}
.hnh__adm a{color:var(--h-blue);text-decoration:none;font-weight:600}
.hnh__adm label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.hnh__btns{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--h-line)}
.hnh__btns-l{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hnh__btns-r{display:flex;gap:6px;margin-left:auto}
.hnh__btns input[type=submit],.hnh__btns a{padding:8px 14px;border-radius:10px;border:1px solid var(--h-line);background:var(--h-sf);color:var(--h-ink2);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit}
.hnh__btns a.is-main{background:var(--h-blue);border-color:var(--h-blue);color:#fff}
.hnh__all{font-size:13px;color:var(--h-ink2);margin-right:4px;display:inline-flex;gap:4px;align-items:center}
.hnh__empty{padding:60px 0;text-align:center;color:var(--h-ink3)}

/* 등장 */
.hnh.is-anim .hnh-rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.25,1)}
.hnh.is-anim .hnh-rv.in{opacity:1;transform:none}

/* 다크 */
html[data-theme="dark"] .hnh__sum{box-shadow:0 22px 44px -28px rgba(0,0,0,.8)}
html[data-theme="dark"] .hnh__btns a.is-main{color:#0B1220}

/* 반응형 */
@container site (max-width:880px){
  .hnh__sum{padding:24px 22px}
  .hnh__since strong{font-size:44px}
  .hnh__dec{top:64px}
  .hnh__tl::before{left:7px}
  .hnh__yr{grid-template-columns:minmax(0,1fr);padding-left:30px}
  .hnh__yr::before{left:1px;top:6px}
  .hnh__yhead{position:static;text-align:left;padding:0 0 12px;display:flex;align-items:baseline;gap:10px}
  .hnh__yhead em{margin-top:0}
  .hnh__year{font-size:28px}
  .hnh__ev{padding-left:0}
}
@container site (max-width:520px){
  .hnh__stat{width:100%}
  .hnh__stat li{flex:1;min-width:0;padding:12px}
  .hnh__stat strong{font-size:21px}
  .hnh__card{flex-wrap:wrap;gap:10px;padding:14px}
  .hnh__img{width:100%}
}
@media print{.hnh__dec,.hnh__btns,.hnh__adm{display:none}.hnh.is-anim .hnh-rv{opacity:1;transform:none}}