/* ============================================================
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; }
/* 계산기 폼 · 결과 카드
2026-09-24 health 고도화: 라벨은 모노 대문자 대신 본문 서체(한글이 자간 벌어져 보이던 문제),
입력칸은 50px 높이·16px 글자(iOS가 16px 미만 입력칸에서 화면을 확대하는 문제),
폼과 결과 카드는 800px 폭 안으로(넓은 화면에서 입력칸이 한 줄로 길게 늘어지던 문제). */
.calc-form, .result-card { max-width: 800px; }
.calc-form {
--field-h: 50px;
position: relative;
margin-top: 1.8rem;
padding: clamp(1.3rem, 0.9rem + 1.8vw, 2.3rem);
background: var(--bg-raised);
border: 1px solid var(--line);
box-shadow: 0 30px 60px -44px var(--shadow);
}
/* 폼 위쪽 가장자리의 가는 황동 빛선 */
.calc-form::before {
content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 0%, transparent) 75%);
}
.calc-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.15rem 1.4rem; align-items: start; margin-bottom: 1.5rem;
}
.calc-row:last-child { margin-bottom: 0; }
.calc-field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.calc-field label {
font-family: var(--font-body); font-size: .86rem; font-weight: 500; letter-spacing: 0;
text-transform: none; color: var(--text-muted); line-height: 1.35;
}
.calc-field .hint { font-size: .78rem; line-height: 1.5; color: var(--text-faint); }
.calc-field__moneyhint {
display: block; min-height: 1.1em;
font-family: var(--font-body); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
color: var(--lamp-green-bright);
}
:root[data-lb-theme="light"] .calc-field__moneyhint { color: var(--accent); }
.calc-field input:not([type="hidden"]), .calc-field select, .calc-field textarea {
width: 100%; min-height: var(--field-h, 50px); padding: 0 .95rem;
background: var(--bg-sunken); color: var(--text);
border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent); border-radius: 0;
font-family: var(--font-body); font-size: 1rem; font-variant-numeric: tabular-nums;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.calc-field textarea { padding: .8rem .95rem; }
.calc-field input:not([type="hidden"]):hover, .calc-field select:hover { border-color: var(--line-strong); }
.calc-field input:focus-visible, .calc-field select:focus-visible, .calc-field textarea:focus-visible {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.calc-field input::placeholder { color: var(--text-faint); opacity: .75; }
/* 숫자칸 위아래 화살표 — 작고 조작하기 어려워 숨긴다(필요한 칸은 스테퍼를 붙였다) */
.calc-form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.calc-form input[type="number"]::-webkit-inner-spin-button,
.calc-form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field select {
appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer;
background-image:
linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
background-position: calc(100% - 21px) 52%, calc(100% - 16px) 52%;
background-size: 5px 5px; background-repeat: no-repeat;
}
.calc-field select option { background: var(--bg-raised); color: var(--text); }
.calc-toggle {
display: inline-flex; align-self: flex-start; max-width: 100%; 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; white-space: nowrap;
border-radius: 999px; min-height: 42px;
font-family: var(--font-body); font-size: .88rem; font-weight: 500; letter-spacing: 0; color: var(--text-muted);
padding: 0 1.15rem; transition: background-color .16s var(--ease), color .16s var(--ease), box-shadow .2s var(--ease);
}
.calc-toggle button:hover { background: var(--pill-soft-hover); color: var(--text); }
.calc-toggle button[aria-pressed="true"] {
background: var(--pill-bg); color: var(--pill-fg); font-weight: 600;
box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 12px var(--pill-glow-1);
}
.calc-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.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); min-height: 40px;
font-family: var(--font-body); font-size: .86rem; font-weight: 500;
padding: 0 1rem; 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); color: var(--text); }
.pill-group button[aria-pressed="true"] {
background: var(--pill-bg); color: var(--pill-fg); font-weight: 600;
box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 12px var(--pill-glow-1);
}
.calc-submit {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
min-height: 52px; margin-top: .3rem;
border: 0; background: var(--pill-bg); color: var(--pill-fg);
padding: 0 1.9rem; font-family: var(--font-body); font-size: .98rem; font-weight: 600; letter-spacing: .01em;
text-transform: none; 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-form > .calc-submit::after {
content: "→"; font-family: var(--font-body); transition: translate .2s var(--pill-spring, 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-form > .calc-submit:hover::after { translate: 3px 0; }
.calc-submit:active { transform: scale(0.97); }
.calc-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) { .calc-form > .calc-submit { width: 100%; } }
.result-card {
position: relative;
margin-top: 2rem; padding: clamp(1.4rem, 0.9rem + 2.2vw, 2.6rem);
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);
scroll-margin-top: calc(var(--header-h) + 20px);
}
.result-card[hidden] { display: none; }
.result-card.is-revealed { animation: lb-reveal .6s var(--ease) both; }
@keyframes lb-reveal { from { opacity: 0; transform: translateY(14px); } }
.result-headline {
display: block;
font-family: var(--font-body); font-size: .84rem; font-weight: 600; letter-spacing: .01em;
text-transform: none; color: var(--copper-soft);
}
.result-headline::before { content: ""; display: inline-block; vertical-align: middle; width: 20px; height: 1px; margin: 0 .55rem .2em 0; background: currentColor; }
.result-main-num {
font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem); line-height: 1.12;
color: var(--ink); margin: .45rem 0 1.2rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.result-sub { font-size: .93rem; line-height: 1.55; color: color-mix(in srgb, var(--ink) 74%, transparent); margin: -.5rem 0 1.4rem; }
.result-breakdown { width: 100%; border-collapse: collapse; }
.result-breakdown th, .result-breakdown td { padding: .72rem 0; text-align: left; border-bottom: 1px solid var(--plate-edge); font-size: .9rem; line-height: 1.45; }
.result-breakdown td + td { padding-left: 1rem; }
.result-breakdown td:last-child { text-align: right; font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-breakdown tr.total td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: none; padding-top: .85rem; }
.result-note {
font-size: .8rem; line-height: 1.7; color: color-mix(in srgb, var(--ink) 74%, transparent);
margin-top: 1.4rem; padding: .85rem 1rem;
background: color-mix(in srgb, var(--ink) 4%, transparent);
border-left: 2px solid color-mix(in srgb, var(--ink) 28%, transparent);
}
.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; }
/* 애드센스가 광고를 못 채우면() 테두리만 남은 빈 액자가 되지 않게
액자째 숨긴다. 광고가 채워지기 전(로딩 중)에는 자리를 유지해 레이아웃이 튀지 않게 한다. */
.ad-frame:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
.ad-frame .frame__slot { min-height: 90px; }
/* ============================================================
15. 입력 도구 — 날짜·시각 선택기, 개수 스테퍼, 음료 목록, 안내 글(prose)
loftbear-forms.js가 input[type=date|time], input[data-stepper]를 이 모양으로 바꿔 끼운다.
페이지 바탕(밤/낮) 위에 놓이므로 여기는 테마 토큰(--text, --accent, --pill-*)을 쓴다.
============================================================ */
:root, :root[data-lb-theme="dark"], :root[data-theme="dark"] {
--alert: #e39a7f;
--cal-sun: #e39a7f;
--cal-sat: var(--lamp-green-bright);
}
:root[data-lb-theme="light"], :root[data-theme="light"] {
--alert: #b0472a;
--cal-sun: #b0472a;
--cal-sat: var(--day-green-text);
}
/* ---------- 선택기 입력칸 ---------- */
.lb-picker { position: relative; }
.lb-picker__trigger {
width: 100%; min-height: var(--field-h, 50px);
display: flex; align-items: center; gap: .7rem; padding: 0 .95rem;
background: var(--bg-sunken); color: var(--text);
border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent); border-radius: 0;
font-family: var(--font-body); font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums;
text-align: left; cursor: pointer;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.lb-picker__trigger:hover { border-color: var(--line-strong); }
.lb-picker__trigger:focus-visible, .lb-picker__trigger[aria-expanded="true"] {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.lb-picker__trigger::after {
content: ""; margin-left: auto; flex: none; width: 7px; height: 7px;
border-right: 1.5px solid var(--text-faint); border-bottom: 1.5px solid var(--text-faint);
transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease);
}
.lb-picker__trigger[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.lb-picker__icon { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-picker__label.is-placeholder { color: var(--text-faint); font-weight: 400; }
.lb-picker.is-invalid .lb-picker__trigger { border-color: var(--alert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alert) 20%, transparent); }
.lb-field-error { font-size: .8rem; font-weight: 600; color: var(--alert); }
/* ---------- 팝오버 패널 ---------- */
.lb-picker__panel {
position: absolute; z-index: 45; top: calc(100% + 8px); left: 0;
width: 324px; max-width: calc(100vw - 2 * var(--gutter)); padding: 1rem 1rem .9rem;
background: var(--bg-raised); color: var(--text);
border: 1px solid var(--line-strong);
box-shadow: 0 30px 60px -18px var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
transform-origin: top left;
animation: lb-pop .2s var(--ease) both;
}
.lb-picker__panel[hidden] { display: none; }
.lb-picker__panel.is-above { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; }
@keyframes lb-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.lb-picker__head {
display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .8rem;
padding: 0 .2rem .85rem; margin-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.lb-picker__caption { grid-column: 1; font-size: .74rem; color: var(--text-faint); }
.lb-picker__value { grid-column: 1; font-family: var(--font-display); font-weight: 400; font-size: 1.32rem; line-height: 1.3; color: var(--accent); }
.lb-picker__close {
grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; border: 0; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
background: var(--pill-soft-bg); color: var(--text-muted);
transition: background-color .15s var(--ease), color .15s var(--ease);
}
.lb-picker__close:hover { background: var(--pill-soft-hover); color: var(--text); }
.lb-picker__close svg, .lb-cal__navbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- 달력 ---------- */
.lb-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.lb-cal__navbtn {
width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
background: transparent; color: var(--text); transition: background-color .15s var(--ease);
}
.lb-cal__navbtn:hover:not(:disabled) { background: var(--pill-soft-hover); }
.lb-cal__navbtn:disabled { opacity: .25; cursor: default; }
.lb-cal__title {
display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: 999px; cursor: pointer;
background: transparent; color: var(--text); padding: .45rem .85rem;
font-family: var(--font-body); font-size: .96rem; font-weight: 600; font-variant-numeric: tabular-nums;
transition: background-color .15s var(--ease);
}
.lb-cal__title::after {
content: ""; width: 5px; height: 5px; border-right: 1.5px solid var(--text-faint); border-bottom: 1.5px solid var(--text-faint);
transform: translateY(-2px) rotate(45deg);
}
.lb-cal__title:hover { background: var(--pill-soft-bg); }
.lb-picker__panel[data-mode="years"] .lb-cal__title::after { display: none; }
.lb-cal__weekhead, .lb-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lb-cal__weekhead[hidden], .lb-cal__grid[hidden], .lb-cal__chips[hidden] { display: none; }
.lb-cal__weekhead span { text-align: center; font-size: .72rem; font-weight: 500; color: var(--text-faint); padding: .35rem 0 .3rem; }
.lb-cal__weekhead .is-sun { color: var(--cal-sun); }
.lb-cal__weekhead .is-sat { color: var(--cal-sat); }
.lb-cal__day {
position: relative; aspect-ratio: 1; width: 100%; border: 0; border-radius: 50%; cursor: pointer;
display: grid; place-items: center;
background: transparent; color: var(--text);
font-family: var(--font-body); font-size: .9rem; font-weight: 500; font-variant-numeric: tabular-nums;
transition: background-color .14s var(--ease), color .14s var(--ease), box-shadow .2s var(--ease);
}
.lb-cal__day.is-sun { color: var(--cal-sun); }
.lb-cal__day.is-sat { color: var(--cal-sat); }
.lb-cal__day.is-outside { opacity: .38; }
.lb-cal__day:hover:not(:disabled):not(.is-selected) { background: var(--pill-soft-hover); }
.lb-cal__day.is-today::after {
content: ""; position: absolute; left: 50%; bottom: 12%; width: 4px; height: 4px; border-radius: 50%;
translate: -50% 0; background: var(--accent);
}
.lb-cal__day.is-selected {
background: var(--pill-bg); color: var(--pill-fg); font-weight: 700; opacity: 1;
box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 14px var(--pill-glow-1);
}
.lb-cal__day.is-selected::after { background: var(--pill-fg); }
.lb-cal__day:disabled { opacity: .2; cursor: not-allowed; }
.lb-cal__day:focus-visible, .lb-cal__chip:focus-visible, .lb-picker__panel button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lb-cal__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: .3rem 0; }
.lb-cal__chip {
min-height: 46px; border: 0; border-radius: 999px; cursor: pointer;
background: var(--pill-soft-bg); color: var(--text);
font-family: var(--font-body); font-size: .9rem; font-weight: 500; font-variant-numeric: tabular-nums;
transition: background-color .14s var(--ease), color .14s var(--ease), box-shadow .2s var(--ease);
}
.lb-cal__chip:hover:not(:disabled):not(.is-selected) { background: var(--pill-soft-hover); }
.lb-cal__chip.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.lb-cal__chip.is-selected { background: var(--pill-bg); color: var(--pill-fg); font-weight: 700; box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 12px var(--pill-glow-1); }
.lb-cal__chip:disabled { opacity: .28; cursor: not-allowed; }
.lb-picker__foot {
display: flex; align-items: center; gap: .4rem;
margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line);
}
.lb-picker__chip {
min-height: 36px; padding: 0 1rem; border: 0; border-radius: 999px; cursor: pointer;
background: var(--pill-soft-bg); color: var(--text);
font-family: var(--font-body); font-size: .84rem; font-weight: 500;
transition: background-color .14s var(--ease), color .14s var(--ease);
}
.lb-picker__chip:hover { background: var(--pill-soft-hover); }
.lb-picker__chip--quiet { background: transparent; color: var(--text-muted); }
.lb-picker__done {
margin-left: auto; min-height: 38px; padding: 0 1.3rem; border: 0; border-radius: 999px; cursor: pointer;
background: var(--pill-bg); color: var(--pill-fg);
font-family: var(--font-body); font-size: .86rem; font-weight: 600;
box-shadow: inset 0 0 0 1px var(--pill-ring), 0 0 12px var(--pill-glow-1);
}
.lb-picker__done:disabled { opacity: .35; cursor: default; box-shadow: none; }
/* ---------- 시각 ---------- */
.lb-time__seg {
display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin-bottom: .9rem;
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);
}
.lb-time__seg button {
min-height: 40px; border: 0; border-radius: 999px; cursor: pointer;
background: transparent; color: var(--text-muted);
font-family: var(--font-body); font-size: .9rem; font-weight: 600;
transition: background-color .16s var(--ease), color .16s var(--ease), box-shadow .2s var(--ease);
}
.lb-time__seg 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); }
.lb-time__cap { display: block; margin: .15rem .2rem .45rem; font-size: .74rem; color: var(--text-faint); }
.lb-time__hours, .lb-time__mins { grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 0 0 .6rem; }
.lb-time__hours .lb-cal__chip, .lb-time__mins .lb-cal__chip { min-height: 40px; padding: 0; }
/* ---------- 모바일: 아래에서 올라오는 시트 ---------- */
.lb-picker-backdrop {
position: fixed; inset: 0; z-index: 90;
background: color-mix(in srgb, #000 48%, transparent);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
animation: lb-fade .2s ease both;
}
.lb-picker-backdrop[hidden] { display: none; }
@keyframes lb-fade { from { opacity: 0; } }
.lb-picker__panel.is-sheet {
position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; top: auto;
width: auto; max-width: none; max-height: 90vh; overflow-y: auto;
padding: .7rem 1.15rem calc(1rem + env(safe-area-inset-bottom));
border-width: 1px 0 0; border-radius: 16px 16px 0 0;
transform-origin: bottom center;
animation: lb-sheet .3s var(--ease) both;
}
.lb-picker__panel.is-sheet::before {
content: ""; display: block; width: 40px; height: 4px; margin: 0 auto .9rem;
border-radius: 2px; background: var(--line-strong);
}
.lb-picker__panel.is-sheet .lb-cal__grid, .lb-picker__panel.is-sheet .lb-cal__weekhead { max-width: 420px; margin-inline: auto; }
.lb-picker__panel.is-sheet .lb-cal__day { font-size: 1rem; }
@keyframes lb-sheet { from { transform: translateY(100%); } }
html.lb-sheet-open { overflow: hidden; }
/* ---------- 개수 스테퍼 ---------- */
.lb-stepper {
display: inline-grid; grid-template-columns: 44px minmax(3rem, 1fr) 44px; align-self: flex-start;
height: 44px; background: var(--bg-sunken);
border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.calc-field .lb-stepper { width: 100%; height: var(--field-h, 50px); grid-template-columns: 50px 1fr 50px; }
.lb-stepper:hover { border-color: var(--line-strong); }
.lb-stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.lb-stepper input,
.calc-field .lb-stepper input:not([type="hidden"]) {
min-width: 0; width: 100%; height: 100%; min-height: 0; padding: 0;
border: 0; background: transparent; box-shadow: none; outline: none;
color: var(--text); text-align: center;
font-family: var(--font-body); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.lb-stepper__btn {
display: grid; place-items: center; border: 0; cursor: pointer;
background: transparent; color: var(--text);
transition: background-color .14s var(--ease), color .14s var(--ease);
}
.lb-stepper__btn:hover:not(:disabled) { background: var(--pill-soft-hover); }
.lb-stepper__btn:active:not(:disabled) { background: var(--pill-soft-edge); }
.lb-stepper__btn:disabled { opacity: .28; cursor: default; }
.lb-stepper__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lb-stepper__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* ---------- 음료 목록 (카페인·음주) ---------- */
.drink-list {
min-width: 0; margin: 0 0 1.5rem; padding: 0; border: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 1.8rem;
}
.drink-list legend {
display: flex; align-items: baseline; gap: .7rem; padding: 0; margin-bottom: .35rem;
font-size: .86rem; font-weight: 500; color: var(--text-muted);
}
.drink-list__total { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.drink-row {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.drink-row label { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.drink-row__name { font-size: .96rem; font-weight: 500; color: var(--text); transition: color .15s var(--ease); }
.drink-row__meta { font-size: .76rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.drink-row .lb-stepper { flex: none; height: 40px; grid-template-columns: 40px 3rem 40px; }
.drink-row.is-active .drink-row__name { color: var(--accent); font-weight: 600; }
.drink-row.is-active .lb-stepper { border-color: var(--accent); }
/* ---------- 안내 글 (계산 방법 · FAQ) ---------- */
.prose { max-width: var(--measure); color: var(--text-muted); font-size: 1rem; line-height: 1.8; }
.prose h2 {
font-family: var(--font-display); font-weight: 400; color: var(--text);
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin: 2.6rem 0 .9rem;
}
.prose > h2:first-child { margin-top: .5rem; }
.prose h3 { font-size: 1.06rem; color: var(--text); margin: 1.8rem 0 .5rem; }
.prose p { margin: 0 0 1rem; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose ol, .prose ul { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose li { margin: .4rem 0; padding-left: .2rem; }
.prose li::marker { color: var(--accent); font-weight: 600; }
/* FAQ — 본문 전체가 굵은 글씨 한 덩이인 문단(**Q. …**)을 질문 머리로 */
.prose p:has(> strong:only-child) {
margin: 1.9rem 0 .45rem; padding-top: 1.35rem; border-top: 1px solid var(--line);
font-size: 1.04rem; line-height: 1.55;
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--line); }
.prose th { color: var(--text); font-weight: 600; border-bottom-color: var(--line-strong); }
.prose blockquote { margin: 0 0 1.2rem; padding: .2rem 0 .2rem 1rem; border-left: 2px solid var(--accent-strong); font-style: italic; }
/* ---------- 판면 위 달력·범례의 한글 라벨 — 모노 서체 자간 대신 본문 서체 ---------- */
.cycle-legend { font-family: var(--font-body); font-size: .8rem; letter-spacing: 0; }
.cycle-cal__title { font-family: var(--font-body); font-size: .9rem; font-weight: 600; letter-spacing: 0; }
.cycle-cal__head { font-family: var(--font-body); font-size: .7rem; }
.cycle-cal__day { font-family: var(--font-body); font-size: .8rem; font-weight: 500; }
.result-breakdown thead th { font-family: var(--font-body); font-size: .74rem; letter-spacing: 0; font-weight: 500; }
.milestones__when { font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: 0; }
.cycle-today { font-size: .95rem; }
.result-card .calc-submit--ghost { font-family: var(--font-body); font-size: .84rem; font-weight: 500; letter-spacing: 0; min-height: 42px; }
@media (prefers-reduced-motion: reduce) {
.lb-picker__panel, .lb-picker__panel.is-sheet, .lb-picker-backdrop, .result-card.is-revealed { animation: none; }
}
/* ---------- 한글이 들어가는 링크·표 제목 — 모노 서체는 한글 자간이 벌어져 보여 본문 서체로 ---------- */
a.more, .postcard .more {
font-family: var(--font-body); font-size: .86rem; font-weight: 500; letter-spacing: 0;
}
table.ledger td.day-num { font-family: var(--font-body); font-size: .92rem; font-weight: 600; }
table.ledger td a { color: var(--accent); text-decoration: none; font-size: .86rem; font-weight: 500; white-space: nowrap; }
table.ledger td a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 계산기 제목 바로 아래 계산기 — 두 section의 위아래 여백이 겹쳐 폼이 너무 멀리 떨어져 보였다 */
.calc-section { padding-top: 0; }