/* ============================================================
   MOOHAE GLOBAL SITE
   SITE.CSS

   PUBLIC SITE
   - index.html
   - care.html
   - diagnosis.html

   FINAL LOGO:
   assets/images/moohae-logo.webp
   ============================================================ */


/* ============================================================
   ROOT
   ============================================================ */

:root {

  --cream:
    #f6f3ed;

  --cream-deep:
    #efebe4;

  --paper:
    #fbfaf7;

  --white:
    #ffffff;

  --ink:
    #292927;

  --ink-soft:
    #4f504c;

  --gray:
    #74756f;

  --gray-light:
    #a7a8a2;

  --sage:
    #8fa88c;

  --sage-dark:
    #667d65;

  --sage-soft:
    #e2e9df;

  --forest:
    #173c2c;

  --blue:
    #47778e;

  --line:
    rgba(
      41,
      41,
      39,
      0.09
    );

  --max:
    1180px;

  --header-height:
    76px;

  --ease:
    cubic-bezier(
      .22,
      1,
      .36,
      1
    );
}


/* ============================================================
   RESET
   ============================================================ */

* {
  box-sizing:
    border-box;
}


html {
  scroll-behavior:
    smooth;
}


body {
  margin:
    0;

  overflow-x:
    hidden;

  background:
    var(--cream);

  color:
    var(--ink);

  font-family:
    "Pretendard Variable",
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

  word-break:
    keep-all;
}


a {
  color:
    inherit;

  text-decoration:
    none;
}


img {
  max-width:
    100%;
}


button,
input,
textarea,
select {
  font:
    inherit;
}


/* ============================================================
   HEADER
   ============================================================ */

.nav {
  position:
    fixed;

  top:
    0;

  left:
    0;

  z-index:
    1000;

  width:
    100%;

  height:
    var(--header-height);

  background:
    rgba(
      246,
      243,
      237,
      .91
    );

  border-bottom:
    1px solid
    rgba(
      41,
      41,
      39,
      .045
    );

  backdrop-filter:
    blur(
      20px
    );

  -webkit-backdrop-filter:
    blur(
      20px
    );

  transition:
    background
      .25s ease,
    border-color
      .25s ease,
    box-shadow
      .25s ease;
}


.nav.scrolled {
  background:
    rgba(
      246,
      243,
      237,
      .98
    );

  border-bottom-color:
    var(--line);

  box-shadow:
    0 5px 24px
    rgba(
      36,
      39,
      33,
      .025
    );
}


.nav-inner {
  display:
    flex;

  align-items:
    center;

  width:
    min(
      var(--max),
      calc(
        100% - 48px
      )
    );

  height:
    100%;

  margin:
    0 auto;
}


/* ============================================================
   FINAL MOOHAE LOGO
   ============================================================ */

.logo {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  width:
    172px;

  height:
    62px;

  overflow:
    visible;
}


.logo img {
  display:
    block;

  width:
    100%;

  height:
    58px;

  object-fit:
    contain;

  object-position:
    left center;

  background:
    transparent;

  border:
    0;

  outline:
    0;

  user-select:
    none;

  -webkit-user-drag:
    none;
}


/* ============================================================
   DESKTOP NAVIGATION
   ============================================================ */

.nav-menu {
  display:
    flex;

  align-items:
    center;

  gap:
    54px;

  margin-left:
    auto;

  color:
    var(--ink-soft);

  font-size:
    14px;

  font-weight:
    650;
}


.nav-menu a {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    42px;

  padding:
    4px 0;

  transition:
    color
      .2s ease;
}


.nav-menu a:hover {
  color:
    var(--ink);
}


.nav-menu a::after {
  content:
    "";

  position:
    absolute;

  bottom:
    4px;

  left:
    50%;

  width:
    0;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(--sage-dark);

  transform:
    translateX(
      -50%
    );

  transition:
    width
      .25s
      var(--ease);
}


.nav-menu a:hover::after {
  width:
    14px;
}


.nav-menu a.active {
  color:
    var(--ink);

  font-weight:
    750;
}


.nav-menu a.active::after {
  width:
    24px;
}


/* ============================================================
   CONSULT CTA
   ============================================================ */

.nav-cta {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  min-width:
    94px;

  min-height:
    42px;

  margin-left:
    42px;

  padding:
    0 22px;

  border-radius:
    999px;

  background:
    var(--ink);

  color:
    #ffffff;

  font-size:
    13px;

  font-weight:
    750;

  white-space:
    nowrap;

  transition:
    transform
      .2s ease,
    background
      .2s ease;
}


.nav-cta:hover {
  transform:
    translateY(
      -1px
    );

  background:
    #1f201e;
}


/* ============================================================
   MOBILE TOGGLE
   ============================================================ */

.mobile-toggle {
  display:
    none;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  width:
    44px;

  height:
    44px;

  margin-left:
    auto;

  padding:
    8px;

  border:
    0;

  border-radius:
    999px;

  background:
    transparent;

  cursor:
    pointer;
}


.mobile-toggle span {
  display:
    block;

  width:
    24px;

  height:
    2px;

  border-radius:
    99px;

  background:
    var(--ink);

  transform-origin:
    center;

  transition:
    transform
      .22s ease,
    opacity
      .18s ease;
}


.mobile-toggle.open span:nth-child(1) {
  transform:
    translateY(
      7px
    )
    rotate(
      45deg
    );
}


.mobile-toggle.open span:nth-child(2) {
  opacity:
    0;
}


.mobile-toggle.open span:nth-child(3) {
  transform:
    translateY(
      -7px
    )
    rotate(
      -45deg
    );
}


/* ============================================================
   MOBILE PANEL
   ============================================================ */

.mobile-panel {
  display:
    none;

  position:
    fixed;

  top:
    var(--header-height);

  right:
    0;

  left:
    0;

  z-index:
    999;

  padding:
    14px 24px 28px;

  background:
    rgba(
      246,
      243,
      237,
      .985
    );

  border-bottom:
    1px solid
    var(--line);

  backdrop-filter:
    blur(
      20px
    );

  -webkit-backdrop-filter:
    blur(
      20px
    );

  box-shadow:
    0 14px 30px
    rgba(
      36,
      39,
      33,
      .05
    );
}


.mobile-panel.open {
  display:
    block;
}


.mobile-panel > a {
  display:
    flex;

  align-items:
    center;

  min-height:
    58px;

  border-bottom:
    1px solid
    var(--line);

  color:
    var(--gray);

  font-size:
    15px;

  font-weight:
    650;
}


.mobile-panel > a.active {
  color:
    var(--ink);

  font-weight:
    800;
}


.mobile-panel .mobile-consult-link {
  justify-content:
    center;

  min-height:
    50px;

  margin-top:
    18px;

  border:
    0;

  border-radius:
    999px;

  background:
    var(--ink);

  color:
    #fff;

  font-weight:
    750;
}


/* ============================================================
   COMMON LAYOUT
   ============================================================ */

.wrap {
  width:
    min(
      var(--max),
      calc(
        100% - 48px
      )
    );

  margin:
    0 auto;
}


.eyebrow {
  margin:
    0 0 17px;

  color:
    var(--sage-dark);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .15em;
}


/* ============================================================
   COMMON BUTTONS
   ============================================================ */

.btn-primary {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    46px;

  padding:
    0 23px;

  border:
    0;

  border-radius:
    999px;

  background:
    var(--ink);

  color:
    #ffffff;

  font-size:
    13px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    transform
      .2s ease,
    background
      .2s ease;
}


.btn-primary:hover {
  transform:
    translateY(
      -1px
    );

  background:
    #1f201e;
}


.btn-text {
  display:
    inline-flex;

  align-items:
    center;

  color:
    var(--blue);

  font-size:
    13px;

  font-weight:
    650;
}


.btn-text::after {
  content:
    " →";

  margin-left:
    3px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  padding:
    78px 24px 52px;

  overflow:
    hidden;

  text-align:
    center;

  background:
    #f1ede6;

  border-top:
    1px solid
    rgba(
      41,
      41,
      39,
      .05
    );

  color:
    var(--gray);
}


/* ============================================================
   FOOTER LOGO
   ============================================================ */

.footer-logo {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    280px;

  margin:
    0 auto 34px;

  overflow:
    visible;
}


.footer-logo img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  max-height:
    150px;

  object-fit:
    contain;

  object-position:
    center;

  background:
    transparent;

  border:
    0;

  user-select:
    none;

  -webkit-user-drag:
    none;
}


.footer-message {
  max-width:
    720px;

  margin:
    0 auto;

  color:
    var(--ink-soft);

  font-size:
    16px;

  line-height:
    1.8;

  letter-spacing:
    -.02em;
}


.footer-brand {
  margin:
    30px 0 0;

  color:
    var(--ink-soft);

  font-size:
    12px;

  font-weight:
    600;
}


.footer-copyright {
  margin:
    19px 0 0;

  color:
    var(--gray-light);

  font-size:
    11px;
}


/* ============================================================
   REVEAL
   ============================================================ */

.reveal {
  opacity:
    0;

  filter:
    blur(
      7px
    );

  transform:
    translateY(
      12px
    );

  transition:
    opacity
      .85s
      var(--ease),
    filter
      .9s
      var(--ease),
    transform
      .9s
      var(--ease);
}


.reveal.in-view {
  opacity:
    1;

  filter:
    none;

  transform:
    none;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (
  max-width:
    920px
) {

  .logo {
    width:
      154px;
  }


  .nav-menu {
    gap:
      32px;

    font-size:
      13px;
  }


  .nav-cta {
    min-width:
      86px;

    margin-left:
      28px;

    padding:
      0 18px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (
  max-width:
    768px
) {

  :root {
    --header-height:
      66px;
  }


  .nav-inner,
  .wrap {
    width:
      calc(
        100% - 32px
      );
  }


  /* ----------------------------------------------------------
     Mobile logo
     ---------------------------------------------------------- */

  .logo {
    width:
      132px;

    height:
      54px;
  }


  .logo img {
    width:
      100%;

    height:
      48px;

    object-fit:
      contain;

    object-position:
      left center;
  }


  .nav-menu,
  .nav-cta {
    display:
      none;
  }


  .mobile-toggle {
    display:
      flex;
  }


  .mobile-panel {
    top:
      var(--header-height);

    padding-right:
      20px;

    padding-left:
      20px;
  }


  /* ----------------------------------------------------------
     Footer
     ---------------------------------------------------------- */

  .footer {
    padding:
      64px 20px 44px;
  }


  .footer-logo {
    width:
      230px;

    margin-bottom:
      28px;
  }


  .footer-logo img {
    max-height:
      125px;
  }


  .footer-message {
    max-width:
      340px;

    font-size:
      14px;

    line-height:
      1.75;
  }


  .footer-brand {
    margin-top:
      25px;

    font-size:
      11px;
  }


  .footer-copyright {
    font-size:
      10px;
  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (
  max-width:
    420px
) {

  .nav-inner {
    width:
      calc(
        100% - 26px
      );
  }


  .logo {
    width:
      120px;

    height:
      50px;
  }


  .logo img {
    height:
      44px;
  }


  .mobile-toggle {
    width:
      40px;

    height:
      40px;
  }


  .footer-logo {
    width:
      210px;
  }

}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (
  max-width:
    350px
) {

  .logo {
    width:
      108px;
  }


  .footer-logo {
    width:
      190px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (
  prefers-reduced-motion:
    reduce
) {

  html {
    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }


  .reveal {
    opacity:
      1;

    filter:
      none;

    transform:
      none;
  }

}

/* ============================================================
   MOOHAE HEADER NAV — CARE / CHECK FINAL
   LOGO = HOME
   2026-09-13
   ============================================================ */

/*
 * 기존 햄버거/모바일 패널 CSS는 다른 코드 안정성을 위해 남겨두되,
 * 현재 site.js에서는 해당 요소를 생성하지 않는다.
 *
 * 실제 상단 노출:
 * LOGO(HOME) / CARE / CHECK
 */

.nav-menu {
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
}

.nav-menu a {
  min-height:38px;
  padding:0;
  white-space:nowrap;
}

.nav-menu a.nav-check-cta {
  min-width:78px;
  min-height:38px;
  justify-content:center;
  padding:0 18px;
  border-radius:999px;
  background:#222222;
  color:#ffffff;
  font-size:12px;
  font-weight:750;
  letter-spacing:.03em;
  box-shadow:none;
  transition:
    transform .2s ease,
    background .2s ease,
    opacity .2s ease;
}

.nav-menu a.nav-check-cta::after {
  display:none;
  content:none;
}

.nav-menu a.nav-check-cta:hover {
  color:#ffffff;
  background:#111111;
  transform:translateY(-1px);
}

.nav-menu a.nav-check-cta.active {
  color:#ffffff;
  background:#222222;
  font-weight:800;
}

/*
 * 더 이상 별도 상담 CTA / 햄버거 / 모바일 패널을 사용하지 않는다.
 * 현재 JS에서는 생성되지 않지만 혹시 남아 있는 마크업도 숨긴다.
 */
.nav-cta,
.mobile-toggle,
.mobile-panel {
  display:none !important;
}


@media(max-width:768px) {

  .nav-inner {
    width:calc(100% - 32px);
  }

  .logo {
    width:118px;
    height:52px;
  }

  .logo img {
    height:44px;
  }

  .nav-menu {
    display:flex !important;
    gap:12px;
    margin-left:auto;
    font-size:12px;
  }

  .nav-menu a {
    min-height:36px;
  }

  .nav-menu a:not(.nav-check-cta) {
    padding:0 2px;
    font-weight:700;
  }

  .nav-menu a.nav-check-cta {
    min-width:68px;
    min-height:36px;
    padding:0 14px;
    font-size:11px;
  }

}


@media(max-width:420px) {

  .nav-inner {
    width:calc(100% - 26px);
  }

  .logo {
    width:108px;
    height:48px;
  }

  .logo img {
    height:40px;
  }

  .nav-menu {
    gap:10px;
    font-size:11px;
  }

  .nav-menu a.nav-check-cta {
    min-width:64px;
    min-height:34px;
    padding:0 12px;
    font-size:10.5px;
  }

}


@media(max-width:350px) {

  .logo {
    width:96px;
  }

  .nav-menu {
    gap:8px;
  }

  .nav-menu a.nav-check-cta {
    min-width:60px;
    padding:0 10px;
  }

}



/* ============================================================
   MOOHAE LOGO SIZE — 2026-09-13
   Visual only: enlarge left navigation logo without changing nav.
   ============================================================ */
.logo {
  width:196px;
  height:66px;
}
.logo img {
  height:64px;
}
@media(max-width:768px) {
  .logo { width:136px; height:54px; }
  .logo img { height:50px; }
}
@media(max-width:420px) {
  .logo { width:124px; height:50px; }
  .logo img { height:46px; }
}
@media(max-width:350px) {
  .logo { width:110px; }
  .logo img { height:42px; }
}