/* ==========================================================================
   경희미르애한의원 광진점 — 화면 보정 (2026-08-05)

   이 파일은 코어를 건드리지 않고 화면만 손보기 위한 자리입니다.
   BaseLayout 이 본문 맨 앞에서 이 파일을 불러오므로, 여기 적은 규칙이 마지막에 적용됩니다.
   되돌리려면 이 파일만 지우면 원래 화면으로 돌아갑니다.

   ── 2026-08-05 2차 (원장님 지적 ①②③) ────────────────────────────────
   화면을 직접 열어 재보고 고쳤습니다. 실측값은 아래 각 항목에 적었습니다.
   ① 오른쪽 세 개(몸을 읽는 관점·저서와 글·초진 상담) 사이가 12px 밖에 안 됐습니다.
      셋의 성격이 다른데(읽는 곳 둘 + 누르는 단추 하나) 그게 보이지 않았습니다.
   ② 로고가 끝나는 자리와 첫 메뉴가 시작하는 자리 사이가 279px 비어 있었습니다.
      로고·메뉴·오른쪽 묶음이 각각 떨어진 섬처럼 보여 허전했습니다.
   ③ 상단 글씨가 전반적으로 작았습니다(메뉴 16px, 초진 상담 단추는 14px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   ② 로고 + 왼쪽 메뉴를 한 덩어리로

   상단 바는 「로고 / 메뉴 / 오른쪽 묶음」 세 덩어리를 양끝으로 밀어 놓는 방식이라,
   가운데가 크게 비어 있었습니다(실측: 로고 오른쪽 끝 421px, 첫 메뉴 시작 700px).
   메뉴를 로고 쪽으로 붙여 「로고 + 메뉴」가 한 묶음으로 읽히게 합니다.
   메뉴 항목은 새로 만들지 않았습니다 — 있는 셋의 자리와 크기만 손봤습니다.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    header > div > nav {
        margin-right: auto;      /* 오른쪽 남는 공간을 몰아주어 메뉴가 로고 쪽에 붙습니다 */
        margin-left: 2.75rem;    /* 로고와 붙어 버리지 않을 만큼만 띄웁니다 */
        gap: 2.5rem;             /* 32px → 40px, 세 항목이 서로 또렷하게 떨어집니다 */
    }

    /* 로고와 메뉴 사이에 가는 세로선 하나 — 두 덩어리의 시작점을 잡아 줍니다. */
    header > div > nav::before {
        content: "";
        align-self: center;
        width: 1px;
        height: 26px;
        margin-right: 0.5rem;
        background: #d9ccbc;
    }

    /* 메뉴 글씨를 키우고 색을 진하게 — 노안에도 읽히도록. */
    header > div > nav button {
        font-size: 1.0625rem;    /* 16px → 17px */
        font-weight: 700;
        color: #191510;
        letter-spacing: -0.012em;
    }
}

/* --------------------------------------------------------------------------
   ① 오른쪽 세 개 — 간격을 벌리고, 성격이 다른 셋을 서로 구분되게

   실측(고치기 전): 몸을 읽는 관점 ↔ 저서와 글 12px, 저서와 글 ↔ 초진 상담 12px.
   게다가 「초진 상담」 단추 글씨가 14px 로, 옆의 맨 글자 메뉴(16px)보다 작았습니다.
   눌러야 할 것이 가장 작았던 셈입니다.

   고친 방향 — 셋을 두 무리로 나눠 보이게 합니다.
     · 「몸을 읽는 관점」·「저서와 글」 = 읽으러 가는 곳 → 밑줄 있는 글자 링크 한 쌍
     · 세로 구분선
     · 「초진 상담」 = 누르는 곳 → 채워진 단추, 가장 크게
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* 세 개를 담고 있는 묶음의 간격을 12px → 26px 로 벌립니다. */
    header div:has(> a[href="/intake"]) {
        gap: 1.625rem;
    }

    /* 읽으러 가는 곳 한 쌍 — 같은 무게, 같은 밑줄로 「짝」임을 보입니다. */
    header a[href="/approach"],
    header a[href="/books"] {
        font-size: 1.0625rem;            /* 16px → 17px */
        font-weight: 700;
        color: #191510;
        letter-spacing: -0.012em;
        padding-bottom: 3px;
        /* 전에는 「저서와 글」에만 굵은 빨간 밑줄이 있어, 지금 보고 있는 페이지 표시처럼
           보였습니다. 둘 다 옅은 밑줄로 바꿔 「링크 한 쌍」으로 읽히게 합니다. */
        box-shadow: inset 0 -1.5px 0 0 #c9b9a7;
        transition: color 0.15s ease, box-shadow 0.15s ease;
    }

    header a[href="/approach"] {
        margin-left: 0;
    }

    header a[href="/approach"]:hover,
    header a[href="/books"]:hover {
        color: #8e2e34;
        box-shadow: inset 0 -1.5px 0 0 #8e2e34;
    }

    /* 누르는 곳 — 셋 중 가장 크고 진하게. 앞의 세로 구분선으로 글자 링크와 갈라 둡니다.
       이 단추는 코어의 `.btn.btn--sm`(0.875rem) 규칙을 함께 쓰고 있어, 화면에서 확인해 보니
       주소로만 집으면 크기가 안 먹는 경우가 있었습니다. 두 가지 방법으로 함께 집습니다. */
    header a[href="/intake"],
    header .btn.btn--sm {
        position: relative;
        font-size: 1rem;                 /* 14px → 16px */
        font-weight: 700;
        padding: 0.625rem 1.25rem;
        letter-spacing: -0.012em;
        box-shadow: 0 2px 10px rgba(142, 46, 52, 0.28);
    }

    header a[href="/intake"]::before {
        content: "";
        position: absolute;
        left: -0.8125rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 22px;
        background: #d9ccbc;
    }
}

/* --------------------------------------------------------------------------
   ③ 우하단 예약 카드와 상담 말풍선이 겹치던 문제

   화면 오른쪽 아래의 상담 말풍선(코어 기능, 60px, 아래·오른쪽에서 24px)이
   예약 카드와 정확히 같은 자리에 떠서 서로 겹쳐 보였습니다(이전 알약 3개 때도
   같은 자리였고, 말풍선이 몇 초 뒤에 나타나 눈에 덜 띄었을 뿐입니다).
   예약 카드를 말풍선 위로 올려 둘이 겹치지 않게 합니다.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    #floating-cta-desktop {
        bottom: 6rem; /* 말풍선(24px + 60px) 위로 */
    }
}

/* --------------------------------------------------------------------------
   ② 로고 — 뭉개져 보이던 문제

   원본 파일(logo-meerae.png, 238×129)보다 더 큰 원본은 저장소에 없습니다.
   해상도가 모자라서가 아니라, 「그림 + 한글 + 영문 한 줄」이 40px 높이에 눌려
   맨 아랫줄이 읽히지 않던 것이라 표시 크기를 키웠습니다.
   2026-08-05 2차 — 옆 메뉴를 17px 로 키운 만큼 로고도 50 → 54px 로 함께 올립니다.
   -------------------------------------------------------------------------- */
header a[href="/"] img {
    height: 54px;
    width: auto;
    max-width: none;
}

@media (max-width: 767px) {
    header a[href="/"] img {
        height: 44px;
    }
}