/* 경북인문사회연구원 — Design tokens (Tastea 레퍼런스 팔레트) */
:root {
  --main: #97AF8F;
  --main-deep: #6F8A67;
  --main-soft: #E3EADF;
  --pink: #EACBD1;
  --blue: #C0CFE6;
  --blue-soft: #D4E0EE;
  --ink: #1B1B1B;
  --ink-2: #4A4A4A;
  --ink-3: #8A8A8A;
  --line: #E6E6E6;
  --bg: #F6F6F6;
  --card: #FFFFFF;
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow: 0 24px 60px -24px rgba(40, 52, 36, .28);
  --shadow-sm: 0 8px 24px -12px rgba(40, 52, 36, .22);
  --font-display: "Outfit", "Pretendard Variable", "Pretendard", system-ui, sans-serif;
  --font-body: "Pretendard Variable", "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --wrap: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; line-height: 1.25; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--main-deep); outline-offset: 2px; border-radius: 6px; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 246, 246, .86);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.header.scrolled { border-bottom-color: var(--line); }
.header .wrap { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 14px; background: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.brand-mark img { width: 32px; height: 32px; }
.brand-text strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.brand-text span { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: .02em; font-family: var(--font-display); }
.gnb { display: flex; gap: 4px; margin-left: auto; }
.gnb > li { position: relative; list-style: none; }
.gnb { padding: 0; margin-top: 0; margin-bottom: 0; }
.gnb > li > a {
  display: block; padding: 9px 13px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: background .15s, color .15s;
}
.gnb > li > a:hover, .gnb > li > a.active { background: #fff; color: var(--ink); }
.gnb > li > a.active { box-shadow: inset 0 0 0 1.5px var(--main); }
.gnb .sub {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px);
  min-width: 210px; padding: 10px; margin: 0; list-style: none;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transition: .18s;
}
.gnb > li:hover .sub, .gnb > li:focus-within .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.gnb .sub a { display: block; padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.gnb .sub a:hover { background: var(--main-soft); color: var(--ink); }
.header-tools { display: flex; gap: 8px; align-items: center; }
.lang {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm);
}
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); place-items: center; }
.menu-btn span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.menu-btn span::before { top: -6px; } .menu-btn span::after { top: 6px; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.drawer-bg { position: absolute; inset: 0; background: rgba(27,27,27,.35); opacity: 0; transition: .2s; }
.drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 88vw);
  background: var(--bg); padding: 22px; overflow-y: auto;
  transform: translateX(100%); transition: transform .25s ease;
}
.drawer.open { pointer-events: auto; }
.drawer.open .drawer-bg { opacity: 1; }
.drawer.open .drawer-panel { transform: none; }
.drawer details { background: #fff; border-radius: var(--radius-md); margin-bottom: 8px; }
.drawer summary { padding: 14px 16px; font-weight: 700; list-style: none; cursor: pointer; display: flex; justify-content: space-between; }
.drawer summary::after { content: "+"; color: var(--main-deep); font-weight: 800; }
.drawer details[open] summary::after { content: "–"; }
.drawer details a { display: block; padding: 8px 16px; font-size: 14px; color: var(--ink-2); }
.drawer details a:last-child { padding-bottom: 14px; }
.drawer-close { width: 40px; height: 40px; border-radius: 12px; background: #fff; font-size: 22px; margin-left: auto; display: block; margin-bottom: 14px; }

/* ---------- Hero ---------- */
.hero { padding: 28px 0 40px; }
.hero-panel {
  position: relative; overflow: hidden;
  background: var(--main); color: #fff;
  border-radius: var(--radius-xl);
  min-height: 560px;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  padding: 64px 0 64px 64px;
}
.hero-curve { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; }
.hero-logo { width: 64px; height: 64px; border-radius: 18px; background: #fff; display: grid; place-items: center; margin-bottom: 40px; }
.hero-logo img { width: 46px; height: 46px; }
.eyebrow-light { font-size: 13px; letter-spacing: .08em; opacity: .9; font-family: var(--font-display); text-transform: uppercase; }
.hero h1 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; margin: 14px 0 18px; line-height: 1.22; }
.hero-sub { font-size: 17px; opacity: .95; max-width: 470px; }
.hero-meta { margin-top: 40px; font-size: 12px; letter-spacing: .06em; opacity: .85; line-height: 1.7; font-family: var(--font-display); }
.hero-actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 15px;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn svg, .more svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn { white-space: nowrap; }
.btn-white { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-ghost { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-green { background: var(--main); color: #fff; }
.btn-line { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }

/* floating device cards */
.hero-stage { position: relative; height: 470px; z-index: 2; }
.device {
  position: absolute; width: 250px; background: #fff; color: var(--ink);
  border-radius: 34px; padding: 18px; box-shadow: 0 30px 60px -20px rgba(30,40,28,.45);
  border: 7px solid #FBFBFB;
}
.device .d-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.device .d-dot { width: 46px; height: 6px; border-radius: 6px; background: var(--line); margin: 0 auto 14px; }
.device h4 { font-size: 17px; font-weight: 800; }
.device small { font-size: 11px; color: var(--ink-3); }
.d1 { left: 4%; top: 30px; transform: rotate(-24deg); }
.d2 { left: 40%; top: -6px; transform: rotate(-24deg); }
.d3 { left: 30%; top: 250px; transform: rotate(-24deg); }
.d-search { background: var(--bg); border-radius: 12px; padding: 9px 12px; font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
.d-chips { display: flex; gap: 6px; margin-bottom: 12px; }
.d-chip { flex: 1; text-align: center; border-radius: 12px; padding: 10px 2px 6px; font-size: 10px; font-weight: 700; }
.d-chip i { display: block; width: 26px; height: 26px; margin: 0 auto 4px; border-radius: 50%; background: rgba(255,255,255,.7); }
.d-feature { border-radius: 16px; background: var(--main); color: #fff; padding: 14px; min-height: 104px; position: relative; overflow: hidden; }
.d-feature b { font-size: 14px; display: block; line-height: 1.35; }
.d-feature span { display: inline-block; margin-top: 10px; background: #fff; color: var(--ink); font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.d-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.d-mini { border-radius: 12px; background: var(--bg); padding: 10px; font-size: 11px; font-weight: 700; }
.d-mini em { display: block; font-style: normal; font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.d-bar { height: 8px; border-radius: 8px; background: var(--bg); margin: 8px 0; overflow: hidden; }
.d-bar i { display: block; height: 100%; background: var(--main); border-radius: 8px; }
.blobs { position: absolute; right: -14px; bottom: -40px; z-index: 3; }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section-tight { padding: 40px 0; }
.sec-no { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.sec-no::before { content: ""; width: 12px; height: 12px; background: var(--main); border-radius: 2px; }
.sec-no sup { font-weight: 500; color: var(--ink-3); font-size: 10px; }
.sec-title { font-size: clamp(26px, 3vw, 34px); font-weight: 800; margin-bottom: 16px; }
.sec-lead { color: var(--ink-3); max-width: 640px; font-size: 16px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.more { font-size: 14px; font-weight: 700; color: var(--main-deep); display: inline-flex; gap: 6px; align-items: center; }
.more:hover { text-decoration: underline; }

.card { background: var(--card); border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.card-hover { transition: transform .18s, box-shadow .18s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

/* audience entry tiles */
.aud { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.icon-tile {
  width: 60px; height: 60px; border-radius: 16px; background: var(--main);
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
.icon-tile.pink { background: var(--pink); color: var(--ink); }
.icon-tile.blue { background: var(--blue); color: var(--ink); }
.icon-tile.soft { background: var(--blue-soft); color: var(--ink); }
.icon-tile svg { width: 28px; height: 28px; }
.aud h3 { font-size: 19px; font-weight: 800; }
.aud p { color: var(--ink-3); font-size: 14px; }
.aud .go { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--main-deep); }

/* about split */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-visual { position: relative; min-height: 420px; }
.about-visual .blob-bg { position: absolute; left: -80px; top: 10px; width: 260px; height: 300px; background: #fff; border-radius: 48% 52% 60% 40% / 50% 40% 60% 50%; }
.float-card {
  position: absolute; background: #fff; border-radius: 18px; padding: 14px; width: 170px;
  box-shadow: var(--shadow); font-size: 12px;
}
.float-card .ph { height: 84px; border-radius: 12px; margin-bottom: 10px; }
.float-card b { display: block; font-size: 13px; line-height: 1.35; }
.float-card small { color: var(--ink-3); }
.about-text p { color: var(--ink-2); margin-bottom: 14px; }
.cat-row { display: flex; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.cat-row figure { margin: 0; text-align: center; font-size: 13px; font-weight: 700; }
.cat-row .icon-tile { margin: 0 auto 8px; }

/* metrics */
.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.metric { background: #fff; border-radius: var(--radius-lg); padding: 26px; }
.metric .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 48px); letter-spacing: -0.03em; line-height: 1; }
.metric .num small { font-size: 18px; margin-left: 4px; font-weight: 700; }
.metric .lbl { margin-top: 10px; color: var(--ink-3); font-size: 14px; }
.metric .tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--main-soft); color: var(--main-deep); margin-bottom: 16px; }

/* axis cards */
.axis-card { border-radius: var(--radius-xl); padding: 40px; position: relative; overflow: hidden; min-height: 360px; display: flex; flex-direction: column; }
.axis-card.pink { background: var(--pink); }
.axis-card.blue { background: var(--blue); }
.axis-card .no { font-family: var(--font-display); font-size: 72px; font-weight: 800; line-height: 1; opacity: .9; }
.axis-card h3 { font-size: 26px; font-weight: 800; margin: 16px 0 12px; }
.axis-card p { color: var(--ink-2); max-width: 460px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; }
.pill.solid { background: var(--bg); }
.pill.green { background: var(--main-soft); color: var(--main-deep); }
.pill.pink { background: var(--pink); }
.pill.blue { background: var(--blue-soft); }
.axis-card .deco { position: absolute; right: -30px; bottom: -30px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.35); }

/* units */
.unit-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.unit-card .u-top { display: flex; justify-content: space-between; align-items: center; }
.unit-id { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--ink-3); }
.axis-dot { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.axis-dot.I { background: var(--pink); }
.axis-dot.II { background: var(--blue); }
.unit-card h3 { font-size: 17px; font-weight: 800; line-height: 1.35; }
.unit-card h3 span { display: block; font-size: 14px; font-weight: 600; color: var(--main-deep); margin-top: 2px; }
.unit-stats { display: flex; gap: 14px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto; }
.unit-stats b { color: var(--ink); font-family: var(--font-display); font-size: 15px; display: block; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.chip {
  padding: 8px 16px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line); transition: .15s;
}
.chip:hover { color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; box-shadow: none; }
.search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 999px; padding: 0 18px; box-shadow: inset 0 0 0 1px var(--line);
}
.search input { border: 0; outline: 0; font: inherit; padding: 11px 0; width: 100%; background: transparent; }
select.sel { font: inherit; font-size: 14px; padding: 9px 14px; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
.seg { display: inline-flex; background: #fff; border-radius: 999px; padding: 4px; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.seg button.on { background: var(--main); color: #fff; }

.inst-group { background: #fff; border-radius: var(--radius-lg); padding: 24px; display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; margin-bottom: 14px; }
.inst-group h3 { font-size: 18px; font-weight: 800; }
.inst-group .meta { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.inst-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.inst-unit { background: var(--bg); border-radius: var(--radius-md); padding: 14px 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; transition: .15s; }
.inst-unit:hover { background: var(--main-soft); }
.inst-unit small { font-weight: 500; color: var(--ink-3); font-size: 12px; }

/* page header (sub pages) */
.page-hero { padding: 28px 0 0; }
.page-hero .panel {
  background: var(--main); color: #fff; border-radius: var(--radius-xl); padding: 48px 56px;
  position: relative; overflow: hidden; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end;
}
.page-hero .panel.pink { background: var(--pink); color: var(--ink); }
.page-hero .panel.blue { background: var(--blue); color: var(--ink); }
.page-hero .crumb { font-size: 13px; opacity: .85; margin-bottom: 10px; }
.page-hero h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; }
.page-hero p { margin-top: 10px; max-width: 640px; opacity: .92; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 20px 0 4px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex-shrink: 0; padding: 10px 18px; border-radius: 999px; background: #fff; font-weight: 600; font-size: 14px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.tabs a.on { background: var(--ink); color: #fff; box-shadow: none; }

/* org chart */
.org { display: flex; flex-direction: column; align-items: center; gap: 0; }
.org-node { background: #fff; border-radius: var(--radius-md); padding: 16px 26px; text-align: center; font-weight: 800; box-shadow: var(--shadow-sm); }
.org-node.top { background: var(--ink); color: #fff; }
.org-node small { display: block; font-weight: 500; font-size: 12px; opacity: .75; }
.org-line { width: 2px; height: 28px; background: var(--main); }
.org-branch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; position: relative; padding-top: 28px; }
.org-branch::before { content: ""; position: absolute; top: 0; left: 16.6%; right: 16.6%; height: 2px; background: var(--main); }
.org-col { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.org-col::before { content: ""; position: absolute; top: -28px; width: 2px; height: 28px; background: var(--main); }
.org-col .org-node { width: 100%; }
.org-col .pink { background: var(--pink); }
.org-col .blue { background: var(--blue); }
.org-col .green { background: var(--main-soft); }
.org-col ul { margin: 0; padding: 14px 18px; list-style: none; background: #fff; border-radius: var(--radius-md); width: 100%; font-size: 13.5px; }
.org-col li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.org-col li:last-child { border: 0; }

/* greeting */
.greet { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.portrait { aspect-ratio: 3/4; border-radius: var(--radius-xl); background: var(--main-soft); position: relative; overflow: hidden; display: grid; place-items: end center; }
.portrait svg { width: 82%; }
.greet blockquote { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; margin: 0 0 24px; line-height: 1.45; }
.greet p { color: var(--ink-2); margin-bottom: 16px; }
.sign { margin-top: 26px; font-weight: 700; }
.sign span { display: block; font-size: 13px; color: var(--ink-3); font-weight: 500; }

/* table / list */
.list { background: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.list-row { display: grid; grid-template-columns: 110px 1fr 120px; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); align-items: center; font-size: 15px; }
.list-row:last-child { border: 0; }
.list-row:hover { background: #FBFBFB; }
.list-row .date { font-family: var(--font-display); color: var(--ink-3); font-size: 14px; text-align: right; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--bg); white-space: nowrap; }
.badge.green { background: var(--main-soft); color: var(--main-deep); }
.badge.pink { background: var(--pink); }
.badge.blue { background: var(--blue-soft); }
.badge.dark { background: var(--ink); color: #fff; }

.tbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-lg); overflow: hidden; font-size: 14px; }
.tbl th { text-align: left; font-weight: 700; color: var(--ink-3); font-size: 12.5px; padding: 14px 18px; background: #FBFBFB; border-bottom: 1px solid var(--line); }
.tbl td { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border: 0; }
.tbl-wrap { overflow-x: auto; border-radius: var(--radius-lg); }

/* events */
.ev-card { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: start; }
.ev-date { background: var(--main); color: #fff; border-radius: 16px; text-align: center; padding: 10px 0; font-family: var(--font-display); }
.ev-date b { display: block; font-size: 28px; line-height: 1; font-weight: 800; }
.ev-date span { font-size: 12px; opacity: .9; }
.ev-date.pink { background: var(--pink); color: var(--ink); }
.ev-date.blue { background: var(--blue); color: var(--ink); }
.ev-date.gray { background: var(--line); color: var(--ink-2); }
.ev-card h4 { font-size: 17px; font-weight: 800; margin: 6px 0 4px; font-family: var(--font-body); }
.ev-card .host { font-size: 13px; color: var(--ink-3); }

.cal { background: #fff; border-radius: var(--radius-lg); padding: 24px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cal-head h3 { font-size: 22px; font-weight: 800; }
.cal-nav button { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); font-weight: 800; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-3); padding: 6px 0; }
.cal-day { min-height: 92px; border-radius: 12px; background: var(--bg); padding: 8px; font-size: 12px; }
.cal-day.out { background: transparent; }
.cal-day .d { font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--main); }
.cal-ev { display: block; margin-top: 4px; padding: 3px 6px; border-radius: 6px; background: var(--main); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.pink { background: var(--pink); color: var(--ink); }
.cal-ev.blue { background: var(--blue); color: var(--ink); }

/* dashboard */
.chart-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.chart-card .sub { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-display); fill: var(--ink-3); font-size: 11px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.hbar { display: grid; grid-template-columns: 210px 1fr 44px; gap: 12px; align-items: center; font-size: 13px; padding: 5px 0; }
.hbar .track { height: 12px; background: var(--bg); border-radius: 12px; overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 12px; background: var(--main); transition: width .5s ease; }
.hbar .fill.I { background: #D9A9B3; }
.hbar .fill.II { background: #93AACF; }
.hbar .v { font-family: var(--font-display); font-weight: 700; text-align: right; }
.hbar .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note { font-size: 12px; color: var(--ink-3); margin-top: 12px; }
.tooltip { position: fixed; z-index: 90; pointer-events: none; background: var(--ink); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; opacity: 0; transition: opacity .1s; }

/* unit detail */
.ud-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.ud-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.ud-stats .metric { padding: 20px; }
.ud-stats .metric .num { font-size: 32px; }

/* challenge map */
.chal { display: grid; grid-template-columns: 1fr; gap: 14px; }
.chal-row { display: grid; grid-template-columns: 260px 1fr; gap: 20px; background: #fff; border-radius: var(--radius-lg); padding: 22px; align-items: center; }
.chal-row h4 { font-size: 18px; font-weight: 800; display: flex; gap: 12px; align-items: center; }
.chal-row p { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

/* programs */
.prog { border-radius: var(--radius-xl); padding: 34px; display: flex; flex-direction: column; gap: 14px; min-height: 360px; }
.prog.green { background: var(--main); color: #fff; }
.prog.pink { background: var(--pink); }
.prog.blue { background: var(--blue); }
.prog .pname { font-family: var(--font-display); font-size: 28px; font-weight: 800; }
.prog ul { margin: 0; padding: 0; list-style: none; }
.prog li { padding: 9px 0; border-top: 1px solid rgba(27,27,27,.12); font-size: 14px; font-weight: 600; }
.prog.green li { border-color: rgba(255,255,255,.3); }

/* forms */
.form { display: grid; gap: 14px; }
.form label { font-size: 13px; font-weight: 700; color: var(--ink-2); display: grid; gap: 6px; }
.form input, .form select, .form textarea {
  font: inherit; font-size: 15px; padding: 12px 16px; border-radius: 14px; border: 0;
  background: var(--bg); outline: 0; box-shadow: inset 0 0 0 1px transparent; transition: .15s;
}
.form input:focus, .form select:focus, .form textarea:focus { box-shadow: inset 0 0 0 2px var(--main); background: #fff; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:not([type="checkbox"]), .form select, .form textarea { width: 100%; min-width: 0; }
.grid > * { min-width: 0; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 14px; opacity: 0; transition: .25s; z-index: 95; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* gallery */
.gal { border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.gal .ph { aspect-ratio: 4/3; display: grid; place-items: center; }
.gal .ph svg { width: 46%; opacity: .85; }
.gal .cap { padding: 16px 18px; }
.gal .cap b { display: block; font-size: 15px; }
.gal .cap small { color: var(--ink-3); }

/* access levels */
.lvl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lvl .card { position: relative; }
.lvl .step { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--main); line-height: 1; }

/* footer */
.footer { background: var(--ink); color: #CFCFCF; margin-top: 80px; padding: 56px 0 40px; font-size: 14px; }
.footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.footer strong { color: #fff; font-size: 18px; display: block; margin-bottom: 8px; }
.footer h5 { color: #fff; margin: 0 0 12px; font-size: 14px; }
.footer a { display: block; padding: 3px 0; color: #BDBDBD; }
.footer a:hover { color: #fff; }
.footer .knu { background: #fff; border-radius: 12px; padding: 10px 14px; display: inline-block; margin-top: 18px; }
.footer .knu img { height: 34px; width: auto; }
.footer .copy { grid-column: 1 / -1; border-top: 1px solid #333; padding-top: 22px; font-size: 12px; color: #8A8A8A; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

.prose p { color: var(--ink-2); margin-bottom: 14px; }
.prose h3 { font-size: 20px; font-weight: 800; margin: 26px 0 12px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 10px 20px; font-size: 15px; }
.kv dt { color: var(--ink-3); font-weight: 600; }
.kv dd { margin: 0; font-weight: 600; }
.mt-s { margin-top: 14px; } .mt { margin-top: 24px; } .mt-l { margin-top: 48px; }
.empty { padding: 48px; text-align: center; color: var(--ink-3); background: #fff; border-radius: var(--radius-lg); }
.fade-in { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Event click ---------- */
.ev-click { cursor: pointer; transition: transform .18s, box-shadow .18s; }
.ev-click:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ev-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--main-deep); }
button.cal-ev { border: 0; width: 100%; text-align: left; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
button.cal-ev:hover { filter: brightness(.94); }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(27,27,27,.45); backdrop-filter: blur(3px); animation: fade .2s ease both; }
.modal-panel {
  position: relative; width: min(820px, 100%); max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--bg); border-radius: var(--radius-xl); box-shadow: 0 40px 80px -30px rgba(0,0,0,.5);
  animation: pop .25s ease both;
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-size: 22px; box-shadow: var(--shadow-sm); }
.m-head { padding: 36px 36px 28px; background: var(--main); color: #fff; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.m-head.pink { background: var(--pink); color: var(--ink); }
.m-head.blue { background: var(--blue); color: var(--ink); }
.m-head.gray { background: #DADADA; color: var(--ink); }
.m-head .pill { background: rgba(255,255,255,.75); color: var(--ink); }
.m-head h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; margin: 14px 40px 18px 0; font-family: var(--font-body); }
.m-meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 32px; margin: 0; font-size: 14px; }
.m-meta dt { opacity: .75; font-size: 12px; } .m-meta dd { margin: 0; font-weight: 700; }
.m-sec { background: #fff; border-radius: var(--radius-lg); padding: 24px; margin: 14px 18px 0; }
.m-sec h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; font-family: var(--font-body); }
.m-sec h3 small { color: var(--ink-3); font-weight: 600; font-size: 13px; }
.m-sec > p { color: var(--ink-2); }
.m-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.m-prog { width: 100%; border-collapse: collapse; font-size: 14px; }
.m-prog th { width: 64px; text-align: left; font-family: var(--font-display); color: var(--main-deep); padding: 8px 0; vertical-align: top; }
.m-prog td { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.m-prog tr:last-child td { border: 0; }
.m-papers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.m-papers details { background: var(--bg); border-radius: var(--radius-md); }
.m-papers summary { list-style: none; cursor: pointer; display: flex; gap: 14px; padding: 14px 16px; align-items: flex-start; }
.m-papers summary::-webkit-details-marker { display: none; }
.m-papers summary b { display: block; font-size: 15px; line-height: 1.4; }
.m-papers summary small { color: var(--ink-3); font-size: 12px; }
.pno { font-family: var(--font-display); font-weight: 800; color: var(--main-deep); flex-shrink: 0; }
.m-abs { padding: 0 16px 16px 50px; font-size: 14px; color: var(--ink-2); }
.m-abs .pills { margin-top: 10px; }
.m-acts { display: flex; gap: 16px; margin-top: 12px; }
.m-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 18px 18px 24px; }

/* ---------- 협업 네트워크 (옵시디언형) ---------- */
.gx { background: #1E1F1C; border-radius: var(--radius-xl); padding: 14px; color: #DADDD6; }
.gx-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.gx .search { background: #2A2C27; box-shadow: none; } .gx .search input { color: #fff; } .gx .search svg { color: #8C8F87; }
.gx-search { max-width: 320px; }
.gx .seg { background: #2A2C27; box-shadow: none; } .gx .seg button { color: #A9ADA3; } .gx .seg button.on { background: var(--main); color: #fff; }
.gx-toggles { display: flex; gap: 6px; }
.tg { cursor: pointer; } .tg input { display: none; }
.tg span { display: inline-flex; align-items: center; height: 42px; padding: 0 14px; border-radius: 999px; background: #2A2C27; font-size: 13px; font-weight: 700; color: #6F736A; transition: .15s; }
.tg input:checked + span { color: #fff; box-shadow: inset 0 0 0 1.5px var(--main); }
.gx-stage { position: relative; height: 640px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #2A2D27 0%, #1A1B18 70%); cursor: grab; user-select: none; touch-action: none; }
.gx-stage:active { cursor: grabbing; } .gx-stage.pointer { cursor: pointer; }
#gxSvg { width: 100%; height: 100%; display: block; }
.gl { stroke: #4A4D46; stroke-opacity: .7; transition: stroke .2s, stroke-opacity .2s; }
.gl.axis { stroke: #3B3E37; stroke-dasharray: 3 4; }
.gl.inst { stroke: #555950; }
.gl.collab { stroke: #7E9A74; }
.gl.collab.cross { stroke: #C9A24A; }
.gl.hi { stroke: #E8EEE5; stroke-opacity: 1; }
.gl.dim { stroke-opacity: .08; }
.gn circle { stroke: #1E1F1C; stroke-width: 2; transition: r .2s, opacity .25s, filter .2s; }
.gn text { fill: #C9CDC4; font: 600 11px var(--font-body); opacity: 0; transition: opacity .25s; pointer-events: none; paint-order: stroke; stroke: #1E1F1C; stroke-width: 3px; }
.gn.lbl text { opacity: .9; }
.gn.root text, .gn.axis text { font-size: 13px; font-weight: 800; fill: #fff; }
.gn.dim { opacity: .14; }
.gn.hi circle, .gn.match circle { filter: url(#glow); stroke: #fff; stroke-width: 2.5; }
.gn.hi text, .gn.nbr text { opacity: 1; fill: #fff; }
.gn.root circle { filter: url(#glow); }
.gn { transition: opacity .25s; }
.gx-zoom { position: absolute; right: 14px; top: 14px; display: grid; gap: 6px; }
.gx-zoom button { width: 36px; height: 36px; border-radius: 10px; background: #2A2C27; color: #E8EEE5; font-size: 18px; font-weight: 700; }
.gx-zoom button:hover { background: var(--main-deep); }
.gx-forces { position: absolute; left: 14px; top: 14px; display: grid; gap: 6px; background: rgba(42,44,39,.85); backdrop-filter: blur(6px); padding: 12px 14px; border-radius: 14px; font-size: 12px; width: 190px; }
.gx-forces b { color: #fff; font-size: 12px; }
.gx-forces label { display: grid; gap: 2px; color: #A9ADA3; }
.gx-forces input { accent-color: var(--main); width: 100%; }
.gx-panel { position: absolute; right: 64px; top: 14px; width: 280px; max-height: calc(100% - 28px); overflow: auto; background: rgba(42,44,39,.92); backdrop-filter: blur(8px); border-radius: 16px; padding: 16px; font-size: 13px; transition: transform .25s, opacity .25s; }
.gx-panel:not(.open) { background: rgba(42,44,39,.6); }
.gx-hint { margin: 0; color: #A9ADA3; line-height: 1.6; font-size: 12px; }
.gx-x { position: absolute; right: 10px; top: 8px; color: #fff; font-size: 20px; }
.gx-type { display: inline-block; padding: 3px 10px; border-radius: 999px; color: #1B1B1B; font-size: 11px; font-weight: 800; }
.gx-panel h4 { color: #fff; font-size: 16px; margin: 8px 0 10px; font-family: var(--font-body); }
.gx-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.gx-kv span { background: #1E1F1C; border-radius: 8px; padding: 6px 8px; color: #A9ADA3; } .gx-kv b { color: #fff; font-family: var(--font-display); margin-left: 4px; }
.gx-sub { color: #A9ADA3; margin: 6px 0; font-size: 12px; }
.gx-nb { display: grid; gap: 4px; margin-bottom: 12px; }
.gx-nb button { display: flex; gap: 8px; align-items: center; text-align: left; color: #E8EEE5; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; }
.gx-nb button:hover { background: #1E1F1C; } .gx-nb i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gx-legend { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #A9ADA3; }
.gx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.gx-legend .ln { display: inline-block; width: 18px; height: 2px; margin-right: 5px; vertical-align: middle; background: #7E9A74; } .gx-legend .ln.cross { background: #C9A24A; }
.gx-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.gx-stats div { background: #2A2C27; border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; }
.gx-stats span { font-size: 12px; color: #A9ADA3; } .gx-stats b { color: #fff; font: 800 15px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .gx-stage { height: 520px; } .gx-forces { display: none; } .gx-panel { right: 10px; left: 10px; width: auto; top: auto; bottom: 44px; max-height: 45%; } .gx-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- YouTube · Google 지도 ---------- */
.yt-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; }
.yt-item { display: grid; gap: 6px; text-align: left; padding: 6px; border-radius: 12px; background: var(--bg); font-size: 12.5px; font-weight: 600; transition: .15s; }
.yt-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }
.yt-item.on { box-shadow: 0 0 0 2px #E02424; background: #fff; }
.yt-thumb { aspect-ratio: 16 / 9 !important; }
.play-ic.yt { background: #E02424; color: #fff; border-radius: 16px; width: 68px; height: 48px; margin: -24px 0 0 -34px; }
.gmap { position: relative; height: var(--h, 380px); border-radius: 16px; overflow: hidden; background: var(--main-soft); }
.card > .gmap:first-child { border-radius: 0; }
.gmap-canvas { position: absolute; inset: 0; }
.gmap-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: var(--main-soft); }
.gmap-fallback svg { width: 100%; height: 100%; object-fit: cover; }
.gmap-ready .gmap-fallback { display: none; }
.gmap.gmap-fail .gmap-canvas { display: none; }
.gmap.gmap-fail .gmap-fallback { display: grid; }
.iw { font: 13px/1.6 var(--font-body); color: var(--ink); max-width: 260px; }
.iw a { color: var(--main-deep); font-weight: 700; }
.reg-pin { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 17px; display: grid; place-items: center; font: 800 13px var(--font-display); border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); cursor: pointer; transition: transform .15s; }
.reg-pin:hover { transform: scale(1.15); }
.span-all { grid-column: 1 / -1; }

/* ---------- 연구현황 대시보드 ---------- */
.dash-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 16px 20px; }
.dash-bar > div:first-child { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-bar b { font-size: 17px; } .dash-bar small { color: #B8C7B2; font-size: 12px; }
.dash-bar .seg { background: #2c3428; box-shadow: none; } .dash-bar .seg button { color: #C7D6C1; } .dash-bar .seg button.on { background: var(--main); color: #fff; }
.dash-bar .chip { background: #2c3428; color: #E8EEE5; box-shadow: none; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #9BE08C; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #9BE08C; box-shadow: 0 0 0 0 rgba(155,224,140,.7); animation: livePulse 1.8s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 8px rgba(155,224,140,0); } 100% { box-shadow: 0 0 0 0 rgba(155,224,140,0); } }
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.dash-grid > .card { animation: hmIn .6s both; min-width: 0; }
.dash-grid .span2 { grid-column: span 2; } .dash-grid .span3 { grid-column: 1 / -1; }
.dash .chart text { font-size: 11px; }
.tm { animation: tmIn .6s var(--d) cubic-bezier(.34,1.4,.64,1) both; transform-box: fill-box; transform-origin: center; }
.tm rect { transition: fill-opacity .2s; cursor: pointer; } .tm:hover rect { fill-opacity: 1; stroke: #1B1B1B; stroke-width: 2; }
@keyframes tmIn { from { opacity: 0; transform: scale(.6); } }
.sc-dot { animation: tmIn .6s var(--d) cubic-bezier(.34,1.56,.64,1) both; transform-box: fill-box; transform-origin: center; cursor: pointer; transition: fill-opacity .2s; }
.sc-dot:hover { fill-opacity: 1; stroke: #1B1B1B; }
.ac { display: grid; gap: 12px; margin: 8px 0 12px; }
.ac-row { display: grid; grid-template-columns: 34px 1fr 64px 1fr 34px; gap: 8px; align-items: center; font-size: 13px; }
.ac-n { text-align: center; font-weight: 700; color: var(--ink-2); }
.ac-v { font-family: var(--font-display); font-weight: 800; } .ac-v.l { text-align: right; }
.ac-bar { height: 14px; background: var(--bg); border-radius: 14px; display: flex; overflow: hidden; }
.ac-bar.l { justify-content: flex-end; }
.ac-bar i { width: 0; border-radius: 14px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.dash.in .ac-bar i, .dash.in .goal-bar i { width: var(--w); }
.goals { display: grid; gap: 14px; margin-top: 10px; }
.goal-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .goal-top span { color: var(--ink-3); font-family: var(--font-display); }
.goal-bar { position: relative; height: 12px; background: var(--bg); border-radius: 12px; }
.goal-bar i { display: block; height: 100%; width: 0; border-radius: 12px; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.goal-bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.hm-wrap { overflow-x: auto; }
.hm-tbl { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13px; }
.hm-tbl th { text-align: left; font-weight: 700; white-space: nowrap; }
.hm-tbl thead th { font-size: 12px; color: var(--ink-3); }
.hm-tbl tbody tr { animation: hmIn .5s var(--d) both; }
.hm-tbl tbody th a { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.hm-tbl tbody th i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.hm-tbl td { text-align: center; font-family: var(--font-display); font-weight: 700; border-radius: 6px; padding: 7px 4px; min-width: 56px; cursor: default; transition: transform .15s; }
.hm-tbl td:hover { transform: scale(1.12); box-shadow: 0 4px 12px rgba(0,0,0,.18); position: relative; z-index: 1; }
.hm-sort { font-weight: 700; color: var(--ink-3); padding: 4px 6px; border-radius: 8px; font-size: 12px; }
.hm-sort.on, .hm-sort:hover { color: var(--ink); background: var(--bg); }
.seq-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.seq-legend i { width: 26px; height: 10px; border-radius: 3px; } .seq-legend small { margin-left: 10px; }
.ranks { display: grid; gap: 8px; margin-top: 10px; }
.rank-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--bg); border-radius: 12px; font-size: 13px; animation: hmIn .5s var(--d) both; transition: transform .15s; }
.rank-row:hover { transform: translateX(4px); background: var(--main-soft); }
.rk { font: 800 16px var(--font-display); color: var(--main-deep); }
.rn { display: flex; gap: 8px; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .rn i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.rank-row .rg { font-weight: 800; font-family: var(--font-display); } .rank-row .up { color: #2F8350; } .rank-row .down { color: #B5475F; }
.mh { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.mh-cell { border-radius: 10px; padding: 10px; display: grid; gap: 2px; animation: tmIn .5s var(--d) both; transition: transform .15s; cursor: default; }
.mh-cell:hover { transform: scale(1.06); }
.mh-cell b { font-size: 11px; opacity: .8; } .mh-cell span { font: 800 20px var(--font-display); }
.stack1 { display: flex; height: 18px; border-radius: 9px; overflow: hidden; gap: 2px; margin: 12px 0 10px; }
.stack1 i { transition: flex .6s; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr 1fr; } .dash-grid .span2 { grid-column: 1 / -1; } }
@media (max-width: 640px) { .dash-grid { grid-template-columns: 1fr; } .ac-row { grid-template-columns: 28px 1fr 52px 1fr 28px; } }

/* ---------- 모션 그래픽 · 홍보 도구 · API 설정 · 편집 모드 ---------- */
.mo-frame { position: relative; width: min(100%, 420px); aspect-ratio: 4 / 5; margin: 12px auto 0; border-radius: 16px; overflow: hidden; background: #000; }
.mo-frame.big { width: min(100%, calc((100vh - 140px) * .8)); }
.mo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viewer.is-motion .viewer-box { width: min(560px, 100%); }
.promo-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.promo-btns .btn svg { width: 16px; height: 16px; }
.promo-l { display: grid; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.promo-in { font: inherit; font-size: 14px; font-weight: 400; padding: 12px 14px; border-radius: 12px; border: 0; background: var(--bg); width: 100%; outline: 0; line-height: 1.7; resize: vertical; }
.promo-in:focus { box-shadow: inset 0 0 0 2px var(--main); background: #fff; }
.promo-pre { white-space: pre-wrap; background: var(--bg); padding: 14px; border-radius: 12px; font: 14px/1.7 var(--font-body); }
.sms-b { font-weight: 500; color: var(--ink-3); } .sms-b b.over { color: #C0392B; }
.pc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pc { aspect-ratio: 1; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.pc-n { font: 800 10px var(--font-display); opacity: .7; }
.pc b { font-size: 15px; line-height: 1.3; outline: 0; } .pc p { font-size: 11.5px; line-height: 1.5; margin: 0; flex: 1; outline: 0; } .pc small { font-size: 9px; opacity: .7; }
.pc [contenteditable]:focus { box-shadow: 0 0 0 2px rgba(151,175,143,.8); border-radius: 4px; }
.api-box { width: min(620px, 100%); padding: 0; overflow: auto; }
.api-box .l-head { margin: 0; }
.api-body { padding: 18px 24px; display: grid; gap: 14px; }
.api-body fieldset { border: 0; background: var(--bg); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; }
.api-body legend { font-weight: 800; padding: 0; float: left; margin-bottom: 4px; }
.api-f { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; }
.api-f > div { display: flex; gap: 6px; }
.api-f input, .api-f select { font: inherit; font-size: 14px; font-weight: 400; padding: 9px 12px; border-radius: 10px; border: 0; background: #fff; width: 100%; outline: 0; box-shadow: inset 0 0 0 1px var(--line); }
.api-clear { padding: 0 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; white-space: nowrap; }
.api-r { font-size: 12.5px; } .api-r .ok { color: #2F8350; } .api-r .bad { color: #C0392B; }
.api-body fieldset .btn { justify-self: start; }
.mn-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mn-subs label { display: grid; gap: 2px; } .mn-subs small { color: var(--ink-3); font-size: 10px; }
.mn-subs input { font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; border: 0; box-shadow: inset 0 0 0 1px var(--line); }
body.edit-mode .ed-t { outline: 1px dashed rgba(47,131,80,.55); outline-offset: 2px; cursor: text; border-radius: 3px; }
body.edit-mode .ed-t:hover { background: rgba(155,224,140,.18); }
body.edit-mode .ed-t[contenteditable="true"] { outline: 2px solid #2F8350; background: #fff; color: var(--ink); }
.ed-img-host { position: relative; }
.ed-img-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; padding: 8px 14px; border-radius: 999px; background: rgba(27,27,27,.85); color: #fff; font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,.3); white-space: nowrap; }
[data-img-slot].has-img { background-size: cover !important; background-position: center !important; }
[data-img-slot].has-img > svg { display: none; }
body.admin .cal-day[data-date] { cursor: copy; transition: box-shadow .15s; }
body.admin .cal-day[data-date]:hover { box-shadow: inset 0 0 0 2px var(--main); }
body.admin .cal-day[data-date]:hover::after { content: "+ 행사 등록"; display: block; margin-top: 4px; font-size: 10px; font-weight: 800; color: var(--main-deep); }
.adm-bar { flex-wrap: wrap; justify-content: center; border-radius: 22px; }
@media (max-width: 760px) { .pc-grid { grid-template-columns: repeat(2, 1fr); } .api-f { grid-template-columns: 1fr; } }

/* ---------- 행사 첨부 파일 ---------- */
.att-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.att-list li { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 10px; align-items: center; background: var(--bg); border-radius: 12px; padding: 8px 10px; }
.att-ic { display: grid; place-items: center; height: 40px; border-radius: 10px; font: 800 11px var(--font-display); color: #fff; background: #3563C9; }
.att-ic.pdf { background: #C0392B; } .att-ic.img { background: #2F8350; }
.att-n { min-width: 0; } .att-n b { display: block; font-size: 14px; }
.att-n small { display: block; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-n i { font-style: normal; }
.att-list .btn svg { width: 14px; height: 14px; }
@media (max-width: 640px) { .att-list li { grid-template-columns: 40px 1fr auto; } .att-list li .btn-line { display: none; } }

/* ---------- 팝업 YouTube 관리 ---------- */
.yt-add { display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px; }
.yt-add input { font: inherit; font-size: 14px; padding: 10px 14px; border-radius: 10px; border: 0; background: #fff; outline: 0; min-width: 0; }
.yt-add input:focus { box-shadow: inset 0 0 0 2px var(--main); }
.yt-err { color: #C0392B; font-size: 12.5px; margin: 0; min-height: 0; }
.yt-mng { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.yt-mng li { display: grid; grid-template-columns: 72px 1fr auto auto auto; gap: 8px; align-items: center; background: #fff; border-radius: 10px; padding: 6px; }
.yt-mng img { width: 72px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.yt-mng span { min-width: 0; } .yt-mng b { display: block; font-size: 13px; } .yt-mng small { display: block; color: var(--ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-mng button { width: 30px; height: 30px; border-radius: 8px; background: var(--bg); font-weight: 800; }
.yt-mng button:disabled { opacity: .3; } .yt-mng button.del { width: auto; padding: 0 10px; background: #C0392B; color: #fff; font-size: 12px; }
@media (max-width: 640px) { .yt-add { grid-template-columns: 1fr; } .yt-mng li { grid-template-columns: 56px 1fr auto; } .yt-mng li button[data-yt-mv] { display: none; } }

/* ---------- 열린 소통 통합 ---------- */
.hub-stats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 18px; }
.hub-stat { background: #fff; border-radius: 16px; padding: 14px; display: grid; gap: 2px; animation: hmIn .5s calc(var(--o) * 60ms) both; transition: transform .15s, box-shadow .15s; }
.hub-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.hub-stat b { font: 800 26px var(--font-display); } .hub-stat b small { font-size: 12px; margin-left: 2px; } .hub-stat span { font-size: 12.5px; color: var(--ink-3); }
.hub-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.hub-feed h3 { font-size: 20px; font-weight: 800; font-family: var(--font-body); }
.hub-list { display: grid; gap: 6px; }
.hub-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; text-align: left; width: 100%; transition: background .15s, transform .15s; animation: hmIn .4s var(--d) both; }
.hub-row:hover { background: var(--bg); transform: translateX(3px); }
.hub-th { position: relative; width: 72px; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: var(--bg); }
.hub-th img { width: 100%; height: 100%; object-fit: cover; }
.hub-th i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.25); } .hub-th i svg { width: 22px; height: 22px; }
.hub-ic { width: 72px !important; height: 46px !important; border-radius: 10px !important; } .hub-ic svg { width: 22px; height: 22px; }
.hub-body { display: grid; gap: 3px; min-width: 0; } .hub-body .badge { justify-self: start; font-size: 11px; }
.hub-body b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-body small { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-date { font: 600 12px var(--font-display); color: var(--ink-3); white-space: nowrap; }
.hub-side { display: grid; gap: 14px; position: sticky; top: 92px; }
.hub-side .card { padding: 18px; }
.hub-h { font-size: 16px; font-weight: 800; margin-bottom: 10px; font-family: var(--font-body); }
.hub-ev { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 6px 0; }
.hub-ev .ev-date { padding: 6px 0; border-radius: 12px; } .hub-ev .ev-date b { font-size: 20px; }
.hub-ev b { display: block; font-size: 13.5px; line-height: 1.35; } .hub-ev small { color: var(--ink-3); font-size: 12px; }
.hub-side .form { gap: 8px; } .hub-side .form input { width: 100%; }
@media (max-width: 1100px) { .hub-stats { grid-template-columns: repeat(4, 1fr); } .hub-grid { grid-template-columns: 1fr; } .hub-side { position: static; } }
@media (max-width: 640px) { .hub-stats { grid-template-columns: repeat(2, 1fr); } .hub-row { grid-template-columns: 56px 1fr; } .hub-th, .hub-ic { width: 56px !important; } .hub-date { display: none; } }

/* ---------- 대시보드 하위 화면 ---------- */
.st-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.st { background: #fff; border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; min-width: 0; animation: hmIn .5s both; }
.st span { font-size: 12px; color: var(--ink-3); }
.st b { font: 800 20px var(--font-display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st b.up { color: #2F8350; } .st b.down { color: #B5475F; }
.st small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-an .st, .dsub .card .st { background: var(--bg); }
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.sm { text-align: left; background: var(--bg); border-radius: 14px; padding: 12px; display: grid; gap: 6px; transition: .15s; }
.sm:hover { transform: translateY(-2px); } .sm.on { box-shadow: inset 0 0 0 2px var(--ink); background: #fff; }
.sm-top { display: flex; justify-content: space-between; font-size: 13px; } .sm-top .up { color: #2F8350; font-weight: 800; }
.spark.big { width: 100%; height: 40px; }
.sm-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); } .sm-foot b { color: var(--ink); }
.area-in { animation: fade .9s ease both; }
.cm-row { animation: hmIn .45s var(--d) both; }
.cm-row:hover .cm-bar { fill-opacity: 1; stroke: #1B1B1B; stroke-width: 1.5; }
.strip-dot { cursor: pointer; transition: r .15s; } .strip-dot:hover { fill-opacity: 1; stroke: #1B1B1B; }
.vs-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.vs-head span:nth-child(2) { color: var(--ink-3); font-size: 11px; }
.vs-a { text-align: right; } .vs-b { color: #8A5A10; }
.dsub.in .ac-bar i, .dsub.in .goal-bar i, .dsub.in .gr-row .fill { width: var(--w); }
.net-an { margin-top: 18px; }
.net-an > .grid { gap: 16px; }
.tbl.cen td { font-family: var(--font-display); white-space: nowrap; padding: 10px 12px; }
.tbl.cen td a { font-family: var(--font-body); font-weight: 600; }
.mbar { display: inline-block; width: 56px; height: 6px; background: var(--bg); border-radius: 6px; margin-right: 8px; vertical-align: middle; overflow: hidden; }
.mbar i { display: block; height: 100%; background: #93AFA0; border-radius: 6px; } .mbar.b i { background: #2F8350; }
.mx2 { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 6px; align-items: center; margin: 12px 0; font-size: 12px; }
.mx2 > b { text-align: center; color: var(--ink-2); }
.mx2 > div { border-radius: 12px; padding: 18px 8px; text-align: center; display: grid; gap: 2px; transition: transform .15s; }
.mx2 > div:hover { transform: scale(1.04); }
.mx2 strong { font: 800 26px var(--font-display); } .mx2 small { font-size: 11px; opacity: .85; }
.hm-tbl.im th { font-size: 11px; } .hm-tbl.im thead th { writing-mode: vertical-rl; transform: rotate(180deg); height: 70px; text-align: left; padding: 2px; }
.hm-tbl.im td { min-width: 30px; padding: 6px 2px; font-size: 11px; } .hm-tbl.im td.diag { background: repeating-linear-gradient(45deg, #F4F4F4, #F4F4F4 3px, #fff 3px, #fff 6px); }
.hm-tbl.im tbody th i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.gr-rows { display: grid; gap: 4px; margin-top: 8px; }
.gr-row { display: grid; grid-template-columns: 190px 1fr 30px 90px 44px; gap: 10px; align-items: center; font-size: 12.5px; padding: 3px 0; animation: hmIn .45s var(--d) both; }
.gr-row .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-row .track { height: 12px; background: var(--bg); border-radius: 12px; overflow: hidden; }
.gr-row .fill { height: 100%; width: 0; border-radius: 12px; background: #93AFA0; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.gr-row .fill.I { background: #D0567A; } .gr-row .fill.II { background: #3563C9; }
.gr-row b { font-family: var(--font-display); text-align: right; }
.gr-row .dots { color: #2F8350; font-size: 9px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; }
.gr-row .ratio { color: var(--ink-3); text-align: right; font-family: var(--font-display); }
.ch-card { border-top: 4px solid var(--c); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.ch-top { display: flex; gap: 12px; align-items: center; } .ch-top h3 { font-size: 20px; font-weight: 800; font-family: var(--font-body); }
.ch-top .icon-tile { color: #fff; width: 46px; height: 46px; border-radius: 14px; }
.ch-card p { color: var(--ink-3); font-size: 13.5px; margin: 10px 0 14px; }
.ch-kpi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ch-kpi div { background: var(--bg); border-radius: 10px; padding: 8px 4px; text-align: center; display: grid; }
.ch-kpi b { font: 800 18px var(--font-display); } .ch-kpi span { font-size: 11px; color: var(--ink-3); }
.flow { transition: fill-opacity .2s; cursor: pointer; animation: fade 1s ease both; } .flow:hover { fill-opacity: .75; }
.hist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; height: 170px; margin: 14px 0 16px; }
.hb { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; gap: 4px; }
.hb-n { font: 800 18px var(--font-display); }
.hb i { align-self: end; height: 0; border-radius: 8px 8px 3px 3px; transition: height 1s cubic-bezier(.2,.8,.2,1); }
.dsub.in .hb i { height: var(--h); }
.hb small { font-size: 11px; color: var(--ink-3); }
.funnel { display: grid; gap: 8px; margin: 14px 0; justify-items: center; }
.fn { width: var(--w); display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 12px; background: #2F8350; color: #fff; font-size: 13px; animation: fnIn .7s var(--d) cubic-bezier(.2,.8,.2,1) both; min-width: 200px; }
.fn:nth-child(2) { background: #4F946A; } .fn:nth-child(3) { background: #73A887; } .fn:nth-child(4) { background: #9BC7A8; color: #1B1B1B; }
.fn b { font: 800 18px var(--font-display); }
@keyframes fnIn { from { opacity: 0; transform: scaleX(.3); } }
@media (max-width: 1100px) { .st-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .st-row { grid-template-columns: 1fr 1fr; } .gr-row { grid-template-columns: 110px 1fr 26px 40px; } .gr-row .dots { display: none; } .ch-kpi { grid-template-columns: repeat(3, 1fr); } .sm-grid { grid-template-columns: 1fr; } }

/* ---------- 관리자 업로드 막대 · 포스터 ---------- */
.up-sec { background: var(--main-soft) !important; box-shadow: inset 0 0 0 1.5px var(--main); padding: 16px 18px !important; }
.up-bar { display: grid; gap: 10px; }
.up-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.up-info b { font-size: 15px; }
.up-info small { color: var(--ink-3); font-size: 12px; }
.up-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.up-acts .seg { height: 36px; } .up-acts .seg button { height: 28px; padding: 0 12px; font-size: 13px; }
.up-acts .seg button:disabled { opacity: .4; cursor: not-allowed; }
.up-pick { cursor: pointer; }
.up-prog { position: relative; height: 26px; background: #fff; border-radius: 999px; overflow: hidden; }
.up-prog[hidden] { display: none; }
.up-prog i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--main), var(--main-deep)); transition: width .2s; }
.up-prog span { position: relative; display: block; font-size: 12px; font-weight: 700; padding: 4px 12px; color: var(--ink); mix-blend-mode: multiply; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-bar.busy { opacity: .75; pointer-events: none; }
.m-poster { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; }
.m-poster-img { padding: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s; }
.m-poster-img:hover { transform: translateY(-3px) rotate(-1deg); }
.m-poster-img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
@media (max-width: 640px) { .m-poster { grid-template-columns: 110px 1fr; gap: 14px; } }

/* ---------- 연구단 성과 시각화 ---------- */
.perf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.perf-head h3 { font-size: 20px; font-weight: 800; font-family: var(--font-body); }
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.kpi { background: #fff; border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 8px; animation: hmIn .6s calc(var(--o) * 70ms) cubic-bezier(.2,.8,.2,1) both; transition: transform .2s, box-shadow .2s; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kpi-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.kpi-dot { width: 10px; height: 10px; border-radius: 3px; }
.kpi-rank { margin-left: auto; font: 800 12px var(--font-display); background: var(--bg); padding: 3px 8px; border-radius: 999px; }
.kpi-rank small { font-weight: 500; color: var(--ink-3); }
.kpi .num { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.03em; }
.kpi .num small { font-size: 14px; margin-left: 3px; }
.kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--ink-3); min-height: 28px; }
.kpi-foot .up { color: #2F8350; font-weight: 700; } .kpi-foot .down { color: #B5475F; font-weight: 700; }
.spark { width: 96px; height: 28px; flex-shrink: 0; }
.lg-toggle { margin: 0 0 6px; }
.lg-toggle button { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 700; color: var(--ink-2); transition: opacity .2s; }
.lg-toggle button:not(.on) { opacity: .4; text-decoration: line-through; }
.chart .hit { cursor: crosshair; }
.chart .hit:hover { fill: rgba(27,27,27,.04); }
.bar-grow { transform-origin: 0 228px; transform-box: view-box; animation: barUp .7s var(--d) cubic-bezier(.2,.8,.2,1) both; }
@keyframes barUp { from { transform: scaleY(0); } }
.ln-draw { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 1.4s ease forwards; }
.donut-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.donut { width: 100%; max-width: 200px; }
.donut text { font-family: var(--font-display); fill: var(--ink-3); }
.dn-seg { animation: dnIn 1s var(--d) cubic-bezier(.2,.8,.2,1) both; cursor: pointer; transition: stroke-width .2s; }
.dn-seg:hover { stroke-width: 32; }
@keyframes dnIn { from { stroke-dasharray: 0 999; } }
.dn-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.dn-legend li { display: grid; grid-template-columns: 12px 1fr auto 44px; gap: 10px; align-items: center; }
.dn-legend i { width: 12px; height: 12px; border-radius: 3px; }
.dn-legend b { font-family: var(--font-display); }
.dn-legend small { color: var(--ink-3); text-align: right; }
.radar svg { max-width: 340px; margin: 0 auto; display: block; }
.rd-grow { transform-origin: 150px 140px; animation: rdIn .9s .2s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes rdIn { from { transform: scale(0); opacity: 0; } }
.bullets { display: grid; gap: 12px; }
.bullet { display: grid; grid-template-columns: 80px 1fr 110px; gap: 14px; align-items: center; font-size: 13.5px; }
.bl-n { font-weight: 700; color: var(--ink-2); }
.bl-track { position: relative; height: 14px; background: var(--bg); border-radius: 14px; }
.bl-fill { height: 100%; width: 0; border-radius: 14px; background: #93AFA0; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.bl-fill.top { background: #2F8350; }
.perf.in .bl-fill { width: var(--w); }
.bl-avg { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 2px; }
.bl-v { color: var(--ink-3); text-align: right; } .bl-v b { color: var(--ink); font-family: var(--font-display); }
.rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.rg { display: grid; justify-items: center; gap: 2px; font-size: 13px; }
.rg small { color: var(--ink-3); }
.ring { width: 92px; height: 92px; }
.ring text { font-family: var(--font-display); }
.rg-draw { stroke-dashoffset: var(--c); transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.perf.in .rg-draw { stroke-dashoffset: var(--off); }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ms { display: flex; gap: 12px; align-items: center; background: var(--bg); border-radius: 14px; padding: 14px; }
.ms .icon-tile { width: 42px; height: 42px; border-radius: 12px; }
.ms .icon-tile svg { width: 20px; height: 20px; }
.ms b { display: block; font: 800 22px var(--font-display); line-height: 1.1; }
.ms b small { font-size: 12px; margin-left: 2px; }
.ms span { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; } .kpi .num { font-size: 28px; } .spark { width: 70px; }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; } .dn-legend { width: 100%; }
  .bullet { grid-template-columns: 64px 1fr 76px; gap: 8px; } .rings { grid-template-columns: 1fr 1fr; } .mini-stats { grid-template-columns: 1fr; }
}
@media print { .header, .footer, .chat, .adm-bar, .page-hero .tabs, .perf-head .m-btns, .filters { display: none !important; } .kpi, .card { break-inside: avoid; } }

/* ---------- 필터 컨트롤 높이 통일 (검색 · 드롭다운 · 세그먼트 · 칩) ---------- */
.filters { align-items: center; }
.search { height: 42px; padding: 0 16px; gap: 8px; }
.search svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-3); }
.search input { padding: 0; height: 100%; font-size: 14px; }
select.sel { height: 42px; padding: 0 36px 0 16px; line-height: 42px; -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px; cursor: pointer; }
.seg { height: 42px; align-items: center; }
.seg button { height: 34px; padding: 0 16px; }
.filters .chip { height: 42px; padding: 0 18px; }

/* ---------- 관리자 모드 ---------- */
.adm-btn { width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); display: grid; place-items: center; color: var(--ink-3); transition: .2s; }
.adm-btn svg { width: 21px; height: 21px; }
.adm-btn:hover { color: var(--ink); }
.adm-btn.on { background: var(--ink); color: #9BE08C; box-shadow: 0 0 0 3px rgba(151,175,143,.5); }
.adm-login-box { width: min(400px, 100%); padding: 32px; display: grid; gap: 12px; }
.adm-login-box h2 { font-size: 22px; font-family: var(--font-body); }
.adm-login-box .form { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.adm-login-box input { font: inherit; font-size: 16px; padding: 12px 16px; border-radius: 12px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line); outline: 0; }
.adm-login-box input:focus { box-shadow: inset 0 0 0 2px var(--main); }
.adm-err { color: #C0392B; font-size: 13px; min-height: 1em; margin: 0; }
.adm-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 20px; background: var(--ink); color: #fff; border-radius: 999px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); font-size: 13px; max-width: calc(100vw - 32px); }
.adm-bar[hidden] { display: none; }
.adm-bar b { color: #9BE08C; white-space: nowrap; }
.adm-bar em { font-style: normal; color: #C7D6C1; }
.adm-bar button { padding: 7px 14px; border-radius: 999px; background: #2E3A2B; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.adm-bar button:hover { background: var(--main-deep); }
.adm-bar.pulse { animation: pulse .6s ease; }
@keyframes pulse { 40% { transform: translateX(-50%) scale(1.06); } }
body.admin .chat { bottom: 84px; }
.adm-item { position: relative; outline: 2px dashed transparent; outline-offset: 2px; transition: outline-color .15s; }
body.admin .adm-item:hover { outline-color: rgba(151,175,143,.9); }
.adm-tools { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; gap: 4px; }
tr.adm-item .adm-tools { position: static; display: inline-flex; margin-left: 8px; vertical-align: middle; }
.adm-tools button { padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--ink); color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.adm-tools button[data-adm-act="del"] { background: #C0392B; }
.list-row.adm-item .adm-tools { top: 50%; transform: translateY(-50%); }
.adm-add { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 18px; border-radius: 999px; background: var(--main-soft); color: var(--main-deep); font-weight: 800; font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--main); grid-column: 1 / -1; }
.adm-add span { font-size: 18px; line-height: 1; }
.adm-add:hover { background: var(--main); color: #fff; }
.adm-form { grid-column: 1 / -1; background: #fff; border-radius: var(--radius-lg); padding: 22px; box-shadow: 0 0 0 2px var(--main), var(--shadow); margin-bottom: 14px; animation: pop .25s ease both; text-align: left; }
.adm-form-row td { padding: 12px !important; background: var(--main-soft); }
.adm-form-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
.adm-form-head b { font-size: 17px; }
.adm-form-head small { color: var(--ink-3); font-size: 12px; }
.adm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.adm-grid label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ink-2); align-content: start; }
.adm-grid label.wide { grid-column: 1 / -1; }
.adm-grid input, .adm-grid select, .adm-grid textarea { font: inherit; font-size: 14px; font-weight: 400; padding: 10px 12px; border-radius: 10px; border: 0; background: var(--bg); outline: 0; width: 100%; min-width: 0; }
.adm-grid textarea { resize: vertical; line-height: 1.6; }
.adm-grid input:focus, .adm-grid select:focus, .adm-grid textarea:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--main); }
.adm-grid small { font-weight: 500; color: var(--ink-3); }
.ver { color: #B8C7B2; }
@media (max-width: 640px) { .adm-grid { grid-template-columns: 1fr 1fr; } .adm-bar span { display: none; } }

/* ---------- Hero motion graphics ---------- */
.hfx-panel { --mx: 70%; --my: 30%; isolation: isolate; }
.hfx-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255,255,255,.28), transparent 60%); transition: background .2s; }
.hfx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hfx > * { position: absolute; transition: translate .5s cubic-bezier(.2,.8,.2,1); }
.hfx-orb { border-radius: 50%; filter: blur(2px); animation: orb 14s ease-in-out infinite alternate; }
.hfx-orb.o1 { width: 340px; height: 340px; right: -60px; top: -140px; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.55), transparent 68%); }
.hfx-orb.o2 { width: 220px; height: 220px; right: 26%; bottom: -120px; background: radial-gradient(circle at 40% 40%, rgba(234,203,209,.7), transparent 70%); animation-duration: 11s; animation-delay: -3s; }
.hfx-orb.o3 { width: 160px; height: 160px; left: 38%; top: -70px; background: radial-gradient(circle at 40% 40%, rgba(192,207,230,.75), transparent 70%); animation-duration: 17s; animation-delay: -6s; }
.panel.blue .hfx-orb.o3 { background: radial-gradient(circle at 40% 40%, rgba(151,175,143,.55), transparent 70%); }
@keyframes orb { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 24px) scale(1.12); } 100% { transform: translate(30px, -18px) scale(.94); } }
.hfx-grid { inset: -40px; background-image: radial-gradient(rgba(255,255,255,.55) 1.2px, transparent 1.6px); background-size: 24px 24px; opacity: .35; -webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 75%); mask-image: linear-gradient(105deg, transparent 35%, #000 75%); animation: gridMove 30s linear infinite; }
.panel.pink .hfx-grid, .panel.blue .hfx-grid { background-image: radial-gradient(rgba(27,27,27,.28) 1.2px, transparent 1.6px); }
@keyframes gridMove { to { background-position: 240px 120px; } }
.hfx-curve { inset: 0; width: 100%; height: 100%; }
.hfx-curve .c1 { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.2s .2s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hfx-ring { width: 170px; height: 170px; right: 9%; top: 22%; animation: spin 26s linear infinite, popIn .9s .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes popIn { from { opacity: 0; scale: .3; } }
.hfx-blobs { width: 78px; height: 86px; right: 4.5%; bottom: 14%; fill: var(--ink); }
.hfx-blobs path { transform-box: fill-box; transform-origin: center; animation: blobIn .8s cubic-bezier(.34,1.56,.64,1) both, bob 4s ease-in-out infinite; }
.hfx-blobs path:nth-child(1) { animation-delay: .5s, 1.3s; } .hfx-blobs path:nth-child(2) { animation-delay: .62s, 1.8s; }
.hfx-blobs path:nth-child(3) { animation-delay: .74s, 2.3s; } .hfx-blobs path:nth-child(4) { animation-delay: .86s, 2.8s; }
@keyframes blobIn { from { opacity: 0; transform: scale(0) translateY(-30px); } }
@keyframes bob { 50% { transform: translateY(-5px) rotate(8deg); } }
.hfx-dot { left: var(--x); bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255,255,255,.75); animation: rise var(--t) var(--d) linear infinite; opacity: 0; }
.panel.pink .hfx-dot, .panel.blue .hfx-dot { background: rgba(27,27,27,.35); }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-260px) translateX(30px); opacity: 0; } }
.hm { animation: hmIn .8s calc(.15s + var(--o, 0) * .12s) cubic-bezier(.2,.8,.2,1) both; }
@keyframes hmIn { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }
.hm-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.hm-title .w > span { display: inline-block; animation: wordUp .9s calc(.25s + var(--i) * .07s) cubic-bezier(.34,1.4,.64,1) both; }
@keyframes wordUp { from { transform: translateY(110%) rotate(8deg); opacity: 0; } }
.page-hero .tabs a { animation: tabIn .5s calc(.5s + var(--o, 0) * .05s) cubic-bezier(.34,1.56,.64,1) both; }
@keyframes tabIn { from { opacity: 0; transform: translateY(10px) scale(.92); } }
.page-hero .panel { transition: box-shadow .3s; }
.page-hero .panel:hover { box-shadow: 0 30px 60px -30px rgba(40,52,36,.35); }
/* 팝업 헤더 모션 (행사 상세 · 재생기 · AI 도우미 · 관리자 로그인) */
.pop-fx { position: relative; overflow: hidden; }
.pop-fx > :not(.hfx) { position: relative; }
.hm-pop { animation: hmPop .6s calc(.15s + var(--o, 0) * .08s) cubic-bezier(.34,1.56,.64,1) both; }
@keyframes hmPop { from { opacity: 0; transform: scale(.5) translateY(8px); } }
.m-head.pop-fx { animation: headIn .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes headIn { from { background-position: 0 -40px; clip-path: inset(0 0 100% 0 round 0); } to { clip-path: inset(0 0 0 0 round 0); } }
.m-head .hfx-ring { width: 130px; height: 130px; right: 88px; top: 18px; }
.m-head .hfx-blobs { width: 54px; height: 60px; right: 26px; bottom: 18px; }
.m-head .hfx-orb.o1 { width: 280px; height: 280px; right: -40px; top: -120px; }
.m-head.gray .hfx-orb.o2 { background: radial-gradient(circle at 40% 40%, rgba(151,175,143,.5), transparent 70%); }
.m-head.gray .hfx-grid, .m-head.pink .hfx-grid, .m-head.blue .hfx-grid { background-image: radial-gradient(rgba(27,27,27,.28) 1.2px, transparent 1.6px); }
.m-head.gray .hfx-dot, .m-head.pink .hfx-dot, .m-head.blue .hfx-dot { background: rgba(27,27,27,.35); }
.m-head h2 .w { padding-bottom: .1em; }
/* 어두운 헤더(재생기 · 채팅 · 로그인)는 작은 장식만 */
.v-head { margin: -16px -16px 12px; padding: 16px; border-radius: 24px 24px 0 0; background: linear-gradient(120deg, #2a3326, #20261d 60%); }
.v-head .hfx-ring { width: 90px; height: 90px; right: 30%; top: -20px; }
.v-head .hfx-blobs, .c-head .hfx-blobs, .l-head .hfx-blobs { display: none; }
.v-head .hfx-grid, .c-head .hfx-grid { opacity: .18; }
.v-head .hfx-orb.o1 { width: 220px; height: 220px; right: 10%; top: -150px; background: radial-gradient(circle at 40% 40%, rgba(151,175,143,.55), transparent 70%); }
.v-head #vTitle .w { padding-bottom: .1em; }
.c-head { background: linear-gradient(120deg, #fff, var(--main-soft)) !important; }
.c-head .hfx-ring { width: 70px; height: 70px; right: 54px; top: -16px; }
.c-head .hfx-orb.o1 { width: 160px; height: 160px; right: -30px; top: -90px; background: radial-gradient(circle at 40% 40%, rgba(151,175,143,.6), transparent 70%); }
.c-head .hfx-dot { background: rgba(111,138,103,.55); }
.c-head .hfx-curve path { stroke: rgba(111,138,103,.5); }
.l-head { margin: -32px -32px 4px; padding: 32px 32px 26px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--main); color: #fff; display: grid; gap: 12px; }
.l-head .icon-tile { background: #fff; color: var(--main-deep); }
.l-head h2 { color: #fff; }
.l-head .hfx-ring { width: 110px; height: 110px; right: 20px; top: 14px; }

/* 홈 히어로 기기 카드 둥실둥실 */
.device { animation: floaty 6s ease-in-out infinite; }
.d2 { animation-delay: -2s; } .d3 { animation-delay: -4s; }
@keyframes floaty { 50% { translate: 0 -12px; } }
@media (max-width: 640px) { .hfx-ring { width: 110px; height: 110px; right: -20px; top: 10px; } .hfx-blobs { display: none; } .m-quick { grid-template-columns: 1fr; } .vt .btn { display: none; } }

/* ---------- Modal tabs · embed · card slider ---------- */
.m-tabs { display: flex; gap: 6px; padding: 14px 18px 0; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 3; background: var(--bg); }
.m-tabs button { flex-shrink: 0; padding: 9px 16px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.m-tabs button.on { background: var(--ink); color: #fff; box-shadow: none; }
.m-pane[hidden] { display: none; }
.m-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.m-sec-head .m-btns { margin: 0; }
.m-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #1d2219; margin-top: 12px; }
.m-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qbtn { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--bg); text-align: left; transition: transform .15s, background .15s; }
.qbtn:hover { transform: translateY(-2px); background: var(--main-soft); }
.qbtn svg { width: 22px; height: 22px; color: var(--main-deep); margin-bottom: 6px; }
.qbtn small { color: var(--ink-3); font-size: 12px; }
textarea.code { width: 100%; margin-top: 12px; font: 12.5px/1.5 ui-monospace, Consolas, monospace; padding: 12px 14px; border-radius: 12px; border: 0; background: #1d2219; color: #d8e6d2; resize: vertical; }

.cs { outline: none; }
.cs-stage { position: relative; overflow: hidden; border-radius: 16px; background: #111; aspect-ratio: 1; max-height: 70vh; margin: 0 auto; touch-action: pan-y; user-select: none; }
.cs-track { display: flex; height: 100%; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.cs-slide { flex: 0 0 100%; margin: 0; height: 100%; display: grid; place-items: center; }
.cs-slide img { width: 100%; height: 100%; object-fit: contain; }
.cs-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 26px; line-height: 1; box-shadow: var(--shadow-sm); }
.cs-nav.prev { left: 12px; } .cs-nav.next { right: 12px; }
.cs-count { position: absolute; right: 12px; top: 12px; background: rgba(0,0,0,.55); color: #fff; font: 700 12px var(--font-display); padding: 4px 10px; border-radius: 999px; }
.cs-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cs-dots { display: flex; gap: 6px; }
.cs-dots button { width: 8px; height: 8px; border-radius: 8px; background: var(--line); transition: width .25s, background .25s; }
.cs-dots button.on { width: 24px; background: var(--main-deep); }
.cs-tools { display: flex; gap: 6px; }
.cs-tools > * { padding: 7px 14px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line); }
.cs-thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; scrollbar-width: thin; }
.cs-thumbs button { flex: 0 0 64px; height: 64px; border-radius: 10px; overflow: hidden; opacity: .55; transition: opacity .2s, box-shadow .2s; }
.cs-thumbs button.on { opacity: 1; box-shadow: 0 0 0 3px var(--main); }
.cs-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* 팝업 재생기 */
.viewer { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.viewer[hidden] { display: none; }
.viewer-bg { position: absolute; inset: 0; background: rgba(12,14,11,.82); backdrop-filter: blur(6px); animation: fade .2s ease both; }
.viewer-box { position: relative; width: min(1100px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #20261d; color: #E8EEE5; border-radius: 24px; padding: 16px; animation: pop .25s ease both; }
.viewer.is-cards .viewer-box { width: min(720px, 100%); }
.viewer-box header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.viewer-box header > div:first-child { flex: 1; min-width: 0; }
.viewer-box header b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk { font-size: 12px; font-weight: 800; color: var(--main); letter-spacing: .04em; }
.vt { display: flex; gap: 6px; }
.vt .btn-line { background: #2c3428; color: #E8EEE5; box-shadow: inset 0 0 0 1px #3b4635; }
.viewer-x { width: 40px; height: 40px; border-radius: 50%; background: #2c3428; color: #fff; font-size: 22px; }
.v-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.v-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viewer .cs-tools > * { background: #2c3428; color: #E8EEE5; box-shadow: none; }
.viewer .cs-dots button { background: #3b4635; } .viewer .cs-dots button.on { background: var(--main); }

/* 미디어 카드 */
.media-card { text-align: left; padding: 0; width: 100%; display: block; }
.media-card[hidden] { display: none; }
.media-thumb { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--main-soft); border: 0; padding: 0; width: 100%; cursor: pointer; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.media-card:hover .media-thumb img, .gal:hover .media-thumb img { transform: scale(1.06); }
.play-ic { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .2s; }
.play-ic svg { width: 30px; height: 30px; }
.media-card:hover .play-ic, .gal:hover .play-ic { transform: scale(1.1); }
.media-kind { position: absolute; left: 12px; top: 12px; background: rgba(27,27,27,.75); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.media-card .cap { display: block; }
.gal .cap .pill { cursor: pointer; border: 0; font: inherit; font-size: 13px; font-weight: 600; }

/* ---------- AI ---------- */
.ai-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #fff; }
.ai-tag svg { width: 13px; height: 13px; }
.ai-box { background: linear-gradient(135deg, #fff 55%, var(--blue-soft)); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; box-shadow: inset 0 0 0 1.5px var(--blue); }
.ai-box-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-box-head b { font-size: 17px; }
.ai-mode.badge { margin-left: auto; background: var(--main-soft); color: var(--main-deep); }
.ai-desc { color: var(--ink-3); font-size: 14px; margin: 8px 0 14px; }
.ai-form { display: flex; gap: 8px; }
.ai-form input { flex: 1; min-width: 0; font: inherit; padding: 12px 18px; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: #fff; outline: 0; }
.ai-form input:focus { box-shadow: inset 0 0 0 2px var(--main); }
.ai-out { margin-top: 16px; background: #fff; border-radius: var(--radius-md); padding: 16px 20px; font-size: 14.5px; box-shadow: inset 0 0 0 1px var(--line); }
.ai-out p { margin: 0 0 8px; } .ai-out ul { margin: 0 0 8px; padding-left: 18px; } .ai-out li { margin-bottom: 4px; }
.ai-out i { color: var(--ink-3); font-style: normal; font-size: 12px; }
.ai-wait { color: var(--ink-3); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .4; } }
button:disabled { opacity: .55; cursor: wait; }
.ai-band { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; background: var(--blue-soft); border-radius: var(--radius-xl); padding: 40px; }
.ai-feat { display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: var(--radius-md); padding: 18px; text-align: left; transition: transform .15s, box-shadow .15s; }
.ai-feat:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ai-feat svg { width: 24px; height: 24px; color: var(--main-deep); margin-bottom: 6px; }
.ai-feat small { color: var(--ink-3); font-size: 13px; }

.chat { position: fixed; right: 24px; bottom: 24px; z-index: 90; }
.chat-fab { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; box-shadow: 0 16px 40px -12px rgba(0,0,0,.45); }
.chat-fab svg { width: 20px; height: 20px; }
.chat.open .chat-fab { display: none; }
.chat-panel { width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 48px)); background: var(--bg); border-radius: 26px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.45); display: flex; flex-direction: column; overflow: hidden; animation: pop .22s ease both; }
.chat-panel[hidden] { display: none; }
.chat-panel header { display: flex; gap: 12px; align-items: center; padding: 16px 18px; background: #fff; }
.chat-panel header .icon-tile svg { width: 20px; height: 20px; }
.chat-panel header b { display: block; } .chat-panel header small { color: var(--ink-3); font-size: 12px; }
.chat-x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); font-size: 20px; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.6; }
.msg p { margin: 0 0 6px; } .msg p:last-child { margin: 0; } .msg ul { margin: 0 0 6px; padding-left: 18px; }
.msg i { color: var(--ink-3); font-style: normal; font-size: 11.5px; }
.msg.bot { background: #fff; border-bottom-left-radius: 6px; align-self: flex-start; }
.msg.me { background: var(--main); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.chat-sugg { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.chat-sugg[hidden] { display: none; }
.chat-sugg button { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.chat-form { display: flex; gap: 8px; padding: 12px; background: #fff; }
.chat-form input { flex: 1; min-width: 0; font: inherit; font-size: 14px; border: 0; background: var(--bg); border-radius: 999px; padding: 10px 16px; outline: 0; }
.chat-form .btn { padding: 10px 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .gnb { display: none; }
  .menu-btn { display: grid; }
  .header-tools { margin-left: auto; }
}
@media (max-width: 980px) {
  .hero-panel { grid-template-columns: 1fr; padding: 48px 32px 0; }
  .hero-stage { height: 380px; margin-top: 10px; }
  .d1 { left: -4%; top: 40px; } .d2 { left: 36%; top: 0; } .d3 { left: 22%; top: 230px; }
  .about-split, .greet { grid-template-columns: 1fr; gap: 32px; }
  .about-visual { min-height: 340px; }
  .g4, .metric-strip, .ud-stats { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .inst-group, .chal-row { grid-template-columns: 1fr; }
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  .greet .portrait { max-width: 260px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .header .wrap { height: 66px; gap: 12px; }
  .brand-text span { display: none; }
  .lang { display: none; }
  .hero-panel { padding: 36px 22px 0; border-radius: 26px; min-height: 0; }
  .hero-logo { margin-bottom: 26px; width: 54px; height: 54px; }
  .hero-stage { height: 300px; transform: scale(.78); transform-origin: top left; width: 128%; }
  .blobs { display: none; }
  .section { padding: 52px 0; }
  .g2, .g3, .g4, .lvl { grid-template-columns: 1fr; }
  .metric-strip, .ud-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .metric { padding: 18px; }
  .axis-card { padding: 28px; min-height: 0; }
  .page-hero .panel { padding: 32px 24px; border-radius: 26px; }
  .list-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .list-row .date { text-align: left; }
  .hbar { grid-template-columns: 120px 1fr 36px; }
  .cal-day { min-height: 58px; padding: 5px; }
  .cal-ev, button.cal-ev { font-size: 0; height: 6px; padding: 0; }
  .footer .wrap { grid-template-columns: 1fr; }
  .ud-head { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
  .org-branch { grid-template-columns: 1fr; padding-top: 0; }
  .org-branch::before, .org-col::before { display: none; }
  .card { padding: 22px; }
  .modal { padding: 0; place-items: end center; }
  .modal-panel { max-height: 92vh; border-radius: 26px 26px 0 0; }
  .m-head { padding: 28px 22px 22px; border-radius: 26px 26px 0 0; }
  .m-meta { grid-template-columns: 1fr; }
  .m-sec { margin: 12px 12px 0; padding: 18px; }
  .m-abs { padding-left: 16px; }
  .ai-band { grid-template-columns: 1fr; padding: 26px 20px; }
  .ai-form { flex-direction: column; }
  .chat { right: 16px; bottom: 16px; }
  .chat-fab span { display: none; }
  .chat-fab { padding: 14px; }
}
@media (max-width: 980px) { .ai-band { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ===== v1.6 운영·확산 기능 ===== */
.adm-flag { padding: 4px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 800; background: #B87A1E; color: #fff; }
.adm-item.adm-hidden { outline: 2px dashed #B87A1E; outline-offset: 2px; opacity: .78; }
.adm-chk { width: 20px; height: 20px; accent-color: var(--main-deep); justify-self: start; }
/* 운영 도구 */
.ops-box { width: min(880px, 100%); padding: 0; overflow: auto; max-height: 92vh; }
.ops-box .l-head { margin: 0; }
.ops-tabs { position: sticky; top: 0; }
.ops-body { padding: 18px 24px; min-height: 260px; }
.ops-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ops-kpi { background: var(--bg); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.ops-kpi small { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.ops-kpi b { font-size: 17px; }
.ops-kpi.good b::before { content: "● "; color: #2F8350; }
.ops-kpi.bad b::before { content: "● "; color: #C0392B; }
.ops-note { margin-top: 14px; background: var(--main-soft); border-radius: 14px; padding: 14px 16px; font-size: 13.5px; line-height: 1.9; }
.ops-note code, .ops-head code, .tfa-steps code { background: #fff; padding: 1px 6px; border-radius: 6px; font-size: 12.5px; word-break: break-all; }
.ops-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ops-tbl td, .ops-tbl th { padding: 10px 12px; font-size: 13px; }
.ops-tbl .ua { color: var(--ink-3); font-size: 12px; }
.ops-acts { display: flex; gap: 12px; white-space: nowrap; }
.ops-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ops-card { background: var(--bg); border-radius: 16px; padding: 16px 18px; }
.ops-card h3 { font-size: 16px; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.ops-card .promo-in { background: #fff; }
.peek td { background: #FBFBFB; }
.peek-list { margin: 0; padding-left: 20px; font-size: 13px; columns: 2; }
.tfa-steps { padding-left: 18px; font-size: 13.5px; display: grid; gap: 10px; }
.qr { width: max-content; padding: 10px; background: #fff; border-radius: 12px; margin: 8px 0; }
.qr img, .qr canvas { display: block; }
/* 접근성 점검 */
.a11y-top { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.a11y-top > div:nth-child(2) { flex: 1; }
.a11y-score { width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; flex-shrink: 0; }
.a11y-score b { font-size: 26px; line-height: 1; } .a11y-score small { font-size: 11px; }
.a11y-score.good { background: #2F8350; } .a11y-score.mid { background: #B87A1E; } .a11y-score.bad { background: #C0392B; }
.a11y-rule { background: var(--bg); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.a11y-rule summary { cursor: pointer; display: flex; gap: 8px; align-items: center; }
.a11y-rule ul { margin: 8px 0 0; padding-left: 4px; list-style: none; font-size: 13px; display: grid; gap: 4px; }
.a11y-flag { outline: 3px solid #C0392B !important; outline-offset: 3px; animation: blink 1s ease-in-out 3; }
/* 설문 */
.sv-form { display: grid; gap: 10px; }
.sv-scale-note { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin: 0; }
.sv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sv-list fieldset { border: 0; padding: 12px 14px; margin: 0; background: var(--bg); border-radius: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sv-list legend { float: left; font-weight: 700; font-size: 14px; padding: 0; }
.sv-scale { display: flex; gap: 6px; }
.sv-scale label { position: relative; }
.sv-scale input { position: absolute; opacity: 0; inset: 0; }
.sv-scale span { display: grid; place-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-weight: 800; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.sv-scale input:checked + span { background: var(--main-deep); color: #fff; box-shadow: none; }
.sv-scale input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.sv-msg { color: #C0392B; font-size: 13px; margin: 0; }
.sv-done { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 26px 10px; }
.sv-done svg { width: 34px; height: 34px; color: var(--main-deep); }
.sv-bars { display: grid; gap: 8px; }
.sv-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr 44px; gap: 10px; align-items: center; font-size: 13px; text-align: left; width: 100%; }
.sv-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-row i { height: 10px; background: var(--bg); border-radius: 0 4px 4px 0; overflow: hidden; }
.sv-row i b { display: block; height: 100%; background: #2F8350; border-radius: 0 4px 4px 0; }
.sv-row em { font-style: normal; font-weight: 800; text-align: right; font-family: var(--font-display); }
button.sv-row:hover span { text-decoration: underline; }
.sv-c { margin: 8px 0 0; padding: 10px 14px; background: var(--bg); border-radius: 12px; font-size: 13.5px; }
.sv-c small { display: block; color: var(--ink-3); font-size: 11.5px; }
.sv-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sv-dash-grid h4 { font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
/* 출석 */
.ci-wrap { max-width: 640px; }
.ci-card { padding: 26px; }
.ci-ev h2 { font-size: 22px; margin-top: 8px; }
.ci-form { margin-top: 16px; }
.ci-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); margin: 6px 0 12px; }
.ci-consent input { margin-top: 4px; accent-color: var(--main-deep); }
.att-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.att-qr { background: var(--bg); border-radius: 16px; padding: 14px 16px; }
/* 영상 챕터 · 인용 */
.tc { font: inherit; font-weight: 800; color: var(--main-deep); background: var(--main-soft); border-radius: 6px; padding: 0 6px; }
.tc:hover { background: var(--main-deep); color: #fff; }
.cite-sec .m-sec-head { flex-wrap: wrap; gap: 10px; }
.cite-out { width: 100%; font-size: 12.5px; }
@media (max-width: 720px) {
  .ops-kpis { grid-template-columns: repeat(2, 1fr); }
  .ops-cols, .att-grid, .sv-dash-grid { grid-template-columns: 1fr; }
  .ops-body { padding: 14px 16px; }
  .sv-list fieldset { flex-direction: column; align-items: flex-start; }
}

/* ===== 연구성과 소개 · e-Book ===== */
.eb-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: end; margin-bottom: 26px; }
.eb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.eb-stats > div { background: #fff; border-radius: 18px; padding: 16px; }
.eb-stats small { color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
.eb-stats b { display: block; font-family: var(--font-display); font-size: 30px; line-height: 1.1; }
.eb-stats b small { font-size: 14px; margin-left: 2px; }
.eb-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }
.eb-card { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 18px; background: #fff; border-radius: var(--radius-lg); padding: 20px; transition: transform .25s, box-shadow .25s; }
.eb-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.eb-book { perspective: 900px; align-self: start; }
.eb-cover { display: block; aspect-ratio: 3 / 4.2; border-radius: 4px 12px 12px 4px; overflow: hidden; box-shadow: 0 18px 30px -16px rgba(20, 40, 20, .55), inset 6px 0 10px -6px rgba(0,0,0,.35); transform: rotateY(-12deg); transform-origin: left center; transition: transform .35s cubic-bezier(.2,.8,.2,1); background: var(--bg); }
.eb-book:hover .eb-cover, .eb-book:focus-visible .eb-cover { transform: rotateY(-2deg) translateX(2px); }
.eb-book:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
.eb-cover img { width: 100%; height: 100%; object-fit: cover; }
.eb-gen { display: flex; flex-direction: column; height: 100%; padding: 16px 14px 14px 18px; color: #fff; background: linear-gradient(155deg, var(--c1), var(--c2)); position: relative; }
.eb-gen::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.3); }
.eb-gen small { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; opacity: .85; }
.eb-gen b { font-family: "Gowun Batang", var(--font-display); font-size: 16px; line-height: 1.35; margin-top: 12px; }
.eb-gen i { margin-top: auto; font-style: normal; font-size: 11px; opacity: .8; }
.eb-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eb-meta .badge { align-self: flex-start; }
.eb-meta h3 { font-size: 18px; }
.eb-meta p { margin: 0; color: var(--ink-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.eb-meta small { color: var(--ink-3); font-size: 12.5px; }
.eb-meta .m-btns { margin-top: auto; padding-top: 8px; }
.hl-strip { grid-template-columns: repeat(5, 1fr); }
.hl-bars .sv-row { font-size: 13.5px; }
.hl-books { display: grid; gap: 10px; margin-bottom: 12px; }
.hl-book { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; text-align: left; padding: 6px; border-radius: 12px; }
.hl-book:hover { background: var(--bg); }
.eb-cover.sm { transform: none; }
.eb-cover.sm .eb-gen { padding: 6px; } .eb-cover.sm .eb-gen b { font-size: 8px; margin-top: 4px; } .eb-cover.sm .eb-gen i, .eb-cover.sm .eb-gen small { display: none; }
.hl-book small { display: block; color: var(--ink-3); font-size: 12px; }
.hl-ev h3 { font-size: 17px; margin-top: 8px; }
.eb-steps { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.eb-steps li { background: #fff; border-radius: 18px; padding: 18px; }
.eb-steps span { display: inline-grid; place-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--main-deep); color: #fff; font-weight: 800; margin-bottom: 8px; }
.eb-steps b { display: block; }
.eb-steps p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.eb-builder { background: #fff; border-radius: var(--radius-lg); padding: 18px; }
.eb-builder iframe { width: 100%; height: min(82vh, 860px); border: 0; border-radius: 14px; background: var(--bg); }
.up-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.up-inline input[type=text] { flex: 1; min-width: 200px; }
.up-inline .up-st { color: var(--ink-3); }
/* 뷰어 */
.eb-view { z-index: 120; }
.eb-panel { position: relative; width: min(1180px, 100%); height: min(94vh, 100%); background: #E9EEE6; border-radius: 22px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: var(--shadow); }
.eb-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 22px; background: #fff; }
.eb-head > div:first-child { flex: 1; min-width: 0; }
.eb-k { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.eb-head h2 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-page { font-size: 13px; color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.eb-acts { display: flex; gap: 6px; }
.eb-x { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); font-size: 16px; font-weight: 800; }
.eb-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) {
  .eb-intro { grid-template-columns: 1fr; }
  .eb-steps { grid-template-columns: 1fr; }
  .hl-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .eb-shelf { grid-template-columns: 1fr; }
  .eb-card { grid-template-columns: 104px 1fr; padding: 14px; gap: 14px; }
  .eb-panel { height: 100%; border-radius: 0; }
  .eb-acts .btn { padding: 6px 10px; }
  .eb-head { flex-wrap: wrap; padding: 10px 12px; }
  .eb-page { display: none; }
}
@media (max-width: 560px) { .eb-view { padding: 0; } }
.btn[hidden], .more[hidden] { display: none !important; }
/* 메뉴 9개: 좁은 데스크톱에서 간격 줄이기 */
@media (max-width: 1440px) { .gnb { gap: 2px; } .gnb > li > a { padding: 8px 9px; font-size: 14.5px; } }
@media (max-width: 1300px) { .gnb > li > a { padding: 8px 7px; font-size: 14px; letter-spacing: -0.02em; } }
@media (max-width: 1240px) { .gnb { display: none; } .menu-btn { display: grid; } .header-tools { margin-left: auto; } }
@media (max-width: 640px) { .adm-bar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; border-radius: 999px; bottom: 12px; width: calc(100vw - 24px); max-width: none; padding: 8px 10px 8px 16px; gap: 8px; } .adm-bar::-webkit-scrollbar { display: none; } }
/* AI 슬라이드 제작 */
.sl-up { padding: 20px; }
.sl-pick { display: flex; gap: 14px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.sl-pick .promo-l { flex: 1; min-width: 260px; }
.sl-pick select { width: 100%; }
#slBars { display: grid; gap: 10px; }

/* ---------- v1.7 좋아요(폭죽) · 댓글 ---------- */
.rx { display: flex; gap: 6px; align-items: center; margin-top: 12px; }
.rx button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: 600 13px var(--font-display); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.rx button:hover { border-color: var(--ink-3); color: var(--ink); }
.rx button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rx svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.rx .rx-like.on { color: #E0335A; border-color: #F4B5C3; background: #FFF0F3; }
.rx .rx-like.on svg { fill: currentColor; }
.rx .rx-like.pop svg { animation: rxPop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes rxPop { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.list-row.has-rx { grid-template-columns: 110px 1fr 120px auto; }
.list-row .rx { margin: 0; }
.ev-card > .rx { grid-column: 1 / -1; margin-top: 0; }
.gal .cap .rx { margin-top: 10px; }
.rx-wrap { display: flex; flex-direction: column; min-width: 0; }
.rx-wrap > .gal { flex: 1; }
.rx-wrap > .rx { margin-top: 8px; padding-left: 4px; }
.m-head .m-rx .rx { margin-top: 16px; }
.m-head .rx button { background: rgba(255,255,255,.92); border-color: transparent; }
@media (max-width: 760px) { .list-row.has-rx { grid-template-columns: 1fr; } }

.rx-fx { position: fixed; inset: 0; pointer-events: none; z-index: 140; overflow: hidden; }
.rx-p { position: absolute; display: block; will-change: transform, opacity; }
.rx-h svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.rx-ring { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #FF5A7A; transform: translate(-50%,-50%); animation: rxRing .6s ease-out forwards; }
@keyframes rxRing { to { width: 90px; height: 90px; opacity: 0; border-width: 1px; } }

.rx-dlg { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px; }
.rx-dlg[hidden] { display: none; }
.rx-dlg-bg { position: absolute; inset: 0; background: rgba(27,27,27,.45); backdrop-filter: blur(3px); animation: fade .2s ease both; }
.rx-dlg-panel { position: relative; width: min(560px, 100%); max-height: min(720px, calc(100vh - 40px)); display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.rx-dlg-panel header { padding: 24px 64px 16px 24px; border-bottom: 1px solid var(--line); }
.rx-dlg-panel header small { color: var(--ink-3); font-weight: 700; font-size: 12px; }
.rx-dlg-panel h2 { margin: 4px 0 0; font-size: 18px; line-height: 1.4; }
.rx-dlg-panel .modal-x { top: 14px; right: 14px; }
.rx-list { list-style: none; margin: 0; padding: 8px 24px; overflow-y: auto; flex: 1; min-height: 120px; }
.rx-list li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rx-list li:last-child { border: 0; }
.rx-list .rx-empty { display: block; color: var(--ink-3); text-align: center; padding: 28px 0; }
.rx-av { width: 34px; height: 34px; border-radius: 50%; background: var(--main-soft); color: var(--main-deep); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.rx-list b { font-size: 14px; }
.rx-list small { color: var(--ink-3); font-size: 12px; }
.rx-list p { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 14.5px; color: var(--ink-2); }
.rx-del { margin-left: 8px; border: 0; background: none; color: var(--ink-3); font-size: 12px; cursor: pointer; text-decoration: underline; }
.rx-form { display: grid; gap: 8px; padding: 14px 24px 20px; border-top: 1px solid var(--line); background: var(--bg); }
.rx-form input, .rx-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; background: #fff; resize: vertical; }
.rx-form input:focus, .rx-form textarea:focus { outline: 2px solid var(--main-deep); outline-offset: 0; border-color: transparent; }
.rx-row { display: flex; gap: 8px; align-items: center; }
.rx-row input[name=name] { max-width: 220px; }
.rx-hp { position: absolute !important; left: -9999px; width: 1px !important; height: 1px; opacity: 0; }
.rx-note { flex: 1; color: var(--ink-3); font-size: 12px; }
.rx-cnt { color: var(--ink-3); font: 12px var(--font-display); }
@media (prefers-reduced-motion: reduce) { .rx .rx-like.pop svg, .rx-ring { animation: none; } }
.rx-wrap:has(> [hidden]) { display: none; }
.rx-wrap:has(> .hub-row) { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
.rx-wrap > .hub-row { border-bottom: 0; }
.rx-wrap:has(> .hub-row) > .rx { margin: 0; padding: 0 16px 0 0; }
@media (max-width: 760px) { .rx-wrap:has(> .hub-row) { grid-template-columns: 1fr; } .rx-wrap:has(> .hub-row) > .rx { padding: 0 0 12px 16px; } }

/* ---------- v1.7 연구단별 저장소 업로드 ---------- */
.repo-auth { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 20px 24px; margin-bottom: 8px; }
.repo-auth svg { width: 28px; height: 28px; color: var(--main-deep); flex: none; }
.repo-auth small { color: var(--ink-3); }
.repo-auth.on { background: var(--main-soft); }
.repo-auth.on > div { flex: 1; }
.repo-auth.on a { color: var(--main-deep); font-weight: 700; }
.repo-auth-t { display: flex; gap: 14px; align-items: center; flex: 1 1 320px; }
.repo-auth-f { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 420px; justify-content: flex-end; }
.repo-auth-f input { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; height: 38px; font: inherit; font-size: 14px; min-width: 180px; }
.repo-hint { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border: 1px dashed var(--line); border-radius: var(--radius-md); background: #fff; color: var(--ink-2); font-size: 14px; flex-wrap: wrap; }
.repo-hint svg { width: 22px; height: 22px; color: var(--ink-3); flex: none; }
.repo-hint span { flex: 1 1 260px; }
.repo-up { display: grid; gap: 14px; }
.repo-up-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.repo-up-head h3 { margin: 0; font-size: 18px; display: flex; gap: 8px; align-items: center; }
.repo-up-head h3 svg { width: 20px; height: 20px; color: var(--main-deep); }
.repo-up-head small { color: var(--ink-3); }
.repo-drop { position: relative; display: grid; place-items: center; text-align: center; min-height: 110px; padding: 18px; border: 2px dashed #C9D6C4; border-radius: var(--radius-md); background: #FAFCF9; cursor: pointer; transition: border-color .15s, background .15s; }
.repo-drop:hover, .repo-drop.over { border-color: var(--main-deep); background: var(--main-soft); }
.repo-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.repo-drop small { color: var(--ink-3); }
.repo-grid { display: grid; grid-template-columns: 2fr 1fr 110px 140px; gap: 10px; }
.repo-grid label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.repo-grid .wide { grid-column: 1 / -1; }
.repo-grid input, .repo-grid select, .repo-grid textarea { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 14px; font-weight: 400; background: #fff; width: 100%; }
.repo-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.repo-st { flex: 1; color: var(--ink-3); font-size: 13px; }
.repo-prog { flex-basis: 100%; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.repo-prog i { display: block; height: 100%; width: 0; background: var(--main-deep); transition: width .2s; }
.repo-pw { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 14px 0; padding: 16px 18px; border-radius: var(--radius-md); background: #FFF7E6; border: 1px solid #F2D79A; }
.repo-pw > div { flex: 1 1 240px; }
.repo-pw small { color: var(--ink-2); }
.repo-pw code { font: 700 20px/1 ui-monospace, Consolas, monospace; letter-spacing: .04em; background: #fff; padding: 10px 14px; border-radius: 10px; user-select: all; }
@media (max-width: 760px) { .repo-grid { grid-template-columns: 1fr 1fr; } .repo-grid label:first-child { grid-column: 1 / -1; } .repo-auth-f { justify-content: stretch; } .repo-auth-f > * { flex: 1 1 100%; } }

/* ---------- v1.7 공지 고정 · 팝업 ---------- */
.ntc-row { cursor: pointer; }
.ntc-row.pinned { background: #FBFCF9; }
.ntc-pin { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700; vertical-align: 2px; }
.ntc-pin svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.ntc-flag { margin-right: 8px; vertical-align: 2px; }
.ntc-panel header small { display: flex; gap: 6px; align-items: center; }
.ntc-img { display: block; width: 100%; max-height: 46vh; object-fit: contain; background: var(--bg); }
.ntc-body { padding: 18px 24px; overflow-y: auto; flex: 1; font-size: 15px; line-height: 1.75; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.ntc-body a { color: var(--main-deep); text-decoration: underline; }
.ntc-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg); flex-wrap: wrap; }
.ntc-pager { display: flex; align-items: center; gap: 8px; font: 600 13px var(--font-display); color: var(--ink-3); }
.ntc-pager button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.ntc-today { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); margin-left: auto; cursor: pointer; }
.ntc-dlg { z-index: 125; }

/* ---------- v1.7 뉴스레터 ---------- */
.nl-add { display: grid; gap: 14px; margin-bottom: 8px; }
.nl-url { display: flex; gap: 8px; }
.nl-url input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; height: 40px; font: inherit; font-size: 14px; }
.nl-fill { display: grid; gap: 12px; }
.nl-prev img { max-height: 160px; max-width: 100%; border-radius: 12px; display: block; }
.nl-prev:empty { display: none; }
.nl-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.nl-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; flex: 1; }
.nl-th { position: relative; aspect-ratio: 16/9; background: var(--main-soft); display: grid; place-items: center; overflow: hidden; }
.nl-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .3s; }
.nl-ic svg { width: 46px; height: 46px; color: var(--main-deep); }
.nl-link:hover .nl-th img { transform: scale(1.04); }
.nl-meta { display: grid; gap: 6px; padding: 16px 18px 4px; justify-items: start; }
.nl-meta b { font-size: 16.5px; line-height: 1.45; }
.nl-desc { color: var(--ink-2); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nl-src { color: var(--ink-3); font-size: 12.5px; }
.nl-card > .rx { padding: 0 18px 16px; }
.nl-sub { display: grid; gap: 12px; }
.nl-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nl-sub-grid label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.nl-terms { font-size: 12.5px; color: var(--ink-3); }
.nl-terms summary { cursor: pointer; }
.nl-terms p { margin: 6px 0 0; }
.subs-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.subs-kpi div { background: var(--bg); border-radius: 14px; padding: 14px 16px; }
.subs-kpi b { display: block; font: 800 26px/1.1 var(--font-display); }
.subs-kpi small { color: var(--ink-3); }
.subs-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.subs-q { flex: 1 1 240px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; height: 38px; font: inherit; font-size: 14px; }
.subs-tools small { color: var(--ink-3); }
@media (max-width: 760px) { .nl-sub-grid, .subs-kpi { grid-template-columns: 1fr 1fr; } }
.sl-pick .promo-l:first-child { flex: 0 1 230px; min-width: 200px; }

/* ---------- v1.7 관리자 설정 패널 (오른쪽 위 톱니) ---------- */
.adm-gear { position: relative; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); display: grid; place-items: center; transition: transform .2s, background .2s; }
.adm-gear[hidden] { display: none; }
.adm-gear svg { width: 21px; height: 21px; transition: transform .4s; }
.adm-gear:hover svg, .adm-gear.on svg { transform: rotate(60deg); }
.adm-gear.on { background: var(--main-deep); }
.adm-gear.editing::after { content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #FFB020; box-shadow: 0 0 0 2px var(--ink); }
.adm-bar { top: 78px; right: 16px; left: auto; bottom: auto; transform: none; width: 300px; max-width: calc(100vw - 32px); max-height: calc(100vh - 100px); overflow-y: auto; flex-direction: column; align-items: stretch; flex-wrap: nowrap; justify-content: flex-start; gap: 10px; padding: 16px; border-radius: 20px; animation: admPop .18s ease both; }
@keyframes admPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.adm-pop-head { display: flex; justify-content: space-between; align-items: center; }
.adm-pop-x { width: 30px; height: 30px; padding: 0 !important; border-radius: 50% !important; font-size: 18px !important; background: transparent !important; color: #C7D6C1 !important; }
.adm-pop-help { margin: 0; font-size: 12.5px; color: #C7D6C1; line-height: 1.5; }
.adm-pop-grp { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid #333; }
.adm-pop-grp small { color: #8FA38A; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.adm-bar .adm-pop-grp button { text-align: left; border-radius: 12px; padding: 9px 12px; }
.adm-bar .adm-out { background: transparent; border: 1px solid #444; text-align: center !important; }
.adm-pop-ver { color: #7D8A79; font-size: 11px; }
@media (max-width: 640px) { .adm-bar { top: 70px; right: 12px; left: 12px; bottom: auto; width: auto; border-radius: 18px; overflow-y: auto; } .adm-bar span { display: initial; } }

.key-form { display: grid; gap: 12px; margin: 14px 0; padding: 18px; border-radius: var(--radius-md); background: var(--bg); }
.key-form h4 { margin: 0; font-size: 16px; }
.key-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 4px 2px; }
.key-units fieldset { margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: #fff; }
.key-units legend { font-size: 12.5px; font-weight: 800; padding: 0 4px; }
.key-units label { display: flex; gap: 6px; align-items: center; font-weight: 500; font-size: 13.5px; padding: 2px 0; }
.key-units small { color: var(--ink-3); }
.key-pw { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.key-pw .promo-l { flex: 1 1 260px; }
.key-auto { display: flex; gap: 6px; align-items: center; font-size: 13.5px; padding-bottom: 10px; }

/* ===== v1.8 AI 기능 ===== */
.rp-box { margin-bottom: 18px; border: 1.5px solid var(--main, #2F8350); }
.rp-opts { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 12px 18px; margin: 14px 0 6px; align-items: start; }
.rp-opts .rp-focus { grid-column: 1 / -1; }
.rp-custom { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.rp-custom input { width: 64px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.rp-est { display: block; color: var(--ink-3); margin-top: 6px; }
.rp-stat { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; }
.rp-doc { line-height: 1.75; margin-top: 12px; }
.rp-doc:empty { display: none; }
.rp-box .rp-doc { max-height: 640px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; }
.rp-doc h1 { font-size: 22px; margin: 4px 0 12px; }
.rp-doc h2 { font-size: 18px; margin: 22px 0 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.rp-doc h3 { font-size: 16px; margin: 16px 0 6px; }
.rp-doc table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 14px; }
.rp-doc th, .rp-doc td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
.rp-doc th { background: rgba(47, 131, 80, .08); }
.rp-doc li.sub { margin-left: 18px; list-style: circle; }
.rp-doc blockquote { margin: 10px 0; padding: 4px 12px; border-left: 3px solid var(--main, #2F8350); color: var(--ink-3); }
.rp-src { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.repo-ai { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.repo-ai small { color: var(--ink-3); }
.chat-log a, .ai-out a { color: var(--main, #2F8350); text-decoration: underline; }
/* 학술동향 */
.post-grid { align-items: stretch; }
.post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; }
.post-img { aspect-ratio: 3 / 2; background: linear-gradient(135deg, #DCEBDD, #C0CFE6); display: grid; place-items: center; overflow: hidden; }
.post-img img { width: 100%; height: 100%; object-fit: cover; }
.post-ph { font-weight: 700; font-size: 20px; color: #2F5E3F; opacity: .7; }
.post-txt { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.post-txt h3 { font-size: 17px; line-height: 1.4; margin: 2px 0 0; }
.post-txt p { margin: 0; color: var(--ink-3); font-size: 14px; flex: 1; }
.post-txt small { color: var(--ink-3); }
.post-panel { max-width: 820px; }
.post-body { padding: 0 28px 28px; }
.post-hero { width: calc(100% + 56px); margin: 0 -28px 18px; max-height: 420px; object-fit: cover; display: block; }
.post-body h2#postT { font-size: 26px; line-height: 1.35; margin: 8px 0 8px; }
.post-sum { color: var(--ink-3); font-size: 16px; border-left: 3px solid var(--main, #2F8350); padding-left: 12px; }
.post-meta { padding-top: 22px; }
.pw-form { display: flex; flex-direction: column; gap: 14px; }
.pw-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: end; }
.pw-chk { flex-direction: row; display: flex; gap: 8px; align-items: center; }
.pw-out { border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }
.pw-img { border: 1px dashed var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pw-img legend { font-weight: 700; padding: 0 6px; }
.pw-prev img { max-width: 100%; max-height: 360px; border-radius: 12px; display: block; }
.pw-pub { border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 720px) {
  .rp-opts { grid-template-columns: 1fr; }
  .post-body { padding: 0 16px 20px; }
  .post-hero { width: calc(100% + 32px); margin: 0 -16px 14px; }
}
.rp-hw { display: inline-flex; gap: 6px; align-items: center; }
.rp-hw .sel { padding: 6px 8px; font-size: 13px; }


/* ===== v1.8 홈 히어로 모션 강화 ===== */
.hero-x { --hx: .5; --hy: .5; isolation: isolate; }
.hero-aurora, .hero-grid, .hero-spot, .hero-sparks { position: absolute; inset: 0; pointer-events: none; }
.hero-aurora { z-index: 0; overflow: hidden; }
.hero-aurora i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; mix-blend-mode: screen; }
.hero-aurora i:nth-child(1) { width: 520px; height: 520px; left: -120px; top: -180px; background: radial-gradient(circle, #DFF5C8 0%, transparent 65%); animation: hxOrbA 16s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(2) { width: 460px; height: 460px; right: -80px; top: 30%; background: radial-gradient(circle, #C0CFE6 0%, transparent 65%); animation: hxOrbB 19s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(3) { width: 380px; height: 380px; left: 35%; bottom: -200px; background: radial-gradient(circle, #EACBD1 0%, transparent 65%); opacity: .4; animation: hxOrbC 22s ease-in-out infinite alternate; }
@keyframes hxOrbA { to { transform: translate(140px, 90px) scale(1.2); } }
@keyframes hxOrbB { to { transform: translate(-160px, -60px) scale(.85); } }
@keyframes hxOrbC { to { transform: translate(-120px, -80px) scale(1.25); } }
.hero-grid { z-index: 0; opacity: .22; background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(420px 320px at calc(var(--hx) * 100%) calc(var(--hy) * 100%), #000 0%, transparent 70%); mask-image: radial-gradient(420px 320px at calc(var(--hx) * 100%) calc(var(--hy) * 100%), #000 0%, transparent 70%);
  animation: gridMove 30s linear infinite; }
.hero-spot { z-index: 1; opacity: 0; transition: opacity .5s; background: radial-gradient(520px circle at calc(var(--hx) * 100%) calc(var(--hy) * 100%), rgba(255,255,255,.22), transparent 60%); }
.hero-x.hx-hover .hero-spot { opacity: 1; }
.hero-x .hero-curve { z-index: 1; }
.hc-anim #hcP1 { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hxDraw 2.4s .3s cubic-bezier(.6, 0, .2, 1) forwards; }
.hc-anim #hcP2 { animation: hxDash 18s linear infinite; }
@keyframes hxDraw { to { stroke-dashoffset: 0; } }
@keyframes hxDash { to { stroke-dashoffset: -1; } }
.hc-dot { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(223,245,214,.9)); opacity: 0; animation: hxFade .6s 2.4s forwards; }
.hc-dot.d2 { animation-delay: 2.8s; }
@keyframes hxFade { to { opacity: 1; } }
.hero-sparks { z-index: 1; overflow: hidden; }
.hero-sparks i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 0 10px rgba(255,255,255,.8); opacity: 0; animation: hxRise var(--t) var(--d) linear infinite; }
@keyframes hxRise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: .9; } 80% { opacity: .5; } 100% { transform: translate(40px, -620px) scale(1.1); opacity: 0; } }
/* 등장 연출 */
.hero-x .hx { opacity: 0; transform: translateY(22px); filter: blur(6px); }
.hero-x.hx-in .hx { animation: hxUp .9s calc(var(--o) * 90ms + 150ms) cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes hxUp { to { opacity: 1; transform: none; filter: none; } }
.hero-x .hero-logo.hx { transform: scale(.4) rotate(-20deg); }
.hero-x.hx-in .hero-logo.hx { animation-name: hxLogo; animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hxLogo { to { opacity: 1; transform: none; filter: none; } }
.hx-line { display: block; overflow: hidden; padding-bottom: .06em; }
.hx-line > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom; }
.hero-x.hx-in .hx-line > span { animation: hxLine 1s calc(var(--o) * 140ms + 300ms) cubic-bezier(.2, .9, .2, 1) forwards; }
@keyframes hxLine { to { transform: none; } }
.hx-shine { font-style: normal; background: linear-gradient(100deg, #fff 0%, #fff 40%, #E6FFD9 50%, #fff 60%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hxShine 5s 2s ease-in-out infinite; }
@keyframes hxShine { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }
.hx-type { display: inline-block; clip-path: inset(0 100% 0 0); }
.hero-x.hx-in .hx-type { animation: hxReveal 1.2s .3s steps(28, end) forwards; }
@keyframes hxReveal { to { clip-path: inset(0 0 0 0); } }
.hx-mag { transition: translate .25s cubic-bezier(.2, .8, .2, 1), transform .15s, box-shadow .2s; }
.hero-x .btn-white.hx-mag:hover { box-shadow: 0 10px 30px -8px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.18); }
/* 기기 카드: 비행 진입 + 마우스 3D 기울기 */
.hero-x .hero-stage { perspective: 1100px; }
.hero-x .device { opacity: 0; scale: .7; filter: blur(10px);
  transform: rotateX(calc((var(--hy) - .5) * -14deg)) rotateY(calc((var(--hx) - .5) * 18deg)) rotate(-24deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.hero-x.hx-in .device { animation: hxDev 1.2s cubic-bezier(.2, .9, .25, 1.15) forwards, floaty 6s 1.4s ease-in-out infinite; }
.hero-x.hx-in .d1 { animation-delay: .45s, 1.6s; } .hero-x.hx-in .d2 { animation-delay: .6s, 1.9s; } .hero-x.hx-in .d3 { animation-delay: .75s, 2.2s; }
@keyframes hxDev { from { opacity: 0; scale: .7; filter: blur(10px); translate: 160px 60px; } to { opacity: 1; scale: 1; filter: none; translate: 0 0; } }
.hero-x .d1 { --dz: 40px; } .hero-x .d2 { --dz: 70px; } .hero-x .d3 { --dz: 100px; }
.hero-x.hx-hover .device { box-shadow: calc((var(--hx) - .5) * -40px) calc(30px + (var(--hy) - .5) * -30px) 60px -20px rgba(30,40,28,.5); }
.hero-x .device::after { content: ""; position: absolute; inset: -7px; border-radius: 34px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 48%, transparent 62%); background-size: 260% 100%; background-position: 120% 0; mix-blend-mode: soft-light; animation: hxGlint 6s 2.2s ease-in-out infinite; }
.hero-x .d2::after { animation-delay: 3.2s; } .hero-x .d3::after { animation-delay: 4.2s; }
@keyframes hxGlint { 0%, 60% { background-position: 120% 0; } 85%, 100% { background-position: -40% 0; } }
.hx-caret { display: inline-block; width: 1.5px; height: 1em; background: var(--ink-3); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(2) infinite; }
.hero-x .d-bar i { transform-origin: left; animation: hxBar 3.6s 1.2s cubic-bezier(.5, 0, .2, 1) infinite; }
.hero-x .d-bar + .d-bar i { animation-delay: 1.6s; }
@keyframes hxBar { 0% { transform: scaleX(0); } 45%, 80% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: .5; } }
.hero-x .d-chip i { animation: hxChip 2.4s ease-in-out infinite; }
.hero-x .d-chip:nth-child(2) i { animation-delay: .3s; } .hero-x .d-chip:nth-child(3) i { animation-delay: .6s; }
@keyframes hxChip { 50% { transform: scale(1.18); background: #fff; } }
.hero-x .d-feature::before { content: ""; position: absolute; width: 120px; height: 120px; right: -40px; top: -40px; border-radius: 50%; background: rgba(255,255,255,.18); animation: hxPulse 3s ease-in-out infinite; }
@keyframes hxPulse { 50% { transform: scale(1.35); opacity: .4; } }
.hero-x .blobs path { transform-box: fill-box; transform-origin: center; animation: blobIn .7s cubic-bezier(.3, 1.6, .5, 1) both, bob 3.2s ease-in-out infinite; }
.hero-x .blobs path:nth-child(1) { animation-delay: 1.1s, 1.8s; } .hero-x .blobs path:nth-child(2) { animation-delay: 1.2s, 2.2s; }
.hero-x .blobs path:nth-child(3) { animation-delay: 1.3s, 2.6s; } .hero-x .blobs path:nth-child(4) { animation-delay: 1.4s, 3s; }
@media (prefers-reduced-motion: reduce) {
  .hero-x .hx, .hero-x .device, .hx-line > span, .hx-type { opacity: 1 !important; transform: none !important; filter: none !important; scale: 1 !important; clip-path: none !important; animation: none !important; }
  .hero-x .device { transform: rotate(-24deg) !important; }
  .hero-aurora i, .hero-grid, .hero-sparks, .hc-dot, .hero-x .device::after, .hero-x .d-bar i, .hero-x .d-chip i, .hero-x .blobs path, .hx-shine { animation: none !important; }
  .hc-anim #hcP1 { stroke-dashoffset: 0; animation: none; }
  .hero-sparks, .hc-dot { display: none; }
}
@media (max-width: 960px) { .hero-aurora i { filter: blur(40px); } .hero-sparks i:nth-child(n+9) { display: none; } }

.api-pick { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.api-pick select { width: 100%; }
.api-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

.greet .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; display: block; }

/* ===== 대문 실시간 설문 ===== */
.poll-live { font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.poll { display: flex; flex-direction: column; gap: 12px; }
.poll-head { display: flex; justify-content: space-between; align-items: center; }
.poll-total { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.poll h3 { font-size: 19px; line-height: 1.4; margin: 0; }
.poll-opts { display: flex; flex-direction: column; gap: 8px; }
.poll-opt { --w: 0%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  padding: 12px 16px; border-radius: 14px; background: var(--bg, #F6F6F6); border: 1.5px solid transparent; font-weight: 600; font-size: 15px; cursor: pointer; transition: border-color .2s, transform .15s; }
.poll-opt:hover { border-color: var(--c); transform: translateX(2px); }
.poll-opt:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.poll-bar { position: absolute; inset: 0 auto 0 0; width: var(--w); background: color-mix(in srgb, var(--c) 22%, transparent); transition: width .9s cubic-bezier(.2, .8, .2, 1); border-radius: 14px; }
.poll-t, .poll-pct { position: relative; }
.poll-pct { font-size: 13px; color: var(--ink-2, #4A4A4A); font-variant-numeric: tabular-nums; white-space: nowrap; }
.poll-opt.mine { border-color: var(--c); }
.poll-opt.mine .poll-t::before { content: "✓ "; color: var(--c); font-weight: 800; }
.poll-opt.bump .poll-pct { animation: pollBump .6s ease; }
@keyframes pollBump { 40% { transform: scale(1.25); color: var(--c); } }
.poll-note { margin: 0; font-size: 12px; color: var(--ink-3); }
/* ===== 집중교육 ===== */
.course-card .post-img { position: relative; }
.course-st { position: absolute; left: 12px; top: 12px; }
.course-cat { color: var(--ink-3); font-weight: 700; }
.course-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.course-meta span { display: inline-flex; align-items: center; gap: 4px; }
.course-meta svg { width: 14px; height: 14px; }
.edu-kpi { grid-template-columns: repeat(4, 1fr); }
.edu-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 720px) { .edu-kpi { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .poll-bar { transition: none; } .poll-opt.bump .poll-pct { animation: none; } }
.edu-kpi .metric small { display: block; color: var(--ink-3); font-size: 13px; }
.edu-kpi .metric b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 800; margin-top: 4px; }
.edu-kpi .metric b small { display: inline; font-size: 14px; margin-left: 2px; }

/* ===== 집중교육 강의 재생 ===== */
.lsn { margin-top: 16px; }
.lsn-player { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #111; }
.lsn-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lsn-now { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-top: 10px; }
.lsn-now b { color: var(--main, #2F8350); }
.lsn-now .more { margin-left: auto; font-size: 13px; }
.lsn-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lsn-list button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--bg, #F6F6F6); border: 1.5px solid transparent; cursor: pointer; font-size: 14px; }
.lsn-list button:hover { border-color: var(--line); }
.lsn-list button.on { border-color: var(--main, #2F8350); background: rgba(47, 131, 80, .08); }
.lsn-no { font-weight: 800; color: var(--ink-3); min-width: 34px; font-variant-numeric: tabular-nums; }
.lsn-list button.on .lsn-no, .lsn-list button.on .lsn-play { color: var(--main, #2F8350); }
.lsn-t { flex: 1; }
.lsn-play { color: var(--ink-3); font-size: 11px; }
.course-lsn { font-weight: 800; color: var(--main, #2F8350); }
@media (max-width: 720px) { .lsn-list { grid-template-columns: 1fr; } }

/* ===== 강의실: 모션 그래픽 오버레이 ===== */
.lsn-player { isolation: isolate; }
.lsn-player .lsn-yt, .lsn-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lsn-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #ccc; }
.ov { position: absolute; inset: 0; pointer-events: none; z-index: 2; font-family: var(--font-display, inherit); transition: opacity .4s; }
.ov.off { opacity: 0; }
.ov.off .ov-end { opacity: 1; }
.ov-prog { position: absolute; left: 14px; right: 14px; top: 10px; display: flex; gap: 4px; z-index: 3; }
.ov-prog i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); overflow: hidden; position: relative; }
.ov-prog i.done { background: rgba(155,224,140,.85); }
.ov-prog i.cur { background: rgba(255,255,255,.35); }
.ov-prog i.cur::after { content: ""; position: absolute; inset: 0; background: #9BE08C; transform-origin: left; animation: ovFill 2.4s ease-in-out infinite; }
@keyframes ovFill { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); opacity: 0; } }
.ov-badge { position: absolute; left: 14px; top: 22px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(15,25,18,.62); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); opacity: 0; transform: translateY(-8px); transition: .5s; }
.ov-badge i { width: 7px; height: 7px; border-radius: 50%; background: #9BE08C; box-shadow: 0 0 0 0 rgba(155,224,140,.7); animation: livePulse 1.6s infinite; }
.st-play .ov-badge, .st-pause .ov-badge { opacity: 1; transform: none; }
/* 주차 표지 */
.ov-intro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 30% 20%, rgba(47,131,80,.92), rgba(18,40,28,.94) 60%), #12281C; transition: opacity .7s, transform .7s; }
.st-play .ov-intro, .st-pause .ov-intro, .st-end .ov-intro { opacity: 0; transform: scale(1.04); }
.ov-intro-in { position: relative; z-index: 2; max-width: 82%; animation: ovIn 1s cubic-bezier(.2,.8,.2,1) both; }
.ov-intro small { display: block; font-size: 12px; letter-spacing: .04em; opacity: .85; }
.ov-wk { display: block; font-size: clamp(34px, 7vw, 64px); font-weight: 800; line-height: 1.05; margin: 6px 0 4px; background: linear-gradient(90deg, #fff, #CFF5C4, #fff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hxShine 4s ease-in-out infinite; }
.ov-wk em { font-style: normal; font-size: .38em; opacity: .7; margin-left: 6px; -webkit-text-fill-color: rgba(255,255,255,.7); }
.ov-intro h4 { font-size: clamp(16px, 2.6vw, 24px); margin: 4px 0 8px; }
.ov-intro p { font-size: 13px; opacity: .9; margin: 0 auto 12px; max-width: 520px; }
.ov-hint { display: inline-block; font-size: 12px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.14); animation: blink 2s ease-in-out infinite; }
.ov-ring { position: absolute; border: 1.5px solid rgba(255,255,255,.18); border-radius: 50%; }
.ov-ring.r1 { width: 520px; height: 520px; left: -160px; top: -200px; animation: spin 40s linear infinite; border-style: dashed; }
.ov-ring.r2 { width: 360px; height: 360px; right: -120px; bottom: -160px; animation: spin 30s linear infinite reverse; }
.ov-scan { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0, rgba(155,224,140,.12) 50%, transparent 100%); background-size: 100% 40%; background-repeat: no-repeat; animation: ovScan 4s linear infinite; }
@keyframes ovScan { from { background-position: 0 -40%; } to { background-position: 0 140%; } }
@keyframes ovIn { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
/* 하단 자막 띠 */
.ov-lower { position: absolute; left: 14px; bottom: 58px; display: flex; align-items: stretch; max-width: 70%; color: #fff; opacity: 0; transform: translateX(-30px); transition: .6s cubic-bezier(.2,.8,.2,1); }
.lw-on .ov-lower { opacity: 1; transform: none; }
.st-idle .ov-lower, .st-end .ov-lower { opacity: 0; }
.ov-lw-no { display: grid; place-items: center; padding: 0 12px; background: #2F8350; font-weight: 800; font-size: 20px; border-radius: 10px 0 0 10px; }
.ov-lw-t { display: flex; flex-direction: column; justify-content: center; padding: 8px 14px; background: rgba(12,20,15,.78); backdrop-filter: blur(6px); border-radius: 0 10px 10px 0; }
.ov-lw-t b { font-size: 15px; } .ov-lw-t small { font-size: 11px; opacity: .8; }
/* 핵심 내용 카드 */
.ov-point { position: absolute; right: 14px; top: 52px; width: min(42%, 300px); }
.st-idle .ov-point, .st-end .ov-point { display: none; }
.ov-card { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 12px; border-radius: 12px; background: rgba(255,255,255,.9); color: #1B1B1B; box-shadow: 0 8px 24px -10px rgba(0,0,0,.5); position: relative; overflow: hidden; animation: ovCard 9s ease both; }
.ov-card-h { font-size: 11px; font-weight: 800; color: #2F8350; letter-spacing: .03em; }
.ov-card-t { font-size: 13px; font-weight: 600; line-height: 1.4; }
.ov-card-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: #2F8350; animation: ovBar 9s linear both; }
@keyframes ovCard { 0% { opacity: 0; transform: translateX(30px); } 6%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(10px); } }
@keyframes ovBar { from { width: 0; } to { width: 100%; } }
.st-pause .ov-card { animation-play-state: paused; } .st-pause .ov-card-bar { animation-play-state: paused; }
/* 끝 화면 */
.ov-end { position: absolute; inset: 0; display: none; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: rgba(12,20,15,.82); color: #fff; text-align: center; padding: 20px; }
.st-end .ov-end { display: flex; animation: ovIn .6s both; }
.ov-end b { font-size: 22px; }
.ov-end button { pointer-events: auto; padding: 10px 18px; border-radius: 999px; background: #fff; color: #1B1B1B; font-weight: 700; cursor: pointer; }
/* 주차 목록 · 관리자 */
.lsn-list li { display: flex; gap: 6px; align-items: stretch; }
.lsn-list li > button { flex: 1; }
.lsn-list li.on > button { border-color: var(--main, #2F8350); background: rgba(47, 131, 80, .08); }
.lsn-list li.on .lsn-no, .lsn-list li.on .lsn-play { color: var(--main, #2F8350); }
.lsn-no { min-width: 44px; }
.lsn-adm { display: flex; gap: 2px; align-items: center; }
.lsn-adm button { padding: 4px 6px; font-size: 11px; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; }
.lsn-adm button:hover:not(:disabled) { background: var(--bg, #F6F6F6); color: var(--ink); }
.lsn-adm button:disabled { opacity: .3; }
.lsn-admbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.lsn-form:not(:empty) { margin-top: 12px; }
.lsn-now button.more { background: none; border: 0; cursor: pointer; padding: 0; font-size: 13px; }
.plan-list { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.plan-row { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: 10px; align-items: center; }
.plan-row small { display: block; color: var(--ink-3); }
.plan-yt { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 720px) { .plan-row { grid-template-columns: 1fr; } .ov-point { display: none; } .ov-lower { bottom: 48px; max-width: 86%; } .lsn-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ov *, .ov { animation: none !important; transition: none !important; } }

.eb-subtabs { margin-bottom: 20px; display: inline-flex; }
.eb-subtabs a { padding: 8px 16px; display: inline-flex; gap: 6px; align-items: center; }
.eb-subtabs a { border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.eb-subtabs a.on { background: var(--main); color: #fff; }
.eb-subtabs a.on .badge { background: rgba(255,255,255,.25); color: #fff; }

/* ===== 성과 대시보드 AI 분석 인포그래픽 ===== */
.ins-sec { padding-top: 0; }
.ins-card { border: 1.5px solid rgba(47,131,80,.35); }
.ins-view { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.ins-head { padding: 22px 24px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #1F5E3A, #2F8350 55%, #5E9F77); position: relative; overflow: hidden; }
.ins-head::after { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -120px; border-radius: 50%; background: rgba(255,255,255,.12); }
.ins-tag { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); }
.ins-tag svg { width: 14px; height: 14px; }
.ins-head h3 { font-size: clamp(20px, 2.6vw, 28px); margin: 10px 0 6px; line-height: 1.35; }
.ins-head p { margin: 0; opacity: .92; max-width: 760px; }
.ins-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ins-kpi { padding: 16px; border-radius: 16px; background: var(--bg, #F6F6F6); display: flex; flex-direction: column; gap: 4px; animation: insUp .6s calc(var(--i) * 90ms) both; }
.ins-kpi small { color: var(--ink-3); font-weight: 700; }
.ins-kpi b { font-family: var(--font-display); font-size: 26px; line-height: 1.15; }
.ins-kpi span { font-size: 12px; color: var(--ink-3); }
.ins-kpi i { font-style: normal; font-size: 10px; }
.ins-kpi.t-up i { color: #2F8350; } .ins-kpi.t-down i { color: #C0392B; } .ins-kpi.t-flat i { color: #8A8A8A; }
.ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ins-hls { display: flex; flex-direction: column; gap: 10px; }
.ins-hl { display: flex; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); animation: insUp .6s calc(var(--i) * 110ms + 200ms) both; }
.ins-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(47,131,80,.1); font-size: 20px; }
.ins-hl b { display: block; margin-bottom: 2px; } .ins-hl p { margin: 0; font-size: 14px; color: var(--ink-2, #4A4A4A); }
.ins-bars { padding: 16px; border-radius: 14px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.ins-bt { margin-bottom: 4px; }
.ins-bar { display: grid; grid-template-columns: minmax(80px, 38%) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.ins-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-track { height: 12px; border-radius: 6px; background: var(--bg, #F1F1F1); overflow: hidden; }
.ins-track i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, #93AFA0, #2F8350); animation: insBar 1s calc(var(--i, 0) * 80ms + 300ms) cubic-bezier(.2,.8,.2,1) both; }
.ins-bar em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.ins-quote { margin: 0; padding: 16px 20px; border-left: 4px solid #2F8350; background: rgba(47,131,80,.06); border-radius: 0 14px 14px 0; font-size: 17px; font-weight: 600; }
.ins-acts ol { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: a; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ins-acts li { counter-increment: a; padding: 12px 14px 12px 46px; border-radius: 12px; background: var(--bg, #F6F6F6); position: relative; font-size: 14px; }
.ins-acts li::before { content: counter(a); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: #2F8350; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.ins-meta { margin: 0; }
@keyframes insUp { from { opacity: 0; transform: translateY(12px); } }
@keyframes insBar { from { width: 0; } }
@media (max-width: 900px) { .ins-kpis { grid-template-columns: repeat(2, 1fr); } .ins-grid { grid-template-columns: 1fr; } .ins-acts ol { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ins-kpi, .ins-hl, .ins-track i { animation: none; } }

/* ===== 언론보도 카드 · 캔버스 · 검색 ===== */
.press-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 18px 0 14px; }
.press-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; }
.press-img { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #C0CFE6, #DCEBDD); overflow: hidden; display: grid; place-items: center; }
.press-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.press-card:hover .press-img img { transform: scale(1.04); }
.press-ph { font-weight: 800; color: #2F5E3F; opacity: .6; }
.press-img img + .press-ph { display: none; }
.press-play { position: absolute; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; font-size: 20px; padding-left: 4px; }
.press-k { position: absolute; left: 12px; top: 12px; }
.press-src { color: var(--ink-3); }
.press-link { margin-top: auto; font-size: 13px; align-self: flex-start; }
.pc-hero img { width: 100%; max-height: 380px; object-fit: cover; border-radius: 14px; display: block; }
.pc-canvas { display: flex; flex-direction: column; gap: 10px; }
.pc-canvas.full { padding-top: 22px; }
.pc-title { font-size: 22px; line-height: 1.4; margin: 0; }
.pr-search { margin-bottom: 8px; }
.pr-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.pr-form .promo-in { flex: 1; min-width: 200px; }
.pr-split { display: grid; grid-template-columns: minmax(260px, 1fr) 1.3fr; gap: 14px; align-items: start; }
.pr-list { list-style: none; padding: 0; margin: 0; max-height: 560px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.pr-list button { width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 8px; border-radius: 12px; border: 1.5px solid transparent; background: var(--bg, #F6F6F6); cursor: pointer; }
.pr-list button.on { border-color: var(--main, #2F8350); background: rgba(47,131,80,.08); }
.pr-list img, .pr-noimg { flex: none; width: 96px; height: 56px; object-fit: cover; border-radius: 8px; background: #DDE5DD; }
.pr-list b { display: block; font-size: 13px; line-height: 1.35; }
.pr-list small { color: var(--ink-3); font-size: 11px; } .pr-list em { color: var(--main, #2F8350); font-style: normal; font-weight: 700; }
.pr-canvas { border: 1px solid var(--line); border-radius: 16px; padding: 16px; min-height: 300px; position: sticky; top: 90px; }
@media (max-width: 860px) { .pr-split { grid-template-columns: 1fr; } .pr-canvas { position: static; } }

.nl-or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; margin: 10px 0; }
.nl-or::before, .nl-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.nl-drop { margin-bottom: 4px; }
.nl-file-prev { width: 100%; height: 360px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
/* 언론보도 5열 × 4행 */
.press-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.press-grid .post-txt { padding: 12px 14px 14px; gap: 4px; }
.press-grid .post-txt h3 { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.press-grid .post-txt p { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.press-grid .press-src { font-size: 11px; }
.press-grid .press-k { left: 8px; top: 8px; font-size: 10px; }
.press-grid .press-play { width: 40px; height: 40px; font-size: 15px; }
.press-grid .rx { transform: scale(.92); transform-origin: left center; }
.press-pager { display: flex; gap: 6px; justify-content: center; margin-top: 22px; }
.press-pager button { min-width: 36px; height: 36px; border-radius: 10px; background: var(--bg, #F6F6F6); font-weight: 700; cursor: pointer; }
.press-pager button.on { background: var(--main, #2F8350); color: #fff; }
@media (max-width: 1200px) { .press-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .press-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .press-grid { grid-template-columns: 1fr; } }

/* ===== 공통 카드 목록 5열 × 4행 ===== */
.grid.pg5, .eb-shelf.pg5, .press-grid.pg5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pg5 > .pg-off { display: none !important; }
.pg5 .card h3, .pg5 .post-txt h3 { overflow-wrap: anywhere; }
.pg5 .post-txt h3 { font-size: 15px; }
.pg5 .post-txt p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pg-nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 22px 0 6px; }
.pg-nav button { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--bg, #F1F1F1); font-weight: 700; cursor: pointer; }
.pg-nav button.on { background: var(--main, #2F8350); color: #fff; }
.pg-nav button:disabled { opacity: .35; cursor: default; }
.pg-nav small { color: var(--ink-3); margin-left: 8px; }
@media (max-width: 1200px) { .grid.pg5, .eb-shelf.pg5, .press-grid.pg5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .grid.pg5, .eb-shelf.pg5, .press-grid.pg5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid.pg5, .eb-shelf.pg5, .press-grid.pg5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .grid.pg5, .eb-shelf.pg5, .press-grid.pg5 { grid-template-columns: 1fr; } }

/* ===== 5열 카드: 좁은 칸에서도 내용이 카드 밖으로 넘치지 않게 세로 배치로 ===== */
.pg5 > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.pg5 .card, .pg5 article, .pg5 .gal, .pg5 .eb-card { overflow: hidden; }
.pg5 h3, .pg5 h4, .pg5 p, .pg5 small, .pg5 b { word-break: keep-all; overflow-wrap: anywhere; }
/* 행사 카드: 날짜 블록을 위로, 내용은 아래로 */
.pg5 .ev-card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
.pg5 .ev-card > div { min-width: 0; }
.pg5 .ev-card .ev-date { justify-self: start; display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 12px; }
.pg5 .ev-card .ev-date b { display: inline; font-size: 24px; }
.pg5 .ev-card .badge { font-size: 11px; padding: 3px 8px; margin-bottom: 3px; }
.pg5 .ev-card h4 { font-size: 15px; line-height: 1.4; }
.pg5 .ev-card .host { font-size: 12px; }
.pg5 .ev-card .badge.green, .pg5 .ev-card .badge.dark { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.pg5 .ev-more { font-size: 12px; }
/* e-Book 카드: 표지를 위로, 설명은 아래로 */
.pg5 .eb-card { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 12px; }
.pg5 .eb-card .eb-book { justify-self: center; width: min(150px, 78%); }
.pg5 .eb-meta h3 { font-size: 15px; line-height: 1.4; }
.pg5 .eb-meta p { font-size: 13px; }
.pg5 .eb-meta .m-btns { flex-wrap: wrap; gap: 6px; }
.pg5 .eb-meta .m-btns .btn { padding: 8px 12px; font-size: 13px; }
/* 연구단·갤러리·기타 카드 */
.pg5 .unit-card { padding: 16px; }
.pg5 .unit-card h3 { font-size: 15px; }
.pg5 .gal .cap { padding: 12px 14px; }
.pg5 .gal .cap b { font-size: 14px; }
.pg5 .rx { flex-wrap: wrap; }

.nl-img-row { display: flex; gap: 8px; align-items: center; }
.nl-img-row input { flex: 1; min-width: 0; }
.nl-img-prev img { margin-top: 8px; max-width: 320px; width: 100%; border-radius: 10px; display: block; }

/* 뉴스레터 보관함 */
.nl-lib { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.nl-lib > small { color: var(--ink-3); }
.nl-lib-box { flex-basis: 100%; border: 1px solid var(--line, #E3E3E3); border-radius: 12px; padding: 10px; background: var(--bg, #F7F7F5); }
.nl-lib-head { display: flex; gap: 8px; margin-bottom: 8px; }
.nl-lib-head input { flex: 1; min-width: 0; }
.nl-lib-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; display: grid; gap: 6px; }
.nl-lib-list .empty { padding: 12px; color: var(--ink-3); text-align: center; }
.nl-lib-item { width: 100%; display: flex; gap: 10px; align-items: center; justify-content: space-between; text-align: left; padding: 10px 12px; border-radius: 10px; background: #fff; cursor: pointer; border: 1px solid transparent; }
.nl-lib-item:hover, .nl-lib-item:focus-visible { border-color: var(--main, #2F8350); }
.nl-lib-t { display: grid; gap: 2px; min-width: 0; }
.nl-lib-t b { overflow-wrap: anywhere; }
.nl-lib-t small { color: var(--ink-3); overflow-wrap: anywhere; }
/* 입력 칸 너비 균등 */
.repo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nl-add .repo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.repo-grid label { min-width: 0; }
.repo-grid input, .repo-grid select { min-width: 0; box-sizing: border-box; }
@media (max-width: 760px) { .repo-grid, .nl-add .repo-grid { grid-template-columns: 1fr 1fr; } }

/* ===== KIHSS 통합 연구지원 플랫폼 (구축안 1022 · RFP) ===== */
.hsearch { display: grid; place-items: center; width: 36px; height: 34px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); color: var(--ink); }
.hsearch:hover { color: var(--main); }
@media (min-width: 1101px) { .gnb > li > a { font-size: 14px; padding: 9px 10px; } }
.cnt { font-size: .55em; color: var(--ink-3); font-weight: 700; margin-left: 4px; vertical-align: middle; }
.muted { color: var(--ink-3); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-bar input, .filter-bar select { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; background: #fff; min-width: 0; }
.filter-bar input { flex: 1 1 260px; }
.filter-bar select { flex: 0 1 190px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inst-card h3 { margin: 10px 0 8px; font-size: 18px; overflow-wrap: anywhere; }
.inst-card .pills { margin-bottom: 12px; }
.fl-ph { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--main-soft, #E5F0E8); color: var(--main, #2F8350); font-weight: 800; font-size: 20px; object-fit: cover; }
.fl-ph.big { width: 96px; height: 96px; font-size: 38px; }
.fl-card .fl-head { display: flex; gap: 12px; align-items: center; }
.fl-card h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.fl-card h3 small { font-weight: 500; color: var(--ink-3); font-size: 12px; }
.fl-card .fl-head p { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
.fl-field { font-size: 13.5px; margin: 12px 0 8px; color: var(--ink-2); }
.fl-cnt { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 13px; color: var(--ink-3); align-items: center; }
.fl-cnt b { color: var(--ink); }
.fl-hero, .inst-hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.fl-hero > div:nth-child(2), .inst-hero > div:first-child { flex: 1 1 320px; min-width: 0; }
.fl-hero h2, .inst-hero h2 { margin: 8px 0 6px; font-size: clamp(24px, 3vw, 32px); }
.fl-hero h2 small { font-size: 15px; color: var(--ink-3); font-weight: 500; }
.fl-hero p, .inst-hero p { margin: 0 0 8px; color: var(--ink-2); }
.fl-edu { font-size: 14px; }
.kv { width: 100%; border-collapse: collapse; font-size: 14px; }
.kv th { text-align: left; width: 34%; color: var(--ink-3); font-weight: 600; padding: 7px 10px 7px 0; vertical-align: top; }
.kv td { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.chk-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.chk-list li { padding-left: 22px; position: relative; font-size: 14.5px; }
.chk-list li::before { content: "✓"; position: absolute; left: 0; color: var(--main); font-weight: 800; }
.alumni { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.alumni a { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; }
.alumni a:hover { background: var(--bg, #F4F4F2); }
.alumni .fl-ph { width: 40px; height: 40px; font-size: 16px; }
.alumni span { display: grid; min-width: 0; }
.alumni small { color: var(--ink-3); overflow-wrap: anywhere; }
.bk-card { display: flex; gap: 14px; align-items: flex-start; }
.bk-cover { width: 78px; aspect-ratio: 3/4; flex: none; border-radius: 6px 10px 10px 6px; padding: 8px; background: linear-gradient(160deg, var(--main, #2F8350), #1f5c39); color: #fff; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 4px 0 0 rgba(0,0,0,.15); overflow: hidden; }
.bk-cover span { font-size: 9px; opacity: .8; }
.bk-cover b { font-size: 10px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bk-card h4 { margin: 0 0 4px; font-size: 15px; overflow-wrap: anywhere; }
.bk-card p { margin: 0 0 4px; font-size: 13px; color: var(--ink-2); }
.bk-card small { color: var(--ink-3); }
.pg5.bk-grid .bk-card { flex-direction: column; }
.pg5.bk-grid .bk-cover { width: 100%; aspect-ratio: 4/3; }
.pf-bars { display: grid; gap: 8px; margin-top: 10px; }
.pf-bar { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.pf-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-bar i { height: 10px; border-radius: 0 6px 6px 0; background: var(--main, #2F8350); width: var(--w); min-width: 2px; }
.pf-bar b small { color: var(--ink-3); font-weight: 500; }
.purpose { max-width: 880px; }
.purpose p { font-size: 16.5px; line-height: 1.8; }
.pp-card { position: relative; }
.pp-no { position: absolute; top: 18px; right: 20px; font-family: var(--font-display); font-weight: 800; color: var(--line); font-size: 30px; }
.pp-card h3 { margin: 14px 0 6px; }
.pp-card p { margin: 0; color: var(--ink-2); font-size: 14px; }
.hist { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.hist li { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0 16px 24px; }
.hist li::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--main); box-shadow: 0 0 0 4px #fff; }
.hist-d { font-family: var(--font-display); font-weight: 800; color: var(--main); }
.hist p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.jt-card { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; }
.jt-card small { grid-column: 1 / -1; color: var(--ink-3); }
.jt-card span { color: var(--main); }
.jt-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.jt-cta h3, .jt-cta p { margin: 0 0 4px; }
.spot-list { display: grid; gap: 16px; }
.spot { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; }
.spot-side { display: grid; justify-items: center; text-align: center; gap: 4px; }
.spot-side small { color: var(--ink-3); }
.spot h3 { margin: 8px 0; }
.spot p { color: var(--ink-2); margin: 0 0 10px; }
.spot-paper { background: var(--bg, #F4F4F2); border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; font-size: 14px; }
.spot-paper small, .spot-paper span { color: var(--ink-3); font-size: 12.5px; }
.frn-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.frn-f label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.frn-f .wide { grid-column: 1 / -1; }
.frn-f input, .frn-f select, .frn-f textarea { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit; font-weight: 400; font-size: 14px; min-width: 0; width: 100%; box-sizing: border-box; }
.frn-f .chk { display: flex; gap: 8px; font-weight: 500; align-items: flex-start; }
.frn-f .chk input { width: auto; margin-top: 3px; }
.pt-card h3 { margin: 8px 0 4px; font-size: 17px; }
.pt-card p { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; }
.pt-card small { color: var(--ink-3); }
.call-list { display: grid; gap: 12px; }
.call { display: grid; grid-template-columns: 74px 1fr auto; gap: 18px; align-items: center; }
.call-st { width: 70px; height: 70px; border-radius: 18px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--bg, #F1F1F1); color: var(--ink-3); }
.call-st.on { background: var(--main); color: #fff; }
.call-st.soon { background: var(--blue-soft, #E6EEF8); color: var(--ink); }
.call h3 { margin: 6px 0 4px; font-size: 17px; }
.call p { margin: 0 0 4px; color: var(--ink-2); font-size: 14px; }
.call small { color: var(--ink-3); }
.steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; }
.mg-tbl td, .mg-tbl th { padding: 10px 12px; white-space: nowrap; }
.mg-pct { display: inline-flex; align-items: center; gap: 6px; }
.mg-pct i { display: inline-block; width: 60px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--main) var(--w), var(--line) var(--w)); }
.dm-card .dm-h { display: flex; justify-content: space-between; align-items: baseline; }
.dm-card .dm-h b { font-family: var(--font-display); font-size: 28px; color: var(--main); }
.dm-card p { color: var(--ink-2); font-size: 13.5px; margin: 4px 0 12px; }
.goal { display: flex; gap: 14px; align-items: center; }
.goal svg { width: 72px; height: 72px; flex: none; }
.goal div { display: grid; gap: 2px; }
.goal span { color: var(--ink-3); font-size: 13px; }
.goal em { font-style: normal; font-weight: 800; font-size: 20px; color: var(--main); }
.io-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.io-row select { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; }
.io-err { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #FDF0F0; color: #8A1F1F; font-size: 14px; }
.io-err ul { margin: 6px 0 0; padding-left: 18px; }
.kw-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-cloud .pill { cursor: pointer; border: 0; }
.gsearch { display: flex; gap: 8px; max-width: 760px; }
.gsearch input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; font: inherit; font-size: 16px; background: #fff; }
.gs-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gs-tabs a { padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font-size: 13.5px; }
.gs-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.gs-list a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.gs-list a:hover { box-shadow: inset 0 0 0 1.5px var(--main); }
.gs-list b { overflow-wrap: anywhere; }
.gs-list small { color: var(--ink-3); overflow-wrap: anywhere; }
.match .alumni { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.hp-vision { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; background: #fff; border-radius: var(--radius-lg, 24px); padding: 36px; box-shadow: var(--shadow-sm); }
.hp-vision .sec-title { margin: 12px 0 10px; }
.hp-search { margin-top: 18px; }
.hp-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hp-k { display: grid; gap: 4px; padding: 18px; border-radius: 18px; background: var(--bg, #F4F4F2); }
.hp-k b { font-family: var(--font-display); font-size: 34px; color: var(--main); }
.hp-k b small { font-size: 15px; margin-left: 2px; }
.hp-k span { color: var(--ink-2); font-size: 14px; }
.hp-k:hover { box-shadow: inset 0 0 0 1.5px var(--main); }
@media (max-width: 860px) {
  .hp-vision { grid-template-columns: 1fr; padding: 24px; }
  .spot { grid-template-columns: 1fr; }
  .call { grid-template-columns: 1fr; }
  .call-st { width: auto; height: 34px; justify-self: start; padding: 0 14px; }
  .frn-f { grid-template-columns: 1fr; }
  .hist li { grid-template-columns: 1fr; gap: 4px; }
}
.kv, .kv tbody { display: block; width: 100%; }
.kv tr { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; border-bottom: 1px dashed var(--line); }
.kv th, .kv td { width: auto; border: 0; padding: 8px 0; white-space: normal; overflow-wrap: anywhere; }
.adm-anchor { display: block; flex-basis: 100%; }
.sec-head .adm-anchor { flex-basis: auto; }
/* 계정·권한 */
body:not(.sys) .sys-only { display: none !important; }
.huser.on { color: #fff; background: var(--main); }
.my-login { max-width: 560px; margin: 0 auto; }
.my-tabs a.on { background: var(--main); color: #fff; }
.my-form h3 { margin: 0; }
.my-log { font-size: 12.5px; color: var(--ink-3); }
.my-log summary { cursor: pointer; }
.my-log ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.my-privacy .chk { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: 15px; }
.acc-pw { background: #FFF8E6; margin-bottom: 14px; }
.acc-pw code { font-size: 17px; padding: 3px 8px; background: #fff; border-radius: 6px; }
.acc-off td { color: var(--ink-3); }
.acc-new [hidden] { display: none; }

/* 학술 DB 검색·분석 */
.sch-form .gsearch select { border: 1px solid var(--line); border-radius: 14px; padding: 0 10px; font: inherit; }
.sch-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-chk { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 999px; background: var(--bg, #F4F4F2); font-size: 14px; cursor: pointer; }
.sch-status { display: flex; flex-wrap: wrap; gap: 6px; }
.sch-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sch-list li { display: grid; gap: 4px; padding: 14px 16px; }
.sch-list b { overflow-wrap: anywhere; } .sch-list small { color: var(--ink-3); overflow-wrap: anywhere; }
.sch-list details p { font-size: 13.5px; color: var(--ink-2); margin: 6px 0 0; }
.sch-src { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.sch-ai { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; }
.sch-ai-out h2 { font-size: 17px; margin: 14px 0 6px; } .sch-ai-out ul { padding-left: 18px; }
.sch-cfg-tbl td { vertical-align: top; } .sch-cfg-tbl input[type=password] { width: 100%; min-width: 160px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }
.sch-url { width: 100%; min-width: 260px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12px; margin: 4px 0; }
.sch-clr { display: flex; gap: 4px; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 960px) { .sch-split { grid-template-columns: 1fr !important; } .sch-ai { position: static; max-height: none; } }

/* 영문 콘텐츠 관리 */
.i18n-list { display: grid; gap: 8px; }
.i18n-row { display: grid; gap: 8px; padding: 14px 16px; }
.i18n-ko { font-size: 14px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.i18n-row textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; }
html[lang="en"] .gnb > li > a { font-size: 13px; padding: 9px 8px; }

.an-nav { margin-top: 18px; position: sticky; top: 76px; z-index: 5; }
#an-stats, #an-overview, #an-trend, #an-hl { scroll-margin-top: 130px; }

/* 성과 DB·진출 보강 */
.dsh-bar select { flex: 0 1 200px; }
.fl-acts { flex-wrap: wrap; }
@media print {
  body.print-profile .header, body.print-profile .footer, body.print-profile .page-hero, body.print-profile .chat, body.print-profile .drawer,
  body.print-profile .match, body.print-profile .fl-acts, body.print-profile .more, body.print-profile .adm-tools, body.print-profile .note, body.print-profile .pg-nav, body.print-profile .toast { display: none !important; }
  body.print-profile { background: #fff; }
  body.print-profile .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  body.print-profile .section { padding: 0; }
  body.print-profile .grid.g2 { grid-template-columns: 1fr 1fr; }
}

/* v1.13 감사 로그 · 변경 비교 · 정책 · 매뉴얼 */
.aud-bar { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aud-bar select, .aud-bar input[type=search] { padding: 7px 10px; border: 1px solid var(--line, #ddd); border-radius: 8px; font: inherit; }
.aud-ret { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 13px; }
.aud-ret input { padding: 6px 8px; border: 1px solid var(--line, #ddd); border-radius: 8px; }
.df-h { margin: 10px 0 4px; font-size: 13px; }
.df-h.add { color: #1e8e5a; } .df-h.del { color: #c0392b; } .df-h.mod { color: #2d5bd7; }
.df-l { margin: 0 0 6px 18px; font-size: 13px; }
.df-item { margin: 6px 0 10px; font-size: 13px; }
.df-t { width: 100%; border-collapse: collapse; margin-top: 4px; table-layout: fixed; }
.df-t th { width: 110px; text-align: left; font-weight: 600; padding: 4px 6px; vertical-align: top; background: rgba(0,0,0,.03); }
.df-t td { padding: 4px 6px; vertical-align: top; word-break: break-all; }
.df-t td.b del { background: #fdecea; text-decoration: line-through; color: #8a2b20; }
.df-t td.a ins { background: #e6f6ec; text-decoration: none; color: #145c38; }
.policy-body h3, .manual-sec h3 { margin: 22px 0 8px; font-size: 18px; }
.policy-body h3:first-child, .manual-sec h3:first-child { margin-top: 0; }
.policy-body ul, .manual-sec ul, .manual-sec ol { padding-left: 20px; line-height: 1.8; }
.policy-body p, .manual-sec p { line-height: 1.8; }
.manual-sec { margin-top: 16px; scroll-margin-top: 130px; }
.manual-sec .tbl { margin: 8px 0; }
.footer .copy a { color: inherit; }
@media print { .manual .more, .an-nav { display: none !important; } .manual-sec { break-inside: avoid; } }

/* v1.14 회원가입 */
.signup-f { max-width: 820px; margin: 0 auto; }
.signup-f .req { color: #c0392b; font-style: normal; }
.su-role { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.su-role legend { font-weight: 600; margin-bottom: 6px; }
.su-opt { display: flex !important; gap: 8px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line, #ddd); border-radius: 12px; cursor: pointer; }
.su-opt:has(input:checked) { border-color: var(--blue, #2d5bd7); background: rgba(45, 91, 215, .06); }
.su-opt span { display: grid; gap: 2px; } .su-opt small { color: var(--ink-3, #667); font-weight: 400; }
.su-cta { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line, #ddd); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sgn-tbl td { vertical-align: top; }
.sgn-act select { max-width: 210px; margin-bottom: 6px; padding: 5px 6px; border: 1px solid var(--line, #ddd); border-radius: 8px; font: inherit; font-size: 13px; }
@media (max-width: 900px) { .su-role { grid-template-columns: 1fr; } }
.signup-f .su-opt { display: flex !important; flex-direction: row; justify-content: flex-start; text-align: left; }
.signup-f .su-opt input { width: auto !important; flex: 0 0 auto; margin: 3px 0 0; padding: 0; min-height: 0; }
.signup-f .su-opt span { flex: 1; }
.signup-f .chk input { width: auto !important; }
/* v1.15 연혁 타임라인 */
.tl-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 4px 0 26px; position: sticky; top: 76px; z-index: 4; background: var(--bg); padding: 8px 0; }
.tl-years { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-years a { padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; color: var(--ink-2); text-decoration: none; }
.tl-years a:hover { background: var(--main-soft); color: var(--main-deep); }
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: linear-gradient(var(--main-soft), var(--main), var(--main-soft)); border-radius: 3px; }
.tl-year { position: relative; text-align: center; margin: 10px 0 26px; scroll-margin-top: 150px; }
.tl-year span { display: inline-block; position: relative; padding: 8px 22px; border-radius: 999px; background: var(--main-deep); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 20px; box-shadow: 0 0 0 6px var(--bg); }
.tl-ev { position: relative; width: 50%; padding: 0 44px 34px; }
.tl-ev.l { margin-right: 50%; }
.tl-ev.r { margin-left: 50%; }
.tl-dot { position: absolute; top: 26px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--main); box-shadow: 0 0 0 5px var(--bg); }
.tl-ev.l .tl-dot { right: -9px; } .tl-ev.r .tl-dot { left: -9px; }
.tl-card { position: relative; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.tl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tl-ev.l .tl-card::after, .tl-ev.r .tl-card::after { content: ""; position: absolute; top: 28px; width: 14px; height: 14px; background: var(--card); transform: rotate(45deg); }
.tl-ev.l .tl-card::after { right: -7px; } .tl-ev.r .tl-card::after { left: -7px; }
.tl-img { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--main-soft); }
.tl-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.tl-card:hover .tl-img img { transform: scale(1.04); }
.tl-noimg { display: grid; place-items: center; color: var(--ink-3); font-size: 13px; border-bottom: 1px dashed var(--line); background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 10px, #fff 10px, #fff 20px); }
.tl-noimg span { display: flex; gap: 6px; align-items: center; } .tl-noimg svg { width: 16px; height: 16px; }
.tl-body { padding: 18px 22px 20px; }
.tl-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.tl-meta time { font-family: var(--font-display); font-weight: 800; color: var(--main-deep); font-size: 15px; }
.tl-kind { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--blue-soft); color: #3b4f6b; }
.tl-body h3 { margin: 0; font-size: 18px; line-height: 1.45; }
.tl-body p { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.tl-body .more { display: inline-block; margin-top: 10px; }
@media (max-width: 860px) {
  .tl::before { left: 14px; }
  .tl-year { text-align: left; } .tl-year span { font-size: 17px; }
  .tl-ev, .tl-ev.l, .tl-ev.r { width: auto; margin: 0; padding: 0 0 26px 42px; }
  .tl-ev.l .tl-dot, .tl-ev.r .tl-dot { left: 5px; right: auto; }
  .tl-ev.l .tl-card::after, .tl-ev.r .tl-card::after { left: -7px; right: auto; }
}
@media print { .tl-bar { display: none; } .tl-card { box-shadow: none; border: 1px solid var(--line); } }

/* v1.16 수정모드 */
.ed-fab { position: fixed; left: 20px; bottom: 22px; z-index: 60; display: none; align-items: center; gap: 6px; padding: 11px 18px; border: 0; border-radius: 999px; background: #2F8350; color: #fff; font: 700 14px var(--font-body); box-shadow: var(--shadow); cursor: pointer; }
body.admin .ed-fab:not([hidden]) { display: inline-flex; }
.ed-fab svg { width: 16px; height: 16px; }
.ed-fab[aria-pressed="true"] { background: #1B1B1B; }
.ed-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 70; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 16px; background: #2F8350; color: #fff; font-size: 13px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); }
.ed-bar[hidden] { display: none; }
.ed-bar span { flex: 1; min-width: 240px; opacity: .95; }
.ed-bar kbd { padding: 0 5px; border-radius: 4px; background: rgba(255,255,255,.22); font: inherit; }
.ed-bar button { border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; border-radius: 999px; padding: 5px 12px; font: 600 12px var(--font-body); cursor: pointer; }
.ed-bar button:hover { background: rgba(255,255,255,.15); }
body.edit-mode { padding-top: 42px; }
body.edit-mode .header { top: 42px; }
.ed-bar { min-height: 42px; flex-wrap: nowrap; }
.ed-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.edit-mode [data-adm] { outline: 2px dashed rgba(47,131,80,.35); outline-offset: 4px; border-radius: 6px; }
body.edit-mode a.ed-t { cursor: text; }
@media (max-width: 1360px) { body.admin .gnb { display: none; } body.admin .menu-btn { display: grid; } body.admin .header-tools { margin-left: auto; } }
@media (max-width: 700px) { .ed-fab { left: 12px; bottom: 14px; padding: 9px 14px; font-size: 13px; } .ed-bar span { display: none; } }
@media print { .ed-fab, .ed-bar { display: none !important; } }

/* v1.18 연구성과 쪽 나누기 · 상세 · AI 슬라이드 */
.pg10 > .pg-off { display: none !important; }
.ou-link { color: inherit; text-decoration: none; }
.ou-link:hover { color: var(--main-deep); text-decoration: underline; }
.bk-grid .bk-cover { text-decoration: none; color: inherit; display: block; }
.bk-grid .bk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ou-title { font-size: clamp(24px, 3.4vw, 40px) !important; line-height: 1.3; }
.ou-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ou-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.ou-info h2, .ou-pdf h2, .ou-slides h2 { font-size: 19px; margin: 0 0 12px; display: flex; gap: 6px; align-items: center; }
.ou-slides h2 svg { width: 18px; height: 18px; }
.ou-info .kv th { width: 96px; }
.ou-abs { line-height: 1.8; color: var(--ink-2); }
.ou-pdf-view { aspect-ratio: 1 / 1.25; max-height: 76vh; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: #525659; }
.ou-pdf-view iframe { width: 100%; height: 100%; border: 0; }
.ou-nopdf { padding: 40px 16px; line-height: 1.9; }
.ou-sh { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.ou-sh p { margin: 0; }
.ou-stage { outline: none; }
.ou-slide { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); padding: 5% 7%; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow-sm); overflow: hidden; }
.ou-slide.cover { background: linear-gradient(135deg, var(--main-deep), var(--main)); color: #fff; border: 0; }
.ou-slide small { opacity: .7; font-size: clamp(11px, 1.2vw, 15px); }
.ou-slide h3 { font-size: clamp(20px, 2.8vw, 38px); margin: 6px 0 16px; line-height: 1.3; }
.ou-slide ul { margin: 0; padding-left: 1.2em; font-size: clamp(14px, 1.6vw, 22px); line-height: 1.7; }
.ou-note { margin: 14px 0 0; font-size: clamp(12px, 1.1vw, 15px); opacity: .7; }
.ou-brand { position: absolute; right: 4%; bottom: 4%; font-size: 12px; opacity: .55; }
.ou-stage:fullscreen { display: grid; place-items: center; background: #111; }
.ou-stage:fullscreen .ou-slide { width: min(100vw, 177.7vh); }
.ou-ctrl { display: flex; gap: 8px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.ou-sp { flex: 1; }
.ou-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.ou-thumbs button { flex: 0 0 150px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 12px; line-height: 1.4; cursor: pointer; }
.ou-thumbs button b { display: block; color: var(--main-deep); }
.ou-thumbs button.on { border-color: var(--main-deep); background: var(--main-soft); }
.ou-busy { padding: 50px 0; text-align: center; }
.ou-rel { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
@media (max-width: 900px) { .ou-grid { grid-template-columns: 1fr; } }

/* v1.19 모션 그래픽 슬라이드 */
.md-wrap { padding-top: 0; }
.md-deck { position: relative; aspect-ratio: 16 / 8.2; border-radius: var(--radius-xl); overflow: hidden; outline: none;
  background: radial-gradient(120% 140% at 0% 0%, #2c3a2a 0%, #1b1f1a 55%, #121412 100%); color: #fff; box-shadow: var(--shadow); }
.md-deck:focus-visible { box-shadow: 0 0 0 3px var(--main), var(--shadow); }
.md-deck:fullscreen { aspect-ratio: auto; border-radius: 0; }
.md-s { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.15fr; gap: 4%; align-items: center; padding: 5% 6% 9%; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.md-s.on { opacity: 1; visibility: visible; }
.md-k { display: inline-block; font: 700 13px var(--font-display); letter-spacing: .14em; color: var(--main); text-transform: uppercase; margin-bottom: 14px; }
.md-txt h3 { font-size: clamp(22px, 2.7vw, 40px); line-height: 1.28; margin: 0 0 16px; word-break: keep-all; }
.md-txt p { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.75; color: #cfd6cc; margin: 0; word-break: keep-all; }
.md-vis { height: 100%; display: grid; place-items: center; min-width: 0; }
.mv { opacity: 0; }
.md-s.on .mv { animation: mdUp .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 140ms + 150ms); }
@keyframes mdUp { from { opacity: 0; transform: translateY(22px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.md-s .draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.md-s.on .draw { animation: mdDraw 1.2s ease-out both; animation-delay: calc(var(--d, 0) * 140ms + 200ms); }
@keyframes mdDraw { to { stroke-dashoffset: 0; } }
.md-s .pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.md-s.on .pop { animation: mdPop .7s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--d, 0) * 140ms + 200ms); }
@keyframes mdPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.mdv-svg { width: 100%; max-height: 100%; overflow: visible; }
.mdv-svg text { fill: #fff; font: 600 12px var(--font-body); }
.mdv-svg .ring { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1.5; }
.mdv-svg .spoke { stroke: rgba(151,175,143,.45); stroke-width: 1; }
.mdv-svg .spoke.big { stroke: rgba(255,255,255,.6); stroke-width: 2; }
.mdv-svg .dot { fill: var(--main); }
.mdv-svg .big { fill: #fff; } .mdv-svg circle.big.pink { fill: #d98ea0; } .mdv-svg circle.big.blue { fill: #7f9ccc; }
.mdv-svg .core { fill: var(--main-deep); stroke: #fff; stroke-width: 2; }
.mdv-svg .core-t { font: 800 15px var(--font-display); } .mdv-svg .core-s { font-size: 9px; fill: #e6efe2; }
.mdv-svg .pulse { fill: none; stroke: var(--main); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.md-s.on .pulse { animation: mdPulse 2.4s ease-out infinite 1s; }
@keyframes mdPulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
.mdv-svg .venn circle { fill-opacity: .5; stroke: rgba(255,255,255,.7); stroke-width: 1.5; mix-blend-mode: screen; }
.mdv-svg .v0 circle { fill: #97AF8F; } .mdv-svg .v1 circle { fill: #d98ea0; } .mdv-svg .v2 circle { fill: #7f9ccc; }
.mdv-svg .venn text { font: 700 15px var(--font-body); }
.mdv-svg .venn { opacity: 0; transform-box: view-box; transform-origin: 200px 150px; }
.md-s.on .venn { animation: mdVenn 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 140ms + 200ms); }
.md-s.on .v0 { --fx: -60px; --fy: -20px; } .md-s.on .v1 { --fx: 60px; --fy: -20px; } .md-s.on .v2 { --fx: 0; --fy: 60px; }
@keyframes mdVenn { from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.7); } to { opacity: 1; transform: none; } }
.mdv-svg .venn-c { font: 800 16px var(--font-display); }
.mdv-svg .arc { fill: none; stroke-width: 2; } .mdv-svg .arc.dom { stroke: #97AF8F; } .mdv-svg .arc.intl { stroke: #7f9ccc; }
.mdv-svg .nd.dom { fill: #97AF8F; } .mdv-svg .nd.intl { fill: #7f9ccc; }
.mdv-flow { display: flex; align-items: center; gap: 6px; width: 100%; justify-content: center; flex-wrap: nowrap; }
.mdv-step { flex: 1; min-width: 0; padding: 18px 14px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); text-align: center; }
.mdv-step b { display: block; font-size: clamp(14px, 1.3vw, 19px); margin-bottom: 6px; word-break: keep-all; }
.mdv-step small { color: #cfd6cc; font-size: 12px; word-break: keep-all; }
.mdv-step:last-child { background: var(--main-deep); border-color: transparent; }
.mdv-arrow { flex: 0 0 34px; } .mdv-arrow path { fill: none; stroke: var(--main); stroke-width: 2; }
.mdv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.mdv-card { padding: 16px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); display: grid; gap: 6px; }
.mdv-card .icon-tile { width: 38px; height: 38px; } .mdv-card b { font-size: 16px; } .mdv-card small { color: #cfd6cc; font-size: 12.5px; }
.mdv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; width: 100%; }
.mdv-stat { position: relative; padding: 18px 16px 22px; border-radius: 18px; background: rgba(255,255,255,.06); overflow: hidden; }
.mdv-stat b { display: block; font: 800 clamp(30px, 3.6vw, 54px)/1 var(--font-display); }
.mdv-stat i { font-style: normal; font-size: .4em; margin-left: 3px; color: var(--main); }
.mdv-stat small { display: block; margin-top: 8px; color: #cfd6cc; font-size: 13px; }
.mdv-stat .bar { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--w); background: linear-gradient(90deg, var(--main), #7f9ccc); transform-origin: left; transform: scaleX(0); }
.md-s.on .mdv-stat .bar { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1) .4s; transform: scaleX(1); }
.mdv-rings { position: relative; width: min(100%, 360px); aspect-ratio: 1; display: grid; place-items: center; }
.mdv-rings .r { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(151,175,143,.5); }
.md-s.on .mdv-rings .r { animation: mdRing 3.6s ease-out infinite; } .md-s.on .mdv-rings .r2 { animation-delay: 1.2s; } .md-s.on .mdv-rings .r3 { animation-delay: 2.4s; }
@keyframes mdRing { from { transform: scale(.35); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.mdv-ring-t { width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--main), var(--main-deep)); display: grid; place-content: center; text-align: center; box-shadow: 0 0 60px rgba(151,175,143,.45); }
.mdv-ring-t b { font: 800 clamp(22px, 2.6vw, 36px) var(--font-display); } .mdv-ring-t small { color: #eef3ea; font-size: 13px; }
.mdv-split { display: flex; align-items: stretch; gap: 10px; width: 100%; }
.mdv-half { flex: 1; padding: 22px 18px; border-radius: 20px; display: grid; gap: 8px; align-content: start; }
.mdv-half.pink { background: linear-gradient(160deg, rgba(217,142,160,.45), rgba(217,142,160,.12)); } .mdv-half.blue { background: linear-gradient(160deg, rgba(127,156,204,.45), rgba(127,156,204,.12)); }
.mdv-half .no { font: 800 34px var(--font-display); opacity: .85; } .mdv-half b { font-size: clamp(15px, 1.4vw, 20px); word-break: keep-all; } .mdv-half small { color: #e3e8e0; font-size: 13px; }
.mdv-x { align-self: center; font: 800 26px var(--font-display); color: var(--main); }
.md-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.1); }
.md-bar span { display: block; height: 100%; background: var(--main); transform-origin: left; transform: scaleX(0); }
.md-ctl { position: absolute; left: 6%; bottom: 4.2%; display: flex; gap: 6px; align-items: center; }
.md-ctl button { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font: 700 12px var(--font-display); cursor: pointer; }
.md-ctl button:hover { background: rgba(255,255,255,.18); }
.md-ctl .md-dot.on { background: var(--main); border-color: var(--main); color: #111; }
@media (max-width: 860px) {
  .md-deck { aspect-ratio: auto; min-height: 640px; }
  .md-s { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 28px 22px 70px; gap: 18px; align-items: start; }
  .md-vis { align-self: stretch; }
  .mdv-flow { flex-direction: column; } .mdv-arrow { transform: rotate(90deg); }
  .mdv-split { flex-direction: column; }
  .md-ctl { left: 22px; bottom: 18px; }
  .md-vis .mdv-svg { max-height: 330px; }
}
@media (prefers-reduced-motion: reduce) { .md-s .mv, .md-s .pop, .md-s .venn { animation: none !important; opacity: 1 !important; } .md-s .draw { stroke-dashoffset: 0 !important; animation: none !important; } .md-s.on .pulse, .md-s.on .mdv-rings .r { animation: none !important; } }
@media print { .md-wrap { display: none; } }

/* v1.19.1 로고 아래 버전 */
.brand-text .brand-ver { display: block; margin-top: 1px; font: 500 10px/1.2 var(--font-display); color: #a6a6a6; letter-spacing: .02em; }

/* v1.19.4 제목 안 아이콘: 크기를 글자에 맞춘다 (크기 지정이 없던 svg 가 카드 너비만큼 커지던 문제) */
h1 > svg, h2 > svg, h3 > svg, h4 > svg, h5 > svg { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.16em; margin-right: .3em; }
/* 모션 슬라이드: 긴 단어가 상자 밖으로 나가지 않게 */
.mdv-step { overflow: hidden; }
.mdv-step b { font-size: clamp(13px, 1.15vw, 18px); overflow-wrap: anywhere; line-height: 1.35; }
.mdv-step small { display: block; overflow-wrap: anywhere; }
.mdv-card b, .mdv-card small, .mdv-half b, .mdv-half small, .mdv-stat small { overflow-wrap: anywhere; }

/* v1.20 협업 네트워크 — 옵시디언 그래프 뷰 스타일 */
.gx { background: #1e1e1e; color: #dadada; }
.gx .search, .gx .seg, .tg span, .gx-stats div, .gx-zoom button { background: #262626; }
.gx .seg button.on { background: #7f6df2; }
.tg input:checked + span { box-shadow: inset 0 0 0 1.5px #7f6df2; }
.gx-stage { background: #1e1e1e; border: 1px solid #2c2c2c; }
.gl, .gl.axis, .gl.inst, .gl.collab { stroke: #4b4b4b; stroke-opacity: .85; stroke-dasharray: none; }
.gl.collab.cross { stroke: #6b5a3a; }
.gl.hi { stroke: #7f6df2; stroke-opacity: 1; }
.gl.dim { stroke-opacity: .12; }
.gn circle { stroke: none; transition: opacity .2s; }
.gn text { fill: #dadada; font: 500 10.5px var(--font-body); stroke: #1e1e1e; stroke-width: 3px; transition: none; }
.gn.root text, .gn.axis text { font-size: 12px; font-weight: 700; fill: #ececec; }
.gn.dim { opacity: .18; }
.gn.hi circle, .gn.match circle { filter: none; fill: #7f6df2 !important; stroke: none; }
.gn.root circle { filter: none; }
.gn.hi text { fill: #fff; font-weight: 700; }
.gn.nbr text { fill: #eee; }
.gx-zoom button:hover { background: #7f6df2; }
.gx-panel { background: rgba(38,38,38,.94); left: 14px; right: auto; }
.gx-panel:not(.open) { background: rgba(38,38,38,.7); }
.gx-legend { color: #9a9a9a; } .gx-legend .ln.cross { background: #6b5a3a; }
.ob-set { position: absolute; right: 60px; top: 14px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ob-gear { width: 36px; height: 36px; border-radius: 10px; background: #262626; color: #dadada; display: grid; place-items: center; }
.ob-gear { font-size: 17px; line-height: 1; } .ob-gear[aria-expanded="true"], .ob-gear:hover { background: #7f6df2; color: #fff; }
.ob-panel { width: 260px; max-height: 560px; overflow: auto; background: #262626; border: 1px solid #363636; border-radius: 10px; padding: 6px 0; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.ob-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px 8px; border-bottom: 1px solid #333; }
.ob-head b { color: #dadada; font-size: 13px; } .ob-head button { color: #9a9a9a; font-size: 15px; } .ob-head button:hover { color: #fff; }
.ob-sec { border-bottom: 1px solid #333; } .ob-sec:last-child { border-bottom: 0; }
.ob-sec summary { cursor: pointer; padding: 9px 14px; color: #dadada; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 6px; }
.ob-sec summary::-webkit-details-marker { display: none; }
.ob-sec summary::before { content: "›"; color: #8a8a8a; transition: transform .15s; display: inline-block; }
.ob-sec[open] summary::before { transform: rotate(90deg); }
.ob-body { padding: 0 14px 10px; display: grid; gap: 8px; }
.ob-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #b3b3b3; font-size: 12.5px; cursor: pointer; }
.ob-row.sl { display: grid; gap: 4px; }
.ob-row input[type=range] { width: 100%; accent-color: #7f6df2; }
.ob-row input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.ob-row i { position: relative; width: 30px; height: 16px; border-radius: 999px; background: #4a4a4a; flex: none; transition: background .15s; }
.ob-row i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #dadada; transition: transform .15s; }
.ob-row input:checked + i { background: #7f6df2; } .ob-row input:checked + i::after { transform: translateX(14px); }
.ob-row input:focus-visible + i { outline: 2px solid #7f6df2; outline-offset: 2px; }
.ob-groups { list-style: none; padding: 0; margin: 2px 0 0; display: grid; gap: 4px; color: #b3b3b3; font-size: 12.5px; }
.ob-groups i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.ob-anim { margin-top: 2px; padding: 7px; border-radius: 6px; background: #7f6df2; color: #fff; font-weight: 600; font-size: 12.5px; }
.ob-anim:hover { filter: brightness(1.1); }
@media (max-width: 760px) { .ob-set { right: 56px; } .ob-panel { width: min(260px, calc(100vw - 110px)); max-height: 380px; } }

/* ---------- 연구단 개별 페이지(워크숍 자료집) — 전면 히어로 · 모션 슬라이드 · 편집형 개요 · 시각화 ---------- */
.ux-hero { --ux-bg: #101615; --ux-ink: #F4F1EA; --ux-dim: rgba(244,241,234,.66); --ux-acc: #B8CDB1; --ux-acc2: #E7B3BE;
  position: relative; overflow: hidden; background: radial-gradient(120% 140% at 85% 10%, #22302C 0%, var(--ux-bg) 58%); color: var(--ux-ink); margin-top: -1px; }
.ux-hero.ax-II { --ux-acc: #A9C1E8; --ux-acc2: #B8CDB1; background: radial-gradient(120% 140% at 85% 10%, #1F2A3B 0%, #0F141C 58%); }
.ux-art { position: absolute; inset: 0; pointer-events: none; }
.ux-art svg { width: 100%; height: 100%; }
.ux-arc { fill: none; stroke: var(--ux-acc); opacity: .5; stroke-linecap: round; animation: uxDraw 2.4s var(--d) both cubic-bezier(.2,.7,.2,1); stroke-dashoffset: 0; }
.ux-orbit { animation: uxSpin 90s linear infinite; }
.ux-core { fill: var(--ux-acc2); opacity: .85; animation: uxPulse 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ux-dots circle { fill: var(--ux-ink); opacity: .28; }
@keyframes uxDraw { from { opacity: 0; transform: scale(.94); } to { opacity: .5; transform: none; } }
@keyframes uxSpin { to { transform: rotate(360deg); } }
@keyframes uxPulse { 50% { transform: scale(1.12); opacity: .6; } }
.ux-in { position: relative; padding-block: 56px 40px; display: grid; gap: 10px; }
.ux-crumb { font-size: 13px; color: var(--ux-dim); }
.ux-crumb a { border-bottom: 1px solid transparent; } .ux-crumb a:hover { border-color: currentColor; }
.ux-code { position: absolute; right: 24px; top: 18px; font-family: var(--font-display); font-weight: 800; font-size: clamp(120px, 22vw, 300px); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(244,241,234,.28); user-select: none; }
.ux-eye { font-family: var(--font-display); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ux-acc); margin-top: 14px; }
.ux-title { font-size: clamp(38px, 6.4vw, 76px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; max-width: 14ch; text-wrap: balance; }
.ux-proj { font-size: clamp(17px, 2.1vw, 23px); font-weight: 600; max-width: 40ch; line-height: 1.45; color: var(--ux-ink); text-wrap: balance; border-left: 3px solid var(--ux-acc2); padding-left: 14px; margin-top: 8px; }
.ux-pi { color: var(--ux-dim); font-size: 15px; }
.ux-pi b { color: var(--ux-ink); }
.ux-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ux-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ux-ink); box-shadow: inset 0 0 0 1px rgba(244,241,234,.35); }
.ux-btn svg { width: 16px; height: 16px; }
.ux-btn.solid { background: var(--ux-acc); color: #111; box-shadow: none; }
.ux-btn.off { opacity: .6; cursor: default; }
.ux-btn:not(.off):hover { box-shadow: inset 0 0 0 1px var(--ux-ink); }
.ux-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, max-content)); gap: 8px 40px; margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(244,241,234,.16); }
.ux-stats dt { font-size: 12px; color: var(--ux-dim); letter-spacing: .04em; }
.ux-stats dd { margin: 0; }
.ux-stats b { font-family: var(--font-display); font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.ux-stats b small { font-size: 14px; margin-left: 4px; color: var(--ux-dim); font-weight: 600; }
.ux-tabs { padding-top: 22px; }

.jt { text-align: justify; }
.up { display: grid; gap: 16px; }
.up-off { opacity: .65; cursor: default; }
.up-nav { margin: 0 0 4px; }
.up-anchor { scroll-margin-top: 96px; }
.up-h { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.035em; margin-top: 34px; display: flex; align-items: baseline; gap: 12px; scroll-margin-top: 96px; }
.up-h small { font-family: var(--font-display); font-size: 12px; letter-spacing: .18em; color: var(--main-deep); font-weight: 700; }
.up-l { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .06em; margin-bottom: 6px; }
.up-pitch { margin: 6px 0 0; padding: 16px 20px; border-left: 4px solid var(--main-deep); background: var(--main-soft); border-radius: 0 16px 16px 0; font-size: 16px; line-height: 1.7; }
.up-pre { white-space: pre-line; color: var(--ink-2); }
.up-tbl td { vertical-align: top; line-height: 1.6; }
.up-web { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; border: 1.5px dashed var(--ink-3); background: transparent; }
.up-web code { font-size: 13px; overflow-wrap: anywhere; }
.up-sib { flex-basis: 100%; }

/* 모션 그래픽 홍보 슬라이드 (10장) */
.pm { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: #0E1413; color: #F4F1EA; aspect-ratio: 16 / 8.2; min-height: 420px; isolation: isolate; box-shadow: var(--shadow); outline-offset: 4px; }
.pm-bg { position: absolute; inset: 0; z-index: -1; }
.pm-blob { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; filter: blur(42px); opacity: .55; animation: pmFloat var(--t) ease-in-out infinite alternate; }
.pm-blob.b0 { background: #6F8A67; } .pm-blob.b1 { background: #C98E9B; } .pm-blob.b2 { background: #7F9CC6; } .pm-blob.b3 { background: #97AF8F; } .pm-blob.b4 { background: #3B4F48; }
@keyframes pmFloat { to { transform: translate(18%, -14%) scale(1.25); } }
.pm-grid { position: absolute; inset: auto 0 0 0; width: 100%; height: 55%; }
.pm-grid path { fill: none; stroke: rgba(244,241,234,.18); stroke-width: .4; stroke-dasharray: 2 3; animation: pmDash 12s linear infinite; }
@keyframes pmDash { to { stroke-dashoffset: -60; } }
.pm-bars { position: absolute; top: 18px; left: 24px; right: 24px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; z-index: 2; }
.pm-bars i { height: 3px; border-radius: 2px; background: rgba(244,241,234,.22); overflow: hidden; cursor: pointer; padding-block: 6px; background-clip: content-box; }
.pm-bars em { display: block; height: 3px; width: 0; background: #F4F1EA; }
.pm-bars i.done em { width: 100%; } .pm-bars i.hold em { width: 4%; }
.pm-bars i.run em { animation: pmBar 6.5s linear forwards; }
@keyframes pmBar { to { width: 100%; } }
.pm-stage { position: absolute; inset: 0; }
.pm-s { position: absolute; inset: 0; padding: clamp(48px, 7%, 84px) clamp(24px, 7%, 88px) 76px; display: flex; flex-direction: column; justify-content: center; gap: 16px; visibility: hidden; }
.pm-s.on { visibility: visible; }
.pm-a { opacity: 0; transform: translateY(26px); }
.pm-s.on .pm-a { animation: pmIn .9s calc(var(--i) * 130ms + 80ms) both cubic-bezier(.2,.8,.2,1); }
@keyframes pmIn { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.pm-eye { font-family: var(--font-display); font-size: 12.5px; letter-spacing: .16em; color: #B8CDB1; text-transform: uppercase; }
.pm-big { font-size: clamp(34px, 6vw, 72px); font-weight: 800; letter-spacing: -.05em; line-height: 1.02; max-width: 15ch; }
.pm-sub { font-size: clamp(16px, 2vw, 22px); font-weight: 600; max-width: 40ch; color: rgba(244,241,234,.85); line-height: 1.5; }
.pm-text { font-size: clamp(18px, 2.3vw, 27px); line-height: 1.6; font-weight: 600; max-width: 34em; text-align: justify; letter-spacing: -.01em; }
.pm-quote { margin: 0; font-size: clamp(20px, 2.8vw, 34px); line-height: 1.45; font-weight: 700; letter-spacing: -.03em; max-width: 28em; text-align: justify; }
.pm-quote::before { content: "“"; display: block; font-family: var(--font-display); font-size: 1.9em; line-height: .6; color: #E7B3BE; }
.pm-sign { color: #B8CDB1; font-weight: 700; }
.pm-names, .pm-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pm-names span { padding: 8px 16px; border-radius: 999px; background: rgba(244,241,234,.1); font-weight: 600; }
.pm-chips span { padding: 12px 22px; border-radius: 999px; font-size: clamp(15px, 1.9vw, 21px); font-weight: 700; background: rgba(244,241,234,.92); color: #12201C; }
.pm-chips span:nth-child(3n+2) { background: #E7B3BE; } .pm-chips span:nth-child(3n) { background: #B8CDB1; }
.pm-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 46em; }
.pm-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; font-size: clamp(15px, 1.9vw, 21px); font-weight: 600; line-height: 1.4; }
.pm-list b { width: 44px; height: 44px; border-radius: 50%; background: #B8CDB1; color: #12201C; display: grid; place-items: center; font-family: var(--font-display); }
.pm-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; max-width: 760px; }
.pm-team div { display: grid; justify-items: start; gap: 2px; padding: 14px; border-radius: 18px; background: rgba(244,241,234,.08); }
.pm-team i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #12201C; background: #B8CDB1; margin-bottom: 6px; }
.pm-team .rk-prof i { background: #E7B3BE; } .pm-team .rk-grad i { background: #A9C1E8; }
.pm-team small { color: rgba(244,241,234,.6); font-size: 12px; line-height: 1.35; }
.pm-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; position: relative; max-width: 900px; }
.pm-steps div { padding: 28px 18px 0 0; border-top: 2px solid rgba(244,241,234,.35); position: relative; }
.pm-steps div::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #E7B3BE; }
.pm-steps b { font-size: 18px; }
.pm-steps p { color: rgba(244,241,234,.8); font-size: 14.5px; margin-top: 6px; }
.pm-k-title .pm-big { max-width: 12ch; }
.pm-k-end .pm-quote { font-size: clamp(18px, 2.4vw, 28px); }
.pm-ctl { position: absolute; left: 24px; bottom: 20px; display: flex; gap: 8px; align-items: center; z-index: 2; }
.pm-ctl button { width: 38px; height: 38px; border-radius: 50%; background: rgba(244,241,234,.14); color: #F4F1EA; font-size: 16px; }
.pm-ctl button:hover { background: rgba(244,241,234,.28); }
.pm-n { font-family: var(--font-display); font-size: 13px; color: rgba(244,241,234,.7); margin-left: 6px; font-variant-numeric: tabular-nums; }

/* 편집형 연구 개요 */
.up-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px; }
.up-flow span { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--card); font-weight: 700; font-size: 14px; box-shadow: var(--shadow-sm); }
.up-flow span b { font-family: var(--font-display); color: var(--main-deep); }
.up-flow span small { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .14em; color: var(--ink-3); }
.up-flow > i { width: 28px; height: 2px; background: var(--main); position: relative; }
.up-flow > i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--main); }
.up-ed { display: grid; gap: 0; background: var(--card); border-radius: var(--radius-xl); overflow: hidden; }
.up-ed-a { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 34px 40px; border-top: 1px solid var(--line); }
.up-ed-a:first-child { border-top: 0; }
.up-ed-n b { display: block; font-family: var(--font-display); font-size: 84px; font-weight: 800; line-height: .9; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--main-deep); }
.up-ed-a:nth-child(2) .up-ed-n b { -webkit-text-stroke-color: #C98E9B; } .up-ed-a:nth-child(3) .up-ed-n b { -webkit-text-stroke-color: #7F9CC6; } .up-ed-a:nth-child(4) .up-ed-n b { -webkit-text-stroke-color: #B9A06A; }
.up-ed-n small { font-family: var(--font-display); font-size: 12px; letter-spacing: .2em; color: var(--ink-3); font-weight: 700; }
.up-ed-b h4 { font-size: 22px; letter-spacing: -.03em; }
.up-ed-sub { font-size: 13px; color: var(--ink-3); margin: 4px 0 14px; }
.up-ed-lead { font-size: 19px; font-weight: 600; line-height: 1.7; letter-spacing: -.015em; color: var(--ink); max-width: 46em; }
.up-ed-rest { margin-top: 12px; color: var(--ink-2); line-height: 1.85; max-width: 52em; }

/* 공동연구모둠 · 키워드 별자리 */
.uv-unit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; background: var(--card); border-radius: var(--radius-xl); padding: 34px; align-items: center; }
.uv-unit-t { display: grid; gap: 6px; }
.uv-name { font-size: 26px; letter-spacing: -.03em; margin-bottom: 10px; }
.uv-topic { font-size: 19px; font-weight: 600; line-height: 1.6; margin-bottom: 8px; }
.uv-kw { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; justify-self: center; }
.uv-kw svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.uv-kw line { stroke: var(--main); stroke-width: .35; stroke-dasharray: 1 1.4; }
.uv-kw .ring { fill: none; stroke: var(--line); stroke-width: .3; }
.uv-kw-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--main-deep); color: #fff; display: grid; place-items: center; text-align: center; font-size: 14px; line-height: 1.3; }
.uv-kw span { position: absolute; transform: translate(-50%, -50%); padding: 7px 13px; border-radius: 999px; background: var(--bg); box-shadow: var(--shadow-sm); font-size: 13.5px; font-weight: 700; max-width: 46%; text-align: center; line-height: 1.3; animation: uvPop .7s var(--d) both cubic-bezier(.2,.8,.2,1); }
.uv-kw span:nth-child(3n) { background: var(--pink); } .uv-kw span:nth-child(3n+1) { background: var(--blue-soft); }
@keyframes uvPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }

/* 연구진 궤도도 */
.uv-team { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: center; background: var(--card); border-radius: var(--radius-xl); padding: 28px; }
.uv-orbit { position: relative; container-type: inline-size; aspect-ratio: 1; max-width: 460px; width: 100%; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, var(--main-soft) 0 30%, transparent 30.5%), repeating-radial-gradient(circle, transparent 0 18%, var(--line) 18% 18.3%); }
.uv-hub { position: absolute; inset: 34%; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-content: center; text-align: center; gap: 2px; padding: 8px; }
.uv-hub b { font-size: 14px; line-height: 1.3; }
.uv-hub small { font-size: 11px; opacity: .7; }
.uv-node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-41cqw); }
.uv-node span { position: absolute; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); display: grid; justify-items: center; gap: 2px; width: 82px; text-align: center; }
.uv-node i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--main); color: #fff; box-shadow: 0 0 0 4px var(--card); }
.uv-node b { font-size: 12.5px; }
.rk-lead i, .uv-legend .rk-lead i { background: var(--ink); } .rk-prof i, .uv-legend .rk-prof i { background: #C98E9B; } .rk-grad i, .uv-legend .rk-grad i { background: #7F9CC6; } .rk-co i, .uv-legend .rk-co i { background: var(--main-deep); }
.uv-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; font-weight: 600; }
.uv-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }

/* 연구문제 */
.uv-qs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.uv-q { position: relative; background: var(--card); border-radius: var(--radius-lg); padding: 30px 28px 26px; overflow: hidden; }
.uv-qn { position: absolute; right: 14px; top: -8px; font-family: var(--font-display); font-size: 78px; font-weight: 800; color: var(--main-soft); letter-spacing: -.05em; z-index: 0; }
.uv-q h4, .uv-q p { position: relative; }
.uv-q h4 { font-size: 17px; margin-bottom: 10px; }
.uv-q p { color: var(--ink-2); line-height: 1.8; white-space: pre-line; }

/* 세부 연구 흐름 · 실행 타임라인 · 협력방식 */
.uv-tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; counter-reset: t; }
.uv-task { position: relative; background: var(--card); border-radius: var(--radius-lg); padding: 26px 24px; display: grid; gap: 10px; align-content: start; }
.uv-task:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 30px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; display: grid; place-items: center; z-index: 1; }
.uv-tn { width: 40px; height: 40px; border-radius: 12px; background: var(--main-deep); color: #fff; font-family: var(--font-display); font-weight: 800; display: grid; place-items: center; }
.uv-task h4 { font-size: 16px; line-height: 1.45; }
.uv-ppl { display: flex; flex-wrap: wrap; gap: 6px; }
.uv-ppl span { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--main-soft); color: var(--main-deep); }
.uv-task p { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.uv-tl { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; margin-top: 18px; background: var(--card); border-radius: var(--radius-xl); padding: 30px 28px 24px; }
.uv-ms { position: relative; padding: 30px 18px 0 0; border-top: 3px solid var(--main); animation: uvPop2 .6s var(--d) both; }
.uv-ms i { position: absolute; top: -11px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 4px solid var(--main-deep); }
.uv-ms b { font-size: 17px; font-family: var(--font-display); }
.uv-ms p { margin-top: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.7; white-space: pre-line; }
.uv-ms small { display: block; margin-top: 8px; color: var(--ink-3); font-size: 12.5px; }
@keyframes uvPop2 { from { opacity: 0; transform: translateY(10px); } }
.uv-coop { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.uv-coop > div { display: flex; flex-wrap: wrap; gap: 8px; }
.uv-coop span { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.uv-coop span.on { background: var(--ink); color: #fff; box-shadow: none; }
.uv-goal .card h4 { font-size: 16px; margin-bottom: 8px; }

@media (max-width: 860px) {
  .up-ed-a { grid-template-columns: 1fr; gap: 6px; padding: 26px 22px; }
  .up-ed-n b { font-size: 56px; }
  .uv-unit, .uv-team { grid-template-columns: 1fr; padding: 22px; }
  .uv-tl { grid-template-columns: 1fr; gap: 20px; }
  .uv-ms { border-top: 0; border-left: 3px solid var(--main); padding: 0 0 0 22px; }
  .uv-ms i { top: 2px; left: -11px; }
  .uv-task:not(:last-child)::after { display: none; }
  .pm { aspect-ratio: auto; min-height: 560px; border-radius: var(--radius-lg); }
  .pm-s { padding: 56px 22px 76px; justify-content: flex-start; }
  .ux-code { font-size: 120px; right: 12px; top: 64px; }
  .ux-stats b { font-size: 30px; }
}
@media (max-width: 520px) { .uv-node span { width: 64px; } .uv-node i { width: 36px; height: 36px; } .uv-node b { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) {
  .ux-orbit, .ux-core, .pm-blob, .pm-grid path, .ux-arc, .uv-kw span, .uv-ms { animation: none !important; }
  .pm-s.on .pm-a { animation: none; opacity: 1; transform: none; }
}

/* ---------- 진출성과 대시보드 ---------- */
.cr-warn { background: #FFF6E5; border: 1px solid #F0D9A8; border-radius: var(--radius-md); padding: 12px 16px; font-size: 14px; margin-bottom: 16px; }
.cr-warn b { margin-right: 8px; color: #8A5A00; }
.cr-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.cr-kpi .card { padding: 18px 20px; display: grid; gap: 2px; }
.cr-kpi span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.cr-kpi b { font-size: 30px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.cr-kpi b small { font-size: 14px; margin-left: 3px; color: var(--ink-2); }
.cr-kpi .card > small { font-size: 12px; color: var(--ink-3); }
.cr-panels .card { min-width: 0; }
.cr-panels h3 { font-size: 17px; }
.cr-bars, .cr-grow { display: grid; gap: 10px; margin-top: 14px; }
.cr-bar, .cr-grow > div { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13.5px; }
.cr-bar i, .cr-grow i { height: 12px; border-radius: 6px; background: var(--bg); position: relative; overflow: hidden; display: block; }
.cr-bar em, .cr-grow em { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.cr-grow em.a1 { background: var(--main-deep); }
.cr-grow em.a0 { background: var(--main); opacity: .55; z-index: 1; }
.cr-bar b, .cr-grow b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-bar small { grid-column: 2 / -1; color: var(--ink-3); font-size: 12px; margin-top: -4px; }
.cr-tbl td { font-variant-numeric: tabular-nums; vertical-align: top; }
.cr-up { color: var(--main-deep); font-weight: 700; }
@media (max-width: 640px) { .cr-bar, .cr-grow > div { grid-template-columns: 76px minmax(0, 1fr) auto; } }
.cr-tbl .pill { white-space: nowrap; }

/* 연구소 상세: 여러 연구단 묶음 카드 · 슬라이드 보조 */
.pm-mid { font-size: clamp(24px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; max-width: 22ch; text-wrap: balance; }
.uv-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.uv-uc { display: grid; gap: 12px; align-content: start; background: var(--card); border-radius: var(--radius-xl); padding: 28px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.uv-uc:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.uv-uc-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-3); }
.uv-uc-h b { color: var(--ink); }
.uv-uc-code { font-family: var(--font-display); font-size: 44px; font-weight: 800; line-height: .9; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--main-deep); }
.uv-uc h4 { font-size: 19px; line-height: 1.45; letter-spacing: -.03em; }
.uv-uc p { color: var(--ink-2); line-height: 1.75; }
.uv-uc-go { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: 14px; color: var(--main-deep); }
.uv-uc-go svg { width: 16px; height: 16px; }

/* ---------- 홍보 슬라이드: 글자 크기 축소 · 모션 강화 ---------- */
.pm { --ease: cubic-bezier(.16,.84,.24,1); }
.pm-big { font-size: clamp(26px, 4.1vw, 50px); }
.pm-k-title .pm-big { max-width: 16ch; }
.pm-mid { font-size: clamp(19px, 2.5vw, 30px); }
.pm-sub { font-size: clamp(13.5px, 1.45vw, 17px); }
.pm-text { font-size: clamp(14.5px, 1.6vw, 19px); line-height: 1.75; max-width: 40em; }
.pm-quote, .pm-k-end .pm-quote { font-size: clamp(16px, 2vw, 24px); line-height: 1.55; max-width: 34em; }
.pm-chips span { font-size: clamp(13px, 1.4vw, 16px); padding: 9px 18px; }
.pm-list li { font-size: clamp(13.5px, 1.45vw, 16.5px); grid-template-columns: 36px 1fr; }
.pm-list b { width: 36px; height: 36px; font-size: 14px; }
.pm-team b { font-size: 14px; } .pm-team i { width: 32px; height: 32px; font-size: 13px; }
.pm-steps b { font-size: 15.5px; } .pm-steps p { font-size: 13px; }
.pm-eye { font-size: 11.5px; }

/* 단어 단위 마스크 등장 */
.pm-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.pm-w > span { display: inline-block; transform: translateY(105%) rotate(4deg); opacity: 0; }
.pm-s.on .pm-w > span { animation: pmWord .8s calc(var(--i) * 140ms + var(--w) * 55ms + 120ms) both var(--ease); }
.pm-s.on .pm-fast .pm-w > span { animation-duration: .6s; animation-delay: calc(var(--i) * 140ms + var(--w) * 18ms + 120ms); }
@keyframes pmWord { from { transform: translateY(105%) rotate(4deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }

/* 장면 전환: 들어오는 장면 / 나가는 장면 */
.pm-s.on { animation: pmEnter .9s both var(--ease); }
.pm-s.out { visibility: visible; animation: pmExit .7s both var(--ease); pointer-events: none; }
@keyframes pmEnter { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes pmExit { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: translateX(-6%) scale(.96); filter: blur(8px); } }

/* 요소별 등장 다양화 */
.pm-s.on .pm-chips span { animation: pmPop .7s calc(var(--i) * 110ms + 200ms) both cubic-bezier(.34,1.56,.64,1); }
@keyframes pmPop { from { opacity: 0; transform: scale(.4) rotate(-8deg); } to { opacity: 1; transform: none; } }
.pm-s.on .pm-list li { animation: pmSlide .8s calc(var(--i) * 160ms + 150ms) both var(--ease); }
@keyframes pmSlide { from { opacity: 0; transform: translateX(-60px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.pm-team { perspective: 800px; }
.pm-s.on .pm-team > div { animation: pmFlip .8s calc(var(--i) * 90ms + 150ms) both var(--ease); }
@keyframes pmFlip { from { opacity: 0; transform: rotateY(-75deg) translateZ(-40px); } to { opacity: 1; transform: none; } }
.pm-steps div { border-top-color: transparent; }
.pm-steps div::after { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: rgba(244,241,234,.45); transform-origin: left; transform: scaleX(0); }
.pm-s.on .pm-steps div::after { animation: pmLine .7s calc(var(--i) * 260ms + 100ms) both var(--ease); }
.pm-s.on .pm-steps div::before { animation: pmPop .6s calc(var(--i) * 260ms + 300ms) both cubic-bezier(.34,1.56,.64,1); }
@keyframes pmLine { to { transform: scaleX(1); } }
.pm-s.on .pm-names span { animation: pmPop .6s calc(var(--i) * 80ms + 200ms) both cubic-bezier(.34,1.56,.64,1); }
.pm-quote::before { transform-origin: left bottom; }
.pm-s.on .pm-quote::before { animation: pmPop .8s .1s both cubic-bezier(.34,1.56,.64,1); }
.pm-sign { position: relative; padding-top: 14px; }
.pm-sign::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 2px; background: #B8CDB1; transform-origin: left; transform: scaleX(0); }
.pm-s.on .pm-sign::before { animation: pmLine .8s .9s both var(--ease); }

/* 배경 연출: 대형 장면 번호 · 회전 링 · 빛줄기 · 장면마다 이동하는 색 덩어리 */
.pm-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pm-stage, .pm-bars, .pm-ctl { z-index: 2; }
.pm-num { position: absolute; right: 4%; bottom: -6%; font-family: var(--font-display); font-weight: 800; font-size: clamp(140px, 24vw, 320px); line-height: 1; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.2px rgba(244,241,234,.16); }
.pm-num.in { animation: pmNum 1.1s both var(--ease); }
@keyframes pmNum { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
.pm-ring { position: absolute; width: min(52%, 520px); right: -8%; top: -18%; animation: pmRot 40s linear infinite; }
.pm-ring circle { fill: none; stroke: rgba(184,205,177,.35); stroke-width: .6; stroke-dasharray: 3 7; }
.pm-ring .r2 { stroke: rgba(231,179,190,.4); stroke-dasharray: 60 20 4 20; stroke-width: 1; animation: pmRot 18s linear infinite reverse; transform-origin: center; transform-box: fill-box; }
.pm-ring .r3 { stroke: rgba(169,193,232,.35); stroke-dasharray: 1 4; }
@keyframes pmRot { to { transform: rotate(360deg); } }
.pm-beam { position: absolute; left: -30%; top: -40%; width: 60%; height: 180%; background: linear-gradient(90deg, transparent, rgba(244,241,234,.07), transparent); transform: rotate(18deg); animation: pmBeam 7s ease-in-out infinite; }
@keyframes pmBeam { 0%, 15% { left: -40%; } 60%, 100% { left: 120%; } }
.pm-sweep { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: linear-gradient(90deg, transparent, rgba(184,205,177,.22), transparent); transform: translateX(-100%); }
.pm.pulse .pm-sweep { animation: pmSweep 1s both var(--ease); }
@keyframes pmSweep { to { transform: translateX(100%); } }
.pm-bg { transition: transform 1.6s var(--ease); }
.pm[data-k="1"] .pm-bg { transform: translate(-6%, 4%) scale(1.12); }
.pm[data-k="2"] .pm-bg { transform: translate(5%, -5%) scale(1.18) rotate(4deg); }
.pm[data-k="3"] .pm-bg { transform: translate(-3%, -6%) scale(1.08) rotate(-3deg); }
.pm-blob { animation-name: pmFloat2; }
@keyframes pmFloat2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(22%, -18%) scale(1.35); } 100% { transform: translate(-14%, 12%) scale(.9); } }
.pm-bars i.run em { box-shadow: 0 0 10px rgba(244,241,234,.8); }

@media (prefers-reduced-motion: reduce) {
  .pm-s.on, .pm-s.out, .pm-w > span, .pm-s.on .pm-w > span, .pm-num.in, .pm-ring, .pm-ring .r2, .pm-beam, .pm.pulse .pm-sweep,
  .pm-s.on .pm-chips span, .pm-s.on .pm-list li, .pm-s.on .pm-team > div, .pm-s.on .pm-steps div::after, .pm-s.on .pm-steps div::before, .pm-s.on .pm-names span, .pm-s.on .pm-sign::before { animation: none !important; }
  .pm-w > span { transform: none; opacity: 1; }
  .pm-steps div::after, .pm-sign::before { transform: none; }
  .pm-bg { transition: none; }
}

/* ---------- 중점주제 Ⅰ·Ⅱ 화면 ---------- */
.ax-pg { --ax: #C98E9B; --ax-soft: var(--pink); }
.ax-pg.ax-II { --ax: #7F9CC6; --ax-soft: var(--blue-soft); }
.ax-inst-card { margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k b go" "k p go" "k l go"; gap: 2px 24px; align-items: center; background: var(--ink); color: #F4F1EA; border-radius: var(--radius-xl); padding: 26px 32px; transition: transform .2s; }
.ax-inst-card:hover { transform: translateY(-3px); }
.ax-ic-k { grid-area: k; writing-mode: vertical-rl; font-size: 12px; letter-spacing: .2em; color: var(--ax); font-weight: 700; }
.ax-inst-card b { grid-area: b; font-size: 26px; letter-spacing: -.03em; }
.ax-ic-p { grid-area: p; font-size: 16px; font-weight: 600; opacity: .9; }
.ax-ic-l { grid-area: l; font-size: 13px; opacity: .65; }
.ax-ic-go { grid-area: go; display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 999px; background: var(--ax-soft); color: var(--ink); }
.ax-ic-go svg { width: 16px; height: 16px; }
.ax-goal { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; background: var(--card); border-radius: var(--radius-xl); padding: 34px; }
.ax-goal blockquote { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.6; letter-spacing: -.02em; border-left: 5px solid var(--ax); padding-left: 20px; }
.ax-goal p { color: var(--ink-2); line-height: 1.8; }
.ax-issues { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.ax-issues div { background: var(--ax-soft); border-radius: var(--radius-lg); padding: 22px 24px; display: grid; gap: 4px; }
.ax-in { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--ink-2); }
.ax-issues b { font-size: 19px; letter-spacing: -.02em; }
.ax-issues p { font-size: 14px; color: var(--ink-2); }
.ax-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--card); border-radius: var(--radius-xl); overflow: hidden; }
.ax-flow div { padding: 30px 26px; position: relative; border-left: 1px solid var(--line); animation: uvPop2 .6s var(--d) both; }
.ax-flow div:first-child { border-left: 0; }
.ax-flow div:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 38px; width: 16px; height: 16px; background: var(--card); border-top: 2px solid var(--ax); border-right: 2px solid var(--ax); transform: rotate(45deg); z-index: 1; }
.ax-flow span { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ax); }
.ax-flow h4 { font-size: 21px; margin: 10px 0 4px; }
.ax-flow p { color: var(--ink-3); font-size: 14px; }
.ax-model { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 32px; align-items: center; background: var(--card); border-radius: var(--radius-xl); padding: 34px; }
.ax-tri { position: relative; aspect-ratio: 300 / 260; width: 100%; }
.ax-tri svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ax-tri polygon { fill: none; stroke: var(--ax); stroke-width: 2; stroke-dasharray: 6 6; animation: pmDash 10s linear infinite; }
.ax-tri circle { fill: var(--ax-soft); }
.ax-tri span { position: absolute; transform: translate(-50%, -50%); background: var(--ink); color: #fff; font-weight: 700; font-size: 13.5px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; max-width: 60%; text-align: center; white-space: normal; line-height: 1.3; }
.ax-tri .n0 { left: 50%; top: 8.5%; } .ax-tri .n1 { left: 88%; top: 91.5%; } .ax-tri .n2 { left: 12%; top: 91.5%; }
.ax-tri b { position: absolute; left: 50%; top: 57.7%; transform: translate(-50%, -50%); font-size: 14px; text-align: center; width: 34%; line-height: 1.3; }
.ax-model-t { display: grid; gap: 6px; }
.ax-model-t > p { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.ax-areas { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-weight: 600; }
.ax-rm { margin-top: 14px; }
.ax-net { display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.ax-hub { border-radius: var(--radius-xl); background: var(--ink); color: #fff; display: grid; place-content: center; text-align: center; padding: 24px; gap: 4px; }
.ax-hub b { font-size: 18px; } .ax-hub small { opacity: .7; }
.ax-ring { background: var(--card); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.ax-ring .up-l { flex-basis: 100%; }
.ax-ring span:not(.up-l) { padding: 6px 12px; border-radius: 999px; background: var(--main-soft); font-size: 13.5px; font-weight: 600; }
.ax-ring.g span:not(.up-l) { background: var(--blue-soft); } .ax-ring.t span:not(.up-l) { background: var(--pink); }
.ax-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ax-kpi div { background: var(--card); border-radius: var(--radius-lg); padding: 22px; display: grid; gap: 4px; }
.ax-kpi b { font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ax-kpi b small { font-size: 14px; margin-left: 3px; color: var(--ink-3); }
.ax-kpi span { font-size: 13px; color: var(--ink-3); }
@media (max-width: 960px) { .ax-net { grid-template-columns: 1fr 1fr; } .ax-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ax-goal, .ax-model { grid-template-columns: 1fr; padding: 24px; }
  .ax-flow { grid-template-columns: 1fr 1fr; }
  .ax-flow div:nth-child(2)::after { display: none; }
  .ax-inst-card { grid-template-columns: 1fr; grid-template-areas: "k" "b" "p" "l" "go"; padding: 22px; }
  .ax-ic-k { writing-mode: horizontal-tb; }
  .ax-ic-go { justify-self: start; margin-top: 10px; }
  .ax-net { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ax-tri polygon, .ax-flow div { animation: none; } }
.gx-info { margin: 8px 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); display: grid; gap: 2px; }
.gn.pi text, .gn.person text, .gn.fellow text { font-size: 9px; }

/* v1.25 FNR 보완: 대표 성과 · Open API · 외부 수집 */
.rep-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.rep-list a { color: inherit; text-decoration: none; } .rep-list a:hover b { color: var(--main-deep); text-decoration: underline; }
.rep-list small { display: block; color: var(--ink-3); }
.oapi-out { margin-top: 12px; max-height: 360px; overflow: auto; background: #1e1e1e; color: #d4d4d4; padding: 14px; border-radius: 12px; font-size: 12px; white-space: pre-wrap; }
.orc-top { display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; }

/* v1.27 연구자 분석 대시보드 */
.fd { margin: 6px 0 10px; padding: 22px; border-radius: var(--radius-xl); background: linear-gradient(160deg, #f3f6f1, #fff); border: 1px solid var(--line); }
.fd-head h3 { margin: 0; font-size: 20px; } .fd-head p { margin: 4px 0 16px; color: var(--ink-3); font-size: 14px; }
.fd-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.fd-kpi { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm); animation: fdIn .6s both; animation-delay: calc(var(--d) * 60ms); }
.fd-kpi small { color: var(--ink-3); font-size: 12.5px; } .fd-kpi b { display: block; font: 800 28px/1.15 var(--font-display); } .fd-kpi b i { font-style: normal; font-size: .45em; margin-left: 2px; color: var(--main-deep); } .fd-kpi em { font-style: normal; font-size: 11px; color: var(--ink-3); }
@keyframes fdIn { from { opacity: 0; transform: translateY(12px); } }
.fd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fd-card h4 { margin: 0 0 10px; font-size: 15px; }
.fd-bars { display: grid; gap: 6px; }
.fd-bar { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; color: inherit; text-decoration: none; border-radius: 6px; padding: 1px 2px; }
a.fd-bar:hover { background: var(--main-soft); }
.fd-bar .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.fd-bar .t { height: 10px; border-radius: 5px; background: var(--bg); overflow: hidden; }
.fd-bar .t i { display: block; height: 100%; width: var(--w); border-radius: 5px; animation: fdGrow 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d) * 50ms + 150ms); transform-origin: left; }
@keyframes fdGrow { from { transform: scaleX(0); } }
.fd-bar b { font-family: var(--font-display); font-size: 13px; } .fd-bar b small { font-size: 10px; color: var(--ink-3); margin-left: 1px; }
.fd-stack { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; }
.fd-leg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); } .fd-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.fd-list-h { font-size: 20px; }
@media (max-width: 1100px) { .fd-kpis { grid-template-columns: repeat(3, 1fr); } .fd-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fd-kpis { grid-template-columns: repeat(2, 1fr); } .fd-grid { grid-template-columns: 1fr; } .fd { padding: 14px; } }

/* v1.27 연구자 개별 페이지 */
.fv-hero { position: relative; color: #fff; padding: 34px 0 30px; overflow: hidden;
  background: radial-gradient(70% 120% at 90% 0%, rgba(255,255,255,.14), transparent 60%), linear-gradient(130deg, #14202e 0%, #23405f 45%, #3d7a6a 100%); }
.fv-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.fv-hero .wrap { position: relative; z-index: 1; }
.fv-back { color: rgba(255,255,255,.75); text-decoration: none; font-size: 13px; } .fv-back:hover { color: #fff; }
.fv-top { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; margin-top: 18px; }
.fv-ph { position: relative; width: 170px; height: 170px; }
.fv-ph .fl-ph.big { width: 170px; height: 170px; border-radius: 50%; font-size: 52px; object-fit: cover; display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; border: 3px solid rgba(255,255,255,.75); }
.fv-ring { position: absolute; inset: -12px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.35); animation: oSpin2 30s linear infinite; }
@keyframes oSpin2 { to { transform: rotate(360deg); } }
.fv-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.fv-tags span, .fv-tags a { padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); font-size: 12px; font-weight: 600; color: #fff; text-decoration: none; }
.fv-tags .green { background: rgba(80,200,140,.35); } .fv-tags .pink { background: rgba(230,120,150,.4); }
.fv-name { font-size: clamp(36px, 5.6vw, 66px); line-height: 1.05; margin: 12px 0 8px; letter-spacing: -0.03em; animation: fvIn .9s cubic-bezier(.2,.7,.2,1) both; }
.fv-name small { display: block; font-size: .32em; font-weight: 600; letter-spacing: .04em; opacity: .75; margin-top: 6px; }
@keyframes fvIn { from { opacity: 0; transform: translateY(18px); } }
.fv-sub { margin: 0 0 12px; color: rgba(255,255,255,.85); font-size: 15px; }
.fv-kw { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.fv-kw span { font-size: 13px; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.1); animation: fvIn .6s both; animation-delay: calc(.3s + var(--d) * 60ms); }
.fv-hero .fl-acts .btn-dark { background: #fff; color: #1B1B1B; } .fv-hero .fl-acts .btn-line { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
.fv-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 26px; }
.fv-kpi { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); animation: fvIn .7s both; animation-delay: calc(.35s + var(--d) * 70ms); }
.fv-kpi b { display: block; font: 800 clamp(20px, 2.4vw, 32px)/1.15 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fv-kpi b i { font-style: normal; font-size: .45em; opacity: .8; margin-left: 2px; }
.fv-kpi small { color: rgba(255,255,255,.8); font-size: 12.5px; }
.fv-nav { position: sticky; top: 76px; z-index: 6; background: rgba(246,246,246,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.fv-nav .wrap { display: flex; gap: 4px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; }
.fv-nav a { flex: none; padding: 7px 14px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; } .fv-nav a:hover { background: var(--main-soft); color: var(--main-deep); }
#fv-promo, #fv-about, #fv-perf, #fv-more { scroll-margin-top: 140px; }
.fv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.fv-card h3 { display: flex; gap: 8px; align-items: baseline; font-size: 17px; margin: 0 0 10px; } .fv-card h3 span { font: 800 13px var(--font-display); color: var(--main); }
.fv-card .kv th { width: 92px; } .fv-just { display: block; text-align: justify; word-break: keep-all; }
.fv-h { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 14px; } .fv-h small { font-size: 14px; color: var(--ink-3); font-weight: 600; margin-left: 8px; }
.fv-charts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-bottom: 14px; } .fv-charts h4 { margin: 0 0 10px; font-size: 15px; }
.fv-years { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding-top: 6px; }
.fv-years div { flex: 1; max-width: 70px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.fv-years i { width: 70%; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #6c9ef8, #3563C9); animation: fvBar 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d) * 80ms + 200ms); transform-origin: bottom; }
@keyframes fvBar { from { transform: scaleY(0); } }
.fv-years b { font: 800 14px var(--font-display); } .fv-years small { color: var(--ink-3); font-size: 12px; }
@media (max-width: 960px) { .fv-top { grid-template-columns: 1fr; } .fv-ph, .fv-ph .fl-ph.big { width: 120px; height: 120px; } .fv-kpis { grid-template-columns: repeat(3, 1fr); } .fv-grid { grid-template-columns: 1fr 1fr; } .fv-charts { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .fv-kpis { grid-template-columns: repeat(2, 1fr); } .fv-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fv-ring { animation: none; } }

/* v1.28 하위 메뉴 묶음 (연구인력 › 교육 프로그램) */
.gnb .sub .sub-grp > a { font-weight: 700; color: var(--ink); }
.gnb .sub .sub-grp ul { list-style: none; margin: 0 0 4px; padding: 0 0 0 12px; border-left: 2px solid var(--main-soft); margin-left: 12px; }
.gnb .sub .sub-grp ul a { font-size: 13.5px; padding: 6px 10px; }
.drawer-nav .dr-grp { display: grid; margin: 4px 0 6px; }
.drawer-nav .dr-grp > span { font-weight: 700; font-size: 14px; padding: 8px 0 4px; color: var(--ink); }
.drawer-nav .dr-grp a { padding-left: 14px; border-left: 2px solid var(--main-soft); }
.tabs2 { padding-top: 8px; }
.tabs2 a { font-size: 13px; padding: 8px 15px; background: var(--main-soft); box-shadow: none; }
.tabs2 a.on { background: var(--main-deep); color: #fff; }

/* v1.29 교육 프로그램 홍보 슬라이드: 애니메이션 강화 */
.edu-pm { padding-bottom: 0; }
.edu-pm .pm { perspective: 1200px; }
.edu-pm .pm-s.on { animation: eduEnter 1.1s both cubic-bezier(.16,1,.3,1); transform-origin: 50% 60%; }
@keyframes eduEnter { 0% { clip-path: circle(0% at 85% 50%); transform: rotateY(-14deg) scale(1.06); filter: blur(10px) saturate(1.6); } 60% { filter: blur(0) saturate(1.2); } 100% { clip-path: circle(150% at 85% 50%); transform: none; filter: none; } }
.edu-pm .pm-s.out { animation: eduExit .8s both cubic-bezier(.7,0,.84,0); }
@keyframes eduExit { to { opacity: 0; transform: translateX(-10%) rotateY(18deg) scale(.9); filter: blur(12px); } }
.edu-pm .pm-s.on .pm-a { animation: eduIn 1s calc(var(--i) * 120ms + 150ms) both cubic-bezier(.34,1.56,.64,1); }
@keyframes eduIn { 0% { opacity: 0; transform: translateY(40px) scale(.85) rotateX(25deg); filter: blur(10px); } 100% { opacity: 1; transform: none; filter: none; } }
.edu-pm .pm-s.on .pm-w > span { animation: eduWord .9s calc(var(--i) * 140ms + var(--w) * 60ms + 160ms) both cubic-bezier(.34,1.56,.64,1); }
@keyframes eduWord { 0% { transform: translateY(120%) rotate(10deg) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
.edu-pm .pm-s.on .pm-chips span { animation: eduChip .8s calc(var(--i) * 100ms + 220ms) both cubic-bezier(.34,1.8,.64,1); }
@keyframes eduChip { 0% { opacity: 0; transform: translateY(30px) scale(.3) rotate(-14deg); } 70% { transform: scale(1.08) rotate(2deg); } 100% { opacity: 1; transform: none; } }
.edu-pm .pm-s.on .pm-chips span:hover { transform: translateY(-4px) scale(1.04); transition: transform .2s; }
.edu-pm .pm-s.on .pm-list li { position: relative; overflow: hidden; }
.edu-pm .pm-s.on .pm-list li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); transform: translateX(-120%); animation: eduShine 1.4s calc(var(--i) * 120ms + 600ms) both; }
@keyframes eduShine { to { transform: translateX(120%); } }
.edu-pm .pm-s.on .pm-steps > div { animation: eduStep .9s calc(var(--i) * 160ms + 200ms) both cubic-bezier(.34,1.56,.64,1); }
@keyframes eduStep { 0% { opacity: 0; transform: translateX(60px) skewX(-8deg); } 100% { opacity: 1; transform: none; } }
.edu-pm .pm-blob { animation-duration: calc(var(--t) * .6) !important; filter: blur(50px) saturate(1.4); }
.edu-pm .pm-ring { animation: eduSpin 18s linear infinite; }
@keyframes eduSpin { to { transform: rotate(360deg); } }
.edu-pm .pm::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.5px); background-size: 46px 46px; opacity: .14; animation: eduStars 40s linear infinite; z-index: 1; }
@keyframes eduStars { to { background-position: 460px -460px; } }
@media (prefers-reduced-motion: reduce) { .edu-pm .pm-s.on, .edu-pm .pm-s.on .pm-a, .edu-pm .pm-s.on .pm-w > span, .edu-pm .pm-s.on .pm-chips span, .edu-pm .pm-s.on .pm-steps > div, .edu-pm .pm-ring, .edu-pm .pm::after { animation: none !important; opacity: 1; transform: none; filter: none; clip-path: none; } }

/* v1.30 우수연구자 */
.sp-hero { position: relative; overflow: hidden; color: #fff; padding: 46px 0 36px; background: radial-gradient(70% 120% at 85% 0%, rgba(234,203,209,.35), transparent 60%), linear-gradient(130deg, #24121a 0%, #5a2a3c 50%, #b85c75 100%); }
.sp-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.sp-hero .wrap { position: relative; z-index: 1; }
.sp-eyebrow { font: 700 12px var(--font-display); letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.sp-title { font-size: clamp(36px, 5.4vw, 64px); margin: 8px 0 10px; letter-spacing: -0.03em; animation: spIn .9s cubic-bezier(.2,.7,.2,1) both; }
.sp-lead { max-width: 640px; color: rgba(255,255,255,.86); line-height: 1.8; text-align: justify; word-break: keep-all; margin: 0 0 22px; }
.sp-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.sp-stats div { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); animation: spIn .7s both; animation-delay: calc(.2s + var(--d) * 70ms); }
.sp-stats b { display: block; font: 800 clamp(22px, 2.6vw, 34px)/1.1 var(--font-display); } .sp-stats i { font-style: normal; font-size: .45em; margin-left: 2px; opacity: .8; } .sp-stats small { opacity: .8; font-size: 12.5px; }
@keyframes spIn { from { opacity: 0; transform: translateY(18px); } }
.sp-feature { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; padding: 28px; border-radius: var(--radius-xl); background: linear-gradient(135deg, #fff, #fbf1f3); box-shadow: var(--shadow); margin-bottom: 30px; }
.sp-f-side { position: relative; display: grid; place-items: center; }
.sp-f-side .fl-ph.big { width: 190px; height: 190px; border-radius: 50%; font-size: 56px; display: grid; place-items: center; object-fit: cover; box-shadow: 0 0 0 8px #fff, 0 0 0 10px #e7c3cc; }
.sp-badge { position: absolute; bottom: -6px; padding: 6px 14px; border-radius: 999px; background: #b85c75; color: #fff; font-weight: 700; font-size: 12.5px; box-shadow: var(--shadow-sm); }
.sp-f-main small { color: var(--ink-3); font-weight: 600; } .sp-f-main h3 { font-size: clamp(26px, 3vw, 38px); margin: 6px 0 12px; } .sp-f-main h3 span { font-size: .45em; color: var(--ink-3); font-weight: 600; }
.sp-f-main blockquote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 4px solid #b85c75; font-size: 17px; line-height: 1.8; color: var(--ink-2); text-align: justify; word-break: keep-all; }
.sp-f-reps { display: grid; gap: 8px; margin-bottom: 16px; }
.sp-f-reps a { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; text-decoration: none; color: inherit; border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.sp-f-reps a:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
.sp-f-reps span { grid-row: span 2; font: 800 18px var(--font-display); color: #b85c75; } .sp-f-reps small { color: var(--ink-3); }
.sp-sec-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .sp-sec-h h3 { margin: 0; font-size: 22px; } .sp-sec-h p { margin: 0; color: var(--ink-3); font-size: 13px; }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sp-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s, box-shadow .25s; animation: spIn .7s both; animation-delay: calc(var(--d) * 80ms); }
.sp-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, #b85c75, #6c9ef8, var(--main)); }
.sp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.sp-top { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center; }
.sp-no { font: 800 26px var(--font-display); color: #e7c3cc; }
.sp-top .fl-ph.big { width: 58px; height: 58px; border-radius: 50%; font-size: 20px; display: grid; place-items: center; object-fit: cover; }
.sp-top b { display: block; font-size: 18px; } .sp-top small { display: block; color: var(--ink-3); font-size: 12px; } .sp-top em { font-style: normal; font-size: 12.5px; color: var(--main-deep); font-weight: 600; }
.sp-field { margin: 0; font-weight: 700; color: #8a3a52; }
.sp-topic { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; text-align: left; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-kw { display: flex; flex-wrap: wrap; gap: 5px; } .sp-kw span { font-size: 12px; padding: 3px 9px; border-radius: 8px; background: #fbf1f3; color: #8a3a52; }
.sp-kpi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 10px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); text-align: center; }
.sp-kpi b { display: block; font: 800 18px var(--font-display); } .sp-kpi small { font-size: 11px; color: var(--ink-3); }
.sp-rep { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg); text-decoration: none; color: inherit; } .sp-rep:hover { background: var(--main-soft); }
.sp-rep small { color: var(--ink-3); font-size: 11.5px; } .sp-rep b { font-size: 13.5px; line-height: 1.45; } .sp-rep span { font-size: 12px; color: var(--ink-3); }
.sp-peers { margin: 0; font-size: 12.5px; color: var(--ink-3); } .sp-peers a { color: var(--main-deep); }
.sp-card > .btn { align-self: flex-start; margin-top: auto; }
.sp-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-top: 22px; } .sp-two h3 { margin: 0 0 12px; font-size: 17px; }
.sp-cmp { display: grid; gap: 8px; } .sp-cmp a { display: grid; grid-template-columns: 70px 1fr 30px; gap: 10px; align-items: center; text-decoration: none; color: inherit; font-size: 13px; }
.sp-cmp .bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--bg); gap: 1px; }
.sp-cmp .bar i { display: block; height: 100%; animation: fdGrow 1s cubic-bezier(.2,.7,.2,1) both; transform-origin: left; }
.sp-cmp b { font-family: var(--font-display); text-align: right; }
.sp-cloud { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.sp-cloud a { font-size: calc(13px * var(--s)); font-weight: 700; color: #8a3a52; text-decoration: none; animation: spIn .6s both; animation-delay: calc(var(--d) * 40ms); } .sp-cloud a:nth-child(3n) { color: #3563C9; } .sp-cloud a:nth-child(3n+1) { color: var(--main-deep); }
.sp-cloud a:hover { text-decoration: underline; }
.sp-criteria ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: c; }
.sp-criteria li { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; counter-increment: c; } .sp-criteria li::before { content: counter(c, decimal-leading-zero); grid-row: span 2; font: 800 18px var(--font-display); color: #b85c75; }
.sp-criteria li span { color: var(--ink-3); font-size: 13.5px; }
.sp-cta p { line-height: 1.8; }
@media (max-width: 1000px) { .sp-stats { grid-template-columns: repeat(3, 1fr); } .sp-grid { grid-template-columns: 1fr 1fr; } .sp-two { grid-template-columns: 1fr; } .sp-feature { grid-template-columns: 1fr; justify-items: center; text-align: center; } .sp-f-main blockquote { text-align: left; } }
@media (max-width: 640px) { .sp-grid { grid-template-columns: 1fr; } .sp-stats { grid-template-columns: repeat(2, 1fr); } }

.sp-score { display: flex; align-items: baseline; gap: 6px; } .sp-score b { font: 800 28px var(--font-display); color: #b85c75; } .sp-score small { color: var(--ink-3); font-size: 12px; }

/* v1.32 상단 로그인 · 회원가입 */
.hauth { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.hauth:hover { background: var(--main-soft); color: var(--main-deep); }
.hauth.hsignup { background: var(--main-deep); color: #fff; box-shadow: none; }
.hauth.hsignup:hover { background: var(--main); color: #fff; }
body.signed .hauth { display: none; }
body:not(.signed) .huser { display: none; }
@media (max-width: 1100px) { .hauth span { display: none; } .hauth { width: 38px; padding: 0; justify-content: center; } }

/* v1.33 강화 슬라이드: 시차 기울기 · 빛 쓸기 · 글자 간격 · 색 변화 */
.edu-pm .pm-stage { transform: perspective(1400px) rotateY(calc(var(--mx, 0) * 5deg)) rotateX(calc(var(--my, 0) * -4deg)); transition: transform .35s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.edu-pm .pm-bg { transform: translate(calc(var(--mx, 0) * -24px), calc(var(--my, 0) * -18px)); transition: transform .5s; }
.edu-pm .pm-fx { transform: translate(calc(var(--mx, 0) * 30px), calc(var(--my, 0) * 22px)); transition: transform .5s; }
.edu-pm .pm-s.on::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); transform: translateX(-110%); animation: subSweep 1.6s .35s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes subSweep { to { transform: translateX(110%); } }
.edu-pm .pm-s.on .pm-eye { animation: subTrack 1.2s .1s both cubic-bezier(.2,.7,.2,1); }
@keyframes subTrack { from { letter-spacing: .6em; opacity: 0; filter: blur(4px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } }
.edu-pm .pm { animation: subHue 24s linear infinite; }
@keyframes subHue { 50% { filter: hue-rotate(28deg) saturate(1.1); } }
.edu-pm .pm-s.on .pm-sign, .edu-pm .pm-s.on .pm-quote { text-shadow: 0 0 24px rgba(255,255,255,.18); }
@media (prefers-reduced-motion: reduce) { .edu-pm .pm-stage, .edu-pm .pm-bg, .edu-pm .pm-fx { transform: none !important; } .edu-pm .pm-s.on::before, .edu-pm .pm, .edu-pm .pm-s.on .pm-eye { animation: none !important; } }

/* v1.34 학술 DB 분석 시각화 */
.sv { margin: 14px 0 4px; }
.sv-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 12px; }
.sv-kpis div { background: linear-gradient(160deg, #fff, #f3f6f1); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; animation: fdIn .6s both; animation-delay: calc(var(--d) * 60ms); }
.sv-kpis small { color: var(--ink-3); font-size: 12px; } .sv-kpis b { display: block; font: 800 24px/1.2 var(--font-display); } .sv-kpis i { font-style: normal; font-size: .5em; color: var(--main-deep); margin-left: 2px; }
.sv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .sv-grid h4 { margin: 0 0 10px; font-size: 15px; } .sv-wide { grid-column: 1 / -1; }
.sv-vbars { display: flex; align-items: flex-end; gap: 8px; height: 170px; }
.sv-vbars div { flex: 1; max-width: 54px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.sv-vbars i { width: 72%; height: var(--h); border-radius: 7px 7px 3px 3px; animation: fvBar 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d) * 60ms); transform-origin: bottom; }
.sv-vbars b { font: 800 12px var(--font-display); } .sv-vbars small { font-size: 11px; color: var(--ink-3); }
.sv-terms { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; }
.sv-terms button { font-size: calc(13px * var(--s)); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--main-soft); color: var(--main-deep); animation: fdIn .5s both; animation-delay: calc(var(--d) * 40ms); }
.sv-terms button:nth-child(3n) { background: #fbf1f3; color: #8a3a52; } .sv-terms button:nth-child(3n+1) { background: #eef3fc; color: #2d4f9c; }
.sv-terms button small { font-size: 10px; margin-left: 4px; opacity: .7; } .sv-terms button:hover { filter: brightness(.95); }
.sv-link { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .sv-link > div { display: grid; gap: 6px; align-content: start; }
.sv-chip { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--bg); text-decoration: none; color: inherit; overflow: hidden; }
.sv-chip:hover { background: var(--main-soft); } .sv-chip b { font-size: 13.5px; grid-column: 1 / -1; } .sv-chip small { grid-column: 1 / -1; color: var(--ink-3); font-size: 12px; }
.sv-chip.fel { grid-template-columns: 34px 1fr; } .sv-chip.fel .fl-ph { width: 34px; height: 34px; font-size: 13px; grid-row: span 2; } .sv-chip.fel b, .sv-chip.fel small { grid-column: 2; }
.sv-chip i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w); background: var(--main); }
.sv-ai { display: grid; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); } .sv-ai h4 { margin: 6px 0 0; font-size: 14px; }
.sv-axis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sv-axis div { text-align: center; background: var(--bg); border-radius: 14px; padding: 8px; } .sv-axis span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.sv-axis svg { width: 100%; max-width: 150px; } .sv-axis .g-bg, .sv-axis .g-fg { fill: none; stroke-width: 10; stroke-linecap: round; } .sv-axis .g-bg { stroke: var(--line); }
.sv-axis .g-fg { stroke-dasharray: 157; stroke-dashoffset: calc(157 - 157 * var(--v) / 100); animation: svGauge 1.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes svGauge { from { stroke-dashoffset: 157; } }
.sv-axis text { font: 800 20px var(--font-display); fill: var(--ink); }
.sv-themes { display: flex; flex-wrap: wrap; gap: 6px; } .sv-themes span { font-size: calc(13px * var(--s)); color: #fff; font-weight: 700; padding: 5px 12px; border-radius: 999px; animation: fdIn .5s both; animation-delay: calc(var(--d) * 60ms); } .sv-themes small { margin-left: 5px; opacity: .8; font-size: 10.5px; }
.sv-rec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .sv-rec a { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: #f3f6f1; text-decoration: none; color: inherit; } .sv-rec a.fel { background: #eef3fc; }
.sv-rec a:hover { filter: brightness(.96); } .sv-rec b { font-size: 13px; } .sv-rec span { color: #e0a050; font-size: 11px; letter-spacing: 1px; } .sv-rec small { color: var(--ink-3); font-size: 11.5px; }
.sv-ideas { display: grid; gap: 6px; } .sv-ideas div { padding: 10px 12px; border-left: 4px solid; border-radius: 10px; background: var(--bg); display: grid; gap: 2px; } .sv-ideas span { font: 700 11px var(--font-display); color: var(--ink-3); } .sv-ideas b { font-size: 13.5px; } .sv-ideas small { color: var(--ink-3); }
.sv-next { display: flex; flex-wrap: wrap; gap: 6px; } .sv-next button { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; } .sv-next button:hover { background: var(--main-soft); }
@media (max-width: 1000px) { .sv-kpis { grid-template-columns: repeat(3, 1fr); } .sv-grid, .sv-link { grid-template-columns: 1fr; } }

/* v1.35 학술활동·교류 하위 화면 보완 */
.ev-ins { padding-top: 10px; }
.ev-next .btn-line { background: transparent; } .ev-next .btn-line:hover { background: rgba(255,255,255,.15); }
.ev-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.ev-kpis div { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm); animation: fdIn .6s both; animation-delay: calc(var(--d) * 60ms); }
.ev-kpis small { color: var(--ink-3); font-size: 12.5px; } .ev-kpis b { display: block; font: 800 26px/1.2 var(--font-display); } .ev-kpis i { font-style: normal; font-size: .45em; margin-left: 2px; color: var(--main-deep); }
.ev-next { display: grid; grid-template-columns: 150px 1fr; gap: 22px; padding: 24px; border-radius: var(--radius-xl); background: linear-gradient(135deg, #1d2a1b, #2f4b2c 55%, #6F8A67); color: #fff; margin-bottom: 16px; box-shadow: var(--shadow); }
.ev-next-d { display: grid; place-content: center; text-align: center; border-radius: 20px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.ev-next-d span { font: 800 14px var(--font-display); color: #cfe8c8; letter-spacing: .08em; } .ev-next-d b { font: 800 44px/1.1 var(--font-display); } .ev-next-d small { opacity: .8; }
.ev-next-m small { opacity: .8; font-weight: 600; } .ev-next-m h3 { font-size: clamp(20px, 2.4vw, 28px); margin: 6px 0 8px; } .ev-next-m p { color: rgba(255,255,255,.85); line-height: 1.75; margin: 0 0 10px; text-align: justify; word-break: keep-all; }
.ev-next-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 10px; } .ev-next-meta span { display: inline-flex; gap: 5px; align-items: center; } .ev-next-meta svg { width: 15px; height: 15px; }
.ev-prog { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; }
.ev-prog li { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 13px; } .ev-prog b { display: block; color: #cfe8c8; font-family: var(--font-display); }
.ev-next .btn-dark { background: #fff; color: #1B1B1B; } .ev-next .btn-line { color: #fff; border-color: rgba(255,255,255,.6); }
.ev-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; } .ev-two h3, .ev-guide h3, .ev-reuse h3 { font-size: 17px; margin: 0 0 12px; }
.ev-tl { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--main-soft); display: grid; gap: 10px; max-height: 420px; overflow: auto; }
.ev-tl li { position: relative; display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; }
.ev-tl li::before { content: ""; position: absolute; left: -22px; width: 10px; height: 10px; border-radius: 50%; background: var(--main); box-shadow: 0 0 0 3px #fff; }
.ev-tl li.done::before { background: #bbb; } .ev-tl time { font-family: var(--font-display); color: var(--ink-3); font-size: 12.5px; }
.ev-tl button { text-align: left; font-weight: 600; color: inherit; } .ev-tl button:hover { color: var(--main-deep); text-decoration: underline; }
.ev-tl li b { font-size: 13.5px; } .ev-tl li .muted { grid-column: 2 / -1; font-size: 12.5px; }
.ev-kw { display: inline-flex; align-items: baseline; gap: 4px; font-size: calc(13px * var(--s)); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--main-soft); color: var(--main-deep); animation: fdIn .5s both; animation-delay: calc(var(--d) * 40ms); }
.ev-kw:nth-child(3n) { background: #fbf1f3; color: #8a3a52; } .ev-kw:nth-child(3n+1) { background: #eef3fc; color: #2d4f9c; } .ev-kw small { font-size: 10px; opacity: .7; }
.ev-papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ev-paper { display: grid; gap: 4px; align-content: start; text-align: left; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ev-paper:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .ev-paper small { color: var(--ink-3); font-size: 12px; } .ev-paper b { font-size: 14.5px; line-height: 1.45; }
.ev-paper p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ev-paper span { font-size: 12px; color: var(--main-deep); }
.ev-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.ev-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.ev-steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; counter-increment: s; } .ev-steps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font: 800 18px var(--font-display); color: var(--main); }
.ev-steps span { color: var(--ink-3); font-size: 13.5px; }
.ev-faq { border-bottom: 1px solid var(--line); padding: 10px 0; } .ev-faq summary { cursor: pointer; font-weight: 600; } .ev-faq p { margin: 8px 0 0; color: var(--ink-2); line-height: 1.7; font-size: 14px; }
.ev-ways { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ev-ways div { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: linear-gradient(160deg, var(--main-soft), #fff); border: 1px solid var(--line); animation: fdIn .6s both; animation-delay: calc(var(--d) * 70ms); }
.ev-ways span { font: 800 14px var(--font-display); color: var(--main); } .ev-ways b { font-size: 15.5px; } .ev-ways small { color: var(--ink-3); line-height: 1.5; }
.ev-arch { display: grid; gap: 8px; max-height: 440px; overflow: auto; }
.ev-arch > div { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.ev-arch > div > button { text-align: left; display: grid; color: inherit; } .ev-arch > div > button:hover b { text-decoration: underline; } .ev-arch b { font-size: 13.5px; } .ev-arch small { color: var(--ink-3); font-size: 12px; }
.ev-arch span { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
@media (max-width: 1000px) { .ev-kpis { grid-template-columns: repeat(3, 1fr); } .ev-two, .ev-guide { grid-template-columns: 1fr; } .ev-papers { grid-template-columns: 1fr 1fr; } .ev-ways { grid-template-columns: 1fr 1fr; } .ev-next { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ev-papers, .ev-ways { grid-template-columns: 1fr; } .ev-kpis { grid-template-columns: repeat(2, 1fr); } }

/* v1.36 AI 이미지 스타일 드롭다운 */
.img-style { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.img-style .sel { height: 36px; padding: 0 30px 0 12px; border-radius: 999px; font-size: 13px; max-width: 190px; }
.nl-img-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .nl-img-row input { flex: 1 1 260px; }
.up-inline { flex-wrap: wrap; }

/* v1.36.1 AI 작업 중 시계 */
.ai-clock { position: fixed; left: 50%; bottom: 26px; z-index: 120; display: flex; gap: 12px; align-items: center; padding: 10px 18px 10px 10px; border-radius: 999px; background: rgba(27,27,27,.92); color: #fff; box-shadow: 0 14px 40px -12px rgba(0,0,0,.5); backdrop-filter: blur(8px); transform: translate(-50%, 30px); opacity: 0; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s; pointer-events: none; }
.ai-clock.on { transform: translate(-50%, 0); opacity: 1; }
.ai-clock svg { width: 46px; height: 46px; flex: none; }
.ai-clock .c-face { fill: #2b2b2b; stroke: rgba(255,255,255,.18); stroke-width: 1.5; }
.ai-clock .c-ring { fill: none; stroke: var(--main, #97AF8F); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 34 98; transform-origin: 24px 24px; animation: acRing 1.6s linear infinite; }
.ai-clock .c-tick { stroke: rgba(255,255,255,.55); stroke-width: 1.4; stroke-linecap: round; }
.ai-clock .c-hour { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; transform-origin: 24px 24px; animation: acSpin 12s linear infinite; }
.ai-clock .c-min { stroke: #cfe8c8; stroke-width: 1.8; stroke-linecap: round; transform-origin: 24px 24px; animation: acSpin 1s steps(60) infinite; }
.ai-clock .c-pin { fill: #fff; }
@keyframes acSpin { to { transform: rotate(360deg); } }
@keyframes acRing { to { transform: rotate(360deg); } }
.ai-clock b { display: block; font-size: 14px; } .ai-clock small { color: rgba(255,255,255,.7); font-size: 12px; } .ai-clock-t { font-family: var(--font-display); font-weight: 700; color: #cfe8c8; }
.ai-clock.long .c-ring { stroke: #f0a35e; } .ai-clock.long small::after { content: " · 조금만 더 기다려 주세요"; }
.ai-clock svg { animation: acPulse 2s ease-in-out infinite; } @keyframes acPulse { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .ai-clock .c-ring, .ai-clock .c-hour, .ai-clock .c-min, .ai-clock svg { animation: none; } }
@media print { .ai-clock { display: none !important; } }

/* v1.37 KIHSS 소식 화면 개편 */
.nw-tag { display: inline-block; font: 800 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--main-deep); }
.nw-hero { display: grid; grid-template-columns: 1fr 180px; gap: 20px; align-items: stretch; padding: 28px; border-radius: var(--radius-xl); background: linear-gradient(135deg, #14202e, #23405f 55%, #3d7a6a); color: #fff; cursor: pointer; box-shadow: var(--shadow); margin-bottom: 22px; transition: transform .25s; }
.nw-hero:hover { transform: translateY(-3px); } .nw-hero .nw-tag { color: #cfe8c8; margin-right: 8px; }
.nw-hero h2 { font-size: clamp(22px, 2.8vw, 34px); margin: 12px 0 10px; line-height: 1.3; word-break: keep-all; } .nw-hero p { color: rgba(255,255,255,.82); line-height: 1.75; margin: 0 0 12px; } .nw-hero small { opacity: .8; }
.nw-hero-r { display: grid; place-content: center; text-align: center; border-radius: 22px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.nw-hero-r b { font: 800 64px/1 var(--font-display); } .nw-hero-r span { opacity: .8; font-family: var(--font-display); }
.nw-layout { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; }
.nw-bar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nw-chips { display: flex; gap: 6px; flex-wrap: wrap; } .nw-chips button { padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 13.5px; } .nw-chips button.on { background: var(--ink); color: #fff; box-shadow: none; }
.nw-bar input { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); min-width: 220px; font: inherit; }
.nw-list .ntc-row { border-radius: 14px; transition: background .15s, transform .15s; } .nw-list .ntc-row:hover { background: var(--main-soft); transform: translateX(3px); }
.nw-list .ntc-row.is-new::after { content: "NEW"; margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: #e2697f; color: #fff; font: 800 10px var(--font-display); align-self: center; }
.nw-side { display: grid; gap: 12px; position: sticky; top: 96px; } .nw-side h4 { margin: 0 0 10px; font-size: 15px; display: flex; gap: 6px; align-items: center; } .nw-side h4 svg { width: 16px; height: 16px; }
.nw-sub { background: linear-gradient(160deg, var(--main-soft), #fff); } .nw-sub p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.nw-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 16px; }
.nw-lead { position: relative; display: grid; border-radius: var(--radius-xl); overflow: hidden; min-height: 340px; color: #fff; cursor: pointer; text-decoration: none; box-shadow: var(--shadow); }
.nw-lead-img { position: absolute; inset: 0; background: linear-gradient(135deg, #2c4a2a, #6F8A67); display: grid; place-items: center; } .nw-lead-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; } .nw-lead:hover .nw-lead-img img { transform: scale(1.05); }
.nw-lead-img span svg { width: 60px; height: 60px; opacity: .4; }
.nw-lead-t { position: relative; align-self: end; padding: 26px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78) 45%); } .nw-lead-t .nw-tag { color: #cfe8c8; }
.nw-lead-t h2 { font-size: clamp(22px, 2.6vw, 32px); margin: 8px 0; line-height: 1.3; word-break: keep-all; } .nw-lead-t p { margin: 0 0 8px; color: rgba(255,255,255,.85); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nw-lead-t small { opacity: .8; }
.nw-top-side { display: grid; gap: 14px; }
.nw-side-card { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .2s; }
.nw-side-card:hover { transform: translateY(-3px); } .nw-side-card img { width: 120px; height: 100px; object-fit: cover; border-radius: 14px; } .nw-side-card small { color: var(--ink-3); } .nw-side-card b { display: block; line-height: 1.45; margin-top: 4px; }
.nw-tags { display: flex; flex-wrap: wrap; gap: 6px; } .nw-tags span { padding: 5px 12px; border-radius: 999px; background: var(--main-soft); color: var(--main-deep); font-weight: 700; font-size: 13px; } .nw-tags small { margin-left: 4px; opacity: .65; font-size: 11px; }
.nw-press-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; } .nw-press-lead { min-height: 380px; }
.nw-press-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; } .nw-press-stats .card { grid-column: 1 / -1; } .nw-press-stats h4 { margin: 0 0 10px; font-size: 15px; }
.nw-big { padding: 16px; border-radius: 18px; background: linear-gradient(160deg, #fbf1f3, #fff); border: 1px solid var(--line); } .nw-big b { display: block; font: 800 34px/1.1 var(--font-display); color: #8a3a52; } .nw-big small { color: var(--ink-3); }
.nw-nl { display: grid; grid-template-columns: 340px 1fr; gap: 26px; align-items: center; margin-top: 26px; padding: 24px; border-radius: var(--radius-xl); background: linear-gradient(135deg, #fff, #f3f6f1); box-shadow: var(--shadow-sm); }
.nw-nl-cover { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--main-deep), var(--main)); display: grid; place-items: center; box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); transform: rotate(-2deg); transition: transform .3s; }
.nw-nl-cover:hover { transform: rotate(0) scale(1.02); } .nw-nl-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .nw-nl-ic svg { width: 54px; height: 54px; color: #fff; opacity: .7; }
.nw-nl-t h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 8px 0 10px; line-height: 1.3; word-break: keep-all; } .nw-nl-t p { color: var(--ink-2); line-height: 1.75; margin: 0 0 14px; }
.nw-nl-strip { display: flex; gap: 8px; overflow-x: auto; margin-top: 16px; padding-bottom: 4px; }
.nw-nl-strip a { flex: 0 0 150px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; display: grid; gap: 2px; } .nw-nl-strip a:hover { border-color: var(--main); }
.nw-nl-strip b { font-size: 13px; color: var(--main-deep); } .nw-nl-strip small { color: var(--ink-3); font-size: 12px; line-height: 1.4; }
@media (max-width: 1000px) { .nw-layout, .nw-top, .nw-press-top, .nw-nl { grid-template-columns: 1fr; } .nw-side { position: static; } .nw-hero { grid-template-columns: 1fr; } .nw-hero-r { display: none; } }

/* v1.37.1 작업 중 버튼 · 안내 문구 애니메이션 (시계 아이콘 + 빛 흐름) */
.btn-busy { position: relative; overflow: hidden; cursor: progress !important; opacity: 1 !important; color: var(--main-deep) !important; box-shadow: inset 0 0 0 1.5px var(--main) !important; background: #fff !important; }
.btn-busy::before { content: ""; display: inline-block; flex: none; width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box;
  background: conic-gradient(currentColor 0 18%, transparent 18% 100%); animation: busyTick 1s steps(12) infinite; }
.btn-busy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(151,175,143,.35) 50%, transparent 80%); transform: translateX(-100%); animation: busySweep 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes busyTick { to { transform: rotate(360deg); } }
@keyframes busySweep { to { transform: translateX(100%); } }
.ai-wait { display: inline-flex !important; align-items: center; gap: 10px; font-weight: 600; color: var(--main-deep); }
.ai-wait::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--main); box-sizing: border-box; background: conic-gradient(var(--main-deep) 0 15%, transparent 15% 100%); animation: busyTick 1s steps(12) infinite; }
.ai-wait { background-image: linear-gradient(90deg, var(--main-deep) 0%, #9bd38c 50%, var(--main-deep) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: busyText 2s linear infinite; }
@keyframes busyText { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .btn-busy::before, .btn-busy::after, .ai-wait, .ai-wait::before { animation: none; } }

/* v1.38.0 뉴스레터 등록 · 구독자 명부 재디자인 */
.nlx, .sbx { padding: 0; overflow: hidden; gap: 0; border: 1px solid var(--line); }
.nlx-head, .sbx-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 26px; background: linear-gradient(120deg, var(--main-soft, #EEF4EC) 0%, #fff 70%); border-bottom: 1px solid var(--line); }
.nlx-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--main-deep, #2F5D3A); color: #fff; box-shadow: 0 8px 18px -8px rgba(47,93,58,.6); }
.nlx-ic svg { width: 24px; height: 24px; }
.nlx-ht { flex: 1 1 260px; display: grid; gap: 3px; }
.nlx-ht h3 { margin: 0; font-size: 19px; display: flex; gap: 8px; align-items: center; }
.nlx-ht small { color: var(--ink-3); font-size: 13px; }
.nlx-ht code { font-size: 12px; background: #fff; border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
.nlx-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.nlx-steps li { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-3); padding: 6px 12px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.nlx-steps i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--bg); color: var(--ink-3); }
.nlx-steps .s1, .nlx:has(.nl-fill:not([hidden])) .nlx-steps .s2 { color: var(--main-deep); border-color: var(--main); }
.nlx-steps .s1 i, .nlx:has(.nl-fill:not([hidden])) .nlx-steps .s2 i { background: var(--main-deep); color: #fff; }
.nlx:has(.nl-fill:not([hidden])) .nlx-steps .s1 i { background: var(--main); }
.nlx-ways { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; padding: 22px 26px; }
.nlx-way { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: #fff; min-height: 200px; transition: border-color .2s, box-shadow .2s, transform .2s; text-align: left; }
.nlx-way:hover, .nlx-way:focus-within { border-color: var(--main); box-shadow: 0 14px 30px -18px rgba(47,93,58,.45); transform: translateY(-2px); }
.nlx-tag { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--main-deep); background: var(--main-soft, #EEF4EC); padding: 3px 9px; border-radius: 999px; }
.nlx-wic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--main-soft, #EEF4EC); color: var(--main-deep); }
.nlx-wic svg { width: 20px; height: 20px; }
.nlx-wt, .nlx-way .repo-drop-t b { font-size: 16px; font-weight: 800; color: var(--ink); }
.nlx-way p, .nlx-way .repo-drop-t small { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.nlx-way .nl-url { margin-top: auto; width: 100%; }
.nlx-way .nl-url input { height: 40px; border-radius: 999px; padding: 0 16px; background: var(--bg); border-color: transparent; }
.nlx-way .nl-url input:focus { background: #fff; border-color: var(--main); outline: none; }
.nlx-way > .btn { margin-top: auto; }
.nlx .repo-drop.nlx-way { display: flex; place-items: initial; border: 2px dashed #C9D6C4; background: repeating-linear-gradient(135deg, #FAFCF9 0 12px, #F4F8F2 12px 24px); cursor: pointer; }
.nlx .repo-drop.nlx-way:hover, .nlx .repo-drop.nlx-way.over { border-color: var(--main-deep); }
.nlx-way .repo-drop-t { display: grid; gap: 6px; }
.nlx-pick { align-self: flex-start; margin-top: auto; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; background: var(--main-deep); color: #fff; }
.nlx-way .nlx-wic, .nlx-pick, .nlx-way .repo-drop-t { position: relative; z-index: 0; pointer-events: none; }
.nlx-tag { z-index: 1; pointer-events: none; }
.sbx-n { white-space: nowrap; }
.nlx > .nl-lib-box { margin: 0 26px 22px; }
.nl-fill { padding: 22px 26px 24px; border-top: 1px solid var(--line); background: linear-gradient(#FBFCFA, #fff); animation: nlxIn .35s ease; }
@keyframes nlxIn { from { opacity: 0; transform: translateY(8px); } }
.nlx-fh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.nlx-fh i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--main-deep); color: #fff; font-size: 13px; font-weight: 800; }
.nlx-fh b { font-size: 16px; } .nlx-fh small { color: var(--ink-3); }
.nlx-body { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 22px; align-items: start; }
.nlx-pv { position: sticky; top: 90px; border-radius: 16px; border: 1px solid var(--line); background: #fff; padding: 12px; display: grid; gap: 8px; }
.nlx-pvl { font-size: 12px; font-weight: 800; color: var(--ink-3); letter-spacing: .04em; }
.nlx-pv .nl-prev img { width: 100%; max-height: none; aspect-ratio: 16/10; object-fit: cover; }
.nlx-pv .nl-file-prev { height: 380px; }
.nlx-pv0 { display: none; place-items: center; gap: 8px; text-align: center; aspect-ratio: 16/11; border-radius: 12px; background: var(--bg); color: var(--ink-3); font-size: 12.5px; }
.nlx-pv0 svg { width: 34px; height: 34px; color: #B8C8B2; }
.nlx-pv .nl-prev:empty + .nlx-pv0 { display: grid; }
.nlx-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
.nlx-grid .nlx-t { grid-column: 1 / -1; }
.nlx-grid .nlx-t input { font-size: 17px; font-weight: 700; padding: 12px 14px; }
.nlx .repo-grid input, .nlx .repo-grid textarea { border-radius: 12px; padding: 11px 13px; transition: border-color .15s, box-shadow .15s; }
.nlx .repo-grid input:focus, .nlx .repo-grid textarea:focus { outline: none; border-color: var(--main); box-shadow: 0 0 0 4px rgba(151,175,143,.2); }
.nlx .nl-img-row { display: block; } .nlx .nl-img-row input { width: 100%; }
.nlx-ai { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; padding: 10px; border-radius: 12px; background: var(--main-soft, #EEF4EC); font-weight: 400; }
.nlx-ai .img-style { flex: 1 1 auto; flex-wrap: nowrap; }
.nlx-ai .img-style .sel { flex: 1 1 0; max-width: none; background-color: #fff; }
.nlx-lh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nlx-aib { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--main-deep); background: var(--main-soft, #EEF4EC); border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.nlx-aib svg { width: 14px; height: 14px; } .nlx-aib:hover { background: var(--main); color: #fff; }
.nlx-foot { justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.nlx-foot .btn { display: inline-flex; gap: 6px; align-items: center; padding: 0 22px; }
.nlx-foot .btn svg { width: 16px; height: 16px; }
/* 구독자 명부 */
.sbx-head .btn { display: inline-flex; gap: 6px; align-items: center; }
.sbx-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 22px 26px 0; }
.sbx-kpi > div { position: relative; overflow: hidden; display: grid; gap: 2px; padding: 18px 18px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); --c: #4C7A55; }
.sbx-kpi > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c); opacity: .85; }
.sbx-kpi .k2 { --c: #A3A3A3; } .sbx-kpi .k3 { --c: #5B86B0; } .sbx-kpi .k4 { --c: #B08A4C; }
.sbx-kpi span { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.sbx-kpi span svg { width: 18px; height: 18px; }
.sbx-kpi b { font: 800 32px/1.1 var(--font-display, inherit); color: var(--ink); }
.sbx-kpi small { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.sbx-kpi em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.sbx-viz { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 26px 0; }
.sbx-panel { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: #fff; }
.sbx-panel h4 { margin: 0 0 12px; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.sbx-panel h4 svg { width: 16px; height: 16px; color: var(--main-deep); }
.sbx-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 130px; align-items: end; }
.sbx-bar { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; gap: 4px; }
.sbx-bar b { font-size: 12px; color: var(--ink-2); min-height: 15px; }
.sbx-bar i { align-self: end; display: block; border-radius: 4px 4px 0 0; background: linear-gradient(var(--main), var(--main-deep)); transform-origin: bottom; animation: sbxGrow .6s cubic-bezier(.2,.8,.2,1) both; }
.sbx-bar small { font-size: 11.5px; color: var(--ink-3); }
@keyframes sbxGrow { from { transform: scaleY(0); } }
.sbx-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sbx-top li { display: grid; grid-template-columns: minmax(0, 9em) 1fr 2.5em; gap: 10px; align-items: center; font-size: 13px; }
.sbx-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbx-top i { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.sbx-top u { display: block; height: 100%; border-radius: inherit; background: var(--main); animation: sbxW .7s ease both; }
@keyframes sbxW { from { width: 0; } }
.sbx-top b { text-align: right; }
.sbx-none { color: var(--ink-3); font-size: 13px; margin: 0; }
.sbx-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 18px 26px 12px; }
.sbx-q { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--bg); border: 1px solid transparent; transition: border-color .15s, background .15s; }
.sbx-q:focus-within { background: #fff; border-color: var(--main); }
.sbx-q svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.sbx-q input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; outline: none; }
.sbx-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg); gap: 2px; }
.sbx-seg button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-3); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.sbx-seg button.on { background: #fff; color: var(--main-deep); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.sbx-n { color: var(--ink-3); } .sbx-n b { color: var(--ink); font-size: 15px; }
.sbx-tw { margin: 0 26px 24px; border: 1px solid var(--line); border-radius: 14px; overflow: auto; }
.sbx-tbl { width: 100%; border-collapse: collapse; }
.sbx-tbl th { text-align: left; font-size: 12px; font-weight: 800; color: var(--ink-3); background: var(--bg); padding: 11px 14px; white-space: nowrap; }
.sbx-tbl td { padding: 12px 14px; border-top: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.sbx-tbl tr:hover td { background: #FAFCF9; }
.sbx-tbl tr.off td { color: var(--ink-3); }
.sbx-who { display: flex; align-items: center; gap: 10px; }
.sbx-who i { font-style: normal; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--main), var(--main-deep)); }
.sbx-tbl tr.off .sbx-who i { background: #C9C9C9; }
.sbx-org { display: grid; } .sbx-org small { color: var(--ink-3); font-size: 12px; }
.sbx-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #2F6B3D; background: #E8F3EA; padding: 4px 10px; border-radius: 999px; }
.sbx-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sbx-st.x { color: #777; background: #F0F0F0; }
.sbx-d { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sbx-acts { text-align: right; white-space: nowrap; }
.sbx-acts button { border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer; margin-left: 4px; color: var(--ink-2); }
.sbx-acts button:hover { border-color: var(--main); color: var(--main-deep); }
.sbx-acts button.del:hover { border-color: #D14B4B; color: #C03A3A; }
.sbx-empty { margin: 0 26px 26px; padding: 40px 20px; border: 1px dashed var(--line); border-radius: 16px; display: grid; justify-items: center; gap: 6px; text-align: center; background: repeating-linear-gradient(135deg, #FCFCFB 0 12px, #F8F9F7 12px 24px); }
.sbx-empty span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--main-soft, #EEF4EC); color: var(--main-deep); margin-bottom: 6px; animation: sbxFloat 3s ease-in-out infinite; }
.sbx-empty span svg { width: 26px; height: 26px; }
.sbx-empty b { font-size: 15px; } .sbx-empty small { color: var(--ink-3); }
@keyframes sbxFloat { 50% { transform: translateY(-5px); } }
@media (max-width: 900px) { .nlx-ways { grid-template-columns: 1fr; } .nlx-way { min-height: 0; } .nlx-body { grid-template-columns: 1fr; } .nlx-pv { position: static; } .sbx-kpi { grid-template-columns: 1fr 1fr; } .sbx-viz { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .nlx-head, .sbx-head, .nlx-ways, .nl-fill { padding-left: 16px; padding-right: 16px; } .sbx-kpi, .sbx-viz, .sbx-tools { padding-left: 16px; padding-right: 16px; } .sbx-tw, .sbx-empty, .nlx > .nl-lib-box { margin-left: 16px; margin-right: 16px; } .nlx-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sbx-bar i, .sbx-top u, .sbx-empty span, .nl-fill { animation: none; } }

/* v1.39.0 기사·영상 검색: 골라서 일괄 등록 */
.pr-left { display: grid; gap: 8px; min-width: 0; }
.pr-bulk { position: sticky; top: 76px; z-index: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 8px 8px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 16px -12px rgba(0,0,0,.25); }
.pr-bulk[hidden] { display: none; }
.pr-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; cursor: pointer; }
.pr-bulk small { flex: 1 1 auto; white-space: nowrap; color: var(--ink-3); font-size: 12.5px; }
.pr-bulk .btn { margin-left: auto; }
.pr-ck input:disabled { cursor: not-allowed; } .pr-bulk small b { color: var(--main-deep); font-size: 14px; }
.pr-bulk .btn { display: inline-flex; gap: 6px; align-items: center; }
.pr-bulk .btn svg { width: 15px; height: 15px; }
.pr-list li { display: flex; align-items: stretch; gap: 0; position: relative; }
.pr-ck { flex: none; display: grid; place-items: center; width: 34px; cursor: pointer; }
.pr-list li.had .pr-ck { opacity: .45; }
.pr-ck input, .pr-all input { width: 18px; height: 18px; accent-color: var(--main-deep, #2F5D3A); cursor: pointer; }
.pr-list li > button { flex: 1; min-width: 0; }
.pr-list li.chk > button { border-color: var(--main, #97AF8F); background: rgba(151,175,143,.14); }

/* v1.40.0 공지사항 페이지 · 공지 본문 재디자인 */
.ntx-hero { position: relative; display: grid; grid-template-columns: 1fr minmax(240px, 38%); gap: 26px; align-items: stretch; padding: 30px; border-radius: var(--radius-xl); color: #fff; cursor: pointer; margin-bottom: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 0% 0%, #2d5a45 0%, #183329 45%, #0f1f1a 100%); box-shadow: 0 30px 60px -30px rgba(15,31,26,.7); transition: transform .3s; }
.ntx-hero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(151,175,143,.45), transparent 65%); z-index: -1; animation: ntxGlow 9s ease-in-out infinite alternate; }
@keyframes ntxGlow { to { transform: translate(-18%, 22%) scale(1.15); } }
.ntx-hero:hover { transform: translateY(-3px); }
.ntx-hero-l { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ntx-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ntx-eye { font: 800 11.5px var(--font-display); letter-spacing: .12em; color: #cfe8c8; }
.ntx-cat { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.ntx-hero h2 { margin: 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.28; word-break: keep-all; letter-spacing: -.01em; }
.ntx-hero p { margin: 0; color: rgba(255,255,255,.8); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ntx-hero-f { margin-top: auto; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; color: rgba(255,255,255,.75); }
.ntx-hero-f span { display: inline-flex; gap: 5px; align-items: center; } .ntx-hero-f svg { width: 15px; height: 15px; }
.ntx-hero-f b { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; color: #fff; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.14); transition: background .2s; }
.ntx-hero:hover .ntx-hero-f b { background: #fff; color: #183329; }
.ntx-hero-img { position: relative; border-radius: 20px; overflow: hidden; min-height: 200px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.ntx-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s; } .ntx-hero:hover .ntx-hero-img img { transform: scale(1.05); }
.ntx-hero-img i, .nwc-th i { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px); }
.ntx-hero-img i svg { width: 24px; height: 24px; }
.ntx-hero-cal { position: relative; display: grid; place-content: center; text-align: center; gap: 4px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); }
.ntx-hero-cal small { font: 700 14px var(--font-display); opacity: .7; letter-spacing: .1em; }
.ntx-hero-cal b { font: 800 clamp(28px, 3.4vw, 44px)/1.1 var(--font-display); }
.ntx-hero-cal span svg { position: absolute; right: 18px; bottom: 16px; width: 60px; height: 60px; opacity: .12; }
.ntc-dday { display: inline-flex; align-items: center; font: 800 11.5px var(--font-display); padding: 3px 9px; border-radius: 999px; background: #E8F0FB; color: #2B5EA7; letter-spacing: .02em; }
.ntc-dday.hot { background: #FCE4E8; color: #C23A55; animation: ntxPulse 1.6s ease-in-out infinite; }
.ntc-dday.end { background: #EEE; color: #888; }
@keyframes ntxPulse { 50% { box-shadow: 0 0 0 5px rgba(226,105,127,.18); } }
.ntx-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.ntx-kpi > div { position: relative; display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.ntx-kpi span { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--main-soft); color: var(--main-deep); }
.ntx-kpi span svg { width: 17px; height: 17px; }
.ntx-kpi b { font: 800 30px/1.1 var(--font-display); } .ntx-kpi small { color: var(--ink-3); font-weight: 700; font-size: 13px; }
.ntx-bar { align-items: center; margin-bottom: 14px; }
.ntx-q { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); min-width: 240px; transition: border-color .15s; }
.ntx-q:focus-within { border-color: var(--main); } .ntx-q svg { width: 16px; height: 16px; color: var(--ink-3); }
.ntx-q input { border: 0; outline: 0; background: none; height: auto; min-width: 0; flex: 1; padding: 0; font: inherit; }
.ntx-list { display: grid; gap: 10px; }
.nwc { position: relative; display: grid; grid-template-columns: 72px 1fr auto 26px; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, box-shadow .25s, transform .25s; }
.nwc::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--main); opacity: 0; transition: opacity .2s; }
.nwc.is-ann::before { background: #E2697F; }
.nwc:hover, .nwc:focus-visible { border-color: transparent; box-shadow: 0 18px 36px -22px rgba(24,51,41,.45); transform: translateY(-2px); outline: none; }
.nwc:hover::before, .nwc.pinned::before { opacity: 1; }
.nwc.pinned { background: linear-gradient(90deg, #F6FAF4, #fff 40%); }
.nwc-date { display: grid; place-items: center; align-content: center; height: 72px; border-radius: 16px; background: var(--main-soft); color: var(--main-deep); }
.nwc.is-ann .nwc-date { background: #FDF0F2; color: #A33A52; }
.nwc-date b { font: 800 28px/1 var(--font-display); } .nwc-date small { font: 700 11px var(--font-display); opacity: .75; margin-top: 3px; }
.nwc-main { min-width: 0; display: grid; gap: 5px; }
.nwc-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nwc-cat { font-size: 11.5px; font-weight: 800; color: var(--main-deep); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--main); }
.nwc.is-ann .nwc-cat { color: #A33A52; border-color: #E9A3B1; }
.nwc-new { font: 800 10px var(--font-display); padding: 2px 7px; border-radius: 6px; background: #E2697F; color: #fff; }
.nwc h3 { margin: 0; font-size: 16.5px; line-height: 1.45; word-break: keep-all; }
.nwc p { margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nwc-meta { display: flex; gap: 10px; } .nwc-meta:empty { display: none; }
.nwc-meta span { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 700; color: var(--ink-3); } .nwc-meta svg { width: 13px; height: 13px; }
.nwc-th { position: relative; width: 132px; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: var(--bg); }
.nwc-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .nwc:hover .nwc-th img { transform: scale(1.06); }
.nwc-th i { width: 36px; height: 36px; } .nwc-th i svg { width: 16px; height: 16px; }
.nwc-go { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); transition: transform .25s, color .2s, background .2s; }
.nwc-go svg { width: 16px; height: 16px; } .nwc:hover .nwc-go { transform: translateX(3px); background: var(--main-deep); color: #fff; }
.nwc[hidden] { display: none; }
.ntx-open { background: linear-gradient(160deg, #FFF6F7, #fff); }
.ntx-open-i { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; text-align: left; padding: 9px 0; border: 0; border-top: 1px dashed var(--line); background: none; cursor: pointer; font: inherit; }
.ntx-open-i:first-of-type { border-top: 0; } .ntx-open-i b { font-size: 13.5px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ntx-open-i:hover b { color: var(--main-deep); text-decoration: underline; }
/* 공지 대화상자 · 본문 */
.ntc-dlg .ntc-panel { width: min(780px, 100%); max-height: min(860px, calc(100vh - 32px)); }
.ntc-panel .ntc-hd { position: relative; padding: 28px 64px 22px 30px; border-bottom: 0; color: #fff; background: radial-gradient(120% 160% at 0% 0%, #2d5a45, #183329 55%, #0f1f1a); overflow: hidden; }
.ntc-panel .ntc-hd.is-ann { background: radial-gradient(120% 160% at 0% 0%, #7a3347, #3b1a26 60%, #22111a); }
.ntc-panel .ntc-hd::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 65%); }
.ntc-panel .modal-x { color: #fff; background: rgba(255,255,255,.14); z-index: 2; }
.ntc-hd-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ntc-kind { font: 800 11px var(--font-display); letter-spacing: .14em; color: rgba(255,255,255,.65); margin-right: 4px; }
.ntc-cat, .ntc-chip { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); display: inline-flex; gap: 4px; align-items: center; }
.ntc-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.ntc-panel .ntc-hd h2 { margin: 12px 0 10px; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.35; word-break: keep-all; color: #fff; }
.ntc-hd-sub { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.75); }
.ntc-hd-sub span { display: inline-flex; gap: 5px; align-items: center; } .ntc-hd-sub svg { width: 14px; height: 14px; }
.ntc-scroll { flex: 1; overflow-y: auto; padding: 22px 30px 26px; display: grid; gap: 18px; align-content: start; }
.ntc-fig { margin: 0; border-radius: 16px; overflow: hidden; background: var(--bg); }
.ntc-scroll .ntc-img { max-height: 52vh; }
.ntc-yt .yt-frame { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(0,0,0,.5); }
.ntc-body.ntb { padding: 0; overflow: visible; font-size: 15.5px; line-height: 1.85; color: var(--ink-2); display: grid; gap: 14px; }
.ntb p { margin: 0; }
.ntb-empty { color: var(--ink-3); }
.ntb-h { margin: 8px 0 -4px; font-size: 16.5px; display: flex; gap: 10px; align-items: center; color: var(--ink); }
.ntb-h::before { content: ""; width: 5px; height: 18px; border-radius: 3px; background: linear-gradient(var(--main), var(--main-deep)); }
.ntb-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ntb-facts > div { padding: 14px 16px; border-radius: 14px; background: linear-gradient(160deg, var(--main-soft), #fff); border: 1px solid #E1EADD; }
.ntb-facts dt { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 800; color: var(--main-deep); margin-bottom: 4px; }
.ntb-facts dt svg { width: 15px; height: 15px; }
.ntb-facts dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.ntb-ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ntb-ul li { position: relative; padding-left: 22px; }
.ntb-ul li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--main); box-shadow: 0 0 0 3px var(--main-soft); }
.ntb-ol { margin: 0; padding: 0; list-style: none; counter-reset: ntb; display: grid; gap: 10px; }
.ntb-ol li { counter-increment: ntb; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.ntb-ol li::before { content: counter(ntb); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font-display); color: #fff; background: var(--main-deep); }
.ntb-ol li span { padding-top: 2px; }
.ntb-note { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #FFF8E8; border: 1px solid #F1E0B5; color: #6B5320; font-size: 14px; line-height: 1.7; }
.ntb-note svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: #C4921B; }
.ntb a { color: var(--main-deep); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ntc-link { display: grid; grid-template-columns: 46px 1fr 40px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .25s, transform .25s; }
.ntc-link:hover { border-color: var(--main); box-shadow: 0 16px 30px -20px rgba(24,51,41,.45); transform: translateY(-2px); }
.ntc-link-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--main-deep); color: #fff; } .ntc-link-ic svg { width: 22px; height: 22px; }
.ntc-link-t { display: grid; min-width: 0; } .ntc-link-t b { font-size: 15px; } .ntc-link-t small { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntc-link-go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--main-soft); color: var(--main-deep); transition: background .2s, color .2s; } .ntc-link:hover .ntc-link-go { background: var(--main-deep); color: #fff; }
.ntc-link-go svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .ntx-hero { grid-template-columns: 1fr; } .ntx-hero-img, .ntx-hero-cal { min-height: 180px; } .ntx-kpi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .nwc { grid-template-columns: 56px 1fr; gap: 12px; padding: 14px; } .nwc-date { height: 56px; } .nwc-date b { font-size: 22px; } .nwc-th { grid-column: 1 / -1; width: 100%; order: -1; } .nwc-go { display: none; } .ntx-q { min-width: 0; flex: 1; } .ntc-panel .ntc-hd { padding: 22px 56px 18px 20px; } .ntc-scroll { padding: 18px 18px 22px; } }
@media (prefers-reduced-motion: reduce) { .ntx-hero::before, .ntc-dday.hot { animation: none; } }

/* v1.40.0 머리말 넘침 정리: 1600px 이하에서는 머리말을 화면 폭까지 쓰고 로그인·회원가입은 아이콘만 */
@media (max-width: 1600px) {
  .header .wrap { max-width: none; gap: 20px; }
  .hauth span { display: none; } .hauth { width: 38px; padding: 0; justify-content: center; }
}
@media (min-width: 1241px) and (max-width: 1360px) { .brand-text > span { display: none; } }
.ntc-panel .ntc-hd, .ntc-panel .ntc-foot { flex: none; }

/* v1.41.0 목소리 미리듣기 */
.api-voice { display: flex; gap: 8px; align-items: center; }
.api-voice .api-vtext { flex: 1; min-width: 0; }
.api-voice .btn { flex: none; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.api-voice .btn svg { width: 15px; height: 15px; }
.api-voice .btn.on { background: var(--main-deep); }

/* v1.41.1 이미지 스타일 · 색감 드롭다운을 한 줄로 */
.img-style { flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; }
.img-style .sel { flex: 1 1 0; min-width: 120px; max-width: 180px; text-overflow: ellipsis; }
.up-inline { align-items: center; }
@media (max-width: 560px) { .img-style { flex-wrap: wrap; } }

/* =====================================================================
   v1.42.0 Organic Shape 테마 — 밝은 회청색 바탕 · 부드러운 입체(뉴모피즘) 그림자
   · 유기적 곡선 · 분홍/주황/청록 점 장식 · 남색 글자. 팝업 · 모바일까지 한 번에 덮어쓴다.
   ===================================================================== */
:root {
  --main: #2EB8A0; --main-deep: #158C79; --main-soft: #DCF3EE;
  --pink: #F7D3DE; --blue: #CFE2F7; --blue-soft: #E1ECF9;
  --acc-pink: #EF5D85; --acc-orange: #F6A73A; --acc-teal: #2EB8A0; --acc-blue: #3D9BE9;
  --ink: #27364F; --ink-2: #55627A; --ink-3: #8D97A9;
  --line: #DCE2EA; --bg: #ECEFF3; --card: #F2F4F7;
  --nm-d: #CDD4DE; --nm-l: #FFFFFF;
  --nm: 9px 9px 22px var(--nm-d), -9px -9px 22px var(--nm-l);
  --nm-sm: 5px 5px 12px var(--nm-d), -5px -5px 12px var(--nm-l);
  --nm-in: inset 4px 4px 9px var(--nm-d), inset -4px -4px 9px var(--nm-l);
  --shadow: var(--nm); --shadow-sm: var(--nm-sm);
  --radius-xl: 34px; --radius-lg: 26px; --radius-md: 18px;
  --dots: radial-gradient(circle, var(--acc-pink) 0 3px, transparent 3.5px) 0 50% / 6px 6px no-repeat, radial-gradient(circle, var(--acc-orange) 0 3px, transparent 3.5px) 11px 50% / 6px 6px no-repeat, radial-gradient(circle, var(--acc-teal) 0 3px, transparent 3.5px) 22px 50% / 6px 6px no-repeat;
}
html, body { overflow-x: clip; }
body { background: var(--bg); color: var(--ink); }
::selection { background: #CDEFE8; }

/* 머리말 · 꼬리말 */
.header { background: rgba(236,239,243,.86); }
.header.scrolled { border-bottom-color: transparent; box-shadow: 0 10px 24px -18px rgba(39,54,79,.35); }
.brand-mark, .hsearch, .lang, .menu-btn, .hauth { background: var(--card) !important; box-shadow: var(--nm-sm) !important; color: var(--ink); }
.hauth.hsignup { background: var(--ink) !important; color: #fff; }
.gnb > li > a:hover, .gnb > li > a.active { background: var(--card); box-shadow: var(--nm-sm); }
.gnb > li > a.active { color: var(--ink); }
.gnb .sub { background: var(--card); box-shadow: 9px 9px 22px rgba(205,212,222,.2), -9px -9px 22px rgba(255,255,255,.2); border-radius: 20px; }
.footer { background: var(--ink); color: #C9D1DE; border-radius: 40px 40px 0 0; }
.footer .copy { border-top-color: rgba(255,255,255,.1); }

/* 카드 · 지표 · 표 · 목록 */
.card, .metric, .ev-kpis div, .ev-paper, .sbx-kpi > div, .sbx-panel, .ntx-kpi > div, .nwc, .nlx-way, .tbl-wrap, .list, .pr-canvas, .nw-side-card { background: var(--card); box-shadow: var(--nm); border-color: transparent !important; }
.card-hover:hover, .ev-paper:hover, .nwc:hover { box-shadow: 14px 14px 30px var(--nm-d), -10px -10px 26px var(--nm-l); }
.list { border-radius: var(--radius-lg); overflow: hidden; }
.list-row { border-bottom-color: var(--line); }
.list-row:hover { background: #E9EDF2; }
.tbl { background: var(--card); }
.tbl th { background: #E8ECF1; color: var(--ink-3); border-bottom-color: var(--line); }
.tbl td { border-bottom-color: var(--line); }
.icon-tile { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; box-shadow: var(--nm-sm); }
.icon-tile:not(.pink):not(.blue):not(.soft) { background: linear-gradient(140deg, #4FD1B5, var(--main-deep)); color: #fff; }
.icon-tile.pink { background: linear-gradient(140deg, #F58AA7, var(--acc-pink)); color: #fff; }
.icon-tile.blue { background: linear-gradient(140deg, #7CC0F3, var(--acc-blue)); color: #fff; }
.icon-tile.soft { background: linear-gradient(140deg, #FCC56E, var(--acc-orange)); color: #fff; }

/* 제목 아래 세 색 점 */
.sec-title { font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
.sec-title::after { content: ""; display: block; width: 30px; height: 8px; margin-top: 12px; background: var(--dots); }
.card > h3:first-child::after, .card > h4:first-child::after { content: ""; display: block; width: 30px; height: 6px; margin-top: 8px; background: var(--dots); }

/* 하위 페이지 머리: 밝은 입체 판 + 오른쪽 유기적 도형 */
.page-hero .panel, .page-hero .panel.pink, .page-hero .panel.blue { background: var(--card); color: var(--ink); box-shadow: var(--nm); isolation: isolate; }
.page-hero .panel::before { content: ""; position: absolute; z-index: -1; right: -40px; top: -60px; width: min(46%, 520px); aspect-ratio: 1.15; border-radius: 58% 42% 46% 54% / 52% 60% 40% 48%;
  background: linear-gradient(140deg, #BFEDE3 0%, #CFE2F7 55%, #F9D9E3 100%); box-shadow: inset 10px 10px 30px rgba(255,255,255,.7), 14px 18px 40px -20px rgba(39,54,79,.35); animation: ogBlob 14s ease-in-out infinite alternate; }
.page-hero .panel.pink::before { background: linear-gradient(140deg, #FBD3DF 0%, #FDE6C8 60%, #DDF3EE 100%); }
.page-hero .panel.blue::before { background: linear-gradient(140deg, #CFE2F7 0%, #DCF3EE 60%, #FDE6C8 100%); }
@keyframes ogBlob { 50% { border-radius: 44% 56% 60% 40% / 58% 42% 58% 42%; transform: rotate(8deg) scale(1.04); } 100% { border-radius: 55% 45% 38% 62% / 45% 55% 45% 55%; transform: rotate(-6deg); } }
.page-hero .crumb { color: var(--ink-3); opacity: 1; }
.page-hero h1 { color: var(--ink); }
.page-hero h1::after { content: ""; display: block; width: 30px; height: 8px; margin-top: 14px; background: var(--dots); }
.page-hero p { color: var(--ink-2); opacity: 1; }
.tabs a { background: var(--card); box-shadow: var(--nm-sm); color: var(--ink-2); }
.tabs { padding: 22px 6px 10px; margin: 0 -6px; }
.tabs a.on { background: var(--ink); color: #fff; box-shadow: 4px 6px 14px -4px rgba(39,54,79,.5); }

/* 첫 화면 큰 판: 청록→파랑 그라데이션 + 유기적 모서리 */
.hero-panel { background: linear-gradient(130deg, #1FA58F 0%, #2EB8A0 40%, #3D9BE9 100%); border-radius: 46px 46px 120px 46px; box-shadow: 0 30px 60px -30px rgba(21,140,121,.55); }

/* 버튼 · 알약 · 배지 */
.btn { border-radius: 999px; }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 5px 8px 18px -6px rgba(39,54,79,.55); }
.btn-dark:hover { background: #1C2940; }
.btn-line, .btn-white { background: var(--card); color: var(--ink); box-shadow: var(--nm-sm); }
.btn-line:hover, .btn-white:hover { box-shadow: var(--nm-in); transform: none; }
.btn-green { background: linear-gradient(135deg, #3CCCB1, var(--main-deep)); }
.badge { background: #E3E8EF; color: var(--ink-2); }
.badge.green { background: #DCF3EE; color: #13806E; }
.badge.pink { background: #FCE1E9; color: #C23C64; }
.badge.blue { background: #DFEDFB; color: #2B74B8; }
.badge.dark { background: var(--ink); color: #fff; }
.pill.green { background: #DCF3EE; color: #13806E; }

/* 입력칸: 오목한 입체 */
input[type=text], input[type=search], input[type=email], input[type=url], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=datetime-local], textarea, select, .sel, .promo-in {
  background-color: #E9EDF2 !important; border-color: transparent !important; box-shadow: var(--nm-in) !important; color: var(--ink); border-radius: 16px; }
input:focus, textarea:focus, select:focus, .sel:focus, .promo-in:focus { outline: none; box-shadow: var(--nm-in), 0 0 0 3px rgba(46,184,160,.35) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--main-deep); }
.sbx-q, .ntx-q { background: #E9EDF2 !important; box-shadow: var(--nm-in) !important; border-color: transparent !important; }
.sbx-q input, .ntx-q input, .ai-box input, .chat input.chat-in { box-shadow: none !important; background: transparent !important; }

/* 팝업 · 대화상자 · 서랍 · 채팅 · 알림 */
.modal-bg, .rx-dlg-bg, .drawer-bg { background: rgba(39,54,79,.38) !important; backdrop-filter: blur(6px); }
.modal-panel, .rx-dlg-panel, .chat-panel, .drawer-panel, .adm-login-box, .api-box, .ops-box { background: var(--card) !important; border-radius: 32px !important; box-shadow: 0 40px 80px -30px rgba(39,54,79,.55), inset 1px 1px 0 rgba(255,255,255,.8) !important; }
.modal-x { background: var(--card); box-shadow: var(--nm-sm); color: var(--ink); }
.m-head, .l-head { background: linear-gradient(130deg, #1FA58F, #2EB8A0 45%, #3D9BE9); position: relative; overflow: hidden; }
.m-head::after, .l-head::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 220px; height: 200px; border-radius: 58% 42% 46% 54% / 52% 60% 40% 48%; background: rgba(255,255,255,.14); pointer-events: none; }
.m-head.pink { background: linear-gradient(130deg, #F58AA7, var(--acc-pink)); color: #fff; }
.m-head.blue { background: linear-gradient(130deg, #7CC0F3, var(--acc-blue)); color: #fff; }
.m-head.gray { background: linear-gradient(130deg, #8D97A9, #55627A); color: #fff; }
.ntc-panel .ntc-hd { background: radial-gradient(120% 160% at 0% 0%, #2EB8A0, #158C79 55%, #27364F) !important; }
.ntc-panel .ntc-hd.is-ann { background: radial-gradient(120% 160% at 0% 0%, #EF5D85, #B53A62 55%, #27364F) !important; }
.ntc-foot { background: #E8ECF1; border-top-color: var(--line); }
.drawer details { background: var(--card); box-shadow: var(--nm-sm); }
.drawer-close { background: var(--card); box-shadow: var(--nm-sm); }
.toast { background: var(--ink); border-radius: 999px; }
.chat-panel { background: var(--bg) !important; }
.ai-clock { background: var(--card); box-shadow: var(--nm); }

/* 큰 강조 판(다가오는 행사 · 공지 첫 카드)도 새 팔레트로 */
.ev-next, .ntx-hero { background: radial-gradient(120% 140% at 0% 0%, #2EB8A0 0%, #158C79 45%, #27364F 100%); }
.ev-next { border-radius: 40px 40px 100px 40px; }
.ntx-hero { border-radius: 40px 40px 110px 40px; }

/* ---------- 모바일 반응형 ---------- */
@media (max-width: 1024px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .grid.pg5, .eb-shelf.pg5, .press-grid.pg5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ev-kpis { grid-template-columns: repeat(3, 1fr); }
  .nw-layout { grid-template-columns: 1fr; }
  .nw-side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .wrap { padding: 0 16px; }
  .section { padding: 44px 0; } .section-tight { padding: 28px 0; }
  .header .wrap { height: 64px; gap: 10px; }
  .brand-text > span, .brand-ver { display: none; }
  .header-tools { gap: 6px; } .header-tools .lang { display: none; }
  .g2, .g3, .g4, .ev-two, .ev-guide, .ev-papers, .sbx-viz { grid-template-columns: 1fr; }
  .grid.pg5, .eb-shelf.pg5, .press-grid.pg5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .metric-strip, .ev-kpis, .ntx-kpi, .sbx-kpi { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card { padding: 20px; border-radius: 22px; }
  .page-hero { padding-top: 16px; }
  .page-hero .panel { padding: 30px 22px 26px; min-height: 170px; border-radius: 28px; }
  .page-hero .panel::before { width: 62%; right: -30%; top: -30px; opacity: .8; }
  .page-hero h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .hero-panel { grid-template-columns: 1fr; padding: 36px 22px; min-height: 0; border-radius: 32px 32px 70px 32px; }
  .list-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
  .list-row .date { text-align: left; }
  .tbl { font-size: 13px; } .tbl th, .tbl td { padding: 10px 12px; }
  .footer { border-radius: 28px 28px 0 0; padding: 40px 0 28px; margin-top: 56px; }
  .footer .wrap { grid-template-columns: 1fr; gap: 24px; }
  .ev-next { grid-template-columns: 1fr; padding: 22px; border-radius: 28px 28px 60px 28px; }
  .ev-next-d { padding: 14px; }
  .ntx-hero { border-radius: 28px 28px 70px 28px; padding: 22px; }
  h1, h2, h3 { overflow-wrap: anywhere; }
  img, video, iframe { max-width: 100%; }
  /* 팝업은 아래에서 올라오는 시트로 */
  .modal, .rx-dlg { padding: 0; place-items: end stretch; }
  .modal-panel, .rx-dlg-panel, .api-box, .ops-box, .adm-login-box { width: 100% !important; max-width: 100% !important; max-height: 92vh !important; border-radius: 28px 28px 0 0 !important; animation: ogSheet .28s cubic-bezier(.2,.8,.2,1) both; }
  .m-head { padding: 30px 22px 22px; border-radius: 28px 28px 0 0; }
  .adm-login-box { padding: 24px 20px; }
  .chat { right: 12px; bottom: 12px; }
  .chat-panel { width: calc(100vw - 24px); height: min(78vh, 600px); }
}
@keyframes ogSheet { from { transform: translateY(40px); opacity: 0; } }
@media (max-width: 420px) {
  .header-tools .hsearch.huser { display: none; }
}
@media (prefers-reduced-motion: reduce) { .page-hero .panel::before { animation: none; } }

/* 홍보 슬라이드도 새 팔레트(남색·청록) + 유기적 모서리 */
.pm { background: radial-gradient(120% 140% at 0% 0%, #1E5A5C 0%, #27364F 55%, #1A2538 100%); border-radius: 40px 40px 110px 40px; box-shadow: 0 34px 70px -34px rgba(39,54,79,.7); }
@media (max-width: 760px) { .pm { border-radius: 26px 26px 60px 26px; } }
@media (max-width: 760px) { .header .hauth { display: none !important; } .header-tools > * { flex: none; } .brand-text strong { font-size: 15px; } }
@media (max-width: 400px) { .brand-text { display: none; } }

/* v1.42.1 관리자 양식 이미지 미리보기 */
.up-prev:empty { display: none; }
.up-prev { margin-top: 10px; }
.up-prev-fig { margin: 0; display: inline-grid; gap: 8px; max-width: min(100%, 420px); padding: 10px; border-radius: 20px; background: var(--card, #F2F4F7); box-shadow: var(--nm-sm, 0 6px 16px -10px rgba(0,0,0,.3)); animation: upPrevIn .35s ease both; }
.up-prev-fig img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; background: #E3E8EF; }
.up-prev-fig figcaption { display: flex; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.up-prev-fig figcaption span { margin-right: auto; }
.up-prev-fig a, .up-prev-fig button { font: inherit; font-size: 12.5px; color: var(--main-deep); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.up-prev-fig button { color: #C23C64; }
.up-prev-bad { display: none; color: #C23C64; font-size: 12.5px; font-weight: 600; }
.up-prev.bad .up-prev-fig { display: none; } .up-prev.bad .up-prev-bad { display: block; }
@keyframes upPrevIn { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* v1.43.0 학술 DB 하단의 Open API · 외부 연계 */
.oapi-sec { scroll-margin-top: 90px; }
.oapi-sec > .section { padding-top: 12px; }

/* v1.43.1 관리자 「… 등록」 버튼은 어디서나 오른쪽 끝에 */
.adm-add { display: flex; width: fit-content; margin-left: auto; justify-self: end; align-self: flex-end; }
.sec-head > .adm-add { order: 9; margin-bottom: 0; }
.sec-head > .adm-anchor { display: none; }

/* v1.44.0 사업공고 · 연구과제: 수평 타임라인 + 상세 팝업 */
.htl-card { padding: 22px 24px 16px; }
.htl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.htl-head h3 { margin: 0; font-size: 17px; display: flex; gap: 8px; align-items: center; } .htl-head h3 svg { width: 18px; height: 18px; color: var(--main-deep); } .htl-head small { color: var(--ink-3); font-size: 13px; }
.card > .htl-head h3::after { display: none; }
.htl-leg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.htl-leg span { display: inline-flex; align-items: center; gap: 6px; } .htl-leg i { width: 14px; height: 8px; border-radius: 99px; background: #C9D1DD; }
.htl-leg .on i { background: var(--main); } .htl-leg .soon i { background: var(--acc-blue, #3D9BE9); } .htl-leg .joint i { background: transparent; box-shadow: inset 0 0 0 2px var(--acc-pink, #EF5D85); } .htl-leg .today i { width: 2px; height: 12px; background: var(--acc-pink, #EF5D85); }
.htl-scroll { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.htl { position: relative; padding-top: 26px; }
.htl-axis { position: absolute; left: 0; right: 0; top: 0; height: 22px; }
.htl-axis span { position: absolute; transform: translateX(-2px); font: 600 11.5px var(--font-display); color: var(--ink-3); white-space: nowrap; }
.htl-axis b { color: var(--ink); margin-right: 4px; }
.htl-lanes { position: relative; border-radius: 16px; background: #E9EDF2; box-shadow: var(--nm-in, inset 3px 3px 8px #CDD4DE); }
.htl-lanes em { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(39,54,79,.07); }
.htl-now { position: absolute; top: -6px; bottom: -4px; width: 2px; background: var(--acc-pink, #EF5D85); z-index: 3; text-decoration: none; pointer-events: none; }
.htl-now b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 800; color: #fff; background: var(--acc-pink, #EF5D85); padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
.htl-bar { position: absolute; height: 32px; padding: 0; border: 0; border-radius: 12px; background: #DCE2EA; cursor: pointer; overflow: visible; text-align: left; box-shadow: 3px 3px 8px rgba(39,54,79,.12), -2px -2px 6px rgba(255,255,255,.8); transition: transform .2s, box-shadow .2s; animation: htlIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d) * 50ms); transform-origin: left center; }
.htl-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: rgba(39,54,79,.12); }
.htl-bar span { position: relative; z-index: 1; display: block; padding: 0 12px; line-height: 32px; font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.htl-bar.on { background: linear-gradient(90deg, #BFEDE3, #DCF3EE); } .htl-bar.on i { background: linear-gradient(90deg, var(--main), #4FD1B5); opacity: .55; }
.htl-bar.soon { background: linear-gradient(90deg, #CFE2F7, #E1ECF9); } .htl-bar.soon i { background: var(--acc-blue, #3D9BE9); opacity: .4; }
.htl-bar.off { background: #E3E7EE; } .htl-bar.off span { color: var(--ink-3); }
.htl-bar.joint { box-shadow: inset 0 0 0 2px var(--acc-pink, #EF5D85), 3px 3px 8px rgba(39,54,79,.12); }
.htl-bar:hover, .htl-bar:focus-visible { transform: translateY(-2px); z-index: 4; box-shadow: 0 10px 20px -8px rgba(39,54,79,.4); outline: none; }
@keyframes htlIn { from { transform: scaleX(.2); opacity: 0; } }
.htl-tip { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.call[data-call-i], .sp-row { cursor: pointer; }
.call[data-call-i]:hover { transform: translateY(-2px); }
.sp-row:hover td { background: #E6EBF1; }
.sp-row:focus-visible { outline: 3px solid var(--main); outline-offset: -3px; }
/* 상세 팝업 */
.sp-dlg { z-index: 126; }
.sp-dlg[hidden] { display: none; }
.sp-panel { width: min(720px, 100%); max-height: min(860px, calc(100vh - 32px)); }
.sp-scroll { overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.sp-panel .modal-x { color: #fff; background: rgba(255,255,255,.16); box-shadow: none; z-index: 3; }
.sp-hd { position: relative; overflow: hidden; padding: 28px 64px 24px 30px; color: #fff; background: radial-gradient(120% 160% at 0% 0%, #8D97A9, #55627A 55%, #27364F); }
.sp-hd.on { background: radial-gradient(120% 160% at 0% 0%, #2EB8A0, #158C79 55%, #27364F); }
.sp-hd.soon { background: radial-gradient(120% 160% at 0% 0%, #3D9BE9, #2B74B8 55%, #27364F); }
.sp-hd.joint::before { content: "공동"; position: absolute; right: 64px; top: 22px; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: var(--acc-pink, #EF5D85); }
.sp-hd::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 240px; height: 220px; border-radius: 58% 42% 46% 54% / 52% 60% 40% 48%; background: rgba(255,255,255,.12); }
.sp-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sp-tags span { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); }
.sp-tags .sp-kind { background: none; border: 0; padding-left: 0; letter-spacing: .12em; color: rgba(255,255,255,.7); font-size: 11px; }
.sp-tags .ntc-dday { border: 0; }
.sp-hd h2 { position: relative; z-index: 1; margin: 12px 0 0; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.35; word-break: keep-all; color: #fff; }
.sp-body { padding: 22px 30px 8px; display: grid; gap: 18px; }
.sp-per { padding: 16px 18px; border-radius: 16px; background: #E9EDF2; box-shadow: var(--nm-in, inset 3px 3px 8px #CDD4DE); display: grid; gap: 8px; }
.sp-per-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.sp-per-h span { font-weight: 800; color: var(--main-deep); }
.sp-bar { position: relative; height: 12px; border-radius: 99px; background: #D7DEE7; }
.sp-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #4FD1B5, var(--main-deep)); animation: sbxW .9s ease both; }
.sp-bar u { position: absolute; top: -5px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--acc-pink, #EF5D85), 0 4px 10px rgba(0,0,0,.2); }
.sp-per small { color: var(--ink-3); font-size: 12px; }
.sp-sec h3 { margin: 0 0 8px; font-size: 15px; }
.sp-mem { margin: 0; line-height: 1.8; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chips a { display: inline-flex; gap: 6px; align-items: center; padding: 7px 14px; border-radius: 99px; background: var(--card); box-shadow: var(--nm-sm); font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sp-chips a svg { width: 15px; height: 15px; color: var(--main-deep); } .sp-chips a:hover { color: var(--main-deep); }
.sp-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 16px 30px 22px; }
.sp-foot .btn { display: inline-flex; gap: 6px; align-items: center; } .sp-foot .btn svg { width: 15px; height: 15px; }
@media (max-width: 760px) { .htl-card { padding: 18px 16px 12px; } .sp-hd { padding: 26px 56px 20px 20px; } .sp-body { padding: 18px 18px 6px; } .sp-foot { padding: 14px 18px 20px; } .sp-foot .btn { flex: 1 1 auto; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .htl-bar, .sp-bar i { animation: none; } }
.sp-body .ntb { display: grid; gap: 12px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.htl-scroll { max-height: 470px; overflow-y: auto; }
.htl-bar span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.htl-lanes:has(.htl-bar:nth-child(12)) .htl-bar { height: 28px; } .htl-lanes:has(.htl-bar:nth-child(12)) .htl-bar span { line-height: 28px; font-size: 12px; }

/* v1.45.0 사업공고 · 연구과제 팝업 인포그래픽 */
.sp-hd-sub { position: relative; z-index: 1; margin: 8px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.82); }
.sp-hd-sub svg { width: 15px; height: 15px; }
.sp-panel { width: min(820px, 100%); }
.sp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sp-tiles > div { position: relative; display: grid; gap: 2px; padding: 14px 14px 12px; border-radius: 18px; background: var(--card); box-shadow: var(--nm-sm); animation: fdIn .5s both; animation-delay: calc(var(--d) * 70ms); }
.sp-tiles span { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #4FD1B5, var(--main-deep)); }
.sp-tiles > div:nth-child(2) span { background: linear-gradient(140deg, #FCC56E, var(--acc-orange)); } .sp-tiles > div:nth-child(3) span { background: linear-gradient(140deg, #7CC0F3, var(--acc-blue)); } .sp-tiles > div:nth-child(4) span { background: linear-gradient(140deg, #F58AA7, var(--acc-pink)); }
.sp-tiles span svg { width: 15px; height: 15px; }
.sp-tiles b { font: 800 24px/1.15 var(--font-display); color: var(--ink); margin-top: 6px; } .sp-tiles b small { font-size: 12px; margin-left: 2px; color: var(--ink-3); }
.sp-tiles em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.sp-viz { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.sp-viz-r { display: grid; gap: 10px; min-width: 0; }
.sp-ring { position: relative; width: 150px; aspect-ratio: 1; border-radius: 50%; background: var(--card); box-shadow: var(--nm); display: grid; place-items: center; }
.sp-ring svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); transform: rotate(-90deg); }
.sp-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.sp-ring .bg { stroke: #DCE2EA; } .sp-ring .fg { stroke-dashoffset: var(--off); animation: spRing 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes spRing { from { stroke-dashoffset: 264; } }
.sp-ring div { position: relative; text-align: center; display: grid; } .sp-ring b { font: 800 28px/1 var(--font-display); color: var(--ink); } .sp-ring small { font-size: 12px; color: var(--ink-3); font-weight: 700; margin-top: 4px; }
.sp-sum { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); } .sp-sum svg { width: 15px; height: 15px; color: var(--main-deep); } .sp-sum b { color: var(--ink); } .sp-sum small { color: var(--ink-3); }
.sp-years { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-years span { flex: 1 1 70px; display: grid; text-align: center; padding: 8px 6px; border-radius: 12px; background: #E9EDF2; box-shadow: var(--nm-in); }
.sp-years b { font: 800 14px var(--font-display); color: var(--ink-2); } .sp-years small { font-size: 11px; color: var(--ink-3); }
.sp-years .past { background: #DCF3EE; box-shadow: none; } .sp-years .past b { color: #13806E; }
.sp-years .now { background: linear-gradient(135deg, #3CCCB1, var(--main-deep)); box-shadow: 0 8px 16px -8px rgba(21,140,121,.6); } .sp-years .now b, .sp-years .now small { color: #fff; }
.sp-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.sp-flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 17px; height: 3px; border-radius: 3px; background: #DCE2EA; }
.sp-flow li { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; }
.sp-flow i { font-style: normal; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--font-display); background: var(--card); color: var(--ink-3); box-shadow: var(--nm-sm); z-index: 1; }
.sp-flow .done i { background: #DCF3EE; color: #13806E; } .sp-flow .now i { background: linear-gradient(135deg, #3CCCB1, var(--main-deep)); color: #fff; box-shadow: 0 0 0 6px rgba(46,184,160,.18); animation: ntxPulse 1.8s ease-in-out infinite; }
.sp-flow b { font-size: 13px; color: var(--ink-2); } .sp-flow .now b { color: var(--main-deep); } .sp-flow small { font-size: 11px; color: var(--ink-3); }
.sp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.sp-two > .sp-sec, .sp-body > .sp-sec { padding: 16px 18px; border-radius: 18px; background: var(--card); box-shadow: var(--nm-sm); }
.sp-sec h3 small.cnt { font-size: 12px; color: var(--ink-3); }
.sp-cmp { display: grid; gap: 8px; }
.sp-cmp > div { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.sp-cmp span { color: var(--ink-3); font-weight: 700; } .sp-cmp .me span { color: var(--main-deep); }
.sp-cmp i { height: 12px; border-radius: 99px; background: #E3E8EF; overflow: hidden; } .sp-cmp u { display: block; height: 100%; width: var(--w); border-radius: inherit; background: #B9C3D1; animation: sbxW .9s ease both; } .sp-cmp .me u { background: linear-gradient(90deg, #4FD1B5, var(--main-deep)); }
.sp-cmp b { font: 800 14px var(--font-display); } .sp-cmp b small { font-size: 11px; color: var(--ink-3); margin-left: 2px; }
.sp-people { display: grid; gap: 8px; }
.sp-people a, .sp-pp { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 14px; color: inherit; transition: background .15s; } .sp-people a:hover { background: #E6EBF1; }
.sp-people i, .sp-pp i { font-style: normal; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--main), var(--main-deep)); }
.sp-people img { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.sp-people span { display: grid; min-width: 0; } .sp-people b { font-size: 14px; } .sp-people small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-rel-b { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 14px; background: #E9EDF2; border: 0; cursor: pointer; font: inherit; transition: background .15s, transform .15s; }
.sp-rel-b:hover { background: #DCF3EE; transform: translateX(3px); }
.sp-rel-b b { font-size: 13.5px; line-height: 1.4; } .sp-rel-b small { grid-column: 2; font-size: 12px; color: var(--ink-3); }
.sp-src { margin: 0; }
.sp-body .ntb-facts { margin: 0; }
@media (max-width: 760px) {
  .sp-tiles { grid-template-columns: 1fr 1fr; } .sp-viz { grid-template-columns: 1fr; justify-items: center; } .sp-viz-r { width: 100%; }
  .sp-two { grid-template-columns: 1fr; } .sp-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sp-flow small { display: none; } .sp-flow i { width: 30px; height: 30px; } .sp-flow::before { top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .sp-ring .fg, .sp-tiles > div, .sp-cmp u, .sp-flow .now i { animation: none; } }

/* v1.45.0 「… 등록」 팝업 양식 */
.adm-modal { z-index: 127; }
.adm-modal-panel { width: min(880px, 100%); max-height: min(900px, calc(100vh - 32px)); }
.adm-modal-scroll { overflow-y: auto; padding: 8px 8px 4px; }
.adm-modal .adm-form { margin: 0; border: 0 !important; box-shadow: none !important; background: transparent !important; }
.adm-modal .adm-form-head { padding-right: 48px; }
.adm-modal .m-btns { position: sticky; bottom: -4px; padding: 12px 0 8px; background: linear-gradient(transparent, var(--card) 35%); }
.sp-scroll > * { flex-shrink: 0; }

/* v1.46.0 제출자료 안내 (연구활동 및 연구성과 관리) */
.sg .sec-head { margin-bottom: 22px; }
.sg-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 18px; }
.sg-brand { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 26px 28px; border-radius: 30px 30px 80px 30px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2EB8A0 0%, #158C79 45%, #27364F 100%); box-shadow: 0 24px 50px -28px rgba(21,140,121,.6); }
.sg-brand::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 220px; height: 200px; border-radius: 58% 42% 46% 54% / 52% 60% 40% 48%; background: rgba(255,255,255,.12); }
.sg-brand small { font-size: 11.5px; letter-spacing: .12em; color: rgba(255,255,255,.7); font-weight: 800; }
.sg-brand > b { font-size: clamp(20px, 2.4vw, 26px); }
.sg-brand > span { font-size: 13.5px; color: rgba(255,255,255,.85); }
.sg-brand-r { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sg-brand-r em { font-style: normal; font-size: 12.5px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
.sg-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sg-kpi > div { display: grid; align-content: center; justify-items: center; text-align: center; padding: 14px 8px; border-radius: 22px; background: var(--card); box-shadow: var(--nm); }
.sg-kpi b { font: 800 30px/1.1 var(--font-display); color: var(--ink); } .sg-kpi i { font-style: normal; font-size: 15px; color: var(--ink-3); } .sg-kpi small { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.sg-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.sg-toc a { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 99px; background: var(--card); box-shadow: var(--nm-sm); font-size: 13px; font-weight: 700; color: var(--ink-2); transition: transform .15s, color .15s; }
.sg-toc a span { font: 800 11px var(--font-display); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #DCF3EE; color: #13806E; }
.sg-toc a:hover { color: var(--main-deep); transform: translateY(-2px); }
.sg-sec { scroll-margin-top: 90px; margin-bottom: 22px; padding: 26px 28px; border-radius: 30px; background: var(--card); box-shadow: var(--nm); display: grid; gap: 14px; }
.sg-h { display: flex; gap: 16px; align-items: flex-start; }
.sg-n { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; font: 800 18px var(--font-display); color: #fff; background: linear-gradient(140deg, #4FD1B5, var(--main-deep)); box-shadow: 0 10px 20px -10px rgba(21,140,121,.7); }
.sg-sec:nth-of-type(4n+2) .sg-n { background: linear-gradient(140deg, #F58AA7, var(--acc-pink)); } .sg-sec:nth-of-type(4n+3) .sg-n { background: linear-gradient(140deg, #FCC56E, var(--acc-orange)); } .sg-sec:nth-of-type(4n) .sg-n { background: linear-gradient(140deg, #7CC0F3, var(--acc-blue)); }
.sg-h h3 { margin: 4px 0 0; font-size: 19px; } .sg-h p { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.sg-sub { margin: 6px 0 0; font-size: 15px; color: var(--ink); } .sg-sub small { font-weight: 600; color: var(--ink-3); font-size: 12.5px; }
.sg-tbl td { line-height: 1.6; } .sg-tbl td:first-child { white-space: nowrap; }
.sg-note { margin: 0; display: flex; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #FFF8E8; color: #6B5320; font-size: 13.5px; line-height: 1.65; }
.sg-note svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: #C4921B; }
.sg-hl { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; background: #DCF3EE; color: #0F6B5C; font-size: 14.5px; }
.sg-hl svg { width: 18px; height: 18px; }
.sg-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sg-list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.sg-list li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--main); box-shadow: 0 0 0 3px var(--main-soft); }
.sg-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sg-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 20px; background: #E9EDF2; box-shadow: var(--nm-in); animation: fdIn .5s both; animation-delay: calc(var(--d) * 70ms); }
.sg-card span { width: 38px; height: 38px; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #4FD1B5, var(--main-deep)); }
.sg-card:nth-child(2) span { background: linear-gradient(140deg, #FCC56E, var(--acc-orange)); } .sg-card:nth-child(3) span { background: linear-gradient(140deg, #7CC0F3, var(--acc-blue)); } .sg-card:nth-child(4) span { background: linear-gradient(140deg, #F58AA7, var(--acc-pink)); }
.sg-card span svg { width: 19px; height: 19px; } .sg-card b { font-size: 15px; } .sg-card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.sg-acks { display: grid; gap: 10px; }
.sg-ack { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #E9EDF2; box-shadow: var(--nm-in); }
.sg-ack-t { font-size: 12.5px; font-weight: 800; color: var(--main-deep); }
.sg-ack p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink); font-family: ui-serif, "Noto Serif KR", serif; }
.sg-ack .btn { display: inline-flex; gap: 5px; align-items: center; } .sg-ack .btn svg { width: 14px; height: 14px; }
.sg-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sg-type { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 20px; background: #E9EDF2; animation: fdIn .5s both; animation-delay: calc(var(--d) * 60ms); }
.sg-type span { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--card); box-shadow: var(--nm-sm); color: var(--main-deep); } .sg-type span svg { width: 17px; height: 17px; }
.sg-type b { font-size: 14.5px; } .sg-type ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.sg-type li { font-size: 12px; padding: 4px 9px; border-radius: 99px; background: var(--card); color: var(--ink-2); font-weight: 600; }
.sg-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sg-role { position: relative; overflow: hidden; padding: 18px 20px; border-radius: 22px 22px 50px 22px; color: #fff; display: grid; gap: 4px; background: linear-gradient(135deg, #2EB8A0, #158C79); }
.sg-role.r1 { background: linear-gradient(135deg, #3D9BE9, #2B74B8); } .sg-role.r2 { background: linear-gradient(135deg, #F58AA7, #C23C64); }
.sg-role b { font-size: 22px; font-family: var(--font-display); } .sg-role p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.9); } .sg-role small { font-size: 12.5px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.35); margin-top: 4px; }
.sg-two { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.sg-mock { position: relative; padding: 26px 22px 22px; border-radius: 6px 22px 22px 6px; background: #fff; box-shadow: 0 18px 40px -20px rgba(39,54,79,.45), inset 6px 0 0 var(--main-deep); text-align: center; }
.sg-mock > small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 14px; }
.sg-mock h5 { margin: 0; font-size: 19px; } .sg-mock-s { margin: 4px 0 18px; font-size: 13.5px; color: var(--ink-2); }
.sg-mock dl { margin: 0; display: grid; gap: 6px; text-align: left; padding-top: 14px; border-top: 1px solid var(--line); }
.sg-mock dl div { display: grid; grid-template-columns: 70px 1fr; gap: 8px; font-size: 12.5px; } .sg-mock dt { font-weight: 800; color: var(--main-deep); } .sg-mock dd { margin: 0; color: var(--ink); }
.sg-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-flow > div { flex: 1 1 120px; display: grid; text-align: center; padding: 12px 10px; border-radius: 16px; background: #E9EDF2; box-shadow: var(--nm-in); }
.sg-flow > div b { font-size: 14.5px; } .sg-flow > div small { font-size: 12px; color: var(--ink-3); }
.sg-flow > div.s2 { background: linear-gradient(135deg, #3CCCB1, var(--main-deep)); box-shadow: 0 10px 20px -10px rgba(21,140,121,.7); } .sg-flow > div.s2 b, .sg-flow > div.s2 small { color: #fff; }
.sg-flow > i { color: var(--ink-3); } .sg-flow > i svg { width: 18px; height: 18px; }
.sg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: s; position: relative; }
.sg-steps li { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 16px; border-radius: 20px; background: #E9EDF2; animation: fdIn .5s both; animation-delay: calc(var(--d) * 80ms); }
.sg-steps li:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 32px; width: 10px; height: 2px; background: var(--main); }
.sg-steps i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--font-display); color: #fff; background: linear-gradient(135deg, #3CCCB1, var(--main-deep)); }
.sg-steps b { font-size: 15px; } .sg-steps p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.sg-settle { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
.sg-money { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 22px 18px; border-radius: 26px 26px 60px 26px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #F6A73A, #E0722E 55%, #27364F); }
.sg-money small { font-size: 12px; font-weight: 800; letter-spacing: .1em; opacity: .85; } .sg-money > b { font: 800 54px/1 var(--font-display); } .sg-money > b i { font-style: normal; font-size: 18px; margin-left: 2px; } .sg-money > span { font-size: 12.5px; opacity: .9; }
.sg-ratio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 12px; }
.sg-ratio div { display: grid; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.14); } .sg-ratio div.on { background: #fff; color: #C2601F; }
.sg-ratio b { font: 800 20px var(--font-display); } .sg-ratio small { font-size: 11px; }
.sg-settle-r { display: grid; gap: 10px; }
.sg-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sg-rules > div { padding: 14px 16px; border-radius: 18px; background: #E9EDF2; } .sg-rules b { font-size: 14px; color: var(--ink); } .sg-rules p { margin: 6px 0 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.sg-lec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sg-lec > div { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 20px 14px; border-radius: 22px; background: #E9EDF2; box-shadow: var(--nm-in); animation: fdIn .5s both; animation-delay: calc(var(--d) * 80ms); }
.sg-lec span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #7CC0F3, var(--acc-blue)); } .sg-lec span svg { width: 21px; height: 21px; }
.sg-lec b { font: 800 20px var(--font-display); color: var(--ink); margin-top: 4px; } .sg-lec small { font-size: 12.5px; color: var(--ink-3); }
.sg-eth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sg-eth > div { position: relative; padding: 16px 16px 16px 20px; border-radius: 18px; background: #E9EDF2; animation: fdIn .5s both; animation-delay: calc(var(--d) * 60ms); }
.sg-eth > div::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--acc-pink); }
.sg-eth > div:nth-child(3n+2)::before { background: var(--acc-orange); } .sg-eth > div:nth-child(3n)::before { background: var(--acc-teal); }
.sg-eth b { font-size: 14.5px; } .sg-eth p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.sg-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sg-ck { padding: 16px 18px; border-radius: 20px; background: #E9EDF2; }
.sg-ck h4 { margin: 0 0 10px; font-size: 14.5px; display: flex; gap: 6px; align-items: center; } .sg-ck h4 svg { width: 16px; height: 16px; color: var(--main-deep); } .sg-ck h4 small { margin-left: auto; font: 800 12px var(--font-display); color: var(--main-deep); background: #DCF3EE; padding: 2px 9px; border-radius: 99px; }
.sg-ck ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sg-ck label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--card); cursor: pointer; font-size: 13.5px; line-height: 1.5; transition: background .15s; }
.sg-ck input { width: 18px; height: 18px; margin-top: 1px; flex: none; box-shadow: none !important; }
.sg-ck input:checked + span { color: var(--ink-3); text-decoration: line-through; } .sg-ck label:has(input:checked) { background: #DCF3EE; }
.sg-src { font-size: 12.5px; color: var(--ink-3); margin: 6px 4px 0; }
@media (max-width: 1024px) { .sg-cards, .sg-steps { grid-template-columns: 1fr 1fr; } .sg-types { grid-template-columns: repeat(3, 1fr); } .sg-steps li::after { display: none; } .sg-rules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .sg-top, .sg-two, .sg-settle { grid-template-columns: 1fr; } .sg-sec { padding: 20px 16px; border-radius: 24px; }
  .sg-cards, .sg-steps, .sg-roles, .sg-eth, .sg-checks, .sg-rules, .sg-lec { grid-template-columns: 1fr; } .sg-types { grid-template-columns: 1fr 1fr; }
  .sg-ack { grid-template-columns: 1fr; gap: 8px; } .sg-ack .btn { justify-self: start; } .sg-h { gap: 12px; } .sg-n { width: 44px; height: 44px; font-size: 15px; }
}
@media print { .header, .footer, .page-hero, .edu-pm, .tabs, .sg-toc, .chat, .btns { display: none !important; } .sg-sec { box-shadow: none; break-inside: avoid; } }

/* v1.47.0 원문 링크 → AI 등록 */
.ai-reg { align-items: center; }
.ai-reg input { flex: 1 1 260px; }
.ai-reg .btn { display: inline-flex; gap: 6px; align-items: center; flex: none; background: linear-gradient(135deg, #3CCCB1, var(--main-deep)); }
.ai-reg .btn svg { width: 15px; height: 15px; }
.ai-reg-st { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); line-height: 1.6; }
.ai-reg-st.ok { color: #13806E; } .ai-reg-st.ok b { font-weight: 800; } .ai-reg-st.bad { color: #C23C64; }
.adm-grid label.ai-filled > span::after { content: " ✓ AI"; font-size: 11px; font-weight: 800; color: #13806E; }
.adm-grid label.ai-filled input, .adm-grid label.ai-filled textarea, .adm-grid label.ai-filled select { box-shadow: var(--nm-in), 0 0 0 2px rgba(46,184,160,.55) !important; animation: aiFill 1.2s ease; }
@keyframes aiFill { 0% { box-shadow: 0 0 0 6px rgba(46,184,160,.45); } }
.ev-tl-top { padding-bottom: 0; }
.ev-tl-top + .section { padding-top: 24px; }
.htl-bar span { width: max-content; min-width: 100%; }
.htl-bar[data-ev] { min-width: 14px; }


/* v1.49.0 YouTube 쇼츠 제작 */
.shx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.shx-left { display: grid; gap: 16px; min-width: 0; }
.shx-step { display: grid; gap: 12px; padding: 22px 24px; }
.shx-step h3 { margin: 0; display: flex; gap: 10px; align-items: center; font-size: 17px; }
.card > h3.shx-step::after, .shx-step > h3::after { display: none !important; }
.shx-step h3 i { font-style: normal; width: 34px; height: 34px; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; display: grid; place-items: center; font: 800 13px var(--font-display); color: #fff; background: linear-gradient(140deg, #F58AA7, var(--acc-pink)); }
.shx-step h3 small { margin-left: auto; font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.shx-step textarea, .shx-step input:not([type=file]):not([type=checkbox]) { width: 100%; padding: 11px 14px; font: inherit; font-size: 14px; }
.shx-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: #E9EDF2; box-shadow: var(--nm-in); }
.shx-seg button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-3); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.shx-seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--nm-sm); }
.shx-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .shx-row > span { width: 52px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.shx-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .shx-meta label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.shx-scenes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.shx-empty { padding: 26px; text-align: center; color: var(--ink-3); border-radius: 18px; border: 1px dashed var(--line); }
.shx-sc { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; border-radius: 20px; background: #E9EDF2; }
.shx-th { position: relative; width: 96px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #3D9BE9, #27364F); display: grid; place-items: center; color: #fff; font: 800 24px var(--font-display); }
.shx-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shx-up { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; } .shx-up svg { width: 14px; height: 14px; }
.shx-fs { display: grid; gap: 6px; min-width: 0; }
.shx-sch { display: flex; gap: 8px; align-items: center; } .shx-sch b { font-size: 14px; } .shx-sch small { font-size: 12px; color: var(--ink-3); }
.shx-sch span { margin-left: auto; display: flex; gap: 4px; } .shx-sch span button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--nm-sm); cursor: pointer; font-weight: 800; color: var(--ink-2); }
.shx-fs details summary { font-size: 12px; color: var(--ink-3); cursor: pointer; }
.shx-fs .btns { gap: 6px; }
.shx-right { position: sticky; top: 90px; display: grid; gap: 10px; justify-items: center; }
.shx-phone { position: relative; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; border-radius: 40px; padding: 12px; background: #1B2639; box-shadow: 0 30px 60px -30px rgba(39,54,79,.8), inset 0 0 0 2px #3a475e; }
.shx-phone canvas { width: 100%; height: 100%; display: block; border-radius: 30px; background: #27364F; }
.shx-play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.88); color: var(--acc-pink); cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: opacity .2s, transform .2s; }
.shx-play svg { width: 30px; height: 30px; } .shx-phone.on .shx-play { opacity: 0; transform: scale(.8); } .shx-phone:hover .shx-play { opacity: 1; }
.shx-ctl { display: flex; gap: 10px; align-items: center; } .shx-ctl small { font: 700 13px var(--font-display); color: var(--ink-3); }
.shx-tip { margin: 0; font-size: 12px; color: var(--ink-3); text-align: center; }
.shx-prog { position: relative; height: 34px; border-radius: 999px; background: #E9EDF2; box-shadow: var(--nm-in); overflow: hidden; }
.shx-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #F58AA7, var(--acc-pink)); transition: width .3s; }
.shx-prog span { position: relative; display: block; text-align: center; line-height: 34px; font-size: 13px; font-weight: 800; color: var(--ink); }
.shx-done { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: 20px; background: #DCF3EE; }
.shx-done video { width: 150px; aspect-ratio: 9 / 16; border-radius: 14px; background: #000; }
.shx-done > div { display: grid; gap: 6px; justify-items: start; } .shx-done small { color: var(--ink-2); font-size: 12.5px; }
.shx-f { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: start; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.shx-f > input, .shx-f > textarea { grid-column: 1; } .shx-f > .btn { grid-column: 2; grid-row: 2; }
@media (max-width: 1024px) { .shx-grid { grid-template-columns: 1fr; } .shx-right { position: static; order: -1; } .shx-phone { max-width: 260px; } }
@media (max-width: 560px) { .shx-meta { grid-template-columns: 1fr; } .shx-sc { grid-template-columns: 72px 1fr; } .shx-th { width: 72px; } .shx-done { grid-template-columns: 1fr; } }

/* v1.50.1 통합관리·지원 › 웹앱 */
.wa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.wa-card { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 26px 26px 60px 26px; background: var(--card); box-shadow: var(--nm); color: inherit; text-decoration: none; transition: transform .25s, box-shadow .25s; animation: fdIn .5s both; animation-delay: calc(var(--d) * 70ms); }
.wa-card:hover { transform: translateY(-4px); box-shadow: 14px 14px 30px var(--nm-d), -10px -10px 26px var(--nm-l); }
.wa-ic { width: 52px; height: 52px; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #4FD1B5, var(--main-deep)); box-shadow: 0 10px 20px -10px rgba(21,140,121,.7); }
.wa-card:nth-child(4n+2) .wa-ic { background: linear-gradient(140deg, #F58AA7, var(--acc-pink)); } .wa-card:nth-child(4n+3) .wa-ic { background: linear-gradient(140deg, #FCC56E, var(--acc-orange)); } .wa-card:nth-child(4n) .wa-ic { background: linear-gradient(140deg, #7CC0F3, var(--acc-blue)); }
.wa-ic svg { width: 24px; height: 24px; }
.wa-card b { font-size: 17px; margin-top: 4px; } .wa-card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.wa-tags { display: flex; flex-wrap: wrap; gap: 5px; } .wa-tags span { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: #E3E8EF; color: var(--ink-2); }
.wa-card small { font-size: 12px; color: var(--ink-3); }
.wa-go { position: absolute; right: 18px; bottom: 16px; display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; font-weight: 800; color: var(--main-deep); } .wa-go svg { width: 14px; height: 14px; transition: transform .2s; } .wa-card:hover .wa-go svg { transform: translateX(3px); }

/* v1.51.2 모든 팝업창 그림자: 원래 세기의 20% (흰 번짐 없이) */
.modal-panel, .rx-dlg-panel, .chat-panel, .drawer-panel, .adm-login-box, .api-box, .ops-box, .eb-panel, .viewer-box, .adm-pop, .adm-modal-panel, .sp-panel, .ntc-panel { box-shadow: 0 40px 80px -30px rgba(39,54,79,.11), 0 0 0 1px rgba(39,54,79,.04) !important; }

/* v1.52.0 작업 중 문구 어디서든: 시계 아이콘 + 깜빡임 (버튼은 .btn-busy) */
.busy-txt { display: inline-flex !important; align-items: center; gap: 8px; animation: busyBlink 1.4s ease-in-out infinite; }
.busy-txt::before { content: ""; flex: none; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; background: conic-gradient(currentColor 0 18%, transparent 18% 100%); animation: busyTick 1s steps(12) infinite; }
@keyframes busyBlink { 50% { opacity: .55; } }
li.busy-txt, td.busy-txt, div.busy-txt, p.busy-txt { display: flex !important; }
.btn-busy { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .busy-txt, .busy-txt::before { animation: none; } }

/* v1.53.0 쇼츠 설정: 소스 모드 · 해상도 · 이미지/영상 수 · 번역 자막 */
.shx-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.shx-opt { display: grid; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ink); }
.shx-opt > span { display: flex; gap: 6px; align-items: center; } .shx-opt i { font-style: normal; }
.shx-opt .sel { width: 100%; height: 44px; border-radius: 14px; font-size: 14px; font-weight: 600; }
.shx-opt small { font-size: 12px; font-weight: 500; color: var(--ink-3); line-height: 1.5; }
.shx-opt small .more { font-size: 12px; }
#shModeHint:has(button) { color: #B7791F; }
.shx-th video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shx-th { aspect-ratio: auto; }
.shx-tr { background-color: #FFF8E1 !important; font-size: 13px !important; }
.shx-credit { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
.shx-fs details input { width: 100%; }
@media (max-width: 560px) { .shx-opts { grid-template-columns: 1fr; } }

/* v1.54.0 계정 표: 승인 · 계정 기록 팝업 */
.acc-row { cursor: pointer; } .acc-row:hover td { background: #E6EBF1; } .acc-row:focus-visible { outline: 3px solid var(--main); outline-offset: -3px; }
.acc-decide { background: #FFF6E5 !important; }
.acc-fel-pick { display: grid; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.acc-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.acc-log li { display: grid; grid-template-columns: 118px auto 1fr; gap: 4px 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: #E9EDF2; font-size: 13px; }
.acc-log li.bad { background: #FCE8EE; }
.acc-log time { font: 600 12px var(--font-display); color: var(--ink-3); }
.acc-log b { font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.acc-log small { grid-column: 3; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 560px) { .acc-log li { grid-template-columns: 1fr auto; } .acc-log b, .acc-log small { grid-column: 1 / -1; } }

/* 쇼츠: 장면 카드의 나레이션 · 번역 자막 칸은 절반 높이(늘리려면 모서리를 끌기) */
.shx-fs textarea { min-height: 0 !important; height: 36px; padding: 7px 14px !important; line-height: 1.5; resize: vertical; }
/* 쇼츠: 나레이션(ElevenLabs) 설정 */
.shx-voice { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--bg); box-shadow: inset 2px 2px 6px rgba(163,177,198,.35), inset -2px -2px 6px rgba(255,255,255,.7); }
.shx-voice h4 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.shx-voice h4 small { font-weight: 500; color: var(--ink-3); }
.shx-voice .btns { gap: 6px; align-items: center; }

/* 쇼츠: 모션 그래픽 체크 */
.shx-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--bg); box-shadow: inset 2px 2px 6px rgba(163,177,198,.35), inset -2px -2px 6px rgba(255,255,255,.7); cursor: pointer; }
.shx-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: #2EB8A0; flex: none; }
.shx-check span { display: grid; gap: 2px; }
.shx-check b { font-size: 14px; }
.shx-check small { color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.shx-saved { color: #158C79; font-weight: 600; }
/* 쇼츠: 제작 히스토리 */
.shx-hist { margin-top: 22px; }
.shx-htbl { width: 100%; }
.shx-htbl td { vertical-align: middle; }
.shx-htbl .nw { white-space: nowrap; }
.shx-htitle small { display: block; color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.shx-htbl .btn-sm { white-space: nowrap; }
.shx-hdel { color: #D64545 !important; }
.shx-hempty { text-align: center; color: var(--ink-3); padding: 28px 10px !important; }
.shx-pager { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.shx-pager button { min-width: 36px; height: 36px; border: 0; border-radius: 12px; background: var(--bg); box-shadow: 3px 3px 8px rgba(163,177,198,.45), -3px -3px 8px rgba(255,255,255,.8); font-weight: 700; color: var(--ink-2); cursor: pointer; }
.shx-pager button.on { background: #2EB8A0; color: #fff; box-shadow: none; }
.shx-pager button:disabled { opacity: .4; cursor: default; }
.shx-pager small { margin-left: 8px; color: var(--ink-3); }
@media (max-width: 720px) { .shx-htbl th:nth-child(2), .shx-htbl td:nth-child(2) { display: none; } }

/* 쇼츠: 목소리 미리듣기 */
.shx-vsel { display: flex; gap: 8px; align-items: center; }
.shx-vsel .sel { flex: 1; min-width: 0; }
.shx-vplay { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: #158C79; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 3px 3px 8px rgba(163,177,198,.5), -3px -3px 8px rgba(255,255,255,.85); transition: transform .15s; }
.shx-vplay svg { width: 18px; height: 18px; }
.shx-vplay:hover { transform: scale(1.06); }
.shx-vplay.on { background: #2EB8A0; color: #fff; box-shadow: 0 0 0 4px rgba(46,184,160,.22); animation: shxPulse 1.2s ease-in-out infinite; }
.shx-vplay.wait { animation: shxSpin .9s linear infinite; }
@keyframes shxPulse { 50% { box-shadow: 0 0 0 9px rgba(46,184,160,0); } }
@keyframes shxSpin { to { transform: rotate(360deg); } }
.shx-vbox .modal-panel { width: min(680px, 100%); max-height: min(86vh, 820px); display: flex; flex-direction: column; gap: 10px; padding: 24px; position: relative; }
.shx-vbh { display: flex; justify-content: space-between; align-items: center; }
.shx-vbh h2 { margin: 0; font-size: 20px; }
.shx-vx { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-3); }
.shx-vfl { display: grid; gap: 8px; }
.shx-vfl input { width: 100%; padding: 11px 14px; border-radius: 14px; border: 0; background: var(--bg); box-shadow: inset 2px 2px 6px rgba(163,177,198,.4), inset -2px -2px 6px rgba(255,255,255,.75); font: inherit; }
.shx-vlist { list-style: none; margin: 0; padding: 4px 2px; overflow: auto; display: grid; gap: 8px; }
.shx-vlist li { display: grid; grid-template-columns: 42px 42px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--bg); }
.shx-vlist li.cur { outline: 2px solid #2EB8A0; }
.shx-vlist li div { min-width: 0; display: grid; }
.shx-vlist li b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-vlist li small { color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-vlist .shx-vplay { width: 38px; height: 38px; }
.shx-vlist .shx-vplay.ko { font-size: 14px; color: #D2557A; }
.shx-vnone { text-align: center; color: var(--ink-3); display: block !important; }
@media (max-width: 560px) { .shx-vlist li { grid-template-columns: 38px 38px 1fr; } .shx-vlist li > .btn { grid-column: 1 / -1; } }

/* 쇼츠: 장면별 내용 시각화 편집 */
.shx-vis { border-radius: 14px; background: rgba(46,184,160,.08); padding: 8px 12px; }
.shx-vis summary { font-size: 12.5px; font-weight: 700; color: #158C79; cursor: pointer; }
.shx-visf { display: grid; grid-template-columns: 140px 1fr; gap: 8px; margin: 8px 0 6px; }
.shx-visf .sel { padding: 8px 12px; font-size: 13px; }
.shx-visf input { width: 100%; min-width: 0; }
.shx-vis textarea { width: 100%; height: auto !important; min-height: 64px !important; font-size: 13px; }
@media (max-width: 560px) { .shx-visf { grid-template-columns: 1fr; } }

/* ===== AI 팟캐스트 ===== */
.pcx-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.pcx-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 720px; overflow: auto; }
.pcx-l { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: start; padding: 10px; border-radius: 18px; background: #E9EDF2; transition: box-shadow .2s, background .2s; }
.pcx-l.sp-B { background: #EEF0F8; }
.pcx-l.on { box-shadow: 0 0 0 2px #2EB8A0; background: #E3F6F2; }
.pcx-l textarea { min-height: 0 !important; height: auto; padding: 8px 12px !important; line-height: 1.6; resize: vertical; }
.pcx-sp { border: 0; border-radius: 12px; padding: 8px 6px; font: inherit; font-size: 12.5px; font-weight: 800; color: #fff; background: #2EB8A0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcx-l.sp-B .pcx-sp { background: #6C63D9; }
.pcx-sp:disabled { cursor: default; }
.pcx-la { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pcx-la .shx-vplay { width: 34px; height: 34px; }
.pcx-la .shx-vplay svg { width: 15px; height: 15px; }
.pcx-la small { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.pcx-x { border: 0; background: none; color: var(--ink-3); font-size: 18px; cursor: pointer; line-height: 1; }
.pcx-player { display: grid; gap: 14px; padding: 18px; width: 100%; }
.pcx-cover { position: relative; aspect-ratio: 1; border-radius: 26px; overflow: hidden; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; color: #fff;
  background: radial-gradient(circle at 80% 15%, rgba(255,225,90,.55), transparent 40%), linear-gradient(150deg, #2EB8A0, #158C79 50%, #27364F); }
.pcx-mic { position: absolute; top: 20px; left: 22px; font-size: 40px; }
.pcx-cover b { font-size: 21px; line-height: 1.35; word-break: keep-all; }
.pcx-cover small { opacity: .85; font-weight: 600; }
.pcx-wave { position: absolute; top: 28px; right: 22px; display: flex; gap: 3px; align-items: center; height: 40px; }
.pcx-wave i { width: 4px; height: 30%; border-radius: 3px; background: rgba(255,255,255,.75); }
.pcx-player.playing .pcx-wave i { animation: pcxWave .9s ease-in-out infinite; }
.pcx-wave i:nth-child(3n) { animation-delay: -.3s !important; } .pcx-wave i:nth-child(3n+1) { animation-delay: -.6s !important; } .pcx-wave i:nth-child(4n) { animation-duration: 1.2s !important; }
@keyframes pcxWave { 0%, 100% { height: 20%; } 50% { height: 100%; } }
.pcx-player audio { width: 100%; }
.pcx-now { min-height: 120px; padding: 14px; border-radius: 18px; background: var(--bg); box-shadow: var(--nm-in); display: grid; gap: 6px; align-content: start; }
.pcx-now p { margin: 0; font-size: 14.5px; line-height: 1.7; }
.pcx-now small { color: var(--ink-3); font-size: 12px; }
.pcx-who { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: #2EB8A0; }
.pcx-who.sp-B { background: #6C63D9; }
.pcx-done { grid-template-columns: 64px 1fr !important; }
.pcx-ok { font-size: 40px; text-align: center; }
.pcx-done > div { display: grid; gap: 6px; justify-items: start; }
@media (max-width: 980px) { .pcx-grid { grid-template-columns: 1fr; } .pcx-right { position: static; } .pcx-player { grid-template-columns: minmax(0, 1fr); } .pcx-cover { aspect-ratio: auto; min-height: 170px; } }
@media (max-width: 560px) { .pcx-l { grid-template-columns: 1fr auto; } .pcx-sp { grid-column: 1 / -1; justify-self: start; padding: 6px 14px; } }

/* ===== AI 정책 브리프 ===== */
.brx-grid { display: grid; gap: 16px; }
.brx-view { max-height: 900px; overflow: auto; border-radius: 18px; background: #eef1f5; padding: 4px 12px; }
.brx-view .brd { margin: 16px auto; font-size: 14.5px; line-height: 1.8; color: #1d2433; }
#brMd { width: 100%; font: 13.5px/1.7 ui-monospace, "D2Coding", Consolas, monospace !important; min-height: 520px; }
.brx-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.brx-out { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 16px 18px; border: 0; border-radius: 20px; background: var(--bg); box-shadow: 4px 4px 12px rgba(163,177,198,.45), -4px -4px 12px rgba(255,255,255,.85); cursor: pointer; font: inherit; color: var(--ink); transition: transform .15s; }
.brx-out:hover { transform: translateY(-2px); }
.brx-out b { font-size: 20px; letter-spacing: .04em; color: #158C79; }
.brx-out[data-brout="hwpx"] b { color: #2F6BD8; } .brx-out[data-brout="pdf"] b { color: #D64545; }
.brx-out small { color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.brx-out:disabled { opacity: .6; }
.brx-dls { display: inline-flex; gap: 4px; }
@media (max-width: 720px) { .brx-outs { grid-template-columns: 1fr; } }

/* ===== KIHSS 소식 › YouTube 쇼츠 (5열 × 5행) ===== */
.yts-grid.pg5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.yts-card { display: grid; gap: 6px; text-align: left; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; position: relative; }
.yts-thumb { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #1b2433; box-shadow: 6px 6px 16px rgba(163,177,198,.5), -4px -4px 12px rgba(255,255,255,.8); }
.yts-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .35s; }
.yts-card:hover .yts-thumb img { transform: scale(1.08); }
.yts-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45)); }
.yts-play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.88); color: #E6322F; z-index: 1; transition: transform .2s; }
.yts-play svg { width: 24px; height: 24px; margin-left: 3px; }
.yts-card:hover .yts-play { transform: scale(1.1); }
.yts-thumb em { position: absolute; left: 10px; bottom: 10px; z-index: 1; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; padding: 3px 9px; border-radius: 999px; background: #E6322F; }
.yts-card b { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yts-card small { color: var(--ink-3); font-size: 12px; }
.yts-box .modal-bg { background: rgba(10,14,22,.78) !important; }
.yts-panel { position: relative; display: grid; grid-template-columns: auto minmax(0, 300px); gap: 20px; align-items: end; z-index: 1; }
.yts-frame { height: min(84vh, 780px); aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.yts-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.yts-meta { color: #fff; display: grid; gap: 8px; padding-bottom: 8px; }
.yts-meta b { font-size: 18px; line-height: 1.45; }
.yts-meta p { margin: 0; opacity: .85; font-size: 14px; line-height: 1.7; }
.yts-meta a { color: #FFE15A; font-weight: 700; font-size: 14px; }
.yts-x { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
@media (max-width: 1100px) { .yts-grid.pg5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .yts-grid.pg5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yts-panel { grid-template-columns: 1fr; justify-items: center; } .yts-frame { height: min(74vh, 680px); } .yts-meta { text-align: center; padding: 0 12px; } .yts-x { top: -12px; right: -6px; } }
@media (max-width: 560px) { .yts-grid.pg5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* YouTube 쇼츠: 카드 안 embed 재생 */
.yts-card { cursor: default; }
.yts-thumb { cursor: pointer; }
.yts-thumb.on { cursor: default; }
.yts-thumb.on::after { display: none; }
.yts-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.yts-thumb:focus-visible { outline: 3px solid #2EB8A0; outline-offset: 3px; }
/* ===== KIHSS 소식 › KIHSS 팟캐스트 (5열 × 5행) ===== */
.pod-grid.pg5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.pod-card { display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 24px; background: var(--card); box-shadow: 6px 6px 16px rgba(163,177,198,.45), -4px -4px 12px rgba(255,255,255,.8); }
.pod-cover { position: relative; aspect-ratio: 1; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 80% 15%, rgba(255,225,90,.5), transparent 42%), linear-gradient(150deg, #2EB8A0, #158C79 55%, #27364F); }
.pod-cover.c1 { background: radial-gradient(circle at 80% 15%, rgba(255,200,120,.5), transparent 42%), linear-gradient(150deg, #6C63D9, #4A43A8 55%, #27364F); }
.pod-cover.c2 { background: radial-gradient(circle at 80% 15%, rgba(255,225,90,.45), transparent 42%), linear-gradient(150deg, #EF5D85, #B83A63 55%, #27364F); }
.pod-cover.c3 { background: radial-gradient(circle at 80% 15%, rgba(190,240,255,.5), transparent 42%), linear-gradient(150deg, #3D9BE9, #2768B0 55%, #27364F); }
.pod-ep { position: absolute; top: 12px; left: 14px; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.22); }
.pod-mic { position: absolute; top: 8px; right: 12px; font-style: normal; font-size: 26px; }
.pod-cover b { font-size: 15px; line-height: 1.4; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pod-cover small { font-size: 11px; opacity: .85; font-weight: 600; }
.pod-card audio { width: 100%; height: 40px; }
.pod-meta { display: grid; gap: 4px; }
.pod-meta small { color: var(--ink-3); font-size: 12px; }
.pod-meta .pod-ev { color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-meta details summary { font-size: 12px; font-weight: 700; color: #158C79; cursor: pointer; }
.pod-meta details p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.pc-pub { background: #2EB8A0 !important; color: #fff !important; }
.pc-pubbed { background: #E3F6F2 !important; color: #158C79 !important; }
@media (max-width: 1100px) { .pod-grid.pg5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .pod-grid.pg5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pod-grid.pg5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ===== AI 프로시딩 (단순판) ===== */
.prx-ses, .prx-paps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prx-ses li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 16px; background: #E9EDF2; }
.prx-ses input { width: 100%; padding: 9px 12px !important; }
.prx-ses small { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.prx-ses span, .prx-pa { display: flex; gap: 4px; }
.prx-ses span button, .prx-pa button { width: 30px; height: 30px; border: 0; border-radius: 10px; background: var(--bg); box-shadow: 2px 2px 6px rgba(163,177,198,.45), -2px -2px 6px rgba(255,255,255,.8); cursor: pointer; font-weight: 800; color: var(--ink-2); }
.prx-ses span button:disabled { opacity: .35; cursor: default; }
.prx-no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #2EB8A0; color: #fff; font-size: 13px; }
.prx-pap { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 10px; border-radius: 18px; background: #E9EDF2; }
.prx-pap .prx-no { background: #27364F; }
.prx-pf { display: grid; grid-template-columns: 170px 1fr; gap: 6px 8px; min-width: 0; }
.prx-pf .sel { height: 40px; font-size: 13px; }
.prx-pf input { width: 100%; padding: 8px 12px !important; }
.prx-pf input[data-prp="title"] { font-weight: 700; }
.prx-pf input[data-prp="authors"] { grid-column: 1; }
.prx-pf small { grid-column: 1 / -1; color: var(--ink-3); font-size: 11.5px; }
.prx-pa { flex-direction: column; }
.prx-drop { display: grid; justify-items: center; gap: 6px; padding: 26px 18px; border-radius: 22px; border: 2px dashed rgba(46,184,160,.45); background: rgba(46,184,160,.06); text-align: center; cursor: pointer; transition: background .15s; }
.prx-drop.over, .prx-drop:hover { background: rgba(46,184,160,.14); }
.prx-drop .drop-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #2EB8A0; color: #fff; }
.prx-drop .drop-icon svg { width: 22px; height: 22px; }
.prx-drop small { color: var(--ink-3); font-size: 12px; }
.prx-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prx-flow span { padding: 6px 12px; border-radius: 999px; background: #27364F; color: #fff; font-size: 12.5px; font-weight: 700; }
.prx-flow span.pp { background: #E3F6F2; color: #158C79; }
.prx-flow i { font-style: normal; color: var(--ink-3); }
@media (max-width: 720px) { .prx-pf { grid-template-columns: 1fr; } .prx-pf input[data-prp="authors"] { grid-column: auto; } .prx-ses li { grid-template-columns: 30px 1fr auto; } .prx-ses small { display: none; } }

/* AI 프로시딩: 양식 고르기 */
.prx-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.prx-sty { position: relative; display: grid; gap: 4px; justify-items: start; text-align: left; padding: 10px 10px 12px; border: 0; border-radius: 18px; background: var(--bg); cursor: pointer; font: inherit; color: var(--ink);
  box-shadow: 3px 3px 9px rgba(163,177,198,.45), -3px -3px 9px rgba(255,255,255,.85); transition: transform .15s; }
.prx-sty:hover { transform: translateY(-2px); }
.prx-sty.on { box-shadow: 0 0 0 3px #2EB8A0, 3px 3px 9px rgba(163,177,198,.45); }
.prx-sty b { font-size: 13px; } .prx-sty small { font-size: 11px; color: var(--ink-3); line-height: 1.45; }
.prx-mini { width: 100%; aspect-ratio: 210 / 297; border-radius: 8px; overflow: hidden; background: #fff; display: grid; grid-template-rows: 7% 38% 2% 1fr 9%; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.prx-mini i { display: block; } .prx-mini .b1 { background: var(--b); } .prx-mini .b2 { background: var(--p); display: grid; align-content: center; justify-items: center; gap: 6%; }
.prx-mini .b2 em { display: block; width: 62%; height: 7%; min-height: 4px; background: rgba(255,255,255,.85); border-radius: 2px; } .prx-mini .b2 em + em { width: 40%; opacity: .6; }
.prx-mini .b3 { background: var(--a); } .prx-mini .b4 { background: #fff; } .prx-mini .b5 { background: var(--d); }
.prx-mini.cust { display: grid; place-items: center; align-content: center; gap: 6px; background: repeating-linear-gradient(45deg, #EEF1F5, #EEF1F5 8px, #E6EAF0 8px, #E6EAF0 16px); color: var(--ink-3); }
.prx-mini.cust svg { width: 24px; height: 24px; } .prx-mini.cust em { font-style: normal; font-size: 12px; font-weight: 700; }
.prx-sdel { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; color: #D64545; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); }