/* Pado 부품 레이어: 조작 요소 · 폼 · 상세 · 잠금 · 대화 */

/* ─────────────── 버튼 ─────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  height: 2.125rem; padding: 0 var(--s4);
  font-size: var(--t-ui); font-weight: 550; letter-spacing: var(--tr-flat);
  color: var(--ink); background: var(--paper-sunk);
  border-radius: var(--r2);
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.btn:hover { background: var(--paper-2); }
.btn:active { transform: scale(0.975); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }
.btn svg { width: 1rem; height: 1rem; }

.btn-sig { background: var(--sig); color: var(--on-sig); }
.btn-sig:hover { background: var(--sig-ink); }

.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--ink-2); }

.btn-line { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); }
.btn-line:hover { background: var(--paper-sunk); box-shadow: inset 0 0 0 1px var(--ink-4); }

.btn-quiet { background: transparent; color: var(--ink-2); padding-inline: var(--s2); }
.btn-quiet:hover { background: var(--paper-sunk); color: var(--ink); }

.btn-lg { height: 2.625rem; padding-inline: var(--s5); font-size: var(--t-body); }
.btn-sm { height: 1.75rem; padding-inline: var(--s3); font-size: var(--t-sm); }
.btn-block { width: 100%; }

/* ─────────────── 배지 · 태그 ─────────────── */
.tag {
  display: inline-flex; align-items: center; height: 1.25rem; padding: 0 0.4rem;
  font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tr-data);
  color: var(--ink-3); background: var(--paper-sunk); border-radius: var(--r1);
  transition: color var(--d1) var(--ease), background var(--d1) var(--ease);
}
a.tag:hover { color: var(--ink); background: var(--paper-2); }

.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  height: 1.25rem; padding: 0 0.4rem; border-radius: var(--r1);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: var(--tr-data);
}
.badge-ver { color: var(--sig-ink); background: var(--sig-wash); }
.badge-new { color: var(--on-sig); background: var(--sig); }
.badge-ok  { color: var(--ok); background: color-mix(in oklch, var(--ok) 14%, transparent); }
.badge-mute { color: var(--ink-3); background: var(--paper-sunk); }

/* ─────────────── 폼 ─────────────── */
.field { display: grid; gap: var(--s2); }
.field > label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: var(--t-xs); color: var(--ink-4); }
.field .err { font-size: var(--t-xs); color: var(--bad); }

.input, .textarea, .select {
  width: 100%; padding: 0.5rem var(--s3);
  font-size: var(--t-ui); color: var(--ink);
  background: var(--paper-edge);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  border: 0; border-radius: var(--r2);
  transition: box-shadow var(--d1) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .textarea:hover, .select:hover { box-shadow: inset 0 0 0 1px var(--ink-4); }
.input:focus, .textarea:focus, .select:focus { box-shadow: inset 0 0 0 2px var(--sig); outline: none; }
.input[aria-invalid='true'] { box-shadow: inset 0 0 0 2px var(--bad); }
.textarea { min-height: 9rem; resize: vertical; line-height: 1.6; font-family: inherit; }
.textarea.code { font-family: var(--font-mono); font-size: var(--t-sm); }
.select { appearance: none; padding-right: var(--s6); background-image: none; }

/* ─────────────── 잠금 (회원 전용) ─────────────── */
.gate {
  border-top: 2px solid var(--ink);
  padding-top: var(--s5);
  margin-top: var(--s5);
}
.gate h3 { font-size: var(--t-h3); letter-spacing: var(--tr-tight); }
.gate p { color: var(--ink-2); font-size: var(--t-sm); margin-top: var(--s2); max-width: 44ch; }
.gate-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.gate-quota {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3);
}

.fade-tail {
  position: relative; max-height: 11rem; overflow: hidden;
}
.fade-tail::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 6rem;
  background: linear-gradient(to bottom, transparent, var(--paper) 88%);
  pointer-events: none;
}

/* ─────────────── 상세 (2단 에디토리얼) ─────────────── */
.detail {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: clamp(var(--s5), 4vw, var(--s7));
  padding-block: var(--s6);
  align-items: start;
}
.detail-rail { position: sticky; top: 4.5rem; display: grid; gap: var(--s4); }
.detail-rail dl { display: grid; gap: var(--s3); }
.detail-rail dt {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4);
}
.detail-rail dd { font-size: var(--t-sm); color: var(--ink-2); margin-top: 2px; }
.detail-title { font-size: var(--t-h1); letter-spacing: var(--tr-display); font-weight: 750; }
.detail-lede { font-size: var(--t-lg); color: var(--ink-2); margin-top: var(--s4); max-width: 60ch; }

@media (max-width: 56rem) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .detail-rail { position: static; border-bottom: 1px solid var(--rule); padding-bottom: var(--s4); }
  .detail-rail dl { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
}

/* ─────────────── 본문 ─────────────── */
.prose { max-width: 68ch; font-size: var(--t-body); line-height: 1.72; color: var(--ink); }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-size: var(--t-h2); margin-top: var(--s6); }
.prose h3 { font-size: var(--t-h3); margin-top: var(--s5); }
.prose h4 { font-size: var(--t-lg); margin-top: var(--s5); }
.prose a { color: var(--sig-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-inline-start: 1.25rem; display: grid; gap: var(--s2); }
.prose li::marker { color: var(--ink-4); }
.prose code {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--paper-sunk); padding: 0.1em 0.32em; border-radius: var(--r1);
}
.prose pre {
  background: var(--paper-sunk); padding: var(--s4); border-radius: var(--r3);
  overflow-x: auto; font-size: var(--t-sm); line-height: 1.6;
}
.prose pre code { background: none; padding: 0; }
.prose blockquote {
  padding-inline-start: var(--s4);
  box-shadow: inset 2px 0 0 var(--rule-2);
  color: var(--ink-2);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s6); }
.prose img { border-radius: var(--r3); margin-block: var(--s5); }

/* ─────────────── 파일 트리 ─────────────── */
.tree { font-family: var(--font-mono); font-size: var(--t-sm); }
.tree-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s3); align-items: center;
  padding: 0.3rem var(--s2); border-radius: var(--r1);
}
.tree-row:hover { background: var(--paper-sunk); }
.tree-row .path { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .size { color: var(--ink-4); font-size: var(--t-micro); }

/* ─────────────── 대화 ─────────────── */
.thread { display: grid; gap: var(--s5); }
.comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); }
.comment.is-reply { margin-inline-start: var(--s6); }
.comment-head { display: flex; align-items: baseline; gap: var(--s2); }
.comment-head .who { font-size: var(--t-sm); font-weight: 600; }
.comment-head .when { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-4); }
.comment-body { font-size: var(--t-ui); color: var(--ink); margin-top: 2px; white-space: pre-wrap; }

/* ─────────────── 요금 비교표 ─────────────── */
.plans { width: 100%; font-size: var(--t-sm); }
.plans th, .plans td { padding: var(--s3) var(--s3); text-align: left; vertical-align: top; }
.plans thead th { border-bottom: 2px solid var(--ink); }
.plans tbody tr + tr td { border-top: 1px solid var(--rule); }
.plans .plan-name { font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--tr-tight); }
.plans .plan-price { font-family: var(--font-mono); font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.02em; }
.plans .plan-price small { font-size: var(--t-xs); color: var(--ink-4); font-weight: 400; }
.plans .is-current { background: var(--sig-wash); }
.plans td.yes { color: var(--ink); }
.plans td.no { color: var(--ink-4); }

/* ─────────────── 상태 · 알림 ─────────────── */
.empty {
  padding-block: var(--s8); text-align: center; color: var(--ink-3);
}
.empty strong { display: block; color: var(--ink); font-size: var(--t-h3); margin-bottom: var(--s2); }

.notice {
  padding: var(--s3) var(--s4); border-radius: var(--r2);
  font-size: var(--t-sm); background: var(--paper-sunk); color: var(--ink-2);
}
.notice-warn { background: color-mix(in oklch, var(--warn) 15%, transparent); color: var(--ink); }
.notice-bad { background: color-mix(in oklch, var(--bad) 13%, transparent); color: var(--ink); }
.notice-sig { background: var(--sig-wash); color: var(--sig-ink); }

.toast {
  position: fixed; inset-block-end: var(--s5); inset-inline-start: 50%;
  z-index: var(--z-toast);
  padding: var(--s3) var(--s4); border-radius: var(--r3);
  background: var(--ink); color: var(--paper); font-size: var(--t-sm);
  box-shadow: var(--pop);
  transform: translate(-50%, 0.5rem); opacity: 0;
  transition: transform var(--d2) var(--ease), opacity var(--d2) var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ─────────────── 쪽 넘김 ─────────────── */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding-block: var(--s6); }
.pager a, .pager span {
  min-width: 2rem; height: 2rem; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--t-sm);
  border-radius: var(--r2); color: var(--ink-2);
}
.pager a:hover { background: var(--paper-sunk); color: var(--ink); }
.pager [aria-current='page'] { background: var(--ink); color: var(--paper); }

/* ─────────────── 로그인 ─────────────── */
.auth-wrap { max-width: 24rem; margin-inline: auto; padding-block: var(--s9); }
.auth-provider {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  width: 100%; height: 2.875rem; border-radius: var(--r3);
  font-size: var(--t-ui); font-weight: 600;
  transition: transform var(--d1) var(--ease), filter var(--d1) var(--ease);
}
.auth-provider:active { transform: scale(0.985); }
.auth-provider:hover { filter: brightness(0.96); }

/* 브랜드 버튼은 테마와 무관하게 제 색을 지킨다 */
.auth-google { background: #ffffff; color: #1f1f1f; box-shadow: inset 0 0 0 1px oklch(82% 0.006 70); }
.auth-kakao { background: #fee500; color: #191600; }
.auth-dev { background: var(--paper-sunk); color: var(--ink-2); }

/* 아직 열리지 않은 수단은 브랜드색을 흐리지 않고 중립으로 내린다 */
.auth-provider[aria-disabled='true'] {
  background: var(--paper-sunk);
  color: var(--ink-4);
  box-shadow: inset 0 0 0 1px var(--rule);
  cursor: not-allowed;
}
.auth-provider[aria-disabled='true']:hover { filter: none; }

/* 본문 표 */
.table-scroll { overflow-x: auto; }
.prose table { width: 100%; font-size: var(--t-sm); border-collapse: collapse; }
.prose th, .prose td { padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.prose thead th { border-bottom: 2px solid var(--ink); font-weight: 600; white-space: nowrap; }
.prose tbody tr + tr td { border-top: 1px solid var(--rule); }
.prose td:first-child { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; }

/* 아카이브 안에서 찾기 */
.archive-search {
  display: flex; gap: var(--s2); align-items: center;
  padding-block: var(--s4) var(--s1);
}
.archive-search .input { flex: 1 1 auto; height: 2.375rem; }
.archive-search .btn { flex: none; height: 2.375rem; }
@media (max-width: 40rem) {
  .archive-search { flex-wrap: wrap; }
  .archive-search .input { flex-basis: 100%; }
}

mark {
  background: var(--sig-wash);
  color: var(--sig-ink);
  padding: 0 0.1em;
  border-radius: 2px;
}

/* ─────────────── 운영 화면 ─────────────── */
.ops-nav {
  display: flex; gap: var(--s4); overflow-x: auto; scrollbar-width: none;
  padding-block: var(--s4) var(--s2); margin-bottom: var(--s4);
  border-bottom: 2px solid var(--ink);
}
.ops-nav a { white-space: nowrap; font-size: var(--t-ui); color: var(--ink-3); padding-bottom: var(--s2); font-weight: 500; }
.ops-nav a[aria-current='page'] { color: var(--ink); font-weight: 650; box-shadow: inset 0 -2px 0 var(--sig); }
.ops-nav a:hover { color: var(--ink); }

.ops-table { width: 100%; font-size: var(--t-sm); }
.ops-table th { text-align: left; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4); font-weight: 500; padding: var(--s2) var(--s2); border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
.ops-table td { padding: var(--s2) var(--s2); border-bottom: 1px solid var(--rule); vertical-align: middle; }
.ops-table tr:hover td { background: var(--paper-sunk); }
.ops-table .cell-main { max-width: 34rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-table .cell-sub { display: block; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-4); margin-top: 1px; }
.ops-table form { display: inline-flex; gap: var(--s1); align-items: center; }
.ops-table .select, .ops-table .input { width: auto; padding: 0.25rem 0.5rem; font-size: var(--t-xs); height: 1.75rem; }
.ops-actions { display: flex; gap: var(--s1); flex-wrap: wrap; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.stat-grid > div { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.stat-grid dt { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); }
.stat-grid dd { font-family: var(--font-mono); font-size: 1.625rem; font-weight: 500; letter-spacing: -0.03em; margin-top: 0.1em; }
.stat-grid dd small { font-size: var(--t-xs); color: var(--ink-4); font-weight: 400; margin-left: 0.25rem; }

.ops-toolbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s4); }
.ops-toolbar .input { max-width: 20rem; }
.danger { color: var(--bad); }

/* ─────────────── 결제 레이어 ─────────────── */
.pay-layer {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--s4);
  background: oklch(15% 0.01 60 / 0.72);
}
.pay-layer[hidden] { display: none; }
.pay-box {
  width: min(100%, 27.5rem); height: min(84vh, 46rem);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border-radius: var(--r4); box-shadow: var(--pop);
}
.pay-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); flex: none;
}
.pay-head b { font-size: var(--t-ui); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-head a { font-size: var(--t-xs); color: var(--ink-3); text-decoration: underline; text-decoration-style: dotted; white-space: nowrap; }
.pay-box iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.pay-foot { padding: var(--s2) var(--s4); font-size: var(--t-xs); color: var(--ink-3); border-top: 1px solid var(--rule); flex: none; min-height: 2.25rem; }

/* ─────────────── 자산 상세: 메타 줄 ─────────────── */
.meta-strip {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5);
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule);
}
.meta-strip dt { font-size: var(--t-micro); color: var(--ink-4); font-family: var(--font-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.meta-strip dd { font-size: var(--t-sm); color: var(--ink); margin-top: 2px; }

/* ─────────────── 파일 탐색기 ─────────────── */
.explorer {
  display: grid; grid-template-columns: 17rem minmax(0, 1fr);
  height: min(72vh, 46rem); min-height: 28rem;
  border: 1px solid var(--rule); border-radius: var(--r4); overflow: hidden;
  background: var(--paper-edge);
}
.explorer-side { display: flex; flex-direction: column; min-height: 0; background: var(--paper-sunk); border-right: 1px solid var(--rule); }
.explorer-root { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); font-size: var(--t-ui); min-height: 3.25rem; }
.explorer-root b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explorer-tree { flex: 1; overflow: auto; padding: var(--s1); }
.tree-list { list-style: none; padding: 0; margin: 0; }
.tree-node {
  display: flex; align-items: center; gap: 0.4rem; width: 100%;
  padding: 0.3rem var(--s2); padding-left: calc(var(--s2) + var(--depth, 0) * 1rem);
  border-radius: var(--r2); font-size: var(--t-sm); color: var(--ink-2); cursor: pointer;
  list-style: none; text-align: left;
}
.tree-node::-webkit-details-marker { display: none; }
.tree-node:hover { background: var(--paper-2); color: var(--ink); }
.tree-node.is-on { background: var(--sig-wash); color: var(--sig-ink); }
.tree-caret { width: 0.75rem; display: inline-flex; color: var(--ink-4); transition: transform var(--d1) var(--ease); }
details:not([open]) > .tree-node .tree-caret { transform: rotate(-90deg); }
.tree-ico { display: inline-flex; color: var(--ink-4); }
.tree-ico-dir { color: var(--sig); }
.tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-size { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-4); flex: none; }

.explorer-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.explorer-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); min-height: 3.25rem; }
.explorer-path { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explorer-body { flex: 1; overflow: auto; }
.explorer-prose { padding: var(--s5) var(--s6); max-width: none; }
.explorer-code { margin: 0; padding: var(--s4) var(--s5); font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.6; white-space: pre; tab-size: 2; color: var(--ink); }

@media (max-width: 52rem) {
  .explorer { grid-template-columns: minmax(0, 1fr); height: auto; }
  .explorer-side { max-height: 16rem; border-right: 0; border-bottom: 1px solid var(--rule); }
  .explorer-body { max-height: 60vh; }
}

/* ─────────────── 릴리스 ─────────────── */
.releases { margin-top: var(--s3); }
.release { padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.release:first-child { border-top: 0; }
.release-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.release-ver { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.02em; }
.release-meta { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-4); margin-left: auto; }
.release-notes { margin-top: var(--s3); padding: var(--s4); background: var(--paper-sunk); border-radius: var(--r3); font-size: var(--t-sm); max-width: none; }