.kareseoul-soft-jelly {
  --ks-jelly-blue: #315ee7;
  --ks-jelly-violet: #7459f7;
  --ks-jelly-lemon: #ffe477;
  --ks-jelly-mint: #dff6ec;
  --ks-jelly-mint-strong: #65d7a6;
  --ks-jelly-apricot: #ffdad0;
  --ks-jelly-coral: #ff795f;
  --ks-jelly-sky: #d8f3ff;
  --ks-jelly-lilac: #e6dfff;
  --ks-jelly-shadow: #cfc5ff;
  --ks-jelly-ease: cubic-bezier(.2, 1.7, .35, 1);
}

.kareseoul-soft-jelly .language-switcher a[aria-current="page"] {
  background: var(--ks-jelly-lemon);
  box-shadow: inset 0 0 0 1px rgba(17, 18, 20, .12);
  color: #111214;
  font-weight: 600;
  text-decoration-thickness: 2px;
}

.kareseoul-soft-jelly .daily-journal-card--lead {
  padding-block: clamp(2rem, 3.5vw, 3.75rem);
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  background: var(--ks-jelly-mint);
}

.kareseoul-soft-jelly .daily-journal-index__list .daily-journal-card--compact {
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.kareseoul-soft-jelly .daily-journal-card--compact:nth-child(odd) {
  background: color-mix(in srgb, var(--ks-jelly-apricot) 58%, #ffffff);
}

.kareseoul-soft-jelly .daily-journal-card--compact:nth-child(even) {
  background: color-mix(in srgb, var(--ks-jelly-mint) 54%, #ffffff);
}

.kareseoul-soft-jelly .tool-card[data-tool-id="beauty-value"] {
  background: var(--ks-jelly-lemon);
}

.kareseoul-soft-jelly .tool-card[data-tool-id="finish-before-pao"] {
  background: var(--ks-jelly-lilac);
}

.kareseoul-soft-jelly .tool-card[data-tool-id="ingredient-difference"] {
  background: var(--ks-jelly-sky);
}

.kareseoul-soft-jelly .home-contact-routes > a:nth-child(1),
.kareseoul-soft-jelly .contact-route:nth-of-type(1) {
  background: color-mix(in srgb, var(--ks-jelly-sky) 58%, #ffffff);
}

.kareseoul-soft-jelly .home-contact-routes > a:nth-child(2),
.kareseoul-soft-jelly .contact-route:nth-of-type(2) {
  background: color-mix(in srgb, var(--ks-jelly-apricot) 55%, #ffffff);
}

.kareseoul-soft-jelly .home-contact-routes > a:nth-child(3),
.kareseoul-soft-jelly .contact-route:nth-of-type(3) {
  background: color-mix(in srgb, var(--ks-jelly-mint) 58%, #ffffff);
}

.kareseoul-soft-jelly .contact-route {
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.kareseoul-soft-jelly .home-contact-routes > .home-contact-routes__private {
  color: var(--ks-ink);
}

.kareseoul-soft-jelly .home-contact-routes__private :is(small, .dashicons) {
  color: var(--ks-ink);
}

.kareseoul-soft-jelly .newsletter-panel {
  border-top: 6px solid var(--ks-jelly-blue);
  box-shadow: 0 18px 48px rgba(49, 94, 231, .08);
}

/* Advertise tells a commercial story without making inventory look editorial. */
.kareseoul-soft-jelly .advertise-page .content-header {
  max-width: 72rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: calc(var(--ks-radius) * 1.2);
  background: color-mix(in srgb, var(--ks-jelly-lilac) 70%, #ffffff);
  box-shadow: 0 20px 55px rgb(116 89 247 / 10%);
}

.kareseoul-soft-jelly .advertise-page__summary {
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgb(17 18 20 / 14%);
  border-radius: var(--ks-radius);
  background: rgb(17 18 20 / 14%);
}

.kareseoul-soft-jelly .advertise-page__summary article {
  min-height: 15rem;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border: 0;
}

.kareseoul-soft-jelly .advertise-page__summary article:nth-child(1) {
  background: var(--ks-jelly-lemon);
}

.kareseoul-soft-jelly .advertise-page__summary article:nth-child(2) {
  background: var(--ks-jelly-sky);
}

.kareseoul-soft-jelly .advertise-page__summary article:nth-child(3) {
  background: var(--ks-jelly-apricot);
}

.kareseoul-soft-jelly .advertise-page .public-info-sections {
  display: grid;
  gap: 1rem;
  border-top: 0;
}

.kareseoul-soft-jelly .advertise-page .public-info-sections > section {
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: var(--ks-radius);
  background: color-mix(in srgb, var(--ks-jelly-mint) 45%, #ffffff);
}

.kareseoul-soft-jelly .advertise-page .public-info-sections > section:nth-child(even) {
  background: color-mix(in srgb, var(--ks-jelly-lilac) 38%, #ffffff);
}

.kareseoul-soft-jelly .advertise-page .commercial-disclosure {
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgb(17 18 20 / 12%);
  border-top: 6px solid var(--ks-jelly-blue);
  background: color-mix(in srgb, var(--ks-jelly-sky) 48%, #ffffff);
  box-shadow: 0 18px 48px rgb(49 94 231 / 8%);
}

/* Article pages keep the reading column calm while the useful moments carry color. */
.kareseoul-soft-jelly .single-page .single-header {
  padding: clamp(2rem, 5vw, 4.75rem);
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: calc(var(--ks-radius) * 1.2);
  background: color-mix(in srgb, var(--ks-jelly-lilac) 64%, #ffffff);
  box-shadow: 0 22px 60px rgb(116 89 247 / 9%);
}

.kareseoul-soft-jelly .single-page .single-featured-image {
  overflow: hidden;
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: calc(var(--ks-radius) * .8);
  box-shadow: 0 24px 64px rgb(17 18 20 / 10%);
}

.kareseoul-soft-jelly .single-page .journal-reading-frame {
  border: 1px solid rgb(17 18 20 / 12%);
  border-top: 6px solid var(--ks-jelly-violet);
  border-radius: var(--ks-radius);
  box-shadow: 0 20px 60px rgb(116 89 247 / 8%);
}

.kareseoul-soft-jelly .single-page .editorial-content > .article-section {
  padding-inline: clamp(.25rem, 2vw, 1.5rem);
}

.kareseoul-soft-jelly .single-page .editorial-content > .article-section h2 {
  position: relative;
}

.kareseoul-soft-jelly .single-page .editorial-content > .article-section h2::before {
  display: block;
  width: 3.25rem;
  height: .38rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--ks-jelly-blue);
  content: "";
}

.kareseoul-soft-jelly .single-page .quick-take {
  border: 1px solid rgb(17 18 20 / 12%);
  border-top: 6px solid var(--ks-jelly-coral);
  border-radius: var(--ks-radius);
  background: color-mix(in srgb, var(--ks-jelly-lemon) 70%, #ffffff);
}

.kareseoul-soft-jelly .single-page .smart-checklist {
  overflow: hidden;
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: var(--ks-radius);
  background: var(--ks-jelly-sky);
  color: var(--ks-ink);
}

.kareseoul-soft-jelly .single-page .smart-checklist :is(h2, p, li) {
  color: var(--ks-ink);
}

.kareseoul-soft-jelly .single-page .smart-checklist li {
  border-color: rgb(17 18 20 / 14%);
}

.kareseoul-soft-jelly .single-page .smart-checklist li::before {
  color: var(--ks-jelly-blue);
}

.kareseoul-soft-jelly .single-page .pause-when {
  border: 1px solid rgb(17 18 20 / 12%);
  border-left: 6px solid var(--ks-jelly-coral);
  border-radius: calc(var(--ks-radius) * .75);
  background: color-mix(in srgb, var(--ks-jelly-apricot) 65%, #ffffff);
}

.kareseoul-soft-jelly .single-page .pause-when h2 {
  color: var(--ks-ink);
}

.kareseoul-soft-jelly .single-page .bottom-line {
  padding: clamp(2rem, 5vw, 3.75rem);
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: var(--ks-radius);
  background: color-mix(in srgb, var(--ks-jelly-mint) 72%, #ffffff);
}

.kareseoul-soft-jelly .single-page .bottom-line h2 {
  color: var(--ks-ink);
}

.kareseoul-soft-jelly .single-page .editorial-safety {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: var(--ks-radius);
  background: color-mix(in srgb, var(--ks-jelly-lilac) 42%, #ffffff);
}

.kareseoul-soft-jelly .single-page .related-reading {
  overflow: hidden;
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: var(--ks-radius);
  background: color-mix(in srgb, var(--ks-jelly-lemon) 25%, #ffffff);
}

.kareseoul-soft-jelly .single-page .related-reading__list li:nth-child(odd) {
  background: color-mix(in srgb, var(--ks-jelly-sky) 58%, #ffffff);
}

.kareseoul-soft-jelly .single-page .related-reading__list li:nth-child(even) {
  background: color-mix(in srgb, var(--ks-jelly-apricot) 52%, #ffffff);
}

.kareseoul-soft-jelly .single-page .journal-trip-close {
  overflow: hidden;
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: var(--ks-radius);
  background: color-mix(in srgb, var(--ks-jelly-mint) 62%, #ffffff);
  box-shadow: 0 20px 55px rgb(101 215 166 / 9%);
}

/* Public utilities each get one stable accent; calculator controls never move. */
.kareseoul-soft-jelly .tool-page--beauty-value {
  --ks-tool-accent: var(--ks-jelly-lemon);
  --ks-tool-accent-strong: #e0b800;
}

.kareseoul-soft-jelly .tool-page--finish-before-pao {
  --ks-tool-accent: var(--ks-jelly-lilac);
  --ks-tool-accent-strong: var(--ks-jelly-violet);
}

.kareseoul-soft-jelly .tool-page--ingredient-difference {
  --ks-tool-accent: var(--ks-jelly-sky);
  --ks-tool-accent-strong: var(--ks-jelly-blue);
}

.kareseoul-soft-jelly .tool-page .tool-page-header {
  padding: clamp(2rem, 5vw, 4.75rem);
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: calc(var(--ks-radius) * 1.2);
  background: color-mix(in srgb, var(--ks-tool-accent, var(--ks-jelly-lilac)) 72%, #ffffff);
  box-shadow: 0 22px 60px rgb(17 18 20 / 7%);
}

.kareseoul-soft-jelly .tool-page .tool-privacy-note {
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border: 1px solid rgb(17 18 20 / 14%);
  border-radius: calc(var(--ks-radius) * .65);
  background: rgb(255 255 255 / 56%);
}

.kareseoul-soft-jelly .tool-page .tool-workspace {
  border: 1px solid rgb(17 18 20 / 14%);
  border-top: 7px solid var(--ks-tool-accent-strong, var(--ks-jelly-blue));
  box-shadow: 0 22px 60px rgb(17 18 20 / 9%);
}

.kareseoul-soft-jelly .tool-page .tool-method {
  padding: clamp(1.15rem, 3vw, 1.9rem);
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: calc(var(--ks-radius) * .7);
  background: color-mix(in srgb, var(--ks-tool-accent, var(--ks-jelly-lilac)) 38%, #ffffff);
}

.kareseoul-soft-jelly .tool-page .tool-editorial .editorial-content {
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
  max-inline-size: none;
}

.kareseoul-soft-jelly .tool-page .tool-editorial .editorial-content > section {
  max-inline-size: 68ch;
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: var(--ks-radius);
  background: color-mix(in srgb, var(--ks-jelly-mint) 38%, #ffffff);
}

.kareseoul-soft-jelly .tool-page .tool-editorial .editorial-content > section:nth-of-type(even) {
  margin-inline-start: auto;
  background: color-mix(in srgb, var(--ks-jelly-lilac) 34%, #ffffff);
}

.kareseoul-soft-jelly .tool-page .tool-editorial .editorial-safety {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: var(--ks-radius);
  background: color-mix(in srgb, var(--ks-jelly-apricot) 40%, #ffffff);
}

.kareseoul-soft-jelly .tool-page .tool-related {
  overflow: hidden;
  border: 1px solid rgb(17 18 20 / 12%);
  border-radius: var(--ks-radius);
}

.kareseoul-soft-jelly .tool-page .tool-related li:nth-child(odd) {
  background: color-mix(in srgb, var(--ks-jelly-sky) 58%, #ffffff);
}

.kareseoul-soft-jelly .tool-page .tool-related li:nth-child(even) {
  background: color-mix(in srgb, var(--ks-jelly-apricot) 52%, #ffffff);
}

.kareseoul-soft-jelly .tool-page .tool-trip-note {
  border: 1px solid rgb(17 18 20 / 12%);
  background: color-mix(in srgb, var(--ks-jelly-mint) 65%, #ffffff);
  box-shadow: 0 20px 55px rgb(101 215 166 / 9%);
}

.kareseoul-soft-jelly :is(
  .button--primary,
  .tool-actions .button,
  .newsletter-panel input[type="submit"],
  .newsletter-panel button[type="submit"],
  .share-chip,
  .menu-toggle,
  .language-switcher a,
  .cookie-consent button
) {
  min-height: 44px;
  transform-origin: 50% 65%;
  transition:
    transform 300ms var(--ks-jelly-ease),
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.kareseoul-soft-jelly :is(
  .button--primary,
  .newsletter-panel input[type="submit"],
  .newsletter-panel button[type="submit"],
  .share-chip--primary,
  .cookie-consent__accept,
  [data-consent-save]
) {
  background: var(--ks-jelly-blue);
  border-color: transparent;
  box-shadow: 0 7px 0 var(--ks-jelly-shadow), 0 14px 28px rgba(49, 94, 231, .18);
  color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  .kareseoul-soft-jelly :is(
    .button--primary,
    .tool-actions .button,
    .newsletter-panel input[type="submit"],
    .newsletter-panel button[type="submit"],
    .share-chip,
    .menu-toggle,
    .language-switcher a,
    .cookie-consent button
  ):not(:disabled):hover {
    transform: translateY(-2px) scaleX(1.025) scaleY(.975);
  }

  .kareseoul-soft-jelly :is(
    .daily-journal-card,
    .tool-card
  ):hover {
    transform: translateY(-2px);
  }
}

.kareseoul-soft-jelly :is(
  .button--primary,
  .tool-actions .button,
  .newsletter-panel input[type="submit"],
  .newsletter-panel button[type="submit"],
  .share-chip,
  .menu-toggle,
  .language-switcher a,
  .cookie-consent button
):not(:disabled):active {
  transform: translateY(2px) scaleX(.95) scaleY(1.065);
  box-shadow: 0 2px 0 var(--ks-jelly-shadow), 0 5px 12px rgba(49, 94, 231, .12);
}

.kareseoul-soft-jelly :is(
  .button--primary,
  .tool-actions .button,
  .newsletter-panel input[type="submit"],
  .newsletter-panel button[type="submit"],
  .share-chip,
  .menu-toggle,
  .language-switcher a,
  .cookie-consent button
):focus-visible {
  outline: 3px solid #111214;
  outline-offset: 4px;
}

.kareseoul-soft-jelly :is(button, input[type="submit"]):disabled {
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .kareseoul-soft-jelly :is(
    .button--primary,
    .tool-actions .button,
    .newsletter-panel input[type="submit"],
    .newsletter-panel button[type="submit"],
    .share-chip,
    .menu-toggle,
    .language-switcher a,
    .cookie-consent button,
    .daily-journal-card,
    .tool-card
  ) {
    transition-duration: 0.01ms;
    transform: none;
  }
}

@media (max-width: 900px) {
  .kareseoul-soft-jelly .daily-journal-card--lead {
    padding-block: clamp(2.75rem, 6vw, 3.5rem);
  }
}

@media (max-width: 760px) {
  .kareseoul-soft-jelly .language-switcher {
    gap: clamp(6px, 2vw, 12px);
    max-width: 100%;
    overflow-wrap: normal;
  }

  .kareseoul-soft-jelly .language-switcher a {
    min-width: 44px;
    padding-inline: 8px;
    text-align: center;
    white-space: nowrap;
  }

  .kareseoul-soft-jelly .newsletter-panel,
  .kareseoul-soft-jelly .newsletter-panel__copy,
  .kareseoul-soft-jelly .newsletter-panel__form,
  .kareseoul-soft-jelly .newsletter-provider,
  .kareseoul-soft-jelly .newsletter-provider form {
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .kareseoul-soft-jelly .language-switcher {
    gap: 4px;
  }

  .kareseoul-soft-jelly .language-switcher a {
    min-width: 42px;
    padding-inline: 6px;
  }
}