@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  --isds-navy: #0b172a;
  --isds-navy-2: #10233d;
  --isds-teal: #0e6a6a;
  --isds-teal-dark: #0a4e50;
  --isds-teal-soft: #e7f4f2;
  --isds-bg: #f4f7fa;
  --isds-card: #ffffff;
  --isds-line: #dce5ec;
  --isds-ink: #0b1220;
  --isds-muted: #64748b;
  --isds-radius-lg: 18px;
  --isds-radius-md: 12px;
  --isds-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Pretendard", "Pretendard Variable", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.012em;
}

button,
input,
select,
textarea {
  font: inherit;
}

.stack {
  display: grid;
  gap: 12px;
}

.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn,
button.btn {
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: 10px;
  padding: 9px 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn.primary {
  background: var(--btn-primary-bg, linear-gradient(135deg, var(--isds-teal), var(--isds-teal-dark)));
  color: var(--btn-primary-color, #fff);
}

.btn.ghost {
  background: var(--btn-ghost-bg, var(--isds-teal-soft));
  color: var(--btn-ghost-color, #0b4c4e);
}

.btn.line {
  background: var(--btn-line-bg, #fff);
  color: var(--btn-line-color, #0f172a);
  border: 1px solid var(--btn-line-border, #d9e2ee);
}

.btn.soft {
  background: var(--btn-soft-bg, #e7f5f2);
  color: var(--btn-soft-color, #0f5c5d);
}

.btn.danger {
  background: var(--btn-danger-bg, #fef2f2);
  color: var(--btn-danger-color, #b91c1c);
  border: 1px solid var(--btn-danger-border, #fecaca);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-hover-shadow, 0 10px 22px rgba(14, 106, 106, 0.18));
}

.flash-stack {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.flash {
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
}

.flash.success {
  background: #ecfdf5;
  color: #166534;
}

.flash.error {
  background: #fef2f2;
  color: #b91c1c;
}

.flash.warning {
  background: #fff7ed;
  color: #c2410c;
}

code {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-lockup__logo-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}

.brand-lockup__logo {
  display: block;
  width: 132px;
  height: auto;
}

.brand-lockup__text {
  min-width: 0;
}

.brand-lockup__system {
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.brand-lockup__label {
  margin-top: 3px;
  color: var(--brand-lockup-muted, #94a3b8);
  font-size: 11px;
  font-weight: 700;
}