/* =====================================================
근골격계 클리닉 - 상업용 의학 교육 게임 CSS v3.0
Dark Luxury Medical Theme | Mobile-First
===================================================== */
/* === DESIGN TOKENS === */
:root {
--bg: #050a15;
--bg-deep: #020611;
--surface: #0d1526;
--surface2: #111d33;
--surface3: #1a2a4a;
--cyan: #00d4ff;
--cyan-dim: rgba(0, 212, 255, 0.12);
--cyan-glow: rgba(0, 212, 255, 0.4);
--gold: #d4af37;
--gold-light: #f3d27a;
--gold-warm: #e8c776;
--gold-dim: rgba(212, 175, 55, 0.14);
--platinum: #e8ecf4;
--emerald: #10b981;
--emerald-dim: rgba(16, 185, 129, 0.15);
--red: #ef4444;
--red-dim: rgba(239, 68, 68, 0.15);
--amber: #f59e0b;
--amber-dim: rgba(245, 158, 11, 0.15);
--purple: #a855f7;
--purple-dim: rgba(168, 85, 247, 0.15);
--text: #f0f4ff;
--text2: #8899bb;
--text3: #445566;
--border: rgba(0, 212, 255, 0.15);
--border2: rgba(255, 255, 255, 0.07);
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 24px;
--shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
--shadow-cyan: 0 0 24px rgba(0, 212, 255, 0.3);
--shadow-gold: 0 0 28px rgba(212, 175, 55, 0.25);
--font: 'Inter', -apple-system, 'Noto Sans KR', BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-serif: 'Cormorant Garamond', 'Noto Serif KR', serif;
--font-serif-kr: 'Noto Serif KR', 'Cormorant Garamond', serif;
--touch: 48px;
--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
line-height: 1.6;
}
button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }
img { max-width: 100%; display: block; }
* { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
/* === KEYFRAME ANIMATIONS === */
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 10px rgba(0,212,255,0.1); }
50% { box-shadow: 0 0 30px var(--cyan-glow), 0 0 60px rgba(0,212,255,0.15); }
}
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideDown {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.88); }
to { opacity: 1; transform: scale(1); }
}
@keyframes spinePulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
@keyframes nerveFlow {
0% { stroke-dashoffset: 200; opacity: 0; }
30% { opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0.9; }
}
@keyframes discBulge {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(1.3); }
}
@keyframes docBob {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes flashCorrect {
0% { background: rgba(16,185,129,0.1); border-color: var(--emerald); }
40% { background: rgba(16,185,129,0.3); transform: scale(1.02); }
100% { background: rgba(16,185,129,0.1); border-color: var(--emerald); transform: scale(1); }
}
@keyframes flashWrong {
0% { background: rgba(239,68,68,0.1); border-color: var(--red); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
100% { background: rgba(239,68,68,0.1); border-color: var(--red); transform: translateX(0); }
}
@keyframes timerUrgent {
0%, 100% { stroke: var(--red); }
50% { stroke: var(--amber); }
}
@keyframes comboShake {
0%,100% { transform: scale(1) rotate(0deg); }
20% { transform: scale(1.25) rotate(-5deg); }
40% { transform: scale(1.25) rotate(5deg); }
60% { transform: scale(1.15) rotate(-2deg); }
80% { transform: scale(1.1) rotate(2deg); }
}
@keyframes xpPop {
from { transform: scale(0.4); opacity: 0; }
60% { transform: scale(1.15); opacity: 1; }
to { transform: scale(1); opacity: 1; }
}
@keyframes ringDraw {
from { stroke-dashoffset: 283; }
}
@keyframes floatScore {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(-70px) scale(0.8); }
}
@keyframes notifIn {
0% { opacity: 0; transform: translateX(110%); }
15% { opacity: 1; transform: translateX(0); }
80% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(110%); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* === SCREEN SYSTEM === */
.screen {
display: none;
position: fixed;
inset: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
background: var(--bg);
/* Reserve space so content isn't hidden behind the fixed legal footer.
--legal-footer-h is set by legal-compliance.js after measuring the bar. */
padding-bottom: calc(var(--legal-footer-h, 48px) + 12px);
box-sizing: border-box;
}
.screen.active {
display: flex;
flex-direction: column;
animation: fadeSlideUp 0.28s ease both;
}
/* === BUTTONS === */
.btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--touch);
padding: 12px 24px;
border-radius: var(--radius-sm);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: all var(--transition);
position: relative;
overflow: hidden;
border: 1.5px solid transparent;
width: 100%;
}
.btn-primary {
background: linear-gradient(135deg, var(--cyan) 0%, #0099ff 100%);
color: #000;
box-shadow: 0 4px 20px var(--cyan-glow);
border-color: transparent;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 30px var(--cyan-glow); }
.btn-primary:active { transform: scale(0.97); }
.btn-outline {
background: transparent;
border-color: var(--border);
color: var(--text2);
}
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); }
.btn-ghost { color: var(--text2); min-height: 44px; width: auto; padding: 8px 12px; }
.btn-ghost:hover { color: var(--cyan); }
/* === CARDS === */
.card { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); padding: 20px; }
.card-elevated { background: var(--surface2); border-color: var(--border); box-shadow: var(--shadow); }
/* === TAGS === */
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 99px;
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; }
.tag-cyan { background: var(--cyan-dim); color: var(--cyan); border: 1px solid rgba(0,212,255,0.3); }
.tag-green { background: var(--emerald-dim); color: var(--emerald); border: 1px solid rgba(16,185,129,0.3); }
.tag-red { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
.tag-amber { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,158,11,0.3); }
.tag-purple { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(168,85,247,0.3); }
/* === NAV BAR === */
.nav-bar {
display: flex;
align-items: center;
padding: 10px 12px;
min-height: 56px;
background: rgba(5,10,21,0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border2);
position: sticky;
top: 0;
z-index: 100;
gap: 4px;
flex-shrink: 0;
}
.nav-bar .nav-title { flex: 1; font-size: 0.95rem; font-weight: 700; text-align: center; }
.nav-back {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 10px; font-size: 1.3rem; color: var(--text2);
transition: all var(--transition);
}
.nav-back:hover { color: var(--cyan); background: var(--cyan-dim); }
/* === XP BAR === */
.xp-bar-wrap {
/* Right padding reserves space for the fixed .lang-toggle-btn (~90px wide at top-right)
so the XP count "0 / 200 XP" is never hidden behind the EN button. */
padding: 10px 100px 4px 20px;
flex-shrink: 0;
}
.xp-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#screen-home .xp-level {
font-size: 0.68rem; font-weight: 800;
color: #9a6f12;
letter-spacing: 0.14em; text-transform: uppercase;
text-shadow: 0 1px 4px rgba(255,255,255,0.6);
}
#screen-home .xp-pts {
font-size: 0.66rem; color: #4a6280;
font-family: 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: 0.08em;
font-weight: 600;
}
.xp-level {
font-size: 0.68rem; font-weight: 700;
color: var(--gold-light);
letter-spacing: 0.14em; text-transform: uppercase;
}
.xp-pts {
font-size: 0.66rem; color: var(--text2);
font-family: 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: 0.08em;
}
#screen-home .xp-track {
height: 4px;
background: rgba(255,255,255,0.6);
border-radius: 99px; overflow: hidden;
box-shadow: inset 0 1px 2px rgba(30,80,140,0.15), 0 1px 2px rgba(255,255,255,0.5);
border: 1px solid rgba(255,255,255,0.8);
}
.xp-track {
height: 3px;
background: rgba(255,255,255,0.06);
border-radius: 99px; overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
#screen-home .xp-fill {
background: linear-gradient(90deg, #ffb44a, #ffd17a, #5cb8f2);
box-shadow: 0 0 10px rgba(255,180,100,0.6);
}
.xp-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--cyan));
border-radius: 99px;
transition: width 1s var(--ease-expo);
box-shadow: 0 0 8px rgba(212,175,55,0.5);
}
/* ========================= HOME (Premium Clinic Ambience) =========================
Luxury medical palette: warm ivory top → champagne → pearl → soft medical teal,
layered with drifting aurora, slow sun rays, a softly flowing ECG heartbeat,
and floating ambient particles. Designed to feel premium AND welcoming.
================================================================================ */
#screen-home {
background: #f5efe3; /* fallback solid tone in case layers fail */
position: relative;
overflow: hidden;
}
#screen-home > :not(.home-bg) { position: relative; z-index: 2; }
/* ── Animated background layers ── */
.home-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* Base gradient layer — warm sunrise palette: cream → peach → champagne → rose tan. */
.home-bg-base {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
#fef7e8 0%,
#faead2 18%,
#f5dfc0 38%,
#f0d0b8 60%,
#ecbfa8 82%,
#d8a896 100%);
animation: bgBreathe 22s ease-in-out infinite alternate;
will-change: transform;
}
/* Aurora — multiple large soft color blobs drifting and morphing.
Gold, medical teal, champagne, soft rose accents. */
.home-bg-aurora {
position: absolute;
inset: -35%;
background:
/* Champagne gold bloom — top left */
radial-gradient(ellipse 55% 42% at 22% 18%, rgba(214, 178, 120, 0.40) 0%, transparent 58%),
/* Medical teal — top right */
radial-gradient(ellipse 62% 48% at 80% 22%, rgba(125, 172, 196, 0.40) 0%, transparent 60%),
/* Deep sapphire — mid */
radial-gradient(ellipse 55% 50% at 50% 55%, rgba(88, 130, 176, 0.22) 0%, transparent 60%),
/* Soft rose — bottom left */
radial-gradient(ellipse 42% 38% at 18% 78%, rgba(210, 168, 160, 0.28) 0%, transparent 60%),
/* Warm gold glow — bottom right */
radial-gradient(ellipse 50% 42% at 82% 82%, rgba(200, 160, 98, 0.32) 0%, transparent 60%);
filter: blur(70px);
animation: auroraDrift 28s ease-in-out infinite alternate;
mix-blend-mode: soft-light;
opacity: 1;
}
/* Slow sun rays from top center — a subtle cathedral-window feel */
.home-bg-rays {
position: absolute;
inset: -20%;
background:
conic-gradient(
from 210deg at 50% 10%,
transparent 0deg,
rgba(255, 230, 180, 0.00) 20deg,
rgba(255, 230, 180, 0.08) 40deg,
rgba(255, 230, 180, 0.00) 62deg,
transparent 85deg,
rgba(180, 210, 225, 0.00) 130deg,
rgba(180, 210, 225, 0.06) 150deg,
rgba(180, 210, 225, 0.00) 170deg,
transparent 360deg
);
mix-blend-mode: screen;
opacity: 0.55;
animation: raysRotate 90s linear infinite;
transform-origin: 50% 10%;
}
/* Subtle grid — gives a clinical precision accent without overwhelming */
.home-bg-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(140, 175, 195, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(140, 175, 195, 0.09) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 25%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 25%, transparent 85%);
animation: gridDrift 60s linear infinite;
opacity: 0.45;
}
/* ECG heartbeat line — medical signature, flows horizontally */
.home-bg-ecg {
position: absolute;
left: -5%;
width: 110%;
top: 48%;
height: 160px;
opacity: 0.55;
animation: ecgScroll 12s linear infinite;
filter: drop-shadow(0 0 8px rgba(214, 178, 120, 0.3));
}
.home-bg-ecg .ecg-trace { vector-effect: non-scaling-stroke; }
/* Floating ambient bubbles — colorful glassy spheres rising with a gentle wobble.
Per-bubble color is driven by CSS custom properties:
--bc-light = bright outer catch tone
--bc-mid = body tint
--bc-deep = rim shadow / outer glow color
Default is soft blue. nth-child rules below cycle through 6 pretty palettes. */
.home-bg-particles {
position: absolute;
inset: 0;
}
.home-bg-particles span {
--bc-light: rgba(220, 240, 250, 0.85);
--bc-mid: rgba(160, 205, 225, 0.55);
--bc-deep: rgba(60, 110, 160, 0.18);
--bc-glow: rgba(127, 180, 215, 0.55);
--bc-rim: rgba(40, 90, 130, 0.30);
position: absolute;
width: 14px; height: 14px;
border-radius: 50%;
background:
radial-gradient(circle at 32% 28%,
rgba(255, 255, 255, 0.98) 0%,
var(--bc-light) 18%,
var(--bc-mid) 45%,
var(--bc-deep) 100%);
box-shadow:
0 0 22px var(--bc-glow),
0 0 8px rgba(255, 255, 255, 0.65),
inset -2px -3px 5px var(--bc-rim),
inset 1px 2px 3px rgba(255, 255, 255, 0.5);
opacity: 0;
animation: bubbleRise 16s linear infinite;
will-change: transform, opacity;
}
/* ── Six color palettes cycled every 6 bubbles ── */
/* Soft pink / coral */
.home-bg-particles span:nth-child(6n+2) {
--bc-light: rgba(255, 220, 230, 0.92);
--bc-mid: rgba(245, 175, 195, 0.55);
--bc-deep: rgba(195, 105, 135, 0.20);
--bc-glow: rgba(245, 165, 185, 0.55);
--bc-rim: rgba(170, 70, 110, 0.30);
}
/* Soft mint / aqua */
.home-bg-particles span:nth-child(6n+3) {
--bc-light: rgba(220, 250, 240, 0.92);
--bc-mid: rgba(150, 225, 200, 0.55);
--bc-deep: rgba(70, 165, 150, 0.20);
--bc-glow: rgba(120, 215, 195, 0.55);
--bc-rim: rgba(40, 130, 115, 0.30);
}
/* Soft lavender / purple */
.home-bg-particles span:nth-child(6n+4) {
--bc-light: rgba(235, 225, 250, 0.92);
--bc-mid: rgba(195, 175, 235, 0.55);
--bc-deep: rgba(140, 110, 200, 0.20);
--bc-glow: rgba(180, 155, 230, 0.55);
--bc-rim: rgba(110, 80, 175, 0.30);
}
/* Warm peach / champagne */
.home-bg-particles span:nth-child(6n+5) {
--bc-light: rgba(255, 235, 215, 0.92);
--bc-mid: rgba(245, 200, 155, 0.55);
--bc-deep: rgba(200, 145, 90, 0.20);
--bc-glow: rgba(245, 195, 140, 0.55);
--bc-rim: rgba(180, 115, 60, 0.30);
}
/* Vivid cyan */
.home-bg-particles span:nth-child(6n+6) {
--bc-light: rgba(220, 250, 255, 0.92);
--bc-mid: rgba(140, 220, 240, 0.55);
--bc-deep: rgba(40, 165, 200, 0.20);
--bc-glow: rgba(110, 215, 240, 0.55);
--bc-rim: rgba(15, 130, 175, 0.30);
}
/* (6n+1) keeps the default soft blue */
/* ── 6 additional palettes (rotation extends to 12 colors via 12n offsets) ── */
/* Coral red */
.home-bg-particles span:nth-child(12n+7) {
--bc-light: rgba(255, 220, 215, 0.92);
--bc-mid: rgba(245, 155, 145, 0.55);
--bc-deep: rgba(195, 75, 70, 0.20);
--bc-glow: rgba(245, 145, 135, 0.55);
--bc-rim: rgba(170, 50, 50, 0.30);
}
/* Sunny yellow */
.home-bg-particles span:nth-child(12n+8) {
--bc-light: rgba(255, 250, 220, 0.92);
--bc-mid: rgba(250, 230, 145, 0.55);
--bc-deep: rgba(210, 175, 70, 0.20);
--bc-glow: rgba(250, 220, 130, 0.55);
--bc-rim: rgba(180, 145, 50, 0.30);
}
/* Sage green */
.home-bg-particles span:nth-child(12n+9) {
--bc-light: rgba(230, 245, 225, 0.92);
--bc-mid: rgba(170, 215, 165, 0.55);
--bc-deep: rgba(95, 165, 95, 0.20);
--bc-glow: rgba(155, 210, 155, 0.55);
--bc-rim: rgba(60, 130, 70, 0.30);
}
/* Lilac */
.home-bg-particles span:nth-child(12n+10) {
--bc-light: rgba(245, 220, 250, 0.92);
--bc-mid: rgba(220, 175, 235, 0.55);
--bc-deep: rgba(165, 105, 195, 0.20);
--bc-glow: rgba(210, 165, 230, 0.55);
--bc-rim: rgba(135, 75, 165, 0.30);
}
/* Rose gold */
.home-bg-particles span:nth-child(12n+11) {
--bc-light: rgba(255, 230, 220, 0.92);
--bc-mid: rgba(245, 180, 165, 0.55);
--bc-deep: rgba(205, 130, 110, 0.20);
--bc-glow: rgba(245, 175, 160, 0.55);
--bc-rim: rgba(170, 95, 75, 0.30);
}
/* Sky blue */
.home-bg-particles span:nth-child(12n) {
--bc-light: rgba(220, 240, 255, 0.92);
--bc-mid: rgba(140, 195, 240, 0.55);
--bc-deep: rgba(50, 130, 200, 0.20);
--bc-glow: rgba(125, 190, 235, 0.55);
--bc-rim: rgba(30, 95, 165, 0.30);
}
/* ── Bubbles 37-60 (positions, sizes, timings) ── */
.home-bg-particles span:nth-child(37) { left: 14%; top: 56%; width: 24px; height: 24px; animation-delay: 0.9s; animation-duration: 18s; --bw: 26px; }
.home-bg-particles span:nth-child(38) { left: 25%; top: 52%; width: 14px; height: 14px; animation-delay: 6.2s; animation-duration: 13s; --bw: -22px; }
.home-bg-particles span:nth-child(39) { left: 36%; top: 56%; width: 20px; height: 20px; animation-delay: 12.4s; animation-duration: 16s; --bw: 24px; }
.home-bg-particles span:nth-child(40) { left: 47%; top: 52%; width: 28px; height: 28px; animation-delay: 3.6s; animation-duration: 20s; --bw: -28px; }
.home-bg-particles span:nth-child(41) { left: 58%; top: 56%; width: 16px; height: 16px; animation-delay: 8.8s; animation-duration: 14s; --bw: 18px; }
.home-bg-particles span:nth-child(42) { left: 69%; top: 52%; width: 22px; height: 22px; animation-delay: 1.4s; animation-duration: 17s; --bw: -24px; }
.home-bg-particles span:nth-child(43) { left: 80%; top: 56%; width: 13px; height: 13px; animation-delay: 11.2s; animation-duration: 12s; --bw: 22px; }
.home-bg-particles span:nth-child(44) { left: 91%; top: 52%; width: 25px; height: 25px; animation-delay: 5.5s; animation-duration: 18s; --bw: -26px; }
.home-bg-particles span:nth-child(45) { left: 7%; top: 48%; width: 17px; height: 17px; animation-delay: 9.4s; animation-duration: 15s; --bw: 20px; }
.home-bg-particles span:nth-child(46) { left: 19%; top: 44%; width: 23px; height: 23px; animation-delay: 2.7s; animation-duration: 17s; --bw: -28px; }
.home-bg-particles span:nth-child(47) { left: 31%; top: 48%; width: 12px; height: 12px; animation-delay: 13.6s; animation-duration: 11s; --bw: 16px; }
.home-bg-particles span:nth-child(48) { left: 43%; top: 44%; width: 26px; height: 26px; animation-delay: 7.3s; animation-duration: 19s; --bw: 30px; }
.home-bg-particles span:nth-child(49) { left: 55%; top: 48%; width: 15px; height: 15px; animation-delay: 4.1s; animation-duration: 13s; --bw: -22px; }
.home-bg-particles span:nth-child(50) { left: 67%; top: 44%; width: 21px; height: 21px; animation-delay: 10.6s; animation-duration: 16s; --bw: 24px; }
.home-bg-particles span:nth-child(51) { left: 79%; top: 48%; width: 18px; height: 18px; animation-delay: 0.3s; animation-duration: 15s; --bw: -20px; }
.home-bg-particles span:nth-child(52) { left: 93%; top: 44%; width: 14px; height: 14px; animation-delay: 6.9s; animation-duration: 13s; --bw: 26px; }
.home-bg-particles span:nth-child(53) { left: 5%; top: 38%; width: 19px; height: 19px; animation-delay: 12.1s; animation-duration: 16s; --bw: -24px; }
.home-bg-particles span:nth-child(54) { left: 17%; top: 34%; width: 27px; height: 27px; animation-delay: 3.2s; animation-duration: 19s; --bw: 30px; }
.home-bg-particles span:nth-child(55) { left: 29%; top: 38%; width: 11px; height: 11px; animation-delay: 8.7s; animation-duration: 12s; --bw: -18px; }
.home-bg-particles span:nth-child(56) { left: 45%; top: 34%; width: 22px; height: 22px; animation-delay: 14.3s; animation-duration: 17s; --bw: 22px; }
.home-bg-particles span:nth-child(57) { left: 57%; top: 38%; width: 16px; height: 16px; animation-delay: 5.1s; animation-duration: 14s; --bw: -20px; }
.home-bg-particles span:nth-child(58) { left: 71%; top: 34%; width: 24px; height: 24px; animation-delay: 11.8s; animation-duration: 18s; --bw: 26px; }
.home-bg-particles span:nth-child(59) { left: 83%; top: 38%; width: 13px; height: 13px; animation-delay: 1.7s; animation-duration: 13s; --bw: -22px; }
.home-bg-particles span:nth-child(60) { left: 97%; top: 34%; width: 20px; height: 20px; animation-delay: 7.6s; animation-duration: 16s; --bw: 24px; }
/* Bubble click interaction — pop with scale-up + fade */
.home-bg-particles span {
cursor: pointer;
pointer-events: auto;
}
.home-bg-particles span.bubble-pop {
animation: bubblePop 0.6s ease-out forwards !important;
}
@keyframes bubblePop {
0% { transform: scale(1); opacity: 0.95; filter: blur(0); }
40% { transform: scale(1.8); opacity: 1; filter: blur(0); }
100% { transform: scale(2.6); opacity: 0; filter: blur(2px); }
}
/* Twinkling sparkle stars */
.home-bg-sparkles {
position: absolute;
inset: 0;
pointer-events: none;
}
.home-bg-sparkles span {
position: absolute;
width: 6px; height: 6px;
background: radial-gradient(circle,
rgba(255, 250, 230, 1) 0%,
rgba(255, 220, 150, 0.85) 30%,
transparent 70%);
border-radius: 50%;
opacity: 0;
animation: sparkleTwinkle 4s ease-in-out infinite;
filter: drop-shadow(0 0 4px rgba(255, 220, 150, 0.7));
}
.home-bg-sparkles span:nth-child(1) { left: 12%; top: 18%; animation-delay: 0s; }
.home-bg-sparkles span:nth-child(2) { left: 78%; top: 22%; animation-delay: 0.7s; }
.home-bg-sparkles span:nth-child(3) { left: 35%; top: 28%; animation-delay: 1.4s; }
.home-bg-sparkles span:nth-child(4) { left: 88%; top: 38%; animation-delay: 2.1s; }
.home-bg-sparkles span:nth-child(5) { left: 22%; top: 45%; animation-delay: 2.8s; }
.home-bg-sparkles span:nth-child(6) { left: 65%; top: 55%; animation-delay: 3.5s; }
.home-bg-sparkles span:nth-child(7) { left: 8%; top: 68%; animation-delay: 4.2s; }
.home-bg-sparkles span:nth-child(8) { left: 92%; top: 75%; animation-delay: 4.9s; }
.home-bg-sparkles span:nth-child(9) { left: 45%; top: 80%; animation-delay: 5.6s; }
.home-bg-sparkles span:nth-child(10) { left: 70%; top: 12%; animation-delay: 6.3s; }
.home-bg-sparkles span:nth-child(11) { left: 28%; top: 60%; animation-delay: 7s; }
.home-bg-sparkles span:nth-child(12) { left: 55%; top: 30%; animation-delay: 1.8s; width: 8px; height: 8px; }
.home-bg-sparkles span:nth-child(13) { left: 16%; top: 88%; animation-delay: 3.2s; width: 5px; height: 5px; }
.home-bg-sparkles span:nth-child(14) { left: 82%; top: 62%; animation-delay: 5.4s; width: 7px; height: 7px; }
.home-bg-sparkles span:nth-child(15) { left: 40%; top: 10%; animation-delay: 6.6s; width: 5px; height: 5px; }
@keyframes sparkleTwinkle {
0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
20% { opacity: 1; transform: scale(1.2) rotate(45deg); }
40% { opacity: 0.6; transform: scale(0.9) rotate(90deg); }
60% { opacity: 1; transform: scale(1.3) rotate(135deg); }
80% { opacity: 0.4; transform: scale(0.7) rotate(180deg); }
}
/* Burst sparkle particles spawned on bubble click */
.home-bg-burst-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.burst-particle {
position: absolute;
width: 8px; height: 8px;
background: radial-gradient(circle, #fff 0%, var(--burst-color, #ffd17a) 40%, transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: burstFly 0.9s cubic-bezier(0.22, 0.9, 0.32, 1) forwards;
filter: drop-shadow(0 0 6px var(--burst-color, #ffd17a));
}
@keyframes burstFly {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(var(--bx, 0), var(--by, 0)) scale(0.2); opacity: 0; }
}
/* Per-bubble size, position, timing variations — feels organic and lively.
--bw is animation wobble width applied inside the keyframe. */
.home-bg-particles span:nth-child(1) { left: 6%; top: 92%; width: 22px; height: 22px; animation-delay: 0s; animation-duration: 17s; --bw: 26px; }
.home-bg-particles span:nth-child(2) { left: 16%; top: 96%; width: 14px; height: 14px; animation-delay: 1.2s; animation-duration: 13s; --bw: -22px; }
.home-bg-particles span:nth-child(3) { left: 26%; top: 90%; width: 28px; height: 28px; animation-delay: 2.5s; animation-duration: 19s; --bw: 18px; }
.home-bg-particles span:nth-child(4) { left: 36%; top: 98%; width: 12px; height: 12px; animation-delay: 3.8s; animation-duration: 12s; --bw: -28px; }
.home-bg-particles span:nth-child(5) { left: 46%; top: 93%; width: 20px; height: 20px; animation-delay: 5s; animation-duration: 16s; --bw: 22px; }
.home-bg-particles span:nth-child(6) { left: 58%; top: 96%; width: 16px; height: 16px; animation-delay: 6.4s; animation-duration: 14s; --bw: -16px; }
.home-bg-particles span:nth-child(7) { left: 68%; top: 91%; width: 24px; height: 24px; animation-delay: 7.5s; animation-duration: 18s; --bw: 24px; }
.home-bg-particles span:nth-child(8) { left: 78%; top: 95%; width: 13px; height: 13px; animation-delay: 8.6s; animation-duration: 13s; --bw: -20px; }
.home-bg-particles span:nth-child(9) { left: 88%; top: 92%; width: 18px; height: 18px; animation-delay: 9.8s; animation-duration: 15s; --bw: 28px; }
.home-bg-particles span:nth-child(10) { left: 11%; top: 84%; width: 30px; height: 30px; animation-delay: 0.6s; animation-duration: 21s; --bw: 30px; }
.home-bg-particles span:nth-child(11) { left: 31%; top: 86%; width: 16px; height: 16px; animation-delay: 4.2s; animation-duration: 14s; --bw: -24px; }
.home-bg-particles span:nth-child(12) { left: 51%; top: 88%; width: 22px; height: 22px; animation-delay: 7.2s; animation-duration: 17s; --bw: 20px; }
.home-bg-particles span:nth-child(13) { left: 71%; top: 84%; width: 14px; height: 14px; animation-delay: 10.4s; animation-duration: 13s; --bw: -22px; }
.home-bg-particles span:nth-child(14) { left: 91%; top: 86%; width: 19px; height: 19px; animation-delay: 2.1s; animation-duration: 16s; --bw: 26px; }
.home-bg-particles span:nth-child(15) { left: 21%; top: 80%; width: 11px; height: 11px; animation-delay: 5.6s; animation-duration: 12s; --bw: -18px; }
.home-bg-particles span:nth-child(16) { left: 41%; top: 82%; width: 26px; height: 26px; animation-delay: 8.8s; animation-duration: 19s; --bw: 22px; }
.home-bg-particles span:nth-child(17) { left: 61%; top: 80%; width: 15px; height: 15px; animation-delay: 11.2s; animation-duration: 14s; --bw: -26px; }
.home-bg-particles span:nth-child(18) { left: 81%; top: 82%; width: 21px; height: 21px; animation-delay: 1.8s; animation-duration: 17s; --bw: 24px; }
/* Second wave — 19~36, more bubbles for richer ambience */
.home-bg-particles span:nth-child(19) { left: 4%; top: 78%; width: 18px; height: 18px; animation-delay: 12.5s; animation-duration: 16s; --bw: 22px; }
.home-bg-particles span:nth-child(20) { left: 14%; top: 70%; width: 24px; height: 24px; animation-delay: 3.4s; animation-duration: 18s; --bw: -28px; }
.home-bg-particles span:nth-child(21) { left: 24%; top: 74%; width: 13px; height: 13px; animation-delay: 9.2s; animation-duration: 13s; --bw: 18px; }
.home-bg-particles span:nth-child(22) { left: 34%; top: 78%; width: 27px; height: 27px; animation-delay: 6s; animation-duration: 19s; --bw: -24px; }
.home-bg-particles span:nth-child(23) { left: 44%; top: 72%; width: 16px; height: 16px; animation-delay: 11.6s; animation-duration: 14s; --bw: 26px; }
.home-bg-particles span:nth-child(24) { left: 54%; top: 76%; width: 22px; height: 22px; animation-delay: 4.8s; animation-duration: 17s; --bw: -20px; }
.home-bg-particles span:nth-child(25) { left: 64%; top: 70%; width: 12px; height: 12px; animation-delay: 8.2s; animation-duration: 12s; --bw: 22px; }
.home-bg-particles span:nth-child(26) { left: 74%; top: 76%; width: 25px; height: 25px; animation-delay: 1.2s; animation-duration: 18s; --bw: -26px; }
.home-bg-particles span:nth-child(27) { left: 84%; top: 72%; width: 17px; height: 17px; animation-delay: 7s; animation-duration: 15s; --bw: 20px; }
.home-bg-particles span:nth-child(28) { left: 94%; top: 78%; width: 14px; height: 14px; animation-delay: 10.8s; animation-duration: 13s; --bw: -18px; }
.home-bg-particles span:nth-child(29) { left: 9%; top: 64%; width: 20px; height: 20px; animation-delay: 2.6s; animation-duration: 16s; --bw: 24px; }
.home-bg-particles span:nth-child(30) { left: 19%; top: 60%; width: 11px; height: 11px; animation-delay: 13.2s; animation-duration: 12s; --bw: -16px; }
.home-bg-particles span:nth-child(31) { left: 29%; top: 64%; width: 23px; height: 23px; animation-delay: 5.4s; animation-duration: 18s; --bw: 28px; }
.home-bg-particles span:nth-child(32) { left: 49%; top: 62%; width: 15px; height: 15px; animation-delay: 9.6s; animation-duration: 14s; --bw: -22px; }
.home-bg-particles span:nth-child(33) { left: 59%; top: 66%; width: 18px; height: 18px; animation-delay: 3s; animation-duration: 16s; --bw: 20px; }
.home-bg-particles span:nth-child(34) { left: 69%; top: 60%; width: 28px; height: 28px; animation-delay: 11s; animation-duration: 20s; --bw: -30px; }
.home-bg-particles span:nth-child(35) { left: 79%; top: 64%; width: 13px; height: 13px; animation-delay: 6.8s; animation-duration: 13s; --bw: 16px; }
.home-bg-particles span:nth-child(36) { left: 89%; top: 60%; width: 21px; height: 21px; animation-delay: 0.4s; animation-duration: 17s; --bw: -24px; }
.home-bg-vignette {
position: absolute; inset: 0;
background:
/* Soft center spotlight on the doctor */
radial-gradient(ellipse 65% 55% at 50% 38%, rgba(255,250,235,0.25) 0%, transparent 55%),
/* Edge darkening for depth */
radial-gradient(ellipse 120% 90% at 50% 45%, transparent 50%, rgba(60,75,95,0.16) 92%, rgba(40,55,80,0.28) 100%),
/* Subtle top haze + bottom luxury teal */
linear-gradient(180deg, rgba(255,250,235,0.10) 0%, transparent 22%, transparent 75%, rgba(50,80,100,0.22) 100%);
pointer-events: none;
}
/* ============================================================
AI NEURAL NETWORK BACKGROUND LAYER
Signals "AI powered" to every patient at a glance.
============================================================ */
.home-bg-neural {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.55;
mix-blend-mode: screen;
pointer-events: none;
animation: ai-neural-drift 40s linear infinite;
}
@keyframes ai-neural-drift {
0% { transform: translate(0, 0); }
50% { transform: translate(-8px, -4px); }
100% { transform: translate(0, 0); }
}
.home-bg-neural .neural-nodes circle {
filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.8));
}
.home-bg-neural .nn-pulse {
transform-origin: center;
transform-box: fill-box;
animation: ai-neural-pulse 3.2s ease-in-out infinite;
}
.home-bg-neural .nn-d0 { animation-delay: 0s; }
.home-bg-neural .nn-d1 { animation-delay: 0.45s; }
.home-bg-neural .nn-d2 { animation-delay: 0.9s; }
.home-bg-neural .nn-d3 { animation-delay: 1.35s; }
.home-bg-neural .nn-d4 { animation-delay: 1.8s; }
.home-bg-neural .nn-d5 { animation-delay: 2.25s; }
@keyframes ai-neural-pulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.8); opacity: 1; }
}
.home-bg-neural .neural-lines line {
stroke-dasharray: 4 6;
animation: ai-neural-flow 4s linear infinite;
}
@keyframes ai-neural-flow {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -40; }
}
/* Faint scrolling binary/data stream text — subtle "tech" feel */
.home-bg-binary {
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
overflow: hidden;
pointer-events: none;
opacity: 0.12;
font-family: 'Courier New', Consolas, monospace;
font-size: 10px;
letter-spacing: 2px;
color: #7fd4ff;
white-space: nowrap;
}
.home-bg-binary span {
position: absolute;
left: 0;
width: 200%;
animation: ai-binary-scroll 55s linear infinite;
}
.home-bg-binary span:nth-child(1) { top: 18%; animation-duration: 45s; }
.home-bg-binary span:nth-child(2) { top: 52%; animation-duration: 62s; animation-delay: -15s; }
.home-bg-binary span:nth-child(3) { top: 82%; animation-duration: 50s; animation-delay: -30s; }
@keyframes ai-binary-scroll {
0% { transform: translateX(0%); }
100% { transform: translateX(-50%); }
}
/* ============================================================
HERO AI POWERED BADGE — prominent, tappable
============================================================ */
.hero-ai-badge {
margin: 14px auto 8px;
display: flex;
justify-content: center;
cursor: pointer;
outline: none;
position: relative;
z-index: 6;
}
.hab-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 12px;
border-radius: 999px;
background:
linear-gradient(135deg, rgba(58, 123, 213, 0.22), rgba(0, 212, 255, 0.15)),
rgba(10, 18, 32, 0.75);
border: 1px solid rgba(127, 212, 255, 0.5);
box-shadow:
0 0 0 0 rgba(0, 212, 255, 0.45),
0 4px 20px rgba(0, 150, 220, 0.35);
backdrop-filter: blur(6px);
color: #fff;
font-weight: 600;
animation: ai-chip-pulse 2.6s ease-in-out infinite;
transition: transform 0.2s ease, box-shadow 0.2s ease;
max-width: 92%;
}
.hero-ai-badge:hover .hab-chip,
.hero-ai-badge:focus-visible .hab-chip {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 0 0 4px rgba(0, 212, 255, 0.18),
0 8px 28px rgba(0, 180, 255, 0.5);
}
@keyframes ai-chip-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.55), 0 4px 20px rgba(0, 150, 220, 0.35); }
50% { box-shadow: 0 0 0 8px rgba(0, 212, 255, 0), 0 4px 22px rgba(0, 150, 220, 0.5); }
}
.hab-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: #00ff88;
box-shadow: 0 0 10px #00ff88, 0 0 20px rgba(0, 255, 136, 0.5);
animation: ai-dot-blink 1.4s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes ai-dot-blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.8); }
}
.hab-robot {
font-size: 1.4rem;
line-height: 1;
filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.6));
animation: ai-robot-float 3s ease-in-out infinite;
}
@keyframes ai-robot-float {
0%, 100% { transform: translateY(0) rotate(-3deg); }
50% { transform: translateY(-2px) rotate(3deg); }
}
.hab-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.hab-label {
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 1.2px;
background: linear-gradient(90deg, #7fd4ff, #ffd08a, #7fd4ff);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: ai-label-shimmer 4s linear infinite;
}
@keyframes ai-label-shimmer {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
.hab-sub {
font-size: 0.66rem;
color: rgba(232, 238, 246, 0.85);
letter-spacing: 0.3px;
margin-top: 1px;
}
.hab-arrow {
font-size: 1.1rem;
color: rgba(127, 212, 255, 0.9);
flex-shrink: 0;
margin-left: 2px;
}
@media (max-width: 420px) {
.hab-chip { padding: 7px 12px 7px 10px; gap: 8px; }
.hab-label { font-size: 0.74rem; }
.hab-sub { font-size: 0.6rem; }
.hab-robot { font-size: 1.2rem; }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.home-bg-neural,
.hab-chip,
.hab-pulse,
.hab-robot,
.hab-label,
.home-bg-binary span,
.home-bg-neural .nn-pulse,
.home-bg-neural .neural-lines line {
animation: none !important;
}
}
/* ============================================================
INTERACTIVE EKG MONITOR (under doctor avatar)
Real medical-monitor look with grid, glow, scrolling trace,
live BPM counter, and tap-to-boost interaction.
============================================================ */
.ekg-monitor {
position: relative;
width: min(380px, calc(100% - 32px));
margin: 6px auto 12px;
padding: 10px 14px 10px;
background: linear-gradient(180deg, #051a14 0%, #0a2a22 50%, #051815 100%);
border: 1px solid rgba(0, 229, 168, 0.35);
border-radius: 14px;
box-shadow:
0 6px 22px rgba(0, 50, 35, 0.25),
inset 0 0 22px rgba(0, 229, 168, 0.10),
inset 0 0 0 1px rgba(0, 229, 168, 0.08);
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: transform 0.18s, box-shadow 0.25s, border-color 0.25s;
overflow: hidden;
}
.ekg-monitor:hover {
border-color: rgba(0, 229, 168, 0.55);
box-shadow:
0 8px 28px rgba(0, 80, 55, 0.35),
inset 0 0 28px rgba(0, 229, 168, 0.14);
}
.ekg-monitor:active { transform: scale(0.985); }
.ekg-monitor.ekg-flash {
animation: ekgMonitorFlash 0.42s ease-out;
}
.ekg-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2px 6px;
font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
}
.ekg-status {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(127, 255, 212, 0.85);
}
.ekg-pulse-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #00ffb4;
box-shadow: 0 0 8px #00ffb4, 0 0 14px rgba(0,255,180,0.55);
animation: ekgDotPulse 1.1s ease-in-out infinite;
}
.ekg-bpm-wrap {
display: inline-flex;
align-items: baseline;
gap: 4px;
color: #7fffd4;
text-shadow: 0 0 10px rgba(0,255,180,0.55);
}
.ekg-bpm-value {
font-size: 1.35rem;
font-weight: 800;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
font-style: normal;
}
.ekg-bpm-unit {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.2em;
opacity: 0.7;
font-style: normal;
}
.ekg-screen {
display: block;
width: 100%;
height: 64px;
background: radial-gradient(ellipse 80% 100% at 50% 50%, #0a2218 0%, #061612 100%);
border-radius: 8px;
border: 1px solid rgba(0, 229, 168, 0.18);
}
.ekg-trace { filter: drop-shadow(0 0 4px rgba(0,255,180,0.65)); }
.ekg-dot {
filter: drop-shadow(0 0 6px rgba(0,255,180,0.95));
animation: ekgLeadingDot 1.2s ease-in-out infinite;
}
.ekg-scan-line {
filter: blur(4px);
opacity: 0.35;
}
.ekg-hint {
margin-top: 7px;
text-align: center;
font-size: 0.7rem;
color: rgba(127, 255, 212, 0.65);
letter-spacing: 0.04em;
}
@keyframes ekgDotPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.65; }
}
@keyframes ekgLeadingDot {
0%, 100% { r: 3.5; opacity: 0.95; }
50% { r: 5; opacity: 1; }
}
@keyframes ekgMonitorFlash {
0% { box-shadow: 0 0 0 0 rgba(0,255,180,0.55), inset 0 0 22px rgba(0,229,168,0.30); }
60% { box-shadow: 0 0 0 14px rgba(0,255,180,0.0), inset 0 0 36px rgba(0,229,168,0.40); }
100% { box-shadow: 0 6px 22px rgba(0,50,35,0.25), inset 0 0 22px rgba(0,229,168,0.10); }
}
/* ── Hero section ── */
.home-hero {
flex: 0 0 auto;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 24px 20px 10px; text-align: center;
position: relative;
}
/* ============================================================
LUXURY HERO BRAND — researched palette inspired by
Mayo Clinic + Cleveland Clinic (deep navy trust) crossed with
Cartier + Aesop (champagne gold + cream apothecary).
Tokens scoped to .home-hero so they don't leak.
============================================================ */
.home-hero {
--luxe-navy: #0a2540; /* primary text — deep classical trust */
--luxe-navy-mid: #1a3a5e;
--luxe-gold: #c9a961; /* champagne gold — main accent */
--luxe-gold-deep: #a08454; /* deeper bronze gold */
--luxe-gold-light: #e3c987; /* gilded light */
--luxe-cream: #faf5ea;
--luxe-bronze: #8b6f47; /* refined bronze for taglines */
--luxe-pearl: rgba(255, 250, 240, 0.85);
}
/* Refined credential banner — apothecary/certificate style */
.hero-credential {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
font-size: 0.66rem;
font-weight: 600;
color: var(--luxe-bronze);
letter-spacing: 0.42em;
text-transform: uppercase;
padding: 9px 26px 8px;
background: linear-gradient(180deg,
rgba(255, 250, 240, 0.92) 0%,
rgba(245, 239, 227, 0.78) 100%);
border: none;
border-top: 1px solid rgba(201, 169, 97, 0.55);
border-bottom: 1px solid rgba(201, 169, 97, 0.55);
border-radius: 0;
box-shadow:
0 2px 14px rgba(160, 132, 84, 0.10),
inset 0 0 18px rgba(255, 255, 255, 0.5);
margin-bottom: 32px;
text-indent: 0.42em;
animation: heroFadeIn 1.2s var(--ease-expo) 0.2s both;
}
.credential-dot {
width: 4px; height: 4px; border-radius: 50%;
background: var(--luxe-gold);
box-shadow: 0 0 8px rgba(201, 169, 97, 0.55);
animation: dotPulse 2.4s ease-in-out infinite;
}
.hero-name-wrap {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
animation: heroFadeIn 1.4s var(--ease-expo) 0.4s both;
/* Needed so the absolutely-positioned butterflies are anchored to this box */
position: relative;
}
/* HERO NAME — unified italic Garamond in deep navy (slightly smaller) */
.hero-name {
font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
font-size: clamp(2.4rem, 9.2vw, 3.2rem);
font-weight: 500;
font-style: italic;
line-height: 1.0;
letter-spacing: -0.005em;
color: var(--luxe-navy);
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 0.18em;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.5),
0 2px 14px rgba(10, 37, 64, 0.10);
}
.hero-name-dr {
font-family: 'Cormorant Garamond', serif;
font-size: 0.84em;
font-style: italic;
font-weight: 400;
letter-spacing: 0;
margin-right: 0.04em;
color: var(--luxe-navy);
/* Removed gold gradient — now matches Kwang Lee */
-webkit-background-clip: initial;
-webkit-text-fill-color: var(--luxe-navy);
background: none;
background-clip: initial;
}
.hero-name-ko {
font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
font-weight: 500;
font-style: italic;
color: var(--luxe-navy);
letter-spacing: 0.005em;
}
/* DIVIDER — gilded thin line with diamond ornament */
.hero-divider {
display: flex; align-items: center;
gap: 18px;
/* Tightened vertical spacing so "Wellness Center" sits closer to the name */
margin: 10px 0 6px;
width: 70%;
max-width: 320px;
}
.hero-divider span {
flex: 1;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(201, 169, 97, 0.65) 35%,
rgba(201, 169, 97, 0.65) 65%,
transparent 100%);
}
.hero-divider em {
font-style: normal;
color: var(--luxe-gold);
font-size: 0.85rem;
text-shadow: 0 0 8px rgba(201, 169, 97, 0.55);
}
/* WELLNESS CENTER — unified italic deep-navy, bolder and slightly larger */
.hero-name-en {
font-family: 'Cormorant Garamond', serif;
font-size: 1.62rem;
font-style: italic;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: none; /* Title case "Wellness Center" instead of ALL CAPS */
text-indent: 0.12em;
color: var(--luxe-navy);
background: none;
-webkit-text-fill-color: var(--luxe-navy);
margin: 2px 0 0; /* Pulled closer to the name + divider */
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
animation: none;
filter: none;
}
/* Subtle gold underline beneath WELLNESS CENTER */
.hero-underline {
width: 96px;
height: 1px;
margin: 8px 0 8px; /* Tightened spacing below Wellness Center */
background: linear-gradient(90deg,
transparent,
rgba(201, 169, 97, 0.7) 50%,
transparent);
}
.hero-specialty {
font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
font-size: 0.86rem;
font-style: italic;
font-weight: 500;
color: var(--luxe-bronze);
letter-spacing: 0.10em;
text-transform: none;
opacity: 0.92;
text-shadow: 0 1px 4px rgba(255, 255, 255, 0.45);
}
/* ═══════════════════════════════════════════════════════════════════
🦋 HERO BUTTERFLIES — two pretty butterflies flutter around the
"Dr. Kwang Lee" name. Wings flap via scaleX, bodies follow curved
flight paths. Butterfly 1 is pink/coral, butterfly 2 is teal/gold.
Both disabled on prefers-reduced-motion.
═══════════════════════════════════════════════════════════════════ */
.hero-butterflies {
position: absolute;
inset: -20px 0 -20px 0;
pointer-events: none;
z-index: 4;
}
.butterfly {
position: absolute;
width: 48px;
height: 48px;
overflow: visible;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
transform-origin: center;
}
.butterfly-1 {
top: 10%;
left: -5%;
animation: butterfly1-fly 14s ease-in-out infinite;
}
.butterfly-2 {
top: 60%;
right: -5%;
width: 42px;
height: 42px;
animation: butterfly2-fly 16s ease-in-out infinite 1.5s;
}
.butterfly-3 {
top: 35%;
left: 65%;
width: 46px;
height: 46px;
animation: butterfly3-fly 15s ease-in-out infinite 3.2s;
}
/* Wing flap — scaleX around the body axis (transform-origin: center). */
.butterfly .wings-left,
.butterfly .wings-right {
transform-origin: 0 0;
animation: wing-flap 0.36s ease-in-out infinite;
}
.butterfly .wings-right {
animation: wing-flap-right 0.36s ease-in-out infinite;
}
@keyframes wing-flap {
0%, 100% { transform: scaleX(1); }
50% { transform: scaleX(0.35); }
}
@keyframes wing-flap-right {
0%, 100% { transform: scaleX(1); }
50% { transform: scaleX(0.35); }
}
/* Butterfly 1 path: figure-8-ish flutter around the left/top of the name */
@keyframes butterfly1-fly {
0% { transform: translate(0, 0) rotate(-6deg) scale(1); }
15% { transform: translate(80px, -20px) rotate(10deg) scale(1.05); }
30% { transform: translate(180px, 10px) rotate(-4deg) scale(0.95); }
45% { transform: translate(260px, -30px) rotate(8deg) scale(1.05); }
60% { transform: translate(200px, 30px) rotate(-10deg) scale(1); }
75% { transform: translate(110px, 50px) rotate(6deg) scale(1.05); }
90% { transform: translate(40px, 20px) rotate(-4deg) scale(1); }
100% { transform: translate(0, 0) rotate(-6deg) scale(1); }
}
/* Butterfly 2 path: drifts around the right/bottom of the name */
@keyframes butterfly2-fly {
0% { transform: translate(0, 0) rotate(6deg) scale(1); }
20% { transform: translate(-90px, 20px) rotate(-10deg) scale(0.95); }
40% { transform: translate(-200px, -10px) rotate(8deg) scale(1.05); }
55% { transform: translate(-260px, -50px) rotate(-6deg) scale(1); }
70% { transform: translate(-180px, -30px) rotate(10deg) scale(1.05); }
85% { transform: translate(-80px, -10px) rotate(-4deg) scale(0.95); }
100% { transform: translate(0, 0) rotate(6deg) scale(1); }
}
/* Butterfly 3 (golden): gentle circular float around the upper middle */
@keyframes butterfly3-fly {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
18% { transform: translate(-40px, -25px) rotate(-12deg) scale(1.05); }
36% { transform: translate(-100px, 5px) rotate(10deg) scale(0.95); }
55% { transform: translate(-140px, 50px) rotate(-8deg) scale(1); }
72% { transform: translate(-60px, 70px) rotate(6deg) scale(1.05); }
88% { transform: translate(10px, 35px) rotate(-4deg) scale(0.95); }
100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
/* (Dragonfly CSS removed — Dr. Lee preferred 3 butterflies over dragonflies) */
/* Respect reduced-motion — still show the 3 butterflies (pretty!) but
without flight paths; keep only a gentle wing flap. */
@media (prefers-reduced-motion: reduce) {
.butterfly-1, .butterfly-2, .butterfly-3 { animation: none; }
.butterfly .wings-left,
.butterfly .wings-right { animation-duration: 0.8s; }
}
/* On very narrow mobile screens, shrink + limit paths so butterflies +
hummingbird stay in view without introducing horizontal scroll. */
@media (max-width: 420px) {
.butterfly-1 { width: 36px; height: 36px; }
.butterfly-2 { width: 32px; height: 32px; }
.butterfly-3 { width: 38px; height: 38px; }
@keyframes butterfly1-fly {
0%, 100% { transform: translate(0, 0) rotate(-6deg); }
25% { transform: translate(80px, -15px) rotate(8deg); }
50% { transform: translate(140px, 20px) rotate(-4deg); }
75% { transform: translate(60px, 30px) rotate(6deg); }
}
@keyframes butterfly2-fly {
0%, 100% { transform: translate(0, 0) rotate(6deg); }
25% { transform: translate(-70px, 15px) rotate(-8deg); }
50% { transform: translate(-140px, -20px) rotate(4deg); }
75% { transform: translate(-60px, -30px) rotate(-6deg); }
}
@keyframes butterfly3-fly {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(-30px, -20px) rotate(-10deg); }
50% { transform: translate(-80px, 30px) rotate(8deg); }
75% { transform: translate(-20px, 45px) rotate(-4deg); }
}
}
.hero-specialty-en {
font-family: 'Cormorant Garamond', serif;
font-size: 1.04rem;
font-style: italic;
font-weight: 500;
color: var(--luxe-bronze);
letter-spacing: 0.10em;
text-transform: none;
opacity: 0.92;
margin-bottom: 6px;
text-shadow: 0 1px 4px rgba(255, 255, 255, 0.45);
}
/* In English mode, .hero-specialty below already shows the English tagline,
so the persistent English brand line becomes a visible duplicate. Hide it. */
html[lang="en"] .hero-specialty-en { display: none; }
/* Show the animated inline SVG (eyes blink + smile) as the primary portrait.
Arm was removed Apr 16 — the PNG fallback still has the old arm, so it's hidden now. */
.doctor-anim {
display: block;
width: 220px; height: 308px;
margin: 12px auto 4px;
animation: docBob 3s ease-in-out infinite;
filter: drop-shadow(0 10px 28px rgba(30,80,140,0.25)) drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}
.doctor-fallback { display: none; }
@media (max-width: 380px) {
.doctor-anim { width: 190px; height: 266px; }
}
/* ── Stats strip ── */
.hero-stats {
display: flex; align-items: center; justify-content: center;
gap: 8px;
padding: 8px 20px 4px;
max-width: 440px; margin: 0 auto; width: 100%;
animation: heroFadeIn 1.4s var(--ease-expo) 0.8s both;
}
.hero-stat {
display: flex; flex-direction: column; align-items: center;
flex: 1; padding: 10px 6px;
}
.hero-stat strong {
font-family: var(--font-serif);
font-size: 1.65rem; font-weight: 700;
color: #b8850a;
line-height: 1; letter-spacing: -0.01em;
text-shadow: 0 1px 8px rgba(255,220,140,0.5);
}
.hero-stat span {
font-size: 0.64rem;
color: #3e5874;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-top: 4px;
font-weight: 600;
}
.hero-stat-sep {
width: 1px; height: 28px;
background: linear-gradient(180deg, transparent, rgba(184,133,10,0.45), transparent);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════
EXPANSION ANNOUNCEMENT BANNER (2026-04-22)
Luxury gold-on-dark editorial banner that celebrates the
12-specialty / 510-condition expansion. Sits inside .home-hero
so it inherits the linen/champagne palette.
═══════════════════════════════════════════════════════════ */
.expansion-banner {
position: relative;
margin: 28px 14px 12px;
padding: 28px 22px 26px;
border-radius: 18px;
background:
radial-gradient(circle at 18% 10%, rgba(212,175,55,0.16) 0%, transparent 55%),
radial-gradient(circle at 82% 88%, rgba(212,175,55,0.10) 0%, transparent 50%),
linear-gradient(160deg, #1a2840 0%, #0f1a30 60%, #0b1428 100%);
border: 1px solid rgba(212,175,55,0.30);
box-shadow:
0 18px 48px rgba(8,16,38,0.40),
0 1px 0 rgba(255,255,255,0.05) inset,
0 0 0 1px rgba(212,175,55,0.04) inset;
overflow: hidden;
isolation: isolate;
animation: expansionFadeIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
@keyframes expansionFadeIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.expansion-glow {
position: absolute; inset: -40%;
background:
radial-gradient(circle at 30% 20%, rgba(255,220,140,0.10), transparent 45%),
radial-gradient(circle at 70% 80%, rgba(120,180,255,0.06), transparent 45%);
z-index: 0; pointer-events: none;
animation: expansionGlow 14s ease-in-out infinite alternate;
}
@keyframes expansionGlow {
from { transform: rotate(-2deg) scale(1); }
to { transform: rotate(3deg) scale(1.08); }
}
.expansion-eyebrow {
position: relative; z-index: 1;
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px; border-radius: 999px;
background: rgba(212,175,55,0.10);
border: 1px solid rgba(212,175,55,0.30);
margin-bottom: 14px;
}
.expansion-eyebrow-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #d4af37;
box-shadow: 0 0 10px rgba(212,175,55,0.8);
animation: expansionPulse 2s ease-in-out infinite;
}
@keyframes expansionPulse {
0%,100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.7; }
}
.expansion-eyebrow-text {
font-size: 0.66rem; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: #d4af37;
}
.expansion-headline {
position: relative; z-index: 1;
font-family: var(--font-serif, 'Cormorant Garamond', 'Noto Serif KR', serif);
font-size: clamp(1.5rem, 4vw, 2.05rem);
font-weight: 600; line-height: 1.18;
color: #f5e9c8;
letter-spacing: -0.01em;
margin: 0 0 12px;
text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.expansion-subhead {
position: relative; z-index: 1;
font-size: 0.92rem; line-height: 1.6;
color: rgba(245,233,200,0.85);
margin: 0 0 18px;
max-width: 60ch;
}
.expansion-flow {
position: relative; z-index: 1;
display: flex; align-items: baseline; justify-content: center;
gap: 10px; flex-wrap: wrap;
margin: 18px 0 14px;
padding: 14px 12px;
background: rgba(0,0,0,0.18);
border-radius: 14px;
border: 1px solid rgba(212,175,55,0.18);
}
.expansion-flow-from {
font-family: var(--font-serif, serif);
font-size: 1.6rem; font-weight: 600;
color: rgba(245,233,200,0.55);
text-decoration: line-through;
text-decoration-color: rgba(212,175,55,0.5);
}
.expansion-flow-arrow {
width: 80px; height: 16px;
margin: 0 4px;
}
.expansion-flow-to {
font-family: var(--font-serif, serif);
font-size: 2.4rem; font-weight: 700;
color: #f0c75e;
letter-spacing: -0.02em;
line-height: 1;
text-shadow:
0 0 24px rgba(240,199,94,0.55),
0 1px 0 rgba(0,0,0,0.4);
}
.expansion-flow-label {
font-size: 0.78rem; font-weight: 700;
color: #d4af37;
letter-spacing: 0.16em; text-transform: uppercase;
margin-left: 4px;
}
.expansion-divider {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 12px;
margin: 18px 0 14px;
}
.expansion-divider span {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent);
}
.expansion-divider em {
font-style: normal;
color: #d4af37;
font-size: 0.85rem;
text-shadow: 0 0 10px rgba(212,175,55,0.5);
}
.expansion-specialties-label {
position: relative; z-index: 1;
text-align: center;
font-size: 0.72rem; font-weight: 700;
color: rgba(212,175,55,0.85);
letter-spacing: 0.2em; text-transform: uppercase;
margin-bottom: 14px;
}
.expansion-specialties-grid {
position: relative; z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-bottom: 22px;
}
@media (min-width: 480px) {
.expansion-specialties-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 720px) {
.expansion-specialties-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.expansion-pill {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(212,175,55,0.22);
border-left: 3px solid var(--pill-color, #d4af37);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-webkit-tap-highlight-color: transparent;
}
.expansion-pill:hover,
.expansion-pill:focus-visible {
background: rgba(212,175,55,0.10);
border-color: rgba(212,175,55,0.45);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.expansion-pill:active { transform: translateY(0); }
.expansion-pill-wide {
grid-column: span 2;
}
@media (min-width: 480px) {
.expansion-pill-wide { grid-column: auto; }
}
.expansion-pill-icon {
font-size: 1.15rem;
line-height: 1;
flex-shrink: 0;
}
.expansion-pill-name {
font-size: 0.78rem; font-weight: 600;
color: #f5e9c8;
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.expansion-features {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 22px;
}
@media (min-width: 600px) {
.expansion-features {
grid-template-columns: repeat(2, 1fr);
}
}
.expansion-feature {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px;
background: rgba(0,0,0,0.18);
border-radius: 12px;
border: 1px solid rgba(212,175,55,0.14);
}
.expansion-feature-icon {
font-size: 1.35rem;
flex-shrink: 0;
line-height: 1.2;
filter: drop-shadow(0 0 8px rgba(212,175,55,0.3));
}
.expansion-feature-text {
font-size: 0.78rem;
line-height: 1.5;
color: rgba(245,233,200,0.88);
}
.expansion-feature-text b {
color: #f0c75e;
font-weight: 700;
font-size: 0.85rem;
}
.expansion-footer-quote {
position: relative; z-index: 1;
font-family: var(--font-serif, serif);
font-style: italic;
font-size: 0.95rem; line-height: 1.55;
color: #f5e9c8;
text-align: center;
margin: 8px 0 6px;
padding: 0 8px;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.expansion-attribution {
position: relative; z-index: 1;
text-align: center;
font-size: 0.74rem; font-weight: 600;
color: rgba(212,175,55,0.85);
letter-spacing: 0.12em;
}
/* ═══════════════════════════════════════════════════════════
REGION DIRECTORY CARDS (Apr 22)
Folder-style cards for the Musculoskeletal umbrella + 12
specialty directories. Sub-region view shows MSK children.
═══════════════════════════════════════════════════════════ */
.region-card-folder {
position: relative;
background: linear-gradient(135deg, rgba(139,111,71,0.18), rgba(212,175,55,0.10)) !important;
border: 1px solid rgba(212,175,55,0.45) !important;
border-left: 4px solid #d4af37 !important;
overflow: hidden;
}
.region-card-folder::before {
content: '';
position: absolute; top: -20%; right: -15%;
width: 60%; height: 140%;
background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 70%);
pointer-events: none;
}
.region-card-folder .region-name {
font-weight: 700;
letter-spacing: 0.01em;
}
.region-folder-badge {
position: absolute;
top: 10px; right: 10px;
font-size: 0.58rem; font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
background: rgba(212,175,55,0.22);
color: #d4af37;
border: 1px solid rgba(212,175,55,0.4);
z-index: 2;
}
.region-card-back {
display: flex !important;
align-items: center;
gap: 14px;
padding: 14px 18px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px dashed rgba(212,175,55,0.35) !important;
cursor: pointer;
grid-column: 1 / -1;
min-height: auto !important;
}
.region-card-back .region-icon {
font-size: 1.3rem;
width: auto;
margin: 0;
color: #d4af37;
}
.region-card-back .region-text {
text-align: left;
}
.region-card-back .region-name {
font-size: 0.85rem;
color: #f5e9c8;
}
.region-card-back .region-desc {
font-size: 0.7rem;
color: rgba(245,233,200,0.55);
}
.region-card-back:hover {
background: rgba(212,175,55,0.10) !important;
border-color: rgba(212,175,55,0.55) !important;
}
.region-breadcrumb {
grid-column: 1 / -1;
display: flex; align-items: center; gap: 10px;
padding: 12px 16px;
margin-bottom: 4px;
background: linear-gradient(90deg, rgba(212,175,55,0.10), transparent);
border-left: 3px solid #d4af37;
border-radius: 8px;
}
.region-breadcrumb-icon {
font-size: 1.2rem;
filter: drop-shadow(0 0 8px rgba(212,175,55,0.4));
}
.region-breadcrumb-text {
font-family: var(--font-serif, serif);
font-size: 1.05rem; font-weight: 600;
color: #f5e9c8;
flex: 1;
}
.region-breadcrumb-count {
font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.12em;
color: #d4af37;
text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════
PATIENT SAFETY BANNER (Apr 22 — critical)
Sticky/prominent on every condition page. Patients see this
BEFORE any clinical content. Includes emergency 119 button +
AI-generated label + error reporting.
═══════════════════════════════════════════════════════════ */
.safety-banner-strict {
margin: 0 0 14px 0;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(244, 67, 54, 0.18), rgba(244, 67, 54, 0.06));
border: 2px solid rgba(244, 67, 54, 0.5);
border-radius: 14px;
box-shadow: 0 4px 16px rgba(244, 67, 54, 0.18);
}
.safety-banner-row {
display: flex; align-items: center; gap: 10px;
margin-bottom: 8px;
}
.safety-banner-row:last-child { margin-bottom: 0; }
.safety-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.safety-msg {
font-size: 0.84rem; font-weight: 600;
color: #ffcdd2;
line-height: 1.45;
flex: 1;
}
.safety-banner-emergency {
flex-direction: column;
align-items: stretch;
gap: 6px;
padding: 8px 0;
}
@media (min-width: 480px) {
.safety-banner-emergency { flex-direction: row; align-items: center; gap: 10px; }
}
.emergency-call-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 10px 16px;
background: linear-gradient(135deg, #d32f2f, #b71c1c);
color: #fff;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.04em;
border-radius: 10px;
text-decoration: none;
border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
transition: all 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
.emergency-call-btn:hover,
.emergency-call-btn:focus-visible {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(244, 67, 54, 0.6);
background: linear-gradient(135deg, #f44336, #d32f2f);
}
.emergency-call-btn:active { transform: translateY(0); }
.safety-emergency-text {
font-size: 0.74rem;
color: rgba(255, 205, 210, 0.92);
line-height: 1.45;
}
.safety-banner-meta {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
padding-top: 8px;
margin-top: 4px;
border-top: 1px dashed rgba(244, 67, 54, 0.3);
flex-wrap: wrap;
}
.ai-generated-label {
font-size: 0.7rem;
color: rgba(255, 205, 210, 0.78);
font-style: italic;
font-weight: 500;
letter-spacing: 0.02em;
}
.report-error-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 205, 210, 0.4);
border-radius: 999px;
color: #ffcdd2;
font-size: 0.7rem; font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.report-error-btn:hover {
background: rgba(244, 67, 54, 0.18);
border-color: rgba(244, 67, 54, 0.6);
color: #fff;
}
/* ═══════════════════════════════════════════════════════════
MENTAL HEALTH HUB (Apr 22, 2026)
═══════════════════════════════════════════════════════════ */
.mh-entry-btn {
display: flex; align-items: center; gap: 14px;
width: 100%;
margin: 20px 0 16px;
padding: 18px 20px;
background: linear-gradient(135deg, rgba(126, 87, 194, 0.22), rgba(94, 53, 177, 0.10));
border: 1px solid rgba(126, 87, 194, 0.48);
border-left: 4px solid #7E57C2;
border-radius: 14px;
cursor: pointer;
text-align: left;
color: #f5e9c8;
font-family: inherit;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-webkit-tap-highlight-color: transparent;
}
.mh-entry-btn:hover,
.mh-entry-btn:focus-visible {
background: linear-gradient(135deg, rgba(126, 87, 194, 0.32), rgba(94, 53, 177, 0.16));
border-color: rgba(126, 87, 194, 0.7);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(94, 53, 177, 0.30);
}
.mh-entry-icon {
font-size: 2.2rem;
line-height: 1;
flex-shrink: 0;
filter: drop-shadow(0 0 12px rgba(126, 87, 194, 0.6));
}
.mh-entry-text { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mh-entry-title {
font-family: var(--font-serif, serif);
font-size: 1.05rem; font-weight: 700;
color: #d1c4e9;
line-height: 1.3;
}
.mh-entry-sub {
font-size: 0.75rem;
color: rgba(209, 196, 233, 0.78);
line-height: 1.45;
}
.mh-entry-arrow {
font-size: 1.8rem;
color: rgba(126, 87, 194, 0.8);
flex-shrink: 0;
}
#screen-mental-health {
padding: 14px 14px 80px;
max-width: 880px; margin: 0 auto;
}
.mh-back-bar { margin-bottom: 12px; }
.mh-back-btn {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(126, 87, 194, 0.3);
color: #d1c4e9;
padding: 8px 14px; border-radius: 999px;
font-size: 0.82rem; font-weight: 600;
cursor: pointer;
}
.mh-back-btn:hover { background: rgba(126, 87, 194, 0.14); }
.mh-hero {
padding: 28px 22px;
margin-bottom: 20px;
background:
radial-gradient(circle at 18% 10%, rgba(126, 87, 194, 0.22) 0%, transparent 55%),
linear-gradient(160deg, #1a2840 0%, #0f1a30 60%, #0b1428 100%);
border: 1px solid rgba(126, 87, 194, 0.45);
border-left: 4px solid #7E57C2;
border-radius: 18px;
box-shadow: 0 18px 48px rgba(8, 16, 38, 0.40);
}
.mh-hero-badge {
display: inline-block; padding: 5px 12px; border-radius: 999px;
background: rgba(126, 87, 194, 0.22);
border: 1px solid rgba(126, 87, 194, 0.5);
color: #d1c4e9;
font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
margin-bottom: 14px;
}
.mh-hero-title {
font-family: var(--font-serif, serif);
font-size: clamp(1.6rem, 4.5vw, 2.2rem);
font-weight: 600; line-height: 1.18;
color: #f5e9c8;
margin: 0 0 10px;
}
.mh-hero-subtitle {
color: rgba(245, 233, 200, 0.78);
font-style: italic; font-size: 0.92rem;
margin-bottom: 14px;
}
.mh-hero-intro {
color: rgba(245, 233, 200, 0.92);
font-size: 0.92rem; line-height: 1.65;
margin: 0;
}
.mh-section-title,
.mh-section-title-crisis {
font-family: var(--font-serif, serif);
font-size: 1.4rem; font-weight: 600;
color: #f5e9c8;
margin: 28px 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(126, 87, 194, 0.3);
}
.mh-section-title-crisis { color: #ff8a80; border-bottom-color: rgba(244, 67, 54, 0.45); }
.mh-section-intro {
color: rgba(245, 233, 200, 0.90);
font-size: 0.92rem; line-height: 1.55;
margin-bottom: 16px;
}
/* Crisis */
.mh-crisis { padding: 18px; background: linear-gradient(135deg, rgba(244, 67, 54, 0.12), transparent); border-radius: 14px; border-left: 4px solid #d32f2f; margin-bottom: 22px; }
.mh-crisis-intro { color: #ffcdd2; font-weight: 500; }
.mh-hotlines-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
@media (min-width: 560px) { .mh-hotlines-grid { grid-template-columns: repeat(2, 1fr); } }
.mh-hotline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: rgba(15, 26, 48, 0.7); border: 1px solid rgba(244, 67, 54, 0.35); border-left: 3px solid #d32f2f; border-radius: 10px; color: #f5e9c8; text-decoration: none; transition: all 0.2s; }
.mh-hotline:hover { background: rgba(244, 67, 54, 0.12); transform: translateY(-1px); }
.mh-hotline-country { font-weight: 700; font-size: 0.85rem; }
.mh-hotline-sub { font-size: 0.7rem; color: rgba(245, 233, 200, 0.7); margin-top: 2px; }
.mh-hotline-phone { font-weight: 700; font-size: 0.95rem; color: #ff8a80; }
.mh-safety-plan { margin-top: 14px; padding: 12px; background: rgba(255,255,255,0.04); border-radius: 10px; border: 1px solid rgba(244, 67, 54, 0.2); }
.mh-safety-plan summary { cursor: pointer; color: #ffcdd2; padding: 4px 0; }
.mh-safety-list { margin: 10px 0 0 20px; padding: 0; color: rgba(245, 233, 200, 0.9); font-size: 0.85rem; line-height: 1.6; }
.mh-safety-list li { margin-bottom: 6px; list-style: decimal; }
/* Screenings */
.mh-screening { padding: 18px; background: rgba(94, 53, 177, 0.08); border: 1px solid rgba(126, 87, 194, 0.3); border-radius: 12px; margin-bottom: 16px; }
.mh-screening-title { font-size: 1.1rem; font-weight: 700; color: #d1c4e9; margin: 0 0 6px; }
.mh-screening-desc { font-size: 0.85rem; color: rgba(245, 233, 200, 0.88); margin-bottom: 14px; }
.mh-question { padding: 10px 0; border-top: 1px dashed rgba(126, 87, 194, 0.25); }
.mh-question:first-child { border-top: none; }
.mh-q-text { font-size: 0.88rem; color: #f5e9c8; margin-bottom: 8px; line-height: 1.5; }
.mh-q-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.mh-q-opt { padding: 6px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(126, 87, 194, 0.3); border-radius: 999px; color: #d1c4e9; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.mh-q-opt:hover { background: rgba(126, 87, 194, 0.18); }
.mh-q-opt.selected { background: #7E57C2; color: #fff; border-color: #9575CD; }
.mh-score-btn { margin-top: 14px; padding: 10px 18px; background: linear-gradient(135deg, #7E57C2, #5E35B1); border: none; color: #fff; font-weight: 700; font-size: 0.9rem; border-radius: 10px; cursor: pointer; font-family: inherit; }
.mh-score-btn:hover { filter: brightness(1.1); }
.mh-result-box { margin-top: 14px; padding: 14px; background: rgba(67, 160, 71, 0.10); border: 1px solid rgba(67, 160, 71, 0.35); border-left: 4px solid #43a047; border-radius: 10px; }
.mh-result-score { font-size: 1.2rem; color: #80e082; font-weight: 700; }
.mh-result-level { font-size: 1rem; color: #f5e9c8; font-weight: 600; margin: 6px 0; }
.mh-result-advice { font-size: 0.88rem; color: rgba(245, 233, 200, 0.92); line-height: 1.55; }
.mh-result-disclaimer { margin-top: 10px; padding: 8px 10px; background: rgba(244, 67, 54, 0.08); border-radius: 8px; color: #ffcdd2; font-size: 0.74rem; }
.mh-result-warn { padding: 10px; background: rgba(244, 67, 54, 0.12); border-radius: 8px; color: #ffcdd2; font-size: 0.85rem; margin-top: 10px; }
/* Meditation 8-week */
.mh-weeks { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .mh-weeks { grid-template-columns: repeat(2, 1fr); } }
.mh-week { padding: 14px; background: rgba(94, 53, 177, 0.08); border: 1px solid rgba(126, 87, 194, 0.3); border-left: 3px solid #9575CD; border-radius: 10px; }
.mh-week-num { font-size: 0.7rem; color: #9575CD; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.mh-week-title { font-size: 1rem; font-weight: 700; color: #d1c4e9; margin: 6px 0; }
.mh-week-focus { font-size: 0.8rem; color: #80e082; margin-bottom: 8px; font-weight: 600; }
.mh-week-practice { font-size: 0.82rem; color: rgba(245, 233, 200, 0.88); line-height: 1.5; }
/* Daily care */
.mh-daily-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .mh-daily-grid { grid-template-columns: repeat(2, 1fr); } }
.mh-daily-card { padding: 16px; background: rgba(67, 160, 71, 0.08); border: 1px solid rgba(67, 160, 71, 0.3); border-left: 3px solid #43a047; border-radius: 12px; }
.mh-daily-icon { font-size: 1.6rem; margin-bottom: 6px; }
.mh-daily-cat { font-size: 0.7rem; color: #80e082; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.mh-daily-title { font-size: 1rem; color: #f5e9c8; margin: 4px 0 10px; font-weight: 700; }
.mh-daily-steps { margin: 0 0 0 20px; padding: 0; color: rgba(245, 233, 200, 0.92); font-size: 0.84rem; line-height: 1.55; }
.mh-daily-steps li { margin-bottom: 4px; list-style: decimal; }
/* Quotes */
.mh-quote-cat { padding: 16px; margin-bottom: 14px; background: rgba(15, 26, 48, 0.40); border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid currentColor; border-radius: 12px; }
.mh-quote-cat-title { font-family: var(--font-serif, serif); font-size: 1.15rem; font-weight: 600; margin: 0 0 12px; }
.mh-quote-list { display: flex; flex-direction: column; gap: 10px; }
.mh-quote { padding: 12px 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(212, 175, 55, 0.15); border-left: 2px solid; border-radius: 10px; }
.mh-quote-text { font-family: var(--font-serif, serif); font-style: italic; font-size: 0.95rem; line-height: 1.6; color: #f5e9c8; margin: 0 0 8px; border: none; padding: 0; }
.mh-quote-author { font-size: 0.78rem; color: #d4af37; font-weight: 700; letter-spacing: 0.05em; }
.mh-quote-source { display: block; font-size: 0.72rem; color: rgba(212, 175, 55, 0.65); font-weight: 500; margin-top: 2px; font-style: italic; }
/* Signature */
.mh-signature { margin-top: 28px; padding: 22px; background: linear-gradient(135deg, rgba(126, 87, 194, 0.14), rgba(212, 175, 55, 0.08)); border: 1px solid rgba(126, 87, 194, 0.35); border-radius: 14px; text-align: center; }
.mh-signature-title { font-family: var(--font-serif, serif); font-size: 1.15rem; color: #d1c4e9; margin: 0 0 12px; }
.mh-signature-text { font-family: var(--font-serif, serif); font-style: italic; font-size: 0.98rem; line-height: 1.7; color: #f5e9c8; margin-bottom: 14px; }
.mh-signature-attr { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; color: #d4af37; }
/* ═══════════════════════════════════════════════════════════
NATURAL-HEALING MISSION (Apr 22)
Banner that frames every treatment screen: natural first,
meds with side-effect cards, surgery last resort.
═══════════════════════════════════════════════════════════ */
.natural-banner {
display: flex; gap: 14px; align-items: flex-start;
padding: 14px 16px;
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(67, 160, 71, 0.18), rgba(212, 175, 55, 0.10));
border: 1px solid rgba(67, 160, 71, 0.35);
border-left: 4px solid #43a047;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.natural-banner-icon {
font-size: 1.6rem;
line-height: 1.2;
filter: drop-shadow(0 0 8px rgba(67, 160, 71, 0.5));
flex-shrink: 0;
}
.natural-banner-body { flex: 1; }
.natural-banner-title {
font-family: var(--font-serif, serif);
font-size: 1.05rem; font-weight: 700;
color: #5fc862;
margin-bottom: 4px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.natural-banner-text {
font-size: 0.82rem; line-height: 1.55;
color: rgba(245, 233, 200, 0.92);
}
/* Side-effect cards inline with each medication item */
.se-card {
margin-top: 10px;
padding: 10px 12px;
background: rgba(20, 20, 30, 0.55);
border: 1px solid rgba(244, 67, 54, 0.25);
border-left: 4px solid #f44336;
border-radius: 10px;
font-size: 0.78rem;
}
.se-header {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px; flex-wrap: wrap;
}
.se-warn {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
color: #fff;
font-size: 0.62rem; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
}
.se-drug {
font-weight: 700;
color: #fbc02d;
font-size: 0.82rem;
}
.se-list {
margin: 0 0 8px 16px;
padding: 0;
color: rgba(245, 233, 200, 0.85);
line-height: 1.55;
}
.se-list li {
margin-bottom: 2px;
list-style: disc;
}
.se-natural {
margin-top: 6px;
padding: 8px 10px;
background: linear-gradient(135deg, rgba(67, 160, 71, 0.18), rgba(76, 175, 80, 0.08));
border-radius: 8px;
border-left: 3px solid #43a047;
color: #b9e6bb;
font-size: 0.78rem;
line-height: 1.5;
font-weight: 500;
}
/* Make the natural-banner clickable to open evidence page */
.natural-banner {
cursor: pointer;
transition: all 0.25s ease;
-webkit-tap-highlight-color: transparent;
}
.natural-banner:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(67, 160, 71, 0.25);
border-color: rgba(67, 160, 71, 0.55);
}
.natural-banner-cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 8px;
padding: 4px 10px;
background: rgba(67, 160, 71, 0.25);
border-radius: 999px;
color: #80e082;
font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.04em;
}
/* ═══════════════════════════════════════════════════════════
NATURAL HEALING EVIDENCE SCREEN (Apr 22)
Dedicated page citing peer-reviewed research to defend
natural-medicine prioritization against pharma criticism.
═══════════════════════════════════════════════════════════ */
#screen-natural-healing {
padding: 14px 14px 80px;
max-width: 800px; margin: 0 auto;
}
.nh-back-bar {
margin-bottom: 12px;
}
.nh-back-btn {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(212, 175, 55, 0.28);
color: #f5e9c8;
padding: 8px 14px;
border-radius: 999px;
font-size: 0.82rem; font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.nh-back-btn:hover {
background: rgba(212, 175, 55, 0.15);
border-color: rgba(212, 175, 55, 0.5);
}
.nh-hero {
position: relative;
padding: 28px 22px;
margin-bottom: 22px;
background:
radial-gradient(circle at 18% 10%, rgba(67, 160, 71, 0.20) 0%, transparent 55%),
linear-gradient(160deg, #1a2840 0%, #0f1a30 60%, #0b1428 100%);
border: 1px solid rgba(67, 160, 71, 0.40);
border-left: 4px solid #43a047;
border-radius: 18px;
box-shadow: 0 18px 48px rgba(8, 16, 38, 0.40);
overflow: hidden;
}
.nh-hero-badge {
display: inline-block;
padding: 5px 12px;
border-radius: 999px;
background: rgba(67, 160, 71, 0.20);
border: 1px solid rgba(67, 160, 71, 0.45);
color: #80e082;
font-size: 0.66rem; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
margin-bottom: 14px;
}
.nh-hero-title {
font-family: var(--font-serif, 'Cormorant Garamond', 'Noto Serif KR', serif);
font-size: clamp(1.6rem, 4.5vw, 2.2rem);
font-weight: 600; line-height: 1.18;
color: #f5e9c8;
margin: 0 0 10px;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.nh-hero-subtitle {
color: rgba(245, 233, 200, 0.75);
font-size: 0.92rem; font-style: italic;
margin-bottom: 16px;
}
.nh-hero-intro {
color: rgba(245, 233, 200, 0.92);
font-size: 0.92rem; line-height: 1.6;
margin: 0;
}
.nh-section-title {
font-family: var(--font-serif, serif);
font-size: 1.35rem; font-weight: 600;
color: #f5e9c8;
margin: 28px 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
.nh-problem {
padding: 18px;
background: linear-gradient(135deg, rgba(244, 67, 54, 0.10), transparent);
border-radius: 14px;
border-left: 3px solid #f44336;
margin-bottom: 22px;
}
.nh-pillars {
display: flex; flex-direction: column; gap: 18px;
margin-bottom: 22px;
}
.nh-pillar {
padding: 18px;
background: linear-gradient(135deg, rgba(67, 160, 71, 0.14), rgba(212, 175, 55, 0.06));
border: 1px solid rgba(67, 160, 71, 0.30);
border-left: 3px solid #43a047;
border-radius: 14px;
}
.nh-pillar-title {
font-family: var(--font-serif, serif);
font-size: 1.18rem; font-weight: 600;
color: #80e082;
margin: 0 0 10px;
}
.nh-pillar-summary {
color: rgba(245, 233, 200, 0.95);
font-size: 0.92rem; line-height: 1.6;
margin: 0 0 16px;
font-weight: 500;
}
.nh-studies { display: flex; flex-direction: column; gap: 12px; }
.nh-study {
padding: 12px 14px;
background: rgba(15, 26, 48, 0.60);
border: 1px solid rgba(212, 175, 55, 0.18);
border-left: 2px solid #d4af37;
border-radius: 10px;
}
.nh-study-citation {
font-size: 0.74rem; font-style: italic;
color: rgba(212, 175, 55, 0.85);
margin-bottom: 8px;
line-height: 1.5;
}
.nh-study-finding {
font-size: 0.82rem; line-height: 1.55;
color: rgba(245, 233, 200, 0.92);
margin-bottom: 6px;
}
.nh-study-finding b { color: #80e082; font-weight: 700; }
.nh-study-impact {
font-size: 0.82rem; line-height: 1.55;
color: #f0c75e;
font-weight: 500;
}
.nh-study-impact b { color: #d4af37; font-weight: 700; }
.nh-honest {
padding: 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
margin-bottom: 22px;
}
.nh-honest-intro {
color: rgba(245, 233, 200, 0.90);
font-size: 0.9rem; line-height: 1.6;
margin: 0 0 12px;
}
.nh-honest-list {
margin: 0 0 18px 0; padding-left: 0;
list-style: none;
}
.nh-honest-list li {
padding: 8px 12px;
margin-bottom: 6px;
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
color: rgba(245, 233, 200, 0.92);
font-size: 0.86rem;
}
.nh-honest-bottom {
padding: 14px 16px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), transparent);
border-left: 3px solid #d4af37;
border-radius: 10px;
color: #f5e9c8;
font-size: 0.92rem; line-height: 1.65;
}
.nh-honest-bottom b {
color: #f0c75e; font-weight: 700;
}
.nh-cta {
padding: 18px;
background: linear-gradient(135deg, rgba(94, 53, 177, 0.18), rgba(212, 175, 55, 0.08));
border: 1px solid rgba(94, 53, 177, 0.35);
border-left: 3px solid #b39ddb;
border-radius: 14px;
margin-bottom: 22px;
}
.nh-cta-text {
color: rgba(245, 233, 200, 0.92);
font-size: 0.92rem; line-height: 1.6;
margin: 0 0 14px;
}
.nh-cta-questions {
margin: 0 0 16px 0; padding-left: 0;
list-style: none;
}
.nh-cta-questions li {
padding: 10px 14px;
margin-bottom: 8px;
background: rgba(94, 53, 177, 0.10);
border: 1px solid rgba(94, 53, 177, 0.25);
border-radius: 10px;
color: #d1c4e9;
font-size: 0.86rem; line-height: 1.5;
font-style: italic;
}
.nh-cta-closing {
margin: 0;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
color: #f5e9c8;
font-size: 0.92rem; line-height: 1.6;
font-weight: 500;
}
.nh-signature {
margin-top: 28px;
padding: 20px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(67, 160, 71, 0.06));
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 14px;
text-align: center;
}
.nh-signature-quote {
font-family: var(--font-serif, serif);
font-style: italic;
font-size: 1rem; line-height: 1.65;
color: #f5e9c8;
margin-bottom: 14px;
}
.nh-signature-attr {
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.12em;
color: #d4af37;
}
/* ── Mode cards (glass morphism) ── */
.mode-grid {
display: flex; flex-direction: column; gap: 10px;
padding: 14px 20px 8px;
width: 100%; max-width: 440px; margin: 0 auto;
animation: heroFadeIn 1.4s var(--ease-expo) 1s both;
}
.mode-card {
background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.72) 100%);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
border: 1px solid rgba(255,255,255,0.8);
border-radius: 18px;
padding: 16px;
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
transition: all 0.3s var(--ease-expo);
text-align: left;
position: relative;
overflow: hidden;
box-shadow: 0 6px 20px rgba(30,80,140,0.08), 0 1px 3px rgba(30,80,140,0.06);
}
.mode-card::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(92,184,242,0.08) 0%, transparent 50%, rgba(150,230,200,0.1) 100%);
opacity: 0;
transition: opacity 0.3s var(--ease-expo);
pointer-events: none;
}
.mode-card:hover::before,
.mode-card:active::before { opacity: 1; }
.mode-card:hover {
border-color: rgba(92,184,242,0.55);
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(30,80,140,0.15), 0 0 0 1px rgba(92,184,242,0.35);
background: rgba(255,255,255,0.95);
}
.mode-card:active { transform: translateY(0) scale(0.98); }
.mode-card.featured {
border-color: rgba(212,175,55,0.4);
background: linear-gradient(135deg, rgba(255,240,200,0.85) 0%, rgba(255,255,255,0.85) 40%, rgba(220,240,255,0.85) 100%);
box-shadow: 0 6px 20px rgba(212,175,55,0.15), 0 1px 3px rgba(212,175,55,0.1);
}
.mode-card.featured:hover {
border-color: rgba(212,175,55,0.65);
box-shadow: 0 14px 36px rgba(212,175,55,0.22), 0 0 0 1px rgba(212,175,55,0.4);
}
.mode-icon {
width: 54px; height: 54px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
background: linear-gradient(135deg, #e6f4fd 0%, #fff 100%);
border: 1px solid rgba(92,184,242,0.25);
position: relative;
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), 0 2px 6px rgba(92,184,242,0.15);
}
.mode-icon::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 60%);
pointer-events: none;
}
.mode-icon > span {
font-size: 1.7rem; line-height: 1;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
transition: transform 0.4s var(--ease-expo);
}
.mode-card:hover .mode-icon > span { transform: scale(1.15); }
.mode-card.featured .mode-icon {
background: linear-gradient(135deg, #fff4d9 0%, #fff 100%);
border-color: rgba(212,175,55,0.45);
box-shadow: inset 0 1px 2px rgba(255,255,255,0.9), 0 2px 8px rgba(212,175,55,0.2);
}
.mode-card.featured .mode-icon::after {
background: radial-gradient(circle at 30% 30%, rgba(255,220,140,0.5), transparent 60%);
}
.mode-info { flex: 1; min-width: 0; }
.mode-name {
font-size: 1rem; font-weight: 800;
color: #1a2b45;
letter-spacing: -0.005em;
}
.mode-desc {
font-size: 0.77rem; color: #4a6280;
margin-top: 3px; line-height: 1.45;
}
.mode-arrow {
color: #98adc5;
font-size: 1.5rem;
font-weight: 300;
transition: transform 0.3s var(--ease-expo), color 0.3s;
}
.mode-card:hover .mode-arrow { color: #1862a0; transform: translateX(4px); }
.mode-card.featured:hover .mode-arrow { color: #b8850a; }
/* ── Home footer ── */
.home-footer {
padding: 14px 20px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.profile-btn {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(184,133,10,0.35);
border-radius: 99px;
padding: 10px 22px;
color: #1a2b45;
font-size: 0.84rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s var(--ease-expo);
letter-spacing: 0.02em;
box-shadow: 0 4px 14px rgba(30,80,140,0.1);
}
.profile-btn:hover {
border-color: #b8850a;
color: #b8850a;
background: rgba(255,245,220,0.95);
box-shadow: 0 6px 20px rgba(212,175,55,0.25);
}
.profile-icon { font-size: 0.95rem; }
.home-tagline {
font-family: 'Cormorant Garamond', serif;
font-size: 0.72rem;
font-style: italic;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #5c7896;
opacity: 0.85;
text-shadow: 0 1px 4px rgba(255,255,255,0.5);
}
/* ── Home animations ── */
@keyframes auroraDrift {
0% { transform: translate(0,0) scale(1) rotate(0deg); }
33% { transform: translate(3%,-2%) scale(1.06) rotate(2deg); }
66% { transform: translate(-2%,2%) scale(1.1) rotate(-1.5deg); }
100% { transform: translate(-1%,-1%) scale(0.97) rotate(0.8deg); }
}
@keyframes gridDrift {
0% { background-position: 0 0, 0 0; }
100% { background-position: 56px 56px, 56px 56px; }
}
@keyframes particleFloat {
0% { transform: translateY(0) translateX(0); opacity: 0; }
8% { opacity: 0.95; }
92% { opacity: 0.85; }
100% { transform: translateY(-460px) translateX(18px); opacity: 0; }
}
/* Bubble rise — wobbles side-to-side as it rises (per-bubble --bw amplitude),
slight scale-up at peak for the "bobbing" feel before fade. */
@keyframes bubbleRise {
0% { transform: translateY(0) translateX(0) scale(0.85); opacity: 0; }
8% { opacity: 0.9; transform: translateY(-30px) translateX(calc(var(--bw, 18px) * 0.25)) scale(0.95); }
25% { transform: translateY(-130px) translateX(calc(var(--bw, 18px) * -0.6)) scale(1); }
50% { transform: translateY(-260px) translateX(calc(var(--bw, 18px) * 0.7)) scale(1.05); opacity: 0.92; }
75% { transform: translateY(-390px) translateX(calc(var(--bw, 18px) * -0.5)) scale(1.1); opacity: 0.85; }
92% { opacity: 0.55; }
100% { transform: translateY(-560px) translateX(calc(var(--bw, 18px) * 0.4)) scale(1.18); opacity: 0; }
}
/* Slow ambient breathing of the entire background — feels alive but unobtrusive */
@keyframes bgBreathe {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.04) translate(-1%, -1%); }
}
/* Subtle rotation of the cathedral light rays */
@keyframes raysRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ECG heartbeat that flows from right to left, infinite scroll */
@keyframes ecgScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes goldShimmer {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes dotPulse {
0%,100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.6; }
}
@keyframes heroFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ====================== SELECT ====================== */
#screen-select { flex-direction: column; }
.condition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.condition-card {
background: var(--surface);
border: 1.5px solid var(--border2);
border-radius: var(--radius);
padding: 16px 10px;
cursor: pointer;
transition: all var(--transition);
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 7px;
position: relative;
overflow: hidden;
}
.condition-card:hover { border-color: rgba(0,212,255,0.3); background: var(--surface2); transform: translateY(-2px); }
.condition-card:active { transform: scale(0.96); }
.condition-card.done::after { content: '✓'; position: absolute; top: 8px; right: 10px;
color: var(--emerald); font-size: 0.9rem; font-weight: 900; }
.condition-card .c-icon { font-size: 1.8rem; }
.condition-card .c-name { font-size: 0.8rem; font-weight: 700; line-height: 1.3; }
.condition-card .c-eng { font-size: 0.62rem; color: var(--text2); }
.diff-dots { display: flex; gap: 3px; }
.diff-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--surface3); }
.diff-dot.on { background: var(--amber); }
/* ====================== LEARN ====================== */
#screen-learn { flex-direction: column; }
.learn-header { padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--border2); flex-shrink: 0; }
.patient-row { display: flex; gap: 12px; }
.patient-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--surface3); font-size: 1.5rem;
display: flex; align-items: center; justify-content: center; border: 2px solid var(--border); flex-shrink: 0;
overflow: hidden; padding: 0; }
.patient-info { flex: 1; }
.patient-name { font-size: 0.95rem; font-weight: 700; }
.patient-chief { font-size: 0.8rem; color: var(--text2); font-style: italic; margin-top: 2px; }
.vitals-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.vital-chip { background: var(--surface3); border-radius: 7px; padding: 3px 9px;
font-size: 0.7rem; color: var(--text2); }
.vital-chip b { color: var(--text); }
.tab-nav { display: flex; background: var(--surface); border-bottom: 1px solid var(--border2);
overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-shrink: 0; }
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn { flex-shrink: 0; padding: 12px 16px; font-size: 0.8rem; font-weight: 600; color: var(--text2);
cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--transition);
white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.tab-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.tab-content { display: none; padding: 16px; flex: 1; }
.tab-content.active { display: block; animation: fadeSlideUp 0.22s ease both; }
.section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--cyan); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.section-label::after { content:''; flex:1; height:1px; background: var(--border2); }
.path-steps { display: flex; flex-direction: column; }
.path-step { display: flex; gap: 14px; padding-bottom: 20px; position: relative; }
.path-step::before { content:''; position: absolute; left: 18px; top: 38px; bottom: 0;
width: 2px; background: var(--border2); }
.path-step:last-child::before { display: none; }
.step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--cyan-dim); border: 2px solid var(--cyan);
display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700;
color: var(--cyan); flex-shrink: 0; }
.step-body { flex: 1; padding-top: 5px; }
.step-title { font-size: 0.88rem; font-weight: 700; margin-bottom: 3px; }
.step-desc { font-size: 0.8rem; color: var(--text2); line-height: 1.5; }
.symptom-list { display: flex; flex-direction: column; gap: 8px; }
.symptom-item { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 12px; }
.symptom-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.symptom-name { font-size: 0.88rem; font-weight: 600; }
.sev-dots { display: flex; gap: 3px; }
.sev-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--surface3); }
.sev-dot.on.pain { background: var(--red); }
.sev-dot.on.motor { background: var(--amber); }
.sev-dot.on.sensory { background: var(--purple); }
.sev-dot.on.other { background: var(--cyan); }
.symptom-desc { font-size: 0.76rem; color: var(--text2); line-height: 1.4; }
.exam-list { display: flex; flex-direction: column; gap: 8px; }
.exam-item { background: var(--surface); border: 1px solid var(--border2); border-left: 3px solid var(--cyan);
border-radius: var(--radius-sm); padding: 12px; }
.exam-name { font-size: 0.88rem; font-weight: 600; margin-bottom: 3px; }
.exam-desc { font-size: 0.78rem; color: var(--text2); line-height: 1.4; }
.img-switch { display: flex; gap: 8px; margin-bottom: 12px; }
.img-sw-btn { flex: 1; padding: 10px; background: var(--surface3); border: 1.5px solid transparent;
border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; color: var(--text2);
cursor: pointer; transition: all var(--transition); text-align: center; min-height: 44px; }
.img-sw-btn.active { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); }
.imaging-box { background: #000; border-radius: var(--radius); overflow: hidden;
min-height: 280px; max-height: 420px;
position: relative; border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center; }
.imaging-box img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; }
.imaging-box > svg { width: 100%; height: 100%; }
/* === ARROW OVERLAY (highlights lesion on real medical images) === */
.lesion-arrow { position: absolute; pointer-events: none; z-index: 5; }
.lesion-arrow .arrow-shaft {
position: absolute; height: 3px; transform-origin: right center;
background: linear-gradient(90deg, rgba(251,191,36,0) 0%, #fbbf24 60%, #fbbf24 100%);
filter: drop-shadow(0 0 4px rgba(0,0,0,0.95));
}
.lesion-arrow .arrow-tip {
position: absolute; width: 0; height: 0;
border-left: 14px solid #fbbf24;
border-top: 8px solid transparent; border-bottom: 8px solid transparent;
filter: drop-shadow(0 0 4px rgba(0,0,0,0.95));
transform: translate(0, -8px);
animation: arrowPulse 1.6s ease-in-out infinite;
}
.lesion-arrow .arrow-label {
position: absolute; background: rgba(0,0,0,0.92); color: #fbbf24;
padding: 5px 10px; border-radius: 6px;
font-size: 0.72rem; font-weight: 700;
white-space: normal; line-height: 1.25;
border: 1.5px solid #fbbf24; letter-spacing: 0.02em;
box-shadow: 0 4px 12px rgba(0,0,0,0.7);
/* left/top set inline at computed tail coordinate; center label on that point */
transform: translate(-50%, -50%);
width: max-content; max-width: min(180px, 68vw);
text-align: center;
}
@keyframes arrowPulse {
0%,100% { transform: translate(0,-8px) scale(1); opacity: 1; }
50% { transform: translate(-3px,-8px) scale(1.08); opacity: 0.85; }
}
@media (max-width: 380px) {
.lesion-arrow .arrow-label { font-size: 0.62rem; padding: 3px 7px; }
}
.img-caption { position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.88));
padding: 16px 12px 10px; font-size: 0.7rem; color: #bbb; }
.findings-chips { margin-top: 10px; }
.finding-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface);
border: 1px solid var(--border2); border-radius: 7px; padding: 5px 9px;
font-size: 0.73rem; margin: 3px; color: var(--text2); }
.finding-chip::before { content: '▸'; color: var(--cyan); }
.treat-list { display: flex; flex-direction: column; gap: 8px; }
.treat-item { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 12px; }
.treat-name { font-size: 0.88rem; font-weight: 600; color: var(--emerald); margin-bottom: 3px; }
.treat-desc { font-size: 0.78rem; color: var(--text2); line-height: 1.4; }
.surgical-box { background: var(--red-dim); border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius-sm); padding: 14px; margin-top: 10px; }
.surgical-title { font-size: 0.82rem; font-weight: 700; color: var(--red); margin-bottom: 6px; }
.surgical-list { font-size: 0.78rem; color: var(--text2); padding-left: 12px; }
.surgical-list li { margin-bottom: 3px; }
.prognosis-box { margin-top: 10px; background: var(--emerald-dim); border: 1px solid rgba(16,185,129,0.3);
border-radius: var(--radius-sm); padding: 12px; font-size: 0.8rem; color: var(--emerald); line-height: 1.5; }
.learn-footer { padding: 14px 16px; border-top: 1px solid var(--border2); flex-shrink: 0; }
/* ====================== QUIZ ====================== */
#screen-quiz { flex-direction: column; }
.q-progress-wrap { flex-shrink: 0; }
.q-progress-bar { height: 4px; background: var(--surface3); }
.q-progress-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--emerald));
transition: width 0.5s ease; border-radius: 0 2px 2px 0; }
.q-header { padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.q-count { font-size: 0.78rem; color: var(--text2); }
.q-score { background: var(--cyan-dim); border: 1px solid rgba(0,212,255,0.3); border-radius: 99px;
padding: 4px 12px; font-size: 0.78rem; font-weight: 700; color: var(--cyan); }
.q-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.q-question { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
padding: 18px; font-size: 0.95rem; font-weight: 600; line-height: 1.55; }
.q-options { display: flex; flex-direction: column; gap: 9px; }
.q-opt {
background: var(--surface);
border: 1.5px solid var(--border2);
border-radius: var(--radius-sm);
padding: 15px 14px;
font-size: 0.88rem;
cursor: pointer;
transition: all var(--transition);
display: flex;
align-items: center;
gap: 12px;
min-height: var(--touch);
text-align: left;
color: var(--text);
line-height: 1.4;
}
.q-opt:hover { border-color: rgba(0,212,255,0.3); background: var(--cyan-dim); }
.q-opt:active { transform: scale(0.98); }
.q-opt.correct { animation: flashCorrect 0.55s ease forwards; border-color: var(--emerald) !important; background: rgba(16,185,129,0.12) !important; }
.q-opt.wrong { animation: flashWrong 0.5s ease forwards; border-color: var(--red) !important; background: rgba(239,68,68,0.1) !important; }
.q-opt.disabled { pointer-events: none; }
.opt-num { width: 28px; height: 28px; border-radius: 50%; background: var(--surface3); flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; }
.q-explain { background: var(--surface); border: 1px solid var(--emerald); border-radius: var(--radius-sm);
padding: 14px; font-size: 0.8rem; color: var(--text2); display: none; line-height: 1.55; }
.q-explain.show { display: block; animation: fadeSlideUp 0.25s ease both; }
.q-explain strong { color: var(--emerald); display: block; margin-bottom: 4px; }
.q-footer { padding: 12px 14px; flex-shrink: 0; }
/* ==================== SPEED QUIZ =================== */
#screen-speed { flex-direction: column; }
.speed-top { padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.combo-box { display: flex; align-items: baseline; gap: 4px; }
.combo-num { font-size: 2rem; font-weight: 900; color: var(--amber); line-height: 1; }
.combo-lbl { font-size: 0.65rem; color: var(--text2); font-weight: 600; text-transform: uppercase; }
.combo-box.pop { animation: comboShake 0.4s ease; }
.timer-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.timer-svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.timer-bg { stroke: var(--surface3); stroke-width: 7; fill: none; }
.timer-arc { stroke: var(--cyan); stroke-width: 7; fill: none; stroke-linecap: round;
stroke-dasharray: 157; transition: stroke-dashoffset 0.12s linear; }
.timer-arc.urgent { stroke: var(--red); animation: timerUrgent 0.5s ease-in-out infinite; }
.timer-num { font-size: 1rem; font-weight: 800; fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.speed-pts { font-size: 1.6rem; font-weight: 900; }
.speed-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.speed-q { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
padding: 18px; font-size: 0.92rem; font-weight: 600; line-height: 1.5; }
.speed-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s-opt {
background: var(--surface);
border: 1.5px solid var(--border2);
border-radius: var(--radius-sm);
padding: 14px 10px;
font-size: 0.82rem;
cursor: pointer;
transition: all var(--transition);
text-align: center;
min-height: var(--touch);
display: flex; align-items: center; justify-content: center;
color: var(--text);
line-height: 1.35;
}
.s-opt:hover { border-color: rgba(0,212,255,0.35); background: var(--cyan-dim); }
.s-opt:active { transform: scale(0.96); }
.s-opt.correct { animation: flashCorrect 0.45s ease forwards; border-color: var(--emerald) !important; }
.s-opt.wrong { animation: flashWrong 0.4s ease forwards; border-color: var(--red) !important; }
.s-opt.disabled { pointer-events: none; }
/* ================== IMAGE READ ================== */
#screen-image { flex-direction: column; }
.img-read-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.scan-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
background: #000; position: relative; }
.scan-wrap { min-height: 240px; max-height: 380px; }
.scan-wrap img { width: 100%; max-height: 340px; object-fit: contain; background: #000; }
.scan-wrap svg { width: 100%; display: block; }
.scan-type { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.75);
border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px;
font-size: 0.7rem; color: var(--cyan); font-weight: 700; letter-spacing: 0.07em; }
.img-q { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
padding: 16px; font-size: 0.9rem; font-weight: 600; line-height: 1.5; }
.img-opts { display: flex; flex-direction: column; gap: 8px; }
/* =================== RESULT =================== */
#screen-result { flex-direction: column; }
.result-body { flex: 1; display: flex; flex-direction: column; align-items: center;
padding: 24px 20px 32px; gap: 16px; max-width: 440px; margin: 0 auto; width: 100%; }
.result-emoji { font-size: 4rem; }
.score-ring-wrap { position: relative; width: 140px; height: 140px; }
.score-ring-wrap svg { width: 140px; height: 140px; }
.ring-bg { stroke: var(--surface3); stroke-width: 10; fill: none; }
.ring-arc { stroke-width: 10; fill: none; stroke-linecap: round;
stroke-dasharray: 283; animation: ringDraw 1.4s ease-out both; }
.ring-num { font-size: 1.6rem; font-weight: 900; fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.ring-lbl { font-size: 0.7rem; fill: var(--text2); text-anchor: middle; }
.result-headline { font-size: 1.4rem; font-weight: 900; text-align: center; }
.xp-pop { display: flex; align-items: center; gap: 8px; background: var(--amber-dim);
border: 1px solid rgba(245,158,11,0.35); border-radius: 99px; padding: 10px 20px;
font-size: 1rem; font-weight: 700; color: var(--amber); animation: xpPop 0.55s ease both; }
.levelup-box { background: linear-gradient(135deg, var(--cyan-dim), var(--purple-dim));
border: 1.5px solid var(--cyan); border-radius: var(--radius); padding: 16px;
text-align: center; width: 100%; animation: scaleIn 0.45s ease both; }
.levelup-lbl { font-size: 0.72rem; color: var(--cyan); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.levelup-name { font-size: 1.2rem; font-weight: 900; margin-top: 4px; }
.ach-earned { width: 100%; }
.ach-row { display: flex; align-items: center; gap: 12px; background: var(--amber-dim);
border: 1px solid rgba(245,158,11,0.3); border-radius: var(--radius-sm); padding: 12px;
margin-bottom: 8px; animation: fadeSlideUp 0.35s ease both; }
.ach-icon { font-size: 1.5rem; }
.ach-text .ach-name { font-size: 0.88rem; font-weight: 700; }
.ach-text .ach-desc { font-size: 0.73rem; color: var(--text2); }
.result-btns { display: flex; flex-direction: column; gap: 9px; width: 100%; }
/* ================= PROFILE ================= */
#screen-profile { flex-direction: column; }
.profile-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.profile-hero { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
padding: 18px; display: flex; gap: 14px; align-items: center; }
.p-avatar { width: 64px; height: 64px; border-radius: 50%; font-size: 2rem;
background: linear-gradient(135deg, var(--cyan), var(--purple));
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--border); flex-shrink: 0; }
.p-level-lbl { font-size: 0.72rem; color: var(--cyan); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.p-name { font-size: 1.15rem; font-weight: 800; margin: 2px 0; }
.p-sub { font-size: 0.76rem; color: var(--text2); }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-box { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius-sm);
padding: 12px; text-align: center; }
.stat-val { font-size: 1.4rem; font-weight: 900; color: var(--cyan); }
.stat-lbl { font-size: 0.68rem; color: var(--text2); margin-top: 2px; }
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a-card { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius-sm);
padding: 12px; display: flex; flex-direction: column; gap: 5px; }
.a-card.earned { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.a-card.locked { opacity: 0.35; filter: grayscale(0.8); }
.a-card-icon { font-size: 1.4rem; }
.a-card-name { font-size: 0.8rem; font-weight: 700; }
.a-card-desc { font-size: 0.7rem; color: var(--text2); line-height: 1.3; }
/* ========= NOTIFICATIONS & FLOATS ========= */
#notif-wrap { position: fixed; top: 66px; right: 10px; z-index: 1000; pointer-events: none;
display: flex; flex-direction: column; gap: 7px; }
.notif-item { display: flex; align-items: center; gap: 9px; background: var(--surface2);
border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px;
font-size: 0.8rem; font-weight: 600; box-shadow: var(--shadow);
animation: notifIn 3.5s ease forwards; max-width: 200px; }
.notif-item.n-xp { border-color: rgba(245,158,11,0.4); color: var(--amber); }
.notif-item.n-ach { border-color: rgba(168,85,247,0.4); color: var(--purple); }
.notif-item.n-level { border-color: rgba(0,212,255,0.4); color: var(--cyan); }
.float-pt { position: fixed; pointer-events: none; z-index: 999; font-size: 1.2rem; font-weight: 900;
animation: floatScore 0.75s ease forwards; }
.float-pt.plus { color: var(--emerald); }
.float-pt.minus { color: var(--red); }
/* === MISC === */
.empty-hint { text-align: center; color: var(--text2); padding: 32px 16px; font-size: 0.85rem; }
/* ================= LANGUAGE TOGGLE ================= */
.lang-toggle-btn {
position: fixed;
top: 14px;
right: 14px;
z-index: 500;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(184,133,10,0.4);
color: #9a6f12;
font-size: 0.72rem;
font-weight: 800;
padding: 7px 14px;
border-radius: 99px;
cursor: pointer;
letter-spacing: 0.08em;
transition: all 0.3s var(--ease-expo);
box-shadow: 0 4px 14px rgba(184,133,10,0.15);
}
.lang-toggle-btn:hover {
background: rgba(255,245,220,1);
border-color: #b8850a;
color: #8a6410;
box-shadow: 0 6px 18px rgba(184,133,10,0.3);
}
/* ================= REGION SELECT SCREEN ================= */
#screen-region { flex-direction: column; }
.region-hint {
text-align: center;
color: var(--text2);
font-size: 0.82rem;
margin: 0 16px 12px;
}
.region-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 0 14px 24px;
}
.region-card {
background: var(--surface);
border: 1.5px solid var(--border2);
border-radius: var(--radius);
padding: 14px 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, transform 0.15s;
text-align: center;
min-height: 96px;
justify-content: center;
position: relative;
overflow: hidden;
}
.region-card-img {
min-height: 148px;
padding: 10px 8px 12px;
justify-content: flex-end;
gap: 4px;
}
.region-card .region-img {
position: absolute; inset: 0;
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(0.15) contrast(1.08) brightness(0.95);
transition: transform 0.4s ease, filter 0.3s;
z-index: 0;
}
.region-card .region-img-scrim {
position: absolute; inset: 0;
z-index: 1; pointer-events: none;
}
.region-card:hover .region-img,
.region-card:active .region-img { transform: scale(1.06); filter: grayscale(0) contrast(1.15) brightness(1); }
.region-card > :not(.region-img):not(.region-img-scrim) { position: relative; z-index: 2; }
.region-card:hover,
.region-card:active {
border-color: var(--cyan);
background: var(--cyan-dim);
transform: translateY(-2px);
}
.region-card.all-card {
grid-column: 1 / -1;
flex-direction: row;
gap: 12px;
min-height: 60px;
padding: 14px 20px;
border-color: var(--border);
background: var(--surface2);
}
.region-card.all-card:hover {
border-color: var(--cyan);
background: var(--cyan-dim);
}
.region-icon {
font-size: 1.8rem;
line-height: 1;
}
.region-card.all-card .region-icon { font-size: 1.4rem; }
.region-card-img .region-icon {
position: absolute;
top: 8px; right: 10px;
font-size: 1.1rem;
background: rgba(0,0,0,0.65);
border-radius: 99px;
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
z-index: 3;
backdrop-filter: blur(4px);
}
.region-name {
font-size: 0.78rem;
font-weight: 700;
color: var(--text);
line-height: 1.2;
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.region-card.all-card .region-name { font-size: 0.9rem; }
.region-card-img .region-name { font-size: 0.86rem; }
.region-desc {
font-size: 0.65rem;
color: var(--text2);
line-height: 1.3;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.region-card-img .region-desc { color: #cbd5e1; }
.region-count {
font-size: 0.62rem;
color: var(--cyan);
font-weight: 600;
background: var(--cyan-dim);
border-radius: 99px;
padding: 2px 8px;
margin-top: 2px;
backdrop-filter: blur(6px);
}
.region-card-img .region-count {
background: rgba(0,212,255,0.22);
border: 1px solid rgba(0,212,255,0.35);
}
/* === RESPONSIVE === */
@media (min-width: 480px) {
.condition-grid { grid-template-columns: repeat(3, 1fr); }
.region-grid { grid-template-columns: repeat(4, 1fr); }
.region-card.all-card { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
body { max-width: 480px; margin: 0 auto; box-shadow: 0 0 60px rgba(0,0,0,0.8); }
.screen { left: 50%; transform: translateX(-50%); width: 480px; max-width: 100vw; }
.screen.active { animation: scaleIn 0.28s ease both; }
#notif-wrap { right: calc(50vw - 480px/2 + 10px); }
.lang-toggle-btn { right: calc(50vw - 480px/2 + 12px); }
}
/* ========== INFOGRAPHIC TAB (disease progression) ========== */
.ig-hero {
text-align: center;
padding: 18px 14px;
background: linear-gradient(135deg, rgba(0,212,255,0.08) 0%, rgba(212,175,55,0.06) 100%);
border: 1px solid rgba(0,212,255,0.2);
border-radius: var(--radius);
margin-bottom: 20px;
}
.ig-hero-label {
font-size: 0.65rem; font-weight: 700;
color: var(--cyan);
letter-spacing: 0.22em; text-transform: uppercase;
margin-bottom: 6px;
}
.ig-hero-title {
font-family: var(--font-serif-kr);
font-size: 1.15rem; font-weight: 700;
color: var(--text);
line-height: 1.35;
margin: 0 0 6px;
}
.ig-hero-sub {
font-size: 0.76rem;
color: var(--text2);
line-height: 1.4;
}
.ig-timeline {
display: flex; flex-direction: column;
padding: 4px 0;
}
.ig-step {
display: flex; gap: 14px;
padding: 4px 0;
position: relative;
animation: igFadeIn 0.5s ease-out both;
}
.ig-step:nth-child(1) { animation-delay: 0.0s; }
.ig-step:nth-child(2) { animation-delay: 0.1s; }
.ig-step:nth-child(3) { animation-delay: 0.2s; }
.ig-step:nth-child(4) { animation-delay: 0.3s; }
.ig-step:nth-child(5) { animation-delay: 0.4s; }
.ig-step:nth-child(6) { animation-delay: 0.5s; }
.ig-step-marker {
display: flex; flex-direction: column; align-items: center;
flex-shrink: 0;
width: 60px;
}
.ig-step-circle {
width: 54px; height: 54px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
position: relative;
color: #fff;
border: 3px solid rgba(255,255,255,0.15);
transition: transform 0.3s var(--ease-expo);
}
.ig-step:hover .ig-step-circle { transform: scale(1.08); }
.ig-step-icon {
font-size: 1.7rem;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.ig-step-num {
position: absolute;
top: -4px; right: -4px;
background: #0d1526;
border: 2px solid currentColor;
width: 20px; height: 20px;
border-radius: 50%;
font-size: 0.65rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
line-height: 1;
}
.ig-step-line {
width: 4px;
flex: 1;
min-height: 24px;
border-radius: 99px;
margin-top: 2px;
opacity: 0.7;
}
.ig-step-body {
flex: 1; min-width: 0;
padding-bottom: 22px;
padding-top: 4px;
}
.ig-step-title {
font-size: 0.95rem; font-weight: 800;
margin-bottom: 4px;
letter-spacing: -0.005em;
line-height: 1.3;
}
.ig-step-desc {
font-size: 0.81rem;
color: var(--text2);
line-height: 1.55;
background: var(--surface);
padding: 10px 12px;
border-radius: var(--radius-sm);
border-left: 2px solid currentColor;
opacity: 0.95;
}
.ig-note {
margin-top: 12px;
padding: 11px 14px;
background: rgba(0,212,255,0.06);
border: 1px solid rgba(0,212,255,0.2);
border-radius: var(--radius-sm);
font-size: 0.76rem;
color: var(--text);
line-height: 1.55;
}
@keyframes igFadeIn {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
/* ========== NORMAL ANATOMY vs PATHOLOGY COMPARISON ========== */
.anat-compare {
display: flex; flex-direction: column;
gap: 14px;
align-items: stretch;
}
.anat-panel {
background: var(--surface);
border: 1.5px solid var(--border2);
border-radius: var(--radius);
padding: 12px;
display: flex; flex-direction: column; gap: 10px;
position: relative;
transition: transform 0.3s var(--ease-expo), border-color 0.3s;
}
.anat-panel-normal { border-color: rgba(16,185,129,0.35); }
.anat-panel-normal:hover { border-color: rgba(16,185,129,0.6); transform: translateY(-2px); }
.anat-panel-pathology { border-color: rgba(239,68,68,0.35); }
.anat-panel-pathology:hover { border-color: rgba(239,68,68,0.6); transform: translateY(-2px); }
.anat-img-wrap {
position: relative;
background: #fff;
border-radius: var(--radius-sm);
overflow: hidden;
min-height: 200px; max-height: 320px;
display: flex; align-items: center; justify-content: center;
}
.anat-img {
width: 100%; height: 100%;
max-height: 320px;
object-fit: contain;
background: #fff;
padding: 6px;
}
.anat-img-fallback {
padding: 40px; color: var(--text2);
align-items: center; justify-content: center;
}
.anat-badge {
position: absolute; top: 10px; left: 10px;
color: #fff;
font-size: 0.64rem; font-weight: 800;
padding: 5px 11px; border-radius: 99px;
letter-spacing: 0.14em;
box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.anat-badge-normal { background: rgba(16,185,129,0.95); }
.anat-badge-pathology { background: rgba(239,68,68,0.95); }
.anat-title {
font-family: var(--font-serif-kr);
font-size: 1rem; font-weight: 700;
color: var(--text);
margin: 0;
line-height: 1.3;
}
.anat-panel-normal .anat-title { color: #10b981; }
.anat-panel-pathology .anat-title { color: #ef4444; }
.anat-desc {
font-size: 0.82rem;
color: var(--text2);
line-height: 1.55;
background: rgba(255,255,255,0.02);
padding: 10px 12px;
border-radius: var(--radius-sm);
border-left: 3px solid currentColor;
margin: 0;
}
.anat-panel-normal .anat-desc { color: var(--text2); border-left-color: var(--emerald); }
.anat-panel-pathology .anat-desc { color: var(--text2); border-left-color: var(--red); }
.anat-vs {
display: flex; align-items: center; justify-content: center;
gap: 10px;
padding: 2px 0;
}
.anat-vs::before, .anat-vs::after {
content: ''; flex: 1; height: 1px;
background: linear-gradient(90deg, rgba(16,185,129,0.4), rgba(239,68,68,0.4));
}
.anat-vs span {
font-family: var(--font-serif);
font-size: 0.95rem; font-weight: 700;
color: var(--gold-warm);
letter-spacing: 0.2em;
padding: 3px 14px;
border: 1.5px solid rgba(212,175,55,0.4);
border-radius: 99px;
background: rgba(13,21,38,0.6);
}
.anatomy-note {
margin-top: 14px;
padding: 12px;
background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(239,68,68,0.08));
border: 1px solid rgba(212,175,55,0.25);
border-radius: var(--radius-sm);
font-size: 0.8rem;
color: var(--text);
line-height: 1.5;
}
@media (min-width: 520px) {
.anat-compare { flex-direction: row; align-items: stretch; }
.anat-panel { flex: 1; min-width: 0; }
.anat-vs { flex-direction: column; padding: 0 2px; min-width: 40px; }
.anat-vs::before, .anat-vs::after {
width: 1px; height: auto; flex: 1;
background: linear-gradient(180deg, rgba(16,185,129,0.4), rgba(239,68,68,0.4));
}
}
/* ========== EXERCISE THERAPY TAB ========== */
.exercise-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.exercise-item {
display: flex; gap: 12px;
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
padding: 14px;
transition: all var(--transition);
}
.exercise-item:hover {
border-color: rgba(16,185,129,0.4);
background: linear-gradient(135deg, var(--surface) 0%, rgba(16,185,129,0.04) 100%);
}
.exercise-num {
width: 32px; height: 32px;
background: linear-gradient(135deg, var(--emerald), #059669);
color: #fff;
border-radius: 99px;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 0.88rem;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(16,185,129,0.3);
}
.exercise-body { flex: 1; min-width: 0; }
.exercise-name {
font-size: 0.92rem; font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
.exercise-desc {
font-size: 0.8rem;
color: var(--text2);
line-height: 1.5;
}
.exercise-disclaimer {
margin-top: 12px;
padding: 10px 14px;
font-size: 0.76rem;
color: var(--amber);
background: var(--amber-dim);
border: 1px solid rgba(245,158,11,0.3);
border-radius: var(--radius-sm);
line-height: 1.5;
}
/* ========== YOUTUBE BUTTON (in Exercise tab) ========== */
.youtube-btn {
display: flex; align-items: center; gap: 14px;
padding: 16px;
margin-bottom: 6px;
background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
border-radius: var(--radius);
color: #fff;
text-decoration: none;
box-shadow: 0 8px 24px rgba(255,0,0,0.25);
transition: all var(--transition);
cursor: pointer;
}
.youtube-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(255,0,0,0.4);
}
.youtube-btn:active { transform: scale(0.98); }
.yt-icon {
width: 42px; height: 42px;
background: rgba(255,255,255,0.15);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.yt-text { flex: 1; display: flex; flex-direction: column; }
.yt-title { font-size: 0.95rem; font-weight: 800; }
.yt-sub { font-size: 0.72rem; opacity: 0.85; margin-top: 2px; }
.yt-arrow { font-size: 1.5rem; font-weight: 300; opacity: 0.8; }
/* ========== EDUCATIONAL VIDEO TAB ========== */
.video-hero {
text-align: center;
padding: 20px 16px;
background: linear-gradient(135deg, rgba(255,0,0,0.08) 0%, rgba(13,21,38,0.6) 100%);
border: 1px solid rgba(255,0,0,0.2);
border-radius: var(--radius);
margin-bottom: 14px;
}
.video-hero-icon {
font-size: 2.4rem;
margin-bottom: 6px;
filter: drop-shadow(0 4px 10px rgba(255,0,0,0.4));
}
.video-hero-title {
font-family: var(--font-serif-kr);
font-size: 1.2rem; font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
.video-hero-sub {
font-size: 0.78rem;
color: var(--text2);
line-height: 1.4;
}
.video-card {
display: flex; align-items: center; gap: 14px;
padding: 16px;
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--radius);
color: var(--text);
text-decoration: none;
margin-bottom: 10px;
transition: all var(--transition);
cursor: pointer;
}
.video-card:hover {
transform: translateY(-2px);
border-color: rgba(255,0,0,0.4);
box-shadow: 0 8px 24px rgba(255,0,0,0.15);
}
.video-card-icon {
width: 48px; height: 48px;
background: var(--surface3);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.video-card-learn .video-card-icon {
background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(13,21,38,0.9));
border: 1px solid rgba(0,212,255,0.3);
}
.video-card-exercise .video-card-icon {
background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(13,21,38,0.9));
border: 1px solid rgba(16,185,129,0.3);
}
.video-card-body { flex: 1; min-width: 0; }
.video-card-title {
font-size: 0.96rem; font-weight: 700;
margin-bottom: 3px;
}
.video-card-desc {
font-size: 0.74rem;
color: var(--text2);
line-height: 1.4;
}
.video-card-play {
width: 36px; height: 36px;
background: #FF0000;
border-radius: 99px;
display: flex; align-items: center; justify-content: center;
font-size: 0.9rem;
color: #fff;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(255,0,0,0.4);
}
.video-note {
margin-top: 12px;
padding: 10px 14px;
font-size: 0.76rem;
color: var(--text2);
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
line-height: 1.5;
}
/* ============================================================
LEFT SIDEBAR DIRECTORY (Apr 16 — 61 conditions)
Mobile-first drawer; appears as collapsible side panel on wider screens.
============================================================ */
.nav-menu {
width: 44px;
height: 44px;
border-radius: 12px;
color: var(--cyan);
font-size: 1.3rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--cyan-dim);
border: 1px solid var(--border);
transition: transform var(--transition), background var(--transition);
}
.nav-menu:hover { background: var(--cyan-glow); }
.nav-menu:active { transform: scale(0.94); }
.sidenav-backdrop {
position: fixed;
inset: 0;
background: rgba(5, 10, 21, 0.78);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
z-index: 90;
}
.sidenav-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.sidenav {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(86vw, 360px);
background: linear-gradient(180deg, #0a1220 0%, #0d1526 60%, #050a15 100%);
color: var(--text);
border-right: 1px solid var(--border);
box-shadow: 6px 0 32px rgba(0, 0, 0, 0.6);
transform: translateX(-105%);
transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.32, 1);
z-index: 100;
display: flex;
flex-direction: column;
font-family: var(--font);
}
.sidenav.open {
transform: translateX(0);
}
.sidenav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px 14px;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, rgba(0, 212, 255, 0.09), rgba(13, 56, 128, 0.04));
}
.sidenav-titles {
display: flex;
align-items: center;
gap: 10px;
}
.sidenav-title {
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
margin: 0;
}
.sidenav-count {
font-size: 0.72rem;
font-weight: 700;
color: var(--cyan);
background: var(--cyan-dim);
border: 1px solid var(--border);
padding: 3px 9px;
border-radius: 999px;
letter-spacing: 0.02em;
}
.sidenav-close {
width: 36px;
height: 36px;
border-radius: 10px;
color: var(--text2);
font-size: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1px solid var(--border2);
transition: color var(--transition), background var(--transition);
}
.sidenav-close:hover {
color: var(--text);
background: var(--surface2);
}
.sidenav-search-wrap {
padding: 12px 14px 6px;
}
.sidenav-search {
width: 100%;
padding: 10px 14px;
font-size: 0.92rem;
font-family: inherit;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border2);
border-radius: 12px;
outline: none;
transition: border-color var(--transition), background var(--transition);
}
.sidenav-search::placeholder { color: var(--text3); }
.sidenav-search:focus {
border-color: var(--cyan);
background: var(--surface2);
}
.sidenav-body {
flex: 1;
overflow-y: auto;
padding: 6px 10px 16px;
scrollbar-width: thin;
}
.sidenav-body::-webkit-scrollbar { width: 5px; }
.sidenav-body::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 6px; }
.sidenav-region {
margin-top: 12px;
}
.sidenav-region-header {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
margin-bottom: 2px;
font-size: 0.82rem;
font-weight: 700;
color: var(--text2);
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border2);
}
.sidenav-region-icon { font-size: 1rem; }
.sidenav-region-count {
margin-left: auto;
font-size: 0.72rem;
color: var(--text3);
font-weight: 600;
}
.sidenav-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
margin: 2px 0;
border-radius: 10px;
font-size: 0.9rem;
color: var(--text);
text-align: left;
background: transparent;
border: 1px solid transparent;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), transform 0.12s ease;
}
.sidenav-item:hover {
background: var(--surface);
border-color: var(--border);
}
.sidenav-item:active {
transform: scale(0.985);
}
.sidenav-item-icon {
font-size: 1.05rem;
flex-shrink: 0;
}
.sidenav-item-body {
flex: 1;
min-width: 0;
}
.sidenav-item-name {
display: block;
font-weight: 600;
line-height: 1.3;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidenav-item-en {
display: block;
font-size: 0.72rem;
color: var(--text3);
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidenav-item-chev {
color: var(--text3);
font-size: 1rem;
flex-shrink: 0;
}
.sidenav-empty {
padding: 28px 16px;
text-align: center;
font-size: 0.85rem;
color: var(--text3);
}
.sidenav-footer {
padding: 10px 16px 14px;
font-size: 0.72rem;
color: var(--text3);
text-align: center;
border-top: 1px solid var(--border2);
background: rgba(255, 255, 255, 0.015);
}
/* ============================================================
SELF-DIAGNOSIS UI (자가 증상 진단)
3 screens: region pick → symptom checklist → ranked results
============================================================ */
/* CTA on home screen */
.mode-card.selfdx-cta {
border-color: rgba(168, 85, 247, 0.45);
background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(13, 56, 128, 0.06));
}
.mode-card.selfdx-cta:hover { border-color: rgba(168, 85, 247, 0.75); }
.mode-card.selfdx-cta .mode-icon { background: rgba(168, 85, 247, 0.18); color: var(--purple); }
/* Screen 1: Region picker intro */
.selfdx-intro {
padding: 24px 20px 16px;
text-align: center;
}
.selfdx-intro-icon {
font-size: 2.4rem;
margin-bottom: 10px;
}
.selfdx-intro-title {
font-size: 1.35rem;
font-weight: 800;
color: var(--text);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.selfdx-intro-subtitle {
font-size: 0.88rem;
color: var(--text2);
max-width: 380px;
margin: 0 auto;
line-height: 1.55;
}
/* Region cards (list style, different from existing region-grid) */
.selfdx-region-grid {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px 20px;
}
.selfdx-region-card {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 16px;
text-align: left;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.selfdx-region-card:hover {
background: var(--surface2);
transform: translateY(-1px);
}
.selfdx-region-card:active { transform: scale(0.99); }
.selfdx-region-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.selfdx-region-label {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.selfdx-region-name {
font-weight: 700;
font-size: 1.02rem;
color: var(--text);
}
.selfdx-region-count {
font-size: 0.78rem;
color: var(--text3);
}
.selfdx-region-chev {
color: var(--text3);
font-size: 1.3rem;
flex-shrink: 0;
}
/* Screen 2: Symptom checklist */
.selfdx-sx-count-chip {
min-width: 44px;
height: 36px;
padding: 0 14px;
border-radius: 999px;
background: var(--cyan-dim);
border: 1px solid var(--border);
color: var(--cyan);
font-weight: 700;
font-size: 0.92rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.selfdx-sx-header {
padding: 18px 20px 10px;
}
.selfdx-sx-region-tag {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
color: var(--text2);
background: var(--surface);
border: 1px solid var(--border2);
padding: 5px 11px;
border-radius: 999px;
margin-bottom: 10px;
}
.selfdx-sx-title {
font-size: 1.2rem;
font-weight: 800;
color: var(--text);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.selfdx-sx-subtitle {
font-size: 0.84rem;
color: var(--text2);
line-height: 1.5;
}
.selfdx-sx-list {
padding: 6px 14px 100px; /* bottom padding leaves room for sticky button */
display: flex;
flex-direction: column;
gap: 6px;
}
.selfdx-sx-item {
display: flex;
align-items: center;
gap: 11px;
padding: 13px 14px;
background: var(--surface);
border: 1.5px solid var(--border2);
border-radius: 13px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.selfdx-sx-item:hover { background: var(--surface2); border-color: var(--border); }
.selfdx-sx-item:active { transform: scale(0.99); }
.selfdx-sx-item input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.selfdx-sx-icon {
font-size: 1.25rem;
flex-shrink: 0;
}
.selfdx-sx-label {
flex: 1;
color: var(--text);
font-size: 0.94rem;
line-height: 1.45;
}
.selfdx-sx-check {
width: 26px;
height: 26px;
border-radius: 8px;
background: transparent;
border: 1.5px solid var(--border);
color: transparent;
font-size: 0.9rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.18s;
}
.selfdx-sx-item.checked {
background: rgba(0, 212, 255, 0.06);
border-color: var(--cyan);
}
.selfdx-sx-item.checked .selfdx-sx-check {
background: var(--cyan);
border-color: var(--cyan);
color: var(--bg);
}
.selfdx-sx-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: linear-gradient(to top, var(--bg) 60%, rgba(5, 10, 21, 0));
pointer-events: none;
z-index: 30;
}
#screen-selfdx-symptoms .selfdx-sx-footer > * { pointer-events: auto; }
@media (min-width: 768px) {
.selfdx-sx-footer { left: 50%; right: auto; width: 480px; transform: translateX(-50%); }
}
/* Primary / secondary buttons */
.selfdx-btn-primary {
width: 100%;
padding: 15px 18px;
font-size: 1rem;
font-weight: 700;
color: var(--bg);
background: linear-gradient(135deg, var(--cyan), #0d9fca);
border: none;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 212, 255, 0.25);
transition: transform 0.15s, opacity 0.15s;
font-family: inherit;
}
.selfdx-btn-primary:hover { transform: translateY(-1px); }
.selfdx-btn-primary:active { transform: scale(0.98); }
.selfdx-btn-primary:disabled {
background: var(--surface2);
color: var(--text3);
box-shadow: none;
cursor: not-allowed;
}
.selfdx-btn-secondary {
flex: 1;
padding: 12px 16px;
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
transition: background 0.15s;
}
.selfdx-btn-secondary:hover { background: var(--surface2); }
/* Screen 3: Results */
.selfdx-result-header {
padding: 18px 20px 10px;
}
.selfdx-result-tag {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
color: var(--text2);
background: var(--surface);
border: 1px solid var(--border2);
padding: 5px 11px;
border-radius: 999px;
margin-bottom: 10px;
}
.selfdx-result-title {
font-size: 1.3rem;
font-weight: 800;
color: var(--text);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.selfdx-result-subtitle {
font-size: 0.84rem;
color: var(--text2);
line-height: 1.55;
}
.selfdx-result-body { padding: 0 14px 30px; }
.selfdx-result-summary {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
margin-bottom: 12px;
font-size: 0.88rem;
color: var(--text);
background: rgba(0, 212, 255, 0.06);
border: 1px solid var(--border);
border-radius: 12px;
}
.selfdx-result-summary-badge {
min-width: 26px;
height: 26px;
padding: 0 9px;
border-radius: 999px;
background: var(--cyan);
color: var(--bg);
font-weight: 800;
font-size: 0.82rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.selfdx-result-summary strong { color: var(--cyan); }
.selfdx-result-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 18px;
}
.selfdx-result-card {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
padding: 14px 14px;
text-align: left;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 14px;
transition: transform 0.15s, border-color 0.2s;
}
.selfdx-result-card:hover { transform: translateY(-1px); }
.selfdx-result-card:active { transform: scale(0.99); }
.selfdx-result-card.high { border-color: rgba(16, 185, 129, 0.55); background: linear-gradient(135deg, rgba(16,185,129,0.08), var(--surface)); }
.selfdx-result-card.mid { border-color: rgba(245, 158, 11, 0.50); background: linear-gradient(135deg, rgba(245,158,11,0.07), var(--surface)); }
.selfdx-result-card.low { border-color: var(--border2); }
.selfdx-result-rank {
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--surface2);
color: var(--text);
font-weight: 800;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.selfdx-result-card.high .selfdx-result-rank { background: var(--emerald); color: #fff; }
.selfdx-result-card.mid .selfdx-result-rank { background: var(--amber); color: #1b1500; }
.selfdx-result-info { flex: 1; min-width: 0; }
.selfdx-result-name {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 3px;
}
.selfdx-result-name-icon { font-size: 1.05rem; }
.selfdx-result-name-ko {
font-weight: 700;
font-size: 1.02rem;
color: var(--text);
line-height: 1.3;
}
.selfdx-result-name-en {
font-size: 0.75rem;
color: var(--text3);
font-style: italic;
margin-bottom: 6px;
}
.selfdx-result-brief {
font-size: 0.82rem;
color: var(--text2);
line-height: 1.45;
margin: 6px 0 8px;
}
.selfdx-result-match {
display: flex;
align-items: center;
gap: 10px;
margin: 6px 0 8px;
}
.selfdx-result-match-bar {
flex: 1;
height: 8px;
border-radius: 999px;
background: var(--surface2);
overflow: hidden;
}
.selfdx-result-match-fill {
height: 100%;
border-radius: 999px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.selfdx-result-match-fill.high { background: linear-gradient(90deg, var(--emerald), #34d399); }
.selfdx-result-match-fill.mid { background: linear-gradient(90deg, var(--amber), #fbbf24); }
.selfdx-result-match-fill.low { background: linear-gradient(90deg, var(--text3), var(--text2)); }
.selfdx-result-match-pct {
font-weight: 700;
font-size: 0.84rem;
color: var(--text);
flex-shrink: 0;
}
.selfdx-result-matched {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
}
.selfdx-result-matched-label {
font-size: 0.7rem;
color: var(--emerald);
font-weight: 700;
margin-right: 4px;
}
.selfdx-result-chip {
font-size: 0.72rem;
padding: 3px 8px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.10);
border: 1px solid rgba(16, 185, 129, 0.30);
color: var(--text);
}
.selfdx-result-go {
color: var(--text3);
font-size: 1.3rem;
flex-shrink: 0;
margin-top: 4px;
}
.selfdx-result-empty {
padding: 40px 20px;
text-align: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
margin-bottom: 16px;
}
.selfdx-result-empty-icon { font-size: 2.4rem; margin-bottom: 10px; }
.selfdx-result-empty h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--text); }
.selfdx-result-empty p { font-size: 0.85rem; color: var(--text2); margin-bottom: 14px; }
.selfdx-result-back {
padding: 10px 18px;
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 10px;
}
.selfdx-result-actions {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
/* Disclaimer (shared across selfdx screens) */
.selfdx-disclaimer {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
margin: 14px 16px 20px;
background: rgba(245, 158, 11, 0.06);
border: 1px solid rgba(245, 158, 11, 0.35);
border-radius: 12px;
}
.selfdx-disclaimer-icon {
font-size: 1.4rem;
flex-shrink: 0;
margin-top: 2px;
}
.selfdx-disclaimer-body strong {
display: block;
font-size: 0.86rem;
color: var(--amber);
margin-bottom: 4px;
font-weight: 700;
}
.selfdx-disclaimer-body p {
font-size: 0.78rem;
color: var(--text2);
line-height: 1.55;
margin: 0;
}
/* ============================================================
FUNCTIONAL MEDICINE GUIDE — 50 diseases × supp/diet/life/exercise
============================================================ */
.mode-card.funcmed-cta {
border-color: rgba(34, 197, 94, 0.45);
background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(13, 56, 128, 0.05));
}
.mode-card.funcmed-cta:hover { border-color: rgba(34, 197, 94, 0.75); }
.mode-card.funcmed-cta .mode-icon { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.funcmed-intro { padding: 22px 20px 14px; text-align: center; }
.funcmed-intro-icon { font-size: 2.4rem; margin-bottom: 8px; }
.funcmed-intro-title { font-size: 1.32rem; font-weight: 800; color: var(--text); margin-bottom: 8px; letter-spacing: -0.01em; }
.funcmed-intro-subtitle { font-size: 0.86rem; color: var(--text2); max-width: 400px; margin: 0 auto; line-height: 1.55; }
.funcmed-cat-grid { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; }
.funcmed-cat-card {
display: flex; align-items: center; gap: 14px;
width: 100%; padding: 14px 16px;
text-align: left;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 14px;
transition: transform 0.15s, background 0.2s, border-color 0.25s;
font-family: inherit;
}
.funcmed-cat-card:hover { background: var(--surface2); transform: translateY(-1px); }
.funcmed-cat-card:active { transform: scale(0.99); }
.funcmed-cat-icon {
width: 48px; height: 48px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.5rem; flex-shrink: 0;
}
.funcmed-cat-info { flex: 1; min-width: 0; }
.funcmed-cat-name { font-weight: 700; font-size: 1.02rem; color: var(--text); }
.funcmed-cat-count { font-size: 0.78rem; color: var(--text3); margin-top: 2px; }
.funcmed-cat-chev { color: var(--text3); font-size: 1.3rem; }
.funcmed-disclaimer-mini {
margin: 8px 16px 24px;
padding: 10px 14px;
font-size: 0.78rem;
color: var(--text2);
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.30);
border-radius: 10px;
text-align: center;
}
/* List screen */
.funcmed-list-header { padding: 16px 20px 8px; }
.funcmed-list-tag {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px;
border-radius: 999px;
font-size: 0.84rem; font-weight: 700;
margin-bottom: 8px;
}
.funcmed-list-sub { font-size: 0.84rem; color: var(--text2); line-height: 1.5; }
.funcmed-list-body { padding: 8px 14px 24px; display: flex; flex-direction: column; gap: 8px; }
.funcmed-disease-card {
display: flex; align-items: flex-start; gap: 12px;
width: 100%; padding: 13px 14px;
text-align: left;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
transition: background 0.18s, transform 0.12s;
font-family: inherit;
}
.funcmed-disease-card:hover { background: var(--surface2); }
.funcmed-disease-card:active { transform: scale(0.99); }
.funcmed-disease-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.funcmed-disease-text { flex: 1; min-width: 0; }
.funcmed-disease-name { font-weight: 700; font-size: 0.98rem; color: var(--text); margin-bottom: 3px; }
.funcmed-disease-brief { font-size: 0.78rem; color: var(--text2); line-height: 1.45; }
.funcmed-disease-chev { color: var(--text3); font-size: 1.3rem; }
/* Detail screen */
.funcmed-detail-header {
display: flex; gap: 14px; padding: 18px 20px 12px;
border-bottom: 1px solid var(--border2);
}
.funcmed-detail-icon {
width: 56px; height: 56px; border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.8rem; flex-shrink: 0;
}
.funcmed-detail-meta { flex: 1; min-width: 0; }
.funcmed-detail-name {
font-size: 1.18rem; font-weight: 800;
color: var(--text); margin: 0 0 2px;
letter-spacing: -0.01em;
}
.funcmed-detail-en {
font-size: 0.78rem; color: var(--text3); font-style: italic; margin-bottom: 6px;
}
.funcmed-detail-brief { font-size: 0.84rem; color: var(--text2); line-height: 1.5; }
.funcmed-detail-tabs {
flex-shrink: 0; /* prevent flex-column parent from collapsing this row */
display: flex;
gap: 6px;
padding: 12px 14px;
overflow-x: auto;
overflow-y: visible; /* tab pills must not be vertically clipped */
scrollbar-width: none;
border-bottom: 1px solid var(--border2);
min-height: 56px; /* guarantee enough height for one full pill row */
align-items: center;
}
.funcmed-detail-tabs::-webkit-scrollbar { display: none; }
.funcmed-tab {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 14px;
min-height: 36px; /* readable touch target */
white-space: nowrap; /* never wrap a label like 생활습관 / Lifestyle */
line-height: 1.2;
border-radius: 999px;
font-size: 0.86rem; font-weight: 600;
background: var(--surface);
border: 1px solid var(--border2);
color: var(--text2);
font-family: inherit;
transition: all 0.18s;
}
.funcmed-tab:hover { background: var(--surface2); color: var(--text); }
.funcmed-tab.active {
background: var(--cyan-dim);
border-color: var(--cyan);
color: var(--cyan);
}
.funcmed-tab small {
font-size: 0.66rem;
background: rgba(0, 212, 255, 0.20);
color: var(--cyan);
padding: 1px 6px;
border-radius: 999px;
font-weight: 700;
}
.funcmed-detail-body { padding: 14px 14px 30px; }
.funcmed-section-intro {
padding: 12px 14px;
margin-bottom: 14px;
font-size: 0.84rem;
color: var(--text);
background: rgba(0, 212, 255, 0.06);
border: 1px solid var(--border);
border-radius: 10px;
line-height: 1.55;
}
/* Supplement card */
.funcmed-supp-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 10px;
}
.funcmed-supp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.funcmed-supp-num {
width: 26px; height: 26px;
border-radius: 8px;
background: var(--cyan-dim); color: var(--cyan);
font-weight: 800; font-size: 0.82rem;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.funcmed-supp-name { font-weight: 700; font-size: 0.98rem; color: var(--text); line-height: 1.3; }
.funcmed-supp-en { font-size: 0.72rem; color: var(--text3); font-style: italic; margin-top: 1px; }
.funcmed-supp-row {
display: flex; gap: 10px;
padding: 7px 0;
font-size: 0.84rem;
line-height: 1.5;
border-top: 1px dashed var(--border2);
color: var(--text);
}
.funcmed-supp-row:first-of-type { border-top: none; padding-top: 0; }
.funcmed-supp-label {
flex-shrink: 0;
width: 76px;
font-size: 0.74rem;
font-weight: 700;
color: var(--text2);
}
/* Item card (diet/lifestyle/exercise) */
.funcmed-item-card {
display: flex; gap: 12px;
padding: 12px 14px;
margin-bottom: 8px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
}
.funcmed-item-num {
width: 26px; height: 26px;
border-radius: 8px;
background: var(--surface2); color: var(--text);
font-weight: 800; font-size: 0.82rem;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.funcmed-item-body { flex: 1; min-width: 0; }
.funcmed-item-name { font-weight: 700; font-size: 0.95rem; color: var(--text); margin-bottom: 4px; }
.funcmed-item-detail { font-size: 0.84rem; color: var(--text); line-height: 1.5; margin-bottom: 4px; }
.funcmed-item-evidence {
font-size: 0.78rem;
color: var(--emerald);
background: rgba(16, 185, 129, 0.07);
padding: 6px 8px;
border-radius: 6px;
margin-top: 4px;
}
.evidence-link {
color: inherit; text-decoration: none;
border-bottom: 1px dashed currentColor;
transition: color 0.15s, background 0.15s;
}
.evidence-link:hover, .evidence-link:focus {
color: #34d399;
background: rgba(52, 211, 153, 0.12);
border-bottom-style: solid;
}
.evidence-link-icon {
display: inline-block; font-size: 0.75em; opacity: 0.7;
margin-left: 2px; vertical-align: text-top;
}
.funcmed-research-card {
display: flex; gap: 12px;
padding: 14px;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(168, 85, 247, 0.05));
border: 1px solid var(--border);
border-radius: 12px;
}
.funcmed-research-icon { font-size: 1.4rem; flex-shrink: 0; }
.funcmed-research-text { font-size: 0.88rem; color: var(--text); line-height: 1.6; }
.funcmed-disclaimer {
margin-top: 18px;
padding: 14px 16px;
background: rgba(245, 158, 11, 0.06);
border: 1px solid rgba(245, 158, 11, 0.35);
border-radius: 12px;
}
.funcmed-disclaimer strong { display: block; font-size: 0.86rem; color: var(--amber); margin-bottom: 4px; font-weight: 700; }
.funcmed-disclaimer p { font-size: 0.78rem; color: var(--text2); line-height: 1.55; margin: 0; }
/* ============================================================
Cancer + Body Exercise CTAs and screens
============================================================ */
.mode-card.cancer-cta {
border-color: rgba(155, 89, 182, 0.45);
background: linear-gradient(135deg, rgba(155, 89, 182, 0.10), rgba(13, 56, 128, 0.05));
}
.mode-card.cancer-cta:hover { border-color: rgba(155, 89, 182, 0.75); }
.mode-card.cancer-cta .mode-icon { background: rgba(155, 89, 182, 0.18); color: #9b59b6; }
.mode-card.bodyex-cta {
border-color: rgba(34, 197, 94, 0.45);
background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(0, 200, 100, 0.05));
}
.mode-card.bodyex-cta:hover { border-color: rgba(34, 197, 94, 0.75); }
.mode-card.bodyex-cta .mode-icon { background: rgba(34, 197, 94, 0.18); color: #16a34a; }
/* Imaging pair */
.funcmed-image-pair {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 18px;
}
.funcmed-image-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.funcmed-image-tag {
padding: 8px 14px;
font-size: 0.82rem;
font-weight: 700;
border-bottom: 1px solid var(--border2);
}
.funcmed-image-tag.normal { background: rgba(16, 185, 129, 0.10); color: var(--emerald); }
.funcmed-image-tag.pathology { background: rgba(239, 68, 68, 0.10); color: var(--red); }
.funcmed-image-card img {
width: 100%;
max-height: 320px;
object-fit: contain;
background: #f8f8f8;
display: block;
}
.funcmed-image-fallback {
display: none;
padding: 36px;
text-align: center;
color: var(--text3);
background: var(--surface2);
font-size: 0.92rem;
}
.funcmed-image-fallback.show-fallback { display: block; }
.funcmed-image-title {
padding: 10px 14px 4px;
font-weight: 700;
font-size: 0.95rem;
color: var(--text);
}
.funcmed-image-desc {
padding: 0 14px 14px;
font-size: 0.84rem;
color: var(--text2);
line-height: 1.5;
}
/* Body Exercise cards */
.bodyex-card {
display: flex;
gap: 12px;
padding: 14px;
margin-bottom: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
}
.bodyex-num {
flex-shrink: 0;
width: 30px; height: 30px;
border-radius: 10px;
background: rgba(34, 197, 94, 0.18);
color: #16a34a;
font-weight: 800; font-size: 0.92rem;
display: inline-flex; align-items: center; justify-content: center;
}
.bodyex-body { flex: 1; min-width: 0; }
.bodyex-name {
font-weight: 700;
font-size: 1rem;
color: var(--text);
margin-bottom: 4px;
}
.bodyex-en {
font-size: 0.74rem;
color: var(--text3);
font-style: italic;
font-weight: 400;
}
.bodyex-muscles {
font-size: 0.78rem;
color: var(--cyan);
margin-bottom: 8px;
}
.bodyex-section {
margin-top: 8px;
font-size: 0.84rem;
line-height: 1.5;
}
.bodyex-section strong {
display: block;
color: var(--text);
font-size: 0.82rem;
margin-bottom: 2px;
}
.bodyex-section p {
color: var(--text2);
margin: 0;
}
.bodyex-section.bodyex-warn strong { color: var(--amber); }
.bodyex-section.bodyex-warn p { color: var(--text2); }
.bodyex-yt {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 8px 14px;
font-size: 0.86rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #ff0000, #cc0000);
border-radius: 8px;
text-decoration: none;
transition: transform 0.15s;
}
.bodyex-yt:hover { transform: translateY(-1px); }
.bodyex-yt:active { transform: scale(0.98); }
/* ── Home: About / Welcome card ─────────────────────────────── */
/* Card sits on the warm hero background, so we use a deep navy fill
with high-contrast type and an amber accent so it pops. */
.about-card {
position: relative;
margin: 18px 16px 4px;
padding: 22px 20px 20px;
background:
radial-gradient(120% 80% at 0% 0%, rgba(255, 184, 76, 0.10), transparent 60%),
linear-gradient(180deg, #0c1430 0%, #060c1f 100%);
border: 1px solid rgba(255, 196, 102, 0.35);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 12px 36px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(0, 0, 0, 0.4);
}
.about-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.5px;
background: linear-gradient(135deg, #ffc466 0%, #ff8a5b 50%, #ffc466 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.7;
}
.about-eyebrow {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #ffc466;
text-shadow: 0 0 12px rgba(255, 196, 102, 0.45);
margin-bottom: 8px;
}
.about-title {
font-size: 1.32rem;
line-height: 1.3;
font-weight: 800;
color: #ffffff;
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.about-lede {
font-size: 0.93rem;
line-height: 1.65;
color: #d4dcf0;
margin: 0 0 16px;
}
.about-features {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.about-features li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
background: rgba(255, 196, 102, 0.07);
border: 1px solid rgba(255, 196, 102, 0.22);
border-radius: 12px;
font-size: 0.85rem;
line-height: 1.5;
}
.about-feat-ico {
flex: 0 0 auto;
font-size: 1.05rem;
line-height: 1.4;
}
.about-feat-text {
flex: 1;
color: #e6ecfa;
}
.about-meta {
margin-top: 6px;
}
.about-meta-pill {
display: inline-block;
padding: 6px 13px;
background: rgba(255, 196, 102, 0.12);
border: 1px solid rgba(255, 196, 102, 0.32);
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
color: #ffd58a;
letter-spacing: 0.02em;
}
/* Keep features in a single column always — the 2-column layout was
cutting off feature text when wrapped inside the about-card on
narrow-but-not-mobile viewports (e.g. Edge sidebar view).
With only 6 condensed items, one column reads cleanly vertical.
@media (min-width: 480px) {
.about-features {
grid-template-columns: 1fr 1fr;
}
} */
.about-features {
grid-template-columns: 1fr;
}
/* ============================================================
AI HIGHLIGHT CARD inside about section
Prominent gradient card showcasing the AI feature
============================================================ */
.about-ai-highlight {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
margin: 8px 0 16px;
background:
linear-gradient(135deg, rgba(58, 123, 213, 0.25), rgba(0, 212, 255, 0.15)),
rgba(10, 22, 42, 0.6);
border: 1.5px solid rgba(127, 212, 255, 0.55);
border-radius: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow:
0 0 0 0 rgba(0, 212, 255, 0.5),
0 6px 24px rgba(58, 123, 213, 0.25);
animation: about-ai-pulse 3s ease-in-out infinite;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.about-ai-highlight::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
transform: translateX(-100%);
animation: about-ai-shine 4.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes about-ai-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4), 0 6px 24px rgba(58, 123, 213, 0.25); }
50% { box-shadow: 0 0 0 6px rgba(0, 212, 255, 0), 0 6px 28px rgba(58, 123, 213, 0.38); }
}
@keyframes about-ai-shine {
0% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
.about-ai-highlight:hover,
.about-ai-highlight:focus-visible {
transform: translateY(-2px);
outline: none;
border-color: rgba(127, 212, 255, 0.85);
}
.aah-icon {
width: 52px; height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, #3a7bd5, #00d4ff);
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(0, 212, 255, 0.45);
animation: about-aah-float 3s ease-in-out infinite;
position: relative;
z-index: 2;
}
@keyframes about-aah-float {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-3px) rotate(2deg); }
}
.aah-body { flex: 1; min-width: 0; position: relative; z-index: 2; }
.aah-title {
font-size: 1.02rem;
font-weight: 800;
color: #ffffff;
line-height: 1.3;
margin-bottom: 6px;
letter-spacing: -0.005em;
background: linear-gradient(90deg, #ffffff, #7fd4ff, #ffd08a, #ffffff);
background-size: 250% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: about-aah-shimmer 5s linear infinite;
}
@keyframes about-aah-shimmer {
0% { background-position: 0% center; }
100% { background-position: 250% center; }
}
.aah-desc {
font-size: 0.82rem;
color: rgba(232, 238, 246, 0.92);
line-height: 1.5;
margin-bottom: 8px;
}
.aah-tag {
display: inline-block;
font-size: 0.68rem;
padding: 4px 10px;
background: rgba(0, 255, 136, 0.12);
border: 1px solid rgba(0, 255, 136, 0.35);
color: #a7f5cf;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.3px;
}
.aah-arrow {
color: #7fd4ff;
font-size: 1.6rem;
font-weight: 300;
flex-shrink: 0;
align-self: center;
position: relative;
z-index: 2;
transition: transform 0.2s ease;
}
.about-ai-highlight:hover .aah-arrow {
transform: translateX(3px);
}
/* ============================================================
TRUST ROW — 4 pillars of credibility at the bottom of about
============================================================ */
.about-trust-row {
display: grid;
grid-template-columns: 1fr 1fr; /* 2x2 always — fits any card width */
gap: 8px;
margin: 14px 0 10px;
}
/* 4-across was cutting off the last pill (미국 LA 클리닉) on narrower
about-card widths. 2x2 grid is safer and reads cleaner. */
.about-trust-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: background 0.2s ease, border-color 0.2s ease;
}
.about-trust-pill:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(127, 212, 255, 0.35);
}
.atp-ico {
font-size: 1.4rem;
flex-shrink: 0;
line-height: 1;
}
.atp-label {
font-size: 0.78rem;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.atp-sub {
font-size: 0.68rem;
color: rgba(232, 238, 246, 0.65);
margin-top: 2px;
line-height: 1.3;
}
/* Bold text inside feature list */
.about-features li .about-feat-text b {
color: #ffd08a;
font-weight: 700;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.about-ai-highlight,
.about-ai-highlight::before,
.aah-icon,
.aah-title {
animation: none !important;
}
}
/* Home-screen "전체 질환 목록" quick button */
.home-directory-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: calc(100% - 32px);
margin: 14px auto 0;
padding: 13px 18px;
font-size: 0.92rem;
font-weight: 600;
color: var(--cyan);
background: var(--cyan-dim);
border: 1px solid var(--border);
border-radius: 14px;
transition: background var(--transition), transform var(--transition);
}
.home-directory-btn:hover { background: var(--cyan-glow); }
.home-directory-btn:active { transform: scale(0.98); }
.home-directory-btn .chev { color: var(--text3); font-size: 1rem; }
/* ≥768px: keep drawer width the same inside the centered 480px frame */
@media (min-width: 768px) {
.sidenav { width: min(360px, 86vw); }
}
/* ================ LEGAL COMPLIANCE (Google Play) ================ */
#legal-first-modal, #legal-policy-modal {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.legal-modal-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.78); backdrop-filter: blur(4px);
}
.legal-modal-card, .legal-policy-card {
position: relative; z-index: 1;
background: var(--bg, #0d1421);
color: var(--text, #e6edf3);
border: 1px solid rgba(251, 191, 36, 0.35);
border-radius: 14px;
max-width: 520px; width: 100%;
max-height: 92vh; overflow-y: auto;
padding: 22px 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.legal-modal-icon {
font-size: 2rem; text-align: center; margin-bottom: 4px;
}
.legal-modal-title {
text-align: center;
color: #fbbf24; font-size: 1.15rem; font-weight: 800;
margin: 0 0 12px; letter-spacing: 0.01em;
}
.legal-modal-lede {
background: rgba(251,191,36,0.08);
border-left: 3px solid #fbbf24;
padding: 10px 12px; border-radius: 6px;
font-size: 0.88rem; line-height: 1.55;
margin-bottom: 12px;
}
.legal-modal-list {
padding-left: 20px; margin: 0 0 14px;
font-size: 0.82rem; line-height: 1.55;
}
.legal-modal-list li { margin-bottom: 8px; }
.legal-modal-agree {
background: rgba(16,185,129,0.08);
border: 1px solid rgba(16,185,129,0.3);
padding: 12px; border-radius: 8px;
font-size: 0.85rem;
}
.legal-modal-check {
display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
line-height: 1.5;
}
.legal-modal-check input {
flex: 0 0 18px; width: 18px; height: 18px;
margin-top: 2px; cursor: pointer; accent-color: #10b981;
}
.legal-modal-actions {
display: flex; gap: 10px; margin-top: 18px;
flex-wrap: wrap; justify-content: center;
}
.legal-btn-primary {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1f1300; font-weight: 800; font-size: 0.95rem;
border: none; border-radius: 8px;
padding: 12px 22px; cursor: pointer;
box-shadow: 0 6px 18px rgba(251,191,36,0.35);
transition: transform 0.15s, opacity 0.15s;
}
.legal-btn-primary:disabled {
opacity: 0.4; cursor: not-allowed; box-shadow: none;
background: #555; color: #aaa;
}
.legal-btn-primary:not(:disabled):hover { transform: translateY(-1px); }
.legal-btn-secondary {
background: transparent; color: #9ca3af;
border: 1px solid #4b5563; border-radius: 8px;
padding: 10px 18px; cursor: pointer; font-size: 0.85rem;
}
.legal-btn-secondary:hover { color: #fbbf24; border-color: #fbbf24; }
/* Persistent footer bar */
#legal-footer-bar {
position: fixed; bottom: 0; left: 0; right: 0;
background: rgba(10, 15, 25, 0.96);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(251, 191, 36, 0.25);
padding: 7px 10px;
font-size: 0.68rem; color: #d1d5db;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 4px 10px;
z-index: 900;
}
.legal-footer-text { color: #fbbf24; }
.legal-footer-text strong { color: #fcd34d; }
.legal-footer-sep { color: #4b5563; }
.legal-footer-link {
background: none; border: none; color: #93c5fd;
font-size: 0.68rem; cursor: pointer;
text-decoration: underline; padding: 0 2px;
}
.legal-footer-link:hover { color: #60a5fa; }
/* Keep app content above footer (dynamic — set by legal-compliance.js) */
body { padding-bottom: calc(var(--legal-footer-h, 48px) + 4px); }
/* Policy modal */
.legal-policy-card { max-width: 640px; padding: 0; }
.legal-policy-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
position: sticky; top: 0; background: var(--bg, #0d1421); z-index: 1;
}
.legal-policy-header h2 { margin: 0; font-size: 1.1rem; color: #fbbf24; }
.legal-policy-close {
background: none; border: none; color: #9ca3af;
font-size: 1.2rem; cursor: pointer; padding: 4px 8px;
}
.legal-policy-close:hover { color: #fff; }
.legal-policy-body {
padding: 16px 22px;
font-size: 0.85rem; line-height: 1.65;
color: var(--text2, #d1d5db);
}
.legal-policy-body h3 {
color: #fbbf24; font-size: 0.95rem; font-weight: 700;
margin: 18px 0 6px; letter-spacing: 0.01em;
}
.legal-policy-body h3:first-child { margin-top: 0; }
.legal-policy-body p { margin: 0 0 10px; }
.legal-policy-body ul { padding-left: 22px; margin: 0 0 10px; }
.legal-policy-body ul li { margin-bottom: 4px; }
.legal-policy-body strong { color: #fef3c7; }
.legal-policy-body em { color: #9ca3af; font-style: italic; }
.legal-policy-footer {
padding: 14px 20px;
border-top: 1px solid rgba(255,255,255,0.08);
text-align: right;
position: sticky; bottom: 0; background: var(--bg, #0d1421);
}
@media (max-width: 420px) {
.legal-modal-card, .legal-policy-card { padding: 18px 14px; }
.legal-modal-title { font-size: 1rem; }
.legal-modal-list { font-size: 0.78rem; }
#legal-footer-bar { font-size: 0.62rem; padding: 6px 8px; }
}
/* ================ INSTALL STEP (2nd modal phase) ================ */
.install-step-icon {
display: flex; justify-content: center; margin-bottom: 10px;
}
.install-step-icon img {
width: 112px; height: 112px;
border-radius: 26px;
box-shadow: 0 14px 34px rgba(251, 191, 36, 0.35), 0 0 0 4px rgba(251, 191, 36, 0.14);
background: #0d1421;
}
.install-step-subtitle {
text-align: center;
color: #fbbf24;
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 16px;
letter-spacing: 0.01em;
}
.install-step-highlights {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 12px 8px;
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.02));
border: 1px solid rgba(251, 191, 36, 0.2);
border-radius: 12px;
}
.install-highlight {
display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.install-highlight-num {
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
font-weight: 700;
color: #fbbf24;
line-height: 1;
}
.install-highlight-lbl {
font-size: 0.7rem;
color: rgba(255,255,255,0.72);
font-weight: 500;
}
.install-step-body {
background: rgba(255,255,255,0.04);
border-radius: 12px;
padding: 14px 14px 12px;
margin-bottom: 18px;
border-left: 3px solid #fbbf24;
}
.install-step-heading {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 10px 0;
color: #f8fafc;
}
.install-step-list {
margin: 0; padding-left: 22px;
font-size: 0.88rem;
line-height: 1.65;
color: rgba(255,255,255,0.86);
}
.install-step-list li { margin-bottom: 6px; }
.install-step-desc {
margin: 0 0 8px 0;
font-size: 0.9rem;
line-height: 1.55;
color: rgba(255,255,255,0.88);
}
.install-step-fallback {
margin: 6px 0 0;
font-size: 0.78rem;
color: rgba(255,255,255,0.6);
}
.install-warning {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.35);
color: #fecaca;
padding: 10px 12px;
border-radius: 10px;
font-size: 0.86rem;
line-height: 1.55;
}
.install-step-actions {
display: flex; flex-direction: column; gap: 8px;
border-top: none !important;
}
.install-btn-big {
width: 100%;
font-size: 1.05rem !important;
padding: 14px 18px !important;
background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
color: #0d1421 !important;
font-weight: 800 !important;
box-shadow: 0 10px 28px rgba(251, 191, 36, 0.45) !important;
}
.install-btn-big:hover { transform: translateY(-2px); }
.install-step-actions .legal-btn-secondary {
width: 100%;
background: transparent !important;
color: rgba(255,255,255,0.55) !important;
font-size: 0.82rem !important;
padding: 8px !important;
}
@media (max-width: 420px) {
.install-step-icon img { width: 96px; height: 96px; }
.install-highlight-num { font-size: 1.3rem; }
.install-step-list { font-size: 0.82rem; }
}
/* ── iOS Safari prominent Download CTA ── */
.install-ios-cta {
margin: 0 0 14px;
padding: 14px;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(236, 72, 153, 0.12));
border: 1.5px solid rgba(251, 191, 36, 0.55);
border-radius: 14px;
text-align: center;
}
.install-ios-download-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 18px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1a0a00;
font-size: 1.05rem;
font-weight: 900;
letter-spacing: 0.3px;
border: none;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(251, 191, 36, 0.45);
transition: transform 0.15s, box-shadow 0.15s;
}
.install-ios-download-btn:hover,
.install-ios-download-btn:focus-visible {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(251, 191, 36, 0.6);
}
.install-ios-download-btn:active { transform: translateY(0) scale(0.98); }
.install-ios-download-icon { font-size: 1.3rem; }
.install-ios-cta-note {
margin: 10px 2px 0;
font-size: 0.82rem;
line-height: 1.5;
color: rgba(255,255,255,0.88);
}
/* ── Visual install steps (numbered cards) ── */
.install-visual-step {
display: flex;
gap: 14px;
padding: 12px 12px;
margin-bottom: 8px;
background: rgba(255,255,255,0.045);
border-radius: 10px;
border: 1px solid rgba(251, 191, 36, 0.12);
}
.install-visual-step + .install-visual-step { margin-top: 0; }
.install-step-num {
flex: 0 0 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #0d1421;
font-weight: 900;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.35);
}
.install-step-body-text { flex: 1; min-width: 0; }
.install-step-title-sm {
font-size: 0.95rem;
font-weight: 700;
color: #f8fafc;
margin-bottom: 4px;
}
.install-step-detail {
font-size: 0.84rem;
line-height: 1.55;
color: rgba(255,255,255,0.8);
}
.install-step-icon-hint {
margin-top: 10px;
padding: 8px 10px;
background: rgba(251, 191, 36, 0.08);
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.install-step-icon-caption {
font-size: 0.78rem;
color: #fbbf24;
font-weight: 600;
}
.install-success-hint {
margin-top: 12px;
padding: 12px;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.35);
border-radius: 10px;
font-size: 0.85rem;
line-height: 1.55;
color: #d1fae5;
}
/* ── Warning box for iOS non-Safari ── */
.install-warning-big {
display: flex;
gap: 14px;
padding: 14px;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: 12px;
}
.install-warning-icon { font-size: 2rem; line-height: 1; }
.install-warning-text strong {
display: block;
font-size: 1rem;
color: #fecaca;
margin-bottom: 6px;
}
.install-warning-text p {
margin: 0;
font-size: 0.85rem;
line-height: 1.55;
color: rgba(255,255,255,0.82);
}
/* ── Fallback box (Android manual steps) ── */
.install-fallback-box {
margin-top: 10px;
padding: 12px 14px;
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.35);
border-radius: 10px;
}
.install-fallback-box strong {
display: block;
font-size: 0.9rem;
color: #93c5fd;
margin-bottom: 8px;
}
.install-fallback-box ol {
margin: 0;
padding-left: 22px;
font-size: 0.82rem;
line-height: 1.65;
color: rgba(255,255,255,0.82);
}
.install-fallback-box li { margin-bottom: 4px; }
.install-fallback-box p {
margin: 0;
font-size: 0.82rem;
line-height: 1.55;
color: rgba(255,255,255,0.82);
}
/* ── Desktop: download + QR side-by-side ── */
.install-desktop-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 4px 0 12px;
}
.install-desktop-col {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.install-desktop-col-title {
font-size: 0.92rem;
font-weight: 700;
color: #fbbf24;
margin-bottom: 8px;
}
.install-desktop-col-desc {
margin: 0 0 10px 0;
font-size: 0.82rem;
line-height: 1.5;
color: rgba(255,255,255,0.82);
}
.install-desktop-download {
justify-content: center;
border-left: 3px solid #fbbf24;
}
.install-desktop-qr { border-left: 3px solid #60a5fa; }
.install-qr-img {
background: #fff;
border-radius: 10px;
padding: 6px;
max-width: 100%;
height: auto;
}
.install-desktop-note {
margin-top: 10px !important;
font-size: 0.8rem !important;
color: rgba(255,255,255,0.6) !important;
text-align: center;
}
@media (max-width: 560px) {
.install-desktop-grid { grid-template-columns: 1fr; }
}
/* ── Success confirmation ── */
.install-success-big { text-align: center; padding: 12px 0 24px; }
.install-success-check {
font-size: 4rem;
line-height: 1;
margin-bottom: 14px;
}
.install-success-msg {
font-size: 0.95rem;
line-height: 1.6;
color: rgba(255,255,255,0.88);
margin: 0 0 20px;
}
.install-success-preview {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 12px 18px;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.35);
border-radius: 14px;
}
.install-success-preview img {
border-radius: 18px;
box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.install-success-label {
font-weight: 700;
color: #f8fafc;
font-size: 0.95rem;
}
/* ================ INSTALL PROMPT BANNER ================ */
#install-prompt-banner {
position: fixed;
left: 12px; right: 12px; bottom: 48px;
max-width: 460px; margin: 0 auto;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: #f8fafc;
border: 1px solid rgba(251, 191, 36, 0.45);
border-radius: 14px;
padding: 12px 14px;
box-shadow: 0 12px 36px rgba(0,0,0,0.55);
display: flex; align-items: center; gap: 10px;
z-index: 950;
animation: installSlideUp 0.35s cubic-bezier(0.4, 0.8, 0.3, 1);
}
@keyframes installSlideUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
#install-prompt-banner .install-icon {
flex: 0 0 auto; font-size: 1.9rem;
}
#install-prompt-banner .install-text {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
font-size: 0.78rem; line-height: 1.4;
}
#install-prompt-banner .install-text strong {
color: #fbbf24; font-size: 0.88rem; font-weight: 800;
}
#install-prompt-banner .install-text span { color: #cbd5e1; }
#install-prompt-banner .install-text b { color: #fde68a; }
#install-prompt-banner .install-actions {
flex: 0 0 auto; display: flex; gap: 6px; align-items: center;
}
#install-prompt-banner .install-btn-primary {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1f1300; font-weight: 800;
border: none; border-radius: 8px;
padding: 10px 16px; cursor: pointer;
font-size: 0.85rem;
box-shadow: 0 4px 12px rgba(251,191,36,0.4);
white-space: nowrap;
}
#install-prompt-banner .install-btn-primary:hover { transform: translateY(-1px); }
#install-prompt-banner .install-btn-close {
background: transparent; color: #94a3b8;
border: 1px solid #334155; border-radius: 6px;
padding: 6px 10px; cursor: pointer; font-size: 0.8rem;
}
#install-prompt-banner .install-btn-close:hover {
color: #f8fafc; border-color: #64748b;
}
@media (max-width: 400px) {
#install-prompt-banner .install-text { font-size: 0.72rem; }
#install-prompt-banner .install-text strong { font-size: 0.8rem; }
#install-prompt-banner .install-btn-primary { padding: 8px 12px; font-size: 0.78rem; }
}
/* ================ COMMUNITY — VERIFIED PHYSICIAN POSTS ================ */
/* Dr. Kwang Lee posts get distinct treatment so patients can tell physician
content apart from anonymous peer posts at a glance. */
.com-post-card-verified {
border: 1.5px solid rgba(59, 130, 246, 0.55);
background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(0,0,0,0) 70%);
box-shadow: 0 6px 22px rgba(59, 130, 246, 0.10);
}
.com-post-card-verified .com-post-avatar {
background: radial-gradient(circle at 30% 30%, #dbeafe 0%, #93c5fd 80%);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.55);
}
.com-post-verified {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; margin-left: 5px;
background: #2563eb; color: #fff;
border-radius: 50%;
font-size: 0.62rem; font-weight: 900;
vertical-align: middle;
}
.com-post-pin {
display: inline-block;
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: #fff;
font-size: 0.68rem; font-weight: 700;
padding: 4px 10px;
border-radius: 0 0 8px 0;
margin: -14px 0 8px -14px;
letter-spacing: 0.02em;
}
/* ================ COMMUNITY — POST TEMPLATES ================ */
.com-new-templates {
background: rgba(251, 191, 36, 0.06);
border: 1px solid rgba(251, 191, 36, 0.22);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 16px;
}
.com-new-templates-label {
font-size: 0.82rem; color: #fbbf24; font-weight: 700;
margin-bottom: 10px;
}
.com-new-templates-row {
display: flex; flex-wrap: wrap; gap: 8px;
}
.com-new-template-chip {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(251, 191, 36, 0.32);
border-radius: 18px;
padding: 7px 12px;
font-size: 0.78rem; color: #e5e7eb;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.com-new-template-chip:hover, .com-new-template-chip:focus {
background: rgba(251, 191, 36, 0.12);
transform: translateY(-1px);
}
.com-new-template-ico { font-size: 1rem; }
/* ================ IMAGE ZOOM OVERLAY ================ */
/* Auto-applied to every img. Low-vision patients pinch or double-tap any
image to open full-screen with pinch-pan-zoom. See js/image-zoom.js. */
img:not(.no-zoom) { cursor: zoom-in; }
#img-zoom-overlay {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
}
#img-zoom-overlay .img-zoom-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.96);
backdrop-filter: blur(2px);
}
#img-zoom-overlay .img-zoom-stage {
position: relative; z-index: 1;
width: 100vw; height: 100vh;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
touch-action: none; /* disable browser pan/zoom — we handle it */
user-select: none;
-webkit-user-select: none;
}
#img-zoom-overlay .img-zoom-img {
max-width: 100vw; max-height: 100vh;
transform-origin: center center;
transition: transform 0.05s linear;
will-change: transform;
pointer-events: auto;
-webkit-user-drag: none;
}
#img-zoom-overlay .img-zoom-close {
position: absolute; top: 14px; right: 14px; z-index: 3;
width: 44px; height: 44px;
border: 1px solid rgba(255,255,255,0.3); border-radius: 50%;
background: rgba(0,0,0,0.6); color: #fff;
font-size: 1.1rem; font-weight: 700; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
#img-zoom-overlay .img-zoom-close:hover {
background: rgba(255,255,255,0.15);
}
#img-zoom-overlay .img-zoom-hint {
position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
z-index: 3;
display: flex; flex-direction: column; align-items: center; gap: 3px;
color: rgba(255,255,255,0.85);
font-size: 0.7rem; line-height: 1.4;
pointer-events: none;
text-align: center;
max-width: 80vw;
}
@media (min-width: 640px) {
#img-zoom-overlay .img-zoom-hint { flex-direction: row; gap: 16px; font-size: 0.78rem; }
}
#img-zoom-overlay .img-zoom-buttons {
position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
z-index: 3;
display: flex; gap: 10px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 32px;
padding: 6px 8px;
}
#img-zoom-overlay .img-zoom-ctrl {
width: 44px; height: 44px;
border: none; border-radius: 50%;
background: rgba(255,255,255,0.10); color: #fff;
font-size: 1.15rem; font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
#img-zoom-overlay .img-zoom-ctrl:hover, #img-zoom-overlay .img-zoom-ctrl:active {
background: rgba(255,255,255,0.22);
}
@media (prefers-reduced-motion: reduce) {
#img-zoom-overlay .img-zoom-img { transition: none; }
}
/* =====================================================================
2026-04-19 LATE NIGHT — CALMING WOOD-GRAIN HOME BACKGROUND
=====================================================================
Dr. Lee reported the app shakes on his phone. Root cause: 10+
concurrent GPU-intensive animations were running on the home screen
(aurora drift, ray rotate, grid drift, 60 particles, 15 sparkles,
neural network pulse, signal motion paths, binary stream scroll,
premium AI card conic-border spin + shimmer + sparkles + orbit +
icon float + CTA breathe + shimmer + sweep). On mobile GPUs this
caused continuous repaints → thermal throttling → frame drops.
Fix strategy:
(1) Disable the futuristic AI-themed layers (neural, binary) — they
made the home feel cluttered too.
(2) Freeze the aurora / rays / grid animations (keep the colors
as static backgrounds — no continuous animation).
(3) Add a warm, calming wood-grain SVG texture overlay.
(4) On mobile (≤480px) also freeze premium AI card's shimmer/orbit/
sparkles so the card is still beautiful (gradient + glow) but
not GPU-killing.
===================================================================== */
/* Warm cream/oak wood base replaces the original aurora-heavy palette */
.home-bg-base {
background:
linear-gradient(180deg,
#f8ecd4 0%,
#efdcb8 25%,
#e5caa0 55%,
#d4b388 80%,
#c29d72 100%) !important;
animation: none !important;
}
/* Wood-grain SVG texture — calming natural oak pattern, no animation.
More pronounced grain (higher contrast + denser vertical frequency)
+ two layered textures for depth (fine + coarse grain). */
.home-bg-base::after {
content: '';
position: absolute;
inset: 0;
background-image:
/* Coarse grain — long horizontal streaks like real wood rings */
url("data:image/svg+xml;utf8,"),
/* Fine grain — subtle noise for authenticity */
url("data:image/svg+xml;utf8,");
background-size: 900px 650px, 300px 220px;
background-repeat: repeat, repeat;
mix-blend-mode: multiply;
opacity: 0.72;
pointer-events: none;
}
/* Aurora — keep color distribution but STOP the 28s drift animation */
.home-bg-aurora {
animation: none !important;
opacity: 0.55;
filter: blur(90px);
}
/* Disable continuous rotations — they're the biggest GPU hogs */
.home-bg-rays { animation: none !important; opacity: 0.35; }
.home-bg-grid { animation: none !important; opacity: 0.55; }
/* ECG trace — keep its medical signature but reduce visibility */
.home-bg-ecg { opacity: 0.35; }
/* Neural network layer — disable completely (AI clutter + GPU heavy) */
.home-bg-neural { display: none !important; }
/* Binary data stream — disable completely */
.home-bg-binary { display: none !important; }
/* Rainbow bubbles — KEEP these! Dr. Lee loves them. They rise bottom→top
with varying sizes and 6 cycling colors (mint/pink/lavender/peach/cyan/blue).
GPU-friendly because they only animate translateY + opacity, no filters
or heavy compositing. Now that neural/binary/aurora/rays are disabled
we have plenty of GPU budget for these. */
.home-bg-particles span:nth-child(n+41) { display: none !important; } /* keep 40 */
/* Leave default opacity / animation duration alone — the original 16s
rise was beautifully paced. */
/* Sparkles — keep a few gentle twinkles for warmth */
.home-bg-sparkles span:nth-child(n+8) { display: none !important; }
/* ── Mobile (≤480px): also freeze the premium AI card's loudest animations
so the card is still a visual anchor but doesn't jitter the viewport. ── */
@media (max-width: 480px) {
.mode-card.premium-ai {
animation: none !important;
}
.mode-card.premium-ai::before,
.mode-card.premium-ai .pai-shimmer,
.mode-card.premium-ai .pai-orbit,
.mode-card.premium-ai .pai-icon,
.mode-card.premium-ai .pai-model-name,
.mode-card.premium-ai .pai-chip-hot,
.mode-card.premium-ai .pai-cta-btn,
.mode-card.premium-ai .pai-cta-btn::before {
animation: none !important;
}
.mode-card.premium-ai .pai-sparkles { display: none !important; }
/* Keep the hero AI badge simple too */
.hab-chip { animation: none !important; }
.hab-robot { animation: none !important; }
.hab-label { animation: none !important; }
.hab-pulse { animation: none !important; }
/* Doctor-portrait ECG monitor: keep the static signature */
}
/* =====================================================================
UNIFIED MODE TILE APPEARANCE (2026-04-19 night — Dr. Lee request)
All mode cards (Symptom Education, Functional Medicine, Cancer,
Body Exercises, Bookmarks, Community, Anatomy, Nutrients) should
look like Image Reading (white glass) — only the ICON color stays
as a visual accent. This overrides per-feature tints that made the
home grid look inconsistent.
===================================================================== */
.mode-card.selfdx-cta,
.mode-card.funcmed-cta,
.mode-card.cancer-cta,
.mode-card.bodyex-cta,
.mode-card.bookmarks-cta,
.mode-card.community-cta,
.mode-card.anatomy-cta,
.mode-card.nutrients-cta {
background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.72) 100%) !important;
border: 1px solid rgba(255,255,255,0.8) !important;
}
.mode-card.selfdx-cta:hover,
.mode-card.funcmed-cta:hover,
.mode-card.cancer-cta:hover,
.mode-card.bodyex-cta:hover,
.mode-card.bookmarks-cta:hover,
.mode-card.community-cta:hover,
.mode-card.anatomy-cta:hover,
.mode-card.nutrients-cta:hover {
background: rgba(255,255,255,0.95) !important;
border-color: rgba(92,184,242,0.55) !important;
}