/* ============================================================
리더스공유오피스 — 스타일시트
색상: 기존 베이지 팔레트 유지
구조: 크고 굵은 헤딩 + 가운데 정렬 섹션 머리말 + 넉넉한 여백
톤을 바꾸려면 아래 :root 토큰만 건드리면 됩니다.
============================================================ */
:root{
/* 표면 — 베이지 계열 (기존 유지) */
--bg:#f3ead9; /* 페이지 배경 */
--surface:#fffbf3; /* 카드 */
--surface-2:#eadfc4; /* 옅은 채움 (사진 자리 등) */
--dark:#2b2620; /* 어두운 섹션 */
/* 글자 */
--ink:#2b2620; /* 제목 */
--ink-2:#4a4238; /* 본문 — 기존보다 살짝 진하게 (가독성) */
--ink-soft:#71685a; /* 보조 */
--line:#ddccab;
/* 헤더 — 본문보다 한 톤 진한 베이지로 상단 띠를 구분합니다 */
--header-bg:#f6e7c8;
--header-line:#e3c78f;
/* 포인트 — 기존 유지 */
/* 주황. 배경에 따라 두 값을 씁니다 — 하나로는 양쪽 명암비를 만족할 수 없습니다.
--accent : 베이지 배경용 (기존 #d97b2e 는 2.58 로 미달이라 어둡게)
--accent-on-dark: 어두운 섹션용 (어두운 주황은 검정 위에서 안 읽힘) */
--accent:#c4661d;
--accent-on-dark:#f0a355;
--accent-soft:#fbead9;
/* 녹색. 베이지 배경에서 명암비 4.5 를 넘겨야 해서 기존 #3d7a52(4.28)
보다 살짝 어둡게 잡았습니다. 더 밝게 바꾸면 아이브로우가 읽기 어려워집니다. */
--river:#376e4a;
--river-soft:#e3efe4;
--river-ink:#2d5c3e;
--radius:20px;
--radius-sm:12px;
--shadow:0 4px 16px rgba(43,38,32,.07);
--shadow-lg:0 14px 34px rgba(43,38,32,.14);
/* 첫 화면 배경 영상 위에 덮는 막.
밝은 모드에서는 크림색을 덮고 글자를 진하게, 어두운 모드에서는 어두운
색을 덮고 글자를 밝게 씁니다. 이 값을 고정색으로 박아 두면 다크 모드에서
'크림 위에 크림' 이 되어 글씨가 안 보입니다(실제로 그랬음).
--hero-em 은 제목 강조색 — 평소 --accent 는 각 모드에서 배경 대비가
안 나와 히어로 전용으로 따로 둡니다. */
--hero-veil:243,234,217;
--hero-em:#d25a00;
color-scheme:light;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#211d16;
--surface:#2a251c;
--surface-2:#332c20;
--dark:#16130e;
--ink:#f3ecd9;
--ink-2:#ddd4c0;
--ink-soft:#c6bca6;
--line:#463d2c;
--header-bg:#2a251c;
--header-line:#4a4031;
--accent:#f0a355;
--accent-soft:#3a2b18;
--river:#6fbf8c;
--river-soft:#233a2b;
--river-ink:#a8dcbb;
--shadow:0 4px 16px rgba(0,0,0,.4);
--shadow-lg:0 14px 34px rgba(0,0,0,.5);
--hero-veil:26,22,16;
--hero-em:#f5a65c;
color-scheme:dark;
}
}
:root[data-theme="dark"]{
--bg:#211d16;
--surface:#2a251c;
--surface-2:#332c20;
--dark:#16130e;
--ink:#f3ecd9;
--ink-2:#ddd4c0;
--ink-soft:#c6bca6;
--line:#463d2c;
--header-bg:#2a251c;
--header-line:#4a4031;
--accent:#f0a355;
--accent-soft:#3a2b18;
--river:#6fbf8c;
--river-soft:#233a2b;
--river-ink:#a8dcbb;
--shadow:0 4px 16px rgba(0,0,0,.4);
--shadow-lg:0 14px 34px rgba(0,0,0,.5);
--hero-veil:26,22,16;
--hero-em:#f5a65c;
color-scheme:dark;
}
/* ---------- 기본 ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
margin:0;
background:var(--bg);
color:var(--ink-2);
font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
font-size:16px;
line-height:1.7;
letter-spacing:-.01em;
/* 한글은 어절 단위로 끊어야 단어 중간이 잘리지 않습니다 */
word-break:keep-all;
overflow-wrap:break-word;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
margin:0;
color:var(--ink);
font-weight:800;
letter-spacing:-.035em;
line-height:1.34;
text-wrap:balance;
word-break:keep-all;
}
h1{font-size:clamp(2rem,5.2vw,3.4rem);letter-spacing:-.04em;}
h2{font-size:clamp(1.55rem,3.6vw,2.5rem);}
h3{font-size:1.2rem;letter-spacing:-.03em;line-height:1.45;}
h4{font-size:.95rem;letter-spacing:-.02em;}
p{margin:0;}
img{display:block;max-width:100%;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--river);outline-offset:3px;border-radius:6px;}
/* 키보드 사용자가 헤더 메뉴를 건너뛰고 본문으로 갈 수 있게.
평소에는 화면 밖에 있다가 Tab 을 누르면 나타납니다. */
.skip-link{
position:absolute;
left:12px;
top:-100px;
z-index:100;
background:var(--ink);
color:var(--surface);
font-size:.92rem;
font-weight:700;
padding:12px 20px;
border-radius:var(--radius-sm);
text-decoration:none;
transition:top .2s ease;
}
.skip-link:focus{top:12px;}
.wrap{
max-width:1120px;
margin-inline:auto;
padding-inline:24px;
}
@media (max-width:520px){ .wrap{padding-inline:16px;} }
section{padding-block:clamp(60px,8.5vw,126px);}
/* 섹션 머리말 — 가운데 정렬, 헤드라인이 주인공 */
/* PC 에서만 나타나는 줄바꿈.
좁은 화면에서는 강제 줄바꿈이 오히려 어색하므로 숨기고 자연스럽게 흐르게 둡니다. */
.pc-br{display:none;}
@media (min-width:821px){
.pc-br{display:inline;}
/* 지정한 위치에서 끊기려면 폭 제한을 풀어야 합니다.
max-width(44ch/50ch)가 걸려 있으면 그 전에 먼저 접힙니다.
각 섹션의 h2 는 자체
을 갖고 있어 폭이 넓어져도 줄바꿈이 유지됩니다. */
.hero .lead,
#about .section-head,
#benefits .section-head,
#offices .section-head,
#spaces .section-head{max-width:none;}
}
.section-head{
text-align:center;
max-width:44ch;
margin-inline:auto;
margin-bottom:clamp(36px,5vw,60px);
display:flex;
flex-direction:column;
gap:14px;
}
.section-head p{
color:var(--ink-soft);
font-size:1.02rem;
line-height:1.75;
}
.eyebrow{
display:block;
font-size:.92rem;
font-weight:700;
color:var(--river);
letter-spacing:-.01em;
}
/* ---------- 스크롤 리빌 ---------- */
.reveal{transition:opacity .6s ease, transform .6s ease;}
.reveal.reveal-init{opacity:0;transform:translateY(16px);}
.reveal.in-view{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
.reveal,.reveal.reveal-init{opacity:1;transform:none;transition:none;}
}
/* ---------- 버튼 ---------- */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:15px 28px;
border-radius:var(--radius-sm);
font-size:1rem;
font-weight:700;
letter-spacing:-.02em;
text-decoration:none;
border:1px solid transparent;
cursor:pointer;
transition:background-color .2s ease, border-color .2s ease,
color .2s ease, transform .2s ease;
}
.btn:active{transform:translateY(1px);}
/* 주 버튼 — 진한 배경. 베이지 위 흰 버튼은 대비가 약해서 채웠습니다.
흰 버튼으로 되돌리려면 아래 두 줄을
background:var(--surface); color:var(--ink); border-color:var(--line);
로 바꾸면 됩니다. */
.btn-primary{
background:var(--ink);
color:var(--surface);
}
.btn-primary:hover{background:var(--river);color:#fff;}
/* 보조 버튼 */
.btn-line{
background:var(--surface);
color:var(--ink);
border-color:var(--line);
}
.btn-line:hover{border-color:var(--ink);}
/* ---------- 헤더 ---------- */
header.site{
position:sticky;
top:0;
z-index:40;
/* 살짝 투명하게 둬서 스크롤할 때 뒤 내용이 흐리게 비칩니다.
92% 라 눈에 보이는 색은 --header-bg 와 거의 같습니다. */
background:color-mix(in srgb, var(--header-bg) 92%, transparent);
-webkit-backdrop-filter:saturate(180%) blur(12px);
backdrop-filter:saturate(180%) blur(12px);
border-bottom:1px solid var(--header-line);
}
/* color-mix 를 모르는 구형 브라우저용 대비값 */
@supports not (background: color-mix(in srgb, red 50%, transparent)){
header.site{background:var(--header-bg);}
}
.nav-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-block:14px;
}
.brand{
display:flex;
align-items:baseline;
gap:9px;
font-size:1.15rem;
font-weight:800;
letter-spacing:-.04em;
color:var(--ink);
white-space:nowrap;
text-decoration:none; /* 헤더의 브랜드는 맨 위로 가는 링크입니다 */
}
.brand small{
font-size:.66rem;
font-weight:600;
color:var(--ink-soft);
letter-spacing:.04em;
}
nav.links{
display:flex;
gap:clamp(16px,2vw,26px);
font-size:.94rem;
font-weight:600;
white-space:nowrap;
}
nav.links a{
text-decoration:none;
color:var(--ink-2);
transition:color .2s ease;
}
nav.links a:hover{color:var(--river);}
header.site .btn{
padding:11px 20px;
font-size:.92rem;
/* 전화 버튼은 절대 줄바꿈되거나 찌그러지지 않게 */
white-space:nowrap;
flex:0 0 auto;
}
/* 네비가 살아있는 900~1100px 구간에서 헤더가 2줄로 깨지지 않도록
장식용 영문 부제를 먼저 내립니다. 폭 180px 정도를 벌어 줍니다. */
@media (max-width:1100px){
.brand small{display:none;}
}
@media (max-width:900px){
nav.links{display:none;}
.brand small{display:none;}
.nav-row{padding-block:11px;gap:12px;}
.brand{font-size:1.02rem;}
header.site .btn{padding:10px 16px;font-size:.88rem;}
}
/* ---------- 히어로 ---------- */
.hero{
/* 글 묶음을 화면 위쪽으로 당깁니다 */
padding-top:clamp(32px,4.5vw,58px);
padding-bottom:clamp(56px,8vw,104px);
}
.hero-inner{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:22px;
}
.hero h1 em{
font-style:normal;
color:var(--accent);
}
.lead{
max-width:50ch;
font-size:clamp(.92rem,1.2vw,1rem);
line-height:1.85;
color:var(--ink-2);
}
.hero-cta{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
/* 본문과 버튼이 붙어 보이지 않도록 띄웁니다 */
margin-top:clamp(14px,2.2vw,30px);
}
.hero-badges{
display:flex;
flex-wrap:wrap;
gap:8px;
justify-content:center;
margin-top:4px;
}
.hero-badges span{
background:var(--surface);
border:1px solid var(--line);
color:var(--ink-2);
font-size:.88rem;
font-weight:600;
padding:8px 15px;
border-radius:999px;
}
/* 사진 스트립 — 촬영 후 index.html 주석을 풀면 적용됩니다 */
.hero-photos{
width:100%;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:20px;
}
.hero-photos figure{
margin:0;
border-radius:var(--radius);
overflow:hidden;
aspect-ratio:4/3;
background:var(--surface-2);
}
.hero-photos img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.hero-photos figure:hover img{transform:scale(1.04);}
/* 모바일에서는 3장을 나란히 두면 한 장이 114px 밖에 안 돼 알아볼 수 없습니다.
옆으로 넘겨 보는 방식으로 바꾸고, 다음 장이 살짝 보이게 해서
넘길 수 있다는 것을 알려 줍니다. 스크롤 스냅이라 JS 가 필요 없습니다. */
@media (max-width:820px){
.hero-photos{
display:flex;
gap:10px;
margin-top:14px;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
-ms-overflow-style:none;
}
.hero-photos::-webkit-scrollbar{display:none;}
.hero-photos figure{
flex:0 0 86%;
scroll-snap-align:center;
}
}
/* ---------- 히어로 배경 영상 ----------
첫 화면은 모든 화면 크기에서 영상 배경 + 진한 글씨입니다.
이 블록을 통째로 지우면 예전의 베이지 화면으로 돌아갑니다.
폰은 세로로 자른 별도 파일(tour-portrait.mp4, 1.3MB)을 받습니다.
가로 영상을 세로 화면에 깔면 가운데만 남아 구도가 망가지고, 용량도
두 배입니다. 어느 파일을 받을지는 main.js 가 화면 폭을 보고 정합니다.
크림막(.hero-bg::after)의 농도 0.72 는 눈대중이 아니라 측정값입니다.
tools/check-hero-contrast.py 로 영상을 훑어 글자 띠의 어두운 쪽 2% 를
실제 합성해 본 뒤, 가장 나쁜 순간에도 본문이 WCAG AA 를 넘도록 고른
값입니다. **영상을 교체하면 이 수치를 다시 재야 합니다.** */
.hero{
position:relative;
isolation:isolate; /* z-index 를 이 섹션 안에 가둬 헤더와 안 싸우게 */
overflow:hidden;
background:var(--bg); /* 영상이 안 뜰 때 바탕 */
padding-top:clamp(64px,8vw,116px);
padding-bottom:clamp(72px,9vw,128px);
}
.hero-bg{
display:block;
position:absolute;
/* 위에 붙입니다. 가운데 정렬이면 화면이 길어질수록 영상이 아래로 밀려
내려가는데, 첫 화면은 위부터 보이는 게 맞습니다. */
inset:0 0 auto 0;
z-index:-1;
/* 상자 자체를 영상 비율로 잡습니다. 그러면 상자 안에서 영상이 꽉 차므로
잘리지도, 늘어나지도, 빈 띠가 생기지도 않습니다.
640px 이하에서는 JS 가 1:1 세로본을 받으므로 비율도 같이 바꿉니다
— main.js 의 (max-width:640px) 와 반드시 같은 값이어야 합니다. */
aspect-ratio:16/9;
max-height:100%; /* 히어로보다 길어지면 넘치지 않게 */
overflow:hidden;
background:rgb(var(--hero-veil));
/* 아래쪽 경계가 가로줄로 보이지 않게 배경으로 녹여 줍니다. */
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%);
}
@media (max-width:640px){
.hero-bg{aspect-ratio:1/1;}
}
.hero-video{
width:100%;
height:100%;
/* 상자가 이미 영상 비율이라 cover 여도 잘리는 곳이 없습니다.
(히어로가 아주 납작할 때만 max-height 가 걸려 위아래가 조금 잘립니다) */
object-fit:cover; /* poster 에도 함께 적용됩니다 */
object-position:50% 0;
filter:brightness(1.12) saturate(.92);
}
/* 영상 위에 덮는 막 — 밝은 모드는 크림, 어두운 모드는 짙은 색입니다(--hero-veil).
농도 0.72 는 눈대중이 아니라 tools/check-hero-contrast.py 로 영상을 훑어
글자 띠를 실제 합성해 고른 값입니다. 가장 나쁜 순간에도 본문이 WCAG AA 를
넘깁니다. **영상을 교체하면 다시 재세요.**
위아래만 조금 더 덮어 헤더·다음 섹션과 자연스럽게 잇습니다. */
.hero-bg::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(var(--hero-veil),.86) 0%,
rgba(var(--hero-veil),.72) 30%,
rgba(var(--hero-veil),.72) 70%,
rgba(var(--hero-veil),.88) 100%
);
}
/* 글자 — 밝은 배경이므로 본문과 같은 진한 색을 씁니다.
흐릿한 중간색(--ink-2 등)은 영상 위에서 대비가 4:1 로 떨어져 못 씁니다. */
.hero .eyebrow{color:var(--ink);}
.hero .lead{color:var(--ink);}
/* 강조 문구 — 채도를 올린 주황 + 어두운 그림자.
파랑을 0 까지 뺀 순색 계열이라 평소 --accent(#c4661d) 보다 선명한데,
명도는 거의 같아 배경 대비는 손해 보지 않습니다(둘 다 약 1.7:1).
이 1.7 은 WCAG 가 요구하는 큰 글씨 3:1 에 못 미칩니다. 막을 올려도
해결되지 않습니다(0.94 에서도 2.93) — 밝은 주황은 밝은 배경과 애초에
대비가 안 나오고 베이지 단색 위에서도 3.3 이 한계이기 때문입니다.
아래 그림자는 글자 가장자리를 어둡게 눌러 실제로 읽기 쉽게 만들지만,
WCAG 계산에는 반영되지 않는 보조 수단입니다.
수치까지 맞추려면 color 를 #8e3c08 로 낮추면 됩니다(3.2:1). */
.hero h1 em{color:var(--hero-em);}
/* 본문이 영상 위에서 가늘어 보이지 않도록 한 단계 굵게.
(모바일은 기존 두께 그대로입니다) */
.hero .lead{font-weight:600;}
/* 큰 글씨 둘레에만 옅은 크림빛 번짐. 본문처럼 작은 글씨에 걸면
획이 뭉개져서 오히려 읽기 나빠집니다. */
.hero h1{text-shadow:0 1px 12px rgba(255,251,243,.8);}
/* 사진 3장은 영상과 역할이 겹쳐 내립니다. 마크업은 index.html 에 남겨 뒀으니
영상을 걷어내면 다시 살아납니다. */
.hero-photos{display:none;}
/* 재생/정지 버튼 — JS 가 영상을 실제로 틀었을 때만 만들어집니다.
20 초짜리 영상이 자동 재생되므로 WCAG 2.2.2 상 정지 수단이 필수입니다. */
.hero-toggle{
position:absolute;
left:50%;
bottom:18px;
transform:translateX(-50%);
z-index:2;
width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
padding:0;
border:1px solid var(--line);
border-radius:50%;
background:color-mix(in srgb, var(--surface) 85%, transparent);
color:var(--ink);
cursor:pointer;
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
transition:background-color .2s ease, border-color .2s ease;
}
.hero-toggle:hover{background:var(--surface);border-color:var(--ink-soft);}
/* 자동재생이 막혔을 때(아이폰 저전력 모드, autoplay 권한 없는 iframe 등).
JS 가 .hero 에 is-blocked 를 붙이면 버튼이 '영상 재생' 글자와 함께
눈에 띄게 커집니다. 안 그러면 정지 화면만 보여 고장난 줄 압니다. */
.hero.is-blocked .hero-toggle{
width:auto;
gap:7px;
padding:0 16px 0 13px;
border-radius:999px;
background:var(--ink);
border-color:var(--ink);
color:var(--surface);
}
.hero.is-blocked .hero-toggle::after{
content:"영상 재생";
font-size:.84rem;
font-weight:700;
letter-spacing:-.02em;
}
.hero.is-blocked .hero-toggle:hover{background:var(--river);border-color:var(--river);}
.hero-toggle svg{display:block;}
/* 클릭하면 크게 보기 — 버튼으로 감싸 키보드로도 열립니다 */
.photo-zoom{
display:block;
width:100%;height:100%;
padding:0;border:none;
background:none;
cursor:zoom-in;
}
/* ---------- 사진 크게 보기 (라이트박스) ----------