/* ============================================================================ style.css — 프로젝트 커스텀 스타일 (디자인 원본 front.css 와 분리) front.css 는 퍼블리싱 디자인 원본이라 손대지 않고, 우리가 추가/보정하는 스타일은 여기에 모은다. base.twig 에서 front.css 다음에 로드 → 필요 시 디자인 위에 덮어쓴다. ※ 신규 컴포넌트 클래스는 auth-/site- 등 접두사로 격리할 것 — front.css 범용 클래스(.tabs 등)와 충돌 방지. ============================================================================ */ /* ============================================================================ 디자인 토큰 — 브랜드 팔레트 (Plum · Champagne · Ivory · Charcoal) 메인 브랜드색 = 병원 퍼스널 컬러 플럼(--color). 웜 뉴트럴 베이스(아이보리·차콜·웜그레이) + 골드 보조 플로리시로 "보라+골드" 럭셔리 톤. front.css 의 :root{--color:#7c2399} 를 여기서 덮어쓴다 (style.css 가 뒤에 로드). 사이트 전반의 강조색이 --color 한 곳으로 흐르므로 톤이 일괄 전환된다. ============================================================================ */ :root { --color: #994699; /* 주 강조 = 병원 퍼스널 컬러(플럼). 메인 브랜드색으로 승격. 흰 글씨 대비 ≈5.7:1(AA). CTA·버튼·링크·포커스가 전부 이 토큰으로 흐름 */ --color-deep: #6f336f; /* hover·진한 플럼 (ColorPalette HSL 파생값과 동일 — brand.css 폴백) */ --color-soft: #f6eef6; /* 옅은 플럼 틴트 — 틴트 hover 배경·알림 박스 (HSL 파생값과 동일) */ --accent: #c0a274; /* 샴페인 골드 — 보조 헤어라인·플로리시(보라+골드 럭셔리 조합 유지, 흰 글씨 금지) */ --ink: #2c2825; /* 차콜 — 큰 제목 */ --body: #4a443f; /* 웜 그레이 본문 */ --ivory: #f7f2ec; /* 따뜻한 섹션 배경 — 차가운 회색 대체 */ --line: #e8e0d8; /* 웜 헤어라인 — 차가운 #eee/#f0f0f0 대체 */ --paper: #ffffff; } /* ── Sticky footer — 콘텐츠가 짧아도 푸터를 뷰포트 바닥에 붙여 흰 여백 제거. body 를 세로 flex 로 만들고 본문 래퍼(.page-wrap)를 늘린다. flexbox 의 free-space 계산에 footer 의 margin-top(디자인 여백)도 포함되므로 긴 페이지의 디자인 간격은 그대로 유지. ── */ body { display: flex; flex-direction: column; min-height: 100vh; } .page-wrap { flex: 1 0 auto; } footer { flex-shrink: 0; } /* ── 헤더 — 2단(.top 로고행 / .header 메뉴밴드). 6월6일 디자인 복원: 중앙 메뉴 + 우측 상담 CTA. ── */ /* 우상단 유틸바 (로그인/회원가입) — .top 우상단 절대배치. 전화 동선은 .header 의 .site-cta. 모바일은 #m-gnb .m-auth 가 대신. */ .top { position: relative; } /* 로고 이미지는 고해상 원본(레티나·OG 겸용)이라 표시 높이를 명시 — 미지정 시 고유 픽셀 크기로 거대 렌더 */ .top h1 img { height: 86px; width: auto; } /* 모바일(햄버거 모드)은 슬림 로고바 45px — front.css 원래 설계 복원. 위 86px(데스크탑용 전역)가 시트 로드 순서(front.css→style.css)로 front.css 의 미디어쿼리 45px 를 덮어 모바일 로고가 두 배로 커지고(.top ≈114px) 햄버거(.btn-m, 45px 바 기준 top:15px)와 정렬이 어긋나던 문제 보정. */ @media all and (max-width: 1020px) { .top h1 img { height: 45px; } } footer .logo img { height: 48px; width: auto; } /* 우측 끝을 CTA(.site-cta right:3rem)와 동일선상으로 정렬 — 우상단/우측 끝이 한 줄로 떨어져 정돈된 인상 */ .site-utilbar { position: absolute; top: 2.1rem; left: auto; right: 3rem; text-align: right; font-size: 1.3rem; line-height: 1; letter-spacing: .01em; z-index: 5; } .site-utilbar a, .site-utilbar button { color: #8c867f; text-decoration: none; transition: color .2s ease; } .site-utilbar a:hover, .site-utilbar button:hover { color: var(--color); } .site-utilbar button { background: none; border: 0; padding: 0; cursor: pointer; font-size: 1.3rem; } .site-utilbar form { display: inline; } /* 파이프(|) 대신 중간점 — 더 넉넉한 여백으로 "요즘 사이트" 인상. .sep 텍스트는 비우고 CSS 로 점만 찍는다. */ .site-utilbar .sep { display: inline-block; margin: 0 1rem; } .site-utilbar .sep::before { content: '·'; color: #cfc8c0; } .site-utilbar .uname { color: var(--ink); } /* ── GNB 보정 — 자식 없는 1뎁스는 펼침 표시 숨김 (front.js 가 동작 분기, 여기선 시각만) ── */ .header nav > ul > li:not(.has-children):hover .btn-dep1:before { opacity: 0; } #m-gnb nav > ul > li:not(.has-children) .btn-dep1:before { display: none; } /* ── 하단 인디케이터 바 — front.css 기본은 bottom 0→1rem 까지 transition:all 로 애니메이션해 호버 해제 시 페이드아웃과 동시에 아래로 미끄러져 내려가며 사라짐. 위치를 1rem 으로 고정하고 opacity 만 전환해 제자리에서 페이드만 되게 보정. ── */ .header nav .btn-dep1:before { bottom: 1rem; transition: opacity .4s ease; } /* 메뉴 글꼴 = 본문 기본 Pretendard 유지(reset.css 로드). 별도 글꼴 미지정. */ /* ── 메뉴 밴드 슬림화 — front.css 기본(글씨 2.2rem·높이 7rem)이 과해 글씨/상하 여백 축소. ── */ .header nav .btn-dep1 { height: 6rem; font-size: 1.7rem; padding: 0 2.2rem; font-weight: 500; color: var(--ink); letter-spacing: .015em; } /* ── 서브메뉴(dep2) — 세로 드롭다운 패널. front.js 가 .is-open 클래스를 토글하고, 등장 모션(슬라이드+페이드+이징)은 여기 CSS 가 담당(jQuery fadeIn 의 밋밋한 opacity 깜빡임 대체). .dep2 자체에 padding-top 으로 버튼↔패널 사이 투명 호버 브릿지 → 이동 중 닫힘 방지. 오른쪽 메뉴(마지막 4개)는 오른쪽 끝을 부모에 맞춰(right:0) 화면 밖 넘침 방지. ── */ .header nav > ul > li { position: relative; } .header nav .dep2 { left: 0; right: auto; top: 100%; margin-top: -1px; padding-top: 0; display: block; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .28s ease, transform .4s cubic-bezier(.22,.61,.36,1), visibility 0s linear .4s; } .header nav > ul > li:nth-last-child(-n+4) .dep2 { left: auto; right: 0; } .header nav .dep2.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity .28s ease, transform .4s cubic-bezier(.22,.61,.36,1); } /* 패널 카드 — 테두리 대신 부드럽게 떠있는 그림자 + 넉넉한 여백. 메뉴 밴드에 딱 붙는 구조라 라운드는 직각(0)으로 통일 — 상단 각짐/하단 둥금의 비대칭 어색함 제거(그림자가 분리감 담당). */ .header nav .dep2 ul { display: block; min-width: 17rem; padding: 1rem 0; background: #fff; border: 0; border-radius: 0; position: relative; overflow: hidden; /* 각진 플러시 패널 — 하단 가중 레이어드 그림자(음수 spread 로 상단/측면 번짐 억제, 메뉴 밴드와 깔끔히 붙음). ※ 이 값이 최종 — 과거 파일 하단(웜그림자 섹션)의 중복 선언을 제거해 단일화함. */ box-shadow: 0 16px 30px -12px rgba(60, 48, 40, .26), 0 4px 10px -6px rgba(60, 48, 40, .12); } .header nav .dep2 ul li { display: block; } /* 항목 — 넉넉한 패딩. hover 시 배경 틴트 + 브랜드색만(텍스트 위치 고정, 점프 없음). */ .header nav .dep2 ul .btn-dep2 { display: block; line-height: 1.3; padding: 1.1rem 2.4rem; font-size: 1.5rem; color: var(--ink); white-space: nowrap; opacity: 1; transition: color .2s ease, background .2s ease; } .header nav .dep2 ul:hover .btn-dep2 { opacity: 1; } /* front.css 의 형제 dim(opacity:.4) 무력화 */ .header nav .dep2 ul .btn-dep2:hover { background: var(--color-soft); color: var(--color); } /* 항목 등장 스태거 — 패널이 열리면 항목이 위→아래로 시차 페이드인(공들인 인상). 닫히면 즉시 초기화. li 자체 투명도라 위 hover-dim(.btn-dep2 opacity) 무력화 규칙과 충돌하지 않는다. 데스크탑 전용 셀렉터. */ .header nav .dep2 ul li { opacity: 0; transform: translateY(7px); transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1); } .header nav .dep2.is-open ul li { opacity: 1; transform: translateY(0); } .header nav .dep2.is-open ul li:nth-child(2) { transition-delay: .04s; } .header nav .dep2.is-open ul li:nth-child(3) { transition-delay: .08s; } .header nav .dep2.is-open ul li:nth-child(4) { transition-delay: .12s; } .header nav .dep2.is-open ul li:nth-child(5) { transition-delay: .16s; } .header nav .dep2.is-open ul li:nth-child(n+6) { transition-delay: .2s; } /* 가로 풀폭 보라 밴드(.bg-nav)는 미사용 잔재 → 숨김 */ .header .bg-nav { display: none !important; } /* ── 헤더 우측 상담 CTA (.site-cta) — .header(position:relative) 우측 여백에 절대배치(세로 가운데). 솔리드 핫필(plum) 1줄: 인라인 흰 라인 아이콘 + 라벨(작게·연한 흰색) + 번호(굵게·흰색). .header 가 모바일에서 display:none 이라 자동으로 데스크탑 전용(모바일은 #m-gnb .m-auth 의 전화하기). ── */ .site-cta { position: absolute; right: 3rem; top: 50%; transform: translateY(-50%); z-index: 16; display: inline-flex; flex-direction: row; align-items: center; gap: .8rem; line-height: 1; cursor: default; padding: 1.05rem 1.9rem; border: 1px solid var(--color); border-radius: 999px; background: var(--color); box-shadow: 0 6px 16px -6px rgba(125, 58, 125, .42); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } .site-cta-ico { flex: none; width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center; color: #fff; } .site-cta-ico svg { width: 1.9rem; height: 1.9rem; } .site-cta-text { display: inline-flex; flex-direction: row; align-items: baseline; gap: .6rem; } .site-cta-label { font-size: 1.3rem; font-weight: 500; color: rgba(255, 255, 255, .82); letter-spacing: .04em; margin: 0; } .site-cta-tel { font-size: 1.7rem; font-weight: 700; color: #fff; letter-spacing: .01em; } /* 통화 가능 기기에서 front.js 가 href 를 부여했을 때만 커서 포인터(데스크탑은 .header display:none 으로 비노출) */ .site-cta[href] { cursor: pointer; } /* ── 스크롤 헤더 고정(옵트인) — 디자인 설정 '상단 메뉴 고정'(system_settings.header_sticky)이 켜지면 body.hdr-sticky. 데스크탑: 로고행(.top)은 자연히 스크롤아웃되고 메뉴 밴드(.header)만 sticky 로 상단에 붙는다(축소형 1단 — 높이 애니메이션 없이 네이티브 스크롤이 축소를 담당). 붙는 시점부터 front.js 가 body.hdr-scrolled 를 켜 밴드 좌측 컴팩트 로고 페이드인 + 떠있는 그림자. 모바일(≤1020px)은 .header 가 숨김이라 슬림 로고바(.top)를 그대로 sticky. z-index 900 = 본문/서브 히어로 위·퀵바(1000)/모바일 오버레이(5000) 아래. ── */ body.hdr-sticky .header { position: sticky; top: 0; z-index: 900; } body.hdr-sticky.hdr-scrolled .header { box-shadow: 0 10px 24px -14px rgba(60, 48, 40, .28); } /* 컴팩트 로고 — .site-cta(right:3rem)와 대칭으로 좌측 절대배치. 평소엔 완전 숨김(자리 차지 없음). */ .header .header-logo { position: absolute; left: 3rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; z-index: 16; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; } .header .header-logo img { display: block; height: 3.4rem; width: auto; max-width: 24rem; object-fit: contain; } .header .header-logo span { font-size: 1.8rem; font-weight: 700; color: var(--ink); letter-spacing: .02em; white-space: nowrap; } body.hdr-scrolled .header .header-logo { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease; } /* 해시 앵커 이동 시 고정 밴드에 가려지지 않게 — 밴드 높이(6rem)+여유만큼 스크롤 여백 */ html:has(body.hdr-sticky) { scroll-padding-top: 7rem; } @media all and (max-width: 1020px) { /* 모바일 — .top(로고 45px 바)이 이미 슬림해 추가 축소 없이 그대로 상단 고정. .top 은 sticky 로 스택 컨텍스트가 생겨 내부 .btn-m(z:5000)이 밖으로 못 나가지만, 메뉴 열림 상태의 햄버거(X)는 현재도 오버레이(.m-bg z:5000, DOM 후순위)에 덮이는 구조라 동작 변화 없음 (닫기는 #m-gnb .btn-close/.m-bg 클릭이 담당). */ body.hdr-sticky .top { position: sticky; top: 0; z-index: 900; } body.hdr-sticky.hdr-scrolled .top { box-shadow: 0 10px 24px -14px rgba(60, 48, 40, .28); } html:has(body.hdr-sticky) { scroll-padding-top: 80px; } /* 모바일 .top(로고 45px+패딩) ≈73px + 여유 */ } /* ── 모바일 슬라이드 메뉴 하단 회원 동선 (#m-gnb 내부) ── */ .m-auth { display: none; } @media all and (max-width: 1020px) { /* 데스크탑 우상단 유틸바는 모바일에서 햄버거(.btn-m)와 겹치므로 숨김 — 회원 동선은 .m-auth 가 대신 */ .site-utilbar { display: none; } /* #m-gnb 를 세로 flex 로: .m-auth(닫기버튼과 같은 상단 줄, 우측 닫기 영역 회피) → nav(남는 공간 스크롤). (front.css 의 nav height:calc(100% - 50px)+margin-top:50px 가 전체를 점유해 .m-auth 가 안 보이던 문제 보정) */ #m-gnb { display: flex; flex-direction: column; } #m-gnb nav { height: auto; margin-top: 0; flex: 1 1 auto; min-height: 0; } .m-auth { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; height: 50px; box-sizing: border-box; padding: 0 55px 0 20px; border-bottom: 1px solid var(--line); font-size: 17px; } /* 각 항목(전화·로그인·회원가입)은 줄바꿈 금지 — 폭 부족 시 글자가 개행되던 현상 보정 */ .m-auth a, .m-auth button { color: var(--body); text-decoration: none; white-space: nowrap; flex: 0 0 auto; } .m-auth button { background: none; border: 0; padding: 0; cursor: pointer; font-size: 17px; } .m-auth form { display: inline; } .m-auth .uname { color: var(--ink); font-weight: 600; } /* 전화는 아이콘+작은 라벨 링크 — 폭 잠식 없이 좌측 고정, 로그인/회원가입은 우측 정렬 */ .m-auth .site-tel { color: var(--color); font-weight: 700; margin-right: auto; display: inline-flex; align-items: center; gap: 5px; } .m-auth .site-tel svg { display: block; } .m-auth .site-tel-txt { font-size: 15px; } /* ── 모바일 헤더 톤 정리 — 데스크탑과 같은 모카·차콜·웜 팔레트로 통일 (front.css 원본의 차가운 회색 #666/#333/#f2f2f2/#555/#eee/순검정 보정) ── */ .btn-m span { background: var(--ink); } /* 햄버거 라인: 회색 → 차콜 */ #m-gnb { background: var(--paper); } /* 슬라이드 패널 흰 배경 */ #m-gnb .btn-close:before, #m-gnb .btn-close:after { background: var(--ink); } /* 닫기 X → 차콜 */ /* 1뎁스 — 차콜 글씨 + 웜 행 구분선 + 펼침 화살표·활성색 모카 */ #m-gnb nav > ul > li { border-bottom: 1px solid var(--line); } #m-gnb nav .btn-dep1 { color: var(--ink); letter-spacing: .01em; } #m-gnb nav .btn-dep1:before { border-color: var(--color); } #m-gnb nav > ul > li.on > .btn-dep1 { color: var(--color); } /* 2뎁스 — 차가운 회색 패널(#f2f2f2) → 웜 틴트, 항목 톤 정리 */ #m-gnb nav .dep2 { background: var(--color-soft); } #m-gnb nav .btn-dep2 { color: var(--body); } #m-gnb nav .btn-dep2:active { color: var(--color); } /* 오버레이 — 순검정 → 따뜻한 딥 차콜 반투명 + 살짝 블러로 본문과 분리(미지원 시 반투명만) */ .m-bg { background: rgba(44, 40, 37, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* ── E. 모바일 슬라이드 메뉴 폴리시 — 드로어 깊이감 + 편안한 터치 영역 + 위계 명확화 ── */ /* 열렸을 때 페이지 위로 떠 보이는 좌측 그림자(깊이감) + 슬라이드 이징 보정(원본 ease → 감속 커브) */ #m-gnb { transition: right .34s cubic-bezier(.22,.61,.36,1), opacity .34s ease; box-shadow: -12px 0 40px -12px rgba(44, 40, 37, .35); } /* 1뎁스 — 편안한 터치 높이 + 정돈된 타이포 */ #m-gnb nav .btn-dep1 { padding: 16px 22px; font-size: 16px; font-weight: 600; } /* 펼침 화살표 — 두껍던 라인(2px) 가늘게(1.5px)·작게 다듬어 단정하게 */ #m-gnb nav .btn-dep1:before { width: 7px; height: 7px; border-left-width: 1.5px; border-bottom-width: 1.5px; } /* 2뎁스 — 들여쓰기 + 항목별 좌측 샴페인 헤어라인으로 부모-자식 위계를 또렷하게 */ #m-gnb nav .dep2 { padding: .4rem 0; } #m-gnb nav .btn-dep2 { padding: 12px 22px 12px 34px; font-size: 15px; position: relative; } #m-gnb nav .btn-dep2::before { content: ''; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 6px; height: 1px; background: var(--accent); } } /* 초협폭(≤360px) — .m-auth 로그인 상태 3항목(전화하기·마이페이지·로그아웃)이 닫기(X) 영역을 침범하지 않도록 폰트·간격 축소. 가용폭 = 화면 - 55px(닫기 회피) - 20px(좌 패딩). */ @media all and (max-width: 360px) { .m-auth { gap: 11px; font-size: 15px; } .m-auth button { font-size: 15px; } .m-auth .site-tel-txt { font-size: 13px; } } /* 320px대(폴드 커버 등) — 전화는 아이콘만 남겨 로그아웃이 닫기(X)와 겹치지 않게 */ @media all and (max-width: 330px) { .m-auth .site-tel-txt { display: none; } } /* ── 서브페이지 유틸리티 — 디자인 톤이 아직 적용되지 않은 본문(폼/목록/알림)의 최소 가독 스타일. 퍼블리싱 디자인(front.css)과 충돌하지 않도록 전부 .app-body 스코프. 홈은 page 블록을 직접 override 하므로 .app-body 를 쓰지 않아 영향 없음. ── */ .app-body { max-width: 100rem; margin: 0 auto; padding: 2.5rem 2rem 6rem; min-height: 40vh; color: var(--body); line-height: 1.7; font-size: 1.6rem; } /* 페이지 제목 — .sub-head h2 와 동일한 차콜 + 좌측 모카 바(서브페이지 통일) */ .app-body h1 { position: relative; padding-left: 1.8rem; font-size: 3rem; font-weight: 700; color: var(--ink); line-height: 1.3; margin: 0 0 1.6rem; } .app-body h1::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 2.2rem; background: var(--color); border-radius: 2px; } .app-body h2 { font-size: 2rem; font-weight: 700; color: var(--ink); margin: 2.4rem 0 1rem; } .app-body h3 { font-size: 1.7rem; font-weight: 600; color: var(--ink); margin: 1.6rem 0 .6rem; } .app-body a { color: var(--color); } .app-body form table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; } .app-body form th { text-align: left; padding: 1rem .8rem; width: 12rem; vertical-align: top; font-weight: 600; color: var(--ink); font-size: 1.5rem; } .app-body form td { padding: 1rem .8rem; } .app-body input[type="text"], .app-body input[type="email"], .app-body input[type="password"], .app-body input[type="date"], .app-body input[type="tel"], .app-body select, .app-body textarea { padding: 1rem 1.4rem; border: 1px solid var(--line); border-radius: .8rem; min-width: 18rem; font-size: 1.5rem; color: var(--ink); background: #fff; } .app-body input:focus, .app-body select:focus, .app-body textarea:focus { outline: none; border-color: var(--color); } .app-body textarea { width: 100%; min-height: 8rem; line-height: 1.6; } .app-body button, .app-body .btn { display: inline-flex; align-items: center; justify-content: center; height: 4.4rem; padding: 0 2.4rem; border: 1px solid var(--color); border-radius: .8rem; background: var(--color); color: #fff; font-size: 1.5rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .25s ease; } .app-body button:hover, .app-body .btn:hover { background: #fff; color: var(--color); } .app-body button.secondary, .app-body .btn.secondary { background: #fff; color: var(--color); } .app-body .errors { color: #c0392b; background: #fdecec; border-radius: 1rem; padding: 1.4rem 1.8rem; margin: 1rem 0; list-style: none; font-size: 1.5rem; } .app-body .flash { background: var(--color-soft); color: var(--color-deep); border-radius: 1rem; padding: 1.4rem 1.8rem; margin: 1rem 0; font-size: 1.5rem; } .app-body .tip { color: #8a857e; font-size: 1.5rem; } /* 상세 페이지 빵부스러기(crumb) — 인라인 스타일보다 명시도 높게 잡아 톤 통일 */ .app-body .crumb { font-size: 1.4rem; color: #999; margin-bottom: 1.2rem; } .app-body .crumb a { color: var(--color); text-decoration: none; } /* 콘텐츠 페이지(진료항목·약관) 본문 타이포그래피 — sanitize 된 HTML 렌더 영역 (Phase 6.3) */ .app-body .content-body { line-height: 1.7; color: #333; max-width: 80rem; } /* 줄글 가독 캡(800px) — .post-body 와 동일 기준 */ .app-body .content-body h2 { font-size: 1.2rem; margin: 1.6rem 0 0.6rem; padding-left: 0.6rem; border-left: 4px solid var(--color); } .app-body .content-body h3 { font-size: 1.05rem; margin: 1.2rem 0 0.5rem; } .app-body .content-body h4 { font-size: 0.98rem; margin: 1rem 0 0.4rem; } .app-body .content-body p { margin: 0.6rem 0; } .app-body .content-body ul, .app-body .content-body ol { margin: 0.6rem 0; padding-left: 1.4rem; } .app-body .content-body li { margin: 0.2rem 0; } .app-body .content-body img { max-width: 100%; height: auto; border-radius: 4px; margin: 0.6rem 0; } .app-body .content-body blockquote { margin: 0.8rem 0; padding: 0.5rem 1rem; border-left: 3px solid #ccc; color: #555; background: #f8f9fa; } /* ============================================================================ 회원 인증 화면 (로그인·회원가입·아이디/비밀번호 찾기·재설정·변경) 퍼블리싱 디자인 톤(보라 var(--color)·Pretendard·pill 버튼·라운드 카드). 전부 .auth 스코프. ============================================================================ */ .auth { display:flex; justify-content:center; padding:6rem 2rem 9rem; } /* 세로 중앙 정렬 — 카드가 짧아 푸터까지 흰 공백이 크게 남는 문제 보정. :has() 미지원 브라우저는 기존(상단 정렬) 그대로 — 순수 개선형(기능 영향 없음). 콘텐츠가 뷰포트보다 길면(회원가입 등) 늘어난 컨테이너에 맞춰 자연히 상단부터 흐름. */ .page-wrap:has(> .auth) { display: flex; flex-direction: column; } .page-wrap:has(> .auth) > .auth { flex: 1 0 auto; align-items: center; } .auth-card { width:100%; max-width:52rem; background:#fff; border:1px solid #eee; border-radius:1.6rem; padding:4rem 5rem 4.5rem; } .auth-head { text-align:center; margin-bottom:2.8rem; } .auth-head .eyebrow { display:block; font-size:1.4rem; letter-spacing:.4rem; text-transform:uppercase; color:var(--color); font-weight:600; margin-bottom:.8rem; } .auth-head h1 { font-size:2.8rem; font-weight:700; color:#222; } .auth-head .desc { margin-top:1.2rem; font-size:1.5rem; color:#888; line-height:1.6; word-break:keep-all; } .auth .section-title { font-size:1.7rem; font-weight:600; color:#333; margin:2.8rem 0 1.4rem; padding-top:2.4rem; border-top:1px solid var(--line); } .auth .section-title:first-of-type { margin-top:.5rem; padding-top:0; border-top:0; } .auth .field { margin-bottom:1.6rem; } .auth .field label { display:block; font-size:1.5rem; color:#555; margin-bottom:.8rem; } .auth .field input[type="text"], .auth .field input[type="email"], .auth .field input[type="tel"], .auth .field input[type="password"] { width:100%; height:5rem; border:1px solid #ddd; border-radius:1rem; padding:0 1.6rem; font-size:1.6rem; color:#222; background:#fff; transition:border-color .2s ease; } .auth .field input:focus { outline:none; border-color:var(--color); } .auth .field .hint { margin-top:.7rem; font-size:1.3rem; color:#999; line-height:1.5; } .auth .agree { margin:2rem 0 .5rem; } .auth .agree label { display:flex; align-items:flex-start; gap:.8rem; font-size:1.5rem; color:#555; margin-bottom:1rem; cursor:pointer; } .auth .agree input { margin-top:.3rem; flex:none; } .auth .agree .opt { color:#aaa; } .auth .notice, .auth .errors, .auth .result { border-radius:1rem; padding:1.4rem 1.8rem; margin-bottom:2rem; font-size:1.5rem; line-height:1.6; list-style:none; } .auth .notice, .auth .result { background:var(--color-soft); color:var(--color-deep); } .auth .result strong { color:var(--color); } .auth .result a { color:var(--color); word-break:break-all; } .auth .result .tip { display:block; margin-top:.6rem; font-size:1.3rem; color:var(--body); } .auth .errors { background:#fdecec; color:#c0392b; } .auth .errors li + li { margin-top:.5rem; } .auth .btn-primary { width:100%; height:5rem; border:1px solid var(--color); border-radius:4rem; background:var(--color); color:#fff; font-size:1.7rem; font-weight:600; cursor:pointer; margin-top:.8rem; transition:all .25s ease; } .auth .btn-primary:hover { background:#fff; color:var(--color); } .auth .btn-outline { display:flex; align-items:center; justify-content:center; width:100%; height:5rem; border:1px solid #ddd; border-radius:4rem; background:#fff; color:#444; font-size:1.6rem; text-decoration:none; cursor:pointer; margin-top:1rem; transition:all .25s ease; } .auth .btn-outline:hover { border-color:var(--color); color:var(--color); } .auth .btn-row { display:flex; gap:1rem; margin-top:.8rem; } .auth .btn-row .btn-primary, .auth .btn-row .btn-outline { margin-top:0; flex:1; } /* 폴더형 탭 (이메일 / 휴대폰) — CSS-only 라디오 토글. 라디오를 nav·panel 보다 먼저 두고 ~ 형제 셀렉터로 전환. 탭이 입력폼 박스 위에 얹히고(상하 배치), 활성 탭이 흰색으로 폼과 이어진다. margin-bottom:-1px 로 탭 하단이 폼 상단 경계선을 덮고, nav z-index 로 폼 위에 그려 활성 탭의 흰 배경이 경계선을 가린다. ※ 클래스는 반드시 auth- 접두사 유지 — front.css 에 .tabs{display:flex} 가 있어 무접두 .tabs 는 좌우 분할로 깨짐. */ .auth-tabs { position:relative; } .auth-tab-radio { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .auth-tab-nav { display:flex; gap:.4rem; position:relative; z-index:1; } .auth-tab-nav label { flex:1; text-align:center; padding:1.3rem 1rem; font-size:1.6rem; color:#888; cursor:pointer; background:var(--ivory); border:1px solid #e2e2e2; border-bottom:none; border-radius:1rem 1rem 0 0; margin-bottom:-1px; transition:all .2s ease; } .auth-tab-radio.auth-tab-mobile:checked ~ .auth-tab-nav .auth-nav-mobile, .auth-tab-radio.auth-tab-email:checked ~ .auth-tab-nav .auth-nav-email { background:#fff; color:var(--color); font-weight:700; } .auth-tab-panel { display:none; border:1px solid #e2e2e2; border-radius:0 0 1rem 1rem; padding:2.8rem 2.2rem 2.4rem; background:#fff; } .auth-tab-radio.auth-tab-mobile:checked ~ .auth-tab-panel.auth-panel-mobile, .auth-tab-radio.auth-tab-email:checked ~ .auth-tab-panel.auth-panel-email { display:block; } .auth-tab-panel .field:last-of-type { margin-bottom:0; } .auth-tab-panel .btn-primary { margin-top:2rem; } /* 소셜 간편 로그인 (카카오) — 공식 버튼 가이드: 배경 #FEE500, 라벨 검정 85%. auth- 접두 필수(front.css 충돌 방지). */ .auth-social { margin-top:2.4rem; } .auth-social-divider { display:flex; align-items:center; gap:1.2rem; font-size:1.3rem; color:#aaa; margin-bottom:1.4rem; } .auth-social-divider::before, .auth-social-divider::after { content:""; flex:1; height:1px; background:var(--line); } .auth-kakao-btn { display:flex; align-items:center; justify-content:center; gap:.8rem; width:100%; height:5rem; border-radius:4rem; background:#FEE500; color:rgba(0,0,0,.85); font-size:1.6rem; font-weight:600; text-decoration:none; transition:filter .2s ease; } .auth-kakao-btn:hover { filter:brightness(.96); } .auth-kakao-btn svg { width:2rem; height:2rem; flex:none; } .auth .help { margin-top:2.4rem; padding-top:2rem; border-top:1px solid var(--line); text-align:center; font-size:1.4rem; color:#999; } .auth .help a { color:#777; text-decoration:none; } .auth .help a:hover { color:var(--color); } .auth .help .sep { margin:0 1rem; color:#ddd; } /* 제목 글꼴은 사이트 전체 단일 Pretendard 로 일원화(배너 제목 포함, 파일 하단 "타이포 역할 시스템" 참조). 과거 배너/큰 제목에 명조체(Noto Serif KR @font-face + Cormorant)를 걸었으나 기본 글꼴로 환원하며 제거했다. */ /* ============================================================================ 서브 카테고리 탭바(.subnav) — 빵부스러기 대체 위치표시 (2026-09-15) 히어로 밴드 바로 아래 풀블리드 띠. 현재 페이지의 형제(2뎁스) 전체를 균등폭 탭으로 깔고 현재 항목만 반전(흰 배경)시켜 "지금 어디" + "옆에 뭐가 있나"를 한 줄로 보여준다. 마크업은 partials/_subnav.twig(형제 2개 이상일 때만 출력), 데이터는 breadcrumb.siblings 재사용. 내부 레일은 .cp-hero__inner 와 동일한 1080 프레임 → 밴드 텍스트와 탭 시작 X 가 일치한다. ※ 무접두 .nav/.tabs 는 front.css 범용 클래스와 충돌하므로 .subnav 로 격리. ============================================================================ */ .subnav { position: relative; width: 100%; background: var(--color); } .subnav__inner { max-width: calc(1080px + 4rem); margin: 0 auto; padding: 0 2rem; } .subnav ul { display: flex; margin: 0; padding: 0; list-style: none; } .subnav li { flex: 1 1 0; min-width: 0; } .subnav a, .subnav li > span { display: flex; align-items: center; justify-content: center; height: 5.4rem; padding: 0 1.2rem; font-size: 1.6rem; font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; color: rgba(255, 255, 255, .88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s ease, color .2s ease; } .subnav a:hover { background: rgba(255, 255, 255, .12); color: #fff; } /* 이동 불가 항목(메뉴 href 가 비었거나 '#') — 링크 대신 비활성 텍스트 */ .subnav li > span { color: rgba(255, 255, 255, .55); cursor: default; } .subnav .is-current a, .subnav .is-current > span { background: #fff; color: var(--color); font-weight: 700; } /* 형제가 1개뿐인 카테고리(수액클리닉/예방접종) — 균등분할(flex:1)이면 흰 활성 배경이 띠 전체를 덮어 네이비 띠가 사라진다. 단일 탭만 폭을 내용에 맞춰 좌측 정렬 → 여러 개짜리 탭바의 첫 탭과 같은 모양. (탭을 아예 숨기지 않는 이유: 빵부스러기를 걷어낸 뒤 이 띠가 유일한 위치 단서이고, 카테고리 간 본문 시작 높이를 고정해야 한다 — partials/_subnav.twig 주석) */ .subnav li:only-child { flex: 0 1 auto; min-width: 20rem; } /* 모바일(≤1020px) — 균등분할 대신 가로 스크롤. 라벨이 길어(예: '임파선염,경부종양') 6개 균등분할은 글자가 잘린다. 활성 항목은 front.js 가 화면 안으로 끌어온다. 이 구간은 루트가 7px 로 줄어(front.css) rem 이 30% 작아지므로 높이·글자는 px 고정(quickbar 와 동일 방침). */ @media all and (max-width: 1020px) { .subnav__inner { max-width: none; padding: 0; } .subnav ul { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .subnav ul::-webkit-scrollbar { display: none; } .subnav li { flex: 0 0 auto; } .subnav a, .subnav li > span { height: 48px; padding: 0 18px; font-size: 14.5px; } .subnav li:only-child { min-width: 140px; } /* 우측 끝 페이드 — "더 있음" 암시. front.js 가 넘치는 경우에만 is-scrollable 을 붙이고, 끝까지 스크롤하면 is-end 로 걷어낸다. */ .subnav.is-scrollable::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 34px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--color) 72%); opacity: 1; transition: opacity .2s ease; } .subnav.is-scrollable.is-end::after { opacity: 0; } } /* ============================================================================ 게시판 / 공지사항 — 프론트 퍼블리싱 디자인(서브페이지) 톤 적용 _sub.twig 가 그리는 .sub-visual 히어로 + .sub-body 본문에 시안(front.css, 보라 --color) 스케일을 입힌다. 루트 10px(반응형 8/7px) 환경이라 rem 값이 그대로 시안과 호응. ※ 충돌 방지: 본문 규칙은 전부 `.sub-body` 스코프 (front.css 의 무접두 .tabs/.muted 등과 분리). ============================================================================ */ .sub-body { padding: 2.5rem 0 2rem; color: #333; line-height: 1.6; } .sub-body .inner { max-width: 100rem; } /* 페이지 헤더 — 시안 .sub-visual(풀블리드 이미지 배너)을 걷어내고 가벼운 텍스트 헤더로 대체. 작은 브레드크럼 + 제목. 제목 좌측 세로 강조 바(┃)로 "페이지명" 인상 + 헤더 앵커링. */ .sub-head { margin-bottom: 2.4rem; } .sub-head .path { display: flex; align-items: center; gap: .8rem; font-size: 1.6rem; color: #888; margin-bottom: 1.4rem; } .sub-head .path .home { display: inline-flex; align-items: center; color: #888; } .sub-head .path a { color: #555; text-decoration: none; transition: color .2s ease; } .sub-head .path a:hover { color: var(--color); } /* 구분자 = 꺾쇠(›) — 부모›자식 위계/방향 표현(과거 점은 위계가 안 드러남). 빈 .dot span 에 글리프 주입. 색은 글자보다 옅게(#aaa) 두어 항목이 도드라지게. */ .sub-head .path .dot { flex: none; width: auto; height: auto; background: none; border-radius: 0; color: #aaa; font-size: 1.5rem; line-height: 1; } .sub-head .path .dot::before { content: '\203A'; } .sub-head .path .current { color: #333; } /* 상세 꼬리 크럼(글 제목) — 길면 말줄임 */ .sub-head .path .crumb-title { display: inline-block; max-width: 32rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* 좌측 세로 강조 바 — 상세에선 페이지 타이틀(바 O) vs 글 제목(바 X)으로 위계도 구분 */ .sub-head h2 { position: relative; padding-left: 1.8rem; font-size: 3rem; font-weight: 700; color: #222; line-height: 1.3; } .sub-head h2::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 2.2rem; background: var(--color); border-radius: 2px; } /* 브레드크럼 형제-점프 드롭다운 (nice-select) — 시안 동작 복원, 깔끔한 텍스트 헤더 톤으로 최소화. front.js 가 .path 의