/* =========================================================================
   LIVING CREATOR — Design Tokens
   Canonical source: 리빙크리에이터_브랜드 가이드라인 (Ver 1.0, 2024.10)
   Brand essence: COLORFUL · CREATIVE · SUSTAINABLE — "Bring Color to Your Life!"
   ========================================================================= */

/* ----- Typefaces ----------------------------------------------------------
   Latin   = Poppins   (ExtraBold for slogans, Bold for product names)
   Korean  = Pretendard (detail pages, print, content)
   --------------------------------------------------------------------------*/
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/Poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/Poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/Poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/Poppins-800.woff2") format("woff2"); }

@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/Pretendard-Regular.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/Pretendard-Medium.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Pretendard-Bold.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/Pretendard-ExtraBold.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/Pretendard-Black.otf") format("opentype"); }

:root {
  /* ---- Brand colors — Vivid tone (2026 Design Book · Color Code Index) ---- */
  --lc-blue: #2f55d4;          /* PANTONE 286C — PRIMARY (Bring Color to Your Life) */
  --lc-red: #f4364c;           /* 1787C — COLORFUL */
  --lc-yellow: #ffcb05;        /* 7548C */
  --lc-purple: #753bbd;        /* 266C */
  --lc-green: #00ae63;         /* 3405C — SUSTAINABLE */
  --lc-orange: #fe5000;        /* 021C */
  --lc-indigo: #20366b;        /* 2216C — Deep tone */
  --lc-deep-blue: #20366b;     /* alias → indigo (legacy name) */

  /* ---- Neutrals ---- */
  --lc-white: #ffffff;
  --lc-ink: #15161a;           /* body text (charcoal, not pure black) */
  --lc-ink-soft: #5a5e66;      /* sub / caption text */
  --lc-line: #e6e8ec;          /* hairline border */
  --lc-surface: #f3f4f7;       /* subtle panel background */

  /* ---- Sensory accents — Bright tone (Design Book · Color Code Index) ---- */
  --lc-pink: #f99fc9;          /* 230C */
  --lc-coral: #ff8475;         /* 177C */
  --lc-lemon: #efd848;         /* 0131C */
  --lc-melon: #c3e76c;         /* 372C */
  --lc-lavender: #c9a0dc;      /* 2562C */
  --lc-sky: #9bd3e6;           /* 2975C */
  --lc-apricot: #ff9e6c;       /* 163C */

  /* ---- Pale tone (soft surfaces / Card tints) ---- */
  --lc-mute-pink: #f8cdd6;     /* 705C */
  --lc-ivory: #f6ebdc;         /* 9060C */
  --lc-pastel-blue: #aac6ec;   /* 2717C */
  --lc-mint: #ace0cf;          /* 573CP */
  --lc-winter-green: #bfe0c9;  /* Pale green */
  /* legacy tint aliases (Card tone="tint") */
  --lc-pale-cream: #f6ebdc;
  --lc-pale-mint: #ace0cf;
  --lc-pale-pink: #f8cdd6;
  --lc-pale-lavender: #c9a0dc;

  /* ---- Typography ---- */
  --lc-font-display: "Poppins", "Pretendard", system-ui, sans-serif;
  --lc-font-body: "Pretendard", "Poppins", system-ui, -apple-system, sans-serif;

  --lc-weight-regular: 400;
  --lc-weight-medium: 500;
  --lc-weight-semibold: 600;
  --lc-weight-bold: 700;
  --lc-weight-extrabold: 800;

  --lc-text-xs: 12px;
  --lc-text-sm: 14px;
  --lc-text-md: 16px;
  --lc-text-lg: 20px;
  --lc-text-xl: 28px;
  --lc-text-2xl: 40px;
  --lc-text-3xl: 56px;

  /* ---- Radii ---- */
  --lc-radius-pill: 999px;
  --lc-radius-lg: 20px;
  --lc-radius-md: 14px;
  --lc-radius-sm: 8px;

  /* ---- Spacing ---- */
  --lc-space-1: 4px;
  --lc-space-2: 8px;
  --lc-space-3: 12px;
  --lc-space-4: 16px;
  --lc-space-5: 24px;
  --lc-space-6: 32px;
  --lc-space-7: 48px;
  --lc-space-8: 64px;

  /* ---- Elevation ---- */
  --lc-shadow-card: 0 2px 14px rgba(21, 38, 124, 0.07);
  --lc-shadow-raised: 0 10px 30px rgba(21, 38, 124, 0.12);
}

/* =========================================================================
   LIVING CREATOR — Component styles
   Entry stylesheet: @imports tokens (colors, type, @font-face) then defines
   every component class. design-sync uses this file as cssEntry; rendered
   designs receive its full @import closure.
   ========================================================================= */

/* ---------- base ---------- */
.lc-root,
[class^="lc-"],
[class*=" lc-"] {
  box-sizing: border-box;
}
.lc-root {
  font-family: var(--lc-font-body);
  color: var(--lc-ink);
  -webkit-font-smoothing: antialiased;
}

/* ======================================================================
   Button
   ====================================================================== */
.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-space-2);
  font-family: var(--lc-font-display);
  font-weight: var(--lc-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.lc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.lc-btn:not(:disabled):hover { filter: brightness(0.94); }

.lc-btn--pill { border-radius: var(--lc-radius-pill); }
.lc-btn--rounded { border-radius: var(--lc-radius-md); }

.lc-btn--sm { font-size: var(--lc-text-sm); padding: 8px 16px; }
.lc-btn--md { font-size: var(--lc-text-md); padding: 12px 24px; }
.lc-btn--lg { font-size: var(--lc-text-lg); padding: 16px 34px; }

.lc-btn--block { display: flex; width: 100%; }

.lc-btn--primary { background: var(--lc-blue); color: var(--lc-white); }
.lc-btn--secondary { background: transparent; color: var(--lc-blue); border-color: var(--lc-blue); }
.lc-btn--ghost { background: transparent; color: var(--lc-blue); }
.lc-btn--ghost:not(:disabled):hover { background: rgba(32, 76, 185, 0.08); filter: none; }
.lc-btn--accent { color: var(--lc-white); }

.lc-btn__icon { display: inline-flex; align-items: center; }

/* ======================================================================
   Pill  (section label / size chip / tag)
   ====================================================================== */
.lc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--lc-font-display);
  font-weight: var(--lc-weight-bold);
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--lc-radius-pill);
  white-space: nowrap;
}
.lc-pill--sm { font-size: var(--lc-text-xs); padding: 6px 12px; }
.lc-pill--md { font-size: var(--lc-text-sm); padding: 9px 18px; }
.lc-pill--uppercase { text-transform: uppercase; letter-spacing: 0.06em; }

/* solid — vivid tones get white text, bright accents get ink text */
.lc-pill--solid { color: var(--lc-white); }
.lc-pill--solid.lc-tone-blue { background: var(--lc-blue); }
.lc-pill--solid.lc-tone-deep-blue { background: var(--lc-deep-blue); }
.lc-pill--solid.lc-tone-red { background: var(--lc-red); }
.lc-pill--solid.lc-tone-green { background: var(--lc-green); }
.lc-pill--solid.lc-tone-orange { background: var(--lc-orange); }
.lc-pill--solid.lc-tone-purple { background: var(--lc-purple); }
.lc-pill--solid.lc-tone-indigo { background: var(--lc-indigo); }
.lc-pill--solid.lc-tone-yellow { background: var(--lc-yellow); color: var(--lc-ink); }
.lc-pill--solid.lc-tone-lavender { background: var(--lc-lavender); color: var(--lc-deep-blue); }
.lc-pill--solid.lc-tone-melon { background: var(--lc-melon); color: var(--lc-ink); }
.lc-pill--solid.lc-tone-apricot { background: var(--lc-apricot); color: var(--lc-ink); }
.lc-pill--solid.lc-tone-sky { background: var(--lc-sky); color: var(--lc-deep-blue); }
.lc-pill--solid.lc-tone-lemon { background: var(--lc-lemon); color: var(--lc-ink); }
.lc-pill--solid.lc-tone-pink { background: var(--lc-pink); color: var(--lc-ink); }
.lc-pill--solid.lc-tone-coral { background: var(--lc-coral); color: var(--lc-white); }
.lc-pill--solid.lc-tone-neutral { background: var(--lc-ink); }

/* outline — the catalog size chip */
.lc-pill--outline { background: var(--lc-white); }
.lc-pill--outline.lc-tone-blue { color: var(--lc-blue); border-color: var(--lc-blue); }
.lc-pill--outline.lc-tone-deep-blue { color: var(--lc-deep-blue); border-color: var(--lc-deep-blue); }
.lc-pill--outline.lc-tone-red { color: var(--lc-red); border-color: var(--lc-red); }
.lc-pill--outline.lc-tone-green { color: var(--lc-green); border-color: var(--lc-green); }
.lc-pill--outline.lc-tone-orange { color: var(--lc-orange); border-color: var(--lc-orange); }
.lc-pill--outline.lc-tone-purple { color: var(--lc-purple); border-color: var(--lc-purple); }
.lc-pill--outline.lc-tone-indigo { color: var(--lc-indigo); border-color: var(--lc-indigo); }
.lc-pill--outline.lc-tone-neutral { color: var(--lc-ink); border-color: var(--lc-line); }

/* soft — tinted fill */
.lc-pill--soft.lc-tone-blue { background: rgba(32, 76, 185, 0.12); color: var(--lc-blue); }
.lc-pill--soft.lc-tone-red { background: rgba(234, 51, 60, 0.14); color: var(--lc-red); }
.lc-pill--soft.lc-tone-green { background: rgba(66, 148, 77, 0.16); color: var(--lc-green); }
.lc-pill--soft.lc-tone-orange { background: rgba(254, 80, 0, 0.13); color: var(--lc-orange); }
.lc-pill--soft.lc-tone-purple { background: rgba(117, 59, 189, 0.13); color: var(--lc-purple); }
.lc-pill--soft.lc-tone-neutral { background: var(--lc-surface); color: var(--lc-ink-soft); }

/* ======================================================================
   Card
   ====================================================================== */
.lc-card {
  display: block;
  background: var(--lc-white);
  border: 2px solid transparent;
}
.lc-card--radius-sm { border-radius: var(--lc-radius-sm); }
.lc-card--radius-md { border-radius: var(--lc-radius-md); }
.lc-card--radius-lg { border-radius: var(--lc-radius-lg); }

.lc-card--pad-none { padding: 0; }
.lc-card--pad-sm { padding: var(--lc-space-4); }
.lc-card--pad-md { padding: var(--lc-space-5); }
.lc-card--pad-lg { padding: var(--lc-space-6); }

.lc-card--bordered { border-color: var(--lc-line); }
.lc-card--elevated { box-shadow: var(--lc-shadow-card); }

.lc-card--brand { background: var(--lc-blue); color: var(--lc-white); }
.lc-card--tint.lc-tint-cream { background: var(--lc-pale-cream); }
.lc-card--tint.lc-tint-mint { background: var(--lc-pale-mint); }
.lc-card--tint.lc-tint-pink { background: var(--lc-pale-pink); }
.lc-card--tint.lc-tint-lavender { background: var(--lc-pale-lavender); }
.lc-card--tint.lc-tint-sky { background: var(--lc-sky); }

/* ======================================================================
   SectionHeading
   ====================================================================== */
.lc-heading { display: flex; flex-direction: column; gap: var(--lc-space-3); }
.lc-heading--center { align-items: center; text-align: center; }
.lc-heading__eyebrow { display: inline-flex; }
.lc-heading__title {
  margin: 0;
  font-family: var(--lc-font-display);
  font-weight: var(--lc-weight-extrabold);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.lc-heading--display .lc-heading__title { font-size: var(--lc-text-3xl); text-transform: uppercase; }
.lc-heading--section .lc-heading__title { font-size: var(--lc-text-xl); }
.lc-heading--card .lc-heading__title { font-size: var(--lc-text-lg); }
.lc-heading__title.lc-tone-ink { color: var(--lc-ink); }
.lc-heading__title.lc-tone-blue { color: var(--lc-blue); }
.lc-heading__title.lc-tone-white { color: var(--lc-white); }
.lc-heading__desc {
  margin: 0;
  max-width: 60ch;
  font-family: var(--lc-font-body);
  font-size: var(--lc-text-md);
  line-height: 1.6;
  color: var(--lc-ink-soft);
}
.lc-heading--center .lc-heading__desc { margin-left: auto; margin-right: auto; }

/* ======================================================================
   FeatureItem
   ====================================================================== */
.lc-feature { display: flex; gap: var(--lc-space-3); }
.lc-feature--stack { flex-direction: column; align-items: center; text-align: center; }
.lc-feature--inline { flex-direction: row; align-items: center; }
.lc-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--lc-radius-pill);
  border: 2px solid currentColor;
  flex: none;
}
.lc-feature__icon.lc-tone-blue { color: var(--lc-blue); }
.lc-feature__icon.lc-tone-ink { color: var(--lc-ink); }
.lc-feature__icon-dot { width: 12px; height: 12px; border-radius: 999px; background: currentColor; }
.lc-feature__body { display: flex; flex-direction: column; gap: 2px; }
.lc-feature__label {
  font-family: var(--lc-font-body);
  font-weight: var(--lc-weight-bold);
  font-size: var(--lc-text-sm);
  color: var(--lc-ink);
}
.lc-feature__desc { font-size: var(--lc-text-xs); line-height: 1.5; color: var(--lc-ink-soft); }

/* ======================================================================
   ProductHero  (catalog page layout primitive)
   ====================================================================== */
.lc-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--lc-space-7);
  align-items: center;
  background: var(--lc-white);
  color: var(--lc-ink);
}
.lc-hero--media-left { direction: rtl; }
.lc-hero--media-left > * { direction: ltr; }
.lc-hero__text { display: flex; flex-direction: column; gap: var(--lc-space-4); }
.lc-hero__eyebrow {
  font-family: var(--lc-font-body);
  font-weight: var(--lc-weight-bold);
  font-size: var(--lc-text-sm);
  letter-spacing: 0.02em;
  color: var(--lc-blue);
}
.lc-hero__name {
  margin: 0;
  font-family: var(--lc-font-display);
  font-weight: var(--lc-weight-extrabold);
  font-size: var(--lc-text-3xl);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--lc-ink);
}
.lc-hero__subtitle {
  font-family: var(--lc-font-display);
  font-weight: var(--lc-weight-bold);
  font-size: var(--lc-text-lg);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--lc-blue);
}
.lc-hero__desc {
  margin: 0;
  font-family: var(--lc-font-body);
  font-size: var(--lc-text-md);
  line-height: 1.7;
  color: var(--lc-ink-soft);
  max-width: 46ch;
}
.lc-hero__footer { margin-top: var(--lc-space-2); display: flex; flex-wrap: wrap; gap: var(--lc-space-3); }
.lc-hero__media {
  border-radius: var(--lc-radius-lg);
  overflow: hidden;
  background: var(--lc-surface);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lc-hero__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ======================================================================
   Logo
   ====================================================================== */
.lc-logo { display: inline-flex; align-items: center; line-height: 0; }
.lc-logo__img { display: block; object-fit: contain; }

/* ======================================================================
   ProductCard
   ====================================================================== */
.lc-product {
  display: flex;
  flex-direction: column;
  width: 260px;
  border-radius: var(--lc-radius-lg);
  overflow: hidden;
  background: var(--lc-white);
  border: 1px solid var(--lc-line);
}
.lc-product__media {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lc-product__media--white { background: var(--lc-surface); }
.lc-product__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-product__body { display: flex; flex-direction: column; gap: var(--lc-space-2); padding: var(--lc-space-4); }
.lc-product__name {
  font-family: var(--lc-font-display);
  font-weight: var(--lc-weight-extrabold);
  font-size: var(--lc-text-lg);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--lc-ink);
  line-height: 1.05;
}
.lc-product__subtitle {
  font-family: var(--lc-font-body);
  font-size: var(--lc-text-sm);
  color: var(--lc-ink-soft);
  line-height: 1.4;
}
.lc-product__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.lc-product__caps { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-product__cap {
  font-family: var(--lc-font-body);
  font-weight: var(--lc-weight-semibold);
  font-size: var(--lc-text-xs);
  color: var(--lc-ink-soft);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius-pill);
  padding: 3px 9px;
}
.lc-product__colors { display: flex; gap: 6px; margin-top: 2px; }
.lc-product__dot {
  width: 16px; height: 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* ======================================================================
   SocialCard
   ====================================================================== */
.lc-social {
  position: relative;
  overflow: hidden;
  border-radius: var(--lc-radius-md);
  color: var(--lc-white);
  font-family: var(--lc-font-display);
}
.lc-social__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-social__headline {
  font-weight: var(--lc-weight-extrabold);
  font-size: var(--lc-text-xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.lc-social__sub { font-size: var(--lc-text-sm); font-weight: var(--lc-weight-medium); opacity: 0.95; }
.lc-social__cta {
  align-self: flex-start;
  margin-top: var(--lc-space-2);
  font-weight: var(--lc-weight-bold);
  font-size: var(--lc-text-sm);
  border: 2px solid currentColor;
  border-radius: var(--lc-radius-pill);
  padding: 8px 18px;
}
/* overlay (feed / story) */
.lc-social--overlay .lc-social__overlay { position: absolute; inset: 0; }
.lc-social__bg { position: absolute; inset: 0; }
.lc-social__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--lc-space-2);
  padding: var(--lc-space-5);
  /* legibility scrim — text stays readable over any photo */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.62) 100%);
}
/* split (16:9 banner) */
.lc-social--split { display: flex; }
.lc-social--split .lc-social__media { flex: 1 1 50%; }
.lc-social--split .lc-social__panel {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--lc-space-2);
  padding: var(--lc-space-5);
}