/* kr-modal / kr-btn / kr-badge — brand-kit Design System.html (Components 節) を
   本番 static で使うために抜粋・配備したもの。出典: brand-kit/Design System.html:115-228 */

/* ── Button ───────────────────────────────────── */
.kr-btn{
  font-family: var(--kr-font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 10px 18px;
  border-radius: var(--kr-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background var(--kr-dur-fast, 120ms),
              color var(--kr-dur-fast, 120ms),
              border-color var(--kr-dur-fast, 120ms),
              transform var(--kr-dur-fast, 120ms);
  background: var(--kr-accent);
  color: var(--kr-accent-ink);
}
.kr-btn:hover{ background: #0E4F3B; }
.kr-btn:active{ transform: translateY(1px); }
.kr-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 61, 46, .28);
}
.kr-btn[data-variant="secondary"]{
  background: var(--kr-surface);
  color: var(--kr-ink);
  border-color: var(--kr-hair);
}
.kr-btn[data-variant="secondary"]:hover{
  background: var(--kr-accent-sub);
  border-color: rgba(11, 61, 46, .28);
}
.kr-btn[data-variant="ghost"]{
  background: transparent;
  color: var(--kr-ink);
}
.kr-btn[data-variant="ghost"]:hover{ background: var(--kr-accent-sub); }
.kr-btn[data-variant="danger"]{
  background: var(--kr-rec);
  color: #fff;
}
.kr-btn[data-variant="danger"]:hover{ background: #E52E24; }
.kr-btn[data-size="sm"]{
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 6px;
}
.kr-btn[data-size="lg"]{
  padding: 14px 22px;
  font-size: 15px;
}
.kr-btn[disabled],
.kr-btn[aria-disabled="true"]{
  opacity: .45;
  cursor: not-allowed;
}
/* `.kr-btn` / `.kr-quota-summary` / `.kr-badge` は display: inline-flex / flex を持つので
   裸の [hidden] では消せない。modal 系では JS から hidden を立てて
   出し分ける箇所が多いので、UA stylesheet を上書きしておく。 */
.kr-btn[hidden],
.kr-quota-summary[hidden],
.kr-badge[hidden]{ display: none !important; }
.kr-btn .material-symbols-outlined{
  font-size: 18px;
  font-weight: 500;
}

/* ── Badge ───────────────────────────────────── */
.kr-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--kr-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.kr-badge[data-tone="accent"]{
  background: var(--kr-accent-sub);
  color: var(--kr-accent);
}
.kr-badge[data-tone="rec"]{
  background: var(--kr-rec);
  color: #fff;
}
.kr-badge[data-tone="ok"]{
  background: rgba(74, 222, 128, .16);
  color: #15803d;
}
.kr-badge[data-tone="warn"]{
  background: rgba(240, 180, 41, .18);
  color: #8a6200;
}
.kr-badge[data-tone="neutral"]{
  background: var(--kr-surface-2);
  color: var(--kr-ink-dim);
  border: 1px solid var(--kr-hair);
}

/* ── Modal ───────────────────────────────────── */
.kr-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 21, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.kr-modal-overlay[hidden]{ display: none; }

.kr-modal{
  background: var(--kr-surface);
  border: 1px solid var(--kr-hair);
  border-radius: var(--kr-radius-lg);
  box-shadow: var(--kr-shadow-pop);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kr-modal .hd{
  padding: 18px 20px 6px;
}
.kr-modal .hd h2,
.kr-modal .hd h3{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kr-ink);
}
.kr-modal .bd{
  padding: 4px 20px 14px;
  color: var(--kr-ink-dim);
  font-size: 14px;
  line-height: 1.55;
  overflow-y: auto;
}
.kr-modal .bd > p{ margin: 0 0 12px; color: var(--kr-ink); }
.kr-modal .ft{
  padding: 12px 20px 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--kr-hair);
  background: var(--kr-surface-2);
}
/* シェア導線が body にある時など、選択肢が並列で複数あって視認性を取りたい
   場面では JS から `.is-stack` を付けて縦積み + 全幅にする。column-reverse
   で source 末尾 (primary CTA) が上に来る順序を維持する。 */
.kr-modal .ft.is-stack{
  flex-direction: column-reverse;
  align-items: stretch;
}
.kr-modal .ft.is-stack .kr-btn{
  width: 100%;
  justify-content: center;
}

/* ── Quota summary card (上限モーダル用) ─────────── */
.kr-quota-summary{
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--kr-hair);
  border-radius: var(--kr-radius-md);
  background: var(--kr-surface-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kr-quota-summary .row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--kr-ink);
}
.kr-quota-summary .row > span:first-child{
  font-family: var(--kr-font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kr-ink-dim);
}
.kr-quota-summary .row > strong{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.kr-quota-summary .row[data-row="exports"] > span:last-child,
.kr-quota-summary .row[data-row="retention"] > span:last-child,
.kr-quota-summary .row[data-row="reel"] > span:last-child{
  font-weight: 600;
}
.kr-quota-summary .badge-row{
  display: flex;
  justify-content: flex-end;
}

/* ── Inline error inside modal ─────────────────── */
.kr-modal-error{
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--kr-radius-sm);
  background: rgba(255, 59, 48, .08);
  color: #B22219;
  font-size: 13px;
  line-height: 1.5;
}
.kr-modal-error[hidden]{ display: none; }