/* =========================================================
   user.base.css — tokens / base reset / scrollbar / site header / site footer
   ========================================================= */

/* ===== Tokens ============================================ */
:root {
	--unc-brand:        #24D22C;
	--unc-brand-strong: #0F7E18;   /* 텍스트/강조용 dark green (AA on white/brand-soft) */
	--unc-brand-text:   #0F7E18;
	--unc-brand-soft:   #E8FBEB;

	--unc-ink:    #1A1D21;
	--unc-ink-2:  #2C3036;
	--unc-ink-3:  #4A5159;
	--unc-muted:  #626B75;
	--unc-muted-2:#67707A;         /* WCAG AA 4.5+ on white + brand-soft (was #9AA1A8 — 2.85:1) */

	--unc-line:   #ECEFEC;
	--unc-line-2: #E2E6E3;
	--unc-bg-soft:#F4FAF4;
	--unc-danger: #DC2626;
	--unc-danger-soft: #FEF6F6;

	--unc-radius-sm: 8px;
	--unc-radius-md: 12px;
	--unc-radius-lg: 20px;
	--unc-radius-pill: 999px;

	--unc-shadow-sm: 0 4px 12px rgba(15, 42, 18, 0.05);
	--unc-shadow-md: 0 1px 0 rgba(15, 42, 18, 0.03), 0 12px 32px rgba(15, 42, 18, 0.06);

	--unc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 전 사용자 페이지 공통 rem 기준.
   모바일 디자인 기준 폭은 360px이며 1rem은 항상 16px로 유지한다. */
html { font-size:1rem; line-height:1.5; }
@media (max-width:600px) {
	html { font-size:1rem; }
}


/* ===== Base ============================================== */
body {
	background:#fff; color:var(--unc-ink); line-height:1.5;
	-webkit-font-smoothing:antialiased;
}
[hidden] { display:none !important; }

/* legacy user.css 의 `header { position:fixed }` reset — site header (data-user-header) 외 모든 header */
header:not([data-user-header]) {
	position:static !important; width:auto; left:auto; top:auto; z-index:auto;
	background:transparent; border:0;
}


/* ===== Scrollbar: 모든 scroll 가능 영역 통일 (얇은 회색) ===== */
.search-list,
.branch-select__panel,
.time-select__panel,
.popup-box .popup-body,
.popup-box .box,
[data-main-inline-panel] .popup-body {
	scrollbar-width:thin;
	scrollbar-color:var(--unc-line-2) transparent;
}
.search-list::-webkit-scrollbar,
.branch-select__panel::-webkit-scrollbar,
.time-select__panel::-webkit-scrollbar,
.popup-box .popup-body::-webkit-scrollbar,
.popup-box .box::-webkit-scrollbar,
[data-main-inline-panel] .popup-body::-webkit-scrollbar { width:6px; height:6px; }
.search-list::-webkit-scrollbar-thumb,
.search-list .search-list__items::-webkit-scrollbar-thumb,
.input-list-box ul::-webkit-scrollbar-thumb,
.branch-select__panel::-webkit-scrollbar-thumb,
.branch-select__panel .branch-select__list::-webkit-scrollbar-thumb,
.select-box > div dl::-webkit-scrollbar-thumb,
.time-select__panel::-webkit-scrollbar-thumb,
.popup-box .popup-body::-webkit-scrollbar-thumb,
.popup-box .box::-webkit-scrollbar-thumb,
[data-main-inline-panel] .popup-body::-webkit-scrollbar-thumb {
	background:var(--unc-line-2) !important; border-radius:4px;
	width:6px !important;
}
/* inner scrollable element (ul/dl)도 같이 통일 */
.input-list-box ul,
.select-box > div dl,
.search-list .search-list__items,
.branch-select__panel .branch-select__list {
	scrollbar-width:thin;
	scrollbar-color:var(--unc-line-2) transparent;
}
.input-list-box ul::-webkit-scrollbar,
.select-box > div dl::-webkit-scrollbar { width:6px !important; }
.search-list::-webkit-scrollbar-track,
.branch-select__panel::-webkit-scrollbar-track,
.time-select__panel::-webkit-scrollbar-track,
.popup-box .popup-body::-webkit-scrollbar-track,
.popup-box .box::-webkit-scrollbar-track,
[data-main-inline-panel] .popup-body::-webkit-scrollbar-track {
	background:transparent;
}

.container { width:100%; max-width:1080px; padding:0 24px; margin:0 auto; }
/* mobile 폼 영역만 좁게 — 헤더/푸터 container 는 일반 폭 유지 */
body.mobile main .container { max-width:430px; padding:0 20px; }
/* `mobile` 클래스가 오래된 PHP/HTML 캐시에 남아도 PC 다열 페이지를 430px에
	가두지 않는다. 인증 단일열 화면은 아래 레이아웃을 포함하지 않아 영향이 없다. */
@media (min-width:992px) {
	body.mobile main .container:has(.main-layout),
	body.mobile main .container:has(.mypage-layout),
	body.mobile main .container:has(.detail-page__layout),
	body.mobile main .container:has(.reserve-page__layout) {
		max-width:1080px;
		padding-left:24px;
		padding-right:24px;
	}
}

/* fixed 헤더 높이만큼 본문 위에 여백 확보 (헤더와 충돌 방지) */
/* 하단 padding 으로 마지막 콘텐츠가 footer 와 붙는 현상 방지 — 전 페이지 공통 */
main { padding-top:64px; padding-bottom:80px; }
@media (max-width:991px) { main { padding-top:56px; padding-bottom:48px; } }


/* ===== Site header (rendered by user-components.js) ====== */
/* user-components.js 내부 클래스명은 BEMify 전 그대로 사용 */
[data-user-header] {
	position:fixed; left:0; top:0; width:100%; z-index:1000;
	background:#fff; border-bottom:1px solid var(--unc-line);
}
[data-user-header] .container {
	display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
	min-height:64px;
}
[data-user-header] .header-logo {
	display:flex; align-items:center; gap:10px; min-width:0;
}
@media (max-width:991px) {
	[data-user-header] .container { min-height:56px; }
}
[data-user-header] .header-logo h1 a {
	display:inline-block;
	font-size:1.125rem; font-weight:800; letter-spacing:0; color:var(--unc-brand);
}
/* 로고 하단 인증 마크 */
[data-user-header] .header-logo h1 a::after {
	content:""; display:block;
	width:45.67px; height:10px; margin-top:3px;
	background: url('../images/icon_header_cert.png') no-repeat center / cover;
}
[data-user-header] .header-affiliate {
	display:inline-flex; align-items:center; justify-content:center; max-width:180px; height:28px;
	padding:0 9px; border:1px solid #DCE8DE; border-radius:8px;
	background:#F5FAF6; color:#305137; font-size:0.75rem; font-weight:700; line-height:1;
	white-space:nowrap; overflow:hidden;
}
[data-user-header] .header-affiliate img {
	display:block; max-width:96px; max-height:20px; object-fit:contain; flex:0 1 auto;
}
[data-user-header] .header-affiliate strong {
	display:block; min-width:0; overflow:hidden; text-overflow:ellipsis;
}
[data-user-header] .header-category ul {
	display:flex; align-items:center; gap:2px;
}
[data-user-header] .header-category ul li a {
	display:inline-flex; align-items:center; justify-content:center;
	height:36px; padding:0 14px; border-radius:var(--unc-radius-pill);
	font-size:0.8125rem; font-weight:600; color:var(--unc-ink-3); line-height:1;
	transition: background-color .16s var(--unc-ease), color .16s var(--unc-ease);
}
[data-user-header] .header-category ul li a:hover,
[data-user-header] .header-category ul li a:focus-visible {
	background:var(--unc-brand-soft); color:var(--unc-brand-strong); outline:none;
}
@media (max-width:480px) {
	[data-user-header] .container { padding:0 12px; }
	[data-user-header] .header-logo { flex-direction:column; align-items:flex-start; gap:2px; }
	[data-user-header] .header-affiliate {
		max-width:92px; height:18px; padding:0 5px; border-radius:6px;
		font-size:0.625rem;
	}
	[data-user-header] .header-affiliate img { max-width:80px; max-height:14px; }
	[data-user-header] .header-category ul li a {
		height:34px; padding:0 7px; font-size:0.75rem;
	}
}


/* ===== Site footer (rendered by user-components.js) ====== */
footer[data-user-footer] .footer-main {
	background:#fff; border-top:1px solid var(--unc-line); padding:40px 0;
}
footer[data-user-footer] .footer-main-cate ul {
	display:flex; flex-wrap:wrap; align-items:center;
}
footer[data-user-footer] .footer-main-cate ul li { margin-right:24px; }
footer[data-user-footer] .footer-main-cate ul li:last-child { margin-right:0; }
footer[data-user-footer] .footer-main-cate ul li button,
footer[data-user-footer] .footer-main-cate ul li a {
	font-size:0.875rem; font-weight:700; color:var(--unc-ink);
	background:none; border:0; padding:0; cursor:pointer; text-decoration:none;
}
footer[data-user-footer] .footer-main-cate ul li button:hover,
footer[data-user-footer] .footer-main-cate ul li a:hover {
	color:var(--unc-brand-strong);
}
footer[data-user-footer] .footer-main-info { margin-top:24px; }
footer[data-user-footer] .footer-main-info ul li {
	margin:0 0 5px; display:flex; flex-wrap:wrap; align-items:center;
}
footer[data-user-footer] .footer-main-info ul li:last-child { margin:0; }
footer[data-user-footer] .footer-main-info ul li p {
	display:flex; flex-wrap:wrap; align-items:center;
	font-size:0.75rem; line-height:1.4; color:var(--unc-muted);
}
footer[data-user-footer] .footer-main-info ul li p::after {
	content:""; display:inline-block;
	width:2px; height:2px; margin:0 7px; border-radius:50%; background:var(--unc-muted);
}
footer[data-user-footer] .footer-main-info ul li p:last-child::after { display:none; }
footer[data-user-footer] .footer-main-info ul li p a {
	/* base.css 의 `* { font-size:0.875rem; display:inline-block; line-height:1 }` 무력화
	   — p 와 동일한 텍스트 흐름으로 인라인 표시 */
	display:inline; vertical-align:baseline;
	font-size:inherit; font-weight:inherit; line-height:inherit;
	color:var(--unc-muted); text-decoration:underline; margin-left:3px;
	transition: color .15s var(--unc-ease);
}
footer[data-user-footer] .footer-main-info ul li p a:hover {
	color:var(--unc-ink-3);
}