/* ============================================================
   내 건강 주치의 (/doctor/)
   말풍선·보기 버튼 등 채팅 요소는 main/index_style.css 를 그대로 쓴다.
   여기에는 이 페이지에만 있는 것 — 상단바, 아는 것 시트, 처방 시트 — 만 둔다.
   ============================================================ */

.md-page {
    /* 대화 화면은 흰 바탕이다 (진료 화면 .content02 와 같다).
       회색 바탕 위에 흰 카드를 얹으면 «문서» 처럼 보이는데,
       대화는 종이가 아니라 이야기라서 바탕이 비어 있는 편이 낫다. */
    background: #fff;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------- 셸 ----------
   메뉴(common/app_nav.php)는 index.php 와 같은 것을 쓴다.
   그래서 본문 위치도 index.php 의 .main-content 와 똑같이 비켜준다:
   데스크톱은 왼쪽 사이드바만큼, 모바일은 위 앱바(58px)와 아래 탭바만큼. */
.md-shell {
    margin-left: var(--sb-w);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.22s ease;
}
body.sb-collapsed .md-shell { margin-left: var(--sb-w-c); }

/* ---------- 상단바 ----------
   생김새와 높이는 main/index_style.css 의 «.top-bar, .md-bar» 에서 함께 정한다.
   진료 화면과 같은 헤더여야 하는데 여기서 따로 적어 두었더니 어긋났었다.
   여기에는 이 페이지에만 있는 것(오른쪽 아이콘 버튼)만 둔다. */
.md-icon {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    color: var(--ink-2); font-size: 17px; text-decoration: none;
    border-radius: 12px;
}
.md-icon:hover  { background: #eef3f8; color: var(--ink); }
.md-icon:active { background: #e4ebf2; }

/* ---------- 본문 ---------- */
.md-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}
.md-chat {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    /* 스크롤바는 평소에 보이지 않게 둔다. 대화 옆에 회색 막대가 늘 서 있으면
       거슬리고, 그렇다고 없애 버리면 «더 있는지» 알 길이 없다.
       그래서 «자리는 그대로 두고 색만» 지운다 — 폭이 바뀌면 글이 좌우로 튄다.
       마우스를 올리면 옅게 나타난다. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.md-chat::-webkit-scrollbar { width: 10px; }
.md-chat::-webkit-scrollbar-track { background: transparent; }
.md-chat::-webkit-scrollbar-thumb {
    background: transparent;
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 8px;
    transition: background 0.18s ease;
}
.md-chat:hover { scrollbar-color: #cfd9e4 transparent; }
.md-chat:hover::-webkit-scrollbar-thumb { background: #cfd9e4; background-clip: content-box; }
.md-input {
    flex: 0 0 auto;
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
    /* 대화 바탕이 흰색이 되었으니 여기도 흰색에서 옅어진다.
       회색으로 두면 입력칸 위에 경계선이 그어진 것처럼 보인다. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 22%);
}

/* 첫 화면 안내 카드 */
.md-hello {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-1);
}
.md-hello h2 {
    font-size: 1.02rem; font-weight: 800; letter-spacing: -0.03em;
    margin-bottom: 8px; color: var(--ink);
}
.md-hello p {
    font-size: 0.87rem; color: var(--ink-2); line-height: 1.65;
    word-break: keep-all; overflow-wrap: break-word;
}
.md-chips {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.md-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.76rem; font-weight: 700; color: var(--brand-deep);
    background: var(--brand-soft); border-radius: 999px; padding: 6px 11px;
}
.md-tag.off { color: var(--ink-3); background: #f4f7fa; }

/* ---------- 지난 대화 ---------- */
/* 회차가 바뀌는 자리. 한 덩어리로 이어 붙이면 어제 한 이야기와
   오늘 할 이야기가 뒤섞여 보인다. */
.md-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 2px;
    color: var(--ink-3); font-size: 0.72rem; font-weight: 700;
}
.md-divider::before,
.md-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--line-soft);
}
.md-divider span { flex: 0 0 auto; white-space: nowrap; }

/* 주치의가 먼저 건 말(브리핑)임을 밝힌다.
   평소 답변과 같아 보이면, 알림을 받고 들어온 사람이 무엇을 보러 왔는지 못 찾는다. */
.md-first {
    display: inline-flex; align-items: center;
    margin-bottom: 6px; padding: 3px 9px; border-radius: 999px;
    background: var(--brand-soft); color: var(--brand-deep);
    font-size: 0.68rem; font-weight: 800;
}

/* ---------- 바닥 시트 (아는 것 · 처방) ---------- */
.md-sheet { position: fixed; inset: 0; z-index: 1400; }
.md-sheet[hidden] { display: none; }
.md-sheet-bg { position: absolute; inset: 0; background: rgba(14, 27, 44, 0.45); }
.md-sheet-box {
    position: absolute; inset: auto 0 0 0;
    background: #fff;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
    max-height: 86vh; overflow-y: auto;
    max-width: 560px; margin: 0 auto;
    animation: mdUp 0.24s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes mdUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .md-sheet-box { animation: none; } }

.md-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.md-sheet-head strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.03em; }

.md-know { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.md-know li {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.89rem; color: var(--ink-2);
}
.md-know li i { color: var(--brand); width: 18px; text-align: center; }
.md-know li b { margin-left: auto; color: var(--ink); font-weight: 800; }

.md-fill { margin-top: 18px; }
.md-fill-top {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.84rem; color: var(--ink-2); margin-bottom: 7px;
}
.md-fill-top b { font-size: 1.05rem; font-weight: 800; color: var(--brand-deep); }
.md-fill-bar { height: 8px; border-radius: 999px; background: #eef3f8; overflow: hidden; }
.md-fill-bar i { display: block; height: 100%; background: var(--brand-grad); border-radius: 999px; }
.md-fill p { font-size: 0.78rem; color: var(--ink-3); margin-top: 8px; line-height: 1.6; word-break: keep-all; }

.md-sheet-acts { display: flex; gap: 8px; margin-top: 18px; }
.md-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid var(--line);
    font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
    background: #fff; color: var(--ink-2); text-decoration: none;
}
.md-btn.primary {
    background: var(--brand-grad); color: #fff; border-color: transparent; font-weight: 800;
    box-shadow: var(--shadow-brand);
}
.md-btn:disabled { opacity: 0.55; cursor: default; }

/* ---------- 처방 입력 ---------- */
.md-rx-note { font-size: 0.82rem; color: var(--ink-3); margin-bottom: 14px; line-height: 1.6; }
.md-field { margin-bottom: 12px; }
.md-field.two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.md-field label {
    display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px;
}
.md-field input {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    font-family: inherit; font-size: 0.95rem; color: var(--ink);
    background: #f7fafc; outline: none;
}
.md-field input:focus { border-color: var(--brand); background: #fff; }

/* ---------- 로그인 · 준비 중 안내 ---------- */
.md-gate {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 18px 60px;
}
.md-gate-box {
    background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
    box-shadow: var(--shadow-1); padding: 32px 24px; max-width: 420px; width: 100%; text-align: center;
}
.md-gate-icon {
    width: 62px; height: 62px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 20px; background: var(--brand-soft); color: var(--brand); font-size: 26px;
}
.md-gate-icon.warn { background: var(--warn-soft); color: var(--warn); }
.md-gate-box h1 {
    font-size: 1.18rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; color: var(--ink);
}
.md-gate-box p {
    font-size: 0.88rem; color: var(--ink-2); line-height: 1.7;
    word-break: keep-all; overflow-wrap: break-word;
}
.md-gate-box code {
    background: #f4f7fa; border-radius: 6px; padding: 2px 6px; font-size: 0.85em;
}
/* 말풍선(.sso-last)이 위 버튼에 닿지 않게 조금 더 띄운다 */
.md-gate-social { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 16px; }
.md-social {
    display: block; padding: 14px; border-radius: var(--r-sm);
    font-size: 0.92rem; font-weight: 700; text-decoration: none; text-align: center;
}
.md-social.naver  { background: #03c75a; color: #fff; }
.md-social.kakao  { background: #fee500; color: #191600; }
.md-social.google { background: #fff; color: #3c4043; border: 1px solid var(--line); }
.md-gate-sub { font-size: 0.82rem !important; color: var(--ink-3) !important; }
.md-gate-sub a { color: var(--brand-deep); font-weight: 700; }

/* ---------- 보낼 사진 미리보기 ---------- */
.md-attach {
    display: flex; align-items: center; gap: 11px;
    background: #fff; border: 1px solid var(--line-soft);
    border-radius: var(--r-sm); padding: 9px 10px; margin-bottom: 8px;
    box-shadow: var(--shadow-1);
}
.md-attach[hidden] { display: none; }
.md-attach img {
    width: 46px; height: 46px; flex: 0 0 auto;
    object-fit: cover; border-radius: 10px; background: #eef3f8;
}
.md-attach-txt { flex: 1; min-width: 0; line-height: 1.35; }
.md-attach-txt strong { display: block; font-size: 0.82rem; font-weight: 800; color: var(--ink); }
.md-attach-txt span {
    display: block; font-size: 0.74rem; color: var(--ink-3);
    word-break: keep-all; overflow-wrap: break-word;
}
.md-attach-x {
    width: 30px; height: 30px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: none; background: #f2f6fa; border-radius: 9px;
    color: var(--ink-3); cursor: pointer;
}

/* 「진료 받으러 가기」 — 주치의가 진료를 권하며 맺었을 때만 나온다.
   말로만 권하고 끝내면 어디로 가야 하는지 다시 찾아야 한다. */
.md-goto { display: flex; margin: 2px 0 4px; }
.md-goto-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px;
    background: var(--brand-grad); color: #fff;
    font-size: 0.88rem; font-weight: 800; text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 184, 148, 0.28);
}
.md-goto-btn:active { transform: scale(0.97); }

/* ---------- 말풍선 ----------
   AI 진료 화면(main/consult.css)과 같은 결로 맞춘다.
   같은 앱인데 두 대화 화면이 다르게 생기면 다른 서비스처럼 보인다.

   AI 말에는 «상자를 두르지 않는다».
   답이 길어질수록 상자가 화면을 가득 채워 답답해지고, 상자 안의 글은
   «인용문» 처럼 읽혀 말을 거는 느낌이 사라진다. 대신 왼쪽에 동그란
   얼굴을 두어 누가 하는 말인지 알린다.

   얼굴은 /img/bot.webp 다 (원본 img/bot.png 를 192px 로 줄여 만들었다 —
   32px 로 보이니 6배까지 여유가 있다. 19.8KB → 1.9KB).
   ⚠ 그림을 바꿀 때는 아래 ::before 의 background-image 만 갈아 끼운다.
     크기·자리는 그대로 쓴다. */
.md-chat .chat-message {
    max-width: 100%;
    animation: bubbleIn 0.25s ease both;
}

.md-chat .chat-message.ai {
    position: relative;
    /* 오른쪽 끝까지 가지 않는다.
       거기는 «내가 말하는 자리» 다. 봇의 글이 그 끝까지 닿으면
       누가 한 말인지 한눈에 안 갈리고, 한 줄도 너무 길어진다. */
    align-self: flex-start;
    max-width: 86%;
    padding: 2px 0 2px 44px;      /* 왼쪽은 얼굴 자리 */
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    font-size: 0.96rem;
    line-height: 1.78;
    color: var(--ink);
}
.md-chat .chat-message.ai::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand-soft) url('/img/bot.webp') center / cover no-repeat;
    /* 그림 바탕이 흰색에 가까워서 흰 화면 위에서는 경계가 안 보인다.
       테두리를 아주 옅게 둘러 동그라미가 있다는 걸 알린다. */
    box-shadow: inset 0 0 0 1px rgba(10, 155, 181, 0.18);
}

/* 사람 말 — 부드러운 상자. 초록 그라디언트는 길어지면 눈이 아프다.
   (진료 화면의 .cx-me-box 와 같은 값) */
.md-chat .chat-message.user {
    align-self: flex-end;
    max-width: 82%;
    background: var(--brand-soft);
    color: #14493d;
    padding: 10px 14px;
    border-radius: 18px 18px 5px 18px;
    box-shadow: none;
    font-size: 0.94rem;
    line-height: 1.6;
}

/* 보기 버튼 묶음 — 상자가 없어졌으니 위 구분선도 뺀다.
   상자 안이 아니라 글 아래에 그냥 놓이는 자리가 됐다. */
.md-chat .chat-message.ai /* 「직접 입력할게요」 류 — 답이 아니라 탈출구다.
   테두리를 점선으로 두어 «고르는 것» 이 아니라 «빠져나가는 것» 임을 알린다. */
.inline-choice-btn.free {
    color: var(--ink-3);
    border-style: dashed;
    font-weight: 650;
}
.inline-choice-btn.free:hover { color: var(--ink-2); }

.md-opts { border-top: 0; padding-top: 0; margin-top: 12px; }

/* 좁은 화면 — 얼굴을 «글 위» 로 올린다.
   폰에서는 얼굴이 왼쪽을 44px 먹고 오른쪽 여백까지 겹쳐서, 정작 글이
   지나가는 폭이 300px 남짓밖에 안 됐다. 한 줄에 스무 자도 안 들어간다.
   얼굴을 한 줄 위로 올리면 글이 화면을 그대로 쓴다.

   ⚠ 이 경계선(640px)은 앱바로 바뀌는 991px 과 다르다.
     저건 «어떤 메뉴를 쓸까», 이건 «글이 지나갈 폭이 되는가» 라 기준이 다르다.
     태블릿(768px)에서는 옆에 두어도 넉넉하다. */
@media (max-width: 640px) {
    .md-chat .chat-message.ai {
        max-width: 100%;
        /* 글만 6px 안으로 들인다. 얼굴은 동그라미라서 왼쪽 끝이 «가운데 높이»
           한 점뿐이고, 글의 반듯한 왼쪽 선을 같은 자리에 두면 글이 더 왼쪽에서
           시작하는 것처럼 보인다. 눈에 맞춘 값이다. */
        padding: 0 0 2px 6px;
    }
    .md-chat .chat-message.ai::before {
        position: static;
        display: block;
        margin-bottom: 7px;
        margin-left: -6px;      /* 얼굴은 원래 자리에 그대로 둔다 */
    }
}

/* ---------- 운동 코치 ----------
   «다른 사람» 으로 보여야 하지만 «다른 화면» 으로 보이면 안 된다.
   같은 대화에 이어 붙은 한 덩어리로 둔다. */
.md-coach {
    align-self: stretch;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-left: 3px solid #7b61ff;          /* 주치의(초록)와 구분되는 한 줄 */
    border-radius: 14px;
    padding: 13px 15px;
    box-shadow: var(--shadow-1);
}
.md-coach.loading { opacity: 0.7; }
.md-coach-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.md-coach-ava {
    width: 26px; height: 26px; flex: 0 0 auto; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: #efecff; color: #6a4ff5; font-size: 12px;
}
.md-coach-h b { font-size: 0.86rem; font-weight: 800; color: var(--ink); }
.md-coach-h small { font-size: 0.74rem; color: var(--ink-3); font-weight: 600; }
.md-coach-say {
    font-size: 0.9rem; line-height: 1.65; color: var(--ink);
    word-break: keep-all; overflow-wrap: break-word;
}

/* ---------- 영양 코치 ----------
   운동 코치와 «같은 껍데기» 를 쓴다 (.md-coach-h · .md-coach-say 를 그대로).
   한 줄 색만 다르다 — 다른 사람이지만 다른 화면은 아니다. */
.md-nutri {
    align-self: stretch;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-left: 3px solid #f0883e;          /* 운동(보라)·주치의(초록)와 구분되는 한 줄 */
    border-radius: 14px;
    padding: 13px 15px;
    box-shadow: var(--shadow-1);
}
.md-nutri.loading { opacity: 0.7; }
.md-coach-ava.nu { background: #fff1e4; color: #d9741f; }

/* 무엇을 보고 골랐는지 — 근거를 안 보여주면 광고와 구분이 안 된다 */
.md-nutri-looked {
    margin-bottom: 10px; padding: 8px 10px;
    background: #f7f9fc; border-radius: 8px;
    font-size: 0.75rem; line-height: 1.55; color: var(--ink-3);
    word-break: keep-all;
}
.md-nutri-looked i { margin-right: 4px; }
.md-nutri-looked.thin { background: #fff8f1; color: #8a5520; }

/* 무슨 약을 드시는지 몰라 좁게 골랐다는 사실 — 숨기면 «왜 이것뿐이지» 가 된다 */
.md-nutri-ask {
    margin-top: 12px; padding: 9px 11px;
    background: #fff8f1; border-radius: 9px;
    font-size: 0.78rem; line-height: 1.6; color: #8a5520;
    word-break: keep-all;
}
.md-nutri-ask i { margin-right: 4px; }
.md-nutri-ask b { font-weight: 800; }

/* ⚠ 법에 정해진 문구. 작지만 반드시 보이는 자리에 둔다 */
.md-nutri-law {
    margin-top: 10px; padding-top: 9px;
    border-top: 1px dashed var(--line-soft);
    font-size: 0.72rem; line-height: 1.5; color: var(--ink-3);
    word-break: keep-all;
}

/* ---------- 성분 카드 ---------- */
.md-supp {
    margin-top: 12px;
    background: #f7f9fc;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 13px 15px;
}
.md-supp-h {
    display: flex; align-items: center; gap: 7px;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
}
.md-supp-h b { font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.md-supp-h em {
    font-style: normal; font-size: 0.7rem; font-weight: 700;
    padding: 2px 7px; border-radius: 999px;
    background: #fff1e4; color: #d9741f;
}
/* «왜 이 사람에게인지» 가 맨 위다. 이름만 있으면 광고와 구분이 안 된다. */
.md-supp-why {
    font-size: 0.84rem; line-height: 1.6; color: #d9741f; font-weight: 700;
    margin-bottom: 8px; word-break: keep-all;
}
.md-supp-why i { font-size: 0.7rem; transform: rotate(90deg); margin-right: 2px; }
.md-supp-sum {
    font-size: 0.82rem; line-height: 1.6; color: var(--ink-2);
    margin-bottom: 10px; word-break: keep-all;
}
/* 조심할 것은 접지 않는다 — 접어 두면 아무도 안 편다 */
.md-supp-warn {
    margin-top: 10px; padding: 9px 11px;
    background: #fff5f5; border-radius: 9px;
    font-size: 0.78rem; line-height: 1.6; color: #b4232f;
    word-break: keep-all;
}
.md-supp-warn i { margin-right: 4px; }

.md-supp-act { margin-top: 11px; }
.md-supp-add {
    width: 100%; padding: 11px 14px;
    border: 0; border-radius: 10px;
    background: #f0883e; color: #fff;
    font-family: inherit; font-size: 0.85rem; font-weight: 800;
    cursor: pointer; transition: background 0.15s;
}
.md-supp-add:hover { background: #dd7529; }
.md-supp-add:disabled { opacity: 0.6; cursor: default; }
.md-supp-add.done { background: #e8f5ee; color: var(--brand-deep); }

/* ---------- 상품 ----------
   운동의 «영상» 과 같은 자리. 없어도 성분 추천은 그대로 선다. */
.md-prods { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.md-prod {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; text-decoration: none;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 10px;
    transition: border-color 0.15s;
}
a.md-prod:hover { border-color: #f0883e; }
.md-prod-img {
    width: 52px; height: 52px; flex: 0 0 auto; border-radius: 8px;
    overflow: hidden; background: var(--line-soft);
    display: flex; align-items: center; justify-content: center;
}
.md-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.md-prod-img.no { color: var(--ink-3); font-size: 15px; }
.md-prod-meta { flex: 1; min-width: 0; line-height: 1.4; }
.md-prod-meta em {
    display: block; font-style: normal;
    font-size: 0.7rem; font-weight: 700; color: var(--ink-3);
}
.md-prod-meta b {
    display: block; font-size: 0.83rem; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-prod-meta span { display: block; font-size: 0.72rem; color: var(--ink-3); margin-top: 1px; }
.md-prod-meta strong { display: block; font-size: 0.82rem; font-weight: 800; color: var(--ink); margin-top: 2px; }
.md-prod-go { flex: 0 0 auto; font-size: 0.7rem; color: var(--ink-3); }

/* 우리 샵에서 파는 상품 — 누를 곳이 둘이다 (보기 · 담기). 한 줄 아래에 놓는다 */
.md-prod.shop { flex-wrap: wrap; }
.md-prod-acts { display: flex; gap: 6px; flex: 0 0 100%; margin-top: 2px; }
.md-prod-btn {
    flex: 1 1 0; padding: 7px 10px; border-radius: 8px; text-align: center;
    border: 1px solid var(--line-soft); background: #fff; color: var(--ink-2);
    font-family: inherit; font-size: 0.76rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.md-prod-btn:hover { border-color: #f0883e; color: #d9741f; }
.md-prod-btn.add { background: #f0883e; border-color: #f0883e; color: #fff; }
.md-prod-btn.add:hover { background: #dd7529; }
.md-prod-btn.add:disabled { opacity: 0.55; cursor: default; }
.md-prod-btn.add.done { background: #e8f5ee; border-color: #e8f5ee; color: var(--brand-deep); }
.md-prod .md-supp-warn { flex: 0 0 100%; margin: 4px 0 0; }

/* ---------- 계획 카드 ----------
   줄마다 «무엇을 / 얼마나 / 언제까지 / 판정» 을 끊어 놓는다.
   문장으로 늘어놓으면 읽다가 놓친다. 표처럼 보이는 편이 지키기 쉽다. */
.md-plan {
    margin-top: 12px;
    background: #f7f9fc;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 13px 15px;
}
/* 대화 위쪽에 홀로 붙는 경우 (들어오자마자 보이는 «지금 하는 것») */
.md-plan-h {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
}
.md-plan-h i { color: var(--brand); font-size: 13px; }
.md-plan-h b { font-size: 0.92rem; font-weight: 800; color: var(--ink); }

.md-plan-rows { display: flex; flex-direction: column; gap: 7px; }
.md-plan-rows > div { display: flex; align-items: baseline; gap: 10px; }
.md-plan-rows dt {
    /* 「언제까지」·「기능성」 넉 자가 한 줄에 들어가야 한다.
       52px 이던 시절 「인정된 기능」이 «인정된 기 / 능» 으로 꺾였다.
       nowrap 은 라벨이 길어져도 낱말 한가운데서 안 꺾이게 하는 안전장치다. */
    flex: 0 0 58px;
    white-space: nowrap;
    font-size: 0.75rem; font-weight: 700; color: var(--ink-3);
}
.md-plan-rows dd {
    flex: 1; min-width: 0;
    font-size: 0.84rem; font-weight: 600; color: var(--ink);
    word-break: keep-all; line-height: 1.5;
}

/* 「지난 N일 중 M일 함」 — 문장은 서버(pl_check_line)가 만든 것을 그대로 쓴다 */
.md-plan-stat {
    margin: 0; font-size: 0.76rem; font-weight: 700; color: var(--ink-2);
}

/* 계획 화면으로 가는 문 — 오늘 체크·기간 바꾸기는 거기 있다 */
.md-plan-go {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 10px;
    font-size: 0.78rem; font-weight: 700; color: var(--brand-deep);
    text-decoration: none;
}
.md-plan-go i { font-size: 0.62rem; }
.md-plan-go:hover { text-decoration: underline; }

/* 이미 하는 계획 — 카드를 또 세우지 않고 한 줄로 짚는다 (askCoach · already).
   카드는 코치가 처음 말한 자리에 이미 서 있다. */
.md-plan-already {
    margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    font-size: 0.84rem; line-height: 1.5; color: var(--ink-2);
    word-break: keep-all;
}
.md-plan-already > i { color: var(--brand); font-size: 12px; }
.md-plan-already b { font-weight: 800; color: var(--ink); }
.md-plan-already span::before { content: '·'; margin-right: 8px; color: var(--ink-3); }
.md-plan-already .md-plan-go { margin-top: 0; margin-left: auto; }

/* 만기일에 묻는 자리 */
.md-plan-ask { align-self: stretch; margin-top: 8px; }
.md-plan-ask p {
    font-size: 0.88rem; font-weight: 700; color: var(--ink); margin-bottom: 8px;
    word-break: keep-all;
}
.md-plan-btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- 운동 영상 ----------
   말로만 «인터벌 걷기» 라고 하면 무엇을 어떻게 하라는 건지 알 수 없다.
   눌러야 재생기로 바뀐다 — 처음부터 유튜브 틀을 심으면 화면이 무겁고,
   보지도 않은 사람의 기록이 유튜브로 넘어간다. */
.md-vids { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.md-vid {
    border-radius: 12px;
    background: #fff; border: 1px solid var(--line-soft);
    overflow: hidden;
}
/* 누르기 «전» 도 재생기와 같은 크기다.
   작은 조각으로 두면 목록 한 줄처럼 보여서, 눌러서 커진다는 걸 아무도 모른다. */
.md-vid-face {
    display: block; width: 100%;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-family: inherit; text-align: left; text-decoration: none; color: inherit;
}
.md-vid-face:hover .md-vid-thumb img { transform: scale(1.03); }
.md-vid-face:hover .md-vid-thumb i { background: #e0364a; }
.md-vid-thumb {
    position: relative; display: block;
    width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    background: #0e1b2c;
}
.md-vid-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.25s ease;
}
/* 길이는 그림 위 오른쪽 아래에 — 유튜브와 같은 자리라 설명이 필요 없다 */
.md-vid-len {
    position: absolute; right: 7px; bottom: 7px;
    padding: 2px 6px; border-radius: 5px;
    background: rgba(0, 0, 0, 0.78); color: #fff;
    font-size: 0.68rem; font-weight: 700; font-style: normal; letter-spacing: -0.01em;
}
.md-vid-thumb i {
    position: absolute; inset: 0; margin: auto;
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(14, 27, 44, 0.72); color: #fff; font-size: 17px;
    padding-left: 3px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
}
/* 영상 번호를 못 뽑은 것 — 여기서는 못 트니 그림도 없다 */
.md-vid-no {
    display: flex; width: 100%; aspect-ratio: 16 / 9;
    align-items: center; justify-content: center;
    background: #eef3f8; color: var(--ink-3); font-size: 20px;
}
.md-vid-meta { padding: 10px 12px 11px; line-height: 1.45; }
.md-vid-meta b {
    display: block; font-size: 0.87rem; font-weight: 700; color: var(--ink);
    word-break: keep-all;
}
.md-vid-meta span { display: block; font-size: 0.75rem; color: var(--ink-3); margin-top: 3px; }

/* 재생 중 — 채팅창 안에서 그대로 본다 */
.md-vid.playing { border-color: var(--line); }
.md-vid-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.md-vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.md-vid-cap {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px;
}
.md-vid-cap b {
    flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-vid-cap a {
    flex: 0 0 auto; font-size: 0.73rem; font-weight: 700;
    color: var(--ink-3); text-decoration: none;
}
.md-vid-cap a:hover { color: var(--brand-deep); }

/* ---------- 입력부 ----------
   AI 진료 화면(main/consult.css 의 .cx-box)과 같은 모양이다.
   같은 앱인데 입력부만 달라 보이면 어색하다.
   예전에는 «글 칸»과 «버튼 줄»이 위아래 두 상자로 나뉘어 무거웠다. */
.md-box {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    padding: 8px 8px 8px 14px;
    box-shadow: var(--shadow-1);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.md-box.focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.md-text {
    width: 100%;
    min-width: 0;                 /* 없으면 제 본래 크기 밑으로 안 줄어 상자를 뚫는다 */
    border: none; outline: none; resize: none;
    background: transparent;
    font-family: inherit; font-size: 0.95rem; line-height: 1.55;
    color: var(--ink);
    max-height: 132px;
    padding: 5px 0 2px;
    display: block;
}
.md-text::placeholder { color: var(--ink-3); }
.md-tools { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.md-tools .md-gap { flex: 1; }
.md-tool {
    width: 34px; height: 34px; border-radius: 10px;
    border: none; background: none; color: var(--ink-3);
    font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.14s, color 0.14s;
}
.md-tool:hover { background: var(--line-soft); color: var(--ink-2); }
/* 보낼 것이 있을 때만 색이 들어온다 */
.md-send {
    width: 34px; height: 34px; border-radius: 50%;
    border: none; cursor: pointer;
    background: #d7e0e9; color: #fff;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.16s, transform 0.12s;
}
.md-send.on { background: var(--brand-grad); box-shadow: 0 3px 10px rgba(0, 184, 148, 0.3); }
.md-send.on:active { transform: scale(0.93); }

/* 보낸 사진 */
.md-shot {
    display: block; max-width: 100%; width: 220px;
    border-radius: 10px; margin-bottom: 6px; background: #eef3f8;
}
.chat-message.user .md-shot:last-child { margin-bottom: 0; }

/* ---------- 기억 안내 ---------- */
.md-mem {
    margin-top: 18px; padding: 14px 15px;
    background: #f7fafc; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
}
.md-mem h4 {
    font-size: 0.84rem; font-weight: 800; color: var(--ink); margin-bottom: 9px;
    display: flex; align-items: center; gap: 7px;
}
.md-mem h4 i { color: var(--brand); }
.md-mem ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.md-mem li {
    position: relative; padding-left: 12px;
    font-size: 0.78rem; color: var(--ink-2); line-height: 1.6;
    word-break: keep-all; overflow-wrap: break-word;
}
.md-mem li::before {
    content: ''; position: absolute; left: 0; top: 8px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4, #9fb0c2);
}
.md-mem li b { color: var(--ink); font-weight: 800; }

/* ---------- 내 정보 직접 입력 ---------- */
.md-sheet-acts.col { flex-direction: column; }
.md-loading { font-size: 0.84rem; color: var(--ink-3); padding: 14px 0; text-align: center; }
.md-edit { display: flex; flex-direction: column; gap: 12px; }
.md-erow label {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.78rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px;
}
.md-src {
    font-size: 0.66rem; font-weight: 800; font-style: normal;
    border-radius: 999px; padding: 2px 7px;
    background: #eef3f8; color: var(--ink-3);
}
.md-src.user   { background: var(--brand-soft); color: var(--brand-deep); }
.md-src.ai     { background: var(--warn-soft, #fff4e0); color: var(--warn, #b8781f); }
.md-src.doctor { background: #e9f0ff; color: #2a5bd7; }
.md-erow input {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    font-family: inherit; font-size: 0.9rem; color: var(--ink);
    background: #f7fafc; outline: none;
}
.md-erow input:focus { border-color: var(--brand); background: #fff; }
.md-erow input::placeholder { color: #b3c1cf; }

.md-facts { margin-top: 20px; }
.md-facts h4 {
    font-size: 0.84rem; font-weight: 800; color: var(--ink); margin-bottom: 10px;
    display: flex; align-items: center; gap: 7px;
}
.md-facts h4 i { color: var(--brand); }
.md-fact {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-top: 1px solid var(--line-soft);
    font-size: 0.82rem; color: var(--ink-2); line-height: 1.5;
}
.md-fact > div { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: break-word; }
.md-fact b { color: var(--ink); font-weight: 800; }
.md-fstat {
    display: inline-block; margin-left: 4px;
    font-size: 0.68rem; font-weight: 800;
    border-radius: 999px; padding: 2px 7px;
    background: var(--warn-soft, #fff4e0); color: var(--warn, #b8781f);
}
.md-fstat.confirmed { background: var(--brand-soft); color: var(--brand-deep); }
.md-fno {
    flex: 0 0 auto; border: 1px solid var(--line); background: #fff;
    border-radius: 999px; padding: 6px 12px;
    font-family: inherit; font-size: 0.74rem; font-weight: 700; color: var(--ink-3);
    cursor: pointer;
}
.md-fno:disabled { opacity: 0.5; }

/* ---------- 넓은 화면 ---------- */
@media (min-width: 992px) {
    /* 넓은 화면에서는 대화 폭을 넓게 쓴다.
       760px 은 모바일 폭을 그대로 늘린 값이라 1400px 모니터에서는 양옆이 휑했다.
       다만 무한정 늘리지는 않는다 — 한 줄이 너무 길면 눈이 다음 줄 첫 글자를
       찾지 못한다. 읽기 좋은 한 줄은 대략 이 정도까지다.

       ⚠ main/consult.css 의 «.cx-wrap { max-width: 1080px }» 와 짝이다.
         한쪽만 바꾸면 진료에서 주치의로 넘어갈 때 글이 옆으로 튄다. */
    .md-main  { max-width: 1080px; }
    .md-chat  { padding: 24px 28px 12px; }
    .md-input { padding-left: 28px; padding-right: 28px; }

    /* 판을 넓혔다고 말풍선까지 같이 넓히면 안 된다.
       78% 면 800px 짜리 한 줄이 되는데, 그쯤 되면 줄 끝에서 눈이
       다음 줄 첫 글자를 찾지 못한다. 읽는 폭은 따로 묶어 둔다. */
    .md-chat .chat-message { max-width: min(78%, 680px); }

    /* 대화 화면은 «페이지» 가 아니라 «창» 이다.
       min-height 만 주면 대화가 길어질수록 셸이 같이 늘어나 입력칸이 화면 밖으로
       밀려난다. 그러면 답을 쓰려고 매번 맨 아래까지 스크롤해야 한다.
       높이를 화면에 못 박아 두면 .md-chat 안에서만 스크롤되고 입력칸은 제자리에 있는다.
       (모바일은 아래 미디어쿼리에서 이미 이렇게 하고 있었다) */
    body.md-chatpage,
    body.md-chatpage .md-shell {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }
}

/* ---------- 모바일 (앱바 + 탭바) ---------- */
@media (max-width: 991px) {
    /* 위는 앱바 58px, 아래는 탭바 — index.php 의 .main-content 와 같은 값 */
    .md-shell,
    body.sb-collapsed .md-shell {
        margin-left: 0;
        padding-top: 58px;
        padding-bottom: calc(62px + env(safe-area-inset-bottom));
        height: 100vh;
        height: 100dvh;
    }
    /* 헤더는 «하나» 다. 위에 앱바가 이미 있으므로 화면 헤더는 통째로 숨긴다 —
       제목이 두 줄로 겹쳐 보이던 문제가 여기서 나왔다.
       화면 고유 버튼(ⓘ · 모두 읽음)은 app_nav 의 $navActions 로 앱바에 올라간다.
       회차는 대화 안의 구분선(.md-divider)이 알려 준다. */
    .md-bar { display: none; }
    .md-input { padding-bottom: 6px; }
}

/* ---------- 브리핑에서 이어지는 영양 이야기 ----------
   먼저 건 연락에서는 «성분 이름» 까지만 말했다.
   상품·용량·주의사항은 여기서 눌러야 보인다 — 그게 광고와 갈리는 자리다. */
.md-nutri-ask-card {
    align-self: stretch;
    margin-top: 10px;
    background: #fff8f1;
    border: 1px solid #ffe3c9;
    border-radius: 14px;
    padding: 14px 16px;
}
.md-nutri-ask-card p {
    font-size: 0.86rem; line-height: 1.6; color: var(--ink);
    margin-bottom: 11px; word-break: keep-all;
}
.md-nutri-ask-card b { font-weight: 800; }
.md-nutri-ask-card small { font-size: 0.76rem; color: var(--ink-3); }
.md-nutri-go {
    width: 100%; padding: 11px 14px;
    border: 0; border-radius: 10px;
    background: #f0883e; color: #fff;
    font-family: inherit; font-size: 0.85rem; font-weight: 800;
    cursor: pointer; transition: background 0.15s;
}
.md-nutri-go:hover { background: #dd7529; }

/* ---------- 브리핑 카드 ----------
   주치의가 먼저 건 말은 «무엇이 달라졌는지» 가 본론이다. 줄글 안에 숫자를
   섞어 두면 그걸 문장에서 다시 찾아 읽어야 한다. 그래서 카드로 세운다.
   테두리 왼쪽 색 하나로 «어느 쪽인지» 가 먼저 읽히게 했다. */
.md-bcard {
    margin: 0 0 10px;
    border: 1px solid var(--line);
    border-left: 4px solid #9aa7b4;
    border-radius: var(--r-md);
    background: #fbfcfe;
    overflow: hidden;
    /* 한국어는 어절 단위로 끊어야 읽힌다. 이게 없으면 좁은 화면에서
       「비타민B / 군」 처럼 이름 한가운데가 잘린다.
       anywhere 는 그래도 안 들어가는 긴 숫자·영문에만 쓰인다. */
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.md-bcard.alert { border-left-color: #d0453a; background: #fff8f7; }
.md-bcard.bad   { border-left-color: #e08a2e; background: #fffbf5; }
.md-bcard.good  { border-left-color: #2f9e6e; background: #f6fdfa; }
.md-bcard.mixed { border-left-color: var(--brand); background: #f7fcfd; }
.md-bcard.flat  { border-left-color: #9aa7b4; }

.md-bcard-h {
    display: flex; align-items: baseline; gap: 7px;
    padding: 10px 12px 9px;
    font-size: 0.84rem; color: var(--ink-2);
}
.md-bcard-h b { font-weight: 800; }
.md-bcard.alert .md-bcard-h { color: #a5342a; }
.md-bcard.bad   .md-bcard-h { color: #9a6013; }
.md-bcard.good  .md-bcard-h { color: #217a53; }
.md-bcard-h b { flex: 1 1 auto; min-width: 0; }
.md-bcard-h > i { flex: 0 0 auto; }
/* 제목이 두 줄로 꺾여도 날짜는 한 줄로 둔다 — 시각이 세로로 쪼개지면 못 읽는다 */
.md-bcard-at {
    flex: 0 0 auto; margin-left: auto; white-space: nowrap;
    font-size: 0.7rem; color: var(--ink-3); font-weight: 600;
}

/* 지표 — 「저번 → 지금」. 그것이 이 연락의 이유다. */
.md-bcard-m { border-top: 1px solid var(--line-soft); }
.md-bm {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    border-top: 1px solid var(--line-soft);
    font-size: 0.79rem;
}
.md-bm:first-child { border-top: 0; }
.md-bm-l { flex: 0 0 auto; min-width: 74px; color: var(--ink-3); font-weight: 700; }
.md-bm-v { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.md-bm-v i { font-style: normal; color: #9aa7b4; }
.md-bm-v b { font-weight: 800; }
.md-bm-ar { color: #c3ccd6; font-size: 0.68rem; }
.md-bm-p { margin-left: auto; font-weight: 800; font-size: 0.74rem; color: var(--ink-3); }
.md-bm.worse  .md-bm-v b, .md-bm.worse  .md-bm-p { color: #c0392b; }
.md-bm.better .md-bm-v b, .md-bm.better .md-bm-p { color: #2f9e6e; }

/* 아주 작은 꺾은선. 눈금도 축도 없다 — 읽어야 하는 것은 «흐름» 이고
   정확한 값은 바로 옆 칸에 숫자로 있다.
   ⚠ 선 색을 좋고 나쁨으로 칠하지 «않는다». 그 판단은 오른쪽 % 칸이 한다.
     선까지 빨개지면 「내려간 것」과 「나쁜 것」이 한 덩어리로 보인다. */
.md-bm-s {
    flex: 0 0 auto;
    display: flex; align-items: center;
    color: var(--brand-deep);
}
.md-bm-s svg { display: block; }
.md-bm.flat .md-bm-p { font-weight: 700; color: #a9b6c3; }

/* ---------- 몸 상태 카드 ----------
   「요즘 컨디션 좀 봐주세요」 라고 청했을 때만 선다.
   숫자는 md_health_digest() 가 이미 계산해 둔 것 그대로다 —
   그동안 AI 만 보고 회원은 못 봤다.

   ⚠ 지표를 «다» 세우지 않는다. 어느 것을 세울지는 서버(md_health_card)가 고른다. */
.md-hcard {
    margin-top: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.md-hcard-h {
    display: flex; align-items: baseline; gap: 8px;
    padding: 10px 12px 8px;
}
.md-hcard-h b { font-size: 0.86rem; font-weight: 800; color: var(--ink); }
.md-hcard-h span { margin-left: auto; font-size: 0.72rem; color: var(--ink-3); font-weight: 700; }
.md-hcard .md-bm:first-of-type { border-top: 1px solid var(--line-soft); }
.md-hcard-go {
    display: flex; align-items: center; gap: 5px;
    padding: 9px 12px;
    border-top: 1px solid var(--line-soft);
    background: #fbfdfe;
    font-size: 0.76rem; font-weight: 700; color: var(--brand-deep);
    text-decoration: none;
}
.md-hcard-go i { font-size: 0.62rem; }
.md-hcard-go:hover { background: var(--brand-soft); }

.md-bcard-al {
    padding: 9px 12px; border-top: 1px solid var(--line-soft);
    background: rgba(208, 69, 58, 0.05);
    font-size: 0.76rem; color: #a5342a; line-height: 1.6;
}
.md-bcard-al b { display: block; margin-bottom: 3px; font-size: 0.7rem; font-weight: 800; }
.md-bcard-al span { display: block; }

.md-bcard-nu {
    padding: 8px 12px; border-top: 1px solid var(--line-soft);
    font-size: 0.76rem; color: var(--ink-3);
}
.md-bcard-nu i { color: #f0883e; margin-right: 3px; }
.md-bcard-nu b { color: var(--ink-2); font-weight: 800; }

/* ---------- 다음 걸음 ----------
   「진료를 받아보시길 권합니다」로 끝나면 어디로 가야 하는지는 환자가 찾아야
   한다. 갈 수 있는 곳을 그 자리에 놓는다. 하나를 고르면 나머지는 사라진다 —
   남겨 두면 «둘 다 해야 하나» 가 된다. */
.md-bacts { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.md-bact {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 13px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: #fff;
    font-family: inherit; text-align: left; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.md-bact:hover  { background: #f4f8fb; }
.md-bact:active { transform: scale(0.99); }
.md-bact:disabled { cursor: default; opacity: 0.75; }
.md-bact-t { font-size: 0.82rem; font-weight: 800; color: var(--ink-2); }
.md-bact-t i { margin-right: 5px; }
.md-bact small { font-size: 0.72rem; color: var(--ink-3); font-weight: 500; }

.md-bact.urge {
    border-color: #d0453a; background: #d0453a;
}
.md-bact.urge .md-bact-t, .md-bact.urge small { color: #fff; }
.md-bact.urge small { opacity: 0.85; }
.md-bact.urge:hover { background: #b93b31; }

.md-bact.main { border-color: var(--brand-ring); }
.md-bact.main .md-bact-t i { color: var(--brand-deep); }
.md-bact.soft .md-bact-t { font-weight: 700; color: var(--ink-3); }
.md-bact.soft .md-bact-t i { color: #9aa7b4; }
.md-bact.chosen { border-color: var(--brand); }

/* ---------- 마음이 위태로울 때 ----------
   붉은 «경고» 로 만들지 않았다. 지금 필요한 것은 겁이 아니라 손이다.
   번호는 눌러서 바로 걸 수 있어야 한다 — 그 순간에 옮겨 적게 두면 안 된다. */
.md-crisis {
    margin: 8px 0 4px;
    border: 1px solid #cfe3e7;
    border-radius: var(--r-md);
    background: #f4fbfc;
    padding: 14px 15px;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.md-crisis-h {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 6px;
    font-size: 0.86rem; color: var(--brand-deep);
}
.md-crisis-h b { font-weight: 800; }
.md-crisis p { margin: 0; font-size: 0.8rem; line-height: 1.65; color: var(--ink-2); }

.md-crisis-tels { display: flex; flex-direction: column; gap: 7px; margin: 11px 0 0; }
.md-crisis-tel {
    display: flex; align-items: baseline; gap: 10px;
    padding: 11px 13px; border-radius: var(--r-md);
    border: 1px solid var(--brand-ring); background: #fff;
    text-decoration: none;
    transition: background 0.15s;
}
.md-crisis-tel:hover { background: #f0f9fb; }
.md-crisis-no {
    flex: 0 0 auto;
    font-size: 1.02rem; font-weight: 800; color: var(--brand-deep);
    font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.md-crisis-lb { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.md-crisis-lb small { font-weight: 500; color: var(--ink-3); }

.md-crisis-foot { margin-top: 10px !important; font-size: 0.74rem !important; color: var(--ink-3) !important; }

/* ---------- 답변 본문 조판 ----------
   예전에는 통째로 <br> 였다. 판단 근거 네 줄이 벽처럼 붙어 어디서 끊어
   읽어야 할지 알 수 없었다. 글의 구조는 이미 글 안에 있다 — 살리기만 한다. */
.md-say { display: flex; flex-direction: column; gap: 11px; }
.md-say p { margin: 0; }
.md-say .md-ul {
    margin: -2px 0 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 5px;
}
.md-say .md-ul li { position: relative; padding-left: 15px; }
.md-say .md-ul li::before {
    content: ''; position: absolute; left: 3px; top: 0.72em;
    width: 4px; height: 4px; border-radius: 50%; background: var(--brand);
}

/* 숫자는 «단위가 붙은 것» 만. 아무 데나 칠하면 어디가 중요한지 안 보인다. */
.md-num { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.md-q { font-style: normal; font-weight: 700; color: var(--brand-deep); }

/* 진료과 — 누를 수 있다는 게 보여야 한다 */
.md-dept {
    display: inline-flex; align-items: center; gap: 4px;
    margin: 0 1px; padding: 1px 8px 2px;
    border: 1px solid var(--brand-ring); border-radius: 999px;
    background: var(--brand-soft); color: var(--brand-deep);
    font-family: inherit; font-size: 0.9em; font-weight: 700; line-height: 1.5;
    cursor: pointer; vertical-align: baseline;
    transition: background 0.15s;
}
.md-dept:hover { background: #d9f0f4; }
.md-dept i { font-size: 0.82em; opacity: 0.75; }

/* ---------- 진료 권유 ---------- */
.md-goto {
    display: flex; flex-direction: column; gap: 7px;
    margin: 4px 0 2px; padding: 13px 14px;
    border: 1px solid var(--brand-ring); border-radius: var(--r-md);
    background: linear-gradient(180deg, #f6fcfd, #fff);
}
.md-goto-h { margin: 0; font-size: 0.84rem; font-weight: 800; color: var(--brand-deep); }
.md-goto-h i { margin-right: 5px; }
.md-goto-s { font-size: 0.72rem; color: var(--ink-3); }

/* ---------- 진료로 넘기기 전 미리보기 ---------- */
.md-go-lead { margin: 0 0 12px; font-size: 0.8rem; line-height: 1.6; color: var(--ink-2); }
.md-go-lead b { font-weight: 800; }
.md-go-load { margin: 0; font-size: 0.8rem; color: var(--ink-3); }

.md-go-sec { margin-bottom: 12px; }
.md-go-sec h4 {
    margin: 0 0 5px; font-size: 0.72rem; font-weight: 800;
    color: var(--ink-3); letter-spacing: 0.02em;
}
.md-go-sec ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.md-go-sec li {
    padding: 7px 10px; border-radius: var(--r-sm);
    background: #f6f8fa; font-size: 0.79rem; line-height: 1.6; color: var(--ink-2);
    word-break: keep-all; overflow-wrap: anywhere;
}
/* 복용약·알레르기는 처방 안전에 직결된다 */
.md-go-sec.key h4 { color: #a5342a; }
.md-go-sec.key li { background: #fdf3f2; color: #7d2b23; }