/* 모듈 스킨을 테마 색으로 잇는 다리.
   코어 스킨은 저마다 제 색을 들고 있어서, 손대지 않으면 테마와 따로 논다.
   스킨 파일을 고치는 대신 여기서 색과 표적 크기만 덮어쓴다. */

/* ── 병원 모듈. 스킨이 --hp-theme-* 를 먼저 보므로 값만 얹으면 된다 ── */
.nu .hp {
	--hp-theme-ink: var(--nu-ink);
	--hp-theme-ink-sub: var(--nu-ink-sub);
	--hp-theme-muted: var(--nu-muted);
	--hp-theme-line: var(--nu-line);
	--hp-theme-bg: var(--nu-bg);
	--hp-theme-surface: var(--nu-surface);
	--hp-theme-brand: var(--nu-brand);
	--hp-theme-brand-soft: var(--nu-brand-soft);
	--hp-theme-accent: var(--nu-accent);
	--hp-theme-warn: var(--nu-urgent);
	--hp-theme-warn-soft: var(--nu-urgent-soft);
	max-width: var(--nu-w);
	font-family: var(--nu-font);
}

/* ── 게시판 ──
   게시판 스킨은 제 색을 --hr-* 로 부른다. 스킨 파일을 고치지 않고
   여기서 누리 색을 물려 준다. 코어와 계속 견줄 수 있다. */
.nu {
	--hr-font: var(--nu-font);
	--hr-bg: var(--nu-bg);
	--hr-surface: var(--nu-surface);
	--hr-ink: var(--nu-ink);
	--hr-ink-sub: var(--nu-ink-sub);
	--hr-muted: var(--nu-muted);
	--hr-line: var(--nu-line);
	--hr-line-soft: var(--nu-surface-2);
	--hr-brand: var(--nu-brand);
	--hr-brand-dark: var(--nu-brand-dark);
	--hr-brand-light: rgba(11, 92, 171, .14);
	--hr-brand-soft: var(--nu-brand-soft);
	--hr-danger: var(--nu-urgent);
	--hr-btn-face: var(--nu-bg);
	--hr-btn-line: var(--nu-line-strong);
	--hr-btn-strong: var(--nu-brand);
	--hr-btn-strong-hover: var(--nu-brand-dark);
	--hr-success: var(--nu-accent);
	--hr-w: var(--nu-w);
	--hr-radius: 14px;
	--hr-radius-sm: 10px;
	--hr-radius-btn: 10px;
	--hr-radius-pill: 999px;
	--hr-shadow: 0 2px 18px rgba(13, 33, 54, .07);
}

/* 회원과 쪽지 스킨은 --zm-* 를 부른다. 같은 색을 이 이름으로도 물려 준다 */
.nu {
	--zm-bg: var(--nu-bg);
	--zm-surface: var(--nu-surface);
	--zm-text: var(--nu-ink);
	--zm-text-sub: var(--nu-ink-sub);
	--zm-border: var(--nu-line);
	--zm-line-strong: var(--nu-line-strong);
	--zm-brand: var(--nu-brand);
	--zm-brand-hover: var(--nu-brand-dark);
	--zm-brand-light: rgba(11, 92, 171, .14);
	--zm-brand-soft: var(--nu-brand-soft);
	--zm-btn-face: var(--nu-bg);
	--zm-btn-line: var(--nu-line-strong);
	--zm-danger: var(--nu-urgent);
	--zm-radius: 14px;
}

/* 게시판은 바깥 한 겹(.hr.hrb)에만 폭을 준다.
   목록·본문·댓글에 따로 주면 조각마다 폭이 달라져 화면이 어수선해진다. */
.nu .hr.hrb { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* ── 입력칸. 병원 화면은 표적이 커야 한다 ── */
.nu input[type="text"],
.nu input[type="password"],
.nu input[type="email"],
.nu input[type="tel"],
.nu input[type="number"],
.nu input[type="search"],
.nu input[type="date"],
.nu select,
.nu textarea {
	font-family: var(--nu-font);
	font-size: 16px;
	color: var(--nu-ink);
}
/* 스킨이 스스로 꾸미지 않는 입력칸만 거든다. 표적은 병원 기준으로 크게 */
.nu form input[type="text"],
.nu form input[type="password"],
.nu form input[type="email"],
.nu form input[type="tel"],
.nu form select {
	min-height: 48px;
	border-radius: 10px;
}
.nu input:focus,
.nu select:focus,
.nu textarea:focus {
	outline: none;
	border-color: var(--nu-brand);
	box-shadow: 0 0 0 3px var(--nu-brand-soft);
}

/* ── 예약 모듈 ── */
.nu .rsv,
.nu .reservation { font-family: var(--nu-font); max-width: var(--nu-w); margin-left: auto; margin-right: auto; }

/* ── 게시판·회원 스킨이 함께 쓰는 부품 ──
   스킨 파일이 .hr-btn, .hr-pages, .hr-table 같은 공용 부품을 테마에서 받아 쓴다.
   테마에 없으면 꾸밈이 통째로 빠진다. 병원 치수(글자 크기·표적)로 맞춰 둔다. */
.hr-inner { width: 100%; max-width: var(--hr-w); margin: 0 auto; padding: 0; box-sizing: border-box; }
@media (max-width: 1240px) {
	.hr-inner { padding: 0 clamp(14px, 3vw, 24px); }
}

.hr-btn,
.hr a.hr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 15px;
	border: 1px solid var(--hr-btn-line);
	border-radius: var(--hr-radius-btn);
	background: var(--hr-btn-face);
	color: var(--hr-ink);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .14s, background-color .14s, color .14s;
}
.hr-btn:hover { border-color: var(--hr-muted); background-color: var(--hr-surface); }
.hr-btn-primary,
.hr a.hr-btn-primary {
	background: var(--hr-btn-strong);
	border-color: var(--hr-btn-strong);
	color: #fff;
}
.hr-btn-primary:hover {
	background: var(--hr-btn-strong-hover);
	border-color: var(--hr-btn-strong-hover);
	color: #fff;
}
.hr-btn-sm { padding: 6px 12px; font-size: 12.5px; }
.hr-btn-lg { padding: 12px 24px; font-size: 15px; }
.hr-btn:disabled, .hr-btn.is-disabled { opacity: .55; pointer-events: none; }

.hr-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border: 1px solid var(--hr-line);
	border-radius: var(--hr-radius-btn);
	background: var(--hr-bg);
	color: var(--hr-ink-sub);
	font-size: 13px;
	font-weight: 600;
}
.hr-chip:hover { border-color: var(--hr-brand); color: var(--hr-brand); }
.hr-chip.is-on { background: var(--hr-brand); border-color: var(--hr-brand); color: #fff; }
.hr-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 7px;
	background: var(--hr-brand-soft);
	color: var(--hr-brand);
	font-size: 11.5px;
	font-weight: 800;
}
.hr-badge.is-muted { background: var(--hr-surface); color: var(--hr-muted); }
.hr-badge.is-danger { background: rgba(229, 72, 77, .1); color: var(--hr-danger); }
.hr-badge.is-success { background: rgba(15, 157, 99, .1); color: var(--hr-success); }

.hr-card {
	border: 1px solid var(--hr-line);
	border-radius: var(--hr-radius);
	background: var(--hr-bg);
	padding: 24px;
}
.hr-card-hover { transition: transform .16s, border-color .16s, box-shadow .16s; }
.hr-card-hover:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--hr-brand) 55%, transparent); box-shadow: var(--hr-shadow); }

.hr-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.hr-field > label { font-size: 14px; font-weight: 700; }
.hr-field > label em { color: var(--hr-danger); font-style: normal; }
.hr input[type="text"], .hr input[type="password"], .hr input[type="email"],
.hr input[type="search"], .hr input[type="tel"], .hr input[type="number"],
.hr input[type="date"], .hr select, .hr textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--hr-line);
	border-radius: var(--hr-radius-sm);
	background: var(--hr-bg);
	color: var(--hr-ink);
	font: inherit;
	font-size: 15px;
	outline: none;
	transition: border-color .14s, box-shadow .14s;
}
/* select 는 상하 padding 대신 높이로 맞춘다. padding 이 있으면 고정 높이 안에서 글자가 아래로 밀려 잘린다 */
.hr select {
	height: 46px;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 40px;
	line-height: normal;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b5cab' d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 20px;
	cursor: pointer;
}
.hr select:hover { border-color: var(--hr-brand); }
.hr input:focus, .hr select:focus, .hr textarea:focus {
	border-color: var(--hr-brand);
	box-shadow: 0 0 0 3px var(--hr-brand-soft);
}
.hr textarea { resize: vertical; line-height: 1.7; }
.hr-field-hint { margin: 0; font-size: 12.5px; color: var(--hr-muted); }
.hr-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

.hr-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hr-table th, .hr-table td { padding: 15px 12px; text-align: left; border-bottom: 1px solid var(--hr-line-soft); }
.hr-table thead th {
	border-bottom: 1px solid var(--hr-line);
	color: var(--hr-muted);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}
.hr-table tbody tr:hover { background: var(--hr-surface); }

.hr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; }
.hr-eyebrow { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--hr-brand); text-transform: uppercase; }
.hr-title { margin: 6px 0 0; font-size: clamp(24px, 3.2vw, 32px); }
.hr-desc { margin: 8px 0 0; color: var(--hr-ink-sub); font-size: 15px; }

.hr-pages { display: flex; justify-content: center; align-items: center; gap: 2px; margin: 26px 0 0; }
.hr-pages a, .hr-pages strong {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: var(--hr-radius-btn);
	font-size: 13px;
	font-weight: 500;
	color: var(--hr-ink-sub);
}
.hr-pages a:hover { background: var(--hr-surface); color: var(--hr-brand); }
.hr-pages strong { color: var(--hr-brand); font-weight: 800; }

.hr-empty { padding: 70px 20px; text-align: center; color: var(--hr-muted); }

.hr-notice { margin: 0 0 16px; padding: 14px 18px; border-radius: var(--hr-radius-sm); background: var(--hr-surface); color: var(--hr-ink-sub); font-size: 14px; }
.hr-notice.is-error { background: rgba(229, 72, 77, .08); color: var(--hr-danger); }
.hr-notice.is-success { background: rgba(15, 157, 99, .08); color: var(--hr-success); }

@media (max-width: 640px) {
	.hr { font-size: 15px; }
	.hr-card { padding: 18px 16px; }
	.hr-table th, .hr-table td { padding: 12px 8px; }
}

/* ── 병원 치수 보정 ──
   위 부품은 일반 사이트 기준이라 표적과 글자가 작다.
   병원은 눈이 어두운 분과 급한 분이 함께 보므로 키워 둔다. */
.nu .hr-pages { gap: 6px; margin-top: 36px; }
.nu .hr-pages a,
.nu .hr-pages strong {
	min-width: 42px;
	width: auto;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--nu-line);
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.nu .hr-pages a:hover { border-color: var(--nu-brand); background: var(--nu-brand-soft); color: var(--nu-brand); }
.nu .hr-pages strong { background: var(--nu-brand); border-color: var(--nu-brand); color: #fff; }

.nu .hr-btn { min-height: 44px; padding: 10px 20px; font-size: 15px; font-weight: 700; }
.nu .hr-btn-sm { min-height: 38px; padding: 8px 15px; font-size: 14px; }
.nu .hr-btn-lg { min-height: 52px; padding: 14px 28px; font-size: 16.5px; }

.nu .hr-chip { min-height: 40px; padding: 9px 16px; font-size: 14.5px; border-radius: var(--nu-radius-pill); }

.nu .hr-table { font-size: 15.5px; }
.nu .hr-table th, .nu .hr-table td { padding: 16px 12px; }
.nu .hr-table thead th { font-size: 14px; background: var(--nu-surface); color: var(--nu-ink-sub); }

.nu .hr input[type="text"], .nu .hr input[type="password"], .nu .hr input[type="email"],
.nu .hr input[type="search"], .nu .hr input[type="tel"], .nu .hr input[type="number"],
.nu .hr input[type="date"], .nu .hr textarea { padding: 13px 15px; font-size: 16px; }
.nu .hr select { height: 50px; font-size: 16px; }

/* 검색 줄은 스킨이 제 치수로 짜 두었다. 위 보정이 덮으면
   아이콘 자리(왼쪽 여백)가 사라지고 select 화살표가 지워진다. */
.nu .hrb .hrb-search select {
	height: 44px;
	padding: 0 34px 0 12px;
	font-size: 14.5px;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--hr-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b5cab' d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
	background-size: 18px;
	cursor: pointer;
}
.nu .hrb .hrb-search select:hover { border-color: var(--hr-brand); }
.nu .hrb .hrb-search-box input[type="text"] {
	height: 44px;
	width: 260px;
	padding: 0 14px 0 38px;
	font-size: 15px;
}
.nu .hrb-search-box svg { left: 13px; width: 17px; height: 17px; }
.nu .hrb .hrb-write-top { min-height: 44px; }

.nu .hr-title { letter-spacing: -.035em; }
.nu .hr-empty { font-size: 15.5px; }

/* ── 안내 페이지 (고객센터, 진료과·의료진) ──
   문서 본문에는 <style> 을 둘 수 없다. 코어 정화기가 걷어낸다.
   꾸밈은 테마에 두고 본문에는 클래스만 남긴다. */

/* 고객센터 */
.nu .sup { max-width: 1000px; margin: 0 auto; }
.nu .sup-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 48px; }
.nu .sup-tel { padding: 30px 32px; border: 1px solid var(--nu-line); border-radius: 18px; background: var(--nu-surface); }
.nu .sup-tel.is-urgent { border-color: rgba(196, 52, 42, .3); background: var(--nu-urgent-soft); }
.nu .sup-tel-label { display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--nu-brand); }
.nu .sup-tel.is-urgent .sup-tel-label { color: var(--nu-urgent); }
.nu .sup-tel-num { display: block; margin-top: 6px; font-size: 34px; font-weight: 800; letter-spacing: -.04em; color: var(--nu-ink); font-variant-numeric: tabular-nums; }
.nu .sup-tel.is-urgent .sup-tel-num { color: var(--nu-urgent); }
.nu .sup-tel-hours { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--nu-ink-sub); }

.nu .sup-sec { margin-bottom: 52px; }
.nu .sup-h2 { margin: 0 0 20px; font-size: 23px; font-weight: 800; letter-spacing: -.035em; }
.nu .sup-h3 { margin: 30px 0 12px; font-size: 15px; font-weight: 800; letter-spacing: .08em; color: var(--nu-brand); }

.nu .sup-desks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.nu .sup-desk { padding: 22px 24px; border: 1px solid var(--nu-line); border-radius: 14px; }
.nu .sup-desk b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.025em; }
.nu .sup-desk-do { display: block; margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--nu-ink-sub); }
.nu .sup-desk-where { display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: var(--nu-radius-pill); background: var(--nu-surface); font-size: 12.5px; font-weight: 700; color: var(--nu-ink-sub); }
.nu .sup-desk-tel { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--nu-brand); font-variant-numeric: tabular-nums; }

.nu .sup-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.nu .sup-jump a { padding: 9px 17px; border: 1px solid var(--nu-line); border-radius: var(--nu-radius-pill); font-size: 14.5px; font-weight: 700; color: var(--nu-ink-sub); }
.nu .sup-jump a:hover { border-color: var(--nu-brand); color: var(--nu-brand); }
.nu .sup-group { scroll-margin-top: 130px; }

.nu .sup-faq { border-bottom: 1px solid var(--nu-line); }
.nu .sup-faq summary { position: relative; padding: 20px 44px 20px 4px; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; cursor: pointer; list-style: none; }
.nu .sup-faq summary::-webkit-details-marker { display: none; }
.nu .sup-faq summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; margin-top: -6px; border-right: 2px solid var(--nu-muted); border-bottom: 2px solid var(--nu-muted); transform: rotate(45deg); transition: transform .18s; }
.nu .sup-faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.nu .sup-faq summary:hover { color: var(--nu-brand); }
.nu .sup-faq-body { padding: 0 4px 22px; font-size: 15.5px; line-height: 1.85; color: var(--nu-ink-sub); }

.nu .sup-cta { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding: 34px 36px; border-radius: 20px; background: var(--nu-deep); color: #fff; }
.nu .sup-cta-word h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.nu .sup-cta-word p { margin: 8px 0 0; max-width: 460px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .78); }
.nu .sup-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.nu a.sup-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 10px; font-size: 16px; font-weight: 700; color: #fff; }
.nu a.sup-btn:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.nu a.sup-btn.is-primary { background: #fff; border-color: #fff; color: var(--nu-deep); }
.nu a.sup-btn.is-primary:hover { background: #e8eef5; color: var(--nu-deep); }

.nu .sup-note { margin: 26px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--nu-surface); font-size: 14px; color: var(--nu-muted); }

@media (max-width: 720px) {
	.nu .sup-tel { padding: 24px 22px; }
	.nu .sup-tel-num { font-size: 28px; }
	.nu .sup-cta { padding: 26px 22px; }
	.nu .sup-cta-btns { width: 100%; }
	.nu a.sup-btn { flex: 1 1 auto; }
}

/* 진료과와 의료진 */
.nu .hdx { max-width: 1000px; margin: 0 auto; }
.nu .hdx-lead { margin: 0 0 26px; font-size: 17px; line-height: 1.8; color: var(--nu-ink-sub); }
.nu .hdx-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid var(--nu-line); }
.nu .hdx-jump a { padding: 10px 18px; border: 1px solid var(--nu-line); border-radius: var(--nu-radius-pill); font-size: 15px; font-weight: 700; color: var(--nu-ink-sub); }
.nu .hdx-jump a:hover { border-color: var(--nu-brand); color: var(--nu-brand); }
.nu .hdx-group { margin-bottom: 56px; scroll-margin-top: 130px; }
.nu .hdx-group-title { margin: 0 0 20px; font-size: 15px; font-weight: 800; letter-spacing: .1em; color: var(--nu-brand); }
.nu .hdx-dept { padding: 26px 0; border-top: 1px solid var(--nu-line); }
.nu .hdx-dept-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.nu .hdx-dept-head h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.nu .hdx-dept-head p { flex: 1 1 260px; margin: 0; font-size: 15px; color: var(--nu-ink-sub); }
.nu a.hdx-book { flex: none; display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--nu-brand); border-radius: 8px; font-size: 14.5px; font-weight: 700; color: var(--nu-brand); }
.nu a.hdx-book:hover { background: var(--nu-brand); color: #fff; }
.nu .hdx-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.nu .hdx-docs a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--nu-line); border-radius: 12px; }
.nu .hdx-docs a:hover { border-color: var(--nu-brand); background: var(--nu-brand-soft); }
.nu .hdx-face { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--nu-surface-2); }
.nu .hdx-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nu .hdx-face i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-style: normal; font-size: 19px; font-weight: 800; color: var(--nu-brand); }
.nu .hdx-docs b { display: block; font-size: 15.5px; font-weight: 700; }
.nu .hdx-docs em { display: block; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--nu-brand); }
.nu .hdx-docs span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--nu-muted); }
@media (max-width: 720px) { .nu .hdx-dept-head h3 { font-size: 19px; } }