/* =========================================================
   IKS 홈페이지 디자인 구성요소 v2
   - 색: 한양대 UI 색상 (Primary 중심: Hanyang Blue / Silver)
   - 글꼴: Paperlogy(제목) · Spoqa Han Sans Neo(본문) — fonts.css 필요
   - 접두사 .ik- 로 다른 스타일과 충돌 방지
   ========================================================= */
:root{
  --ik-blue:#0E4A84;        /* Hanyang Blue · PANTONE 541C */
  --ik-blue-dk:#0a3563;
  --ik-blue-xdk:#072748;
  --ik-blue-md:#33679b;
  --ik-blue-tint:#e1e9f3;
  --ik-blue-soft:#f3f6fa;
  --ik-silver:#898C8E;      /* Hanyang Silver · PANTONE 877C */
  --ik-silver-lt:#ecedee;
  --ik-ink:#1a2533;
  --ik-mute:#5f6670;
  --ik-line:#dde1e6;
  --ik-yg:#7DB928;          /* Secondary — 포인트로만 */
  --ik-display:"Paperlogy","Spoqa Han Sans Neo",system-ui,sans-serif;
  --ik-body:"Spoqa Han Sans Neo","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
.ik{font-family:var(--ik-body);color:var(--ik-ink);line-height:1.65;box-sizing:border-box;word-break:keep-all;overflow-wrap:break-word}
.ik *,.ik *::before,.ik *::after{box-sizing:inherit}
.ik-band{background:#fff}
.ik-band.alt{background:var(--ik-blue-soft)}
.ik-sec{max-width:1240px;margin:0 auto;padding:80px clamp(16px,3vw,32px)}
.ik-eyebrow{display:block;font-family:var(--ik-display);font-weight:700;font-size:13px;letter-spacing:.18em;color:var(--ik-silver);text-transform:uppercase}
.ik-h2{font-family:var(--ik-display);font-weight:800;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;line-height:1.3;margin:10px 0 14px;color:var(--ik-blue);text-wrap:balance}
.ik-h3{font-family:var(--ik-display);font-weight:800;font-size:22px;color:var(--ik-ink);margin:56px 0 18px;display:flex;align-items:baseline;gap:10px}
.ik-h3 small{font-family:var(--ik-body);font-weight:500;font-size:14px;color:var(--ik-silver)}
.ik-lead{color:var(--ik-mute);max-width:70ch;margin:0;font-size:16px}
.ik-note{font-size:12.5px;color:var(--ik-silver);margin:12px 0 0}
.ik-fig{margin:40px 0 0}
.ik-diagram{display:block;width:100%;height:auto;max-width:100%}
.ik-diagram text{dominant-baseline:auto}
.ik-mlist{display:none}
.ik-mcard{border:1px solid var(--ik-line);background:#fff}
.ik-mcard h3{margin:0;background:var(--c,var(--ik-blue));color:#fff;font-family:var(--ik-display);font-weight:700;font-size:17px;padding:12px 16px}
.ik-mcard ul{margin:0;padding:12px 16px 14px 32px;font-size:14.5px;display:grid;gap:4px}
.ik-callout{margin:36px 0 0;padding:18px 22px;background:var(--ik-blue-soft);border-left:4px solid var(--ik-blue);display:flex;gap:6px 16px;flex-wrap:wrap;align-items:baseline;font-size:15px}
.ik-callout b{font-family:var(--ik-display);font-weight:700;color:var(--ik-blue)}

/* ---------- 비전 ---------- */
.ik-vision-title{margin:40px 0 0;text-align:center;font-family:var(--ik-display);font-weight:800;font-size:clamp(22px,2.6vw,32px);color:var(--ik-blue-dk);padding:22px 16px;border-block:1px solid var(--ik-line);display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;text-wrap:balance}
.ik-vision-title span{font-size:12px;letter-spacing:.2em;background:var(--ik-blue);color:#fff;padding:5px 10px}
.ik-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ik-act{border:1px solid var(--ik-line);background:#fff;display:flex;flex-direction:column}
.ik-act h3{margin:0;background:var(--ik-blue);color:#fff;font-family:var(--ik-display);font-weight:800;font-size:22px;padding:18px 22px;display:flex;align-items:baseline;gap:8px}
.ik-act:nth-child(2) h3{background:var(--ik-blue-dk)}
.ik-act:nth-child(3) h3{background:var(--ik-blue-md)}
.ik-act h3 small{font-size:14px;font-weight:600;opacity:.8}
.ik-act ul{margin:0;padding:18px 22px 22px 38px;display:grid;gap:7px;font-size:15px}
.ik-act li::marker{color:var(--ik-blue)}

/* ---------- 연구·교육 연계 ---------- */
.ik-link{display:grid;grid-template-columns:minmax(0,.95fr) 48px minmax(0,1.6fr);gap:20px;margin-top:40px;align-items:center}
.ik-flowbox{border:2px dashed #b9cbe0;padding:22px 22px 10px;background:#fff}
.ik-flowbox h3{margin:0 0 18px;font-family:var(--ik-display);font-weight:800;font-size:18px;color:var(--ik-blue)}
.ik-flow{list-style:none;margin:0;padding:0;position:relative}
.ik-flow li:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--ik-blue)}
.ik-flow li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding-bottom:18px;position:relative}
.ik-flow .n{width:40px;height:40px;border-radius:50%;background:var(--ik-blue);color:#fff;display:grid;place-items:center;font-family:var(--ik-display);font-weight:800;font-size:16px;position:relative;z-index:1;box-shadow:0 0 0 5px #fff}
.ik-flow b{display:block;font-family:var(--ik-display);font-weight:700;font-size:17px;padding-top:7px}
.ik-flow p{margin:4px 0 0;font-size:14px;color:var(--ik-mute)}
.ik-arrow svg{width:40px;height:auto;display:block;margin:auto}
.ik-levels{display:grid;gap:14px}
.ik-level{display:grid;grid-template-columns:120px 1fr;border:1px solid var(--ik-line);background:#fff}
.ik-level > h3{margin:0;display:grid;place-items:center;text-align:center;font-family:var(--ik-display);font-weight:800;font-size:18px;color:#fff;background:var(--ik-blue);padding:12px;line-height:1.35}
.ik-level.l1 > h3{background:var(--ik-blue-md)}
.ik-level.l2 > h3{background:var(--ik-blue-dk)}
.ik-level .b{padding:16px 20px}
.ik-level dl{margin:0;display:grid;gap:10px}
.ik-level dt{font-weight:700;font-size:15px;color:var(--ik-ink)}
.ik-level dd{margin:2px 0 0;font-size:14px;color:var(--ik-mute)}
.ik-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.ik-badges span{background:var(--ik-silver);color:#fff;font-size:12px;font-weight:700;padding:4px 10px}
.ik-badges span.y{background:var(--ik-yg)}

/* ---------- 연혁·성과 ---------- */
.ik-now{margin-top:40px;background:linear-gradient(135deg,var(--ik-blue) 0%,var(--ik-blue-dk) 100%);color:#fff;display:grid;grid-template-columns:220px 1fr}
.ik-now-h{padding:32px 28px;border-right:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;justify-content:center}
.ik-now-h span{font-size:14px;color:#cfdcec}
.ik-now-h strong{font-family:var(--ik-display);font-weight:800;font-size:26px;line-height:1.3;margin-top:6px}
.ik-stats{display:grid;grid-template-columns:repeat(4,1fr)}
.ik-stats div{padding:22px 24px;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.ik-stats div:nth-child(4n){border-right:0}
.ik-stats div:nth-child(n+5){border-bottom:0}
.ik-stats b{display:block;font-family:var(--ik-display);font-weight:800;font-size:36px;line-height:1.1;font-variant-numeric:tabular-nums}
.ik-stats b small{font-size:15px;margin-left:3px;font-weight:700}
.ik-stats span{font-size:13.5px;color:#cfdcec}
.ik-charts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ik-ccard{border:1px solid var(--ik-line);background:#fff;padding:22px 22px 14px;display:flex;flex-direction:column}
.ik-ccard header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:2px solid var(--ik-blue)}
.ik-ccard h4{margin:0;font-family:var(--ik-display);font-weight:800;font-size:19px;color:var(--ik-blue)}
.ik-ccard header span{font-size:13px;color:var(--ik-mute);white-space:nowrap}
.ik-ccard header b{font-family:var(--ik-display);font-size:20px;color:var(--ik-ink)}
.ik-ccard p{margin:12px 0 6px;font-size:13.5px;color:var(--ik-mute);min-height:3.2em}
.ik-chart{width:100%;height:auto;display:block;margin-top:auto}
.ik-chart .grid{stroke:var(--ik-line);stroke-dasharray:3 4}
.ik-chart .axis{stroke:var(--ik-silver)}
.ik-chart rect.bar{fill:#9db7d3}
.ik-chart rect.bar.peak{fill:var(--ik-blue)}
.ik-chart text{font-family:var(--ik-body)}
.ik-chart .v{fill:var(--ik-ink);font-weight:700;font-size:13px}
.ik-chart .yr{fill:var(--ik-mute);font-size:12px}
.ik-tl{list-style:none;margin:0;padding:0;position:relative}
.ik-tl::before{content:"";position:absolute;left:160px;top:10px;bottom:10px;width:2px;background:var(--ik-blue-tint)}
.ik-tl > li{display:grid;grid-template-columns:160px 1fr;position:relative;padding:18px 0;border-bottom:1px solid var(--ik-line)}
.ik-tl > li:last-child{border-bottom:0}
.ik-tl > li::before{content:"";position:absolute;left:154px;top:28px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--ik-silver)}
.ik-tl > li.key::before{background:var(--ik-blue);border-color:var(--ik-blue);box-shadow:0 0 0 5px var(--ik-blue-tint)}
.ik-tl .yr{font-family:var(--ik-display);font-weight:800;font-size:26px;line-height:1.2;color:var(--ik-silver);display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-right:24px}
.ik-tl li.key .yr{color:var(--ik-blue)}
.ik-tl .chip{font-family:var(--ik-body);font-size:11px;font-weight:700;background:var(--ik-blue);color:#fff;padding:2px 8px;letter-spacing:.04em}
.ik-tl ul{margin:0;padding:4px 0 0 40px;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px}
.ik-tl ul li{position:relative;padding-left:14px;font-size:15px}
.ik-tl ul li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;background:var(--ik-silver)}
.ik-tl li.key ul{grid-template-columns:1fr}
.ik-tl li.key ul li{color:var(--ik-blue-dk);font-weight:700}
.ik-tl li.key ul li::before{background:var(--ik-blue)}

/* ---------- 분야별 연구성과 ---------- */
.ik-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:32px;border-bottom:2px solid var(--ik-blue)}
.ik-tabs button{font:inherit;font-family:var(--ik-display);font-weight:700;font-size:15.5px;border:1px solid var(--ik-line);border-bottom:0;background:#fff;color:var(--ik-mute);padding:12px 20px;cursor:pointer;position:relative}
.ik-tabs button::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--c);opacity:0}
.ik-tabs button:hover{color:var(--ik-blue)}
.ik-tabs button[aria-selected="true"]{background:var(--ik-blue);color:#fff;border-color:var(--ik-blue)}
.ik-tabs button:focus-visible{outline:3px solid var(--ik-yg);outline-offset:2px}
.ik-panel{padding:32px 0 0}
.ik-panel-h{border-left:5px solid var(--c);padding:4px 0 4px 18px;margin-bottom:28px}
.ik-panel-h span{font-family:var(--ik-display);font-weight:700;font-size:13px;color:var(--ik-silver);letter-spacing:.06em}
.ik-panel-h h3{font-family:var(--ik-display);font-weight:800;font-size:clamp(20px,2.2vw,26px);color:var(--ik-blue);margin:4px 0 6px;line-height:1.35}
.ik-panel-h p{margin:0;color:var(--ik-mute)}
.ik-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ik-two > div{background:#fff;border:1px solid var(--ik-line);padding:22px 24px}
.ik-two h4{margin:0 0 12px;font-family:var(--ik-display);font-weight:700;font-size:16px;color:var(--ik-blue)}
.ik-two ul{margin:0;padding-left:18px;font-size:15px;display:grid;gap:6px}
.ik-two li::marker{color:var(--ik-blue)}
.ik-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.ik-shot{font:inherit;border:1px solid var(--ik-line);background:#fff;padding:12px 12px 10px;cursor:zoom-in;text-align:left;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,box-shadow .2s}
.ik-shot:hover,.ik-shot:focus-visible{border-color:var(--ik-blue);box-shadow:0 10px 24px -14px rgba(14,74,132,.5);outline:none}
.ik-shot img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--ik-blue-soft);display:block}
.ik-shot span{font-size:13px;color:var(--ik-mute)}
.ik-lightbox{border:0;padding:0;max-width:min(1100px,94vw);background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.ik-lightbox::backdrop{background:rgba(7,39,72,.78)}
.ik-lightbox img{display:block;max-width:100%;max-height:86vh}
.ik-lightbox button{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;background:var(--ik-blue);color:#fff;font-size:22px;cursor:pointer}

/* ---------- 푸터 ---------- */
.ik-footer{font-family:var(--ik-body);color:#fff;background:var(--ik-blue)}
.ik-footer a{color:inherit;text-decoration:none}
.ik-footer a:hover{text-decoration:underline}
.ik-f-in{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,3vw,32px)}
.ik-f-top{background:#fff;color:var(--ik-ink);border-top:4px solid var(--ik-blue)}
.ik-f-top .ik-f-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:30px}
.ik-f-top img{height:52px;width:auto;max-width:100%}
.ik-f-quick{display:flex;gap:10px;flex-wrap:wrap}
.ik-f-quick a{border:1px solid var(--ik-blue);color:var(--ik-blue);font-weight:700;font-size:14px;padding:10px 16px}
.ik-f-quick a.is-fill{background:var(--ik-blue);color:#fff}
.ik-f-mid .ik-f-in{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-block:52px}
.ik-f-about h3{font-family:var(--ik-display);font-weight:800;font-size:22px;margin:0 0 18px}
.ik-f-about dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px}
.ik-f-about dt{color:#9fbadb;font-weight:700}
.ik-f-about dd{margin:0}
.ik-f-col h4{font-family:var(--ik-display);font-weight:700;font-size:16px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.25)}
.ik-f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:#dbe6f2}
.ik-f-rel{background:var(--ik-blue-dk)}
.ik-f-rel .ik-f-in{display:flex;gap:10px 28px;flex-wrap:wrap;align-items:center;padding-block:18px;font-size:13px;color:#cfdcec}
.ik-f-rel b{font-family:var(--ik-display);font-weight:700;color:#fff;margin-right:4px}
.ik-f-bot{background:var(--ik-blue-xdk)}
.ik-f-bot .ik-f-in{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:20px;font-size:12px;color:#9fb0c4}
.ik-f-bot .ik-f-nav{display:flex;gap:18px}
.ik-f-bot .ik-f-nav a:first-child{color:#fff;font-weight:700}
.ik-f-credit{font-size:11px;color:#7f93ab;width:100%}

@media (max-width:1000px){
  .ik-charts{grid-template-columns:1fr 1fr}
  .ik-stats{grid-template-columns:repeat(2,1fr)}
  .ik-stats div:nth-child(4n){border-right:1px solid rgba(255,255,255,.14)}
  .ik-stats div:nth-child(2n){border-right:0}
  .ik-now{grid-template-columns:1fr}
  .ik-now-h{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding:22px 24px}
  .ik-link{grid-template-columns:1fr}
  .ik-arrow{transform:rotate(90deg);height:40px}
  .ik-f-mid .ik-f-in{grid-template-columns:1fr 1fr}
  .ik-f-about{grid-column:1/-1}
}
@media (max-width:760px){
  .ik-sec{padding-block:56px}
  .ik-diagram{display:none}
  .ik-mlist{display:grid;gap:12px}
  .ik-acts,.ik-two,.ik-charts,.ik-shots{grid-template-columns:1fr}
  .ik-tl::before{left:8px}
  .ik-tl > li{grid-template-columns:1fr;padding-left:32px}
  .ik-tl > li::before{left:2px;top:24px}
  .ik-tl .yr{flex-direction:row;align-items:center;font-size:22px}
  .ik-tl ul{grid-template-columns:1fr;padding-left:0;padding-top:8px}
  .ik-level{grid-template-columns:1fr}
  .ik-stats b{font-size:30px}
}
@media (prefers-reduced-motion:reduce){.ik-shot{transition:none}}