/* ============================================================
   PUB-APP-150 · 물꼬나눔재단 후원 관리 · SFT 소프트
   ============================================================ */

/* 암묵 그리드 트랙이 max-content 로 부풀어 페이지를 밀어내는 것을 원천 차단 */
* { grid-auto-columns: minmax(0, 1fr); }
/* 그리드/플렉스 자식이 내재 폭을 주장하지 못하게 한다 (중간 래퍼까지 커버) */
:where([style*="grid"], .grid, [class*="__grid"], [class*="__list"], [class*="__inner"],
       [class*="__row"], [class*="__body"], [class*="__head"], [class*="__bar"],
       .app, .app__main, .kpis, .panels, .card, .panel, .chartbox, .form, .split,
       .toolbar, .scroll-x, .side, .foot, .container, main, section, article) > * { min-width: 0; }

:root {
  --brand:       #0d7a7a;
  --brand-ink:   #ffffff;
  --accent:      #e8705f;
  --accent-ink:  #21100c;
  --surface:     #f7fbfb;
  --surface-alt: #eaf3f3;
  --font-display: var(--font-sans);
  --r: var(--r-xl);
}

body { background: var(--surface-alt); }

/* ── 공통 ──────────────────────────────────────────────────── */

.label {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-2);
}
.h2 { font-size: var(--fs-xl); letter-spacing: var(--ls-tight); }
.body-sm { font-size: var(--fs-sm); color: var(--ink-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  border-radius: var(--r-full);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--brand); color: var(--brand-ink); box-shadow: var(--sh-sm); }
.btn--solid:hover { background: color-mix(in oklab, var(--brand) 84%, black); }
.btn--accent { background: var(--accent); color: var(--accent-ink); box-shadow: var(--sh-sm); }
.btn--accent:hover { background: color-mix(in oklab, var(--accent) 86%, black); }
.btn--ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { background: var(--surface-alt); }

/* ── 앱 셸 ─────────────────────────────────────────────────── */

.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100svh; }

.side {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: var(--z-header);
}
.side__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--gutter);
}
.side__logo {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-right: auto; font-size: var(--fs-md); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}
.side__mark {
  width: 30px; height: 30px; flex: none; border-radius: 10px;
  background: linear-gradient(140deg, var(--brand), color-mix(in oklab, var(--brand) 50%, var(--accent)));
}
.side__who {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--ink-2);
}
.side__avatar {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-full);
  background: color-mix(in oklab, var(--brand) 26%, var(--surface));
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #0a5f5f;
}
.side__nav {
  display: flex; order: 3; width: 100%; gap: var(--sp-2);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.side__nav::-webkit-scrollbar { display: none; }
.side__nav a {
  white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.side__nav a:hover { background: var(--surface-alt); color: var(--ink); }
.side__nav a[aria-current="page"] { background: var(--brand); color: var(--brand-ink); font-weight: var(--fw-semibold); }
.side__nav i {
  width: 7px; height: 7px; border-radius: var(--r-full); flex: none;
  background: currentColor; opacity: .5;
}
.side__foot { display: none; }

@media (min-width: 1024px) {
  .app { grid-template-columns: 256px minmax(0, 1fr); }
  .side {
    border-bottom: 0; border-right: 1px solid var(--line);
    height: 100svh; position: sticky; top: 0;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .side__inner { display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5) var(--sp-4); }
  .side__logo { margin-right: 0; }
  .side__nav {
    order: 0; width: auto; flex-direction: column; gap: var(--sp-1);
    overflow: visible; padding: 0 var(--sp-4); border-top: 0;
    align-content: start;
  }
  .side__nav a { justify-content: flex-start; }
  .side__foot {
    display: grid; gap: var(--sp-3);
    padding: var(--sp-5); margin: var(--sp-4);
    background: var(--surface-alt); border-radius: var(--r);
  }
  .side__foot b { font-size: var(--fs-sm); }
  .side__foot p { font-size: var(--fs-xs); color: var(--ink-2); }
}

.app__main { padding: var(--sp-5) var(--gutter) var(--sp-8); display: grid; gap: var(--sp-5); align-content: start; }
@media (min-width: 1024px) { .app__main { padding: var(--sp-7) var(--sp-7) var(--sp-9); gap: var(--sp-6); } }

/* ── 페이지 헤더 ───────────────────────────────────────────── */

.pgtop { display: grid; gap: var(--sp-4); }
.pgtop h1 { font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); }
.pgtop p { font-size: var(--fs-sm); color: var(--ink-2); }
.pgtop__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 768px) { .pgtop { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* ── 카드 ──────────────────────────────────────────────────── */

.card {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--sh-sm); padding: var(--sp-5);
  display: grid; gap: var(--sp-4); align-content: start;
}
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.card__head h2 { font-size: var(--fs-md); letter-spacing: var(--ls-tight); }
.card__head a { font-size: var(--fs-sm); color: var(--brand); font-weight: var(--fw-semibold); }
@media (min-width: 768px) { .card { padding: var(--sp-6); } }

/* ── KPI ───────────────────────────────────────────────────── */

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (min-width: 1024px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--sh-sm); padding: var(--sp-5);
  display: grid; gap: var(--sp-3); align-content: start;
}
.kpi dt { font-size: var(--fs-xs); color: var(--ink-2); }
.kpi dd { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: 1; }
.kpi dd span { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); margin-left: 3px; }
.kpi__delta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 3px var(--sp-3); border-radius: var(--r-full);
  width: fit-content;
}
.kpi__delta--up { background: color-mix(in oklab, var(--brand) 16%, var(--surface)); color: #0a5f5f; }
.kpi__delta--down { background: color-mix(in oklab, var(--accent) 20%, var(--surface)); color: #8c2f21; }
.kpi__note { font-size: var(--fs-xs); color: var(--ink-2); }

/* ── 패널 배치 ─────────────────────────────────────────────── */

.panels { display: grid; gap: var(--sp-5); }
@media (min-width: 1280px) {
  .panels--21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .panels--12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .panels--11 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 차트 ──────────────────────────────────────────────────── */

.chartbox { display: grid; gap: var(--sp-4); }
.chart { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.chart-legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }

/* 막대 그래프 (CSS) */
.bars { display: grid; gap: var(--sp-4); }
.bar { display: grid; gap: var(--sp-2); }
.bar__top { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); }
.bar__top b { font-weight: var(--fw-semibold); }
.bar__top span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar__track { height: 12px; border-radius: var(--r-full); background: var(--surface-alt); overflow: hidden; }
.bar__fill { height: 100%; border-radius: var(--r-full); background: var(--brand); }
.bar__fill--2 { background: color-mix(in oklab, var(--brand) 62%, var(--surface)); }
.bar__fill--3 { background: var(--accent); }
.bar__fill--4 { background: color-mix(in oklab, var(--accent) 55%, var(--surface)); }

/* ── 툴바 (검색 · 필터) ────────────────────────────────────── */

.toolbar { display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.search { position: relative; display: block; }
.search input {
  width: 100%; padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-8);
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); font-size: var(--fs-sm);
}
.search input::placeholder { color: var(--ink-4); }
.search::before {
  content: ""; position: absolute; left: var(--sp-5); top: 50%;
  width: 13px; height: 13px; margin-top: -8px;
  border: 2px solid var(--ink-3); border-radius: var(--r-full);
  pointer-events: none;
}
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips button {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  font-size: var(--fs-sm); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line); background: var(--surface);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chips button:hover { background: var(--surface-alt); color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); box-shadow: none; font-weight: var(--fw-semibold); }

/* ── 테이블 ────────────────────────────────────────────────── */

.scroll-x { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-sm); }
table.data caption { text-align: left; font-size: var(--fs-xs); color: var(--ink-2); padding-bottom: var(--sp-3); }
table.data th, table.data td { padding: var(--sp-4) var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); }
table.data thead th {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-2);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  background: var(--surface-alt); white-space: nowrap;
}
table.data thead th:first-child { border-radius: 12px 0 0 12px; }
table.data thead th:last-child { border-radius: 0 12px 12px 0; }
table.data tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
table.data tbody tr:hover { background: var(--surface-alt); }
table.data tbody tr[aria-selected="true"] { background: color-mix(in oklab, var(--brand) 12%, var(--surface)); }
table.data tbody tr[hidden] { display: none; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sortbtn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.sortbtn::after { content: "↕"; font-size: var(--fs-xs); opacity: .5; }
.sortbtn[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--brand); }
.sortbtn[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--brand); }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 3px var(--sp-3); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
}
.badge--ok { background: color-mix(in oklab, var(--brand) 16%, var(--surface)); color: #0a5f5f; }
.badge--wait { background: color-mix(in oklab, #b4740a 18%, var(--surface)); color: #7a4d05; }
.badge--stop { background: color-mix(in oklab, var(--accent) 20%, var(--surface)); color: #8c2f21; }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); justify-content: space-between; }
.pager__nums { display: flex; gap: var(--sp-2); }
.pager__nums a, .pager__nums span {
  display: grid; place-items: center; min-width: 34px; height: 34px;
  border-radius: var(--r-full); font-size: var(--fs-sm); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pager__nums a:hover { background: var(--surface-alt); color: var(--ink); }
.pager__nums [aria-current="page"] { background: var(--brand); color: var(--brand-ink); box-shadow: none; font-weight: var(--fw-semibold); }

/* ── 상세 패널 ─────────────────────────────────────────────── */

.detail { display: grid; gap: var(--sp-4); align-content: start; }
.detail__top { display: flex; align-items: center; gap: var(--sp-4); }
.detail__avatar {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-full);
  background: color-mix(in oklab, var(--brand) 26%, var(--surface));
  display: grid; place-items: center; font-weight: var(--fw-bold); color: #0a5f5f;
}
.detail__top b { font-size: var(--fs-md); display: block; }
.detail__top span { font-size: var(--fs-xs); color: var(--ink-2); }
.detail dl { display: grid; gap: 0; }
.detail dl > div {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.detail dt { color: var(--ink-2); }
.detail dd { font-weight: var(--fw-semibold); text-align: right; }

.timeline { display: grid; gap: var(--sp-4); }
.timeline li { display: grid; gap: 2px; padding-left: var(--sp-5); position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: var(--r-full); background: var(--brand);
}
.timeline b { font-size: var(--fs-sm); }
.timeline span { font-size: var(--fs-xs); color: var(--ink-2); }

/* ── 이미지 카드 ───────────────────────────────────────────── */

.media-card { padding: 0; overflow: hidden; }
.media-card .img-slot { border-radius: 0; }
.media-card__body { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.media-card__body h2 { font-size: var(--fs-md); }
.media-card__body p { font-size: var(--fs-sm); color: var(--ink-2); }

/* ── 알림 / 안내 ───────────────────────────────────────────── */

.note {
  background: color-mix(in oklab, var(--brand) 10%, var(--surface));
  border-radius: var(--r); padding: var(--sp-5);
  display: grid; gap: var(--sp-2);
}
.note b { font-size: var(--fs-sm); }
.note p { font-size: var(--fs-sm); color: var(--ink-2); }

/* ── 폼 ────────────────────────────────────────────────────── */

.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: var(--sp-2); }
.field label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.field input, .field select, .field textarea {
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); font-size: var(--fs-sm); width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }

/* ── 푸터 ──────────────────────────────────────────────────── */

.foot {
  margin-top: var(--sp-4); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: grid; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--ink-2);
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.foot a:hover { color: var(--brand); }


/* ===== 획일성 제거 — SFT 무드 어휘 =====================================
   160작품이 레퍼런스의 밑줄 draw·카드 리프트·대문자 킥커를 그대로 복사해
   같은 사이트 리스킨으로 보였다. 반응 방식을 무드에 맞게 갈아끼운다.
   ==================================================================== */
/* 세로 카덴스를 작품마다 다르게 — 전부 같은 --section-y 를 쓰는 게 구조적 tell 이었다 */
:root { --section-y: clamp(4.18rem, 2.5999rem + 6.7823vw, 8.36rem); }

/* 소프트 — 알약 배경이 부드럽게 번진다. */
.nav__menu a::after { display: none !important; }
.nav__menu a { border-radius: var(--r-full); transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav__menu a:hover {
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  box-shadow: 0 0 0 9px color-mix(in oklab, var(--brand) 12%, transparent);
}

.card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px color-mix(in oklab, var(--brand) 14%, transparent); }



/* ===== 마무리 — 마크·아이콘·인터랙션 ==============================
   담당 에이전트가 한도 초과로 착수하지 못한 작품. 직접 채웠다.
   ================================================================ */

.ico { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
.side__mark { flex: none; color: var(--brand); transition: transform var(--dur-slow) var(--ease-out); }
.side__logo:hover .side__mark { transform: translateY(-2px); }

/* SFT — 부드럽게 번지는 반응. 공공 성격상 절제한다 */
@keyframes mkFade { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
@keyframes mkPulse { 0%,100% { opacity: .7 } 50% { opacity: 1 } }
@keyframes mkRise { from { transform: scaleY(.6); transform-origin: bottom } to { transform: none } }

.btn__arrow { font-size: 1.25em; transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn:hover { box-shadow: 0 6px 20px color-mix(in oklab, var(--brand) 16%, transparent); }
.btn:active { transform: translateY(1px); }

.img-slot img { transition: transform var(--dur-slow) var(--ease-out); }
figure:hover img, li:hover .img-slot img { transform: scale(1.03); }

summary { transition: color var(--dur) var(--ease); }
summary:hover { color: var(--brand); }
details[open] > *:not(summary) { animation: mkFade var(--dur) var(--ease-out) both; }

input, textarea, select { transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
input:hover, textarea:hover, select:hover { border-color: var(--brand); }
input:focus, textarea:focus { background: color-mix(in oklab, var(--brand) 5%, transparent); }

table tr { transition: background var(--dur) var(--ease); }
table tbody tr:hover { background: color-mix(in oklab, var(--brand) 7%, transparent); }
th { transition: color var(--dur) var(--ease); }
th:hover { color: var(--brand); }

.ico { transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease); }
a:hover > .ico, li:hover > .ico { transform: translateY(-1px); color: var(--brand); }
dl:hover .ico { animation: mkPulse 2.6s var(--ease) infinite; }
svg rect { transition: opacity var(--dur) var(--ease); }
svg:hover rect { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .ico, .btn__arrow, .img-slot img { transition: none !important; animation: none !important; } }

/* 아이콘 배치 정렬 — dt·주소는 글자와 baseline 이 아니라 중앙을 맞춰야 안정적이다 */
dt { display: flex; align-items: center; gap: var(--sp-2); }
dt .ico { color: var(--brand); }
address span { display: flex; align-items: center; gap: var(--sp-3); }
address .ico { color: var(--ink-3); font-size: var(--fs-lg); transition: color var(--dur) var(--ease); }
address span:hover .ico { color: var(--brand); }
address { display: grid; gap: var(--sp-3); }
figure { transition: opacity var(--dur) var(--ease); }
nav a { transition: color var(--dur) var(--ease); }
label { transition: color var(--dur) var(--ease); }
label:hover { color: var(--brand); }

/* webit-touch */
@media (max-width: 767px) {
  .nav__inner { flex-wrap: wrap; overflow: visible; }
  .hero__actions, .hero__acts { flex-wrap: wrap; }
}
html.tier-premium .hero__lead { letter-spacing: -.01em; }