/* ★ 화면이 2000px보다 넓어도 모든 페이지(로고/메뉴/본문/푸터)가
같은 가로 위치에서 시작하도록 하는 공통 좌우 여백.
- 2000px 이하 화면: 기존과 같은 10%
- 2000px 초과 화면(예: 2560): 2000px 박스를 가운데 두었을 때의 위치 */
:root {
--side: max(10%, calc((100% - 2000px) / 2 + 10%));
}
/* =========================================================
site.css - JINI HAIR 방문자 화면 전체 스타일 (한 파일)
---------------------------------------------------------
예전에는 style / popup / shop / index / about / location / before-after .css 로
나뉘어 있었고, 페이지마다 필요한 파일을 골라 불러왔습니다.
지금은 한 파일로 합쳐서 한 번만 내려받고 모든 페이지가 재사용합니다 (더 빠름).
※ 글꼴(Noto Sans KR 등)은 partials/head.php 가 로 불러옵니다.
★ 이 파일의 순서 (위에서 아래로)
[공통] 1~3. 기본, 헤더, 히어로 ← 아래 "공통 스타일" 부분 (옛 style.css)
... 섹션/카드/제품/폼/푸터 ... 그리고 @media 800px(태블릿), 520px(작은 폰)
[팝업] PART 1. 팝업창, 사진 크게 보기 (옛 popup.css)
[페이지] PART 2. 제품소개 / Before & After / 메인 / 원장소개 / 오시는 길 / 문의
★ 자주 수정할 부분
① .hero (메인 첫 화면) ② .section (일반 섹션) ③ footer (맨 아래)
④ @media 800px (휴대폰/태블릿) ⑤ @media 520px (작은 휴대폰)
CSS에서 기억할 것
- margin = 요소 "바깥쪽" 여백
- padding = 요소 "안쪽" 여백
- width = 가로 크기
- height / min-height = 세로 크기
- gap = grid/flex 항목 사이 간격
========================================================= */
/* =========================================================
1. 기본 및 공통 스타일
---------------------------------------------------------
홈페이지 전체에 공통으로 적용되는 기본 설정입니다.
========================================================= */
/* 모든 HTML 요소에 적용 */
* {
box-sizing: border-box;
/* width / height를 계산할 때
padding과 border를 포함하도록 합니다.
예:
width: 100px;
padding: 10px;
이 설정이 있으면 실제 전체 크기가 100px 안에 들어갑니다.
홈페이지 레이아웃이 예상과 다르게 커지는 것을 막아줍니다. */
}
/* 페이지 전체 */
body {
margin: 0;
/* 브라우저가 기본으로 넣는 바깥 여백을 제거합니다.
★ 페이지 가장자리의 기본 빈 공간 제거 */
background: #f6f2ed;
/* 페이지 기본 배경색 */
color: #211d1a;
/* 기본 글자색 */
font-family: 'Noto Sans KR', sans-serif;
/* 한글 기본 글꼴 */
line-height: 1.7;
/* 기본 줄 간격입니다.
숫자가 커질수록 문장 사이의 세로 간격이 커집니다. */
word-break: keep-all;
/* 한글 단어가 중간에서 잘리지 않도록 합니다.
예: "헤어케어"가 중간에서 끊어지는 것을 방지 */
overflow-wrap: break-word;
/* 너무 긴 단어가 영역을 넘어갈 경우 줄바꿈 */
}
/* 모든 링크 */
a {
text-decoration: none;
/* 링크 밑줄 제거 */
color: inherit;
/* 링크가 부모 요소의 글자색을 그대로 사용 */
}
/* =========================================================
2. 헤더 / 상단 메뉴 / 기본 글꼴
========================================================= */
/* PC 상단 헤더 */
.header {
height: 70px;
/* ★ PC 상단 메뉴 전체 높이
숫자를 크게 하면 상단 메뉴 영역이 높아집니다. */
display: flex;
/* 로고 / 메뉴를 가로로 배치 */
align-items: center;
/* 로고와 메뉴를 세로 가운데 정렬 */
justify-content: space-between;
/* 로고는 왼쪽
메뉴는 오른쪽 */
padding: 0 var(--side);
/* 좌우 내부 여백
위아래 = 0
좌우 = 6% */
position: relative;
/* 내부 요소의 위치 기준 */
background: #f6f2ed;
/* 헤더 배경색 */
z-index: 10;
/* 다른 요소보다 위에 표시 */
}
/* JINI 로고 */
.logo {
font-family: Georgia, serif;
/* 로고 글꼴 */
font-size: 24px;
/* ★ 로고 글자 크기 */
font-weight: 900; /* 이 줄을 추가하여 로고를 진하게 만듭니다 */
letter-spacing: 5px;
/* ★ 로고 글자 사이 간격 */
line-height: 1;
display: inline-flex;
align-items: baseline;
}
/* 로고 안의 HAIR */
.logo span {
font-size: 15px;
/* HAIR 글자 크기 */
letter-spacing: 2px;
/* HAIR 글자 사이 간격 */
margin-left: 7px;
/* JINI와 HAIR 사이의 가로 간격 */
line-height: 1;
}
/* PC 상단 메뉴 */
nav {
display: flex;
/* 메뉴 항목을 가로로 배치 */
gap: 40px;
/* ★ 메뉴 항목 사이 가로 간격
예:
원장 소개 ↔ Before & After
사이의 거리 */
font-size: 18px;
/* 메뉴 글자 크기 */
font-weight: 700; /* 이 줄을 추가하여 메뉴 글자를 진하게 만듭니다 (조금 더 얇게 하려면 500 사용) */
}
/* 메뉴에 마우스를 올렸을 때 */
nav a:hover {
opacity: 0.55;
/* 마우스를 올리면 메뉴가 조금 흐려짐 */
}
/* 모바일 햄버거 메뉴 */
.menu {
display: none;
/* PC에서는 숨김
모바일에서만 아래 @media에서 표시 */
border: 0;
/* 버튼 테두리 제거 */
background: none;
/* 버튼 배경 제거 */
font-size: 24px;
/* 햄버거 아이콘 크기 */
}
/* THE SALON 같은 작은 영문 제목 */
.eyebrow {
letter-spacing: 1px;
/* ★ 영문 글자 사이 간격 */
font-size: 12px;
/* 글자 크기 */
font-weight: 700;
/* 글자 굵기 */
color: #a88758;
/* 금색 */
margin-top: 0;
/* 위쪽 바깥 여백 */
margin-bottom: 2px;
/* 아래쪽 바깥 여백
★ THE SALON과 다음 제목 사이 간격에 영향 */
}
/* =========================================================
메인 제목
---------------------------------------------------------
.hero h1 = 메인 첫 화면 제목
.page h1 = 서브페이지 제목
========================================================= */
.hero h1 {
font-size: clamp(32px, 4vw, 78px);
/* ★ 제목 글자 크기
clamp(최소값, 화면에 따른 값, 최대값)
최소 32px
화면 너비에 따라 4vw
최대 78px
즉 PC 화면이 커져도 최대 78px까지만 커집니다. */
line-height: 1.18;
/* 제목 여러 줄 사이의 줄 간격 */
font-weight: 500;
/* 제목 글자 굵기 */
margin: 0 0 10px;
/* ★★★ 제목 주변 바깥 여백
위쪽 = 0
오른쪽 = 0
아래쪽 = 8px
왼쪽 = 0
따라서 제목 아래의 여백을 줄이고 싶으면
마지막 숫자인 8px을 줄입니다.
예:
margin: 0 0 0;
→ 제목 아래 여백 없음
margin: 0 0 15px;
→ 제목 아래 여백 증가 */
}
.page h1 {
font-size: clamp(24px, 3vw, 58px);
line-height: 1.18;
font-weight: 500;
margin: 0 0 20px;
}
/* =========================================================
em 강조 글자
========================================================= */
.hero em,
.page em,
h2 em {
font-family: 'Noto Sans KR', sans-serif;
/* 강조 글자의 글꼴 */
font-style: normal;
/* 기본 em의 기울임 효과 제거 */
font-weight: 700;
/* 강조 글자를 굵게 */
color: #d3b47e;
/* ★ 강조 글자 금색 */
}
/* =========================================================
3. 메인 히어로 영역
---------------------------------------------------------
★★★★★
사진에서 1번 영역을 담당합니다.
PC에서는:
왼쪽 = 문구
오른쪽 = 메인 이미지
모바일에서는:
문구
↓
버튼
↓
이미지
순서로 바뀝니다.
========================================================= */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★
메인 첫 화면 전체
사진의 "1번" 영역
★★★★★★★★★★★★★★★★★★★★★★★★★ */
.hero {
min-height: 50px;
/* ★★★★★ PC 1번 영역의 최소 높이
현재 500px
이것이 크면:
→ 첫 번째 영역이 커짐
→ 1번과 2번 사이가 멀어짐
이것을 줄이면:
→ 첫 번째 영역이 작아짐
예:
650px → 550px
650px → 500px
★ PC의 1번 높이를 줄이고 싶을 때
가장 먼저 확인할 곳 */
background: #211d1a;
/* 1번 영역 배경색 */
color: #fff;
/* 1번 영역 기본 글자색 */
display: grid;
/* 내부를 Grid 레이아웃으로 배치 */
grid-template-columns: 1fr 1fr;
/* ★ PC에서
왼쪽 50%
오른쪽 50%
두 개의 같은 크기 영역으로 나눔 */
padding: 4% var(--side);
/* ★★★★★ PC 1번 영역 내부 여백
첫 번째 값 4%
→ 위 / 아래 여백
두 번째 값 10%
→ 왼쪽 / 오른쪽 여백
예:
padding: 2% 10%;
→ 위아래를 줄임
padding: 6% 10%;
→ 위아래를 늘림
따라서 1번 영역 내부의
글자와 이미지 주변 공간을 조절할 수 있습니다. */
overflow: hidden;
/* 영역 밖으로 삐져나오는 내용 숨김 */
}
/* 1번 영역 왼쪽 글자 묶음 */
.hero-copy {
align-self: center;
/* ★ 왼쪽 글자 묶음 전체를
1번 영역의 세로 가운데에 배치
이 값을 바꾸면
THE SALON부터 버튼까지의
전체 위치가 위/아래로 움직일 수 있습니다. */
}
/* 1번 안의 THE SALON */
.hero .eyebrow {
color: #d3b47e;
/* THE SALON 금색 */
}
/* 1번 설명 문장 */
.hero p {
color: #c9c3bd;
/* 설명 문장 색상 */
line-height: 1.3;
/* ★ 설명문 여러 줄 사이 간격
숫자가 작아지면
문장이 더 촘촘해집니다.
예:
1.3 → 매우 촘촘
1.5 → 현재
1.7 → 여유 있음 */
}
/* =========================================================
1번 영역의 버튼
========================================================= */
.actions {
display: flex;
/* 버튼을 가로로 배치 */
gap: 12px;
/* ★ 버튼과 버튼 사이 간격 */
margin-top: 30px;
/* ★★★ 설명문과 버튼 사이의 세로 간격
이 값을 줄이면
설명문 ↔ 버튼 사이가 가까워집니다.
예:
30px → 15px */
}
/* 모든 버튼 */
.btn {
display: inline-block;
/* 버튼이 내용 크기에 맞게 표시 */
border: 0;
/* 기본 테두리 제거 */
padding: 5px 20px;
/* 버튼 내부 여백
첫 번째 12px = 위/아래
두 번째 23px = 좌/우
버튼 자체의 크기를 조절 */
font-size: 14px;
/* 버튼 글자 크기 */
cursor: pointer;
/* 마우스를 올리면 클릭 커서 */
}
/* 금색 버튼 */
.gold {
background: #b9945a;
/* 버튼 배경색 */
color: #fff;
/* 버튼 글자색 */
}
/* 투명/테두리 버튼 */
.ghost {
border: 1px solid #81786f;
/* 버튼 테두리 */
color: #fff;
/* 버튼 글자색 */
}
/* =========================================================
1번 오른쪽 이미지 영역
========================================================= */
.hero-art {
display: flex;
/* 이미지 배치 */
justify-content: center;
/* 가로 가운데 */
align-items: center;
/* 세로 가운데 */
width: 100%;
/* 이미지 영역 전체 너비 */
}
/* 메인 이미지 바깥 박스 */
.hero-thumb {
width: 100%;
/* 이미지 영역 가로 크기 */
height: auto;
/* 이미지 비율에 따라 높이 자동 계산 */
}
/* 실제 메인 이미지 */
.hero-thumb img {
width: 100%;
/* 부모 영역 전체 너비 */
height: auto;
/* 원본 비율 유지 */
object-fit: contain;
/* 이미지가 잘리지 않도록 전체 표시 */
display: block;
/* 이미지 아래 생기는 불필요한 빈 공간 제거 */
}
/* =========================================================
4. 본문 공통 섹션
---------------------------------------------------------
사진의 2번 ~ 5번 영역에서 주로 사용됩니다.
========================================================= */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★
PC 2~5번 섹션의 위아래 간격
★★★★★★★★★★★★★★★★★★★★★★★★★ */
.section {
padding: 30px var(--side);
/* ★★★★★
첫 번째 50px
→ 위 / 아래 여백
두 번째 8%
→ 왼쪽 / 오른쪽 여백
따라서:
padding: 50px 8%;
→ 현재
padding: 30px 8%;
→ 섹션을 더 촘촘하게
padding: 80px 8%;
→ 섹션 사이를 더 넓게
★ 사진의 2 → 3 → 4 → 5 간격을
전체적으로 조절할 때 가장 중요한 값 */
}
/* 인트로 영역 */
.intro {
text-align: center;
/* 글자 가운데 정렬 */
max-width: 1000px;
/* 최대 너비 */
margin: auto;
/* 가운데 배치 */
padding-left: 10%;
padding-right: 10%;
/* ★ 이 영역은 최대폭이 1000px 이라, 공통 여백(--side)을 쓰면
큰 화면에서 글자 칸이 0이 되어 세로로 표시됩니다.
그래서 예전 값(10%)을 그대로 유지합니다. */
}
/* 섹션 제목 */
.intro h2,
.section h2 {
font-size: clamp(24px, 4vw, 36px);
/* 섹션 제목 크기 */
line-height: 1.2;
/* 제목 줄 간격 */
font-weight: 300;
/* 얇은 글씨 */
}
/* 설명 문장 */
.lead {
color: #766d65;
/* 설명 문장 색상 */
}
/* 어두운 섹션 */
.dark {
background: #211d1a;
/* 어두운 배경 */
color: #fff;
/* 흰색 글자 */
}
/* 섹션 제목과 전체 보기 링크 */
.section-head {
display: flex;
/* 제목과 링크를 가로 배치 */
align-items: center;
/* 중앙 정렬 */
justify-content: space-between;
/* 제목은 왼쪽
링크는 오른쪽 */
margin-bottom: 50px;
/* ★ 제목 영역과 실제 내용 사이의 세로 간격
이것은 .section의 간격과 별개입니다.
따라서 섹션 자체가 충분히 좁아졌는데도
제목과 카드 사이가 넓다면
이 값을 줄여야 합니다. */
}
/* 섹션 제목 */
.section-head h2 {
margin: 5px 0;
/* 제목 위/아래 바깥 여백 */
}
/* 전체 보기 같은 작은 링크 */
.text-link {
font-size: 16px;
/* 링크 크기 */
letter-spacing: 2px;
/* 영문 글자 간격 */
}
/* =========================================================
카드 목록
========================================================= */
.cards {
display: grid;
/* 카드들을 Grid로 배치 */
grid-template-columns: repeat(3, 1fr);
/* PC에서는 3개를 가로로 배치 */
gap: 20px;
/* ★ 카드 사이의 가로/세로 간격 */
}
/* 개별 카드 */
.case-card {
background: #2d2824;
/* 카드 배경색 */
}
/* 카드 아래 설명 영역 */
.card-body {
padding: 20px;
/* 카드 내부 여백 */
}
/* 카드의 작은 영문 */
.card-body span,
.case-large span {
font-size: 12px;
/* 작은 글자 */
color: #d3b47e;
/* 금색 */
letter-spacing: 2px;
/* 글자 간격 */
}
/* 카드 제목 */
.card-body h3 {
margin: 5px 0;
/* 제목 위/아래 여백 */
font-size: 19px;
/* 제목 크기 */
}
/* 카드 설명 */
.card-body p {
font-size: 13px;
/* 설명 글자 크기 */
color: #aaa;
/* 설명 글자색 */
}
/* =========================================================
상품 그리드
========================================================= */
.products {
display: grid;
/* 상품을 Grid로 배치 */
grid-template-columns: repeat(4, 1fr);
/* PC에서는 4개 가로 배치 */
gap: 20px;
/* 상품 사이 간격 */
}
/* 상품 카드 */
.product {
background: #fff;
/* 상품 카드 배경 */
padding: 0 0 22px;
/* 아래쪽 내부 여백 22px */
}
/* 상품 이미지 */
.product img,
.shop-product img {
width: 100%;
/* 전체 가로 */
height: 240px;
/* ★ 상품 이미지 높이 */
object-fit: cover;
/* 이미지가 영역을 꽉 채움 */
background: #ddd;
/* 이미지 로딩 전 배경 */
}
/* 상품 내용 */
.product div {
padding: 15px 18px;
/* 위/아래 15px
좌/우 18px */
}
/* 상품 제목 */
.product h3 {
font-size: 16px;
/* 제목 크기 */
margin: 0;
/* 기본 여백 제거 */
}
/* 상품 설명 */
.product p,
.shop-product p {
font-size: 12px;
/* 설명 크기 */
color: #777;
/* 설명 색상 */
}
/* 상품 가격 등 */
.product strong {
font-size: 14px;
/* 강조 글자 크기 */
}
/* =========================================================
5. 서브 페이지
========================================================= */
/* 서브페이지 전체 */
.page {
max-width: 2000px;
margin: 0 auto;
/* ★ 모든 서브페이지를 같은 폭/같은 위치로 고정 */
padding: 75px 10% 50px;
/* 위 = 50px
좌/우 = 9%
아래 = 90px
★ 서브페이지의 전체 여백 */
min-height: calc(100vh - 82px);
/* 화면 높이에서 헤더 82px을 뺀 만큼
최소 높이를 확보 */
}
/* 서브페이지 최대 폭 2000px (.page 와 함께 씀: class="page page-wide")
★ 찾아오시는 길(.location-page), 관리자 페이지(.admin-page)와 같은 방식입니다 */
.page-wide {
max-width: 2000px;
margin: 0 auto;
}
/* 원장 프로필 */
.profile {
max-width: 1600px;
/* 최대 너비 */
margin: 75px auto;
/* ★ 프로필 위/아래 바깥 여백
좌우는 자동으로 가운데 정렬 */
display: grid;
/* Grid 사용 */
grid-template-columns: 1fr 1fr;
/* 사진 50%
글 50% */
gap: 100px;
/* ★ 사진과 글 사이 가로 간격 */
align-items: center;
/* 사진과 글을 세로 가운데 정렬 */
}
/* 프로필 사진 박스 */
.profile-thumb {
width: 100%;
/* 가로 전체 */
min-width: 0;
/* Grid 안에서 필요하면 축소 허용 */
height: clamp(400px, 40vw, 600px);
/* ★ 프로필 사진 높이
최소 300px
화면 크기에 따라 40vw
최대 500px */
overflow: hidden;
/* 사진이 영역 밖으로 나가지 않게 */
border-radius: 100px;
/* 모서리 둥글기 */
}
/* 실제 프로필 이미지 */
.profile-thumb img {
width: 100%;
/* 가로 전체 */
height: 100%;
/* 부모 높이에 맞춤 */
object-fit: cover;
/* 영역을 꽉 채움 */
object-position: center;
/* 가운데 기준 */
display: block;
/* 불필요한 이미지 아래 공간 제거 */
}
/* 프로필 경력 목록 */
.profile li {
margin: 8px 0;
/* 목록 한 줄 한 줄 사이의 세로 간격 */
}
/* Before/After 전체 목록 */
.case-list {
display: grid;
/* Grid */
gap: 25px;
/* 사례 카드 사이 간격 */
margin-top: 50px;
/* ★ 제목과 첫 번째 사례 사이 간격 */
}
/* 큰 Before/After */
.case-large {
display: grid;
/* Grid */
grid-template-columns: 6fr 4fr;
/* 좌우 2열: 왼쪽(사진 2장) 70% : 오른쪽(제목·내용) 30%
사진 한 장은 약 35%씩 (사이 간격 때문에 대략적인 비율)
★ 예전: 1fr 1fr = 사진 25% + 사진 25% + 글 50%
★ 비율을 바꾸려면 7fr 3fr 의 숫자를 조절하세요 (모바일은 아래에서 1열) */
gap: 35px;
/* 좌우 영역 사이 */
background: #fff;
/* 배경 */
padding: 5px;
/* 내부 여백 */
}
/* 입력 폼 */
.form {
display: grid;
/* 입력칸 세로 배치 */
gap: 15px;
/* 입력칸 사이 간격 */
margin-top: 20px;
/* 폼 위쪽 여백 */
}
/* 입력칸 */
.form input,
.form textarea {
width: 100%;
/* 입력칸 전체 너비 */
padding: 13px;
/* 입력칸 내부 여백 */
border: 1px solid #ddd;
/* 테두리 */
background: #fafafa;
/* 배경 */
font: inherit;
/* 페이지 기본 글꼴 사용 */
}
/* 폼 라벨 */
.form label {
font-size: 12px;
/* 라벨 글자 크기 */
}
/* 안내문 */
.notice {
background: #ebe1d1;
/* 안내문 배경 */
padding: 18px 22px;
/* 안내문 내부 여백 */
margin: 30px 0;
/* 위/아래 바깥 여백 */
}
/* =========================================================
SHOP
========================================================= */
.shop-grid {
display: grid;
/* 상품 Grid */
grid-template-columns: repeat(4, 1fr);
/* PC 4열 */
gap: 22px;
/* 상품 사이 간격 */
}
.shop-product {
background: #fff;
/* 상품 배경 */
padding-bottom: 20px;
/* 상품 아래 여백 */
}
.shop-product h2,
.shop-product p,
.shop-product strong,
.shop-product .btn {
margin-left: 18px;
/* 왼쪽 여백 */
margin-right: 18px;
/* 오른쪽 여백 */
}
.shop-product h2 {
font-size: 17px;
/* 상품 제목 */
margin-bottom: 3px;
/* 제목 아래 간격 */
}
.shop-product strong {
display: block;
/* 한 줄 전체 사용 */
margin-bottom: 15px;
/* 아래쪽 간격 */
}
/* =========================================================
6. FOOTER
---------------------------------------------------------
★★★★★
사진의 6번 영역입니다.
========================================================= */
footer {
background: white;
/* ★ 6번 영역 배경색 */
color: black;
/* ★ 6번 글자색 */
padding: 5px var(--side);
/* ★★★★★ 6번 영역의 세로 높이에 직접 영향
첫 번째 5px
= 위 / 아래 여백
두 번째 8%
= 왼쪽 / 오른쪽 여백
예:
padding: 20px 8%;
→ 6번 영역이 커짐
padding: 5px 8%;
→ 6번 영역이 작음
현재는 이미 5px로 상당히 작게 설정되어 있습니다. */
display: flex;
/* PC에서는 내부 내용을 가로 배치 */
justify-content: space-between;
/* 내부 내용을 좌우 끝으로 배치 */
align-items: center;
}
/* =========================================================
7. 반응형 레이아웃
---------------------------------------------------------
여기부터는 화면 너비가 800px 이하일 때 적용됩니다.
즉:
- 일반 PC = 위쪽 기본 CSS
- 태블릿/휴대폰 = 여기의 CSS가 일부 덮어씀
========================================================= */
@media (max-width: 800px) {
/* -----------------------------------------------------
모바일 헤더
----------------------------------------------------- */
.header {
height: 50px;
/* ★ 모바일 상단 메뉴 높이
PC 82px → 모바일 70px */
padding: 0 5%;
/* 모바일 좌우 여백 */
}
/* 모바일 메뉴 */
nav {
display: none;
/* 평소에는 메뉴 숨김 */
position: absolute;
/* 헤더 아래에 띄움 */
top: 50px;
/* 헤더 높이만큼 아래에서 시작 */
left: 0;
/* 화면 왼쪽 끝 */
right: 0;
/* 화면 오른쪽 끝 */
background: #f6f2ed;
/* 메뉴 배경 */
flex-direction: column;
/* 메뉴를 세로로 나열 */
padding: 20px 7%;
/* 메뉴 내부 여백 */
gap: 12px;
/* 메뉴 항목 사이 간격 */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
/* 메뉴 아래 그림자 */
}
/* 햄버거 메뉴를 눌렀을 때 */
.nav-open nav {
display: flex;
/* 메뉴 표시 */
}
/* 햄버거 아이콘 */
.menu {
display: block;
/* PC에서는 숨겼던 햄버거 표시 */
}
/* =====================================================
★★★★★ 모바일 1번 영역
===================================================== */
.hero {
grid-template-columns: 1fr;
/* PC의 좌우 2열을
모바일에서는 세로 1열로 변경 */
padding: 50px 2%;
/* ★★★★★ 모바일 1번 내부 여백
80px = 위 / 아래
8% = 좌 / 우
★ 1번의 위아래 공간을 줄이고 싶으면
첫 번째 숫자를 줄입니다.
예:
30px → 20px
→ 더 촘촘
30px → 40px
→ 더 넓음 */
min-height: auto;
/* ★ 모바일에서는 650px 같은
고정 최소 높이를 사용하지 않음
내용의 실제 높이에 따라 자동으로 결정 */
}
/* 모바일 1번의 이미지 */
.hero-art {
margin-top: 20px;
/* ★★★★★
모바일에서
"버튼 영역"
↓
"메인 이미지"
사이의 세로 간격
현재 20px
예:
20px → 10px
→ 이미지가 위로 가까워짐
20px → 40px
→ 이미지가 아래로 내려감 */
}
/* 모바일 메인 이미지 */
.hero-thumb {
height: clamp(200px, 60vw, 400px);
/* ★ 모바일 메인 이미지 높이
최소 280px
화면에 따라 60vw
최대 400px
★ 1번 전체가 아직 너무 크다면
이 값도 영향을 줄 수 있습니다. */
}
/* =====================================================
★★★★★ 모바일 2~5번 영역
===================================================== */
.section {
padding: 20px 2%;
/* ★★★★★
모바일 2~5번 섹션의
위 / 아래 공간 = 30px
좌 / 우 공간 = 7%
★ 사진에서
2 → 3
3 → 4
4 → 5
사이의 전체적인 여백을 줄이고 싶으면
첫 번째 30px을 줄입니다.
예:
30px → 20px
→ 더 촘촘
30px → 40px
→ 더 넓음 */
}
/* 모바일 섹션 제목 영역 */
.section-head {
margin-bottom: 5px;
/* ★ 제목과 카드/내용 사이 간격
.section의 padding과 별개입니다.
따라서 섹션 자체는 좁은데
제목과 카드 사이가 넓다면
이 값을 줄여야 합니다. */
}
/* =====================================================
모바일 카드 / 상품
===================================================== */
.cards,
.products,
.shop-grid {
grid-template-columns: 1fr 1fr;
/* 태블릿/큰 모바일에서는 2열 */
}
/* =====================================================
모바일 프로필 / 큰 사례
===================================================== */
.profile {
margin: 30px auto; /* ★ 모바일 원장 사진 위/아래 여백 */
row-gap: 30px; /* ★ 사진과 경력글 사이 세로 간격 */
}
.profile,
.case-large {
grid-template-columns: 1fr;
/* PC의 2열을 모바일에서 1열로 변경 */
}
/* =====================================================
모바일 서브페이지
===================================================== */
.page {
padding: 20px 5% 20px;
/* 위 = 35px
좌우 = %
아래 = 60px */
}
/* =====================================================
모바일 FOOTER
===================================================== */
footer {
display: block;
/* PC의 가로 배치를
모바일에서는 세로 배치로 변경 */
}
/* 모바일 원장 사진 */
.profile-thumb {
height: clamp(300px, 65vw, 400px);
/* 최소 280px
화면에 따라 65vw
최대 400px */
}
}
/* =========================================================
8. 아주 작은 휴대폰
---------------------------------------------------------
화면 너비 520px 이하에서 추가 적용
========================================================= */
@media (max-width: 520px) {
/* 작은 휴대폰에서는
카드 / 상품을 1열로 변경 */
.cards,
.products,
.shop-grid {
grid-template-columns: 1fr;
/* 한 줄에 하나씩 표시 */
}
/* 작은 휴대폰 제목 */
.hero h1,
.page h1 {
font-size: 24px;
/* 작은 화면에서는 제목을 32px로 고정 */
}
/* 작은 휴대폰 섹션 제목 영역 */
.section-head {
display: block;
/* 제목과 링크를 세로 배치 */
}
/* 작은 휴대폰 전체 보기 링크 */
.section-head .text-link {
display: inline-block;
/* 링크에 크기 적용 */
margin-top: 10px;
/* 제목 아래 링크까지의 간격 */
}
}
/* =========================================================
PART 1. 팝업창 / 사진 크게 보기 (옛 popup.css)
---------------------------------------------------------
1) 팝업창 바깥(어두운 배경) : .product-modal
2) 닫기 버튼, 본문 글자 : .modal-close, .detail-text
(본문 글은 white-space: pre-line 으로 입력한 줄바꿈이 그대로 보입니다)
3) 제품 상세 팝업 : .product-modal-box ~ .detail-row
4) 사진 없음 칸 : .ba-noimg
5) 사진 크게 보기 : .img-viewer ~ (PC: 화면의 85%, 모바일: 거의 꽉 차게)
6) 모바일(700px 이하) : 팝업 위아래를 줄여 화면을 꽉 채우지 않게
★ 쓰는 페이지: 메인, 제품소개(방문자/관리자), Before & After(방문자/관리자)
★ Before & After 는 사진을 누르면 사진 크게 보기만 열립니다 (assets/popup.js)
========================================================= */
/* ---------------------------------------------------------
1) 팝업창 바깥 (제품 팝업)
--------------------------------------------------------- */
.product-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none; /* 평소엔 숨김 */
align-items: center;
justify-content: center;
padding: 25px;
background: #14110fb8;
backdrop-filter: blur(5px);
}
.product-modal.open {
display: flex; /* .open 이 붙으면 보임 */
}
/* ---------------------------------------------------------
2) 닫기 버튼, 본문 글자
--------------------------------------------------------- */
.modal-close {
position: absolute;
right: 18px;
top: 12px;
width: 40px;
height: 40px;
border: 0;
background: transparent;
font-size: 28px;
color: #514943;
cursor: pointer;
z-index: 2;
}
.detail-text {
color: #514943;
font-size: 14px;
line-height: 1.9;
white-space: pre-line; /* 입력한 줄바꿈을 그대로 보여줌 (제품 설명, Before & After 내용) */
}
/* ---------------------------------------------------------
3) 제품 상세 팝업 (PC)
--------------------------------------------------------- */
.product-modal-box {
position: relative;
width: min(1000px, 100%); /* 팝업 가로 폭 (예전 850px). 화면이 좁으면 화면 폭에 맞춤 */
max-height: 90vh;
overflow: auto; /* 내용이 길면 팝업 안에서 스크롤 */
background: #f6f2ed;
display: grid;
grid-template-columns: 1fr 1fr; /* 왼쪽 사진 : 오른쪽 설명 = 50 : 50 (예전 42% 58%) */
box-shadow: 0 30px 80px #0000004d;
}
.product-modal-image {
min-height: 480px;
background: #ddd;
}
.product-modal-image img {
width: 100%;
height: 100%;
min-height: 480px;
object-fit: cover; /* 제품 팝업 사진은 눌러도 크게 열리지 않음 */
}
.product-modal-content {
padding: 55px 48px;
}
.product-modal-content h2 {
margin: 0 0 7px;
font: 400 34px/1.2 Georgia, serif;
}
.product-modal-content h3 {
margin: 0 0 28px;
font-size: 15px;
font-weight: 400;
color: #766d65;
}
.detail-row {
border-top: 1px solid #d9d0c7;
margin-top: 25px;
padding-top: 18px;
}
.detail-row strong {
display: block;
font-size: 11px;
letter-spacing: 2px;
color: #9b7749;
margin-bottom: 5px;
}
.detail-row span {
white-space: pre-line; /* 사용방법 등에 입력한 줄바꿈을 그대로 보여줌 */
}
/* ---------------------------------------------------------
4) 사진이 한쪽만 있을 때 빈 자리 (Before & After 카드에서 사용)
--------------------------------------------------------- */
.ba-noimg {
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
background: #3a332e;
color: #bbb;
font-size: 13px;
}
/* ---------------------------------------------------------
5) 사진 크게 보기 (Before & After 사진을 눌렀을 때)
★ 사진 상자 크기 = PC 는 화면의 85% (가로 85vw x 세로 85vh)
모바일(700px 이하)은 아래 6) 에서 가로 98vw x 세로 90vh
크기를 바꾸려면 해당 width / height 값을 조절하세요
--------------------------------------------------------- */
.img-viewer {
position: fixed;
inset: 0;
z-index: 1100;
display: none;
align-items: center; /* 사진 상자를 화면 가운데에 */
justify-content: center;
background: rgba(10, 8, 7, .75);
backdrop-filter: blur(4px);
}
.img-viewer.open {
display: flex;
}
.img-viewer-stage {
position: relative;
width: 85vw; /* 화면 가로의 85% */
height: 85vh; /* 화면 세로의 85% */
height: 85dvh;
display: flex;
overflow: auto; /* 확대하면 스크롤로 이동 */
-webkit-overflow-scrolling: touch;
background: #14110f;
box-shadow: 0 30px 80px #0000008c;
}
/* 처음: 상자에 맞춰 사진 전체가 보임 */
.img-viewer-stage img {
display: block;
margin: auto; /* 가운데 정렬 (확대해도 잘리지 않음) */
width: 100%;
height: 100%;
object-fit: contain;
cursor: zoom-in;
}
/* 누르면: 가로 250%로 확대 (값을 바꾸면 확대 정도가 바뀜) */
.img-viewer-stage.zoomed img {
width: 250%;
height: auto;
max-width: none;
cursor: zoom-out;
}
.img-viewer-close {
position: fixed;
top: 12px;
right: 12px;
z-index: 2;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .9);
color: #222;
font-size: 26px;
cursor: pointer;
}
.img-viewer-hint {
position: fixed;
left: 0;
right: 0;
bottom: 14px;
margin: 0;
text-align: center;
font-size: 12px;
color: #ddd;
text-shadow: 0 1px 3px #000;
pointer-events: none; /* 글자가 사진 터치를 가로막지 않게 */
}
/* ---------------------------------------------------------
6) 모바일 (화면 너비 700px 이하)
★ 팝업 위아래를 줄이는 값
· padding 첫 값(46px) = 팝업 위/아래 바깥 여백
· max-height 80vh = 팝업 최대 높이(화면의 80%)
· 제품 사진 높이 200px = 예전 260px 에서 줄임
--------------------------------------------------------- */
@media (max-width: 700px) {
.product-modal {
padding: 46px 14px;
}
/* 사진 크게 보기: 폰에서는 화면에 거의 꽉 차게 (너무 답답하면 95vw 로 줄이세요) */
.img-viewer-stage {
width: 98vw;
height: 90vh;
height: 90dvh;
}
.product-modal-box {
display: block; /* 사진이 위, 설명이 아래 */
max-height: 80vh;
max-height: 80dvh;
}
.product-modal-image,
.product-modal-image img {
min-height: 200px;
height: 200px;
}
.product-modal-content {
padding: 24px 22px 28px;
}
.product-modal-content h2 {
font-size: 25px;
}
.product-modal-content h3 {
margin-bottom: 20px;
}
/* 사진 위에서도 보이도록 닫기 버튼에 흰 배경 */
.product-modal .modal-close {
top: 8px;
right: 8px;
background: rgba(255, 255, 255, .9);
}
}
/* =========================================================
PART 2. 페이지별 스타일 (방문자 화면)
========================================================= */
/* ---------------------------------------------------------
공통 보조 규칙
--------------------------------------------------------- */
/* 안내 문구 중 오류 */
.notice-error {
background: #f8e6e3;
color: #7c3029;
}
/* 목록이 비어 있을 때 안내 */
.empty-note {
text-align: center;
color: #766d65;
padding: 30px 0;
}
.dark .empty-note {
color: #aaa;
}
/* 푸터 안의 글 */
footer p {
margin: 6px 0;
font-size: 13px;
}
/* ---------------------------------------------------------
메인(index.php)
--------------------------------------------------------- */
.product {
cursor: pointer; /* 제품 카드: 누르면 상세 팝업 */
}
/* 첫 화면 제목 아래 간격. 예전에는 빈