@charset "utf-8";
/* =========================================================================
 * 커뮤니티 > 시술 후 주의사항 (www/community/aftercare.jsp 전용)
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 * 선택자는 모두 .aftercare 하위로 스코프 한정 → 다른 페이지 오염 없음
 *
 * ⚠ 의료 정보를 담는 페이지다. 시각적 위계보다 "읽고 지킬 수 있는가" 가 우선이다.
 *   · 본문 17px / 행간 1.85 — 다른 페이지 본문(16px)보다 크게 잡았다. 줄이지 말 것.
 *   · 경고(응급 신호) 블록은 유일하게 붉은 계열을 쓴다. 브랜드 그린/골드와 섞지 말 것 —
 *     "이건 다른 종류의 정보" 라는 신호가 색으로 먼저 읽혀야 한다.
 *
 * ── 탭 ──────────────────────────────────────────────────────────────
 * 증상별 솔루션 페이지(pore/wrinkle/lifting/pigment)의 세그먼트 탭과 같은 구조·같은 조작.
 * 다만 이 페이지는 탭이 4개이고 색 톤 전환은 하지 않는다(의료 정보라 장식을 절제).
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

.aftercare {
	--ac-green:      #3B5843;
	--ac-green-deep: #2C4632;
	--ac-gold:       #C2A878;
	--ac-gold-ink:   #A5854B;
	--ac-ink:        #1C1E1A;
	--ac-body:       #55594F;
	--ac-line:       #E7E2D8;
	--ac-cream:      #FBF9F2;
	--ac-paper:      #FFFDF8;
	/* 붉은색은 '피해주세요' 박스(.ac_do__box--avoid)에만 남는다.
	   응급 신호 섹션은 2026-08-04 사용자 요청으로 그린 계열로 전환했다. */
	--ac-warn:       #B4443A;   /* 경고 전용 — 다른 곳에 쓰지 말 것 */
	--ac-warn-bg:    #F1F5F1;   /* 응급 신호 섹션 배경 — 핑크(#FDF4F2) → 연한 그린 */

	--ac-t-h1:   40px;   /* 히어로 타이틀 = 이 페이지 최대 크기 */
	--ac-t-h2:   32px;
	--ac-t-card: 21px;
	--ac-t-lead: 19px;
	--ac-t-body: 17px;   /* ⚠ 의료 정보라 본문을 크게 — 줄이지 말 것 */

	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--ac-ink);
	background: #fff;
	overflow-x: clip;
}
.aftercare .ac_inner { max-width: 1120px; margin: 0 auto; padding: 0 40px; }

/* ── 섹션 공통 타이포 ─────────────────────────────────────────────── */
.aftercare .ac_eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--ac-gold-ink);
}
.aftercare .ac_title {
	margin: 16px 0 0;
	font-weight: 700;
	font-size: var(--ac-t-h2);
	line-height: 1.34;
	letter-spacing: -.8px;
	color: var(--ac-ink);
	word-break: keep-all;
}

/* =========================================================================
 * 1. 히어로
 * ========================================================================= */
/* 2026-08-10: 크림 그라데이션 → 사진 배경(/img/jd_caution_bg.png, 3346x1435 실버 의료컷).
 * ⚠ 원본이 무채색 실버라 페이지의 크림 톤과 겉돈다 → ::before 에서 흰/크림 베일을 섞어 잇는다.
 *   동시에 중앙(카피 뒤)을 밝혀 먹 글자가 금속 반사와 겹쳐도 읽히게 한다.
 * ⚠ 피사체(청진기·주사기·바이알)가 오른쪽에 몰려 있다. 2.33:1 가로 컷이라 좁은 화면에서
 *   좌우가 잘리므로 1024↓ 에서 position 을 오른쪽으로 당겨 피사체를 남긴다. */
.ac_hero {
	position: relative;
	padding: 104px 0 96px;
	text-align: center;
	background: #EDECEA url('/img/jd_caution_bg.png') center center / cover no-repeat;
	border-bottom: 1px solid var(--ac-line);
	overflow: hidden;
}
.ac_hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(58% 78% at 46% 50%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.46) 52%, rgba(255,255,255,0) 84%),
		linear-gradient(180deg, rgba(251,249,242,.58) 0%, rgba(251,249,242,.10) 36%, rgba(251,249,242,.66) 100%);
	pointer-events: none;
}
.ac_hero > .ac_inner { position: relative; z-index: 1; }
.ac_hero__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--ac-gold-ink);
}
.ac_hero__title {
	margin: 20px 0 0;
	font-weight: 800;
	font-size: var(--ac-t-h1);
	line-height: 1.26;
	letter-spacing: -1.4px;
	color: var(--ac-ink);
	word-break: keep-all;
}
.ac_hero__desc {
	margin: 22px 0 0;
	font-size: var(--ac-t-body);
	font-weight: 400;
	line-height: 1.88;
	color: rgba(28,30,26,.68);
	word-break: keep-all;
}

/* =========================================================================
 * 2. 공통 수칙 — 시술 종류와 무관하게 지켜야 할 것
 * ⚠ 2026-08-06: 내용 레이아웃이 FAQ 아코디언(.ac_acc, 6번 블록)으로 바뀌었다.
 *   아래 .ac_basic__list / .ac_rule* 는 미사용 — 섹션 껍데기(.ac_basic, __head)만 살아 있다.
 *   같은 이유로 3번(.ac_tabs/.ac_panel/.ac_do*) · 4번(.ac_time__list/.ac_time__item*) 도 미사용이다.
 * ========================================================================= */
.ac_basic { padding: 92px 0 88px; background: var(--ac-paper); }
.ac_basic__head { text-align: center; margin: 0 0 48px; }
.ac_basic__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
.ac_rule {
	display: grid;
	grid-template-columns: 54px 1fr;
	gap: 0 20px;
	align-items: start;
	padding: 26px 28px 24px;
	background: #fff;
	border: 1px solid var(--ac-line);
	border-radius: 12px;
}
/* 번호는 원 안에 가두지 않고 타이포 자체로 세운다(2026-08-04).
 * 46px 원 + 17px 숫자는 아이콘처럼 보여 순서가 눈에 들어오지 않았다.
 * 원·테두리를 걷어내고 숫자를 키워 세리프로 두면, 장식 없이도 순번이 먼저 읽힌다. */
.ac_rule__no {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-variant-numeric: lining-nums;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.05;
	letter-spacing: .5px;
	color: rgba(59,88,67,.44);
}
.ac_rule__name {
	display: block;
	margin: 10px 0 0;
	font-weight: 700;
	font-size: var(--ac-t-card);
	line-height: 1.34;
	letter-spacing: -.5px;
	color: var(--ac-ink);
	word-break: keep-all;
}
.ac_rule__txt {
	margin: 9px 0 0;
	grid-column: 2;
	font-size: var(--ac-t-body);
	line-height: 1.82;
	color: rgba(28,30,26,.66);
	word-break: keep-all;
}
/* 번호와 제목이 같은 줄에 오도록 — 제목은 1행, 본문은 2행 우측 칸.
 * 숫자가 커진 만큼 제목의 top margin 을 줄여 두 글자의 윗선을 맞춘다. */
.ac_rule__no { grid-row: 1; }
.ac_rule__name { grid-column: 2; grid-row: 1; margin-top: 2px; }

/* =========================================================================
 * 3. 시술군별 주의사항 — 탭
 * ========================================================================= */
.ac_by { padding: 92px 0 96px; background: var(--ac-cream); }
.ac_by__head { text-align: center; margin: 0 0 40px; }
.ac_by__desc {
	margin: 18px 0 0;
	font-size: var(--ac-t-body);
	line-height: 1.85;
	color: rgba(28,30,26,.62);
	word-break: keep-all;
}
/* 세그먼트 탭 — 증상별 솔루션 페이지와 같은 조작(밑줄 잉크가 따라 움직인다) */
.ac_tabs {
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 0 0 34px;
	border-bottom: 1px solid var(--ac-line);
}
.ac_tab {
	position: relative;
	padding: 15px 26px 14px;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -.3px;
	color: rgba(28,30,26,.45);
	transition: color .25s ease;
}
.ac_tab:hover { color: var(--ac-ink); }
.ac_tab.is-on { color: var(--ac-green); }
.ac_tabs__ink {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 0;
	background: var(--ac-green);
	transition: left .38s cubic-bezier(.22,.61,.36,1), width .38s cubic-bezier(.22,.61,.36,1);
}
.ac_panel[hidden] { display: none; }
.ac_panel.is-swap { animation: acSwap .42s cubic-bezier(.22,.61,.36,1); }
@keyframes acSwap {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
.ac_panel__lead {
	margin: 0 0 26px;
	padding: 18px 24px;
	background: #fff;
	border-left: 3px solid var(--ac-gold);
	border-radius: 0 8px 8px 0;
	font-size: var(--ac-t-body);
	line-height: 1.8;
	color: rgba(28,30,26,.72);
	word-break: keep-all;
}
.ac_do {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
/* 지켜주세요 / 피해주세요 두 박스가 똑같이 흰 카드라 훑을 때 구분이 안 됐다.
 * 상단에 색 띠를 얹고 배경을 아주 옅게 갈라, 읽지 않아도 어느 쪽인지 보이게 한다. */
.ac_do__box {
	position: relative;
	padding: 28px 30px 26px;
	background: linear-gradient(180deg, rgba(59,88,67,.035) 0%, #fff 46%);
	border: 1px solid var(--ac-line);
	border-radius: 12px;
	overflow: hidden;
}
.ac_do__box::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ac-green) 0%, rgba(59,88,67,.18) 100%);
}
.ac_do__box--avoid {
	background: linear-gradient(180deg, rgba(180,68,58,.035) 0%, #fff 46%);
	border-color: rgba(180,68,58,.16);
}
.ac_do__box--avoid::before {
	background: linear-gradient(90deg, var(--ac-warn) 0%, rgba(180,68,58,.16) 100%);
}
.ac_do__title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -.4px;
	color: var(--ac-ink);
}
/* 지켜주세요 = 그린 체크 / 피해주세요 = 웜 그레이 — 아이콘 없이 색과 기호만으로 구분 */
.ac_do__title::before {
	content: '';
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: rgba(59,88,67,.10);
	border: 1px solid rgba(59,88,67,.30);
}
.ac_do__box--avoid .ac_do__title::before {
	background: rgba(180,68,58,.08);
	border-color: rgba(180,68,58,.28);
}
.ac_do__list { margin: 0; padding: 0; list-style: none; }
.ac_do__list li {
	position: relative;
	padding: 0 0 0 17px;
	font-size: var(--ac-t-body);
	line-height: 1.82;
	color: rgba(28,30,26,.7);
	word-break: keep-all;
}
.ac_do__list li + li { margin-top: 10px; }
.ac_do__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .72em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ac-gold);
}
.ac_do__box--avoid .ac_do__list li::before { background: rgba(180,68,58,.55); }

/* =========================================================================
 * 4. 시간대별 회복 흐름
 * ========================================================================= */
.ac_time { padding: 92px 0 96px; background: #fff; }
.ac_time__head { text-align: center; margin: 0 0 48px; }
/* 시간 경과를 '카드 4개 나열'이 아니라 축 위의 지점으로 보여준다(2026-08-04).
 * 이 페이지는 사진이 한 장도 없어 전 섹션이 글 덩어리로만 읽혔다.
 * 가로 축선과 시점 마커를 그려 넣으면, 이미지 없이도 '시간이 흐른다'가 한눈에 보인다. */
.ac_time__list {
	position: relative;
	margin: 0;
	padding: 38px 0 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
/* 축선 — 양 끝은 페이드시켜 잘린 선처럼 보이지 않게 한다 */
.ac_time__list::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 8px;
	height: 1px;
	background: linear-gradient(90deg,
		rgba(59,88,67,0) 0%, rgba(59,88,67,.34) 10%, rgba(59,88,67,.34) 90%, rgba(59,88,67,0) 100%);
}
.ac_time__item {
	position: relative;
	padding: 28px 24px 26px;
	background: var(--ac-cream);
	border: 1px solid var(--ac-line);
	border-radius: 12px;
}
/* 시점 마커 — 카드 위 축선에 얹힌다. 첫 시점만 채워 '지금부터'를 표시 */
.ac_time__item::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -35px;
	transform: translateX(-50%);
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid rgba(59,88,67,.45);
}
.ac_time__item:first-child::before {
	background: var(--ac-green);
	border-color: var(--ac-green);
	box-shadow: 0 0 0 4px rgba(59,88,67,.12);
}
/* 카드와 마커를 잇는 짧은 세로선 */
.ac_time__item::after {
	content: '';
	position: absolute;
	left: 50%;
	top: -24px;
	width: 1px;
	height: 24px;
	background: linear-gradient(180deg, rgba(59,88,67,.34) 0%, rgba(59,88,67,.08) 100%);
}
.ac_time__when {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 2.8px;
	text-transform: uppercase;
	color: var(--ac-gold-ink);
}
.ac_time__name {
	display: block;
	margin: 8px 0 0;
	font-weight: 700;
	font-size: var(--ac-t-card);
	letter-spacing: -.5px;
	color: var(--ac-ink);
}
.ac_time__txt {
	margin: 11px 0 0;
	font-size: 16px;
	line-height: 1.8;
	color: rgba(28,30,26,.64);
	word-break: keep-all;
}

/* =========================================================================
 * 5. 응급 신호
 *    ⚠ 2026-08-04 사용자 요청으로 붉은/핑크 → 브랜드 그린 계열로 전환했다.
 *      원래는 "이 섹션만 붉은 계열로 다른 정보와 구분" 하는 의도였고, 색으로 위급함을
 *      알리던 역할은 사라진다. 대신 좌측 띠·라벨·불릿의 밀도로 주목도를 유지한다.
 *      (붉은 계열은 '피해주세요' 박스(.ac_do__box--avoid)에만 남아 있다)
 * ========================================================================= */
/* 2026-08-06: 페이지 마지막(푸터 바로 위)으로 옮기면서 배경을 그린으로 바꿨다(사용자 요청).
 * 앞 섹션들이 모두 흰/크림 아코디언이라, 마지막에서 색으로 눌러야 '성격이 다른 안내'로 읽힌다.
 *
 * 2026-08-07 개편 — **흰 카드를 걷어냈다**.
 *   그린 배경 위에 흰 박스를 얹으니 배경과 따로 놀고 '카드 하나 붙여 놓은' 인상이었다(사용자 지적).
 *   지금은 글과 목록을 배경 위에 직접 놓고 [좌: 안내문+연락처 / 우: 증상 목록] 2열로 나눈다.
 *   ⚠ 대비는 색이 아니라 **밝기 차와 헤어라인**으로 만든다 — 흰 면(.ac_warn__box)을 되살리지 말 것.
 *   ※ 옛 카드 스타일이 필요하면 git 이력에서 .ac_warn__box 블록을 참고할 것. */
.ac_warn {
	position: relative;
	padding: 96px 0 104px;
	background:
		radial-gradient(78% 120% at 18% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 62%),
		var(--ac-green-deep);
}
/* 위아래 얇은 빛선 — 앞 섹션(크림)과 푸터 사이에서 이 블록의 경계를 잡아 준다 */
.ac_warn::before,
.ac_warn::after {
	content: '';
	position: absolute; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
}
.ac_warn::before { top: 0; }
.ac_warn::after  { bottom: 0; }
/* 좌: 안내문 + 연락처 / 우: 증상 목록.
 * ⚠ 좌측 칸을 460px 로 묶는 이유 — 목록이 한 줄에 다 들어와야 읽기가 편한데,
 *   좌우를 반반으로 나누면 우측 항목이 두 줄로 접힌다. */
.ac_warn__grid {
	position: relative; z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	gap: 0 84px;
	align-items: start;
}
/* 라벨 — 채운 알약 대신 테두리만. 그린 위에서는 면을 채우면 되레 탁해진다 */
.ac_warn__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 13px;
	border: 1px solid rgba(216,189,139,.55);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.2px;
	color: #E4CFA4;
}
.ac_warn__label i { display: inline-flex; }
.ac_warn__label svg { width: 17px; height: 17px; }
.ac_warn__title {
	margin: 22px 0 0;
	font-weight: 700;
	font-size: var(--ac-t-h2);
	line-height: 1.34;
	letter-spacing: -.8px;
	color: #fff;
	word-break: keep-all;
}
.ac_warn__desc {
	margin: 18px 0 0;
	font-size: var(--ac-t-body);
	line-height: 1.85;
	color: rgba(255,255,255,.68);
	word-break: keep-all;
}
/* 목록 — 박스가 아니라 헤어라인으로 끊는다. 항목이 6개라 두 줄짜리 칸보다 한 줄 리스트가 빨리 읽힌다 */
.ac_warn__list {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255,255,255,.14);
}
.ac_warn__list li {
	position: relative;
	padding: 17px 0 17px 26px;
	border-bottom: 1px solid rgba(255,255,255,.14);
	font-size: var(--ac-t-body);
	font-weight: 500;
	line-height: 1.6;
	color: rgba(255,255,255,.9);
	word-break: keep-all;
	transition: color .3s ease, padding-left .3s ease;
}
/* 골드 마름모 — 원형 불릿보다 '주의' 성격이 산다 */
.ac_warn__list li::before {
	content: '';
	position: absolute;
	left: 3px;
	top: 1.62em;
	width: 7px;
	height: 7px;
	background: #D8BD8B;
	transform: rotate(45deg);
}
.ac_warn__list li:hover { color: #fff; padding-left: 30px; }
/* 연락처 — 알약 박스 대신 위에 얇은 골드선을 깔고 번호를 크게 세운다 */
.ac_warn__call {
	margin: 38px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(216,189,139,.34);
}
.ac_warn__call-txt {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	color: rgba(216,189,139,.9);
}
/* ⚠ 선택자를 `.ac_warn` 으로 한 단 올린 이유 — basic.css 의 `a:link{color:inherit}`(0,1,1)이
 *   클래스 하나짜리(0,1,0)를 이겨서 번호가 본문 먹색으로 나왔다(2026-08-07 실제 발생).
 *   전화번호는 a 태그이므로 이 페이지의 다른 텍스트와 달리 명시도를 챙겨야 한다. */
.ac_warn .ac_warn__call-num {
	display: inline-block;
	margin: 10px 0 0;
	font-weight: 800;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: .6px;
	color: #fff;
	text-decoration: none;
	transition: color .3s ease;
}
.ac_warn .ac_warn__call-num:hover { color: #E4CFA4; }
.ac_warn__call-note {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255,255,255,.6);
	word-break: keep-all;
}

/* =========================================================================
 * 6. FAQ — 아코디언
 * ========================================================================= */
.ac_faq { padding: 92px 0 96px; background: var(--ac-cream); }
.ac_faq__head { text-align: center; margin: 0 0 44px; }

/* 관리자 분류 = 섹션 (2026-08-06)
 * 섹션 개수가 관리자에서 바뀌므로 배경을 고정할 수 없다 → 홀짝으로 번갈아 깐다.
 * 기존 .ac_basic/.ac_by/.ac_time/.ac_faq 껍데기를 대신하는 클래스다. */
.ac_sec { padding: 92px 0 96px; }
.ac_sec--odd  { background: var(--ac-paper); }
.ac_sec--even { background: var(--ac-cream); }
.ac_sec__head { text-align: center; margin: 0 0 44px; }
.ac_sec__desc {
	margin: 18px 0 0;
	font-size: var(--ac-t-body);
	line-height: 1.85;
	color: rgba(28,30,26,.62);
	word-break: keep-all;
}
/* 분류에 글이 아직 없을 때 — 화면이 무너지지 않게 자리만 잡아 둔다. */
.ac_sec__empty {
	margin: 0;
	padding: 28px 0;
	text-align: center;
	font-size: var(--ac-t-body);
	color: rgba(28,30,26,.45);
}
/* =========================================================================
 * 6-2. 주의사항 목록 (2026-08-10 개편)
 *   분류 섹션을 걷어내고 한 목록으로 합치면서 아코디언도 다시 짰다.
 *   ⚠ 열고 닫을 때 글자가 좌우로 움직이면 안 된다 — 항목에 `margin: 0 -인셋 / padding: 0 인셋`
 *     을 깔아 **배경만** 넓게 퍼지게 한다. 시그니처 FAQ(page_repot.css 등)와 같은 규격이다.
 *   ⚠ 구분선은 border 가 아니라 ::after 다. 인셋 배경보다 안쪽(콘텐츠 폭)에 맞춰야 하고,
 *     열린 항목 위아래만 골라 지워야 카드처럼 떠 보이기 때문.
 *   ⚠ 높이 전환은 grid-template-rows 0fr→1fr — 마크업의 .ac_acc__inner 래퍼가 필수다.
 * ========================================================================= */
.ac_list { padding: 76px 0 96px; background: var(--ac-paper); }

/* 목록 바 — 좌: 개수 / 우: 전체 펼치기 */
.ac_list__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ac-line);
}
.ac_list__count { display: inline-flex; align-items: baseline; gap: 7px; }
.ac_list__count b {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	color: var(--ac-gold-ink);
}
.ac_list__count span {
	font-size: 15px;
	letter-spacing: -.2px;
	color: rgba(28,30,26,.5);
}
.ac_list__all {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px 9px 18px;
	border: 1px solid var(--ac-line);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	font-size: 14.5px;
	letter-spacing: -.2px;
	color: var(--ac-body);
	transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.ac_list__all:hover { border-color: var(--ac-gold); color: var(--ac-gold-ink); }
.ac_list__all.is-on { border-color: var(--ac-gold); background: #FBF6EA; color: var(--ac-gold-ink); }
/* 두 겹 갈매기 — 펼침이면 위로 뒤집힌다 */
.ac_list__all-ico {
	position: relative;
	width: 10px; height: 10px;
	transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.ac_list__all-ico::before,
.ac_list__all-ico::after {
	content: '';
	position: absolute; left: 0;
	width: 10px; height: 10px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.ac_list__all-ico::before { top: -3px; opacity: .45; }
.ac_list__all-ico::after  { top: 1px; }
.ac_list__all.is-on .ac_list__all-ico { transform: rotate(180deg); }

/* ── 분류 묶음 (2026-08-11 분류별 구성 복귀) ──────────────────────────
 * 관리자 분류 하나 = 묶음 하나. 제목 아래 그 분류의 아코디언만 놓이고
 * 번호(.ac_acc__no)는 묶음마다 01 부터 다시 시작한다(JSP 쪽에서 매김). */
.ac_group { margin-top: 62px; }
.ac_list__bar + .ac_group { margin-top: 42px; }
.ac_group__title {
	margin: 0 0 12px;
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.4px;
	line-height: 1.4;
	color: var(--ac-green);
	word-break: keep-all;
}
/* 묶음 안 글 개수 — 세리프 숫자로 작게, 개수 badge 역할 */
.ac_group__cnt {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--ac-gold-ink);
}
/* 묶음마다 제목 아래 헤어라인 — 목록 바(.ac_list__bar)의 하단선과 같은 규격 */
.ac_group .ac_acc { margin-top: 0; border-top: 1px solid var(--ac-line); }

/* ── 아코디언 ─────────────────────────────────────────────────────── */
.ac_acc { margin-top: 6px; }
.ac_acc__item {
	--acc-inset: 22px;
	position: relative;
	margin: 0 calc(var(--acc-inset) * -1);
	padding: 0 var(--acc-inset);
	border-radius: 8px;
	transition: background-color .35s ease;
}
.ac_acc__item::after {
	content: '';
	position: absolute;
	left: var(--acc-inset); right: var(--acc-inset); bottom: 0;
	height: 1px;
	background: var(--ac-line);
	transition: opacity .3s ease;
}
.ac_acc__item.is-open::after { opacity: 0; }
.ac_acc__item:has(+ .ac_acc__item.is-open)::after { opacity: 0; }
.ac_acc__item:hover:not(.is-open) { background: #FBF8F1; }
.ac_acc__item.is-open { background: #FBF7ED; }

.ac_acc__q {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	width: 100%;
	padding: 24px 46px 24px 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: padding-bottom .4s cubic-bezier(.22,.61,.36,1);
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
/* 연번 — 20px×1.35 = 27px 로 제목 첫 줄(18×1.5=27px)과 광학 정렬 */
.ac_acc__no {
	flex: 0 0 30px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.35;
	letter-spacing: .5px;
	color: rgba(165,133,75,.55);
	transition: color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.ac_acc__t {
	flex: 1 1 auto;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: -.4px;
	color: var(--ac-ink);
	word-break: keep-all;
	transition: color .3s ease;
}
/* +/− 토글 — 세로획만 눕혀서 마이너스가 된다. top 은 제목 첫 줄 중앙(24+13.5) */
.ac_acc__ico {
	position: absolute;
	right: 4px; top: 38px;
	width: 15px; height: 15px;
	margin-top: -7px;
}
.ac_acc__ico::before,
.ac_acc__ico::after {
	content: '';
	position: absolute; left: 0; top: 50%;
	width: 100%; height: 1.6px;
	margin-top: -.8px;
	border-radius: 2px;
	background: #B3AC9C;
	transition: transform .4s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}
.ac_acc__ico::after { transform: rotate(90deg); }

.ac_acc__q:hover .ac_acc__t { color: var(--ac-green); }
.ac_acc__q:hover .ac_acc__no { color: var(--ac-gold-ink); transform: translateY(-1px); }
.ac_acc__q:hover .ac_acc__ico::before,
.ac_acc__q:hover .ac_acc__ico::after { background: var(--ac-gold-ink); }

/* 내용 — 높이 애니메이션 + 살짝 떠오르며 나타난다 */
.ac_acc__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .42s cubic-bezier(.22,.61,.36,1);
}
.ac_acc__inner {
	overflow: hidden;
	padding: 0 46px 0 48px;
	max-width: 860px;
	font-size: var(--ac-t-body);
	line-height: 1.85;
	color: rgba(28,30,26,.68);
	word-break: keep-all;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s ease, transform .42s cubic-bezier(.22,.61,.36,1), padding .42s ease;
}
.ac_acc__inner > *:first-child { margin-top: 0; }
.ac_acc__inner > *:last-child  { margin-bottom: 0; }

.ac_acc__item.is-open .ac_acc__q { padding-bottom: 12px; }
.ac_acc__item.is-open .ac_acc__no { color: var(--ac-gold-ink); }
.ac_acc__item.is-open .ac_acc__t { color: var(--ac-green); }
.ac_acc__item.is-open .ac_acc__ico::after { transform: rotate(0deg); }
.ac_acc__item.is-open .ac_acc__ico::before,
.ac_acc__item.is-open .ac_acc__ico::after { background: var(--ac-gold-ink); }
.ac_acc__item.is-open .ac_acc__a { grid-template-rows: 1fr; }
.ac_acc__item.is-open .ac_acc__inner { opacity: 1; transform: none; padding-bottom: 28px; }

/* 내용 입력 전 자리표시자 — 실제 문구가 들어오면 이 클래스째 지우면 된다 */
.ac_acc__todo { margin: 0; color: rgba(28,30,26,.42); }

@media (prefers-reduced-motion: reduce) {
	.ac_acc__item, .ac_acc__q, .ac_acc__no, .ac_acc__t,
	.ac_acc__a, .ac_acc__inner, .ac_acc__ico::before, .ac_acc__ico::after,
	.ac_list__all, .ac_list__all-ico { transition: none; }
	.ac_acc__inner { transform: none; }
}

/* =========================================================================
 * 7. 클로징 — ⚠ 미사용(2026-08-06 사용자 요청으로 섹션 삭제)
 *    되돌릴 때를 대비해 스타일만 남겨 뒀다. 되살릴 일이 없으면 이 블록과 .ac_btn* 을 지워도 된다.
 * ========================================================================= */
.ac_closing {
	padding: 84px 0 88px;
	background: var(--ac-green-deep);
	text-align: center;
}
.ac_closing__title {
	margin: 0;
	font-weight: 700;
	font-size: var(--ac-t-h2);
	line-height: 1.4;
	letter-spacing: -.6px;
	color: #F4F2EE;
	word-break: keep-all;
}
.ac_closing__desc {
	margin: 18px 0 0;
	font-size: var(--ac-t-body);
	line-height: 1.85;
	color: rgba(244,242,238,.74);
	word-break: keep-all;
}
.ac_closing__btns { margin: 32px 0 0; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* ⚠ 셀렉터를 반드시 .aftercare 로 한 단계 감쌀 것 —
 *   basic.css 의 `a:link { color: inherit }` 특이도가 (0,1,1) 이라 클래스 하나로는 글자색을 이기지 못한다.
 *   그러면 버튼 글자가 본문 잉크색을 상속해 딥그린 배경 위에서 보이지 않는다. */
.aftercare .ac_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 176px;
	padding: 15px 30px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background .25s ease, border-color .25s ease;
}
.aftercare .ac_btn--gold { background: var(--ac-gold); color: #23301F; border: 1px solid var(--ac-gold); }
.aftercare .ac_btn--gold:hover { background: #d3bb90; }
/* 아웃라인 버튼 — 배경이 없으므로 글자색과 테두리가 유일한 단서다. 둘 다 충분히 밝게 둘 것 */
.aftercare .ac_btn--line { background: rgba(255,255,255,.06); color: #F4F2EE; border: 1px solid rgba(244,242,238,.62); }
.aftercare .ac_btn--line:hover { background: rgba(255,255,255,.14); border-color: #F4F2EE; }

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1024px) {
	.aftercare { --ac-t-h1: 32px; --ac-t-h2: 27px; --ac-t-card: 20px; }
	.aftercare .ac_inner { padding: 0 28px; }
	/* 가로 2.33:1 컷 — 좁아질수록 좌우가 크게 잘린다. 오른쪽 피사체가 살도록 당긴다 */
	.ac_hero { padding: 72px 0 68px; background-position: 72% center; }
	.ac_basic, .ac_by, .ac_time, .ac_warn, .ac_faq, .ac_closing { padding: 72px 0 76px; }
	.ac_list { padding: 62px 0 76px; }
	.ac_group { margin-top: 52px; }
	.ac_list__bar + .ac_group { margin-top: 36px; }
	.ac_group__title { font-size: 20px; }
	/* 2열로 접히면 가로 축이 두 줄로 끊겨 시간 흐름이 거꾸로 읽힌다 → 축·마커를 세로로 전환.
	 * 카드 왼쪽에 축을 세우고 마커를 그 위에 얹는다(1열도 같은 방식으로 이어진다). */
	.ac_time__list { grid-template-columns: 1fr 1fr; padding: 0 0 0 26px; }
	.ac_time__list::before {
		left: 4px; right: auto; top: 10px; bottom: 10px;
		width: 1px; height: auto;
		background: linear-gradient(180deg,
			rgba(59,88,67,0) 0%, rgba(59,88,67,.34) 8%, rgba(59,88,67,.34) 92%, rgba(59,88,67,0) 100%);
	}
	.ac_time__item::before { left: -27px; top: 30px; transform: none; }
	.ac_time__item::after  { left: -21px; top: 35px; width: 15px; height: 1px; }
	/* 2열을 유지하되 사이 간격만 줄인다(1024↓ 에서 1열로 내려간다) */
	.ac_warn__grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 0 52px; }
	.ac_warn .ac_warn__call-num { font-size: 36px; }
}

@media all and (max-width: 1024px) {
	/* 좌우로 벌릴 폭이 없어지면 1열 — 안내문 아래로 목록이 이어진다 */
	.ac_warn__grid { grid-template-columns: 1fr; gap: 36px 0; }
	.ac_warn__title br { display: none; }
}

@media all and (max-width: 768px) {
	.aftercare { --ac-t-h1: 26px; --ac-t-h2: 23px; --ac-t-card: 19px; --ac-t-body: 16px; }
	.aftercare .ac_inner { padding: 0 20px; }
	.aftercare .ac_eyebrow { font-size: 14px; letter-spacing: 3.6px; }
	.ac_hero { padding: 56px 0 54px; }
	.ac_hero__eyebrow { font-size: 14px; letter-spacing: 3.6px; }
	.ac_hero__desc br { display: none; }
	.ac_basic, .ac_by, .ac_time, .ac_warn, .ac_faq, .ac_closing { padding: 56px 0 60px; }

	.ac_basic__list { grid-template-columns: 1fr; }
	.ac_rule { padding: 22px 22px 20px; }

	/* 탭이 4개라 좁은 화면에서는 가로 스크롤로 전환(줄바꿈되면 잉크 위치가 어긋난다) */
	.ac_tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ac_tabs::-webkit-scrollbar { display: none; }
	.ac_tab { padding: 13px 18px 12px; font-size: 16px; white-space: nowrap; }

	.ac_do { grid-template-columns: 1fr; gap: 16px; }
	.ac_do__box { padding: 24px 22px 22px; }
	.ac_time__list { grid-template-columns: 1fr; padding-left: 22px; }
	.ac_time__item::before { left: -23px; }
	.ac_time__item::after  { left: -17px; width: 11px; }
	.ac_warn__list li { padding: 15px 0 15px 24px; }
	.ac_warn__list li::before { top: 1.42em; }
	.ac_warn__call { margin-top: 30px; padding-top: 22px; }
	.ac_warn .ac_warn__call-num { font-size: 32px; }
	.ac_warn__call-note { font-size: 14.5px; }
	/* 목록 — 인셋은 inner padding(20px) 보다 좁게. 넘치면 가로 스크롤이 생긴다. */
	.ac_list { padding: 52px 0 60px; }
	.ac_group { margin-top: 44px; }
	.ac_list__bar + .ac_group { margin-top: 30px; }
	.ac_group__title { font-size: 18.5px; gap: 8px; }
	.ac_group__cnt { font-size: 15px; }
	.ac_list__count b { font-size: 25px; }
	.ac_list__all { padding: 8px 13px 8px 15px; font-size: 13.5px; }
	.ac_acc__item { --acc-inset: 14px; }
	.ac_acc__q { gap: 12px; padding: 20px 32px 20px 0; }
	.ac_acc__item.is-open .ac_acc__q { padding-bottom: 10px; }
	.ac_acc__no { flex-basis: 24px; font-size: 17px; }
	.ac_acc__t { font-size: 16.5px; }
	.ac_acc__ico { right: 0; top: 32px; width: 13px; height: 13px; }
	.ac_acc__inner { padding: 0 0 0 36px; }
	.ac_acc__item.is-open .ac_acc__inner { padding-bottom: 22px; }
	.aftercare .ac_btn { min-width: 0; flex: 1 1 100%; }   /* 기본 규칙과 특이도를 맞춰야 덮인다 */
}

@media (prefers-reduced-motion: reduce) {
	.ac_tabs__ink,
	.ac_faq__q::after { transition: none; }
	.ac_panel.is-swap { animation: none; }
}