/* Hallmark · shape: custom, one record feeding every document · genre: modern-minimal · theme: brand (app.johabon.com tokens inherited) · job: sign up
 * paper: oklch(99.6% 0.002 250) · accent: oklch(56.5% 0.168 252) · display: Pretendard Variable 700 · body: Pretendard Variable 400 · hero: centred poster after zuzu.network (by request), kind line, two-line head, two actions over a slow blue wash · nav: official logo, four centred menus marked by the logo dot, 문의하기 and 시작하기, clear over the hero and glass once scrolled (by request) · footer: wordmark beside company lines and one row of links · signature: type a new 이사장 once and the 14 documents of an officer change fill in, section 3
 * idea: "조합 정보는 한 번 입력하고, 서류는 그 정보로 이어서 만든다" · vibe: "정돈된 행정 서류, 앱과 같은 파란 신호" · imagery: product built in 3 slots (app behind login) · copy: Korean
 * axes: light/grotesk-sans/chromatic-blue · posture: restrained, one committed blue band asking for a consultation · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the split hero is the category default; kept because the app's own identity is the brief, and made the panel live so the hero does the product's one job */
/* Hallmark · finish-review: subagent · fix · 8 findings · 8 resolved (contact email and a dummy first post added on request) · gap: hero review skipped at build */
/* Hallmark · waive 79 · the 대표 asked for the zuzu.network first screen · a centred poster hero leaves equal paper above and below by design */
/* Hallmark · waive 84 · app.johabon.com answers only a login form, no sample account · the 조합 기본정보, 명부 and 총회 screens hold real member data, so they are built in product slots until clean captures exist */
@import url("./tokens.css?v=20261101");
@import url("./base.css?v=20261101");

/* ---------- chrome ---------- */
body { word-break: keep-all; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-rule-2); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-rule-2); }
.btn--s { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }

.wordmark { font: 800 var(--text-xl)/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark img { display: block; width: auto; height: 30px; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 2px; }

.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); transition: background-color var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
/* 맨 위에서는 첫 화면 물결이 비치게 투명, 내리면 반투명 유리 */
.nav--float:not(.is-stuck) { background: transparent; border-bottom-color: transparent; }
.nav--float.is-stuck { background: oklch(99.6% 0.002 250 / 0.82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 4px 16px oklch(20% 0.01 252 / 0.05); }
.nav__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-xl); min-height: 72px; }
.nav__row > .wordmark { justify-self: start; }
.nav__links { display: flex; gap: var(--space-xl); }
.nav__links a, .menu__panel a:not(.btn) { color: var(--color-ink-2); font-size: var(--text-md); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover, .menu__panel a:not(.btn):hover { color: var(--color-accent); }
.nav__links a { padding-block: var(--space-xs); font-size: var(--text-lg); font-weight: 600; }
.nav__links a[aria-current] { color: var(--color-ink); }
.nav__links a:focus-visible, .menu__panel a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 2px; }
.nav__actions { display: flex; gap: var(--space-xs); justify-self: end; }
.nav__actions .btn { font-size: var(--text-md); }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-input); font-weight: 600; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); display: grid; gap: var(--space-md); min-width: 14rem; padding: var(--space-lg); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }

/* ---------- shared ---------- */
section { padding-block: var(--section-gap-s); }
h2 { font-size: var(--text-section); max-width: 18ch; }
.lead { color: var(--color-ink-2); }
section p:not([class]) { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 46ch; }
.num { font-variant-numeric: tabular-nums; }
.facts { display: grid; margin: 0; }
.facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.facts dt { font-weight: 600; color: var(--color-ink); }
.facts dd { margin: 0; color: var(--color-ink-2); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center; min-height: 100svh; margin-top: -72px; padding-block: calc(var(--space-3xl) + 72px) var(--space-3xl); text-align: center; }
.hero__inner { display: grid; justify-items: center; gap: var(--space-lg); }
.hero__kind { font-size: var(--text-xl); font-weight: 600; color: var(--color-ink-2); }
.hero__head { max-width: none; font-size: clamp(2.25rem, 5.2vw + 1rem, 5.5rem); text-wrap: balance; line-height: 1.22; overflow-wrap: break-word; min-width: 0; }
.hero__head span { display: inline-block; }
.hero .actions { justify-content: center; margin-top: var(--space-lg); }
.btn--l { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-lg); }
/* 배경: 연한 파랑 물결 두 겹이 천천히 흐른다 */
.hero__wash { position: absolute; inset: -20%; z-index: -1; pointer-events: none; }
.hero__wash::before, .hero__wash::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); }
.hero__wash::before { width: 70%; height: 55%; left: 5%; top: 18%; background: var(--color-accent-soft); transform: rotate(-12deg); }
.hero__wash::after { width: 60%; height: 45%; right: 2%; bottom: 14%; background: var(--color-paper-3); transform: rotate(10deg); }
.js .hero__wash::before { animation: drift-a 18s var(--ease-in-out) infinite alternate; }
.js .hero__wash::after { animation: drift-b 22s var(--ease-in-out) infinite alternate; }
@keyframes drift-a { to { transform: translate3d(12%, 8%, 0) rotate(-4deg) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-10%, -10%, 0) rotate(16deg) scale(1.12); } }
/* 배경 별자리(hero-graph.js가 그림): 연한 별과 가는 선, 업무 순서대로 별이 켜지고 그때만 이름이 나타난다 */
.hero__graph { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.graph__star { fill: oklch(80% 0.06 252); opacity: 0.45; }
.graph__star--twinkle { animation: graph-twinkle 6s var(--ease-in-out) infinite alternate; }
@keyframes graph-twinkle { from { opacity: 0.15; } to { opacity: 0.8; } }
.graph__edge { fill: none; stroke: oklch(84% 0.05 252); stroke-width: 1; opacity: 0.55; }
.graph__edge--leaf { opacity: 0.35; }
.graph__leaf { fill: oklch(80% 0.06 252); opacity: 0.6; }
.graph__run { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 1px 1.5px oklch(30% 0.02 252 / 0.22)); }
.graph__dot { fill: oklch(76% 0.08 252); transition: fill 600ms var(--ease-out); }
.graph__node text { fill: var(--color-accent-2); font-family: var(--font-body); font-weight: 600; text-anchor: middle; dominant-baseline: central; letter-spacing: -0.01em; opacity: 0; transition: opacity 700ms var(--ease-out); }
.graph__node.is-on .graph__dot { fill: #fff; stroke: oklch(80% 0.04 252); stroke-width: 1; filter: drop-shadow(0 1px 2px oklch(30% 0.02 252 / 0.25)); }
/* 빛이 별에 도착하면 한 번만 반짝인다: 점이 살짝 커졌다 돌아오고 둘레로 빛이 퍼졌다 사라진다 */
.graph__dot, .graph__pulse { transform-box: fill-box; transform-origin: center; }
.graph__pulse { fill: url(#graph-pulse); opacity: 0; }
.graph__node.is-on .graph__dot { animation: graph-pop 1100ms var(--ease-in-out) 1; }
.graph__node.is-on .graph__pulse { animation: graph-pulse 1800ms var(--ease-in-out) 1; }
@keyframes graph-pop { 40% { transform: scale(1.7); } to { transform: scale(1); } }
@keyframes graph-pulse { 0% { opacity: 0; transform: scale(0.3); } 25% { opacity: 1; } to { opacity: 0; transform: scale(1.4); } }
.graph__node.is-on text { opacity: 0.85; }
/* 제목: 단어가 차례로 진해진다 (한 번) */
.js .hero__head span { opacity: 0.25; animation: word-in var(--dur-long) var(--ease-out) forwards; }
.js .hero__head span:nth-child(2) { animation-delay: 160ms; }
.js .hero__head span:nth-child(4) { animation-delay: 320ms; }
.js .hero__head span:nth-child(5) { animation-delay: 480ms; }
@keyframes word-in { to { opacity: 1; } }

/* ---------- change: 이사장 변경 시연 ---------- */
.change { padding-block: var(--section-gap-s) var(--section-gap); }
.change__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.change__head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: stretch; row-gap: var(--space-lg); margin-bottom: var(--space-xl); }
.change__intro { grid-column: 1 / 7; display: grid; align-content: center; gap: var(--space-md); }
.change__intro h2 { max-width: none; }
.change__side { grid-column: 7 / 13; display: grid; gap: var(--space-md); }
.change__fact { font-size: var(--text-xl); font-weight: 600; line-height: 1.4; color: var(--color-ink); }
.change__fact b { color: var(--color-accent-2); }
/* 범례: 시연 목록의 둥근 완료 표시(작성)와 네모 상자(발급)를 그대로 쓴다 */
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.legend__card { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-card); color: var(--color-ink-2); line-height: 1.5; }
.legend__card--make { background: var(--color-accent-soft); }
.legend__card--get { background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); }
.legend__label { position: relative; display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.legend__label::before { content: ""; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--color-rule-2); background: var(--color-paper); }
.legend__card--make .legend__label::before { border-radius: 50%; box-shadow: none; background: var(--color-accent); }
.legend__card--make .legend__label::after { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 9px; border: solid var(--color-accent-ink); border-width: 0 2px 2px 0; transform: translateY(-65%) rotate(45deg); }
.legend__num { font-size: var(--text-3xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.legend__card--make .legend__num { color: var(--color-accent-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.demo { grid-column: 1 / -1; margin: 0; padding: var(--space-lg); border-radius: var(--radius-card); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-lg); align-items: start; }

.app-panel { min-width: 0; display: grid; gap: var(--space-lg); padding: var(--space-lg); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.app-panel__title { font-weight: 700; font-size: var(--text-lg); line-height: 1.4; }
.field { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.field input { width: 100%; min-width: 0; min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); font-weight: 600; outline: 2px solid transparent; outline-offset: -3px; }
.field input:hover { border-color: var(--color-ink-2); }
.field input:focus-visible { outline-color: var(--color-focus); }
.kv { display: grid; margin: 0; font-size: var(--text-md); }
.kv > div { display: flex; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.kv dt { color: var(--color-muted); white-space: nowrap; }
.kv dd { margin: 0; text-align: right; color: var(--color-ink); font-weight: 600; }

.kit { min-width: 0; display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.kit__title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); font-weight: 700; font-size: var(--text-lg); line-height: 1.4; }
.kit__count { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kit__groups, .kit__group ul { list-style: none; margin: 0; padding: 0; display: grid; }
.kit__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); align-items: start; }
.kit__head { margin-bottom: var(--space-2xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.kit__row { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--space-xs); align-items: center; padding-block: var(--space-2xs); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 1.35; }
.kit__row::before { content: ""; width: 16px; height: 16px; border-radius: 4px; background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-rule-2); transition: background-color var(--dur-short) var(--ease-out); }
.kit__row::after { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 9px; border: solid var(--color-accent-ink); border-width: 0 2px 2px 0; opacity: 0; transform: translateY(-65%) rotate(45deg); transition: opacity var(--dur-short) var(--ease-out); }
.kit__row--make::before, .kit__row--get:has(input:checked)::before { background: var(--color-accent); box-shadow: none; }
.kit__row--make::after, .kit__row--get:has(input:checked)::after { opacity: 1; }
.kit__row--make::before { border-radius: 50%; }
.kit__row--get { cursor: pointer; }
.kit__row--get input { position: absolute; left: 0; width: 16px; height: 16px; margin: 0; opacity: 0; }
.kit__row--get:hover::before { box-shadow: inset 0 0 0 1px var(--color-ink-2); }
.kit__row--get:has(input:focus-visible)::before { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.kit__row--get:has(input:checked) .kit__name { color: var(--color-muted); }
.kit__doc { display: flex; flex-wrap: wrap; column-gap: var(--space-xs); min-width: 0; }
.kit__name { font-weight: 600; color: var(--color-ink); }
.kit__fill { color: var(--color-muted); }
.kit__fill b { color: var(--color-ink-2); }
.kit__tag { padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.7; white-space: nowrap; }
.kit__tag--make { background: var(--color-accent-soft); color: var(--color-accent-2); }
.kit__count { display: flex; gap: var(--space-sm); }
.js .kit__row--make { transition: opacity var(--dur-short) var(--ease-out); }
.js .kit__row--make:not(.is-ready) { opacity: 0.45; }
.js .kit__row--make:not(.is-ready)::before { background: var(--color-paper); box-shadow: none; outline: 1px dashed var(--color-rule-2); outline-offset: -1px; }
.js .kit__row--make:not(.is-ready)::after { opacity: 0; }
[data-bind] { color: var(--color-ink); font-weight: 700; transition: background-color var(--dur-long) var(--ease-out); border-radius: 3px; }
[data-bind].is-new { background: var(--color-accent-soft); transition-duration: var(--dur-micro); }

/* ---------- members ---------- */
.members { background: var(--color-paper-2); padding-block: var(--section-gap); }
.members__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.members__head { grid-column: 1 / 6; display: grid; align-self: center; gap: var(--space-lg); position: sticky; top: calc(72px + var(--space-xl)); }
/* 제목은 "조합원 업무의 / 디지털화" 두 줄 고정. 칸이 좁아 줄이 넘칠 때만 글자를 줄인다 */
.members__head { container-type: inline-size; }
.members__head h2 { max-width: none; line-height: 1.22; font-size: min(var(--text-section), 15cqi); }
.members__head h2 span { display: block; white-space: nowrap; }
.members__head .facts { margin-top: var(--space-xs); }
.members__lead { color: var(--color-ink-2); font-size: var(--text-lg); }
.members__lead span { display: block; }
.members__head .facts > div { grid-template-columns: 6rem minmax(0, 1fr); }
.roster { grid-column: 6 / 13; align-self: center; margin: 0; padding: var(--space-xl); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.roster { container: roster / inline-size; }
/* 합계 셋째 칸(출자금 총액)은 숫자가 가장 길어 내용 폭만큼 잡는다 */
.roster__sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; margin-bottom: var(--space-xl); }
.roster__sum > div { display: grid; gap: var(--space-2xs); padding-inline: var(--space-lg); border-left: 1px solid var(--color-rule); }
.roster__sum > :first-child { padding-left: 0; border-left: 0; }
.roster__sum span { font-size: var(--text-sm); color: var(--color-muted); }
.roster__sum b { font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.roster table { width: 100%; border-collapse: collapse; }
.roster th, .roster td { padding: var(--space-sm) var(--space-sm); border-top: 1px solid var(--color-rule); text-align: left; white-space: nowrap; }
.roster thead th { border-top: 0; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.roster tbody th { font-weight: 600; }
.roster th:first-child, .roster td:first-child { padding-left: 0; }
.roster th:last-child, .roster td:last-child { padding-right: 0; }
.r { text-align: right !important; }
.chip { display: inline-block; padding: 0 var(--space-xs); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; line-height: 1.7; }
.chip--ok { background: var(--color-ok-soft); color: var(--color-ok-ink); }
.chip--wait { background: var(--color-wait-soft); color: var(--color-wait-ink); }
.chip--off { background: var(--color-off-soft); color: var(--color-muted); }
/* 명부 승인 시연: 승인 전에는 노란 줄과 승인 버튼, 승인 직후 잠깐 파란 줄 */
.roster th:last-child, .roster td:last-child { width: 9.5rem; }
.roster__state { display: inline-flex; align-items: center; gap: var(--space-xs); }
/* 카드가 좁아지면(중간 화면) 구분 칸을 숨겨 표가 카드 안에 들어가게 한다 */
@container roster (max-width: 33rem) { .roster th:nth-child(2), .roster td:nth-child(2) { display: none; } }
@container roster (max-width: 27rem) { .roster th:nth-child(3), .roster td:nth-child(3) { display: none; } }
@container roster (max-width: 17rem) { .roster th, .roster td { padding-inline: var(--space-xs); } }
.approve { min-height: 28px; padding: 0 var(--space-sm); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.approve:hover { background: var(--color-accent-2); }
.approve.is-press { transform: scale(0.92); }
.roster__new { transition: background-color 600ms var(--ease-out); }
.roster__new.is-wait { background: var(--color-wait-soft); }
.roster__new.is-done { background: var(--color-accent-soft); }
.roster__new.is-done.is-settled { background: transparent; }
[data-sum] { transition: color 600ms var(--ease-out); }
[data-sum].is-up { color: var(--color-accent-2); }


/* ---------- records: 활동 기록 → 자료집·보고서 ---------- */
/* 명부 구역과 같은 회색 바탕이 이어지므로 가는 선으로 나눈다 */
.records { background: var(--color-paper-2); border-top: 1px solid var(--color-rule); padding-block: var(--section-gap-s) var(--section-gap); }
.members { padding-bottom: var(--section-gap-s); }
.records__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.records__head { grid-column: 8 / 13; grid-row: 1; display: grid; gap: var(--space-lg); container-type: inline-size; }
.records__head h2 { max-width: none; line-height: 1.22; font-size: min(var(--text-section), 12.4cqi); }
.records__head h2 span { display: block; white-space: nowrap; }
.records__lead { color: var(--color-ink-2); font-size: var(--text-lg); }
.records__head .facts { margin-top: var(--space-xs); }
.records__head .facts > div { grid-template-columns: 7rem minmax(0, 1fr); }
/* 넓은 화면에서는 시연을 왼쪽, 글을 오른쪽에 둔다(앞 구역들과 좌우를 엇갈리게). 좁은 화면은 HTML 순서대로 글이 먼저 */
.journal { grid-column: 1 / 8; grid-row: 1; margin: 0; display: grid; gap: var(--space-lg); padding: var(--space-xl); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); min-width: 0; }
/* 제목 줄: 왼쪽 사업명·기록 수, 오른쪽 문서 버튼. 좁으면 버튼이 아래로 내려간다 */
.journal__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm) var(--space-lg); }
.journal__title { display: flex; align-items: baseline; gap: var(--space-sm); font-weight: 700; font-size: var(--text-lg); }
.journal__count { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); white-space: nowrap; }
.journal__list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.journal__list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--space-sm); align-items: baseline; padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.journal__list time { color: var(--color-muted); font-variant-numeric: tabular-nums; }
/* 비고는 기록 제목 옆에 한 줄로 */
.journal__what { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-sm); min-width: 0; }
.journal__list b { font-weight: 600; }
.journal__list small { font-size: var(--text-sm); color: var(--color-muted); }
.journal__list span { color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }
.journal__tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.journal__tabs button { min-height: 40px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-2); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.journal__tabs button:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
.journal__tabs button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.journal__tabs button.is-press { transform: scale(0.94); }
.journal__tabs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.journal__out { min-height: 10rem; }
.journal__hint { padding: var(--space-lg); border: 1px dashed var(--color-rule-2); border-radius: var(--radius-input); color: var(--color-muted); font-size: var(--text-sm); }
.paper { display: grid; gap: var(--space-sm); padding: var(--space-lg); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-input); box-shadow: 0 4px 16px oklch(0% 0 0 / 0.05); }
.paper__kicker { font-size: var(--text-xl); font-weight: 700; line-height: 1.35; color: var(--color-accent-2); margin-bottom: var(--space-2xs); }
.paper__table, .paper__form { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.paper__table th, .paper__table td { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-top: 1px solid var(--color-rule); text-align: left; }
.paper__table thead th { border-top: 0; color: var(--color-muted); font-weight: 400; }
.paper__table .r { text-align: right; }
.paper__table th:last-child, .paper__table td:last-child { padding-right: 0; color: var(--color-ink-2); }
.paper__sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); margin: 0; }
.paper__sum div { display: grid; gap: var(--space-3xs); }
.paper__sum dt { font-size: var(--text-xs); color: var(--color-muted); }
.paper__sum dd { margin: 0; font-weight: 600; }
.paper__sum .paper__wide { grid-column: 1 / -1; }
.paper__form th, .paper__form td { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-ink-2); text-align: left; vertical-align: top; }
.paper__form th { width: 6.5rem; background: var(--color-paper-2); font-weight: 600; white-space: nowrap; }
/* 문서가 바뀔 때 줄이 차례로 채워진다 */
.js .paper.is-new tr, .js .paper.is-new .paper__sum > div { animation: fill-in 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 120ms + 80ms); }
@keyframes fill-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- about, blog, newsroom ---------- */
.about { padding-block: var(--section-gap-s) var(--section-gap); }
.about__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.about__read { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) calc(var(--space-2xl) * 2); }
/* 블로그와 뉴스룸 사이 가운데 세로선 */
.about__read { position: relative; }
.about__read::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--color-rule); }
.about__read section { padding: 0; display: grid; align-content: start; gap: var(--space-sm); scroll-margin-top: calc(72px + var(--space-xl)); }
.about__read h2 { font-size: var(--text-2xl); }
.about__read p:not([class]) { font-size: var(--text-md); }

/* ---------- contact ---------- */
.more { justify-self: end; color: var(--color-accent-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.more:hover { color: var(--color-ink); text-decoration-color: currentColor; }
.more:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- boards: gallery ---------- */
.board { padding-block: var(--space-3xl) var(--section-gap); }
.board .container { display: grid; gap: var(--space-lg); }
.board h1 { font-size: var(--text-section); line-height: 1.2; }
.gallery { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.gallery--mini { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.gallery__empty { color: var(--color-muted); }
.card { min-width: 0; }
.card__link { display: grid; text-decoration: none; gap: var(--space-sm); color: var(--color-ink); border-radius: var(--radius-card); }
.card__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.card__image { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.card__image img { width: 100%; height: 100%; object-fit: cover; }
.card__image--none { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-sm); padding: var(--space-lg); background: var(--color-accent-soft); color: var(--color-ink); }
.card__image--news { background: oklch(91% 0.042 250); }
.cover__kind { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-2); }
.cover__title { font-size: var(--text-xl); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gallery--mini .card__image--none { padding: var(--space-md); }
.gallery--mini .cover__title { font-size: var(--text-md); }
.card__title { margin: 0; max-width: none; font-size: var(--text-title); font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.gallery--mini .card__title { font-size: var(--text-md); }
.card__link:hover .card__title { color: var(--color-accent-2); }
.card time { font-size: var(--text-sm); color: var(--color-muted); }
.article__image { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); }
.article__image img { width: 100%; height: 100%; object-fit: cover; }
.article__text { display: grid; gap: var(--space-md); }

.mine { list-style: none; margin: 0; padding: 0; display: grid; }
.mine li { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.mine a { font-weight: 600; color: var(--color-ink); }
.mine a:hover { color: var(--color-accent-2); }
.mine a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mine span { font-size: var(--text-sm); color: var(--color-muted); }
.mine .btn { justify-self: start; margin-top: var(--space-2xs); }

.contact { background: var(--color-paper-2); padding-block: var(--section-gap); }
.contact--page h1 { font-size: var(--text-section); line-height: 1.32; }
.contact--page h1 span { display: block; }
.form__opt { font-style: normal; font-weight: 400; color: var(--color-muted); }
.consent { display: grid; gap: var(--space-xs); }
.consent__note { font-size: var(--text-xs); line-height: 1.6; color: var(--color-muted); }
/* 메인 마지막 구역: 첫 화면과 같은 흐르는 연한 파랑 배경, 가운데 정렬, 문의하기·시작하기 두 버튼 */
.cta { position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-gap); text-align: center; }
.cta__inner { display: grid; justify-items: center; gap: var(--space-xl); }
.cta h2 { max-width: none; line-height: 1.32; }
.cta h2 span { display: block; }
.cta .actions { justify-content: center; }
/* 배경이 구역 위아래 경계에서 잘려 보이지 않게 가장자리를 흐린다 (배경 상자는 구역보다 위아래 20%씩 크다) */
.cta .hero__wash { -webkit-mask-image: linear-gradient(transparent 15%, #000 38%, #000 62%, transparent 85%); mask-image: linear-gradient(transparent 15%, #000 38%, #000 62%, transparent 85%); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.contact__head { grid-column: 1 / 6; display: grid; gap: var(--space-lg); }
.contact__alt { color: var(--color-ink-2); }
.contact__alt a { color: var(--color-accent-2); font-weight: 600; }
.contact__alt a:hover { color: var(--color-ink); }
.contact__alt a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.form { grid-column: 7 / 13; display: grid; gap: var(--space-md); }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.form__field { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.form__field input, .form__field textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); font-weight: 400; outline: 2px solid transparent; outline-offset: -3px; }
.form__field textarea { resize: vertical; }
.form__field input:hover, .form__field textarea:hover { border-color: var(--color-ink-2); }
.form__field input:focus-visible, .form__field textarea:focus-visible { outline-color: var(--color-focus); }
.form [aria-invalid] { border-color: var(--color-error); }
.form input:disabled, .form textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.check { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: var(--space-3xs) 0 0; accent-color: var(--color-accent); flex-shrink: 0; }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.form__foot { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-top: var(--space-xs); }
.form__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
/* 봇만 채우는 칸. 사람에게도 낭독기에도 보이지 않는다 */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 기업소개 페이지 ---------- */
.company { padding-block: var(--space-3xl) var(--section-gap-s); text-align: center; }
.company__intro { display: grid; justify-items: center; gap: var(--space-lg); }
.company__logo { width: min(280px, 60vw); height: auto; margin-bottom: var(--space-sm); }
.company h1 { max-width: none; font-size: var(--text-section); line-height: 1.22; }
.company__lead { max-width: 36em; color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.7; word-break: keep-all; }
.company__part { padding-block: var(--section-gap-s); }
.company__part--tint { background: var(--color-paper-2); }
.company__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.company__grid > h2, .company__part-h { font-size: var(--text-2xl); }
.company__grid > h2 { grid-column: 1 / 4; }
.history { grid-column: 4 / 13; list-style: none; margin: 0; padding: 0; }
.history > li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.history > li:last-child { border-bottom: 1px solid var(--color-rule); }
.history__year { font-size: var(--text-xl); font-weight: 700; color: var(--color-accent-2); font-variant-numeric: tabular-nums; line-height: 1.4; }
.history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); font-size: var(--text-lg); line-height: 1.55; color: var(--color-ink); }
.history__note { color: var(--color-muted); }
.history__tag { display: inline-block; margin-left: var(--space-2xs); padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-2); font-size: var(--text-xs); font-weight: 600; line-height: 1.7; vertical-align: 0.15em; }
.company__mission h2 { font-size: clamp(var(--text-xl), 2.4vw, var(--text-3xl)); word-break: keep-all; }
.partners { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.partners li { display: grid; place-items: center; min-height: 6rem; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink-2); font-weight: 600; text-align: center; word-break: keep-all; }
.partners img { max-width: 100%; max-height: 3rem; width: auto; height: auto; }

/* ---------- 개인정보처리방침 ---------- */
.policy { padding-block: var(--space-3xl) var(--section-gap); }
.policy__inner { max-width: 48rem; display: grid; gap: var(--space-2xl); }
.policy h1 { font-size: var(--text-section); line-height: 1.22; }
.policy__lead { color: var(--color-ink-2); line-height: 1.75; }
.policy section { display: grid; gap: var(--space-sm); line-height: 1.75; color: var(--color-ink-2); }
.policy h2 { max-width: none; font-size: var(--text-xl); line-height: 1.4; color: var(--color-ink); }
.policy ol, .policy ul { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-2xs); }
.policy b { color: var(--color-ink); }
.policy a { color: var(--color-accent-2); font-weight: 600; }
.policy__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.policy__table th, .policy__table td { padding: var(--space-sm); border: 1px solid var(--color-rule); text-align: left; vertical-align: top; }
.policy__table thead th { background: var(--color-paper-2); color: var(--color-ink); }
.policy__table tbody th { width: 7rem; font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.policy__facts > div { grid-template-columns: 10rem minmax(0, 1fr); }
.consent__note a { color: var(--color-accent-2); font-weight: 600; }
.foot__links a.foot__privacy { font-weight: 700; color: var(--color-ink); }

/* ---------- footer ---------- */
.foot { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.foot .wordmark { grid-column: 1 / 3; }
.foot__company { grid-column: 3 / 8; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.foot__links { grid-column: 8 / 13; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs) var(--space-lg); }
.foot__links a { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.foot__company a { color: inherit; }
.foot__company a:hover { color: var(--color-accent-2); }
.foot__links a:hover { color: var(--color-accent-2); text-decoration: underline; }
.foot__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.foot__copy { grid-column: 1 / 13; font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- one reveal ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__wash::before, .js .hero__wash::after { animation: none; }
  .graph__star--twinkle, .graph__node.is-on .graph__dot, .graph__node.is-on .graph__pulse { animation: none; }
  .js .hero__head span { opacity: 1; animation: none; }
  .kit__row, .kit__row::before, .kit__row::after, .js .kit__row--make { transition: none; }
  .btn { transition: background-color var(--dur-short) linear; }
  .btn:active { transform: none; }
  .js .paper.is-new tr, .js .paper.is-new .paper__sum > div { animation: none; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 75rem) {
  .demo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 60rem) {
  .nav__row { display: flex; }
  .nav__links, .nav__actions { display: none; }
  .nav__actions--always { display: flex; margin-left: auto; }
  .menu { display: block; }
  .change__grid, .members__grid, .records__grid, .about__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .change__head { grid-template-columns: minmax(0, 1fr); }
  .change__intro, .change__side { grid-column: 1 / -1; }
  .change__head, .demo, .members__head, .roster, .records__head, .journal, .about__read, .contact__head, .form { grid-column: 1 / -1; }
  .members__head { position: static; }
  .records__head, .journal { grid-row: auto; }
  .roster { overflow-x: auto; }
  .about__grid, .contact__grid { row-gap: var(--space-3xl); }
  .company__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .company__grid > h2, .history { grid-column: 1 / -1; }
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot .wordmark, .foot__company, .foot__links, .foot__copy { grid-column: 1 / -1; }
  .foot__links { justify-content: flex-start; }
  .nav__links a, .menu__panel a:not(.btn) { font-size: var(--text-lg); }
}
@media (max-width: 40rem) {
  .policy__facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .policy__table tbody th { width: auto; white-space: normal; }
  .demo { padding: var(--space-md); }
  .kit__groups { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .kit__head:has(.kit__fold) { margin-bottom: 0; }
  .kit__fold { display: flex; align-items: center; gap: var(--space-xs); width: 100%; min-height: 44px; padding: 0; border: 0; border-top: 1px solid var(--color-rule-2); background: none; color: var(--color-ink-2); font: 600 var(--text-sm)/1.4 var(--font-body); text-align: left; cursor: pointer; }
  .kit__group:first-child .kit__fold { border-top: 0; }
  .kit__fold-num { margin-left: auto; color: var(--color-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
  .kit__fold::after { content: ""; width: 7px; height: 7px; margin: 0 4px 3px var(--space-2xs); border: solid var(--color-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
  .kit__fold[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
  .kit__fold:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
  .kit__group.is-folded ul { display: none; }
  .kit__group ul { padding-bottom: var(--space-sm); }
  .legend { grid-template-columns: minmax(0, 1fr); }
  .legend__card { padding: var(--space-md); }
  .roster { padding: var(--space-lg); }
  .roster th:nth-child(2), .roster td:nth-child(2), .roster th:nth-child(3), .roster td:nth-child(3) { display: none; }
  .roster__sum { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .roster__sum > div { padding: var(--space-sm) 0 0; border-left: 0; border-top: 1px solid var(--color-rule); }
  .roster__sum > :first-child { padding-top: 0; border-top: 0; }
  .roster th:last-child, .roster td:last-child { width: auto; }
  .roster__state { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .hero__head br { display: none; }
  .gallery--mini { grid-template-columns: minmax(0, 1fr); }
  .history > li { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-md); }
  .history ul { font-size: var(--text-md); }
  .about__read { grid-template-columns: minmax(0, 1fr); }
  .journal { padding: var(--space-lg); }
  .journal__list li { grid-template-columns: 3.25rem minmax(0, 1fr) auto; }
  .paper { padding: var(--space-md); }
  .paper__form th { width: 5rem; }
  .paper__kicker { font-size: var(--text-lg); }
  .paper__table th:nth-child(2), .paper__table td:nth-child(2) { display: none; }
  .about__read::before { display: none; }
  .about__read section + section { padding-top: var(--space-2xl); border-top: 1px solid var(--color-rule); }
}

/* ---------- blog post ---------- */
.article { padding-block: var(--space-3xl) var(--section-gap); }
.article__body { max-width: 46rem; display: grid; gap: var(--space-lg); }
.article__back { justify-self: start; color: var(--color-accent-2); font-weight: 600; }
.article__back:hover { color: var(--color-ink); }
.article__back:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.article time { color: var(--color-muted); font-size: var(--text-sm); }
.article h1 { font-size: var(--text-section); line-height: 1.25; overflow-wrap: break-word; min-width: 0; }
.article h2 { font-size: var(--text-title); margin-top: var(--space-lg); }
.article p, .article li { font-size: var(--text-lg); line-height: 1.75; color: var(--color-ink-2); }
.article ol { display: grid; gap: var(--space-xs); padding-left: 1.25em; margin: 0; }
.article .note { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }