@import url('https://api.fontshare.com/css?f[]=melodrama@400,500,600,700&f[]=supreme@400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Noto+Sans+KR:wght@400;500;700&display=swap');
:root {
  --background: #fffdf7;
  --surface: #f4efe5;
  --surface-soft: #ece4d7;
  --text-main: #1d1c1a;
  --text-sub: #625d55;
  --line: #1d1c1a;
  --primary: #1d1c1a;
  --accent: #cf2f24;
  --verm: #cf2f24;
  --teal: #087d76;
  --ink: #1d1c1a;
  --active: var(--verm);
  --font: "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif;
  --max: 1280px;
  --pad: 56px;
  --pad-m: 20px;
  --section: 108px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
}
.shade-teal { --active: var(--teal); }
.shade-ink { --active: var(--ink); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--text-main); font-family: var(--font); line-height: 1.58; overflow-x: hidden; }
img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: cover; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.announce { padding: 10px var(--pad); background: var(--verm); color: #fff; text-align: center; font-size: 12px; font-weight: 900; }
.site-header { position: sticky; top: 0; z-index: 20; min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); background: rgba(255,253,247,.97); border-bottom: 2px solid var(--line); }
.brand-mark { text-decoration: none; font-weight: 950; font-size: 23px; letter-spacing: 0; }
.primary-nav { display: flex; gap: 30px; align-items: center; }
.primary-nav a { text-decoration: none; font-weight: 900; font-size: 14px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--background); }
.menu-toggle span { display: block; width: 20px; height: 2px; margin: 6px auto; background: var(--text-main); }
h1, h2, h3, p { word-break: keep-all; overflow-wrap: break-word; }
h1 { margin: 0 0 20px; font-size: clamp(42px, 5vw, 70px); line-height: 1.1; letter-spacing: 0; }
h2 { margin: 0; font-size: clamp(30px, 3vw, 48px); line-height: 1.16; letter-spacing: 0; }
h3, p { margin: 0; }
.eyebrow { margin: 0 0 14px; color: var(--active); font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 20px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--background); color: var(--text-main); font-weight: 950; text-decoration: none; }
.primary { background: var(--active); color: #fff; border-color: var(--active); }
.button.is-added { background: var(--teal); border-color: var(--teal); }
.text-link { display: inline-block; margin-top: 18px; font-weight: 950; color: var(--active); }
main > section:not(.hero):not(.pigment-dossier) { padding: var(--section) var(--pad); }
.hero { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: var(--background); }
.hero picture, .hero img { display: block; width: 100%; height: 100%; }
.hero img { object-position: center; }
.hero-copy { position: absolute; left: var(--pad); top: 50%; max-width: min(36%, 520px); color: var(--text-main); transform: translateY(-50%); }
.hero-copy > p:not(.eyebrow) { margin-bottom: 24px; }
.hero .eyebrow { color: var(--verm); }
.editorial-index { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.15fr .75fr 1fr .9fr; gap: 18px; align-items: stretch; }
.index-head { padding-right: 34px; }
.index-tile { min-height: 280px; padding: 24px; border: 2px solid var(--line); border-radius: var(--radius-md); text-decoration: none; display: grid; align-content: end; gap: 10px; background: var(--background); }
.index-tile span { font-weight: 950; }
.index-tile strong { font-size: 24px; }
.vermilion-tile { background: var(--verm); color: #fff; }
.teal-tile { background: var(--teal); color: #fff; transform: translateY(56px); }
.ink-tile { background: var(--ink); color: #fff; transform: translateY(-24px); }
.swatch-story { display: grid; grid-template-columns: .9fr 1.1fr .75fr; gap: 28px; align-items: end; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); background: var(--surface); }
.portrait-card, .product-card { margin: 0; border: 2px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--background); }
.portrait-card img, .product-card img { aspect-ratio: 4 / 5; }
figcaption { padding: 12px 14px; font-size: 12px; font-weight: 900; }
.story-copy { align-self: center; padding: 36px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--background); }
.story-copy h2 { margin-bottom: 16px; }
.shade-strip, .option-group { display: grid; gap: 10px; margin: 24px 0; }
[data-option], .mixer-tab, .gallery-controls button, .swatch-rail button { border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--background); color: var(--text-main); padding: 12px 14px; text-align: left; font-weight: 900; }
[aria-selected="true"], .is-selected { background: var(--active); color: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.shade-strip [data-option], .option-group [data-option], .swatch-rail button { display: flex; align-items: center; gap: 12px; }
[data-option] span, .swatch-rail span { width: 18px; height: 18px; border: 2px solid var(--line); background: var(--active); flex: 0 0 auto; }
[data-shade="teal"] span { background: var(--teal); }
[data-shade="ink"] span { background: var(--ink); }
.bag-status, .form-status { min-height: 28px; margin-top: 14px; color: var(--active); font-weight: 950; }
.color-stories { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .7fr 1.3fr; gap: 48px; align-items: start; }
.color-stories img { aspect-ratio: 3 / 2; border: 2px solid var(--line); border-radius: var(--radius-md); }
.color-stories dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 2px solid var(--line); background: var(--background); }
.color-stories div div, .color-stories dl div { padding: 28px; border-right: 2px solid var(--line); }
.color-stories dl div:last-child { border-right: 0; }
dt { font-weight: 950; color: var(--active); }
dd { margin: 8px 0 0; color: var(--text-sub); }
.edge-mixer { background: var(--ink); color: #fff; display: grid; grid-template-columns: .72fr 1.28fr; gap: 64px; }
.edge-mixer .eyebrow { color: var(--active); }
.mixer-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.swatch-stage { position: relative; min-height: 360px; overflow: hidden; display: grid; align-content: end; gap: 10px; border: 2px solid #fff; border-radius: var(--radius-md); padding: 32px; background: #fff; color: var(--text-main); }
.swatch-cut { position: absolute; inset: -10% 20% 38% -8%; background: var(--active); transform: skewX(-18deg); }
.swatch-stage p, .swatch-card strong { position: relative; z-index: 1; font-weight: 950; }
.swatch-stage p:first-of-type { font-size: 30px; }
.texture-editorial { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; background: var(--verm); color: #fff; }
.texture-editorial img { aspect-ratio: 1 / 1; border: 2px solid var(--line); border-radius: var(--radius-md); }
.texture-editorial .eyebrow { color: #fff; }
.routine, .contact-section, .shade-detail, .finish-study, .edge-study, .portrait-application, .campaign-context, .info-caution, .how-to, .faq-section { max-width: var(--max); margin: 0 auto; }
.section-heading { margin-bottom: 56px; max-width: 760px; }
.routine-list, .how-to ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--line); }
.routine-list li, .how-to li { min-height: 210px; padding: 28px; border-right: 2px solid var(--line); }
.routine-list li:last-child, .how-to li:last-child { border-right: 0; }
.routine-list span, .how-to span { color: var(--active); font-weight: 950; }
.routine-list strong, .how-to strong { display: block; margin: 12px 0; font-size: 22px; }
.contact-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; border-top: 2px solid var(--line); }
.contact-form { display: grid; gap: 18px; }
.contact-form label { display: grid; gap: 8px; font-weight: 900; }
input, textarea { width: 100%; border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 14px; background: var(--background); color: var(--text-main); }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 36px var(--pad); border-top: 2px solid var(--line); font-size: 13px; }
.pigment-dossier { display: grid; grid-template-columns: 150px minmax(0, 52fr) minmax(360px, 38fr); align-items: start; border-bottom: 2px solid var(--line); }
.swatch-rail { position: sticky; top: 92px; min-height: calc(100vh - 92px); padding: 54px 16px; display: grid; align-content: start; gap: 12px; border-right: 2px solid var(--line); background: var(--surface); }
.swatch-rail button { min-height: 98px; writing-mode: vertical-rl; justify-content: space-between; }
.gallery-column { padding: 54px var(--pad); }
.gallery-main img { aspect-ratio: 4 / 5; border: 2px solid var(--line); border-radius: var(--radius-md); object-position: center; background: var(--surface); }
.gallery-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.purchase-panel { position: sticky; top: 92px; min-height: calc(100vh - 92px); padding: 54px 42px; border-left: 2px solid var(--line); background: var(--background); }
.purchase-panel h1 { font-size: clamp(42px, 4vw, 58px); color: var(--text-main); }
.format-label { color: var(--active); font-weight: 950; margin-bottom: 18px; }
.descriptor { color: var(--text-sub); margin-bottom: 22px; }
.price { font-weight: 950; margin-bottom: 24px; }
.option-group p { font-weight: 950; }
.quantity-control { display: grid; grid-template-columns: 1fr 44px 52px 44px; align-items: center; gap: 8px; margin: 26px 0; }
.quantity-control button { width: 44px; height: 44px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--background); }
[data-quantity] { text-align: center; font-weight: 950; }
.service-notes { list-style: square; padding-left: 18px; color: var(--text-sub); }
.shade-detail, .finish-study, .edge-study, .portrait-application, .campaign-context, .info-caution { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.swatch-card { position: relative; min-height: 360px; overflow: hidden; border: 2px solid var(--line); border-radius: var(--radius-md); background: #fff; padding: 28px; display: flex; align-items: end; }
.finish-study img { aspect-ratio: 1 / 1; border: 2px solid var(--line); border-radius: var(--radius-md); }
.edge-study img, .campaign-context img { aspect-ratio: 3 / 2; border: 2px solid var(--line); border-radius: var(--radius-md); }
.portrait-application img { aspect-ratio: 4 / 5; border: 2px solid var(--line); border-radius: var(--radius-md); }
.fact-strip { background: var(--surface); }
.fact-strip dl { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--line); background: var(--background); }
.fact-strip div { padding: 24px; border-right: 2px solid var(--line); }
.fact-strip div:last-child { border-right: 0; }
.how-to h2 { margin-bottom: 48px; }
.info-caution { align-items: start; }
.info-caution > div { border-top: 2px solid var(--line); padding-top: 24px; }
.faq-section { max-width: 920px; }
details { border-top: 2px solid var(--line); padding: 22px 0; }
summary { cursor: pointer; font-weight: 950; }
details p { margin-top: 14px; color: var(--text-sub); }
.final-cta { background: var(--ink); color: #fff; text-align: center; }
.final-cta .eyebrow { color: var(--active); }
.final-cta h2 { margin-bottom: 28px; }
.sticky-buy { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; background: var(--background); border: 2px solid var(--line); border-radius: var(--radius-md); box-shadow: 8px 8px 0 var(--ink); }
.sticky-buy span { font-weight: 950; }
@media (max-width: 900px) {
  :root { --pad: 28px; --section: 84px; }
  .site-header { min-height: 64px; padding: 0 var(--pad-m); }
  .menu-toggle { display: block; }
  .primary-nav { position: absolute; top: 64px; left: 0; right: 0; display: none; grid-template-columns: 1fr; gap: 0; background: var(--background); border-bottom: 2px solid var(--line); }
  .site-header.is-open .primary-nav { display: grid; }
  .primary-nav a { padding: 16px 20px; border-top: 2px solid var(--line); }
  .hero-copy { left: var(--pad); max-width: 42%; }
  .editorial-index, .swatch-story, .color-stories, .edge-mixer, .texture-editorial, .contact-section, .pigment-dossier, .shade-detail, .finish-study, .edge-study, .portrait-application, .campaign-context, .info-caution { grid-template-columns: 1fr; }
  .teal-tile, .ink-tile { transform: none; }
  .product-card { max-width: 420px; justify-self: end; }
  .color-stories dl, .routine-list, .how-to ol, .fact-strip dl { grid-template-columns: 1fr 1fr; }
  .swatch-rail { position: static; min-height: auto; display: flex; padding: 18px var(--pad); border-right: 0; border-bottom: 2px solid var(--line); overflow-x: auto; }
  .swatch-rail button { min-height: 58px; min-width: 150px; writing-mode: horizontal-tb; }
  .purchase-panel { position: static; min-height: auto; border-left: 0; border-top: 2px solid var(--line); }
  .gallery-controls { grid-template-columns: repeat(2, 1fr); }
  .mixer-tabs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --pad: 20px; --section: 68px; }
  .announce { padding: 9px var(--pad-m); }
  main > section:not(.hero):not(.pigment-dossier) { padding: var(--section) var(--pad-m); }
  .hero { display: grid; aspect-ratio: auto; overflow: visible; }
  .hero picture { height: min(56vh, 520px); }
  .hero-copy { position: relative; left: auto; top: auto; max-width: none; padding: 30px var(--pad-m) 36px; background: var(--background); transform: none; }
  h1 { font-size: 38px; line-height: 1.14; }
  h2 { font-size: 28px; line-height: 1.2; }
  .story-copy { padding: 22px; }
  .color-stories dl, .routine-list, .how-to ol, .fact-strip dl { grid-template-columns: 1fr; }
  .color-stories dl div, .routine-list li, .how-to li, .fact-strip div { border-right: 0; border-bottom: 2px solid var(--line); }
  .color-stories dl div:last-child, .routine-list li:last-child, .how-to li:last-child, .fact-strip div:last-child { border-bottom: 0; }
  .gallery-column, .purchase-panel, .swatch-rail { padding-left: var(--pad-m); padding-right: var(--pad-m); }
  .purchase-panel { padding-bottom: 96px; }
  .gallery-controls { grid-template-columns: 1fr 1fr; }
  .quantity-control { grid-template-columns: 1fr 42px 42px 42px; }
  .sticky-buy { display: flex; }
  .sticky-buy .button { min-height: 42px; padding: 10px 14px; }
  .site-footer { display: grid; padding: 32px var(--pad-m) 96px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Fontshare typography differentiation */
:root {
  --font-heading: "Melodrama", "Do Hyeon", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  --font-body: "Supreme", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-accent: "Supreme", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}
body {
  font-family: var(--font-body);
}
h1,
h2,
h3,
.hero-title,
.product-title,
.section-title,
.brand-mark,
.mark,
.logo,
.site-logo {
  font-family: var(--font-heading);
  font-weight: 400;
}
.eyebrow,
.section-kicker,
.notice,
.announce,
.nav,
.primary-nav,
.button,
.text-link,
.manual-link,
.price,
figcaption,
[data-option],
.gallery-controls button {
  font-family: var(--font-accent);
}
.brand-mark,
.mark,
.logo,
.site-logo {
  letter-spacing: 0.08em;
}
/* botanical color brand: expressive color editorial heading with compact sans */