/* 당당한의원 대구수성점 — 크림 + 본사 브랜드 브라운 커스터마이징
*
* 배경/카드의 차분한 크림 톤은 원장님 원내 인테리어에 맞춘 기존 설정을 유지하고,
* 강조색(버튼·글로우·보더)은 본사 사이트(yesdang.com) 브랜드 컬러로 맞춘다.
* 메인 #ac6938 (황토빛 브라운) / 진한 톤 #8a5229 / 골드 #c79d5d
* (core:pull 영향 없는 local 경로)
*
* 선택자에 dangdangBrand / wellnessWarm / elegant 를 함께 두는 이유:
* 현재 스킨은 dangdangBrand 이지만, 관리자 화면에서 스킨을 되돌리더라도
* 이 커스터마이징이 그대로 유지되도록 하기 위함이다.
*/
:root {
/* 스킨이 쓰는 글로우/보더 색 — 본사 브랜드 브라운 기준 */
--skin-hero-glow: rgba(172, 105, 56, 0.13);
--skin-panel-border: rgba(172, 105, 56, 0.16);
--skin-band: rgba(199, 157, 93, 0.14);
--skin-soft-blur: rgba(253, 250, 245, 0.72);
}
/* 배경 그라데이션 — 노란기를 빼고 차분한 크림으로 (기존 톤 유지) */
:root[data-skin="dangdangBrand"] body,
:root[data-skin="wellnessWarm"] body,
:root[data-skin="elegant"] body {
background-image:
radial-gradient(circle at 15% 15%, var(--skin-hero-glow) 0, transparent 26%),
radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.7) 0, transparent 30%),
linear-gradient(180deg, #faf6ef, #f4efe6);
}
:root[data-skin="dangdangBrand"] .skin-mainhero-wellnessWarm,
:root[data-skin="wellnessWarm"] .skin-mainhero-wellnessWarm,
:root[data-skin="elegant"] .skin-mainhero-wellnessWarm {
background-image:
radial-gradient(circle at 12% 14%, rgba(224, 212, 195, 0.55) 0, transparent 30%),
linear-gradient(180deg, rgba(250, 246, 239, 0.92), rgba(244, 239, 230, 0.98));
}
:root[data-skin="dangdangBrand"] footer,
:root[data-skin="wellnessWarm"] footer,
:root[data-skin="elegant"] footer {
background-image: linear-gradient(180deg, #f6f1e8, #efe8dc);
}
/* 주요 버튼 — 본사 브랜드 브라운 그라데이션
* (스킨 기본값이 연녹색이라 그대로 두면 브랜드와 어긋난다) */
:root[data-skin="dangdangBrand"] .btn--primary,
:root[data-skin="wellnessWarm"] .btn--primary,
:root[data-skin="elegant"] .btn--primary {
background-image: linear-gradient(135deg, #ac6938, #8a5229);
box-shadow: 0 14px 26px rgba(138, 82, 41, 0.18);
}
:root[data-skin="dangdangBrand"] .card,
:root[data-skin="wellnessWarm"] .card,
:root[data-skin="elegant"] .card {
box-shadow: 0 14px 28px rgba(138, 82, 41, 0.07);
}
:root[data-skin="dangdangBrand"] #main-header,
:root[data-skin="wellnessWarm"] #main-header,
:root[data-skin="elegant"] #main-header {
box-shadow: 0 10px 24px rgba(138, 82, 41, 0.06);
}
/* 로고 배지와 같은 골드 — 구분선에만 절제해서 사용 */
:root[data-skin="dangdangBrand"] hr {
border-color: #c79d5d;
}
/* ─────────────────────────────────────────────────────────
* 첫 화면 글자 크기 균형 (원장 요청 2026-07-28)
* 병원명이 10px 로 너무 작고, 미션이 최대 128px 로 너무 컸다.
* 병원명을 키워 읽히게 하고 미션은 한 화면에 들어오는 크기로 줄인다.
* 대상: SnowyMountainHero (core/src/components/ui/SnowyMountainHero.tsx)
* 코어 클래스를 직접 겨냥하므로, core:pull 후 히어로가 바뀌면 확인 필요.
* ───────────────────────────────────────────────────────── */
/* 병원명 — 10px 흐린 회색 → 읽히는 크기 + 브랜드 브라운 */
.text-\[10px\].tracking-\[0\.5em\] {
font-size: 1.05rem; /* 약 17px */
letter-spacing: 0.2em;
color: var(--accent, #ac6938);
opacity: 0.95;
}
@media (min-width: 768px) {
.text-\[10px\].tracking-\[0\.5em\] {
font-size: 1.25rem; /* 약 20px — 원장 요청 상한 */
letter-spacing: 0.24em;
}
}
/* 미션 — 48~128px → 화면에 한눈에 들어오는 크기로 */
h1.break-keep.tracking-tighter,
h1.break-keep.tracking-\[-0\.05em\] {
font-size: clamp(2.05rem, 5.6vw, 4rem);
line-height: 1.34;
margin-bottom: 1.75rem;
}
@media (min-width: 768px) {
h1.break-keep.tracking-tighter,
h1.break-keep.tracking-\[-0\.05em\] {
margin-bottom: 2.25rem;
}
}
/* 병원명과 미션 사이 세로 장식선 — 미션이 작아진 만큼 함께 줄인다 */
.w-\[1px\].h-12 {
height: 2rem;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.w-\[1px\].md\:h-20 {
height: 3rem;
margin-bottom: 1.25rem;
}
}
/* ── 첫 화면 증상 타일: 쉼표에서 줄바꿈 (원장 요청 2026-07-29) ──────────────
* 코어 ServiceTilesSection 은 설명 문구를 글자 그대로 찍기 때문에
*
도 줄바꿈도 먹지 않는다. 코어 파일은 고칠 수 없으므로 CSS 로 살린다.
* 함께 푸는 것: 모바일에서 설명을 한 줄로 자르던 line-clamp-1.
* 문구를 구체적으로 늘린 뒤라 그대로 두면 휴대폰에서 뒷부분이 안 보인다.
* 이 선택자(그리드 안의 a.reveal-on-scroll.group)는 코어 전체에서
* ServiceTilesSection 에만 쓰인다 — 확인 후 사용.
*/
.grid > a.reveal-on-scroll.group p {
white-space: pre-line;
display: block;
-webkit-line-clamp: unset;
overflow: visible;
/* 한글 단어가 줄 끝에서 쪼개지지 않게 ("통/증", "주무셨다/면" 방지) */
word-break: keep-all;
}
/* ── 첫 화면 증상 타일 아이콘 (원장 요청 2026-07-29) ────────────────────────
* 이모지를 전부 뺀 뒤 빈 동그라미만 남아 있어서 질환별 선 그림을 넣는다.
* 코어 ServiceTilesSection 은 아이콘 자리에 글자만 찍을 수 있어 그림이 안 들어간다.
* 코어 수정 불가 → 여기서 배경 그림으로 그려 넣는다.
* 순서가 아니라 링크 주소로 짚기 때문에 타일 순서를 바꿔도 그림이 어긋나지 않는다.
* 선 색은 브랜드 브라운 #ac6938.
*/
.grid > a.reveal-on-scroll.group .w-12.h-12.rounded-full {
background-repeat: no-repeat;
background-position: center;
background-size: 28px 28px;
}
/* 척추 — 마디가 쌓인 기둥 */
.grid > a.reveal-on-scroll.group[href="/programs/spine"] .w-12.h-12.rounded-full {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ac6938%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.2v17.6%22%2F%3E%3Cpath%20d%3D%22M8%206.4h8%22%2F%3E%3Cpath%20d%3D%22M8%2010.1h8%22%2F%3E%3Cpath%20d%3D%22M8%2013.8h8%22%2F%3E%3Cpath%20d%3D%22M8%2017.5h8%22%2F%3E%3C%2Fsvg%3E");
}
/* 어깨 — 한쪽 팔을 위로 드는 사람 */
.grid > a.reveal-on-scroll.group[href="/programs/shoulder"] .w-12.h-12.rounded-full {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ac6938%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211.8%22%20cy%3D%224.6%22%20r%3D%222.3%22%2F%3E%3Cpath%20d%3D%22M11.8%207.2v8.4%22%2F%3E%3Cpath%20d%3D%22M11.8%209.6%207.6%2013.4%22%2F%3E%3Cpath%20d%3D%22M11.8%209.6%2016.8%205.4%22%2F%3E%3Cpath%20d%3D%22M11.8%2015.6%209%2020.4%22%2F%3E%3Cpath%20d%3D%22M11.8%2015.6%2014.6%2020.4%22%2F%3E%3C%2Fsvg%3E");
}
/* 목 — 앞으로 빠진 머리와 목선(옆모습) */
.grid > a.reveal-on-scroll.group[href="/programs/neck"] .w-12.h-12.rounded-full {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ac6938%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228.8%22%20cy%3D%225.4%22%20r%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M11%207.6c1.8%201.9%201.4%203.6-.6%204.8-1.9%201.2-3%202.6-2.4%204.4%22%2F%3E%3Cpath%20d%3D%22M4.6%2018.8c1.6-1.4%203.4-2.1%205.2-2.1h4.2c2%200%203.8.8%205%202.3%22%2F%3E%3C%2Fsvg%3E");
}
/* 발 — 발바닥 윤곽과 발가락 */
.grid > a.reveal-on-scroll.group[href="/programs/foot"] .w-12.h-12.rounded-full {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ac6938%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.4%2021c-2.3%200-3.7-1.7-3.7-4%200-2.8%201.2-4%201.2-6.8%200-3.9%201.7-7%204.5-7%202.3%200%203.5%201.7%203.5%204.5%200%203.4-1.2%205.2-1.2%208%200%203.4-1.7%205.3-4.3%205.3Z%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%226.4%22%20r%3D%221.15%22%2F%3E%3Ccircle%20cx%3D%2218.9%22%20cy%3D%229.4%22%20r%3D%221.05%22%2F%3E%3Ccircle%20cx%3D%2219.4%22%20cy%3D%2212.6%22%20r%3D%220.95%22%2F%3E%3C%2Fsvg%3E");
}
/* 불면 — 달과 잠 */
.grid > a.reveal-on-scroll.group[href="/programs/insomnia"] .w-12.h-12.rounded-full {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ac6938%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014.6A7.4%207.4%200%200%201%209.6%205.2%207.4%207.4%200%201%200%2019%2014.6Z%22%2F%3E%3Cpath%20d%3D%22M14.4%202.6h4.8l-4.8%204.6h4.8%22%2F%3E%3C%2Fsvg%3E");
}
/* 다이어트 — 체중계 눈금과 바늘 */
.grid > a.reveal-on-scroll.group[href="/programs/diet"] .w-12.h-12.rounded-full {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ac6938%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.4%22%2F%3E%3Cpath%20d%3D%22M12%2012%208.6%208.2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%220.9%22%2F%3E%3Cpath%20d%3D%22M12%203.6v1.6%22%2F%3E%3Cpath%20d%3D%22M20.4%2012h-1.6%22%2F%3E%3Cpath%20d%3D%22M12%2020.4v-1.6%22%2F%3E%3Cpath%20d%3D%22M5.2%2012H3.6%22%2F%3E%3C%2Fsvg%3E");
}
/* 오다리 — 바깥으로 벌어진 두 다리
2026-08-03 에 족저근막염 자리를 오다리로 바꾸면서 이 그림을 빠뜨렸다.
그 뒤로 첫 화면 네 번째 칸만 빈 동그라미로 나가고 있었다(2026-08-05 발견).
윗줄의 발 그림(/programs/foot)은 그 과목 페이지가 살아 있어 그대로 둔다. */
.grid > a.reveal-on-scroll.group[href="/programs/bowleg"] .w-12.h-12.rounded-full {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ac6938%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.6%203.4h8.8%22%2F%3E%3Cpath%20d%3D%22M9.8%203.4C9.8%208%205.8%209.6%205.8%2014c0%202.6%201.2%204.8%202.2%206.6%22%2F%3E%3Cpath%20d%3D%22M14.2%203.4c0%204.6%204%206.2%204%2010.6%200%202.6-1.2%204.8-2.2%206.6%22%2F%3E%3C%2Fsvg%3E");
}
/* ── 자가진단 검사 칸 아이콘 (원장 지시 2026-08-05, 2차) ────────────────────
* 첫 화면 「2분이면 지금 상태를 알 수 있습니다」 칸의 세 타일.
* 위 증상 타일은 질환별로 그림이 다르지만, 이 세 개는 같은 성격(검사)이라
* 일부러 같은 그림(체크리스트)을 쓴다 — 한 묶음으로 읽히게 하려는 것이다.
* 위와 같이 순서가 아니라 링크 주소로 짚으므로 타일 차례를 바꿔도 어긋나지 않는다.
*/
.grid > a.reveal-on-scroll.group[href^="/ext/survey-tools/"] .w-12.h-12.rounded-full {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ac6938%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.4%204.6H6.8A1.8%201.8%200%200%200%205%206.4v12.4a1.8%201.8%200%200%200%201.8%201.8h10.4a1.8%201.8%200%200%200%201.8-1.8V6.4a1.8%201.8%200%200%200-1.8-1.8h-1.6%22%2F%3E%3Crect%20x%3D%228.4%22%20y%3D%222.8%22%20width%3D%227.2%22%20height%3D%223.6%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M8.6%2011.4l1.4%201.4%202.6-2.8%22%2F%3E%3Cpath%20d%3D%22M8.6%2016.4l1.4%201.4%202.6-2.8%22%2F%3E%3Cpath%20d%3D%22M15%2011.6h1.2%22%2F%3E%3Cpath%20d%3D%22M15%2016.6h1.2%22%2F%3E%3C%2Fsvg%3E");
}
/* ─────────────────────────────────────────────────────────────
원장 지시 2026-07-31 — 「특화된 진단 시스템」 줄 감추기
FeatureHighlight 칸(첫 화면 '네 가지는 지킵니다', 진료과목 10개의 '왜 그런가')은
맨 아래에 '특화된 진단 시스템'이라는 문구를 무조건 붙인다. 우리가 쓴 말이 아니고
값으로 바꿀 수도 없다(FeatureHighlightSection.astro:146~161 에 박혀 있음).
코어 파일을 고치는 대신 여기서 감춘다 — 이 파일은 코어 업데이트에 지워지지 않는다.
이 클래스 조합은 코어 전체에서 그 자리 한 곳에만 쓰인다(2026-07-31 확인).
───────────────────────────────────────────────────────────── */
.mt-8.pt-6.border-t-2.border-accent\/10 {
display: none;
}
/* ─────────────────────────────────────────────────────────────
원장 지시 2026-07-31 — 의료진이 두 분일 때 오른쪽 빈칸 없애기
의료진 칸은 넓은 화면에서 세 칸 격자로 잡혀 있어(DoctorListSection.astro:70)
두 분만 계시면 오른쪽 한 칸이 비어 보인다. 두 분일 때만 두 칸으로 바꾼다.
세 번째 분이 들어오면 이 규칙은 저절로 적용되지 않고 원래대로 세 칸이 된다.
───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
section.pb-24 > .page-container > .grid:has(> :nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ─────────────────────────────────────────────────────────────
원장 지시 2026-07-31 — 진료과목 그림 자리(빈 회색 상자) 감추기
「치료가 진행되면」 칸과 「어떻게 치료하나」 칸은 그림이 없으면 회색 상자에
'Mechanism Diagram' / 'Product Image' 라는 영어 글씨를 대신 보여준다
(MechanismSection.astro:51, SolutionSection.astro:64).
그림은 나중에 넣기로 했으므로 그때까지 상자째 감춘다 — 옆의 글이 화면 폭을 다 쓴다.
⚠️ 그림을 넣으면 ![]()
가 들어가 이 규칙이 저절로 안 걸리고 그림이 보인다.
(:not(:has(img)) 조건 — 그림 넣은 뒤 이 규칙을 지울 필요 없음)
───────────────────────────────────────────────────────────── */
/* 「치료가 진행되면 무엇이 달라지나요」 옆 그림 자리 */
.flex-1.relative:has(> .aspect-square):not(:has(img)) {
display: none;
}
/* 「어떻게 치료하나」 옆 그림 자리 */
.order-1:has(.aspect-square):not(:has(img)) {
display: none;
}
/* ─────────────────────────────────────────────────────────────
원장 지시 2026-07-31 — 첫 화면 손보기
───────────────────────────────────────────────────────────── */
/* 「무엇이 불편하신가요」 여섯 상자의 오른쪽 화살표(→) 제거
(ServiceTilesSection.astro:83~88) */
a.reveal-on-scroll.group .flex.justify-end.shrink-0 {
display: none;
}
/* 의료진 카드 — 해시태그 아래 소개 글을 감추고, 바로 「의료진 소개 더보기」로 이어지게
(DoctorListSection.astro:102~104. 소개 글은 각 원장 상세 페이지에 그대로 있다)
⚠️ 첫 화면에서만. 「의료진 소개」 제목 칸(ServiceTiles) 바로 다음에 오는 의료진 칸을 가리킨다.
/doctors 페이지에서는 앞 칸이 PageIntro 라 이 규칙이 안 걸리고 소개 글이 그대로 보인다. */
section.py-24.bg-white + section.pb-24 p.line-clamp-3 {
display: none;
}
section.py-24.bg-white + section.pb-24 .flex.flex-wrap.gap-1\.5 {
margin-bottom: 0;
}
/* 제목 아래 안내 문장을 뺀 칸은 제목과 내용 사이 여백도 그만큼 줄인다
(ServiceTilesSection.astro:39 의 mb-16 → 안내 문장이 비었을 때만 절반으로) */
.text-center.mb-16:has(> p:empty) {
margin-bottom: 2.5rem;
}
/* ─────────────────────────────────────────────────────────────
원장 지시 2026-07-31 — 맨 아래 진료시간의 「점심시간」 글자 깨짐 고치기
점심시간 줄의 값('평일 13:00-14:00 / 주말·공휴일 13:00-13:30')이 한 줄로 고정되어 있고
줄 전체 폭이 280px 로 묶여 있어(BusinessHours.astro) 왼쪽 '점심시간' 이 글자당 한 줄씩
쪼개졌다. 이름은 한 줄로 붙이고, 대신 시간 쪽이 두 줄로 접히게 한다.
───────────────────────────────────────────────────────────── */
footer li.max-w-\[280px\] > span:first-child {
white-space: nowrap;
flex-shrink: 0;
}
footer li.max-w-\[280px\] > span.whitespace-nowrap:last-child {
white-space: normal;
text-align: right;
}
/* 「오시는 방법」 칸 — 아이콘 자리 감춤
TransportInfo 는 아이콘으로 이모지를 받는데(TransportInfo.astro:50) 글쓰기 기준상
이모지를 쓰지 않기로 했다. 빈 값으로 두면 48px 빈 상자가 남으므로 상자째 감춘다. */
section .grid > div > .flex.items-center.gap-4 > .w-12.h-12.rounded-xl {
display: none;
}
/* ─────────────────────────────────────────────────────────────
비대면 진료 첫 칸의 이모지(🏥 📱) 감추기
TelemedicineHeroSection.astro:73, 91 에 박혀 있어 값으로 못 바꾼다.
글쓰기 기준(copy-standard.md §6)상 이모지는 쓰지 않는다.
───────────────────────────────────────────────────────────── */
section h3.flex.items-center.gap-2 > span.text-2xl:first-child {
display: none;
}
/* ─────────────────────────────────────────────────────────────
원장 지시 2026-08-04 — 비용 표의 「Best Choice」 영문 딱지를 우리말로
PricingSection.astro:74 에 'Best Choice' 가 영문 그대로 박혀 있어 값으로 못 바꾼다.
(같은 부류: CORE SOLUTION / Mechanism Diagram 등 코어 하드코딩 영문)
글자만 우리말로 갈아 끼운다 — 딱지의 색·모양은 코어 것을 그대로 쓴다.
리스크: 코어가 이 딱지 마크업(absolute + uppercase)을 바꾸면 영문이 다시 드러난다.
core:pull 후 다이어트 페이지 비용 표를 눈으로 확인할 것.
───────────────────────────────────────────────────────────── */
#pricing article > div.absolute.uppercase {
font-size: 0;
}
#pricing article > div.absolute.uppercase::after {
content: "가장 많이 선택하십니다";
font-size: 0.75rem;
line-height: 1rem;
text-transform: none;
letter-spacing: normal;
white-space: nowrap;
}
/* ─────────────────────────────────────────────────────────────
원장 지시 2026-08-04 — 자주 묻는 질문 「더 보기」 접기 단추
접었다 펴는 자리()의 브라우저 기본 삼각형 표시를 감춘다.
우리 화면은 단추 안에 화살표를 따로 그리고 있어 삼각형이 겹쳐 보인다.
list-none 만으로는 사파리(아이폰)에서 안 없어져 이 줄이 필요하다.
───────────────────────────────────────────────────────────── */
summary::-webkit-details-marker {
display: none;
}
/* ─────────────────────────────────────────────────────────────
원장 지시 2026-08-04 — 우하단 떠다니는 문의 버튼에 글자를 넣고 아이콘을 키운다
지금까지 60px 동그란 아이콘 하나뿐이라 무엇을 누르는 단추인지 알기 어려웠다.
→ 「바로 문의하기」 글자를 붙이고 아이콘을 28px → 34px 로 키운다.
글자는 코어 파일(core/public/chat-widget.js)의 버튼 안에 없다. 그 파일은 본부에서
내려오는 것이라 고치면 다음 업데이트에 덮어씌워진다 → CSS 로 글자를 붙인다.
선택자에 #brd-chat-container 를 앞에 붙인 이유: 그 파일이 화면에 뜬 뒤 스스로
스타일을 심어서, 같은 세기로는 우리 것이 밀린다. 아이디 두 개로 세기를 높인다.
리스크: 본부가 버튼 구조(#brd-chat-button)를 바꾸면 글자가 조용히 사라진다.
업데이트 수신 후 오른쪽 아래 단추를 눈으로 확인할 것.
───────────────────────────────────────────────────────────── */
#brd-chat-container #brd-chat-button {
width: auto;
min-width: 60px;
height: 60px;
padding: 0 22px;
gap: 10px;
border-radius: 30px;
}
#brd-chat-container #brd-chat-button svg {
width: 34px;
height: 34px;
order: 1;
}
#brd-chat-container #brd-chat-button::before {
content: "바로 문의하기";
order: 2;
color: #ffffff;
font-weight: 700;
font-size: 15px;
letter-spacing: -0.01em;
white-space: nowrap;
}
/* ─────────────────────────────────────────────────────────────
원장 지시 2026-08-04(2차) — 합친 칸의 머릿글을 문장마다 줄바꿈해 정돈
문장마다 줄을 나눠도 코어가 이 문단을 가운데 정렬로 그려서, 줄 끝이 들쭉날쭉해
오히려 읽기 어려워진다. 이 문단만 왼쪽 정렬로 돌린다(제목은 가운데 그대로).
어느 칸인지 집는 방법: 이 머릿글 바로 뒤에 갈래 카드 격자(.grid.lg:gap-8)가 오는
칸은 SolutionTypes 하나뿐이다. 바로 위 「이런 불편이 있으신가요」 칸도 머릿글
클래스가 같아서, 클래스만으로 집으면 그 칸까지 왼쪽으로 밀린다.
리스크: 코어가 격자의 간격 클래스를 바꾸면 이 정렬이 조용히 풀린다(글은 그대로 나온다).
───────────────────────────────────────────────────────────── */
.section-header:has(+ .grid.lg\:gap-8) .section-description {
text-align: left;
max-width: 40rem;
}
/* ─────────────────────────────────────────────────────────────
원장 지시 2026-08-05 — 영문 딱지를 뺀다
사이트 전체가 한글인데 이 자리만 영문이 나가고 있었다.
· 비대면 진료 페이지 「TREATMENT PROCESS」 (ProcessSection.astro:61)
코어에 글자가 박혀 있어 값으로 바꿀 수 없다. 바로 밑 제목이 한글로 같은 말을
이미 하고 있어(「신청부터 받으시기까지」) 딱지를 없애도 뜻이 빠지지 않는다.
같은 규칙이 MechanismSection.astro:31 의 「CORE SOLUTION」도 함께 가린다.
다만 그 칸은 2026-08-04 에 진료과목 열 곳을 merged 로 바꾸면서 아예 나가지
않게 됐다(build-diseases.js 의 `if (d.merged) {}` — mechanism 을 push 하지
않는다). 지금은 사이트 어디에도 안 보이지만, 나중에 merged 를 끄면 그 칸이
되살아나므로 규칙은 두 곳 모두 덮게 두었다.
어느 것인지 집는 방법: 이 두 곳만 span 에 uppercase + tracking-wider + text-sm 이
함께 붙는다. 비슷하게 생긴 다른 딱지(StepGuide·SideEffectsGrid)는 tracking-widest 라
여기 걸리지 않고, 나머지(의료진·가격표·오시는 길)는 span 이 아니다.
되돌리려면 이 블록만 지우면 된다.
리스크: 코어가 이 클래스 조합을 바꾸면 딱지가 조용히 다시 나타난다(사이트는 멀쩡).
───────────────────────────────────────────────────────────── */
span.font-bold.tracking-wider.text-sm.uppercase.block {
display: none;
}
/* ─────────────────────────────────────────────────────────────
원장 확인 2026-08-06 — 비용 표 아래 안내를 사실에 맞게
코어가 비용 표 아래에 늘 이 문장을 붙인다:
「* 개인의 처방에 따라 복용량과 가격은 달라질 수 있습니다.」
당비정은 값이 달라지지 않는다(원장 확인 2026-08-06 — 세 가지 모두 같은 약,
기간만 다르다. 조절은 드시는 양으로 하고 값은 그대로다). 값이 달라질 수
있다고 적어 두면 실제와 다르고, 오시기 전에 값을 가늠하지 못하시게 된다.
i18n.ts 의 pricing.disclaimer 라 페이지 값으로는 못 바꾼다. 코어를 고치지
않고 글자만 갈아 끼운다 — 위 「가장 많이 선택하십니다」와 같은 방법이다.
이 자리는 사이트에서 다이어트 페이지 비용 표 한 곳뿐이다(비용 표를 쓰는
과목이 다이어트 하나 — build-diseases.js 의 pricing). 다른 과목에 비용 표를
새로 넣으면 그 페이지에도 이 문장이 나가므로 그때 다시 볼 것.
되돌리려면 이 블록만 지우면 코어 문장이 그대로 나온다.
리스크: 코어가 이 자리 클래스 조합을 바꾸면 코어 문장이 조용히 다시 나온다
(사이트는 멀쩡). core:pull 후 다이어트 페이지 비용 표를 눈으로 볼 것.
───────────────────────────────────────────────────────────── */
#pricing .mt-8.text-center.text-xs {
font-size: 0;
}
#pricing .mt-8.text-center.text-xs::after {
/* 원장 지시 2026-08-07 — 앞 문장(「드시는 양은 체중에 따라 조절해 드립니다」)을 뺐다.
「같은 약으로 양을 조절한다」는 얘기를 사이트에서 전부 빼기로 하심. */
content: "* 같은 기간이면 비용은 동일합니다. 택배비는 받지 않습니다.";
font-size: 0.75rem;
line-height: 1rem;
}
/* ─────────────────────────────────────────────────────────────
원장 지시 2026-08-07 — 비용 표 금액을 원 단위로
코어(i18n.ts formatPrice)는 한국어에서 금액을 만원 단위로 줄여 쓴다.
만 단위로 딱 떨어지면 「17만원」, 아니면 소수점을 붙여 「71.4만원」이 된다.
6개월 값이 714,000원으로 바뀌면서(원장 지시 2026-08-07) 「71.4만원」이
되었고, 위 두 칸(17만원 · 39만원)과 모양이 어긋났다.
→ 세 칸 모두 원 단위로 맞춘다. 금액을 한눈에 정확히 보시게 하는 쪽이 낫다.
위 두 블록(「가장 많이 선택하십니다」· 표 아래 안내)과 같은 방법 —
코어를 고치지 않고 글자만 갈아 끼운다.
⚠️ 금액을 바꾸면 build-diseases.js 의 pricing.plans 와 여기 세 줄을
반드시 같이 고쳐야 한다. 한쪽만 고치면 화면과 실제가 어긋난다.
(build-diseases.js 쪽이 데이터의 기준이고, 여기는 보이는 글자다)
이 자리는 다이어트 페이지 비용 표 한 곳뿐이다. 다른 과목에 비용 표를
새로 넣으면 그 페이지 금액도 여기 규칙에 걸리므로 그때 다시 볼 것.
되돌리려면 이 블록만 지우면 코어 표기(17만원 · 39만원 · 71.4만원)로 돌아간다.
리스크: 코어가 이 자리 클래스 조합을 바꾸면 코어 표기가 조용히 다시 나온다
(사이트는 멀쩡). core:pull 후 다이어트 페이지 비용 표를 눈으로 볼 것.
───────────────────────────────────────────────────────────── */
#pricing article .text-4xl.font-extrabold {
font-size: 0;
}
#pricing article .text-4xl.font-extrabold::after {
font-size: 2.25rem;
line-height: 2.5rem;
letter-spacing: -0.025em;
}
#pricing article:nth-of-type(1) .text-4xl.font-extrabold::after { content: "170,000원"; }
#pricing article:nth-of-type(2) .text-4xl.font-extrabold::after { content: "390,000원"; }
#pricing article:nth-of-type(3) .text-4xl.font-extrabold::after { content: "714,000원"; }