/* agora design system — 토큰 기반 듀얼 테마
   기본(다크): agora 플랫폼 · .theme-light(화이트): 학회 사이트 */

/* 요소 리셋(*, img, a, button, svg, h1–h3)은 v5.css §1로 옮겼다 — :where() 명시도 0이라 v5 컴포넌트 기본형이 리셋에 지지 않는다 */

/* LaTeX 서체 — Latin Modern (latex.css 배포본) */
@font-face {
  font-family: 'Latin Modern';
  src: url('https://cdn.jsdelivr.net/npm/latex.css@1.10.0/fonts/LM-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Latin Modern';
  src: url('https://cdn.jsdelivr.net/npm/latex.css@1.10.0/fonts/LM-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Latin Modern';
  src: url('https://cdn.jsdelivr.net/npm/latex.css@1.10.0/fonts/LM-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'Cal Sans';
  src: url('https://cdn.jsdelivr.net/npm/cal-sans@1.0.1/fonts/webfonts/CalSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── 토큰 — v5.css(먼저 로드)의 별칭. 색·반경 리터럴은 v5.css에만 둔다(SPEC §2.12) ──
   :root = 레거시 다크 기본값. body에 theme-light가 없는 화면(Studio sx-page · 체크인 호스트 ck-host)만 이 값을 쓴다 */
:root {
  --bg: var(--d-bg);
  --panel: #0e0e11;
  --card: #101014;
  --card-hover: #141419;
  --border: var(--d-line);
  --border-2: #2c2c33;
  --text: var(--d-fg);
  --muted: var(--d-fg-2);
  --dim: var(--d-fg-3);
  --hover: var(--d-wash-2);
  --ring: rgba(250, 250, 250, .09);
  --chip-bg: var(--d-wash-2);
  --prose: var(--d-fg);
  --sb-bg: var(--d-bg);
  --tb-bg: rgba(9, 9, 11, .8);
  --glow: var(--d-wash-2);
  --danger-fg: #fca5a5;
  --danger-bd: rgba(248, 113, 113, .3);
  --card-shadow: none;
  --pop-shadow: var(--e-d);
  --accent: var(--text);
  --accent-soft: var(--chip-bg);
  --accent-glow: rgba(0, 0, 0, .3);
  --primary: var(--text);
  --primary-fg: var(--bg);
  --radius: var(--r-md);
  --mono: var(--font-mono);
  --font-display: var(--font);
}

.theme-light {
  --bg: var(--paper);
  --panel: var(--canvas);
  --card: var(--paper);
  --card-hover: var(--canvas);
  --border: var(--line);
  --border-2: var(--line-2);
  --text: var(--ink);
  --muted: var(--ink-2);
  --dim: var(--ink-3);
  --hover: var(--wash-2);
  --ring: rgba(23, 21, 15, .08);
  --chip-bg: var(--wash-2);
  --prose: var(--ink);
  --sb-bg: var(--canvas);
  --tb-bg: var(--glass);
  --glow: var(--wash-2);
  --danger-fg: var(--danger);
  --danger-bd: var(--danger-line);
  --card-shadow: none;
  --pop-shadow: var(--e-3);
  --accent-glow: rgba(23, 21, 15, .18);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
/* 보호 구역(랜딩 히어로·스토리) — v5 전역 조판(body 1.65 · keep-all · overflow-wrap · text-wrap)이 닿기 전 값으로 고정(결과 픽셀 동일, SPEC §6).
   스토리 하늘 붓질은 글자 상자를 피해 칠해지므로 줄바꿈 하나가 바뀌어도 그림이 달라진다. 구역 안의 개별 규칙(.xhero-title keep-all 등)은 그대로 이긴다 */
.xhero, .story { line-height: 1.6; word-break: normal; overflow-wrap: normal; line-break: auto; }
:where(.xhero, .story) :is(h1, h2, h3, p, li, dd) { text-wrap: wrap; }
/* 플랫폼 헤더 — 스토리 하늘 붓질이 헤더 글자 상자까지 피해 칠해진다(landing.js textBoxes). 헤더를 다시 짜는 P2 전까지 옛 줄 높이·자간 그대로 */
.hd { line-height: 1.6; }
.hd .btn { letter-spacing: -0.01em; }
::selection { background: rgba(23, 21, 15, .14); }

.container { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 680px; margin: 0 auto; padding: 0 20px; width: 100%; }


/* ── 버튼 — v5 §4.1: md 40 · sm 32 · lg 48, 알약, 500. 누르면 .97로 줄고 스프링으로 돌아온다 ── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h-md); padding: 0 18px;
  background: var(--primary); color: var(--primary-fg);
  border-radius: var(--r-pill); font-weight: 500; font-size: var(--t-ui); letter-spacing: -0.01em;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
  white-space: nowrap;
}
.btn:active { scale: var(--m-press); transition-duration: var(--dur-1); transition-timing-function: var(--ease-out); }
.btn svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
/* btn-ghost = v5 보조(secondary): 워시 채움, 테두리 없음 */
.btn-ghost { background: var(--wash-2); color: var(--text); }
.btn-danger { background: transparent; color: var(--danger-fg); box-shadow: inset 0 0 0 1px var(--danger-bd); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--primary) 88%, #000); }
  .btn-ghost:hover { background: var(--wash-3); }
  .btn-danger:hover { background: var(--danger-wash); }
}
.btn:disabled, .btn[aria-disabled="true"] { background: var(--wash-2); color: var(--ink-4); box-shadow: none; cursor: default; scale: 1; }
.btn-sm { height: var(--h-sm); padding: 0 14px; font-size: var(--t-footnote); }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { height: var(--h-lg); padding: 0 22px; font-size: var(--t-body); }
.btn-lg svg { width: var(--ic-md); height: var(--ic-md); }
.btn-block { width: 100%; }

/* 아이콘 버튼 — 원형 32, 누르는 자리 44(::after) */
.icon-btn {
  position: relative; width: var(--h-sm); height: var(--h-sm); border-radius: 50%; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
.icon-btn::after { content: ''; position: absolute; inset: -6px; }
.icon-btn:active { scale: var(--m-press-icon); transition-duration: var(--dur-1); }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--wash-2); color: var(--text); } }

/* ── 칩 — v5 §4.5 상태 칩: 24h, 12/500, 워시 ── */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h-xs); padding: 0 10px;
  border: 0; border-radius: var(--r-pill); background: var(--wash-2);
  font-size: var(--t-caption); font-weight: 500; color: var(--ink-2);
  letter-spacing: 0; white-space: nowrap;
}
.chip-pin { color: #fff; background: var(--ink); }
.chip-soft { background: var(--wash-2); }

/* ── 폼 — v5 §4.2: 입력 48 · r12 · 흰 바탕 · 포커스 잉크 테두리 + 링 ── */
.field { margin-bottom: var(--s-6); }
.field label { display: block; font-size: var(--t-footnote); font-weight: 600; color: var(--text); margin-bottom: var(--s-2); }
.field .hint, .hint { font-size: var(--t-footnote); color: var(--dim); margin-top: var(--s-2); }
.input, textarea.input, select.input {
  width: 100%; background: #fff; color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  height: var(--h-lg); padding: 0 16px; font-size: var(--t-body); font-family: var(--font);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  appearance: none;
}
textarea.input { height: auto; min-height: 120px; padding: 12px 16px; line-height: 1.6; resize: vertical; }
.input:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring-input); }
@media (hover: hover) and (pointer: fine) { .input:hover:not(:focus):not(:disabled) { border-color: var(--line-3); } }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: var(--ring-danger); }
.input:disabled { background: var(--canvas); color: var(--ink-4); }
.input::placeholder { color: var(--ink-3); }
select.input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6965' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 16px center; background-size: 12px 12px; background-repeat: no-repeat;
}
input[type="file"].input { padding: 8px 12px; height: auto; font-size: var(--t-footnote); color: var(--muted); }
.input-prefix { display: flex; align-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.input-prefix > span { padding: 0 0 0 16px; color: var(--dim); font-size: var(--t-ui); font-family: var(--mono); white-space: nowrap; }
.input-prefix > input { border: 0; background: transparent; height: 46px; padding: 0 16px 0 4px; flex: 1; color: var(--text); font-size: var(--t-body); font-family: var(--mono); }
.input-prefix > input:focus { outline: none; }
.input-prefix:focus-within { border-color: var(--ink); box-shadow: var(--ring-input); }
@media (max-width: 699px) { .input, textarea.input, select.input, .input-prefix > input { font-size: 16px; } }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; max-width: 420px; }
.swatches label { position: relative; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; }
.swatches .sw { display: block; width: 30px; height: 30px; border-radius: 999px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .12s, border-color .12s, box-shadow .12s; }
.swatches label:hover .sw { transform: scale(1.08); }
.swatches input:checked + .sw { border-color: #fff; box-shadow: 0 0 0 2px var(--text); transform: scale(1.12); }
/* 직접 고르기 — 무지개 링, 고른 뒤엔 그 색으로 */
.sw-custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sw-rainbow { background: conic-gradient(from 0deg, #e11d48, #d97706, #4d7c0f, #059669, #0284c7, #4338ca, #7c3aed, #e11d48); }
.sw-custom input[type="radio"]:checked + .sw-rainbow { background: var(--sw); }

.form-err {
  background: var(--danger-wash); border: 1px solid var(--danger-bd); color: var(--danger-fg);
  border-radius: var(--r-md); padding: 12px 16px; font-size: var(--t-ui); margin-bottom: var(--s-6);
}

/* ── 플랫폼 헤더/푸터 (다크 전용 페이지) ── */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: var(--tb-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.hd-in { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.hd-brand { display: flex; align-items: center; gap: 9px; font-family: 'Cal Sans', var(--font); font-weight: 600; font-size: 21px; letter-spacing: 0; }
.ft-brand, .sb-powered strong, .ft-powered strong { font-family: 'Cal Sans', var(--font); font-weight: 600; }
/* 학회 이름도 Cal Sans 워드마크 (한글 이름은 Pretendard로 폴백) */
.sb-ident strong, .rcard-ident strong { font-family: 'Cal Sans', var(--font); font-weight: 600; letter-spacing: .01em; }
.shero h1 { font-family: 'Cal Sans', var(--font); font-weight: 600; }
.profile-name, .tb-title { font-family: var(--font); }
.brand-mark { width: 26px; height: 26px; display: inline-block; flex: none; }
.hd-link { color: var(--muted); font-size: 14px; font-weight: 500; padding: 8px 10px; }
.hd-link:hover { color: var(--text); }
.hd-actions { display: flex; align-items: center; gap: 10px; }

.ft { border-top: 1px solid var(--border); margin-top: 96px; }
.ft-in { display: flex; align-items: center; justify-content: space-between; padding: 28px 24px; gap: 12px; flex-wrap: wrap; }
.ft-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ft-dim { color: var(--dim); font-size: 13.5px; }

/* 아바타 — v5 §2.4: 24·32·40·64·96, 이니셜은 고정 크기(--av-fs, ui.js avatar()가 준다) 600 · 워시 바탕 · 잉크-2 */
.avatar {
  width: var(--av, 32px); height: var(--av, 32px); border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-size: var(--av-fs, 13px); font-weight: 600; line-height: 1; letter-spacing: 0;
}
.avatar-txt { background: color-mix(in srgb, var(--ink) 8%, #fff); color: var(--ink-2); } /* = 흰 바탕 위 --wash-3을 불투명하게 — 겹친 스택·어두운 히어로 위에서도 같은 원 */
/* 팝오버·메뉴 — v5 §4.7: min 200 · r16 · 패딩 6 · 헤어라인 · e-3. 트리거 모서리에서 피어난다 */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: flex; border-radius: 999px; }
.menu summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .menu summary:hover { outline: 2px solid var(--line-2); outline-offset: 2px; } }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 6px; box-shadow: var(--pop-shadow); z-index: var(--z-popover);
  transform-origin: top right;
}
details[open] > .menu-pop { animation: m-popover-in var(--dur-2) var(--ease-out); }
.menu-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.menu-head strong { display: block; font-size: var(--t-ui); font-weight: 600; }
.menu-head span { font-size: var(--t-caption); color: var(--dim); }
.menu-pop a, .menu-pop button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; text-align: left; padding: 0 12px;
  border-radius: var(--r-sm); font-size: var(--t-ui); font-weight: 500; color: var(--muted);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
@media (pointer: coarse) { .menu-pop a, .menu-pop button { min-height: 44px; } }
@media (hover: hover) and (pointer: fine) { .menu-pop a:hover, .menu-pop button:hover { background: var(--hover); color: var(--text); } }

/* ── 토스트 — v5 §4.7: 슬롯 하나, 하단 가운데. 가운데 정렬은 margin auto(transform 금지) → 등장 m-toast가 x를 건드리지 않는다 ── */
.toast {
  position: fixed; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom));
  width: fit-content; max-width: calc(100vw - 32px); margin-inline: auto;
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  background: var(--ink); color: #fff; font-size: var(--t-ui); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em;
  border-radius: var(--r-pill); z-index: var(--z-toast);
  box-shadow: var(--e-3);
  animation: m-toast var(--dur-3) var(--spring);
  transition: opacity var(--dur-2) var(--ease-in);
}
.toast svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
.toast-err { background: #fff; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-line), var(--e-3); }
.toast.hide, .toast.is-out { opacity: 0; }

/* ── 사이드바 앱 셸 (학회) — Cal 셸: 회색 캔버스 + 흰 라운드 패널 ── */
body.has-sb { background: var(--panel); }
.app { display: flex; min-height: 100vh; }
.sb {
  width: 280px; flex: none;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 14px 12px 14px 14px;
}
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 14px 6px; }
.sb-ident { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sb-ident strong { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; flex: none; }
.sb-logo-txt { background: var(--text); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.sb .menu-pop { top: calc(100% + 8px); }
.sb-nav { display: flex; flex-direction: column; gap: 1px; }
.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 8px;
  color: var(--muted); font-size: 13.5px; font-weight: 500;
  transition: background .12s, color .12s;
}
.sb-link svg { width: 15px; height: 15px; opacity: .8; flex: none; }
.sb-link:hover { background: var(--hover); color: var(--text); }
.sb-link.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sb-link.on svg { opacity: 1; color: var(--accent); }
.sb-lock { margin-left: auto; display: inline-flex; opacity: .45; }
.sb-lock svg { width: 12px; height: 12px; }
/* 볼트 옐로우 — Mr Electric Blue의 번개 */
.badge-bolt {
  margin-left: auto; flex: none;
  background: #ffd21e; color: #4a3800;
  font-family: var(--mono); font-weight: 700; font-size: 10.5px;
  border-radius: 999px; padding: 1.5px 7px; line-height: 1.5;
}
.sb-link.on .badge-bolt { background: #ffd21e; }
.sb-sep { border-top: 1px solid var(--border); margin: 12px 8px; }
.sb-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sb-powered { text-align: center; font-size: 11px; color: var(--dim); padding: 4px 2px 0; }
.sb-powered strong { font-weight: 700; }
.sb-powered:hover { color: var(--text); }
.sb-backdrop { display: none; }

/* 고정 프레임 — 문서 대신 패널 내부에서 스크롤 */
body.has-sb { overflow: hidden; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px 12px 12px 0; height: 100vh; }
.panel {
  flex: 1; min-height: 0; background: var(--bg);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow-y: auto; scrollbar-width: thin;
}
.topbar { display: none; }
.tb-burger { display: inline-flex; width: 34px; height: 34px; border-radius: 8px; color: var(--muted); align-items: center; justify-content: center; }
.tb-burger svg { width: 18px; height: 18px; }
.tb-burger:hover { background: var(--hover); color: var(--text); }
.tb-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.tb-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-society { color: var(--dim); font-weight: 500; }
.tb-sep { color: var(--border-2); }
.tb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.page { padding-bottom: 72px; }

/* ── 학회 홈 히어로 ───────────────────── */
.shero { position: relative; text-align: center; padding: 88px 24px 64px; overflow: hidden; }
.shero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(780px 360px at 50% -140px, var(--accent-soft), transparent 72%),
    radial-gradient(var(--border-2) 1px, transparent 1.3px);
  background-size: auto, 26px 26px;
  mask-image: linear-gradient(to bottom, #000 58%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent);
}
.shero > * { position: relative; }
.shero-logo { width: 96px; height: 96px; margin: 0 auto 22px; object-fit: contain; }
.shero .eyebrow { margin-bottom: 22px; }
.shero h1 { font-size: clamp(42px, 6.6vw, 72px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.05; }
.shero .tagline { color: var(--muted); font-size: 17.5px; margin-top: 14px; }
.shero .cta { margin-top: 30px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero-social { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 24px; color: var(--muted); font-size: 13.5px; }
.avatar-stack { display: flex; }
.avatar-stack > span { display: inline-flex; border: 2px solid var(--bg); border-radius: 999px; margin-left: -9px; }
.avatar-stack > span:first-child { margin-left: 0; }

/* 라이브 점 */
@keyframes pulsedot { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 75% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.eyebrow-live::before { background: #3fa9e8; animation: pulsedot 2.2s ease-out infinite; box-shadow: 0 0 0 0 rgba(63, 169, 232, .45); }

/* ── 벤토 그리드 ──────────────────────── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 7px;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 22px;
  box-shadow: var(--card-shadow); min-height: 158px;
}
.b-span2 { grid-column: span 2; }
.bcard-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; font-weight: 700; color: var(--accent); }
.bcard-title { font-weight: 700; font-size: 17px; line-height: 1.4; letter-spacing: -0.02em; }
.bcard-sub { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.bcard-foot { margin-top: auto; padding-top: 10px; color: var(--dim); font-size: 12.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bcard-arrow { color: var(--accent); opacity: .8; font-weight: 600; }
.bcard-accent { background: linear-gradient(135deg, var(--accent-soft), transparent 62%), var(--card); }
.bcard-img { padding: 0; justify-content: flex-end; background-size: cover; background-position: center top; min-height: 200px; }
.bcard-img .bcard-overlay { padding: 16px 18px; background: linear-gradient(transparent, rgba(9, 9, 11, .74)); }
.bcard-img .bcard-eyebrow { color: rgba(255, 255, 255, .75); }
.bcard-img .bcard-title { color: #fff; font-size: 15px; }
.bcard-cta {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary), #fff 12%), var(--primary));
  border-color: transparent; color: var(--primary-fg); justify-content: center; align-items: center; text-align: center;
  box-shadow: 0 10px 26px -10px var(--accent-glow);
}
.bcard-cta:hover { border-color: transparent; box-shadow: 0 16px 34px -12px var(--accent-glow); }
.bcard-cta .bcard-title { font-size: 18px; }
.bcard-cta .bcard-sub { color: color-mix(in srgb, var(--primary-fg), transparent 30%); }
.dday {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; font-family: var(--mono); letter-spacing: .04em;
  width: fit-content;
}
.bstat { display: flex; gap: 22px; margin-top: 6px; flex-wrap: wrap; }
.bstat div b { display: block; font-size: 27px; font-weight: 800; font-family: var(--mono); letter-spacing: -0.03em; color: var(--text); }
.bstat div span { font-size: 12px; color: var(--dim); }

/* ── 스크롤 리빌 ──────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rd, 0s); }
.reveal.in { opacity: 1; transform: none; }
.bento > .reveal:nth-child(2) { --rd: .06s; }
.bento > .reveal:nth-child(3) { --rd: .12s; }
.bento > .reveal:nth-child(4) { --rd: .18s; }
.bento > .reveal:nth-child(5) { --rd: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.sec-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; font-weight: 700; color: var(--accent); margin-bottom: 5px; }

/* 멤버 전용 게이트 — Cal.com 인사이트식 티저 */
.gate {
  display: grid; grid-template-columns: 1.08fr .92fr;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--card); box-shadow: var(--card-shadow); overflow: hidden;
  min-height: 380px;
}
.gate-info { padding: 46px 44px; display: flex; flex-direction: column; align-items: flex-start; }
.gate-info .chip { margin-bottom: 18px; }
.gate-info h1 { font-size: 25px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; margin-bottom: 10px; }
.gate-info > p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin-bottom: 20px; }
.gate-points { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 28px; }
.gate-points li { color: var(--muted); font-size: 13.5px; display: flex; gap: 9px; align-items: center; }
.gate-points li::before { content: ''; width: 4px; height: 4px; border-radius: 999px; background: var(--dim); flex: none; }
.gate-divider { width: 100%; border-top: 1px dashed var(--border-2); margin: auto 0 22px; }
.gate-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gate-preview { position: relative; background: var(--panel); pointer-events: none; overflow: hidden; }
.gate-shot {
  position: absolute; left: 36px; top: 40px; right: -44px; bottom: -44px;
  background: var(--card); border: 1px solid var(--border-2); border-radius: 14px;
  box-shadow: var(--pop-shadow); padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  opacity: .85;
  mask-image: linear-gradient(to bottom, #000 52%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 96%);
}
.mline { display: block; height: 9px; border-radius: 5px; background: var(--border); }
.mline.hl { background: var(--accent-soft); }
.mock-row { display: flex; flex-direction: column; gap: 7px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.mock-person { display: flex; gap: 11px; align-items: center; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; }
.mock-ava { width: 28px; height: 28px; border-radius: 999px; background: var(--border); flex: none; }
.mock-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mock-cal i { display: block; aspect-ratio: 1; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); }
.mock-cal i.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent), transparent 65%); }

.logo-edit {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--border-2); border-radius: 999px; padding: 5px 12px;
  transition: color .12s, background .12s;
}
.logo-edit:hover { color: var(--text); background: var(--hover); }

.sec { padding: 40px 0 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.sec-head h2 { font-size: 20px; font-weight: 700; }
.sec-count { color: var(--dim); font-size: 14px; font-family: var(--mono); font-weight: 500; margin-left: 4px; }
.sec-more { color: var(--muted); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.sec-more:hover { color: var(--text); }

/* 공지 행 */
.nlist { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); }
.nrow {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: var(--card); border-bottom: 1px solid var(--border);
}
.nrow:last-child { border-bottom: 0; }
.nrow-title { flex: 1; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrow-meta { color: var(--dim); font-size: 12.5px; white-space: nowrap; }

/* 칼럼 카드 */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pcard {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--card-shadow);
}
.pcard-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pcard-top .pcard-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-top time { margin-left: auto; color: var(--dim); font-size: 11.5px; font-family: var(--mono); flex: none; }
.pcard-tags { display: flex; gap: 6px; }
.pcard-btn {
  margin-top: 4px; display: flex; align-items: center; justify-content: center;
  height: 36px; border: 1px solid var(--border-2); border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  transition: background .12s, color .12s;
}
.pcard:hover .pcard-btn { background: var(--hover); color: var(--text); }
.chip svg { width: 11px; height: 11px; margin-right: 4px; }
.pcard-title { font-size: 16.5px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-excerpt { color: var(--muted); font-size: 13.5px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.pcard-author { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-top: 2px; }

/* 논문 행 */
.plist { display: flex; flex-direction: column; gap: 10px; }
.prow {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--card-shadow);
}
.prow-main { flex: 1; min-width: 0; }
.prow-title { font-weight: 700; font-size: 15px; }
.prow-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.prow-title .ext { color: var(--dim); font-size: 12px; margin-left: 5px; }
.prow-sub { color: var(--dim); font-size: 12.5px; font-family: var(--mono); margin-top: 3px; }
.prow-note { color: var(--muted); font-size: 13.5px; margin-top: 9px; line-height: 1.6; }
.prow-by { color: var(--dim); font-size: 12.5px; }

/* 멤버 — 팀 소개 페이지의 '멤버 소개'처럼 세로형: 둥근 사각 4:5 사진 타일 + 아래 이름·역할·소개.
   칼럼 카드(.jcard)처럼 테두리 없이 사진이 카드 역할을 한다. 칸은 200px 기준 auto-fill
   (팀 앱 1440=4열 · 1024=3열), 칸 최소 폭을 '절반'으로도 묶어 좁은 화면에서도 늘 2열 이상 */
.mgroups { display: flex; flex-direction: column; gap: 48px; }
/* 운영진 / 학회원 소제목 — 카드 이름(15.5px)보다 한 단계 크게 + 헤어라인으로 섹션을 끊는다 */
.mgroup-h {
  display: flex; align-items: baseline; margin-bottom: 20px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 19px; font-weight: 700; letter-spacing: -0.025em; word-break: keep-all;
}
.mgrid {
  --mg: 16px;
  display: grid; gap: 36px var(--mg);
  grid-template-columns: repeat(auto-fill, minmax(min(200px, calc(50% - var(--mg) / 2 - 1px)), 1fr));
}
/* 소개 페이지 운영진(640px 칸) — 흔한 3~4명이 한 줄에 들도록 칸을 좁힌다(640=4열 · 모바일 2열) */
.about-sec .mgrid { grid-template-columns: repeat(auto-fill, minmax(min(140px, calc(50% - var(--mg) / 2 - 1px)), 1fr)); }
/* ── MemberCard(v5 §4.3) — 기준 컴포넌트 하나: 홈 운영진·소개·멤버 목록(공개·앱)·앱 멤버. 4:5 · r22 · 모노그램은 wash-3 + ink-2(P4) ──
   사진 타일 — 가로·세로로 긴 사진도 얼굴 쪽(위 30%)을 중심으로 채운다. ::after = 흰 바탕에서 가장자리를 잡아 주는 헤어라인.
   모노그램(.mcard-mono)은 늘 깔려 있고 사진 없는 타일(.is-mono)에서만 보인다 — 사진이 깨지면 app.js가 .is-mono로 바꾼다 */
.mcard { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-xl); color: inherit; }
.mcard:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.mcard-ph {
  position: relative; display: grid; place-items: center; container-type: inline-size;
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-xl); isolation: isolate;
  background: var(--wash-3);
  transition: translate var(--dur-2) var(--ease-out), scale var(--dur-3) var(--spring);
}
.mcard-ph::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.mcard-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; color: transparent; transition: scale var(--dur-4) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .mcard:hover .mcard-ph { translate: 0 -2px; }
  .mcard:hover .mcard-ph img { scale: 1.03; }
}
.mcard:active .mcard-ph { translate: 0 0; scale: var(--m-press-card); transition-duration: var(--dur-1); }
/* 사진 없는 멤버 — 이름 첫 글자 모노그램(40% 크기 · 600 · ink-2) on wash-3. 이니셜 바탕은 하나 */
.mcard-ph.is-mono, .mcard-ph.is-small { background: var(--wash-3); }
.mcard-ph:not(.is-mono) .mcard-mono { display: none; }
.mcard-mono { font-size: 64px; font-size: 40cqi; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--ink-2); user-select: none; }
/* 타일보다 한참 작은 사진(예전 44px 아바타용) — 늘려 뭉개지 않고 톤 면 가운데 작은 둥근 사각으로 (app.js가 .is-small) */
.mcard-ph.is-small img { position: relative; inset: auto; width: 46%; height: auto; aspect-ratio: 1; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); }
.mcard-on { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.mcard-body { display: flex; flex-direction: column; min-width: 0; padding: var(--s-3) 0 0; }
.mcard-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--s-2); min-width: 0; min-height: var(--h-xs); } /* 칩(24) 유무와 무관하게 이름 줄 24 — 뒤 줄 기준선이 카드마다 같다 */
.mcard-nm {
  min-width: 0; font: 600 var(--t-body)/1.35 var(--font); letter-spacing: -0.01em; color: var(--ink);
  word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 영문 이름 — 사전에 있는 말은 하이픈, 띄어쓰기 없는 긴 이름은 memberCard가 둔 <wbr> 자리에서 두 줄을 고르게 */
.mcard-nm[lang="en"] { -webkit-hyphens: auto; hyphens: auto; text-wrap: balance; }
.mcard .mcard-badge { height: var(--h-xs); padding: 0 var(--s-2); font-size: var(--t-caption); }
/* 직함 — 비어도 한 줄(min-height 20)을 지켜 카드 기준선이 맞는다 */
.mcard-title { min-height: 20px; margin-top: 2px; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-bio {
  margin-top: 6px; font: 400 var(--t-footnote)/1.55 var(--font); color: var(--ink-2);
  word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 관심사 — 한 줄에 들어가는 만큼만(넘치는 칩은 둘째 줄로 내려가 가려진다). 칩은 block이어야 긴 말이 …로 줄어든다 */
.mcard .mcard-tags { max-height: var(--h-xs); overflow: hidden; margin-top: var(--s-2); gap: var(--s-1); }
.mcard .mcard-tags .chip { display: block; min-width: 0; max-width: 100%; line-height: var(--h-xs); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .mgroups { gap: 36px; }
  .mgroup-h { margin-bottom: 16px; padding-top: 14px; font-size: 17px; }
  .mgrid { --mg: 12px; row-gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mcard-ph, .mcard-ph img { transition: none; }
  .mcard:hover .mcard-ph { translate: none; }
  .mcard:hover .mcard-ph img { scale: none; }
}

/* 일정 행 */
.elist { display: flex; flex-direction: column; gap: 10px; }
.erow {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 18px 13px 13px;
  box-shadow: var(--card-shadow);
}
.erow-date {
  width: 52px; height: 52px; flex: none; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.erow-date b { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); }
.erow-date span { font-size: 10.5px; color: var(--dim); font-weight: 600; margin-top: 2px; }
.erow-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.erow-title { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erow-sub { color: var(--dim); font-size: 12.5px; }
.erow-arrow { margin-left: auto; color: var(--dim); font-size: 15px; opacity: .55; }

/* ── 캘린더 ───────────────────────────── */
.cal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cal-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; min-width: 128px; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav a {
  width: 32px; height: 32px; border: 1px solid var(--border-2); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 15px;
}
.cal-nav a:hover { background: var(--hover); color: var(--text); }
.cal-today { font-size: 12.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--border-2); border-radius: 8px; padding: 6px 11px; }
.cal-today:hover { background: var(--hover); color: var(--text); }

.cal { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--card-shadow); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-wd {
  padding: 9px 0; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--dim);
  background: var(--panel); border-bottom: 1px solid var(--border); letter-spacing: .04em;
}
.cal-cell {
  min-height: 96px; padding: 7px 7px 6px;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.cal-grid .cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.out { background: var(--panel); }
.cal-num { font-size: 12px; font-weight: 600; color: var(--muted); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.cal-cell.sun .cal-num { color: var(--dim); }
.cal-cell.today .cal-num { background: var(--primary); color: var(--primary-fg); font-weight: 700; }
.cal-ev {
  display: block; font-size: 11.5px; font-weight: 600; line-height: 1.35;
  padding: 3px 7px; border-radius: 6px;
  background: var(--chip-bg); border: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-more { font-size: 11px; color: var(--dim); padding-left: 7px; }

/* ── 피드 (학회원 타임라인) ───────────── */
/* 전체 스케일 중앙: 사이드바(280)=레일(280), 피드는 뷰포트 정중앙(50vw 보정) */
.feed-layout {
  display: flex; gap: 28px; align-items: flex-start; justify-content: flex-start;
  padding: 24px 28px 0 max(28px, calc(50vw - 580px));
}
@media (min-width: 1081px) { .feed-layout > .feed { width: 600px; max-width: 600px; flex: none; } }
@media (max-width: 1080px) { .feed-layout { padding-left: 24px; justify-content: center; } }
.feed {
  flex: 1; min-width: 0; max-width: 620px; margin: 0;
  display: flex; flex-direction: column;
}
@media (max-width: 1080px) { .feed { margin: 0 auto; } }
.feed-head {
  position: sticky; top: 0; z-index: 25;
  padding: 13px 18px; font-weight: 800; font-size: 15px; letter-spacing: -0.02em;
  background: var(--tb-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.rail { width: 280px; flex: none; position: sticky; top: 14px; align-self: flex-start; display: flex; flex-direction: column; gap: 14px; margin-left: auto; }
.rcard { background: var(--panel); border: 0; border-radius: 16px; padding: 18px; }
.rcard-ident { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.rcard-logo { width: 42px; height: 42px; border-radius: 11px; object-fit: contain; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; }
.rcard-ident strong { font-size: 15px; display: block; letter-spacing: -0.02em; }
.rcard-ident span { font-size: 12.5px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcard-stats { font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-bottom: 14px; }
.rcard-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--muted); }
.rail .erow { padding: 10px 12px 10px 10px; box-shadow: none; gap: 12px; }
.rail .erow-date { width: 42px; height: 42px; border-radius: 9px; }
.rail .erow-date b { font-size: 15px; }
.rail .erow-title { font-size: 13px; }
.rail .erow-sub { font-size: 11.5px; }

.fcard {
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 14px 18px 8px;
  display: flex; flex-direction: column;
}
.fcard:last-child { border-bottom: 0; }
.fcard-grid { display: grid; grid-template-columns: 38px 1fr; gap: 0 11px; }
.favatar { display: flex; flex-direction: column; align-items: center; }
.fline { flex: 1; width: 2px; min-height: 12px; background: var(--border-2); border-radius: 2px; margin-top: 5px; }
.fmain { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-bottom: 2px; }
.freply { margin-top: 2px; padding: 6px 0 4px; }
.freply .favatar { justify-content: flex-start; }
.freply-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.freply-line { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freply-line strong { color: var(--text); font-weight: 700; margin-right: 3px; }
.freply-more { font-size: 12.5px; color: var(--accent); font-weight: 600; padding: 2px 0 8px; display: inline-block; }
.fcard-head { display: flex; gap: 8px; align-items: center; }

/* 채팅 모드 홈 — 박스 없이, 하단 입력바, 답글 트리 */
.page-chat { padding-bottom: 0; display: flex; flex-direction: column; min-height: 100%; }
.page-chat .feed-layout { flex: 1; align-items: stretch; width: 100%; }
.chatmode .feed { border: 0; background: transparent; box-shadow: none; overflow: visible; display: flex; flex-direction: column; max-width: 680px; }
.chatmode .fcard { background: transparent; padding-left: 6px; padding-right: 6px; }
.feed-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.composer-dock {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--bg);
  padding: 6px 2px 10px;
}
.composer-dock .composer { border: 0; background: transparent; padding: 8px 6px 2px; }
.chatmode .feed-head { background: var(--tb-bg); }
.frow-main { min-width: 0; font-size: 13.5px; line-height: 1.65; color: var(--prose); padding: 4px 0 10px; overflow-wrap: break-word; }
.frow-name { font-weight: 700; color: var(--text); margin-right: 3px; }
.frow-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.frow .favatar { padding-top: 1px; }
.fcard-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.fcard-name { font-weight: 700; font-size: 14px; }
.fcard-role { font-size: 12px; color: var(--dim); }
.fcard-meta { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; }
.fcard-meta time { color: var(--dim); font-size: 11.5px; font-family: var(--mono); }
.chip-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.fcard-body { display: flex; flex-direction: column; gap: 10px; }
.fcard-text { font-size: 14.5px; line-height: 1.7; }
.fcard-text.prose p { margin-bottom: 10px; }
.fcard-text.prose p:last-child { margin-bottom: 0; }
.fcard-obj { display: flex; flex-direction: column; gap: 5px; }
.fcard-obj strong { font-size: 15px; letter-spacing: -0.02em; line-height: 1.45; }
.fcard-obj p { color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.fcard-mono { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.fcard-quote { color: var(--muted); font-size: 13.5px; border-left: 2.5px solid var(--border-2); padding-left: 12px; line-height: 1.65; }
.fcard-imgs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; border-radius: 10px; }
.fcard-imgs::-webkit-scrollbar { display: none; }
.fcard-imgs img { height: 190px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); flex: none; }
.fcard-foot { display: flex; align-items: center; gap: 14px; margin-left: -10px; }
.fcard-foot form { display: inline-flex; }
.fcard-like {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--dim); font-size: 12.5px; font-weight: 600;
  padding: 6px 10px; border-radius: 999px;
  transition: background .12s, color .12s;
}
.fcard-like svg { width: 14px; height: 14px; }
.fcard-like:hover { background: rgba(224, 68, 43, .09); color: #e0442b; }
.fcard-like.on { color: #e0442b; }
.fcard-like.on svg { fill: #e0442b; stroke: #e0442b; }
.fcard-reply {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--dim); font-size: 12.5px; font-weight: 600;
  padding: 6px 10px; margin-left: -10px; border-radius: 999px;
  transition: background .12s, color .12s;
}
.fcard-reply svg { width: 14px; height: 14px; }
.fcard-reply:hover { background: var(--accent-soft); color: var(--accent); }
.fcard-intro { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }

/* 채팅식 입력줄 — 아바타 · 알약 입력창 · 동그란 전송 버튼이 한 줄에 */
.composer { display: flex; align-items: flex-end; gap: 9px; padding: 12px 14px; }
.composer > .avatar { margin-bottom: 3px; }
.composer-field {
  flex: 1; min-width: 0;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 22px;
  padding: 9px 16px;
  transition: border-color .12s;
}
.composer-field:focus-within { border-color: color-mix(in srgb, var(--accent), transparent 55%); }
.composer-input {
  display: block; width: 100%; border: 0; background: transparent;
  padding: 0; min-height: 22px; max-height: 180px; overflow-y: auto;
  font-size: 15px; font-family: var(--font);
  color: var(--text); resize: none; line-height: 1.55;
}
.composer-input:focus { outline: none; }
.composer-input::placeholder { color: var(--dim); }
.send-btn {
  width: 40px; height: 40px; border-radius: 999px; flex: none;
  background: var(--primary); color: var(--primary-fg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, opacity .12s;
}
.send-btn svg { width: 18px; height: 18px; margin: 1px 1px 0 -1px; }
.send-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--primary), #000 9%); }
.send-btn:disabled { opacity: .35; cursor: default; }
.hidden { display: none !important; }
.attach-btn {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s; margin-bottom: 1px;
}
.attach-btn:hover { background: var(--hover); color: var(--accent); }
.attach-btn svg { width: 19px; height: 19px; }
.attach-strip { display: flex; gap: 8px; padding: 6px 0 8px; }
.attach-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.attach-tile { position: relative; display: inline-block; }
.attach-tile img { width: 62px; height: 62px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; }
.attach-x {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 999px;
  background: #17150f; color: #fff; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--card); transition: transform .12s;
}
.attach-x:hover { transform: scale(1.12); }
.frow-composer { padding: 4px 0 12px; }
/* 대댓글 — 부모 아바타(fline, x18~20)에서 자식 아바타 옆까지 흐르는 곡선 엣지.
   좌표 계산: 아바타 칼럼 38px의 중앙 x19에 2px 레일(18~20) = fline과 정확히 겹침.
   자식 행 margin-left 38 → 엣지 left:-20 = 콘텐츠 x18. 자식 아바타(22px) 왼끝 = 38+8=46 → 폭 28. */
.fchildren { margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; }
.frow-child { position: relative; margin-left: 38px; padding: 5px 0; }
.frow-child::before {
  content: ''; position: absolute; left: -20px; top: -14px;
  width: 28px; height: 30px;
  border-left: 2px solid var(--border-2);
  border-bottom: 2px solid var(--border-2);
  border-bottom-left-radius: 14px;
}
.frow-child:not(:last-child)::after {
  content: ''; position: absolute; left: -20px; top: -14px; bottom: -14px;
  border-left: 2px solid var(--border-2);
}
.frow-child .favatar { position: relative; z-index: 1; }
.mention { color: var(--accent); font-weight: 600; }
.dock-ctx {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0 7px; margin-bottom: 4px;
  border-bottom: 1px dashed var(--border-2);
  font-size: 12.5px; color: var(--accent); font-weight: 600;
}
.dock-ctx-x {
  margin-left: auto; width: 20px; height: 20px; border-radius: 999px; flex: none;
  color: var(--dim); font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
}
.dock-ctx-x:hover { background: var(--hover); color: var(--text); }
.rmini-list { display: flex; flex-direction: column; margin-bottom: 8px; }
.rmini { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rmini:last-child { border-bottom: 0; }
.rmini-t { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmini-t:hover { color: var(--accent); }
.rmini-m { font-size: 11px; color: var(--dim); font-family: var(--mono); }
.frow-reply { margin-left: 7px; font-size: 11.5px; font-weight: 700; color: var(--dim); transition: color .12s; }
.frow-reply:hover { color: var(--accent); }

/* 인스타식 이미지 */
.paper-cover { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.paper-cover img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.prow-thumb { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); flex: none; }

/* 칼럼 ↔ 논문 연결 */
.rel-chip {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  font-size: 12px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border-radius: 8px; padding: 5px 10px;
  transition: background .12s;
}
.rel-chip:hover { background: color-mix(in srgb, var(--accent), transparent 82%); }
.rel-paper {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 26px; background: var(--card);
}
.rel-paper-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; color: var(--accent); font-weight: 700; flex: none; }
.rel-paper-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rel-paper-main strong { font-size: 14px; letter-spacing: -0.01em; }
.rel-paper-main span { font-size: 12px; color: var(--dim); }
.rel-paper:hover .rel-paper-main strong { color: var(--accent); }
.tweet-linked { padding: 16px 0 6px; border-bottom: 1px solid var(--border); }
.tweet-linked .sec-eyebrow { margin-bottom: 8px; }
.linked-col { display: flex; align-items: center; gap: 11px; padding: 10px 2px; }
.linked-col-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.linked-col-main strong { font-size: 14px; letter-spacing: -0.01em; }
.linked-col-main span { font-size: 12px; color: var(--dim); }
.linked-col-arrow { color: var(--dim); flex: none; }
.linked-col:hover strong { color: var(--accent); }

/* 논문 타임라인 — 우리가 따라온 계보 */
.tl { position: relative; padding: 6px 0 6px 32px; }
.tl::before {
  content: ''; position: absolute; left: 9px; top: 10px; bottom: 14px;
  width: 2.5px; border-radius: 2px;
  background: var(--border-2);
}
.tl-year { position: relative; padding: 2px 0 22px; }
.tl-year-badge {
  position: relative; display: inline-flex; align-items: center;
  height: 30px; padding: 0 15px; margin-left: -32px; margin-bottom: 12px;
  background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-2); border-radius: 999px;
  font-family: 'Cal Sans', var(--font); font-weight: 600; font-size: 14.5px; letter-spacing: .02em;
}
.tl-item { position: relative; display: flex; gap: 14px; padding: 10px 0 16px; }
.tl-item::before {
  content: ''; position: absolute; left: -27px; top: 18px;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--text); box-shadow: 0 0 0 3.5px var(--bg);
}
.tl-card { flex: 1; min-width: 0; }
.tl-title { font-weight: 700; font-size: 15.5px; letter-spacing: -0.02em; line-height: 1.45; }
.tl-title:hover { color: var(--accent); }
.tl-sub { font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 4px; }
.tl-note { color: var(--muted); font-size: 13.5px; margin-top: 8px; line-height: 1.65; }
.tl-card .tag-row { margin-top: 9px; }
.tl-thumb { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); flex: none; }

.vgroup { margin-bottom: 36px; }
.vgroup-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; }
.vgroup-head h2 { font-family: 'Cal Sans', var(--font); font-weight: 600; font-size: 19px; letter-spacing: .01em; }

/* 소개 — 에디토리얼 */
.about-hero { text-align: center; padding: 58px 24px 34px; }
.about-logo { width: 76px; height: 76px; object-fit: contain; margin: 0 auto 20px; }
.about-name { font-family: 'Cal Sans', var(--font); font-weight: 600; font-size: clamp(32px, 4.5vw, 44px); letter-spacing: 0; }
.about-tagline { color: var(--muted); font-size: 16px; margin-top: 10px; }
.about-stats {
  display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
}
.about-stats span { border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; background: var(--card); }
.about-prose { padding-top: 10px; }
.about-prose h2:first-child { margin-top: 0; }
.about-sec { margin-top: 52px; padding-top: 36px; border-top: 1px solid var(--border); }
.about-sec h2 { font-size: 20px; letter-spacing: -0.02em; }
.about-cta {
  margin-top: 52px; padding: 40px 24px; text-align: center;
  border: 1px solid var(--border); border-radius: 18px; background: var(--card);
}
.about-cta h2 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 20px; }

/* 포스터 — 논문·칼럼을 학회 포스터월처럼 */
.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px 20px; align-items: start; }
.poster-grid-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.poster {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: var(--card-shadow);
}
.poster-link { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.poster-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: flex; }
.poster-media img { width: 100%; height: 100%; object-fit: cover; }
.poster-shade { position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(9, 9, 11, .5)); }
.poster-chips { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 5px; flex-wrap: wrap; }
.poster-media .chip { background: rgba(255, 255, 255, .94); color: #18181b; border-color: transparent; height: 21px; font-size: 11px; }
/* LaTeX 제목 블록 — 순백 바탕, 두 룰 사이의 제목, 학회·연도만 */
.poster-latex {
  aspect-ratio: auto;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 18px 22px 16px 34px;
  --lm: 'Latin Modern', 'Times New Roman', Georgia, serif;
}
.latex-stamp {
  position: absolute; left: 5px; top: 10px; bottom: 10px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--lm); font-size: 9px; letter-spacing: .08em;
  color: #9a978f;
  white-space: nowrap; overflow: hidden;
}
.latex-rule { width: 100%; border-top: 1px solid #17150f; }
.latex-rule-thick { border-top-width: 2.5px; }
.latex-title {
  font-family: var(--lm); font-weight: 700; font-size: 15.5px; line-height: 1.3;
  color: #17150f; letter-spacing: 0; margin: 9px 0 10px; padding: 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.latex-venue { font-family: var(--lm); font-size: 11px; color: #17150f; margin-top: 9px; letter-spacing: .09em; font-variant: small-caps; }

.poster-ph { flex-direction: column; justify-content: flex-end; padding: 18px; }
/* 모노크롬 3변주: 종이 / 잉크 반전 / 아웃라인 */
.poster-ph-0 { background: #fff; }
.poster-ph-0 .poster-ph-title { color: #17150f; }
.poster-ph-1 { background: #17150f; }
.poster-ph-1 .poster-ph-title { color: #fff; }
.poster-ph-1 .poster-venue { color: rgba(255, 255, 255, .6); }
.poster-ph-2 { background: #efeee8; }
.poster-ph-2 .poster-ph-title { color: #17150f; }
.poster-ph-2 .poster-venue { color: #6b6a63; }
.poster-venue { position: absolute; top: 14px; right: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; color: var(--dim); }
.poster-ph-title {
  font-family: 'Cal Sans', var(--font); font-weight: 600;
  font-size: 21px; line-height: 1.32; letter-spacing: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 34px; padding-right: 8px;
}
.poster-body { padding: 13px 16px 14px; display: flex; flex-direction: column; gap: 5px; }
.poster-title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; }
.poster-sub { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.poster-note { font-size: 13px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poster-actions { display: flex; gap: 2px; justify-content: flex-end; padding: 0 10px 10px; margin-top: -4px; }

/* 태그 — 지식 아카이브의 연결고리 */
.tag-row { display: flex; gap: 5px; flex-wrap: wrap; }
.chip-tag { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; transition: background .12s; }
a.chip-tag:hover { background: color-mix(in srgb, var(--accent), transparent 82%); }
.pcard-cover { margin: -20px -20px 4px; width: calc(100% + 40px); max-width: none; height: 150px; object-fit: cover; border-radius: 13px 13px 0 0; }
.article-cover { width: 100%; max-height: 340px; object-fit: cover; border-radius: 16px; border: 1px solid var(--border); margin-bottom: 26px; }

.inline-reply { display: flex; flex: 1; min-width: 0; align-items: flex-end; gap: 8px; }
.composer-field-sm { padding: 6px 13px; border-radius: 18px; }
.composer-field-sm .composer-input { font-size: 14px; }
.send-btn-sm { width: 33px; height: 33px; }
.send-btn-sm svg { width: 15px; height: 15px; }

/* 스레드 상세 (트위터식) */
.thread { max-width: 680px; margin: 0 auto; padding: 14px 20px 0; width: 100%; }
.thread-top { display: flex; align-items: center; gap: 14px; padding: 8px 0 16px; font-size: 15px; }
.thread-backlink {
  width: 34px; height: 34px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); font-size: 17px; transition: background .12s;
}
.thread-backlink:hover { background: var(--hover); }
.thread-top .article-actions { margin-left: auto; }
.tweet { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.tweet-title { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; }
.tweet-prose { font-size: 16px; }
.tweet-body { padding-top: 2px; }
.tweet-time { color: var(--dim); font-size: 12.5px; font-family: var(--mono); padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.tweet-stats { display: flex; gap: 18px; padding: 11px 2px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--dim); }
.tweet-stats b { color: var(--text); font-weight: 700; }
.tweet-actions { display: flex; align-items: center; gap: 16px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.tweet-actions .fcard-reply, .tweet-actions .fcard-like { font-size: 13px; }
.tweet-actions svg { width: 16px; height: 16px; }
.thread .cmts { border-top: 0; margin-top: 18px; padding-top: 0; }

/* 홈 포스팅 카드 */
.composer-card { border-bottom: 1px solid var(--border); background: var(--card); padding: 14px 18px 12px; }
.composer-post-row { display: flex; gap: 11px; }
.composer-post-main { flex: 1; min-width: 0; }
.composer-post .composer-input { min-height: 44px; padding-top: 7px; }
.composer-post-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); margin-top: 10px; padding-top: 9px; }

/* 온라인 표시 */
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: #22c55e; margin-right: 2px; flex: none; }
.online-row { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-weight: 500; }
.online-n { font-size: 11.5px; color: var(--dim); }
.feed-head { display: flex; align-items: center; }

/* 주간 타임라인 (Cal.com식) */
.wk { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); }
.wk-head { display: grid; grid-template-columns: 52px repeat(7, 1fr); border-bottom: 1px solid var(--border); }
.wk-day { text-align: center; padding: 9px 0; font-size: 12px; color: var(--muted); }
.wk-day b { font-weight: 700; color: var(--text); }
.wk-day.on b { background: var(--accent); color: #fff; border-radius: 999px; padding: 2px 8px; }
.wk-body { display: grid; grid-template-columns: 52px repeat(7, 1fr); position: relative; }
.wk-hours { position: relative; }
.wk-hours span { position: absolute; right: 8px; transform: translateY(-6px); font-family: var(--mono); font-size: 10px; color: var(--dim); }
.wk-col { border-left: 1px solid var(--border); min-width: 0; }
.wk-col.wk-today { background: var(--accent-soft); }
.wk-allday { min-height: 4px; display: flex; flex-direction: column; gap: 3px; padding: 3px; }
.wk-slots { position: relative; background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 44px); }
.wk-ev {
  position: absolute; left: 3px; right: 3px; height: 40px; overflow: hidden;
  background: var(--accent); color: #fff; border-radius: 7px;
  font-size: 11px; line-height: 1.35; padding: 4px 7px;
}
.wk-ev b { font-weight: 700; display: block; font-size: 10px; opacity: .85; }
.wk-ev-allday { position: static; height: auto; background: color-mix(in srgb, var(--accent), transparent 78%); color: var(--accent); font-weight: 600; }
.wk-now { position: absolute; left: 0; right: 0; height: 2px; background: #e0442b; z-index: 3; }
.wk-now::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 999px; background: #e0442b; }

/* 라운지 — 채팅 */
.feed-head-sub { font-size: 11.5px; color: var(--dim); font-weight: 500; margin-left: 8px; }
.chatrow { display: flex; gap: 10px; padding: 7px 18px; }
.chatrow:first-child { padding-top: 14px; }
.chatrow-main { min-width: 0; flex: 1; }
.chatrow-head { display: flex; align-items: baseline; gap: 7px; font-size: 13px; }
.chatrow-head time { color: var(--dim); font-size: 10.5px; font-family: var(--mono); }
.chatrow-body { display: block; font-size: 14.5px; line-height: 1.55; overflow-wrap: break-word; }

/* 시간표 */
/* 시간표 — Cal.com 월 그리드식 정사각 셀 (회색 = 가능, 잉크 = 불가) */
.tt-grid { display: grid; grid-template-columns: 32px repeat(13, 40px); gap: 6px; }
.tt-grid .tt-head { font-size: 11.5px; color: var(--dim); text-align: center; font-family: var(--mono); padding: 4px 0 6px; }
.tt-grid .tt-h { font-size: 10px; color: var(--dim); font-family: var(--mono); display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; }
.tt-cell {
  aspect-ratio: 1 / 1; border: 0; border-radius: 10px;
  background: var(--panel); cursor: pointer; transition: background .12s;
}
.tt-cell:hover { background: color-mix(in srgb, var(--panel), #000 8%); }
.tt-cell.busy { background: #18181b; }
.tt-cell.busy:hover { background: #2e2e33; }
.tt-grid.tt-sm { grid-template-columns: 26px repeat(13, 24px); gap: 4px; }
.tt-grid.tt-sm .tt-cell { cursor: default; border-radius: 7px; }
.tt-free { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; border-radius: 4px; aspect-ratio: 1.6; border: 1px solid var(--border); }

/* 알림함 */
.notif-list { display: flex; flex-direction: column; }
.notif { display: flex; align-items: flex-start; gap: 12px; padding: 13px 10px; border-bottom: 1px solid var(--border); border-radius: 10px; }
.notif:last-child { border-bottom: 0; }
.notif-new { background: var(--accent-soft); border-bottom-color: transparent; margin-bottom: 2px; }
.notif-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.notif-main strong { font-weight: 700; }
.notif-snippet { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-time { color: var(--dim); font-size: 11.5px; font-family: var(--mono); flex: none; margin-top: 2px; }

/* 멤버 프로필 */
.profile-head { display: flex; gap: 18px; padding: 6px 2px 20px; border-bottom: 1px solid var(--border); }
.profile-major { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 4px; }
/* 전공 — 세로 카드에선 이름 다음 신원 정보라 --dim(흰 바탕 2.6:1)보다 진하게: muted와 dim 사이(라이트 5.4:1 · 다크 6:1) */
.mcard-major { font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; color: var(--ink-3); margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 전공 — Pretendard 13 ink-3(모노 폐지, v5 P4 MemberCard) */
.pstat {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding: 16px 2px; border-bottom: 1px solid var(--border);
}
.pstat-item b { display: block; font-size: 18px; font-weight: 800; font-family: var(--mono); letter-spacing: -0.02em; }
.pstat-item span { font-size: 11.5px; color: var(--dim); }
.profile-career { padding: 18px 2px 6px; border-bottom: 1px solid var(--border); }
.profile-career .prose-sm { font-size: 14px; }
.profile-career .prose-sm p, .profile-career .prose-sm ul, .profile-career .prose-sm ol { margin-bottom: 12px; }
.profile-main { min-width: 0; flex: 1; }
.profile-name { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-bio { color: var(--muted); font-size: 14px; margin-top: 5px; }
.profile-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.profile-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.profile-sec { font-weight: 700; font-size: 14.5px; margin: 20px 0 12px; }
.mcard-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
.fcard-name:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 답글 스레드 */
.cmts { margin-top: 34px; border-top: 1px solid var(--border); padding-top: 20px; }
.cmts-head { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.cmt-list { display: flex; flex-direction: column; }
.cmt { display: flex; gap: 10px; position: relative; padding-bottom: 18px; }
.cmt-rail { position: relative; flex: none; }
.cmt:not(:last-child) .cmt-rail::after {
  content: ''; position: absolute; left: 50%; top: 38px; bottom: -18px;
  width: 2px; transform: translateX(-50%); background: var(--border-2); border-radius: 2px;
}
.prow-thread {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
  color: var(--dim); font-size: 12.5px; font-weight: 600; width: fit-content;
  padding: 4px 9px; margin-left: -9px; border-radius: 999px;
  transition: background .12s, color .12s;
}
.prow-thread svg { width: 13px; height: 13px; }
.prow-thread:hover { background: var(--accent-soft); color: var(--accent); }
.cmt-main { flex: 1; min-width: 0; }
.cmt-top { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.cmt-top strong { font-weight: 700; }
.cmt-role { color: var(--dim); font-size: 12px; }
.cmt-top time { color: var(--dim); font-size: 11.5px; font-family: var(--mono); }
.cmt-body { font-size: 14.5px; color: var(--prose); line-height: 1.7; margin-top: 3px; overflow-wrap: break-word; }
.cmt-dot { color: var(--dim); }
.cmt-form { display: flex; align-items: flex-end; gap: 10px; padding: 14px 2px 14px; border-bottom: 1px solid var(--border); }
.cmt-form > .avatar { margin-bottom: 3px; }
/* 스레드 대댓글 — 부모 레일 중심 x17에서 자식 아바타(28px)로 흐르는 곡선.
   자식 행은 부모 cmt-main(x44) 안 → 엣지 left:-28 = 부모 x16~18, 폭 28 → 자식 아바타 왼끝 x0. */
.cmt-children {
  margin-top: 12px; padding-left: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.cmt-children .cmt { padding-bottom: 0; position: relative; }
.cmt-children .cmt::before {
  content: ''; position: absolute; left: -28px; top: -12px;
  width: 28px; height: 26px;
  border-left: 2px solid var(--border-2);
  border-bottom: 2px solid var(--border-2);
  border-bottom-left-radius: 12px;
}
.cmt-children .cmt:not(:last-child)::after {
  content: ''; position: absolute; left: -28px; top: -12px; bottom: -12px;
  border-left: 2px solid var(--border-2);
}
.cmt-children .cmt-rail { z-index: 1; }
.cmt-children .cmt-rail::after { display: none; }
.cmt-reply-btn { font-size: 12px; font-weight: 700; color: var(--dim); margin-top: 7px; width: fit-content; transition: color .12s; }
.cmt-reply-btn:hover { color: var(--accent); }
.cmt-nested { margin-top: 10px; }
.cmt-list { padding-top: 18px; }

/* ── 카드뉴스 캐러셀 ──────────────────── */
.carousel { position: relative; }
.car-track {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; border-radius: var(--radius);
}
.car-track::-webkit-scrollbar { display: none; }
.car-item {
  width: min(320px, 76vw); aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--border);
  scroll-snap-align: start; flex: none; background: var(--panel);
}
.carousel-lg .car-item { width: min(440px, 86vw); }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border-2); color: var(--text);
  font-size: 19px; z-index: 5; box-shadow: var(--pop-shadow);
  display: flex; align-items: center; justify-content: center;
}
.car-prev { left: 10px; } .car-next { right: 10px; }
.car-caption { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.car-caption:hover { color: var(--text); }
.car-count { color: var(--dim); font-family: var(--mono); font-size: 11.5px; }

/* ── 아티클 ───────────────────────────── */
.article { padding: 14px 0 0; }
.article-head { margin-bottom: 34px; }
.article-head .chips { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.article-head h1 { font-size: clamp(25px, 3.6vw, 34px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.28; }
.article-byline { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--muted); font-size: 13.5px; flex-wrap: wrap; }
.article-byline .dot { color: var(--dim); }
.article-actions { margin-left: auto; display: flex; gap: 6px; }

.prose { font-size: 16px; line-height: 1.85; color: var(--prose); }
.prose p { margin: 0 0 19px; }
.prose h2 { font-size: 21px; margin: 38px 0 13px; letter-spacing: -0.02em; color: var(--text); }
.prose h3 { font-size: 17.5px; margin: 28px 0 10px; color: var(--text); }
.prose ul, .prose ol { margin: 0 0 19px; padding-left: 24px; }
.prose li { margin-bottom: 7px; }
.prose blockquote {
  border-left: 2.5px solid var(--border-2); padding: 4px 0 4px 18px; margin: 0 0 19px;
  color: var(--muted);
}
.prose code {
  font-family: var(--mono); font-size: .85em;
  background: var(--chip-bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px;
}
.prose pre {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; overflow-x: auto; margin: 0 0 19px;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: 13px; line-height: 1.7; }
.prose img { border-radius: var(--radius); border: 1px solid var(--border); margin: 0 0 19px; }
.prose a { color: var(--link, currentColor); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dim); }
.prose a:hover { text-decoration-color: currentColor; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }
.prose strong { color: var(--text); }

.author-box {
  display: flex; gap: 14px; align-items: center; margin-top: 44px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--card-shadow);
}
.author-box-name { font-weight: 700; }
.author-box-bio { color: var(--muted); font-size: 13.5px; margin-top: 2px; }

/* ── 페이지 공통 ──────────────────────── */
.page-head { padding: 38px 0 4px; }
.page-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }
.page-head p { color: var(--muted); margin-top: 7px; font-size: 13.5px; }
.page-body { padding-top: 22px; }

/* 빈 상태 — v5 §4.8 하나: 40 원 안 20 선 아이콘 · 제목 17/600 · 설명 14 잉크-3 · 행동은 선택(위 20) */
.empty {
  text-align: center; padding: var(--s-9) var(--s-6);
  max-width: 420px; margin: 0 auto;
}
.empty-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--wash-2); color: var(--ink-3);
}
.empty-ico svg { width: var(--ic-lg); height: var(--ic-lg); }
.empty-title { margin-top: var(--s-4); font-weight: 600; font-size: var(--t-card); line-height: 1.3; letter-spacing: -0.015em; color: var(--text); }
.empty-sub { color: var(--ink-3); font-size: var(--t-ui); line-height: 1.65; margin: 6px auto 0; max-width: 36ch; text-wrap: pretty; }
.empty > .btn { margin-top: var(--s-5); }

.center-page { text-align: center; padding: 120px 24px; }
.err-code { font-family: var(--mono); font-size: 64px; font-weight: 700; color: var(--border-2); }
.err-msg { color: var(--muted); margin: 12px 0 28px; }

/* ── 인증/폼 페이지 ───────────────────── */
.auth-wrap { max-width: 400px; margin: 0 auto; padding: 72px 24px 40px; }
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; box-shadow: var(--card-shadow); }
.auth-card h1 { font-size: 21px; margin-bottom: 6px; }
.auth-card .auth-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
.auth-sub { color: var(--muted); font-size: 13.5px; }
.auth-alt { text-align: center; color: var(--dim); font-size: 13.5px; margin-top: 18px; }
.auth-alt a { color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-alt a:hover { color: var(--text); }

.form-page { max-width: 640px; margin: 0 auto; padding: 48px 24px 40px; }
.form-page h1 { font-size: 25px; margin-bottom: 8px; }
.form-page .form-sub { color: var(--muted); font-size: 14.5px; margin-bottom: 30px; }
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--card-shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; gap: 10px; margin-top: 26px; align-items: center; }

/* ── 컨트롤 3종: 뷰 전환(.seg 트랙+흰 썸) · 필터(.fpill 면 없는 알약) · 페이지 이동(.utabs 밑줄) + 묶기(.grp) — accent 금지 ── */
/* 로컬 토큰. 사이드바(L3336-3339)와 같은 이유로 둔다: 전역 --hover(.05)가 --chip-bg(.04)보다 진한 역전을 컨트롤 안에서 바로잡는다 */
:root {
  --seg-track: rgba(250, 250, 250, .06);
  --seg-thumb: rgba(250, 250, 250, .12);
  --seg-thumb-shadow: none;
  --ctl-hover: rgba(250, 250, 250, .04);
  --ctl-on: rgba(250, 250, 250, .08);
}
.theme-light {
  --seg-track: rgba(24, 24, 27, .05);
  --seg-thumb: #fff;
  --seg-thumb-shadow: 0 0 0 1px rgba(24, 24, 27, .06), 0 1px 2px rgba(24, 24, 27, .08);
  --ctl-hover: rgba(24, 24, 27, .03);   /* = --sb-hover */
  --ctl-on: var(--chip-bg);             /* = --sb-on. 활성 = chip-bg + 잉크 */
}

/* VIEW: 같은 데이터의 레이아웃. 트랙 + 흰 썸, 한국어 라벨, 칸 폭 균등, 굵기 600 고정(상태가 바뀌어도 폭이 그대로) */
.seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  flex: none; max-width: 100%;
  height: 30px; padding: 3px; border-radius: 9px;
  background: var(--seg-track);
}
.seg > a, .seg > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  padding: 0 12px; border-radius: 6px;
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--muted);
  transition: color .12s, background .12s, box-shadow .12s;
}
.seg > a:hover, .seg > button:hover { color: var(--text); }
.seg > .on { background: var(--seg-thumb); color: var(--text); box-shadow: var(--seg-thumb-shadow); }
.seg svg { width: 14px; height: 14px; flex: none; }
.seg > a:focus-visible, .seg > button:focus-visible { outline: var(--focus); outline-offset: 1px; } /* --ring은 ui.js L55에서 accent 틴트로 바뀌므로 쓰지 않는다 */

/* FILTER: 같은 목록을 좁힘. 면 없는 알약, 활성만 chip-bg + 외곽선 + 잉크 */
.fbar {
  display: flex; align-items: center; gap: 2px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.fbar::-webkit-scrollbar { display: none; }
.fpill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--muted);
  transition: color .12s, background .12s, border-color .12s;
}
.fpill:hover { color: var(--text); background: var(--ctl-hover); }
.fpill.on { color: var(--text); background: var(--ctl-on); border-color: var(--border-2); }
.fpill .n { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--dim); }
.fpill.on .n { color: var(--muted); }
.fpill:focus-visible { outline: var(--focus); outline-offset: -2px; } /* 안쪽 링: 스크롤 컨테이너가 자르지 않는다 */

/* NAV: 다른 페이지로 이동. Studio .st-tab(L3278-3283)의 페이지판 */
.utabs {
  display: flex; gap: 22px;
  box-shadow: inset 0 -1px var(--border);   /* border-bottom을 쓰면 overflow-x:auto가 bottom:-1px 밑줄을 잘라 1px만 남는다 */
  overflow-x: auto; scrollbar-width: none;
}
.utabs::-webkit-scrollbar { display: none; }
.utabs > a {
  position: relative; flex: none; padding: 8px 0 11px;
  font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; white-space: nowrap;
  color: var(--muted); transition: color .12s;
}
.utabs > a:hover, .utabs > a.on { color: var(--text); }
/* 활성 밑줄은 서버가 그린 .tab-bar 하나(v5.css, vt-tab) */
.utabs > a:focus-visible { outline: var(--focus); outline-offset: -2px; border-radius: var(--r-xs); } /* 스크롤 칸 안 — 안쪽 2px 잉크(§2.8) */

/* 아카이브 바: 왼쪽 필터, 오른쪽 도구(묶기 + 뷰). 전부 30px라 베이스라인이 하나다(사이드바 행 30px과도 같음) */
.arch-bar { display: flex; align-items: center; gap: 16px; min-height: 30px; margin-bottom: 22px; }
.arch-tools { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }

/* 묶기: 팝업 버튼(아이콘 + 현재 값 + ⌃⌄). details.menu를 재사용하고 바깥 클릭 닫기는 app.js L1218 */
.menu.grp > summary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 7px 0 9px; border-radius: 8px;
  font-size: 13px; font-weight: 600; line-height: 1; color: var(--muted);
  transition: background .12s, color .12s;
}
.menu.grp > summary:hover, .menu.grp[open] > summary { outline: 0; background: var(--hover); color: var(--text); }
.menu.grp > summary:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.menu.grp > summary svg { width: 15px; height: 15px; flex: none; }
.menu.grp > summary .grp-sel { width: 13px; height: 13px; color: var(--dim); }
.menu.grp.is-on > summary { color: var(--text); }
.menu.grp.is-off > summary { opacity: .4; pointer-events: none; }
.menu.grp .menu-pop { top: calc(100% + 6px); min-width: 180px; padding: 4px; border-radius: 10px; }

/* 메뉴 항목: 묶기와 카드 ⋯ 공용. L226 .menu-pop a/button(block, muted)을 특이도로 덮는다 */
.menu-pop .mi {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--text); text-align: left;
}
.menu-pop .mi svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.menu-pop .mi:hover { background: var(--hover); color: var(--text); }
.menu-pop .mi-check svg { visibility: hidden; }
.menu-pop .mi-check[aria-current] svg { visibility: visible; color: var(--text); }
.menu-pop .mi-danger, .menu-pop .mi-danger svg { color: var(--danger-fg); }
.menu-pop .mi-danger:hover { background: color-mix(in srgb, var(--danger-fg) 8%, transparent); color: var(--danger-fg); }
.menu-pop form { display: block; }
.menu-sep { height: 1px; margin: 4px 2px; background: var(--border); }

@media (max-width: 700px) {
  /* 1행: 필터(풀블리드 가로 스크롤). 2행: [뷰 flex:1 삼등분][묶기 아이콘] */
  .arch-bar { flex-wrap: wrap; gap: 10px 8px; margin-bottom: 18px; }
  .arch-bar > .fbar {
    flex: 0 0 calc(100% + 32px); margin: 0 -16px; padding: 0 16px;   /* .panel .container 모바일 패딩 16px(L2845)과 맞춘다 */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
  }
  .arch-tools { flex: 1 1 100%; margin-left: 0; }
  .arch-tools > .seg { flex: 1; }
  .arch-tools > .grp { order: 1; }   /* 오른쪽 끝에 두면 팝오버(right:0)가 화면 안에서 열린다 */
  .seg { height: 36px; }
  .fpill { height: 36px; padding: 0 14px; }
  .menu.grp > summary { height: 36px; min-width: 36px; padding: 0 10px; justify-content: center; background: var(--seg-track); }
  .menu.grp:not(.is-on) > summary .grp-label, .menu.grp > summary .grp-sel { display: none; }  /* 꺼짐: 아이콘만, 켜짐: '⧉ 학회별' */
}

/* 에디터 */
.md-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; flex-wrap: wrap; }
.md-toolbar .hint { margin: 0; }
.md-preview { background: var(--panel); border: 1px solid var(--border-2); border-radius: 10px; padding: 18px 20px; min-height: 200px; }
.upload-previews { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.upload-previews img { width: 90px; aspect-ratio: 4/5; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-2); }

/* ── 관리자 ───────────────────────────── */
.admin-head { display: flex; align-items: center; justify-content: space-between; padding: 40px 0 20px; flex-wrap: wrap; gap: 14px; }
.admin-head h1 { font-size: 25px; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 30px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--card-shadow); }
.stat .n { font-size: 24px; font-weight: 800; font-family: var(--mono); letter-spacing: -0.02em; }
.stat .l { color: var(--dim); font-size: 12.5px; margin-top: 2px; }

.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; background: var(--card); box-shadow: var(--card-shadow); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.tbl th {
  text-align: left; padding: 11px 16px; color: var(--dim); font-size: 12px; font-weight: 600;
  border-bottom: 1px solid var(--border); background: var(--panel); letter-spacing: .04em;
}
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .cell-user { display: flex; align-items: center; gap: 10px; }
.tbl .cell-user .em { color: var(--dim); font-size: 12px; }
.tbl select.input, .tbl input.input { height: 34px; font-size: 13px; width: auto; }

.pending-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--card-shadow);
}
.pending-msg { color: var(--muted); font-size: 13.5px; margin-top: 6px; line-height: 1.6; }
.pending-actions { display: flex; gap: 8px; margin-left: auto; flex: none; }

.code-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .04em;
  background: var(--panel); border: 1px dashed var(--border-2); border-radius: 10px; padding: 10px 14px;
  max-width: 100%;
}
.code-pill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-pill button { color: var(--dim); font-size: 12.5px; font-weight: 600; flex: none; }
.code-pill button:hover { color: var(--text); }
.invite-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.invite-row .lbl { font-size: 13px; font-weight: 600; color: var(--muted); width: 76px; flex: none; }

.danger-zone { border: 1px solid var(--danger-bd); border-radius: var(--radius); padding: 20px 22px; margin-top: 40px; }
.danger-zone h3 { font-size: 15px; margin-bottom: 6px; color: var(--danger-fg); }
.danger-zone p { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }

/* welcome 배너 */
.welcome {
  background: var(--panel);
  border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 18px 22px; margin: 24px auto 0;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.welcome strong { font-size: 14.5px; }
.welcome ol { display: flex; gap: 18px; list-style: none; color: var(--muted); font-size: 13.5px; flex-wrap: wrap; counter-reset: wl; }
.welcome ol li::before { content: counter(wl) ' — '; counter-increment: wl; color: var(--dim); font-family: var(--mono); font-size: 12px; }

/* 내 학회 목록 */
.sgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.scard {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px;
}
.scard-logo { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; border: 1px solid var(--border); background: #fff; }
.scard-logo-txt { background: var(--text); color: var(--bg); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; }
.scard-name { font-weight: 700; font-size: 15.5px; }
.scard-sub { color: var(--dim); font-size: 12.5px; margin-top: 2px; }

/* ── 랜딩 (agora, 다크) ───────────────── */
.hero { position: relative; text-align: center; padding: 104px 0 84px; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px 340px at 50% -60px, var(--glow), transparent 70%),
    radial-gradient(var(--border-2) 1px, transparent 1.5px);
  background-size: auto, 26px 26px;
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.hero > .container { position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--muted);
  border: 1px solid var(--border-2); border-radius: 999px; padding: 7px 14px; margin-bottom: 28px;
  background: var(--chip-bg);
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--text); opacity: .85; }
.hero h1 {
  font-size: clamp(38px, 6.4vw, 64px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.14;
  background: linear-gradient(180deg, var(--text) 40%, var(--dim)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { margin: 22px auto 0; max-width: 560px; color: var(--muted); font-size: 16.5px; line-height: 1.75; }
.hero .cta { margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.features { padding: 30px 0 0; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; transition: border-color .15s, background .15s; }
.feat:hover { border-color: var(--border-2); background: var(--card-hover); }
.feat-num { font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: .1em; }
.feat h3 { font-size: 16.5px; margin: 12px 0 7px; }
.feat p { color: var(--muted); font-size: 13.8px; line-height: 1.65; }

.showcase { padding: 96px 0 0; }
.showcase-head { text-align: center; margin-bottom: 34px; }
.showcase-head h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; }
.showcase-head p { color: var(--muted); margin-top: 10px; font-size: 15.5px; }
.browser-frame { border: 1px solid var(--border-2); border-radius: 16px; overflow: hidden; background: var(--panel); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--panel); }
.browser-dot { width: 10px; height: 10px; border-radius: 999px; background: #2c2c33; }
.browser-url { flex: 1; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--dim); background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 5px 12px; max-width: 340px; margin: 0 auto; }
.browser-body { position: relative; height: 460px; overflow: hidden; background: #fff; }
.browser-body iframe { width: 200%; height: 200%; border: 0; transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.browser-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, var(--bg) 96%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30px; }

.cta-band { text-align: center; padding: 104px 0 30px; }
.cta-band h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -0.04em; }
.cta-band p { color: var(--muted); margin: 14px 0 30px; font-size: 15.5px; }

/* ── 반응형 ───────────────────────────── */
@media (max-width: 1100px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
  .rail { display: none; }
}
@media (min-width: 1081px) {
  .fcard-intro { display: none; }
}
@media (max-width: 720px) {
  .feed-layout { padding: 12px 10px 0; }
}
@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .bento { grid-template-columns: 1fr; }
  .b-span2 { grid-column: auto; }
  .gate { grid-template-columns: 1fr; }
  .gate-preview { display: none; }
  .gate-info { padding: 32px 26px; }
  .sb {
    position: fixed; left: 0; top: 0; z-index: var(--z-drawer); width: 280px;
    translate: -100% 0; transition: translate var(--dur-2) var(--ease-in);
    box-shadow: none; background: var(--panel);
    border-right: 1px solid var(--border);
  }
  .sb.open { translate: 0 0; box-shadow: var(--e-3); transition: translate var(--dur-3) var(--ease-out); }
  .sb-backdrop {
    display: block; position: fixed; inset: 0; z-index: var(--z-drawer-scrim);
    background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-in);
  }
  .sb-backdrop.show { opacity: 1; pointer-events: auto; transition: opacity var(--dur-3) var(--ease-out); }
  /* 드로어가 열린 동안 탑바 아바타를 숨긴다(드로어 안에 같은 메뉴가 있다) */
  html.sb-open .topbar .tb-actions > .menu { visibility: hidden; }
  .content { padding: 0; }
  .panel { border: 0; border-radius: 0; box-shadow: none; }
  .topbar {
    display: flex; position: sticky; top: 0; z-index: 40;
    align-items: center; gap: 12px; height: 54px; padding: 0 16px;
    background: var(--tb-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }
  .pgrid, .sgrid { grid-template-columns: minmax(0, 1fr); } /* .mgrid는 멤버 블록이 최소 2열로 스스로 접는다 */
  .cal-cell { min-height: 64px; }
  .cal-ev { font-size: 0; padding: 0; width: 7px; height: 7px; border-radius: 999px; background: var(--text); border: 0; }
  .cal-more { font-size: 10px; }
}
@media (max-width: 720px) {
  .hero { padding: 72px 0 60px; }
  .features-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .browser-body { height: 320px; }
  .article { padding: 36px 0 0; }
  .pending-card { flex-wrap: wrap; }
  .pending-actions { margin-left: 54px; }
  .shero { padding: 52px 20px 44px; }
}


/* ── 홈 트위터화 — 분리 레이아웃 · 컴포저 · 채널 · DM · 검색 · 봇 ── */

/* 컴포저 — What's happening 톤 */
.composer-post .composer-input {
  border: 0; background: transparent; box-shadow: none; border-radius: 0;
  font-size: 17px; padding: 8px 0 4px; min-height: 52px;
}
.composer-post .composer-input:focus { outline: none; box-shadow: none; }
.composer-post .composer-input::placeholder { color: var(--dim); }

/* 레일 검색 */
.rail-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 0; border-radius: 999px;
  padding: 0 15px; height: 42px;
}
.rail-search svg { width: 16px; height: 16px; color: var(--dim); flex: none; }
.rail-search-in { border: 0; background: transparent; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: 13.5px; color: var(--text); }
.search-bar { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--border); }
.search-bar svg { width: 17px; height: 17px; color: var(--dim); flex: none; }
.search-bar .rail-search-in { font-size: 14.5px; }
.search-sec { padding: 14px 18px 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* 채널 */
.ch-tabs {
  padding: 9px 14px 11px; margin: 0; flex-wrap: wrap; gap: 7px;
  background: transparent; border: 0; border-radius: 0; width: auto;
  border-bottom: 1px solid var(--border);
}
.ch-tabs .tab, .ch-tabs summary.tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.ch-tabs .tab.on { background: var(--accent); border-color: transparent; color: #fff; }
.ch-tabs .tab:not(.on):hover { color: var(--text); background: var(--hover); }
.tab-dot { width: 7px; height: 7px; border-radius: 999px; background: #ffd21e; flex: none; box-shadow: 0 0 0 1.5px rgba(74, 56, 0, .12); }

/* 사이드바 채널 행 — Slack식 서브 목록 */
.sb-sub { padding-left: 34px; font-size: 13px; padding-top: 5px; padding-bottom: 5px; }
.sb-hash { color: var(--dim); font-weight: 700; width: 12px; text-align: center; flex: none; }
.sb-sub.on .sb-hash { color: inherit; }
.sb-sub .badge-bolt { margin-left: auto; }
.ch-list { display: flex; flex-direction: column; margin: -4px; }
.ch-item {
  display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 8px;
  color: var(--text); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.ch-item:hover { background: var(--hover); }
.ch-hash { color: var(--dim); font-weight: 700; }
.ch-n { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* DM */
.dm-new { display: flex; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.dm-new .input { flex: 1; min-width: 0; height: 38px; }
.dmrow {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  border-bottom: 1px solid var(--border); color: inherit; text-decoration: none;
}
.dmrow:hover { background: var(--hover); }
.dmrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dmrow-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.dmrow-head time { font-size: 11.5px; color: var(--dim); margin-left: auto; flex: none; }
.dmrow-body { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-head { display: flex; align-items: center; gap: 9px; }
.dm-back { color: var(--muted); text-decoration: none; font-size: 16px; margin-right: 2px; }
.online-dot.off { display: none; }

/* MR Electric Blue — 일렉트릭 스카이블루 스파크 */
.bot-spark { width: 8px; height: 8px; border-radius: 999px; background: #3fa9e8; box-shadow: 0 0 9px rgba(63, 169, 232, .85); flex: none; }
.bot-log { display: flex; flex-direction: column; gap: 7px; max-height: 250px; overflow-y: auto; margin-bottom: 10px; scrollbar-width: thin; }
/* 말풍선 — Grok식: 봇은 민무늬 텍스트, 내 질문만 회색 알약 */
.bot-msg {
  font-size: 13.5px; line-height: 1.68; background: transparent;
  padding: 0 2px; max-width: 100%; color: var(--prose);
  align-self: flex-start; white-space: pre-wrap; word-break: break-word;
}
.bot-msg.mine {
  align-self: flex-end; background: var(--panel); color: var(--text);
  border-radius: 16px; padding: 8px 14px; max-width: 85%;
}
/* 생각하는 중 — 점 바운스 + 시머 텍스트 */
.bot-think { display: flex; align-items: center; gap: 9px; padding: 2px; }
.bot-think-dots { display: inline-flex; gap: 4px; }
.bot-think-dots i { width: 6px; height: 6px; border-radius: 999px; background: #3fa9e8; animation: botDot 1.1s ease-in-out infinite; }
.bot-think-dots i:nth-child(2) { animation-delay: .18s; }
.bot-think-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes botDot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3.5px); } }
.bot-think-txt {
  font-size: 13px; font-weight: 600;
  background: linear-gradient(90deg, var(--dim) 25%, var(--text) 50%, var(--dim) 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: botShimmer 1.6s linear infinite;
}
@keyframes botShimmer { to { background-position: -200% 0; } }
/* 입력 — Grok식 알약 */
.bot-form {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 5px 5px 16px; margin-top: 10px;
}
.bot-form:focus-within { border-color: var(--ring); }
.bot-form .input { flex: 1; min-width: 0; height: 32px; font-size: 13.5px; border: 0; background: transparent; padding: 0; box-shadow: none; }
.bot-form .input:focus { outline: 0; box-shadow: none; border: 0; }
.bot-send { width: 34px; height: 34px; flex: none; }


/* ── 모달 — v5 §4.7: 스크림 + 블러, top 12vh, 폭 min(640, 100vw-32), r22, e-3, 패딩 24. ≤699에서는 아래 시트 ── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal-scrim);
  background: var(--scrim); backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.modal-backdrop.hidden { display: none; }
.compose-modal {
  position: relative; width: min(640px, 100vw - 32px); max-width: 640px; background: var(--card);
  border-radius: var(--r-xl); padding: var(--s-6);
  box-shadow: var(--e-3);
}
@media (max-width: 699px) {
  /* 모바일: 모든 모달이 아래에서 올라오는 시트 — 전폭 · 위 모서리만 22 · 손잡이 36×5 · 하단 안전 영역 */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-backdrop > :is(.compose-modal, .confirm-box) {
    width: 100%; max-width: none; max-height: 92svh; overflow-y: auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .modal-backdrop > :is(.compose-modal, .confirm-box)::before {
    content: ''; display: block; width: 36px; height: 5px; margin: -12px auto 12px; border-radius: var(--r-pill); background: var(--line-3);
  }
  .modal-backdrop:not(.hidden) > :is(.compose-modal, .confirm-box) { animation: m-sheet-in var(--dur-3) var(--ease-out); }
  .modal-backdrop.closing > :is(.compose-modal, .confirm-box) { animation: m-sheet-out var(--dur-2) var(--ease-in) both; }
}
.compose-modal-head { display: flex; margin-bottom: 2px; }
.modal-x {
  width: 34px; height: 34px; border-radius: 999px; margin-left: -6px;
  font-size: 21px; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-x:hover { background: var(--hover); }
.compose-modal .composer-input { min-height: 110px; font-size: 18px; }

/* ── MR Electric Blue — 우하단 섬 ── */
.bot-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: var(--z-fab); /* v5 P1: z 10단 — FAB(50)은 드로어 스크림(60) 아래 */
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s ease;
}
.bot-fab:hover { transform: scale(1.08); }
.bot-fab:active { transform: scale(1.01); }
.bot-fab .bot-spark { width: 13px; height: 13px; box-shadow: 0 0 10px rgba(63, 169, 232, .95); }
.bot-fab.hidden { display: none; }
.bot-island {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: min(430px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 110px));
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .2);
  display: flex; flex-direction: column; padding: 12px 16px 14px;
}
.bot-island.hidden { display: none; }
.bot-island-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 8px; }
.bot-hbtn {
  width: 30px; height: 30px; border-radius: 9px; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.bot-hbtn svg { width: 16px; height: 16px; }
.bot-hbtn:hover { background: var(--hover); color: var(--text); }
.bot-island-head .bot-hbtn:first-of-type { margin-left: auto; }
.bot-island .bot-log { flex: 1; max-height: none; gap: 13px; padding: 6px 2px; }
.bot-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding-bottom: 26px; align-self: center; width: 100%; }
.bot-logo-big { width: 40px; height: 40px; }
.bot-hello { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.bot-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bot-chip {
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 600;
  background: var(--card); color: var(--text);
}
.bot-chip:hover { background: var(--hover); }
@media (max-width: 760px) {
  .bot-fab, .bot-island { right: 14px; bottom: 76px; }
}


/* MR Electric Blue — 학회 로고가 일렉트릭 블루로 빛난다 */
.bot-logo {
  width: 20px; height: 20px; object-fit: contain; flex: none;
  animation: botGlow 2.6s ease-in-out infinite;
}
.bot-fab .bot-logo { width: 27px; height: 27px; }
@keyframes botGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(63, 169, 232, .7)); }
  50% { filter: drop-shadow(0 0 10px rgba(63, 169, 232, 1)); }
}


/* ── 칼럼·논문 = 유튜브 카드 (썸네일 + 아바타 + 2줄 제목 + 메타) ── */
.yt-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.yt-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: var(--panel);
}
.yt-thumb:has(.poster-latex), .yt-thumb:has(.poster-ph) { box-shadow: inset 0 0 0 1px var(--border); }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 호버 — 썸네일 안 미디어만 살짝 줌 (포스터 한 덩어리) */
.yt-thumb > img, .yt-thumb > div { transition: transform .3s ease; will-change: transform; }
.yt-thumb:hover > img, .yt-thumb:hover > div { transform: scale(1.04); }
/* 썸네일 안 LaTeX 시트 — 포스터월의 질감을 16:9로 압축 */
.yt-thumb .poster-latex {
  --ink: #17150f;
  width: 100%; height: 100%; padding: 22px 48px 30px;
  display: flex; flex-direction: column; justify-content: center;
  background-color: #fff;
  /* 재단선(crop marks) — 인쇄 조판의 정밀함, 네 모서리 */
  background-image:
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px;
  background-position:
    left 0 top 14px, left 14px top 0,
    right 0 top 14px, right 14px top 0,
    left 0 bottom 14px, left 14px bottom 0,
    right 0 bottom 14px, right 14px bottom 0;
}
.yt-thumb .latex-foot {
  position: absolute; left: 30px; right: 30px; bottom: 11px;
  display: flex; justify-content: space-between;
  border-top: 1px solid rgba(23, 21, 15, .35); padding-top: 5px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
  color: #5d5a52; text-transform: uppercase;
}
.yt-thumb .latex-title { font-size: 16.5px; line-height: 1.32; margin: 9px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-thumb .latex-venue { margin-top: 0; }
.yt-thumb .latex-stamp { left: 14px; }
/* 썸네일 안 타이포 포스터 (칼럼, 커버 없음) */
.yt-thumb .poster-ph { width: 100%; height: 100%; display: flex; }
.yt-thumb .poster-ph-title { font-size: 17px; -webkit-line-clamp: 2; }
.yt-body { display: flex; gap: 11px; align-items: flex-start; }
.yt-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.yt-title {
  font-size: 14.5px; font-weight: 700; line-height: 1.42; color: var(--text);
  letter-spacing: -0.01em; min-height: 2.84em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.yt-actions { flex: none; display: flex; gap: 6px; }


/* ── 내 프로필 — Cal식 2단: 왼쪽 언박스 필드, 오른쪽 정사각 시간표 ── */
.me-page { max-width: 1100px; }
.me-layout { display: flex; gap: 64px; align-items: flex-start; margin-top: 28px; }
.me-left { flex: 1; min-width: 0; max-width: 500px; }
.me-right { width: 400px; flex: none; position: sticky; top: 28px; }
.me-tt-label { display: block; font-size: 13px; font-weight: 700; }
.me-right .tt-grid { max-width: none; }
.tt-legend { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.tt-lg { width: 14px; height: 14px; border-radius: 5px; display: inline-block; }
.tt-lg-free { background: var(--panel); }
.tt-lg-busy { background: #18181b; margin-left: 12px; }
.me-sec { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 30px; max-width: 500px; }
@media (max-width: 980px) {
  .me-layout { flex-direction: column; gap: 36px; }
  .me-right { width: 100%; max-width: 460px; position: static; }
}


/* 프로필 편집 — 사진은 눌러서 바꾸고, 잡동사니는 접어둔다 */
.me-id { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.me-avatar { position: relative; cursor: pointer; flex: none; border-radius: 999px; }
.me-avatar .avatar { display: block; }
.me-avatar-badge {
  position: absolute; right: -3px; bottom: -3px;
  width: 25px; height: 25px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
  transition: color .12s, transform .12s;
}
.me-avatar-badge svg { width: 12.5px; height: 12.5px; }
.me-avatar:hover .me-avatar-badge { color: var(--text); transform: scale(1.1); }
.me-more { border-top: 1px solid var(--border); margin-top: 46px; padding-top: 16px; max-width: 500px; }
.me-more summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); width: fit-content; padding: 4px 0; }
.me-more summary::-webkit-details-marker { display: none; }
.me-more summary:hover { color: var(--text); }
.me-more[open] summary { margin-bottom: 14px; }


/* maru /me — 시간표가 빠진 단일 컬럼 */
.me-single { max-width: 500px; margin-top: 28px; }


/* Claude 연동(MCP) — 프로필 하단 섹션 */
.me-mcp { border-top: 1px solid var(--border); margin-top: 46px; padding-top: 26px; max-width: 640px; }
.me-mcp .code-pill span { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* 시간표 — Cal식 반듯한 박스 */
.tt-card {
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--card); padding: 22px;
  width: fit-content; max-width: 100%; overflow-x: auto;
}
.tt-card .tt-legend { margin-top: 16px; }

/* 논문 아카이브 — 한 줄 바 + 프레임 카드 */

/* 유튜브 카드 → 하나의 반듯한 프레임 (외곽 라운드 + 내부 썸네일 + 아바타) */
.yt-card {
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--card); padding: 10px 10px 13px; gap: 10px;
}
.yt-thumb { border-radius: 11px; }
.yt-body { padding: 0 5px; }


/* ── 블로그 에디터 — 툴바 ── */
.mdt {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 10px 10px 0 0; background: var(--panel);
  padding: 6px 8px;
}
.mdt-btn {
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.mdt-btn:hover { background: var(--hover); color: var(--text); }
.mdt-btn svg { width: 14px; height: 14px; }
.mdt-sep { width: 1px; height: 16px; background: var(--border-2); margin: 0 4px; }
.mdt-img span { font-weight: 600; font-size: 12px; }
.md-input { border-top-left-radius: 0; border-top-right-radius: 0; font-size: 15px; line-height: 1.8; }

/* ── 프로즈 확장 — 블로그급 본문 ── */
.prose h4 { font-size: 15.5px; margin: 22px 0 8px; color: var(--text); font-weight: 700; }
.prose mark { background: rgba(255, 210, 30, .45); color: inherit; padding: 0 3px; border-radius: 3px; }
.prose s { color: var(--dim); }
.prose pre {
  background: #17150f; color: #f2f0ea; border: 0; border-radius: 12px;
  padding: 16px 18px; position: relative; overflow-x: auto;
}
.prose pre code { color: inherit; }
.prose pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute; top: 9px; right: 13px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: rgba(242, 240, 234, .5); text-transform: uppercase;
}
.prose figure { margin: 26px 0; }
.prose figure img { max-width: 100%; border-radius: 12px; display: block; }
.prose figcaption { margin-top: 8px; font-size: 12.5px; color: var(--dim); text-align: center; }
.prose .table-wrap { margin: 0 0 19px; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.prose th { background: var(--panel); font-weight: 700; font-size: 13px; }
.prose li.task { list-style: none; display: flex; align-items: baseline; gap: 8px; margin-left: -20px; }
.prose li.task input { width: 15px; height: 15px; accent-color: #17150f; transform: translateY(2px); flex: none; }
.prose li.task input:checked + span { color: var(--dim); text-decoration: line-through; }
.prose .callout {
  display: flex; flex-direction: column; gap: 4px;
  border-left: 3px solid #17150f; background: var(--panel);
  border-radius: 0 12px 12px 0; padding: 13px 16px; margin: 0 0 19px;
}
.prose .callout p { margin: 0; font-size: 14.5px; }
.prose .callout-label { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.prose .callout-warn { border-left-color: #e0442b; }
.prose .callout-warn .callout-label { color: #e0442b; }
.prose .callout-tip { border-left-color: #3fa9e8; }
.prose .callout-tip .callout-label { color: #2b86c2; }
.prose hr { border: 0; border-top: 1px solid var(--border-2); margin: 32px auto; width: 120px; }


/* ── 규격 모달(소형) · 채널 이름 · DM 피커 · 알림 아이콘 ── */
.modal-sm { max-width: 420px; padding: 14px 18px 18px; }
.modal-sm .compose-modal-head { align-items: center; display: flex; margin-bottom: 10px; }
.ch-name-wrap { display: flex; align-items: center; gap: 8px; }
.ch-name-wrap > span { font-weight: 800; color: var(--dim); font-size: 15px; }
.modal-list { display: flex; flex-direction: column; max-height: 380px; overflow-y: auto; margin: 0 -8px; }
.modal-list .dmrow { padding: 10px 8px; border-bottom: 0; border-radius: 10px; }
.notif-ico {
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  background: var(--panel); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.notif-ico svg { width: 13px; height: 13px; }
.notif-ico-at { color: var(--accent); background: var(--accent-soft); }
.notif-ico-like { color: #e0442b; background: rgba(224, 68, 43, .1); }


/* 연락처 칩 (인스타식 프로필) · 채널 멤버 행 */
.contact-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.cchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  font-size: 12px; font-weight: 600; color: var(--muted);
  font-family: var(--mono);
}
.cchip:hover { color: var(--text); background: var(--hover); }
.ch-members {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 18px 0; font-size: 12px; color: var(--dim);
}
.ch-members a { color: var(--muted); font-weight: 600; }
.ch-members a:hover { color: var(--text); }


/* 슬랙식 채널 헤더 — 채널은 왼쪽 사이드바에서 고르고, 여기는 지금 방 이름만 */
.slack-head { display: flex; align-items: center; gap: 14px; }
.slack-chan { font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; }
.slack-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.slack-meta a { color: var(--muted); font-weight: 600; }
.slack-meta a:hover { color: var(--text); }
.slack-head .online-row { margin-left: auto; }


/* ── 칼럼 = 궁극의 블로그 ── */
.article-head h1 { font-size: 30px; line-height: 1.3; letter-spacing: -0.025em; }
.cmts { border-top: 1px solid var(--border); margin-top: 44px; padding-top: 20px; }
.cmts-empty { color: var(--dim); font-size: 13.5px; padding: 4px 0 6px; }
a.author-box { color: inherit; display: flex; align-items: center; gap: 14px; }
a.author-box:hover .author-box-name { text-decoration: underline; text-underline-offset: 3px; }
.pn-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 34px; }
.pn {
  border: 1px solid var(--border); border-radius: 14px; padding: 13px 16px;
  display: flex; flex-direction: column; gap: 4px; color: inherit; min-width: 0;
}
.pn:hover { background: var(--hover); }
.pn span { font-size: 11.5px; color: var(--dim); font-weight: 600; }
.pn strong {
  font-size: 14px; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pn-next { text-align: right; align-items: flex-end; }
@media (max-width: 640px) { .pn-nav { grid-template-columns: 1fr; } .pn-next { text-align: left; align-items: flex-start; } }


/* ══ 모션 — v5 문법(public/v5.css §4)의 앱 쪽 적용 ══
   키프레임 7종(m-rise·m-fade·m-fade-out·m-pop·m-toast·m-spin·m-pulse)은 v5.css에 있다.
   아래 옛 이름은 같은 문법의 별칭 — 개별 속성(translate·scale)만 써서 레이아웃 transform과 합성된다.
   reduced-motion은 v5.css §6이 맡는다(반복 1회·지연 0, 이동·배율 토큰 0). */
@keyframes riseIn { from { opacity: 0; translate: 0 var(--m-rise); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; scale: var(--m-pop); translate: 0 var(--m-rise); } }
@keyframes modalOut { to { opacity: 0; scale: .98; } }
@keyframes fabIn { from { opacity: 0; scale: var(--m-pop); } }
@keyframes heartPop { from { scale: .8; } }

/* 1. 페이지 입장 — .page의 pageIn은 폐지. 새로 불러올 때는 [data-enter](v5.css), 이동은 View Transition이 맡는다 */

/* 2. 첫 화면 목록 스태거 — 240ms부터 40ms 계단, 최대 8개. VT로 들어오면 루트 전환이 대신한다 */
.feed-body > .fcard, .poster-grid > .yt-card, .mgrid > .mcard, .notif-list > .notif, .sgrid > * {
  animation: m-rise var(--dur-4) var(--ease-out) backwards;
  animation-delay: calc(240ms + var(--i, 7) * var(--stagger));
}
:is(.feed-body > .fcard, .poster-grid > .yt-card, .mgrid > .mcard, .notif-list > .notif, .sgrid > *):nth-child(1) { --i: 0; }
:is(.feed-body > .fcard, .poster-grid > .yt-card, .mgrid > .mcard, .notif-list > .notif, .sgrid > *):nth-child(2) { --i: 1; }
:is(.feed-body > .fcard, .poster-grid > .yt-card, .mgrid > .mcard, .notif-list > .notif, .sgrid > *):nth-child(3) { --i: 2; }
:is(.feed-body > .fcard, .poster-grid > .yt-card, .mgrid > .mcard, .notif-list > .notif, .sgrid > *):nth-child(4) { --i: 3; }
:is(.feed-body > .fcard, .poster-grid > .yt-card, .mgrid > .mcard, .notif-list > .notif, .sgrid > *):nth-child(5) { --i: 4; }
:is(.feed-body > .fcard, .poster-grid > .yt-card, .mgrid > .mcard, .notif-list > .notif, .sgrid > *):nth-child(6) { --i: 5; }
:is(.feed-body > .fcard, .poster-grid > .yt-card, .mgrid > .mcard, .notif-list > .notif, .sgrid > *):nth-child(7) { --i: 6; }
/* 시각 제목이 없는 홈 피드(h1.sr-only) — 0~180ms 단계에 보이는 것이 없으므로 기준 지연 0(0 + 40ms × i), 첫 화면 밖(9번째부터)은 안무 없음 */
h1.sr-only ~ .feed-body > .fcard { animation-delay: calc(var(--i, 7) * var(--stagger)); }
h1.sr-only ~ .feed-body > .fcard:nth-child(n+9) { animation: none; }
:is(html[data-nav="vt"], html[data-embed]) :is(.feed-body > .fcard, .poster-grid > .yt-card, .mgrid > .mcard, .notif-list > .notif, .sgrid > *) { animation: none; }

/* 3. 모달 — 스크림 320ms 페이드, 패널 배율 .96→1(스프링)+8px 상승. 퇴장은 한 단계 짧게 200ms ease-in */
.modal-backdrop:not(.hidden) { animation: m-fade var(--dur-3) var(--ease-out); }
.modal-backdrop:not(.hidden) > * { animation: m-pop var(--dur-3) var(--spring), m-rise var(--dur-3) var(--ease-out); }
.modal-backdrop.closing { animation: m-fade-out var(--dur-2) var(--ease-in) both; }
.modal-backdrop.closing > * { animation: modalOut var(--dur-2) var(--ease-in) both; }

/* 4. MR Electric Blue — 섬은 우하단에서 피어나고, FAB은 세션 첫 진입에만 팝(html[data-fab-seen], v5.css) */
.bot-island:not(.hidden) { animation: m-pop var(--dur-3) var(--spring), m-rise var(--dur-3) var(--ease-out); transform-origin: bottom right; }
.bot-island.closing { animation: modalOut var(--dur-2) var(--ease-in) both; }
.bot-fab:not(.hidden) { animation: m-pop var(--dur-4) var(--spring-pop); }
html[data-fab-seen] .bot-fab:not(.hidden) { animation: none; }

/* 5. 마이크로 — 하트 팝 · 새 채팅 행 · 누름 · 배지 팝 */
.fcard-like.on svg { animation: heartPop var(--dur-4) var(--spring-pop); }
.chatrow { animation: m-rise var(--dur-2) var(--ease-out); }
:is(.send-btn, .mdt-btn):active { scale: var(--m-press); }
:is(.bot-chip, .fpill):active { scale: var(--m-press-chip); }
.badge-bolt, .tab-dot { animation: m-pop var(--dur-4) var(--spring-pop); }

/* 인스타식 드롭 힌트 (컴포즈 모달) — 점선 없이, 픽토그램으로 */
.drop-hint {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; padding: 26px 16px; margin: 6px 0 4px;
  background: var(--panel); border-radius: 14px;
  color: var(--muted); font-size: 12.5px; cursor: pointer;
  transition: background .12s;
}
.drop-hint:hover { background: color-mix(in srgb, var(--panel), #000 4%); }
.drop-hint svg { width: 44px; height: 44px; stroke-width: 1.2; color: var(--text); }
.has-files .drop-hint { display: none; }

/* 포스트 이미지 — 스레드 뷰 */
.tweet-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tweet-imgs.single { grid-template-columns: 1fr; }
.tweet-imgs img { width: 100%; border-radius: 12px; display: block; }


/* 프로필 — 인스타식 인라인 스탯 헤더 */
.profile-head { display: flex; gap: 30px; align-items: flex-start; }
.profile-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; width: 100%; }
.profile-name { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.pstat-inline { display: flex; gap: 18px; flex-wrap: wrap; margin: 11px 0 12px; font-size: 13.5px; color: var(--muted); }
.pstat-inline b { color: var(--text); font-weight: 800; font-size: 15px; margin-right: 4px; font-family: var(--mono); }
.pstat-join { color: var(--dim); }
@media (max-width: 620px) { .profile-head { gap: 18px; } .profile-head > .avatar { --av: 64px !important; } }

/* 피드 카드 = 클릭 타깃 · 프사 링크 */
.fcard { cursor: pointer; }
.plink { display: inline-flex; border-radius: 999px; }

/* 스레드 답글 입력 — 하단 고정 독 */
.cmt-dock {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--bg);
 
  margin-top: 10px; padding-bottom: 6px;
}
.cmt-dock .cmt-form { border-bottom: 0; }


/* ── 스레드 = 화면을 채우고, 답글 독은 어떤 길이에서도 균일하게 바닥 ── */
/* 스크롤 컨테이너의 flex 자식은 브라우저에 따라 컨테이너 높이로 클램프돼 sticky 범위가 잘린다.
   → 패널은 블록 유지, 내부 래퍼가 min-height로 화면을 채우고 자연 성장(블록 문법)한다. */
.page-thread { display: block; padding-bottom: 0; }
.page-thread > .thread,
.page-thread > .article > .container-narrow {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 44px);
}
.page-thread .cmt-dock { margin-top: auto; } /* 공백은 목록 아래로 — 답글 섹션은 본문에 바로 잇는다 */
.page-thread .thread, .page-thread .article > .container-narrow { overflow: visible; } /* sticky 보존 */
.cmt-dock { padding-bottom: 10px; }

/* ── 애플 느낌 스레드 — 타이포·여백·헤어라인의 정밀함 ── */
.page-thread .thread-top {
  position: sticky; top: 0; z-index: 25;
  background: var(--tb-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 12px 0;
}
.tweet-prose { font-size: 17px; line-height: 1.76; letter-spacing: -0.011em; }
.tweet-title { letter-spacing: -0.022em; }
.tweet-imgs { gap: 10px; margin-top: 18px; }
.tweet-imgs img { border-radius: 16px; outline: 1px solid var(--border); outline-offset: -1px; }
.tweet-time { color: var(--dim); letter-spacing: .01em; }
.tweet-actions { display: flex; gap: 6px; }
.tweet-actions .fcard-reply, .tweet-actions .fcard-like {
  padding: 9px 15px; border-radius: 999px; transition: background .12s;
}
.tweet-actions .fcard-reply:hover, .tweet-actions .fcard-like:hover { background: var(--hover); }
.cmts-head { font-size: 15px; letter-spacing: -0.01em; }

/* 일정 피드 카드 — 달력 픽토그램이 아바타 자리에 */
.fcard-ev { cursor: default; }
.fcard-ev .ev-ico {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  background: var(--panel); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.fcard-ev .ev-ico svg { width: 18px; height: 18px; stroke-width: 1.5; }


/* 수정·삭제 = 픽토그램 일괄 */
.icon-act {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); transition: background .12s, color .12s;
}
.icon-act svg { width: 15px; height: 15px; }
.icon-act:hover { background: var(--hover); color: var(--text); }
.icon-act-danger:hover { background: rgba(224, 68, 43, .1); color: #e0442b; }
.icon-act-sm { width: 26px; height: 26px; }
.icon-act-sm svg { width: 13px; height: 13px; }
.article-actions { display: flex; align-items: center; gap: 4px; }


/* ── 모임 — LUMA 문법, 모노 마감 ── */
.mu-list { display: flex; flex-direction: column; gap: 12px; }
.mu-card {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px; color: inherit; background: var(--card);
}
.mu-card:hover { background: var(--hover); }
.mu-date {
  width: 54px; height: 54px; flex: none; border-radius: 13px;
  background: var(--panel); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
}
.mu-date b { font-size: 19px; font-weight: 800; font-family: var(--mono); line-height: 1; }
.mu-date span { font-size: 10.5px; color: var(--dim); font-family: var(--mono); }
.mu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mu-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.mu-meta { font-size: 12.5px; color: var(--muted); }
.mu-topics { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.mu-going { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; font-size: 12px; color: var(--muted); }
.mu-going b { font-size: 17px; font-weight: 800; font-family: var(--mono); color: var(--text); }
.mu-open { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.mu-open.mu-soc { color: var(--muted); background: var(--panel); }
.mu-hero { display: flex; gap: 20px; align-items: flex-start; }
.mu-hero .mu-date { width: 64px; height: 64px; }
.mu-hero .mu-date b { font-size: 23px; }
.mu-hero-meta { color: var(--muted); font-size: 13.5px; margin-top: 7px; }
.mu-join { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mu-count { font-size: 13px; color: var(--muted); }
.mu-count b { font-family: var(--mono); font-weight: 800; color: var(--text); font-size: 15px; }
.mu-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mu-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mu-person-main { min-width: 0; display: flex; flex-direction: column; }
.mu-person-main strong { font-size: 13.5px; }
.mu-person-main span { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ── 피드 디테일 — 트위터·인스타 마감 ── */
.fcard { padding: 16px 20px 7px; }
.fcard-grid { gap: 0 12px; }
.fmain { gap: 9px; }
.fcard-name { font-size: 15px; }
.fcard-meta time { font-size: 12.5px; }
.fcard-text.prose { font-size: 15px; line-height: 1.62; }
.fcard-more { font-size: 13px; font-weight: 600; color: var(--accent); width: fit-content; padding: 1px 0 3px; }
.feed-head { font-size: 16px; }

/* 액션 — 아이콘 우선, 호버 서클 (트위터) */
.fcard-foot { gap: 6px; margin-left: -11px; padding: 1px 0 5px; }
.fcard-reply, .fcard-like { gap: 7px; font-size: 13px; padding: 7px 12px; margin-left: 0; }
.fcard-reply svg, .fcard-like svg { width: 16.5px; height: 16.5px; }
.fcard-reply:hover { background: var(--accent-soft); color: var(--accent); }

/* 포스트 이미지 = 경계 있는 라운드 그리드 (트위터 문법, 최대 4 + 나머지 +N) */
.fcard-imgs-post {
  display: grid; gap: 3px; margin-top: 3px;
  border-radius: 16px; overflow: hidden;
  outline: 1px solid var(--border); outline-offset: -1px;
}
.fcard-imgs-post .fimg { position: relative; display: block; min-width: 0; overflow: hidden; }
.fcard-imgs-post .fimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imgs-1 { grid-template-columns: 1fr; }
.imgs-1 .fimg img { height: auto; max-height: 500px; }
.imgs-2 { grid-template-columns: 1fr 1fr; }
.imgs-2 .fimg { height: 264px; }
.imgs-3 { grid-template-columns: 1fr 1fr; }
.imgs-3 .fimg:first-child { grid-row: span 2; height: 100%; }
.imgs-3 .fimg { height: 158px; }
.imgs-4 { grid-template-columns: 1fr 1fr; }
.imgs-4 .fimg { height: 158px; }
.fimg-more::after {
  content: attr(data-more);
  position: absolute; inset: 0;
  background: rgba(23, 21, 15, .5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 800; letter-spacing: .02em;
}


/* ── 라운지 그룹핑 — 슬랙 문법 ── */
.chat-day { display: flex; align-items: center; gap: 14px; padding: 20px 18px 8px; }
.chat-day::before, .chat-day::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.chat-day span {
  font-size: 11px; font-family: var(--mono); color: var(--dim);
  background: var(--panel); padding: 3px 12px; border-radius: 999px; flex: none;
}
.chatrow { padding: 8px 18px 2px; }
.chatrow + .chatrow:not(.chatrow-follow) { margin-top: 8px; }
.chatrow-follow { padding: 1px 18px; }
.chatrow-gutter { width: 32px; flex: none; display: flex; align-items: center; justify-content: center; }
.chatrow-gutter time { font-size: 9.5px; font-family: var(--mono); color: transparent; transition: color .12s; }
.chatrow-follow:hover .chatrow-gutter time { color: var(--dim); }
.chatrow-follow:hover { background: color-mix(in srgb, var(--panel), transparent 45%); }
.chatrow-head time { font-size: 10.5px; }


/* 플랫 피드 — 상단 바 없이 콘텐츠부터 (모던) */
.feed-body-flat > .fcard:first-child { padding-top: 6px; }

/* 조회수 — 비인터랙티브 딤 카운트 (X 문법) */
.fcard-views {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--dim); font-size: 13px; font-weight: 600; padding: 7px 12px;
}
.fcard-views svg { width: 15px; height: 15px; }


/* ── 알림 — 인스타 규격 ── */
.notif-sec { padding: 20px 18px 8px; font-size: 13px; font-weight: 800; letter-spacing: -0.01em; }
.notif { display: flex; align-items: center; gap: 13px; padding: 11px 18px; border-radius: 0; border-bottom: 0; }
.notif:hover { background: var(--hover); }
.notif-new { background: var(--accent-soft); margin: 0; }
.notif-av { position: relative; flex: none; }
.notif-badge {
  position: absolute; right: -4px; bottom: -4px;
  width: 19px; height: 19px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800;
  border: 2px solid var(--card); background: var(--panel); color: var(--muted);
}
.notif-badge svg { width: 10px; height: 10px; }
.nb-like { background: #e0442b; color: #fff; }
.nb-like svg { fill: #fff; stroke: #fff; }
.nb-at { background: var(--accent); color: #fff; }
.nb-meet { background: #17150f; color: #fff; }
.notif-line { font-size: 14px; }
.notif-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.notif-side time { font-size: 11.5px; color: var(--dim); font-family: var(--mono); }
.notif-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }


/* 알림 — 풀 컨테이너 규격 (공지와 동일 문법) */
.page-body .notif { border-radius: 12px; padding: 12px 16px; }
.page-body .notif-sec { padding: 22px 6px 8px; }
.page-body .notif-sec:first-child { padding-top: 4px; }


/* 대댓글 계층 — 깊이 4까지 들여쓰고 이후 평평(과들여쓰기 방지) */
.cmt[data-depth="4"] > .cmt-main > .cmt-children { padding-left: 0; }
.cmt[data-depth="4"] > .cmt-main > .cmt-children > .cmt::before,
.cmt[data-depth="4"] > .cmt-main > .cmt-children > .cmt::after { display: none; }


/* 확인 모달 — 네이티브 confirm 대체. 같은 모달 문법(12vh · r22 · e-3 · 패딩 24), 발은 오른쪽 정렬 md 버튼 */
.confirm-box {
  width: min(400px, 100vw - 32px); background: var(--card);
  border-radius: var(--r-xl); padding: var(--s-6);
  box-shadow: var(--e-3);
}
.confirm-msg { font-size: var(--t-body); line-height: 1.65; color: var(--text); margin-bottom: var(--s-6); }
.confirm-acts { display: flex; justify-content: flex-end; gap: var(--s-2); }
.confirm-acts .btn { height: var(--h-md); padding: 0 18px; font-size: var(--t-ui); }


/* 논문·칼럼 테이블 뷰 */
.arch-table { margin-top: 4px; }
.arch-table table { width: 100%; }
.arch-table th { font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.arch-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
.arch-table tr:hover td { background: var(--hover); }
.at-title a { font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.at-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.at-dim { color: var(--dim); white-space: nowrap; }
.at-note { color: var(--muted); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-acts { text-align: right; white-space: nowrap; }
.at-acts .icon-act { width: 28px; height: 28px; }
.arch-table form { display: inline-flex; }


/* 하트 팝 — 낙관적 업데이트 시 즉각 반응 */
.fcard-like.pop svg { animation: heartPop var(--dur-4) var(--spring-pop); }


/* 이미지 크롭 모달 */
.crop-stage {
  position: relative; margin: 0 auto; max-width: 100%;
  background: #17150f; border-radius: 12px; overflow: hidden;
  touch-action: none; user-select: none; cursor: crosshair;
}
.crop-stage img { display: block; width: 100%; height: auto; pointer-events: none; }
.crop-sel {
  position: absolute; border: 1.5px solid #fff;
  box-shadow: 0 0 0 9999px rgba(23, 21, 15, .58);
  cursor: move;
}
.crop-sel::before, .crop-sel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(#fff 0 0) 33.3% 0 / 1px 100%,
    linear-gradient(#fff 0 0) 66.6% 0 / 1px 100%,
    linear-gradient(#fff 0 0) 0 33.3% / 100% 1px,
    linear-gradient(#fff 0 0) 0 66.6% / 100% 1px;
  opacity: .35; background-repeat: no-repeat;
}
.crop-handle { position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 3px; }
.crop-handle.br { right: -7px; bottom: -7px; cursor: nwse-resize; }
.crop-ratios { display: flex; gap: 6px; margin: 14px 0 4px; flex-wrap: wrap; }
.crop-ratio { border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.crop-ratio.on { background: var(--accent); border-color: transparent; color: #fff; }
.crop-ratio:hover:not(.on) { background: var(--hover); color: var(--text); }


/* 채널·DM 이미지 첨부 */
.attach-btn-inline { flex: none; width: 34px; height: 34px; align-self: flex-end; margin-bottom: 1px; color: var(--dim); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.attach-btn-inline:hover { background: var(--hover); color: var(--text); }
.attach-btn-inline svg { width: 19px; height: 19px; }
.chat-imgs { display: grid; gap: 3px; margin-top: 6px; max-width: 320px; border-radius: 14px; overflow: hidden; outline: 1px solid var(--border); outline-offset: -1px; }
.chat-imgs .fimg { position: relative; display: block; overflow: hidden; min-width: 0; }
.chat-imgs .fimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-imgs.imgs-1 { grid-template-columns: 1fr; }
.chat-imgs.imgs-1 .fimg img { height: auto; max-height: 320px; }
.chat-imgs.imgs-2 { grid-template-columns: 1fr 1fr; }
.chat-imgs.imgs-2 .fimg { height: 150px; }
.chat-imgs.imgs-3 { grid-template-columns: 1fr 1fr; }
.chat-imgs.imgs-3 .fimg:first-child { grid-row: span 2; height: 100%; }
.chat-imgs.imgs-3 .fimg { height: 92px; }
.chat-imgs.imgs-4 { grid-template-columns: 1fr 1fr; }
.chat-imgs.imgs-4 .fimg { height: 92px; }


/* 학회 타입 선택 카드 */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.type-card { cursor: pointer; }
.type-card input { position: absolute; opacity: 0; }
.type-card-in {
  display: flex; flex-direction: column; gap: 4px;
  border: 1.5px solid var(--border); border-radius: 14px; padding: 16px;
  transition: border-color .12s, background .12s;
}
.type-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.type-ic { color: var(--muted); display: inline-flex; }
.type-ic svg { width: 21px; height: 21px; }
.type-check {
  width: 21px; height: 21px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #17150f; color: #fff; opacity: 0; transform: scale(.6);
  transition: opacity .14s, transform .18s var(--ease-out);
}
.type-check svg { width: 12px; height: 12px; stroke-width: 2.4; }
.type-card-in strong { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.type-sub { font-size: 11.5px; color: var(--dim); }
.type-card:hover .type-card-in { border-color: var(--border-2); }
.type-card input:checked + .type-card-in { border-color: #17150f; background: var(--panel); }
.type-card input:checked + .type-card-in .type-check { opacity: 1; transform: scale(1); }
.type-card input:checked + .type-card-in .type-ic { color: #17150f; }
.type-card input:focus-visible + .type-card-in { outline: 2px solid var(--ring); outline-offset: 2px; }


/* ── 홍보 랜딩 다듬기 ── */
/* 히어로 포인터 스포트라이트 — three.js 없이, 모노톤 은은한 광 (premium 정신만) */
.shero[data-spotlight]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity .4s;
  background: radial-gradient(340px 340px at var(--sx, 50%) var(--sy, 30%), var(--accent-glow), transparent 60%);
}
.shero[data-spotlight].lit::after { opacity: .9; }

/* 통계 스트립 */
.land-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 18px; padding: 20px; background: var(--card);
  max-width: 720px; margin: 4px auto 0;
}
.land-stat { flex: 1; min-width: 96px; text-align: center; padding: 4px 10px; }
.land-stat b { display: block; font-family: var(--mono); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.land-stat span { font-size: 12.5px; color: var(--dim); }

/* 운영진 팀 */
.land-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.land-member {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  border: 1px solid var(--border); border-radius: 16px; padding: 22px 12px; color: inherit; background: var(--card);
}
.land-member:hover { background: var(--hover); }
.land-member-name { font-size: 14px; font-weight: 700; }
.land-member-role { font-size: 11.5px; color: var(--dim); }
.land-events { max-width: 720px; }


/* ── ⌘K 스포트라이트 ── */
.sb-search {
  display: flex; align-items: center; gap: 9px;
  margin: 0 12px 6px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--dim); font-size: 13px; background: var(--card);
  transition: border-color .12s, color .12s;
}
.sb-search:hover { border-color: var(--border-2); color: var(--text); }
.sb-search svg { width: 15px; height: 15px; flex: none; }
.sb-search span { flex: 1; text-align: left; }
.kbd {
  font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px;
  background: var(--panel); line-height: 1.5; white-space: nowrap;
}

.spot-back {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--scrim);
  backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px;
  animation: m-fade var(--dur-2) var(--ease-out);
}
.spot-back.hidden { display: none; }
.spot {
  width: min(640px, 100%);
  background: var(--card); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--e-3);
  display: flex; flex-direction: column;
  animation: m-pop var(--dur-2) var(--ease-out), m-rise var(--dur-2) var(--ease-out);
}
.spot-back.closing { animation: m-fade-out var(--dur-1) var(--ease-in) both; }
.spot-back.closing .spot { animation: m-fade-out var(--dur-1) var(--ease-in) both; }

.spot-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.spot-head > svg { width: 19px; height: 19px; color: var(--dim); flex: none; }
.spot-input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); }
.spot-input::placeholder { color: var(--dim); }

.spot-body { max-height: min(52vh, 420px); overflow-y: auto; padding: 6px 8px 8px; }
.spot-group-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); padding: 12px 12px 5px; }
.spot-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 12px; color: inherit;
}
.spot-row.on { background: var(--hover); }
.spot-ic {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
.spot-ic svg { width: 17px; height: 17px; }
.spot-ic-av { background: transparent; border: 0; }
.spot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.spot-main strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-main span { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-row .chip { flex: none; }
.spot-row-all { border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; margin-top: 6px; }
.spot-row-all strong { color: var(--muted); font-weight: 600; }
.spot-empty { text-align: center; color: var(--dim); font-size: 13.5px; padding: 34px 0 30px; }

.spot-quick { padding: 6px 8px 14px; }
.spot-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 10px 0; }
.spot-pill {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.spot-pill:hover { background: var(--hover); color: var(--text); }
.spot-pill svg { width: 16px; height: 16px; flex: none; }

.spot-foot {
  display: flex; gap: 16px; padding: 9px 16px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--dim); background: var(--panel);
}
.spot-foot span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 640px) { .spot-back { padding-top: 8vh; } .spot-pills { grid-template-columns: 1fr 1fr; } }


/* Fractal Glass 히어로 — 캔버스는 배경 레이어, 콘텐츠 위로 */
.shero-glass { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.shero[data-glass-hero] > .container { position: relative; z-index: 1; }
.shero[data-glass-hero]::before { z-index: 0; } /* WebGL 폴백 시 도트 그리드 노출 */

/* 스포트라이트 결과 행 — 리액트급 스태거 등장 */
@keyframes spotRowIn { from { opacity: 0; transform: translateY(5px); } }
[data-spot-results] .spot-row, [data-spot-results] .spot-group-label { animation: spotRowIn .2s var(--ease-out) both; }
[data-spot-results] > *:nth-child(1) { animation-delay: 0s; }
[data-spot-results] > *:nth-child(2) { animation-delay: .02s; }
[data-spot-results] > *:nth-child(3) { animation-delay: .04s; }
[data-spot-results] > *:nth-child(4) { animation-delay: .06s; }
[data-spot-results] > *:nth-child(5) { animation-delay: .08s; }
[data-spot-results] > *:nth-child(6) { animation-delay: .10s; }
[data-spot-results] > *:nth-child(7) { animation-delay: .12s; }
[data-spot-results] > *:nth-child(n+8) { animation-delay: .14s; }


/* 플랫폼 랜딩 히어로에도 유리 레이어 */
.hero[data-glass-hero] > .container { position: relative; z-index: 1; }
.hero[data-glass-hero]::before { z-index: 0; }


/* ── 딥네이비 유리 히어로 — 화이트 텍스트 무대 ── */
.hero[data-glass-hero], .shero[data-glass-hero] {
  background: linear-gradient(180deg, #16255c, #1e40af 55%, #152457); /* WebGL 폴백도 네이비 */
}
.hero[data-glass-hero]::before, .shero[data-glass-hero]::before { display: none; } /* 도트 그리드 제거 */
.hero[data-glass-hero] h1, .shero[data-glass-hero] h1 { color: #fff; }
.hero[data-glass-hero] .sub, .shero[data-glass-hero] .tagline { color: rgba(255, 255, 255, .74); }
.hero[data-glass-hero] .eyebrow, .shero[data-glass-hero] .eyebrow {
  color: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .07);
}
.hero[data-glass-hero] .eyebrow::before, .shero[data-glass-hero] .eyebrow::before { background: #fff; }
.shero[data-glass-hero] .eyebrow-live::before { background: #7db8ff; box-shadow: 0 0 0 0 rgba(125, 184, 255, .5); }
.hero[data-glass-hero] .btn:not(.btn-ghost), .shero[data-glass-hero] .btn:not(.btn-ghost) {
  background: #fff; color: #17150f; border-color: transparent;
}
.hero[data-glass-hero] .btn:not(.btn-ghost):hover, .shero[data-glass-hero] .btn:not(.btn-ghost):hover { background: #f1f0ec; }
.hero[data-glass-hero] .btn-ghost, .shero[data-glass-hero] .btn-ghost {
  color: #fff; border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .07);
}
.hero[data-glass-hero] .btn-ghost:hover, .shero[data-glass-hero] .btn-ghost:hover { background: rgba(255, 255, 255, .15); }
.shero[data-glass-hero] .hero-social { color: rgba(255, 255, 255, .78); }
.shero[data-glass-hero] .hero-social strong { color: #fff; }
.shero[data-glass-hero] .avatar-stack > span { border-color: rgba(255, 255, 255, .9); }
.shero[data-glass-hero] .chip-soft { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }

/* 하단 멜트 — 아래 섹션으로 부드럽게 녹아든다 */
.hero[data-glass-hero]::after, .shero[data-glass-hero]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(to bottom, rgba(251, 250, 248, 0), var(--bg));
  pointer-events: none; z-index: 0;
}
.features { padding: 8px 0 0; } /* 히어로에서 이어지는 흐름 */


/* 독립 홍보 페이지 — 셸 없는 풀블리드 랜딩 */
.intro-page { overflow-y: auto; }
.intro-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 26px; /* 솔리드 변형과 동일 — 탭 전환 시 바가 튀지 않는다 */
  min-height: 62px;
}
.intro-ident { display: flex; align-items: center; gap: 11px; color: #fff; }
.intro-ident strong { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.intro-logo { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); }
.intro-logo-txt {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16); color: #fff; border-radius: 9px;
  font-weight: 800; font-size: 14px; filter: none;
}
.intro-top-acts { display: flex; align-items: center; gap: 14px; }
.intro-top-acts .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .08); }
.intro-top-acts .btn-ghost:hover { background: rgba(255, 255, 255, .16); }
.intro-top-acts .chip-soft { background: rgba(255, 255, 255, .14); color: #fff; border-color: transparent; }
.intro-top-link { color: rgba(255, 255, 255, .8); font-size: 13.5px; font-weight: 600; }
.intro-top-link:hover { color: #fff; }
.intro-page .shero { padding-top: 130px; }
.intro-foot { text-align: center; padding: 44px 0 38px; }
.intro-foot a { color: var(--dim); font-size: 12.5px; }
.intro-foot strong { color: var(--muted); }
.intro-foot-links::after { content: '·'; margin: 0 8px; color: var(--faint, #c4c4cc); } /* 링크 페이지(/:slug/links) · powered by */


/* Colorful Cursor Aura — 스파크 팔레트 세 겹이 타이포를 통과한다 */
.aura { padding: var(--s-12) 0 0; }
.aura-stage { position: relative; max-width: 780px; margin: 0 auto; padding: 0 var(--s-6); }
.aura-base, .aura-mask {
  text-align: center; font-weight: 600; letter-spacing: -0.045em; line-height: 1.1;
  font-size: var(--t-display); margin: 0; word-break: keep-all; text-wrap: balance;
}
.aura-base { color: var(--ink); }
/* 마스크는 베이스와 같은 상자 — 스테이지 패딩(24)만큼 들여 겹침 어긋남을 없앤다 */
.aura-mask {
  position: absolute; inset: 0 var(--s-6); pointer-events: none;
  color: transparent;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image:
    radial-gradient(circle min(120px, 14vw) at var(--x3, 50%) var(--y3, 50%), #ffd21e 0 99%, transparent 100%),
    radial-gradient(circle min(200px, 22vw) at var(--x2, 50%) var(--y2, 50%), #3fa9e8 0 99%, transparent 100%),
    radial-gradient(circle min(300px, 32vw) at var(--x1, 50%) var(--y1, 50%), #e0442b 0 99%, transparent 100%);
}


/* 인트로 탑바 내비 — 홍보 모드에서 공개 표면 접근 */
.intro-nav { display: flex; gap: 26px; position: absolute; left: 50%; transform: translateX(-50%); }
.intro-nav a { color: rgba(255, 255, 255, .72); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; transition: color .12s; }
.intro-nav a:hover { color: #fff; }
@media (max-width: 860px) { .intro-nav { display: none; } }

/* 가독성 보험 — 어느 환경에서든 흰 타이틀이 뜬다 */
.hero[data-glass-hero] h1, .shero[data-glass-hero] h1 { text-shadow: 0 1px 30px rgba(12, 20, 48, .5); }
.hero[data-glass-hero] .sub, .shero[data-glass-hero] .tagline { text-shadow: 0 1px 18px rgba(12, 20, 48, .45); }


/* 홍보 모드 콘텐츠 페이지 — 네이비 탑바 (랜딩 히어로와 같은 판, 일관 유지) */
.intro-top-solid {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, #16255c, #1b3480);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 15px 26px; min-height: 62px;
}
.intro-top-solid .intro-ident { color: #fff; }
.intro-top-solid .intro-nav a { color: rgba(255, 255, 255, .72); }
.intro-top-solid .intro-nav a:hover, .intro-top-solid .intro-nav a.on { color: #fff; }
.intro-top-solid .intro-nav a.on { font-weight: 700; }
.intro-top-solid .intro-top-link { color: rgba(255, 255, 255, .78); }
.intro-top-solid .intro-top-link:hover { color: #fff; }
.intro-top .btn:not(.btn-ghost) { background: #fff; color: #17150f; border-color: transparent; }
.intro-top .btn:not(.btn-ghost):hover { background: #f1f0ec; }
.intro-top-solid .chip-soft { background: rgba(255, 255, 255, .14); color: #fff; border-color: transparent; }
.intro-main { min-height: calc(100vh - 298px); padding: 34px 0 10px; }
.intro-main .container { max-width: 1060px; margin: 0 auto; padding: 0 26px; }

/* maru 플랫폼 투명 헤더 — 네이비 히어로가 비친다 */
.hd-glass {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  background: transparent; border-bottom: 0;
}
.hd-glass .hd-brand { color: #fff; }
.hd-glass .hd-link { color: rgba(255, 255, 255, .78); }
.hd-glass .hd-link:hover { color: #fff; }
.hd-glass .btn:not(.btn-ghost) { background: #fff; color: #17150f; }
.hd-glass .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .08); }
.hd-glass .btn-ghost:hover { background: rgba(255, 255, 255, .16); }


/* 플랫폼 헤더 센터 내비 — 스타트업 랜딩 문법 */
.hd-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 26px; }
.hd-nav a { font-size: 13.5px; font-weight: 600; color: var(--muted); letter-spacing: -0.01em; transition: color .12s; }
.hd-nav a:hover { color: var(--text); }
.hd-glass .hd-nav a { color: rgba(255, 255, 255, .74); }
.hd-glass .hd-nav a:hover { color: #fff; }
.hd-in { position: relative; }
@media (max-width: 860px) { .hd-nav { display: none; } }


/* 소식 — 뉴스 프론트페이지 */
.news-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; align-items: start; }
.news-feat { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--card); color: inherit; }
.news-feat-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.news-feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-feat-ph { background: linear-gradient(135deg, #16255c, #1e40af); display: flex; align-items: flex-end; padding: 26px; }
.news-feat-ph b { color: #fff; font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; }
.news-feat-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.news-feat-body strong { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.news-ex { color: var(--muted); font-size: 14px; line-height: 1.65; }
.news-meta { display: flex; align-items: center; gap: 9px; }
.news-meta time { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.news-list { display: flex; flex-direction: column; }
.news-row { display: flex; flex-direction: column; gap: 6px; padding: 14px 2px; border-bottom: 1px solid var(--border); color: inherit; }
.news-row:first-child { padding-top: 4px; }
.news-row strong { font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.4; }
.news-row:hover strong { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } }


/* Linear Docs 문법의 아카이브 카드 — 아이콘·여백·하단 텍스트, 균일한 판 */
.lcard {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 176px; padding: 18px 18px 15px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--card); color: inherit;
  transition: border-color .14s;
}
.lcard-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lcard-acts { position: relative; z-index: 2; }
.lcard:hover { border-color: var(--border-2); }
.lcard-top { display: flex; align-items: flex-start; justify-content: space-between; }
.lcard-ic { color: var(--muted); display: inline-flex; }
.lcard-ic svg { width: 21px; height: 21px; }
.lcard-acts { display: inline-flex; align-items: center; height: 21px; margin-right: -6px; }
/* 21px = .lcard-ic svg 높이. 기존에는 26px .icon-act가 액션 있는 카드만 제목선을 5px 밀었다. 이제 ⋯(28/34px)는 위아래로 넘쳐도 줄 높이를 바꾸지 않는다 */
.menu.more > summary {
  width: 28px; height: 28px; border-radius: 7px;
  align-items: center; justify-content: center;
  color: var(--dim); transition: background .12s, color .12s;
}
.menu.more > summary svg { width: 16px; height: 16px; }
.menu.more > summary:hover, .menu.more[open] > summary { outline: 0; background: var(--hover); color: var(--text); }
.menu.more > summary:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.menu.more .menu-pop { top: calc(100% + 4px); min-width: 148px; padding: 4px; border-radius: 10px; }
.lcard:has(.menu[open]) { z-index: 3; }   /* 열린 메뉴가 아래 카드의 .lcard-acts(z 2)에 가리지 않게 */
@media (hover: hover) and (pointer: fine) {
  .lcard-acts, .arch-table .at-acts > * { opacity: 0; transition: opacity .12s; }
  .lcard:hover .lcard-acts, .lcard:focus-within .lcard-acts, .lcard-acts:has(.menu[open]),
  .arch-table tr:hover .at-acts > *, .arch-table tr:focus-within .at-acts > * { opacity: 1; }
}
/* 터치 기기: 위 규칙이 적용되지 않아 항상 보인다. opacity 0이어도 포커스는 받으므로 키보드 접근성은 그대로다 */
@media (max-width: 700px) { .menu.more > summary { width: 34px; height: 34px; } }
.lcard-cover { display: block; margin: 14px -6px 0; border-radius: 9px; overflow: hidden; aspect-ratio: 16 / 9; }
.lcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lcard-body { display: flex; flex-direction: column; gap: 8px; margin-top: 17px; }
.lcard-dash { width: 26px; height: 2px; border-radius: 2px; background: #17150f; margin-bottom: 3px; }
.lcard-body strong {
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lcard-desc {
  color: var(--muted); font-size: 13px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lcard-meta {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--dim);
}
.lcard-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* 빅 푸터 — 칼럼 링크 + 고스트 워드마크 */
.ftb { border-top: 1px solid var(--border); margin-top: 70px; overflow: hidden; }
.ftb-in { display: flex; gap: 64px; padding: 64px var(--gutter) 24px; max-width: 1060px; margin: 0 auto; flex-wrap: wrap; }
.ftb-brand { max-width: 300px; }
.ftb-brand strong { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.ftb-brand p { color: var(--dim); font-size: 13px; margin-top: 12px; line-height: 1.7; }
.ftb-cols { display: flex; gap: 70px; margin-left: auto; flex-wrap: wrap; }
.ftb-col { display: flex; flex-direction: column; gap: 12px; }
.ftb-col h4 { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.ftb-col a { color: var(--muted); font-size: 13.5px; }
.ftb-col a:hover { color: var(--text); }
.ftb-mark {
  font-size: clamp(120px, 21vw, 320px); font-weight: 800; letter-spacing: -0.05em; line-height: .78;
  text-align: center; color: var(--border); user-select: none; pointer-events: none;
  margin-top: 20px; transform: translateY(12%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
}
@media (max-width: 720px) { .ftb-in { gap: 34px; } .ftb-cols { margin-left: 0; gap: 40px; } }


/* ── 월드클래스 타이포 계층 ──
   워드마크(maru·학회명) = Cal Sans / 문장형 헤드라인 = Space Grotesk / 메타·번호 = JetBrains Mono */
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.05;
  text-wrap: balance;
}
.hero .sub { text-wrap: pretty; }
.cta-band h2, .showcase-head h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; text-wrap: balance;
}
.aura-base, .aura-mask { font-family: var(--font); }
.feat h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; font-size: 16.5px; }
.feat-num { font-family: var(--mono); font-weight: 600; letter-spacing: .1em; }
.ftb-mark { font-family: 'Cal Sans', var(--font-display); font-weight: 600; }
.ftb-brand strong { font-family: 'Cal Sans', var(--font); }
.news-feat-body strong, .news-feat-ph b { letter-spacing: -0.025em; }
.shero .tagline, .land-member-name { text-wrap: balance; }
.hd-nav a, .intro-nav a { font-family: var(--font); }
.hero[data-glass-hero] h1 { font-weight: 700; }
h2 { text-wrap: balance; }


/* Flow Scroll — 분야 타일 세 열 시네마틱 */
.flow {
  position: relative; height: 460px; overflow: hidden; margin-top: 26px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.flow-cols {
  position: absolute; inset: 0; max-width: 1060px; margin: 0 auto; padding: 0 26px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start;
}
.flow-col { display: flex; flex-direction: column; gap: 16px; } /* 상주 will-change 없음(§5.11) */
.flow-tile {
  flex: none; height: 96px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: var(--t-card); font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
}
.flow-tile-navy { background: linear-gradient(135deg, #16255c, #1e40af); color: #fff; border: 0; }
@media (max-width: 720px) { .flow-cols { grid-template-columns: 1fr 1fr; } .flow-col:nth-child(3) { display: none; } }


/* Hover Image — 커서를 따라오는 커버 프리뷰 */
.hi-thumb {
  position: fixed; top: 0; left: 0; z-index: 70;
  width: 300px; height: 188px; border-radius: 14px; overflow: hidden;
  pointer-events: none; transform: scale(0);
  box-shadow: 0 26px 60px rgba(23, 21, 15, .28);
}
.hi-stack { display: flex; flex-direction: column; height: 100%; transition: transform .35s var(--ease-out); }
.hi-stack span { flex: none; width: 100%; height: 100%; }
.hi-stack img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* 개설 위저드 */
.wiz-progress { display: flex; align-items: center; gap: 9px; margin: 18px 0 22px; }
.wiz-dot {
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-2); color: var(--dim);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.wiz-dot.on { background: #17150f; border-color: #17150f; color: #fff; }
.wiz-progress em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wiz-progress i { flex: 1; height: 1px; background: var(--border); }
.wiz-step.hidden { display: none; }
.wiz-step { animation: riseIn .26s var(--ease-out); }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; }

/* admin 기능 토글 */
.feat-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.feat-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px;
  font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.feat-toggle:has(input:checked) { background: #17150f; color: #fff; border-color: #17150f; }
.feat-toggle input { display: none; }
.intro-contact { display: block; margin-bottom: 10px; font-size: 12.5px; color: var(--dim); }
.intro-contact a { color: var(--muted); }


/* 소식 드래그 마키 — 카드 양식은 news-feat 그대로 */
.nmq {
  overflow: hidden; cursor: grab; margin-top: 20px; padding: 4px 0 10px;
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.nmq:active { cursor: grabbing; }
.nmq:focus-visible { outline: var(--focus); outline-offset: -2px; border-radius: 12px; } /* v5 P1: 포커스 한 문법(팀색 링 → 잉크 2px) */
.nmq-track { display: flex; gap: 18px; width: max-content; padding: 0 max(26px, calc(50vw - 530px)); will-change: transform; }
.nmq-card { width: 340px; flex: none; }
.nmq-card .news-feat-ph b { font-size: 21px; }
.nmq-card .news-feat-body strong { font-size: 16.5px; }
.nmq-card img { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .nmq { overflow-x: auto; }
  .nmq-track { transform: none !important; }
  .nmq [data-mq-copy="dup"] { display: none; }
}


/* 소식 — 4개 미만은 정적 센터 정렬 */
.nmq-static { cursor: default; overflow: visible; }
.nmq-static .nmq-track { width: auto; justify-content: center; flex-wrap: wrap; padding: 0 26px; }


/* 소식 텍스트 카드 — 커버 없는 글은 가짜 포스터 대신 아카이브 카드 문법 */
.news-card-text { min-height: 238px; }
.news-card-text .news-feat-body { height: 100%; padding: 18px 20px 16px; gap: 9px; }
.news-card-text .lcard-dash { margin: 8px 0 2px; }
.news-card-text strong { font-size: 17px; }
.news-meta-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }


/* 프로젝트 상세 메타 스트립 */
.proj-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }


/* 일정 포스터 */
.ev-poster { margin: 6px 0 22px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.ev-poster img { width: 100%; display: block; max-height: 560px; object-fit: contain; background: var(--panel); }


/* 일정 상세 — 팩트 행 */
.ev-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.ev-fact { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); font-weight: 600; }
.ev-fact svg { width: 17px; height: 17px; color: var(--dim); }
.ev-empty { color: var(--dim); font-size: 14px; margin-top: 20px; }
.article .ev-poster { margin-top: 14px; }


/* maru 히어로 — 뷰포트 스케일의 웅장함 */
.hero[data-glass-hero] {
  min-height: 92vh;
  display: flex; align-items: center; justify-content: center;
  padding: 120px 0 110px;
}
.hero[data-glass-hero] h1 { font-size: clamp(46px, 7vw, 90px); }
.hero[data-glass-hero] .sub { font-size: 17.5px; max-width: 640px; margin-top: 26px; }
.hero[data-glass-hero] .cta { margin-top: 42px; }


/* 학회 관리 — Linear식 설정 레이아웃 */
.adm-wrap { display: grid; grid-template-columns: 176px 1fr; gap: 40px; align-items: start; }
.adm-nav { position: sticky; top: 60px; display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.adm-nav a { padding: 7px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.adm-nav a:hover { background: var(--hover); color: var(--text); }
.adm-nav-danger { color: #b3261e !important; }
.adm-main { min-width: 0; }
@media (max-width: 900px) { .adm-wrap { grid-template-columns: 1fr; } .adm-nav { position: static; flex-direction: row; flex-wrap: wrap; } }


/* 관리 모드 사이드바 — Linear의 Back to app 문법 */
.sb-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 12px 16px; padding: 5px 9px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.sb-back:hover { background: var(--hover); color: var(--text); }
.sb-set-label {
  padding: 0 12px 6px;
  font-size: 11.5px; font-weight: 700; color: var(--dim);
}
/* 설정 모드 사이드바는 Linear 밀도 — 촘촘한 행, 좁은 간격 */
.sb-set-label ~ .sb-nav { gap: 1px; }
.sb-set-label ~ .sb-nav .sb-link {
  padding: 6px 12px; font-size: 13.5px; border-radius: 7px; min-height: 0;
}
.sb-link-danger { color: #b3261e !important; }


/* 내 계정 — 학회 카드 진입 화살표, 아젠다 */
.scard { position: relative; }
.scard-go { margin-left: auto; color: var(--dim); font-size: 15px; flex: none; }
.scard:hover .scard-go { color: var(--text); }
.agenda { display: flex; flex-direction: column; max-width: 720px; }


/* 설정 모드 사이드바 활성 탭 — 플랫폼은 accent가 흰색이라 잉크로 고정 */
.sb-foot-util ~ * .sb-link.on, .sb-nav .sb-link.on:not(.sb-sub) { background: var(--chip-bg); color: var(--text); font-weight: 700; }
.sb-link.on.sb-link-danger { background: #fdeceb; }


/* 칼럼 에디터 강화 */
.md-toolbar { display: flex; align-items: center; gap: 10px; }
.md-stats { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.md-draft { font-size: 11.5px; color: var(--dim); opacity: 0; transition: opacity .2s; }
.md-draft.on { opacity: 1; }
.md-toolbar [data-md-focus-btn] { margin-left: auto; }
.draft-restore {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  font-size: 13px; color: var(--muted);
}
body.md-focus .sb, body.md-focus .topbar, body.md-focus .form-page > h1,
body.md-focus .form-page > .form-sub, body.md-focus .fab, body.md-focus .bot-island { display: none !important; }
body.md-focus .content { margin-left: 0; }
body.md-focus .panel { padding: 0; }
body.md-focus .form-card > form > .field:not(.md-focus-target) { display: none; }
body.md-focus .md-focus-target { max-width: 760px; margin: 0 auto; padding-top: 30px; }
body.md-focus .md-input { min-height: 72vh; font-size: 16.5px; line-height: 1.85; }
body.md-focus .form-actions { max-width: 760px; margin: 0 auto; }


/* 포트폴리오 폼 */
.pf-form { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 0 18px; }
.pf-form summary { cursor: pointer; padding: 14px 0; font-size: 14px; font-weight: 700; list-style: none; }
.pf-form summary::-webkit-details-marker { display: none; }
.pf-form[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.pf-form form { padding-bottom: 18px; }


/* 설정/관리 화면 헤더 — 제목과 첫 카드 사이 간격 통일 */
.panel .admin-head { margin-bottom: 18px; }
.panel .admin-head + .form-sub { margin: -10px 0 18px; }
.panel .form-sub + .form-card, .panel .form-sub + .pf-form, .panel .form-sub + .poster-grid, .panel .form-sub + .agenda { margin-top: 0; }
.panel .sgrid { gap: 12px; }


/* Cal 문법 설정 헤더 — 제목+설명 한 덩어리, 우측 액션 */
.set-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-top: 38px; margin-bottom: 22px; }
.set-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.set-head p { margin-top: 5px; color: var(--muted); font-size: 13.5px; }
.set-head .btn { flex: none; }

/* 계정 사이드바 — Cal 하단 유틸리티 */
.sb-foot-util { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px 14px; border-top: 1px solid var(--border); }
.sb-util { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 7px; font-size: 13px; color: var(--muted); }
.sb-util:hover { background: var(--hover); color: var(--text); }
.sb-util svg { width: 15px; height: 15px; }
.sb-back svg { width: 15px; height: 15px; }


/* ── 모바일 최적화 ── */
@media (max-width: 700px) {
  /* 히어로 — 화면을 꽉 채우되 타이포는 읽히게 */
  .hero[data-glass-hero] { min-height: 86vh; padding: 92px 0 72px; }
  .hero[data-glass-hero] h1 { font-size: clamp(34px, 11vw, 52px); letter-spacing: -0.03em; }
  .hero[data-glass-hero] .sub { font-size: 15px; margin-top: 18px; padding: 0 6px; }
  .hero[data-glass-hero] .cta { margin-top: 28px; }
  .shero[data-glass-hero] { min-height: 78vh; padding-top: 104px; }
  .shero h1 { font-size: clamp(38px, 13vw, 62px); }
  .shero .tagline { font-size: 15px; }
  .cta .btn-lg, .cta .btn { height: 44px; padding: 0 18px; font-size: 14.5px; }

  /* 홍보 탑바 — 로고와 CTA만, 내비는 이미 숨김 */
  .intro-top { padding: 12px 16px; }
  .intro-top-solid { padding: 11px 16px; }
  .intro-ident strong { font-size: 15px; }
  .intro-main { padding: 22px 0 6px; }
  .intro-main .container { padding: 0 16px; }

  /* 소식 마키 — 카드 폭 축소, 손가락 스와이프 우선 */
  .nmq-card { width: 78vw; max-width: 320px; }
  .nmq-track { gap: 12px; padding: 0 16px; }
  .nmq-static .nmq-track { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }

  /* 설정/관리 셸 — 사이드바는 드로어로, 본문 여백 축소 */
  .set-head { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 20px; margin-bottom: 18px; }
  .set-head h1 { font-size: 21px; }
  .set-head .btn { align-self: flex-start; }
  .panel .container { padding-left: 16px; padding-right: 16px; }
  .form-card { padding: 18px 16px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .sgrid, .poster-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .table-wrap { overflow-x: auto; }

  /* 빅 푸터 */
  .ftb-in { flex-direction: column; padding: 38px 18px 14px; }
  .ftb-cols { gap: 28px; }
  .ftb-mark { font-size: 22vw; }

  /* 아우라 문장 — display 모바일(36)은 토큰이 준다 */
  .aura { padding: var(--s-10) 0 0; }

  /* 상세 페이지 */
  .article .container-narrow, .thread { padding-left: 16px; padding-right: 16px; }
  .ev-poster img { max-height: 320px; }
}

/* 터치 기기 — 유리 히어로는 스크롤을 막지 않는다 */
@media (hover: none) {
  .shero-glass, .hero[data-glass-hero] canvas { touch-action: pan-y; }
}


/* 기울기 권한 요청 버튼 (iOS) — 히어로 하단 가운데 */
.tilt-ask {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .12);
  color: #fff; font-size: 12.5px; font-weight: 600;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tilt-ask:active { background: rgba(255, 255, 255, .22); }


/* 홍보 아이브로 — 히어로가 유일한 디스플레이 보이스가 되도록 페이지 제목 강등 */
.promo-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 2px 0 22px; }
/* 저널 플레이트 레지스터 — 논문(표지: 플랫+헤어라인+mono 오버라인), 프로젝트(작업물: 그래파이트) */
.jt-paper { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.jt-in { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.jthumb-over { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.jcard-thumb-lg .jthumb-over { font-size: 13px; letter-spacing: .18em; }
.jt-paper b { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 저널 (x.ai news 문법) ── */
.jhero { display: grid; grid-template-columns: 1fr 1.15fr; gap: 34px; align-items: center; color: inherit; }
.jhero-text { display: flex; flex-direction: column; gap: 12px; }
.jhero-text strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.032em; line-height: 1.18; text-wrap: balance;
}
.jhero-ex { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.jhero-more {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 6px; padding: 9px 17px; border: 1px solid var(--border-2); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap; /* '읽어보기'가 글자 단위로 꺾이지 않게(전역 overflow-wrap:anywhere) */
}
.jhero-more svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
.jhero:hover .jhero-more { background: var(--hover); }

.jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 28px 20px; }
.jcard { display: flex; flex-direction: column; gap: 11px; color: inherit; }
.jcard-thumb {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  padding: 22px; text-align: center;
}
.jcard-thumb-lg { aspect-ratio: 16 / 10.5; border-radius: 18px; padding: 34px; }
.jcard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jcard-thumb b {
  color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: 19px; line-height: 1.24; letter-spacing: -0.022em; text-wrap: balance;
}
.jcard-thumb-lg b { font-size: clamp(22px, 2.6vw, 34px); }
.jcard-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); }
.jcard-title {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.4;
}
.jcard-arrow { color: var(--dim); font-size: 13px; transition: transform .16s var(--ease-out); }
.jcard:hover .jcard-arrow, .jhero:hover .jcard-arrow { transform: translateX(3px); color: var(--text); }
.jcard:hover .jcard-title { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .jhero { grid-template-columns: 1fr; gap: 20px; } .jhero-text { order: 2; } }

/* 저널 상세 — 중앙 정렬 대제목 + 구분선 */
.thread-backlink-text { font-size: 13.5px; font-weight: 600; color: var(--muted); width: auto; padding: 0; }
.thread-backlink-text:hover { color: var(--text); }
.thread-date { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.thread-top .thread-date + form, .thread-top .thread-date ~ .icon-act { margin-left: 10px; }
.article-head-journal { text-align: center; padding: 34px 0 30px; border-bottom: 1px solid var(--border); margin-bottom: 34px; }
.article-head-journal h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance;
}
.article-head-journal .article-byline { justify-content: center; margin-top: 16px; }


/* 홍보 하위 페이지 — 탑바 아래 브랜드 그라디언트 밴드가 흰 페이지로 용해 (세계관 연속) */
.promo-band { height: 150px; pointer-events: none; }
.intro-main { padding-top: 0; }
.intro-main .page-head { padding-top: 0; position: relative; }
.intro-main > .container:first-child, .intro-main .container-narrow:first-child { position: relative; }


/* 위저드 — 스텝 전환 시 세로 유격 제거: 카드 높이 고정, 내비는 바닥 고정 */
.form-card:has(.wiz-step) { display: flex; flex-direction: column; }
.wiz-step { display: flex; flex-direction: column; min-height: 470px; }
.wiz-step .wiz-nav { margin-top: auto; padding-top: 22px; }

/* 기능 설문 그룹 라벨 */
.wiz-group { margin-bottom: 16px; }
.wiz-group-label {
  font-size: 11.5px; font-weight: 700; color: var(--dim);
  letter-spacing: .02em; margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════
   기사 상세 .art — column/paper/project/notice 공용, x.ai/news 읽기 문법
   (파일 끝에 두어 .prose/.article/.cmts 전역 규칙을 '나중 선언'으로 이긴다)
   ════════════════════════════════════════════════════════════════ */
.art {
  --art-w: 660px; --art-pad: 20px; --ink: #17150f; --navy: #1e40af;
  width: 100%; max-width: calc(var(--art-w) + var(--art-pad) * 2);
  margin: 0 auto; padding: 0 var(--art-pad);
}
.article:has(> .art) { padding: 0; }
.page-thread > .article, .intro-page .article { padding: 0; }
.page-thread > .article > .art {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 44px); overflow: visible;
  padding-top: 18px;
}
.intro-page .intro-main > .article > .art { padding-top: 4px; }

/* 1. 유틸 레일 — 뒤로 + 관리 아이콘. 스티키 아님, 날짜 없음 */
.art-top { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 26px; }
.art-back { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; transition: color .12s; }
.art-back:hover { color: var(--text); }
.art-top .article-actions { margin-left: auto; gap: 2px; opacity: .55; transition: opacity .12s; }
.art-top:hover .article-actions, .art-top .article-actions:focus-within { opacity: 1; }
.art-top .icon-act { width: 28px; height: 28px; }
.art-top .btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* 2. 헤드 — 아이브로 · 디스플레이 제목 · 데크 · 바이라인 */
.art-head { padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.art-eyebrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.art-eyebrow a { color: var(--muted); transition: color .12s; }
.art-eyebrow a:hover { color: var(--navy); }
.art-sep { color: var(--border-2); }
.art-pin { color: var(--navy); }
.art-title {
  margin-top: 16px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -0.03em; line-height: 1.14;
  color: var(--ink); text-wrap: balance; overflow-wrap: anywhere;
}
.art-title-long { font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -0.026em; line-height: 1.2; }
.art-deck {
  margin-top: 14px; max-width: 600px;
  font-size: 18px; line-height: 1.55; letter-spacing: -0.012em; color: var(--muted); text-wrap: pretty;
}
.art-byline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 24px; font-size: 13.5px; color: var(--dim); }
.art-byline-name { font-weight: 600; color: var(--text); }
.art-byline-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.art-byline-role::before, .art-byline-read::before { content: '·'; margin-right: 9px; color: var(--border-2); }
.art-byline-read { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }

/* 3. 팩트 스트립 — 카드가 아닌 mono 표 (paper: venue/authors/base/source · project: period/role/link) */
.art-facts { margin: 0; border-bottom: 1px solid var(--border); }
.art-fact { display: grid; grid-template-columns: 96px 1fr; gap: 0 16px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--border); }
.art-head + .art-facts .art-fact:first-child { border-top: 0; }
.art-fact dt { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.art-fact dd { font-size: 13.5px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; margin: 0; }
.art-facts-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); }
.art-facts-link:hover { color: var(--navy); text-decoration-color: currentColor; }

/* 4. 커버 · 관련 논문 */
.art-cover { margin: 28px 0 0; }
.art-cover img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 14px; border: 1px solid var(--border); display: block; }
.art .rel-paper { margin: 26px 0 0; }

/* 5. 본문 — .prose 위에 덮는 기사 타이포 */
.art-prose { margin-top: 34px; font-size: 17px; line-height: 1.8; letter-spacing: -0.012em; color: var(--prose); }
.art-prose p { margin: 0 0 1.35em; }
.art-prose h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; margin: 46px 0 14px; color: var(--ink); }
.art-prose h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin: 34px 0 10px; color: var(--ink); }
.art-prose h4 { font-size: 16px; margin: 26px 0 8px; color: var(--ink); }
.art-prose > h2:first-child, .art-prose > h3:first-child { margin-top: 0; }
.art-prose ul, .art-prose ol { margin: 0 0 1.35em; padding-left: 22px; }
.art-prose li { margin-bottom: .4em; }
.art-prose li::marker { color: var(--dim); }
.art-prose blockquote { margin: 0 0 1.35em; padding: 2px 0 2px 20px; border-left: 2px solid var(--ink); color: var(--muted); font-size: 17px; background: none; border-radius: 0; }
.art-prose blockquote p:last-child { margin-bottom: 0; }
.art-prose code { font-size: .86em; border-radius: 5px; padding: 1px 6px; }
.art-prose pre { margin: 0 0 1.5em; padding: 18px 20px; border-radius: 12px; }
.art-prose pre code { font-size: 13.5px; line-height: 1.7; }
.art-prose figure { margin: 32px 0; }
.art-prose figure img, .art-prose img { border-radius: 12px; border: 1px solid var(--border); margin: 0; }
.art-prose figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--dim); text-align: center; }
.art-prose .table-wrap { margin: 0 0 1.5em; border: 0; border-radius: 0; background: none; box-shadow: none; }
.art-prose table { font-size: 14px; }
.art-prose th { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); background: none; border: 0; border-bottom: 1px solid var(--border-2); padding: 8px 10px 9px; }
.art-prose td { border: 0; border-bottom: 1px solid var(--border); padding: 9px 10px; vertical-align: top; }
.art-prose hr { width: 64px; margin: 40px auto; border: 0; border-top: 1px solid var(--border-2); }
.art-prose a { text-decoration-color: var(--border-2); }
.art-prose a:hover { color: var(--navy); text-decoration-color: currentColor; }
.art-prose strong { color: var(--ink); }
.art-prose > :last-child { margin-bottom: 0; }
.art-imgs { margin-top: 22px; }

/* 6. 푸터 — 태그(좌) · 좋아요/조회(우) */
.art-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }
.art-foot .tag-row { gap: 6px; }
.art-foot-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.art-foot .fcard-like { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; transition: background .12s; }
.art-foot .fcard-like:hover { background: var(--hover); }
.art-views { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--dim); }

/* 7. 글쓴이 · 관련 칼럼 · 이전/다음 — 카드가 아닌 헤어라인 행 */
.art .author-box { margin-top: 28px; padding: 22px 0 0; background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.art-linked { margin-top: 28px; padding: 18px 0 4px; border-top: 1px solid var(--border); }
.art-linked .sec-eyebrow { margin-bottom: 6px; color: var(--dim); }
.art .pn-nav { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }

/* 8. 댓글 — 48px 간격 + 헤어라인 + 조용한 헤더 */
.art .cmts { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.art .cmts-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.art .cmts-head .sec-count { font-size: 12px; margin-left: 0; }
.art .cmt-list { padding-top: 12px; }
.art .cmts-empty { padding: 2px 0 8px; }

@media (max-width: 1040px) {
  .art-title { font-size: clamp(28px, 4.2vw, 40px); }
}
@media (max-width: 700px) {
  .art { --art-pad: 16px; }
  .page-thread > .article > .art { padding-top: 10px; }
  .art-top { margin-bottom: 18px; }
  .art-title { font-size: clamp(27px, 8vw, 34px); letter-spacing: -0.028em; line-height: 1.18; }
  .art-title-long { font-size: clamp(23px, 6.4vw, 28px); }
  .art-deck { font-size: 16.5px; }
  .art-fact { grid-template-columns: 1fr; gap: 3px; padding: 10px 0; }
  .art-prose { font-size: 16.5px; line-height: 1.78; }
  .art-prose h2 { font-size: 21.5px; margin-top: 38px; }
  .art-prose h3 { font-size: 18px; }
  .art-cover img { border-radius: 10px; max-height: 300px; }
}

/* 한글 디스플레이 텍스트는 단어 단위로만 꺾인다 — "오래 생/각하는" 방지 */
.art-title, .art-deck, .jhero-text strong, .jcard-title, .jcard-thumb b, .lcard-title, .empty-title, .page-head h1, .set-head h1 { word-break: keep-all; }

/* ════════════════════════════════════════════════════════════════
   학회 홈 히어로 테마 — societies.theme (layout · logo · height · font)
   ════════════════════════════════════════════════════════════════ */
.shero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.shero-text { min-width: 0; }
.shero .shero-logo { width: var(--logo-size, 96px); height: var(--logo-size, 96px); margin: 0 0 22px; object-fit: contain; flex: none; }
.shero-kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 18px; }

/* 로고 표현 — 화이트 실루엣(기본) · 원본 색 · 흰 타일 */
.shero[data-glass-hero] .shero-logo { filter: brightness(0) invert(1); }
.shero[data-glass-hero][data-logo-style="original"] .shero-logo { filter: none; }
.shero[data-glass-hero][data-logo-style="tile"] .shero-logo {
  filter: none; background: #fff; padding: calc(var(--logo-size, 96px) * .14);
  border-radius: calc(var(--logo-size, 96px) * .22); box-shadow: 0 10px 34px rgba(8, 14, 40, .32);
}

/* center — 로고 위, 제목 아래 (기본) */
.shero[data-layout="center"] .shero-text { max-width: 760px; }
/* left — 명함형: 로고 왼쪽, 텍스트 오른쪽 */
.shero[data-layout="left"] .shero-in { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: clamp(24px, 4vw, 44px); }
.shero[data-layout="left"] .shero-logo { margin: 0; }
.shero[data-layout="left"] .shero-text { flex: 1 1 0; max-width: 680px; }
.shero[data-layout="left"] .cta, .shero[data-layout="left"] .hero-social { justify-content: flex-start; }
/* split — 편집 디자인형: 제목 왼쪽, 큰 로고(1.7×) 오른쪽 */
.shero[data-layout="split"] .shero-in { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: clamp(32px, 5vw, 64px); }
.shero[data-layout="split"] .shero-text { order: 0; flex: 1 1 0; max-width: 620px; }
.shero[data-layout="split"] .shero-logo { order: 1; margin: 0; width: calc(var(--logo-size, 96px) * 1.7); height: calc(var(--logo-size, 96px) * 1.7); }
.shero[data-layout="split"] .cta, .shero[data-layout="split"] .hero-social { justify-content: flex-start; }
/* mark — 엠블럼이 주인공: 로고 1.9×, 제목은 캡션급 */
.shero[data-layout="mark"] .shero-logo { width: calc(var(--logo-size, 96px) * 1.9); height: calc(var(--logo-size, 96px) * 1.9); margin-bottom: 28px; }
.shero[data-layout="mark"] h1 { font-size: clamp(22px, 2.8vw, 32px); letter-spacing: -0.02em; }
.shero[data-layout="mark"] .tagline { font-size: 15.5px; margin-top: 8px; }
.shero[data-layout="mark"] .shero-text { max-width: 560px; }

/* 높이 — 탑바(absolute 62px)만큼 위 여백을 더 준다 */
.intro-page .shero[data-height="compact"] { padding-top: 96px; padding-bottom: 44px; min-height: 0; }
.intro-page .shero[data-height="standard"] { padding-top: 130px; padding-bottom: 64px; }
.intro-page .shero[data-height="tall"] { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: 110px; padding-bottom: 110px; }
.shero[data-height="tall"] > .container { width: 100%; }

/* 서체 — display(Cal Sans)는 기본 규칙 그대로 */
.shero[data-font="grotesk"] h1 { font-family: var(--font-grotesk); font-weight: 700; letter-spacing: -0.04em; }
.shero[data-font="serif"] h1 { font-family: 'Noto Serif KR', Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; }

.land-about p { font-size: 17px; line-height: 1.8; color: var(--prose); max-width: 720px; text-wrap: pretty; }
.is-preview .intro-top-acts, .is-preview .cta-band { pointer-events: none; }

/* ── 히어로 효과 레이어 (theme.effects) — CSS 오버레이만. 유리 캔버스 위 · 하단 멜트(::after)와 콘텐츠 아래 ──
   강도(data-lv 1·2·3) → --fx. 움직이는 건 transform뿐(컴포지터), 그레인·스캔라인·비네팅은 정적이라 리페인트 0.
   .shero-fx는 쌓임 맥락을 만들지 않는다(z-index·contain·opacity 금지) — 그래야 overlay/screen이 유리 캔버스와 섞인다.
   z-index:auto라도 DOM 순서상 캔버스(z 0) 뒤, 멜트(::after, z 0) 앞, 콘텐츠(z 1) 아래에 칠해진다. */
.shero > .shero-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.shero-fx > i { position: absolute; inset: 0; display: block; --fx: .8; }
.shero-fx > i[data-lv="1"] { --fx: .5; }
.shero-fx > i[data-lv="3"] { --fx: 1; }
/* 빛줄기 — 위쪽 한 점에서 부채꼴로 쏟아지고, 아주 느리게 흔들린다 */
.shero-fx > .fx-rays {
  inset: -35% -25% 5%;
  background: repeating-conic-gradient(from 150deg at 50% 0%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .26) 2.5deg, rgba(255, 255, 255, 0) 6deg, rgba(255, 255, 255, 0) 11deg);
  -webkit-mask-image: radial-gradient(ellipse 55% 80% at 50% 0%, #000 12%, transparent 74%);
  mask-image: radial-gradient(ellipse 55% 80% at 50% 0%, #000 12%, transparent 74%);
  mix-blend-mode: screen; opacity: calc(var(--fx) * .85);
  transform-origin: 50% 0; animation: fxRays 16s ease-in-out infinite alternate;
}
@keyframes fxRays { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
/* 광택 스윕 — 유리 위를 한 번 스치고 쉰다 (7.5초 주기) */
.shero-fx > .fx-sheen {
  inset: -20% auto -20% 0; width: 36%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .12) 35%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .12) 65%, rgba(255, 255, 255, 0));
  opacity: var(--fx); transform: translateX(-130%) skewX(-16deg);
  animation: fxSheen 7.5s cubic-bezier(.45, 0, .2, 1) .8s infinite;
}
@keyframes fxSheen { 0% { transform: translateX(-130%) skewX(-16deg); } 36%, 100% { transform: translateX(360%) skewX(-16deg); } }
/* 스캔라인 — 3px 간격의 가는 가로줄 */
.shero-fx > .fx-scan { background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .38) 0 1px, rgba(0, 0, 0, 0) 1px 3px); opacity: calc(var(--fx) * .6); }
/* 필름 그레인 — feTurbulence 노이즈 타일(정적) */
.shero-fx > .fx-grain {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
  mix-blend-mode: overlay; opacity: calc(var(--fx) * .75);
}
/* 비네팅 — 가장자리를 어둡게 모아 제목에 시선이 간다 */
.shero-fx > .fx-vignette { background: radial-gradient(ellipse 78% 72% at 50% 46%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .62) 100%); opacity: var(--fx); }
@media (prefers-reduced-motion: reduce) {
  .shero-fx > i { animation: none !important; }
  .shero-fx > .fx-rays { transform: none; }
  .shero-fx > .fx-sheen { transform: translateX(120%) skewX(-16deg); opacity: calc(var(--fx) * .55); }
}

/* ── Studio 미리보기 전용 — 고르기 · 선택 링 · 인라인 편집. .is-preview(운영진 ?preview=1)에서만 ──
   --pick-s = 부모 캔버스 배율. 링 두께를 배율로 나눠 화면에서 늘 2px로 보이게 한다. */
.is-preview [data-pick], .is-preview [data-section] { cursor: pointer; }
.is-preview .shero [data-pick]:hover:not([data-picked]):not(.is-editing) { outline: calc(1.5px / var(--pick-s, 1)) dashed rgba(255, 255, 255, .6); outline-offset: calc(6px / var(--pick-s, 1)); }
.is-preview .shero [data-picked], .is-preview .shero .is-editing { outline: calc(2px / var(--pick-s, 1)) solid #fff; outline-offset: calc(6px / var(--pick-s, 1)); }
.is-preview .shero[data-picked] { outline: calc(2px / var(--pick-s, 1)) solid rgba(255, 255, 255, .85); outline-offset: calc(-10px / var(--pick-s, 1)); }
.is-preview [data-section]:hover:not([data-picked]) { outline: calc(1.5px / var(--pick-s, 1)) dashed rgba(24, 24, 27, .35); outline-offset: calc(-4px / var(--pick-s, 1)); }
.is-preview [data-sections][data-picked], .is-preview [data-section][data-picked] { outline: calc(2px / var(--pick-s, 1)) solid #18181b; outline-offset: calc(-4px / var(--pick-s, 1)); }
.is-preview .shero .is-editing { cursor: text; caret-color: #fff; }
.is-preview .shero-kicker.is-ghost { display: inline-block; opacity: .62; padding: 3px 12px; border: calc(1px / var(--pick-s, 1)) dashed rgba(255, 255, 255, .6); border-radius: 999px; }

@media (max-width: 700px) {
  .shero[data-layout] .shero-in { flex-direction: column; text-align: center; gap: 18px; }
  .shero[data-layout] .shero-logo { order: 0; margin: 0; width: min(var(--logo-size, 96px), 22vw); height: min(var(--logo-size, 96px), 22vw); }
  .shero[data-layout] .shero-text { order: 1; max-width: none; }
  .shero[data-layout] .cta, .shero[data-layout] .hero-social { justify-content: center; }
  .shero[data-layout="split"] .shero-logo, .shero[data-layout="mark"] .shero-logo { width: min(calc(var(--logo-size, 96px) * 1.3), 40vw); height: min(calc(var(--logo-size, 96px) * 1.3), 40vw); }
  .shero[data-layout="mark"] h1 { font-size: clamp(20px, 6vw, 26px); }
  .intro-page .shero[data-height="compact"] { padding-top: 88px; }
  .intro-page .shero[data-height="standard"] { padding-top: 104px; }
  .intro-page .shero[data-height="tall"] { min-height: 100svh; padding-top: 96px; padding-bottom: 72px; }
}

/* 사이드바 Studio 링크 */
.sb-link-studio { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
.sb-link-studio svg { width: 13px; height: 13px; margin-left: auto; opacity: .45; }
.sb-link-studio:hover svg { opacity: .8; }

/* ── 사이드바 앱 셸 (학회) — Linear 문법: 워크스페이스 행 · 섹션 라벨 · 30px 행 · 잉크 활성 ──
   교체 대상: app.css L245-285 전체, L1411-1414(.sb-sub/.sb-hash), L2255-2264(.sb-search; L2265 .kbd는 유지),
   L2735-2751(.sb-back/.sb-set-label/밀도 규칙/.sb-link-danger), L2762-2763, L2810-2814(.sb-foot-util/.sb-util/.sb-back svg).
   이 블록을 L245 자리에 한 번만 붙인다. 라이트 테마 값 기준(학회 셸은 항상 theme-light). */
body.has-sb { background: var(--panel); overflow: hidden; }
.app { display: flex; min-height: 100vh; }
.sb {
  /* 로컬 토큰 — hover(.05)가 chip-bg(.04)보다 진한 전역 토큰 역전을 사이드바 안에서만 바로잡음 */
  --sb-row: 30px; --sb-x: 8px;
  --sb-hover: rgba(24, 24, 27, .03);
  --sb-on: var(--chip-bg);
  width: 256px; flex: none;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 10px 8px 10px 10px;
}

/* 1. 워크스페이스 행 — 로고 24 + 이름 + ⌃⌄ 셀렉터, 우측 포스트 아이콘 버튼 */
.sb-top { display: flex; align-items: center; gap: 2px; padding: 0 0 6px; }
.sb-ws { position: relative; flex: 1; min-width: 0; }
.sb-ws > summary {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 6px 0 4px; border-radius: 7px;
  cursor: pointer; list-style: none; user-select: none;
  transition: background .1s;
}
.sb-ws > summary::-webkit-details-marker { display: none; }
.sb-ws > summary:hover, .sb-ws[open] > summary { outline: 0; background: var(--sb-hover); }
.sb-ws-name {
  flex: 1; min-width: 0; color: var(--text);
  font-size: 14px; font-weight: 600; letter-spacing: -0.015em; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-ws > summary > svg { width: 14px; height: 14px; color: var(--dim); flex: none; }
.sb-ws > summary:hover > svg { color: var(--muted); }
.sb-ws .menu-pop { left: 0; right: auto; top: calc(100% + 4px); min-width: 236px; }
.sb-logo { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; flex: none; }
.sb-logo-txt {
  background: var(--text); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Cal Sans', var(--font); font-weight: 600; font-size: 12px;
}
.sb-icon-btn {
  width: 30px; height: 30px; flex: none; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); transition: background .1s, color .1s;
}
.sb-icon-btn svg { width: 16px; height: 16px; }
.sb-icon-btn:hover { background: var(--sb-hover); color: var(--text); }

/* 2. ⌘K — 인풋처럼 보이는 버튼, 행과 같은 좌측 정렬 */
.sb-search {
  display: flex; align-items: center; gap: 8px;
  height: 30px; margin: 0 0 8px; padding: 0 6px 0 8px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); color: var(--dim); font-size: 13px;
  box-shadow: var(--card-shadow);
  transition: border-color .12s, color .12s;
}
.sb-search:hover { border-color: var(--border-2); color: var(--muted); }
.sb-search svg { width: 15px; height: 15px; flex: none; color: var(--dim); }
.sb-search span { flex: 1; text-align: left; }
.sb-search .kbd {
  font-size: 10.5px; line-height: 18px; padding: 0 5px;
  border-radius: 4px; background: var(--panel); color: var(--dim);
}

/* 3. 섹션 라벨 — 한국어라 대문자 mono 대신 Pretendard 11px 600 dim */
.sb-label {
  margin: 12px 0 2px; padding: 0 var(--sb-x);
  font-size: 11px; font-weight: 600; color: var(--dim); letter-spacing: .01em; line-height: 16px;
  user-select: none;
}
.sb-nav > .sb-label:first-child { margin-top: 2px; }

/* 4. 행 — nav만 스크롤 */
.sb-nav {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 1px;
  margin: 0 -2px; padding: 0 2px 8px;
}
.sb-link {
  display: flex; align-items: center; gap: 9px; flex: none;
  height: var(--sb-row); padding: 0 var(--sb-x); border-radius: 7px;
  color: var(--muted); font-size: 13.5px; font-weight: 500; line-height: 1;
  white-space: nowrap;
  transition: background .1s, color .1s;
}
.sb-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-link svg { width: 16px; height: 16px; flex: none; opacity: 1; color: var(--dim); transition: color .1s; }
.sb-link:hover { background: var(--sb-hover); color: var(--text); }
.sb-link:hover svg { color: var(--muted); }
.sb-link.on, .sb-link.on:hover { background: var(--sb-on); color: var(--text); font-weight: 600; }
.sb-link.on svg { color: var(--text); opacity: 1; }
.sb-lock { margin-left: auto; display: inline-flex; color: var(--dim); }
.sb-lock svg { width: 12px; height: 12px; }
/* 채널 서브트리 — '#'가 부모 아이콘 열 아래 (Slack) */
.sb-sub { height: 28px; padding-left: calc(var(--sb-x) + 2px); font-size: 13px; }
.sb-hash { width: 12px; margin-right: 2px; text-align: center; flex: none; color: var(--dim); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.sb-sub.on .sb-hash { color: var(--text); }
.sb-sub .badge-bolt { margin-left: auto; }
/* 볼트 옐로우 — 시스템 스파크 색, 학회 accent와 무관하게 고정 */
.badge-bolt {
  margin-left: auto; flex: none;
  background: #ffd21e; color: #4a3800;
  font-family: var(--mono); font-weight: 700; font-size: 10.5px;
  border-radius: 999px; padding: 0 6px; line-height: 17px; min-width: 18px; text-align: center;
}
.sb-link.on .badge-bolt { background: #ffd21e; }
.sb-sep { border-top: 1px solid var(--border); margin: 8px 6px; }

/* 5. 푸터 — 유저 행(아바타 24 + 이름/역할 + 기어) · 방문자 CTA · powered by */
.sb-foot { margin-top: auto; flex: none; padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.sb-cta { display: flex; flex-direction: column; gap: 6px; padding: 0 0 6px; }
.sb-cta .btn { height: 32px; font-size: 13.5px; border-radius: 7px; }
.sb-cta .sb-chip { height: 32px; justify-content: center; }
.sb-user-menu { position: relative; }
.sb-user-menu > summary { display: block; list-style: none; cursor: pointer; border-radius: 7px; transition: background .1s; }
.sb-user-menu > summary::-webkit-details-marker { display: none; }
.sb-user-menu > summary:hover, .sb-user-menu[open] > summary { outline: 0; background: var(--sb-hover); }
.sb-user { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 6px; }
.sb-user .avatar { --av: 24px; }
.sb-user-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-user-name { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-sub { font-size: 11px; color: var(--dim); line-height: 1.15; }
.sb-user-gear { display: inline-flex; flex: none; color: var(--dim); }
.sb-user-gear svg { width: 15px; height: 15px; }
.sb-user-menu > summary:hover .sb-user-gear { color: var(--muted); }
.sb-user-menu .menu-pop { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; min-width: 236px; }
.sb-powered { padding: 4px 6px 0; font-size: 10.5px; color: var(--dim); letter-spacing: .01em; }
.sb-powered strong { font-weight: 600; }
.sb-powered:hover { color: var(--muted); }
@media (min-width: 881px) { .sb-backdrop { display: none; } }

/* 6. 관리 모드 — 같은 문법: 뒤로 행 + 라벨 + 30px 행, Studio·위험 구역 */
.sb-back {
  display: flex; align-items: center; gap: 9px; flex: none;
  height: var(--sb-row); margin: 0 0 4px; padding: 0 var(--sb-x); border-radius: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--muted); transition: background .1s, color .1s;
}
.sb-back svg { width: 16px; height: 16px; color: var(--dim); }
.sb-back:hover { background: var(--sb-hover); color: var(--text); }
.sb-back:hover svg { color: var(--muted); }
.sb-link-studio svg { color: var(--muted); }
.sb-nav .sb-link-danger, .sb-nav .sb-link-danger svg { color: var(--danger-fg); }
.sb-nav .sb-link-danger:hover { background: rgba(220, 38, 38, .05); }
.sb-nav .sb-link.on.sb-link-danger { background: #fdeceb; color: var(--danger-fg); }

/* 7. 계정 셸(platformShell accountTab, ui.js L206-231) 호환 — 같은 밀도로 매핑 */
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 4px 6px 6px; }
.sb-ident { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: 'Cal Sans', var(--font); font-weight: 600; font-size: 15px; }
.sb-foot-util { display: flex; flex-direction: column; gap: 1px; padding: 8px 0 0; border-top: 1px solid var(--border); }
.sb-util { display: flex; align-items: center; gap: 9px; height: var(--sb-row); padding: 0 var(--sb-x); border-radius: 7px; font-size: 13px; color: var(--muted); }
.sb-util svg { width: 16px; height: 16px; color: var(--dim); }
.sb-util:hover { background: var(--sb-hover); color: var(--text); }
.sb-util-form { margin: 0; }
button.sb-util { width: 100%; border: 0; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.sb-set-label { margin: 2px 0; padding: 0 var(--sb-x); font-size: 11px; font-weight: 600; color: var(--dim); line-height: 16px; }

/* ── 모바일 드로어 패치 — app.css L1334-1339 `.sb { ... }` 블록만 이걸로 교체(.sb.open / .sb-backdrop은 그대로) ── */
@media (max-width: 880px) {
  .sb {
    position: fixed; left: 0; top: 0; z-index: var(--z-drawer);
    width: min(280px, 86vw); height: 100dvh;
    translate: -100% 0; transition: translate var(--dur-2) var(--ease-in);
    box-shadow: none; background: var(--panel);
    border-right: 1px solid var(--border);
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) 12px;
    /* overflow-y: auto 제거 — .sb-nav가 스크롤하고, 유저 행 팝오버(위로 열림)가 잘리지 않게 */
  }
}

/* ════ 프로필 = 포트폴리오 (/:slug/me · members/:uid · /u/:id) ════ */
.pf { max-width: 964px; margin: 0 auto; padding: 38px 32px 72px; }
.container > .pf { padding-left: 0; padding-right: 0; }
.pf > .art-back { display: inline-block; margin-bottom: 22px; }
.pf-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: start; }
.pf-head > .avatar { margin-top: 4px; }
.pf-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--dim); margin-bottom: 10px; }
.pf-eyebrow .dot { color: var(--border-2); }
.pf-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-name { font-family: var(--font-display); font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
.pf-bio { font-size: 16px; line-height: 1.6; margin-top: 12px; max-width: 560px; text-wrap: pretty; }
.pf-major { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pf-head .contact-row { margin-top: 14px; }
.pf-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 132px; }
.pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 34px 0 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.pf-stats > div { padding: 16px 18px; border-right: 1px solid var(--border); }
.pf-stats > div:last-child { border-right: 0; }
.pf-stats b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.pf-stats span { font-size: 12.5px; color: var(--muted); }
.pf-sec { margin-top: 52px; }
.pf-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pf-sec-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--dim); }
.pf-sec-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; margin-top: 5px; }
.pf-sec-note { font-size: 12.5px; color: var(--dim); }
.pf-note { font-size: 14px; color: var(--muted); line-height: 1.7; }
.pf-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.pf-note b { color: var(--text); font-weight: 600; }
/* 글 목록 — 날짜 · 성격 · 제목 · 반응 · 공개 스위치 */
.pf-list { border-top: 1px solid var(--border); }
.pf-row { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 8px 2px; border-bottom: 1px solid var(--border); }
.pf-row-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 16px; color: inherit; }
.pf-row-main time { flex: none; width: 82px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.pf-row-type { flex: none; width: 60px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pf-row-main strong { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row-main:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.pf-row-stat { flex: none; display: flex; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.pf-row-stat span { display: inline-flex; align-items: center; gap: 4px; }
.pf-row-stat svg { width: 12px; height: 12px; }
/* 공개 스위치 — 켜지면 잉크 테두리 + 잉크 점 */
.pf-tg-form { flex: none; display: inline-flex; }
.pf-tg { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border: 1px solid var(--border-2); border-radius: 999px; background: var(--bg); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: border-color .12s, color .12s; }
.pf-tg::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--border-2); transition: background .12s; }
.pf-tg.on { color: var(--text); border-color: var(--text); }
.pf-tg.on::before { background: var(--text); }
button.pf-tg:hover { color: var(--text); border-color: var(--text); }
.pf-tg.is-static { cursor: default; height: 24px; padding: 0 9px; font-size: 11.5px; }
.pf-tg.busy { opacity: .55; pointer-events: none; }
/* 공개 페이지 — 소속 학회 */
.pf-socs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pf-soc { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; color: inherit; transition: border-color .12s; }
.pf-soc:hover { border-color: var(--border-2); }
.pf-soc img, .pf-soc-txt { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; flex: none; }
.pf-soc-txt { display: inline-flex; align-items: center; justify-content: center; background: var(--text); color: var(--bg); font-weight: 800; }
.pf-soc strong { display: block; font-size: 14px; font-weight: 700; }
.pf-soc em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pf-public { padding-top: 56px; }
.pf-public-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 14px; }
.pf-public-link strong { display: block; font-size: 14px; }
.pf-public-link span { font-size: 12.5px; color: var(--muted); }
.article-actions .pf-tg-form { margin-right: 4px; }
@media (max-width: 760px) {
  .pf { padding: 22px 18px 56px; }
  .pf-head { grid-template-columns: 1fr; gap: 16px; }
  .pf-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .pf-stats { grid-template-columns: repeat(3, 1fr); }
  .pf-stats > div:nth-child(3n) { border-right: 0; }
  .pf-row-type, .pf-row-stat { display: none; }
  .pf-row-main time { width: auto; }
}

/* ════════════════════════════════════════════════════════════════
   기사 = x.ai 리포트 문법 (.art-x) — 넓은 머리(가운데 정렬) · 좁은 본문 단 · 본문보다 넓은 피겨
   댓글은 본문 끝의 독립 섹션(고정 독 없음) — 들어오자마자 입력창이 아니라 글이 보인다
   ════════════════════════════════════════════════════════════════ */
.art.art-x { --art-w: 1080px; --col: 700px; --fig: 920px; max-width: calc(var(--art-w) + var(--art-pad) * 2); padding-top: 24px; padding-bottom: 72px; }
.art-x > * { width: 100%; max-width: var(--col); margin-left: auto; margin-right: auto; }
.art-x > .art-top, .art-x > .art-head { max-width: var(--art-w); }
.art-x > .art-cover, .art-x > .art-imgs { max-width: var(--fig); }
.art-x .art-top { margin-bottom: 64px; }
.art-top-date { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.art-x .art-top .article-actions { margin-left: 14px; }
.art-x .art-head { text-align: center; padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--border); }
.art-x .art-eyebrow { justify-content: center; }
.art-x .art-title { margin: 18px auto 0; max-width: 940px; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.08; letter-spacing: -0.038em; }
.art-x .art-title-long { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: -0.03em; }
.art-x .art-deck { margin: 26px auto 0; max-width: 660px; font-size: 19px; line-height: 1.62; color: var(--text); }
.art-x .art-byline { justify-content: center; margin-top: 30px; }
.art-x .art-facts { margin-bottom: 44px; border-top: 1px solid var(--border); }
.art-x .art-head + .art-facts .art-fact:first-child { border-top: 0; }
.art-x .art-cover { margin: 0 auto 52px; }
.art-x .art-cover img { max-height: 540px; border-radius: 18px; }
.art-x .rel-paper { margin: 0 auto 40px; }
.art-x .art-prose { margin-top: 0; font-size: 17.5px; line-height: 1.82; }
.art-x .art-prose h2 { font-size: 26px; margin: 56px 0 16px; }
.art-x .art-foot { margin-top: 56px; }
/* 댓글 — 맨 끝의 독립 섹션 */
.art-cmts { margin-top: 72px !important; padding-top: 30px; border-top: 1px solid var(--border-2); }
.art-cmts-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.art-cmts-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.art-cmts .cmts-empty { margin-bottom: 4px; }
.art-cmt-form .cmt-form { margin-top: 12px; padding: 18px 0 0; border-top: 1px solid var(--border); border-bottom: 0; }
.art-cmt-form .hint { padding: 16px 0 0 !important; }
.page-article { padding-bottom: 0; }
@media (max-width: 700px) {
  .art.art-x { padding-top: 12px; padding-bottom: 48px; }
  .art-x .art-top { margin-bottom: 36px; }
  .art-x .art-head { padding-bottom: 36px; margin-bottom: 36px; }
  .art-x .art-title { font-size: clamp(28px, 8.4vw, 38px); }
  .art-x .art-deck { font-size: 17px; }
  .art-x .art-prose { font-size: 16.5px; }
  .art-cmts { margin-top: 52px !important; }
}

/* ════ 리포트 블록 — 피겨 폭(wide/stage) · 핵심 수치(.md-kpis) · 풀쿼트(.md-pull) ════ */
/* ════════════════════════════════════════════════════════════════
   리포트 블록 — md.js 출력: 피겨(.md-fig · -wide · -stage) · 핵심 수치(.md-kpis) · 풀쿼트(.md-pull)
   기본형은 모든 .prose(편집 미리보기 포함)에서 단 폭 안에 머문다.
   단 밖 브레이크아웃은 기사(.art-prose)에서, 기사 래퍼가 쿼리 컨테이너일 때만 켜진다 —
   본문은 사이드바 옆 스크롤 .panel 안이라 100vw 기준 폭은 패널 가로 넘침을 만든다.
   ════════════════════════════════════════════════════════════════ */

/* 피겨 — 작은 이미지는 가운데, 캡션은 본문 서체(한글이 mono 폴백으로 떨어지지 않게) */
.prose .md-fig { margin: 32px 0; }
.prose .md-fig-media { display: block; }
.prose .md-fig img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.prose .md-fig figcaption {
  margin-top: 12px; font-family: var(--font); font-size: 13px; line-height: 1.55;
  letter-spacing: -0.005em; color: var(--dim); text-align: center; text-wrap: pretty;
}
.prose .md-fig-wide, .prose .md-fig-stage { margin: 44px 0; }
.prose .md-fig-wide img { border-radius: 16px; }

/* 무대 — 학회색을 잉크 쪽으로 깊게 섞은 그라디언트 위에 스크린샷이 떠 있다.
   --link는 학회 accent가 있을 때만 주입되는 토큰 → accent 없는 학회는 모노크롬 잉크 무대.
   색은 background-color / background-image로 나눠, color-mix 미지원이면 단색 잉크로 남는다 */
.prose .md-fig-stage .md-fig-media {
  --stage: var(--link, #17150f);
  padding: clamp(18px, 7%, 72px);
  border-radius: 16px;
  background-color: #17150f;
  background-image:
    radial-gradient(120% 85% at 18% 0%, color-mix(in oklab, var(--stage) 72%, #0b0a08), transparent 72%),
    linear-gradient(155deg, color-mix(in oklab, var(--stage) 46%, #0b0a08), #0b0a08 88%);
}
.prose .md-fig-stage img {
  border: 0; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 28px 60px -22px rgba(0, 0, 0, .6);
}

/* 브레이크아웃 — 기사 래퍼를 쿼리 컨테이너로 두고 폭 = min(1040px, 컨테이너 − 48px).
   가운데 정렬은 음수 마진 대신 margin-left 50% + translate. 컨테이너가 820px 미만이거나
   :has()/컨테이너 쿼리 미지원이면 @container 규칙 자체가 꺼져 단 폭 피겨로 폴백 */
.article:has(> .art) { container: art / inline-size; }
@container art (min-width: 820px) {
  .art-prose > .md-fig-wide,
  .art-prose > .md-fig-stage {
    width: min(1040px, 100cqi - 48px);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* 핵심 수치 — 카드·색 없이, 잉크 헤어라인 위 큰 숫자 + 작은 라벨.
   .md-stats는 편집기 글자수 표시(mono 11px)가 이미 쓰는 클래스라 .md-kpis로 분리 */
.prose .md-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  gap: 26px 24px; margin: 36px 0 40px;
}
.prose .md-kpi { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 14px; border-top: 1px solid var(--ink, var(--text)); }
.prose .md-kpi-n {
  font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--ink, var(--text));
  overflow-wrap: anywhere;
}
.prose .md-kpis-4 .md-kpi-n { font-size: 36px; }
.prose .md-kpi-l { font-size: 13.5px; line-height: 1.5; letter-spacing: -0.005em; color: var(--muted); text-wrap: pretty; }

/* 풀쿼트 — 디스플레이 서체의 큰 인용. 왼쪽 선 대신 위쪽 짧은 잉크 바 */
.prose .md-pull {
  margin: 44px 0; padding: 22px 0 0; border: 0; border-radius: 0;
  background: linear-gradient(var(--ink, var(--text)), var(--ink, var(--text))) 0 0 / 40px 2px no-repeat;
  font-family: var(--font-display); font-size: clamp(23px, 2.8vw, 30px); font-weight: 600;
  line-height: 1.36; letter-spacing: -0.024em; color: var(--ink, var(--text));
  text-wrap: balance; word-break: keep-all;
}
.prose .md-pull p { margin: 0; }

@media (max-width: 700px) {
  .prose .md-fig-wide img, .prose .md-fig-stage .md-fig-media { border-radius: 12px; }
  .prose .md-fig-stage img { border-radius: 7px; }
  .prose .md-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .prose .md-kpi-n, .prose .md-kpis-4 .md-kpi-n { font-size: 32px; }
  .prose .md-pull { margin: 36px 0; font-size: 22px; }
}

/* ── 리포트 에디터 — 데크 · 블록 버튼 · 기사 골격 미리보기 ── */
.form-page.form-write { max-width: 800px; }
textarea.input.input-deck { resize: none; font-size: 15.5px; line-height: 1.55; }
.md-preview.art {
  max-width: none; margin: 0; padding: 30px 28px 36px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}
/* 집중 모드 — writeForm은 .form-card가 아니라 .form-plain이라 기존 규칙이 안 걸렸다 */
body.md-focus .form-plain > form > .field:not(.md-focus-target),
body.md-focus .form-page > .field { display: none; }
@media (max-width: 700px) { .md-preview.art { padding: 20px 16px 26px; } }

/* ── 썸네일 편집기 — 왼쪽 실제 카드 미리보기, 오른쪽 컨트롤 ── */
.thumb-edit { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; padding: 16px; border: 1px solid var(--border); border-radius: 14px; }
.thumb-prev { display: flex; flex-direction: column; gap: 8px; }
.thumb-live { position: relative; width: 100%; }
.thumb-live img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb-live img[hidden] { display: none; }
.thumb-live.has-img b { visibility: hidden; }
.thumb-cap { font-size: 12px; color: var(--dim); text-align: center; }
.thumb-ctl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.thumb-k { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.thumb-k:first-child { margin-top: 0; }
.thumb-sw { display: flex; flex-wrap: wrap; gap: 7px; }
.thumb-sw label { position: relative; cursor: pointer; }
.thumb-sw input { position: absolute; opacity: 0; }
.thumb-sw span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 26px; border-radius: 7px; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: box-shadow .12s, transform .12s; }
.thumb-sw label:hover span { transform: translateY(-1px); }
.thumb-sw input:checked + span { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text); }
.thumb-sw input:focus-visible + span { outline: var(--focus); outline-offset: var(--focus-offset); }
.thumb-clear { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.thumb-ctl .hint { margin-top: 2px; }
@media (max-width: 700px) { .thumb-edit { grid-template-columns: 1fr; } }

/* ── 썸네일 렌더 v2 — 이미지 초점·확대, 문구 크기·정렬·위치, 필터·효과 레이어. 카드·히어로·스튜디오가 같은 마크업 ── */
.jcard-thumb { position: relative; isolation: isolate; }
.jcard-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jcard-thumb > img[hidden] { display: none; }
.jcard-thumb > b, .jcard-thumb > .jt-in { position: relative; z-index: 2; }
.jcard-thumb b { white-space: pre-line; }
.jt-p-none > b, .jt-p-none > .jt-in { display: none; }
/* 문구 위치(세로)·정렬(가로) */
.jcard-thumb.jt-p-top { align-items: flex-start; }
.jcard-thumb.jt-p-bl { align-items: flex-end; }
.jcard-thumb.jt-a-left { justify-content: flex-start; text-align: left; }
.jcard-thumb.jt-a-right { justify-content: flex-end; text-align: right; }
.jt-a-left > .jt-in { align-items: flex-start; }
.jt-a-right > .jt-in { align-items: flex-end; }
/* 문구 크기 — 카드·논문 표지·히어로 각자의 기본 크기에 배율 */
.jt-s-s { --jt-k: .8; }
.jt-s-l { --jt-k: 1.32; }
.jcard-thumb.jt-s-s b, .jcard-thumb.jt-s-l b { font-size: calc(19px * var(--jt-k)); }
.jt-paper.jt-s-s b, .jt-paper.jt-s-l b { font-size: calc(15px * var(--jt-k)); }
.jcard-thumb-lg.jt-s-s b, .jcard-thumb-lg.jt-s-l b { font-size: calc(clamp(22px, 2.6vw, 34px) * var(--jt-k)); }
/* 이미지 위 문구 — 가독성 그림자 / 연한 바탕 — 학회색 글자 */
.jt-has-img > b, .jt-has-img > .jt-in { text-shadow: 0 1px 14px rgba(0, 0, 0, .38); }
.jt-lt b, .jt-lt .jthumb-over { color: var(--tk); }
/* 기본 썸네일 한 체계(v5 §4.3, P4) — 표지도 팀이 꾸민 흔적(thumb_*)도 없으면 종이(--canvas-2) + 가운데 종류 선 아이콘 24(ink-4).
   썸네일 안에 제목을 넣지 않는다(제목은 카드 아래 한 번). 팀이 썸네일 스튜디오로 꾸민 판(jt-*)은 팀 콘텐츠라 그대로 */
.jcard-thumb.jt-default { display: flex; align-items: center; justify-content: center; padding: 0; background: var(--canvas-2); color: var(--ink-4); box-shadow: inset 0 0 0 1px var(--line); }
.jcard-thumb.jt-default > svg { position: static; width: var(--ic-xl); height: var(--ic-xl); flex: none; --icon-stroke: 1.5; }
.jt-lt.jt-paper { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
/* 필터 — 듀오톤(학회색 어둠→밝음), 흑백, 어둡게 */
.jt-fl { position: absolute; inset: 0; pointer-events: none; }
.jt-f-duo > img { filter: grayscale(1) contrast(1.2); }
.jt-f-mono > img { filter: grayscale(1) contrast(1.08); }
.jt-f-duo > .jt-fl::before, .jt-f-duo > .jt-fl::after { content: ''; position: absolute; inset: 0; }
.jt-f-duo > .jt-fl::before { background: var(--dt1); mix-blend-mode: screen; }
.jt-f-duo > .jt-fl::after { background: var(--dt2); mix-blend-mode: multiply; }
.jt-f-dim > .jt-fl { background: linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .58)); }
/* 효과 — 그레인·비네팅·광택 */
.jt-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.jt-fx-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px; mix-blend-mode: overlay; opacity: .5;
}
.jt-fx-vignette { background: radial-gradient(125% 100% at 50% 45%, transparent 50%, rgba(0, 0, 0, .52) 100%); }
.jt-fx-gloss {
  background:
    linear-gradient(116deg, transparent 26%, rgba(255, 255, 255, .24) 42%, rgba(255, 255, 255, .05) 52%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 44%);
  mix-blend-mode: screen;
}
/* 글쓰기 폼 — 미리보기 카드 자체가 스튜디오를 여는 버튼 */
.thumb-open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; border-radius: 14px; cursor: pointer; }
.thumb-open:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* ── 프로젝트 카드 — 상태·기간 중심, 정갈하게 ── */
.lcard.pcard2 { min-height: 0; padding: 18px 20px 16px; gap: 0; }
.pc-cover { display: block; margin: -18px -20px 16px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 13px 13px 0 0; border-bottom: 1px solid var(--border); }
.pc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-top { align-items: center; min-height: 22px; }
.pc-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border: 1px solid var(--border-2); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pc-status::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--dim); }
.pc-status.on { color: var(--text); border-color: var(--text); }
.pc-status.on::before { background: var(--text); box-shadow: none; }
.pc-title { margin-top: 16px; font-size: 17px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-desc { margin-top: 7px; font-size: 13.5px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; font-size: 12px; }
.pc-foot:empty { display: none; }
.pc-period { font-family: var(--mono); letter-spacing: .02em; color: var(--dim); white-space: nowrap; }
.pc-role { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poster-grid:has(> .pcard2) { align-items: stretch; }

/* ════════════════════════════════════════════════════════════════
   maru 랜딩 = x.ai 문법 — 흰 헤더(왼쪽 내비·알약 버튼), 공지 알약, 대형 잉크 제목, 목업 카드 3장
   ════════════════════════════════════════════════════════════════ */
/* 플랫폼 헤더(.hd-x, 64/56 · 햄버거 시트 · 랜딩 유리/다크 판정)는 v5 P2 — v4-platform.css §1 한 곳 */

.xhero { padding: 96px 0 86px; background: #fff; } /* CTA 54→56(xl, §6 허용) — 히어로 높이는 그대로 두려고 아래 여백 −2 */
.xhero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.xpill {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 7px;
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
  font-size: 14.5px; color: #17150f; transition: border-color .15s, box-shadow .15s;
  animation: xrise .6s cubic-bezier(.16, 1, .3, 1) both;
}
.xpill:hover { border-color: var(--border-2); box-shadow: 0 2px 10px rgba(23, 21, 15, .06); }
.xpill-new { padding: 3px 9px; border-radius: 999px; background: #fdece8; color: #c2361f; font-size: 12.5px; font-weight: 600; }
.xpill-t { font-weight: 500; letter-spacing: -0.01em; }
.xpill-go { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: rgba(24, 24, 27, .05); }
.xhero-title {
  margin-top: 34px; font-family: var(--font-grotesk); font-weight: 600;
  font-size: clamp(42px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.05em; color: #17150f;
  text-wrap: balance; animation: xrise .7s .05s cubic-bezier(.16, 1, .3, 1) both;
}
.xu { position: relative; white-space: nowrap; }
.xu::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em; height: .06em; min-height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, #d4d4d8, #9ca3af 30%, #1e40af 70%, #3fa9e8);
  transform-origin: left; animation: xline 1s .55s cubic-bezier(.16, 1, .3, 1) both;
}
.xhero-sub { margin-top: 26px; max-width: 720px; font-size: 19px; line-height: 1.6; color: #17150f; letter-spacing: -0.012em; text-wrap: balance; animation: xrise .7s .12s cubic-bezier(.16, 1, .3, 1) both; }
.xhero-cta { display: flex; gap: 12px; margin-top: 38px; flex-wrap: wrap; justify-content: center; animation: xrise .7s .18s cubic-bezier(.16, 1, .3, 1) both; }
.xbtn { display: inline-flex; align-items: center; gap: 8px; height: var(--h-xl); padding: 0 26px; border-radius: 999px; font-size: 16.5px; font-weight: 500; letter-spacing: -0.01em; transition: background .15s, transform .15s; }
.xbtn:active { transform: scale(.98); }
.xbtn-dark { background: #17150f; color: #fff; padding-right: 20px; }
.xbtn-dark:hover { background: #2c2922; }
.xbtn-soft { background: rgba(24, 24, 27, .05); color: #17150f; }
.xbtn-soft:hover { background: rgba(24, 24, 27, .09); }
@keyframes xrise { from { opacity: .01; transform: translateY(10px); } } /* .01 — 0이면 브라우저가 LCP 후보에서 빼 첫 표시 지표가 늦어진다(보이는 모습은 같다) */
@keyframes xline { from { transform: scaleX(0); } }

@media (max-width: 700px) {
  .xhero { padding-top: 48px; }
  .xhero-sub { font-size: 16.5px; }
  .xbtn { height: var(--h-xl); padding: 0 22px; font-size: 15.5px; }
  .xhero { padding-bottom: 82px; } /* CTA 50→56 — 히어로 높이 유지 */
  .xhero-cta { row-gap: 6px; } /* 두 줄로 접힐 때(영문) 늘어난 6px를 줄 간격에서 되돌린다 */
  .xpill-t { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .xhero *, .xpill { animation: none !important; } }

.xhero-title, .xhero-sub, .art-title, .art-deck { word-break: keep-all; }

/* ════ 랜딩 헤더 — 다크 스토리 구간([data-hd-dark])에서만 투명 + 흰 글자, 밝은 섹션은 늘 유리. 흰 글로우(text-shadow) 삭제.
   규칙은 v4-platform.css §1(.hd-landing · hd-scrolled · hd-on-dark · hd-away), 판정은 landing.js ════ */

/* ════ 스토리 — 좌우는 물감 판에 글자가 바뀌며 영상처럼 겹쳐 흐르고, 걷히면 아크릴로 칠한 밤하늘 아래 검은 언덕 위에
   학생들이 걸어와 그룹을 이루고, 서로 이어지고, 질문을 띄우고, 그 질문들이 모여 새벽 붓 자국이 번지며 새 빛이 떠오른다 ════ */
.story { position: relative; height: 400vh; background: #08070b; --x: 0; }
.story-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sp { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.sp-l { left: 0; width: 30%; transform: translateX(calc(var(--x) * -100%)); }
.sp-r { right: 0; width: 30%; transform: translateX(calc(var(--x) * 100%)); }
.sp-c { inset: 0; clip-path: inset(0 calc((1 - var(--x)) * 30%) 0 calc((1 - var(--x)) * 30%)); }
.sp-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #1a2048 0%, #222c6a 38%, #33397a 61%, #5a548c 67%, #b0808f 71.6%, #d9a393 76.6%, #08070b 77.2%); } /* 캔버스가 칠해지기 전 잠깐 — 밑칠과 같은 색 */
.sp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 캔버스 천의 결 — 그림이니 움직이지 않는다. 가로·세로 올이 촘촘히 엇갈린 짜임 + 고운 알갱이 */
.sp-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .34; mix-blend-mode: overlay; z-index: 3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='w' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.9 .09' numOctaves='2' seed='4' stitchTiles='stitch' result='a'/><feTurbulence type='fractalNoise' baseFrequency='.09 .9' numOctaves='2' seed='9' stitchTiles='stitch' result='b'/><feBlend in='a' in2='b' mode='multiply'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.5 -.35'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
}

/* 타이포 판 — 한 장씩 겹쳐 들어오고, 글자는 흐릿하게 맺히며 판이 머무는 동안 굵기가 바뀐다(Pretendard Variable 가변 45–920).
   판 바탕(물감 색)은 짧게 겹친다 — 빨강·크림·군청이 오래 섞이면 탁한 보라 회색이 되니까. 흐림은 글자에만 */
.plates { position: absolute; inset: 0; }
.plate { position: absolute; inset: 0; opacity: 0; overflow: hidden; font-family: 'Pretendard Variable', Pretendard, sans-serif; }
.plate.was { opacity: 1; z-index: 1; }
.plate.on { opacity: 1; z-index: 2; animation: plateIn .6s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes plateIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes plBlur { from { filter: blur(12px); } to { filter: blur(0); } }
.plate > * { position: absolute; display: block; }
/* 판도 물감 — 납작붓으로 가로로 끌어 칠한 결이 비친다 */
.plate::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .24;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='b' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.008 .3' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='1.5 0 0 0 -.25  1.5 0 0 0 -.25  1.5 0 0 0 -.25  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>") 0 0 / 480px 480px;
}
.pl-cream::before, .pl-paper::before { opacity: .11; } /* 밝은 판은 결을 옅게 — 회반죽처럼 보이지 않게 */
.plate.was > * { animation: plDrift 7s linear both; }
.plate.on > * { animation: plDrift 7s linear both, plBlur 1.5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes plDrift { from { scale: 1.07; } to { scale: 1; } }
.plate.was .pl-big, .plate.was .pl-q, .plate.was .pl-vert, .plate.was .pl-sigma { animation: plDrift 7s linear both, plWght 3.4s cubic-bezier(.65, 0, .25, 1) both; }
.plate.on .pl-big, .plate.on .pl-q, .plate.on .pl-vert, .plate.on .pl-sigma { animation: plDrift 7s linear both, plWght 3.4s cubic-bezier(.65, 0, .25, 1) both, plBlur 1.5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes plWght { from { font-weight: 140; letter-spacing: .02em; } to { font-weight: 820; letter-spacing: -.045em; } }
.plate { color: #17150f; }
.pl-mono { font: 600 11.5px/1.4 var(--mono); letter-spacing: .18em; left: 26px; top: 104px; transform-origin: left top; }
.pl-mono-lt { color: rgba(246, 239, 228, .7); }
.pl-big { left: 22px; bottom: 44px; font-size: clamp(60px, 8.4vw, 150px); line-height: .95; transform-origin: left bottom; word-break: keep-all; }
.pl-rule { left: 26px; right: 26px; bottom: calc(44px + clamp(60px, 8.4vw, 150px) + 18px); height: 1px; background: currentColor; opacity: .5; }
.pl-red { background: #c9412e; }
.pl-cream { background: #ece2cf; }
.pl-q { left: 0; right: 0; top: 50%; translate: 0 -54%; text-align: center; font-size: min(46vh, 30vw); line-height: 1; color: #17150f; }
.pl-cream .pl-mono, .pl-rose .pl-mono { top: auto; bottom: 48px; }
.pl-night { background: #16205a; color: #f3ece2; }
.pl-splat { inset: 0; background: radial-gradient(1.6px 1.3px at 18% 14%, #f4efe2 98%, transparent), radial-gradient(1px 1px at 31% 22%, #f4efe2 98%, transparent), radial-gradient(2.6px 2px at 12% 38%, #f4efe2 96%, transparent), radial-gradient(1px 1px at 44% 9%, #f4efe2 98%, transparent), radial-gradient(1.2px 1px at 58% 31%, #f4efe2 98%, transparent), radial-gradient(1px 1px at 26% 57%, rgba(244,239,226,.8) 98%, transparent), radial-gradient(1.8px 1.4px at 38% 70%, #f4efe2 96%, transparent), radial-gradient(1px 1px at 9% 81%, rgba(244,239,226,.75) 98%, transparent), radial-gradient(1.1px 1px at 22% 90%, #f4efe2 98%, transparent), radial-gradient(1px 1px at 63% 64%, rgba(244,239,226,.8) 98%, transparent), radial-gradient(1px 1px at 16% 67%, #f4efe2 98%, transparent), radial-gradient(3px 2.3px at 50% 46%, #f4efe2 95%, transparent), radial-gradient(1px 1px at 6% 24%, #f4efe2 98%, transparent), radial-gradient(1.3px 1px at 35% 41%, rgba(244,239,226,.85) 98%, transparent); }
.pl-vert { right: 20px; top: 96px; writing-mode: vertical-rl; font-size: min(17vh, 11vw); line-height: 1; transform-origin: right top; }
.pl-teal { background: #22697a; color: #f3ece2; }
.pl-formula { left: 26px; right: 26px; top: 42%; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-weight: 300; font-size: clamp(28px, 3.1vw, 50px); letter-spacing: -.01em; transform-origin: left center; }
.pl-note { left: 26px; top: calc(42% + clamp(28px, 3.1vw, 50px) + 22px); font: 400 14px/1.4 'Pretendard Variable', Pretendard, sans-serif; opacity: .75; }
.pl-blue { background: #2b3f9c; color: #f6efe4; }
.pl-dusk { background: #10163e; }
.pl-dusk .sp-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-dusk::before { display: none; }
.pl-rose { background: #d9978a; color: #1b1420; }
.pl-paper { background: #f6f2ea; }
.pl-cite { left: 26px; right: 26px; top: 30%; font: 400 clamp(16px, 1.4vw, 21px)/1.55 'Pretendard Variable', Pretendard, sans-serif; letter-spacing: -0.01em; transform-origin: left top; word-break: keep-all; }
.pl-lines { left: 26px; right: 26px; top: calc(30% + 110px); display: flex !important; flex-direction: column; gap: 14px; transform-origin: left top; }
.pl-lines i { display: block; height: 1px; background: rgba(23, 21, 15, .22); }
.pl-lines i:nth-child(2n) { margin-right: 18%; }
.pl-lines i:last-child { margin-right: 46%; }
.pl-sigma { left: 0; right: 0; top: 46%; translate: 0 -50%; text-align: center; font-size: min(40vh, 26vw); line-height: 1; }
.pl-blue .pl-big { color: inherit; }

/* 가운데 글 — 제목은 위, 네 단계는 한 줄의 시간선, 그 아래 하늘은 그룹과 질문의 자리 */
.sp-copy { position: absolute; inset: 0; color: #f6efe4; text-align: center; pointer-events: none; }
.sp-intro { position: absolute; left: 0; right: 0; top: 47%; transform: translateY(-50%); padding: 0 24px; font-family: Hahmlet, 'Pretendard Variable', serif; font-weight: 500; font-size: clamp(32px, 4.2vw, 60px); letter-spacing: -0.03em; text-shadow: 0 1px 3px rgba(6, 8, 30, .5), 0 2px 26px rgba(6, 8, 30, .6); word-break: keep-all; }
.sp-main { position: absolute; top: 16%; left: 0; right: 0; padding: 0 24px; display: flex; flex-direction: column; align-items: center; opacity: 0; will-change: opacity, transform; }
.sp-kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .24em; color: rgba(246, 239, 228, .8); text-shadow: 0 1px 8px rgba(6, 8, 30, .8); }
.sp-title { margin-top: 18px; font-family: Hahmlet, 'Pretendard Variable', serif; font-weight: 600; font-size: clamp(40px, 6vw, 92px); line-height: 1.08; letter-spacing: -0.04em; color: #f8f2e8; text-shadow: 0 1px 2px rgba(6, 8, 30, .55), 0 2px 12px rgba(6, 8, 30, .5), 0 6px 40px rgba(6, 8, 30, .5); word-break: keep-all; }
.sp-steps { position: absolute; left: 50%; top: 47.5%; width: min(760px, 88vw); transform: translateX(-50%); opacity: 0; }
.sp-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.sp-steps-line { position: absolute; left: 12.5%; right: 12.5%; top: 4px; height: 1px; background: rgba(246, 239, 228, .26); box-shadow: 0 0 0 .5px rgba(6, 8, 30, .25); }
.sp-steps-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #f6efe4; }
.sp-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(246, 239, 228, .5); transition: color .6s; text-shadow: 0 1px 2px rgba(6, 8, 30, .6), 0 1px 12px rgba(6, 8, 30, .85); }
.sp-steps .dot { width: 9px; height: 9px; border-radius: 50%; background: #0c1034; border: 1px solid rgba(246, 239, 228, .38); transition: background .6s, border-color .6s, box-shadow .6s; }
.sp-steps li.on { color: #f6efe4; }
.sp-steps li.on .dot { background: #ffccaa; border-color: #ffccaa; box-shadow: 0 0 0 4px rgba(255, 204, 170, .16), 0 0 14px rgba(246, 120, 90, .7); }
.sp-steps b { margin-top: 6px; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-weight: 500; font-size: 15.5px; letter-spacing: -0.02em; word-break: keep-all; }
.sp-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 12.5px; letter-spacing: .08em; color: rgba(246, 239, 228, .6); z-index: 2; }
@media (max-height: 760px) { .sp-main { top: 12%; } .sp-title { font-size: clamp(36px, 5.2vw, 76px); } .sp-steps { top: 45%; } }
@media (max-width: 860px) {
  .story { height: 340vh; }
  .sp-l, .sp-r { width: 22%; }
  .sp-c { clip-path: inset(0 calc((1 - var(--x)) * 22%) 0 calc((1 - var(--x)) * 22%)); }
  .sp-main { top: 15%; }
  .pl-big { font-size: clamp(34px, 9vw, 60px); left: 12px; bottom: 30px; }
  .pl-mono, .pl-note, .pl-cite, .pl-lines, .pl-rule { display: none !important; }
  .pl-formula { left: 12px; right: 12px; font-size: 20px; }
}
@media (max-width: 640px) {
  .sp-steps { top: 45%; }
  .sp-steps ol { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .sp-steps-line { display: none; }
  .sp-steps b { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .plate.on, .plate.on > *, .plate.was > * { animation: none !important; } }

/* ════ 학회 히어로 장면 — horizon(새벽 지평선) · type(타이포 시퀀스). 그림은 public/herofx.js ════ */
.shero[data-fx="horizon"] { background: #0c0a10 !important; padding-bottom: calc(64px + clamp(96px, 15vh, 160px)); }
.shero[data-fx="horizon"]::before, .shero[data-fx="horizon"]::after { display: none; }
.intro-page .shero[data-fx="horizon"][data-height="compact"] { padding-bottom: calc(44px + 96px); }
.intro-page .shero[data-fx="horizon"][data-height="standard"] { padding-bottom: calc(64px + clamp(110px, 16vh, 170px)); }
.intro-page .shero[data-fx="horizon"][data-height="tall"] { padding-bottom: clamp(160px, 22vh, 240px); }
.shero-type { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.st-w { position: absolute; white-space: nowrap; opacity: 0; color: #fff; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: clamp(88px, 15vw, 260px); line-height: .9; letter-spacing: -.04em; font-weight: 200; }
.st-w.on, .st-w.was { animation: stDrift 6s linear both, stWght 3.2s cubic-bezier(.65, 0, .25, 1) both; }
.st-w.on { opacity: .11; z-index: 2; transition: opacity 1.2s, filter 1.2s; }
.st-w.was { opacity: 0; z-index: 1; transition: opacity 1.6s, filter 1.6s; filter: blur(10px); }
@keyframes stDrift { from { scale: 1.08; } to { scale: 1; } }
@keyframes stWght { from { font-weight: 120; } to { font-weight: 640; } }
.st-p0 { left: -2%; bottom: -6%; transform-origin: left bottom; }
.st-p1 { right: -2%; top: -4%; transform-origin: right top; }
.st-p2 { left: 4%; top: 8%; transform-origin: left top; }
.st-p3 { right: -3%; bottom: -8%; transform-origin: right bottom; }
.shero[data-fx="type"] .shero-in { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .st-w.on, .st-w.was { animation: none; } }

/* ════ 히어로 제목의 돌아가는 팀 이름(public/xrot.js) — 같은 칸에 겹쳐 두고 흐림·위로 밀며 교체, 폭은 transition ════ */
.xrot { display: inline-grid; vertical-align: bottom; white-space: nowrap; transition: width .6s cubic-bezier(.16, 1, .3, 1); }
.xrot-w { grid-area: 1 / 1; justify-self: start; white-space: nowrap; transition: transform .65s cubic-bezier(.16, 1, .3, 1), opacity .5s ease, filter .6s ease; }
.xrot-w.in { transform: translateY(.42em); opacity: 0; filter: blur(10px); }
.xrot-w.out { transform: translateY(-.42em); opacity: 0; filter: blur(10px); }
@media (prefers-reduced-motion: reduce) { .xrot, .xrot-w { transition: none; } }

/* ════ 스토리 → 기능 카드: 검은 언덕이 흰 바탕으로 부드럽게 녹아든다(이징된 알파 계단 + 그레인이 함께 옅어짐) ════ */
.story-melt { position: relative; height: 42vh; min-height: 260px; background: #fff; margin-top: -1px; pointer-events: none; }
.story-melt::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8, 7, 11, 1) 0%, rgba(8, 7, 11, .94) 11%, rgba(8, 7, 11, .82) 22%, rgba(8, 7, 11, .64) 34%, rgba(8, 7, 11, .45) 46%, rgba(8, 7, 11, .28) 58%, rgba(8, 7, 11, .15) 70%, rgba(8, 7, 11, .06) 82%, rgba(8, 7, 11, .015) 92%, rgba(8, 7, 11, 0) 100%); }
.story-melt::after {
  content: ''; position: absolute; inset: 0; opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.1 -.2'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%);
}
.story-melt + .features { padding-top: 0; }


/* ════ 블록 페이지 빌더 — theme.blocks (렌더 src/blocks.js). 흰 바탕·잉크 모노크롬, 그리드는 .container 하나, 리듬은 .sec ════ */
.blk { word-break: keep-all; overflow-wrap: break-word; }
.blk-head { margin-bottom: 22px; }
/* 편집된 랜딩(새 블록이 하나라도 있는 페이지) — 섹션 사이를 넓히고 머리를 키운다. 작은 제목은 잉크로(accent는 가입 버튼 하나에) */
.blk-flow > [data-block-id] > .sec { padding-top: clamp(56px, 7.5vw, 92px); }
.blk-flow .sec-head { margin-bottom: 26px; }
.blk-flow .sec-head h2 { font-size: clamp(22px, 2.5vw, 29px); letter-spacing: -0.035em; }
.blk-flow .sec-eyebrow { margin-bottom: 8px; color: var(--muted); }
.blk-flow .blk-cta h2 { font-size: clamp(28px, 3.6vw, 42px); }
/* 텍스트 */
.blk-prose { max-width: 720px; font-size: 16.5px; }
.blk-prose > :last-child { margin-bottom: 0; }
.blk-prose a { color: var(--text); }
.blk-sec-text[data-align="center"] .blk-head { justify-content: center; text-align: center; }
.blk-sec-text[data-align="center"] .blk-prose { margin: 0 auto; text-align: center; }
/* 가운데 정렬의 목록 — 목록 덩어리를 가운데에 두고 항목은 왼쪽 정렬(글머리표가 글자 옆에 붙는다) */
.blk-sec-text[data-align="center"] .blk-prose :is(ul, ol) { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; }
/* 카드 */
.blk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.blk-cards[data-n="1"] { grid-template-columns: minmax(0, 520px); }
.blk-cards[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk-cards[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blk-card { display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.blk-card-n { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.blk-card-n + .blk-card-t { margin-top: 30px; }
.blk-card-img { display: block; margin: -8px -8px 18px; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: var(--panel); }
.blk-card-img img { width: 100%; height: 100%; object-fit: cover; }
/* 미리보기 전용 — 이미지를 안 올린 카드의 자리(공개본은 번호로 그린다) */
.blk-card-img.is-empty { display: grid; place-items: center; padding: 12px; border: 1.5px dashed var(--border-2); background: transparent; }
.blk-card-img.is-empty em { font-style: normal; font-size: 11.5px; line-height: 1.5; color: var(--dim); text-align: center; word-break: keep-all; }
.blk-card-t { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; }
.blk-card-d { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.7; }
/* 숫자 */
.blk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-2); }
.blk-stats[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.blk-stats[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk-stats[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blk-stat { min-width: 0; padding: 26px 24px 10px 0; }
.blk-stat + .blk-stat { padding-left: 24px; border-left: 1px solid var(--border); }
.blk-stat b { display: block; font-family: var(--font-display); font-size: clamp(36px, 4.8vw, 56px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.blk-stat span { display: block; margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* 갤러리 */
.blk-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.blk-gallery[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.blk-gallery[data-n="2"], .blk-gallery[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk-shot { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--panel); }
.blk-gallery[data-n="1"] .blk-shot { aspect-ratio: 16 / 9; }
.blk-shot img { width: 100%; height: 100%; object-fit: cover; }
.blk-shot figcaption {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 999px;
  background: rgba(23, 21, 15, .64); color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .2s;
}
.blk-shot:hover figcaption, .blk-shot:focus-within figcaption, .is-preview .blk-shot figcaption { opacity: 1; }
@media (hover: none) { .blk-shot figcaption { opacity: 1; } } /* 터치 기기는 올려 둘 마우스가 없다 — 늘 보인다 */
/* 영상 — YouTube(nocookie)만 */
.blk-video { margin: 0; }
.blk-video-frame { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0b0b0c; }
.blk-video-frame iframe, .blk-video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.blk-video-poster i { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 14px; background: rgba(23, 21, 15, .8); }
.blk-video-poster i::after { content: ''; position: absolute; left: 28px; top: 15px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.blk-video figcaption { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
/* 자주 묻는 질문 */
.blk-faq { max-width: 820px; border-top: 1px solid var(--border); }
.blk-qa { border-bottom: 1px solid var(--border); }
.blk-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 2px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.45; }
.blk-qa summary::-webkit-details-marker { display: none; }
.blk-qa summary span { min-width: 0; overflow-wrap: anywhere; } /* 긴 URL이 든 질문도 줄을 바꿔 좁은 화면을 넘기지 않는다 */
.blk-qa summary i { position: relative; flex: none; width: 14px; height: 14px; transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.blk-qa summary i::before, .blk-qa summary i::after { content: ''; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; border-radius: 2px; background: var(--muted); }
.blk-qa summary i::after { transform: rotate(90deg); }
.blk-qa[open] summary i { transform: rotate(45deg); }
.blk-qa summary:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dim); }
.blk-ans { max-width: 700px; padding: 0 2px 22px; font-size: 15px; line-height: 1.75; color: var(--muted); }
.blk-ans p { margin-bottom: 12px; }
/* 링크 */
.blk-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--border); }
.blk-link { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 2px; border-bottom: 1px solid var(--border); color: inherit; }
.blk-link strong { flex: none; max-width: 60%; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-link span { margin-left: auto; min-width: 0; font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-link svg { flex: none; width: 17px; height: 17px; color: var(--dim); transition: transform .18s, color .18s; }
.blk-link:hover svg { color: var(--text); transform: translate(2px, -2px); }
.blk-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
/* 로고 — 흑백으로 눌러 한 벽처럼 */
.blk-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.blk-logo { display: grid; place-items: center; height: 96px; padding: 20px 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
/* 흑백 + 감마(#blk-ink, src/blocks.js) — 밝은 색 로고도 짙은 회색으로 눌러 벽의 농도를 맞춘다. 흰 바탕은 흰색 그대로라 multiply로 사라진다 */
.blk-logo img { max-width: 100%; max-height: 40px; object-fit: contain; filter: grayscale(1); filter: url(#blk-ink); opacity: .8; mix-blend-mode: multiply; transition: opacity .2s; }
a.blk-logo:hover img { opacity: 1; }
.blk-ink-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* 행동 유도 — 잉크 판(기본) · 화이트. accent를 쓰지 않는다(주 CTA는 가입 띠 하나) */
.blk-cta { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 28px 40px; padding: clamp(36px, 5.5vw, 64px) clamp(26px, 5vw, 60px); border-radius: 20px; background: #17150f; color: #fff; }
.blk-cta-t { min-width: 0; max-width: 640px; }
.blk-cta h2 { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; color: inherit; }
.blk-cta p { margin-top: 12px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .66); }
.blk-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 999px; background: #fff; color: #17150f; font-size: 15px; font-weight: 700; white-space: nowrap; transition: background .18s; }
.blk-btn:hover { background: #f1f0ec; }
.blk-btn span { transition: transform .18s; }
.blk-btn:hover span { transform: translateX(3px); }
.blk-cta[data-tone="plain"] { padding: 44px 0 0; border-radius: 0; background: transparent; color: var(--text); border-top: 1px solid var(--border-2); }
.blk-cta[data-tone="plain"] p { color: var(--muted); }
.blk-cta[data-tone="plain"] .blk-btn { background: #17150f; color: #fff; }
.blk-cta[data-tone="plain"] .blk-btn:hover { background: #2c2920; }
/* 최근 글 — 저널 카드 그대로, 3열 고정(3개·6개가 빈칸 없이 맞는다) */
.blk-sec-feed .jgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 빈 블록 — 미리보기에서만 그려진다(공개본은 숨김) */
.blk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 132px; padding: 22px; border: 1.5px dashed var(--border-2); border-radius: 14px; text-align: center; font-size: 13px; color: var(--dim); }
.blk-empty strong { font-size: 14px; color: var(--muted); }
.blk-empty em { margin-top: 4px; font-style: normal; font-size: 11.5px; }
/* Studio 미리보기 — 블록 고르기 링 (--pick-s = 캔버스 배율) */
.is-preview [data-block-id] { cursor: pointer; }
.is-preview [data-block-id]:hover:not([data-picked]) { outline: calc(1.5px / var(--pick-s, 1)) dashed rgba(24, 24, 27, .35); outline-offset: calc(-4px / var(--pick-s, 1)); }
.is-preview [data-blocks][data-picked], .is-preview [data-block-id][data-picked] { outline: calc(2px / var(--pick-s, 1)) solid #18181b; outline-offset: calc(-4px / var(--pick-s, 1)); }
@media (max-width: 760px) {
  .blk-cards, .blk-cards[data-n] { grid-template-columns: minmax(0, 1fr); }
  .blk-stats, .blk-stats[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blk-stats[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .blk-stats[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blk-stat { padding: 22px 12px 6px 0; }
  .blk-stat + .blk-stat { padding-left: 14px; }
  .blk-stats[data-n="3"] .blk-stat b { font-size: 30px; }
  .blk-stats[data-n="4"] .blk-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .blk-stats[data-n="4"] .blk-stat:nth-child(n+3) { margin-top: 14px; border-top: 1px solid var(--border); }
  .blk-gallery, .blk-gallery[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blk-gallery[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .blk-links { grid-template-columns: minmax(0, 1fr); }
  .blk-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blk-logo { height: 84px; padding: 16px; }
  .blk-cta { align-items: flex-start; }
  .blk-cta[data-tone="ink"] { border-radius: 16px; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .blk-cards[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) { .blk-sec-feed .jgrid { grid-template-columns: minmax(0, 1fr); } }


/* ════ 히어로 배경 사진 — hero_fx=image, theme.bg(초점 x·y · 어둡게 --bg-dim · 흐림). 스크림이 흰 글자 대비를 지킨다 ════ */
.shero[data-fx="image"] { background: #111114 !important; } /* 사진이 accent 그라디언트보다 먼저 — 불러오는 동안은 짙은 바탕 */
.shero[data-fx="image"]::before, .shero[data-fx="image"]::after { display: none; } /* 도트·아래 멜트 없이 사진 가장자리 그대로 */
.shero > .shero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.shero-bg img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; transition: filter .3s ease, transform .3s ease; }
.shero[data-bg-blur] .shero-bg img { filter: blur(14px) saturate(1.06); transform: scale(1.08); }
/* 스크림 — 어둡게(0~80%) 한 겹 + 위(메뉴)·아래를 조금 더. 아주 밝은 사진에 어둡게 0%여도 흰 글자가 4.5:1 이상 남도록,
   글자가 있는 자리(위쪽 메뉴 띠 · 글자 상자 .shero-text)는 합성 어둡기가 늘 .64 이상이다:
   1 − (1 − 그늘)(1 − 어둡게) ≥ .64  →  그늘 = 1 − .36 / (1 − 어둡게). 어둡게를 올릴수록 그늘은 옅어져 사진이 덜 가려진다. */
.shero-bg::after {
  --scrim: calc(1 - .36 / (1 - var(--bg-dim, .4)));
  --top-band: 64px; /* 위쪽 메뉴 띠 — 휴대폰은 메뉴가 한 줄 더 있다 */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 8, 12, max(.42, var(--scrim))) 0, rgba(8, 8, 12, max(.42, var(--scrim))) var(--top-band), rgba(8, 8, 12, 0) calc(var(--top-band) + 112px)),
    linear-gradient(0deg, rgba(8, 8, 12, .34) 0, rgba(8, 8, 12, 0) 42%),
    rgba(8, 8, 12, var(--bg-dim, .4));
}
/* 글자 뒤 그늘 — 글자 상자에 붙어서 가운데·나란히·분할·엠블럼 어느 배치든 글자가 있는 곳만 짙어진다 */
.shero[data-fx="image"] .shero-text { position: relative; isolation: isolate; }
.shero[data-fx="image"] .shero-text::before {
  content: ''; position: absolute; inset: -64px -96px; z-index: -1; pointer-events: none; border-radius: 88px;
  background: rgba(8, 8, 12, max(0, calc(1 - .36 / (1 - var(--bg-dim, .4)))));
  filter: blur(44px);
}
@media (max-width: 860px) { .shero-bg::after { --top-band: 100px; } }
.shero[data-fx="image"] h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, .28), 0 2px 28px rgba(0, 0, 0, .42); }
.shero[data-fx="image"] .tagline, .shero[data-fx="image"] .shero-kicker, .shero[data-fx="image"] .hero-social { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 16px rgba(0, 0, 0, .45); }
.intro-top:has(+ .shero[data-fx="image"]) .intro-ident, .intro-top:has(+ .shero[data-fx="image"]) .intro-nav a, .intro-top:has(+ .shero[data-fx="image"]) .intro-top-link { text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
/* 사진 위 메뉴 글자는 거의 흰색으로 — 반투명(.72) 흰 글자는 밝은 사진에서 대비가 먼저 무너진다 */
.intro-top:has(+ .shero[data-fx="image"]) .intro-nav a { color: rgba(255, 255, 255, .92); }
.intro-top:has(+ .shero[data-fx="image"]) .intro-top-link { color: rgba(255, 255, 255, .94); }
.shero[data-fx="image"] .btn-ghost { background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Studio 미리보기 — 배경 도구가 열려 있으면 히어로를 끌어 초점을 옮긴다 */
.is-preview .shero.is-bgedit { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.is-preview .shero.is-bgedit.is-bgdrag, .is-preview .shero.is-bgdrag * { cursor: grabbing; }
.is-preview .shero.is-bgedit.is-bgdrag .shero-bg img { transition: none; }

/* ════ 홍보 셸 — 메뉴 외부 링크 · 푸터 한 줄(theme.site) ════ */
.intro-nav a[data-nav-ext]::after { content: '↗'; margin-left: 3px; font-size: .86em; opacity: .6; }
.intro-foot-note { display: block; margin: 0 auto 12px; max-width: 640px; padding: 0 20px; font-size: 13px; line-height: 1.6; color: var(--muted); word-break: keep-all; }
.is-preview .intro-top { cursor: pointer; }
.is-preview .intro-top:hover:not([data-picked]) { outline: calc(1.5px / var(--pick-s, 1)) dashed rgba(255, 255, 255, .55); outline-offset: calc(-6px / var(--pick-s, 1)); }
.is-preview .intro-top[data-picked] { outline: calc(2px / var(--pick-s, 1)) solid #fff; outline-offset: calc(-6px / var(--pick-s, 1)); }
.is-preview .intro-foot { cursor: pointer; }

/* ════ 관리 · 설정 — 사이트의 모습은 Studio로 ════ */
.studio-card { margin-bottom: 16px; padding: 22px 24px; }
.studio-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.studio-card-h h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.studio-card-h p { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--muted); word-break: keep-all; }
.studio-card-h .btn { flex: none; }
.studio-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.studio-link { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 32px 12px 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); transition: border-color .15s, background .15s; }
.studio-link:hover { border-color: var(--border-2); background: var(--hover); }
.studio-link strong { font-size: 13.5px; font-weight: 650; }
.studio-link span { font-size: 12px; line-height: 1.45; color: var(--dim); word-break: keep-all; }
.studio-link svg { position: absolute; right: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--dim); }
@media (max-width: 760px) {
  .studio-card-h { flex-direction: column; }
  .studio-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ════ 흰 바탕 기본색 — 색을 고르지 않은(또는 흰 바탕에서 못 쓰는 밝은 색) 학회·팀은 잉크가 주 색 ════
   :root의 --accent·--primary는 다크 --text(#fafafa)로 이미 계산돼 내려온다 — 라이트 페이지에서 다시 정의해야 잉크가 된다.
   고른 색이 있으면 layout()이 뒤에 넣는 <style>(:root,.theme-light)이 이긴다. */
.theme-light { --accent: var(--text); --primary: var(--text); --primary-fg: #fff; --accent-soft: var(--chip-bg); }

/* ════ 소식 — 편집된 랜딩(.blk-flow)에서는 4개 미만의 정적 카드도 다른 블록처럼 왼쪽 정렬, 폭은 .container와 같게 ════ */
.blk-flow .nmq-static .nmq-track { justify-content: flex-start; max-width: 1060px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 760px) {
  .blk-flow .nmq-static .nmq-track { padding: 0 24px; scroll-padding-inline: 24px; }
  .blk-flow .nmq-static .nmq-card { width: min(340px, calc(100vw - 72px)); }
  .blk-flow .nmq-static .nmq-card:only-child { width: 100%; max-width: none; }
}

/* ════ 홍보 셸 — 휴대폰에서도 메뉴·외부 링크가 보이게: 로고 줄 아래 가로로 넘기는 한 줄(오른쪽 끝이 옅어져 더 있음을 알린다) ════ */
@media (max-width: 860px) {
  .intro-top { flex-wrap: wrap; row-gap: 4px; }
  .intro-nav {
    display: flex; order: 3; position: static; left: auto; transform: none; flex: 1 0 100%; gap: 18px;
    padding: 4px 0 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .intro-nav::-webkit-scrollbar { display: none; }
  .intro-nav a { flex: none; font-size: 13px; line-height: 1.9; white-space: nowrap; }
  .intro-nav:not(:has(> a:not([hidden]))) { display: none; }
  /* 메뉴 줄만큼 히어로 위 여백을 늘린다 */
  .intro-page .intro-top:has(.intro-nav > a:not([hidden])) + .shero[data-height="compact"] { padding-top: 116px; }
  .intro-page .intro-top:has(.intro-nav > a:not([hidden])) + .shero[data-height="standard"] { padding-top: 130px; }
  .intro-page .intro-top:has(.intro-nav > a:not([hidden])) + .shero[data-height="tall"] { padding-top: 124px; }
}

/* ════ 홍보 하위 페이지 상단 바 — 완전히 흰색(유저 결정). 팀 색 띠 제거, 잉크 글자, 헤어라인 ════ */
.intro-top-solid.intro-top-white { background: #fff; border-bottom-color: transparent; }
.intro-top-white .intro-ident { color: #17150f; }
.intro-top-white .intro-logo { filter: brightness(0); } /* 로고 원래 색과 무관하게 잉크(유저: 무조건 로고+타이포 검은색) */
.intro-top-white .intro-logo-txt { background: #17150f; color: #fff; filter: none; } /* 이니셜 로고(로고 없는 팀·소모임)는 잉크 타일 + 흰 글자 — 위의 brightness(0)이 글자까지 먹지 않게 */
.intro-top-white .intro-nav a { color: rgba(23, 21, 15, .52); }
.intro-top-white .intro-nav a:hover, .intro-top-white .intro-nav a.on { color: #17150f; }
.intro-top-white .intro-top-link { color: rgba(23, 21, 15, .6); }
.intro-top-white .intro-top-link:hover { color: #17150f; }
.intro-top-white .btn:not(.btn-ghost) { background: #17150f; color: #fff; border-color: #17150f; }
.intro-top-white .btn:not(.btn-ghost):hover { background: #2a2721; }
.intro-top-white .btn-ghost { color: #17150f; border-color: rgba(23, 21, 15, .14); background: transparent; }
.intro-top-white .chip-soft { background: rgba(23, 21, 15, .06); color: #17150f; }
.intro-top-white ~ .intro-main { padding-top: 48px; }
@media (max-width: 860px) { .intro-top-white ~ .intro-main { padding-top: 26px; } }

/* ════ 히어로 자유 배치 — theme.free · data-free="d m"(지도가 있는 기기) ════
   틀 = .shero-in(데스크톱 최대 1012px · 861px 미만은 모바일 지도). 요소 위치는 서버가 싣는 CSS 변수:
   --?l·--?r 왼쪽·오른쪽 끝(기준점 l=왼쪽 끝 · c=가운데 · r=오른쪽 끝에서 나온 값, --?x 기준점 %) · --?y 위에서 px · --?w 글 상자 폭 · --?m 최대 폭 ·
   --?a 글 정렬 · --?j 묶음 정렬 · --?s 크기, 틀 높이 --?h. 가운데 기준점은 양쪽 끝 + margin auto로 가운데에 선다(transform 없음 —
   요소가 쌓임 맥락을 만들지 않아야 요소마다 붙은 그늘(::before·::after)이 모두 글자 상자의 한 층(z -1)으로 모여 앞 요소를 덮지 않는다).
   글자 상자(.shero-text)는 틀 전체를 덮으므로 누르기는 통과시키고(pointer-events), 로고는 그 위(z 1)에 둔다 — 유리 패널·그늘 아래로 가지 않게.
   제목·로고 크기는 틀 폭에 맞춰 줄어든다(데스크톱 1012px · 모바일 350px 기준). 읽기 순서(DOM)는 그대로다.
   유리 패널은 글 요소들을 감싸는 상자(public/free.js fitPanel이 --pn-l·t·w·h를 싣는다).
   data-free-off = 겹치거나 잘려서 public/free.js가 이 폭에서 base 프리셋으로 돌린 상태 — 이 규칙들이 모두 빠진다. */
@media (min-width: 861px) {
  .shero[data-free~="d"]:not([data-free-off]) > .shero-in {
    display: block; position: relative; width: 100%; max-width: 1012px; margin: 0 auto; padding: 0;
    height: max(calc(var(--dh, 440) * 1px), var(--fit, 0px)); container-type: inline-size;
  }
  .shero[data-free~="d"]:not([data-free-off]) .shero-text { position: absolute; inset: 0; max-width: none; flex: none; isolation: isolate; pointer-events: none; }
  .shero[data-free~="d"]:not([data-free-off]) [data-free-el] {
    position: absolute; margin: 0 auto; top: var(--dy, 0px); left: var(--dl, var(--dx, 0%)); right: var(--dr, auto);
    width: var(--dw, max-content); max-width: var(--dm, 100%); transform: none; z-index: auto; isolation: auto; pointer-events: auto;
    text-align: var(--da, left); justify-content: var(--dj, flex-start);
  }
  .shero[data-free~="d"]:not([data-free-off]) h1[data-free-el] { font-size: min(calc(var(--ds, 64) * 1px), calc(var(--ds, 64) * 100cqi / 1012)); }
  .shero[data-free~="d"]:not([data-free-off]) .shero-logo[data-free-el] { --logo-size: min(calc(var(--ds, 96) * 1px), calc(var(--ds, 96) * 100cqi / 1012)); width: var(--logo-size); height: var(--logo-size); max-width: none; z-index: 1; }
  .shero[data-free~="d"]:not([data-free-off]) .shero-panel { inset: auto !important; left: var(--pn-l, 0px) !important; top: var(--pn-t, 0px) !important; width: var(--pn-w, 0px); height: var(--pn-h, 0px); }
  .shero[data-free~="d"]:not([data-free-off]) .shero-panel:not([data-fit]) { visibility: hidden; }
  /* 사진 배경 — 글 상자 하나에 붙던 그늘을 요소마다(모두 글자 상자의 한 층) */
  .shero[data-fx="image"][data-free~="d"]:not([data-free-off]) .shero-text::before { display: none; }
  .shero[data-fx="image"][data-free~="d"]:not([data-free-off]) :is(.shero-kicker, h1, .tagline, .hero-social)[data-free-el]::before {
    content: ''; position: absolute; inset: -26px -40px; z-index: -1; pointer-events: none; border-radius: 48px;
    background: rgba(8, 8, 12, max(0, calc(1 - .36 / (1 - var(--bg-dim, .4))))); filter: blur(30px);
  }
}
@media (max-width: 860px) {
  .shero[data-free~="m"]:not([data-free-off]) > .shero-in {
    display: block; position: relative; width: 100%; max-width: none; margin: 0; padding: 0;
    height: max(calc(var(--mh, 480) * 1px), var(--fit, 0px)); container-type: inline-size;
  }
  .shero[data-free~="m"]:not([data-free-off]) .shero-text { position: absolute; inset: 0; max-width: none; flex: none; isolation: isolate; pointer-events: none; }
  .shero[data-free~="m"]:not([data-free-off]) [data-free-el] {
    position: absolute; margin: 0 auto; top: var(--my, 0px); left: var(--ml, var(--mx, 0%)); right: var(--mr, auto);
    width: var(--mw, max-content); max-width: var(--mm, 100%); transform: none; z-index: auto; isolation: auto; pointer-events: auto;
    text-align: var(--ma, left); justify-content: var(--mj, flex-start);
  }
  .shero[data-free~="m"]:not([data-free-off]) h1[data-free-el] { font-size: clamp(calc(var(--ms, 44) * .86px), calc(var(--ms, 44) * 100cqi / 350), calc(var(--ms, 44) * 1.12px)); }
  .shero[data-free~="m"]:not([data-free-off]) .shero-logo[data-free-el] { --logo-size: clamp(calc(var(--ms, 80) * .86px), calc(var(--ms, 80) * 100cqi / 350), calc(var(--ms, 80) * 1.12px)); width: var(--logo-size); height: var(--logo-size); max-width: none; z-index: 1; }
  .shero[data-free~="m"]:not([data-free-off]) .shero-panel { inset: auto !important; left: var(--pn-l, 0px) !important; top: var(--pn-t, 0px) !important; width: var(--pn-w, 0px); height: var(--pn-h, 0px); }
  .shero[data-free~="m"]:not([data-free-off]) .shero-panel:not([data-fit]) { visibility: hidden; }
  .shero[data-fx="image"][data-free~="m"]:not([data-free-off]) .shero-text::before { display: none; }
  .shero[data-fx="image"][data-free~="m"]:not([data-free-off]) :is(.shero-kicker, h1, .tagline, .hero-social)[data-free-el]::before {
    content: ''; position: absolute; inset: -18px -24px; z-index: -1; pointer-events: none; border-radius: 36px;
    background: rgba(8, 8, 12, max(0, calc(1 - .36 / (1 - var(--bg-dim, .4))))); filter: blur(22px);
  }
}

/* ── Studio 미리보기 — 끌어 옮기기 · 격자 · 가이드 · 선택 틀 · 겹침. 오버레이(.fe)는 틀 안에 있고 --u = 화면 1px ── */
.is-preview .shero [data-free-el]:not(.is-editing) { cursor: grab; -webkit-user-select: none; user-select: none; }
.is-preview .shero [data-free-el].fe-sel:not(.is-editing) { touch-action: none; }
.is-preview .shero.fe-drag, .is-preview .shero.fe-drag * { cursor: grabbing !important; }
.is-preview .shero.fe-g-size, .is-preview .shero.fe-g-size * { cursor: nwse-resize !important; }
.is-preview .shero.fe-g-width, .is-preview .shero.fe-g-width * { cursor: ew-resize !important; }
.is-preview .shero.fe-active [data-free-el][data-picked], .is-preview .shero.fe-active [data-free-el] [data-picked], .is-preview .shero.fe-active [data-free-el].fe-sel { outline: none; }
@media (hover: hover) {
  .is-preview .shero.fe-active [data-free-el]:hover:not(.fe-sel):not(.is-editing) { outline: calc(1px / var(--pick-s, 1)) solid rgba(255, 255, 255, .5); outline-offset: calc(4px / var(--pick-s, 1)); }
}
.is-preview .shero.fe-active [data-free-el] [data-pick]:hover { outline: none; }
.is-preview .shero.fe-drag [data-free-el]:hover { outline: none; }
.fe { --u: calc(1px / var(--pick-s, 1)); position: absolute; inset: 0; z-index: 6; pointer-events: none; font-family: var(--font); }
.fe [hidden] { display: none !important; }
.fe-grid, .fe-frame { position: absolute; inset: 0; opacity: 0; transition: opacity .18s ease; }
.fe-grid {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .075) 0 var(--cw, 60px), transparent var(--cw, 60px) calc(var(--cw, 60px) + var(--gut, 24px))),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 var(--u), transparent var(--u) 8px);
}
.fe-frame { outline: var(--u) dashed rgba(255, 255, 255, .45); }
.shero.fe-drag .fe-grid, .shero.fe-drag .fe-frame { opacity: 1; }
.fe-gl { position: absolute; display: block; background: #fff; box-shadow: 0 0 0 var(--u) rgba(0, 0, 0, .28); }
.fe-gl-x { width: var(--u); margin-left: calc(var(--u) * -.5); }
.fe-gl-y { height: var(--u); margin-top: calc(var(--u) * -.5); }
.fe-gl.is-soft { background: rgba(255, 255, 255, .55); box-shadow: none; }
.fe-box { position: absolute; outline: calc(1.5 * var(--u)) solid #fff; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(0, 0, 0, .16); }
.fe-h {
  position: absolute; display: none; width: calc(10 * var(--u)); height: calc(10 * var(--u)); transform: translate(-50%, -50%);
  background: #fff; border: var(--u) solid rgba(0, 0, 0, .35); border-radius: calc(2.5 * var(--u));
  box-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .3); pointer-events: auto; touch-action: none;
}
.fe-h::after { content: ''; position: absolute; inset: calc(-8 * var(--u)); } /* 누르기 쉬운 넓이 */
.fe-box.can-size .fe-h[data-h$="w"]:not([data-h="w"]), .fe-box.can-size .fe-h[data-h$="e"]:not([data-h="e"]) { display: block; }
.fe-box.can-w .fe-h[data-h="w"], .fe-box.can-w .fe-h[data-h="e"] { display: block; width: calc(6 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(3 * var(--u)); }
.fe-h[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.fe-h[data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.fe-h[data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.fe-h[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.fe-h[data-h="w"] { left: 0; top: 50%; cursor: ew-resize; }
.fe-h[data-h="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.fe-tag {
  position: absolute; padding: calc(4 * var(--u)) calc(7 * var(--u)); border-radius: calc(6 * var(--u)); white-space: nowrap;
  background: rgba(12, 12, 14, .88); color: #fff; font: 600 calc(11 * var(--u)) / 1 var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.fe-ov {
  position: absolute; display: block;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .6) 0 var(--u), rgba(255, 255, 255, 0) var(--u) calc(5 * var(--u)));
  outline: var(--u) solid rgba(255, 255, 255, .85); mix-blend-mode: difference;
}
.fe-ov.is-out { background: none; outline: calc(1.5 * var(--u)) dashed #fff; mix-blend-mode: normal; }
.fe-bar {
  position: absolute; display: flex; align-items: center; gap: calc(2 * var(--u)); padding: calc(3 * var(--u));
  border-radius: calc(11 * var(--u)); background: rgba(18, 18, 20, .86); border: var(--u) solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .35); pointer-events: auto; white-space: nowrap; color: rgba(244, 244, 245, .8);
}
.fe-grp { display: inline-flex; align-items: center; gap: calc(1 * var(--u)); }
.fe-grp + .fe-grp:not([hidden]) { padding-left: calc(3 * var(--u)); margin-left: calc(1 * var(--u)); border-left: var(--u) solid rgba(255, 255, 255, .12); }
.fe-grp[hidden] + .fe-grp { padding-left: 0; margin-left: 0; border-left: 0; }
.fe-bar button {
  display: inline-flex; align-items: center; gap: calc(5 * var(--u)); height: calc(28 * var(--u)); min-width: calc(28 * var(--u)); justify-content: center;
  padding: 0 calc(6 * var(--u)); border-radius: calc(8 * var(--u)); color: inherit; font: 600 calc(11.5 * var(--u)) / 1 var(--font); cursor: pointer;
}
.fe-bar button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: #fff; }
.fe-bar button[aria-pressed="true"] { background: #fff; color: #0b0b0c; }
.fe-bar button:disabled { opacity: .3; cursor: default; }
.fe-bar svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); display: block; }
.fe-bar output { min-width: calc(26 * var(--u)); text-align: center; font: 600 calc(11 * var(--u)) / 1 var(--mono); color: #fff; font-variant-numeric: tabular-nums; }
.shero.fe-drag .fe-bar { display: none; }

/* ════ 히어로 배경 사진 4K — 폭별 변형(srcset)이 오기 전 24px 흐린 미리보기(LQIP)가 자리를 채우고, 사진은 서서히 올라온다 ════
   .is-wait는 아직 오지 않은 사진에만 인라인 스크립트가 붙인다(스크립트가 없으면 사진은 오는 대로 그냥 보인다) */
.shero-lqip { position: absolute; inset: 0; display: block; background: #111114 50% 50% / cover no-repeat; filter: blur(22px) saturate(1.05); transform: scale(1.12); transition: opacity .9s ease .25s; }
.shero-bg.is-wait img { opacity: 0; }
.shero-bg.is-wait.is-in img { opacity: 1; transition: opacity .7s ease, filter .3s ease, transform .3s ease; }
.shero-bg.is-in .shero-lqip { opacity: 0; }
.shero[data-bg-blur] .shero-lqip { filter: blur(30px) saturate(1.06); }
/* 사진 유리 굴절 — 사진 바로 위 캔버스(glass.js), 스크림(.shero-bg::after)은 그 위. 첫 그림이 나오면 서서히 */
.shero-pglass { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.shero-pglass.is-on { opacity: 1; }
.shero-pglass[hidden] { display: none; }
.shero[data-bg-blur] .shero-pglass { filter: blur(14px) saturate(1.06); transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .shero-lqip, .shero-pglass, .shero-bg.is-wait.is-in img { transition: none; } }

/* ════ 붓질 밤하늘(hero_fx=painting) — 그림은 public/herofx.js(팀 색으로 물든 물감 하늘 · 멤버 수만큼 실루엣 · 물결 해 · 나무).
   칠하기 전엔 짙은 밤 그라디언트, 언덕·사람이 설 자리만큼 아래를 비운다. 글자 뒤엔 옅은 그늘 — 밝은 붓 자국 위에서도 흰 글자 4.5:1 ════ */
.shero[data-fx="painting"] { background: linear-gradient(180deg, #161b40, #232b68 55%, #4a4680 84%, #0b0a0f 84.2%) !important; padding-bottom: calc(64px + clamp(84px, 11vh, 124px)); }
.shero[data-fx="painting"]::before, .shero[data-fx="painting"]::after { display: none; }
.intro-page .shero[data-fx="painting"][data-height="compact"] { padding-bottom: calc(44px + 84px); }
.intro-page .shero[data-fx="painting"][data-height="standard"] { padding-bottom: calc(64px + clamp(90px, 12vh, 132px)); }
.intro-page .shero[data-fx="painting"][data-height="tall"] { padding-bottom: clamp(150px, 20vh, 220px); }
.shero[data-fx="painting"] .shero-text { position: relative; isolation: isolate; }
.shero[data-fx="painting"] .shero-text::before {
  content: ''; position: absolute; inset: -56px -88px; z-index: -1; pointer-events: none; border-radius: 88px;
  background: rgba(9, 11, 32, .42); filter: blur(44px);
}
.shero[data-fx="painting"] h1 { text-shadow: 0 1px 3px rgba(4, 6, 24, .3), 0 2px 28px rgba(4, 6, 24, .5); }
.shero[data-fx="painting"] .tagline, .shero[data-fx="painting"] .shero-kicker, .shero[data-fx="painting"] .hero-social { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 2px rgba(4, 6, 24, .45), 0 1px 16px rgba(4, 6, 24, .5); }
.shero[data-fx="painting"] .btn-ghost { background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.intro-top:has(+ .shero[data-fx="painting"]) .intro-ident, .intro-top:has(+ .shero[data-fx="painting"]) .intro-nav a, .intro-top:has(+ .shero[data-fx="painting"]) .intro-top-link { text-shadow: 0 1px 10px rgba(4, 6, 24, .55); }
.intro-top:has(+ .shero[data-fx="painting"]) .intro-nav a { color: rgba(255, 255, 255, .92); }
@media (min-width: 861px) {
  .shero[data-fx="painting"][data-free~="d"]:not([data-free-off]) .shero-text::before { display: none; }
  .shero[data-fx="painting"][data-free~="d"]:not([data-free-off]) :is(.shero-kicker, h1, .tagline, .hero-social)[data-free-el]::before {
    content: ''; position: absolute; inset: -26px -40px; z-index: -1; pointer-events: none; border-radius: 48px; background: rgba(9, 11, 32, .42); filter: blur(30px);
  }
}
@media (max-width: 860px) {
  .shero[data-fx="painting"] .shero-text::before { inset: -40px -28px; filter: blur(34px); }
  .shero[data-fx="painting"][data-free~="m"]:not([data-free-off]) .shero-text::before { display: none; }
  .shero[data-fx="painting"][data-free~="m"]:not([data-free-off]) :is(.shero-kicker, h1, .tagline, .hero-social)[data-free-el]::before {
    content: ''; position: absolute; inset: -18px -24px; z-index: -1; pointer-events: none; border-radius: 36px; background: rgba(9, 11, 32, .42); filter: blur(22px);
  }
}

/* ════ 히어로 효과 라이브러리 — theme.effects(ui.js FX_SPEC). 쌓임 순서(아래 → 위)는 .shero-fx 자식 순서 그대로:
   색 입히기 → 한 캔버스(.fx-gl — 물감 결·프랙탈·흐름장·자기장 화살표·자석 점·파문, public/fx-gl.js) → 하프톤 → 빛줄기 → 라이트 리크 → 광택 → 스캔라인 → 그레인 → 비네팅.
   유리 패널은 글자 바로 뒤(.shero-panel), 색수차는 배경 자체(SVG 필터 #fx-ca-N), 스크롤 시차는 public/fx-scroll.js. 모두 .shero-fx > i[data-k]를 보고 따라온다 ════ */
.shero > .fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.shero-fx > i[data-gl], .shero-fx > .fx-panel, .shero-fx > .fx-chroma, .shero-fx > .fx-parallax { display: none; }
.shero-fx > .fx-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .7s ease; }
.shero-fx > .fx-gl.is-on { opacity: 1; }
/* 색 입히기 — 한 겹이 아니라 두 겹(::before·::after)이 배경과 섞인다. 요소 자체는 상자를 만들지 않는다(display: contents) */
.shero-fx > .fx-tint { display: contents; }
.shero-fx > .fx-tint::before, .shero-fx > .fx-tint::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
/* 듀오톤 — 팀 색의 색상·채도 + 배경의 밝기(color), 가장 어두운 곳은 짙은 팀 색으로 들어 올린다(screen) */
.fx-tint[data-m="duo"]::before { background: var(--fx-acc, #1e40af); mix-blend-mode: color; opacity: var(--fx); }
.fx-tint[data-m="duo"]::after { background: var(--fx-acc-d, #09132f); mix-blend-mode: screen; opacity: var(--fx); }
/* 색 입히기 — 원래 색을 살리며 팀 색 쪽으로 물든다(soft-light + 옅은 color) */
.fx-tint[data-m="wash"]::before { background: linear-gradient(160deg, var(--fx-acc-l, #a5b4fc), var(--fx-acc, #1e40af) 55%, var(--fx-acc-d, #09132f)); mix-blend-mode: soft-light; opacity: calc(var(--fx) * .95); }
.fx-tint[data-m="wash"]::after { background: var(--fx-acc, #1e40af); mix-blend-mode: color; opacity: calc(var(--fx) * .32); }
/* 흑백 — 채도만 뺀다(밝기는 그대로) */
.fx-tint[data-m="mono"]::before { background: #000; mix-blend-mode: saturation; opacity: var(--fx); }
.fx-tint[data-m="mono"]::after { display: none; }
/* 하프톤 — 아래로 갈수록 커지는 망점(엇갈린 12px 격자)이 오른쪽 아래 모서리에 모인다. 무늬·모서리는 마스크 두 장의 교집합, 색은 바탕색 */
.shero-fx > .fx-halftone {
  background: #fff; opacity: calc(var(--fx) * .36);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='480'%3E%3Ccircle cx='6' cy='66' r='0.35'/%3E%3Ccircle cx='6' cy='78' r='0.44'/%3E%3Ccircle cx='6' cy='90' r='0.54'/%3E%3Ccircle cx='6' cy='102' r='0.64'/%3E%3Ccircle cx='6' cy='114' r='0.75'/%3E%3Ccircle cx='6' cy='126' r='0.86'/%3E%3Ccircle cx='6' cy='138' r='0.98'/%3E%3Ccircle cx='6' cy='150' r='1.10'/%3E%3Ccircle cx='6' cy='162' r='1.22'/%3E%3Ccircle cx='6' cy='174' r='1.35'/%3E%3Ccircle cx='6' cy='186' r='1.49'/%3E%3Ccircle cx='6' cy='198' r='1.62'/%3E%3Ccircle cx='6' cy='210' r='1.76'/%3E%3Ccircle cx='6' cy='222' r='1.90'/%3E%3Ccircle cx='6' cy='234' r='2.05'/%3E%3Ccircle cx='6' cy='246' r='2.20'/%3E%3Ccircle cx='6' cy='258' r='2.35'/%3E%3Ccircle cx='6' cy='270' r='2.50'/%3E%3Ccircle cx='6' cy='282' r='2.66'/%3E%3Ccircle cx='6' cy='294' r='2.82'/%3E%3Ccircle cx='6' cy='306' r='2.98'/%3E%3Ccircle cx='6' cy='318' r='3.15'/%3E%3Ccircle cx='6' cy='330' r='3.31'/%3E%3Ccircle cx='6' cy='342' r='3.48'/%3E%3Ccircle cx='6' cy='354' r='3.66'/%3E%3Ccircle cx='6' cy='366' r='3.83'/%3E%3Ccircle cx='6' cy='378' r='4.01'/%3E%3Ccircle cx='6' cy='390' r='4.19'/%3E%3Ccircle cx='6' cy='402' r='4.37'/%3E%3Ccircle cx='6' cy='414' r='4.55'/%3E%3Ccircle cx='6' cy='426' r='4.74'/%3E%3Ccircle cx='6' cy='438' r='4.93'/%3E%3Ccircle cx='6' cy='450' r='5.12'/%3E%3Ccircle cx='6' cy='462' r='5.31'/%3E%3Ccircle cx='6' cy='474' r='5.50'/%3E%3Ccircle cx='18' cy='60' r='0.30'/%3E%3Ccircle cx='18' cy='72' r='0.39'/%3E%3Ccircle cx='18' cy='84' r='0.49'/%3E%3Ccircle cx='18' cy='96' r='0.59'/%3E%3Ccircle cx='18' cy='108' r='0.69'/%3E%3Ccircle cx='18' cy='120' r='0.80'/%3E%3Ccircle cx='18' cy='132' r='0.92'/%3E%3Ccircle cx='18' cy='144' r='1.04'/%3E%3Ccircle cx='18' cy='156' r='1.16'/%3E%3Ccircle cx='18' cy='168' r='1.29'/%3E%3Ccircle cx='18' cy='180' r='1.42'/%3E%3Ccircle cx='18' cy='192' r='1.55'/%3E%3Ccircle cx='18' cy='204' r='1.69'/%3E%3Ccircle cx='18' cy='216' r='1.83'/%3E%3Ccircle cx='18' cy='228' r='1.97'/%3E%3Ccircle cx='18' cy='240' r='2.12'/%3E%3Ccircle cx='18' cy='252' r='2.27'/%3E%3Ccircle cx='18' cy='264' r='2.42'/%3E%3Ccircle cx='18' cy='276' r='2.58'/%3E%3Ccircle cx='18' cy='288' r='2.74'/%3E%3Ccircle cx='18' cy='300' r='2.90'/%3E%3Ccircle cx='18' cy='312' r='3.06'/%3E%3Ccircle cx='18' cy='324' r='3.23'/%3E%3Ccircle cx='18' cy='336' r='3.40'/%3E%3Ccircle cx='18' cy='348' r='3.57'/%3E%3Ccircle cx='18' cy='360' r='3.74'/%3E%3Ccircle cx='18' cy='372' r='3.92'/%3E%3Ccircle cx='18' cy='384' r='4.10'/%3E%3Ccircle cx='18' cy='396' r='4.28'/%3E%3Ccircle cx='18' cy='408' r='4.46'/%3E%3Ccircle cx='18' cy='420' r='4.65'/%3E%3Ccircle cx='18' cy='432' r='4.83'/%3E%3Ccircle cx='18' cy='444' r='5.02'/%3E%3Ccircle cx='18' cy='456' r='5.21'/%3E%3Ccircle cx='18' cy='468' r='5.40'/%3E%3C/svg%3E") 0 100% / 24px 480px repeat-x, linear-gradient(to left, #000 8%, rgba(0, 0, 0, .45) 42%, rgba(0, 0, 0, 0) 78%);
  -webkit-mask-composite: source-in;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='480'%3E%3Ccircle cx='6' cy='66' r='0.35'/%3E%3Ccircle cx='6' cy='78' r='0.44'/%3E%3Ccircle cx='6' cy='90' r='0.54'/%3E%3Ccircle cx='6' cy='102' r='0.64'/%3E%3Ccircle cx='6' cy='114' r='0.75'/%3E%3Ccircle cx='6' cy='126' r='0.86'/%3E%3Ccircle cx='6' cy='138' r='0.98'/%3E%3Ccircle cx='6' cy='150' r='1.10'/%3E%3Ccircle cx='6' cy='162' r='1.22'/%3E%3Ccircle cx='6' cy='174' r='1.35'/%3E%3Ccircle cx='6' cy='186' r='1.49'/%3E%3Ccircle cx='6' cy='198' r='1.62'/%3E%3Ccircle cx='6' cy='210' r='1.76'/%3E%3Ccircle cx='6' cy='222' r='1.90'/%3E%3Ccircle cx='6' cy='234' r='2.05'/%3E%3Ccircle cx='6' cy='246' r='2.20'/%3E%3Ccircle cx='6' cy='258' r='2.35'/%3E%3Ccircle cx='6' cy='270' r='2.50'/%3E%3Ccircle cx='6' cy='282' r='2.66'/%3E%3Ccircle cx='6' cy='294' r='2.82'/%3E%3Ccircle cx='6' cy='306' r='2.98'/%3E%3Ccircle cx='6' cy='318' r='3.15'/%3E%3Ccircle cx='6' cy='330' r='3.31'/%3E%3Ccircle cx='6' cy='342' r='3.48'/%3E%3Ccircle cx='6' cy='354' r='3.66'/%3E%3Ccircle cx='6' cy='366' r='3.83'/%3E%3Ccircle cx='6' cy='378' r='4.01'/%3E%3Ccircle cx='6' cy='390' r='4.19'/%3E%3Ccircle cx='6' cy='402' r='4.37'/%3E%3Ccircle cx='6' cy='414' r='4.55'/%3E%3Ccircle cx='6' cy='426' r='4.74'/%3E%3Ccircle cx='6' cy='438' r='4.93'/%3E%3Ccircle cx='6' cy='450' r='5.12'/%3E%3Ccircle cx='6' cy='462' r='5.31'/%3E%3Ccircle cx='6' cy='474' r='5.50'/%3E%3Ccircle cx='18' cy='60' r='0.30'/%3E%3Ccircle cx='18' cy='72' r='0.39'/%3E%3Ccircle cx='18' cy='84' r='0.49'/%3E%3Ccircle cx='18' cy='96' r='0.59'/%3E%3Ccircle cx='18' cy='108' r='0.69'/%3E%3Ccircle cx='18' cy='120' r='0.80'/%3E%3Ccircle cx='18' cy='132' r='0.92'/%3E%3Ccircle cx='18' cy='144' r='1.04'/%3E%3Ccircle cx='18' cy='156' r='1.16'/%3E%3Ccircle cx='18' cy='168' r='1.29'/%3E%3Ccircle cx='18' cy='180' r='1.42'/%3E%3Ccircle cx='18' cy='192' r='1.55'/%3E%3Ccircle cx='18' cy='204' r='1.69'/%3E%3Ccircle cx='18' cy='216' r='1.83'/%3E%3Ccircle cx='18' cy='228' r='1.97'/%3E%3Ccircle cx='18' cy='240' r='2.12'/%3E%3Ccircle cx='18' cy='252' r='2.27'/%3E%3Ccircle cx='18' cy='264' r='2.42'/%3E%3Ccircle cx='18' cy='276' r='2.58'/%3E%3Ccircle cx='18' cy='288' r='2.74'/%3E%3Ccircle cx='18' cy='300' r='2.90'/%3E%3Ccircle cx='18' cy='312' r='3.06'/%3E%3Ccircle cx='18' cy='324' r='3.23'/%3E%3Ccircle cx='18' cy='336' r='3.40'/%3E%3Ccircle cx='18' cy='348' r='3.57'/%3E%3Ccircle cx='18' cy='360' r='3.74'/%3E%3Ccircle cx='18' cy='372' r='3.92'/%3E%3Ccircle cx='18' cy='384' r='4.10'/%3E%3Ccircle cx='18' cy='396' r='4.28'/%3E%3Ccircle cx='18' cy='408' r='4.46'/%3E%3Ccircle cx='18' cy='420' r='4.65'/%3E%3Ccircle cx='18' cy='432' r='4.83'/%3E%3Ccircle cx='18' cy='444' r='5.02'/%3E%3Ccircle cx='18' cy='456' r='5.21'/%3E%3Ccircle cx='18' cy='468' r='5.40'/%3E%3C/svg%3E") 0 100% / 24px 480px repeat-x, linear-gradient(to left, #000 8%, rgba(0, 0, 0, .45) 42%, rgba(0, 0, 0, 0) 78%);
  mask-composite: intersect;
}
.shero-fx > .fx-halftone[data-c="accent"] { background: var(--fx-acc-l, #a5b4fc); opacity: calc(var(--fx) * .42); }
.shero-fx > .fx-halftone[data-c="ink"] { background: #060609; opacity: calc(var(--fx) * .5); }
/* 라이트 리크 — 필름 가장자리(왼쪽·오른쪽 옆구리)로 새어 든 빛, 아주 느리게 번진다 */
.shero-fx > .fx-leak {
  inset: -8%;
  background:
    radial-gradient(34% 48% at 2% 66%, rgba(255, 118, 58, .62), rgba(255, 118, 58, 0) 70%),
    radial-gradient(24% 36% at 0% 30%, rgba(255, 196, 120, .34), rgba(255, 196, 120, 0) 72%),
    radial-gradient(30% 44% at 100% 72%, rgba(255, 66, 96, .38), rgba(255, 66, 96, 0) 70%);
  mix-blend-mode: screen; opacity: calc(var(--fx) * .9);
  animation: fxLeak 18s ease-in-out infinite alternate;
}
.shero-fx > .fx-leak[data-c="accent"] {
  background:
    radial-gradient(34% 48% at 2% 66%, color-mix(in srgb, var(--fx-acc-l, #a5b4fc) 70%, transparent), transparent 70%),
    radial-gradient(24% 36% at 0% 30%, color-mix(in srgb, var(--fx-acc-l, #a5b4fc) 36%, transparent), transparent 72%),
    radial-gradient(30% 44% at 100% 72%, color-mix(in srgb, var(--fx-acc, #1e40af) 60%, transparent), transparent 70%);
}
@keyframes fxLeak { from { transform: translate3d(-1.5%, 1%, 0) scale(1); } to { transform: translate3d(1.5%, -1.5%, 0) scale(1.05); } }
/* 유리 패널 — 글자 뒤 반투명 유리 한 장(backdrop-filter). 흐림을 못 하는 브라우저는 짙은 반투명 판 */
.shero-panel { display: none; }
:where(.shero:has(> .shero-fx > .fx-panel)) .shero-text { position: relative; isolation: isolate; }
.shero:has(> .shero-fx > .fx-panel) .shero-panel {
  display: block; position: absolute; inset: -34px -48px; z-index: -1; pointer-events: none; border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 40%, rgba(255, 255, 255, 0)), rgba(12, 12, 18, var(--pn-a, .22));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 24px 70px rgba(4, 6, 20, .26);
  -webkit-backdrop-filter: blur(var(--pn-b, 18px)) saturate(1.45); backdrop-filter: blur(var(--pn-b, 18px)) saturate(1.45);
}
.shero:has(> .shero-fx > .fx-panel[data-lv="1"]) { --pn-a: .12; --pn-b: 10px; }
.shero:has(> .shero-fx > .fx-panel[data-lv="3"]) { --pn-a: .34; --pn-b: 30px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shero:has(> .shero-fx > .fx-panel) .shero-panel { background: rgba(14, 14, 20, .62); }
}
@media (max-width: 860px) { .shero:has(> .shero-fx > .fx-panel) .shero-panel { inset: -22px -16px; border-radius: 24px; } }
/* 로고가 글 위(가운데·엠블럼)나 옆(나란히)에 있으면 패널이 로고까지 감싼다 — 로고 타일이 패널 테두리에 반쯤 걸치지 않게.
   분할은 로고가 멀리(space-between) 있어 글만 감싼다. 자유 배치는 아래 규칙(!important)이 이긴다 */
.shero:has(> .shero-fx > .fx-panel) .shero-in > .shero-logo { position: relative; z-index: 1; } /* 로고는 유리 위 — 글자 상자(쌓임 맥락)의 패널에 흐려지지 않게 */
.shero[data-layout="center"]:has(> .shero-in > .shero-logo):has(> .shero-fx > .fx-panel) .shero-panel { top: calc(-1 * (var(--logo-size, 96px) + 22px + 34px)); }
.shero[data-layout="mark"]:has(> .shero-in > .shero-logo):has(> .shero-fx > .fx-panel) .shero-panel { top: calc(-1 * (var(--logo-size, 96px) * 1.9 + 28px + 34px)); }
.shero[data-layout="left"]:has(> .shero-in > .shero-logo):has(> .shero-fx > .fx-panel) .shero-panel { left: calc(-1 * (var(--logo-size, 96px) + clamp(24px, 4vw, 44px) + 48px)); }
@media (max-width: 860px) {
  .shero[data-layout="center"]:has(> .shero-in > .shero-logo):has(> .shero-fx > .fx-panel) .shero-panel { top: calc(-1 * (var(--logo-size, 96px) + 22px + 22px)); }
  .shero[data-layout="mark"]:has(> .shero-in > .shero-logo):has(> .shero-fx > .fx-panel) .shero-panel { top: calc(-1 * (var(--logo-size, 96px) * 1.9 + 28px + 22px)); }
  .shero[data-layout="left"]:has(> .shero-in > .shero-logo):has(> .shero-fx > .fx-panel) .shero-panel { left: calc(-1 * (var(--logo-size, 96px) + clamp(24px, 4vw, 44px) + 16px)); }
}
@media (max-width: 700px) { /* 휴대폰 — 모든 배치가 로고 위 · 글 아래(간격 18px) */
  .shero[data-layout]:has(> .shero-in > .shero-logo):has(> .shero-fx > .fx-panel) .shero-panel { left: -16px; top: calc(-1 * (min(var(--logo-size, 96px), 22vw) + 18px + 22px)); }
  .shero:is([data-layout="split"], [data-layout="mark"]):has(> .shero-in > .shero-logo):has(> .shero-fx > .fx-panel) .shero-panel { top: calc(-1 * (min(calc(var(--logo-size, 96px) * 1.3), 40vw) + 18px + 22px)); }
}
/* 색수차 — 배경(사진·장면 캔버스·타이포)의 빨강·파랑 채널을 반대로 아주 조금 민다. 흐리게와 함께면 필터를 잇는다 */
.shero:has(> .shero-fx > .fx-chroma[data-lv="1"]) :is(.shero-bg img, .shero-pglass, .shero-glass, .shero-type) { filter: url(#fx-ca-1); }
.shero:has(> .shero-fx > .fx-chroma[data-lv="2"]) :is(.shero-bg img, .shero-pglass, .shero-glass, .shero-type) { filter: url(#fx-ca-2); }
.shero:has(> .shero-fx > .fx-chroma[data-lv="3"]) :is(.shero-bg img, .shero-pglass, .shero-glass, .shero-type) { filter: url(#fx-ca-3); }
.shero[data-bg-blur]:has(> .shero-fx > .fx-chroma[data-lv="1"]) :is(.shero-bg img, .shero-pglass) { filter: url(#fx-ca-1) blur(14px) saturate(1.06); }
.shero[data-bg-blur]:has(> .shero-fx > .fx-chroma[data-lv="2"]) :is(.shero-bg img, .shero-pglass) { filter: url(#fx-ca-2) blur(14px) saturate(1.06); }
.shero[data-bg-blur]:has(> .shero-fx > .fx-chroma[data-lv="3"]) :is(.shero-bg img, .shero-pglass) { filter: url(#fx-ca-3) blur(14px) saturate(1.06); }
/* 채널을 민 만큼 가장자리 한두 줄이 비어 색 선이 생긴다 — 아주 조금 키워 히어로 밖으로 보낸다(스크롤 시차는 같은 변수를 이어 쓴다) */
.shero:has(> .shero-fx > .fx-chroma) { --fx-ca-s: 1.012; }
.shero:has(> .shero-fx > .fx-chroma):not([data-bg-blur]) :is(.shero-bg img, .shero-pglass), .shero:has(> .shero-fx > .fx-chroma) > :is(.shero-glass, .shero-type) { transform: scale(var(--fx-ca-s)); }

/* ── 자동 스크림 — 켜진 빛 효과가 글자 자리를 밝히는 만큼만(ui.js fxHero가 --fx-keep·--fx-v0를 싣는다). 흰 글자 4.5:1 ──
   v' = 1 − (1 − v0)·keep(효과 뒤 가장 밝은 회색값) · pre(이미 있는 그늘) → 그늘 = 1 − .45 / v'. 넘지 않으면 0이라 보이지 않는다.
   사진은 원래 그늘 공식(1 − .36 / (1 − 어둡게))에 keep만 곱한다 — keep = 1이면 예전과 같다. */
:where(.shero[data-fx-scrim]) .shero-text { position: relative; isolation: isolate; }
.shero[data-fx-scrim]:not([data-fx="image"]) .shero-text::after {
  content: ''; position: absolute; inset: -56px -84px; z-index: -1; pointer-events: none; border-radius: 88px;
  background: rgba(8, 8, 12, max(0, calc(1 - .45 / ((1 - (1 - var(--fx-v0, .4)) * var(--fx-keep, 1)) * var(--fx-pre, 1)))));
  filter: blur(40px);
}
.shero[data-fx="image"][data-fx-scrim] .shero-text::before { background: rgba(8, 8, 12, max(0, calc(1 - .36 / (1 - var(--bg-dim, .4) * var(--fx-keep, 1))))); }
.shero[data-fx-scrim] > .shero-fx::after {
  --fx-a: max(0, calc(1 - .45 / (1 - (1 - var(--fx-v0t, var(--fx-v0, .4))) * var(--fx-keep-t, 1))));
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fx-band, 64px) + 112px); pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 12, var(--fx-a)) 0, rgba(8, 8, 12, var(--fx-a)) var(--fx-band, 64px), rgba(8, 8, 12, 0) 100%);
}
@media (max-width: 860px) {
  .shero[data-fx-scrim] > .shero-fx::after { --fx-band: 100px; }
  .shero[data-fx-scrim]:not([data-fx="image"]) .shero-text::after { inset: -40px -28px; filter: blur(30px); }
}
/* 자유 배치 — 글자 상자가 틀 전체라 그늘을 요소마다(요소는 쌓임 맥락이 아니라 그늘은 모두 글자 상자의 z -1 한 층 — 뒤 요소의 그늘이 앞 요소를 덮지 않는다) */
@media (min-width: 861px) {
  .shero[data-fx-scrim][data-free~="d"]:not([data-free-off]) .shero-text::after { display: none; }
  .shero[data-fx-scrim]:not([data-fx="image"])[data-free~="d"]:not([data-free-off]) :is(.shero-kicker, h1, .tagline, .hero-social, .cta)[data-free-el]::after {
    content: ''; position: absolute; inset: -24px -36px; z-index: -1; pointer-events: none; border-radius: 48px;
    background: rgba(8, 8, 12, max(0, calc(1 - .45 / ((1 - (1 - var(--fx-v0, .4)) * var(--fx-keep, 1)) * var(--fx-pre, 1))))); filter: blur(28px);
  }
  .shero[data-fx="image"][data-fx-scrim][data-free~="d"]:not([data-free-off]) :is(.shero-kicker, h1, .tagline, .hero-social)[data-free-el]::before { background: rgba(8, 8, 12, max(0, calc(1 - .36 / (1 - var(--bg-dim, .4) * var(--fx-keep, 1))))); }
}
@media (max-width: 860px) {
  .shero[data-fx-scrim][data-free~="m"]:not([data-free-off]) .shero-text::after { display: none; }
  .shero[data-fx-scrim]:not([data-fx="image"])[data-free~="m"]:not([data-free-off]) :is(.shero-kicker, h1, .tagline, .hero-social, .cta)[data-free-el]::after {
    content: ''; position: absolute; inset: -16px -22px; z-index: -1; pointer-events: none; border-radius: 36px;
    background: rgba(8, 8, 12, max(0, calc(1 - .45 / ((1 - (1 - var(--fx-v0, .4)) * var(--fx-keep, 1)) * var(--fx-pre, 1))))); filter: blur(20px);
  }
  .shero[data-fx="image"][data-fx-scrim][data-free~="m"]:not([data-free-off]) :is(.shero-kicker, h1, .tagline, .hero-social)[data-free-el]::before { background: rgba(8, 8, 12, max(0, calc(1 - .36 / (1 - var(--bg-dim, .4) * var(--fx-keep, 1))))); }
}
/* 아래 멜트(흰 그라디언트, ::after)가 멤버 줄 뒤를 밝힌다(효과 전 회색값 ≈ .62) — 빛 효과가 켜져 있으면 멤버 줄에 한 겹 더 받친다.
   멤버 줄이 멜트에 걸리는 건 넓은 화면의 기본·컴팩트 높이뿐이다(휴대폰·풀스크린은 글이 가운데라 걸리지 않는다) */
@media (min-width: 861px) {
  :where(.shero[data-fx-scrim]:is([data-fx="glass"], [data-fx="dots"], [data-fx="plain"], [data-fx="type"]):not([data-height="tall"])) .hero-social { position: relative; isolation: isolate; }
  :where(.shero[data-fx-scrim]:is([data-fx="glass"], [data-fx="dots"], [data-fx="plain"], [data-fx="type"]):not([data-height="tall"])) .cta { position: relative; z-index: 1; } /* 그늘이 버튼 아래 끝에 번지지 않게 */
  .shero[data-fx-scrim]:is([data-fx="glass"], [data-fx="dots"], [data-fx="plain"], [data-fx="type"]):not([data-height="tall"]) .hero-social::before {
    content: ''; position: absolute; inset: -12px -34px; z-index: -1; pointer-events: none; border-radius: 44px;
    background: rgba(8, 8, 12, max(0, calc(1 - .45 / (1 - .38 * var(--fx-keep, 1))))); filter: blur(20px);
  }
}
/* 자유 배치 + 사진 — 원래 그늘이 없던 버튼 묶음도 빛 효과가 켜지면 받친다(고스트 버튼의 흰 글자) */
@media (min-width: 861px) {
  .shero[data-fx="image"][data-fx-scrim][data-free~="d"]:not([data-free-off]) .cta[data-free-el]::before {
    content: ''; position: absolute; inset: -22px -34px; z-index: -1; pointer-events: none; border-radius: 44px;
    background: rgba(8, 8, 12, max(0, calc(1 - .36 / (1 - var(--bg-dim, .4) * var(--fx-keep, 1))))); filter: blur(26px);
  }
}
@media (max-width: 860px) {
  .shero[data-fx="image"][data-fx-scrim][data-free~="m"]:not([data-free-off]) .cta[data-free-el]::before {
    content: ''; position: absolute; inset: -16px -22px; z-index: -1; pointer-events: none; border-radius: 36px;
    background: rgba(8, 8, 12, max(0, calc(1 - .36 / (1 - var(--bg-dim, .4) * var(--fx-keep, 1))))); filter: blur(20px);
  }
}

/* ── 저널 블록 — 홍보 아카이브(/:slug/intro/columns)와 같은 카드: 대표 글 한 편(큰 카드) + 그리드. 2·4편은 2열, 6편은 3열 ── */
.blk-sec-journal .jhero-text strong { font-size: clamp(24px, 2.6vw, 32px); }
.blk-sec-journal .blk-jgrid { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--border); }
.blk-jgrid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk-jgrid[data-cols="2"] .jcard-thumb { aspect-ratio: 2 / 1; } /* 두 칸이면 판이 커진다 — 조금 납작하게 */
.blk-jgrid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 휴대폰 — 그리드는 한 줄 목록(작은 판 + 제목)으로 촘촘하게. 판의 큰 글자는 옆 제목과 겹치니 숨기고 오버라인만 */
@media (max-width: 760px) {
  .blk-sec-journal .blk-jgrid { margin-top: 28px; padding-top: 24px; }
  .blk-jgrid[data-cols] { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .blk-jgrid .jcard { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 5px; align-items: start; }
  .blk-jgrid[data-cols] .jcard-thumb { grid-row: 1 / span 2; aspect-ratio: 4 / 3; padding: 8px; border-radius: 10px; }
  .blk-jgrid .jcard-thumb b { display: none; }
  .blk-jgrid .jcard-thumb .jthumb-over { font-size: 9.5px; letter-spacing: .1em; }
  .blk-jgrid .jcard-meta { padding-top: 2px; }
  .blk-jgrid .jcard-title { font-size: 14.5px; }
}

/* 히어로 글 — 한국어는 단어 단위로만 꺾는다('수학/과' 방지). 아주 긴 한 단어만 어디서든 */
.shero :is(h1, .tagline, .shero-kicker) { word-break: keep-all; overflow-wrap: anywhere; }
/* 위쪽 메뉴의 로고 — 로고 표현이 원본 색·흰 타일이면 흰 실루엣으로 뭉개지 않는다 */
.intro-logo[data-style="original"], .intro-logo[data-style="tile"] { filter: none; }
.intro-logo[data-style="tile"] { background: #fff; padding: 3px; border-radius: 8px; }