/* ============================================================
LOFTBEAR v1.0
loftbear.com 과 모든 방(서브도메인)이 함께 쓰는 토큰 · 기본 스타일 · 컴포넌트.
(2026-09-15 "LoftBear 다락방" 허브 아티팩트에서 그대로 가져옴 — tools.loftbear.com도
이제부터 같은 시스템을 씁니다. 1~9번은 원본 그대로이며, 10번부터 tools 전용 확장입니다.)
(2026-09-17 loftbear-landing(메인 도메인 loftbear.com, 완성 중)에서 확정한 새 서체·
낮 테마·알약(pill) 버튼/토글·나뭇결 제거·마우스 반딧불이 연출을 그대로 반영 —
loftbear-landing을 로컬에 띄워 실제 렌더링과 직접 대조하며 맞췄습니다.
히어로 전용 연출(궤도 구체·편지·밀랍인장)만 제외 — tools에는 히어로가 없어
이식할 대상이 없습니다.)
(2026-09-23 한 번 삽질: "LoftBear Foundation"이라는 별개 토큰 파일을 실제
loftbear.com 스펙으로 착각해 전면 재작성했다가, 실제 배포 사이트(https://loftbear.com)
에 직접 접속해 getComputedStyle로 대조한 뒤 되돌림(git revert) — 그 파일은 이 사이트가
실제로 쓰는 값이 아니었다. 이어서 사용자가 "loftbear.com에 실제로 적용되고 있는 값"이라며
준 파일도 밤 모드·dual data-theme 부분은 실측과 일치했지만 낮 모드는 오크/브라운으로 돼
있어 실측(day-green, #f6f5f1/#2f6a4c)과 달랐다 — loftbear.css 원본 파일만 보고 index.html의
페이지 오버라이드를 놓친 것으로 보임. 그래서 dual data-theme 지원과 3b번 "다리" 별칭
블록만 그 파일에서 가져오고, 낮 테마 값 자체는 기존 검증된 day-green을 그대로 유지했다.
교훈: 색 토큰을 바꿀 땐 문서보다 실제 사이트를 getComputedStyle로 직접 대조할 것.)
규칙
- 색은 이 파일의 토큰에서만 온다. 페이지에서 새 hex 를 만들지 않는다.
- 모서리는 0. border-radius 는 원형(타원) 요소와 버튼(.btn 계열)에만 예외.
- 테마는 . 기본은 dark(밤).
prefers-color-scheme 은 따르지 않는다.
============================================================ */
/* ---------- 0. 웹폰트 (을유1945 — 을유문화사, loftbear-landing과 동일 파일을 자체 호스팅) ---------- */
@font-face {
font-family: "Eulyoo1945";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/Eulyoo1945-Regular.woff2") format("woff2"),
url("/fonts/Eulyoo1945-Regular.woff") format("woff");
}
@font-face {
font-family: "Eulyoo1945";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/Eulyoo1945-SemiBold.woff2") format("woff2"),
url("/fonts/Eulyoo1945-SemiBold.woff") format("woff");
}
/* ---------- 1. 원재료 팔레트 (모드와 무관) ---------- */
:root {
/* 나무 */
--wood-950: #0d0906;
--wood-900: #140e09;
--wood-850: #1b130c;
--wood-800: #231910;
--wood-700: #312318;
--wood-600: #463424;
/* 황동 */
--brass-bright: #e2c07a;
--brass: #c49b58;
--brass-deep: #93713f;
--brass-dark: #6b502b;
/* 브라운 */
--brand-brown: #5e3b1f;
--walnut: #3b2515;
/* 램프 초록 유리 */
--lamp-green: #2f4c3c;
--lamp-green-deep: #1b2e24;
--lamp-green-bright: #6f9a7e;
/* 동판화: 잉크 · 해칭 */
--ink: #2b2013;
--hatch: #5c4a32;
/* 빛 */
--bulb: #fff3d1;
--glow: #f2c56f;
/* 밤의 글자 (양피지) */
--parchment-100: #ede3d0;
--parchment-300: #bcab8d;
--parchment-500: #978569;
/* 낮의 나무 (라임 오크) */
--oak-50: #efe9de;
--oak-100: #e4dccf;
--oak-200: #d7cdbc;
--oak-300: #bcae97;
--oak-700: #65543f;
--oak-800: #4a3a29;
--oak-900: #22170d;
/* 판면 종이 */
--plate-night: #cdbf9f;
--plate-night-edge: #a89878;
--plate-day: #f1eadd;
--plate-day-edge: #cdbfa6;
/* ---------- 서체 ---------- */
--font-display: "Eulyoo1945", "Inter", "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
--font-body: "Inter", "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
--font-mono: "IBM Plex Mono", "IBM Plex Sans KR", "Consolas", monospace;
--fs-xs: 0.75rem;
--fs-sm: 0.875rem;
--fs-base: 1rem;
--fs-md: 1.125rem;
--fs-lg: 1.375rem;
--fs-xl: 1.75rem;
--fs-2xl: clamp(1.75rem, 3.4vw, 2.625rem);
--fs-hero: clamp(2.35rem, 5.4vw, 4.25rem);
/* ---------- 간격 · 틀 ---------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--sp-10: 128px;
--container: 1180px;
--gutter: clamp(20px, 4vw, 40px);
--header-h: 68px;
--radius-round: 50%;
--hair: 1px;
--ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}
/* ---------- 2. 의미 토큰 : 밤 (기본) ---------- */
:root,
:root[data-lb-theme="dark"],
:root[data-theme="dark"] {
color-scheme: dark;
--bg: var(--wood-900);
--bg-raised: var(--wood-850);
--bg-sunken: var(--wood-950);
--surface: var(--wood-800);
--line: var(--wood-600);
--line-strong: var(--brass-dark);
--text: var(--parchment-100);
--text-muted: var(--parchment-300);
--text-faint: var(--parchment-500);
--accent: var(--brass-bright);
--accent-strong: var(--brass);
--on-accent: var(--wood-950);
--logo: var(--brass-bright);
--plate: var(--plate-night);
--plate-edge: var(--plate-night-edge);
--grain: color-mix(in srgb, var(--wood-700) 38%, transparent);
--shadow: color-mix(in srgb, var(--wood-950) 85%, transparent);
--lamp-intensity: 1;
--bulb-on: 1;
/* 알약(pill) 버튼·토글용 별도 토큰 — 2026-09-17 loftbear-landing과 동일 */
--pill-bg: var(--parchment-100);
--pill-fg: var(--wood-950);
--pill-ring: color-mix(in srgb, var(--bulb) 20%, transparent);
--pill-glow-1: color-mix(in srgb, var(--bulb) 25%, transparent);
--pill-glow-2: color-mix(in srgb, var(--glow) 20%, transparent);
--pill-soft-bg: color-mix(in srgb, var(--parchment-100) 9%, transparent);
--pill-soft-hover: color-mix(in srgb, var(--parchment-100) 16%, transparent);
--pill-soft-edge: color-mix(in srgb, var(--parchment-100) 22%, transparent);
--pill-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--pill-out: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- 3. 의미 토큰 : 낮 ---------- */
/* 2026-09-17: loftbear-landing이 확정한 낮 테마로 교체 — 오크 갈색 대신 종이+초록.
황동이 쓰이던 자리(액자 모서리·로고 옆 세로선·주 버튼·램프 금속)도 초록으로 바뀐다. */
:root[data-lb-theme="light"],
:root[data-theme="light"] {
color-scheme: light;
--day-paper: #f6f5f1;
--day-paper-raised: #fbfaf7;
--day-paper-sunken: #eeece6;
--day-line: #e0ddd5;
--day-line-strong: #b9c7bd;
--day-ink: #1f3f33;
--day-ink-muted: #3d5a4d;
--day-ink-faint: #516a5e;
--day-green: #3f7c5a;
--day-green-bright: #5b9473;
--day-green-deep: #2c5f45;
--day-green-text: #2f6a4c;
--bg: var(--day-paper);
--bg-raised: var(--day-paper-raised);
--bg-sunken: var(--day-paper-sunken);
--surface: var(--day-paper-raised);
--line: var(--day-line);
--line-strong: var(--day-line-strong);
--text: var(--day-ink);
--text-muted: var(--day-ink-muted);
--text-faint: var(--day-ink-faint);
--accent: var(--day-green-text);
--accent-strong: var(--day-ink);
--on-accent: var(--day-paper-raised);
--logo: var(--day-ink);
--plate: var(--day-paper-raised);
--plate-edge: var(--day-line);
--ink: var(--day-ink);
--hatch: var(--day-ink-faint);
--grain: color-mix(in srgb, var(--day-line) 40%, transparent);
--shadow: color-mix(in srgb, var(--day-ink) 16%, transparent);
--brass-bright: var(--day-green-bright);
--brass: var(--day-green);
--brass-deep: var(--day-green-deep);
--brass-dark: var(--day-green-deep);
--lamp-intensity: 0.22;
--bulb-on: 0.3;
--pill-bg: var(--day-ink);
--pill-fg: var(--day-paper-raised);
--pill-ring: color-mix(in srgb, var(--day-paper-raised) 18%, transparent);
--pill-glow-1: color-mix(in srgb, var(--day-green) 22%, transparent);
--pill-glow-2: color-mix(in srgb, var(--day-green-bright) 18%, transparent);
--pill-soft-bg: color-mix(in srgb, var(--day-ink) 6%, transparent);
--pill-soft-hover: color-mix(in srgb, var(--day-ink) 11%, transparent);
--pill-soft-edge: color-mix(in srgb, var(--day-ink) 16%, transparent);
}
:root[data-lb-theme="light"] .page {
/* 오크 나뭇결 세로줄 대신 아주 옅은 종이 결 */
background-image: url("data:image/svg+xml;utf8,");
}
/* ---------- 3b. 다리 — 모노레포 이름(apps/room-template, packages/design-system 등:
--bg-base, --surface-card, --accent-brass …)으로 짠 컴포넌트를 이 사이트에 얹을 때를
대비한 별칭. 전부 위 1~3번(실제 loftbear.com 값)을 한 방향으로만 가리키므로 색이
항상 한 벌로 유지된다 — 낮 모드는 day-green(검증된 실제 값)이지 오크가 아니다.
지금 이 프로젝트 컴포넌트는 안 쓰지만, 나중에 그런 이름의 코드를 가져올 때를 위해 남겨 둔다. */
:root {
--bg-base: var(--bg);
--surface-panel: var(--bg-raised);
--surface-card: var(--plate);
--text-main: var(--text);
--accent-brass: var(--accent);
--accent-copper: var(--brass-deep);
--text-on-accent: var(--on-accent);
--lamp-light-beam: var(--glow);
--space-1: var(--sp-1);
--space-2: var(--sp-2);
--space-3: var(--sp-3);
--space-4: var(--sp-4);
--space-5: var(--sp-5);
--space-6: var(--sp-6);
--space-7: var(--sp-7);
--space-8: var(--sp-8);
--radius-none: 0;
--radius-circle: var(--radius-round);
--font-ui: var(--font-body);
--font-numeric: var(--font-mono);
--font-stamp-lg: var(--font-mono);
--font-stamp-sm: var(--font-mono);
}
/* ---------- 4. 기본 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: 1.75;
word-break: keep-all;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
line-height: 1.28;
letter-spacing: -0.012em;
color: var(--text);
}
body, p { letter-spacing: -0.01em; }
::selection { background: var(--brass-dark); color: var(--parchment-100); }
:root[data-lb-theme="light"] ::selection {
background: color-mix(in srgb, var(--day-green) 24%, var(--day-paper));
color: var(--day-ink);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: var(--sp-4); top: -60px; z-index: 100;
padding: var(--sp-2) var(--sp-4);
background: var(--accent); color: var(--on-accent);
font-weight: 600; text-decoration: none;
border-radius: 999px;
}
.skip-link:focus { top: var(--sp-3); }
/* SVG 패턴 정의만 담는 숨은 svg. display:none 을 쓰면 패턴이 깨진다. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ---------- 5. 틀 ---------- */
/* 2026-09-17: loftbear-landing 실제 페이지는 나뭇결 세로줄 없이 민 바탕을 쓴다
(.page{background-image:none} — 밤 모드도 포함). 여기서도 그대로 맞춘다.
낮 모드는 3번 섹션에서 옅은 종이 질감으로 다시 덮는다. */
.page {
position: relative;
min-height: 100vh;
overflow-x: clip;
background-color: var(--bg);
transition: background-color 0.5s var(--ease);
}
.container {
width: min(100% - 2 * var(--gutter), var(--container));
margin-inline: auto;
}
.section { padding-block: clamp(56px, 8vw, 96px); position: relative; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.section-title { font-size: var(--fs-2xl); margin-top: var(--sp-4); font-weight: 400; letter-spacing: -0.006em; }
.section-lede { margin-top: var(--sp-4); color: var(--text-muted); font-size: var(--fs-md); }
.eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
/* ---------- 6. 헤더 ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
height: var(--header-h);
background: color-mix(in srgb, var(--bg) 80%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid transparent;
transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-stuck {
background: color-mix(in srgb, var(--bg) 94%, transparent);
border-bottom-color: var(--line-strong);
box-shadow: 0 10px 30px -22px var(--shadow);
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-5); height: 100%; }
.brand {
display: inline-flex; align-items: center;
color: var(--logo);
text-decoration: none;
transition: color 0.5s var(--ease);
}
.brand svg { height: 24px; width: auto; }
.brand-rule {
width: 1px; height: 28px; flex: none; align-self: center;
background: linear-gradient(to bottom, transparent, var(--brass) 25%, var(--brass-bright) 50%, var(--brass) 75%, transparent);
}
/* 서브도메인(방) 이름 — 로고 옆 얇은 황동 선 뒤에 붙는다 */
.brand-room {
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text-faint); white-space: nowrap;
}
/* 헤더 메뉴 — 붙어 있는 작은 알약들 (2026-09-17 loftbear-landing과 동일) */
.nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nav a {
position: relative;
padding: 6px 15px;
line-height: 1.6;
border-radius: 999px;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text-muted);
background: var(--pill-soft-bg);
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--pill-soft-hover); }
.nav a:active { transform: scale(0.97); }
/* 밤/낮 세그먼트 — 알약 안의 알약 */
.theme-switch {
display: inline-flex; flex: none;
padding: 3px; gap: 2px;
border-radius: 999px;
background: var(--pill-soft-bg);
box-shadow: inset 0 1px 0 var(--pill-soft-edge), inset 0 -1px 0 var(--pill-soft-edge);
}
.theme-switch button {
appearance: none; border: 0; margin: 0; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
min-height: 30px; padding: 6px 12px;
border-radius: 999px;
background: transparent;
color: var(--text-muted);
font: 600 var(--fs-xs)/1 var(--font-body);
letter-spacing: 0.04em;
transition: background-color 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.2s var(--ease);
}
.theme-switch button:hover { background: var(--pill-soft-hover); color: var(--text); }
.theme-switch button[aria-pressed="true"] {
background: var(--pill-bg); color: var(--pill-fg);
box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 12px var(--pill-glow-1);
}
.theme-switch svg { width: 14px; height: 14px; }
/* ---------- 7. 버튼 · 링크 · 아이콘 ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 44px; padding: 8px 20px;
font: 600 0.9375rem/1 var(--font-body);
letter-spacing: -0.01em;
text-decoration: none;
border: 0;
cursor: pointer;
border-radius: 999px;
transition: background-color 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.2s var(--ease), transform 0.16s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline-offset: 4px; }
.btn svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
/* 주 버튼: 밝게 빛나는 알약 (2026-09-17 loftbear-landing과 동일) */
.btn--brass {
color: var(--pill-fg); background: var(--pill-bg); border-color: transparent;
box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 12.8px var(--pill-glow-1), 0 0 32px var(--pill-glow-2);
}
.btn--brass:hover { filter: none; transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 18px var(--pill-glow-1), 0 0 44px var(--pill-glow-2); }
/* 화살표: 평소엔 접혀 있다가 올리면 동그라미로 튀어나온다 */
.btn--brass .icon {
flex: none; width: 20px; height: 20px; padding: 0;
border-radius: 50%;
background: var(--pill-fg); color: var(--pill-bg);
stroke-width: 2.2;
max-width: 0; margin-left: -10px; opacity: 0;
transform: scale(0.4) translateX(-4px);
transition: max-width 0.2s var(--pill-out), margin-left 0.2s var(--pill-out), padding 0.2s var(--pill-out), opacity 0.16s var(--ease), transform 0.24s var(--pill-spring);
}
.btn--brass:hover .icon, .btn--brass:focus-visible .icon { max-width: 20px; margin-left: 0; padding: 3px; opacity: 1; transform: none; }
@media (hover: none) { .btn--brass .icon { max-width: 20px; margin-left: 0; padding: 3px; opacity: 1; transform: none; } }
/* 보조 버튼: 반투명 알약 + 위아래 가는 빛선 */
.btn--ghost {
color: var(--text); background: var(--pill-soft-bg); border-color: transparent;
box-shadow: inset 0 1px 0 var(--pill-soft-edge), inset 0 -1px 0 var(--pill-soft-edge);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover { color: var(--text); background: var(--pill-soft-hover); }
.btn--ghost .icon {
flex: none; width: 20px; height: 20px; padding: 3px;
border-radius: 50%;
background: var(--pill-soft-bg);
box-shadow: inset 0 0 0 1px var(--pill-soft-edge);
stroke-width: 2.2;
transition: background-color 0.18s var(--ease), transform 0.24s var(--pill-spring);
}
.btn--ghost:hover .icon { background: var(--pill-bg); color: var(--pill-fg); box-shadow: none; transform: translateX(2px); }
.link-more {
display: inline-flex; align-items: center; gap: 6px;
color: var(--accent);
font-size: var(--fs-sm);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
padding-bottom: 2px;
transition: border-color 0.25s var(--ease), gap 0.25s var(--ease);
}
.link-more:hover { border-bottom-color: var(--accent); gap: 10px; }
.icon {
width: 24px; height: 24px;
fill: none; stroke: currentColor;
stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter;
}
/* ---------- 8. 동판화 판면 (밝은 종이 카드 — 결과 카드·포스트카드가 이걸 쓴다) ---------- */
.plate {
position: relative;
display: block;
color: var(--ink);
background: radial-gradient(120% 95% at 50% 42%, var(--plate) 58%, var(--plate-edge) 150%);
box-shadow:
0 0 0 1px var(--plate-edge),
0 0 0 6px var(--bg-sunken),
0 0 0 7px var(--line-strong),
0 30px 50px -30px var(--shadow);
}
.engraving {
display: block; width: 100%; height: auto;
color: var(--ink);
fill: none; stroke: currentColor;
stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}
.engraving .thin { stroke-width: 0.6; }
.engraving .bold { stroke-width: 1.8; }
.engraving .nos { stroke: none; }
.engraving .solid { fill: currentColor; stroke: none; }
.engraving .paper { fill: var(--plate); }
.engraving .hatch { fill: url(#hatch); }
.engraving .hatch-fine { fill: url(#hatch-fine); }
.engraving .hatch-cross { fill: url(#hatch-cross); }
.engraving .hatch-h { fill: url(#hatch-h); }
.engraving .ticks { stroke-linecap: butt; }
.engraving text {
fill: currentColor; stroke: none;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
}
.hatch-stroke { stroke: var(--hatch); fill: none; }
/* ---------- 9. 광고 액자 ---------- */
.frame {
position: relative;
display: grid; place-items: center;
min-height: 120px;
padding: 34px var(--sp-4) var(--sp-4);
background:
linear-gradient(var(--brass), var(--brass)) top left / 14px 2px no-repeat,
linear-gradient(var(--brass), var(--brass)) top left / 2px 14px no-repeat,
linear-gradient(var(--brass), var(--brass)) top right / 14px 2px no-repeat,
linear-gradient(var(--brass), var(--brass)) top right / 2px 14px no-repeat,
linear-gradient(var(--brass), var(--brass)) bottom left / 14px 2px no-repeat,
linear-gradient(var(--brass), var(--brass)) bottom left / 2px 14px no-repeat,
linear-gradient(var(--brass), var(--brass)) bottom right / 14px 2px no-repeat,
linear-gradient(var(--brass), var(--brass)) bottom right / 2px 14px no-repeat,
var(--bg-sunken);
border: 1px solid var(--line);
outline: 1px solid var(--line-strong);
outline-offset: 5px;
margin: 6px;
}
.frame__label {
position: absolute; top: 10px; left: 14px;
font: 500 10px/1 var(--font-mono);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
}
.frame__slot { width: 100%; min-height: 60px; display: grid; place-items: center; text-align: center; }
.frame__slot p { font: 500 var(--fs-xs)/1.6 var(--font-mono); letter-spacing: 0.06em; color: var(--text-faint); max-width: 38ch; }
/* .frame 안에서 padding을 직접 지정하고(패딩 상단을 34px로 안 두고) 라벨을 본문과 같은 흐름에
놓고 싶을 때 쓰는 인라인 라벨 (경고문 프레임 등). .frame__label(절대좌표)과는 다른 용도. */
.kicker {
display: inline-block; font-family: var(--font-mono); font-size: .62rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint);
padding-bottom: .6rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.frame--square {
aspect-ratio: 1 / 1;
width: 336px;
max-width: calc(100% - 12px);
min-height: 0;
margin-inline: auto;
}
/* ---------- 10. 뱅커스 램프 (tools.loftbear.com: 헤더 로고 옆 작게, .lb- 접두로 허브 히어로용
.lamp-rig 와 충돌하지 않게 분리) ---------- */
.lb-lamp-rig { position: absolute; left: 6px; top: 2px; width: 52px; height: 74px; pointer-events: none; }
@media (max-width: 640px) { .lb-lamp-rig { display: none; } }
.lb-banker-lamp { position: absolute; left: 0; top: 0; width: 52px; filter: drop-shadow(0 6px 12px var(--shadow)); }
.lb-lamp-halo {
position: absolute; left: -94px; top: -60px; width: 240px; height: 200px;
background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--glow) 20%, transparent) 0%, color-mix(in srgb, var(--glow) 7%, transparent) 44%, transparent 72%);
mix-blend-mode: screen;
animation: lb-lamp-flicker 7s ease-in-out infinite;
}
.lb-lamp-beam {
position: absolute; left: -200px; top: 22px; width: 560px; height: 540px;
filter: blur(18px); mix-blend-mode: screen;
animation: lb-lamp-flicker 7s ease-in-out infinite;
}
.lb-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,
color-mix(in srgb, var(--glow) 34%, transparent) 0%,
color-mix(in srgb, var(--glow) 19%, transparent) 16%,
color-mix(in srgb, var(--glow) 10%, transparent) 42%,
color-mix(in srgb, var(--glow) 4%, transparent) 68%,
transparent 92%);
}
.lb-lamp-pool {
position: absolute; left: -200px; top: 120px; width: 480px; height: 360px;
background: radial-gradient(ellipse 46% 42% at 50% 46%, color-mix(in srgb, var(--glow) 16%, transparent) 0%, color-mix(in srgb, var(--glow) 6%, transparent) 46%, transparent 74%);
filter: blur(14px); mix-blend-mode: screen;
animation: lb-lamp-flicker 7s ease-in-out infinite;
}
.lb-lamp-bulb {
position: absolute; left: -6px; top: 4px; width: 64px; height: 46px;
background: radial-gradient(ellipse at 50% 54%, var(--bulb) 0%, color-mix(in srgb, var(--glow) 55%, transparent) 30%, color-mix(in srgb, var(--lamp-green-bright) 20%, transparent) 56%, transparent 76%);
filter: blur(3px); mix-blend-mode: screen;
opacity: var(--bulb-on);
animation: lb-lamp-flicker 7s ease-in-out infinite;
}
@keyframes lb-lamp-flicker { 0%, 100% { opacity: .88; } 43% { opacity: 1; } 62% { opacity: .94; } }
@media (prefers-reduced-motion: reduce) {
.lb-lamp-halo, .lb-lamp-beam, .lb-lamp-pool, .lb-lamp-bulb { animation: none; }
}
.lb-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;
}
.lb-chain-pull:hover + .lb-banker-lamp .chain { transform: translateY(1.6px); }
.lb-banker-lamp .chain { transition: transform .18s ease; }
/* ---------- 11. 아코디언 ---------- */
.accordion { border-top: 1px solid var(--line-strong); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
padding: 22px 0;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: var(--fs-md);
font-weight: 700;
color: var(--text);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--accent); }
.accordion__mark {
flex: none;
width: 30px; height: 30px;
display: grid; place-items: center;
border: 0; border-radius: 50%;
background: var(--pill-soft-bg);
box-shadow: inset 0 0 0 1px var(--pill-soft-edge);
color: var(--text);
transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.accordion summary:hover .accordion__mark,
.accordion details[open] .accordion__mark { background: var(--pill-bg); color: var(--pill-fg); box-shadow: none; }
.accordion__mark .icon { width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.accordion details[open] .accordion__mark .icon { transform: rotate(45deg); }
.accordion__body { padding: 0 48px 26px 0; color: var(--text-muted); }
.accordion__body p + p { margin-top: var(--sp-3); }
/* ---------- 12. 등장 (흐림 → 선명) ---------- */
.lb-motion [data-reveal] {
transition:
filter 1s var(--ease) var(--reveal-delay, 0ms),
opacity 1s var(--ease) var(--reveal-delay, 0ms),
translate 1s var(--ease) var(--reveal-delay, 0ms);
}
.lb-motion [data-reveal]:not(.is-revealed) {
filter: blur(8px);
opacity: 0.38;
translate: 0 16px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.lb-motion [data-reveal],
.lb-motion [data-reveal]:not(.is-revealed) { filter: none; opacity: 1; translate: none; transition: none; }
.lb-lamp-halo { animation: none; }
.fireflies { display: none; }
}
/* ---------- 12b. 반딧불이 — 페이지 어디든 마우스 둘레에 초록 불빛이 모인다
(2026-09-17 loftbear-landing과 동일, loftbear-fireflies.js가 이 레이어를 만든다) ---------- */
.fireflies {
position: fixed; inset: 0; z-index: 40;
overflow: hidden; pointer-events: none;
}
.fireflies canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fireflies__glow {
position: absolute; left: 0; top: 0;
width: 520px; aspect-ratio: 1;
translate: calc(var(--mx, -999px) - 50%) calc(var(--my, -999px) - 50%);
border-radius: var(--radius-round);
background: radial-gradient(closest-side,
color-mix(in srgb, var(--lamp-green-bright) 36%, transparent),
color-mix(in srgb, var(--lamp-green-bright) 14%, transparent) 45%,
color-mix(in srgb, var(--lamp-green) 6%, transparent) 70%,
transparent);
mix-blend-mode: screen;
opacity: 0;
transition: opacity 0.6s var(--ease);
}
.fireflies.is-lit .fireflies__glow { opacity: 1; }
:root[data-lb-theme="light"] .fireflies__glow {
mix-blend-mode: normal;
background: radial-gradient(closest-side,
color-mix(in srgb, var(--lamp-green-bright) 22%, transparent),
color-mix(in srgb, var(--lamp-green-bright) 8%, transparent) 55%,
transparent);
}
/* ============================================================
13. TOOLS.LOFTBEAR.COM 확장 — 계산기 전용 컴포넌트
============================================================ */
/* 구버전 토큰 별칭 — 페이지 곳곳의 인라인 스타일이 이 이름들을 그대로 참조하고 있어
컴포넌트 하나하나를 고치는 대신 여기서 새 토큰으로 이어 준다.
주의: --brass-bright는 여기서 별칭으로 쓰지 않는다 — 1번 섹션이 이미 원재료 팔레트로
정의해 뒀고, --accent 자체가 그 값을 참조하므로(2·3번 섹션) 여기서 "--brass-bright:
var(--accent)"처럼 반대 방향으로 별칭을 걸면 순환 참조가 되어 --accent와
--brass-bright 둘 다 빈 값이 된다(밤/낮 전환 버튼이 안 보이던 원인). 강조색이 필요한
곳은 --brass-bright가 아니라 --accent를 직접 쓸 것. */
:root {
--text-on-dark: var(--text);
--text-dim: var(--text-muted);
--brass-line: var(--line-strong);
--line-dark: var(--line);
--panel: var(--bg-raised);
--panel-2: var(--bg-sunken);
--void: var(--bg);
--parchment: var(--plate);
--parchment-2: var(--plate-edge);
--ink-soft: var(--text-muted);
/* 판면(plate/result-card/postcard)은 테마와 무관하게 늘 밝은 종이라, 그 위 강조색은
테마별로 바뀌는 --accent가 아니라 고정된 잉크 계열이어야 대비가 안 무너진다. */
--copper: var(--hatch);
--copper-soft: var(--hatch);
--patina: var(--lamp-green-bright);
--on-brass: var(--on-accent);
--logo-ink: var(--logo);
--measure: 64ch;
--f-kr-display: var(--font-display);
--f-display-italic: var(--font-display);
--f-body: var(--font-body);
--f-numeral: var(--font-body);
--f-mono: var(--font-mono);
}
h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2rem); margin-top: .4em; text-wrap: balance; }
section { padding: var(--sp-7) 0; }
main { display: block; padding-block: var(--sp-6) var(--sp-8); }
.pull-quote {
font-family: var(--font-body); font-style: italic; color: var(--text-muted);
max-width: 40ch; border-left: 1px solid var(--accent-strong); padding-left: 1.1rem;
}
.stat-row { display: flex; flex-wrap: wrap; gap: 2.2rem; margin: 0 0 1.4rem; }
.stat .num {
font-family: var(--font-body); font-weight: 600; font-size: 1.7rem;
color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stat .label {
display: block; font-size: .68rem; color: var(--text-muted); letter-spacing: .06em;
margin-top: .25rem; text-transform: uppercase; font-family: var(--font-mono);
}
/* 원장 표 */
.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(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
font-weight: 400; color: var(--text-muted); border-bottom: 1px solid var(--line-strong);
}
table.ledger tbody td { border-bottom: 1px solid var(--line); }
table.ledger tbody tr { transition: background .15s ease; }
table.ledger tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
table.ledger td.day-num {
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
color: var(--text); white-space: nowrap; font-size: .82rem;
}
table.ledger td .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--lamp-green-bright); font-size: .82rem; }
/* 포스트잇 카드 (상황 번들) — 책상에 붙여 둔 메모지처럼: 납작한 종이색 + 접힌 모서리 +
살짝 돌아간 각도 + 아래로 떨어지는 그림자. 동판화 판면(.plate)의 비네트 그라디언트
대신 플랫한 색 + color-mix로 살짝씩 다른 색지 4장을 순환시킨다. */
.stories-panel {
margin-top: 1.8rem; padding: 2.6rem 2rem 3rem;
background: linear-gradient(180deg, var(--bg-sunken), var(--bg-raised));
border: 1px solid var(--line);
}
.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 {
--fold: 22px;
position: relative; padding: 1.7rem 1.6rem 1.9rem;
color: var(--ink);
background: var(--plate);
box-shadow: 0 0 0 1px var(--plate-edge), 0 16px 26px -14px var(--shadow);
clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
}
/* 접혀서 뒤로 넘어간 모서리 — 살짝 어둡게, 그림자로 도톰한 두께감 */
.postcard::after {
content: ""; position: absolute; top: 0; right: 0;
width: var(--fold); height: var(--fold);
background: linear-gradient(135deg,
color-mix(in srgb, var(--plate) 88%, black) 0%,
color-mix(in srgb, var(--plate-edge) 70%, black) 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%);
filter: drop-shadow(-2px 2px 3px color-mix(in srgb, var(--shadow) 60%, transparent));
}
.postcard:nth-child(1) { transform: rotate(-1.4deg); background: color-mix(in srgb, var(--plate) 88%, var(--brass) 12%); }
.postcard:nth-child(2) { transform: rotate(1.1deg); background: color-mix(in srgb, var(--plate) 88%, var(--lamp-green-bright) 12%); }
.postcard:nth-child(3) { transform: rotate(-.8deg); background: var(--plate); }
.postcard:nth-child(4) { transform: rotate(1.3deg); background: color-mix(in srgb, var(--plate) 85%, var(--hatch) 15%); }
.postcard:nth-child(1)::after { background: linear-gradient(135deg, color-mix(in srgb, var(--plate) 76%, var(--brass) 12%) 0%, color-mix(in srgb, var(--plate-edge) 60%, black) 100%); }
.postcard:nth-child(2)::after { background: linear-gradient(135deg, color-mix(in srgb, var(--plate) 76%, var(--lamp-green-bright) 12%) 0%, color-mix(in srgb, var(--plate-edge) 60%, black) 100%); }
.postcard:nth-child(4)::after { background: linear-gradient(135deg, color-mix(in srgb, var(--plate) 73%, var(--hatch) 15%) 0%, color-mix(in srgb, var(--plate-edge) 60%, black) 100%); }
.postcard:hover { transform: rotate(0deg) translateY(-3px); transition: transform 0.25s var(--ease); z-index: 2; }
.postcard .tag {
font-family: var(--font-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(--font-display); font-weight: 700; font-size: 1.18rem; margin: 0 0 .65rem; color: var(--ink); }
.postcard p { font-size: .9rem; color: color-mix(in srgb, var(--ink) 72%, transparent); margin: 0 0 1rem; }
.postcard .more {
font-family: var(--font-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); }
/* 판면(.plate/.result-card/.postcard) 밖, 어두운 페이지 바탕에서 쓰는 "더 보기" 링크 */
a.more {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; text-decoration: none;
color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
padding-bottom: 2px;
}
a.more:hover { border-bottom-color: var(--accent); }
/* 판면 위에서는 테마 불변 잉크색으로 — 밤 모드에서도 밝은 종이 위에 대비가 유지된다 */
.postcard .more, .result-card .more { color: var(--copper); border-bottom-color: var(--copper); }
/* 푸터 */
.shelf {
margin-top: 1.2rem; padding-top: 2.4rem; border-top: 1px solid var(--line);
display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 2rem;
font-size: .85rem; color: var(--text-muted);
}
@media (max-width: 700px) { .shelf { grid-template-columns: 1fr; } }
.shelf p { max-width: 32ch; margin: .7rem 0 0; }
.tags { display: flex; flex-wrap: wrap; gap: 1rem 1.3rem; margin-top: .6rem; }
.tags a {
font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); text-decoration: none;
padding-bottom: .2rem; border-bottom: 1px solid var(--line);
transition: color .2s ease, border-color .2s ease;
}
.tags a:hover, .tags a:focus-visible { color: var(--accent); border-color: var(--line-strong); }
.shelf .legal { font-family: var(--font-mono); font-size: .66rem; color: var(--text-faint); align-self: end; }
/* 계산기 폼 · 결과 카드 */
.calc-form { margin-top: 1.8rem; padding: 2rem; background: var(--bg-raised); border: 1px solid var(--line); }
.calc-row { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: flex-end; margin-bottom: 1.3rem; }
.calc-row:last-child { margin-bottom: 0; }
.calc-field { display: flex; flex-direction: column; gap: .35rem; flex: 1; min-width: 150px; }
.calc-field label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.calc-field .hint { font-size: .76rem; color: var(--text-faint); }
.calc-field__moneyhint {
display: block; min-height: 1.1em;
font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em;
color: var(--lamp-green-bright);
}
.calc-field input, .calc-field select, .calc-field textarea {
background: var(--bg-sunken); border: 1px solid var(--line-strong); color: var(--text);
padding: .65rem .8rem; font-family: var(--font-body); font-size: .95rem;
}
.calc-field input:focus-visible, .calc-field select:focus-visible, .calc-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 커스텀 달력 (loftbear-datepicker.js가 input[type=date]를 이걸로 바꿔치기한다) */
.lb-datefield { position: relative; }
.lb-datefield__trigger {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem;
background: var(--bg-sunken); border: 1px solid var(--line-strong); color: var(--text);
padding: .65rem .8rem; font-family: var(--font-body); font-size: .95rem;
cursor: pointer; text-align: left;
}
.lb-datefield__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-datefield__label.is-placeholder { color: var(--text-faint); }
.lb-datefield__icon { width: 17px; height: 17px; flex: none; color: var(--text-faint); }
.lb-datefield__panel {
position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
width: 280px; padding: .9rem;
background: var(--bg-raised); border: 1px solid var(--line-strong);
box-shadow: 0 20px 40px -16px var(--shadow);
}
.lb-datefield__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.lb-datefield__navbtn {
appearance: none; border: 0; border-radius: 50%; width: 28px; height: 28px;
display: grid; place-items: center; cursor: pointer;
background: var(--pill-soft-bg); color: var(--text);
font-size: 1.1rem; line-height: 1;
transition: background-color .16s var(--ease);
}
.lb-datefield__navbtn:hover { background: var(--pill-soft-hover); }
.lb-datefield__monthlabel {
appearance: none; border: 0; background: none; cursor: pointer;
font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--text);
padding: .3rem .6rem; border-radius: 999px;
transition: background-color .16s var(--ease);
}
.lb-datefield__monthlabel:hover { background: var(--pill-soft-bg); }
.lb-datefield__weekhead, .lb-datefield__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lb-datefield__weekhead[hidden], .lb-datefield__grid[hidden], .lb-datefield__yeargrid[hidden] { display: none; }
.lb-datefield__weekhead span {
text-align: center; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em;
color: var(--text-faint); padding-bottom: .4rem;
}
.lb-datefield__day {
appearance: none; border: 0; border-radius: 50%; aspect-ratio: 1; width: 100%;
display: grid; place-items: center; cursor: pointer;
background: transparent; color: var(--text); font-family: var(--font-body); font-size: .82rem;
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.lb-datefield__day:hover { background: var(--pill-soft-hover); }
.lb-datefield__day.is-today { box-shadow: inset 0 0 0 1px var(--pill-ring); }
.lb-datefield__day.is-selected { background: var(--pill-bg); color: var(--pill-fg); }
.lb-datefield__yeargrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lb-datefield__year {
appearance: none; border: 0; border-radius: 999px; padding: .55rem 0;
cursor: pointer; background: var(--pill-soft-bg); color: var(--text);
font-family: var(--font-body); font-size: .84rem;
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.lb-datefield__year:hover { background: var(--pill-soft-hover); }
.lb-datefield__year.is-selected { background: var(--pill-bg); color: var(--pill-fg); }
.calc-toggle {
display: inline-flex; padding: 3px; gap: 2px;
border-radius: 999px;
background: var(--pill-soft-bg);
box-shadow: inset 0 1px 0 var(--pill-soft-edge), inset 0 -1px 0 var(--pill-soft-edge);
}
.calc-toggle button {
appearance: none; background: none; border: 0; cursor: pointer;
border-radius: 999px;
font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--text-muted);
padding: .62rem 1.1rem; transition: background-color .16s var(--ease), color .16s var(--ease), box-shadow .2s var(--ease);
}
.calc-toggle button:hover { background: var(--pill-soft-hover); }
.calc-toggle button[aria-pressed="true"] {
background: var(--pill-bg); color: var(--pill-fg);
box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 12px var(--pill-glow-1);
}
.pill-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-group button {
appearance: none; background: var(--pill-soft-bg); cursor: pointer;
border: 0; color: var(--text-muted);
font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em;
padding: .5rem .85rem; border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--pill-soft-edge);
transition: background-color .16s var(--ease), color .16s var(--ease), box-shadow .2s var(--ease);
}
.pill-group button:hover { background: var(--pill-soft-hover); }
.pill-group button[aria-pressed="true"] {
background: var(--pill-bg); color: var(--pill-fg);
box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 12px var(--pill-glow-1);
}
.calc-submit {
border: 0; background: var(--pill-bg); color: var(--pill-fg);
padding: .8rem 1.6rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em;
text-transform: uppercase; cursor: pointer; border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 12.8px var(--pill-glow-1), 0 0 32px var(--pill-glow-2);
transition: box-shadow .2s var(--ease), transform .16s var(--ease);
}
.calc-submit:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 18px var(--pill-glow-1), 0 0 44px var(--pill-glow-2); }
.calc-submit:active { transform: scale(0.97); }
.result-card {
margin-top: 2rem; padding: 2.2rem;
color: var(--ink);
background: radial-gradient(120% 95% at 50% 42%, var(--plate) 58%, var(--plate-edge) 150%);
box-shadow: 0 0 0 1px var(--plate-edge), 0 30px 50px -30px var(--shadow);
}
.result-card[hidden] { display: none; }
.result-headline { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-soft); }
.result-main-num {
font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
color: var(--ink); margin: .3rem 0 1.4rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.result-sub { font-size: .86rem; color: color-mix(in srgb, var(--ink) 72%, transparent); margin: -1rem 0 1.4rem; }
.result-breakdown { width: 100%; border-collapse: collapse; }
.result-breakdown th, .result-breakdown td { padding: .55rem 0; text-align: left; border-bottom: 1px solid var(--plate-edge); font-size: .88rem; }
.result-breakdown td:last-child { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.result-breakdown tr.total td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: none; padding-top: .8rem; }
.result-note { font-size: .78rem; color: color-mix(in srgb, var(--ink) 72%, transparent); margin-top: 1.2rem; }
.result-block + .result-block { margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid var(--plate-edge); }
/* ============================================================
14. HEALTH.LOFTBEAR.COM 확장 — 생리·배란 달력, 임신 진행 막대 등
이 요소들은 전부 결과 카드(.result-card, 테마와 무관하게 늘 밝은 종이) 위에 놓이므로
테마별로 바뀌는 토큰(--accent, --text, --brass 등)은 쓰지 않고, 1번 섹션의
고정 원재료 토큰(--ink, --brand-brown, --lamp-green*, --parchment-100)만 쓴다.
(밤/낮에 따라 바뀌는 토큰을 판면 위에 쓰면 대비가 무너진다 — tools에서 세 번 겪은 버그)
============================================================ */
.cycle-today { margin: -.6rem 0 1.2rem; font-size: .9rem; font-weight: 600; color: var(--ink); }
.cycle-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0 0 .9rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--ink); }
.cycle-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.cycle-legend span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.cycle-legend [data-phase="period"]::before { background: color-mix(in srgb, var(--brand-brown) 80%, transparent); }
.cycle-legend [data-phase="fertile"]::before { background: color-mix(in srgb, var(--lamp-green-bright) 45%, transparent); }
.cycle-legend [data-phase="ovulation"]::before { background: var(--lamp-green); }
.cycle-cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem 2rem; margin-bottom: .4rem; }
.cycle-cal__title { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; color: var(--ink); margin-bottom: .45rem; }
.cycle-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cycle-cal__head { text-align: center; font-family: var(--font-mono); font-size: .62rem; color: color-mix(in srgb, var(--ink) 60%, transparent); padding-bottom: .2rem; }
.cycle-cal__day {
aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
font-family: var(--font-mono); font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--ink);
}
.cycle-cal__day[data-phase="period"] { background: color-mix(in srgb, var(--brand-brown) 80%, transparent); color: var(--parchment-100); }
.cycle-cal__day[data-phase="fertile"] { background: color-mix(in srgb, var(--lamp-green-bright) 45%, transparent); }
.cycle-cal__day[data-phase="ovulation"] { background: var(--lamp-green); color: var(--parchment-100); font-weight: 700; }
.cycle-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--ink); }
/* 판면 위의 보조 버튼 (.ics 저장 등) — ResultActions 버튼과 같은 잉크 테두리 알약 */
.result-card .calc-submit--ghost {
display: inline-flex; margin: 1.2rem 0 0;
background: transparent; color: var(--ink);
border: 1px solid var(--ink); box-shadow: none;
font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: none;
}
.result-card .calc-submit--ghost:hover { background: var(--ink); color: var(--parchment-100); transform: none; box-shadow: none; }
.result-breakdown tr.is-past td { color: color-mix(in srgb, var(--ink) 45%, transparent); text-decoration: line-through; }
.result-breakdown thead th:last-child { text-align: right; }
.result-breakdown thead th { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; font-weight: 400; color: color-mix(in srgb, var(--ink) 65%, transparent); border-bottom: 1px solid var(--ink); }
/* 임신 진행 막대 — 40주 중 지금 어디쯤인지 */
.preg-progress { position: relative; height: 10px; margin: .2rem 0 2rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.preg-progress__bar { height: 100%; border-radius: 999px; background: var(--lamp-green); transition: width .6s var(--ease); }
.preg-progress span { position: absolute; top: 14px; translate: -50% 0; font-family: var(--font-mono); font-size: .6rem; color: color-mix(in srgb, var(--ink) 60%, transparent); }
.preg-progress span::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 10px; background: color-mix(in srgb, var(--ink) 35%, transparent); }
/* 홈 포스트잇 안의 도구 링크 목록 */
.postcard__links { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .45rem; }
/* .calc-field는 display:flex라 [hidden]을 덮어쓴다 — 성별·대상에 따라 숨기는 칸을 위해 명시 */
.calc-field[hidden] { display: none; }
/* 결과 표에서 "지금 내가 해당하는 줄" (혈압 분류·체지방 등급·감량 속도 비교) */
.result-breakdown tr.is-current td { background: color-mix(in srgb, var(--lamp-green-bright) 28%, transparent); font-weight: 700; }
.result-breakdown tr.is-current td:first-child { padding-left: .5rem; }
/* 판면 위 경고 문구 — 붉은 계열 토큰이 없어 고정 갈색(--brand-brown)으로 굵게 */
.cycle-today.is-alert { color: var(--brand-brown); }
.preg-progress__bar.is-over { background: var(--brand-brown); }
/* 금연 회복 타임라인 */
.milestones { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; }
.milestones li {
display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .8rem; align-items: baseline;
padding: .45rem .6rem; font-size: .88rem;
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.milestones li.is-reached { color: var(--ink); background: color-mix(in srgb, var(--lamp-green-bright) 22%, transparent); }
.milestones li.is-reached::after { content: "✓"; grid-column: 3; color: var(--lamp-green); font-weight: 700; }
.milestones__when { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }
/* 폼 라벨의 대문자 변환은 한글에는 아무 효과가 없고 단위만 망가뜨린다 (mmHg → MMHG, mg → MG).
health는 라벨마다 단위가 붙으므로 끈다. */
.calc-field label { text-transform: none; }
/* 애드센스가 광고를 못 채우면() 테두리만 남은 빈 액자가 되지 않게
액자째 숨긴다. 광고가 채워지기 전(로딩 중)에는 자리를 유지해 레이아웃이 튀지 않게 한다. */
.ad-frame:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
.ad-frame .frame__slot { min-height: 90px; }