/* GGD Cooperative — 선과 면 */
@font-face {
  font-family: "IBM Plex Sans KR";
  src: url("fonts/IBMPlexSansKR-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans KR";
  src: url("fonts/IBMPlexSansKR-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --ink: #111;
  --paper: #f4f2ee;
  --plane: #5cb96b;   /* 거거덩 컬러(images/ggd_colour.jpg)의 초록 — 강조 면은 이 색 하나만 */
  --stamp: #b8173d;   /* 도장 인주색. 아주 가끔만 */
  --mute: #555;
  --line: 1px solid var(--ink);
  --thick: 6px solid var(--ink);
  /* 종이 결: 코드로 만든 아주 옅은 노이즈 (이미지 파일 없음) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.18  0 0 0 0 0.1  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper) var(--grain) fixed; color: var(--ink); }
body {
  font-family: "IBM Plex Sans KR", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  word-break: keep-all;
  max-width: 1200px;
  margin: 0 auto;
  border-left: var(--line);
  border-right: var(--line);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }

/* ── 상단 바 ── */
html { scroll-padding-top: 48px; }   /* 고정된 상단 바 밑으로 앵커가 숨지 않게 */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper) var(--grain);
  background-attachment: fixed;   /* 바 밑으로 지나가는 종이결과 이어지게 */
  display: flex;
  justify-content: space-between;
  border-bottom: var(--line);
  font-size: 12px;
  letter-spacing: .02em;
}
.top > span, .top > a, .top nav a { padding: 10px 14px; display: block; }
.top nav { display: flex; }
.top nav a { border-left: var(--line); }
.top a:hover { background: var(--ink); color: var(--paper); }
.top a[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* ── 메인 마스트헤드 ── */
.mast {
  display: grid;
  grid-template-columns: 2fr 1fr;
  border-bottom: var(--thick);
}
.mast h1 {
  padding: 28px 14px 14px;
  border-right: var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.mast h1 img {
  width: 100%;
  max-width: 760px;
  mix-blend-mode: multiply;   /* 로고의 흰 바탕을 종이색에 녹임 */
}
.mast h1 span { font-size: 12px; font-weight: 400; letter-spacing: .02em; }
.mast .plane {
  background: var(--plane);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
}
.mast .plane p { font-size: 13px; }
.mast .plane strong {
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ── 하위 페이지 머리 ── */
.pagehead {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: var(--thick);
}
.pagehead .crumb {
  padding: 14px;
  border-right: var(--line);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.pagehead .crumb a { text-decoration: underline; text-underline-offset: 3px; }
.pagehead h1 {
  font-size: clamp(40px, 8vw, 96px);
  line-height: .95;
  letter-spacing: -.04em;
  font-weight: 700;
  padding: 14px 14px 18px;
}
.pagehead h1 small {
  display: block;
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 400;
  margin-bottom: 10px;
}
.pagehead.plane h1 { background: var(--plane); }

/* ── 인트로 줄 ── */
.intro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: var(--line);
}
.intro > * { padding: 14px; }
.intro > * + * { border-left: var(--line); }
.intro b { display: block; font-size: 12px; font-weight: 400; margin-bottom: 4px; }

/* ── 섹션 공통: 왼쪽 라벨 / 오른쪽 내용 ── */
section {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: var(--line);
}
section > header {
  padding: 14px;
  border-right: var(--line);
}
section > header .no { font-size: 12px; display: block; margin-bottom: 6px; }
section > header h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
section > header p { font-size: 12px; margin-top: 8px; color: var(--mute); }
section > .body { min-width: 0; }

/* 행 리스트 */
.rows li + li { border-top: var(--line); }
.rows a, .rows .row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  align-items: baseline;
}
.rows a:hover { background: var(--ink); color: var(--paper); }
.rows.toc a { grid-template-columns: 84px 1fr auto; }
.rows .n, .rows .meta { font-size: 12px; font-variant-numeric: tabular-nums; }
.rows .off { color: #999; }

/* 2열 칸 */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.grid2 > * {
  padding: 14px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: var(--line);
}
.grid2 > :nth-child(odd) { border-right: var(--line); }
.grid2 > :last-child { border-bottom: 0; }
.grid2 > .wide { grid-column: 1 / -1; border-right: 0; }
.grid2 a:hover { background: var(--plane); }
.grid2 .n { font-size: 12px; }
.grid2 .t { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

/* 검은 면 섹션 */
.dark { background: var(--ink); color: var(--paper); }
.dark > header { border-right-color: var(--paper); }
.dark > header p { color: #aaa; }
.dark .rows li + li { border-top-color: #444; }
.dark .rows a:hover { background: var(--plane); color: var(--ink); }

/* 본문 글 */
.prose { padding: 14px; max-width: 42em; }
.prose p + p { margin-top: .8em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { background: var(--plane); }

/* 정관 조문 */
.articles > article { border-bottom: var(--line); }
.articles > article:last-child { border-bottom: 0; }
.articles h3 {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 700;
  align-items: baseline;
}
.articles h3 .n { font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.articles .text { padding: 0 14px 14px 122px; max-width: calc(42em + 122px); }
.articles .text p + p, .articles .text ol { margin-top: .5em; }
.articles .text ol { list-style: decimal; padding-left: 1.4em; }
.articles .text .item { padding-left: 1.2em; text-indent: -1.2em; margin-top: .2em; }
.articles :target h3, .articles article:target h3 { background: var(--plane); }

/* 이전/다음 */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--line);
}
.pager a, .pager span { padding: 14px; display: block; min-height: 72px; }
.pager a + a, .pager span + a, .pager a + span { border-left: var(--line); }
.pager .next { text-align: right; }
.pager small { display: block; font-size: 12px; margin-bottom: 4px; }
.pager b { font-size: 17px; letter-spacing: -.01em; }
.pager a:hover { background: var(--ink); color: var(--paper); }

/* 이름 격자 */
.names {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.names li {
  padding: 12px 14px;
  border-right: var(--line);
  border-bottom: var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.names li:nth-child(4n) { border-right: 0; }
.names .n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--mute); }
.names li:hover { background: var(--plane); }

/* 이미지 격자 */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.gallery figure {
  border-right: var(--line);
  border-bottom: var(--line);
  display: flex;
  flex-direction: column;
}
.gallery figure:nth-child(3n) { border-right: 0; }
.gallery a { display: block; flex: 1; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #e4e1db;
}
.gallery a:hover img { outline: 6px solid var(--plane); outline-offset: -6px; }
.gallery figcaption {
  font-size: 12px;
  padding: 8px 14px;
  border-top: var(--line);
  font-variant-numeric: tabular-nums;
}
.gallery.contain img { object-fit: contain; aspect-ratio: auto; background: none; }

/* 역할표 */
.roles li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--line);
}
.roles li:last-child { border-bottom: 0; }
.roles span { padding: 14px; }
.roles span + span { border-left: var(--line); font-size: clamp(20px, 3vw, 28px); font-weight: 700; letter-spacing: -.02em; }
.roles .role { font-size: 13px; }

/* ── 푸터: 등록번호 한 줄 + 도장 ── */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  font-size: 12px;
}
footer .f-reg { display: flex; flex-wrap: wrap; gap: 2px 18px; color: var(--mute); }
footer .stamp { display: block; width: 56px; flex: none; }
footer .stamp img { mix-blend-mode: multiply; transform: rotate(-4deg); }

/* ── 모바일 ── */
@media (max-width: 720px) {
  .mast, .pagehead { grid-template-columns: 1fr; }
  .mast h1 { border-right: 0; border-bottom: var(--line); }
  .mast .plane { min-height: 160px; }
  .pagehead .crumb { border-right: 0; border-bottom: var(--line); flex-direction: row; }
  .intro { grid-template-columns: 1fr; }
  .intro > * + * { border-left: 0; border-top: var(--line); }
  section { grid-template-columns: 1fr; }
  section > header { border-right: 0; border-bottom: var(--line); }
  .dark > header { border-bottom-color: var(--paper); }
  .top .hide-m { display: none; }
  .names { grid-template-columns: repeat(2, 1fr); }
  .names li:nth-child(4n) { border-right: var(--line); }
  .names li:nth-child(2n) { border-right: 0; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery figure:nth-child(3n) { border-right: var(--line); }
  .gallery figure:nth-child(2n) { border-right: 0; }
  .articles h3 { grid-template-columns: 1fr; gap: 2px; }
  .articles .text { padding-left: 14px; }
  .grid2 { grid-template-columns: 1fr; }
  .grid2 > :nth-child(odd) { border-right: 0; }
}

/* ── 소식 글 ── */
.hero { border-bottom: var(--line); }
.hero img { width: 100%; max-height: 70vh; object-fit: cover; }
.post { font-size: 16px; line-height: 1.75; }
.post h2, .post h3 { font-size: 20px; letter-spacing: -.02em; margin: 1.4em 0 .4em; }
.post img { margin: 1em 0; border: var(--line); }
.post ul, .post ol { padding-left: 1.4em; margin: .6em 0; }
.post ul { list-style: square; }
.post ol { list-style: decimal; }
.post blockquote { border-left: var(--thick); padding-left: 14px; margin: 1em 0; }
.gallery.one { grid-template-columns: 1fr; }
.gallery.one figure { border-right: 0; border-bottom: 0; }

/* 드래그 선택 색 */
::selection { background: var(--plane); color: var(--ink); }

/* 상단 바 왼쪽: 작은 로고 */
.top a.home { display: flex; align-items: center; gap: 10px; }
.top a.home img { height: 20px; width: auto; mix-blend-mode: multiply; }
.top a.home:hover img { filter: invert(1); mix-blend-mode: screen; }
@media (max-width: 720px) { .top a.home img + span { display: none; } }

/* ── 첫 화면: 로고 표지 + 큰 메뉴 ── */
.cover {
  display: grid;
  grid-template-columns: 2fr 1fr;
  min-height: calc(100vh - 38px - 66px - 5 * 62px);
  border-bottom: var(--thick);
}
.cover h1 {
  margin: 0;
  padding: 28px 14px 14px;
  border-right: var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.cover h1 img { width: 100%; max-width: 760px; mix-blend-mode: multiply; }
.cover h1 span { font-size: 12px; font-weight: 400; letter-spacing: .02em; }
.cover .plane {
  background: var(--plane);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 14px;
}
.cover .plane p { font-size: 13px; }
.cover .plane strong { font-size: clamp(20px, 3vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.menu a, .menu .off {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-top: var(--line);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.menu a span, .menu .off span { font-size: 12px; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.menu a:hover { background: var(--plane); }
.menu + footer { border-top: var(--line); }
.menu + .coop-menu { border-top: var(--thick); }
@media (max-width: 720px) {
  .cover { grid-template-columns: 1fr; min-height: 0; }
  .cover h1 { border-right: 0; border-bottom: var(--line); }
  .cover .plane { min-height: 150px; }
}

/* 연락 페이지 큰 글씨 */
.big-line { font-size: clamp(22px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.big-line a { text-decoration: none; }
.big-line a:hover { background: var(--plane); }

/* ── 사진 크게 보기 ── */
.viewer {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  background: var(--ink); color: var(--paper);
  display: none; flex-direction: column;
}
.viewer[open] { display: flex; }
.viewer::backdrop { background: var(--ink); }
.viewer-bar, .viewer-nav { display: flex; border-color: #444; font-size: 13px; }
.viewer-bar { border-bottom: 1px solid #444; }
.viewer-nav { border-top: 1px solid #444; }
.viewer-bar > *, .viewer-nav > * { padding: 12px 14px; }
.viewer-count { font-variant-numeric: tabular-nums; border-right: 1px solid #444; }
.viewer-cap { flex: 1; color: #aaa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer button {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.viewer-close { border-left: 1px solid #444 !important; }
.viewer-nav button { flex: 1; text-align: left; }
.viewer-nav .viewer-next { text-align: right; border-left: 1px solid #444; }
.viewer button:hover, .viewer button:focus-visible { background: var(--plane); color: var(--ink); outline: none; }
.viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer.single .viewer-nav { display: none; }

/* ── 푸터는 항상 페이지 맨 끝: 내용이 짧으면 빈 공간 아래 화면 바닥에, 길면 내용 뒤에 ── */
body { display: flex; flex-direction: column; }   /* body에는 이미 min-height: 100vh */
body > footer { margin-top: auto; border-top: var(--line); }

/* 조문 안의 더 깊은 항목 (가. 나. / •) */
.articles .text .item2 { padding-left: 2.4em; text-indent: -1.2em; margin-top: .2em; }
.articles .text.plain .item { padding-left: 0; text-indent: 0; font-weight: 700; margin-top: .8em; }
.articles .text.plain { padding-left: 14px; padding-top: 14px; }

/* 메뉴의 준비 중 줄 */
.menu .off { color: #b4b0a8; }
.menu .off span { color: var(--mute); }

/* ── 404 ── */
.nothing {
  background: var(--plane);
  border-bottom: var(--thick);
  padding: 28px 14px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nothing .code { font-size: clamp(88px, 20vw, 220px); font-weight: 700; line-height: .85; letter-spacing: -.05em; }
.nothing h1 { font-size: clamp(28px, 4vw, 48px); line-height: 1.15; letter-spacing: -.03em; }
.nothing p:last-child { font-size: 13px; }

/* 거라지 */
.roles span.small { font-size: clamp(16px, 2vw, 20px); }
.sub-block { border-top: var(--line); max-width: none; }
.sub-block .label { font-size: 12px; color: var(--mute); }
.roles + .sub-block, .prose + .roles { border-top: var(--line); }
.sub-rows { border-top: var(--line); }

/* ── 거거덩네컷 ── */
.booth-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 68vh;
  background: var(--ink);
  overflow: hidden;
}
/* 영상은 칸 안에 꽉 채워 깔기만: 영상 원래 크기가 칸 폭을 밀어내지 않게 */
.booth-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.booth-stage.done { aspect-ratio: auto; max-height: none; display: flex; justify-content: center; padding: 14px; }
.booth-stage.done video { display: none; }
.booth-result { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; }
.booth-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--paper); font-size: 13px; padding: 14px; text-align: center; }
.booth-count { position: absolute; top: 14px; left: 14px; background: var(--plane); color: var(--ink); font-weight: 700; font-size: 22px; padding: 4px 10px; }
.booth-count:empty { display: none; }
.booth-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .15s; }
.booth-flash.on { opacity: .9; transition: none; }
.booth-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--line); }
.booth-thumbs:empty, .booth-thumbs[hidden] { display: none; }
.booth-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-right: var(--line); }
.booth-thumbs img:last-child { border-right: 0; }
.booth-frames, .booth-actions { display: flex; flex-wrap: wrap; border-top: var(--line); }
.booth-frames span { padding: 12px 14px; font-size: 12px; color: var(--mute); }
.booth button { font: inherit; color: var(--ink); background: none; border: 0; border-left: var(--line); padding: 12px 16px; cursor: pointer; }
.booth-actions button:first-child { border-left: 0; }
.booth-actions button { font-size: 18px; font-weight: 700; flex: 1; text-align: left; }
.booth button:hover, .booth button[aria-pressed="true"] { background: var(--plane); }
.booth button[hidden] { display: none; }
.booth-msg[hidden] { display: none; }

/* 거거덩네컷: 카메라 켜기(픽토그램)와 셔터(빨간 원) */
.booth .booth-stage button { border: 0; }
.booth .b-start {
  position: absolute; inset: 0; margin: auto; width: 180px; height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--paper); background: none; font-size: 18px; font-weight: 700;
}
.booth .b-start:hover { background: none; color: var(--plane); }
.booth .b-shoot {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; color: var(--paper); font-size: 13px; font-weight: 700; padding: 0;
}
.booth .b-shoot i {
  width: 72px; height: 72px; border-radius: 50%;
  border: 5px solid var(--paper); box-shadow: inset 0 0 0 4px var(--ink);
  background: var(--stamp);
}
.booth .b-shoot:hover { background: none; }
.booth .b-shoot:hover i { transform: scale(1.06); }
.booth .b-shoot span { text-shadow: 0 1px 2px var(--ink); }

/* ── 첫 페이지 (스케치 버전): 로고 → 메뉴 → 캘린더 → 슬로건 → 조합원/주사무소/문의 ── */
.cal { display: block; border-bottom: var(--line); }
.cal-head { display: grid; grid-template-columns: 56px 1fr 56px; border-bottom: var(--line); align-items: stretch; }
.cal-head h2 { padding: 10px 14px; font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -.03em; text-align: center; font-variant-numeric: tabular-nums; }
.cal-head button { font: inherit; font-size: 22px; background: none; border: 0; cursor: pointer; color: var(--ink); }
.cal-head .cal-prev { border-right: var(--line); }
.cal-head .cal-next { border-left: var(--line); }
.cal-head button:hover { background: var(--ink); color: var(--paper); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-grid > div { border-right: var(--line); border-bottom: var(--line); min-height: 84px; padding: 6px 8px; font-size: 13px; font-variant-numeric: tabular-nums; overflow: hidden; }
.cal-grid > div:nth-child(7n) { border-right: 0; }
.cal-grid .dow { min-height: 0; font-size: 12px; color: var(--mute); }
.cal-grid .day.has { background: var(--plane); }
.cal-grid .day.today span { background: var(--ink); color: var(--paper); padding: 0 5px; }
.cal-grid .day em { display: block; font-style: normal; font-weight: 700; font-size: 12px; line-height: 1.25; margin-top: 4px; }
.cal-list { border-top: 0; }

.intro .ask a { font-size: clamp(18px, 2.4vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.intro .ask a:hover { background: var(--plane); }

@media (max-width: 720px) {
  .cal-grid > div { min-height: 52px; padding: 4px; }
  .cal-grid .day em { font-size: 0; width: 6px; height: 6px; background: var(--ink); border-radius: 50%; }

}

.menu + .cal, .cal + .coop-menu { border-top: var(--thick); }