/* =========================================================
   온담한의원 — sub.css  (서브페이지 공통 레이아웃)
   변수/크롬은 style.css 에서 상속
   ========================================================= */

.sub_main { padding-top: var(--header-h); }

/* ---------- 서브 비주얼 배너 (원형 리빌 대상) ---------- */
.sub_visual {
    position: relative; height: 58vh; min-height: 440px;
    display: flex; align-items: center; justify-content: center;
    background: #1c130e; overflow: hidden;
}
.sub_visual .sv_circle {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, #4c352a 0%, #1c130e 100%);
    clip-path: circle(75% at 50% 50%);
}
.sub_visual .sv_circle::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(circle at 72% 30%, rgba(225,200,163,.22), transparent 45%),
                      repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 16px, transparent 16px 32px);
}
.sub_visual .sv_txt { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 24px; }
.sub_visual .sv_en { font-family: var(--cormo); font-size: 2rem; letter-spacing: .22em; color: var(--gold); }
.sub_visual .sv_title { font-family: var(--serif); font-size: 4.6rem; font-weight: 600; margin: 14px 0 16px; line-height: 1.3; }
.sub_visual .sv_bread { font-size: 1.5rem; color: rgba(255,255,255,.6); }
.sub_visual .sv_bread span { color: var(--gold); }

/* ---------- 서브 탭 (스티키) ---------- */
.sub_tab { position: sticky; top: var(--header-h); z-index: 500; background: #fff; border-bottom: 1px solid var(--line); }
.sub_tab .inner { max-width: var(--container); margin: 0 auto; padding: 0 40px; display: flex; gap: 34px; overflow-x: auto; scrollbar-width: none; }
.sub_tab .inner::-webkit-scrollbar { display: none; }
.sub_tab a { padding: 22px 2px; font-size: 1.6rem; color: #8a8177; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.sub_tab a:hover { color: var(--brown); }
.sub_tab a.on { color: var(--brown); font-weight: 600; border-color: var(--brown); }

/* ---------- 콘텐츠 섹션 ---------- */
.sub_sec { padding: 110px 0; }
.sub_sec.cream { background: var(--cream); }
.sub_sec.brown { background: var(--brown); color: #fff; }
.sub_sec.dark { background: #241611; color: #fff; }
.sub_head { text-align: center; margin-bottom: 60px; }
.sub_head .en { font-family: var(--cormo); font-size: 1.9rem; letter-spacing: .06em; color: var(--gold-deep); margin-bottom: 14px; }
.sub_sec.brown .sub_head .en, .sub_sec.dark .sub_head .en { color: var(--gold); }
.sub_head .tit { font-family: var(--serif); font-size: 3.6rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.sub_sec.brown .sub_head .tit, .sub_sec.dark .sub_head .tit { color: #fff; }
.sub_head .desc { margin-top: 20px; font-size: 1.8rem; color: #6b6157; line-height: 1.75; }
.sub_sec.brown .sub_head .desc, .sub_sec.dark .sub_head .desc { color: rgba(255,255,255,.7); }
.sub_head .desc b { color: var(--brown); }
.sub_sec.brown .sub_head .desc b { color: var(--gold-2); }

/* 리드 문단 */
.lead { max-width: 900px; margin: 0 auto; text-align: center; font-size: 2rem; color: #5a5149; line-height: 1.85; font-family: var(--serif); }
.sub_sec.brown .lead { color: rgba(255,255,255,.85); }

/* 특징 카드 그리드 */
.feature_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature_grid.col3 { grid-template-columns: repeat(3, 1fr); }
.feature_card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 40px 30px; text-align: center; transition: transform .3s, box-shadow .3s; }
.sub_sec.cream .feature_card { background: #fff; }
.feature_card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px rgba(62,39,35,.1); }
.feature_card .ic { width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 50%; background: var(--cream); color: var(--brown); display: flex; align-items: center; justify-content: center; font-family: var(--cormo); font-size: 2.4rem; }
.feature_card h4 { font-size: 2rem; font-weight: 600; color: var(--brown); margin-bottom: 12px; }
.feature_card p { font-size: 1.5rem; color: #7a7168; line-height: 1.7; }

/* 단계(프로세스) */
.step_row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step_row.col3 { grid-template-columns: repeat(3, 1fr); }
.step_card { position: relative; background: #fff; border-radius: 12px; padding: 40px 28px 34px; border: 1px solid var(--line); }
.step_card .num { font-family: var(--cormo); font-size: 2rem; color: var(--gold-deep); letter-spacing: .05em; }
.step_card h4 { font-size: 2rem; color: var(--brown); font-weight: 600; margin: 10px 0 12px; }
.step_card p { font-size: 1.5rem; color: #7a7168; line-height: 1.7; }

/* 증상 리스트 (체크) */
.symptom_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; max-width: 940px; margin: 0 auto; }
.symptom_grid li { display: flex; align-items: flex-start; gap: 14px; font-size: 1.7rem; color: #5a5149; padding: 16px 0; border-bottom: 1px dashed var(--gold-deep); }
.symptom_grid li::before { content: "✓"; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--brown); color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; margin-top: 2px; }

/* 텍스트+이미지 2단 */
.media_row { display: flex; align-items: center; gap: 60px; }
.media_row.reverse { flex-direction: row-reverse; }
.media_row .m_txt { flex: 1; }
.media_row .m_txt h3 { font-family: var(--serif); font-size: 2.8rem; color: var(--brown); font-weight: 600; margin-bottom: 20px; line-height: 1.45; }
.media_row .m_txt p { font-size: 1.7rem; color: #6b6157; line-height: 1.85; }
.media_row .m_img { flex: 1; }
.media_row .m_img .ph { width: 100%; aspect-ratio: 4/3; border-radius: 12px; }

/* Q&A */
.qna_list { max-width: 940px; margin: 0 auto; }
.qna { border-bottom: 1px solid var(--line); padding: 30px 0; }
.qna .q { display: flex; gap: 16px; font-size: 2rem; font-weight: 600; color: var(--brown); }
.qna .q em { font-family: var(--cormo); font-style: normal; color: var(--gold-deep); }
.qna .a { display: flex; gap: 16px; margin-top: 14px; font-size: 1.6rem; color: #6b6157; line-height: 1.8; }
.qna .a em { font-family: var(--cormo); font-style: normal; color: var(--muted); }

/* CTA 밴드 */
.cta_band { background: var(--brown); color: #fff; text-align: center; padding: 80px 24px; }
.cta_band .en { font-family: var(--cormo); font-size: 1.8rem; letter-spacing: .1em; color: var(--gold); }
.cta_band h3 { font-family: var(--serif); font-size: 3.4rem; font-weight: 600; margin: 12px 0 26px; line-height: 1.4; }
.cta_band .tel { font-family: var(--cormo); font-size: 4.6rem; color: var(--gold-2); font-weight: 600; }
.cta_band .btns { display: flex; gap: 14px; justify-content: center; margin-top: 30px; }
.cta_band .btn { padding: 15px 34px; border-radius: 40px; font-size: 1.6rem; font-weight: 500; transition: all .2s; }
.cta_band .btn.gold { background: var(--gold-2); color: var(--brown); }
.cta_band .btn.gold:hover { background: #fff; }
.cta_band .btn.line { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.cta_band .btn.line:hover { background: rgba(255,255,255,.12); }

/* 갤러리 그리드 (치료사례) */
.gallery_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.gallery_card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
.gallery_card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px rgba(62,39,35,.12); }
.gallery_card .thumb { display: flex; height: 240px; }
.gallery_card .thumb .ph { flex: 1; height: 100%; }
.gallery_card .thumb .ph.before { background: linear-gradient(160deg,#cfc4b1,#b6a68e); }
.gallery_card .thumb .ph.after { background: linear-gradient(160deg,#c9d8c4,#a9c0a0); }
.gallery_card .gc_body { padding: 24px 26px 28px; }
.gallery_card .gc_tags { display: flex; gap: 6px; margin-bottom: 12px; }
.gallery_card .gc_tags span { font-size: 1.3rem; border: 1px solid var(--line); border-radius: 20px; padding: 3px 12px; color: var(--brown); }
.gallery_card .gc_point { font-size: 1.9rem; font-weight: 700; color: var(--brown); margin-bottom: 8px; }
.gallery_card .gc_desc { font-size: 1.5rem; color: #7a7168; }

/* 오시는 길 정보표 */
.loc_wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.loc_map { position: relative; height: 460px; border-radius: 12px; overflow: hidden; background: #e6ddcf; }
.loc_map iframe { position: absolute; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border: 0; display: block; }
.loc_info { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 40px; }
.loc_info dl { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.loc_info dl:last-child { border-bottom: none; }
.loc_info dt { min-width: 92px; font-weight: 600; color: var(--brown); font-size: 1.6rem; display: flex; align-items: center; gap: 8px; }
.loc_info dd { font-size: 1.6rem; color: #5a5149; line-height: 1.7; }

/* reveal 초기 상태 (anim.js가 해제) */
.reveal-up { opacity: 1; }

/* ---------- 반응형 ---------- */
@media (max-width: 1000px) {
    .sub_visual { height: 46vh; min-height: 340px; }
    .sub_visual .sv_title { font-size: 3rem; }
    .sub_tab .inner { padding: 0 24px; gap: 22px; }
    .sub_tab a { font-size: 1.5rem; padding: 18px 2px; }
    .sub_sec { padding: 70px 0; }
    .sub_head .tit { font-size: 2.6rem; }
    .sub_head .desc { font-size: 1.6rem; }
    .lead { font-size: 1.7rem; }
    .feature_grid, .feature_grid.col3 { grid-template-columns: 1fr 1fr; }
    .step_row, .step_row.col3 { grid-template-columns: 1fr 1fr; }
    .symptom_grid { grid-template-columns: 1fr; }
    .media_row, .media_row.reverse { flex-direction: column; gap: 30px; }
    .gallery_grid { grid-template-columns: 1fr 1fr; }
    .loc_wrap { grid-template-columns: 1fr; }
    .cta_band h3 { font-size: 2.4rem; }
    .cta_band .tel { font-size: 3.4rem; }
}
@media (max-width: 560px) {
    .feature_grid, .feature_grid.col3, .step_row, .step_row.col3, .gallery_grid { grid-template-columns: 1fr; }
    .sub_visual .sv_title { font-size: 2.4rem; }
}

/* =========================================================
   IMPECCABLE POLISH (서브)
   ========================================================= */

/* 배너 실제 사진 (--sv-photo 를 각 페이지에서 지정) */
.sub_visual .sv_circle {
    background-image:
        linear-gradient(155deg, rgba(44,28,20,.66) 0%, rgba(20,13,9,.82) 100%),
        var(--sv-photo, linear-gradient(160deg, #4c352a, #1c130e));
    background-size: cover; background-position: center;
}

/* 디슬롭: 섹션 반복 영문 eyebrow 제거 (배너 sv_en 은 페이지당 1회라 유지) */
.sub_head .en { display: none; }
.cta_band .en { display: none; }
.sub_head .tit { font-size: clamp(2.4rem, 1.5rem + 2.2vw, 3.6rem); text-wrap: balance; }
.sub_head { margin-bottom: 52px; }

/* 카드 디슬롭: 아이콘 원 제거 → 에디토리얼 카드 (impeccable: 아이콘 카드 템플릿 회피) */
.feature_card { text-align: left; padding: 34px 30px; border-radius: 10px; }
.feature_card .ic { display: none; }
.feature_card h4 { position: relative; padding-top: 20px; margin-bottom: 12px; font-size: 2.1rem; }
.feature_card h4::before {
    content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--gold-deep);
}
.feature_card p { text-wrap: pretty; color: #6b6157; }

/* 대비: 카드/스텝 본문 살짝 진하게 */
.step_card p, .gallery_card .gc_desc { color: #6b6157; }

@media (prefers-reduced-motion: reduce) {
    .sub_visual .sv_circle { clip-path: circle(80% at 50% 50%) !important; }
    .reveal-up, .sub_visual .sv_txt > * { opacity: 1 !important; transform: none !important; }
}