/* vitascoop — common.css (단일 소스)
* 디자인: "1b 소프트 사이언스" — 그래파이트/민트 팔레트 + 그로테스크 타이포 + 라운드 카드.
* 색은 무조건 CSS 변수로. SVG/아이콘은 currentColor.
*/
/* 본문 Pretendard + 제목·숫자 Space Grotesk(라틴/숫자). @import 는 반드시 최상단. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* ── 0. 테마 변수 — "1b 소프트 사이언스" (리디자인 채택안, 2026-07)
* - Brand = mint (#12b886). 링크·1차 액션·강조를 모두 담당 (구 오렌지 역할 승계).
* - Neutral = graphite (warm stone → cool graphite 로 교체).
* - 의미색: 좋음/성공=민트, 주의/간섭=앰버, 위험/상극=코럴. 핑크 미사용.
* ─────────────────────────────────────────────────── */
:root {
/* ── Tier 3 — Neutral surfaces (soft graphite) ── */
--bg: #eceef2;
--bg-elevated: #f3f5f8;
--bg-panel: #ffffff;
--bg-inset: #f3f5f8; /* form field·sunken */
--bg-terminal: #0c0e12;
--card-bg: #ffffff;
/* ── Tier 3 — Text (graphite) ── */
--text: #10141c;
--text-secondary: #454d5c;
--text-muted: #8b93a2;
--text-faint: #aab2c0; /* decorative */
--text-inverse: #ffffff;
/* ── Tier 3 — Borders ── */
--border-subtle: #eef0f4;
--border: #e5e8ee;
--border-strong: #c3c9d4;
--border-soft: var(--border-subtle);
/* ── Tier 1 — Brand (mint) ── */
--brand-accent: #12b886;
--brand-accent-2: #0e9e73; /* hover */
--brand-accent-soft: rgba(18, 184, 134, 0.10);
--brand-accent-fg: #ffffff;
--brand-accent-strong: var(--brand-accent-2);
/* ── 그래파이트 잉크 — 1차 CTA·클리니컬 톤 ── */
--ink-strong: #0f1620;
/* ── dataviz — 민트 4단 램프 (도넛 세그먼트 전용) ── */
--dviz-1: #0e9e73;
--dviz-2: #12b886;
--dviz-3: #46c9a0;
--dviz-4: #8fe0c6;
/* ── Tier 2b — Accent warm (amber, LIVE·tip·주의) ── */
--accent-warm: #d9920b;
--accent-warm-soft: #eab308;
--accent-warm-bg: rgba(217, 146, 11, 0.10);
--accent-warm-border: rgba(217, 146, 11, 0.30);
/* ── Tier 4 — Semantic ── */
--success: #12b886;
--success-soft: rgba(18, 184, 134, 0.12);
--warn: #d9920b;
--warn-soft: rgba(217, 146, 11, 0.12);
--danger: #ff6b57; /* coral */
--danger-soft: rgba(255, 107, 87, 0.12);
--info: #3b82f6;
--info-soft: rgba(59, 130, 246, 0.12);
--ok: var(--success);
--err: var(--danger);
--up: #c9263e; /* KR 상승 red (거의 미사용) */
--down: #1f56b5; /* KR 하락 blue */
--flat: var(--text-muted);
/* ── Surface tints (영역별 분기, 선택적) ── */
--bg-tint-cool: #eef7f4; /* mint-tinted 데이터 영역 */
--bg-tint-warm: #fdf8ec; /* amber-tinted 에디토리얼 */
/* ── 그래프 스테이지 (synergy 네트워크) ── */
--graphbg: #f3f5f8;
/* ── 기타 ── */
--shadow: 0 8px 28px -8px rgba(20, 30, 45, 0.14);
--shadow-lg: 0 24px 64px -16px rgba(20, 30, 45, 0.28); /* 모달·드롭다운 등 떠 있는 레이어 */
/* 라디우스 4단 — xs(칩·인라인) / sm(입력·소형) / 기본(카드) / lg(패널·히어로). 그 밖은 999px pill */
--radius: 14px;
--radius-sm: 10px;
--radius-xs: 6px;
--radius-lg: 18px;
--gap: 16px;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
--font-display: "Space Grotesk", "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
[data-theme="dark"] {
/* ── Tier 3 — Neutral surfaces (dark graphite) ── */
--bg: #0c0e12;
--bg-elevated: #14171d;
--bg-panel: #14171d;
--bg-inset: #1a1e26;
--bg-terminal: #06070a;
--card-bg: var(--bg-panel);
/* ── Tier 3 — Text (dark) ── */
--text: #eef1f6;
--text-secondary: #aab2c0;
--text-muted: #727a89;
--text-faint: #5a6270;
--text-inverse: #0c0e12;
/* ── Tier 3 — Borders (dark) ── */
--border-subtle: #1c2029;
--border: #242932;
--border-strong: #39414d;
--border-soft: var(--border-subtle);
/* ── Tier 1 — Brand (mint, dark 에서 밝게) ── */
--brand-accent: #2ee6a6;
--brand-accent-2: #12b886;
--brand-accent-soft: rgba(46, 230, 166, 0.14);
--brand-accent-fg: #08120d; /* mint 배경 위 dark text */
--brand-accent-strong: var(--brand-accent-2);
/* ── 그래파이트 잉크 (dark 에서는 반전) ── */
--ink-strong: #eef1f6;
/* ── dataviz — 민트 4단 램프 (dark) ── */
--dviz-1: #8fe0c6;
--dviz-2: #46c9a0;
--dviz-3: #2ee6a6;
--dviz-4: #12b886;
/* ── Tier 2b — Accent warm (amber dark) ── */
--accent-warm: #fbbf24;
--accent-warm-soft: #fcd34d;
--accent-warm-bg: rgba(251, 191, 36, 0.12);
--accent-warm-border: rgba(251, 191, 36, 0.30);
/* ── Tier 4 — Semantic (dark) ── */
--success: #2ee6a6;
--success-soft: rgba(46, 230, 166, 0.18);
--warn: #fbbf24;
--warn-soft: rgba(251, 191, 36, 0.16);
--danger: #ff7d6a;
--danger-soft: rgba(255, 125, 106, 0.18);
--info: #60a5fa;
--info-soft: rgba(96, 165, 250, 0.18);
--up: #e84a63;
--down: #5b9bed;
/* ── Surface tints (dark) ── */
--bg-tint-cool: #0d1a17;
--bg-tint-warm: #1c1708;
--graphbg: #101319;
--shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
}
/* ── 1. reset / base ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
/* Pretendard 를 맨 앞에 — -apple-system 이 앞서면 애플 기기에서 웹폰트가 무시됨 */
font: 16px/1.55 "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
font-feature-settings: "tnum";
overflow-x: clip;
}
img, svg, iframe { max-width: 100%; height: auto; }
/* ── 1a. 디스플레이 타이포 — 제목·큰 숫자는 Space Grotesk(라틴/숫자) + Pretendard(한글) ──
숫자가 서는 자리는 tabular-nums 로 자릿수 흔들림 제거. */
h1, h2, h3,
.site-header__brand-name,
.page-header__title,
.section__title,
.card__title,
.result__value,
.dash__title,
.cat-block__title {
font-family: var(--font-display);
letter-spacing: -0.01em;
}
.result__value,
.roadmap-stat__num,
.cl-bar__val,
.clstat b,
.stat-tile__num {
font-variant-numeric: tabular-nums;
}
/* Brand=neutral 톤이라 link 가 회색 — 발견성 위해 본문 안 a 는 underline 기본 노출.
nav·card·button 형태의 a 는 별도 클래스로 underline 제거. */
a { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: var(--border-strong); }
a:hover { text-decoration-color: var(--brand-accent); }
/* nav·card·button 형태 a 는 underline 제거 (별도 표시) */
.site-header a, .related-link, .recent-strip__item, .aside-cat-list a, .breadcrumb a,
.back-btn, .hero-search a, .preset,
.mini-list a, .related-grid a, .site-footer a {
text-decoration: none;
}
.site-header a:hover, .breadcrumb a:hover, .site-footer a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-elevated); padding: 1px 6px; border-radius: var(--radius-xs); }
/* ── 2. layout ────────────────────────────────────── */
.site-header {
/* z-index 200: hero-search(100) 위 — 모바일 카테고리 드롭다운(.cat-menu)이 검색칸 뒤로 열리는 문제 해결.
hero-search 자동완성(1000)·토스트(1000)·검색 모달(9999)은 그대로 헤더 위 유지 */
position: sticky; top: 0; z-index: 200;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.site-header__inner {
max-width: 1480px; margin: 0 auto;
padding: 0 32px;
height: 72px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
@media (max-width: 768px) {
/* 머니스쿱과 동일 — height 60, gap 12 */
.site-header__inner { height: 60px; gap: 12px; padding: 0 16px; }
}
.site-header__brand {
font-weight: 700; font-size: 18px; color: var(--text) !important;
letter-spacing: -0.01em; text-decoration: none;
}
.site-header__brand:hover { text-decoration: none; }
.site-header__brand small {
display: block; font-size: 11px; color: var(--text-muted); font-weight: 400;
letter-spacing: 0;
}
.header-tools {
display: flex; align-items: center; gap: 6px;
}
.header-tools button {
background: transparent; border: 1px solid var(--border); color: var(--text);
width: 36px; height: 36px; border-radius: var(--radius);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
}
.header-tools button:hover { background: var(--brand-accent-soft); }
.header-tools svg { width: 18px; height: 18px; }
main {
max-width: 720px; margin: 0 auto;
padding: 24px 16px 64px;
}
.wide {
max-width: 1480px;
padding: 24px 32px 64px;
}
@media (max-width: 768px) {
.wide { padding: 16px 16px 48px; }
}
.site-footer {
border-top: 1px solid var(--border);
margin-top: 64px;
padding: 24px 16px;
text-align: center; color: var(--text-muted); font-size: 13px;
}
.site-footer > div + div { margin-top: 6px; }
.site-footer__policy {
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.01em;
}
.site-footer__policy a { color: var(--text-secondary); }
.site-footer__policy a:hover { color: var(--brand-accent); }
/* 정책 링크 — about/methodology/disclaimer/privacy/contact 푸터 일관 표시 */
.site-footer__links {
margin-top: 8px;
display: inline-flex; flex-wrap: wrap; justify-content: center;
gap: 6px;
font-size: 12px;
}
.site-footer__links a {
color: var(--text-secondary); text-decoration: none;
}
.site-footer__links a:hover { color: var(--brand-accent); text-decoration: underline; }
.site-footer__links .site-footer__sep { color: var(--text-muted); user-select: none; }
/* ── 3. breadcrumb ───────────────────────────────── */
.breadcrumb {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 14px;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-accent); }
.breadcrumb .sep { margin: 0 8px; color: var(--text-faint); }
/* ── 4. page-header ──────────────────────────────── */
.page-header { margin-bottom: 20px; }
.page-header__label {
font-family: var(--font-mono);
font-size: 11px; color: var(--brand-accent);
letter-spacing: 0.18em; text-transform: uppercase;
margin-bottom: 6px;
}
/* 시안의 38px 데스크톱 / 28px 모바일을 clamp 로 연속 보간 */
.page-header__title {
margin: 0 0 12px; font-size: clamp(28px, 4.2vw, 38px); line-height: 1.1;
letter-spacing: -0.02em; font-weight: 700;
}
.page-header__desc {
color: var(--text-secondary); font-size: 16px; line-height: 1.7; margin: 0;
max-width: 40em;
}
.page-header__tag {
display: inline-flex; align-items: center; gap: 6px;
margin-left: 10px;
padding: 3px 10px;
background: var(--brand-accent-soft);
color: var(--brand-accent);
border-radius: 999px;
font-size: 12px; font-weight: 600;
letter-spacing: 0.01em;
}
.page-header__tag-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--brand-accent);
animation: pipe-pulse 1.6s infinite;
flex-shrink: 0;
}
@media (max-width: 600px) {
.page-header__tag { font-size: 11px; padding: 2px 8px; margin-left: 0; margin-top: 4px; }
}
/* ── 5. card / section ───────────────────────────── */
.card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.card__title {
margin: 0 0 12px; font-size: 16px; font-weight: 600;
}
.card__desc { color: var(--text-secondary); font-size: 14px; margin: 0; }
.section {
padding: 28px 0;
border-top: 1px solid var(--border);
}
.section--first { border-top: 0; padding-top: 0; }
.section__title {
margin: 0 0 16px; font-size: 20px; font-weight: 700;
letter-spacing: -0.01em;
}
.section__title small {
font-weight: 400; color: var(--text-muted); font-size: 13px; margin-left: 6px;
}
.section__lead {
color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin: 0 0 14px;
}
/* ── 5a. 형태·인터랙션 (1b) ──
카드류는 라운드 14 + 소프트 섀도, hover 시 2px 부상 + 민트 테두리.
transform 은 hover 가능한 포인터에서만 — 터치 기기에서 sticky hover 잔상 방지. */
@media (hover: hover) {
.card:hover,
.related-link:hover,
.nut-item:hover,
.reco:hover {
transform: translateY(-2px);
border-color: var(--brand-accent);
}
}
.card, .related-link, .nut-item, .reco {
transition: transform 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn, .hero-search__btn { border-radius: var(--radius); }
.badge, .preset, .chip { border-radius: 999px; }
/* ── 6. form ──────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field__label {
font-size: 13px; color: var(--text); font-weight: 600;
display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
/* 한국어 라벨 단어 단위 줄바꿈 (음절 단위 끊김 방지).
v1.3.4 — 메인 라벨 nowrap 은 .field--inline 에서만 적용. 풀폭 .field 의 긴 라벨(36자+)
은 자연 wrap 허용 (모바일 horizontal scroll 차단). */
.field__label > span { word-break: keep-all; }
/* 짧은 라벨 + 컴팩트 input 한 줄 배치 — 환율표 같이 여러 행이 반복되는 표 형태에 사용.
v1.3.2 정책 — label 컬럼 폭 auto-fit + 메인 라벨/hint 세로 스택 (기존 space-between 무력화).
메인 라벨은 절대 줄바꿈 X. hint 는 컬럼 폭 안에서 자연 wrap (최대 2줄 clamp). */
.field--inline { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: nowrap; }
.field--inline > .field__label {
flex: 0 1 auto;
min-width: 96px;
max-width: 220px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
}
.field--inline > .field__label > span:first-child {
white-space: nowrap;
line-height: 1.3;
}
.field--inline > .field__label .field__hint {
margin-left: 0;
font-size: 11px;
line-height: 1.3;
white-space: normal;
word-break: keep-all;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.field--inline > .input-row { flex: 1 1 auto; min-width: 0; max-width: none; }
@media (max-width: 480px) {
.field--inline { gap: 8px; }
.field--inline > .field__label { min-width: 86px; max-width: 55%; font-size: 12px; }
.field--inline > .field__label .field__hint { font-size: 10.5px; }
}
.field__label .field__hint { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.field__hint--block { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* ── 입력 폰트 정책 v1.3 (전 페이지 통일) ──
가독성 + 일관성. 시스템 폰트 우선·tnum·살짝 굵게. */
.input, select, textarea {
width: 100%; padding: 10px 12px;
background: var(--bg); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius);
font-family: -apple-system, "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
font-size: 15px;
font-weight: 500;
font-feature-settings: 'tnum' on, 'ss01' on;
letter-spacing: -0.005em;
line-height: 1.4;
transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder, textarea::placeholder { color: var(--text-muted); font-weight: 400; }
.input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--brand-accent);
box-shadow: 0 0 0 3px var(--brand-accent-soft);
}
.input--right { text-align: right; font-variant-numeric: tabular-nums; }
.input--mono { font-family: var(--font-mono); font-weight: 600; }
/* 입력 row — flex 항목들 한 줄 강제 (입력박스·suffix·reset 버튼 등 wrap 차단) */
.input-row {
display: flex; align-items: center; gap: 8px;
flex-wrap: nowrap; min-width: 0;
}
.input-row > .input,
.input-row > select,
.input-row > textarea { flex: 1 1 0; min-width: 60px; }
.input-row > .input-reset,
.input-row > .input-row__suffix { flex-shrink: 0; }
.input-row__suffix {
color: var(--text-muted); font-size: 13px; font-weight: 500;
padding: 0 6px; white-space: nowrap;
}
.input-row--equal {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px;
}
/* preset chip buttons (자주 쓰는 값 1-click 채움) */
.preset-row {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 6px;
}
.preset {
display: inline-flex; align-items: center;
padding: 4px 10px; min-height: 26px;
background: var(--bg-elevated);
border: 1px solid var(--border); border-radius: 999px;
font-size: 12px; color: var(--text-secondary);
cursor: pointer; transition: all 0.15s;
font-family: var(--font-mono);
white-space: nowrap; /* preset 버튼 텍스트 내부 줄바꿈 방지 (예: "5,500만 (130%)") */
}
.preset:hover {
border-color: var(--brand-accent); color: var(--brand-accent);
}
.preset--active {
background: var(--brand-accent-soft);
border-color: var(--brand-accent);
color: var(--brand-accent); font-weight: 600;
}
/* radio group (mode toggle 등) */
.radio-group {
display: flex; flex-wrap: wrap; gap: 6px;
}
.radio-group input { position: absolute; opacity: 0; pointer-events: none; }
.radio-group label {
display: inline-flex; align-items: center; justify-content: center;
padding: 8px 14px; min-height: 38px;
background: var(--bg-elevated);
border: 1px solid var(--border); border-radius: var(--radius);
font-size: 13px; color: var(--text-secondary);
cursor: pointer; transition: all 0.15s;
flex: 1; min-width: 100px;
white-space: nowrap; /* 라디오 라벨 내부 줄바꿈 방지 ("외벌이 / 한부모" 같은 라벨이 두 줄 됨 X) */
word-break: keep-all;
text-align: center;
}
.radio-group input:checked + label {
background: var(--brand-accent-soft);
border-color: var(--brand-accent);
color: var(--brand-accent); font-weight: 600;
}
/* ── 7. button ────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 16px; min-height: 40px;
background: transparent; color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius);
font: inherit; cursor: pointer;
transition: background 0.15s;
}
.btn:hover { background: var(--brand-accent-soft); }
.btn--primary {
background: var(--brand-accent); color: var(--brand-accent-fg); border-color: var(--brand-accent);
}
.btn--primary:hover { filter: brightness(1.05); background: var(--brand-accent); }
.btn--block { width: 100%; }
.btn--small { padding: 6px 10px; min-height: 32px; font-size: 13px; }
/* ── 8. result ───────────────────────────────────── */
.result {
background: var(--brand-accent-soft);
border: 1px solid var(--brand-accent);
border-radius: var(--radius);
padding: 18px;
margin: 0 0 12px;
}
.result__label {
font-family: var(--font-mono);
font-size: 11px; color: var(--brand-accent);
letter-spacing: 0.14em; text-transform: uppercase;
margin-bottom: 4px;
}
.result__value {
font-size: 32px; font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums; line-height: 1.1;
letter-spacing: -0.02em;
}
.result__sub {
font-size: 13px; color: var(--text-secondary); margin-top: 6px;
line-height: 1.5;
}
/* 연령대·성별 등 추가 입력에 따른 보정 안내 — 결과 카드 안 보조 라인 */
/* 라벨 옆 인라인 보조 텍스트 ("선택"·"가점"·"만 19세 미만" 등).
v1.3 — chip 스타일로 시각 정돈. (선택)/(필수) 자동 강조 변형 추가. */
.field__hint-inline {
display: inline-block;
padding: 1px 7px;
border-radius: var(--radius-xs);
background: var(--bg-elevated);
color: var(--text-muted);
font-size: 10px; font-weight: 500;
letter-spacing: 0.02em;
vertical-align: middle;
margin-left: 6px;
white-space: nowrap;
}
/* 필수 표기 chip (라벨에 명시 시: 필수) */
.field__hint-inline--required {
color: var(--danger);
background: var(--danger-soft);
}
/* 선택 표기 chip — 기본 hint-inline 보다 한 톤 더 약화 */
.field__hint-inline--optional,
.field__hint-inline[data-kind="optional"] {
color: var(--text-faint);
background: transparent;
border: 1px dashed var(--border);
}
.result--neutral {
background: var(--bg-elevated);
border-color: var(--border);
}
.result--success { background: var(--success-soft); border-color: var(--success); }
.result--success .result__label { color: var(--success); }
.result--warn { background: var(--warn-soft); border-color: var(--warn); }
.result--warn .result__label { color: var(--warn); }
.result--danger { background: var(--danger-soft); border-color: var(--danger); }
.result--danger .result__label { color: var(--danger); }
/* breakdown grid (3-4 보조 결과) */
.breakdown {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 6px;
margin: 10px 0;
}
.breakdown__cell {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 10px;
text-align: center;
}
.breakdown__label {
font-family: var(--font-mono);
font-size: 10px; color: var(--text-muted);
letter-spacing: 0.1em; text-transform: uppercase;
margin-bottom: 3px;
}
.breakdown__value {
font-size: 16px; font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums;
}
/* horizontal bar (분류 시각화) */
.bar {
position: relative;
height: 28px;
background: var(--bg-elevated);
border-radius: var(--radius-xs);
overflow: hidden;
margin: 14px 0 8px;
display: flex;
}
.bar__seg {
flex: 1;
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: var(--text-secondary);
font-family: var(--font-mono);
border-right: 1px solid var(--border-soft);
}
.bar__seg:last-child { border-right: 0; }
.bar__marker {
position: absolute; top: -4px; bottom: -4px; width: 3px;
background: var(--brand-accent);
box-shadow: 0 0 0 1px var(--bg);
transform: translateX(-50%);
transition: left 0.3s;
}
.bar__scale {
display: flex; justify-content: space-between;
font-family: var(--font-mono); font-size: 10px;
color: var(--text-muted);
}
/* ── 9. badge ────────────────────────────────────── */
.badge {
display: inline-block;
padding: 2px 8px;
font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
background: var(--brand-accent-soft); color: var(--brand-accent);
border-radius: 999px;
}
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--info { background: var(--info-soft); color: var(--info); }
/* ── 10. formula box / help table ────────────────── */
.formula {
display: inline-block;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 14px;
margin: 8px 0;
font-family: var(--font-mono); font-size: 14px;
color: var(--brand-accent);
}
.formula--block { display: block; }
.help-table {
width: 100%; border-collapse: collapse;
font-size: 14px; margin: 8px 0;
}
.help-table th, .help-table td {
text-align: left; padding: 8px 10px;
border-bottom: 1px solid var(--border);
}
.help-table th {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-muted); font-weight: 600;
background: var(--bg-elevated);
}
.help-table td.num {
font-family: var(--font-mono); text-align: right;
font-variant-numeric: tabular-nums;
}
.help-table tr:last-child td { border-bottom: 0; }
/* breakdown list (연도별 누적 등) */
.timeseries {
width: 100%; border-collapse: collapse; font-size: 13px;
font-variant-numeric: tabular-nums;
}
.timeseries th, .timeseries td {
padding: 6px 10px; text-align: right;
border-bottom: 1px solid var(--border-soft);
}
.timeseries th:first-child, .timeseries td:first-child { text-align: left; }
.timeseries th {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--text-muted); font-weight: 600;
border-bottom: 1px solid var(--border);
}
/* ── 10a-1. tool-search-label (도구 내부 검색 범위 캡션) ────────── */
.tool-search-label { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
/* ── 10b. hero-search (통합 검색 + 자동완성) ────────── */
.hero-search {
position: relative;
/* focus-within 의 transform 으로 form 이 자체 stacking context 가 되므로, 형제 .layout-2col 보다 위에 그려지도록 z-index 부여. 이게 없으면 dropdown 의 z-index:1000 도 form 안에 갇혀 layout-2col 자식들이 위로 페인트된다. */
z-index: 100;
display: flex; align-items: center; gap: 8px;
background: var(--card-bg);
border: 2px solid var(--brand-accent);
border-radius: var(--radius-lg);
padding: 8px 8px 8px 20px;
margin: 16px 0 12px;
box-shadow: var(--shadow);
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.hero-search:focus-within {
z-index: 1000;
box-shadow: 0 0 0 4px var(--brand-accent-soft), var(--shadow);
transform: translateY(-1px);
}
.hero-search__icon {
width: 18px; height: 18px;
color: var(--text-muted); flex-shrink: 0;
}
.hero-search__input {
flex: 1 1 auto; min-width: 0;
background: transparent; border: 0;
padding: 12px 4px;
font: inherit; font-size: 15px; color: var(--text);
}
.hero-search__input:focus { outline: none; }
.hero-search__input::placeholder { color: var(--text-faint); }
.hero-search__btn {
flex-shrink: 0;
padding: 9px 18px;
background: var(--brand-accent); color: var(--brand-accent-fg);
border: 0; border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
cursor: pointer;
transition: filter 0.15s;
}
.hero-search__btn:hover { filter: brightness(1.06); }
@media (max-width: 480px) {
.hero-search { padding: 4px 4px 4px 12px; gap: 6px; }
.hero-search__input { padding: 10px 4px; font-size: 14px; }
.hero-search__btn { padding: 8px 14px; font-size: 12px; }
.hero-search__icon { width: 16px; height: 16px; }
}
/* 공통 kicker — 플랫 SVG 아이콘 + 텍스트. 박스/배경/보더 없음. */
.kicker-badge {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 700;
color: var(--brand-accent);
letter-spacing: -0.005em;
white-space: nowrap;
flex-shrink: 0;
}
.kicker-badge__icon {
width: 14px; height: 14px;
flex-shrink: 0;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 최근 버전업 = 시간성 시그널 → amber (시장/success green 과 의미 분리) */
.kicker-badge--update { color: var(--accent-warm); }
/* 자연어 검색 예시 칩 행 — 한 줄 노출, 넘치는 chip 은 JS 가 hidden 처리 */
.nl-examples {
display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
margin: 4px 0 8px;
padding: 0;
overflow: hidden;
}
.nl-example { flex-shrink: 0; white-space: nowrap; }
.nl-examples__label { /* legacy class — kicker-badge 가 시각 디자인 담당 */
margin-right: 2px;
}
.nl-example {
display: inline-flex; align-items: center;
padding: 5px 12px;
background: transparent;
border: 1px dashed var(--border);
border-radius: 999px;
font: inherit; font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s, border-style 0.15s;
}
.nl-example:hover {
border-style: solid;
border-color: var(--brand-accent);
color: var(--brand-accent);
background: var(--brand-accent-soft);
}
@media (max-width: 480px) {
.nl-example { padding: 4px 10px; font-size: 11px; }
}
/* ── 10c. 2-col layout (main + 오른쪽 사이드바) ───── */
.layout-2col {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 40px;
align-items: start;
}
.layout-2col__main { min-width: 0; }
.layout-2col__aside {
position: sticky; top: 72px;
display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 860px) {
.layout-2col { grid-template-columns: 1fr; gap: 24px; }
.layout-2col__aside { position: static; }
}
.aside-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
}
.aside-card__title {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 10px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 6px;
}
.aside-card__title small { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); font-weight: 400; letter-spacing: 0.08em; }
.aside-cat-list {
list-style: none; margin: 0; padding: 0;
}
.aside-cat-list li + li { border-top: 1px solid var(--border-soft); }
.aside-cat-list a {
display: flex; align-items: center; gap: 6px;
padding: 8px 0;
color: var(--text) !important; text-decoration: none;
font-size: 14px; line-height: 1.3;
}
.aside-cat-list a:hover { color: var(--brand-accent) !important; text-decoration: none; }
.aside-cat-list a:hover .aside-cat-list__count { color: var(--brand-accent); }
.aside-cat-list__count {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px; color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.aside-cat-list__count b { color: var(--text); font-weight: 700; }
/* 검색 가능한 메뉴 표식 — 메뉴명 우측 작은 돋보기 */
.nav-search-mark { display: inline-flex; align-items: center; color: var(--text-muted); }
.nav-search-mark svg { width: 11px; height: 11px; }
.aside-cat-list a:hover .nav-search-mark,
.aside-cat-list li.is-active .nav-search-mark { color: var(--brand-accent); }
.cat-menu .nav-search-mark svg { width: 12px; height: 12px; }
.nav-group + .nav-group { margin-top: 14px; }
.nav-group__title {
font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
color: var(--brand-accent);
margin: 0 0 4px;
}
.nav-group .aside-cat-list a { padding: 7px 0; }
/* 광고 슬롯 placeholder (public 이전 후 실제 ad 코드 삽입) */
.ad-slot {
background: var(--bg-elevated);
border: 1px dashed var(--border);
border-radius: var(--radius);
padding: 24px 12px;
text-align: center;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.ad-slot--tall { min-height: 250px; display: flex; align-items: center; justify-content: center; }
/* 본문(결과 직후) in-article 광고 — section 사이에 자연스럽게 */
.ad-slot--in-article {
margin: 0 auto 16px;
min-height: 100px;
display: flex; align-items: center; justify-content: center;
}
/* ── 10d. dashboard widgets ──────────────────────── */
/* TOP 인기 검색 — 가로 막대그래프 + 카운트 (컴팩트) */
/* 최근 사용 — 막대그래프 없는 row 레이아웃 */
/* 사이트 누적 활동 — LIVE 카운터 (방문자 / 계산수) */
.live-counters {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.live-counter {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 22px;
position: relative; overflow: hidden;
}
.live-counter::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, var(--brand-accent-soft) 0%, transparent 60%);
pointer-events: none; opacity: 0.6;
}
.live-counter > * { position: relative; }
.live-counter__label {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
display: flex; justify-content: space-between; align-items: center;
}
.live-counter__value {
font-size: 32px; font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1.1;
}
.live-counter__unit {
font-size: 13px; color: var(--text-muted); margin-left: 4px; font-weight: 500;
}
.live-counter__sub {
font-size: 11px; color: var(--text-muted);
margin-top: 6px;
}
/* LIVE 펄스 (시간성 시그널) — amber (시장 등락 success/green 과 의미 분리).
color 에 var(--accent-warm) 박고 background·box-shadow 는 currentColor 트릭.
data-theme 토글 시 양 테마 자동 분기. */
.live-pulse {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent-warm);
}
.live-pulse::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 0 currentColor;
animation: csPulse 1.6s infinite;
}
@keyframes csPulse {
0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
70% { box-shadow: 0 0 0 7px transparent; opacity: 0.7; }
100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
@media (max-width: 600px) {
.live-counters { grid-template-columns: 1fr; gap: 12px; }
.live-counter { padding: 16px; }
.live-counter__value { font-size: 26px; }
}
/* mini-list — 최근 사용·새로 발행 (컴팩트 단일행) */
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li {
display: flex; align-items: baseline; gap: 8px;
padding: 7px 4px;
border-bottom: 1px solid var(--border-soft);
font-size: 14px; line-height: 1.4;
min-width: 0;
}
.mini-list li:last-child { border-bottom: 0; }
.mini-list__num {
font-family: var(--font-mono); font-size: 11px;
color: var(--text-faint); width: 22px; flex-shrink: 0;
}
.mini-list__cat {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
color: var(--brand-accent); text-transform: uppercase;
flex-shrink: 0; min-width: 60px;
}
.mini-list__title {
flex-shrink: 0; color: var(--text); font-weight: 500;
text-decoration: none;
}
.mini-list__title:hover { color: var(--brand-accent); text-decoration: none; }
.mini-list__sep { color: var(--text-faint); flex-shrink: 0; }
.mini-list__desc {
color: var(--text-secondary); font-size: 13px;
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-list__time {
font-family: var(--font-mono); font-size: 10px;
color: var(--text-muted); letter-spacing: 0.06em;
flex-shrink: 0; margin-left: auto;
}
@media (max-width: 600px) {
.mini-list__sep, .mini-list__desc { display: none; }
.mini-list__cat { min-width: 50px; font-size: 9px; }
}
/* ── 11. calculator card grid (홈) ────────────────── */
.calc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
margin-top: 16px;
}
.cat-section { margin-top: 32px; }
.cat-section__title {
margin: 0 0 12px; font-size: 18px; font-weight: 700;
display: flex; align-items: baseline; gap: 8px;
}
.cat-section__title small { color: var(--text-muted); font-size: 13px; font-weight: 400; }
/* ── 12. related links ───────────────────────────── */
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px;
}
.related-link {
display: block; padding: 10px 12px;
background: var(--bg-elevated);
border: 1px solid var(--border); border-radius: var(--radius);
color: var(--text) !important; text-decoration: none;
font-size: 13px; line-height: 1.4;
transition: border-color 0.15s, color 0.15s;
}
.related-link:hover {
border-color: var(--brand-accent); color: var(--brand-accent) !important;
text-decoration: none;
}
.related-link__cat {
font-family: var(--font-mono);
font-size: 10px; color: var(--text-muted);
letter-spacing: 0.1em; text-transform: uppercase;
display: block; margin-bottom: 2px;
}
/* ── 13. roadmap (admin/dashboard 류) ─────────────── */
.roadmap-stats {
display: flex; flex-wrap: wrap; gap: 16px;
padding: 14px 16px;
background: var(--card-bg);
border: 1px solid var(--border); border-radius: var(--radius);
margin: 16px 0 24px;
}
.roadmap-stat {
display: flex; flex-direction: column; gap: 2px;
min-width: 88px;
}
.roadmap-stat__num {
font-size: 22px; font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums;
}
.roadmap-stat__label {
font-family: var(--font-mono);
font-size: 10px; color: var(--text-muted);
letter-spacing: 0.12em; text-transform: uppercase;
}
.roadmap-progress {
height: 6px; background: var(--bg-elevated); border-radius: 999px;
overflow: hidden; margin: 16px 0 24px;
}
.roadmap-progress__fill {
height: 100%; background: var(--brand-accent);
transition: width 0.3s;
}
.cat-block {
margin-bottom: 24px;
background: var(--card-bg);
border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden;
}
/* 라이브 시뮬 admin 박스 (roadmap 페이지) */
.live-sim-admin {
margin-top: 40px;
padding: 18px 20px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.live-sim-admin__title {
margin: 0 0 6px; font-size: 15px; font-weight: 700;
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.live-sim-admin__title small {
font-family: var(--font-mono); font-size: 10px;
color: var(--text-muted); font-weight: 400; letter-spacing: 0.04em;
}
.live-sim-admin__hint {
font-size: 13px; color: var(--text-secondary); margin: 0 0 14px;
}
.live-sim-admin__grid {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin-bottom: 14px;
}
.live-sim-admin__field { display: flex; flex-direction: column; gap: 4px; }
.live-sim-admin__field label {
font-size: 12px; font-weight: 600; color: var(--text);
}
.live-sim-admin__field code {
font-family: var(--font-mono); font-size: 11px;
color: var(--brand-accent);
background: var(--brand-accent-soft);
padding: 1px 5px; border-radius: var(--radius-xs);
}
.live-sim-admin__actions {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.cat-block__head {
display: flex; align-items: baseline; gap: 12px;
padding: 14px 18px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.cat-block__num {
font-family: var(--font-mono);
font-size: 11px; color: var(--brand-accent);
letter-spacing: 0.18em;
}
.cat-block__title {
font-size: 16px; font-weight: 700; margin: 0;
}
.cat-block__count {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px; color: var(--text-muted);
letter-spacing: 0.06em;
}
.cat-block__count b { color: var(--text); font-weight: 700; }
.posts {
list-style: none; margin: 0; padding: 0;
}
.posts li {
display: flex; align-items: baseline; gap: 8px;
padding: 5px 0;
border-bottom: 1px solid var(--border-soft);
font-size: 14px; line-height: 1.4;
min-width: 0;
}
.posts li:last-child { border-bottom: 0; }
.posts .num {
font-family: var(--font-mono);
font-size: 11px; color: var(--text-faint);
letter-spacing: 0.06em;
flex-shrink: 0; width: 24px;
}
.posts .title {
color: var(--text);
flex-shrink: 0;
font-weight: 500;
}
.posts a.title:hover { color: var(--brand-accent); }
.posts .post-sep { color: var(--text-faint); flex-shrink: 0; }
.posts .post-desc {
color: var(--text-secondary);
font-size: 13px;
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.posts .meta {
font-family: var(--font-mono); font-size: 10px;
color: var(--text-muted); letter-spacing: 0.1em;
white-space: nowrap;
flex-shrink: 0; margin-left: auto;
}
.posts .meta--done { color: var(--info); font-weight: 700; }
@media (max-width: 600px) {
.posts .post-sep, .posts .post-desc { display: none; }
}
/* ── 14. utilities ────────────────────────────────── */
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row--right { justify-content: flex-end; }
.spacer { flex: 1; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }
/* ── 15. responsive ───────────────────────────────── */
@media (max-width: 480px) {
main { padding: 16px 12px 48px; }
.page-header__title { font-size: 22px; }
.result__value { font-size: 26px; }
.card { padding: 16px; }
.breakdown { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.breakdown__value { font-size: 14px; }
.calc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.roadmap-stats { gap: 12px; padding: 12px; }
.roadmap-stat__num { font-size: 18px; }
}
/* ── 16. 즐겨찾기 토글 + 뒤로가기 버튼 (계산기 헤더용) ── */
.fav-toggle {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
padding: 0;
}
.fav-toggle:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
.fav-toggle.is-on {
color: var(--brand-accent);
background: var(--brand-accent-soft);
border-color: var(--brand-accent);
}
.fav-toggle svg { width: 16px; height: 16px; }
.fav-toggle.is-on svg { fill: currentColor; }
.fav-toggle--shake { animation: cs-shake 0.4s; }
@keyframes cs-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
.back-btn {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
transition: color 0.15s, background 0.15s, border-color 0.15s;
padding: 0;
}
.back-btn:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
.back-btn svg { width: 16px; height: 16px; }
/* 한도 안내 메시지 */
.fav-hint {
display: block; opacity: 0; transform: translateY(-4px);
font-size: 12px; color: var(--danger);
padding: 6px 0; height: 0; overflow: hidden;
transition: opacity 0.18s, transform 0.18s, height 0.18s;
}
.fav-hint.is-show { opacity: 1; transform: translateY(0); height: 24px; }
/* 즐겨찾기 진행 dots — 1~10, 채워진 만큼 brand-accent */
.fav-dots {
display: inline-flex; gap: 3px; align-items: center;
margin-left: 8px; vertical-align: middle;
}
.fav-dot {
width: 7px; height: 7px; border-radius: 50%;
background: transparent;
border: 1px solid var(--border);
transition: background 0.18s, border-color 0.18s;
}
.fav-dot.is-filled {
background: var(--brand-accent);
border-color: var(--brand-accent);
}
@media (max-width: 600px) {
.fav-dots { gap: 2px; margin-left: 6px; }
.fav-dot { width: 6px; height: 6px; }
}
/* 즐겨찾기 비어있을 때 — 별 + 한줄 카피 + CTA */
.fav-empty {
grid-column: 1 / -1;
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--brand-accent-soft);
border: 1px dashed var(--brand-accent);
border-radius: var(--radius-sm);
color: var(--text);
}
.fav-empty__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--card-bg);
color: var(--brand-accent);
flex-shrink: 0;
}
.fav-empty__icon svg { width: 16px; height: 16px; }
.fav-empty__copy {
flex: 1; min-width: 0;
font-size: 12.5px; color: var(--text-secondary); line-height: 1.4;
word-break: keep-all;
}
.fav-empty__cta {
flex-shrink: 0;
padding: 6px 10px;
background: var(--brand-accent);
color: var(--brand-accent-fg) !important;
border-radius: var(--radius-sm);
font-size: 12px; font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: background 0.12s;
}
.fav-empty__cta:hover { background: var(--brand-accent-strong); text-decoration: none; }
@media (max-width: 600px) {
.fav-empty { gap: 8px; padding: 8px 10px; }
.fav-empty__icon { width: 24px; height: 24px; }
.fav-empty__icon svg { width: 14px; height: 14px; }
.fav-empty__copy { font-size: 12px; }
.fav-empty__cta { padding: 5px 9px; font-size: 11.5px; }
}
/* ── 18. 카테고리 그리드 (대시보드 메인) ── */
.cat-grid-block { margin-top: 24px; padding-top: 8px; scroll-margin-top: 88px; }
@media (max-width: 600px) { .cat-grid-block { scroll-margin-top: 72px; } }
.cat-grid-block__head {
display: flex; align-items: baseline; gap: 12px;
padding: 10px 0; border-bottom: 1px solid var(--border);
}
.cat-grid-block__num {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
color: var(--text-muted); font-weight: 700;
}
.cat-grid-block__title {
font-size: 16px; font-weight: 700; color: var(--text);
margin: 0;
}
.cat-grid-block__count {
margin-left: auto; font-size: 12px; color: var(--text-muted);
font-family: var(--font-mono);
}
.cat-grid-block__count b { color: var(--brand-accent); }
/* 히트맵 팔레트와 일치 — 상위 2단계만 강조해 스캐닝 보조 */
/* 메인 카드 버전 chip — title 우측 작은 mono 표기 */
/* v 가 이미 포함된 텍스트면 ::before 제거 — 단순화 위해 텍스트는 'v' 없이 숫자만 출력 */
/* 즐겨찾기된 행 — 이름·버전 모두 브랜드 색상으로 강조 (라이트/다크 brand-accent 변수가 가독성 자동 처리) */
/* 사이드바 카테고리 active 표시 */
.aside-cat-list a.is-current {
background: var(--brand-accent-soft);
color: var(--brand-accent);
}
/* 사이트 누적 활동 축소 (개편 예정) */
.live-counters--compact {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.live-counters--compact .live-counter { padding: 12px; }
.live-counters--compact .live-counter__value { font-size: 22px; }
.live-counters--compact .live-counter__sub { display: none; }
/* ── 19. page-header 의 액션 영역 (제목 옆 공유·즐겨찾기) ── */
.page-header__head {
display: flex; align-items: flex-start; gap: 12px;
margin: 0;
}
.page-header__head .page-header__title {
flex: 1; min-width: 0; margin: 0;
}
.page-header__actions {
display: inline-flex; gap: 6px; flex-shrink: 0;
margin-top: 4px;
}
.share-btn, .print-btn, .vote-btn {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
padding: 0;
}
.share-btn:hover, .print-btn:hover { color: var(--brand-accent); border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.share-btn svg, .print-btn svg, .vote-btn svg { width: 16px; height: 16px; }
/* ── 좋아요 / 안좋아요 버튼 ── */
.vote-btn--up:hover { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.vote-btn--down:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.vote-btn--up.is-voted {
color: var(--success); border-color: var(--success);
background: var(--success-soft);
cursor: default;
}
.vote-btn--up.is-voted svg { fill: var(--success-soft); }
.vote-btn--down.is-voted {
color: var(--danger); border-color: var(--danger);
background: var(--danger-soft);
cursor: default;
}
.vote-btn--down.is-voted svg { fill: var(--danger-soft); }
.vote-btn.is-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.vote-btn.is-loading { opacity: 0.6; cursor: wait; }
.vote-btn--just-voted { animation: voteBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes voteBounce {
0% { transform: scale(1); }
40% { transform: scale(1.32); }
70% { transform: scale(0.92); }
100% { transform: scale(1); }
}
/* v1.6~1.9 — Silver (은): 은빛 + 미세 펄스 */
@keyframes verSilverPulse {
0%, 100% { box-shadow: 0 1px 3px rgba(138, 150, 170, 0.45), inset 0 1px 0 rgba(255,255,255,0.5); }
50% { box-shadow: 0 1px 5px rgba(138, 150, 170, 0.75), inset 0 1px 0 rgba(255,255,255,0.75); }
}
/* v2.0~2.9 — Gold (금): 빛나는 금빛 + 글로우 + 사이드 스파클 */
@keyframes verGoldGlow {
0%, 100% { box-shadow: 0 1px 4px rgba(245, 158, 11, 0.55), 0 0 10px rgba(255, 215, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.65); }
50% { box-shadow: 0 1px 6px rgba(245, 158, 11, 0.75), 0 0 18px rgba(255, 215, 0, 0.7), inset 0 1px 0 rgba(255,255,255,0.8); }
}
@keyframes verSparkle {
0%, 100% { opacity: 0.6; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.3); }
}
/* v3.0+ — Mythic (신화): 무지개 그라데이션 + 강한 글로우 + 양쪽 스파클 */
@keyframes verMythicShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes verMythicGlow {
0%, 100% { box-shadow: 0 1px 7px rgba(139, 92, 246, 0.65), 0 0 16px rgba(255, 107, 157, 0.45), inset 0 1px 0 rgba(255,255,255,0.5); }
50% { box-shadow: 0 1px 10px rgba(139, 92, 246, 0.85), 0 0 22px rgba(255, 107, 157, 0.65), inset 0 1px 0 rgba(255,255,255,0.7); }
}
/* 즐겨찾기 행에서 등급 강조 — 등급 효과는 그대로 유지하되 seed 만 브랜드색으로 */
/* bronze/silver/gold/mythic 은 즐겨찾기 무관 — 등급 자체가 강조 */
/* ── 20. toast (링크 복사 알림 등) ── */
.toast {
position: fixed;
bottom: 24px; left: 50%;
transform: translateX(-50%) translateY(8px);
padding: 10px 18px;
background: var(--text);
color: var(--bg);
border-radius: var(--radius-sm);
font-size: 13px;
box-shadow: var(--shadow);
opacity: 0; pointer-events: none;
transition: opacity 0.18s, transform 0.18s;
z-index: 1000;
white-space: nowrap;
}
.toast.is-show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ── 21. 헤더 (플랫 미니멀 마크 + 워드마크) ── */
.site-header__brand-row {
display: inline-flex; align-items: center; gap: 10px;
text-decoration: none;
flex-shrink: 0;
}
.site-header__logo {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: var(--radius-sm);
display: grid; place-items: center;
background: linear-gradient(135deg, var(--brand-accent) 0%, color-mix(in srgb, var(--brand-accent) 75%, #000) 100%);
color: var(--brand-accent-fg);
position: relative;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.06);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.site-header__logo::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22) 0%, transparent 55%);
pointer-events: none;
}
.site-header__brand-row:hover .site-header__logo {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(255,255,255,0.08);
}
[data-theme="dark"] .site-header__logo {
background: linear-gradient(135deg, var(--brand-accent) 0%, color-mix(in srgb, var(--brand-accent) 70%, #000) 100%);
color: var(--bg);
box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.site-header__logo svg { width: 20px; height: 20px; stroke-width: 2; position: relative; z-index: 1; }
.site-header__brand-text { display: inline-flex; flex-direction: column; line-height: 1.05; }
.site-header__brand-name {
font-family: 'Inter', 'Pretendard', system-ui, -apple-system, 'Segoe UI', 'SF Pro Display', sans-serif;
font-size: 1.4rem; font-weight: 700;
letter-spacing: -0.025em;
color: var(--text);
font-feature-settings: 'ss01' on, 'cv11' on;
}
.site-header__brand-text small {
font-family: var(--font-mono);
font-size: 0.7rem; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-muted);
margin-top: 5px;
}
/* URL 표기는 monospace 그대로 + sky 강조 (브랜드 신뢰성) */
.site-header__brand-text small.site-header__url {
color: var(--brand-accent);
letter-spacing: 0.02em;
text-transform: none;
font-weight: 700;
}
.site-header__nav {
display: flex; gap: 4px;
margin-left: 16px;
flex: 1;
}
.site-header__nav a {
padding: 6px 10px; border-radius: var(--radius-sm);
font-size: 13px; color: var(--text-secondary);
text-decoration: none; transition: background 0.12s, color 0.12s;
}
.site-header__nav a:hover, .site-header__nav a.is-current {
background: var(--brand-accent-soft); color: var(--brand-accent);
}
@media (max-width: 768px) {
.site-header__nav { display: none; }
}
/* 헤더 활동 카운터 */
.live-stat {
display: inline-flex; align-items: baseline; gap: 4px;
padding: 4px 8px;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
font-size: 11px; color: var(--text-muted);
font-family: var(--font-mono);
white-space: nowrap;
}
.live-stat__label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.live-stat__value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.live-stat--today .live-stat__value { color: var(--brand-accent); }
@media (max-width: 768px) {
.live-stat--total { display: none; }
}
@media (max-width: 480px) {
.live-stat { padding: 3px 6px; font-size: 10px; }
}
/* ── 22. 카테고리 그리드 — HOT / NEW 배지 + 인기 강조 ── */
/* 사이드바 카테고리 카드 — 총 계산기 수 표시 */
.aside-cat-list__total {
font-family: var(--font-mono); font-size: 10px;
color: var(--text-muted); margin-left: 4px;
}
/* ── 23. footer 버전 표기 (자가 진화 시스템) ── */
.site-footer__version {
display: block;
margin-top: 6px;
font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.06em;
color: var(--text-muted);
opacity: 0.55;
}
/* ── 24. layout 표준화 — 모든 페이지가 메인 페이지와 동일한 본문 폭/사이드바 ── */
/* 본문 max-width 제한 없음. grid 의 1fr 가 자동으로 사이드바(320px) + gap 만 빼고 사용 */
.layout-2col__main--calc {
max-width: none;
}
.layout-2col__main--calc .section {
max-width: 100%;
}
/* 사이드바 카테고리 목록 — 현재 페이지 강조 (도트는 텍스트 우측) */
.aside-cat-list li.is-active a {
color: var(--brand-accent) !important; font-weight: 700;
}
.aside-cat-list li.is-active a::after {
content: "";
display: inline-block; flex-shrink: 0;
width: 6px; height: 6px; border-radius: 50%;
background: var(--brand-accent);
}
/* 영양소 카테고리 라벨 — 라벨 텍스트가 이미 카테고리를 말하므로 색은 얹지 않는다.
계층은 굵기·자간·명도로만. (색은 그래프의 대분류 표기에서만 쓴다) */
.nut-cat { font-weight: 700; color: var(--text-secondary); letter-spacing: -0.01em; }
.nut-cat-title { color: var(--text); }
/* 모바일 카테고리 토글 (헤더 햄버거 + 드롭다운) */
/* .header-tools 로 스코프 — .header-tools button(0,1,1) 의 display 를 이겨 PC 에서 숨김 */
.header-tools .cat-toggle {
display: none;
width: 36px; height: 36px;
align-items: center; justify-content: center;
border: 1px solid transparent; background: transparent;
border-radius: var(--radius-sm); cursor: pointer; color: var(--text);
padding: 0;
}
.cat-toggle:hover { background: var(--brand-accent-soft); }
.cat-toggle svg { width: 20px; height: 20px; }
.cat-menu {
position: absolute; top: calc(100% + 6px); right: 12px;
z-index: 50; min-width: 260px;
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-lg);
padding: 12px 14px;
}
.cat-menu__title {
font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
color: var(--text-muted); text-transform: uppercase;
padding-bottom: 6px; border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.cat-menu .aside-cat-list a { font-size: 14px; padding: 8px 0; }
/* 모바일 — 사이드바 카드 숨김, 햄버거 토글 노출 */
@media (max-width: 860px) {
.header-tools .cat-toggle { display: inline-flex; }
.site-header__inner { position: relative; }
/* 사이드바의 카테고리 카드만 숨김 (광고는 유지) */
.layout-2col__aside .aside-card--sticky { display: none; }
}
/* page-header__head 안 actions 첫 자리에 back-btn */
.page-header__actions .back-btn {
margin-right: 4px;
}
/* ── 25. 즐겨찾기 안내 + TOP10 절반 + 파이프 모니터 + 히트맵 ── */
.fav-section__notice {
display: block;
font-size: 11px; color: var(--text-muted);
letter-spacing: 0.01em;
}
/* 즐겨찾기 헤더 — 제목 + notice 한 줄 (모바일 wrap) */
.fav-head {
display: flex; align-items: baseline; flex-wrap: wrap;
gap: 4px 12px; margin-bottom: 4px;
}
.fav-head .cat-section__title { margin: 0; }
@media (max-width: 600px) {
.fav-head .fav-section__notice { font-size: 10.5px; }
}
/* 최근 사용 chip strip — 즐겨찾기 박스 하단 통합 */
.recent-strip {
display: flex; align-items: center; flex-wrap: wrap;
gap: 6px 8px;
margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--border);
}
.recent-strip__label {
font-family: var(--font-mono);
font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--text-muted);
padding-right: 2px;
}
.recent-strip__list { display: contents; list-style: none; padding: 0; margin: 0; }
.recent-strip__list li { display: inline-flex; }
.recent-strip__item {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 9px; border-radius: 999px;
background: var(--card-bg);
border: 1px solid var(--border);
color: var(--text);
font-size: 11.5px; line-height: 1.4;
text-decoration: none;
white-space: nowrap;
max-width: 100%;
transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.recent-strip__item:hover {
border-color: var(--brand-accent);
color: var(--brand-accent);
background: var(--brand-accent-soft);
text-decoration: none;
}
.recent-strip__title { overflow: hidden; text-overflow: ellipsis; }
.recent-strip__time { color: var(--text-muted); font-size: 10px; }
.recent-strip__item:hover .recent-strip__time { color: var(--brand-accent); }
.recent-strip__empty {
font-size: 11.5px; color: var(--text-muted);
list-style: none;
}
@media (max-width: 600px) {
.recent-strip { gap: 5px 6px; margin-top: 8px; padding-top: 8px; }
.recent-strip__item { padding: 3px 8px; font-size: 11px; }
.recent-strip__time { font-size: 9.5px; }
}
/* 2-col split: TOP10 절반 + 파이프 모니터 (legacy, 대시보드 외에서만) */
.dash-split-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: stretch;
}
@media (max-width: 768px) {
.dash-split-row { grid-template-columns: 1fr; }
}
.dash-split-row .cat-section { margin: 0; }
/* 대시보드 3열 — 즐겨찾기 · 사용자 TOP5 · 스쿱 추천 (PC 동일 높이) */
.dash-3col {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
margin-top: 24px;
align-items: stretch;
}
.dash-3col__col { display: flex; flex-direction: column; min-width: 0; }
/* TOP5/추천 카드는 컬럼을 끝까지 채워 즐겨찾기 컬럼과 키 일치 (카드 하단은 자연 여백) */
.dash-3col__col--top .dash-3col__list,
.dash-3col__col--rec .dash-3col__list { flex: 1 1 auto; }
.dash-3col__col .cat-section__title {
margin: 0 0 8px;
font-size: 15px;
flex-wrap: wrap;
}
.dash-3col__col .cat-section__title small { font-size: 11px; }
.dash-3col__col .fav-head { margin-bottom: 6px; gap: 2px 10px; }
.dash-3col__list { padding: 4px 8px; }
/* 3열 내부에서 TOP-list 행은 단일 컬럼(rank + title) — 막대/카운트 없는 컴팩트 형태 */
/* 즐겨찾기 5개 컴팩트 세로 스택 — TOP5/추천과 높이 맞춤 (각 행 1줄) */
/* 모바일 미니 갤럭시 카드 — 본문 안 카테고리 카드 바로 위 (PC 에선 사이드바 라이브 패널이 담당) */
.mobile-galaxy { display: none; }
/* 최근 사용 strip — 즐겨찾기 박스에서 분리, 3열 아래 풀폭으로 */
.cat-section--recent { margin-top: 16px; }
.recent-strip--bare {
margin-top: 0; padding-top: 0;
border-top: 0;
}
@media (max-width: 1024px) {
.dash-3col {
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.dash-3col__col--rec { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.dash-3col {
grid-template-columns: 1fr;
gap: 14px;
}
.dash-3col__col--rec { grid-column: auto; }
/* 모바일 즐겨찾기 — 2열 그리드 유지, 행은 PC 처럼 한 줄(컴팩트) */
/* 좁은 셀 — 카테고리 라벨 생략, 색상 accent 는 슬롯 border 가 담당 */
}
@media (max-width: 380px) {
/* 폴드/초소형 — 즐겨찾기 다시 1열 */
}
/* 스쿱 추천 — 메인 픽 블록 (월별 픽 main + 사유) */
.rec-main {
padding: 8px 10px;
margin: -4px -8px 6px;
background: var(--brand-accent-soft);
border-bottom: 1px solid var(--brand-accent);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.rec-main__link {
display: flex; flex-direction: column; gap: 3px;
text-decoration: none;
color: var(--text);
}
.rec-main__link:hover .rec-main__title { color: var(--brand-accent); text-decoration: underline; }
.rec-main__top {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono);
font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
}
.rec-main__badge {
padding: 1px 6px;
background: var(--brand-accent);
color: var(--brand-accent-fg);
border-radius: var(--radius-xs);
font-weight: 700;
}
.rec-main__cat { color: var(--brand-accent); font-weight: 700; }
.rec-main__title {
font-size: 14px; font-weight: 700; line-height: 1.3;
color: var(--text);
}
.rec-main__reason {
font-size: 11px; color: var(--text-secondary);
line-height: 1.4;
word-break: keep-all;
}
/* TOP5 + 미니 라이브 — 모바일/폴드 한정 좌우 분할 */
.top5-row { display: block; }
.top5-row__list { min-width: 0; }
.mini-live { display: none; }
@media (max-width: 860px) {
.top5-row {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.mini-live {
display: flex; flex-direction: column;
gap: 5px;
padding: 6px 7px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
min-width: 0;
/* 미니 영역 — 컨테이너 자체를 컴팩트하게 고정 (셀 수와 무관) */
height: 112px;
overflow: hidden;
}
.mini-live__head {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-mono);
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--text-secondary);
}
.mini-live__head .live-pulse { width: 6px; height: 6px; }
/* 미니 뉴런 네트워크 — SVG 내부 */
.heatmap--mini {
flex: 1;
display: block;
padding: 4px;
background: linear-gradient(180deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--bg-elevated) 65%, #000) 100%);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
[data-theme="dark"] .heatmap--mini {
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-terminal) 100%);
}
.heatmap--mini .neural { width: 100%; height: 100%; }
/* (옛 모바일 룰 제거됨 — 대시보드 사이드바 라이브 패널은 모바일에서도 노출) */
}
/* 머니스쿱 헤더 패턴 — 1199px 이하 ALL CALCULATION 슬로건 숨김. 로고·브랜드명은 모든 너비에서 기본(38px / 1.4rem) 유지 */
@media (max-width: 1199px) {
.site-header__brand-text small { display: none; }
}
@media (max-width: 480px) {
.top5-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; }
.mini-live { padding: 5px 6px; }
/* 폴드/초소형 — 4px 무틈 */
.heatmap--mini { padding: 2px; }
.heatmap--mini .heatmap__cell { width: 4px; height: 4px; }
}
/* TOP 10 컴팩트 — 폰트·padding 축소 */
/* 파이프 트랜잭션 모니터 */
.pipe-monitor {
position: relative;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
display: flex; flex-direction: column;
overflow: hidden;
}
.pipe-monitor__head {
display: flex; justify-content: space-between; align-items: center;
font-size: 11px; color: var(--text-muted);
font-family: var(--font-mono);
letter-spacing: 0.06em; text-transform: uppercase;
margin-bottom: 8px;
}
.pipe-monitor__head .live-pulse {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--success); margin-right: 4px;
animation: pipe-pulse 1.5s infinite;
}
@keyframes pipe-pulse {
0%,100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
.pipe-monitor__lanes {
display: flex; flex-direction: column;
flex: 1; justify-content: center;
padding: 8px 0;
}
.pipe-monitor__lane {
position: relative;
height: 28px;
background: linear-gradient(to bottom, transparent 12px, var(--border) 13px, var(--border) 14px, transparent 15px);
border-radius: var(--radius-xs);
}
.pipe-monitor__packet {
position: absolute;
top: 50%; transform: translateY(-50%);
padding: 0;
border-radius: 50%;
font-size: 0;
text-indent: -9999px;
color: transparent;
animation: packet-flow 2.4s linear forwards;
z-index: 3;
}
/* 크기 변형 — sm 50% / md 35% / lg 15% 분포. 모두 원형 점, 크기로만 차등 */
.pipe-monitor__packet--sm { width: 5px; height: 5px; }
.pipe-monitor__packet--md { width: 8px; height: 8px; }
.pipe-monitor__packet--lg {
width: 12px; height: 12px;
box-shadow: 0 0 6px currentColor; /* 점 자체가 발광 — 부상 그림자와 다른 역할 */
}
@keyframes packet-flow {
0% { left: -20px; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
.pipe-monitor__stats {
display: flex; gap: 10px;
font-family: var(--font-mono); font-size: 10px;
color: var(--text-muted);
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.pipe-monitor__stats b { color: var(--brand-accent); }
/* 카테고리 색상 (파이프 + 히트맵 공통) */
/* 히트맵 — 단일 통합 컨테이너 (카테고리 경계만 시각 분리) */
.heatmap {
display: flex; flex-wrap: wrap;
gap: 4px 10px;
padding: 10px 12px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.heatmap__cat {
display: inline-flex; flex-direction: column;
gap: 3px;
}
.heatmap__cat-head {
font-size: 9px;
color: var(--text-muted);
font-family: var(--font-mono);
letter-spacing: 0.06em; text-transform: uppercase;
border-bottom: 1px solid var(--border);
padding-bottom: 2px;
white-space: nowrap;
}
.heatmap__cat-head b { color: var(--text); font-weight: 700; margin-right: 4px; }
.heatmap__cells {
display: grid;
grid-template-columns: repeat(5, 14px);
gap: 2px;
}
.heatmap__cell {
aspect-ratio: 1;
border-radius: var(--radius-xs);
/* 트렌디한 단일 sky 톤 — popularity 중요도 색 차등 제거. 살아있는 신호는 패킷 도착 flash 로만 표현 */
background: var(--brand-accent-soft);
position: relative;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
[data-theme="dark"] .heatmap__cell {
background: var(--brand-accent-soft);
}
/* 카테고리 구분 색 — alpha 한 단계 진하게 (격자 명확) */
.heatmap__cell:hover {
transform: scale(1.4); z-index: 2;
background: var(--brand-accent);
box-shadow: var(--shadow);
}
/* popularity 별 색 분류 제거됨 — 모든 셀이 동일 톤, 인기도는 정렬 순서로만 표현 */
/* tooltip */
.heatmap__cell[data-tip]:hover::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 6px); left: 50%;
transform: translateX(-50%);
background: var(--text); color: var(--bg);
padding: 4px 8px; border-radius: var(--radius-xs);
font-size: 11px; white-space: nowrap;
z-index: 10;
pointer-events: none;
}
/* ── PWA 설치 버튼 (header-tools 첫 자리, 검색 좌측) ── */
.header-tools .pwa-install-btn {
display: inline-flex; align-items: center; gap: 5px;
width: auto; height: auto;
padding: 5px 10px 5px 8px;
background: transparent;
border: 1px solid var(--brand-accent);
border-radius: var(--radius-lg);
color: var(--brand-accent);
font-family: inherit;
font-size: 12px; font-weight: 600; letter-spacing: 0;
cursor: pointer; white-space: nowrap;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s, color 0.15s;
}
.header-tools .pwa-install-btn.pwa-install-btn--show { opacity: 1; transform: translateY(0); }
.header-tools .pwa-install-btn.pwa-install-btn--hide { opacity: 0; transform: translateY(-4px); }
.pwa-install-btn:hover {
background: var(--brand-accent);
color: var(--brand-accent-fg);
}
.pwa-install-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 1199px) {
.pwa-install-btn span { display: none; }
.header-tools .pwa-install-btn { padding: 6px 8px; gap: 0; }
.pwa-install-btn svg { width: 16px; height: 16px; }
}
/* ── 맨 위로 플로팅 버튼 — 화면 하단 가운데, 크고 강하게. 스크롤 ≥ viewport×1.2 시 visible ── */
[data-back-to-top] {
position: fixed;
left: 50%; bottom: 24px;
transform: translate(-50%, 12px);
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 0 18px;
height: 48px; min-width: 56px;
background: var(--brand-accent);
color: var(--brand-accent-fg);
border: 0;
border-radius: 999px;
cursor: pointer;
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s, transform 0.22s, background 0.15s;
z-index: 60;
font: inherit;
font-size: 13px; font-weight: 700;
letter-spacing: 0.02em;
}
[data-back-to-top] svg { width: 22px; height: 22px; stroke-width: 2.5; }
[data-back-to-top]:hover { filter: brightness(1.08); }
[data-back-to-top].is-visible {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
@media (max-width: 480px) {
[data-back-to-top] { bottom: 18px; height: 44px; padding: 0 14px; font-size: 12px; }
[data-back-to-top] svg { width: 20px; height: 20px; }
}
/* ── 26. live-panel — 컨베이어 메타포 (belt → divider ▼ → machine, 상하 구조) ── */
.live-panel {
display: flex; flex-direction: column;
gap: 10px;
padding: 4px 0;
}
.live-panel__head {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-muted);
flex-wrap: wrap; gap: 6px;
}
.live-panel__title {
display: inline-flex; align-items: center; gap: 8px;
color: var(--text);
flex-wrap: wrap;
text-transform: none;
letter-spacing: 0.01em;
font-size: 13px;
font-weight: 700;
font-family: -apple-system, "Pretendard", "Noto Sans KR", sans-serif;
}
.live-panel__title-count {
display: inline-flex;
align-items: baseline;
gap: 3px;
margin-left: auto;
padding-left: 8px;
}
.live-panel__title-count b {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 800;
color: var(--brand-accent);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.live-panel__title-count small {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.live-panel__tps {
color: var(--brand-accent); font-weight: 700;
text-transform: none; letter-spacing: 0.02em;
font-size: 11px;
}
/* 사이드바 비율(세로 길고 가로 좁음)에 맞춰 상하 구조 — belt(가로 lane 5개) → machine(카운터·히트맵) */
.live-panel__factory {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.live-panel__belt {
padding: 4px 2px 8px;
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.live-panel__machine {
padding: 2px 2px 4px;
position: relative;
}
/* belt → machine 흐름 표시 ▼ */
.live-panel__divider {
text-align: center;
font-size: 11px;
color: var(--brand-accent);
line-height: 1;
margin: -6px 0 -4px;
animation: arrow-down-pulse 1.6s ease-in-out infinite;
pointer-events: none;
user-select: none;
}
@keyframes arrow-down-pulse {
0%, 100% { transform: translateY(0); opacity: 0.5; }
50% { transform: translateY(3px); opacity: 1; }
}
.live-panel__caption {
font-family: var(--font-mono);
font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 6px;
display: flex; justify-content: space-between; align-items: baseline;
}
.live-panel__caption--flow .live-panel__arrow {
color: var(--brand-accent); font-weight: 700;
animation: arrow-slide 1.6s linear infinite;
}
@keyframes arrow-slide {
0%, 100% { transform: translateX(0); opacity: 0.6; }
50% { transform: translateX(3px); opacity: 1; }
}
/* 우측 머신: 큰 카운터 */
.live-panel__count { display: inline-flex; align-items: baseline; gap: 4px; }
.live-panel__count b {
font-family: var(--font-mono);
font-size: 22px; font-weight: 800;
color: var(--brand-accent);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.live-panel__count small {
font-family: var(--font-mono);
font-size: 9px; color: var(--text-muted);
letter-spacing: 0.06em; text-transform: uppercase;
}
.live-panel__belt .pipe-monitor__lanes { padding: 0; gap: 3px; }
.live-panel__belt .pipe-monitor__lane { height: 14px; }
.live-panel__stats {
display: flex; gap: 10px; flex-wrap: wrap;
padding-top: 6px;
border-top: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 9px; color: var(--text-muted);
letter-spacing: 0.06em;
}
.live-panel__stats b { color: var(--text); font-size: 11px; font-weight: 700; margin-right: 2px; }
.live-panel__count-small { margin-left: auto; }
.live-panel__count-small b { color: var(--brand-accent); }
/* 히트맵 셀 flash — 패킷 도착 시 가공. 크기별 sm·md·lg 차등 */
.heatmap__cell.is-arrived { z-index: 10; }
.heatmap__cell.is-arrived--sm { animation: cell-arrive-sm 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.heatmap__cell.is-arrived--md { animation: cell-arrive-md 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.heatmap__cell.is-arrived--lg { animation: cell-arrive-lg 1.1s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes cell-arrive-sm {
0% { transform: scale(1); }
20% {
transform: scale(1.6);
background: var(--brand-accent) !important;
box-shadow: 0 0 8px 2px var(--brand-accent);
}
100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
@keyframes cell-arrive-md {
0% { transform: scale(1); }
15% {
transform: scale(2.4);
background: var(--brand-accent) !important;
box-shadow:
0 0 0 3px var(--brand-accent),
0 0 14px 5px var(--brand-accent);
}
45% { transform: scale(1.4); }
100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
@keyframes cell-arrive-lg {
0% { transform: scale(1); }
15% {
transform: scale(3.6);
background: var(--brand-accent) !important;
box-shadow:
0 0 0 6px var(--brand-accent),
0 0 26px 10px var(--brand-accent),
0 0 48px 20px var(--brand-accent-soft);
}
45% {
transform: scale(1.8);
background: var(--brand-accent) !important;
box-shadow: 0 0 14px 4px var(--brand-accent);
}
100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
/* hero-search 우측 카운터 chip + 하단 note */
.hero-search__count {
display: inline-flex; align-items: baseline; gap: 3px;
margin-right: 4px;
padding: 4px 10px;
background: var(--brand-accent-soft);
border-radius: 999px;
white-space: nowrap;
}
.hero-search__count b {
font-family: var(--font-mono);
font-size: 13px; font-weight: 800;
color: var(--brand-accent);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.hero-search__count small {
font-size: 10px; color: var(--brand-accent);
font-weight: 600;
}
.hero-search__pulse {
display: inline-block;
width: 6px; height: 6px;
background: var(--brand-accent);
border-radius: 50%;
margin-left: 4px;
animation: pipe-pulse 1.4s infinite;
}
@media (max-width: 480px) {
/* 상하 구조는 모바일도 동일. 모바일은 가로 폭이 충분하니 패킷 라벨 유지·lane 살짝 컴팩트 */
.live-panel__count b { font-size: 18px; }
.hero-search__count { padding: 3px 8px; }
.hero-search__count b { font-size: 12px; }
.hero-search__count small { font-size: 9px; }
.live-panel__belt .pipe-monitor__lane { height: 12px; }
.live-panel__belt .pipe-monitor__lanes { gap: 2px; }
}
/* aside-card 제목 옆 tag (히트맵의 "더 똑똑해지는 중" 등) — page-header__tag 와 동일 톤 */
.aside-card__tag {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px;
background: var(--brand-accent-soft);
color: var(--brand-accent);
border-radius: 999px;
font-size: 10px; font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
font-family: -apple-system, "Pretendard", "Noto Sans KR", sans-serif;
}
.aside-card__tag-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--brand-accent);
animation: pipe-pulse 1.6s infinite;
flex-shrink: 0;
}
/* 뉴런 네트워크 컨테이너 — SVG 가 내부에 들어감 */
.heatmap--aside {
display: block;
padding: 8px;
background: radial-gradient(ellipse at center, var(--bg-elevated) 0%, color-mix(in srgb, var(--bg-elevated) 50%, #000) 100%);
border: 1px solid var(--border);
border-radius: var(--radius);
min-height: 320px;
overflow: hidden;
}
[data-theme="dark"] .heatmap--aside {
background: radial-gradient(ellipse at center, var(--bg-elevated) 0%, var(--bg-terminal) 100%);
}
.heatmap--aside .neural { width: 100%; height: 100%; min-height: 320px; aspect-ratio: 10 / 11; }
/* ── 뉴런 네트워크 (SVG) ── 유기적 force-directed 레이아웃 */
.neural { display: block; overflow: visible; }
/* 곡선 베지에 엣지 */
.neural__edges path {
stroke: var(--brand-accent);
stroke-width: 1.2;
opacity: 0.14;
transition: opacity 0.2s, stroke-width 0.2s;
fill: none;
}
[data-theme="dark"] .neural__edges path {
stroke: var(--brand-accent);
opacity: 0.18;
}
.neural__edge.is-firing {
animation: neural-edge-fire 0.8s ease-out;
}
@keyframes neural-edge-fire {
0% { opacity: 0.14; stroke-width: 1.2; }
20% { opacity: 1; stroke-width: 3.5; stroke: #ffffff; filter: drop-shadow(0 0 4px var(--brand-accent)); }
100% { opacity: 0.14; stroke-width: 1.2; }
}
[data-theme="dark"] .neural__edge.is-firing {
animation-name: neural-edge-fire-dark;
}
@keyframes neural-edge-fire-dark {
0% { opacity: 0.18; stroke-width: 1.2; }
20% { opacity: 1; stroke-width: 3.8; stroke: var(--text-inverse); filter: drop-shadow(0 0 6px var(--brand-accent)); }
100% { opacity: 0.18; stroke-width: 1.2; }
}
.neural__nodes a { cursor: pointer; outline: none; }
.neural__node {
cursor: pointer;
transform-box: fill-box;
transform-origin: center;
transition: r 0.15s, opacity 0.15s;
fill-opacity: 0.88;
/* 잔잔한 브리딩 — 4s 사이클로 미세 펄스 (TPS 와 무관한 살아있음의 base rhythm) */
animation: neural-breath 4s ease-in-out infinite;
animation-delay: calc(var(--n, 0) * 0.07s);
}
@keyframes neural-breath {
0%, 100% { fill-opacity: 0.85; }
50% { fill-opacity: 0.98; }
}
.neural__node:hover {
fill-opacity: 1;
filter: drop-shadow(0 0 6px rgb(var(--cat-rgb, 18 184 134))) drop-shadow(0 0 14px rgb(var(--cat-rgb, 18 184 134)));
}
/* 발화 — sm / md / lg */
@keyframes neural-fire-sm {
0% { transform: scale(1); fill-opacity: 0.88; filter: drop-shadow(0 0 0 transparent); }
30% { transform: scale(2.8); fill-opacity: 1; filter: drop-shadow(0 0 8px rgb(var(--cat-rgb, 18 184 134))) drop-shadow(0 0 14px rgb(var(--cat-rgb, 18 184 134))); }
100% { transform: scale(1); fill-opacity: 0.88; filter: drop-shadow(0 0 0 transparent); }
}
@keyframes neural-fire-md {
0% { transform: scale(1); fill-opacity: 0.88; filter: drop-shadow(0 0 0 transparent); }
18% { transform: scale(4.5); fill-opacity: 1; filter: drop-shadow(0 0 14px rgb(var(--cat-rgb, 18 184 134))) drop-shadow(0 0 28px rgb(var(--cat-rgb, 18 184 134))) drop-shadow(0 0 44px rgb(var(--cat-rgb, 18 184 134))); }
55% { transform: scale(2); fill-opacity: 1; }
100% { transform: scale(1); fill-opacity: 0.88; filter: drop-shadow(0 0 0 transparent); }
}
@keyframes neural-fire-lg {
0% { transform: scale(1); fill-opacity: 0.88; filter: drop-shadow(0 0 0 transparent); }
12% { transform: scale(7); fill-opacity: 1; filter: drop-shadow(0 0 20px rgb(var(--cat-rgb, 18 184 134))) drop-shadow(0 0 40px rgb(var(--cat-rgb, 18 184 134))) drop-shadow(0 0 70px rgb(var(--cat-rgb, 18 184 134))) drop-shadow(0 0 100px rgb(var(--cat-rgb, 18 184 134))); }
45% { transform: scale(3); fill-opacity: 1; }
100% { transform: scale(1); fill-opacity: 0.88; filter: drop-shadow(0 0 0 transparent); }
}
.is-firing-sm { animation: neural-fire-sm 0.6s ease-out !important; }
.is-firing-md { animation: neural-fire-md 0.9s ease-out !important; }
.is-firing-lg { animation: neural-fire-lg 1.1s ease-out !important; }
/* ── 27. 모바일 반응형 안정화 ── */
@media (max-width: 860px) {
/* 사이드바가 메인 아래로 wrap 되었을 때, 트랜잭션·히트맵·카테고리 카드 가로폭 100% */
.layout-2col__aside { width: 100%; }
.pipe-monitor--aside,
.aside-card--heatmap,
.aside-card { width: 100%; }
}
@media (max-width: 600px) {
/* TOP10 / 최근 사용 row — flex 로 단순화 (grid-template 충돌 회피) */
/* dash-split-row 모바일 1열 — gap 축소 */
.dash-split-row { gap: 12px; }
/* 즐겨찾기 슬롯 모바일 — 2열 × 2줄 (rank·cat 위, title 아래) 컴팩트 */
.fav-section__notice { font-size: 10px; }
/* page-header 액션 영역 모바일 */
.page-header__head { gap: 8px; }
.page-header__actions { gap: 4px; }
.back-btn, .share-btn, .print-btn, .fav-toggle { width: 28px; height: 28px; }
.back-btn svg, .share-btn svg, .print-btn svg, .fav-toggle svg { width: 14px; height: 14px; }
/* 헤더 모바일 — small 은 1199px 룰에서 이미 숨김. brand 폰트는 머니스쿱 패턴 따라 기본(1.4rem) 유지하되 logo 만 살짝 작게 */
.site-header__inner { height: 60px; padding: 0 16px; }
/* 검색바 모바일 */
.hero-search { padding: 4px; gap: 4px; }
.hero-search__input { padding: 8px 6px; font-size: 13px; }
.hero-search__btn { padding: 6px 12px; font-size: 11px; }
/* 카테고리 그리드 모바일 — 한 항목 한 줄 */
/* 히트맵 사이드바 모바일 — 셀만 8px 로 축소 (컨테이너는 inline-block 패턴 유지) */
.heatmap--aside .heatmap__cell { width: 8px; height: 8px; }
}
@media (max-width: 480px) {
/* 푸터 작게 */
.site-footer { padding: 16px 12px; font-size: 11px; }
.site-footer__version { font-size: 9px; }
/* page-header__title 모바일 폰트 */
.page-header__title { font-size: 20px; }
/* breadcrumb 컴팩트 */
.breadcrumb { font-size: 10px; margin-bottom: 10px; }
.breadcrumb .sep { margin: 0 4px; }
}
/* ── 28. 사이드바 카테고리 — PC 17개 한번에, 내부 스크롤 X ── */
@media (min-width: 861px) {
/* 카테고리 카드는 sticky 풀고 자연스럽게 흐름. 17개가 1 화면에 다 보임 */
.layout-2col__aside .aside-card--sticky { position: static; }
.layout-2col__aside .aside-cat-list { max-height: none; overflow: visible; }
/* PC 항목 padding 살짝 축소 — 17개 누적 높이 부담 완화 */
.layout-2col__aside .aside-cat-list a { padding: 6px 0; font-size: 13.5px; }
}
/* 트랜잭션 모니터 최소 높이 보장 (사이드바 안에서 잘리지 않게) */
.pipe-monitor--aside { min-height: 70px; }
/* ── 29. 모바일 사이드바: 상단 이동 + 컴팩트 (카테고리는 본문 안 카드로 분리) ── */
/* 본문 안 모바일 카테고리 카드 — PC 에선 hide, 사이드바 카드가 담당 */
.aside-card--main { display: none; }
@media (max-width: 860px) {
/* 사이드바는 본문 아래로 자연스럽게 (계산기 입력·결과가 우선 노출) */
.layout-2col__aside {
display: flex; flex-direction: column;
gap: 8px;
padding-right: 0;
}
/* 광고는 모바일에서 본문 흐름 방해 — 유지 숨김 */
.layout-2col__aside .ad-slot { display: none; }
/* 사이드바의 카테고리 카드는 모바일에서 숨김 (본문 카드가 대신함) */
.layout-2col__aside .aside-card--sticky { display: none; }
/* 본문 안 카테고리 카드 — 최근 strip 다음, 카테고리 그리드 위 위치 */
.aside-card--main {
display: block;
padding: 10px 12px;
margin-top: 12px;
}
.aside-card--main .aside-card__title { margin-bottom: 8px; font-size: 10px; }
.aside-card--main .aside-cat-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
overflow: hidden;
max-height: none;
}
.aside-card--main .aside-cat-list li {
border-top: 1px solid var(--border-soft);
border-right: 1px solid var(--border-soft);
min-width: 0;
}
.aside-card--main .aside-cat-list li + li { border-top: 1px solid var(--border-soft); }
.aside-card--main .aside-cat-list li:nth-child(-n+3) { border-top: 0; }
.aside-card--main .aside-cat-list li:nth-child(3n) { border-right: 0; }
.aside-card--main .aside-cat-list a {
padding: 6px 8px;
font-size: 11.5px;
line-height: 1.25;
grid-template-columns: 1fr auto;
gap: 4px;
}
.aside-card--main .aside-cat-list a > span:first-child {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aside-card--main .aside-cat-list__count { font-size: 9.5px; }
/* 트랜잭션 — 매우 컴팩트 (head 1행 + lane 1행) */
.pipe-monitor--aside {
padding: 6px 8px;
}
.pipe-monitor--aside .pipe-monitor__head {
font-size: 9px; margin-bottom: 2px;
}
.pipe-monitor--aside .pipe-monitor__lane { height: 18px; }
.pipe-monitor--aside .pipe-monitor__stats {
display: none; /* 모바일에선 통계 행 숨김 */
}
.pipe-monitor--aside .pipe-monitor__lanes { padding: 2px 0; }
/* 히트맵 모바일 — 통합 사각, 셀 더 작게 */
.aside-card--heatmap { padding: 6px 8px; }
.aside-card--heatmap .aside-card__title { font-size: 11px; margin-bottom: 4px; }
/* 모바일 사이드바 갤럭시 — 정사각형 → 3:1 직사각형 (높이 1/3, preserveAspectRatio:none 으로 SVG stretch 되어 노드 골고루) */
.heatmap--aside { padding: 4px; min-height: 110px; border-radius: var(--radius-sm); }
.heatmap--aside .heatmap__cell { width: 7px; height: 7px; }
.heatmap--aside .neural { min-height: 110px; aspect-ratio: 3 / 1; }
/* live-panel 헤더 컴팩트 */
.live-panel__head { padding: 6px 10px; }
.live-panel__title-count b { font-size: 14px; }
.live-panel__title-count small { font-size: 9px; }
/* 대시보드 모바일 — 사이드바 라이브 패널(큰 갤럭시) 숨김. 본문 안 미니 갤럭시가 대신 표시. */
.page-dashboard .layout-2col__aside .live-panel { display: none; }
/* 본문 안 모바일 미니 갤럭시 카드 — 카테고리 카드 직전 위치 (와이드 띠) */
.mobile-galaxy {
display: block;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 4px 8px 6px;
margin-top: 12px;
}
.mobile-galaxy__head {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-mono);
font-size: 9px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 3px;
}
/* 모바일 미니 갤럭시 — 높이 1/3 비율 직사각형 (3:1) 안에 노드 골고루 분포 */
.mobile-galaxy .heatmap--aside { min-height: 110px; padding: 4px; border-radius: var(--radius-sm); }
.mobile-galaxy .heatmap--aside .neural { min-height: 110px; aspect-ratio: 3 / 1; }
}
/* 폴드 — 미니 갤럭시 추가 컴팩트 (동일 3:1 비율 유지, 높이만 축소) */
@media (max-width: 380px) {
.mobile-galaxy .heatmap--aside { min-height: 95px; }
.mobile-galaxy .heatmap--aside .neural { min-height: 95px; aspect-ratio: 3 / 1; }
}
/* 폴드/초소형 — 카테고리 그리드 더 컴팩트 */
@media (max-width: 380px) {
.layout-2col__aside .aside-cat-list a {
padding: 5px 6px;
font-size: 10.5px;
}
.layout-2col__aside .aside-cat-list__count { font-size: 9px; }
/* 폴드/초소형 — 갤럭시 3:1 비율 유지 (좁은 폰에서 16/9 덮어쓰던 옛 룰 제거) */
.heatmap--aside { min-height: 95px; }
.heatmap--aside .neural { min-height: 95px; aspect-ratio: 3 / 1; }
}
/* 폴드(좁은 폴더블·일부 안드로이드, ≤400) — 더 컴팩트 + 라벨 생략으로 칩 자리 확보 */
@media (max-width: 400px) {
main { padding: 14px 10px 40px; }
.page-header__title { font-size: 20px; line-height: 1.25; }
.result__value { font-size: 22px; }
.card { padding: 14px; }
.breakdown__value { font-size: 13px; }
/* 더하기/예시 라벨 숨김 — 칩이 한 줄에 더 들어가도록 */
.input-incs::before, .preset-row::before { display: none; }
.input-inc { padding: 4px 8px; font-size: 11px; }
.preset { padding: 3px 8px; min-height: 24px; font-size: 11px; }
.pipe-monitor--aside .pipe-monitor__head { font-size: 8px; letter-spacing: 0.04em; }
.pipe-monitor--aside .pipe-monitor__lane { height: 16px; }
.heatmap--aside .heatmap__cell { width: 6px; height: 6px; }
}
/* ── 30. 모바일 트랜잭션 — 도트가 선을 지나가는 형태 ── */
@media (max-width: 860px) {
/* lane 파이프 라인 그대로 유지 (얇게) */
.pipe-monitor--aside .pipe-monitor__lane {
height: 18px;
}
/* packet 을 작은 도트 모양으로 + packet-flow 그대로 (좌→우 이동) */
.pipe-monitor--aside .pipe-monitor__packet {
width: 8px; height: 8px;
border-radius: 50%;
padding: 0;
font-size: 0;
color: transparent;
overflow: hidden;
box-shadow: 0 0 6px currentColor; /* 도트 발광 — 부상 그림자와 다른 역할 */
animation-duration: 1.6s;
}
}
/* ── 31. 뒤로가기 버튼 (제목 위, 단독 줄) ── */
.back-btn--inline {
display: inline-flex; align-items: center; gap: 6px;
width: auto; height: auto;
padding: 7px 14px 7px 12px;
font-family: inherit;
font-size: 13px; font-weight: 600;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
background: var(--card-bg);
cursor: pointer;
transition: color 0.12s, background 0.12s, border-color 0.12s;
margin-bottom: 12px;
white-space: nowrap;
flex-shrink: 0;
}
.back-btn--inline:hover {
color: var(--brand-accent);
border-color: var(--brand-accent);
background: var(--brand-accent-soft);
}
.back-btn--inline svg { width: 14px; height: 14px; flex-shrink: 0; }
.back-btn--inline > span { white-space: nowrap; }
/* breadcrumb 원래대로 단순 inline (back-btn 분리됐으므로 wrap 영향 X) */
.breadcrumb { display: block; }
/* back-btn 바로 뒤 breadcrumb 는 한 줄로 묶기 — Above-the-fold 절감 (모바일 ~30px) */
.back-btn--inline + .breadcrumb {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
vertical-align: middle;
margin-left: 8px;
margin-bottom: 12px;
}
@media (max-width: 600px) {
.back-btn--inline {
padding: 6px 12px 6px 10px;
font-size: 12px;
margin-bottom: 10px;
}
.back-btn--inline svg { width: 13px; height: 13px; }
}
/* ── 32. 입력 숫자 — common.js 가 type=number → text 자동 변환 후 input value 자체에 콤마 마스킹.
parseFloat/Int 는 wrap 되어 콤마 자동 무시. 별도 CSS 불필요. ── */
/* ── 33. 입력별 초기화(×) + 증감(+N) 자동 주입 ──
× 는 값 바로 옆 (suffix 앞), 값 비어있으면 JS 가 숨김.
증감 칩: filled accent — "값을 더하는 액션 버튼" 인지.
preset 칩: outlined neutral — "예시 값 1-click 채움" 인지.
각 행 좌측에 마이크로 라벨(::before) 로 용도 명시. */
.input-reset {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
margin-left: 4px;
background: transparent;
border: 1px solid var(--border);
border-radius: 50%;
color: var(--text-muted);
cursor: pointer;
padding: 0;
transition: border-color 0.12s, color 0.12s, background 0.12s;
flex-shrink: 0;
}
.input-reset:hover {
border-color: var(--danger);
color: var(--danger);
background: var(--danger-soft);
}
.input-reset:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 1px;
}
.input-reset svg { display: block; pointer-events: none; }
/* === 증감(+N) 행 — 액션 칩, 좌측 "더하기" 마이크로 라벨 === */
.input-incs {
display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
margin-top: 6px;
}
.input-incs::before {
content: '더하기';
font-size: 10px; font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.06em;
padding-right: 4px;
text-transform: uppercase;
flex-shrink: 0;
}
.input-inc {
display: inline-flex; align-items: center;
padding: 4px 10px; min-height: 26px;
background: var(--brand-accent-soft);
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: 12px; font-weight: 700;
color: var(--brand-accent);
cursor: pointer;
font-family: var(--font-mono);
letter-spacing: 0.02em;
transition: background 0.12s, color 0.12s, transform 0.08s;
}
.input-inc:hover {
background: var(--brand-accent);
color: var(--card-bg);
}
.input-inc:active { transform: scale(0.94); }
/* === preset 행 — "예시 값" 마이크로 라벨 (기존 .preset 스타일은 유지, 라벨만 추가) === */
.preset-row { align-items: center; }
.preset-row::before {
content: '예시';
font-size: 10px; font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.06em;
padding-right: 4px;
text-transform: uppercase;
flex-shrink: 0;
}
/* === input-actions — 더하기 + 예시 한 줄 묶음 wrapper (JS 자동 주입) === */
.input-actions {
display: flex; flex-wrap: wrap;
align-items: center;
row-gap: 6px; column-gap: 18px;
margin-top: 6px;
}
.input-actions > .input-incs,
.input-actions > .preset-row { margin-top: 0; }
/* 두 그룹 사이 시각적 구분선 (한 줄에 같이 있을 때만) */
.input-actions > .input-incs + .preset-row {
position: relative; padding-left: 14px;
}
.input-actions > .input-incs + .preset-row::after {
content: '';
position: absolute; left: 0; top: 50%;
width: 1px; height: 14px;
background: var(--border);
transform: translateY(-50%);
}
@media (max-width: 600px) {
.input-inc { font-size: 12px; padding: 5px 10px; min-height: 28px; }
.input-reset { width: 24px; height: 24px; }
.input-incs::before, .preset-row::before { font-size: 10px; }
.input-actions { column-gap: 12px; }
/* 모바일: 줄바꿈 시 separator 가 외각에 붙어 어색하므로 숨김 */
.input-actions > .input-incs + .preset-row { padding-left: 0; }
.input-actions > .input-incs + .preset-row::after { display: none; }
}
/* ── 34. 광고 슬롯 placeholder ──
현재 비공개라 hidden 처리. public 이전 후 .hidden 속성 제거.
슬롯 위치는 data-slot 속성으로 식별 (result-bottom·related-top·dash-top). */
.ad-slot {
width: 100%; padding: 16px;
background: var(--bg-elevated);
border: 1px dashed var(--border);
border-radius: var(--radius);
text-align: center;
font-size: 12px; color: var(--text-muted);
margin: 16px 0;
box-sizing: border-box;
}
.ad-slot--inline { min-height: 90px; }
.ad-slot--rectangle { min-height: 250px; }
.ad-slot[hidden] { display: none !important; }
.ad-slot--placeholder::before {
content: 'AD'; display: inline-block;
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.2em; color: var(--text-muted);
padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px;
}
/* ── 35. 모바일 사전 보강 (계산기 페이지·대시보드 공통) ── */
@media (max-width: 600px) {
.field__label { flex-wrap: wrap; row-gap: 2px; }
.field__label .field__hint { font-size: 11px; }
.related-grid { gap: 8px; }
.breadcrumb { font-size: 12px; }
.ad-slot { padding: 12px; margin: 12px 0; }
.ad-slot--rectangle { min-height: 200px; }
}
/* ── 36. 계산기 UX 동적 효과 (페이지 공통) ──
common.js 의 initCalcUX() 가 클래스를 토글. opt-out: . */
/* A. 첫 입력 진입 펄스 — 1회 글로우 ring */
@keyframes cs-onboard-glow {
0% { box-shadow: 0 0 0 0 var(--brand-accent-soft); }
50% { box-shadow: 0 0 0 6px var(--brand-accent-soft); }
100% { box-shadow: 0 0 0 0 transparent; }
}
.input-row.cs-onboard {
border-radius: var(--radius);
animation: cs-onboard-glow 1.6s ease-out 0.4s 1;
}
/* B. 활성 필드 라벨 강조 — focus-within 시 좌측 깜빡 dot + 라벨 색상 */
.field__label > span:first-child { transition: color 0.18s; }
.field:focus-within .field__label > span:first-child { color: var(--brand-accent); }
.field:focus-within .field__label > span:first-child::before {
content: ''; display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: var(--brand-accent);
margin-right: 6px; vertical-align: middle;
animation: cs-dot-blink 1.2s ease-in-out infinite;
}
@keyframes cs-dot-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* C. 결과 값 변경 플래시 — 텍스트 색 + 미세 scale.
라이트 모드에서 brand-accent-soft(0.10 alpha) 가 약해서 brand-accent 자체로 변경, blur 축소. */
@keyframes cs-result-flash {
0% { transform: scale(1); text-shadow: 0 0 0 var(--brand-accent); }
35% { transform: scale(1.025); text-shadow: 0 0 10px var(--brand-accent); }
100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
}
.result__value.cs-flash, .breakdown__value.cs-flash {
animation: cs-result-flash 0.45s ease-out;
transform-origin: left center;
}
/* D. Enter 마지막 입력 후 결과 카드 도착 강조 */
@keyframes cs-result-arrived {
0% { box-shadow: 0 0 0 0 var(--brand-accent); }
60% { box-shadow: 0 0 0 5px var(--brand-accent-soft); }
100% { box-shadow: 0 0 0 0 transparent; }
}
.result.cs-arrived { animation: cs-result-arrived 0.7s ease-out; }
/* prefers-reduced-motion 존중 */
@media (prefers-reduced-motion: reduce) {
.input-row.cs-onboard,
.result__value.cs-flash, .breakdown__value.cs-flash,
.result.cs-arrived,
.field:focus-within .field__label > span:first-child::before {
animation: none !important;
}
}
/* ==========================================================================
시나리오 비교 모드 (scenarios-section) — slug 별 최대 3개 저장·복원·비교
결과 .section 직후 위치. 단일 1px 카드 항목 (parallel siblings · card-in-card 아님)
========================================================================== */
.scenarios-section {
margin: 24px 0;
}
.scenarios-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
margin-bottom: 12px;
}
.scenarios-head__title {
margin: 0;
font-size: 16px;
display: inline-flex; align-items: center; gap: 6px;
}
.scenarios-head__count {
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
color: var(--text-muted);
letter-spacing: 0;
}
.scenarios-save-btn {
flex-shrink: 0;
}
.scenarios-list {
display: flex; flex-direction: column;
gap: 8px;
}
.scenarios-empty {
padding: 14px 16px;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.6;
text-align: center;
}
.scenarios-empty strong { color: var(--text-secondary); }
.scenario-item {
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--card-bg);
display: flex; flex-direction: column; gap: 6px;
}
.scenario-item__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px;
}
.scenario-item__name {
font-size: 13px; font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
}
.scenario-item__date {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
}
.scenario-item__inputs {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
line-height: 1.5;
word-break: keep-all;
}
.scenario-item__bottom {
display: flex; align-items: center; gap: 8px;
padding-top: 6px;
border-top: 1px solid var(--border);
}
.scenario-item__result-label {
font-family: var(--font-mono);
font-size: 10px; font-weight: 700;
letter-spacing: 0.06em;
color: var(--brand-accent);
}
.scenario-item__result {
flex: 1; min-width: 0;
font-size: 14px; font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scenario-item__btn {
flex-shrink: 0;
padding: 4px 10px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-xs);
font: inherit; font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.scenario-item__btn:hover {
color: var(--brand-accent);
border-color: var(--brand-accent);
background: var(--brand-accent-soft);
}
.scenario-item__btn--ghost {
width: 26px; height: 26px;
padding: 0;
font-size: 14px;
color: var(--text-muted);
}
.scenario-item__btn--ghost:hover {
color: var(--danger);
border-color: var(--danger);
background: transparent;
}
@media (max-width: 600px) {
.scenario-item { padding: 9px 12px; }
.scenario-item__bottom { flex-wrap: wrap; }
.scenario-item__result { width: 100%; flex: 0 0 100%; margin-bottom: 4px; }
.scenarios-empty { padding: 12px; }
}
/* ==========================================================================
FAQ 섹션 (자주 묻는 질문) — 박스 X · 항목 간 hairline 구분 + 토글
addedAt 7일 이내 항목은 "최근" 배지로 갱신감 시각화
========================================================================== */
.faq-section { margin: 32px 0 24px; }
.faq-item {
padding: 12px 0;
border-top: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item__q {
display: flex; align-items: center; gap: 8px;
cursor: pointer;
font-size: 14px; font-weight: 600;
color: var(--text);
list-style: none;
padding: 4px 0;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q-text { flex: 1; line-height: 1.45; }
.faq-item__chevron {
width: 12px; height: 12px;
flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.2s;
}
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); color: var(--brand-accent); }
.faq-item:hover .faq-item__q-text { color: var(--brand-accent); }
.faq-item__new-badge {
flex-shrink: 0;
font-size: 10px; font-weight: 700;
letter-spacing: 0.04em;
color: var(--brand-accent);
background: var(--brand-accent-soft);
padding: 2px 6px;
border-radius: var(--radius-xs);
}
.faq-item__a {
margin-top: 10px;
padding: 4px 18px 4px 0;
font-size: 13px;
color: var(--text-secondary);
line-height: 1.7;
}
@media (max-width: 600px) {
.faq-item__q { font-size: 13px; }
.faq-item__a { font-size: 12.5px; }
}
/* ==========================================================================
AI 진화 로그 (evolution.html) — 패치 통계 + 날짜별 타임라인
- 단일 1px 카드 다수 (parallel siblings · card-in-card 아님)
- 인라인 필터 + 날짜 그룹 헤더 + 패치 항목 카드
========================================================================== */
.evol-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 0 0 24px;
}
@media (max-width: 600px) {
.evol-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
.evol-stat {
padding: 14px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--card-bg);
text-align: center;
}
.evol-stat__value {
display: block;
font-size: 26px; font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
line-height: 1.1;
letter-spacing: -0.02em;
}
.evol-stat__label {
display: block;
margin-top: 6px;
font-size: 11px; font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.04em;
}
.evol-filter {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0 0 16px;
}
.evol-filter__btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border);
border-radius: 999px;
font: inherit; font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.evol-filter__btn:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
.evol-filter__btn.is-active {
background: var(--brand-accent);
border-color: var(--brand-accent);
color: var(--brand-accent-fg);
}
.evol-timeline {
display: flex; flex-direction: column;
gap: 22px;
}
.evol-empty {
padding: 40px 16px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
}
.evol-day__head {
display: flex; align-items: baseline; gap: 10px;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
font-family: var(--font-mono);
}
.evol-day__date {
font-size: 14px; font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
}
.evol-day__rel {
font-size: 11px;
color: var(--text-muted);
}
.evol-day__count {
margin-left: auto;
font-size: 11px; font-weight: 600;
color: var(--brand-accent);
}
.evol-day__items {
display: flex; flex-direction: column;
gap: 6px;
}
.evol-item {
display: flex; align-items: stretch; gap: 12px;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--card-bg);
text-decoration: none;
color: var(--text);
transition: border-color 0.15s, background 0.15s;
}
.evol-item:hover {
border-color: var(--brand-accent);
background: var(--brand-accent-soft);
text-decoration: none;
}
.evol-item__cat {
flex-shrink: 0;
align-self: flex-start;
padding: 2px 8px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--brand-accent);
background: var(--brand-accent-soft);
border-radius: var(--radius-xs);
min-width: 78px;
text-align: center;
}
.evol-item--auto .evol-item__cat {
background: var(--brand-accent);
color: var(--brand-accent-fg);
}
.evol-item__main { flex: 1; min-width: 0; }
.evol-item__title {
font-size: 14px; font-weight: 600;
color: var(--text);
margin-bottom: 2px;
line-height: 1.4;
}
.evol-item__v {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-left: 4px;
font-weight: 500;
}
.evol-item__auto-tag {
display: inline-block;
padding: 1px 6px;
font-size: 10px; font-weight: 700;
background: var(--brand-accent-soft);
color: var(--brand-accent);
border-radius: var(--radius-xs);
letter-spacing: 0.04em;
margin-left: 4px;
vertical-align: 1px;
}
.evol-item__patch {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.55;
}
.evol-more {
text-align: center;
margin: 24px 0;
}
@media (max-width: 600px) {
.evol-item { gap: 10px; padding: 9px 12px; }
.evol-item__cat { min-width: 64px; font-size: 9px; }
.evol-item__title { font-size: 13px; }
.evol-item__patch { font-size: 12px; }
}
/* ==========================================================================
결과 해석 박스 (result-insight) — data/insights.json 기반 자동 해설
- 결과 .section 직후 단일 1px 카드. 그라디언트 X · 좌측 두꺼운 보더 X · card-in-card X
- 톤별 headline 작은 칩(success/warn/danger/info), 본문은 인라인. 컨텍스트 footnote 는 dashed divider 한 줄.
========================================================================== */
.result-insight {
margin: 14px 0 24px;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--card-bg);
font-size: 13px;
line-height: 1.6;
animation: cs-insight-in 0.3s ease-out;
}
.result-insight[hidden] { display: none; }
@keyframes cs-insight-in {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: translateY(0); }
}
/* .result 카드 내부 변형 — 박스 없음, 결과 카드의 일부로 통합. dashed top 으로만 구분 */
.result-insight--inline {
margin: 14px 0 0;
padding: 12px 0 0;
border: 0;
border-top: 1px solid var(--brand-accent);
border-radius: 0;
background: transparent;
}
.result--success .result-insight--inline { border-top-color: var(--success); }
.result--warn .result-insight--inline { border-top-color: var(--warn); }
.result--danger .result-insight--inline { border-top-color: var(--danger); }
/* 타이핑 커서 */
.result-insight__text.is-typing::after {
content: '▍';
display: inline-block;
margin-left: 1px;
color: var(--brand-accent);
animation: cs-cursor-blink 0.7s steps(1) infinite;
font-weight: 400;
}
@keyframes cs-cursor-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.result-insight__text.is-typing::after { animation: none; opacity: 0; }
}
.result-insight__head {
display: flex; align-items: center; gap: 6px;
margin-bottom: 8px;
font-size: 11px; font-weight: 700;
color: var(--brand-accent);
letter-spacing: 0.04em;
}
.result-insight__sparkle { font-size: 12px; line-height: 1; }
.result-insight__body { color: var(--text); }
.result-insight__headline {
display: inline-block;
padding: 2px 8px;
margin-right: 6px;
border-radius: var(--radius-xs);
font-size: 11px; font-weight: 700;
letter-spacing: 0.02em;
vertical-align: 1px;
}
.result-insight__headline--info { background: var(--brand-accent-soft); color: var(--brand-accent); }
.result-insight__headline--success { background: var(--success-soft); color: var(--success); }
.result-insight__headline--warn { background: var(--warn-soft); color: var(--warn); }
.result-insight__headline--danger { background: var(--danger-soft); color: var(--danger); }
.result-insight__text {
display: inline;
color: var(--text);
}
.result-insight__context {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--border);
font-size: 11px;
color: var(--text-muted);
line-height: 1.5;
}
@media (max-width: 600px) {
.result-insight { padding: 12px 14px; font-size: 12.5px; }
.result-insight__headline { display: inline-flex; margin-bottom: 4px; }
}
/* 인쇄 시: 인사이트 박스도 출력에 포함 (트레이드오프 없음 — 신뢰 신호 강화) */
@media print {
.result-insight {
page-break-inside: avoid;
break-inside: avoid;
border: 1px solid #cccccc !important;
background: #ffffff !important;
animation: none !important;
}
}
/* ==========================================================================
계산기 페이지 버전 메타 (calc-meta) — page-header 직후 한 줄 인라인 스트립
- v + 최근 패치일 + 변경 이력 토글
- 박스 없음. 펼친 이력만 단일 1px 카드.
========================================================================== */
.calc-meta {
display: flex; flex-wrap: wrap; align-items: center;
gap: 4px 8px;
margin: -4px 0 14px;
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.calc-meta__v {
font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
font-weight: 700;
color: var(--text-secondary);
}
.calc-meta__date { color: var(--text-muted); }
.calc-meta__sep { color: var(--text-muted); user-select: none; }
.calc-meta__auto {
display: inline-flex; align-items: center; gap: 3px;
padding: 1px 6px;
font-size: 10px; font-weight: 700;
color: var(--brand-accent);
background: var(--brand-accent-soft);
border-radius: var(--radius-xs);
letter-spacing: 0.04em;
}
.calc-meta__history-btn {
display: inline-flex; align-items: center; gap: 4px;
background: transparent; border: 0; padding: 0;
font: inherit; font-size: 11px;
color: var(--text-muted); cursor: pointer;
letter-spacing: inherit;
}
.calc-meta__history-btn:hover { color: var(--brand-accent); }
.calc-meta__history-btn[aria-expanded="true"] { color: var(--brand-accent); }
.calc-meta__history-btn svg { width: 10px; height: 10px; transition: transform 0.15s; }
.calc-meta__history-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.calc-meta__history-count {
font-weight: 700;
color: var(--text-secondary);
}
.calc-meta__history-btn:hover .calc-meta__history-count { color: var(--brand-accent); }
.calc-meta__history {
flex: 0 0 100%;
margin: 6px 0 0;
padding: 8px 12px;
list-style: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--card-bg);
font-size: 12px;
}
.calc-meta__history li {
display: flex; gap: 10px; align-items: baseline;
padding: 5px 0;
color: var(--text-secondary);
}
.calc-meta__history li + li { border-top: 1px solid var(--border); }
.calc-meta__history-v {
flex: 0 0 auto;
font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
font-weight: 700;
color: var(--text);
min-width: 48px;
}
.calc-meta__history-date {
flex: 0 0 auto;
color: var(--text-muted);
min-width: 56px;
}
.calc-meta__history-patch {
flex: 1 1 auto;
line-height: 1.5;
}
.calc-meta__history-tag {
display: inline-block;
padding: 0 5px;
font-size: 10px; font-weight: 700;
color: var(--brand-accent);
background: var(--brand-accent-soft);
border-radius: var(--radius-xs);
margin-right: 2px;
}
/* ==========================================================================
인쇄 / PDF 친화 — 결과지처럼 사용 가능한 출력
- 네비게이션·사이드바·관련계산기·액션 버튼 숨김
- 입력값 + 결과 + 공식 + 한계 섹션은 보존 (신뢰 신호 유지)
- 다크 테마라도 출력은 항상 라이트 (잉크 절약 + 가독성)
- 결과 카드·공식·표는 페이지 분리 방지
- 페이지별 opt-out: 요소에 `data-no-print` 부여
========================================================================== */
@media print {
@page { margin: 14mm; size: A4 portrait; }
/* 다크 테마여도 라이트로 강제 */
:root, [data-theme="dark"] {
--bg: #ffffff;
--card-bg: #ffffff;
--text: #000000;
--text-secondary: #2a2a2a;
--text-muted: #555555;
--border: #bbbbbb;
--brand-accent: #6b4516;
--brand-accent-soft: #f1ead8;
--shadow: none;
}
html, body { background: #ffffff !important; color: #000000 !important; }
/* 숨김: 인터랙션·네비·광고·사이드바·이동 버튼·메타 스트립 */
.site-header,
.layout-2col__aside,
.page-header__actions,
.preset-row,
.input-actions,
.input-row__reset,
.back-btn,
.breadcrumb,
.calc-meta,
[data-cs-search],
[data-ad-slot],
[data-no-print] { display: none !important; }
/* "관련 계산기" 섹션 통째로 숨김 (h2 + grid) */
.section:has(.related-grid) { display: none !important; }
/* 2-col 그리드를 단일 칼럼으로 — 320px 사이드바 자리 회수 */
.layout-2col {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
}
/* 본문 폭: A4 활용 */
html, body, main, .layout-2col, .layout-2col__main, .layout-2col__main--calc {
max-width: 100% !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* 섹션 간 간격 축소 (불필요한 페이지 넘김 방지) */
.section { margin: 0 0 6mm 0 !important; padding: 0 !important; }
.section--first { margin-top: 0 !important; }
/* 카드: 그림자 제거 + 얇은 테두리 + 분리 방지 */
.card {
box-shadow: none !important;
border: 1px solid #bbbbbb !important;
background: #ffffff !important;
page-break-inside: avoid;
break-inside: avoid;
margin: 0 0 8mm 0 !important;
}
/* 결과 카드: 강조 유지 + 절대 분리 금지 */
.result {
page-break-inside: avoid;
break-inside: avoid;
border: 1.5px solid #000000 !important;
}
.result__value, .breakdown__value {
color: #000000 !important;
text-shadow: none !important;
}
/* 입력 필드: 사용자가 입력한 값이 인쇄에 보이도록 */
input, select, textarea {
border: 1px solid #999999 !important;
background: #ffffff !important;
color: #000000 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
input::placeholder { color: transparent !important; } /* 잉크 절약 */
/* breakdown / 공식 / help 표 — 분리 방지 */
.breakdown, .formula--block, .help-table { page-break-inside: avoid; break-inside: avoid; }
.breakdown__cell {
border: 1px solid #cccccc !important;
background: #ffffff !important;
}
.formula--block {
background: #f2f4f7 !important;
border: 1px solid #bbbbbb !important;
}
.help-table { border-collapse: collapse; }
.help-table th, .help-table td {
border: 1px solid #999999 !important;
background: #ffffff !important;
color: #000000 !important;
}
/* 제목과 첫 줄을 붙여둠 */
h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
/* 푸터: 한 줄로 축소 + 마지막 콘텐츠 페이지에 붙이기 (혼자 새 페이지로 가지 않게) */
.site-footer {
break-before: avoid !important;
page-break-before: avoid !important;
break-inside: avoid;
page-break-inside: avoid;
margin-top: 4mm !important;
padding: 4px 0 0 !important;
border-top: 1px solid #bbbbbb;
font-size: 9pt;
line-height: 1.4;
color: #555555;
text-align: center;
}
.site-footer > div { display: inline; }
.site-footer__version { display: inline; margin-left: 6px; }
/* 직전 main 도 자기 뒤에 break 두지 않도록 */
main { break-after: avoid; page-break-after: avoid; }
/* 모든 애니메이션 정지 */
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
/* 본문 내 외부 링크 URL 인쇄에 노출 (추적성). 내비/액션 버튼 등은 이미 숨김 */
.section a[href^="http"]::after,
p a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 9pt;
color: #555555;
word-break: break-all;
}
}
/* ──────────────────────────────────────────────
Above-the-fold 컴팩트화 — 모바일에서 입력 → 결과 1 스크롤 이내 도달.
기존 모바일 룰을 override (선언 순서로). 시각적 균형은 유지하되
누적 vertical rhythm 만 ~110px 절감 (page-header·section padding·field gap).
────────────────────────────────────────────── */
@media (max-width: 768px) {
.wide { padding: 12px 16px 32px; }
.breadcrumb { font-size: 10px; margin-bottom: 8px; }
.back-btn--inline + .breadcrumb { margin-bottom: 8px; margin-left: 6px; }
.page-header { margin-bottom: 14px; }
.page-header__label { font-size: 10px; margin-bottom: 4px; }
.page-header__title { font-size: 22px; line-height: 1.25; margin: 0 0 6px; }
.page-header__desc { font-size: 14px; line-height: 1.55; }
.section { padding: 16px 0; }
.section__title { margin: 0 0 10px; font-size: 16px; }
/* "입력" 타이틀은 입력칸이 시각적으로 자명해 약화 — 결과로 더 빨리 도달. */
.section--first .section__title { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.02em; }
.section__lead { font-size: 14px; line-height: 1.55; margin-bottom: 10px; }
.field { margin-bottom: 10px; gap: 4px; }
.preset-row { margin-top: 4px; }
}
/* ─────── v2.00 공용 컴포넌트 (radio-pill, ai-insight) ─────── */
/* 모드 토글용 라디오 (DB/DC, 모드별 등) */
.radio-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.radio-pill {
position: relative;
cursor: pointer;
user-select: none;
}
.radio-pill input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio-pill span {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg);
color: var(--text-secondary);
font-size: 0.84rem;
font-weight: 600;
transition: all 0.15s;
}
.radio-pill:hover span {
border-color: var(--brand-accent);
color: var(--text);
}
.radio-pill input:checked + span {
background: var(--brand-accent-soft);
border-color: var(--brand-accent);
color: var(--brand-accent);
}
/* 결과 해석 박스 — 헤더 스트립 패턴 (그라디언트 배경·두꺼운 좌측 보더 금지) */
.ai-insight {
margin-top: 14px;
padding: 12px 14px 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
position: relative;
overflow: hidden;
}
.ai-insight::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--brand-accent), #8b5cf6);
}
.ai-insight__head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.ai-insight__icon { font-size: 1rem; line-height: 1; }
.ai-insight__title {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-accent);
}
.ai-insight__body {
color: var(--text-secondary);
font-size: 0.88rem;
line-height: 1.55;
}
.ai-insight__body strong { color: var(--text); font-weight: 700; }
/* ── 머니스쿱 헤더 토글 차용 (3사 통일) ──
.header-tools 로 스코프해 기존 .header-tools button 규칙을 이긴다 */
.header-tools .theme-toggle,
.header-tools .header-search-btn,
.header-tools .site-nav__toggle,
.header-tools .header-tools__btn {
width: 38px; height: 38px;
display: grid; place-items: center;
border-radius: var(--radius-sm);
border: 1px solid var(--border, #e2e8f0);
background: var(--bg-elevated, #f8fafc);
color: var(--text-secondary, #475569);
transition: all .2s var(--ease, ease);
position: relative; overflow: hidden; cursor: pointer;
flex-shrink: 0; text-decoration: none;
}
.header-tools .theme-toggle:hover,
.header-tools .header-search-btn:hover,
.header-tools .site-nav__toggle:hover,
.header-tools .header-tools__btn:hover {
color: var(--text, #1e293b);
border-color: var(--border-strong, #94a3b8);
background: var(--bg-elevated, #f8fafc);
transform: translateY(-1px);
}
.header-tools .theme-toggle svg,
.header-tools .header-search-btn svg,
.header-tools .site-nav__toggle svg,
.header-tools .header-tools__btn svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (max-width: 360px) {
.header-tools .theme-toggle,
.header-tools .header-search-btn,
.header-tools .site-nav__toggle,
.header-tools .header-tools__btn { width: 34px; height: 34px; }
}
/* ==========================================================================
즉석검색 모달 (scoop-search-modal) — 단일 1px 카드 + 내부 hairline 구분
- .cmdk-overlay: 풀 viewport 백드롭, 모달 중앙 정렬
- .cmdk-modal: 단일 카드. 내부에 input row, list, hint bar 가 hairline 으로 분리
========================================================================== */
.cmdk-overlay {
position: fixed; inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
padding-left: 16px;
padding-right: 16px;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.cmdk-overlay[hidden] { display: none; }
.cmdk-modal {
width: min(640px, 100%);
max-height: 76vh;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
display: flex; flex-direction: column;
overflow: hidden;
}
.cmdk-input-row {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
}
.cmdk-icon {
width: 18px; height: 18px;
color: var(--text-muted);
flex-shrink: 0;
}
.cmdk-input {
flex: 1; min-width: 0;
border: 0; outline: none;
background: transparent;
color: var(--text);
font: inherit; font-size: 16px;
padding: 0;
}
.cmdk-input::placeholder { color: var(--text-muted); }
.cmdk-esc {
flex-shrink: 0;
padding: 2px 8px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-xs);
font: inherit; font-size: 11px; font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.04em;
cursor: pointer;
transition: color 0.12s, border-color 0.12s;
}
.cmdk-esc:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
.cmdk-results {
list-style: none;
margin: 0; padding: 6px;
flex: 1;
overflow-y: auto;
}
.cmdk-result {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.1s;
}
.cmdk-result.is-active { background: var(--brand-accent-soft); }
.cmdk-result.is-active .cmdk-result__title { color: var(--brand-accent); font-weight: 600; }
.cmdk-result__cat {
flex-shrink: 0;
font-size: 10px; font-weight: 700;
letter-spacing: 0.06em;
color: var(--brand-accent);
background: var(--brand-accent-soft);
padding: 2px 6px;
border-radius: var(--radius-xs);
min-width: 72px;
text-align: center;
white-space: nowrap;
}
.cmdk-result.is-active .cmdk-result__cat {
background: var(--card-bg);
}
.cmdk-result__title {
flex: 1; min-width: 0;
color: var(--text);
font-size: 14px; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmdk-result__arrow {
flex-shrink: 0;
font-size: 12px;
color: var(--text-muted);
opacity: 0;
transition: opacity 0.12s;
}
.cmdk-result.is-active .cmdk-result__arrow {
color: var(--brand-accent);
opacity: 1;
}
.cmdk-empty {
padding: 28px 16px;
text-align: center;
font-size: 13px;
color: var(--text-muted);
}
.cmdk-title { padding: 12px 16px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--brand-accent); text-transform: uppercase; }
.cmdk-seeall { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: var(--brand-accent); cursor: pointer; border-top: 1px solid var(--border); }
.cmdk-seeall.is-active, .cmdk-seeall:hover { background: var(--brand-accent-soft); }
.cmdk-hint-bar {
display: flex; flex-wrap: wrap; gap: 14px;
padding: 8px 14px;
border-top: 1px solid var(--border);
font-size: 11px;
color: var(--text-muted);
background: var(--bg);
}
.cmdk-hint-bar kbd {
display: inline-block;
padding: 1px 5px;
margin-right: 2px;
border: 1px solid var(--border);
border-radius: var(--radius-xs);
font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
font-size: 10px;
color: var(--text-secondary);
background: var(--card-bg);
}
@media (max-width: 600px) {
.cmdk-overlay { padding-top: 6vh; }
.cmdk-modal { max-height: 84vh; }
.cmdk-input { font-size: 16px; } /* iOS 자동 zoom 방지 */
.cmdk-result__cat { min-width: 60px; }
.cmdk-hint-bar { gap: 10px; font-size: 10px; }
}
/* ── 헤더 도구 시각 순서 고정 (검색·즐겨찾기·테마=0 → 바로가기설치 → 메뉴) ──
pwa-install·cat-toggle 는 JS가 맨앞 주입하므로 flex order 로 위치 교정 */
.header-tools .pwa-install-btn { order: -1; }
.header-tools .cat-toggle { order: 9; }
/* 홈 hero 자동완성 */
.hero-search { position: relative; }
.hero-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.hero-suggest__item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; border-top: 1px solid var(--border); }
.hero-suggest__item:first-child { border-top: 0; }
.hero-suggest__item:hover { background: var(--bg-elevated); }
.hero-suggest__item.is-active { background: var(--brand-accent-soft); }
.hero-suggest__item.is-active .hero-suggest__title { color: var(--brand-accent); font-weight: 600; }
.hero-suggest__cat { font-size: 11px; font-weight: 700; color: var(--brand-accent); min-width: 40px; }
.hero-suggest__title { font-size: 14.5px; color: var(--text); }
.hero-suggest__more { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--brand-accent); text-decoration: none; border-top: 1px solid var(--border-strong); }
.hero-suggest__more:hover { background: var(--brand-accent-soft); }
/* ── 홈 대시보드 ─────────────────────────────── */
.home-dash { margin: 8px 0 4px; }
.home-dash__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-accent); margin: 0 0 10px; }
.dash__title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
.dash__title small { font-size: 12px; font-weight: 500; color: var(--text-muted); }
/* ① KPI 스탯 타일 — 규모 강조 */
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px; }
@media (min-width: 640px) { .stat-tiles { grid-template-columns: repeat(6, 1fr); } }
.stat-tile { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: border-color 0.14s, transform 0.14s; }
.stat-tile:hover { border-color: var(--brand-accent); transform: translateY(-2px); }
.stat-tile__num { font-family: var(--font-mono); font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-tile__label { font-size: 12px; color: var(--text-secondary); }
/* ② 증상 연관 영양소 — 대형 막대(히어로) */
.dash-hero { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 18px 8px; margin: 0 0 16px; }
.dbar-list { display: flex; flex-direction: column; gap: 9px; }
.dbar-row { display: grid; grid-template-columns: 78px 1fr 30px; align-items: center; gap: 12px; text-decoration: none; padding: 1px 0; }
.dbar-row__name { text-align: right; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbar-row__track { height: 20px; background: var(--bg-elevated); border-radius: var(--radius-sm); overflow: hidden; }
.dbar-row__fill { display: block; height: 100%; background: var(--brand-accent); border-radius: var(--radius-sm); min-width: 4px; transition: background 0.14s; }
.dbar-row:hover .dbar-row__fill { background: var(--brand-accent-strong); }
.dbar-row__val { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* ③④ 2단 */
.dash-2col { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 16px; }
@media (min-width: 720px) { .dash-2col { grid-template-columns: 1fr 1fr; } }
.dash-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
/* 히트맵(좌 자연폭) + 목표별 카드(우) — 두 카드의 내용 높이가 비슷해 빈 공간이 안 생기는 짝 */
.dash-hm-row { display: flex; gap: 14px; margin: 0 0 16px; align-items: stretch; }
/* 사이드가 고정폭을 갖고 히트맵이 나머지를 차지 — 설명 문단의 max-content 가 폭을 부풀리는 것 방지 */
.dash-card--hm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* 높이 차가 나면 범례를 카드 바닥에 붙여 잔여 공간을 매트릭스·범례 사이로 흡수 */
.dash-card--hm .hm__legend { margin-top: auto; padding-top: 12px; }
.dash-hm-side { flex: 0 0 340px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-hm-side > .dash-card { flex: 1 1 auto; display: flex; flex-direction: column; }
.dash-hm-side .gt-list { flex: 1; justify-content: space-evenly; }
@media (max-width: 720px) { .dash-hm-row { flex-direction: column; } .dash-hm-side { flex: 0 0 auto; } .dash-hm-side > .dash-card { flex: 0 0 auto; } }
/* 조합 카드 — 히트맵 행 아래 풀폭 가로 스트립 */
.dash-card--combos { margin: 0 0 16px; }
/* ③ 도넛 — 단일 오렌지 hue 음영 4단 */
.donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut { width: 132px; height: 132px; flex-shrink: 0; }
.donut__seg--0 { stroke: var(--dviz-1); }
.donut__seg--1 { stroke: var(--dviz-2); }
.donut__seg--2 { stroke: var(--dviz-3); }
.donut__seg--3 { stroke: var(--dviz-4); }
.donut__total { font-family: var(--font-mono); font-size: 22px; font-weight: 800; fill: var(--text); }
.donut__cap { font-size: 11px; fill: var(--text-muted); }
.donut-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; min-width: 120px; }
.donut-leg__item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.donut-leg__dot { width: 10px; height: 10px; border-radius: var(--radius-xs); flex-shrink: 0; }
.donut-leg__dot--0 { background: var(--dviz-1); }
.donut-leg__dot--1 { background: var(--dviz-2); }
.donut-leg__dot--2 { background: var(--dviz-3); }
.donut-leg__dot--3 { background: var(--dviz-4); }
.donut-leg__val { margin-left: auto; font-family: var(--font-mono); color: var(--text); font-weight: 700; }
/* ④ 조합 상태 칩 */
.combos-card { display: flex; flex-wrap: wrap; gap: 10px; text-decoration: none; align-items: center; }
.combo-chip { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }
.combo-chip__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.combo-chip--good .combo-chip__dot { background: var(--success); }
.combo-chip--warn .combo-chip__dot { background: var(--warn); }
.combo-chip--danger .combo-chip__dot { background: var(--danger); }
.combo-chip__num { font-family: var(--font-mono); font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.combo-chip__label { font-size: 13px; color: var(--text-secondary); }
.combos-card__more { width: 100%; font-size: 12.5px; color: var(--brand-accent); font-weight: 600; margin-top: 2px; }
/* ⑤ 대시보드 확장 위젯 — 히트맵·근거바·조합·큐레이션 */
/* A. 약물유발 결핍 히트맵 */
.hm-wrap { overflow-x: auto; }
.hm { border-collapse: separate; border-spacing: 2px; }
.hm__cap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hm__colh { padding: 0 2px 6px; vertical-align: bottom; }
.hm__colh span { display: inline-block; font-size: 11px; color: var(--text-secondary); white-space: nowrap; writing-mode: vertical-rl; max-height: 96px; overflow: hidden; }
.hm__rowh { text-align: right; padding-right: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hm__rowh a { color: var(--text); text-decoration: none; }
.hm__rowh a:hover { color: var(--brand-accent); }
/* 가로는 채우고 세로만 압축한 직사각 셀 — 14행 매트릭스 높이 절감.
inset 1px 미세 격자로 행·열 추적 가독성 확보 */
.hm__cell { width: 30px; height: 20px; border-radius: var(--radius-xs); background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--border); }
.hm__cell--hi { background: var(--dviz-1); }
.hm__cell--mid { background: var(--dviz-2); }
.hm__cell--lo { background: var(--dviz-3); }
.hm__note { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 12px; }
.hm__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.hm__legend-lead { font-weight: 700; color: var(--text); margin-right: 2px; }
.hm__leg { display: inline-flex; align-items: center; gap: 5px; }
.hm__leg::before { content: ""; width: 12px; height: 12px; border-radius: var(--radius-xs); }
.hm__leg--hi::before { background: var(--dviz-1); }
.hm__leg--mid::before { background: var(--dviz-2); }
.hm__leg--lo::before { background: var(--dviz-3); }
/* B. 목표별 핵심 영양소 — "이 목표엔 이 영양소" 빠른 참조 */
.gt-list { display: flex; flex-direction: column; gap: 1px; }
.gt-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; }
.gt-item:hover { background: var(--bg-elevated); }
.gt-item__goal { font-size: 13.5px; font-weight: 700; color: var(--text); }
.gt-item:hover .gt-item__goal { color: var(--brand-accent); }
.gt-item__nuts { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
/* 자가진단 CTA — 대시보드 하단 풀폭 배너 */
.dash-cta-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; padding: 16px 20px; background: var(--brand-accent-soft); border: 1px solid var(--brand-accent); border-radius: var(--radius-lg); text-decoration: none; }
.dash-cta-banner__text { display: flex; flex-direction: column; gap: 3px; }
.dash-cta-banner__title { font-size: 16px; font-weight: 800; color: var(--brand-accent); }
.dash-cta-banner__desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.dash-cta-banner__btn { flex-shrink: 0; font-size: 13.5px; font-weight: 700; color: var(--brand-accent-fg); background: var(--brand-accent); padding: 10px 20px; border-radius: var(--radius-sm); }
.dash-cta-banner:hover .dash-cta-banner__btn { background: var(--brand-accent-strong); }
/* E. 대표 조합 하이라이트 */
.hc-list { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.hc-item { display: flex; gap: 10px; align-items: flex-start; }
.hc-item__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.hc-item--good .hc-item__dot { background: var(--success); }
.hc-item--danger .hc-item__dot { background: var(--danger); }
.hc-item__pair { font-size: 14px; font-weight: 700; color: var(--text); }
.hc-item__sign { color: var(--text-muted); font-weight: 400; }
.hc-item__note { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 1px; }
.hc-list__more { font-size: 12.5px; color: var(--brand-accent); font-weight: 600; margin-top: 2px; }
/* 가로 스트립 변형 — 항목이 열로 나란히, 좁으면 자동 줄바꿈 */
.hc-list--row { flex-direction: row; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; }
.hc-list--row .hc-item { flex: 1 1 190px; min-width: 0; }
.hc-list--row .hc-list__more { flex-basis: 100%; margin-top: 0; }
/* D. 추천 탐색 큐레이션 */
.dash__title--section { margin-top: 20px; }
.hl-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .hl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .hl-grid { grid-template-columns: repeat(4, 1fr); } }
.hl-card { display: flex; flex-direction: column; gap: 4px; padding: 15px 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: border-color 0.14s, transform 0.14s; }
.hl-card:hover { border-color: var(--brand-accent); transform: translateY(-2px); }
.hl-card__kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--brand-accent); text-transform: uppercase; }
.hl-card__title { font-size: 15.5px; font-weight: 700; color: var(--text); }
.hl-card__hook { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
/* 카카오 애드핏 슬롯 — 뷰포트별 유닛 분리 (PC 상/하단+사이드바, 모바일 상/하단) */
.adfit-slot { margin: 24px 0; display: flex; justify-content: center; overflow: hidden; }
.adfit-slot--side { margin: 16px 0 0; }
/* 리사이즈로 뷰포트가 바뀌어도 반대 규격 유닛은 감춤 (재로드 시 올바른 유닛으로 재주입) */
@media (max-width: 767px) { .adfit-slot--pc { display: none; } }
@media (min-width: 768px) { .adfit-slot--mo { display: none; } }
/* 오늘 방문자수(중복제거 UV) — 메인 푸터, 정책 라인 아래 얇게 */
.footer-visitors { margin-top: 10px; font-size: 12px; color: var(--text-muted); letter-spacing: 0.01em; }
.footer-visitors b { color: var(--brand-accent); font-weight: 700; }