/* 머 하려고 했지? theme for the shared guide engine: the green #568F48 of the app icon and the default memo list,
   on the light mint (#E5F9E0) of the icon bubble. */
:root {
  --navy: #F7FBF5; --navy2: #FFFFFF; --card: #FFFFFF; --card2: #EAF4E6; --line: rgba(60,100,50,.08);
  --red: #4E8540; --red-rgb: 78,133,64; --page: #EFF6EC; --glow: #E5F9E0; --scr: #FFFFFF; --sb-ink: #1C2419;
  --ink: #1C2419; --sub: #59654F; --faint: #93A08A;
  --tint: rgba(78,133,64,.08); --tint2: rgba(78,133,64,.15);
}
#stage { background: radial-gradient(1200px 800px at 18% 30%, var(--glow) 0%, transparent 60%),
  radial-gradient(900px 700px at 95% 110%, rgba(86,143,72,.20) 0%, transparent 60%), var(--navy); }
.brand img { box-shadow: 0 6px 18px rgba(60,80,50,.22); }
.brand span { border-left-color: rgba(60,100,50,.2); }
.rail i { background: var(--tint); }
.rail i.done { background: var(--tint2); }
.progress span { background: var(--tint2); }
.phone { box-shadow: 0 40px 90px rgba(40,70,35,.26), 0 0 0 1.5px rgba(255,255,255,.08) inset, 0 0 0 2px #05080B; }
.phone .home { background: rgba(30,30,40,.35); }
.plat b { background: var(--tint); }
.callout { box-shadow: 0 18px 40px rgba(40,70,35,.22); color: var(--ink); }
.step { background: var(--tint); }
.step .ms { background: var(--tint2); }
.step.now { background: #fff; box-shadow: 0 12px 30px rgba(40,70,35,.14); }
.desc { background: linear-gradient(135deg, rgba(var(--red-rgb),.10), rgba(255,255,255,.75));
  box-shadow: inset 0 0 0 1px rgba(var(--red-rgb),.2), 0 16px 34px rgba(40,70,35,.12); }
.hero .appicon { box-shadow: 0 30px 70px rgba(60,90,50,.3), 0 0 0 1px rgba(60,100,50,.1); }
.gphone { box-shadow: 0 24px 50px rgba(40,70,35,.25); }
.dock { background: rgba(255,255,255,.88); box-shadow: 0 12px 30px rgba(40,70,35,.18); color: var(--sub); }
.dk:hover { background: var(--tint); }
.dk:active { background: var(--tint2); }
.dk-sep { background: rgba(60,100,50,.16); }
.toc .box { background: #fff; box-shadow: 0 30px 80px rgba(40,70,35,.25); }
.toc button.it, .toc button.lg { background: var(--tint); }
.toc button.it:hover, .toc button.lg:hover { background: var(--tint2); }
.toc .langs { border-bottom-color: rgba(60,100,50,.12); }
body.presenter { background: var(--page); }
.pv .next, .pv .ctl button { background: var(--tint); }
.pv .ctl button:active { background: var(--tint2); }
.disc:empty { display: none; }
.gphone p { color: rgba(255,255,255,.72); }
.gallery.focus .gphone.now p { color: #fff; }
/* Keep longer translated intro labels inside their cards in both stage layouts. */
.tabs6 > div { padding-inline: 12px; overflow-wrap: anywhere; text-wrap: balance; }
body:not(.portrait) .desc.about p { font-size: 20px; gap: 6px; line-height: 1.4; }
body:not(.portrait) .desc.about .ab em { font-size: 15px; padding: 2px 10px 2px 6px; }