/* ============================================================
   C-DAY Wellness — brand re-skin over Untitled UI tokens.
   Sage green + warm sand. Pretendard. Calm, healing, warm.
   Loaded AFTER the DS token files so these win.
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root {
  /* ---- Sage (brand) ramp ---- */
  --sage-25:  #f6f8f4;
  --sage-50:  #eef2e9;
  --sage-100: #dce5d2;
  --sage-200: #c2d2b2;
  --sage-300: #a3b98f;
  --sage-400: #849c6e;
  --sage-500: #6c8455;
  --sage-600: #586d44;
  --sage-700: #475838;
  --sage-800: #3a4830;
  --sage-900: #2f3a28;
  --sage-950: #1c2318;

  /* ---- Warm sand / greige neutrals ---- */
  --sand-25:  #fbfaf6;
  --sand-50:  #efede3;
  --sand-100: #ece9e0;
  --sand-200: #e0ddd2;
  --sand-300: #d8c9ac;

  /* warm ink */
  --ink-900: #28261f;
  --ink-800: #36332a;
  --ink-700: #4c4838;
  --ink-600: #65604f;
  --ink-500: #847e6b;
  --ink-400: #a7a08b;

  /* ---- Remap DS brand ramp -> sage ---- */
  --brand-25:  var(--sage-25);
  --brand-50:  var(--sage-50);
  --brand-100: var(--sage-100);
  --brand-200: var(--sage-200);
  --brand-300: var(--sage-300);
  --brand-400: var(--sage-400);
  --brand-500: var(--sage-500);
  --brand-600: var(--sage-600);
  --brand-700: var(--sage-700);
  --brand-800: var(--sage-800);
  --brand-900: var(--sage-900);
  --brand-950: var(--sage-950);

  /* ---- Warm the semantic neutrals ---- */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-tertiary:  var(--ink-600);
  --text-quaternary: var(--ink-500);

  --surface-secondary: var(--sand-50);
  --surface-tertiary:  var(--sand-100);
  --surface-brand-soft: var(--sage-50);

  --border-primary:   #ded6c4;
  --border-secondary: #e8e1d2;
  --border-tertiary:  #f0ebe0;

  --button-primary-bg:       var(--sage-600);
  --button-primary-bg-hover: var(--sage-700);
  --button-secondary-border: #ded6c4;
  --button-secondary-fg:     var(--ink-700);

  --focus-ring: var(--sage-500);
  --text-brand: var(--sage-700);
  --text-brand-secondary: var(--sage-600);
  --fg-brand: var(--sage-600);

  --maxw: 1180px;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--ink-900);
  background: var(--sand-25);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
  letter-spacing: -0.01em;
}
img { display: block; max-width: 100%; }
::selection { background: var(--sage-200); }

/* Korean text wants relaxed leading + word-break for readability */
p, li, .body { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; line-height: 1.72; text-wrap: pretty; }
p strong, p em, p span, li strong, li em, .body strong, .body em { word-break: keep-all; }
h1, h2, h3, h4 { word-break: keep-all; text-wrap: balance; margin: 0; }

/* ---- Layout helpers ---- */
.cd-container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.cd-section { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.cd-section--sand { background: var(--sand-50); }
.cd-section--sage { background: var(--sage-700); color: #fff; }
.cd-section--white { background: var(--sand-25); }

.cd-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sage-600);
}
.cd-eyebrow::before {
  content: ""; width: 22px; height: 1.5px; background: var(--sage-400); display: inline-block;
}
.cd-eyebrow--center { justify-content: center; }

.cd-h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; line-height: 1.28; letter-spacing: -0.025em; }
@media (max-width: 640px) { .cd-h2 { font-size: clamp(23px, 6vw, 30px); } }
.cd-lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-700); line-height: 1.75; }

/* ---- Signature sentence treatment (protected copy) ---- */
.cd-signature {
  font-size: clamp(22px, 2.6vw, 33px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--sage-800);
}
.cd-section--sage .cd-signature { color: #fff; }

/* ---- Number badge ---- */
.cd-num {
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; font-weight: 600;
}

/* ---- Card ---- */
.cd-card {
  background: #fff;
  border: 1px solid var(--border-secondary);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(40,38,31,0.05);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.cd-card--hover:hover {
  box-shadow: 0 12px 28px -8px rgba(40,38,31,0.14);
  transform: translateY(-3px);
  border-color: var(--sage-200);
}

/* ---- Image slot atmosphere ---- */
image-slot {
  --slot-bg: linear-gradient(150deg, var(--sage-100), var(--sand-100));
}

/* ---- Scroll reveal ---- */
.reveal { opacity: 1; transform: none; }
html.cd-armed .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
html.cd-armed .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.cd-armed .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Sticky header ---- */
.cd-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: 13px;
  padding-bottom: 11px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border-secondary);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.cd-header.is-scrolled {
  background: rgba(255,255,255,0.92);
  border-bottom-color: var(--border-primary);
  box-shadow: 0 2px 18px rgba(40,38,31,0.07);
}

/* nice divider dot */
.cd-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sage-300); display: inline-block; }

/* link underline grow */
.cd-link { color: var(--sage-700); font-weight: 600; text-decoration: none; }
.cd-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Tweaks: section density ---- */
body.cd-density-roomy .cd-section { padding-block: clamp(96px, 11vw, 168px); }
body.cd-density-compact .cd-section { padding-block: clamp(52px, 6vw, 92px); }

/* ---- Tweaks: headline font ---- */
body.cd-headline-serif #root h1,
body.cd-headline-serif #root .cd-h2,
body.cd-headline-serif #root .cd-signature {
  font-family: "Nanum Myeongjo", serif;
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* ---- Edit mode ---- */
body.cd-editing #root [contenteditable] {
  outline: 1.5px dashed rgba(108,132,85,0.5);
  outline-offset: 3px; border-radius: 5px; cursor: text;
  transition: outline-color .15s ease, background .15s ease;
}
body.cd-editing #root [contenteditable]:hover { outline-color: var(--sage-500); background: rgba(108,132,85,0.06); }
body.cd-editing #root [contenteditable]:focus { outline: 2px solid var(--sage-600); background: #fff; }
body.cd-editing #root [data-sortable] > * { cursor: grab; }
body.cd-editing #root [data-sortable] > *:hover { outline: 1.5px dashed rgba(108,132,85,0.4); outline-offset: 5px; border-radius: 12px; }
#root .cd-dragging { opacity: 0.45; cursor: grabbing; }

#cd-edit-banner {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 70;
  background: var(--sage-800); color: #fff; padding: 11px 12px 11px 20px; border-radius: 999px;
  font-size: 14px; box-shadow: 0 10px 30px rgba(28,38,20,0.30); display: flex; gap: 14px; align-items: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
}
#cd-edit-banner b { font-weight: 700; }
#cd-edit-banner button {
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--sage-800); background: #fff;
  border: none; border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
#cd-edit-banner button:hover { background: var(--sage-50); }

/* ---- First-care card: PC side-photo / mobile band ---- */
.cd-fc-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
.cd-fc-band { display: none; }
.cd-fc-side { display: block; }

/* ---- Floating quick-contact bar ---- */
/* PC: right-bottom vertical stack */
.cd-fab-pc {
  position: fixed; right: 20px; bottom: 24px; z-index: 45;
  display: flex; flex-direction: column; gap: 10px;
}
.cd-fab-btn {
  width: 64px; height: 64px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; cursor: pointer; border: none;
  font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 11px; font-weight: 700;
  box-shadow: 0 8px 22px -6px rgba(40,38,31,0.32);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.cd-fab-btn span { letter-spacing: -0.02em; line-height: 1; }
.cd-fab-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -6px rgba(40,38,31,0.4); }
.cd-fab-kakao { background: #FEE500; color: #3A1D1D; }
.cd-fab-tel { background: var(--sage-600); color: #fff; }
.cd-fab-tel:hover { background: var(--sage-700); }
.cd-fab-top {
  background: #fff; color: var(--sage-700); border: 1px solid var(--border-primary);
  opacity: 0; transform: translateY(8px); pointer-events: none;
}
.cd-fab-top.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* Mobile: bottom full-width bar */
.cd-fab-mobile { display: none; }
@media (max-width: 860px) {
  .cd-fab-pc { display: none; }
  .cd-fab-mobile {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    box-shadow: 0 -6px 22px -8px rgba(40,38,31,0.26);
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: #fff;
  }
  .cd-fab-m {
    flex: 1 1 0; min-height: 60px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none; font-family: "Pretendard Variable", Pretendard, sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  }
  .cd-fab-m-tel { background: #fff; color: var(--sage-700); border-top: 1px solid var(--border-primary); flex: 0 0 42%; }
  .cd-fab-m-kakao { background: #FEE500; color: #3A1D1D; }
  /* keep footer copy clear of the bottom bar */
  footer { padding-bottom: 76px; }
}