/* ============================================================
LOFTBEAR DESIGN SYSTEM v1.0
loftbear.com 산하 모든 서브도메인이 공유하는 디자인 토큰 + 컴포넌트
사용법:
1) HTML 에 폰트 링크와 테마 초기화 스크립트를 넣습니다 (starter.html 참고).
2) 이 파일을 로 감쌉니다.
4) 헤더에 .theme-switch 를 넣고 loftbear-theme.js 를 불러옵니다.
── 모드 규칙 (모든 loftbear 사이트 공통) ──────────────
· 밤(dark)이 기본값입니다. 아무것도 고르지 않은 첫 방문자는 항상 밤으로 시작합니다.
· 낮(light)은 사용자가 직접 켭니다. 선택은 localStorage에 기억됩니다.
· 전환은 로 이뤄집니다.
(data-theme 이 아니라 data-lb-theme 인 이유: 다른 스크립트·호스트와 충돌하지 않게 하기 위함)
· 시스템 설정(prefers-color-scheme)은 따르지 않습니다. 브랜드 기본이 밤이기 때문입니다.
============================================================ */
:root{
/* ---- 색상 토큰 ---- */
--void:#140d08; /* 페이지 바탕 (가장 어두운 월넛) */
--panel:#20160e; /* 패널/섹션 바탕 */
--panel-2:#291d13; /* 밝은 패널, 그라디언트 상단 */
--parchment:#ede2c8; /* 밝은 종이면 (카드, 포스트카드) */
--parchment-2:#e2d3ae; /* 종이면 보조 */
--ink:#2b2013; /* 종이 위 본문 텍스트 */
--ink-soft:#5c4a32; /* 종이 위 보조 텍스트 */
--text-on-dark:#e6d8b7; /* 어두운 바탕 위 본문 */
--text-dim:#9c8760; /* 어두운 바탕 위 보조 텍스트 */
--brass:#b0894e; /* 황동 — 강조선, 인용부호 */
--brass-bright:#d8b679; /* 밝은 황동 — 제목, 호버 */
--brass-line:#8c6b3b; /* 황동 헤어라인 (구조선) */
--copper:#8f5230; /* 구리 — 링크, 태그 */
--copper-soft:#b97a52; /* 밝은 구리 */
--patina:#6b8770; /* 청동 녹 — 보조 강조 */
--line-dark:#382a1a; /* 어두운 구분선 */
--shadow:rgba(8,5,2,.5);
--on-brass:#140d08; /* 황동 위에 얹는 글자색 */
--brand-brown:#46321f; /* 로고 원본 색 */
--logo-ink:var(--brass-bright); /* 밤에는 황동 간판처럼 */
/* ---- 뱅커스 램프 ---- */
--lamp-body:#1a1209; /* 램프 몸체(실루엣) */
--lamp-shade:#1f4d3a; /* 초록 유리 갓 */
--lamp-shade-light:#5a9678;/* 빛이 통과하는 갓 아랫단 */
--lamp-glow-warm:rgba(255,214,140,.22);
--lamp-glow-green:rgba(90,150,120,.30);
/* ---- 서체 토큰 ---- */
--f-display:'IM Fell English SC', Georgia, 'Times New Roman', serif; /* 워드마크 */
--f-display-italic:'IM Fell English', Georgia, serif; /* 영문 이탤릭 */
--f-kr-display:'Song Myung', 'Noto Serif KR', serif; /* 한글 헤드라인 */
--f-body:'Noto Serif KR', 'Source Serif 4', Georgia, serif; /* 본문 */
--f-numeral:'Source Serif 4', 'Noto Serif KR', Georgia, serif; /* 수치·통계 */
--f-mono:'Special Elite', 'Courier New', monospace; /* 라벨·원장·스탬프 */
--measure:64ch; /* 본문 최대 글줄 길이 */
color-scheme: dark;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
margin:0;
background:
repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px),
radial-gradient(ellipse 80% 46% at 50% -8%, rgba(216,182,121,.07), transparent 62%),
var(--void);
color:var(--text-on-dark);
font-family:var(--f-body);
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:3px; }
/* 페이지 컨테이너 — 램프를 쓰려면 position:relative 와 넉넉한 위 여백이 필요합니다 */
.page{ max-width:1000px; margin:0 auto; padding:4.75rem 1.5rem 4rem; position:relative; }
/* ============================================================
1. 타이포그래피
============================================================ */
.eyebrow{
font-family:var(--f-mono);
font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--text-dim);
display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:''; width:1.2em; height:1px; background:var(--brass-line); display:inline-block; }
h2{
font-family:var(--f-kr-display); font-weight:400;
font-size:clamp(1.5rem, 1.15rem + 1.3vw, 2rem);
color:var(--text-on-dark);
margin:.4em 0 0; text-wrap:balance; letter-spacing:.01em;
}
section{ padding:2.8rem 0; }
/* ============================================================
2. 헤더 (간판)
============================================================ */
.signboard{
display:flex; flex-wrap:wrap; gap:1rem 2rem;
align-items:baseline; justify-content:space-between;
padding:1.6rem 0 1.5rem;
border-bottom:1px solid var(--line-dark);
}
/* 로고 — SVG를 인라인으로 넣고 색은 CSS가 정합니다(currentColor).
밤에는 황동, 낮에는 로고 원본 브라운. 색을 SVG 안에 박아두지 마세요. */
.brandmark{ display:inline-flex; align-items:center; gap:.85rem; text-decoration:none; }
.brand-logo{ display:block; height:26px; color:var(--logo-ink); transition:color .2s ease; }
.brand-logo svg{ height:100%; width:auto; display:block; }
.brandmark:hover .brand-logo{ color:var(--brass); }
@media (max-width:520px){ .brand-logo{ height:22px; } }
/* 서브도메인(방) 이름 — 로고 옆 얇은 황동 선 뒤에 붙습니다 */
.brand-room{
font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--text-dim); padding-left:.85rem; border-left:1px solid var(--brass-line);
white-space:nowrap;
}
/* 로고를 외부 파일로 쓰고 싶다면 (여러 페이지에서 캐시하려는 경우) 마스크로 색을 입힙니다 */
.brand-logo--masked{
width:113px; height:26px;
background-color:var(--logo-ink);
-webkit-mask:url('/loftbear-logo.svg') no-repeat center/contain;
mask:url('/loftbear-logo.svg') no-repeat center/contain;
}
nav.rooms{ display:flex; flex-wrap:wrap; gap:1.5rem 1.6rem; }
nav.rooms a{
text-decoration:none; font-family:var(--f-mono);
font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
color:var(--text-dim); padding-bottom:.25rem;
border-bottom:1px solid transparent;
transition:color .2s ease, border-color .2s ease;
}
nav.rooms a:hover, nav.rooms a:focus-visible{ color:var(--brass-bright); border-color:var(--brass-line); }
/* ============================================================
3. 뱅커스 램프와 그 빛
.lamp-rig 를 .page 의 첫 자식으로 넣으세요 (starter.html 참고)
============================================================ */
.lamp-rig{ position:absolute; left:6px; top:2px; width:52px; height:74px; pointer-events:none; }
@media (max-width:640px){ .lamp-rig{ display:none; } }
.banker-lamp{ position:absolute; left:0; top:0; width:52px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
/* 갓 주변 벽에 번지는 빛 */
.lamp-halo{
position:absolute; left:-94px; top:-60px; width:240px; height:200px;
background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(126,205,163,.16) 0%, rgba(82,142,112,.06) 44%, transparent 72%);
mix-blend-mode:screen;
animation:lampFlicker 7s ease-in-out infinite;
}
/* 갓 입구에서 아래로 퍼지는 빛줄기 */
.lamp-beam{
position:absolute; left:-200px; top:22px; width:560px; height:540px;
filter:blur(18px); mix-blend-mode:screen;
animation:lampFlicker 7s ease-in-out infinite;
}
.lamp-beam span{
display:block; width:100%; height:100%;
clip-path:polygon(207px 0, 245px 0, 470px 100%, -18px 100%);
-webkit-mask-image:linear-gradient(to right, transparent 3%, #000 25%, #000 55%, transparent 80%);
mask-image:linear-gradient(to right, transparent 3%, #000 25%, #000 55%, transparent 80%);
background:linear-gradient(to bottom,
rgba(222,248,230,.28) 0%,
rgba(155,214,180,.16) 16%,
rgba(108,174,140,.085) 42%,
rgba(84,144,116,.035) 68%,
transparent 92%);
}
/* 빛이 내려앉는 자리 */
.lamp-pool{
position:absolute; left:-200px; top:120px; width:480px; height:360px;
background:radial-gradient(ellipse 46% 42% at 50% 46%, rgba(140,210,175,.13) 0%, rgba(104,170,136,.055) 46%, transparent 74%);
filter:blur(14px); mix-blend-mode:screen;
animation:lampFlicker 7s ease-in-out infinite;
}
/* 갓 바로 아래 전구 자리 */
.lamp-bulb{
position:absolute; left:-6px; top:4px; width:64px; height:46px;
background:radial-gradient(ellipse at 50% 54%, rgba(255,247,217,.55) 0%, rgba(255,215,148,.3) 30%, rgba(150,220,180,.12) 56%, transparent 76%);
filter:blur(3px); mix-blend-mode:screen;
animation:lampFlicker 7s ease-in-out infinite;
}
@keyframes lampFlicker{ 0%,100%{ opacity:.88; } 43%{ opacity:1; } 62%{ opacity:.94; } }
@media (prefers-reduced-motion: reduce){
.lamp-halo, .lamp-beam, .lamp-pool, .lamp-bulb{ animation:none; }
}
/* ============================================================
4. 원장 표 (데이터 테이블)
============================================================ */
.ledger-wrap{ overflow-x:auto; margin-top:1.7rem; }
table.ledger{ width:100%; border-collapse:collapse; min-width:460px; }
table.ledger th, table.ledger td{ padding:.8rem .9rem; text-align:left; }
table.ledger th:first-child, table.ledger td:first-child{ padding-left:0; }
table.ledger th:last-child, table.ledger td:last-child{ text-align:right; padding-right:0; }
table.ledger thead th{
font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
font-weight:400; color:var(--text-dim); border-bottom:1px solid var(--brass-line);
}
table.ledger tbody td{ border-bottom:1px solid var(--line-dark); }
table.ledger tbody tr{ transition:background .15s ease; }
table.ledger tbody tr:hover{ background:rgba(216,182,121,.045); }
table.ledger td.day-num{
font-family:var(--f-mono); font-variant-numeric:tabular-nums;
color:var(--text-on-dark); white-space:nowrap; font-size:.82rem;
}
table.ledger td .num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--patina); font-size:.82rem; }
/* ============================================================
5. 광고 슬롯 (액자 프레임)
콘텐츠와 시각적으로 구분되면서 톤은 유지됩니다.
============================================================ */
.frame{
position:relative; padding:2.8rem 2rem; text-align:center;
border:1px solid var(--brass-line);
}
.frame::before{ content:''; position:absolute; inset:9px; border:1px solid var(--line-dark); pointer-events:none; }
.frame .kicker{
display:inline-block; font-family:var(--f-mono); font-size:.62rem;
letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim);
padding-bottom:.6rem; margin-bottom:1.1rem; border-bottom:1px solid var(--line-dark);
}
.frame p{ color:var(--text-dim); margin:0 auto; font-size:.9rem; max-width:38ch; }
.frame--square{ max-width:320px; margin:0 auto; }
/* ============================================================
6. 포스트카드 (콘텐츠 카드)
============================================================ */
.stories-panel{
margin-top:1.8rem; padding:2.6rem 2rem 3rem;
background:
repeating-linear-gradient(115deg, rgba(255,255,255,.01) 0px, rgba(255,255,255,.01) 1px, transparent 1px, transparent 5px),
radial-gradient(ellipse 70% 55% at 50% 0%, rgba(216,182,121,.045), transparent 68%),
linear-gradient(180deg, var(--panel-2), var(--panel));
border:1px solid var(--line-dark);
}
.postcards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2.4rem 1.8rem; }
@media (max-width:760px){ .postcards{ grid-template-columns:1fr; gap:2.6rem; } }
.postcard{
position:relative; background:var(--parchment); color:var(--ink);
padding:1.7rem 1.6rem 1.9rem; box-shadow:0 16px 28px rgba(0,0,0,.32);
}
.postcard:nth-child(1){ transform:rotate(-.6deg); }
.postcard:nth-child(2){ transform:rotate(.4deg); }
.postcard:nth-child(3){ transform:rotate(-.3deg); }
/* 앨범에 사진을 끼우던 모서리 */
.postcard::before, .postcard::after{ content:''; position:absolute; width:16px; height:16px; background:var(--line-dark); }
.postcard::before{ top:0; left:0; clip-path:polygon(0 0, 100% 0, 0 100%); }
.postcard::after{ bottom:0; right:0; clip-path:polygon(100% 100%, 0 100%, 100% 0); }
.postcard .tag{
font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--copper-soft); display:inline-block; margin-bottom:1rem;
padding-bottom:.3rem; border-bottom:1px solid var(--copper-soft);
}
.postcard h3{ font-family:var(--f-kr-display); font-weight:400; font-size:1.18rem; margin:0 0 .65rem; color:var(--ink); }
.postcard p{ font-size:.9rem; color:var(--ink-soft); margin:0 0 1rem; }
.postcard .more{
font-family:var(--f-mono); font-size:.68rem; letter-spacing:.05em; text-decoration:none;
color:var(--copper); border-bottom:1px solid var(--copper); padding-bottom:1px;
}
.postcard .more:hover{ color:var(--ink); border-color:var(--ink); }
/* ============================================================
7. 수치 표시 (통계)
============================================================ */
.stat-row{ display:flex; flex-wrap:wrap; gap:2.2rem; margin:0 0 1.4rem; }
.stat .num{
font-family:var(--f-numeral); font-weight:600; font-size:1.7rem;
color:var(--text-on-dark); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.stat .label{
display:block; font-size:.68rem; color:var(--text-dim); letter-spacing:.06em;
margin-top:.25rem; text-transform:uppercase; font-family:var(--f-mono);
}
/* 인용 / 브랜드 보이스 한 줄 */
.pull-quote{
font-family:var(--f-body); font-style:italic; color:var(--text-dim);
max-width:40ch; border-left:1px solid var(--brass); padding-left:1.1rem;
}
/* ============================================================
8. 푸터 (선반)
============================================================ */
.shelf{
margin-top:1.2rem; padding-top:2.4rem; border-top:1px solid var(--line-dark);
display:grid; grid-template-columns:1.3fr 1fr auto; gap:2rem;
font-size:.85rem; color:var(--text-dim);
}
@media (max-width:700px){ .shelf{ grid-template-columns:1fr; } }
.shelf .wordmark{ font-size:1.05rem; }
.shelf p{ max-width:32ch; margin:.7rem 0 0; }
.tags{ display:flex; flex-wrap:wrap; gap:1rem 1.3rem; margin-top:.6rem; }
.tags span{
font-family:var(--f-mono); font-size:.7rem; color:var(--text-dim);
padding-bottom:.2rem; border-bottom:1px solid var(--line-dark);
}
.shelf .legal{ font-family:var(--f-mono); font-size:.66rem; color:var(--text-dim); align-self:end; opacity:.8; }
/* ============================================================
9. 밤 / 낮 전환 스위치
============================================================ */
.theme-switch{ display:inline-flex; border:1px solid var(--brass-line); align-self:center; overflow:hidden; }
.theme-switch button{
appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--text-dim); padding:.36rem .72rem;
transition:background .18s ease, color .18s ease;
}
.theme-switch button + button{ border-left:1px solid var(--brass-line); }
.theme-switch button:hover{ color:var(--brass-bright); }
.theme-switch button[aria-pressed="true"]{ background:var(--brass); color:var(--on-brass); }
.theme-switch button[aria-pressed="true"]:hover{ color:var(--on-brass); }
/* 램프 풀체인도 같은 스위치입니다 (마우스 사용자를 위한 덤) */
.chain-pull{
position:absolute; left:22px; top:22px; width:22px; height:34px;
appearance:none; background:none; border:0; padding:0; margin:0;
cursor:pointer; pointer-events:auto;
}
.chain-pull:hover + .banker-lamp .chain{ transform:translateY(1.6px); }
.banker-lamp .chain{ transition:transform .18s ease; }
/* ============================================================
10. DAYLIGHT (라이트 모드)
같은 토큰 이름에 값만 갈아 끼웁니다. 마크업과 클래스는 그대로입니다.
색을 반전하는 게 아니라 명도만 뒤집고 색상(hue)은 유지합니다.
============================================================ */
:root[data-lb-theme="light"]{
--void:#ebe1cc; /* 바탕 종이 */
--panel:#e2d8bf;
--panel-2:#e8dfc8;
--parchment:#fbf6ea; /* 카드는 바탕보다 밝아야 떠 보입니다 */
--parchment-2:#f3ecda;
--ink:#241a0f;
--ink-soft:#5c4a32;
--text-on-dark:#241a0f; /* 이름은 유지, 값만 잉크색으로 (마크업 수정 불필요) */
--text-dim:#8a7757;
--brass:#9a7434;
--brass-bright:#7d5c26; /* 밝은 바탕에서는 '밝은 황동'이 오히려 짙어야 합니다 */
--brass-line:#c4ac7c;
--copper:#8f5230;
--copper-soft:#a9633c;
--patina:#4a6e58;
--line-dark:#cdbc98;
--shadow:rgba(90,70,42,.18);
--on-brass:#fbf6ea;
--logo-ink:var(--brand-brown); /* 낮에는 로고 원본 색 그대로 */
/* --lamp-shade 는 브랜드 고정값이라 두 모드에서 바뀌지 않습니다 */
color-scheme: light;
}
/* 토큰만으로 해결되지 않는 부분 — 빛의 논리가 반대이기 때문입니다.
어둠에서는 빛이 '밝기'로, 종이 위에서는 '따뜻함과 그늘'로 읽힙니다. */
:root[data-lb-theme="light"] body{
background:
repeating-linear-gradient(180deg, rgba(90,70,40,.018) 0px, rgba(90,70,40,.018) 1px, transparent 1px, transparent 3px),
radial-gradient(ellipse 820px 660px at 90px 150px, rgba(255,250,231,.95), rgba(255,247,222,.42) 42%, transparent 72%),
linear-gradient(90deg, rgba(96,74,44,.055) 0%, transparent 20%, transparent 70%, rgba(96,74,44,.09) 100%),
var(--void);
}
/* 램프 빛: 초록빛 → 크림빛 */
:root[data-lb-theme="light"] .lamp-halo{
background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,243,205,.85) 0%, rgba(255,238,190,.4) 44%, transparent 74%);
}
:root[data-lb-theme="light"] .lamp-beam span{
background:linear-gradient(to bottom,
rgba(255,246,214,.92) 0%, rgba(255,240,198,.6) 18%,
rgba(255,236,186,.32) 46%, rgba(255,232,178,.13) 72%, transparent 93%);
}
:root[data-lb-theme="light"] .lamp-pool{
background:radial-gradient(ellipse 46% 42% at 50% 46%, rgba(255,242,202,.5) 0%, rgba(255,238,192,.22) 46%, transparent 74%);
}
:root[data-lb-theme="light"] .lamp-bulb{
background:radial-gradient(ellipse at 50% 54%, rgba(255,252,238,.95) 0%, rgba(255,236,176,.6) 30%, rgba(255,232,170,.2) 58%, transparent 78%);
}
:root[data-lb-theme="light"] .banker-lamp{ filter:drop-shadow(0 7px 9px rgba(70,52,28,.28)); }
/* 표 · 액자 · 카드 */
:root[data-lb-theme="light"] table.ledger thead th{ border-bottom-color:var(--brass); }
:root[data-lb-theme="light"] table.ledger tbody tr:hover{ background:rgba(154,116,52,.07); }
:root[data-lb-theme="light"] .frame{ background:rgba(255,251,240,.5); }
:root[data-lb-theme="light"] .frame p{ color:var(--ink-soft); }
:root[data-lb-theme="light"] .postcard{ box-shadow:0 10px 20px rgba(90,70,42,.16), 0 1px 0 rgba(255,255,255,.6) inset; }
:root[data-lb-theme="light"] .postcard::before,
:root[data-lb-theme="light"] .postcard::after{ background:var(--ink); opacity:.82; }
:root[data-lb-theme="light"] .stories-panel{
background:
repeating-linear-gradient(115deg, rgba(90,70,40,.014) 0px, rgba(90,70,40,.014) 1px, transparent 1px, transparent 5px),
linear-gradient(180deg, var(--panel-2), var(--panel));
}