:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-mono: ui-monospace, "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;

  --border-color: #393F4F;
  --border-color--input: #0A0B0E;

  --background-color: #191B22;
  --background-color--panel: #313543;
  --background-color--code: #1F232B;
  --background-color--button: #595AFF;
  --background-color--button--hover: #6364FF;
  --background-color--input: #131419;

  --text-color: #D9E1E8;
  --text-color--display: #FFFFFF;
  --text-color--sub: #9BAEC8;
  --text-color--cta: #FFFFFF;
  --text-color--link: #8C8DFF;
}

*,
::before,
::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: var(--font-sans);

  font-size: 1rem;
  line-height: 1.75;
  margin: 0;
  letter-spacing: 0;

  color: var(--text-color);
  background-color: var(--background-color);
}

code {
  font-family: var(--font-mono);
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;

  background-color: var(--background-color--code);
}

footer {
  font-size: 0.85rem;
  color: var(--text-color--sub);
}

h1,
h2 {
  margin: 0;
  color: var(--text-color--display);
}

h1 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.25rem;
  letter-spacing: -0.025em;
}

h2 {
  font-size: inherit;
  color: var(--text-color--sub);
}

h1 {
  margin-bottom: 0.5rem;
}

h2 {
  margin-bottom: 0.25rem;
}

p {
  margin: 0 0 0.25rem;
}

a {
  color: var(--text-color--link);
}

.description {
  color: var(--text-color--sub);
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;

  max-width: 62rem;
  height: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  gap: 2.5rem;
}

.panel {
  display: flex;
  padding: 1.25rem;
  border-radius: 0.25rem;
  background-color: var(--background-color--panel);

  gap: 1rem;
}

.panel-inner {
  padding-left: 1rem;
}

.panel-inner:not(:first-child) {
  border-width: 0;
  border-style: solid;
  border-color: var(--border-color);

  border-left-width: 1px;
}

@media screen and (max-width: 1024px) {
  .panel {
    flex-direction: column;
  }

  .panel-inner {
    padding-left: 0;
  }

  .panel-inner:not(:first-child) {
    padding-top: 1rem;

    border-top-width: 1px;
    border-left-width: 0;
  }
}


.share-button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;

  line-height: 1.5;
  padding: 0.5rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-color--cta);

  border: 1px solid transparent;
  border-radius: 0.25rem;
  background-color: var(--background-color--button);
}

.share-button:hover {
  background-color: var(--background-color--button--hover);
}

.share-button.wide {
  width: 100%;
}

.share-popup {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  height: 100%;
}

.share-popup__information {
  font-size: 1.125rem;

  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.input-wrapper {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--text-color--cta);
  border: 1px solid var(--border-color--input);

  border-radius: 0.375rem;
  background-color: var(--background-color--input);
}

.input-wrapper:focus-within {
  border-color: var(--background-color--button--hover);
}

.input-label {
  font-size: 0.75rem;

  font-weight: 500;
  line-height: 1;
  display: block;
}

.input-wrapper input {
  font-family: inherit;
  color: inherit;

  border: none;
  background: none;
}

.input-wrapper input::placeholder {
  color: var(--text-color--sub);
}

.input-wrapper input:focus {
  outline: none;
}