/*
 * 경희DMC한의원 전용 스타일 (코어 tenant-custom.css 확장점)
 *
 * 코어 BaseLayout 이 이 파일이 있으면 /local/tenant-custom.css 로 자동 연결한다.
 * core:pull 이 건드리지 않는 local 경로다.
 */

/*
 * 전체 톤 — 첫화면 컨셉 사진(베이지 벽지·나무 책상·화분)에 맞춰
 * clinicLight 스킨의 차가운 청회색 바탕·글자색을 따뜻한 아이보리·웜그레이로 바꿈 (2026-09-11 원장 요청)
 *
 * 스킨 자체를 바꾸지 않은 이유: 따뜻한 계열 스킨(editorialCalm, scandiCare 등)은 글꼴·카드 모양·
 * 페이지 배치까지 함께 바뀌어 원장이 확정한 구성·크기가 흔들린다. 색 변수만 바꾼다.
 * 청록 강조색(--accent)은 원장이 확정한 색이라 그대로 둔다.
 *
 * 코어 BaseLayout 은 같은 변수를 :root(!important) 와 <body style="..."> 인라인 양쪽에 넣는다.
 * :root 만 바꾸면 body 인라인 값이 하위 요소에 우선 적용되므로(2026-09-11 미리보기 실측),
 * body 와 인라인으로 변수를 선언한 요소까지 !important 로 함께 덮는다
 * (스타일시트의 !important 는 인라인 일반 선언보다 우선한다).
 * 글자 대비(WCAG): 본문 15.3:1, 보조 글자 6.5:1, 강조색 5.0:1, 청록 위 흰 글자 5.5:1 — 모두 AA 통과.
 */
:root,
body,
[style*="--bg-body"],
[style*="--border-subtle"] {
    --bg-body: #f8f5f0 !important;
    --bg-surface: #fffdf9 !important;
    --border-subtle: #e7e0d6 !important;
    --text-main: #1c1f1d !important;
    --text-muted: #5b5852 !important;
    --text-subtle: #8c877f !important;
    --theme-text: #1c1f1d !important;
    --theme-bg-page: #f8f5f0 !important;
    --bg-header: rgba(255, 253, 249, 0.92) !important;
    --bg-footer: #f3efe8 !important;
    --shadow-card: 0 10px 30px rgba(60, 45, 30, 0.07) !important;
    /* 로고 'DMC' 진핑크 — 첫화면 아이콘·점 강조용 (2026-10-15 원장 요청). 바탕 대비 약 4:1 이라 글자색으로는 쓰지 않는다 */
    --brand-pink: #ec0080;
}

/*
 * 헤더 진료 상태 — 테두리 알약형·앞쪽 점·한 줄·로고 옆 빈 공간 쪽으로 이동 (2026-09-11 원장 요청)
 * 점 색은 core/src/lib/local/public-contact.ts 가 붙이는 data-kc-state 로 바뀐다
 * (진료중 초록 / 휴게·진료 전 주황 / 진료종료·휴진 빨강 / 확인 필요 회색).
 */
.cos-clinic-presence {
    gap: 0.45rem !important;
    min-height: 30px !important;
    padding: 0.25rem 0.85rem 0.25rem 0.7rem !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 999px !important;
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 18px -12px rgba(80, 55, 30, 0.35);
}
.cos-clinic-presence::before {
    content: "";
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #9ca3af;
}
.cos-clinic-presence[data-kc-state="open"]::before { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.cos-clinic-presence[data-kc-state="pause"]::before { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.cos-clinic-presence[data-kc-state="closed"]::before { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
/* 한 줄 — Core 가 PC 에서 세로(column) 배치·블록 글자로 바꿔 두 줄이 되던 것을 가로 한 줄로 고정 (2026-09-11 실측) */
.cos-clinic-presence {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
}
.cos-clinic-presence [data-presence-label] { display: inline !important; }
.cos-clinic-presence .cos-presence-detail { color: var(--text-muted); }
@media (min-width: 1024px) {
    .cos-clinic-presence { margin-left: clamp(1.25rem, 5.5vw, 5.5rem) !important; }
    .cos-clinic-presence .cos-presence-detail { display: inline !important; }
}
@media (max-width: 1023px) {
    .cos-clinic-presence { margin-left: 0.5rem !important; min-height: 26px !important; padding: 0.15rem 0.6rem 0.15rem 0.5rem !important; font-size: 0.72rem !important; }
}

/*
 * 톤 비교(아이보리/진한 베이지/테라코타)는 2026-09-11 원장이 아이보리로 확정해 비교용 블록을 지웠다.
 * 비교안 값: 진한 베이지 bg #ede3d3·강조 #0d6f67 / 테라코타 bg #f5f1e8·강조 #a64b33.
 */

/*
 * 홈페이지에서만 body 바탕이 민트 회색(#f3f7f4)·글자가 짙은 녹색(#17322d)으로 칠해지던 것 되돌림.
 * 코어 src/components/common/SetupPending.astro(설치 미완료 안내 화면)의 전역 body 스타일이
 * 홈페이지 CSS 에 함께 묶여 들어온다(2026-09-11 미리보기 실측 — 홈에서만 인라인 body 규칙 확인).
 * '최근 건강 글'처럼 자체 배경이 없는 영역이 이 민트색으로 보였다. 코어 수정 전까지 유지.
 */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
}

/*
 * 오시는 길 페이지 진료시간 — 첫 줄(월·화·목·금)만 강조색으로 표시되던 것을 다른 줄과 같게 맞춤
 * (2026-09-11 원장 요청)
 *
 * 코어 src/components/sections/BusinessHours.astro 가 첫 줄(idx === 0)에 강조색을 고정으로 넣는다.
 * 어느 줄을 강조할지 고르는 설정이 없어(본사 접수 bug_7ecb6440949632cd) 여기서 되돌린다.
 * 선택자는 BusinessHours 의 4열 진료시간 그리드 첫 칸에만 걸리도록 좁혔다
 * — 배포 미리보기에서 /location 에서만 1건 일치, 홈·진료과목·원장·블로그·공지·예약 페이지는 0건 확인.
 */
.page-container > .grid.lg\:grid-cols-4 > :first-child > .text-\[color\:var\(--accent\)\] {
    color: var(--text-main);
}

/*
 * 같은 진료시간 칸 — "(오후 진<br>료)" 처럼 글자 중간에서 줄이 바뀌던 것을 단어 단위로 바뀌게 함
 * (2026-09-11 원장 요청)
 */
.page-container > .grid.lg\:grid-cols-4 > * > p {
    word-break: keep-all;
}
/* 2026-10-28 원장: 괄호 안 설명((오후 진료)·(수·토 제외) 등)은 아예 다음 줄로.
   진료시간 저장값에서 괄호 앞 띄어쓰기를 줄바꿈으로 바꿨고(다른 화면에서는 띄어쓰기로 보임), 이 칸만 줄바꿈을 살린다. */
.page-container > .grid.lg\:grid-cols-4 > * > p:last-child {
    white-space: pre-line;
}

/*
 * 카드 본문 — '주차하실 수 있습<br>니다'처럼 글자 중간에서 줄이 바뀌던 것을 단어 단위로 (오시는 길 교통 안내 등)
 * 긴 주소·영문이 칸을 넘치지 않도록 overflow-wrap 을 함께 둔다.
 */
.card-body {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/*
 * 블로그 카드 — 첫화면 '최근 건강 글' 과 블로그 목록(/blog) 공통 (2026-10-08 원장 요청)
 *
 * 1) 대표사진을 자르지 않고 전체를 보여준다. 사진마다 가로·세로 비율이 달라 빈 곳이 생기므로
 *    카드 안쪽에 여백을 둔 '사진 칸' 을 테두리·둥근 모서리·밝은 바탕으로 분명히 표시한다.
 * 2) 카드 바탕은 맨 아래 저작권 부분(발바닥)과 같은 색(--bg-footer #f3efe8)으로 통일한다.
 *    청록 계열 바탕은 원장이 미리보기에서 보고 별로라고 해 되돌렸다(2026-10-08).
 *
 * 목록 화면은 코어 화면(src/pages/blog/index.astro)이라 화면을 복제하지 않고 색·모양만 여기서 덮는다.
 * 코어 쪽 사진 칸은 .aspect-video, 첫화면(홈 플러그인)은 .blog-thumb 이다.
 */
.blog-card {
    background: var(--bg-footer) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 8px 24px -18px rgba(60, 45, 30, 0.35) !important;
}
.blog-card:hover {
    border-color: #d6cbbb !important;
    box-shadow: 0 16px 34px -20px rgba(60, 45, 30, 0.45) !important;
    transform: translateY(-2px);
}
.blog-card > .aspect-video,
.blog-card > .blog-thumb {
    position: relative;
    aspect-ratio: 4 / 3 !important;
    margin: 1.25rem 1.25rem 0 !important;
    overflow: hidden;
    border: 1px solid #e2d9cc !important;
    border-radius: 0.75rem !important;
    background: var(--bg-surface) !important;
}
.blog-card > .aspect-video img,
.blog-card > .blog-thumb img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
}
/* 글 분류 표시(건강정보 등) — 진한 청록 바탕에 흰 글자 (2026-10-08 원장 요청, 대비 7.9:1)
 * 첫화면은 .blog-chip, 목록 화면은 코어의 분류 표시(.bg-slate-100) */
.blog-chip,
.blog-card .bg-slate-100 {
    display: inline-block;
    padding: 0.2rem 0.6rem !important;
    border-radius: 999px !important;
    background: #0d5e57 !important;
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 700;
}
/* 글자 영역 좌우 여백을 사진 칸과 맞춘다 — 사진 테두리와 제목 시작선이 한 줄로 */
.blog-card > .p-6 {
    padding: 1.25rem 1.25rem 1.5rem !important;
}
/* 목록 화면의 '블로그' 표시도 같은 모양으로 */
.blog-card .bg-\[color\:var\(--accent-soft\)\] {
    background: #e0f2f1 !important;
    color: #0d5e57 !important;
}
/* 목록 화면 카드 아래 작성자·날짜 구분선 */
.blog-card .border-t {
    border-color: var(--border-subtle) !important;
}

/*
 * 진료과목 원리 설명 칸의 '사진 겹쳐 놓기' 이미지 (2026-10-13 원장 요청, 보약 페이지 녹용)
 * 겹친 사진 자체에 둥근 모서리·그림자가 있으므로 바깥 흰 카드 틀을 지워 배경 위에 바로 놓는다.
 * 파일 이름이 '-collage-' 인 이미지에만 적용된다.
 */
div:has(> img[src*="-collage-"]) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}
div:has(> div > img[src*="-collage-"]) > .blur-3xl {
    display: none;
}

/*
 * 원장 소개 페이지 '학력 및 주요 이력' — 한글이 낱자 단위로 끊겨 '대한스/포츠', '1/저자' 처럼
 * 단어 중간에서 줄이 바뀌던 문제. 단어 단위로 줄바꿈 (2026-10-15 원장 이력 추가 때 발견)
 */
.doctor-profile-credentials li {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/*
 * 아이폰 화면 축소 방지 (2026-10-15) — 줄바꿈을 낱말 단위로 막은 제목·글이 칸보다 길면
 * 페이지를 넓히지 말고 칸 안에서 줄을 바꾼다. 보통 때는 기존처럼 낱말 단위로 줄바꿈된다.
 * (가운뎃점 뒤 줄바꿈 자리는 core/src/lib/local/public-contact.ts allowBreakAfterMiddleDot)
 */
h1, h2, h3, .break-keep {
    overflow-wrap: anywhere;
}

/*
 * 휴대폰 채팅 버튼 안에 '문의하기' 글자 (2026-10-15 원장 요청)
 * 위의 길찾기·진료예약 버튼처럼 아이콘 아래 글자를 둔다. PC 는 버튼 아래 따로 이름표가 있다
 * (core/src/lib/local/public-contact.ts kc-chat-label). 채팅창이 열려 있을 때는 글자를 숨긴다.
 */
@media (max-width: 1023px) {
    #brd-chat-button {
        flex-direction: column !important;
        gap: 3px;
    }
    #brd-chat-button > svg {
        width: 22px;
        height: 22px;
    }
    #brd-chat-button::after {
        content: "문의하기";
        color: #fff;
        font: 700 11px/1 Pretendard, system-ui, -apple-system, sans-serif;
        letter-spacing: -0.02em;
    }
    #brd-chat-button[aria-expanded="true"]::after {
        content: none;
    }
}

/* ── 진료과목 상세(로컬 페이지 kh-program) — 2026-10-15 원장 요청 ─────────────────
   작은 초록 제목 글씨를 조금 키우고, 맨 위 '← 프로그램 상세' 화살표와 글 사이를 띄운다.
   kh-eyebrow 는 병원 전용 섹션(치료 방법·의료진·같이 보면 좋은 글)의 작은 제목 — 첫화면 .eyebrow 와 같은 크기 */
.kh-eyebrow {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--accent);
}
.intent-spoke-links__parent > span[aria-hidden="true"] {
    margin-right: 0.4em;
}
.kh-program span.uppercase.font-bold.text-sm {
    font-size: 15px !important;
}
.kh-program .section p.text-xs.font-semibold {
    font-size: 14px !important;
}
.kh-program h4.text-xs {
    font-size: 13.5px !important;
}
.kh-program h4.text-sm {
    font-size: 15px !important;
}
@media (min-width: 768px) {
    .kh-eyebrow {
        font-size: 15px;
    }
    .kh-program span.uppercase.font-bold.text-sm {
        font-size: 16px !important;
    }
    .kh-program .section p.text-xs.font-semibold {
        font-size: 15px !important;
    }
}

/*
 * 건강칼럼 글 본문 — 네이버에서 가져온 글 모양 통일 (2026-10-21 원장 요청)
 * 코어 글 화면(src/pages/blog/[slug].astro)의 .prose 를 이 글 상자 안에서만 덮는다.
 * 네이버 글은 한 줄이 한 문단이라 코어의 문단 간격(1.6em)이면 줄 사이가 너무 벌어진다.
 */
article[data-blog-article] .prose p {
    margin: 0 0 0.6em;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-main);
}
article[data-blog-article] .prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.75em auto;
    border-radius: 10px;
}
article[data-blog-article] .prose p:has(> img:only-child) {
    margin: 0;
}
/* 네이버 '인용구' — 소제목·강조 문구로 쓰였다. 따옴표 그림·왼쪽 굵은 선 대신 가운데 정렬 띠 */
article[data-blog-article] .prose blockquote {
    margin: 2.25em 0 1.5em;
    padding: 1.1em 1em;
    background: none;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    text-align: center;
}
article[data-blog-article] .prose blockquote {
    quotes: none;
}
article[data-blog-article] .prose blockquote::before,
article[data-blog-article] .prose blockquote p::before,
article[data-blog-article] .prose blockquote p::after {
    content: none;
}
article[data-blog-article] .prose blockquote p {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.65;
    color: var(--text-main);
}
/* 2026-10-26 원장 요청: 가운데 정렬 소제목(인용구)도 글 제목처럼 명조 */
article[data-blog-article] .prose blockquote p,
article[data-blog-article] .prose blockquote strong {
    font-family: "Noto Serif KR", "Nanum Myeongjo", serif;
}
article[data-blog-article] .prose strong {
    color: var(--text-main);
    font-weight: 700;
}
article[data-blog-article] .prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
/* 네이버 표 복원(tidy-blog-content.js) — .kh-table, 한 칸 글상자 .kh-note */
article[data-blog-article] .prose .kh-table-wrap {
    margin: 1.5em 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
article[data-blog-article] .prose .kh-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-main);
}
/* 네 칸 이상만 휴대폰에서 옆으로 밀어 본다 */
article[data-blog-article] .prose .kh-table:has(tbody tr > :nth-child(4)) {
    min-width: 560px;
}
article[data-blog-article] .prose .kh-table th,
article[data-blog-article] .prose .kh-table td {
    display: table-cell;
    width: auto;
    margin: 0;
    padding: 0.7em 0.85em;
    border: 1px solid var(--border-subtle);
    border-radius: 0;
    background: none;
    vertical-align: top;
    text-align: left;
    font-weight: 400;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
article[data-blog-article] .prose .kh-table thead th {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
    font-weight: 700;
    text-align: center;
}
article[data-blog-article] .prose .kh-table td {
    color: var(--text-main);
}
article[data-blog-article] .prose .kh-table th[scope="row"] {
    width: 24%;
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-surface));
    font-weight: 700;
}
article[data-blog-article] .prose .kh-table--pairs th[scope="row"] {
    width: 34%;
}
@media (max-width: 767px) {
    article[data-blog-article] .prose .kh-table {
        font-size: 0.875rem;
    }
    article[data-blog-article] .prose .kh-table th,
    article[data-blog-article] .prose .kh-table td {
        padding: 0.6em 0.6em;
    }
}
article[data-blog-article] .prose .kh-note {
    margin: 1.5em 0;
    padding: 1em 1.15em;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-surface));
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--text-main);
}
@media (max-width: 767px) {
    article[data-blog-article] .prose p {
        font-size: 0.9375rem;
    }
    article[data-blog-article] .prose blockquote p {
        font-size: 1.05rem;
    }
}

/* ── 진료과목 '이럴 때는 ~ 먼저입니다' 카드 아이콘 — 2026-10-28 원장 요청 ─────────
   ⚠️ 를 세모보다 조금 큰 검정 네모 안에 딱 맞게(깨진 사진처럼 보이지 않게). '주의' 글자·주황 띠는 원장 요청으로 뺐다.
   ProblemSection 만 쓰는 아이콘 칸 클래스 조합으로 고른다. */
.kh-program article.card > div.w-12.h-12.mb-6.text-3xl {
    width: 3rem;
    height: 3rem;
    font-size: 2.1rem;
    line-height: 1;
    background: #111;
    border: 0;
    border-radius: 0.4rem;
}

/* ── 진료과목 제목: 단어 중간에서 줄바꿈하지 않기 — 2026-10-28 원장 요청 ──
   한글은 기본으로 글자 사이 어디서나 줄이 나뉘어 '전침·/약침)'처럼 끊긴다. 띄어쓰기에서만 나누고,
   한 단어가 칸보다 길 때만 예외로 나눈다. */
.kh-program :is(h1, h2, h3, h4) {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ── 맨 아래(발바닥) 진료 시간 — 2026-10-29 원장 요청 ─────────────────────────
   '월·화·목·금'이 한 글자씩 세로로 쪼개지고 '토요일'도 두 줄로 꺾이던 것을 한 줄로.
   요일 칸은 줄바꿈 금지, 시간 칸은 괄호 설명을 다음 줄로(홈·오시는 길과 같게), 오른쪽 정렬. */
footer li.flex.justify-between.max-w-\[280px\] {
    max-width: 22rem;
}
footer li.flex.justify-between.max-w-\[280px\] > span:first-child {
    flex-shrink: 0;
    white-space: nowrap;
}
footer li.flex.justify-between.max-w-\[280px\] > span:last-child {
    white-space: pre-line;
    text-align: right;
}

/* ── 진료 과목 전체 보기(/programs) 휴대폰 — 2026-10-29 원장 요청 ─────────────
   사진이 없는 과목은 PC 왼쪽 칸에 '01' 숫자만 든 넓은 빈 상자가 생기는데, 휴대폰에서는 한 줄로 쌓여
   과목 사이마다 큰 빈칸이 된다. 휴대폰(768px 미만)에서만, 사진 없이 숫자만 있는 상자를 숨긴다(PC 는 그대로). */
@media (max-width: 767px) {
    [data-skin-page-template="programList"] a.group > div.relative:has(> div.flex:only-child) {
        display: none;
    }
    [data-skin-page-template="programList"] a.group { gap: .25rem; }
}

/* ── 휴대폰 메뉴(오른쪽 위 ☰) 글씨 크기 — 2026-10-29 원장 요청 ─────────────────
   큰 분류(병원 소개·진료 과목…)가 가장 작고 흐리며, '전체 보기'가 가장 크던 것을 뒤집는다.
   큰 분류 = 가장 크고 진하게, 하위 메뉴 = 한 단계 작게, '전체 보기' = 하위 메뉴와 같은 크기에 강조색만. */
#mobile-menu-drawer .space-y-1 > div.uppercase {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--text-main, #161616);
    letter-spacing: -.01em;
    text-transform: none;
    padding-top: .75rem;
}
#mobile-menu-drawer .space-y-1 > a {
    font-size: .9375rem;
}
#mobile-menu-drawer .space-y-1 > a.font-bold {
    font-weight: 600;
    color: var(--accent, #0f766e);
}

/* ── 페이지 맨 아래 '페이지 요약과 검수 정보' 상자 — 2026-10-29 원장 요청 ───────────
   검토된 요약(content_aeo_metadata)이 0건이라 모든 상자가 '검토된 요약이 아직 준비되지 않아…' 안내문만 보였다.
   요약이 준비되지 않은(fallback-*) 상자만 숨긴다. 요약을 채운 페이지(state=ready)는 자동으로 다시 보인다. */
section.aeo-digest-box:has(> details[data-aeo-summary-state^="fallback"]) {
    display: none;
}