:root {
  --white-100: #ffffff;
  --white-90: rgba(255, 255, 255, 0.9);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-5: rgba(255, 255, 255, 0.05);
  --black-100: #000000;
  --black-90: rgba(0, 0, 0, 0.9);
  --black-80: rgba(0, 0, 0, 0.8);
  --black-70: rgba(0, 0, 0, 0.7);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-5: rgba(0, 0, 0, 0.05);
  --transparent: rgba(255, 255, 255, 0);
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a1a1a1;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;
  --slate-50: #f8fafc;
  --slate-70: #f5f7fa;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cad5e2;
  --slate-400: #90a1b9;
  --slate-500: #62748e;
  --slate-600: #45556c;
  --slate-700: #314158;
  --slate-800: #1d293d;
  --slate-900: #0f172b;
  --slate-950: #020618;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5dc;
  --gray-400: #99a1af;
  --gray-500: #6a7282;
  --gray-600: #4a5565;
  --gray-700: #364153;
  --gray-800: #1e2939;
  --gray-900: #101828;
  --gray-950: #030712;
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #9f9fa9;
  --zinc-500: #71717b;
  --zinc-600: #52525c;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;
  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a6a09b;
  --stone-500: #79716b;
  --stone-600: #57534d;
  --stone-700: #44403b;
  --stone-800: #292524;
  --stone-900: #1c1917;
  --stone-950: #0c0a09;
  --red-50: #fef2f2;
  --red-100: #ffe2e2;
  --red-200: #ffc9c9;
  --red-300: #ffa2a2;
  --red-400: #ff6467;
  --red-500: #fb2c36;
  --red-600: #e7000b;
  --red-700: #c10007;
  --red-800: #9f0712;
  --red-900: #82181a;
  --red-950: #460809;
  --orange-50: #fff7ed;
  --orange-100: #ffedd4;
  --orange-200: #ffd6a8;
  --orange-300: #ffb86a;
  --orange-400: #ff8904;
  --orange-500: #ff6900;
  --orange-600: #f54a00;
  --orange-700: #ca3500;
  --orange-800: #9f2d00;
  --orange-900: #7e2a0c;
  --orange-950: #441306;
  --amber-50: #fffbeb;
  --amber-100: #fef3c6;
  --amber-200: #fee685;
  --amber-300: #ffd230;
  --amber-400: #ffba00;
  --amber-500: #fd9a00;
  --amber-600: #e17100;
  --amber-700: #bb4d00;
  --amber-800: #973c00;
  --amber-900: #7b3306;
  --amber-950: #461901;
  --yellow-50: #fefce8;
  --yellow-100: #fef9c2;
  --yellow-200: #fff085;
  --yellow-300: #ffdf20;
  --yellow-400: #fcc800;
  --yellow-500: #efb100;
  --yellow-600: #d08700;
  --yellow-700: #a65f00;
  --yellow-800: #894b00;
  --yellow-900: #733e0a;
  --yellow-950: #432004;
  --lime-50: #f7fee7;
  --lime-100: #ecfcca;
  --lime-200: #d8f999;
  --lime-300: #bbf451;
  --lime-400: #9ae600;
  --lime-500: #7ccf00;
  --lime-600: #5ea500;
  --lime-700: #497d00;
  --lime-800: #3d6300;
  --lime-900: #35530e;
  --lime-950: #192e03;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #b9f8cf;
  --green-300: #7bf1a8;
  --green-400: #05df72;
  --green-500: #00c951;
  --green-600: #00a63e;
  --green-700: #008236;
  --green-800: #016630;
  --green-900: #0d542b;
  --green-950: #052e16;
  --emerald-50: #ecfdf5;
  --emerald-100: #d0fae5;
  --emerald-200: #a4f4cf;
  --emerald-300: #5ee9b5;
  --emerald-400: #00d492;
  --emerald-500: #00bc7d;
  --emerald-600: #009966;
  --emerald-700: #007a55;
  --emerald-800: #006045;
  --emerald-900: #004f3b;
  --emerald-950: #002c22;
  --teal-50: #f0fdfa;
  --teal-100: #cbfbf1;
  --teal-200: #96f7e4;
  --teal-300: #46ecd5;
  --teal-400: #00d5be;
  --teal-500: #00bba7;
  --teal-600: #009689;
  --teal-700: #00786f;
  --teal-800: #005f5a;
  --teal-900: #0b4f4a;
  --teal-950: #022f2e;
  --cyan-50: #ecfeff;
  --cyan-100: #cefafe;
  --cyan-200: #a2f4fd;
  --cyan-300: #53eafd;
  --cyan-400: #00d3f2;
  --cyan-500: #00b8db;
  --cyan-600: #0092b8;
  --cyan-700: #007595;
  --cyan-800: #005f78;
  --cyan-900: #104e64;
  --cyan-950: #053345;
  --sky-50: #f0f9ff;
  --sky-100: #dff2fe;
  --sky-200: #b8e6fe;
  --sky-300: #74d4ff;
  --sky-400: #00bcff;
  --sky-500: #00a6f4;
  --sky-600: #0084d1;
  --sky-700: #0069a8;
  --sky-800: #00598a;
  --sky-900: #024a70;
  --sky-950: #052f4a;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bedbff;
  --blue-300: #8ec5ff;
  --blue-400: #51a2ff;
  --blue-500: #2b7fff;
  --blue-600: #155dfc;
  --blue-700: #1447e6;
  --blue-800: #193cb8;
  --blue-900: #1c398e;
  --blue-950: #162456;
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c6d2ff;
  --indigo-300: #a3b3ff;
  --indigo-400: #7c86ff;
  --indigo-500: #615fff;
  --indigo-600: #4f39f6;
  --indigo-700: #432dd7;
  --indigo-800: #372aac;
  --indigo-900: #312c85;
  --indigo-950: #1e1a4d;
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6ff;
  --violet-300: #c4b4ff;
  --violet-400: #a684ff;
  --violet-500: #8e51ff;
  --violet-600: #7f22fe;
  --violet-700: #7008e7;
  --violet-800: #5d0ec0;
  --violet-900: #4d179a;
  --violet-950: #2f0d68;
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d4ff;
  --purple-300: #dab2ff;
  --purple-400: #c27aff;
  --purple-500: #ad46ff;
  --purple-600: #9810fa;
  --purple-700: #8200db;
  --purple-800: #6e11b0;
  --purple-900: #59168b;
  --purple-950: #3c0366;
  --fuchsia-50: #fdf4ff;
  --fuchsia-100: #fae8ff;
  --fuchsia-200: #f6cfff;
  --fuchsia-300: #f4a8ff;
  --fuchsia-400: #ed6bff;
  --fuchsia-500: #e12afb;
  --fuchsia-600: #c800de;
  --fuchsia-700: #a800b7;
  --fuchsia-800: #8a0194;
  --fuchsia-900: #721378;
  --fuchsia-950: #4b004f;
  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fccee8;
  --pink-300: #fda5d5;
  --pink-400: #fb64b6;
  --pink-500: #f6339a;
  --pink-600: #e60076;
  --pink-700: #c6005c;
  --pink-800: #a3004c;
  --pink-900: #861043;
  --pink-950: #510424;
  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --rose-200: #ffccd3;
  --rose-300: #ffa1ad;
  --rose-400: #ff637e;
  --rose-500: #ff2056;
  --rose-600: #ec003f;
  --rose-700: #c70036;
  --rose-800: #a50036;
  --rose-900: #8b0836;
  --rose-950: #4d0218;
  --bg: #f5f1e8;
  --bg-strong: #e6dcc9;
  --panel: rgba(255, 252, 245, 0.86);
  --panel-border: rgba(70, 53, 31, 0.1);
  --text: #1f1b17;
  --muted: #706457;
  --accent: #b24a2c;
  --accent-strong: #8e351c;
  --accent-soft: #f2c9b9;
  --positive: #12715c;
  --negative: #a63827;
  --shadow: 0 24px 80px rgba(49, 33, 14, 0.12);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --ds-background-dimmed-fixed: var(--black-70);
  --ds-background-elevation: var(--white-100);
  --ds-background-primary: var(--white-100);
  --ds-background-secondary: var(--slate-200);
  --ds-button-primary: var(--blue-500);
  --ds-button-primary-dark: var(--blue-600);
  --ds-button-secondary: var(--slate-100);
  --ds-button-secondary-dark: var(--slate-200);
  --ds-button-warning: var(--red-500);
  --ds-button-warning-dark: var(--red-600);
  --ds-stroke-disabled: var(--black-5);
  --ds-stroke-on-primary: var(--white-30);
  --ds-stroke-on-quaternary: var(--white-5);
  --ds-stroke-on-secondary: var(--white-15);
  --ds-stroke-on-tertiary: var(--white-10);
  --ds-stroke-point: var(--blue-500);
  --ds-stroke-primary: var(--black-50);
  --ds-stroke-quaternary: var(--black-5);
  --ds-stroke-secondary: var(--black-40);
  --ds-stroke-success: var(--green-500);
  --ds-stroke-tertiary: var(--black-10);
  --ds-stroke-warning: var(--red-500);
  --ds-surface-bubble: rgba(54, 65, 83, 0.8);
  --ds-surface-business-soft: var(--yellow-50);
  --ds-surface-dark: var(--slate-800);
  --ds-surface-dark-fixed: var(--black-80);
  --ds-surface-deep: var(--black-20);
  --ds-surface-disabled: var(--black-5);
  --ds-surface-light: var(--slate-200);
  --ds-surface-light-soft: var(--slate-70);
  --ds-surface-primary: var(--blue-400);
  --ds-surface-primary-soft: var(--blue-100);
  --ds-surface-success: var(--green-600);
  --ds-surface-success-soft: var(--green-50);
  --ds-surface-warning: var(--red-400);
  --ds-surface-warning-soft: var(--red-50);
  --ds-surface-white: var(--white-100);
  --ds-text-disabled: var(--black-20);
  --ds-text-on-fixed: var(--white-100);
  --ds-text-on-primary: var(--white-90);
  --ds-text-on-secondary: var(--white-70);
  --ds-text-on-tertiary: var(--white-50);
  --ds-text-point: var(--blue-600);
  --ds-text-point-soft: var(--blue-400);
  --ds-text-primary: var(--black-90);
  --ds-text-quaternary: var(--black-40);
  --ds-text-secondary: var(--black-80);
  --ds-text-success: var(--green-600);
  --ds-text-tertiary: var(--black-60);
  --ds-text-warning: var(--red-600);
  --ds-text-warning-soft: var(--red-400);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ds-background-dimmed-fixed: var(--black-70);
    --ds-background-elevation: var(--neutral-800);
    --ds-background-primary: var(--neutral-900);
    --ds-background-secondary: var(--neutral-800);
    --ds-button-primary: var(--blue-500);
    --ds-button-primary-dark: var(--blue-600);
    --ds-button-secondary: var(--slate-700);
    --ds-button-secondary-dark: var(--slate-800);
    --ds-button-warning: var(--red-500);
    --ds-button-warning-dark: var(--red-600);
    --ds-stroke-disabled: var(--white-5);
    --ds-stroke-on-primary: var(--black-40);
    --ds-stroke-on-quaternary: var(--black-5);
    --ds-stroke-on-secondary: var(--white-20);
    --ds-stroke-on-tertiary: var(--black-15);
    --ds-stroke-point: var(--blue-400);
    --ds-stroke-primary: var(--white-40);
    --ds-stroke-quaternary: var(--white-5);
    --ds-stroke-secondary: var(--white-30);
    --ds-stroke-success: var(--green-800);
    --ds-stroke-tertiary: var(--white-10);
    --ds-stroke-warning: var(--red-800);
    --ds-surface-bubble: rgba(144, 161, 185, 0.8);
    --ds-surface-business-soft: rgba(67, 32, 4, 0.6);
    --ds-surface-dark: var(--slate-300);
    --ds-surface-dark-fixed: var(--black-80);
    --ds-surface-deep: var(--black-20);
    --ds-surface-disabled: var(--white-10);
    --ds-surface-light: var(--gray-700);
    --ds-surface-light-soft: var(--white-5);
    --ds-surface-primary: var(--blue-500);
    --ds-surface-primary-soft: var(--blue-900);
    --ds-surface-success: var(--green-500);
    --ds-surface-success-soft: var(--green-700);
    --ds-surface-warning: var(--red-500);
    --ds-surface-warning-soft: rgba(70, 8, 9, 0.6);
    --ds-surface-white: var(--white-10);
    --ds-text-disabled: var(--white-20);
    --ds-text-on-fixed: var(--white-100);
    --ds-text-on-primary: var(--black-80);
    --ds-text-on-secondary: var(--black-70);
    --ds-text-on-tertiary: var(--black-60);
    --ds-text-point: var(--blue-400);
    --ds-text-point-soft: var(--blue-800);
    --ds-text-primary: var(--white-80);
    --ds-text-quaternary: var(--white-30);
    --ds-text-secondary: var(--white-60);
    --ds-text-success: var(--green-700);
    --ds-text-tertiary: var(--white-40);
    --ds-text-warning: var(--red-500);
    --ds-text-warning-soft: var(--red-600);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Pretendard Variable", "SUIT Variable", "Apple SD Gothic Neo", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(240, 175, 88, 0.26), transparent 32%),
    radial-gradient(circle at right, rgba(178, 74, 44, 0.16), transparent 28%),
    linear-gradient(180deg, #f9f4ec 0%, var(--bg) 100%);
  min-height: 100vh;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.page-shell {
  width: min(1320px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 28px 0 56px;
}

.hero,
.panel,
.side-panel,
.modal-card,
.summary-card,
.info-card,
.assumption-card,
.trade-card {
  backdrop-filter: blur(18px);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 32px;
  border-radius: 36px;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.hero-copy {
  margin-top: 16px;
  max-width: 620px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.hero-actions,
.button-stack,
.stack,
.trade-list,
.chip-row,
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.8fr);
  gap: 20px;
  align-items: start;
}

.main-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.summary-card,
.info-card,
.assumption-card,
.panel,
.side-panel {
  border-radius: var(--radius-xl);
}

.summary-card {
  padding: 20px;
}

.summary-card span,
.muted-text,
.policy-link,
.field small,
.toggle-row small {
  color: var(--muted);
}

.summary-card strong {
  display: block;
  margin-top: 10px;
  font-size: 1.8rem;
  letter-spacing: -0.04em;
}

.summary-card.accent {
  background: linear-gradient(135deg, rgba(178, 74, 44, 0.95), rgba(245, 169, 109, 0.92));
  color: #fffaf4;
}

.summary-card.accent span {
  color: rgba(255, 245, 232, 0.76);
}

.panel,
.side-panel {
  padding: 22px;
}

.panel-header,
.tab-row,
.toggle-row,
.inline-field {
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-header {
  justify-content: space-between;
  margin-bottom: 18px;
}

.tab-button,
.ghost-button,
.primary-button,
.icon-button {
  border: 0;
  border-radius: 999px;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, opacity 160ms ease;
}

.tab-button,
.ghost-button,
.icon-button {
  background: rgba(70, 53, 31, 0.07);
  color: var(--text);
}

.tab-button {
  padding: 12px 18px;
  font-weight: 700;
}

.tab-button.is-active {
  background: var(--text);
  color: #fffaf4;
}

.primary-button,
.ghost-button {
  padding: 13px 18px;
  font-weight: 700;
}

.primary-button {
  background: var(--accent);
  color: #fff8f1;
}

.primary-button:hover,
.ghost-button:hover,
.tab-button:hover,
.icon-button:hover {
  transform: translateY(-1px);
}

.primary-button:hover {
  background: var(--accent-strong);
}

.ghost-button.compact {
  white-space: nowrap;
  padding-inline: 14px;
}

.ghost-button.danger {
  color: var(--negative);
}

.icon-button {
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
}

.trade-card {
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.trade-card:hover {
  transform: translateY(-2px);
}

.trade-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trade-title {
  font-size: 1.15rem;
  font-weight: 800;
}

.trade-subtitle,
.tag {
  color: var(--muted);
}

.trade-stats {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.metric-value {
  font-size: 1.15rem;
  font-weight: 800;
}

.positive {
  color: var(--positive);
}

.negative {
  color: var(--negative);
}

.tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag,
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(178, 74, 44, 0.08);
}

.empty-state {
  padding: 42px 20px 22px;
  text-align: center;
  color: var(--muted);
}

.info-card,
.assumption-card {
  padding: 18px;
}

.info-card h3,
.assumption-card h3 {
  margin-bottom: 10px;
}

.toggle-row {
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: rgba(70, 53, 31, 0.04);
}

.toggle-row input {
  width: 22px;
  height: 22px;
}

.policy-link {
  align-self: center;
}

.modal {
  position: fixed;
  inset: 0;
  padding: 22px;
  background: rgba(29, 21, 11, 0.36);
  display: grid;
  place-items: center;
  z-index: 10;
}

.modal-card {
  width: min(760px, 100%);
  max-height: min(90vh, 960px);
  overflow: auto;
  border-radius: 32px;
  padding: 24px;
}

.modal-card.wide {
  width: min(980px, 100%);
}

.detail-section {
  padding: 18px;
  border-radius: var(--radius-lg);
  background: rgba(70, 53, 31, 0.045);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.detail-card-hero {
  background: linear-gradient(135deg, #231d17 0%, #59402f 100%);
  color: #fffaf4;
}

.detail-card-hero .muted-text {
  color: rgba(255, 247, 238, 0.68);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field span {
  font-weight: 700;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid rgba(70, 53, 31, 0.12);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
}

.field textarea {
  resize: vertical;
}

.span-2 {
  grid-column: 1 / -1;
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(70, 53, 31, 0.08);
}

.search-result-button {
  text-align: left;
  border: 0;
  background: rgba(70, 53, 31, 0.05);
  border-radius: 14px;
  padding: 12px 14px;
}

.search-result-button strong {
  display: block;
  margin-bottom: 4px;
}

.error-text {
  color: var(--negative);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: rgba(31, 27, 23, 0.94);
  color: #fffaf4;
  padding: 13px 18px;
  border-radius: 999px;
  z-index: 15;
}

[hidden] {
  display: none !important;
}

@media (max-width: 1080px) {
  .layout,
  .summary-grid,
  .form-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    flex-direction: column;
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .page-shell {
    width: min(100vw - 20px, 1320px);
    padding-top: 12px;
  }

  .hero,
  .panel,
  .side-panel,
  .modal-card {
    padding: 18px;
    border-radius: 24px;
  }

  .trade-card,
  .panel-header,
  .toggle-row,
  .inline-field {
    flex-direction: column;
    align-items: stretch;
  }

  .trade-stats {
    text-align: left;
  }
}