/* 황미란 — Educator · Designer · Researcher
   Layout: 12단 그리드 위에 거대한 워드마크, 질문으로 시작하는 작업 사례, 헤어라인 목록.
   흑백만 쓴다. 색은 사진에만 있고, 사진도 평소엔 회색조로 둔다. 숫자를 크게 쓰지 않는다. */
:root {
  --bg: #ffffff;
  --ink: #111114;
  --ink-2: #5e5e66;
  --ink-3: #9a9aa2;
  --line: #e4e4e8;
  --wash: #f4f4f5;

  --f-display: "Geist", "IBM Plex Sans KR", system-ui, sans-serif;
  --f-sans: "IBM Plex Sans KR", "Geist", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;

  --margin: clamp(16px, 3.2vw, 48px);
  --gutter: clamp(12px, 1.6vw, 24px);
  --cols: 12;
  --head-h: 60px;

  --t-xs: 11px;
  --t-sm: 13.5px;
  --t-base: 15.5px;
  --t-md: clamp(17px, 1.3vw, 19px);
  --t-lg: clamp(22px, 2.1vw, 30px);
  --t-xl: clamp(30px, 4vw, 58px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0f; --ink: #f1f1f3; --ink-2: #a3a3ab; --ink-3: #6c6c74; --line: #2a2a2f; --wash: #17171a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0d0f; --ink: #f1f1f3; --ink-2: #a3a3ab; --ink-3: #6c6c74; --line: #2a2a2f; --wash: #17171a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-sans); font-size: var(--t-base); line-height: 1.75;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ── grid ─────────────────────────────── */
.wrap { padding-inline: var(--margin); max-width: 1920px; margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.grid > * { min-width: 0; }
.overlay { position: fixed; inset: 0; z-index: 90; pointer-events: none; padding-inline: var(--margin); max-width: 1920px; margin-inline: auto; }
.overlay .grid { height: 100%; }
.overlay .grid span { background: color-mix(in srgb, var(--ink) 5%, transparent); border-inline: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }

.label { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); line-height: 1.5; }
a.ul { border-bottom: 1px solid var(--ink-3); }
a.ul:hover { border-color: var(--ink); }

/* ── header ───────────────────────────── */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .grid { align-items: stretch; min-height: var(--head-h); }
.top .who { grid-column: 1 / span 2; align-self: center; font-weight: 600; font-size: var(--t-sm); display: flex; flex-wrap: wrap; gap: 0 .6em; align-items: baseline; }
.top .who .label { color: var(--ink-3); }
/* 메뉴: 넓은 화면에서는 12단 가운데 8단을 한 칸씩 */
.top nav { grid-column: 3 / span 8; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); }
@supports (grid-template-columns: subgrid) { .top nav { grid-template-columns: subgrid; } }
.top nav a { display: flex; align-items: center; padding: 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; color: var(--ink-2); font: 500 var(--t-sm)/1.3 var(--f-display); white-space: nowrap; }
.top nav a:hover, .top nav a.on { color: var(--ink); }
.top nav a.on { border-top-color: var(--ink); }
.top .tools { grid-column: 11 / span 2; align-self: center; display: flex; justify-content: flex-end; gap: 6px; }
.pill { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 999px; padding: 7px 11px; cursor: pointer; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.pill:hover { border-color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ── hero ─────────────────────────────── */
.hero { padding-top: clamp(28px, 5vw, 72px); }
.mega-box { overflow: hidden; }
.mega { font-family: var(--f-display); font-weight: 600; line-height: .8; letter-spacing: -.065em; margin: 0; white-space: nowrap; display: inline-block; padding-bottom: .04em; }
.intro { border-top: 1px solid var(--ink); margin-top: clamp(16px, 2.4vw, 32px); padding-top: clamp(20px, 3vw, 40px); row-gap: 28px; }
.intro .lead { grid-column: 1 / span 7; margin: 0; font: 500 clamp(24px, 2.9vw, 44px)/1.4 var(--f-serif); letter-spacing: -.035em; text-wrap: balance; }
.intro-side { grid-column: 9 / span 4; }
.intro .body { margin: 0 0 24px; color: var(--ink-2); font-size: var(--t-sm); }
.now { margin: 0; }
.now div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.5; }
.now dt { padding-top: 2px; }
.now dd { margin: 0; }

/* ── section frame ────────────────────── */
.sec { padding-block: clamp(72px, 10vw, 150px) 0; }
.sec-head { position: relative; border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: clamp(28px, 4vw, 56px); align-items: baseline; row-gap: 8px; }
.sec-head::before, .sec-head::after { content: "+"; position: absolute; top: -.72em; font: 300 16px/1 var(--f-mono); color: var(--ink); background: var(--bg); padding-inline: 2px; }
.sec-head::before { left: -7px; } .sec-head::after { right: -7px; }
.sec-head .idx { grid-column: 1 / span 2; }
.sec-head h2 { grid-column: 3 / span 5; margin: 0; font: 600 var(--t-xl)/1.05 var(--f-sans); letter-spacing: -.05em; }
.sec-head p { grid-column: 9 / span 4; margin: 0; color: var(--ink-2); font-size: var(--t-sm); }

/* ── projects ─────────────────────────── */
.proj { padding-block: clamp(28px, 4vw, 56px); border-top: 1px solid var(--line); row-gap: 20px; align-items: start; }
.proj:first-child { border-top: 0; padding-top: 0; }
.proj .meta { grid-column: 1 / span 2; display: flex; flex-direction: column; gap: 2px; }
.proj .txt { grid-column: 3 / span 4; }
.proj .pics { grid-column: 7 / span 6; display: grid; gap: var(--gutter); }
.proj .pics.n2, .proj .pics.n3 { grid-template-columns: 1fr 1fr; align-items: start; }
.proj .pics figure.wide { grid-column: 1 / -1; }
.proj .pics figcaption { font-size: var(--t-xs); color: var(--ink-2); padding-top: 6px; line-height: 1.5; }
/* 사진 위치: 왼쪽(pic-left) · 글 아래 넓게(pic-below) */
.proj.pic-left .pics { grid-column: 3 / span 5; grid-row: 1; }
.proj.pic-left .txt { grid-column: 8 / span 5; grid-row: 1; }
.proj.pic-below .txt { grid-column: 3 / span 7; }
.proj.pic-below .pics { grid-column: 3 / span 10; }
.proj.pic-below .pics.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proj.no-img .txt { grid-column: 3 / span 7; }
.proj h3 { margin: 0; font: 600 var(--t-lg)/1.2 var(--f-sans); letter-spacing: -.04em; text-wrap: balance; }
.proj .en { margin: 2px 0 18px; font: 400 var(--t-sm)/1.4 var(--f-display); color: var(--ink-3); letter-spacing: -.01em; }
.proj .q { margin: 0 0 16px; font: 500 var(--t-md)/1.6 var(--f-serif); letter-spacing: -.02em; padding-left: 14px; border-left: 1px solid var(--ink); }
.proj .d { margin: 0 0 16px; font-size: var(--t-sm); color: var(--ink-2); }
.made { list-style: none; margin: 0; padding: 0; }
.made li { font-size: var(--t-sm); line-height: 1.5; padding: 7px 0; border-top: 1px solid var(--line); }
.made li:last-child { border-bottom: 1px solid var(--line); }
.ext { display: inline-block; margin-top: 16px; font: var(--t-xs)/1.4 var(--f-mono); letter-spacing: .03em; border-bottom: 1px solid var(--ink); }
.ext:hover { opacity: .6; }
.proj figure, .gallery figure { margin: 0; }
.proj img { width: 100%; border: 1px solid var(--line); filter: grayscale(1) contrast(1.04); transition: filter .4s; }
.proj figure:hover img, .gallery figure:hover img, .proj figure:active img, .gallery figure:active img { filter: none; }

/* ── archive ──────────────────────────── */
.arch { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.arch li { padding: 13px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.arch .y { grid-column: 1 / span 2; }
.arch .t { grid-column: 3 / span 5; font-weight: 500; letter-spacing: -.02em; line-height: 1.45; }
.arch .k { grid-column: 8 / span 5; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; }

/* ── research threads ─────────────────── */
.threads-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.threads { min-width: 640px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 4px 18px;
  background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / 19)); }
.tg-years, .tg-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.tg-years span { font: var(--t-xs)/1 var(--f-mono); color: var(--ink-3); padding: 8px 0 14px 4px; }
.tg-row { margin-top: 10px; }
.tg-bar { position: relative; height: 34px; border: 0; padding: 0 0 0 10px; cursor: pointer; text-align: left; background: transparent; color: var(--ink); font: 500 var(--t-sm)/34px var(--f-sans); letter-spacing: -.02em; white-space: nowrap; }
.tg-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); }
.tg-bar::after { content: ""; position: absolute; left: 0; top: calc(50% - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.tg-name { position: relative; background: var(--bg); padding: 0 8px; margin-left: 4px; }
.tg-bar:hover::before { height: 3px; top: calc(50% - 1px); }
.thread-tip { min-height: 1.6em; margin: 12px 0 0; font-size: var(--t-sm); color: var(--ink-2); }

/* ── blocks & lists ───────────────────── */
.cols { row-gap: clamp(36px, 5vw, 64px); margin-top: clamp(40px, 5vw, 72px); }
.block { grid-column: span 6; }
.block.third { grid-column: span 4; }
.block.two-third { grid-column: span 8; }
.block h3 { margin: 0 0 4px; font-size: var(--t-md); letter-spacing: -.02em; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.plain, .ledger, .pubs { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.5; }
.plain b { font-weight: 500; display: block; }
.plain small { display: block; color: var(--ink-2); font-size: var(--t-xs); margin-top: 3px; }
.ledger li { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 0 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.5; }
.ledger .d { font: var(--t-xs)/1.5 var(--f-mono); color: var(--ink-2); padding-top: 2px; font-variant-numeric: tabular-nums; }
.ledger b { font-weight: 500; }
.ledger small { display: block; color: var(--ink-2); font-size: var(--t-xs); margin-top: 2px; line-height: 1.5; }
.pubs li { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 0 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pubs .y { padding-top: 4px; }
.pubs .w { display: flex; flex-direction: column; gap: 3px; }
.pubs .k { color: var(--ink-3); }
.pubs .ti { font: 500 clamp(15.5px, 1.25vw, 18px)/1.5 var(--f-serif); letter-spacing: -.02em; }
.pubs .by { color: var(--ink-2); font-size: var(--t-xs); line-height: 1.55; }

/* teaching approach */
.approach { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.approach article { border-top: 1px solid var(--ink); padding-top: 12px; }
.approach h3 { margin: 0 0 8px; font: 500 var(--t-md)/1.4 var(--f-serif); letter-spacing: -.02em; }
.approach p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }

/* gallery */
.gallery { columns: 4 220px; column-gap: var(--gutter); }
.gallery figure { break-inside: avoid; margin-bottom: var(--gutter); }
.gallery img { width: 100%; border: 1px solid var(--line); filter: grayscale(1); transition: filter .4s; }
.gallery figcaption { font-size: var(--t-xs); color: var(--ink-2); padding-top: 6px; line-height: 1.5; }

/* ── footer ───────────────────────────── */
.foot { margin-top: clamp(96px, 12vw, 180px); border-top: 1px solid var(--ink); padding-block: 18px 32px; }
.foot .big { grid-column: 1 / -1; margin: 14px 0 32px; }
.copy { cursor: pointer; border: 0; background: none; color: inherit; padding: 0; font: 600 clamp(28px, 6.4vw, 112px)/1 var(--f-display); letter-spacing: -.055em; text-align: left; word-break: break-all; }
.copy:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.foot .c1, .foot .c2 { grid-column: span 4; font-size: var(--t-sm); }
.foot .c3 { grid-column: span 4; font-size: var(--t-sm); text-align: right; color: var(--ink-2); }
.clock { font-variant-numeric: tabular-nums; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: var(--t-sm); opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 99; }
.toast.on { opacity: 1; }

/* ── responsive ───────────────────────── */
@media (max-width: 1100px) {
  .intro .lead { grid-column: 1 / span 12; }
  .intro-side { grid-column: 1 / span 8; }
  .proj .txt { grid-column: 3 / span 10; }
  .proj .pics { grid-column: 3 / span 10; }
  .proj.pic-left .txt, .proj.pic-left .pics, .proj.pic-below .txt, .proj.pic-below .pics { grid-column: 3 / span 10; grid-row: auto; }
  .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .block.third, .block.two-third { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  :root { --cols: 6; }
  .top .who { grid-column: 1 / span 4; }
  .top .tools { grid-column: 5 / span 2; }
  .grid-btn { display: none; }
  .intro-side { grid-column: 1 / -1; }
  .sec-head .idx, .sec-head h2, .sec-head p { grid-column: 1 / -1; }
  .proj .meta { grid-column: 1 / -1; flex-direction: row; gap: 14px; }
  .proj .txt, .proj.no-img .txt, .proj .pics, .proj.pic-left .txt, .proj.pic-left .pics, .proj.pic-below .txt, .proj.pic-below .pics { grid-column: 1 / -1; }
  .arch .y { grid-column: 1 / -1; }
  .arch .t, .arch .k { grid-column: 1 / -1; }
  .block { grid-column: 1 / -1; }
  .foot .c1, .foot .c2, .foot .c3 { grid-column: 1 / -1; text-align: left; margin-bottom: 10px; }
}
@media (max-width: 480px) {
  .approach { grid-template-columns: 1fr; }
  .ledger li { grid-template-columns: 5.4em minmax(0, 1fr); }
}
/* 한글 분류명은 본문 글꼴로 */
.proj .meta .label + .label, .pubs .k { font-family: var(--f-sans); text-transform: none; letter-spacing: 0; font-size: var(--t-xs); }

/* ── v4: 장(章) 레이아웃 ─────────── */

.proj .meta .k { font-family: var(--f-sans); text-transform: none; letter-spacing: 0; font-size: var(--t-xs); }
.facts { margin: 0 0 18px; border-top: 1px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 11em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.55; }
.facts dt { font-weight: 500; }
.facts dd { margin: 0; color: var(--ink-2); }
.sub { margin-bottom: 16px; }
.sub .label { display: block; margin-bottom: 4px; }

.group { padding-block: clamp(20px, 3vw, 36px); border-top: 1px solid var(--line); row-gap: 12px; }
.group:first-of-type { border-top: 0; }
.gh { grid-column: 1 / span 3; position: sticky; top: calc(var(--head-h) + 12px + env(safe-area-inset-top, 0px)); align-self: start; }
.gh h3 { margin: 0; font: 600 var(--t-md)/1.3 var(--f-sans); letter-spacing: -.03em; }
.gh .note { margin: 6px 0 0; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.55; max-width: 26ch; }
.gh .n { display: block; margin-top: 8px; color: var(--ink-3); }
.gb { grid-column: 4 / span 9; }
.gb .ledger li { grid-template-columns: 8.2em minmax(0, 1fr); }
.gb .ledger li:first-child { border-top: 1px solid var(--ink); }
.ledger .tech { display: inline-block; margin-top: 5px; font: var(--t-xs)/1.4 var(--f-mono); color: var(--ink-3); letter-spacing: .02em; }
.ledger small { white-space: normal; }
.gb .threads { min-width: 560px; }
.chapter .thread-tip { margin-top: 10px; }
@media (max-width: 1100px) {
  .gh { grid-column: 1 / span 4; }
  .gb { grid-column: 5 / span 8; }
}
@media (max-width: 820px) {
  .gh { grid-column: 1 / -1; position: static; }
  .gh .note { max-width: none; }
  .gb { grid-column: 1 / -1; }
  .gb .ledger li { grid-template-columns: 6.6em minmax(0, 1fr); }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
}
.ledger .d { word-break: keep-all; overflow-wrap: normal; }

/* ── v5: 링크 묶음과 QR ─────────────────── */
.qr { display: inline-block; background: #fff; padding: 4px; border: 1px solid var(--line); line-height: 0; flex: none; }
.qr img { width: 72px; height: 72px; image-rendering: pixelated; }
.qr.sm img { width: 52px; height: 52px; }
.links { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.links li { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.links a { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.links .lk { color: var(--ink-3); }
.links .lt { font-size: var(--t-sm); font-weight: 500; line-height: 1.45; }
.links .lh { font: var(--t-xs)/1.4 var(--f-mono); color: var(--ink-3); overflow-wrap: anywhere; }
.links a:hover .lt { text-decoration: underline; text-underline-offset: .15em; }
.gb .ledger li.has-qr { grid-template-columns: 8.2em minmax(0, 1fr) auto; }
.gb .ledger li .qr { align-self: center; }
@media (max-width: 820px) {
  .gb .ledger li.has-qr { grid-template-columns: 6.6em minmax(0, 1fr) auto; }
  .qr.sm img { width: 44px; height: 44px; }
}
@media print {
  :root { --bg: #fff; --ink: #000; --ink-2: #333; --ink-3: #666; --line: #ccc; --wash: #f4f4f4; color-scheme: light; }
  .top, .tools, .overlay, .toast, .filt, .clock { display: none !important; }
  .mega { font-size: 64pt !important; }
  .sec { padding-block: 28pt 0; break-before: page; }
  .sec-head, .group, .proj, .card, .ledger li { break-inside: avoid; }
  .gh { position: static; }
  img { filter: none !important; }
  .qr { border-color: #ccc; }
  a.ul, .links a .lt { border: 0; text-decoration: none; }
}
.links .lk, .sub .label { font-family: var(--f-sans); text-transform: none; letter-spacing: 0; font-size: var(--t-xs); }

/* ── 강의 노트 · 수업 자료 카드 (2026.10.8.) ── */
.cards { display: grid; gap: 0; }
.card { padding: 18px 0 24px; border-bottom: 1px solid var(--line); }
.cards .card:first-child { border-top: 1px solid var(--ink); }
.card .cm { display: flex; flex-wrap: wrap; gap: 4px 14px; font: var(--t-xs)/1.5 var(--f-mono); color: var(--ink-2); }
.card .cm .o { font-family: var(--f-sans); }
.card h4 { margin: 6px 0 10px; font: 600 var(--t-md)/1.35 var(--f-sans); letter-spacing: -.03em; }
.card .core { margin: 0 0 14px; padding-left: 1.1em; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.card .core li + li { margin-top: 3px; }
.cpics { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cpics.n1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cpics.n2 { grid-template-columns: 1fr 1fr; }
.cpics figure { margin: 0; }
.cpics img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); filter: grayscale(1) contrast(1.04); transition: filter .4s; }
.cpics img.tall, .cpics figure.tall img { aspect-ratio: auto; }
.cpics figure:hover img, .cpics figure:active img { filter: none; }
.cpics figcaption { margin-top: 4px; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.4; }
@media (max-width: 640px) { .cpics, .cpics.n1, .cpics.n2 { grid-template-columns: 1fr 1fr; } }

/* ── 주최·주관 기관: 제목 앞에 굵게 ─────── */
.ledger .org { display: inline; font-weight: 700; color: var(--ink); margin-right: .55em; }
.ledger .org::after { content: ""; display: inline-block; width: 1px; height: .85em; background: var(--ink-3); margin-left: .55em; vertical-align: -.05em; }
.proj p.org { margin: 0 0 6px; font-size: var(--t-sm); font-weight: 700; letter-spacing: -.01em; }

/* ── 메뉴 2단 (1280px 미만): 이름 줄 아래에 가로로 넘기는 메뉴 ── */
@media (max-width: 1279px) {
  :root { --head-h: 90px; }
  .top .grid { row-gap: 0; }
  .top .who { grid-column: 1 / span 6; min-height: 48px; align-content: center; }
  .top .tools { grid-column: 7 / span 6; grid-row: 1; }
  .top nav { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; gap: 0 clamp(14px, 2.4vw, 28px); overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { flex: none; padding: 10px 0 9px; border-top: 0; }
  .top nav a.on { border-bottom-color: var(--ink); }
}
@media (max-width: 820px) {
  .top .who { grid-column: 1 / span 4; }
  .top .tools { grid-column: 5 / span 2; }
}

/* 소개 다음 첫 구역(이력)은 바로 이어서 */
.hero + .sec { padding-top: clamp(40px, 6vw, 88px); }

/* ── 강의: 대상 고르기, 의뢰 기관 묶음 ── */
.sec-head .filt { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.filt .pill { font-family: var(--f-sans); text-transform: none; letter-spacing: 0; }
.lo + .lo { margin-top: 22px; }
.lo-h { margin: 0; padding: 8px 0 6px; border-top: 1px solid var(--ink); font-size: var(--t-sm); font-weight: 700; letter-spacing: -.01em; line-height: 1.45; }
.gb .lec .ledger li:first-child { border-top: 1px solid var(--line); }
.ledger .aud { font: var(--t-xs)/1.5 var(--f-sans); color: var(--ink-2); }
.gb .lec .ledger li { grid-template-columns: 6.4em minmax(0, 1fr); }
.gh .n i { font-style: normal; }
[hidden] { display: none !important; }
@media (max-width: 820px) {
  .sec-head .filt { grid-column: 1 / -1; }
  .gb .lec .ledger li { grid-template-columns: 5.6em minmax(0, 1fr); }
}

/* 한/EN: 맨 위 작은 전환 단추. 지금 언어는 진하게 */
.pill.lang { display: inline-flex; gap: 6px; font-family: var(--f-sans); text-transform: none; letter-spacing: 0; }
.pill.lang span { color: var(--ink-3); }
.pill.lang span.cur { color: var(--ink); font-weight: 600; }
.pill.lang span + span::before { content: "/"; margin-right: 6px; color: var(--line); font-weight: 400; }