:root {
  --studio-ink: #131c17;
  --studio-ink-soft: #1d2822;
  --studio-paper: #f2f1eb;
  --studio-card: #f8f7f2;
  --studio-line: rgba(19, 28, 23, 0.16);
  --studio-muted: #69726c;
  --studio-lime: #d5ff45;
  --studio-orange: #ff6245;
  --studio-sidebar: 264px;
  --studio-grid: 32px;
}

html.studio-site {
  color: var(--studio-ink);
  background: var(--studio-paper);
  scroll-behavior: smooth;
}

html.studio-site body {
  min-width: 320px;
  color: var(--studio-ink);
  background-color: var(--studio-paper);
  background-image:
    linear-gradient(var(--studio-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--studio-line) 1px, transparent 1px);
  background-size: var(--studio-grid) var(--studio-grid);
  font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

html.studio-site ::selection {
  color: var(--studio-ink);
  background: var(--studio-lime);
}

html.studio-site h1,
html.studio-site h2,
html.studio-site h3,
html.studio-site h4 {
  color: var(--studio-ink);
  letter-spacing: -0.055em;
}

html.studio-site h1,
html.studio-site h2 {
  font-family: Georgia, "Times New Roman", "Batang", serif;
}

html.studio-site main,
html.studio-site footer {
  margin-left: var(--studio-sidebar);
}

html.studio-site main {
  min-height: 100vh;
  background: transparent !important;
}

html.studio-site main > div[class*="flex-grow"],
html.studio-site main > section:not(:last-child) {
  background-color: rgba(242, 241, 235, 0.9) !important;
  background-image:
    linear-gradient(var(--studio-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--studio-line) 1px, transparent 1px) !important;
  background-size: var(--studio-grid) var(--studio-grid) !important;
}

/* Desktop navigation becomes the permanent editorial rail. */
@media (min-width: 768px) {
  html.studio-site header {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 100 !important;
    width: var(--studio-sidebar) !important;
    height: 100vh !important;
    padding: 0 16px !important;
    overflow-y: auto;
    color: #eef2ec !important;
    background: var(--studio-ink) !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: none !important;
  }

  html.studio-site header > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100%;
  }

  html.studio-site header > div > a[href="/"] {
    position: relative;
    display: flex !important;
    min-height: 118px;
    align-items: center;
    padding: 20px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  html.studio-site header > div > a[href="/"] img {
    display: none !important;
  }

  html.studio-site header > div > a[href="/"]::before {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    color: var(--studio-lime);
    border: 3px solid currentColor;
    border-radius: 10px;
    content: "+";
    display: grid;
    place-items: center;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
  }

  html.studio-site header > div > a[href="/"]::after {
    color: white;
    content: "SELLORY /\A WOOJOOIN STUDIO";
    white-space: pre;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.03em;
  }

  html.studio-site header nav {
    display: flex !important;
    flex: 1;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0 !important;
    padding-top: 18px;
  }

  html.studio-site header nav > ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  html.studio-site header nav > ul > li {
    position: relative !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  html.studio-site header nav > ul > li > a,
  html.studio-site header nav > ul > li > button {
    display: flex !important;
    width: 100% !important;
    min-height: 54px;
    align-items: center;
    padding: 0 12px !important;
    color: #c5cdc7 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
  }

  html.studio-site header nav > ul > li > a::before,
  html.studio-site header nav > ul > li > button::before {
    width: 34px;
    color: #69736c;
    font-family: Georgia, serif;
    font-size: 12px;
    content: "00";
  }

  html.studio-site header nav > ul > li:nth-child(1) > a::before { content: "01"; }
  html.studio-site header nav > ul > li:nth-child(2) > button::before { content: "02"; }
  html.studio-site header nav > ul > li:nth-child(3) > a::before { content: "03"; }
  html.studio-site header nav > ul > li:nth-child(4) > a::before { content: "04"; }

  html.studio-site header nav > ul > li > a:hover,
  html.studio-site header nav > ul > li > button:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  html.studio-site header li.relative.group > div {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    padding: 0 0 10px 46px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html.studio-site header li.relative.group > div > div {
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.studio-site header li.relative.group > div a {
    position: relative;
    padding: 7px 8px 7px 16px !important;
    color: #7f8982 !important;
    background: transparent !important;
    font-size: 12px !important;
  }

  html.studio-site header li.relative.group > div a::before {
    position: absolute;
    left: 0;
    color: var(--studio-lime);
    content: "·";
  }

  html.studio-site header li.relative.group > div a:hover {
    color: white !important;
  }

  html.studio-site header nav > div.relative {
    position: static !important;
    margin-top: auto;
    padding: 22px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  html.studio-site header nav > div.relative::before {
    display: block;
    margin-bottom: 8px;
    color: var(--studio-orange);
    content: "STUDIO CONTROL";
    font-family: Georgia, serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
  }

  html.studio-site header nav > div.relative button[aria-label="Admin menu"] {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;
    color: #89928c !important;
  }

  html.studio-site header nav > div.relative button[aria-label="Admin menu"]::before {
    content: "관리자 메뉴";
    font-size: 12px;
    font-weight: 700;
  }
}

/* Shared editorial surfaces */
html.studio-site main > div[class*="flex-grow"] > div,
html.studio-site main > section > div {
  position: relative;
}

html.studio-site main > div[class*="flex-grow"] > div::before {
  display: block;
  margin-bottom: 8px;
  color: var(--studio-orange);
  content: "SELECTED WORK / ARCHIVE";
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

html.studio-site main > div[class*="flex-grow"] h1 {
  font-size: clamp(44px, 5vw, 78px) !important;
  font-weight: 500 !important;
  line-height: 0.95 !important;
}

html.studio-site main button[class*="bg-blue-600"],
html.studio-site main a[class*="bg-[#254ccc]"] {
  color: var(--studio-ink) !important;
  background: var(--studio-lime) !important;
  border: 1px solid var(--studio-ink) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--studio-ink) !important;
  text-transform: uppercase;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

html.studio-site main button[class*="bg-blue-600"]:hover,
html.studio-site main a[class*="bg-[#254ccc]"]:hover {
  transform: translate(3px, 3px) !important;
  box-shadow: 3px 3px 0 var(--studio-ink) !important;
}

html.studio-site main div[class*="cursor-move"],
html.studio-site main div[class*="cursor-pointer"] {
  background: var(--studio-card) !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.studio-site main div[class*="cursor-move"]:hover,
html.studio-site main div[class*="cursor-pointer"]:hover {
  border-color: var(--studio-ink) !important;
  box-shadow: 8px 8px 0 rgba(19, 28, 23, 0.18) !important;
  transform: translate(-3px, -3px);
}

html.studio-site main div[class*="cursor-move"] [role="button"],
html.studio-site main div[class*="cursor-pointer"] > div:first-child {
  border-bottom: 1px solid var(--studio-line);
}

html.studio-site main div[class*="cursor-move"] img,
html.studio-site main div[class*="cursor-pointer"] img {
  filter: saturate(0.92) contrast(1.02);
}

html.studio-site main div[class*="cursor-move"]:hover img,
html.studio-site main div[class*="cursor-pointer"]:hover img {
  filter: saturate(1.05) contrast(1.02);
}

html.studio-site main [class*="rounded-xl"],
html.studio-site main [class*="rounded-2xl"] {
  border-radius: 0 !important;
}

html.studio-site main input,
html.studio-site main textarea,
html.studio-site main select {
  border-color: var(--studio-line) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.62) !important;
}

html.studio-site main input:focus,
html.studio-site main textarea:focus,
html.studio-site main select:focus {
  border-color: var(--studio-ink) !important;
  box-shadow: 0 0 0 3px rgba(213, 255, 69, 0.55) !important;
}

/* Homepage */
html.studio-site body[data-studio-route="/"] main > section:first-child {
  min-height: 62vh;
  padding: 96px clamp(28px, 5vw, 88px) 72px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--studio-line);
}

html.studio-site body[data-studio-route="/"] main > section:first-child > div {
  max-width: 1280px !important;
  margin: 0 !important;
}

html.studio-site body[data-studio-route="/"] main > section:first-child h1 {
  max-width: 900px;
  font-size: clamp(56px, 8vw, 128px) !important;
  font-weight: 500 !important;
  line-height: 0.85 !important;
  text-align: left !important;
}

html.studio-site body[data-studio-route="/"] main > section:first-child h1::before {
  display: block;
  margin-bottom: 24px;
  color: var(--studio-orange);
  content: "SELL + STORY / CREATIVE COMMERCE";
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

html.studio-site body[data-studio-route="/"] main > section:first-child p {
  max-width: 620px;
  margin: 42px 0 0 auto !important;
  padding-left: 24px;
  color: var(--studio-muted) !important;
  border-left: 4px solid var(--studio-lime);
  text-align: left !important;
}

html.studio-site body[data-studio-route="/"] main > section:nth-child(2) {
  border-bottom: 1px solid var(--studio-line);
}

html.studio-site body[data-studio-route="/"] main > section:nth-child(2) a {
  border: 1px solid var(--studio-line);
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.studio-site body[data-studio-route="/"] main > section:nth-child(3),
html.studio-site body[data-studio-route="/"] main > section:nth-child(4) {
  border-bottom: 1px solid var(--studio-line);
}

html.studio-site body[data-studio-route="/"] main > section h2 {
  font-size: clamp(40px, 5.2vw, 76px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

html.studio-site body[data-studio-route="/"] main > section:last-child {
  color: white !important;
  background: var(--studio-ink) !important;
}

html.studio-site body[data-studio-route="/"] main > section:last-child h2 {
  color: white !important;
}

/* Partner logos become a catalog wall instead of floating pills. */
html.studio-site body[data-studio-route="/"] img[alt^="Partner Logo"] {
  border-radius: 0 !important;
  filter: grayscale(1) contrast(0.78);
  transition: filter 180ms ease, transform 180ms ease;
}

html.studio-site body[data-studio-route="/"] img[alt^="Partner Logo"]:hover {
  filter: grayscale(0) contrast(1);
  transform: translateY(-3px);
}

/* Footer */
html.studio-site footer {
  color: #bdc6bf !important;
  background: var(--studio-ink) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

html.studio-site footer h3,
html.studio-site footer a {
  color: #e9eee9 !important;
}

html.studio-site footer img {
  filter: brightness(0) invert(1);
}

/* Dialogs stay bright and usable above the editorial canvas. */
html.studio-site [class*="fixed"][class*="inset-0"] > [class*="bg-white"] {
  background: #f8f7f2 !important;
  border: 1px solid var(--studio-ink) !important;
  border-radius: 0 !important;
}

/* Mobile uses a compact dark masthead and keeps the app's native menu behavior. */
@media (max-width: 767px) {
  :root {
    --studio-grid: 24px;
  }

  html.studio-site header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 100 !important;
    height: 72px;
    padding: 0 18px !important;
    color: white !important;
    background: var(--studio-ink) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  html.studio-site header > div {
    height: 72px;
  }

  html.studio-site header > div > a[href="/"] img {
    display: none !important;
  }

  html.studio-site header > div > a[href="/"]::after {
    color: white;
    content: "SELLORY / WOOJOOIN STUDIO";
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  html.studio-site header button[aria-label="Open menu"],
  html.studio-site header button[aria-label="Close menu"] {
    color: var(--studio-lime) !important;
  }

  html.studio-site main,
  html.studio-site footer {
    margin-left: 0;
  }

  html.studio-site main {
    padding-top: 72px !important;
  }

  html.studio-site main > div[class*="flex-grow"] > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html.studio-site main > div[class*="flex-grow"] > div::before {
    display: none;
  }

  html.studio-site main > div[class*="flex-grow"] h1 {
    font-size: 44px !important;
  }

  html.studio-site body[data-studio-route="/"] main > section:first-child {
    min-height: auto;
    padding: 72px 20px 56px !important;
  }

  html.studio-site body[data-studio-route="/"] main > section:first-child h1 {
    font-size: clamp(48px, 16vw, 72px) !important;
  }

  html.studio-site body[data-studio-route="/"] main > section:first-child p {
    margin-top: 30px !important;
  }

  html.studio-site main button[class*="bg-blue-600"] {
    padding: 13px 18px !important;
    box-shadow: 4px 4px 0 var(--studio-ink) !important;
  }

  html.studio-site main div[class*="cursor-move"]:hover,
  html.studio-site main div[class*="cursor-pointer"]:hover {
    box-shadow: none !important;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.studio-site *,
  html.studio-site *::before,
  html.studio-site *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}